// nvEnvy — Tweaks panel wiring. Drives data-* attributes which
// the stylesheet keys off. Accent options are sampled directly from the
// app icon: spiral coral, stem sage, notepad navy, petal coral, pad gold.
const NVE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "light",
"accent": "coral",
"density": "regular"
}/*EDITMODE-END*/;
const ACCENT_SWATCHES = [
{ name: 'coral', hex: '#D5754A' },
{ name: 'sage', hex: '#7A8954' },
{ name: 'navy', hex: '#1F2754' },
{ name: 'petal', hex: '#C46B5D' },
{ name: 'gold', hex: '#C99840' },
];
function NvEnvyTweaks() {
const [t, setTweak] = useTweaks(NVE_TWEAK_DEFAULTS);
React.useEffect(() => {
const html = document.documentElement;
html.dataset.theme = t.theme;
html.dataset.accent = t.accent;
html.dataset.density = t.density;
}, [t.theme, t.accent, t.density]);
// Map swatch hex → named accent and back. Lowercase comparison
// because emits lowercase per spec.
const accentByHex = {};
ACCENT_SWATCHES.forEach((s) => { accentByHex[s.hex.toLowerCase()] = s.name; });
const currentHex = ACCENT_SWATCHES.find((s) => s.name === t.accent)?.hex
|| ACCENT_SWATCHES[0].hex;
return (
setTweak('theme', v)}
/>
setTweak('density', v)}
/>
s.hex)}
onChange={(hex) => {
const name = accentByHex[hex.toLowerCase()] || 'coral';
setTweak('accent', name);
}}
/>
);
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();