@djangocfg/ui-tools 2.1.389 → 2.1.393

package/dist/tree/index.mjs

@@ -1,5 +1,1324 @@
-export { TreeError, TreeSkeleton, createDemoTree } from '../chunk-B6IR5KSC.mjs';
-export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, TreeRoot_default as default, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from '../chunk-ZL7FH4NW.mjs';
-import '../chunk-N2XQF2OL.mjs';
+import { __name } from '../chunk-PAWJFY3S.mjs';
+import * as React from 'react';
+import { createContext, memo, useMemo, useReducer, useRef, useCallback, useEffect, Fragment as Fragment$1 } from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronDown, ChevronRight, FolderOpen, Folder, File, Loader2, Search, X, AlertCircle } from 'lucide-react';
+import { useHotkey } from '@djangocfg/ui-core/hooks';
+
+// src/tools/Tree/types.ts
+var DEFAULT_TREE_LABELS = {
+  loading: "Loading\u2026",
+  empty: "Nothing to show",
+  error: "Failed to load",
+  searchPlaceholder: "Search\u2026",
+  searchMatches: /* @__PURE__ */ __name((n) => `${n} match${n === 1 ? "" : "es"}`, "searchMatches"),
+  ariaLabel: "Tree"
+};
+
+// src/tools/Tree/data/childCache.ts
+var createChildCache = /* @__PURE__ */ __name(() => /* @__PURE__ */ new Map(), "createChildCache");
+var resolveChildren = /* @__PURE__ */ __name((cache, node) => {
+  if (Array.isArray(node.children)) {
+    return { children: node.children, status: "loaded" };
+  }
+  const entry = cache.get(node.id);
+  if (!entry) return { children: null, status: "idle" };
+  if (entry.status === "loaded") {
+    return { children: entry.children, status: "loaded" };
+  }
+  return { children: null, status: entry.status, error: entry.error };
+}, "resolveChildren");
+
+// src/tools/Tree/data/flatten.ts
+var isNodeFolder = /* @__PURE__ */ __name((node) => {
+  if (typeof node.isFolder === "boolean") return node.isFolder;
+  return Array.isArray(node.children);
+}, "isNodeFolder");
+function flattenTree({
+  roots,
+  expandedIds,
+  cache,
+  filterNode
+}) {
+  const out = [];
+  const walk = /* @__PURE__ */ __name((nodes, level, parentId) => {
+    for (const node of nodes) {
+      if (filterNode && !filterNode(node)) continue;
+      const isFolder = isNodeFolder(node);
+      const isExpanded = expandedIds.has(node.id);
+      const resolved = isFolder ? resolveChildren(cache, node) : { children: [], status: "loaded" };
+      out.push({
+        node,
+        level,
+        parentId,
+        isFolder,
+        isExpanded,
+        isLoading: resolved.status === "loading",
+        hasError: resolved.status === "error"
+      });
+      if (isFolder && isExpanded && resolved.children) {
+        walk(resolved.children, level + 1, node.id);
+      }
+    }
+  }, "walk");
+  walk(roots, 0, null);
+  return out;
+}
+__name(flattenTree, "flattenTree");
+
+// src/tools/Tree/data/persist.ts
+var KEY_PREFIX = "@djangocfg/tree:";
+var VERSION = 1;
+function safeStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+__name(safeStorage, "safeStorage");
+function loadTreeState(key) {
+  const storage = safeStorage();
+  if (!storage) return null;
+  try {
+    const raw = storage.getItem(KEY_PREFIX + key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed.version !== VERSION) return null;
+    return {
+      expandedItems: Array.isArray(parsed.expandedItems) ? parsed.expandedItems : [],
+      selectedItems: Array.isArray(parsed.selectedItems) ? parsed.selectedItems : []
+    };
+  } catch {
+    return null;
+  }
+}
+__name(loadTreeState, "loadTreeState");
+function saveTreeState(key, state) {
+  const storage = safeStorage();
+  if (!storage) return;
+  try {
+    const payload = { ...state, version: VERSION };
+    storage.setItem(KEY_PREFIX + key, JSON.stringify(payload));
+  } catch {
+  }
+}
+__name(saveTreeState, "saveTreeState");
+function clearTreeState(key) {
+  const storage = safeStorage();
+  if (!storage) return;
+  try {
+    storage.removeItem(KEY_PREFIX + key);
+  } catch {
+  }
+}
+__name(clearTreeState, "clearTreeState");
+
+// src/tools/Tree/data/appearance.ts
+var DENSITY_PRESETS = {
+  compact: { rowHeight: 24, iconSize: 14, fontSize: 13, gap: 6 },
+  cozy: { rowHeight: 28, iconSize: 16, fontSize: 13, gap: 8 },
+  comfortable: { rowHeight: 32, iconSize: 16, fontSize: 14, gap: 8 }
+};
+var DEFAULT_TREE_APPEARANCE = {
+  density: "cozy",
+  ...DENSITY_PRESETS.cozy,
+  iconStrokeWidth: 1.5,
+  indent: 16,
+  accent: "default",
+  radius: "sm",
+  indentGuideOpacity: 0.4,
+  showActiveIndicator: true
+};
+function resolveAppearance(input, outerIndent) {
+  if (!input && outerIndent === void 0) return DEFAULT_TREE_APPEARANCE;
+  const density = input?.density ?? "cozy";
+  const preset = DENSITY_PRESETS[density];
+  return {
+    density,
+    rowHeight: input?.rowHeight ?? preset.rowHeight,
+    iconSize: input?.iconSize ?? preset.iconSize,
+    iconStrokeWidth: input?.iconStrokeWidth ?? DEFAULT_TREE_APPEARANCE.iconStrokeWidth,
+    fontSize: input?.fontSize ?? preset.fontSize,
+    gap: input?.gap ?? preset.gap,
+    indent: input?.indent ?? outerIndent ?? DEFAULT_TREE_APPEARANCE.indent,
+    accent: input?.accent ?? DEFAULT_TREE_APPEARANCE.accent,
+    radius: input?.radius ?? DEFAULT_TREE_APPEARANCE.radius,
+    indentGuideOpacity: input?.indentGuideOpacity ?? DEFAULT_TREE_APPEARANCE.indentGuideOpacity,
+    showActiveIndicator: input?.showActiveIndicator ?? DEFAULT_TREE_APPEARANCE.showActiveIndicator
+  };
+}
+__name(resolveAppearance, "resolveAppearance");
+function appearanceToStyle(a) {
+  return {
+    ["--tree-row-height"]: `${a.rowHeight}px`,
+    ["--tree-icon-size"]: `${a.iconSize}px`,
+    ["--tree-icon-stroke"]: a.iconStrokeWidth,
+    ["--tree-font-size"]: `${a.fontSize}px`,
+    ["--tree-gap"]: `${a.gap}px`,
+    ["--tree-indent"]: `${a.indent}px`,
+    ["--tree-guide-opacity"]: a.indentGuideOpacity
+  };
+}
+__name(appearanceToStyle, "appearanceToStyle");
+var RADIUS_CLASS = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md"
+};
+function radiusClass(a) {
+  return RADIUS_CLASS[a.radius];
+}
+__name(radiusClass, "radiusClass");
+var HOVER = {
+  subtle: "hover:bg-foreground/[.03]",
+  default: "hover:bg-foreground/[.06]",
+  strong: "hover:bg-foreground/[.09]"
+};
+var FOCUSED_NOT_SELECTED = {
+  subtle: "data-[focused=true]:bg-foreground/[.05]",
+  default: "data-[focused=true]:bg-foreground/[.08]",
+  strong: "data-[focused=true]:bg-foreground/[.12]"
+};
+var SELECTED_INACTIVE = {
+  subtle: "data-[selected=true]:bg-foreground/[.06]",
+  default: "data-[selected=true]:bg-foreground/[.10]",
+  strong: "data-[selected=true]:bg-foreground/[.14]"
+};
+var SELECTED_ACTIVE = {
+  subtle: "data-[selected=true]:group-focus-within/tree:bg-primary/10 data-[selected=true]:group-focus-within/tree:text-primary",
+  default: "data-[selected=true]:group-focus-within/tree:bg-primary/15 data-[selected=true]:group-focus-within/tree:text-primary",
+  strong: "data-[selected=true]:group-focus-within/tree:bg-primary/25 data-[selected=true]:group-focus-within/tree:text-primary"
+};
+function rowStateClasses(a) {
+  return [
+    HOVER[a.accent],
+    FOCUSED_NOT_SELECTED[a.accent],
+    SELECTED_INACTIVE[a.accent],
+    SELECTED_ACTIVE[a.accent]
+  ].join(" ");
+}
+__name(rowStateClasses, "rowStateClasses");
+var reducer = /* @__PURE__ */ __name((state, action) => {
+  switch (action.type) {
+    case "expand": {
+      if (state.expanded.has(action.id)) return state;
+      const next = new Set(state.expanded);
+      next.add(action.id);
+      return { ...state, expanded: next };
+    }
+    case "collapse": {
+      if (!state.expanded.has(action.id)) return state;
+      const next = new Set(state.expanded);
+      next.delete(action.id);
+      return { ...state, expanded: next };
+    }
+    case "toggle": {
+      const next = new Set(state.expanded);
+      if (next.has(action.id)) next.delete(action.id);
+      else next.add(action.id);
+      return { ...state, expanded: next };
+    }
+    case "set-expanded":
+      return { ...state, expanded: new Set(action.ids) };
+    case "select": {
+      if (action.mode === "none") return state;
+      if (action.mode === "single") {
+        return { ...state, selected: /* @__PURE__ */ new Set([action.id]), focused: action.id };
+      }
+      const next = new Set(state.selected);
+      if (next.has(action.id)) next.delete(action.id);
+      else next.add(action.id);
+      return { ...state, selected: next, focused: action.id };
+    }
+    case "select-many":
+      return { ...state, selected: new Set(action.ids) };
+    case "clear-selection":
+      return { ...state, selected: /* @__PURE__ */ new Set() };
+    case "focus":
+      return { ...state, focused: action.id };
+    case "set-query":
+      return { ...state, query: action.q };
+    case "cache-tick":
+      return { ...state, cacheTick: state.cacheTick + 1 };
+    default:
+      return state;
+  }
+}, "reducer");
+var TreeContext = createContext(null);
+function useTreeContext() {
+  const ctx = React.useContext(TreeContext);
+  if (!ctx) {
+    throw new Error("useTreeContext must be used inside <TreeProvider>");
+  }
+  return ctx;
+}
+__name(useTreeContext, "useTreeContext");
+var setEqualsArr = /* @__PURE__ */ __name((set, arr) => {
+  if (set.size !== arr.length) return false;
+  for (const id of arr) if (!set.has(id)) return false;
+  return true;
+}, "setEqualsArr");
+var collectAllIds = /* @__PURE__ */ __name((roots, cache, out) => {
+  for (const node of roots) {
+    if (Array.isArray(node.children)) {
+      out.push(node.id);
+      collectAllIds(node.children, cache, out);
+    } else if (node.isFolder) {
+      out.push(node.id);
+      const entry = cache.get(node.id);
+      if (entry?.children) collectAllIds(entry.children, cache, out);
+    }
+  }
+}, "collectAllIds");
+function TreeProvider(props) {
+  const {
+    data,
+    getItemName,
+    loadChildren,
+    selectionMode = "single",
+    activationMode = "single-click",
+    initialExpandedIds,
+    initialSelectedIds,
+    indent,
+    appearance,
+    onSelectionChange,
+    onExpansionChange,
+    onActivate,
+    filterNode,
+    enableSearch = false,
+    showIndentGuides = false,
+    renderIcon,
+    renderLabel,
+    renderActions,
+    renderContextMenu,
+    labels: labelsOverride,
+    persistKey,
+    persistSelection = false,
+    children
+  } = props;
+  const labels = useMemo(
+    () => ({ ...DEFAULT_TREE_LABELS, ...labelsOverride }),
+    [labelsOverride]
+  );
+  const resolvedAppearance = useMemo(
+    () => resolveAppearance(appearance, indent),
+    [appearance, indent]
+  );
+  const persisted = useMemo(
+    () => persistKey ? loadTreeState(persistKey) : null,
+    [persistKey]
+  );
+  const [state, dispatch] = useReducer(reducer, void 0, () => ({
+    expanded: new Set(persisted?.expandedItems ?? initialExpandedIds ?? []),
+    selected: new Set(
+      (persistSelection ? persisted?.selectedItems : void 0) ?? initialSelectedIds ?? []
+    ),
+    focused: null,
+    query: "",
+    cacheTick: 0
+  }));
+  const cacheRef = useRef(createChildCache());
+  const inflightRef = useRef(/* @__PURE__ */ new Map());
+  const fetchChildren = useCallback(
+    async (node) => {
+      if (!loadChildren) return;
+      if (Array.isArray(node.children)) return;
+      const existing = cacheRef.current.get(node.id);
+      if (existing?.status === "loaded" || existing?.status === "loading") return;
+      const inflight = inflightRef.current.get(node.id);
+      if (inflight) return inflight;
+      cacheRef.current.set(node.id, { status: "loading", children: [] });
+      dispatch({ type: "cache-tick" });
+      const promise = (async () => {
+        try {
+          const children2 = await loadChildren(node);
+          cacheRef.current.set(node.id, { status: "loaded", children: children2 });
+        } catch (err) {
+          cacheRef.current.set(node.id, {
+            status: "error",
+            children: [],
+            error: err instanceof Error ? err.message : String(err)
+          });
+        } finally {
+          inflightRef.current.delete(node.id);
+          dispatch({ type: "cache-tick" });
+        }
+      })();
+      inflightRef.current.set(node.id, promise);
+      return promise;
+    },
+    [loadChildren]
+  );
+  const nodeById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const walk = /* @__PURE__ */ __name((nodes) => {
+      for (const n of nodes) {
+        map.set(n.id, n);
+        if (Array.isArray(n.children)) walk(n.children);
+        else {
+          const entry = cacheRef.current.get(n.id);
+          if (entry?.children) walk(entry.children);
+        }
+      }
+    }, "walk");
+    walk(data);
+    return map;
+  }, [data, state.cacheTick]);
+  useEffect(() => {
+    if (!loadChildren) return;
+    for (const id of state.expanded) {
+      const node = nodeById.get(id);
+      if (!node) continue;
+      void fetchChildren(node);
+    }
+  }, [loadChildren, state.expanded, state.cacheTick, nodeById, fetchChildren]);
+  const flatRows = useMemo(
+    () => flattenTree({
+      roots: data,
+      expandedIds: state.expanded,
+      cache: cacheRef.current,
+      filterNode
+    }),
+    [data, state.expanded, state.cacheTick, filterNode]
+  );
+  const matchingIds = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    if (!enableSearch || state.query.trim() === "") return set;
+    const q = state.query.trim().toLowerCase();
+    for (const row of flatRows) {
+      if (getItemName(row.node).toLowerCase().includes(q)) {
+        set.add(row.node.id);
+      }
+    }
+    return set;
+  }, [enableSearch, state.query, flatRows, getItemName]);
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  const onExpansionChangeRef = useRef(onExpansionChange);
+  const onActivateRef = useRef(onActivate);
+  onSelectionChangeRef.current = onSelectionChange;
+  onExpansionChangeRef.current = onExpansionChange;
+  onActivateRef.current = onActivate;
+  const lastSelectedArrRef = useRef([...state.selected]);
+  const lastExpandedArrRef = useRef([...state.expanded]);
+  useEffect(() => {
+    const arr = [...state.expanded];
+    if (!setEqualsArr(state.expanded, lastExpandedArrRef.current)) {
+      lastExpandedArrRef.current = arr;
+      onExpansionChangeRef.current?.(arr);
+      if (persistKey) {
+        saveTreeState(persistKey, {
+          expandedItems: arr,
+          selectedItems: persistSelection ? [...state.selected] : []
+        });
+      }
+    }
+  }, [state.expanded, persistKey, persistSelection, state.selected]);
+  useEffect(() => {
+    const arr = [...state.selected];
+    if (!setEqualsArr(state.selected, lastSelectedArrRef.current)) {
+      lastSelectedArrRef.current = arr;
+      onSelectionChangeRef.current?.(arr);
+      if (persistKey && persistSelection) {
+        saveTreeState(persistKey, {
+          expandedItems: [...state.expanded],
+          selectedItems: arr
+        });
+      }
+    }
+  }, [state.selected, persistKey, persistSelection, state.expanded]);
+  const expand = useCallback((id) => dispatch({ type: "expand", id }), []);
+  const collapse = useCallback((id) => dispatch({ type: "collapse", id }), []);
+  const toggle = useCallback((id) => dispatch({ type: "toggle", id }), []);
+  const expandAll = useCallback(() => {
+    const ids = [];
+    collectAllIds(data, cacheRef.current, ids);
+    dispatch({ type: "set-expanded", ids });
+  }, [data]);
+  const collapseAll = useCallback(
+    () => dispatch({ type: "set-expanded", ids: [] }),
+    []
+  );
+  const select = useCallback(
+    (id) => dispatch({ type: "select", id, mode: selectionMode }),
+    [selectionMode]
+  );
+  const setSelectedIds = useCallback(
+    (ids) => dispatch({ type: "select-many", ids }),
+    []
+  );
+  const clearSelection = useCallback(() => dispatch({ type: "clear-selection" }), []);
+  const setFocus = useCallback(
+    (id) => dispatch({ type: "focus", id }),
+    []
+  );
+  const setQuery = useCallback((q) => dispatch({ type: "set-query", q }), []);
+  const refresh = useCallback(
+    async (id) => {
+      const node = nodeById.get(id);
+      if (!node || !loadChildren) return;
+      cacheRef.current.delete(id);
+      dispatch({ type: "cache-tick" });
+      await fetchChildren(node);
+    },
+    [nodeById, loadChildren, fetchChildren]
+  );
+  const refreshAll = useCallback(async () => {
+    cacheRef.current.clear();
+    dispatch({ type: "cache-tick" });
+    if (!loadChildren) return;
+    await Promise.all(
+      [...state.expanded].map((id) => {
+        const node = nodeById.get(id);
+        return node ? fetchChildren(node) : void 0;
+      })
+    );
+  }, [loadChildren, state.expanded, nodeById, fetchChildren]);
+  const activate = useCallback(
+    (node, opts = { preview: false }) => onActivateRef.current?.(node, opts),
+    []
+  );
+  const value = useMemo(
+    () => ({
+      expanded: state.expanded,
+      selected: state.selected,
+      focused: state.focused,
+      query: state.query,
+      flatRows,
+      matchingIds,
+      expand,
+      collapse,
+      toggle,
+      expandAll,
+      collapseAll,
+      select,
+      setSelectedIds,
+      clearSelection,
+      setFocus,
+      setQuery,
+      refresh,
+      refreshAll,
+      activate,
+      labels,
+      appearance: resolvedAppearance,
+      indent: resolvedAppearance.indent,
+      selectionMode,
+      activationMode,
+      enableSearch,
+      showIndentGuides,
+      getItemName,
+      renderIcon,
+      renderLabel,
+      renderActions,
+      renderContextMenu
+    }),
+    [
+      state.expanded,
+      state.selected,
+      state.focused,
+      state.query,
+      flatRows,
+      matchingIds,
+      expand,
+      collapse,
+      toggle,
+      expandAll,
+      collapseAll,
+      select,
+      setSelectedIds,
+      clearSelection,
+      setFocus,
+      setQuery,
+      refresh,
+      refreshAll,
+      activate,
+      labels,
+      resolvedAppearance,
+      selectionMode,
+      activationMode,
+      enableSearch,
+      showIndentGuides,
+      getItemName,
+      renderIcon,
+      renderLabel,
+      renderActions,
+      renderContextMenu
+    ]
+  );
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value, children });
+}
+__name(TreeProvider, "TreeProvider");
+function TreeChevronRaw({ isExpanded, isFolder, className }) {
+  const { appearance } = useTreeContext();
+  const size = { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" };
+  if (!isFolder) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        style: size,
+        className: cn("inline-block shrink-0", className)
+      }
+    );
+  }
+  const Icon = isExpanded ? ChevronDown : ChevronRight;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      "aria-hidden": true,
+      strokeWidth: appearance.iconStrokeWidth,
+      style: size,
+      className: cn(
+        "shrink-0 text-muted-foreground/70 transition-transform",
+        className
+      )
+    }
+  );
+}
+__name(TreeChevronRaw, "TreeChevronRaw");
+var TreeChevron = memo(TreeChevronRaw);
+function TreeIconRaw({ isFolder, isExpanded, className }) {
+  const { appearance } = useTreeContext();
+  const Icon = isFolder ? isExpanded ? FolderOpen : Folder : File;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      "aria-hidden": true,
+      strokeWidth: appearance.iconStrokeWidth,
+      style: { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" },
+      className: cn(
+        "shrink-0",
+        isFolder ? "text-foreground/70" : "text-muted-foreground/80",
+        className
+      )
+    }
+  );
+}
+__name(TreeIconRaw, "TreeIconRaw");
+var TreeIcon = memo(TreeIconRaw);
+function TreeIndentGuides({ level, indent }) {
+  const { appearance } = useTreeContext();
+  if (level <= 0) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute inset-y-0 left-0",
+      style: { width: 8 + level * indent, opacity: appearance.indentGuideOpacity },
+      children: Array.from({ length: level }).map((_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute inset-y-0 w-px bg-border",
+          style: { left: 8 + i * indent + indent / 2 - 0.5 }
+        },
+        i
+      ))
+    }
+  );
+}
+__name(TreeIndentGuides, "TreeIndentGuides");
+function TreeLabelRaw({ children, isMatchingSearch, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: { fontSize: "var(--tree-font-size)" },
+      className: cn(
+        "truncate leading-tight tracking-[-0.005em]",
+        isMatchingSearch && "font-medium text-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+__name(TreeLabelRaw, "TreeLabelRaw");
+var TreeLabel = memo(TreeLabelRaw);
+function TreeRowRaw({ row, className }) {
+  const ctx = useTreeContext();
+  const {
+    appearance,
+    activationMode,
+    showIndentGuides,
+    selected,
+    focused,
+    matchingIds,
+    select,
+    toggle,
+    setFocus,
+    activate,
+    getItemName,
+    renderIcon,
+    renderLabel,
+    renderActions,
+    renderContextMenu
+  } = ctx;
+  const { node, level, isFolder, isExpanded, isLoading } = row;
+  const isSelected = selected.has(node.id);
+  const isFocused = focused === node.id;
+  const isMatchingSearch = matchingIds.has(node.id);
+  const slot = {
+    node,
+    level,
+    isSelected,
+    isExpanded,
+    isFocused,
+    isFolder,
+    isLoading,
+    isMatchingSearch
+  };
+  const handleClick = /* @__PURE__ */ __name((e) => {
+    if (node.disabled) return;
+    setFocus(node.id);
+    select(node.id);
+    if (isFolder) {
+      toggle(node.id);
+    } else if (activationMode === "single-click") {
+      activate(node, { preview: false });
+    } else if (activationMode === "single-click-preview") {
+      activate(node, { preview: true });
+    }
+    e.currentTarget.scrollIntoView?.({ block: "nearest" });
+  }, "handleClick");
+  const handleDoubleClick = /* @__PURE__ */ __name(() => {
+    if (node.disabled) return;
+    if (isFolder) return;
+    activate(node, { preview: false });
+  }, "handleDoubleClick");
+  const trigger = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "aria-level": level + 1,
+      "aria-expanded": isFolder ? isExpanded : void 0,
+      "aria-selected": isSelected || void 0,
+      "aria-current": isSelected ? "true" : void 0,
+      "aria-disabled": node.disabled || void 0,
+      "data-tree-row": "",
+      "data-id": node.id,
+      "data-activation-mode": activationMode,
+      "data-selected": isSelected ? "true" : void 0,
+      "data-focused": isFocused && !isSelected ? "true" : void 0,
+      "data-folder": isFolder || void 0,
+      "data-expanded": isExpanded || void 0,
+      tabIndex: isFocused ? 0 : -1,
+      style: {
+        paddingLeft: 6 + level * appearance.indent,
+        height: "var(--tree-row-height)",
+        gap: "var(--tree-gap)"
+      },
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onFocus: () => setFocus(node.id),
+      className: cn(
+        "group/row relative flex w-full select-none items-center pr-2 text-left",
+        "transition-colors outline-none",
+        node.disabled ? "cursor-not-allowed" : "cursor-pointer",
+        radiusClass(appearance),
+        rowStateClasses(appearance),
+        "focus-visible:ring-1 focus-visible:ring-ring/50",
+        isMatchingSearch && "ring-1 ring-primary/30",
+        node.disabled && "opacity-50",
+        className
+      ),
+      children: [
+        appearance.showActiveIndicator && isSelected ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "absolute left-0 top-1 bottom-1 w-0.5 rounded-r-full",
+              "bg-foreground/30 group-focus-within/tree:bg-primary"
+            )
+          }
+        ) : null,
+        showIndentGuides && level > 0 ? /* @__PURE__ */ jsx(TreeIndentGuides, { level, indent: appearance.indent }) : null,
+        /* @__PURE__ */ jsx(TreeChevron, { isExpanded, isFolder }),
+        isLoading ? /* @__PURE__ */ jsx(
+          Loader2,
+          {
+            "aria-hidden": true,
+            strokeWidth: appearance.iconStrokeWidth,
+            style: { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" },
+            className: "shrink-0 animate-spin text-muted-foreground/70"
+          }
+        ) : renderIcon ? renderIcon(slot) : /* @__PURE__ */ jsx(TreeIcon, { isFolder, isExpanded }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex min-w-0 flex-1 items-center",
+            style: { gap: "var(--tree-gap)" },
+            children: renderLabel ? renderLabel(slot) : /* @__PURE__ */ jsx(TreeLabel, { isMatchingSearch, children: getItemName(node) })
+          }
+        ),
+        renderActions ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ml-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100",
+            onClick: (e) => e.stopPropagation(),
+            children: renderActions(slot)
+          }
+        ) : null
+      ]
+    }
+  );
+  if (renderContextMenu) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderContextMenu(slot, trigger) });
+  }
+  return trigger;
+}
+__name(TreeRowRaw, "TreeRowRaw");
+var TreeRow = memo(TreeRowRaw);
+function TreeEmpty({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-32 items-center justify-center px-4 py-6 text-sm text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+__name(TreeEmpty, "TreeEmpty");
+function TreeContent({ children, className, ariaLabel }) {
+  const { flatRows, labels, selected, focused, matchingIds, appearance } = useTreeContext();
+  if (flatRows.length === 0) {
+    return /* @__PURE__ */ jsx(TreeEmpty, { children: labels.empty });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tree",
+      "aria-label": ariaLabel ?? labels.ariaLabel,
+      className: cn("relative flex flex-col py-1", className),
+      style: appearanceToStyle(appearance),
+      children: flatRows.map((row) => {
+        const slot = {
+          node: row.node,
+          level: row.level,
+          isSelected: selected.has(row.node.id),
+          isExpanded: row.isExpanded,
+          isFocused: focused === row.node.id,
+          isFolder: row.isFolder,
+          isLoading: row.isLoading,
+          isMatchingSearch: matchingIds.has(row.node.id)
+        };
+        const node = children ? children(slot) : /* @__PURE__ */ jsx(TreeRow, { row });
+        return /* @__PURE__ */ jsx(Fragment$1, { children: node }, row.node.id);
+      })
+    }
+  );
+}
+__name(TreeContent, "TreeContent");
+function useTreeLabels() {
+  return useTreeContext().labels;
+}
+__name(useTreeLabels, "useTreeLabels");
+function useTreeRows() {
+  return useTreeContext().flatRows;
+}
+__name(useTreeRows, "useTreeRows");
+function useTreeSelection() {
+  const ctx = useTreeContext();
+  const selectedIds = useMemo(() => [...ctx.selected], [ctx.selected]);
+  const isSelected = useCallback(
+    (id) => ctx.selected.has(id),
+    [ctx.selected]
+  );
+  return useMemo(
+    () => ({
+      selectedIds,
+      select: ctx.select,
+      setSelectedIds: ctx.setSelectedIds,
+      clear: ctx.clearSelection,
+      isSelected
+    }),
+    [selectedIds, ctx.select, ctx.setSelectedIds, ctx.clearSelection, isSelected]
+  );
+}
+__name(useTreeSelection, "useTreeSelection");
+function useTreeExpansion() {
+  const ctx = useTreeContext();
+  const expandedIds = useMemo(() => [...ctx.expanded], [ctx.expanded]);
+  const isExpanded = useCallback(
+    (id) => ctx.expanded.has(id),
+    [ctx.expanded]
+  );
+  return useMemo(
+    () => ({
+      expandedIds,
+      expand: ctx.expand,
+      collapse: ctx.collapse,
+      toggle: ctx.toggle,
+      expandAll: ctx.expandAll,
+      collapseAll: ctx.collapseAll,
+      isExpanded
+    }),
+    [
+      expandedIds,
+      ctx.expand,
+      ctx.collapse,
+      ctx.toggle,
+      ctx.expandAll,
+      ctx.collapseAll,
+      isExpanded
+    ]
+  );
+}
+__name(useTreeExpansion, "useTreeExpansion");
+function useTreeFocus() {
+  const ctx = useTreeContext();
+  return useMemo(
+    () => ({ focusedId: ctx.focused, setFocus: ctx.setFocus }),
+    [ctx.focused, ctx.setFocus]
+  );
+}
+__name(useTreeFocus, "useTreeFocus");
+function useTreeSearch() {
+  const ctx = useTreeContext();
+  return useMemo(
+    () => ({
+      isOpen: ctx.enableSearch,
+      query: ctx.query,
+      setQuery: ctx.setQuery,
+      matchingIds: ctx.matchingIds,
+      matchCount: ctx.matchingIds.size
+    }),
+    [ctx.enableSearch, ctx.query, ctx.setQuery, ctx.matchingIds]
+  );
+}
+__name(useTreeSearch, "useTreeSearch");
+function useTreeActions() {
+  const ctx = useTreeContext();
+  return useMemo(
+    () => ({
+      expand: ctx.expand,
+      collapse: ctx.collapse,
+      toggle: ctx.toggle,
+      expandAll: ctx.expandAll,
+      collapseAll: ctx.collapseAll,
+      refresh: ctx.refresh,
+      refreshAll: ctx.refreshAll,
+      activate: ctx.activate
+    }),
+    [
+      ctx.expand,
+      ctx.collapse,
+      ctx.toggle,
+      ctx.expandAll,
+      ctx.collapseAll,
+      ctx.refresh,
+      ctx.refreshAll,
+      ctx.activate
+    ]
+  );
+}
+__name(useTreeActions, "useTreeActions");
+function TreeSearchInput({ className, showMatches = true }) {
+  const { labels } = useTreeContext();
+  const { query, setQuery, matchCount } = useTreeSearch();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 rounded-md border border-border bg-background px-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "search",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: labels.searchPlaceholder,
+            className: "h-7 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          }
+        ),
+        showMatches && query.trim().length > 0 ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: labels.searchMatches(matchCount) }) : null,
+        query.length > 0 ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setQuery(""),
+            "aria-label": "Clear search",
+            className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-3.5" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+__name(TreeSearchInput, "TreeSearchInput");
+function useTreeKeyboard({
+  rows,
+  focusedId,
+  enabled = true,
+  onFocus,
+  onSelect,
+  onActivate,
+  onExpand,
+  onCollapse,
+  onClearSelection
+}) {
+  const rowsRef = useRef(rows);
+  const focusedIdRef = useRef(focusedId);
+  rowsRef.current = rows;
+  focusedIdRef.current = focusedId;
+  const getCurrent = /* @__PURE__ */ __name(() => {
+    const r = rowsRef.current;
+    const id = focusedIdRef.current;
+    const idx = id ? r.findIndex((x) => x.node.id === id) : -1;
+    return { rows: r, idx, current: idx >= 0 ? r[idx] : null };
+  }, "getCurrent");
+  const refDown = useHotkey(
+    "down",
+    () => {
+      const { rows: r, idx } = getCurrent();
+      if (r.length === 0) return;
+      const next = r[Math.min(idx + 1, r.length - 1)] ?? r[0];
+      onFocus(next.node.id);
+    },
+    { enabled, preventDefault: true, description: "Next row" }
+  );
+  const refUp = useHotkey(
+    "up",
+    () => {
+      const { rows: r, idx } = getCurrent();
+      if (r.length === 0) return;
+      const prev = r[Math.max(idx - 1, 0)] ?? r[0];
+      onFocus(prev.node.id);
+    },
+    { enabled, preventDefault: true, description: "Previous row" }
+  );
+  const refHome = useHotkey(
+    "home",
+    () => {
+      const { rows: r } = getCurrent();
+      if (r.length === 0) return;
+      onFocus(r[0].node.id);
+    },
+    { enabled, preventDefault: true, description: "First row" }
+  );
+  const refEnd = useHotkey(
+    "end",
+    () => {
+      const { rows: r } = getCurrent();
+      if (r.length === 0) return;
+      onFocus(r[r.length - 1].node.id);
+    },
+    { enabled, preventDefault: true, description: "Last row" }
+  );
+  const refRight = useHotkey(
+    "right",
+    () => {
+      const { rows: r, idx, current } = getCurrent();
+      if (!current) return;
+      if (current.isFolder && !current.isExpanded) {
+        onExpand(current.node.id);
+      } else if (current.isFolder && current.isExpanded) {
+        const next = r[idx + 1];
+        if (next) onFocus(next.node.id);
+      }
+    },
+    { enabled, preventDefault: true, description: "Expand / first child" }
+  );
+  const refLeft = useHotkey(
+    "left",
+    () => {
+      const { current } = getCurrent();
+      if (!current) return;
+      if (current.isFolder && current.isExpanded) {
+        onCollapse(current.node.id);
+      } else if (current.parentId) {
+        onFocus(current.parentId);
+      }
+    },
+    { enabled, preventDefault: true, description: "Collapse / parent" }
+  );
+  const refActivate = useHotkey(
+    ["enter", "space"],
+    () => {
+      const { current } = getCurrent();
+      if (!current) return;
+      onSelect(current.node.id);
+      if (current.isFolder) {
+        if (current.isExpanded) onCollapse(current.node.id);
+        else onExpand(current.node.id);
+      } else {
+        onActivate(current.node.id);
+      }
+    },
+    { enabled, preventDefault: true, description: "Activate / toggle" }
+  );
+  const refEscape = useHotkey(
+    "escape",
+    () => onClearSelection(),
+    { enabled, preventDefault: true, description: "Clear selection" }
+  );
+  const ref = useCallback(
+    (instance) => {
+      refDown(instance);
+      refUp(instance);
+      refHome(instance);
+      refEnd(instance);
+      refRight(instance);
+      refLeft(instance);
+      refActivate(instance);
+      refEscape(instance);
+    },
+    [refDown, refUp, refHome, refEnd, refRight, refLeft, refActivate, refEscape]
+  );
+  return { ref };
+}
+__name(useTreeKeyboard, "useTreeKeyboard");
+var FLUSH_MS = 600;
+function useTreeTypeAhead({
+  rows,
+  getItemName,
+  containerRef,
+  onMatch,
+  enabled = true
+}) {
+  const bufferRef = useRef("");
+  const timerRef = useRef(null);
+  const rowsRef = useRef(rows);
+  const getNameRef = useRef(getItemName);
+  const onMatchRef = useRef(onMatch);
+  rowsRef.current = rows;
+  getNameRef.current = getItemName;
+  onMatchRef.current = onMatch;
+  useEffect(() => {
+    if (!enabled) return;
+    const target = containerRef.current;
+    if (!target) return;
+    const reset = /* @__PURE__ */ __name(() => {
+      bufferRef.current = "";
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    }, "reset");
+    const handler = /* @__PURE__ */ __name((e) => {
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      if (e.target?.isContentEditable) return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.key === "Escape" || e.key === "Enter" || e.key === "Tab" || e.key.startsWith("Arrow") || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") {
+        reset();
+        return;
+      }
+      if (e.key.length !== 1) return;
+      bufferRef.current += e.key.toLowerCase();
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(reset, FLUSH_MS);
+      const prefix = bufferRef.current;
+      const hit = rowsRef.current.find(
+        (row) => getNameRef.current(row.node).toLowerCase().startsWith(prefix)
+      );
+      if (hit) {
+        e.preventDefault();
+        onMatchRef.current(hit.node.id);
+      }
+    }, "handler");
+    target.addEventListener("keydown", handler);
+    return () => {
+      target.removeEventListener("keydown", handler);
+      reset();
+    };
+  }, [containerRef, enabled]);
+}
+__name(useTreeTypeAhead, "useTreeTypeAhead");
+function TreeRoot(props) {
+  const {
+    data,
+    getItemName,
+    loadChildren,
+    selectionMode,
+    activationMode,
+    initialExpandedIds,
+    initialSelectedIds,
+    indent,
+    appearance,
+    onSelectionChange,
+    onExpansionChange,
+    onActivate,
+    filterNode,
+    enableSearch = false,
+    enableTypeAhead = true,
+    showIndentGuides = false,
+    renderRow,
+    renderIcon,
+    renderLabel,
+    renderActions,
+    renderContextMenu,
+    labels,
+    persistKey,
+    persistSelection = false,
+    className,
+    style
+  } = props;
+  return /* @__PURE__ */ jsx(
+    TreeProvider,
+    {
+      data,
+      getItemName,
+      loadChildren,
+      selectionMode,
+      activationMode,
+      initialExpandedIds,
+      initialSelectedIds,
+      indent,
+      appearance,
+      onSelectionChange,
+      onExpansionChange,
+      onActivate,
+      filterNode,
+      enableSearch,
+      showIndentGuides,
+      renderIcon,
+      renderLabel,
+      renderActions,
+      renderContextMenu,
+      labels,
+      persistKey,
+      persistSelection,
+      children: /* @__PURE__ */ jsx(
+        TreeRootShell,
+        {
+          className,
+          style,
+          enableSearch,
+          enableTypeAhead,
+          renderRow
+        }
+      )
+    }
+  );
+}
+__name(TreeRoot, "TreeRoot");
+function TreeRootShell({
+  className,
+  style,
+  enableSearch,
+  enableTypeAhead,
+  renderRow
+}) {
+  const containerRef = useRef(null);
+  const ctx = useTreeContext();
+  const { ref: keyboardRef } = useTreeKeyboard({
+    rows: ctx.flatRows,
+    focusedId: ctx.focused,
+    onFocus: ctx.setFocus,
+    onSelect: ctx.select,
+    onActivate: /* @__PURE__ */ __name((id) => {
+      const row = ctx.flatRows.find((r) => r.node.id === id);
+      if (row) ctx.activate(row.node, { preview: false });
+    }, "onActivate"),
+    onExpand: ctx.expand,
+    onCollapse: ctx.collapse,
+    onClearSelection: ctx.clearSelection
+  });
+  const setContainerRef = useCallback(
+    (instance) => {
+      containerRef.current = instance;
+      keyboardRef(instance);
+    },
+    [keyboardRef]
+  );
+  const onTypeAheadMatch = useCallback(
+    (id) => {
+      ctx.setFocus(id);
+      const el = containerRef.current?.querySelector(
+        `[data-tree-row][data-id="${CSS.escape(id)}"]`
+      );
+      el?.scrollIntoView({ block: "nearest" });
+    },
+    [ctx]
+  );
+  useTreeTypeAhead({
+    rows: ctx.flatRows,
+    getItemName: ctx.getItemName,
+    containerRef,
+    onMatch: onTypeAheadMatch,
+    enabled: enableTypeAhead
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setContainerRef,
+      tabIndex: 0,
+      className: cn(
+        "group/tree flex h-full w-full flex-col gap-2 outline-none",
+        className
+      ),
+      style: { ...appearanceToStyle(ctx.appearance), ...style },
+      "data-tree-root": "",
+      children: [
+        enableSearch ? /* @__PURE__ */ jsx(TreeSearchInput, { className: "mx-2 mt-2" }) : null,
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-1", children: /* @__PURE__ */ jsx(TreeContent, { children: renderRow }) })
+      ]
+    }
+  );
+}
+__name(TreeRootShell, "TreeRootShell");
+var TreeRoot_default = TreeRoot;
+function TreeSkeleton({ rows = 6, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1 p-2", className), "aria-hidden": true, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", style: { paddingLeft: i % 3 * 16 }, children: [
+    /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0 animate-pulse rounded bg-muted" }),
+    /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0 animate-pulse rounded bg-muted" }),
+    /* @__PURE__ */ jsx("span", { className: "h-3 flex-1 animate-pulse rounded bg-muted" })
+  ] }, i)) });
+}
+__name(TreeSkeleton, "TreeSkeleton");
+function TreeError({ children, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+        className
+      ),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+__name(TreeError, "TreeError");
+
+// src/tools/Tree/data/createDemoTree.ts
+function createDemoTree({
+  depth = 3,
+  breadth = 4,
+  rootPrefix = "node"
+} = {}) {
+  const make = /* @__PURE__ */ __name((id, name, level) => {
+    if (level >= depth) {
+      return { id, data: { name } };
+    }
+    const children = [];
+    for (let i = 0; i < breadth; i++) {
+      const childId = `${id}/${i}`;
+      children.push(make(childId, `${name}-${i}`, level + 1));
+    }
+    return { id, data: { name }, children };
+  }, "make");
+  const roots = [];
+  for (let i = 0; i < breadth; i++) {
+    roots.push(make(`${rootPrefix}-${i}`, `${rootPrefix} ${i}`, 1));
+  }
+  return roots;
+}
+__name(createDemoTree, "createDemoTree");
+
+export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeError, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, TreeSkeleton, appearanceToStyle, clearTreeState, createChildCache, createDemoTree, TreeRoot_default as default, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map