@cascivo/flow 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,706 +0,0 @@
-import { ReadonlySignal, Signal } from "@cascivo/core";
-import { CSSProperties, HTMLAttributes, ReactNode, RefObject } from "react";
-
-/** Shared geometry + graph types for the flow engine. */
-interface XYPosition {
-  x: number;
-  y: number;
-}
-type HandlePosition = 'top' | 'right' | 'bottom' | 'left';
-interface NodeSize {
-  width: number;
-  height: number;
-}
-/** A graph node. Positioned in flow coordinates; renders as themed HTML. */
-interface FlowNode$1<Data = Record<string, unknown>> {
-  id: string;
-  position: XYPosition;
-  data?: Data;
-  /** Custom renderer key resolved via `nodeTypes`. */
-  type?: string;
-  selected?: boolean;
-  /** Explicit/measured size used for handle anchors + bounding boxes. */
-  width?: number;
-  height?: number;
-}
-type EdgePathType = 'bezier' | 'straight' | 'smoothstep';
-/** A directed connection between two nodes' handles. */
-interface FlowEdge$1 {
-  id: string;
-  source: string;
-  target: string;
-  sourceHandle?: string;
-  targetHandle?: string;
-  /** Custom renderer key resolved via `edgeTypes`. */
-  type?: EdgePathType | string;
-  animated?: boolean;
-  label?: string;
-  selected?: boolean;
-  /** Arrowhead at the source end (points back toward the source). Default false. */
-  markerStart?: boolean;
-  /** Arrowhead at the target end (points at the target). Default true. */
-  markerEnd?: boolean;
-}
-/** The pan/zoom state of the canvas pane. */
-interface Viewport {
-  x: number;
-  y: number;
-  zoom: number;
-}
-/** A new connection produced by interactive connect. */
-interface Connection {
-  source: string;
-  target: string;
-  sourceHandle?: string | undefined;
-  targetHandle?: string | undefined;
-}
-/** Default node footprint when a node has no explicit/measured size. */
-declare const DEFAULT_NODE_SIZE: NodeSize;
-interface UseFlowOptions {
-  /** Controlled nodes. When provided, the parent owns node state. */
-  nodes?: FlowNode$1[] | undefined;
-  defaultNodes?: FlowNode$1[] | undefined;
-  onNodesChange?: ((nodes: FlowNode$1[]) => void) | undefined;
-  /** Controlled edges. */
-  edges?: FlowEdge$1[] | undefined;
-  defaultEdges?: FlowEdge$1[] | undefined;
-  onEdgesChange?: ((edges: FlowEdge$1[]) => void) | undefined;
-  /** Controlled viewport. */
-  viewport?: Viewport | undefined;
-  defaultViewport?: Viewport | undefined;
-  onViewportChange?: ((viewport: Viewport) => void) | undefined;
-}
-interface FlowStore {
-  nodes: Signal<FlowNode$1[]>;
-  edges: Signal<FlowEdge$1[]>;
-  viewport: Signal<Viewport>;
-  setNodes: (nodes: FlowNode$1[]) => void;
-  updateNode: (id: string, patch: Partial<FlowNode$1>) => void;
-  setEdges: (edges: FlowEdge$1[]) => void;
-  addEdge: (edge: FlowEdge$1) => void;
-  setViewport: (viewport: Viewport) => void;
-}
-/**
- * The flow state model — plain signals (no Zustand, no MVX). `nodes`, `edges`,
- * and `viewport` are controllable signals with action helpers. No banned hooks.
- */
-declare function useFlow(options?: UseFlowOptions): FlowStore;
-/** Clamp a zoom level into the allowed range. */
-declare function clampZoom(zoom: number, min?: number, max?: number): number;
-/**
- * Convert a screen-space point (relative to the pane origin) into flow
- * coordinates. Inverse of `flowToScreen`. The pane applies
- * `translate(viewport.x, viewport.y) scale(viewport.zoom)` with origin `0 0`,
- * so a flow point maps to `p * zoom + translate`.
- */
-declare function screenToFlow(point: XYPosition, viewport: Viewport): XYPosition;
-/** Convert a flow-space point into screen coordinates (relative to the pane origin). */
-declare function flowToScreen(point: XYPosition, viewport: Viewport): XYPosition;
-interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-interface Size {
-  width: number;
-  height: number;
-}
-/** The effective size of a node (explicit/measured, else the default footprint). */
-declare function nodeSize(node: FlowNode$1): NodeSize;
-/** The node's bounding rectangle in flow coordinates. */
-declare function nodeBounds(node: FlowNode$1): Rect;
-/** The `{x,y}` (flow coords) where an edge attaches for a given handle position. */
-declare function handleAnchor(node: FlowNode$1, position: HandlePosition): XYPosition;
-/** Bounding box (flow coords) enclosing all nodes — the input to fit-view. */
-declare function graphBounds(nodes: readonly FlowNode$1[]): Rect | null;
-interface FitViewportOptions {
-  /** Fractional padding around the graph (0.1 = 10% on each side). */
-  padding?: number;
-  minZoom?: number;
-  maxZoom?: number;
-}
-/**
- * Compute the `viewport` (x/y/zoom) that frames `bounds` inside a container of
- * `container` size, with padding. Pure math — testable with injected sizes.
- */
-declare function fitViewport(bounds: Rect, container: Size, options?: FitViewportOptions): Viewport;
-interface EdgePathParams {
-  source: XYPosition;
-  target: XYPosition;
-  sourcePosition?: HandlePosition;
-  targetPosition?: HandlePosition;
-}
-interface EdgePath {
-  /** The SVG `d` attribute. */
-  d: string;
-  /** The path midpoint — where an edge label is placed. */
-  mid: XYPosition;
-}
-/** A straight line from source to target. */
-declare function straightPath({
-  source,
-  target
-}: EdgePathParams): EdgePath;
-/**
- * A cubic-bezier edge with control points offset along each handle's outward
- * normal. `curvature` scales the control distance relative to the endpoint gap.
- */
-declare function bezierPath(params: EdgePathParams & {
-  curvature?: number;
-}): EdgePath;
-/**
- * An orthogonal "step" edge with rounded corners. Splits perpendicular to the
- * source handle's orientation (horizontal handle → vertical split, and vice versa).
- */
-declare function smoothStepPath(params: EdgePathParams & {
-  borderRadius?: number;
-}): EdgePath;
-/** Dispatch to the builder for `type`. */
-declare function edgePath(type: EdgePathType, params: EdgePathParams): EdgePath;
-interface GridLayoutOptions {
-  columns?: number;
-  gap?: number;
-  nodeWidth?: number;
-  nodeHeight?: number;
-}
-/**
- * Arrange nodes in a simple grid. Pure — returns new nodes with computed
- * `position`s. Bring your own layout for complex graphs.
- */
-declare function gridLayout(nodes: FlowNode$1[], options?: GridLayoutOptions): FlowNode$1[];
-interface LayeredLayoutOptions {
-  /** 'LR' = left→right (default), 'TB' = top→bottom. */
-  direction?: 'LR' | 'TB';
-  gap?: number;
-  nodeWidth?: number;
-  nodeHeight?: number;
-}
-/**
- * A minimal longest-path layering for DAGs (no Dagre/ELK). Each node's layer is
- * the longest path from a root; nodes share a layer along the cross axis. Pure,
- * deterministic. Documented as basic — bring your own layout for complex graphs.
- */
-declare function layeredLayout(nodes: FlowNode$1[], edges: FlowEdge$1[], options?: LayeredLayoutOptions): FlowNode$1[];
-type LayoutStrategy = 'grid' | 'layered' | ((nodes: FlowNode$1[], edges: FlowEdge$1[]) => FlowNode$1[]);
-/** Apply a layout strategy to nodes. */
-declare function applyLayout(nodes: FlowNode$1[], edges: FlowEdge$1[], layout: LayoutStrategy): FlowNode$1[];
-interface StoryStepBase {
-  label?: string | undefined;
-  description?: string | undefined;
-  /** Override the default per-step duration (ms). */
-  duration?: number | undefined;
-}
-/** A step expressed as a node pair — the engine finds the connecting edge. */
-interface StoryStepFromTo extends StoryStepBase {
-  from: string;
-  to: string;
-}
-/** A power-user step that names the edge directly. */
-interface StoryStepEdge extends StoryStepBase {
-  edge: string;
-  reverse?: boolean | undefined;
-}
-type StoryStep = StoryStepFromTo | StoryStepEdge;
-interface ResolvedStep {
-  edgeId: string;
-  direction: 'forward' | 'reverse';
-  label?: string | undefined;
-  description?: string | undefined;
-  duration?: number | undefined;
-}
-/**
- * Resolve one step to an edge id + travel direction. For `{from,to}`, finds the
- * edge connecting the pair in either orientation (so one `A<->B` edge serves
- * both `A→B` and `B→A`). Throws on a step that matches no edge (fail-fast).
- */
-declare function resolveStep(step: StoryStep, edges: readonly FlowEdge$1[]): ResolvedStep;
-/** Resolve a whole script. Pure + deterministic. */
-declare function resolveScript(script: readonly StoryStep[], edges: readonly FlowEdge$1[]): ResolvedStep[];
-interface UseViewportOptions {
-  minZoom?: number | undefined;
-  maxZoom?: number | undefined;
-  /** Drag the empty pane to pan. Default true. */
-  panOnDrag?: boolean | undefined;
-  /** Wheel/pinch to zoom. Default true. */
-  zoomOnScroll?: boolean | undefined;
-  /** Fractional padding used by `fitView`. Default 0.1. */
-  fitPadding?: number | undefined;
-  /** Frame the graph once, when the container is first measured. Default false. */
-  fitOnInit?: boolean | undefined;
-}
-interface UseViewportReturn {
-  /** Outer clipping container — attach for wheel + size measurement. */
-  containerRef: RefObject<HTMLDivElement | null>;
-  /** Background drag-surface (behind nodes) — the pan handle. */
-  panHandleRef: RefObject<HTMLElement | null>;
-  viewport: Signal<Viewport>;
-  /** Translate the viewport by a screen-space delta. */
-  pan: (dx: number, dy: number) => void;
-  /** Set zoom (clamped), optionally keeping `center` (container coords) fixed. */
-  zoomTo: (zoom: number, center?: XYPosition) => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  /** Frame all nodes. Accepts an explicit container size (else the measured one). */
-  fitView: (size?: Size) => void;
-}
-/**
- * Pan/zoom/fit-view actions over the store's `viewport` signal. Pan reuses
- * `useDraggable` on the background surface; zoom attaches a clamped `wheel`
- * listener in `useSignalEffect`; fit-view composes `graphBounds` + the measured
- * container size. No `useState`/`useEffect`.
- */
-declare function useViewport(flow: FlowStore, options?: UseViewportOptions): UseViewportReturn;
-interface ConnectionState {
-  source: string;
-  sourceHandle?: string | undefined;
-  /** Source anchor (flow coords) — the live path origin. */
-  from: XYPosition;
-  /** Current pointer (flow coords) — the live path end. */
-  to: XYPosition;
-}
-interface UseConnectionOptions {
-  /** The canvas container; pointerdown on a source handle within it starts a connection. */
-  containerRef: RefObject<HTMLElement | null>;
-  /** Convert client (screen) coordinates to flow coordinates. */
-  clientToFlow: (clientX: number, clientY: number) => XYPosition;
-  onConnect?: ((connection: Connection) => void) | undefined;
-  isValid?: ((connection: Connection) => boolean) | undefined;
-  /** When false, interactive connect is disabled (view mode). Default true. */
-  enabled?: boolean | undefined;
-}
-interface UseConnectionReturn {
-  /** The in-progress connection, or null. The canvas draws a live path from it. */
-  connection: ReadonlySignal<ConnectionState | null>;
-}
-/**
- * Drag from a `source` handle to a `target` handle to create an edge. Tracks a
- * live connection in a signal; on a valid drop fires `onConnect`. All pointer
- * side effects live in `useSignalEffect`; SSR-guarded; no pointer capture (so
- * `pointerup.target` resolves to the handle under the pointer).
- */
-declare function useConnection(options: UseConnectionOptions): UseConnectionReturn;
-interface StoryClock {
-  setTimeout: (callback: () => void, ms: number) => unknown;
-  clearTimeout: (handle: unknown) => void;
-}
-interface UseStoryOptions {
-  steps: ResolvedStep[];
-  loop?: boolean | undefined;
-  /** Controlled play state. */
-  playing?: boolean | undefined;
-  defaultPlaying?: boolean | undefined;
-  onPlayingChange?: ((playing: boolean) => void) | undefined;
-  /** Controlled step index. */
-  currentStep?: number | undefined;
-  defaultCurrentStep?: number | undefined;
-  onStepChange?: ((step: number) => void) | undefined;
-  /** Default per-step duration (ms). */
-  stepDuration?: number | undefined;
-  /** Extra pause added after each step before advancing (ms). Default 0. */
-  stepGap?: number | undefined;
-  /** Injectable clock for deterministic tests (default real timers). */
-  clock?: StoryClock | undefined;
-}
-interface UseStoryReturn {
-  currentStep: Signal<number>;
-  playing: Signal<boolean>;
-  activeStep: ReadonlySignal<ResolvedStep | null>;
-  play: () => void;
-  pause: () => void;
-  toggle: () => void;
-  next: () => void;
-  prev: () => void;
-  restart: () => void;
-}
-/**
- * The storyline sequencer: a `currentStep` signal advanced by a timer inside
- * `useSignalEffect` (the carousel/relative-time idiom) with an injectable clock
- * for deterministic tests. Loops when `loop`. No `useEffect`/wall-clock.
- */
-declare function useStory(options: UseStoryOptions): UseStoryReturn;
-interface FlowCanvasProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  children?: ReactNode;
-  /** Share an external store (e.g. from `<Flow>`). When omitted, an internal one is created. */
-  flow?: FlowStore;
-  /** Controlled viewport (used only when no external `flow` is provided). */
-  viewport?: Viewport;
-  defaultViewport?: Viewport;
-  onViewportChange?: ((viewport: Viewport) => void) | undefined;
-  minZoom?: number | undefined;
-  maxZoom?: number | undefined;
-  /** Drag the empty pane to pan. Default true. */
-  panOnDrag?: boolean | undefined;
-  /** Wheel/pinch to zoom. Default true. */
-  zoomOnScroll?: boolean | undefined;
-  /** Frame the graph once on mount. Default false. */
-  fitView?: boolean | undefined;
-  /** Use a viewport controller owned by a parent (e.g. `<Flow>`). */
-  controller?: UseViewportReturn;
-  /** Screen-fixed overlay (controls, minimap, panels) — rendered outside the transformed pane. */
-  chrome?: ReactNode;
-  className?: string;
-}
-/**
- * The canvas pane: a single CSS-transformed layer driven by the `viewport`
- * signal, with drag-to-pan, wheel zoom, and fit-view. Renders `children`
- * (background, nodes, edges) inside the transformed pane. `useSignals()` first.
- */
-declare function FlowCanvas({
-  children,
-  flow,
-  viewport: viewportProp,
-  defaultViewport,
-  onViewportChange,
-  minZoom,
-  maxZoom,
-  panOnDrag,
-  zoomOnScroll,
-  fitView,
-  controller: controllerProp,
-  chrome,
-  className,
-  role,
-  ...rest
-}: FlowCanvasProps): import("react").JSX.Element;
-type FlowBackgroundVariant = 'dots' | 'grid' | 'cross';
-interface FlowBackgroundProps extends HTMLAttributes<HTMLDivElement> {
-  /** Pattern style. Default `dots`. */
-  variant?: FlowBackgroundVariant;
-  /** Distance between pattern cells, in flow px. Default 20. */
-  gap?: number;
-  /** Dot radius / line thickness, in flow px. Default 1. */
-  size?: number;
-  /** Pattern color. Defaults to the border token. */
-  color?: string;
-  className?: string;
-}
-/**
- * Decorative dots / grid / cross background, drawn purely in CSS gradients
- * (no SVG, no per-cell DOM). Lives inside the transformed pane, so it pans and
- * scales with the viewport for free. `pointer-events: none` — clicks fall
- * through to the pan surface.
- */
-declare function FlowBackground({
-  variant,
-  gap,
-  size,
-  color,
-  className,
-  style,
-  ...rest
-}: FlowBackgroundProps): import("react").JSX.Element;
-interface FlowNodeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  id: string;
-  /** Position in flow coordinates (controllable). */
-  position?: XYPosition;
-  defaultPosition?: XYPosition;
-  onPositionChange?: (position: XYPosition) => void;
-  /** Reports the rendered box size so edges can anchor to the real node bounds. */
-  onMeasure?: (size: NodeSize) => void;
-  /** Current zoom — drag deltas are divided by it so the node tracks the pointer. */
-  zoom?: number;
-  selected?: boolean;
-  draggable?: boolean;
-  /** When false, the node is view-only: not draggable, not selectable, not focusable. Default true. */
-  interactive?: boolean;
-  onSelect?: ((id: string) => void) | undefined;
-  children?: ReactNode;
-  className?: string;
-}
-/**
- * An HTML node box positioned inside the viewport pane by `--flow-x`/`--flow-y`.
- * Draggable via `useDraggable` (zoom-corrected), selectable via CSS
- * `data-selected`, and renders arbitrary themed cascivo children.
- * `useSignals()` first; no `useState`/`useEffect`.
- */
-declare function FlowNode({
-  id,
-  position,
-  defaultPosition,
-  onPositionChange,
-  onMeasure,
-  zoom,
-  selected,
-  draggable,
-  interactive,
-  onSelect,
-  children,
-  className,
-  onClick,
-  onKeyDown,
-  ...rest
-}: FlowNodeProps): import("react").JSX.Element;
-interface FlowHandleProps extends HTMLAttributes<HTMLDivElement> {
-  type: 'source' | 'target';
-  /** Edge of the node the port sits on. Defaults by type (source→right, target→left). */
-  position?: HandlePosition;
-  /** Handle id, for multi-handle nodes. */
-  id?: string;
-  isConnectable?: boolean;
-  className?: string;
-}
-/**
- * A connection port on a node edge. Marks where edges attach and where
- * interactive connect (T5) starts/ends. Renders a small dot inside a ≥44px
- * coarse-pointer hit area; keyboard-focusable. No internal state.
- */
-declare function FlowHandle({
-  type,
-  position,
-  id,
-  isConnectable,
-  className,
-  ...rest
-}: FlowHandleProps): import("react").JSX.Element;
-interface FlowEdgeProps {
-  id?: string;
-  /** Resolved source anchor (flow coords). */
-  sourceX: number;
-  sourceY: number;
-  /** Resolved target anchor (flow coords). */
-  targetX: number;
-  targetY: number;
-  sourcePosition?: HandlePosition | undefined;
-  targetPosition?: HandlePosition | undefined;
-  type?: EdgePathType | undefined;
-  animated?: boolean | undefined;
-  label?: ReactNode | undefined;
-  selected?: boolean | undefined;
-  /** Render an arrowhead at the source (points back toward the source). Default false. */
-  markerStart?: boolean | undefined;
-  /** Render an arrowhead at the target. Default true. */
-  markerEnd?: boolean | undefined;
-  /** Direction the dash travels when animated. Default 'forward'. */
-  direction?: 'forward' | 'reverse' | undefined;
-  /** Highlight the edge (used by FlowStory's active step). */
-  active?: boolean | undefined;
-  className?: string | undefined;
-}
-/**
- * An SVG edge: computes its path from source→target anchors using the owned
- * bezier/straight/smoothstep builders, draws an arrowhead marker, and (if
- * `label`) an HTML label at the midpoint. Animation is CSS-only.
- * `useSignals()` first; no `useState`/`useEffect`.
- */
-declare function FlowEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  type,
-  animated,
-  label,
-  selected,
-  markerStart,
-  markerEnd,
-  direction,
-  active,
-  className
-}: FlowEdgeProps): import("react").JSX.Element;
-type FlowChromePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-interface FlowControlsLabels {
-  zoomIn?: string;
-  zoomOut?: string;
-  fitView?: string;
-}
-interface FlowControlsProps extends HTMLAttributes<HTMLDivElement> {
-  position?: FlowChromePosition;
-  showZoom?: boolean;
-  showFitView?: boolean;
-  onZoomIn?: () => void;
-  onZoomOut?: () => void;
-  onFitView?: () => void;
-  labels?: FlowControlsLabels;
-  className?: string;
-}
-/**
- * Zoom in / out / fit-view controls for a flow canvas — real buttons with
- * i18n-defaulted aria-labels. Calls the viewport actions passed in.
- * `useSignals()` first (reads the locale signal via `t`).
- */
-declare function FlowControls({
-  position,
-  showZoom,
-  showFitView,
-  onZoomIn,
-  onZoomOut,
-  onFitView,
-  labels,
-  className,
-  ...rest
-}: FlowControlsProps): import("react").JSX.Element;
-interface FlowMiniMapProps {
-  nodes: FlowNode$1[];
-  viewport: Viewport;
-  /** Canvas size — used to draw the visible-region rectangle. */
-  containerWidth?: number | undefined;
-  containerHeight?: number | undefined;
-  width?: number | undefined;
-  height?: number | undefined;
-  position?: FlowChromePosition | undefined;
-  nodeColor?: string | undefined;
-  onViewportChange?: ((viewport: Viewport) => void) | undefined;
-  label?: string | undefined;
-  className?: string | undefined;
-}
-/**
- * A scaled SVG overview of the graph with a draggable viewport rectangle.
- * Dragging the rectangle pans the main viewport. `useSignals()` first.
- */
-declare function FlowMiniMap({
-  nodes,
-  viewport,
-  containerWidth,
-  containerHeight,
-  width,
-  height,
-  position,
-  nodeColor,
-  onViewportChange,
-  label,
-  className
-}: FlowMiniMapProps): import("react").JSX.Element;
-type FlowPanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-interface FlowPanelProps extends HTMLAttributes<HTMLDivElement> {
-  position?: FlowPanelPosition;
-  children?: ReactNode;
-  className?: string;
-}
-/**
- * An absolutely-positioned slot for custom UI on a flow canvas (a legend, a
- * toolbar). Pure presentational — no state.
- */
-declare function FlowPanel({
-  position,
-  children,
-  className,
-  ...rest
-}: FlowPanelProps): import("react").JSX.Element;
-type NodeRenderer = (args: {
-  node: FlowNode$1;
-}) => ReactNode;
-interface FlowProps {
-  /** Initial nodes (serializable — an agent can emit these as JSON). */
-  nodes: FlowNode$1[];
-  /** Initial edges. */
-  edges: FlowEdge$1[];
-  onNodesChange?: (nodes: FlowNode$1[]) => void;
-  onEdgesChange?: (edges: FlowEdge$1[]) => void;
-  onConnect?: (connection: Connection) => void;
-  /** Custom node renderers keyed by `node.type`. */
-  nodeTypes?: Record<string, NodeRenderer>;
-  /** Frame the graph on mount. Default true. */
-  fitView?: boolean;
-  /** Show a background — `true` for dots, or pass props. Default false. */
-  background?: boolean | FlowBackgroundProps;
-  /** Show zoom/fit controls. Default false. */
-  controls?: boolean;
-  /** Show a minimap. Default false. */
-  minimap?: boolean;
-  /** Arrange nodes: 'grid' | 'layered' | a custom function. */
-  layout?: LayoutStrategy;
-  minZoom?: number;
-  maxZoom?: number;
-  /**
-   * Interaction mode. When false (view mode), nodes can't be selected, dragged,
-   * or connected and connection handles are hidden — pan/zoom still work.
-   * Default true.
-   */
-  interactive?: boolean;
-  /** Highlight + animate a single edge (used by FlowStory's active step). */
-  activeEdgeId?: string | undefined;
-  activeDirection?: 'forward' | 'reverse' | undefined;
-  className?: string;
-  style?: CSSProperties;
-}
-/**
- * The declarative, AI-first flow surface: `<Flow nodes={…} edges={…} />` over
- * plain serializable data. Composes the canvas, background, nodes, edges,
- * interactive connect, and optional chrome. `useSignals()` first; no banned hooks.
- */
-declare function Flow({
-  nodes,
-  edges,
-  onNodesChange,
-  onEdgesChange,
-  onConnect,
-  nodeTypes,
-  fitView,
-  background,
-  controls,
-  minimap,
-  layout,
-  minZoom,
-  maxZoom,
-  interactive,
-  activeEdgeId,
-  activeDirection,
-  className,
-  style
-}: FlowProps): import("react").JSX.Element;
-interface FlowStoryLabels {
-  play?: string;
-  pause?: string;
-  next?: string;
-  previous?: string;
-  restart?: string;
-}
-interface FlowStoryProps {
-  nodes: FlowNode$1[];
-  edges: FlowEdge$1[];
-  /** The storyboard: an ordered, serializable list of steps. */
-  script: StoryStep[];
-  loop?: boolean;
-  /** Per-step dwell time (ms). Default 1500. */
-  stepDuration?: number;
-  /** Extra pause added after each step before advancing (ms), so the story is easier to follow. Default 0. */
-  stepGap?: number;
-  playing?: boolean;
-  currentStep?: number;
-  onStepChange?: (step: number) => void;
-  /** Show the play/pause/prev/next controls. Default true. */
-  controls?: boolean;
-  /** Start playing on mount. Default true. */
-  autoPlay?: boolean;
-  background?: boolean;
-  /**
-   * Allow selecting / dragging / connecting nodes. A storyline is a view by
-   * default — pan/zoom still work. Default false.
-   */
-  interactive?: boolean;
-  labels?: FlowStoryLabels;
-  /** Injectable clock for deterministic tests. */
-  clock?: StoryClock;
-  className?: string;
-  style?: CSSProperties;
-}
-/**
- * A scripted, sequenced, looping flow animation: walks a graph step by step,
- * fading in a caption at each step so the flow is *understood*. Composes
- * `<Flow>` and drives the active edge via a `currentStep` signal.
- * `useSignals()` first; no banned hooks.
- */
-declare function FlowStory({
-  nodes,
-  edges,
-  script,
-  loop,
-  stepDuration,
-  stepGap,
-  playing,
-  currentStep,
-  onStepChange,
-  controls,
-  autoPlay,
-  background,
-  interactive,
-  labels,
-  clock,
-  className,
-  style
-}: FlowStoryProps): import("react").JSX.Element;
-export { type Connection, ConnectionState, DEFAULT_NODE_SIZE, EdgePath, EdgePathParams, type EdgePathType, FitViewportOptions, Flow, FlowBackground, FlowBackgroundProps, FlowBackgroundVariant, FlowCanvas, FlowCanvasProps, FlowChromePosition, FlowControls, FlowControlsLabels, FlowControlsProps, FlowEdge, type FlowEdge$1 as FlowEdgeData, FlowEdgeProps, FlowHandle, FlowHandleProps, FlowMiniMap, FlowMiniMapProps, FlowNode, type FlowNode$1 as FlowNodeData, FlowNodeProps, FlowPanel, FlowPanelPosition, FlowPanelProps, FlowProps, FlowStore, FlowStory, FlowStoryLabels, FlowStoryProps, GridLayoutOptions, type HandlePosition, LayeredLayoutOptions, LayoutStrategy, NodeRenderer, type NodeSize, Rect, ResolvedStep, Size, StoryClock, StoryStep, StoryStepBase, StoryStepEdge, StoryStepFromTo, UseConnectionOptions, UseConnectionReturn, UseFlowOptions, UseStoryOptions, UseStoryReturn, UseViewportOptions, UseViewportReturn, type Viewport, type XYPosition, applyLayout, bezierPath, clampZoom, edgePath, fitViewport, flowToScreen, graphBounds, gridLayout, handleAnchor, layeredLayout, nodeBounds, nodeSize, resolveScript, resolveStep, screenToFlow, smoothStepPath, straightPath, useConnection, useFlow, useStory, useViewport };