@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/components/translation-review.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 
 import { usePhoneLayout } from "../hooks/use-breakpoint";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
   DEFAULT_TRANSLATION_REVIEW_FILTER,
@@ -33,17 +33,20 @@ import { BulkActionBar } from "./bulk-action-bar";
 import { Checkbox } from "./checkbox";
 import { Chip } from "./chip";
 import { DataTable } from "./data-table";
-import type { DataTableColumn, DataTableProps, MobileSwipeActions, SortState } from "./data-table";
+import type { DataTableColumn, DataTableProps, MobileSwipeActions } from "./data-table";
 import { Disclosure } from "./disclosure";
 import { SearchField } from "./search-field";
 import { toast } from "./toast";
 import type { SwipeAction } from "./swipeable-row";
 import { ToggleGroup } from "./toggle-group";
+import { useSharedTableView } from "./use-table-state";
 import { TranslationReviewEditor } from "./translation-review-editor";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels";
 import type { TranslationReviewLabels } from "./translation-review-labels";
 import { ReviewStatusChip, TranslationProgress } from "./translation-review-parts";
-import { Button, IconButton, Select } from "./ui";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+import { Select } from "./select";
 import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock";
 
 export {
@@ -165,8 +168,18 @@ export interface TranslationReviewPanelProps {
   progress?: boolean;
   /** Rows per page. Default 50. */
   pageSize?: number;
-  /** Persists the table's sort and page size (DataTable's `storageKey`). */
+  /** Persists the table's sort and page size (DataTable's `storageKey`), under the
+   *  prefix below — under {@link groupBy}, the one sort and page size every group
+   *  shares, in the same place (0.35). */
   storageKey?: string;
+  /**
+   * The `localStorage` prefix in front of `storageKey` (DataTable's `storageKeyPrefix`).
+   * Left out, it is the provider's `tableStorageKeyPrefix`, then the kit's
+   * `"hbui-table:"` — so an app that sets its prefix on `UiKitProvider` needs nothing
+   * here. Before 0.34 the panel took no prefix and its view always landed under the
+   * 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. */
   formatDate?: (iso: string) => string;
   /** Turns a callback's rejection into words. Default {@link TranslationReviewLabels.failed}. */
@@ -246,7 +259,14 @@ export interface TranslationReviewPanelProps {
    * reference; a column sort orders the rows INSIDE every group alike. Each group pages
    * on its own, `pageSize` rows at a time — a header then always stands over its own
    * rows, and paging one area does not move another — rather than one pager cutting
-   * through the headers. `storageKey` keeps persisting the ungrouped table only.
+   * through the headers. The page SIZE is one for all of them, as the sort is: a
+   * group's pager changes it everywhere.
+   *
+   * `storageKey` persists that one view — the sort and the page size — in the place the
+   * ungrouped table keeps its own (same key, same prefix, same blob), read on mount and
+   * written on a change, so a reviewer switching the grouping on or off keeps both
+   * (0.35, Kurvenschmiede; before, it persisted the ungrouped table only). What only
+   * the ungrouped table has — column widths, hidden columns — stays in the blob for it.
    *
    * Groups fold (each on its own, remembered while the panel lives), and a folded group's
    * rows are not rendered at all — only its header. Which groups start open is
@@ -290,7 +310,7 @@ export interface TranslationReviewPanelProps {
    *  the page's `h1`. */
   groupHeadingAs?: "h2" | "h3" | "h4";
   className?: string;
-  labels?: Partial<TranslationReviewLabels>;
+  labels?: LabelOverride<TranslationReviewLabels>;
 }
 
 
@@ -399,9 +419,9 @@ function useFilterEchoCheck(filterProp: Partial<TranslationReviewFilter> | undef
 /** The row's text — or, for a missing string, the line that says so. */
 function TextCell({ row, labels, clamp }: { row: TranslationRow; labels: TranslationReviewLabels; clamp?: boolean }) {
   return row.text === "" ? (
-    <span className="italic text-[var(--text-muted)]">{labels.missingText}</span>
+    <span className="italic text-muted">{labels.missingText}</span>
   ) : (
-    <span lang={row.locale} className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3")}>
+    <span lang={row.locale} className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3 large:line-clamp-none")}>
       {row.text}
     </span>
   );
@@ -444,6 +464,7 @@ export function TranslationReviewPanel({
   progress = true,
   pageSize = 50,
   storageKey,
+  storageKeyPrefix,
   formatDate,
   formatError,
   swipe = false,
@@ -546,8 +567,15 @@ export function TranslationReviewPanel({
   // has mounted and taken focus, the group that asked.
   const [confirming, setConfirming] = useState<string | null>(null);
   const confirmFocus = useRef<string | null>(null);
-  // One sort for every group's table, so a header click orders all of them alike.
-  const [groupSorts, setGroupSorts] = useState<SortState[]>([]);
+  // One view for every group's table — one sort, so a header click orders all of them
+  // alike, and one page size — kept under `storageKey` in the single table's own blob, so
+  // switching the grouping keeps both (0.35, Kurvenschmiede).
+  const groupView = useSharedTableView({
+    active: groupBy !== undefined,
+    storageKey,
+    storageKeyPrefix,
+    defaultPageSize: pageSize,
+  });
 
   const setFilter = (patch: Partial<TranslationReviewFilter>) => {
     const next = { ...filter, ...patch };
@@ -701,7 +729,7 @@ export function TranslationReviewPanel({
     {
       key: "key",
       header: labels.key,
-      cell: (r) => <code className="break-all text-xs text-[var(--text-secondary)]">{r.key}</code>,
+      cell: (r) => <code className="break-all text-xs text-secondary">{r.key}</code>,
       sortBy: (r) => r.key,
       mobileHidden: true,
     },
@@ -709,7 +737,7 @@ export function TranslationReviewPanel({
       key: "reference",
       header: referenceLabel,
       cell: (r) => (
-        <span className="line-clamp-3 whitespace-pre-line break-words text-[var(--text-secondary)]">{r.reference}</span>
+        <span className="line-clamp-3 whitespace-pre-line break-words text-secondary">{r.reference}</span>
       ),
       mobileHidden: true,
     },
@@ -858,11 +886,13 @@ export function TranslationReviewPanel({
             frame: false,
             chrome: "minimal" as const,
             maxBodyHeight: "none",
-            sorts: groupSorts,
-            onSortsChange: setGroupSorts,
+            sorts: groupView.sorts,
+            onSortsChange: groupView.setSorts,
+            pageSize: groupView.pageSize,
+            onPageSizeChange: groupView.setPageSize,
             labels: { table: group.name },
           }
-        : { storageKey })}
+        : { storageKey, storageKeyPrefix })}
       isExpanded={(r) => r.id === openId}
       onRowClick={(r) => {
         if (openId !== r.id) keepGroupOpen(group?.key);
@@ -890,8 +920,8 @@ export function TranslationReviewPanel({
       )}
       mobileCard={(r) => (
         <div className="min-w-0 space-y-1">
-          <code className="block break-all text-xs text-[var(--text-muted)]">{r.key}</code>
-          <div className="text-sm text-[var(--text-primary)]">
+          <code className="block break-all text-xs text-muted">{r.key}</code>
+          <div className="text-sm text-primary">
             <TextCell row={r} labels={labels} clamp />
           </div>
           <div className="flex flex-wrap gap-1">
@@ -951,10 +981,10 @@ export function TranslationReviewPanel({
             </Button>
           ) : undefined
         }
-        bodyClassName="space-y-0 px-0 pb-0 border-t border-[var(--border)]"
+        bodyClassName="space-y-0 px-0 pb-0 border-t border-subtle"
       >
         {body && confirming === g.key && targets.length > 0 && (
-          <div className="border-b border-[var(--border)] p-3">
+          <div className="border-b border-subtle p-3">
             <AlertBanner tone="warning" size="sm">
               <div className="min-w-0 space-y-2">
                 <p id={questionId}>{labels.confirmGroup(targets.length, name)}</p>
@@ -1050,7 +1080,7 @@ export function TranslationReviewPanel({
         </div>
         <SearchField
           className="min-w-0 md:flex-1"
-          label={labels.search}
+          aria-label={labels.search}
           value={filter.query}
           onChange={(next) => setFilter({ query: next })}
         />

package/src/components/tree-view.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
-import { Spinner } from "./ui";
+import { Spinner } from "./spinner";
 import { FOCUS_RING } from "./focus-ring";
 
 /**
@@ -68,7 +68,7 @@ export interface TreeItemState {
 
 /* ── TreeRow ─────────────────────────────────────────────────────────────── */
 
-export interface TreeRowProps extends ComponentPropsWithoutRef<"div"> {
+export interface TreeRowProps extends ComponentPropsWithRef<"div"> {
   /** 1 for a top-level row. Sets the indent and the number of guides. */
   level: number;
   /** `true`/`false` for a row that can fold; leave it `undefined` for a leaf, which
@@ -154,8 +154,8 @@ export function TreeRow({
       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)]",
+          ? "bg-active font-medium text-primary"
+          : "text-secondary",
         className,
       )}
     >
@@ -183,12 +183,12 @@ export function TreeRow({
             e.stopPropagation();
             onToggle();
           }}
-          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)}
+          className={cn("flex size-4 shrink-0 items-center justify-center rounded text-muted outline-none hover:text-primary", FOCUS_RING)}
         >
           {chevron}
         </button>
       ) : expandable ? (
-        <span data-tree-toggle="" className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-[var(--text-muted)]">
+        <span data-tree-toggle="" className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted">
           {chevron}
         </span>
       ) : (
@@ -197,11 +197,13 @@ export function TreeRow({
       {children ?? (
         <>
           {icon && <span className="flex shrink-0 items-center">{icon}</span>}
-          <span id={labelId} data-tree-label="" className="min-w-0 flex-1 truncate">
+          {/* One line at Normal; from Large up it wraps and the `min-h-8` row grows
+              (text size §10.17, round 0.34 T1: the sweep read "1020 Operat…"). */}
+          <span id={labelId} data-tree-label="" className="min-w-0 flex-1 truncate-until-large">
             {label}
           </span>
           {trailing !== undefined && trailing !== null && (
-            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-[var(--text-muted)]">
+            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted">
               {trailing}
             </span>
           )}
@@ -214,7 +216,7 @@ export function TreeRow({
 /* ── TreeView ────────────────────────────────────────────────────────────── */
 
 export interface TreeViewProps<T = unknown>
-  extends Omit<ComponentPropsWithoutRef<"ul">, "onSelect" | "children" | "defaultValue"> {
+  extends Omit<ComponentPropsWithRef<"ul">, "onSelect" | "children" | "defaultValue"> {
   items: readonly TreeNode<T>[];
   /** Open nodes, controlled. */
   expanded?: readonly string[];
@@ -544,7 +546,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-[length:var(--focus-ring-width)] [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]"
+          className="outline-none [&:focus-visible>[data-tree-row]]:ring-focus [&:focus-visible>[data-tree-row]]:ring-brand"
         >
           <TreeRow
             id={rowId}
@@ -558,7 +560,7 @@ export function TreeView<T = unknown>({
             selected={isSelected}
             loading={isLoading}
             className={cn(
-              node.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-[var(--bg-hover)]",
+              node.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-hover",
               rowClassName,
             )}
           >

package/src/components/ui-labels.ts

@@ -0,0 +1,22 @@
+// The English words of ./ui, in a module with no component code: the English catalogue
+// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk
+// like the other languages (0.34, KS U8). ./ui re-exports them.
+
+import type { CharacterCountLabels, PasswordRevealLabels } from "./field-base";
+import type { TabsLabels } from "./tabs";
+
+export const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels = {
+  show: "Show password",
+  hide: "Hide password",
+};
+
+export const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {
+  count: (used, max) => `${used} of ${max} characters`,
+  remaining: (left) => (left === 1 ? "1 character left" : `${left} characters left`),
+  limitReached: "Character limit reached",
+};
+
+export const DEFAULT_TABS_LABELS: TabsLabels = {
+  add: "Add tab",
+  remove: (tab) => `Remove ${tab}`,
+};

package/src/components/use-table-state.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useSearchParams } from "react-router";
+import { useKitTableStorageKeyPrefix } from "../i18n/kit-labels";
 import { readStored, writeStored } from "../lib/safe-storage";
 import {
   decodeFilterValue,
@@ -45,6 +46,13 @@ function serializePersisted(state: PersistedState): string {
   return JSON.stringify(state);
 }
 
+/** A stored page size as a table holds it — `"all"` is `Infinity` — or `fallback`. */
+function storedPageSize(stored: Partial<PersistedState>, fallback: number): number {
+  if (stored.pageSize === "all") return Infinity;
+  if (typeof stored.pageSize === "number" && stored.pageSize > 0) return stored.pageSize;
+  return fallback;
+}
+
 // ---------- URL sync helpers ----------
 
 const URL_FILTER_PREFIX = "f.";
@@ -251,8 +259,8 @@ function writeUrlState<T>(
  * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the
  *   per-table identity; `urlSync` is opt-in because only some tables want their view in
  *   a shareable address.
- * * **A controlled filter or sort that changes sends the table back to page 1.** See
- *   the note at the reset below.
+ * * **A controlled filter, sort or page size that changes sends the table back to page
+ *   1.** See the note at the reset below.
  */
 export function useTableState<T>({
   columns,
@@ -262,6 +270,7 @@ export function useTableState<T>({
   defaultPageSize,
   sortsProp,
   filtersProp,
+  pageSizeProp,
 }: {
   columns: DataTableColumn<T>[];
   storageKey?: string;
@@ -270,6 +279,7 @@ export function useTableState<T>({
   defaultPageSize: number;
   sortsProp?: SortState[];
   filtersProp?: FilterState;
+  pageSizeProp?: number;
 }) {
   const { enabled: urlSync, prefix: urlPrefix } = resolveTableUrlSync(urlSyncOption);
   const keys = useMemo(() => urlKeys(urlPrefix), [urlPrefix]);
@@ -312,21 +322,21 @@ export function useTableState<T>({
   // is never painted and never written to the URL. Not on mount: a deep link's `p=3`
   // must survive the owner's first render. (In `serverPagination` mode this state is
   // unused — the owner's `page` is the page, and resetting it stays the owner's job.)
+  // A controlled page size counts too: the groups of `TranslationReviewPanel` share one,
+  // and a group paged deep into its rows starts over when another group's pager changes it.
   const controlledSig =
-    sortsProp !== undefined || filtersProp !== undefined
-      ? JSON.stringify([sortsProp ?? null, filtersProp ?? null])
+    sortsProp !== undefined || filtersProp !== undefined || pageSizeProp !== undefined
+      ? JSON.stringify([sortsProp ?? null, filtersProp ?? null, String(pageSizeProp)])
       : null;
   const [seenControlledSig, setSeenControlledSig] = useState(controlledSig);
   if (seenControlledSig !== controlledSig) {
     setSeenControlledSig(controlledSig);
     setPage(0);
   }
-  const [pageSize, setPageSize] = useState<number>(() => {
-    if (urlInitial.pageSize !== undefined) return urlInitial.pageSize;
-    if (initial.pageSize === "all") return Infinity;
-    if (typeof initial.pageSize === "number" && initial.pageSize > 0) return initial.pageSize;
-    return defaultPageSize;
-  });
+  const [internalPageSize, setPageSize] = useState<number>(() =>
+    urlInitial.pageSize !== undefined ? urlInitial.pageSize : storedPageSize(initial, defaultPageSize),
+  );
+  const pageSize = pageSizeProp ?? internalPageSize;
   const [widths, setWidths] = useState<Record<string, number>>(() => initial.widths ?? {});
   const [hiddenCols, setHiddenCols] = useState<Set<string>>(() => new Set(initial.hidden ?? []));
   const [showSettings, setShowSettings] = useState(false);
@@ -398,6 +408,77 @@ export function useTableState<T>({
   };
 }
 
+// ---------- One view over several tables ----------
+
+/** What {@link useSharedTableView} keeps. */
+export interface SharedTableView {
+  sorts: SortState[];
+  setSorts: (next: SortState[]) => void;
+  /** `Infinity` for "all", as a table holds it. */
+  pageSize: number;
+  setPageSize: (next: number) => void;
+}
+
+/**
+ * One table view — the sort and the page size — for an owner that draws it as SEVERAL
+ * tables over one `storageKey`: `TranslationReviewPanel`'s groups, which sort and page
+ * alike (0.35, Kurvenschmiede: its grouped review stored no view at all). Pass them to
+ * each table as `sorts`/`onSortsChange` and `pageSize`/`onPageSizeChange`.
+ *
+ * Kept in the very blob a `DataTable` with that `storageKey` keeps, not in a format of
+ * its own, so the single table and the groups read each other's view. What the blob
+ * holds besides (filters, column widths, hidden columns) is carried over as stored, for
+ * the single table to find as it left it. Read when `active` turns on — on mount, or
+ * when the owner switches to this view — and written on a change, never on a read. The
+ * prefix resolves as DataTable's does: prop > provider > the kit's.
+ */
+export function useSharedTableView({
+  active,
+  storageKey,
+  storageKeyPrefix,
+  defaultPageSize,
+}: {
+  active: boolean;
+  storageKey?: string;
+  storageKeyPrefix?: string;
+  defaultPageSize: number;
+}): SharedTableView {
+  const providerPrefix = useKitTableStorageKeyPrefix();
+  const prefix = storageKeyPrefix ?? providerPrefix ?? DEFAULT_PERSIST_PREFIX;
+  const read = () => {
+    const stored = active ? loadPersisted(storageKey, prefix) : {};
+    return { sorts: normalizeSorts(stored.sort), pageSize: storedPageSize(stored, defaultPageSize) };
+  };
+  const [view, setView] = useState(read);
+  // Adjusted during render when `active` turns on, so the first render of the groups
+  // already has the view the single table left, not a frame of the default.
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
+    if (active) setView(read());
+  }
+  const change = (patch: Partial<typeof view>) => {
+    const next = { ...view, ...patch };
+    setView(next);
+    if (!active || !storageKey) return;
+    const stored = loadPersisted(storageKey, prefix);
+    const blob: PersistedState = {
+      sort: next.sorts,
+      filters: stored.filters ?? {},
+      pageSize: next.pageSize === Infinity ? "all" : next.pageSize,
+      widths: stored.widths,
+      hidden: stored.hidden,
+    };
+    writeStored(prefix + storageKey, serializePersisted(blob));
+  };
+  return {
+    sorts: view.sorts,
+    setSorts: (sorts) => change({ sorts }),
+    pageSize: view.pageSize,
+    setPageSize: (pageSize) => change({ pageSize }),
+  };
+}
+
 // ---------- Owner-held table state, mirrored to the URL ----------
 
 export interface UseTableUrlStateOptions<T> {

package/src/components/user-avatar.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { personInitials } from "../lib/person-name";
 import type { PersonName } from "../lib/person-name";
@@ -31,7 +31,7 @@ const AVATAR_SIZES = {
 } as const;
 
 const CHIP =
-  "inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--bg-inverse)] font-semibold text-[var(--text-inverse)]";
+  "inline-flex shrink-0 items-center justify-center rounded-full bg-inverse font-semibold text-inverse";
 
 /** The dot grows with the avatar: 8px on `sm`, 10px on `md` (keksdose's), 12px on `lg`. */
 const BADGE_SIZES: Record<keyof typeof AVATAR_SIZES, StatusDotSize> = { sm: "sm", md: "md", lg: "lg" };
@@ -47,7 +47,7 @@ export interface UserAvatarBadge {
 
 /** A `<span>`'s props, minus `children`: the content is the initials this computes
  *  from `person`/`name`/`email`, so there is nothing for a caller to put inside. */
-export interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+export interface UserAvatarProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
   name?: string | null;
   email?: string | null;
   /**
@@ -69,9 +69,9 @@ export interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<"span">,
    * in the surface colour so it reads as its own mark (keksdose account-menu ~385,
    * top-bar :152). Its `label` is read as text where the dot sits — inside a button
    * named by its content it joins that name. In `TopBarActionMenu`'s `trigger` the
-   * button is named by the menu's `ariaLabel` followed by this label: "Account menu
+   * button is named by the menu's `aria-label` followed by this label: "Account menu
    * 3 unread". The initials stay hidden either way, so the person's name is NOT part
-   * of it — put it in `ariaLabel` ("Marcel Eifert, account menu") if it should be.
+   * of it — put it in `aria-label` ("Marcel Eifert, account menu") if it should be.
    */
   badge?: UserAvatarBadge | null;
 }

package/src/components/wizard-stepper.tsx

@@ -5,11 +5,12 @@ import { cn } from "../lib/cn";
 export function WizardStepper({
   steps,
   current,
-  ariaLabel,
+  "aria-label": ariaLabel,
 }: {
   steps: { key: string; label: string }[];
   current: string;
-  ariaLabel?: string;
+  /** Names the list of steps ("Import steps"). */
+  "aria-label"?: string;
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
   return (
@@ -20,16 +21,16 @@ export function WizardStepper({
     <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabel}>
       {steps.map((step, i) => (
         <li key={step.key} className="flex items-center gap-1">
-          {i > 0 && <span className="w-4 border-t border-[var(--border)]" />}
+          {i > 0 && <span className="w-4 border-t border-subtle" />}
           <span
             aria-current={step.key === current ? "step" : undefined}
             className={cn(
               "rounded-full px-2 py-0.5",
               i === currentIndex
-                ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium"
+                ? "bg-inverse text-inverse font-medium"
                 : i < currentIndex
-                  ? "text-[var(--text-secondary)]"
-                  : "text-[var(--text-placeholder)]",
+                  ? "text-secondary"
+                  : "text-placeholder",
             )}
           >
             {step.label}

package/src/components/write-lock-labels.ts

@@ -0,0 +1,9 @@
+// The English words of ./write-lock, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./write-lock re-exports them.
+
+import type { WriteLockLabels } from "./write-lock";
+
+export const DEFAULT_WRITE_LOCK_LABELS: WriteLockLabels = {
+  reason: "You can view this but not change it.",
+};

package/src/components/write-lock.tsx

@@ -1,6 +1,8 @@
 import { createContext, useContext, useMemo } from "react";
 import type { ReactNode } from "react";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { hasContent } from "../lib/presence";
+import { DEFAULT_WRITE_LOCK_LABELS } from "./write-lock-labels";
 
 /** The words {@link WriteLockProvider} renders on its own behalf. */
 export interface WriteLockLabels {
@@ -8,9 +10,8 @@ export interface WriteLockLabels {
   reason: string;
 }
 
-export const DEFAULT_WRITE_LOCK_LABELS: WriteLockLabels = {
-  reason: "You can view this but not change it.",
-};
+// Defined in ./write-lock-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_WRITE_LOCK_LABELS };
 
 /**
  * What kind of lock a source is (docs/billing-harmonization.md §12.36, ui-kit 0.33).
@@ -96,15 +97,12 @@ export interface WriteLockProviderProps {
    * `labels.reason`.
    */
   holds?: readonly WriteLockHold[];
-  labels?: Partial<WriteLockLabels>;
+  labels?: LabelOverride<WriteLockLabels>;
   children?: ReactNode;
 }
 
-// `null`/`""`/`false` count as "no reason given": a lock whose tooltip is empty would be
-// a disabled button that cannot say why, the thing this replaces.
-function given(reason: ReactNode): boolean {
-  return reason !== undefined && reason !== null && reason !== false && reason !== "";
-}
+// `null`/`""`/`false` count as "no reason given" (`hasContent`): a lock whose tooltip is
+// empty would be a disabled button that cannot say why, the thing this replaces.
 
 /**
  * The read-only lock — **everything renders; only the commit is locked.**
@@ -150,7 +148,7 @@ export function WriteLockProvider({ locked, reason, kind, holds, labels, childre
   const several = locked && holds !== undefined && holds.length > 0 ? holds : undefined;
   const firstKind = several ? several[0].kind : kind;
   const firstGiven = several ? several[0].reason : reason;
-  const firstReason = given(firstGiven) ? firstGiven : fallback;
+  const firstReason = hasContent(firstGiven) ? firstGiven : fallback;
   // Memoised on the first hold's kind and sentence — the strings an app passes — so a
   // one-source lock keeps one context value across renders; a list of several is
   // memoised on its own identity.
@@ -158,7 +156,7 @@ export function WriteLockProvider({ locked, reason, kind, holds, labels, childre
   const value = useMemo<WriteLock>(() => {
     if (!locked) return UNLOCKED;
     const all = many
-      ? many.map((hold) => ({ kind: hold.kind, reason: given(hold.reason) ? hold.reason : fallback }))
+      ? many.map((hold) => ({ kind: hold.kind, reason: hasContent(hold.reason) ? hold.reason : fallback }))
       : [{ kind: firstKind, reason: firstReason }];
     return { locked: true, reason: firstReason, kind: firstKind, holds: all };
   }, [locked, many, firstKind, firstReason, fallback]);