function App() {
const [tweaks, setTweaks] = useState(() => ({ ...window.TWEAK_DEFAULTS }));
const [tweaksOpen, setTweaksOpen] = useState(false);
const [favCount, setFavCount] = useState(() => {
try { return JSON.parse(localStorage.getItem("cal:favs") || "[]").length; } catch { return 0; }
});
// apply tweaks to css
useEffect(() => { applyTweaks(tweaks); }, [tweaks]);
// favs sync
useEffect(() => {
const h = (e) => setFavCount((e.detail || []).length);
window.addEventListener("favsChanged", h);
return () => window.removeEventListener("favsChanged", h);
}, []);
// host edit mode handshake
useEffect(() => {
const onMsg = (e) => {
const d = e.data || {};
if (d.type === "__activate_edit_mode") setTweaksOpen(true);
if (d.type === "__deactivate_edit_mode") setTweaksOpen(false);
};
window.addEventListener("message", onMsg);
try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch {}
return () => window.removeEventListener("message", onMsg);
}, []);
const [activeStory, setActiveStory] = useState(null);
const toggleDark = () => setTweaks(t => ({ ...t, dark: !t.dark }));
return (
<>
{/* Floating toggle for Tweaks panel when host hasn't activated */}
{!tweaksOpen && (
)}
{tweaksOpen && setTweaksOpen(false)} />}
{activeStory && setActiveStory(null)} />}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();