// site-tweaks.jsx — Tweaks panel for Kim Inouye consulting site. // All controls map to data-* attributes on ; CSS in the page does the rest. function TweakApp() { const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS); React.useEffect(() => { const root = document.documentElement; root.setAttribute("data-palette", t.palette || "cocoa"); root.setAttribute("data-bullets", t.bullets === false ? "off" : "on"); root.setAttribute("data-portrait", t.portrait || "bw"); root.setAttribute("data-svc", t.svc || "four"); root.setAttribute("data-clients", t.clients || "strip"); }, [t.palette, t.bullets, t.portrait, t.svc, t.clients]); const PALETTES = [ { id: "cocoa", label: "Cocoa", sub: "Warm espresso", swatch: ["oklch(0.150 0.018 52)", "oklch(0.300 0.016 60)", "oklch(0.944 0.029 70)"] }, { id: "linen", label: "Linen", sub: "Creamy paper", swatch: ["oklch(0.170 0.013 92)", "oklch(0.310 0.011 90)", "oklch(0.953 0.026 96)"] }, { id: "stone", label: "Stone", sub: "Cool neutral", swatch: ["oklch(0.156 0.003 250)", "oklch(0.306 0.004 250)", "oklch(0.950 0.003 250)"] }, ]; return (

{PALETTES.map((p) => { const active = (t.palette || "cocoa") === p.id; return ( ); })}

setTweak("svc", v)} /> setTweak("bullets", v)} /> setTweak("portrait", v)} /> setTweak("clients", v)} /> ); } ReactDOM.createRoot(document.getElementById("tweaks-mount")).render();