/* ═══════════════════════════════════════════════════════════════ AMBER BLAKE — Tweaks app (drives window.AB.apply) ═══════════════════════════════════════════════════════════════ */ // Prototype-4 is multi-page: each page declares its own world / hero / identity // on . Seed the panel from those attributes so the control always // opens reflecting the page you're on, and the project-wide defaults (subtle // motion · Couture · AB monogram) are the fallback when an attribute is absent. const TWEAK_DEFAULTS = (function () { const r = document.documentElement; return { palette: r.getAttribute("data-palette") || "heritage", typeset: r.getAttribute("data-type") || "couture", motion: r.getAttribute("data-motion") || "subtle", hero: r.getAttribute("data-hero") || "liquidgold", name: r.getAttribute("data-name") || "monogram" }; })(); const AB_SWATCHES = { heritage: ["#EAD6CC", "#C2867F", "#B68B4C"], midnight: ["#15110E", "#CBA463", "#C28F87"], coastal: ["#D6D0C2", "#7C8B90", "#A98F63"], horizon: ["#0F1A22", "#5FA8B0", "#D9A066"] }; function PaletteChips({ value, onChange }) { const keys = Object.keys(AB_SWATCHES); return (

Color world {value}

{keys.map((k) => { const cols = AB_SWATCHES[k]; const on = k === value; return ( ); })}

); } function AmberTweaks() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); React.useEffect(() => { if (window.AB && window.AB.apply) window.AB.apply(t); }, [t]); return ( setTweak("palette", v)} /> setTweak("hero", v)} /> setTweak("motion", v)} /> setTweak("typeset", v)} /> setTweak("name", v)} /> ); } (function mount() { function go() { var host = document.createElement("div"); host.id = "ab-tweaks-root"; document.body.appendChild(host); ReactDOM.createRoot(host).render(React.createElement(AmberTweaks)); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go); else go(); })();