{
  "aliases": [
    "settings-section",
    "settings-row",
    "danger-zone",
    "billing-handoff",
    "preferences-rows",
    "account-identity"
  ],
  "code": "// Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a \"SettingsSection\"/\"SettingsRow\"/\"DangerZone\"\n// FAILS the Framework-Component Test, so compose it. Reference screen: get_exemplar(\"settings\")\n// (docs/showcase/settings-account-sections.tsx). Composition rules: DESIGN.md → Admin Screen Anatomy.\nimport { ExternalLink } from \"lucide-react\";\nimport { Button, Heading } from \"@godxjp/ui/general\";\nimport { Card, CardContent, Descriptions, ListRow, StatusBadge } from \"@godxjp/ui/data-display\";\nimport { Switch } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog } from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// Sections are a heading + spacing: the SECTION step (gap=\"xl\") is larger than the ITEM step\n// (gap=\"sm\"), which is what carries the hierarchy — not a box around every block.\n<Flex direction=\"col\" gap=\"xl\">\n\n  {/* 1) IDENTITY — a section, not a Card. Metadata is Descriptions (a real <dl>). */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Flex justify=\"between\" align=\"center\">\n      <Heading level={2}>アカウント情報</Heading>\n      <Button variant=\"outline\" size=\"sm\">編集</Button>\n    </Flex>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"表示名\">藤原 慧</Descriptions.Item>\n      <Descriptions.Item label=\"メールアドレス\">satoshi@example.co.jp</Descriptions.Item>\n      <Descriptions.Item label=\"従業員番号\" mono>EMP-1042-JP</Descriptions.Item>\n      <Descriptions.Item label=\"利用開始日\">\n        <time dateTime=\"2023-04-01\">\n          {new Intl.DateTimeFormat(locale, { dateStyle: \"long\", timeZone: \"UTC\" }).format(since)}\n        </time>\n      </Descriptions.Item>\n    </Descriptions>\n  </Flex>\n\n  {/* 2) PREFERENCE ROWS — a list of setting rows IS a real boundary, so it gets one Card:\n       CardContent flush + ListRow, whose trailing slot is the control. The visible title is the\n       control's <label htmlFor>. NEVER a flex div with border-b rows. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Heading level={2}>通知の環境設定</Heading>\n    <Card>\n      <CardContent flush>\n        <ListRow\n          align=\"start\"\n          overflow=\"wrap\"\n          title={<label htmlFor=\"pref-digest\">週次サマリーをメールで受け取る</label>}\n          description=\"毎週月曜日の朝に未処理の承認をまとめて送信します。\"\n          trailing={<Switch id=\"pref-digest\" checked={digest} onCheckedChange={setDigest} />}\n        />\n      </CardContent>\n    </Card>\n  </Flex>\n\n  {/* 3) BILLING HANDOFF — a section. The state is a canonical StatusBadge (never a page-local\n       status→colour map); money through Intl. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Flex justify=\"between\" align=\"center\">\n      <Heading level={2}>請求とサブスクリプション</Heading>\n      <StatusBadge status=\"past_due\" variant=\"outline\" />\n    </Flex>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"契約プラン\">ビジネス（年額）</Descriptions.Item>\n      <Descriptions.Item label=\"次回請求予定額\">\n        {new Intl.NumberFormat(locale, { style: \"currency\", currency: \"JPY\" }).format(1536000)}\n      </Descriptions.Item>\n    </Descriptions>\n    <div>\n      <Button variant=\"outline\" asChild>\n        <a href={portalUrl} target=\"_blank\" rel=\"noreferrer\">\n          <ExternalLink aria-hidden=\"true\" />\n          請求ポータルを開く\n          <span className=\"sr-only\">（新しいタブで開きます）</span>\n        </a>\n      </Button>\n    </div>\n  </Flex>\n\n  {/* 4) DANGER ZONE — a real boundary: Card accent=\"destructive\" (the rail comes from\n       --destructive). The heading and each row say what is lost; no decorative icon. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Heading level={2}>取り消せない操作</Heading>\n    <Card accent=\"destructive\">\n      <CardContent flush>\n        <ListRow\n          align=\"start\"\n          overflow=\"wrap\"\n          title=\"ワークスペースと全データを完全に削除する\"\n          description=\"勤怠記録・申請履歴・監査ログがすべて削除されます。\"\n          trailing={<Button variant=\"destructive\" size=\"sm\" onClick={() => setConfirmOpen(true)}>削除</Button>}\n        />\n      </CardContent>\n    </Card>\n  </Flex>\n</Flex>\n\n<AlertDialog\n  open={confirmOpen}\n  onOpenChange={setConfirmOpen}\n  title=\"ワークスペースを完全に削除しますか？\"\n  description=\"この操作は取り消せません。確認のため識別子を入力してください。\"\n  challenge={workspaceSlug}\n  variant=\"destructive\"\n  onConfirm={destroy}\n/>\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Section step > item step (gap=\"xl\" between sections, gap=\"sm\" inside one).\n// ✅ A Card only where there is a real boundary: a list of setting rows, the danger zone.\n// ✅ Every setting row is a ListRow; its control lives in `trailing`, titled by <label htmlFor>.\n// ⛔ Do NOT add SettingsSection / SettingsRow / DangerZone to src/components — they fail Gate 0.\n// ⛔ Do NOT give every block Card + CardHeader + CardTitle + CardDescription (ui-audit card-per-section).\n// ⛔ Do NOT hand-roll padding (p-4), a status colour map, or a <dl> replacement.",
  "name": "settings-section-rows",
  "tagline": "The four canonical settings blocks — identity · preference rows · billing handoff · danger zone. Identity and billing are SECTIONS (Heading + Descriptions, no surface); preference rows and the danger zone are Cards because they are real boundaries. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
  "tags": [
    "settings",
    "account",
    "billing",
    "danger",
    "preferences",
    "listrow",
    "card",
    "admin"
  ]
}