@eifi1/ui-kit 0.30.0 → 0.31.1

package/src/demo/demo-start.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cn } from "../lib/cn";
+import { AlertBanner } from "../components/alert-banner";
+import { Button, Spinner } from "../components/ui";
+import { useNoIndex } from "../hooks/use-noindex";
+import { authErrorCode, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
+import { useOncePerKey } from "../auth/status-parts";
+import { useAccessAction } from "../landing/access";
+import type { AccessChoice } from "../landing/access";
+import type { LandingLabels } from "../landing/landing-labels";
+import { useDemoLabels } from "./demo-labels";
+import type { DemoLabels } from "./demo-labels";
+
+/** Why a start was refused, in the page's terms (§5.2). */
+type Refusal =
+  | { reason: "rateLimited"; minutes?: number }
+  | { reason: "capacity" }
+  | { reason: "unavailable" }
+  | { reason: "failed" };
+
+/**
+ * The server's answer to `POST /auth/demo-session`, read as a refusal (§5.1, §6.2):
+ * `demo_rate_limited` (429, with `Retry-After`), `demo_capacity` (429, without),
+ * `demo_disabled` (404) and `demo_not_ready` (503) by their codes; a bare 429 as the
+ * per-IP window too; anything else is a plain failure.
+ */
+function refusalOf(error: unknown): Refusal {
+  const code = authErrorCode(error);
+  if (code === "demo_capacity") return { reason: "capacity" };
+  if (code === "demo_disabled" || code === "demo_not_ready") return { reason: "unavailable" };
+  if (code === "demo_rate_limited" || (code === undefined && isRateLimited(error))) {
+    const seconds = retryAfterSeconds(error);
+    return { reason: "rateLimited", minutes: seconds ? Math.ceil(seconds / 60) : undefined };
+  }
+  return { reason: "failed" };
+}
+
+function messageOf(refusal: Refusal, labels: DemoLabels): string {
+  switch (refusal.reason) {
+    case "rateLimited":
+      return labels.rateLimited(refusal.minutes);
+    case "capacity":
+      return labels.capacity;
+    case "unavailable":
+      return labels.unavailable;
+    case "failed":
+      return labels.failed;
+  }
+}
+
+/** The one start a mount makes. */
+const ONCE = "demo";
+
+export interface DemoStartProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * Create the demo: the app's `POST /auth/demo-session {locale}`. Resolve with what it
+   * answered (the `TokenResponse`, `refresh_token: null`, `expires_at`); reject with the
+   * client's error — the codes are read out of it. Called once per mount.
+   */
+  start: () => Promise<T>;
+  /** The demo exists: store the session (and, for kastlan, `kastlan.demoSession`) and
+   *  replace to the app's home. The page keeps saying "Starting the demo…" meanwhile. */
+  onStarted: (session: T) => void;
+  /** "Request access" beside a refusal. */
+  access: AccessChoice;
+  /** "Back to the start page". Default `/`. */
+  backHref?: string;
+  /** `false` adds no `noindex` — for a preview. Default `true`: `/demo` is never indexed
+   *  (§4.3). */
+  noIndex?: boolean;
+  labels?: Partial<DemoLabels>;
+  /** The access words (`landing` namespace) for this instance. */
+  landingLabels?: Partial<LandingLabels>;
+}
+
+/**
+ * The `/demo` page's content (docs/landing-demo-harmonization.md §5.2): it starts the
+ * demo ONCE — StrictMode's double mount included, keksdose's ref guard — and says
+ * "Starting the demo…" until the app has the session and has moved on.
+ *
+ * A refusal says why, in the visitor's words, and offers "Request access" and "Back to
+ * the start page":
+ *
+ * | code | says |
+ * |---|---|
+ * | `demo_rate_limited` (429) | "Too many demos from this network. Try again in N min." — N from `Retry-After` |
+ * | `demo_capacity` (429) | "The demo is full right now. Try again later." |
+ * | `demo_disabled` (404), `demo_not_ready` (503) | "The demo isn't available right now." |
+ * | anything else | "The demo could not be started. Please try again." |
+ *
+ * keksdose fell back to `/register` with a toast; registration is invitation-only now,
+ * so the way on is the access mail.
+ *
+ * Put it in the app's `AuthLayout`. A live demo session never reaches it: the `/demo`
+ * route sits in `RedirectIfAuthed` WITHOUT `allowDemo`, which continues the live demo at
+ * its resume target instead of starting a second one. A cold start is the kit's
+ * `ServerWakeNotice`'s, once the app's watcher counts this POST
+ * (`watchReadsAnd(/\/auth\/demo-session\b/)`).
+ */
+export function DemoStart<T>({
+  start,
+  onStarted,
+  access,
+  backHref = "/",
+  noIndex = true,
+  labels: labelsProp,
+  landingLabels,
+  className,
+  ...rest
+}: DemoStartProps<T>) {
+  const labels = useDemoLabels(labelsProp);
+  const accessLink = useAccessAction(access, landingLabels);
+  const [refusal, setRefusal] = useState<Refusal | null>(null);
+  useNoIndex(noIndex);
+  useOncePerKey<T>(ONCE, () => start(), (_key, result) => {
+    if (result.ok) onStarted(result.value);
+    else setRefusal(refusalOf(result.error));
+  });
+
+  return (
+    <div {...rest} className={cn("flex flex-col items-center gap-4 py-4 text-center", className)}>
+      {/* One live region, there from the start, so the refusal that replaces the
+          progress line is announced (a region inserted with its text often is not). */}
+      <div role="status" aria-live="polite" className="w-full">
+        {refusal === null ? (
+          <p className="flex items-center justify-center gap-2 text-sm text-[var(--text-secondary)]">
+            <Spinner label={null} className="size-5" />
+            {labels.starting}
+          </p>
+        ) : (
+          <AlertBanner tone={refusal.reason === "failed" ? "danger" : "warning"} className="text-start">
+            {messageOf(refusal, labels)}
+          </AlertBanner>
+        )}
+      </div>
+      {refusal !== null && (
+        <div className="flex flex-wrap justify-center gap-3">
+          <Button href={accessLink.href} variant="brand">
+            {accessLink.label}
+          </Button>
+          <Button href={backHref} variant="secondary">
+            {labels.backToStart}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/feedback/feedback-inbox.tsx

@@ -4,6 +4,7 @@ import {
   Ban,
   Bug,
   CheckCircle2,
+  ClipboardCheck,
   CloudUpload,
   Eye,
   HelpCircle,
@@ -55,13 +56,16 @@ import { useFeedbackCategoryLabels, useFeedbackStatusLabels } from "./feedback-l
  * a `label` the caller passes still wins.
  */
 
-/** The seven states a report can be in.
+/** The eight states a report can be in.
  *
- *  Shared value for value across both apps on purpose: it is what lets one habit,
- *  and one agent prompt, work on either repo. Four are a chain and three sit off
- *  it — see {@link visibleFeedbackStatuses} for what that buys. */
+ *  Shared value for value across the apps on purpose: it is what lets one habit,
+ *  and one agent prompt, work on any repo. Five are a chain and three sit off
+ *  it — see {@link visibleFeedbackStatuses} for what that buys. `READY` joined in 0.31
+ *  (feedback contract §8.2): OPEN is "filed, not yet triaged", READY "released for
+ *  implementation", and nobody works an OPEN row. */
 export type FeedbackStatus =
   | "OPEN"
+  | "READY"
   | "IN_PROGRESS"
   | "IN_EVALUATION"
   | "NEEDS_LIVE_TEST"
@@ -81,7 +85,7 @@ export type FeedbackCategory = "CRASH" | "BUG" | "IDEA" | "QUESTION" | "OTHER";
  * its own shape as well. Declaration order is chain order, and
  * {@link FEEDBACK_STATUS_ORDER} is derived from it rather than restated, because
  * a restated list cannot be checked for exhaustiveness: an eighth status would
- * break the build here and leave a literal seven long.
+ * break the build here and leave a literal eight long (as READY did in 0.31).
  */
 export const FEEDBACK_STATUS_META: Record<
   FeedbackStatus,
@@ -92,6 +96,15 @@ export const FEEDBACK_STATUS_META: Record<
     activeBg: "bg-[var(--bg-active)]",
     activeText: "text-[var(--text-primary)]",
   },
+  // Triaged and released for implementation (feedback contract §8.2, keksdose live
+  // #396): OPEN is "filed, nobody has looked yet", READY is "go". The brand tint at full
+  // strength, so it reads as the go-ahead beside OPEN's neutral fill and
+  // NEEDS_LIVE_TEST's muted brand.
+  READY: {
+    icon: ClipboardCheck,
+    activeBg: "bg-[var(--brand-bg)]",
+    activeText: "text-[var(--brand)]",
+  },
   IN_PROGRESS: {
     icon: Wrench,
     activeBg: "bg-[var(--warning-bg)]",
@@ -155,7 +168,7 @@ export const FEEDBACK_STATUS_ORDER = Object.keys(FEEDBACK_STATUS_META) as Feedba
  *  through them to reach `DONE`. */
 const OFF_CHAIN: FeedbackStatus[] = ["NEEDS_LIVE_TEST", "POSTPONED", "WONT_DO"];
 
-const FORWARD_CHAIN: FeedbackStatus[] = ["OPEN", "IN_PROGRESS", "IN_EVALUATION", "DONE"];
+const FORWARD_CHAIN: FeedbackStatus[] = ["OPEN", "READY", "IN_PROGRESS", "IN_EVALUATION", "DONE"];
 
 /** The next status along the chain, or null at the end (or off it, as `WONT_DO`
  *  is). What a swipe-to-advance gesture commits. */
@@ -168,7 +181,7 @@ export function nextFeedbackStatus(current: FeedbackStatus): FeedbackStatus | nu
  * The steps that make sense from where a row currently stands.
  *
  * For the compact control in a table cell: it is a glanceable triage affordance,
- * and a row of seven icons in a cell is noise. One step forward, one step back
+ * and a row of eight icons in a cell is noise. One step forward, one step back
  * (so an item can be sent back for rework), and any of the three off-chain
  * verdicts — which is what makes those usable as verdicts at all.
  *
@@ -452,7 +465,7 @@ export function FeedbackStatusTransitions({
                   ),
               // Both stay unclickable, but only the read-only case is DIMMED: the
               // current status is the one thing in the row that has to be legible
-              // at a glance, and among seven pills a faded active one reads as
+              // at a glance, and among eight pills a faded active one reads as
               // "unavailable" rather than as "this is where the row stands".
               (!canEdit || active) && "cursor-default",
               !canEdit && "opacity-60",

package/src/feedback/feedback-labels.ts

@@ -24,7 +24,7 @@ import type { FeedbackCategory, FeedbackStatus } from "./feedback-inbox";
  * `feedbackStatus` — one word per status, keyed by the enum value so
  * `labels[row.status]` is the whole lookup.
  *
- * de-CH canon: OPEN "Offen" · IN_PROGRESS "In Bearbeitung" · IN_EVALUATION "Zur Prüfung"
+ * de-CH canon: OPEN "Offen" · READY "Bereit zur Umsetzung" · IN_PROGRESS "In Bearbeitung" · IN_EVALUATION "Zur Prüfung"
  * · NEEDS_LIVE_TEST "Live testen" · POSTPONED "Zurückgestellt" · DONE "Erledigt" ·
  * WONT_DO "Wird nicht umgesetzt".
  */
@@ -32,6 +32,7 @@ export type FeedbackStatusLabels = Record<FeedbackStatus, string>;
 
 export const DEFAULT_FEEDBACK_STATUS_LABELS: FeedbackStatusLabels = {
   OPEN: "Open",
+  READY: "Ready to implement",
   IN_PROGRESS: "In progress",
   IN_EVALUATION: "In evaluation",
   NEEDS_LIVE_TEST: "Test when live",

package/src/feedback/feedback-record.ts

@@ -158,22 +158,25 @@ export const FEEDBACK_REWORKABLE_STATUSES: readonly FeedbackStatus[] = Object.fr
 
 /**
  * The statuses in which the AUTHOR may still edit title, body and category (§3.4,
- * keksdose `canAuthorEdit`, `feedback-page.tsx:398`): `OPEN` and `IN_PROGRESS`. Once the
- * team has answered, the description is what they answered and stays as it was; a
- * correction goes in as a rework.
+ * keksdose `canAuthorEdit`, `feedback-page.tsx:398`): `OPEN`, `READY` and `IN_PROGRESS`.
+ * Once the team has answered, the description is what they answered and stays as it
+ * was; a correction goes in as a rework.
  */
 export const FEEDBACK_AUTHOR_EDITABLE_STATUSES: readonly FeedbackStatus[] = Object.freeze([
   "OPEN",
+  "READY",
   "IN_PROGRESS",
 ] as const);
 
 /**
- * The two statuses that wait on the person triaging: answered and handed back for a
- * verdict, or answered and only checkable on a deployed build (keksdose
- * `AWAITING_VERDICT`, live #330). The phone's "Only what is waiting for you" toggle
- * narrows the inbox to exactly these (§4.3).
+ * The statuses that wait on the person triaging: filed and not yet triaged (`OPEN`,
+ * since READY took over "released for implementation" in 0.31, feedback contract §8.2),
+ * answered and handed back for a verdict, or answered and only checkable on a deployed
+ * build (keksdose `AWAITING_VERDICT`, live #330). The phone's "Only what is waiting for
+ * you" toggle narrows the inbox to exactly these (§4.3).
  */
 export const FEEDBACK_AWAITING_STATUSES: readonly FeedbackStatus[] = Object.freeze([
+  "OPEN",
   "IN_EVALUATION",
   "NEEDS_LIVE_TEST",
 ] as const);

package/src/feedback/feedback-row-detail.tsx

@@ -12,6 +12,7 @@ import { formatDate } from "../lib/format";
 import { DEFAULT_MAX_ATTACHMENT_BYTES } from "./feedback-attachment";
 import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "./feedback-dialog";
 import {
+  FeedbackCategoryBadge,
   FeedbackDetail,
   FeedbackDetailSection,
   FeedbackNoteEditor,
@@ -63,8 +64,9 @@ import type { FeedbackStatusChange } from "./feedback-status-undo";
  *   path (`/accounts?p=2`): keksdose's `new URL(…)` throws on one and the section
  *   vanished. kastlan already fell back to `context.route` (`feedbackRaw`, `:97`).
  *
- * The sections, in the contract's order: **Description** (the body; the author's
- * Edit while OPEN / IN_PROGRESS), **URL**, **Attachment**, **Outcome** (the admin's
+ * The sections, in the contract's order: **Subject** (the category and the title, §8.1;
+ * `showSubject={false}` leaves it out), **Description** (the body; the author's
+ * Edit while OPEN / READY / IN_PROGRESS), **URL**, **Attachment**, **Outcome** (the admin's
  * outcome editor, Rework, Open page), **Send for rework** (only while reworking) and
  * **Status**. No comment thread (§2.2: kastlan's comments fold into the body, §7.7).
  *
@@ -81,7 +83,11 @@ import type { FeedbackStatusChange } from "./feedback-status-undo";
  * canon (keksdose `de-CH.json`, ss never ß, "Nacharbeit" throughout — §7.14) on each key.
  */
 export interface FeedbackDetailLabels {
-  /** Section 1's heading — keksdose's `feedback.body` (§7.3). The dialog's field asks
+  /** The first section's heading: what the report is called (feedback contract §8.1,
+   *  keksdose live #395 — with the row expanded and the table scrolled, nothing said
+   *  which entry was being answered). de-CH: "Betreff" */
+  subject: string;
+  /** The description section's heading — keksdose's `feedback.body` (§7.3). The dialog's field asks
    *  "What happened? (optional)"; the description, once filed, is headed as what it is
    *  — and as the author's "Edit description" calls it. de-CH: "Beschreibung" */
   body: string;
@@ -140,6 +146,7 @@ export interface FeedbackDetailLabels {
 }
 
 export const DEFAULT_FEEDBACK_DETAIL_LABELS: FeedbackDetailLabels = {
+  subject: "Subject",
   body: "Description",
   edit: "Edit",
   editDescription: "Edit description",
@@ -316,7 +323,7 @@ function AttachmentDownload({
 export interface FeedbackRowAccess {
   /** The viewer filed it (`viewerId === row.user_id`; never for an erased author). */
   isAuthor: boolean;
-  /** "Edit description": the author, while the row is OPEN or IN_PROGRESS — on either
+  /** "Edit description": the author, while the row is OPEN, READY or IN_PROGRESS — on either
    *  page (keksdose `canAuthorEdit`, `feedback-page.tsx:398`, is not gated on `mine`). */
   canEditDescription: boolean;
   /** The outcome editor: the admin on the inbox (`canEdit`). */
@@ -563,6 +570,12 @@ export interface FeedbackRowDetailProps {
    * BUDGET, and a person viewing one still owns their own reports.
    */
   commit?: boolean;
+  /**
+   * Open with the subject: the category badge and the title (feedback contract §8.1,
+   * keksdose live #395). On by default; `false` for a page that already shows the title
+   * beside the detail.
+   */
+  showSubject?: boolean;
   labels?: Partial<FeedbackDetailLabels>;
   className?: string;
 }
@@ -603,6 +616,7 @@ export function FeedbackRowDetail({
   reworkAttachment,
   renderDate,
   commit,
+  showSubject = true,
   labels: labelsProp,
   className,
 }: FeedbackRowDetailProps) {
@@ -653,6 +667,16 @@ export function FeedbackRowDetail({
 
   return (
     <FeedbackDetail className={className}>
+      {showSubject && (
+        <FeedbackDetailSection title={labels.subject}>
+          <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm" data-feedback-subject="">
+            <FeedbackCategoryBadge category={row.category} />
+            <span className="min-w-0 font-medium text-[var(--text-primary)] [overflow-wrap:anywhere]">
+              {row.title}
+            </span>
+          </p>
+        </FeedbackDetailSection>
+      )}
       <FeedbackDetailSection
         title={labels.body}
         action={

package/src/feedback/feedback-swipe.tsx

@@ -10,7 +10,7 @@ import type { FeedbackStatusChange, FeedbackStatusRow } from "./feedback-status-
  * (`feedback-page.tsx:990`, feedback #144 rework item 4: *"it is a queue, and triaging it
  * one tap-into-the-row at a time is the slow way"*), for every app.
  *
- * - `advance` — one step along the chain (`nextFeedbackStatus`: OPEN → IN_PROGRESS →
+ * - `advance` — one step along the chain (`nextFeedbackStatus`: OPEN → READY → IN_PROGRESS →
  *   IN_EVALUATION → DONE), labelled with the status it goes to;
  * - `done` — straight to DONE, for a row that plainly needs no stop on the way;
  * - `wont_do` — dismiss as WONT_DO.

package/src/i18n/defaults.ts

@@ -81,6 +81,9 @@ import { DEFAULT_ADMIN_ACTION_LABELS } from "../admin/admin-action-confirm";
 import { DEFAULT_ADMIN_ACTION_LOG_LABELS } from "../admin/admin-action-log";
 import { DEFAULT_TRANSFER_OWNERSHIP_LABELS } from "../admin/transfer-ownership-dialog";
 import { DEFAULT_INVITATIONS_LABELS } from "../admin/invitations-panel";
+import { DEFAULT_SETTINGS_LABELS } from "../settings/settings-labels";
+import { DEFAULT_LANDING_LABELS } from "../landing/landing-labels";
+import { DEFAULT_DEMO_LABELS } from "../demo/demo-labels";
 import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips";
 import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card";
 import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog";
@@ -208,6 +211,9 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   adminActionLog: DEFAULT_ADMIN_ACTION_LOG_LABELS,
   transferOwnership: DEFAULT_TRANSFER_OWNERSHIP_LABELS,
   invitations: DEFAULT_INVITATIONS_LABELS,
+  settings: DEFAULT_SETTINGS_LABELS,
+  landing: DEFAULT_LANDING_LABELS,
+  demo: DEFAULT_DEMO_LABELS,
   characterCount: DEFAULT_CHARACTER_COUNT_LABELS,
   countrySelect: DEFAULT_COUNTRY_SELECT_LABELS,
   inlineEdit: DEFAULT_INLINE_EDIT_LABELS,

package/src/i18n/german.ts

@@ -79,6 +79,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
     // written here with "ß" like the rest of this source; `swiss()` makes it "grösser".
     feedbackStatus: {
       OPEN: "Offen",
+      READY: "Bereit zur Umsetzung",
       IN_PROGRESS: "In Bearbeitung",
       IN_EVALUATION: "Zur Prüfung",
       NEEDS_LIVE_TEST: "Live testen",
@@ -140,6 +141,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       phoneActions: "Feedback-Aktionen",
     },
     feedbackDetail: {
+      subject: "Betreff",
       body: "Beschreibung",
       edit: "Bearbeiten",
       editDescription: "Beschreibung bearbeiten",
@@ -198,6 +200,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
         qrAlt: "QR-Code für die Authenticator-App",
         secretHint: "Scannen nicht möglich? Stattdessen diesen Schlüssel in der App eingeben:",
         copySecret: "Schlüssel kopieren",
+        // 0.31.0: the card's title; the state ("Aktiv") stands beside it.
+        title: "Zwei-Faktor-Authentifizierung",
       },
       passkeys: {
         title: "Passkeys",
@@ -908,6 +912,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
         `${n(length)} Buchstaben und Ziffern. Bindestriche und Leerzeichen spielen keine Rolle.`,
       recoveryCodeInvalid: "Dieser Backup-Code ist ungültig oder wurde schon verwendet.",
       rateLimited,
+      // 0.31.0: the same words as `landing.requestAccess`.
+      requestAccess: "Zugang anfragen",
     },
     register: {
       firstName: "Vorname",
@@ -988,6 +994,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       resendIn: (seconds) => `In ${n(seconds)} s erneut senden`,
       resent: "Bestätigungs-E-Mail gesendet",
       resendError: "Bestätigungs-E-Mail konnte nicht gesendet werden",
+      rateLimited,
       banner: "Bitte bestätigen Sie Ihre E-Mail-Adresse.",
       dismiss: "Später",
     },
@@ -1363,5 +1370,85 @@ export function germanLabels(numberLocale: string): UiKitLabels {
           ? `Den ungeprüften Text in „${group}“ bestätigen?`
           : `Alle ${n(count)} ungeprüften Texte in „${group}“ bestätigen – auch die nicht angezeigten?`,
     },
+    // 0.31.0 — docs/settings-harmonization.md §4.3 and docs/landing-demo-harmonization.md
+    // §4–§5: the settings shell, the landing page's generic words and the demo. The group
+    // names are the contracts' ("Darstellung", "Konto", "Sicherheit", "Benachrichtigungen",
+    // "Daten"); the help lines name things as `accountSettings`, `sessions` and
+    // `dataExport` do. Formal "Sie".
+    settings: {
+      title: "Einstellungen",
+      search: "Einstellungen durchsuchen",
+      searchPlaceholder: "Einstellungen durchsuchen…",
+      results: "Passende Einstellungen",
+      noMatches: (query) => `Keine Einstellung passt zu „${query}“.`,
+      // As `commandPalette.clear`.
+      clearSearch: "Suche löschen",
+      back: "Zurück zu den Einstellungen",
+      sections: "Einstellungsbereiche",
+      // "Treffer" is the same in singular and plural.
+      matchCount: (count) => `${n(count)} Treffer`,
+      groups: {
+        appearance: {
+          title: "Darstellung",
+          // "Theme", as `topBar.theme`.
+          help: "Sprache, Theme und wie die App auf diesem Gerät aussieht.",
+        },
+        account: {
+          title: "Konto",
+          help: "Ihr Profil und Ihre E-Mail-Adresse.",
+        },
+        security: {
+          title: "Sicherheit",
+          help: "Wie Sie sich anmelden und wo Sie angemeldet sind.",
+        },
+        notifications: {
+          title: "Benachrichtigungen",
+          help: "Worüber Sie informiert werden, wann und auf welchen Geräten.",
+        },
+        data: {
+          title: "Daten",
+          help: "Ihre Daten exportieren oder zusammen mit Ihrem Konto löschen.",
+        },
+      },
+    },
+    landing: {
+      signIn: "Anmelden",
+      requestAccess: "Zugang anfragen",
+      getStarted: "Jetzt starten",
+      tryDemo: "Demo ausprobieren",
+      openApp: "App öffnen",
+      continueDemo: "Demo fortsetzen",
+      beta: "Beta",
+      // Plain text: a mail's subject and body lines, never HTML.
+      accessSubject: (app) => (app ? `Zugang zu ${app}` : "Zugangsanfrage"),
+      accessName: "Name:",
+      // "Unternehmen", as `companySwitcher`.
+      accessCompany: "Unternehmen:",
+      accessUse: "Wofür Sie die App nutzen möchten:",
+    },
+    demo: {
+      starting: "Demo wird gestartet…",
+      rateLimited: (minutes) =>
+        minutes
+          ? `Zu viele Demos aus diesem Netzwerk. Versuchen Sie es in ${n(minutes)} min erneut.`
+          : "Zu viele Demos aus diesem Netzwerk. Versuchen Sie es später erneut.",
+      capacity: "Die Demo ist gerade ausgelastet. Versuchen Sie es später erneut.",
+      unavailable: "Die Demo ist gerade nicht verfügbar.",
+      failed: "Die Demo konnte nicht gestartet werden. Bitte versuchen Sie es erneut.",
+      // As `legal.backHome`.
+      backToStart: "Zurück zur Startseite",
+      hoursLeft: (hours, minutes) => `Demo · noch ${n(hours)} h ${n(minutes)} min`,
+      minutesLeft: (minutes) => `Demo · noch ${n(minutes)} min`,
+      badge: "Demo",
+      readOnly: "Sie sehen Beispieldaten. Änderungen sind nicht möglich.",
+      sandbox: "Was Sie selbst anlegen, wird gelöscht, wenn die Demo endet.",
+      details: "Demo-Details",
+      writeLocked: "In der Demo nicht möglich.",
+      endedTitle: "Die Demo ist beendet",
+      endedReadOnly: "Die Beispieldaten werden regelmäßig zurückgesetzt.",
+      endedSandbox:
+        "Die Beispieldaten werden regelmäßig zurückgesetzt; was Sie in der Demo selbst angelegt haben, wird gelöscht.",
+      restart: "Neue Demo starten",
+    },
   };
 }

package/src/i18n/kit-labels.tsx

@@ -77,6 +77,9 @@ import type { AdminActionLabels } from "../admin/admin-action-confirm";
 import type { AdminActionLogLabels } from "../admin/admin-action-log";
 import type { TransferOwnershipLabels } from "../admin/transfer-ownership-dialog";
 import type { InvitationsLabels } from "../admin/invitations-panel";
+import type { SettingsLabels } from "../settings/settings-labels";
+import type { LandingLabels } from "../landing/landing-labels";
+import type { DemoLabels } from "../demo/demo-labels";
 import type { AccountStateLabels } from "../components/account-chips";
 import type { ShareCardLabels } from "../components/share-card";
 import type { ReauthDialogLabels } from "../components/reauth-dialog";
@@ -383,6 +386,12 @@ export interface UiKitLabels {
   transferOwnership: TransferOwnershipLabels;
   /** 0.30.0: the invitations panel (§5). */
   invitations: InvitationsLabels;
+  /** 0.31.0: the settings and admin pages' shell (docs/settings-harmonization.md §4.3). */
+  settings: SettingsLabels;
+  /** 0.31.0: the public landing page's kit words (docs/landing-demo-harmonization.md §4). */
+  landing: LandingLabels;
+  /** 0.31.0: the demo's start, banner and end (§5). */
+  demo: DemoLabels;
   /** 0.22.0: the screen-reader words of `Input` / `Textarea`'s `showCount` counter. */
   characterCount: CharacterCountLabels;
   /** 0.22.0: `CountrySelect`. Its list's "no results" and counts are `combobox`'s. */