@tensor_1/react 2.42.0 → 2.43.0

package/dist/components/OrgChart.js

@@ -0,0 +1,683 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { Avatar } from "./Avatar.js";
+import { Button } from "./Button.js";
+const DEFAULT_ORG_CHART_LABELS = {
+  chart: "Org chart",
+  loading: "Loading\u2026",
+  error: "Could not load.",
+  retry: "Retry",
+  reportsOne: "{count} direct report",
+  reportsMany: "{count} direct reports",
+  expand: "Show reports",
+  collapse: "Hide reports",
+  toolbar: "Zoom",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit",
+  zoomLevel: "{percent}%",
+  resetZoom: "{percent}, reset to 100%"
+};
+const ZOOM_STEPS = [0.25, 0.33, 0.5, 0.67, 0.8, 0.9, 1, 1.1, 1.25, 1.5];
+const MIN_ZOOM = ZOOM_STEPS[0];
+const MAX_ZOOM = ZOOM_STEPS[ZOOM_STEPS.length - 1];
+const clampZoom = (z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z));
+const orgChartZoomStep = (zoom, dir) => {
+  if (dir > 0) return ZOOM_STEPS.find((s) => s > zoom + 1e-3) ?? MAX_ZOOM;
+  return [...ZOOM_STEPS].reverse().find((s) => s < zoom - 1e-3) ?? MIN_ZOOM;
+};
+const orgChartInitials = (name) => {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  const first = words[0];
+  const last = words.length > 1 ? words[words.length - 1] : "";
+  return (Array.from(first)[0] ?? "").concat(last ? Array.from(last)[0] ?? "" : "").toUpperCase();
+};
+const LOADING = "::uix-loading";
+const FAILED = "::uix-error";
+const syntheticOf = (id) => id.endsWith(LOADING) ? { parent: id.slice(0, -LOADING.length), kind: "loading" } : id.endsWith(FAILED) ? { parent: id.slice(0, -FAILED.length), kind: "error" } : null;
+const idRef = (chartId, nodeId, part) => {
+  let hash = 5381;
+  for (let i = 0; i < nodeId.length; i += 1) hash = (hash * 33 ^ nodeId.charCodeAt(i)) >>> 0;
+  return `${chartId}-${nodeId.replace(/[^A-Za-z0-9_-]/g, "_").slice(0, 40)}-${hash.toString(36)}-${part}`;
+};
+const isExpandable = (node, known, lazy) => known ? known.length > 0 : lazy && (node.reportCount ?? 0) > 0;
+const ChevronIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
+const PlusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" }) });
+const MinusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 8h10" }) });
+const FitIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" }) });
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const Ring = () => /* @__PURE__ */ jsx("span", { className: "uix-spinner uix-spinner--sm", "aria-hidden": "true" });
+function StatusItem({ parent, kind, level, ctx }) {
+  const id = parent + (kind === "error" ? FAILED : LOADING);
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      role: "treeitem",
+      "aria-level": level,
+      "aria-setsize": 1,
+      "aria-posinset": 1,
+      "data-id": id,
+      tabIndex: ctx.tabbableId === id ? 0 : -1,
+      className: "uix-org-chart__item uix-org-chart__item--status",
+      onFocus: (e) => {
+        if (e.target === e.currentTarget) ctx.onFocusItem(id);
+      },
+      children: kind === "error" ? /* @__PURE__ */ jsxs("span", { className: "uix-org-chart__status uix-org-chart__status--error", onClick: () => ctx.onActivate(id), children: [
+        ctx.labels.error,
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "uix-org-chart__retry", children: ctx.labels.retry })
+      ] }) : /* @__PURE__ */ jsxs("span", { className: "uix-org-chart__status", children: [
+        /* @__PURE__ */ jsx(Ring, {}),
+        ctx.labels.loading
+      ] })
+    }
+  );
+}
+function OrgChartItem({ node, level, size, pos, ctx }) {
+  const known = node.children ?? ctx.loaded.get(node.id);
+  const expandable = isExpandable(node, known, ctx.lazy);
+  const open = expandable && ctx.expanded.has(node.id);
+  const count = known ? known.length : node.reportCount ?? 0;
+  const nameId = idRef(ctx.chartId, node.id, "name");
+  const descId = idRef(ctx.chartId, node.id, "desc");
+  const reportsText = count > 0 ? fillLabel(count === 1 ? ctx.labels.reportsOne : ctx.labels.reportsMany, { count }) : "";
+  const waiting = open && !known;
+  const status = waiting ? ctx.failed.has(node.id) ? "error" : "loading" : null;
+  const children = open && known && known.length > 0 ? known : null;
+  const stack = ctx.stackLeaves && children !== null && children.every((c) => !isExpandable(c, c.children ?? ctx.loaded.get(c.id), ctx.lazy));
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      role: "treeitem",
+      "aria-level": level,
+      "aria-setsize": size,
+      "aria-posinset": pos,
+      "aria-expanded": expandable ? open : void 0,
+      "aria-selected": ctx.selectable ? ctx.selected === node.id : void 0,
+      "aria-busy": ctx.loading.has(node.id) || void 0,
+      "aria-labelledby": nameId,
+      "aria-describedby": descId,
+      "data-id": node.id,
+      tabIndex: ctx.tabbableId === node.id ? 0 : -1,
+      className: "uix-org-chart__item",
+      onFocus: (e) => {
+        if (e.target === e.currentTarget) ctx.onFocusItem(node.id);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-org-chart__node", onClick: () => ctx.onActivate(node.id), children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "lg", src: node.photo, children: node.initials ?? orgChartInitials(node.name) }),
+          /* @__PURE__ */ jsxs("span", { className: "uix-org-chart__body", children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-org-chart__name", id: nameId, children: node.name }),
+            /* @__PURE__ */ jsxs("span", { id: descId, className: "uix-org-chart__desc", children: [
+              node.title ? /* @__PURE__ */ jsx("span", { className: "uix-org-chart__title", children: node.title }) : null,
+              node.team || node.location ? /* @__PURE__ */ jsxs("span", { className: "uix-org-chart__meta", children: [
+                node.team ? /* @__PURE__ */ jsx("span", { children: node.team }) : null,
+                node.location ? /* @__PURE__ */ jsx("span", { children: node.location }) : null
+              ] }) : null,
+              node.badge ? /* @__PURE__ */ jsx("span", { className: "uix-org-chart__badge", children: node.badge }) : null,
+              reportsText ? /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: reportsText }) : null
+            ] })
+          ] }),
+          expandable ? (
+            // A pointer target for showing the reports without opening the person. Keyboard users
+            // toggle with Space or the arrow keys on the item, so it stays out of the tab order and
+            // never takes focus (the item keeps it), and the item's aria-expanded carries its state.
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                "aria-hidden": "true",
+                title: open ? ctx.labels.collapse : ctx.labels.expand,
+                className: "uix-org-chart__toggle",
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  ctx.onToggle(node.id);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ChevronIcon, {}),
+                  count > 0 ? count : null
+                ]
+              }
+            )
+          ) : null
+        ] }),
+        status ? /* @__PURE__ */ jsx("ul", { role: "group", className: "uix-org-chart__group", children: /* @__PURE__ */ jsx(StatusItem, { parent: node.id, kind: status, level: level + 1, ctx }) }) : children ? /* @__PURE__ */ jsx("ul", { role: "group", className: "uix-org-chart__group", "data-stack": stack ? "" : void 0, children: children.map((child, i) => /* @__PURE__ */ jsx(OrgChartItem, { node: child, level: level + 1, size: children.length, pos: i + 1, ctx }, child.id)) }) : null
+      ]
+    }
+  );
+}
+function OrgChart({
+  nodes,
+  expanded: controlledExpanded,
+  defaultExpanded,
+  onToggle,
+  selected,
+  onSelect,
+  loadChildren,
+  revealId,
+  onReveal,
+  stackLeaves = true,
+  defaultZoom = 1,
+  labels: labelOverrides,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const labels = { ...DEFAULT_ORG_CHART_LABELS, ...useUixLabels().orgChart, ...labelOverrides };
+  const chartId = useId().replace(/[^A-Za-z0-9_-]/g, "");
+  const [internalExpanded, setInternalExpanded] = useState(() => defaultExpanded ?? /* @__PURE__ */ new Set());
+  const expanded = controlledExpanded ?? internalExpanded;
+  const treeRef = useRef(null);
+  const viewportRef = useRef(null);
+  const [focusedId, setFocusedId] = useState(void 0);
+  const selectable = selected !== void 0 || onSelect != null;
+  const lazy = Boolean(loadChildren);
+  const userMoved = useRef(false);
+  const placed = useRef(null);
+  const scrollFrame = (left, top) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    viewport.scrollLeft = left;
+    viewport.scrollTop = top;
+    placed.current = { left: viewport.scrollLeft, top: viewport.scrollTop };
+  };
+  const [loaded, setLoaded] = useState(() => /* @__PURE__ */ new Map());
+  const [failed, setFailed] = useState(() => /* @__PURE__ */ new Set());
+  const [loading, setLoading] = useState(() => /* @__PURE__ */ new Set());
+  const [announcement, setAnnouncement] = useState("");
+  const inFlight = useRef(/* @__PURE__ */ new Set());
+  const loadRef = useRef(loadChildren);
+  loadRef.current = loadChildren;
+  const errorWord = useRef(labels.error);
+  errorWord.current = labels.error;
+  const refocus = useRef(null);
+  const load = useCallback((node) => {
+    const run = loadRef.current;
+    if (!run || inFlight.current.has(node.id)) return;
+    inFlight.current.add(node.id);
+    setFailed((prev) => {
+      if (!prev.has(node.id)) return prev;
+      const next = new Set(prev);
+      next.delete(node.id);
+      return next;
+    });
+    setLoading((prev) => new Set(prev).add(node.id));
+    setAnnouncement("");
+    const settle = (apply, focusNext) => {
+      inFlight.current.delete(node.id);
+      const active = typeof document !== "undefined" ? document.activeElement : null;
+      if (active?.dataset?.id === node.id + LOADING || active?.dataset?.id === node.id + FAILED) refocus.current = focusNext;
+      setLoading((prev) => {
+        const next = new Set(prev);
+        next.delete(node.id);
+        return next;
+      });
+      apply();
+    };
+    run(node).then(
+      // Focus that waited on the loading row moves on to the first report, the key's intent.
+      (children) => settle(() => setLoaded((prev) => new Map(prev).set(node.id, children)), children[0]?.id ?? node.id),
+      () => settle(() => {
+        setFailed((prev) => new Set(prev).add(node.id));
+        setAnnouncement(errorWord.current);
+      }, node.id + FAILED)
+    );
+  }, []);
+  useEffect(() => {
+    if (!loadChildren) return;
+    const visit = (list) => {
+      for (const node of list) {
+        if (!expanded.has(node.id)) continue;
+        const known = node.children ?? loaded.get(node.id);
+        if (known) visit(known);
+        else if ((node.reportCount ?? 0) > 0 && !failed.has(node.id)) load(node);
+      }
+    };
+    visit(nodes);
+  }, [nodes, expanded, loaded, failed, loadChildren, load]);
+  const itemEl = useCallback((id) => treeRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(id)}"]`) ?? null, []);
+  const cardOf = (el) => el?.querySelector(":scope > .uix-org-chart__node, :scope > .uix-org-chart__status") ?? el;
+  useEffect(() => {
+    const id = refocus.current;
+    if (id == null) return;
+    refocus.current = null;
+    setFocusedId(id);
+    itemEl(id)?.focus();
+  }, [loaded, failed, loading, itemEl]);
+  const findPath = useCallback((id, list = nodes, path = []) => {
+    for (const node of list) {
+      if (node.id === id) return [...path, node];
+      const inside = findPath(id, node.children ?? loaded.get(node.id) ?? [], [...path, node]);
+      if (inside) return inside;
+    }
+    return null;
+  }, [nodes, loaded]);
+  const anchor = useRef(null);
+  const viewportBox = () => viewportRef.current?.getBoundingClientRect();
+  const holdInPlace = (id) => {
+    const card = cardOf(itemEl(id));
+    const frame = viewportBox();
+    if (!card || !frame || !viewportRef.current || layoutOf(viewportRef.current) === "list") {
+      anchor.current = null;
+      return;
+    }
+    const box = card.getBoundingClientRect();
+    anchor.current = { id, x: box.left - frame.left, y: box.top - frame.top };
+  };
+  useIsoLayoutEffect(() => {
+    const a = anchor.current;
+    const viewport = viewportRef.current;
+    if (!a || !viewport) return;
+    const card = cardOf(itemEl(a.id));
+    const frame = viewport.getBoundingClientRect();
+    if (card) {
+      const box = card.getBoundingClientRect();
+      scrollFrame(viewport.scrollLeft + box.left - frame.left - a.x, viewport.scrollTop + box.top - frame.top - a.y);
+    }
+    if (!card || !inFlight.current.has(a.id) && !itemEl(a.id + LOADING)) anchor.current = null;
+  });
+  const toggle = useCallback((id) => {
+    const opening = !expanded.has(id);
+    userMoved.current = true;
+    holdInPlace(id);
+    const el = itemEl(id);
+    const active = typeof document !== "undefined" ? document.activeElement : null;
+    if (!opening && el && active && active !== el && el.contains(active)) {
+      el.focus();
+      setFocusedId(id);
+    }
+    if (!controlledExpanded) {
+      setInternalExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }
+    onToggle?.(id, opening);
+  }, [expanded, controlledExpanded, onToggle, itemEl]);
+  const retry = useCallback((parentId) => {
+    const path = findPath(parentId);
+    const parent = path ? path[path.length - 1] : void 0;
+    if (!parent) return;
+    refocus.current = parent.id + LOADING;
+    setFailed((prev) => {
+      const next = new Set(prev);
+      next.delete(parent.id);
+      return next;
+    });
+    load(parent);
+  }, [findPath, load]);
+  const select = useCallback((id) => {
+    const synthetic = syntheticOf(id);
+    if (!synthetic) {
+      onSelect?.(id);
+      return;
+    }
+    if (synthetic.kind === "error") retry(synthetic.parent);
+  }, [onSelect, retry]);
+  const rendered = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    const visit = (list) => {
+      for (const node of list) {
+        ids.add(node.id);
+        if (!expanded.has(node.id)) continue;
+        const known = node.children ?? loaded.get(node.id);
+        if (known) visit(known);
+        else if (lazy && (node.reportCount ?? 0) > 0) ids.add(node.id + (failed.has(node.id) ? FAILED : LOADING));
+      }
+    };
+    visit(nodes);
+    return ids;
+  }, [nodes, expanded, loaded, failed, lazy]);
+  const tabbableId = (focusedId && rendered.has(focusedId) ? focusedId : void 0) ?? (selected && rendered.has(selected) ? selected : void 0) ?? nodes[0]?.id;
+  useIsoLayoutEffect(() => {
+    if (!focusedId || rendered.has(focusedId) || typeof document === "undefined") return;
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    const target = syntheticOf(focusedId)?.parent ?? focusedId;
+    const line = findPath(target) ?? [];
+    const visible = [...line].reverse().find((n) => rendered.has(n.id));
+    if (visible) {
+      setFocusedId(visible.id);
+      itemEl(visible.id)?.focus();
+    }
+  }, [rendered]);
+  const activate = useCallback((id) => {
+    setFocusedId(id);
+    itemEl(id)?.focus({ preventScroll: true });
+    select(id);
+  }, [itemEl, select]);
+  const revealed = useRef(null);
+  useEffect(() => {
+    if (!revealId) {
+      revealed.current = null;
+      return;
+    }
+    if (revealed.current === revealId) return;
+    const el = itemEl(revealId);
+    if (!el) return;
+    revealed.current = revealId;
+    userMoved.current = true;
+    cardOf(el)?.scrollIntoView?.({ block: "center", inline: "center" });
+    el.focus({ preventScroll: true });
+    setFocusedId(revealId);
+    onReveal?.(revealId);
+  });
+  const [zoom, setZoom] = useState(() => typeof defaultZoom === "number" ? clampZoom(defaultZoom) : 1);
+  const zoomCentre = useRef(null);
+  const zoomTo = (next) => {
+    const viewport = viewportRef.current;
+    if (viewport) {
+      zoomCentre.current = {
+        x: (viewport.scrollLeft + viewport.clientWidth / 2) / zoom,
+        y: (viewport.scrollTop + viewport.clientHeight / 2) / zoom,
+        from: zoom
+      };
+    }
+    setZoom(clampZoom(next));
+  };
+  useIsoLayoutEffect(() => {
+    const c = zoomCentre.current;
+    const viewport = viewportRef.current;
+    if (!c || !viewport || c.from === zoom) return;
+    zoomCentre.current = null;
+    scrollFrame(c.x * zoom - viewport.clientWidth / 2, c.y * zoom - viewport.clientHeight / 2);
+  }, [zoom]);
+  const fitZoom = useCallback((current) => {
+    const viewport = viewportRef.current;
+    const tree = treeRef.current;
+    if (!viewport || !tree) return null;
+    const cs = getComputedStyle(viewport);
+    const room = viewport.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
+    const width = tree.getBoundingClientRect().width / current;
+    if (!(room > 0) || !(width > 0)) return null;
+    return clampZoom(Math.min(1, room / width));
+  }, []);
+  const settledWidth = useRef(-1);
+  useIsoLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    const tree = treeRef.current;
+    if (userMoved.current || !viewport || !tree || nodes.length === 0) return;
+    const width = Math.round(tree.getBoundingClientRect().width);
+    if (width === settledWidth.current) return;
+    if (defaultZoom === "fit") {
+      const next = fitZoom(zoom);
+      if (next !== null && Math.abs(next - zoom) > 5e-3) {
+        setZoom(next);
+        return;
+      }
+    }
+    settledWidth.current = width;
+    if (viewport.scrollWidth > viewport.clientWidth) scrollFrame((viewport.scrollWidth - viewport.clientWidth) / 2, viewport.scrollTop);
+  });
+  const onScroll = () => {
+    const viewport = viewportRef.current;
+    const at = placed.current;
+    if (!viewport) return;
+    if (at && Math.abs(viewport.scrollLeft - at.left) <= 1 && Math.abs(viewport.scrollTop - at.top) <= 1) return;
+    userMoved.current = true;
+  };
+  const pan = useRef(null);
+  const [panning, setPanning] = useState(false);
+  const onPointerDown = (e) => {
+    if (e.button !== 0 || e.pointerType === "touch") return;
+    if (e.target.closest(".uix-org-chart__node, .uix-org-chart__status")) return;
+    const viewport = viewportRef.current;
+    if (!viewport || layoutOf(viewport) === "list") return;
+    const frame = viewport.getBoundingClientRect();
+    const x = e.clientX - frame.left - viewport.clientLeft;
+    const y = e.clientY - frame.top - viewport.clientTop;
+    if (x > viewport.clientWidth || y > viewport.clientHeight) return;
+    pan.current = { x: e.clientX, y: e.clientY, left: viewport.scrollLeft, top: viewport.scrollTop, id: e.pointerId };
+    userMoved.current = true;
+    viewport.setPointerCapture?.(e.pointerId);
+    setPanning(true);
+  };
+  const onMouseDown = (e) => {
+    if (pan.current) e.preventDefault();
+  };
+  const onPointerMove = (e) => {
+    const p = pan.current;
+    const viewport = viewportRef.current;
+    if (!p || !viewport || e.pointerId !== p.id) return;
+    scrollFrame(p.left - (e.clientX - p.x), p.top - (e.clientY - p.y));
+  };
+  const endPan = (e) => {
+    if (!pan.current || e.pointerId !== pan.current.id) return;
+    viewportRef.current?.releasePointerCapture?.(e.pointerId);
+    pan.current = null;
+    setPanning(false);
+  };
+  const focusItem = (el) => {
+    if (el) {
+      el.focus();
+      setFocusedId(el.dataset.id);
+    }
+  };
+  const onKeyDown = (e) => {
+    const cur = e.target.closest('[role="treeitem"]');
+    const tree = treeRef.current;
+    if (!cur || !tree?.contains(cur) || e.altKey || e.ctrlKey || e.metaKey) return;
+    const items = Array.from(tree.querySelectorAll('[role="treeitem"]'));
+    const idx = items.indexOf(cur);
+    const id = cur.dataset.id;
+    const state = cur.getAttribute("aria-expanded");
+    const parent = cur.parentElement?.closest('[role="treeitem"]') ?? null;
+    const firstChild = cur.querySelector(':scope > [role="group"] > [role="treeitem"]');
+    const column = cur.parentElement;
+    const stacked = column?.hasAttribute("data-stack") ?? false;
+    const sameLevel = (dir) => {
+      const level = cur.getAttribute("aria-level");
+      const row = items.filter((el) => el.getAttribute("aria-level") === level);
+      const edge = stacked && column ? dir > 0 ? column.lastElementChild : column.firstElementChild : cur;
+      return row[row.indexOf(edge ?? cur) + dir];
+    };
+    const sibling = (dir) => dir > 0 ? cur.nextElementSibling : cur.previousElementSibling;
+    const list = viewportRef.current ? layoutOf(viewportRef.current) === "list" : false;
+    const synthetic = syntheticOf(id);
+    let handled = true;
+    switch (e.key) {
+      case "Home":
+        focusItem(items[0]);
+        break;
+      case "End":
+        focusItem(items[items.length - 1]);
+        break;
+      case "Enter":
+        select(id);
+        setFocusedId(id);
+        break;
+      case " ":
+        if (synthetic) select(id);
+        else if (state !== null) toggle(id);
+        else select(id);
+        setFocusedId(id);
+        break;
+      default:
+        if (list) {
+          switch (e.key) {
+            case "ArrowDown":
+              focusItem(items[Math.min(idx + 1, items.length - 1)]);
+              break;
+            case "ArrowUp":
+              focusItem(items[Math.max(idx - 1, 0)]);
+              break;
+            case "ArrowRight":
+              if (state === "false") toggle(id);
+              else if (state === "true") focusItem(firstChild);
+              break;
+            case "ArrowLeft":
+              if (state === "true") toggle(id);
+              else focusItem(parent);
+              break;
+            default:
+              handled = false;
+          }
+        } else {
+          switch (e.key) {
+            case "ArrowUp":
+              focusItem(stacked ? sibling(-1) ?? parent : parent);
+              break;
+            case "ArrowDown":
+              if (stacked && sibling(1) && state !== "true") focusItem(sibling(1));
+              else if (state === "false") toggle(id);
+              else if (state === "true") focusItem(firstChild);
+              break;
+            case "ArrowRight":
+              focusItem(sameLevel(1));
+              break;
+            case "ArrowLeft":
+              focusItem(sameLevel(-1));
+              break;
+            default:
+              handled = false;
+          }
+        }
+        if (!handled && e.key.length === 1 && e.key.trim() !== "") {
+          const ch = e.key.toLocaleLowerCase();
+          const nameOf = (el) => document.getElementById(el.getAttribute("aria-labelledby") ?? "")?.textContent?.trim().toLocaleLowerCase() ?? "";
+          const people = items.filter((el) => !syntheticOf(el.dataset.id ?? ""));
+          const start = people.indexOf(cur);
+          const next = [...people.slice(start + 1), ...people.slice(0, start + 1)].find((el) => nameOf(el).startsWith(ch));
+          if (next) {
+            focusItem(next);
+            handled = true;
+          }
+        }
+    }
+    if (handled) e.preventDefault();
+  };
+  const ctx = {
+    expanded,
+    loaded,
+    failed,
+    loading,
+    lazy,
+    selectable,
+    selected,
+    tabbableId,
+    stackLeaves,
+    labels,
+    chartId,
+    onToggle: toggle,
+    onActivate: activate,
+    onFocusItem: setFocusedId
+  };
+  const percent = fillLabel(labels.zoomLevel, { percent: Math.round(zoom * 100) });
+  const atMin = zoom <= MIN_ZOOM + 1e-3;
+  const atMax = zoom >= MAX_ZOOM - 1e-3;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-org-chart", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-org-chart__toolbar", role: "group", "aria-label": labels.toolbar, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          icon: true,
+          "aria-label": labels.zoomOut,
+          title: labels.zoomOut,
+          "aria-disabled": atMin || void 0,
+          onClick: () => {
+            if (!atMin) {
+              userMoved.current = true;
+              zoomTo(orgChartZoomStep(zoom, -1));
+            }
+          },
+          children: /* @__PURE__ */ jsx(MinusIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "uix-org-chart__level",
+          "aria-label": fillLabel(labels.resetZoom, { percent }),
+          onClick: () => {
+            userMoved.current = true;
+            zoomTo(1);
+          },
+          children: percent
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          icon: true,
+          "aria-label": labels.zoomIn,
+          title: labels.zoomIn,
+          "aria-disabled": atMax || void 0,
+          onClick: () => {
+            if (!atMax) {
+              userMoved.current = true;
+              zoomTo(orgChartZoomStep(zoom, 1));
+            }
+          },
+          children: /* @__PURE__ */ jsx(PlusIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+        userMoved.current = true;
+        const next = fitZoom(zoom);
+        if (next !== null) zoomTo(next);
+      }, children: [
+        /* @__PURE__ */ jsx(FitIcon, {}),
+        labels.fit
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        className: "uix-org-chart__viewport",
+        "data-panning": panning ? "" : void 0,
+        onPointerDown,
+        onMouseDown,
+        onPointerMove,
+        onPointerUp: endPan,
+        onPointerCancel: endPan,
+        onWheel: () => {
+          userMoved.current = true;
+        },
+        onScroll,
+        children: /* @__PURE__ */ jsx("div", { className: "uix-org-chart__canvas", style: { "--org-chart-zoom": zoom }, children: /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ref: treeRef,
+            role: "tree",
+            "aria-label": ariaLabel ?? (ariaLabelledby ? void 0 : labels.chart),
+            "aria-labelledby": ariaLabelledby,
+            className: "uix-org-chart__tree",
+            onKeyDown,
+            children: nodes.map((node, i) => /* @__PURE__ */ jsx(OrgChartItem, { node, level: 1, size: nodes.length, pos: i + 1, ctx }, node.id))
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", children: announcement })
+  ] });
+}
+function layoutOf(viewport) {
+  if (typeof getComputedStyle !== "function") return "chart";
+  return getComputedStyle(viewport).getPropertyValue("--org-chart-layout").trim() === "list" ? "list" : "chart";
+}
+export {
+  DEFAULT_ORG_CHART_LABELS,
+  OrgChart,
+  orgChartInitials,
+  orgChartZoomStep
+};