@eifi1/ui-kit 0.41.0 → 0.43.0

package/src/billing/subscription-actions.tsx

@@ -1,11 +1,30 @@
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { ExternalLink } from "lucide-react";
 
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 import type { LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { Button } from "../components/button";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
-import type { PortalTarget } from "./billing-overview";
+import type { BillingPortalAccess, PortalTarget } from "./billing-overview";
+import type { CancelRequested } from "./cancel-request";
+
+/** The portal action's mark (§17.3): the external-link glyph after the words, and "(opens
+ *  in a new tab)" for a reader — on a link, `Button`'s `external` says the latter. */
+export function ExternalMark({ reader }: { reader?: string }) {
+  return (
+    <>
+      <ExternalLink aria-hidden data-external="" className="size-4 shrink-0 rtl:-scale-x-100" />
+      {reader !== undefined && (
+        <>
+          {" "}
+          <span className="sr-only">({reader})</span>
+        </>
+      )}
+    </>
+  );
+}
 
 export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /** "Payment and invoices", as a link — or {@link onManage}. Without either, none. */
@@ -35,8 +54,54 @@ export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"di
    * (§12.26). Default true (0.32's behaviour).
    */
   atProvider?: boolean;
-  /** Which of the two is under way: its spinner, no second press. */
-  pending?: "manage" | "cancel" | null;
+  /**
+   * 0.42 (§16.2, server-kit 0.14): the overview's `portal`. `"buyer_only"` — the row has
+   * a buyer and the viewer isn't them, so the portal would answer `403
+   * billing_portal_buyer_only`: "Payment and invoices" becomes a caption naming the buyer
+   * (`buyerHolds`, no button), and "Cancel subscription" calls {@link onCancelInApp}
+   * (no portal at all — `cancelHref`, `onCancel` and `onPortal` are not used). `"open"`
+   * (default): as before.
+   */
+  portal?: BillingPortalAccess;
+  /** 0.42: the overview's `buyer_name`, for the caption under `"buyer_only"`. Empty: "…with
+   *  the admin who bought the subscription". */
+  buyerName?: string | null;
+  /**
+   * 0.42 (§16.2 decision 2): "Cancel subscription" in the app — open
+   * `CancelSubscriptionConfirm`, whose Confirm is `POST /billing/cancel`. The cancel under
+   * `"buyer_only"`. Under `"open"` it is the last resort, used only when no portal cancel
+   * (`cancelHref`, `onCancel`, `onPortal`) is given — a person-payer app that mounts the
+   * route and not the portal's cancel.
+   */
+  onCancelInApp?: () => void;
+  /** 0.42 (§16.7 C): the overview's `cancel_at_period_end` — a cancel is scheduled. With
+   *  {@link onResume}, "Keep subscription" takes the cancel's place. */
+  cancelAtPeriodEnd?: boolean;
+  /** 0.42 (§16.7 C): "Keep subscription", the app's `POST /billing/resume` — shown in
+   *  the cancel's place while {@link cancelAtPeriodEnd} is true. Without it, the cancel
+   *  stays as before. */
+  onResume?: () => void;
+  /**
+   * 0.43 (kastlan `18bf4c0`): what was asked in the app and the overview does not show
+   * yet — `useCancelRequest().view(row).requested`. `"cancel"`: shown as scheduled ("Keep
+   * subscription" with {@link onResume}; without it, no second "Cancel subscription").
+   * `"resume"`: shown as not scheduled. `null` (default): {@link cancelAtPeriodEnd} says.
+   */
+  cancelRequested?: CancelRequested;
+  /**
+   * 0.43 (§17): the portal opens in a NEW TAB — the app's handler calls
+   * `openProviderPage` — so its actions carry the external-link mark, a link opens with
+   * `target="_blank"`, and the `portalOpensNewTab` note shows under them. Default true;
+   * `false` for an app whose portal still opens in the same tab.
+   */
+  portalNewTab?: boolean;
+  /** 0.43: the provider's name in the note. Default `"Paddle"` (§2 decision 16). */
+  providerName?: string;
+  /** 0.43: the app's name in the note ("Kastlan stays open here"). Without it, "this page
+   *  stays open". */
+  appName?: string;
+  /** Which one is under way: its spinner, no second press. `"resume"` since 0.42. */
+  pending?: "manage" | "cancel" | "resume" | null;
   /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
   labels?: LabelOverride<BillingLabels>;
 }
@@ -56,6 +121,18 @@ export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"di
  * Before the payer has reached the provider (`atProvider={false}`, a trial without a
  * card, a beta) there is no portal to open: the part says so in a caption instead of
  * offering two buttons that could only end in `409 billing_not_at_provider`.
+ *
+ * 0.42 (§16): where the company's buyer is another admin (`portal="buyer_only"`), the
+ * portal stays the buyer's — "Payment and invoices" is a caption that names them, and
+ * "Cancel subscription" is the in-app cancel (`onCancelInApp`). While a cancel is
+ * scheduled (`cancelAtPeriodEnd`) and `onResume` is given, "Keep subscription" stands in
+ * the cancel's place, whoever the viewer is.
+ *
+ * 0.43 (§17): the portal opens in a new tab (`openProviderPage` in the app's handler):
+ * its actions carry the external-link mark, and a muted note says so — "Payment and
+ * invoices open at {provider} in a new tab; {app} stays open here." The in-app cancel and
+ * "Keep subscription" stay unmarked. After an in-app cancel or resume, `cancelRequested`
+ * (`useCancelRequest`) shows what was asked until the provider's webhook lands.
  */
 export function SubscriptionActions({
   manageHref,
@@ -64,12 +141,22 @@ export function SubscriptionActions({
   onCancel,
   onPortal,
   atProvider = true,
+  portal = "open",
+  buyerName,
+  onCancelInApp,
+  cancelAtPeriodEnd = false,
+  onResume,
+  cancelRequested = null,
+  portalNewTab = true,
+  providerName = "Paddle",
+  appName,
   pending,
   labels: labelsProp,
   className,
   ...rest
 }: SubscriptionActionsProps) {
   const labels = useBillingLabels(labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   if (!atProvider) {
     return (
       <div {...rest} data-at-provider="false" className={cn("text-sm text-muted", className)}>
@@ -77,33 +164,81 @@ export function SubscriptionActions({
       </div>
     );
   }
+  const buyerOnly = portal === "buyer_only";
   const manageCall = onManage ?? (onPortal ? () => onPortal("overview") : undefined);
-  const cancelCall = onCancel ?? (onPortal ? () => onPortal("cancel") : undefined);
-  const manage =
-    manageHref !== undefined ? (
-      <Button href={manageHref} variant="secondary">
-        {labels.manage}
-      </Button>
-    ) : manageCall !== undefined ? (
-      <Button type="button" variant="secondary" onClick={manageCall} pending={pending === "manage"}>
-        {labels.manage}
-      </Button>
-    ) : null;
+  const portalCancel = onCancel ?? (onPortal ? () => onPortal("cancel") : undefined);
+  // Under "buyer_only" the in-app cancel only; under "open" the portal's first, the
+  // in-app cancel only where no way to the portal's is given.
+  const cancelCall = buyerOnly ? onCancelInApp : (portalCancel ?? (cancelHref === undefined ? onCancelInApp : undefined));
+  // 0.43: what was asked in the app wins over the row until the row moves.
+  const scheduled = cancelRequested === "cancel" ? true : cancelRequested === "resume" ? false : cancelAtPeriodEnd;
+  // 0.43 (§17): the portal's actions are marked, a link opens a tab of its own.
+  const newTab = portalNewTab && !buyerOnly;
+  const words = (text: string, external: boolean, link: boolean): ReactNode =>
+    external ? (
+      <>
+        {text}
+        <ExternalMark reader={link ? undefined : common.opensInNewTab} />
+      </>
+    ) : (
+      text
+    );
+  const portalCancelShown = !buyerOnly && (cancelHref !== undefined || portalCancel !== undefined);
+  const manage = buyerOnly ? (
+    <p className="basis-full text-sm text-muted" data-buyer-holds="">
+      {labels.buyerHolds(buyerName || undefined)}
+    </p>
+  ) : manageHref !== undefined ? (
+    <Button href={manageHref} variant="secondary" external={newTab || undefined} data-portal-action="manage">
+      {words(labels.manage, newTab, true)}
+    </Button>
+  ) : manageCall !== undefined ? (
+    <Button
+      type="button"
+      variant="secondary"
+      onClick={manageCall}
+      pending={pending === "manage"}
+      className={newTab ? "relative" : undefined}
+      data-portal-action="manage"
+    >
+      {words(labels.manage, newTab, false)}
+    </Button>
+  ) : null;
   const cancel =
-    cancelHref !== undefined ? (
-      <Button href={cancelHref} variant="link" tone="danger">
-        {labels.cancel}
+    scheduled && onResume !== undefined ? (
+      <Button type="button" variant="link" onClick={onResume} pending={pending === "resume"} data-keep-subscription="">
+        {labels.keepSubscription}
+      </Button>
+    ) : cancelRequested === "cancel" ? null : cancelHref !== undefined && !buyerOnly ? (
+      <Button href={cancelHref} variant="link" tone="danger" external={newTab || undefined} data-portal-action="cancel">
+        {words(labels.cancel, newTab, true)}
       </Button>
     ) : cancelCall !== undefined ? (
-      <Button type="button" variant="link" tone="danger" onClick={cancelCall} pending={pending === "cancel"}>
-        {labels.cancel}
+      <Button
+        type="button"
+        variant="link"
+        tone="danger"
+        onClick={cancelCall}
+        pending={pending === "cancel"}
+        className={newTab && portalCancelShown ? "relative" : undefined}
+        data-portal-action={portalCancelShown ? "cancel" : undefined}
+      >
+        {words(labels.cancel, newTab && portalCancelShown, false)}
       </Button>
     ) : null;
   if (!manage && !cancel) return null;
+  // The note while a way to the portal shows: "Payment and invoices open at Paddle in a
+  // new tab; Kastlan stays open here."
+  const portalShown = !buyerOnly && (manage !== null || (cancel !== null && portalCancelShown && !(scheduled && onResume)));
   return (
     <div {...rest} className={cn("flex flex-wrap items-center gap-x-4 gap-y-2", className)}>
       {manage}
       {cancel}
+      {newTab && portalShown && (
+        <p className="basis-full text-sm text-muted" data-portal-note="">
+          {labels.portalOpensNewTab(providerName, appName || undefined)}
+        </p>
+      )}
     </div>
   );
 }

package/src/components/account-chips.tsx

@@ -6,7 +6,7 @@ import type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from "../l
 import { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { toLocalIso } from "../lib/dates";
 import { Chip } from "./chip";
-import type { ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip";
+import type { ChipLinkProps, ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip";
 import type { DataTableColumn } from "./data-table";
 import { DEFAULT_ACCOUNT_STATE_LABELS } from "./account-chips-labels";
 
@@ -47,8 +47,29 @@ interface AccountChipLook {
 export interface RoleDefinition {
   label: string;
   tone?: ChipTone;
-  /** A lucide component or an element — Kurvenschmiede marks its admins with a shield. */
+  /**
+   * A lucide component or an element — Kurvenschmiede marks its admins with a shield.
+   * Unlike {@link href} and {@link variant}, it shows EVERYWHERE the role is drawn: in
+   * {@link AccountRoleChip} and in {@link RoleChip} (the roster's column) alike. That is
+   * intended (0.43, keksdose's question): the glyph is part of how the role reads, so the
+   * shield on the header's chip is the shield in the users list. An app that wants the
+   * glyph in one place only hands the other a second vocabulary without `icon`.
+   */
   icon?: LucideIcon | ReactElement;
+  /**
+   * 0.42.0 (docs/admin-harmonization.md §2.1, settings §12.3): the role's tool — an
+   * admin's `/admin`, a reviewer's `/translations`. {@link AccountRoleChip} is a link to
+   * it; a role without one gets a plain chip. {@link RoleChip} ignores it: a roster's
+   * chips name a role, they are not a way in.
+   */
+  href?: string;
+  /**
+   * 0.42.0 (keksdose build review): this role's look in {@link AccountRoleChip} — keksdose
+   * draws only ADMIN `solid` and its REVIEWER and MEMBER `soft`. Default `solid`, the
+   * header's look; the chip's own `variant` prop wins over it. {@link RoleChip} ignores
+   * it: a roster's column keeps one look, set on the column.
+   */
+  variant?: ChipVariant;
 }
 
 /**
@@ -107,6 +128,72 @@ export function RoleChip<R extends string = string>({
   );
 }
 
+/* ── AccountRoleChip ───────────────────────────────────────────────────────── */
+
+export interface AccountRoleChipProps<R extends string = string> extends RoleChipProps<R> {
+  /**
+   * Runs on the way to the role's tool — the account menu's `close`, so the panel does
+   * not stay open over the page it just navigated to (keksdose F7). Only called on a
+   * link chip.
+   */
+  onNavigate?: () => void;
+  /** Your router's link for the role's `href`. Default: the `<UiKitProvider
+   *  linkComponent>`, then `<a>` — {@link Chip}'s `renderLink`. */
+  renderLink?: (props: ChipLinkProps) => ReactElement;
+}
+
+/**
+ * The role in the account menu's header (0.42.0, docs/admin-harmonization.md §2.1, §7):
+ * {@link RoleChip} in keksdose's look — `solid`, `sm`, `square`, `caps`, the role's icon
+ * and tone — made for `TopBarActionMenu`'s `header.extra`:
+ *
+ *     extra: (close) => <AccountRoleChip value={me.role} roles={ROLES} onNavigate={close} />
+ *
+ * A role whose {@link RoleDefinition.href} is set is a shortcut to its tool: the chip is a
+ * link (through `renderLink`, else the provider's link, as {@link Chip} draws links) and
+ * calls `onNavigate` on the click. Any other role is a plain chip — every account shows
+ * its role (§7, "Always a badge"). The words and tones are the app's vocabulary; the kit
+ * adds none. `solid` stays the default, so a role the app gives no look still reads as
+ * the header's tag; a role that should sit quieter (keksdose's MEMBER and REVIEWER) sets
+ * {@link RoleDefinition.variant} `soft` in the vocabulary. Carries `data-role` with the key.
+ */
+export function AccountRoleChip<R extends string = string>({
+  value: role,
+  roles,
+  onNavigate,
+  renderLink,
+  size = "sm",
+  variant,
+  shape = "square",
+  caps = true,
+  className,
+  ...rest
+}: AccountRoleChipProps<R>) {
+  if (role === null || role === undefined || role === "") return null;
+  const def = roles[role];
+  const look = {
+    ...rest,
+    "data-role": role,
+    tone: def?.tone ?? "neutral",
+    icon: def?.icon,
+    size,
+    // The prop, then the role's own look, then the header's `solid`.
+    variant: variant ?? def?.variant ?? "solid",
+    shape,
+    caps,
+    className,
+  } as const;
+  const label = def?.label ?? role;
+  if (def?.href) {
+    return (
+      <Chip {...look} href={def.href} renderLink={renderLink} onClick={onNavigate ? () => onNavigate() : undefined}>
+        {label}
+      </Chip>
+    );
+  }
+  return <Chip {...look}>{label}</Chip>;
+}
+
 /* ── AccountStateChip ──────────────────────────────────────────────────────── */
 
 /**

package/src/components/empty-state.tsx

@@ -17,8 +17,9 @@ export interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "chi
    * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing
    * when it moved onto EmptyState — so the page's heading outline lost the one line
    * that says what happened. Only the element changes; the look is the box's.
+   * `h1` (0.42.0) for an empty state that is the whole page — `AdminForbidden`.
    */
-  headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+  headingAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
    *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
    *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,

package/src/feedback/feedback-menu.tsx

@@ -71,6 +71,9 @@ export interface FeedbackMenuProps {
   /** Which edge of the trigger the panel lines up with, `start` or `end` in the reading
    *  direction (see `HoverMenu`, whose type this is). Default `end`. */
   align?: HoverMenuProps["align"];
+  /** 0.43: `data-*` attributes go on the trigger — a tour's anchor
+   *  (`data-tour="feedback-menu"`), a test hook. */
+  [key: `data-${string}`]: string | number | boolean | undefined;
 }
 
 /**
@@ -101,9 +104,9 @@ export interface FeedbackMenuProps {
  * to the top like one with none of what makes it actionable. The server refuses it with a
  * 422 anyway (§3.4).
  *
- * The menu forwards nothing to its trigger, as `TopBarActionMenu` does not: keksdose's
- * tour anchor (`data-tour="feedback-menu"`) stays on a wrapping `<span>`. Needs a router,
- * as every `TopBarActionMenu` with link rows does.
+ * Since 0.43 its `data-*` attributes go on the trigger (keksdose's tour anchor
+ * `data-tour="feedback-menu"` needs no wrapping `<span>` any more). Needs a router, as
+ * every `TopBarActionMenu` with link rows does.
  */
 export function FeedbackMenu({
   onFile,
@@ -115,6 +118,7 @@ export function FeedbackMenu({
   iconBadge,
   labels: labelsProp,
   align,
+  ...attributes
 }: FeedbackMenuProps) {
   const labels = useKitLabels("feedbackMenu", DEFAULT_FEEDBACK_MENU_LABELS, labelsProp);
   const categoryLabels = useFeedbackCategoryLabels();
@@ -167,6 +171,7 @@ export function FeedbackMenu({
       aria-label={labels.trigger}
       entries={entries}
       align={align}
+      triggerAttributes={Object.fromEntries(Object.entries(attributes).filter(([k]) => k.startsWith("data-")))}
     />
   );
 }

package/src/hooks/use-search-param-state.ts

@@ -208,7 +208,12 @@ function writeQuery(
     }
   }
   queued.lastPushed = push;
-  void navigate(`?${search}`, push ? undefined : { replace: true, state: carriedState(queued.state) });
+  // The hash is spelled out: `navigate("?…")` drops it (keksdose dev#495; build review
+  // 0.43, keksdose N2 — the tours page's filters).
+  void navigate(
+    { search: `?${search}`, hash: location.hash },
+    push ? undefined : { replace: true, state: carriedState(queued.state) },
+  );
 }
 
 /** The rendered query, and a write that composes with every other one on the router. */

package/src/i18n/defaults.ts

@@ -13,6 +13,7 @@ import {
 } from "../components/ui-labels";
 import { DEFAULT_WIZARD_LABELS } from "../wizard/wizard-labels";
 import { DEFAULT_TOUR_LABELS } from "../tour/tour-labels";
+import { DEFAULT_TOUR_CATALOGUE_LABELS } from "../tour/tour-catalogue-labels";
 import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette-labels";
 import { DEFAULT_GLOBAL_SEARCH_LABELS } from "../search/global-search-labels";
 import { DEFAULT_SERIES_CHART_LABELS } from "../components/series-chart-labels";
@@ -98,6 +99,8 @@ import { DEFAULT_DEVICE_RESET_LABELS } from "../settings/device-reset-setting-la
 import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions-labels";
 import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell-labels";
 import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips-labels";
+import { DEFAULT_ADMIN_AREA_LABELS } from "../admin/admin-area-labels";
+import { DEFAULT_TOP_BAR_PARTS_LABELS } from "../shell/top-bar-parts-labels";
 import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card-labels";
 import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog-labels";
 import { DEFAULT_SERVER_WAKE_LABELS } from "../components/server-wake-labels";
@@ -165,6 +168,7 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   file: DEFAULT_FILE_LABELS,
   wizard: DEFAULT_WIZARD_LABELS,
   tour: DEFAULT_TOUR_LABELS,
+  tourCatalogue: DEFAULT_TOUR_CATALOGUE_LABELS,
   commandPalette: DEFAULT_COMMAND_PALETTE_LABELS,
   globalSearch: DEFAULT_GLOBAL_SEARCH_LABELS,
   seriesChart: DEFAULT_SERIES_CHART_LABELS,
@@ -256,4 +260,6 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   signChip: DEFAULT_SIGN_CHIP_LABELS,
   columnMapper: DEFAULT_COLUMN_MAPPER_LABELS,
   notifications: DEFAULT_NOTIFICATIONS_LABELS,
+  adminArea: DEFAULT_ADMIN_AREA_LABELS,
+  topBarParts: DEFAULT_TOP_BAR_PARTS_LABELS,
 };

package/src/i18n/german.ts

@@ -626,6 +626,34 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       awaitClickHint: "Klicken Sie auf das hervorgehobene Element, um fortzufahren",
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
+    // 0.43.0 — docs/tours-harmonization.md §3, §8: the tours page. keksdose's reviewed words.
+    tourCatalogue: {
+      searchLabel: "Touren durchsuchen",
+      searchPlaceholder: "Touren durchsuchen…",
+      groupLabel: "Thema",
+      groupAll: (count) => `Alle Themen (${n(count)})`,
+      groupOption: (group, count) => `${group} (${n(count)})`,
+      stateLabel: "Touren filtern",
+      stateAll: (count) => `Alle (${n(count)})`,
+      stateTodo: (count) => `Offen (${n(count)})`,
+      stateDone: (count) => `Abgeschlossen (${n(count)})`,
+      showing: (shown, total) => `${n(shown)} von ${n(total)} Touren`,
+      noMatches: "Keine Tour passt",
+      noMatchesHint: "Versuchen Sie ein anderes Wort, oder setzen Sie die Filter zurück.",
+      clearFilters: "Filter zurücksetzen",
+      badgeNew: "Neu",
+      badgeUpdated: "Aktualisiert",
+      resetOn: (date, reason) => (reason ? `Zurückgesetzt am ${date}: ${reason}` : `Zurückgesetzt am ${date}`),
+      points: (count) => `+${n(count)} Pkt.`,
+      steps: (count) => (count === 1 ? `${n(count)} Schritt` : `${n(count)} Schritte`),
+      duration: (minutes) => `Etwa ${n(minutes)} Min.`,
+      completedOn: (date) => `Abgeschlossen am ${date}`,
+      completed: "Abgeschlossen",
+      notCompleted: "Nicht abgeschlossen",
+      markUndone: "Als nicht erledigt markieren",
+      start: "Starten",
+      replay: "Erneut",
+    },
     commandPalette: {
       clear: "Suche löschen",
       submit: "Suchen",
@@ -1729,6 +1757,12 @@ export function germanLabels(numberLocale: string): UiKitLabels {
         "Ihre Zahlung wird verarbeitet. Ihr Tarif beginnt, sobald sie bestätigt ist; diese Seite aktualisiert sich von selbst.",
       choosePlan: "Tarif wählen",
       updatePayment: "Zahlungsmethode aktualisieren",
+      // 0.42 (§16.7 A): for an admin who isn't the buyer. "Das Admin-Konto", which gives the
+      // reader no gender.
+      paymentFailedAskBuyer: (buyer) =>
+        buyer
+          ? `Die Zahlung ist fehlgeschlagen. ${buyer} kann die Zahlungsmethode aktualisieren.`
+          : "Die Zahlung ist fehlgeschlagen. Die Zahlungsmethode kann über das Admin-Konto aktualisiert werden, mit dem das Abonnement abgeschlossen wurde.",
       checkAgain: "Erneut prüfen",
       lockReason: "Ihr Tarif ist abgelaufen. Wählen Sie einen Tarif, um wieder Änderungen vorzunehmen.",
       // As `characterCount.limitReached` ("Zeichenlimit erreicht").
@@ -1763,6 +1797,22 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       switchCredited: "Gutschrift auf die nächsten Belastungen",
       switchNextCharge: (date) => `Nächste Belastung am ${date}`,
       switchConfirm: "Tarif ändern",
+      // 0.42 (§16): the portal for the buyer only, the in-app cancel, the grant warning.
+      buyerHolds: (buyer) =>
+        buyer
+          ? `Zahlungsmethode und Rechnungen liegen bei ${buyer}: Das Abonnement wurde über dieses Konto abgeschlossen.`
+          : "Zahlungsmethode und Rechnungen liegen beim Admin-Konto, mit dem das Abonnement abgeschlossen wurde.",
+      cancelConfirmTitle: "Abonnement kündigen",
+      cancelConfirmBody: (date) => `Ihr Abonnement endet am ${date}. Bis dahin funktioniert alles wie bisher.`,
+      // §312k BGB: the confirmation button says exactly this.
+      cancelConfirmAction: "Jetzt kündigen",
+      keepSubscription: "Abonnement behalten",
+      portalOpensNewTab: (provider, app) =>
+        `Zahlung und Rechnungen öffnen sich bei ${provider} in einem neuen Tab; ${app ? `${app} bleibt hier offen` : "diese Seite bleibt offen"}.`,
+      grantWarningTitle: "Ihr kostenloser Zugang läuft weiter",
+      grantWarningBody:
+        "Ihr kostenloser Zugang hat kein Enddatum. Solange er läuft, ändert ein Kauf Ihren Tarif nicht: Sie würden für einen Tarif bezahlen, der nicht gilt.",
+      grantWarningAction: "Trotzdem kaufen",
       waitingChanges: (count) =>
         count === 1
           ? `${n(count)} Änderung wartet auf einen Tarif`
@@ -1839,5 +1889,82 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       more: "Mehr",
       moreTitle: "Weitere Seiten",
     },
+    // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words. "Verwaltung"
+    // as settings §5 names the page; "mit Administratorrechten" rather than "für
+    // Administratoren", which would give the reader a gender (as `transferOwnership`).
+    adminArea: {
+      title: "Verwaltung",
+      waiting: (count) => `${n(count)} offen`,
+      forbiddenTitle: "Nur mit Administratorrechten",
+      forbiddenBody: (appName) => `Hier wird ${appName} verwaltet. Ihr Konto kann diese Seite nicht öffnen.`,
+      forbiddenHome: "Zur Startseite",
+      forbiddenReviewer: "Übersetzungen prüfen",
+      sections: {
+        overview: { title: "Übersicht", help: "Was gerade wartet, auf einen Blick." },
+        users: { title: "Benutzer", help: "Wer ein Konto hat und was jede Person darf." },
+        invitations: { title: "Einladungen", help: "Laden Sie Personen per E-Mail in ihrer Sprache ein; senden Sie offene Einladungen erneut oder widerrufen Sie sie." },
+        billing: { title: "Abrechnung", help: "Tarif, Zahlung und Rechnungen." },
+        activity: { title: "Aktivität", help: "Was in der Verwaltung getan wurde, das Neueste zuerst." },
+      },
+      tiles: {
+        feedbackWaiting: "Zu sichten",
+        deletionRequests: "Löschanfragen",
+        invitationsPending: "Offene Einladungen",
+        users: "Benutzer",
+        usersNew: (count) => `${n(count)} neu in 7 Tagen`,
+      },
+      overviewError: "Die Übersicht konnte nicht geladen werden.",
+      retry: "Erneut versuchen",
+      tools: "Werkzeuge",
+    },
+    // 0.42.0 — docs/top-bar-harmonization.md §3.1: the top bar's shared parts. keksdose's
+    // reviewed sync words where they are not about its budgets; "Tarif" as `billing`.
+    topBarParts: {
+      tours: {
+        menu: "Geführte Touren",
+        newDot: "Neue Touren",
+        thisPage: "Auf dieser Seite",
+        newTours: "Neue Touren",
+        allTours: "Alle Touren…",
+        badgeNew: "Neu",
+        completed: "Abgeschlossen",
+        badgeUpdated: "Aktualisiert",
+        updatedDot: "Aktualisierte Touren",
+        newAndUpdated: "Neu und aktualisiert",
+      },
+      sync: {
+        blocked: (count) =>
+          count === 1
+            ? `${n(count)} Änderung kann von diesem Gerät nicht gesendet werden`
+            : `${n(count)} Änderungen können von diesem Gerät nicht gesendet werden`,
+        offline: "Offline – Änderungen werden auf diesem Gerät gespeichert und bei erneuter Verbindung synchronisiert",
+        refused: "Der Server hat den letzten Abgleich abgelehnt",
+        syncing: "Wird synchronisiert…",
+        pending: (count) =>
+          count === 1
+            ? `${n(count)} Änderung wartet auf Synchronisierung`
+            : `${n(count)} Änderungen warten auf Synchronisierung`,
+        syncedAt: (time) => `Synchronisiert um ${time}`,
+        idle: "Aktuell",
+        syncHint: "Tippen, um jetzt zu synchronisieren",
+        offlineHint: "offline gibt es nichts zu synchronisieren",
+        withHint: (state, hint) => `${state} – ${hint}`,
+        scoped: (scope, state) => `${scope}: ${state}`,
+        offlineShort: "Offline",
+        syncingShort: "Sync läuft…",
+        waitingShort: (count) => `${n(count)} ausstehend`,
+        refusedShort: "Nicht synchronisiert",
+        offlineUnsaved: "Offline – Änderungen können erst nach erneuter Verbindung gespeichert werden",
+        saving: "Wird gespeichert…",
+      },
+      dev: {
+        roleHeading: "Dev · Rolle",
+        switchPlan: "Tarif wechseln",
+        plan: (value) => `Tarif: ${value}`,
+        planHeading: "Dev · Tarif",
+        backTo: (role) => `Zurück zu ${role}`,
+        billingOff: "Die Abrechnung ist lokal aus: Tarife ändern nichts",
+      },
+    },
   };
 }

package/src/i18n/kit-labels.tsx

@@ -25,6 +25,7 @@ import type { CharacterCountLabels, PasswordRevealLabels } from "../components/f
 import type { TabsLabels } from "../components/tabs";
 import type { WizardLabels } from "../wizard/types";
 import type { TourLabels } from "../tour/tour";
+import type { TourCatalogueLabels } from "../tour/tour-catalogue-labels";
 import type { CommandPaletteLabels } from "../search/command-palette";
 import type { GlobalSearchLabels } from "../search/global-search";
 import type { MonthPickerLabels } from "../components/month-picker";
@@ -118,6 +119,8 @@ import type { PhoneInputLabels } from "../components/phone-input";
 import type { SignChipLabels } from "../components/sign-chip";
 import type { ColumnMapperLabels } from "../components/column-mapper";
 import type { NotificationsLabels } from "../notifications/notifications-labels";
+import type { AdminAreaLabels } from "../admin/admin-area-labels";
+import type { TopBarPartsLabels } from "../shell/top-bar-parts-labels";
 
 /**
  * EVERY string the kit renders, as one typed tree — and an optional provider that
@@ -319,6 +322,8 @@ export interface UiKitLabels {
   file: FileLabels;
   wizard: WizardLabels;
   tour: TourLabels;
+  /** 0.43.0: the tours page — `TourCatalogue` and its card (docs/tours-harmonization.md §3). */
+  tourCatalogue: TourCatalogueLabels;
   commandPalette: CommandPaletteLabels;
   globalSearch: GlobalSearchLabels;
   seriesChart: SeriesChartLabels;
@@ -475,6 +480,13 @@ export interface UiKitLabels {
    *  device's push, the device list, and the unsubscribe page
    *  (docs/notifications-harmonization.md §4.2). */
   notifications: NotificationsLabels;
+  /** 0.42.0: the admin area's shared words — the account menu's "Administration" row, the
+   *  403 page, the shared sections, the overview's tiles and the Tools list
+   *  (docs/admin-harmonization.md §3.1). */
+  adminArea: AdminAreaLabels;
+  /** 0.42.0: the top bar's shared parts — `TourMenu`, `SyncStatusIndicator`, `DevSwitchers`
+   *  (docs/top-bar-harmonization.md §3.1). */
+  topBarParts: TopBarPartsLabels;
 }
 
 /**