@tensor_1/react 2.44.1 → 2.45.0

package/dist/index.cjs

@@ -2358,8 +2358,13 @@ var glyphCircleCheck = [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["pat
 var glyphCircleQuestionMark = [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }], ["path", { "d": "M12 17h.01" }]];
 var glyphGripVertical = [["circle", { "cx": "9", "cy": "12", "r": "1" }], ["circle", { "cx": "9", "cy": "5", "r": "1" }], ["circle", { "cx": "9", "cy": "19", "r": "1" }], ["circle", { "cx": "15", "cy": "12", "r": "1" }], ["circle", { "cx": "15", "cy": "5", "r": "1" }], ["circle", { "cx": "15", "cy": "19", "r": "1" }]];
 var glyphMaximize2 = [["path", { "d": "M15 3h6v6" }], ["path", { "d": "m21 3-7 7" }], ["path", { "d": "m3 21 7-7" }], ["path", { "d": "M9 21H3v-6" }]];
+var glyphMinimize2 = [["path", { "d": "m14 10 7-7" }], ["path", { "d": "M20 10h-6V4" }], ["path", { "d": "m3 21 7-7" }], ["path", { "d": "M4 14h6v6" }]];
+var glyphMinus = [["path", { "d": "M5 12h14" }]];
 var glyphOctagonAlert = [["path", { "d": "M12 16h.01" }], ["path", { "d": "M12 8v4" }], ["path", { "d": "M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z" }]];
 var glyphPencil = [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]];
+var glyphPlus = [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]];
+var glyphRotateCcw = [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]];
+var glyphScan = [["path", { "d": "M3 7V5a2 2 0 0 1 2-2h2" }], ["path", { "d": "M17 3h2a2 2 0 0 1 2 2v2" }], ["path", { "d": "M21 17v2a2 2 0 0 1-2 2h-2" }], ["path", { "d": "M7 21H5a2 2 0 0 1-2-2v-2" }]];
 var glyphTriangleAlert = [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]];
 var glyphX = [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]];
 
@@ -2373,8 +2378,13 @@ var CircleCheckIcon = /* @__PURE__ */ createIcon("CircleCheckIcon", glyphCircleC
 var CircleQuestionMarkIcon = /* @__PURE__ */ createIcon("CircleQuestionMarkIcon", glyphCircleQuestionMark);
 var GripVerticalIcon = /* @__PURE__ */ createIcon("GripVerticalIcon", glyphGripVertical);
 var Maximize2Icon = /* @__PURE__ */ createIcon("Maximize2Icon", glyphMaximize2);
+var Minimize2Icon = /* @__PURE__ */ createIcon("Minimize2Icon", glyphMinimize2);
+var MinusIcon = /* @__PURE__ */ createIcon("MinusIcon", glyphMinus);
 var OctagonAlertIcon = /* @__PURE__ */ createIcon("OctagonAlertIcon", glyphOctagonAlert);
 var PencilIcon = /* @__PURE__ */ createIcon("PencilIcon", glyphPencil);
+var PlusIcon = /* @__PURE__ */ createIcon("PlusIcon", glyphPlus);
+var RotateCcwIcon = /* @__PURE__ */ createIcon("RotateCcwIcon", glyphRotateCcw);
+var ScanIcon = /* @__PURE__ */ createIcon("ScanIcon", glyphScan);
 var TriangleAlertIcon = /* @__PURE__ */ createIcon("TriangleAlertIcon", glyphTriangleAlert);
 var XIcon = /* @__PURE__ */ createIcon("XIcon", glyphX);
 
@@ -9949,8 +9959,8 @@ var idRef = (chartId, nodeId, part) => {
 };
 var isExpandable = (node, known, lazy) => known ? known.length > 0 : lazy && (node.reportCount ?? 0) > 0;
 var ChevronIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M2 4l4 4 4-4" }) });
-var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M8 3v10M3 8h10" }) });
-var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M3 8h10" }) });
+var PlusIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M8 3v10M3 8h10" }) });
+var MinusIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M3 8h10" }) });
 var FitIcon = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" }) });
 var useIsoLayoutEffect = typeof window === "undefined" ? import_react64.useEffect : import_react64.useLayoutEffect;
 var Ring2 = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-spinner uix-spinner--sm", "aria-hidden": "true" });
@@ -10495,7 +10505,7 @@ function OrgChart({
               zoomTo(orgChartZoomStep(zoom, -1));
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(MinusIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(MinusIcon2, {})
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
@@ -10529,7 +10539,7 @@ function OrgChart({
               zoomTo(orgChartZoomStep(zoom, 1));
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(PlusIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(PlusIcon2, {})
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
@@ -15527,6 +15537,7 @@ var READABLE_ZOOM = 0.75;
 var ZOOM_STEP = 1.2;
 var PAN_STEP = 64;
 var FOCUS_MARGIN = 24;
+var HINT_MS = 1600;
 var NAV_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
 var clampZoom2 = (zoom) => Math.min(MAX_ZOOM2, Math.max(MIN_ZOOM2, zoom));
 function initialView(layout, size) {
@@ -15570,9 +15581,13 @@ function LayeredRelationshipGraph({
   showList = true,
   height,
   focusId,
-  onFocusChange
+  onFocusChange,
+  controls = "full",
+  initialView: initialViewMode = "readable"
 }) {
   const hintId = (0, import_react74.useId)();
+  const viewportHintId = (0, import_react74.useId)();
+  const compact = controls === "compact";
   const bounded = (0, import_react74.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
   const [localExpanded, setLocalExpanded] = (0, import_react74.useState)(EMPTY_IDS2);
   const expanded = expandedClusterIds ?? localExpanded;
@@ -15586,19 +15601,33 @@ function LayeredRelationshipGraph({
     [bounded, rootId, clusterThreshold, expanded, density]
   );
   const itemById = (0, import_react74.useMemo)(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
+  const startView = (0, import_react74.useCallback)(
+    (forLayout, forSize) => initialViewMode === "fit" ? fitView(forLayout, forSize) : initialView(forLayout, forSize),
+    [initialViewMode]
+  );
   const viewportRef = (0, import_react74.useRef)(null);
   const itemRefs = (0, import_react74.useRef)(/* @__PURE__ */ new Map());
+  const fullscreenButtonRef = (0, import_react74.useRef)(null);
   const [size, setSize] = (0, import_react74.useState)({ width: 0, height: 0 });
   const [view, setView] = (0, import_react74.useState)({ x: 0, y: 0, zoom: 1 });
   const [animate, setAnimate] = (0, import_react74.useState)(false);
   const [localFocus, setLocalFocus] = (0, import_react74.useState)(void 0);
   const [hoverId, setHoverId] = (0, import_react74.useState)(void 0);
+  const [fullscreen, setFullscreen] = (0, import_react74.useState)(false);
+  const [wheelHint, setWheelHint] = (0, import_react74.useState)(false);
   const viewRef = (0, import_react74.useRef)(view);
   viewRef.current = view;
   const layoutRef = (0, import_react74.useRef)(layout);
   layoutRef.current = layout;
+  const fullscreenRef = (0, import_react74.useRef)(fullscreen);
+  fullscreenRef.current = fullscreen;
+  const compactRef = (0, import_react74.useRef)(compact);
+  compactRef.current = compact;
   const pendingFocus = (0, import_react74.useRef)(void 0);
   const initialisedFor = (0, import_react74.useRef)(void 0);
+  const refitOnResize = (0, import_react74.useRef)(false);
+  const hintTimer = (0, import_react74.useRef)(void 0);
+  const modifier = useKbdPlatform() === "mac" ? "\u2318" : "Ctrl";
   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;
@@ -15622,8 +15651,24 @@ function LayeredRelationshipGraph({
     const key = `${layout.rootId ?? ""}`;
     if (initialisedFor.current === key) return;
     initialisedFor.current = key;
-    setView(initialView(layout, size));
-  }, [layout, size]);
+    setView(startView(layout, size));
+  }, [layout, size, startView]);
+  (0, import_react74.useEffect)(() => {
+    if (!refitOnResize.current || size.width === 0) return;
+    refitOnResize.current = false;
+    setAnimate(false);
+    setView(startView(layoutRef.current, size));
+  }, [size, startView]);
+  (0, import_react74.useEffect)(() => {
+    if (!fullscreen) return;
+    const root = document.documentElement;
+    const previous = root.style.overflow;
+    root.style.overflow = "hidden";
+    return () => {
+      root.style.overflow = previous;
+    };
+  }, [fullscreen]);
+  (0, import_react74.useEffect)(() => () => clearTimeout(hintTimer.current), []);
   const moveView = (0, import_react74.useCallback)((next, smooth) => {
     setAnimate(smooth);
     setView(next);
@@ -15679,7 +15724,14 @@ function LayeredRelationshipGraph({
     const element = viewportRef.current;
     if (!element) return;
     const onWheel = (event) => {
-      if (!event.ctrlKey && !event.metaKey) return;
+      if (!event.ctrlKey && !event.metaKey && !fullscreenRef.current) {
+        if (compactRef.current) {
+          setWheelHint(true);
+          clearTimeout(hintTimer.current);
+          hintTimer.current = setTimeout(() => setWheelHint(false), HINT_MS);
+        }
+        return;
+      }
       event.preventDefault();
       const rect = element.getBoundingClientRect();
       const px = event.clientX - rect.left;
@@ -15740,6 +15792,27 @@ function LayeredRelationshipGraph({
     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 resetView = () => moveView(startView(layout, size), true);
+  const toggleFullscreen = () => {
+    const next = !fullscreenRef.current;
+    refitOnResize.current = true;
+    setFullscreen(next);
+    requestAnimationFrame(() => (next ? viewportRef.current : fullscreenButtonRef.current)?.focus({ preventScroll: true }));
+  };
+  const onViewportKeyDown = (event) => {
+    if (!compact || event.altKey || event.ctrlKey || event.metaKey) return;
+    const onMap = event.target === event.currentTarget;
+    if (onMap && event.key === "ArrowLeft") panBy(PAN_STEP, 0);
+    else if (onMap && event.key === "ArrowRight") panBy(-PAN_STEP, 0);
+    else if (onMap && event.key === "ArrowUp") panBy(0, PAN_STEP);
+    else if (onMap && event.key === "ArrowDown") panBy(0, -PAN_STEP);
+    else if (event.key === "+" || event.key === "=") zoomBy(ZOOM_STEP);
+    else if (event.key === "-" || event.key === "_") zoomBy(1 / ZOOM_STEP);
+    else if (event.key === "0") resetView();
+    else if (event.key === "Escape" && fullscreen) toggleFullscreen();
+    else return;
+    event.preventDefault();
+  };
   const toggleCluster = (clusterId, focusAfter) => {
     const isExpanded = expanded.has(clusterId);
     pendingFocus.current = focusAfter;
@@ -15792,144 +15865,189 @@ function LayeredRelationshipGraph({
     height: layout.height,
     transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("section", { className: cx("uix-relationship-graph", "uix-relationship-graph--layered", density === "compact" && "uix-relationship-graph--compact", className), "aria-label": labels.graph, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM2, children: labels.zoomIn }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM2, children: labels.zoomOut }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => moveView(initialView(layout, size), true), children: labels.reset }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
-      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(view.zoom * 100)) })
-    ] }),
-    bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-      "div",
-      {
-        ref: viewportRef,
-        className: "uix-relationship-graph__viewport",
-        style: viewportStyle,
-        onPointerDown,
-        onPointerMove,
-        onPointerUp: onPointerEnd,
-        onPointerCancel: onPointerEnd,
-        children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.jsx)("path", { d: edge.path }),
-                  edge.arrow !== "none" && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
-                  showLabel(edge) && /* @__PURE__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.jsx)(
-            "div",
-            {
-              className: "uix-relationship-graph__column",
-              "aria-hidden": "true",
-              style: { left: column.x, width: layout.nodeWidth },
-              children: labels.column(column.depth, column.count)
+  const zoomPercent = Math.round(view.zoom * 100);
+  const control = (label, icon, onClick, { disabled = false, keys, ref } = {}) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Tooltip, { label, placement: "top", ...keys ? { shortcut: keys } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { ref, type: "button", className: "uix-relationship-graph__control", "aria-label": label, onClick, disabled, children: icon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+    "section",
+    {
+      className: cx(
+        "uix-relationship-graph",
+        "uix-relationship-graph--layered",
+        compact && "uix-relationship-graph--map",
+        fullscreen && "uix-relationship-graph--fullscreen",
+        density === "compact" && "uix-relationship-graph--compact",
+        className
+      ),
+      "aria-label": labels.graph,
+      children: [
+        controls === "full" && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM2, children: labels.zoomIn }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM2, children: labels.zoomOut }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: resetView, children: labels.reset }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(zoomPercent) })
+        ] }),
+        bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
+        compact && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { id: viewportHintId, className: "uix-visually-hidden", children: labels.viewportKeyboardHint }),
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+          "div",
+          {
+            ref: viewportRef,
+            className: "uix-relationship-graph__viewport",
+            style: viewportStyle,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: onPointerEnd,
+            onPointerCancel: onPointerEnd,
+            ...compact ? {
+              tabIndex: 0,
+              role: "group",
+              "aria-label": labels.graph,
+              "aria-describedby": viewportHintId,
+              onKeyDown: onViewportKeyDown
+            } : {},
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.jsx)("path", { d: edge.path }),
+                        edge.arrow !== "none" && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
+                        showLabel(edge) && /* @__PURE__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
+                  ] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
+                    (item.node.type || item.node.description) && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
+                  ] });
+                  return /* @__PURE__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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}`
+                  );
+                })
+              ] }),
+              compact && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "uix-relationship-graph__hint", "aria-hidden": "true", children: labels.navigationHint(modifier) }),
+                wheelHint && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "uix-relationship-graph__toast", role: "status", children: labels.navigationHint(modifier) }),
+                /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-relationship-graph__controls", role: "group", "aria-label": labels.controls, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__zoom-level", "aria-live": "polite", children: labels.zoomLevel(zoomPercent) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-relationship-graph__control-cluster", children: [
+                    control(labels.zoomIn, /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(PlusIcon, { "aria-hidden": "true" }), () => zoomBy(ZOOM_STEP), { disabled: view.zoom >= MAX_ZOOM2, keys: ["+"] }),
+                    control(labels.zoomOut, /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(MinusIcon, { "aria-hidden": "true" }), () => zoomBy(1 / ZOOM_STEP), { disabled: view.zoom <= MIN_ZOOM2, keys: ["\u2212"] }),
+                    control(labels.fit, /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ScanIcon, { "aria-hidden": "true" }), () => moveView(fitView(layout, size), true)),
+                    control(labels.reset, /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(RotateCcwIcon, { "aria-hidden": "true" }), resetView, { keys: ["0"] }),
+                    control(
+                      fullscreen ? labels.exitFullscreen : labels.fullscreen,
+                      fullscreen ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Minimize2Icon, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Maximize2Icon, { "aria-hidden": "true" }),
+                      toggleFullscreen,
+                      { ref: fullscreenButtonRef, ...fullscreen ? { keys: ["Esc"] } : {} }
+                    )
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
+        showList && /* @__PURE__ */ (0, import_jsx_runtime100.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);
             },
-            column.depth
-          )),
-          /* @__PURE__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
-              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
-            ] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
-              (item.node.type || item.node.description) && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
-            ] });
-            return /* @__PURE__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.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__ */ (0, import_jsx_runtime100.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
-    showList && /* @__PURE__ */ (0, import_jsx_runtime100.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
-      }
-    )
-  ] });
+            onExpandNeighbors,
+            onOpenDetails
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/RelationshipGraph.tsx
@@ -15953,6 +16071,10 @@ var DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
   fit: "Fit",
   reset: "Reset view",
   zoomLevel: (percent) => `Zoom ${percent}%`,
+  fullscreen: "Full screen",
+  exitFullscreen: "Exit full screen",
+  navigationHint: (modifier) => `Drag to move \xB7 ${modifier} + scroll to zoom`,
+  viewportKeyboardHint: "Arrow keys move the map, + and \u2212 zoom, 0 resets the view, Escape leaves full screen.",
   bounded: (shown, omitted) => `Showing ${shown} nodes; ${omitted} outside this bounded neighborhood.`,
   graphSummary: (nodes, edges) => `Graph with ${nodes} nodes and ${edges} relationships`,
   relationship: "Relationship",

package/dist/index.d.cts

@@ -6053,6 +6053,13 @@ interface RelationshipGraphLabels {
     fit: string;
     reset: string;
     zoomLevel: (percent: number) => string;
+    /** Layered `controls="compact"`: the full-screen toggle, entering and leaving. */
+    fullscreen: string;
+    exitFullscreen: string;
+    /** Layered `controls="compact"`: how to move the map; `modifier` is "Ctrl" or "⌘" for the viewer's platform. */
+    navigationHint: (modifier: string) => string;
+    /** Layered `controls="compact"`: the map's keyboard, read when the map itself has focus. */
+    viewportKeyboardHint: string;
     bounded: (shown: number, omitted: number) => string;
     graphSummary: (nodes: number, edges: number) => string;
     relationship: string;
@@ -6122,6 +6129,21 @@ interface RelationshipGraphProps {
     showList?: boolean;
     /** Layered: CSS length for the viewport height. */
     height?: string;
+    /**
+     * Layered: the view controls. `full` (default) is the labelled toolbar above the map.
+     * `compact` is a map-style icon cluster in the map's corner (+, −, fit, reset, full screen,
+     * each with a tooltip) with the zoom level beside it; the map itself takes keyboard focus
+     * (arrows pan, + and − zoom, 0 resets, Escape leaves full screen), a plain wheel scrolls the
+     * page and says how to zoom, and Ctrl/⌘ + wheel or a pinch zooms (a plain wheel too, in full
+     * screen). `none` draws no controls: drag, pinch and Ctrl/⌘ + wheel still work.
+     */
+    controls?: 'full' | 'compact' | 'none';
+    /**
+     * Layered: the first view, and the one Reset returns to. `readable` (default) fits the graph
+     * but never below 75 %, starting at the top-left when it does not fit (ADR-0003). `fit` shows
+     * every item on load, down to the minimum zoom.
+     */
+    initialView?: 'readable' | 'fit';
     /** Layered: controlled roving focus. */
     focusId?: string;
     onFocusChange?: (id: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.44.1",
+  "version": "2.45.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",