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

package/dist/chunk-IXPYY4S2.js

@@ -0,0 +1,93 @@
+import { childrenOf, emitDocCss, isBinding } from './chunk-3YZMELJJ.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+function getPath(data, path) {
+  return path.split(".").reduce((o, k) => o == null ? void 0 : o[k], data);
+}
+function resolveValue(v, data) {
+  if (v === void 0 || v === null) return v;
+  if (isBinding(v)) return getPath(data, v.$bind);
+  return v;
+}
+var defaultRegistry = {
+  section: ({ children }) => children,
+  stack: ({ children }) => children,
+  grid: ({ children }) => children,
+  frame: ({ children }) => children,
+  shape: ({ children }) => children,
+  card: ({ children }) => children,
+  text: ({ node, text }) => text(node.props.content),
+  heading: ({ node, text }) => text(node.props.content) || "Heading",
+  link: ({ node, text }) => /* @__PURE__ */ jsx("a", { href: text(node.props.href) || "#", style: { color: "inherit", textDecoration: "underline" }, children: text(node.props.content) || "link" }),
+  divider: () => /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: 0 } }),
+  callout: ({ node, text }) => {
+    const tone = { info: "#3b82f6", success: "#10b981", warning: "#f59e0b", danger: "#ef4444" }[text(node.props.variant)] ?? "#3b82f6";
+    return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 10, padding: "12px 14px", borderRadius: 10, background: `${tone}14`, borderLeft: `3px solid ${tone}` }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 13 }, children: text(node.props.content) || "Callout" }) });
+  },
+  code: ({ node, text }) => /* @__PURE__ */ jsx("pre", { style: { margin: 0, padding: "12px 14px", borderRadius: 10, background: "#0b1220", color: "#e2e8f0", fontFamily: "ui-monospace, monospace", fontSize: 13, overflowX: "auto" }, children: /* @__PURE__ */ jsx("code", { children: text(node.props.content) }) }),
+  button: ({ node, text }) => {
+    const label = text(node.props.label) || text(node.props.content) || "Button";
+    const variant = text(node.props.variant) || "primary";
+    return /* @__PURE__ */ jsx("span", { "data-cms-button": variant, style: buttonStyle(variant), children: label });
+  },
+  image: ({ node, text }) => /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: text(node.props.src),
+      alt: text(node.props.alt),
+      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+    }
+  )
+};
+function buttonStyle(variant) {
+  const base = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "9px 16px",
+    borderRadius: 8,
+    fontWeight: 600,
+    fontSize: 14,
+    lineHeight: 1,
+    cursor: "pointer",
+    userSelect: "none"
+  };
+  if (variant === "ghost") return { ...base, background: "transparent", color: "inherit", border: "1px solid currentColor" };
+  if (variant === "outline") return { ...base, background: "transparent", color: "#7c3aed", border: "1px solid #7c3aed" };
+  return { ...base, background: "#7c3aed", color: "#fff", border: "1px solid #7c3aed" };
+}
+function RenderNode({ doc, id, registry = defaultRegistry, data }) {
+  const node = doc.nodes[id];
+  if (!node) return null;
+  if (node.type === "repeater") {
+    const arr = resolveValue(node.props.items, data);
+    const items = Array.isArray(arr) ? arr : [];
+    const template = childrenOf(doc, id)[0];
+    return /* @__PURE__ */ jsx("div", { "data-cms": node.id, className: node.className, children: template ? items.map((item, index) => /* @__PURE__ */ jsx(RenderNode, { doc, id: template.id, registry, data: { ...data, item, index } }, index)) : null });
+  }
+  const kids = childrenOf(doc, id).map((child) => /* @__PURE__ */ jsx(RenderNode, { doc, id: child.id, registry, data }, child.id));
+  const resolve = (v) => resolveValue(v, data);
+  const text = (v) => {
+    const r = resolve(v);
+    return r === void 0 || r === null ? "" : String(r);
+  };
+  const renderer = registry[node.type];
+  const inner = renderer ? renderer({ node, doc, children: kids, data, resolve, text }) : node.island ? null : kids;
+  return /* @__PURE__ */ jsx("div", { "data-cms": node.id, "data-cms-island": node.island ? node.type : void 0, className: node.className, children: inner });
+}
+function CmsPage({
+  doc,
+  registry = defaultRegistry,
+  data,
+  includeStyles = true
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    includeStyles ? /* @__PURE__ */ jsx("style", { "data-cms-styles": "", children: emitDocCss(doc) }) : null,
+    doc.sections.map((id) => /* @__PURE__ */ jsx(RenderNode, { doc, id, registry, data }, id))
+  ] });
+}
+
+export { CmsPage, RenderNode, defaultRegistry };
+//# sourceMappingURL=chunk-IXPYY4S2.js.map
+//# sourceMappingURL=chunk-IXPYY4S2.js.map

package/dist/chunk-IXPYY4S2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/registry.tsx","../src/react/RenderNode.tsx","../src/react/CmsPage.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-IXPYY4S2.js","sourcesContent":["import type { ReactNode } from \"react\";\nimport { isBinding, type Bound, type Json, type Node, type PageDoc } from \"../document/types\";\n\n/** The page data context bindings resolve against (e.g. server props, repeater `item`). */\nexport type DataContext = Record<string, unknown>;\n\nexport interface ElementContext {\n  node: Node;\n  doc: PageDoc;\n  /** Pre-rendered child nodes, in order. */\n  children: ReactNode;\n  /** The data context this node renders in (page data + any repeater scope). */\n  data?: DataContext;\n  /** Resolve a (possibly bound) value to its raw resolved value. */\n  resolve: (v: Bound<Json> | undefined) => unknown;\n  /** Resolve a (possibly bound) value to a display string. */\n  text: (v: Bound<Json> | undefined) => string;\n}\n\n/**\n * Renders the INNER content of a node. The outer `[data-cms]` wrapper is added\n * by {@link RenderNode}, so a renderer only returns what goes inside.\n */\nexport type ElementRenderer = (ctx: ElementContext) => ReactNode;\n\nexport type ElementRegistry = Record<string, ElementRenderer>;\n\n/** Read a dotted path (`a.b.c`) out of the data context. */\nexport function getPath(data: DataContext | undefined, path: string): unknown {\n  return path.split(\".\").reduce<unknown>((o, k) => (o == null ? undefined : (o as Record<string, unknown>)[k]), data);\n}\n\n/** Resolve a value: a `{ $bind }` reads from the data context; anything else is literal. */\nexport function resolveValue(v: Bound<Json> | undefined, data?: DataContext): unknown {\n  if (v === undefined || v === null) return v;\n  if (isBinding(v)) return getPath(data, v.$bind);\n  return v;\n}\n\n/** Built-in native elements. Containers render their children; leaves render content. */\nexport const defaultRegistry: ElementRegistry = {\n  section: ({ children }) => children,\n  stack: ({ children }) => children,\n  grid: ({ children }) => children,\n  frame: ({ children }) => children,\n  shape: ({ children }) => children,\n  card: ({ children }) => children,\n  text: ({ node, text }) => text(node.props.content),\n  heading: ({ node, text }) => text(node.props.content) || \"Heading\",\n  link: ({ node, text }) => (\n    <a href={text(node.props.href) || \"#\"} style={{ color: \"inherit\", textDecoration: \"underline\" }}>\n      {text(node.props.content) || \"link\"}\n    </a>\n  ),\n  divider: () => <hr style={{ border: \"none\", borderTop: \"1px solid #e2e8f0\", margin: 0 }} />,\n  callout: ({ node, text }) => {\n    const tone = ({ info: \"#3b82f6\", success: \"#10b981\", warning: \"#f59e0b\", danger: \"#ef4444\" } as Record<string, string>)[text(node.props.variant)] ?? \"#3b82f6\";\n    return (\n      <div style={{ display: \"flex\", gap: 10, padding: \"12px 14px\", borderRadius: 10, background: `${tone}14`, borderLeft: `3px solid ${tone}` }}>\n        <span style={{ fontSize: 13 }}>{text(node.props.content) || \"Callout\"}</span>\n      </div>\n    );\n  },\n  code: ({ node, text }) => (\n    <pre style={{ margin: 0, padding: \"12px 14px\", borderRadius: 10, background: \"#0b1220\", color: \"#e2e8f0\", fontFamily: \"ui-monospace, monospace\", fontSize: 13, overflowX: \"auto\" }}>\n      <code>{text(node.props.content)}</code>\n    </pre>\n  ),\n  button: ({ node, text }) => {\n    const label = text(node.props.label) || text(node.props.content) || \"Button\";\n    const variant = text(node.props.variant) || \"primary\";\n    return <span data-cms-button={variant} style={buttonStyle(variant)}>{label}</span>;\n  },\n  image: ({ node, text }) => (\n    <img\n      src={text(node.props.src)}\n      alt={text(node.props.alt)}\n      style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\", display: \"block\" }}\n    />\n  ),\n};\n\n/**\n * A self-contained button look so the `button` primitive renders sensibly with\n * zero host CSS. Hosts that want their own button classes override the `button`\n * renderer in their registry (e.g. the sandbox maps it to `.btn .btn-primary`).\n */\nfunction buttonStyle(variant: string): import(\"react\").CSSProperties {\n  const base: import(\"react\").CSSProperties = {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: 6,\n    padding: \"9px 16px\",\n    borderRadius: 8,\n    fontWeight: 600,\n    fontSize: 14,\n    lineHeight: 1,\n    cursor: \"pointer\",\n    userSelect: \"none\",\n  };\n  if (variant === \"ghost\") return { ...base, background: \"transparent\", color: \"inherit\", border: \"1px solid currentColor\" };\n  if (variant === \"outline\") return { ...base, background: \"transparent\", color: \"#7c3aed\", border: \"1px solid #7c3aed\" };\n  return { ...base, background: \"#7c3aed\", color: \"#fff\", border: \"1px solid #7c3aed\" };\n}\n","import type { ReactElement } from \"react\";\nimport type { Bound, Json, PageDoc } from \"../document/types\";\nimport { childrenOf } from \"../document/reduce\";\nimport { defaultRegistry, resolveValue, type DataContext, type ElementRegistry } from \"./registry\";\n\nexport interface RenderNodeProps {\n  doc: PageDoc;\n  id: string;\n  registry?: ElementRegistry;\n  /** Data context bindings resolve against (page data + any repeater scope). */\n  data?: DataContext;\n}\n\n/**\n * Render one node (and its subtree) to a `[data-cms]`-tagged element. The CSS\n * emitted by `emitDocCss` targets these `data-cms` handles. Interactive /\n * 3rd-party **islands** with no registered renderer become an empty, sized\n * placeholder the host hydrates client-side — mirroring the PHP renderer.\n *\n * `repeater` nodes are special-cased: their first child is a template rendered\n * once per item of the bound `items` array, each in a scope that exposes `item`\n * and `index` to nested `{ $bind: \"item.…\" }` bindings.\n */\nexport function RenderNode({ doc, id, registry = defaultRegistry, data }: RenderNodeProps): ReactElement | null {\n  const node = doc.nodes[id];\n  if (!node) return null;\n\n  if (node.type === \"repeater\") {\n    const arr = resolveValue(node.props.items as Bound<Json> | undefined, data);\n    const items = Array.isArray(arr) ? arr : [];\n    const template = childrenOf(doc, id)[0];\n    return (\n      <div data-cms={node.id} className={node.className}>\n        {template\n          ? items.map((item, index) => (\n              <RenderNode key={index} doc={doc} id={template.id} registry={registry} data={{ ...data, item, index }} />\n            ))\n          : null}\n      </div>\n    );\n  }\n\n  const kids = childrenOf(doc, id).map((child) => (\n    <RenderNode key={child.id} doc={doc} id={child.id} registry={registry} data={data} />\n  ));\n\n  const resolve = (v: Bound<Json> | undefined) => resolveValue(v, data);\n  const text = (v: Bound<Json> | undefined): string => {\n    const r = resolve(v);\n    return r === undefined || r === null ? \"\" : String(r);\n  };\n\n  const renderer = registry[node.type];\n  const inner = renderer ? renderer({ node, doc, children: kids, data, resolve, text }) : node.island ? null : kids;\n\n  return (\n    <div data-cms={node.id} data-cms-island={node.island ? node.type : undefined} className={node.className}>\n      {inner}\n    </div>\n  );\n}\n","import { Fragment, type ReactElement } from \"react\";\nimport type { PageDoc } from \"../document/types\";\nimport { emitDocCss } from \"../render/css\";\nimport { RenderNode } from \"./RenderNode\";\nimport { defaultRegistry, type DataContext, type ElementRegistry } from \"./registry\";\n\nexport interface CmsPageProps {\n  doc: PageDoc;\n  registry?: ElementRegistry;\n  /** Data context that `{ $bind: \"…\" }` props + repeaters resolve against. */\n  data?: DataContext;\n  /** Inject the compiled stylesheet. Set false when the host emits CSS itself. */\n  includeStyles?: boolean;\n}\n\n/** Render a full page document: the compiled stylesheet + every section. */\nexport function CmsPage({\n  doc,\n  registry = defaultRegistry,\n  data,\n  includeStyles = true,\n}: CmsPageProps): ReactElement {\n  return (\n    <Fragment>\n      {includeStyles ? <style data-cms-styles=\"\">{emitDocCss(doc)}</style> : null}\n      {doc.sections.map((id) => (\n        <RenderNode key={id} doc={doc} id={id} registry={registry} data={data} />\n      ))}\n    </Fragment>\n  );\n}\n"]}

package/dist/editor.cjs

@@ -361,10 +361,13 @@ ${inner}
   }
   return blocks.join("\n\n") + (blocks.length ? "\n" : "");
 }
-function literal(v) {
-  if (v === void 0 || v === null) return "";
-  if (isBinding(v)) return "";
-  return String(v);
+function getPath(data, path) {
+  return path.split(".").reduce((o, k) => o == null ? void 0 : o[k], data);
+}
+function resolveValue(v, data) {
+  if (v === void 0 || v === null) return v;
+  if (isBinding(v)) return getPath(data, v.$bind);
+  return v;
 }
 var defaultRegistry = {
   section: ({ children }) => children,
@@ -372,18 +375,26 @@ var defaultRegistry = {
   grid: ({ children }) => children,
   frame: ({ children }) => children,
   shape: ({ children }) => children,
-  text: ({ node }) => literal(node.props.content),
-  heading: ({ node }) => literal(node.props.content) || "Heading",
-  button: ({ node }) => {
-    const label2 = literal(node.props.label) || literal(node.props.content) || "Button";
-    const variant = literal(node.props.variant) || "primary";
+  card: ({ children }) => children,
+  text: ({ node, text }) => text(node.props.content),
+  heading: ({ node, text }) => text(node.props.content) || "Heading",
+  link: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: text(node.props.href) || "#", style: { color: "inherit", textDecoration: "underline" }, children: text(node.props.content) || "link" }),
+  divider: () => /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e2e8f0", margin: 0 } }),
+  callout: ({ node, text }) => {
+    const tone = { info: "#3b82f6", success: "#10b981", warning: "#f59e0b", danger: "#ef4444" }[text(node.props.variant)] ?? "#3b82f6";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 10, padding: "12px 14px", borderRadius: 10, background: `${tone}14`, borderLeft: `3px solid ${tone}` }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13 }, children: text(node.props.content) || "Callout" }) });
+  },
+  code: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { margin: 0, padding: "12px 14px", borderRadius: 10, background: "#0b1220", color: "#e2e8f0", fontFamily: "ui-monospace, monospace", fontSize: 13, overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: text(node.props.content) }) }),
+  button: ({ node, text }) => {
+    const label2 = text(node.props.label) || text(node.props.content) || "Button";
+    const variant = text(node.props.variant) || "primary";
     return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cms-button": variant, style: buttonStyle(variant), children: label2 });
   },
-  image: ({ node }) => /* @__PURE__ */ jsxRuntime.jsx(
+  image: ({ node, text }) => /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
-      src: literal(node.props.src),
-      alt: literal(node.props.alt),
+      src: text(node.props.src),
+      alt: text(node.props.alt),
       style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
     }
   )
@@ -405,30 +416,34 @@ function buttonStyle(variant) {
   if (variant === "outline") return { ...base, background: "transparent", color: "#7c3aed", border: "1px solid #7c3aed" };
   return { ...base, background: "#7c3aed", color: "#fff", border: "1px solid #7c3aed" };
 }
-function RenderNode({ doc, id, registry = defaultRegistry }) {
+function RenderNode({ doc, id, registry = defaultRegistry, data }) {
   const node = doc.nodes[id];
   if (!node) return null;
-  const kids = childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: child.id, registry }, child.id));
+  if (node.type === "repeater") {
+    const arr = resolveValue(node.props.items, data);
+    const items = Array.isArray(arr) ? arr : [];
+    const template = childrenOf(doc, id)[0];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, className: node.className, children: template ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: template.id, registry, data: { ...data, item, index } }, index)) : null });
+  }
+  const kids = childrenOf(doc, id).map((child) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id: child.id, registry, data }, child.id));
+  const resolve = (v) => resolveValue(v, data);
+  const text = (v) => {
+    const r = resolve(v);
+    return r === void 0 || r === null ? "" : String(r);
+  };
   const renderer = registry[node.type];
-  const inner = renderer ? renderer({ node, doc, children: kids }) : node.island ? null : kids;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-cms": node.id,
-      "data-cms-island": node.island ? node.type : void 0,
-      className: node.className,
-      children: inner
-    }
-  );
+  const inner = renderer ? renderer({ node, doc, children: kids, data, resolve, text }) : node.island ? null : kids;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cms": node.id, "data-cms-island": node.island ? node.type : void 0, className: node.className, children: inner });
 }
 function CmsPage({
   doc,
   registry = defaultRegistry,
+  data,
   includeStyles = true
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     includeStyles ? /* @__PURE__ */ jsxRuntime.jsx("style", { "data-cms-styles": "", children: emitDocCss(doc) }) : null,
-    doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id, registry }, id))
+    doc.sections.map((id) => /* @__PURE__ */ jsxRuntime.jsx(RenderNode, { doc, id, registry, data }, id))
   ] });
 }
 function Canvas({ doc, selection, onSelect, apply }) {
@@ -802,7 +817,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,
@@ -818,7 +833,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__ */ jsxRuntime.jsxs("div", { style: panel, onPointerDown: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headRow, children: [
@@ -943,24 +958,50 @@ function Row({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 8 }, children });
 }
 function PropField({ name, value, onChange }) {
+  const bound = isBinding(value);
+  const link = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { style: field, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { ...fieldLabel, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        name,
+        " ",
+        link
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 12 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textTransform: "capitalize" }, children: name })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textTransform: "capitalize", flex: 1 }, children: name }),
+      link
     ] });
   }
   if (name === "variant") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Sel, { label: name, value: String(value), options: [["primary", "Primary"], ["ghost", "Ghost"], ["outline", "Outline"]], onChange });
+    return /* @__PURE__ */ jsxRuntime.jsx(Sel, { label: name, value: String(value ?? ""), options: [["primary", "Primary"], ["ghost", "Ghost"], ["outline", "Outline"]], onChange });
   }
   const isNum = typeof value === "number";
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { style: field, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: fieldLabel, children: name }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { ...fieldLabel, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      name,
+      " ",
+      link
+    ] }),
     /* @__PURE__ */ jsxRuntime.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)
       }
     )
@@ -1148,6 +1189,7 @@ var SNAP = 6;
 function EditablePage({
   doc,
   registry = defaultRegistry,
+  data,
   timelineDock,
   transforms,
   onNodeTransform,
@@ -1250,7 +1292,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]
@@ -1264,7 +1306,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]
@@ -1367,7 +1409,7 @@ function EditablePage({
       onContextMenu: onContextMenuSelect,
       onDragOver: editing ? (e) => e.preventDefault() : void 0,
       onDrop: editing ? onPageDrop : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry })
+      children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry, data })
     }
   );
   const pageShell = pinned ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: spacerRef, style: { height: `${Math.max(1, frames) * 100}vh` }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "sticky", top: 0, height: "100vh", overflow: "hidden" }, children: page }) }) : frames > 1 ? (
@@ -1502,13 +1544,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" },
@@ -1708,11 +1758,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,