/* global React */
const { useState, useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "system",
"accent": "auto",
"numerals": "drop",
"orient": "horizontal",
"footer": "branded",
"displayWeight": 300,
"wonk": 1,
"rule": 0.5
}/*EDITMODE-END*/;
function KrlTweaks() {
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
// Apply tweaks to attributes / CSS vars
useEffect(() => {
const b = document.body;
b.dataset.theme = t.theme;
b.dataset.accent = t.accent;
b.dataset.numerals = t.numerals;
// Orient: respect responsive override on mobile. The user's preference is preserved
// on data-orient-pref so it kicks back in when the viewport widens.
b.dataset.orientPref = t.orient;
b.dataset.orient = (window.innerWidth <= 560) ? 'vertical' : t.orient;
b.dataset.footer = t.footer;
b.style.setProperty('--t-display-weight', String(t.displayWeight));
b.style.setProperty('--t-wonk', String(t.wonk));
b.style.setProperty('--t-rule-w', t.rule + 'px');
}, [t]);
// Auto accent: when accent is "auto", track theme (and OS pref if theme=system).
// Dark → blue, Light → oxblood. CSS handles this via [data-accent="auto"] selectors,
// but we also keep a data-accent-resolved attribute synced for any JS that reads it.
useEffect(() => {
if (t.accent !== 'auto') {
document.body.dataset.accentResolved = t.accent;
return;
}
const mq = window.matchMedia('(prefers-color-scheme: dark)');
const resolve = () => {
const dark = t.theme === 'dark' || (t.theme === 'system' && mq.matches);
document.body.dataset.accentResolved = dark ? 'blue' : 'oxblood';
};
resolve();
if (t.theme === 'system') {
mq.addEventListener('change', resolve);
return () => mq.removeEventListener('change', resolve);
}
}, [t.accent, t.theme]);
const {
TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakSlider, TweakToggle,
} = window;
return (
setTweak('theme', v)} />
setTweak('accent', v)} />
setTweak('numerals', v)} />
setTweak('displayWeight', v)} />
setTweak('wonk', v)} />
setTweak('orient', v)} />
setTweak('rule', v)} />
setTweak('footer', v)} />
);
}
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render();