@tensor_1/react 2.16.0 → 2.18.0

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export { ToggleRow, ToggleRowProps } from './components/ToggleRow.js';
 export { CollapsibleSection, CollapsibleSectionProps } from './components/CollapsibleSection.js';
 export { List, ListItem, ListItemProps, ListProps } from './components/List.js';
 export { DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionListItem, DescriptionListProps } from './components/DescriptionList.js';
-export { Tab, TabProps, Tabs, TabsProps } from './components/Tabs.js';
+export { Tab, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps } from './components/Tabs.js';
 export { AppShell, AppShellProps, ShellNav } from './components/AppShell.js';
 export { NavGroup, NavGroupProps, NavItem, NavItemProps, Sidebar, SidebarProps, SidebarSection, SidebarSectionProps, SubNavItem, SubNavItemProps } from './components/Sidebar.js';
 export { StarButton, StarButtonProps } from './components/StarButton.js';
@@ -61,7 +61,7 @@ export { Note, NoteProps, NoteTone, Prose, ProseProps } from './components/Prose
 export { Popover, PopoverProps } from './components/Popover.js';
 export { CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandPalette, CommandPaletteProps } from './components/CommandPalette.js';
 export { Inbox, InboxDetail, InboxDetailProps, InboxItem, InboxItemProps, InboxList, InboxListProps, InboxProps } from './components/Inbox.js';
-export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanProps } from './components/Kanban.js';
+export { Kanban, KanbanCard, KanbanCardProps, KanbanColumn, KanbanColumnProps, KanbanMoveDirection, KanbanProps } from './components/Kanban.js';
 export { Tree, TreeNodeData, TreeNodeProps, TreeProps } from './components/Tree.js';
 export { FlatNode, TreeLike, TreeNavAction, flattenTree, treeNav } from './tree-model.js';
 export { ContentList, ContentListItem, ContentListItemProps, ContentListProps, EventRow, EventRowProps, FeaturedRundown, FeaturedRundownItem, FeaturedRundownItemProps, FeaturedRundownProps, FeaturedStage, FeaturedStageProps, NewsLead, NewsLeadProps, NoticeQueue, NoticeQueueProps, PageIntro, PageIntroProps, ResourceGrid, ResourceGridProps, SectionHead, SectionHeadProps, StatLine, StatLineItem, StatLineProps, StatusRow, StatusRowProps } from './components/EditorialHome.js';
@@ -72,8 +72,8 @@ export { BuilderCanvas, BuilderCanvasItem, BuilderCanvasProps, BuilderPaletteIte
 export { SchedulingCalendar, SchedulingCalendarEntry, SchedulingCalendarOverlay, SchedulingCalendarProps, SchedulingCalendarView, SchedulingEntryState, SchedulingOverlayKind } from './components/SchedulingCalendar.js';
 export { DateRangePicker, DateRangePickerProps } from './components/DateRangePicker.js';
 export { CalendarDay, DateRangeValue, ZonedDateSpan, addCalendarDays, addCalendarMonths, buildMonthGrid, enumerateDateSpan, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth, toDateKey, zonedDateKey, zonedDateSpan } from './calendar-model.js';
-export { RelationshipGraph, RelationshipGraphLegendItem, RelationshipGraphProps } from './components/RelationshipGraph.js';
-export { BoundedRelationshipGraph, PositionedRelationshipNode, RelationshipGraphEdge, RelationshipGraphNode, boundRelationshipGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode } from './relationship-graph-model.js';
+export { DEFAULT_RELATIONSHIP_GRAPH_LABELS, RelationshipGraph, RelationshipGraphLabels, RelationshipGraphLegendItem, RelationshipGraphProps } from './components/RelationshipGraph.js';
+export { BoundedRelationshipGraph, LayeredColumn, LayeredEdgeClassification, LayeredEdgeKind, LayeredItem, LayeredLayout, LayeredLayoutOptions, LayeredNavigationKey, PositionedRelationshipNode, RelationshipGraphArrow, RelationshipGraphCluster, RelationshipGraphEdge, RelationshipGraphNode, RoutedEdge, boundRelationshipGraph, classifyLayeredEdges, clusterIdFor, layeredNeighbor, layoutLayeredGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode, wrapEdgeLabel } from './relationship-graph-model.js';
 export { MatchBulkResult, MatchReview, MatchReviewAction, MatchReviewCandidate, MatchReviewField, MatchReviewProps } from './components/MatchReview.js';
 export { MetricInput, MetricInputProps } from './components/MetricInput.js';
 export { clampMetricValue, parseMetricValue, stepMetricValue } from './metric-model.js';

package/dist/index.js

@@ -28,7 +28,7 @@ import { ToggleRow } from "./components/ToggleRow.js";
 import { CollapsibleSection } from "./components/CollapsibleSection.js";
 import { List, ListItem } from "./components/List.js";
 import { DescriptionList, DescriptionItem } from "./components/DescriptionList.js";
-import { Tabs, Tab } from "./components/Tabs.js";
+import { Tabs, Tab, TabPanel } from "./components/Tabs.js";
 import { AppShell } from "./components/AppShell.js";
 import { Sidebar, SidebarSection, NavItem, NavGroup, SubNavItem } from "./components/Sidebar.js";
 import { StarButton } from "./components/StarButton.js";
@@ -121,8 +121,8 @@ import {
   zonedDateKey,
   zonedDateSpan
 } from "./calendar-model.js";
-import { RelationshipGraph } from "./components/RelationshipGraph.js";
-import { boundRelationshipGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode } from "./relationship-graph-model.js";
+import { RelationshipGraph, DEFAULT_RELATIONSHIP_GRAPH_LABELS } from "./components/RelationshipGraph.js";
+import { boundRelationshipGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode, classifyLayeredEdges, clusterIdFor, layeredNeighbor, layoutLayeredGraph, wrapEdgeLabel } from "./relationship-graph-model.js";
 import { MatchReview } from "./components/MatchReview.js";
 import { MetricInput } from "./components/MetricInput.js";
 import { clampMetricValue, parseMetricValue, stepMetricValue } from "./metric-model.js";
@@ -163,6 +163,7 @@ export {
   ConfirmDialog,
   ContentList,
   ContentListItem,
+  DEFAULT_RELATIONSHIP_GRAPH_LABELS,
   DateRangePicker,
   DescriptionItem,
   DescriptionList,
@@ -247,6 +248,7 @@ export {
   SubNavItem,
   Switch,
   Tab,
+  TabPanel,
   Table,
   TableWrap,
   Tabs,
@@ -271,6 +273,8 @@ export {
   buildMonthGrid,
   buildThreeWayDiff,
   clampMetricValue,
+  classifyLayeredEdges,
+  clusterIdFor,
   computePosition,
   contrastRatio,
   cx,
@@ -284,6 +288,8 @@ export {
   isDateInRange,
   isDateUnavailable,
   isRuleGroup,
+  layeredNeighbor,
+  layoutLayeredGraph,
   layoutRelationshipGraph,
   mapRuleGroup,
   meetsContrast,
@@ -311,6 +317,7 @@ export {
   useTable,
   useVirtualRows,
   validateRuleDefinition,
+  wrapEdgeLabel,
   zonedDateKey,
   zonedDateSpan
 };

package/dist/relationship-graph-model.d.ts

@@ -5,13 +5,21 @@ interface RelationshipGraphNode {
     description?: string;
     x?: number;
     y?: number;
+    /** Layered layout: the node's column. Omitted → BFS distance from the root along source→target. */
+    depth?: number;
 }
+/** Where an edge's arrowhead sits: at the target (default), at the source, or nowhere. */
+type RelationshipGraphArrow = 'forward' | 'backward' | 'none';
 interface RelationshipGraphEdge {
     id: string;
     source: string;
     target: string;
     type?: string;
     label?: string;
+    /** Layered layout: arrowhead placement (default `forward`). */
+    arrow?: RelationshipGraphArrow;
+    /** Layered layout: always draw this edge's label, whatever the label policy. */
+    emphasis?: boolean;
 }
 interface PositionedRelationshipNode extends RelationshipGraphNode {
     x: number;
@@ -27,5 +35,108 @@ declare function boundRelationshipGraph(nodes: RelationshipGraphNode[], edges: R
 declare function relationshipNeighbors(nodeId: string, edges: RelationshipGraphEdge[]): string[];
 declare function layoutRelationshipGraph(nodes: RelationshipGraphNode[], edges: RelationshipGraphEdge[], rootId?: string): PositionedRelationshipNode[];
 declare function traverseRelationshipNode(nodes: RelationshipGraphNode[], currentId: string | undefined, direction: -1 | 1): string | undefined;
+type LayeredEdgeKind = 'forward' | 'lateral' | 'cycle';
+interface LayeredLayoutOptions {
+    rootId?: string;
+    /** Minimum sibling group size that collapses into a cluster. Default 6; 0 disables. */
+    clusterThreshold?: number;
+    expandedClusterIds?: ReadonlySet<string>;
+    density?: 'compact' | 'standard';
+}
+interface RelationshipGraphCluster {
+    id: string;
+    parentId: string;
+    depth: number;
+    type?: string;
+    edgeType?: string;
+    edgeLabel?: string;
+    members: RelationshipGraphNode[];
+}
+interface LayeredItem {
+    /** Node id, or cluster id for a collapsed cluster. */
+    id: string;
+    kind: 'node' | 'cluster';
+    node?: RelationshipGraphNode;
+    cluster?: RelationshipGraphCluster;
+    depth: number;
+    /** Position within its column (0-based, top to bottom). */
+    index: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Forward parents / children as item ids, in column order. */
+    parents: string[];
+    children: string[];
+    /** Set on the first member of an expanded cluster: the group its collapse control belongs to. */
+    expandedGroup?: RelationshipGraphCluster;
+    /** True when a lateral or cycle edge touches this node. */
+    inCycle: boolean;
+    /** Edges (any kind) touching this item. */
+    degree: number;
+}
+interface RoutedEdge {
+    id: string;
+    /** Item ids (a cluster id when the edge enters a collapsed cluster). */
+    source: string;
+    target: string;
+    kind: LayeredEdgeKind;
+    /** Original edge ids drawn by this path (several for a cluster). */
+    edgeIds: string[];
+    type?: string;
+    label?: string;
+    arrow: RelationshipGraphArrow;
+    emphasis: boolean;
+    path: string;
+    labelX: number;
+    labelY: number;
+    /** Arrowhead tip and the direction it points in (radians, 0 = pointing right). */
+    arrowX: number;
+    arrowY: number;
+    arrowAngle: number;
+    /** Label policy `auto` shows this label without interaction. */
+    autoLabel: boolean;
+    /** The label wrapped to fit the column gap (at most two lines). */
+    labelLines: string[];
+}
+interface LayeredColumn {
+    depth: number;
+    x: number;
+    /** Underlying nodes in the column, cluster members included. */
+    count: number;
+}
+interface LayeredLayout {
+    rootId: string | undefined;
+    items: LayeredItem[];
+    edges: RoutedEdge[];
+    clusters: RelationshipGraphCluster[];
+    columns: LayeredColumn[];
+    /** Node id → id of the item that currently draws it (itself, or its cluster). */
+    itemOf: Record<string, string>;
+    width: number;
+    height: number;
+    nodeWidth: number;
+    nodeHeight: number;
+    headerHeight: number;
+}
+/** Word-wrap a label into at most two lines that fit `width`; overlong words end in an ellipsis. */
+declare function wrapEdgeLabel(label: string, width: number): string[];
+interface LayeredEdgeClassification {
+    depthById: Map<string, number>;
+    kindById: Map<string, LayeredEdgeKind>;
+}
+/**
+ * Column (depth) for every node and a kind for every drawable edge.
+ * Supplied `node.depth` wins; otherwise BFS from the root along source→target.
+ * Nodes the BFS cannot reach go to a trailing column. Self-loops and edges with
+ * a missing endpoint get no kind and are not drawn.
+ */
+declare function classifyLayeredEdges(nodes: RelationshipGraphNode[], edges: RelationshipGraphEdge[], rootId?: string | undefined): LayeredEdgeClassification;
+declare function clusterIdFor(parentId: string, type: string | undefined, edgeType: string | undefined): string;
+/** Layered, clustered, crossing-reduced layout for `RelationshipGraph layout="layered"`. */
+declare function layoutLayeredGraph(nodes: RelationshipGraphNode[], edges: RelationshipGraphEdge[], options?: LayeredLayoutOptions): LayeredLayout;
+type LayeredNavigationKey = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End';
+/** Keyboard traversal over a layered layout: ←/→ along forward edges, ↑/↓ within a column. */
+declare function layeredNeighbor(layout: LayeredLayout, currentId: string | undefined, key: LayeredNavigationKey): string | undefined;
 
-export { type BoundedRelationshipGraph, type PositionedRelationshipNode, type RelationshipGraphEdge, type RelationshipGraphNode, boundRelationshipGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode };
+export { type BoundedRelationshipGraph, type LayeredColumn, type LayeredEdgeClassification, type LayeredEdgeKind, type LayeredItem, type LayeredLayout, type LayeredLayoutOptions, type LayeredNavigationKey, type PositionedRelationshipNode, type RelationshipGraphArrow, type RelationshipGraphCluster, type RelationshipGraphEdge, type RelationshipGraphNode, type RoutedEdge, boundRelationshipGraph, classifyLayeredEdges, clusterIdFor, layeredNeighbor, layoutLayeredGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode, wrapEdgeLabel };

package/dist/relationship-graph-model.js

@@ -60,9 +60,428 @@ function traverseRelationshipNode(nodes, currentId, direction) {
   const current = Math.max(0, nodes.findIndex((node) => node.id === currentId));
   return nodes[(current + direction + nodes.length) % nodes.length]?.id;
 }
+const LAYERED_GEOMETRY = {
+  standard: { nodeWidth: 176, nodeHeight: 76, columnGap: 96, rowGap: 12 },
+  compact: { nodeWidth: 160, nodeHeight: 60, columnGap: 80, rowGap: 8 }
+};
+const LAYERED_PADDING = 16;
+const LAYERED_HEADER = 28;
+const GROUP_HEADER = 28;
+const AUTO_LABEL_MAX_FANOUT = 4;
+const LABEL_CHAR_WIDTH = 5.6;
+const LABEL_MAX_LINES = 2;
+function wrapEdgeLabel(label, width) {
+  const max = Math.max(4, Math.floor(width / LABEL_CHAR_WIDTH));
+  const clip = (word) => word.length > max ? `${word.slice(0, max - 1)}\u2026` : word;
+  const lines = [];
+  let current = "";
+  for (const word of label.split(/\s+/).filter(Boolean)) {
+    const next = current ? `${current} ${word}` : word;
+    if (next.length <= max) {
+      current = next;
+      continue;
+    }
+    if (current) lines.push(current);
+    current = clip(word);
+    if (lines.length === LABEL_MAX_LINES) break;
+  }
+  if (current && lines.length < LABEL_MAX_LINES) lines.push(current);
+  if (lines.length === LABEL_MAX_LINES) {
+    const consumed = lines.join(" ").replace(/…$/, "").length;
+    if (consumed < label.replace(/\s+/g, " ").trim().length) {
+      const last = lines[LABEL_MAX_LINES - 1];
+      lines[LABEL_MAX_LINES - 1] = last.endsWith("\u2026") ? last : `${last.slice(0, Math.max(1, max - 1))}\u2026`;
+    }
+  }
+  return lines;
+}
+const drawableEdge = (edge, ids) => ids.has(edge.source) && ids.has(edge.target) && edge.source !== edge.target;
+function classifyLayeredEdges(nodes, edges, rootId = nodes[0]?.id) {
+  const ids = new Set(nodes.map((node) => node.id));
+  const root = rootId !== void 0 && ids.has(rootId) ? rootId : nodes[0]?.id;
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (!drawableEdge(edge, ids)) continue;
+    const list = outgoing.get(edge.source);
+    if (list) list.push(edge.target);
+    else outgoing.set(edge.source, [edge.target]);
+  }
+  const bfs = /* @__PURE__ */ new Map();
+  if (root !== void 0) {
+    bfs.set(root, 0);
+    const queue = [root];
+    for (let head = 0; head < queue.length; head += 1) {
+      const current = queue[head];
+      for (const next of outgoing.get(current) ?? []) {
+        if (!bfs.has(next)) {
+          bfs.set(next, bfs.get(current) + 1);
+          queue.push(next);
+        }
+      }
+    }
+  }
+  const depthById = /* @__PURE__ */ new Map();
+  let deepest = 0;
+  for (const node of nodes) {
+    const supplied = node.depth !== void 0 && Number.isFinite(node.depth) ? Math.max(0, Math.floor(node.depth)) : void 0;
+    const depth = supplied ?? bfs.get(node.id);
+    if (depth === void 0) continue;
+    depthById.set(node.id, depth);
+    deepest = Math.max(deepest, depth);
+  }
+  for (const node of nodes) if (!depthById.has(node.id)) depthById.set(node.id, deepest + 1);
+  const forwardOut = /* @__PURE__ */ new Map();
+  const kindById = /* @__PURE__ */ new Map();
+  const backEdges = [];
+  for (const edge of edges) {
+    if (!drawableEdge(edge, ids)) continue;
+    const from = depthById.get(edge.source);
+    const to = depthById.get(edge.target);
+    if (to === from + 1) {
+      kindById.set(edge.id, "forward");
+      const list = forwardOut.get(edge.source);
+      if (list) list.push(edge.target);
+      else forwardOut.set(edge.source, [edge.target]);
+    } else if (to < from) {
+      backEdges.push(edge);
+    } else {
+      kindById.set(edge.id, "lateral");
+    }
+  }
+  for (const edge of backEdges) {
+    const limit = depthById.get(edge.source);
+    const seen = /* @__PURE__ */ new Set([edge.target]);
+    const stack = [edge.target];
+    let closes = false;
+    while (stack.length > 0 && !closes) {
+      const current = stack.pop();
+      for (const next of forwardOut.get(current) ?? []) {
+        if (next === edge.source) {
+          closes = true;
+          break;
+        }
+        if (!seen.has(next) && depthById.get(next) < limit) {
+          seen.add(next);
+          stack.push(next);
+        }
+      }
+    }
+    kindById.set(edge.id, closes ? "cycle" : "lateral");
+  }
+  return { depthById, kindById };
+}
+function clusterIdFor(parentId, type, edgeType) {
+  return `cluster:${parentId}:${type ?? ""}:${edgeType ?? ""}`;
+}
+const mean = (values) => values.reduce((sum, value) => sum + value, 0) / values.length;
+const round1 = (value) => Math.round(value * 10) / 10;
+function layoutLayeredGraph(nodes, edges, options = {}) {
+  const { nodeWidth, nodeHeight, columnGap, rowGap } = LAYERED_GEOMETRY[options.density ?? "standard"];
+  const threshold = options.clusterThreshold ?? 6;
+  const expanded = options.expandedClusterIds ?? /* @__PURE__ */ new Set();
+  const rootId = options.rootId !== void 0 && nodes.some((node) => node.id === options.rootId) ? options.rootId : nodes[0]?.id;
+  if (nodes.length === 0) {
+    return {
+      rootId,
+      items: [],
+      edges: [],
+      clusters: [],
+      columns: [],
+      itemOf: {},
+      width: 0,
+      height: 0,
+      nodeWidth,
+      nodeHeight,
+      headerHeight: LAYERED_HEADER
+    };
+  }
+  const { depthById, kindById } = classifyLayeredEdges(nodes, edges, rootId);
+  const drawable = edges.filter((edge) => kindById.has(edge.id));
+  const forwardParents = /* @__PURE__ */ new Map();
+  const forwardChildCount = /* @__PURE__ */ new Map();
+  const inCycle = /* @__PURE__ */ new Set();
+  const nodeDegree = /* @__PURE__ */ new Map();
+  for (const edge of drawable) {
+    nodeDegree.set(edge.source, (nodeDegree.get(edge.source) ?? 0) + 1);
+    nodeDegree.set(edge.target, (nodeDegree.get(edge.target) ?? 0) + 1);
+    if (kindById.get(edge.id) === "forward") {
+      const list = forwardParents.get(edge.target);
+      if (list) list.push(edge);
+      else forwardParents.set(edge.target, [edge]);
+      forwardChildCount.set(edge.source, (forwardChildCount.get(edge.source) ?? 0) + 1);
+    } else {
+      inCycle.add(edge.source);
+      inCycle.add(edge.target);
+    }
+  }
+  const groups = /* @__PURE__ */ new Map();
+  if (threshold > 0) {
+    for (const node of nodes) {
+      if (node.id === rootId || inCycle.has(node.id) || (forwardChildCount.get(node.id) ?? 0) > 0) continue;
+      const parents = forwardParents.get(node.id) ?? [];
+      if (parents.length !== 1) continue;
+      const via = parents[0];
+      const id = clusterIdFor(via.source, node.type, via.type);
+      const group = groups.get(id);
+      if (group) {
+        group.members.push(node);
+        continue;
+      }
+      const created = { id, parentId: via.source, depth: depthById.get(node.id), members: [node] };
+      if (node.type !== void 0) created.type = node.type;
+      if (via.type !== void 0) created.edgeType = via.type;
+      const edgeLabel = via.label ?? via.type;
+      if (edgeLabel !== void 0) created.edgeLabel = edgeLabel;
+      groups.set(id, created);
+    }
+  }
+  const clusterById = /* @__PURE__ */ new Map();
+  const itemOf = {};
+  const expandedGroupOf = /* @__PURE__ */ new Map();
+  for (const group of groups.values()) {
+    if (group.members.length < threshold) continue;
+    if (expanded.has(group.id)) {
+      for (const member of group.members) expandedGroupOf.set(member.id, group);
+      continue;
+    }
+    clusterById.set(group.id, group);
+    for (const member of group.members) itemOf[member.id] = group.id;
+  }
+  for (const node of nodes) if (itemOf[node.id] === void 0) itemOf[node.id] = node.id;
+  const columnsByDepth = /* @__PURE__ */ new Map();
+  const itemById = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const id = itemOf[node.id];
+    if (itemById.has(id)) continue;
+    const cluster = clusterById.get(id);
+    const depth = depthById.get(node.id);
+    const item = {
+      id,
+      kind: cluster ? "cluster" : "node",
+      depth,
+      index: 0,
+      x: 0,
+      y: 0,
+      width: nodeWidth,
+      height: nodeHeight,
+      parents: [],
+      children: [],
+      inCycle: cluster ? false : inCycle.has(node.id),
+      degree: cluster ? cluster.members.length : nodeDegree.get(node.id) ?? 0
+    };
+    if (cluster) item.cluster = cluster;
+    else item.node = node;
+    itemById.set(id, item);
+    const column = columnsByDepth.get(depth);
+    if (column) column.push(item);
+    else columnsByDepth.set(depth, [item]);
+  }
+  for (const edge of drawable) {
+    if (kindById.get(edge.id) !== "forward") continue;
+    const from = itemById.get(itemOf[edge.source]);
+    const to = itemById.get(itemOf[edge.target]);
+    if (!from.children.includes(to.id)) from.children.push(to.id);
+    if (!to.parents.includes(from.id)) to.parents.push(from.id);
+  }
+  const depths = [...columnsByDepth.keys()].sort((a, b) => a - b);
+  const position = /* @__PURE__ */ new Map();
+  const reindex = (column) => {
+    column.forEach((item, index) => {
+      item.index = index;
+      position.set(item.id, index);
+    });
+  };
+  for (const depth of depths) reindex(columnsByDepth.get(depth));
+  const groupOfItem = (item) => item.node ? expandedGroupOf.get(item.node.id) : void 0;
+  const sweep = (depth, neighbours) => {
+    const keyed = columnsByDepth.get(depth).map((item) => {
+      const around = neighbours(item).map((id) => position.get(id)).filter((value) => value !== void 0);
+      return { item, key: around.length > 0 ? mean(around) : item.index, tie: item.index };
+    });
+    keyed.sort((a, b) => a.key - b.key || a.tie - b.tie);
+    const ordered = [];
+    const placed = /* @__PURE__ */ new Set();
+    for (const { item } of keyed) {
+      if (placed.has(item.id)) continue;
+      const group = groupOfItem(item);
+      for (const candidate of group ? keyed.map((entry) => entry.item).filter((other) => groupOfItem(other) === group) : [item]) {
+        if (placed.has(candidate.id)) continue;
+        ordered.push(candidate);
+        placed.add(candidate.id);
+      }
+    }
+    columnsByDepth.set(depth, ordered);
+    reindex(ordered);
+  };
+  const inner = depths.slice(1);
+  for (const depth of inner) sweep(depth, (item) => item.parents);
+  for (const depth of [...inner].reverse()) sweep(depth, (item) => item.children);
+  for (const depth of inner) sweep(depth, (item) => item.parents);
+  const top = LAYERED_PADDING + LAYERED_HEADER;
+  const columns = [];
+  let width = 0;
+  let height = 0;
+  for (const depth of depths) {
+    const column = columnsByDepth.get(depth);
+    const x = LAYERED_PADDING + depth * (nodeWidth + columnGap);
+    let cursor = top;
+    let count = 0;
+    const ledGroups = /* @__PURE__ */ new Set();
+    for (const item of column) {
+      const parentCentres = item.parents.map((id) => itemById.get(id)).filter((parent) => parent.depth < depth).map((parent) => parent.y + parent.height / 2);
+      const group = groupOfItem(item);
+      const leadsGroup = group !== void 0 && !ledGroups.has(group);
+      if (group) ledGroups.add(group);
+      const floor = cursor + (leadsGroup ? GROUP_HEADER : 0);
+      const target = parentCentres.length > 0 ? mean(parentCentres) - item.height / 2 : floor;
+      item.x = x;
+      item.y = round1(Math.max(target, floor));
+      if (leadsGroup) item.expandedGroup = group;
+      cursor = item.y + item.height + rowGap;
+      count += item.cluster ? item.cluster.members.length : 1;
+      width = Math.max(width, x + item.width);
+      height = Math.max(height, item.y + item.height);
+    }
+    columns.push({ depth, x, count });
+  }
+  const byPosition = (a, b) => (position.get(a) ?? 0) - (position.get(b) ?? 0);
+  for (const item of itemById.values()) {
+    item.children.sort(byPosition);
+    item.parents.sort(byPosition);
+  }
+  const routed = /* @__PURE__ */ new Map();
+  for (const edge of drawable) {
+    const kind = kindById.get(edge.id);
+    const from = itemById.get(itemOf[edge.source]);
+    const to = itemById.get(itemOf[edge.target]);
+    const key = from.kind === "cluster" || to.kind === "cluster" ? `${from.id}->${to.id}` : edge.id;
+    const existing = routed.get(key);
+    if (existing) {
+      existing.edgeIds.push(edge.id);
+      continue;
+    }
+    let startX;
+    let startY;
+    let endX;
+    let endY;
+    let path;
+    let labelX;
+    let labelY;
+    let startAngle;
+    let endAngle;
+    if (kind === "forward") {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x;
+      endY = to.y + to.height / 2;
+      const bend = Math.max(columnGap / 2, 24);
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX + bend)} ${round1(startY)} ${round1(endX - bend)} ${round1(endY)} ${round1(endX)} ${round1(endY)}`;
+      labelX = (startX + endX) / 2;
+      labelY = (startY + endY) / 2;
+      startAngle = Math.PI;
+      endAngle = 0;
+    } else if (from.depth === to.depth) {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x + to.width;
+      endY = to.y + to.height / 2;
+      const bulge = Math.min(columnGap - 8, 20 + Math.abs(endY - startY) * 0.1);
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX + bulge)} ${round1(startY)} ${round1(endX + bulge)} ${round1(endY)} ${round1(endX)} ${round1(endY)}`;
+      labelX = startX + bulge * 0.75;
+      labelY = (startY + endY) / 2;
+      startAngle = Math.PI;
+      endAngle = Math.PI;
+    } else {
+      startX = from.x + from.width / 2;
+      startY = from.y + from.height;
+      endX = to.x + to.width / 2;
+      endY = to.y + to.height;
+      const dip = 28 + Math.abs(endX - startX) * 0.12;
+      const low = Math.max(startY, endY) + dip;
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX)} ${round1(low)} ${round1(endX)} ${round1(low)} ${round1(endX)} ${round1(endY)}`;
+      labelX = (startX + endX) / 2;
+      labelY = low - dip * 0.25;
+      startAngle = -Math.PI / 2;
+      endAngle = -Math.PI / 2;
+      height = Math.max(height, low);
+    }
+    const arrow = edge.arrow ?? "forward";
+    const atStart = arrow === "backward";
+    const entry = {
+      id: key,
+      source: from.id,
+      target: to.id,
+      kind,
+      edgeIds: [edge.id],
+      arrow,
+      emphasis: edge.emphasis === true,
+      path,
+      labelX: round1(labelX),
+      labelY: round1(labelY),
+      arrowX: round1(atStart ? startX : endX),
+      arrowY: round1(atStart ? startY : endY),
+      arrowAngle: atStart ? startAngle : endAngle,
+      labelLines: [],
+      autoLabel: to.kind !== "cluster" && (edge.emphasis === true || kind === "forward" && from.children.length <= AUTO_LABEL_MAX_FANOUT)
+    };
+    if (edge.type !== void 0) entry.type = edge.type;
+    const label = edge.label ?? edge.type;
+    if (label !== void 0) entry.label = label;
+    routed.set(key, entry);
+  }
+  const seenLabels = /* @__PURE__ */ new Set();
+  for (const entry of routed.values()) {
+    if (entry.label === void 0) continue;
+    entry.labelLines = wrapEdgeLabel(entry.label, columnGap - 8);
+    if (!entry.autoLabel || entry.emphasis || entry.kind !== "forward") continue;
+    const key = `${entry.source}|${entry.label}`;
+    if (seenLabels.has(key)) entry.autoLabel = false;
+    else seenLabels.add(key);
+  }
+  return {
+    rootId,
+    items: depths.flatMap((depth) => columnsByDepth.get(depth)),
+    edges: [...routed.values()],
+    clusters: [...clusterById.values()],
+    columns,
+    itemOf,
+    width: round1(width + LAYERED_PADDING),
+    height: round1(height + LAYERED_PADDING + 8),
+    nodeWidth,
+    nodeHeight,
+    headerHeight: LAYERED_HEADER
+  };
+}
+function layeredNeighbor(layout, currentId, key) {
+  const root = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
+  const current = layout.items.find((item) => item.id === currentId);
+  if (!current) return root ?? layout.items[0]?.id;
+  const column = layout.items.filter((item) => item.depth === current.depth);
+  switch (key) {
+    case "ArrowUp":
+      return column[current.index - 1]?.id;
+    case "ArrowDown":
+      return column[current.index + 1]?.id;
+    case "ArrowRight":
+      return current.children[0];
+    case "ArrowLeft":
+      return current.parents[0];
+    case "Home":
+      return root;
+    case "End":
+      return column[column.length - 1]?.id;
+    default:
+      return void 0;
+  }
+}
 export {
   boundRelationshipGraph,
+  classifyLayeredEdges,
+  clusterIdFor,
+  layeredNeighbor,
+  layoutLayeredGraph,
   layoutRelationshipGraph,
   relationshipNeighbors,
-  traverseRelationshipNode
+  traverseRelationshipNode,
+  wrapEdgeLabel
 };

package/dist/tree-model.d.ts

@@ -11,6 +11,10 @@
 interface TreeLike<T> {
     id: string;
     children?: T[];
+    /** The display label — typeahead matches it only when it is a plain string (UIX-A11Y-2). */
+    label?: unknown;
+    /** Explicit typeahead text for nodes whose `label` is not a string (rich ReactNode labels). */
+    typeaheadLabel?: string;
 }
 interface FlatNode<T> {
     node: T;

package/dist/tree-model.js

@@ -40,6 +40,14 @@ function treeNav(flat, currentId, key) {
     case " ":
       return cur.hasChildren ? { toggleId: cur.node.id, selectId: cur.node.id } : { selectId: cur.node.id };
     default:
+      if (key.length === 1) {
+        const q = key.toLowerCase();
+        for (let step = 1; step <= flat.length; step++) {
+          const f = flat[(idx + step) % flat.length];
+          const label = f.node.typeaheadLabel ?? (typeof f.node.label === "string" ? f.node.label : void 0);
+          if (label != null && label.toLowerCase().startsWith(q)) return { focusId: f.node.id };
+        }
+      }
       return {};
   }
 }