// DesignCanvas.jsx — Figma-ish design canvas wrapper // Warm gray grid bg + Sections + Artboards + PostIt notes. // Artboards are reorderable (grip-drag), labels/titles are inline-editable, // and any artboard can be opened in a fullscreen focus overlay (←/→/Esc). // State persists to a .design-canvas.state.json sidecar via the host // bridge. No assets, no deps. // // Usage: // // // … // … // // const DC = { bg: '#f0eee9', grid: 'rgba(0,0,0,0.06)', label: 'rgba(60,50,40,0.7)', title: 'rgba(40,30,20,0.85)', subtitle: 'rgba(60,50,40,0.6)', postitBg: '#fef4a8', postitText: '#5a4a2a', font: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif', }; // One-time CSS injection (classes are dc-prefixed so they don't collide with // the hosted design's own styles). if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) { const s = document.createElement('style'); s.id = 'dc-styles'; s.textContent = [ '.dc-editable{cursor:text;outline:none;white-space:nowrap;border-radius:3px;padding:0 2px;margin:0 -2px}', '.dc-editable:focus{background:#fff;box-shadow:0 0 0 1.5px #c96442}', '[data-dc-slot]{transition:transform .18s cubic-bezier(.2,.7,.3,1)}', '[data-dc-slot].dc-dragging{transition:none;z-index:10;pointer-events:none}', '[data-dc-slot].dc-dragging .dc-card{box-shadow:0 12px 40px rgba(0,0,0,.25),0 0 0 2px #c96442;transform:scale(1.02)}', '.dc-card{transition:box-shadow .15s,transform .15s}', '.dc-card *{scrollbar-width:none}', '.dc-card *::-webkit-scrollbar{display:none}', '.dc-labelrow{display:flex;align-items:center;gap:4px;height:24px}', '.dc-grip{cursor:grab;display:flex;align-items:center;padding:5px 4px;border-radius:4px;transition:background .12s}', '.dc-grip:hover{background:rgba(0,0,0,.08)}', '.dc-grip:active{cursor:grabbing}', '.dc-labeltext{cursor:pointer;border-radius:4px;padding:3px 6px;display:flex;align-items:center;transition:background .12s}', '.dc-labeltext:hover{background:rgba(0,0,0,.05)}', '.dc-expand{position:absolute;bottom:100%;right:0;margin-bottom:5px;z-index:2;opacity:0;transition:opacity .12s,background .12s;', ' width:22px;height:22px;border-radius:5px;border:none;cursor:pointer;padding:0;', ' background:transparent;color:rgba(60,50,40,.7);display:flex;align-items:center;justify-content:center}', '.dc-expand:hover{background:rgba(0,0,0,.06);color:#2a251f}', '[data-dc-slot]:hover .dc-expand{opacity:1}', ].join('\n'); document.head.appendChild(s); } const DCCtx = React.createContext(null); // ───────────────────────────────────────────────────────────── // DesignCanvas — stateful wrapper around the pan/zoom viewport. // Owns runtime state (per-section order, renamed titles/labels, focused // artboard). Order/titles/labels persist to a .design-canvas.state.json // sidecar next to the HTML. Reads go via plain fetch() so the saved // arrangement is visible anywhere the HTML + sidecar are served together // (omelette preview, direct link, downloaded zip). Writes go through the // host's window.omelette bridge — editing requires the omelette runtime. // Focus is ephemeral. // ───────────────────────────────────────────────────────────── const DC_STATE_FILE = '.design-canvas.state.json'; function DesignCanvas({ children, minScale, maxScale, style }) { const [state, setState] = React.useState({ sections: {}, focus: null }); // Hold rendering until the sidecar read settles so the saved order/titles // appear on first paint (no source-order flash). didRead gates writes until // the read settles so the empty initial state can't clobber a slow read; // skipNextWrite suppresses the one echo-write that would otherwise follow // hydration. const [ready, setReady] = React.useState(false); const didRead = React.useRef(false); const skipNextWrite = React.useRef(false); React.useEffect(() => { let off = false; fetch('./' + DC_STATE_FILE) .then((r) => (r.ok ? r.json() : null)) .then((saved) => { if (off || !saved || !saved.sections) return; skipNextWrite.current = true; setState((s) => ({ ...s, sections: saved.sections })); }) .catch(() => {}) .finally(() => { didRead.current = true; if (!off) setReady(true); }); const t = setTimeout(() => { if (!off) setReady(true); }, 150); return () => { off = true; clearTimeout(t); }; }, []); React.useEffect(() => { if (!didRead.current) return; if (skipNextWrite.current) { skipNextWrite.current = false; return; } const t = setTimeout(() => { window.omelette?.writeFile(DC_STATE_FILE, JSON.stringify({ sections: state.sections })).catch(() => {}); }, 250); return () => clearTimeout(t); }, [state.sections]); // Build registries synchronously from children so FocusOverlay can read // them in the same render. Only direct DCSection > DCArtboard children are // walked — wrapping them in other elements opts out of focus/reorder. const registry = {}; // slotId -> { sectionId, artboard } const sectionMeta = {}; // sectionId -> { title, subtitle, slotIds[] } const sectionOrder = []; React.Children.forEach(children, (sec) => { if (!sec || sec.type !== DCSection) return; const sid = sec.props.id ?? sec.props.title; if (!sid) return; sectionOrder.push(sid); const persisted = state.sections[sid] || {}; const srcIds = []; React.Children.forEach(sec.props.children, (ab) => { if (!ab || ab.type !== DCArtboard) return; const aid = ab.props.id ?? ab.props.label; if (!aid) return; registry[`${sid}/${aid}`] = { sectionId: sid, artboard: ab }; srcIds.push(aid); }); const kept = (persisted.order || []).filter((k) => srcIds.includes(k)); sectionMeta[sid] = { title: persisted.title ?? sec.props.title, subtitle: sec.props.subtitle, slotIds: [...kept, ...srcIds.filter((k) => !kept.includes(k))], }; }); const api = React.useMemo(() => ({ state, section: (id) => state.sections[id] || {}, patchSection: (id, p) => setState((s) => ({ ...s, sections: { ...s.sections, [id]: { ...s.sections[id], ...(typeof p === 'function' ? p(s.sections[id] || {}) : p) } }, })), setFocus: (slotId) => setState((s) => ({ ...s, focus: slotId })), }), [state]); // Esc exits focus; any outside pointerdown commits an in-progress rename. React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') api.setFocus(null); }; const onPd = (e) => { const ae = document.activeElement; if (ae && ae.isContentEditable && !ae.contains(e.target)) ae.blur(); }; document.addEventListener('keydown', onKey); document.addEventListener('pointerdown', onPd, true); return () => { document.removeEventListener('keydown', onKey); document.removeEventListener('pointerdown', onPd, true); }; }, [api]); return ( {ready && children} {state.focus && registry[state.focus] && ( )} ); } // ───────────────────────────────────────────────────────────── // DCViewport — transform-based pan/zoom (internal) // // Input mapping (Figma-style): // • trackpad pinch → zoom (ctrlKey wheel; Safari gesture* events) // • trackpad scroll → pan (two-finger) // • mouse wheel → zoom (notched; distinguished from trackpad scroll) // • middle-drag / primary-drag-on-bg → pan // // Transform state lives in a ref and is written straight to the DOM // (translate3d + will-change) so wheel ticks don't go through React — // keeps pans at 60fps on dense canvases. // ───────────────────────────────────────────────────────────── function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) { const vpRef = React.useRef(null); const worldRef = React.useRef(null); const tf = React.useRef({ x: 0, y: 0, scale: 1 }); const apply = React.useCallback(() => { const { x, y, scale } = tf.current; const el = worldRef.current; if (el) el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`; }, []); React.useEffect(() => { const vp = vpRef.current; if (!vp) return; const zoomAt = (cx, cy, factor) => { const r = vp.getBoundingClientRect(); const px = cx - r.left, py = cy - r.top; const t = tf.current; const next = Math.min(maxScale, Math.max(minScale, t.scale * factor)); const k = next / t.scale; // keep the world point under the cursor fixed t.x = px - (px - t.x) * k; t.y = py - (py - t.y) * k; t.scale = next; apply(); }; // Mouse-wheel vs trackpad-scroll heuristic. A physical wheel sends // line-mode deltas (Firefox) or large integer pixel deltas with no X // component (Chrome/Safari, typically multiples of 100/120). Trackpad // two-finger scroll sends small/fractional pixel deltas, often with // non-zero deltaX. ctrlKey is set by the browser for trackpad pinch. const isMouseWheel = (e) => e.deltaMode !== 0 || (e.deltaX === 0 && Number.isInteger(e.deltaY) && Math.abs(e.deltaY) >= 40); const onWheel = (e) => { e.preventDefault(); if (isGesturing) return; // Safari: gesture* owns the pinch — discard concurrent wheels if (e.ctrlKey) { // trackpad pinch (or explicit ctrl+wheel) zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY * 0.01)); } else if (isMouseWheel(e)) { // notched mouse wheel — fixed-ratio step per click zoomAt(e.clientX, e.clientY, Math.exp(-Math.sign(e.deltaY) * 0.18)); } else { // trackpad two-finger scroll — pan tf.current.x -= e.deltaX; tf.current.y -= e.deltaY; apply(); } }; // Safari sends native gesture* events for trackpad pinch with a smooth // e.scale; preferring these over the ctrl+wheel fallback gives a much // better feel there. No-ops on other browsers. Safari also fires // ctrlKey wheel events during the same pinch — isGesturing makes // onWheel drop those entirely so they neither zoom nor pan. let gsBase = 1; let isGesturing = false; const onGestureStart = (e) => { e.preventDefault(); isGesturing = true; gsBase = tf.current.scale; }; const onGestureChange = (e) => { e.preventDefault(); zoomAt(e.clientX, e.clientY, (gsBase * e.scale) / tf.current.scale); }; const onGestureEnd = (e) => { e.preventDefault(); isGesturing = false; }; // Drag-pan: middle button anywhere, or primary button on canvas // background (anything that isn't an artboard or an inline editor). let drag = null; const onPointerDown = (e) => { const onBg = !e.target.closest('[data-dc-slot], .dc-editable'); if (!(e.button === 1 || (e.button === 0 && onBg))) return; e.preventDefault(); vp.setPointerCapture(e.pointerId); drag = { id: e.pointerId, lx: e.clientX, ly: e.clientY }; vp.style.cursor = 'grabbing'; }; const onPointerMove = (e) => { if (!drag || e.pointerId !== drag.id) return; tf.current.x += e.clientX - drag.lx; tf.current.y += e.clientY - drag.ly; drag.lx = e.clientX; drag.ly = e.clientY; apply(); }; const onPointerUp = (e) => { if (!drag || e.pointerId !== drag.id) return; vp.releasePointerCapture(e.pointerId); drag = null; vp.style.cursor = ''; }; vp.addEventListener('wheel', onWheel, { passive: false }); vp.addEventListener('gesturestart', onGestureStart, { passive: false }); vp.addEventListener('gesturechange', onGestureChange, { passive: false }); vp.addEventListener('gestureend', onGestureEnd, { passive: false }); vp.addEventListener('pointerdown', onPointerDown); vp.addEventListener('pointermove', onPointerMove); vp.addEventListener('pointerup', onPointerUp); vp.addEventListener('pointercancel', onPointerUp); return () => { vp.removeEventListener('wheel', onWheel); vp.removeEventListener('gesturestart', onGestureStart); vp.removeEventListener('gesturechange', onGestureChange); vp.removeEventListener('gestureend', onGestureEnd); vp.removeEventListener('pointerdown', onPointerDown); vp.removeEventListener('pointermove', onPointerMove); vp.removeEventListener('pointerup', onPointerUp); vp.removeEventListener('pointercancel', onPointerUp); }; }, [apply, minScale, maxScale]); const gridSvg = `url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M120 0H0v120' fill='none' stroke='${encodeURIComponent(DC.grid)}' stroke-width='1'/%3E%3C/svg%3E")`; return (