// // tweaks-panel.jsx
// // Reusable Tweaks shell + form-control helpers.
// //
// // Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
// // posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
// // individual prototypes don't re-roll it. Ships a consistent set of controls so you
// // don't hand-draw
// // Hello
// //
// // setTweak('fontSize', v)} />
// // setTweak('density', v)} />
// // setTweak('primaryColor', v)} />
// // setTweak('palette', v)} />
// // setTweak('dark', v)} />
// //
// //
// // );
// // }
// //
// // ─────────────────────────────────────────────────────────────────────────────
// const __TWEAKS_STYLE = `
// .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
// max-height:calc(100vh - 32px);display:flex;flex-direction:column;
// transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom right;
// background:rgba(250,249,247,.78);color:#29261b;
// -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
// border:.5px solid rgba(255,255,255,.6);border-radius:14px;
// box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
// font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
// .twk-hd{display:flex;align-items:center;justify-content:space-between;
// padding:10px 8px 10px 14px;cursor:move;user-select:none}
// .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
// .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
// width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
// .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
// .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
// overflow-y:auto;overflow-x:hidden;min-height:0;
// scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
// .twk-body::-webkit-scrollbar{width:8px}
// .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
// .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
// border:2px solid transparent;background-clip:content-box}
// .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
// border:2px solid transparent;background-clip:content-box}
// .twk-row{display:flex;flex-direction:column;gap:5px}
// .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
// .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
// color:rgba(41,38,27,.72)}
// .twk-lbl>span:first-child{font-weight:500}
// .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
// .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
// color:rgba(41,38,27,.45);padding:10px 0 0}
// .twk-sect:first-child{padding-top:0}
// .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;
// border:.5px solid rgba(0,0,0,.1);border-radius:7px;
// background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
// .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
// select.twk-field{padding-right:22px;
// background-image:url("data:image/svg+xml;utf8, is on the page. The
// // toggle drives the deck's per-viewer _railVisible via window message;
// // state is mirrored from the same localStorage key the deck reads so
// // the control reflects reality across reloads. The mechanism is the
// // message — authors who want custom placement can post it directly
// // and pass noDeckControls to suppress this one.
// const hasDeckStage = React.useMemo(
// () => typeof document !== 'undefined' && !!document.querySelector('deck-stage'),
// [],
// );
// // deck-stage enables its rail in connectedCallback, but this panel can
// // mount before that element has upgraded. The initial read catches the
// // common case; the listener covers mounting first. (Older deck-stage.js
// // copies still wait for the host's __omelette_rail_enabled postMessage —
// // same listener handles those.)
// const [railEnabled, setRailEnabled] = React.useState(
// () => hasDeckStage && !!document.querySelector('deck-stage')?._railEnabled,
// );
// React.useEffect(() => {
// if (!hasDeckStage || railEnabled) return undefined;
// const onMsg = (e) => {
// if (e.data && e.data.type === '__omelette_rail_enabled') setRailEnabled(true);
// };
// window.addEventListener('message', onMsg);
// return () => window.removeEventListener('message', onMsg);
// }, [hasDeckStage, railEnabled]);
// const [railVisible, setRailVisible] = React.useState(() => {
// try { return localStorage.getItem('deck-stage.railVisible') !== '0'; } catch (e) { return true; }
// });
// const toggleRail = (on) => {
// setRailVisible(on);
// window.postMessage({ type: '__deck_rail_visible', on }, '*');
// };
// const offsetRef = React.useRef({ x: 16, y: 16 });
// const PAD = 16;
// const clampToViewport = React.useCallback(() => {
// const panel = dragRef.current;
// if (!panel) return;
// const w = panel.offsetWidth, h = panel.offsetHeight;
// const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
// const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
// offsetRef.current = {
// x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
// y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
// };
// panel.style.right = offsetRef.current.x + 'px';
// panel.style.bottom = offsetRef.current.y + 'px';
// }, []);
// React.useEffect(() => {
// if (!open) return;
// clampToViewport();
// if (typeof ResizeObserver === 'undefined') {
// window.addEventListener('resize', clampToViewport);
// return () => window.removeEventListener('resize', clampToViewport);
// }
// const ro = new ResizeObserver(clampToViewport);
// ro.observe(document.documentElement);
// return () => ro.disconnect();
// }, [open, clampToViewport]);
// React.useEffect(() => {
// const onMsg = (e) => {
// const t = e?.data?.type;
// if (t === '__activate_edit_mode') setOpen(true);
// else if (t === '__deactivate_edit_mode') setOpen(false);
// };
// window.addEventListener('message', onMsg);
// window.parent.postMessage({ type: '__edit_mode_available' }, '*');
// return () => window.removeEventListener('message', onMsg);
// }, []);
// const dismiss = () => {
// setOpen(false);
// window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
// };
// const onDragStart = (e) => {
// const panel = dragRef.current;
// if (!panel) return;
// const r = panel.getBoundingClientRect();
// const sx = e.clientX, sy = e.clientY;
// const startRight = window.innerWidth - r.right;
// const startBottom = window.innerHeight - r.bottom;
// const move = (ev) => {
// offsetRef.current = {
// x: startRight - (ev.clientX - sx),
// y: startBottom - (ev.clientY - sy),
// };
// clampToViewport();
// };
// const up = () => {
// window.removeEventListener('mousemove', move);
// window.removeEventListener('mouseup', up);
// };
// window.addEventListener('mousemove', move);
// window.addEventListener('mouseup', up);
// };
// if (!open) return null;
// return (
// <>
//
//
//
// {title}
// e.stopPropagation()}
// onClick={dismiss}>✕
//
//
// {children}
// {hasDeckStage && railEnabled && !noDeckControls && (
//
//
// )}
//
//
{label}
// {children}
//
// );
// }
// function TweakRow({ label, value, children, inline = false }) {
// return (
//
//
// {label}
// {value != null && {value} }
//
// {children}
//
//
// );
// }
// function TweakToggle({ label, value, onChange }) {
// return (
//
//
{label}
//
onChange(!value)}>
//
emits strings — map back to the original option value so the
// // fallback stays type-preserving (numbers, booleans) like the segment path.
// const resolve = (s) => {
// const m = options.find((o) => String(typeof o === 'object' ? o.value : o) === s);
// return m === undefined ? s : typeof m === 'object' ? m.value : m;
// };
// return onChange(resolve(s))} />;
// }
// const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
// const idx = Math.max(0, opts.findIndex((o) => o.value === value));
// const n = opts.length;
// const segAt = (clientX) => {
// const r = trackRef.current.getBoundingClientRect();
// const inner = r.width - 4;
// const i = Math.floor(((clientX - r.left - 2) / inner) * n);
// return opts[Math.max(0, Math.min(n - 1, i))].value;
// };
// const onPointerDown = (e) => {
// setDragging(true);
// const v0 = segAt(e.clientX);
// if (v0 !== valueRef.current) onChange(v0);
// const move = (ev) => {
// if (!trackRef.current) return;
// const v = segAt(ev.clientX);
// if (v !== valueRef.current) onChange(v);
// };
// const up = () => {
// setDragging(false);
// window.removeEventListener('pointermove', move);
// window.removeEventListener('pointerup', up);
// };
// window.addEventListener('pointermove', move);
// window.addEventListener('pointerup', up);
// };
// return (
//
//
//
// {opts.map((o) => (
//
// {o.label}
//
// ))}
//
// );
// }
// function TweakSelect({ label, value, options, onChange }) {
// return (
//
// onChange(e.target.value)}>
// {options.map((o) => {
// const v = typeof o === 'object' ? o.value : o;
// const l = typeof o === 'object' ? o.label : o;
// return {l} ;
// })}
//
//
// );
// }
// function TweakText({ label, value, placeholder, onChange }) {
// return (
//
//
// );
// }
// function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
// const clamp = (n) => {
// if (min != null && n < min) return min;
// if (max != null && n > max) return max;
// return n;
// };
// const startRef = React.useRef({ x: 0, val: 0 });
// const onScrubStart = (e) => {
// e.preventDefault();
// startRef.current = { x: e.clientX, val: value };
// const decimals = (String(step).split('.')[1] || '').length;
// const move = (ev) => {
// const dx = ev.clientX - startRef.current.x;
// const raw = startRef.current.val + dx * step;
// const snapped = Math.round(raw / step) * step;
// onChange(clamp(Number(snapped.toFixed(decimals))));
// };
// const up = () => {
// window.removeEventListener('pointermove', move);
// window.removeEventListener('pointerup', up);
// };
// window.addEventListener('pointermove', move);
// window.addEventListener('pointerup', up);
// };
// return (
//
// {label}
// {unit} }
//
// );
// }
// // Relative-luminance contrast pick — checkmarks drawn over a swatch need to
// // read on both #111 and #fafafa without per-option configuration. Hex input
// // only (#rgb / #rrggbb); named or rgb()/hsl() colors fall through to "light".
// function __twkIsLight(hex) {
// const h = String(hex).replace('#', '');
// const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, '0');
// const n = parseInt(x.slice(0, 6), 16);
// if (Number.isNaN(n)) return true;
// const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
// return r * 299 + g * 587 + b * 114 > 148000;
// }
// const __TwkCheck = ({ light }) => (
//
//
// );
// // TweakColor — curated color/palette picker. Each option is either a single
// // hex string or an array of 1-5 hex strings; the card adapts — a lone color
// // renders solid, a palette renders colors[0] as the hero (left ~2/3) with the
// // rest stacked in a sharp column on the right. onChange emits the
// // option in the shape it was passed (string stays string, array stays array).
// // Without options it falls back to the native color input for back-compat.
// function TweakColor({ label, value, options, onChange }) {
// if (!options || !options.length) {
// return (
//
//
{label}
//
onChange(e.target.value)} />
//
//
// {options.map((o, i) => {
// const colors = Array.isArray(o) ? o : [o];
// const [hero, ...rest] = colors;
// const sup = rest.slice(0, 4);
// const on = key(o) === cur;
// return (
// onChange(o)}>
// {sup.length > 0 && (
//
// {sup.map((c, j) =>
// )}
// {on && <__TwkCheck light={__twkIsLight(hero)} />}
//
// );
// })}
//
//
// );
// }
// function TweakButton({ label, onClick, secondary = false }) {
// return (
// {label}
// );
// }
// Object.assign(window, {
// useTweaks, TweaksPanel, TweakSection, TweakRow,
// TweakSlider, TweakToggle, TweakRadio, TweakSelect,
// TweakText, TweakNumber, TweakColor, TweakButton,
// });