@erd-studio/renderer 0.3.0 → 0.4.1

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 { 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 { 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/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 { 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 { DisplaySubjectArea, DisplayTable, DisplayColumn, DisplayRelationship, PhysicalColumnSource, PhysicalProvenance, Annotation, AnnotationColor, Cardinality, Layer, TableRole, 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 { 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

@@ -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/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, routingWorkerFactory, 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;

package/dist/types/lib/edgeRouting/render/corners.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Edge routing — how much of each segment a corner eats.
+ *
+ * Every interior vertex of a simplified polyline becomes a corner that
+ * starts `rIn` px before the vertex (along the incoming segment) and ends
+ * `rOut` px after it (along the outgoing one). Between corners, what is left
+ * of a segment is drawn straight; hops and cuts may only sit there.
+ *
+ *   sharp    0
+ *   rounded  up to 8 px, a quadratic (today's smooth-step look)
+ *   curved   up to CURVE_RADIUS px each way, an elliptical quarter (cubic).
+ *            An interior segment is shared by its two corners (half each);
+ *            the first and last segments (from the card stubs) go wholly to
+ *            their one corner, so a short step becomes one soft S. The
+ *            curve stays inside the corner's triangle, so it only ever cuts
+ *            the corner, never swings out; given the cards, a corner that
+ *            would cut into one is shrunk until it clears.
+ */
+import type { CornerMode, Point, Rect } from '../types.js';
+export declare const ROUNDED_RADIUS = 8;
+/** Largest radius of a curved corner. */
+export declare const CURVE_RADIUS = 40;
+/** Cubic control-point factor for a quarter circle (and ellipse). */
+export declare const KAPPA = 0.5523;
+export interface CornerRadii {
+    /** Length of each segment `i` (pts[i] → pts[i+1]). */
+    segLen: Float64Array;
+    /** Per vertex: px trimmed from the incoming segment (0 at the two ends). */
+    rIn: Float64Array;
+    /** Per vertex: px trimmed from the outgoing segment (0 at the two ends). */
+    rOut: Float64Array;
+}
+export declare function cornerRadii(pts: readonly Point[], mode: CornerMode, obstacles?: readonly Rect[]): CornerRadii;
+/** The corner's start / end points and cubic control points. */
+export declare function cornerCurve(prev: Point, cur: Point, next: Point, rIn: number, rOut: number): {
+    a: {
+        x: number;
+        y: number;
+    };
+    c1: {
+        x: number;
+        y: number;
+    };
+    c2: {
+        x: number;
+        y: number;
+    };
+    b: {
+        x: number;
+        y: number;
+    };
+};

package/dist/types/lib/edgeRouting/render/crossings.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Edge routing — where routed lines cross each other.
+ *
+ * Works on the simplified polylines (one segment per straight run). A
+ * crossing is *proper*: the two segments cut through each other strictly
+ * inside both of them. Touching ends, a corner sitting on another line,
+ * and collinear overlaps (a shared channel) are not crossings.
+ *
+ * A sweep over segments sorted by left edge keeps this well under a
+ * millisecond for a few hundred segments.
+ */
+import type { Point } from '../types.js';
+/** One end of a crossing: which line, which segment, how far along it (px). */
+export interface CrossingEnd {
+    line: number;
+    seg: number;
+    /** Distance from the segment's first point. */
+    d: number;
+}
+export interface Crossing {
+    x: number;
+    y: number;
+    a: CrossingEnd;
+    b: CrossingEnd;
+}
+/** Every proper crossing between segments of different lines. */
+export declare function findCrossings(polys: readonly Point[][]): Crossing[];

package/dist/types/lib/edgeRouting/render/curveCrossings.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Edge routing — where a drawn corner curve crosses another line's
+ * straight stretch.
+ *
+ * `findCrossings` works on the routed polylines, which is exact only where
+ * both lines are drawn straight. A rounded or curved corner cuts inside its
+ * vertex, so where a corner is involved the polyline crossing is in the wrong
+ * place (or the drawn lines do not cross at all, or cross where the
+ * polylines do not). With curved corners that is most crossings. This finds
+ * them on the drawn geometry: each corner curve flattened into chords,
+ * against every other line's straight stretches (the part of each segment no
+ * corner eats).
+ *
+ * Curve against curve is left out: there is no straight line to break.
+ */
+import type { CornerMode, Point } from '../types.js';
+import { type CornerRadii } from './corners.js';
+import type { CrossingEnd } from './crossings.js';
+export interface CurveCrossing {
+    x: number;
+    y: number;
+    /** The straight line's end, as `findCrossings` reports it (distance from the segment's first point). */
+    straight: CrossingEnd;
+    /** The curving line, its corner vertex, and how far through the corner (0..1). */
+    curve: {
+        line: number;
+        vertex: number;
+        t: number;
+    };
+}
+/**
+ * Every crossing between one line's corner curve and another line's straight
+ * stretch. `radii[i]` must be the radii the paths are drawn with.
+ */
+export declare function findCurveCrossings(polys: readonly Point[][], radii: readonly CornerRadii[], mode: CornerMode): CurveCrossing[];