// Tweaks panel โ€” live design knobs synced to attrs function Tweaks() { const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{ "theme": "dark", "accent": "navy", "density": "default", "typeface": "condensed", "mapStyle": "blueprint", "heroAnim": true }/*EDITMODE-END*/; const [open, setOpen] = useState(false); const [active, setActive] = useState(false); const [tweaks, setTweaks] = useState(TWEAK_DEFAULS); // Apply tweaks to html useEffect(() => { const root = document.documentElement; root.setAttribute("data-theme", tweaks.theme); root.setAttribute("data-accent", tweaks.accent); root.setAttribute("data-density", tweaks.density); root.setAttribute("data-typeface", tweaks.typeface); root.setAttribute("data-map-style", tweaks.mapStyle); window.__heroAnim = tweaks.heroAnim; }, [tweaks]); // Host handshake useEffect(() => { const onMsg = (e) => { if (e.data?.type === "__activate_edit_mode") { setActive(true); setOpen(true); } if (e.data?.type === "__deactivate_edit_mode") { setActive(false); setOpen(false); } }; window.addEventListener("message", onMsg); window.parent.postMessage({ type: "__edit_mode_available" }, "*"); return () => window.removeEventListener("message", onMsg); }, []); const update = (key, value) => { setTweaks(prev => { const next = { ...prev, [key]: value }; window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*"); return next; }); }; if (!active) return null; const Row = ({ label, val, options, onChange, render }) => (
{label}
{options.map(opt => ( render ? render(opt, val === opt, () => onChange(opt)) : ))}
); const swatches = { amber: "#e0a84a", od: "#8a9a5b", navy: "#4a7ac9", crimson: "#b84a3a", bone: "#e8e0ce" }; return (
โ—† TWEAKS ยท DESIGN OPS
update("theme", v)} /> update("accent", v)} render={(opt, isActive, onClick) => (
); } // ==================== APP ==================== function App() { const [heroAnim, setHeroAnim] = useState(true); useEffect(() => { const check = () => { const root = document.documentElement; setHeroAnim(window.__heroAnim !== false); }; check(); const i = setInterval(check, 200); return () => clearInterval(i); }, []); return ( <>