@01.software/sdk 0.4.3 → 0.5.1

package/dist/ui/flow.d.ts

@@ -1,178 +1,13 @@
-import React from 'react';
-import { QueryClient } from '@tanstack/react-query';
+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';
+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';
 import { Edge } from '@xyflow/react';
-
-interface DynamicNodeData {
-    nodeTypeSlug: string;
-    label: string;
-    fields: Record<string, unknown>;
-}
-type FlowNodeData = (DynamicNodeData | FrameNodeData) & Record<string, unknown>;
-interface FlowNodePosition {
-    x: number;
-    y: number;
-}
-interface FlowNode {
-    id: string;
-    type?: string;
-    position: FlowNodePosition;
-    data: FlowNodeData;
-    style?: React.CSSProperties;
-    width?: number;
-    height?: number;
-    measured?: {
-        width?: number;
-        height?: number;
-    };
-    draggable?: boolean;
-    selectable?: boolean;
-    [key: string]: unknown;
-}
-interface FlowEdge {
-    id: string;
-    source: string;
-    target: string;
-    sourceHandle?: string | null;
-    targetHandle?: string | null;
-    type?: string;
-    style?: React.CSSProperties;
-    animated?: boolean;
-    markerStart?: unknown;
-    markerEnd?: unknown;
-    edgeTypeSlug?: string;
-    fields?: Record<string, unknown>;
-    [key: string]: unknown;
-}
-interface FlowViewport {
-    x: number;
-    y: number;
-    zoom: number;
-}
-interface CanvasData {
-    nodes: FlowNode[];
-    edges: FlowEdge[];
-    viewport: FlowViewport;
-}
-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;
-    markerStart: string;
-    markerEnd: 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;
-    nodeTypeSlug: string;
-    label: string;
-    fields: Record<string, unknown>;
-    nodeTypeDef?: NodeTypeDef;
-}
-interface FrameNodeData {
-    label: string;
-    color?: string;
-    padding?: number;
-    borderStyle?: 'dashed' | 'solid' | 'none';
-    opacity?: number;
-}
-interface FrameNodeSlotProps {
-    id: string;
-    label: string;
-    color?: string;
-    padding?: number;
-    borderStyle?: 'dashed' | 'solid' | 'none';
-    opacity?: number;
-    children?: React.ReactNode;
-}
-interface EdgeSlotProps {
-    id: string;
-    edgeTypeSlug?: string;
-    source: string;
-    target: string;
-    label?: string;
-    fields?: Record<string, unknown>;
-    edgeTypeDef?: EdgeTypeDef;
-    style?: React.CSSProperties;
-}
-interface NodeWrapperSlotProps {
-    id: string;
-    nodeTypeSlug: string;
-    label: string;
-    selected?: boolean;
-    nodeTypeDef?: NodeTypeDef;
-    children: React.ReactNode;
-}
-interface FlowBounds {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
+import React from 'react';
+import '@tanstack/react-query';
 
 declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
 
 declare const BUILT_IN_EDGE_TYPES: EdgeTypeDef[];
 
-type FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types';
-type AnyFn = (...args: any[]) => any;
-interface SDKClient {
-    from(collection: FlowCollection): {
-        find: AnyFn;
-        findById: AnyFn;
-    };
-    queryClient: QueryClient;
-}
-interface UseFlowOptions {
-    /** SDK client instance (BrowserClient or ServerClient) */
-    client: SDKClient;
-    /** Flow slug (URL-friendly identifier) */
-    slug?: string;
-    /** Flow document ID (UUID) */
-    id?: string;
-    /** Enable/disable data fetching (default: true) */
-    enabled?: boolean;
-}
-interface UseFlowResult {
-    data: CanvasData | undefined;
-    nodeTypeDefs: NodeTypeDef[];
-    edgeTypeDefs: EdgeTypeDef[];
-    flow: Record<string, unknown> | undefined;
-    isLoading: boolean;
-    error: Error | null;
-}
-declare function useFlow(options: UseFlowOptions): UseFlowResult;
-
 interface UseFlowDataOptions {
     /** Canvas data from Flow document's `canvas` field */
     data: CanvasData | undefined;
@@ -198,21 +33,16 @@ interface UseFlowDataResult {
  */
 declare function useFlowData(options: UseFlowDataOptions): UseFlowDataResult;
 
-/**
- * Calculate bounding box for given node IDs.
- * Pure function — usable in SSR, server components, or outside React.
- */
-declare function getNodeBounds(nodes: FlowNode[], nodeIds: string[]): FlowBounds | undefined;
-/**
- * Get all frame nodes with their bounds.
- * Sorted by position (top-left to bottom-right).
- * Builds a single nodeMap to compute absolute positions (O(F) instead of O(F*N)).
- */
-declare function getFrames(nodes: FlowNode[]): Array<{
-    id: string;
+interface CodeComponentProps {
+    fields: Record<string, unknown>;
     label: string;
-    bounds: FlowBounds;
-}>;
+    color: string;
+    nodeTypeSlug: string;
+    width: number;
+    height: number;
+}
+declare function compileTemplate(code: string, slug: string): React.FC<CodeComponentProps> | null;
+declare function clearTemplateCache(): void;
 
 /**
  * Renders a Flow canvas in read-only mode.
@@ -243,6 +73,14 @@ interface FlowRendererProps {
     fitView?: boolean;
     /** Called when a node is clicked */
     onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void;
+    /** Called when a node is double-clicked */
+    onNodeDoubleClick?: (event: React.MouseEvent, node: FlowNode) => void;
+    /** Called on node right-click / context menu */
+    onNodeContextMenu?: (event: React.MouseEvent, node: FlowNode) => void;
+    /** Called when mouse enters a node */
+    onNodeMouseEnter?: (event: React.MouseEvent, node: FlowNode) => void;
+    /** Called when mouse leaves a node */
+    onNodeMouseLeave?: (event: React.MouseEvent, node: FlowNode) => void;
     /** Called when an edge is clicked */
     onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void;
     /** S1: Custom frame node renderer. Should be a stable reference (memoize or define outside render). */
@@ -259,19 +97,31 @@ interface FlowRendererProps {
     minimapNodeColor?: (node: FlowNode) => string;
     /** S4: Additional children rendered inside ReactFlow */
     children?: React.ReactNode;
-    /** S5: Global override for all dynamic nodes. Should be a stable reference (memoize or define outside render). */
-    renderNode?: (props: DynamicNodeSlotProps, defaultRender: React.ReactElement) => React.ReactElement | null;
+    /** S5: Global override for all dynamic nodes. `content` is the resolved rendering (custom renderer output or default). `props.defaultRender` contains the original template/field-based rendering. */
+    renderNode?: (props: DynamicNodeSlotProps, content: React.ReactElement) => React.ReactElement | null;
     /** S6: Called when viewport changes (pan/zoom) */
     onViewportChange?: (viewport: FlowViewport) => void;
     /** S6: Default viewport (used when fitView is false) */
     defaultViewport?: FlowViewport;
-    /** S8: Focus on specific bounds */
+    /** S8: Focus on specific bounds (used for initial viewport fit). */
     bounds?: FlowBounds;
+    /** S8: Separate bounds for panning/zoom restriction. When set, overrides bounds-based translateExtent. Useful when fitBounds (content) differs from clampBounds (frame area). */
+    clampBounds?: FlowBounds;
     /** S8: Padding for focus bounds (default: 0.1) */
     focusPadding?: number;
     /** S8: Animate focus transition (true=300ms, number=custom ms, false=instant) */
     focusAnimation?: boolean | number;
-}
-declare function FlowRenderer({ data, className, style, nodeRenderers, nodeTypeDefs, edgeTypeDefs, background, interactive, fitView, onNodeClick, onEdgeClick, frameRenderer, edgeRenderers, nodeWrapper, controls, minimap, minimapNodeColor, children, renderNode, onViewportChange, defaultViewport: defaultViewportProp, bounds, focusPadding, focusAnimation, }: FlowRendererProps): React.JSX.Element | null;
+    /** S8: Focus mode — "contain" fits entire bounds (may have margins), "cover" fills viewport (may crop). Default: "contain" */
+    focusMode?: 'contain' | 'cover';
+    /** Re-fit viewport on container resize (default: true when bounds is set) */
+    responsiveFit?: boolean;
+    /** Override translateExtent directly. When set, overrides the automatic bounds-based panning restriction. */
+    translateExtent?: [[number, number], [number, number]];
+    /** Minimum zoom level. When clampBounds is set, automatically enforced as cover zoom (user cannot zoom out beyond the frame). */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+}
+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;
 
-export { BUILT_IN_EDGE_TYPES, BUILT_IN_NODE_TYPES, type CanvasData, type DynamicNodeData, type DynamicNodeSlotProps, type EdgeSlotProps, type EdgeTypeDef, type FlowBounds, type FlowEdge, type FlowNode, type FlowNodeData, type FlowNodePosition, FlowRenderer, type FlowRendererProps, type FlowViewport, type FrameNodeData, type FrameNodeSlotProps, type NodeTypeDef, type NodeTypeFieldDef, type NodeWrapperSlotProps, type SDKClient, type UseFlowDataOptions, type UseFlowDataResult, type UseFlowOptions, type UseFlowResult, getFrames, getNodeBounds, isDynamicNode, isFrameNode, useFlow, useFlowData };
+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 };