@erd-studio/renderer 0.1.4 → 0.4.0

package/dist/types/components/StatusBar/StatusBar.d.ts

@@ -0,0 +1,45 @@
+/**
+ * StatusBar — the diagram's counts at the bottom-left of the canvas, and a key
+ * to its layers: "5 tables | 4 relationships | [GLD] Gold 4  [SLV] Silver 1".
+ *
+ * Relationships are counted as the canvas draws them: a composite foreign key
+ * is one line, so one relationship, however many column pairs it has, and a
+ * relationship whose other end is not on the diagram is not drawn, so not
+ * counted.
+ *
+ * The key appears once the tables' own layers are known (DBML storage), so a
+ * diagram that borrows tables from other layers says which, with the badge
+ * each table's header carries. A single-layer project has no key.
+ *
+ * Shared by the extension's editor and the viewer (`ErdCanvas`): it only reads
+ * the store's domain, posts nothing and offers nothing to click. Render it as
+ * a child of `<ReactFlow>` (it is a React Flow `Panel`, beside the legend's
+ * `?` button). In the viewer it stays in sight while the legend is open, to
+ * the legend's right (the counts on one row, the layer key under them), and
+ * is hidden while the legend is open on a canvas too narrow for both.
+ */
+import type { DisplaySubjectArea } from '@erd-studio/core';
+import './StatusBar.css';
+/** One entry of the layer key. */
+export interface StatusBarLayer {
+    id: string;
+    count: number;
+    abbreviation: string;
+    label: string;
+    color?: string;
+}
+/** What the status bar shows for a domain. */
+export interface StatusBarStats {
+    tables: number;
+    /** One per line on the canvas: a composite's column pairs fold into one. */
+    relationships: number;
+    /** Empty in a single-layer project. */
+    layers: StatusBarLayer[];
+}
+/**
+ * The status bar's counts for a domain: its tables, its relationships as the
+ * canvas draws them, and each layer its tables belong to with its count (the
+ * diagram's own layer first, then `layerConfigs` order, then by name).
+ */
+export declare function statusBarStats(domain: Pick<DisplaySubjectArea, 'models' | 'relationships' | 'layer' | 'layerConfigs'>): StatusBarStats;
+export declare function StatusBar(): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/common/ColumnRowEditor.d.ts

@@ -7,7 +7,7 @@
  * Uses useFocusWithinRow hook for robust focus tracking that eliminates
  * flicker when switching between fields within the same row.
  */
-import type { ModelRole } from '@erd-studio/core';
+import type { TableRole } from '@erd-studio/core';
 import type { UpdateColumnPayloadColumn } from '@erd-studio/core';
 import './ColumnRowEditor.css';
 export interface ColumnRowEditorColumn {
@@ -22,6 +22,17 @@ export interface ColumnRowEditorColumn {
     /** Additive type for fact measure columns. */
     additiveType?: 'additive' | 'semi-additive' | 'non-additive';
 }
+/**
+ * Which of a column's typed fields the row shows, from the project's field
+ * list (`ColumnEditor` works it out with core's resolver). Each is shown when
+ * true. The natural key's badge always shows whatever `naturalKey` says: it
+ * is key information, not only a field.
+ */
+export interface ColumnFieldVisibility {
+    scdType?: boolean;
+    additiveType?: boolean;
+    naturalKey?: boolean;
+}
 export interface ColumnRowEditorProps {
     /** The column data to display/edit. */
     column: ColumnRowEditorColumn;
@@ -51,8 +62,13 @@ export interface ColumnRowEditorProps {
     onToggleNK?: () => void;
     /** Show warning if multiple PKs exist in model. */
     showMultiplePKWarning?: boolean;
-    /** Parent model's role — determines whether SCD/additive dropdowns are shown. */
-    modelRole?: ModelRole;
+    /** Parent model's role — determines whether SCD/additive dropdowns are shown (without `fieldVisibility`). */
+    modelRole?: TableRole;
+    /**
+     * Which typed fields to show, from the field list. When absent, the SCD
+     * dropdown shows for a dimension role and the additive one for a fact role.
+     */
+    fieldVisibility?: ColumnFieldVisibility;
     /** Whether the description area is expanded. */
     expanded?: boolean;
     /** Callback when the expand/collapse chevron is clicked. */
@@ -74,4 +90,4 @@ export interface ColumnRowEditorProps {
     /** Rendered at the foot of the expanded area — the column's metadata editor. */
     metaSlot?: React.ReactNode;
 }
-export declare function ColumnRowEditor({ column, mode, existingColumnNames, onUpdate, onDelete, onCancel, showIndicators, showDelete, onTogglePK, onToggleFK, onToggleNK, showMultiplePKWarning, modelRole, expanded, onToggleExpand, dragHandleProps, isDragOver, isBeingDragged, isSelected, onSelect, isEditingActive, metaSlot, }: ColumnRowEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnRowEditor({ column, mode, existingColumnNames, onUpdate, onDelete, onCancel, showIndicators, showDelete, onTogglePK, onToggleFK, onToggleNK, showMultiplePKWarning, modelRole, fieldVisibility, expanded, onToggleExpand, dragHandleProps, isDragOver, isBeingDragged, isSelected, onSelect, isEditingActive, metaSlot, }: ColumnRowEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/common/KeyBadgeGroup.d.ts

@@ -14,7 +14,11 @@ export interface KeyBadgeGroupProps {
     onTogglePK?: () => void;
     onToggleFK?: () => void;
     onToggleNK?: () => void;
-    /** Show warning icon if multiple PKs exist in the model. */
+    /**
+     * Show a warning icon on a PK badge. Deprecated: several primary-key
+     * columns are one composite key (`indexes { (a, b) [pk] }`), never a fault,
+     * so the detail panel no longer sets it; kept for callers that pass it.
+     */
     showMultiplePKWarning?: boolean;
 }
 export declare function KeyBadgeGroup({ isPrimaryKey, isForeignKey, isNaturalKey, mode, status, onTogglePK, onToggleFK, onToggleNK, showMultiplePKWarning, }: KeyBadgeGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/editor.d.ts

@@ -3,27 +3,33 @@ export * from './store.js';
 export * from './sizing.js';
 export { NOOP_CANVAS_HOST, CanvasEnvironmentProvider, useCanvasHost, useSend, useIsViewer, type CanvasHost, type CanvasEnvironment, } from './host/canvasEnvironment.js';
 export { useCanvasGraph } from './canvas/useCanvasGraph.js';
+export { useHoverFocus, type UseHoverFocusResult, type HoverFocusHandlers } from './canvas/useHoverFocus.js';
 export { CanvasBackdrop, ANNOTATION_MINIMAP_COLORS } from './canvas/CanvasBackdrop.js';
 export { canvasNodeTypes, canvasEdgeTypes } from './canvas/flowTypes.js';
-export { ModelNode } from './components/Graph/ModelNode.js';
+export { TableNode } from './components/Graph/ModelNode.js';
 export { FkEdge } from './components/Graph/FkEdge.js';
+export { EdgeFlow, EdgeFlowGlyphs, type EdgeFlowProps } from './components/Graph/EdgeFlow.js';
 export { AnnotationNode } from './components/Graph/AnnotationNode.js';
 export { AnnotationEdge } from './components/Graph/AnnotationEdge.js';
 export { DetailPanel } from './components/DetailPanel/DetailPanel.js';
-export { Legend } from './components/Legend/Legend.js';
+export { Legend, legendEntries, type LegendEntries } from './components/Legend/Legend.js';
+export { StatusBar, statusBarStats, type StatusBarStats, type StatusBarLayer } from './components/StatusBar/StatusBar.js';
 export { KeyBadge } from './components/common/KeyBadge.js';
 export { KeyBadgeGroup } from './components/common/KeyBadgeGroup.js';
 export { DataTypeSelect } from './components/common/DataTypeSelect.js';
-export { ColumnRowEditor } from './components/common/ColumnRowEditor.js';
+export { ColumnRowEditor, type ColumnFieldVisibility } from './components/common/ColumnRowEditor.js';
 export * from './hooks/useColumnExpansion.js';
 export * from './hooks/useColumnReorder.js';
 export * from './hooks/useFocusWithinRow.js';
 export * from './hooks/useLongPressDrag.js';
+export { usePrefersReducedMotion } from './hooks/usePrefersReducedMotion.js';
 export { applyNodeOverlays, type GraphNode, type GraphEdge } from './lib/nodeOverlays.js';
+export { computeCanvasFocus, sameFocus, type CanvasFocus } from './lib/canvasFocus.js';
 export * from './lib/stageColors.js';
 export * from './lib/dataTypeColors.js';
 export * from './lib/badgeLabels.js';
 export { swapCardinality } from './lib/cardinalityUtils.js';
 export { columnPairs, foldComposites, relationshipDisplayKey, relationshipEdgeId } from './lib/relationshipDisplayKey.js';
-export { computeModelLabels, matchesModelSearch, type LabelledModel } from './lib/modelLabels.js';
+export { computeTableLabels, matchesTableSearch, type LabelledTable } from './lib/modelLabels.js';
+export { LAYER_BADGE_FALLBACK, layerAbbreviation, isSingleLayerProject } from './lib/layerCues.js';
 export { ANNOTATION_COLORS } from './lib/annotationColors.js';

package/dist/types/hooks/useColumnReorder.d.ts

@@ -4,7 +4,7 @@
  * Uses imperative mouse events (matching the existing useLongPressDrag pattern).
  * Returns drag state, handle props for each row, and the optimistic display order.
  *
- * Works in both DetailPanel (ColumnRowEditor rows) and ModelNode (ColumnRow rows)
+ * Works in both DetailPanel (ColumnRowEditor rows) and TableNode (ColumnRow rows)
  * by accepting configurable CSS selectors for the container and row elements.
  */
 interface Column {

package/dist/types/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1,13 @@
+/**
+ * usePrefersReducedMotion — true while the operating system's reduce-motion
+ * setting is on (`prefers-reduced-motion: reduce`).
+ *
+ * The relationship arrows are SMIL animations, which CSS media queries cannot
+ * stop, so `EdgeFlow` asks this hook and draws a still frame instead. One
+ * module-level media query list serves every caller; false where
+ * `window.matchMedia` does not exist (tests, server rendering).
+ *
+ * VS Code's own `workbench.reduceMotion` setting does not reach webviews, so
+ * only the OS setting counts.
+ */
+export declare function usePrefersReducedMotion(): boolean;

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 export { ErdCanvas, type ErdCanvasProps, type ErdCanvasHandle } from './ErdCanvas.js';
-export { transformDomain, pickHandleSides, type TransformResult, type TransformOptions, type NodeRect, type NodeDimensions, } from './lib/graphTransformer.js';
+export { LINE_STYLES, DEFAULT_LINE_STYLE, isLineStyle, type LineStyle } from './lib/edgeRouting/lineStyle.js';
+export { transformSubjectArea, pickHandleSides, type TransformResult, type TransformOptions, type NodeRect, type NodeDimensions, } from './lib/graphTransformer.js';
 export { repickHandleSides, nodeRect } from './lib/dragHandleSides.js';
-export type { DisplayDomain, DisplayModel, DisplayColumn, DisplayRelationship, PhysicalColumnSource, PhysicalProvenance, Annotation, AnnotationColor, Cardinality, Layer, ModelRole, NodePosition, Rationale, Stage, ViewConfig, LayerConfig, } from '@erd-studio/core';
-export { toMermaid, toDbml, exportDiagram, diagramExportFileName, DIAGRAM_EXPORT_FORMATS, DIAGRAM_EXPORT_FILE_EXTENSIONS, type DiagramExportFormat, } from '@erd-studio/core';
-export type { ModelFlowNode, ModelNodeData, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge, ColumnDisplay, } from './types/graph.js';
+export type { DisplaySubjectArea, DisplayTable, DisplayColumn, DisplayRelationship, PhysicalColumnSource, PhysicalProvenance, Annotation, AnnotationColor, Cardinality, Layer, TableRole, NodePosition, Rationale, Stage, ViewConfig, LayerConfig, } from '@erd-studio/core';
+export { toMermaid, toDbml, toDbmlRich, DBML_RICH_EXPORT_HEADER, type DbmlRichOptions, exportDiagram, diagramExportFileName, DIAGRAM_EXPORT_FORMATS, DIAGRAM_EXPORT_FILE_EXTENSIONS, type DiagramExportFormat, } from '@erd-studio/core';
+export type { TableFlowNode, TableNodeData, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge, ColumnDisplay, } from './types/graph.js';

package/dist/types/lib/badgeLabels.d.ts

@@ -2,7 +2,7 @@
  * badgeLabels — the abbreviations and symbols the canvas stamps on nodes and
  * columns, and the prose that decodes them.
  *
- * These live here rather than in ModelNode because the Legend explains exactly
+ * These live here rather than in TableNode because the Legend explains exactly
  * this vocabulary. Two copies of "WH means the warehouse catalog" is two things
  * to keep in step, and the legend is precisely the copy nobody edits when the
  * node changes. Both ends import these maps, so a new source or a renamed chip
@@ -27,6 +27,12 @@ export declare const SOURCE_PHRASE: Record<PhysicalColumnSource, string>;
 export declare const SOURCE_ORDER: PhysicalColumnSource[];
 /** One line per source for the legend, saying what having that chip means. */
 export declare const SOURCE_LEGEND_DESC: Record<PhysicalColumnSource, string>;
+/** Viewer twin of `SOURCE_LABEL`: the manifest chip does not say DBT. */
+export declare const SOURCE_LABEL_NEUTRAL: Record<PhysicalColumnSource, string>;
+/** Viewer twin of `SOURCE_PHRASE`. */
+export declare const SOURCE_PHRASE_NEUTRAL: Record<PhysicalColumnSource, string>;
+/** Viewer twin of `SOURCE_LEGEND_DESC`. */
+export declare const SOURCE_LEGEND_DESC_NEUTRAL: Record<PhysicalColumnSource, string>;
 /** Unicode circled numbers for SCD type badges. */
 export declare const SCD_BADGE: Record<number, string>;
 /**

package/dist/types/lib/canvasContext.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Reading the editing host's `CanvasContext` (the detail panel's File line
+ * and "Not on this diagram" list, the node's "+n" chip). A viewer never has
+ * one, so every helper answers "nothing" for a null context.
+ */
+import type { CanvasContext, DisplaySubjectArea, OffDiagramRelationship } from '@erd-studio/core';
+/** `record[key]` when it is the record's own key: a table named `constructor` is not `Object.prototype.constructor`. */
+export declare function ownValue<T>(record: Readonly<Record<string, T>> | undefined, key: string): T | undefined;
+/**
+ * The table's relationships to tables not on the diagram, as the host sent
+ * them, less any whose other table is on the diagram now (added since the
+ * context was worked out). Logical stage only.
+ */
+export declare function offDiagramRows(context: CanvasContext | null, domain: DisplaySubjectArea | null, modelName: string): readonly OffDiagramRelationship[];
+/** The distinct tables of `rows`, in their order. */
+export declare function offDiagramTables(rows: readonly OffDiagramRelationship[]): string[];
+/** `many-to-one` as a reader writes it: `Many-to-one`. */
+export declare function cardinalityLabel(cardinality: string): string;
+/** The "+n" chip's tip. */
+export declare function offDiagramChipTip(count: number): string;

package/dist/types/lib/canvasFocus.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Canvas focus — which tables and relationship lines stay bright, and which
+ * lines carry the moving direction arrows, for a focused table or line.
+ *
+ * One connectivity rule shared by click dimming (`applyNodeOverlays`) and the
+ * hover preview (`useHoverFocus`), so the two can never disagree about what
+ * "related" means:
+ *
+ *   - A table: the table plus every table one FK line away. A line stays bright
+ *     when both its ends are bright (so a line between two neighbours does too).
+ *     The hover preview passes `ownLinesOnly`: it answers "what does this
+ *     table connect to", so only the table's own lines stay bright there.
+ *   - A line: its two end tables, and only that line.
+ *
+ * `flowEdges` are the lines that animate: the focused table's own lines (or
+ * the focused line), minus any drawn as `missing` in a comparison, because
+ * motion would claim a relationship that does not exist here.
+ *
+ * Pure: no React, no DOM. The result is immutable by convention, and
+ * `sameFocus` compares two by value so store writes can be skipped when a
+ * recompute produced the same answer.
+ */
+import type { GraphEdge } from './nodeOverlays.js';
+/** Above this many flowing lines, arrows stand still (a static direction cue). */
+export declare const FLOW_ANIMATION_LIMIT = 40;
+export interface CanvasFocus {
+    /** Table driving the focus (null for a line focus). */
+    readonly node: string | null;
+    /** FK line driving the focus (null for a table focus). */
+    readonly edge: string | null;
+    /** Bright tables: the table and its FK neighbours, or the line's two ends. */
+    readonly nodes: ReadonlySet<string>;
+    /** Bright FK lines: both ends in `nodes` (or, `ownLinesOnly`, touching `node`), or just the focused line. */
+    readonly edges: ReadonlySet<string>;
+    /** Lines that carry direction arrows: those touching `node`, or the focused line; never `missing` ones. */
+    readonly flowEdges: ReadonlySet<string>;
+    /** Whether the arrows move (`flowEdges.size <= FLOW_ANIMATION_LIMIT`). */
+    readonly animate: boolean;
+}
+export interface CanvasFocusTarget {
+    node?: string | null;
+    edge?: string | null;
+}
+export interface CanvasFocusOptions {
+    /** A table focus keeps only the table's own lines bright, not lines between its neighbours. */
+    ownLinesOnly?: boolean;
+}
+/**
+ * The focus for a table (`target.node`) or an FK line (`target.edge`); a table
+ * wins when both are given. Returns null when there is no target, the line is
+ * unknown or an annotation link, or (when `nodeIds` is given) the table is not
+ * one of them.
+ */
+export declare function computeCanvasFocus(edges: readonly GraphEdge[], target: CanvasFocusTarget, nodeIds?: ReadonlySet<string>, options?: CanvasFocusOptions): CanvasFocus | null;
+/** Value equality: driver, `animate`, then each set's size and members. */
+export declare function sameFocus(a: CanvasFocus | null, b: CanvasFocus | null): boolean;
+/** A table's part in a focus: the table driving it, one related to it, or neither. */
+export declare function tableFocusRole(focus: CanvasFocus | null | undefined, id: string): 'origin' | 'related' | null;
+/**
+ * An FK line's part in the current focus:
+ *   - `'flow'`: carries moving arrows (`flowFocus`).
+ *   - `'flow-static'`: carries arrows that stand still (too many lines flowing).
+ *   - `'lit'`: kept bright by the hover preview, no arrows.
+ *   - null: none of these.
+ */
+export declare function edgeFocusRole(flow: CanvasFocus | null | undefined, hover: CanvasFocus | null | undefined, id: string): 'flow' | 'flow-static' | 'lit' | null;

package/dist/types/lib/dragHandleSides.d.ts

@@ -1,14 +1,14 @@
 /**
  * Handle sides for edges after nodes are moved on the canvas.
  *
- * `transformDomain` chooses the handle side at each end of an edge from the
+ * `transformSubjectArea` chooses the handle side at each end of an edge from the
  * saved positions: `pickHandleSides` compares the two node rectangles, and a
  * self-referencing relationship always uses the top (source) and right
  * (target) handles. A canvas that lets nodes be dragged without rebuilding the
  * domain has to make that choice again for the edges on the dragged nodes, or
  * those edges stay attached to the side that faced the old position.
  *
- * The rectangles follow `transformDomain` too: a node's size is its measured
+ * The rectangles follow `transformSubjectArea` too: a node's size is its measured
  * size when React Flow has one, otherwise the model-node estimate from
  * `resolveNodeDimensions`, or an annotation's own (or default) size.
  */

package/dist/types/lib/edgeFlow.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Relationship flow — the moving arrows on the lines of a focused table.
+ *
+ * The rule: glyphs travel from the `1` end to the `*` end, the way one
+ * customer fans out to many orders (Power BI's filter arrow, matching the
+ * `*` / `1` labels the canvas already draws). The edge path runs from the
+ * source (`fromModel`) to the target (`toModel`), so:
+ *
+ *   | cardinality    | mode      | glyphs                                  |
+ *   |----------------|-----------|-----------------------------------------|
+ *   | many-to-one    | `reverse` | chevrons, target → source               |
+ *   | one-to-many    | `forward` | chevrons, source → target               |
+ *   | many-to-many   | `both`    | two lanes of chevrons, opposite ways    |
+ *   | one-to-one     | `meet`    | two dots that meet in the middle        |
+ *   | anything else  | `reverse` | as the default labels (`*` at source)   |
+ *   | `missing`      | none      | motion would claim the link exists here |
+ *
+ * `flowModeFor` is the one place to flip the convention.
+ *
+ * `planEdgeFlow` turns a mode and a path length into glyph recipes
+ * (`GlyphSpec`). Pure: no React, no DOM. A moving glyph is an SVG
+ * `<animateMotion>`; durations are bucketed so a few pixels of layout jitter
+ * do not restart the animation, and the glyph count is capped. With motion
+ * off (too many flowing lines, a click selection that has settled, or the
+ * user's reduce-motion setting) every glyph is `still`: a plain transform at
+ * a fixed point on the line, still pointing the right way. Still glyphs are
+ * deliberately not a frozen SMIL frame: once a `fill="freeze"` interval ends,
+ * Chrome stops applying later `path` / `rotate` / `keyPoints` changes, so a
+ * swapped or re-routed line would keep a stale arrow.
+ */
+import type { FkEdgeData } from '../types/graph.js';
+export declare const FLOW_SPEED_PX_S = 56;
+export declare const FLOW_SPACING_PX = 90;
+/** A one-way line always has at least two arrows, so one is always on screen. */
+export declare const FLOW_MIN_GLYPHS = 2;
+export declare const FLOW_MAX_GLYPHS = 4;
+export declare const FLOW_MIN_DUR_S = 1.6;
+export declare const FLOW_MAX_DUR_S = 7;
+export declare const FLOW_DUR_BUCKET_S = 0.5;
+export declare const MANY_MANY_SPACING_PX = 140;
+export declare const MANY_MANY_MAX_PER_LANE = 3;
+export declare const ONE_ONE_CYCLE_S = 1.8;
+/** Below this zoom the glyphs would be sub-pixel noise, so none are drawn. */
+export declare const MIN_FLOW_ZOOM = 0.35;
+/** Glyphs grow as the canvas zooms out, up to this factor, so they stay legible. */
+export declare const MAX_GLYPH_SCALE = 2.5;
+/** Radius of a one-to-one dot, in flow px at scale 1. */
+export declare const FLOW_DOT_RADIUS = 3.25;
+export type FlowMode = 'forward' | 'reverse' | 'both' | 'meet';
+export interface GlyphSpec {
+    kind: 'chevron' | 'dot';
+    /** 0 or 1; lanes only differ for `both`. */
+    lane: 0 | 1;
+    /** `<animateMotion keyPoints>`; for a still glyph, `p;p` (its fixed point). */
+    keyPoints: string;
+    rotate: 'auto' | 'auto-reverse';
+    keyTimes: string;
+    dur: string;
+    begin: string;
+    /** True: drawn at `at` with a plain transform, no animation. */
+    still: boolean;
+    /** A still glyph's position, as a fraction of the path length. */
+    at?: number;
+    opacityValues?: string;
+    opacityKeyTimes?: string;
+}
+export interface FlowPlanOptions {
+    animate: boolean;
+    reducedMotion: boolean;
+    /**
+     * Where a one-way or many-to-many line's two still glyphs sit (fractions of
+     * its length), chosen off the bends (`stillPositions`). Defaults to
+     * 0.25 / 0.75, or 0.2 / 0.8 for many-to-many.
+     */
+    stillAt?: readonly [number, number] | null;
+    /** How much the glyphs are scaled up (zoomed-out canvas); spaces the one-to-one dots. */
+    glyphScale?: number;
+}
+/** The flow mode for a line, or null when it must not move (`missing`). */
+export declare function flowModeFor(cardinality: string | undefined, status?: FkEdgeData['discrepancyStatus']): FlowMode | null;
+/** Seconds for one pass along a line of this length, bucketed and clamped. */
+export declare function flowDuration(length: number): number;
+/** The glyph recipes for one line. */
+export declare function planEdgeFlow(mode: FlowMode, length: number, opts: FlowPlanOptions): GlyphSpec[];

package/dist/types/lib/edgeRouting/index.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Edge routing — route every FK line in one pass.
+ *
+ *   input (boxes + anchors) → router (polylines) → renderer (corners, crossings)
+ *                                                → tunnels (x-ray under cards)
+ *
+ * Two line styles, chosen by the reader (`LineStyle`): `curved` (soft curves
+ * around the tables, a halo where lines cross, an x-ray of a line that has
+ * to pass under a card) and `hops` (square corners rounded a little, a small
+ * hop where two lines cross). Both use the same router.
+ *
+ * A line the router leaves out (a self-loop, a line on an unmeasured card)
+ * keeps `FkEdge`'s smooth-step fallback, and so does every line when routing
+ * fails or is too slow for the diagram (`createEdgeRoutingEngine`).
+ */
+import type { RoutedEdge, RoutingInput } from './types.js';
+import { type LineStyle } from './lineStyle.js';
+import type { RoutingWorkerFactory } from './worker/client.js';
+export * from './types.js';
+export { buildRoutingInput, routingInputKey, draggingNodesKey } from './input.js';
+export { createAvoidRouter, type AvoidRouter } from './routers/orthogonalAvoid.js';
+export * from './lineStyle.js';
+export { routeAll, type RouteAllOptions } from './routeAll.js';
+export { createRoutingWorker, type RoutingWorkerFactory, type RoutingWorkerHandle, type RoutingWorkerEvents } from './worker/client.js';
+export type { WorkerRouteRequest, WorkerRouteResult } from './worker/protocol.js';
+/**
+ * A pass during a drag slower than this (ms) is too slow to run on every
+ * frame: for the rest of that drag the routes are held (see
+ * `createEdgeRoutingEngine`), and everything is routed again once, when the
+ * drag ends.
+ */
+export declare const DRAG_REROUTE_BUDGET_MS = 12;
+/**
+ * A pass outside a drag slower than this (ms) holds the routes from a drag's
+ * first frame: even routing only the moved card's lines would not fit a frame.
+ * With a worker, it also moves that diagram's routing into the worker.
+ */
+export declare const DRAG_HOLD_AFTER_MS = 50;
+/** A main-thread pass slower than this (ms) turns routing off for diagrams of that size: every line draws the fallback. */
+export declare const ROUTING_HARD_LIMIT_MS = 150;
+/**
+ * A worker pass slower than this (ms) turns routing off for diagrams of that
+ * size. A safety net only: a 2,000-card diagram takes ~1.5 s.
+ */
+export declare const WORKER_HARD_LIMIT_MS = 20000;
+/**
+ * Diagrams with up to this many lines route on the main thread (a pass is
+ * ~20 ms or less), so a drag can re-route as the card moves. Larger ones
+ * route in the canvas's worker, when it has one.
+ */
+export declare const MAIN_THREAD_MAX_LINES = 100;
+/** With a worker: no limit on the number of lines (the worker never pauses the canvas). */
+export declare const MAX_ROUTED_LINES: number;
+/** Without a worker: diagrams with more lines than this are never routed (the pass would pause the canvas over ~40 ms). */
+export declare const MAX_ROUTED_LINES_WITHOUT_WORKER = 150;
+/** What the engine did on one update. */
+export type RoutingPass = 
+/** Every line routed. */
+'routed'
+/** A drag on a slow diagram: the last routes kept, minus the lines of the dragged cards. */
+ | 'held'
+/**
+ * Sent to the worker: the last routes kept, minus the lines of cards that
+ * moved or changed size since, until the worker answers (`onUpdate`).
+ */
+ | 'pending'
+/** No routes: every line draws the smooth-step fallback. */
+ | 'off';
+export interface RoutingUpdate {
+    /** The routes to draw, by edge id; null when every line draws the fallback. */
+    routes: Map<string, RoutedEdge> | null;
+    pass: RoutingPass;
+    /** How long a routed pass took (0 when nothing was routed). */
+    millis: number;
+}
+export interface RoutingRequest {
+    /** Builds the input: called only for a pass that routes. */
+    input: () => RoutingInput;
+    /** The number of FK lines (for the caps, without building the input). */
+    lineCount: number;
+    style: LineStyle;
+    /** The canvas zoom (hops are sized for it). */
+    zoom?: number;
+    /** Ids of the cards being dragged (empty when no drag is in progress). */
+    dragging?: ReadonlySet<string>;
+}
+export interface EdgeRoutingEngine {
+    update(request: RoutingRequest): RoutingUpdate;
+    /** Stops the worker. The engine answers nothing afterwards. */
+    dispose(): void;
+}
+export interface EdgeRoutingEngineOptions {
+    /** Clock for pass timings (default `performance.now`). */
+    now?: () => number;
+    /**
+     * Starts this canvas's routing worker (`createRoutingWorker`), called the
+     * first time a diagram is large enough to need it. Omitted, or returning
+     * null: every pass runs on the main thread, under the lower cap.
+     */
+    worker?: RoutingWorkerFactory;
+    /** Receives the routes a worker pass produced, after `update` returned 'pending'. */
+    onUpdate?: (update: RoutingUpdate) => void;
+}
+/**
+ * A worker pass in which at least this share of the cards moved or changed
+ * size since the worker's last pass routes (nearly) every line again: when a
+ * newer request supersedes it, the worker is restarted rather than waited for.
+ */
+export declare const COLD_PASS_SHARE = 0.5;
+/**
+ * One canvas's routing: its own router (so two canvases on a page never share
+ * the router's memory of the last pass), its own worker, and the performance
+ * guard.
+ *
+ * - Up to `MAIN_THREAD_MAX_LINES` lines, a pass runs on the main thread, and
+ *   a drag re-routes only what the move touches, which is usually far cheaper
+ *   than a full pass (40 tables / 60 lines: about 16 ms cold, 6 ms a drag
+ *   frame). When one drag frame takes more than `DRAG_REROUTE_BUDGET_MS`, or
+ *   the last pass outside a drag took more than `DRAG_HOLD_AFTER_MS`, the
+ *   drag stops routing: the routes stay as they were, minus the lines
+ *   touching a dragged card (they draw the fallback, which follows the card),
+ *   and the first update after the drag routes everything again.
+ * - Larger diagrams (and a smaller one whose pass took more than
+ *   `DRAG_HOLD_AFTER_MS`) route in the worker, so the canvas never pauses:
+ *   `update` returns 'pending' with the last routes still right (lines on a
+ *   moved card fall back), and `onUpdate` delivers the new ones. A drag holds
+ *   the routes; an answer to a request that has since been superseded is
+ *   dropped, and only the latest waiting request is sent next. When the pass
+ *   in flight is a cold one (the worker's first, sent before the cards were
+ *   measured, say, or one after most cards moved) and a newer request
+ *   arrives, the worker is stopped and a fresh one routes the newer request
+ *   at once: waiting would cost a whole pass, and a cold router has no memory
+ *   worth keeping. A warm pass (a few cards moved) is waited for, so the
+ *   router keeps its memory and the next pass stays incremental.
+ * - With the worker, every diagram is routed, whatever its size. Without it
+ *   (it cannot start, or failed), more than `MAX_ROUTED_LINES_WITHOUT_WORKER`
+ *   lines are not. A main-thread pass over `ROUTING_HARD_LIMIT_MS`, or a
+ *   worker pass over `WORKER_HARD_LIMIT_MS`, turns routing off for this
+ *   canvas while the diagram has at least that many lines.
+ * - A worker that fails is stopped for good; the canvas carries on on the
+ *   main thread under the lower cap.
+ * - A router, renderer or worker error is reported once (`console.warn`),
+ *   never per frame, and leaves those lines on the fallback. Nothing else is
+ *   logged.
+ */
+export declare function createEdgeRoutingEngine(options?: EdgeRoutingEngineOptions | (() => number)): EdgeRoutingEngine;

package/dist/types/lib/edgeRouting/input.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Edge routing — build the routing input from React Flow state.
+ *
+ * Mirrors what `FkEdge` does today: a line meets the side its handle names
+ * (`node-{side}-{src|tgt}`, picked by the graph transformer), at the centre
+ * of that side plus the evenly distributed slot from `edgeDistribution`.
+ * Kept pure (no React) so routers and tests can call it.
+ */
+import type { Edge, InternalNode, Node } from '@xyflow/react';
+import { DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH } from '../edgeDistribution.js';
+import type { Rect, RoutingInput, Side, Point } from './types.js';
+/** The box of a node in flow coordinates. */
+export declare function rectOfNode(node: InternalNode<Node>): Rect;
+/** Centre of a rect's side. */
+export declare function sideCentre(rect: Rect, side: Side): Point;
+/** A point pushed `distance` px outward from a side. */
+export declare function pushOut(p: Point, side: Side, distance: number): Point;
+/**
+ * Every FK line's spec plus every node box, from React Flow's node lookup and
+ * edge list. Edges whose nodes are not measured yet are skipped (they keep the
+ * fallback path until the next pass).
+ */
+export declare function buildRoutingInput(nodeLookup: Map<string, InternalNode<Node>>, edges: Edge[]): RoutingInput;
+/**
+ * A value key that changes exactly when routing input changes: node boxes and
+ * edge endpoints/handles. Subscribe to this rather than the lookup Map, which
+ * React Flow mutates in place.
+ */
+export declare function routingInputKey(nodeLookup: Map<string, InternalNode<Node>>, edges: Edge[]): string;
+/**
+ * The ids of the cards being dragged, joined (empty when no drag is in
+ * progress): the performance guard holds the routes while it is non-empty.
+ */
+export declare function draggingNodesKey(nodeLookup: Map<string, InternalNode<Node>>): string;
+export { DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT };

package/dist/types/lib/edgeRouting/lineStyle.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Edge routing — the two line styles a reader chooses between. Type imports
+ * only, so the store entry (`@erd-studio/renderer/store`) can name them
+ * without loading the router.
+ */
+import type { LineStyleOptions } from './types.js';
+/** The reader's choice of line style (the editor's toolbar, `ErdCanvas`'s `lineStyle` prop). */
+export type LineStyle = 'curved' | 'hops';
+/** Every line style, in toolbar order. */
+export declare const LINE_STYLES: readonly LineStyle[];
+export declare const DEFAULT_LINE_STYLE: LineStyle;
+export declare function isLineStyle(value: unknown): value is LineStyle;
+/** What each line style draws. Internal: readers pick a style, never these knobs. */
+export declare const LINE_STYLE_OPTIONS: Readonly<Record<LineStyle, LineStyleOptions>>;
+/** The options of a style; anything that is not a style reads as the default. */
+export declare function lineStyleOptions(style: unknown): LineStyleOptions;