@particle-academy/fancy-cms-ui 0.0.1-dev.1 → 0.0.1-dev.11

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");
@@ -233,8 +238,8 @@ var DEFAULT_BREAKPOINTS = {
 
 // src/render/css.ts
 var selectorFor = (id) => `[data-cms="${id}"]`;
-function lengthToCss(len) {
-  return `${len.value}${len.unit}`;
+function lengthToCss(len2) {
+  return `${len2.value}${len2.unit}`;
 }
 function sizeToCss(size) {
   if (size === "fill") return "100%";
@@ -321,9 +326,9 @@ function isParentFree(doc, node) {
 function serializeRule(selector, decls, indent) {
   const props = Object.keys(decls).sort();
   if (props.length === 0) return "";
-  const body = props.map((p) => `${indent}  ${p}: ${decls[p]};`).join("\n");
+  const body2 = props.map((p) => `${indent}  ${p}: ${decls[p]};`).join("\n");
   return `${indent}${selector} {
-${body}
+${body2}
 ${indent}}`;
 }
 function emitDocCss(doc) {
@@ -368,6 +373,12 @@ var defaultRegistry = {
   frame: ({ children }) => children,
   shape: ({ children }) => children,
   text: ({ node }) => literal(node.props.content),
+  heading: ({ node }) => literal(node.props.content) || "Heading",
+  button: ({ node }) => {
+    const label2 = literal(node.props.label) || literal(node.props.content) || "Button";
+    const variant = literal(node.props.variant) || "primary";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cms-button": variant, style: buttonStyle(variant), children: label2 });
+  },
   image: ({ node }) => /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
@@ -377,13 +388,38 @@ var defaultRegistry = {
     }
   )
 };
+function buttonStyle(variant) {
+  const base = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "9px 16px",
+    borderRadius: 8,
+    fontWeight: 600,
+    fontSize: 14,
+    lineHeight: 1,
+    cursor: "pointer",
+    userSelect: "none"
+  };
+  if (variant === "ghost") return { ...base, background: "transparent", color: "inherit", border: "1px solid currentColor" };
+  if (variant === "outline") return { ...base, background: "transparent", color: "#7c3aed", border: "1px solid #7c3aed" };
+  return { ...base, background: "#7c3aed", color: "#fff", border: "1px solid #7c3aed" };
+}
 function RenderNode({ doc, id, registry = defaultRegistry }) {
   const node = doc.nodes[id];
   if (!node) return null;
   const kids = childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: child.id, registry }, child.id));
   const renderer = registry[node.type];
   const inner = renderer ? renderer({ node, doc, children: kids }) : node.island ? null : kids;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, "data-cms-island": node.island ? node.type : void 0, children: inner });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-cms": node.id,
+      "data-cms-island": node.island ? node.type : void 0,
+      className: node.className,
+      children: inner
+    }
+  );
 }
 function CmsPage({
   doc,
@@ -481,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 LayerRow({ doc, id, depth, selection, onSelect }) {
+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, 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 }),
@@ -514,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 = {
@@ -656,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 }) })
@@ -689,11 +802,909 @@ function Toolbar({ ed }) {
     }
   );
 }
+var CONTAINER_TYPES = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape"]);
+function NodeInspector({
+  node,
+  transform,
+  measured,
+  onProps,
+  onStyle,
+  onLayout,
+  onTransform,
+  onRemove,
+  onClose
+}) {
+  const base = node.style.base ?? {};
+  const setT = (patch) => onTransform({ ...transform, ...patch });
+  const handled = /* @__PURE__ */ new Set(["content", "label"]);
+  const extraKeys = Object.keys(node.props).filter(
+    (k) => !handled.has(k) && ["string", "number", "boolean"].includes(typeof node.props[k])
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panel, onPointerDown: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { fontSize: 12, textTransform: "capitalize" }, children: node.type }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, opacity: 0.5, fontFamily: "ui-monospace, monospace", overflow: "hidden", textOverflow: "ellipsis" }, children: node.id })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...iconBtn, color: "#fca5a5" }, title: "Delete element", onClick: onRemove, children: "\u{1F5D1}" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: iconBtn, title: "Close", onClick: onClose, children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: body, children: [
+      "content" in node.props ? /* @__PURE__ */ jsxRuntime.jsx(Group, { label: "Content", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          style: { ...input2, minHeight: 64, resize: "vertical", lineHeight: 1.4 },
+          value: String(node.props.content ?? ""),
+          onChange: (e) => onProps({ content: e.target.value })
+        }
+      ) }) : null,
+      "label" in node.props ? /* @__PURE__ */ jsxRuntime.jsx(Group, { label: "Label", children: /* @__PURE__ */ jsxRuntime.jsx("input", { style: input2, value: String(node.props.label ?? ""), onChange: (e) => onProps({ label: e.target.value }) }) }) : null,
+      extraKeys.length ? /* @__PURE__ */ jsxRuntime.jsx(Group, { label: "Properties", children: extraKeys.map((k) => /* @__PURE__ */ jsxRuntime.jsx(PropField, { name: k, value: node.props[k], onChange: (v) => onProps({ [k]: v }) }, k)) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Position & size", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "X", value: transform.x, placeholder: "0", onChange: (v) => setT({ x: v }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Y", value: transform.y, placeholder: "0", onChange: (v) => setT({ y: v }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "W", value: transform.w, placeholder: `${Math.round(measured.w)}`, onChange: (v) => setT({ w: v }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "H", value: transform.h, placeholder: `${Math.round(measured.h)}`, onChange: (v) => setT({ h: v }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Scale", value: transform.scale, placeholder: "1", step: 0.05, onChange: (v) => setT({ scale: v }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Rotate", value: transform.rotate, placeholder: "0", onChange: (v) => setT({ rotate: v }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Opacity", value: transform.opacity, placeholder: "1", min: 0, max: 1, step: 0.05, onChange: (v) => setT({ opacity: v }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...miniBtn, alignSelf: "end" }, onClick: () => onTransform({}), title: "Clear transform", children: "Reset" })
+        ] })
+      ] }),
+      !CONTAINER_TYPES.has(node.type) ? /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Text", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Color, { label: "Color", value: base.color ?? "#0f172a", onChange: (v) => onStyle({ color: v }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Size", value: base.fontSize?.value, placeholder: "16", onChange: (v) => onStyle({ fontSize: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Sel,
+            {
+              label: "Weight",
+              value: String(base.fontWeight ?? ""),
+              options: [["", "\u2014"], ["400", "Regular"], ["500", "Medium"], ["600", "Semibold"], ["700", "Bold"], ["800", "Heavy"]],
+              onChange: (v) => onStyle({ fontWeight: v ? Number(v) : void 0 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Sel,
+            {
+              label: "Align",
+              value: base.textAlign ?? "",
+              options: [["", "\u2014"], ["left", "Left"], ["center", "Center"], ["right", "Right"], ["justify", "Justify"]],
+              onChange: (v) => onStyle({ textAlign: v || void 0 })
+            }
+          )
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(Group, { label: "Box", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Color, { label: "Background", value: hex(base.background), onChange: (v) => onStyle({ background: v }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Num, { label: "Radius", value: base.radius?.value, placeholder: "0", onChange: (v) => onStyle({ radius: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__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
+    ] })
+  ] });
+}
+function Group({ label: label2, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingBottom: 12, marginBottom: 12, borderBottom: "1px solid #1e293b" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", opacity: 0.5 }, children: label2 }),
+    children
+  ] });
+}
+function Row({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 8 }, children });
+}
+function PropField({ name, value, onChange }) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textTransform: "capitalize" }, children: name })
+    ] });
+  }
+  if (name === "variant") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Sel, { label: name, value: String(value), options: [["primary", "Primary"], ["ghost", "Ghost"], ["outline", "Outline"]], onChange });
+  }
+  const isNum = typeof value === "number";
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { style: field, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: fieldLabel, children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        style: input2,
+        type: isNum ? "number" : "text",
+        value: String(value),
+        onChange: (e) => onChange(isNum ? Number(e.target.value) : e.target.value)
+      }
+    )
+  ] });
+}
+function Num({ label: label2, value, placeholder, onChange, step, min, max }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { style: field, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: fieldLabel, children: label2 }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        style: input2,
+        type: "number",
+        step,
+        min,
+        max,
+        value: value ?? "",
+        placeholder,
+        onChange: (e) => onChange(e.target.value === "" ? void 0 : Number(e.target.value))
+      }
+    )
+  ] });
+}
+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 }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { style: { ...input2, padding: 2, height: 30 }, type: "color", value, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
+function Sel({ label: label2, value, options, onChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { style: field, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: fieldLabel, children: label2 }),
+    /* @__PURE__ */ jsxRuntime.jsx("select", { style: input2, value, onChange: (e) => onChange(e.target.value), children: options.map(([v, l]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: l }, v)) })
+  ] });
+}
+var len = (value) => ({ value, unit: "px" });
+var hex = (v) => v && /^#[0-9a-fA-F]{6}$/.test(v) ? v : "#ffffff";
+var Z = 2147483e3;
+var panel = {
+  position: "fixed",
+  top: 60,
+  right: 12,
+  bottom: 96,
+  width: 264,
+  display: "flex",
+  flexDirection: "column",
+  background: "#0b1220",
+  color: "#e2e8f0",
+  border: "1px solid #1e293b",
+  borderRadius: 12,
+  boxShadow: "0 18px 48px -16px rgba(0,0,0,0.6)",
+  zIndex: Z + 2,
+  fontFamily: "system-ui, sans-serif",
+  overflow: "hidden"
+};
+var headRow = { display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", borderBottom: "1px solid #1e293b" };
+var body = { padding: 12, overflowY: "auto" };
+var field = { display: "flex", flexDirection: "column", gap: 4, flex: 1, minWidth: 0 };
+var fieldLabel = { fontSize: 10, opacity: 0.6 };
+var input2 = {
+  width: "100%",
+  boxSizing: "border-box",
+  background: "#0f172a",
+  color: "#e2e8f0",
+  border: "1px solid #334155",
+  borderRadius: 6,
+  padding: "5px 7px",
+  font: "inherit",
+  fontSize: 12
+};
+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;
+var SNAP = 6;
+function EditablePage({
+  doc,
+  registry = defaultRegistry,
+  timelineDock,
+  transforms,
+  onNodeTransform,
+  onSelect,
+  frames = 1,
+  onProgress,
+  pinned = true
+}) {
+  const ed = useEditor(doc);
+  const [editing, setEditing] = react.useState(false);
+  const [revealed, setRevealed] = react.useState(false);
+  const pageRef = react.useRef(null);
+  const spacerRef = react.useRef(null);
+  const [box, setBox] = react.useState(null);
+  const { selection } = ed.state;
+  const selNode = selection ? ed.state.doc.nodes[selection] : null;
+  react.useEffect(() => onSelect?.(selection), [selection, onSelect]);
+  react.useEffect(() => {
+    const onKey = (e) => setRevealed(e.ctrlKey && e.shiftKey);
+    const onBlur = () => setRevealed(false);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("keyup", onKey);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("keyup", onKey);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, []);
+  react.useEffect(() => {
+    const root = pageRef.current;
+    if (!root) return;
+    root.querySelectorAll("[data-cms]").forEach((el) => {
+      const id = el.dataset.cms;
+      const t = id ? transforms?.[id] : void 0;
+      applyTransform(el, t);
+    });
+  }, [transforms, ed.state.doc]);
+  react.useEffect(() => {
+    const spacer = spacerRef.current;
+    if (!spacer || !onProgress) return;
+    const compute = () => {
+      const len2 = spacer.offsetHeight - window.innerHeight;
+      const top = spacer.getBoundingClientRect().top;
+      onProgress(len2 > 0 ? Math.min(1, Math.max(0, -top / len2)) : 0);
+    };
+    compute();
+    window.addEventListener("scroll", compute, { passive: true });
+    window.addEventListener("resize", compute);
+    return () => {
+      window.removeEventListener("scroll", compute);
+      window.removeEventListener("resize", compute);
+    };
+  }, [onProgress, frames]);
+  const measureBox = react.useCallback(() => {
+    if (!editing || !selection || !pageRef.current) return setBox(null);
+    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
+    if (!el) return setBox(null);
+    const r = el.getBoundingClientRect();
+    setBox({ x: r.left, y: r.top, w: r.width, h: r.height });
+  }, [editing, selection]);
+  react.useLayoutEffect(() => {
+    measureBox();
+    window.addEventListener("scroll", measureBox, { passive: true });
+    window.addEventListener("resize", measureBox);
+    return () => {
+      window.removeEventListener("scroll", measureBox);
+      window.removeEventListener("resize", measureBox);
+    };
+  }, [measureBox, ed.state.doc]);
+  react.useEffect(() => {
+    if (!editing || !selection || !pageRef.current || selNode?.type !== "text") return;
+    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
+    if (!el) return;
+    el.setAttribute("contenteditable", "true");
+    el.style.outline = "none";
+    el.focus();
+    const commit = () => ed.apply({ t: "set_props", id: selection, patch: { content: el.innerText } });
+    el.addEventListener("blur", commit);
+    return () => {
+      el.removeEventListener("blur", commit);
+      el.removeAttribute("contenteditable");
+    };
+  }, [editing, selection, selNode?.type, ed]);
+  const onClickCapture = (e) => {
+    if (!editing) return;
+    const el = e.target.closest("[data-cms]");
+    if (el) {
+      if (el.getAttribute("contenteditable") === "true") return;
+      e.preventDefault();
+      e.stopPropagation();
+      ed.select(el.getAttribute("data-cms"));
+    }
+  };
+  const addNode = react.useCallback(
+    (kind) => {
+      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, 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 } } } });
+      ed.select(id);
+    },
+    [ed, selNode]
+  );
+  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 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 }) }) : frames > 1 ? (
+    // Normal flow, but "expanded" — extra scroll length below the content so a
+    // page can be made longer than its content (the ＋ Frame control).
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: `${frames * 100}vh` }, children: page })
+  ) : page;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+    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,
+      {
+        box,
+        base: transforms?.[selection] ?? {},
+        movable: Boolean(onNodeTransform),
+        getEl: () => pageRef.current?.querySelector(`[data-cms="${cssEscape2(selection)}"]`) ?? null,
+        onTransform: (t) => onNodeTransform?.(selection, t),
+        onLive: measureBox
+      }
+    ) : null,
+    editing && box && selNode ? /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbar, { box, isText: selNode.type === "text" || selNode.type === "heading", base: selNode.style.base, setStyle }) : null,
+    editing && selNode && box ? /* @__PURE__ */ jsxRuntime.jsx(
+      NodeInspector,
+      {
+        node: selNode,
+        transform: (selection ? transforms?.[selection] : void 0) ?? {},
+        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)
+      }
+    ) : null,
+    revealed || editing ? /* @__PURE__ */ jsxRuntime.jsx(
+      EditBar,
+      {
+        editing,
+        onToggle: () => {
+          setEditing((v) => !v);
+          ed.select(null);
+        },
+        canUndo: ed.canUndo,
+        canRedo: ed.canRedo,
+        onUndo: ed.undo,
+        onRedo: ed.redo,
+        onAdd: addNode
+      }
+    ) : null,
+    editing && timelineDock ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: 0, right: 0, bottom: 0, zIndex: Z2 }, children: timelineDock }) : null
+  ] });
+}
+var CONTAINER_TYPES2 = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape"]);
+var ADD_DEFAULTS = {
+  text: { type: "text", props: { content: "New text" }, style: { color: "inherit" } },
+  heading: { type: "heading", props: { content: "New heading" }, style: { fontSize: { value: 28, unit: "px" }, fontWeight: 700 } },
+  button: { type: "button", props: { label: "Button", href: "#", variant: "primary" }, style: {} },
+  image: { type: "image", props: { src: "", alt: "" }, style: {} },
+  box: { type: "frame", props: {}, style: { padding: { value: 16, unit: "px" } } }
+};
+var GRIPS = [
+  { key: "nw", north: true, west: true, cursor: "nwse-resize" },
+  { key: "n", north: true, cursor: "ns-resize" },
+  { key: "ne", north: true, east: true, cursor: "nesw-resize" },
+  { key: "e", east: true, cursor: "ew-resize" },
+  { key: "se", south: true, east: true, cursor: "nwse-resize" },
+  { key: "s", south: true, cursor: "ns-resize" },
+  { key: "sw", south: true, west: true, cursor: "nesw-resize" },
+  { key: "w", west: true, cursor: "ew-resize" }
+];
+function SelectionOverlay({
+  box,
+  base,
+  movable,
+  getEl,
+  onTransform,
+  onLive
+}) {
+  const drag = react.useRef(null);
+  const targets = react.useRef({ vx: [], hy: [] });
+  const [guides, setGuides] = react.useState({ x: null, y: null });
+  const apply = (t) => {
+    const el = getEl();
+    if (el) applyTransform(el, t);
+  };
+  const snap = (cands, lines) => {
+    let best = { delta: 0, at: null, dist: SNAP + 1 };
+    for (const line of lines) {
+      for (const c of cands) {
+        const diff = line - c;
+        if (Math.abs(diff) < best.dist) best = { delta: diff, at: line, dist: Math.abs(diff) };
+      }
+    }
+    return best.dist <= SNAP ? { delta: best.delta, at: best.at } : { delta: 0, at: null };
+  };
+  const startMove = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    drag.current = { x: e.clientX, y: e.clientY, w: box.w, h: box.h, live: { ...base } };
+    const sel = getEl();
+    const vx = /* @__PURE__ */ new Set();
+    const hy = /* @__PURE__ */ new Set();
+    document.querySelectorAll("[data-cms]").forEach((el) => {
+      if (sel && (el === sel || sel.contains(el) || el.contains(sel))) return;
+      const r = el.getBoundingClientRect();
+      vx.add(r.left).add(r.left + r.width / 2).add(r.right);
+      hy.add(r.top).add(r.top + r.height / 2).add(r.bottom);
+    });
+    targets.current = { vx: [...vx], hy: [...hy] };
+  };
+  const moveMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    let dx = e.clientX - d.x;
+    let dy = e.clientY - d.y;
+    if (!e.altKey) {
+      const l = box.x + dx;
+      const t = box.y + dy;
+      const sx = snap([l, l + box.w / 2, l + box.w], targets.current.vx);
+      const sy = snap([t, t + box.h / 2, t + box.h], targets.current.hy);
+      dx += sx.delta;
+      dy += sy.delta;
+      setGuides({ x: sx.at, y: sy.at });
+    } else if (guides.x !== null || guides.y !== null) {
+      setGuides({ x: null, y: null });
+    }
+    d.live = { ...base, x: (base.x ?? 0) + dx, y: (base.y ?? 0) + dy };
+    apply(d.live);
+    onLive();
+  };
+  const startResize = (g) => (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    drag.current = { x: e.clientX, y: e.clientY, w: base.w ?? box.w, h: base.h ?? box.h, live: { ...base } };
+    e.currentTarget.dataset.grip = g.key;
+  };
+  const resizeMove = (g) => (e) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = e.clientX - d.x;
+    const dy = e.clientY - d.y;
+    const live = { ...base };
+    if (g.east) live.w = Math.max(16, Math.round(d.w + dx));
+    if (g.west) {
+      live.w = Math.max(16, Math.round(d.w - dx));
+      live.x = (base.x ?? 0) + (d.w - live.w);
+    }
+    if (g.south) live.h = Math.max(16, Math.round(d.h + dy));
+    if (g.north) {
+      live.h = Math.max(16, Math.round(d.h - dy));
+      live.y = (base.y ?? 0) + (d.h - live.h);
+    }
+    d.live = live;
+    apply(live);
+    onLive();
+  };
+  const end = () => {
+    const d = drag.current;
+    if (d) onTransform(d.live);
+    drag.current = null;
+    setGuides({ x: null, y: null });
+  };
+  const outline = {
+    position: "fixed",
+    left: box.x - 1,
+    top: box.y - 1,
+    width: box.w + 2,
+    height: box.h + 2,
+    outline: "2px solid #8b5cf6",
+    borderRadius: 4,
+    pointerEvents: "none",
+    zIndex: Z2
+  };
+  const handle = {
+    position: "fixed",
+    width: 12,
+    height: 12,
+    background: "#fff",
+    border: "2px solid #8b5cf6",
+    borderRadius: 3,
+    zIndex: Z2 + 1,
+    touchAction: "none",
+    boxSizing: "border-box"
+  };
+  const gripPos = (g) => {
+    const cx = g.west ? box.x : g.east ? box.x + box.w : box.x + box.w / 2;
+    const cy = g.north ? box.y : g.south ? box.y + box.h : box.y + box.h / 2;
+    return { left: cx - 6, top: cy - 6, cursor: g.cursor };
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    guides.x !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: guides.x, top: 0, bottom: 0, width: 1, background: "#ec4899", zIndex: Z2 + 3, pointerEvents: "none" } }) : null,
+    guides.y !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", top: guides.y, left: 0, right: 0, height: 1, background: "#ec4899", zIndex: Z2 + 3, pointerEvents: "none" } }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: outline }),
+    movable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          title: "Drag to move",
+          onPointerDown: startMove,
+          onPointerMove: moveMove,
+          onPointerUp: end,
+          style: { ...handle, width: 18, height: 18, borderRadius: 9, background: "#8b5cf6", border: "2px solid #fff", left: box.x - 22, top: box.y - 22, cursor: "move" }
+        }
+      ),
+      GRIPS.map((g) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          title: "Drag to resize",
+          onPointerDown: startResize(g),
+          onPointerMove: resizeMove(g),
+          onPointerUp: end,
+          style: { ...handle, ...gripPos(g) }
+        },
+        g.key
+      ))
+    ] }) : null
+  ] });
+}
+function FloatingToolbar({
+  box,
+  isText,
+  base,
+  setStyle
+}) {
+  const wrap = {
+    position: "fixed",
+    left: box.x,
+    top: Math.max(8, box.y - 46),
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "6px 10px",
+    background: "#0f172a",
+    color: "#fff",
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 999,
+    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.5)",
+    zIndex: Z2 + 2,
+    fontFamily: "system-ui, sans-serif",
+    fontSize: 12
+  };
+  const swatch = { width: 22, height: 22, border: "none", background: "transparent", padding: 0, cursor: "pointer" };
+  const num = { width: 52, background: "#1e293b", color: "#fff", border: "1px solid #334155", borderRadius: 6, padding: "3px 6px", font: "inherit" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrap, onMouseDown: (e) => e.preventDefault(), children: [
+    isText ? /* @__PURE__ */ jsxRuntime.jsxs("label", { title: "Text color", style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: "A" }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", style: swatch, value: base.color ?? "#0f172a", onChange: (e) => setStyle({ color: e.target.value }) })
+    ] }) : null,
+    isText ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "number", title: "Font size (px)", style: num, placeholder: "size", value: base.fontSize?.value ?? "", onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { title: "Background", style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: "BG" }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", style: swatch, value: normalizeColor(base.background), onChange: (e) => setStyle({ background: e.target.value }) })
+    ] })
+  ] });
+}
+var ADD_MENU = [
+  { kind: "text", label: "Text" },
+  { kind: "heading", label: "Heading" },
+  { kind: "button", label: "Button" },
+  { kind: "image", label: "Image" },
+  { kind: "box", label: "Box" }
+];
+function EditBar({
+  editing,
+  onToggle,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onAdd
+}) {
+  const [open, setOpen] = react.useState(false);
+  const bar = { position: "fixed", top: 12, right: 12, display: "flex", gap: 6, alignItems: "center", padding: 6, background: "#0f172a", color: "#fff", borderRadius: 999, boxShadow: "0 8px 24px -8px rgba(0,0,0,0.4)", zIndex: Z2 + 3, fontFamily: "system-ui, sans-serif", fontSize: 12 };
+  const btn = { font: "inherit", border: "none", background: "transparent", color: "inherit", cursor: "pointer", padding: "4px 8px", borderRadius: 999 };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: bar, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, background: editing ? "#8b5cf6" : "transparent" }, onClick: onToggle, children: editing ? "\u25CF Editing" : "Edit" }),
+    editing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, background: open ? "#1e293b" : "transparent" }, onClick: () => setOpen((v) => !v), title: "Add an element", children: "\uFF0B Add \u25BE" }),
+        open ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: "calc(100% + 6px)", right: 0, background: "#0f172a", border: "1px solid #1e293b", borderRadius: 10, padding: 4, display: "flex", flexDirection: "column", minWidth: 132, boxShadow: "0 12px 32px -10px rgba(0,0,0,0.6)" }, children: ADD_MENU.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            style: { ...btn, textAlign: "left", borderRadius: 6, padding: "6px 10px" },
+            onClick: () => {
+              onAdd(m.kind);
+              setOpen(false);
+            },
+            children: m.label
+          },
+          m.kind
+        )) }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canUndo ? 1 : 0.4 }, disabled: !canUndo, onClick: onUndo, children: "\u21B6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, opacity: canRedo ? 1 : 0.4 }, disabled: !canRedo, onClick: onRedo, children: "\u21B7" })
+    ] }) : 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)`;
+    el.style.opacity = t.opacity != null ? String(t.opacity) : "";
+    el.style.width = t.w != null ? `${t.w}px` : "";
+    el.style.height = t.h != null ? `${t.h}px` : "";
+  } else {
+    el.style.transform = "";
+    el.style.opacity = "";
+    el.style.width = "";
+    el.style.height = "";
+  }
+}
+function normalizeColor(v) {
+  return v && /^#[0-9a-fA-F]{6}$/.test(v) ? v : "#ffffff";
+}
+function cssEscape2(value) {
+  return value.replace(/["\\]/g, "\\$&");
+}
 
 exports.Canvas = Canvas;
+exports.EditablePage = EditablePage;
 exports.Editor = Editor;
 exports.Inspector = Inspector;
 exports.LayersPanel = LayersPanel;
+exports.NodeInspector = NodeInspector;
 exports.editorReduce = editorReduce;
 exports.initEditor = initEditor;
 exports.useEditor = useEditor;