@cjlapao/ui-kit-vue 0.2.0 → 0.2.3

package/dist/types/common/chat/markdown.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Dependency-free, XSS-safe markdown for chat content: fenced code, GFM
+ * tables, headings, lists, rules, links, inline code/bold/italic. User
+ * text is HTML-escaped before any markup exists, so the only HTML in the
+ * output is ours. Classes are literal Tailwind — the renderer styles its
+ * own output, and both kits get it identically.
+ */
+export declare function renderChatMarkdown(src: string): string;

package/dist/types/common/chat/storage.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The two built-in storage adapters. Both honour the same OData-flavoured
+ * paging contract; the REST one talks `$top`/`$skip`/`$count` to a
+ * `/chats`-shaped API, the local one keeps an index of metas plus one
+ * transcript per chat in localStorage.
+ */
+import type { ChatMessage, ChatPage, ChatStorage } from "./types";
+export declare const newId: () => string;
+/** Slice a list OData-style and report the whole total. */
+export declare function paginate<T>(items: T[], skip?: number, top?: number): ChatPage<T>;
+export interface LocalChatStorageOptions {
+    /** Key prefix for every stored key. @default "uikit.chat.v1" */
+    prefix?: string;
+    /** Injectable storage object (tests pass a memory map). */
+    storage?: Pick<Storage, "getItem" | "setItem" | "removeItem">;
+    /** Messages stored per chat before the oldest are dropped. @default 1000 */
+    maxStoredMessages?: number;
+}
+/**
+ * localStorage adapter. The transcript of a chat lives under its own key
+ * and the rail reads only the index — one big JSON blob is never parsed to
+ * draw a list.
+ */
+export declare function createLocalChatStorage(options?: LocalChatStorageOptions): ChatStorage;
+export interface RestChatStorageOptions {
+    /** API root, e.g. `https://host/api` — endpoints hang below it. */
+    baseUrl: string;
+    /** Extra headers (auth) for every call. */
+    headers?: Record<string, string> | (() => Record<string, string>);
+    /** @default 50 */
+    top?: number;
+    fetch?: typeof fetch;
+}
+/**
+ * REST adapter. Chat metas live at `{base}/chats`, transcripts at
+ * `{base}/chats/{id}/messages`, folders at `{base}/folders`; paging is
+ * `$top`/`$skip` with `$count=true`, ordering is server-side.
+ */
+export declare function createRestChatStorage(options: RestChatStorageOptions): ChatStorage;
+/** Totals over stored usage, for the footer. */
+export interface ChatUsageTotals {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+    cost: number;
+    requests: number;
+}
+export declare function usageTotals(messages: ChatMessage[]): ChatUsageTotals;

package/dist/types/common/chat/stream.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The streaming transport: an OpenAI-compatible `/chat/completions`
+ * endpoint, SSE deltas in, tokens out. Framework-free — both kits wrap it
+ * in their own reactivity.
+ */
+import type { ChatMessage, ChatModel, ChatRole, ChatUsage } from "./types";
+export interface StreamRequestMessage {
+    role: ChatRole;
+    content: string;
+}
+export interface StreamChatCompletionParams {
+    baseUrl: string;
+    apiKey?: string;
+    model: string;
+    messages: StreamRequestMessage[];
+    signal: AbortSignal;
+    temperature?: number;
+    maxTokens?: number;
+    onToken: (token: string) => void;
+    onReasoning?: (token: string) => void;
+    onUsage?: (usage: ChatUsage) => void;
+    fetch?: typeof fetch;
+}
+export type StreamResult = {
+    status: "done";
+} | {
+    status: "aborted";
+} | {
+    status: "error";
+    error: string;
+};
+export declare function streamChatCompletion(params: StreamChatCompletionParams): Promise<StreamResult>;
+/**
+ * `GET {base}/models`, tolerant of the shapes in the wild. The result
+ * feeds the model picker; failures resolve to an empty list, never throw —
+ * a chat with a dead models endpoint is still a chat.
+ */
+export declare function fetchChatModels(baseUrl: string, options?: {
+    apiKey?: string;
+    fetch?: typeof fetch;
+}): Promise<ChatModel[]>;
+/** The transcript as the wire wants it — finished turns only. */
+export declare const toRequestMessages: (messages: ChatMessage[]) => StreamRequestMessage[];

package/dist/types/common/chat/types.d.ts

@@ -0,0 +1,143 @@
+/**
+ * Chat domain types shared by both kits. The storage layer speaks in pages
+ * (OData-shaped) so a localStorage adapter and a REST adapter are the same
+ * contract — the component never learns which one it has.
+ */
+import type { TrueColor } from "../theme/Theme";
+export type ChatRole = "system" | "user" | "assistant";
+/** A message's place in the conversation. */
+export type ChatMessageStatus = "streaming" | "done" | "error";
+/** Token accounting as the models report it. */
+export interface ChatUsage {
+    prompt_tokens?: number;
+    completion_tokens?: number;
+    total_tokens?: number;
+    /** Only when the gateway prices the call. */
+    cost?: number;
+}
+export interface ChatMessage {
+    id: string;
+    chatId: string;
+    role: ChatRole;
+    content: string;
+    /** Chain-of-thought surfaced by reasoning models, kept separate. */
+    reasoning?: string;
+    /** ISO timestamp — storage's clock is the source of truth. */
+    createdAt: string;
+    status: ChatMessageStatus;
+    usage?: ChatUsage;
+    /** Which model answered, for mixed-model chats. */
+    model?: string;
+    /** Set when status is "error". */
+    error?: string;
+}
+/** The rail's row: everything about a chat except the transcript. */
+export interface ChatMeta {
+    id: string;
+    title: string;
+    /** null/undefined is the Unfiled shelf. */
+    folderId?: string | null;
+    createdAt: string;
+    updatedAt: string;
+    model?: string;
+    /** First-line teaser for the rail. */
+    preview?: string;
+    /** All messages, known to storage — the in-memory window may hold fewer. */
+    messageTotal?: number;
+}
+/** A chat with its (windowed) transcript. */
+export interface ChatRecord extends ChatMeta {
+    messages: ChatMessage[];
+}
+/** Chat folders are first-class: their own rows, their own CRUD. */
+export interface ChatFolder {
+    id: string;
+    name: string;
+    /** @default "blue" */
+    tone?: TrueColor;
+    createdAt: string;
+}
+/** One page of results; `total` is the whole count, OData-style. */
+export interface ChatPage<T> {
+    items: T[];
+    total: number;
+}
+export interface ChatListQuery {
+    /** A string scopes to that folder; null means Unfiled only. */
+    folderId?: string | null;
+    search?: string;
+    skip?: number;
+    top?: number;
+}
+export interface MessageListQuery {
+    skip?: number;
+    top?: number;
+}
+/**
+ * The persistence contract. `skip`/`top` paging is OData-flavoured
+ * throughout; REST implementations map it onto `$skip`/`$top`.
+ */
+export interface ChatStorage {
+    listChats(query?: ChatListQuery): Promise<ChatPage<ChatMeta>>;
+    getChat(id: string): Promise<ChatRecord | null>;
+    createChat(init?: {
+        folderId?: string | null;
+        model?: string;
+    }): Promise<ChatRecord>;
+    updateChat(patch: {
+        id: string;
+        title?: string;
+        /** Passing the key moves the chat; null moves it to Unfiled. */
+        folderId?: string | null;
+        model?: string;
+    }): Promise<void>;
+    deleteChat(id: string): Promise<void>;
+    /** Oldest-first pages — "load earlier" asks for the page before the window. */
+    listMessages(chatId: string, query?: MessageListQuery): Promise<ChatPage<ChatMessage>>;
+    appendMessage(chatId: string, message: ChatMessage): Promise<void>;
+    /** Replace the whole transcript of one chat (streaming commit). */
+    replaceMessages(chatId: string, messages: ChatMessage[]): Promise<void>;
+    listFolders(): Promise<ChatFolder[]>;
+    /** Upsert: an `id` updates, its absence creates. */
+    saveFolder(folder: {
+        id?: string;
+        name: string;
+        tone?: TrueColor;
+    }): Promise<ChatFolder>;
+    deleteFolder(id: string): Promise<void>;
+}
+/** The component's observable life — the extensibility seam. */
+export type ChatEvent = {
+    type: "chat-created";
+    chat: ChatMeta;
+} | {
+    type: "chat-selected";
+    id: string;
+} | {
+    type: "chat-deleted";
+    id: string;
+} | {
+    type: "chat-moved";
+    id: string;
+    folderId: string | null;
+} | {
+    type: "message-sent";
+    message: ChatMessage;
+} | {
+    type: "message-received";
+    message: ChatMessage;
+} | {
+    type: "stream-aborted";
+} | {
+    type: "stream-error";
+    error: string;
+} | {
+    type: "storage-error";
+    error: string;
+};
+/** A model row: `id` is what the endpoint takes, `label` what the picker shows. */
+export interface ChatModel {
+    id: string;
+    label?: string;
+    contextWindow?: number;
+}

package/dist/types/common/connectionFlow/header.d.ts

@@ -0,0 +1,56 @@
+import type { SurfaceVariant } from "../theme/Theme";
+import type { ConnectionFlowNode, ConnectionFlowProgressType } from "./types";
+/**
+ * The frame around the graph: an eyebrow, an icon, a title, a tag and the
+ * flow's own progress, sitting above a scrolling canvas.
+ *
+ * Everything the header *decides* lives here rather than in either renderer.
+ * The two kits draw the same block, and every divergence in this component so
+ * far has come from letting each of them work something out for itself.
+ */
+export interface HeaderSurface {
+    translucent: boolean;
+    /** Hairline between the header and the graph. */
+    divider: string;
+    /** The tiny uppercase line above the title. */
+    eyebrow: string;
+    /** Subtitle, and the caption beside the progress bar. */
+    muted: string;
+    /** Fill behind the icon chip. */
+    chip: string;
+}
+export declare const getHeaderSurface: (variant: SurfaceVariant) => HeaderSurface;
+/** What occupies the header's icon slot right now. */
+export type HeaderGlyph = {
+    kind: "spinner";
+    value: number;
+} | {
+    kind: "icon";
+} | {
+    kind: "none";
+};
+/**
+ * A spinner takes the icon's place while the flow is running and gives it back
+ * at 100% — the same rule an item's glyph follows, so the two read as one
+ * idea rather than two similar ones.
+ */
+export declare const headerGlyph: (hasIcon: boolean, progressType: ConnectionFlowProgressType, progress: number | undefined) => HeaderGlyph;
+/**
+ * Whether the slot is held open. Reserved for a spinner even with no icon
+ * behind it, so the title does not step sideways the moment the flow finishes.
+ */
+export declare const headerReservesGlyph: (hasIcon: boolean, progressType: ConnectionFlowProgressType) => boolean;
+/**
+ * A node's completion: its own if it declares one, else the mean of whatever
+ * its items report. A card built from items has no `progress` of its own, and
+ * before this it simply did not count towards the flow's total.
+ */
+export declare const nodeProgress: (node: ConnectionFlowNode) => number | undefined;
+/**
+ * The flow's completion, 0–1.
+ *
+ * The mean of the nodes that report one, unless the caller states it outright
+ * — which it usually should: a pipeline knows its own progress better than the
+ * average of its cards does.
+ */
+export declare const flowProgress: (nodes: ConnectionFlowNode[], override?: number) => number | undefined;

package/dist/types/common/connectionFlow/icons.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Canvas cannot mount an `<svg>`. A registry icon is markup, so to draw one
+ * into a 2D context its path data has to be lifted out and turned into a
+ * `Path2D`. The result is cached — building a `Path2D` per frame would be a
+ * parse per icon per frame.
+ */
+/**
+ * Extracts every `d` attribute from SVG markup and merges them into one path.
+ *
+ * Returns `null` for markup with no paths — a circle-only or rect-only icon —
+ * rather than an empty `Path2D`, so the caller can fall back to drawing
+ * nothing instead of silently painting an invisible glyph.
+ */
+export declare const pathFromSvgMarkup: (key: string, markup: string) => Path2D | null;
+export declare const clearIconPathCache: () => void;

package/dist/types/common/connectionFlow/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./types";
+export * from "./measure";
+export * from "./header";
+export * from "./tones";
+export * from "./router";
+export * from "./layout";

package/dist/types/common/connectionFlow/layout.d.ts

@@ -0,0 +1,73 @@
+import { type ConnectionFlowLayout, type ConnectionFlowLayoutOptions, type ConnectionFlowNode, type ConnectionState, type LaidOutNode } from "./types";
+/**
+ * A column on the main track: one `step`/`branch` node, or a stack of
+ * consecutive `parallel` ones.
+ */
+interface Column {
+    nodes: ConnectionFlowNode[];
+    parallel: boolean;
+}
+/**
+ * Groups consecutive `parallel` nodes into one column. The old implementation
+ * did this three separate times per render — once for the groups, once for the
+ * auto-skipped set and once for the bypass arcs — from the same input, so the
+ * three could disagree if any of the three copies were edited. It happens once
+ * here and the result is threaded through.
+ */
+export declare const buildColumns: (nodes: ConnectionFlowNode[]) => Column[];
+/**
+ * Which columns are bypassed.
+ *
+ * A column is skipped when it says so, or — under `autoSkip` — when it is
+ * untouched (neutral) but something after it has run. An explicit
+ * `skipped: false` always wins: a node that executed but happens to be neutral
+ * must not be arched over.
+ */
+export declare const resolveSkipped: (columns: Column[], autoSkip: boolean) => Set<number>;
+export interface LayoutInput {
+    nodes: ConnectionFlowNode[];
+    options?: Partial<ConnectionFlowLayoutOptions>;
+    /** Fallback state for edges that do not declare one. */
+    flowState?: ConnectionState;
+    /** Derive edge state and bypasses from tone alone. */
+    autoState?: boolean;
+    /**
+     * Nodes whose item list is fully expanded.
+     *
+     * Expanding changes a card's height, and so its ports, its silhouette and
+     * every route touching it — so it belongs to the layout rather than to the
+     * renderer that draws the button.
+     */
+    expanded?: ReadonlySet<string>;
+    animated?: boolean;
+}
+/**
+ * Turns a node list into absolute geometry.
+ *
+ * Deliberately pure: no measuring, no DOM, no framework. The previous
+ * implementation derived every edge from `getBoundingClientRect()` inside a
+ * `ResizeObserver`, which meant the arcs could only be computed *after* a
+ * paint, needed a second paint to appear, and were re-measured on every
+ * scroll. Geometry that can be computed should not be measured.
+ */
+export declare const layoutConnectionFlow: (input: LayoutInput) => ConnectionFlowLayout;
+/**
+ * Every node on the path from the first node to `targetId`, walking the edge
+ * list backwards. Drives the GitHub-Actions-style highlight: the ancestry of
+ * the node under the pointer stays lit and everything else dims.
+ */
+export declare const tracePathTo: (layout: ConnectionFlowLayout, targetId: string) => {
+    nodes: Set<string>;
+    edges: Set<string>;
+};
+/** The node whose box contains the point, or `null`. Topmost wins. */
+export declare const hitTestNode: (layout: ConnectionFlowLayout, x: number, y: number) => LaidOutNode | null;
+/** Scale and offset that fit the whole graph into a viewport. */
+export declare const fitToViewport: (layout: ConnectionFlowLayout, viewportWidth: number, viewportHeight: number, maxScale?: number) => {
+    scale: number;
+    offsetX: number;
+    offsetY: number;
+};
+/** True when the layout contains anything that needs to keep moving. */
+export declare const layoutIsAnimated: (layout: ConnectionFlowLayout) => boolean;
+export {};

package/dist/types/common/connectionFlow/measure.d.ts

@@ -0,0 +1,94 @@
+import { type ConnectionFlowItemProgress, type ConnectionFlowLayoutOptions, type ConnectionFlowNode, type ConnectionFlowNodeItem, type NodeMetrics, type TrueColorLike } from "./types";
+/** The node's own title/subtitle line, when it has one. */
+export declare const measureHeader: (node: ConnectionFlowNode, metrics: NodeMetrics) => number;
+/** What occupies an item's leading slot right now. */
+export type ItemGlyph = {
+    kind: "spinner";
+    value: number;
+} | {
+    kind: "icon";
+    name: string;
+} | {
+    kind: "none";
+};
+/**
+ * The leading slot of an item.
+ *
+ * A spinner takes the icon's place rather than sitting beside it, and gives it
+ * back at 100% — so a row shows what is happening while it happens and what
+ * happened once it has. The slot is the same size either way, which is why the
+ * glyph metrics are pinned to the range where `CustomIcon` and
+ * `ProgressSpinner` render identically.
+ */
+export declare const itemGlyph: (item: ConnectionFlowNodeItem, fallbackProgress: ConnectionFlowItemProgress) => ItemGlyph;
+/**
+ * An item's tone: its own if set, else its status's, else the card's.
+ *
+ * Resolved here rather than in each renderer — the first version fell through
+ * to the node's tone unconditionally, so a `failed` row inside a `succeeded`
+ * card came out green.
+ */
+export declare const itemTone: (item: ConnectionFlowNodeItem, fallback: TrueColorLike) => TrueColorLike;
+/** Whether an item draws a full-width bar under its text. */
+export declare const itemHasBar: (item: ConnectionFlowNodeItem, fallbackProgress: ConnectionFlowItemProgress) => boolean;
+/**
+ * Whether the list reserves a leading column.
+ *
+ * Decided for the whole list, not per row: with it per row, a list where only
+ * some items carry a glyph had its titles stepping in and out, and a row whose
+ * spinner finished would shift sideways as the slot vanished.
+ */
+export declare const itemsReserveGlyph: (items: ConnectionFlowNodeItem[], fallbackProgress: ConnectionFlowItemProgress) => boolean;
+export declare const measureItem: (item: ConnectionFlowNodeItem, metrics: NodeMetrics, fallbackProgress: ConnectionFlowItemProgress, reserveGlyph: boolean) => number;
+export interface VisibleItems {
+    items: ConnectionFlowNodeItem[];
+    /** Rows folded away behind the "show more" row. */
+    hidden: number;
+}
+/**
+ * The rows a card actually shows. Expanding changes the card's height, and so
+ * the ports, the silhouette and every route — which is why the expanded set is
+ * an input to the layout rather than state the renderer keeps to itself.
+ */
+export declare const visibleItems: (node: ConnectionFlowNode, options: ConnectionFlowLayoutOptions, expanded?: ReadonlySet<string>) => VisibleItems;
+export declare const measureItems: (node: ConnectionFlowNode, options: ConnectionFlowLayoutOptions, expanded?: ReadonlySet<string>) => number;
+export declare const measureNodeBody: (node: ConnectionFlowNode, metrics: NodeMetrics) => number;
+/**
+ * Height of a node box.
+ *
+ * A node that declares its own `height` gets exactly that: a caller-supplied
+ * template cannot be measured, so it says how much room it needs and scrolls
+ * inside it.
+ */
+export declare const measureNode: (node: ConnectionFlowNode, options: ConnectionFlowLayoutOptions, expanded?: ReadonlySet<string>) => number;
+/**
+ * Whether a card's body scrolls: explicit if stated, otherwise whenever the
+ * card has been capped below what its contents need.
+ */
+export declare const nodeScrolls: (node: ConnectionFlowNode, options: ConnectionFlowLayoutOptions, expanded?: ReadonlySet<string>) => boolean;
+/** Total vertical space a node needs, including its child sub-tree. */
+export declare const measureBranch: (node: ConnectionFlowNode, options: ConnectionFlowLayoutOptions, expanded?: ReadonlySet<string>) => number;
+/**
+ * When a dot leaves, how long it is in flight, and how long until the next
+ * one leaves the same source.
+ *
+ * Every dot in the graph moves at the same speed, so its flight time comes
+ * from the route's own length. Before this every edge used a fixed 2.4s
+ * whatever its length, which made a short track hop crawl while a long bypass
+ * arc raced — the two read as unrelated animations rather than one flow.
+ */
+export interface DotTiming {
+    /** Seconds for one full cycle of this edge's dot. */
+    cycle: number;
+    /** Where in that cycle the dot arrives, 0–1. */
+    arrival: number;
+    /** Seconds of phase offset, negative so the cycle is already under way. */
+    begin: number;
+}
+export declare const dotTiming: (length: number, 
+/** Position in its source's round-robin, how many share it, and its span. */
+emitIndex: number, emitCount: number, emitSpan: number, 
+/** Px per second. */
+speed: number, 
+/** Seconds between one dot leaving a source and the next. */
+interval: number) => DotTiming;

package/dist/types/common/connectionFlow/paint.d.ts

@@ -0,0 +1,36 @@
+import { type ColorScheme } from "./tones";
+import type { ConnectionFlowLayout } from "./types";
+export interface PaintOptions {
+    scheme: ColorScheme;
+    /** Corner radius of a node box, in px. */
+    radius: number;
+    /** Font sizes, from the node metrics for the current control size. */
+    titleSize: number;
+    bodySize: number;
+    padding: number;
+    /** Milliseconds since the animation started — drives dot travel and pulse. */
+    time: number;
+    /** Target px between travelling dots. */
+    dotSpacing: number;
+    /** Node ids to keep lit. Empty means "no highlight, draw everything lit". */
+    highlightNodes: Set<string>;
+    /** Edge ids to keep lit. */
+    highlightEdges: Set<string>;
+    hoveredId: string | null;
+    selectedId: string | null;
+    /** Draws each node's progress indicator. */
+    showProgress: boolean;
+    /** Device pixel ratio the context was scaled by. */
+    dpr: number;
+    /** Resolved icon glyphs, keyed by registry name. */
+    icons?: Map<string, Path2D>;
+    fontFamily: string;
+}
+/**
+ * Paints one frame. The context is expected to be already scaled for the
+ * device pixel ratio and translated/scaled for pan and zoom — the painter
+ * works purely in layout coordinates.
+ */
+export declare const paintConnectionFlow: (ctx: CanvasRenderingContext2D, layout: ConnectionFlowLayout, options: PaintOptions) => void;
+/** True when the layout contains anything that needs a new frame. */
+export declare const layoutIsAnimated: (layout: ConnectionFlowLayout) => boolean;

package/dist/types/common/connectionFlow/router.d.ts

@@ -0,0 +1,131 @@
+import type { ConnectionFlowEdgeStyle } from "./types";
+/**
+ * Every edge in the graph is routed by this module and nothing else.
+ *
+ * The old code grew a bespoke point-list per edge kind — a mid-X elbow for the
+ * main track, a hard-coded L for children, a four-point lift for bypasses — so
+ * `edgeStyle: "curved"` curved the main track and left the children as square
+ * elbows, and a bypass ignored the style entirely. Anything with its own
+ * routing code is an edge style waiting to be forgotten.
+ *
+ * The model is two ports and a shape. A port is a point on a node's border
+ * plus the direction a line must *leave* it in; the router turns any pair of
+ * ports into a path in the requested style. Adding a style means adding one
+ * branch here, and every edge in the graph gets it at once.
+ */
+export type PortSide = "top" | "right" | "bottom" | "left";
+export interface Port {
+    x: number;
+    y: number;
+    side: PortSide;
+    /** Outward unit normal — the direction a line leaves this port in. */
+    dx: number;
+    dy: number;
+}
+export interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** The outward direction of each border, as a unit vector. */
+export declare const PORT_NORMALS: Record<PortSide, {
+    dx: number;
+    dy: number;
+}>;
+/**
+ * A point on one side of a box. `t` slides along that side from 0 to 1, which
+ * is what lets a fan-out give each lane its own port instead of stacking every
+ * line on the same pixel.
+ */
+export declare const port: (box: Box, side: PortSide, t?: number) => Port;
+/** A port at an absolute offset along a side rather than a fraction of it. */
+export declare const portAt: (box: Box, side: PortSide, offset: number) => Port;
+/**
+ * Picks the pair of sides that gives the shortest, least-crossing route.
+ *
+ * Purely geometric: whichever axis the two boxes are actually separated on
+ * wins, and the ports face each other across that gap. This is what makes a
+ * child edge leave its parent's *bottom* and a track edge leave its *right*
+ * without either being special-cased.
+ */
+export declare const selectSides: (source: Box, target: Box) => {
+    from: PortSide;
+    to: PortSide;
+};
+export interface RouteOptions {
+    style: ConnectionFlowEdgeStyle;
+    /** How far a line runs straight out of a port before it may turn. */
+    stub?: number;
+    /** Corner radius on an orthogonal path. */
+    radius?: number;
+    /**
+     * Forces the turn onto a specific coordinate — used by a bypass, which must
+     * clear the cards it arches over rather than turning halfway.
+     */
+    via?: {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * Stops the line this far short of each port, along that port's own normal.
+     *
+     * A terminal ring is drawn centred on the port, so an untrimmed line runs
+     * under the ring and out the far side. Trimming here rather than in the
+     * renderer keeps the travelling dots honest: they follow this same path, so
+     * they stop where the line stops instead of sliding into the card.
+     */
+    trim?: number;
+}
+export interface Route {
+    /** Waypoints, for label placement and measurement. */
+    points: {
+        x: number;
+        y: number;
+    }[];
+    /** The SVG path. Also what the travelling dots follow, so the dots and the
+     *  line can never disagree about the route. */
+    d: string;
+}
+export declare const routePorts: (fromPort: Port, toPort: Port, options: RouteOptions) => Route;
+/** Total length of a waypoint list. */
+export declare const routeLength: (points: {
+    x: number;
+    y: number;
+}[]) => number;
+/** A port the node's outline detours around. */
+export interface OutlineBulge {
+    side: PortSide;
+    /** Position along that side: an x for top/bottom, a y for left/right. */
+    at: number;
+    radius: number;
+}
+/**
+ * The node's outline: a rounded rectangle that detours around each of its
+ * ports.
+ *
+ * The terminal is not a marker drawn on top of the card — it *is* the card,
+ * bulging. So there is no chord across the bulge and its interior takes the
+ * same fill as the rest of the node, which only works if the whole silhouette
+ * is one path. A CSS border cannot do this, which is why the card is painted
+ * here and the DOM element above it carries only content.
+ *
+ * Traversed clockwise, so every arc — corners and bulges alike — is a
+ * sweep-1 turn.
+ */
+export declare const nodeOutline: (box: Box, cornerRadius: number, bulges: OutlineBulge[]) => string;
+/**
+ * Where a caption sits on a route: the middle of its longest straight run.
+ *
+ * Halfway *along the route* lands wherever the arithmetic puts it — on a
+ * corner, or hard against a card — because a route's midpoint has nothing to
+ * do with where there is room to write. The longest run is the one stretch
+ * guaranteed to have some.
+ */
+export declare const labelAnchor: (points: {
+    x: number;
+    y: number;
+}[]) => {
+    x: number;
+    y: number;
+};