@squeed/flow-sdk 0.1.1 → 0.1.2

package/dist/index.d.ts

@@ -1,7 +1,44 @@
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MutableRefObject } from 'react';
+
+export declare function applyAutoCollapse(data: any, collapseEveryN: number): any;
+
+export declare interface AutoCollapseConfig {
+    /** Min lines threshold to trigger (default: 800) */
+    minLines?: number;
+    /** Min depth threshold to trigger (default: 5) */
+    minDepth?: number;
+    /** Collapse every Nth depth level (default: 3) */
+    collapseEveryNLevels?: number;
+}
 
 export declare type BackgroundPattern = "dot" | "steel" | "grid" | "none";
 
+/** Props passed to custom bottom bar renderer */
+export declare interface BottomBarRenderProps {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    direction: FlowDirection;
+    isZoomMode: boolean;
+    setIsZoomMode: (v: boolean) => void;
+    isMultiSelectMode: boolean;
+    setIsMultiSelectMode: (v: boolean) => void;
+    isDragMode: boolean;
+    setIsDragMode: (v: boolean) => void;
+    isEdgeHandlesEnabled: boolean;
+    setIsEdgeHandlesEnabled: (v: boolean) => void;
+    isArrayNodeMode: boolean;
+    setIsArrayNodeMode: (v: boolean) => void;
+    selectedNodeIds: string[];
+    selectedNodeData: any[];
+    selectedEdgeId: string | null;
+    selectedEdgeData: any;
+    onNodeDeselect: () => void;
+    onEdgeDeselect: () => void;
+    callbacks: FlowDiagramCallbacks;
+}
+
 export declare const contentObjTheme: (color: any) => {
     background: any;
     highlight: string;
@@ -25,19 +62,57 @@ declare interface DiagramContext {
     } | null;
 }
 
+export declare const DynamicIcon: ({ name, ...props }: {
+    [x: string]: any;
+    name: any;
+}) => JSX_2.Element;
+
 export declare function FlowDiagram({ json, title, nodes: externalNodes, edges: externalEdges, config, callbacks, className, style, showBottomBar, }: FlowDiagramProps & {
     showBottomBar?: boolean;
 }): JSX_2.Element;
 
+/** Event callbacks for the flow diagram */
 export declare interface FlowDiagramCallbacks {
+    /** Fires when a node is clicked/selected */
     onNodeSelect?: (nodeId: string, nodeData: any) => void;
+    /** Fires when selection is cleared */
     onNodeDeselect?: () => void;
+    /** Fires on double-click of a node */
     onNodeDoubleClick?: (nodeId: string, nodeData: any) => void;
+    /** Fires when a node is created via edge drawing into empty space */
+    onNodeCreate?: (params: {
+        type: string;
+        position: any;
+        sourceNodeId?: string;
+        isArrayMode?: boolean;
+    }) => void;
+    /** Fires when a node is deleted */
+    onNodeDelete?: (nodeId: string, nodeData: any) => void;
+    /** Fires when a node label is edited inline */
+    onNodeLabelChange?: (nodeId: string, newLabel: string) => void;
+    /** Fires when a node's collapse toggle is clicked */
+    onNodeCollapse?: (nodeId: string, collapsed: boolean) => void;
+    /** Fires when a node's color is changed via the toolbar */
+    onNodeColorChange?: (nodeId: string, colorType: "text" | "bg", color: string) => void;
+    /** Fires when a node's icon is changed via the toolbar */
+    onNodeIconChange?: (nodeId: string, iconName: string) => void;
+    /** Fires when a hover overlay action is clicked */
     onNodeHoverAction?: (actionId: string, nodeId: string, nodeData: any) => void;
+    /** Fires when a new edge is drawn between two nodes */
     onEdgeCreate?: (sourceId: string, targetId: string) => void;
+    /** Fires when an edge is clicked/selected */
     onEdgeSelect?: (edgeId: string, edgeData: any) => void;
+    /** Fires when edge selection is cleared */
     onEdgeDeselect?: () => void;
+    /** Fires when an edge is removed */
     onEdgeRemove?: (edgeId: string, edgeData: any) => void;
+    /** Fires when an edge's color is changed */
+    onEdgeColorChange?: (edgeId: string, color: string) => void;
+    /** Fires when an edge's label is changed */
+    onEdgeLabelChange?: (edgeId: string, newLabel: string) => void;
+    /** Fires when an edge's style is changed (solid, dashed, animated) */
+    onEdgeStyleChange?: (edgeId: string, style: "solid" | "dashed" | "animated") => void;
+    /** Fires when the viewport (pan/zoom) changes */
     onViewportChange?: (viewport: {
         pan: {
             x: number;
@@ -45,27 +120,35 @@ export declare interface FlowDiagramCallbacks {
         };
         zoom: number;
     }) => void;
-    onNodeCreate?: (params: {
-        type: string;
-        position: any;
-        sourceNodeId?: string;
-    }) => void;
-    onCyInit?: (cy: any) => void;
+    /** Fires when the flow direction changes via bottom bar */
     onDirectionChange?: (direction: FlowDirection) => void;
-    onNodeColorChange?: (nodeId: string, colorType: "text" | "bg", color: string) => void;
-    onEdgeColorChange?: (edgeId: string, color: string) => void;
+    /** Fires when array/set mode toggles in bottom bar */
     onArrayModeChange?: (isArrayMode: boolean) => void;
-    onNodeDelete?: (nodeId: string, nodeData: any) => void;
+    /** Fires when Cytoscape instance is initialized (for advanced use) */
+    onCyInit?: (cy: any) => void;
 }
 
+/** Configuration for the flow diagram appearance and behavior */
 export declare interface FlowDiagramConfig {
+    /** Layout direction: "LR", "RL", "TB", "BT" */
     direction?: FlowDirection;
+    /** Layout algorithm */
     layout?: LayoutAlgorithm;
+    /** Theme accent color (Chakra token e.g. "blue.500") */
     themeColor?: string;
+    /** Light or dark mode */
     colorMode?: "light" | "dark";
+    /** Background pattern style */
     backgroundPattern?: BackgroundPattern;
+    /** Background color override */
+    backgroundColor?: string;
+    /** Edge/line color override */
+    edgeColor?: string;
+    /** Min zoom level (default: 0.01) */
     minZoom?: number;
+    /** Max zoom level (default: 1.5) */
     maxZoom?: number;
+    /** Initial viewport position and zoom */
     initialViewport?: {
         pan: {
             x: number;
@@ -73,12 +156,36 @@ export declare interface FlowDiagramConfig {
         };
         zoom: number;
     };
+    /** Enable edge drawing handles (default: true) */
     edgeHandles?: boolean;
+    /** Disable all interactions */
     readOnly?: boolean;
-    edgeColor?: string;
+    /** Enable inline node label editing */
+    editable?: boolean;
+    /** Actions rendered in the node hover overlay */
     nodeOverlayActions?: NodeOverlayAction[];
+    /** Custom render function for node hover overlay */
     renderNodeOverlay?: (props: NodeOverlayProps) => React.ReactNode;
+    /** Custom render function for multi-select toolbar */
     renderSelectedNodeToolbar?: (props: SelectedNodeToolbarProps) => React.ReactNode;
+    /** Custom render function for edge selection toolbar */
+    renderSelectedEdgeToolbar?: (props: SelectedEdgeToolbarProps) => React.ReactNode;
+    /** Custom render function to replace the entire built-in bottom bar */
+    renderBottomBar?: (props: BottomBarRenderProps) => React.ReactNode;
+    /** Auto-collapse deep nodes for large data. `true` uses defaults, or pass config for custom thresholds */
+    autoCollapse?: AutoCollapseConfig | boolean;
+    /** Custom node view components to override SDK defaults. Keys: objectView, arrayView, text, parentContainer */
+    customViews?: Record<string, React.ComponentType<any>>;
+    /** Disable built-in keyboard shortcuts (Z/M/D) when the consumer handles its own */
+    disableKeyboardShortcuts?: boolean;
+    /** Externally controlled zoom mode (overrides internal state when provided) */
+    isZoomMode?: boolean;
+    /** Externally controlled multi-select mode (overrides internal state when provided) */
+    isMultiSelectMode?: boolean;
+    /** Externally controlled edge draw mode (overrides internal state when provided) */
+    isEdgeHandlesEnabled?: boolean;
+    /** Externally controlled drag/pan mode (overrides internal state when provided) */
+    isDragMode?: boolean;
 }
 
 export declare interface FlowDiagramEdge {
@@ -108,14 +215,23 @@ export declare interface FlowDiagramNode {
     };
 }
 
+/** Top-level props for the FlowDiagram component */
 export declare interface FlowDiagramProps {
+    /** JSON object to render as a flow diagram */
     json?: any;
+    /** Title shown on the root node */
     title?: string;
+    /** Pre-computed nodes (alternative to json) */
     nodes?: FlowDiagramNode[];
+    /** Pre-computed edges (alternative to json) */
     edges?: FlowDiagramEdge[];
+    /** Diagram configuration */
     config?: FlowDiagramConfig;
+    /** Event callbacks */
     callbacks?: FlowDiagramCallbacks;
+    /** CSS class name */
     className?: string;
+    /** Inline styles */
     style?: React.CSSProperties;
 }
 
@@ -135,14 +251,22 @@ export declare const getColorVariant: (color: string) => {
 
 export declare function getDarkerHexColor(hex: string, factor?: number): string;
 
+export declare function getJsonSize(data: any): {
+    lines: number;
+    depth: number;
+    nodes: number;
+};
+
 export declare type LayoutAlgorithm = "dagre" | "elk" | "tidytree" | "concentric" | "cose";
 
+/** Actions shown in the hover overlay above nodes */
 export declare interface NodeOverlayAction {
+    id: string;
     icon: any;
     label: string;
-    id: string;
 }
 
+/** Props passed to custom node overlay renderer */
 export declare interface NodeOverlayProps {
     nodeId: string;
     nodeData: any;
@@ -152,6 +276,14 @@ export declare interface NodeOverlayProps {
     setIsHovered: (v: boolean) => void;
 }
 
+/** Props passed to custom edge selection toolbar renderer */
+export declare interface SelectedEdgeToolbarProps {
+    edgeId: string;
+    edgeData: any;
+    onDeselect: () => void;
+}
+
+/** Props passed to custom node selection toolbar renderer */
 export declare interface SelectedNodeToolbarProps {
     selectedNodeIds: string[];
     selectedNodeData: any[];
@@ -178,6 +310,20 @@ export declare function useCustomColors(theme?: any): {
     greenColor: string;
 };
 
+/**
+ * Hook that stops all event propagation on a DOM element.
+ * Use this on any interactive element inside a node (inputs, textareas, forms)
+ * to prevent cytoscape from intercepting mouse/keyboard events.
+ *
+ * @param active - Only attach listeners when true (e.g. when editing)
+ * @returns ref to attach to the wrapper element
+ *
+ * @example
+ * const inputRef = useStopPropagation<HTMLDivElement>(isEditing);
+ * return <div ref={inputRef}><input /></div>;
+ */
+export declare function useStopPropagation<T extends HTMLElement>(active?: boolean): MutableRefObject<T>;
+
 export declare function useThemeContentColors(color: any): {
     bgColor: any;
     highlightColor: string;