@eifi1/ui-kit 0.51.7 → 0.52.0

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;
+}