@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/settings-account-sections.tsx

@@ -1,559 +0,0 @@
-/**
- * Showcase · settings-account-sections — the canonical SETTINGS SECTION / ROW composition
- *
- * ── Gate 0 verdict: COMPOSITION PATTERN, not a framework component ────────────────────────────
- * A "SettingsSection" / "SettingsRow" / "DangerZone" fails the Framework-Component Test
- * (docs/COMPOSITION-VS-COMPONENT.md): C2 — it owns NO behavior (pure layout + content + colour);
- * C3 — it is fully expressible TODAY from `Card` + `CardHeader/CardTitle/CardDescription/
- * CardAction/CardContent flush/CardFooter` + `ListRow` + `Descriptions` + `Switch`/`Select` +
- * `StatusBadge` + `AlertDialog` + the existing `--card-*` / `--list-row-*` / `--descriptions-*`
- * knobs; C4 — its API would be a screen-shaped grab-bag ("identity", "billing", "danger"); C7 —
- * it would ship one design's block to every consumer. So it lives HERE (and as the MCP
- * `settings-section-rows` pattern), never in `src/components/`. Zero new components were added.
- *
- * ── The four blocks the DXS consumer kept re-inventing ───────────────────────────────────────
- *   1. Identity          — avatar + `Descriptions` metadata, one header action (`CardAction`).
- *   2. Preferences       — `CardContent flush` + `ListRow` rows whose trailing slot IS the control
- *                          (`Switch` / `Select`). Never a hand-rolled
- *                          `<div className="flex justify-between border-b">`.
- *   3. Billing handoff   — canonical `StatusBadge status=…` (NO page-local status→colour map),
- *                          money/seats/dates through `Intl`, and a footer button that hands off to
- *                          the external billing portal with an sr-only "opens in a new tab".
- *   4. Danger zone       — `Card accent="destructive"` (the semantic leading rail is already a
- *                          token, `--card-accent-rail-width`) + destructive `ListRow` actions +
- *                          `AlertDialog challenge=…` type-to-confirm friction.
- *
- * ── Acceptance evidence baked into the page ──────────────────────────────────────────────────
- * · 1440 / 1024 / 390 — every block is a Card in a `max-w-3xl` column: `Descriptions` collapses
- *   3→2→1 columns, `ListRow` wraps its trailing controls onto their own line under
- *   `--list-row-body-min-width`, and the header action row wraps. Nothing scrolls horizontally.
- * · long JA/EN/VI labels — the "表示言語 / Label language" Select swaps the WHOLE label bundle to
- *   deliberately long JA, EN and VI strings (and re-tags every `Intl` formatter: ja-JP/JPY,
- *   en-US/USD, vi-VN/VND) so the rows can be checked at their worst case, not their best. It also
- *   drives the APP locale (`useAppLocale().setLocale`), so the library's own `t()` chrome — the
- *   canonical `StatusBadge` label above all — switches with the page instead of lagging behind it.
- * · Intl only — `Intl.NumberFormat` (currency, ISO 4217 + integer seat counts),
- *   `Intl.DateTimeFormat` (member-since / next invoice), `Intl.PluralRules` (seat noun),
- *   `Intl.DisplayNames` (region of the billing account, from ISO 3166-1 alpha-2).
- * · Logical CSS only, semantic tokens only, lucide icons (no emoji), quiet factual copy.
- */
-import * as React from "react";
-import { ExternalLink, ShieldAlert, UserMinus } from "lucide-react";
-
-import { useAppLocale } from "@godxjp/ui/app";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Avatar,
-  AvatarFallback,
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  ListRow,
-  StatusBadge,
-} from "@godxjp/ui/data-display";
-import { FormField, Select, Switch } from "@godxjp/ui/data-entry";
-import { AlertDialog } from "@godxjp/ui/feedback";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-// ── Label bundles: the SAME screen at its longest JA / EN / VI wording ────────────────────────
-// Long-label stress is a first-class acceptance criterion, so the bundle intentionally
-// carries the verbose form of each label instead of the tidy demo form.
-
-type LabelBundle = {
-  /** BCP-47 tag driving every Intl formatter on the page. */
-  tag: string;
-  /** ISO 4217 code of the billing account. */
-  currency: string;
-  /** ISO 3166-1 alpha-2 region of the billing account. */
-  region: string;
-  optionLabel: string;
-  pageTitle: string;
-  pageSubtitle: string;
-  save: string;
-  labelLanguage: string;
-  identityTitle: string;
-  identityDescription: string;
-  identityEdit: string;
-  fieldName: string;
-  fieldEmail: string;
-  fieldEmployeeId: string;
-  fieldMemberSince: string;
-  displayName: string;
-  email: string;
-  preferencesTitle: string;
-  preferencesDescription: string;
-  prefDigestTitle: string;
-  prefDigestDescription: string;
-  prefMentionTitle: string;
-  prefMentionDescription: string;
-  prefDateFormatTitle: string;
-  prefDateFormatDescription: string;
-  billingTitle: string;
-  billingDescription: string;
-  billingPlanLabel: string;
-  billingPlanValue: string;
-  billingSeatsLabel: string;
-  billingAmountLabel: string;
-  billingNextInvoiceLabel: string;
-  billingRegionLabel: string;
-  billingHandoff: string;
-  billingHandoffHint: string;
-  opensInNewTab: string;
-  seat: { one: string; other: string };
-  dangerTitle: string;
-  dangerDescription: string;
-  dangerTransferTitle: string;
-  dangerTransferDescription: string;
-  dangerTransfer: string;
-  dangerDeleteTitle: string;
-  dangerDeleteDescription: string;
-  dangerDelete: string;
-  confirmTitle: string;
-  confirmDescription: string;
-  confirmLabel: string;
-  cancelLabel: string;
-};
-
-const BUNDLES: Record<"ja" | "en" | "vi", LabelBundle> = {
-  ja: {
-    tag: "ja-JP",
-    currency: "JPY",
-    region: "JP",
-    optionLabel: "日本語（長いラベル検証用）",
-    pageTitle: "ワークスペースの設定",
-    pageSubtitle:
-      "アカウント情報・通知の環境設定・請求先ポータルへの引き渡し・取り消せない操作をまとめて管理します。",
-    save: "変更内容を保存する",
-    labelLanguage: "表示言語",
-    identityTitle: "アカウント情報",
-    identityDescription: "請求書・監査ログ・共有リンクに表示される氏名とメールアドレスです。",
-    identityEdit: "アカウント情報を編集",
-    fieldName: "表示名",
-    fieldEmail: "連絡先メールアドレス",
-    fieldEmployeeId: "従業員番号",
-    fieldMemberSince: "利用開始日",
-    displayName: "藤原 慧（ふじわら さとし）",
-    email: "satoshi.fujiwara@example.co.jp",
-    preferencesTitle: "通知と表示の環境設定",
-    preferencesDescription: "変更は保存操作なしで即時反映されます。",
-    prefDigestTitle: "週次サマリーをメールで受け取る",
-    prefDigestDescription: "毎週月曜日の朝に、担当中の申請と未処理の承認をまとめて送信します。",
-    prefMentionTitle: "メンションされたときにデスクトップ通知を表示する",
-    prefMentionDescription: "ブラウザの通知許可が必要です。",
-    prefDateFormatTitle: "日付の表示形式",
-    prefDateFormatDescription: "一覧・詳細・書き出したファイルのすべてに適用されます。",
-    billingTitle: "請求とサブスクリプション",
-    billingDescription: "支払い方法と請求書は外部の請求ポータルで管理します。",
-    billingPlanLabel: "契約プラン",
-    billingPlanValue: "ビジネス（年額）",
-    billingSeatsLabel: "利用ライセンス数",
-    billingAmountLabel: "次回請求予定額",
-    billingNextInvoiceLabel: "次回請求日",
-    billingRegionLabel: "請求先の国／地域",
-    billingHandoff: "請求ポータルを開く",
-    billingHandoffHint: "支払い方法の変更・請求書のダウンロードは請求ポータルで行います。",
-    opensInNewTab: "新しいタブで開きます",
-    seat: { one: "{count} ライセンス", other: "{count} ライセンス" },
-    dangerTitle: "取り消せない操作",
-    dangerDescription: "以下の操作は元に戻せません。実行前に必ず内容を確認してください。",
-    dangerTransferTitle: "ワークスペースの所有権を他のメンバーへ移管する",
-    dangerTransferDescription: "移管後、あなたは管理者権限を失います。",
-    dangerTransfer: "所有権を移管",
-    dangerDeleteTitle: "ワークスペースと全データを完全に削除する",
-    dangerDeleteDescription: "勤怠記録・申請履歴・監査ログがすべて削除されます。",
-    dangerDelete: "ワークスペースを削除",
-    confirmTitle: "ワークスペースを完全に削除しますか？",
-    confirmDescription:
-      "この操作は取り消せません。確認のためワークスペース識別子を入力してください。",
-    confirmLabel: "完全に削除する",
-    cancelLabel: "キャンセル",
-  },
-  en: {
-    tag: "en-US",
-    currency: "USD",
-    region: "US",
-    optionLabel: "English (long-label stress case)",
-    pageTitle: "Workspace settings",
-    pageSubtitle:
-      "Manage your account identity, notification preferences, the handoff to the billing portal, and irreversible actions.",
-    save: "Save all changes",
-    labelLanguage: "Label language",
-    identityTitle: "Account identity",
-    identityDescription:
-      "The name and address shown on invoices, audit log entries and shared links.",
-    identityEdit: "Edit account identity",
-    fieldName: "Display name",
-    fieldEmail: "Contact email address",
-    fieldEmployeeId: "Employee number",
-    fieldMemberSince: "Member since",
-    displayName: "Satoshi Fujiwara (Workspace administrator)",
-    email: "satoshi.fujiwara@example.co.jp",
-    preferencesTitle: "Notification and display preferences",
-    preferencesDescription: "Changes apply immediately. There is nothing to save here.",
-    prefDigestTitle: "Email me the weekly summary of assigned and pending requests",
-    prefDigestDescription:
-      "Sent every Monday morning with everything still waiting on your approval.",
-    prefMentionTitle: "Show a desktop notification when somebody mentions me",
-    prefMentionDescription: "Requires browser notification permission.",
-    prefDateFormatTitle: "Date display format",
-    prefDateFormatDescription: "Applies to every list, detail page and exported file.",
-    billingTitle: "Billing and subscription",
-    billingDescription: "Payment methods and invoices live in the external billing portal.",
-    billingPlanLabel: "Current plan",
-    billingPlanValue: "Business (billed annually)",
-    billingSeatsLabel: "Licensed seats in use",
-    billingAmountLabel: "Amount due next cycle",
-    billingNextInvoiceLabel: "Next invoice date",
-    billingRegionLabel: "Billing country or region",
-    billingHandoff: "Open the billing portal",
-    billingHandoffHint:
-      "Change the payment method or download past invoices in the billing portal.",
-    opensInNewTab: "opens in a new tab",
-    seat: { one: "{count} seat", other: "{count} seats" },
-    dangerTitle: "Irreversible actions",
-    dangerDescription: "These actions cannot be undone. Read each one before you continue.",
-    dangerTransferTitle: "Transfer workspace ownership to another member",
-    dangerTransferDescription: "You lose administrator rights as soon as the transfer completes.",
-    dangerTransfer: "Transfer ownership",
-    dangerDeleteTitle: "Permanently delete this workspace and all of its data",
-    dangerDeleteDescription: "Attendance records, request history and audit logs are all removed.",
-    dangerDelete: "Delete workspace",
-    confirmTitle: "Permanently delete this workspace?",
-    confirmDescription:
-      "This cannot be undone. Type the workspace identifier below to confirm the deletion.",
-    confirmLabel: "Delete permanently",
-    cancelLabel: "Cancel",
-  },
-  vi: {
-    tag: "vi-VN",
-    currency: "VND",
-    region: "VN",
-    optionLabel: "Tiếng Việt (nhãn dài nhất)",
-    pageTitle: "Cài đặt không gian làm việc",
-    pageSubtitle:
-      "Quản lý thông tin tài khoản, tuỳ chọn thông báo, chuyển sang cổng thanh toán và các thao tác không thể hoàn tác.",
-    save: "Lưu toàn bộ thay đổi",
-    labelLanguage: "Ngôn ngữ nhãn",
-    identityTitle: "Thông tin tài khoản",
-    identityDescription:
-      "Tên và địa chỉ hiển thị trên hoá đơn, bản ghi kiểm toán và liên kết chia sẻ.",
-    identityEdit: "Sửa thông tin tài khoản",
-    fieldName: "Tên hiển thị",
-    fieldEmail: "Địa chỉ email liên hệ",
-    fieldEmployeeId: "Mã nhân viên",
-    fieldMemberSince: "Thành viên từ ngày",
-    displayName: "Fujiwara Satoshi (Quản trị viên không gian làm việc)",
-    email: "satoshi.fujiwara@example.co.jp",
-    preferencesTitle: "Tuỳ chọn thông báo và hiển thị",
-    preferencesDescription: "Thay đổi được áp dụng ngay, không cần bấm lưu.",
-    prefDigestTitle: "Gửi email tổng hợp hằng tuần về các yêu cầu đang chờ tôi xử lý",
-    prefDigestDescription: "Gửi vào sáng thứ Hai, gồm mọi yêu cầu còn chờ bạn phê duyệt.",
-    prefMentionTitle: "Hiện thông báo trên máy tính khi có người nhắc đến tôi",
-    prefMentionDescription: "Cần quyền thông báo của trình duyệt.",
-    prefDateFormatTitle: "Định dạng hiển thị ngày",
-    prefDateFormatDescription: "Áp dụng cho mọi danh sách, trang chi tiết và tệp xuất ra.",
-    billingTitle: "Thanh toán và gói đăng ký",
-    billingDescription: "Phương thức thanh toán và hoá đơn nằm ở cổng thanh toán bên ngoài.",
-    billingPlanLabel: "Gói hiện tại",
-    billingPlanValue: "Business (thanh toán theo năm)",
-    billingSeatsLabel: "Số giấy phép đang dùng",
-    billingAmountLabel: "Số tiền của kỳ kế tiếp",
-    billingNextInvoiceLabel: "Ngày xuất hoá đơn kế tiếp",
-    billingRegionLabel: "Quốc gia hoặc vùng thanh toán",
-    billingHandoff: "Mở cổng thanh toán",
-    billingHandoffHint: "Đổi phương thức thanh toán hoặc tải hoá đơn cũ ở cổng thanh toán.",
-    opensInNewTab: "mở trong tab mới",
-    seat: { one: "{count} giấy phép", other: "{count} giấy phép" },
-    dangerTitle: "Thao tác không thể hoàn tác",
-    dangerDescription: "Các thao tác dưới đây không thể hoàn tác. Hãy đọc kỹ trước khi tiếp tục.",
-    dangerTransferTitle: "Chuyển quyền sở hữu không gian làm việc cho thành viên khác",
-    dangerTransferDescription: "Bạn sẽ mất quyền quản trị ngay khi việc chuyển giao hoàn tất.",
-    dangerTransfer: "Chuyển quyền sở hữu",
-    dangerDeleteTitle: "Xoá vĩnh viễn không gian làm việc và toàn bộ dữ liệu",
-    dangerDeleteDescription: "Dữ liệu chấm công, lịch sử yêu cầu và bản ghi kiểm toán đều bị xoá.",
-    dangerDelete: "Xoá không gian làm việc",
-    confirmTitle: "Xoá vĩnh viễn không gian làm việc này?",
-    confirmDescription:
-      "Không thể hoàn tác. Hãy nhập mã định danh không gian làm việc để xác nhận.",
-    confirmLabel: "Xoá vĩnh viễn",
-    cancelLabel: "Huỷ",
-  },
-};
-
-const WORKSPACE_SLUG = "godx-shinjuku-hq";
-const EMPLOYEE_ID = "EMP-1042-JP";
-const MEMBER_SINCE = new Date("2023-04-01T00:00:00Z");
-const NEXT_INVOICE = new Date("2026-08-31T00:00:00Z");
-const SEATS = 128;
-/** Minor-unit amounts per ISO 4217 account currency (JPY has 0 decimals, USD 2, VND 0). */
-const AMOUNT: Record<string, number> = { JPY: 1_536_000, USD: 10_240, VND: 268_800_000 };
-
-/** CLDR plural selection — never one template for a counted noun ("1 seats" is a bug). */
-function seatCount(bundle: LabelBundle) {
-  const category = new Intl.PluralRules(bundle.tag).select(SEATS);
-  const template = category === "one" ? bundle.seat.one : bundle.seat.other;
-  return template.replace("{count}", new Intl.NumberFormat(bundle.tag).format(SEATS));
-}
-
-export default function SettingsAccountSectionsShowcase() {
-  // One language switch drives BOTH halves of the page: the app-authored bundle above AND the
-  // library's own `t()` chrome — the canonical `StatusBadge` label, dialog affordances, empty
-  // states. Swapping only the local bundle would leave an English page wearing a Vietnamese
-  // status pill, so the switch owns `setLocale` too (`AppLocale` is exactly ja | en | vi).
-  const { locale, setLocale } = useAppLocale();
-  const lang: "ja" | "en" | "vi" = locale;
-  const b = BUNDLES[lang];
-  const [digest, setDigest] = React.useState(true);
-  const [mention, setMention] = React.useState(false);
-  const [dateFormat, setDateFormat] = React.useState("iso");
-  const [confirmOpen, setConfirmOpen] = React.useState(false);
-
-  const money = new Intl.NumberFormat(b.tag, {
-    style: "currency",
-    currency: b.currency,
-  }).format(AMOUNT[b.currency] ?? 0);
-  const longDate = (d: Date) =>
-    new Intl.DateTimeFormat(b.tag, { dateStyle: "long", timeZone: "UTC" }).format(d);
-  const regionName = new Intl.DisplayNames([b.tag], { type: "region" }).of(b.region) ?? b.region;
-
-  // Date-format options are themselves localized samples, formatted with Intl — never a
-  // hand-written "YYYY-MM-DD" string table.
-  const sample = new Date("2026-07-30T00:00:00Z");
-  const dateFormatOptions = [
-    {
-      value: "iso",
-      label: new Intl.DateTimeFormat("en-CA", { dateStyle: "short", timeZone: "UTC" }).format(
-        sample,
-      ),
-    },
-    {
-      value: "long",
-      label: new Intl.DateTimeFormat(b.tag, { dateStyle: "long", timeZone: "UTC" }).format(sample),
-    },
-    {
-      value: "medium",
-      label: new Intl.DateTimeFormat(b.tag, { dateStyle: "medium", timeZone: "UTC" }).format(
-        sample,
-      ),
-    },
-  ];
-
-  return (
-    <PageContainer
-      title={b.pageTitle}
-      subtitle={b.pageSubtitle}
-      breadcrumb={[{ label: b.pageTitle }]}
-      // PageHeader action composition: the header owns the page-level actions through
-      // `extra`. It wraps at 390 instead of overflowing, so no page-local header geometry.
-      extra={
-        <Flex direction="row" align="end" gap="sm" wrap>
-          <FormField id="label-language" label={b.labelLanguage}>
-            <Select
-              id="label-language"
-              options={(["ja", "en", "vi"] as const).map((id) => ({
-                value: id,
-                label: BUNDLES[id].optionLabel,
-              }))}
-              value={lang}
-              onValueChange={(next: string) => {
-                setLocale(next as "ja" | "en" | "vi");
-              }}
-            />
-          </FormField>
-          <Button>{b.save}</Button>
-        </Flex>
-      }
-    >
-      <Flex direction="col" gap="lg" className="max-w-3xl">
-        {/* ── 1 · Identity ─────────────────────────────────────────────────────────────────
-            Metadata is a description list, so it is `Descriptions` (a real <dl>), never a
-            two-column flex of styled divs. `CardAction` parks the single header action. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{b.identityTitle}</CardTitle>
-            <CardDescription>{b.identityDescription}</CardDescription>
-            <CardAction>
-              <Button variant="outline" size="sm">
-                {b.identityEdit}
-              </Button>
-            </CardAction>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md" className="sm:flex-row sm:items-start">
-              <Avatar className="size-12 shrink-0 rounded-md">
-                <AvatarFallback className="bg-primary text-primary-foreground font-bold">
-                  SF
-                </AvatarFallback>
-              </Avatar>
-              <Descriptions columns={2} layout="vertical" className="min-w-0 flex-1">
-                <Descriptions.Item label={b.fieldName}>{b.displayName}</Descriptions.Item>
-                <Descriptions.Item label={b.fieldEmail}>{b.email}</Descriptions.Item>
-                <Descriptions.Item label={b.fieldEmployeeId} mono>
-                  {EMPLOYEE_ID}
-                </Descriptions.Item>
-                <Descriptions.Item label={b.fieldMemberSince}>
-                  {/* ISO-8601 machine value in the <time> datetime, localized text for humans. */}
-                  <time dateTime={MEMBER_SINCE.toISOString().slice(0, 10)}>
-                    {longDate(MEMBER_SINCE)}
-                  </time>
-                </Descriptions.Item>
-              </Descriptions>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── 2 · Preferences ─────────────────────────────────────────────────────────────
-            THE settings-row pattern: `CardContent flush` + `ListRow`, whose `trailing` slot IS
-            the control. `align="start"` + `overflow="wrap"` keep long JA/VI titles readable and
-            let the control drop onto its own line at 390 (--list-row-body-min-width). */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{b.preferencesTitle}</CardTitle>
-            <CardDescription>{b.preferencesDescription}</CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              align="start"
-              overflow="wrap"
-              title={<label htmlFor="pref-digest">{b.prefDigestTitle}</label>}
-              description={b.prefDigestDescription}
-              trailing={<Switch id="pref-digest" checked={digest} onCheckedChange={setDigest} />}
-            />
-            <ListRow
-              align="start"
-              overflow="wrap"
-              title={<label htmlFor="pref-mention">{b.prefMentionTitle}</label>}
-              description={b.prefMentionDescription}
-              trailing={<Switch id="pref-mention" checked={mention} onCheckedChange={setMention} />}
-            />
-            <ListRow
-              align="start"
-              overflow="wrap"
-              title={<label htmlFor="pref-date-format">{b.prefDateFormatTitle}</label>}
-              description={b.prefDateFormatDescription}
-              trailing={
-                <Select
-                  id="pref-date-format"
-                  options={dateFormatOptions}
-                  value={dateFormat}
-                  onValueChange={setDateFormat}
-                  className="w-[var(--filter-picker-width-sm)]"
-                />
-              }
-            />
-          </CardContent>
-        </Card>
-
-        {/* ── 3 · Billing handoff ─────────────────────────────────────────────────────────
-            The subscription state is a canonical `StatusBadge status="past_due"` — the tone and
-            icon come from the shared domain-status map in the library, so no page ever keeps its
-            own status→colour table (#216 acceptance). Money/seats/dates/region are all Intl. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{b.billingTitle}</CardTitle>
-            <CardDescription>{b.billingDescription}</CardDescription>
-            <CardAction>
-              <StatusBadge status="past_due" variant="outline" />
-            </CardAction>
-          </CardHeader>
-          <CardContent>
-            <Descriptions columns={2} layout="vertical">
-              <Descriptions.Item label={b.billingPlanLabel}>{b.billingPlanValue}</Descriptions.Item>
-              <Descriptions.Item label={b.billingSeatsLabel}>{seatCount(b)}</Descriptions.Item>
-              <Descriptions.Item label={b.billingAmountLabel}>{money}</Descriptions.Item>
-              <Descriptions.Item label={b.billingNextInvoiceLabel}>
-                <time dateTime={NEXT_INVOICE.toISOString().slice(0, 10)}>
-                  {longDate(NEXT_INVOICE)}
-                </time>
-              </Descriptions.Item>
-              <Descriptions.Item label={b.billingRegionLabel} span={2}>
-                {regionName}
-              </Descriptions.Item>
-            </Descriptions>
-          </CardContent>
-          <CardFooter separated>
-            <Flex direction="col" gap="md" className="sm:flex-row sm:items-center">
-              <Button variant="outline" asChild>
-                <a href="https://billing.example.com/portal" target="_blank" rel="noreferrer">
-                  <ExternalLink aria-hidden="true" />
-                  {b.billingHandoff}
-                  {/* Never signal "leaves the app" with the icon alone (WCAG 1.4.1 / 2.4.4). */}
-                  <span className="sr-only"> ({b.opensInNewTab})</span>
-                </a>
-              </Button>
-              <Text size="xs" tone="muted">
-                {b.billingHandoffHint}
-              </Text>
-            </Flex>
-          </CardFooter>
-        </Card>
-
-        {/* ── 4 · Danger zone ─────────────────────────────────────────────────────────────
-            `Card accent="destructive"` paints the semantic leading rail from `--destructive`
-            through the existing `--card-accent-rail-width` token — a danger zone needs NO new
-            component and NO new token. Colour never carries the meaning alone: the heading says
-            "irreversible", the rows say what is lost, and delete is gated behind a type-to-confirm
-            AlertDialog (`challenge`). */}
-        <Card accent="destructive">
-          <CardHeader>
-            <CardTitle level={2} className="text-destructive">
-              {b.dangerTitle}
-            </CardTitle>
-            <CardDescription>{b.dangerDescription}</CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              align="start"
-              overflow="wrap"
-              leading={<UserMinus className="text-muted-foreground size-4" aria-hidden="true" />}
-              title={b.dangerTransferTitle}
-              description={b.dangerTransferDescription}
-              trailing={
-                <Button variant="outline" size="sm">
-                  {b.dangerTransfer}
-                </Button>
-              }
-            />
-            <ListRow
-              align="start"
-              overflow="wrap"
-              leading={<ShieldAlert className="text-destructive size-4" aria-hidden="true" />}
-              title={b.dangerDeleteTitle}
-              description={b.dangerDeleteDescription}
-              trailing={
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={() => {
-                    setConfirmOpen(true);
-                  }}
-                >
-                  {b.dangerDelete}
-                </Button>
-              }
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-
-      <AlertDialog
-        open={confirmOpen}
-        onOpenChange={setConfirmOpen}
-        title={b.confirmTitle}
-        description={b.confirmDescription}
-        challenge={WORKSPACE_SLUG}
-        variant="destructive"
-        confirmLabel={b.confirmLabel}
-        cancelLabel={b.cancelLabel}
-        onConfirm={() => {
-          setConfirmOpen(false);
-        }}
-      />
-    </PageContainer>
-  );
-}