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

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-ZV7CV54P.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';
@@ -398,7 +398,7 @@ function Toolbar({ ed }) {
     }
   );
 }
-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,
@@ -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,
@@ -846,7 +873,7 @@ 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]
@@ -860,7 +887,7 @@ 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]
@@ -963,7 +990,7 @@ function EditablePage({
       onContextMenu: onContextMenuSelect,
       onDragOver: editing ? (e) => e.preventDefault() : 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 ? (
@@ -1098,13 +1125,21 @@ function ElementPalette({ open, onDragChange }) {
     }
   );
 }
-var CONTAINER_TYPES2 = /* @__PURE__ */ new Set(["section", "frame", "stack", "grid", "shape"]);
+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: {} },
+  repeater: { type: "repeater", props: { items: "" }, style: { gap: { value: 12, unit: "px" } }, layout: "stack" }
 };
 var GRIPS = [
   { key: "nw", north: true, west: true, cursor: "nwse-resize" },
@@ -1304,11 +1339,19 @@ 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: "repeater", label: "Repeater" }
 ];
 function EditBar({
   editing,