@particle-academy/fancy-cms-ui 0.0.1-dev.1 → 0.0.1-dev.10

package/dist/editor.d.cts

@@ -1,6 +1,7 @@
-import { ReactElement } from 'react';
-import { P as PageDoc } from './types-DKCl14aV.cjs';
-import { P as PageOp } from './ops-DWgJjAbX.cjs';
+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 { P as PageOp } from './ops-CdBZarAT.cjs';
 
 interface EditorProps {
     /** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
@@ -13,6 +14,48 @@ interface EditorProps {
  */
 declare function Editor({ defaultValue, onChange }: EditorProps): ReactElement;
 
+/** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */
+interface NodeTransform {
+    x?: number;
+    y?: number;
+    scale?: number;
+    opacity?: number;
+    rotate?: number;
+    /** Explicit size in px (a true resize, distinct from `scale`). Absent = auto. */
+    w?: number;
+    h?: number;
+}
+interface EditablePageProps {
+    doc: PageDoc;
+    registry?: ElementRegistry;
+    /** 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). */
+    transforms?: Record<string, NodeTransform>;
+    /** Fired when the user moves/resizes a node — the host writes it into the current keyframe. */
+    onNodeTransform?: (id: string, transform: NodeTransform) => void;
+    /** Notifies the host of the current selection (e.g. to sync the timeline). */
+    onSelect?: (id: string | null) => void;
+    /** Scroll length in viewports — the page becomes a tall scroll canvas (extend via the timeline). */
+    frames?: number;
+    /** Scroll progress 0..1 (scroll = the timeline playhead). The host maps it to transforms. */
+    onProgress?: (progress: number) => void;
+    /**
+     * Pin the page into a scroll canvas (the `frames`×viewport spacer + sticky pin
+     * that turns scroll into the playhead). Default `true`. Set **false** for a
+     * full multi-section page that should scroll naturally — animation is then
+     * driven by the dock scrub + Play preview instead of raw scroll.
+     */
+    pinned?: boolean;
+}
+/**
+ * Inline EditMode over a live, seeded CMS page. Hold **Ctrl+Shift** to reveal
+ * the Edit toggle. Editing is on the page: text is edited in place, a floating
+ * 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;
@@ -30,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;
@@ -42,6 +87,36 @@ interface InspectorProps {
 /** Contextual property editor for the selected node. Every change is one op. */
 declare function Inspector({ doc, selection, apply }: InspectorProps): ReactElement;
 
+interface NodeInspectorProps {
+    node: Node;
+    /** The currently-applied transform for this node (sampled from the active keyframe). */
+    transform: NodeTransform;
+    /** Live measured size, used as the placeholder when width/height are still "auto". */
+    measured: {
+        w: number;
+        h: number;
+    };
+    /** Patch the node's props (commits through the op-spine → undoable). */
+    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;
+    onClose: () => void;
+}
+/**
+ * The on-page element Inspector — a docked properties panel shown while a node
+ * is selected in EditMode. Where the floating toolbar handles quick text tweaks,
+ * this is the full surface: content, element-specific props (a button's label /
+ * link / variant, an image's src / alt, …), exact position + size, and the style
+ * 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, onLayout, 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
@@ -86,4 +161,4 @@ interface EditorApi {
 }
 declare function useEditor(initialDoc: PageDoc): EditorApi;
 
-export { Canvas, type CanvasProps, Editor, type EditorAction, type EditorApi, type EditorProps, type EditorState, Inspector, type InspectorProps, LayersPanel, type LayersPanelProps, editorReduce, initEditor, useEditor };
+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 };

package/dist/editor.d.ts

@@ -1,6 +1,7 @@
-import { ReactElement } from 'react';
-import { P as PageDoc } from './types-DKCl14aV.js';
-import { P as PageOp } from './ops-CJenUAsy.js';
+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 { P as PageOp } from './ops-BsM6kZxY.js';
 
 interface EditorProps {
     /** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
@@ -13,6 +14,48 @@ interface EditorProps {
  */
 declare function Editor({ defaultValue, onChange }: EditorProps): ReactElement;
 
+/** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */
+interface NodeTransform {
+    x?: number;
+    y?: number;
+    scale?: number;
+    opacity?: number;
+    rotate?: number;
+    /** Explicit size in px (a true resize, distinct from `scale`). Absent = auto. */
+    w?: number;
+    h?: number;
+}
+interface EditablePageProps {
+    doc: PageDoc;
+    registry?: ElementRegistry;
+    /** 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). */
+    transforms?: Record<string, NodeTransform>;
+    /** Fired when the user moves/resizes a node — the host writes it into the current keyframe. */
+    onNodeTransform?: (id: string, transform: NodeTransform) => void;
+    /** Notifies the host of the current selection (e.g. to sync the timeline). */
+    onSelect?: (id: string | null) => void;
+    /** Scroll length in viewports — the page becomes a tall scroll canvas (extend via the timeline). */
+    frames?: number;
+    /** Scroll progress 0..1 (scroll = the timeline playhead). The host maps it to transforms. */
+    onProgress?: (progress: number) => void;
+    /**
+     * Pin the page into a scroll canvas (the `frames`×viewport spacer + sticky pin
+     * that turns scroll into the playhead). Default `true`. Set **false** for a
+     * full multi-section page that should scroll naturally — animation is then
+     * driven by the dock scrub + Play preview instead of raw scroll.
+     */
+    pinned?: boolean;
+}
+/**
+ * Inline EditMode over a live, seeded CMS page. Hold **Ctrl+Shift** to reveal
+ * the Edit toggle. Editing is on the page: text is edited in place, a floating
+ * 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;
@@ -30,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;
@@ -42,6 +87,36 @@ interface InspectorProps {
 /** Contextual property editor for the selected node. Every change is one op. */
 declare function Inspector({ doc, selection, apply }: InspectorProps): ReactElement;
 
+interface NodeInspectorProps {
+    node: Node;
+    /** The currently-applied transform for this node (sampled from the active keyframe). */
+    transform: NodeTransform;
+    /** Live measured size, used as the placeholder when width/height are still "auto". */
+    measured: {
+        w: number;
+        h: number;
+    };
+    /** Patch the node's props (commits through the op-spine → undoable). */
+    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;
+    onClose: () => void;
+}
+/**
+ * The on-page element Inspector — a docked properties panel shown while a node
+ * is selected in EditMode. Where the floating toolbar handles quick text tweaks,
+ * this is the full surface: content, element-specific props (a button's label /
+ * link / variant, an image's src / alt, …), exact position + size, and the style
+ * 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, onLayout, 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
@@ -86,4 +161,4 @@ interface EditorApi {
 }
 declare function useEditor(initialDoc: PageDoc): EditorApi;
 
-export { Canvas, type CanvasProps, Editor, type EditorAction, type EditorApi, type EditorProps, type EditorState, Inspector, type InspectorProps, LayersPanel, type LayersPanelProps, editorReduce, initEditor, useEditor };
+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 };