@particle-academy/fancy-cms-ui 0.0.1-dev.9 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -0
- package/dist/chunk-524NYOHK.js +450 -0
- package/dist/chunk-524NYOHK.js.map +1 -0
- package/dist/{chunk-3YZMELJJ.js → chunk-GOXVGEKU.js} +94 -3
- package/dist/chunk-GOXVGEKU.js.map +1 -0
- package/dist/chunk-QYNWSECG.js +19 -0
- package/dist/chunk-QYNWSECG.js.map +1 -0
- package/dist/editor.cjs +338 -60
- package/dist/editor.cjs.map +1 -1
- package/dist/editor.d.cts +7 -92
- package/dist/editor.d.ts +7 -92
- package/dist/editor.js +318 -459
- package/dist/editor.js.map +1 -1
- package/dist/index.cjs +516 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.js +3 -2
- package/dist/react.cjs +45 -25
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +13 -6
- package/dist/react.d.ts +13 -6
- package/dist/react.js +2 -19
- package/dist/react.js.map +1 -1
- package/dist/{types-CpfPEq3V.d.cts → registry-D5y5IgCR.d.cts} +30 -1
- package/dist/{types-CpfPEq3V.d.ts → registry-D5y5IgCR.d.ts} +30 -1
- package/dist/useEditor-DLH7hU6G.d.cts +162 -0
- package/dist/useEditor-qmF9n2e6.d.ts +162 -0
- package/package.json +7 -6
- package/dist/chunk-3YZMELJJ.js.map +0 -1
- package/dist/chunk-7YYLYBLI.js +0 -47
- package/dist/chunk-7YYLYBLI.js.map +0 -1
- package/dist/chunk-ZV7CV54P.js +0 -78
- package/dist/chunk-ZV7CV54P.js.map +0 -1
- package/dist/ops-BsM6kZxY.d.ts +0 -75
- package/dist/ops-CdBZarAT.d.cts +0 -75
- package/dist/registry-Bk7GN1rA.d.cts +0 -19
- package/dist/registry-Dht9JBLU.d.ts +0 -19
package/dist/editor.d.cts
CHANGED
|
@@ -1,18 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { P as PageOp } from './ops-CdBZarAT.cjs';
|
|
5
|
-
|
|
6
|
-
interface EditorProps {
|
|
7
|
-
/** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
|
|
8
|
-
defaultValue: PageDoc;
|
|
9
|
-
onChange?: (doc: PageDoc) => void;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* The fancy-cms editor: layers · canvas · inspector over the op-spine. Phase 1
|
|
13
|
-
* cut — chrome is plain markup for now; it graduates to react-fancy next.
|
|
14
|
-
*/
|
|
15
|
-
declare function Editor({ defaultValue, onChange }: EditorProps): ReactElement;
|
|
1
|
+
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';
|
|
2
|
+
import { ReactNode, ReactElement } from 'react';
|
|
3
|
+
import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, p as StyleProps, L as LayoutMode } from './registry-D5y5IgCR.cjs';
|
|
16
4
|
|
|
17
5
|
/** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */
|
|
18
6
|
interface NodeTransform {
|
|
@@ -28,6 +16,8 @@ interface NodeTransform {
|
|
|
28
16
|
interface EditablePageProps {
|
|
29
17
|
doc: PageDoc;
|
|
30
18
|
registry?: ElementRegistry;
|
|
19
|
+
/** Data context for `{ $bind }` props + repeaters (server props, etc.). */
|
|
20
|
+
data?: DataContext;
|
|
31
21
|
/** Slot for the fancy-motion timeline dock (rendered at the bottom in EditMode). */
|
|
32
22
|
timelineDock?: ReactNode;
|
|
33
23
|
/** Per-node transforms applied to the page (e.g. the sampled keyframe snapshot). */
|
|
@@ -54,38 +44,7 @@ interface EditablePageProps {
|
|
|
54
44
|
* toolbar styles it, and the selection can be **dragged to move** / **resized**
|
|
55
45
|
* — committed as transforms the host captures into a timeline keyframe.
|
|
56
46
|
*/
|
|
57
|
-
declare function EditablePage({ doc, registry, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
|
|
58
|
-
|
|
59
|
-
interface CanvasProps {
|
|
60
|
-
doc: PageDoc;
|
|
61
|
-
selection: string | null;
|
|
62
|
-
onSelect: (id: string | null) => void;
|
|
63
|
-
apply: (op: PageOp) => void;
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* The edit surface: renders the live page and overlays a selection box. Click to
|
|
67
|
-
* select; drag the box to move (px constraints). Phase 1 cut: free-parent
|
|
68
|
-
* move + resize handles, stack/grid reordering, and snapping come next.
|
|
69
|
-
*/
|
|
70
|
-
declare function Canvas({ doc, selection, onSelect, apply }: CanvasProps): ReactElement;
|
|
71
|
-
|
|
72
|
-
interface LayersPanelProps {
|
|
73
|
-
doc: PageDoc;
|
|
74
|
-
selection: string | null;
|
|
75
|
-
onSelect: (id: string) => void;
|
|
76
|
-
/** Reparent/reorder a node (drag-to-reorder). Omit to disable dragging. */
|
|
77
|
-
onMove?: (id: NodeId, parent: NodeId | null, order: string) => void;
|
|
78
|
-
}
|
|
79
|
-
/** The section/layer tree. Click a row to select; drag a row onto another to reorder. */
|
|
80
|
-
declare function LayersPanel({ doc, selection, onSelect, onMove }: LayersPanelProps): ReactElement;
|
|
81
|
-
|
|
82
|
-
interface InspectorProps {
|
|
83
|
-
doc: PageDoc;
|
|
84
|
-
selection: string | null;
|
|
85
|
-
apply: (op: PageOp) => void;
|
|
86
|
-
}
|
|
87
|
-
/** Contextual property editor for the selected node. Every change is one op. */
|
|
88
|
-
declare function Inspector({ doc, selection, apply }: InspectorProps): ReactElement;
|
|
47
|
+
declare function EditablePage({ doc, registry, data, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
|
|
89
48
|
|
|
90
49
|
interface NodeInspectorProps {
|
|
91
50
|
node: Node;
|
|
@@ -117,48 +76,4 @@ interface NodeInspectorProps {
|
|
|
117
76
|
*/
|
|
118
77
|
declare function NodeInspector({ node, transform, measured, onProps, onStyle, onLayout, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
|
|
119
78
|
|
|
120
|
-
|
|
121
|
-
* Editor state engine — pure and framework-agnostic so it's unit-testable.
|
|
122
|
-
* `useEditor` wraps this with `useReducer`. Undo/redo uses document snapshots
|
|
123
|
-
* (simple + robust); the op-level `invert` in the spine is for collab/op-stream
|
|
124
|
-
* undo.
|
|
125
|
-
*/
|
|
126
|
-
|
|
127
|
-
interface EditorState {
|
|
128
|
-
doc: PageDoc;
|
|
129
|
-
past: PageDoc[];
|
|
130
|
-
future: PageDoc[];
|
|
131
|
-
selection: string | null;
|
|
132
|
-
}
|
|
133
|
-
type EditorAction = {
|
|
134
|
-
type: "apply";
|
|
135
|
-
op: PageOp;
|
|
136
|
-
} | {
|
|
137
|
-
type: "undo";
|
|
138
|
-
} | {
|
|
139
|
-
type: "redo";
|
|
140
|
-
} | {
|
|
141
|
-
type: "select";
|
|
142
|
-
id: string | null;
|
|
143
|
-
} | {
|
|
144
|
-
type: "replace";
|
|
145
|
-
doc: PageDoc;
|
|
146
|
-
};
|
|
147
|
-
declare function initEditor(doc: PageDoc): EditorState;
|
|
148
|
-
declare function editorReduce(state: EditorState, action: EditorAction): EditorState;
|
|
149
|
-
|
|
150
|
-
interface EditorApi {
|
|
151
|
-
state: EditorState;
|
|
152
|
-
/** Dispatch a mutation through the op-spine (records an undo snapshot). */
|
|
153
|
-
apply: (op: PageOp) => void;
|
|
154
|
-
undo: () => void;
|
|
155
|
-
redo: () => void;
|
|
156
|
-
select: (id: string | null) => void;
|
|
157
|
-
/** Replace the document wholesale (e.g. a controlled `value` change). */
|
|
158
|
-
replace: (doc: PageDoc) => void;
|
|
159
|
-
canUndo: boolean;
|
|
160
|
-
canRedo: boolean;
|
|
161
|
-
}
|
|
162
|
-
declare function useEditor(initialDoc: PageDoc): EditorApi;
|
|
163
|
-
|
|
164
|
-
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 };
|
|
79
|
+
export { EditablePage, type EditablePageProps, NodeInspector, type NodeInspectorProps };
|
package/dist/editor.d.ts
CHANGED
|
@@ -1,18 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { P as PageOp } from './ops-BsM6kZxY.js';
|
|
5
|
-
|
|
6
|
-
interface EditorProps {
|
|
7
|
-
/** Initial document; edits are surfaced via {@link EditorProps.onChange}. */
|
|
8
|
-
defaultValue: PageDoc;
|
|
9
|
-
onChange?: (doc: PageDoc) => void;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* The fancy-cms editor: layers · canvas · inspector over the op-spine. Phase 1
|
|
13
|
-
* cut — chrome is plain markup for now; it graduates to react-fancy next.
|
|
14
|
-
*/
|
|
15
|
-
declare function Editor({ defaultValue, onChange }: EditorProps): ReactElement;
|
|
1
|
+
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';
|
|
2
|
+
import { ReactNode, ReactElement } from 'react';
|
|
3
|
+
import { P as PageDoc, h as ElementRegistry, g as DataContext, N as Node, p as StyleProps, L as LayoutMode } from './registry-D5y5IgCR.js';
|
|
16
4
|
|
|
17
5
|
/** Animatable per-node transform (mirrors fancy-motion's NodeState, kept local to avoid a hard dep). */
|
|
18
6
|
interface NodeTransform {
|
|
@@ -28,6 +16,8 @@ interface NodeTransform {
|
|
|
28
16
|
interface EditablePageProps {
|
|
29
17
|
doc: PageDoc;
|
|
30
18
|
registry?: ElementRegistry;
|
|
19
|
+
/** Data context for `{ $bind }` props + repeaters (server props, etc.). */
|
|
20
|
+
data?: DataContext;
|
|
31
21
|
/** Slot for the fancy-motion timeline dock (rendered at the bottom in EditMode). */
|
|
32
22
|
timelineDock?: ReactNode;
|
|
33
23
|
/** Per-node transforms applied to the page (e.g. the sampled keyframe snapshot). */
|
|
@@ -54,38 +44,7 @@ interface EditablePageProps {
|
|
|
54
44
|
* toolbar styles it, and the selection can be **dragged to move** / **resized**
|
|
55
45
|
* — committed as transforms the host captures into a timeline keyframe.
|
|
56
46
|
*/
|
|
57
|
-
declare function EditablePage({ doc, registry, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
|
|
58
|
-
|
|
59
|
-
interface CanvasProps {
|
|
60
|
-
doc: PageDoc;
|
|
61
|
-
selection: string | null;
|
|
62
|
-
onSelect: (id: string | null) => void;
|
|
63
|
-
apply: (op: PageOp) => void;
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* The edit surface: renders the live page and overlays a selection box. Click to
|
|
67
|
-
* select; drag the box to move (px constraints). Phase 1 cut: free-parent
|
|
68
|
-
* move + resize handles, stack/grid reordering, and snapping come next.
|
|
69
|
-
*/
|
|
70
|
-
declare function Canvas({ doc, selection, onSelect, apply }: CanvasProps): ReactElement;
|
|
71
|
-
|
|
72
|
-
interface LayersPanelProps {
|
|
73
|
-
doc: PageDoc;
|
|
74
|
-
selection: string | null;
|
|
75
|
-
onSelect: (id: string) => void;
|
|
76
|
-
/** Reparent/reorder a node (drag-to-reorder). Omit to disable dragging. */
|
|
77
|
-
onMove?: (id: NodeId, parent: NodeId | null, order: string) => void;
|
|
78
|
-
}
|
|
79
|
-
/** The section/layer tree. Click a row to select; drag a row onto another to reorder. */
|
|
80
|
-
declare function LayersPanel({ doc, selection, onSelect, onMove }: LayersPanelProps): ReactElement;
|
|
81
|
-
|
|
82
|
-
interface InspectorProps {
|
|
83
|
-
doc: PageDoc;
|
|
84
|
-
selection: string | null;
|
|
85
|
-
apply: (op: PageOp) => void;
|
|
86
|
-
}
|
|
87
|
-
/** Contextual property editor for the selected node. Every change is one op. */
|
|
88
|
-
declare function Inspector({ doc, selection, apply }: InspectorProps): ReactElement;
|
|
47
|
+
declare function EditablePage({ doc, registry, data, timelineDock, transforms, onNodeTransform, onSelect, frames, onProgress, pinned, }: EditablePageProps): ReactElement;
|
|
89
48
|
|
|
90
49
|
interface NodeInspectorProps {
|
|
91
50
|
node: Node;
|
|
@@ -117,48 +76,4 @@ interface NodeInspectorProps {
|
|
|
117
76
|
*/
|
|
118
77
|
declare function NodeInspector({ node, transform, measured, onProps, onStyle, onLayout, onTransform, onRemove, onClose, }: NodeInspectorProps): ReactElement;
|
|
119
78
|
|
|
120
|
-
|
|
121
|
-
* Editor state engine — pure and framework-agnostic so it's unit-testable.
|
|
122
|
-
* `useEditor` wraps this with `useReducer`. Undo/redo uses document snapshots
|
|
123
|
-
* (simple + robust); the op-level `invert` in the spine is for collab/op-stream
|
|
124
|
-
* undo.
|
|
125
|
-
*/
|
|
126
|
-
|
|
127
|
-
interface EditorState {
|
|
128
|
-
doc: PageDoc;
|
|
129
|
-
past: PageDoc[];
|
|
130
|
-
future: PageDoc[];
|
|
131
|
-
selection: string | null;
|
|
132
|
-
}
|
|
133
|
-
type EditorAction = {
|
|
134
|
-
type: "apply";
|
|
135
|
-
op: PageOp;
|
|
136
|
-
} | {
|
|
137
|
-
type: "undo";
|
|
138
|
-
} | {
|
|
139
|
-
type: "redo";
|
|
140
|
-
} | {
|
|
141
|
-
type: "select";
|
|
142
|
-
id: string | null;
|
|
143
|
-
} | {
|
|
144
|
-
type: "replace";
|
|
145
|
-
doc: PageDoc;
|
|
146
|
-
};
|
|
147
|
-
declare function initEditor(doc: PageDoc): EditorState;
|
|
148
|
-
declare function editorReduce(state: EditorState, action: EditorAction): EditorState;
|
|
149
|
-
|
|
150
|
-
interface EditorApi {
|
|
151
|
-
state: EditorState;
|
|
152
|
-
/** Dispatch a mutation through the op-spine (records an undo snapshot). */
|
|
153
|
-
apply: (op: PageOp) => void;
|
|
154
|
-
undo: () => void;
|
|
155
|
-
redo: () => void;
|
|
156
|
-
select: (id: string | null) => void;
|
|
157
|
-
/** Replace the document wholesale (e.g. a controlled `value` change). */
|
|
158
|
-
replace: (doc: PageDoc) => void;
|
|
159
|
-
canUndo: boolean;
|
|
160
|
-
canRedo: boolean;
|
|
161
|
-
}
|
|
162
|
-
declare function useEditor(initialDoc: PageDoc): EditorApi;
|
|
163
|
-
|
|
164
|
-
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 };
|
|
79
|
+
export { EditablePage, type EditablePageProps, NodeInspector, type NodeInspectorProps };
|