@barefootjs/xyflow 0.1.0

package/README.md

@@ -0,0 +1,117 @@
+# @barefootjs/xyflow
+
+Signal-based wrapper around [`@xyflow/system`](https://www.npmjs.com/package/@xyflow/system)
+for [BarefootJS](https://barefootjs.dev). Ships the **utility layer**
+(store, signal hooks, types, geometry helpers, imperative
+pointer-paced subsystems). The **JSX-native renderer components**
+(`Flow`, `Background`, `Controls`, `MiniMap`, `Handle`, `NodeWrapper`,
+`SimpleEdge`) live in the shadcn-style registry at
+[`ui/components/ui/xyflow/`](../../ui/components/ui/xyflow/) and ship
+to consumers via:
+
+```sh
+bf add xyflow            # via the BarefootJS CLI
+npx shadcn@latest add https://ui.barefootjs.dev/r/xyflow.json
+```
+
+This split mirrors the chart pattern (`@barefootjs/chart` for utility,
+`ui/components/ui/chart/` for JSX components).
+
+## Usage
+
+```tsx
+"use client"
+
+import { Flow, Background, Controls, MiniMap } from "@/components/ui/xyflow"
+import { useNodesState, useEdgesState } from "@barefootjs/xyflow"
+
+const initialNodes = [
+  { id: "1", position: { x: 100, y: 100 }, data: { label: "Input" } },
+  { id: "2", position: { x: 350, y: 50 },  data: { label: "Transform" } },
+  { id: "3", position: { x: 600, y: 125 }, data: { label: "Output" } },
+]
+const initialEdges = [
+  { id: "e1-2", source: "1", target: "2" },
+  { id: "e2-3", source: "2", target: "3" },
+]
+
+export function MyCanvas() {
+  const [nodes, setNodes] = useNodesState(initialNodes)
+  const [edges, setEdges] = useEdgesState(initialEdges)
+
+  return (
+    <div className="w-full h-[420px]">
+      <Flow nodes={nodes()} edges={edges()}>
+        <Background variant="dots" gap={20} />
+        <Controls />
+        <MiniMap pannable zoomable />
+      </Flow>
+    </div>
+  )
+}
+```
+
+### Custom node bodies
+
+The default `<Flow>` loop renders `data.label ?? id` inside each
+`<NodeWrapper>`. To compose custom node bodies, mount your own
+`<NodeWrapper>` instances as Flow children:
+
+```tsx
+<Flow nodes={nodes()} edges={edges()}>
+  <Background />
+  {nodes().map((n) => (
+    <NodeWrapper key={n.id} nodeId={n.id}>
+      <div className="rounded-md border bg-card px-3 py-2">
+        {n.data.label}
+        <Handle type="target" position={Position.Left}  nodeId={n.id} />
+        <Handle type="source" position={Position.Right} nodeId={n.id} />
+      </div>
+    </NodeWrapper>
+  ))}
+</Flow>
+```
+
+## What this package exports
+
+| Surface | Item | Purpose |
+|---|---|---|
+| Store / state | `createFlowStore`, `FlowContext` | Reactive node / edge / viewport state |
+| Hooks | `useFlow`, `useViewport`, `useNodes`, `useEdges`, `useNodesInitialized`, `useStore`, `screenToFlowPosition` | Read store from descendants |
+| React Flow shim | `useNodesState`, `useEdgesState`, `useReactFlow`, `addEdge`, `reconnectEdge` | Drop-in helpers for migrators |
+| Geometry | `computeEdgePosition`, `getEdgePath` | Path math shared with `<SimpleEdge>` |
+| Subsystem attach | `attachFlowSubsystems` | `<Flow>`'s `ref` calls this — pan / zoom / keyboard / selection rectangle / pane click |
+| Subsystem attach | `attachConnectionHandler`, `attachReconnectionHandler` | `<Handle>` and reconnect overlay refs |
+| Imperative-only | `setupKeyboardHandlers`, `setupNodeSelection`, `setupSelectionRectangle`, `initNodeResizer` | Pointer-paced primitives that JSX gives no leverage to |
+| Re-exports | `getBezierPath`, `getSmoothStepPath`, `getStraightPath`, `getConnectedEdges`, `getOutgoers`, `getIncomers`, `getNodesBounds`, `getNodesInside`, `getEdgeToolbarTransform`, `Position`, `MarkerType`, `ConnectionMode` | From `@xyflow/system` |
+| Types | `FlowProps`, `FlowStore`, `InternalFlowStore`, `NodeBase`, `EdgeBase`, `Viewport`, `NodeLookup`, `EdgeLookup`, `Connection`, `OnConnect`, `OnReconnect`, `IsValidConnection`, `HandleType`, … | (see `src/types.ts`) |
+
+## Source layout
+
+```
+src/
+├── index.ts            re-exports the utility surface above
+├── store.ts            createFlowStore + signal wiring
+├── hooks.ts            useFlow / useViewport / useNodes / ...
+├── context.ts          FlowContext
+├── types.ts            FlowProps / FlowStore / InternalFlowStore / ...
+├── constants.ts        SVG_NS / INFINITE_EXTENT / ...
+├── utils.ts            misc helpers
+├── edge-path.ts        computeEdgePosition / getEdgePath
+├── flow-subsystems.ts  attachFlowSubsystems (panZoom + ResizeObserver + ...)
+├── connection.ts       attachConnectionHandler / attachReconnectionHandler
+├── selection.ts        setupKeyboardHandlers / setupSelectionRectangle / setupNodeSelection
+├── node-resizer.ts     initNodeResizer (pointer-paced resize handles)
+├── compat.ts           React Flow API shims
+└── __tests__/          store / compat / jsx-smoke unit tests
+```
+
+JSX-native components are deliberately **not** in this package — they
+live in `ui/components/ui/xyflow/index.tsx` so consumers `add` the
+source directly into their app, can edit it, and own their own copy
+(shadcn pattern). This avoids the JSX-runtime resolution headaches
+that come from publishing `.tsx` directly from a workspace package.
+
+## Related
+
+- [`@xyflow/system`](https://www.npmjs.com/package/@xyflow/system) — upstream pan/zoom + edge-path math library this package wraps.

package/dist/classes.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Stable CSS class names for xyflow primitives.
+ *
+ * Exported as constants so the registry-side `<Flow>` / `<Background>` /
+ * etc. can reference them via `className={BF_FLOW}` instead of
+ * `className="bf-flow"`. site/ui's `cssLayerPrefixer` only rewrites
+ * locally-declared static `className` literals; imported identifiers are
+ * left alone, which keeps `bf-flow*` un-prefixed for the e2e selectors
+ * (the same trick chart uses with `CHART_CLASS_GRID` etc.).
+ */
+export declare const BF_FLOW = "bf-flow";
+export declare const BF_FLOW_VIEWPORT = "bf-flow__viewport";
+export declare const BF_FLOW_EDGES = "bf-flow__edges";
+export declare const BF_FLOW_NODES = "bf-flow__nodes";
+export declare const BF_FLOW_NODE = "bf-flow__node";
+export declare const BF_FLOW_NODE_GROUP = "bf-flow__node--group";
+export declare const BF_FLOW_NODE_CHILD = "bf-flow__node--child";
+export declare const BF_FLOW_NODE_SELECTED = "bf-flow__node--selected";
+export declare const BF_FLOW_NODE_CUSTOM = "bf-flow__node--custom";
+export declare const BF_FLOW_EDGE = "bf-flow__edge";
+export declare const BF_FLOW_EDGE_SELECTED = "bf-flow__edge--selected";
+export declare const BF_FLOW_EDGE_ANIMATED = "bf-flow__edge--animated";
+export declare const BF_FLOW_HANDLE = "bf-flow__handle";
+export declare const BF_FLOW_HANDLE_TARGET = "bf-flow__handle--target";
+export declare const BF_FLOW_HANDLE_SOURCE = "bf-flow__handle--source";
+export declare const BF_FLOW_CONTROLS = "bf-flow__controls";
+export declare const BF_FLOW_CONTROLS_BUTTON = "bf-flow__controls-button";
+export declare const BF_FLOW_MINIMAP = "bf-flow__minimap";
+export declare const BF_FLOW_MINIMAP_MASK = "bf-flow__minimap-mask";
+export declare const XYFLOW_VIEWPORT = "xyflow__viewport";
+//# sourceMappingURL=classes.d.ts.map

package/dist/classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["../src/classes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,OAAO,YAAY,CAAA;AAChC,eAAO,MAAM,gBAAgB,sBAAsB,CAAA;AACnD,eAAO,MAAM,aAAa,mBAAmB,CAAA;AAC7C,eAAO,MAAM,aAAa,mBAAmB,CAAA;AAE7C,eAAO,MAAM,YAAY,kBAAkB,CAAA;AAC3C,eAAO,MAAM,kBAAkB,yBAAyB,CAAA;AACxD,eAAO,MAAM,kBAAkB,yBAAyB,CAAA;AACxD,eAAO,MAAM,qBAAqB,4BAA4B,CAAA;AAG9D,eAAO,MAAM,mBAAmB,0BAA0B,CAAA;AAE1D,eAAO,MAAM,YAAY,kBAAkB,CAAA;AAC3C,eAAO,MAAM,qBAAqB,4BAA4B,CAAA;AAC9D,eAAO,MAAM,qBAAqB,4BAA4B,CAAA;AAE9D,eAAO,MAAM,cAAc,oBAAoB,CAAA;AAC/C,eAAO,MAAM,qBAAqB,4BAA4B,CAAA;AAC9D,eAAO,MAAM,qBAAqB,4BAA4B,CAAA;AAE9D,eAAO,MAAM,gBAAgB,sBAAsB,CAAA;AACnD,eAAO,MAAM,uBAAuB,6BAA6B,CAAA;AAEjE,eAAO,MAAM,eAAe,qBAAqB,CAAA;AACjD,eAAO,MAAM,oBAAoB,0BAA0B,CAAA;AAI3D,eAAO,MAAM,eAAe,qBAAqB,CAAA"}

package/dist/compat.d.ts

@@ -0,0 +1,67 @@
+/**
+ * React Flow compatibility shims for desk migration.
+ *
+ * These functions mirror the React Flow hooks API so that
+ * desk components can be ported with minimal changes.
+ */
+import type { NodeBase, EdgeBase, Viewport, XYPosition } from './types';
+import type { Connection, NodeChange, EdgeChange } from '@xyflow/system';
+/**
+ * useNodesState — mirrors React Flow's useNodesState.
+ * Returns [nodes getter, setNodes, onNodesChange handler].
+ */
+export declare function useNodesState<NodeType extends NodeBase = NodeBase>(initialNodes: NodeType[]): [() => NodeType[], (updater: NodeType[] | ((prev: NodeType[]) => NodeType[])) => void, (changes: NodeChange[]) => void];
+/**
+ * useEdgesState — mirrors React Flow's useEdgesState.
+ * Returns [edges getter, setEdges, onEdgesChange handler].
+ */
+export declare function useEdgesState<EdgeType extends EdgeBase = EdgeBase>(initialEdges: EdgeType[]): [() => EdgeType[], (updater: EdgeType[] | ((prev: EdgeType[]) => EdgeType[])) => void, (changes: EdgeChange[]) => void];
+/**
+ * useReactFlow — mirrors React Flow's useReactFlow hook.
+ * Returns an object with common flow manipulation methods.
+ */
+export declare function useReactFlow<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(): {
+    getNodes: () => NodeType[];
+    getEdges: () => EdgeType[];
+    getNode: (id: string) => NodeType | undefined;
+    getZoom: () => number;
+    getViewport: () => Viewport;
+    setNodes: (valueOrFn: NodeType[] | ((prev: NodeType[]) => NodeType[])) => void;
+    setEdges: (valueOrFn: EdgeType[] | ((prev: EdgeType[]) => EdgeType[])) => void;
+    setViewport: (vp: Viewport) => void;
+    setCenter: (x: number, y: number, options?: {
+        zoom?: number;
+        duration?: number;
+    }) => void;
+    fitView: (options?: import("./types").FitViewOptions) => void;
+    zoomIn: (options?: {
+        duration?: number;
+    }) => void;
+    zoomOut: (options?: {
+        duration?: number;
+    }) => void;
+    zoomTo: (zoom: number, options?: {
+        duration?: number;
+    }) => void;
+    updateNode: (id: string, update: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>)) => void;
+    updateNodeData: (id: string, data: Partial<NodeType['data']> | ((prev: NodeType['data']) => Partial<NodeType['data']>)) => void;
+    addEdges: (newEdges: EdgeType[]) => void;
+    deleteElements: (params: {
+        nodes?: NodeType[] | undefined;
+        edges?: EdgeType[] | undefined;
+    }) => void;
+    screenToFlowPosition: (position: XYPosition) => XYPosition;
+};
+/**
+ * useViewport — reactive viewport getter.
+ */
+export { useViewport } from './hooks';
+/**
+ * addEdge utility — wraps @xyflow/system's addEdge.
+ */
+export declare function addEdge<EdgeType extends EdgeBase = EdgeBase>(connection: Connection, edges: EdgeType[]): EdgeType[];
+/**
+ * reconnectEdge utility — wraps @xyflow/system's reconnectEdge.
+ */
+export declare function reconnectEdge<EdgeType extends EdgeBase = EdgeBase>(oldEdge: EdgeType, newConnection: Connection, edges: EdgeType[]): EdgeType[];
+//# sourceMappingURL=compat.d.ts.map

package/dist/compat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.d.ts","sourceRoot":"","sources":["../src/compat.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAExE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAChE,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,MAAM,QAAQ,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC,CASzH;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAChE,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,MAAM,QAAQ,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC,CASzH;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACpC,QAAQ,SAAS,QAAQ,GAAG,QAAQ;IAMlC,QAAQ,QAAM,QAAQ,EAAE;IACxB,QAAQ,QAAM,QAAQ,EAAE;IACxB,OAAO,OAAO,MAAM,KAAG,QAAQ,GAAG,SAAS;IAE3C,OAAO,QAAM,MAAM;IACnB,WAAW,QAAM,QAAQ;IAGzB,QAAQ;IACR,QAAQ;IACR,WAAW,OAAO,QAAQ;IAI1B,SAAS,MAAM,MAAM,KAAK,MAAM,YAAY;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE;IAahF,OAAO;IACP,MAAM,aAAa;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE;IAIxC,OAAO,aAAa;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE;IAIzC,MAAM,SAAS,MAAM,YAAY;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE;IAMtD,UAAU,OAAO,MAAM,UAAU,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IAS5F,cAAc,OAAO,MAAM,QAAQ,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAWtH,QAAQ,aAAa,QAAQ,EAAE;IAK/B,cAAc;;;;IAGd,oBAAoB,aAAa,UAAU,KAAG,UAAU;EAW3D;AAED;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC;;GAEG;AACH,wBAAgB,OAAO,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAC1D,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,QAAQ,EAAE,GAChB,QAAQ,EAAE,CAEZ;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAChE,OAAO,EAAE,QAAQ,EACjB,aAAa,EAAE,UAAU,EACzB,KAAK,EAAE,QAAQ,EAAE,GAChB,QAAQ,EAAE,CAEZ"}

package/dist/connection.d.ts

@@ -0,0 +1,20 @@
+import type { FlowStore, NodeBase, EdgeBase } from './types';
+/**
+ * Attach a connection drag handler to a handle element.
+ * Called when creating each handle in node-wrapper.
+ */
+export declare function attachConnectionHandler<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(handleEl: HTMLElement, nodeId: string, handleType: 'source' | 'target', container: HTMLElement, _edgesSvg: SVGSVGElement, store: FlowStore<NodeType, EdgeType>): void;
+/**
+ * Attach a reconnection drag handler to an edge endpoint handle.
+ * Dragging this handle detaches the edge from its source/target and allows
+ * reconnecting to a different handle.
+ *
+ * @param handleEl - The SVG circle element acting as the reconnection grip
+ * @param edge - The edge being reconnected
+ * @param endpointType - Which endpoint of the edge is being dragged ('source' | 'target')
+ * @param container - The flow container element
+ * @param edgesSvg - The SVG element containing edge paths
+ * @param store - The flow store
+ */
+export declare function attachReconnectionHandler<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(handleEl: SVGCircleElement, edge: EdgeType, endpointType: 'source' | 'target', container: HTMLElement, edgesSvg: SVGSVGElement, store: FlowStore<NodeType, EdgeType>): void;
+//# sourceMappingURL=connection.d.ts.map

package/dist/connection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection.d.ts","sourceRoot":"","sources":["../src/connection.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAc,MAAM,SAAS,CAAA;AA4CxE;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACpC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAEpC,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,QAAQ,GAAG,QAAQ,EAC/B,SAAS,EAAE,WAAW,EACtB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,GACnC,IAAI,CAoON;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACpC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAEpC,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,QAAQ,GAAG,QAAQ,EACjC,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,GACnC,IAAI,CAkJN"}

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+import type { CoordinateExtent } from '@xyflow/system';
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+export declare const INFINITE_EXTENT: CoordinateExtent;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,eAAO,MAAM,MAAM,+BAA+B,CAAA;AAElD,eAAO,MAAM,eAAe,EAAE,gBAG7B,CAAA"}

package/dist/context.d.ts

@@ -0,0 +1,7 @@
+import type { FlowStore } from './types';
+/**
+ * Context for sharing the flow store across child components.
+ * Provided by initFlow, consumed by child init functions (e.g., handles, custom nodes).
+ */
+export declare const FlowContext: import("@barefootjs/client").Context<FlowStore>;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;GAGG;AACH,eAAO,MAAM,WAAW,iDAA6B,CAAA"}

package/dist/edge-path.d.ts

@@ -0,0 +1,14 @@
+import type { EdgeBase, EdgePosition, InternalNodeBase } from '@xyflow/system';
+export type EdgePathTuple = [string, number, number, number, number];
+/**
+ * Compute endpoint positions for an edge, falling back to a node-center
+ * straight line when no handle bounds are available yet (e.g. before the
+ * first measure has populated `nodeLookup`).
+ */
+export declare function computeEdgePosition(edge: EdgeBase, sourceNode: InternalNodeBase, targetNode: InternalNodeBase): EdgePosition | null;
+/**
+ * Calculate edge path based on edge type. Returns
+ * `[d, labelX, labelY, offsetX, offsetY]` or `null`.
+ */
+export declare function getEdgePath(edge: EdgeBase, pos: EdgePosition): EdgePathTuple | null;
+//# sourceMappingURL=edge-path.d.ts.map

package/dist/edge-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edge-path.d.ts","sourceRoot":"","sources":["../src/edge-path.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAE9E,MAAM,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEpE;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,gBAAgB,EAC5B,UAAU,EAAE,gBAAgB,GAC3B,YAAY,GAAG,IAAI,CA2BrB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,QAAQ,EACd,GAAG,EAAE,YAAY,GAChB,aAAa,GAAG,IAAI,CA0BtB"}

package/dist/flow-subsystems.d.ts

@@ -0,0 +1,28 @@
+import type { InternalNodeBase, NodeLookup, XYPosition } from '@xyflow/system';
+import type { FlowProps, InternalFlowStore, NodeBase, EdgeBase } from './types';
+/**
+ * Clamp a child node's drag position so the node's rect stays inside
+ * its parent's rect — implements xyflow's `extent: 'parent'` contract
+ * for the pointer-paced single-node drag handler.
+ *
+ * Operates on the **relative** coordinate the parent-relative model
+ * stores in `userNode.position`: the constraint per axis is
+ * `0 ≤ pos ≤ parentSize − childSize`. Returns the input unchanged when
+ * the node has no `parentId`, isn't `extent: 'parent'`, the parent is
+ * missing, or either node is unmeasured.
+ *
+ * Exposed (non-default-export) so the same primitive can be reused if
+ * the C4 XYDrag integration replaces the inline drag handler — the
+ * extent contract remains the same.
+ */
+export declare function clampDragPositionToParent(position: XYPosition, nodeId: string, lookup: NodeLookup<InternalNodeBase<NodeBase>>): XYPosition;
+/**
+ * Attach all pointer-paced + ResizeObserver-based subsystems to the
+ * outer `<div class="bf-flow">` rendered by the JSX `<Flow>` component.
+ *
+ * Inside a reactive root (`createRoot`), this also registers
+ * `onCleanup` callbacks for the panZoom destroy / ResizeObserver
+ * disconnect / keyboard listener removal lifecycle.
+ */
+export declare function attachFlowSubsystems<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(el: HTMLElement, store: InternalFlowStore<NodeType, EdgeType>, props: FlowProps<NodeType, EdgeType>): void;
+//# sourceMappingURL=flow-subsystems.d.ts.map

package/dist/flow-subsystems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-subsystems.d.ts","sourceRoot":"","sources":["../src/flow-subsystems.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAuB,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAInG,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAE/E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,GAC7C,UAAU,CAqBZ;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACpC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAEpC,EAAE,EAAE,WAAW,EACf,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAC5C,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,GACnC,IAAI,CAiTN"}

package/dist/hooks.d.ts

@@ -0,0 +1,34 @@
+import type { FlowStore, Viewport, NodeBase, EdgeBase, XYPosition } from './types';
+import type { Signal, Memo } from '@barefootjs/client/runtime';
+/**
+ * Access the flow store from any child component.
+ * Must be called within a component rendered inside a Flow.
+ */
+export declare function useFlow<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(): FlowStore<NodeType, EdgeType>;
+/**
+ * Access the current viewport (reactive getter).
+ */
+export declare function useViewport(): Signal<Viewport>[0];
+/**
+ * Access the nodes array (reactive getter).
+ */
+export declare function useNodes<NodeType extends NodeBase = NodeBase>(): Signal<NodeType[]>[0];
+/**
+ * Access the edges array (reactive getter).
+ */
+export declare function useEdges<EdgeType extends EdgeBase = EdgeBase>(): Signal<EdgeType[]>[0];
+/**
+ * Access whether nodes have been initialized (all measured).
+ */
+export declare function useNodesInitialized(): Memo<boolean>;
+/**
+ * Select derived state from the flow store.
+ * Similar to React Flow's useStore(selector).
+ */
+export declare function useStore<T>(selector: (store: FlowStore) => T): Memo<T>;
+/**
+ * Convert a screen position to flow coordinates.
+ * Accounts for viewport transform (pan/zoom) and container offset.
+ */
+export declare function screenToFlowPosition(position: XYPosition): XYPosition;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAClF,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAE9D;;;GAGG;AACH,wBAAgB,OAAO,CACrB,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACpC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,KACjC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAEjC;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAEjD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAEtF;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAEtF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAAC,OAAO,CAAC,CAEnD;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAGtE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAYrE"}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export { createFlowStore } from './store';
+export { FlowContext } from './context';
+export { useFlow, useViewport, useNodes, useEdges, useNodesInitialized, useStore, screenToFlowPosition, } from './hooks';
+export { computeEdgePosition, getEdgePath } from './edge-path';
+export type { EdgePathTuple } from './edge-path';
+export { attachFlowSubsystems, clampDragPositionToParent } from './flow-subsystems';
+export { attachConnectionHandler, attachReconnectionHandler } from './connection';
+export { dispatchNodeType } from './node-type-dispatch';
+export type { NodeInitFn } from './node-type-dispatch';
+export { initNodeResizer, ResizeControlVariant } from './node-resizer';
+export type { NodeResizerOptions, ControlPosition, ControlLinePosition, OnResize, OnResizeStart, OnResizeEnd, ShouldResize, ResizeControlDirection, } from './node-resizer';
+export { setupKeyboardHandlers, setupNodeSelection, setupSelectionRectangle } from './selection';
+export type { SelectionRectOptions } from './selection';
+export { BF_FLOW, BF_FLOW_VIEWPORT, BF_FLOW_EDGES, BF_FLOW_NODES, BF_FLOW_NODE, BF_FLOW_NODE_GROUP, BF_FLOW_NODE_CHILD, BF_FLOW_NODE_SELECTED, BF_FLOW_NODE_CUSTOM, BF_FLOW_EDGE, BF_FLOW_EDGE_SELECTED, BF_FLOW_EDGE_ANIMATED, BF_FLOW_HANDLE, BF_FLOW_HANDLE_TARGET, BF_FLOW_HANDLE_SOURCE, BF_FLOW_CONTROLS, BF_FLOW_CONTROLS_BUTTON, BF_FLOW_MINIMAP, BF_FLOW_MINIMAP_MASK, XYFLOW_VIEWPORT, } from './classes';
+export type { FlowProps, FlowStore, InternalFlowStore, FlowStoreOptions, FitViewOptions, NodeBase, EdgeBase, InternalNodeBase, Viewport, NodeLookup, ParentLookup, EdgeLookup, ConnectionLookup, CoordinateExtent, SnapGrid, NodeOrigin, Transform, PanZoomInstance, XYPosition, OnConnect, OnConnectStart, OnConnectEnd, IsValidConnection, NodeDragItem, ConnectionMode, NodeComponentProps, EdgeComponentProps, SelectionMode, OnReconnect, Connection, } from './types';
+export type { HandleType } from '@xyflow/system';
+export { useNodesState, useEdgesState, useReactFlow, addEdge, reconnectEdge } from './compat';
+export { getBezierPath, getSmoothStepPath, getStraightPath, getConnectedEdges, getOutgoers, getIncomers, getNodesBounds, getNodesInside, getEdgeToolbarTransform, Position, ConnectionMode as ConnectionModeEnum, MarkerType, } from '@xyflow/system';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EACL,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,oBAAoB,GACrB,MAAM,SAAS,CAAA;AAGhB,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC9D,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAOhD,OAAO,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAA;AACnF,OAAO,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACtE,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,QAAQ,EACR,aAAa,EACb,WAAW,EACX,YAAY,EACZ,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAChG,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAMvD,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,YAAY,EACZ,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACpB,eAAe,GAChB,MAAM,WAAW,CAAA;AAIlB,YAAY,EACV,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,eAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAA;AAIhB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAGhD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG7F,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,cAAc,EACd,cAAc,EACd,uBAAuB,EACvB,QAAQ,EACR,cAAc,IAAI,kBAAkB,EACpC,UAAU,GACX,MAAM,gBAAgB,CAAA"}