@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/tree-chart/tree-chart.js

@@ -0,0 +1,850 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../utils/cn.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { ChartDataTable } from "../core/data-table.js";
+import { EASE_OUT, useEntryAnimation } from "../core/motion.js";
+import { treeFitView } from "../core/tree-fit.js";
+import {
+  treeEdgePath,
+  treeKeyMove,
+  treeLayout,
+  treeNeighbor,
+  treePathToRoot
+} from "../core/tree-layout.js";
+import {
+  dendrogramLayout,
+  radialEdgePath,
+  radialTreeLayout
+} from "../core/tree-radial.js";
+import { DEFAULT_LABELS } from "../core/types.js";
+import { usePanZoom } from "../core/use-pan-zoom.js";
+import { TreeCard, TreeChip } from "./tree-card.js";
+import {
+  ancestorIds,
+  buildTreeModel,
+  edgeColorOf,
+  groupLeaves,
+  initialCollapsed,
+  searchTree,
+  subtreeSize,
+  visibleTree
+} from "./tree-model.js";
+import { useTreeTransition } from "./use-tree-transition.js";
+const DEFAULT_TREE_LABELS = {
+  ...DEFAULT_LABELS,
+  explore: "Tree. Arrow keys move between parent, children and siblings; Enter expands or collapses; plus and minus zoom; 0 fits the view.",
+  category: "Name",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit to view",
+  controls: "Zoom controls",
+  zoomHint: "Drag to pan \xB7 Ctrl + wheel to zoom",
+  subtitle: "Role",
+  level: "Level",
+  parent: "Reports to",
+  children: "Direct reports",
+  collapsed: "collapsed",
+  of: "of",
+  search: "Search",
+  searchPrevious: "Previous match",
+  searchNext: "Next match",
+  noMatches: "No matches",
+  groupWord: "more",
+  descendants: "Total below",
+  loadFailed: "Could not load. Try again."
+};
+function TreeChart({
+  title,
+  data,
+  height = 480,
+  aspectRatio,
+  loading,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useMemo(
+    () => labelsProp ? { ...DEFAULT_TREE_LABELS, ...labelsProp } : DEFAULT_TREE_LABELS,
+    [labelsProp]
+  );
+  const { groupLeaves: groupMin, ...plotProps } = rest;
+  const grouped = useMemo(
+    () => data && groupMin ? groupLeaves(data, groupMin, (count) => `${count} ${labels.groupWord}`) : data,
+    [data, groupMin, labels.groupWord]
+  );
+  const [loaded, setLoaded] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [seenData, setSeenData] = useState(data);
+  if (seenData !== data) {
+    setSeenData(data);
+    setLoaded(/* @__PURE__ */ new Map());
+  }
+  const model = useMemo(
+    () => grouped ? buildTreeModel(grouped, loaded) : null,
+    [grouped, loaded]
+  );
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height,
+      aspectRatio,
+      labels,
+      loading,
+      empty: !model,
+      skeleton: "bars",
+      className,
+      table: model ? /* @__PURE__ */ jsx(TreeTable, { model, caption: title, labels }) : null,
+      children: (width, drawingHeight) => model ? /* @__PURE__ */ jsx(
+        TreePlot,
+        {
+          ...plotProps,
+          dataKey: data,
+          onLoaded: (id, children) => setLoaded((current) => new Map(current).set(id, children)),
+          title,
+          model,
+          width,
+          height: drawingHeight,
+          labels
+        }
+      ) : null
+    }
+  );
+}
+const ZOOM_STEP = 1.25;
+const TOOLBAR_BAND = 36;
+function toggleAnchor(pose, direction, radial) {
+  if (radial && pose.angle != null) {
+    const dx = Math.sin(pose.angle);
+    const dy = -Math.cos(pose.angle);
+    const reach = Math.min(
+      pose.width / 2 / Math.max(1e-6, Math.abs(dx)),
+      pose.height / 2 / Math.max(1e-6, Math.abs(dy))
+    );
+    return [pose.x + dx * reach, pose.y + dy * reach];
+  }
+  switch (direction) {
+    case "top":
+      return [pose.x, pose.y + pose.height / 2];
+    case "bottom":
+      return [pose.x, pose.y - pose.height / 2];
+    case "left":
+      return [pose.x + pose.width / 2, pose.y];
+    default:
+      return [pose.x - pose.width / 2, pose.y];
+  }
+}
+function TreePlot({
+  title,
+  model,
+  width,
+  height,
+  labels,
+  dataKey,
+  onLoaded,
+  layout: layoutKind = "tidy",
+  direction = "top",
+  edgeStyle = "curved",
+  nodeWidth: nodeWidthProp,
+  nodeHeight: nodeHeightProp,
+  siblingGap = 20,
+  levelGap: levelGapProp,
+  initialDepth = Number.POSITIVE_INFINITY,
+  collapsible = true,
+  highlightPath = true,
+  edgeColor = "neutral",
+  searchable = false,
+  selectable = false,
+  selectedId: selectedProp,
+  defaultSelectedId = null,
+  onSelect,
+  showCounts = false,
+  loadChildren,
+  onLoadError,
+  fit: fitProp = "auto",
+  controls = true,
+  wheelZoom = "modifier",
+  minZoom = 0.1,
+  maxZoom = 2.5,
+  renderNode,
+  animate = true,
+  onNodeClick,
+  onToggle
+}) {
+  const compact = layoutKind !== "tidy";
+  const radial = layoutKind === "radial";
+  const nodeWidth = nodeWidthProp ?? (compact ? 132 : 196);
+  const nodeHeight = nodeHeightProp ?? (compact ? 28 : 64);
+  const levelGap = levelGapProp ?? (radial ? 112 : compact ? 76 : 56);
+  const [collapsed, setCollapsed] = useState(() => initialCollapsed(model, initialDepth));
+  const [hoverId, setHoverId] = useState(null);
+  const [activeId, setActiveId] = useState(null);
+  const [selectedState, setSelectedState] = useState(defaultSelectedId);
+  const selectedId = selectedProp !== void 0 ? selectedProp : selectedState;
+  const [query, setQuery] = useState("");
+  const [matchIndex, setMatchIndex] = useState(0);
+  const [busy, setBusy] = useState(() => /* @__PURE__ */ new Set());
+  const [failed, setFailed] = useState(() => /* @__PURE__ */ new Set());
+  const [seenData, setSeenData] = useState(dataKey);
+  if (seenData !== dataKey) {
+    setSeenData(dataKey);
+    setCollapsed(initialCollapsed(model, initialDepth));
+    setActiveId(null);
+    setSelectedState(defaultSelectedId);
+    setQuery("");
+  }
+  const layout = useMemo(() => {
+    const sized = (scale) => visibleTree(model.root, collapsed, () => ({
+      width: Math.round(nodeWidth * scale),
+      height: nodeHeight
+    }));
+    if (radial) {
+      let best = radialTreeLayout(sized(1), { levelGap, siblingGap });
+      for (const scale of [1, 0.85]) {
+        best = radialTreeLayout(sized(scale), { levelGap, siblingGap });
+        const zoom = Math.min(width / best.width, height / best.height);
+        if (zoom >= 0.8 || width <= 0 || height <= 0) break;
+      }
+      return best;
+    }
+    const input = sized(1);
+    if (layoutKind === "dendrogram") {
+      return dendrogramLayout(input, { direction, siblingGap, levelGap });
+    }
+    return treeLayout(input, { direction, siblingGap, levelGap });
+  }, [
+    model,
+    collapsed,
+    layoutKind,
+    radial,
+    direction,
+    nodeWidth,
+    nodeHeight,
+    siblingGap,
+    levelGap,
+    width,
+    height
+  ]);
+  const parentOf = useCallback((id) => model.byId.get(id)?.parent?.id ?? null, [model]);
+  const poses = useTreeTransition(layout, parentOf, { disabled: !animate });
+  const panZoom = usePanZoom({ minZoom, maxZoom, wheel: wheelZoom });
+  const { view, setView, userMoved } = panZoom;
+  const toolbarBand = controls || searchable ? TOOLBAR_BAND : 0;
+  const [fitChoice, setFitChoice] = useState(null);
+  const appliedFit = useRef("contain");
+  const fit = useCallback(() => {
+    const next = treeFitView(layout, width, height, radial ? "left" : direction, {
+      inset: toolbarBand,
+      mode: fitChoice ?? fitProp,
+      minZoom,
+      centerRoot: radial
+    });
+    appliedFit.current = next.mode;
+    setView(next.view, { user: false });
+  }, [layout, width, height, direction, radial, toolbarBand, minZoom, fitChoice, fitProp, setView]);
+  useEffect(() => {
+    if (!userMoved.current) fit();
+  }, [fit, userMoved]);
+  const loadedRef = useRef(false);
+  useEffect(() => {
+    if (!loadedRef.current) return;
+    loadedRef.current = false;
+    if (!userMoved.current || width <= 0 || height <= 0) return;
+    const { x, y, k } = view;
+    const outside = layout.nodes.some(
+      (node) => x + (node.x - node.width / 2) * k < 0 || x + (node.x + node.width / 2) * k > width || y + (node.y - node.height / 2) * k < toolbarBand || y + (node.y + node.height / 2) * k > height
+    );
+    if (!outside) return;
+    userMoved.current = false;
+    fit();
+  }, [layout, view, width, height, toolbarBand, fit, userMoved]);
+  const refit = () => {
+    const moved = userMoved.current;
+    userMoved.current = false;
+    if (moved) fit();
+    else setFitChoice(appliedFit.current === "contain" ? "readable" : "contain");
+  };
+  const load = async (node) => {
+    if (!loadChildren || busy.has(node.id)) return;
+    setBusy((current) => new Set(current).add(node.id));
+    setFailed((current) => {
+      const next = new Set(current);
+      next.delete(node.id);
+      return next;
+    });
+    try {
+      const children = await loadChildren(node);
+      loadedRef.current = true;
+      onLoaded(node.id, children);
+      onToggle?.(node, true);
+    } catch (error) {
+      setFailed((current) => new Set(current).add(node.id));
+      onLoadError?.(node, error);
+    } finally {
+      setBusy((current) => {
+        const next = new Set(current);
+        next.delete(node.id);
+        return next;
+      });
+    }
+  };
+  const toggle = (node) => {
+    if (node.lazy) {
+      void load(node);
+      return;
+    }
+    if (node.children.length === 0) return;
+    const expanding = collapsed.has(node.id);
+    setCollapsed((current) => {
+      const next = new Set(current);
+      if (expanding) next.delete(node.id);
+      else next.add(node.id);
+      return next;
+    });
+    onToggle?.(node, expanding);
+  };
+  const select = (id) => {
+    if (selectedProp === void 0) setSelectedState(id);
+    onSelect?.(id ? model.byId.get(id) ?? null : null);
+  };
+  const matches = useMemo(() => searchTree(model, query), [model, query]);
+  const matchSet = useMemo(() => new Set(matches.map((node) => node.id)), [matches]);
+  const pending = useRef(null);
+  useEffect(() => {
+    const id = pending.current;
+    const node = id ? layout.nodes.find((candidate) => candidate.id === id) : void 0;
+    if (!node) return;
+    pending.current = null;
+    const k = Math.min(1.4, Math.max(0.8, panZoom.view.k));
+    setView({
+      k,
+      x: width / 2 - node.x * k,
+      y: toolbarBand + (height - toolbarBand) / 2 - node.y * k
+    });
+  }, [layout]);
+  const focusNode = (node) => {
+    const hidden = ancestorIds(node).filter((id) => collapsed.has(id));
+    if (hidden.length > 0) {
+      setCollapsed((current) => {
+        const next = new Set(current);
+        for (const id of hidden) next.delete(id);
+        return next;
+      });
+    }
+    pending.current = node.id;
+    select(node.id);
+    setActiveId(node.id);
+    if (hidden.length === 0) {
+      const placed = layout.nodes.find((candidate) => candidate.id === node.id);
+      if (placed) {
+        pending.current = null;
+        const k = Math.min(1.4, Math.max(0.8, panZoom.view.k));
+        setView({
+          k,
+          x: width / 2 - placed.x * k,
+          y: toolbarBand + (height - toolbarBand) / 2 - placed.y * k
+        });
+      }
+    }
+  };
+  const onSearch = (value) => {
+    setQuery(value);
+    setMatchIndex(0);
+    const first = searchTree(model, value)[0];
+    if (first) focusNode(first);
+  };
+  const stepMatch = (delta) => {
+    if (matches.length === 0) return;
+    const next = (matchIndex + delta + matches.length) % matches.length;
+    setMatchIndex(next);
+    const node = matches[next];
+    if (node) focusNode(node);
+  };
+  const highlightId = hoverId && highlightPath ? hoverId : selectedId ?? (highlightPath ? activeId : null);
+  const path = useMemo(
+    () => new Set(highlightId ? treePathToRoot(layout.nodes, highlightId) : []),
+    [layout.nodes, highlightId]
+  );
+  const stageRef = useRef(null);
+  useEntryAnimation(
+    stageRef,
+    (root) => {
+      root.querySelectorAll("[data-tree-card]").forEach((element) => {
+        const depth = Number(element.dataset.depth ?? 0);
+        element.animate(
+          [
+            { opacity: 0, scale: "0.92" },
+            { opacity: 1, scale: "1" }
+          ],
+          { duration: 420, delay: Math.min(depth * 90, 360), easing: EASE_OUT, fill: "backwards" }
+        );
+      });
+      root.querySelectorAll("[data-tree-edges]").forEach((element) => {
+        element.animate([{ opacity: 0 }, { opacity: 1 }], {
+          duration: 500,
+          delay: 160,
+          easing: "ease-out",
+          fill: "backwards"
+        });
+      });
+    },
+    { disabled: !animate, replayKey: model }
+  );
+  const byPose = useMemo(() => new Map(poses.map((pose) => [pose.id, pose])), [poses]);
+  const descendants = useMemo(
+    () => showCounts ? new Map(model.nodes.map((node) => [node.id, subtreeSize(node)])) : null,
+    [showCounts, model]
+  );
+  const activeNode = activeId ? model.byId.get(activeId) : void 0;
+  const reveal = (id) => {
+    const node = layout.nodes.find((candidate) => candidate.id === id);
+    if (!node) return;
+    const margin = 12;
+    const { k, x, y } = panZoom.view;
+    const left = x + (node.x - node.width / 2) * k;
+    const right = x + (node.x + node.width / 2) * k;
+    const top = y + (node.y - node.height / 2) * k;
+    const bottom = y + (node.y + node.height / 2) * k;
+    let dx = 0;
+    let dy = 0;
+    if (left < margin) dx = margin - left;
+    else if (right > width - margin) dx = width - margin - right;
+    if (top < margin) dy = margin - top;
+    else if (bottom > height - margin) dy = height - margin - bottom;
+    if (dx || dy) setView({ k, x: x + dx, y: y + dy });
+  };
+  const onKeyDown = (event) => {
+    const current = activeId ?? model.root.id;
+    const move = treeKeyMove(event.key, direction);
+    let handled = true;
+    if (move) {
+      const next = activeId ? treeNeighbor(layout.nodes, current, move) : model.root.id;
+      setActiveId(next);
+      setHoverId(null);
+      reveal(next);
+    } else if (event.key === "Home") {
+      setActiveId(model.root.id);
+      reveal(model.root.id);
+    } else if (event.key === "Enter" || event.key === " ") {
+      const node = model.byId.get(current);
+      if (node) toggle(node);
+      if (!activeId) setActiveId(current);
+    } else if (event.key === "+" || event.key === "=") panZoom.zoomBy(ZOOM_STEP);
+    else if (event.key === "-" || event.key === "_") panZoom.zoomBy(1 / ZOOM_STEP);
+    else if (event.key === "0") refit();
+    else if (event.key === "Escape") setActiveId(null);
+    else handled = false;
+    if (handled) event.preventDefault();
+  };
+  const valueText = activeNode ? describe(activeNode, collapsed, labels) : title;
+  const transitionOn = animate && !panZoom.interacting;
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden", style: { width, height }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panZoom.ref,
+        ...panZoom.handlers,
+        className: cn(
+          "absolute inset-0 touch-none select-none",
+          panZoom.interacting ? "cursor-grabbing" : "cursor-grab"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: stageRef,
+            role: "img",
+            "aria-label": title,
+            className: cn(
+              "absolute top-0 left-0 origin-top-left",
+              transitionOn && "motion-safe:transition-transform motion-safe:duration-300"
+            ),
+            style: {
+              width: layout.width,
+              height: layout.height,
+              transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})`,
+              transitionTimingFunction: EASE_OUT
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  "data-tree-edges": "",
+                  width: layout.width,
+                  height: layout.height,
+                  className: "absolute top-0 left-0 overflow-visible",
+                  children: /* @__PURE__ */ jsx(
+                    TreeEdges,
+                    {
+                      poses,
+                      byPose,
+                      path,
+                      direction,
+                      edgeStyle,
+                      edgeColor,
+                      center: radial ? layout.center : void 0,
+                      model
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: poses.map((pose) => {
+                const node = model.byId.get(pose.id);
+                if (!node) return null;
+                const hasChildren = node.children.length > 0 || node.lazy;
+                const loading = busy.has(node.id);
+                const state = {
+                  highlighted: path.has(node.id),
+                  dimmed: path.size > 0 && !path.has(node.id),
+                  active: activeId === node.id,
+                  collapsed: node.lazy || collapsed.has(node.id),
+                  hasChildren,
+                  descendants: descendants?.get(node.id) ?? 0,
+                  showCount: showCounts,
+                  loading,
+                  matched: matchSet.has(node.id),
+                  selected: selectedId === node.id
+                };
+                const [tx, ty] = toggleAnchor(pose, direction, radial);
+                return /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      "data-tree-card": "",
+                      "data-depth": node.depth,
+                      className: cn(
+                        "absolute top-0 left-0",
+                        onNodeClick || hasChildren ? "cursor-pointer" : void 0,
+                        "motion-safe:transition-[filter,opacity] motion-safe:duration-200"
+                      ),
+                      style: {
+                        width: pose.width,
+                        height: pose.height,
+                        transform: `translate(${pose.x - pose.width / 2}px, ${pose.y - pose.height / 2}px)`,
+                        opacity: pose.opacity * (state.dimmed ? 0.55 : 1)
+                      },
+                      onPointerEnter: () => setHoverId(node.id),
+                      onPointerLeave: () => setHoverId((current) => current === node.id ? null : current),
+                      onClick: () => {
+                        if (panZoom.wasDrag()) return;
+                        setActiveId(node.id);
+                        if (selectable) select(selectedId === node.id ? null : node.id);
+                        if (onNodeClick) onNodeClick(node);
+                        else toggle(node);
+                      },
+                      children: [
+                        renderNode ? renderNode(node, state) : compact ? /* @__PURE__ */ jsx(TreeChip, { node, state }) : /* @__PURE__ */ jsx(TreeCard, { node, state }),
+                        state.active ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute -inset-1 rounded-[calc(var(--radius-tile)+4px)] border-2 border-ink" }) : state.matched ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute -inset-1 rounded-[calc(var(--radius-tile)+4px)] border-2 border-accent-word" }) : null
+                      ]
+                    }
+                  ),
+                  collapsible && hasChildren ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: -1,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        if (!panZoom.wasDrag()) toggle(node);
+                      },
+                      className: "absolute top-0 left-0 grid h-5 min-w-5 cursor-pointer place-items-center rounded-badge border-divider bg-surface-control px-1 font-bold text-[10px] text-ink-2 tabular-nums shadow-control hover:text-ink",
+                      style: {
+                        transform: `translate(${tx}px, ${ty}px) translate(-50%, -50%)`,
+                        opacity: pose.opacity,
+                        borderColor: state.highlighted ? node.color : void 0
+                      },
+                      children: loading ? /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          "aria-hidden": "true",
+                          viewBox: "0 0 24 24",
+                          width: "12",
+                          height: "12",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "3",
+                          strokeLinecap: "round",
+                          className: "motion-safe:animate-spin",
+                          children: /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 1 0 9 9" })
+                        }
+                      ) : failed.has(node.id) ? /* @__PURE__ */ jsx("span", { title: labels.loadFailed, children: "!" }) : node.lazy ? node.data.childCount ?? "+" : state.collapsed ? node.children.length : "\u2212"
+                    }
+                  ) : null
+                ] }, node.id);
+              }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": labels.explore,
+        "aria-valuemin": 1,
+        "aria-valuemax": Math.max(1, layout.nodes.length),
+        "aria-valuenow": Math.max(1, layout.nodes.findIndex((node) => node.id === activeId) + 1),
+        "aria-valuetext": valueText,
+        "aria-busy": busy.size > 0,
+        onKeyDown,
+        onFocus: (event) => {
+          if (event.currentTarget.matches(":focus-visible")) {
+            setActiveId((current) => current ?? model.root.id);
+          }
+        },
+        onBlur: () => setActiveId(null),
+        className: "pointer-events-none absolute inset-0 rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:-outline-offset-2"
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: busy.size > 0 ? labels.loading : failed.size > 0 ? labels.loadFailed : "" }),
+    searchable ? /* @__PURE__ */ jsxs(
+      "search",
+      {
+        className: "absolute top-2 left-2 flex items-center gap-0.5 rounded-control border-divider bg-surface-control p-0.5 shadow-control",
+        style: { width: "min(17rem, calc(100% - 9.5rem))" },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              width: "14",
+              height: "14",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              className: "ml-1.5 shrink-0 text-ink-3",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+                /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "search",
+              value: query,
+              placeholder: labels.search,
+              "aria-label": labels.search,
+              onChange: (event) => onSearch(event.target.value),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  stepMatch(event.shiftKey ? -1 : 1);
+                } else if (event.key === "Escape") onSearch("");
+              },
+              className: "h-7 min-w-0 flex-1 border-0 bg-transparent px-1.5 text-[12px] text-ink outline-none placeholder:text-ink-3"
+            }
+          ),
+          query ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-live": "polite",
+                className: "hidden shrink-0 px-1 text-[11px] text-ink-3 tabular-nums @sm/chart:inline",
+                children: matches.length > 0 ? `${matchIndex + 1} ${labels.of} ${matches.length}` : labels.noMatches
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.searchPrevious,
+                disabled: matches.length === 0,
+                onClick: () => stepMatch(-1),
+                className: "grid size-6 shrink-0 cursor-pointer place-items-center rounded-xs border-0 bg-transparent text-ink-2 hover:bg-surface-2 disabled:opacity-40",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    viewBox: "0 0 24 24",
+                    width: "12",
+                    height: "12",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.4",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "m6 15 6-6 6 6" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.searchNext,
+                disabled: matches.length === 0,
+                onClick: () => stepMatch(1),
+                className: "grid size-6 shrink-0 cursor-pointer place-items-center rounded-xs border-0 bg-transparent text-ink-2 hover:bg-surface-2 disabled:opacity-40",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    viewBox: "0 0 24 24",
+                    width: "12",
+                    height: "12",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.4",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+                  }
+                )
+              }
+            )
+          ] }) : null
+        ]
+      }
+    ) : null,
+    controls ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": labels.controls,
+        className: "absolute top-2 right-2 flex items-center gap-1 rounded-control border-divider bg-surface-control p-0.5 shadow-control",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "hidden px-1.5 font-semibold text-[11px] text-ink-3 tabular-nums @sm/chart:inline", children: [
+            Math.round(view.k * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(ToolButton, { label: labels.zoomOut, onClick: () => panZoom.zoomBy(1 / ZOOM_STEP), children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) }),
+          /* @__PURE__ */ jsx(ToolButton, { label: labels.zoomIn, onClick: () => panZoom.zoomBy(ZOOM_STEP), children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5v14" }) }),
+          /* @__PURE__ */ jsx(ToolButton, { label: labels.fit, onClick: refit, children: /* @__PURE__ */ jsx("path", { d: "M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4" }) })
+        ]
+      }
+    ) : null,
+    wheelZoom === "modifier" ? /* @__PURE__ */ jsx("p", { className: "pointer-events-none absolute bottom-1.5 left-2 m-0 hidden text-[11px] text-ink-3 @md/chart:block", children: labels.zoomHint }) : null
+  ] });
+}
+function ToolButton({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      onClick,
+      className: "grid size-7 cursor-pointer place-items-center rounded-xs border-0 bg-transparent text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink @sm/chart:size-8",
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 24 24",
+          width: "16",
+          height: "16",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children
+        }
+      )
+    }
+  );
+}
+function TreeEdges({
+  poses,
+  byPose,
+  path,
+  direction,
+  edgeStyle,
+  edgeColor,
+  center,
+  model
+}) {
+  const edges = poses.flatMap((pose) => {
+    const parent = pose.parentId ? byPose.get(pose.parentId) : void 0;
+    if (!parent) return [];
+    const on = path.has(pose.id) && path.has(parent.id);
+    return [{ pose, parent, on }];
+  });
+  edges.sort((a, b) => Number(a.on) - Number(b.on));
+  return /* @__PURE__ */ jsx("g", { fill: "none", children: edges.map(({ pose, parent, on }) => {
+    const node = model.byId.get(pose.id);
+    const colored = edgeColor !== "neutral" && node;
+    const stroke = colored ? edgeColorOf(node, edgeColor) : on ? node?.color ?? "var(--accent-word)" : "var(--line-strong)";
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: center ? radialEdgePath(parent, pose, center, edgeStyle) : treeEdgePath(parent, pose, direction, edgeStyle),
+        strokeWidth: on ? 2.5 : 1.5,
+        strokeLinecap: "round",
+        className: "motion-safe:transition-[stroke-width,opacity] motion-safe:duration-150",
+        style: {
+          stroke,
+          opacity: Math.min(pose.opacity, parent.opacity) * (path.size > 0 && !on ? 0.35 : 1)
+        }
+      },
+      pose.id
+    );
+  }) });
+}
+function describe(node, collapsed, labels) {
+  const parts = [node.name];
+  if (node.subtitle) parts.push(node.subtitle);
+  if (node.badge) parts.push(node.badge);
+  parts.push(`${labels.level} ${node.depth + 1}`);
+  if (node.parent) {
+    parts.push(`${node.index + 1} ${labels.of} ${node.parent.children.length}`);
+  }
+  if (node.children.length > 0) {
+    const state = collapsed.has(node.id) ? `, ${labels.collapsed}` : "";
+    parts.push(`${labels.children}: ${node.children.length}${state}`);
+    parts.push(`${labels.descendants}: ${subtreeSize(node)}`);
+  } else if (node.lazy) parts.push(labels.collapsed);
+  return parts.join(". ");
+}
+function TreeTable({
+  model,
+  caption,
+  labels
+}) {
+  const nodes = model.nodes;
+  return /* @__PURE__ */ jsx(
+    ChartDataTable,
+    {
+      caption,
+      categoryHeader: labels.category,
+      categories: nodes.map((node) => node.name),
+      columns: [
+        { id: "subtitle", name: labels.subtitle, values: nodes.map((node) => node.subtitle ?? "") },
+        { id: "level", name: labels.level, values: nodes.map((node) => `${node.depth + 1}`) },
+        { id: "parent", name: labels.parent, values: nodes.map((node) => node.parent?.name ?? "") },
+        {
+          id: "children",
+          name: labels.children,
+          values: nodes.map((node) => `${node.children.length}`)
+        },
+        {
+          id: "descendants",
+          name: labels.descendants,
+          values: nodes.map((node) => `${subtreeSize(node)}`)
+        }
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_TREE_LABELS,
+  TreeChart
+};