@eifi1/ui-kit 0.51.7 → 0.53.0

package/src/components/jump-calendar.tsx

@@ -2,36 +2,20 @@
 // under a ‹ caption › whose caption opens a month grid. Moved out of date-picker.tsx as
 // it was (MOD-9, refactor audit 2026-10); internal, both pickers reach it through
 // `PanelCalendar`.
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { useId, useMemo, useRef, useState } from "react";
 import type { KeyboardEvent } from "react";
 import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
-import { horizontalStep } from "../lib/direction";
-import { monthKey, pad, parseIsoDate } from "../lib/dates";
+import { monthKey, parseIsoDate } from "../lib/dates";
+import { upperFirst } from "../lib/text-case";
 import { useKitLabels } from "../i18n/kit-labels";
-import { FOCUS_RING_WIDTH } from "./focus-ring";
 import { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar, type MiniCalendarProps } from "./mini-calendar";
-import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker";
+import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker-labels";
+import { MonthGrid, clampKey, firstOfKey, shiftKey, yearArrowsBlocked } from "./month-grid";
 import { claimEscape } from "../hooks/use-dismiss";
 
 // ── Month jump (`monthJump`, kastlan) ─────────────────────────────────────
 
-/** A "YYYY-MM" key as a count of months, and back: month arithmetic with no `Date`
- *  rollover to step around. */
-const monthIndex = (key: string) => Number(key.slice(0, 4)) * 12 + Number(key.slice(5, 7)) - 1;
-const keyOfIndex = (index: number) => `${String(Math.floor(index / 12)).padStart(4, "0")}-${pad((index % 12) + 1)}`;
-const shiftKey = (key: string, delta: number) => keyOfIndex(monthIndex(key) + delta);
-/** The 1st of a "YYYY-MM" month, for `Intl` to name. */
-const firstOfKey = (key: string) => new Date(Number(key.slice(0, 4)), Number(key.slice(5, 7)) - 1, 1);
-
-/** Upper-case the first letter only, as `MonthPicker` does: "julio de 2026" heads a
- *  panel as "Julio de 2026" — not "Julio De 2026", which CSS `capitalize` would write. */
-const upperFirst = (text: string, locale: string | undefined) =>
-  text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
-
-/** Months per row of the month grid — `MonthPicker`'s 4×3. */
-const MONTH_COLUMNS = 3;
-
 /**
  * The month `MiniCalendar` opens on — the selection, or today, pulled inside the
  * bounds — worked out the way it does, so the caption drawn over a calendar that was
@@ -76,14 +60,14 @@ interface DayGridMount {
  * calendar's. What this keeps is `shown`, the month on screen, for the caption — fed by
  * the arrows here, by the calendar's `onMonthChange` (PageUp, arrowing off the edge),
  * and by the value, whose changes the calendar follows WITHOUT reporting them (a preset
- * in `commit="apply"` moves the grid to its start). That last one is mirrored below with
+ * under `apply` moves the grid to its start). That last one is mirrored below with
  * the calendar's own rule, and when it lands in another month the day grid is remounted
  * there rather than steered by `month`: a `month` that changes in the same render as the
  * value would win over the value's day, and the grid's tab stop would land on the
  * month's same-numbered day instead of the preset's start.
  *
- * The month grid is `MonthPicker`'s, redrawn here because that one is internal to its
- * file; same roles, keys and words (`monthPicker` labels).
+ * The month grid is `MonthPicker`'s own {@link MonthGrid} (month-grid.tsx, one since
+ * 0.52 — refactor audit 2026-10-30, DUP-11), with its words (`monthPicker` labels).
  */
 function JumpCalendar({
   from = "",
@@ -104,14 +88,11 @@ function JumpCalendar({
   const captionId = `${id}-caption`;
   const hintId = `${id}-hint`;
   const captionRef = useRef<HTMLButtonElement>(null);
-  const monthsRef = useRef<HTMLDivElement>(null);
 
   const lo = min ? parseIsoDate(min) : null;
   const hi = max ? parseIsoDate(max) : null;
   const minKey = lo ? monthKey(lo) : null;
   const maxKey = hi ? monthKey(hi) : null;
-  const outOfBounds = (key: string) => Boolean((minKey && key < minKey) || (maxKey && key > maxKey));
-  const clampKey = (key: string) => (minKey && key < minKey ? minKey : maxKey && key > maxKey ? maxKey : key);
 
   const [view, setView] = useState<"days" | "months">("days");
   const [shown, setShown] = useState(() => openingMonth(from, to, lo, hi));
@@ -135,16 +116,6 @@ function JumpCalendar({
     }
   }
 
-  // A month cell that has to take focus once it exists: opening the grid, and arrowing
-  // across a year's edge, which relabels the same twelve buttons.
-  const pendingFocus = useRef<string | null>(null);
-  useEffect(() => {
-    const key = pendingFocus.current;
-    if (!key) return;
-    pendingFocus.current = null;
-    monthsRef.current?.querySelector<HTMLElement>(`[data-month="${key}"]`)?.focus();
-  });
-
   const showMonth = (key: string) => {
     setShown(key);
     // Follows by `month`: the calendar keeps the day of the month (clamped), and the
@@ -152,9 +123,8 @@ function JumpCalendar({
     setDayGrid((d) => ({ ...d, month: key }));
   };
   const openMonths = () => {
-    const start = clampKey(shown);
-    pendingFocus.current = start;
-    setActive(start);
+    // The grid takes the focus onto this month as it mounts.
+    setActive(clampKey(shown, minKey, maxKey));
     setView("months");
   };
   const closeMonths = (focusCaption: boolean) => {
@@ -168,10 +138,6 @@ function JumpCalendar({
     // Picked to go there: the focus goes with it, onto the days.
     setDayGrid((d) => ({ key: d.key + 1, month: key, focus: true }));
   };
-  const moveActive = (key: string, focus: boolean) => {
-    if (focus) pendingFocus.current = key;
-    setActive(key);
-  };
 
   const inDays = view === "days";
   // Escape in the month grid is "back", not "close": the month grid is a step INSIDE the
@@ -185,54 +151,12 @@ function JumpCalendar({
     closeMonths(true);
   };
 
-  const onMonthKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === "Escape") return escapeToDays(e);
-    // Left and right are visual: the grid runs the other way in a right-to-left panel.
-    const step = horizontalStep(e.key, e.currentTarget);
-    const col = (monthIndex(active) % 12) % MONTH_COLUMNS;
-    let delta: number;
-    switch (step ? "horizontal" : e.key) {
-      case "horizontal":
-        delta = step;
-        break;
-      case "ArrowUp":
-        delta = -MONTH_COLUMNS;
-        break;
-      case "ArrowDown":
-        delta = MONTH_COLUMNS;
-        break;
-      case "Home":
-        delta = -col;
-        break;
-      case "End":
-        delta = MONTH_COLUMNS - 1 - col;
-        break;
-      case "PageUp":
-        delta = -12;
-        break;
-      case "PageDown":
-        delta = 12;
-        break;
-      default:
-        return;
-    }
-    // Before the no-op check: these keys also scroll the panel.
-    e.preventDefault();
-    if (delta !== 0) moveActive(shiftKey(active, delta), true);
-  };
-
   const year = Number(active.slice(0, 4));
-  // A year arrow is dead once every month of the year it leads to is out of bounds.
-  const prevYearBlocked = Boolean(minKey && year - 1 < Number(minKey.slice(0, 4)));
-  const nextYearBlocked = Boolean(maxKey && year + 1 > Number(maxKey.slice(0, 4)));
-  const prevBlocked = !inDays && prevYearBlocked;
-  const nextBlocked = !inDays && nextYearBlocked;
+  const yearBlocked = yearArrowsBlocked(active, minKey, maxKey);
+  const prevBlocked = !inDays && yearBlocked.previous;
+  const nextBlocked = !inDays && yearBlocked.next;
 
   const longName = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
-  const shortNames = useMemo(() => {
-    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
-    return Array.from({ length: 12 }, (_, i) => upperFirst(fmt.format(new Date(2000, i, 1)), locale));
-  }, [locale]);
   const caption = inDays
     ? upperFirst(longName.format(firstOfKey(shown)), locale)
     : new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date(year, 0, 1));
@@ -242,9 +166,6 @@ function JumpCalendar({
   const toDate = parseIsoDate(to);
   const fromKey = fromDate ? monthKey(fromDate) : null;
   const toKey = toDate ? monthKey(toDate) : null;
-  const low = fromKey ?? toKey;
-  const high = toKey ?? fromKey;
-  const currentKey = monthKey(new Date());
 
   // Aria-disabled rather than disabled, like the day cells: a focused button that
   // turns `disabled` drops the focus to <body>, mid-panel.
@@ -262,8 +183,9 @@ function JumpCalendar({
           aria-label={inDays ? calendarText.previousMonth : monthText.previousYear}
           aria-disabled={prevBlocked || undefined}
           onClick={() => {
+            // Focus stays on the arrow being pressed — only the grid moves.
             if (inDays) showMonth(shiftKey(shown, -1));
-            else if (!prevBlocked) moveActive(shiftKey(active, -12), false);
+            else if (!prevBlocked) setActive(shiftKey(active, -12));
           }}
           onKeyDown={escapeToDays}
           className={arrow}
@@ -294,7 +216,7 @@ function JumpCalendar({
           aria-disabled={nextBlocked || undefined}
           onClick={() => {
             if (inDays) showMonth(shiftKey(shown, 1));
-            else if (!nextBlocked) moveActive(shiftKey(active, 12), false);
+            else if (!nextBlocked) setActive(shiftKey(active, 12));
           }}
           onKeyDown={escapeToDays}
           className={arrow}
@@ -323,58 +245,20 @@ function JumpCalendar({
           onMonthChange={showMonth}
         />
       ) : (
-        <div ref={monthsRef} role="grid" aria-labelledby={captionId} className="grid gap-1">
-          {Array.from({ length: 12 / MONTH_COLUMNS }, (_, row) => (
-            <div key={row} role="row" className="grid grid-cols-3 gap-1">
-              {Array.from({ length: MONTH_COLUMNS }, (_, c) => {
-                const index = row * MONTH_COLUMNS + c;
-                const key = keyOfIndex(year * 12 + index);
-                const disabled = outOfBounds(key);
-                const selected = low !== null && high !== null && key >= low && key <= high;
-                const end = key === fromKey || key === toKey;
-                const current = key === currentKey;
-                return (
-                  <button
-                    key={c}
-                    type="button"
-                    role="gridcell"
-                    data-month={key}
-                    tabIndex={key === active ? 0 : -1}
-                    aria-label={monthText.month(longName.format(firstOfKey(key)))}
-                    aria-selected={selected}
-                    aria-disabled={disabled || undefined}
-                    aria-current={current ? "date" : undefined}
-                    onClick={() => {
-                      // The guard `disabled` would have been: out-of-bounds months stay
-                      // focusable, so the roving tab stop never falls into a hole.
-                      if (!disabled) pick(key);
-                    }}
-                    onKeyDown={onMonthKeyDown}
-                    className={cn(
-                      // 44px rows: the touch-target size, and four of them stand as tall
-                      // as a month of days, so the panel does not jump as the views swap.
-                      "h-11 rounded px-1 text-sm tabular-nums transition-colors",
-                      FOCUS_RING_WIDTH,
-                      "focus-visible:outline-none focus-visible:ring-inset",
-                      // A --brand ring on a --brand fill exists only in the DOM.
-                      end && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
-                      disabled
-                        ? "cursor-not-allowed text-placeholder"
-                        : end
-                          ? "bg-brand text-brand-contrast hover:bg-brand-hover"
-                          : selected
-                            ? "bg-brand-soft font-medium text-brand-muted hover:bg-brand-soft-hover"
-                            : "text-primary hover:bg-hover",
-                      current && !selected && !disabled && "ring-1 ring-inset ring-strong",
-                    )}
-                  >
-                    {shortNames[index]}
-                  </button>
-                );
-              })}
-            </div>
-          ))}
-        </div>
+        <MonthGrid
+          active={active}
+          onActiveChange={setActive}
+          onPick={pick}
+          from={fromKey}
+          to={toKey}
+          minKey={minKey}
+          maxKey={maxKey}
+          currentKey={monthKey(new Date())}
+          locale={locale}
+          cellName={monthText.month}
+          labelledBy={captionId}
+          onEscape={escapeToDays}
+        />
       )}
     </div>
   );

package/src/components/legal-page.tsx

@@ -7,7 +7,7 @@ import type { LabelOverride, UiKitLabelOverrides } from "../i18n/kit-labels";
 import { useNoIndex } from "../hooks/use-noindex";
 import { cn } from "../lib/cn";
 import { parseIsoDate } from "../lib/dates";
-import { formatDate } from "../lib/format";
+import { useDayFormatter } from "../lib/day-format";
 import { Checkbox } from "./checkbox";
 import type { CheckboxProps } from "./checkbox";
 import {
@@ -347,7 +347,9 @@ export interface LegalPageProps {
    * 2026-10-29, gap 8). Shown under the title as `legal.updated` — "Last updated:
    * 29 October 2026", "Stand: 29. Oktober 2026" — with the date written out in `locale`,
    * so it follows the page's language like every other kit word, the switch to the
-   * binding version included. Left out, no line. One date per page: the imprint, the
+   * binding version included. Since 0.52 the `<UiKitProvider formatDate>` writes it when
+   * the app set one (its date preference, asked for the day without a weekday), as every
+   * other day the kit prints. Left out, no line. One date per page: the imprint, the
    * privacy policy and the terms change on their own days.
    *
    * An app that records which terms someone accepted (keksdose) stores the terms page's
@@ -524,6 +526,7 @@ export function LegalPage({
   useNoIndex(noIndex);
   const labels = useLegalLabels(labelsProp);
   const locale = useKitLocale(localeProp) ?? "en";
+  const day = useDayFormatter(undefined, locale);
   // Not memoised: `countryName` keeps one `Intl.DisplayNames` per locale, so naming the
   // country again is a lookup, and the context is rebuilt with the children anyway.
   const operatorText = legalOperatorText(operator, locale);
@@ -564,17 +567,17 @@ export function LegalPage({
       )}
     </p>
   ) : undefined;
-  // A calendar day, written out in the page's language; `formatDate` reads a bare
-  // "YYYY-MM-DD" as that day in every zone. A malformed date shows no line rather than a
+  // A calendar day, in the page's language — under the app's date preference when the
+  // provider has one (0.52, refactor audit 2026-10-30, DUP-2: "a label that identifies a
+  // day follows the preference"), else written out ("29 October 2026"); a bare
+  // "YYYY-MM-DD" is that day in every zone. A malformed date shows no line rather than a
   // made-up one ("2026-02-30" would roll over into March).
   const updatedValid = updated !== undefined && parseIsoDate(updated) !== null;
   if (updated !== undefined && !updatedValid) {
     warnLegalOnce(`LegalPage: updated="${updated}" is not a "YYYY-MM-DD" date; no "Last updated" line is shown.`);
   }
   const updatedLine = updatedValid ? (
-    <time dateTime={updated}>
-      {(labels.updated ?? DEFAULT_LEGAL_LABELS.updated!)(formatDate(updated, "long", { locale }))}
-    </time>
+    <time dateTime={updated}>{(labels.updated ?? DEFAULT_LEGAL_LABELS.updated!)(day(updated, { style: "long" }))}</time>
   ) : undefined;
   const summaryLabels = labels.summary ?? DEFAULT_LEGAL_LABELS.summary!;
   const SummaryHeading = context.sectionHeading;

package/src/components/legal.tsx

@@ -120,8 +120,10 @@ function languageName(code: string, locale: string): string {
   }
 }
 
-/** @internal The operator as the texts read it: its country named in `locale` (English
- *  without one — `countryName`'s rule, so an app that set no locale reads English). */
+/** The operator as the texts read it: its country named in `locale` (English without one —
+ *  `countryName`'s rule, so an app that set no locale reads English). Public since 0.28.1,
+ *  for an app's own footer label in the kit's words; it carried an `@internal` tag the
+ *  barrel contradicted until 0.52 (API-8, refactor audit 2026-10-30). */
 export function legalOperatorText(operator: LegalOperator, locale: string = "en"): LegalOperatorText {
   return {
     ...operator,

package/src/components/lightbox.tsx

@@ -4,6 +4,7 @@ import { ChevronLeft, ChevronRight, Download, ExternalLink, FileText, ZoomIn } f
 
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
+import { hasContent } from "../lib/presence";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useAuthedSrc } from "../hooks/use-authed-src";
 import { useBreakpoint } from "../hooks/use-breakpoint";
@@ -92,8 +93,8 @@ export interface LightboxProps {
    *  loaded by the browser as usual. */
   fetcher?: AuthedFetcher | null;
   /** Previous from the first goes to the last, and next from the last to the first.
-   *  Default `false`: the buttons at the ends are disabled, which says where the set
-   *  ends. */
+   *  Default `false`: the buttons at the ends refuse (`aria-disabled`, focus kept — 0.52),
+   *  which says where the set ends. */
   loop?: boolean;
   /** Double-click (or double-tap) the picture, or the zoom button, to see it at full
    *  size and pan by scrolling. Default `true`. Pinch zoom is the browser's own. */
@@ -114,6 +115,11 @@ export interface LightboxProps {
 /** Swipes shorter than this are taps, and a drag that is mostly vertical is a scroll. */
 const SWIPE_MIN_PX = 50;
 
+/** An end arrow's look: a disabled `overlay` IconButton's (its 50% and its resting disc
+ *  under hover), for the focusable kind — `disabled:` cannot match `aria-disabled`. */
+const ARROW_AT_END =
+  "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]";
+
 /**
  * A full-screen viewer for a set of images (and files that are not images).
  *
@@ -336,8 +342,10 @@ export function Lightbox({
         onKeyDown={onKeyDown}
         data-lightbox=""
         footer={
-          item?.caption !== undefined && item.caption !== null && item.caption !== false ? (
-            <p className="me-auto min-w-0 text-sm text-secondary">{item.caption}</p>
+          // `hasContent` (refactor audit 2026-10-30, DUP-14): a `""` caption drew an empty
+          // footer bar.
+          hasContent(item?.caption) ? (
+            <p className="me-auto min-w-0 text-sm text-secondary">{item?.caption}</p>
           ) : undefined
         }
       >
@@ -355,14 +363,19 @@ export function Lightbox({
           {slide}
         </div>
         {count > 1 && (
+          // At an end the arrow refuses rather than turns `disabled` (refactor audit
+          // 2026-10-30, INP-4, JumpCalendar's rule): the press that reaches the last
+          // picture is made with the focus on ›, and a focused button that turns
+          // `disabled` drops the focus out of the viewer's trap to <body>. kastlan's
+          // ImageGrid and keksdose's invoice review open it without `loop`.
           <>
             <IconButton
               variant="overlay"
               size="lg"
               label={labels.previous}
-              disabled={!canPrev}
+              aria-disabled={!canPrev || undefined}
               onClick={() => go(-1)}
-              className="absolute start-3 top-1/2 -translate-y-1/2"
+              className={cn("absolute start-3 top-1/2 -translate-y-1/2", ARROW_AT_END)}
               tooltip={false}
             >
               <ChevronLeft className="rtl:-scale-x-100" />
@@ -371,9 +384,9 @@ export function Lightbox({
               variant="overlay"
               size="lg"
               label={labels.next}
-              disabled={!canNext}
+              aria-disabled={!canNext || undefined}
               onClick={() => go(1)}
-              className="absolute end-3 top-1/2 -translate-y-1/2"
+              className={cn("absolute end-3 top-1/2 -translate-y-1/2", ARROW_AT_END)}
               tooltip={false}
             >
               <ChevronRight className="rtl:-scale-x-100" />

package/src/components/list.tsx

@@ -3,6 +3,7 @@ import type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement
 import { ChevronDown, ExternalLink } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { FOCUS_RING } from "./focus-ring";
 import { Spinner } from "./spinner";
 import { StatusDot } from "./status-dot";
@@ -67,8 +68,12 @@ export interface ListProps extends Omit<ComponentPropsWithoutRef<"ul">, "role">
    * A list of `limit` rows or fewer draws them all, with no such row. Rows are counted as
    * `Children` counts them: one per `ListItem`, a fragment as one.
    *
-   * The row is a button with `aria-expanded`, controlling the list; it sits in the list
-   * as `role="none"`, so a reader still hears "list, 5 items" for five rows.
+   * The row is a button with `aria-expanded`, controlling the list, in the list's last
+   * item: a reader hears "list, 6 items" for five rows and the Show all. Until 0.52 that
+   * item was `role="none"`, which left the button standing in the list itself — axe 4.13
+   * fails `aria-required-children` on it, and a `<ul>` may hold nothing but items (refactor
+   * audit 2026-10-30, found building 0.51.7; DataTable's phone list made the same call for
+   * its leading row).
    */
   limit?: number;
 }
@@ -122,7 +127,7 @@ export function List({
             dropped their state — an opened row, a typed input (audit 2026-10-30 DSP-20). */}
         {folds && !open ? rows.slice(0, Math.max(0, limit!)) : (rows ?? children)}
         {folds && (
-          <li role="none" className={MORE_PAD[density]}>
+          <li className={MORE_PAD[density]}>
             <Button
               type="button"
               variant="link"
@@ -584,7 +589,8 @@ export function ListItem({
   const lock = useLockReason(commit, disabledReason);
   const locked = lock.locked && isButton && !expandable;
   const inert = disabled || loading || locked;
-  const hasBody = children !== undefined && children !== null && children !== false;
+  // `hasContent` (refactor audit 2026-10-30, DUP-14): a `""` body opened an empty line.
+  const hasBody = hasContent(children);
   // Anything under the row's own line: the box turns into a column, and the target
   // takes its own corners and hover fill (see `children`).
   const stacked = hasBody || expandable;

package/src/components/measured-grid.tsx

@@ -6,6 +6,7 @@ import { horizontalStep } from "../lib/direction";
 // The locale's mark as far as a cell can hold it — the fields' answer, the same reason
 // (DUP-11, refactor audit 2026-10: a verbatim copy lived here).
 import { decimalMark } from "../lib/decimal-marks";
+import { roundHalfAway } from "../lib/round";
 // The cell pair reads ONE cell, where a comma has no columns to separate and so is
 // always a decimal mark; `splitRow` and `parseRows` read a pasted table, where it may
 // be either and the line decides. See the three named rules at the top of table-text.
@@ -105,9 +106,12 @@ const ALL_VIEWS: readonly MeasuredGridView[] = ["cells", "text"];
 const withMark = (cell: string, mark: "," | ".") =>
   mark === "," && isCellNumber(cell) ? cell.replace(".", ",") : cell;
 
-/** A computed number as a draft cell: rounded to `digits`, with no trailing zeros. */
+/** A computed number as a draft cell: rounded to `digits`, half away from zero as the
+ *  figure is written (1.005 → 1.01), with no trailing zeros. `toFixed` rounded the binary
+ *  value (1.00499… → "1"), a fourth rule beside lib/round's, which BUG-11 made the kit's
+ *  one (0.52, refactor audit 2026-10-30, DUP-14). */
 const formatCell = (value: number, digits: number, mark: "," | ".") =>
-  withMark(String(Number(value.toFixed(digits))), mark);
+  withMark(String(roundHalfAway(value, digits)), mark);
 
 const hasContent = (row: readonly string[]) => row.some((cell) => cell.trim() !== "");
 
@@ -187,7 +191,7 @@ export interface MeasuredGridProps extends Omit<ComponentPropsWithRef<"div">, "c
   /** A note under the table (which columns a layout expects, say). Also the grid's
    *  description. */
   hint?: ReactNode;
-  columns: MeasuredGridColumn[];
+  columns: readonly MeasuredGridColumn[];
   /** The draft — typically `useMeasuredRows().props`. */
   cells: string[][];
   onCells: (next: string[][]) => void;
@@ -332,7 +336,7 @@ interface Caret {
 }
 
 interface ViewProps {
-  columns: MeasuredGridColumn[];
+  columns: readonly MeasuredGridColumn[];
   cells: string[][];
   onCells: (next: string[][]) => void;
   disabled?: boolean;

package/src/components/mini-calendar.tsx

@@ -3,6 +3,7 @@ import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
 import { hasContent } from "../lib/presence";
+import { upperFirst } from "../lib/text-case";
 import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring";
 import { horizontalStep } from "../lib/direction";
 import { useAnnounce } from "../hooks/use-announce";
@@ -351,7 +352,10 @@ export function MiniCalendar({
   const weeks: (Date | null)[][] = [];
   for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
 
-  const monthLabel = firstOfMonth.toLocaleDateString(locale, { month: "long", year: "numeric" });
+  // The first letter only, not CSS `capitalize`, which upper-cased every word: Spanish
+  // read "Septiembre De 2026" and Hungarian "2026. Szeptember" (refactor audit
+  // 2026-10-30, DUP-11) — while the same panel with `monthJump` read them right.
+  const monthLabel = upperFirst(firstOfMonth.toLocaleDateString(locale, { month: "long", year: "numeric" }), locale);
   const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);
 
   // Weekday labels via locale, from the week's first day: the narrow one for the
@@ -524,10 +528,7 @@ export function MiniCalendar({
           <div
             id={monthId}
             aria-live="polite"
-            className={cn(
-              "capitalize",
-              lg ? "text-base font-semibold text-primary" : "text-xs font-medium text-secondary",
-            )}
+            className={lg ? "text-base font-semibold text-primary" : "text-xs font-medium text-secondary"}
           >
             {monthLabel}
           </div>

package/src/components/modal.tsx

@@ -11,6 +11,7 @@ import type {
 import { cn } from "../lib/cn";
 import { mergeRefs } from "./field-parts";
 import { useFocusTrap } from "../hooks/use-focus-trap";
+import { useBreakpoint } from "../hooks/use-breakpoint";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { useDialogParam, type DialogParam } from "../hooks/use-search-param-state";
@@ -38,6 +39,10 @@ import { runOwnKeyDown, takeEscape, useDismissLayer } from "../hooks/use-dismiss
 function useDragOffset(enabled: boolean) {
   const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);
   const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);
+  // `md:` as the panel's own CSS reads it, at the text size in force: 768 px at Normal,
+  // 960 at Large. `innerWidth >= 768` dragged the bottom sheet of an 800 px window at
+  // Large (refactor audit 2026-10-30, DUP-9). Without `matchMedia` (jsdom), the desktop.
+  const wide = useBreakpoint("md", true);
 
   const endDrag = () => {
     from.current = null;
@@ -52,7 +57,7 @@ function useDragOffset(enabled: boolean) {
       ? undefined
       : {
           onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {
-            if (e.button !== 0 || window.innerWidth < 768) return;
+            if (e.button !== 0 || !wide) return;
             const target = e.target as HTMLElement;
             // Only the panel itself and its non-interactive chrome start a drag; a
             // press inside any control belongs to that control.