@elabs-ai/components-flow 5.0.0 → 5.1.0

package/README.md

@@ -45,7 +45,7 @@ import { ThemeProvider } from "@elabs-ai/components-tokens";
 
 ## What's in it
 
-34 exported components — including `Background`, `CanvasShell`, `Controls`, `DEFAULT_EDGE_TOKEN_RADIUS`, `DEFAULT_EDGE_WIDTH_RANGE`.
+40 exported components — including `Background`, `CanvasShell`, `ConnectionMode`, `Controls`, `DEFAULT_EDGE_TOKEN_RADIUS`.
 
 Don't guess the API — ask the CLI:
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, SVGProps, CSSProperties, SVGAttributes, ComponentPropsWithoutRef } from 'react';
 import { Node, Edge, ReactFlowProps, FitViewOptions, NodeProps, EdgeProps, Position, NodeChange, MiniMapProps, PanelPosition } from '@xyflow/react';
-export { Background, Connection, Controls, Edge, EdgeProps, MiniMap, Node, NodeProps, Panel, Position, ReactFlow, ReactFlowProvider, addEdge, useEdgesState, useNodesState, useReactFlow } from '@xyflow/react';
+export { Background, Connection, ConnectionMode, Controls, Edge, EdgeChange, EdgeLabelRenderer, EdgeProps, Handle, HandleProps, MarkerType, MiniMap, Node, NodeChange, NodeProps, NodeResizer, NodeToolbar, OnSelectionChangeParams, Panel, Position, ReactFlow, ReactFlowProvider, addEdge, getBezierPath, getSmoothStepPath, getStraightPath, useEdgesState, useNodesState, useReactFlow, useUpdateNodeInternals } from '@xyflow/react';
 
 interface CanvasShellProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> extends ReactFlowProps<NodeType, EdgeType> {
     /** Render a branded dotted background grid. Defaults to true. */

package/dist/index.js

@@ -164,14 +164,28 @@ import {
   useEdgesState,
   addEdge
 } from "@xyflow/react";
+import {
+  ConnectionMode,
+  EdgeLabelRenderer,
+  Handle,
+  MarkerType,
+  NodeResizer,
+  NodeToolbar,
+  getBezierPath,
+  getSmoothStepPath,
+  getStraightPath,
+  useUpdateNodeInternals
+} from "@xyflow/react";
 export {
   Background,
   CanvasShell,
+  ConnectionMode,
   Controls,
   DEFAULT_EDGE_TOKEN_RADIUS,
   DEFAULT_EDGE_WIDTH_RANGE,
   DEFAULT_LOOP_RADIUS,
   EdgeLabelPill,
+  EdgeLabelRenderer,
   FLOW_ALL_SIDE_HANDLES,
   FLOW_EDGE_FOCUS_CONTOUR_WIDTH,
   FLOW_EDGE_FOCUS_RING_WIDTH,
@@ -190,10 +204,14 @@ export {
   FlowSmartEdge,
   FlowWeightedEdge,
   HANDLE_SIDES,
+  Handle,
   HelperLines,
   InspectorPanel,
   Legend,
+  MarkerType,
   MiniMap,
+  NodeResizer,
+  NodeToolbar,
   Panel,
   Position,
   ReactFlow,
@@ -207,8 +225,11 @@ export {
   createEdgePathSampler,
   expandGroup,
   flattenEdgePath,
+  getBezierPath,
   getEdgeParams,
   getHelperLines,
+  getSmoothStepPath,
+  getStraightPath,
   groupNodes,
   handlePoint,
   isFlowGroupProxyEdge,
@@ -231,6 +252,7 @@ export {
   useHelperLines,
   useNodesState,
   useReactFlow,
+  useUpdateNodeInternals,
   withWeightedEdgeAria
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @elabs-ai/components-flow — branded React Flow (@xyflow/react) building blocks.\n *\n * Import the React Flow stylesheet once at the app root:\n *   import \"@xyflow/react/dist/style.css\";\n */\nexport * from \"./canvas-shell\";\nexport * from \"./flow-handle\";\nexport * from \"./flow-node\";\nexport * from \"./flow-edge\";\n// The shared edge path + keyboard focus indicator every edge type draws through (#286).\nexport * from \"./flow-edge-path\";\nexport * from \"./flow-smart-edge\";\nexport * from \"./flow-floating-edge\";\nexport * from \"./flow-placeholder-node\";\nexport * from \"./flow-button-edge\";\nexport * from \"./flow-layout\";\nexport * from \"./helper-lines\";\nexport * from \"./flow-mini-map\";\nexport * from \"./inspector-panel\";\nexport * from \"./legend\";\nexport * from \"./zoom-controls\";\nexport * from \"./flow-group-node\";\nexport * from \"./use-flow-groups\";\n\n// Convenience re-exports so consumers can build flows without a direct dep.\nexport {\n  Background,\n  Controls,\n  MiniMap,\n  Panel,\n  Position,\n  ReactFlow,\n  ReactFlowProvider,\n  useReactFlow,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n} from \"@xyflow/react\";\nexport type { Node, Edge, Connection, NodeProps, EdgeProps } from \"@xyflow/react\";\n\n// FlowWeightedEdge — RM-043\nexport * from \"./flow-weighted-edge\";\n\n// FlowSelfLoopEdge — RM-044\nexport * from \"./flow-self-loop-edge\";\n\n// FlowEdgeTokens — RM-065 prerequisite\nexport * from \"./flow-edge-tokens\";\n\n// elkjs adapter — RM-067\nexport {\n  layoutFlowElk,\n  type FlowElkEngine,\n  type FlowElkGraph,\n  type FlowLayoutElkOptions,\n  type FlowLayoutElkResult,\n} from \"./flow-layout/layout-flow-elk\";\nexport { pinBackbone, type FlowElkBackbone } from \"./flow-layout/backbone\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @elabs-ai/components-flow — branded React Flow (@xyflow/react) building blocks.\n *\n * Import the React Flow stylesheet once at the app root:\n *   import \"@xyflow/react/dist/style.css\";\n */\nexport * from \"./canvas-shell\";\nexport * from \"./flow-handle\";\nexport * from \"./flow-node\";\nexport * from \"./flow-edge\";\n// The shared edge path + keyboard focus indicator every edge type draws through (#286).\nexport * from \"./flow-edge-path\";\nexport * from \"./flow-smart-edge\";\nexport * from \"./flow-floating-edge\";\nexport * from \"./flow-placeholder-node\";\nexport * from \"./flow-button-edge\";\nexport * from \"./flow-layout\";\nexport * from \"./helper-lines\";\nexport * from \"./flow-mini-map\";\nexport * from \"./inspector-panel\";\nexport * from \"./legend\";\nexport * from \"./zoom-controls\";\nexport * from \"./flow-group-node\";\nexport * from \"./use-flow-groups\";\n\n// Convenience re-exports so consumers can build flows without a direct dep.\nexport {\n  Background,\n  Controls,\n  MiniMap,\n  Panel,\n  Position,\n  ReactFlow,\n  ReactFlowProvider,\n  useReactFlow,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n} from \"@xyflow/react\";\nexport type { Node, Edge, Connection, NodeProps, EdgeProps } from \"@xyflow/react\";\n\n// What a CUSTOM node or edge is built from — so a consumer (and a copy-own registry block)\n// can write its own node types against this package alone, without a second, direct\n// dependency on the engine that could drift from the version this package is built on.\n// See the `Flow/Custom Nodes` stories.\nexport {\n  ConnectionMode,\n  EdgeLabelRenderer,\n  Handle,\n  MarkerType,\n  NodeResizer,\n  NodeToolbar,\n  getBezierPath,\n  getSmoothStepPath,\n  getStraightPath,\n  useUpdateNodeInternals,\n} from \"@xyflow/react\";\nexport type { EdgeChange, HandleProps, NodeChange, OnSelectionChangeParams } from \"@xyflow/react\";\n\n// FlowWeightedEdge — RM-043\nexport * from \"./flow-weighted-edge\";\n\n// FlowSelfLoopEdge — RM-044\nexport * from \"./flow-self-loop-edge\";\n\n// FlowEdgeTokens — RM-065 prerequisite\nexport * from \"./flow-edge-tokens\";\n\n// elkjs adapter — RM-067\nexport {\n  layoutFlowElk,\n  type FlowElkEngine,\n  type FlowElkGraph,\n  type FlowLayoutElkOptions,\n  type FlowLayoutElkResult,\n} from \"./flow-layout/layout-flow-elk\";\nexport { pinBackbone, type FlowElkBackbone } from \"./flow-layout/backbone\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-flow",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,8 +33,8 @@
     "elkjs": "^0.12.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-tokens": "5.0.0",
-    "@elabs-ai/components-ui": "5.0.0"
+    "@elabs-ai/components-tokens": "^5.1.0",
+    "@elabs-ai/components-ui": "^5.1.0"
   },
   "peerDependenciesMeta": {
     "elkjs": {
@@ -59,10 +59,10 @@
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
     "@elabs-ai/components-eslint-config": "0.1.0",
-    "@elabs-ai/components-icons": "5.0.0",
-    "@elabs-ai/components-tokens": "5.0.0",
+    "@elabs-ai/components-icons": "5.1.0",
+    "@elabs-ai/components-tokens": "5.1.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-ui": "5.0.0"
+    "@elabs-ai/components-ui": "5.1.0"
   },
   "scripts": {
     "build": "tsup",

package/src/custom-nodes/custom-nodes.stories.tsx

@@ -1,10 +1,11 @@
 /**
  * Custom nodes — how to write your OWN node type on the branded canvas.
  *
- * Nothing here is new package API. Every node below is a plain React component
- * registered in `nodeTypes`, built from React Flow's `Handle`/`NodeToolbar`/
- * `NodeResizer`, `@elabs-ai/components-ui` primitives and the three conventions
- * `FlowNode` itself follows. Copy the one closest to what you need.
+ * Every node below is a plain React component registered in `nodeTypes`, built from the
+ * engine parts this package re-exports (`Handle`, `NodeToolbar`, `NodeResizer` — import them
+ * from `@elabs-ai/components-flow`, no direct engine dependency needed),
+ * `@elabs-ai/components-ui` primitives and the three conventions `FlowNode` itself follows.
+ * Copy the one closest to what you need.
  *
  * The three conventions (see `nodeCardClassName` / `handleClassName` below):
  *
@@ -31,7 +32,7 @@ import {
   type Edge,
   type Node,
   type NodeProps,
-} from "@xyflow/react";
+} from "../index";
 import {
   Braces,
   Copy,

package/src/index.ts

@@ -39,6 +39,24 @@ export {
 } from "@xyflow/react";
 export type { Node, Edge, Connection, NodeProps, EdgeProps } from "@xyflow/react";
 
+// What a CUSTOM node or edge is built from — so a consumer (and a copy-own registry block)
+// can write its own node types against this package alone, without a second, direct
+// dependency on the engine that could drift from the version this package is built on.
+// See the `Flow/Custom Nodes` stories.
+export {
+  ConnectionMode,
+  EdgeLabelRenderer,
+  Handle,
+  MarkerType,
+  NodeResizer,
+  NodeToolbar,
+  getBezierPath,
+  getSmoothStepPath,
+  getStraightPath,
+  useUpdateNodeInternals,
+} from "@xyflow/react";
+export type { EdgeChange, HandleProps, NodeChange, OnSelectionChangeParams } from "@xyflow/react";
+
 // FlowWeightedEdge — RM-043
 export * from "./flow-weighted-edge";