/* NutriDMS, API Sandbox Tweaks Three expressive controls that reshape the feel of the page: 1. Vibe , Studio (default clinical), Terminal (mono on dark), Editorial (warm cream + display serif) 2. Accent, palette swatches that re-tint the green identity (Forest, Sandstone, Cobalt, Plum) 3. Hero , Cover photo, Banner strip, or Hidden (chrome-first) Applied as data-* attributes on ; overrides live in sandbox-tweaks.css. */ const SBOX_TWEAK_DEFAULTS = window.SBOX_TWEAK_DEFAULTS || { vibe: "studio", accent: "forest", hero: "cover" }; function SandboxTweaks() { const [t, setTweak] = useTweaks(SBOX_TWEAK_DEFAULTS); React.useEffect(() => { const r = document.documentElement; r.setAttribute("data-sb-vibe", t.vibe); r.setAttribute("data-sb-accent", t.accent); r.setAttribute("data-sb-hero", t.hero); }, [t.vibe, t.accent, t.hero]); return ( setTweak("vibe", v)} /> setTweak("accent", v)} /> setTweak("hero", v)} /> ); } /* Accent picker rendered as palette swatch chips. We bypass TweakColor's value-equality (which compares the full array) because our stored value is a short string id like "sandstone", easier to read in the EDITMODE block. */ function AccentChips({ value, onChange }) { const ACCENTS = [ { id: "forest", colors: ["#3B7C0F", "#669F2A", "#E8F4D4"] }, { id: "sandstone", colors: ["#C05621", "#ED8936", "#FFF6EB"] }, { id: "cobalt", colors: ["#1E4FCC", "#3B82F6", "#E0EAFF"] }, { id: "plum", colors: ["#6B21A8", "#A855F7", "#F3E8FF"] }]; return (

{ACCENTS.map((a) => { const on = a.id === value; const [hero, ...rest] = a.colors; return ( ); })}

); } /* Mount in its own root so we never touch sandbox.jsx. */ (function () { const host = document.createElement("div"); host.id = "sandbox-tweaks-root"; document.body.appendChild(host); ReactDOM.createRoot(host).render(); })();