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

package/dist/editor.d.cts

@@ -1,18 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
-import { P as PageDoc, N as Node, m as StyleProps } from './types-CpfPEq3V.cjs';
-import { a as ElementRegistry } from './registry-Bk7GN1rA.cjs';
-import { P as PageOp } from './ops-C_s0FGeV.cjs';
-
-interface EditorProps {
-    /** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
-    defaultValue: PageDoc;
-    onChange?: (doc: PageDoc) => void;
-}
-/**
- * The fancy-cms editor: layers · canvas · inspector over the op-spine. Phase 1
- * cut — chrome is plain markup for now; it graduates to react-fancy next.
- */
-declare function Editor({ defaultValue, onChange }: EditorProps): ReactElement;
+export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-DLH7hU6G.cjs';
+import { ReactNode, ReactElement } from 'react';
+import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, p as StyleProps, L as LayoutMode } from './registry-D5y5IgCR.cjs';
 
 /** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */
 interface NodeTransform {
@@ -28,6 +16,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,36 +44,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;
-
-interface CanvasProps {
-    doc: PageDoc;
-    selection: string | null;
-    onSelect: (id: string | null) => void;
-    apply: (op: PageOp) => void;
-}
-/**
- * The edit surface: renders the live page and overlays a selection box. Click to
- * select; drag the box to move (px constraints). Phase 1 cut: free-parent
- * move + resize handles, stack/grid reordering, and snapping come next.
- */
-declare function Canvas({ doc, selection, onSelect, apply }: CanvasProps): ReactElement;
-
-interface LayersPanelProps {
-    doc: PageDoc;
-    selection: string | null;
-    onSelect: (id: string) => void;
-}
-/** The section/layer tree. Click a row to select. */
-declare function LayersPanel({ doc, selection, onSelect }: LayersPanelProps): ReactElement;
-
-interface InspectorProps {
-    doc: PageDoc;
-    selection: string | null;
-    apply: (op: PageOp) => void;
-}
-/** Contextual property editor for the selected node. Every change is one op. */
-declare function Inspector({ doc, selection, apply }: InspectorProps): ReactElement;
+declare function EditablePage({ doc, registry, data, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
 
 interface NodeInspectorProps {
     node: Node;
@@ -98,6 +59,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,50 +74,6 @@ 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;
-
-/**
- * Editor state engine — pure and framework-agnostic so it's unit-testable.
- * `useEditor` wraps this with `useReducer`. Undo/redo uses document snapshots
- * (simple + robust); the op-level `invert` in the spine is for collab/op-stream
- * undo.
- */
-
-interface EditorState {
-    doc: PageDoc;
-    past: PageDoc[];
-    future: PageDoc[];
-    selection: string | null;
-}
-type EditorAction = {
-    type: "apply";
-    op: PageOp;
-} | {
-    type: "undo";
-} | {
-    type: "redo";
-} | {
-    type: "select";
-    id: string | null;
-} | {
-    type: "replace";
-    doc: PageDoc;
-};
-declare function initEditor(doc: PageDoc): EditorState;
-declare function editorReduce(state: EditorState, action: EditorAction): EditorState;
-
-interface EditorApi {
-    state: EditorState;
-    /** Dispatch a mutation through the op-spine (records an undo snapshot). */
-    apply: (op: PageOp) => void;
-    undo: () => void;
-    redo: () => void;
-    select: (id: string | null) => void;
-    /** Replace the document wholesale (e.g. a controlled `value` change). */
-    replace: (doc: PageDoc) => void;
-    canUndo: boolean;
-    canRedo: boolean;
-}
-declare function useEditor(initialDoc: PageDoc): EditorApi;
+declare function NodeInspector({ node, transform, measured, onProps, onStyle, onLayout, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
 
-export { Canvas, type CanvasProps, EditablePage, type EditablePageProps, Editor, type EditorAction, type EditorApi, type EditorProps, type EditorState, Inspector, type InspectorProps, LayersPanel, type LayersPanelProps, NodeInspector, type NodeInspectorProps, editorReduce, initEditor, useEditor };
+export { EditablePage, type EditablePageProps, NodeInspector, type NodeInspectorProps };

package/dist/editor.d.ts

@@ -1,18 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
-import { P as PageDoc, N as Node, m as StyleProps } from './types-CpfPEq3V.js';
-import { a as ElementRegistry } from './registry-Dht9JBLU.js';
-import { P as PageOp } from './ops-nevYkDzK.js';
-
-interface EditorProps {
-    /** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
-    defaultValue: PageDoc;
-    onChange?: (doc: PageDoc) => void;
-}
-/**
- * The fancy-cms editor: layers · canvas · inspector over the op-spine. Phase 1
- * cut — chrome is plain markup for now; it graduates to react-fancy next.
- */
-declare function Editor({ defaultValue, onChange }: EditorProps): ReactElement;
+export { C as Canvas, a as CanvasProps, E as Editor, b as EditorAction, c as EditorApi, d as EditorProps, e as EditorState, I as Inspector, f as InspectorProps, L as LayersPanel, g as LayersPanelProps, i as editorReduce, j as initEditor, u as useEditor } from './useEditor-qmF9n2e6.js';
+import { ReactNode, ReactElement } from 'react';
+import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, p as StyleProps, L as LayoutMode } from './registry-D5y5IgCR.js';
 
 /** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */
 interface NodeTransform {
@@ -28,6 +16,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,36 +44,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;
-
-interface CanvasProps {
-    doc: PageDoc;
-    selection: string | null;
-    onSelect: (id: string | null) => void;
-    apply: (op: PageOp) => void;
-}
-/**
- * The edit surface: renders the live page and overlays a selection box. Click to
- * select; drag the box to move (px constraints). Phase 1 cut: free-parent
- * move + resize handles, stack/grid reordering, and snapping come next.
- */
-declare function Canvas({ doc, selection, onSelect, apply }: CanvasProps): ReactElement;
-
-interface LayersPanelProps {
-    doc: PageDoc;
-    selection: string | null;
-    onSelect: (id: string) => void;
-}
-/** The section/layer tree. Click a row to select. */
-declare function LayersPanel({ doc, selection, onSelect }: LayersPanelProps): ReactElement;
-
-interface InspectorProps {
-    doc: PageDoc;
-    selection: string | null;
-    apply: (op: PageOp) => void;
-}
-/** Contextual property editor for the selected node. Every change is one op. */
-declare function Inspector({ doc, selection, apply }: InspectorProps): ReactElement;
+declare function EditablePage({ doc, registry, data, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
 
 interface NodeInspectorProps {
     node: Node;
@@ -98,6 +59,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,50 +74,6 @@ 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;
-
-/**
- * Editor state engine — pure and framework-agnostic so it's unit-testable.
- * `useEditor` wraps this with `useReducer`. Undo/redo uses document snapshots
- * (simple + robust); the op-level `invert` in the spine is for collab/op-stream
- * undo.
- */
-
-interface EditorState {
-    doc: PageDoc;
-    past: PageDoc[];
-    future: PageDoc[];
-    selection: string | null;
-}
-type EditorAction = {
-    type: "apply";
-    op: PageOp;
-} | {
-    type: "undo";
-} | {
-    type: "redo";
-} | {
-    type: "select";
-    id: string | null;
-} | {
-    type: "replace";
-    doc: PageDoc;
-};
-declare function initEditor(doc: PageDoc): EditorState;
-declare function editorReduce(state: EditorState, action: EditorAction): EditorState;
-
-interface EditorApi {
-    state: EditorState;
-    /** Dispatch a mutation through the op-spine (records an undo snapshot). */
-    apply: (op: PageOp) => void;
-    undo: () => void;
-    redo: () => void;
-    select: (id: string | null) => void;
-    /** Replace the document wholesale (e.g. a controlled `value` change). */
-    replace: (doc: PageDoc) => void;
-    canUndo: boolean;
-    canRedo: boolean;
-}
-declare function useEditor(initialDoc: PageDoc): EditorApi;
+declare function NodeInspector({ node, transform, measured, onProps, onStyle, onLayout, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
 
-export { Canvas, type CanvasProps, EditablePage, type EditablePageProps, Editor, type EditorAction, type EditorApi, type EditorProps, type EditorState, Inspector, type InspectorProps, LayersPanel, type LayersPanelProps, NodeInspector, type NodeInspectorProps, editorReduce, initEditor, useEditor };
+export { EditablePage, type EditablePageProps, NodeInspector, type NodeInspectorProps };