@01.software/sdk 0.2.9-dev.260306.4e16dd4 → 0.2.9-dev.260310.cf511cb

package/dist/flow.d.cts

@@ -1,31 +1,12 @@
 import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
 
-declare const FLOW_NODE_TYPES: readonly ["text", "image", "iframe", "note"];
-type FlowNodeType = (typeof FLOW_NODE_TYPES)[number];
-interface BaseNodeData {
+interface DynamicNodeData {
+    nodeTypeSlug: string;
     label: string;
+    fields: Record<string, unknown>;
 }
-interface TextNodeData extends BaseNodeData {
-    nodeType: 'text';
-    body?: string;
-}
-interface ImageNodeData extends BaseNodeData {
-    nodeType: 'image';
-    imageId?: string;
-    imageUrl?: string;
-    alt?: string;
-    caption?: string;
-}
-interface IframeNodeData extends BaseNodeData {
-    nodeType: 'iframe';
-    url?: string;
-}
-interface NoteNodeData extends BaseNodeData {
-    nodeType: 'note';
-    body?: string;
-    color?: string;
-}
-type FlowNodeData = (TextNodeData | ImageNodeData | IframeNodeData | NoteNodeData) & Record<string, unknown>;
+type FlowNodeData = DynamicNodeData & Record<string, unknown>;
 interface FlowNodePosition {
     x: number;
     y: number;
@@ -42,6 +23,7 @@ interface FlowNode {
         width?: number;
         height?: number;
     };
+    draggable?: boolean;
     [key: string]: unknown;
 }
 interface FlowEdge {
@@ -52,6 +34,8 @@ interface FlowEdge {
     targetHandle?: string | null;
     type?: string;
     style?: React.CSSProperties;
+    edgeTypeSlug?: string;
+    fields?: Record<string, unknown>;
     [key: string]: unknown;
 }
 interface FlowViewport {
@@ -64,28 +48,82 @@ interface CanvasData {
     edges: FlowEdge[];
     viewport: FlowViewport;
 }
-interface TextNodeSlotProps {
+interface NodeTypeFieldDef {
+    name: string;
+    label: string;
+    fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle';
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    defaultValue?: string;
+    required?: boolean;
+}
+interface NodeTypeDef {
+    slug: string;
+    name: string;
+    color: string;
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    fields: NodeTypeFieldDef[];
+    transparentBackground?: boolean;
+}
+interface EdgeTypeDef {
+    slug: string;
+    name: string;
+    color: string;
+    strokeWidth: number;
+    animated: boolean;
+    lineStyle: string;
+    fields: NodeTypeFieldDef[];
+}
+declare function isDynamicNode(node: FlowNode): node is FlowNode & {
+    data: DynamicNodeData;
+};
+declare function isFrameNode(node: FlowNode): node is FlowNode & {
+    data: FrameNodeData;
+};
+interface DynamicNodeSlotProps {
     id: string;
-    data: TextNodeData;
+    nodeTypeSlug: string;
+    label: string;
+    fields: Record<string, unknown>;
+    nodeTypeDef?: NodeTypeDef;
 }
-interface ImageNodeSlotProps {
-    id: string;
-    data: ImageNodeData;
+interface FrameNodeData {
+    label: string;
+    color?: string;
+    padding?: number;
 }
-interface IframeNodeSlotProps {
-    id: string;
-    data: IframeNodeData;
+
+declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
+
+declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
+
+interface FlowClient {
+    from(collection: string): {
+        find(options?: Record<string, unknown>): Promise<{
+            docs: Record<string, unknown>[];
+        }>;
+        findById(id: string, options?: Record<string, unknown>): Promise<Record<string, unknown>>;
+    };
+    queryClient: QueryClient;
 }
-interface NoteNodeSlotProps {
-    id: string;
-    data: NoteNodeData;
+interface UseFlowOptions {
+    client: FlowClient;
+    enabled?: boolean;
 }
-interface FlowNodeComponents {
-    Text?: React.ComponentType<TextNodeSlotProps>;
-    Image?: React.ComponentType<ImageNodeSlotProps>;
-    Iframe?: React.ComponentType<IframeNodeSlotProps>;
-    Note?: React.ComponentType<NoteNodeSlotProps>;
+interface UseFlowResult {
+    data: CanvasData | undefined;
+    nodeTypeDefs: NodeTypeDef[];
+    edgeTypeDefs: EdgeTypeDef[];
+    flow: Record<string, unknown> | undefined;
+    isLoading: boolean;
+    error: Error | null;
 }
+declare function useFlow(slugOrId: string, options: UseFlowOptions): UseFlowResult;
 
 /**
  * Renders a Flow canvas in read-only mode.
@@ -102,15 +140,21 @@ interface FlowRendererProps {
     className?: string;
     /** Container style */
     style?: React.CSSProperties;
-    /** Custom node type components (memoize or define outside component to avoid re-renders) */
-    nodeComponents?: FlowNodeComponents;
+    /** Custom renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */
+    nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>;
+    /** Node type definitions for enhanced rendering (color badges, field-type-aware display) */
+    nodeTypeDefs?: NodeTypeDef[];
     /** Show background pattern (default: true) */
     background?: boolean;
     /** Allow user interaction - pan, zoom (default: false for read-only display) */
     interactive?: boolean;
     /** Fit view on mount (default: true) */
     fitView?: boolean;
+    /** Called when a node is clicked */
+    onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void;
+    /** Called when an edge is clicked */
+    onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void;
 }
-declare function FlowRenderer({ data, className, style, nodeComponents, background, interactive, fitView, }: FlowRendererProps): React.JSX.Element;
+declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, }: FlowRendererProps): React.JSX.Element | null;
 
-export { type CanvasData, FLOW_NODE_TYPES, type FlowEdge, type FlowNode, type FlowNodeComponents, type FlowNodeData, type FlowNodePosition, type FlowNodeType, FlowRenderer, type FlowRendererProps, type FlowViewport, type IframeNodeData, type IframeNodeSlotProps, type ImageNodeData, type ImageNodeSlotProps, type NoteNodeData, type NoteNodeSlotProps, type TextNodeData, type TextNodeSlotProps };
+export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, type CanvasData, type DynamicNodeData, type DynamicNodeSlotProps, type EdgeTypeDef, type FlowEdge, type FlowNode, type FlowNodeData, type FlowNodePosition, FlowRenderer, type FlowRendererProps, type FlowViewport, type FrameNodeData, type NodeTypeDef, type NodeTypeFieldDef, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };

package/dist/flow.d.ts

@@ -1,31 +1,12 @@
 import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
 
-declare const FLOW_NODE_TYPES: readonly ["text", "image", "iframe", "note"];
-type FlowNodeType = (typeof FLOW_NODE_TYPES)[number];
-interface BaseNodeData {
+interface DynamicNodeData {
+    nodeTypeSlug: string;
     label: string;
+    fields: Record<string, unknown>;
 }
-interface TextNodeData extends BaseNodeData {
-    nodeType: 'text';
-    body?: string;
-}
-interface ImageNodeData extends BaseNodeData {
-    nodeType: 'image';
-    imageId?: string;
-    imageUrl?: string;
-    alt?: string;
-    caption?: string;
-}
-interface IframeNodeData extends BaseNodeData {
-    nodeType: 'iframe';
-    url?: string;
-}
-interface NoteNodeData extends BaseNodeData {
-    nodeType: 'note';
-    body?: string;
-    color?: string;
-}
-type FlowNodeData = (TextNodeData | ImageNodeData | IframeNodeData | NoteNodeData) & Record<string, unknown>;
+type FlowNodeData = DynamicNodeData & Record<string, unknown>;
 interface FlowNodePosition {
     x: number;
     y: number;
@@ -42,6 +23,7 @@ interface FlowNode {
         width?: number;
         height?: number;
     };
+    draggable?: boolean;
     [key: string]: unknown;
 }
 interface FlowEdge {
@@ -52,6 +34,8 @@ interface FlowEdge {
     targetHandle?: string | null;
     type?: string;
     style?: React.CSSProperties;
+    edgeTypeSlug?: string;
+    fields?: Record<string, unknown>;
     [key: string]: unknown;
 }
 interface FlowViewport {
@@ -64,28 +48,82 @@ interface CanvasData {
     edges: FlowEdge[];
     viewport: FlowViewport;
 }
-interface TextNodeSlotProps {
+interface NodeTypeFieldDef {
+    name: string;
+    label: string;
+    fieldType: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | 'toggle';
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    defaultValue?: string;
+    required?: boolean;
+}
+interface NodeTypeDef {
+    slug: string;
+    name: string;
+    color: string;
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    fields: NodeTypeFieldDef[];
+    transparentBackground?: boolean;
+}
+interface EdgeTypeDef {
+    slug: string;
+    name: string;
+    color: string;
+    strokeWidth: number;
+    animated: boolean;
+    lineStyle: string;
+    fields: NodeTypeFieldDef[];
+}
+declare function isDynamicNode(node: FlowNode): node is FlowNode & {
+    data: DynamicNodeData;
+};
+declare function isFrameNode(node: FlowNode): node is FlowNode & {
+    data: FrameNodeData;
+};
+interface DynamicNodeSlotProps {
     id: string;
-    data: TextNodeData;
+    nodeTypeSlug: string;
+    label: string;
+    fields: Record<string, unknown>;
+    nodeTypeDef?: NodeTypeDef;
 }
-interface ImageNodeSlotProps {
-    id: string;
-    data: ImageNodeData;
+interface FrameNodeData {
+    label: string;
+    color?: string;
+    padding?: number;
 }
-interface IframeNodeSlotProps {
-    id: string;
-    data: IframeNodeData;
+
+declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
+
+declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
+
+interface FlowClient {
+    from(collection: string): {
+        find(options?: Record<string, unknown>): Promise<{
+            docs: Record<string, unknown>[];
+        }>;
+        findById(id: string, options?: Record<string, unknown>): Promise<Record<string, unknown>>;
+    };
+    queryClient: QueryClient;
 }
-interface NoteNodeSlotProps {
-    id: string;
-    data: NoteNodeData;
+interface UseFlowOptions {
+    client: FlowClient;
+    enabled?: boolean;
 }
-interface FlowNodeComponents {
-    Text?: React.ComponentType<TextNodeSlotProps>;
-    Image?: React.ComponentType<ImageNodeSlotProps>;
-    Iframe?: React.ComponentType<IframeNodeSlotProps>;
-    Note?: React.ComponentType<NoteNodeSlotProps>;
+interface UseFlowResult {
+    data: CanvasData | undefined;
+    nodeTypeDefs: NodeTypeDef[];
+    edgeTypeDefs: EdgeTypeDef[];
+    flow: Record<string, unknown> | undefined;
+    isLoading: boolean;
+    error: Error | null;
 }
+declare function useFlow(slugOrId: string, options: UseFlowOptions): UseFlowResult;
 
 /**
  * Renders a Flow canvas in read-only mode.
@@ -102,15 +140,21 @@ interface FlowRendererProps {
     className?: string;
     /** Container style */
     style?: React.CSSProperties;
-    /** Custom node type components (memoize or define outside component to avoid re-renders) */
-    nodeComponents?: FlowNodeComponents;
+    /** Custom renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */
+    nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>;
+    /** Node type definitions for enhanced rendering (color badges, field-type-aware display) */
+    nodeTypeDefs?: NodeTypeDef[];
     /** Show background pattern (default: true) */
     background?: boolean;
     /** Allow user interaction - pan, zoom (default: false for read-only display) */
     interactive?: boolean;
     /** Fit view on mount (default: true) */
     fitView?: boolean;
+    /** Called when a node is clicked */
+    onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void;
+    /** Called when an edge is clicked */
+    onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void;
 }
-declare function FlowRenderer({ data, className, style, nodeComponents, background, interactive, fitView, }: FlowRendererProps): React.JSX.Element;
+declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, }: FlowRendererProps): React.JSX.Element | null;
 
-export { type CanvasData, FLOW_NODE_TYPES, type FlowEdge, type FlowNode, type FlowNodeComponents, type FlowNodeData, type FlowNodePosition, type FlowNodeType, FlowRenderer, type FlowRendererProps, type FlowViewport, type IframeNodeData, type IframeNodeSlotProps, type ImageNodeData, type ImageNodeSlotProps, type NoteNodeData, type NoteNodeSlotProps, type TextNodeData, type TextNodeSlotProps };
+export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, type CanvasData, type DynamicNodeData, type DynamicNodeSlotProps, type EdgeTypeDef, type FlowEdge, type FlowNode, type FlowNodeData, type FlowNodePosition, FlowRenderer, type FlowRendererProps, type FlowViewport, type FrameNodeData, type NodeTypeDef, type NodeTypeFieldDef, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };