@godxjp/ui 19.1.0 → 19.2.0

package/docs/layout/auth-recovery/examples/password-recovery.tsx

@@ -0,0 +1,197 @@
+import { useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Input, PasswordInput, PasswordStrength } from "@godxjp/ui/data-entry";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { AuthFooter, AuthShell, AuthStack, Flex } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/**
+ * PASSWORD RECOVERY — the four canonical SCR-008 panel states, stacked at the real 432px measure.
+ *
+ * All four are the SAME anatomy; only the notice, the fields and the copy change:
+ *   Card > CardHeader(CardTitle + CardDescription) > CardContent > AuthStack
+ *          [notice Alert] → [fields] → [Button fullWidth] → [fallback row]
+ *
+ * A real route renders ONE of these panels with `CardTitle level={1}`. This standalone comparison
+ * keeps that contract on the first panel, then uses `level={2}` for the remaining state sections,
+ * so the frame has exactly one meaningful page heading and every state keeps a valid outline.
+ *
+ * State coverage: request (idle) · sent (success notice + DISABLED resend during cooldown) ·
+ * new-password (field ERROR + strength meter) · expired (destructive notice). The LOADING state is
+ * covered by the MFA example. Every panel's primary action spans the panel; every fallback row is
+ * `Flex justify="between" wrap`, so it collapses to a stack when the labels stop fitting.
+ */
+export default function Demo() {
+  const [email, setEmail] = useState("hanako@example.co.jp");
+  const [password, setPassword] = useState("Godx-2026");
+  const [confirmation, setConfirmation] = useState("Godx-202");
+
+  // The address is masked by the SERVER before it reaches the panel — the library never
+  // reconstructs an identifier, it only renders the string the consumer sends.
+  const maskedEmail = "h*****@example.co.jp";
+
+  return (
+    <AuthShell
+      variant="canonical"
+      preset="account-recovery"
+      brand={
+        <Flex align="center" gap="sm">
+          <Logo mark="godx" tone="success" />
+          <Text weight="medium">GoDX ID</Text>
+        </Flex>
+      }
+      footer={
+        <AuthFooter
+          product="GoDX ID"
+          terms="利用規約"
+          privacy="プライバシー"
+          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
+        />
+      }
+    >
+      <Flex direction="col" gap="lg">
+        <Text size="xs" tone="muted" mono>
+          1 / 4 · request · リセットリンクの発行を依頼する
+        </Text>
+        <Card>
+          <CardHeader>
+            <CardTitle level={1}>パスワードをリセット</CardTitle>
+            <CardDescription>
+              登録済みのメールアドレスにリセットリンクをお送りします。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <FormField id="recovery-email" label="メールアドレス" required>
+                <Input
+                  type="email"
+                  autoComplete="username"
+                  placeholder="you@example.com"
+                  value={email}
+                  onChange={(event) => setEmail(event.target.value)}
+                />
+              </FormField>
+              <Button fullWidth>リセットリンクを送信</Button>
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  サインインに戻る
+                </Button>
+                <Button variant="ghost" size="sm">
+                  サポートに連絡
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+
+        <Text size="xs" tone="muted" mono>
+          2 / 4 · sent · 送信済み（成功通知 + 再送クールダウン中は disabled）
+        </Text>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>メールを確認してください</CardTitle>
+            <CardDescription>
+              リセットリンクを送信しました。リンクの有効期限は 30 分です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <Alert tone="success">
+                <AlertTitle>{maskedEmail} に送信しました</AlertTitle>
+                <AlertDescription>
+                  メールが届かない場合は、迷惑メールフォルダもご確認ください。
+                </AlertDescription>
+              </Alert>
+              <Button fullWidth disabled>
+                メールを再送する（60 秒後）
+              </Button>
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  サインインに戻る
+                </Button>
+                <Button variant="ghost" size="sm">
+                  別のアドレスを使う
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+
+        <Text size="xs" tone="muted" mono>
+          3 / 4 · new-password · 新しいパスワードの設定（確認欄の不一致エラー）
+        </Text>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>新しいパスワードを設定</CardTitle>
+            <CardDescription>
+              他のサービスで使用していないパスワードを設定してください。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <FormField id="recovery-new-password" label="新しいパスワード" required>
+                <PasswordInput
+                  autoComplete="new-password"
+                  value={password}
+                  onChange={(event) => setPassword(event.target.value)}
+                />
+              </FormField>
+              <PasswordStrength value={password} />
+              <FormField
+                id="recovery-confirm-password"
+                label="新しいパスワード（確認）"
+                error="パスワードが一致しません。"
+                required
+              >
+                <PasswordInput
+                  autoComplete="new-password"
+                  value={confirmation}
+                  onChange={(event) => setConfirmation(event.target.value)}
+                />
+              </FormField>
+              <Button fullWidth>パスワードを更新</Button>
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  サインインに戻る
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+
+        <Text size="xs" tone="muted" mono>
+          4 / 4 · expired · リンクの有効期限切れ（destructive 通知）
+        </Text>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>リンクの有効期限が切れています</CardTitle>
+            <CardDescription>
+              セキュリティのため、リセットリンクは発行から 30 分で失効します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <Alert tone="destructive">
+                <AlertTitle>このリンクは使用できません</AlertTitle>
+                <AlertDescription>
+                  期限切れ、または既に使用されたリンクです。新しいリンクを発行してください。
+                </AlertDescription>
+              </Alert>
+              <Button fullWidth>新しいリンクを発行</Button>
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  サインインに戻る
+                </Button>
+                <Button variant="ghost" size="sm">
+                  サポートに連絡
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+      </Flex>
+    </AuthShell>
+  );
+}

package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.md

@@ -0,0 +1,27 @@
+---
+title: Long labels — ja / en / vi
+viewport: 1440x1500
+---
+
+## The panel width is a constant; the copy is not
+
+All three panels are 432px wide because the measure is
+`--auth-shell-recovery-card-max-width`, not a function of the copy. What changes with locale is the
+panel's **height** (the title and description wrap inside the content column) and whether the
+**fallback row** stays on one line.
+
+| Locale | Longest fallback pair                                   | Behaviour at 432px                         |
+| ------ | ------------------------------------------------------- | ------------------------------------------ |
+| ja     | リカバリコードを使う · パスキーで再試行する             | one row                                    |
+| en     | Use a recovery code · Try passkey again                 | one row                                    |
+| vi     | Dùng mã khôi phục dự phòng · Thử lại bằng khóa truy cập | one row → wraps first as the panel narrows |
+
+The reflow is **content-driven** (`Flex wrap`), never a media query and never a per-locale override,
+so a translation that grows after launch degrades gracefully instead of overflowing the panel.
+
+## What is deliberately not tuned per locale
+
+No locale gets a different measure, a different type ramp or a shortened label. If a translation is
+so long that the stacked fallback row makes the panel uncomfortable, the fix belongs to the
+consumer's copy, or to `--auth-shell-recovery-card-max-width` in the service theme — never to a
+locale-conditional branch in the markup.

package/docs/layout/auth-recovery/examples/wrapping-ja-en-vi.tsx

@@ -0,0 +1,156 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, InputOTP, InputOTPGroup, InputOTPSlot } from "@godxjp/ui/data-entry";
+import { Button, Logo, Text } from "@godxjp/ui/general";
+import { AuthFooter, AuthShell, AuthStack, Flex } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/**
+ * LONG-LABEL WRAPPING — the same MFA challenge panel in ja / en / vi at the identical 432px measure.
+ *
+ * Vietnamese is the stress case: its fallback labels are the longest of the three, so the fallback
+ * row is where the reflow shows. `Flex justify="between" wrap` keeps the two fallbacks on ONE row
+ * while they fit the panel and stacks them when they do not — the decision is made by the CONTENT,
+ * so it is right for every locale without a media query or a per-locale override.
+ *
+ * The title and description wrap inside the panel and grow its height; the panel width never
+ * changes, because 432px is a max-width owned by `--auth-shell-recovery-card-max-width` and not a
+ * function of the copy.
+ */
+export default function Demo() {
+  return (
+    <AuthShell
+      variant="canonical"
+      preset="account-recovery"
+      brand={
+        <Flex align="center" gap="sm">
+          <Logo mark="godx" tone="success" />
+          <Text weight="medium">GoDX ID</Text>
+        </Flex>
+      }
+      footer={
+        <AuthFooter
+          product="GoDX ID"
+          terms="利用規約"
+          privacy="プライバシー"
+          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
+        />
+      }
+    >
+      <Flex direction="col" gap="lg">
+        <Text size="xs" tone="muted" mono>
+          ja · 認証アプリのコード
+        </Text>
+        <Card>
+          <CardHeader>
+            <CardTitle level={1}>二段階認証コードを入力してください</CardTitle>
+            <CardDescription>
+              お使いの認証アプリに表示されている 6
+              桁の確認コードを入力すると、サインインが完了します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <FormField id="wrap-otp-ja" label="確認コード" required>
+                <InputOTP maxLength={6} pattern="^[0-9]+$">
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormField>
+              <Button fullWidth>コードを確認してサインイン</Button>
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  リカバリコードを使う
+                </Button>
+                <Button variant="ghost" size="sm">
+                  パスキーで再試行する
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+
+        <Text size="xs" tone="muted" mono>
+          en · authenticator app code
+        </Text>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Enter your two-factor authentication code</CardTitle>
+            <CardDescription>
+              Type the 6-digit verification code shown in your authenticator app to finish signing
+              in to your account.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <FormField id="wrap-otp-en" label="Verification code" required>
+                <InputOTP maxLength={6} pattern="^[0-9]+$">
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormField>
+              <Button fullWidth>Verify code and sign in</Button>
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  Use a recovery code
+                </Button>
+                <Button variant="ghost" size="sm">
+                  Try passkey again
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+
+        <Text size="xs" tone="muted" mono>
+          vi · mã ứng dụng xác thực（最長ラベル）
+        </Text>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Nhập mã xác thực hai lớp của bạn</CardTitle>
+            <CardDescription>
+              Nhập mã xác minh gồm 6 chữ số hiển thị trong ứng dụng xác thực của bạn để hoàn tất
+              việc đăng nhập vào tài khoản.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <FormField id="wrap-otp-vi" label="Mã xác minh" required>
+                <InputOTP maxLength={6} pattern="^[0-9]+$">
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormField>
+              <Button fullWidth>Xác minh mã và đăng nhập</Button>
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  Dùng mã khôi phục dự phòng
+                </Button>
+                <Button variant="ghost" size="sm">
+                  Thử lại bằng khóa truy cập
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+      </Flex>
+    </AuthShell>
+  );
+}

package/docs/layout/auth-recovery/index.md

@@ -0,0 +1,140 @@
+--- title: Overview viewport: 1440x900 ---
+
+# Password recovery & sign-in MFA challenge (SCR-008)
+
+A **composition pattern**, not a component. `@godxjp/ui` ships **no `PasswordRecoveryPanel`** and **no `MfaChallengePanel`**: both fail the Framework-Component Test. What the package owns is the **measure** (`AuthShell preset="account-recovery"`), the tokens, and this canonical body.
+
+This surface is **presentation only**. It defines no route, no reset semantics, no OTP verification, no recovery-code consumption, no passkey authentication and no permissions. Every string, every value and every action handler belongs to the consumer.
+
+## Gate 0 — why there is no `<RecoveryPanel state=… />` (gh#233)
+
+| #                                               | Verdict | Reasoning                                                                                                                                                                                                                                                                                                                                              |
+| ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| C1 universal                                    | ✅ pass | Every product with accounts ships password recovery and a second-factor challenge.                                                                                                                                                                                                                                                                     |
+| C2 owns reusable behaviour                      | ❌ FAIL | It owns **none**. The one piece of real behaviour in the whole surface — paste / arrow keys / caret / backspace across six slots — already belongs to `InputOTP`. Focus order is DOM order. "State" is not state: it is _which body the server told you to render_. This is the criterion's own FAIL example: "pure static layout/visual arrangement". |
+| C3 not expressible from existing primitives     | ❌ FAIL | It is expressible **today**: `Card` + `CardHeader`/`CardTitle`/`CardDescription` + `AuthStack` + `Alert` + `FormField` + `Input`/`PasswordInput`/`InputOTP` + `Button fullWidth` + `Flex`. The single real gap was the 432px measure — closed with a **token-owned preset**, per "add the token, not a component".                                     |
+| C4 single responsibility + controlled-vocab API | ❌ FAIL | A `state="request \| sent \| new-password \| expired"` prop is the "grab-bag with a bespoke, screen-shaped API" anti-pattern (the same call as `ErrorSurface`'s `mode`). It would also **lie**: `sent` renders no field, `new-password` renders two plus a strength meter, `passkey-failure` renders none. One prop, five incompatible bodies.         |
+| C5 fully token-themeable                        | ✅ pass | Every part is token-driven already; the new measure is three `--auth-shell-recovery-*` tokens.                                                                                                                                                                                                                                                         |
+| C6 earns the international contract             | ➖      | The copy is the consumer's `t()` catalog either way; the a11y contract is already owned by `FormField` / `InputOTP` / `Button`.                                                                                                                                                                                                                        |
+| C7 earns its bundle cost                        | ❌ FAIL | Two page-shaped blocks shipped to every consumer for screens each app renders once.                                                                                                                                                                                                                                                                    |
+
+A recovery panel is a measure, some slots and some copy.
+
+> **The state is not a prop — the state IS the body you render.** The server answers "we sent a
+> link" / "that link expired" / "wrong code, 4 attempts left", and the route renders the matching
+> body inside the same 432px panel. Nothing is reconstructed, because nothing was torn down.
+
+## What the package now owns
+
+`AuthShell preset="account-recovery"` — a named flow **measure**, orthogonal to `variant`:
+
+```tsx
+<AuthShell variant="canonical" preset="account-recovery" brand={…} footer={…}>
+  <Card>…the panel…</Card>
+</AuthShell>
+```
+
+| Token                                       | Default                 | Owns                                                                                                    |
+| ------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------- |
+| `--auth-shell-recovery-card-max-width`      | `27rem`                 | the **432px** SCR-008 panel measure, shared by both panels                                              |
+| `--auth-shell-recovery-main-padding`        | `1rem`                  | desktop/tablet page gutter                                                                              |
+| `--auth-shell-recovery-main-padding-mobile` | `0.9375rem`             | **15px** inline gutter at ≤30rem ⇒ panel `x=15, width=360` at 390                                       |
+| `--otp-slot-size`                           | `var(--control-height)` | the OTP slot box — widen the challenge row **without** re-scoping `--control-height` for the whole card |
+
+Backward compatibility is total: the canonical Login measure (`--auth-shell-canonical-card-max-width: 22.5rem` / 360px) and the un-preset shell (`24rem`) are untouched, `--otp-slot-size` defaults to the live `--control-height` tier so every existing OTP row renders identically, and `preset` remains optional with a `"default"` default.
+
+## The canonical panel anatomy (identical for all seven states)
+
+```tsx
+<Card>
+  <CardHeader>
+    {/* title + description sit INSIDE the bordered surface — this is the SCR-008 hierarchy.
+        Do NOT put AuthIdentity above the card here: it always renders the hosted mark. */}
+    <CardTitle level={1}>{t("mfa.title")}</CardTitle>
+    <CardDescription>{t("mfa.description")}</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <AuthStack>
+      {notice && <Alert tone="destructive">…</Alert>} {/* notice slot   */}
+      <FormField id="code" label={t("mfa.codeLabel")} error={error} required>
+        <InputOTP maxLength={6} pattern="^[0-9]+$" value={code} onChange={setCode}>
+          <InputOTPGroup>{/* six InputOTPSlot — ONE field, one focus stop */}</InputOTPGroup>
+        </InputOTP>
+      </FormField>
+      <Button fullWidth loading={pending} loadingText={t("common.verifying")}>
+        {t("mfa.verify")}
+      </Button>
+      {/* fallback slot — the two recovery affordances share one row, wrap when they must */}
+      <Flex justify="between" gap="sm" wrap>
+        <Button variant="ghost" size="sm">
+          {t("mfa.useRecoveryCode")}
+        </Button>
+        <Button variant="ghost" size="sm">
+          {t("mfa.retryPasskey")}
+        </Button>
+      </Flex>
+    </AuthStack>
+  </CardContent>
+</Card>
+```
+
+| Slot        | Built from                                       | Geometry owned by                                                                                                    |
+| ----------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| title       | `CardTitle`                                      | `--auth-shell-canonical-heading-size`, `--auth-shell-card-gap-compact`                                               |
+| description | `CardDescription`                                | `--auth-shell-card-gap-compact`, `--auth-shell-card-body-gap-compact`                                                |
+| fields      | `FormField` + `Input`/`PasswordInput`/`InputOTP` | `--auth-stack-gap`, `--auth-shell-field-label-*`, `--otp-slot-size`, the `--control-height` tier                     |
+| primary     | `Button fullWidth`                               | `--control-height` tier (never a literal height)                                                                     |
+| notice      | `Alert tone=…`                                   | `--alert-*`                                                                                                          |
+| fallback    | `Flex justify="between" gap="sm" wrap`           | `--space-*` via the gap scale; reflow is content-driven                                                              |
+| panel box   | `Card` inside the shell's card slot              | `--auth-shell-recovery-card-max-width`, `--auth-shell-compact-card-inset`, `--auth-shell-card-padding-block-compact` |
+
+## Seven states, one anatomy
+
+| Flow              | State             | Notice        | Fields                             | Primary                           |
+| ----------------- | ----------------- | ------------- | ---------------------------------- | --------------------------------- |
+| password recovery | `request`         | —             | email                              | send reset link                   |
+| password recovery | `sent`            | `success`     | —                                  | resend (disabled during cooldown) |
+| password recovery | `new-password`    | —             | new + confirm + `PasswordStrength` | update password                   |
+| password recovery | `expired`         | `destructive` | —                                  | request a new link                |
+| sign-in MFA       | `otp`             | —             | one 6-slot `InputOTP` row          | verify                            |
+| sign-in MFA       | `recovery-code`   | —             | one `Input`                        | verify                            |
+| sign-in MFA       | `passkey-failure` | `destructive` | —                                  | retry passkey                     |
+
+## Accessibility
+
+- **Focus order = DOM order**: code field → primary → fallback A → fallback B. No `tabindex` anywhere, no positive tabindex, no focus trap (this is a page, not a dialog). - **One field, not six.** `InputOTP` is a single focus stop that owns paste, arrows, backspace and the caret. Six `Input`s would break paste — the most common real MFA interaction. - **Errors** are `FormField error` ⇒ `aria-invalid` + `aria-errormessage` on the control and a `role="alert"` message.
+
+## Responsive contract
+
+| Width | Panel                                     | OTP row                       | Fallback row                                                |
+| ----- | ----------------------------------------- | ----------------------------- | ----------------------------------------------------------- |
+| 1440  | `432px`, centred, 16px page gutter        | one row, 6 × 36px = 216px     | one row                                                     |
+| 1024  | `432px`, centred, 16px page gutter        | one row, identical            | one row                                                     |
+| 390   | `360px` (`x=15`), 15px inline page gutter | one row, identical, no scroll | one row; stacks when labels exceed the 310px content column |
+
+**The supplied 390 reference image is not a valid source.** It is a desktop 2×2 composite that overflows and crops horizontally; it shows no mobile route and no reflow. The 390 row above is a **decided contract**, documented in the mobile example and pinned by tests — not a trace of that image. See **Examples → Viewport 390×844**.
+
+## Measured in Chromium (headless, `deviceScaleFactor: 1`)
+
+Real `getBoundingClientRect()` numbers from these pages, not estimates:
+
+| Viewport | Panel `x` / `w`    | Page gutter | Content column | OTP row (6 slots) | Primary action | Fallback row                           | `scrollWidth`      |
+| -------- | ------------------ | ----------- | -------------- | ----------------- | -------------- | -------------------------------------- | ------------------ |
+| 1440×900 | `504` / **432**    | 16px        | 382px          | **216px** (6×36)  | 382×36         | one row                                | 1440 (no overflow) |
+| 1024×900 | `296` / **432**    | 16px        | 382px          | 216px (6×36)      | 382×36         | one row                                | 1024 (no overflow) |
+| 390×844  | **`15`** / **360** | 15px        | 310px          | 216px (6×36)      | 310×36         | one row (ja) → stacks on longer labels | 390 (no overflow)  |
+
+At 390 all three wrap. The reflow is purely content-driven — there is no locale branch and no media query.
+
+RTL (`dir="rtl"`, 1440): the panel stays `x=504, w=432`; the OTP slots mirror (slot 1 is the right-most at `x=875`, running to `x=695`) with `border-inline-start` and `border-start-start-radius` still on the logical first slot; the fallback row's reading order flips; `scrollWidth` stays 1440.
+
+Focus order, driven with real `Tab` presses from the OTP field: `input.ui-otp-input` (accessible name "確認コード") → 確認する → リカバリコードを使う → パスキーで再試行 → the footer locale control. Typing `482915` into that **single** focus stop fills all six slots. Zero positive `tabindex` on the page. axe-core (wcag2a/2aa/21a/21aa/22aa) reports **0 violations** on all five pages at 1440 and 390, with a clean console.
+
+> **Width is a contract; height is content.** The issue's artboard heights (request `h=248`, MFA
+> `h=324`) are measurements of that artboard's copy. The panels here measure `h=275.5` with the
+> Japanese copy above and `h=332.5` once a fallback row wraps. Pinning a panel height would clip a
+> longer translation, so the pattern owns the measure and lets the panel grow.
+
+## Anti-patterns
+
+- ❌ `TwoFactorSetup` for a sign-in challenge — that is the **enrollment** dialog (QR / manual key / recovery output). A challenge has no secret to reveal and no dialog to dismiss. - ❌ `AuthIdentity` above the panel on SCR-008 — it always renders the hosted mark, and the canonical hierarchy puts the heading **inside** the bordered surface. - ❌ Six `Input`s for the OTP row — one `InputOTP`. - ❌ A page-local `--auth-shell-card-max-width` override, a `.recovery-panel { width: 432px }` class or any consumer media query — that is exactly the geometry this preset took over. - ❌ Re-scoping `--control-height` on the card to widen the OTP slots — that resizes the button and every input too. Use `--otp-slot-size`. - ❌ Two primary actions.

package/docs/layout/auth-recovery/index.tsx

@@ -0,0 +1,96 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, InputOTP, InputOTPGroup, InputOTPSlot } from "@godxjp/ui/data-entry";
+import { Button, Logo, Reveal, Text } from "@godxjp/ui/general";
+import { AuthFooter, AuthShell, AuthStack, Flex } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/**
+ * SIGN-IN MFA CHALLENGE (SCR-008) — a COMPOSITION PATTERN, not a component.
+ *
+ * `@godxjp/ui` ships NO MfaChallengePanel / PasswordRecoveryPanel: both failed the
+ * Framework-Component Test (docs/COMPOSITION-VS-COMPONENT.md) — they own no behaviour and are
+ * expressible today from `Card` + `AuthStack` + `FormField` + `InputOTP` + `Button` + `Alert`.
+ * The only real gap was the 432px SCR-008 panel MEASURE, which is now a token-owned AuthShell
+ * preset: `preset="account-recovery"`. Nothing on this page sets a width, an inset or a colour.
+ *
+ * THE CANONICAL PANEL ANATOMY (identical for all seven states — see the Examples):
+ *   Card > CardHeader(CardTitle + CardDescription)      ← title + description INSIDE the surface
+ *        > CardContent > AuthStack
+ *            [notice]        Alert, when the state has one
+ *            [fields]        FormField(s) — here ONE 6-slot InputOTP row
+ *            [primary]       Button fullWidth — spans the panel
+ *            [fallback]      Flex justify="between" wrap — the two fallbacks share ONE row
+ *
+ * There is deliberately no `AuthIdentity` above the card: the SCR-008 hierarchy puts the heading
+ * INSIDE the bordered surface, and `AuthIdentity` always renders the hosted mark above it.
+ * `TwoFactorSetup` is the ENROLLMENT dialog (QR / manual key / recovery output) and must never be
+ * used for this sign-in challenge.
+ *
+ * FOCUS ORDER is DOM order: code field → verify → recovery-code fallback → passkey fallback.
+ * Verify at 1440x900 · 1024x900 · 390x844 (the mobile contract is documented in the Overview —
+ * the supplied 390 canonical reference is a cropped desktop composite and is NOT a valid source).
+ */
+export default function Demo() {
+  const [code, setCode] = useState("");
+
+  return (
+    <AuthShell
+      variant="canonical"
+      preset="account-recovery"
+      brand={
+        <Flex align="center" gap="sm">
+          <Logo mark="godx" tone="success" />
+          <Text weight="medium">GoDX ID</Text>
+        </Flex>
+      }
+      footer={
+        <AuthFooter
+          product="GoDX ID"
+          terms="利用規約"
+          privacy="プライバシー"
+          locale={<AppSettingPicker kind="locale" appearance="labeled" compact />}
+        />
+      }
+    >
+      <Reveal>
+        <Card>
+          <CardHeader>
+            <CardTitle level={1}>二段階認証</CardTitle>
+            <CardDescription>
+              認証アプリに表示されている 6 桁のコードを入力してください。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuthStack>
+              <FormField id="mfa-code" label="確認コード" required>
+                <InputOTP maxLength={6} pattern="^[0-9]+$" value={code} onChange={setCode}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormField>
+              <Button fullWidth>確認する</Button>
+              {/* FALLBACK ROW — the two recovery affordances share one horizontal row and wrap to
+                  a stack only when the localized labels no longer fit the panel. */}
+              <Flex justify="between" gap="sm" wrap>
+                <Button variant="ghost" size="sm">
+                  リカバリコードを使う
+                </Button>
+                <Button variant="ghost" size="sm">
+                  パスキーで再試行
+                </Button>
+              </Flex>
+            </AuthStack>
+          </CardContent>
+        </Card>
+      </Reveal>
+    </AuthShell>
+  );
+}