@particle-academy/fancy-cms-ui 0.0.1-dev.7 → 0.0.1-dev.9

package/dist/editor.cjs

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactFancy = require('@particle-academy/react-fancy');
 
 // src/editor/Editor.tsx
 
@@ -97,6 +98,10 @@ function reduce(doc, op, opts = {}) {
         props: { ...doc.nodes[op.id].props, ...op.patch }
       });
     }
+    case "set_layout": {
+      if (!doc.nodes[op.id]) return invalid("node not found");
+      return patchNode(doc, op.id, { layout: op.layout });
+    }
     case "set_style": {
       const node = doc.nodes[op.id];
       if (!node) return invalid("node not found");
@@ -512,31 +517,110 @@ function Canvas({ doc, selection, onSelect, apply }) {
 function cssEscape(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
-function LayersPanel({ doc, selection, onSelect }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(LayerRow, { doc, id, depth: 0, selection, onSelect }, id)) });
+
+// src/document/fractional.ts
+var BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+var RADIX = BASE.length;
+var MID = Math.floor(RADIX / 2);
+function val(c) {
+  const i = BASE.indexOf(c);
+  return i < 0 ? 0 : i;
+}
+function keyBetween(a, b) {
+  if (a === null) a = "";
+  if (b === null) {
+    return a + BASE[MID];
+  }
+  if (a >= b) {
+    throw new Error(`keyBetween: lower bound "${a}" is not below upper bound "${b}"`);
+  }
+  let result = "";
+  let i = 0;
+  for (; ; ) {
+    const ca = i < a.length ? val(a[i]) : 0;
+    const cb = i < b.length ? val(b[i]) : RADIX;
+    if (cb - ca > 1) {
+      result += BASE[ca + Math.floor((cb - ca) / 2)];
+      return result;
+    }
+    if (ca === cb) {
+      result += BASE[ca];
+      i++;
+      continue;
+    }
+    result += BASE[ca];
+    i++;
+    for (; ; ) {
+      const da = i < a.length ? val(a[i]) : 0;
+      if (RADIX - da > 1) {
+        result += BASE[da + Math.floor((RADIX - da) / 2)];
+        return result;
+      }
+      result += BASE[da];
+      i++;
+    }
+  }
+}
+var MIME = "application/x-cms-node";
+function isAncestorOrSelf(doc, id, maybeAncestor) {
+  for (let cur = id; cur; cur = doc.nodes[cur]?.parent ?? null) {
+    if (cur === maybeAncestor) return true;
+  }
+  return false;
+}
+function LayersPanel({ doc, selection, onSelect, onMove }) {
+  const [overId, setOverId] = react.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(LayerRow, { doc, id, depth: 0, selection, onSelect, onMove, overId, setOverId }, id)) });
 }
-function LayerRow({ doc, id, depth, selection, onSelect }) {
+function LayerRow({ doc, id, depth, selection, onSelect, onMove, overId, setOverId }) {
   const node = doc.nodes[id];
   if (!node) return null;
   const selected = selection === id;
+  const draggable = Boolean(onMove);
+  const drop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOverId(null);
+    if (!onMove) return;
+    const dragId = e.dataTransfer.getData(MIME);
+    if (!dragId || dragId === id || isAncestorOrSelf(doc, id, dragId)) return;
+    const siblings = childrenOf(doc, node.parent);
+    const idx = siblings.findIndex((n) => n.id === id);
+    const next = siblings[idx + 1];
+    onMove(dragId, node.parent, keyBetween(node.order, next ? next.order : null));
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
+        draggable,
         onClick: () => onSelect(id),
+        onDragStart: (e) => {
+          e.dataTransfer.setData(MIME, id);
+          e.dataTransfer.effectAllowed = "move";
+        },
+        onDragOver: (e) => {
+          if (!onMove) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          if (overId !== id) setOverId(id);
+        },
+        onDragLeave: () => overId === id && setOverId(null),
+        onDrop: drop,
         style: {
           display: "block",
           width: "100%",
           textAlign: "left",
           border: "none",
           borderRadius: 6,
-          cursor: "pointer",
+          cursor: draggable ? "grab" : "pointer",
           padding: "4px 8px",
           paddingLeft: 8 + depth * 14,
           background: selected ? "#ede9fe" : "transparent",
           color: selected ? "#5b21b6" : "#334155",
-          font: "inherit"
+          font: "inherit",
+          boxShadow: overId === id ? "inset 0 -2px 0 0 #8b5cf6" : "none"
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.6 }, children: node.type }),
@@ -545,17 +629,7 @@ function LayerRow({ doc, id, depth, selection, onSelect }) {
         ]
       }
     ),
-    childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-      LayerRow,
-      {
-        doc,
-        id: child.id,
-        depth: depth + 1,
-        selection,
-        onSelect
-      },
-      child.id
-    ))
+    childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(LayerRow, { doc, id: child.id, depth: depth + 1, selection, onSelect, onMove, overId, setOverId }, child.id))
   ] });
 }
 var label = {
@@ -687,7 +761,15 @@ function Editor({ defaultValue, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: shell, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderRight: "1px solid #e2e8f0", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { ed }),
-      /* @__PURE__ */ jsxRuntime.jsx(LayersPanel, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LayersPanel,
+        {
+          doc: ed.state.doc,
+          selection: ed.state.selection,
+          onSelect: ed.select,
+          onMove: (id, parent, order) => ed.apply({ t: "move_node", id, parent, order })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Canvas, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select, apply: ed.apply }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderLeft: "1px solid #e2e8f0", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(Inspector, { doc: ed.state.doc, selection: ed.state.selection, apply: ed.apply }) })
@@ -720,17 +802,6 @@ function Toolbar({ ed }) {
     }
   );
 }
-
-// src/document/fractional.ts
-var BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-var RADIX = BASE.length;
-var MID = Math.floor(RADIX / 2);
-function keyBetween(a, b) {
-  if (a === null) a = "";
-  {
-    return a + BASE[MID];
-  }
-}
 var CONTAINER_TYPES = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape"]);
 function NodeInspector({
   node,
@@ -738,6 +809,7 @@ function NodeInspector({
   measured,
   onProps,
   onStyle,
+  onLayout,
   onTransform,
   onRemove,
   onClose
@@ -820,9 +892,44 @@ function NodeInspector({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Padding", value: base.padding?.value, placeholder: "0", onChange: (v) => onStyle({ padding: v == null ? void 0 : len(v) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Margin", value: base.margin?.value, placeholder: "0", onChange: (v) => onStyle({ margin: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { label: "Border", value: base.border ?? "", placeholder: "1px solid #e2e8f0", onChange: (v) => onStyle({ border: v || void 0 }) }) })
+      ] }),
+      CONTAINER_TYPES.has(node.type) ? /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Layout", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Sel,
+            {
+              label: "Mode",
+              value: node.layout ?? "free",
+              options: [["free", "Free"], ["stack", "Stack"], ["grid", "Grid"]],
+              onChange: (v) => onLayout?.(v)
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Gap", value: base.gap?.value, placeholder: "0", onChange: (v) => onStyle({ gap: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Sel,
+            {
+              label: "Align",
+              value: base.align ?? "",
+              options: [["", "\u2014"], ["start", "Start"], ["center", "Center"], ["end", "End"], ["stretch", "Stretch"]],
+              onChange: (v) => onStyle({ align: v || void 0 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Sel,
+            {
+              label: "Justify",
+              value: base.justify ?? "",
+              options: [["", "\u2014"], ["start", "Start"], ["center", "Center"], ["end", "End"], ["between", "Between"], ["around", "Around"]],
+              onChange: (v) => onStyle({ justify: v || void 0 })
+            }
+          )
         ] })
-      ] })
+      ] }) : null
     ] })
   ] });
 }
@@ -877,6 +984,12 @@ function Num({ label: label2, value, placeholder, onChange, step, min, max }) {
     )
   ] });
 }
+function Txt({ label: label2, value, placeholder, onChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { style: field, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: fieldLabel, children: label2 }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { style: input2, type: "text", value, placeholder, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
 function Color({ label: label2, value, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { style: field, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: fieldLabel, children: label2 }),
@@ -926,6 +1039,110 @@ var input2 = {
 };
 var iconBtn = { background: "transparent", border: "none", color: "#e2e8f0", cursor: "pointer", fontSize: 13, padding: 4, borderRadius: 6 };
 var miniBtn = { font: "inherit", fontSize: 11, color: "#e2e8f0", background: "#334155", border: "1px solid #475569", borderRadius: 6, padding: "5px 10px", cursor: "pointer" };
+
+// src/editor/editorOps.ts
+function childrenOfMap(nodes, parent) {
+  return Object.values(nodes).filter((n) => n.parent === parent).sort((a, b) => a.order < b.order ? -1 : a.order > b.order ? 1 : 0);
+}
+function subtreeBfs(nodes, root) {
+  const out = [];
+  const queue = [root];
+  while (queue.length) {
+    const cur = queue.shift();
+    out.push(cur);
+    for (const child of childrenOfMap(nodes, cur)) queue.push(child.id);
+  }
+  return out;
+}
+function cloneFrom(nodes, rootId, newParent, newOrder, seqBase) {
+  if (!nodes[rootId]) return { ops: [], newRootId: null };
+  const order = subtreeBfs(nodes, rootId);
+  const idMap = {};
+  order.forEach((old, i) => idMap[old] = `${old}_c${seqBase}_${i}`);
+  const ops = order.map((old) => {
+    const src = nodes[old];
+    const cloned = JSON.parse(JSON.stringify(src));
+    cloned.id = idMap[old];
+    cloned.parent = old === rootId ? newParent : idMap[src.parent];
+    if (old === rootId) cloned.order = newOrder;
+    return { t: "insert_node", node: cloned };
+  });
+  return { ops, newRootId: idMap[rootId] };
+}
+function duplicateOps(doc, id) {
+  const node = doc.nodes[id];
+  if (!node) return { ops: [], newRootId: null };
+  const sibs = childrenOf(doc, node.parent);
+  const idx = sibs.findIndex((s) => s.id === id);
+  const newOrder = keyBetween(node.order, sibs[idx + 1]?.order ?? null);
+  const { ops, newRootId } = cloneFrom(doc.nodes, id, node.parent, newOrder, doc.seq);
+  if (node.parent === null && newRootId) {
+    const base = doc.sections;
+    const at = base.indexOf(id);
+    ops.push({ t: "reorder_sections", order: [...base.slice(0, at + 1), newRootId, ...base.slice(at + 1)] });
+  }
+  return { ops, newRootId };
+}
+function pasteOps(doc, clip, target, containerTypes) {
+  const sel = target ? doc.nodes[target] : null;
+  const parent = sel ? containerTypes.has(sel.type) ? sel.id : sel.parent : doc.sections[doc.sections.length - 1] ?? null;
+  const sibs = childrenOf(doc, parent);
+  const newOrder = keyBetween(sibs.length ? sibs[sibs.length - 1].order : null, null);
+  const { ops, newRootId } = cloneFrom(clip.nodes, clip.rootId, parent, newOrder, doc.seq);
+  return { ops, newRootId };
+}
+function reorderOps(doc, id, dir) {
+  const node = doc.nodes[id];
+  if (!node) return [];
+  if (node.parent === null) {
+    const s = [...doc.sections];
+    const i = s.indexOf(id);
+    if (i < 0) return [];
+    s.splice(i, 1);
+    if (dir === "front") s.unshift(id);
+    else if (dir === "back") s.push(id);
+    else s.splice(Math.max(0, Math.min(s.length, dir === "up" ? i - 1 : i + 1)), 0, id);
+    return [{ t: "reorder_sections", order: s }];
+  }
+  const sibs = childrenOf(doc, node.parent);
+  const idx = sibs.findIndex((sb) => sb.id === id);
+  if (idx < 0) return [];
+  const last = sibs.length - 1;
+  let newOrder;
+  if (dir === "up") {
+    if (idx <= 0) return [];
+    newOrder = keyBetween(sibs[idx - 2]?.order ?? null, sibs[idx - 1].order);
+  } else if (dir === "down") {
+    if (idx >= last) return [];
+    newOrder = keyBetween(sibs[idx + 1].order, sibs[idx + 2]?.order ?? null);
+  } else if (dir === "front") {
+    if (idx >= last) return [];
+    newOrder = keyBetween(sibs[last].order, null);
+  } else {
+    if (idx <= 0) return [];
+    newOrder = keyBetween(null, sibs[0].order);
+  }
+  return [{ t: "move_node", id, parent: node.parent, order: newOrder }];
+}
+function wrapInBoxOps(doc, id) {
+  const node = doc.nodes[id];
+  if (!node || node.parent === null) return { ops: [], newRootId: null };
+  const frameId = `box_${doc.seq}`;
+  return {
+    ops: [
+      { t: "insert_node", node: { id: frameId, type: "frame", parent: node.parent, order: node.order, props: {}, style: { base: { padding: { value: 16, unit: "px" } } } } },
+      { t: "move_node", id, parent: frameId, order: "a" }
+    ],
+    newRootId: frameId
+  };
+}
+function snapshotSubtree(doc, id) {
+  if (!doc.nodes[id]) return null;
+  const ids = subtreeBfs(doc.nodes, id);
+  const nodes = {};
+  for (const nid of ids) nodes[nid] = JSON.parse(JSON.stringify(doc.nodes[nid]));
+  return { rootId: id, nodes };
+}
 var Z2 = 2147483e3;
 function EditablePage({
   doc,
@@ -1029,7 +1246,7 @@ function EditablePage({
       const doc2 = ed.state.doc;
       const parent = selNode ? CONTAINER_TYPES2.has(selNode.type) ? selNode.id : selNode.parent : doc2.sections[doc2.sections.length - 1] ?? null;
       const siblings = childrenOf(doc2, parent);
-      const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null);
+      const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null, null);
       const id = `n${doc2.seq + 1}-${Math.floor(performance.now())}`;
       const def = ADD_DEFAULTS[kind];
       ed.apply({ t: "insert_node", node: { id, type: def.type, parent, order, props: { ...def.props }, style: { base: { ...def.style } } } });
@@ -1039,14 +1256,93 @@ function EditablePage({
   );
   const setStyle = (patch) => selection && ed.apply({ t: "set_style", id: selection, breakpoint: "base", patch });
   const setProps = (patch) => selection && ed.apply({ t: "set_props", id: selection, patch });
+  const setLayout = (layout) => selection && ed.apply({ t: "set_layout", id: selection, layout });
   const removeSelected = () => {
     if (!selection) return;
     ed.apply({ t: "remove_node", id: selection });
     ed.select(null);
   };
-  const page = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: pageRef, onClickCapture, children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry }) });
+  const clip = react.useRef(null);
+  const runOps = (result) => {
+    result.ops.forEach((op) => ed.apply(op));
+    if (result.newRootId) ed.select(result.newRootId);
+  };
+  const duplicate = (id) => id && runOps(duplicateOps(ed.state.doc, id));
+  const reorder = (id, dir) => id && reorderOps(ed.state.doc, id, dir).forEach((op) => ed.apply(op));
+  const wrapInBox = (id) => id && runOps(wrapInBoxOps(ed.state.doc, id));
+  const copy = (id) => {
+    if (id) clip.current = snapshotSubtree(ed.state.doc, id);
+  };
+  const paste = (target) => {
+    if (clip.current) runOps(pasteOps(ed.state.doc, clip.current, target, CONTAINER_TYPES2));
+  };
+  const startEditText = (id) => {
+    if (!id) return;
+    ed.select(id);
+    requestAnimationFrame(() => pageRef.current?.querySelector(`[data-cms="${cssEscape2(id)}"]`)?.focus());
+  };
+  const nudgeRef = react.useRef({ transforms, onNodeTransform });
+  nudgeRef.current = { transforms, onNodeTransform };
+  react.useEffect(() => {
+    if (!editing) return;
+    const onKey = (e) => {
+      const t = e.target;
+      const typing = t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
+      if (e.key === "Escape") return void ed.select(null);
+      if (typing) return;
+      if ((e.key === "Delete" || e.key === "Backspace") && selection) {
+        e.preventDefault();
+        removeSelected();
+      } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "d" && selection) {
+        e.preventDefault();
+        duplicate(selection);
+      } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c" && selection) {
+        copy(selection);
+      } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "v") {
+        e.preventDefault();
+        paste(selection);
+      } else if (selection && /^Arrow(Left|Right|Up|Down)$/.test(e.key)) {
+        const { transforms: tf, onNodeTransform: commit } = nudgeRef.current;
+        if (!commit) return;
+        e.preventDefault();
+        const step = e.shiftKey ? 10 : 1;
+        const dx = e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0;
+        const dy = e.key === "ArrowUp" ? -step : e.key === "ArrowDown" ? step : 0;
+        const cur = tf?.[selection] ?? {};
+        commit(selection, { ...cur, x: (cur.x ?? 0) + dx, y: (cur.y ?? 0) + dy });
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [editing, selection]);
+  const onContextMenuSelect = (e) => {
+    if (!editing) return;
+    const el = e.target.closest("[data-cms]");
+    if (el) ed.select(el.getAttribute("data-cms"));
+    else ed.select(null);
+  };
+  const page = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: pageRef, onClickCapture, onContextMenu: onContextMenuSelect, children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry }) });
+  const pageShell = pinned ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: spacerRef, style: { height: `${Math.max(1, frames) * 100}vh` }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "sticky", top: 0, height: "100vh", overflow: "hidden" }, children: page }) }) : page;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-    pinned ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: spacerRef, style: { height: `${Math.max(1, frames) * 100}vh` }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "sticky", top: 0, height: "100vh", overflow: "hidden" }, children: page }) }) : page,
+    editing ? /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.ContextMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Trigger, { children: pageShell }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Content, { className: "!z-[2147483646]", children: /* @__PURE__ */ jsxRuntime.jsx(
+        EditMenuItems,
+        {
+          node: selNode ?? null,
+          hasClipboard: Boolean(clip.current),
+          isContainer: selNode ? CONTAINER_TYPES2.has(selNode.type) : false,
+          onEditText: () => startEditText(selection),
+          onAdd: addNode,
+          onDuplicate: () => duplicate(selection),
+          onCopy: () => copy(selection),
+          onPaste: () => paste(selection),
+          onWrap: () => wrapInBox(selection),
+          onReorder: (d) => reorder(selection, d),
+          onDelete: removeSelected
+        }
+      ) })
+    ] }) : pageShell,
     editing && box && selection ? /* @__PURE__ */ jsxRuntime.jsx(
       SelectionOverlay,
       {
@@ -1067,6 +1363,7 @@ function EditablePage({
         measured: { w: box.w, h: box.h },
         onProps: setProps,
         onStyle: setStyle,
+        onLayout: setLayout,
         onTransform: (t) => selection && onNodeTransform?.(selection, t),
         onRemove: removeSelected,
         onClose: () => ed.select(null)
@@ -1300,6 +1597,45 @@ function EditBar({
     ] }) : null
   ] });
 }
+function EditMenuItems({
+  node,
+  hasClipboard,
+  isContainer,
+  onEditText,
+  onAdd,
+  onDuplicate,
+  onCopy,
+  onPaste,
+  onWrap,
+  onReorder,
+  onDelete
+}) {
+  const editable = node && (node.type === "text" || node.type === "heading");
+  const nested = Boolean(node && node.parent !== null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    editable ? /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: onEditText, children: "Edit text" }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.ContextMenu.Sub, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.SubTrigger, { children: isContainer ? "Add inside" : "Add" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.SubContent, { className: "!z-[2147483647]", children: ADD_MENU.map((m) => /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: () => onAdd(m.kind), children: m.label }, m.kind)) })
+    ] }),
+    node ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: onDuplicate, children: "Duplicate" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: onCopy, children: "Copy" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { disabled: !hasClipboard, onClick: onPaste, children: "Paste" }),
+      nested ? /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: onWrap, children: "Wrap in Box" }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: () => onReorder("up"), children: "Move up" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: () => onReorder("down"), children: "Move down" }),
+      nested ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: () => onReorder("front"), children: "Bring to front" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: () => onReorder("back"), children: "Send to back" })
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { danger: true, onClick: onDelete, children: "Delete" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { disabled: !hasClipboard, onClick: onPaste, children: "Paste" })
+  ] });
+}
 function applyTransform(el, t) {
   if (t && (t.x != null || t.y != null || t.scale != null || t.rotate != null || t.opacity != null || t.w != null || t.h != null)) {
     el.style.transform = `translate3d(${t.x ?? 0}px, ${t.y ?? 0}px, 0) scale(${t.scale ?? 1}) rotate(${t.rotate ?? 0}deg)`;