@eifi1/ui-kit 0.6.1 → 0.7.0

package/src/feedback/feedback-attachment.tsx

@@ -2,12 +2,36 @@ import { cn } from "../lib/cn";
 import { useEffect, useRef, useState, type RefObject } from "react";
 import { Camera, FileText, Paperclip, X } from "lucide-react";
 import { Button } from "../components/ui";
-import { useKitFileLabels } from "../i18n/kit-labels";
+import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels";
 import type { FeedbackAttachmentLabels } from "./feedback-dialog";
 
 export const DEFAULT_ATTACHMENT_ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/gif"];
 export const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
 
+/**
+ * The field's own strings — the `feedbackAttachment` namespace of `<UiKitProvider
+ * labels>`. The keys are {@link FeedbackAttachmentLabels}' own, so the `labels` prop
+ * (and a whole `FeedbackDialogLabels` handed down by the dialog) merges over them
+ * one to one. The optional heading, `attachment`, stays a prop: a note editor puts
+ * the buttons straight under its textarea and wants none.
+ *
+ * Before 0.7.0 the two optional keys fell back to hard-coded English, so a German app
+ * that relied on its provider got "Capture screenshot" under a German form.
+ */
+export interface FeedbackAttachmentFieldLabels {
+  attachmentAdd: string;
+  attachmentCapture: string;
+  attachmentPaste: string;
+  attachmentRemove: string;
+}
+
+export const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels = {
+  attachmentAdd: "Attach image",
+  attachmentCapture: "Capture screenshot",
+  attachmentPaste: "…or paste a screenshot from the clipboard.",
+  attachmentRemove: "Remove attachment",
+};
+
 /**
  * Picking one picture: the file dialog, a capture of the app view, or a paste.
  *
@@ -40,7 +64,7 @@ export const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
 export function FeedbackAttachmentField({
   value,
   onChange,
-  labels,
+  labels: labelsProp,
   accept = DEFAULT_ATTACHMENT_ACCEPT,
   maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
   onError,
@@ -51,7 +75,9 @@ export function FeedbackAttachmentField({
 }: {
   value: File | null;
   onChange: (file: File | null) => void;
-  labels: FeedbackAttachmentLabels;
+  /** Prop > `<UiKitProvider labels={{ feedbackAttachment }}>` > English. Optional
+   *  since 0.7.0; `attachment` (the heading) is only ever read from here. */
+  labels?: Partial<FeedbackAttachmentLabels>;
   accept?: string[];
   maxBytes?: number;
   onError?: (kind: "type" | "size") => void;
@@ -73,6 +99,7 @@ export function FeedbackAttachmentField({
   const fileInputRef = useRef<HTMLInputElement>(null);
   // `file.size` from `<UiKitProvider labels>`, formatted in its locale — see FileDropzone.
   const fileText = useKitFileLabels();
+  const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
 
   // Object-URL preview lifecycle (create on change, revoke on cleanup).
   useEffect(() => {
@@ -151,9 +178,9 @@ export function FeedbackAttachmentField({
           : (event) => takeImage(event.clipboardData, () => event.preventDefault())
       }
     >
-      {labels.attachment && (
+      {labelsProp?.attachment && (
         <div className="mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]">
-          {labels.attachment}
+          {labelsProp.attachment}
         </div>
       )}
       {value ? (
@@ -180,7 +207,7 @@ export function FeedbackAttachmentField({
           <button
             type="button"
             onClick={() => onChange(null)}
-            aria-label={labels.attachmentRemove}
+            aria-label={text.attachmentRemove}
             className="rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]"
           >
             <X className="size-4" />
@@ -190,7 +217,7 @@ export function FeedbackAttachmentField({
         <div className="space-y-1.5">
           <div className="flex flex-wrap gap-2">
             <Button type="button" variant="secondary" onClick={() => fileInputRef.current?.click()}>
-              <Paperclip className="size-4" /> {labels.attachmentAdd}
+              <Paperclip className="size-4" /> {text.attachmentAdd}
             </Button>
             {onCaptureScreenshot && (
               <Button
@@ -208,14 +235,14 @@ export function FeedbackAttachmentField({
                 }}
               >
                 <Camera className="size-4" />{" "}
-                {capturing ? "…" : (labels.attachmentCapture ?? "Capture screenshot")}
+                {capturing ? "…" : text.attachmentCapture}
               </Button>
             )}
           </div>
           {/* Said out loud, because a gesture with no affordance is a gesture
               nobody finds. */}
           <p className="text-xs text-[var(--text-muted)]">
-            {labels.attachmentPaste ?? "…or paste a screenshot from the clipboard."}
+            {text.attachmentPaste}
           </p>
         </div>
       )}

package/src/feedback/feedback-dialog.tsx

@@ -19,10 +19,11 @@ export interface FeedbackAttachmentLabels {
    *  straight under its textarea, where a second heading is noise. */
   attachment?: string;
   attachmentAdd: string;
-  /** Label for the "capture screenshot" button. Optional — falls back to an English default. */
+  /** Label for the "capture screenshot" button. Optional — falls back to the provider's
+   *  `feedbackAttachment.attachmentCapture`, then English. */
   attachmentCapture?: string;
   /** The line under the attachment buttons saying a screenshot can be pasted
-   *  straight in. Optional — falls back to an English default. */
+   *  straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */
   attachmentPaste?: string;
   attachmentRemove: string;
 }

package/src/hooks/use-windowed-rows.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import type { RefObject } from "react";
+
+/** Rows kept mounted beyond each edge, so a flick-scroll has something to show
+ *  before the next render lands. */
+const OVERSCAN = 6;
+
+/** What {@link useWindowedRows} answers: render rows `first` up to (not including)
+ *  `last`, inside a scroll body `totalHeight` pixels tall. */
+export interface WindowedRows {
+  first: number;
+  last: number;
+  totalHeight: number;
+}
+
+/**
+ * Which rows of a fixed-height list are worth rendering.
+ *
+ * Hand-rolled rather than pulled from a virtualization library, for two reasons. With
+ * a fixed row height the whole problem is two divisions — a library earns its keep on
+ * measured, variable-height rows, and there are none here. And the obvious library for
+ * it (`@tanstack/react-virtual`) returns functions that cannot be memoized safely, so
+ * the React Compiler skips optimising any component that calls it: a list that exists
+ * to stay fast would opt out of the consumer's main source of speed.
+ *
+ * `scrollRef` is the element that scrolls. The rows are assumed to start at its top;
+ * a sticky header above them costs a row or two of the overscan, not correctness.
+ *
+ * Moved from Lenkbank, where `MeasuredGrid` and a segment list window the same way over
+ * rows of different heights — two copies of this would be two places to fix the day
+ * the overscan turns out to be wrong.
+ */
+export function useWindowedRows(
+  count: number,
+  rowHeight: number,
+  scrollRef: RefObject<HTMLElement | null>,
+): WindowedRows {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewport, setViewport] = useState(0);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const measure = () => {
+      setScrollTop(element.scrollTop);
+      setViewport(element.clientHeight);
+    };
+    measure();
+    element.addEventListener("scroll", measure, { passive: true });
+    // The pane usually sits in a responsive layout, so its height changes without the
+    // window's — a resize listener alone would miss every one of those. Guarded:
+    // jsdom and older embedded webviews have no ResizeObserver, and the list still
+    // has to render there.
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(element);
+    return () => {
+      element.removeEventListener("scroll", measure);
+      observer?.disconnect();
+    };
+  }, [scrollRef]);
+
+  const first = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+  // A viewport of 0 is the first render, before the pane has been laid out (and every
+  // render under jsdom). Rendering nothing then would leave the list blank until
+  // something scrolled it, so fall back to a screenful.
+  const visible = Math.ceil((viewport || 600) / rowHeight) + OVERSCAN * 2;
+  const last = Math.min(count, first + visible);
+  return { first, last, totalHeight: count * rowHeight };
+}

package/src/i18n/defaults.ts

@@ -19,6 +19,8 @@ import { DEFAULT_SWATCH_PICKER_LABELS } from "../components/swatch-picker";
 import { DEFAULT_ICON_PICKER_LABELS } from "../components/icon-picker";
 import { DEFAULT_DIALOG_FRAME_LABELS } from "../components/dialog-frame";
 import { DEFAULT_FILE_PICKER_LABELS } from "../components/file-button";
+import { DEFAULT_MEASURED_GRID_LABELS } from "../components/measured-grid";
+import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "../feedback/feedback-attachment";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -76,4 +78,6 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   iconPicker: DEFAULT_ICON_PICKER_LABELS,
   dialogFrame: DEFAULT_DIALOG_FRAME_LABELS,
   filePicker: DEFAULT_FILE_PICKER_LABELS,
+  measuredGrid: DEFAULT_MEASURED_GRID_LABELS,
+  feedbackAttachment: DEFAULT_FEEDBACK_ATTACHMENT_LABELS,
 };

package/src/i18n/kit-labels.tsx

@@ -21,6 +21,8 @@ import type { SwatchPickerLabels } from "../components/swatch-picker";
 import type { IconPickerLabels } from "../components/icon-picker";
 import type { DialogFrameLabels } from "../components/dialog-frame";
 import type { FilePickerLabels } from "../components/file-button";
+import type { MeasuredGridLabels } from "../components/measured-grid";
+import type { FeedbackAttachmentFieldLabels } from "../feedback/feedback-attachment";
 
 /**
  * EVERY string the kit renders, as one typed tree — and an optional provider that
@@ -208,6 +210,8 @@ export interface UiKitLabels {
   iconPicker: IconPickerLabels;
   dialogFrame: DialogFrameLabels;
   filePicker: FilePickerLabels;
+  measuredGrid: MeasuredGridLabels;
+  feedbackAttachment: FeedbackAttachmentFieldLabels;
 }
 
 /** Any subset of the tree, one level deep — each namespace may be partial, and a

package/src/i18n/locales/de-CH.ts

@@ -0,0 +1,30 @@
+import type { UiKitLabels } from "../kit-labels";
+import { uiKitLabelsDe } from "./de";
+
+/**
+ * Swiss Standard German: the German labels with Swiss spelling — "ss" for every "ß"
+ * (Schliessen, Grösse), which is the one systematic difference in UI text — and
+ * `de-CH` number formatting (1’234.5).
+ *
+ * Derived rather than duplicated, so a key added to the German labels is Swiss the
+ * moment it lands. Function labels are wrapped: their RESULT is respelled, so an
+ * argument the app passes in (a file name, a phrase to type) is respelled too — which
+ * is what a Swiss app writing "ss" everywhere wants.
+ */
+export const UI_KIT_LABELS_DE_CH: UiKitLabels = swiss(uiKitLabelsDe("de-CH"));
+
+function respell(text: string): string {
+  return text.replace(/ß/g, "ss").replace(/ẞ/g, "SS");
+}
+
+function swiss<T>(value: T): T {
+  if (typeof value === "string") return respell(value) as T;
+  if (typeof value === "function") {
+    const fn = value as (...args: unknown[]) => unknown;
+    return ((...args: unknown[]) => swiss(fn(...args))) as T;
+  }
+  if (value && typeof value === "object") {
+    return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, swiss(v)])) as T;
+  }
+  return value;
+}

package/src/i18n/locales/de.ts

@@ -0,0 +1,365 @@
+import { formatFileSize } from "../kit-labels";
+import type { UiKitLabels } from "../kit-labels";
+
+/**
+ * The kit's words in German: every namespace of {@link UiKitLabels}, for
+ * `<UiKitProvider labels={UI_KIT_LABELS_DE}>`.
+ *
+ * Self-contained on purpose — nothing but the kit's own `formatFileSize` — so it works
+ * as a starting point to copy and adjust. Counts and sizes are formatted with
+ * `de-DE` digits; {@link uiKitLabelsDe} takes another number locale
+ * (e.g. `"de-CH"` for 1’234) without touching the words.
+ */
+export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
+  const num = new Intl.NumberFormat(numberLocale);
+  const n = (value: number) => num.format(value);
+
+  return {
+    feedbackAttachment: {
+      attachmentAdd: "Bild anhängen",
+      attachmentCapture: "Screenshot aufnehmen",
+      attachmentPaste: "…oder einen Screenshot aus der Zwischenablage einfügen.",
+      attachmentRemove: "Anhang entfernen",
+    },
+    measuredGrid: {
+      view: "Tabellenansicht",
+      cellsView: "Zellen",
+      textView: "Text",
+      addRow: "Zeile hinzufügen",
+      removeRow: (row) => `Zeile ${row} entfernen`,
+      clear: "Tabelle leeren",
+      pasteHint: "Einen Block aus einer Tabellenkalkulation in eine beliebige Zelle einfügen",
+      cell: (column, row) => `${column}, Zeile ${row}`,
+      rowNumber: "Zeile",
+      rowActions: "Zeilenaktionen",
+      keyboardHint:
+        "Pfeiltasten wechseln zwischen Zellen. Tippen ersetzt eine Zelle, F2 bearbeitet sie, Escape macht die Bearbeitung rückgängig. Enter geht nach unten und fügt am Ende eine Zeile hinzu.",
+      lineError: (line) => `Zeile ${line} konnte nicht gelesen werden`,
+      points: (count) => (count === 1 ? "1 Punkt" : `${count} Punkte`),
+      problems: (count) =>
+        count === 1 ? "1 Zelle ist keine Zahl" : `${count} Zellen sind keine Zahlen`,
+    },
+    pageContents: { title: "Auf dieser Seite" },
+    common: {
+      close: "Schließen",
+      clear: "Leeren",
+      search: "Suchen",
+      done: "Fertig",
+      cancel: "Abbrechen",
+      save: "Speichern",
+      back: "Zurück",
+      next: "Weiter",
+      remove: "Entfernen",
+      loading: "Wird geladen…",
+      noResults: "Keine Ergebnisse",
+      fieldValue: (field, value) => `${field}: ${value}`,
+    },
+    dataTable: {
+      columns: "Spalten",
+      selectAllRows: "Alle Zeilen auswählen",
+      sortHint: "Klicken zum Sortieren · Umschalt-Klick für weitere Sortierung",
+      filter: "Filter",
+      close: "Schließen",
+      selectRow: "Zeile auswählen",
+      autoSize: "Spaltenbreiten anpassen",
+      loading: "Wird geladen…",
+      filters: "Filter",
+      // Resets every active filter; "Alle löschen" would read as deleting the filters.
+      clearAll: "Alle zurücksetzen",
+      done: "Fertig",
+      pageSize: "Zeilen pro Seite",
+      // Sits among 10 / 25 / 50 counting "Zeilen", so the plural "Alle", not "Alles".
+      pageSizeAll: "Alle",
+      prevPage: "Vorherige Seite",
+      nextPage: "Nächste Seite",
+      clearFilter: "Filter zurücksetzen",
+      filterPlaceholder: "Filtern…",
+      selectFilter: "Auswählen",
+      selectAll: "Alle",
+      selectNone: "Keine",
+      dateFrom: "Von",
+      dateTo: "Bis",
+      numberMin: "Min.",
+      numberMax: "Max.",
+      numberAbs: "Betrag",
+      presets: {
+        today: "Heute",
+        yesterday: "Gestern",
+        this_week: "Diese Woche",
+        last_week: "Letzte Woche",
+        last_7_days: "Letzte 7 Tage",
+        last_30_days: "Letzte 30 Tage",
+        this_month: "Dieser Monat",
+        last_month: "Letzter Monat",
+        last_3_months: "Letzte 3 Monate",
+        ytd: "Seit Jahresbeginn",
+        last_year: "Letztes Jahr",
+      },
+      table: "Datentabelle",
+      filterResults: (shown, total) =>
+        `${n(shown)} von ${n(total)} ${total === 1 ? "Zeile" : "Zeilen"}`,
+      sortedAscending: (column) => `Sortiert nach ${column}, aufsteigend`,
+      sortedDescending: (column) => `Sortiert nach ${column}, absteigend`,
+      sortCleared: (column) => `Sortierung nach ${column} aufgehoben`,
+      pageChanged: (page, totalPages) => `Seite ${n(page)} von ${n(totalPages)}`,
+      pageRange: (from, to, total) => `${n(from)}–${n(to)} / ${n(total)}`,
+      rowCount: (total) => n(total),
+      columnsCount: (visible, total) => `Spalten (${n(visible)}/${n(total)})`,
+    },
+    miniCalendar: {
+      previousMonth: "Vorheriger Monat",
+      nextMonth: "Nächster Monat",
+      // Already formatted in the provider's locale ("Montag, 14. September 2026").
+      day: (date) => date,
+      chooseStart: "Startdatum wählen",
+      chooseEnd: "Enddatum wählen",
+      startSelected: (date) => `${date} als Startdatum gewählt. Wählen Sie jetzt ein Enddatum.`,
+      rangeSelected: (from, to) =>
+        `Zeitraum ${from} bis ${to} gewählt. Wählen Sie ein Startdatum, um neu zu beginnen.`,
+    },
+    datePicker: {
+      panel: "Datum wählen",
+      rangePanel: "Zeitraum wählen",
+      clear: "Leeren",
+      previousDay: "Vorheriger Tag",
+      nextDay: "Nächster Tag",
+      today: "Heute",
+    },
+    monthPicker: {
+      previousYear: "Vorheriges Jahr",
+      nextYear: "Nächstes Jahr",
+      panel: "Monat wählen",
+      month: (monthYear) => monthYear,
+    },
+    popover: {
+      panel: "Aufklappfenster",
+    },
+    combobox: {
+      search: "Suchen",
+      noResults: "Keine Ergebnisse",
+      clear: "Leeren",
+      loading: "Wird geladen…",
+      create: (query) => `„${query}“ anlegen`,
+      selectedCount: (count) => `${n(count)} ausgewählt`,
+      loadError: "Ergebnisse konnten nicht geladen werden",
+      resultCount: (count) => `${n(count)} ${count === 1 ? "Ergebnis" : "Ergebnisse"}`,
+      // "Zeichen" is the same in singular and plural.
+      minChars: (count) => `Mindestens ${n(count)} Zeichen eingeben`,
+    },
+    multiSelect: {
+      search: "Suchen",
+      selectAll: "Alle auswählen",
+      clear: "Leeren",
+      all: "Alle",
+      // The bare count, as in English: the trigger has always shown just the number.
+      selectedCount: (count) => n(count),
+    },
+    calculator: {
+      open: "Taschenrechner öffnen",
+      panel: "Taschenrechner",
+      calculation: "Rechnung",
+      backspace: "Rücktaste",
+      clear: "Löschen",
+      equals: "Ist gleich",
+      done: "Fertig",
+      plus: "Plus",
+      minus: "Minus",
+      times: "Mal",
+      divide: "Geteilt durch",
+      decimal: "Dezimaltrennzeichen",
+    },
+    currency: {
+      currency: "Währung",
+      search: "Währung suchen",
+    },
+    chipInput: {
+      // The value is arbitrary user text, quoted as a citation, so the participle agrees
+      // with the implied "Eintrag" whatever the chip says.
+      added: (value) => `„${value}“ hinzugefügt`,
+      removed: (value) => `„${value}“ entfernt`,
+      remove: "Entfernen",
+      // `von` governs the dative, visible only in the plural: "von 1 Eintrag", "von 2 Einträgen".
+      atLimit: (max) => `Grenze von ${n(max)} ${max === 1 ? "Eintrag" : "Einträgen"} erreicht`,
+      duplicate: (value) => `„${value}“ steht bereits in der Liste`,
+    },
+    swatchPicker: {
+      none: "Keine Farbe",
+      mixed: "Gemischt: Die ausgewählten Elemente haben unterschiedliche Farben",
+    },
+    iconPicker: {
+      none: "Kein Symbol",
+      mixed: "Gemischt: Die ausgewählten Elemente haben unterschiedliche Symbole",
+      search: "Symbole suchen",
+      noResults: "Keine passenden Symbole",
+      resultCount: (count) => `${n(count)} ${count === 1 ? "Symbol" : "Symbole"}`,
+    },
+    fieldSync: {
+      synced: "Gespeichert",
+      edited: "Nicht gespeicherte Änderungen",
+      pending: "Wird gespeichert…",
+      error: "Speichern fehlgeschlagen",
+      retry: "Erneut versuchen",
+    },
+    passwordReveal: {
+      show: "Passwort anzeigen",
+      hide: "Passwort verbergen",
+    },
+    dangerConfirm: {
+      arm: "Löschen…",
+      confirm: "Löschen",
+      cancel: "Abbrechen",
+      prompt: "Dies kann nicht rückgängig gemacht werden.",
+      password: "Passwort",
+      phrase: (phrase) => `Geben Sie zur Bestätigung „${phrase}“ ein`,
+    },
+    tabs: {
+      // "Tab" is what German UIs say; "Registerkarte" reads like a 1990s manual.
+      add: "Tab hinzufügen",
+      remove: (tab) => `${tab} entfernen`,
+    },
+    appShell: {
+      collapse: "Seitenleiste einklappen",
+      expand: "Seitenleiste ausklappen",
+      toggleGroup: (groupLabel) => `${groupLabel}: Seiten`,
+    },
+    topBar: {
+      theme: "Theme wechseln",
+      palette: "Darstellungsvorlage",
+      language: "Sprache",
+      switchRole: "Rolle wechseln",
+      role: (value) => `Rolle: ${value}`,
+    },
+    pickerSheet: {
+      close: "Schließen",
+    },
+    dialogFrame: {
+      close: "Schließen",
+    },
+    swipeableRow: {
+      actions: "Zeilenaktionen",
+    },
+    file: {
+      // The kit's own `Intl` unit formatting, pinned to this locale ("3,4 MB").
+      size: (bytes) => formatFileSize(bytes, numberLocale),
+    },
+    filePicker: {
+      rejectedPick: (count) =>
+        count === 1
+          ? "Die Datei wurde nicht hinzugefügt"
+          : `Keine der ${count} Dateien wurde hinzugefügt`,
+      rejectedType: (name) => `„${name}“ hat einen nicht unterstützten Dateityp`,
+      rejectedTypeOnly: (accept) => `Nur ${accept}-Dateien`,
+      rejectedSize: (name, maxSize) => `„${name}“ ist größer als ${maxSize}`,
+      rejectedCount: (name, maxFiles) =>
+        `„${name}“ wurde nicht hinzugefügt: höchstens ${n(maxFiles)} ${maxFiles === 1 ? "Datei" : "Dateien"}`,
+      rejectedInvalid: (name) => `„${name}“ kann hier nicht verwendet werden`,
+      rejectedMany: (count) =>
+        count === 1
+          ? "1 Datei wurde nicht hinzugefügt"
+          : `${n(count)} Dateien wurden nicht hinzugefügt`,
+      selected: (count, firstName) =>
+        count === 1 ? `„${firstName}“ ausgewählt` : `${n(count)} Dateien ausgewählt`,
+      remove: (name) => `„${name}“ entfernen`,
+      clearAll: "Alle Dateien entfernen",
+      removed: (name) => `„${name}“ entfernt`,
+      cleared: "Alle Dateien entfernt",
+    },
+    wizard: {
+      cancel: "Abbrechen",
+      back: "Zurück",
+      next: "Weiter",
+      skip: "Überspringen",
+      finish: "Abschließen",
+      submitting: "Wird erstellt…",
+      steps: "Schritte",
+      step: (current, total) => `Schritt ${n(current)} von ${n(total)}`,
+      cancelTitle: "Formular verwerfen?",
+      confirmCancel: "Ihre Eingaben gehen verloren.",
+      cancelConfirmLabel: "Verwerfen",
+      cancelDismissLabel: "Weiter bearbeiten",
+      reviewTitle: "Überprüfen",
+      edit: "Bearbeiten",
+      missingRequired: "Bitte füllen Sie alle Pflichtfelder aus.",
+      genericError: "Ein Fehler ist aufgetreten",
+    },
+    tour: {
+      next: "Weiter",
+      back: "Zurück",
+      skip: "Überspringen",
+      done: "Fertig",
+      awaitClickHint: "Klicken Sie auf das hervorgehobene Element, um fortzufahren",
+      step: (current, total) => `${n(current)} / ${n(total)}`,
+    },
+    commandPalette: {
+      placeholder: "Suchen…",
+      empty: "Keine Ergebnisse",
+      loading: "Wird gesucht…",
+      dialog: "Suche",
+      error: "Die Suche ist fehlgeschlagen. Bitte erneut versuchen.",
+    },
+    sparkline: {
+      rising: (first, last) => `Steigend von ${first} auf ${last}`,
+      falling: (first, last) => `Fallend von ${first} auf ${last}`,
+      flat: (value) => `Unverändert bei ${value}`,
+      single: (value) => `Ein Wert: ${value}`,
+      noData: "Keine Daten",
+      named: (name, summary) => `${name}: ${summary}`,
+    },
+    statTile: {
+      // `amount` arrives formatted and unsigned ("5 %", "1.200 €").
+      increase: (amount) => `Um ${amount} gestiegen`,
+      decrease: (amount) => `Um ${amount} gesunken`,
+      unchanged: "Keine Veränderung",
+      better: (change) => `${change} (besser)`,
+      worse: (change) => `${change} (schlechter)`,
+      noValue: "Keine Daten",
+      loading: "Wird geladen…",
+    },
+    signaturePad: {
+      label: "Unterschrift",
+      instructions: "Unterschreiben Sie im Feld mit der Maus, dem Finger oder einem Stift.",
+      typedFallbackHint: "Wenn Sie nicht zeichnen können, geben Sie stattdessen Ihren Namen ein.",
+      empty: "Noch nichts gezeichnet",
+      signed: "Unterschrift gezeichnet",
+      undo: "Letzten Strich rückgängig machen",
+      clear: "Leeren",
+      save: "Unterschrift speichern",
+      useTyped: "Stattdessen Namen eingeben",
+      useDrawn: "Stattdessen zeichnen",
+      typedName: "Vollständiger Name",
+      cleared: "Unterschrift gelöscht",
+      undone: "Letzter Strich entfernt",
+      viewEmpty: "Nicht unterschrieben",
+      viewDrawn: "Handschriftliche Unterschrift",
+      viewTyped: (name) => `Unterschrieben mit dem eingegebenen Namen ${name}`,
+    },
+    passwordStrength: {
+      tooShort: "Zu kurz",
+      weak: "Schwach",
+      fair: "Mittel",
+      good: "Gut",
+      strong: "Stark",
+      announcement: (level) => `Passwortstärke: ${level}`,
+      // "Zeichen" is the same in singular and plural. The English default does not
+      // format these counts, so neither does this file.
+      ruleLength: (minLength) => `Mindestens ${minLength} Zeichen`,
+      ruleCase: "Groß- und Kleinbuchstaben",
+      ruleDigit: "Eine Ziffer",
+      ruleSymbol: "Ein Sonderzeichen",
+      optional: (rule) => `${rule} (optional)`,
+      met: "Erfüllt:",
+      notMet: "Nicht erfüllt:",
+      tooLong: (maxBytes) =>
+        `Höchstens ${maxBytes} Zeichen (Buchstaben mit Akzent und Emojis zählen mehrfach).`,
+    },
+    seriesChart: {
+      resetZoom: "Zoom zurücksetzen",
+      zoomHint:
+        "Zum Zoomen ziehen: Eine annähernd quadratische Auswahl zoomt beide Achsen, eine lange, schmale nur ihre eigene. Doppelklick setzt zurück.",
+      empty: "Keine Daten",
+      legend: "Datenreihen",
+    },
+  };
+}
+
+export const UI_KIT_LABELS_DE: UiKitLabels = uiKitLabelsDe();