# @elabs-ai/components-flow

> Branded React Flow canvas, nodes, edges, controls, inspector.

Import from `@elabs-ai/components-flow`. Part of brand-ui — see the root `llms.txt` for routing.

## Components

- Background
- CanvasShell — Branded React Flow canvas wrapper with token-driven background + sane defaults.
  - avoid: Hardcoding node/edge colors — use the flow-node/flow-edge tokens so the canvas matches the theme.
  - avoid: Hiding the React Flow attribution without the appropriate license.
  - avoid: Forgetting to import @xyflow/react/dist/style.css once in the consuming app.
- ConnectionMode
- Controls — Zoom / fit / lock controls for the agent workspace Canvas.
  - avoid: Building a second zoom control in a Panel — one control cluster per canvas, or the two disagree.
  - avoid: Dropping the keyboard path — every canvas action must stay reachable without a pointer.
  - avoid: Stacking it under the canvas content — it is chrome and must stay above the graph and clickable.
- DEFAULT_EDGE_TOKEN_RADIUS
- DEFAULT_EDGE_WIDTH_RANGE
- DEFAULT_LOOP_RADIUS
- EdgeLabelPill
- EdgeLabelRenderer
- FLOW_ALL_SIDE_HANDLES
- FLOW_EDGE_DEFAULTS
- FLOW_EDGE_FOCUS_CONTOUR_WIDTH
- FLOW_EDGE_FOCUS_RING_WIDTH
- FLOW_EDGE_TYPE
- FLOW_EMPHASES
- FLOW_GROUP_NODE_TYPE
- FLOW_HANDLE_ANCHOR_CLASS
- FLOW_NODE_TYPE
- FLOW_TONES
- FlowButtonEdge
- FlowEdge
- FlowEdgeLabel
- FlowEdgePath
- FlowEdgeTokens
- FlowFloatingEdge
- FlowGroupNode
- FlowMiniMap
- FlowNode — Branded custom React Flow node (title/subtitle/kind/icon/tone).
  - avoid: Raw colors on the node — use flow-node tokens.
- FlowNodeCard
- FlowPlaceholderNode
- FlowPort
- FlowSelfLoopEdge
- FlowSmartEdge
- FlowToneIndicator
- FlowWeightedEdge
- Handle
- HANDLE_SIDES
- HelperLines
- InspectorPanel
- Legend
- MarkerType
- MiniMap
- NodeResizer
- NodeToolbar — The contextual action bar attached to a selected workspace-graph node.
  - avoid: Using it as the canvas-wide toolbar — it is a NODE toolbar and is positioned against the selected node.
  - avoid: Reaching for it when you want the WAI-ARIA keyboard toolbar — that is Toolbar in @elabs-ai/components-ui.
  - avoid: Putting destructive node actions in it with no confirm/undo — deleting a node loses its edges too.
  - avoid: Filling it with icon-only buttons and no labels — every icon-only control needs an accessible name.
- Panel — A floating overlay panel pinned to a corner of the workspace Canvas.
  - avoid: Using it as the app's side rail — that is ContextPanel; this floats over the graph.
  - avoid: Filling a corner panel with a long scrollable list — it overlays the graph the user is trying to read.
  - avoid: Stacking several panels in one corner — they occlude each other; give each corner one job.
- Position
- ReactFlow
- ReactFlowProvider
- ZoomControls

## Hooks

- useAutoLayout
- useEdgesState
- useFlowGroups
- useFlowLayout
- useHelperLines
- useNodesState
- useReactFlow
- useUpdateNodeInternals