// tweaks-controller.jsx — Pipewerk feel controls // Three expressive knobs that reshape the whole site: // atmosphere — Daylight (warm paper, current) / Twilight (dusky earthen) / Workshop (full dark) // voice — Quiet (editorial) / Confident (current) / Loud (declarative) // markShape — Anchored (pipe attached) / Detached (gap pipe) / Free (no pipe) const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "atmosphere": "daylight", "voice": "confident", "markShape": "anchored" }/*EDITMODE-END*/; // Context so PWMark instances deep in the tree can read markShape without prop drilling window.PWTweaksContext = React.createContext({ markShape: "anchored" }); function PipewerkTweaks({ children }) { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply atmosphere + voice as data-attributes on so CSS picks them up React.useEffect(() => { document.documentElement.setAttribute("data-atmosphere", t.atmosphere); document.documentElement.setAttribute("data-voice", t.voice); }, [t.atmosphere, t.voice]); return ( {children} setTweak("atmosphere", v)} /> setTweak("voice", v)} /> setTweak("markShape", v)} /> ); } Object.assign(window, { PipewerkTweaks });