@eifi1/ui-kit 0.51.6 → 0.52.0

package/src/components/tabs.tsx

@@ -2,14 +2,14 @@ import { useLayoutEffect, useMemo, useRef } from "react";
 import { ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
-import { FOCUS_RING_WIDTH } from "./focus-ring";
+import { FOCUS_RING } from "./focus-ring";
 import { scrollIntoStrip, useStripFade } from "../lib/strip-fade";
 import { horizontalStep } from "../lib/direction";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { prefersReducedMotion } from "../lib/reduced-motion";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { mergeRefs } from "./field-parts";
-import { DEFAULT_TABS_LABELS } from "./ui-labels";
+import { DEFAULT_TABS_LABELS } from "./tabs-labels";
 import { IconButton } from "./icon-button";
 import { HIT_AREA_LARGE } from "./button-look";
 
@@ -55,7 +55,7 @@ export interface TabsLabels {
   previous: string;
 }
 
-// Defined in ./ui-labels, which holds no component code (0.34, KS U8).
+// Defined in ./tabs-labels, which holds no component code (0.34, KS U8).
 export { DEFAULT_TABS_LABELS };
 
 /**
@@ -205,9 +205,7 @@ const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b b
 // selection. `--bg-active` is the kit's own selected-row fill (the sidebar's), so the
 // admin page's nav and the app's own sidebar mark "you are here" the same way.
 const TABLIST_VERTICAL_CLASSES = "flex flex-col gap-0.5";
-const TAB_VERTICAL_CLASSES =
-  FOCUS_RING_WIDTH +
-  " flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-strong";
+const TAB_VERTICAL_CLASSES = `flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING}`;
 const TAB_VERTICAL_ACTIVE_CLASSES = "bg-active text-primary";
 const TAB_VERTICAL_INACTIVE_CLASSES = "text-muted hover:bg-hover hover:text-primary";
 
@@ -215,9 +213,14 @@ const TAB_VERTICAL_INACTIVE_CLASSES = "text-muted hover:bg-hover hover:text-prim
 // links · … · 31 Punkte") made one tab 448px wide in a 390px strip, and a tab wider
 // than the strip cannot be scrolled into view — its end was simply off screen
 // (lenkbank L3). The label and detail truncate inside it instead; see `inner`.
-const TAB_CLASSES =
-  FOCUS_RING_WIDTH +
-  " max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible:ring-strong";
+//
+// Keyboard focus on a tab, a side-nav row and the add button is the kit's one focus frame
+// (text-size §5), in brand. Until 0.51.7 it rang in `ring-strong`: 2.54:1 on the light
+// page and 2.76:1 on a card, under WCAG 1.4.11's 3:1 (refactor audit 2026-10-30, DSP-8;
+// NavPills made the same move in 0.34, DOC-7). INSET on a tab: the strip scrolls
+// (`overflow-x-auto overflow-y-hidden`), so a ring outside the tab is cut off along its
+// top and bottom, and at a cut end.
+const TAB_CLASSES = `max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none ${FOCUS_RING} focus-visible:ring-inset`;
 const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-primary";
 const TAB_INACTIVE_CLASSES = "border-transparent text-muted hover:text-secondary hover:border-strong";
 
@@ -225,9 +228,7 @@ const TAB_INACTIVE_CLASSES = "border-transparent text-muted hover:text-secondary
 // `onRemove`).
 const TAB_REMOVABLE_CLASSES = "pe-8";
 const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-strong px-1.5";
-const TAB_ADD_CLASSES =
-  FOCUS_RING_WIDTH +
-  " inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:text-primary focus:outline-none focus-visible:ring-strong disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
+const TAB_ADD_CLASSES = `inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:text-primary focus:outline-none ${FOCUS_RING} disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4`;
 // `relative`: the phone's visually hidden label needs a positioned ancestor (see the
 // sr-only rule in CONTRIBUTING); `max-md:px-2` squares the lone "+".
 const TAB_ADD_PHONE_CLASSES = "relative max-md:px-2";
@@ -262,6 +263,8 @@ export function Tabs<T extends string>({
   const cue = overflowCue && !vertical;
   const cueStart = cue && (fade.overflow === "start" || fade.overflow === "both");
   const cueEnd = cue && (fade.overflow === "end" || fade.overflow === "both");
+  // The cue gutters (see `stripBox`): there only while the strip overflows at all.
+  const gutters = cue && fade.overflow !== undefined;
   // Three quarters of the visible width toward `side`; an RTL strip runs leftward.
   const onCue = (side: "start" | "end") => {
     const strip = stripRef.current;
@@ -333,15 +336,25 @@ export function Tabs<T extends string>({
   // "80 km," under the add button. Only the strip scrolls (`scrollBy` on it, not
   // `scrollIntoView`, which would scroll the page as well), and only as far as needed
   // to clear the fade.
+  //
+  // And again when the cue gutters appear (refactor audit 2026-10-30, DSP-16). They come a
+  // render after the strip is first measured as overflowing — on mount, or with the very
+  // tab that tipped it over — and take 24px off each end, so a tab scrolled clear before
+  // them ended 24px past the visible end, under the fade and the ›.
   useLayoutEffect(() => {
     const strip = stripRef.current;
     const tab = strip?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]');
     if (strip && tab) scrollIntoStrip(strip, tab);
-  }, [active]);
+  }, [active, gutters]);
   const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;
   // Whether Delete reaches this tab: every removable tab, or only the open one.
   const deletesOnKey = (tab: TabItem<T>) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
   const nameOf = (tab: TabItem<T>) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
+  // The strip's one tab stop (see `tabIndex` below): the open tab, or the first while
+  // `active` names none. "No sheet open" is a real state — KS's sheet strips pass `""` —
+  // and with the stop on the selection alone every tab was -1, so the keyboard could not
+  // reach the one control that opens a sheet (refactor audit 2026-10-30, DSP-1).
+  const stop = tabs.some((t) => t.id === active) ? active : tabs[0]?.id;
 
   // Where focus goes once a removal the strip asked for has happened. The caller
   // owns `tabs` and may take its time (a confirmation, a request), so this waits
@@ -370,10 +383,14 @@ export function Tabs<T extends string>({
     if (focused && focused !== document.body && !strip.contains(focused) && focused !== removeRef.current) return;
     // The removed tab was open: focus follows the caller's new selection, which is
     // also the strip's tab stop. It was not: its neighbour, as the ARIA pattern has it.
-    const target = !pending.wasActive && tabs.some((t) => t.id === pending.neighbour) ? pending.neighbour : active;
+    // The caller opened nothing in its place (KS drops the sheet and the selection in one
+    // render): the neighbour too, else the stop — not an index of -1 and the page (DSP-1).
+    const present = (id: T | undefined) => tabs.some((t) => t.id === id);
+    const target =
+      pending.wasActive && present(active) ? active : present(pending.neighbour) ? pending.neighbour : stop;
     const index = tabs.findIndex((t) => t.id === target);
     strip.querySelectorAll<HTMLElement>('[role="tab"]')[index]?.focus();
-  }, [tabs, active]);
+  }, [tabs, active, stop]);
 
   // Arrow keys walk the strip in DOM order (ARIA tabs pattern). Home/End jump
   // to the ends. Focus only — activation stays on click/Enter/Space, because a tab
@@ -462,8 +479,8 @@ export function Tabs<T extends string>({
           // strip back on the next visit in a state they never chose. The cost is that
           // Tab out and back returns to the open tab rather than to the last one
           // looked at; the ARIA pattern allows either, and this one needs no second
-          // piece of state shadowing `active`.
-          tabIndex: isActive ? 0 : -1,
+          // piece of state shadowing `active`. With nothing open, the first tab (`stop`).
+          tabIndex: tab.id === stop ? 0 : -1,
           // Only the open tab: see `panelId`.
           "aria-controls": isActive ? panelId : undefined,
           id: isActive && panelId ? `${panelId}-tab` : undefined,
@@ -612,8 +629,7 @@ export function Tabs<T extends string>({
     ) : null;
   // The box the cues sit in, ‹ in the gutter before the strip and › in the one after it
   // (see `gutterAt`). There whether or not the strip overflows right now, so a resize
-  // never re-parents it; the gutters only while it overflows at all.
-  const gutters = cue && fade.overflow !== undefined;
+  // never re-parents it; the gutters only while it overflows at all (`gutters`).
   const stripBox = cue ? (
     <div className={cn("relative flex min-w-0", !onAdd && "flex-1", gutters && "px-[24px]")}>
       {tablist}

package/src/components/toggle-legend.tsx

@@ -123,7 +123,7 @@ export interface LegendEntry {
 }
 
 export interface ToggleLegendProps {
-  entries: LegendEntry[];
+  entries: readonly LegendEntry[];
   /** The keys currently off the chart. */
   hidden: ReadonlySet<string>;
   onToggle: (key: string) => void;
@@ -198,12 +198,15 @@ export function ToggleLegend({
             className={cn(
               "flex items-center gap-1.5 rounded text-start text-caption text-secondary transition-opacity hover:opacity-80",
               FOCUS_RING,
-              off && "opacity-35",
               entry.align === "end" && "ms-auto",
             )}
           >
             <LegendMark entry={entry} off={off} />
-            {entry.label}
+            {/* Off, the label keeps its ink and is struck through; only the mark fades
+                (0.52, refactor audit 2026-10-30, DSP-9). The whole entry at 35 % put the
+                label at 1.8:1 — on a button that brings the series back, whose label is
+                the only thing saying which one. `aria-pressed` carries the state. */}
+            <span className={cn(off && "line-through")}>{entry.label}</span>
           </button>
         );
       })}
@@ -212,7 +215,7 @@ export function ToggleLegend({
 }
 
 export interface StaticLegendProps {
-  entries: LegendEntry[];
+  entries: readonly LegendEntry[];
   /** See {@link ToggleLegendProps.orientation}. */
   orientation?: "horizontal" | "vertical";
   /** The list's accessible name. Default: the `seriesChart.legend` label. */
@@ -338,13 +341,15 @@ export function LegendGroup({ title, children }: { title: ReactNode; children: R
  *  A stroke is an SVG line with the chart's own `strokeDasharray`, not a CSS gradient
  *  approximating it: a gradient can say "solid or dashed" and nothing more.
  *
- *  A hidden stroke is NOT faded here: the button around it already is (`opacity-35`),
- *  and the line used to take its own 0.35 on top — 0.35 × 0.35, about 12 %, a mark
- *  gone rather than dimmed, while the square beside it read at the full 35 %. */
+ *  A hidden mark fades ONCE, on its own box (`opacity-35`; since 0.52 the label beside
+ *  it keeps its ink, DSP-9). The line used to take its own 0.35 inside a faded button —
+ *  0.35 × 0.35, about 12 %, a mark gone rather than dimmed, while the square beside it
+ *  read at the full 35 %. */
 function LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {
+  const fade = off && "opacity-35";
   if (entry.icon != null) {
     return (
-      <span aria-hidden className="inline-flex shrink-0 items-center">
+      <span aria-hidden className={cn("inline-flex shrink-0 items-center", fade)}>
         {entry.icon}
       </span>
     );
@@ -353,7 +358,7 @@ function LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {
     return (
       <span
         aria-hidden
-        className="size-2 shrink-0 rounded-full"
+        className={cn("size-2 shrink-0 rounded-full", fade)}
         style={{
           backgroundColor: off ? "transparent" : entry.color,
           boxShadow: `inset 0 0 0 1.5px ${entry.color}`,
@@ -363,7 +368,7 @@ function LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {
   }
   if (entry.marker === "stroke") {
     return (
-      <svg aria-hidden viewBox="0 0 20 2" className="h-0.5 w-5 shrink-0 overflow-visible">
+      <svg aria-hidden viewBox="0 0 20 2" className={cn("h-0.5 w-5 shrink-0 overflow-visible", fade)}>
         <line
           x1={0}
           y1={1}
@@ -379,7 +384,7 @@ function LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {
   return (
     <span
       aria-hidden
-      className="h-2.5 w-2.5 shrink-0 rounded-[3px]"
+      className={cn("h-2.5 w-2.5 shrink-0 rounded-[3px]", fade)}
       style={{
         backgroundColor: off ? "transparent" : entry.color,
         boxShadow: `inset 0 0 0 1.5px ${entry.color}`,

package/src/components/translation-review-editor.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { useKitFormat } from "../lib/format";
+import { useDayFormatter } from "../lib/day-format";
 import { placeholderTokens, reviewWrite } from "../lib/translation-review";
 import type {
   TranslationReviewKey,
@@ -48,8 +48,10 @@ export interface TranslationReviewEditorProps {
    * opened by a tap — that one may only be opened to read.
    */
   focusWording?: boolean;
-  /** How the verdict's date reads. Default: the kit's `formatDate`, medium, in the
-   *  provider's locale. */
+  /** How the verdict's date reads. Default (0.52): the `<UiKitProvider formatDate>` when
+   *  the app set one (its date preference; the day sits in a sentence, so no weekday), else
+   *  the kit's `formatDate`, medium, in the provider's locale and `timeZone`. An empty
+   *  answer falls back to the kit's. */
   formatDate?: (iso: string) => string;
   /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */
   formatError?: (error: unknown) => ReactNode;
@@ -106,7 +108,7 @@ export function TranslationReviewEditor({
   labels: labelsProp,
 }: TranslationReviewEditorProps) {
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
-  const { formatDate } = useKitFormat();
+  const date = useDayFormatter(formatDateProp);
   const review = row.review;
   const missing = row.text === "";
   const editable = !readOnly && onSave !== undefined;
@@ -127,7 +129,6 @@ export function TranslationReviewEditor({
 
   const canFlag = note.trim() !== "" || suggestion.trim() !== row.text.trim();
   const changed = row.status === "changed" ? review : null;
-  const date = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, "medium"));
 
   const run = async (kind: "approve" | "flag" | "clear", action: () => MaybePromise) => {
     setBusy(kind);

package/src/components/translation-review.tsx

@@ -181,7 +181,8 @@ export interface TranslationReviewPanelProps {
    * kit's, which an app listing what it stores had to list as its own (KS U4).
    */
   storageKeyPrefix?: string;
-  /** How a verdict's date reads in the editor. */
+  /** How a verdict's date reads in the editor. Default: the editor's — the
+   *  `<UiKitProvider formatDate>`, else the kit's medium date (0.52). */
   formatDate?: (iso: string) => string;
   /** Turns a callback's rejection into words. Default {@link TranslationReviewLabels.failed}. */
   formatError?: (error: unknown) => ReactNode;
@@ -561,8 +562,8 @@ export function TranslationReviewPanel({
   // `filter` is rebuilt every render; its fields are what the list depends on.
   const { status, query, placeholdersOnly } = filter;
   const visible = useMemo(
-    () => filterTranslationRows(rows, { status, source, namespace, query, placeholdersOnly }),
-    [rows, status, source, namespace, query, placeholdersOnly],
+    () => filterTranslationRows(rows, { status, source, namespace, query, placeholdersOnly }, locale),
+    [rows, status, source, namespace, query, placeholdersOnly, locale],
   );
 
   // ── Groups ──

package/src/components/treemap-labels.ts

@@ -0,0 +1,39 @@
+// All user-facing strings for `Treemap`, as the `treemap` namespace of
+// `<UiKitProvider labels>`, and per map the `labels` prop over that (0.52, refactor audit
+// 2026-10-30, DSP-5).
+//
+// A module of its own, with no recharts in it, for the reason `pie-chart-labels` is one:
+// the label registry (src/i18n) imports the defaults, and must not pull the chart
+// library in behind them.
+
+export interface TreemapLabels {
+  /**
+   * One tile's accessible name — what a screen reader says for a tile, clickable or
+   * not, since its area is nothing it can say. `value` arrives through the map's
+   * `valueFormatter` when that returns text, else as the number in the provider's
+   * locale; `share` is the tile's share of what is drawn, already a formatted percent
+   * ("60 %" in German, "60%" in English) — the function only arranges them.
+   */
+  tile: (name: string, value: string, share: string) => string;
+  /**
+   * A group's accessible name (0.52, `TreemapNode.children`): its frame is a stop of the
+   * map's keyboard before its tiles, so a reader hears the group and its total once, on the
+   * way in. `value` and `share` as for {@link TreemapLabels.tile}, of the group's tiles
+   * together; the word "group" tells it from a tile of the same shape.
+   */
+  group: (name: string, value: string, share: string) => string;
+  /**
+   * A name inside a group: `name` is the tile's (or a nested group's) own, from
+   * {@link TreemapLabels.tile} or {@link TreemapLabels.group}, and `group` the name of the
+   * group round it — applied once per group, the innermost first, so a tile two levels deep
+   * reads "Rent: 1,050 (40%), in Housing, in Fixed costs". In the name rather than said once
+   * by the frame, because Home, End and a click land on a tile without passing its frame.
+   */
+  inGroup: (name: string, group: string) => string;
+}
+
+export const DEFAULT_TREEMAP_LABELS: TreemapLabels = {
+  tile: (name, value, share) => `${name}: ${value} (${share})`,
+  group: (name, value, share) => `${name}, group: ${value} (${share})`,
+  inGroup: (name, group) => `${name}, in ${group}`,
+};

package/src/components/treemap-layout.ts

@@ -0,0 +1,210 @@
+// Where `Treemap` draws each node — a pure function of the nodes, the chart's size and the
+// text size, with no recharts in it (0.52 code review of treemap.tsx, findings 1 and 8).
+//
+// recharts lays nested data out itself, edge to edge, and 0.52 first made the groups' room
+// afterwards: a group's cell took its band and margin out of its rectangle and each child's
+// cell SQUEEZED the rectangle recharts gave it into what was left. Two faults followed.
+// A fixed 23px is a different share of every group, so a €100 tile in a 61px group was
+// drawn at two thirds of a €100 tile in a 300px one — in a chart whose one promise is that
+// area is share. And the squeeze ran through a cache the group's cell wrote during render
+// for its children's cells to read, which held only because recharts renders a group
+// before its children.
+//
+// So the layout is made here, up front: squarified as recharts does it, with each group
+// asking for its tiles' area PLUS its frame's, and its tiles laid out in its body. A
+// frame's area depends on the rectangle it gets, so the layout is run again with each
+// group's frame as measured until no frame moves by a pixel — two or three rounds.
+
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** What the layout needs of a node: its key, its value, and a group's nodes. */
+export interface LayoutNode {
+  path: string;
+  size: number;
+  children?: readonly LayoutNode[];
+}
+
+/** A node as drawn: its rectangle, and for a group the body its nodes fill and whether
+ *  its band is drawn. Whole pixels, on shared edges, so neighbours meet without a seam. */
+export interface Placed {
+  box: Box;
+  body?: Box;
+  banded?: boolean;
+}
+
+const PHI = (1 + Math.sqrt(5)) / 2;
+
+/**
+ * A group's band, in px at Normal, × the text size's scale: the 20px floor a tile keeps
+ * for its own name, so the group's name sits in it as a tile's does in a tile.
+ */
+export const BAND = 20;
+/**
+ * The frame's margin round its body, in px. Each tile keeps its 2px gutter, half of it
+ * inside the tile, so 3 leaves one pixel of the frame's own colour between the group's
+ * gutter and its tiles' — the frame reads as one outline round the group, not as a gutter
+ * that happens to be wider.
+ */
+export const FRAME_MARGIN = 3;
+/**
+ * The least of a group's height its body keeps under the band: 1/φ. At Normal that is a
+ * group of 61px (20 band + 3 margin = 0.382 of it), whose body of 38px still holds a
+ * tile's name and its second line (the note's 36px floor) — so a single row of tiles under
+ * the band keeps both. A smaller group draws no band, and its name is in its tiles'
+ * accessible names and its tooltip rather than over their area. Since the frame's area is
+ * given to the group (above), this bounds the frame's share of the picture, not the tiles'.
+ */
+export const BODY_SHARE = 1 / PHI;
+
+/** A group drawn at `box`: whether it has the room for its band (see {@link BODY_SHARE};
+ *  and 44px across, the floor of a word), and the body its nodes are drawn into. */
+export function groupBody(box: Box, scale: number): { banded: boolean; body: Box } {
+  const band = BAND * scale;
+  const margin = Math.min(FRAME_MARGIN, Math.floor(box.width / 4), Math.floor(box.height / 4));
+  const banded = box.width >= 44 * scale && box.height - band - margin >= box.height * BODY_SHARE;
+  const top = banded ? band : margin;
+  return {
+    banded,
+    body: {
+      x: box.x + margin,
+      y: box.y + top,
+      width: Math.max(0, box.width - 2 * margin),
+      height: Math.max(0, box.height - top - margin),
+    },
+  };
+}
+
+/** The worst aspect ratio in a row of `area` along `side`, against the target `ratio`. */
+function worst(area: number, min: number, max: number, side: number, ratio: number): number {
+  const along = side * side;
+  const across = area * area;
+  if (across === 0 || min === 0) return Infinity;
+  return Math.max((along * max * ratio) / across, across / (along * min * ratio));
+}
+
+/**
+ * Bruls, Huizing and van Wijk's squarified layout, as recharts runs it: `weights` share
+ * out `rect` in order, a row at a time along its shorter side, and a row closes when the
+ * next node would make its worst tile further from φ:1 (recharts' default ratio). Returns
+ * one rectangle per weight, in order, in fractional pixels.
+ */
+export function squarify(weights: readonly number[], rect: Box, ratio = PHI): Box[] {
+  const out: Box[] = weights.map(() => ({ x: rect.x, y: rect.y, width: 0, height: 0 }));
+  const sum = weights.reduce((acc, w) => acc + Math.max(0, w), 0);
+  if (!(sum > 0) || rect.width <= 0 || rect.height <= 0) return out;
+  const areas = weights.map((w) => (Math.max(0, w) * rect.width * rect.height) / sum);
+  let { x, y, width, height } = rect;
+  let i = 0;
+  while (i < areas.length) {
+    const side = Math.min(width, height);
+    let rowArea = 0;
+    let min = Infinity;
+    let max = 0;
+    let best = Infinity;
+    let j = i;
+    while (j < areas.length) {
+      const a = areas[j]!;
+      const score = worst(rowArea + a, Math.min(min, a), Math.max(max, a), side, ratio);
+      if (j > i && score > best) break;
+      rowArea += a;
+      min = Math.min(min, a);
+      max = Math.max(max, a);
+      best = score;
+      j += 1;
+    }
+    // The last row takes what is left, so rounding never leaves a sliver unpainted.
+    const last = j === areas.length;
+    if (side === width) {
+      // A row along the top, as wide as the space.
+      const thick = last ? height : rowArea / width;
+      let at = x;
+      for (let k = i; k < j; k++) {
+        const len = k === j - 1 ? x + width - at : (areas[k]! / rowArea) * width;
+        out[k] = { x: at, y, width: len, height: thick };
+        at += len;
+      }
+      y += thick;
+      height -= thick;
+    } else {
+      // A column at the left, as tall as the space.
+      const thick = last ? width : rowArea / height;
+      let at = y;
+      for (let k = i; k < j; k++) {
+        const len = k === j - 1 ? y + height - at : (areas[k]! / rowArea) * height;
+        out[k] = { x, y: at, width: thick, height: len };
+        at += len;
+      }
+      x += thick;
+      width -= thick;
+    }
+    i = j;
+  }
+  return out;
+}
+
+/** Whole pixels on the EDGES: neighbours share an edge, so they round it alike. */
+function snap(b: Box): Box {
+  const x = Math.round(b.x);
+  const y = Math.round(b.y);
+  return { x, y, width: Math.round(b.x + b.width) - x, height: Math.round(b.y + b.height) - y };
+}
+
+/** The rounds the frames get to settle; three is usual, more only when a band switches. */
+const ROUNDS = 8;
+
+/**
+ * Every node of `nodes` placed in a `width` × `height` chart, by path.
+ *
+ * Each tile's area is its value's share of what is left for tiles once the frames have
+ * theirs — the same density in every group and at the top. A group asks for its tiles'
+ * area and its own frame's (band and margin, as {@link groupBody} measures them on the
+ * rectangle it got last round), so its body holds exactly its tiles.
+ */
+export function layoutTreemap(
+  nodes: readonly LayoutNode[],
+  width: number,
+  height: number,
+  scale: number,
+): Map<string, Placed> {
+  const total = nodes.reduce((acc, n) => acc + n.size, 0);
+  const frames = new Map<string, number>();
+  let placed = new Map<string, Placed>();
+  for (let round = 0; round < ROUNDS; round++) {
+    const framed = [...frames.values()].reduce((acc, a) => acc + a, 0);
+    const spare = width * height - framed;
+    // Frames that would take the whole chart (a tiny chart of many groups) leave nothing
+    // to share; the tiles then take the density they would have without frames.
+    const density = total > 0 ? (spare > 0 ? spare : width * height) / total : 0;
+    const need = (n: LayoutNode): number =>
+      n.children ? (frames.get(n.path) ?? 0) + n.children.reduce((acc, c) => acc + need(c), 0) : n.size * density;
+    let moved = 0;
+    placed = new Map();
+    const place = (list: readonly LayoutNode[], rect: Box) => {
+      const boxes = squarify(
+        list.map((n) => need(n)),
+        rect,
+      );
+      list.forEach((n, i) => {
+        const box = snap(boxes[i]!);
+        if (!n.children) {
+          placed.set(n.path, { box });
+          return;
+        }
+        const { banded, body } = groupBody(box, scale);
+        placed.set(n.path, { box, body, banded });
+        const frame = box.width * box.height - body.width * body.height;
+        moved = Math.max(moved, Math.abs(frame - (frames.get(n.path) ?? 0)));
+        frames.set(n.path, frame);
+        place(n.children, body);
+      });
+    };
+    place(nodes, { x: 0, y: 0, width, height });
+    if (moved < 1) break;
+  }
+  return placed;
+}