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

package/dist/editor.js

@@ -851,6 +851,43 @@ function EditablePage({
     },
     [ed, selNode]
   );
+  const addNodeAt = 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, 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 onPageDrop = (e) => {
+    const kind = e.dataTransfer.getData("application/x-cms-element");
+    if (!kind) return;
+    e.preventDefault();
+    const el = document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-cms]");
+    addNodeAt(kind, el?.getAttribute("data-cms") ?? 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 });
@@ -918,7 +955,17 @@ 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 page = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: pageRef,
+      onClickCapture,
+      onContextMenu: onContextMenuSelect,
+      onDragOver: editing ? (e) => e.preventDefault() : void 0,
+      onDrop: editing ? onPageDrop : void 0,
+      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 }) }) : 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).
@@ -985,9 +1032,72 @@ function EditablePage({
         onAdd: addNode
       }
     ) : 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
   ] });
 }
+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"]);
 var ADD_DEFAULTS = {
   text: { type: "text", props: { content: "New text" }, style: { color: "inherit" } },
@@ -1216,7 +1326,7 @@ function EditBar({
     /* @__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__ */ 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",
           {
@@ -1254,7 +1364,7 @@ function EditMenuItems({
   return /* @__PURE__ */ jsxs(Fragment$1, { 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: [