@particle-academy/fancy-cms-ui 0.0.1-dev.6 → 0.0.1-dev.7

package/dist/editor.d.cts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { P as PageDoc } from './types-CpfPEq3V.cjs';
+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';
 
@@ -20,6 +20,10 @@ interface NodeTransform {
     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;
@@ -36,6 +40,13 @@ interface EditablePageProps {
     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
@@ -43,7 +54,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, }: EditablePageProps): ReactElement;
+declare function EditablePage({ doc, registry, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
 
 interface CanvasProps {
     doc: PageDoc;
@@ -74,6 +85,34 @@ 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;
+    /** 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, 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
@@ -118,4 +157,4 @@ interface EditorApi {
 }
 declare function useEditor(initialDoc: PageDoc): EditorApi;
 
-export { Canvas, type CanvasProps, EditablePage, type EditablePageProps, 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,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { P as PageDoc } from './types-CpfPEq3V.js';
+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';
 
@@ -20,6 +20,10 @@ interface NodeTransform {
     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;
@@ -36,6 +40,13 @@ interface EditablePageProps {
     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
@@ -43,7 +54,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, }: EditablePageProps): ReactElement;
+declare function EditablePage({ doc, registry, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
 
 interface CanvasProps {
     doc: PageDoc;
@@ -74,6 +85,34 @@ 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;
+    /** 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, 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
@@ -118,4 +157,4 @@ interface EditorApi {
 }
 declare function useEditor(initialDoc: PageDoc): EditorApi;
 
-export { Canvas, type CanvasProps, EditablePage, type EditablePageProps, 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 };