@pyreon/flow 0.6.0 → 0.7.0

package/lib/types/index2.d.ts

@@ -1,708 +0,0 @@
-import { Computed, Signal } from "@pyreon/reactivity";
-import { VNodeChild } from "@pyreon/core";
-
-//#region src/types.d.ts
-interface XYPosition {
-  x: number;
-  y: number;
-}
-interface Dimensions {
-  width: number;
-  height: number;
-}
-interface Rect extends XYPosition, Dimensions {}
-interface Viewport {
-  x: number;
-  y: number;
-  zoom: number;
-}
-type HandleType = 'source' | 'target';
-declare enum Position {
-  Top = "top",
-  Right = "right",
-  Bottom = "bottom",
-  Left = "left"
-}
-interface HandleConfig {
-  id?: string;
-  type: HandleType;
-  position: Position;
-}
-interface FlowNode<TData = Record<string, unknown>> {
-  id: string;
-  type?: string;
-  position: XYPosition;
-  data: TData;
-  width?: number;
-  height?: number;
-  /** Whether the node can be dragged */
-  draggable?: boolean;
-  /** Whether the node can be selected */
-  selectable?: boolean;
-  /** Whether the node can be connected to */
-  connectable?: boolean;
-  /** Custom class name */
-  class?: string;
-  /** Custom style */
-  style?: string;
-  /** Source handles */
-  sourceHandles?: HandleConfig[];
-  /** Target handles */
-  targetHandles?: HandleConfig[];
-  /** Parent node id for grouping */
-  parentId?: string;
-  /** Whether this node is a group */
-  group?: boolean;
-}
-type EdgeType = 'bezier' | 'smoothstep' | 'straight' | 'step';
-interface FlowEdge {
-  id?: string;
-  source: string;
-  target: string;
-  sourceHandle?: string;
-  targetHandle?: string;
-  type?: EdgeType;
-  label?: string;
-  animated?: boolean;
-  class?: string;
-  style?: string;
-  /** Custom data attached to the edge */
-  data?: Record<string, unknown>;
-  /** Waypoints — intermediate points the edge passes through */
-  waypoints?: XYPosition[];
-}
-interface Connection {
-  source: string;
-  target: string;
-  sourceHandle?: string;
-  targetHandle?: string;
-}
-type ConnectionRule = Record<string, {
-  outputs: string[];
-}>;
-type NodeChange = {
-  type: 'position';
-  id: string;
-  position: XYPosition;
-} | {
-  type: 'dimensions';
-  id: string;
-  dimensions: Dimensions;
-} | {
-  type: 'select';
-  id: string;
-  selected: boolean;
-} | {
-  type: 'remove';
-  id: string;
-};
-interface EdgePathResult {
-  path: string;
-  labelX: number;
-  labelY: number;
-}
-interface FlowConfig {
-  nodes?: FlowNode[];
-  edges?: FlowEdge[];
-  /** Default edge type */
-  defaultEdgeType?: EdgeType;
-  /** Min zoom level — default: 0.1 */
-  minZoom?: number;
-  /** Max zoom level — default: 4 */
-  maxZoom?: number;
-  /** Snap to grid */
-  snapToGrid?: boolean;
-  /** Grid size for snapping — default: 15 */
-  snapGrid?: number;
-  /** Connection rules — which node types can connect */
-  connectionRules?: ConnectionRule;
-  /** Whether nodes are draggable by default — default: true */
-  nodesDraggable?: boolean;
-  /** Whether nodes are connectable by default — default: true */
-  nodesConnectable?: boolean;
-  /** Whether nodes are selectable by default — default: true */
-  nodesSelectable?: boolean;
-  /** Whether to allow multi-selection — default: true */
-  multiSelect?: boolean;
-  /** Drag boundaries for nodes — [[minX, minY], [maxX, maxY]] */
-  nodeExtent?: [[number, number], [number, number]];
-  /** Whether panning is enabled — default: true */
-  pannable?: boolean;
-  /** Whether zooming is enabled — default: true */
-  zoomable?: boolean;
-  /** Fit view on initial render — default: false */
-  fitView?: boolean;
-  /** Padding for fitView — default: 0.1 */
-  fitViewPadding?: number;
-}
-interface FlowInstance {
-  /** All nodes — reactive */
-  nodes: Signal<FlowNode[]>;
-  /** All edges — reactive */
-  edges: Signal<FlowEdge[]>;
-  /** Viewport state — reactive */
-  viewport: Signal<Viewport>;
-  /** Current zoom level — computed */
-  zoom: Computed<number>;
-  /** Selected node ids — computed */
-  selectedNodes: Computed<string[]>;
-  /** Selected edge ids — computed */
-  selectedEdges: Computed<string[]>;
-  /** Container dimensions — updated by the Flow component via ResizeObserver */
-  containerSize: Signal<{
-    width: number;
-    height: number;
-  }>;
-  /** Get a single node by id */
-  getNode: (id: string) => FlowNode | undefined;
-  /** Add a node */
-  addNode: (node: FlowNode) => void;
-  /** Remove a node and its connected edges */
-  removeNode: (id: string) => void;
-  /** Update a node's properties */
-  updateNode: (id: string, update: Partial<FlowNode>) => void;
-  /** Update a node's position */
-  updateNodePosition: (id: string, position: XYPosition) => void;
-  /** Get a single edge by id */
-  getEdge: (id: string) => FlowEdge | undefined;
-  /** Add an edge */
-  addEdge: (edge: FlowEdge) => void;
-  /** Remove an edge */
-  removeEdge: (id: string) => void;
-  /** Check if a connection is valid (based on rules) */
-  isValidConnection: (connection: Connection) => boolean;
-  /** Select a node */
-  selectNode: (id: string, additive?: boolean) => void;
-  /** Deselect a node */
-  deselectNode: (id: string) => void;
-  /** Select an edge */
-  selectEdge: (id: string, additive?: boolean) => void;
-  /** Clear all selection */
-  clearSelection: () => void;
-  /** Select all nodes */
-  selectAll: () => void;
-  /** Delete selected nodes/edges */
-  deleteSelected: () => void;
-  /** Fit view to show all nodes */
-  fitView: (nodeIds?: string[], padding?: number) => void;
-  /** Set zoom level */
-  zoomTo: (zoom: number) => void;
-  /** Zoom in */
-  zoomIn: () => void;
-  /** Zoom out */
-  zoomOut: () => void;
-  /** Pan to position */
-  panTo: (position: XYPosition) => void;
-  /** Check if a node is visible in the current viewport */
-  isNodeVisible: (id: string) => boolean;
-  /** Apply auto-layout using elkjs */
-  layout: (algorithm?: LayoutAlgorithm, options?: LayoutOptions) => Promise<void>;
-  /** Batch multiple operations */
-  batch: (fn: () => void) => void;
-  /** Get edges connected to a node */
-  getConnectedEdges: (nodeId: string) => FlowEdge[];
-  /** Get incoming edges for a node */
-  getIncomers: (nodeId: string) => FlowNode[];
-  /** Get outgoing edges from a node */
-  getOutgoers: (nodeId: string) => FlowNode[];
-  /** Called when a connection is made */
-  onConnect: (callback: (connection: Connection) => void) => () => void;
-  /** Called when nodes change */
-  onNodesChange: (callback: (changes: NodeChange[]) => void) => () => void;
-  /** Called when a node is clicked */
-  onNodeClick: (callback: (node: FlowNode) => void) => () => void;
-  /** Called when an edge is clicked */
-  onEdgeClick: (callback: (edge: FlowEdge) => void) => () => void;
-  /** Called when a node starts being dragged */
-  onNodeDragStart: (callback: (node: FlowNode) => void) => () => void;
-  /** Called when a node stops being dragged */
-  onNodeDragEnd: (callback: (node: FlowNode) => void) => () => void;
-  /** Called when a node is double-clicked */
-  onNodeDoubleClick: (callback: (node: FlowNode) => void) => () => void;
-  /** Copy selected nodes and their edges to clipboard */
-  copySelected: () => void;
-  /** Paste clipboard contents with offset */
-  paste: (offset?: XYPosition) => void;
-  /** Save current state to undo history */
-  pushHistory: () => void;
-  /** Undo last change */
-  undo: () => void;
-  /** Redo last undone change */
-  redo: () => void;
-  /** Move all selected nodes by dx/dy */
-  moveSelectedNodes: (dx: number, dy: number) => void;
-  /** Get snap guide lines for a dragged node */
-  getSnapLines: (dragNodeId: string, position: XYPosition, threshold?: number) => {
-    x: number | null;
-    y: number | null;
-    snappedPosition: XYPosition;
-  };
-  /** Get child nodes of a group node */
-  getChildNodes: (parentId: string) => FlowNode[];
-  /** Get absolute position of a node (accounting for parent offsets) */
-  getAbsolutePosition: (nodeId: string) => XYPosition;
-  /** Add a waypoint (bend point) to an edge */
-  addEdgeWaypoint: (edgeId: string, point: XYPosition, index?: number) => void;
-  /** Remove a waypoint from an edge */
-  removeEdgeWaypoint: (edgeId: string, index: number) => void;
-  /** Update a waypoint position */
-  updateEdgeWaypoint: (edgeId: string, index: number, point: XYPosition) => void;
-  /** Reconnect an edge to a new source/target */
-  reconnectEdge: (edgeId: string, newConnection: {
-    source?: string;
-    target?: string;
-    sourceHandle?: string;
-    targetHandle?: string;
-  }) => void;
-  /** Find the nearest unconnected node within threshold distance */
-  getProximityConnection: (nodeId: string, threshold?: number) => Connection | null;
-  /** Get nodes that overlap with the given node */
-  getOverlappingNodes: (nodeId: string) => FlowNode[];
-  /** Push overlapping nodes apart */
-  resolveCollisions: (nodeId: string, spacing?: number) => void;
-  /** Set drag boundaries for all nodes — [[minX, minY], [maxX, maxY]] or null to remove */
-  setNodeExtent: (extent: [[number, number], [number, number]] | null) => void;
-  /** Clamp a position to the current node extent */
-  clampToExtent: (position: XYPosition, nodeWidth?: number, nodeHeight?: number) => XYPosition;
-  /** Find nodes matching a predicate */
-  findNodes: (predicate: (node: FlowNode) => boolean) => FlowNode[];
-  /** Find nodes by label text (case-insensitive) */
-  searchNodes: (query: string) => FlowNode[];
-  /** Focus viewport on a specific node (pan + optional zoom) */
-  focusNode: (nodeId: string, zoom?: number) => void;
-  /** Export the flow as a JSON-serializable object */
-  toJSON: () => {
-    nodes: FlowNode[];
-    edges: FlowEdge[];
-    viewport: Viewport;
-  };
-  /** Import flow state from a JSON object */
-  fromJSON: (data: {
-    nodes: FlowNode[];
-    edges: FlowEdge[];
-    viewport?: Viewport;
-  }) => void;
-  /** Animate viewport to a new position/zoom */
-  animateViewport: (target: Partial<Viewport>, duration?: number) => void;
-  /** @internal */
-  _emit: {
-    nodeDragStart: (node: FlowNode) => void;
-    nodeDragEnd: (node: FlowNode) => void;
-    nodeDoubleClick: (node: FlowNode) => void;
-    nodeClick: (node: FlowNode) => void;
-    edgeClick: (edge: FlowEdge) => void;
-  };
-  /** The flow configuration */
-  config: FlowConfig;
-  /** Dispose all listeners and clean up */
-  dispose: () => void;
-}
-type LayoutAlgorithm = 'layered' | 'force' | 'stress' | 'tree' | 'radial' | 'box' | 'rectpacking';
-interface LayoutOptions {
-  /** Layout direction — default: 'DOWN' */
-  direction?: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
-  /** Spacing between nodes — default: 50 */
-  nodeSpacing?: number;
-  /** Spacing between layers — default: 80 */
-  layerSpacing?: number;
-  /** Edge routing — default: 'orthogonal' */
-  edgeRouting?: 'orthogonal' | 'splines' | 'polyline';
-  /** Whether to animate the layout transition — default: true */
-  animate?: boolean;
-  /** Animation duration in ms — default: 300 */
-  animationDuration?: number;
-}
-interface FlowProps {
-  instance: FlowInstance;
-  style?: string;
-  class?: string;
-  children?: VNodeChild;
-}
-interface BackgroundProps {
-  variant?: 'dots' | 'lines' | 'cross';
-  gap?: number;
-  size?: number;
-  color?: string;
-}
-interface MiniMapProps {
-  style?: string;
-  class?: string;
-  nodeColor?: string | ((node: FlowNode) => string);
-  maskColor?: string;
-  width?: number;
-  height?: number;
-}
-interface ControlsProps {
-  showZoomIn?: boolean;
-  showZoomOut?: boolean;
-  showFitView?: boolean;
-  showLock?: boolean;
-  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-}
-interface PanelProps {
-  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-  style?: string;
-  class?: string;
-  children?: VNodeChild;
-}
-interface HandleProps {
-  type: HandleType;
-  position: Position;
-  id?: string;
-  style?: string;
-  class?: string;
-}
-type NodeComponentProps<TData = Record<string, unknown>> = {
-  id: string;
-  data: TData;
-  selected: boolean;
-  dragging: boolean;
-};
-//#endregion
-//#region src/components/background.d.ts
-/**
- * Background pattern for the flow canvas.
- * Renders dots, lines, or cross patterns that move with the viewport.
- *
- * @example
- * ```tsx
- * <Flow instance={flow}>
- *   <Background variant="dots" gap={20} />
- * </Flow>
- * ```
- */
-declare function Background(props: BackgroundProps): VNodeChild;
-//#endregion
-//#region src/components/controls.d.ts
-/**
- * Zoom and viewport controls for the flow canvas.
- * Shows zoom in, zoom out, fit view, and optional lock button.
- *
- * @example
- * ```tsx
- * <Flow instance={flow}>
- *   <Controls />
- * </Flow>
- * ```
- */
-declare function Controls(props: ControlsProps & {
-  instance?: FlowInstance;
-}): VNodeChild;
-//#endregion
-//#region src/components/flow-component.d.ts
-type NodeTypeMap = Record<string, (props: NodeComponentProps<any>) => VNodeChild>;
-type EdgeTypeMap = Record<string, (props: {
-  edge: FlowEdge;
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-  selected: boolean;
-}) => VNodeChild>;
-interface FlowComponentProps {
-  instance: FlowInstance;
-  /** Custom node type renderers */
-  nodeTypes?: NodeTypeMap;
-  /** Custom edge type renderers */
-  edgeTypes?: EdgeTypeMap;
-  style?: string;
-  class?: string;
-  children?: VNodeChild;
-}
-/**
- * The main Flow component — renders the interactive flow diagram.
- *
- * Supports node dragging, connection drawing, custom node types,
- * pan/zoom, and all standard flow interactions.
- *
- * @example
- * ```tsx
- * const flow = createFlow({
- *   nodes: [...],
- *   edges: [...],
- * })
- *
- * <Flow instance={flow} nodeTypes={{ custom: CustomNode }}>
- *   <Background />
- *   <MiniMap />
- *   <Controls />
- * </Flow>
- * ```
- */
-declare function Flow(props: FlowComponentProps): VNodeChild;
-//#endregion
-//#region src/components/handle.d.ts
-/**
- * Connection handle — attachment point on a node where edges connect.
- * Place inside custom node components.
- *
- * @example
- * ```tsx
- * function CustomNode({ data }: NodeComponentProps) {
- *   return (
- *     <div class="custom-node">
- *       <Handle type="target" position={Position.Left} />
- *       <span>{data.label}</span>
- *       <Handle type="source" position={Position.Right} />
- *     </div>
- *   )
- * }
- * ```
- */
-declare function Handle(props: HandleProps): VNodeChild;
-//#endregion
-//#region src/components/minimap.d.ts
-/**
- * Miniature overview of the flow diagram showing all nodes
- * and the current viewport position. Click to navigate.
- *
- * @example
- * ```tsx
- * <Flow instance={flow}>
- *   <MiniMap nodeColor={(n) => n.type === 'error' ? 'red' : '#ddd'} />
- * </Flow>
- * ```
- */
-declare function MiniMap(props: MiniMapProps & {
-  instance?: FlowInstance;
-}): VNodeChild;
-//#endregion
-//#region src/components/node-resizer.d.ts
-interface NodeResizerProps {
-  nodeId: string;
-  instance: FlowInstance;
-  /** Minimum width — default: 50 */
-  minWidth?: number;
-  /** Minimum height — default: 30 */
-  minHeight?: number;
-  /** Handle size in px — default: 8 */
-  handleSize?: number;
-  /** Also show edge (non-corner) resize handles — default: false */
-  showEdgeHandles?: boolean;
-}
-/**
- * Node resize handles. Place inside a custom node component
- * to allow users to resize the node by dragging corners or edges.
- *
- * Uses pointer capture for clean event handling — no document listener leaks.
- *
- * @example
- * ```tsx
- * function ResizableNode({ id, data, selected }: NodeComponentProps) {
- *   return (
- *     <div style="min-width: 100px; min-height: 50px; position: relative;">
- *       {data.label}
- *       <NodeResizer nodeId={id} instance={flow} />
- *     </div>
- *   )
- * }
- * ```
- */
-declare function NodeResizer(props: NodeResizerProps): VNodeChild;
-//#endregion
-//#region src/components/node-toolbar.d.ts
-interface NodeToolbarProps {
-  /** Position relative to node — default: 'top' */
-  position?: 'top' | 'bottom' | 'left' | 'right';
-  /** Offset from node in px — default: 8 */
-  offset?: number;
-  /** Only show when node is selected — default: true */
-  showOnSelect?: boolean;
-  /** Whether the node is currently selected */
-  selected?: boolean;
-  style?: string;
-  class?: string;
-  children?: VNodeChild;
-}
-/**
- * Floating toolbar that appears near a node, typically when selected.
- * Place inside a custom node component.
- *
- * @example
- * ```tsx
- * function EditableNode({ id, data, selected }: NodeComponentProps) {
- *   return (
- *     <div class="node">
- *       {data.label}
- *       <NodeToolbar selected={selected}>
- *         <button onClick={() => duplicate(id)}>Duplicate</button>
- *         <button onClick={() => remove(id)}>Delete</button>
- *       </NodeToolbar>
- *     </div>
- *   )
- * }
- * ```
- */
-declare function NodeToolbar(props: NodeToolbarProps): VNodeChild;
-//#endregion
-//#region src/components/panel.d.ts
-/**
- * Positioned overlay panel for custom content inside the flow canvas.
- *
- * @example
- * ```tsx
- * <Flow instance={flow}>
- *   <Panel position="top-right">
- *     <SearchBar />
- *   </Panel>
- * </Flow>
- * ```
- */
-declare function Panel(props: PanelProps): VNodeChild;
-//#endregion
-//#region src/edges.d.ts
-/**
- * Auto-detect the best handle position based on relative node positions.
- * If the node has configured handles, uses those. Otherwise picks the
- * closest edge (top/right/bottom/left) based on direction to the other node.
- */
-declare function getSmartHandlePositions(sourceNode: FlowNode, targetNode: FlowNode): {
-  sourcePosition: Position;
-  targetPosition: Position;
-};
-/**
- * Get the handle position offset for a given position (top/right/bottom/left).
- */
-declare function getHandlePosition(position: Position, nodeX: number, nodeY: number, nodeWidth: number, nodeHeight: number, _handleId?: string): XYPosition;
-/**
- * Calculate a cubic bezier edge path between two points.
- *
- * @example
- * ```ts
- * const { path, labelX, labelY } = getBezierPath({
- *   sourceX: 0, sourceY: 0, sourcePosition: Position.Right,
- *   targetX: 200, targetY: 100, targetPosition: Position.Left,
- * })
- * // path = "M0,0 C100,0 100,100 200,100"
- * ```
- */
-declare function getBezierPath(params: {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  curvature?: number;
-}): EdgePathResult;
-/**
- * Calculate a smoothstep edge path — horizontal/vertical segments with rounded corners.
- */
-declare function getSmoothStepPath(params: {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  borderRadius?: number;
-  offset?: number;
-}): EdgePathResult;
-/**
- * Calculate a straight edge path — direct line between two points.
- */
-declare function getStraightPath(params: {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-}): EdgePathResult;
-/**
- * Calculate a step edge path — right-angle segments with no rounding.
- */
-declare function getStepPath(params: {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-}): EdgePathResult;
-/**
- * Calculate an edge path that passes through waypoints.
- * Uses line segments with optional smoothing.
- */
-declare function getWaypointPath(params: {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-  waypoints: XYPosition[];
-}): EdgePathResult;
-/**
- * Get the edge path for a given edge type.
- */
-declare function getEdgePath(type: string, sourceX: number, sourceY: number, sourcePosition: Position, targetX: number, targetY: number, targetPosition: Position): EdgePathResult;
-//#endregion
-//#region src/flow.d.ts
-/**
- * Create a reactive flow instance — the core state manager for flow diagrams.
- *
- * All state is signal-based. Nodes, edges, viewport, and selection are
- * reactive and update the UI automatically when modified.
- *
- * @param config - Initial configuration with nodes, edges, and options
- * @returns A FlowInstance with signals and methods for managing the diagram
- *
- * @example
- * ```tsx
- * const flow = createFlow({
- *   nodes: [
- *     { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
- *     { id: '2', position: { x: 200, y: 100 }, data: { label: 'End' } },
- *   ],
- *   edges: [{ source: '1', target: '2' }],
- * })
- *
- * flow.nodes()          // reactive node list
- * flow.viewport()       // { x: 0, y: 0, zoom: 1 }
- * flow.addNode({ id: '3', position: { x: 400, y: 0 }, data: { label: 'New' } })
- * flow.layout('layered', { direction: 'RIGHT' })
- * ```
- */
-declare function createFlow(config?: FlowConfig): FlowInstance;
-//#endregion
-//#region src/layout.d.ts
-/**
- * Compute a layout for the given nodes and edges using elkjs.
- * Returns an array of { id, position } for each node.
- *
- * elkjs is lazy-loaded — zero bundle cost until this function is called.
- *
- * @example
- * ```ts
- * const positions = await computeLayout(nodes, edges, 'layered', {
- *   direction: 'RIGHT',
- *   nodeSpacing: 50,
- *   layerSpacing: 100,
- * })
- * // positions: [{ id: '1', position: { x: 0, y: 0 } }, ...]
- * ```
- */
-declare function computeLayout(nodes: FlowNode[], edges: FlowEdge[], algorithm?: LayoutAlgorithm, options?: LayoutOptions): Promise<Array<{
-  id: string;
-  position: {
-    x: number;
-    y: number;
-  };
-}>>;
-//#endregion
-//#region src/styles.d.ts
-/**
- * Default CSS styles for the flow diagram.
- * Inject via `<style>` tag or import in your CSS.
- *
- * @example
- * ```tsx
- * import { flowStyles } from '@pyreon/flow'
- *
- * // Inject once at app root
- * const style = document.createElement('style')
- * style.textContent = flowStyles
- * document.head.appendChild(style)
- * ```
- */
-declare const flowStyles = "\n/* \u2500\u2500 Animated edges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-edge-animated {\n  stroke-dasharray: 5;\n  animation: pyreon-flow-edge-dash 0.5s linear infinite;\n}\n\n@keyframes pyreon-flow-edge-dash {\n  to {\n    stroke-dashoffset: -10;\n  }\n}\n\n/* \u2500\u2500 Node states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-node {\n  transition: box-shadow 0.15s ease;\n}\n\n.pyreon-flow-node.dragging {\n  opacity: 0.9;\n  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));\n  cursor: grabbing;\n}\n\n.pyreon-flow-node.selected {\n  filter: drop-shadow(0 0 0 2px rgba(59, 130, 246, 0.3));\n}\n\n/* \u2500\u2500 Handles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-handle {\n  transition: transform 0.1s ease, background 0.1s ease;\n}\n\n.pyreon-flow-handle:hover {\n  transform: scale(1.4);\n  background: #3b82f6 !important;\n}\n\n.pyreon-flow-handle-target:hover {\n  background: #22c55e !important;\n  border-color: #22c55e !important;\n}\n\n/* \u2500\u2500 Resizer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-resizer {\n  transition: background 0.1s ease, transform 0.1s ease;\n}\n\n.pyreon-flow-resizer:hover {\n  background: #3b82f6 !important;\n  transform: scale(1.2);\n}\n\n/* \u2500\u2500 Selection box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-selection-box {\n  pointer-events: none;\n  border-radius: 2px;\n}\n\n/* \u2500\u2500 MiniMap \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-minimap {\n  transition: opacity 0.2s ease;\n}\n\n.pyreon-flow-minimap:hover {\n  opacity: 1 !important;\n}\n\n/* \u2500\u2500 Node toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-node-toolbar {\n  animation: pyreon-flow-toolbar-enter 0.15s ease;\n}\n\n@keyframes pyreon-flow-toolbar-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n/* \u2500\u2500 Controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pyreon-flow-controls button:hover {\n  background: #f3f4f6 !important;\n}\n\n.pyreon-flow-controls button:active {\n  background: #e5e7eb !important;\n}\n";
-//#endregion
-export { Background, type BackgroundProps, type Connection, type ConnectionRule, Controls, type ControlsProps, type Dimensions, type EdgePathResult, type EdgeType, Flow, type FlowComponentProps, type FlowConfig, type FlowEdge, type FlowInstance, type FlowNode, type FlowProps, Handle, type HandleConfig, type HandleProps, type HandleType, type LayoutAlgorithm, type LayoutOptions, MiniMap, type MiniMapProps, type NodeChange, type NodeComponentProps, NodeResizer, type NodeResizerProps, NodeToolbar, type NodeToolbarProps, Panel, type PanelProps, Position, type Rect, type Viewport, type XYPosition, computeLayout, createFlow, flowStyles, getBezierPath, getEdgePath, getHandlePosition, getSmartHandlePositions, getSmoothStepPath, getStepPath, getStraightPath, getWaypointPath };
-//# sourceMappingURL=index2.d.ts.map