/* ═══════════════════════════════════════════════════════════════ 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") || "calm", hero: r.getAttribute("data-hero") || "liquidgold", name: r.getAttribute("data-name") || "monogram", // Drifting-particle layer — on by default (data-particles="off" to start hidden). particles: r.getAttribute("data-particles") !== "off", // Mobile menu concept — Editorial index (02) is the default. menu: r.getAttribute("data-menu") || "editorial", // Gallery image grade (Locations) — percentages; saturation eased back by default. gallerySat: 85, galleryBri: 100, galleryCon: 100 }; })(); // Only the Locations page carries the gallery, so its sliders show only there. const HAS_GALLERY = !!document.getElementById("galTrack"); // [bg-deep, accent, gold] per palette — drives the three-band swatch chip. // The original four "worlds" plus the four named handoff palettes (prototype-5). const AB_SWATCHES = { heritage: ["#EAD6CC", "#C2867F", "#B68B4C"], midnight: ["#15110E", "#CBA463", "#C28F87"], coastal: ["#D6D0C2", "#7C8B90", "#A98F63"], horizon: ["#0F1A22", "#5FA8B0", "#D9A066"], warm: ["#E3D8CC", "#7BA8D1", "#D4AF75"], cool: ["#DCE2EA", "#1E40AF", "#B8B8B8"], luxury: ["#180E08", "#B07B53", "#D4AF75"], rosegold: ["#EBD4C9", "#A84E2A", "#C17A4E"], pool: ["#CDE9EE", "#0E7FA8", "#13A8C6"], tropical: ["#EBDFC8", "#0E8FA0", "#13B0A0"] }; const AB_PALETTE_LABEL = { heritage: "Heritage", midnight: "Midnight", coastal: "Coastal", horizon: "Horizon", warm: "Warm", cool: "Cool", luxury: "Luxury", rosegold: "Rose-Gold", pool: "Pool", tropical: "Tropical" }; function PaletteChips({ value, onChange }) { const keys = Object.keys(AB_SWATCHES); return (

Color world {AB_PALETTE_LABEL[value] || value}

{/* 8 palettes → wrap into rows of four so each swatch stays legible. */}

{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("particles", v)} /> setTweak("typeset", v)} /> setTweak("name", v)} /> setTweak("menu", v)} /> {HAS_GALLERY && ( <> setTweak("gallerySat", v)} /> setTweak("galleryBri", v)} /> setTweak("galleryCon", 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(); })();