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

package/dist/editor.js

@@ -1,5 +1,5 @@
 import { keyBetween } from './chunk-7YYLYBLI.js';
-import { CmsPage, defaultRegistry } from './chunk-5PWZGIYZ.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';
@@ -364,7 +364,202 @@ function Toolbar({ ed }) {
     }
   );
 }
+var CONTAINER_TYPES = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape"]);
+function NodeInspector({
+  node,
+  transform,
+  measured,
+  onProps,
+  onStyle,
+  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__ */ jsxs("div", { style: panel, onPointerDown: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { style: headRow, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx("strong", { style: { fontSize: 12, textTransform: "capitalize" }, children: node.type }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 10, opacity: 0.5, fontFamily: "ui-monospace, monospace", overflow: "hidden", textOverflow: "ellipsis" }, children: node.id })
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: { ...iconBtn, color: "#fca5a5" }, title: "Delete element", onClick: onRemove, children: "\u{1F5D1}" }),
+      /* @__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,
+      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: [
+          /* @__PURE__ */ jsx(Num, { label: "X", value: transform.x, placeholder: "0", onChange: (v) => setT({ x: v }) }),
+          /* @__PURE__ */ jsx(Num, { label: "Y", value: transform.y, placeholder: "0", onChange: (v) => setT({ y: v }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(Num, { label: "W", value: transform.w, placeholder: `${Math.round(measured.w)}`, onChange: (v) => setT({ w: v }) }),
+          /* @__PURE__ */ jsx(Num, { label: "H", value: transform.h, placeholder: `${Math.round(measured.h)}`, onChange: (v) => setT({ h: v }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(Num, { label: "Scale", value: transform.scale, placeholder: "1", step: 0.05, onChange: (v) => setT({ scale: v }) }),
+          /* @__PURE__ */ jsx(Num, { label: "Rotate", value: transform.rotate, placeholder: "0", onChange: (v) => setT({ rotate: v }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(Num, { label: "Opacity", value: transform.opacity, placeholder: "1", min: 0, max: 1, step: 0.05, onChange: (v) => setT({ opacity: v }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: { ...miniBtn, alignSelf: "end" }, onClick: () => onTransform({}), title: "Clear transform", children: "Reset" })
+        ] })
+      ] }),
+      !CONTAINER_TYPES.has(node.type) ? /* @__PURE__ */ jsxs(Group, { label: "Text", children: [
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(Color, { label: "Color", value: base.color ?? "#0f172a", onChange: (v) => onStyle({ color: v }) }),
+          /* @__PURE__ */ jsx(Num, { label: "Size", value: base.fontSize?.value, placeholder: "16", onChange: (v) => onStyle({ fontSize: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs(Group, { label: "Box", children: [
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(Color, { label: "Background", value: hex(base.background), onChange: (v) => onStyle({ background: v }) }),
+          /* @__PURE__ */ jsx(Num, { label: "Radius", value: base.radius?.value, placeholder: "0", onChange: (v) => onStyle({ radius: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__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: "Gap", value: base.gap?.value, placeholder: "0", onChange: (v) => onStyle({ gap: v == null ? void 0 : len(v) }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Group({ label: label2, 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 }),
+    children
+  ] });
+}
+function Row({ children }) {
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8 }, children });
+}
+function PropField({ name, value, onChange }) {
+  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 })
+    ] });
+  }
+  if (name === "variant") {
+    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__ */ 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__ */ jsxs("label", { style: field, children: [
+    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label2 }),
+    /* @__PURE__ */ 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 Color({ label: label2, value, 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) })
+  ] });
+}
+function Sel({ label: label2, value, options, 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)) })
+  ] });
+}
+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" };
+var Z2 = 2147483e3;
 function EditablePage({
   doc,
   registry = defaultRegistry,
@@ -373,7 +568,8 @@ function EditablePage({
   onNodeTransform,
   onSelect,
   frames = 1,
-  onProgress
+  onProgress,
+  pinned = true
 }) {
   const ed = useEditor(doc);
   const [editing, setEditing] = useState(false);
@@ -402,22 +598,16 @@ function EditablePage({
     root.querySelectorAll("[data-cms]").forEach((el) => {
       const id = el.dataset.cms;
       const t = id ? transforms?.[id] : void 0;
-      if (t) {
-        el.style.transform = `translate3d(${t.x ?? 0}px, ${t.y ?? 0}px, 0) scale(${t.scale ?? 1})`;
-        el.style.opacity = t.opacity != null ? String(t.opacity) : "";
-      } else {
-        el.style.transform = "";
-        el.style.opacity = "";
-      }
+      applyTransform(el, t);
     });
   }, [transforms, ed.state.doc]);
   useEffect(() => {
     const spacer = spacerRef.current;
     if (!spacer || !onProgress) return;
     const compute = () => {
-      const len = spacer.offsetHeight - window.innerHeight;
+      const len2 = spacer.offsetHeight - window.innerHeight;
       const top = spacer.getBoundingClientRect().top;
-      onProgress(len > 0 ? Math.min(1, Math.max(0, -top / len)) : 0);
+      onProgress(len2 > 0 ? Math.min(1, Math.max(0, -top / len2)) : 0);
     };
     compute();
     window.addEventListener("scroll", compute, { passive: true });
@@ -442,7 +632,7 @@ function EditablePage({
       window.removeEventListener("scroll", measureBox);
       window.removeEventListener("resize", measureBox);
     };
-  }, [measureBox, ed.state.doc, transforms]);
+  }, [measureBox, ed.state.doc]);
   useEffect(() => {
     if (!editing || !selection || !pageRef.current || selNode?.type !== "text") return;
     const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
@@ -467,17 +657,29 @@ function EditablePage({
       ed.select(el.getAttribute("data-cms"));
     }
   };
-  const addText = useCallback(() => {
-    const parent = selNode && selNode.type !== "text" ? selNode.id : ed.state.doc.sections[0] ?? null;
-    const siblings = childrenOf(ed.state.doc, parent);
-    const order = keyBetween(siblings.length ? siblings[siblings.length - 1].order : null, null);
-    const id = `n${ed.state.doc.seq + 1}-${Math.floor(performance.now())}`;
-    ed.apply({ t: "insert_node", node: { id, type: "text", parent, order, props: { content: "New text" }, style: { base: { color: "inherit" } } } });
-    ed.select(id);
-  }, [ed, selNode]);
+  const addNode = 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 removeSelected = () => {
+    if (!selection) return;
+    ed.apply({ t: "remove_node", id: selection });
+    ed.select(null);
+  };
+  const page = /* @__PURE__ */ jsx("div", { ref: pageRef, onClickCapture, children: /* @__PURE__ */ jsx(CmsPage, { doc: ed.state.doc, registry }) });
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__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: /* @__PURE__ */ jsx("div", { ref: pageRef, onClickCapture, children: /* @__PURE__ */ jsx(CmsPage, { doc: ed.state.doc, registry }) }) }) }),
+    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,
     editing && box && selection ? /* @__PURE__ */ jsx(
       SelectionOverlay,
       {
@@ -489,7 +691,20 @@ function EditablePage({
         onLive: measureBox
       }
     ) : null,
-    editing && box && selNode ? /* @__PURE__ */ jsx(FloatingToolbar, { box, isText: selNode.type === "text", base: selNode.style.base, setStyle }) : null,
+    editing && box && selNode ? /* @__PURE__ */ jsx(FloatingToolbar, { box, isText: selNode.type === "text" || selNode.type === "heading", base: selNode.style.base, setStyle }) : null,
+    editing && selNode && box ? /* @__PURE__ */ jsx(
+      NodeInspector,
+      {
+        node: selNode,
+        transform: (selection ? transforms?.[selection] : void 0) ?? {},
+        measured: { w: box.w, h: box.h },
+        onProps: setProps,
+        onStyle: setStyle,
+        onTransform: (t) => selection && onNodeTransform?.(selection, t),
+        onRemove: removeSelected,
+        onClose: () => ed.select(null)
+      }
+    ) : null,
     revealed || editing ? /* @__PURE__ */ jsx(
       EditBar,
       {
@@ -502,12 +717,30 @@ function EditablePage({
         canRedo: ed.canRedo,
         onUndo: ed.undo,
         onRedo: ed.redo,
-        onAddText: addText
+        onAdd: addNode
       }
     ) : null,
-    editing && timelineDock ? /* @__PURE__ */ jsx("div", { style: { position: "fixed", left: 0, right: 0, bottom: 0, zIndex: Z }, children: timelineDock }) : 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"]);
+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,
@@ -519,29 +752,48 @@ function SelectionOverlay({
   const drag = useRef(null);
   const apply = (t) => {
     const el = getEl();
-    if (el) {
-      el.style.transform = `translate3d(${t.x ?? 0}px, ${t.y ?? 0}px, 0) scale(${t.scale ?? 1})`;
-      el.style.opacity = t.opacity != null ? String(t.opacity) : "";
-    }
+    if (el) applyTransform(el, t);
   };
-  const start = (kind) => (e) => {
+  const startMove = (e) => {
     e.stopPropagation();
     e.preventDefault();
     e.currentTarget.setPointerCapture(e.pointerId);
-    drag.current = { kind, x: e.clientX, y: e.clientY, w: box.w, live: { ...base } };
+    drag.current = { x: e.clientX, y: e.clientY, w: box.w, h: box.h, live: { ...base } };
   };
-  const move = (e) => {
+  const moveMove = (e) => {
     const d = drag.current;
     if (!d) return;
-    if (d.kind === "move") {
-      d.live = { ...base, x: (base.x ?? 0) + (e.clientX - d.x), y: (base.y ?? 0) + (e.clientY - d.y) };
-    } else {
-      const factor = Math.max(0.1, (d.w + (e.clientX - d.x)) / d.w);
-      d.live = { ...base, scale: Number(((base.scale ?? 1) * factor).toFixed(3)) };
-    }
+    d.live = { ...base, x: (base.x ?? 0) + (e.clientX - d.x), y: (base.y ?? 0) + (e.clientY - d.y) };
     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);
@@ -556,17 +808,23 @@ function SelectionOverlay({
     outline: "2px solid #8b5cf6",
     borderRadius: 4,
     pointerEvents: "none",
-    zIndex: Z
+    zIndex: Z2
   };
   const handle = {
     position: "fixed",
-    width: 16,
-    height: 16,
-    background: "#8b5cf6",
-    border: "2px solid #fff",
-    borderRadius: 5,
-    zIndex: Z + 1,
-    touchAction: "none"
+    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__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx("div", { style: outline }),
@@ -575,22 +833,23 @@ function SelectionOverlay({
         "div",
         {
           title: "Drag to move",
-          onPointerDown: start("move"),
-          onPointerMove: move,
+          onPointerDown: startMove,
+          onPointerMove: moveMove,
           onPointerUp: end,
-          style: { ...handle, left: box.x - 9, top: box.y - 9, cursor: "move", borderRadius: 9 }
+          style: { ...handle, width: 18, height: 18, borderRadius: 9, background: "#8b5cf6", border: "2px solid #fff", left: box.x - 22, top: box.y - 22, cursor: "move" }
         }
       ),
-      /* @__PURE__ */ jsx(
+      GRIPS.map((g) => /* @__PURE__ */ jsx(
         "div",
         {
           title: "Drag to resize",
-          onPointerDown: start("resize"),
-          onPointerMove: move,
+          onPointerDown: startResize(g),
+          onPointerMove: resizeMove(g),
           onPointerUp: end,
-          style: { ...handle, left: box.x + box.w - 7, top: box.y + box.h - 7, cursor: "nwse-resize" }
-        }
-      )
+          style: { ...handle, ...gripPos(g) }
+        },
+        g.key
+      ))
     ] }) : null
   ] });
 }
@@ -613,7 +872,7 @@ function FloatingToolbar({
     border: "1px solid rgba(255,255,255,0.12)",
     borderRadius: 999,
     boxShadow: "0 8px 24px -8px rgba(0,0,0,0.5)",
-    zIndex: Z + 2,
+    zIndex: Z2 + 2,
     fontFamily: "system-ui, sans-serif",
     fontSize: 12
   };
@@ -631,6 +890,13 @@ function FloatingToolbar({
     ] })
   ] });
 }
+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,
@@ -638,19 +904,48 @@ function EditBar({
   canRedo,
   onUndo,
   onRedo,
-  onAddText
+  onAdd
 }) {
-  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: Z + 3, fontFamily: "system-ui, sans-serif", fontSize: 12 };
+  const [open, setOpen] = 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__ */ 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: [
-      /* @__PURE__ */ jsx("button", { type: "button", style: btn, onClick: onAddText, title: "Add a text element", children: "\uFF0B Text" }),
+      /* @__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" }),
+        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",
+          {
+            type: "button",
+            style: { ...btn, textAlign: "left", borderRadius: 6, padding: "6px 10px" },
+            onClick: () => {
+              onAdd(m.kind);
+              setOpen(false);
+            },
+            children: m.label
+          },
+          m.kind
+        )) }) : null
+      ] }),
       /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, opacity: canUndo ? 1 : 0.4 }, disabled: !canUndo, onClick: onUndo, children: "\u21B6" }),
       /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, opacity: canRedo ? 1 : 0.4 }, disabled: !canRedo, onClick: onRedo, children: "\u21B7" })
     ] }) : null
   ] });
 }
+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";
 }
@@ -658,6 +953,6 @@ function cssEscape2(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
 
-export { Canvas, EditablePage, Editor, Inspector, LayersPanel, editorReduce, initEditor, useEditor };
+export { Canvas, EditablePage, Editor, Inspector, LayersPanel, NodeInspector, editorReduce, initEditor, useEditor };
 //# sourceMappingURL=editor.js.map
 //# sourceMappingURL=editor.js.map