@eifi1/ui-kit 0.7.0 → 0.8.0

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

@@ -0,0 +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\";\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=\"flex size-4 shrink-0 items-center justify-center rounded text-[var(--text-muted)] outline-none hover:text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\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-2 [&: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":[]}

package/dist/components/treemap.d.ts

@@ -23,8 +23,13 @@ interface TreemapNode {
     /** Overrides the by-index palette colour for this tile — e.g. to paint every child
      *  in its parent group's colour, so the groups stay legible in one picture. A
      *  concrete `#rrggbb` keeps the label ink measured; anything else (a CSS var) gets
-     *  `currentColor` ink, because there is nothing to measure. */
+     *  `currentColor` ink, because there is nothing to measure — set `labelColor` then. */
     fill?: string;
+    /** The label's ink, for a `fill` the kit cannot measure (a `var()` or `color-mix()`):
+     *  keksdose's recency plot fills with `color-mix(in srgb, var(--chart-1) N%,
+     *  transparent)`, where `currentColor` put dark page text on full-strength indigo
+     *  (~1.5:1). Wins over the measured ink when given. */
+    labelColor?: string;
 }
 /**
  * Everything a `<div>` takes reaches the chart's root (`ChartContainer`), so a test id
@@ -100,6 +105,8 @@ interface TreemapCellProps {
     height?: number;
     name?: string;
     fill?: string;
+    /** See {@link TreemapNode.labelColor}; recharts hands each node's fields to its cell. */
+    labelColor?: string;
     id?: string;
     onNodeClick?: (id: string, name: string) => void;
     redactNames?: boolean;
@@ -120,7 +127,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, id, onNodeClick, redactNames, nodeNote, dir, }: TreemapCellProps): react.JSX.Element | null;
+declare function TreemapCell({ depth, x, y, width, height, name, fill, labelColor, id, onNodeClick, redactNames, nodeNote, dir, }: TreemapCellProps): 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

package/dist/components/treemap.js

@@ -44,6 +44,7 @@ function TreemapCell({
   height = 0,
   name,
   fill,
+  labelColor,
   id,
   onNodeClick,
   redactNames,
@@ -56,7 +57,7 @@ function TreemapCell({
   const pw = Math.round(width);
   const ph = Math.round(height);
   const tileFill = fill ?? "var(--chart-1)";
-  const ink = textOn(tileFill);
+  const ink = labelColor ?? textOn(tileFill);
   const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? "", pw, LABEL_FONT_SIZE) : null;
   const rawNote = id != null && nodeNote ? nodeNote(id) : void 0;
   const note = label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;

package/dist/components/treemap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/treemap.tsx"],"sourcesContent":["// A tile chart (\"treemap\"): one rectangle per node, its AREA the node's share of what\n// is drawn. Lifted out of keksdose's reports, where five cards drew it (spending by\n// group and by category, net worth by account and by type, allocation, payees, food\n// groups) — every domain word is gone and every string it could print is a prop.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and the\n// kit's own ink rule (`textOn`), so it re-skins with the palette like every other\n// chart. The one thing it cannot take from a CSS var is the tile colour: the label ink\n// is MEASURED against the fill, and a `var(--chart-3)` string measures as nothing — see\n// `useChartTokenHex` below for how the concrete hex is found instead.\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Treemap as RechartsTreemap } from \"recharts\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { PALETTE_HEX, textOn } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\nimport { dirOf, type Direction } from \"../lib/direction\";\n\n/**\n * One tile.\n *\n * `value`, not keksdose's `total`: a treemap's areas are not always money (keksdose\n * already sizes one by transaction COUNT), and `value` is the word every other chart\n * in recharts uses for the number a mark is sized by. Migrating is a rename at the\n * mapping step — `{ id, name, value: row.total }`.\n */\nexport interface TreemapNode {\n  /** Stable key, handed back by {@link TreemapProps.onNodeClick} and\n   *  {@link TreemapProps.nodeNote}. Names can collide; ids must not. */\n  id: string;\n  name: string;\n  /** The tile's area. A node whose value is not a positive finite number is NOT\n   *  drawn — an area cannot be negative, and recharts lays a negative size out as\n   *  nonsense rather than refusing it. Saying so is the caller's job: a group that\n   *  vanishes silently between two views of the same data is a bug report. */\n  value: number;\n  /** Overrides the by-index palette colour for this tile — e.g. to paint every child\n   *  in its parent group's colour, so the groups stay legible in one picture. A\n   *  concrete `#rrggbb` keeps the label ink measured; anything else (a CSS var) gets\n   *  `currentColor` ink, because there is nothing to measure. */\n  fill?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root (`ChartContainer`), so a test id\n * or a `data-tour` anchor can find it. `children` is the chart's own.\n */\nexport interface TreemapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  data: TreemapNode[];\n  /**\n   * Formats a node's value in the tooltip. Handed the node's SHARE of what is drawn\n   * (0–1) as a second argument, because a tile is read for how big it is relative to\n   * the rest, and \"€412.30\" alone makes the reader estimate that ratio off the areas.\n   * The share is `undefined` when the drawn total is not positive.\n   *\n   * Default: the bare number through `Intl.NumberFormat` in the runtime's locale. A\n   * host that has a currency or a locale passes this — the kit knows neither.\n   */\n  valueFormatter?: (value: number, share: number | undefined) => ReactNode;\n  /** Chart height in px. Default 320. */\n  height?: number;\n  /** A tile was activated — by click, or by Enter/Space on a focused tile. Setting\n   *  this makes every tile a focusable `role=\"button\"` named by its node name. */\n  onNodeClick?: (id: string, name: string) => void;\n  /**\n   * The node names are the user's own data (payees, not categories): the tile labels\n   * and the whole tooltip bubble get `data-private`, the same attribute the kit's\n   * `Tooltip redact` and `ChartTooltipContent`'s value cell carry, so the host's one\n   * privacy rule reaches them. Off by default — a category name is a label of the app.\n   */\n  redactNames?: boolean;\n  /**\n   * A second, smaller line under a tile's label — one extra figure per node that the\n   * name cannot carry (a year-on-year `+12%`, `new`). Return `undefined` for a node\n   * with nothing to add. Never tagged `data-private`: a ratio reveals no amount.\n   *\n   * ON THE TILE rather than in the tooltip, for two reasons. The tooltip identifies a\n   * node by name or by raw value, so a per-node note would be keyed on an amount (two\n   * nodes of equal size would swap notes). And a tooltip is a pointer affordance: a\n   * phone never hovers, so a figure that only exists on hover does not exist there.\n   */\n  nodeNote?: (id: string) => string | undefined;\n  /**\n   * Draw at most this many tiles (the first N drawable nodes, in the order given —\n   * sort first). Unbounded by default. A tile under ~44x20px has no room for a label,\n   * and a map made of unlabelled rectangles answers nothing; around 24 is where the\n   * smallest tile of a skewed series reaches that floor on a phone-width card. The\n   * caller owns the \"N more not shown\" line, since it knows how many it passed.\n   */\n  maxTiles?: number;\n  /**\n   * The categorical ramp tiles take by index, as concrete hex. Default: the page's\n   * live `--chart-1…9` tokens (see `useChartTokenHex`). Pass one when the host\n   * already holds the active palette — e.g. `createPaletteStore`'s `useChartHex()` —\n   * so a caller colouring a legend beside the map is guaranteed the same list.\n   */\n  colors?: readonly string[];\n}\n\n// ── The categorical ramp, as concrete hex ──────────────────────────────────\n//\n// The label ink is measured against the tile's fill, so the fill has to be a colour\n// and not a reference to one. keksdose read it from its palette STORE, which is an\n// app object the kit cannot import. What the kit does own is the token layer: whether\n// a palette arrives through `applyTokenSet` (inline properties on <html>) or through\n// tokens.css (`:root` / `.dark`), the resolved `--chart-N` on <html> is the colour\n// every other chart on the page is being painted with. So that is what is read, and\n// re-read whenever <html>'s class or style changes — which is exactly when a theme\n// toggle or a palette switch lands.\n\nconst CHART_TOKENS = 9;\n\n/** The resolved ramp, joined into ONE string so `useSyncExternalStore` compares a\n *  primitive: a fresh array per read would never be `Object.is`-equal to the last and\n *  would re-render forever. */\nfunction readChartTokens(): string {\n  const root = document.documentElement;\n  const fallback = root.classList.contains(\"dark\") ? PALETTE_HEX.dark : PALETTE_HEX.light;\n  const style = getComputedStyle(root);\n  return Array.from({ length: CHART_TOKENS }, (_, i) => {\n    const v = style.getPropertyValue(`--chart-${i + 1}`).trim();\n    // An unresolved token (a host that never loaded tokens.css, a test DOM) falls\n    // back to the built-in ramp for the current theme rather than to no colour.\n    return parseHex(v) ? v : fallback[i];\n  }).join(\",\");\n}\n\nfunction subscribeChartTokens(onChange: () => void): () => void {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"style\", \"data-theme\"],\n  });\n  return () => observer.disconnect();\n}\n\nconst SERVER_TOKENS = PALETTE_HEX.light.join(\",\");\n\nfunction useChartTokenHex(): string[] {\n  const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);\n  return joined.split(\",\");\n}\n\n// ── Tile ──────────────────────────────────────────────────────────────────\n\nconst LABEL_FONT_SIZE = 12;\n/** The optional second line, a step down from the name so the tile reads name-first. */\nconst NOTE_FONT_SIZE = 11;\n\n/**\n * Fit a label to its tile: the text itself when it fits, an ellipsised head when it\n * does not, `null` when not even three characters would. Without this a long name ran\n * on across its neighbours and collided with THEIR labels. 0.58em is the average\n * advance of a UI sans at this weight; it only needs to be close, since the tile keeps\n * 6px of padding either side. The full name stays in the tooltip.\n */\nexport function fitLabel(name: string, boxWidth: number, fontSize: number): string | null {\n  const max = Math.floor((boxWidth - 12) / (fontSize * 0.58));\n  if (max < 3) return null;\n  return name.length <= max ? name : `${name.slice(0, max - 1).trimEnd()}…`;\n}\n\n/** What recharts hands a `content` element for each node, plus the three options the\n *  chart forwards. Everything optional because recharts clones the element it was\n *  given and fills the geometry in — the element as written carries only the options. */\nexport interface TreemapCellProps {\n  depth?: number;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  name?: string;\n  fill?: string;\n  id?: string;\n  onNodeClick?: (id: string, name: string) => void;\n  redactNames?: boolean;\n  nodeNote?: (id: string) => string | undefined;\n  /** The page's reading direction, which `Treemap` reads off its own root. In `rtl`\n   *  the label stands in the tile's top RIGHT corner and is shaped right-to-left, so a\n   *  clipped name ends in its ellipsis on the reading end. Default `ltr`. */\n  dir?: Direction;\n}\n\n/**\n * One tile. Exported so a caller drawing its own recharts `<Treemap>` gets the same\n * label rules.\n *\n * recharts' default cell inherits the chart-level `stroke`, an SVG presentation\n * attribute that lands on the `<svg>` root and cascades into the label — so the glyphs\n * were painted with a 1px outline ON TOP of themselves, which reads as blur. This cell\n * draws its own label with a halo in the TILE colour painted BEHIND the fill\n * (`paint-order: stroke`), which defeats any inherited stroke and keeps the text solid\n * where it overlaps a lighter or darker part of its own tile.\n */\nexport function TreemapCell({\n  depth,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  fill,\n  id,\n  onNodeClick,\n  redactNames,\n  nodeNote,\n  dir = \"ltr\",\n}: TreemapCellProps) {\n  // Depth 0 is recharts' synthetic root, which spans the whole chart.\n  if (!depth) return null;\n  // Whole pixels: a rect on a half pixel renders its edge across two half-lit\n  // columns, and the text baseline inherits that blur.\n  const px = Math.round(x);\n  const py = Math.round(y);\n  const pw = Math.round(width);\n  const ph = Math.round(height);\n  const tileFill = fill ?? \"var(--chart-1)\";\n  const ink = textOn(tileFill);\n  // Below ~44x20 there is no room for a readable word, so no label at all rather than\n  // a one-letter stub bleeding over the tile edge.\n  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? \"\", pw, LABEL_FONT_SIZE) : null;\n  // Only under a label that is itself drawn — a stray \"+12%\" on an unnamed rectangle\n  // names nothing — and only where a second baseline fits: the note's baseline sits\n  // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under\n  // the note that the label keeps under itself at the 20px floor.\n  const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;\n  const note =\n    label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;\n  // The label's START edge, 6px in from the tile's. The tiles themselves are laid out\n  // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is\n  // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then\n  // the right end in RTL, and the label grows leftwards from the tile's right edge.\n  const textX = dir === \"rtl\" ? px + pw - 6 : px + 6;\n  const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? \"\") : undefined;\n  const onKeyDown = activate\n    ? (e: KeyboardEvent<SVGGElement>) => {\n        if (e.key !== \"Enter\" && e.key !== \" \") return;\n        e.preventDefault();\n        activate();\n      }\n    : undefined;\n  return (\n    <g\n      onClick={activate}\n      onKeyDown={onKeyDown}\n      // A clickable tile is a button to a keyboard and a screen reader too; the\n      // drilldown it opens was mouse-only in the app this came from. Named by the node\n      // name, which is also why the group carries `data-private` under `redactNames`.\n      role={activate ? \"button\" : undefined}\n      tabIndex={activate ? 0 : undefined}\n      aria-label={activate ? name : undefined}\n      data-private={activate && redactNames ? \"\" : undefined}\n      cursor={activate ? \"pointer\" : undefined}\n      // CSS beats a presentation attribute, so this recolours the rect's own stroke\n      // for as long as the tile has keyboard focus.\n      className={activate ? \"outline-none [&:focus-visible>rect]:stroke-[var(--brand)]\" : undefined}\n    >\n      {/* The 2px gutter is the card showing through, not a white grid — on a dark\n          surface white lines glare harder than the tiles. */}\n      <rect\n        x={px}\n        y={py}\n        width={pw}\n        height={ph}\n        fill={tileFill}\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rx={3}\n      />\n      {label != null && (\n        <text\n          // A plain attribute, so the host's `[data-private]` rule reaches an SVG\n          // <text> exactly as it reaches a table cell.\n          data-private={redactNames ? \"\" : undefined}\n          x={textX}\n          y={py + 15}\n          direction={dir}\n          fill={ink}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={LABEL_FONT_SIZE}\n          fontWeight={600}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {label}\n        </text>\n      )}\n      {note != null && (\n        <text\n          x={textX}\n          y={py + 29}\n          direction={dir}\n          fill={ink}\n          fillOpacity={0.85}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={NOTE_FONT_SIZE}\n          fontWeight={500}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {note}\n        </text>\n      )}\n    </g>\n  );\n}\n\n// ── Chart ─────────────────────────────────────────────────────────────────\n\n// Nodes carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed.\nconst TREEMAP_CONFIG: ChartConfig = {};\n\n/**\n * The shared tooltip with the whole bubble tagged `data-private`, for names that are\n * the user's own data.\n *\n * The bubble, not just the name: `ChartTooltipContent` prints the name either from\n * `item.name` or from a config `label`, and only the config route could be tagged — but\n * a config entry keyed by a payee name is not a CSS identifier, and `ChartStyle` would\n * (rightly) refuse it. The bubble holds the name and the value, and the value cell is\n * already `data-private`, so tagging the wrapper hides nothing extra.\n *\n * recharts CLONES the `content` element to inject `active`/`payload`, so this has to BE\n * that element — a `<div>` wrapped around `<ChartTooltipContent />` in the JSX would\n * take those props itself and hand the tooltip nothing.\n */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\nconst DEFAULT_NUMBER = new Intl.NumberFormat();\n\n/**\n * Tile chart: one rectangle per {@link TreemapNode}, sized by `value`, coloured by\n * index from the chart ramp (or by the node's own `fill`), labelled in whichever of the\n * kit's two inks measures better against it. Hover shows the name and the formatted\n * value; `onNodeClick` turns the tiles into buttons.\n *\n * Renders nothing when no node has a positive value — an empty box is a hole in the\n * card, and the caller's own sentence is the better answer there.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function Treemap({\n  data,\n  valueFormatter,\n  height = 320,\n  onNodeClick,\n  redactNames = false,\n  nodeNote,\n  maxTiles,\n  colors,\n  style,\n  ...rest\n}: TreemapProps) {\n  const tokenHex = useChartTokenHex();\n  // Read off the DOM after mount: the `dir` a treemap sits under is an ancestor's\n  // attribute, and SVG text anchoring cannot follow it by CSS (see TreemapCell). Again\n  // on new data, because a map that had nothing to draw rendered no root to read.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  useLayoutEffect(() => {\n    setDir(dirOf(rootRef.current));\n  }, [data]);\n  const ramp = colors && colors.length > 0 ? colors : tokenHex;\n  // Coloured by index into `data` AS GIVEN, before anything is dropped: a caller\n  // painting a legend or a second map from the same list must land on the same hue\n  // for the same row, and filtering first would shift every colour after a gap.\n  const nodes = data\n    .map((d, idx) => ({\n      id: d.id,\n      name: d.name,\n      size: d.value,\n      fill: d.fill ?? ramp[idx % ramp.length],\n    }))\n    .filter((n) => Number.isFinite(n.size) && n.size > 0)\n    .slice(0, maxTiles ?? undefined);\n  if (nodes.length === 0) return null;\n\n  // The share is of what is DRAWN, so it always reads as \"of this picture\".\n  const total = nodes.reduce((acc, n) => acc + n.size, 0);\n  const format = (v: number): ReactNode => {\n    const share = total > 0 ? v / total : undefined;\n    return valueFormatter ? valueFormatter(v, share) : DEFAULT_NUMBER.format(v);\n  };\n  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;\n  return (\n    <ChartContainer {...rest} ref={rootRef} config={TREEMAP_CONFIG} style={{ ...style, height }}>\n      {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where\n          it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}\n      <RechartsTreemap\n        data={nodes}\n        dataKey=\"size\"\n        fill=\"var(--chart-1)\"\n        isAnimationActive={false}\n        content={\n          <TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />\n        }\n      >\n        <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />\n      </RechartsTreemap>\n    </ChartContainer>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/treemap.tsx"],"sourcesContent":["// A tile chart (\"treemap\"): one rectangle per node, its AREA the node's share of what\n// is drawn. Lifted out of keksdose's reports, where five cards drew it (spending by\n// group and by category, net worth by account and by type, allocation, payees, food\n// groups) — every domain word is gone and every string it could print is a prop.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and the\n// kit's own ink rule (`textOn`), so it re-skins with the palette like every other\n// chart. The one thing it cannot take from a CSS var is the tile colour: the label ink\n// is MEASURED against the fill, and a `var(--chart-3)` string measures as nothing — see\n// `useChartTokenHex` below for how the concrete hex is found instead.\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Treemap as RechartsTreemap } from \"recharts\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { PALETTE_HEX, textOn } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\nimport { dirOf, type Direction } from \"../lib/direction\";\n\n/**\n * One tile.\n *\n * `value`, not keksdose's `total`: a treemap's areas are not always money (keksdose\n * already sizes one by transaction COUNT), and `value` is the word every other chart\n * in recharts uses for the number a mark is sized by. Migrating is a rename at the\n * mapping step — `{ id, name, value: row.total }`.\n */\nexport interface TreemapNode {\n  /** Stable key, handed back by {@link TreemapProps.onNodeClick} and\n   *  {@link TreemapProps.nodeNote}. Names can collide; ids must not. */\n  id: string;\n  name: string;\n  /** The tile's area. A node whose value is not a positive finite number is NOT\n   *  drawn — an area cannot be negative, and recharts lays a negative size out as\n   *  nonsense rather than refusing it. Saying so is the caller's job: a group that\n   *  vanishes silently between two views of the same data is a bug report. */\n  value: number;\n  /** Overrides the by-index palette colour for this tile — e.g. to paint every child\n   *  in its parent group's colour, so the groups stay legible in one picture. A\n   *  concrete `#rrggbb` keeps the label ink measured; anything else (a CSS var) gets\n   *  `currentColor` ink, because there is nothing to measure — set `labelColor` then. */\n  fill?: string;\n  /** The label's ink, for a `fill` the kit cannot measure (a `var()` or `color-mix()`):\n   *  keksdose's recency plot fills with `color-mix(in srgb, var(--chart-1) N%,\n   *  transparent)`, where `currentColor` put dark page text on full-strength indigo\n   *  (~1.5:1). Wins over the measured ink when given. */\n  labelColor?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root (`ChartContainer`), so a test id\n * or a `data-tour` anchor can find it. `children` is the chart's own.\n */\nexport interface TreemapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  data: TreemapNode[];\n  /**\n   * Formats a node's value in the tooltip. Handed the node's SHARE of what is drawn\n   * (0–1) as a second argument, because a tile is read for how big it is relative to\n   * the rest, and \"€412.30\" alone makes the reader estimate that ratio off the areas.\n   * The share is `undefined` when the drawn total is not positive.\n   *\n   * Default: the bare number through `Intl.NumberFormat` in the runtime's locale. A\n   * host that has a currency or a locale passes this — the kit knows neither.\n   */\n  valueFormatter?: (value: number, share: number | undefined) => ReactNode;\n  /** Chart height in px. Default 320. */\n  height?: number;\n  /** A tile was activated — by click, or by Enter/Space on a focused tile. Setting\n   *  this makes every tile a focusable `role=\"button\"` named by its node name. */\n  onNodeClick?: (id: string, name: string) => void;\n  /**\n   * The node names are the user's own data (payees, not categories): the tile labels\n   * and the whole tooltip bubble get `data-private`, the same attribute the kit's\n   * `Tooltip redact` and `ChartTooltipContent`'s value cell carry, so the host's one\n   * privacy rule reaches them. Off by default — a category name is a label of the app.\n   */\n  redactNames?: boolean;\n  /**\n   * A second, smaller line under a tile's label — one extra figure per node that the\n   * name cannot carry (a year-on-year `+12%`, `new`). Return `undefined` for a node\n   * with nothing to add. Never tagged `data-private`: a ratio reveals no amount.\n   *\n   * ON THE TILE rather than in the tooltip, for two reasons. The tooltip identifies a\n   * node by name or by raw value, so a per-node note would be keyed on an amount (two\n   * nodes of equal size would swap notes). And a tooltip is a pointer affordance: a\n   * phone never hovers, so a figure that only exists on hover does not exist there.\n   */\n  nodeNote?: (id: string) => string | undefined;\n  /**\n   * Draw at most this many tiles (the first N drawable nodes, in the order given —\n   * sort first). Unbounded by default. A tile under ~44x20px has no room for a label,\n   * and a map made of unlabelled rectangles answers nothing; around 24 is where the\n   * smallest tile of a skewed series reaches that floor on a phone-width card. The\n   * caller owns the \"N more not shown\" line, since it knows how many it passed.\n   */\n  maxTiles?: number;\n  /**\n   * The categorical ramp tiles take by index, as concrete hex. Default: the page's\n   * live `--chart-1…9` tokens (see `useChartTokenHex`). Pass one when the host\n   * already holds the active palette — e.g. `createPaletteStore`'s `useChartHex()` —\n   * so a caller colouring a legend beside the map is guaranteed the same list.\n   */\n  colors?: readonly string[];\n}\n\n// ── The categorical ramp, as concrete hex ──────────────────────────────────\n//\n// The label ink is measured against the tile's fill, so the fill has to be a colour\n// and not a reference to one. keksdose read it from its palette STORE, which is an\n// app object the kit cannot import. What the kit does own is the token layer: whether\n// a palette arrives through `applyTokenSet` (inline properties on <html>) or through\n// tokens.css (`:root` / `.dark`), the resolved `--chart-N` on <html> is the colour\n// every other chart on the page is being painted with. So that is what is read, and\n// re-read whenever <html>'s class or style changes — which is exactly when a theme\n// toggle or a palette switch lands.\n\nconst CHART_TOKENS = 9;\n\n/** The resolved ramp, joined into ONE string so `useSyncExternalStore` compares a\n *  primitive: a fresh array per read would never be `Object.is`-equal to the last and\n *  would re-render forever. */\nfunction readChartTokens(): string {\n  const root = document.documentElement;\n  const fallback = root.classList.contains(\"dark\") ? PALETTE_HEX.dark : PALETTE_HEX.light;\n  const style = getComputedStyle(root);\n  return Array.from({ length: CHART_TOKENS }, (_, i) => {\n    const v = style.getPropertyValue(`--chart-${i + 1}`).trim();\n    // An unresolved token (a host that never loaded tokens.css, a test DOM) falls\n    // back to the built-in ramp for the current theme rather than to no colour.\n    return parseHex(v) ? v : fallback[i];\n  }).join(\",\");\n}\n\nfunction subscribeChartTokens(onChange: () => void): () => void {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"style\", \"data-theme\"],\n  });\n  return () => observer.disconnect();\n}\n\nconst SERVER_TOKENS = PALETTE_HEX.light.join(\",\");\n\nfunction useChartTokenHex(): string[] {\n  const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);\n  return joined.split(\",\");\n}\n\n// ── Tile ──────────────────────────────────────────────────────────────────\n\nconst LABEL_FONT_SIZE = 12;\n/** The optional second line, a step down from the name so the tile reads name-first. */\nconst NOTE_FONT_SIZE = 11;\n\n/**\n * Fit a label to its tile: the text itself when it fits, an ellipsised head when it\n * does not, `null` when not even three characters would. Without this a long name ran\n * on across its neighbours and collided with THEIR labels. 0.58em is the average\n * advance of a UI sans at this weight; it only needs to be close, since the tile keeps\n * 6px of padding either side. The full name stays in the tooltip.\n */\nexport function fitLabel(name: string, boxWidth: number, fontSize: number): string | null {\n  const max = Math.floor((boxWidth - 12) / (fontSize * 0.58));\n  if (max < 3) return null;\n  return name.length <= max ? name : `${name.slice(0, max - 1).trimEnd()}…`;\n}\n\n/** What recharts hands a `content` element for each node, plus the three options the\n *  chart forwards. Everything optional because recharts clones the element it was\n *  given and fills the geometry in — the element as written carries only the options. */\nexport interface TreemapCellProps {\n  depth?: number;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  name?: string;\n  fill?: string;\n  /** See {@link TreemapNode.labelColor}; recharts hands each node's fields to its cell. */\n  labelColor?: string;\n  id?: string;\n  onNodeClick?: (id: string, name: string) => void;\n  redactNames?: boolean;\n  nodeNote?: (id: string) => string | undefined;\n  /** The page's reading direction, which `Treemap` reads off its own root. In `rtl`\n   *  the label stands in the tile's top RIGHT corner and is shaped right-to-left, so a\n   *  clipped name ends in its ellipsis on the reading end. Default `ltr`. */\n  dir?: Direction;\n}\n\n/**\n * One tile. Exported so a caller drawing its own recharts `<Treemap>` gets the same\n * label rules.\n *\n * recharts' default cell inherits the chart-level `stroke`, an SVG presentation\n * attribute that lands on the `<svg>` root and cascades into the label — so the glyphs\n * were painted with a 1px outline ON TOP of themselves, which reads as blur. This cell\n * draws its own label with a halo in the TILE colour painted BEHIND the fill\n * (`paint-order: stroke`), which defeats any inherited stroke and keeps the text solid\n * where it overlaps a lighter or darker part of its own tile.\n */\nexport function TreemapCell({\n  depth,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  fill,\n  labelColor,\n  id,\n  onNodeClick,\n  redactNames,\n  nodeNote,\n  dir = \"ltr\",\n}: TreemapCellProps) {\n  // Depth 0 is recharts' synthetic root, which spans the whole chart.\n  if (!depth) return null;\n  // Whole pixels: a rect on a half pixel renders its edge across two half-lit\n  // columns, and the text baseline inherits that blur.\n  const px = Math.round(x);\n  const py = Math.round(y);\n  const pw = Math.round(width);\n  const ph = Math.round(height);\n  const tileFill = fill ?? \"var(--chart-1)\";\n  const ink = labelColor ?? textOn(tileFill);\n  // Below ~44x20 there is no room for a readable word, so no label at all rather than\n  // a one-letter stub bleeding over the tile edge.\n  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? \"\", pw, LABEL_FONT_SIZE) : null;\n  // Only under a label that is itself drawn — a stray \"+12%\" on an unnamed rectangle\n  // names nothing — and only where a second baseline fits: the note's baseline sits\n  // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under\n  // the note that the label keeps under itself at the 20px floor.\n  const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;\n  const note =\n    label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;\n  // The label's START edge, 6px in from the tile's. The tiles themselves are laid out\n  // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is\n  // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then\n  // the right end in RTL, and the label grows leftwards from the tile's right edge.\n  const textX = dir === \"rtl\" ? px + pw - 6 : px + 6;\n  const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? \"\") : undefined;\n  const onKeyDown = activate\n    ? (e: KeyboardEvent<SVGGElement>) => {\n        if (e.key !== \"Enter\" && e.key !== \" \") return;\n        e.preventDefault();\n        activate();\n      }\n    : undefined;\n  return (\n    <g\n      onClick={activate}\n      onKeyDown={onKeyDown}\n      // A clickable tile is a button to a keyboard and a screen reader too; the\n      // drilldown it opens was mouse-only in the app this came from. Named by the node\n      // name, which is also why the group carries `data-private` under `redactNames`.\n      role={activate ? \"button\" : undefined}\n      tabIndex={activate ? 0 : undefined}\n      aria-label={activate ? name : undefined}\n      data-private={activate && redactNames ? \"\" : undefined}\n      cursor={activate ? \"pointer\" : undefined}\n      // CSS beats a presentation attribute, so this recolours the rect's own stroke\n      // for as long as the tile has keyboard focus.\n      className={activate ? \"outline-none [&:focus-visible>rect]:stroke-[var(--brand)]\" : undefined}\n    >\n      {/* The 2px gutter is the card showing through, not a white grid — on a dark\n          surface white lines glare harder than the tiles. */}\n      <rect\n        x={px}\n        y={py}\n        width={pw}\n        height={ph}\n        fill={tileFill}\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rx={3}\n      />\n      {label != null && (\n        <text\n          // A plain attribute, so the host's `[data-private]` rule reaches an SVG\n          // <text> exactly as it reaches a table cell.\n          data-private={redactNames ? \"\" : undefined}\n          x={textX}\n          y={py + 15}\n          direction={dir}\n          fill={ink}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={LABEL_FONT_SIZE}\n          fontWeight={600}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {label}\n        </text>\n      )}\n      {note != null && (\n        <text\n          x={textX}\n          y={py + 29}\n          direction={dir}\n          fill={ink}\n          fillOpacity={0.85}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={NOTE_FONT_SIZE}\n          fontWeight={500}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {note}\n        </text>\n      )}\n    </g>\n  );\n}\n\n// ── Chart ─────────────────────────────────────────────────────────────────\n\n// Nodes carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed.\nconst TREEMAP_CONFIG: ChartConfig = {};\n\n/**\n * The shared tooltip with the whole bubble tagged `data-private`, for names that are\n * the user's own data.\n *\n * The bubble, not just the name: `ChartTooltipContent` prints the name either from\n * `item.name` or from a config `label`, and only the config route could be tagged — but\n * a config entry keyed by a payee name is not a CSS identifier, and `ChartStyle` would\n * (rightly) refuse it. The bubble holds the name and the value, and the value cell is\n * already `data-private`, so tagging the wrapper hides nothing extra.\n *\n * recharts CLONES the `content` element to inject `active`/`payload`, so this has to BE\n * that element — a `<div>` wrapped around `<ChartTooltipContent />` in the JSX would\n * take those props itself and hand the tooltip nothing.\n */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\nconst DEFAULT_NUMBER = new Intl.NumberFormat();\n\n/**\n * Tile chart: one rectangle per {@link TreemapNode}, sized by `value`, coloured by\n * index from the chart ramp (or by the node's own `fill`), labelled in whichever of the\n * kit's two inks measures better against it. Hover shows the name and the formatted\n * value; `onNodeClick` turns the tiles into buttons.\n *\n * Renders nothing when no node has a positive value — an empty box is a hole in the\n * card, and the caller's own sentence is the better answer there.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function Treemap({\n  data,\n  valueFormatter,\n  height = 320,\n  onNodeClick,\n  redactNames = false,\n  nodeNote,\n  maxTiles,\n  colors,\n  style,\n  ...rest\n}: TreemapProps) {\n  const tokenHex = useChartTokenHex();\n  // Read off the DOM after mount: the `dir` a treemap sits under is an ancestor's\n  // attribute, and SVG text anchoring cannot follow it by CSS (see TreemapCell). Again\n  // on new data, because a map that had nothing to draw rendered no root to read.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  useLayoutEffect(() => {\n    setDir(dirOf(rootRef.current));\n  }, [data]);\n  const ramp = colors && colors.length > 0 ? colors : tokenHex;\n  // Coloured by index into `data` AS GIVEN, before anything is dropped: a caller\n  // painting a legend or a second map from the same list must land on the same hue\n  // for the same row, and filtering first would shift every colour after a gap.\n  const nodes = data\n    .map((d, idx) => ({\n      id: d.id,\n      name: d.name,\n      size: d.value,\n      fill: d.fill ?? ramp[idx % ramp.length],\n    }))\n    .filter((n) => Number.isFinite(n.size) && n.size > 0)\n    .slice(0, maxTiles ?? undefined);\n  if (nodes.length === 0) return null;\n\n  // The share is of what is DRAWN, so it always reads as \"of this picture\".\n  const total = nodes.reduce((acc, n) => acc + n.size, 0);\n  const format = (v: number): ReactNode => {\n    const share = total > 0 ? v / total : undefined;\n    return valueFormatter ? valueFormatter(v, share) : DEFAULT_NUMBER.format(v);\n  };\n  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;\n  return (\n    <ChartContainer {...rest} ref={rootRef} config={TREEMAP_CONFIG} style={{ ...style, height }}>\n      {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where\n          it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}\n      <RechartsTreemap\n        data={nodes}\n        dataKey=\"size\"\n        fill=\"var(--chart-1)\"\n        isAnimationActive={false}\n        content={\n          <TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />\n        }\n      >\n        <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />\n      </RechartsTreemap>\n    </ChartContainer>\n  );\n}\n"],"mappings":";AA0PI,SAiBE,KAjBF;AAhPJ,SAAS,iBAAiB,QAAQ,UAAU,4BAA4B;AAExE,SAAS,WAAW,uBAAuB;AAC3C,SAAS,gBAAgB,cAAc,2BAA6C;AACpF,SAAS,aAAa,cAAc;AACpC,SAAS,gBAAgB;AACzB,SAAS,aAA6B;AAmGtC,MAAM,eAAe;AAKrB,SAAS,kBAA0B;AACjC,QAAM,OAAO,SAAS;AACtB,QAAM,WAAW,KAAK,UAAU,SAAS,MAAM,IAAI,YAAY,OAAO,YAAY;AAClF,QAAM,QAAQ,iBAAiB,IAAI;AACnC,SAAO,MAAM,KAAK,EAAE,QAAQ,aAAa,GAAG,CAAC,GAAG,MAAM;AACpD,UAAM,IAAI,MAAM,iBAAiB,WAAW,IAAI,CAAC,EAAE,EAAE,KAAK;AAG1D,WAAO,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC;AAAA,EACrC,CAAC,EAAE,KAAK,GAAG;AACb;AAEA,SAAS,qBAAqB,UAAkC;AAC9D,QAAM,WAAW,IAAI,iBAAiB,QAAQ;AAC9C,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB,CAAC,SAAS,SAAS,YAAY;AAAA,EAClD,CAAC;AACD,SAAO,MAAM,SAAS,WAAW;AACnC;AAEA,MAAM,gBAAgB,YAAY,MAAM,KAAK,GAAG;AAEhD,SAAS,mBAA6B;AACpC,QAAM,SAAS,qBAAqB,sBAAsB,iBAAiB,MAAM,aAAa;AAC9F,SAAO,OAAO,MAAM,GAAG;AACzB;AAIA,MAAM,kBAAkB;AAExB,MAAM,iBAAiB;AAShB,SAAS,SAAS,MAAc,UAAkB,UAAiC;AACxF,QAAM,MAAM,KAAK,OAAO,WAAW,OAAO,WAAW,KAAK;AAC1D,MAAI,MAAM,EAAG,QAAO;AACpB,SAAO,KAAK,UAAU,MAAM,OAAO,GAAG,KAAK,MAAM,GAAG,MAAM,CAAC,EAAE,QAAQ,CAAC;AACxE;AAoCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AACR,GAAqB;AAEnB,MAAI,CAAC,MAAO,QAAO;AAGnB,QAAM,KAAK,KAAK,MAAM,CAAC;AACvB,QAAM,KAAK,KAAK,MAAM,CAAC;AACvB,QAAM,KAAK,KAAK,MAAM,KAAK;AAC3B,QAAM,KAAK,KAAK,MAAM,MAAM;AAC5B,QAAM,WAAW,QAAQ;AACzB,QAAM,MAAM,cAAc,OAAO,QAAQ;AAGzC,QAAM,QAAQ,MAAM,MAAM,MAAM,KAAK,SAAS,QAAQ,IAAI,IAAI,eAAe,IAAI;AAKjF,QAAM,UAAU,MAAM,QAAQ,WAAW,SAAS,EAAE,IAAI;AACxD,QAAM,OACJ,SAAS,QAAQ,WAAW,QAAQ,MAAM,KAAK,SAAS,SAAS,IAAI,cAAc,IAAI;AAKzF,QAAM,QAAQ,QAAQ,QAAQ,KAAK,KAAK,IAAI,KAAK;AACjD,QAAM,WAAW,MAAM,QAAQ,cAAc,MAAM,YAAY,IAAI,QAAQ,EAAE,IAAI;AACjF,QAAM,YAAY,WACd,CAAC,MAAkC;AACjC,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IAAK;AACxC,MAAE,eAAe;AACjB,aAAS;AAAA,EACX,IACA;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MAIA,MAAM,WAAW,WAAW;AAAA,MAC5B,UAAU,WAAW,IAAI;AAAA,MACzB,cAAY,WAAW,OAAO;AAAA,MAC9B,gBAAc,YAAY,cAAc,KAAK;AAAA,MAC7C,QAAQ,WAAW,YAAY;AAAA,MAG/B,WAAW,WAAW,8DAA8D;AAAA,MAIpF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACH,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAO;AAAA,YACP,aAAa;AAAA,YACb,IAAI;AAAA;AAAA,QACN;AAAA,QACC,SAAS,QACR;AAAA,UAAC;AAAA;AAAA,YAGC,gBAAc,cAAc,KAAK;AAAA,YACjC,GAAG;AAAA,YACH,GAAG,KAAK;AAAA,YACR,WAAW;AAAA,YACX,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,OAAO,EAAE,eAAe,OAAO;AAAA,YAE9B;AAAA;AAAA,QACH;AAAA,QAED,QAAQ,QACP;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACH,GAAG,KAAK;AAAA,YACR,WAAW;AAAA,YACX,MAAM;AAAA,YACN,aAAa;AAAA,YACb,QAAQ;AAAA,YACR,aAAa;AAAA,YACb,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,OAAO,EAAE,eAAe,OAAO;AAAA,YAE9B;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAMA,MAAM,iBAA8B,CAAC;AAgBrC,SAAS,uBAAuB,OAAmD;AACjF,SACE,oBAAC,SAAI,gBAAY,MACf,8BAAC,uBAAqB,GAAG,OAAO,GAClC;AAEJ;AAEA,MAAM,iBAAiB,IAAI,KAAK,aAAa;AAatC,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,WAAW,iBAAiB;AAIlC,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,kBAAgB,MAAM;AACpB,WAAO,MAAM,QAAQ,OAAO,CAAC;AAAA,EAC/B,GAAG,CAAC,IAAI,CAAC;AACT,QAAM,OAAO,UAAU,OAAO,SAAS,IAAI,SAAS;AAIpD,QAAM,QAAQ,KACX,IAAI,CAAC,GAAG,SAAS;AAAA,IAChB,IAAI,EAAE;AAAA,IACN,MAAM,EAAE;AAAA,IACR,MAAM,EAAE;AAAA,IACR,MAAM,EAAE,QAAQ,KAAK,MAAM,KAAK,MAAM;AAAA,EACxC,EAAE,EACD,OAAO,CAAC,MAAM,OAAO,SAAS,EAAE,IAAI,KAAK,EAAE,OAAO,CAAC,EACnD,MAAM,GAAG,YAAY,MAAS;AACjC,MAAI,MAAM,WAAW,EAAG,QAAO;AAG/B,QAAM,QAAQ,MAAM,OAAO,CAAC,KAAK,MAAM,MAAM,EAAE,MAAM,CAAC;AACtD,QAAM,SAAS,CAAC,MAAyB;AACvC,UAAM,QAAQ,QAAQ,IAAI,IAAI,QAAQ;AACtC,WAAO,iBAAiB,eAAe,GAAG,KAAK,IAAI,eAAe,OAAO,CAAC;AAAA,EAC5E;AACA,QAAM,UAAU,cAAc,yBAAyB;AACvD,SACE,oBAAC,kBAAgB,GAAG,MAAM,KAAK,SAAS,QAAQ,gBAAgB,OAAO,EAAE,GAAG,OAAO,OAAO,GAGxF;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,mBAAmB;AAAA,MACnB,SACE,oBAAC,eAAY,aAA0B,aAA0B,UAAoB,KAAU;AAAA,MAGjG,8BAAC,gBAAa,SAAS,oBAAC,WAAQ,WAAS,MAAC,gBAAgB,QAAQ,GAAI;AAAA;AAAA,EACxE,GACF;AAEJ;","names":[]}

package/dist/components/ui.d.ts

@@ -1,17 +1,35 @@
 import * as react from 'react';
 import { ButtonHTMLAttributes, Ref, SelectHTMLAttributes, ReactNode, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
+import { TooltipSide } from './tooltip.js';
+import '../hooks/use-anchored-rect.js';
 
-type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
+type ButtonSize = "sm" | "md";
+/** The second argument of {@link buttonClasses} in its options form. */
+interface ButtonClassesOptions {
+    /** See {@link ButtonProps.size}. */
+    size?: ButtonSize;
+    className?: string;
+}
 /**
  * Button classes for the rare case where the styling must land on a non-`<button>`
  * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix
  * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real
- * button works, prefer `<Button>`. Draws from the same base + variant maps as
+ * button works, prefer `<Button>`. Draws from the same base, size and variant maps as
  * `<Button>`, so the two stay in lockstep.
+ *
+ * The second argument is either the extra classes (the pre-0.8.0 form) or
+ * `{ size, className }` — `buttonClasses("secondary", { size: "sm" })` for keksdose's
+ * compact toolbar links.
  */
-declare function buttonClasses(variant?: ButtonVariant, className?: string): string;
+declare function buttonClasses(variant?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
+    /** `md` (default) is the page's action button. `sm` is the compact one — 12px text
+     *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a
+     *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand
+     *  there). Every variant takes either size. */
+    size?: ButtonSize;
     /** In a flex row next to a taller labelled field, fill the field's height so the
      *  two line up. No effect outside a flex row. */
     stretch?: boolean;
@@ -20,23 +38,40 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  declared here only because `ButtonHTMLAttributes` does not carry it. */
     ref?: Ref<HTMLButtonElement>;
 }
-declare function Button({ variant, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
-type IconButtonSize = "md" | "sm" | "xs" | "2xs";
+declare function Button({ variant, size, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
+type IconButtonSize = "lg" | "md" | "sm" | "xs" | "2xs";
 declare const ICON_BUTTON_TONES: {
     readonly default: "";
     readonly muted: "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
     readonly danger: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]";
+    readonly warning: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]";
+    readonly info: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]";
 };
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    /** Box size: md = 36px (matches the top bar), sm = 32px — both with a 20px icon;
+    /** Any {@link ButtonVariant}, or `overlay` — a round translucent disc for use over
+     *  an image (see `ICON_BUTTON_OVERLAY`). */
+    variant?: ButtonVariant | "overlay";
+    /** Box size: lg = 44px (a phone's touch target), md = 36px (matches the top bar),
+     *  sm = 32px — all three with a 20px icon;
      *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px
      *  icon (an action on a chip or a tab). */
     size?: IconButtonSize;
     /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on
      *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a
-     *  remove/delete that repeats down a list. Default: the variant's own colours. */
+     *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that
+     *  wants attention. `info`: sky at rest — a notice-worthy but harmless action
+     *  (keksdose's reconcile). Default: the variant's own colours. */
     tone?: keyof typeof ICON_BUTTON_TONES;
+    /**
+     * Make it a toggle button. `true` sets `aria-pressed="true"` and draws the "on" look
+     * (brand glyph on the quiet brand fill); `false` sets `aria-pressed="false"` with the
+     * normal look, so a screen reader still hears a toggle that is off. Left out, it is
+     * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller
+     * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own
+     * brand colour over a ghost button today. Keep the `aria-label` the same in both
+     * states ("Share budget"): the pressed state already says whether it is on.
+     */
+    pressed?: boolean;
     /** Keep the click (and the Enter/Space that produces it) from reaching an
      *  ancestor's handler — for an action inside a clickable table row or card.
      *
@@ -170,7 +205,9 @@ interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "child
     /** The explanation. It is both the tooltip's text and, by default, the button's
      *  accessible name, so a screen reader gets it without the bubble ever opening. */
     label: string;
-    side?: "left" | "right" | "top" | "bottom";
+    /** Default `"start"`: before the hint in the reading direction (the left in LTR, the
+     *  right in RTL). `left` / `right` stay physical. */
+    side?: TooltipSide;
 }
 declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): react.JSX.Element;
 /**
@@ -298,8 +335,18 @@ interface CardProps extends ComponentPropsWithoutRef<"div"> {
      * content cards on data pages; leave off for centered dialog/panel cards.
      */
     flush?: boolean;
+    /**
+     * `inset`: a panel INSIDE a card rather than a card on the page — the raised
+     * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since
+     * it is already sitting on the card that has them. Lenkbank's results blocks and
+     * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of
+     * their own. Unlike the default card it carries its padding, because every one of
+     * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:
+     * an inset panel never runs edge to edge.
+     */
+    variant?: "default" | "inset";
 }
-declare function Card({ className, children, flush, ...rest }: CardProps): react.JSX.Element;
+declare function Card({ className, children, flush, variant, ...rest }: CardProps): react.JSX.Element;
 /** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a
  *  `data-slot` and a padding rhythm — so each name is an alias rather than an empty
  *  interface pretending to be more. They exist so a consumer's own wrapper can say
@@ -350,11 +397,22 @@ declare function Spinner({ className, label, ...rest }: SpinnerProps): react.JSX
 interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
      *  every empty state in three apps look like the same thing — so there is no
-     *  `children` slot to put arbitrary content in. */
+     *  `children` slot to put arbitrary content in. The two slots below are the only
+     *  other things an empty state has turned out to need, and each has a fixed place. */
     title: string;
     hint?: string;
+    /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
+     *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
+     *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,
+     *  because the title already says what it shows. */
+    icon?: ReactNode;
+    /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its
+     *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they
+     *  wrap and centre as one row), kastlan's "Create a rule". Buttons or links the
+     *  caller renders; the box only places them. */
+    action?: ReactNode;
 }
-declare function EmptyState({ title, hint, className, ...rest }: EmptyStateProps): react.JSX.Element;
+declare function EmptyState({ title, hint, icon, action, className, ...rest }: EmptyStateProps): react.JSX.Element;
 /** One tab of a {@link Tabs} strip. */
 interface TabItem<T extends string> {
     id: T;
@@ -516,7 +574,27 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
     /** An add or a remove is in flight: the × and the add button are disabled and
      *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */
     busy?: boolean;
+    /**
+     * `"vertical"`: the same strip as a SIDE NAV — one item per row, the open one
+     * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation="vertical"` on
+     * the tablist. For keksdose's admin page and settings page, which each hand-built
+     * the identical sidebar with none of this strip's keyboard, roving tab stop or
+     * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,
+     * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the
+     * badge moves to the row's end.
+     *
+     * **On a phone ({@link PHONE_QUERY}) it becomes the horizontal strip**, `wrap` and
+     * all, rather than staying a column. A side nav only works beside its content; on
+     * a phone it has to go ABOVE it, and eight full-width rows there push the panel
+     * the user picked below the fold on every visit — the two keksdose pages both
+     * collapsed theirs into a scrolling row by hand for exactly that reason. The
+     * orientation is switched in JavaScript, not with `md:` classes, so the
+     * `aria-orientation` a screen reader hears and the arrow keys that work always
+     * match the layout on screen. The caller's own two-column layout has to stack at
+     * the same breakpoint (`md:grid-cols-[14rem_1fr]`).
+     */
+    orientation?: "horizontal" | "vertical";
 }
-declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
+declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };
+export { Button, type ButtonClassesOptions, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };