@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/RelationshipGraphLayered.js

@@ -1,22 +1,30 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { boundRelationshipGraph, layeredNeighbor, layoutLayeredGraph } from "../relationship-graph-model.js";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { boundRelationshipGraph, edgeLabelSize, layeredNeighbor, layoutLayeredGraph, separateEdgeLabels } from "../relationship-graph-model.js";
 import { cx } from "../cx.js";
 import { Maximize2Icon, Minimize2Icon, MinusIcon, PlusIcon, RotateCcwIcon, ScanIcon } from "../icons/components.js";
 import { useKbdPlatform } from "./Kbd.js";
+import { prefersReducedMotion } from "../hooks/useReducedMotion.js";
 import { EquivalentRelationshipList } from "./RelationshipGraphList.js";
 import { Tooltip } from "./Tooltip.js";
 const EMPTY_IDS = /* @__PURE__ */ new Set();
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 const MIN_ZOOM = 0.4;
 const MAX_ZOOM = 1.5;
 const READABLE_ZOOM = 0.75;
 const ZOOM_STEP = 1.2;
 const PAN_STEP = 64;
 const FOCUS_MARGIN = 24;
+const DESCRIBED_RELATIONS = 5;
 const HINT_MS = 1600;
+const LABEL_FONT_PX = 12.5;
+const MIN_LABEL_PX = 11;
+const LABEL_CHIP_PAD_X = 6;
+const LABEL_CHIP_PAD_Y = 2;
 const NAV_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
 const clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+const footerGutter = (viewport, footer) => footer && footer.parentElement === viewport ? Math.min(footer.offsetHeight, viewport.clientHeight) : 0;
 function initialView(layout, size) {
   if (size.width === 0 || size.height === 0 || layout.width === 0) return { x: 0, y: 0, zoom: 1 };
   const fit = Math.min(size.width / layout.width, size.height / layout.height);
@@ -60,9 +68,12 @@ function LayeredRelationshipGraph({
   focusId,
   onFocusChange,
   controls = "full",
-  initialView: initialViewMode = "readable"
+  initialView: initialViewMode = "readable",
+  revealId,
+  markRoot
 }) {
   const hintId = useId();
+  const describeId = useId();
   const viewportHintId = useId();
   const compact = controls === "compact";
   const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
@@ -85,11 +96,14 @@ function LayeredRelationshipGraph({
   const viewportRef = useRef(null);
   const itemRefs = useRef(/* @__PURE__ */ new Map());
   const fullscreenButtonRef = useRef(null);
+  const footerRef = useRef(null);
+  const edgesRef = useRef(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [view, setView] = useState({ x: 0, y: 0, zoom: 1 });
   const [animate, setAnimate] = useState(false);
   const [localFocus, setLocalFocus] = useState(void 0);
   const [hoverId, setHoverId] = useState(void 0);
+  const [focusWithinId, setFocusWithinId] = useState(void 0);
   const [fullscreen, setFullscreen] = useState(false);
   const [wheelHint, setWheelHint] = useState(false);
   const viewRef = useRef(view);
@@ -116,13 +130,14 @@ function LayeredRelationshipGraph({
   useEffect(() => {
     const element = viewportRef.current;
     if (!element) return;
-    const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
+    const measure = () => setSize({ width: element.clientWidth, height: Math.max(0, element.clientHeight - footerGutter(element, footerRef.current)) });
     measure();
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(element);
+    if (footerRef.current) observer.observe(footerRef.current);
     return () => observer.disconnect();
-  }, []);
+  }, [compact]);
   useEffect(() => {
     if (size.width === 0) return;
     const key = `${layout.rootId ?? ""}`;
@@ -147,7 +162,7 @@ function LayeredRelationshipGraph({
   }, [fullscreen]);
   useEffect(() => () => clearTimeout(hintTimer.current), []);
   const moveView = useCallback((next, smooth) => {
-    setAnimate(smooth);
+    setAnimate(smooth && !prefersReducedMotion());
     setView(next);
   }, []);
   const ensureVisible = useCallback((id, smooth) => {
@@ -165,8 +180,10 @@ function LayeredRelationshipGraph({
     let nextY = y;
     if (left < FOCUS_MARGIN) nextX += FOCUS_MARGIN - left;
     else if (right > width - FOCUS_MARGIN) nextX -= right - (width - FOCUS_MARGIN);
+    const footer = footerRef.current;
+    const bottomMargin = footer ? Math.max(FOCUS_MARGIN, heightPx - footer.offsetTop + 8) : FOCUS_MARGIN;
     if (top < FOCUS_MARGIN) nextY += FOCUS_MARGIN - top;
-    else if (bottom > heightPx - FOCUS_MARGIN) nextY -= bottom - (heightPx - FOCUS_MARGIN);
+    else if (bottom > heightPx - bottomMargin) nextY -= bottom - (heightPx - bottomMargin);
     if (nextX !== x || nextY !== y) moveView({ x: nextX, y: nextY, zoom }, smooth);
   }, [moveView]);
   const focusItem = useCallback((id) => {
@@ -197,6 +214,18 @@ function LayeredRelationshipGraph({
       ensureVisible(controlledTarget, true);
     });
   }, [controlledKey, controlledTarget, controlledPresent, ensureVisible]);
+  const revealTarget = revealId !== void 0 ? layout.itemOf[revealId] ?? revealId : void 0;
+  const revealReady = revealTarget !== void 0 && itemById.has(revealTarget) && size.width > 0;
+  const revealedKey = useRef(void 0);
+  useEffect(() => {
+    if (!revealReady || revealTarget === void 0 || initialisedFor.current === void 0) return;
+    if (revealedKey.current === revealTarget) return;
+    revealedKey.current = revealTarget;
+    requestAnimationFrame(() => ensureVisible(revealTarget, true));
+  }, [revealReady, revealTarget, ensureVisible]);
+  useEffect(() => {
+    if (revealId === void 0) revealedKey.current = void 0;
+  }, [revealId]);
   useEffect(() => {
     const element = viewportRef.current;
     if (!element) return;
@@ -331,18 +360,240 @@ function LayeredRelationshipGraph({
     if (nodeAriaLabel) return [nodeAriaLabel(node), item.inCycle ? labels.cycle : void 0, conflict].filter(Boolean).join(", ");
     return [node.label, node.type, node.description, labels.relationships(item.degree), item.inCycle ? labels.cycle : void 0, conflict].filter(Boolean).join(", ");
   };
+  const nodeLabelById = useMemo(() => new Map(bounded.nodes.map((node) => [node.id, node.label])), [bounded.nodes]);
+  const relationsOf = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const add = (id, text) => {
+      const list = map.get(id);
+      if (list) list.push(text);
+      else map.set(id, [text]);
+    };
+    for (const edge of bounded.edges) {
+      if (!nodeLabelById.has(edge.source) || !nodeLabelById.has(edge.target) || edge.source === edge.target) continue;
+      const relation = edge.label ?? edge.type ?? labels.relationship;
+      const note = edge.description ? ` (${edge.description})` : "";
+      add(edge.source, `${labels.relationTo(relation, nodeLabelById.get(edge.target))}${note}`);
+      add(edge.target, `${labels.relationFrom(relation, nodeLabelById.get(edge.source))}${note}`);
+    }
+    const described = /* @__PURE__ */ new Map();
+    for (const [id, list] of map) {
+      const hidden = list.length - DESCRIBED_RELATIONS;
+      described.set(id, hidden > 0 ? `${list.slice(0, DESCRIBED_RELATIONS).join("; ")}; ${labels.moreRelations(hidden, showList)}` : list.join("; "));
+    }
+    return described;
+  }, [bounded.edges, nodeLabelById, labels, showList]);
+  const showRoot = markRoot ?? rootId !== void 0;
   const showLabel = (edge) => {
     if (edgeLabels === "never" || edge.label === void 0) return false;
     if (edgeLabels === "always") return true;
-    return edge.autoLabel || activeIds.has(edge.source) || activeIds.has(edge.target) || focusedId === edge.source || focusedId === edge.target;
+    if (edge.columnLabel) return false;
+    return edge.autoLabel || activeIds.has(edge.source) || activeIds.has(edge.target) || focusWithinId === edge.source || focusWithinId === edge.target;
   };
   const viewportStyle = height !== void 0 ? { "--uix-relationship-graph-height": height } : {};
+  const zoomStep = Math.min(1, Math.max(0.05, Math.floor(view.zoom * 20) / 20));
   const stageStyle = {
     width: layout.width,
     height: layout.height,
     transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
   };
   const zoomPercent = Math.round(view.zoom * 100);
+  const labelPlacement = useMemo(() => {
+    const shown = layout.edges.filter(showLabel);
+    const count = /* @__PURE__ */ new Map();
+    for (const edge of shown) count.set(edge.label ?? "", (count.get(edge.label ?? "") ?? 0) + 1);
+    const scales = /* @__PURE__ */ new Map();
+    const boxes = [];
+    for (const edge of shown) {
+      const lines = edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines;
+      const size2 = edgeLabelSize(lines);
+      const scale = Math.max(1, Math.min(1 / zoomStep, edge.labelRoom / size2.width));
+      if (edgeLabels !== "always" && LABEL_FONT_PX * scale * zoomStep < MIN_LABEL_PX - 0.01) continue;
+      scales.set(edge.id, scale);
+      const priority = (activeIds.has(edge.source) || activeIds.has(edge.target) ? 4 : 0) + (edge.tone || edge.emphasis ? 2 : 0) + (count.get(edge.label ?? "") === 1 ? 1 : 0);
+      boxes.push({ id: edge.id, x: edge.labelX, y: edge.labelY, width: size2.width * scale, height: size2.height * scale, priority });
+    }
+    const placed = separateEdgeLabels(boxes, { maxShift: 48 / zoomStep, obstacles: layout.items });
+    return new Map([...placed].map(([id, place]) => [id, { ...place, scale: scales.get(id) ?? 1 }]));
+  }, [layout, edgeLabels, activeIds, focusWithinId, labels, zoomStep]);
+  const live = useRef({ activate, onItemKeyDown, onFocusChange, toggleCluster, onSelect });
+  live.current = { activate, onItemKeyDown, onFocusChange, toggleCluster, onSelect };
+  const edgeLayer = useMemo(() => {
+    const ordered = layout.edges.map((edge) => ({ edge, active: activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id)) })).sort((a, b) => Number(a.active) - Number(b.active));
+    const dimmed = (edge) => dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0;
+    return /* @__PURE__ */ jsxs("svg", { ref: edgesRef, className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: [
+      ordered.map(({ edge, active }) => {
+        const angle = edge.arrowAngle * 180 / Math.PI;
+        return /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: "uix-relationship-graph__link",
+            "data-edge": edge.id,
+            "data-kind": edge.kind,
+            "data-bus": edge.bus || void 0,
+            "data-active": active || void 0,
+            "data-emphasis": edge.emphasis || void 0,
+            "data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
+            "data-dimmed": dimmed(edge),
+            "data-variant": edge.variant === "dashed" ? "dashed" : void 0,
+            "data-tone": edge.tone,
+            children: [
+              /* @__PURE__ */ jsx("path", { d: edge.path }),
+              edge.arrow !== "none" && /* @__PURE__ */ jsx("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` })
+            ]
+          },
+          edge.id
+        );
+      }),
+      /* @__PURE__ */ jsx("g", { className: "uix-relationship-graph__edge-labels", children: ordered.map(({ edge, active }) => {
+        const placed = labelPlacement.get(edge.id);
+        if (!placed || placed.hidden) return null;
+        const lines = edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines;
+        const chip = edgeLabelSize(lines);
+        return /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: "uix-relationship-graph__edge-label",
+            "data-edge": edge.id,
+            "data-active": active || void 0,
+            "data-dimmed": dimmed(edge),
+            "data-tone": edge.tone,
+            "data-moved": placed.y !== edge.labelY || void 0,
+            style: placed.scale !== 1 ? { "--uix-graph-label-scale": placed.scale } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("rect", { x: placed.x - chip.width / 2, y: placed.y - chip.height / 2, width: chip.width, height: chip.height, rx: 4 }),
+              /* @__PURE__ */ jsx("text", { x: placed.x, y: placed.y, textAnchor: "middle", dominantBaseline: "central", children: lines.map((line, index) => /* @__PURE__ */ jsx("tspan", { x: placed.x, dy: index === 0 ? `${-(lines.length - 1) * 0.6}em` : "1.2em", children: line }, index)) })
+            ]
+          },
+          edge.id
+        );
+      }) })
+    ] });
+  }, [layout, activeIds, highlightedEdgeIds, conflictedEdgeIds, dimmedNodeIds, labelPlacement, labels]);
+  useIsomorphicLayoutEffect(() => {
+    const svg = edgesRef.current;
+    if (!svg) return;
+    for (const group of Array.from(svg.querySelectorAll(".uix-relationship-graph__edge-label"))) {
+      const text = group.querySelector("text");
+      const rect = group.querySelector("rect");
+      if (!text || !rect || typeof text.getBBox !== "function") continue;
+      let box;
+      try {
+        box = text.getBBox();
+      } catch {
+        continue;
+      }
+      if (box.width === 0) continue;
+      rect.setAttribute("x", String(box.x - LABEL_CHIP_PAD_X));
+      rect.setAttribute("y", String(box.y - LABEL_CHIP_PAD_Y));
+      rect.setAttribute("width", String(box.width + 2 * LABEL_CHIP_PAD_X));
+      rect.setAttribute("height", String(box.height + 2 * LABEL_CHIP_PAD_Y));
+    }
+  }, [edgeLayer]);
+  const itemLayer = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
+    layout.columns.map((column) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "uix-relationship-graph__column",
+        "aria-hidden": "true",
+        style: { left: column.x, width: layout.nodeWidth + 64 },
+        children: [
+          labels.column(column.depth, column.count),
+          column.edgeLabel !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " \xB7 ",
+            column.edgeLabel
+          ] })
+        ]
+      },
+      column.depth
+    )),
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-roledescription": labels.roleDescription, "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), "aria-describedby": hintId, children: layout.items.map((item, itemIndex) => {
+      const selected = item.id === selectedItemId;
+      const relations = item.node ? relationsOf.get(item.node.id) : void 0;
+      const dimmed = item.node ? dimmedNodeIds.has(item.node.id) : item.cluster.members.every((member) => dimmedNodeIds.has(member.id));
+      const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
+        /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
+      ] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
+        (item.node.type || item.node.description) && /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
+      ] });
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (element) => {
+            if (element) itemRefs.current.set(item.id, element);
+            else itemRefs.current.delete(item.id);
+          },
+          type: "button",
+          className: "uix-relationship-graph__item",
+          "data-kind": item.kind,
+          "data-node-id": item.id,
+          "data-selected": selected || void 0,
+          "data-dimmed": dimmed || void 0,
+          "data-highlighted": item.node && highlightedNodeIds.has(item.node.id) || void 0,
+          "data-conflicted": item.node && conflictedNodeIds.has(item.node.id) || void 0,
+          "data-root": showRoot && item.id === rootItemId || void 0,
+          "data-tone": item.node?.tone,
+          "data-flag": item.inCycle || void 0,
+          style: { left: item.x, top: item.y, width: item.width, height: item.height },
+          tabIndex: item.id === focusedId ? 0 : -1,
+          "aria-label": labelFor(item),
+          "aria-describedby": relations ? `${describeId}-${itemIndex}` : void 0,
+          ...item.cluster ? { "aria-expanded": false } : { "aria-pressed": selected },
+          onClick: () => live.current.activate(item),
+          onKeyDown: (event) => live.current.onItemKeyDown(event, item),
+          onFocus: () => {
+            setFocusWithinId(item.id);
+            if (item.id === focusedId) return;
+            setLocalFocus(item.id);
+            live.current.onFocusChange?.(item.id);
+          },
+          onBlur: () => setFocusWithinId((current) => current === item.id ? void 0 : current),
+          onPointerEnter: () => setHoverId(item.id),
+          onPointerLeave: () => setHoverId((current) => current === item.id ? void 0 : current),
+          children: [
+            body,
+            item.inCycle && /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-flag", "aria-hidden": "true", children: labels.cycle })
+          ]
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { hidden: true, children: layout.items.map((item, itemIndex) => {
+      const relations = item.node ? relationsOf.get(item.node.id) : void 0;
+      return relations ? /* @__PURE__ */ jsx("span", { id: `${describeId}-${itemIndex}`, children: relations }, item.id) : null;
+    }) }),
+    layout.items.filter((item) => item.expandedGroup).map((item) => {
+      const group = item.expandedGroup;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uix-relationship-graph__collapse",
+          "aria-expanded": "true",
+          style: { left: item.x, top: item.y - 26, width: item.width },
+          onClick: () => live.current.toggleCluster(group.id, group.id),
+          children: labels.collapseCluster(group.members.length, group.type)
+        },
+        `collapse:${group.id}`
+      );
+    })
+  ] }), [layout, labels, selectedItemId, focusedId, relationsOf, dimmedNodeIds, highlightedNodeIds, conflictedNodeIds, showRoot, rootItemId, describeId, hintId, bounded, renderNode, renderCluster, nodeAriaLabel]);
+  const listLayer = useMemo(() => showList && /* @__PURE__ */ jsx(
+    EquivalentRelationshipList,
+    {
+      nodes: bounded.nodes,
+      edges: bounded.edges,
+      selectedId,
+      labels,
+      onSelect: (id) => {
+        const node = bounded.nodes.find((candidate) => candidate.id === id);
+        if (node) live.current.onSelect?.(node);
+      },
+      onExpandNeighbors,
+      onOpenDetails
+    }
+  ), [showList, bounded, selectedId, labels, onExpandNeighbors, onOpenDetails]);
   const control = (label, icon, onClick, { disabled = false, keys, ref } = {}) => /* @__PURE__ */ jsx(Tooltip, { label, placement: "top", ...keys ? { shortcut: keys } : {}, children: /* @__PURE__ */ jsx("button", { ref, type: "button", className: "uix-relationship-graph__control", "aria-label": label, onClick, disabled, children: icon }) });
   return /* @__PURE__ */ jsxs(
     "section",
@@ -381,6 +632,7 @@ function LayeredRelationshipGraph({
             onPointerMove,
             onPointerUp: onPointerEnd,
             onPointerCancel: onPointerEnd,
+            onDragStart: (event) => event.preventDefault(),
             ...compact ? {
               tabIndex: 0,
               role: "group",
@@ -390,103 +642,12 @@ function LayeredRelationshipGraph({
             } : {},
             children: [
               /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
-                /* @__PURE__ */ jsx("svg", { className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: layout.edges.map((edge) => {
-                  const active = activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id));
-                  const angle = edge.arrowAngle * 180 / Math.PI;
-                  return /* @__PURE__ */ jsxs(
-                    "g",
-                    {
-                      className: "uix-relationship-graph__link",
-                      "data-kind": edge.kind,
-                      "data-active": active || void 0,
-                      "data-emphasis": edge.emphasis || void 0,
-                      "data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
-                      "data-dimmed": dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0,
-                      children: [
-                        /* @__PURE__ */ jsx("path", { d: edge.path }),
-                        edge.arrow !== "none" && /* @__PURE__ */ jsx("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
-                        showLabel(edge) && /* @__PURE__ */ jsx("text", { x: edge.labelX, y: edge.labelY, textAnchor: "middle", dominantBaseline: "middle", children: (edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines).map((line, index, lines) => /* @__PURE__ */ jsx("tspan", { x: edge.labelX, dy: index === 0 ? `${-(lines.length - 1) * 0.55}em` : "1.1em", children: line }, index)) })
-                      ]
-                    },
-                    edge.id
-                  );
-                }) }),
-                layout.columns.map((column) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "uix-relationship-graph__column",
-                    "aria-hidden": "true",
-                    style: { left: column.x, width: layout.nodeWidth },
-                    children: labels.column(column.depth, column.count)
-                  },
-                  column.depth
-                )),
-                /* @__PURE__ */ jsx("div", { role: "group", "aria-roledescription": labels.roleDescription, "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), "aria-describedby": hintId, children: layout.items.map((item) => {
-                  const selected = item.id === selectedItemId;
-                  const dimmed = item.node ? dimmedNodeIds.has(item.node.id) : item.cluster.members.every((member) => dimmedNodeIds.has(member.id));
-                  const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
-                    /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
-                  ] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
-                    (item.node.type || item.node.description) && /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
-                  ] });
-                  return /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      ref: (element) => {
-                        if (element) itemRefs.current.set(item.id, element);
-                        else itemRefs.current.delete(item.id);
-                      },
-                      type: "button",
-                      className: "uix-relationship-graph__item",
-                      "data-kind": item.kind,
-                      "data-node-id": item.id,
-                      "data-selected": selected || void 0,
-                      "data-dimmed": dimmed || void 0,
-                      "data-highlighted": item.node && highlightedNodeIds.has(item.node.id) || void 0,
-                      "data-conflicted": item.node && conflictedNodeIds.has(item.node.id) || void 0,
-                      "data-root": item.id === rootItemId || void 0,
-                      style: { left: item.x, top: item.y, width: item.width, height: item.height },
-                      tabIndex: item.id === focusedId ? 0 : -1,
-                      "aria-label": labelFor(item),
-                      ...item.cluster ? { "aria-expanded": false } : { "aria-pressed": selected },
-                      onClick: () => activate(item),
-                      onKeyDown: (event) => onItemKeyDown(event, item),
-                      onFocus: () => {
-                        if (item.id === focusedId) return;
-                        setLocalFocus(item.id);
-                        onFocusChange?.(item.id);
-                      },
-                      onPointerEnter: () => setHoverId(item.id),
-                      onPointerLeave: () => setHoverId((current) => current === item.id ? void 0 : current),
-                      children: [
-                        body,
-                        item.inCycle && /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-flag", "aria-hidden": "true", children: labels.cycle })
-                      ]
-                    },
-                    item.id
-                  );
-                }) }),
-                layout.items.filter((item) => item.expandedGroup).map((item) => {
-                  const group = item.expandedGroup;
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "uix-relationship-graph__collapse",
-                      "aria-expanded": "true",
-                      style: { left: item.x, top: item.y - 26, width: item.width },
-                      onClick: () => toggleCluster(group.id, group.id),
-                      children: labels.collapseCluster(group.members.length, group.type)
-                    },
-                    `collapse:${group.id}`
-                  );
-                })
+                edgeLayer,
+                itemLayer
               ] }),
               compact && /* @__PURE__ */ jsxs(Fragment, { children: [
                 wheelHint && /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__toast", role: "status", children: labels.navigationHint(modifier) }),
-                /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__footer", children: [
+                /* @__PURE__ */ jsxs("div", { ref: footerRef, className: "uix-relationship-graph__footer", children: [
                   /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__hint", "aria-hidden": "true", children: labels.navigationHint(modifier) }),
                   /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__controls", role: "group", "aria-label": labels.controls, children: [
                     /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__zoom-level", "aria-live": "polite", children: labels.zoomLevel(zoomPercent) }),
@@ -508,22 +669,11 @@ function LayeredRelationshipGraph({
             ]
           }
         ),
-        legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ jsx("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
-        showList && /* @__PURE__ */ jsx(
-          EquivalentRelationshipList,
-          {
-            nodes: bounded.nodes,
-            edges: bounded.edges,
-            selectedId,
-            labels,
-            onSelect: (id) => {
-              const node = bounded.nodes.find((candidate) => candidate.id === id);
-              if (node) onSelect?.(node);
-            },
-            onExpandNeighbors,
-            onOpenDetails
-          }
-        )
+        legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ jsxs("li", { "data-type": entry.id, "data-tone": entry.tone, "data-shape": entry.shape, "data-variant": entry.variant, children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__legend-mark", "aria-hidden": "true" }),
+          entry.label
+        ] }, entry.id)) }),
+        listLayer
       ]
     }
   );

package/dist/components/RelationshipGraphList.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
 import { relationshipNeighbors } from "../relationship-graph-model.js";
+const LISTED_NEIGHBOURS = 8;
 function EquivalentRelationshipList({
   nodes,
   edges,
@@ -9,16 +11,41 @@ function EquivalentRelationshipList({
   onExpandNeighbors,
   onOpenDetails
 }) {
+  const id = useId();
+  const [open, setOpen] = useState(() => /* @__PURE__ */ new Set());
   const labelById = new Map(nodes.map((node) => [node.id, node.label]));
   return /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": labels.list, children: [
     /* @__PURE__ */ jsx("h3", { children: labels.listHeading }),
-    /* @__PURE__ */ jsx("ul", { children: nodes.map((node) => {
-      const neighbors = relationshipNeighbors(node.id, edges).map((id) => labelById.get(id) ?? id);
+    /* @__PURE__ */ jsx("ul", { children: nodes.map((node, index) => {
+      const neighbors = relationshipNeighbors(node.id, edges).map((neighbor) => labelById.get(neighbor) ?? neighbor);
+      const all = open.has(node.id);
+      const shown = all ? neighbors : neighbors.slice(0, LISTED_NEIGHBOURS);
+      const headingId = `${id}-${index}`;
       return /* @__PURE__ */ jsxs("li", { "data-selected": selectedId === node.id || void 0, children: [
-        /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onSelect(node.id), "aria-pressed": selectedId === node.id, children: [
-          /* @__PURE__ */ jsx("strong", { children: node.label }),
-          node.type && /* @__PURE__ */ jsx("span", { children: node.type }),
-          /* @__PURE__ */ jsx("span", { children: neighbors.length ? labels.connectedTo(neighbors.join(", ")) : labels.noConnections })
+        /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__list-main", children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onSelect(node.id), "aria-pressed": selectedId === node.id, children: [
+            /* @__PURE__ */ jsx("strong", { children: node.label }),
+            node.type && /* @__PURE__ */ jsx("span", { children: node.type })
+          ] }),
+          neighbors.length === 0 ? /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__list-none", children: labels.noConnections }) : /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__list-relations", children: [
+            /* @__PURE__ */ jsx("span", { id: headingId, children: labels.connectedHeading }),
+            /* @__PURE__ */ jsx("ul", { "aria-labelledby": headingId, children: shown.map((name, at) => /* @__PURE__ */ jsx("li", { children: name }, at)) }),
+            neighbors.length > LISTED_NEIGHBOURS && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "uix-btn uix-btn--link uix-relationship-graph__list-more",
+                "aria-expanded": all,
+                onClick: () => setOpen((previous) => {
+                  const next = new Set(previous);
+                  if (all) next.delete(node.id);
+                  else next.add(node.id);
+                  return next;
+                }),
+                children: all ? labels.showFewerRelations : labels.showAllRelations(neighbors.length)
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxs("span", { className: "uix-relationship-graph__list-actions", children: [
           onExpandNeighbors && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onExpandNeighbors(node), children: labels.expandNeighbors }),

package/dist/components/RuleBuilder.js

@@ -13,6 +13,7 @@ import {
 } from "../rule-builder-model.js";
 import { fillLabel } from "../fill-label.js";
 import { useUixLabels } from "../labels-context.js";
+import { Select } from "./Select.js";
 const DEFAULT_RULE_BUILDER_LABELS = {
   region: "Rule builder",
   summary: "Rule summary",
@@ -94,10 +95,16 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
         combinator === "or" ? labels.any : labels.all
       ] }) : /* @__PURE__ */ jsxs("label", { children: [
         labels.match,
-        /* @__PURE__ */ jsxs("select", { className: "uix-select uix-select--sm", value: group.combinator, disabled, onChange: (event) => updateNode(group.id, (node) => ({ ...node, combinator: event.currentTarget.value })), children: [
-          /* @__PURE__ */ jsx("option", { value: "and", children: labels.all }),
-          /* @__PURE__ */ jsx("option", { value: "or", children: labels.any })
-        ] })
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "sm",
+            value: group.combinator,
+            disabled,
+            options: [{ value: "and", label: labels.all }, { value: "or", label: labels.any }],
+            onValueChange: (next) => updateNode(group.id, (node) => ({ ...node, combinator: next }))
+          }
+        )
       ] }))
     ] }),
     /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__rows", children: group.conditions.map((node, index) => isRuleGroup(node) ? /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__nested", children: [
@@ -134,11 +141,27 @@ function ConditionRow({ labels, condition, fields, operators, disabled, onChange
   return /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__condition", children: [
     /* @__PURE__ */ jsxs("label", { children: [
       /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: labels.field }),
-      /* @__PURE__ */ jsx("select", { className: "uix-select", value: condition.field, onChange: (event) => setField(event.currentTarget.value), disabled, children: fields.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) })
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: condition.field,
+          disabled,
+          options: fields.map((item) => ({ value: item.id, label: item.label })),
+          onValueChange: (next) => setField(next)
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("label", { children: [
       /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: labels.operator }),
-      /* @__PURE__ */ jsx("select", { className: "uix-select", value: condition.operator, onChange: (event) => onChange({ ...condition, operator: event.currentTarget.value }), disabled, children: availableOperators.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) })
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: condition.operator,
+          disabled,
+          options: availableOperators.map((item) => ({ value: item.id, label: item.label })),
+          onValueChange: (next) => onChange({ ...condition, operator: next })
+        }
+      )
     ] }),
     operator?.requiresValue !== false && /* @__PURE__ */ jsx("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ jsx("input", { className: "uix-input", value: typeof condition.value === "string" || typeof condition.value === "number" ? condition.value : condition.value == null ? "" : JSON.stringify(condition.value), onChange: (event) => onChange({ ...condition, value: event.currentTarget.value }), disabled, "aria-label": fillLabel(labels.valueFor, { field: field?.label ?? labels.itemCondition }) }) }),
     controls
@@ -243,7 +266,16 @@ function RuleBuilder({
       value.then.map((action, index) => {
         const definition = actions.find((item) => item.id === action.type);
         return /* @__PURE__ */ jsxs("div", { className: "uix-rule-builder__action", children: [
-          /* @__PURE__ */ jsx("select", { className: "uix-select", value: action.type, disabled, onChange: (event) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: event.currentTarget.value } : item)), "aria-label": labels.actionType, children: actions.map((item) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.label }, item.id)) }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: action.type,
+              disabled,
+              "aria-label": labels.actionType,
+              options: actions.map((item) => ({ value: item.id, label: item.label })),
+              onValueChange: (next) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: next } : item))
+            }
+          ),
           definition?.renderParameters?.(action, (parameters) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, parameters } : item)), disabled),
           !disabled && /* @__PURE__ */ jsx(
             RowControls,

package/dist/components/SchedulingAgenda.d.ts

@@ -1,8 +1,10 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { S as SchedulingAgendaGroup, e as SchedulingCalendarLabels, i as SchedulingDatePart, d as SchedulingCalendarEntry, l as SchedulingMarker, f as SchedulingCalendarOverlay } from '../SchedulingCalendar-B6TakO2h.js';
+import { S as SchedulingAgendaGroup, e as SchedulingCalendarLabels, i as SchedulingDatePart, d as SchedulingCalendarEntry, l as SchedulingMarker, f as SchedulingCalendarOverlay } from '../SchedulingCalendar-WWyFL3Eo.js';
 import '../calendar-model.js';
 import '../scheduling-calendar-model.js';
+import './SchedulingResourceDay.js';
+import '../scheduling-resource-model.js';
 
 /** The height of one row of the virtualised agenda, in px. The stylesheet uses the same number. */
 declare const AGENDA_VIRTUAL_ROW = 44;