@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tree-view.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Spinner } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\n\n/**\n * A hierarchy you walk with the keyboard: kastlan's chart of accounts (Assets › Current\n * assets › Bank › 1020 Operating account), and — through {@link TreeRow} alone — the\n * row labels of its gantt, which indent and fold like a tree but sit beside a timeline\n * and so cannot be one.\n *\n * Both apps had written it as nested `<div>`s with a chevron button per row: every\n * row a Tab stop (a 300-account chart was 300 presses to get past), no way to say\n * \"level 3 of 5, collapsed\" to a screen reader, and no ←/→ at all. This is the WAI-ARIA\n * tree pattern instead:\n *\n *  - `role=\"tree\"` › `treeitem` (with `aria-level`, `aria-expanded` on a parent,\n *    `aria-selected` when selectable) › `role=\"group\"` for its children — so the\n *    reader announces the position and the state it needs.\n *  - ONE Tab stop (roving tabindex). ↑/↓ walk the visible rows, → opens a closed\n *    parent and then steps into it, ← closes an open one and then steps out to the\n *    parent, Home/End jump to the ends, `*` opens every sibling, and typing a few\n *    letters jumps to the next row that starts with them. ←/→ follow the reading\n *    direction (`horizontalStep`): in an RTL tree the children hang off to the left,\n *    and ← is what opens them.\n *  - Enter / Space, or a click, select. The chevron alone toggles on click.\n *\n * `expanded` and `selected` each work controlled or uncontrolled.\n */\n\n/* ── Nodes ───────────────────────────────────────────────────────────────── */\n\nexport interface TreeNode<T = unknown> {\n  /** Unique across the whole tree — it is what `expanded` and `selected` hold. */\n  id: string;\n  label: ReactNode;\n  /** The text type-ahead matches. Defaults to the row's rendered text. */\n  textValue?: string;\n  /** Before the label: an account-type icon, a colour dot. */\n  icon?: ReactNode;\n  /** After the label, pushed to the end of the row: a balance, a count, an action. */\n  trailing?: ReactNode;\n  children?: readonly TreeNode<T>[];\n  /**\n   * The node has children that are not loaded yet — it gets a chevron, and opening it\n   * calls `loadChildren`. Pass the children in `items` once they arrive.\n   */\n  hasChildren?: boolean;\n  /** Focusable and announced as unavailable (`aria-disabled`), but not selectable. */\n  disabled?: boolean;\n  /** Anything of the host's own, handed back to `renderItem` and `onSelectedChange`. */\n  data?: T;\n}\n\n/** What {@link TreeViewProps.renderItem} is told about a row. */\nexport interface TreeItemState {\n  level: number;\n  expanded: boolean;\n  selected: boolean;\n  /** It has children, loaded or not — it shows a chevron. */\n  expandable: boolean;\n  loading: boolean;\n  disabled: boolean;\n}\n\n/* ── TreeRow ─────────────────────────────────────────────────────────────── */\n\nexport interface TreeRowProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** 1 for a top-level row. Sets the indent and the number of guides. */\n  level: number;\n  /** `true`/`false` for a row that can fold; leave it `undefined` for a leaf, which\n   *  gets a chevron-sized gap instead so labels at one level still line up. */\n  expanded?: boolean;\n  /**\n   * Make the chevron a real button (with `aria-expanded`, named by the label) that\n   * calls this. For a row used ON ITS OWN — kastlan's gantt labels, where each row is\n   * a line of a timeline and not an item of a tree widget. Inside {@link TreeView} it\n   * is omitted: the tree owns the keys, and a button per row would be a Tab stop per\n   * row, which is what the tree exists to remove.\n   */\n  onToggle?: () => void;\n  /** The toggle button's name. By default it is named by the row's label (the state\n   *  is `aria-expanded`'s to say); required when `children` replaces the label. */\n  toggleLabel?: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  trailing?: ReactNode;\n  /** Pixels per level. Default 16. */\n  indent?: number;\n  /** Draw a vertical hairline per ancestor level. Default `true`. */\n  guides?: boolean;\n  selected?: boolean;\n  /** A spinner in place of the chevron, while lazy children load. */\n  loading?: boolean;\n  /** Replace the label + trailing part of the row (the indent and chevron stay). */\n  children?: ReactNode;\n}\n\nconst DEFAULT_INDENT = 16;\n/** The chevron's box; the guide for a level runs through its centre. */\nconst CHEVRON = 16;\n/** The row's start padding, before any indent. */\nconst ROW_PAD = 4;\n\n/**\n * One row: indent, guides, chevron, icon, label, trailing — no tree semantics of its\n * own. {@link TreeView} is built from it, and a host that needs the look without the\n * widget (a gantt's label column) uses it directly.\n *\n * Laid out with logical properties throughout (`padding-inline-start`,\n * `inset-inline-start`), so the indent, the guides and the chevron all hang from the\n * reading start in an RTL layout without a second code path.\n */\nexport function TreeRow({\n  level,\n  expanded,\n  onToggle,\n  toggleLabel,\n  label,\n  icon,\n  trailing,\n  indent = DEFAULT_INDENT,\n  guides = true,\n  selected,\n  loading,\n  children,\n  className,\n  style,\n  ...rest\n}: TreeRowProps) {\n  const labelId = useId();\n  const depth = Math.max(0, level - 1);\n  const expandable = expanded !== undefined;\n  // A right-pointing chevron that turns DOWN when open. In RTL it is mirrored to point\n  // left, and turning that one clockwise would point it UP — so it turns the other way.\n  const chevron = (\n    <ChevronRight\n      aria-hidden\n      className={cn(\n        \"size-4 transition-transform motion-reduce:transition-none rtl:-scale-x-100\",\n        expanded && \"rotate-90 rtl:-rotate-90\",\n      )}\n    />\n  );\n  return (\n    <div\n      {...rest}\n      data-tree-row=\"\"\n      data-selected={selected || undefined}\n      style={{ paddingInlineStart: ROW_PAD + depth * indent, ...style }}\n      className={cn(\n        \"relative flex min-h-8 items-center gap-1.5 rounded pe-2 text-sm\",\n        selected\n          ? \"bg-[var(--bg-active)] font-medium text-[var(--text-primary)]\"\n          : \"text-[var(--text-secondary)]\",\n        className,\n      )}\n    >\n      {guides &&\n        Array.from({ length: depth }, (_, i) => (\n          <span\n            key={i}\n            aria-hidden\n            data-tree-guide=\"\"\n            className=\"pointer-events-none absolute inset-y-0 w-px bg-[var(--border)]\"\n            style={{ insetInlineStart: ROW_PAD + i * indent + CHEVRON / 2 }}\n          />\n        ))}\n      {loading ? (\n        <span className=\"flex size-4 shrink-0 items-center justify-center\">\n          <Spinner label={null} className=\"size-3 border\" />\n        </span>\n      ) : expandable && onToggle ? (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-label={toggleLabel}\n          aria-labelledby={toggleLabel ? undefined : labelId}\n          onClick={(e) => {\n            e.stopPropagation();\n            onToggle();\n          }}\n          className={cn(\"flex size-4 shrink-0 items-center justify-center rounded text-[var(--text-muted)] outline-none hover:text-[var(--text-primary)]\", FOCUS_RING)}\n        >\n          {chevron}\n        </button>\n      ) : expandable ? (\n        <span data-tree-toggle=\"\" className=\"flex size-4 shrink-0 cursor-pointer items-center justify-center text-[var(--text-muted)]\">\n          {chevron}\n        </span>\n      ) : (\n        <span aria-hidden className=\"size-4 shrink-0\" />\n      )}\n      {children ?? (\n        <>\n          {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n          <span id={labelId} data-tree-label=\"\" className=\"min-w-0 flex-1 truncate\">\n            {label}\n          </span>\n          {trailing !== undefined && trailing !== null && (\n            <span className=\"ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-[var(--text-muted)]\">\n              {trailing}\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n/* ── TreeView ────────────────────────────────────────────────────────────── */\n\nexport interface TreeViewProps<T = unknown>\n  extends Omit<ComponentPropsWithoutRef<\"ul\">, \"onSelect\" | \"children\" | \"defaultValue\"> {\n  items: readonly TreeNode<T>[];\n  /** Open nodes, controlled. */\n  expanded?: readonly string[];\n  /** Open nodes on first render, uncontrolled. */\n  defaultExpanded?: readonly string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  /** The selected node's id, controlled; `null` for none. */\n  selected?: string | null;\n  defaultSelected?: string | null;\n  onSelectedChange?: (id: string, node: TreeNode<T>) => void;\n  /** `\"none\"` makes it a navigation-only tree: no `aria-selected`, Enter toggles. */\n  selectionMode?: \"single\" | \"none\";\n  /** The whole row content after the chevron, per node. Wins over `label`/`trailing`. */\n  renderItem?: (node: TreeNode<T>, state: TreeItemState) => ReactNode;\n  /**\n   * Called when a node with `hasChildren` and no `children` is opened. While the\n   * promise is pending the row shows a spinner and is `aria-busy`; put the children\n   * into `items` before it resolves (or after — the row opens either way).\n   */\n  loadChildren?: (node: TreeNode<T>) => Promise<void> | void;\n  /** Pixels per level. Default 16. */\n  indent?: number;\n  /** Vertical hairlines per level. Default `true`. */\n  indentGuides?: boolean;\n  /** Extra classes for each row (the `TreeRow`), e.g. a denser height. */\n  rowClassName?: string;\n}\n\ninterface FlatNode<T> {\n  node: TreeNode<T>;\n  level: number;\n  parentId: string | null;\n}\n\nconst isExpandable = (n: TreeNode<unknown>) => Boolean(n.children?.length || n.hasChildren);\n\n/** Controlled when `value` is given, otherwise state seeded from `initial`. */\nfunction useControllable<V>(value: V | undefined, initial: V): [V, (next: V) => void] {\n  const [own, setOwn] = useState<V>(initial);\n  const controlled = value !== undefined;\n  const set = (next: V) => {\n    if (!controlled) setOwn(next);\n  };\n  return [controlled ? value : own, set];\n}\n\n/** How long a type-ahead run stays open between keys — the APG's suggested half second. */\nconst TYPEAHEAD_MS = 500;\n\nexport function TreeView<T = unknown>({\n  items,\n  expanded: expandedProp,\n  defaultExpanded,\n  onExpandedChange,\n  selected: selectedProp,\n  defaultSelected,\n  onSelectedChange,\n  selectionMode = \"single\",\n  renderItem,\n  loadChildren,\n  indent = DEFAULT_INDENT,\n  indentGuides = true,\n  rowClassName,\n  className,\n  onKeyDown,\n  onClick,\n  ...rest\n}: TreeViewProps<T>) {\n  const [expandedList, setExpandedOwn] = useControllable<readonly string[]>(\n    expandedProp,\n    defaultExpanded ?? [],\n  );\n  const [selected, setSelectedOwn] = useControllable<string | null>(\n    selectedProp,\n    defaultSelected ?? null,\n  );\n  const expandedSet = useMemo(() => new Set(expandedList), [expandedList]);\n  const [loading, setLoading] = useState<ReadonlySet<string>>(() => new Set());\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  const itemRefs = useRef(new Map<string, HTMLLIElement>());\n  const pendingFocus = useRef<string | null>(null);\n  const typeahead = useRef({ text: \"\", at: 0 });\n  const baseId = useId();\n\n  // Every node by id (for parents and lookups), and the rows currently on screen in\n  // order — the list the arrow keys walk.\n  const { byId, visible } = useMemo(() => {\n    const map = new Map<string, FlatNode<T>>();\n    const rows: FlatNode<T>[] = [];\n    const walk = (nodes: readonly TreeNode<T>[], level: number, parentId: string | null, shown: boolean) => {\n      for (const node of nodes) {\n        const flat = { node, level, parentId };\n        map.set(node.id, flat);\n        if (shown) rows.push(flat);\n        if (node.children) walk(node.children, level + 1, node.id, shown && expandedSet.has(node.id));\n      }\n    };\n    walk(items, 1, null, true);\n    return { byId: map, visible: rows };\n  }, [items, expandedSet]);\n\n  // The one tabbable row. Focus that was inside a branch that has since closed (a\n  // click on its parent's chevron) moves up to the nearest ancestor still on screen,\n  // so the tab stop never points at a row that is not rendered.\n  const visibleIds = useMemo(() => new Set(visible.map((f) => f.node.id)), [visible]);\n  const nearestVisible = (id: string | null): string | null => {\n    let cur = id;\n    while (cur && !visibleIds.has(cur)) cur = byId.get(cur)?.parentId ?? null;\n    return cur;\n  };\n  const tabbable =\n    nearestVisible(focusedId) ?? nearestVisible(selected) ?? visible[0]?.node.id ?? null;\n\n  useEffect(() => {\n    const id = pendingFocus.current;\n    if (!id) return;\n    pendingFocus.current = null;\n    itemRefs.current.get(id)?.focus();\n  });\n\n  const focusRow = (id: string) => {\n    setFocusedId(id);\n    // After the commit: moving into a branch that just opened targets a row that is\n    // not in the DOM yet.\n    pendingFocus.current = id;\n    itemRefs.current.get(id)?.focus();\n  };\n\n  const setExpanded = (next: Set<string>) => {\n    const list = [...next];\n    setExpandedOwn(list);\n    onExpandedChange?.(list);\n  };\n\n  const open = (node: TreeNode<T>) => {\n    if (expandedSet.has(node.id) || !isExpandable(node)) return;\n    const next = new Set(expandedSet);\n    next.add(node.id);\n    setExpanded(next);\n    if (loadChildren && node.hasChildren && !node.children?.length) {\n      const pending = loadChildren(node);\n      if (pending && typeof pending.then === \"function\") {\n        setLoading((s) => new Set(s).add(node.id));\n        const done = () =>\n          setLoading((s) => {\n            const n = new Set(s);\n            n.delete(node.id);\n            return n;\n          });\n        pending.then(done, done);\n      }\n    }\n  };\n\n  const close = (node: TreeNode<T>) => {\n    if (!expandedSet.has(node.id)) return;\n    const next = new Set(expandedSet);\n    next.delete(node.id);\n    setExpanded(next);\n  };\n\n  const toggle = (node: TreeNode<T>) => (expandedSet.has(node.id) ? close(node) : open(node));\n\n  const select = (node: TreeNode<T>) => {\n    if (node.disabled) return;\n    if (selectionMode === \"none\") {\n      toggle(node);\n      return;\n    }\n    setSelectedOwn(node.id);\n    onSelectedChange?.(node.id, node);\n  };\n\n  const idOf = (target: EventTarget | null): string | null =>\n    (target as Element | null)?.closest?.<HTMLElement>('[role=\"treeitem\"]')?.dataset.treeId ?? null;\n\n  const textOf = (flat: FlatNode<T>): string => {\n    if (flat.node.textValue !== undefined) return flat.node.textValue;\n    if (typeof flat.node.label === \"string\") return flat.node.label;\n    const row = itemRefs.current.get(flat.node.id)?.querySelector(\"[data-tree-row]\");\n    return row?.textContent ?? \"\";\n  };\n\n  const findByText = (fromIndex: number, text: string): string | null => {\n    const needle = text.toLocaleLowerCase();\n    for (let i = 1; i <= visible.length; i++) {\n      const flat = visible[(fromIndex + i) % visible.length];\n      if (textOf(flat).trim().toLocaleLowerCase().startsWith(needle)) return flat.node.id;\n    }\n    return null;\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    const id = idOf(e.target);\n    const flat = id ? byId.get(id) : undefined;\n    if (!flat) return;\n    const { node } = flat;\n    const index = visible.findIndex((f) => f.node.id === node.id);\n    const expandedNow = expandedSet.has(node.id);\n    // Forward / backward along the reading direction, from the row itself.\n    const step = horizontalStep(e.key, e.target as Element);\n    // A space inside a type-ahead run is part of the name being typed (\"current a…\"),\n    // not a request to select.\n    const inRun = Date.now() - typeahead.current.at < TYPEAHEAD_MS && typeahead.current.text !== \"\";\n    const key = e.key === \" \" && inRun ? \"typeahead\" : e.key;\n\n    let handled = true;\n    if (step === 1) {\n      if (!isExpandable(node)) handled = false;\n      else if (!expandedNow) open(node);\n      else if (node.children?.length) focusRow(node.children[0].id);\n    } else if (step === -1) {\n      if (expandedNow) close(node);\n      else if (flat.parentId) focusRow(flat.parentId);\n      else handled = false;\n    } else {\n      switch (key) {\n        case \"ArrowDown\":\n          if (index < visible.length - 1) focusRow(visible[index + 1].node.id);\n          break;\n        case \"ArrowUp\":\n          if (index > 0) focusRow(visible[index - 1].node.id);\n          break;\n        case \"Home\":\n          if (visible.length) focusRow(visible[0].node.id);\n          break;\n        case \"End\":\n          if (visible.length) focusRow(visible[visible.length - 1].node.id);\n          break;\n        case \"Enter\":\n        case \" \":\n          select(node);\n          break;\n        case \"*\": {\n          // Every sibling at this level, as the pattern suggests.\n          const siblings = flat.parentId ? (byId.get(flat.parentId)?.node.children ?? []) : items;\n          const next = new Set(expandedSet);\n          for (const s of siblings) if (isExpandable(s)) next.add(s.id);\n          setExpanded(next);\n          break;\n        }\n        default: {\n          const printable = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;\n          if (!printable) {\n            handled = false;\n            break;\n          }\n          const now = Date.now();\n          const run = now - typeahead.current.at < TYPEAHEAD_MS ? typeahead.current.text : \"\";\n          typeahead.current = { text: run + e.key, at: now };\n          const typed = typeahead.current.text;\n          // \"aaa\" cycles through the rows starting with \"a\", as a file list does;\n          // anything else extends the prefix, searched from the row after this one\n          // (or from this one, when it still matches the longer prefix).\n          const repeated = typed.length > 1 && [...typed].every((c) => c === typed[0]);\n          const target = repeated\n            ? findByText(index, typed[0])\n            : typed.length > 1 && textOf(flat).trim().toLocaleLowerCase().startsWith(typed.toLocaleLowerCase())\n              ? node.id\n              : findByText(index, typed);\n          if (target) focusRow(target);\n        }\n      }\n    }\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleClick = (e: MouseEvent<HTMLUListElement>) => {\n    onClick?.(e);\n    const id = idOf(e.target);\n    const flat = id ? byId.get(id) : undefined;\n    if (!flat) return;\n    // Controls a host rendered into a row (an action in `trailing`) are their own.\n    const control = (e.target as Element).closest(\"button, a[href], input, select, textarea\");\n    if (control && itemRefs.current.get(flat.node.id)?.contains(control)) return;\n    setFocusedId(flat.node.id);\n    if ((e.target as Element).closest(\"[data-tree-toggle]\")) {\n      toggle(flat.node);\n      return;\n    }\n    select(flat.node);\n  };\n\n  const renderNodes = (nodes: readonly TreeNode<T>[], level: number, path: string): ReactNode =>\n    nodes.map((node, i) => {\n      // Named by its own row, not by its content: a treeitem's content is the whole\n      // open branch below it, and \"Assets Current assets 1020 Bank …\" is not a name.\n      // A path of indices, because a host's id may hold spaces an idref cannot.\n      const rowId = `${baseId}-${path}${i}`;\n      const expandable = isExpandable(node);\n      const isOpen = expandable && expandedSet.has(node.id);\n      const isSelected = selectionMode !== \"none\" && selected === node.id;\n      const isLoading = loading.has(node.id);\n      const state: TreeItemState = {\n        level,\n        expanded: isOpen,\n        selected: isSelected,\n        expandable,\n        loading: isLoading,\n        disabled: Boolean(node.disabled),\n      };\n      return (\n        <li\n          key={node.id}\n          ref={(el) => {\n            if (el) itemRefs.current.set(node.id, el);\n            else itemRefs.current.delete(node.id);\n          }}\n          role=\"treeitem\"\n          data-tree-id={node.id}\n          aria-labelledby={rowId}\n          aria-level={level}\n          aria-expanded={expandable ? isOpen : undefined}\n          aria-selected={selectionMode === \"none\" ? undefined : isSelected}\n          aria-disabled={node.disabled || undefined}\n          aria-busy={isLoading || undefined}\n          tabIndex={node.id === tabbable ? 0 : -1}\n          onFocus={(e) => {\n            // Only the row itself: a focus event bubbling up from a nested row, or from\n            // a control inside this one, is not this row being focused.\n            if (e.target === e.currentTarget) setFocusedId(node.id);\n          }}\n          // The ring goes on this row's own box, not the <li>: the <li> contains the\n          // whole open branch below it, and ringing that would outline a subtree.\n          className=\"outline-none [&:focus-visible>[data-tree-row]]:ring-[length:var(--focus-ring-width)] [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]\"\n        >\n          <TreeRow\n            id={rowId}\n            level={level}\n            expanded={expandable ? isOpen : undefined}\n            label={node.label}\n            icon={node.icon}\n            trailing={node.trailing}\n            indent={indent}\n            guides={indentGuides}\n            selected={isSelected}\n            loading={isLoading}\n            className={cn(\n              node.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer hover:bg-[var(--bg-hover)]\",\n              rowClassName,\n            )}\n          >\n            {renderItem ? renderItem(node, state) : undefined}\n          </TreeRow>\n          {isOpen && (\n            <ul role=\"group\">\n              {/* Empty while lazy children load: a \"Loading…\" line in here would be\n                  a child that is not a treeitem, and the parent row already says\n                  `aria-busy` and shows the spinner. */}\n              {node.children?.length ? renderNodes(node.children, level + 1, `${path}${i}-`) : null}\n            </ul>\n          )}\n        </li>\n      );\n    });\n\n  return (\n    <ul\n      {...rest}\n      role=\"tree\"\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      className={cn(\"flex flex-col text-sm\", className)}\n    >\n      {renderNodes(items, 1, \"\")}\n    </ul>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/tree-view.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, KeyboardEvent, MouseEvent, ReactNode } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Spinner } from \"./spinner\";\nimport { FOCUS_RING } from \"./focus-ring\";\n\n/**\n * A hierarchy you walk with the keyboard: kastlan's chart of accounts (Assets › Current\n * assets › Bank › 1020 Operating account), and — through {@link TreeRow} alone — the\n * row labels of its gantt, which indent and fold like a tree but sit beside a timeline\n * and so cannot be one.\n *\n * Both apps had written it as nested `<div>`s with a chevron button per row: every\n * row a Tab stop (a 300-account chart was 300 presses to get past), no way to say\n * \"level 3 of 5, collapsed\" to a screen reader, and no ←/→ at all. This is the WAI-ARIA\n * tree pattern instead:\n *\n *  - `role=\"tree\"` › `treeitem` (with `aria-level`, `aria-expanded` on a parent,\n *    `aria-selected` when selectable) › `role=\"group\"` for its children — so the\n *    reader announces the position and the state it needs.\n *  - ONE Tab stop (roving tabindex). ↑/↓ walk the visible rows, → opens a closed\n *    parent and then steps into it, ← closes an open one and then steps out to the\n *    parent, Home/End jump to the ends, `*` opens every sibling, and typing a few\n *    letters jumps to the next row that starts with them. ←/→ follow the reading\n *    direction (`horizontalStep`): in an RTL tree the children hang off to the left,\n *    and ← is what opens them.\n *  - Enter / Space, or a click, select. The chevron alone toggles on click.\n *\n * `expanded` and `selected` each work controlled or uncontrolled.\n */\n\n/* ── Nodes ───────────────────────────────────────────────────────────────── */\n\nexport interface TreeNode<T = unknown> {\n  /** Unique across the whole tree — it is what `expanded` and `selected` hold. */\n  id: string;\n  label: ReactNode;\n  /** The text type-ahead matches. Defaults to the row's rendered text. */\n  textValue?: string;\n  /** Before the label: an account-type icon, a colour dot. */\n  icon?: ReactNode;\n  /** After the label, pushed to the end of the row: a balance, a count, an action. */\n  trailing?: ReactNode;\n  children?: readonly TreeNode<T>[];\n  /**\n   * The node has children that are not loaded yet — it gets a chevron, and opening it\n   * calls `loadChildren`. Pass the children in `items` once they arrive.\n   */\n  hasChildren?: boolean;\n  /** Focusable and announced as unavailable (`aria-disabled`), but not selectable. */\n  disabled?: boolean;\n  /** Anything of the host's own, handed back to `renderItem` and `onSelectedChange`. */\n  data?: T;\n}\n\n/** What {@link TreeViewProps.renderItem} is told about a row. */\nexport interface TreeItemState {\n  level: number;\n  expanded: boolean;\n  selected: boolean;\n  /** It has children, loaded or not — it shows a chevron. */\n  expandable: boolean;\n  loading: boolean;\n  disabled: boolean;\n}\n\n/* ── TreeRow ─────────────────────────────────────────────────────────────── */\n\nexport interface TreeRowProps extends ComponentPropsWithRef<\"div\"> {\n  /** 1 for a top-level row. Sets the indent and the number of guides. */\n  level: number;\n  /** `true`/`false` for a row that can fold; leave it `undefined` for a leaf, which\n   *  gets a chevron-sized gap instead so labels at one level still line up. */\n  expanded?: boolean;\n  /**\n   * Make the chevron a real button (with `aria-expanded`, named by the label) that\n   * calls this. For a row used ON ITS OWN — kastlan's gantt labels, where each row is\n   * a line of a timeline and not an item of a tree widget. Inside {@link TreeView} it\n   * is omitted: the tree owns the keys, and a button per row would be a Tab stop per\n   * row, which is what the tree exists to remove.\n   */\n  onToggle?: () => void;\n  /** The toggle button's name. By default it is named by the row's label (the state\n   *  is `aria-expanded`'s to say); required when `children` replaces the label. */\n  toggleLabel?: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  trailing?: ReactNode;\n  /** Pixels per level. Default 16. */\n  indent?: number;\n  /** Draw a vertical hairline per ancestor level. Default `true`. */\n  guides?: boolean;\n  selected?: boolean;\n  /** A spinner in place of the chevron, while lazy children load. */\n  loading?: boolean;\n  /** Replace the label + trailing part of the row (the indent and chevron stay). */\n  children?: ReactNode;\n}\n\nconst DEFAULT_INDENT = 16;\n/** The chevron's box; the guide for a level runs through its centre. */\nconst CHEVRON = 16;\n/** The row's start padding, before any indent. */\nconst ROW_PAD = 4;\n\n/**\n * One row: indent, guides, chevron, icon, label, trailing — no tree semantics of its\n * own. {@link TreeView} is built from it, and a host that needs the look without the\n * widget (a gantt's label column) uses it directly.\n *\n * Laid out with logical properties throughout (`padding-inline-start`,\n * `inset-inline-start`), so the indent, the guides and the chevron all hang from the\n * reading start in an RTL layout without a second code path.\n */\nexport function TreeRow({\n  level,\n  expanded,\n  onToggle,\n  toggleLabel,\n  label,\n  icon,\n  trailing,\n  indent = DEFAULT_INDENT,\n  guides = true,\n  selected,\n  loading,\n  children,\n  className,\n  style,\n  ...rest\n}: TreeRowProps) {\n  const labelId = useId();\n  const depth = Math.max(0, level - 1);\n  const expandable = expanded !== undefined;\n  // A right-pointing chevron that turns DOWN when open. In RTL it is mirrored to point\n  // left, and turning that one clockwise would point it UP — so it turns the other way.\n  const chevron = (\n    <ChevronRight\n      aria-hidden\n      className={cn(\n        \"size-4 transition-transform motion-reduce:transition-none rtl:-scale-x-100\",\n        expanded && \"rotate-90 rtl:-rotate-90\",\n      )}\n    />\n  );\n  return (\n    <div\n      {...rest}\n      data-tree-row=\"\"\n      data-selected={selected || undefined}\n      style={{ paddingInlineStart: ROW_PAD + depth * indent, ...style }}\n      className={cn(\n        \"relative flex min-h-8 items-center gap-1.5 rounded pe-2 text-sm\",\n        selected\n          ? \"bg-active font-medium text-primary\"\n          : \"text-secondary\",\n        className,\n      )}\n    >\n      {guides &&\n        Array.from({ length: depth }, (_, i) => (\n          <span\n            key={i}\n            aria-hidden\n            data-tree-guide=\"\"\n            className=\"pointer-events-none absolute inset-y-0 w-px bg-[var(--border)]\"\n            style={{ insetInlineStart: ROW_PAD + i * indent + CHEVRON / 2 }}\n          />\n        ))}\n      {loading ? (\n        <span className=\"flex size-4 shrink-0 items-center justify-center\">\n          <Spinner label={null} className=\"size-3 border\" />\n        </span>\n      ) : expandable && onToggle ? (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-label={toggleLabel}\n          aria-labelledby={toggleLabel ? undefined : labelId}\n          onClick={(e) => {\n            e.stopPropagation();\n            onToggle();\n          }}\n          className={cn(\"flex size-4 shrink-0 items-center justify-center rounded text-muted outline-none hover:text-primary\", FOCUS_RING)}\n        >\n          {chevron}\n        </button>\n      ) : expandable ? (\n        <span data-tree-toggle=\"\" className=\"flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted\">\n          {chevron}\n        </span>\n      ) : (\n        <span aria-hidden className=\"size-4 shrink-0\" />\n      )}\n      {children ?? (\n        <>\n          {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n          {/* One line at Normal; from Large up it wraps and the `min-h-8` row grows\n              (text size §10.17, round 0.34 T1: the sweep read \"1020 Operat…\"). */}\n          <span id={labelId} data-tree-label=\"\" className=\"min-w-0 flex-1 truncate-until-large\">\n            {label}\n          </span>\n          {trailing !== undefined && trailing !== null && (\n            <span className=\"ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted\">\n              {trailing}\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n/* ── TreeView ────────────────────────────────────────────────────────────── */\n\nexport interface TreeViewProps<T = unknown>\n  extends Omit<ComponentPropsWithRef<\"ul\">, \"onSelect\" | \"children\" | \"defaultValue\"> {\n  items: readonly TreeNode<T>[];\n  /** Open nodes, controlled. */\n  expanded?: readonly string[];\n  /** Open nodes on first render, uncontrolled. */\n  defaultExpanded?: readonly string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  /** The selected node's id, controlled; `null` for none. */\n  selected?: string | null;\n  defaultSelected?: string | null;\n  onSelectedChange?: (id: string, node: TreeNode<T>) => void;\n  /** `\"none\"` makes it a navigation-only tree: no `aria-selected`, Enter toggles. */\n  selectionMode?: \"single\" | \"none\";\n  /** The whole row content after the chevron, per node. Wins over `label`/`trailing`. */\n  renderItem?: (node: TreeNode<T>, state: TreeItemState) => ReactNode;\n  /**\n   * Called when a node with `hasChildren` and no `children` is opened. While the\n   * promise is pending the row shows a spinner and is `aria-busy`; put the children\n   * into `items` before it resolves (or after — the row opens either way).\n   */\n  loadChildren?: (node: TreeNode<T>) => Promise<void> | void;\n  /** Pixels per level. Default 16. */\n  indent?: number;\n  /** Vertical hairlines per level. Default `true`. */\n  indentGuides?: boolean;\n  /** Extra classes for each row (the `TreeRow`), e.g. a denser height. */\n  rowClassName?: string;\n}\n\ninterface FlatNode<T> {\n  node: TreeNode<T>;\n  level: number;\n  parentId: string | null;\n}\n\nconst isExpandable = (n: TreeNode<unknown>) => Boolean(n.children?.length || n.hasChildren);\n\n/** Controlled when `value` is given, otherwise state seeded from `initial`. */\nfunction useControllable<V>(value: V | undefined, initial: V): [V, (next: V) => void] {\n  const [own, setOwn] = useState<V>(initial);\n  const controlled = value !== undefined;\n  const set = (next: V) => {\n    if (!controlled) setOwn(next);\n  };\n  return [controlled ? value : own, set];\n}\n\n/** How long a type-ahead run stays open between keys — the APG's suggested half second. */\nconst TYPEAHEAD_MS = 500;\n\nexport function TreeView<T = unknown>({\n  items,\n  expanded: expandedProp,\n  defaultExpanded,\n  onExpandedChange,\n  selected: selectedProp,\n  defaultSelected,\n  onSelectedChange,\n  selectionMode = \"single\",\n  renderItem,\n  loadChildren,\n  indent = DEFAULT_INDENT,\n  indentGuides = true,\n  rowClassName,\n  className,\n  onKeyDown,\n  onClick,\n  ...rest\n}: TreeViewProps<T>) {\n  const [expandedList, setExpandedOwn] = useControllable<readonly string[]>(\n    expandedProp,\n    defaultExpanded ?? [],\n  );\n  const [selected, setSelectedOwn] = useControllable<string | null>(\n    selectedProp,\n    defaultSelected ?? null,\n  );\n  const expandedSet = useMemo(() => new Set(expandedList), [expandedList]);\n  const [loading, setLoading] = useState<ReadonlySet<string>>(() => new Set());\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  const itemRefs = useRef(new Map<string, HTMLLIElement>());\n  const pendingFocus = useRef<string | null>(null);\n  const typeahead = useRef({ text: \"\", at: 0 });\n  const baseId = useId();\n\n  // Every node by id (for parents and lookups), and the rows currently on screen in\n  // order — the list the arrow keys walk.\n  const { byId, visible } = useMemo(() => {\n    const map = new Map<string, FlatNode<T>>();\n    const rows: FlatNode<T>[] = [];\n    const walk = (nodes: readonly TreeNode<T>[], level: number, parentId: string | null, shown: boolean) => {\n      for (const node of nodes) {\n        const flat = { node, level, parentId };\n        map.set(node.id, flat);\n        if (shown) rows.push(flat);\n        if (node.children) walk(node.children, level + 1, node.id, shown && expandedSet.has(node.id));\n      }\n    };\n    walk(items, 1, null, true);\n    return { byId: map, visible: rows };\n  }, [items, expandedSet]);\n\n  // The one tabbable row. Focus that was inside a branch that has since closed (a\n  // click on its parent's chevron) moves up to the nearest ancestor still on screen,\n  // so the tab stop never points at a row that is not rendered.\n  const visibleIds = useMemo(() => new Set(visible.map((f) => f.node.id)), [visible]);\n  const nearestVisible = (id: string | null): string | null => {\n    let cur = id;\n    while (cur && !visibleIds.has(cur)) cur = byId.get(cur)?.parentId ?? null;\n    return cur;\n  };\n  const tabbable =\n    nearestVisible(focusedId) ?? nearestVisible(selected) ?? visible[0]?.node.id ?? null;\n\n  useEffect(() => {\n    const id = pendingFocus.current;\n    if (!id) return;\n    pendingFocus.current = null;\n    itemRefs.current.get(id)?.focus();\n  });\n\n  const focusRow = (id: string) => {\n    setFocusedId(id);\n    // After the commit: moving into a branch that just opened targets a row that is\n    // not in the DOM yet.\n    pendingFocus.current = id;\n    itemRefs.current.get(id)?.focus();\n  };\n\n  const setExpanded = (next: Set<string>) => {\n    const list = [...next];\n    setExpandedOwn(list);\n    onExpandedChange?.(list);\n  };\n\n  const open = (node: TreeNode<T>) => {\n    if (expandedSet.has(node.id) || !isExpandable(node)) return;\n    const next = new Set(expandedSet);\n    next.add(node.id);\n    setExpanded(next);\n    if (loadChildren && node.hasChildren && !node.children?.length) {\n      const pending = loadChildren(node);\n      if (pending && typeof pending.then === \"function\") {\n        setLoading((s) => new Set(s).add(node.id));\n        const done = () =>\n          setLoading((s) => {\n            const n = new Set(s);\n            n.delete(node.id);\n            return n;\n          });\n        pending.then(done, done);\n      }\n    }\n  };\n\n  const close = (node: TreeNode<T>) => {\n    if (!expandedSet.has(node.id)) return;\n    const next = new Set(expandedSet);\n    next.delete(node.id);\n    setExpanded(next);\n  };\n\n  const toggle = (node: TreeNode<T>) => (expandedSet.has(node.id) ? close(node) : open(node));\n\n  const select = (node: TreeNode<T>) => {\n    if (node.disabled) return;\n    if (selectionMode === \"none\") {\n      toggle(node);\n      return;\n    }\n    setSelectedOwn(node.id);\n    onSelectedChange?.(node.id, node);\n  };\n\n  const idOf = (target: EventTarget | null): string | null =>\n    (target as Element | null)?.closest?.<HTMLElement>('[role=\"treeitem\"]')?.dataset.treeId ?? null;\n\n  const textOf = (flat: FlatNode<T>): string => {\n    if (flat.node.textValue !== undefined) return flat.node.textValue;\n    if (typeof flat.node.label === \"string\") return flat.node.label;\n    const row = itemRefs.current.get(flat.node.id)?.querySelector(\"[data-tree-row]\");\n    return row?.textContent ?? \"\";\n  };\n\n  const findByText = (fromIndex: number, text: string): string | null => {\n    const needle = text.toLocaleLowerCase();\n    for (let i = 1; i <= visible.length; i++) {\n      const flat = visible[(fromIndex + i) % visible.length];\n      if (textOf(flat).trim().toLocaleLowerCase().startsWith(needle)) return flat.node.id;\n    }\n    return null;\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    const id = idOf(e.target);\n    const flat = id ? byId.get(id) : undefined;\n    if (!flat) return;\n    const { node } = flat;\n    const index = visible.findIndex((f) => f.node.id === node.id);\n    const expandedNow = expandedSet.has(node.id);\n    // Forward / backward along the reading direction, from the row itself.\n    const step = horizontalStep(e.key, e.target as Element);\n    // A space inside a type-ahead run is part of the name being typed (\"current a…\"),\n    // not a request to select.\n    const inRun = Date.now() - typeahead.current.at < TYPEAHEAD_MS && typeahead.current.text !== \"\";\n    const key = e.key === \" \" && inRun ? \"typeahead\" : e.key;\n\n    let handled = true;\n    if (step === 1) {\n      if (!isExpandable(node)) handled = false;\n      else if (!expandedNow) open(node);\n      else if (node.children?.length) focusRow(node.children[0].id);\n    } else if (step === -1) {\n      if (expandedNow) close(node);\n      else if (flat.parentId) focusRow(flat.parentId);\n      else handled = false;\n    } else {\n      switch (key) {\n        case \"ArrowDown\":\n          if (index < visible.length - 1) focusRow(visible[index + 1].node.id);\n          break;\n        case \"ArrowUp\":\n          if (index > 0) focusRow(visible[index - 1].node.id);\n          break;\n        case \"Home\":\n          if (visible.length) focusRow(visible[0].node.id);\n          break;\n        case \"End\":\n          if (visible.length) focusRow(visible[visible.length - 1].node.id);\n          break;\n        case \"Enter\":\n        case \" \":\n          select(node);\n          break;\n        case \"*\": {\n          // Every sibling at this level, as the pattern suggests.\n          const siblings = flat.parentId ? (byId.get(flat.parentId)?.node.children ?? []) : items;\n          const next = new Set(expandedSet);\n          for (const s of siblings) if (isExpandable(s)) next.add(s.id);\n          setExpanded(next);\n          break;\n        }\n        default: {\n          const printable = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;\n          if (!printable) {\n            handled = false;\n            break;\n          }\n          const now = Date.now();\n          const run = now - typeahead.current.at < TYPEAHEAD_MS ? typeahead.current.text : \"\";\n          typeahead.current = { text: run + e.key, at: now };\n          const typed = typeahead.current.text;\n          // \"aaa\" cycles through the rows starting with \"a\", as a file list does;\n          // anything else extends the prefix, searched from the row after this one\n          // (or from this one, when it still matches the longer prefix).\n          const repeated = typed.length > 1 && [...typed].every((c) => c === typed[0]);\n          const target = repeated\n            ? findByText(index, typed[0])\n            : typed.length > 1 && textOf(flat).trim().toLocaleLowerCase().startsWith(typed.toLocaleLowerCase())\n              ? node.id\n              : findByText(index, typed);\n          if (target) focusRow(target);\n        }\n      }\n    }\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleClick = (e: MouseEvent<HTMLUListElement>) => {\n    onClick?.(e);\n    const id = idOf(e.target);\n    const flat = id ? byId.get(id) : undefined;\n    if (!flat) return;\n    // Controls a host rendered into a row (an action in `trailing`) are their own.\n    const control = (e.target as Element).closest(\"button, a[href], input, select, textarea\");\n    if (control && itemRefs.current.get(flat.node.id)?.contains(control)) return;\n    setFocusedId(flat.node.id);\n    if ((e.target as Element).closest(\"[data-tree-toggle]\")) {\n      toggle(flat.node);\n      return;\n    }\n    select(flat.node);\n  };\n\n  const renderNodes = (nodes: readonly TreeNode<T>[], level: number, path: string): ReactNode =>\n    nodes.map((node, i) => {\n      // Named by its own row, not by its content: a treeitem's content is the whole\n      // open branch below it, and \"Assets Current assets 1020 Bank …\" is not a name.\n      // A path of indices, because a host's id may hold spaces an idref cannot.\n      const rowId = `${baseId}-${path}${i}`;\n      const expandable = isExpandable(node);\n      const isOpen = expandable && expandedSet.has(node.id);\n      const isSelected = selectionMode !== \"none\" && selected === node.id;\n      const isLoading = loading.has(node.id);\n      const state: TreeItemState = {\n        level,\n        expanded: isOpen,\n        selected: isSelected,\n        expandable,\n        loading: isLoading,\n        disabled: Boolean(node.disabled),\n      };\n      return (\n        <li\n          key={node.id}\n          ref={(el) => {\n            if (el) itemRefs.current.set(node.id, el);\n            else itemRefs.current.delete(node.id);\n          }}\n          role=\"treeitem\"\n          data-tree-id={node.id}\n          aria-labelledby={rowId}\n          aria-level={level}\n          aria-expanded={expandable ? isOpen : undefined}\n          aria-selected={selectionMode === \"none\" ? undefined : isSelected}\n          aria-disabled={node.disabled || undefined}\n          aria-busy={isLoading || undefined}\n          tabIndex={node.id === tabbable ? 0 : -1}\n          onFocus={(e) => {\n            // Only the row itself: a focus event bubbling up from a nested row, or from\n            // a control inside this one, is not this row being focused.\n            if (e.target === e.currentTarget) setFocusedId(node.id);\n          }}\n          // The ring goes on this row's own box, not the <li>: the <li> contains the\n          // whole open branch below it, and ringing that would outline a subtree.\n          className=\"outline-none [&:focus-visible>[data-tree-row]]:ring-focus [&:focus-visible>[data-tree-row]]:ring-brand\"\n        >\n          <TreeRow\n            id={rowId}\n            level={level}\n            expanded={expandable ? isOpen : undefined}\n            label={node.label}\n            icon={node.icon}\n            trailing={node.trailing}\n            indent={indent}\n            guides={indentGuides}\n            selected={isSelected}\n            loading={isLoading}\n            className={cn(\n              node.disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer hover:bg-hover\",\n              rowClassName,\n            )}\n          >\n            {renderItem ? renderItem(node, state) : undefined}\n          </TreeRow>\n          {isOpen && (\n            <ul role=\"group\">\n              {/* Empty while lazy children load: a \"Loading…\" line in here would be\n                  a child that is not a treeitem, and the parent row already says\n                  `aria-busy` and shows the spinner. */}\n              {node.children?.length ? renderNodes(node.children, level + 1, `${path}${i}-`) : null}\n            </ul>\n          )}\n        </li>\n      );\n    });\n\n  return (\n    <ul\n      {...rest}\n      role=\"tree\"\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      className={cn(\"flex flex-col text-sm\", className)}\n    >\n      {renderNodes(items, 1, \"\")}\n    </ul>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/treemap.d.ts

@@ -1,8 +1,6 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { Direction } from '../lib/direction.js';
-import { ChartHeight } from './chart-height.js';
-
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type Direction } from "../lib/direction.js";
+import { type ChartHeight } from "./chart-height.js";
 /**
  * One tile.
  *
@@ -11,7 +9,7 @@ import { ChartHeight } from './chart-height.js';
  * in recharts uses for the number a mark is sized by. Migrating is a rename at the
  * mapping step — `{ id, name, value: row.total }`.
  */
-interface TreemapNode {
+export interface TreemapNode {
     /** Stable key, handed back by {@link TreemapProps.onNodeClick} and
      *  {@link TreemapProps.nodeNote}. Names can collide; ids must not. */
     id: string;
@@ -37,7 +35,7 @@ interface TreemapNode {
  * Everything a `<div>` takes reaches the chart's root (`ChartContainer`), so a test id
  * or a `data-tour` anchor can find it. `children` is the chart's own.
  */
-interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     data: TreemapNode[];
     /**
      * Formats a node's value in the tooltip. Handed the node's SHARE of what is drawn
@@ -97,11 +95,11 @@ interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "children">
  * advance of a UI sans at this weight; it only needs to be close, since the tile keeps
  * 6px of padding either side. The full name stays in the tooltip.
  */
-declare function fitLabel(name: string, boxWidth: number, fontSize: number): string | null;
+export declare function fitLabel(name: string, boxWidth: number, fontSize: number): string | null;
 /** What recharts hands a `content` element for each node, plus the three options the
  *  chart forwards. Everything optional because recharts clones the element it was
  *  given and fills the geometry in — the element as written carries only the options. */
-interface TreemapCellProps {
+export interface TreemapCellProps {
     depth?: number;
     x?: number;
     y?: number;
@@ -131,7 +129,7 @@ interface TreemapCellProps {
  * (`paint-order: stroke`), which defeats any inherited stroke and keeps the text solid
  * where it overlaps a lighter or darker part of its own tile.
  */
-declare function TreemapCell({ depth, x, y, width, height, name, fill, labelColor, id, onNodeClick, redactNames, nodeNote, dir, }: TreemapCellProps): react.JSX.Element | null;
+export declare function TreemapCell({ depth, x, y, width, height, name, fill, labelColor, id, onNodeClick, redactNames, nodeNote, dir, }: TreemapCellProps): import("react").JSX.Element | null;
 /**
  * Tile chart: one rectangle per {@link TreemapNode}, sized by `value`, coloured by
  * index from the chart ramp (or by the node's own `fill`), labelled in whichever of the
@@ -143,6 +141,4 @@ declare function TreemapCell({ depth, x, y, width, height, name, fill, labelColo
  *
  * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.
  */
-declare function Treemap({ data, valueFormatter, height, onNodeClick, redactNames, nodeNote, maxTiles, colors, style, ...rest }: TreemapProps): react.JSX.Element | null;
-
-export { Treemap, TreemapCell, type TreemapCellProps, type TreemapNode, type TreemapProps, fitLabel };
+export declare function Treemap({ data, valueFormatter, height, onNodeClick, redactNames, nodeNote, maxTiles, colors, style, ...rest }: TreemapProps): import("react").JSX.Element | null;

package/dist/components/trigger-aria.d.ts

@@ -5,7 +5,7 @@
  * props, so an external label named nothing and a form library's `aria-describedby`
  * pointed a screen reader at an element with no role (kastlan, 0.5.0).
  */
-interface TriggerAria {
+export interface TriggerAria {
     id?: string;
     "aria-label"?: string;
     "aria-labelledby"?: string;
@@ -16,6 +16,4 @@ interface TriggerAria {
     "aria-required"?: boolean | "true" | "false";
 }
 /** Split a field's props into what its trigger takes and what its wrapper takes. */
-declare function splitTriggerAria<T extends TriggerAria>(props: T): [TriggerAria, Omit<T, keyof TriggerAria>];
-
-export { type TriggerAria, splitTriggerAria };
+export declare function splitTriggerAria<T extends TriggerAria>(props: T): [TriggerAria, Omit<T, keyof TriggerAria>];

package/dist/components/ui-labels.d.ts

@@ -0,0 +1,5 @@
+import type { CharacterCountLabels, PasswordRevealLabels } from "./field-base.js";
+import type { TabsLabels } from "./tabs.js";
+export declare const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels;
+export declare const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels;
+export declare const DEFAULT_TABS_LABELS: TabsLabels;

package/dist/components/ui-labels.js

@@ -0,0 +1,20 @@
+"use client";
+const DEFAULT_PASSWORD_REVEAL_LABELS = {
+  show: "Show password",
+  hide: "Hide password"
+};
+const DEFAULT_CHARACTER_COUNT_LABELS = {
+  count: (used, max) => `${used} of ${max} characters`,
+  remaining: (left) => left === 1 ? "1 character left" : `${left} characters left`,
+  limitReached: "Character limit reached"
+};
+const DEFAULT_TABS_LABELS = {
+  add: "Add tab",
+  remove: (tab) => `Remove ${tab}`
+};
+export {
+  DEFAULT_CHARACTER_COUNT_LABELS,
+  DEFAULT_PASSWORD_REVEAL_LABELS,
+  DEFAULT_TABS_LABELS
+};
+//# sourceMappingURL=ui-labels.js.map

package/dist/components/ui-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ui-labels.ts"],"sourcesContent":["// The English words of ./ui, in a module with no component code: the English catalogue\n// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk\n// like the other languages (0.34, KS U8). ./ui re-exports them.\n\nimport type { CharacterCountLabels, PasswordRevealLabels } from \"./field-base\";\nimport type { TabsLabels } from \"./tabs\";\n\nexport const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels = {\n  show: \"Show password\",\n  hide: \"Hide password\",\n};\n\nexport const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {\n  count: (used, max) => `${used} of ${max} characters`,\n  remaining: (left) => (left === 1 ? \"1 character left\" : `${left} characters left`),\n  limitReached: \"Character limit reached\",\n};\n\nexport const DEFAULT_TABS_LABELS: TabsLabels = {\n  add: \"Add tab\",\n  remove: (tab) => `Remove ${tab}`,\n};\n"],"mappings":";AAOO,MAAM,iCAAuD;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iCAAuD;AAAA,EAClE,OAAO,CAAC,MAAM,QAAQ,GAAG,IAAI,OAAO,GAAG;AAAA,EACvC,WAAW,CAAC,SAAU,SAAS,IAAI,qBAAqB,GAAG,IAAI;AAAA,EAC/D,cAAc;AAChB;AAEO,MAAM,sBAAkC;AAAA,EAC7C,KAAK;AAAA,EACL,QAAQ,CAAC,QAAQ,UAAU,GAAG;AAChC;","names":[]}

package/dist/components/use-anchor-dir.d.ts

@@ -1,6 +1,5 @@
-import { RefObject } from 'react';
-import { Direction } from '../lib/direction.js';
-
+import type { RefObject } from "react";
+import { type Direction } from "../lib/direction.js";
 /**
  * The reading direction at a portalled panel's anchor — internal, not exported from
  * the barrel. The field pickers' panels are portalled to `<body>`, out of the subtree
@@ -10,6 +9,4 @@ import { Direction } from '../lib/direction.js';
  * anchored rect these panels also wait for is measured the same way, so the panel's
  * first painted frame already has both, and a render never reads a ref.
  */
-declare function useAnchorDir(ref: RefObject<Element | null>, open: boolean): Direction;
-
-export { useAnchorDir };
+export declare function useAnchorDir(ref: RefObject<Element | null>, open: boolean): Direction;

package/dist/components/use-mobile-reveal.d.ts

@@ -1,5 +1,3 @@
-import * as react from 'react';
-
 /**
  * The phone's endless scroll, in place of the desktop pager (feedback #232).
  *
@@ -19,7 +17,7 @@ import * as react from 'react';
  * Lifted out of `DataTable` with the rest of its state; the sentinel ref belongs to the
  * caller's `<li>`.
  */
-declare function useMobileReveal<T>({ rows, slice, isServer, isMdUp, unpaged, defaultPageSize, }: {
+export declare function useMobileReveal<T>({ rows, slice, isServer, isMdUp, unpaged, defaultPageSize, }: {
     /** The whole sorted list — what there is to reveal. */
     rows: T[];
     /** What a server-paginated table shows instead. */
@@ -32,7 +30,5 @@ declare function useMobileReveal<T>({ rows, slice, isServer, isMdUp, unpaged, de
 }): {
     mobileSlice: T[];
     canRevealMoreMobile: boolean;
-    loadMoreRef: react.RefObject<HTMLLIElement | null>;
+    loadMoreRef: import("react").RefObject<HTMLLIElement | null>;
 };
-
-export { useMobileReveal };

package/dist/components/use-table-state.d.ts

@@ -1,15 +1,182 @@
-import 'react';
-import './data-table-sort.js';
-export { I as DEFAULT_PERSIST_PREFIX, T as TableUrlState, k as TableUrlStateProps, l as TableUrlSync, U as UseTableUrlStateOptions, m as UseTableUrlStateReturn, w as readTableUrlState, J as useTableState, E as useTableUrlState } from '../data-table-labels-BJ5JE_X2.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
+import { type SortState } from "./data-table-sort.js";
+import type { DataTableColumn, FilterState, ServerPagination } from "./data-table.js";
+export declare const DEFAULT_PERSIST_PREFIX = "hbui-table:";
+/**
+ * How a table is mirrored into the URL: `true`, or `{ prefix }` for a table that shares
+ * its page with another URL-synced one. The prefix is put verbatim in front of EVERY key
+ * the table writes and reads — `{ prefix: "inv." }` gives `inv.f.<column>`, `inv.sort`,
+ * `inv.p`, `inv.ps` (and `inv.q`) — so two tables on one page stop sharing a sort and a
+ * page. Without one the keys are unprefixed, as they always were.
+ */
+export type TableUrlSync = boolean | {
+    prefix?: string;
+};
+/** What {@link readTableUrlState} found in a query string. */
+export interface TableUrlState {
+    sorts?: SortState[];
+    filters?: FilterState;
+    /** `Infinity` for `ps=all`. */
+    pageSize?: number;
+    /** 0-based (the URL's `p` is 1-based). */
+    page?: number;
+}
+/**
+ * What a table's URL says, read out of a query string: the column filters (`f.<key>`),
+ * the sort, the page size and the 0-based page. Absent keys are absent here too, so a
+ * caller can tell "not in the link" from "the default". The same reader `urlSync` uses
+ * on mount, exported for an owner that keeps the state itself — see
+ * {@link useTableUrlState}.
+ *
+ * Pass the ROUTER's query string — the one `setSearchParams` writes — and the table's
+ * `prefix` when it has one (see {@link TableUrlSync}).
+ *
+ * This read `window.location.search` until 0.7.0, which is the same string only under a
+ * BrowserRouter. Under a HashRouter the router's query lives after the `#`
+ * (`/#/tx?f.payee=Rewe`) and `window.location.search` is empty: a shared link opened
+ * unfiltered, and the table's first write then replaced the link's filter with its own
+ * empty state. Reading and writing through `useSearchParams` is one source for both
+ * directions under every router, MemoryRouter included.
+ */
+export declare function readTableUrlState<T>(sp: URLSearchParams, columns: DataTableColumn<T>[], prefix?: string): TableUrlState;
+/**
+ * Where a table's view lives: what it is sorted and filtered by, which page, how wide
+ * the columns are and which are hidden — plus the two places that outlives a render.
+ *
+ * Lifted out of `DataTable`, which was 984 lines and twenty hooks in one function. This
+ * is the part that is genuinely about STATE rather than about drawing, and the three
+ * rules it encodes are easy to lose among the markup:
+ *
+ * * **The URL is read once, on mount.** A shared or deep link populates the initial view;
+ *   after that the state is local, or the browser's own history would fight the user's
+ *   next click.
+ * * **Sorting and filtering are optionally CONTROLLED.** A server-driven table passes
+ *   state and a callback and owns them; everything else is self-owned. That is the
+ *   `sortsProp ?? internalSorts` pair, and it is why the setters are exposed separately.
+ * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the
+ *   per-table identity; `urlSync` is opt-in because only some tables want their view in
+ *   a shareable address.
+ * * **A controlled filter, sort or page size that changes sends the table back to page
+ *   1.** See the note at the reset below.
+ */
+export declare function useTableState<T>({ columns, storageKey, storageKeyPrefix, urlSync: urlSyncOption, defaultPageSize, sortsProp, filtersProp, pageSizeProp, }: {
+    columns: DataTableColumn<T>[];
+    storageKey?: string;
+    storageKeyPrefix: string;
+    urlSync?: TableUrlSync;
+    defaultPageSize: number;
+    sortsProp?: SortState[];
+    filtersProp?: FilterState;
+    pageSizeProp?: number;
+}): {
+    sorts: SortState[];
+    filters: FilterState;
+    setInternalSorts: import("react").Dispatch<import("react").SetStateAction<SortState[]>>;
+    setInternalFilters: import("react").Dispatch<import("react").SetStateAction<FilterState>>;
+    page: number;
+    setPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    pageSize: number;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    widths: Record<string, number>;
+    setWidths: import("react").Dispatch<import("react").SetStateAction<Record<string, number>>>;
+    hiddenCols: Set<string>;
+    setHiddenCols: import("react").Dispatch<import("react").SetStateAction<Set<string>>>;
+    showSettings: boolean;
+    setShowSettings: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    headRefs: Map<string, HTMLTableCellElement>;
+};
+/** What {@link useSharedTableView} keeps. */
+export interface SharedTableView {
+    sorts: SortState[];
+    setSorts: (next: SortState[]) => void;
+    /** `Infinity` for "all", as a table holds it. */
+    pageSize: number;
+    setPageSize: (next: number) => void;
+}
+/**
+ * One table view — the sort and the page size — for an owner that draws it as SEVERAL
+ * tables over one `storageKey`: `TranslationReviewPanel`'s groups, which sort and page
+ * alike (0.35, Kurvenschmiede: its grouped review stored no view at all). Pass them to
+ * each table as `sorts`/`onSortsChange` and `pageSize`/`onPageSizeChange`.
+ *
+ * Kept in the very blob a `DataTable` with that `storageKey` keeps, not in a format of
+ * its own, so the single table and the groups read each other's view. What the blob
+ * holds besides (filters, column widths, hidden columns) is carried over as stored, for
+ * the single table to find as it left it. Read when `active` turns on — on mount, or
+ * when the owner switches to this view — and written on a change, never on a read. The
+ * prefix resolves as DataTable's does: prop > provider > the kit's.
+ */
+export declare function useSharedTableView({ active, storageKey, storageKeyPrefix, defaultPageSize, }: {
+    active: boolean;
+    storageKey?: string;
+    storageKeyPrefix?: string;
+    defaultPageSize: number;
+}): SharedTableView;
+export interface UseTableUrlStateOptions<T> {
+    /** The table's columns — read for their keys and filter types only. */
+    columns: DataTableColumn<T>[];
+    /** Default 25. A page size equal to it is left out of the URL. */
+    defaultPageSize?: number;
+    /** Mirror the state into the URL and seed it from there on mount. Default true.
+     *  `{ prefix }` puts a prefix in front of every key, for a page with two URL-synced
+     *  tables — see {@link TableUrlSync}. */
+    urlSync?: TableUrlSync;
+    /** Shorthand for `urlSync: { prefix }`; wins over a prefix given there. */
+    urlPrefix?: string;
+    /** Also hold a free-text search term, under `q`. Off by default, so a `q` that
+     *  belongs to someone else on the page is never touched. */
+    search?: boolean;
+}
+/** The part of {@link DataTableProps} a server-driven table takes from its owner. */
+export interface TableUrlStateProps {
+    serverPagination: ServerPagination;
+    filters: FilterState;
+    onFiltersChange: (next: FilterState) => void;
+    sorts: SortState[];
+    onSortsChange: (next: SortState[]) => void;
+}
+export interface UseTableUrlStateReturn {
+    /** 0-based. */
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    /** Also back to the first page. */
+    setPageSize: (pageSize: number) => void;
+    filters: FilterState;
+    /** Also back to the first page. */
+    setFilters: (next: FilterState) => void;
+    sorts: SortState[];
+    /** Also back to the first page. */
+    setSorts: (next: SortState[]) => void;
+    /** The search term (`""` unless `search: true`). */
+    search: string;
+    /** Also back to the first page. */
+    setSearch: (next: string) => void;
+    /**
+     * Everything the table needs, to spread onto it:
+     * `<DataTable {...table.tableProps(data?.total ?? 0, { isLoading })} rows={…} … />`.
+     */
+    tableProps: (total: number, options?: {
+        isLoading?: boolean;
+    }) => TableUrlStateProps;
+}
+/**
+ * The controlled state of a `serverPagination` table — filters, sorts, page, page size
+ * and optionally a search term — kept by the OWNER and mirrored into the URL in the
+ * table's own scheme (`f.<key>`, `sort`, `p`, `ps`, and `q`).
+ *
+ * A server-driven table owns none of this: the owner has to hold it to turn it into
+ * the query that fetches `rows`, and until now it also had to restate the table's URL
+ * codec to keep the view bookmarkable (kastlan's use-server-table.ts copied
+ * `readUrlState` / `writeUrlState` to do it). Same rules as `urlSync`:
+ *
+ * * **The URL is read once, on mount** — a shared or deep link (see {@link filterHref})
+ *   seeds the view; after that the state is local and written out with `replace`.
+ * * **Any change but the page itself goes back to page 1** — a narrower filter must not
+ *   leave the user on page 7 of 2.
+ * * **Written by value**: an unchanged view writes nothing, however often the owner
+ *   renders.
+ *
+ * Mapping the state onto the backend's query parameters stays the owner's: that is the
+ * part the kit cannot know.
+ */
+export declare function useTableUrlState<T>({ columns, defaultPageSize, urlSync: urlSyncOption, urlPrefix: urlPrefixOption, search: manageSearch, }: UseTableUrlStateOptions<T>): UseTableUrlStateReturn;

package/dist/components/use-table-state.js

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useSearchParams } from "react-router";
+import { useKitTableStorageKeyPrefix } from "../i18n/kit-labels.js";
 import { readStored, writeStored } from "../lib/safe-storage.js";
 import {
   decodeFilterValue,
@@ -24,6 +25,11 @@ function loadPersisted(storageKey, prefix) {
 function serializePersisted(state) {
   return JSON.stringify(state);
 }
+function storedPageSize(stored, fallback) {
+  if (stored.pageSize === "all") return Infinity;
+  if (typeof stored.pageSize === "number" && stored.pageSize > 0) return stored.pageSize;
+  return fallback;
+}
 const URL_FILTER_PREFIX = "f.";
 const URL_SORT_KEY = "sort";
 const URL_PAGE_KEY = "p";
@@ -116,7 +122,8 @@ function useTableState({
   urlSync: urlSyncOption,
   defaultPageSize,
   sortsProp,
-  filtersProp
+  filtersProp,
+  pageSizeProp
 }) {
   const { enabled: urlSync, prefix: urlPrefix } = resolveTableUrlSync(urlSyncOption);
   const keys = useMemo(() => urlKeys(urlPrefix), [urlPrefix]);
@@ -138,18 +145,16 @@ function useTableState({
   const sorts = sortsProp ?? internalSorts;
   const filters = filtersProp ?? internalFilters;
   const [page, setPage] = useState(() => urlInitial.page ?? 0);
-  const controlledSig = sortsProp !== void 0 || filtersProp !== void 0 ? JSON.stringify([sortsProp ?? null, filtersProp ?? null]) : null;
+  const controlledSig = sortsProp !== void 0 || filtersProp !== void 0 || pageSizeProp !== void 0 ? JSON.stringify([sortsProp ?? null, filtersProp ?? null, String(pageSizeProp)]) : null;
   const [seenControlledSig, setSeenControlledSig] = useState(controlledSig);
   if (seenControlledSig !== controlledSig) {
     setSeenControlledSig(controlledSig);
     setPage(0);
   }
-  const [pageSize, setPageSize] = useState(() => {
-    if (urlInitial.pageSize !== void 0) return urlInitial.pageSize;
-    if (initial.pageSize === "all") return Infinity;
-    if (typeof initial.pageSize === "number" && initial.pageSize > 0) return initial.pageSize;
-    return defaultPageSize;
-  });
+  const [internalPageSize, setPageSize] = useState(
+    () => urlInitial.pageSize !== void 0 ? urlInitial.pageSize : storedPageSize(initial, defaultPageSize)
+  );
+  const pageSize = pageSizeProp ?? internalPageSize;
   const [widths, setWidths] = useState(() => initial.widths ?? {});
   const [hiddenCols, setHiddenCols] = useState(() => new Set(initial.hidden ?? []));
   const [showSettings, setShowSettings] = useState(false);
@@ -196,6 +201,45 @@ function useTableState({
     headRefs
   };
 }
+function useSharedTableView({
+  active,
+  storageKey,
+  storageKeyPrefix,
+  defaultPageSize
+}) {
+  const providerPrefix = useKitTableStorageKeyPrefix();
+  const prefix = storageKeyPrefix ?? providerPrefix ?? DEFAULT_PERSIST_PREFIX;
+  const read = () => {
+    const stored = active ? loadPersisted(storageKey, prefix) : {};
+    return { sorts: normalizeSorts(stored.sort), pageSize: storedPageSize(stored, defaultPageSize) };
+  };
+  const [view, setView] = useState(read);
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
+    if (active) setView(read());
+  }
+  const change = (patch) => {
+    const next = { ...view, ...patch };
+    setView(next);
+    if (!active || !storageKey) return;
+    const stored = loadPersisted(storageKey, prefix);
+    const blob = {
+      sort: next.sorts,
+      filters: stored.filters ?? {},
+      pageSize: next.pageSize === Infinity ? "all" : next.pageSize,
+      widths: stored.widths,
+      hidden: stored.hidden
+    };
+    writeStored(prefix + storageKey, serializePersisted(blob));
+  };
+  return {
+    sorts: view.sorts,
+    setSorts: (sorts) => change({ sorts }),
+    pageSize: view.pageSize,
+    setPageSize: (pageSize) => change({ pageSize })
+  };
+}
 function useTableUrlState({
   columns,
   defaultPageSize = 25,
@@ -273,6 +317,7 @@ function useTableUrlState({
 export {
   DEFAULT_PERSIST_PREFIX,
   readTableUrlState,
+  useSharedTableView,
   useTableState,
   useTableUrlState
 };