@mieweb/ui 0.10.0-dev.31 → 0.10.0-dev.32

package/dist/org-chart.js

@@ -0,0 +1,1277 @@
+import './chunk-H2Y7HZV5.js';
+import './chunk-DVDT7TX7.js';
+import { Avatar } from './chunk-TI3TQQ7F.js';
+import { accentClasses } from './chunk-3YBS4WUQ.js';
+import { Spinner } from './chunk-UA7E7PDS.js';
+import './chunk-N5JDL4VE.js';
+import { Button } from './chunk-WFBUBT54.js';
+import './chunk-GVM6DTR5.js';
+import { cn } from './chunk-TQONQSJO.js';
+import './chunk-PX6F3LHL.js';
+import * as React3 from 'react';
+import { Search, Network, List, X, ExternalLink, ChevronDown, ChevronRight, UnfoldVertical, FoldVertical, Scan, Map as Map$1, Minimize, Maximize, Building2 } from 'lucide-react';
+import { ReactFlowProvider, useReactFlow, ReactFlow, Background, BackgroundVariant, Panel, MiniMap, Position, Handle } from '@xyflow/react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/components/OrgChart/layout.ts
+var ORG_CHART_LAYOUT_OPTIONS = {
+  "elk.algorithm": "layered",
+  "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+  "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+  "elk.layered.spacing.nodeNodeBetweenLayers": "64",
+  "elk.spacing.nodeNode": "28",
+  "elk.spacing.componentComponent": "64",
+  "elk.edgeRouting": "ORTHOGONAL"
+};
+var elkPromise = null;
+function getElk() {
+  elkPromise ??= import('elkjs/lib/elk.bundled.js').then(
+    (m) => new m.default()
+  );
+  return elkPromise;
+}
+async function layoutOrgChart(req) {
+  const graph = {
+    id: "org-chart-root",
+    layoutOptions: {
+      ...ORG_CHART_LAYOUT_OPTIONS,
+      "elk.direction": req.direction
+    },
+    children: req.ids.map((id) => ({
+      id,
+      width: req.width,
+      height: req.height
+    })),
+    edges: req.edges.map((e) => ({
+      id: JSON.stringify([e.source, e.target]),
+      sources: [e.source],
+      targets: [e.target]
+    }))
+  };
+  try {
+    const elk = await getElk();
+    const out = await elk.layout(graph);
+    return new Map(
+      (out.children ?? []).map((c) => [c.id, { x: c.x ?? 0, y: c.y ?? 0 }])
+    );
+  } catch {
+    return gridLayout(req);
+  }
+}
+function gridLayout(req) {
+  const parent = new Map(req.edges.map((e) => [e.target, e.source]));
+  const perDepth = /* @__PURE__ */ new Map();
+  const out = /* @__PURE__ */ new Map();
+  for (const id of req.ids) {
+    let depth = 0;
+    for (let p = parent.get(id); p != null; p = parent.get(p)) depth++;
+    const slot = perDepth.get(depth) ?? 0;
+    perDepth.set(depth, slot + 1);
+    const along = slot * (req.direction === "DOWN" ? req.width + 28 : req.height + 28);
+    const across = depth * (req.direction === "DOWN" ? req.height + 64 : req.width + 64);
+    out.set(
+      id,
+      req.direction === "DOWN" ? { x: along, y: across } : { x: across, y: along }
+    );
+  }
+  return out;
+}
+
+// src/components/OrgChart/shared.ts
+var plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+var defaultOrgChartLabels = {
+  chart: "Organization chart",
+  tree: "Organization",
+  toolbar: "Organization chart tools",
+  search: "Search",
+  searchPlaceholder: "Search name, title or group",
+  results: (n) => n === 0 ? "No matches" : plural(n, "match", "matches"),
+  groupFilter: "Filter by group",
+  allGroups: "All groups",
+  expandAll: "Expand all",
+  collapseAll: "Collapse all",
+  fitView: "Fit to view",
+  minimap: "Minimap",
+  fullscreen: "Full screen",
+  viewToggle: "View",
+  chartView: "Chart",
+  listView: "List",
+  canvasHint: "Use the card buttons to show details or expand reports. Switch to the list view to browse with arrow keys.",
+  expand: (name, n) => `Expand ${name}, ${plural(n, "report", "reports")}`,
+  collapse: (name) => `Collapse ${name}`,
+  directReports: (n) => plural(n, "direct report", "direct reports"),
+  orgSize: (n) => `${n} in organization`,
+  reportsTo: (name) => `Reports to ${name}`,
+  highlighted: "Current",
+  open: "Open",
+  close: "Close details",
+  loading: "Loading organization",
+  empty: "No one to show",
+  error: "Could not load the organization",
+  retry: "Try again"
+};
+var ORG_CHART_GROUP_ACCENTS = [
+  "primary",
+  "info",
+  "success",
+  "warning",
+  "neutral"
+];
+var accentClassesFor = (accent) => accent ? accentClasses[accent] : void 0;
+var ORG_CHART_NODE_SIZE = {
+  person: { width: 248, height: 92 },
+  location: { width: 248, height: 76 }
+};
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function GroupPill({
+  group,
+  accent
+}) {
+  const a = accentClassesFor(accent);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "text-foreground inline-flex max-w-full items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium",
+        a?.tint ?? "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("size-1.5 shrink-0 rounded-full", a?.marker)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: group })
+      ]
+    }
+  );
+}
+function NodeBody({
+  node,
+  variant,
+  accent
+}) {
+  const secondary = variant === "person" ? node.title : node.subtitle;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    variant === "person" ? /* @__PURE__ */ jsx(Avatar, { src: node.avatarUrl, name: node.name, alt: "", size: "md" }) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "bg-primary-500/10 text-primary-700 dark:text-primary-300 flex size-10 shrink-0 items-center justify-center rounded-md",
+        children: /* @__PURE__ */ jsx(Building2, { className: "size-5" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-foreground truncate text-sm font-semibold", children: node.name }),
+      secondary && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: secondary }),
+      node.group && /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex", children: /* @__PURE__ */ jsx(GroupPill, { group: node.group, accent }) })
+    ] })
+  ] });
+}
+var CanvasContext = React3.createContext(null);
+var hiddenHandle = { opacity: 0, pointerEvents: "none" };
+function OrgFlowNodeView({ data }) {
+  const c = React3.useContext(CanvasContext);
+  const { node, ctx, focused } = data;
+  const accent = accentClassesFor(ctx.accent);
+  const start = c.horizontal ? c.rtl ? Position.Right : Position.Left : Position.Top;
+  const end = c.horizontal ? c.rtl ? Position.Left : Position.Right : Position.Bottom;
+  const Chevron = ctx.expanded ? ChevronDown : ChevronRight;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "org-chart-node",
+      "data-highlighted": ctx.highlighted || void 0,
+      "data-matched": ctx.matched || void 0,
+      style: { pointerEvents: "auto" },
+      className: cn(
+        "bg-card text-foreground relative h-full w-full rounded-lg border border-s-4 shadow-sm",
+        "motion-safe:transition-[opacity,box-shadow]",
+        accent?.border ?? "border-border",
+        (ctx.highlighted || focused) && "ring-primary-500 ring-offset-background ring-2 ring-offset-2",
+        ctx.matched && "ring-ring ring-2",
+        ctx.dimmed && "opacity-40",
+        c.classNames?.node
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: start,
+            isConnectable: false,
+            style: hiddenHandle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "dialog",
+            onClick: () => c.onSelect(node.id),
+            className: "nodrag nopan focus-visible:ring-ring flex h-full w-full items-center gap-3 rounded-md px-3 text-start focus-visible:ring-2 focus-visible:outline-none",
+            children: c.renderNode ? c.renderNode(node, ctx) : /* @__PURE__ */ jsx(NodeBody, { node, variant: ctx.variant, accent: ctx.accent })
+          }
+        ),
+        (ctx.highlighted || c.renderBadges) && /* @__PURE__ */ jsxs("span", { className: "absolute end-2 -top-2.5 flex gap-1", children: [
+          ctx.highlighted && /* @__PURE__ */ jsx("span", { className: "bg-primary-600 rounded-full px-1.5 py-0.5 text-[10px] font-bold text-white uppercase shadow-sm", children: c.labels.highlighted }),
+          c.renderBadges?.(node)
+        ] }),
+        ctx.directReports > 0 && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": ctx.expanded,
+            "aria-label": ctx.expanded ? c.labels.collapse(node.name) : c.labels.expand(node.name, ctx.directReports),
+            onClick: () => c.onToggle(node.id),
+            className: cn(
+              "nodrag nopan absolute z-10 flex h-6 min-w-6 items-center justify-center gap-0.5 rounded-full border px-1.5 text-[11px] font-semibold shadow-sm",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              c.horizontal ? "-end-3 top-1/2 -translate-y-1/2" : "-bottom-3 left-1/2 -translate-x-1/2",
+              ctx.expanded ? "border-primary-600 bg-primary-600 text-white" : "border-border bg-card text-foreground hover:border-primary-500"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Chevron, { "aria-hidden": "true", className: "size-3 rtl:-scale-x-100" }),
+              ctx.directReports
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: end,
+            isConnectable: false,
+            style: hiddenHandle
+          }
+        )
+      ]
+    }
+  );
+}
+var nodeTypes = { org: OrgFlowNodeView };
+var flowStyle = {
+  "--xy-background-color": "transparent",
+  "--xy-background-pattern-color": "var(--mieweb-border)",
+  "--xy-edge-stroke": "var(--mieweb-muted-foreground)",
+  "--xy-edge-stroke-width": "1.25",
+  "--xy-node-background-color": "transparent",
+  "--xy-node-border": "none",
+  "--xy-node-border-radius": "0.5rem",
+  "--xy-node-boxshadow-hover": "none",
+  "--xy-node-boxshadow-selected": "none",
+  "--xy-node-color": "inherit",
+  "--xy-minimap-background-color": "var(--mieweb-card)",
+  "--xy-minimap-mask-background-color": "color-mix(in srgb, var(--mieweb-muted) 70%, transparent)",
+  "--xy-minimap-node-background-color": "var(--mieweb-muted-foreground)",
+  "--xy-attribution-background-color": "transparent"
+};
+function OrgChartCanvas(props) {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(CanvasInner, { ...props }) });
+}
+function CanvasInner({
+  forest,
+  visible,
+  nodeContext,
+  focusId,
+  direction,
+  variant,
+  showMinimap,
+  fitTargets,
+  fitRequest,
+  labels,
+  classNames,
+  renderNode,
+  renderBadges,
+  onToggle,
+  onSelect,
+  children
+}) {
+  const { fitView } = useReactFlow();
+  const wrapRef = React3.useRef(null);
+  const [rtl, setRtl] = React3.useState(false);
+  const [positions, setPositions] = React3.useState(null);
+  const size = ORG_CHART_NODE_SIZE[variant];
+  const horizontal = direction === "RIGHT";
+  React3.useLayoutEffect(() => {
+    const el = wrapRef.current;
+    if (el) setRtl(getComputedStyle(el).direction === "rtl");
+  }, []);
+  const edgeList = React3.useMemo(() => {
+    const out = [];
+    for (const v of visible) {
+      const p = forest.parentOf.get(v.node.id);
+      if (p != null) out.push({ source: p, target: v.node.id });
+    }
+    return out;
+  }, [visible, forest]);
+  const layoutKey = JSON.stringify([
+    direction,
+    variant,
+    visible.map((v) => v.node.id),
+    edgeList.map((e) => [e.source, e.target])
+  ]);
+  React3.useEffect(() => {
+    let cancelled = false;
+    void layoutOrgChart({
+      ids: visible.map((v) => v.node.id),
+      edges: edgeList,
+      direction,
+      ...size
+    }).then((p) => {
+      if (!cancelled) setPositions(p);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [layoutKey]);
+  const flowNodes = React3.useMemo(() => {
+    if (!positions) return [];
+    const out = [];
+    for (const v of visible) {
+      const pos = positions.get(v.node.id);
+      if (!pos) continue;
+      out.push({
+        id: v.node.id,
+        type: "org",
+        position: { x: rtl ? -pos.x - size.width : pos.x, y: pos.y },
+        width: size.width,
+        height: size.height,
+        draggable: false,
+        selectable: false,
+        connectable: false,
+        data: {
+          node: v.node,
+          ctx: nodeContext(v),
+          focused: v.node.id === focusId
+        }
+      });
+    }
+    return out;
+  }, [positions, visible, nodeContext, focusId, rtl, size.width, size.height]);
+  const flowEdges = React3.useMemo(
+    () => positions ? edgeList.filter((e) => positions.has(e.source) && positions.has(e.target)).map((e) => ({
+      id: JSON.stringify([e.source, e.target]),
+      source: e.source,
+      target: e.target,
+      type: "smoothstep",
+      focusable: false
+    })) : [],
+    [edgeList, positions]
+  );
+  const fitKey = JSON.stringify(fitTargets);
+  const pendingFit = React3.useRef(true);
+  React3.useEffect(() => {
+    pendingFit.current = true;
+  }, [fitKey, fitRequest]);
+  React3.useEffect(() => {
+    if (!pendingFit.current || !positions || positions.size === 0) return;
+    const targets = fitTargets?.filter((id) => positions.has(id));
+    if (fitTargets && fitTargets.length && !targets?.length) return;
+    const raf = requestAnimationFrame(() => {
+      pendingFit.current = false;
+      void fitView({
+        nodes: targets?.length ? targets.map((id) => ({ id })) : void 0,
+        padding: 0.2,
+        maxZoom: 1.1,
+        duration: prefersReducedMotion() ? 0 : 300
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [positions, fitKey, fitRequest, fitTargets, fitView]);
+  const ctxValue = React3.useMemo(
+    () => ({
+      labels,
+      classNames,
+      horizontal,
+      rtl,
+      renderNode,
+      renderBadges,
+      onToggle,
+      onSelect
+    }),
+    [
+      labels,
+      classNames,
+      horizontal,
+      rtl,
+      renderNode,
+      renderBadges,
+      onToggle,
+      onSelect
+    ]
+  );
+  return /* @__PURE__ */ jsx(CanvasContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      role: "region",
+      "aria-label": labels.chart,
+      "data-slot": "org-chart-canvas",
+      className: cn("relative h-[560px] w-full", classNames?.canvas),
+      children: [
+        /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes: flowNodes,
+            edges: flowEdges,
+            nodeTypes,
+            nodesDraggable: false,
+            nodesConnectable: false,
+            nodesFocusable: false,
+            edgesFocusable: false,
+            elementsSelectable: false,
+            minZoom: 0.1,
+            maxZoom: 2,
+            style: flowStyle,
+            proOptions: { hideAttribution: true },
+            ariaLabelConfig: {
+              "node.a11yDescription.default": labels.canvasHint,
+              "node.a11yDescription.keyboardDisabled": labels.canvasHint,
+              "edge.a11yDescription.default": labels.canvasHint,
+              "minimap.ariaLabel": labels.minimap
+            },
+            children: [
+              /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1 }),
+              /* @__PURE__ */ jsx(Panel, { position: rtl ? "bottom-right" : "bottom-left", children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "https://reactflow.dev",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm text-[10px] focus-visible:ring-2 focus-visible:outline-none",
+                  children: "React Flow"
+                }
+              ) }),
+              showMinimap && /* @__PURE__ */ jsx(
+                MiniMap,
+                {
+                  pannable: true,
+                  zoomable: true,
+                  position: rtl ? "bottom-left" : "bottom-right",
+                  className: "border-border overflow-hidden rounded-md border"
+                }
+              )
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+
+// src/components/OrgChart/tree.ts
+var EMPTY = [];
+function buildOrgForest(nodes) {
+  const byId = /* @__PURE__ */ new Map();
+  for (const n of nodes) if (!byId.has(n.id)) byId.set(n.id, n);
+  const declared = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const n of byId.values()) {
+    const p = n.parentId;
+    if (p != null && p !== n.id && byId.has(p)) {
+      const list = declared.get(p);
+      if (list) list.push(n);
+      else declared.set(p, [n]);
+    } else {
+      roots.push(n);
+    }
+  }
+  const children = /* @__PURE__ */ new Map();
+  const parentOf = /* @__PURE__ */ new Map();
+  const depth = /* @__PURE__ */ new Map();
+  const order = [];
+  const walk = (root) => {
+    parentOf.set(root.id, null);
+    depth.set(root.id, 0);
+    const stack = [root];
+    while (stack.length) {
+      const u = stack.pop();
+      order.push(u.id);
+      const kids = [];
+      for (const c of declared.get(u.id) ?? EMPTY) {
+        if (depth.has(c.id)) continue;
+        depth.set(c.id, depth.get(u.id) + 1);
+        parentOf.set(c.id, u.id);
+        kids.push(c);
+      }
+      if (kids.length) children.set(u.id, kids);
+      for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i]);
+    }
+  };
+  for (const r of roots) walk(r);
+  for (const n of byId.values()) {
+    if (depth.has(n.id)) continue;
+    roots.push(n);
+    walk(n);
+  }
+  const orgSize = /* @__PURE__ */ new Map();
+  for (let i = order.length - 1; i >= 0; i--) {
+    const id = order[i];
+    let size = 0;
+    for (const c of children.get(id) ?? EMPTY) size += 1 + orgSize.get(c.id);
+    orgSize.set(id, size);
+  }
+  return { byId, roots, children, parentOf, depth, orgSize };
+}
+function childrenOf(forest, id) {
+  return forest.children.get(id) ?? EMPTY;
+}
+function ancestorsOf(forest, id) {
+  const out = [];
+  let p = forest.parentOf.get(id) ?? null;
+  while (p != null) {
+    out.push(p);
+    p = forest.parentOf.get(p) ?? null;
+  }
+  return out;
+}
+function initialExpanded(forest, levels) {
+  const out = /* @__PURE__ */ new Set();
+  for (const [id, d] of forest.depth) {
+    if (d < levels - 1 && forest.children.has(id)) out.add(id);
+  }
+  return out;
+}
+function allExpandable(forest) {
+  return new Set(forest.children.keys());
+}
+function visibleNodes(forest, expanded) {
+  const out = [];
+  const visit = (n, depth) => {
+    out.push({ node: n, depth });
+    if (!expanded.has(n.id)) return;
+    for (const c of childrenOf(forest, n.id)) visit(c, depth + 1);
+  };
+  for (const r of forest.roots) visit(r, 0);
+  return out;
+}
+function matchesQuery(node, query) {
+  const q = query.trim().toLocaleLowerCase();
+  if (!q) return false;
+  return [node.name, node.title, node.subtitle, node.group].some(
+    (v) => v?.toLocaleLowerCase().includes(q)
+  );
+}
+function distinctGroups(nodes) {
+  const set = /* @__PURE__ */ new Set();
+  for (const n of nodes) if (n.group) set.add(n.group);
+  return [...set].sort((a, b) => a.localeCompare(b));
+}
+function OrgChartTree({
+  forest,
+  visible,
+  nodeContext,
+  selectedId,
+  labels,
+  classNames,
+  renderBadges,
+  onToggle,
+  onSelect
+}) {
+  const listRef = React3.useRef(null);
+  const items = React3.useRef(/* @__PURE__ */ new Map());
+  const [activeId, setActiveId] = React3.useState(selectedId);
+  const active = activeId && visible.some((v) => v.node.id === activeId) ? activeId : visible[0]?.node.id ?? null;
+  const move = (id) => {
+    if (!id) return;
+    setActiveId(id);
+    items.current.get(id)?.focus();
+  };
+  const onKeyDown = (e) => {
+    const index = visible.findIndex((v) => v.node.id === active);
+    if (index < 0) return;
+    const current = visible[index];
+    const id = current.node.id;
+    const hasKids = childrenOf(forest, id).length > 0;
+    const expanded = nodeContext(current).expanded;
+    const rtl = !!listRef.current && getComputedStyle(listRef.current).direction === "rtl";
+    let key = e.key;
+    if (rtl && key === "ArrowLeft") key = "ArrowRight";
+    else if (rtl && key === "ArrowRight") key = "ArrowLeft";
+    switch (key) {
+      case "ArrowDown":
+        move(visible[index + 1]?.node.id);
+        break;
+      case "ArrowUp":
+        move(visible[index - 1]?.node.id);
+        break;
+      case "Home":
+        move(visible[0]?.node.id);
+        break;
+      case "End":
+        move(visible[visible.length - 1]?.node.id);
+        break;
+      case "ArrowRight":
+        if (hasKids && !expanded) onToggle(id);
+        else if (hasKids) move(childrenOf(forest, id)[0]?.id);
+        break;
+      case "ArrowLeft":
+        if (hasKids && expanded) onToggle(id);
+        else move(forest.parentOf.get(id) ?? void 0);
+        break;
+      case "Enter":
+      case " ":
+        onSelect(id);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+  };
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: listRef,
+      role: "tree",
+      "aria-label": labels.tree,
+      "data-slot": "org-chart-tree",
+      className: cn("max-h-[560px] overflow-auto p-2", classNames?.tree),
+      children: visible.map((v) => {
+        const { node } = v;
+        const ctx = nodeContext(v);
+        const parent = forest.parentOf.get(node.id);
+        const siblings = parent != null ? childrenOf(forest, parent) : forest.roots;
+        const Chevron = ctx.expanded ? ChevronDown : ChevronRight;
+        const secondary = ctx.variant === "person" ? node.title : node.subtitle;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            ref: (el) => {
+              if (el) items.current.set(node.id, el);
+              else items.current.delete(node.id);
+            },
+            role: "treeitem",
+            "aria-level": v.depth + 1,
+            "aria-setsize": siblings.length,
+            "aria-posinset": siblings.indexOf(node) + 1,
+            "aria-expanded": ctx.directReports > 0 ? ctx.expanded : void 0,
+            "aria-selected": node.id === selectedId,
+            "aria-current": ctx.highlighted || void 0,
+            tabIndex: node.id === active ? 0 : -1,
+            "data-slot": "org-chart-tree-item",
+            "data-matched": ctx.matched || void 0,
+            onFocus: () => setActiveId(node.id),
+            onKeyDown,
+            onClick: (e) => {
+              setActiveId(node.id);
+              const onChevron = e.target.closest(
+                '[data-slot="org-chart-tree-toggle"]'
+              );
+              if (onChevron && ctx.directReports > 0) onToggle(node.id);
+              else onSelect(node.id);
+            },
+            style: { paddingInlineStart: `${v.depth * 1.25 + 0.25}rem` },
+            className: cn(
+              "flex cursor-pointer items-center gap-2 rounded-md py-1.5 pe-2 text-sm",
+              "hover:bg-muted focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              node.id === selectedId && "bg-primary-500/10",
+              ctx.matched && "ring-ring ring-1",
+              ctx.dimmed && "opacity-50",
+              classNames?.treeItem
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-slot": "org-chart-tree-toggle",
+                  className: "text-muted-foreground flex size-5 shrink-0 items-center justify-center",
+                  children: ctx.directReports > 0 && /* @__PURE__ */ jsx(Chevron, { className: "size-4 rtl:-scale-x-100" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: node.name }),
+                secondary && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: secondary })
+              ] }),
+              ctx.highlighted && /* @__PURE__ */ jsx("span", { className: "bg-primary-600 rounded-full px-1.5 text-[10px] font-bold text-white uppercase", children: labels.highlighted }),
+              renderBadges?.(node),
+              node.group && /* @__PURE__ */ jsx(GroupPill, { group: node.group, accent: ctx.accent }),
+              ctx.directReports > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: ctx.directReports })
+            ]
+          },
+          node.id
+        );
+      })
+    }
+  );
+}
+var isNarrow = () => typeof window !== "undefined" && !!window.matchMedia?.("(max-width: 639px)").matches;
+var union = (a, ids) => {
+  let out = null;
+  for (const id of ids) {
+    if (a.has(id)) continue;
+    out ??= new Set(a);
+    out.add(id);
+  }
+  return out ?? a;
+};
+var ancestorsOfAll = (forest, ids) => {
+  const out = [];
+  for (const id of ids) out.push(...ancestorsOf(forest, id));
+  return out;
+};
+var OrgChart = React3.forwardRef(
+  function OrgChart2({
+    nodes,
+    loading = false,
+    error = null,
+    onRetry,
+    nodeVariant = "person",
+    direction = "DOWN",
+    initialDepth = 2,
+    focusId = null,
+    highlightedId = null,
+    defaultQuery = "",
+    defaultGroup = "",
+    view: viewProp,
+    defaultView,
+    onViewChange,
+    defaultShowMinimap = false,
+    getGroupAccent,
+    onSelect,
+    onOpen,
+    getHref,
+    renderNode,
+    renderBadges,
+    renderDetail,
+    emptyState,
+    labels: labelsProp,
+    classNames,
+    className,
+    ...rest
+  }, ref) {
+    const labels = React3.useMemo(
+      () => ({ ...defaultOrgChartLabels, ...labelsProp }),
+      [labelsProp]
+    );
+    const rootRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => rootRef.current);
+    const searchId = React3.useId();
+    const forest = React3.useMemo(() => buildOrgForest(nodes), [nodes]);
+    const groups = React3.useMemo(() => distinctGroups(nodes), [nodes]);
+    const accentOf = React3.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      groups.forEach(
+        (g, i) => map.set(
+          g,
+          getGroupAccent?.(g, i) ?? ORG_CHART_GROUP_ACCENTS[i % ORG_CHART_GROUP_ACCENTS.length]
+        )
+      );
+      return map;
+    }, [groups, getGroupAccent]);
+    const [expanded, setExpanded] = React3.useState(
+      () => union(
+        initialExpanded(forest, initialDepth),
+        ancestorsOfAll(
+          forest,
+          [focusId, highlightedId].filter((id) => !!id)
+        )
+      )
+    );
+    const seeded = React3.useRef(forest.byId.size > 0);
+    const [query, setQuery] = React3.useState(defaultQuery);
+    const [groupState, setGroup] = React3.useState(defaultGroup);
+    const group = groupState && groups.includes(groupState) ? groupState : "";
+    const [selectedId, setSelectedId] = React3.useState(null);
+    const [viewState, setViewState] = React3.useState(
+      defaultView ?? "chart"
+    );
+    const appliedNarrowDefault = React3.useRef(false);
+    React3.useEffect(() => {
+      if (appliedNarrowDefault.current) return;
+      appliedNarrowDefault.current = true;
+      if (defaultView === void 0 && isNarrow()) setViewState("list");
+    }, [defaultView]);
+    const view = viewProp ?? viewState;
+    const [showMinimap, setShowMinimap] = React3.useState(defaultShowMinimap);
+    const [nativeFull, setNativeFull] = React3.useState(false);
+    const [pseudoFull, setPseudoFull] = React3.useState(false);
+    const fullscreen = nativeFull || pseudoFull;
+    const [fitRequest, setFitRequest] = React3.useState(0);
+    const returnFocus = React3.useRef(null);
+    React3.useEffect(() => {
+      if (seeded.current || forest.byId.size === 0) return;
+      seeded.current = true;
+      setExpanded((prev) => union(prev, initialExpanded(forest, initialDepth)));
+    }, [forest, initialDepth]);
+    React3.useEffect(() => {
+      const ids = [focusId, highlightedId].filter(
+        (id) => !!id && forest.byId.has(id)
+      );
+      if (ids.length)
+        setExpanded((prev) => union(prev, ancestorsOfAll(forest, ids)));
+    }, [forest, focusId, highlightedId]);
+    const matches = React3.useMemo(() => {
+      if (!query.trim()) return null;
+      const out = [];
+      for (const n of forest.byId.values())
+        if (matchesQuery(n, query)) out.push(n.id);
+      return out;
+    }, [forest, query]);
+    const groupMembers = React3.useMemo(() => {
+      if (!group) return null;
+      const out = [];
+      for (const n of forest.byId.values())
+        if (n.group === group) out.push(n.id);
+      return out;
+    }, [forest, group]);
+    const revealKey = JSON.stringify([matches, groupMembers]);
+    React3.useEffect(() => {
+      const ids = [...matches ?? [], ...groupMembers ?? []];
+      if (ids.length)
+        setExpanded((prev) => union(prev, ancestorsOfAll(forest, ids)));
+    }, [revealKey, forest]);
+    React3.useEffect(() => {
+      const onChange = () => setNativeFull(
+        !!rootRef.current && document.fullscreenElement === rootRef.current
+      );
+      document.addEventListener("fullscreenchange", onChange);
+      return () => document.removeEventListener("fullscreenchange", onChange);
+    }, []);
+    React3.useEffect(() => {
+      if (!pseudoFull) return;
+      const onKey = (e) => {
+        if (e.key === "Escape") setPseudoFull(false);
+      };
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [pseudoFull]);
+    const visible = React3.useMemo(
+      () => visibleNodes(forest, expanded),
+      [forest, expanded]
+    );
+    const matchSet = React3.useMemo(() => new Set(matches ?? []), [matches]);
+    const groupSet = React3.useMemo(
+      () => groupMembers ? new Set(groupMembers) : null,
+      [groupMembers]
+    );
+    const nodeContext = React3.useCallback(
+      (v) => ({
+        variant: nodeVariant,
+        depth: v.depth,
+        directReports: childrenOf(forest, v.node.id).length,
+        expanded: expanded.has(v.node.id),
+        highlighted: v.node.id === highlightedId,
+        matched: matchSet.has(v.node.id),
+        dimmed: !!groupSet && !groupSet.has(v.node.id),
+        accent: v.node.group ? accentOf.get(v.node.group) : void 0
+      }),
+      [
+        nodeVariant,
+        forest,
+        expanded,
+        highlightedId,
+        matchSet,
+        groupSet,
+        accentOf
+      ]
+    );
+    const fitTargets = React3.useMemo(() => {
+      if (matches?.length) return matches;
+      if (groupMembers?.length) return groupMembers;
+      if (focusId && forest.byId.has(focusId)) return [focusId];
+      return null;
+    }, [matches, groupMembers, focusId, forest]);
+    const toggle = React3.useCallback((id) => {
+      setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }, []);
+    const select = React3.useCallback(
+      (id) => {
+        if (id && typeof document !== "undefined")
+          returnFocus.current = document.activeElement;
+        setSelectedId(id);
+        onSelect?.(id, id ? forest.byId.get(id) ?? null : null);
+      },
+      [forest, onSelect]
+    );
+    const closeDetail = React3.useCallback(() => {
+      select(null);
+      const el = returnFocus.current;
+      if (el?.isConnected) el.focus();
+    }, [select]);
+    const setView = (v) => {
+      setViewState(v);
+      onViewChange?.(v);
+    };
+    const toggleFullscreen = async () => {
+      const el = rootRef.current;
+      if (!el) return;
+      if (fullscreen) {
+        setPseudoFull(false);
+        if (document.fullscreenElement) await document.exitFullscreen?.();
+        return;
+      }
+      try {
+        if (!el.requestFullscreen) throw new Error("unsupported");
+        await el.requestFullscreen();
+      } catch {
+        setPseudoFull(true);
+      }
+    };
+    const stateBox = (content) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "org-chart-state",
+        className: cn(
+          "text-muted-foreground flex min-h-48 flex-col items-center justify-center gap-3 p-6 text-center text-sm",
+          classNames?.state
+        ),
+        children: content
+      }
+    );
+    let body;
+    if (error) {
+      body = stateBox(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              role: "alert",
+              className: "text-destructive-700 dark:text-destructive-400",
+              children: labels.error
+            }
+          ),
+          onRetry && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: labels.retry })
+        ] })
+      );
+    } else if (loading) {
+      body = stateBox(
+        /* @__PURE__ */ jsxs("div", { role: "status", className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+          /* @__PURE__ */ jsx("span", { children: labels.loading })
+        ] })
+      );
+    } else if (forest.byId.size === 0) {
+      body = stateBox(emptyState ?? /* @__PURE__ */ jsx("p", { children: labels.empty }));
+    }
+    const selected = selectedId ? forest.byId.get(selectedId) ?? null : null;
+    const detail = selected && /* @__PURE__ */ jsx(
+      DetailPanel,
+      {
+        node: selected,
+        forest,
+        variant: nodeVariant,
+        accent: selected.group ? accentOf.get(selected.group) : void 0,
+        labels,
+        className: classNames?.detail,
+        onClose: closeDetail,
+        onOpen,
+        getHref,
+        renderDetail,
+        renderBadges
+      },
+      selected.id
+    );
+    const iconButton = (label, icon, onClick, pressed) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        "aria-label": label,
+        title: label,
+        "aria-pressed": pressed,
+        onClick,
+        className: cn(pressed && "bg-primary-500/10"),
+        children: icon
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rootRef,
+        "data-slot": "org-chart",
+        "data-view": view,
+        className: cn(
+          "bg-card text-foreground border-border relative flex flex-col overflow-hidden rounded-lg border",
+          fullscreen && "bg-background",
+          pseudoFull && "fixed inset-0 z-50 rounded-none",
+          className,
+          classNames?.root
+        ),
+        ...rest,
+        children: body ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "toolbar",
+              "aria-label": labels.toolbar,
+              "data-slot": "org-chart-toolbar",
+              className: cn(
+                "border-border flex flex-wrap items-center gap-2 border-b p-2",
+                classNames?.toolbar
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative min-w-40 flex-1", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: searchId, className: "sr-only", children: labels.search }),
+                  /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      "aria-hidden": "true",
+                      className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: searchId,
+                      type: "search",
+                      value: query,
+                      placeholder: labels.searchPlaceholder,
+                      onChange: (e) => setQuery(e.target.value),
+                      className: "border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full rounded-md border ps-8 pe-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    role: "status",
+                    "aria-live": "polite",
+                    className: "text-muted-foreground min-w-0 text-xs empty:hidden",
+                    children: matches ? labels.results(matches.length) : ""
+                  }
+                ),
+                groups.length > 0 && /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": labels.groupFilter,
+                    value: group,
+                    onChange: (e) => setGroup(e.target.value),
+                    className: "border-border bg-background text-foreground focus-visible:ring-ring h-9 max-w-48 rounded-md border px-2 text-sm focus-visible:ring-2 focus-visible:outline-none",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", children: labels.allGroups }),
+                      groups.map((g) => /* @__PURE__ */ jsx("option", { value: g, children: g }, g))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "ms-auto flex flex-wrap items-center gap-1", children: [
+                  iconButton(
+                    labels.expandAll,
+                    /* @__PURE__ */ jsx(UnfoldVertical, { "aria-hidden": "true", className: "size-4" }),
+                    () => setExpanded(allExpandable(forest))
+                  ),
+                  iconButton(
+                    labels.collapseAll,
+                    /* @__PURE__ */ jsx(FoldVertical, { "aria-hidden": "true", className: "size-4" }),
+                    () => setExpanded(/* @__PURE__ */ new Set())
+                  ),
+                  view === "chart" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    iconButton(
+                      labels.fitView,
+                      /* @__PURE__ */ jsx(Scan, { "aria-hidden": "true", className: "size-4" }),
+                      () => setFitRequest((n) => n + 1)
+                    ),
+                    iconButton(
+                      labels.minimap,
+                      /* @__PURE__ */ jsx(Map$1, { "aria-hidden": "true", className: "size-4" }),
+                      () => setShowMinimap((v) => !v),
+                      showMinimap
+                    )
+                  ] }),
+                  iconButton(
+                    labels.fullscreen,
+                    fullscreen ? /* @__PURE__ */ jsx(Minimize, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(Maximize, { "aria-hidden": "true", className: "size-4" }),
+                    () => void toggleFullscreen(),
+                    fullscreen
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "group",
+                      "aria-label": labels.viewToggle,
+                      className: "border-border ms-1 flex rounded-md border p-0.5",
+                      children: [
+                        ["chart", labels.chartView, Network],
+                        ["list", labels.listView, List]
+                      ].map(([v, label, Icon]) => /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-pressed": view === v,
+                          onClick: () => setView(v),
+                          className: cn(
+                            "focus-visible:ring-ring flex h-7 items-center gap-1 rounded px-2 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none",
+                            view === v ? "bg-primary-500/10 text-foreground" : "text-muted-foreground hover:bg-muted"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3.5" }),
+                            label
+                          ]
+                        },
+                        v
+                      ))
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          view === "chart" ? /* @__PURE__ */ jsx(
+            OrgChartCanvas,
+            {
+              forest,
+              visible,
+              nodeContext,
+              focusId,
+              direction,
+              variant: nodeVariant,
+              showMinimap,
+              fitTargets,
+              fitRequest,
+              labels,
+              classNames: fullscreen ? {
+                ...classNames,
+                canvas: cn(classNames?.canvas, "h-auto flex-1")
+              } : classNames,
+              renderNode,
+              renderBadges,
+              onToggle: toggle,
+              onSelect: select,
+              children: detail
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: cn("relative", fullscreen && "flex-1"), children: [
+            /* @__PURE__ */ jsx(
+              OrgChartTree,
+              {
+                forest,
+                visible,
+                nodeContext,
+                selectedId,
+                labels,
+                classNames,
+                renderBadges,
+                onToggle: toggle,
+                onSelect: select
+              }
+            ),
+            detail
+          ] })
+        ] })
+      }
+    );
+  }
+);
+function DetailPanel({
+  node,
+  forest,
+  variant,
+  accent,
+  labels,
+  className,
+  onClose,
+  onOpen,
+  getHref,
+  renderDetail,
+  renderBadges
+}) {
+  const ref = React3.useRef(null);
+  const closeRef = React3.useRef(onClose);
+  React3.useEffect(() => {
+    closeRef.current = onClose;
+  });
+  React3.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      e.stopPropagation();
+      closeRef.current();
+    };
+    el.addEventListener("keydown", onKey);
+    return () => el.removeEventListener("keydown", onKey);
+  }, []);
+  const directReports = childrenOf(forest, node.id).length;
+  const orgSize = forest.orgSize.get(node.id) ?? 0;
+  const parentId = forest.parentOf.get(node.id);
+  const parent = parentId ? forest.byId.get(parentId) ?? null : null;
+  const secondary = variant === "person" ? node.title : node.subtitle;
+  const href = getHref?.(node.id, node);
+  const actionClass = "bg-primary-600 hover:bg-primary-700 focus-visible:ring-ring inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm font-medium text-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-label": node.name,
+      tabIndex: -1,
+      "data-slot": "org-chart-detail",
+      className: cn(
+        "bg-card text-foreground border-border absolute end-3 top-3 z-10 w-72 max-w-[calc(100%-1.5rem)] rounded-lg border p-4 shadow-lg focus:outline-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.close,
+            onClick: onClose,
+            className: "text-muted-foreground hover:bg-muted focus-visible:ring-ring absolute end-2 top-2 rounded p-1 focus-visible:ring-2 focus-visible:outline-none",
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+          }
+        ),
+        renderDetail ? renderDetail(node, { directReports, orgSize, parent, close: onClose }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 pe-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            variant === "person" && /* @__PURE__ */ jsx(Avatar, { src: node.avatarUrl, name: node.name, alt: "", size: "lg" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-foreground font-semibold", children: node.name }),
+              secondary && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: secondary })
+            ] })
+          ] }),
+          (node.group || renderBadges) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+            node.group && /* @__PURE__ */ jsx(GroupPill, { group: node.group, accent }),
+            renderBadges?.(node)
+          ] }),
+          /* @__PURE__ */ jsxs("ul", { className: "text-muted-foreground flex flex-col gap-1 text-sm", children: [
+            parent && /* @__PURE__ */ jsx("li", { children: labels.reportsTo(parent.name) }),
+            /* @__PURE__ */ jsx("li", { children: labels.directReports(directReports) }),
+            orgSize > directReports && /* @__PURE__ */ jsx("li", { children: labels.orgSize(orgSize) })
+          ] }),
+          href ? /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href,
+              className: cn(actionClass, "self-start"),
+              onClick: (e) => {
+                if (!onOpen || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                  return;
+                e.preventDefault();
+                onOpen(node.id, node);
+              },
+              children: [
+                labels.open,
+                /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-3.5" })
+              ]
+            }
+          ) : onOpen && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(actionClass, "self-start"),
+              onClick: () => onOpen(node.id, node),
+              children: labels.open
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ORG_CHART_GROUP_ACCENTS, ORG_CHART_LAYOUT_OPTIONS, OrgChart, defaultOrgChartLabels };
+//# sourceMappingURL=org-chart.js.map
+//# sourceMappingURL=org-chart.js.map