@eifi1/ui-kit 0.32.2 → 0.33.1

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

@@ -37,6 +37,7 @@ import {
 import type { FeedbackContext, FeedbackRecord } from "./feedback-record";
 import { useFeedbackStatusUndo } from "./feedback-status-undo";
 import type { FeedbackStatusChange } from "./feedback-status-undo";
+import type { CommitScope } from "../components/write-lock";
 
 /**
  * One report, opened — the panel a feedback table unfolds under its row (§4.4 of
@@ -410,7 +411,7 @@ export interface FeedbackReworkSectionProps {
    *  `feedbackToast` refusals, the `feedbackAttachment` words. */
   attachment?: Partial<FeedbackNoteAttachment>;
   /** The send COMMITS — see `FeedbackNoteEditor`'s `commit`. */
-  commit?: boolean;
+  commit?: CommitScope;
   labels?: Partial<FeedbackDetailLabels>;
 }
 
@@ -569,7 +570,7 @@ export interface FeedbackRowDetailProps {
    * reaches `onUpdate`. Off by default — keksdose's shell lock is a read-only demo
    * BUDGET, and a person viewing one still owns their own reports.
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /**
    * 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

package/src/feedback/feedback-swipe.tsx

@@ -79,11 +79,9 @@ function targetOf(id: string, status: FeedbackStatus): FeedbackStatus | null {
   }
 }
 
-/** One action's panel. Each fill carries its text colour (0.26): the fills turn pastel
- *  in dark mode, where SwipeableRow's default white text was unreadable. `--info` has no
- *  contrast token, so `advance` writes in the surface colour — white on sky in light
- *  mode, the dark page on the pale sky in dark (the translation list's reset does the
- *  same on its grey). */
+/** One action's panel, by tone (0.33): SwipeableRow paints the tone's soft wash idle,
+ *  and its fill under that fill's own foreground once armed — the same pairs in light
+ *  and dark, where the fills turn pastel. */
 function panel(
   id: FeedbackSwipeAction,
   target: FeedbackStatus,
@@ -97,24 +95,21 @@ function panel(
         onCommit,
         label: labels[target],
         icon: <ChevronsRight className="size-4" aria-hidden />,
-        className: "bg-[var(--info)] text-[var(--info-contrast)]",
-        armedClassName: "bg-[var(--info)] text-[var(--info-contrast)]",
+        tone: "info",
       };
     case "done":
       return {
         onCommit,
         label: labels.DONE,
         icon: <Check className="size-4" aria-hidden />,
-        className: "bg-[var(--success)] text-[var(--success-contrast)]",
-        armedClassName: "bg-[var(--success)] text-[var(--success-contrast)]",
+        tone: "success",
       };
     case "wont_do":
       return {
         onCommit,
         label: labels.WONT_DO,
         icon: <Ban className="size-4" aria-hidden />,
-        className: "bg-[var(--danger)] text-[var(--danger-contrast)]",
-        armedClassName: "bg-[var(--danger-hover)] text-[var(--danger-contrast)]",
+        tone: "danger",
       };
   }
 }

package/src/feedback/feedback-table.tsx

@@ -31,6 +31,7 @@ import {
 import { FEEDBACK_AWAITING_STATUSES, reworkCount, type FeedbackContext, type FeedbackRecord } from "./feedback-record";
 import type { FeedbackStatusChange } from "./feedback-status-undo";
 import { feedbackPageHref, feedbackPagePath } from "./feedback-row-detail";
+import type { CommitScope } from "../components/write-lock";
 
 /**
  * The two feedback pages' TABLE — `/feedback` (the admin inbox) and `/my-feedback` (the
@@ -399,7 +400,7 @@ export interface FeedbackColumnsOptions {
   /** The status buttons SAVE when pressed: pass `true` to put them under the page's
    *  `WriteLockProvider` (FeedbackStatusTransitions' `commit`). Off by default — a
    *  feedback inbox is rarely what an app's lock is about. */
-  commit?: boolean;
+  commit?: CommitScope;
   labels: FeedbackPageLabels;
   statusLabels: FeedbackStatusLabels;
   categoryLabels: FeedbackCategoryLabels;

package/src/feedback/feedback-thread.tsx

@@ -7,6 +7,8 @@ import { Button, EmptyState, Spinner, Textarea } from "../components/ui";
 import type { CharacterCountLabels } from "../components/ui";
 import { Skeleton } from "../components/skeleton";
 import { Tooltip } from "../components/tooltip";
+import { useWriteLock } from "../components/write-lock";
+import type { CommitScope } from "../components/write-lock";
 import { useKitFileLabels, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { FeedbackAttachmentField } from "./feedback-attachment";
 import type { FeedbackAttachmentFieldSingleProps } from "./feedback-attachment";
@@ -565,6 +567,18 @@ export interface FeedbackComposerProps {
   /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this
    *  reader. */
   disabledReason?: ReactNode;
+  /**
+   * Send COMMITS (0.33.1, kastlan's assistant): under a locked {@link WriteLockProvider}
+   * Send is disabled the `disabledReason` way — focusable, the lock's reason in its
+   * tooltip and description, as on {@link Button}'s `commit` — and neither Enter nor
+   * Ctrl/⌘+Enter sends. The box stays editable and the draft stays: nothing in it
+   * reaches the server until Send, and the lock may lift. No provider, or an unlocked
+   * one: no effect. A {@link CommitScope}: kastlan's assistant answers under the demo
+   * and not under a lapsed plan (its backend's 402), so it passes
+   * `commit={{ except: ["demo"] }}` where it read `useWriteLock` and fed `canSend` and a
+   * reason by hand. Not the prop above: that one replaces the box, this one keeps it.
+   */
+  commit?: CommitScope;
   rows?: number;
   /**
    * The longest draft the box takes, in UTF-16 code units as the browser counts — the
@@ -671,6 +685,7 @@ export function FeedbackComposer({
   canSend: canSendProp,
   sendOn = "mod-enter",
   disabledReason,
+  commit,
   rows = 3,
   maxLength,
   showCount,
@@ -686,6 +701,9 @@ export function FeedbackComposer({
   ...rest
 }: FeedbackComposerProps) {
   const labels = useKitLabels("feedbackComposer", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);
+  // The lock as Send sees it, with its scope (§12.36). Send's Button reads the same
+  // through its own `commit`; this holds the keyboard's send back with it.
+  const lock = useWriteLock(commit ?? false);
   const rootAttributes = { id, ...dataAttributes(rest) };
   const hintId = useId();
   const [ownDraft, setOwnDraft] = useState("");
@@ -752,7 +770,7 @@ export function FeedbackComposer({
   // Longer than `maxLength` only through `insertText` or a controlled value (typing
   // stops at it): the server would refuse it, so it does not go.
   const tooLong = maxLength !== undefined && draft.length > maxLength;
-  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong;
+  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong && !lock.locked;
   const send = () => {
     if (!canSend) return;
     const sentDraft = draft;
@@ -844,6 +862,7 @@ export function FeedbackComposer({
           <Button
             onClick={send}
             disabled={!canSend}
+            commit={commit}
             aria-busy={pending || undefined}
             size={size === "sm" ? "sm" : undefined}
           >

package/src/hooks/use-anchored-panel.ts

@@ -21,6 +21,13 @@ import { useTextSize } from "../theme/text-size";
 export interface ViewportBox {
   top: number;
   height: number;
+  /**
+   * The height of the LAYOUT viewport itself, which `position: fixed`'s `bottom` is
+   * measured from. Only {@link anchoredPanelPlacement} reads it, for a flipped panel's
+   * `bottom`. Defaults to `top + height`: the two are the same box whenever no keyboard
+   * and no zoom shrink the visible region.
+   */
+  layoutHeight?: number;
 }
 
 /**
@@ -71,9 +78,21 @@ export function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOp
 function readViewport(): ViewportBox {
   if (typeof window === "undefined") return { top: 0, height: 0 };
   const vv = window.visualViewport;
+  // The layout viewport's height is `innerHeight`, the reference `readKeyboardInset`
+  // measures the keyboard against. The keyboard leaves it alone (it shrinks only the
+  // VISUAL viewport; under `interactive-widget=resizes-content` it shrinks both, the
+  // fixed box with them), and it follows the mobile URL bar as it slides away, as a
+  // fixed box's `bottom` does. Not `documentElement.clientHeight`: on mobile Chrome and
+  // Safari that stays at the small, URL-bar-shown height, so with the bar scrolled away
+  // a flipped panel would sit that much too low, over its own field. `innerHeight`'s one
+  // error is a desktop page with a horizontal scrollbar, which it counts and the fixed
+  // box does not: the gap widens by the bar's thickness, and never closes.
+  const layoutHeight = window.innerHeight;
   // offsetTop, not 0: with the keyboard up the user can also pan the visual viewport
   // within the layout viewport, which shifts where "visible" starts.
-  return vv ? { top: vv.offsetTop, height: vv.height } : { top: 0, height: window.innerHeight };
+  return vv
+    ? { top: vv.offsetTop, height: vv.height, layoutHeight }
+    : { top: 0, height: window.innerHeight, layoutHeight };
 }
 
 export interface AnchoredPanelOptions {
@@ -90,11 +109,24 @@ export interface AnchoredPanelOptions {
   minHeight?: number;
 }
 
+/**
+ * `top` and `bottom` are the two edges of a panel exactly `maxHeight` tall. A panel is
+ * sized by its content and `maxHeight` only caps it, so apply the edge on the trigger's
+ * side, the one that holds whatever the height: `top` while the panel is below,
+ * `bottom` (and no `top`) once it is flipped `above`.
+ */
 export interface AnchoredPanel {
   /** The trigger's rect, or null while closed/unmeasured. */
   rect: AnchorRect | null;
-  /** Viewport-space `top` for the panel. */
+  /** Viewport-space `top` for the panel — the one to apply while it is below. Flipped,
+   *  it is where a FULL-height panel's top would be, and a three-row list placed by it
+   *  floated far above its field (keksdose K1, live #401); place that one by `bottom`. */
   top: number;
+  /** CSS `bottom` for a `position: fixed` panel: the distance from the layout
+   *  viewport's bottom edge up to the panel's. The one to apply once it is flipped
+   *  `above`: it keeps the panel's foot `gap` above the trigger however short its
+   *  content, and while a filtered list shrinks or grows under the user's typing. */
+  bottom: number;
   /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */
   maxHeight: number;
   /** Whether the panel was flipped above the trigger. */
@@ -122,6 +154,14 @@ const FLIP_GAIN = 48;
  * returned `maxHeight` is what makes the flip sufficient rather than merely different:
  * without it a tall panel placed above just runs off the top instead of the bottom.
  *
+ * A flipped panel hangs from its BOTTOM edge, `gap` above the trigger, and is placed by
+ * `bottom` (keksdose K1, live #401). It used to be placed by a `top` worked out as
+ * though the panel were `maxHeight` tall, and a panel is only as tall as its content:
+ * a three-row address list under a 256 px cap sat ~176 px above its field, on a phone
+ * with the keyboard up. Only when even the {@link FLOOR} does not fit above does that
+ * edge give way, as `top` always did, so the panel's head (a search box, often) stays
+ * on screen rather than above it.
+ *
  * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has
  * no test runner of its own, so this is exercised from the consuming app.
  */
@@ -140,19 +180,17 @@ export function anchoredPanelPlacement(
       (spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN)));
   const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);
   const maxHeight = Math.min(preferredHeight, space);
-  return {
-    top: above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap,
-    maxHeight,
-    above,
-  };
+  // Unchanged, for the apps that call the hook and apply it: the edge to use below, and
+  // a full-height panel's top above. In layout-viewport space, like the rect.
+  const top = above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap;
+  // `bottom` counts up from the LAYOUT viewport's bottom edge, not the visible region's:
+  // `position: fixed` is laid out in the layout viewport, which runs on behind the
+  // keyboard, exactly as the rect is measured in it. The keyboard, the pan and the zoom
+  // are already in `maxHeight`, which keeps the panel's top inside what is on screen.
+  const layoutHeight = viewport.layoutHeight ?? viewport.top + viewport.height;
+  return { top, bottom: layoutHeight - (top + maxHeight), maxHeight, above };
 }
 
-/**
- * Where to put a panel anchored under `ref`, tracking the visible viewport.
- *
- * Callers own horizontal placement — the pickers align to the trigger's left edge, the
- * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.
- */
 /**
  * The region actually on screen, tracked while `active` (Keksdose live #328).
  *
@@ -204,6 +242,14 @@ export function useVisualViewport(active: boolean): ViewportBox | null {
   return box;
 }
 
+/**
+ * Where to put a panel anchored under `ref`, tracking the visible viewport.
+ *
+ * Callers own horizontal placement — the pickers align to the trigger's left edge, the
+ * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.
+ * Vertically, apply `top` while the panel is below and `bottom` (with no `top`) once it
+ * is `above`; see {@link AnchoredPanel}.
+ */
 export function useAnchoredPanel<T extends HTMLElement>(
   ref: RefObject<T | null>,
   open: boolean,
@@ -236,7 +282,7 @@ export function useAnchoredPanel<T extends HTMLElement>(
   }, [open]);
 
   if (!rect) {
-    return { rect: null, top: 0, maxHeight: preferredHeight, above: false };
+    return { rect: null, top: 0, bottom: 0, maxHeight: preferredHeight, above: false };
   }
   return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };
 }

package/src/hooks/use-focus-trap.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 /**
  * Keep keyboard focus inside an open overlay, and give it back when it closes.
@@ -23,6 +23,10 @@ import { useEffect, useRef } from "react";
  *     `<body>`, which for a keyboard user means losing their place in the page
  *     entirely. When the target is gone, focus falls back to the nearest thing that
  *     still exists rather than to nothing.
+ *   - **Leaves an app's own autofocus alone** (0.33.1). React honours a child's
+ *     `autoFocus` while it commits, and this hook's effect runs AFTER that commit, so
+ *     focusing the container there took focus straight back off the field the app had
+ *     asked for. See `initialFocus`.
  *   - **Nests.** An overlay can open another — a picker inside a dialog. Only the
  *     innermost trap handles a keystroke, and closing it hands control back to the one
  *     underneath. Innermost is decided by DOM containment rather than by mount order;
@@ -66,29 +70,61 @@ export interface FocusTrapOptions {
    * what `Modal` does and why: focusing the first FIELD pops the software keyboard on
    * a phone the moment a dialog opens, before the user has asked to type.
    * The container needs `tabIndex={-1}` for this to work.
+   *
+   * `"container"` and `"first"` both step aside when focus is ALREADY inside the
+   * container, on something other than the container itself. That is a child the app
+   * focused on purpose — an `autoFocus`, which React honours before this hook's effect
+   * runs — and the keyboard it brings up is the one the user was promised. Moving focus
+   * off it lost keksdose's create card its amount field the instant it got it, and on a
+   * phone the numpad sheet with it, which shows only while the field is focused (live
+   * #402). A function is the caller's explicit choice and is always followed.
    */
   initialFocus?: "container" | "first" | (() => HTMLElement | null);
 }
 
+/** Whatever has focus right now; nothing on the server, where there is no document. */
+function focusedElement(): Element | null {
+  return typeof document === "undefined" ? null : document.activeElement;
+}
+
 export function useFocusTrap(
   containerRef: React.RefObject<HTMLElement | null>,
   { active = true, restoreFocus = true, initialFocus = "container" }: FocusTrapOptions = {},
 ): void {
   // Latest-ref so a caller passing an inline `initialFocus` thunk — which every caller
   // will — does not tear the trap down and re-engage it on each render, stealing focus
-  // back to the top of the panel mid-interaction.
-  const optsRef = useRef({ restoreFocus, initialFocus });
-  useEffect(() => {
-    optsRef.current = { restoreFocus, initialFocus };
+  // back to the top of the panel mid-interaction. Written in a LAYOUT effect so that
+  // the trap's cleanup, which runs after the layout effects of the same commit, reads
+  // this render's `active` rather than the last one's — see the cleanup for why.
+  const optsRef = useRef({ active, restoreFocus, initialFocus });
+  useLayoutEffect(() => {
+    optsRef.current = { active, restoreFocus, initialFocus };
   });
 
+  // Where focus was BEFORE the trap engaged: the element it is given back to on close.
+  //
+  // Read DURING the render that turns the trap on, and that timing is the point. React
+  // honours a child's `autoFocus` while it commits that render, before any effect runs,
+  // so the effect below asking `document.activeElement` would get the child, inside the
+  // overlay. Restoring to that on close aimed focus at the dialog that was closing —
+  // already out of the DOM, so focus fell to <body> rather than going back to the
+  // button that opened it.
+  //
+  // State adjusted during render (the pattern `Modal` uses for `open`) rather than a
+  // ref written there: set once per opening and cleared on release, so a re-render
+  // while open cannot replace it with something inside, and StrictMode's second render
+  // and second effect both see the same element. `undefined` means "not captured";
+  // `null` is a capture that found nothing.
+  const [opener, setOpener] = useState<Element | null | undefined>(undefined);
+  if (active && opener === undefined) setOpener(focusedElement());
+  else if (!active && opener !== undefined) setOpener(undefined);
+
   useEffect(() => {
     if (!active) return;
     const container = containerRef.current;
     if (!container) return;
 
     container.setAttribute(TRAP_ATTR, "");
-    const previouslyFocused = document.activeElement as HTMLElement | null;
 
     /** Is `node` inside a trap nested within this one? */
     const inNestedTrap = (node: Element | null) => {
@@ -106,12 +142,13 @@ export function useFocusTrap(
       );
 
     const { initialFocus: how } = optsRef.current;
+    const focused = document.activeElement;
+    // A child that already has focus was given it on purpose — see `initialFocus`.
+    const childHasFocus = focused !== container && container.contains(focused);
     if (typeof how === "function") {
       (how() ?? container).focus();
-    } else if (how === "first") {
-      (tabbables()[0] ?? container).focus();
-    } else {
-      container.focus();
+    } else if (!childHasFocus) {
+      (how === "first" ? (tabbables()[0] ?? container) : container).focus();
     }
 
     const onKeyDown = (e: KeyboardEvent) => {
@@ -149,12 +186,18 @@ export function useFocusTrap(
       container.removeEventListener("keydown", onKeyDown);
       container.removeAttribute(TRAP_ATTR);
 
+      // Only when the trap is really being released: the container has left the page,
+      // or `active` has turned false. StrictMode runs this cleanup once more right after
+      // mounting, with the overlay still up, and then the effect again — and React does
+      // not re-apply `autoFocus` for that second run. Restoring here would pull focus
+      // out of the autofocused field for good: live #402 again, in development.
+      if (container.isConnected && optsRef.current.active) return;
       if (!optsRef.current.restoreFocus) return;
       // `isConnected` is the whole point: restoring to a node that has been removed
       // sends focus to <body> and the user loses their place entirely. When the
       // original is gone, leave focus where the browser put it rather than moving it
       // somewhere arbitrary — a wrong guess is worse than no move.
-      if (previouslyFocused?.isConnected) previouslyFocused.focus?.();
+      if (opener?.isConnected) (opener as HTMLElement).focus?.();
     };
-  }, [active, containerRef]);
+  }, [active, containerRef, opener]);
 }

package/src/i18n/defaults.ts

@@ -85,6 +85,7 @@ 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_BILLING_LABELS } from "../billing/billing-labels";
+import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change";
 import { DEFAULT_APPEARANCE_LABELS } from "../components/appearance-labels";
 import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions";
 import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell";
@@ -219,6 +220,7 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   landing: DEFAULT_LANDING_LABELS,
   demo: DEFAULT_DEMO_LABELS,
   billing: DEFAULT_BILLING_LABELS,
+  planChange: DEFAULT_PLAN_CHANGE_LABELS,
   appearance: DEFAULT_APPEARANCE_LABELS,
   rowActions: DEFAULT_ROW_ACTIONS_LABELS,
   appShellMore: DEFAULT_APP_SHELL_MORE_LABELS,

package/src/i18n/german.ts

@@ -1525,9 +1525,22 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       // Both figures arrive formatted.
       usage: (used, limit) => `${used} von ${limit}`,
       contactSubject: (dimension) => `Tariflimit: ${dimension}`,
+      // The toast's figure line (§14.11) and the plan change's over-limit lines (§14.12).
+      limitUsageLine: (dimension, used, limit) => `${dimension}: ${used} von ${limit}`,
       manage: "Zahlung und Rechnungen",
       // §312k BGB: the button that leads to the cancellation says exactly this (§12.26).
       cancel: "Verträge hier kündigen",
+      // §14.5: no customer at the provider yet, so no portal to open.
+      notAtProvider:
+        "Noch nichts zu verwalten. Zahlungen und Rechnungen erscheinen hier, sobald Sie einen kostenpflichtigen Tarif haben.",
+      // §14.4: the pay page's lines, built into its bundle. "Bezahlvorgang", Paddle's own
+      // German for its checkout.
+      payOpening: "Der sichere Bezahlvorgang wird geöffnet…",
+      payNothing: "Hier ist nichts zu bezahlen. Um einen Tarif zu wählen, kehren Sie zur App zurück.",
+      payFailed:
+        "Der Bezahlvorgang konnte nicht geöffnet werden. Bitte kehren Sie zurück und versuchen Sie es gleich noch einmal.",
+      payBack:
+        "Der Bezahlvorgang wurde geschlossen. Sie können zurückkehren oder diese Seite neu laden, um ihn wieder zu öffnen.",
       waitingChanges: (count) =>
         count === 1
           ? `${n(count)} Änderung wartet auf einen Tarif`
@@ -1536,6 +1549,34 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       discardWaiting: "Wartende Änderungen verwerfen",
       notConfigured: "Zahlungen sind noch nicht eingerichtet. Bitte versuchen Sie es später noch einmal.",
       disabled: "Abonnements sind hier nicht verfügbar.",
+      // §14.2: server-kit 0.7's refusals. "Zahlung und Rechnungen", as `manage`.
+      providerUnavailable:
+        "Der Zahlungsanbieter ist gerade nicht erreichbar. Bitte versuchen Sie es gleich noch einmal.",
+      alreadySubscribed: "Sie haben bereits ein Abonnement. Ihren Tarif ändern Sie unter „Zahlung und Rechnungen“.",
+      planNotSold:
+        "Dieser Tarif ist für diesen Abrechnungszeitraum oder diese Währung nicht erhältlich. Bitte wählen Sie einen anderen.",
+    },
+    // 0.33.0 — docs/billing-harmonization.md §14.12: the operator's plan parts, "Tarif" as
+    // in `billing`; keksdose's reviewed admin wording where it had one.
+    planChange: {
+      column: "Tarif",
+      title: "Tarif ändern",
+      confirm: "Tarif ändern",
+      plan: "Tarif",
+      current: (plan) => `Aktueller Tarif: ${plan}`,
+      keepsItems: "Ein kleinerer Tarif sperrt nur das Anlegen weiterer Einträge; gelöscht wird nichts.",
+      until: "Kostenlos bis",
+      untilHint: "Leer lassen für kein Ende. Eine laufende Beta behält ihr eigenes Ende.",
+      needsChange: "Wählen Sie einen anderen Tarif oder ein Enddatum.",
+      changed: (from, to) => `Tarif von ${from} auf ${to} geändert.`,
+      set: (to) => `Tarif auf ${to} gesetzt.`,
+      keptBeta: "Die Beta behält ihr Ende; nur der Tarif wurde geändert.",
+      untilDone: (date) => `Kostenlos bis ${date}.`,
+      overLimit: "Über dem Limit des neuen Tarifs: Nichts wird entfernt, neue Einträge sind gesperrt.",
+      // 0.33.1: the app's word heads the line. After "von" it would want the dative
+      // plural ("von 5 Objekten"), which no app's `one`/`other` form carries; as a
+      // heading it is the nominative, in the form for the limit ("Objekt: 1 von 1").
+      usageOf: (used, limit, dimension) => `${dimension}: ${used} von ${limit}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Darstellung" group.

package/src/i18n/kit-labels.tsx

@@ -81,6 +81,7 @@ import type { SettingsLabels } from "../settings/settings-labels";
 import type { LandingLabels } from "../landing/landing-labels";
 import type { DemoLabels } from "../demo/demo-labels";
 import type { BillingLabels } from "../billing/billing-labels";
+import type { PlanChangeLabels } from "../admin/plan-change";
 import type { AppearanceLabels } from "../components/appearance-labels";
 import type { RowActionsLabels } from "../components/row-actions";
 import type { AppShellMoreLabels } from "../shell/app-shell";
@@ -398,6 +399,9 @@ export interface UiKitLabels {
   demo: DemoLabels;
   /** 0.32.0: plans, standing, banners and the limit notice (docs/billing-harmonization.md §7). */
   billing: BillingLabels;
+  /** 0.33.0: the operator's plan parts — `planColumn`, `PlanChangeConfirm` and the
+   *  lines of `usePlanChangeResult` (docs/billing-harmonization.md §14.12). */
+  planChange: PlanChangeLabels;
   /** 0.32.0: the text-size and contrast settings (docs/text-size-harmonization.md §6). */
   appearance: AppearanceLabels;
   /** 0.32.0: a row's actions folded into a "⋯" menu at Large (text size §10.8). */

package/src/i18n/locales/es.ts

@@ -1485,13 +1485,48 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       // Both figures arrive formatted; "de", as `characterCount.count`.
       usage: (used, limit) => `${used} de ${limit}`,
       contactSubject: (dimension) => `Límite del plan: ${dimension}`,
+      // The toast's figure line (§14.11) and the plan change's over-limit lines (§14.12).
+      limitUsageLine: (dimension, used, limit) => `${dimension}: ${used} de ${limit}`,
       manage: "Pagos y facturas",
       cancel: "Cancelar la suscripción",
+      // §14.5: no customer at the provider yet, so no portal to open.
+      notAtProvider:
+        "Todavía no hay nada que gestionar. Los pagos y las facturas aparecerán aquí cuando tenga un plan de pago.",
+      // §14.4: the pay page's lines, built into its bundle. "Usted".
+      payOpening: "Abriendo el pago seguro…",
+      payNothing: "Aquí no hay nada que pagar. Para elegir un plan, vuelva a la aplicación.",
+      payFailed: "No se ha podido abrir el pago. Vuelva atrás e inténtelo de nuevo en un momento.",
+      payBack: "El pago se ha cerrado. Puede volver atrás o recargar esta página para abrirlo de nuevo.",
       waitingChanges: (count) => `${n(count)} ${plural(count, "cambio", "cambios")} a la espera de un plan`,
       // "Descartar", as `wizard.cancelConfirmLabel`.
       discardWaiting: "Descartar los cambios en espera",
       notConfigured: "Los pagos aún no están configurados. Inténtelo de nuevo más tarde.",
       disabled: "Las suscripciones no están disponibles aquí.",
+      // §14.2: server-kit 0.7's refusals. "Pagos y facturas", as `manage`. "Usted".
+      providerUnavailable: "El proveedor de pagos no está disponible en este momento. Inténtelo de nuevo en un momento.",
+      alreadySubscribed: "Ya tiene una suscripción. Para cambiar de plan, vaya a «Pagos y facturas».",
+      planNotSold: "Este plan no está disponible para ese periodo de facturación o esa moneda. Elija otro.",
+    },
+    // 0.33.0 — docs/billing-harmonization.md §14.12: the operator's plan parts, "plan" as
+    // in `billing`. "Usted".
+    planChange: {
+      column: "Plan",
+      title: "Cambiar de plan",
+      confirm: "Cambiar de plan",
+      plan: "Plan",
+      current: (plan) => `Plan actual: ${plan}`,
+      keepsItems: "Un plan más pequeño solo impide crear más; no se elimina nada.",
+      until: "Gratis hasta el",
+      untilHint: "Déjelo vacío para que no tenga fin. Una beta en curso conserva su propio fin.",
+      needsChange: "Elija otro plan o una fecha de fin.",
+      changed: (from, to) => `Plan cambiado de ${from} a ${to}.`,
+      set: (to) => `Plan establecido en ${to}.`,
+      keptBeta: "La beta conserva su fin; solo ha cambiado el plan.",
+      untilDone: (date) => `Gratis hasta el ${date}.`,
+      overLimit: "Por encima del límite del nuevo plan: no se elimina nada, los elementos nuevos quedan bloqueados.",
+      // Figures formatted; "de", as `billing.usage`. The app's word follows the limit,
+      // in its form (0.33.1): "1 de 1 presupuesto", "1 de 5 presupuestos".
+      usageOf: (used, limit, dimension) => `${used} de ${limit} ${dimension}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Apariencia" group.

package/src/i18n/locales/fr.ts

@@ -1516,14 +1516,55 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       // Both figures arrive formatted; "sur", as `characterCount.count`.
       usage: (used, limit) => `${used} sur ${limit}`,
       contactSubject: (dimension) => `Limite de la formule\u00a0: ${dimension}`,
+      // The toast's figure line (§14.11) and the plan change's over-limit lines (§14.12):
+      // a key of its own for the space before the colon.
+      limitUsageLine: (dimension, used, limit) => `${dimension}\u00a0: ${used} sur ${limit}`,
       manage: "Paiement et factures",
       cancel: "Résilier l’abonnement",
+      // §14.5: no customer at the provider yet, so no portal to open.
+      notAtProvider:
+        "Rien à gérer pour l’instant. Les paiements et les factures apparaîtront ici dès que vous aurez une formule payante.",
+      // §14.4: the pay page's lines, built into its bundle.
+      payOpening: "Ouverture du paiement sécurisé…",
+      payNothing: "Il n’y a rien à payer ici. Pour choisir une formule, revenez à l’application.",
+      payFailed: "Le paiement n’a pas pu s’ouvrir. Veuillez revenir en arrière et réessayer dans un instant.",
+      payBack: "Le paiement a été fermé. Vous pouvez revenir en arrière, ou recharger cette page pour le rouvrir.",
       waitingChanges: (count) =>
         `${n(count)} ${plural(count, "modification en attente", "modifications en attente")} d’une formule`,
       // "Abandonner", as `wizard.cancelConfirmLabel`.
       discardWaiting: "Abandonner les modifications en attente",
       notConfigured: "Les paiements ne sont pas encore configurés. Veuillez réessayer plus tard.",
       disabled: "Les abonnements ne sont pas disponibles ici.",
+      // §14.2: server-kit 0.7's refusals. "Paiement et factures", as `manage`.
+      providerUnavailable:
+        "Le prestataire de paiement est injoignable pour le moment. Veuillez réessayer dans un instant.",
+      alreadySubscribed:
+        "Vous avez déjà un abonnement. Pour changer de formule, allez dans «\u202fPaiement et factures\u202f».",
+      planNotSold:
+        "Cette formule n’est pas proposée pour cette période de facturation ou cette devise. Veuillez en choisir une autre.",
+    },
+    // 0.33.0 — docs/billing-harmonization.md §14.12: the operator's plan parts, "formule"
+    // as in `billing`. "Vous".
+    planChange: {
+      column: "Formule",
+      title: "Changer de formule",
+      confirm: "Changer de formule",
+      plan: "Formule",
+      current: (plan) => `Formule actuelle\u00a0: ${plan}`,
+      keepsItems: "Une formule plus petite bloque seulement les nouvelles créations\u202f; rien n’est supprimé.",
+      until: "Gratuit jusqu’au",
+      untilHint: "Laissez vide pour aucune fin. Une bêta en cours garde sa propre fin.",
+      needsChange: "Choisissez une autre formule ou une date de fin.",
+      changed: (from, to) => `Formule changée de ${from} à ${to}.`,
+      set: (to) => `Formule définie sur ${to}.`,
+      keptBeta: "La bêta garde sa fin\u202f; seule la formule a changé.",
+      untilDone: (date) => `Gratuit jusqu’au ${date}.`,
+      overLimit:
+        "Au-delà de la limite de la nouvelle formule\u00a0: rien n’est supprimé, les nouveaux éléments sont bloqués.",
+      // Figures formatted; "sur", as `billing.usage`. The app's word follows the limit,
+      // in its form (0.33.1): "1 sur 1 budget", "1 sur 5 budgets" — and French reads 0
+      // as singular, which the forms' `one` covers.
+      usageOf: (used, limit, dimension) => `${used} sur ${limit} ${dimension}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Apparence" group. The steps agree with "taille", the modes with "contraste".