@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0-beta.134.1

package/dist/ui/tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.cjs","sources":["../../src/components/ui/tree.tsx"],"sourcesContent":["import { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\n/* -------------------------------------------------------------------------------------------------\n * Contexts\n *\n * The tree is intentionally headless about *data*: it never fetches, never owns a node array, and\n * derives every ARIA attribute from where a `TreeItem` sits in the React tree. Four contexts carry\n * that positional information down:\n *\n *   TreeContext       — per-tree state (expansion, selection, roving focus) and the key handler\n *   TreeLevelContext  — the current depth; `Tree` seeds 1, each `TreeItemGroup` increments\n *   TreeIndexContext  — `aria-posinset` / `aria-setsize`, injected by whichever container renders\n *                       the item (`Tree` for roots, `TreeItemGroup` for children)\n *   TreeItemContext   — the nearest enclosing item, read by `TreeItemLabel` / `TreeItemGroup`\n * -----------------------------------------------------------------------------------------------*/\n\ntype TreeContextValue = {\n  expandedIds: Set<string>;\n  setExpanded: (id: string, expanded: boolean) => void;\n  selectedId: string | null;\n  /**\n   * The one activation path: selection, optional expansion and `onActivate`, shared by `Enter` and\n   * by clicking a node so the two never diverge.\n   */\n  activateItem: (id: string, hasChildren: boolean, expanded: boolean) => void;\n  focusedId: string | null;\n  setFocusedId: (id: string) => void;\n  expandOnSelect: boolean;\n  guides: TreeGuides;\n  /** Attached to each `TreeItem` rather than to the tree root, so the node is its own key target. */\n  onItemKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n};\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null);\n\nfunction useTreeContext(component: string) {\n  const context = React.useContext(TreeContext);\n  if (!context) {\n    throw new Error(`\\`${component}\\` must be rendered inside a \\`Tree\\`.`);\n  }\n  return context;\n}\n\nconst TreeLevelContext = React.createContext(1);\n\ntype TreeIndexContextValue = {\n  posinset: number;\n  setsize: number;\n  /**\n   * Position of the last sibling that is itself a branch, or 0 if none are. Connectors only join a\n   * folder to its subfolders, so this is where the trunk has to stop — running it to the last child\n   * would leave it dangling past any trailing leaf rows.\n   */\n  lastBranchPos: number;\n};\n\nconst TreeIndexContext = React.createContext<TreeIndexContextValue>({\n  posinset: 1,\n  setsize: 1,\n  lastBranchPos: 0,\n});\n\ntype TreeItemContextValue = {\n  id: string;\n  labelId: string;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  disabled: boolean;\n  /**\n   * Parent levels whose trunk passes through this row. The row draws one vertical segment per\n   * entry, so a trunk survives crossing an expanded branch's descendant rows.\n   */\n  trunkLevels: readonly number[];\n  toggle: () => void;\n  select: () => void;\n};\n\nconst TreeItemContext = React.createContext<TreeItemContextValue | null>(null);\n\n/** Stable empty set, so inheriting \"no trunks\" doesn't remake the item context every render. */\nconst NO_TRUNKS: readonly number[] = [];\n\nfunction useTreeItemContext(component: string) {\n  const context = React.useContext(TreeItemContext);\n  if (!context) {\n    throw new Error(`\\`${component}\\` must be rendered inside a \\`TreeItem\\`.`);\n  }\n  return context;\n}\n\n/**\n * Reads the item's position among its siblings and whether it is currently expanded. Exposed for\n * consumers composing their own row content (badges, action buttons, counts) inside a `TreeItem`.\n */\nfunction useTreeItem() {\n  return useTreeItemContext(\"useTreeItem\");\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Sibling indexing\n *\n * `aria-setsize` / `aria-posinset` need sibling counts, which only the container knows. Rather than\n * a mount-order registry (two render passes, StrictMode-sensitive, wrong under conditional\n * rendering) each container walks its own children and wraps them in an index provider. Purely\n * positional, so it is correct on the first render and under SSR.\n *\n * Caveat: every valid element child occupies a set slot, so non-item children of a group (a \"Load\n * more\" control, for instance) would be counted. That placement question is deliberately deferred\n * to SW-2542.\n * -----------------------------------------------------------------------------------------------*/\n\nfunction useIndexedTreeChildren(children: React.ReactNode) {\n  return React.useMemo(() => {\n    const array = React.Children.toArray(children);\n    const elements = array.filter(React.isValidElement);\n    const setsize = elements.length;\n\n    // Which siblings are branches is read off `hasChildren` in the element's own props. A child\n    // wrapped in a consumer's own component reads as a leaf, which costs a connector rather than\n    // breaking anything — the alternative is a mount-order registry, and the whole point of doing\n    // this positionally is to stay correct on the first render.\n    const isBranch = (child: React.ReactElement) => (child.props as TreeItemProps)?.hasChildren === true;\n    const lastBranchPos = elements.reduce((last, child, index) => (isBranch(child) ? index + 1 : last), 0);\n\n    let posinset = 0;\n\n    return array.map((child, index) => {\n      if (!React.isValidElement(child)) return child;\n      posinset += 1;\n      return (\n        <TreeIndexContext.Provider key={child.key ?? index} value={{ posinset, setsize, lastBranchPos }}>\n          {child}\n        </TreeIndexContext.Provider>\n      );\n    });\n  }, [children]);\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Keyboard navigation\n *\n * Visible-node order is read from the DOM instead of a JS registry: collapsed groups are not\n * rendered at all, so `querySelectorAll('[role=\"treeitem\"]')` in document order *is* the visible\n * node sequence, and ancestor/descendant lookups are one `closest()` call. This keeps the traversal\n * correct for arbitrary consumer markup between the levels.\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_SELECTOR = '[role=\"treeitem\"]';\n\nfunction getVisibleItems(root: HTMLElement | null) {\n  if (!root) return [];\n  return [...root.querySelectorAll<HTMLElement>(ITEM_SELECTOR)];\n}\n\nfunction moveFocus(element: HTMLElement | null | undefined, setFocusedId: (id: string) => void) {\n  const id = element?.dataset.treeItemId;\n  if (!element || !id) return;\n  setFocusedId(id);\n  element.focus();\n}\n\ntype TreeKeyEvent = {\n  event: React.KeyboardEvent<HTMLElement>;\n  root: HTMLElement;\n  /** The `role=\"treeitem\"` element the key was pressed on. */\n  current: HTMLElement;\n  id: string;\n  hasChildren: boolean;\n  expanded: boolean;\n  disabled: boolean;\n  setExpanded: (id: string, expanded: boolean) => void;\n  setFocusedId: (id: string) => void;\n  activate: (id: string, hasChildren: boolean, expanded: boolean) => void;\n};\n\n/** Moves focus to `element`, if there is one, and claims the key press. */\nfunction navigateTo({ event, setFocusedId }: TreeKeyEvent, element: HTMLElement | null | undefined) {\n  event.preventDefault();\n  moveFocus(element, setFocusedId);\n}\n\nfunction stepBy(context: TreeKeyEvent, offset: number) {\n  const items = getVisibleItems(context.root);\n  navigateTo(context, items[items.indexOf(context.current) + offset]);\n}\n\n/**\n * `Space` is deliberately unbound: the WAI-ARIA pattern reserves it for multi-select trees, which\n * are out of scope here but should not be precluded.\n */\nconst TREE_KEY_HANDLERS: Record<string, (context: TreeKeyEvent) => void> = {\n  ArrowDown: (context) => stepBy(context, 1),\n  ArrowUp: (context) => stepBy(context, -1),\n  ArrowRight: (context) => {\n    const { event, current, id, hasChildren, expanded, setExpanded } = context;\n    if (hasChildren && !expanded) {\n      event.preventDefault();\n      setExpanded(id, true);\n      return;\n    }\n    if (expanded) navigateTo(context, current.querySelector<HTMLElement>(ITEM_SELECTOR));\n  },\n  ArrowLeft: (context) => {\n    const { event, current, id, expanded, setExpanded } = context;\n    if (expanded) {\n      event.preventDefault();\n      setExpanded(id, false);\n      return;\n    }\n    navigateTo(context, current.parentElement?.closest<HTMLElement>(ITEM_SELECTOR));\n  },\n  Home: (context) => navigateTo(context, getVisibleItems(context.root)[0]),\n  End: (context) => {\n    const items = getVisibleItems(context.root);\n    navigateTo(context, items[items.length - 1]);\n  },\n  Enter: (context) => {\n    if (context.disabled) return;\n    context.event.preventDefault();\n    context.activate(context.id, context.hasChildren, context.expanded);\n  },\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tree\n * -----------------------------------------------------------------------------------------------*/\n\ntype TreeGuides = \"none\" | \"hover\" | \"always\";\n\ntype TreeProps = Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  /** Expanded node ids (controlled). */\n  expandedIds?: Set<string>;\n  /** Initially expanded node ids (uncontrolled). */\n  defaultExpandedIds?: Set<string>;\n  onExpandedChange?: (expandedIds: Set<string>) => void;\n  /** Selected node id (controlled). Pass `null` for \"nothing selected\". */\n  selectedId?: string | null;\n  /** Initially selected node id (uncontrolled). */\n  defaultSelectedId?: string | null;\n  onSelectedChange?: (selectedId: string) => void;\n  /** Fired by `Enter` and by clicking a label — the node's default action. */\n  onActivate?: (id: string) => void;\n  /** Whether selecting a parent node also toggles its expansion. */\n  expandOnSelect?: boolean;\n  /**\n   * Vertical indent guides joining each level to its parent. `\"hover\"` reveals them while the\n   * pointer is anywhere over the tree, which keeps a dense tree quiet at rest but still lets you\n   * trace a deep branch; `\"always\"` pins them on; `\"none\"` turns them off.\n   */\n  guides?: TreeGuides;\n};\n\nfunction Tree({\n  className,\n  children,\n  expandedIds: expandedIdsProp,\n  defaultExpandedIds,\n  onExpandedChange,\n  selectedId: selectedIdProp,\n  defaultSelectedId = null,\n  onSelectedChange,\n  onActivate,\n  expandOnSelect = true,\n  guides = \"hover\",\n  ...props\n}: TreeProps) {\n  const treeRef = React.useRef<HTMLDivElement>(null);\n\n  const [expandedIds, setExpandedIds] = useControllableState<Set<string>>({\n    prop: expandedIdsProp,\n    defaultProp: defaultExpandedIds ?? new Set<string>(),\n    onChange: onExpandedChange,\n  });\n  const [selectedId, setSelectedId] = useControllableState<string | null>({\n    prop: selectedIdProp,\n    defaultProp: defaultSelectedId,\n    onChange: (id) => {\n      if (id != null) onSelectedChange?.(id);\n    },\n  });\n  const [focusedId, setFocusedId] = React.useState<string | null>(null);\n\n  const setExpanded = React.useCallback(\n    (id: string, expanded: boolean) => {\n      setExpandedIds((current) => {\n        const next = new Set(current);\n        if (expanded) next.add(id);\n        else next.delete(id);\n        return next;\n      });\n    },\n    [setExpandedIds],\n  );\n\n  const activateItem = React.useCallback(\n    (activatedId: string, hasChildren: boolean, expanded: boolean) => {\n      setSelectedId(activatedId);\n      if (expandOnSelect && hasChildren) setExpanded(activatedId, !expanded);\n      onActivate?.(activatedId);\n    },\n    [setSelectedId, expandOnSelect, setExpanded, onActivate],\n  );\n\n  const handleItemKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      const root = treeRef.current;\n      const current = (event.target as HTMLElement | null)?.closest<HTMLElement>(ITEM_SELECTOR);\n      const id = current?.dataset.treeItemId;\n      if (!root || !current || !id || !root.contains(current)) return;\n\n      const handler = TREE_KEY_HANDLERS[event.key];\n      if (!handler) return;\n\n      handler({\n        event,\n        root,\n        current,\n        id,\n        hasChildren: current.dataset.treeHasChildren === \"true\",\n        expanded: current.getAttribute(\"aria-expanded\") === \"true\",\n        disabled: current.getAttribute(\"aria-disabled\") === \"true\",\n        setExpanded,\n        setFocusedId,\n        activate: activateItem,\n      });\n    },\n    [setExpanded, activateItem],\n  );\n\n  const context = React.useMemo<TreeContextValue>(\n    () => ({\n      expandedIds: expandedIds ?? new Set<string>(),\n      setExpanded,\n      selectedId: selectedId ?? null,\n      activateItem,\n      focusedId,\n      setFocusedId,\n      expandOnSelect,\n      guides,\n      onItemKeyDown: handleItemKeyDown,\n    }),\n    [expandedIds, setExpanded, selectedId, activateItem, focusedId, expandOnSelect, guides, handleItemKeyDown],\n  );\n\n  return (\n    <TreeContext.Provider value={context}>\n      <TreeLevelContext.Provider value={1}>\n        <div\n          ref={treeRef}\n          data-slot=\"tree\"\n          data-guides={guides}\n          role=\"tree\"\n          tabIndex={-1}\n          // `group/tree` is what the `\"hover\"` guide mode hangs off: hovering anywhere in the tree\n          // reveals every guide at once, so you can trace a branch without hunting row by row.\n          //\n          // `--tree-indent` is 1.25rem so that a child's chevron lands exactly on its parent's\n          // icon: the icon sits 1.5rem into the content box (chevron 0.875 + gap 0.375 + the\n          // 0.25rem lead-in), and the chevron sits at the lead-in, so one step must be\n          // 1.5rem - 0.25rem. Indentation, the guide offsets and the elbow reach are all derived\n          // from this one value — override it and the connectors follow.\n          //\n          // `--tree-guide-color` is deliberately *opaque*, via `color-mix`, even though it is meant\n          // to look like a 40% tint. Guide segments necessarily overlap — each row's line overshoots\n          // into the row above so the two meet across the label's border, and an elbow shares its\n          // column with the trunk it branches from. With a semi-transparent colour every overlap\n          // composites twice and shows up as a darker stretch of line. Mixing to an opaque value up\n          // front makes overlapping draws idempotent, so the tree reads as one uniform hairline.\n          className={cn(\n            \"group/tree text-foreground flex w-full flex-col text-sm\",\n            \"[--tree-indent:1.25rem] [--tree-guide-color:color-mix(in_oklch,var(--muted-foreground)_40%,var(--background))]\",\n            className,\n          )}\n          {...props}\n        >\n          {/*\n            Radix requires a `Tooltip.Provider` above any `Tooltip`, and the labels mount one each\n            to reveal truncated text. Providing it here rather than asking consumers to wrap their\n            app keeps `Tree` self-contained; nesting inside a consumer's own provider is supported,\n            and the longer delay is deliberate — instant tooltips while sweeping the pointer down a\n            dense tree are noise.\n          */}\n          <TooltipProvider delayDuration={500}>\n            <TreeItemsContainer>{children}</TreeItemsContainer>\n          </TooltipProvider>\n        </div>\n      </TreeLevelContext.Provider>\n    </TreeContext.Provider>\n  );\n}\n\nfunction TreeItemsContainer({ children }: { children: React.ReactNode }) {\n  return useIndexedTreeChildren(children);\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TreeItem\n * -----------------------------------------------------------------------------------------------*/\n\ntype TreeItemProps = React.ComponentProps<\"div\"> & {\n  id: string;\n  /**\n   * Whether the node can be expanded. Kept explicit rather than inferred from rendered children so\n   * a node whose children have not been fetched yet still reports `aria-expanded=\"false\"`.\n   */\n  hasChildren?: boolean;\n  disabled?: boolean;\n};\n\nfunction TreeItem({\n  className,\n  children,\n  id,\n  hasChildren = false,\n  disabled = false,\n  onClick,\n  onFocus,\n  onKeyDown,\n  style,\n  ...props\n}: TreeItemProps) {\n  const { expandedIds, setExpanded, selectedId, activateItem, focusedId, setFocusedId, onItemKeyDown } =\n    useTreeContext(\"TreeItem\");\n  const level = React.useContext(TreeLevelContext);\n  const { posinset, setsize, lastBranchPos } = React.useContext(TreeIndexContext);\n  const labelId = `${React.useId()}-label`;\n\n  const expanded = hasChildren && expandedIds.has(id);\n  const selected = selectedId === id;\n\n  const toggle = React.useCallback(() => {\n    if (hasChildren) setExpanded(id, !expanded);\n  }, [hasChildren, setExpanded, id, expanded]);\n\n  // Routed through the tree's `activateItem` so a click and `Enter` are the same code path —\n  // notably, both fire `onActivate`.\n  const select = React.useCallback(() => {\n    if (disabled) return;\n    setFocusedId(id);\n    activateItem(id, hasChildren, expanded);\n  }, [disabled, setFocusedId, id, activateItem, hasChildren, expanded]);\n\n  // Roving tabindex, minimal form: the focused node is the single tab stop, falling back to the\n  // first root node before the tree has been entered. SW-2541 extends this (selection-aware entry\n  // point, focus retention across collapse and lazy load).\n  const tabbable = focusedId ? focusedId === id : level === 1 && posinset === 1;\n\n  // Guides are drawn on the row (see `TreeItemLabel`), so a row has to know every ancestor trunk\n  // crossing it, not just its own parent's. The set is threaded down the tree: inherit the parent's\n  // and add this row's own parent level when a later sibling folder needs the line to continue past\n  // this entire subtree.\n  const parentItem = React.useContext(TreeItemContext);\n  const inheritedTrunkLevels = parentItem?.trunkLevels ?? NO_TRUNKS;\n  const trunkLevels = React.useMemo(\n    () => (level > 1 && posinset < lastBranchPos ? [...inheritedTrunkLevels, level - 1] : inheritedTrunkLevels),\n    [inheritedTrunkLevels, level, posinset, lastBranchPos],\n  );\n\n  const itemContext = React.useMemo<TreeItemContextValue>(\n    () => ({\n      id,\n      labelId,\n      level,\n      expanded,\n      hasChildren,\n      selected,\n      disabled,\n      trunkLevels,\n      toggle,\n      select,\n    }),\n    [id, labelId, level, expanded, hasChildren, selected, disabled, trunkLevels, toggle, select],\n  );\n\n  return (\n    <TreeItemContext.Provider value={itemContext}>\n      <div\n        // Spread first, for the same reason as `TreeItemLabel`: every ARIA attribute below is\n        // maintained by the tree and must not be overridable from props.\n        {...props}\n        data-slot=\"tree-item\"\n        data-tree-item-id={id}\n        data-tree-has-children={hasChildren}\n        data-state={expanded ? \"expanded\" : \"collapsed\"}\n        role=\"treeitem\"\n        // The accessible name comes from the label alone. Without this, name-from-content would\n        // sweep in every descendant node's text once a branch is expanded.\n        aria-labelledby={labelId}\n        aria-expanded={hasChildren ? expanded : undefined}\n        aria-level={level}\n        aria-posinset={posinset}\n        aria-setsize={setsize}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        tabIndex={tabbable ? 0 : -1}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.defaultPrevented) return;\n          onItemKeyDown(event);\n        }}\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          // Clicks on a descendant node are that node's business — every treeitem in the ancestor\n          // chain sees the bubbled event.\n          if ((event.target as HTMLElement).closest(ITEM_SELECTOR) !== event.currentTarget) return;\n          select();\n        }}\n        onFocus={(event) => {\n          onFocus?.(event);\n          if (event.target === event.currentTarget) setFocusedId(id);\n        }}\n        style={\n          {\n            // Inherited by the label, which draws the elbow from the same two values.\n            \"--tree-guide-left\": `calc(var(--tree-indent) * ${level - 2} + 0.6875rem)`,\n            // Stops 0.25rem short of the row's chevron rather than touching it, so the connector\n            // reads as pointing at the row instead of welded to the glyph.\n            \"--tree-elbow-run\": \"calc(var(--tree-indent) - 0.6875rem)\",\n            // Shared by the elbow's corner and by where the same-column trunk picks up, so the two\n            // meet exactly instead of overlapping or leaving a gap.\n            \"--tree-elbow-radius\": \"0.5rem\",\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"relative outline-none\",\n          // Direct-child selectors, deliberately not `group-*/tree-item`: tree items nest, and a\n          // group variant matches *any* ancestor, so a focused or selected parent painted its focus\n          // ring onto every descendant row. Backgrounds live on the label for the same reason —\n          // anything painted here would spread behind the whole subtree.\n          \"focus-visible:[&>[data-slot=tree-item-label]]:border-ring focus-visible:[&>[data-slot=tree-item-label]]:shadow-focus\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </TreeItemContext.Provider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TreeItemLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst treeItemLabelVariants = cva(\n  \"flex w-full min-w-0 cursor-default items-center gap-1.5 rounded-md pr-2 text-left transition-colors select-none\",\n  {\n    variants: {\n      size: {\n        sm: \"h-6 text-xs\",\n        default: \"h-7 text-sm\",\n        lg: \"h-9 text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\ntype TreeItemLabelProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof treeItemLabelVariants> & {\n    /**\n     * Decorative leading icon, rendered between the chevron and the label text. Hidden from\n     * assistive tech — the node's accessible name comes from the label text alone, so anything a\n     * screen reader must convey belongs in the text, not here. Swap it on expansion (open/closed\n     * folders) by reading `expanded` from `useTreeItem()` inside your own icon component.\n     */\n    icon?: React.ReactNode;\n    /**\n     * Right-aligned slot for per-node adornments — a count `Badge`, a `Spinner`, a status dot. It\n     * sits inside the label, so its text joins the node's accessible name: a count reads as\n     * \"Onboarding 3\", which is usually what you want. Wrap it in `aria-hidden` yourself for purely\n     * decorative content such as a spinner.\n     */\n    trailing?: React.ReactNode;\n  };\n\nfunction TreeItemLabel({ className, children, size, style, icon, trailing, ...props }: TreeItemLabelProps) {\n  const { labelId, level, expanded, hasChildren, selected, disabled, trunkLevels, toggle } =\n    useTreeItemContext(\"TreeItemLabel\");\n  const { guides } = useTreeContext(\"TreeItemLabel\");\n\n  // The elbow lives on the row because the label element *is* the row, so it can be sized in\n  // halves of it — the curve has to land on the row's vertical centre. A connector joins a folder\n  // to its subfolders, so only a branch row gets one.\n  const showElbow = guides !== \"none\" && level > 1 && hasChildren;\n  const showGuides = guides !== \"none\" && (showElbow || trunkLevels.length > 0);\n\n  const textRef = React.useRef<HTMLSpanElement>(null);\n  const [tooltipOpen, setTooltipOpen] = React.useState(false);\n\n  // Truncation is measured when the tooltip would open, not tracked continuously: a\n  // `ResizeObserver` per row would cost every row in a large tree for a hint almost none of them\n  // need, and this answers the same question at the only moment it matters.\n  const handleTooltipOpenChange = (next: boolean) => {\n    const text = textRef.current;\n    setTooltipOpen(next && !!text && text.scrollWidth > text.clientWidth);\n  };\n\n  return (\n    <div\n      // Spread first: the derived ARIA wiring below is authoritative. A consumer-supplied `id` would\n      // otherwise break the `TreeItem` → `aria-labelledby` link that names the node.\n      {...props}\n      id={labelId}\n      data-slot=\"tree-item-label\"\n      // The row is a passive label, not a control: the parent `role=\"treeitem\"` owns focus, click\n      // handling, keyboard handling and the accessible name, so a nested control would fight it.\n      // `--tree-guide-left` / `--tree-elbow-run` are inherited from the `TreeItem`.\n      style={{ paddingInlineStart: `calc(var(--tree-indent) * ${level - 1} + 0.25rem)`, ...style }}\n      className={cn(\n        treeItemLabelVariants({ size }),\n        \"relative border border-transparent\",\n        // Only selection paints a background — an open folder is already marked by its rotated\n        // chevron, open-folder icon and the connectors running down from it.\n        selected ? \"bg-accent text-accent-foreground font-medium\" : \"hover:bg-muted\",\n        // From this node's own state, not an ancestor selector: `aria-disabled` is per-node, so a\n        // disabled folder must not dim the contents underneath it.\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {showGuides ? (\n        // One absolutely-positioned layer owns every guide on this row, fixing two bugs at once.\n        //\n        // Paint order: the trunk used to be drawn by the `TreeItem`, an *ancestor* of every\n        // descendant row. Those rows are positioned and paint an opaque hover/selected background\n        // over anything an ancestor drew, so the trunk vanished behind whichever row you pointed\n        // at. Drawn here it belongs to the row's own box, so it paints above that row's background\n        // — and no sibling row can cover it, because every row draws its own segments.\n        //\n        // One coordinate system: `left` resolves against the nearest positioned ancestor's\n        // *padding* box. The label carries `border border-transparent` for its focus ring while the\n        // `TreeItem` carries none, so one `--tree-guide-left` landed 1px apart on the two elements\n        // and the elbow/trunk overlap read as a 2px line. Both now share this container.\n        <span\n          data-slot=\"tree-item-guides\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none absolute inset-0\",\n            // The fade lives on the container, not on each line. Opacity on the parent renders the\n            // whole layer into one buffer and composites it once, so a seam between two segments\n            // can never double-expose mid-transition.\n            guides === \"hover\" &&\n              \"opacity-0 transition-opacity group-hover/tree:opacity-100 motion-reduce:transition-none\",\n          )}\n        >\n          {trunkLevels.map((trunkLevel) => (\n            <span\n              key={trunkLevel}\n              data-slot=\"tree-item-guide-trunk\"\n              style={{ left: `calc(var(--tree-indent) * ${trunkLevel - 1} + 0.6875rem)` }}\n              // Overshoots upward by half a chevron to cross the label's border into the row above,\n              // so consecutive rows tile into one unbroken line.\n              className=\"absolute top-[-0.4375rem] bottom-0 w-0 border-l border-[var(--tree-guide-color)]\"\n            />\n          ))}\n          {showElbow ? (\n            // Down the guide line, then a rounded turn right, stopping just short of this row's\n            // chevron. Starts half a chevron above the row so the line emerges from under the\n            // parent's chevron instead of leaving a half-row gap.\n            <span\n              data-slot=\"tree-item-guide-elbow\"\n              className={cn(\n                \"absolute top-[-0.4375rem] left-[var(--tree-guide-left)] border-[var(--tree-guide-color)]\",\n                \"h-[calc(50%+0.4375rem)] w-[var(--tree-elbow-run)] border-b border-l\",\n                \"rounded-bl-[var(--tree-elbow-radius)]\",\n              )}\n            />\n          ) : null}\n        </span>\n      ) : null}\n      {hasChildren ? (\n        // A pointer-only affordance, deliberately not a `<button>`: expansion is reachable from the\n        // keyboard through the parent treeitem's arrow keys, so this stays non-focusable. A focusable\n        // element hidden from assistive tech is a contradiction, and inside a single-tab-stop widget\n        // it would also be a second focus stop reachable by pointer.\n        <span\n          data-slot=\"tree-item-indicator\"\n          aria-hidden=\"true\"\n          onClick={(event) => {\n            // Toggle from the chevron alone, without changing the selection.\n            event.stopPropagation();\n            toggle();\n          }}\n          className=\"flex size-3.5 shrink-0 items-center justify-center text-muted-foreground\"\n        >\n          <ChevronRightIcon className={cn(\"size-3.5 transition-transform\", expanded && \"rotate-90\")} />\n        </span>\n      ) : (\n        <span data-slot=\"tree-item-indicator-spacer\" aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n      )}\n      {icon ? (\n        <span\n          data-slot=\"tree-item-icon\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0\",\n            selected ? \"text-accent-foreground\" : \"text-muted-foreground\",\n          )}\n        >\n          {icon}\n        </span>\n      ) : null}\n      <Tooltip open={tooltipOpen} onOpenChange={handleTooltipOpenChange}>\n        <TooltipTrigger asChild>\n          <span ref={textRef} className=\"min-w-0 flex-1 truncate\">\n            {children}\n          </span>\n        </TooltipTrigger>\n        {/*\n          A purely visual repair for clipped text. The trigger is a plain `span`, so it never takes\n          focus and this only ever opens on hover — and the node's accessible name already carries\n          the label in full, so a screen reader is not relying on it.\n        */}\n        <TooltipContent>{children}</TooltipContent>\n      </Tooltip>\n      {trailing ? (\n        <span\n          data-slot=\"tree-item-trailing\"\n          className=\"ml-auto flex shrink-0 items-center gap-1 [&_svg]:size-3.5\"\n        >\n          {trailing}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TreeItemGroup\n * -----------------------------------------------------------------------------------------------*/\n\nfunction TreeItemGroup({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { expanded, level } = useTreeItemContext(\"TreeItemGroup\");\n\n  // Not rendered while collapsed: keeps collapsed subtrees out of the accessibility tree entirely,\n  // and makes DOM order equal visible order for keyboard traversal.\n  if (!expanded) return null;\n\n  return (\n    <TreeLevelContext.Provider value={level + 1}>\n      <div {...props} data-slot=\"tree-item-group\" role=\"group\" className={cn(\"flex flex-col\", className)}>\n        <TreeItemsContainer>{children}</TreeItemsContainer>\n      </div>\n    </TreeLevelContext.Provider>\n  );\n}\n\nexport {\n  Tree,\n  TreeItem,\n  TreeItemGroup,\n  TreeItemLabel,\n  treeItemLabelVariants,\n  useTreeItem,\n  type TreeGuides,\n  type TreeItemLabelProps,\n  type TreeItemProps,\n  type TreeProps,\n};\n"],"names":["TreeContext","React","useTreeContext","component","context","TreeLevelContext","TreeIndexContext","TreeItemContext","NO_TRUNKS","useTreeItemContext","useTreeItem","useIndexedTreeChildren","children","array","elements","setsize","isBranch","child","lastBranchPos","last","index","posinset","jsx","ITEM_SELECTOR","getVisibleItems","root","moveFocus","element","setFocusedId","id","navigateTo","event","stepBy","offset","items","TREE_KEY_HANDLERS","current","hasChildren","expanded","setExpanded","Tree","className","expandedIdsProp","defaultExpandedIds","onExpandedChange","selectedIdProp","defaultSelectedId","onSelectedChange","onActivate","expandOnSelect","guides","props","treeRef","expandedIds","setExpandedIds","useControllableState","selectedId","setSelectedId","focusedId","next","activateItem","activatedId","handleItemKeyDown","handler","cn","TooltipProvider","TreeItemsContainer","TreeItem","disabled","onClick","onFocus","onKeyDown","style","onItemKeyDown","level","labelId","selected","toggle","select","tabbable","inheritedTrunkLevels","trunkLevels","itemContext","treeItemLabelVariants","cva","TreeItemLabel","size","icon","trailing","showElbow","showGuides","textRef","tooltipOpen","setTooltipOpen","handleTooltipOpenChange","text","jsxs","trunkLevel","ChevronRightIcon","Tooltip","TooltipTrigger","TooltipContent","TreeItemGroup"],"mappings":"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"}

package/dist/ui/tree.js

@@ -0,0 +1,406 @@
+import { jsx as a, jsxs as A } from "react/jsx-runtime";
+import { useControllableState as j } from "@radix-ui/react-use-controllable-state";
+import { cva as W } from "class-variance-authority";
+import { ChevronRightIcon as Y } from "lucide-react";
+import * as n from "react";
+import { TooltipProvider as J, Tooltip as Q, TooltipTrigger as X, TooltipContent as Z } from "./tooltip.js";
+import { cn as E } from "../lib/utils.js";
+const O = n.createContext(null);
+function G(e) {
+  const r = n.useContext(O);
+  if (!r)
+    throw new Error(`\`${e}\` must be rendered inside a \`Tree\`.`);
+  return r;
+}
+const B = n.createContext(1), H = n.createContext({
+  posinset: 1,
+  setsize: 1,
+  lastBranchPos: 0
+}), K = n.createContext(null), ee = [];
+function M(e) {
+  const r = n.useContext(K);
+  if (!r)
+    throw new Error(`\`${e}\` must be rendered inside a \`TreeItem\`.`);
+  return r;
+}
+function ue() {
+  return M("useTreeItem");
+}
+function te(e) {
+  return n.useMemo(() => {
+    const r = n.Children.toArray(e), t = r.filter(n.isValidElement), o = t.length, l = (c) => c.props?.hasChildren === !0, u = t.reduce((c, p, v) => l(p) ? v + 1 : c, 0);
+    let x = 0;
+    return r.map((c, p) => n.isValidElement(c) ? (x += 1, /* @__PURE__ */ a(H.Provider, { value: { posinset: x, setsize: o, lastBranchPos: u }, children: c }, c.key ?? p)) : c);
+  }, [e]);
+}
+const R = '[role="treeitem"]';
+function $(e) {
+  return e ? [...e.querySelectorAll(R)] : [];
+}
+function re(e, r) {
+  const t = e?.dataset.treeItemId;
+  !e || !t || (r(t), e.focus());
+}
+function L({ event: e, setFocusedId: r }, t) {
+  e.preventDefault(), re(t, r);
+}
+function F(e, r) {
+  const t = $(e.root);
+  L(e, t[t.indexOf(e.current) + r]);
+}
+const ne = {
+  ArrowDown: (e) => F(e, 1),
+  ArrowUp: (e) => F(e, -1),
+  ArrowRight: (e) => {
+    const { event: r, current: t, id: o, hasChildren: l, expanded: u, setExpanded: x } = e;
+    if (l && !u) {
+      r.preventDefault(), x(o, !0);
+      return;
+    }
+    u && L(e, t.querySelector(R));
+  },
+  ArrowLeft: (e) => {
+    const { event: r, current: t, id: o, expanded: l, setExpanded: u } = e;
+    if (l) {
+      r.preventDefault(), u(o, !1);
+      return;
+    }
+    L(e, t.parentElement?.closest(R));
+  },
+  Home: (e) => L(e, $(e.root)[0]),
+  End: (e) => {
+    const r = $(e.root);
+    L(e, r[r.length - 1]);
+  },
+  Enter: (e) => {
+    e.disabled || (e.event.preventDefault(), e.activate(e.id, e.hasChildren, e.expanded));
+  }
+};
+function me({
+  className: e,
+  children: r,
+  expandedIds: t,
+  defaultExpandedIds: o,
+  onExpandedChange: l,
+  selectedId: u,
+  defaultSelectedId: x = null,
+  onSelectedChange: c,
+  onActivate: p,
+  expandOnSelect: v = !0,
+  guides: C = "hover",
+  ...N
+}) {
+  const D = n.useRef(null), [w, P] = j({
+    prop: t,
+    defaultProp: o ?? /* @__PURE__ */ new Set(),
+    onChange: l
+  }), [b, z] = j({
+    prop: u,
+    defaultProp: x,
+    onChange: (s) => {
+      s != null && c?.(s);
+    }
+  }), [m, g] = n.useState(null), h = n.useCallback(
+    (s, I) => {
+      P((d) => {
+        const k = new Set(d);
+        return I ? k.add(s) : k.delete(s), k;
+      });
+    },
+    [P]
+  ), T = n.useCallback(
+    (s, I, d) => {
+      z(s), v && I && h(s, !d), p?.(s);
+    },
+    [z, v, h, p]
+  ), y = n.useCallback(
+    (s) => {
+      const I = D.current, d = s.target?.closest(R), k = d?.dataset.treeItemId;
+      if (!I || !d || !k || !I.contains(d)) return;
+      const S = ne[s.key];
+      S && S({
+        event: s,
+        root: I,
+        current: d,
+        id: k,
+        hasChildren: d.dataset.treeHasChildren === "true",
+        expanded: d.getAttribute("aria-expanded") === "true",
+        disabled: d.getAttribute("aria-disabled") === "true",
+        setExpanded: h,
+        setFocusedId: g,
+        activate: T
+      });
+    },
+    [h, T]
+  ), i = n.useMemo(
+    () => ({
+      expandedIds: w ?? /* @__PURE__ */ new Set(),
+      setExpanded: h,
+      selectedId: b ?? null,
+      activateItem: T,
+      focusedId: m,
+      setFocusedId: g,
+      expandOnSelect: v,
+      guides: C,
+      onItemKeyDown: y
+    }),
+    [w, h, b, T, m, v, C, y]
+  );
+  return /* @__PURE__ */ a(O.Provider, { value: i, children: /* @__PURE__ */ a(B.Provider, { value: 1, children: /* @__PURE__ */ a(
+    "div",
+    {
+      ref: D,
+      "data-slot": "tree",
+      "data-guides": C,
+      role: "tree",
+      tabIndex: -1,
+      className: E(
+        "group/tree text-foreground flex w-full flex-col text-sm",
+        "[--tree-indent:1.25rem] [--tree-guide-color:color-mix(in_oklch,var(--muted-foreground)_40%,var(--background))]",
+        e
+      ),
+      ...N,
+      children: /* @__PURE__ */ a(J, { delayDuration: 500, children: /* @__PURE__ */ a(q, { children: r }) })
+    }
+  ) }) });
+}
+function q({ children: e }) {
+  return te(e);
+}
+function fe({
+  className: e,
+  children: r,
+  id: t,
+  hasChildren: o = !1,
+  disabled: l = !1,
+  onClick: u,
+  onFocus: x,
+  onKeyDown: c,
+  style: p,
+  ...v
+}) {
+  const { expandedIds: C, setExpanded: N, selectedId: D, activateItem: w, focusedId: P, setFocusedId: b, onItemKeyDown: z } = G("TreeItem"), m = n.useContext(B), { posinset: g, setsize: h, lastBranchPos: T } = n.useContext(H), y = `${n.useId()}-label`, i = o && C.has(t), s = D === t, I = n.useCallback(() => {
+    o && N(t, !i);
+  }, [o, N, t, i]), d = n.useCallback(() => {
+    l || (b(t), w(t, o, i));
+  }, [l, b, t, w, o, i]), k = P ? P === t : m === 1 && g === 1, _ = n.useContext(K)?.trunkLevels ?? ee, V = n.useMemo(
+    () => m > 1 && g < T ? [..._, m - 1] : _,
+    [_, m, g, T]
+  ), U = n.useMemo(
+    () => ({
+      id: t,
+      labelId: y,
+      level: m,
+      expanded: i,
+      hasChildren: o,
+      selected: s,
+      disabled: l,
+      trunkLevels: V,
+      toggle: I,
+      select: d
+    }),
+    [t, y, m, i, o, s, l, V, I, d]
+  );
+  return /* @__PURE__ */ a(K.Provider, { value: U, children: /* @__PURE__ */ a(
+    "div",
+    {
+      ...v,
+      "data-slot": "tree-item",
+      "data-tree-item-id": t,
+      "data-tree-has-children": o,
+      "data-state": i ? "expanded" : "collapsed",
+      role: "treeitem",
+      "aria-labelledby": y,
+      "aria-expanded": o ? i : void 0,
+      "aria-level": m,
+      "aria-posinset": g,
+      "aria-setsize": h,
+      "aria-selected": s,
+      "aria-disabled": l || void 0,
+      tabIndex: k ? 0 : -1,
+      onKeyDown: (f) => {
+        c?.(f), !f.defaultPrevented && z(f);
+      },
+      onClick: (f) => {
+        u?.(f), !f.defaultPrevented && f.target.closest(R) === f.currentTarget && d();
+      },
+      onFocus: (f) => {
+        x?.(f), f.target === f.currentTarget && b(t);
+      },
+      style: {
+        // Inherited by the label, which draws the elbow from the same two values.
+        "--tree-guide-left": `calc(var(--tree-indent) * ${m - 2} + 0.6875rem)`,
+        // Stops 0.25rem short of the row's chevron rather than touching it, so the connector
+        // reads as pointing at the row instead of welded to the glyph.
+        "--tree-elbow-run": "calc(var(--tree-indent) - 0.6875rem)",
+        // Shared by the elbow's corner and by where the same-column trunk picks up, so the two
+        // meet exactly instead of overlapping or leaving a gap.
+        "--tree-elbow-radius": "0.5rem",
+        ...p
+      },
+      className: E(
+        "relative outline-none",
+        // Direct-child selectors, deliberately not `group-*/tree-item`: tree items nest, and a
+        // group variant matches *any* ancestor, so a focused or selected parent painted its focus
+        // ring onto every descendant row. Backgrounds live on the label for the same reason —
+        // anything painted here would spread behind the whole subtree.
+        "focus-visible:[&>[data-slot=tree-item-label]]:border-ring focus-visible:[&>[data-slot=tree-item-label]]:shadow-focus",
+        e
+      ),
+      children: r
+    }
+  ) });
+}
+const oe = W(
+  "flex w-full min-w-0 cursor-default items-center gap-1.5 rounded-md pr-2 text-left transition-colors select-none",
+  {
+    variants: {
+      size: {
+        sm: "h-6 text-xs",
+        default: "h-7 text-sm",
+        lg: "h-9 text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function pe({ className: e, children: r, size: t, style: o, icon: l, trailing: u, ...x }) {
+  const { labelId: c, level: p, expanded: v, hasChildren: C, selected: N, disabled: D, trunkLevels: w, toggle: P } = M("TreeItemLabel"), { guides: b } = G("TreeItemLabel"), z = b !== "none" && p > 1 && C, m = b !== "none" && (z || w.length > 0), g = n.useRef(null), [h, T] = n.useState(!1), y = (i) => {
+    const s = g.current;
+    T(i && !!s && s.scrollWidth > s.clientWidth);
+  };
+  return /* @__PURE__ */ A(
+    "div",
+    {
+      ...x,
+      id: c,
+      "data-slot": "tree-item-label",
+      style: { paddingInlineStart: `calc(var(--tree-indent) * ${p - 1} + 0.25rem)`, ...o },
+      className: E(
+        oe({ size: t }),
+        "relative border border-transparent",
+        // Only selection paints a background — an open folder is already marked by its rotated
+        // chevron, open-folder icon and the connectors running down from it.
+        N ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted",
+        // From this node's own state, not an ancestor selector: `aria-disabled` is per-node, so a
+        // disabled folder must not dim the contents underneath it.
+        D && "pointer-events-none opacity-50",
+        e
+      ),
+      children: [
+        m ? (
+          // One absolutely-positioned layer owns every guide on this row, fixing two bugs at once.
+          //
+          // Paint order: the trunk used to be drawn by the `TreeItem`, an *ancestor* of every
+          // descendant row. Those rows are positioned and paint an opaque hover/selected background
+          // over anything an ancestor drew, so the trunk vanished behind whichever row you pointed
+          // at. Drawn here it belongs to the row's own box, so it paints above that row's background
+          // — and no sibling row can cover it, because every row draws its own segments.
+          //
+          // One coordinate system: `left` resolves against the nearest positioned ancestor's
+          // *padding* box. The label carries `border border-transparent` for its focus ring while the
+          // `TreeItem` carries none, so one `--tree-guide-left` landed 1px apart on the two elements
+          // and the elbow/trunk overlap read as a 2px line. Both now share this container.
+          /* @__PURE__ */ A(
+            "span",
+            {
+              "data-slot": "tree-item-guides",
+              "aria-hidden": "true",
+              className: E(
+                "pointer-events-none absolute inset-0",
+                // The fade lives on the container, not on each line. Opacity on the parent renders the
+                // whole layer into one buffer and composites it once, so a seam between two segments
+                // can never double-expose mid-transition.
+                b === "hover" && "opacity-0 transition-opacity group-hover/tree:opacity-100 motion-reduce:transition-none"
+              ),
+              children: [
+                w.map((i) => /* @__PURE__ */ a(
+                  "span",
+                  {
+                    "data-slot": "tree-item-guide-trunk",
+                    style: { left: `calc(var(--tree-indent) * ${i - 1} + 0.6875rem)` },
+                    className: "absolute top-[-0.4375rem] bottom-0 w-0 border-l border-[var(--tree-guide-color)]"
+                  },
+                  i
+                )),
+                z ? (
+                  // Down the guide line, then a rounded turn right, stopping just short of this row's
+                  // chevron. Starts half a chevron above the row so the line emerges from under the
+                  // parent's chevron instead of leaving a half-row gap.
+                  /* @__PURE__ */ a(
+                    "span",
+                    {
+                      "data-slot": "tree-item-guide-elbow",
+                      className: E(
+                        "absolute top-[-0.4375rem] left-[var(--tree-guide-left)] border-[var(--tree-guide-color)]",
+                        "h-[calc(50%+0.4375rem)] w-[var(--tree-elbow-run)] border-b border-l",
+                        "rounded-bl-[var(--tree-elbow-radius)]"
+                      )
+                    }
+                  )
+                ) : null
+              ]
+            }
+          )
+        ) : null,
+        C ? (
+          // A pointer-only affordance, deliberately not a `<button>`: expansion is reachable from the
+          // keyboard through the parent treeitem's arrow keys, so this stays non-focusable. A focusable
+          // element hidden from assistive tech is a contradiction, and inside a single-tab-stop widget
+          // it would also be a second focus stop reachable by pointer.
+          /* @__PURE__ */ a(
+            "span",
+            {
+              "data-slot": "tree-item-indicator",
+              "aria-hidden": "true",
+              onClick: (i) => {
+                i.stopPropagation(), P();
+              },
+              className: "flex size-3.5 shrink-0 items-center justify-center text-muted-foreground",
+              children: /* @__PURE__ */ a(Y, { className: E("size-3.5 transition-transform", v && "rotate-90") })
+            }
+          )
+        ) : /* @__PURE__ */ a("span", { "data-slot": "tree-item-indicator-spacer", "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+        l ? /* @__PURE__ */ a(
+          "span",
+          {
+            "data-slot": "tree-item-icon",
+            "aria-hidden": "true",
+            className: E(
+              "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
+              N ? "text-accent-foreground" : "text-muted-foreground"
+            ),
+            children: l
+          }
+        ) : null,
+        /* @__PURE__ */ A(Q, { open: h, onOpenChange: y, children: [
+          /* @__PURE__ */ a(X, { asChild: !0, children: /* @__PURE__ */ a("span", { ref: g, className: "min-w-0 flex-1 truncate", children: r }) }),
+          /* @__PURE__ */ a(Z, { children: r })
+        ] }),
+        u ? /* @__PURE__ */ a(
+          "span",
+          {
+            "data-slot": "tree-item-trailing",
+            className: "ml-auto flex shrink-0 items-center gap-1 [&_svg]:size-3.5",
+            children: u
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function xe({ className: e, children: r, ...t }) {
+  const { expanded: o, level: l } = M("TreeItemGroup");
+  return o ? /* @__PURE__ */ a(B.Provider, { value: l + 1, children: /* @__PURE__ */ a("div", { ...t, "data-slot": "tree-item-group", role: "group", className: E("flex flex-col", e), children: /* @__PURE__ */ a(q, { children: r }) }) }) : null;
+}
+export {
+  me as Tree,
+  fe as TreeItem,
+  xe as TreeItemGroup,
+  pe as TreeItemLabel,
+  oe as treeItemLabelVariants,
+  ue as useTreeItem
+};
+//# sourceMappingURL=tree.js.map

package/dist/ui/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sources":["../../src/components/ui/tree.tsx"],"sourcesContent":["import { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\n/* -------------------------------------------------------------------------------------------------\n * Contexts\n *\n * The tree is intentionally headless about *data*: it never fetches, never owns a node array, and\n * derives every ARIA attribute from where a `TreeItem` sits in the React tree. Four contexts carry\n * that positional information down:\n *\n *   TreeContext       — per-tree state (expansion, selection, roving focus) and the key handler\n *   TreeLevelContext  — the current depth; `Tree` seeds 1, each `TreeItemGroup` increments\n *   TreeIndexContext  — `aria-posinset` / `aria-setsize`, injected by whichever container renders\n *                       the item (`Tree` for roots, `TreeItemGroup` for children)\n *   TreeItemContext   — the nearest enclosing item, read by `TreeItemLabel` / `TreeItemGroup`\n * -----------------------------------------------------------------------------------------------*/\n\ntype TreeContextValue = {\n  expandedIds: Set<string>;\n  setExpanded: (id: string, expanded: boolean) => void;\n  selectedId: string | null;\n  /**\n   * The one activation path: selection, optional expansion and `onActivate`, shared by `Enter` and\n   * by clicking a node so the two never diverge.\n   */\n  activateItem: (id: string, hasChildren: boolean, expanded: boolean) => void;\n  focusedId: string | null;\n  setFocusedId: (id: string) => void;\n  expandOnSelect: boolean;\n  guides: TreeGuides;\n  /** Attached to each `TreeItem` rather than to the tree root, so the node is its own key target. */\n  onItemKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n};\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null);\n\nfunction useTreeContext(component: string) {\n  const context = React.useContext(TreeContext);\n  if (!context) {\n    throw new Error(`\\`${component}\\` must be rendered inside a \\`Tree\\`.`);\n  }\n  return context;\n}\n\nconst TreeLevelContext = React.createContext(1);\n\ntype TreeIndexContextValue = {\n  posinset: number;\n  setsize: number;\n  /**\n   * Position of the last sibling that is itself a branch, or 0 if none are. Connectors only join a\n   * folder to its subfolders, so this is where the trunk has to stop — running it to the last child\n   * would leave it dangling past any trailing leaf rows.\n   */\n  lastBranchPos: number;\n};\n\nconst TreeIndexContext = React.createContext<TreeIndexContextValue>({\n  posinset: 1,\n  setsize: 1,\n  lastBranchPos: 0,\n});\n\ntype TreeItemContextValue = {\n  id: string;\n  labelId: string;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  disabled: boolean;\n  /**\n   * Parent levels whose trunk passes through this row. The row draws one vertical segment per\n   * entry, so a trunk survives crossing an expanded branch's descendant rows.\n   */\n  trunkLevels: readonly number[];\n  toggle: () => void;\n  select: () => void;\n};\n\nconst TreeItemContext = React.createContext<TreeItemContextValue | null>(null);\n\n/** Stable empty set, so inheriting \"no trunks\" doesn't remake the item context every render. */\nconst NO_TRUNKS: readonly number[] = [];\n\nfunction useTreeItemContext(component: string) {\n  const context = React.useContext(TreeItemContext);\n  if (!context) {\n    throw new Error(`\\`${component}\\` must be rendered inside a \\`TreeItem\\`.`);\n  }\n  return context;\n}\n\n/**\n * Reads the item's position among its siblings and whether it is currently expanded. Exposed for\n * consumers composing their own row content (badges, action buttons, counts) inside a `TreeItem`.\n */\nfunction useTreeItem() {\n  return useTreeItemContext(\"useTreeItem\");\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Sibling indexing\n *\n * `aria-setsize` / `aria-posinset` need sibling counts, which only the container knows. Rather than\n * a mount-order registry (two render passes, StrictMode-sensitive, wrong under conditional\n * rendering) each container walks its own children and wraps them in an index provider. Purely\n * positional, so it is correct on the first render and under SSR.\n *\n * Caveat: every valid element child occupies a set slot, so non-item children of a group (a \"Load\n * more\" control, for instance) would be counted. That placement question is deliberately deferred\n * to SW-2542.\n * -----------------------------------------------------------------------------------------------*/\n\nfunction useIndexedTreeChildren(children: React.ReactNode) {\n  return React.useMemo(() => {\n    const array = React.Children.toArray(children);\n    const elements = array.filter(React.isValidElement);\n    const setsize = elements.length;\n\n    // Which siblings are branches is read off `hasChildren` in the element's own props. A child\n    // wrapped in a consumer's own component reads as a leaf, which costs a connector rather than\n    // breaking anything — the alternative is a mount-order registry, and the whole point of doing\n    // this positionally is to stay correct on the first render.\n    const isBranch = (child: React.ReactElement) => (child.props as TreeItemProps)?.hasChildren === true;\n    const lastBranchPos = elements.reduce((last, child, index) => (isBranch(child) ? index + 1 : last), 0);\n\n    let posinset = 0;\n\n    return array.map((child, index) => {\n      if (!React.isValidElement(child)) return child;\n      posinset += 1;\n      return (\n        <TreeIndexContext.Provider key={child.key ?? index} value={{ posinset, setsize, lastBranchPos }}>\n          {child}\n        </TreeIndexContext.Provider>\n      );\n    });\n  }, [children]);\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Keyboard navigation\n *\n * Visible-node order is read from the DOM instead of a JS registry: collapsed groups are not\n * rendered at all, so `querySelectorAll('[role=\"treeitem\"]')` in document order *is* the visible\n * node sequence, and ancestor/descendant lookups are one `closest()` call. This keeps the traversal\n * correct for arbitrary consumer markup between the levels.\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_SELECTOR = '[role=\"treeitem\"]';\n\nfunction getVisibleItems(root: HTMLElement | null) {\n  if (!root) return [];\n  return [...root.querySelectorAll<HTMLElement>(ITEM_SELECTOR)];\n}\n\nfunction moveFocus(element: HTMLElement | null | undefined, setFocusedId: (id: string) => void) {\n  const id = element?.dataset.treeItemId;\n  if (!element || !id) return;\n  setFocusedId(id);\n  element.focus();\n}\n\ntype TreeKeyEvent = {\n  event: React.KeyboardEvent<HTMLElement>;\n  root: HTMLElement;\n  /** The `role=\"treeitem\"` element the key was pressed on. */\n  current: HTMLElement;\n  id: string;\n  hasChildren: boolean;\n  expanded: boolean;\n  disabled: boolean;\n  setExpanded: (id: string, expanded: boolean) => void;\n  setFocusedId: (id: string) => void;\n  activate: (id: string, hasChildren: boolean, expanded: boolean) => void;\n};\n\n/** Moves focus to `element`, if there is one, and claims the key press. */\nfunction navigateTo({ event, setFocusedId }: TreeKeyEvent, element: HTMLElement | null | undefined) {\n  event.preventDefault();\n  moveFocus(element, setFocusedId);\n}\n\nfunction stepBy(context: TreeKeyEvent, offset: number) {\n  const items = getVisibleItems(context.root);\n  navigateTo(context, items[items.indexOf(context.current) + offset]);\n}\n\n/**\n * `Space` is deliberately unbound: the WAI-ARIA pattern reserves it for multi-select trees, which\n * are out of scope here but should not be precluded.\n */\nconst TREE_KEY_HANDLERS: Record<string, (context: TreeKeyEvent) => void> = {\n  ArrowDown: (context) => stepBy(context, 1),\n  ArrowUp: (context) => stepBy(context, -1),\n  ArrowRight: (context) => {\n    const { event, current, id, hasChildren, expanded, setExpanded } = context;\n    if (hasChildren && !expanded) {\n      event.preventDefault();\n      setExpanded(id, true);\n      return;\n    }\n    if (expanded) navigateTo(context, current.querySelector<HTMLElement>(ITEM_SELECTOR));\n  },\n  ArrowLeft: (context) => {\n    const { event, current, id, expanded, setExpanded } = context;\n    if (expanded) {\n      event.preventDefault();\n      setExpanded(id, false);\n      return;\n    }\n    navigateTo(context, current.parentElement?.closest<HTMLElement>(ITEM_SELECTOR));\n  },\n  Home: (context) => navigateTo(context, getVisibleItems(context.root)[0]),\n  End: (context) => {\n    const items = getVisibleItems(context.root);\n    navigateTo(context, items[items.length - 1]);\n  },\n  Enter: (context) => {\n    if (context.disabled) return;\n    context.event.preventDefault();\n    context.activate(context.id, context.hasChildren, context.expanded);\n  },\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Tree\n * -----------------------------------------------------------------------------------------------*/\n\ntype TreeGuides = \"none\" | \"hover\" | \"always\";\n\ntype TreeProps = Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  /** Expanded node ids (controlled). */\n  expandedIds?: Set<string>;\n  /** Initially expanded node ids (uncontrolled). */\n  defaultExpandedIds?: Set<string>;\n  onExpandedChange?: (expandedIds: Set<string>) => void;\n  /** Selected node id (controlled). Pass `null` for \"nothing selected\". */\n  selectedId?: string | null;\n  /** Initially selected node id (uncontrolled). */\n  defaultSelectedId?: string | null;\n  onSelectedChange?: (selectedId: string) => void;\n  /** Fired by `Enter` and by clicking a label — the node's default action. */\n  onActivate?: (id: string) => void;\n  /** Whether selecting a parent node also toggles its expansion. */\n  expandOnSelect?: boolean;\n  /**\n   * Vertical indent guides joining each level to its parent. `\"hover\"` reveals them while the\n   * pointer is anywhere over the tree, which keeps a dense tree quiet at rest but still lets you\n   * trace a deep branch; `\"always\"` pins them on; `\"none\"` turns them off.\n   */\n  guides?: TreeGuides;\n};\n\nfunction Tree({\n  className,\n  children,\n  expandedIds: expandedIdsProp,\n  defaultExpandedIds,\n  onExpandedChange,\n  selectedId: selectedIdProp,\n  defaultSelectedId = null,\n  onSelectedChange,\n  onActivate,\n  expandOnSelect = true,\n  guides = \"hover\",\n  ...props\n}: TreeProps) {\n  const treeRef = React.useRef<HTMLDivElement>(null);\n\n  const [expandedIds, setExpandedIds] = useControllableState<Set<string>>({\n    prop: expandedIdsProp,\n    defaultProp: defaultExpandedIds ?? new Set<string>(),\n    onChange: onExpandedChange,\n  });\n  const [selectedId, setSelectedId] = useControllableState<string | null>({\n    prop: selectedIdProp,\n    defaultProp: defaultSelectedId,\n    onChange: (id) => {\n      if (id != null) onSelectedChange?.(id);\n    },\n  });\n  const [focusedId, setFocusedId] = React.useState<string | null>(null);\n\n  const setExpanded = React.useCallback(\n    (id: string, expanded: boolean) => {\n      setExpandedIds((current) => {\n        const next = new Set(current);\n        if (expanded) next.add(id);\n        else next.delete(id);\n        return next;\n      });\n    },\n    [setExpandedIds],\n  );\n\n  const activateItem = React.useCallback(\n    (activatedId: string, hasChildren: boolean, expanded: boolean) => {\n      setSelectedId(activatedId);\n      if (expandOnSelect && hasChildren) setExpanded(activatedId, !expanded);\n      onActivate?.(activatedId);\n    },\n    [setSelectedId, expandOnSelect, setExpanded, onActivate],\n  );\n\n  const handleItemKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      const root = treeRef.current;\n      const current = (event.target as HTMLElement | null)?.closest<HTMLElement>(ITEM_SELECTOR);\n      const id = current?.dataset.treeItemId;\n      if (!root || !current || !id || !root.contains(current)) return;\n\n      const handler = TREE_KEY_HANDLERS[event.key];\n      if (!handler) return;\n\n      handler({\n        event,\n        root,\n        current,\n        id,\n        hasChildren: current.dataset.treeHasChildren === \"true\",\n        expanded: current.getAttribute(\"aria-expanded\") === \"true\",\n        disabled: current.getAttribute(\"aria-disabled\") === \"true\",\n        setExpanded,\n        setFocusedId,\n        activate: activateItem,\n      });\n    },\n    [setExpanded, activateItem],\n  );\n\n  const context = React.useMemo<TreeContextValue>(\n    () => ({\n      expandedIds: expandedIds ?? new Set<string>(),\n      setExpanded,\n      selectedId: selectedId ?? null,\n      activateItem,\n      focusedId,\n      setFocusedId,\n      expandOnSelect,\n      guides,\n      onItemKeyDown: handleItemKeyDown,\n    }),\n    [expandedIds, setExpanded, selectedId, activateItem, focusedId, expandOnSelect, guides, handleItemKeyDown],\n  );\n\n  return (\n    <TreeContext.Provider value={context}>\n      <TreeLevelContext.Provider value={1}>\n        <div\n          ref={treeRef}\n          data-slot=\"tree\"\n          data-guides={guides}\n          role=\"tree\"\n          tabIndex={-1}\n          // `group/tree` is what the `\"hover\"` guide mode hangs off: hovering anywhere in the tree\n          // reveals every guide at once, so you can trace a branch without hunting row by row.\n          //\n          // `--tree-indent` is 1.25rem so that a child's chevron lands exactly on its parent's\n          // icon: the icon sits 1.5rem into the content box (chevron 0.875 + gap 0.375 + the\n          // 0.25rem lead-in), and the chevron sits at the lead-in, so one step must be\n          // 1.5rem - 0.25rem. Indentation, the guide offsets and the elbow reach are all derived\n          // from this one value — override it and the connectors follow.\n          //\n          // `--tree-guide-color` is deliberately *opaque*, via `color-mix`, even though it is meant\n          // to look like a 40% tint. Guide segments necessarily overlap — each row's line overshoots\n          // into the row above so the two meet across the label's border, and an elbow shares its\n          // column with the trunk it branches from. With a semi-transparent colour every overlap\n          // composites twice and shows up as a darker stretch of line. Mixing to an opaque value up\n          // front makes overlapping draws idempotent, so the tree reads as one uniform hairline.\n          className={cn(\n            \"group/tree text-foreground flex w-full flex-col text-sm\",\n            \"[--tree-indent:1.25rem] [--tree-guide-color:color-mix(in_oklch,var(--muted-foreground)_40%,var(--background))]\",\n            className,\n          )}\n          {...props}\n        >\n          {/*\n            Radix requires a `Tooltip.Provider` above any `Tooltip`, and the labels mount one each\n            to reveal truncated text. Providing it here rather than asking consumers to wrap their\n            app keeps `Tree` self-contained; nesting inside a consumer's own provider is supported,\n            and the longer delay is deliberate — instant tooltips while sweeping the pointer down a\n            dense tree are noise.\n          */}\n          <TooltipProvider delayDuration={500}>\n            <TreeItemsContainer>{children}</TreeItemsContainer>\n          </TooltipProvider>\n        </div>\n      </TreeLevelContext.Provider>\n    </TreeContext.Provider>\n  );\n}\n\nfunction TreeItemsContainer({ children }: { children: React.ReactNode }) {\n  return useIndexedTreeChildren(children);\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TreeItem\n * -----------------------------------------------------------------------------------------------*/\n\ntype TreeItemProps = React.ComponentProps<\"div\"> & {\n  id: string;\n  /**\n   * Whether the node can be expanded. Kept explicit rather than inferred from rendered children so\n   * a node whose children have not been fetched yet still reports `aria-expanded=\"false\"`.\n   */\n  hasChildren?: boolean;\n  disabled?: boolean;\n};\n\nfunction TreeItem({\n  className,\n  children,\n  id,\n  hasChildren = false,\n  disabled = false,\n  onClick,\n  onFocus,\n  onKeyDown,\n  style,\n  ...props\n}: TreeItemProps) {\n  const { expandedIds, setExpanded, selectedId, activateItem, focusedId, setFocusedId, onItemKeyDown } =\n    useTreeContext(\"TreeItem\");\n  const level = React.useContext(TreeLevelContext);\n  const { posinset, setsize, lastBranchPos } = React.useContext(TreeIndexContext);\n  const labelId = `${React.useId()}-label`;\n\n  const expanded = hasChildren && expandedIds.has(id);\n  const selected = selectedId === id;\n\n  const toggle = React.useCallback(() => {\n    if (hasChildren) setExpanded(id, !expanded);\n  }, [hasChildren, setExpanded, id, expanded]);\n\n  // Routed through the tree's `activateItem` so a click and `Enter` are the same code path —\n  // notably, both fire `onActivate`.\n  const select = React.useCallback(() => {\n    if (disabled) return;\n    setFocusedId(id);\n    activateItem(id, hasChildren, expanded);\n  }, [disabled, setFocusedId, id, activateItem, hasChildren, expanded]);\n\n  // Roving tabindex, minimal form: the focused node is the single tab stop, falling back to the\n  // first root node before the tree has been entered. SW-2541 extends this (selection-aware entry\n  // point, focus retention across collapse and lazy load).\n  const tabbable = focusedId ? focusedId === id : level === 1 && posinset === 1;\n\n  // Guides are drawn on the row (see `TreeItemLabel`), so a row has to know every ancestor trunk\n  // crossing it, not just its own parent's. The set is threaded down the tree: inherit the parent's\n  // and add this row's own parent level when a later sibling folder needs the line to continue past\n  // this entire subtree.\n  const parentItem = React.useContext(TreeItemContext);\n  const inheritedTrunkLevels = parentItem?.trunkLevels ?? NO_TRUNKS;\n  const trunkLevels = React.useMemo(\n    () => (level > 1 && posinset < lastBranchPos ? [...inheritedTrunkLevels, level - 1] : inheritedTrunkLevels),\n    [inheritedTrunkLevels, level, posinset, lastBranchPos],\n  );\n\n  const itemContext = React.useMemo<TreeItemContextValue>(\n    () => ({\n      id,\n      labelId,\n      level,\n      expanded,\n      hasChildren,\n      selected,\n      disabled,\n      trunkLevels,\n      toggle,\n      select,\n    }),\n    [id, labelId, level, expanded, hasChildren, selected, disabled, trunkLevels, toggle, select],\n  );\n\n  return (\n    <TreeItemContext.Provider value={itemContext}>\n      <div\n        // Spread first, for the same reason as `TreeItemLabel`: every ARIA attribute below is\n        // maintained by the tree and must not be overridable from props.\n        {...props}\n        data-slot=\"tree-item\"\n        data-tree-item-id={id}\n        data-tree-has-children={hasChildren}\n        data-state={expanded ? \"expanded\" : \"collapsed\"}\n        role=\"treeitem\"\n        // The accessible name comes from the label alone. Without this, name-from-content would\n        // sweep in every descendant node's text once a branch is expanded.\n        aria-labelledby={labelId}\n        aria-expanded={hasChildren ? expanded : undefined}\n        aria-level={level}\n        aria-posinset={posinset}\n        aria-setsize={setsize}\n        aria-selected={selected}\n        aria-disabled={disabled || undefined}\n        tabIndex={tabbable ? 0 : -1}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.defaultPrevented) return;\n          onItemKeyDown(event);\n        }}\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          // Clicks on a descendant node are that node's business — every treeitem in the ancestor\n          // chain sees the bubbled event.\n          if ((event.target as HTMLElement).closest(ITEM_SELECTOR) !== event.currentTarget) return;\n          select();\n        }}\n        onFocus={(event) => {\n          onFocus?.(event);\n          if (event.target === event.currentTarget) setFocusedId(id);\n        }}\n        style={\n          {\n            // Inherited by the label, which draws the elbow from the same two values.\n            \"--tree-guide-left\": `calc(var(--tree-indent) * ${level - 2} + 0.6875rem)`,\n            // Stops 0.25rem short of the row's chevron rather than touching it, so the connector\n            // reads as pointing at the row instead of welded to the glyph.\n            \"--tree-elbow-run\": \"calc(var(--tree-indent) - 0.6875rem)\",\n            // Shared by the elbow's corner and by where the same-column trunk picks up, so the two\n            // meet exactly instead of overlapping or leaving a gap.\n            \"--tree-elbow-radius\": \"0.5rem\",\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"relative outline-none\",\n          // Direct-child selectors, deliberately not `group-*/tree-item`: tree items nest, and a\n          // group variant matches *any* ancestor, so a focused or selected parent painted its focus\n          // ring onto every descendant row. Backgrounds live on the label for the same reason —\n          // anything painted here would spread behind the whole subtree.\n          \"focus-visible:[&>[data-slot=tree-item-label]]:border-ring focus-visible:[&>[data-slot=tree-item-label]]:shadow-focus\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </TreeItemContext.Provider>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TreeItemLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst treeItemLabelVariants = cva(\n  \"flex w-full min-w-0 cursor-default items-center gap-1.5 rounded-md pr-2 text-left transition-colors select-none\",\n  {\n    variants: {\n      size: {\n        sm: \"h-6 text-xs\",\n        default: \"h-7 text-sm\",\n        lg: \"h-9 text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\ntype TreeItemLabelProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof treeItemLabelVariants> & {\n    /**\n     * Decorative leading icon, rendered between the chevron and the label text. Hidden from\n     * assistive tech — the node's accessible name comes from the label text alone, so anything a\n     * screen reader must convey belongs in the text, not here. Swap it on expansion (open/closed\n     * folders) by reading `expanded` from `useTreeItem()` inside your own icon component.\n     */\n    icon?: React.ReactNode;\n    /**\n     * Right-aligned slot for per-node adornments — a count `Badge`, a `Spinner`, a status dot. It\n     * sits inside the label, so its text joins the node's accessible name: a count reads as\n     * \"Onboarding 3\", which is usually what you want. Wrap it in `aria-hidden` yourself for purely\n     * decorative content such as a spinner.\n     */\n    trailing?: React.ReactNode;\n  };\n\nfunction TreeItemLabel({ className, children, size, style, icon, trailing, ...props }: TreeItemLabelProps) {\n  const { labelId, level, expanded, hasChildren, selected, disabled, trunkLevels, toggle } =\n    useTreeItemContext(\"TreeItemLabel\");\n  const { guides } = useTreeContext(\"TreeItemLabel\");\n\n  // The elbow lives on the row because the label element *is* the row, so it can be sized in\n  // halves of it — the curve has to land on the row's vertical centre. A connector joins a folder\n  // to its subfolders, so only a branch row gets one.\n  const showElbow = guides !== \"none\" && level > 1 && hasChildren;\n  const showGuides = guides !== \"none\" && (showElbow || trunkLevels.length > 0);\n\n  const textRef = React.useRef<HTMLSpanElement>(null);\n  const [tooltipOpen, setTooltipOpen] = React.useState(false);\n\n  // Truncation is measured when the tooltip would open, not tracked continuously: a\n  // `ResizeObserver` per row would cost every row in a large tree for a hint almost none of them\n  // need, and this answers the same question at the only moment it matters.\n  const handleTooltipOpenChange = (next: boolean) => {\n    const text = textRef.current;\n    setTooltipOpen(next && !!text && text.scrollWidth > text.clientWidth);\n  };\n\n  return (\n    <div\n      // Spread first: the derived ARIA wiring below is authoritative. A consumer-supplied `id` would\n      // otherwise break the `TreeItem` → `aria-labelledby` link that names the node.\n      {...props}\n      id={labelId}\n      data-slot=\"tree-item-label\"\n      // The row is a passive label, not a control: the parent `role=\"treeitem\"` owns focus, click\n      // handling, keyboard handling and the accessible name, so a nested control would fight it.\n      // `--tree-guide-left` / `--tree-elbow-run` are inherited from the `TreeItem`.\n      style={{ paddingInlineStart: `calc(var(--tree-indent) * ${level - 1} + 0.25rem)`, ...style }}\n      className={cn(\n        treeItemLabelVariants({ size }),\n        \"relative border border-transparent\",\n        // Only selection paints a background — an open folder is already marked by its rotated\n        // chevron, open-folder icon and the connectors running down from it.\n        selected ? \"bg-accent text-accent-foreground font-medium\" : \"hover:bg-muted\",\n        // From this node's own state, not an ancestor selector: `aria-disabled` is per-node, so a\n        // disabled folder must not dim the contents underneath it.\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {showGuides ? (\n        // One absolutely-positioned layer owns every guide on this row, fixing two bugs at once.\n        //\n        // Paint order: the trunk used to be drawn by the `TreeItem`, an *ancestor* of every\n        // descendant row. Those rows are positioned and paint an opaque hover/selected background\n        // over anything an ancestor drew, so the trunk vanished behind whichever row you pointed\n        // at. Drawn here it belongs to the row's own box, so it paints above that row's background\n        // — and no sibling row can cover it, because every row draws its own segments.\n        //\n        // One coordinate system: `left` resolves against the nearest positioned ancestor's\n        // *padding* box. The label carries `border border-transparent` for its focus ring while the\n        // `TreeItem` carries none, so one `--tree-guide-left` landed 1px apart on the two elements\n        // and the elbow/trunk overlap read as a 2px line. Both now share this container.\n        <span\n          data-slot=\"tree-item-guides\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none absolute inset-0\",\n            // The fade lives on the container, not on each line. Opacity on the parent renders the\n            // whole layer into one buffer and composites it once, so a seam between two segments\n            // can never double-expose mid-transition.\n            guides === \"hover\" &&\n              \"opacity-0 transition-opacity group-hover/tree:opacity-100 motion-reduce:transition-none\",\n          )}\n        >\n          {trunkLevels.map((trunkLevel) => (\n            <span\n              key={trunkLevel}\n              data-slot=\"tree-item-guide-trunk\"\n              style={{ left: `calc(var(--tree-indent) * ${trunkLevel - 1} + 0.6875rem)` }}\n              // Overshoots upward by half a chevron to cross the label's border into the row above,\n              // so consecutive rows tile into one unbroken line.\n              className=\"absolute top-[-0.4375rem] bottom-0 w-0 border-l border-[var(--tree-guide-color)]\"\n            />\n          ))}\n          {showElbow ? (\n            // Down the guide line, then a rounded turn right, stopping just short of this row's\n            // chevron. Starts half a chevron above the row so the line emerges from under the\n            // parent's chevron instead of leaving a half-row gap.\n            <span\n              data-slot=\"tree-item-guide-elbow\"\n              className={cn(\n                \"absolute top-[-0.4375rem] left-[var(--tree-guide-left)] border-[var(--tree-guide-color)]\",\n                \"h-[calc(50%+0.4375rem)] w-[var(--tree-elbow-run)] border-b border-l\",\n                \"rounded-bl-[var(--tree-elbow-radius)]\",\n              )}\n            />\n          ) : null}\n        </span>\n      ) : null}\n      {hasChildren ? (\n        // A pointer-only affordance, deliberately not a `<button>`: expansion is reachable from the\n        // keyboard through the parent treeitem's arrow keys, so this stays non-focusable. A focusable\n        // element hidden from assistive tech is a contradiction, and inside a single-tab-stop widget\n        // it would also be a second focus stop reachable by pointer.\n        <span\n          data-slot=\"tree-item-indicator\"\n          aria-hidden=\"true\"\n          onClick={(event) => {\n            // Toggle from the chevron alone, without changing the selection.\n            event.stopPropagation();\n            toggle();\n          }}\n          className=\"flex size-3.5 shrink-0 items-center justify-center text-muted-foreground\"\n        >\n          <ChevronRightIcon className={cn(\"size-3.5 transition-transform\", expanded && \"rotate-90\")} />\n        </span>\n      ) : (\n        <span data-slot=\"tree-item-indicator-spacer\" aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n      )}\n      {icon ? (\n        <span\n          data-slot=\"tree-item-icon\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0\",\n            selected ? \"text-accent-foreground\" : \"text-muted-foreground\",\n          )}\n        >\n          {icon}\n        </span>\n      ) : null}\n      <Tooltip open={tooltipOpen} onOpenChange={handleTooltipOpenChange}>\n        <TooltipTrigger asChild>\n          <span ref={textRef} className=\"min-w-0 flex-1 truncate\">\n            {children}\n          </span>\n        </TooltipTrigger>\n        {/*\n          A purely visual repair for clipped text. The trigger is a plain `span`, so it never takes\n          focus and this only ever opens on hover — and the node's accessible name already carries\n          the label in full, so a screen reader is not relying on it.\n        */}\n        <TooltipContent>{children}</TooltipContent>\n      </Tooltip>\n      {trailing ? (\n        <span\n          data-slot=\"tree-item-trailing\"\n          className=\"ml-auto flex shrink-0 items-center gap-1 [&_svg]:size-3.5\"\n        >\n          {trailing}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TreeItemGroup\n * -----------------------------------------------------------------------------------------------*/\n\nfunction TreeItemGroup({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { expanded, level } = useTreeItemContext(\"TreeItemGroup\");\n\n  // Not rendered while collapsed: keeps collapsed subtrees out of the accessibility tree entirely,\n  // and makes DOM order equal visible order for keyboard traversal.\n  if (!expanded) return null;\n\n  return (\n    <TreeLevelContext.Provider value={level + 1}>\n      <div {...props} data-slot=\"tree-item-group\" role=\"group\" className={cn(\"flex flex-col\", className)}>\n        <TreeItemsContainer>{children}</TreeItemsContainer>\n      </div>\n    </TreeLevelContext.Provider>\n  );\n}\n\nexport {\n  Tree,\n  TreeItem,\n  TreeItemGroup,\n  TreeItemLabel,\n  treeItemLabelVariants,\n  useTreeItem,\n  type TreeGuides,\n  type TreeItemLabelProps,\n  type TreeItemProps,\n  type TreeProps,\n};\n"],"names":["TreeContext","React","useTreeContext","component","context","TreeLevelContext","TreeIndexContext","TreeItemContext","NO_TRUNKS","useTreeItemContext","useTreeItem","useIndexedTreeChildren","children","array","elements","setsize","isBranch","child","lastBranchPos","last","index","posinset","jsx","ITEM_SELECTOR","getVisibleItems","root","moveFocus","element","setFocusedId","id","navigateTo","event","stepBy","offset","items","TREE_KEY_HANDLERS","current","hasChildren","expanded","setExpanded","Tree","className","expandedIdsProp","defaultExpandedIds","onExpandedChange","selectedIdProp","defaultSelectedId","onSelectedChange","onActivate","expandOnSelect","guides","props","treeRef","expandedIds","setExpandedIds","useControllableState","selectedId","setSelectedId","focusedId","next","activateItem","activatedId","handleItemKeyDown","handler","cn","TooltipProvider","TreeItemsContainer","TreeItem","disabled","onClick","onFocus","onKeyDown","style","onItemKeyDown","level","labelId","selected","toggle","select","tabbable","inheritedTrunkLevels","trunkLevels","itemContext","treeItemLabelVariants","cva","TreeItemLabel","size","icon","trailing","showElbow","showGuides","textRef","tooltipOpen","setTooltipOpen","handleTooltipOpenChange","text","jsxs","trunkLevel","ChevronRightIcon","Tooltip","TooltipTrigger","TooltipContent","TreeItemGroup"],"mappings":"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"}