@geomak/ui 2.0.0 → 4.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
+import React8, { createContext, useState, useEffect, useMemo, useContext, useRef, useId, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
@@ -1432,70 +1432,208 @@ function ContextMenuLabel({ icon, value }) {
 function ChevronRight2() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4 flex-shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
-function Wizard({ children, steps, storageKey = "po_wizard" }) {
-  const wizardRef = useRef(null);
-  const [activeStep, setActiveStep] = useState(0);
-  const [targetBbox, setTargetBbox] = useState(null);
-  const HIGHLIGHTED = useMemo(
-    () => ["border", "border-4", "border-prussian-blue", "pointer-events-none"],
-    []
-  );
-  const closeWizard = useCallback(() => {
-    steps[activeStep]?.stepRef.current?.classList.remove(...HIGHLIGHTED);
-    if (wizardRef.current) wizardRef.current.style.display = "none";
-  }, [HIGHLIGHTED, steps, activeStep]);
-  useEffect(() => {
-    const visited = JSON.parse(localStorage.getItem(storageKey) ?? "false");
-    if (visited) {
-      closeWizard();
+function readDismissed(key) {
+  if (key === null) return false;
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(key) === "true";
+  } catch {
+    return false;
+  }
+}
+function writeDismissed(key) {
+  if (key === null) return;
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, "true");
+  } catch {
+  }
+}
+function useTargetBbox(ref) {
+  const [bbox, setBbox] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref?.current;
+    if (!el) {
+      setBbox(null);
       return;
     }
-    const el = steps[activeStep]?.stepRef.current;
-    if (el) {
-      setTargetBbox(el.getBoundingClientRect());
-      el.classList.add(...HIGHLIGHTED);
-    }
-  }, [closeWizard, steps, activeStep, HIGHLIGHTED, storageKey]);
-  const onStepChange = () => {
-    if (steps[activeStep + 1]) {
-      steps[activeStep].stepRef.current?.classList.remove(...HIGHLIGHTED);
-      const nextEl = steps[activeStep + 1].stepRef.current;
-      if (nextEl) setTargetBbox(nextEl.getBoundingClientRect());
-      setActiveStep(activeStep + 1);
-    } else {
-      localStorage.setItem(storageKey, "true");
-      closeWizard();
-    }
-  };
-  const step = steps[activeStep];
-  const left = step && targetBbox ? step.positioning === "natural" ? isNaN(targetBbox.width + 20) ? 0 : targetBbox.width + 20 : isNaN(targetBbox.width / 2) ? 0 : targetBbox.width / 2 : "auto";
-  const top = step && targetBbox ? step.positioning === "natural" ? isNaN(targetBbox.y + 10) ? 0 : targetBbox.y + 10 : isNaN(targetBbox.height / 2) ? 0 : targetBbox.height / 2 : "auto";
-  return /* @__PURE__ */ jsxs("div", { className: "h-full p-1 rounded-lg w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute", ref: wizardRef, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: { left, top },
-        className: "absolute bg-white rounded-lg p-2 w-[220px] z-50 text-prussian-blue drop-shadow-md transition-all duration-300",
-        children: [
-          step?.description,
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-end", children: [
-            /* @__PURE__ */ jsxs("span", { className: "flex h-3 w-3 relative left-14 top-4", children: [
-              /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-3 w-3 rounded-full bg-dark-cornflower-blue opacity-75" }),
-              /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-3 w-3 bg-dark-cornflower-blue" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                onClick: onStepChange,
-                content: activeStep === steps.length - 1 ? "Close" : "Next",
-                style: { width: 55, padding: "5px 10px", margin: "0" }
-              }
-            )
-          ] })
-        ]
+    const update = () => setBbox(el.getBoundingClientRect());
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    ro?.observe(el);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      ro?.disconnect();
+    };
+  }, [ref]);
+  return bbox;
+}
+var TOOLTIP_WIDTH = 280;
+var TOOLTIP_GAP = 12;
+function tooltipStyleFor(bbox, placement) {
+  const pl = placement ?? "right";
+  if (pl === "right") return { left: bbox.right + TOOLTIP_GAP, top: bbox.top + bbox.height / 2, transform: "translateY(-50%)", width: TOOLTIP_WIDTH };
+  if (pl === "left") return { left: bbox.left - TOOLTIP_WIDTH - TOOLTIP_GAP, top: bbox.top + bbox.height / 2, transform: "translateY(-50%)", width: TOOLTIP_WIDTH };
+  if (pl === "bottom") return { left: bbox.left + bbox.width / 2, top: bbox.bottom + TOOLTIP_GAP, transform: "translateX(-50%)", width: TOOLTIP_WIDTH };
+  return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
+}
+function useFocusTrap(containerRef, active) {
+  useEffect(() => {
+    if (!active) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const t = setTimeout(() => {
+      const first = el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      first?.focus();
+    }, 0);
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const focusables = el.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusables.length === 0) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
       }
-    ) }),
-    children
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      clearTimeout(t);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [containerRef, active]);
+}
+function Wizard({
+  children,
+  steps,
+  storageKey = "oxygen.wizard.completed",
+  dismissible = true,
+  onComplete,
+  onSkip
+}) {
+  const tooltipRef = useRef(null);
+  const tooltipTitleId = useId();
+  const tooltipBodyId = useId();
+  const [open, setOpen] = useState(() => steps.length > 0 && !readDismissed(storageKey));
+  const [activeIndex, setActiveIndex] = useState(0);
+  const step = steps[activeIndex];
+  const bbox = useTargetBbox(step?.stepRef);
+  useFocusTrap(tooltipRef, open);
+  useEffect(() => {
+    if (!open || !dismissible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleSkip();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, dismissible]);
+  const handleSkip = useCallback(() => {
+    writeDismissed(storageKey);
+    setOpen(false);
+    onSkip?.();
+  }, [storageKey, onSkip]);
+  const handleComplete = useCallback(() => {
+    writeDismissed(storageKey);
+    setOpen(false);
+    onComplete?.();
+  }, [storageKey, onComplete]);
+  const handleNext = () => {
+    if (activeIndex < steps.length - 1) setActiveIndex((i) => i + 1);
+    else handleComplete();
+  };
+  const handlePrev = () => {
+    if (activeIndex > 0) setActiveIndex((i) => i - 1);
+  };
+  const highlightStyle = bbox ? {
+    left: bbox.left - 4,
+    top: bbox.top - 4,
+    width: bbox.width + 8,
+    height: bbox.height + 8
+  } : { display: "none" };
+  const tooltipStyle = bbox ? tooltipStyleFor(bbox, step?.placement) : { display: "none" };
+  const isLast = activeIndex === steps.length - 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    open && step && /* @__PURE__ */ jsxs(Portal, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-[7000000] bg-foreground/40 backdrop-blur-[1px] pointer-events-auto",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed z-[7000001] pointer-events-none rounded-md ring-2 ring-accent ring-offset-2 ring-offset-background transition-all duration-200",
+          style: highlightStyle,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": step.title ? tooltipTitleId : void 0,
+          "aria-describedby": tooltipBodyId,
+          className: "fixed z-[7000002] rounded-lg bg-surface text-foreground border border-border shadow-xl p-4 pointer-events-auto",
+          style: tooltipStyle,
+          children: [
+            step.title && /* @__PURE__ */ jsx("h3", { id: tooltipTitleId, className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
+            /* @__PURE__ */ jsx("div", { id: tooltipBodyId, className: "text-sm text-foreground-secondary leading-relaxed", children: step.description }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground-muted tabular-nums", children: [
+                activeIndex + 1,
+                " / ",
+                steps.length
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                dismissible && !isLast && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    content: "Skip",
+                    onClick: handleSkip
+                  }
+                ),
+                activeIndex > 0 && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    content: "Back",
+                    onClick: handlePrev
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    content: isLast ? "Done" : "Next",
+                    onClick: handleNext
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
   ] });
 }
 var SearchInput = React8.forwardRef(function SearchInput2({
@@ -3005,6 +3143,26 @@ function AutoComplete({
     }
   ) });
 }
+function flattenVisible(items, expanded, depth = 0, out = []) {
+  for (const node of items) {
+    const isParent2 = !!node.children && node.children.length > 0;
+    out.push({ node, depth, isParent: isParent2 });
+    if (isParent2 && expanded.has(node.key)) {
+      flattenVisible(node.children, expanded, depth + 1, out);
+    }
+  }
+  return out;
+}
+function findNodeByKey(items, key) {
+  for (const n of items) {
+    if (n.key === key) return n;
+    if (n.children) {
+      const found = findNodeByKey(n.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+}
 function TreeSelect({
   label,
   name,
@@ -3013,106 +3171,231 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   errorMessage,
-  style = {},
+  style,
   htmlFor,
-  items = []
+  items = [],
+  placeholder = "Select\u2026",
+  parentsSelectable = true,
+  defaultExpandedKeys = []
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
   const [open, setOpen] = useState(false);
-  const [hoveredItem, setHoveredItem] = useState(null);
-  const [innerItems, setInnerItems] = useState([]);
+  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedKeys));
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef(null);
+  const visible = useMemo(() => flattenVisible(items, expanded), [items, expanded]);
   useEffect(() => {
-    setInnerItems(items);
-  }, [items]);
-  const selectItem = (key) => {
+    if (!open) return;
+    const selectedIdx = visible.findIndex((v) => v.node.key === value);
+    setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
+  }, [open, visible, value]);
+  const selectedNode = useMemo(
+    () => value != null ? findNodeByKey(items, value) : null,
+    [items, value]
+  );
+  const toggleExpand = (key) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const selectKey = (key) => {
     onChange?.({ target: { value: key, id: htmlFor, name } });
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        children: [
-          label && /* @__PURE__ */ jsx(
-            "label",
-            {
-              className: "text-md font-bold ml-1 max-content select-none text-prussian-blue dark:text-white",
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-            /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  const onListKey = (e) => {
+    if (visible.length === 0) return;
+    const cur = visible[activeIndex];
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, visible.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (cur.isParent) {
+        if (!expanded.has(cur.node.key)) toggleExpand(cur.node.key);
+        else setActiveIndex((i) => Math.min(i + 1, visible.length - 1));
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      if (cur.isParent && expanded.has(cur.node.key)) {
+        toggleExpand(cur.node.key);
+      } else if (cur.depth > 0) {
+        for (let i = activeIndex - 1; i >= 0; i--) {
+          if (visible[i].depth < cur.depth) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+      }
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (cur.node.disabled) return;
+      if (cur.isParent && !parentsSelectable) {
+        toggleExpand(cur.node.key);
+      } else {
+        selectKey(cur.node.key);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          htmlFor,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: htmlFor,
+            type: "button",
+            style,
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-haspopup": "listbox",
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            disabled,
+            className: `flex items-center justify-between h-9 rounded-lg border ${hasError ? "border-status-error" : "border-border"} px-3 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[240px]" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm truncate text-left", children: selectedNode ? selectedNode.label : /* @__PURE__ */ jsx("span", { className: "text-foreground-muted", children: placeholder }) }),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            align: "start",
+            sideOffset: 4,
+            style: { width: style?.width || 280 },
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+              listRef.current?.focus();
+            },
+            children: /* @__PURE__ */ jsx(
               "div",
               {
-                id: htmlFor,
-                style,
-                role: "combobox",
-                "aria-expanded": open,
-                "aria-haspopup": "listbox",
-                className: `flex items-center justify-between relative h-9 rounded-lg p-2 cursor-pointer ${disabled ? "cursor-not-allowed bg-disabled" : "bg-white"}`,
-                tabIndex: disabled ? -1 : 0,
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: `h-7 ${!style?.width ? "min-w-[240px]" : ""} focus:outline-none text-prussian-blue flex items-center gap-1`, children: Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    value.slice(0, 1).map((val, id) => /* @__PURE__ */ jsx(
-                      DropdownPill,
-                      {
-                        hasSiblings: value.length > 1,
-                        value: innerItems.find((it) => it.key === val)?.label
-                      },
-                      id
-                    )),
-                    value.length > 1 && /* @__PURE__ */ jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                  ] }) : value != null ? /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label }) : null }),
-                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-300 ml-2 ${open ? "rotate-180" : "rotate-0"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-              Popover.Content,
-              {
-                align: "start",
-                sideOffset: 4,
-                style: { width: style?.width || 240 },
-                className: "bg-ice rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-                children: /* @__PURE__ */ jsx("div", { role: "listbox", className: "max-h-40 overflow-y-auto", children: innerItems.map((item, idx) => /* @__PURE__ */ jsxs(
-                  "div",
+                ref: listRef,
+                role: "tree",
+                tabIndex: -1,
+                "aria-activedescendant": visible[activeIndex] ? `tree-opt-${visible[activeIndex].node.key}` : void 0,
+                onKeyDown: onListKey,
+                className: "max-h-72 overflow-y-auto outline-none",
+                children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-sm text-foreground-secondary text-center", children: "No items" }) : visible.map((v, idx) => /* @__PURE__ */ jsx(
+                  TreeNodeRow,
                   {
-                    role: "option",
-                    "aria-selected": value === item.key,
-                    "aria-rowindex": idx,
-                    className: `flex items-center justify-between p-2 hover:bg-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer`,
-                    onClick: () => selectItem(item.key),
-                    onMouseEnter: () => setHoveredItem(item.key),
-                    onMouseLeave: () => setHoveredItem(null),
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                        item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
-                        item.label
-                      ] }),
-                      value === item.key && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M4 10l4.5 4.5L16 6",
-                          stroke: hoveredItem === item.key ? "#fff" : colors_default.PALETTE["prussian-blue"],
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ) })
-                    ]
+                    node: v.node,
+                    depth: v.depth,
+                    isParent: v.isParent,
+                    isExpanded: expanded.has(v.node.key),
+                    isActive: idx === activeIndex,
+                    isSelected: value === v.node.key,
+                    parentsSelectable,
+                    onActivate: () => {
+                      if (v.node.disabled) return;
+                      if (v.isParent && !parentsSelectable) toggleExpand(v.node.key);
+                      else selectKey(v.node.key);
+                    },
+                    onToggle: () => toggleExpand(v.node.key),
+                    onHover: () => setActiveIndex(idx)
                   },
-                  item.key
-                )) })
+                  v.node.key
+                ))
               }
-            ) })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+            )
+          }
+        ) })
+      ] })
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
   ] });
 }
+function TreeNodeRow({
+  node,
+  depth,
+  isParent: isParent2,
+  isExpanded,
+  isActive,
+  isSelected,
+  parentsSelectable,
+  onActivate,
+  onToggle,
+  onHover
+}) {
+  const disabled = node.disabled;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: `tree-opt-${node.key}`,
+      role: "treeitem",
+      "aria-selected": isSelected,
+      "aria-expanded": isParent2 ? isExpanded : void 0,
+      "aria-disabled": disabled || void 0,
+      "data-active": isActive ? "" : void 0,
+      onMouseEnter: onHover,
+      className: `flex items-center gap-1 rounded-md px-1 py-1.5 select-none cursor-pointer transition-colors duration-100 ${disabled ? "opacity-40 cursor-not-allowed" : isActive ? "bg-accent text-accent-fg" : isSelected ? "bg-surface-raised" : "hover:bg-surface-raised"}`,
+      style: { paddingLeft: depth * 16 + 4 },
+      children: [
+        isParent2 ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggle();
+            },
+            "aria-label": isExpanded ? "Collapse" : "Expand",
+            tabIndex: -1,
+            className: "w-5 h-5 inline-flex items-center justify-center rounded hover:bg-black/10 focus:outline-none",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                className: `h-3 w-3 transition-transform duration-150 ${isExpanded ? "rotate-0" : "-rotate-90"}`,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "w-5 h-5 inline-block", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onActivate,
+            disabled,
+            tabIndex: -1,
+            className: "flex-1 flex items-center gap-2 text-sm text-left focus:outline-none disabled:cursor-not-allowed",
+            children: [
+              node.icon,
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label }),
+              isParent2 && !parentsSelectable && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-foreground-muted", children: "parent" })
+            ]
+          }
+        ),
+        isSelected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", className: "ml-1", children: /* @__PURE__ */ jsx("path", { d: "M4 10l4.5 4.5L16 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ]
+    }
+  );
+}
 function FileInput({
   allowMultiple = false,
   onChange,