@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/components/server-wake.tsx

@@ -1,13 +1,12 @@
-import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import type { CSSProperties, RefObject } from "react";
+import { useSyncExternalStore } from "react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { clearanceAbove, subscribeFloating } from "../lib/floating-stack";
 import { serverWake } from "../lib/server-wake";
 import type { ServerWakeStage, ServerWakeWatcher } from "../lib/server-wake";
 import { AlertBanner } from "./alert-banner";
-import { Spinner } from "./ui";
+import { Spinner } from "./spinner";
+import { DEFAULT_SERVER_WAKE_LABELS } from "./server-wake-labels";
 
 /**
  * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's
@@ -15,11 +14,23 @@ import { Spinner } from "./ui";
  * unanswered read it says the app is still loading, and after seven it says WHY — the
  * server sleeps when nobody is using it, and the first request has to start it again.
  *
- * Corner-anchored and non-blocking on purpose. The pages underneath already show their
- * own skeletons; what was missing is the explanation, not another overlay. Start
- * corner, above the phone's bottom nav, so it collides with neither the centred toasts
- * nor the nav bar — and above any FloatingActionButton it would otherwise cover
- * (kastlan's offline pill shares the corner; on a phone the notice spans both).
+ * Non-blocking on purpose. The pages underneath already show their own skeletons; what
+ * was missing is the explanation, not another overlay.
+ *
+ * **At the top, centred, and it takes no taps** (0.34, round C13; keksdose live #399:
+ * *"Move the notification to the top where it can be better seen and not block any
+ * sticky elements."*). Until 0.34 it sat in the bottom-start corner above the phone's
+ * nav — exactly where a phone keeps what floats: a register's action group, a
+ * FloatingActionButton, a dialog's sticky Create/Cancel footer — and a cold start is
+ * when that Create is wanted first. It rose above a FloatingActionButton it measured,
+ * but a sticky footer is not one. The top bar is the one band whose contents nobody
+ * needs while the server is still waking, and `pointer-events-none` lets a tap through
+ * to whatever the notice does cover: it is a status line with nothing in it to press.
+ * Below the status bar and inside the side insets of a notched phone (`safe-area-inset-*`);
+ * its width is in rem, so at the Large text size it is wider and wraps less, and the
+ * screen's edges still stop it. The toasts stay readable: a phone shows them at the
+ * bottom, and a desktop `TOASTER_OFFSET_TOP` (4rem) down, where they draw over a long
+ * notice rather than under it (`--z-toast` is above this `z-50`).
  *
  * Mount it next to the router, not inside the app layout, so it also covers the login
  * screen and the landing page — a cold start is at its most confusing exactly there,
@@ -36,11 +47,8 @@ export interface ServerWakeLabels {
   waking: (appName?: string) => string;
 }
 
-export const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels = {
-  slow: "Still loading — this is taking longer than usual.",
-  waking: (appName) =>
-    `The server goes to sleep when nobody is using ${appName ?? "the app"}, so the first request after a break has to start it again. That can take a moment — nothing is lost, the page fills in by itself.`,
-};
+// Defined in ./server-wake-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SERVER_WAKE_LABELS };
 
 // ── Hook ──────────────────────────────────────────────────────────────────────
 
@@ -60,47 +68,19 @@ export interface ServerWakeNoticeProps {
   /** Named in the `waking` sentence ("…when nobody is using Keksdose…"). Default: the
    *  label says "the app". */
   appName?: string;
-  labels?: Partial<ServerWakeLabels>;
+  labels?: LabelOverride<ServerWakeLabels>;
   /**
-   * The height to keep clear at the bottom — AppShell's bottom nav. Default: its
-   * measured `--app-nav-h` (0px from `md` up and on pages without a shell, such as the
-   * login screen), so nothing has to be passed under an AppShell. The safe area is
-   * respected either way, and a 1rem gap is added. Numbers are px.
+   * @deprecated 0.34 — drop it; removed in 0.35. The notice sits at the TOP of the
+   * screen since 0.34, so there is no bottom nav to clear and this does nothing. It was
+   * the height kept clear at the bottom (AppShell's `--app-nav-h`).
    */
   navOffset?: string | number;
-  /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom
-   *  offset is an inline style, so move it vertically with {@link navOffset}. Either
-   *  way it rises above a visible FloatingActionButton under it. */
+  /** Extra classes on the fixed anchor — a different width (`max-w-*`), or another
+   *  `top-*` for an app that wants it under its top bar rather than over it. Merged, so
+   *  a class given here replaces the kit's of the same kind. */
   className?: string;
 }
 
-const px = (v: string | number) => (typeof v === "number" ? `${v}px` : v);
-
-/** Gap between the notice and a floating control it stacks above. */
-const STACK_GAP = "0.5rem";
-
-/**
- * How far off the bottom the notice must sit to clear the FloatingActionButtons under
- * it (`lib/floating-stack.ts`), re-measured when one appears, goes, resizes or the
- * viewport does — or `null` while it is idle or nothing is under it. kastlan 0.18.
- */
-function useFloatingClearance(anchor: RefObject<HTMLDivElement | null>, stage: ServerWakeStage): number | null {
-  const [clearance, setClearance] = useState<number | null>(null);
-  useLayoutEffect(() => {
-    if (stage === "idle") return;
-    const measure = () => setClearance(clearanceAbove(anchor.current));
-    measure();
-    const unsubscribe = subscribeFloating(measure);
-    window.addEventListener("resize", measure);
-    return () => {
-      unsubscribe();
-      window.removeEventListener("resize", measure);
-    };
-  }, [anchor, stage]);
-  // Idle, the last measurement is stale and nothing shows anyway.
-  return stage === "idle" ? null : clearance;
-}
-
 /**
  * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a
  * `role="status"` element inserted together with its text is announced unreliably
@@ -108,29 +88,28 @@ function useFloatingClearance(anchor: RefObject<HTMLDivElement | null>, stage: S
  * so the region waits empty and the banner appears inside it. keksdose's notice
  * mounted the region and the words at once.
  */
-export function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }: ServerWakeNoticeProps) {
+export function ServerWakeNotice({ watcher, appName, labels: labelsProp, className }: ServerWakeNoticeProps) {
   const labels = useKitLabels("serverWake", DEFAULT_SERVER_WAKE_LABELS, labelsProp);
   const stage = useServerWakeStage(watcher);
   const waking = stage === "waking";
-  const anchor = useRef<HTMLDivElement>(null);
-  const clearance = useFloatingClearance(anchor, stage);
-  const base = `calc(max(${navOffset === undefined ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`;
-  const style: CSSProperties = {
-    bottom: clearance === null ? base : `max(${base}, calc(${clearance}px + ${STACK_GAP}))`,
-  };
 
   return (
     <div
-      ref={anchor}
       role="status"
       aria-live="polite"
       data-stage={stage}
-      style={style}
-      // `pointer-events-none` on the empty anchor: a fixed box, even an empty one, is not
-      // allowed to swallow a tap on what it sits over.
       className={cn(
-        "fixed start-4 z-50 max-w-[min(24rem,calc(100vw-2rem))]",
-        stage === "idle" && "pointer-events-none",
+        // Centred at the top (keksdose live #399): `left`/`right` hold it inside the
+        // side insets of a notched phone held sideways, `w-fit` + `mx-auto` centre it
+        // between them, and `top` puts it under the status bar.
+        "fixed z-50 mx-auto w-fit max-w-[24rem]",
+        "top-[calc(env(safe-area-inset-top,0px)+0.375rem)]",
+        "left-[max(1rem,env(safe-area-inset-left,0px))] right-[max(1rem,env(safe-area-inset-right,0px))]",
+        // No taps, ever: a status line has nothing in it to press, and whatever it
+        // covers — the top bar's buttons, a page's own header — must still answer
+        // underneath it. A link or button inside would take its taps back (none today:
+        // the labels are text), so the rule cannot quietly disable a control later.
+        "pointer-events-none [&_:is(a,button)]:pointer-events-auto",
         className,
       )}
     >

package/src/components/settings-fields.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import { Select } from "./ui";
-import type { SelectProps } from "./ui";
+import { Select } from "./select";
+import type { SelectProps } from "./select";
 import { ToggleGroup } from "./toggle-group";
 import type { ToggleGroupBaseProps } from "./toggle-group";
 import type { ThemePreference } from "../theme/theme-store";
@@ -10,6 +10,9 @@ import { CONTRAST_MODES } from "../theme/contrast";
 import type { ContrastMode } from "../theme/contrast";
 import { useAppearanceLabels } from "./appearance-labels";
 import type { AppearanceLabels } from "./appearance-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
+import { LanguageSelect } from "./language-select";
+import type { KitLanguageCode } from "../i18n/languages";
 
 /**
  * App-agnostic settings-field components (feedback #333): the language + theme
@@ -27,8 +30,11 @@ import type { AppearanceLabels } from "./appearance-labels";
  * itself because no caller of this wants the event. The rest — `disabled`, `required`,
  * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes
  * this a settings FIELD rather than a fixed widget.
+ *
+ * The `Select` half of {@link ThemeSettingProps}; until 0.34 it carried that name, which
+ * left the toggle out of the type the component is documented by (API-9).
  */
-export interface ThemeSettingProps
+export interface ThemeSettingSelectProps
   extends Omit<SelectProps, "value" | "onChange" | "children"> {
   /** The `Select` (default). See {@link ThemeSettingToggleProps} for `"toggle"`. */
   variant?: "select";
@@ -57,7 +63,7 @@ export interface ThemeSettingProps
  * system" (keksdose's control, §8).
  */
 export interface ThemeSettingToggleProps
-  extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label" | "ariaLabel"> {
+  extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label"> {
   variant: "toggle";
   value: ThemePreference;
   onChange: (value: ThemePreference) => void;
@@ -72,7 +78,14 @@ export interface ThemeSettingToggleProps
   id?: string;
 }
 
-export function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps) {
+/**
+ * What {@link ThemeSetting} takes: the select ({@link ThemeSettingSelectProps}, the
+ * default) or the segmented control ({@link ThemeSettingToggleProps}, `variant="toggle"`)
+ * — the union, as {@link ProfileSettingProps} is (API-9).
+ */
+export type ThemeSettingProps = ThemeSettingSelectProps | ThemeSettingToggleProps;
+
+export function ThemeSetting(props: ThemeSettingProps) {
   if (props.variant === "toggle") {
     const { variant: _variant, value, onChange, label, optionLabels, overflow = "wrap", ...rest } = props;
     return (
@@ -106,26 +119,42 @@ export function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps)
   );
 }
 
-/** See {@link ThemeSettingProps}: a `Select`'s props with the value and the change
+/** See {@link ThemeSettingSelectProps}: a `Select`'s props with the value and the change
  *  handler re-typed to the language CODE the caller stores. */
 export interface LanguageSettingProps
-  extends Omit<SelectProps, "value" | "onChange" | "children"> {
+  extends Omit<SelectProps, "value" | "onChange" | "children" | "multiple"> {
+  /** The reader's language: one of the rows' codes — or any tag, shown as the row it
+   *  resolves to ({@link LanguageSelect}'s rule). */
   value: string;
   onChange: (code: string) => void;
   label: ReactNode;
+  /**
+   * The languages to offer, in order, and each one's text: {@link languageOptions}' rows
+   * as they come (the registry's names), or the app's own words for a code — keksdose's
+   * "Deutsch (Schweiz)". The text is the language's name in itself, as on every
+   * switcher, and each option carries that language's `lang`. A code the kit's registry
+   * does not know is not listed: the registry is where its `lang` comes from.
+   */
   options: { code: string; label: string }[];
   id?: string;
 }
 
-export function LanguageSetting({ value, onChange, label, options, id, ...rest }: LanguageSettingProps) {
+/**
+ * The settings row for the reader's own language: a {@link LanguageSelect} over the rows
+ * the app hands in (0.34, refactor audit 2026-10, API-7). It was a bare `Select` over the
+ * same rows, so the three apps' language pickers lacked what LanguageSelect gives every
+ * option — its `lang`, by which a screen reader says "Français" in French — and showed a
+ * stored `de-AT` as nothing in particular rather than as the one German.
+ */
+export function LanguageSetting({ options, ...rest }: LanguageSettingProps) {
+  const text = new Map(options.map((option) => [option.code, option.label]));
   return (
-    <Select {...rest} id={id} label={label} value={value} onChange={(e) => onChange(e.target.value)}>
-      {options.map((o) => (
-        <option key={o.code} value={o.code}>
-          {o.label}
-        </option>
-      ))}
-    </Select>
+    <LanguageSelect
+      {...rest}
+      codes={options.map((option) => option.code as KitLanguageCode)}
+      optionLabel={(language) => text.get(language.code) ?? language.nativeName}
+      optionLang="own"
+    />
   );
 }
 
@@ -134,7 +163,7 @@ export function LanguageSetting({ value, onChange, label, options, id, ...rest }
  * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the
  * options and the value, which they own, as {@link ThemeSettingToggleProps} does.
  */
-type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "options" | "label" | "ariaLabel"> & {
+type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "options" | "label"> & {
   value: T;
   onChange: (value: T) => void;
   /**
@@ -144,7 +173,7 @@ type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "op
    */
   label?: ReactNode;
   /** The `appearance` namespace, for this instance. */
-  labels?: Partial<AppearanceLabels>;
+  labels?: LabelOverride<AppearanceLabels>;
 };
 
 export type TextSizeSettingProps = AppearanceToggleProps<TextSize>;

package/src/components/share-card-labels.ts

@@ -0,0 +1,30 @@
+// The English words of ./share-card, 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). ./share-card re-exports them.
+
+import type { ShareCardLabels } from "./share-card";
+
+export const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels = {
+  dialogTitle: "Share",
+  close: "Close",
+  email: "Email address",
+  emailOptional: "Email address (optional)",
+  emailPlaceholder: "name@example.com",
+  invalidEmail: "Enter a complete email address.",
+  role: "Role",
+  roleOf: (name) => `Role of ${name}`,
+  add: "Share",
+  whoHasAccess: "Who has access",
+  nobodyYet: "Nobody else has access yet.",
+  pending: "Pending",
+  openInvite: "Open invite link",
+  copyLink: "Copy link",
+  team: "Team",
+  teamHint: (name) => `Everyone in ${name} gets access.`,
+  remove: "Remove access",
+  removeConfirm: (name) => `Remove access for ${name}?`,
+  revokePending: "Withdraw invitation",
+  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,
+  failed: "That did not work. Please try again.",
+  loading: "Loading…",
+};

package/src/components/share-card.tsx

@@ -2,8 +2,9 @@ import { useState } from "react";
 import type { ReactNode } from "react";
 import { Trash2, UserPlus, UsersRound } from "lucide-react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
+import { foldForSearch } from "../lib/text-match";
 import { AlertBanner } from "./alert-banner";
 import { Autocomplete } from "./autocomplete";
 import type { ComboOption } from "./combobox-core";
@@ -17,11 +18,15 @@ import type { DialogFrameProps } from "./dialog-frame";
 import { Caption, SectionLabel } from "./text";
 import { ToggleGroup } from "./toggle-group";
 import { Tooltip } from "./tooltip";
-import { Button, Card, IconButton, Spinner } from "./ui";
+import { Button } from "./button";
+import { Card } from "./card";
+import { IconButton } from "./icon-button";
+import { Spinner } from "./spinner";
 import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock";
 import type { WriteLock } from "./write-lock";
-import type { CardProps } from "./ui";
+import type { CardProps } from "./card";
 import type { DisabledReasonDisplay } from "./field-parts";
+import { DEFAULT_SHARE_CARD_LABELS } from "./share-card-labels";
 
 /**
  * Who holds one record, and the owner's every way of changing that — Kurvenschmiede's
@@ -80,30 +85,8 @@ export interface ShareCardLabels {
   loading: string;
 }
 
-export const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels = {
-  dialogTitle: "Share",
-  close: "Close",
-  email: "Email address",
-  emailOptional: "Email address (optional)",
-  emailPlaceholder: "name@example.com",
-  invalidEmail: "Enter a complete email address.",
-  role: "Role",
-  roleOf: (name) => `Role of ${name}`,
-  add: "Share",
-  whoHasAccess: "Who has access",
-  nobodyYet: "Nobody else has access yet.",
-  pending: "Pending",
-  openInvite: "Open invite link",
-  copyLink: "Copy link",
-  team: "Team",
-  teamHint: (name) => `Everyone in ${name} gets access.`,
-  remove: "Remove access",
-  removeConfirm: (name) => `Remove access for ${name}?`,
-  revokePending: "Withdraw invitation",
-  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,
-  failed: "That did not work. Please try again.",
-  loading: "Loading…",
-};
+// Defined in ./share-card-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SHARE_CARD_LABELS };
 
 // ── Data shapes ───────────────────────────────────────────────────────────────
 
@@ -214,7 +197,7 @@ export interface SharePanelProps {
   readOnly?: boolean;
   /** Focus the field on mount — a dialog that exists to add somebody. */
   autoFocus?: boolean;
-  labels?: Partial<ShareCardLabels>;
+  labels?: LabelOverride<ShareCardLabels>;
 }
 
 // Shape only. Whether the address exists, is allowed, or is the sharer's own is the
@@ -308,6 +291,7 @@ export function SharePanel({
 }: SharePanelProps) {
   // The `shareCard` namespace: prop > `<UiKitProvider labels>` > English.
   const labels = useKitLabels("shareCard", DEFAULT_SHARE_CARD_LABELS, labelsProp);
+  const locale = useKitLocale();
   const confirm = useConfirm();
   // Every commit below opts into the surrounding WriteLockProvider with `commit`; the
   // role choices save on change, cannot take it, and read the lock themselves. Adding
@@ -383,11 +367,12 @@ export function SharePanel({
 
   // The completion is a convenience, not a search: an address that matches nobody is
   // the ordinary case (somebody new), so no "No results" box opens over the field —
-  // and over its error. The same narrowing Autocomplete applies, asked first.
-  const needle = (target ? "" : email).trim().toLowerCase();
+  // and over its error. The same narrowing Autocomplete applies, asked first — folded as
+  // every kit list folds (DUP-5).
+  const needle = foldForSearch((target ? "" : email).trim(), locale);
   const offers =
     needle !== "" &&
-    options.some((o) => o.label.toLowerCase().includes(needle) || (o.sublabel ?? "").toLowerCase().includes(needle));
+    options.some((o) => [o.label, o.sublabel ?? ""].some((s) => foldForSearch(s, locale).includes(needle)));
 
   const captionNode = typeof caption === "function" ? caption(target) : caption;
   const shownError = error ?? failure;
@@ -395,7 +380,7 @@ export function SharePanel({
 
   return (
     <div className="space-y-3">
-      {intro && <div className="text-xs text-[var(--text-muted)]">{intro}</div>}
+      {intro && <div className="text-xs text-muted">{intro}</div>}
 
       {canAdd && (
         <div className="space-y-2">
@@ -491,7 +476,7 @@ export function SharePanel({
         <div className="space-y-2">
           <SectionLabel as="h4">{labels.whoHasAccess}</SectionLabel>
           {nobody && <Caption>{labels.nobodyYet}</Caption>}
-          <ul className="divide-y divide-[var(--border)]">
+          <ul className="divide-y divide-subtle">
             {grantees.map((g) => {
               const editable = !readOnly && !g.locked;
               const changeable = editable && onRoleChange !== undefined && choosable;
@@ -504,7 +489,7 @@ export function SharePanel({
                       the name, full row, instead of truncating it to a letter. */}
                   <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5">
                     <div className="min-w-0 flex-1 basis-40">
-                      <div className="flex min-w-0 items-center gap-1.5 text-sm font-medium text-[var(--text-primary)]">
+                      <div className="flex min-w-0 items-center gap-1.5 text-sm font-medium text-primary">
                         {g.kind === "team" && <UsersRound className="size-4 shrink-0" aria-hidden />}
                         <span data-private className="truncate-until-large">
                           {g.name}
@@ -512,7 +497,7 @@ export function SharePanel({
                         {!changeable && <ShareRoleChip role={roleOf(g.role)} />}
                       </div>
                       {(g.kind === "team" || g.email) && (
-                        <div data-private className="truncate-until-large text-xs text-[var(--text-muted)]">
+                        <div data-private className="truncate-until-large text-xs text-muted">
                           {g.kind === "team" ? labels.team : g.email}
                         </div>
                       )}
@@ -587,7 +572,7 @@ export function SharePanel({
                         data-private={p.email ? true : undefined}
                         className={cn(
                           "truncate-until-large text-sm",
-                          p.email ? "text-[var(--text-primary)]" : "text-[var(--text-muted)]",
+                          p.email ? "text-primary" : "text-muted",
                         )}
                       >
                         {name}
@@ -656,7 +641,7 @@ export interface ShareCardProps extends SharePanelProps {
 export function ShareCard({ title, variant = "outline", className, ...panel }: ShareCardProps) {
   return (
     <Card variant={variant} padding="sm" className={cn("space-y-3", className)}>
-      {title && <h3 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h3>}
+      {title && <h3 className="text-sm font-semibold text-primary">{title}</h3>}
       <SharePanel {...panel} />
     </Card>
   );

package/src/components/sign-chip-labels.ts

@@ -0,0 +1,12 @@
+// The English words of ./sign-chip, 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). ./sign-chip re-exports them.
+
+import type { SignChipLabels } from "./sign-chip";
+
+export const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {
+  outflow: "Outflow",
+  inflow: "Inflow",
+  direction: (current, next) => `Direction: ${current} — switch to ${next}`,
+  switchTo: (next) => `Switch to ${next}`,
+};

package/src/components/sign-chip.tsx

@@ -2,8 +2,9 @@ import { ArrowUpDown, Minus, Plus } from "lucide-react";
 import { Chip } from "./chip";
 import { Tooltip } from "./tooltip";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useLargeText } from "../hooks/use-large-text";
+import { DEFAULT_SIGN_CHIP_LABELS } from "./sign-chip-labels";
 
 // ── Labels ────────────────────────────────────────────────────────────────────
 
@@ -24,12 +25,8 @@ export interface SignChipLabels {
   switchTo: (next: string) => string;
 }
 
-export const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {
-  outflow: "Outflow",
-  inflow: "Inflow",
-  direction: (current, next) => `Direction: ${current} — switch to ${next}`,
-  switchTo: (next) => `Switch to ${next}`,
-};
+// Defined in ./sign-chip-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SIGN_CHIP_LABELS };
 
 export interface SignChipProps {
   /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s
@@ -41,7 +38,7 @@ export interface SignChipProps {
   onNegativeChange: (negative: boolean) => void;
   disabled?: boolean;
   /** Per-chip overrides of the `signChip` namespace. */
-  labels?: Partial<SignChipLabels>;
+  labels?: LabelOverride<SignChipLabels>;
   /** On the chip. Place it in its row from here — keksdose's form passes `self-end`
    *  to sit it on the display figure's baseline strip. */
   className?: string;
@@ -119,7 +116,7 @@ export function SignChip({ negative, onNegativeChange, disabled, labels: labelsP
     <span data-slot="sign-chip" className={cn("inline-flex shrink-0 flex-col items-start gap-0.5", className)}>
       {chip}
       {/* Hidden from the accessibility tree: the chip's name already says it. */}
-      <span aria-hidden className="text-xs text-[var(--text-muted)]">
+      <span aria-hidden className="text-xs text-muted">
         {labels.switchTo(next)}
       </span>
     </span>

package/src/components/signature-pad-labels.ts

@@ -0,0 +1,24 @@
+// The English words of ./signature-pad, 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). ./signature-pad re-exports them.
+
+import type { SignaturePadLabels } from "./signature-pad";
+
+export const DEFAULT_SIGNATURE_PAD_LABELS: SignaturePadLabels = {
+  label: "Signature",
+  instructions: "Sign in the box with a mouse, your finger or a pen.",
+  typedFallbackHint: "If you cannot draw, type your name instead.",
+  empty: "Nothing drawn yet",
+  signed: "Signature drawn",
+  undo: "Undo last stroke",
+  clear: "Clear",
+  save: "Save signature",
+  useTyped: "Type name instead",
+  useDrawn: "Draw instead",
+  typedName: "Full name",
+  cleared: "Signature cleared",
+  undone: "Last stroke removed",
+  viewEmpty: "Not signed",
+  viewDrawn: "Handwritten signature",
+  viewTyped: (name) => `Signed with the typed name ${name}`,
+};