@eifi1/ui-kit 0.29.0 → 0.30.0

package/dist/rhf.d.ts

@@ -4,7 +4,10 @@ export { RhfCheckbox, RhfCheckboxProps, RhfCombobox, RhfComboboxProps, RhfCountr
 export { RhfLineItemCellContext, RhfLineItems, RhfLineItemsColumn, RhfLineItemsProps } from './rhf/line-items.js';
 import 'react';
 import 'react-hook-form';
-import './register-form-V1OeNlMr.js';
+import './delete-account-setting-CGVMckMw.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
 import './data-table-labels-DUELeXpa.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
@@ -14,10 +17,6 @@ import './components/popover.js';
 import './components/chip.js';
 import 'lucide-react';
 import './components/field-sync.js';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.js';
-import './components/field-parts.js';
 import './wizard/types.js';
 import './tour/tour.js';
 import './search/command-palette.js';
@@ -60,6 +59,12 @@ import './components/image-grid.js';
 import './components/lightbox.js';
 import './components/write-lock.js';
 import './auth/sign-in-form.js';
+import './shell/topbar-controls.js';
+import './theme/palette-presets.js';
+import './theme/chart-palette.js';
+import './theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
 import './auth/complete-name-dialog.js';
 import './auth/forgot-password-form.js';
 import './auth/status-parts.js';
@@ -68,8 +73,13 @@ import './auth/verify-email.js';
 import './auth/not-found-page.js';
 import './auth/accept-invitation.js';
 import './shell/company-switcher.js';
-import './components/account-chips.js';
+import './account/email-change-setting.js';
+import './account/sessions-setting.js';
 import './lib/format.js';
+import './account/data-export-setting.js';
+import './components/account-chips.js';
+import './admin/admin-parts.js';
+import './admin/admin-action-log.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
@@ -83,12 +93,7 @@ import './components/sign-chip.js';
 import './components/column-mapper.js';
 import './lib/column-mapping.js';
 import './lib/table-text.js';
-import './shell/topbar-controls.js';
-import './theme/palette-presets.js';
-import './theme/chart-palette.js';
-import './theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
+import './components/field-parts.js';
 import './components/number-field.js';
 import './components/number-input.js';
 import './components/calculator.js';

package/dist/shell/app-shell.d.ts

@@ -1,7 +1,10 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { dp as KitLinkComponent } from '../register-form-V1OeNlMr.js';
+import { dR as KitLinkComponent } from '../delete-account-setting-CGVMckMw.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
@@ -10,10 +13,6 @@ import '../components/calendar-heatmap.js';
 import '../components/popover.js';
 import '../components/chip.js';
 import '../components/field-sync.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../components/field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -56,6 +55,12 @@ import '../components/image-grid.js';
 import '../components/lightbox.js';
 import '../components/write-lock.js';
 import '../auth/sign-in-form.js';
+import './topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
 import '../auth/complete-name-dialog.js';
 import '../auth/forgot-password-form.js';
 import '../auth/status-parts.js';
@@ -64,8 +69,13 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import './company-switcher.js';
-import '../components/account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import '../components/account-chips.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
 import '../components/reauth-dialog.js';
 import '../components/server-wake.js';
 import '../lib/server-wake.js';
@@ -79,12 +89,7 @@ import '../components/sign-chip.js';
 import '../components/column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
+import '../components/field-parts.js';
 
 interface AppShellSubItem {
     to: string;

package/dist/shell/top-bar-brand.d.ts

@@ -1,6 +1,9 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { dq as KitLinkProps, dp as KitLinkComponent } from '../register-form-V1OeNlMr.js';
+import { dS as KitLinkProps, dR as KitLinkComponent } from '../delete-account-setting-CGVMckMw.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
@@ -10,10 +13,6 @@ import '../components/popover.js';
 import '../components/chip.js';
 import 'lucide-react';
 import '../components/field-sync.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../components/field-parts.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -56,6 +55,12 @@ import '../components/image-grid.js';
 import '../components/lightbox.js';
 import '../components/write-lock.js';
 import '../auth/sign-in-form.js';
+import './topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
 import '../auth/complete-name-dialog.js';
 import '../auth/forgot-password-form.js';
 import '../auth/status-parts.js';
@@ -64,8 +69,13 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import './company-switcher.js';
-import '../components/account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import '../components/account-chips.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
 import '../components/reauth-dialog.js';
 import '../components/server-wake.js';
 import '../lib/server-wake.js';
@@ -79,12 +89,7 @@ import '../components/sign-chip.js';
 import '../components/column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
+import '../components/field-parts.js';
 
 interface TopBarBrandProps extends Omit<KitLinkProps, "href" | "children"> {
     /** The brand mark — an SVG, sized by the caller or `h-6 w-auto` by default. */

package/dist/shell.d.ts

@@ -13,7 +13,10 @@ import './theme/theme-store.js';
 import 'zustand/middleware';
 import 'zustand';
 import 'lucide-react';
-import './register-form-V1OeNlMr.js';
+import './delete-account-setting-CGVMckMw.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
 import './data-table-labels-DUELeXpa.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
@@ -22,10 +25,6 @@ import './components/calendar-heatmap.js';
 import './components/popover.js';
 import './components/chip.js';
 import './components/field-sync.js';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.js';
-import './components/field-parts.js';
 import './wizard/types.js';
 import './tour/tour.js';
 import './search/command-palette.js';
@@ -74,8 +73,13 @@ import './auth/verify-email.js';
 import './auth/not-found-page.js';
 import './auth/accept-invitation.js';
 import './shell/company-switcher.js';
-import './components/account-chips.js';
+import './account/email-change-setting.js';
+import './account/sessions-setting.js';
 import './lib/format.js';
+import './account/data-export-setting.js';
+import './components/account-chips.js';
+import './admin/admin-parts.js';
+import './admin/admin-action-log.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
@@ -89,4 +93,5 @@ import './components/sign-chip.js';
 import './components/column-mapper.js';
 import './lib/column-mapping.js';
 import './lib/table-text.js';
+import './components/field-parts.js';
 import './components/menu-item.js';

package/dist/wizard/stepper-nav.d.ts

@@ -1,7 +1,10 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { bA as ButtonVariant } from '../register-form-V1OeNlMr.js';
+import { bH as ButtonVariant } from '../delete-account-setting-CGVMckMw.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-DUELeXpa.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
@@ -11,10 +14,6 @@ import '../components/popover.js';
 import '../components/chip.js';
 import 'lucide-react';
 import '../components/field-sync.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../components/field-parts.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
 import '../search/global-search.js';
@@ -56,6 +55,12 @@ import '../components/image-grid.js';
 import '../components/lightbox.js';
 import '../components/write-lock.js';
 import '../auth/sign-in-form.js';
+import '../shell/topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
 import '../auth/complete-name-dialog.js';
 import '../auth/forgot-password-form.js';
 import '../auth/status-parts.js';
@@ -64,8 +69,13 @@ import '../auth/verify-email.js';
 import '../auth/not-found-page.js';
 import '../auth/accept-invitation.js';
 import '../shell/company-switcher.js';
-import '../components/account-chips.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
 import '../lib/format.js';
+import '../account/data-export-setting.js';
+import '../components/account-chips.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
 import '../components/reauth-dialog.js';
 import '../components/server-wake.js';
 import '../lib/server-wake.js';
@@ -79,12 +89,7 @@ import '../components/sign-chip.js';
 import '../components/column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
+import '../components/field-parts.js';
 
 /**
  * The chrome around a wizard: the step indicator, the step content, and the

package/dist/wizard.d.ts

@@ -6,7 +6,10 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './register-form-V1OeNlMr.js';
+import './delete-account-setting-CGVMckMw.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
 import './data-table-labels-DUELeXpa.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
@@ -16,10 +19,6 @@ import './components/popover.js';
 import './components/chip.js';
 import 'lucide-react';
 import './components/field-sync.js';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.js';
-import './components/field-parts.js';
 import './tour/tour.js';
 import './search/command-palette.js';
 import './search/global-search.js';
@@ -61,6 +60,12 @@ import './components/image-grid.js';
 import './components/lightbox.js';
 import './components/write-lock.js';
 import './auth/sign-in-form.js';
+import './shell/topbar-controls.js';
+import './theme/palette-presets.js';
+import './theme/chart-palette.js';
+import './theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
 import './auth/complete-name-dialog.js';
 import './auth/forgot-password-form.js';
 import './auth/status-parts.js';
@@ -69,8 +74,13 @@ import './auth/verify-email.js';
 import './auth/not-found-page.js';
 import './auth/accept-invitation.js';
 import './shell/company-switcher.js';
-import './components/account-chips.js';
+import './account/email-change-setting.js';
+import './account/sessions-setting.js';
 import './lib/format.js';
+import './account/data-export-setting.js';
+import './components/account-chips.js';
+import './admin/admin-parts.js';
+import './admin/admin-action-log.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
@@ -84,9 +94,4 @@ import './components/sign-chip.js';
 import './components/column-mapper.js';
 import './lib/column-mapping.js';
 import './lib/table-text.js';
-import './shell/topbar-controls.js';
-import './theme/palette-presets.js';
-import './theme/chart-palette.js';
-import './theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
+import './components/field-parts.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/account/account-parts.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * What the account's own settings parts share (docs/user-admin-harmonization.md §6):
+ * the companies a refusal names, a mounted guard, and the card's type.
+ *
+ * @internal Not part of the barrel; the parts are.
+ */
+
+type Bag = Record<string, unknown>;
+
+const isBag = (value: unknown): value is Bag => typeof value === "object" && value !== null;
+
+/** `companies` on a parsed body, or under FastAPI's nested `detail`: a list of names. */
+function companiesOfBody(body: unknown): string[] | undefined {
+  if (!isBag(body)) return undefined;
+  const pick = (value: unknown) =>
+    Array.isArray(value) && value.length > 0 && value.every((item) => typeof item === "string")
+      ? (value as string[])
+      : undefined;
+  return pick(body.companies) ?? (isBag(body.detail) ? pick(body.detail.companies) : undefined);
+}
+
+/**
+ * The companies a `last_admin` refusal names — kastlan checks the last admin per company
+ * and answers `409 {detail, code: "last_admin", companies: ["Example AG"]}` (§6.4,
+ * server-kit's `AccountError(…, extra={"companies": …})`). Read where `authErrorCode`
+ * reads the code: axios' `response.data`, ofetch's `data`, a generated client's `body`,
+ * a body thrown as it came. `undefined` when there is no such list.
+ */
+export function refusalCompanies(err: unknown): string[] | undefined {
+  if (!isBag(err)) return undefined;
+  const response = err.response;
+  return (
+    (isBag(response) ? companiesOfBody(response.data) : undefined) ??
+    companiesOfBody(err.data) ??
+    companiesOfBody(err.body) ??
+    companiesOfBody(err)
+  );
+}
+
+/** Whether the component is still mounted — a late answer after the app navigated away
+ *  (the deletion signs out) must not set state. */
+export function useMounted(): { readonly current: boolean } {
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  return mounted;
+}
+
+/** Call `call` and hand back a promise, a throw included — a callback may return
+ *  nothing (done at once), a promise, or throw before it returns one. */
+export function settle(call: () => unknown): Promise<unknown> {
+  try {
+    return Promise.resolve(call());
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
+/** The settings cards' type scale, PasskeysSetting's: a small title and a muted line. */
+export const CARD_TITLE_CLASS = "text-sm font-medium";
+export const CARD_DESCRIPTION_CLASS = "text-xs text-[var(--text-muted)]";

package/src/account/data-export-setting.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Download } from "lucide-react";
+
+import { useKitLabels } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { AlertBanner } from "../components/alert-banner";
+import { hasMessage } from "../components/choice-parts";
+import { TextLink } from "../components/text-link";
+import { Button, Card } from "../components/ui";
+import { englishWait, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
+import { CARD_DESCRIPTION_CLASS, CARD_TITLE_CLASS, settle, useMounted } from "./account-parts";
+
+/* ── Labels ──────────────────────────────────────────────────────────────── */
+
+/** Every string {@link DataExportSetting} renders — the `dataExport` namespace of
+ *  `<UiKitProvider labels>`, overridable per instance through `labels`. */
+export interface DataExportLabels {
+  /** The card's title. */
+  title: string;
+  /** What the download is. The app's own sentence (`description`) follows it. */
+  description: string;
+  /** The button. */
+  download: string;
+  /** Said once the file was handed to the browser. */
+  started: string;
+  /** The link under it that saves the same file again, for a browser that held the
+   *  download back. */
+  saveAgain: string;
+  /** The export was throttled — HTTP 429 (§6.5: once a minute) — given its
+   *  `Retry-After` wait in seconds, or `undefined` without one. */
+  rateLimited: (seconds?: number) => string;
+  /** Any other failure. */
+  failed: string;
+}
+
+export const DEFAULT_DATA_EXPORT_LABELS: DataExportLabels = {
+  title: "Export your data",
+  description: "Download a copy of your account’s data as a JSON file.",
+  download: "Download my data",
+  started: "Your download has started.",
+  saveAgain: "Didn’t start? Save the file",
+  rateLimited: (seconds) =>
+    seconds && seconds > 0
+      ? `You exported your data a moment ago. Try again in ${englishWait(seconds)}.`
+      : "You exported your data a moment ago. Please try again in a minute.",
+  failed: "The export failed. Please try again.",
+};
+
+/* ── Props ───────────────────────────────────────────────────────────────── */
+
+/**
+ * What {@link DataExportSettingProps.onExport} resolves with: the file itself — a `Blob`
+ * (axios' `responseType: "blob"`, `await res.blob()`) — or a URL the browser fetches
+ * itself (a signed link), with the file name to save it under.
+ */
+export type DataExportFile = Blob | { url: string; filename?: string };
+
+export interface DataExportSettingProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * Fetch the export (`GET /auth/me/export`, §6.5). Resolve with the file — the card
+   * saves it under `filename` — or reject with the client's error: a 429 (the export is
+   * throttled to once a minute) says `rateLimited`, anything else (a demo account's 403)
+   * goes through `describeError`, else `failed`.
+   */
+  onExport: () => Promise<DataExportFile>;
+  /**
+   * The app's sentence under the kit's — what the export holds and what it doesn't.
+   * kastlan's: "Your account; your company's records are your company's, ask them."
+   */
+  description?: ReactNode;
+  /** The name the file is saved under. Default `account-export-YYYY-MM-DD.json` (the
+   *  local day); a `{ url, filename }` answer's own name wins. */
+  filename?: string;
+  /** The app's own words for a failure, or `undefined` for the kit's. Asked first. */
+  describeError?: (error: unknown) => ReactNode | undefined;
+  labels?: Partial<DataExportLabels>;
+}
+
+interface Saved {
+  href: string;
+  filename: string;
+  /** An object URL of ours, revoked when it is replaced or the card goes. */
+  owned: boolean;
+}
+
+/** `account-export-2026-10-07.json`, the local day — the one a person looks for. */
+function defaultFilename(now = new Date()): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `account-export-${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}.json`;
+}
+
+/** A `{ url }` answer, as opposed to a Blob or anything else. */
+function isUrlAnswer(value: unknown): value is { url: string; filename?: string } {
+  return typeof value === "object" && value !== null && typeof (value as { url?: unknown }).url === "string";
+}
+
+/** Hand `href` to the browser as a download named `filename`: a link with `download`,
+ *  clicked once and taken out again — the one way a page saves a file without a new
+ *  tab that would show the JSON instead. */
+function startDownload(href: string, filename: string) {
+  const link = document.createElement("a");
+  link.href = href;
+  link.download = filename;
+  link.rel = "noopener";
+  link.hidden = true;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+/**
+ * The account's data as a download (docs/user-admin-harmonization.md §6.5, §2.2): what it
+ * is, the app's sentence on what it holds, and one button.
+ *
+ * **The kit saves the file.** `onExport` fetches it — the request is the app's, with its
+ * auth (auth §8) — and resolves with a `Blob` or a `{ url }`; the card hands it to the
+ * browser through a link with a `download` name, so it lands as `account-export-….json`
+ * rather than opening as a page of JSON. A `Blob` becomes an object URL, revoked when
+ * the next export replaces it or the card unmounts.
+ *
+ * The click comes after an `await`, which some browsers count as no longer the
+ * person's: "Didn't start? Save the file" stays under the confirmation, a real link to
+ * the same file that the person clicks themselves.
+ *
+ * **The throttle** (once a minute, §6.5) is a 429, said as such; the app's
+ * `describeError` comes first (keksdose's demo account answers 403).
+ */
+export function DataExportSetting({
+  onExport,
+  description,
+  filename,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}: DataExportSettingProps) {
+  const labels = useKitLabels("dataExport", DEFAULT_DATA_EXPORT_LABELS, labelsProp);
+  const [busy, setBusy] = useState(false);
+  const [saved, setSaved] = useState<Saved | null>(null);
+  const [failure, setFailure] = useState<ReactNode>(null);
+  const mounted = useMounted();
+
+  // Our object URL lives as long as the "Save the file" link that points at it.
+  useEffect(() => {
+    if (!saved?.owned) return;
+    const href = saved.href;
+    return () => URL.revokeObjectURL(href);
+  }, [saved]);
+
+  const run = () => {
+    if (busy) return;
+    setBusy(true);
+    setFailure(null);
+    // The last file's link goes (and its object URL with it): it would sit beside this
+    // export's answer as if it were it.
+    setSaved(null);
+    settle(onExport).then(
+      (answer) => {
+        if (!mounted.current) return;
+        setBusy(false);
+        let next: Saved;
+        if (answer instanceof Blob) {
+          next = { href: URL.createObjectURL(answer), filename: filename ?? defaultFilename(), owned: true };
+        } else if (isUrlAnswer(answer)) {
+          next = { href: answer.url, filename: answer.filename ?? filename ?? defaultFilename(), owned: false };
+        } else {
+          // Nothing to save: an app that resolved with its response object, say.
+          setFailure(labels.failed);
+          return;
+        }
+        setSaved(next);
+        startDownload(next.href, next.filename);
+      },
+      (error: unknown) => {
+        if (!mounted.current) return;
+        setBusy(false);
+        const own = describeError?.(error);
+        setFailure(
+          hasMessage(own) ? own : isRateLimited(error) ? labels.rateLimited(retryAfterSeconds(error)) : labels.failed,
+        );
+      },
+    );
+  };
+
+  return (
+    <Card {...rest} className={cn("p-4 space-y-3", className)}>
+      <div className="space-y-1">
+        <div className={CARD_TITLE_CLASS}>{labels.title}</div>
+        <div className={CARD_DESCRIPTION_CLASS}>{labels.description}</div>
+        {hasMessage(description) && <div className={CARD_DESCRIPTION_CLASS}>{description}</div>}
+      </div>
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <Button type="button" variant="secondary" pending={busy} onClick={run}>
+          <Download aria-hidden className="size-4" />
+          {labels.download}
+        </Button>
+        {/* Always in the tree, so the confirmation that appears in it is announced; in
+            the button's row, so an empty one takes no line of its own. */}
+        <span role="status" className="text-xs text-[var(--text-secondary)]">
+          {saved && (
+            <>
+              {labels.started}{" "}
+              <TextLink href={saved.href} download={saved.filename} reloadDocument tone="secondary">
+                {labels.saveAgain}
+              </TextLink>
+            </>
+          )}
+        </span>
+      </div>
+      {hasMessage(failure) && (
+        <AlertBanner tone="danger" size="sm" role="alert">
+          {failure}
+        </AlertBanner>
+      )}
+    </Card>
+  );
+}