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

package/dist/editor.js

@@ -1,5 +1,5 @@
 import { keyBetween } from './chunk-7YYLYBLI.js';
-import { CmsPage, defaultRegistry } from './chunk-ZV7CV54P.js';
+import { CmsPage, defaultRegistry } from './chunk-E5AAQX7P.js';
 import { reduce, childrenOf } 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';
@@ -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,
@@ -846,7 +846,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 +860,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]
@@ -1098,13 +1098,20 @@ 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"]);
 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: {} }
 };
 var GRIPS = [
   { key: "nw", north: true, west: true, cursor: "nwse-resize" },
@@ -1304,11 +1311,18 @@ 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" }
 ];
 function EditBar({
   editing,