@tensor_1/react 2.44.1 → 2.45.0

package/README.md

@@ -192,6 +192,12 @@ Rules the component cannot enforce for you:
 - **Dimming is not a signal.** `dimmedNodeIds` must be accompanied by text that says what is dimmed and why.
 - **Localise everything.** Every visible and announced string comes from `labels`; the English defaults live in `DEFAULT_RELATIONSHIP_GRAPH_LABELS`.
 
+**Map controls (`controls`, `initialView`).** The default `controls="full"` is the labelled toolbar above the map. `controls="compact"` is the map convention: an icon cluster in the map's bottom-right corner (zoom in, zoom out, fit, reset, full screen, each with a tooltip) and the zoom level beside it; drag pans, Ctrl/⌘ + wheel or a pinch zooms around the pointer, and a plain wheel keeps scrolling the page and briefly says how to zoom. The map itself takes keyboard focus: arrow keys pan (on an item they still move between items), `+` and `−` zoom, `0` resets and Escape leaves full screen. Full screen covers the page (the page behind does not scroll) and there a plain wheel zooms. `controls="none"` draws nothing; drag, pinch and Ctrl/⌘ + wheel still work. `initialView="fit"` opens with every item in view (down to the 40 % minimum) instead of the 75 % readability floor, and Reset returns to it.
+
+```tsx
+<RelationshipGraph layout="layered" controls="compact" initialView="fit" height="clamp(24rem, 62vh, 44rem)" … />
+```
+
 Radial mode still shortens long labels to fit its ring, but every node carries its full label in a `<title>`, and the `viewBox` grows to contain every node, including nodes you position yourself. Use `layout="layered"` when the labels matter more than the ring.
 
 ### Conversations, save feedback and kept tabs

package/dist/components/RelationshipGraph.d.ts

@@ -26,6 +26,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;
@@ -95,6 +102,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/dist/components/RelationshipGraph.js

@@ -24,6 +24,10 @@ const 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/components/RelationshipGraphLayered.d.ts

@@ -3,6 +3,6 @@ import { ResolvedRelationshipGraphProps } from './RelationshipGraph.js';
 import '../relationship-graph-model.js';
 
 /** `RelationshipGraph layout="layered"` (ADR-0003). Internal — reached through RelationshipGraph. */
-declare function LayeredRelationshipGraph({ nodes, edges, selectedId, onSelect, onExpandNeighbors, onOpenDetails, maxNodes, density, highlightedNodeIds, conflictedNodeIds, highlightedEdgeIds, conflictedEdgeIds, legend, className, labels, rootId, renderNode, nodeAriaLabel, renderCluster, clusterThreshold, expandedClusterIds, onToggleCluster, dimmedNodeIds, edgeLabels, showList, height, focusId, onFocusChange, }: ResolvedRelationshipGraphProps): react.JSX.Element;
+declare function LayeredRelationshipGraph({ nodes, edges, selectedId, onSelect, onExpandNeighbors, onOpenDetails, maxNodes, density, highlightedNodeIds, conflictedNodeIds, highlightedEdgeIds, conflictedEdgeIds, legend, className, labels, rootId, renderNode, nodeAriaLabel, renderCluster, clusterThreshold, expandedClusterIds, onToggleCluster, dimmedNodeIds, edgeLabels, showList, height, focusId, onFocusChange, controls, initialView: initialViewMode, }: ResolvedRelationshipGraphProps): react.JSX.Element;
 
 export { LayeredRelationshipGraph };

package/dist/components/RelationshipGraphLayered.js

@@ -3,7 +3,10 @@ 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 { Maximize2Icon, Minimize2Icon, MinusIcon, PlusIcon, RotateCcwIcon, ScanIcon } from "../icons/components.js";
+import { useKbdPlatform } from "./Kbd.js";
 import { EquivalentRelationshipList } from "./RelationshipGraphList.js";
+import { Tooltip } from "./Tooltip.js";
 const EMPTY_IDS = /* @__PURE__ */ new Set();
 const MIN_ZOOM = 0.4;
 const MAX_ZOOM = 1.5;
@@ -11,6 +14,7 @@ const READABLE_ZOOM = 0.75;
 const ZOOM_STEP = 1.2;
 const PAN_STEP = 64;
 const FOCUS_MARGIN = 24;
+const HINT_MS = 1600;
 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) {
@@ -54,9 +58,13 @@ function LayeredRelationshipGraph({
   showList = true,
   height,
   focusId,
-  onFocusChange
+  onFocusChange,
+  controls = "full",
+  initialView: initialViewMode = "readable"
 }) {
   const hintId = useId();
+  const viewportHintId = useId();
+  const compact = controls === "compact";
   const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
   const [localExpanded, setLocalExpanded] = useState(EMPTY_IDS);
   const expanded = expandedClusterIds ?? localExpanded;
@@ -70,19 +78,33 @@ function LayeredRelationshipGraph({
     [bounded, rootId, clusterThreshold, expanded, density]
   );
   const itemById = useMemo(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
+  const startView = useCallback(
+    (forLayout, forSize) => initialViewMode === "fit" ? fitView(forLayout, forSize) : initialView(forLayout, forSize),
+    [initialViewMode]
+  );
   const viewportRef = useRef(null);
   const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const fullscreenButtonRef = 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 [fullscreen, setFullscreen] = useState(false);
+  const [wheelHint, setWheelHint] = useState(false);
   const viewRef = useRef(view);
   viewRef.current = view;
   const layoutRef = useRef(layout);
   layoutRef.current = layout;
+  const fullscreenRef = useRef(fullscreen);
+  fullscreenRef.current = fullscreen;
+  const compactRef = useRef(compact);
+  compactRef.current = compact;
   const pendingFocus = useRef(void 0);
   const initialisedFor = useRef(void 0);
+  const refitOnResize = useRef(false);
+  const hintTimer = 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;
@@ -106,8 +128,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]);
+  useEffect(() => {
+    if (!refitOnResize.current || size.width === 0) return;
+    refitOnResize.current = false;
+    setAnimate(false);
+    setView(startView(layoutRef.current, size));
+  }, [size, startView]);
+  useEffect(() => {
+    if (!fullscreen) return;
+    const root = document.documentElement;
+    const previous = root.style.overflow;
+    root.style.overflow = "hidden";
+    return () => {
+      root.style.overflow = previous;
+    };
+  }, [fullscreen]);
+  useEffect(() => () => clearTimeout(hintTimer.current), []);
   const moveView = useCallback((next, smooth) => {
     setAnimate(smooth);
     setView(next);
@@ -163,7 +201,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;
@@ -224,6 +269,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;
@@ -276,144 +342,189 @@ function LayeredRelationshipGraph({
     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)
+  const zoomPercent = Math.round(view.zoom * 100);
+  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",
+    {
+      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__ */ 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: resetView, 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(zoomPercent) })
+        ] }),
+        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 }),
+        compact && /* @__PURE__ */ jsx("p", { id: viewportHintId, className: "uix-visually-hidden", children: labels.viewportKeyboardHint }),
+        /* @__PURE__ */ 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__ */ 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}`
+                  );
+                })
+              ] }),
+              compact && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__hint", "aria-hidden": "true", children: labels.navigationHint(modifier) }),
+                wheelHint && /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__toast", role: "status", 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) }),
+                  /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__control-cluster", children: [
+                    control(labels.zoomIn, /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" }), () => zoomBy(ZOOM_STEP), { disabled: view.zoom >= MAX_ZOOM, keys: ["+"] }),
+                    control(labels.zoomOut, /* @__PURE__ */ jsx(MinusIcon, { "aria-hidden": "true" }), () => zoomBy(1 / ZOOM_STEP), { disabled: view.zoom <= MIN_ZOOM, keys: ["\u2212"] }),
+                    control(labels.fit, /* @__PURE__ */ jsx(ScanIcon, { "aria-hidden": "true" }), () => moveView(fitView(layout, size), true)),
+                    control(labels.reset, /* @__PURE__ */ jsx(RotateCcwIcon, { "aria-hidden": "true" }), resetView, { keys: ["0"] }),
+                    control(
+                      fullscreen ? labels.exitFullscreen : labels.fullscreen,
+                      fullscreen ? /* @__PURE__ */ jsx(Minimize2Icon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Maximize2Icon, { "aria-hidden": "true" }),
+                      toggleFullscreen,
+                      { ref: fullscreenButtonRef, ...fullscreen ? { keys: ["Esc"] } : {} }
+                    )
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        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);
             },
-            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
-      }
-    )
-  ] });
+            onExpandNeighbors,
+            onOpenDetails
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   LayeredRelationshipGraph

package/dist/icons/components.d.ts

@@ -175,6 +175,7 @@ declare const Rows3Icon: UixIcon;
 declare const Rows4Icon: UixIcon;
 declare const SaveIcon: UixIcon;
 declare const ScaleIcon: UixIcon;
+declare const ScanIcon: UixIcon;
 declare const ScanBarcodeIcon: UixIcon;
 declare const ScanSearchIcon: UixIcon;
 declare const ScrollTextIcon: UixIcon;
@@ -254,4 +255,4 @@ declare const PlayCircleIcon: UixIcon;
 declare const SmileIcon: UixIcon;
 declare const XCircleIcon: UixIcon;
 
-export { AccessibilityIcon, ActivityIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowLeftRightIcon, ArrowRightIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpRightIcon, AwardIcon, BadgeCheckIcon, BanknoteIcon, BarChart3Icon, BellIcon, BellOffIcon, BellRingIcon, BookOpenIcon, BookmarkIcon, BotIcon, BoxesIcon, BriefcaseIcon, Building2Icon, CalendarCheckIcon, CalendarClockIcon, CalendarDaysIcon, CalendarIcon, CalendarOffIcon, CalendarXIcon, CameraIcon, ChartColumnIcon, CheckCheckIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleAlertIcon, CircleCheckBigIcon, CircleCheckIcon, CircleDotIcon, CircleHelpIcon, CircleIcon, CirclePauseIcon, CirclePlayIcon, CircleQuestionMarkIcon, CircleXIcon, ClipboardCheckIcon, ClipboardListIcon, ClockIcon, CloudIcon, CloudOffIcon, CoinsIcon, Columns3Icon, CommandIcon, ComponentIcon, CopyIcon, CornerUpLeftIcon, CreditCardIcon, DatabaseBackupIcon, DatabaseIcon, DoorOpenIcon, DownloadIcon, EllipsisIcon, EllipsisVerticalIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FaceSlightlySmilingIcon, FileArchiveIcon, FileBarChartIcon, FileChartColumnIncreasingIcon, FileCheck2Icon, FileCheckCornerIcon, FileCheckIcon, FileDownIcon, FileIcon, FileImageIcon, FileInputIcon, FileQuestionIcon, FileQuestionMarkIcon, FileSearchIcon, FileSpreadsheetIcon, FileTextIcon, FileUpIcon, FilterIcon, FlagIcon, FolderCheckIcon, FolderKanbanIcon, FolderTreeIcon, FunnelIcon, GanttChartSquareIcon, GaugeIcon, GitBranchIcon, GitBranchPlusIcon, GitCompareArrowsIcon, GitMergeIcon, GitPullRequestArrowIcon, GitPullRequestClosedIcon, GlobeIcon, GraduationCapIcon, Grid3x3Icon, GripVerticalIcon, HandHeartIcon, HeartIcon, HeartPulseIcon, HexagonIcon, HistoryIcon, HourglassIcon, HouseIcon, IdCardIcon, ImageIcon, InboxIcon, InfoIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LaptopIcon, LayersIcon, LayoutDashboardIcon, LayoutTemplateIcon, LibraryIcon, LifeBuoyIcon, LightbulbIcon, Link2Icon, Link2OffIcon, LinkIcon, ListChecksIcon, ListFilterIcon, ListTreeIcon, Loader2Icon, LoaderCircleIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapPinIcon, Maximize2Icon, MegaphoneIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, Minimize2Icon, MinusIcon, MonitorCogIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, NewspaperIcon, NotebookPenIcon, OctagonAlertIcon, PackageIcon, PackageOpenIcon, PackageSearchIcon, PaletteIcon, PanelLeftIcon, PaperclipIcon, PartyPopperIcon, PauseCircleIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PlaneIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusIcon, PrinterIcon, QrCodeIcon, RadioIcon, RadioTowerIcon, ReceiptIcon, RefreshCwIcon, RotateCcwClockIcon, RotateCcwIcon, RouteIcon, Rows2Icon, Rows3Icon, Rows4Icon, SaveIcon, ScaleIcon, ScanBarcodeIcon, ScanSearchIcon, ScrollTextIcon, SearchIcon, SearchXIcon, SendIcon, ServerIcon, Settings2Icon, SettingsIcon, ShapesIcon, Share2Icon, ShieldAlertIcon, ShieldCheckIcon, ShieldHalfIcon, ShieldIcon, ShieldOffIcon, ShieldXIcon, ShoppingCartIcon, SignpostIcon, SirenIcon, SlidersHorizontalIcon, SmileIcon, SparklesIcon, SquareChartGanttIcon, SquareIcon, StampIcon, StarIcon, StarOffIcon, StoreIcon, SunIcon, TagIcon, TagsIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, TimerIcon, TimerOffIcon, Trash2Icon, TrendingDownIcon, TrendingUpIcon, TriangleAlertIcon, UnlinkIcon, UploadIcon, UserCheckIcon, UserCogIcon, UserIcon, UserPlusIcon, UserRoundIcon, UserXIcon, UsersIcon, UsersRoundIcon, WalletIcon, WaypointsIcon, WebhookIcon, WifiIcon, WifiOffIcon, WorkflowIcon, WrenchIcon, XCircleIcon, XIcon, ZapIcon };
+export { AccessibilityIcon, ActivityIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowLeftRightIcon, ArrowRightIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpRightIcon, AwardIcon, BadgeCheckIcon, BanknoteIcon, BarChart3Icon, BellIcon, BellOffIcon, BellRingIcon, BookOpenIcon, BookmarkIcon, BotIcon, BoxesIcon, BriefcaseIcon, Building2Icon, CalendarCheckIcon, CalendarClockIcon, CalendarDaysIcon, CalendarIcon, CalendarOffIcon, CalendarXIcon, CameraIcon, ChartColumnIcon, CheckCheckIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleAlertIcon, CircleCheckBigIcon, CircleCheckIcon, CircleDotIcon, CircleHelpIcon, CircleIcon, CirclePauseIcon, CirclePlayIcon, CircleQuestionMarkIcon, CircleXIcon, ClipboardCheckIcon, ClipboardListIcon, ClockIcon, CloudIcon, CloudOffIcon, CoinsIcon, Columns3Icon, CommandIcon, ComponentIcon, CopyIcon, CornerUpLeftIcon, CreditCardIcon, DatabaseBackupIcon, DatabaseIcon, DoorOpenIcon, DownloadIcon, EllipsisIcon, EllipsisVerticalIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FaceSlightlySmilingIcon, FileArchiveIcon, FileBarChartIcon, FileChartColumnIncreasingIcon, FileCheck2Icon, FileCheckCornerIcon, FileCheckIcon, FileDownIcon, FileIcon, FileImageIcon, FileInputIcon, FileQuestionIcon, FileQuestionMarkIcon, FileSearchIcon, FileSpreadsheetIcon, FileTextIcon, FileUpIcon, FilterIcon, FlagIcon, FolderCheckIcon, FolderKanbanIcon, FolderTreeIcon, FunnelIcon, GanttChartSquareIcon, GaugeIcon, GitBranchIcon, GitBranchPlusIcon, GitCompareArrowsIcon, GitMergeIcon, GitPullRequestArrowIcon, GitPullRequestClosedIcon, GlobeIcon, GraduationCapIcon, Grid3x3Icon, GripVerticalIcon, HandHeartIcon, HeartIcon, HeartPulseIcon, HexagonIcon, HistoryIcon, HourglassIcon, HouseIcon, IdCardIcon, ImageIcon, InboxIcon, InfoIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LaptopIcon, LayersIcon, LayoutDashboardIcon, LayoutTemplateIcon, LibraryIcon, LifeBuoyIcon, LightbulbIcon, Link2Icon, Link2OffIcon, LinkIcon, ListChecksIcon, ListFilterIcon, ListTreeIcon, Loader2Icon, LoaderCircleIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapPinIcon, Maximize2Icon, MegaphoneIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, Minimize2Icon, MinusIcon, MonitorCogIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, NewspaperIcon, NotebookPenIcon, OctagonAlertIcon, PackageIcon, PackageOpenIcon, PackageSearchIcon, PaletteIcon, PanelLeftIcon, PaperclipIcon, PartyPopperIcon, PauseCircleIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PlaneIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusIcon, PrinterIcon, QrCodeIcon, RadioIcon, RadioTowerIcon, ReceiptIcon, RefreshCwIcon, RotateCcwClockIcon, RotateCcwIcon, RouteIcon, Rows2Icon, Rows3Icon, Rows4Icon, SaveIcon, ScaleIcon, ScanBarcodeIcon, ScanIcon, ScanSearchIcon, ScrollTextIcon, SearchIcon, SearchXIcon, SendIcon, ServerIcon, Settings2Icon, SettingsIcon, ShapesIcon, Share2Icon, ShieldAlertIcon, ShieldCheckIcon, ShieldHalfIcon, ShieldIcon, ShieldOffIcon, ShieldXIcon, ShoppingCartIcon, SignpostIcon, SirenIcon, SlidersHorizontalIcon, SmileIcon, SparklesIcon, SquareChartGanttIcon, SquareIcon, StampIcon, StarIcon, StarOffIcon, StoreIcon, SunIcon, TagIcon, TagsIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, TimerIcon, TimerOffIcon, Trash2Icon, TrendingDownIcon, TrendingUpIcon, TriangleAlertIcon, UnlinkIcon, UploadIcon, UserCheckIcon, UserCogIcon, UserIcon, UserPlusIcon, UserRoundIcon, UserXIcon, UsersIcon, UsersRoundIcon, WalletIcon, WaypointsIcon, WebhookIcon, WifiIcon, WifiOffIcon, WorkflowIcon, WrenchIcon, XCircleIcon, XIcon, ZapIcon };

package/dist/icons/components.js

@@ -174,6 +174,7 @@ const Rows3Icon = /* @__PURE__ */ createIcon("Rows3Icon", g.glyphRows3);
 const Rows4Icon = /* @__PURE__ */ createIcon("Rows4Icon", g.glyphRows4);
 const SaveIcon = /* @__PURE__ */ createIcon("SaveIcon", g.glyphSave);
 const ScaleIcon = /* @__PURE__ */ createIcon("ScaleIcon", g.glyphScale);
+const ScanIcon = /* @__PURE__ */ createIcon("ScanIcon", g.glyphScan);
 const ScanBarcodeIcon = /* @__PURE__ */ createIcon("ScanBarcodeIcon", g.glyphScanBarcode);
 const ScanSearchIcon = /* @__PURE__ */ createIcon("ScanSearchIcon", g.glyphScanSearch);
 const ScrollTextIcon = /* @__PURE__ */ createIcon("ScrollTextIcon", g.glyphScrollText);
@@ -445,6 +446,7 @@ export {
   SaveIcon,
   ScaleIcon,
   ScanBarcodeIcon,
+  ScanIcon,
   ScanSearchIcon,
   ScrollTextIcon,
   SearchIcon,

package/dist/icons/glyphs.d.ts

@@ -175,6 +175,7 @@ declare const glyphRows3: IconNode;
 declare const glyphRows4: IconNode;
 declare const glyphSave: IconNode;
 declare const glyphScale: IconNode;
+declare const glyphScan: IconNode;
 declare const glyphScanBarcode: IconNode;
 declare const glyphScanSearch: IconNode;
 declare const glyphScrollText: IconNode;
@@ -410,6 +411,7 @@ declare const ICON_GLYPHS: {
     readonly 'rows-4': IconNode;
     readonly save: IconNode;
     readonly scale: IconNode;
+    readonly scan: IconNode;
     readonly 'scan-barcode': IconNode;
     readonly 'scan-search': IconNode;
     readonly 'scroll-text': IconNode;
@@ -473,4 +475,4 @@ declare const ICON_GLYPHS: {
 /** A glyph name for `<Icon name>`. */
 type IconName = keyof typeof ICON_GLYPHS;
 
-export { ICON_GLYPHS, type IconName, glyphAccessibility, glyphActivity, glyphArchive, glyphArrowDown, glyphArrowLeft, glyphArrowLeftRight, glyphArrowRight, glyphArrowUp, glyphArrowUpDown, glyphArrowUpRight, glyphAward, glyphBadgeCheck, glyphBanknote, glyphBell, glyphBellOff, glyphBellRing, glyphBookOpen, glyphBookmark, glyphBot, glyphBoxes, glyphBriefcase, glyphBuilding2, glyphCalendar, glyphCalendarCheck, glyphCalendarClock, glyphCalendarDays, glyphCalendarOff, glyphCalendarX, glyphCamera, glyphChartColumn, glyphCheck, glyphCheckCheck, glyphChevronDown, glyphChevronLeft, glyphChevronRight, glyphChevronUp, glyphChevronsDownUp, glyphChevronsLeft, glyphChevronsRight, glyphChevronsUpDown, glyphCircle, glyphCircleAlert, glyphCircleCheck, glyphCircleCheckBig, glyphCircleDot, glyphCirclePause, glyphCirclePlay, glyphCircleQuestionMark, glyphCircleX, glyphClipboardCheck, glyphClipboardList, glyphClock, glyphCloud, glyphCloudOff, glyphCoins, glyphColumns3, glyphCommand, glyphComponent, glyphCopy, glyphCornerUpLeft, glyphCreditCard, glyphDatabase, glyphDatabaseBackup, glyphDoorOpen, glyphDownload, glyphEllipsis, glyphEllipsisVertical, glyphExternalLink, glyphEye, glyphEyeOff, glyphFaceSlightlySmiling, glyphFile, glyphFileArchive, glyphFileChartColumnIncreasing, glyphFileCheck, glyphFileCheckCorner, glyphFileDown, glyphFileImage, glyphFileInput, glyphFileQuestionMark, glyphFileSearch, glyphFileSpreadsheet, glyphFileText, glyphFileUp, glyphFlag, glyphFolderCheck, glyphFolderKanban, glyphFolderTree, glyphFunnel, glyphGauge, glyphGitBranch, glyphGitBranchPlus, glyphGitCompareArrows, glyphGitMerge, glyphGitPullRequestArrow, glyphGitPullRequestClosed, glyphGlobe, glyphGraduationCap, glyphGrid3x3, glyphGripVertical, glyphHandHeart, glyphHeart, glyphHeartPulse, glyphHexagon, glyphHourglass, glyphHouse, glyphIdCard, glyphImage, glyphInbox, glyphInfo, glyphKey, glyphKeyRound, glyphLanguages, glyphLaptop, glyphLayers, glyphLayoutDashboard, glyphLayoutTemplate, glyphLibrary, glyphLifeBuoy, glyphLightbulb, glyphLink, glyphLink2, glyphLink2Off, glyphListChecks, glyphListFilter, glyphListTree, glyphLoaderCircle, glyphLock, glyphLogIn, glyphLogOut, glyphMail, glyphMapPin, glyphMaximize2, glyphMegaphone, glyphMenu, glyphMessageCircle, glyphMessageSquare, glyphMinimize2, glyphMinus, glyphMonitor, glyphMonitorCog, glyphMoon, glyphNewspaper, glyphNotebookPen, glyphOctagonAlert, glyphPackage, glyphPackageOpen, glyphPackageSearch, glyphPalette, glyphPanelLeft, glyphPaperclip, glyphPartyPopper, glyphPause, glyphPenLine, glyphPencil, glyphPhone, glyphPlane, glyphPlay, glyphPlug, glyphPlus, glyphPrinter, glyphQrCode, glyphRadio, glyphRadioTower, glyphReceipt, glyphRefreshCw, glyphRotateCcw, glyphRotateCcwClock, glyphRoute, glyphRows2, glyphRows3, glyphRows4, glyphSave, glyphScale, glyphScanBarcode, glyphScanSearch, glyphScrollText, glyphSearch, glyphSearchX, glyphSend, glyphServer, glyphSettings, glyphSettings2, glyphShapes, glyphShare2, glyphShield, glyphShieldAlert, glyphShieldCheck, glyphShieldHalf, glyphShieldOff, glyphShieldX, glyphShoppingCart, glyphSignpost, glyphSiren, glyphSlidersHorizontal, glyphSparkles, glyphSquare, glyphSquareChartGantt, glyphStamp, glyphStar, glyphStarOff, glyphStore, glyphSun, glyphTag, glyphTags, glyphThumbsDown, glyphThumbsUp, glyphTicket, glyphTimer, glyphTimerOff, glyphTrash2, glyphTrendingDown, glyphTrendingUp, glyphTriangleAlert, glyphUnlink, glyphUpload, glyphUser, glyphUserCheck, glyphUserCog, glyphUserPlus, glyphUserRound, glyphUserX, glyphUsers, glyphUsersRound, glyphWallet, glyphWaypoints, glyphWebhook, glyphWifi, glyphWifiOff, glyphWorkflow, glyphWrench, glyphX, glyphZap };
+export { ICON_GLYPHS, type IconName, glyphAccessibility, glyphActivity, glyphArchive, glyphArrowDown, glyphArrowLeft, glyphArrowLeftRight, glyphArrowRight, glyphArrowUp, glyphArrowUpDown, glyphArrowUpRight, glyphAward, glyphBadgeCheck, glyphBanknote, glyphBell, glyphBellOff, glyphBellRing, glyphBookOpen, glyphBookmark, glyphBot, glyphBoxes, glyphBriefcase, glyphBuilding2, glyphCalendar, glyphCalendarCheck, glyphCalendarClock, glyphCalendarDays, glyphCalendarOff, glyphCalendarX, glyphCamera, glyphChartColumn, glyphCheck, glyphCheckCheck, glyphChevronDown, glyphChevronLeft, glyphChevronRight, glyphChevronUp, glyphChevronsDownUp, glyphChevronsLeft, glyphChevronsRight, glyphChevronsUpDown, glyphCircle, glyphCircleAlert, glyphCircleCheck, glyphCircleCheckBig, glyphCircleDot, glyphCirclePause, glyphCirclePlay, glyphCircleQuestionMark, glyphCircleX, glyphClipboardCheck, glyphClipboardList, glyphClock, glyphCloud, glyphCloudOff, glyphCoins, glyphColumns3, glyphCommand, glyphComponent, glyphCopy, glyphCornerUpLeft, glyphCreditCard, glyphDatabase, glyphDatabaseBackup, glyphDoorOpen, glyphDownload, glyphEllipsis, glyphEllipsisVertical, glyphExternalLink, glyphEye, glyphEyeOff, glyphFaceSlightlySmiling, glyphFile, glyphFileArchive, glyphFileChartColumnIncreasing, glyphFileCheck, glyphFileCheckCorner, glyphFileDown, glyphFileImage, glyphFileInput, glyphFileQuestionMark, glyphFileSearch, glyphFileSpreadsheet, glyphFileText, glyphFileUp, glyphFlag, glyphFolderCheck, glyphFolderKanban, glyphFolderTree, glyphFunnel, glyphGauge, glyphGitBranch, glyphGitBranchPlus, glyphGitCompareArrows, glyphGitMerge, glyphGitPullRequestArrow, glyphGitPullRequestClosed, glyphGlobe, glyphGraduationCap, glyphGrid3x3, glyphGripVertical, glyphHandHeart, glyphHeart, glyphHeartPulse, glyphHexagon, glyphHourglass, glyphHouse, glyphIdCard, glyphImage, glyphInbox, glyphInfo, glyphKey, glyphKeyRound, glyphLanguages, glyphLaptop, glyphLayers, glyphLayoutDashboard, glyphLayoutTemplate, glyphLibrary, glyphLifeBuoy, glyphLightbulb, glyphLink, glyphLink2, glyphLink2Off, glyphListChecks, glyphListFilter, glyphListTree, glyphLoaderCircle, glyphLock, glyphLogIn, glyphLogOut, glyphMail, glyphMapPin, glyphMaximize2, glyphMegaphone, glyphMenu, glyphMessageCircle, glyphMessageSquare, glyphMinimize2, glyphMinus, glyphMonitor, glyphMonitorCog, glyphMoon, glyphNewspaper, glyphNotebookPen, glyphOctagonAlert, glyphPackage, glyphPackageOpen, glyphPackageSearch, glyphPalette, glyphPanelLeft, glyphPaperclip, glyphPartyPopper, glyphPause, glyphPenLine, glyphPencil, glyphPhone, glyphPlane, glyphPlay, glyphPlug, glyphPlus, glyphPrinter, glyphQrCode, glyphRadio, glyphRadioTower, glyphReceipt, glyphRefreshCw, glyphRotateCcw, glyphRotateCcwClock, glyphRoute, glyphRows2, glyphRows3, glyphRows4, glyphSave, glyphScale, glyphScan, glyphScanBarcode, glyphScanSearch, glyphScrollText, glyphSearch, glyphSearchX, glyphSend, glyphServer, glyphSettings, glyphSettings2, glyphShapes, glyphShare2, glyphShield, glyphShieldAlert, glyphShieldCheck, glyphShieldHalf, glyphShieldOff, glyphShieldX, glyphShoppingCart, glyphSignpost, glyphSiren, glyphSlidersHorizontal, glyphSparkles, glyphSquare, glyphSquareChartGantt, glyphStamp, glyphStar, glyphStarOff, glyphStore, glyphSun, glyphTag, glyphTags, glyphThumbsDown, glyphThumbsUp, glyphTicket, glyphTimer, glyphTimerOff, glyphTrash2, glyphTrendingDown, glyphTrendingUp, glyphTriangleAlert, glyphUnlink, glyphUpload, glyphUser, glyphUserCheck, glyphUserCog, glyphUserPlus, glyphUserRound, glyphUserX, glyphUsers, glyphUsersRound, glyphWallet, glyphWaypoints, glyphWebhook, glyphWifi, glyphWifiOff, glyphWorkflow, glyphWrench, glyphX, glyphZap };