@godxjp/ui 31.31.8 → 32.0.0

package/agent/index.json

@@ -1,21 +1,21 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 185,
-    "patterns": 21,
-    "rules": 50,
-    "tokens": 2188,
+    "components": 161,
+    "patterns": 22,
+    "rules": 43,
+    "tokens": 2183,
     "vocabulary": 14
   },
   "files": [
     {
       "file": "components-index.json",
-      "note": "51 KB — name + group + tagline for all 185. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "47 KB — name + group + tagline for all 161. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
       "file": "components/<Name>.json",
-      "note": "One file per component (1 KB–36 KB, median 6 KB), each carrying its importPath. This is the selective route: read the index, then fetch only what you need instead of the 1.3 MB blob.",
+      "note": "One file per component (1 KB–36 KB, median 6 KB), each carrying its importPath. This is the selective route: read the index, then fetch only what you need instead of the 1.2 MB blob.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/<Name>.json"
     },
     {
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.31.8/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.0.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1865,
-      "foundation": 211,
+      "component": 1861,
+      "foundation": 210,
       "semantic": 112
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.31.8"
+  "version": "32.0.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 185 components, 2188 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.31.8.
+> A Japanese-enterprise React design system: 161 components, 2183 design tokens,
+> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.0.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.31.8`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@32.0.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -14,19 +14,19 @@ that can only fetch URLs.
 
 ## Catalog
 
-- [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 21 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 51 KB — all 185 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 22 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 47 KB — all 161 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
-- [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.3 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1865 `component` knobs.
+- [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 210 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1861 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
-- [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
+- [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 43 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
 
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.31.8/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v32.0.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/patterns/account-recovery-settings.json

@@ -5,7 +5,7 @@
     "security-settings",
     "recovery-settings"
   ],
-  "code": "// Research basis: Google Account recovery (email/phone + backup codes), Microsoft Security info,\n// GitHub recovery codes. Signed-IN recovery SETTINGS (manage your methods) is a DIFFERENT surface\n// from the signed-OUT forgot-password JOURNEY — do not mix them on one page.\nimport { Card, CardContent, CardHeader, CardTitle, ListRow, Badge } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { Mail, Smartphone, KeyRound } from \"lucide-react\";\n\ntype MethodStatus = \"verified\" | \"unverified\" | \"unavailable\";\n\nconst STATUS: Record<MethodStatus, { tone: \"success\" | \"warning\" | \"neutral\"; label: string }> = {\n  verified: { tone: \"success\", label: \"確認済み\" },\n  unverified: { tone: \"warning\", label: \"未確認\" },\n  unavailable: { tone: \"neutral\", label: \"未設定\" },\n};\n\nfunction MethodRow({ icon: Icon, name, value, status, action }: {\n  icon: React.ComponentType<{ className?: string }>; name: string; value?: string;\n  status: MethodStatus; action: React.ReactNode;\n}) {\n  const s = STATUS[status];\n  return (\n    <ListRow\n      leading={<Icon className=\"text-muted-foreground size-5\" />}\n      title={<span className=\"font-medium\">{name}</span>}\n      description={value ?? \"未設定\"}\n      trailing={<Flex gap=\"sm\" align=\"center\"><Badge tone={s.tone} icon={null}>{s.label}</Badge>{action}</Flex>}\n    />\n  );\n}\n\n// Compact status/action rows — one row per method, capability-aware. Do NOT stack full-width\n// Info Alerts for ordinary status, and do NOT show unavailable features as permanent page content\n// beyond a single row that offers to set them up.\nexport function AccountRecoverySettings({ email, phone, backupCodesSupported, backupCodesRemaining, onChangeEmail, onChangePhone, onRegenerateCodes, onChangePassword }: {\n  email?: string; phone?: string; backupCodesSupported: boolean; backupCodesRemaining: number;\n  onChangeEmail: () => void; onChangePhone: () => void; onRegenerateCodes: () => void; onChangePassword: () => void;\n}) {\n  return (\n    <Flex direction=\"col\" gap=\"lg\">\n      <Card>\n        <CardHeader><CardTitle>アカウント復旧</CardTitle></CardHeader>\n        <CardContent flush>\n          <MethodRow icon={Mail} name=\"復旧用メール\" value={email} status={email ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangeEmail}>{email ? \"変更\" : \"追加\"}</Button>} />\n          <MethodRow icon={Smartphone} name=\"復旧用電話番号\" value={phone} status={phone ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangePhone}>{phone ? \"変更\" : \"追加\"}</Button>} />\n          {/* Capability-aware: only render backup codes when the account type supports them. */}\n          {backupCodesSupported && (\n            <MethodRow icon={KeyRound} name=\"バックアップコード\"\n              value={`残り ${backupCodesRemaining} 個`} status={backupCodesRemaining > 0 ? \"verified\" : \"unverified\"}\n              action={<Button variant=\"outline\" size=\"sm\" onClick={onRegenerateCodes}>再生成</Button>} />\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Password change is its OWN destination (risk-appropriate confirmation lives there). */}\n      <Card>\n        <CardHeader><CardTitle>パスワード</CardTitle></CardHeader>\n        <CardContent>\n          <Flex justify=\"between\" align=\"center\">\n            <span className=\"text-muted-foreground text-sm\">最終更新: 90日前</span>\n            <Button variant=\"outline\" onClick={onChangePassword}>パスワードを変更</Button>\n          </Flex>\n        </CardContent>\n      </Card>\n    </Flex>\n  );\n}\n// The signed-OUT recovery journey (forgot password → email link → reset) is a separate flow on the\n// auth screens (AuthShell), NOT part of these signed-in settings. Do not surface it here.",
+  "code": "// Research basis: Google Account recovery (email/phone + backup codes), Microsoft Security info,\n// GitHub recovery codes. Signed-IN recovery SETTINGS (manage your methods) is a DIFFERENT surface\n// from the signed-OUT forgot-password JOURNEY — do not mix them on one page.\nimport { Card, CardContent, CardHeader, CardTitle, ListRow, Badge } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { Mail, Smartphone, KeyRound } from \"lucide-react\";\n\ntype MethodStatus = \"verified\" | \"unverified\" | \"unavailable\";\n\nconst STATUS: Record<MethodStatus, { tone: \"success\" | \"warning\" | \"neutral\"; label: string }> = {\n  verified: { tone: \"success\", label: \"確認済み\" },\n  unverified: { tone: \"warning\", label: \"未確認\" },\n  unavailable: { tone: \"neutral\", label: \"未設定\" },\n};\n\nfunction MethodRow({ icon: Icon, name, value, status, action }: {\n  icon: React.ComponentType<{ className?: string }>; name: string; value?: string;\n  status: MethodStatus; action: React.ReactNode;\n}) {\n  const s = STATUS[status];\n  return (\n    <ListRow\n      leading={<Icon className=\"text-muted-foreground size-5\" />}\n      title={<span className=\"font-medium\">{name}</span>}\n      description={value ?? \"未設定\"}\n      trailing={<Flex gap=\"sm\" align=\"center\"><Badge tone={s.tone} icon={null}>{s.label}</Badge>{action}</Flex>}\n    />\n  );\n}\n\n// Compact status/action rows — one row per method, capability-aware. Do NOT stack full-width\n// Info Alerts for ordinary status, and do NOT show unavailable features as permanent page content\n// beyond a single row that offers to set them up.\nexport function AccountRecoverySettings({ email, phone, backupCodesSupported, backupCodesRemaining, onChangeEmail, onChangePhone, onRegenerateCodes, onChangePassword }: {\n  email?: string; phone?: string; backupCodesSupported: boolean; backupCodesRemaining: number;\n  onChangeEmail: () => void; onChangePhone: () => void; onRegenerateCodes: () => void; onChangePassword: () => void;\n}) {\n  return (\n    <Flex direction=\"col\" gap=\"lg\">\n      <Card>\n        <CardHeader><CardTitle>アカウント復旧</CardTitle></CardHeader>\n        <CardContent flush>\n          <MethodRow icon={Mail} name=\"復旧用メール\" value={email} status={email ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangeEmail}>{email ? \"変更\" : \"追加\"}</Button>} />\n          <MethodRow icon={Smartphone} name=\"復旧用電話番号\" value={phone} status={phone ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangePhone}>{phone ? \"変更\" : \"追加\"}</Button>} />\n          {/* Capability-aware: only render backup codes when the account type supports them. */}\n          {backupCodesSupported && (\n            <MethodRow icon={KeyRound} name=\"バックアップコード\"\n              value={`残り ${backupCodesRemaining} 個`} status={backupCodesRemaining > 0 ? \"verified\" : \"unverified\"}\n              action={<Button variant=\"outline\" size=\"sm\" onClick={onRegenerateCodes}>再生成</Button>} />\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Password change is its OWN destination (risk-appropriate confirmation lives there). */}\n      <Card>\n        <CardHeader><CardTitle>パスワード</CardTitle></CardHeader>\n        <CardContent>\n          <Flex justify=\"between\" align=\"center\">\n            <span className=\"text-muted-foreground text-sm\">最終更新: 90日前</span>\n            <Button variant=\"outline\" onClick={onChangePassword}>パスワードを変更</Button>\n          </Flex>\n        </CardContent>\n      </Card>\n    </Flex>\n  );\n}\n// The signed-OUT recovery journey (forgot password → email link → reset) is a separate flow on the\n// auth screens (CenteredShell variant=\"auth\"), NOT part of these signed-in settings. Do not surface it here.",
   "name": "account-recovery-settings",
   "tagline": "Signed-in recovery: compact method status/action rows (email · phone · backup codes) + a separate password-change destination — capability-aware, risk-appropriate, NO stacked Info Alerts.",
   "tags": [

package/agent/patterns/auth-recovery-panels.json

@@ -10,9 +10,9 @@
     "passkey-failure",
     "scr-008"
   ],
-  "code": "// ⚠️ There is NO <PasswordRecoveryPanel state=…/> and NO <MfaChallengePanel state=…/> in\n// @godxjp/ui. What the package owns is the MEASURE:\n//    <AuthShell variant=\"canonical\" preset=\"account-recovery\">   ← 432px panel, 15px gutter at 390\n// Docs page: docs/layout/auth-recovery/\n//\n// PRESENTATION ONLY. No route, no reset semantics, no OTP verification, no recovery-code\n// consumption, no passkey authentication, no permissions. The consumer owns all logic and copy.\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@godxjp/ui/data-display\";\nimport { FormField, Input, InputOTP, InputOTPGroup, InputOTPSlot, PasswordInput, PasswordStrength } from \"@godxjp/ui/data-entry\";\nimport { Alert, AlertDescription, AlertTitle } from \"@godxjp/ui/feedback\";\nimport { Button, Reveal } from \"@godxjp/ui/general\";\nimport { AuthFooter, AuthShell, AuthStack, Flex } from \"@godxjp/ui/layout\";\n\n// ── THE CANONICAL PANEL ANATOMY — identical for ALL SEVEN states ───────────────────────\n//   Card > CardHeader(CardTitle + CardDescription)   ← title/description INSIDE the surface\n//        > CardContent > AuthStack\n//            [notice]   Alert tone=\"success|destructive\"   (only when the state has one)\n//            [fields]   FormField(s): email · password pair · ONE 6-slot InputOTP · one Input\n//            [primary]  Button fullWidth                    (spans the panel; exactly one)\n//            [fallback] Flex justify=\"between\" gap=\"sm\" wrap (two ghost actions share ONE row)\n//\n// DON'T put <AuthIdentity> above the panel here — it always renders the hosted mark, and the\n// SCR-008 hierarchy puts the heading INSIDE the bordered surface.\n// DON'T reuse <TwoFactorSetup> — that is the ENROLLMENT Dialog (QR / manual key / recovery\n// output). A sign-in challenge has no secret to reveal and no dialog to dismiss: it IS the page.\n\n// ── SIGN-IN MFA CHALLENGE (otp) ────────────────────────────────────────────────────────\n// Focus order IS DOM order: code field → verify → fallback A → fallback B. No tabindex.\n// The 6-slot row is ONE field: InputOTP owns paste/arrows/backspace/caret and is a single tab\n// stop. Six <Input>s would put six stops in the ring and break paste of a 6-digit code.\nexport function MfaChallengePage({ code, onCodeChange, error, pending, onVerify }) {\n  return (\n    <AuthShell\n      variant=\"canonical\"\n      preset=\"account-recovery\"\n      brand={brand}\n      footer={<AuthFooter product=\"GoDX ID\" terms={termsLink} privacy={privacyLink} locale={localePicker} />}\n    >\n      <Reveal>\n        <Card>\n          <CardHeader>\n            <CardTitle level={1}>{t(\"mfa.title\")}</CardTitle>\n            <CardDescription>{t(\"mfa.description\")}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <AuthStack>\n              <FormField id=\"mfa-code\" label={t(\"mfa.codeLabel\")} error={error} required>\n                <InputOTP maxLength={6} pattern=\"^[0-9]+$\" value={code} onChange={onCodeChange}>\n                  <InputOTPGroup>\n                    {/* six <InputOTPSlot index={0..5} /> */}\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormField>\n              <Button fullWidth loading={pending} loadingText={t(\"common.verifying\")} onClick={onVerify}>\n                {t(\"mfa.verify\")}\n              </Button>\n              <Flex justify=\"between\" gap=\"sm\" wrap>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.useRecoveryCode\")}</Button>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.retryPasskey\")}</Button>\n              </Flex>\n            </AuthStack>\n          </CardContent>\n        </Card>\n      </Reveal>\n    </AuthShell>\n  );\n}\n\n// ── THE OTHER SIX STATES — same anatomy, only the notice/fields/copy change ─────────────\n// The STATE IS NOT A PROP: the server answers, and the route renders the matching body in the\n// SAME 432px panel. Nothing is reconstructed, because nothing was torn down.\n//\n//   password recovery · request        —  fields: email (autoComplete=\"username\")\n//   password recovery · sent           —  <Alert tone=\"success\"> + <Button fullWidth disabled> (cooldown)\n//   password recovery · new-password   —  two <PasswordInput autoComplete=\"new-password\"> + <PasswordStrength>\n//   password recovery · expired        —  <Alert tone=\"destructive\">, primary = request a new link\n//   MFA · recovery-code                —  ONE <Input autoComplete=\"one-time-code\">\n//   MFA · passkey-failure              —  <Alert tone=\"destructive\">, primary = retry passkey\n//\n// The masked address in `sent` (\"h*****@example.co.jp\") is produced by the SERVER — the panel\n// never reconstructs an identifier, it renders the string it is given.\n\n// ── STATES ─────────────────────────────────────────────────────────────────────────────\n//  error    FormField error ⇒ aria-invalid + aria-errormessage + role=\"alert\". Never colour-only.\n//  loading  Button loading + loadingText ⇒ aria-busy, the box does not resize, fallbacks disabled.\n//  disabled a resend cooldown is <Button disabled> — keep it VISIBLE so the affordance is known.\n\n// ── RESPONSIVE CONTRACT (1440 / 1024 / 390) ────────────────────────────────────────────\n//  1440 · 1024   panel 432px, centred, 16px page gutter; OTP one row (6 × 36px = 216px)\n//  390           panel 360px at x=15 (15px inline gutter, --auth-shell-recovery-main-padding-mobile),\n//                310px content column, OTP still ONE row, primary still full-width, the fallback\n//                row wraps to a stack only when the localized labels exceed the column.\n//  ⚠️ The 390 canonical reference is a desktop 2×2 COMPOSITE that overflows\n//  and crops horizontally. It is NOT a valid mobile source and was not traced; the row above is a\n//  DECIDED contract, documented in docs/layout/auth-recovery/ and pinned by tests.\n\n// ANTI-PATTERNS: a page-local --auth-shell-card-max-width override or a .recovery-panel{width:432px}\n// class · AuthIdentity above the panel · TwoFactorSetup as a challenge · six Inputs for the OTP row ·\n// re-scoping --control-height to widen the slots (use --otp-slot-size) · two primary actions.",
+  "code": "// ⚠️ There is NO <PasswordRecoveryPanel state=…/> and NO <MfaChallengePanel state=…/> in\n// @godxjp/ui. What the package owns is the MEASURE:\n//    <CenteredShell variant=\"auth-canonical\" preset=\"account-recovery\">   ← 432px panel, 15px gutter at 390\n// Docs page: docs/layout/auth-recovery/\n//\n// PRESENTATION ONLY. No route, no reset semantics, no OTP verification, no recovery-code\n// consumption, no passkey authentication, no permissions. The consumer owns all logic and copy.\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@godxjp/ui/data-display\";\nimport { FormField, Input, InputOTP, InputOTPGroup, InputOTPSlot, PasswordInput, PasswordStrength } from \"@godxjp/ui/data-entry\";\nimport { Alert, AlertDescription, AlertTitle } from \"@godxjp/ui/feedback\";\nimport { Button, Reveal } from \"@godxjp/ui/general\";\nimport { AuthFooter, CenteredShell, AuthStack, Flex } from \"@godxjp/ui/layout\";\n\n// ── THE CANONICAL PANEL ANATOMY — identical for ALL SEVEN states ───────────────────────\n//   Card > CardHeader(CardTitle + CardDescription)   ← title/description INSIDE the surface\n//        > CardContent > AuthStack\n//            [notice]   Alert tone=\"success|destructive\"   (only when the state has one)\n//            [fields]   FormField(s): email · password pair · ONE 6-slot InputOTP · one Input\n//            [primary]  Button fullWidth                    (spans the panel; exactly one)\n//            [fallback] Flex justify=\"between\" gap=\"sm\" wrap (two ghost actions share ONE row)\n//\n// DON'T put <AuthIdentity> above the panel here — it always renders the hosted mark, and the\n// SCR-008 hierarchy puts the heading INSIDE the bordered surface.\n// DON'T reuse <TwoFactorSetup> — that is the ENROLLMENT Dialog (QR / manual key / recovery\n// output). A sign-in challenge has no secret to reveal and no dialog to dismiss: it IS the page.\n\n// ── SIGN-IN MFA CHALLENGE (otp) ────────────────────────────────────────────────────────\n// Focus order IS DOM order: code field → verify → fallback A → fallback B. No tabindex.\n// The 6-slot row is ONE field: InputOTP owns paste/arrows/backspace/caret and is a single tab\n// stop. Six <Input>s would put six stops in the ring and break paste of a 6-digit code.\nexport function MfaChallengePage({ code, onCodeChange, error, pending, onVerify }) {\n  return (\n    <CenteredShell variant=\"auth-canonical\"\n      preset=\"account-recovery\"\n      brand={brand}\n      footer={<AuthFooter product=\"GoDX ID\" terms={termsLink} privacy={privacyLink} locale={localePicker} />}\n    >\n      <Reveal>\n        <Card>\n          <CardHeader>\n            <CardTitle level={1}>{t(\"mfa.title\")}</CardTitle>\n            <CardDescription>{t(\"mfa.description\")}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <AuthStack>\n              <FormField id=\"mfa-code\" label={t(\"mfa.codeLabel\")} error={error} required>\n                <InputOTP maxLength={6} pattern=\"^[0-9]+$\" value={code} onChange={onCodeChange}>\n                  <InputOTPGroup>\n                    {/* six <InputOTPSlot index={0..5} /> */}\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormField>\n              <Button fullWidth loading={pending} loadingText={t(\"common.verifying\")} onClick={onVerify}>\n                {t(\"mfa.verify\")}\n              </Button>\n              <Flex justify=\"between\" gap=\"sm\" wrap>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.useRecoveryCode\")}</Button>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.retryPasskey\")}</Button>\n              </Flex>\n            </AuthStack>\n          </CardContent>\n        </Card>\n      </Reveal>\n    </CenteredShell>\n  );\n}\n\n// ── THE OTHER SIX STATES — same anatomy, only the notice/fields/copy change ─────────────\n// The STATE IS NOT A PROP: the server answers, and the route renders the matching body in the\n// SAME 432px panel. Nothing is reconstructed, because nothing was torn down.\n//\n//   password recovery · request        —  fields: email (autoComplete=\"username\")\n//   password recovery · sent           —  <Alert tone=\"success\"> + <Button fullWidth disabled> (cooldown)\n//   password recovery · new-password   —  two <PasswordInput autoComplete=\"new-password\"> + <PasswordStrength>\n//   password recovery · expired        —  <Alert tone=\"destructive\">, primary = request a new link\n//   MFA · recovery-code                —  ONE <Input autoComplete=\"one-time-code\">\n//   MFA · passkey-failure              —  <Alert tone=\"destructive\">, primary = retry passkey\n//\n// The masked address in `sent` (\"h*****@example.co.jp\") is produced by the SERVER — the panel\n// never reconstructs an identifier, it renders the string it is given.\n\n// ── STATES ─────────────────────────────────────────────────────────────────────────────\n//  error    FormField error ⇒ aria-invalid + aria-errormessage + role=\"alert\". Never colour-only.\n//  loading  Button loading + loadingText ⇒ aria-busy, the box does not resize, fallbacks disabled.\n//  disabled a resend cooldown is <Button disabled> — keep it VISIBLE so the affordance is known.\n\n// ── RESPONSIVE CONTRACT (1440 / 1024 / 390) ────────────────────────────────────────────\n//  1440 · 1024   panel 432px, centred, 16px page gutter; OTP one row (6 × 36px = 216px)\n//  390           panel 360px at x=15 (15px inline gutter, --auth-shell-recovery-main-padding-mobile),\n//                310px content column, OTP still ONE row, primary still full-width, the fallback\n//                row wraps to a stack only when the localized labels exceed the column.\n//  ⚠️ The 390 canonical reference is a desktop 2×2 COMPOSITE that overflows\n//  and crops horizontally. It is NOT a valid mobile source and was not traced; the row above is a\n//  DECIDED contract, documented in docs/layout/auth-recovery/ and pinned by tests.\n\n// ANTI-PATTERNS: a page-local --auth-shell-card-max-width override or a .recovery-panel{width:432px}\n// class · AuthIdentity above the panel · TwoFactorSetup as a challenge · six Inputs for the OTP row ·\n// re-scoping --control-height to widen the slots (use --otp-slot-size) · two primary actions.",
   "name": "auth-recovery-panels",
-  "tagline": "Signed-OUT password recovery + sign-in MFA challenge panels (SCR-008). There is NO PasswordRecoveryPanel and NO MfaChallengePanel — compose Card + AuthStack + FormField/InputOTP + Button inside AuthShell preset=\"account-recovery\" (the 432px token-owned measure).",
+  "tagline": "Signed-OUT password recovery + sign-in MFA challenge panels (SCR-008). There is NO PasswordRecoveryPanel and NO MfaChallengePanel — compose Card + AuthStack + FormField/InputOTP + Button inside CenteredShell variant=\"auth-canonical\" preset=\"account-recovery\" (the 432px token-owned measure).",
   "tags": [
     "auth",
     "authshell",

package/agent/patterns/error-pages.json

@@ -8,7 +8,7 @@
     "503",
     "exception-page"
   ],
-  "code": "// @godxjp/ui SHIPS <ErrorSurface>. Do NOT hand-compose an error page from\n// AuthShell + a generic Card + a local \".canonical-auth-card\" — that workaround IS the regression.\n//\n//    403 / 404  → mode=\"application\": the surface is the BODY of the AppShell you ALREADY render\n//                 (sidebar + topbar + breadcrumb are PRESERVED, never reconstructed)\n//    500 / 503  → mode=\"system\":      the surface OWNS the page (CenteredShell align=\"center\",\n//                 package-owned geometry at 1440 / 1024 / 390 — no min-h-dvh, no media query)\n// Docs page: docs/layout/error-surface/\n\nimport { Button, Logo, Text } from \"@godxjp/ui/general\";\nimport { AppShell, ErrorSurface, PageContainer, Sidebar } from \"@godxjp/ui/layout\";\n\n// ── WHAT THE COMPONENT OWNS ───────────────────────────────────────────────────────────\n//  • status → icon + tone (ShieldAlert/warning · SearchX/muted · ServerCrash/destructive ·\n//    Wrench/warning). You pass the NUMBER; you never write the lookup.\n//  • EXACTLY ONE recovery action — a single slot; a 2nd element is dropped with a dev error.\n//  • semantic metadata slots as real <dt>/<dd> pairs, with LIBRARY-owned localized labels:\n//    requestId · permission · organization · maintenance{start,end,timeZone,progress}\n//  • heading order (h2 in application mode under the PageContainer h1, h1 in system mode)\n//  • the status code announced as \"HTTP status 403\", not the cardinal number \"403\"\n// PRODUCT COPY stays yours: title / description / action come from the APP's own t().\n\n// ── 403 / 404 — APPLICATION mode: PRESERVE the authenticated shell ─────────────────────\nexport function ForbiddenPage() {\n  return (\n    <AppShell sidebar={<Sidebar activeId=\"reports\" sections={sections} />}>\n      <PageContainer title={t(\"reports.title\")} breadcrumb={[{ label: t(\"nav.home\"), to: \"/\" }, { label: t(\"reports.title\") }]}>\n        <ErrorSurface\n          mode=\"application\"\n          status={403}\n          title={t(\"errors.403.title\")}\n          description={t(\"errors.403.description\")}\n          permission=\"reports.view\"        {/* WHY: the missing role … */}\n          organization=\"Acme KK\"           {/* … vs the wrong workspace */}\n          action={<Button onClick={goHome}>{t(\"errors.backHome\")}</Button>}\n        />\n      </PageContainer>\n    </AppShell>\n  );\n}\n\n// ── 500 / 503 — SYSTEM mode: package-owned viewport-centred geometry ───────────────────\n// The component renders CenteredShell align=\"center\" itself → the column centres in the 100dvh\n// shell at 1440 / 1024 / 390. NO className, NO min-h-dvh, NO media query. Tall copy still scrolls\n// from the top (auto offsets collapse), so a long JA/VI message is never clipped.\nexport function MaintenancePage() {\n  return (\n    <ErrorSurface\n      mode=\"system\"\n      status={503}\n      brand={<Logo glyph=\"G\" />}\n      title={t(\"errors.503.title\")}\n      description={t(\"errors.503.description\")}\n      maintenance={{\n        start: \"2026-08-02T18:00:00Z\",  // ISO-8601 instants + an IANA zone → Intl.formatRange\n        end: \"2026-08-02T20:00:00Z\",\n        timeZone: \"Asia/Tokyo\",\n        progress: 40,                   // 0-100, SERVER-SENT (a client clock breaks hydration)\n      }}\n      footer={<Text size=\"xs\" tone=\"muted\">2026 GodX</Text>}\n      action={<Button onClick={reload}>{t(\"errors.reload\")}</Button>}\n    />\n  );\n}\n\n// ── INERTIA / SSR — one Error page component, one expression ───────────────────────────\n// Laravel: Handler::render() → Inertia::render('Error', ['status' => $response->getStatusCode()])\n//\n//   export default function Error({ status, requestId }) {\n//     const isSystem = status >= 500\n//     return (\n//       <ErrorSurface\n//         mode={isSystem ? \"system\" : \"application\"}\n//         status={status}\n//         requestId={requestId}\n//         title={t(`errors.${status}.title`)}\n//         description={t(`errors.${status}.description`)}\n//         action={<Button asChild><Link href=\"/\">{t(\"errors.backHome\")}</Link></Button>}\n//       />\n//     )\n//   }\n//   // persistent layout ⇒ 403/404 keep the authenticated shell; 500/503 own the page\n//   Error.layout = (page) => (page.props.status < 500 ? <CrmLayout>{page}</CrmLayout> : page)\n//\n// SSR rules:\n//  • ErrorSurface has NO client state / effects / portals → it renders fully server-side. An\n//    exception page must be readable without hydration.\n//  • Pass the maintenance window as a SERVER-SENT ISO-8601 string + an explicit IANA timeZone.\n//    An argless new Date() or the server's local zone ⇒ hydration mismatch.\n//  • A 500 page must NOT import the app's query client / data providers — the failure may be\n//    inside them. ErrorSurface needs only the AppProvider that supplies the locale.\n//\n// THEMING: retune with tokens, never a className —\n//   --error-surface-max-width | -gap | -padding-block(-compact) | -meta-gap | -meta-row-gap |\n//   --error-surface-meta-border (default 'none', rule #44) | --error-surface-progress-max-width\n//\n// ANTI-PATTERNS: AuthShell + a generic Card (the workaround; AuthShell is the\n// UNAUTHENTICATED root with auth-card geometry) · rebuilding nav on the 403 page · two CTAs ·\n// className=\"min-h-dvh flex …\" · a hand-built \"18:00 - 20:00 JST\" string · writing the request id\n// into 'description' as prose instead of using the semantic slot.",
+  "code": "// @godxjp/ui SHIPS <ErrorSurface>. Do NOT hand-compose an error page from\n// the auth CenteredShell + a generic Card + a local \".canonical-auth-card\" — that workaround IS the regression.\n//\n//    403 / 404  → mode=\"application\": the surface is the BODY of the AppShell you ALREADY render\n//                 (sidebar + topbar + breadcrumb are PRESERVED, never reconstructed)\n//    500 / 503  → mode=\"system\":      the surface OWNS the page (CenteredShell align=\"center\",\n//                 package-owned geometry at 1440 / 1024 / 390 — no min-h-dvh, no media query)\n// Docs page: docs/layout/error-surface/\n\nimport { Button, Logo, Text } from \"@godxjp/ui/general\";\nimport { AppShell, ErrorSurface, PageContainer, Sidebar } from \"@godxjp/ui/layout\";\n\n// ── WHAT THE COMPONENT OWNS ───────────────────────────────────────────────────────────\n//  • status → icon + tone (ShieldAlert/warning · SearchX/muted · ServerCrash/destructive ·\n//    Wrench/warning). You pass the NUMBER; you never write the lookup.\n//  • EXACTLY ONE recovery action — a single slot; a 2nd element is dropped with a dev error.\n//  • semantic metadata slots as real <dt>/<dd> pairs, with LIBRARY-owned localized labels:\n//    requestId · permission · organization · maintenance{start,end,timeZone,progress}\n//  • heading order (h2 in application mode under the PageContainer h1, h1 in system mode)\n//  • the status code announced as \"HTTP status 403\", not the cardinal number \"403\"\n// PRODUCT COPY stays yours: title / description / action come from the APP's own t().\n\n// ── 403 / 404 — APPLICATION mode: PRESERVE the authenticated shell ─────────────────────\nexport function ForbiddenPage() {\n  return (\n    <AppShell sidebar={<Sidebar activeId=\"reports\" sections={sections} />}>\n      <PageContainer title={t(\"reports.title\")} breadcrumb={[{ label: t(\"nav.home\"), to: \"/\" }, { label: t(\"reports.title\") }]}>\n        <ErrorSurface\n          mode=\"application\"\n          status={403}\n          title={t(\"errors.403.title\")}\n          description={t(\"errors.403.description\")}\n          permission=\"reports.view\"        {/* WHY: the missing role … */}\n          organization=\"Acme KK\"           {/* … vs the wrong workspace */}\n          action={<Button onClick={goHome}>{t(\"errors.backHome\")}</Button>}\n        />\n      </PageContainer>\n    </AppShell>\n  );\n}\n\n// ── 500 / 503 — SYSTEM mode: package-owned viewport-centred geometry ───────────────────\n// The component renders CenteredShell align=\"center\" itself → the column centres in the 100dvh\n// shell at 1440 / 1024 / 390. NO className, NO min-h-dvh, NO media query. Tall copy still scrolls\n// from the top (auto offsets collapse), so a long JA/VI message is never clipped.\nexport function MaintenancePage() {\n  return (\n    <ErrorSurface\n      mode=\"system\"\n      status={503}\n      brand={<Logo glyph=\"G\" />}\n      title={t(\"errors.503.title\")}\n      description={t(\"errors.503.description\")}\n      maintenance={{\n        start: \"2026-08-02T18:00:00Z\",  // ISO-8601 instants + an IANA zone → Intl.formatRange\n        end: \"2026-08-02T20:00:00Z\",\n        timeZone: \"Asia/Tokyo\",\n        progress: 40,                   // 0-100, SERVER-SENT (a client clock breaks hydration)\n      }}\n      footer={<Text size=\"xs\" tone=\"muted\">2026 GodX</Text>}\n      action={<Button onClick={reload}>{t(\"errors.reload\")}</Button>}\n    />\n  );\n}\n\n// ── INERTIA / SSR — one Error page component, one expression ───────────────────────────\n// Laravel: Handler::render() → Inertia::render('Error', ['status' => $response->getStatusCode()])\n//\n//   export default function Error({ status, requestId }) {\n//     const isSystem = status >= 500\n//     return (\n//       <ErrorSurface\n//         mode={isSystem ? \"system\" : \"application\"}\n//         status={status}\n//         requestId={requestId}\n//         title={t(`errors.${status}.title`)}\n//         description={t(`errors.${status}.description`)}\n//         action={<Button asChild><Link href=\"/\">{t(\"errors.backHome\")}</Link></Button>}\n//       />\n//     )\n//   }\n//   // persistent layout ⇒ 403/404 keep the authenticated shell; 500/503 own the page\n//   Error.layout = (page) => (page.props.status < 500 ? <CrmLayout>{page}</CrmLayout> : page)\n//\n// SSR rules:\n//  • ErrorSurface has NO client state / effects / portals → it renders fully server-side. An\n//    exception page must be readable without hydration.\n//  • Pass the maintenance window as a SERVER-SENT ISO-8601 string + an explicit IANA timeZone.\n//    An argless new Date() or the server's local zone ⇒ hydration mismatch.\n//  • A 500 page must NOT import the app's query client / data providers — the failure may be\n//    inside them. ErrorSurface needs only the AppProvider that supplies the locale.\n//\n// THEMING: retune with tokens, never a className —\n//   --error-surface-max-width | -gap | -padding-block(-compact) | -meta-gap | -meta-row-gap |\n//   --error-surface-meta-border (default 'none', rule #44) | --error-surface-progress-max-width\n//\n// ANTI-PATTERNS: the auth CenteredShell + a generic Card (the workaround; it is the\n// UNAUTHENTICATED root with auth-card geometry) · rebuilding nav on the 403 page · two CTAs ·\n// className=\"min-h-dvh flex …\" · a hand-built \"18:00 - 20:00 JST\" string · writing the request id\n// into 'description' as prose instead of using the semantic slot.",
   "name": "error-pages",
   "tagline": "400 / 403 / 404 / 500 / 503 exception pages. USE THE COMPONENT: import { ErrorSurface } from \"@godxjp/ui/layout\". `mode=\"application\"` (400/403/404) is the body you put inside the AppShell the route already renders; `mode=\"system\"` (500/503) owns the page via CenteredShell align=\"center\".",
   "tags": [

package/agent/patterns/pricing-plans.json

@@ -0,0 +1,17 @@
+{
+  "aliases": [
+    "pricing-table",
+    "plan-picker",
+    "pricing-card"
+  ],
+  "code": "import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Badge, FeatureList } from \"@godxjp/ui/data-display\";\nimport { ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Button, Text } from \"@godxjp/ui/general\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Plan = {\n  id: string;\n  name: string;\n  summary: string;\n  /** Minor units of the ISO 4217 currency; formatted with Intl, never hand-built. */\n  price: number;\n  currency: string;\n  recommended?: boolean;\n  current?: boolean;\n  features: { state: \"included\" | \"excluded\" | \"limited\"; label: string; description?: string }[];\n};\n\nexport function PricingPlans({ plans, onChoose }: { plans: Plan[]; onChoose: (id: string) => void }) {\n  const { t, locale } = useTranslation();\n  return (\n    // 3 columns from the sm container step, 1 below it — the geometry is the preset's, not yours.\n    <ResponsiveGrid preset=\"pricing-plans\" gap=\"md\">\n      {plans.map((plan) => {\n        const money = new Intl.NumberFormat(locale, { style: \"currency\", currency: plan.currency });\n        const digits = money.resolvedOptions().maximumFractionDigits ?? 0;\n        return (\n          // \"featured\" is the one recommended plan: a brand-toned perimeter, not a bigger card.\n          <Card key={plan.id} variant={plan.recommended ? \"featured\" : \"default\"}>\n            <CardHeader>\n              <CardTitle>{plan.name}</CardTitle>\n              <CardDescription>{plan.summary}</CardDescription>\n              {plan.current ? <Badge tone=\"success\">{t(\"billing.currentPlan\")}</Badge> : null}\n            </CardHeader>\n            <CardContent>\n              <Text size=\"xl\" weight=\"semibold\" tabular>\n                {money.format(plan.price / 10 ** digits)}\n              </Text>\n              {/* FeatureList owns the included / limited / excluded glyph, colour and sr-only prefix. */}\n              <FeatureList items={plan.features} />\n            </CardContent>\n            <CardFooter>\n              <Button\n                fullWidth\n                variant={plan.recommended ? \"default\" : \"outline\"}\n                disabled={plan.current}\n                onClick={() => onChoose(plan.id)}\n              >\n                {plan.current ? t(\"billing.currentPlan\") : t(\"billing.choosePlan\")}\n              </Button>\n            </CardFooter>\n          </Card>\n        );\n      })}\n    </ResponsiveGrid>\n  );\n}",
+  "name": "pricing-plans",
+  "tagline": "Pricing plan cards — ResponsiveGrid preset + Card featured + FeatureList + tabular price. A composition, not a component (consumer request, debated 2026-10-09 on #1205).",
+  "tags": [
+    "pricing",
+    "plans",
+    "billing",
+    "card",
+    "composition"
+  ]
+}

package/agent/patterns-index.json

@@ -65,6 +65,22 @@
       "admin"
     ]
   },
+  {
+    "aliases": [
+      "pricing-table",
+      "plan-picker",
+      "pricing-card"
+    ],
+    "name": "pricing-plans",
+    "tagline": "Pricing plan cards — ResponsiveGrid preset + Card featured + FeatureList + tabular price. A composition, not a component (consumer request, debated 2026-10-09 on #1205).",
+    "tags": [
+      "pricing",
+      "plans",
+      "billing",
+      "card",
+      "composition"
+    ]
+  },
   {
     "name": "confirm-destructive",
     "tagline": "Type-to-confirm destructive dialog — AlertDialogRoot + Input gate + toast (real @godxjp/ui API).",
@@ -232,7 +248,7 @@
       "scr-008"
     ],
     "name": "auth-recovery-panels",
-    "tagline": "Signed-OUT password recovery + sign-in MFA challenge panels (SCR-008). There is NO PasswordRecoveryPanel and NO MfaChallengePanel — compose Card + AuthStack + FormField/InputOTP + Button inside AuthShell preset=\"account-recovery\" (the 432px token-owned measure).",
+    "tagline": "Signed-OUT password recovery + sign-in MFA challenge panels (SCR-008). There is NO PasswordRecoveryPanel and NO MfaChallengePanel — compose Card + AuthStack + FormField/InputOTP + Button inside CenteredShell variant=\"auth-canonical\" preset=\"account-recovery\" (the 432px token-owned measure).",
     "tags": [
       "auth",
       "authshell",

package/agent/patterns.json

@@ -69,6 +69,23 @@
       "admin"
     ]
   },
+  {
+    "aliases": [
+      "pricing-table",
+      "plan-picker",
+      "pricing-card"
+    ],
+    "code": "import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Badge, FeatureList } from \"@godxjp/ui/data-display\";\nimport { ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Button, Text } from \"@godxjp/ui/general\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Plan = {\n  id: string;\n  name: string;\n  summary: string;\n  /** Minor units of the ISO 4217 currency; formatted with Intl, never hand-built. */\n  price: number;\n  currency: string;\n  recommended?: boolean;\n  current?: boolean;\n  features: { state: \"included\" | \"excluded\" | \"limited\"; label: string; description?: string }[];\n};\n\nexport function PricingPlans({ plans, onChoose }: { plans: Plan[]; onChoose: (id: string) => void }) {\n  const { t, locale } = useTranslation();\n  return (\n    // 3 columns from the sm container step, 1 below it — the geometry is the preset's, not yours.\n    <ResponsiveGrid preset=\"pricing-plans\" gap=\"md\">\n      {plans.map((plan) => {\n        const money = new Intl.NumberFormat(locale, { style: \"currency\", currency: plan.currency });\n        const digits = money.resolvedOptions().maximumFractionDigits ?? 0;\n        return (\n          // \"featured\" is the one recommended plan: a brand-toned perimeter, not a bigger card.\n          <Card key={plan.id} variant={plan.recommended ? \"featured\" : \"default\"}>\n            <CardHeader>\n              <CardTitle>{plan.name}</CardTitle>\n              <CardDescription>{plan.summary}</CardDescription>\n              {plan.current ? <Badge tone=\"success\">{t(\"billing.currentPlan\")}</Badge> : null}\n            </CardHeader>\n            <CardContent>\n              <Text size=\"xl\" weight=\"semibold\" tabular>\n                {money.format(plan.price / 10 ** digits)}\n              </Text>\n              {/* FeatureList owns the included / limited / excluded glyph, colour and sr-only prefix. */}\n              <FeatureList items={plan.features} />\n            </CardContent>\n            <CardFooter>\n              <Button\n                fullWidth\n                variant={plan.recommended ? \"default\" : \"outline\"}\n                disabled={plan.current}\n                onClick={() => onChoose(plan.id)}\n              >\n                {plan.current ? t(\"billing.currentPlan\") : t(\"billing.choosePlan\")}\n              </Button>\n            </CardFooter>\n          </Card>\n        );\n      })}\n    </ResponsiveGrid>\n  );\n}",
+    "name": "pricing-plans",
+    "tagline": "Pricing plan cards — ResponsiveGrid preset + Card featured + FeatureList + tabular price. A composition, not a component (consumer request, debated 2026-10-09 on #1205).",
+    "tags": [
+      "pricing",
+      "plans",
+      "billing",
+      "card",
+      "composition"
+    ]
+  },
   {
     "code": "import { useState } from \"react\";\nimport { AlertDialogRoot, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from \"@godxjp/ui/feedback\";\nimport { Input } from \"@godxjp/ui/data-entry\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { toast } from \"sonner\";\n\nexport function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolean; onOpenChange: (v: boolean) => void; slug: string }) {\n  const [confirm, setConfirm] = useState(\"\");\n  return (\n    <AlertDialogRoot open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>プロジェクトを削除</AlertDialogTitle>\n          <AlertDialogDescription>この操作は取り消せません。確認のためプロジェクト名 \"{slug}\" と入力してください。</AlertDialogDescription>\n        </AlertDialogHeader>\n        <Flex direction=\"col\" gap=\"md\">\n          <Input value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder={slug} />\n        </Flex>\n        <AlertDialogFooter>\n          <AlertDialogCancel asChild><Button variant=\"outline\">キャンセル</Button></AlertDialogCancel>\n          <AlertDialogAction asChild>\n            <Button variant=\"destructive\" disabled={confirm !== slug} onClick={() => { toast.success(\"削除しました\"); onOpenChange(false); }}>完全に削除</Button>\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialogRoot>\n  );\n}",
     "name": "confirm-destructive",
@@ -144,7 +161,7 @@
       "503",
       "exception-page"
     ],
-    "code": "// @godxjp/ui SHIPS <ErrorSurface>. Do NOT hand-compose an error page from\n// AuthShell + a generic Card + a local \".canonical-auth-card\" — that workaround IS the regression.\n//\n//    403 / 404  → mode=\"application\": the surface is the BODY of the AppShell you ALREADY render\n//                 (sidebar + topbar + breadcrumb are PRESERVED, never reconstructed)\n//    500 / 503  → mode=\"system\":      the surface OWNS the page (CenteredShell align=\"center\",\n//                 package-owned geometry at 1440 / 1024 / 390 — no min-h-dvh, no media query)\n// Docs page: docs/layout/error-surface/\n\nimport { Button, Logo, Text } from \"@godxjp/ui/general\";\nimport { AppShell, ErrorSurface, PageContainer, Sidebar } from \"@godxjp/ui/layout\";\n\n// ── WHAT THE COMPONENT OWNS ───────────────────────────────────────────────────────────\n//  • status → icon + tone (ShieldAlert/warning · SearchX/muted · ServerCrash/destructive ·\n//    Wrench/warning). You pass the NUMBER; you never write the lookup.\n//  • EXACTLY ONE recovery action — a single slot; a 2nd element is dropped with a dev error.\n//  • semantic metadata slots as real <dt>/<dd> pairs, with LIBRARY-owned localized labels:\n//    requestId · permission · organization · maintenance{start,end,timeZone,progress}\n//  • heading order (h2 in application mode under the PageContainer h1, h1 in system mode)\n//  • the status code announced as \"HTTP status 403\", not the cardinal number \"403\"\n// PRODUCT COPY stays yours: title / description / action come from the APP's own t().\n\n// ── 403 / 404 — APPLICATION mode: PRESERVE the authenticated shell ─────────────────────\nexport function ForbiddenPage() {\n  return (\n    <AppShell sidebar={<Sidebar activeId=\"reports\" sections={sections} />}>\n      <PageContainer title={t(\"reports.title\")} breadcrumb={[{ label: t(\"nav.home\"), to: \"/\" }, { label: t(\"reports.title\") }]}>\n        <ErrorSurface\n          mode=\"application\"\n          status={403}\n          title={t(\"errors.403.title\")}\n          description={t(\"errors.403.description\")}\n          permission=\"reports.view\"        {/* WHY: the missing role … */}\n          organization=\"Acme KK\"           {/* … vs the wrong workspace */}\n          action={<Button onClick={goHome}>{t(\"errors.backHome\")}</Button>}\n        />\n      </PageContainer>\n    </AppShell>\n  );\n}\n\n// ── 500 / 503 — SYSTEM mode: package-owned viewport-centred geometry ───────────────────\n// The component renders CenteredShell align=\"center\" itself → the column centres in the 100dvh\n// shell at 1440 / 1024 / 390. NO className, NO min-h-dvh, NO media query. Tall copy still scrolls\n// from the top (auto offsets collapse), so a long JA/VI message is never clipped.\nexport function MaintenancePage() {\n  return (\n    <ErrorSurface\n      mode=\"system\"\n      status={503}\n      brand={<Logo glyph=\"G\" />}\n      title={t(\"errors.503.title\")}\n      description={t(\"errors.503.description\")}\n      maintenance={{\n        start: \"2026-08-02T18:00:00Z\",  // ISO-8601 instants + an IANA zone → Intl.formatRange\n        end: \"2026-08-02T20:00:00Z\",\n        timeZone: \"Asia/Tokyo\",\n        progress: 40,                   // 0-100, SERVER-SENT (a client clock breaks hydration)\n      }}\n      footer={<Text size=\"xs\" tone=\"muted\">2026 GodX</Text>}\n      action={<Button onClick={reload}>{t(\"errors.reload\")}</Button>}\n    />\n  );\n}\n\n// ── INERTIA / SSR — one Error page component, one expression ───────────────────────────\n// Laravel: Handler::render() → Inertia::render('Error', ['status' => $response->getStatusCode()])\n//\n//   export default function Error({ status, requestId }) {\n//     const isSystem = status >= 500\n//     return (\n//       <ErrorSurface\n//         mode={isSystem ? \"system\" : \"application\"}\n//         status={status}\n//         requestId={requestId}\n//         title={t(`errors.${status}.title`)}\n//         description={t(`errors.${status}.description`)}\n//         action={<Button asChild><Link href=\"/\">{t(\"errors.backHome\")}</Link></Button>}\n//       />\n//     )\n//   }\n//   // persistent layout ⇒ 403/404 keep the authenticated shell; 500/503 own the page\n//   Error.layout = (page) => (page.props.status < 500 ? <CrmLayout>{page}</CrmLayout> : page)\n//\n// SSR rules:\n//  • ErrorSurface has NO client state / effects / portals → it renders fully server-side. An\n//    exception page must be readable without hydration.\n//  • Pass the maintenance window as a SERVER-SENT ISO-8601 string + an explicit IANA timeZone.\n//    An argless new Date() or the server's local zone ⇒ hydration mismatch.\n//  • A 500 page must NOT import the app's query client / data providers — the failure may be\n//    inside them. ErrorSurface needs only the AppProvider that supplies the locale.\n//\n// THEMING: retune with tokens, never a className —\n//   --error-surface-max-width | -gap | -padding-block(-compact) | -meta-gap | -meta-row-gap |\n//   --error-surface-meta-border (default 'none', rule #44) | --error-surface-progress-max-width\n//\n// ANTI-PATTERNS: AuthShell + a generic Card (the workaround; AuthShell is the\n// UNAUTHENTICATED root with auth-card geometry) · rebuilding nav on the 403 page · two CTAs ·\n// className=\"min-h-dvh flex …\" · a hand-built \"18:00 - 20:00 JST\" string · writing the request id\n// into 'description' as prose instead of using the semantic slot.",
+    "code": "// @godxjp/ui SHIPS <ErrorSurface>. Do NOT hand-compose an error page from\n// the auth CenteredShell + a generic Card + a local \".canonical-auth-card\" — that workaround IS the regression.\n//\n//    403 / 404  → mode=\"application\": the surface is the BODY of the AppShell you ALREADY render\n//                 (sidebar + topbar + breadcrumb are PRESERVED, never reconstructed)\n//    500 / 503  → mode=\"system\":      the surface OWNS the page (CenteredShell align=\"center\",\n//                 package-owned geometry at 1440 / 1024 / 390 — no min-h-dvh, no media query)\n// Docs page: docs/layout/error-surface/\n\nimport { Button, Logo, Text } from \"@godxjp/ui/general\";\nimport { AppShell, ErrorSurface, PageContainer, Sidebar } from \"@godxjp/ui/layout\";\n\n// ── WHAT THE COMPONENT OWNS ───────────────────────────────────────────────────────────\n//  • status → icon + tone (ShieldAlert/warning · SearchX/muted · ServerCrash/destructive ·\n//    Wrench/warning). You pass the NUMBER; you never write the lookup.\n//  • EXACTLY ONE recovery action — a single slot; a 2nd element is dropped with a dev error.\n//  • semantic metadata slots as real <dt>/<dd> pairs, with LIBRARY-owned localized labels:\n//    requestId · permission · organization · maintenance{start,end,timeZone,progress}\n//  • heading order (h2 in application mode under the PageContainer h1, h1 in system mode)\n//  • the status code announced as \"HTTP status 403\", not the cardinal number \"403\"\n// PRODUCT COPY stays yours: title / description / action come from the APP's own t().\n\n// ── 403 / 404 — APPLICATION mode: PRESERVE the authenticated shell ─────────────────────\nexport function ForbiddenPage() {\n  return (\n    <AppShell sidebar={<Sidebar activeId=\"reports\" sections={sections} />}>\n      <PageContainer title={t(\"reports.title\")} breadcrumb={[{ label: t(\"nav.home\"), to: \"/\" }, { label: t(\"reports.title\") }]}>\n        <ErrorSurface\n          mode=\"application\"\n          status={403}\n          title={t(\"errors.403.title\")}\n          description={t(\"errors.403.description\")}\n          permission=\"reports.view\"        {/* WHY: the missing role … */}\n          organization=\"Acme KK\"           {/* … vs the wrong workspace */}\n          action={<Button onClick={goHome}>{t(\"errors.backHome\")}</Button>}\n        />\n      </PageContainer>\n    </AppShell>\n  );\n}\n\n// ── 500 / 503 — SYSTEM mode: package-owned viewport-centred geometry ───────────────────\n// The component renders CenteredShell align=\"center\" itself → the column centres in the 100dvh\n// shell at 1440 / 1024 / 390. NO className, NO min-h-dvh, NO media query. Tall copy still scrolls\n// from the top (auto offsets collapse), so a long JA/VI message is never clipped.\nexport function MaintenancePage() {\n  return (\n    <ErrorSurface\n      mode=\"system\"\n      status={503}\n      brand={<Logo glyph=\"G\" />}\n      title={t(\"errors.503.title\")}\n      description={t(\"errors.503.description\")}\n      maintenance={{\n        start: \"2026-08-02T18:00:00Z\",  // ISO-8601 instants + an IANA zone → Intl.formatRange\n        end: \"2026-08-02T20:00:00Z\",\n        timeZone: \"Asia/Tokyo\",\n        progress: 40,                   // 0-100, SERVER-SENT (a client clock breaks hydration)\n      }}\n      footer={<Text size=\"xs\" tone=\"muted\">2026 GodX</Text>}\n      action={<Button onClick={reload}>{t(\"errors.reload\")}</Button>}\n    />\n  );\n}\n\n// ── INERTIA / SSR — one Error page component, one expression ───────────────────────────\n// Laravel: Handler::render() → Inertia::render('Error', ['status' => $response->getStatusCode()])\n//\n//   export default function Error({ status, requestId }) {\n//     const isSystem = status >= 500\n//     return (\n//       <ErrorSurface\n//         mode={isSystem ? \"system\" : \"application\"}\n//         status={status}\n//         requestId={requestId}\n//         title={t(`errors.${status}.title`)}\n//         description={t(`errors.${status}.description`)}\n//         action={<Button asChild><Link href=\"/\">{t(\"errors.backHome\")}</Link></Button>}\n//       />\n//     )\n//   }\n//   // persistent layout ⇒ 403/404 keep the authenticated shell; 500/503 own the page\n//   Error.layout = (page) => (page.props.status < 500 ? <CrmLayout>{page}</CrmLayout> : page)\n//\n// SSR rules:\n//  • ErrorSurface has NO client state / effects / portals → it renders fully server-side. An\n//    exception page must be readable without hydration.\n//  • Pass the maintenance window as a SERVER-SENT ISO-8601 string + an explicit IANA timeZone.\n//    An argless new Date() or the server's local zone ⇒ hydration mismatch.\n//  • A 500 page must NOT import the app's query client / data providers — the failure may be\n//    inside them. ErrorSurface needs only the AppProvider that supplies the locale.\n//\n// THEMING: retune with tokens, never a className —\n//   --error-surface-max-width | -gap | -padding-block(-compact) | -meta-gap | -meta-row-gap |\n//   --error-surface-meta-border (default 'none', rule #44) | --error-surface-progress-max-width\n//\n// ANTI-PATTERNS: the auth CenteredShell + a generic Card (the workaround; it is the\n// UNAUTHENTICATED root with auth-card geometry) · rebuilding nav on the 403 page · two CTAs ·\n// className=\"min-h-dvh flex …\" · a hand-built \"18:00 - 20:00 JST\" string · writing the request id\n// into 'description' as prose instead of using the semantic slot.",
     "name": "error-pages",
     "tagline": "400 / 403 / 404 / 500 / 503 exception pages. USE THE COMPONENT: import { ErrorSurface } from \"@godxjp/ui/layout\". `mode=\"application\"` (400/403/404) is the body you put inside the AppShell the route already renders; `mode=\"system\"` (500/503) owns the page via CenteredShell align=\"center\".",
     "tags": [
@@ -245,9 +262,9 @@
       "passkey-failure",
       "scr-008"
     ],
-    "code": "// ⚠️ There is NO <PasswordRecoveryPanel state=…/> and NO <MfaChallengePanel state=…/> in\n// @godxjp/ui. What the package owns is the MEASURE:\n//    <AuthShell variant=\"canonical\" preset=\"account-recovery\">   ← 432px panel, 15px gutter at 390\n// Docs page: docs/layout/auth-recovery/\n//\n// PRESENTATION ONLY. No route, no reset semantics, no OTP verification, no recovery-code\n// consumption, no passkey authentication, no permissions. The consumer owns all logic and copy.\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@godxjp/ui/data-display\";\nimport { FormField, Input, InputOTP, InputOTPGroup, InputOTPSlot, PasswordInput, PasswordStrength } from \"@godxjp/ui/data-entry\";\nimport { Alert, AlertDescription, AlertTitle } from \"@godxjp/ui/feedback\";\nimport { Button, Reveal } from \"@godxjp/ui/general\";\nimport { AuthFooter, AuthShell, AuthStack, Flex } from \"@godxjp/ui/layout\";\n\n// ── THE CANONICAL PANEL ANATOMY — identical for ALL SEVEN states ───────────────────────\n//   Card > CardHeader(CardTitle + CardDescription)   ← title/description INSIDE the surface\n//        > CardContent > AuthStack\n//            [notice]   Alert tone=\"success|destructive\"   (only when the state has one)\n//            [fields]   FormField(s): email · password pair · ONE 6-slot InputOTP · one Input\n//            [primary]  Button fullWidth                    (spans the panel; exactly one)\n//            [fallback] Flex justify=\"between\" gap=\"sm\" wrap (two ghost actions share ONE row)\n//\n// DON'T put <AuthIdentity> above the panel here — it always renders the hosted mark, and the\n// SCR-008 hierarchy puts the heading INSIDE the bordered surface.\n// DON'T reuse <TwoFactorSetup> — that is the ENROLLMENT Dialog (QR / manual key / recovery\n// output). A sign-in challenge has no secret to reveal and no dialog to dismiss: it IS the page.\n\n// ── SIGN-IN MFA CHALLENGE (otp) ────────────────────────────────────────────────────────\n// Focus order IS DOM order: code field → verify → fallback A → fallback B. No tabindex.\n// The 6-slot row is ONE field: InputOTP owns paste/arrows/backspace/caret and is a single tab\n// stop. Six <Input>s would put six stops in the ring and break paste of a 6-digit code.\nexport function MfaChallengePage({ code, onCodeChange, error, pending, onVerify }) {\n  return (\n    <AuthShell\n      variant=\"canonical\"\n      preset=\"account-recovery\"\n      brand={brand}\n      footer={<AuthFooter product=\"GoDX ID\" terms={termsLink} privacy={privacyLink} locale={localePicker} />}\n    >\n      <Reveal>\n        <Card>\n          <CardHeader>\n            <CardTitle level={1}>{t(\"mfa.title\")}</CardTitle>\n            <CardDescription>{t(\"mfa.description\")}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <AuthStack>\n              <FormField id=\"mfa-code\" label={t(\"mfa.codeLabel\")} error={error} required>\n                <InputOTP maxLength={6} pattern=\"^[0-9]+$\" value={code} onChange={onCodeChange}>\n                  <InputOTPGroup>\n                    {/* six <InputOTPSlot index={0..5} /> */}\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormField>\n              <Button fullWidth loading={pending} loadingText={t(\"common.verifying\")} onClick={onVerify}>\n                {t(\"mfa.verify\")}\n              </Button>\n              <Flex justify=\"between\" gap=\"sm\" wrap>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.useRecoveryCode\")}</Button>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.retryPasskey\")}</Button>\n              </Flex>\n            </AuthStack>\n          </CardContent>\n        </Card>\n      </Reveal>\n    </AuthShell>\n  );\n}\n\n// ── THE OTHER SIX STATES — same anatomy, only the notice/fields/copy change ─────────────\n// The STATE IS NOT A PROP: the server answers, and the route renders the matching body in the\n// SAME 432px panel. Nothing is reconstructed, because nothing was torn down.\n//\n//   password recovery · request        —  fields: email (autoComplete=\"username\")\n//   password recovery · sent           —  <Alert tone=\"success\"> + <Button fullWidth disabled> (cooldown)\n//   password recovery · new-password   —  two <PasswordInput autoComplete=\"new-password\"> + <PasswordStrength>\n//   password recovery · expired        —  <Alert tone=\"destructive\">, primary = request a new link\n//   MFA · recovery-code                —  ONE <Input autoComplete=\"one-time-code\">\n//   MFA · passkey-failure              —  <Alert tone=\"destructive\">, primary = retry passkey\n//\n// The masked address in `sent` (\"h*****@example.co.jp\") is produced by the SERVER — the panel\n// never reconstructs an identifier, it renders the string it is given.\n\n// ── STATES ─────────────────────────────────────────────────────────────────────────────\n//  error    FormField error ⇒ aria-invalid + aria-errormessage + role=\"alert\". Never colour-only.\n//  loading  Button loading + loadingText ⇒ aria-busy, the box does not resize, fallbacks disabled.\n//  disabled a resend cooldown is <Button disabled> — keep it VISIBLE so the affordance is known.\n\n// ── RESPONSIVE CONTRACT (1440 / 1024 / 390) ────────────────────────────────────────────\n//  1440 · 1024   panel 432px, centred, 16px page gutter; OTP one row (6 × 36px = 216px)\n//  390           panel 360px at x=15 (15px inline gutter, --auth-shell-recovery-main-padding-mobile),\n//                310px content column, OTP still ONE row, primary still full-width, the fallback\n//                row wraps to a stack only when the localized labels exceed the column.\n//  ⚠️ The 390 canonical reference is a desktop 2×2 COMPOSITE that overflows\n//  and crops horizontally. It is NOT a valid mobile source and was not traced; the row above is a\n//  DECIDED contract, documented in docs/layout/auth-recovery/ and pinned by tests.\n\n// ANTI-PATTERNS: a page-local --auth-shell-card-max-width override or a .recovery-panel{width:432px}\n// class · AuthIdentity above the panel · TwoFactorSetup as a challenge · six Inputs for the OTP row ·\n// re-scoping --control-height to widen the slots (use --otp-slot-size) · two primary actions.",
+    "code": "// ⚠️ There is NO <PasswordRecoveryPanel state=…/> and NO <MfaChallengePanel state=…/> in\n// @godxjp/ui. What the package owns is the MEASURE:\n//    <CenteredShell variant=\"auth-canonical\" preset=\"account-recovery\">   ← 432px panel, 15px gutter at 390\n// Docs page: docs/layout/auth-recovery/\n//\n// PRESENTATION ONLY. No route, no reset semantics, no OTP verification, no recovery-code\n// consumption, no passkey authentication, no permissions. The consumer owns all logic and copy.\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@godxjp/ui/data-display\";\nimport { FormField, Input, InputOTP, InputOTPGroup, InputOTPSlot, PasswordInput, PasswordStrength } from \"@godxjp/ui/data-entry\";\nimport { Alert, AlertDescription, AlertTitle } from \"@godxjp/ui/feedback\";\nimport { Button, Reveal } from \"@godxjp/ui/general\";\nimport { AuthFooter, CenteredShell, AuthStack, Flex } from \"@godxjp/ui/layout\";\n\n// ── THE CANONICAL PANEL ANATOMY — identical for ALL SEVEN states ───────────────────────\n//   Card > CardHeader(CardTitle + CardDescription)   ← title/description INSIDE the surface\n//        > CardContent > AuthStack\n//            [notice]   Alert tone=\"success|destructive\"   (only when the state has one)\n//            [fields]   FormField(s): email · password pair · ONE 6-slot InputOTP · one Input\n//            [primary]  Button fullWidth                    (spans the panel; exactly one)\n//            [fallback] Flex justify=\"between\" gap=\"sm\" wrap (two ghost actions share ONE row)\n//\n// DON'T put <AuthIdentity> above the panel here — it always renders the hosted mark, and the\n// SCR-008 hierarchy puts the heading INSIDE the bordered surface.\n// DON'T reuse <TwoFactorSetup> — that is the ENROLLMENT Dialog (QR / manual key / recovery\n// output). A sign-in challenge has no secret to reveal and no dialog to dismiss: it IS the page.\n\n// ── SIGN-IN MFA CHALLENGE (otp) ────────────────────────────────────────────────────────\n// Focus order IS DOM order: code field → verify → fallback A → fallback B. No tabindex.\n// The 6-slot row is ONE field: InputOTP owns paste/arrows/backspace/caret and is a single tab\n// stop. Six <Input>s would put six stops in the ring and break paste of a 6-digit code.\nexport function MfaChallengePage({ code, onCodeChange, error, pending, onVerify }) {\n  return (\n    <CenteredShell variant=\"auth-canonical\"\n      preset=\"account-recovery\"\n      brand={brand}\n      footer={<AuthFooter product=\"GoDX ID\" terms={termsLink} privacy={privacyLink} locale={localePicker} />}\n    >\n      <Reveal>\n        <Card>\n          <CardHeader>\n            <CardTitle level={1}>{t(\"mfa.title\")}</CardTitle>\n            <CardDescription>{t(\"mfa.description\")}</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <AuthStack>\n              <FormField id=\"mfa-code\" label={t(\"mfa.codeLabel\")} error={error} required>\n                <InputOTP maxLength={6} pattern=\"^[0-9]+$\" value={code} onChange={onCodeChange}>\n                  <InputOTPGroup>\n                    {/* six <InputOTPSlot index={0..5} /> */}\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormField>\n              <Button fullWidth loading={pending} loadingText={t(\"common.verifying\")} onClick={onVerify}>\n                {t(\"mfa.verify\")}\n              </Button>\n              <Flex justify=\"between\" gap=\"sm\" wrap>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.useRecoveryCode\")}</Button>\n                <Button variant=\"ghost\" size=\"sm\">{t(\"mfa.retryPasskey\")}</Button>\n              </Flex>\n            </AuthStack>\n          </CardContent>\n        </Card>\n      </Reveal>\n    </CenteredShell>\n  );\n}\n\n// ── THE OTHER SIX STATES — same anatomy, only the notice/fields/copy change ─────────────\n// The STATE IS NOT A PROP: the server answers, and the route renders the matching body in the\n// SAME 432px panel. Nothing is reconstructed, because nothing was torn down.\n//\n//   password recovery · request        —  fields: email (autoComplete=\"username\")\n//   password recovery · sent           —  <Alert tone=\"success\"> + <Button fullWidth disabled> (cooldown)\n//   password recovery · new-password   —  two <PasswordInput autoComplete=\"new-password\"> + <PasswordStrength>\n//   password recovery · expired        —  <Alert tone=\"destructive\">, primary = request a new link\n//   MFA · recovery-code                —  ONE <Input autoComplete=\"one-time-code\">\n//   MFA · passkey-failure              —  <Alert tone=\"destructive\">, primary = retry passkey\n//\n// The masked address in `sent` (\"h*****@example.co.jp\") is produced by the SERVER — the panel\n// never reconstructs an identifier, it renders the string it is given.\n\n// ── STATES ─────────────────────────────────────────────────────────────────────────────\n//  error    FormField error ⇒ aria-invalid + aria-errormessage + role=\"alert\". Never colour-only.\n//  loading  Button loading + loadingText ⇒ aria-busy, the box does not resize, fallbacks disabled.\n//  disabled a resend cooldown is <Button disabled> — keep it VISIBLE so the affordance is known.\n\n// ── RESPONSIVE CONTRACT (1440 / 1024 / 390) ────────────────────────────────────────────\n//  1440 · 1024   panel 432px, centred, 16px page gutter; OTP one row (6 × 36px = 216px)\n//  390           panel 360px at x=15 (15px inline gutter, --auth-shell-recovery-main-padding-mobile),\n//                310px content column, OTP still ONE row, primary still full-width, the fallback\n//                row wraps to a stack only when the localized labels exceed the column.\n//  ⚠️ The 390 canonical reference is a desktop 2×2 COMPOSITE that overflows\n//  and crops horizontally. It is NOT a valid mobile source and was not traced; the row above is a\n//  DECIDED contract, documented in docs/layout/auth-recovery/ and pinned by tests.\n\n// ANTI-PATTERNS: a page-local --auth-shell-card-max-width override or a .recovery-panel{width:432px}\n// class · AuthIdentity above the panel · TwoFactorSetup as a challenge · six Inputs for the OTP row ·\n// re-scoping --control-height to widen the slots (use --otp-slot-size) · two primary actions.",
     "name": "auth-recovery-panels",
-    "tagline": "Signed-OUT password recovery + sign-in MFA challenge panels (SCR-008). There is NO PasswordRecoveryPanel and NO MfaChallengePanel — compose Card + AuthStack + FormField/InputOTP + Button inside AuthShell preset=\"account-recovery\" (the 432px token-owned measure).",
+    "tagline": "Signed-OUT password recovery + sign-in MFA challenge panels (SCR-008). There is NO PasswordRecoveryPanel and NO MfaChallengePanel — compose Card + AuthStack + FormField/InputOTP + Button inside CenteredShell variant=\"auth-canonical\" preset=\"account-recovery\" (the 432px token-owned measure).",
     "tags": [
       "auth",
       "authshell",
@@ -269,7 +286,7 @@
       "security-settings",
       "recovery-settings"
     ],
-    "code": "// Research basis: Google Account recovery (email/phone + backup codes), Microsoft Security info,\n// GitHub recovery codes. Signed-IN recovery SETTINGS (manage your methods) is a DIFFERENT surface\n// from the signed-OUT forgot-password JOURNEY — do not mix them on one page.\nimport { Card, CardContent, CardHeader, CardTitle, ListRow, Badge } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { Mail, Smartphone, KeyRound } from \"lucide-react\";\n\ntype MethodStatus = \"verified\" | \"unverified\" | \"unavailable\";\n\nconst STATUS: Record<MethodStatus, { tone: \"success\" | \"warning\" | \"neutral\"; label: string }> = {\n  verified: { tone: \"success\", label: \"確認済み\" },\n  unverified: { tone: \"warning\", label: \"未確認\" },\n  unavailable: { tone: \"neutral\", label: \"未設定\" },\n};\n\nfunction MethodRow({ icon: Icon, name, value, status, action }: {\n  icon: React.ComponentType<{ className?: string }>; name: string; value?: string;\n  status: MethodStatus; action: React.ReactNode;\n}) {\n  const s = STATUS[status];\n  return (\n    <ListRow\n      leading={<Icon className=\"text-muted-foreground size-5\" />}\n      title={<span className=\"font-medium\">{name}</span>}\n      description={value ?? \"未設定\"}\n      trailing={<Flex gap=\"sm\" align=\"center\"><Badge tone={s.tone} icon={null}>{s.label}</Badge>{action}</Flex>}\n    />\n  );\n}\n\n// Compact status/action rows — one row per method, capability-aware. Do NOT stack full-width\n// Info Alerts for ordinary status, and do NOT show unavailable features as permanent page content\n// beyond a single row that offers to set them up.\nexport function AccountRecoverySettings({ email, phone, backupCodesSupported, backupCodesRemaining, onChangeEmail, onChangePhone, onRegenerateCodes, onChangePassword }: {\n  email?: string; phone?: string; backupCodesSupported: boolean; backupCodesRemaining: number;\n  onChangeEmail: () => void; onChangePhone: () => void; onRegenerateCodes: () => void; onChangePassword: () => void;\n}) {\n  return (\n    <Flex direction=\"col\" gap=\"lg\">\n      <Card>\n        <CardHeader><CardTitle>アカウント復旧</CardTitle></CardHeader>\n        <CardContent flush>\n          <MethodRow icon={Mail} name=\"復旧用メール\" value={email} status={email ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangeEmail}>{email ? \"変更\" : \"追加\"}</Button>} />\n          <MethodRow icon={Smartphone} name=\"復旧用電話番号\" value={phone} status={phone ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangePhone}>{phone ? \"変更\" : \"追加\"}</Button>} />\n          {/* Capability-aware: only render backup codes when the account type supports them. */}\n          {backupCodesSupported && (\n            <MethodRow icon={KeyRound} name=\"バックアップコード\"\n              value={`残り ${backupCodesRemaining} 個`} status={backupCodesRemaining > 0 ? \"verified\" : \"unverified\"}\n              action={<Button variant=\"outline\" size=\"sm\" onClick={onRegenerateCodes}>再生成</Button>} />\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Password change is its OWN destination (risk-appropriate confirmation lives there). */}\n      <Card>\n        <CardHeader><CardTitle>パスワード</CardTitle></CardHeader>\n        <CardContent>\n          <Flex justify=\"between\" align=\"center\">\n            <span className=\"text-muted-foreground text-sm\">最終更新: 90日前</span>\n            <Button variant=\"outline\" onClick={onChangePassword}>パスワードを変更</Button>\n          </Flex>\n        </CardContent>\n      </Card>\n    </Flex>\n  );\n}\n// The signed-OUT recovery journey (forgot password → email link → reset) is a separate flow on the\n// auth screens (AuthShell), NOT part of these signed-in settings. Do not surface it here.",
+    "code": "// Research basis: Google Account recovery (email/phone + backup codes), Microsoft Security info,\n// GitHub recovery codes. Signed-IN recovery SETTINGS (manage your methods) is a DIFFERENT surface\n// from the signed-OUT forgot-password JOURNEY — do not mix them on one page.\nimport { Card, CardContent, CardHeader, CardTitle, ListRow, Badge } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { Mail, Smartphone, KeyRound } from \"lucide-react\";\n\ntype MethodStatus = \"verified\" | \"unverified\" | \"unavailable\";\n\nconst STATUS: Record<MethodStatus, { tone: \"success\" | \"warning\" | \"neutral\"; label: string }> = {\n  verified: { tone: \"success\", label: \"確認済み\" },\n  unverified: { tone: \"warning\", label: \"未確認\" },\n  unavailable: { tone: \"neutral\", label: \"未設定\" },\n};\n\nfunction MethodRow({ icon: Icon, name, value, status, action }: {\n  icon: React.ComponentType<{ className?: string }>; name: string; value?: string;\n  status: MethodStatus; action: React.ReactNode;\n}) {\n  const s = STATUS[status];\n  return (\n    <ListRow\n      leading={<Icon className=\"text-muted-foreground size-5\" />}\n      title={<span className=\"font-medium\">{name}</span>}\n      description={value ?? \"未設定\"}\n      trailing={<Flex gap=\"sm\" align=\"center\"><Badge tone={s.tone} icon={null}>{s.label}</Badge>{action}</Flex>}\n    />\n  );\n}\n\n// Compact status/action rows — one row per method, capability-aware. Do NOT stack full-width\n// Info Alerts for ordinary status, and do NOT show unavailable features as permanent page content\n// beyond a single row that offers to set them up.\nexport function AccountRecoverySettings({ email, phone, backupCodesSupported, backupCodesRemaining, onChangeEmail, onChangePhone, onRegenerateCodes, onChangePassword }: {\n  email?: string; phone?: string; backupCodesSupported: boolean; backupCodesRemaining: number;\n  onChangeEmail: () => void; onChangePhone: () => void; onRegenerateCodes: () => void; onChangePassword: () => void;\n}) {\n  return (\n    <Flex direction=\"col\" gap=\"lg\">\n      <Card>\n        <CardHeader><CardTitle>アカウント復旧</CardTitle></CardHeader>\n        <CardContent flush>\n          <MethodRow icon={Mail} name=\"復旧用メール\" value={email} status={email ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangeEmail}>{email ? \"変更\" : \"追加\"}</Button>} />\n          <MethodRow icon={Smartphone} name=\"復旧用電話番号\" value={phone} status={phone ? \"verified\" : \"unavailable\"}\n            action={<Button variant=\"outline\" size=\"sm\" onClick={onChangePhone}>{phone ? \"変更\" : \"追加\"}</Button>} />\n          {/* Capability-aware: only render backup codes when the account type supports them. */}\n          {backupCodesSupported && (\n            <MethodRow icon={KeyRound} name=\"バックアップコード\"\n              value={`残り ${backupCodesRemaining} 個`} status={backupCodesRemaining > 0 ? \"verified\" : \"unverified\"}\n              action={<Button variant=\"outline\" size=\"sm\" onClick={onRegenerateCodes}>再生成</Button>} />\n          )}\n        </CardContent>\n      </Card>\n\n      {/* Password change is its OWN destination (risk-appropriate confirmation lives there). */}\n      <Card>\n        <CardHeader><CardTitle>パスワード</CardTitle></CardHeader>\n        <CardContent>\n          <Flex justify=\"between\" align=\"center\">\n            <span className=\"text-muted-foreground text-sm\">最終更新: 90日前</span>\n            <Button variant=\"outline\" onClick={onChangePassword}>パスワードを変更</Button>\n          </Flex>\n        </CardContent>\n      </Card>\n    </Flex>\n  );\n}\n// The signed-OUT recovery journey (forgot password → email link → reset) is a separate flow on the\n// auth screens (CenteredShell variant=\"auth\"), NOT part of these signed-in settings. Do not surface it here.",
     "name": "account-recovery-settings",
     "tagline": "Signed-in recovery: compact method status/action rows (email · phone · backup codes) + a separate password-change destination — capability-aware, risk-appropriate, NO stacked Info Alerts.",
     "tags": [