const { useState, useEffect } = React; // Apply tweaks to const applyTweaks = (t) => { const el = document.documentElement; el.setAttribute("data-card", t.cardStyle); el.setAttribute("data-cyan", t.cyanDepth); el.setAttribute("data-sidebar", t.sidebarSide); el.setAttribute("data-font", t.fontFamily); el.setAttribute("data-density", t.density); el.setAttribute("data-dark", String(!!t.darkMode)); }; const Seg = ({ value, options, onChange }) => (
{options.map(o => ( ))}
); const TweaksPanel = ({ active, tweaks, setTweaks }) => { const set = (k, v) => setTweaks({ ...tweaks, [k]: v }); return (
TWEAKS DESIGN
set("cardStyle", v)} options={[{v:"square",l:"直線"},{v:"rounded",l:"標準"},{v:"soft",l:"丸め"}]}/>
set("cyanDepth", v)} options={[{v:"light",l:"淡い"},{v:"balanced",l:"標準"},{v:"bold",l:"濃い"}]}/>
set("sidebarSide", v)} options={[{v:"left",l:"左"},{v:"right",l:"右"}]}/>
set("fontFamily", v)} options={[{v:"gothic",l:"ゴシック"},{v:"mincho",l:"明朝"},{v:"maru",l:"丸ゴ"}]}/>
set("density", v)} options={[{v:"compact",l:"詰め"},{v:"comfortable",l:"標準"},{v:"airy",l:"ゆったり"}]}/>
); }; const App = () => { const D = window.BLOG_DATA; const [tweaks, setTweaks] = useState(window.TWEAKS); const [editActive, setEditActive] = useState(false); useEffect(() => { applyTweaks(tweaks); }, [tweaks]); // Edit-mode protocol useEffect(() => { const handler = (e) => { const d = e.data || {}; if (d.type === "__activate_edit_mode") setEditActive(true); else if (d.type === "__deactivate_edit_mode") setEditActive(false); }; window.addEventListener("message", handler); window.parent.postMessage({ type: "__edit_mode_available" }, "*"); return () => window.removeEventListener("message", handler); }, []); // Persist tweaks via host const updateTweaks = (next) => { setTweaks(next); try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*"); } catch {} }; return (