@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/admin/mail-test-card.tsx

@@ -1,189 +0,0 @@
-import { useState } from "react";
-import type { ReactNode } from "react";
-import { Send } from "lucide-react";
-
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
-import { AlertBanner } from "../components/alert-banner";
-import { Button } from "../components/button";
-import { Chip } from "../components/chip";
-import { SettingsSection, type SettingsSectionProps } from "../settings/settings-section";
-import { DEFAULT_MAIL_TEST_CARD_LABELS } from "./mail-test-card-labels";
-
-/* ── Labels ──────────────────────────────────────────────────────────────── */
-
-/** Every string {@link MailTestCard} renders — the `mailTestCard` namespace of
- *  `<UiKitProvider labels>`, overridable per instance through `labels`
- *  (docs/admin-harmonization.md §9.2.4). */
-export interface MailTestCardLabels {
-  /** The card's title, and the app's catalogue entry's. */
-  title: string;
-  /** The sentence under it. */
-  description: string;
-  /** The transport's chip: "Transport: resend". `backend` is the server's `mail_backend`. */
-  transport: (backend: string) => string;
-  /** The button. */
-  action: string;
-  /** The answer said "sent" through a real transport. `address` is masked ("a…@example.com"). */
-  sent: (address: string) => string;
-  /** `mail_backend` is `console`: said whatever `sent` is — a console answers `true`. */
-  console: string;
-  /** Not sent, or the request failed. The provider's error stays in the server log. */
-  failed: string;
-  /** HTTP 429 — the app's limiter (server-kit's `MAIL_TEST_LIMIT`, 3 per 10 minutes);
-   *  `seconds` from `Retry-After` when the response has one. */
-  rateLimited: (seconds?: number) => string;
-  /** For the app's catalogue entry (`keywords`); the card never reads it. */
-  keywords: string;
-}
-
-// Defined in ./mail-test-card-labels, which holds no component code.
-export { DEFAULT_MAIL_TEST_CARD_LABELS };
-
-/* ── The card ────────────────────────────────────────────────────────────── */
-
-/** The answer of `POST /admin/mail/test` — server-kit 0.15's `MailTestResult`. */
-export interface MailTestAnswer {
-  sent: boolean;
-  /** The transport that took it: `console`, `resend`, `smtp`, … */
-  mail_backend: string;
-}
-
-/** The card's default DOM id: its catalogue entry's `anchor`, the `?focus=` target. */
-export const MAIL_TEST_ANCHOR = "admin-mail-test";
-
-export interface MailTestCardProps extends Omit<SettingsSectionProps, "anchor" | "title" | "description" | "children"> {
-  /** The installation's transport, as the admin page has it (`mail_backend`): the chip
-   *  before a send. After one, the answer's. Optional (0.46): without it the chip shows
-   *  from the first answer on, and an app needs no query only for the chip. */
-  mailBackend?: string;
-  /** The app's `POST /admin/mail/test` (kastlan `/platform/mail/test`), no body: it
-   *  awaits the app's own send and answers `{sent, mail_backend}`. A rejection is read
-   *  for a 429 (the limiter); anything else is "could not send". */
-  send: () => Promise<MailTestAnswer>;
-  /** The signed-in admin's own address — where the mail goes. Shown masked. */
-  address: string;
-  /** Default {@link MAIL_TEST_ANCHOR}; the app's catalogue entry names the same. */
-  anchor?: string;
-  /** The app's sentence after the kit's description. */
-  description?: ReactNode;
-  labels?: LabelOverride<MailTestCardLabels>;
-}
-
-/**
- * An address with its local part masked to its first character: "ada@example.com" →
- * "a…@example.com". The domain stays, so the admin sees which mailbox to open.
- */
-export function maskMailAddress(address: string): string {
-  const text = address.trim();
-  const at = text.lastIndexOf("@");
-  if (at <= 0) return text === "" ? "" : `${Array.from(text)[0]}…`;
-  return `${Array.from(text.slice(0, at))[0]}…${text.slice(at)}`;
-}
-
-type Outcome =
-  | { kind: "sent"; backend: string }
-  | { kind: "console"; backend: string }
-  | { kind: "failed"; backend?: string }
-  | { kind: "limited"; seconds?: number };
-
-/**
- * "Send a test mail to me" (docs/admin-harmonization.md §9.2): a `SettingsSection` with a
- * sentence, the transport as a chip, the button and the result line. One mail goes to the
- * signed-in admin's own address, never another, through the app's own send.
- *
- * **The result line reads `mail_backend` first**: with `console` it says "nothing was sent"
- * whatever `sent` is, since every console path answers `true` (§9.2 Today). Otherwise
- * `sent` says "Sent to a…@example.com. Check the inbox." or "Could not send." — the
- * provider's error stays in the server log (§9.2.7). A 429 says the limiter's line. The
- * button is busy while the request runs; the line is a live region.
- *
- * Not a commit: the test writes nothing, so it is not under the write lock (a demo never
- * reaches the admin area, and the server refuses it anyway). The app adds the catalogue
- * entry `{ id, anchor: MAIL_TEST_ANCHOR, title, keywords }` from these labels.
- */
-export function MailTestCard({
-  mailBackend,
-  send,
-  address,
-  anchor = MAIL_TEST_ANCHOR,
-  description,
-  labels: labelsProp,
-  ...rest
-}: MailTestCardProps) {
-  const labels = useKitLabels("mailTestCard", DEFAULT_MAIL_TEST_CARD_LABELS, labelsProp);
-  const [busy, setBusy] = useState(false);
-  const [outcome, setOutcome] = useState<Outcome | null>(null);
-  // The last transport an answer named: a later send with no answer (429, network) keeps it.
-  const [answered, setAnswered] = useState<string | undefined>(undefined);
-
-  const run = async () => {
-    if (busy) return;
-    setBusy(true);
-    setOutcome(null);
-    try {
-      const answer = await send();
-      const backend = answer.mail_backend;
-      if (backend) setAnswered(backend);
-      if (backend === "console") setOutcome({ kind: "console", backend });
-      else setOutcome(answer.sent ? { kind: "sent", backend } : { kind: "failed", backend });
-    } catch (error) {
-      setOutcome(isRateLimited(error) ? { kind: "limited", seconds: retryAfterSeconds(error) } : { kind: "failed" });
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const backend = answered ?? mailBackend;
-
-  return (
-    <SettingsSection
-      {...rest}
-      anchor={anchor}
-      title={labels.title}
-      description={
-        description != null ? (
-          <>
-            {labels.description} {description}
-          </>
-        ) : (
-          labels.description
-        )
-      }
-    >
-      <div className="space-y-2">
-        <div className="flex flex-wrap items-center gap-2">
-          <Button variant="secondary" pending={busy} onClick={() => void run()}>
-            <Send className="size-4" aria-hidden />
-            {labels.action}
-          </Button>
-          {backend && (
-            <Chip size="sm" data-slot="mail-backend">
-              {labels.transport(backend)}
-            </Chip>
-          )}
-        </div>
-        {outcome?.kind === "sent" && (
-          <AlertBanner variant="inline" block tone="success">
-            <span data-private>{labels.sent(maskMailAddress(address))}</span>
-          </AlertBanner>
-        )}
-        {outcome?.kind === "console" && (
-          <AlertBanner variant="inline" block tone="info">
-            {labels.console}
-          </AlertBanner>
-        )}
-        {outcome?.kind === "failed" && (
-          <AlertBanner variant="inline" block tone="danger">
-            {labels.failed}
-          </AlertBanner>
-        )}
-        {outcome?.kind === "limited" && (
-          <AlertBanner variant="inline" block tone="warning">
-            {labels.rateLimited(outcome.seconds)}
-          </AlertBanner>
-        )}
-      </div>
-    </SettingsSection>
-  );
-}

package/src/admin/plan-change-labels.ts

@@ -1,5 +0,0 @@
-// Moved to billing/plan-change-labels in 0.52 (refactor audit 2026-10-30, MOD-6): the
-// billing and admin folders imported each other through it. Kept so the old path still
-// answers; nothing in the kit imports it any more but the English catalogue.
-export { DEFAULT_PLAN_CHANGE_LABELS } from "../billing/plan-change-labels";
-export type { PlanChangeLabels } from "../billing/plan-change-labels";

package/src/admin/plan-change.tsx

@@ -1,474 +0,0 @@
-import { isValidElement, useCallback, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-
-import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
-import { pluralForm } from "../i18n/plurals";
-import type { PluralForms } from "../i18n/plurals";
-import { formatNumber, EMPTY_FORMATTED_VALUE } from "../lib/format";
-import { toLocalIso } from "../lib/dates";
-import type { DataTableColumn } from "../components/data-table";
-import { DatePicker } from "../components/date-picker";
-import { Tooltip } from "../components/tooltip";
-import { Select } from "../components/select";
-import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
-import { useBillingLabels } from "../billing/billing-labels";
-import type { SubscriptionStatus } from "../billing/billing-labels";
-import { SubscriptionStatusChip } from "../billing/subscription-status-chip";
-import { AdminActionConfirm } from "./admin-action-confirm";
-import type { AdminActionConfirmValues } from "./admin-action-confirm";
-import { personLabel, useDayText } from "./admin-parts";
-import type { AdminPerson, MaybePromise } from "./admin-parts";
-import { DEFAULT_PLAN_CHANGE_LABELS } from "../billing/plan-change-labels";
-import type { PlanChangeLabels } from "../billing/plan-change-labels";
-
-/**
- * The operator's plan parts (docs/billing-harmonization.md §14.12, decision 27):
- * {@link planColumn} for the roster or the companies list, {@link PlanChangeConfirm}
- * for the grant, and {@link usePlanChangeResult} for what the answer says.
- *
- * All three apps have the route (`POST /admin/users/{id}/plan`, kastlan's
- * `POST /platform/companies/{id}/plan`) and server-kit's `PlanChangeRequest` /
- * `PlanChangeResponse`; only keksdose had a UI (`users-panel.tsx`, `PlanConfirm` in
- * `user-admin-confirm.tsx`), and these are its parts, lifted. The plan names are the
- * app's (§3.1): every part takes `planName` or the plans with their names. The plan
- * codes come from `GET /admin/plans` (kastlan `GET /platform/plans`), which answers
- * whatever the billing switch says.
- */
-
-// The words and their type live in billing/plan-change-labels, which holds no component
-// code (0.34, KS U8): PlanSwitchConfirm reads them too, and billing importing admin while
-// this module imports billing made the two folders import each other (refactor audit
-// 2026-10-30, MOD-6).
-export type { PlanChangeLabels };
-export { DEFAULT_PLAN_CHANGE_LABELS };
-
-/** A plan code as the parts compare it: lowercase (§12.16 — an older row's "FREE" is
- *  the same plan as "free"), and no code at all as null. */
-function codeOf(raw: string | null | undefined): string | null {
-  const code = (raw ?? "").trim().toLowerCase();
-  return code === "" ? null : code;
-}
-
-/* ── The column ────────────────────────────────────────────────────────────── */
-
-/** What a row's usage is, for the line under its plan: "1/5" — and since 0.34 what
- *  {@link PlanChangeConfirm}'s `usage` takes, for the same sentence in the dialog. */
-export interface PlanColumnUsage {
-  used: number;
-  /** The plan's limit for it; `null` (unlimited, or none known): no line. */
-  limit: number | null;
-  /**
-   * The app's word for what is counted, as it reads after a number: "budgets" in "1 of 5
-   * budgets" — the word in a sentence, not a heading's "Budgets".
-   *
-   * Its plural forms (0.33.1, keksdose): `{ one: "budget", other: "budgets" }` — your
-   * catalogue's `_one` / `_other` pair, any CLDR category allowed, `other` for the rest
-   * ({@link PluralForms}). The column picks the form for the limit in the provider's
-   * locale, so a plan of one reads "1 of 1 budget". A plain string is used as it is,
-   * whatever the count.
-   */
-  label: string | PluralForms;
-}
-
-export interface PlanColumnOptions<T> {
-  /** The column's key. Default `"plan"`. */
-  key?: string;
-  /** The row's plan code, read without case (§12.16); null for none. */
-  plan: (row: T) => string | null;
-  /** The plan's display name, the app's (§3.1). Gets the lowercase code. */
-  planName: (code: string) => string;
-  /** The row's standing, as a `SubscriptionStatusChip` beside the name. Left out, or
-   *  undefined for a row: no chip — billing off, where a status says nothing. */
-  status?: (row: T) => SubscriptionStatus | undefined;
-  /** The row's usage of its plan's limit: "1/5" under the name, "1 of 5 budgets" in
-   *  the tooltip (`planChange.usageOf`, with the label's form for the limit). Undefined
-   *  for a row, or a `null` limit: no line. */
-  usage?: (row: T) => PlanColumnUsage | undefined;
-  /** A select filter over these codes, each named by `planName`. Left out: none. */
-  filterPlans?: readonly string[];
-  /**
-   * The sort. Default: by the plan code (keksdose's, `users-panel.tsx:739`). A function:
-   * by its value — the catalogue's `sort` for rank order. `false`: not sortable.
-   *
-   * Client-side only, as every column's `sortBy`: a `DataTable` with `serverPagination`
-   * holds one page, so it sorts nothing itself — with `onSortsChange` it reports the
-   * column's `key` (default `"plan"`), and your server orders the rows by it.
-   */
-  sortBy?: false | ((row: T) => string | number | null | undefined);
-  /** The header's text. Default `planChange.column`. */
-  headerText?: string;
-  /** The words, already resolved. Default English; {@link usePlanColumn} reads the
-   *  provider's `planChange` namespace. */
-  labels?: LabelOverride<PlanChangeLabels>;
-}
-
-/**
- * A usage spelled out — `planChange.usageOf` with the figures in `locale` and the word in
- * the form the limit takes: "1 of 1 budget", "Budgets: 1 von 5". The column's tooltip
- * and the grant dialog's line both read it, so the rule lives once (round 0.34 C15).
- */
-function usageSentence(
-  usage: PlanColumnUsage & { limit: number },
-  usageOf: PlanChangeLabels["usageOf"],
-  locale: string | undefined,
-): string {
-  const figure = (value: number) => formatNumber(value, { locale });
-  const word = typeof usage.label === "string" ? usage.label : pluralForm(usage.limit, usage.label, locale);
-  return usageOf(figure(usage.used), figure(usage.limit), word);
-}
-
-/** The cell: a component, so the figures follow the provider's locale. */
-function PlanCell({
-  code,
-  name,
-  status,
-  usage,
-  usageOf,
-}: {
-  code: string | null;
-  name: string;
-  status: SubscriptionStatus | undefined;
-  usage: PlanColumnUsage | undefined;
-  usageOf: PlanChangeLabels["usageOf"];
-}) {
-  const locale = useKitLocale();
-  const figure = (value: number) => formatNumber(value, { locale });
-  return (
-    <div className="whitespace-nowrap" data-plan={code ?? undefined}>
-      <div className="flex items-center gap-1.5">
-        <span className={code ? "font-medium" : "text-muted"}>{name}</span>
-        {/* The standing at a glance (§6): the kit's word and tone, never colour alone. */}
-        {status !== undefined && <SubscriptionStatusChip status={status} size="xs" />}
-      </div>
-      {usage && usage.limit !== null && (
-        // "1/5" under the plan, "1 of 5 budgets" in the tooltip: the sentence spelled out
-        // inline was the widest thing in keksdose's table.
-        <Tooltip label={usageSentence({ ...usage, limit: usage.limit }, usageOf, locale)}>
-          <span className="block text-xs tabular-nums text-muted">
-            {figure(usage.used)}/{figure(usage.limit)}
-          </span>
-        </Tooltip>
-      )}
-    </div>
-  );
-}
-
-/**
- * The roster's (or the companies list's) plan column: the plan's display name, the
- * standing chip beside it while billing is on, and the usage under it — keksdose's
- * column, `users-panel.tsx:706-745`. Pass it in `userRosterColumns`' `extra`, or in
- * any `DataTable`'s columns:
- *
- *     extra: [planColumn<AdminUserRow>({
- *       plan: (u) => u.plan,
- *       planName,
- *       status: billingOn ? (u) => u.subscription?.status : undefined,
- *       usage: (u) => ({
- *         used: u.budgets_owned,
- *         limit: u.limits.budgets,
- *         label: { one: t("planUsage.budget_one"), other: t("planUsage.budget_other") },
- *       }),
- *       filterPlans: plans.map((p) => p.code),
- *     })]
- *
- * Pure: hand it resolved words, or use {@link usePlanColumn}.
- */
-export function planColumn<T>(options: PlanColumnOptions<T>): DataTableColumn<T> {
-  const { key = "plan", plan, planName, status, usage, filterPlans, sortBy, headerText, labels: labelsProp } = options;
-  const labels: PlanChangeLabels = { ...DEFAULT_PLAN_CHANGE_LABELS, ...labelsProp };
-  const header = headerText ?? labels.column;
-  const nameOf = (code: string | null) => (code ? planName(code) : EMPTY_FORMATTED_VALUE);
-  return {
-    key,
-    header,
-    headerText: header,
-    cell: (row) => {
-      const code = codeOf(plan(row));
-      return (
-        <PlanCell
-          code={code}
-          name={nameOf(code)}
-          status={status?.(row)}
-          usage={usage?.(row)}
-          usageOf={labels.usageOf}
-        />
-      );
-    },
-    sortBy: sortBy === false ? undefined : (sortBy ?? ((row) => codeOf(plan(row)) ?? "")),
-    filter: filterPlans
-      ? {
-          type: "select",
-          getValue: (row) => codeOf(plan(row)) ?? "",
-          options: [...new Set(filterPlans.map((code) => codeOf(code)).filter((code) => code !== null))].map(
-            (code) => ({ value: code, label: planName(code) }),
-          ),
-        }
-      : undefined,
-  };
-}
-
-/**
- * {@link planColumn} with the `planChange` words from the provider, memoised on the
- * options — pass stable callbacks (`useCallback`), or the column is rebuilt on every
- * render.
- */
-export function usePlanColumn<T>(options: PlanColumnOptions<T>): DataTableColumn<T> {
-  const { key, plan, planName, status, usage, filterPlans, sortBy, headerText, labels: labelsProp } = options;
-  const labels = useKitLabels("planChange", DEFAULT_PLAN_CHANGE_LABELS, labelsProp);
-  return useMemo(
-    () => planColumn<T>({ key, plan, planName, status, usage, filterPlans, sortBy, headerText, labels }),
-    [key, plan, planName, status, usage, filterPlans, sortBy, headerText, labels],
-  );
-}
-
-/* ── The grant ─────────────────────────────────────────────────────────────── */
-
-/** What {@link PlanChangeConfirmProps.onConfirm} sends: server-kit's
- *  `PlanChangeRequest` without its `acknowledged`, which comes in `values`. */
-export interface PlanChange {
-  /** The picked plan's code. */
-  plan: string;
-  /** The end of the free grant, as ISO UTC — only when one was picked. */
-  comped_until?: string;
-}
-
-export interface PlanChangeConfirmProps {
-  /**
-   * Whom it is about — a user (`AdminActionTarget`), or kastlan's company, which has no
-   * address: its name is said instead (the level is `acknowledge`, so nothing is typed).
-   */
-  target: AdminPerson & { email?: string | null };
-  /** The plans to offer, in the catalogue's order, by their display names (§3.1) — from
-   *  `GET /admin/plans`. */
-  plans: readonly { code: string; name: string }[];
-  /** The account's plan now; null for none. The select opens on it. */
-  current: string | null;
-  /**
-   * What the account uses. The column's shape (0.34, keksdose N1) — `{ used, limit, label }`,
-   * the label a word or its plural forms — is spelled out as the column's tooltip is
-   * (`planChange.usageOf`, the word in the limit's form: "1 of 1 budget"); a `null` limit
-   * gives no line. Or the app's own sentence, as it is: "3 of 5 budgets".
-   */
-  usage?: PlanColumnUsage | ReactNode;
-  /** Offer "Free until" — only meaningful while billing is on, where a grant's end
-   *  means something to the payer. */
-  grantEnd?: boolean;
-  /**
-   * Sends it: `{plan}`, and `comped_until` only when an end was picked — the END of the
-   * picked day in the operator's time zone, as ISO UTC (a grant "until 31 January" lasts
-   * through it). No end: a grant without one, or on a running beta only the plan moves
-   * and the beta keeps its own end (§12.34). `values.acknowledged` is the body's
-   * `acknowledged`. A promise is handled as `AdminActionConfirm`'s.
-   */
-  onConfirm: (change: PlanChange, values: AdminActionConfirmValues) => MaybePromise;
-  onClose: (done: boolean) => void;
-  /** The app's words for a failure the kit has no code for. */
-  describeError?: (error: unknown) => ReactNode | undefined;
-  labels?: LabelOverride<PlanChangeLabels>;
-}
-
-/** The column's usage shape, told from a node: a plain object with the three fields. */
-function isPlanUsage(value: PlanChangeConfirmProps["usage"]): value is PlanColumnUsage {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    !isValidElement(value) &&
-    "used" in value &&
-    "limit" in value &&
-    "label" in value
-  );
-}
-
-/** The end of the day `date` (YYYY-MM-DD) names, in this device's time zone, as ISO
- *  UTC — keksdose's `endOfDay` (`user-admin-confirm.tsx:44-46`). */
-function endOfDay(date: string): string {
-  return new Date(`${date}T23:59:59`).toISOString();
-}
-
-/**
- * An operator's plan change (§14.12): `AdminActionConfirm` at `acknowledge`, the line
- * with the current plan and the app's usage sentence, a plan select, and — with
- * `grantEnd` — the end of a free grant. The confirm is held while nothing would change.
- *
- * Exempt from a BILLING lock, built in (`COMMIT_EXCEPT_BILLING`, §12.36): a plan change
- * is an admin route (§12.13), and the operator's own account or company may be lapsed —
- * kastlan's review. A demo lock still holds it.
- */
-export function PlanChangeConfirm({
-  target,
-  plans,
-  current: currentProp,
-  usage,
-  grantEnd = false,
-  onConfirm,
-  onClose,
-  describeError,
-  labels: labelsProp,
-}: PlanChangeConfirmProps) {
-  const labels = useKitLabels("planChange", DEFAULT_PLAN_CHANGE_LABELS, labelsProp);
-  const locale = useKitLocale();
-  // Seeded from the account, so the picker opens on the truth and confirming without
-  // touching it is held rather than a silent free → free in the audit.
-  const current = codeOf(currentProp);
-  const [plan, setPlan] = useState(current ?? "");
-  const [until, setUntil] = useState("");
-  // A grant ends today at the earliest; read once, not on every render.
-  const [today] = useState(() => toLocalIso(new Date()));
-  const options = plans.map((p) => ({ code: codeOf(p.code) ?? p.code, name: p.name }));
-  const nameOf = (code: string) => options.find((p) => p.code === code)?.name ?? code;
-  // An account on a plan the catalogue no longer lists still opens on it.
-  if (current && !options.some((p) => p.code === current)) options.unshift({ code: current, name: current });
-  const unchanged = plan === "" || (plan === current && !until);
-  // A company has no address: the dialog says its name in the address's place.
-  const who = { ...target, email: target.email || personLabel(target, locale) };
-  // The column's shape in the column's sentence; the app's own sentence as it is.
-  const usageLine: ReactNode | undefined = isPlanUsage(usage)
-    ? usage.limit === null
-      ? undefined
-      : usageSentence({ ...usage, limit: usage.limit }, labels.usageOf, locale)
-    : usage;
-
-  return (
-    <AdminActionConfirm
-      level="acknowledge"
-      tone="warning"
-      target={who}
-      title={labels.title}
-      confirmLabel={labels.confirm}
-      confirmDisabledReason={unchanged ? labels.needsChange : undefined}
-      describeError={describeError}
-      commit={COMMIT_EXCEPT_BILLING}
-      onConfirm={(values) => onConfirm({ plan, ...(until ? { comped_until: endOfDay(until) } : {}) }, values)}
-      onClose={onClose}
-    >
-      {(current !== null || usageLine !== undefined) && (
-        <div className="space-y-0.5 text-xs text-muted" data-plan-current={current ?? undefined}>
-          {current !== null && <p>{labels.current(nameOf(current))}</p>}
-          {usageLine !== undefined && <p>{usageLine}</p>}
-        </div>
-      )}
-      <Select label={labels.plan} hint={labels.keepsItems} value={plan} onChange={(e) => setPlan(e.target.value)}>
-        {plan === "" && (
-          <option value="" disabled>
-            {EMPTY_FORMATTED_VALUE}
-          </option>
-        )}
-        {options.map((option) => (
-          <option key={option.code} value={option.code}>
-            {option.name}
-          </option>
-        ))}
-      </Select>
-      {grantEnd && (
-        <DatePicker
-          label={labels.until}
-          hint={labels.untilHint}
-          value={until}
-          onChange={setUntil}
-          min={today}
-          clearable
-        />
-      )}
-    </AdminActionConfirm>
-  );
-}
-
-/* ── The answer ────────────────────────────────────────────────────────────── */
-
-/**
- * A `PlanChangeResponse` as the page reads it — server-kit 0.7's (§14.12), which gained
- * `previous_plan` nullable, `usage`, `kept_beta` and `comped_until`.
- */
-export interface PlanChangeOutcome {
-  /** null: the account had no subscription. */
-  previous_plan: string | null;
-  plan: string;
-  over_limit: boolean;
-  /** The new plan's limits; null for unlimited. */
-  limits: Readonly<Record<string, number | null>>;
-  /** What the payer has, per dimension — the figures for the over-limit lines:
-   *  `{ budgets: 7 }`. */
-  usage: Readonly<Record<string, number>>;
-  /** A running beta kept its own end (§12.34). */
-  kept_beta?: boolean;
-  /** The grant's end as the change wrote it; null: no end, or no grant. */
-  comped_until?: string | null;
-}
-
-/** A line's tone: the app's toast kind. */
-export type PlanChangeTone = "success" | "info" | "warning";
-
-export interface PlanChangeLine {
-  tone: PlanChangeTone;
-  text: string;
-}
-
-export interface PlanChangeResultOptions {
-  /** The app's word per dimension, for the over-limit figures: `{ budgets: "Budgets" }`.
-   *  A dimension without one is named by its key. */
-  dimensionLabels?: Readonly<Record<string, string>>;
-  /** How a figure is written. Default: a number in the kit's locale. */
-  formatValue?: (dimension: string, value: number) => string;
-}
-
-/**
- * The lines for a plan change's answer, each with its tone, for the app's toasts —
- * echoing the SERVER's before and after, not what was picked: a toast that reported the
- * request would say "done" to a write that landed differently (keksdose's rule).
- *
- *     const lines = usePlanChangeResult();
- *     for (const line of lines(res, planName)) toast[line.tone](line.text);
- *
- * - `changed(from, to)`, or `set(to)` with no previous plan (or the same one): success;
- * - a running beta that kept its end: `keptBeta`, info; else a grant's end:
- *   `untilDone(date)`, success;
- * - over the new limit: `overLimit`, then one figure line per dimension over it ("Budgets:
- *   7 of 5", `billing.limitUsageLine`), from `usage` and `limits`: warning. A `null`
- *   limit gives no figure line.
- */
-export function usePlanChangeResult(): (
-  res: PlanChangeOutcome,
-  planName: (code: string) => string,
-  options?: PlanChangeResultOptions,
-) => PlanChangeLine[] {
-  const labels = useKitLabels("planChange", DEFAULT_PLAN_CHANGE_LABELS);
-  const billing = useBillingLabels();
-  const locale = useKitLocale();
-  const dayText = useDayText();
-  return useCallback(
-    (res, planName, options = {}) => {
-      const { dimensionLabels, formatValue } = options;
-      const name = (raw: string) => planName(codeOf(raw) ?? raw);
-      const to = name(res.plan);
-      const from = codeOf(res.previous_plan);
-      const lines: PlanChangeLine[] = [
-        {
-          tone: "success",
-          text: from !== null && from !== codeOf(res.plan) ? labels.changed(name(from), to) : labels.set(to),
-        },
-      ];
-      if (res.kept_beta) lines.push({ tone: "info", text: labels.keptBeta });
-      else if (res.comped_until) lines.push({ tone: "success", text: labels.untilDone(dayText(res.comped_until)) });
-      if (res.over_limit) {
-        lines.push({ tone: "warning", text: labels.overLimit });
-        const figure = (dimension: string, value: number) =>
-          formatValue ? formatValue(dimension, value) : formatNumber(value, { locale });
-        // Read defensively: an app's server from before 0.7 sent neither.
-        for (const [dimension, limit] of Object.entries(res.limits ?? {})) {
-          const used = res.usage?.[dimension];
-          if (limit === null || used === undefined || used <= limit) continue;
-          lines.push({
-            tone: "warning",
-            text: billing.limitUsageLine(
-              dimensionLabels?.[dimension] ?? dimension,
-              figure(dimension, used),
-              figure(dimension, limit),
-            ),
-          });
-        }
-      }
-      return lines;
-    },
-    [labels, billing, locale, dayText],
-  );
-}