@01.software/sdk 0.4.3-dev.1774345071046 → 0.4.3-dev.1774352883356
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 +13 -13
- package/dist/index.cjs +7 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +21 -12
- package/dist/index.d.ts +21 -12
- package/dist/index.js +7 -7
- package/dist/index.js.map +1 -1
- package/dist/realtime.cjs.map +1 -1
- package/dist/realtime.js.map +1 -1
- package/dist/server-B80o7igg.d.cts +242 -0
- package/dist/server-B80o7igg.d.ts +242 -0
- package/dist/ui/flow/server.cjs +233 -0
- package/dist/ui/flow/server.cjs.map +1 -0
- package/dist/ui/flow/server.d.cts +3 -0
- package/dist/ui/flow/server.d.ts +3 -0
- package/dist/ui/flow/server.js +213 -0
- package/dist/ui/flow/server.js.map +1 -0
- package/dist/ui/flow.cjs +38 -36
- package/dist/ui/flow.cjs.map +1 -1
- package/dist/ui/flow.d.cts +5 -243
- package/dist/ui/flow.d.ts +5 -243
- package/dist/ui/flow.js +38 -36
- package/dist/ui/flow.js.map +1 -1
- package/package.json +11 -1
package/dist/ui/flow.d.cts
CHANGED
|
@@ -1,212 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { N as NodeTypeDef, E as EdgeTypeDef, C as CanvasData, F as FlowNode, D as DynamicNodeSlotProps, a as FlowEdge, b as FrameNodeSlotProps, c as EdgeSlotProps, d as NodeWrapperSlotProps, e as FlowViewport, f as FlowBounds } from '../server-B80o7igg.cjs';
|
|
2
|
+
export { i as DynamicNodeData, h as FlowNodeData, g as FlowNodePosition, s as FrameData, j as FrameNodeData, k as NodeTypeFieldDef, P as PrefetchFlowOptions, S as SDKClient, U as UseFlowOptions, n as UseFlowResult, r as getFrameData, q as getFrames, o as getNodeBounds, l as isDynamicNode, m as isFrameNode, p as prefetchFlow, u as useFlow } from '../server-B80o7igg.cjs';
|
|
3
3
|
import { Edge } from '@xyflow/react';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
nodeTypeSlug: string;
|
|
7
|
-
label: string;
|
|
8
|
-
fields: Record<string, unknown>;
|
|
9
|
-
}
|
|
10
|
-
type FlowNodeData = (DynamicNodeData | FrameNodeData) & Record<string, unknown>;
|
|
11
|
-
interface FlowNodePosition {
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
}
|
|
15
|
-
interface FlowNode {
|
|
16
|
-
id: string;
|
|
17
|
-
type?: string;
|
|
18
|
-
position: FlowNodePosition;
|
|
19
|
-
data: FlowNodeData;
|
|
20
|
-
parentId?: string;
|
|
21
|
-
style?: React.CSSProperties;
|
|
22
|
-
width?: number;
|
|
23
|
-
height?: number;
|
|
24
|
-
measured?: {
|
|
25
|
-
width?: number;
|
|
26
|
-
height?: number;
|
|
27
|
-
};
|
|
28
|
-
draggable?: boolean;
|
|
29
|
-
selectable?: boolean;
|
|
30
|
-
[key: string]: unknown;
|
|
31
|
-
}
|
|
32
|
-
interface FlowEdge {
|
|
33
|
-
id: string;
|
|
34
|
-
source: string;
|
|
35
|
-
target: string;
|
|
36
|
-
sourceHandle?: string | null;
|
|
37
|
-
targetHandle?: string | null;
|
|
38
|
-
type?: string;
|
|
39
|
-
style?: React.CSSProperties;
|
|
40
|
-
animated?: boolean;
|
|
41
|
-
markerStart?: unknown;
|
|
42
|
-
markerEnd?: unknown;
|
|
43
|
-
edgeTypeSlug?: string;
|
|
44
|
-
fields?: Record<string, unknown>;
|
|
45
|
-
[key: string]: unknown;
|
|
46
|
-
}
|
|
47
|
-
interface FlowViewport {
|
|
48
|
-
x: number;
|
|
49
|
-
y: number;
|
|
50
|
-
zoom: number;
|
|
51
|
-
}
|
|
52
|
-
interface CanvasData {
|
|
53
|
-
nodes: FlowNode[];
|
|
54
|
-
edges: FlowEdge[];
|
|
55
|
-
viewport: FlowViewport;
|
|
56
|
-
}
|
|
57
|
-
interface NodeTypeFieldDef {
|
|
58
|
-
name: string;
|
|
59
|
-
label: string;
|
|
60
|
-
fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle';
|
|
61
|
-
options?: {
|
|
62
|
-
label: string;
|
|
63
|
-
value: string;
|
|
64
|
-
}[];
|
|
65
|
-
defaultValue?: string;
|
|
66
|
-
required?: boolean;
|
|
67
|
-
}
|
|
68
|
-
interface NodeTypeDef {
|
|
69
|
-
slug: string;
|
|
70
|
-
name: string;
|
|
71
|
-
color: string;
|
|
72
|
-
defaultSize: {
|
|
73
|
-
width: number;
|
|
74
|
-
height: number;
|
|
75
|
-
};
|
|
76
|
-
fields: NodeTypeFieldDef[];
|
|
77
|
-
transparentBackground?: boolean;
|
|
78
|
-
template?: string | null;
|
|
79
|
-
customCSS?: string | null;
|
|
80
|
-
}
|
|
81
|
-
interface EdgeTypeDef {
|
|
82
|
-
slug: string;
|
|
83
|
-
name: string;
|
|
84
|
-
color: string;
|
|
85
|
-
strokeWidth: number;
|
|
86
|
-
animated: boolean;
|
|
87
|
-
lineStyle: string;
|
|
88
|
-
markerStart: string;
|
|
89
|
-
markerEnd: string;
|
|
90
|
-
fields: NodeTypeFieldDef[];
|
|
91
|
-
}
|
|
92
|
-
declare function isDynamicNode(node: FlowNode): node is FlowNode & {
|
|
93
|
-
data: DynamicNodeData;
|
|
94
|
-
};
|
|
95
|
-
declare function isFrameNode(node: FlowNode): node is FlowNode & {
|
|
96
|
-
data: FrameNodeData;
|
|
97
|
-
};
|
|
98
|
-
interface DynamicNodeSlotProps {
|
|
99
|
-
id: string;
|
|
100
|
-
nodeTypeSlug: string;
|
|
101
|
-
label: string;
|
|
102
|
-
fields: Record<string, unknown>;
|
|
103
|
-
nodeTypeDef?: NodeTypeDef;
|
|
104
|
-
/** Whether this node is currently selected */
|
|
105
|
-
selected?: boolean;
|
|
106
|
-
/** Measured node width (undefined before first measurement) */
|
|
107
|
-
width?: number;
|
|
108
|
-
/** Measured node height (undefined before first measurement) */
|
|
109
|
-
height?: number;
|
|
110
|
-
/** The default rendering (template or field-based). Allows custom renderers to wrap/extend instead of replacing entirely. */
|
|
111
|
-
defaultRender?: React.ReactElement;
|
|
112
|
-
}
|
|
113
|
-
interface FrameNodeData {
|
|
114
|
-
label: string;
|
|
115
|
-
color?: string;
|
|
116
|
-
padding?: number;
|
|
117
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
118
|
-
opacity?: number;
|
|
119
|
-
}
|
|
120
|
-
interface FrameNodeSlotProps {
|
|
121
|
-
id: string;
|
|
122
|
-
label: string;
|
|
123
|
-
color?: string;
|
|
124
|
-
padding?: number;
|
|
125
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
126
|
-
opacity?: number;
|
|
127
|
-
width?: number;
|
|
128
|
-
height?: number;
|
|
129
|
-
children?: React.ReactNode;
|
|
130
|
-
}
|
|
131
|
-
interface EdgeSlotProps {
|
|
132
|
-
id: string;
|
|
133
|
-
edgeTypeSlug?: string;
|
|
134
|
-
source: string;
|
|
135
|
-
target: string;
|
|
136
|
-
label?: string;
|
|
137
|
-
fields?: Record<string, unknown>;
|
|
138
|
-
edgeTypeDef?: EdgeTypeDef;
|
|
139
|
-
style?: React.CSSProperties;
|
|
140
|
-
}
|
|
141
|
-
interface NodeWrapperSlotProps {
|
|
142
|
-
id: string;
|
|
143
|
-
nodeTypeSlug: string;
|
|
144
|
-
label: string;
|
|
145
|
-
selected?: boolean;
|
|
146
|
-
nodeTypeDef?: NodeTypeDef;
|
|
147
|
-
children: React.ReactNode;
|
|
148
|
-
}
|
|
149
|
-
interface FlowBounds {
|
|
150
|
-
x: number;
|
|
151
|
-
y: number;
|
|
152
|
-
width: number;
|
|
153
|
-
height: number;
|
|
154
|
-
}
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import '@tanstack/react-query';
|
|
155
6
|
|
|
156
7
|
declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
|
|
157
8
|
|
|
158
9
|
declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
|
|
159
10
|
|
|
160
|
-
type FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types';
|
|
161
|
-
type AnyFn = (...args: any[]) => any;
|
|
162
|
-
interface SDKClient {
|
|
163
|
-
from(collection: FlowCollection): {
|
|
164
|
-
find: AnyFn;
|
|
165
|
-
findById: AnyFn;
|
|
166
|
-
};
|
|
167
|
-
queryClient: QueryClient;
|
|
168
|
-
}
|
|
169
|
-
interface UseFlowOptions {
|
|
170
|
-
/** SDK client instance (BrowserClient or ServerClient) */
|
|
171
|
-
client: SDKClient;
|
|
172
|
-
/** Flow slug (URL-friendly identifier) */
|
|
173
|
-
slug?: string;
|
|
174
|
-
/** Flow document ID (UUID) */
|
|
175
|
-
id?: string;
|
|
176
|
-
/** Enable/disable data fetching (default: true) */
|
|
177
|
-
enabled?: boolean;
|
|
178
|
-
}
|
|
179
|
-
interface UseFlowResult {
|
|
180
|
-
data: CanvasData | undefined;
|
|
181
|
-
nodeTypeDefs: NodeTypeDef[];
|
|
182
|
-
edgeTypeDefs: EdgeTypeDef[];
|
|
183
|
-
flow: Record<string, unknown> | undefined;
|
|
184
|
-
isLoading: boolean;
|
|
185
|
-
error: Error | null;
|
|
186
|
-
}
|
|
187
|
-
interface PrefetchFlowOptions {
|
|
188
|
-
/** SDK client instance (BrowserClient or ServerClient) */
|
|
189
|
-
client: SDKClient;
|
|
190
|
-
/** Flow slug (URL-friendly identifier) */
|
|
191
|
-
slug?: string;
|
|
192
|
-
/** Flow document ID (UUID) */
|
|
193
|
-
id?: string;
|
|
194
|
-
}
|
|
195
|
-
/**
|
|
196
|
-
* Prefetch flow data into the query cache.
|
|
197
|
-
* Call in route loaders to eliminate loading states on mount.
|
|
198
|
-
*
|
|
199
|
-
* ```ts
|
|
200
|
-
* // React Router loader
|
|
201
|
-
* export async function loader() {
|
|
202
|
-
* await prefetchFlow({ client, slug: 'Home' })
|
|
203
|
-
* return null
|
|
204
|
-
* }
|
|
205
|
-
* ```
|
|
206
|
-
*/
|
|
207
|
-
declare function prefetchFlow(options: PrefetchFlowOptions): Promise<void>;
|
|
208
|
-
declare function useFlow(options: UseFlowOptions): UseFlowResult;
|
|
209
|
-
|
|
210
11
|
interface UseFlowDataOptions {
|
|
211
12
|
/** Canvas data from Flow document's `canvas` field */
|
|
212
13
|
data: CanvasData | undefined;
|
|
@@ -232,45 +33,6 @@ interface UseFlowDataResult {
|
|
|
232
33
|
*/
|
|
233
34
|
declare function useFlowData(options: UseFlowDataOptions): UseFlowDataResult;
|
|
234
35
|
|
|
235
|
-
/**
|
|
236
|
-
* Calculate bounding box for given node IDs.
|
|
237
|
-
* Pure function — usable in SSR, server components, or outside React.
|
|
238
|
-
*/
|
|
239
|
-
declare function getNodeBounds(nodes: FlowNode[], nodeIds: string[]): FlowBounds | undefined;
|
|
240
|
-
/**
|
|
241
|
-
* Get all frame nodes with their bounds.
|
|
242
|
-
* Sorted by position (top-left to bottom-right).
|
|
243
|
-
*/
|
|
244
|
-
declare function getFrames(nodes: FlowNode[]): Array<{
|
|
245
|
-
id: string;
|
|
246
|
-
label: string;
|
|
247
|
-
bounds: FlowBounds;
|
|
248
|
-
}>;
|
|
249
|
-
/** Result of getFrameData — contains filtered canvas + dual bounds. */
|
|
250
|
-
interface FrameData {
|
|
251
|
-
/** Canvas data containing only the frame's descendants (nodes have draggable: false). */
|
|
252
|
-
data: CanvasData;
|
|
253
|
-
/** Bounding box of child content nodes — use for initial viewport fit (centering). */
|
|
254
|
-
fitBounds: FlowBounds;
|
|
255
|
-
/** Bounding box of the frame itself — use for panning/zoom restriction (clamp). */
|
|
256
|
-
clampBounds: FlowBounds;
|
|
257
|
-
/** @deprecated Use fitBounds instead. Alias for clampBounds for backward compatibility. */
|
|
258
|
-
bounds: FlowBounds;
|
|
259
|
-
}
|
|
260
|
-
/**
|
|
261
|
-
* Extract a frame's descendants and related edges from canvas data.
|
|
262
|
-
* Recursively collects all nested children (supports nested frames).
|
|
263
|
-
* Returns undefined if frameId is not found or is not a frame node.
|
|
264
|
-
*
|
|
265
|
-
* Child nodes are marked `draggable: false` to prevent interfering with canvas panning.
|
|
266
|
-
* The frame node itself is included (use `frameRenderer={() => null}` to hide it).
|
|
267
|
-
*
|
|
268
|
-
* Returns dual bounds:
|
|
269
|
-
* - `fitBounds`: child content bounding box (for centering the viewport)
|
|
270
|
-
* - `clampBounds`: frame area bounding box (for panning restriction)
|
|
271
|
-
*/
|
|
272
|
-
declare function getFrameData(data: CanvasData, frameId: string): FrameData | undefined;
|
|
273
|
-
|
|
274
36
|
interface CodeComponentProps {
|
|
275
37
|
fields: Record<string, unknown>;
|
|
276
38
|
label: string;
|
|
@@ -362,4 +124,4 @@ interface FlowRendererProps {
|
|
|
362
124
|
}
|
|
363
125
|
declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseLeave, onEdgeClick, frameRenderer, edgeRenderers, nodeWrapper, controls, minimap, minimapNodeColor, children, renderNode, onViewportChange, defaultViewport: defaultViewportProp, bounds, clampBounds, focusPadding, focusAnimation, focusMode, responsiveFit, translateExtent: translateExtentProp, minZoom: minZoomProp, maxZoom: maxZoomProp, }: FlowRendererProps): React.JSX.Element | null;
|
|
364
126
|
|
|
365
|
-
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES,
|
|
127
|
+
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, CanvasData, type CodeComponentProps, DynamicNodeSlotProps, EdgeSlotProps, EdgeTypeDef, FlowBounds, FlowEdge, FlowNode, FlowRenderer, type FlowRendererProps, FlowViewport, FrameNodeSlotProps, NodeTypeDef, NodeWrapperSlotProps, type UseFlowDataOptions, type UseFlowDataResult, clearTemplateCache, compileTemplate, useFlowData };
|
package/dist/ui/flow.d.ts
CHANGED
|
@@ -1,212 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { N as NodeTypeDef, E as EdgeTypeDef, C as CanvasData, F as FlowNode, D as DynamicNodeSlotProps, a as FlowEdge, b as FrameNodeSlotProps, c as EdgeSlotProps, d as NodeWrapperSlotProps, e as FlowViewport, f as FlowBounds } from '../server-B80o7igg.js';
|
|
2
|
+
export { i as DynamicNodeData, h as FlowNodeData, g as FlowNodePosition, s as FrameData, j as FrameNodeData, k as NodeTypeFieldDef, P as PrefetchFlowOptions, S as SDKClient, U as UseFlowOptions, n as UseFlowResult, r as getFrameData, q as getFrames, o as getNodeBounds, l as isDynamicNode, m as isFrameNode, p as prefetchFlow, u as useFlow } from '../server-B80o7igg.js';
|
|
3
3
|
import { Edge } from '@xyflow/react';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
nodeTypeSlug: string;
|
|
7
|
-
label: string;
|
|
8
|
-
fields: Record<string, unknown>;
|
|
9
|
-
}
|
|
10
|
-
type FlowNodeData = (DynamicNodeData | FrameNodeData) & Record<string, unknown>;
|
|
11
|
-
interface FlowNodePosition {
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
}
|
|
15
|
-
interface FlowNode {
|
|
16
|
-
id: string;
|
|
17
|
-
type?: string;
|
|
18
|
-
position: FlowNodePosition;
|
|
19
|
-
data: FlowNodeData;
|
|
20
|
-
parentId?: string;
|
|
21
|
-
style?: React.CSSProperties;
|
|
22
|
-
width?: number;
|
|
23
|
-
height?: number;
|
|
24
|
-
measured?: {
|
|
25
|
-
width?: number;
|
|
26
|
-
height?: number;
|
|
27
|
-
};
|
|
28
|
-
draggable?: boolean;
|
|
29
|
-
selectable?: boolean;
|
|
30
|
-
[key: string]: unknown;
|
|
31
|
-
}
|
|
32
|
-
interface FlowEdge {
|
|
33
|
-
id: string;
|
|
34
|
-
source: string;
|
|
35
|
-
target: string;
|
|
36
|
-
sourceHandle?: string | null;
|
|
37
|
-
targetHandle?: string | null;
|
|
38
|
-
type?: string;
|
|
39
|
-
style?: React.CSSProperties;
|
|
40
|
-
animated?: boolean;
|
|
41
|
-
markerStart?: unknown;
|
|
42
|
-
markerEnd?: unknown;
|
|
43
|
-
edgeTypeSlug?: string;
|
|
44
|
-
fields?: Record<string, unknown>;
|
|
45
|
-
[key: string]: unknown;
|
|
46
|
-
}
|
|
47
|
-
interface FlowViewport {
|
|
48
|
-
x: number;
|
|
49
|
-
y: number;
|
|
50
|
-
zoom: number;
|
|
51
|
-
}
|
|
52
|
-
interface CanvasData {
|
|
53
|
-
nodes: FlowNode[];
|
|
54
|
-
edges: FlowEdge[];
|
|
55
|
-
viewport: FlowViewport;
|
|
56
|
-
}
|
|
57
|
-
interface NodeTypeFieldDef {
|
|
58
|
-
name: string;
|
|
59
|
-
label: string;
|
|
60
|
-
fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle';
|
|
61
|
-
options?: {
|
|
62
|
-
label: string;
|
|
63
|
-
value: string;
|
|
64
|
-
}[];
|
|
65
|
-
defaultValue?: string;
|
|
66
|
-
required?: boolean;
|
|
67
|
-
}
|
|
68
|
-
interface NodeTypeDef {
|
|
69
|
-
slug: string;
|
|
70
|
-
name: string;
|
|
71
|
-
color: string;
|
|
72
|
-
defaultSize: {
|
|
73
|
-
width: number;
|
|
74
|
-
height: number;
|
|
75
|
-
};
|
|
76
|
-
fields: NodeTypeFieldDef[];
|
|
77
|
-
transparentBackground?: boolean;
|
|
78
|
-
template?: string | null;
|
|
79
|
-
customCSS?: string | null;
|
|
80
|
-
}
|
|
81
|
-
interface EdgeTypeDef {
|
|
82
|
-
slug: string;
|
|
83
|
-
name: string;
|
|
84
|
-
color: string;
|
|
85
|
-
strokeWidth: number;
|
|
86
|
-
animated: boolean;
|
|
87
|
-
lineStyle: string;
|
|
88
|
-
markerStart: string;
|
|
89
|
-
markerEnd: string;
|
|
90
|
-
fields: NodeTypeFieldDef[];
|
|
91
|
-
}
|
|
92
|
-
declare function isDynamicNode(node: FlowNode): node is FlowNode & {
|
|
93
|
-
data: DynamicNodeData;
|
|
94
|
-
};
|
|
95
|
-
declare function isFrameNode(node: FlowNode): node is FlowNode & {
|
|
96
|
-
data: FrameNodeData;
|
|
97
|
-
};
|
|
98
|
-
interface DynamicNodeSlotProps {
|
|
99
|
-
id: string;
|
|
100
|
-
nodeTypeSlug: string;
|
|
101
|
-
label: string;
|
|
102
|
-
fields: Record<string, unknown>;
|
|
103
|
-
nodeTypeDef?: NodeTypeDef;
|
|
104
|
-
/** Whether this node is currently selected */
|
|
105
|
-
selected?: boolean;
|
|
106
|
-
/** Measured node width (undefined before first measurement) */
|
|
107
|
-
width?: number;
|
|
108
|
-
/** Measured node height (undefined before first measurement) */
|
|
109
|
-
height?: number;
|
|
110
|
-
/** The default rendering (template or field-based). Allows custom renderers to wrap/extend instead of replacing entirely. */
|
|
111
|
-
defaultRender?: React.ReactElement;
|
|
112
|
-
}
|
|
113
|
-
interface FrameNodeData {
|
|
114
|
-
label: string;
|
|
115
|
-
color?: string;
|
|
116
|
-
padding?: number;
|
|
117
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
118
|
-
opacity?: number;
|
|
119
|
-
}
|
|
120
|
-
interface FrameNodeSlotProps {
|
|
121
|
-
id: string;
|
|
122
|
-
label: string;
|
|
123
|
-
color?: string;
|
|
124
|
-
padding?: number;
|
|
125
|
-
borderStyle?: 'dashed' | 'solid' | 'none';
|
|
126
|
-
opacity?: number;
|
|
127
|
-
width?: number;
|
|
128
|
-
height?: number;
|
|
129
|
-
children?: React.ReactNode;
|
|
130
|
-
}
|
|
131
|
-
interface EdgeSlotProps {
|
|
132
|
-
id: string;
|
|
133
|
-
edgeTypeSlug?: string;
|
|
134
|
-
source: string;
|
|
135
|
-
target: string;
|
|
136
|
-
label?: string;
|
|
137
|
-
fields?: Record<string, unknown>;
|
|
138
|
-
edgeTypeDef?: EdgeTypeDef;
|
|
139
|
-
style?: React.CSSProperties;
|
|
140
|
-
}
|
|
141
|
-
interface NodeWrapperSlotProps {
|
|
142
|
-
id: string;
|
|
143
|
-
nodeTypeSlug: string;
|
|
144
|
-
label: string;
|
|
145
|
-
selected?: boolean;
|
|
146
|
-
nodeTypeDef?: NodeTypeDef;
|
|
147
|
-
children: React.ReactNode;
|
|
148
|
-
}
|
|
149
|
-
interface FlowBounds {
|
|
150
|
-
x: number;
|
|
151
|
-
y: number;
|
|
152
|
-
width: number;
|
|
153
|
-
height: number;
|
|
154
|
-
}
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import '@tanstack/react-query';
|
|
155
6
|
|
|
156
7
|
declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
|
|
157
8
|
|
|
158
9
|
declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
|
|
159
10
|
|
|
160
|
-
type FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types';
|
|
161
|
-
type AnyFn = (...args: any[]) => any;
|
|
162
|
-
interface SDKClient {
|
|
163
|
-
from(collection: FlowCollection): {
|
|
164
|
-
find: AnyFn;
|
|
165
|
-
findById: AnyFn;
|
|
166
|
-
};
|
|
167
|
-
queryClient: QueryClient;
|
|
168
|
-
}
|
|
169
|
-
interface UseFlowOptions {
|
|
170
|
-
/** SDK client instance (BrowserClient or ServerClient) */
|
|
171
|
-
client: SDKClient;
|
|
172
|
-
/** Flow slug (URL-friendly identifier) */
|
|
173
|
-
slug?: string;
|
|
174
|
-
/** Flow document ID (UUID) */
|
|
175
|
-
id?: string;
|
|
176
|
-
/** Enable/disable data fetching (default: true) */
|
|
177
|
-
enabled?: boolean;
|
|
178
|
-
}
|
|
179
|
-
interface UseFlowResult {
|
|
180
|
-
data: CanvasData | undefined;
|
|
181
|
-
nodeTypeDefs: NodeTypeDef[];
|
|
182
|
-
edgeTypeDefs: EdgeTypeDef[];
|
|
183
|
-
flow: Record<string, unknown> | undefined;
|
|
184
|
-
isLoading: boolean;
|
|
185
|
-
error: Error | null;
|
|
186
|
-
}
|
|
187
|
-
interface PrefetchFlowOptions {
|
|
188
|
-
/** SDK client instance (BrowserClient or ServerClient) */
|
|
189
|
-
client: SDKClient;
|
|
190
|
-
/** Flow slug (URL-friendly identifier) */
|
|
191
|
-
slug?: string;
|
|
192
|
-
/** Flow document ID (UUID) */
|
|
193
|
-
id?: string;
|
|
194
|
-
}
|
|
195
|
-
/**
|
|
196
|
-
* Prefetch flow data into the query cache.
|
|
197
|
-
* Call in route loaders to eliminate loading states on mount.
|
|
198
|
-
*
|
|
199
|
-
* ```ts
|
|
200
|
-
* // React Router loader
|
|
201
|
-
* export async function loader() {
|
|
202
|
-
* await prefetchFlow({ client, slug: 'Home' })
|
|
203
|
-
* return null
|
|
204
|
-
* }
|
|
205
|
-
* ```
|
|
206
|
-
*/
|
|
207
|
-
declare function prefetchFlow(options: PrefetchFlowOptions): Promise<void>;
|
|
208
|
-
declare function useFlow(options: UseFlowOptions): UseFlowResult;
|
|
209
|
-
|
|
210
11
|
interface UseFlowDataOptions {
|
|
211
12
|
/** Canvas data from Flow document's `canvas` field */
|
|
212
13
|
data: CanvasData | undefined;
|
|
@@ -232,45 +33,6 @@ interface UseFlowDataResult {
|
|
|
232
33
|
*/
|
|
233
34
|
declare function useFlowData(options: UseFlowDataOptions): UseFlowDataResult;
|
|
234
35
|
|
|
235
|
-
/**
|
|
236
|
-
* Calculate bounding box for given node IDs.
|
|
237
|
-
* Pure function — usable in SSR, server components, or outside React.
|
|
238
|
-
*/
|
|
239
|
-
declare function getNodeBounds(nodes: FlowNode[], nodeIds: string[]): FlowBounds | undefined;
|
|
240
|
-
/**
|
|
241
|
-
* Get all frame nodes with their bounds.
|
|
242
|
-
* Sorted by position (top-left to bottom-right).
|
|
243
|
-
*/
|
|
244
|
-
declare function getFrames(nodes: FlowNode[]): Array<{
|
|
245
|
-
id: string;
|
|
246
|
-
label: string;
|
|
247
|
-
bounds: FlowBounds;
|
|
248
|
-
}>;
|
|
249
|
-
/** Result of getFrameData — contains filtered canvas + dual bounds. */
|
|
250
|
-
interface FrameData {
|
|
251
|
-
/** Canvas data containing only the frame's descendants (nodes have draggable: false). */
|
|
252
|
-
data: CanvasData;
|
|
253
|
-
/** Bounding box of child content nodes — use for initial viewport fit (centering). */
|
|
254
|
-
fitBounds: FlowBounds;
|
|
255
|
-
/** Bounding box of the frame itself — use for panning/zoom restriction (clamp). */
|
|
256
|
-
clampBounds: FlowBounds;
|
|
257
|
-
/** @deprecated Use fitBounds instead. Alias for clampBounds for backward compatibility. */
|
|
258
|
-
bounds: FlowBounds;
|
|
259
|
-
}
|
|
260
|
-
/**
|
|
261
|
-
* Extract a frame's descendants and related edges from canvas data.
|
|
262
|
-
* Recursively collects all nested children (supports nested frames).
|
|
263
|
-
* Returns undefined if frameId is not found or is not a frame node.
|
|
264
|
-
*
|
|
265
|
-
* Child nodes are marked `draggable: false` to prevent interfering with canvas panning.
|
|
266
|
-
* The frame node itself is included (use `frameRenderer={() => null}` to hide it).
|
|
267
|
-
*
|
|
268
|
-
* Returns dual bounds:
|
|
269
|
-
* - `fitBounds`: child content bounding box (for centering the viewport)
|
|
270
|
-
* - `clampBounds`: frame area bounding box (for panning restriction)
|
|
271
|
-
*/
|
|
272
|
-
declare function getFrameData(data: CanvasData, frameId: string): FrameData | undefined;
|
|
273
|
-
|
|
274
36
|
interface CodeComponentProps {
|
|
275
37
|
fields: Record<string, unknown>;
|
|
276
38
|
label: string;
|
|
@@ -362,4 +124,4 @@ interface FlowRendererProps {
|
|
|
362
124
|
}
|
|
363
125
|
declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseLeave, onEdgeClick, frameRenderer, edgeRenderers, nodeWrapper, controls, minimap, minimapNodeColor, children, renderNode, onViewportChange, defaultViewport: defaultViewportProp, bounds, clampBounds, focusPadding, focusAnimation, focusMode, responsiveFit, translateExtent: translateExtentProp, minZoom: minZoomProp, maxZoom: maxZoomProp, }: FlowRendererProps): React.JSX.Element | null;
|
|
364
126
|
|
|
365
|
-
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES,
|
|
127
|
+
export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, CanvasData, type CodeComponentProps, DynamicNodeSlotProps, EdgeSlotProps, EdgeTypeDef, FlowBounds, FlowEdge, FlowNode, FlowRenderer, type FlowRendererProps, FlowViewport, FrameNodeSlotProps, NodeTypeDef, NodeWrapperSlotProps, type UseFlowDataOptions, type UseFlowDataResult, clearTemplateCache, compileTemplate, useFlowData };
|
package/dist/ui/flow.js
CHANGED
|
@@ -133,42 +133,6 @@ function toEdgeTypeDef(doc) {
|
|
|
133
133
|
fields: Array.isArray(doc.fields) ? doc.fields : []
|
|
134
134
|
};
|
|
135
135
|
}
|
|
136
|
-
function prefetchFlow(options) {
|
|
137
|
-
return __async(this, null, function* () {
|
|
138
|
-
var _a;
|
|
139
|
-
const { client, slug, id } = options;
|
|
140
|
-
const identifier = (_a = id != null ? id : slug) != null ? _a : "";
|
|
141
|
-
yield Promise.all([
|
|
142
|
-
client.queryClient.prefetchQuery({
|
|
143
|
-
queryKey: collectionKeys("flows").detail(identifier),
|
|
144
|
-
queryFn: () => __async(null, null, function* () {
|
|
145
|
-
if (id) return client.from("flows").findById(id);
|
|
146
|
-
const result = yield client.from("flows").find({
|
|
147
|
-
where: { slug: { equals: slug } },
|
|
148
|
-
limit: 1
|
|
149
|
-
});
|
|
150
|
-
const doc = result.docs[0];
|
|
151
|
-
if (!doc) throw new Error(`Flow not found: ${slug}`);
|
|
152
|
-
return doc;
|
|
153
|
-
})
|
|
154
|
-
}),
|
|
155
|
-
client.queryClient.prefetchQuery({
|
|
156
|
-
queryKey: collectionKeys("flow-node-types").lists(),
|
|
157
|
-
queryFn: () => __async(null, null, function* () {
|
|
158
|
-
const result = yield client.from("flow-node-types").find({ limit: 100 });
|
|
159
|
-
return result.docs;
|
|
160
|
-
})
|
|
161
|
-
}),
|
|
162
|
-
client.queryClient.prefetchQuery({
|
|
163
|
-
queryKey: collectionKeys("flow-edge-types").lists(),
|
|
164
|
-
queryFn: () => __async(null, null, function* () {
|
|
165
|
-
const result = yield client.from("flow-edge-types").find({ limit: 100 });
|
|
166
|
-
return result.docs;
|
|
167
|
-
})
|
|
168
|
-
})
|
|
169
|
-
]);
|
|
170
|
-
});
|
|
171
|
-
}
|
|
172
136
|
function useFlow(options) {
|
|
173
137
|
var _a, _b, _c;
|
|
174
138
|
const { client, slug, id, enabled = true } = options;
|
|
@@ -241,6 +205,44 @@ function useFlow(options) {
|
|
|
241
205
|
};
|
|
242
206
|
}
|
|
243
207
|
|
|
208
|
+
// src/ui/Flow/prefetchFlow.ts
|
|
209
|
+
function prefetchFlow(options) {
|
|
210
|
+
return __async(this, null, function* () {
|
|
211
|
+
var _a;
|
|
212
|
+
const { client, slug, id } = options;
|
|
213
|
+
const identifier = (_a = id != null ? id : slug) != null ? _a : "";
|
|
214
|
+
yield Promise.all([
|
|
215
|
+
client.queryClient.prefetchQuery({
|
|
216
|
+
queryKey: collectionKeys("flows").detail(identifier),
|
|
217
|
+
queryFn: () => __async(null, null, function* () {
|
|
218
|
+
if (id) return client.from("flows").findById(id);
|
|
219
|
+
const result = yield client.from("flows").find({
|
|
220
|
+
where: { slug: { equals: slug } },
|
|
221
|
+
limit: 1
|
|
222
|
+
});
|
|
223
|
+
const doc = result.docs[0];
|
|
224
|
+
if (!doc) throw new Error(`Flow not found: ${slug}`);
|
|
225
|
+
return doc;
|
|
226
|
+
})
|
|
227
|
+
}),
|
|
228
|
+
client.queryClient.prefetchQuery({
|
|
229
|
+
queryKey: collectionKeys("flow-node-types").lists(),
|
|
230
|
+
queryFn: () => __async(null, null, function* () {
|
|
231
|
+
const result = yield client.from("flow-node-types").find({ limit: 100 });
|
|
232
|
+
return result.docs;
|
|
233
|
+
})
|
|
234
|
+
}),
|
|
235
|
+
client.queryClient.prefetchQuery({
|
|
236
|
+
queryKey: collectionKeys("flow-edge-types").lists(),
|
|
237
|
+
queryFn: () => __async(null, null, function* () {
|
|
238
|
+
const result = yield client.from("flow-edge-types").find({ limit: 100 });
|
|
239
|
+
return result.docs;
|
|
240
|
+
})
|
|
241
|
+
})
|
|
242
|
+
]);
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
|
|
244
246
|
// src/ui/Flow/useFlowData.ts
|
|
245
247
|
import { useMemo as useMemo2 } from "react";
|
|
246
248
|
function useFlowData(options) {
|