@particle-academy/fancy-cms-ui 0.0.1-dev.13 → 0.0.1-dev.15

package/dist/editor.d.cts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { P as PageDoc, i as NodeId, N as Node, m as StyleProps, L as LayoutMode } from './types-CpfPEq3V.cjs';
-import { a as ElementRegistry } from './registry-Bk7GN1rA.cjs';
+import { a as ElementRegistry, D as DataContext } from './registry-ni9y0dSw.cjs';
 import { P as PageOp } from './ops-CdBZarAT.cjs';
 
 interface EditorProps {
@@ -28,6 +28,8 @@ interface NodeTransform {
 interface EditablePageProps {
     doc: PageDoc;
     registry?: ElementRegistry;
+    /** Data context for `{ $bind }` props + repeaters (server props, etc.). */
+    data?: DataContext;
     /** Slot for the fancy-motion timeline dock (rendered at the bottom in EditMode). */
     timelineDock?: ReactNode;
     /** Per-node transforms applied to the page (e.g. the sampled keyframe snapshot). */
@@ -54,7 +56,7 @@ interface EditablePageProps {
  * toolbar styles it, and the selection can be **dragged to move** / **resized**
  * — committed as transforms the host captures into a timeline keyframe.
  */
-declare function EditablePage({ doc, registry, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
+declare function EditablePage({ doc, registry, data, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
 
 interface CanvasProps {
     doc: PageDoc;

package/dist/editor.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { P as PageDoc, i as NodeId, N as Node, m as StyleProps, L as LayoutMode } from './types-CpfPEq3V.js';
-import { a as ElementRegistry } from './registry-Dht9JBLU.js';
+import { a as ElementRegistry, D as DataContext } from './registry-C3PioMnL.js';
 import { P as PageOp } from './ops-BsM6kZxY.js';
 
 interface EditorProps {
@@ -28,6 +28,8 @@ interface NodeTransform {
 interface EditablePageProps {
     doc: PageDoc;
     registry?: ElementRegistry;
+    /** Data context for `{ $bind }` props + repeaters (server props, etc.). */
+    data?: DataContext;
     /** Slot for the fancy-motion timeline dock (rendered at the bottom in EditMode). */
     timelineDock?: ReactNode;
     /** Per-node transforms applied to the page (e.g. the sampled keyframe snapshot). */
@@ -54,7 +56,7 @@ interface EditablePageProps {
  * toolbar styles it, and the selection can be **dragged to move** / **resized**
  * — committed as transforms the host captures into a timeline keyframe.
  */
-declare function EditablePage({ doc, registry, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
+declare function EditablePage({ doc, registry, data, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
 
 interface CanvasProps {
     doc: PageDoc;

package/dist/editor.js

@@ -1,6 +1,6 @@
 import { keyBetween } from './chunk-7YYLYBLI.js';
-import { CmsPage, defaultRegistry } from './chunk-E5AAQX7P.js';
-import { reduce, childrenOf } from './chunk-3YZMELJJ.js';
+import { CmsPage, defaultRegistry } from './chunk-IXPYY4S2.js';
+import { reduce, childrenOf, isBinding } from './chunk-3YZMELJJ.js';
 import { useReducer, useCallback, useMemo, useRef, useState, useLayoutEffect, Fragment, useEffect } from 'react';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ContextMenu } from '@particle-academy/react-fancy';
@@ -414,7 +414,7 @@ function NodeInspector({
   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])
+    (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: [
@@ -539,24 +539,50 @@ 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: { ...input2, 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,
         type: isNum ? "number" : "text",
-        value: String(value),
+        value: String(value ?? ""),
         onChange: (e) => onChange(isNum ? Number(e.target.value) : e.target.value)
       }
     )
@@ -744,6 +770,7 @@ var SNAP = 6;
 function EditablePage({
   doc,
   registry = defaultRegistry,
+  data,
   timelineDock,
   transforms,
   onNodeTransform,
@@ -851,7 +878,7 @@ function EditablePage({
     },
     [ed, selNode]
   );
-  const addNodeAt = useCallback(
+  useCallback(
     (kind, targetId) => {
       const doc2 = ed.state.doc;
       const target = targetId ? doc2.nodes[targetId] : null;
@@ -880,12 +907,48 @@ function EditablePage({
     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();
-    const el = document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-cms]");
-    addNodeAt(kind, el?.getAttribute("data-cms") ?? null);
+    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 });
@@ -961,9 +1024,10 @@ function EditablePage({
       ref: pageRef,
       onClickCapture,
       onContextMenu: onContextMenuSelect,
-      onDragOver: editing ? (e) => e.preventDefault() : void 0,
+      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 })
+      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 ? (
@@ -1032,10 +1096,23 @@ 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
   ] });
 }
+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",
@@ -1098,7 +1175,7 @@ function ElementPalette({ open, onDragChange }) {
     }
   );
 }
-var CONTAINER_TYPES2 = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape", "card", "device"]);
+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 } },
@@ -1111,7 +1188,8 @@ var ADD_DEFAULTS = {
   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: {} }
+  code: { type: "code", props: { content: "npm install @particle-academy/react-fancy", lang: "bash" }, 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" },
@@ -1322,7 +1400,8 @@ var ADD_MENU = [
   { kind: "grid", label: "Grid" },
   { kind: "box", label: "Box" },
   { kind: "divider", label: "Divider" },
-  { kind: "code", label: "Code" }
+  { kind: "code", label: "Code" },
+  { kind: "repeater", label: "Repeater" }
 ];
 function EditBar({
   editing,