{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"cms-editor","type":"registry:ui","title":"Editor","description":"The WYSIWYG editor surface \u2014 canvas + layers + inspector over a Stages node tree.","package":"fancy-cms-ui","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["document","react"],"files":[{"path":"components\/fancy\/cms-editor\/Canvas.tsx","content":"import {\r\n useLayoutEffect,\r\n useRef,\r\n useState,\r\n type CSSProperties,\r\n type MouseEvent as ReactMouseEvent,\r\n type PointerEvent as ReactPointerEvent,\r\n type ReactElement,\r\n} from \"react\";\r\nimport type { PageDoc } from \"..\/document\/types\";\r\nimport type { PageOp } from \"..\/document\/ops\";\r\nimport type { DataContext, ElementRegistry } from \"..\/react\/registry\";\r\nimport { CmsPage } from \"..\/react\/CmsPage\";\r\n\r\nexport interface CanvasProps {\r\n doc: PageDoc;\r\n selection: string | null;\r\n onSelect: (id: string | null) => void;\r\n apply: (op: PageOp) => void;\r\n \/** Custom element registry so custom node types render on the canvas (not a blank placeholder). *\/\r\n registry?: ElementRegistry;\r\n \/** Data context for `{ $bind }` props + repeaters previewed on the canvas. *\/\r\n data?: DataContext;\r\n}\r\n\r\ninterface Box {\r\n x: number;\r\n y: number;\r\n w: number;\r\n h: number;\r\n}\r\n\r\n\/**\r\n * The edit surface: renders the live page and overlays a selection box. Click to\r\n * select; drag the box to move (px constraints). Phase 1 cut: free-parent\r\n * move + resize handles, stack\/grid reordering, and snapping come next.\r\n *\/\r\nexport function Canvas({ doc, selection, onSelect, apply, registry, data }: CanvasProps): ReactElement {\r\n const ref = useRef(null);\r\n const [box, setBox] = useState(null);\r\n const drag = useRef<{ x: number; y: number; left: number; top: number } | null>(null);\r\n\r\n useLayoutEffect(() => {\r\n const root = ref.current;\r\n if (!root || !selection) {\r\n setBox(null);\r\n return;\r\n }\r\n const el = root.querySelector(`[data-cms=\"${cssEscape(selection)}\"]`);\r\n if (!el) {\r\n setBox(null);\r\n return;\r\n }\r\n const r = el.getBoundingClientRect();\r\n const rootRect = root.getBoundingClientRect();\r\n setBox({\r\n x: r.left - rootRect.left + root.scrollLeft,\r\n y: r.top - rootRect.top + root.scrollTop,\r\n w: r.width,\r\n h: r.height,\r\n });\r\n }, [selection, doc]);\r\n\r\n const handleClick = (e: ReactMouseEvent) => {\r\n const target = (e.target as HTMLElement).closest(\"[data-cms]\");\r\n onSelect(target ? target.getAttribute(\"data-cms\") : null);\r\n };\r\n\r\n const handlePointerDown = (e: ReactPointerEvent) => {\r\n if (!selection) return;\r\n const c = doc.nodes[selection]?.constraints?.base;\r\n const left = c && c.left && typeof c.left === \"object\" ? c.left.value : 0;\r\n const top = c && c.top && typeof c.top === \"object\" ? c.top.value : 0;\r\n drag.current = { x: e.clientX, y: e.clientY, left, top };\r\n e.currentTarget.setPointerCapture(e.pointerId);\r\n e.stopPropagation();\r\n };\r\n\r\n const handlePointerMove = (e: ReactPointerEvent) => {\r\n const d = drag.current;\r\n if (!d || !selection) return;\r\n apply({\r\n t: \"set_constraints\",\r\n id: selection,\r\n breakpoint: \"base\",\r\n patch: {\r\n left: { value: Math.round(d.left + (e.clientX - d.x)), unit: \"px\" },\r\n top: { value: Math.round(d.top + (e.clientY - d.y)), unit: \"px\" },\r\n },\r\n });\r\n };\r\n\r\n const handlePointerUp = () => {\r\n drag.current = null;\r\n };\r\n\r\n const surface: CSSProperties = {\r\n position: \"relative\",\r\n overflow: \"auto\",\r\n height: \"100%\",\r\n background: \"var(--fcms-canvas)\",\r\n };\r\n const overlay: CSSProperties = box\r\n ? {\r\n position: \"absolute\",\r\n left: box.x,\r\n top: box.y,\r\n width: box.w,\r\n height: box.h,\r\n outline: \"2px solid var(--fcms-accent, #8b5cf6)\",\r\n outlineOffset: -1,\r\n cursor: \"move\",\r\n touchAction: \"none\",\r\n }\r\n : { display: \"none\" };\r\n\r\n return (\r\n
\r\n \r\n \r\n <\/div>\r\n );\r\n}\r\n\r\nfunction cssEscape(value: string): string {\r\n return value.replace(\/[\"\\\\]\/g, \"\\\\$&\");\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/cms-editor\/Canvas.tsx"},{"path":"components\/fancy\/cms-editor\/EditablePage.tsx","content":"import {\r\n useCallback,\r\n useEffect,\r\n useLayoutEffect,\r\n useRef,\r\n useState,\r\n type CSSProperties,\r\n type DragEvent as ReactDragEvent,\r\n type MouseEvent as ReactMouseEvent,\r\n type PointerEvent as ReactPointerEvent,\r\n type ReactElement,\r\n type ReactNode,\r\n} from \"react\";\r\nimport { ContextMenu } from \"@particle-academy\/react-fancy\";\r\nimport type { Json, LayoutMode, NodeId, PageDoc, StyleProps } from \"..\/document\/types\";\r\nimport type { PageOp } from \"..\/document\/ops\";\r\nimport { childrenOf } from \"..\/document\/reduce\";\r\nimport { keyBetween } from \"..\/document\/fractional\";\r\nimport { ADD_DEFAULTS, ADD_MENU, CONTAINER_TYPES, buildInsertOp, type AddKind } from \".\/insert\";\r\nimport { CmsPage } from \"..\/react\/CmsPage\";\r\nimport { defaultRegistry, type DataContext, type ElementRegistry } from \"..\/react\/registry\";\r\nimport { NodeInspector } from \".\/NodeInspector\";\r\nimport { duplicateOps, pasteOps, reorderOps, snapshotSubtree, wrapInBoxOps, type NodeMap, type ReorderDir } from \".\/editorOps\";\r\nimport { useEditor } from \".\/useEditor\";\r\nimport { useLatestRef } from \".\/useLatestRef\";\r\n\r\n\/** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). *\/\r\nexport interface NodeTransform {\r\n x?: number;\r\n y?: number;\r\n scale?: number;\r\n opacity?: number;\r\n rotate?: number;\r\n \/** Explicit size in px (a true resize, distinct from `scale`). Absent = auto. *\/\r\n w?: number;\r\n h?: number;\r\n}\r\n\r\nexport interface EditablePageProps {\r\n doc: PageDoc;\r\n registry?: ElementRegistry;\r\n \/** Data context for `{ $bind }` props + repeaters (server props, etc.). *\/\r\n data?: DataContext;\r\n \/** Slot for the fancy-motion timeline dock (rendered at the bottom in EditMode). *\/\r\n timelineDock?: ReactNode;\r\n \/** Per-node transforms applied to the page (e.g. the sampled keyframe snapshot). *\/\r\n transforms?: Record;\r\n \/** Fired when the user moves\/resizes a node \u2014 the host writes it into the current keyframe. *\/\r\n onNodeTransform?: (id: string, transform: NodeTransform) => void;\r\n \/** Notifies the host of the current selection (e.g. to sync the timeline). *\/\r\n onSelect?: (id: string | null) => void;\r\n \/** Scroll length in viewports \u2014 the page becomes a tall scroll canvas (extend via the timeline). *\/\r\n frames?: number;\r\n \/** Scroll progress 0..1 (scroll = the timeline playhead). The host maps it to transforms. *\/\r\n onProgress?: (progress: number) => void;\r\n \/**\r\n * Pin the page into a scroll canvas (the `frames`\u00d7viewport spacer + sticky pin\r\n * that turns scroll into the playhead). Default `true`. Set **false** for a\r\n * full multi-section page that should scroll naturally \u2014 animation is then\r\n * driven by the dock scrub + Play preview instead of raw scroll.\r\n *\/\r\n pinned?: boolean;\r\n}\r\n\r\ninterface Box {\r\n x: number;\r\n y: number;\r\n w: number;\r\n h: number;\r\n}\r\n\r\nconst Z = 2147483000;\r\n\/** Snap distance (px) for drag alignment to other elements' edges\/centers. *\/\r\nconst SNAP = 6;\r\n\r\n\/**\r\n * Inline EditMode over a live, seeded CMS page. Hold **Ctrl+Shift** to reveal\r\n * the Edit toggle. Editing is on the page: text is edited in place, a floating\r\n * toolbar styles it, and the selection can be **dragged to move** \/ **resized**\r\n * \u2014 committed as transforms the host captures into a timeline keyframe.\r\n *\/\r\nexport function EditablePage({\r\n doc,\r\n registry = defaultRegistry,\r\n data,\r\n timelineDock,\r\n transforms,\r\n onNodeTransform,\r\n onSelect,\r\n frames = 1,\r\n onProgress,\r\n pinned = true,\r\n}: EditablePageProps): ReactElement {\r\n const ed = useEditor(doc);\r\n const [editing, setEditing] = useState(false);\r\n const [revealed, setRevealed] = useState(false);\r\n const pageRef = useRef(null);\r\n const spacerRef = useRef(null);\r\n const [box, setBox] = useState(null);\r\n const { selection } = ed.state;\r\n const selNode = selection ? ed.state.doc.nodes[selection] : null;\r\n\r\n \/\/ Notify effects depend only on the data, never on the callback prop's\r\n \/\/ identity \u2014 inline-closure consumers would loop them otherwise (see #1).\r\n const onSelectRef = useLatestRef(onSelect);\r\n useEffect(() => onSelectRef.current?.(selection), [selection, onSelectRef]);\r\n\r\n \/\/ Ctrl+Shift reveal gesture.\r\n useEffect(() => {\r\n const onKey = (e: KeyboardEvent) => setRevealed(e.ctrlKey && e.shiftKey);\r\n const onBlur = () => setRevealed(false);\r\n window.addEventListener(\"keydown\", onKey);\r\n window.addEventListener(\"keyup\", onKey);\r\n window.addEventListener(\"blur\", onBlur);\r\n return () => {\r\n window.removeEventListener(\"keydown\", onKey);\r\n window.removeEventListener(\"keyup\", onKey);\r\n window.removeEventListener(\"blur\", onBlur);\r\n };\r\n }, []);\r\n\r\n \/\/ Apply host-provided transforms to the page elements.\r\n useEffect(() => {\r\n const root = pageRef.current;\r\n if (!root) return;\r\n root.querySelectorAll(\"[data-cms]\").forEach((el) => {\r\n const id = el.dataset.cms;\r\n const t = id ? transforms?.[id] : undefined;\r\n applyTransform(el, t);\r\n });\r\n }, [transforms, ed.state.doc]);\r\n\r\n \/\/ Scroll = the timeline playhead. Report progress (0..1) across the scroll\r\n \/\/ canvas so the host can drive the morph from real scrolling (not the dock).\r\n \/\/ Measure synchronously in the scroll handler \u2014 NOT via requestAnimationFrame.\r\n \/\/ rAF is throttled or fully suspended in hidden\/background tabs, which silently\r\n \/\/ freezes the playhead at 0; a direct getBoundingClientRect on one element per\r\n \/\/ scroll event is cheap and always fires.\r\n const onProgressRef = useLatestRef(onProgress);\r\n const hasProgress = !!onProgress;\r\n useEffect(() => {\r\n const spacer = spacerRef.current;\r\n if (!spacer || !hasProgress) return;\r\n const compute = () => {\r\n const len = spacer.offsetHeight - window.innerHeight;\r\n const top = spacer.getBoundingClientRect().top;\r\n onProgressRef.current?.(len > 0 ? Math.min(1, Math.max(0, -top \/ len)) : 0);\r\n };\r\n compute();\r\n window.addEventListener(\"scroll\", compute, { passive: true });\r\n window.addEventListener(\"resize\", compute);\r\n return () => {\r\n window.removeEventListener(\"scroll\", compute);\r\n window.removeEventListener(\"resize\", compute);\r\n };\r\n }, [hasProgress, onProgressRef, frames]);\r\n\r\n const measureBox = useCallback(() => {\r\n if (!editing || !selection || !pageRef.current) return setBox(null);\r\n const el = pageRef.current.querySelector(`[data-cms=\"${cssEscape(selection)}\"]`);\r\n if (!el) return setBox(null);\r\n const r = el.getBoundingClientRect();\r\n setBox({ x: r.left, y: r.top, w: r.width, h: r.height });\r\n }, [editing, selection]);\r\n\r\n \/\/ Re-measure on selection \/ doc \/ scroll \/ resize \u2014 deliberately NOT on every\r\n \/\/ `transforms` frame. A scrub or Play sweep changes transforms ~30\u00d7\/s; calling\r\n \/\/ getBoundingClientRect each time forces a synchronous reflow of the whole page\r\n \/\/ and saturates the main thread. Live drags re-measure through `onLive` instead.\r\n useLayoutEffect(() => {\r\n measureBox();\r\n window.addEventListener(\"scroll\", measureBox, { passive: true });\r\n window.addEventListener(\"resize\", measureBox);\r\n return () => {\r\n window.removeEventListener(\"scroll\", measureBox);\r\n window.removeEventListener(\"resize\", measureBox);\r\n };\r\n }, [measureBox, ed.state.doc]);\r\n\r\n \/\/ Inline, on-page contentEditable for text content \u2014 text\/heading (plain) and\r\n \/\/ richtext (HTML). All content is edited directly on the page, never in a\r\n \/\/ sidebar field. richtext edits the inner HTML container so formatting survives.\r\n useEffect(() => {\r\n const t = selNode?.type;\r\n const editable = t === \"text\" || t === \"heading\" || t === \"richtext\";\r\n if (!editing || !selection || !pageRef.current || !editable) return;\r\n const wrapper = pageRef.current.querySelector(`[data-cms=\"${cssEscape(selection)}\"]`);\r\n if (!wrapper) return;\r\n const isRich = t === \"richtext\";\r\n const el = (isRich ? (wrapper.firstElementChild as HTMLElement | null) : wrapper) ?? wrapper;\r\n el.setAttribute(\"contenteditable\", \"true\");\r\n el.style.outline = \"none\";\r\n el.focus();\r\n const commit = () => ed.apply({ t: \"set_props\", id: selection, patch: isRich ? { html: el.innerHTML } : { content: el.innerText } });\r\n el.addEventListener(\"blur\", commit);\r\n return () => {\r\n el.removeEventListener(\"blur\", commit);\r\n el.removeAttribute(\"contenteditable\");\r\n };\r\n }, [editing, selection, selNode?.type, ed]);\r\n\r\n const onClickCapture = (e: ReactMouseEvent) => {\r\n if (!editing) return;\r\n const el = (e.target as HTMLElement).closest(\"[data-cms]\");\r\n if (el) {\r\n if (el.getAttribute(\"contenteditable\") === \"true\") return;\r\n e.preventDefault();\r\n e.stopPropagation();\r\n ed.select(el.getAttribute(\"data-cms\"));\r\n }\r\n };\r\n\r\n const addNode = useCallback(\r\n (kind: AddKind) => {\r\n \/\/ Drop into the selected container; else the selected node's parent; else\r\n \/\/ the last section (or top level when the page is still empty).\r\n const doc = ed.state.doc;\r\n const parent = selNode\r\n ? CONTAINER_TYPES.has(selNode.type)\r\n ? selNode.id\r\n : selNode.parent\r\n : (doc.sections[doc.sections.length - 1] ?? null);\r\n const siblings = childrenOf(doc, parent);\r\n const order = keyBetween(siblings.length ? siblings[siblings.length - 1]!.order : null, null);\r\n const id = `n${doc.seq + 1}-${Math.floor(performance.now())}`;\r\n const def = ADD_DEFAULTS[kind];\r\n ed.apply({ t: \"insert_node\", node: { id, type: def.type, parent, order, layout: def.layout, props: { ...def.props }, style: { base: { ...def.style } } } });\r\n ed.select(id);\r\n },\r\n [ed, selNode],\r\n );\r\n\r\n \/\/ Insert an Element at an explicit target (the node under a drop point) rather\r\n \/\/ than the current selection \u2014 used by the drag-and-drop palette.\r\n const addNodeAt = useCallback(\r\n (kind: AddKind, targetId: string | null) => {\r\n const doc = ed.state.doc;\r\n const target = targetId ? doc.nodes[targetId] : null;\r\n const parent = target\r\n ? CONTAINER_TYPES.has(target.type)\r\n ? target.id\r\n : target.parent\r\n : (doc.sections[doc.sections.length - 1] ?? null);\r\n const siblings = childrenOf(doc, parent);\r\n const order = keyBetween(siblings.length ? siblings[siblings.length - 1]!.order : null, null);\r\n const id = `n${doc.seq + 1}-${Math.floor(performance.now())}`;\r\n const def = ADD_DEFAULTS[kind];\r\n ed.apply({ t: \"insert_node\", node: { id, type: def.type, parent, order, layout: def.layout, props: { ...def.props }, style: { base: { ...def.style } } } });\r\n ed.select(id);\r\n },\r\n [ed],\r\n );\r\n\r\n \/\/ Right-edge Element palette: reveals when the pointer nears the right screen\r\n \/\/ edge, hides while an Element is being dragged onto the page.\r\n const [paletteOpen, setPaletteOpen] = useState(false);\r\n const [draggingEl, setDraggingEl] = useState(false);\r\n useEffect(() => {\r\n if (!editing) {\r\n setPaletteOpen(false);\r\n return;\r\n }\r\n const onMove = (e: MouseEvent) => {\r\n if (draggingEl) return;\r\n if (e.clientX >= window.innerWidth - 26) setPaletteOpen(true);\r\n else if (e.clientX < window.innerWidth - 236) setPaletteOpen(false);\r\n };\r\n window.addEventListener(\"mousemove\", onMove);\r\n return () => window.removeEventListener(\"mousemove\", onMove);\r\n }, [editing, draggingEl]);\r\n\r\n \/\/ Drop target + indicator. While dragging, we compute the precise insertion\r\n \/\/ point (before\/after a leaf, or inside a container) under the cursor so the\r\n \/\/ user can drop *anywhere* and see exactly where it lands.\r\n type DropHint = { id: string | null; edge: \"before\" | \"after\" | \"inside\"; rect: { x: number; y: number; w: number; h: number } | null };\r\n const [dropHint, setDropHint] = useState(null);\r\n\r\n const computeDropTarget = (clientX: number, clientY: number): DropHint => {\r\n const el = document.elementFromPoint(clientX, clientY)?.closest(\"[data-cms]\") as HTMLElement | null;\r\n if (!el) return { id: null, edge: \"inside\", rect: null };\r\n const id = el.getAttribute(\"data-cms\")!;\r\n const node = ed.state.doc.nodes[id];\r\n const r = el.getBoundingClientRect();\r\n const rect = { x: r.left, y: r.top, w: r.width, h: r.height };\r\n \/\/ Over a container's own area (not a child) \u2192 drop inside it.\r\n if (node && CONTAINER_TYPES.has(node.type)) return { id, edge: \"inside\", rect };\r\n return { id, edge: clientY < r.top + r.height \/ 2 ? \"before\" : \"after\", rect };\r\n };\r\n\r\n const onPageDragOver = (e: ReactDragEvent) => {\r\n e.preventDefault();\r\n e.dataTransfer.dropEffect = \"copy\";\r\n setDropHint(computeDropTarget(e.clientX, e.clientY));\r\n };\r\n\r\n \/\/ Insert relative to a drop hint \u2014 before\/after a sibling, or appended inside\r\n \/\/ a container (or the last section when dropped on empty page space).\r\n const insertRelative = (kind: AddKind, hint: DropHint) => {\r\n const doc = ed.state.doc;\r\n let parent: string | null;\r\n let order: string;\r\n if (!hint.id || hint.edge === \"inside\") {\r\n parent = hint.id ?? (doc.sections[doc.sections.length - 1] ?? null);\r\n const sib = childrenOf(doc, parent);\r\n order = keyBetween(sib.length ? sib[sib.length - 1]!.order : null, null);\r\n } else {\r\n const target = doc.nodes[hint.id]!;\r\n parent = target.parent;\r\n const sib = childrenOf(doc, parent);\r\n const idx = sib.findIndex((n) => n.id === hint.id);\r\n order =\r\n hint.edge === \"before\"\r\n ? keyBetween(idx > 0 ? sib[idx - 1]!.order : null, target.order)\r\n : keyBetween(target.order, idx < sib.length - 1 ? sib[idx + 1]!.order : null);\r\n }\r\n const id = `n${doc.seq + 1}-${Math.floor(performance.now())}`;\r\n const def = ADD_DEFAULTS[kind];\r\n ed.apply({ t: \"insert_node\", node: { id, type: def.type, parent, order, layout: def.layout, props: { ...def.props }, style: { base: { ...def.style } } } });\r\n ed.select(id);\r\n };\r\n\r\n const onPageDrop = (e: ReactDragEvent) => {\r\n const kind = e.dataTransfer.getData(\"application\/x-cms-element\") as AddKind;\r\n if (!kind) return;\r\n e.preventDefault();\r\n insertRelative(kind, computeDropTarget(e.clientX, e.clientY));\r\n setDropHint(null);\r\n setDraggingEl(false);\r\n };\r\n\r\n const setStyle = (patch: Partial) =>\r\n selection && ed.apply({ t: \"set_style\", id: selection, breakpoint: \"base\", patch });\r\n const setProps = (patch: Record) =>\r\n selection && ed.apply({ t: \"set_props\", id: selection, patch });\r\n const setLayout = (layout: LayoutMode | undefined) =>\r\n selection && ed.apply({ t: \"set_layout\", id: selection, layout });\r\n const removeSelected = () => {\r\n if (!selection) return;\r\n ed.apply({ t: \"remove_node\", id: selection });\r\n ed.select(null);\r\n };\r\n\r\n \/\/ \u2500\u2500 Context-menu \/ shortcut commands (all expressed as op sequences) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const clip = useRef<{ rootId: NodeId; nodes: NodeMap } | null>(null);\r\n const runOps = (result: { ops: PageOp[]; newRootId: NodeId | null }) => {\r\n result.ops.forEach((op) => ed.apply(op));\r\n if (result.newRootId) ed.select(result.newRootId);\r\n };\r\n const duplicate = (id: string | null) => id && runOps(duplicateOps(ed.state.doc, id));\r\n const reorder = (id: string | null, dir: ReorderDir) => id && reorderOps(ed.state.doc, id, dir).forEach((op) => ed.apply(op));\r\n const wrapInBox = (id: string | null) => id && runOps(wrapInBoxOps(ed.state.doc, id));\r\n const copy = (id: string | null) => {\r\n if (id) clip.current = snapshotSubtree(ed.state.doc, id);\r\n };\r\n const paste = (target: string | null) => {\r\n if (clip.current) runOps(pasteOps(ed.state.doc, clip.current, target, CONTAINER_TYPES));\r\n };\r\n const startEditText = (id: string | null) => {\r\n if (!id) return;\r\n ed.select(id);\r\n requestAnimationFrame(() => pageRef.current?.querySelector(`[data-cms=\"${cssEscape(id)}\"]`)?.focus());\r\n };\r\n\r\n \/\/ Latest transforms + commit fn for keyboard nudge \u2014 read via ref so the\r\n \/\/ keydown handler never sees a stale snapshot (transforms change ~30\u00d7\/s).\r\n const nudgeRef = useRef({ transforms, onNodeTransform });\r\n nudgeRef.current = { transforms, onNodeTransform };\r\n\r\n \/\/ Keyboard shortcuts in EditMode (ignored while typing in a field\/contentEditable).\r\n useEffect(() => {\r\n if (!editing) return;\r\n const onKey = (e: KeyboardEvent) => {\r\n const t = e.target as HTMLElement | null;\r\n const typing = t && (t.isContentEditable || \/^(INPUT|TEXTAREA|SELECT)$\/.test(t.tagName));\r\n if (e.key === \"Escape\") return void ed.select(null);\r\n if (typing) return;\r\n if ((e.key === \"Delete\" || e.key === \"Backspace\") && selection) {\r\n e.preventDefault();\r\n removeSelected();\r\n } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"d\" && selection) {\r\n e.preventDefault();\r\n duplicate(selection);\r\n } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"c\" && selection) {\r\n copy(selection);\r\n } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"v\") {\r\n e.preventDefault();\r\n paste(selection);\r\n } else if (selection && \/^Arrow(Left|Right|Up|Down)$\/.test(e.key)) {\r\n \/\/ Nudge: arrows move \u00b11px, Shift+arrows \u00b110px \u2014 committed as a transform.\r\n const { transforms: tf, onNodeTransform: commit } = nudgeRef.current;\r\n if (!commit) return;\r\n e.preventDefault();\r\n const step = e.shiftKey ? 10 : 1;\r\n const dx = e.key === \"ArrowLeft\" ? -step : e.key === \"ArrowRight\" ? step : 0;\r\n const dy = e.key === \"ArrowUp\" ? -step : e.key === \"ArrowDown\" ? step : 0;\r\n const cur = tf?.[selection] ?? {};\r\n commit(selection, { ...cur, x: (cur.x ?? 0) + dx, y: (cur.y ?? 0) + dy });\r\n }\r\n };\r\n window.addEventListener(\"keydown\", onKey);\r\n return () => window.removeEventListener(\"keydown\", onKey);\r\n }, [editing, selection]); \/\/ eslint-disable-line react-hooks\/exhaustive-deps\r\n\r\n const onContextMenuSelect = (e: ReactMouseEvent) => {\r\n if (!editing) return;\r\n const el = (e.target as HTMLElement).closest(\"[data-cms]\");\r\n if (el) ed.select(el.getAttribute(\"data-cms\"));\r\n else ed.select(null);\r\n };\r\n\r\n const page = (\r\n setDropHint(null) : undefined}\r\n onDrop={editing ? onPageDrop : undefined}\r\n >\r\n \r\n <\/div>\r\n );\r\n const pageShell = pinned ? (\r\n
\r\n
{page}<\/div>\r\n <\/div>\r\n ) : frames > 1 ? (\r\n \/\/ Normal flow, but \"expanded\" \u2014 extra scroll length below the content so a\r\n \/\/ page can be made longer than its content (the \uff0b Frame control).\r\n
{page}<\/div>\r\n ) : (\r\n page\r\n );\r\n\r\n return (\r\n
\r\n {editing ? (\r\n \r\n {pageShell}<\/ContextMenu.Trigger>\r\n \r\n startEditText(selection)}\r\n onAdd={addNode}\r\n onDuplicate={() => duplicate(selection)}\r\n onCopy={() => copy(selection)}\r\n onPaste={() => paste(selection)}\r\n onWrap={() => wrapInBox(selection)}\r\n onReorder={(d) => reorder(selection, d)}\r\n onDelete={removeSelected}\r\n \/>\r\n <\/ContextMenu.Content>\r\n <\/ContextMenu>\r\n ) : (\r\n pageShell\r\n )}\r\n\r\n {editing && box && selection ? (\r\n pageRef.current?.querySelector(`[data-cms=\"${cssEscape(selection)}\"]`) ?? null}\r\n onTransform={(t) => onNodeTransform?.(selection, t)}\r\n onLive={measureBox}\r\n \/>\r\n ) : null}\r\n\r\n {editing && box && selNode ? (\r\n \r\n ) : null}\r\n\r\n {editing && selNode && box ? (\r\n selection && onNodeTransform?.(selection, t)}\r\n onRemove={removeSelected}\r\n onClose={() => ed.select(null)}\r\n \/>\r\n ) : null}\r\n\r\n {revealed || editing ? (\r\n {\r\n setEditing((v) => !v);\r\n ed.select(null);\r\n }}\r\n canUndo={ed.canUndo}\r\n canRedo={ed.canRedo}\r\n onUndo={ed.undo}\r\n onRedo={ed.redo}\r\n onAdd={addNode}\r\n \/>\r\n ) : null}\r\n\r\n {editing && dropHint?.rect ? : null}\r\n\r\n {editing ? : null}\r\n\r\n {editing && timelineDock ?
{timelineDock}<\/div> : null}\r\n <\/div>\r\n );\r\n}\r\n\r\n\/** The live drop indicator: a line before\/after a sibling, or an outline inside a container. *\/\r\nfunction DropIndicator({\r\n hint,\r\n}: {\r\n hint: { edge: \"before\" | \"after\" | \"inside\"; rect: { x: number; y: number; w: number; h: number } | null };\r\n}): ReactElement | null {\r\n const r = hint.rect;\r\n if (!r) return null;\r\n const color = \"#ec4899\";\r\n if (hint.edge === \"inside\") {\r\n return
;\r\n }\r\n const y = hint.edge === \"before\" ? r.y : r.y + r.h;\r\n return
;\r\n}\r\n\r\n\/**\r\n * The Element palette \u2014 a panel docked to the right edge that slides in when the\r\n * pointer nears the edge (controlled by `open`) and hides while an Element is\r\n * being dragged. Each tile is draggable; dropping it on the page inserts that\r\n * Element (handled by EditablePage's `onPageDrop`).\r\n *\/\r\nfunction ElementPalette({ open, onDragChange }: { open: boolean; onDragChange: (dragging: boolean) => void }): ReactElement {\r\n return (\r\n \r\n
Elements<\/div>\r\n
\r\n {ADD_MENU.map((m) => (\r\n {\r\n e.dataTransfer.setData(\"application\/x-cms-element\", m.kind);\r\n e.dataTransfer.effectAllowed = \"copy\";\r\n onDragChange(true);\r\n }}\r\n onDragEnd={() => onDragChange(false)}\r\n title={`Drag \"${m.label}\" onto the page`}\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n gap: 4,\r\n height: 56,\r\n borderRadius: 8,\r\n background: \"#0f172a\",\r\n border: \"1px solid #1e293b\",\r\n cursor: \"grab\",\r\n fontSize: 12,\r\n userSelect: \"none\",\r\n }}\r\n >\r\n \uff0b<\/span>\r\n {m.label}\r\n <\/div>\r\n ))}\r\n <\/div>\r\n

\r\n Drag an Element onto the page. It drops into the container you release over.\r\n <\/p>\r\n <\/div>\r\n );\r\n}\r\n\r\n\/\/ CONTAINER_TYPES \/ AddKind \/ ADD_DEFAULTS \/ ADD_MENU now live in .\/insert, so\r\n\/\/ the standalone can offer the same palette (#3).\r\n\r\n\/** A resize grip: which edges it drags, its position, and its cursor. *\/\r\ninterface Grip {\r\n key: string;\r\n north?: boolean;\r\n south?: boolean;\r\n east?: boolean;\r\n west?: boolean;\r\n cursor: string;\r\n}\r\nconst GRIPS: Grip[] = [\r\n { key: \"nw\", north: true, west: true, cursor: \"nwse-resize\" },\r\n { key: \"n\", north: true, cursor: \"ns-resize\" },\r\n { key: \"ne\", north: true, east: true, cursor: \"nesw-resize\" },\r\n { key: \"e\", east: true, cursor: \"ew-resize\" },\r\n { key: \"se\", south: true, east: true, cursor: \"nwse-resize\" },\r\n { key: \"s\", south: true, cursor: \"ns-resize\" },\r\n { key: \"sw\", south: true, west: true, cursor: \"nesw-resize\" },\r\n { key: \"w\", west: true, cursor: \"ew-resize\" },\r\n];\r\n\r\nfunction SelectionOverlay({\r\n box,\r\n base,\r\n movable,\r\n getEl,\r\n onTransform,\r\n onLive,\r\n}: {\r\n box: Box;\r\n base: NodeTransform;\r\n movable: boolean;\r\n getEl: () => HTMLElement | null;\r\n onTransform: (t: NodeTransform) => void;\r\n onLive: () => void;\r\n}): ReactElement {\r\n const drag = useRef<{ x: number; y: number; w: number; h: number; live: NodeTransform } | null>(null);\r\n \/\/ Snap targets (other elements' edges\/centers, viewport coords) gathered at\r\n \/\/ drag start, + the live alignment guides to draw.\r\n const targets = useRef<{ vx: number[]; hy: number[] }>({ vx: [], hy: [] });\r\n const [guides, setGuides] = useState<{ x: number | null; y: number | null }>({ x: null, y: null });\r\n\r\n const apply = (t: NodeTransform) => {\r\n const el = getEl();\r\n if (el) applyTransform(el, t);\r\n };\r\n\r\n \/\/ Snap a set of candidate lines to the nearest target within SNAP px.\r\n \/\/ Returns the adjustment to apply and the matched guide coordinate.\r\n const snap = (cands: number[], lines: number[]): { delta: number; at: number | null } => {\r\n let best = { delta: 0, at: null as number | null, dist: SNAP + 1 };\r\n for (const line of lines) {\r\n for (const c of cands) {\r\n const diff = line - c;\r\n if (Math.abs(diff) < best.dist) best = { delta: diff, at: line, dist: Math.abs(diff) };\r\n }\r\n }\r\n return best.dist <= SNAP ? { delta: best.delta, at: best.at } : { delta: 0, at: null };\r\n };\r\n\r\n \/\/ Move drags translate; resize grips set an explicit width\/height (a true\r\n \/\/ resize, not scale) and translate the opposite way when dragging a top\/left\r\n \/\/ edge so the anchored edge stays put.\r\n const startMove = (e: ReactPointerEvent) => {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n e.currentTarget.setPointerCapture(e.pointerId);\r\n drag.current = { x: e.clientX, y: e.clientY, w: box.w, h: box.h, live: { ...base } };\r\n \/\/ Gather snap targets: every other element's left\/center\/right + top\/middle\/\r\n \/\/ bottom (skip the selection itself and its ancestors\/descendants).\r\n const sel = getEl();\r\n const vx = new Set();\r\n const hy = new Set();\r\n document.querySelectorAll(\"[data-cms]\").forEach((el) => {\r\n if (sel && (el === sel || sel.contains(el) || el.contains(sel))) return;\r\n const r = el.getBoundingClientRect();\r\n vx.add(r.left).add(r.left + r.width \/ 2).add(r.right);\r\n hy.add(r.top).add(r.top + r.height \/ 2).add(r.bottom);\r\n });\r\n targets.current = { vx: [...vx], hy: [...hy] };\r\n };\r\n const moveMove = (e: ReactPointerEvent) => {\r\n const d = drag.current;\r\n if (!d) return;\r\n let dx = e.clientX - d.x;\r\n let dy = e.clientY - d.y;\r\n \/\/ Snap the moving box's edges\/center to nearby targets (hold Alt to bypass).\r\n if (!e.altKey) {\r\n const l = box.x + dx;\r\n const t = box.y + dy;\r\n const sx = snap([l, l + box.w \/ 2, l + box.w], targets.current.vx);\r\n const sy = snap([t, t + box.h \/ 2, t + box.h], targets.current.hy);\r\n dx += sx.delta;\r\n dy += sy.delta;\r\n setGuides({ x: sx.at, y: sy.at });\r\n } else if (guides.x !== null || guides.y !== null) {\r\n setGuides({ x: null, y: null });\r\n }\r\n d.live = { ...base, x: (base.x ?? 0) + dx, y: (base.y ?? 0) + dy };\r\n apply(d.live);\r\n onLive();\r\n };\r\n\r\n const startResize = (g: Grip) => (e: ReactPointerEvent) => {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n e.currentTarget.setPointerCapture(e.pointerId);\r\n drag.current = { x: e.clientX, y: e.clientY, w: base.w ?? box.w, h: base.h ?? box.h, live: { ...base } };\r\n (e.currentTarget as HTMLElement).dataset.grip = g.key;\r\n };\r\n const resizeMove = (g: Grip) => (e: ReactPointerEvent) => {\r\n const d = drag.current;\r\n if (!d) return;\r\n const dx = e.clientX - d.x;\r\n const dy = e.clientY - d.y;\r\n const live: NodeTransform = { ...base };\r\n if (g.east) live.w = Math.max(16, Math.round(d.w + dx));\r\n if (g.west) {\r\n live.w = Math.max(16, Math.round(d.w - dx));\r\n live.x = (base.x ?? 0) + (d.w - live.w);\r\n }\r\n if (g.south) live.h = Math.max(16, Math.round(d.h + dy));\r\n if (g.north) {\r\n live.h = Math.max(16, Math.round(d.h - dy));\r\n live.y = (base.y ?? 0) + (d.h - live.h);\r\n }\r\n d.live = live;\r\n apply(live);\r\n onLive();\r\n };\r\n const end = () => {\r\n const d = drag.current;\r\n if (d) onTransform(d.live);\r\n drag.current = null;\r\n setGuides({ x: null, y: null });\r\n };\r\n\r\n const outline: CSSProperties = {\r\n position: \"fixed\",\r\n left: box.x - 1,\r\n top: box.y - 1,\r\n width: box.w + 2,\r\n height: box.h + 2,\r\n outline: \"2px solid #8b5cf6\",\r\n borderRadius: 4,\r\n pointerEvents: \"none\",\r\n zIndex: Z,\r\n };\r\n const handle: CSSProperties = {\r\n position: \"fixed\",\r\n width: 12,\r\n height: 12,\r\n background: \"#fff\",\r\n border: \"2px solid #8b5cf6\",\r\n borderRadius: 3,\r\n zIndex: Z + 1,\r\n touchAction: \"none\",\r\n boxSizing: \"border-box\",\r\n };\r\n const gripPos = (g: Grip): CSSProperties => {\r\n const cx = g.west ? box.x : g.east ? box.x + box.w : box.x + box.w \/ 2;\r\n const cy = g.north ? box.y : g.south ? box.y + box.h : box.y + box.h \/ 2;\r\n return { left: cx - 6, top: cy - 6, cursor: g.cursor };\r\n };\r\n\r\n return (\r\n <>\r\n {guides.x !== null ?

: null}\r\n {guides.y !== null ?
: null}\r\n
\r\n {movable ? (\r\n <>\r\n {\/* move grip \u2014 circular, top-left, offset clear of the corner handle *\/}\r\n \r\n {GRIPS.map((g) => (\r\n \r\n ))}\r\n <\/>\r\n ) : null}\r\n <\/>\r\n );\r\n}\r\n\r\nfunction FloatingToolbar({\r\n box,\r\n isText,\r\n base,\r\n setStyle,\r\n}: {\r\n box: Box;\r\n isText: boolean;\r\n base: Partial;\r\n setStyle: (patch: Partial) => void;\r\n}): ReactElement {\r\n const wrap: CSSProperties = {\r\n position: \"fixed\",\r\n left: box.x,\r\n top: Math.max(8, box.y - 46),\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: 8,\r\n padding: \"6px 10px\",\r\n background: \"#0f172a\",\r\n color: \"#fff\",\r\n border: \"1px solid rgba(255,255,255,0.12)\",\r\n borderRadius: 999,\r\n boxShadow: \"0 8px 24px -8px rgba(0,0,0,0.5)\",\r\n zIndex: Z + 2,\r\n fontFamily: \"system-ui, sans-serif\",\r\n fontSize: 12,\r\n };\r\n const swatch: CSSProperties = { width: 22, height: 22, border: \"none\", background: \"transparent\", padding: 0, cursor: \"pointer\" };\r\n const num: CSSProperties = { width: 52, background: \"#1e293b\", color: \"#fff\", border: \"1px solid #334155\", borderRadius: 6, padding: \"3px 6px\", font: \"inherit\" };\r\n return (\r\n
e.preventDefault()}>\r\n {isText ? (\r\n