@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/toggle-legend.tsx

@@ -6,6 +6,7 @@
 // useful under a chart the consumer drew by hand as under `SeriesChart`.
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { useKitLabels } from "../i18n/kit-labels";
 import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
 
@@ -60,6 +61,32 @@ export function toggleHidden(hidden: ReadonlySet<string>, key: string): Readonly
   return next;
 }
 
+/**
+ * Where a legend that stands BESIDE a chart goes from Large up: UNDER it
+ * (docs/text-size-harmonization.md §4). Beside a chart, a legend column takes a third of
+ * a row whose plot needs all of it once the text is 25–50 % larger; under it, the row
+ * is the plot's and the legend wraps across the width.
+ *
+ * Pure CSS (`large:`), so a legend moves with the text size alone, whatever drew the
+ * row around it:
+ * - in a GRID it spans a row of its own (`col-span-full`) after the charts
+ *   (`order-last`) — Kurvenschmiede's facing pairs;
+ * - in a FLEX row it takes a line of its own (`basis-full`), and its row is allowed to
+ *   wrap for it (`[*:has(>&)]:flex-wrap` sets `flex-wrap` on the PARENT — the one rule
+ *   here that reaches outside the legend, because a row that may not wrap would squeeze
+ *   the chart to nothing beside a full-width legend) — Kurvenschmiede's chart rows.
+ *
+ * A caller that places its legend itself and wants it kept beside the chart at every
+ * size overrides with `large:col-auto large:basis-auto`.
+ */
+const UNDER_THE_CHART_AT_LARGE =
+  "large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap";
+
+/** A vertical legend's entries from Large up: across, wrapping — it is under the chart
+ *  now (see {@link UNDER_THE_CHART_AT_LARGE}), where a column of entries would be a
+ *  screenful of one-word lines. */
+const VERTICAL_AT_LARGE = "large:flex-row large:flex-wrap large:items-center large:justify-start";
+
 export interface LegendEntry {
   key: string;
   label: ReactNode;
@@ -109,7 +136,10 @@ export interface ToggleLegendProps {
   onToggle: (key: string) => void;
   /** `vertical` is for a legend standing BESIDE the charts rather than under them —
    *  what a row of charts sharing one legend wants, since under two charts there is
-   *  no "under", and putting it under one says it belongs to that one. */
+   *  no "under", and putting it under one says it belongs to that one.
+   *
+   *  From Large up a vertical legend moves under the charts and lays its entries
+   *  across (0.32, docs/text-size-harmonization.md §4) — see {@link LegendColumn}. */
   orientation?: "horizontal" | "vertical";
   /**
    * Draw a legend of ONE entry rather than nothing.
@@ -157,7 +187,7 @@ export function ToggleLegend({
       className={cn(
         "flex gap-x-3 gap-y-1",
         orientation === "vertical"
-          ? "flex-col items-start justify-center"
+          ? cn("flex-col items-start justify-center", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE)
           : "mt-2 flex-wrap items-center",
         className,
       )}
@@ -173,8 +203,8 @@ export function ToggleLegend({
             aria-pressed={!off}
             onClick={() => onToggle(entry.key)}
             className={cn(
-              "flex items-center gap-1.5 rounded text-start text-[11px] text-[var(--text-secondary)] transition-opacity hover:opacity-80",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+              "flex items-center gap-1.5 rounded text-start text-caption text-[var(--text-secondary)] transition-opacity hover:opacity-80",
+              FOCUS_RING,
               off && "opacity-35",
               entry.align === "end" && "ms-auto",
             )}
@@ -246,7 +276,7 @@ export function StaticLegend({
       className={cn(
         "m-0 flex list-none gap-x-3 gap-y-1 p-0",
         orientation === "vertical"
-          ? "flex-col items-start justify-center"
+          ? cn("flex-col items-start justify-center", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE)
           : "mt-2 flex-wrap items-center",
         className,
       )}
@@ -255,7 +285,7 @@ export function StaticLegend({
         <Item
           key={entry.key}
           className={cn(
-            "flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]",
+            "flex items-center gap-1.5 text-caption text-[var(--text-secondary)]",
             entry.align === "end" && "ms-auto",
           )}
         >
@@ -273,10 +303,25 @@ export function StaticLegend({
  * that stretches it — and stacks whatever it is given, which is what a panel showing
  * two legends at once needs. The width is the caller's: how wide a legend column is
  * is a fact about that screen's layout.
+ *
+ * **From Large up it goes UNDER the charts** (0.32, docs/text-size-harmonization.md
+ * §4): a row of its own in a grid, a line of its own in a flex row (see
+ * `UNDER_THE_CHART_AT_LARGE`), with what it holds laid across and wrapping. A
+ * caller's own `max-sm:flex-row …` for the phone keeps working; the caller's width
+ * (`sm:w-40`) gives way to the full row, because a size wins over a breakpoint.
  */
 export function LegendColumn({ children, className }: { children: ReactNode; className?: string }) {
   return (
-    <div className={cn("flex h-full flex-col justify-center gap-3", className)}>{children}</div>
+    <div
+      className={cn(
+        "flex h-full flex-col justify-center gap-3",
+        UNDER_THE_CHART_AT_LARGE,
+        "large:h-auto large:flex-row large:flex-wrap large:items-start large:justify-start large:gap-x-6",
+        className,
+      )}
+    >
+      {children}
+    </div>
   );
 }
 
@@ -290,7 +335,7 @@ export function LegendColumn({ children, className }: { children: ReactNode; cla
 export function LegendGroup({ title, children }: { title: ReactNode; children: ReactNode }) {
   return (
     <div className="flex min-w-0 flex-col items-start gap-1">
-      <span className="text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+      <span className="text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]">
         {title}
       </span>
       <div className="flex flex-col items-start gap-y-0.5">{children}</div>

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

@@ -150,7 +150,7 @@ export function TranslationReviewEditor({
     <div className={cn("min-w-0 space-y-3 text-sm", className)}>
       <code className="block break-all text-xs text-[var(--text-muted)]">{row.key}</code>
 
-      <div className="grid gap-3 md:grid-cols-2">
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
         <div className="min-w-0">
           <SectionLabel as="span" size="xs">
             {referenceLabel}

package/src/components/translation-review.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 
-import { useMediaQuery } from "../hooks/use-media-query";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
@@ -293,9 +293,6 @@ export interface TranslationReviewPanelProps {
   labels?: Partial<TranslationReviewLabels>;
 }
 
-/** The wide screen's query — the same one DataTable switches its layout on, so "a phone"
- *  means the same here as in the table. */
-const MD_UP = "(min-width: 768px)";
 
 /**
  * How many rows the groups may render at once on a wide screen before they start folded
@@ -461,7 +458,10 @@ export function TranslationReviewPanel({
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   const locale = useKitLocale();
   const lock = useWriteLock();
-  const phone = !useMediaQuery(MD_UP, true);
+  // The phone layout DataTable switches its layout on, so "a phone" means the same here
+  // as in the table, at every text size: `usePhoneLayout()` itself (§10.4; 0.32.1,
+  // keksdose's 0.32 report — `!useBreakpoint("md")` could disagree with it at 767.5 px).
+  const phone = usePhoneLayout();
   const baseId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const editable = !readOnly && onSave !== undefined;
@@ -744,6 +744,12 @@ export function TranslationReviewPanel({
             tone="muted"
             commit
             label={labels.approve}
+            // The icon alone at every text size (docs/text-size-harmonization.md §10.8):
+            // the row's one action, in a hugging column of a dense table beside the
+            // string under review, which "Approve" as text at Large would squeeze. A
+            // single action stays inline in `RowActions` too, so the menu would not help;
+            // the swipe and the editor say it in words.
+            labelVisible={false}
             pending={isQueued(`row:${r.id}`)}
             disabled={busy}
             onClick={(event) => {

package/src/components/tree-view.tsx

@@ -4,6 +4,7 @@ import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
 import { Spinner } from "./ui";
+import { FOCUS_RING } from "./focus-ring";
 
 /**
  * A hierarchy you walk with the keyboard: kastlan's chart of accounts (Assets › Current
@@ -182,7 +183,7 @@ export function TreeRow({
             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)]"
+          className={cn("flex size-4 shrink-0 items-center justify-center rounded text-[var(--text-muted)] outline-none hover:text-[var(--text-primary)]", FOCUS_RING)}
         >
           {chevron}
         </button>
@@ -543,7 +544,7 @@ export function TreeView<T = unknown>({
           }}
           // The ring goes on this row's own box, not the <li>: the <li> contains the
           // whole open branch below it, and ringing that would outline a subtree.
-          className="outline-none [&:focus-visible>[data-tree-row]]:ring-2 [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]"
+          className="outline-none [&:focus-visible>[data-tree-row]]:ring-[length:var(--focus-ring-width)] [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]"
         >
           <TreeRow
             id={rowId}

package/src/components/treemap.tsx

@@ -15,6 +15,9 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } f
 import { PALETTE_HEX, textOn } from "../theme/chart-palette";
 import { parseHex } from "../theme/color";
 import { dirOf, type Direction } from "../lib/direction";
+import { cn } from "../lib/cn";
+import { useTextSize } from "../theme/text-size";
+import { chartHeightProps, type ChartHeight } from "./chart-height";
 
 /**
  * One tile.
@@ -63,8 +66,10 @@ export interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "chi
    * host that has a currency or a locale passes this — the kit knows neither.
    */
   valueFormatter?: (value: number, share: number | undefined) => ReactNode;
-  /** Chart height in px. Default 320. */
-  height?: number;
+  /** Chart height: a CSS length (`"20rem"`, `"min(20rem, 50dvh)"`), a Tailwind class,
+   *  or px. Default `"20rem"` — 320 px at Normal, growing with the text size like the
+   *  labels in the tiles (0.32, docs/text-size-harmonization.md §10.10). */
+  height?: ChartHeight;
   /** A tile was activated — by click, or by Enter/Space on a focused tile. Setting
    *  this makes every tile a focusable `role="button"` named by its node name. */
   onNodeClick?: (id: string, name: string) => void;
@@ -165,6 +170,8 @@ function measurableFill(fill: string, tokens: readonly string[]): string | null
 
 // ── Tile ──────────────────────────────────────────────────────────────────
 
+/** The name's size in px at Normal; a tile draws it × the text size's scale (§10.10), and
+ *  every distance below that is measured in lines grows with it. */
 const LABEL_FONT_SIZE = 12;
 /** The optional second line, a step down from the name so the tile reads name-first. */
 const NOTE_FONT_SIZE = 11;
@@ -233,6 +240,7 @@ export function TreemapCell({
 }: TreemapCellProps) {
   // Before the early return: a hook has to run on every render of the cell.
   const tokenHex = useChartTokenHex();
+  const { scale } = useTextSize();
   // Depth 0 is recharts' synthetic root, which spans the whole chart.
   if (!depth) return null;
   // Whole pixels: a rect on a half pixel renders its edge across two half-lit
@@ -251,14 +259,16 @@ export function TreemapCell({
   const halo = measured ? tileFill : "none";
   // Below ~44x20 there is no room for a readable word, so no label at all rather than
   // a one-letter stub bleeding over the tile edge.
-  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? "", pw, LABEL_FONT_SIZE) : null;
+  const labelSize = LABEL_FONT_SIZE * scale;
+  const noteSize = NOTE_FONT_SIZE * scale;
+  const label = pw >= 44 * scale && ph >= 20 * scale ? fitLabel(name ?? "", pw, labelSize) : null;
   // Only under a label that is itself drawn — a stray "+12%" on an unnamed rectangle
   // names nothing — and only where a second baseline fits: the note's baseline sits
   // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under
   // the note that the label keeps under itself at the 20px floor.
   const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;
   const note =
-    label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;
+    label != null && rawNote != null && ph >= 36 * scale ? fitLabel(rawNote, pw, noteSize) : null;
   // The label's START edge, 6px in from the tile's. The tiles themselves are laid out
   // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is
   // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then
@@ -306,14 +316,14 @@ export function TreemapCell({
           // <text> exactly as it reaches a table cell.
           data-private={redactNames ? "" : undefined}
           x={textX}
-          y={py + 15}
+          y={py + 15 * scale}
           direction={dir}
           fill={ink}
           stroke={halo}
           strokeWidth={2.5}
           strokeLinejoin="round"
           paintOrder="stroke"
-          fontSize={LABEL_FONT_SIZE}
+          fontSize={labelSize}
           fontWeight={600}
           style={{ pointerEvents: "none" }}
         >
@@ -323,7 +333,7 @@ export function TreemapCell({
       {note != null && (
         <text
           x={textX}
-          y={py + 29}
+          y={py + 29 * scale}
           direction={dir}
           fill={ink}
           fillOpacity={0.85}
@@ -331,7 +341,7 @@ export function TreemapCell({
           strokeWidth={2.5}
           strokeLinejoin="round"
           paintOrder="stroke"
-          fontSize={NOTE_FONT_SIZE}
+          fontSize={noteSize}
           fontWeight={500}
           style={{ pointerEvents: "none" }}
         >
@@ -386,7 +396,7 @@ const DEFAULT_NUMBER = new Intl.NumberFormat();
 export function Treemap({
   data,
   valueFormatter,
-  height = 320,
+  height = "20rem",
   onNodeClick,
   redactNames = false,
   nodeNote,
@@ -421,6 +431,7 @@ export function Treemap({
     .filter((n) => Number.isFinite(n.size) && n.size > 0)
     .slice(0, maxTiles ?? undefined);
   if (nodes.length === 0) return null;
+  const box = chartHeightProps(height);
 
   // The share is of what is DRAWN, so it always reads as "of this picture".
   const total = nodes.reduce((acc, n) => acc + n.size, 0);
@@ -430,7 +441,13 @@ export function Treemap({
   };
   const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;
   return (
-    <ChartContainer {...rest} ref={rootRef} config={TREEMAP_CONFIG} style={{ ...style, height }}>
+    <ChartContainer
+      {...rest}
+      ref={rootRef}
+      config={TREEMAP_CONFIG}
+      className={cn(box.className, rest.className)}
+      style={{ ...style, ...box.style }}
+    >
       {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where
           it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}
       <RechartsTreemap