@particle-academy/fancy-cms-ui 0.0.1-dev.8 → 0.0.1-dev.9

package/dist/editor.d.cts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
-import { P as PageDoc, N as Node, m as StyleProps } from './types-CpfPEq3V.cjs';
+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 { P as PageOp } from './ops-C_s0FGeV.cjs';
+import { P as PageOp } from './ops-CdBZarAT.cjs';
 
 interface EditorProps {
     /** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
@@ -73,9 +73,11 @@ interface LayersPanelProps {
     doc: PageDoc;
     selection: string | null;
     onSelect: (id: string) => void;
+    /** Reparent/reorder a node (drag-to-reorder). Omit to disable dragging. */
+    onMove?: (id: NodeId, parent: NodeId | null, order: string) => void;
 }
-/** The section/layer tree. Click a row to select. */
-declare function LayersPanel({ doc, selection, onSelect }: LayersPanelProps): ReactElement;
+/** The section/layer tree. Click a row to select; drag a row onto another to reorder. */
+declare function LayersPanel({ doc, selection, onSelect, onMove }: LayersPanelProps): ReactElement;
 
 interface InspectorProps {
     doc: PageDoc;
@@ -98,6 +100,8 @@ interface NodeInspectorProps {
     onProps: (patch: Record<string, unknown>) => void;
     /** Patch the node's base style. */
     onStyle: (patch: Partial<StyleProps>) => void;
+    /** Set how a container arranges its children (free / stack / grid). */
+    onLayout?: (layout: LayoutMode | undefined) => void;
     /** Commit a transform (position / size / opacity / scale / rotate) into the active keyframe. */
     onTransform: (t: NodeTransform) => void;
     onRemove: () => void;
@@ -111,7 +115,7 @@ interface NodeInspectorProps {
  * box. Every control writes through the op-spine or the active keyframe, so edits
  * are undoable and animatable.
  */
-declare function NodeInspector({ node, transform, measured, onProps, onStyle, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
+declare function NodeInspector({ node, transform, measured, onProps, onStyle, onLayout, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
 
 /**
  * Editor state engine — pure and framework-agnostic so it's unit-testable.

package/dist/editor.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
-import { P as PageDoc, N as Node, m as StyleProps } from './types-CpfPEq3V.js';
+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 { P as PageOp } from './ops-nevYkDzK.js';
+import { P as PageOp } from './ops-BsM6kZxY.js';
 
 interface EditorProps {
     /** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
@@ -73,9 +73,11 @@ interface LayersPanelProps {
     doc: PageDoc;
     selection: string | null;
     onSelect: (id: string) => void;
+    /** Reparent/reorder a node (drag-to-reorder). Omit to disable dragging. */
+    onMove?: (id: NodeId, parent: NodeId | null, order: string) => void;
 }
-/** The section/layer tree. Click a row to select. */
-declare function LayersPanel({ doc, selection, onSelect }: LayersPanelProps): ReactElement;
+/** The section/layer tree. Click a row to select; drag a row onto another to reorder. */
+declare function LayersPanel({ doc, selection, onSelect, onMove }: LayersPanelProps): ReactElement;
 
 interface InspectorProps {
     doc: PageDoc;
@@ -98,6 +100,8 @@ interface NodeInspectorProps {
     onProps: (patch: Record<string, unknown>) => void;
     /** Patch the node's base style. */
     onStyle: (patch: Partial<StyleProps>) => void;
+    /** Set how a container arranges its children (free / stack / grid). */
+    onLayout?: (layout: LayoutMode | undefined) => void;
     /** Commit a transform (position / size / opacity / scale / rotate) into the active keyframe. */
     onTransform: (t: NodeTransform) => void;
     onRemove: () => void;
@@ -111,7 +115,7 @@ interface NodeInspectorProps {
  * box. Every control writes through the op-spine or the active keyframe, so edits
  * are undoable and animatable.
  */
-declare function NodeInspector({ node, transform, measured, onProps, onStyle, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
+declare function NodeInspector({ node, transform, measured, onProps, onStyle, onLayout, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
 
 /**
  * Editor state engine — pure and framework-agnostic so it's unit-testable.

package/dist/editor.js

@@ -1,6 +1,6 @@
 import { keyBetween } from './chunk-7YYLYBLI.js';
-import { CmsPage, defaultRegistry } from './chunk-5O6U4VIU.js';
-import { reduce, childrenOf } from './chunk-HYHNMW47.js';
+import { CmsPage, defaultRegistry } from './chunk-ZV7CV54P.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';
 import { ContextMenu } from '@particle-academy/react-fancy';
@@ -157,31 +157,66 @@ function Canvas({ doc, selection, onSelect, apply }) {
 function cssEscape(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
-function LayersPanel({ doc, selection, onSelect }) {
-  return /* @__PURE__ */ jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: doc.sections.map((id) => /* @__PURE__ */ jsx(LayerRow, { doc, id, depth: 0, selection, onSelect }, id)) });
+var MIME = "application/x-cms-node";
+function isAncestorOrSelf(doc, id, maybeAncestor) {
+  for (let cur = id; cur; cur = doc.nodes[cur]?.parent ?? null) {
+    if (cur === maybeAncestor) return true;
+  }
+  return false;
+}
+function LayersPanel({ doc, selection, onSelect, onMove }) {
+  const [overId, setOverId] = useState(null);
+  return /* @__PURE__ */ jsx("div", { style: { overflow: "auto", padding: 8, fontSize: 13, fontFamily: "system-ui, sans-serif" }, children: doc.sections.map((id) => /* @__PURE__ */ jsx(LayerRow, { doc, id, depth: 0, selection, onSelect, onMove, overId, setOverId }, id)) });
 }
-function LayerRow({ doc, id, depth, selection, onSelect }) {
+function LayerRow({ doc, id, depth, selection, onSelect, onMove, overId, setOverId }) {
   const node = doc.nodes[id];
   if (!node) return null;
   const selected = selection === id;
+  const draggable = Boolean(onMove);
+  const drop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOverId(null);
+    if (!onMove) return;
+    const dragId = e.dataTransfer.getData(MIME);
+    if (!dragId || dragId === id || isAncestorOrSelf(doc, id, dragId)) return;
+    const siblings = childrenOf(doc, node.parent);
+    const idx = siblings.findIndex((n) => n.id === id);
+    const next = siblings[idx + 1];
+    onMove(dragId, node.parent, keyBetween(node.order, next ? next.order : null));
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
+        draggable,
         onClick: () => onSelect(id),
+        onDragStart: (e) => {
+          e.dataTransfer.setData(MIME, id);
+          e.dataTransfer.effectAllowed = "move";
+        },
+        onDragOver: (e) => {
+          if (!onMove) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          if (overId !== id) setOverId(id);
+        },
+        onDragLeave: () => overId === id && setOverId(null),
+        onDrop: drop,
         style: {
           display: "block",
           width: "100%",
           textAlign: "left",
           border: "none",
           borderRadius: 6,
-          cursor: "pointer",
+          cursor: draggable ? "grab" : "pointer",
           padding: "4px 8px",
           paddingLeft: 8 + depth * 14,
           background: selected ? "#ede9fe" : "transparent",
           color: selected ? "#5b21b6" : "#334155",
-          font: "inherit"
+          font: "inherit",
+          boxShadow: overId === id ? "inset 0 -2px 0 0 #8b5cf6" : "none"
         },
         children: [
           /* @__PURE__ */ jsx("span", { style: { opacity: 0.6 }, children: node.type }),
@@ -190,17 +225,7 @@ function LayerRow({ doc, id, depth, selection, onSelect }) {
         ]
       }
     ),
-    childrenOf(doc, id).map((child) => /* @__PURE__ */ jsx(
-      LayerRow,
-      {
-        doc,
-        id: child.id,
-        depth: depth + 1,
-        selection,
-        onSelect
-      },
-      child.id
-    ))
+    childrenOf(doc, id).map((child) => /* @__PURE__ */ jsx(LayerRow, { doc, id: child.id, depth: depth + 1, selection, onSelect, onMove, overId, setOverId }, child.id))
   ] });
 }
 var label = {
@@ -332,7 +357,15 @@ function Editor({ defaultValue, onChange }) {
   return /* @__PURE__ */ jsxs("div", { style: shell, children: [
     /* @__PURE__ */ jsxs("div", { style: { borderRight: "1px solid #e2e8f0", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
       /* @__PURE__ */ jsx(Toolbar, { ed }),
-      /* @__PURE__ */ jsx(LayersPanel, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select })
+      /* @__PURE__ */ jsx(
+        LayersPanel,
+        {
+          doc: ed.state.doc,
+          selection: ed.state.selection,
+          onSelect: ed.select,
+          onMove: (id, parent, order) => ed.apply({ t: "move_node", id, parent, order })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(Canvas, { doc: ed.state.doc, selection: ed.state.selection, onSelect: ed.select, apply: ed.apply }),
     /* @__PURE__ */ jsx("div", { style: { borderLeft: "1px solid #e2e8f0", minHeight: 0 }, children: /* @__PURE__ */ jsx(Inspector, { doc: ed.state.doc, selection: ed.state.selection, apply: ed.apply }) })
@@ -372,6 +405,7 @@ function NodeInspector({
   measured,
   onProps,
   onStyle,
+  onLayout,
   onTransform,
   onRemove,
   onClose
@@ -454,9 +488,44 @@ function NodeInspector({
         ] }),
         /* @__PURE__ */ jsxs(Row, { children: [
           /* @__PURE__ */ jsx(Num, { label: "Padding", value: base.padding?.value, placeholder: "0", onChange: (v) => onStyle({ padding: v == null ? void 0 : len(v) }) }),
+          /* @__PURE__ */ jsx(Num, { label: "Margin", value: base.margin?.value, placeholder: "0", onChange: (v) => onStyle({ margin: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Txt, { label: "Border", value: base.border ?? "", placeholder: "1px solid #e2e8f0", onChange: (v) => onStyle({ border: v || void 0 }) }) })
+      ] }),
+      CONTAINER_TYPES.has(node.type) ? /* @__PURE__ */ jsxs(Group, { label: "Layout", children: [
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(
+            Sel,
+            {
+              label: "Mode",
+              value: node.layout ?? "free",
+              options: [["free", "Free"], ["stack", "Stack"], ["grid", "Grid"]],
+              onChange: (v) => onLayout?.(v)
+            }
+          ),
           /* @__PURE__ */ jsx(Num, { label: "Gap", value: base.gap?.value, placeholder: "0", onChange: (v) => onStyle({ gap: v == null ? void 0 : len(v) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { children: [
+          /* @__PURE__ */ jsx(
+            Sel,
+            {
+              label: "Align",
+              value: base.align ?? "",
+              options: [["", "\u2014"], ["start", "Start"], ["center", "Center"], ["end", "End"], ["stretch", "Stretch"]],
+              onChange: (v) => onStyle({ align: v || void 0 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Sel,
+            {
+              label: "Justify",
+              value: base.justify ?? "",
+              options: [["", "\u2014"], ["start", "Start"], ["center", "Center"], ["end", "End"], ["between", "Between"], ["around", "Around"]],
+              onChange: (v) => onStyle({ justify: v || void 0 })
+            }
+          )
         ] })
-      ] })
+      ] }) : null
     ] })
   ] });
 }
@@ -511,6 +580,12 @@ function Num({ label: label2, value, placeholder, onChange, step, min, max }) {
     )
   ] });
 }
+function Txt({ label: label2, value, placeholder, onChange }) {
+  return /* @__PURE__ */ jsxs("label", { style: field, children: [
+    /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label2 }),
+    /* @__PURE__ */ jsx("input", { style: input2, type: "text", value, placeholder, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
 function Color({ label: label2, value, onChange }) {
   return /* @__PURE__ */ jsxs("label", { style: field, children: [
     /* @__PURE__ */ jsx("span", { style: fieldLabel, children: label2 }),
@@ -777,6 +852,7 @@ function EditablePage({
   );
   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 });
   const removeSelected = () => {
     if (!selection) return;
     ed.apply({ t: "remove_node", id: selection });
@@ -801,6 +877,8 @@ function EditablePage({
     ed.select(id);
     requestAnimationFrame(() => pageRef.current?.querySelector(`[data-cms="${cssEscape2(id)}"]`)?.focus());
   };
+  const nudgeRef = useRef({ transforms, onNodeTransform });
+  nudgeRef.current = { transforms, onNodeTransform };
   useEffect(() => {
     if (!editing) return;
     const onKey = (e) => {
@@ -819,6 +897,15 @@ function EditablePage({
       } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "v") {
         e.preventDefault();
         paste(selection);
+      } else if (selection && /^Arrow(Left|Right|Up|Down)$/.test(e.key)) {
+        const { transforms: tf, onNodeTransform: commit } = nudgeRef.current;
+        if (!commit) return;
+        e.preventDefault();
+        const step = e.shiftKey ? 10 : 1;
+        const dx = e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0;
+        const dy = e.key === "ArrowUp" ? -step : e.key === "ArrowDown" ? step : 0;
+        const cur = tf?.[selection] ?? {};
+        commit(selection, { ...cur, x: (cur.x ?? 0) + dx, y: (cur.y ?? 0) + dy });
       }
     };
     window.addEventListener("keydown", onKey);
@@ -872,6 +959,7 @@ function EditablePage({
         measured: { w: box.w, h: box.h },
         onProps: setProps,
         onStyle: setStyle,
+        onLayout: setLayout,
         onTransform: (t) => selection && onNodeTransform?.(selection, t),
         onRemove: removeSelected,
         onClose: () => ed.select(null)