@01.software/sdk 0.4.0 → 0.4.1

package/dist/ui/flow.d.cts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QueryClient } from '@tanstack/react-query';
+import { Edge } from '@xyflow/react';
 
 interface DynamicNodeData {
     nodeTypeSlug: string;
@@ -105,6 +106,39 @@ interface FrameNodeData {
     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;
+}
 
 declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
 
@@ -139,6 +173,47 @@ interface UseFlowResult {
 }
 declare function useFlow(options: UseFlowOptions): UseFlowResult;
 
+interface UseFlowDataOptions {
+    /** Canvas data from Flow document's `canvas` field */
+    data: CanvasData | undefined;
+    /** Node type definitions (defaults to built-in types) */
+    nodeTypeDefs?: NodeTypeDef[];
+    /** Edge type definitions (defaults to built-in types) */
+    edgeTypeDefs?: EdgeTypeDef[];
+}
+interface UseFlowDataResult {
+    /** Nodes from canvas data */
+    nodes: FlowNode[];
+    /** Edges from canvas data (typed for @xyflow/react) */
+    edges: Edge[];
+    /** Map of node type slug to definition */
+    nodeTypeDefsMap: Map<string, NodeTypeDef>;
+    /** Map of edge type slug to definition */
+    edgeTypeDefsMap: Map<string, EdgeTypeDef>;
+}
+/**
+ * Pure data transformation hook — extracts nodes, edges, and type definition
+ * maps from canvas data without any rendering. Useful for headless usage
+ * (custom layouts, analytics, server-side processing).
+ */
+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;
+    label: string;
+    bounds: FlowBounds;
+}>;
+
 /**
  * Renders a Flow canvas in read-only mode.
  *
@@ -160,7 +235,7 @@ interface FlowRendererProps {
     nodeTypeDefs?: NodeTypeDef[];
     /** Edge type definitions for styled edges (color, stroke, markers, animation) */
     edgeTypeDefs?: EdgeTypeDef[];
-    /** Show background pattern (default: true) */
+    /** Show background pattern (default: false) */
     background?: boolean;
     /** Allow user interaction - pan, zoom (default: false for read-only display) */
     interactive?: boolean;
@@ -170,7 +245,33 @@ interface FlowRendererProps {
     onNodeClick?: (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). */
+    frameRenderer?: React.ComponentType<FrameNodeSlotProps>;
+    /** S2: Custom edge renderers by edge type slug. Should be a stable reference (memoize or define outside render). */
+    edgeRenderers?: Record<string, React.ComponentType<EdgeSlotProps>>;
+    /** S3: Wraps every dynamic node's rendered content. Should be a stable reference (memoize or define outside render). */
+    nodeWrapper?: React.ComponentType<NodeWrapperSlotProps>;
+    /** S4: Show controls (default: false) */
+    controls?: boolean;
+    /** S4: Show minimap (default: false) */
+    minimap?: boolean;
+    /** S4: Custom minimap node color function */
+    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;
+    /** 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 */
+    bounds?: 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, }: FlowRendererProps): React.JSX.Element | null;
+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;
 
-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 SDKClient, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };
+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 };

package/dist/ui/flow.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QueryClient } from '@tanstack/react-query';
+import { Edge } from '@xyflow/react';
 
 interface DynamicNodeData {
     nodeTypeSlug: string;
@@ -105,6 +106,39 @@ interface FrameNodeData {
     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;
+}
 
 declare const BUILT_IN_NODE_TYPES: NodeTypeDef[];
 
@@ -139,6 +173,47 @@ interface UseFlowResult {
 }
 declare function useFlow(options: UseFlowOptions): UseFlowResult;
 
+interface UseFlowDataOptions {
+    /** Canvas data from Flow document's `canvas` field */
+    data: CanvasData | undefined;
+    /** Node type definitions (defaults to built-in types) */
+    nodeTypeDefs?: NodeTypeDef[];
+    /** Edge type definitions (defaults to built-in types) */
+    edgeTypeDefs?: EdgeTypeDef[];
+}
+interface UseFlowDataResult {
+    /** Nodes from canvas data */
+    nodes: FlowNode[];
+    /** Edges from canvas data (typed for @xyflow/react) */
+    edges: Edge[];
+    /** Map of node type slug to definition */
+    nodeTypeDefsMap: Map<string, NodeTypeDef>;
+    /** Map of edge type slug to definition */
+    edgeTypeDefsMap: Map<string, EdgeTypeDef>;
+}
+/**
+ * Pure data transformation hook — extracts nodes, edges, and type definition
+ * maps from canvas data without any rendering. Useful for headless usage
+ * (custom layouts, analytics, server-side processing).
+ */
+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;
+    label: string;
+    bounds: FlowBounds;
+}>;
+
 /**
  * Renders a Flow canvas in read-only mode.
  *
@@ -160,7 +235,7 @@ interface FlowRendererProps {
     nodeTypeDefs?: NodeTypeDef[];
     /** Edge type definitions for styled edges (color, stroke, markers, animation) */
     edgeTypeDefs?: EdgeTypeDef[];
-    /** Show background pattern (default: true) */
+    /** Show background pattern (default: false) */
     background?: boolean;
     /** Allow user interaction - pan, zoom (default: false for read-only display) */
     interactive?: boolean;
@@ -170,7 +245,33 @@ interface FlowRendererProps {
     onNodeClick?: (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). */
+    frameRenderer?: React.ComponentType<FrameNodeSlotProps>;
+    /** S2: Custom edge renderers by edge type slug. Should be a stable reference (memoize or define outside render). */
+    edgeRenderers?: Record<string, React.ComponentType<EdgeSlotProps>>;
+    /** S3: Wraps every dynamic node's rendered content. Should be a stable reference (memoize or define outside render). */
+    nodeWrapper?: React.ComponentType<NodeWrapperSlotProps>;
+    /** S4: Show controls (default: false) */
+    controls?: boolean;
+    /** S4: Show minimap (default: false) */
+    minimap?: boolean;
+    /** S4: Custom minimap node color function */
+    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;
+    /** 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 */
+    bounds?: 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, }: FlowRendererProps): React.JSX.Element | null;
+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;
 
-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 SDKClient, type UseFlowOptions, type UseFlowResult, isDynamicNode, isFrameNode, useFlow };
+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 };

package/dist/ui/flow.js

@@ -1,5 +1,7 @@
 "use client";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,6 +17,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -42,7 +45,10 @@ import {
   ReactFlow,
   ReactFlowProvider,
   Background,
-  MarkerType
+  Controls,
+  MiniMap,
+  MarkerType,
+  useReactFlow
 } from "@xyflow/react";
 
 // src/ui/Flow/types.ts
@@ -209,6 +215,104 @@ function useFlow(options) {
   };
 }
 
+// src/ui/Flow/useFlowData.ts
+import { useMemo as useMemo2 } from "react";
+function useFlowData(options) {
+  const { data, nodeTypeDefs: inputNodeDefs, edgeTypeDefs: inputEdgeDefs } = options;
+  const nodeTypeDefsMap = useMemo2(() => {
+    const allDefs = inputNodeDefs != null ? inputNodeDefs : BUILT_IN_NODE_TYPES;
+    return new Map(allDefs.map((d) => [d.slug, d]));
+  }, [inputNodeDefs]);
+  const edgeTypeDefsMap = useMemo2(() => {
+    const allDefs = inputEdgeDefs != null ? inputEdgeDefs : BUILT_IN_EDGE_TYPES;
+    return new Map(allDefs.map((d) => [d.slug, d]));
+  }, [inputEdgeDefs]);
+  const nodes = useMemo2(() => {
+    var _a;
+    return (_a = data == null ? void 0 : data.nodes) != null ? _a : [];
+  }, [data == null ? void 0 : data.nodes]);
+  const edges = useMemo2(() => {
+    var _a;
+    return (_a = data == null ? void 0 : data.edges) != null ? _a : [];
+  }, [data == null ? void 0 : data.edges]);
+  return {
+    nodes,
+    edges,
+    nodeTypeDefsMap,
+    edgeTypeDefsMap
+  };
+}
+
+// src/ui/Flow/utils.ts
+function getNodeBounds(nodes, nodeIds) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const idSet = new Set(nodeIds);
+  const targetNodes = nodes.filter((n) => idSet.has(n.id));
+  if (targetNodes.length === 0) return void 0;
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  function getAbsolutePosition(node) {
+    let x = node.position.x;
+    let y = node.position.y;
+    let current = node;
+    const visited = /* @__PURE__ */ new Set([node.id]);
+    while (current.parentId) {
+      const parentId = current.parentId;
+      if (visited.has(parentId)) break;
+      const parent = nodeMap.get(parentId);
+      if (!parent) break;
+      visited.add(parent.id);
+      x += parent.position.x;
+      y += parent.position.y;
+      current = parent;
+    }
+    return { x, y };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of targetNodes) {
+    const abs = getAbsolutePosition(node);
+    const w = (_e = (_d = (_c = (_a = node.style) == null ? void 0 : _a.width) != null ? _c : (_b = node.measured) == null ? void 0 : _b.width) != null ? _d : node.width) != null ? _e : 200;
+    const h = (_j = (_i = (_h = (_f = node.style) == null ? void 0 : _f.height) != null ? _h : (_g = node.measured) == null ? void 0 : _g.height) != null ? _i : node.height) != null ? _j : 200;
+    minX = Math.min(minX, abs.x);
+    minY = Math.min(minY, abs.y);
+    maxX = Math.max(maxX, abs.x + w);
+    maxY = Math.max(maxY, abs.y + h);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function getFrames(nodes) {
+  const frames = nodes.filter((n) => n.type === "frame");
+  if (frames.length === 0) return [];
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  function getAbsolutePosition(node) {
+    let x = node.position.x;
+    let y = node.position.y;
+    let current = node;
+    const visited = /* @__PURE__ */ new Set([node.id]);
+    while (current.parentId) {
+      const parentId = current.parentId;
+      if (visited.has(parentId)) break;
+      const parent = nodeMap.get(parentId);
+      if (!parent) break;
+      visited.add(parent.id);
+      x += parent.position.x;
+      y += parent.position.y;
+      current = parent;
+    }
+    return { x, y };
+  }
+  return frames.map((f) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    const data = f.data;
+    const abs = getAbsolutePosition(f);
+    const w = (_e = (_d = (_c = (_a = f.style) == null ? void 0 : _a.width) != null ? _c : (_b = f.measured) == null ? void 0 : _b.width) != null ? _d : f.width) != null ? _e : 200;
+    const h = (_j = (_i = (_h = (_f = f.style) == null ? void 0 : _f.height) != null ? _h : (_g = f.measured) == null ? void 0 : _g.height) != null ? _i : f.height) != null ? _j : 200;
+    return { id: f.id, label: (_k = data.label) != null ? _k : "", bounds: { x: abs.x, y: abs.y, width: w, height: h } };
+  }).sort((a, b) => a.bounds.y - b.bounds.y || a.bounds.x - b.bounds.x);
+}
+
 // src/ui/Flow/index.tsx
 function sanitizeUrl(url) {
   if (!url) return url;
@@ -331,14 +435,15 @@ function DefaultFrameNode({ data }) {
     )
   );
 }
-function createNodeTypes(nodeRenderers, nodeTypeDefsMap) {
+function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode) {
   const types = {};
   types.dynamic = ((props) => {
     const d = props.data;
     const typeDef = nodeTypeDefsMap == null ? void 0 : nodeTypeDefsMap.get(d.nodeTypeSlug);
     const CustomRenderer = nodeRenderers == null ? void 0 : nodeRenderers[d.nodeTypeSlug];
+    let content;
     if (CustomRenderer) {
-      return /* @__PURE__ */ React.createElement(
+      content = /* @__PURE__ */ React.createElement(
         CustomRenderer,
         {
           id: props.id,
@@ -348,15 +453,94 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap) {
           nodeTypeDef: typeDef
         }
       );
+    } else if (typeDef) {
+      content = /* @__PURE__ */ React.createElement(EnhancedDynamicNode, { data: d, typeDef });
+    } else {
+      content = /* @__PURE__ */ React.createElement(DefaultDynamicNode, __spreadValues({}, props));
     }
-    if (typeDef) {
-      return /* @__PURE__ */ React.createElement(EnhancedDynamicNode, { data: d, typeDef });
+    if (renderNode) {
+      const slotProps = {
+        id: props.id,
+        nodeTypeSlug: d.nodeTypeSlug,
+        label: d.label,
+        fields: d.fields,
+        nodeTypeDef: typeDef
+      };
+      const result = renderNode(slotProps, content);
+      if (result !== null) content = result;
     }
-    return /* @__PURE__ */ React.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    if (nodeWrapper) {
+      const Wrapper = nodeWrapper;
+      content = /* @__PURE__ */ React.createElement(
+        Wrapper,
+        {
+          id: props.id,
+          nodeTypeSlug: d.nodeTypeSlug,
+          label: d.label,
+          selected: props.selected,
+          nodeTypeDef: typeDef
+        },
+        content
+      );
+    }
+    return content;
   });
-  types.frame = DefaultFrameNode;
+  types.frame = frameRenderer ? ((props) => {
+    const d = props.data;
+    const Renderer = frameRenderer;
+    return /* @__PURE__ */ React.createElement(
+      Renderer,
+      {
+        id: props.id,
+        label: d.label,
+        color: d.color,
+        padding: d.padding,
+        borderStyle: d.borderStyle,
+        opacity: d.opacity
+      }
+    );
+  }) : DefaultFrameNode;
   return types;
 }
+function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
+  if (!edgeRenderers || Object.keys(edgeRenderers).length === 0) return void 0;
+  const types = {};
+  for (const [slug, Renderer] of Object.entries(edgeRenderers)) {
+    types[slug] = ((props) => {
+      var _a;
+      const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
+      return /* @__PURE__ */ React.createElement(
+        Renderer,
+        {
+          id: props.id,
+          edgeTypeSlug: slug,
+          source: props.source,
+          target: props.target,
+          label: props.label,
+          fields: (_a = props.data) == null ? void 0 : _a.fields,
+          edgeTypeDef: def,
+          style: props.style
+        }
+      );
+    });
+  }
+  return types;
+}
+function FocusHandler({
+  bounds,
+  padding,
+  animation
+}) {
+  const { fitBounds } = useReactFlow();
+  const boundsKey = `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`;
+  const boundsRef = React.useRef(bounds);
+  boundsRef.current = bounds;
+  React.useEffect(() => {
+    const duration = animation === true ? 300 : typeof animation === "number" ? animation : 0;
+    fitBounds(boundsRef.current, { padding, duration });
+  }, [boundsKey, padding, animation, fitBounds]);
+  return null;
+}
 var EDGE_TYPE_MAP = {
   step: "step",
   smoothstep: "smoothstep",
@@ -403,11 +587,24 @@ function FlowRenderer({
   nodeRenderers,
   nodeTypeDefs,
   edgeTypeDefs,
-  background = true,
+  background = false,
   interactive = false,
   fitView = true,
   onNodeClick,
-  onEdgeClick
+  onEdgeClick,
+  frameRenderer,
+  edgeRenderers,
+  nodeWrapper,
+  controls,
+  minimap,
+  minimapNodeColor,
+  children,
+  renderNode,
+  onViewportChange,
+  defaultViewport: defaultViewportProp,
+  bounds,
+  focusPadding,
+  focusAnimation
 }) {
   var _a;
   const nodeTypeDefsMap = React.useMemo(() => {
@@ -419,18 +616,29 @@ function FlowRenderer({
     return new Map(edgeTypeDefs.map((d) => [d.slug, d]));
   }, [edgeTypeDefs]);
   const nodeTypes = React.useMemo(
-    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),
-    [nodeRenderers, nodeTypeDefsMap]
+    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode),
+    [nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode]
   );
-  const styledEdges = React.useMemo(
-    () => {
-      var _a2;
-      return applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
-    },
-    [data == null ? void 0 : data.edges, edgeTypeDefsMap]
+  const customEdgeTypes = React.useMemo(
+    () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
+    [edgeRenderers, edgeTypeDefsMap]
   );
+  const styledEdges = React.useMemo(() => {
+    var _a2;
+    let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
+    if (edgeRenderers) {
+      edges = edges.map((edge) => {
+        const slug = edge.edgeTypeSlug;
+        if (slug && edgeRenderers[slug]) {
+          return __spreadProps(__spreadValues({}, edge), { type: slug });
+        }
+        return edge;
+      });
+    }
+    return edges;
+  }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
   if (!data) return null;
-  const defaultViewport = !fitView && data.viewport ? data.viewport : void 0;
+  const resolvedDefaultViewport = defaultViewportProp != null ? defaultViewportProp : !fitView && data.viewport ? data.viewport : void 0;
   return /* @__PURE__ */ React.createElement(ReactFlowProvider, null, /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -443,10 +651,14 @@ function FlowRenderer({
         nodes: (_a = data.nodes) != null ? _a : [],
         edges: styledEdges,
         nodeTypes,
-        defaultViewport,
+        edgeTypes: customEdgeTypes,
+        defaultViewport: resolvedDefaultViewport,
         fitView,
         onNodeClick,
         onEdgeClick,
+        onMoveEnd: onViewportChange ? ((_, vp) => {
+          onViewportChange(vp);
+        }) : void 0,
         nodesDraggable: interactive ? void 0 : false,
         nodesConnectable: false,
         elementsSelectable: interactive || !!onNodeClick || !!onEdgeClick,
@@ -455,7 +667,23 @@ function FlowRenderer({
         zoomOnPinch: interactive,
         zoomOnDoubleClick: false
       },
-      background && /* @__PURE__ */ React.createElement(Background, null)
+      background && /* @__PURE__ */ React.createElement(Background, null),
+      controls && /* @__PURE__ */ React.createElement(Controls, null),
+      minimap && /* @__PURE__ */ React.createElement(
+        MiniMap,
+        {
+          nodeColor: minimapNodeColor
+        }
+      ),
+      bounds && /* @__PURE__ */ React.createElement(
+        FocusHandler,
+        {
+          bounds,
+          padding: focusPadding != null ? focusPadding : 0.1,
+          animation: focusAnimation != null ? focusAnimation : true
+        }
+      ),
+      children
     )
   ));
 }
@@ -463,8 +691,11 @@ export {
   BUILT_IN_EDGE_TYPES,
   BUILT_IN_NODE_TYPES,
   FlowRenderer,
+  getFrames,
+  getNodeBounds,
   isDynamicNode,
   isFrameNode,
-  useFlow
+  useFlow,
+  useFlowData
 };
 //# sourceMappingURL=flow.js.map