@particle-academy/fancy-cms-ui 0.0.1-dev.8 → 0.1.0

package/dist/editor.js

@@ -1,386 +1,27 @@
-import { keyBetween } from './chunk-7YYLYBLI.js';
-import { CmsPage, defaultRegistry } from './chunk-5O6U4VIU.js';
-import { reduce, childrenOf } from './chunk-HYHNMW47.js';
-import { useReducer, useCallback, useMemo, useRef, useState, useLayoutEffect, Fragment, useEffect } from 'react';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useEditor, keyBetween } from './chunk-N22BQAY3.js';
+export { Canvas, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor } from './chunk-N22BQAY3.js';
+import { isBinding, childrenOf, CmsPage, defaultRegistry } from './chunk-GOXVGEKU.js';
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { ContextMenu } from '@particle-academy/react-fancy';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-function initEditor(doc) {
-  return { doc, past: [], future: [], selection: null };
-}
-function editorReduce(state, action) {
-  switch (action.type) {
-    case "apply": {
-      const next = reduce(state.doc, action.op);
-      if (next === state.doc) return state;
-      return {
-        ...state,
-        doc: next,
-        past: [...state.past, state.doc].slice(-100),
-        future: []
-      };
-    }
-    case "undo": {
-      if (state.past.length === 0) return state;
-      const prev = state.past[state.past.length - 1];
-      return {
-        ...state,
-        doc: prev,
-        past: state.past.slice(0, -1),
-        future: [state.doc, ...state.future]
-      };
-    }
-    case "redo": {
-      if (state.future.length === 0) return state;
-      const next = state.future[0];
-      return {
-        ...state,
-        doc: next,
-        past: [...state.past, state.doc],
-        future: state.future.slice(1)
-      };
-    }
-    case "select":
-      return state.selection === action.id ? state : { ...state, selection: action.id };
-    case "replace":
-      return state.doc === action.doc ? state : { ...state, doc: action.doc, future: [] };
-    default:
-      return state;
-  }
-}
-
-// src/editor/useEditor.ts
-function useEditor(initialDoc) {
-  const [state, dispatch] = useReducer(editorReduce, initialDoc, initEditor);
-  const apply = useCallback((op) => dispatch({ type: "apply", op }), []);
-  const undo = useCallback(() => dispatch({ type: "undo" }), []);
-  const redo = useCallback(() => dispatch({ type: "redo" }), []);
-  const select = useCallback((id) => dispatch({ type: "select", id }), []);
-  const replace = useCallback((doc) => dispatch({ type: "replace", doc }), []);
-  return useMemo(
-    () => ({
-      state,
-      apply,
-      undo,
-      redo,
-      select,
-      replace,
-      canUndo: state.past.length > 0,
-      canRedo: state.future.length > 0
-    }),
-    [state, apply, undo, redo, select, replace]
-  );
-}
-function Canvas({ doc, selection, onSelect, apply }) {
-  const ref = useRef(null);
-  const [box, setBox] = useState(null);
-  const drag = useRef(null);
-  useLayoutEffect(() => {
-    const root = ref.current;
-    if (!root || !selection) {
-      setBox(null);
-      return;
-    }
-    const el = root.querySelector(`[data-cms="${cssEscape(selection)}"]`);
-    if (!el) {
-      setBox(null);
-      return;
-    }
-    const r = el.getBoundingClientRect();
-    const rootRect = root.getBoundingClientRect();
-    setBox({
-      x: r.left - rootRect.left + root.scrollLeft,
-      y: r.top - rootRect.top + root.scrollTop,
-      w: r.width,
-      h: r.height
-    });
-  }, [selection, doc]);
-  const handleClick = (e) => {
-    const target = e.target.closest("[data-cms]");
-    onSelect(target ? target.getAttribute("data-cms") : null);
-  };
-  const handlePointerDown = (e) => {
-    if (!selection) return;
-    const c = doc.nodes[selection]?.constraints?.base;
-    const left = c && c.left && typeof c.left === "object" ? c.left.value : 0;
-    const top = c && c.top && typeof c.top === "object" ? c.top.value : 0;
-    drag.current = { x: e.clientX, y: e.clientY, left, top };
-    e.currentTarget.setPointerCapture(e.pointerId);
-    e.stopPropagation();
-  };
-  const handlePointerMove = (e) => {
-    const d = drag.current;
-    if (!d || !selection) return;
-    apply({
-      t: "set_constraints",
-      id: selection,
-      breakpoint: "base",
-      patch: {
-        left: { value: Math.round(d.left + (e.clientX - d.x)), unit: "px" },
-        top: { value: Math.round(d.top + (e.clientY - d.y)), unit: "px" }
-      }
-    });
-  };
-  const handlePointerUp = () => {
-    drag.current = null;
-  };
-  const surface = {
-    position: "relative",
-    overflow: "auto",
-    height: "100%",
-    background: "#f8fafc"
-  };
-  const overlay = box ? {
-    position: "absolute",
-    left: box.x,
-    top: box.y,
-    width: box.w,
-    height: box.h,
-    outline: "2px solid #8b5cf6",
-    outlineOffset: -1,
-    cursor: "move",
-    touchAction: "none"
-  } : { display: "none" };
-  return /* @__PURE__ */ jsxs("div", { ref, onClick: handleClick, style: surface, children: [
-    /* @__PURE__ */ jsx(CmsPage, { doc }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerUp,
-        style: overlay
-      }
-    )
-  ] });
-}
-function cssEscape(value) {
-  return value.replace(/["\\]/g, "\\$&");
-}
-function LayersPanel({ doc, selection, onSelect }) {
-  return /* @__PURE__ */ jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: doc.sections.map((id) => /* @__PURE__ */ jsx(LayerRow, { doc, id, depth: 0, selection, onSelect }, id)) });
-}
-function LayerRow({ doc, id, depth, selection, onSelect }) {
-  const node = doc.nodes[id];
-  if (!node) return null;
-  const selected = selection === id;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onSelect(id),
-        style: {
-          display: "block",
-          width: "100%",
-          textAlign: "left",
-          border: "none",
-          borderRadius: 6,
-          cursor: "pointer",
-          padding: "4px 8px",
-          paddingLeft: 8 + depth * 14,
-          background: selected ? "#ede9fe" : "transparent",
-          color: selected ? "#5b21b6" : "#334155",
-          font: "inherit"
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { style: { opacity: 0.6 }, children: node.type }),
-          " \xB7 ",
-          id
-        ]
-      }
-    ),
-    childrenOf(doc, id).map((child) => /* @__PURE__ */ jsx(
-      LayerRow,
-      {
-        doc,
-        id: child.id,
-        depth: depth + 1,
-        selection,
-        onSelect
-      },
-      child.id
-    ))
-  ] });
-}
-var label = {
-  display: "block",
-  fontSize: 11,
-  textTransform: "uppercase",
-  letterSpacing: "0.04em",
-  color: "#94a3b8",
-  margin: "10px 0 4px"
-};
-var input = {
-  width: "100%",
-  boxSizing: "border-box",
-  padding: "6px 8px",
-  borderRadius: 6,
-  border: "1px solid #e2e8f0",
-  font: "inherit",
-  fontSize: 13
-};
-function Inspector({ doc, selection, apply }) {
-  const node = selection ? doc.nodes[selection] : null;
-  if (!node) {
-    return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: "#94a3b8", fontFamily: "system-ui, sans-serif", fontSize: 13 }, children: "Select an element to edit." });
-  }
-  const s = node.style.base;
-  const setStyle = (patch) => apply({ t: "set_style", id: node.id, breakpoint: "base", patch });
-  const setProp = (key, value) => apply({ t: "set_props", id: node.id, patch: { [key]: value } });
-  return /* @__PURE__ */ jsxs("div", { style: { overflow: "auto", padding: 16, fontFamily: "system-ui, sans-serif", height: "100%", boxSizing: "border-box" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "#0f172a" }, children: node.type }),
-    /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#94a3b8", marginBottom: 8 }, children: node.id }),
-    node.type === "text" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("label", { style: label, children: "Content" }),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          style: { ...input, minHeight: 64, resize: "vertical" },
-          value: typeof node.props.content === "string" ? node.props.content : "",
-          onChange: (e) => setProp("content", e.target.value)
-        }
-      )
-    ] }) : null,
-    node.type === "image" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("label", { style: label, children: "Source" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          style: input,
-          value: typeof node.props.src === "string" ? node.props.src : "",
-          onChange: (e) => setProp("src", e.target.value)
-        }
-      )
-    ] }) : null,
-    /* @__PURE__ */ jsx("label", { style: label, children: "Background" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        style: input,
-        placeholder: "#ffffff | gradient | url(\u2026)",
-        value: s.background ?? "",
-        onChange: (e) => setStyle({ background: e.target.value })
-      }
-    ),
-    /* @__PURE__ */ jsx("label", { style: label, children: "Text color" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        style: input,
-        placeholder: "#0f172a",
-        value: s.color ?? "",
-        onChange: (e) => setStyle({ color: e.target.value })
-      }
-    ),
-    /* @__PURE__ */ jsx("label", { style: label, children: "Font size (px)" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        style: input,
-        value: s.fontSize?.value ?? "",
-        onChange: (e) => setStyle({ fontSize: { value: Number(e.target.value) || 0, unit: "px" } })
-      }
-    ),
-    /* @__PURE__ */ jsx("label", { style: label, children: "Padding (px)" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        style: input,
-        value: s.padding?.value ?? "",
-        onChange: (e) => setStyle({ padding: { value: Number(e.target.value) || 0, unit: "px" } })
-      }
-    ),
-    /* @__PURE__ */ jsx("label", { style: label, children: "Opacity" }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        step: "0.1",
-        min: "0",
-        max: "1",
-        style: input,
-        value: s.opacity ?? "",
-        onChange: (e) => setStyle({ opacity: Number(e.target.value) })
-      }
-    )
-  ] });
-}
-function Editor({ defaultValue, onChange }) {
-  const ed = useEditor(defaultValue);
-  const first = useRef(true);
-  useEffect(() => {
-    if (first.current) {
-      first.current = false;
-      return;
-    }
-    onChange?.(ed.state.doc);
-  }, [ed.state.doc, onChange]);
-  const shell = {
-    display: "grid",
-    gridTemplateColumns: "220px 1fr 300px",
-    height: "100%",
-    minHeight: 0,
-    background: "#fff",
-    color: "#0f172a",
-    border: "1px solid #e2e8f0",
-    borderRadius: 12,
-    overflow: "hidden"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: shell, children: [
-    /* @__PURE__ */ jsxs("div", { style: { borderRight: "1px solid #e2e8f0", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
-      /* @__PURE__ */ jsx(Toolbar, { ed }),
-      /* @__PURE__ */ jsx(LayersPanel, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select })
-    ] }),
-    /* @__PURE__ */ jsx(Canvas, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select, apply: ed.apply }),
-    /* @__PURE__ */ jsx("div", { style: { borderLeft: "1px solid #e2e8f0", minHeight: 0 }, children: /* @__PURE__ */ jsx(Inspector, { doc: ed.state.doc, selection: ed.state.selection, apply: ed.apply }) })
-  ] });
-}
-function Toolbar({ ed }) {
-  const btn = {
-    font: "inherit",
-    fontSize: 12,
-    padding: "4px 10px",
-    borderRadius: 6,
-    border: "1px solid #e2e8f0",
-    background: "#fff",
-    cursor: "pointer"
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: 6,
-        padding: 8,
-        borderBottom: "1px solid #e2e8f0",
-        fontFamily: "system-ui, sans-serif"
-      },
-      children: [
-        /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, opacity: ed.canUndo ? 1 : 0.4 }, disabled: !ed.canUndo, onClick: ed.undo, children: "Undo" }),
-        /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, opacity: ed.canRedo ? 1 : 0.4 }, disabled: !ed.canRedo, onClick: ed.redo, children: "Redo" })
-      ]
-    }
-  );
-}
-var CONTAINER_TYPES = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape"]);
+var CONTAINER_TYPES = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape", "card", "device"]);
 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 handled = /* @__PURE__ */ new Set(["content", "label", "html"]);
   const extraKeys = Object.keys(node.props).filter(
-    (k) => !handled.has(k) && ["string", "number", "boolean"].includes(typeof node.props[k])
+    (k) => !handled.has(k) && (["string", "number", "boolean"].includes(typeof node.props[k]) || isBinding(node.props[k]))
   );
   return /* @__PURE__ */ jsxs("div", { style: panel, onPointerDown: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs("div", { style: headRow, children: [
@@ -393,15 +34,12 @@ function NodeInspector({
       /* @__PURE__ */ jsx("button", { type: "button", style: iconBtn, title: "Close", onClick: onClose, children: "\u2715" })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: body, children: [
-      "content" in node.props ? /* @__PURE__ */ jsx(Group, { label: "Content", children: /* @__PURE__ */ 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__ */ jsx(Group, { label: "Label", children: /* @__PURE__ */ jsx("input", { style: input2, value: String(node.props.label ?? ""), onChange: (e) => onProps({ label: e.target.value }) }) }) : null,
+      "content" in node.props || node.type === "richtext" ? /* @__PURE__ */ jsxs("p", { style: { fontSize: 11, color: "var(--fg-3, #94a3b8)", margin: "0 0 12px", lineHeight: 1.45, paddingBottom: 12, borderBottom: "1px solid #1e293b" }, children: [
+        "\u270E Edit the text ",
+        /* @__PURE__ */ jsx("strong", { children: "directly on the page" }),
+        " \u2014 click in and type. This panel is for layout, style, and bindings."
+      ] }) : null,
+      "label" in node.props ? /* @__PURE__ */ jsx(Group, { label: "Label", children: /* @__PURE__ */ jsx("input", { style: input, value: String(node.props.label ?? ""), onChange: (e) => onProps({ label: e.target.value }) }) }) : null,
       extraKeys.length ? /* @__PURE__ */ jsx(Group, { label: "Properties", children: extraKeys.map((k) => /* @__PURE__ */ jsx(PropField, { name: k, value: node.props[k], onChange: (v) => onProps({ [k]: v }) }, k)) }) : null,
       /* @__PURE__ */ jsxs(Group, { label: "Position & size", children: [
         /* @__PURE__ */ jsxs(Row, { children: [
@@ -454,15 +92,50 @@ function NodeInspector({
         ] }),
         /* @__PURE__ */ jsxs(Row, { children: [
           /* @__PURE__ */ jsx(Num, { label: "Padding", value: base.padding?.value, placeholder: "0", onChange: (v) => onStyle({ padding: v == null ? void 0 : len(v) }) }),
+          /* @__PURE__ */ jsx(Num, { label: "Margin", value: base.margin?.value, placeholder: "0", onChange: (v) => onStyle({ margin: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Txt, { label: "Border", value: base.border ?? "", placeholder: "1px solid #e2e8f0", onChange: (v) => onStyle({ border: v || void 0 }) }) })
+      ] }),
+      CONTAINER_TYPES.has(node.type) ? /* @__PURE__ */ jsxs(Group, { label: "Layout", children: [
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(
+            Sel,
+            {
+              label: "Mode",
+              value: node.layout ?? "free",
+              options: [["free", "Free"], ["stack", "Stack"], ["grid", "Grid"]],
+              onChange: (v) => onLayout?.(v)
+            }
+          ),
           /* @__PURE__ */ jsx(Num, { label: "Gap", value: base.gap?.value, placeholder: "0", onChange: (v) => onStyle({ gap: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ 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__ */ 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 }) {
+function Group({ label, children }) {
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingBottom: 12, marginBottom: 12, borderBottom: "1px solid #1e293b" }, children: [
-    /* @__PURE__ */ jsx("span", { style: { fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", opacity: 0.5 }, children: label2 }),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", opacity: 0.5 }, children: label }),
     children
   ] });
 }
@@ -470,36 +143,62 @@ function Row({ children }) {
   return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8 }, children });
 }
 function PropField({ name, value, onChange }) {
+  const bound = isBinding(value);
+  const link = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: bound ? "Unbind (use a literal value)" : "Bind to data (e.g. item.name)",
+      onClick: () => onChange(bound ? "" : { $bind: "" }),
+      style: { background: "none", border: "none", cursor: "pointer", padding: 0, fontSize: 11, color: bound ? "#a78bfa" : "#64748b" },
+      children: "\u{1F517}"
+    }
+  );
+  if (bound) {
+    return /* @__PURE__ */ jsxs("label", { style: field, children: [
+      /* @__PURE__ */ jsxs("span", { style: { ...fieldLabel, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        name,
+        " ",
+        link
+      ] }),
+      /* @__PURE__ */ jsx("input", { style: { ...input, borderColor: "#7c3aed" }, placeholder: "data path \xB7 e.g. item.name", value: value.$bind, onChange: (e) => onChange({ $bind: e.target.value }) })
+    ] });
+  }
   if (typeof value === "boolean") {
     return /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 12 }, children: [
       /* @__PURE__ */ jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked) }),
-      /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize" }, children: name })
+      /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize", flex: 1 }, children: name }),
+      link
     ] });
   }
   if (name === "variant") {
-    return /* @__PURE__ */ jsx(Sel, { label: name, value: String(value), options: [["primary", "Primary"], ["ghost", "Ghost"], ["outline", "Outline"]], onChange });
+    return /* @__PURE__ */ jsx(Sel, { label: name, value: String(value ?? ""), options: [["primary", "Primary"], ["ghost", "Ghost"], ["outline", "Outline"]], onChange });
   }
   const isNum = typeof value === "number";
   return /* @__PURE__ */ jsxs("label", { style: field, children: [
-    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: name }),
+    /* @__PURE__ */ jsxs("span", { style: { ...fieldLabel, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      name,
+      " ",
+      link
+    ] }),
     /* @__PURE__ */ jsx(
       "input",
       {
-        style: input2,
+        style: input,
         type: isNum ? "number" : "text",
-        value: String(value),
+        value: String(value ?? ""),
         onChange: (e) => onChange(isNum ? Number(e.target.value) : e.target.value)
       }
     )
   ] });
 }
-function Num({ label: label2, value, placeholder, onChange, step, min, max }) {
+function Num({ label, value, placeholder, onChange, step, min, max }) {
   return /* @__PURE__ */ jsxs("label", { style: field, children: [
-    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label2 }),
+    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label }),
     /* @__PURE__ */ jsx(
       "input",
       {
-        style: input2,
+        style: input,
         type: "number",
         step,
         min,
@@ -511,16 +210,22 @@ function Num({ label: label2, value, placeholder, onChange, step, min, max }) {
     )
   ] });
 }
-function Color({ label: label2, value, onChange }) {
+function Txt({ label, value, placeholder, onChange }) {
   return /* @__PURE__ */ jsxs("label", { style: field, children: [
-    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label2 }),
-    /* @__PURE__ */ jsx("input", { style: { ...input2, padding: 2, height: 30 }, type: "color", value, onChange: (e) => onChange(e.target.value) })
+    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label }),
+    /* @__PURE__ */ jsx("input", { style: input, type: "text", value, placeholder, onChange: (e) => onChange(e.target.value) })
   ] });
 }
-function Sel({ label: label2, value, options, onChange }) {
+function Color({ label, value, onChange }) {
   return /* @__PURE__ */ jsxs("label", { style: field, children: [
-    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label2 }),
-    /* @__PURE__ */ jsx("select", { style: input2, value, onChange: (e) => onChange(e.target.value), children: options.map(([v, l]) => /* @__PURE__ */ jsx("option", { value: v, children: l }, v)) })
+    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label }),
+    /* @__PURE__ */ jsx("input", { style: { ...input, padding: 2, height: 30 }, type: "color", value, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
+function Sel({ label, value, options, onChange }) {
+  return /* @__PURE__ */ jsxs("label", { style: field, children: [
+    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label }),
+    /* @__PURE__ */ jsx("select", { style: input, value, onChange: (e) => onChange(e.target.value), children: options.map(([v, l]) => /* @__PURE__ */ jsx("option", { value: v, children: l }, v)) })
   ] });
 }
 var len = (value) => ({ value, unit: "px" });
@@ -547,7 +252,7 @@ var headRow = { display: "flex", alignItems: "center", gap: 8, padding: "10px 12
 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 = {
+var input = {
   width: "100%",
   boxSizing: "border-box",
   background: "#0f172a",
@@ -665,9 +370,11 @@ function snapshotSubtree(doc, id) {
   return { rootId: id, nodes };
 }
 var Z2 = 2147483e3;
+var SNAP = 6;
 function EditablePage({
   doc,
   registry = defaultRegistry,
+  data,
   timelineDock,
   transforms,
   onNodeTransform,
@@ -724,7 +431,7 @@ function EditablePage({
   }, [onProgress, frames]);
   const measureBox = useCallback(() => {
     if (!editing || !selection || !pageRef.current) return setBox(null);
-    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
+    const el = pageRef.current.querySelector(`[data-cms="${cssEscape(selection)}"]`);
     if (!el) return setBox(null);
     const r = el.getBoundingClientRect();
     setBox({ x: r.left, y: r.top, w: r.width, h: r.height });
@@ -739,13 +446,17 @@ function EditablePage({
     };
   }, [measureBox, ed.state.doc]);
   useEffect(() => {
-    if (!editing || !selection || !pageRef.current || selNode?.type !== "text") return;
-    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
-    if (!el) return;
+    const t = selNode?.type;
+    const editable = t === "text" || t === "heading" || t === "richtext";
+    if (!editing || !selection || !pageRef.current || !editable) return;
+    const wrapper = pageRef.current.querySelector(`[data-cms="${cssEscape(selection)}"]`);
+    if (!wrapper) return;
+    const isRich = t === "richtext";
+    const el = (isRich ? wrapper.firstElementChild : wrapper) ?? wrapper;
     el.setAttribute("contenteditable", "true");
     el.style.outline = "none";
     el.focus();
-    const commit = () => ed.apply({ t: "set_props", id: selection, patch: { content: el.innerText } });
+    const commit = () => ed.apply({ t: "set_props", id: selection, patch: isRich ? { html: el.innerHTML } : { content: el.innerText } });
     el.addEventListener("blur", commit);
     return () => {
       el.removeEventListener("blur", commit);
@@ -770,13 +481,87 @@ function EditablePage({
       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.apply({ t: "insert_node", node: { id, type: def.type, parent, order, layout: def.layout, props: { ...def.props }, style: { base: { ...def.style } } } });
       ed.select(id);
     },
     [ed, selNode]
   );
+  useCallback(
+    (kind, targetId) => {
+      const doc2 = ed.state.doc;
+      const target = targetId ? doc2.nodes[targetId] : null;
+      const parent = target ? CONTAINER_TYPES2.has(target.type) ? target.id : target.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, layout: def.layout, props: { ...def.props }, style: { base: { ...def.style } } } });
+      ed.select(id);
+    },
+    [ed]
+  );
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [draggingEl, setDraggingEl] = useState(false);
+  useEffect(() => {
+    if (!editing) {
+      setPaletteOpen(false);
+      return;
+    }
+    const onMove = (e) => {
+      if (draggingEl) return;
+      if (e.clientX >= window.innerWidth - 26) setPaletteOpen(true);
+      else if (e.clientX < window.innerWidth - 236) setPaletteOpen(false);
+    };
+    window.addEventListener("mousemove", onMove);
+    return () => window.removeEventListener("mousemove", onMove);
+  }, [editing, draggingEl]);
+  const [dropHint, setDropHint] = useState(null);
+  const computeDropTarget = (clientX, clientY) => {
+    const el = document.elementFromPoint(clientX, clientY)?.closest("[data-cms]");
+    if (!el) return { id: null, edge: "inside", rect: null };
+    const id = el.getAttribute("data-cms");
+    const node = ed.state.doc.nodes[id];
+    const r = el.getBoundingClientRect();
+    const rect = { x: r.left, y: r.top, w: r.width, h: r.height };
+    if (node && CONTAINER_TYPES2.has(node.type)) return { id, edge: "inside", rect };
+    return { id, edge: clientY < r.top + r.height / 2 ? "before" : "after", rect };
+  };
+  const onPageDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setDropHint(computeDropTarget(e.clientX, e.clientY));
+  };
+  const insertRelative = (kind, hint) => {
+    const doc2 = ed.state.doc;
+    let parent;
+    let order;
+    if (!hint.id || hint.edge === "inside") {
+      parent = hint.id ?? (doc2.sections[doc2.sections.length - 1] ?? null);
+      const sib = childrenOf(doc2, parent);
+      order = keyBetween(sib.length ? sib[sib.length - 1].order : null, null);
+    } else {
+      const target = doc2.nodes[hint.id];
+      parent = target.parent;
+      const sib = childrenOf(doc2, parent);
+      const idx = sib.findIndex((n) => n.id === hint.id);
+      order = hint.edge === "before" ? keyBetween(idx > 0 ? sib[idx - 1].order : null, target.order) : keyBetween(target.order, idx < sib.length - 1 ? sib[idx + 1].order : 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, layout: def.layout, props: { ...def.props }, style: { base: { ...def.style } } } });
+    ed.select(id);
+  };
+  const onPageDrop = (e) => {
+    const kind = e.dataTransfer.getData("application/x-cms-element");
+    if (!kind) return;
+    e.preventDefault();
+    insertRelative(kind, computeDropTarget(e.clientX, e.clientY));
+    setDropHint(null);
+    setDraggingEl(false);
+  };
   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 });
@@ -799,8 +584,10 @@ function EditablePage({
   const startEditText = (id) => {
     if (!id) return;
     ed.select(id);
-    requestAnimationFrame(() => pageRef.current?.querySelector(`[data-cms="${cssEscape2(id)}"]`)?.focus());
+    requestAnimationFrame(() => pageRef.current?.querySelector(`[data-cms="${cssEscape(id)}"]`)?.focus());
   };
+  const nudgeRef = useRef({ transforms, onNodeTransform });
+  nudgeRef.current = { transforms, onNodeTransform };
   useEffect(() => {
     if (!editing) return;
     const onKey = (e) => {
@@ -819,6 +606,15 @@ function EditablePage({
       } 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);
@@ -830,8 +626,23 @@ function EditablePage({
     if (el) ed.select(el.getAttribute("data-cms"));
     else ed.select(null);
   };
-  const page = /* @__PURE__ */ jsx("div", { ref: pageRef, onClickCapture, onContextMenu: onContextMenuSelect, children: /* @__PURE__ */ jsx(CmsPage, { doc: ed.state.doc, registry }) });
-  const pageShell = pinned ? /* @__PURE__ */ jsx("div", { ref: spacerRef, style: { height: `${Math.max(1, frames) * 100}vh` }, children: /* @__PURE__ */ jsx("div", { style: { position: "sticky", top: 0, height: "100vh", overflow: "hidden" }, children: page }) }) : page;
+  const page = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: pageRef,
+      onClickCapture,
+      onContextMenu: onContextMenuSelect,
+      onDragOver: editing ? onPageDragOver : void 0,
+      onDragLeave: editing ? () => setDropHint(null) : void 0,
+      onDrop: editing ? onPageDrop : void 0,
+      children: /* @__PURE__ */ jsx(CmsPage, { doc: ed.state.doc, registry, data })
+    }
+  );
+  const pageShell = pinned ? /* @__PURE__ */ jsx("div", { ref: spacerRef, style: { height: `${Math.max(1, frames) * 100}vh` }, children: /* @__PURE__ */ 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__ */ jsx("div", { style: { minHeight: `${frames * 100}vh` }, children: page })
+  ) : page;
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
     editing ? /* @__PURE__ */ jsxs(ContextMenu, { children: [
       /* @__PURE__ */ jsx(ContextMenu.Trigger, { children: pageShell }),
@@ -858,7 +669,7 @@ function EditablePage({
         box,
         base: transforms?.[selection] ?? {},
         movable: Boolean(onNodeTransform),
-        getEl: () => pageRef.current?.querySelector(`[data-cms="${cssEscape2(selection)}"]`) ?? null,
+        getEl: () => pageRef.current?.querySelector(`[data-cms="${cssEscape(selection)}"]`) ?? null,
         onTransform: (t) => onNodeTransform?.(selection, t),
         onLive: measureBox
       }
@@ -872,6 +683,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)
@@ -892,16 +704,101 @@ function EditablePage({
         onAdd: addNode
       }
     ) : null,
+    editing && dropHint?.rect ? /* @__PURE__ */ jsx(DropIndicator, { hint: dropHint }) : null,
+    editing ? /* @__PURE__ */ jsx(ElementPalette, { open: paletteOpen, onDragChange: setDraggingEl }) : null,
     editing && timelineDock ? /* @__PURE__ */ 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"]);
+function DropIndicator({
+  hint
+}) {
+  const r = hint.rect;
+  if (!r) return null;
+  const color = "#ec4899";
+  if (hint.edge === "inside") {
+    return /* @__PURE__ */ jsx("div", { style: { position: "fixed", left: r.x, top: r.y, width: r.w, height: r.h, outline: `2px dashed ${color}`, outlineOffset: -2, borderRadius: 6, pointerEvents: "none", zIndex: Z2 + 4 } });
+  }
+  const y = hint.edge === "before" ? r.y : r.y + r.h;
+  return /* @__PURE__ */ jsx("div", { style: { position: "fixed", left: r.x, top: y - 1.5, width: r.w, height: 3, background: color, borderRadius: 2, boxShadow: "0 0 0 1px #fff", pointerEvents: "none", zIndex: Z2 + 4 } });
+}
+function ElementPalette({ open, onDragChange }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 64,
+        bottom: 96,
+        right: 0,
+        width: 216,
+        transform: open ? "translateX(0)" : "translateX(100%)",
+        transition: "transform 0.18s ease",
+        background: "#0b1220",
+        color: "#e2e8f0",
+        borderLeft: "1px solid #1e293b",
+        borderTopLeftRadius: 12,
+        borderBottomLeftRadius: 12,
+        boxShadow: "-18px 0 48px -20px rgba(0,0,0,0.6)",
+        zIndex: Z2 + 2,
+        fontFamily: "system-ui, sans-serif",
+        padding: 12,
+        overflowY: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", opacity: 0.5, marginBottom: 10 }, children: "Elements" }),
+        /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: ADD_MENU.map((m) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            draggable: true,
+            onDragStart: (e) => {
+              e.dataTransfer.setData("application/x-cms-element", m.kind);
+              e.dataTransfer.effectAllowed = "copy";
+              onDragChange(true);
+            },
+            onDragEnd: () => onDragChange(false),
+            title: `Drag "${m.label}" onto the page`,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 4,
+              height: 56,
+              borderRadius: 8,
+              background: "#0f172a",
+              border: "1px solid #1e293b",
+              cursor: "grab",
+              fontSize: 12,
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 16, opacity: 0.7 }, children: "\uFF0B" }),
+              m.label
+            ]
+          },
+          m.kind
+        )) }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: 10.5, opacity: 0.45, marginTop: 12, lineHeight: 1.4 }, children: "Drag an Element onto the page. It drops into the container you release over." })
+      ]
+    }
+  );
+}
+var CONTAINER_TYPES2 = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape", "card", "device", "repeater"]);
 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: {} },
+  link: { type: "link", props: { content: "link text", href: "#" }, style: { color: "#7c3aed" } },
   image: { type: "image", props: { src: "", alt: "" }, style: {} },
-  box: { type: "frame", props: {}, style: { padding: { value: 16, unit: "px" } } }
+  box: { type: "frame", props: {}, style: { padding: { value: 16, unit: "px" } } },
+  stack: { type: "stack", props: {}, style: { gap: { value: 12, unit: "px" } }, layout: "stack" },
+  grid: { type: "grid", props: {}, style: { gap: { value: 12, unit: "px" } }, layout: "grid" },
+  card: { type: "card", props: {}, style: { padding: { value: 16, unit: "px" }, radius: { value: 12, unit: "px" }, border: "1px solid #e2e8f0" } },
+  callout: { type: "callout", props: { content: "Heads up \u2014 this is a callout.", variant: "info" }, style: {} },
+  divider: { type: "divider", props: {}, style: {} },
+  code: { type: "code", props: { content: "npm install @particle-academy/react-fancy", lang: "bash" }, style: {} },
+  richtext: { type: "richtext", props: { html: "<p>Rich <strong>text</strong> with <em>inline</em> formatting.</p>" }, style: {} },
+  repeater: { type: "repeater", props: { items: "" }, style: { gap: { value: 12, unit: "px" } }, layout: "stack" }
 };
 var GRIPS = [
   { key: "nw", north: true, west: true, cursor: "nwse-resize" },
@@ -922,20 +819,55 @@ function SelectionOverlay({
   onLive
 }) {
   const drag = useRef(null);
+  const targets = useRef({ vx: [], hy: [] });
+  const [guides, setGuides] = 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;
-    d.live = { ...base, x: (base.x ?? 0) + (e.clientX - d.x), y: (base.y ?? 0) + (e.clientY - d.y) };
+    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();
   };
@@ -970,6 +902,7 @@ function SelectionOverlay({
     const d = drag.current;
     if (d) onTransform(d.live);
     drag.current = null;
+    setGuides({ x: null, y: null });
   };
   const outline = {
     position: "fixed",
@@ -998,9 +931,11 @@ function SelectionOverlay({
     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__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    guides.x !== null ? /* @__PURE__ */ 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__ */ jsx("div", { style: { position: "fixed", top: guides.y, left: 0, right: 0, height: 1, background: "#ec4899", zIndex: Z2 + 3, pointerEvents: "none" } }) : null,
     /* @__PURE__ */ jsx("div", { style: outline }),
-    movable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    movable ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -1063,11 +998,20 @@ function FloatingToolbar({
   ] });
 }
 var ADD_MENU = [
-  { kind: "text", label: "Text" },
   { kind: "heading", label: "Heading" },
+  { kind: "text", label: "Text" },
   { kind: "button", label: "Button" },
+  { kind: "link", label: "Link" },
   { kind: "image", label: "Image" },
-  { kind: "box", label: "Box" }
+  { kind: "card", label: "Card" },
+  { kind: "callout", label: "Callout" },
+  { kind: "stack", label: "Stack" },
+  { kind: "grid", label: "Grid" },
+  { kind: "box", label: "Box" },
+  { kind: "divider", label: "Divider" },
+  { kind: "code", label: "Code" },
+  { kind: "richtext", label: "Rich text" },
+  { kind: "repeater", label: "Repeater" }
 ];
 function EditBar({
   editing,
@@ -1083,9 +1027,9 @@ function EditBar({
   const btn = { font: "inherit", border: "none", background: "transparent", color: "inherit", cursor: "pointer", padding: "4px 8px", borderRadius: 999 };
   return /* @__PURE__ */ jsxs("div", { style: bar, children: [
     /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, background: editing ? "#8b5cf6" : "transparent" }, onClick: onToggle, children: editing ? "\u25CF Editing" : "Edit" }),
-    editing ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, background: open ? "#1e293b" : "transparent" }, onClick: () => setOpen((v) => !v), title: "Add an element", children: "\uFF0B Add \u25BE" }),
+        /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, background: open ? "#1e293b" : "transparent" }, onClick: () => setOpen((v) => !v), title: "Add an Element (or drag from the right-edge palette)", children: "\uFF0B Element \u25BE" }),
         open ? /* @__PURE__ */ 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__ */ jsx(
           "button",
           {
@@ -1120,13 +1064,13 @@ function EditMenuItems({
 }) {
   const editable = node && (node.type === "text" || node.type === "heading");
   const nested = Boolean(node && node.parent !== null);
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     editable ? /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: onEditText, children: "Edit text" }) : null,
     /* @__PURE__ */ jsxs(ContextMenu.Sub, { children: [
-      /* @__PURE__ */ jsx(ContextMenu.SubTrigger, { children: isContainer ? "Add inside" : "Add" }),
+      /* @__PURE__ */ jsx(ContextMenu.SubTrigger, { children: isContainer ? "Add Element inside" : "Add Element" }),
       /* @__PURE__ */ jsx(ContextMenu.SubContent, { className: "!z-[2147483647]", children: ADD_MENU.map((m) => /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onAdd(m.kind), children: m.label }, m.kind)) })
     ] }),
-    node ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    node ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ContextMenu.Separator, {}),
       /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: onDuplicate, children: "Duplicate" }),
       /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: onCopy, children: "Copy" }),
@@ -1135,7 +1079,7 @@ function EditMenuItems({
       /* @__PURE__ */ jsx(ContextMenu.Separator, {}),
       /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onReorder("up"), children: "Move up" }),
       /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onReorder("down"), children: "Move down" }),
-      nested ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      nested ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onReorder("front"), children: "Bring to front" }),
         /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onReorder("back"), children: "Send to back" })
       ] }) : null,
@@ -1160,10 +1104,10 @@ function applyTransform(el, t) {
 function normalizeColor(v) {
   return v && /^#[0-9a-fA-F]{6}$/.test(v) ? v : "#ffffff";
 }
-function cssEscape2(value) {
+function cssEscape(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
 
-export { Canvas, EditablePage, Editor, Inspector, LayersPanel, NodeInspector, editorReduce, initEditor, useEditor };
+export { EditablePage, NodeInspector };
 //# sourceMappingURL=editor.js.map
 //# sourceMappingURL=editor.js.map