@eifi1/ui-kit 0.7.1 → 0.8.0

package/dist/components/tree-view.js

@@ -0,0 +1,376 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
+import { Spinner } from "./ui.js";
+const DEFAULT_INDENT = 16;
+const CHEVRON = 16;
+const ROW_PAD = 4;
+function TreeRow({
+  level,
+  expanded,
+  onToggle,
+  toggleLabel,
+  label,
+  icon,
+  trailing,
+  indent = DEFAULT_INDENT,
+  guides = true,
+  selected,
+  loading,
+  children,
+  className,
+  style,
+  ...rest
+}) {
+  const labelId = useId();
+  const depth = Math.max(0, level - 1);
+  const expandable = expanded !== void 0;
+  const chevron = /* @__PURE__ */ jsx(
+    ChevronRight,
+    {
+      "aria-hidden": true,
+      className: cn(
+        "size-4 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
+        expanded && "rotate-90 rtl:-rotate-90"
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-tree-row": "",
+      "data-selected": selected || void 0,
+      style: { paddingInlineStart: ROW_PAD + depth * indent, ...style },
+      className: cn(
+        "relative flex min-h-8 items-center gap-1.5 rounded pe-2 text-sm",
+        selected ? "bg-[var(--bg-active)] font-medium text-[var(--text-primary)]" : "text-[var(--text-secondary)]",
+        className
+      ),
+      children: [
+        guides && Array.from({ length: depth }, (_, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-tree-guide": "",
+            className: "pointer-events-none absolute inset-y-0 w-px bg-[var(--border)]",
+            style: { insetInlineStart: ROW_PAD + i * indent + CHEVRON / 2 }
+          },
+          i
+        )),
+        loading ? /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-3 border" }) }) : expandable && onToggle ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": expanded,
+            "aria-label": toggleLabel,
+            "aria-labelledby": toggleLabel ? void 0 : labelId,
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggle();
+            },
+            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)]",
+            children: chevron
+          }
+        ) : expandable ? /* @__PURE__ */ jsx("span", { "data-tree-toggle": "", className: "flex size-4 shrink-0 cursor-pointer items-center justify-center text-[var(--text-muted)]", children: chevron }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-4 shrink-0" }),
+        children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: icon }),
+          /* @__PURE__ */ jsx("span", { id: labelId, "data-tree-label": "", className: "min-w-0 flex-1 truncate", children: label }),
+          trailing !== void 0 && trailing !== null && /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-[var(--text-muted)]", children: trailing })
+        ] })
+      ]
+    }
+  );
+}
+const isExpandable = (n) => Boolean(n.children?.length || n.hasChildren);
+function useControllable(value, initial) {
+  const [own, setOwn] = useState(initial);
+  const controlled = value !== void 0;
+  const set = (next) => {
+    if (!controlled) setOwn(next);
+  };
+  return [controlled ? value : own, set];
+}
+const TYPEAHEAD_MS = 500;
+function TreeView({
+  items,
+  expanded: expandedProp,
+  defaultExpanded,
+  onExpandedChange,
+  selected: selectedProp,
+  defaultSelected,
+  onSelectedChange,
+  selectionMode = "single",
+  renderItem,
+  loadChildren,
+  indent = DEFAULT_INDENT,
+  indentGuides = true,
+  rowClassName,
+  className,
+  onKeyDown,
+  onClick,
+  ...rest
+}) {
+  const [expandedList, setExpandedOwn] = useControllable(
+    expandedProp,
+    defaultExpanded ?? []
+  );
+  const [selected, setSelectedOwn] = useControllable(
+    selectedProp,
+    defaultSelected ?? null
+  );
+  const expandedSet = useMemo(() => new Set(expandedList), [expandedList]);
+  const [loading, setLoading] = useState(() => /* @__PURE__ */ new Set());
+  const [focusedId, setFocusedId] = useState(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const pendingFocus = useRef(null);
+  const typeahead = useRef({ text: "", at: 0 });
+  const baseId = useId();
+  const { byId, visible } = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const rows = [];
+    const walk = (nodes, level, parentId, shown) => {
+      for (const node of nodes) {
+        const flat = { node, level, parentId };
+        map.set(node.id, flat);
+        if (shown) rows.push(flat);
+        if (node.children) walk(node.children, level + 1, node.id, shown && expandedSet.has(node.id));
+      }
+    };
+    walk(items, 1, null, true);
+    return { byId: map, visible: rows };
+  }, [items, expandedSet]);
+  const visibleIds = useMemo(() => new Set(visible.map((f) => f.node.id)), [visible]);
+  const nearestVisible = (id) => {
+    let cur = id;
+    while (cur && !visibleIds.has(cur)) cur = byId.get(cur)?.parentId ?? null;
+    return cur;
+  };
+  const tabbable = nearestVisible(focusedId) ?? nearestVisible(selected) ?? visible[0]?.node.id ?? null;
+  useEffect(() => {
+    const id = pendingFocus.current;
+    if (!id) return;
+    pendingFocus.current = null;
+    itemRefs.current.get(id)?.focus();
+  });
+  const focusRow = (id) => {
+    setFocusedId(id);
+    pendingFocus.current = id;
+    itemRefs.current.get(id)?.focus();
+  };
+  const setExpanded = (next) => {
+    const list = [...next];
+    setExpandedOwn(list);
+    onExpandedChange?.(list);
+  };
+  const open = (node) => {
+    if (expandedSet.has(node.id) || !isExpandable(node)) return;
+    const next = new Set(expandedSet);
+    next.add(node.id);
+    setExpanded(next);
+    if (loadChildren && node.hasChildren && !node.children?.length) {
+      const pending = loadChildren(node);
+      if (pending && typeof pending.then === "function") {
+        setLoading((s) => new Set(s).add(node.id));
+        const done = () => setLoading((s) => {
+          const n = new Set(s);
+          n.delete(node.id);
+          return n;
+        });
+        pending.then(done, done);
+      }
+    }
+  };
+  const close = (node) => {
+    if (!expandedSet.has(node.id)) return;
+    const next = new Set(expandedSet);
+    next.delete(node.id);
+    setExpanded(next);
+  };
+  const toggle = (node) => expandedSet.has(node.id) ? close(node) : open(node);
+  const select = (node) => {
+    if (node.disabled) return;
+    if (selectionMode === "none") {
+      toggle(node);
+      return;
+    }
+    setSelectedOwn(node.id);
+    onSelectedChange?.(node.id, node);
+  };
+  const idOf = (target) => target?.closest?.('[role="treeitem"]')?.dataset.treeId ?? null;
+  const textOf = (flat) => {
+    if (flat.node.textValue !== void 0) return flat.node.textValue;
+    if (typeof flat.node.label === "string") return flat.node.label;
+    const row = itemRefs.current.get(flat.node.id)?.querySelector("[data-tree-row]");
+    return row?.textContent ?? "";
+  };
+  const findByText = (fromIndex, text) => {
+    const needle = text.toLocaleLowerCase();
+    for (let i = 1; i <= visible.length; i++) {
+      const flat = visible[(fromIndex + i) % visible.length];
+      if (textOf(flat).trim().toLocaleLowerCase().startsWith(needle)) return flat.node.id;
+    }
+    return null;
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    const id = idOf(e.target);
+    const flat = id ? byId.get(id) : void 0;
+    if (!flat) return;
+    const { node } = flat;
+    const index = visible.findIndex((f) => f.node.id === node.id);
+    const expandedNow = expandedSet.has(node.id);
+    const step = horizontalStep(e.key, e.target);
+    const inRun = Date.now() - typeahead.current.at < TYPEAHEAD_MS && typeahead.current.text !== "";
+    const key = e.key === " " && inRun ? "typeahead" : e.key;
+    let handled = true;
+    if (step === 1) {
+      if (!isExpandable(node)) handled = false;
+      else if (!expandedNow) open(node);
+      else if (node.children?.length) focusRow(node.children[0].id);
+    } else if (step === -1) {
+      if (expandedNow) close(node);
+      else if (flat.parentId) focusRow(flat.parentId);
+      else handled = false;
+    } else {
+      switch (key) {
+        case "ArrowDown":
+          if (index < visible.length - 1) focusRow(visible[index + 1].node.id);
+          break;
+        case "ArrowUp":
+          if (index > 0) focusRow(visible[index - 1].node.id);
+          break;
+        case "Home":
+          if (visible.length) focusRow(visible[0].node.id);
+          break;
+        case "End":
+          if (visible.length) focusRow(visible[visible.length - 1].node.id);
+          break;
+        case "Enter":
+        case " ":
+          select(node);
+          break;
+        case "*": {
+          const siblings = flat.parentId ? byId.get(flat.parentId)?.node.children ?? [] : items;
+          const next = new Set(expandedSet);
+          for (const s of siblings) if (isExpandable(s)) next.add(s.id);
+          setExpanded(next);
+          break;
+        }
+        default: {
+          const printable = e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+          if (!printable) {
+            handled = false;
+            break;
+          }
+          const now = Date.now();
+          const run = now - typeahead.current.at < TYPEAHEAD_MS ? typeahead.current.text : "";
+          typeahead.current = { text: run + e.key, at: now };
+          const typed = typeahead.current.text;
+          const repeated = typed.length > 1 && [...typed].every((c) => c === typed[0]);
+          const target = repeated ? findByText(index, typed[0]) : typed.length > 1 && textOf(flat).trim().toLocaleLowerCase().startsWith(typed.toLocaleLowerCase()) ? node.id : findByText(index, typed);
+          if (target) focusRow(target);
+        }
+      }
+    }
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const handleClick = (e) => {
+    onClick?.(e);
+    const id = idOf(e.target);
+    const flat = id ? byId.get(id) : void 0;
+    if (!flat) return;
+    const control = e.target.closest("button, a[href], input, select, textarea");
+    if (control && itemRefs.current.get(flat.node.id)?.contains(control)) return;
+    setFocusedId(flat.node.id);
+    if (e.target.closest("[data-tree-toggle]")) {
+      toggle(flat.node);
+      return;
+    }
+    select(flat.node);
+  };
+  const renderNodes = (nodes, level, path) => nodes.map((node, i) => {
+    const rowId = `${baseId}-${path}${i}`;
+    const expandable = isExpandable(node);
+    const isOpen = expandable && expandedSet.has(node.id);
+    const isSelected = selectionMode !== "none" && selected === node.id;
+    const isLoading = loading.has(node.id);
+    const state = {
+      level,
+      expanded: isOpen,
+      selected: isSelected,
+      expandable,
+      loading: isLoading,
+      disabled: Boolean(node.disabled)
+    };
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref: (el) => {
+          if (el) itemRefs.current.set(node.id, el);
+          else itemRefs.current.delete(node.id);
+        },
+        role: "treeitem",
+        "data-tree-id": node.id,
+        "aria-labelledby": rowId,
+        "aria-level": level,
+        "aria-expanded": expandable ? isOpen : void 0,
+        "aria-selected": selectionMode === "none" ? void 0 : isSelected,
+        "aria-disabled": node.disabled || void 0,
+        "aria-busy": isLoading || void 0,
+        tabIndex: node.id === tabbable ? 0 : -1,
+        onFocus: (e) => {
+          if (e.target === e.currentTarget) setFocusedId(node.id);
+        },
+        className: "outline-none [&:focus-visible>[data-tree-row]]:ring-2 [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]",
+        children: [
+          /* @__PURE__ */ jsx(
+            TreeRow,
+            {
+              id: rowId,
+              level,
+              expanded: expandable ? isOpen : void 0,
+              label: node.label,
+              icon: node.icon,
+              trailing: node.trailing,
+              indent,
+              guides: indentGuides,
+              selected: isSelected,
+              loading: isLoading,
+              className: cn(
+                node.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-[var(--bg-hover)]",
+                rowClassName
+              ),
+              children: renderItem ? renderItem(node, state) : void 0
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx("ul", { role: "group", children: node.children?.length ? renderNodes(node.children, level + 1, `${path}${i}-`) : null })
+        ]
+      },
+      node.id
+    );
+  });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...rest,
+      role: "tree",
+      onKeyDown: handleKeyDown,
+      onClick: handleClick,
+      className: cn("flex flex-col text-sm", className),
+      children: renderNodes(items, 1, "")
+    }
+  );
+}
+export {
+  TreeRow,
+  TreeView
+};
+//# sourceMappingURL=tree-view.js.map

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":"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","names":[]}