@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/data/graph-diagram-model.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-diagram-model.cjs","sources":["../../src/data/graph-diagram-model.ts"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from \"react\";\nimport type { BadgeTone } from \"./Badge\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\n\nexport interface GraphDiagramNode {\n  id: string;\n  label: ReactNode;\n  /** Drawn before the label, on the same line. Give the icon its own `title` so it names itself. */\n  icon?: ReactNode;\n  detail?: ReactNode;\n  badge?: ReactNode;\n  tone?: BadgeTone;\n  shape?: \"pill\" | \"rect\";\n  /** Accessible name for the node, when `label` alone isn't enough. */\n  ariaLabel?: string;\n  /** Full text for the node, shown as its native tooltip. */\n  title?: string;\n  /** Column of the node. Required by the \"columns\" layout; may be negative. */\n  level?: number;\n  /** \"columns\" layout: nodes sharing a group are stacked together and boxed. */\n  group?: string;\n  /** Dimmed styling, for a node that leads nowhere further: external, unresolved, not expandable. */\n  muted?: boolean;\n  /** Neighbours not drawn yet. Renders a `+N` control on the node's outer side. */\n  expandCount?: number;\n}\n\nexport interface GraphDiagramEdge {\n  id: string;\n  from: string;\n  to: string;\n  /** Short text shown in a pill on the edge. */\n  label?: string;\n  /** Drawn in the pill before the label. An edge with an icon and no label still gets a pill. */\n  icon?: ReactNode;\n  /** What `icon` says, in words. It precedes the label in the edge's accessible name. */\n  iconLabel?: string;\n  /** Full text for the edge, shown as its native tooltip. */\n  title?: string;\n  tone?: BadgeTone;\n  dashed?: boolean;\n}\n\nexport interface GraphDiagramGroup {\n  id: string;\n  label: ReactNode;\n  /** Full text for the group, shown as its caption's native tooltip: what a shortened `label` stands for. */\n  title?: string;\n}\n\nexport type GraphDiagramLayout = \"ring\" | \"columns\";\n\n/**\n * Whether edges compete for attention or take turns. With focus on, an edge\n * shows its label pill only while it is in focus — selected, hovered, or\n * attached to the selected or hovered node — and while anything is in focus\n * the other edges fade. \"auto\" turns it on past `DENSE_EDGE_COUNT` edges.\n */\nexport type GraphDiagramEdgeFocus = \"auto\" | \"on\" | \"off\";\n\n/** The most edges a diagram draws with every pill showing under `edgeFocus=\"auto\"`. */\nexport const DENSE_EDGE_COUNT = 32;\n\nexport function edgeFocusOn(mode: GraphDiagramEdgeFocus, edgeCount: number): boolean {\n  return mode === \"on\" || (mode === \"auto\" && edgeCount > DENSE_EDGE_COUNT);\n}\n\n/** The edges in focus: the named ones, and every edge attached to a named node. */\nexport function focusedEdgeIds(\n  edges: readonly { id: string; from: string; to: string }[],\n  focus: { nodes: readonly (string | undefined)[]; edges: readonly (string | undefined)[] },\n): Set<string> {\n  return new Set(\n    edges\n      .filter((edge) => focus.edges.includes(edge.id) || focus.nodes.includes(edge.from) || focus.nodes.includes(edge.to))\n      .map((edge) => edge.id),\n  );\n}\n\n/** Maps a point in layout coordinates to the CSS offsets of the stage it is drawn on. */\nexport type GraphPlacer = (point: GraphLayoutPosition) => { left: number | string; top: number | string };\n\nexport const TONE_TEXT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"text-muted-foreground\",\n  success: \"text-emerald-600 dark:text-emerald-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  warning: \"text-amber-600 dark:text-amber-400\",\n  info: \"text-sky-600 dark:text-sky-400\",\n};\n\nexport const TONE_NODE_CLASS: Record<BadgeTone, string> = {\n  neutral: \"border-border bg-card text-foreground\",\n  success: \"border-emerald-500/50 bg-emerald-500/10 text-foreground\",\n  danger: \"border-red-500/50 bg-red-500/10 text-foreground\",\n  warning: \"border-amber-500/50 bg-amber-500/10 text-foreground\",\n  info: \"border-sky-500/50 bg-sky-500/10 text-foreground\",\n};\n\n/** The node's accessible name: its `ariaLabel`, else a plain-text label, else its id. */\nexport function nodeName(node: GraphDiagramNode): string {\n  if (node.ariaLabel !== undefined) return node.ariaLabel;\n  return typeof node.label === \"string\" ? node.label : node.id;\n}\n\n/** A selectable edge's accessible name: `<from> to <to>`, then what its pill shows, in words. */\nexport function edgeName(edge: GraphDiagramEdge, names: Record<string, string>): string {\n  const ends = `${requireEntry(names, edge.from, \"node name\")} to ${requireEntry(names, edge.to, \"node name\")}`;\n  const pill = [edge.iconLabel, edge.label].filter(Boolean).join(\" \");\n  return pill === \"\" ? ends : `${ends}: ${pill}`;\n}\n\n// A pill is not measured: its size is estimated from its content, at the mean\n// glyph advance of its 10px medium label plus its padding and border.\nconst LABEL_CHAR_WIDTH = 5.4;\nconst LABEL_CHROME = 14;\n// The pill's icon slot (`text-sm`, so a 1em icon is 14px) and its `gap-1` to the text.\nconst LABEL_ICON_SIZE = 14;\nconst LABEL_ICON_GAP = 4;\n\n/** Estimated px width of an edge's pill. An icon counts as a fixed width, whatever it draws. */\nexport function edgeLabelWidth(edge: GraphDiagramEdge): number {\n  const icon = edge.icon == null ? 0 : LABEL_ICON_SIZE + (edge.label ? LABEL_ICON_GAP : 0);\n  return (edge.label?.length ?? 0) * LABEL_CHAR_WIDTH + icon + LABEL_CHROME;\n}\n\nexport function requireEntry<T>(entries: Record<string, T>, id: string, what: string): T {\n  const entry = entries[id];\n  if (entry === undefined) {\n    throw new Error(`GraphDiagram: no ${what} computed for \"${id}\"`);\n  }\n  return entry;\n}\n\n/** Props that report an element as hovered while the pointer is over it or the keyboard focus is inside it. */\nexport function hoverHandlers(id: string, onHover: (id: string | undefined) => void) {\n  const enter = () => onHover(id);\n  const leave = () => onHover(undefined);\n  return { onMouseEnter: enter, onMouseLeave: leave, onFocus: enter, onBlur: leave };\n}\n\n/** Enter and Space activate a focused `role=\"button\"` element, as they do a native button. */\nexport function activateOnKey(event: KeyboardEvent<Element>, activate: () => void): void {\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    activate();\n  }\n}\n"],"names":[],"mappings":";;AA6DO,MAAM,mBAAmB;AAEzB,SAAS,YAAY,MAA6B,WAA4B;AACnF,SAAO,SAAS,QAAS,SAAS,UAAU,YAAY;AAC1D;AAGO,SAAS,eACd,OACA,OACa;AACb,SAAO,IAAI;AAAA,IACT,MACG,OAAO,CAAC,SAAS,MAAM,MAAM,SAAS,KAAK,EAAE,KAAK,MAAM,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,MAAM,SAAS,KAAK,EAAE,CAAC,EAClH,IAAI,CAAC,SAAS,KAAK,EAAE;AAAA,EAAA;AAE5B;AAKO,MAAM,kBAA6C;AAAA,EACxD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAEO,MAAM,kBAA6C;AAAA,EACxD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAGO,SAAS,SAAS,MAAgC;AACvD,MAAI,KAAK,cAAc,OAAW,QAAO,KAAK;AAC9C,SAAO,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;AAC5D;AAGO,SAAS,SAAS,MAAwB,OAAuC;AACtF,QAAM,OAAO,GAAG,aAAa,OAAO,KAAK,MAAM,WAAW,CAAC,OAAO,aAAa,OAAO,KAAK,IAAI,WAAW,CAAC;AAC3G,QAAM,OAAO,CAAC,KAAK,WAAW,KAAK,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,SAAO,SAAS,KAAK,OAAO,GAAG,IAAI,KAAK,IAAI;AAC9C;AAIA,MAAM,mBAAmB;AACzB,MAAM,eAAe;AAErB,MAAM,kBAAkB;AACxB,MAAM,iBAAiB;AAGhB,SAAS,eAAe,MAAgC;;AAC7D,QAAM,OAAO,KAAK,QAAQ,OAAO,IAAI,mBAAmB,KAAK,QAAQ,iBAAiB;AACtF,YAAQ,UAAK,UAAL,mBAAY,WAAU,KAAK,mBAAmB,OAAO;AAC/D;AAEO,SAAS,aAAgB,SAA4B,IAAY,MAAiB;AACvF,QAAM,QAAQ,QAAQ,EAAE;AACxB,MAAI,UAAU,QAAW;AACvB,UAAM,IAAI,MAAM,oBAAoB,IAAI,kBAAkB,EAAE,GAAG;AAAA,EACjE;AACA,SAAO;AACT;AAGO,SAAS,cAAc,IAAY,SAA2C;AACnF,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,QAAM,QAAQ,MAAM,QAAQ,MAAS;AACrC,SAAO,EAAE,cAAc,OAAO,cAAc,OAAO,SAAS,OAAO,QAAQ,MAAA;AAC7E;AAGO,SAAS,cAAc,OAA+B,UAA4B;AACvF,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,aAAA;AAAA,EACF;AACF;;;;;;;;;;;;"}

package/dist/data/graph-diagram-model.d.ts

@@ -0,0 +1,90 @@
+import { KeyboardEvent, ReactNode } from 'react';
+import { BadgeTone } from './Badge.js';
+import { GraphLayoutPosition } from './graph-layout.js';
+export interface GraphDiagramNode {
+    id: string;
+    label: ReactNode;
+    /** Drawn before the label, on the same line. Give the icon its own `title` so it names itself. */
+    icon?: ReactNode;
+    detail?: ReactNode;
+    badge?: ReactNode;
+    tone?: BadgeTone;
+    shape?: "pill" | "rect";
+    /** Accessible name for the node, when `label` alone isn't enough. */
+    ariaLabel?: string;
+    /** Full text for the node, shown as its native tooltip. */
+    title?: string;
+    /** Column of the node. Required by the "columns" layout; may be negative. */
+    level?: number;
+    /** "columns" layout: nodes sharing a group are stacked together and boxed. */
+    group?: string;
+    /** Dimmed styling, for a node that leads nowhere further: external, unresolved, not expandable. */
+    muted?: boolean;
+    /** Neighbours not drawn yet. Renders a `+N` control on the node's outer side. */
+    expandCount?: number;
+}
+export interface GraphDiagramEdge {
+    id: string;
+    from: string;
+    to: string;
+    /** Short text shown in a pill on the edge. */
+    label?: string;
+    /** Drawn in the pill before the label. An edge with an icon and no label still gets a pill. */
+    icon?: ReactNode;
+    /** What `icon` says, in words. It precedes the label in the edge's accessible name. */
+    iconLabel?: string;
+    /** Full text for the edge, shown as its native tooltip. */
+    title?: string;
+    tone?: BadgeTone;
+    dashed?: boolean;
+}
+export interface GraphDiagramGroup {
+    id: string;
+    label: ReactNode;
+    /** Full text for the group, shown as its caption's native tooltip: what a shortened `label` stands for. */
+    title?: string;
+}
+export type GraphDiagramLayout = "ring" | "columns";
+/**
+ * Whether edges compete for attention or take turns. With focus on, an edge
+ * shows its label pill only while it is in focus — selected, hovered, or
+ * attached to the selected or hovered node — and while anything is in focus
+ * the other edges fade. "auto" turns it on past `DENSE_EDGE_COUNT` edges.
+ */
+export type GraphDiagramEdgeFocus = "auto" | "on" | "off";
+/** The most edges a diagram draws with every pill showing under `edgeFocus="auto"`. */
+export declare const DENSE_EDGE_COUNT = 32;
+export declare function edgeFocusOn(mode: GraphDiagramEdgeFocus, edgeCount: number): boolean;
+/** The edges in focus: the named ones, and every edge attached to a named node. */
+export declare function focusedEdgeIds(edges: readonly {
+    id: string;
+    from: string;
+    to: string;
+}[], focus: {
+    nodes: readonly (string | undefined)[];
+    edges: readonly (string | undefined)[];
+}): Set<string>;
+/** Maps a point in layout coordinates to the CSS offsets of the stage it is drawn on. */
+export type GraphPlacer = (point: GraphLayoutPosition) => {
+    left: number | string;
+    top: number | string;
+};
+export declare const TONE_TEXT_CLASS: Record<BadgeTone, string>;
+export declare const TONE_NODE_CLASS: Record<BadgeTone, string>;
+/** The node's accessible name: its `ariaLabel`, else a plain-text label, else its id. */
+export declare function nodeName(node: GraphDiagramNode): string;
+/** A selectable edge's accessible name: `<from> to <to>`, then what its pill shows, in words. */
+export declare function edgeName(edge: GraphDiagramEdge, names: Record<string, string>): string;
+/** Estimated px width of an edge's pill. An icon counts as a fixed width, whatever it draws. */
+export declare function edgeLabelWidth(edge: GraphDiagramEdge): number;
+export declare function requireEntry<T>(entries: Record<string, T>, id: string, what: string): T;
+/** Props that report an element as hovered while the pointer is over it or the keyboard focus is inside it. */
+export declare function hoverHandlers(id: string, onHover: (id: string | undefined) => void): {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+/** Enter and Space activate a focused `role="button"` element, as they do a native button. */
+export declare function activateOnKey(event: KeyboardEvent<Element>, activate: () => void): void;
+//# sourceMappingURL=graph-diagram-model.d.ts.map

package/dist/data/graph-diagram-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-diagram-model.d.ts","sourceRoot":"","sources":["../../src/data/graph-diagram-model.ts"],"names":[],"mappings":"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"}

package/dist/data/graph-diagram-model.js

@@ -0,0 +1,73 @@
+const DENSE_EDGE_COUNT = 32;
+function edgeFocusOn(mode, edgeCount) {
+  return mode === "on" || mode === "auto" && edgeCount > DENSE_EDGE_COUNT;
+}
+function focusedEdgeIds(edges, focus) {
+  return new Set(
+    edges.filter((edge) => focus.edges.includes(edge.id) || focus.nodes.includes(edge.from) || focus.nodes.includes(edge.to)).map((edge) => edge.id)
+  );
+}
+const TONE_TEXT_CLASS = {
+  neutral: "text-muted-foreground",
+  success: "text-emerald-600 dark:text-emerald-400",
+  danger: "text-red-600 dark:text-red-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  info: "text-sky-600 dark:text-sky-400"
+};
+const TONE_NODE_CLASS = {
+  neutral: "border-border bg-card text-foreground",
+  success: "border-emerald-500/50 bg-emerald-500/10 text-foreground",
+  danger: "border-red-500/50 bg-red-500/10 text-foreground",
+  warning: "border-amber-500/50 bg-amber-500/10 text-foreground",
+  info: "border-sky-500/50 bg-sky-500/10 text-foreground"
+};
+function nodeName(node) {
+  if (node.ariaLabel !== void 0) return node.ariaLabel;
+  return typeof node.label === "string" ? node.label : node.id;
+}
+function edgeName(edge, names) {
+  const ends = `${requireEntry(names, edge.from, "node name")} to ${requireEntry(names, edge.to, "node name")}`;
+  const pill = [edge.iconLabel, edge.label].filter(Boolean).join(" ");
+  return pill === "" ? ends : `${ends}: ${pill}`;
+}
+const LABEL_CHAR_WIDTH = 5.4;
+const LABEL_CHROME = 14;
+const LABEL_ICON_SIZE = 14;
+const LABEL_ICON_GAP = 4;
+function edgeLabelWidth(edge) {
+  var _a;
+  const icon = edge.icon == null ? 0 : LABEL_ICON_SIZE + (edge.label ? LABEL_ICON_GAP : 0);
+  return (((_a = edge.label) == null ? void 0 : _a.length) ?? 0) * LABEL_CHAR_WIDTH + icon + LABEL_CHROME;
+}
+function requireEntry(entries, id, what) {
+  const entry = entries[id];
+  if (entry === void 0) {
+    throw new Error(`GraphDiagram: no ${what} computed for "${id}"`);
+  }
+  return entry;
+}
+function hoverHandlers(id, onHover) {
+  const enter = () => onHover(id);
+  const leave = () => onHover(void 0);
+  return { onMouseEnter: enter, onMouseLeave: leave, onFocus: enter, onBlur: leave };
+}
+function activateOnKey(event, activate) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    activate();
+  }
+}
+export {
+  DENSE_EDGE_COUNT,
+  TONE_NODE_CLASS,
+  TONE_TEXT_CLASS,
+  activateOnKey,
+  edgeFocusOn,
+  edgeLabelWidth,
+  edgeName,
+  focusedEdgeIds,
+  hoverHandlers,
+  nodeName,
+  requireEntry
+};
+//# sourceMappingURL=graph-diagram-model.js.map

package/dist/data/graph-diagram-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-diagram-model.js","sources":["../../src/data/graph-diagram-model.ts"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from \"react\";\nimport type { BadgeTone } from \"./Badge\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\n\nexport interface GraphDiagramNode {\n  id: string;\n  label: ReactNode;\n  /** Drawn before the label, on the same line. Give the icon its own `title` so it names itself. */\n  icon?: ReactNode;\n  detail?: ReactNode;\n  badge?: ReactNode;\n  tone?: BadgeTone;\n  shape?: \"pill\" | \"rect\";\n  /** Accessible name for the node, when `label` alone isn't enough. */\n  ariaLabel?: string;\n  /** Full text for the node, shown as its native tooltip. */\n  title?: string;\n  /** Column of the node. Required by the \"columns\" layout; may be negative. */\n  level?: number;\n  /** \"columns\" layout: nodes sharing a group are stacked together and boxed. */\n  group?: string;\n  /** Dimmed styling, for a node that leads nowhere further: external, unresolved, not expandable. */\n  muted?: boolean;\n  /** Neighbours not drawn yet. Renders a `+N` control on the node's outer side. */\n  expandCount?: number;\n}\n\nexport interface GraphDiagramEdge {\n  id: string;\n  from: string;\n  to: string;\n  /** Short text shown in a pill on the edge. */\n  label?: string;\n  /** Drawn in the pill before the label. An edge with an icon and no label still gets a pill. */\n  icon?: ReactNode;\n  /** What `icon` says, in words. It precedes the label in the edge's accessible name. */\n  iconLabel?: string;\n  /** Full text for the edge, shown as its native tooltip. */\n  title?: string;\n  tone?: BadgeTone;\n  dashed?: boolean;\n}\n\nexport interface GraphDiagramGroup {\n  id: string;\n  label: ReactNode;\n  /** Full text for the group, shown as its caption's native tooltip: what a shortened `label` stands for. */\n  title?: string;\n}\n\nexport type GraphDiagramLayout = \"ring\" | \"columns\";\n\n/**\n * Whether edges compete for attention or take turns. With focus on, an edge\n * shows its label pill only while it is in focus — selected, hovered, or\n * attached to the selected or hovered node — and while anything is in focus\n * the other edges fade. \"auto\" turns it on past `DENSE_EDGE_COUNT` edges.\n */\nexport type GraphDiagramEdgeFocus = \"auto\" | \"on\" | \"off\";\n\n/** The most edges a diagram draws with every pill showing under `edgeFocus=\"auto\"`. */\nexport const DENSE_EDGE_COUNT = 32;\n\nexport function edgeFocusOn(mode: GraphDiagramEdgeFocus, edgeCount: number): boolean {\n  return mode === \"on\" || (mode === \"auto\" && edgeCount > DENSE_EDGE_COUNT);\n}\n\n/** The edges in focus: the named ones, and every edge attached to a named node. */\nexport function focusedEdgeIds(\n  edges: readonly { id: string; from: string; to: string }[],\n  focus: { nodes: readonly (string | undefined)[]; edges: readonly (string | undefined)[] },\n): Set<string> {\n  return new Set(\n    edges\n      .filter((edge) => focus.edges.includes(edge.id) || focus.nodes.includes(edge.from) || focus.nodes.includes(edge.to))\n      .map((edge) => edge.id),\n  );\n}\n\n/** Maps a point in layout coordinates to the CSS offsets of the stage it is drawn on. */\nexport type GraphPlacer = (point: GraphLayoutPosition) => { left: number | string; top: number | string };\n\nexport const TONE_TEXT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"text-muted-foreground\",\n  success: \"text-emerald-600 dark:text-emerald-400\",\n  danger: \"text-red-600 dark:text-red-400\",\n  warning: \"text-amber-600 dark:text-amber-400\",\n  info: \"text-sky-600 dark:text-sky-400\",\n};\n\nexport const TONE_NODE_CLASS: Record<BadgeTone, string> = {\n  neutral: \"border-border bg-card text-foreground\",\n  success: \"border-emerald-500/50 bg-emerald-500/10 text-foreground\",\n  danger: \"border-red-500/50 bg-red-500/10 text-foreground\",\n  warning: \"border-amber-500/50 bg-amber-500/10 text-foreground\",\n  info: \"border-sky-500/50 bg-sky-500/10 text-foreground\",\n};\n\n/** The node's accessible name: its `ariaLabel`, else a plain-text label, else its id. */\nexport function nodeName(node: GraphDiagramNode): string {\n  if (node.ariaLabel !== undefined) return node.ariaLabel;\n  return typeof node.label === \"string\" ? node.label : node.id;\n}\n\n/** A selectable edge's accessible name: `<from> to <to>`, then what its pill shows, in words. */\nexport function edgeName(edge: GraphDiagramEdge, names: Record<string, string>): string {\n  const ends = `${requireEntry(names, edge.from, \"node name\")} to ${requireEntry(names, edge.to, \"node name\")}`;\n  const pill = [edge.iconLabel, edge.label].filter(Boolean).join(\" \");\n  return pill === \"\" ? ends : `${ends}: ${pill}`;\n}\n\n// A pill is not measured: its size is estimated from its content, at the mean\n// glyph advance of its 10px medium label plus its padding and border.\nconst LABEL_CHAR_WIDTH = 5.4;\nconst LABEL_CHROME = 14;\n// The pill's icon slot (`text-sm`, so a 1em icon is 14px) and its `gap-1` to the text.\nconst LABEL_ICON_SIZE = 14;\nconst LABEL_ICON_GAP = 4;\n\n/** Estimated px width of an edge's pill. An icon counts as a fixed width, whatever it draws. */\nexport function edgeLabelWidth(edge: GraphDiagramEdge): number {\n  const icon = edge.icon == null ? 0 : LABEL_ICON_SIZE + (edge.label ? LABEL_ICON_GAP : 0);\n  return (edge.label?.length ?? 0) * LABEL_CHAR_WIDTH + icon + LABEL_CHROME;\n}\n\nexport function requireEntry<T>(entries: Record<string, T>, id: string, what: string): T {\n  const entry = entries[id];\n  if (entry === undefined) {\n    throw new Error(`GraphDiagram: no ${what} computed for \"${id}\"`);\n  }\n  return entry;\n}\n\n/** Props that report an element as hovered while the pointer is over it or the keyboard focus is inside it. */\nexport function hoverHandlers(id: string, onHover: (id: string | undefined) => void) {\n  const enter = () => onHover(id);\n  const leave = () => onHover(undefined);\n  return { onMouseEnter: enter, onMouseLeave: leave, onFocus: enter, onBlur: leave };\n}\n\n/** Enter and Space activate a focused `role=\"button\"` element, as they do a native button. */\nexport function activateOnKey(event: KeyboardEvent<Element>, activate: () => void): void {\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    activate();\n  }\n}\n"],"names":[],"mappings":"AA6DO,MAAM,mBAAmB;AAEzB,SAAS,YAAY,MAA6B,WAA4B;AACnF,SAAO,SAAS,QAAS,SAAS,UAAU,YAAY;AAC1D;AAGO,SAAS,eACd,OACA,OACa;AACb,SAAO,IAAI;AAAA,IACT,MACG,OAAO,CAAC,SAAS,MAAM,MAAM,SAAS,KAAK,EAAE,KAAK,MAAM,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,MAAM,SAAS,KAAK,EAAE,CAAC,EAClH,IAAI,CAAC,SAAS,KAAK,EAAE;AAAA,EAAA;AAE5B;AAKO,MAAM,kBAA6C;AAAA,EACxD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAEO,MAAM,kBAA6C;AAAA,EACxD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAGO,SAAS,SAAS,MAAgC;AACvD,MAAI,KAAK,cAAc,OAAW,QAAO,KAAK;AAC9C,SAAO,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK;AAC5D;AAGO,SAAS,SAAS,MAAwB,OAAuC;AACtF,QAAM,OAAO,GAAG,aAAa,OAAO,KAAK,MAAM,WAAW,CAAC,OAAO,aAAa,OAAO,KAAK,IAAI,WAAW,CAAC;AAC3G,QAAM,OAAO,CAAC,KAAK,WAAW,KAAK,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,SAAO,SAAS,KAAK,OAAO,GAAG,IAAI,KAAK,IAAI;AAC9C;AAIA,MAAM,mBAAmB;AACzB,MAAM,eAAe;AAErB,MAAM,kBAAkB;AACxB,MAAM,iBAAiB;AAGhB,SAAS,eAAe,MAAgC;AA3DxD;AA4DL,QAAM,OAAO,KAAK,QAAQ,OAAO,IAAI,mBAAmB,KAAK,QAAQ,iBAAiB;AACtF,YAAQ,UAAK,UAAL,mBAAY,WAAU,KAAK,mBAAmB,OAAO;AAC/D;AAEO,SAAS,aAAgB,SAA4B,IAAY,MAAiB;AACvF,QAAM,QAAQ,QAAQ,EAAE;AACxB,MAAI,UAAU,QAAW;AACvB,UAAM,IAAI,MAAM,oBAAoB,IAAI,kBAAkB,EAAE,GAAG;AAAA,EACjE;AACA,SAAO;AACT;AAGO,SAAS,cAAc,IAAY,SAA2C;AACnF,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,QAAM,QAAQ,MAAM,QAAQ,MAAS;AACrC,SAAO,EAAE,cAAc,OAAO,cAAc,OAAO,SAAS,OAAO,QAAQ,MAAA;AAC7E;AAGO,SAAS,cAAc,OAA+B,UAA4B;AACvF,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,aAAA;AAAA,EACF;AACF;"}

package/dist/data/graph-edge-routing.cjs

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CURVE_OFFSET = 22;
+const MIN_SIDE_REACH = 36;
+const LOOP_BASE_REACH = 24;
+const LOOP_SPAN_RATE = 0.18;
+const MAX_LOOP_REACH = 240;
+const LOOP_GAP_SHARE = 0.6;
+const CUBIC_PEAK = 0.75;
+const PORT_INSET = 12;
+function unorderedPairKey(a, b) {
+  return a < b ? `${a}\0${b}` : `${b}\0${a}`;
+}
+function requirePosition(positions, id) {
+  const position = positions[id];
+  if (!position) {
+    throw new Error(`routeEdges: no layout position for node "${id}"`);
+  }
+  return position;
+}
+function requireEdge(group, index) {
+  const edge = group[index];
+  if (!edge) {
+    throw new Error(`routeEdges: expected an edge at index ${index}`);
+  }
+  return edge;
+}
+function clipToRect(center, towards, halfW, halfH) {
+  const dx = towards.x - center.x;
+  const dy = towards.y - center.y;
+  if (dx === 0 && dy === 0) return { x: center.x, y: center.y };
+  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Number.POSITIVE_INFINITY;
+  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Number.POSITIVE_INFINITY;
+  const scale = Math.min(scaleX, scaleY);
+  return { x: center.x + dx * scale, y: center.y + dy * scale };
+}
+function quadraticMidpoint(p0, p1, p2) {
+  return {
+    x: 0.25 * p0.x + 0.5 * p1.x + 0.25 * p2.x,
+    y: 0.25 * p0.y + 0.5 * p1.y + 0.25 * p2.y
+  };
+}
+function groupEdgesByPair(edges, positions) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (!(edge.from in positions)) {
+      throw new Error(`routeEdges: edge "${edge.id}" references unknown node "${edge.from}"`);
+    }
+    if (!(edge.to in positions)) {
+      throw new Error(`routeEdges: edge "${edge.id}" references unknown node "${edge.to}"`);
+    }
+    const key = unorderedPairKey(edge.from, edge.to);
+    const group = groups.get(key);
+    if (group) {
+      group.push(edge);
+    } else {
+      groups.set(key, [edge]);
+    }
+  }
+  return [...groups.values()];
+}
+function routeCenterGroup(group, positions, dimensions, routes) {
+  const halfW = dimensions.nodeWidth / 2;
+  const halfH = dimensions.nodeHeight / 2;
+  const first = requireEdge(group, 0);
+  const posA = requirePosition(positions, first.from);
+  const posB = requirePosition(positions, first.to);
+  const dx = posB.x - posA.x;
+  const dy = posB.y - posA.y;
+  const len = Math.hypot(dx, dy) || 1;
+  const perpX = -dy / len;
+  const perpY = dx / len;
+  const midX = (posA.x + posB.x) / 2;
+  const midY = (posA.y + posB.y) / 2;
+  group.forEach((edge, index) => {
+    const isCurved = group.length > 1;
+    const sign = index % 2 === 0 ? 1 : -1;
+    const magnitude = Math.floor(index / 2) + 1;
+    const offset = isCurved ? sign * magnitude * CURVE_OFFSET : 0;
+    const control = { x: midX + perpX * offset, y: midY + perpY * offset };
+    const fromCenter = requirePosition(positions, edge.from);
+    const toCenter = requirePosition(positions, edge.to);
+    const start = clipToRect(fromCenter, control, halfW, halfH);
+    const end = clipToRect(toCenter, control, halfW, halfH);
+    const path = isCurved ? `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}` : `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+    const label = isCurved ? quadraticMidpoint(start, control, end) : { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+    routes[edge.id] = { path, labelX: label.x, labelY: label.y };
+  });
+}
+function pointOnCurve([p0, c1, c2, p3], t) {
+  const u = 1 - t;
+  const weights = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];
+  return {
+    x: weights[0] * p0.x + weights[1] * c1.x + weights[2] * c2.x + weights[3] * p3.x,
+    y: weights[0] * p0.y + weights[1] * c1.y + weights[2] * c2.y + weights[3] * p3.y
+  };
+}
+function cubicRoute(curve) {
+  const [p0, c1, c2, p3] = curve;
+  const label = pointOnCurve(curve, 0.5);
+  return {
+    path: `M ${p0.x} ${p0.y} C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${p3.x} ${p3.y}`,
+    labelX: label.x,
+    labelY: label.y
+  };
+}
+function isLoop(from, to, nodeWidth) {
+  return Math.abs(to.x - from.x) < nodeWidth;
+}
+function planLoops(edges, positions, nodeWidth) {
+  const attached = /* @__PURE__ */ new Map();
+  for (const { x } of Object.values(positions)) attached.set(x, { left: 0, right: 0 });
+  const attach = (x, side) => {
+    const tally = attached.get(x);
+    if (tally) tally[side] += 1;
+  };
+  for (const edge of edges) {
+    const from = requirePosition(positions, edge.from);
+    const to = requirePosition(positions, edge.to);
+    if (isLoop(from, to, nodeWidth)) continue;
+    const forward = to.x > from.x;
+    attach(from.x, forward ? "right" : "left");
+    attach(to.x, forward ? "left" : "right");
+  }
+  const columns = [...attached.keys()];
+  return new Map(
+    columns.map((x) => {
+      const tally = attached.get(x) ?? { left: 0, right: 0 };
+      const side = tally.left < tally.right ? -1 : 1;
+      const gaps = columns.filter((other) => (other - x) * side > 0).map((other) => Math.abs(other - x) - nodeWidth);
+      const room = gaps.length === 0 ? Number.POSITIVE_INFINITY : LOOP_GAP_SHARE * Math.min(...gaps) / CUBIC_PEAK;
+      return [x, { side, maxReach: Math.min(MAX_LOOP_REACH, Math.max(0, room)) }];
+    })
+  );
+}
+function loopRoute(from, to, options) {
+  const { side, maxReach } = options.plan;
+  const halfW = options.dimensions.nodeWidth / 2;
+  const spread = options.self ? options.dimensions.nodeHeight / 4 : 0;
+  const startY = from.y - spread;
+  const endY = to.y + spread;
+  const reach = Math.min(maxReach, Math.max(MIN_SIDE_REACH, LOOP_BASE_REACH + LOOP_SPAN_RATE * Math.abs(endY - startY))) + options.index * CURVE_OFFSET;
+  const outer = side > 0 ? Math.max(from.x, to.x) : Math.min(from.x, to.x);
+  const bulge = outer + side * (halfW + reach);
+  return {
+    ...cubicRoute([
+      { x: from.x + side * halfW, y: startY },
+      { x: bulge, y: startY },
+      { x: bulge, y: endY },
+      { x: to.x + side * halfW, y: endY }
+    ]),
+    labelAnchor: side > 0 ? "start" : "end"
+  };
+}
+function routeSideGroup(group, positions, dimensions, loops, routes) {
+  const halfW = dimensions.nodeWidth / 2;
+  const step = group.length > 1 ? Math.min(CURVE_OFFSET, (dimensions.nodeHeight - PORT_INSET) / (group.length - 1)) : 0;
+  group.forEach((edge, index) => {
+    const from = requirePosition(positions, edge.from);
+    const to = requirePosition(positions, edge.to);
+    if (isLoop(from, to, dimensions.nodeWidth)) {
+      const plan = loops.get(from.x);
+      if (!plan) throw new Error(`routeEdges: no loop plan for the column of "${edge.from}"`);
+      routes[edge.id] = loopRoute(from, to, { self: edge.from === edge.to, index, dimensions, plan });
+      return;
+    }
+    const direction = to.x > from.x ? 1 : -1;
+    const shift = (index - (group.length - 1) / 2) * step;
+    const start = { x: from.x + direction * halfW, y: from.y + shift };
+    const end = { x: to.x - direction * halfW, y: to.y + shift };
+    const reach = Math.max(MIN_SIDE_REACH, Math.abs(end.x - start.x) / 2);
+    const curve = [
+      start,
+      { x: start.x + direction * reach, y: start.y },
+      { x: end.x - direction * reach, y: end.y },
+      end
+    ];
+    routes[edge.id] = { ...cubicRoute(curve), curve };
+  });
+}
+function routeEdges(edges, positions, dimensions, options = {}) {
+  const routes = {};
+  const groups = groupEdgesByPair(edges, positions);
+  if (options.anchor !== "side") {
+    for (const group of groups) routeCenterGroup(group, positions, dimensions, routes);
+    return routes;
+  }
+  const loops = planLoops(edges, positions, dimensions.nodeWidth);
+  for (const group of groups) routeSideGroup(group, positions, dimensions, loops, routes);
+  return routes;
+}
+function loopOverhang(edges, positions, dimensions) {
+  const xs = Object.values(positions).map((position) => position.x);
+  const loops = Object.values(routeEdges(edges, positions, dimensions, { anchor: "side" })).filter(
+    (route) => route.labelAnchor !== void 0
+  );
+  if (loops.length === 0) return { left: 0, right: 0 };
+  const peaks = loops.map((route) => route.labelX);
+  const halfW = dimensions.nodeWidth / 2;
+  return {
+    left: Math.max(0, Math.min(...xs) - halfW - Math.min(...peaks)),
+    right: Math.max(0, Math.max(...peaks) - (Math.max(...xs) + halfW))
+  };
+}
+function labelLeft(box) {
+  if (box.anchor === "start") return box.x;
+  return box.anchor === "end" ? box.x - box.width : box.x - box.width / 2;
+}
+function spreadLabels(boxes, gap = 2) {
+  const placed = [];
+  const ys = {};
+  for (const box of [...boxes].sort((a, b) => a.y - b.y)) {
+    const left = labelLeft(box);
+    const right = left + box.width;
+    let y = box.y;
+    for (let moved = true; moved; ) {
+      moved = false;
+      for (const other of placed) {
+        const clearance = (box.height + other.height) / 2 + gap;
+        if (left < other.right && other.left < right && Math.abs(y - other.y) < clearance) {
+          y = other.y + clearance;
+          moved = true;
+        }
+      }
+    }
+    placed.push({ left, right, y, height: box.height });
+    ys[box.id] = y;
+  }
+  return ys;
+}
+exports.loopOverhang = loopOverhang;
+exports.pointOnCurve = pointOnCurve;
+exports.routeEdges = routeEdges;
+exports.spreadLabels = spreadLabels;
+//# sourceMappingURL=graph-edge-routing.cjs.map

package/dist/data/graph-edge-routing.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-edge-routing.cjs","sources":["../../src/data/graph-edge-routing.ts"],"sourcesContent":["// Edge routing and label placement for GraphDiagram: pure math, no React.\n// Split from graph-layout.ts, which owns the position types and `ringLayout`\n// and re-exports this file's API.\n\nimport type { GraphLayoutPosition } from \"./graph-layout\";\n\nexport interface GraphLayoutEdge {\n  id: string;\n  from: string;\n  to: string;\n}\n\n/** Start, two control points and end of a cubic Bézier. */\nexport type CubicCurve = readonly [GraphLayoutPosition, GraphLayoutPosition, GraphLayoutPosition, GraphLayoutPosition];\n\nexport interface EdgeRoute {\n  /** SVG path `d` attribute, clipped to the node rectangle boundaries. */\n  path: string;\n  /** Midpoint of the rendered path, for placing an edge label. */\n  labelX: number;\n  labelY: number;\n  /**\n   * Set on a loop, whose midpoint is its outermost point: \"start\" when a label\n   * should begin at the point and run right of it, \"end\" when it should end\n   * there and run left. A centred label would reach back over the node.\n   */\n  labelAnchor?: \"start\" | \"end\";\n  /** A side-anchored edge between two columns: its curve, for placing a label elsewhere than its midpoint. */\n  curve?: CubicCurve;\n}\n\nexport interface RouteEdgesDimensions {\n  nodeWidth: number;\n  nodeHeight: number;\n}\n\nexport interface RouteEdgesOptions {\n  /** Where edges attach: clipped toward the node centre, or at the left/right side middles. Defaults to \"center\". */\n  anchor?: \"center\" | \"side\";\n}\n\nconst CURVE_OFFSET = 22;\nconst MIN_SIDE_REACH = 36;\n/** A loop reaches this far plus a share of the height it spans, so a longer loop arcs outside a shorter one. */\nconst LOOP_BASE_REACH = 24;\nconst LOOP_SPAN_RATE = 0.18;\nconst MAX_LOOP_REACH = 240;\n/** The share of the gap to the next column a loop may bulge into. */\nconst LOOP_GAP_SHARE = 0.6;\n/** A cubic whose two control points share an x peaks at 3/4 of their offset. */\nconst CUBIC_PEAK = 0.75;\n/** Vertical margin kept between fanned side anchors and the node's corners. */\nconst PORT_INSET = 12;\n\nfunction unorderedPairKey(a: string, b: string): string {\n  return a < b ? `${a}\\0${b}` : `${b}\\0${a}`;\n}\n\nfunction requirePosition(positions: Record<string, GraphLayoutPosition>, id: string): GraphLayoutPosition {\n  const position = positions[id];\n  if (!position) {\n    throw new Error(`routeEdges: no layout position for node \"${id}\"`);\n  }\n  return position;\n}\n\nfunction requireEdge(group: readonly GraphLayoutEdge[], index: number): GraphLayoutEdge {\n  const edge = group[index];\n  if (!edge) {\n    throw new Error(`routeEdges: expected an edge at index ${index}`);\n  }\n  return edge;\n}\n\n/** Point on the rectangle (centred at `center`, half-extents `halfW`/`halfH`) where the ray toward `towards` exits. */\nfunction clipToRect(\n  center: GraphLayoutPosition,\n  towards: GraphLayoutPosition,\n  halfW: number,\n  halfH: number,\n): GraphLayoutPosition {\n  const dx = towards.x - center.x;\n  const dy = towards.y - center.y;\n  if (dx === 0 && dy === 0) return { x: center.x, y: center.y };\n\n  const scaleX = dx !== 0 ? halfW / Math.abs(dx) : Number.POSITIVE_INFINITY;\n  const scaleY = dy !== 0 ? halfH / Math.abs(dy) : Number.POSITIVE_INFINITY;\n  const scale = Math.min(scaleX, scaleY);\n\n  return { x: center.x + dx * scale, y: center.y + dy * scale };\n}\n\n/** Point at t=0.5 on the quadratic Bézier defined by p0 (start), p1 (control), p2 (end). */\nfunction quadraticMidpoint(\n  p0: GraphLayoutPosition,\n  p1: GraphLayoutPosition,\n  p2: GraphLayoutPosition,\n): GraphLayoutPosition {\n  return {\n    x: 0.25 * p0.x + 0.5 * p1.x + 0.25 * p2.x,\n    y: 0.25 * p0.y + 0.5 * p1.y + 0.25 * p2.y,\n  };\n}\n\n/** Edges sharing an unordered node pair, in input order; throws on an edge whose node has no position. */\nfunction groupEdgesByPair(\n  edges: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n): GraphLayoutEdge[][] {\n  const groups = new Map<string, GraphLayoutEdge[]>();\n  for (const edge of edges) {\n    if (!(edge.from in positions)) {\n      throw new Error(`routeEdges: edge \"${edge.id}\" references unknown node \"${edge.from}\"`);\n    }\n    if (!(edge.to in positions)) {\n      throw new Error(`routeEdges: edge \"${edge.id}\" references unknown node \"${edge.to}\"`);\n    }\n    const key = unorderedPairKey(edge.from, edge.to);\n    const group = groups.get(key);\n    if (group) {\n      group.push(edge);\n    } else {\n      groups.set(key, [edge]);\n    }\n  }\n  return [...groups.values()];\n}\n\nfunction routeCenterGroup(\n  group: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n  dimensions: RouteEdgesDimensions,\n  routes: Record<string, EdgeRoute>,\n): void {\n  const halfW = dimensions.nodeWidth / 2;\n  const halfH = dimensions.nodeHeight / 2;\n  const first = requireEdge(group, 0);\n  const posA = requirePosition(positions, first.from);\n  const posB = requirePosition(positions, first.to);\n  const dx = posB.x - posA.x;\n  const dy = posB.y - posA.y;\n  const len = Math.hypot(dx, dy) || 1;\n  const perpX = -dy / len;\n  const perpY = dx / len;\n  const midX = (posA.x + posB.x) / 2;\n  const midY = (posA.y + posB.y) / 2;\n\n  group.forEach((edge, index) => {\n    const isCurved = group.length > 1;\n    const sign = index % 2 === 0 ? 1 : -1;\n    const magnitude = Math.floor(index / 2) + 1;\n    const offset = isCurved ? sign * magnitude * CURVE_OFFSET : 0;\n\n    const control = { x: midX + perpX * offset, y: midY + perpY * offset };\n    const fromCenter = requirePosition(positions, edge.from);\n    const toCenter = requirePosition(positions, edge.to);\n    const start = clipToRect(fromCenter, control, halfW, halfH);\n    const end = clipToRect(toCenter, control, halfW, halfH);\n\n    const path = isCurved\n      ? `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}`\n      : `M ${start.x} ${start.y} L ${end.x} ${end.y}`;\n\n    const label = isCurved\n      ? quadraticMidpoint(start, control, end)\n      : { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };\n\n    routes[edge.id] = { path, labelX: label.x, labelY: label.y };\n  });\n}\n\n/** The point at `t` (0 at the start, 1 at the end) along a cubic Bézier. */\nexport function pointOnCurve([p0, c1, c2, p3]: CubicCurve, t: number): GraphLayoutPosition {\n  const u = 1 - t;\n  const weights = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t] as const;\n  return {\n    x: weights[0] * p0.x + weights[1] * c1.x + weights[2] * c2.x + weights[3] * p3.x,\n    y: weights[0] * p0.y + weights[1] * c1.y + weights[2] * c2.y + weights[3] * p3.y,\n  };\n}\n\nfunction cubicRoute(curve: CubicCurve): EdgeRoute {\n  const [p0, c1, c2, p3] = curve;\n  const label = pointOnCurve(curve, 0.5);\n  return {\n    path: `M ${p0.x} ${p0.y} C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${p3.x} ${p3.y}`,\n    labelX: label.x,\n    labelY: label.y,\n  };\n}\n\ninterface LoopPlan {\n  /** 1 when the column's loops bulge right of it, -1 when left. */\n  side: 1 | -1;\n  /** The furthest a loop's control points may sit from the column, so it stays clear of the next one. */\n  maxReach: number;\n}\n\nfunction isLoop(from: GraphLayoutPosition, to: GraphLayoutPosition, nodeWidth: number): boolean {\n  return Math.abs(to.x - from.x) < nodeWidth;\n}\n\n/**\n * For each column (each distinct node x), where its loops go: the side with\n * fewer edges to other columns attached, the right on a tie, and no further\n * than a share of the gap to the next column on that side.\n */\nfunction planLoops(\n  edges: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n  nodeWidth: number,\n): Map<number, LoopPlan> {\n  const attached = new Map<number, { left: number; right: number }>();\n  for (const { x } of Object.values(positions)) attached.set(x, { left: 0, right: 0 });\n  const attach = (x: number, side: \"left\" | \"right\") => {\n    const tally = attached.get(x);\n    if (tally) tally[side] += 1;\n  };\n  for (const edge of edges) {\n    const from = requirePosition(positions, edge.from);\n    const to = requirePosition(positions, edge.to);\n    if (isLoop(from, to, nodeWidth)) continue;\n    const forward = to.x > from.x;\n    attach(from.x, forward ? \"right\" : \"left\");\n    attach(to.x, forward ? \"left\" : \"right\");\n  }\n  const columns = [...attached.keys()];\n  return new Map(\n    columns.map((x) => {\n      const tally = attached.get(x) ?? { left: 0, right: 0 };\n      const side = tally.left < tally.right ? -1 : 1;\n      const gaps = columns.filter((other) => (other - x) * side > 0).map((other) => Math.abs(other - x) - nodeWidth);\n      const room = gaps.length === 0 ? Number.POSITIVE_INFINITY : (LOOP_GAP_SHARE * Math.min(...gaps)) / CUBIC_PEAK;\n      return [x, { side, maxReach: Math.min(MAX_LOOP_REACH, Math.max(0, room)) }];\n    }),\n  );\n}\n\n/** Out of one side of a column and back into it: an edge inside one column, or a self-edge. */\nfunction loopRoute(\n  from: GraphLayoutPosition,\n  to: GraphLayoutPosition,\n  options: { self: boolean; index: number; dimensions: RouteEdgesDimensions; plan: LoopPlan },\n): EdgeRoute {\n  const { side, maxReach } = options.plan;\n  const halfW = options.dimensions.nodeWidth / 2;\n  const spread = options.self ? options.dimensions.nodeHeight / 4 : 0;\n  const startY = from.y - spread;\n  const endY = to.y + spread;\n  const reach =\n    Math.min(maxReach, Math.max(MIN_SIDE_REACH, LOOP_BASE_REACH + LOOP_SPAN_RATE * Math.abs(endY - startY))) +\n    options.index * CURVE_OFFSET;\n  const outer = side > 0 ? Math.max(from.x, to.x) : Math.min(from.x, to.x);\n  const bulge = outer + side * (halfW + reach);\n  return {\n    ...cubicRoute([\n      { x: from.x + side * halfW, y: startY },\n      { x: bulge, y: startY },\n      { x: bulge, y: endY },\n      { x: to.x + side * halfW, y: endY },\n    ]),\n    labelAnchor: side > 0 ? \"start\" : \"end\",\n  };\n}\n\nfunction routeSideGroup(\n  group: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n  dimensions: RouteEdgesDimensions,\n  loops: ReadonlyMap<number, LoopPlan>,\n  routes: Record<string, EdgeRoute>,\n): void {\n  const halfW = dimensions.nodeWidth / 2;\n  const step =\n    group.length > 1\n      ? Math.min(CURVE_OFFSET, (dimensions.nodeHeight - PORT_INSET) / (group.length - 1))\n      : 0;\n\n  group.forEach((edge, index) => {\n    const from = requirePosition(positions, edge.from);\n    const to = requirePosition(positions, edge.to);\n    if (isLoop(from, to, dimensions.nodeWidth)) {\n      const plan = loops.get(from.x);\n      if (!plan) throw new Error(`routeEdges: no loop plan for the column of \"${edge.from}\"`);\n      routes[edge.id] = loopRoute(from, to, { self: edge.from === edge.to, index, dimensions, plan });\n      return;\n    }\n    const direction = to.x > from.x ? 1 : -1;\n    const shift = (index - (group.length - 1) / 2) * step;\n    const start = { x: from.x + direction * halfW, y: from.y + shift };\n    const end = { x: to.x - direction * halfW, y: to.y + shift };\n    const reach = Math.max(MIN_SIDE_REACH, Math.abs(end.x - start.x) / 2);\n    const curve: CubicCurve = [\n      start,\n      { x: start.x + direction * reach, y: start.y },\n      { x: end.x - direction * reach, y: end.y },\n      end,\n    ];\n    routes[edge.id] = { ...cubicRoute(curve), curve };\n  });\n}\n\n/**\n * Routes each edge as an SVG path. Edges sharing an unordered node pair — a\n * reciprocal A→B + B→A, or literal duplicates — are always fanned apart so\n * they never overlap.\n *\n * `anchor: \"center\"` (the default) clips each edge to the source/target node\n * rectangles: a lone edge is a straight line, a fanned one a quadratic curve\n * offset from the line between the two node centres.\n *\n * `anchor: \"side\"` is for column layouts: an edge leaves the side of its\n * source facing the target and enters the facing side of the target as a\n * cubic curve. An edge between two nodes of one column, and a self-edge, is a\n * loop: it arcs out of the column and back on the side with fewer edges to\n * other columns, the further the more height it spans, so loops nest.\n *\n * Throws when an edge references a node id absent from `positions`, naming\n * the edge id, rather than silently dropping or mis-routing it.\n */\nexport function routeEdges(\n  edges: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n  dimensions: RouteEdgesDimensions,\n  options: RouteEdgesOptions = {},\n): Record<string, EdgeRoute> {\n  const routes: Record<string, EdgeRoute> = {};\n  const groups = groupEdgesByPair(edges, positions);\n  if (options.anchor !== \"side\") {\n    for (const group of groups) routeCenterGroup(group, positions, dimensions, routes);\n    return routes;\n  }\n  const loops = planLoops(edges, positions, dimensions.nodeWidth);\n  for (const group of groups) routeSideGroup(group, positions, dimensions, loops, routes);\n  return routes;\n}\n\n/** How far the side-anchored loops of `edges` reach past the outermost columns, on each side. */\nexport function loopOverhang(\n  edges: readonly GraphLayoutEdge[],\n  positions: Record<string, GraphLayoutPosition>,\n  dimensions: RouteEdgesDimensions,\n): { left: number; right: number } {\n  const xs = Object.values(positions).map((position) => position.x);\n  const loops = Object.values(routeEdges(edges, positions, dimensions, { anchor: \"side\" })).filter(\n    (route) => route.labelAnchor !== undefined,\n  );\n  if (loops.length === 0) return { left: 0, right: 0 };\n  const peaks = loops.map((route) => route.labelX);\n  const halfW = dimensions.nodeWidth / 2;\n  return {\n    left: Math.max(0, Math.min(...xs) - halfW - Math.min(...peaks)),\n    right: Math.max(0, Math.max(...peaks) - (Math.max(...xs) + halfW)),\n  };\n}\n\nexport interface EdgeLabelBox {\n  id: string;\n  /** The label's anchor: its centre, its left edge when `anchor` is \"start\", its right edge when \"end\". */\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  anchor?: \"start\" | \"end\";\n}\n\nfunction labelLeft(box: EdgeLabelBox): number {\n  if (box.anchor === \"start\") return box.x;\n  return box.anchor === \"end\" ? box.x - box.width : box.x - box.width / 2;\n}\n\n/**\n * Resolves the y of each edge label so no two labels cover each other: taken\n * top to bottom, a label that would overlap one already placed drops just\n * below it. Labels keep their x, and a label that overlaps nothing keeps its y.\n */\nexport function spreadLabels(boxes: readonly EdgeLabelBox[], gap = 2): Record<string, number> {\n  const placed: { left: number; right: number; y: number; height: number }[] = [];\n  const ys: Record<string, number> = {};\n  for (const box of [...boxes].sort((a, b) => a.y - b.y)) {\n    const left = labelLeft(box);\n    const right = left + box.width;\n    let y = box.y;\n    for (let moved = true; moved; ) {\n      moved = false;\n      for (const other of placed) {\n        const clearance = (box.height + other.height) / 2 + gap;\n        if (left < other.right && other.left < right && Math.abs(y - other.y) < clearance) {\n          y = other.y + clearance;\n          moved = true;\n        }\n      }\n    }\n    placed.push({ left, right, y, height: box.height });\n    ys[box.id] = y;\n  }\n  return ys;\n}\n"],"names":[],"mappings":";;AAyCA,MAAM,eAAe;AACrB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AACxB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAEvB,MAAM,aAAa;AAEnB,MAAM,aAAa;AAEnB,SAAS,iBAAiB,GAAW,GAAmB;AACtD,SAAO,IAAI,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;AAC1C;AAEA,SAAS,gBAAgB,WAAgD,IAAiC;AACxG,QAAM,WAAW,UAAU,EAAE;AAC7B,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,4CAA4C,EAAE,GAAG;AAAA,EACnE;AACA,SAAO;AACT;AAEA,SAAS,YAAY,OAAmC,OAAgC;AACtF,QAAM,OAAO,MAAM,KAAK;AACxB,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,yCAAyC,KAAK,EAAE;AAAA,EAClE;AACA,SAAO;AACT;AAGA,SAAS,WACP,QACA,SACA,OACA,OACqB;AACrB,QAAM,KAAK,QAAQ,IAAI,OAAO;AAC9B,QAAM,KAAK,QAAQ,IAAI,OAAO;AAC9B,MAAI,OAAO,KAAK,OAAO,EAAG,QAAO,EAAE,GAAG,OAAO,GAAG,GAAG,OAAO,EAAA;AAE1D,QAAM,SAAS,OAAO,IAAI,QAAQ,KAAK,IAAI,EAAE,IAAI,OAAO;AACxD,QAAM,SAAS,OAAO,IAAI,QAAQ,KAAK,IAAI,EAAE,IAAI,OAAO;AACxD,QAAM,QAAQ,KAAK,IAAI,QAAQ,MAAM;AAErC,SAAO,EAAE,GAAG,OAAO,IAAI,KAAK,OAAO,GAAG,OAAO,IAAI,KAAK,MAAA;AACxD;AAGA,SAAS,kBACP,IACA,IACA,IACqB;AACrB,SAAO;AAAA,IACL,GAAG,OAAO,GAAG,IAAI,MAAM,GAAG,IAAI,OAAO,GAAG;AAAA,IACxC,GAAG,OAAO,GAAG,IAAI,MAAM,GAAG,IAAI,OAAO,GAAG;AAAA,EAAA;AAE5C;AAGA,SAAS,iBACP,OACA,WACqB;AACrB,QAAM,6BAAa,IAAA;AACnB,aAAW,QAAQ,OAAO;AACxB,QAAI,EAAE,KAAK,QAAQ,YAAY;AAC7B,YAAM,IAAI,MAAM,qBAAqB,KAAK,EAAE,8BAA8B,KAAK,IAAI,GAAG;AAAA,IACxF;AACA,QAAI,EAAE,KAAK,MAAM,YAAY;AAC3B,YAAM,IAAI,MAAM,qBAAqB,KAAK,EAAE,8BAA8B,KAAK,EAAE,GAAG;AAAA,IACtF;AACA,UAAM,MAAM,iBAAiB,KAAK,MAAM,KAAK,EAAE;AAC/C,UAAM,QAAQ,OAAO,IAAI,GAAG;AAC5B,QAAI,OAAO;AACT,YAAM,KAAK,IAAI;AAAA,IACjB,OAAO;AACL,aAAO,IAAI,KAAK,CAAC,IAAI,CAAC;AAAA,IACxB;AAAA,EACF;AACA,SAAO,CAAC,GAAG,OAAO,QAAQ;AAC5B;AAEA,SAAS,iBACP,OACA,WACA,YACA,QACM;AACN,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,QAAQ,WAAW,aAAa;AACtC,QAAM,QAAQ,YAAY,OAAO,CAAC;AAClC,QAAM,OAAO,gBAAgB,WAAW,MAAM,IAAI;AAClD,QAAM,OAAO,gBAAgB,WAAW,MAAM,EAAE;AAChD,QAAM,KAAK,KAAK,IAAI,KAAK;AACzB,QAAM,KAAK,KAAK,IAAI,KAAK;AACzB,QAAM,MAAM,KAAK,MAAM,IAAI,EAAE,KAAK;AAClC,QAAM,QAAQ,CAAC,KAAK;AACpB,QAAM,QAAQ,KAAK;AACnB,QAAM,QAAQ,KAAK,IAAI,KAAK,KAAK;AACjC,QAAM,QAAQ,KAAK,IAAI,KAAK,KAAK;AAEjC,QAAM,QAAQ,CAAC,MAAM,UAAU;AAC7B,UAAM,WAAW,MAAM,SAAS;AAChC,UAAM,OAAO,QAAQ,MAAM,IAAI,IAAI;AACnC,UAAM,YAAY,KAAK,MAAM,QAAQ,CAAC,IAAI;AAC1C,UAAM,SAAS,WAAW,OAAO,YAAY,eAAe;AAE5D,UAAM,UAAU,EAAE,GAAG,OAAO,QAAQ,QAAQ,GAAG,OAAO,QAAQ,OAAA;AAC9D,UAAM,aAAa,gBAAgB,WAAW,KAAK,IAAI;AACvD,UAAM,WAAW,gBAAgB,WAAW,KAAK,EAAE;AACnD,UAAM,QAAQ,WAAW,YAAY,SAAS,OAAO,KAAK;AAC1D,UAAM,MAAM,WAAW,UAAU,SAAS,OAAO,KAAK;AAEtD,UAAM,OAAO,WACT,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,QAAQ,CAAC,IAAI,QAAQ,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,KACrE,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,IAAI,CAAC;AAE/C,UAAM,QAAQ,WACV,kBAAkB,OAAO,SAAS,GAAG,IACrC,EAAE,IAAI,MAAM,IAAI,IAAI,KAAK,GAAG,IAAI,MAAM,IAAI,IAAI,KAAK,EAAA;AAEvD,WAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,MAAM,GAAG,QAAQ,MAAM,EAAA;AAAA,EAC3D,CAAC;AACH;AAGO,SAAS,aAAa,CAAC,IAAI,IAAI,IAAI,EAAE,GAAe,GAAgC;AACzF,QAAM,IAAI,IAAI;AACd,QAAM,UAAU,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC;AACnE,SAAO;AAAA,IACL,GAAG,QAAQ,CAAC,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,GAAG;AAAA,IAC/E,GAAG,QAAQ,CAAC,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,GAAG;AAAA,EAAA;AAEnF;AAEA,SAAS,WAAW,OAA8B;AAChD,QAAM,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI;AACzB,QAAM,QAAQ,aAAa,OAAO,GAAG;AACrC,SAAO;AAAA,IACL,MAAM,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,CAAC;AAAA,IACzE,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,EAAA;AAElB;AASA,SAAS,OAAO,MAA2B,IAAyB,WAA4B;AAC9F,SAAO,KAAK,IAAI,GAAG,IAAI,KAAK,CAAC,IAAI;AACnC;AAOA,SAAS,UACP,OACA,WACA,WACuB;AACvB,QAAM,+BAAe,IAAA;AACrB,aAAW,EAAE,EAAA,KAAO,OAAO,OAAO,SAAS,EAAG,UAAS,IAAI,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG;AACnF,QAAM,SAAS,CAAC,GAAW,SAA2B;AACpD,UAAM,QAAQ,SAAS,IAAI,CAAC;AAC5B,QAAI,MAAO,OAAM,IAAI,KAAK;AAAA,EAC5B;AACA,aAAW,QAAQ,OAAO;AACxB,UAAM,OAAO,gBAAgB,WAAW,KAAK,IAAI;AACjD,UAAM,KAAK,gBAAgB,WAAW,KAAK,EAAE;AAC7C,QAAI,OAAO,MAAM,IAAI,SAAS,EAAG;AACjC,UAAM,UAAU,GAAG,IAAI,KAAK;AAC5B,WAAO,KAAK,GAAG,UAAU,UAAU,MAAM;AACzC,WAAO,GAAG,GAAG,UAAU,SAAS,OAAO;AAAA,EACzC;AACA,QAAM,UAAU,CAAC,GAAG,SAAS,MAAM;AACnC,SAAO,IAAI;AAAA,IACT,QAAQ,IAAI,CAAC,MAAM;AACjB,YAAM,QAAQ,SAAS,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAAA;AACnD,YAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,KAAK;AAC7C,YAAM,OAAO,QAAQ,OAAO,CAAC,WAAW,QAAQ,KAAK,OAAO,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,CAAC,IAAI,SAAS;AAC7G,YAAM,OAAO,KAAK,WAAW,IAAI,OAAO,oBAAqB,iBAAiB,KAAK,IAAI,GAAG,IAAI,IAAK;AACnG,aAAO,CAAC,GAAG,EAAE,MAAM,UAAU,KAAK,IAAI,gBAAgB,KAAK,IAAI,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5E,CAAC;AAAA,EAAA;AAEL;AAGA,SAAS,UACP,MACA,IACA,SACW;AACX,QAAM,EAAE,MAAM,SAAA,IAAa,QAAQ;AACnC,QAAM,QAAQ,QAAQ,WAAW,YAAY;AAC7C,QAAM,SAAS,QAAQ,OAAO,QAAQ,WAAW,aAAa,IAAI;AAClE,QAAM,SAAS,KAAK,IAAI;AACxB,QAAM,OAAO,GAAG,IAAI;AACpB,QAAM,QACJ,KAAK,IAAI,UAAU,KAAK,IAAI,gBAAgB,kBAAkB,iBAAiB,KAAK,IAAI,OAAO,MAAM,CAAC,CAAC,IACvG,QAAQ,QAAQ;AAClB,QAAM,QAAQ,OAAO,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,CAAC,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,CAAC;AACvE,QAAM,QAAQ,QAAQ,QAAQ,QAAQ;AACtC,SAAO;AAAA,IACL,GAAG,WAAW;AAAA,MACZ,EAAE,GAAG,KAAK,IAAI,OAAO,OAAO,GAAG,OAAA;AAAA,MAC/B,EAAE,GAAG,OAAO,GAAG,OAAA;AAAA,MACf,EAAE,GAAG,OAAO,GAAG,KAAA;AAAA,MACf,EAAE,GAAG,GAAG,IAAI,OAAO,OAAO,GAAG,KAAA;AAAA,IAAK,CACnC;AAAA,IACD,aAAa,OAAO,IAAI,UAAU;AAAA,EAAA;AAEtC;AAEA,SAAS,eACP,OACA,WACA,YACA,OACA,QACM;AACN,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,OACJ,MAAM,SAAS,IACX,KAAK,IAAI,eAAe,WAAW,aAAa,eAAe,MAAM,SAAS,EAAE,IAChF;AAEN,QAAM,QAAQ,CAAC,MAAM,UAAU;AAC7B,UAAM,OAAO,gBAAgB,WAAW,KAAK,IAAI;AACjD,UAAM,KAAK,gBAAgB,WAAW,KAAK,EAAE;AAC7C,QAAI,OAAO,MAAM,IAAI,WAAW,SAAS,GAAG;AAC1C,YAAM,OAAO,MAAM,IAAI,KAAK,CAAC;AAC7B,UAAI,CAAC,KAAM,OAAM,IAAI,MAAM,+CAA+C,KAAK,IAAI,GAAG;AACtF,aAAO,KAAK,EAAE,IAAI,UAAU,MAAM,IAAI,EAAE,MAAM,KAAK,SAAS,KAAK,IAAI,OAAO,YAAY,MAAM;AAC9F;AAAA,IACF;AACA,UAAM,YAAY,GAAG,IAAI,KAAK,IAAI,IAAI;AACtC,UAAM,SAAS,SAAS,MAAM,SAAS,KAAK,KAAK;AACjD,UAAM,QAAQ,EAAE,GAAG,KAAK,IAAI,YAAY,OAAO,GAAG,KAAK,IAAI,MAAA;AAC3D,UAAM,MAAM,EAAE,GAAG,GAAG,IAAI,YAAY,OAAO,GAAG,GAAG,IAAI,MAAA;AACrD,UAAM,QAAQ,KAAK,IAAI,gBAAgB,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC;AACpE,UAAM,QAAoB;AAAA,MACxB;AAAA,MACA,EAAE,GAAG,MAAM,IAAI,YAAY,OAAO,GAAG,MAAM,EAAA;AAAA,MAC3C,EAAE,GAAG,IAAI,IAAI,YAAY,OAAO,GAAG,IAAI,EAAA;AAAA,MACvC;AAAA,IAAA;AAEF,WAAO,KAAK,EAAE,IAAI,EAAE,GAAG,WAAW,KAAK,GAAG,MAAA;AAAA,EAC5C,CAAC;AACH;AAoBO,SAAS,WACd,OACA,WACA,YACA,UAA6B,CAAA,GACF;AAC3B,QAAM,SAAoC,CAAA;AAC1C,QAAM,SAAS,iBAAiB,OAAO,SAAS;AAChD,MAAI,QAAQ,WAAW,QAAQ;AAC7B,eAAW,SAAS,OAAQ,kBAAiB,OAAO,WAAW,YAAY,MAAM;AACjF,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,UAAU,OAAO,WAAW,WAAW,SAAS;AAC9D,aAAW,SAAS,OAAQ,gBAAe,OAAO,WAAW,YAAY,OAAO,MAAM;AACtF,SAAO;AACT;AAGO,SAAS,aACd,OACA,WACA,YACiC;AACjC,QAAM,KAAK,OAAO,OAAO,SAAS,EAAE,IAAI,CAAC,aAAa,SAAS,CAAC;AAChE,QAAM,QAAQ,OAAO,OAAO,WAAW,OAAO,WAAW,YAAY,EAAE,QAAQ,OAAA,CAAQ,CAAC,EAAE;AAAA,IACxF,CAAC,UAAU,MAAM,gBAAgB;AAAA,EAAA;AAEnC,MAAI,MAAM,WAAW,EAAG,QAAO,EAAE,MAAM,GAAG,OAAO,EAAA;AACjD,QAAM,QAAQ,MAAM,IAAI,CAAC,UAAU,MAAM,MAAM;AAC/C,QAAM,QAAQ,WAAW,YAAY;AACrC,SAAO;AAAA,IACL,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAE,IAAI,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC;AAAA,IAC9D,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,IAAI,GAAG,EAAE,IAAI,MAAM;AAAA,EAAA;AAErE;AAYA,SAAS,UAAU,KAA2B;AAC5C,MAAI,IAAI,WAAW,QAAS,QAAO,IAAI;AACvC,SAAO,IAAI,WAAW,QAAQ,IAAI,IAAI,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ;AACxE;AAOO,SAAS,aAAa,OAAgC,MAAM,GAA2B;AAC5F,QAAM,SAAuE,CAAA;AAC7E,QAAM,KAA6B,CAAA;AACnC,aAAW,OAAO,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG;AACtD,UAAM,OAAO,UAAU,GAAG;AAC1B,UAAM,QAAQ,OAAO,IAAI;AACzB,QAAI,IAAI,IAAI;AACZ,aAAS,QAAQ,MAAM,SAAS;AAC9B,cAAQ;AACR,iBAAW,SAAS,QAAQ;AAC1B,cAAM,aAAa,IAAI,SAAS,MAAM,UAAU,IAAI;AACpD,YAAI,OAAO,MAAM,SAAS,MAAM,OAAO,SAAS,KAAK,IAAI,IAAI,MAAM,CAAC,IAAI,WAAW;AACjF,cAAI,MAAM,IAAI;AACd,kBAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AACA,WAAO,KAAK,EAAE,MAAM,OAAO,GAAG,QAAQ,IAAI,QAAQ;AAClD,OAAG,IAAI,EAAE,IAAI;AAAA,EACf;AACA,SAAO;AACT;;;;;"}

package/dist/data/graph-edge-routing.d.ts

@@ -0,0 +1,73 @@
+import { GraphLayoutPosition } from './graph-layout.js';
+export interface GraphLayoutEdge {
+    id: string;
+    from: string;
+    to: string;
+}
+/** Start, two control points and end of a cubic Bézier. */
+export type CubicCurve = readonly [GraphLayoutPosition, GraphLayoutPosition, GraphLayoutPosition, GraphLayoutPosition];
+export interface EdgeRoute {
+    /** SVG path `d` attribute, clipped to the node rectangle boundaries. */
+    path: string;
+    /** Midpoint of the rendered path, for placing an edge label. */
+    labelX: number;
+    labelY: number;
+    /**
+     * Set on a loop, whose midpoint is its outermost point: "start" when a label
+     * should begin at the point and run right of it, "end" when it should end
+     * there and run left. A centred label would reach back over the node.
+     */
+    labelAnchor?: "start" | "end";
+    /** A side-anchored edge between two columns: its curve, for placing a label elsewhere than its midpoint. */
+    curve?: CubicCurve;
+}
+export interface RouteEdgesDimensions {
+    nodeWidth: number;
+    nodeHeight: number;
+}
+export interface RouteEdgesOptions {
+    /** Where edges attach: clipped toward the node centre, or at the left/right side middles. Defaults to "center". */
+    anchor?: "center" | "side";
+}
+/** The point at `t` (0 at the start, 1 at the end) along a cubic Bézier. */
+export declare function pointOnCurve([p0, c1, c2, p3]: CubicCurve, t: number): GraphLayoutPosition;
+/**
+ * Routes each edge as an SVG path. Edges sharing an unordered node pair — a
+ * reciprocal A→B + B→A, or literal duplicates — are always fanned apart so
+ * they never overlap.
+ *
+ * `anchor: "center"` (the default) clips each edge to the source/target node
+ * rectangles: a lone edge is a straight line, a fanned one a quadratic curve
+ * offset from the line between the two node centres.
+ *
+ * `anchor: "side"` is for column layouts: an edge leaves the side of its
+ * source facing the target and enters the facing side of the target as a
+ * cubic curve. An edge between two nodes of one column, and a self-edge, is a
+ * loop: it arcs out of the column and back on the side with fewer edges to
+ * other columns, the further the more height it spans, so loops nest.
+ *
+ * Throws when an edge references a node id absent from `positions`, naming
+ * the edge id, rather than silently dropping or mis-routing it.
+ */
+export declare function routeEdges(edges: readonly GraphLayoutEdge[], positions: Record<string, GraphLayoutPosition>, dimensions: RouteEdgesDimensions, options?: RouteEdgesOptions): Record<string, EdgeRoute>;
+/** How far the side-anchored loops of `edges` reach past the outermost columns, on each side. */
+export declare function loopOverhang(edges: readonly GraphLayoutEdge[], positions: Record<string, GraphLayoutPosition>, dimensions: RouteEdgesDimensions): {
+    left: number;
+    right: number;
+};
+export interface EdgeLabelBox {
+    id: string;
+    /** The label's anchor: its centre, its left edge when `anchor` is "start", its right edge when "end". */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    anchor?: "start" | "end";
+}
+/**
+ * Resolves the y of each edge label so no two labels cover each other: taken
+ * top to bottom, a label that would overlap one already placed drops just
+ * below it. Labels keep their x, and a label that overlaps nothing keeps its y.
+ */
+export declare function spreadLabels(boxes: readonly EdgeLabelBox[], gap?: number): Record<string, number>;
+//# sourceMappingURL=graph-edge-routing.d.ts.map

package/dist/data/graph-edge-routing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-edge-routing.d.ts","sourceRoot":"","sources":["../../src/data/graph-edge-routing.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;AAEvH,MAAM,WAAW,SAAS;IACxB,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC9B,4GAA4G;IAC5G,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,mHAAmH;IACnH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC5B;AAoID,4EAA4E;AAC5E,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAOzF;AA2HD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,eAAe,EAAE,EACjC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EAC9C,UAAU,EAAE,oBAAoB,EAChC,OAAO,GAAE,iBAAsB,GAC9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAU3B;AAED,iGAAiG;AACjG,wBAAgB,YAAY,CAC1B,KAAK,EAAE,SAAS,eAAe,EAAE,EACjC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,EAC9C,UAAU,EAAE,oBAAoB,GAC/B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAYjC;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,yGAAyG;IACzG,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAC1B;AAOD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,YAAY,EAAE,EAAE,GAAG,SAAI,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqB5F"}