@tensor_1/react 2.17.0 → 2.18.0

package/dist/components/RelationshipGraphLayered.js

@@ -0,0 +1,420 @@
+"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 { cx } from "../cx.js";
+import { EquivalentRelationshipList } from "./RelationshipGraphList.js";
+const EMPTY_IDS = /* @__PURE__ */ new Set();
+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 NAV_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
+const clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+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);
+  if (fit < READABLE_ZOOM) return { x: 0, y: 0, zoom: READABLE_ZOOM };
+  const zoom = Math.min(fit, 1);
+  return { x: (size.width - layout.width * zoom) / 2, y: Math.max(0, (size.height - layout.height * zoom) / 2), zoom };
+}
+function fitView(layout, size) {
+  if (size.width === 0 || layout.width === 0) return { x: 0, y: 0, zoom: 1 };
+  const zoom = clampZoom(Math.min(size.width / layout.width, size.height / layout.height, 1));
+  return { x: (size.width - layout.width * zoom) / 2, y: Math.max(0, (size.height - layout.height * zoom) / 2), zoom };
+}
+const arrowPoints = "0,0 -8,-4.5 -8,4.5";
+function LayeredRelationshipGraph({
+  nodes,
+  edges,
+  selectedId,
+  onSelect,
+  onExpandNeighbors,
+  onOpenDetails,
+  maxNodes = 400,
+  density = "standard",
+  highlightedNodeIds = EMPTY_IDS,
+  conflictedNodeIds = EMPTY_IDS,
+  highlightedEdgeIds = EMPTY_IDS,
+  conflictedEdgeIds = EMPTY_IDS,
+  legend = [],
+  className,
+  labels,
+  rootId,
+  renderNode,
+  nodeAriaLabel,
+  renderCluster,
+  clusterThreshold,
+  expandedClusterIds,
+  onToggleCluster,
+  dimmedNodeIds = EMPTY_IDS,
+  edgeLabels = "auto",
+  showList = true,
+  height,
+  focusId,
+  onFocusChange
+}) {
+  const hintId = useId();
+  const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
+  const [localExpanded, setLocalExpanded] = useState(EMPTY_IDS);
+  const expanded = expandedClusterIds ?? localExpanded;
+  const layout = useMemo(
+    () => layoutLayeredGraph(bounded.nodes, bounded.edges, {
+      ...rootId !== void 0 ? { rootId } : {},
+      ...clusterThreshold !== void 0 ? { clusterThreshold } : {},
+      expandedClusterIds: expanded,
+      density
+    }),
+    [bounded, rootId, clusterThreshold, expanded, density]
+  );
+  const itemById = useMemo(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
+  const viewportRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  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 viewRef = useRef(view);
+  viewRef.current = view;
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  const pendingFocus = useRef(void 0);
+  const initialisedFor = useRef(void 0);
+  const rootItemId = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
+  const requestedFocus = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : localFocus;
+  const focusedId = requestedFocus !== void 0 && itemById.has(requestedFocus) ? requestedFocus : rootItemId;
+  const selectedItemId = selectedId !== void 0 ? layout.itemOf[selectedId] : void 0;
+  const activeIds = useMemo(
+    () => new Set([hoverId, selectedItemId].filter((id) => id !== void 0)),
+    [hoverId, selectedItemId]
+  );
+  useEffect(() => {
+    const element = viewportRef.current;
+    if (!element) return;
+    const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    if (size.width === 0) return;
+    const key = `${layout.rootId ?? ""}`;
+    if (initialisedFor.current === key) return;
+    initialisedFor.current = key;
+    setView(initialView(layout, size));
+  }, [layout, size]);
+  const moveView = useCallback((next, smooth) => {
+    setAnimate(smooth);
+    setView(next);
+  }, []);
+  const ensureVisible = useCallback((id, smooth) => {
+    const element = viewportRef.current;
+    const item = layoutRef.current.items.find((candidate) => candidate.id === id);
+    if (!element || !item) return;
+    const { x, y, zoom } = viewRef.current;
+    const width = element.clientWidth;
+    const heightPx = element.clientHeight;
+    const left = item.x * zoom + x;
+    const top = item.y * zoom + y;
+    const right = left + item.width * zoom;
+    const bottom = top + item.height * zoom;
+    let nextX = x;
+    let nextY = y;
+    if (left < FOCUS_MARGIN) nextX += FOCUS_MARGIN - left;
+    else if (right > width - FOCUS_MARGIN) nextX -= right - (width - FOCUS_MARGIN);
+    if (top < FOCUS_MARGIN) nextY += FOCUS_MARGIN - top;
+    else if (bottom > heightPx - FOCUS_MARGIN) nextY -= bottom - (heightPx - FOCUS_MARGIN);
+    if (nextX !== x || nextY !== y) moveView({ x: nextX, y: nextY, zoom }, smooth);
+  }, [moveView]);
+  const focusItem = useCallback((id) => {
+    setLocalFocus(id);
+    onFocusChange?.(id);
+    requestAnimationFrame(() => {
+      itemRefs.current.get(id)?.focus({ preventScroll: true });
+      ensureVisible(id, true);
+    });
+  }, [ensureVisible, onFocusChange]);
+  useEffect(() => {
+    const wanted = pendingFocus.current;
+    if (wanted !== void 0 && itemById.has(wanted)) {
+      pendingFocus.current = void 0;
+      focusItem(wanted);
+    }
+  }, [itemById, focusItem]);
+  const controlledTarget = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : void 0;
+  const controlledPresent = controlledTarget !== void 0 && itemById.has(controlledTarget);
+  const controlledKey = `${controlledTarget ?? ""}|${controlledPresent}`;
+  const lastControlledKey = useRef(controlledKey);
+  useEffect(() => {
+    if (lastControlledKey.current === controlledKey) return;
+    lastControlledKey.current = controlledKey;
+    if (!controlledPresent || controlledTarget === void 0) return;
+    requestAnimationFrame(() => {
+      itemRefs.current.get(controlledTarget)?.focus({ preventScroll: true });
+      ensureVisible(controlledTarget, true);
+    });
+  }, [controlledKey, controlledTarget, controlledPresent, ensureVisible]);
+  useEffect(() => {
+    const element = viewportRef.current;
+    if (!element) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const rect = element.getBoundingClientRect();
+      const px = event.clientX - rect.left;
+      const py = event.clientY - rect.top;
+      const current = viewRef.current;
+      const zoom = clampZoom(current.zoom * Math.exp(-event.deltaY * 2e-3));
+      const ratio = zoom / current.zoom;
+      setAnimate(false);
+      setView({ zoom, x: px - (px - current.x) * ratio, y: py - (py - current.y) * ratio });
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, []);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const pinchDistance = useRef(void 0);
+  const onPointerDown = (event) => {
+    if (event.target.closest("button")) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    pinchDistance.current = void 0;
+    setAnimate(false);
+  };
+  const onPointerMove = (event) => {
+    const previous = pointers.current.get(event.pointerId);
+    if (!previous) return;
+    const current = { x: event.clientX, y: event.clientY };
+    pointers.current.set(event.pointerId, current);
+    const all = [...pointers.current.values()];
+    if (all.length >= 2) {
+      const [a, b] = all;
+      const distance = Math.hypot(a.x - b.x, a.y - b.y);
+      const rect = event.currentTarget.getBoundingClientRect();
+      const mx = (a.x + b.x) / 2 - rect.left;
+      const my = (a.y + b.y) / 2 - rect.top;
+      if (pinchDistance.current !== void 0 && pinchDistance.current > 0) {
+        const base = viewRef.current;
+        const zoom = clampZoom(base.zoom * (distance / pinchDistance.current));
+        const ratio = zoom / base.zoom;
+        setView({ zoom, x: mx - (mx - base.x) * ratio, y: my - (my - base.y) * ratio });
+      }
+      pinchDistance.current = distance;
+      return;
+    }
+    const dx = current.x - previous.x;
+    const dy = current.y - previous.y;
+    setView((value) => ({ ...value, x: value.x + dx, y: value.y + dy }));
+  };
+  const onPointerEnd = (event) => {
+    pointers.current.delete(event.pointerId);
+    pinchDistance.current = void 0;
+  };
+  const zoomBy = (factor) => {
+    const current = viewRef.current;
+    const zoom = clampZoom(current.zoom * factor);
+    const ratio = zoom / current.zoom;
+    const cx0 = size.width / 2;
+    const cy0 = size.height / 2;
+    moveView({ zoom, x: cx0 - (cx0 - current.x) * ratio, y: cy0 - (cy0 - current.y) * ratio }, true);
+  };
+  const panBy = (dx, dy) => moveView({ ...viewRef.current, x: viewRef.current.x + dx, y: viewRef.current.y + dy }, true);
+  const toggleCluster = (clusterId, focusAfter) => {
+    const isExpanded = expanded.has(clusterId);
+    pendingFocus.current = focusAfter;
+    if (expandedClusterIds === void 0) {
+      setLocalExpanded((previous) => {
+        const next = new Set(previous);
+        if (isExpanded) next.delete(clusterId);
+        else next.add(clusterId);
+        return next;
+      });
+    }
+    onToggleCluster?.(clusterId, !isExpanded);
+  };
+  const activate = (item) => {
+    if (item.cluster) {
+      toggleCluster(item.cluster.id, item.cluster.members[0]?.id ?? item.id);
+      return;
+    }
+    if (item.node) {
+      setLocalFocus(item.id);
+      onFocusChange?.(item.id);
+      onSelect?.(item.node);
+    }
+  };
+  const onItemKeyDown = (event, item) => {
+    if (NAV_KEYS.includes(event.key)) {
+      event.preventDefault();
+      const next = layeredNeighbor(layout, item.id, event.key);
+      if (next !== void 0) focusItem(next);
+    }
+  };
+  const labelFor = (item) => {
+    if (item.cluster) {
+      const cluster = item.cluster;
+      return `${labels.cluster(cluster.members.length, cluster.type, cluster.edgeLabel)}, ${labels.expandCluster}`;
+    }
+    const node = item.node;
+    const conflict = conflictedNodeIds.has(node.id) ? labels.conflict : void 0;
+    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 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;
+  };
+  const viewportStyle = height !== void 0 ? { "--uix-relationship-graph-height": height } : {};
+  const stageStyle = {
+    width: layout.width,
+    height: layout.height,
+    transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-relationship-graph", "uix-relationship-graph--layered", density === "compact" && "uix-relationship-graph--compact", className), "aria-label": labels.graph, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM, children: labels.zoomIn }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM, children: labels.zoomOut }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => moveView(initialView(layout, size), true), children: labels.reset }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
+      /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(view.zoom * 100)) })
+    ] }),
+    bounded.omittedNodeCount > 0 && /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
+    /* @__PURE__ */ jsx("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        className: "uix-relationship-graph__viewport",
+        style: viewportStyle,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: onPointerEnd,
+        onPointerCancel: onPointerEnd,
+        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}`
+            );
+          })
+        ] })
+      }
+    ),
+    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
+      }
+    )
+  ] });
+}
+export {
+  LayeredRelationshipGraph
+};

package/dist/components/RelationshipGraphList.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { RelationshipGraphNode, RelationshipGraphEdge } from '../relationship-graph-model.js';
+import { RelationshipGraphLabels } from './RelationshipGraph.js';
+
+/** The list every RelationshipGraph mode pairs with its picture (internal). */
+declare function EquivalentRelationshipList({ nodes, edges, selectedId, labels, onSelect, onExpandNeighbors, onOpenDetails, }: {
+    nodes: RelationshipGraphNode[];
+    edges: RelationshipGraphEdge[];
+    selectedId: string | undefined;
+    labels: RelationshipGraphLabels;
+    onSelect: (id: string) => void;
+    onExpandNeighbors: ((node: RelationshipGraphNode) => void) | undefined;
+    onOpenDetails: ((node: RelationshipGraphNode) => void) | undefined;
+}): react.JSX.Element;
+
+export { EquivalentRelationshipList };

package/dist/components/RelationshipGraphList.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { relationshipNeighbors } from "../relationship-graph-model.js";
+function EquivalentRelationshipList({
+  nodes,
+  edges,
+  selectedId,
+  labels,
+  onSelect,
+  onExpandNeighbors,
+  onOpenDetails
+}) {
+  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);
+      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("span", { className: "uix-relationship-graph__list-actions", children: [
+          onExpandNeighbors && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onExpandNeighbors(node), children: labels.expandNeighbors }),
+          onOpenDetails && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onOpenDetails(node), children: labels.openDetails })
+        ] })
+      ] }, node.id);
+    }) })
+  ] });
+}
+export {
+  EquivalentRelationshipList
+};