@statelyai/flow-react 0.6.0 → 0.7.1

package/dist/esm/index.d.ts

@@ -1,9 +1,8 @@
-import * as react4 from "react";
-import { CSSProperties, HTMLAttributes, ReactNode, RefObject } from "react";
-import { ResolvedFlowColorMode } from "@statelyai/flow-dom";
-import { AnchorSpec, ConnectionEndedEvent, CreateFlowOptions, EdgePathData, FlowColorMode, FlowController, FlowEdge, FlowGraph, FlowInputMode, FlowNode, FlowProfile, FlowStoreContext, LayoutRequestedEvent, Point, Rect, Viewport, VisualPort } from "@statelyai/flow";
+import { Background, BackgroundProps, BackgroundVariant, CrossBackground, DotsBackground, LinesBackground } from "./backgrounds.js";
+import { FlowView, ResolvedFlowColorMode } from "@statelyai/flow-dom";
+import { ActiveGraphProjection, AnchorSpec, ConnectionEndedEvent, ConnectionState, CreateEdgeInput, CreateFlowOptions, EdgePathData, FlowColorMode, FlowCommitEvent, FlowConnection, FlowController, FlowEdge, FlowGraph, FlowInputMode, FlowKeymap, FlowNode, FlowProfile, FlowStoreContext, GraphEdgeAttrs, GraphNodeAttrs, LayoutRequestedEvent, Point, Rect, ResizeHandle, Viewport, VisualPort } from "@statelyai/flow";
+import { CSSProperties, ComponentPropsWithoutRef, HTMLAttributes, ReactNode, Ref, RefObject } from "react";
 export * from "@statelyai/flow-dom";
-
 //#region src/createFlowInstance.d.ts
 type FlowSelector<T> = (context: FlowStoreContext) => T;
 type FlowSelectorEquality<T> = (current: T, next: T) => boolean;
@@ -16,15 +15,21 @@ type FlowStoreListener<T = unknown> = {
 type FlowEventListeners = {
   connectionEnded?: (event: ConnectionEndedEvent) => void;
   layoutRequested?: (event: LayoutRequestedEvent) => void;
+  commit?: (event: FlowCommitEvent) => void;
 };
-type FlowInstanceSettings = Omit<CreateFlowOptions, "graph">;
-type CreateFlowInstanceOptions = {
-  graph: FlowGraph;
-  settings?: FlowInstanceSettings;
+type FlowInstanceSettings<TNodeData = any, TEdgeData = any, TLabelData = any> = Omit<CreateFlowOptions<TNodeData, TEdgeData, TLabelData>, "graph"> & {
+  defaultEdgeOptions?: Partial<CreateEdgeInput>;
+  keymap?: Partial<FlowKeymap>;
+};
+type CreateFlowInstanceOptions<TNodeData = any, TEdgeData = any, TLabelData = any> = {
+  /** Initial graph seed. After creation, the flow instance owns the graph. */
+  initialGraph?: FlowGraph<TNodeData, TEdgeData, TLabelData>;
+  settings?: FlowInstanceSettings<TNodeData, TEdgeData, TLabelData>;
   listeners?: FlowStoreListener[];
   events?: FlowEventListeners;
+  onCommit?: (event: FlowCommitEvent<TNodeData, TEdgeData, TLabelData>) => void;
 };
-type FlowInstance = FlowController & {
+type FlowInstance<TNodeData = any, TEdgeData = any, TLabelData = any> = FlowController<TNodeData, TEdgeData, TLabelData> & {
   getSnapshot(): FlowStoreContext;
   /**
    * Convert window client coordinates (e.g. `event.clientX/Y` from drops or
@@ -33,31 +38,51 @@ type FlowInstance = FlowController & {
    * container-relative pixels.
    */
   clientToCanvas(point: Point): Point;
+  /**
+   * Input-layer defaults consumed by `useFlowInput`/`StatelyFlow`. Not part of
+   * the core store/engine — these settings are applied when a container is
+   * bound to the input runtime. `keymap` here acts as the instance-level
+   * default; an explicit `<StatelyFlow settings.keymap>` (or `useFlowInput`
+   * `keymap` option) takes precedence.
+   */
+  inputSettings: {
+    keymap?: Partial<FlowKeymap>;
+  };
+  configure: FlowController<TNodeData, TEdgeData, TLabelData>["configure"];
   listen<T>(selector: FlowSelector<T>, listener: FlowStoreListener<T>["onChange"], options?: {
     isEqual?: FlowSelectorEquality<T>;
     fireImmediately?: boolean;
   }): () => void;
 };
-declare function createFlowInstance(options: CreateFlowInstanceOptions): FlowInstance;
+declare function createFlowInstance<TNodeData = any, TEdgeData = any, TLabelData = any>(options: CreateFlowInstanceOptions<TNodeData, TEdgeData, TLabelData>): FlowInstance<TNodeData, TEdgeData, TLabelData>;
 //#endregion
 //#region src/FlowInstanceContext.d.ts
 declare function FlowInstanceProvider(props: {
   flow: FlowInstance;
   children: ReactNode;
-}): react4.JSX.Element;
+}): import("react").JSX.Element;
 declare function useFlowInstance(): FlowInstance;
 declare function useOptionalFlowInstance(): FlowInstance | null;
 //#endregion
 //#region src/hooks.d.ts
-type UseCreateFlowInstanceOptions = CreateFlowInstanceOptions;
-type UseFlowOptions = UseCreateFlowInstanceOptions;
-declare function useFlow(options: UseFlowOptions): FlowInstance;
-declare function useCreateFlowInstance(options: UseCreateFlowInstanceOptions): FlowInstance;
+type UseCreateFlowInstanceOptions<TNodeData = any, TEdgeData = any, TLabelData = any> = CreateFlowInstanceOptions<TNodeData, TEdgeData, TLabelData>;
+type UseFlowOptions<TNodeData = any, TEdgeData = any, TLabelData = any> = UseCreateFlowInstanceOptions<TNodeData, TEdgeData, TLabelData>;
+declare function useFlow<TNodeData = any, TEdgeData = any, TLabelData = any>(options: UseFlowOptions<TNodeData, TEdgeData, TLabelData>): FlowInstance<TNodeData, TEdgeData, TLabelData>;
+/** @deprecated Use `useFlow(options)`. */
+declare function useCreateFlowInstance<TNodeData = any, TEdgeData = any, TLabelData = any>(options: UseCreateFlowInstanceOptions<TNodeData, TEdgeData, TLabelData>): FlowInstance<TNodeData, TEdgeData, TLabelData>;
 declare function useFlowSelector<T>(selector: FlowSelector<T>, options?: {
   flow?: FlowInstance;
   isEqual?: FlowSelectorEquality<T>;
 }): T;
 declare function useFlowContext(): FlowStoreContext;
+declare function useConnection(): FlowStoreContext['connection'];
+declare function useFlowConnections(input: {
+  nodeId: string;
+  port?: string | null;
+  direction?: 'in' | 'out' | 'both';
+}): FlowConnection[];
+declare function useNodesInitialized(): boolean;
+declare function useKeyPress(keys: string | string[]): boolean;
 /**
  * Like `useFlowSelector`, but subscribed through the entity-change notifier:
  * the selector re-runs only when the entity with `id` may have changed, not
@@ -95,18 +120,23 @@ declare function useFlowViewport(): Viewport;
 declare function useFlowMeasurement(id: string): Rect | null;
 //#endregion
 //#region src/useFlowInput.d.ts
+type KeyboardTarget = "window" | "container" | HTMLElement;
 type UseFlowInputOptions = {
   /**
    * Input modes, or a resolver from store context. Defaults to the store
    * profile's input modes (when a profile is given) and otherwise to the
    * core default set, which follows the store's `context.mode`
    * (interactive / readonly). Initial-only: changes after mount are ignored —
-   * swap behavior at runtime via `flow.trigger.setMode(...)` or a
+   * swap behavior at runtime via `flow.internals.store.trigger.setMode(...)` or a
    * context-aware resolver.
    */
   modes?: FlowInputMode[] | ((context: FlowStoreContext) => FlowInputMode[]);
   /** Store profile whose per-mode `input.modes` drive the runtime. */
   profile?: FlowProfile;
+  /** Keyboard listener target. Defaults to the flow container. */
+  keyboardTarget?: KeyboardTarget;
+  /** Built-in shortcut overrides. */
+  keymap?: Partial<FlowKeymap>;
 };
 /**
  * Bind a container element to the core input runtime: all pointer, wheel,
@@ -115,11 +145,18 @@ type UseFlowInputOptions = {
  */
 declare function useFlowInput(flow: FlowInstance, containerRef: RefObject<HTMLElement | null>, options?: UseFlowInputOptions): void;
 //#endregion
+//#region src/useFlowView.d.ts
+declare function useFlowView(): FlowView;
+//#endregion
 //#region src/StatelyFlow.d.ts
+type ReactGraphNodeAttrs = GraphNodeAttrs<CSSProperties, ReactNode>;
+type ReactGraphEdgeAttrs = GraphEdgeAttrs<CSSProperties, ReactNode>;
+type ReactActiveGraphProjection = ActiveGraphProjection<any, any, CSSProperties, ReactNode>;
 type RenderNodeProps<TNodeData = unknown> = {
-  flow: FlowInstance;
+  flow: FlowInstance<TNodeData>;
   node: FlowNode<TNodeData>;
   bounds: Rect;
+  attrs: ReactGraphNodeAttrs;
   selected: boolean;
   dragging: boolean;
   hovered: boolean;
@@ -129,9 +166,10 @@ type RenderNodeProps<TNodeData = unknown> = {
   }>;
 };
 type RenderEdgeProps<TEdgeData = unknown> = {
-  flow: FlowInstance;
+  flow: FlowInstance<any, TEdgeData>;
   edge: FlowEdge<TEdgeData>;
   pathData: EdgePathData;
+  attrs: ReactGraphEdgeAttrs;
   selected: boolean;
   hovered: boolean;
   highlights: ReadonlyArray<{
@@ -139,14 +177,26 @@ type RenderEdgeProps<TEdgeData = unknown> = {
     meta: unknown;
   }>;
 };
-type StatelyFlowProps<TNodeData = unknown, TEdgeData = unknown> = {
-  flow?: FlowInstance;
-  graph: FlowGraph<TNodeData, TEdgeData>;
-  settings?: FlowInstanceSettings;
+type RenderEdgeLabelProps<TEdgeData = unknown> = RenderEdgeProps<TEdgeData> & {
+  bounds: Rect;
+  dragging: boolean;
+};
+type RenderConnectionLineProps = {
+  connection: ConnectionState;
+  pathData: EdgePathData;
+  isValid: boolean;
+};
+type StatelyFlowRootProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "ref">;
+type StatelyFlowBaseProps<TNodeData = unknown, TEdgeData = unknown> = {
+  settings?: FlowInstanceSettings<TNodeData, TEdgeData>;
   listeners?: FlowStoreListener[];
   events?: FlowEventListeners;
+  /** Controlled projection override; omit to use `flow` projection lifecycle APIs. */
+  projections?: readonly ReactActiveGraphProjection[];
   renderNode?: (props: RenderNodeProps<TNodeData>) => ReactNode;
   renderEdge?: (props: RenderEdgeProps<TEdgeData>) => ReactNode;
+  renderEdgeLabel?: (props: RenderEdgeLabelProps<TEdgeData>) => ReactNode;
+  renderConnectionLine?: (props: RenderConnectionLineProps) => ReactNode;
   /**
    * Only mount nodes/edges that intersect the viewport (plus an overscan
    * margin). Recommended for large graphs.
@@ -165,12 +215,47 @@ type StatelyFlowProps<TNodeData = unknown, TEdgeData = unknown> = {
    * ```
    */
   inputModes?: FlowInputMode[] | ((context: FlowStoreContext) => FlowInputMode[]);
+  /** Keyboard listener target. Defaults to this flow's root container. */
+  keyboardTarget?: "window" | "container" | HTMLElement;
   className?: string;
   style?: CSSProperties;
+  /** Ref to the same root element owned by Flow's input runtime. */
+  rootRef?: Ref<HTMLDivElement>;
+  /** Native root div attributes and events; className/style merge with the top-level props. */
+  rootProps?: StatelyFlowRootProps;
   background?: ReactNode;
+  /** Custom content in fixed viewport- and pane-coordinate layers. */
+  layers?: {
+    viewport?: ReactNode;
+    pane?: ReactNode;
+  };
   children?: ReactNode;
 };
-declare function StatelyFlow<TNodeData = unknown, TEdgeData = unknown>(props: StatelyFlowProps<TNodeData, TEdgeData>): react4.JSX.Element;
+type StatelyFlowWithInstanceProps<TNodeData = unknown, TEdgeData = unknown> = StatelyFlowBaseProps<TNodeData, TEdgeData> & {
+  /** Existing owned flow instance. Do not pass graph props with this mode. */
+  flow: FlowInstance<TNodeData, TEdgeData>;
+  initialGraph?: never;
+  onCommit?: never;
+};
+type StatelyFlowInitialGraphProps<TNodeData = unknown, TEdgeData = unknown> = StatelyFlowBaseProps<TNodeData, TEdgeData> & {
+  flow?: never;
+  /** Initial graph seed. After creation, the flow instance owns the graph. */
+  initialGraph?: FlowGraph<TNodeData, TEdgeData>;
+  /** Observe graph changes from the owned instance for persistence/sync. */
+  onCommit?: FlowEventListeners["commit"];
+};
+type StatelyFlowProps<TNodeData = unknown, TEdgeData = unknown> = StatelyFlowWithInstanceProps<TNodeData, TEdgeData> | StatelyFlowInitialGraphProps<TNodeData, TEdgeData>;
+declare function StatelyFlow<TNodeData = unknown, TEdgeData = unknown>(props: StatelyFlowProps<TNodeData, TEdgeData>): import("react").JSX.Element;
+//#endregion
+//#region src/LayerPortals.d.ts
+/** Render canvas-coordinate content in the transformed viewport layer. */
+declare function ViewportPortal(props: {
+  children: ReactNode;
+}): import("react").ReactPortal | null;
+/** Render screen-coordinate content in the untransformed pane layer. */
+declare function PanePortal(props: {
+  children: ReactNode;
+}): import("react").ReactPortal | null;
 //#endregion
 //#region src/FlowToolbar.d.ts
 /** Border-box size of an element, kept current via ResizeObserver. */
@@ -212,7 +297,7 @@ type FlowToolbarProps = UseFlowToolbarOptions & {
  * Marked `data-flow-interactive`, so its contents receive pointer events
  * unopposed by canvas gestures.
  */
-declare function FlowToolbar(props: FlowToolbarProps): react4.JSX.Element | null;
+declare function FlowToolbar(props: FlowToolbarProps): import("react").JSX.Element | null;
 //#endregion
 //#region src/MiniMap.d.ts
 type MiniMapProps = {
@@ -231,12 +316,21 @@ type MiniMapProps = {
  * plain store trigger — this component is exactly what you would write in
  * userland, kept here as a convenience.
  */
-declare function MiniMap(props: MiniMapProps): react4.JSX.Element;
+declare function MiniMap(props: MiniMapProps): import("react").JSX.Element;
+//#endregion
+//#region src/Panel.d.ts
+type PanelPosition = "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type PanelProps = Omit<HTMLAttributes<HTMLDivElement>, "style"> & {
+  position?: PanelPosition;
+  style?: CSSProperties;
+};
+declare function Panel(props: PanelProps): import("react").JSX.Element;
 //#endregion
 //#region src/Controls.d.ts
 type ControlsProps = {
   className?: string;
   style?: CSSProperties;
+  position?: PanelPosition;
   /** Extra buttons appended after the built-ins. */
   children?: ReactNode;
 };
@@ -244,18 +338,36 @@ type ControlsProps = {
  * Zoom/fit toolbar. Deliberately thin: every button is one store trigger
  * (`zoomBy`, `fitView`) — replicate or extend it freely in userland.
  */
-declare function Controls(props: ControlsProps): react4.JSX.Element;
+declare function Controls(props: ControlsProps): import("react").JSX.Element;
 //#endregion
 //#region src/EntityAnchor.d.ts
-type EntityAnchorProps = {
-  bounds: Rect;
-  anchor: AnchorSpec;
+type EntityAnchorPoint = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type EntityAnchorSide = "top" | "bottom" | "left" | "right";
+type EntityAnchorAlign = "start" | "center" | "end";
+type EntityAnchorBaseProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   inverseScale?: boolean;
-  className?: string;
-  style?: CSSProperties;
+  isVisible?: boolean;
   children: ReactNode;
 };
-declare function EntityAnchor(props: EntityAnchorProps): react4.JSX.Element;
+type EntityAnchorProps = EntityAnchorBaseProps & ({
+  /** Canvas-space bounds for a free-standing anchor. */
+  bounds: Rect;
+  anchor: AnchorSpec;
+  side?: never;
+  align?: never;
+  offset?: never;
+} | {
+  /** Side of the containing entity. The anchor follows its parent DOM transform. */
+  side: EntityAnchorSide;
+  /** Point on the child placed at the entity-side location. */
+  anchor?: EntityAnchorPoint;
+  /** Cross-axis placement on the entity side. */
+  align?: EntityAnchorAlign;
+  /** Outward screen-pixel gap from the entity side. */
+  offset?: number;
+  bounds?: never;
+});
+declare function EntityAnchor(props: EntityAnchorProps): import("react").JSX.Element | null;
 //#endregion
 //#region src/Port.d.ts
 type PortProps = {
@@ -289,7 +401,65 @@ type PortProps = {
  * observe results via `flow.on("connectionEnded", …)` or the store's
  * `connection` state.
  */
-declare function Port(props: PortProps): react4.JSX.Element;
+declare function Port(props: PortProps): import("react").JSX.Element;
+//#endregion
+//#region src/DragHandle.d.ts
+type DragHandleProps = HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode;
+};
+/**
+ * Marks a region inside a custom node as the *only* draggable area. When a node
+ * renders a `<DragHandle>`, pointer presses elsewhere on the node no longer
+ * start a drag (they select/pass through) — the input runtime only begins a
+ * move when the press lands inside an element carrying `data-flow-drag-handle`.
+ *
+ * Render it anywhere inside your node's markup:
+ *
+ * ```tsx
+ * function MyNode(props) {
+ *   return (
+ *     <div>
+ *       <DragHandle>⠿ title bar</DragHandle>
+ *       <div>…non-draggable body…</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function DragHandle({ children, style, ...rest }: DragHandleProps): import("react").JSX.Element;
+//#endregion
+//#region src/NodeResizer.d.ts
+type NodeResizerProps = {
+  handles?: ResizeHandle[];
+  /** Defaults to node selection state. Constraints belong on `node.resize`. */
+  isVisible?: boolean;
+  className?: string;
+  style?: CSSProperties;
+};
+declare function NodeResizer(props: NodeResizerProps): import("react").JSX.Element | null;
+//#endregion
+//#region src/baseStyles.d.ts
+/**
+ * Minimal base stylesheet for the flow canvas. Intentionally tiny and
+ * inert-by-default: it only styles elements that opt in via `data-flow-*`
+ * attributes, and every visual value is a namespaced `--flow-*` CSS variable
+ * so consumers can theme it (set the variable on the canvas root or any
+ * ancestor) without overriding rules.
+ *
+ * Attributes:
+ * - `data-flow-interactive-when-selected` — the element ignores all pointer /
+ *   wheel input (so canvas pan/zoom and box-select pass straight through it,
+ *   e.g. over an embedded `<iframe>`) until its node/edge is selected, at which
+ *   point it becomes fully interactive. Mark the embedded content, not the
+ *   whole node, so ports and the selecting click still work. Don't also set an
+ *   inline `pointer-events` on the same element — inline wins over this rule.
+ * - `data-flow-selection-box` — the box-select marquee (styled here; geometry
+ *   is set inline by the renderer).
+ */
+declare const FLOW_BASE_STYLES_ID = "flow-base-styles";
+declare const FLOW_BASE_CSS = "\n[data-flow-root] {\n  --flow-selection-color: #2563eb;\n  --flow-selection-bg: rgba(37, 99, 235, 0.12);\n  touch-action: none;\n}\n\n[data-flow-interactive-when-selected] {\n  pointer-events: none;\n}\n[data-flow-selected=\"true\"] [data-flow-interactive-when-selected] {\n  pointer-events: auto;\n}\n\n[data-flow-selection-box] {\n  position: absolute;\n  box-sizing: border-box;\n  border: calc(1px / var(--flow-zoom, 1)) solid var(--flow-selection-color);\n  border-radius: calc(2px / var(--flow-zoom, 1));\n  background: var(--flow-selection-bg);\n  pointer-events: none;\n}\n";
+/** Inject the base stylesheet once per document (deduped by element id). */
+declare function useFlowBaseStyles(): void;
 //#endregion
 //#region src/ColorMode.d.ts
 type FlowColorModeScopeProps = {
@@ -297,11 +467,11 @@ type FlowColorModeScopeProps = {
   className?: string;
   style?: CSSProperties;
 };
-declare function FlowColorModeScope(props: FlowColorModeScopeProps): react4.JSX.Element;
+declare function FlowColorModeScope(props: FlowColorModeScopeProps): import("react").JSX.Element;
 declare function useFlowColorMode(): {
   colorMode: FlowColorMode;
   resolvedColorMode: ResolvedFlowColorMode;
 };
 declare function useApplyFlowColorMode(element: HTMLElement | null): void;
 //#endregion
-export { Controls, type ControlsProps, type CreateFlowInstanceOptions, EntityAnchor, type EntityAnchorProps, FlowColorModeScope, type FlowColorModeScopeProps, type FlowEdgeBinding, type FlowEventListeners, type FlowInstance, FlowInstanceProvider, type FlowInstanceSettings, type FlowNodeBinding, type FlowPortBinding, type FlowSelector, type FlowSelectorEquality, type FlowStoreListener, FlowToolbar, type FlowToolbarProps, type FlowToolbarState, MiniMap, type MiniMapProps, Port, type PortProps, type RenderEdgeProps, type RenderNodeProps, StatelyFlow, type StatelyFlowProps, type UseCreateFlowInstanceOptions, type UseFlowInputOptions, type UseFlowOptions, type UseFlowToolbarOptions, createFlowInstance, useApplyFlowColorMode, useCreateFlowInstance, useFlow, useFlowColorMode, useFlowContext, useFlowEdge, useFlowEntity, useFlowInput, useFlowInstance, useFlowMeasurement, useFlowNode, useFlowPort, useFlowSelector, useFlowToolbar, useFlowValue, useFlowViewport, useMeasuredSize, useOptionalFlowInstance };
+export { Background, type BackgroundProps, type BackgroundVariant, Controls, type ControlsProps, type CreateFlowInstanceOptions, CrossBackground, DotsBackground, DragHandle, type DragHandleProps, EntityAnchor, type EntityAnchorAlign, type EntityAnchorPoint, type EntityAnchorProps, type EntityAnchorSide, FLOW_BASE_CSS, FLOW_BASE_STYLES_ID, FlowColorModeScope, type FlowColorModeScopeProps, type FlowEdgeBinding, type FlowEventListeners, type FlowInstance, FlowInstanceProvider, type FlowInstanceSettings, type FlowNodeBinding, type FlowPortBinding, type FlowSelector, type FlowSelectorEquality, type FlowStoreListener, FlowToolbar, type FlowToolbarProps, type FlowToolbarState, LinesBackground, MiniMap, type MiniMapProps, NodeResizer, type NodeResizerProps, PanePortal, Panel, type PanelPosition, type PanelProps, Port, type PortProps, type ReactActiveGraphProjection, type ReactGraphEdgeAttrs, type ReactGraphNodeAttrs, type RenderConnectionLineProps, type RenderEdgeLabelProps, type RenderEdgeProps, type RenderNodeProps, StatelyFlow, type StatelyFlowProps, type StatelyFlowRootProps, type UseCreateFlowInstanceOptions, type UseFlowInputOptions, type UseFlowOptions, type UseFlowToolbarOptions, ViewportPortal, createFlowInstance, useApplyFlowColorMode, useConnection, useCreateFlowInstance, useFlow, useFlowBaseStyles, useFlowColorMode, useFlowConnections, useFlowContext, useFlowEdge, useFlowEntity, useFlowInput, useFlowInstance, useFlowMeasurement, useFlowNode, useFlowPort, useFlowSelector, useFlowToolbar, useFlowValue, useFlowView, useFlowViewport, useKeyPress, useMeasuredSize, useNodesInitialized, useOptionalFlowInstance };