@godxjp/ui 32.5.0 → 32.7.0

package/agent/patterns.json

@@ -1,6 +1,6 @@
 [
   {
-    "code": "// ───────────────────────────────────────────────────────────────────────\n// 0) ★ MOST COMMON: <Card> body has NO padding (content is flush against the edges)\n//    Cause: the bare <Card> has ZERO inner padding — it MUST contain <CardContent>.\n//    Don't hand-roll padding with className=\"p-4\" on the Card either.\n// ❌  <Card><Flex direction=\"col\" gap=\"md\">…fields…</Flex></Card>   // flush, no padding\n// ❌  <Card className=\"p-4\">…fields…</Card>                          // hand-rolled padding\n// ✅  <Card><CardContent><Flex direction=\"col\" gap=\"md\">…fields…</Flex></CardContent></Card>\n//    Titles → <CardHeader><CardTitle>. Only go flush deliberately for a full-bleed table:\n// ✅  <Card><CardContent flush><DataTable/></CardContent></Card>\n//    GENERAL RULE — compose godx-ui primitives FULLY; never hand-roll what one ships:\n//      padding → CardContent (not p-4) · controls → Input/Select/Button (not raw <input>/<select>/<button>)\n//      vertical spacing → Flex direction=\"col\" gap (not space-y-*) · empty rows → DataTable's built-in\n//      empty / <EmptyState> (not a custom data.length===0 guard). If a primitive exists, USE it.\n\n// 1) StatCard shows a DOUBLE border (too thick)\n//    Cause: StatCard IS already a bordered Card. Don't wrap it.\n// ❌  <Card><CardContent><StatCard label=\"x\" value=\"1\" /></CardContent></Card>\n// ✅  <ResponsiveGrid columns={4}><StatCard label=\"x\" value=\"1\" /></ResponsiveGrid>\n//    Need a section title? Use a heading, NOT a Card:\n// ✅  <Flex direction=\"col\" gap=\"sm\"><div className=\"text-sm font-medium\">KPI</div>\n//        <ResponsiveGrid columns={4}><StatCard .../></ResponsiveGrid></Flex>\n\n// 2) Badge renders grey with a ○ (no colour) for localized/tier labels\n//    Cause: it auto-maps only English lifecycle keys.\n// ❌  <Badge status=\"プレミアム\" />\n// ✅  <Badge status=\"プレミアム\" tone=\"success\" icon={null} />   // tier → pill, no icon\n// ✅  <Badge status=\"active\">公開中</Badge>                       // lifecycle → keep icon\n\n// 3) Table text collapses to one char per line, or a chip wraps\n// ✅  give long columns a width:  { key: \"name\", header: \"氏名\", width: \"w-64\" }\n//    (cells + chips are pinned white-space: nowrap by the library.)\n\n// 4) Empty (icon/action) column header shows a blank grey block\n// ✅  header: \"\" renders a transparent cell — leave it empty, don't inject a space.\n\n// 5) DataTable columns are crushed / squeezed\n//    Cause: the table is nested in a narrow grid column.\n// ❌  <ResponsiveGrid columns={3}><div className=\"lg:col-span-2\"><Card><DataTable/></Card></div></ResponsiveGrid>\n// ✅  Table gets its OWN full-width row: <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 6) Toolbar (filter bar) has no padding (sticks to the edge)\n//    Cause: it's inside CardContent flush (flush strips padding — that's for tables).\n// ❌  <Card><CardContent flush><Toolbar/><DataTable/></CardContent></Card>\n// ✅  <Toolbar/>  then  <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 7) Sidebar footer looks washed-out / off-design\n//    Cause: raw opacity-*/text-[11px]. Use semantic tokens.\n// ✅  <div className=\"text-muted-foreground text-xs\">\n//        <div className=\"text-foreground font-medium\">{name}</div><div>{role}</div></div>\n\n// 8) Inertia: \"Objects are not valid as a React child {errors, auth, …}\"\n//    Cause: persistent layout passed as a render fn. Use the ARRAY form.\n// ❌  Page.layout = (page) => <Layout>{page}</Layout>\n// ✅  Page.layout = [Layout]            // Layout is ({children}) => ...\n\n// 9) Inertia v3 hydration mismatch (\"server rendered text didn't match the client\")\n//    Cause: Math.random()/argless new Date() during render (SSR ≠ client).\n// ✅  seed deterministically by index, or compute in an event handler.\n\n// 10) Hide a column on mobile / sign-aware KPI delta\n// ✅  columns: [{ key: \"email\", header: \"メール\", hiddenOnMobile: true }]\n// ✅  <StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" />   // + green / - red; inverse flips",
+    "code": "// ───────────────────────────────────────────────────────────────────────\n// 0) ★ MOST COMMON: <Card> body has NO padding (content is flush against the edges)\n//    Cause: the bare <Card> has ZERO inner padding — it MUST contain <CardContent>.\n//    Don't hand-roll padding with className=\"p-4\" on the Card either.\n// ❌  <Card><Flex direction=\"col\" gap=\"md\">…fields…</Flex></Card>   // flush, no padding\n// ❌  <Card className=\"p-4\">…fields…</Card>                          // hand-rolled padding\n// ✅  <Card><CardContent><Flex direction=\"col\" gap=\"md\">…fields…</Flex></CardContent></Card>\n//    Titles → <CardHeader><CardTitle>. Only go flush deliberately for a full-bleed table:\n// ✅  <Card><CardContent flush><DataTable/></CardContent></Card>\n//    GENERAL RULE — compose godx-ui primitives FULLY; never hand-roll what one ships:\n//      padding → CardContent (not p-4) · controls → Input/Select/Button (not raw <input>/<select>/<button>)\n//      vertical spacing → Flex direction=\"col\" gap (not space-y-*) · empty rows → DataTable's built-in\n//      empty / <EmptyState> (not a custom data.length===0 guard). If a primitive exists, USE it.\n\n// 1) StatCard shows a DOUBLE border (too thick)\n//    Cause: StatCard IS already a bordered Card. Don't wrap it.\n// ❌  <Card><CardContent><StatCard label=\"x\" value=\"1\" /></CardContent></Card>\n// ✅  dashboard only, with comparison/trend:\n//     <ResponsiveGrid columns={4}><StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" /></ResponsiveGrid>\n//    A list or detail page has NO StatCard row — a row count is not a KPI (Pagination showTotal).\n\n// 2) Badge renders grey with a ○ (no colour) for localized/tier labels\n//    Cause: it auto-maps only English lifecycle keys.\n// ✅  <Badge status=\"active\">公開中</Badge>                       // lifecycle → keep icon\n// ✅  <Badge status=\"プレミアム\" tone=\"neutral\" icon={null} />   // tier → ONE neutral tone\n//    Colour is for status only; a tier/category/scope is plain text or a neutral pill.\n\n// 3) Table text collapses to one char per line, or a chip wraps\n// ✅  give long columns a width:  { key: \"name\", header: \"氏名\", width: \"w-64\" }\n//    (cells + chips are pinned white-space: nowrap by the library.)\n\n// 4) Empty (icon/action) column header shows a blank grey block\n// ✅  header: \"\" renders a transparent cell — leave it empty, don't inject a space.\n\n// 5) DataTable columns are crushed / squeezed\n//    Cause: the table is nested in a narrow grid column.\n// ❌  <ResponsiveGrid columns={3}><div className=\"lg:col-span-2\"><Card><DataTable/></Card></div></ResponsiveGrid>\n// ✅  Table gets its OWN full-width row: <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 6) Toolbar (filter bar) has no padding (sticks to the edge)\n//    Cause: it's inside CardContent flush (flush strips padding — that's for tables).\n// ❌  <Card><CardContent flush><Toolbar/><DataTable/></CardContent></Card>\n// ✅  <Toolbar/>  then  <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 7) Sidebar footer looks washed-out / off-design\n//    Cause: raw opacity-*/text-[11px]. Use semantic tokens.\n// ✅  <div className=\"text-muted-foreground text-xs\">\n//        <div className=\"text-foreground font-medium\">{name}</div><div>{role}</div></div>\n\n// 8) Inertia: \"Objects are not valid as a React child {errors, auth, …}\"\n//    Cause: persistent layout passed as a render fn. Use the ARRAY form.\n// ❌  Page.layout = (page) => <Layout>{page}</Layout>\n// ✅  Page.layout = [Layout]            // Layout is ({children}) => ...\n\n// 9) Inertia v3 hydration mismatch (\"server rendered text didn't match the client\")\n//    Cause: Math.random()/argless new Date() during render (SSR ≠ client).\n// ✅  seed deterministically by index, or compute in an event handler.\n\n// 10) Hide a column on mobile / sign-aware KPI delta\n// ✅  columns: [{ key: \"email\", header: \"メール\", hiddenOnMobile: true }]\n// ✅  <StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" />   // + green / - red; inverse flips",
     "name": "common-fixes",
     "tagline": "Fix the most common @godxjp/ui consumer mistakes & visual bugs (StatCard double-border, grey Badge, crushed/empty table headers, washed-out sidebar footer, Inertia layout crash, SSR hydration). Before → after.",
     "tags": [
@@ -55,9 +55,9 @@
       "preferences-rows",
       "account-identity"
     ],
-    "code": "// Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a \"SettingsSection\"/\"SettingsRow\"/\n// \"DangerZone\" FAILS the Framework-Component Test — it owns no behavior (C2), is fully\n// expressible from existing primitives + tokens (C3), and its API would be screen-shaped (C4).\n// So compose it. Live reference screen: the \"settings account sections\" page in the preview\n// showcase gallery (docs/showcase/, served at /showcase/<id>).\nimport { ExternalLink, ShieldAlert } from \"lucide-react\";\nimport { Button, Text } from \"@godxjp/ui/general\";\nimport {\n  Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,\n  Descriptions, ListRow, StatusBadge,\n} from \"@godxjp/ui/data-display\";\nimport { Switch } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog } from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// The sections stack in ONE bounded column. The gap between sibling Cards belongs to that stack,\n// never to the cards themselves — four bare <Card>s in a row is what the audit means by\n// sibling-cards-need-flex, and it is the same rule the DO list at the bottom of this file states.\n<Flex direction=\"col\" gap=\"lg\" className=\"max-w-3xl\">\n\n// 1) IDENTITY — metadata is a description list, so it is Descriptions (a real <dl>), never a\n//    two-column flex of styled divs. One header action goes in CardAction.\n<Card>\n  <CardHeader>\n    <CardTitle level={2}>アカウント情報</CardTitle>\n    <CardDescription>請求書・監査ログに表示される氏名とメールアドレスです。</CardDescription>\n    <CardAction><Button variant=\"outline\" size=\"sm\">編集</Button></CardAction>\n  </CardHeader>\n  <CardContent>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"表示名\">藤原 慧</Descriptions.Item>\n      <Descriptions.Item label=\"メールアドレス\">satoshi@example.co.jp</Descriptions.Item>\n      <Descriptions.Item label=\"従業員番号\" mono>EMP-1042-JP</Descriptions.Item>\n      <Descriptions.Item label=\"利用開始日\">\n        {/* ISO-8601 in the machine attribute, Intl for the human text. */}\n        <time dateTime=\"2023-04-01\">\n          {new Intl.DateTimeFormat(locale, { dateStyle: \"long\", timeZone: \"UTC\" }).format(since)}\n        </time>\n      </Descriptions.Item>\n    </Descriptions>\n  </CardContent>\n</Card>\n\n// 2) PREFERENCE ROWS — THE setting row pattern: CardContent flush + ListRow, whose `trailing`\n//    slot IS the control. align=\"start\" + overflow=\"wrap\" keep long JA/VI titles readable and let\n//    the control drop to its own line at 390px (--list-row-body-min-width).\n// ⛔ NEVER: <div className=\"flex items-center justify-between border-b py-3\">…</div>\n<Card>\n  <CardHeader><CardTitle level={2}>通知の環境設定</CardTitle></CardHeader>\n  <CardContent flush>\n    <ListRow\n      align=\"start\"\n      overflow=\"wrap\"\n      title={<label htmlFor=\"pref-digest\">週次サマリーをメールで受け取る</label>}\n      description=\"毎週月曜日の朝に未処理の承認をまとめて送信します。\"\n      trailing={<Switch id=\"pref-digest\" checked={digest} onCheckedChange={setDigest} />}\n    />\n  </CardContent>\n</Card>\n\n// 3) BILLING HANDOFF — the subscription state is a CANONICAL StatusBadge; the tone + icon come\n//    from the library's shared domain-status map, so a page NEVER keeps its own status→colour\n//    table. Money/seats/dates go through Intl (ISO 4217 minor units come from the formatter).\n// ⛔ NEVER: const STATUS_COLORS = { past_due: \"red\", trialing: \"blue\" }\n<Card>\n  <CardHeader>\n    <CardTitle level={2}>請求とサブスクリプション</CardTitle>\n    <CardDescription>支払い方法と請求書は外部の請求ポータルで管理します。</CardDescription>\n    <CardAction><StatusBadge status=\"past_due\" variant=\"outline\" /></CardAction>\n  </CardHeader>\n  <CardContent>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"契約プラン\">ビジネス（年額）</Descriptions.Item>\n      <Descriptions.Item label=\"次回請求予定額\">\n        {new Intl.NumberFormat(locale, { style: \"currency\", currency: \"JPY\" }).format(1536000)}\n      </Descriptions.Item>\n    </Descriptions>\n  </CardContent>\n  <CardFooter separated>\n    <Button variant=\"outline\" asChild>\n      <a href={portalUrl} target=\"_blank\" rel=\"noreferrer\">\n        <ExternalLink aria-hidden=\"true\" />\n        請求ポータルを開く\n        {/* Never signal \"leaves the app\" with the icon alone (WCAG 1.4.1 / 2.4.4). */}\n        <span className=\"sr-only\">（新しいタブで開きます）</span>\n      </a>\n    </Button>\n  </CardFooter>\n</Card>\n\n// 4) DANGER ZONE — Card accent=\"destructive\" paints the semantic leading rail from --destructive\n//    through the existing --card-accent-rail-width token. NO new component, NO new token, and no\n//    baked red. Colour never carries the meaning alone: the heading says \"irreversible\", each row\n//    says what is lost, and delete is gated behind type-to-confirm friction.\n<Card accent=\"destructive\">\n  <CardHeader>\n    <CardTitle level={2} className=\"text-destructive\">取り消せない操作</CardTitle>\n    <CardDescription>以下の操作は元に戻せません。</CardDescription>\n  </CardHeader>\n  <CardContent flush>\n    <ListRow\n      align=\"start\"\n      overflow=\"wrap\"\n      leading={<ShieldAlert className=\"text-destructive size-4\" aria-hidden=\"true\" />}\n      title=\"ワークスペースと全データを完全に削除する\"\n      description=\"勤怠記録・申請履歴・監査ログがすべて削除されます。\"\n      trailing={\n        <Button variant=\"destructive\" size=\"sm\" onClick={() => setConfirmOpen(true)}>削除</Button>\n      }\n    />\n  </CardContent>\n</Card>\n\n</Flex>\n\n<AlertDialog\n  open={confirmOpen}\n  onOpenChange={setConfirmOpen}\n  title=\"ワークスペースを完全に削除しますか？\"\n  description=\"この操作は取り消せません。確認のため識別子を入力してください。\"\n  challenge={workspaceSlug}\n  variant=\"destructive\"\n  onConfirm={destroy}\n/>\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Sections stack in a bounded column: <Flex direction=\"col\" gap=\"lg\" className=\"max-w-3xl\">.\n// ✅ Every setting row is a ListRow; its control lives in `trailing`, and the visible row title is\n//    a <label htmlFor> pointing at that control so the switch/select is named by what you can read.\n// ⛔ Do NOT add SettingsSection / SettingsRow / DangerZone to src/components — they fail Gate 0.\n// ⛔ Do NOT wrap the WHOLE settings page in one Card (route-backed local nav owns the IA — see the\n//    responsive settings page pattern); each block is its own Card.\n// ⛔ Do NOT hand-roll padding (p-4) on a Card, a status colour map, or a <dl> replacement.",
+    "code": "// Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a \"SettingsSection\"/\"SettingsRow\"/\"DangerZone\"\n// FAILS the Framework-Component Test, so compose it. Reference screen: get_exemplar(\"settings\")\n// (docs/showcase/settings-account-sections.tsx). Composition rules: DESIGN.md → Admin Screen Anatomy.\nimport { ExternalLink } from \"lucide-react\";\nimport { Button, Heading } from \"@godxjp/ui/general\";\nimport { Card, CardContent, Descriptions, ListRow, StatusBadge } from \"@godxjp/ui/data-display\";\nimport { Switch } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog } from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// Sections are a heading + spacing: the SECTION step (gap=\"xl\") is larger than the ITEM step\n// (gap=\"sm\"), which is what carries the hierarchy — not a box around every block.\n<Flex direction=\"col\" gap=\"xl\">\n\n  {/* 1) IDENTITY — a section, not a Card. Metadata is Descriptions (a real <dl>). */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Flex justify=\"between\" align=\"center\">\n      <Heading level={2}>アカウント情報</Heading>\n      <Button variant=\"outline\" size=\"sm\">編集</Button>\n    </Flex>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"表示名\">藤原 慧</Descriptions.Item>\n      <Descriptions.Item label=\"メールアドレス\">satoshi@example.co.jp</Descriptions.Item>\n      <Descriptions.Item label=\"従業員番号\" mono>EMP-1042-JP</Descriptions.Item>\n      <Descriptions.Item label=\"利用開始日\">\n        <time dateTime=\"2023-04-01\">\n          {new Intl.DateTimeFormat(locale, { dateStyle: \"long\", timeZone: \"UTC\" }).format(since)}\n        </time>\n      </Descriptions.Item>\n    </Descriptions>\n  </Flex>\n\n  {/* 2) PREFERENCE ROWS — a list of setting rows IS a real boundary, so it gets one Card:\n       CardContent flush + ListRow, whose trailing slot is the control. The visible title is the\n       control's <label htmlFor>. NEVER a flex div with border-b rows. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Heading level={2}>通知の環境設定</Heading>\n    <Card>\n      <CardContent flush>\n        <ListRow\n          align=\"start\"\n          overflow=\"wrap\"\n          title={<label htmlFor=\"pref-digest\">週次サマリーをメールで受け取る</label>}\n          description=\"毎週月曜日の朝に未処理の承認をまとめて送信します。\"\n          trailing={<Switch id=\"pref-digest\" checked={digest} onCheckedChange={setDigest} />}\n        />\n      </CardContent>\n    </Card>\n  </Flex>\n\n  {/* 3) BILLING HANDOFF — a section. The state is a canonical StatusBadge (never a page-local\n       status→colour map); money through Intl. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Flex justify=\"between\" align=\"center\">\n      <Heading level={2}>請求とサブスクリプション</Heading>\n      <StatusBadge status=\"past_due\" variant=\"outline\" />\n    </Flex>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"契約プラン\">ビジネス（年額）</Descriptions.Item>\n      <Descriptions.Item label=\"次回請求予定額\">\n        {new Intl.NumberFormat(locale, { style: \"currency\", currency: \"JPY\" }).format(1536000)}\n      </Descriptions.Item>\n    </Descriptions>\n    <div>\n      <Button variant=\"outline\" asChild>\n        <a href={portalUrl} target=\"_blank\" rel=\"noreferrer\">\n          <ExternalLink aria-hidden=\"true\" />\n          請求ポータルを開く\n          <span className=\"sr-only\">（新しいタブで開きます）</span>\n        </a>\n      </Button>\n    </div>\n  </Flex>\n\n  {/* 4) DANGER ZONE — a real boundary: Card accent=\"destructive\" (the rail comes from\n       --destructive). The heading and each row say what is lost; no decorative icon. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Heading level={2}>取り消せない操作</Heading>\n    <Card accent=\"destructive\">\n      <CardContent flush>\n        <ListRow\n          align=\"start\"\n          overflow=\"wrap\"\n          title=\"ワークスペースと全データを完全に削除する\"\n          description=\"勤怠記録・申請履歴・監査ログがすべて削除されます。\"\n          trailing={<Button variant=\"destructive\" size=\"sm\" onClick={() => setConfirmOpen(true)}>削除</Button>}\n        />\n      </CardContent>\n    </Card>\n  </Flex>\n</Flex>\n\n<AlertDialog\n  open={confirmOpen}\n  onOpenChange={setConfirmOpen}\n  title=\"ワークスペースを完全に削除しますか？\"\n  description=\"この操作は取り消せません。確認のため識別子を入力してください。\"\n  challenge={workspaceSlug}\n  variant=\"destructive\"\n  onConfirm={destroy}\n/>\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Section step > item step (gap=\"xl\" between sections, gap=\"sm\" inside one).\n// ✅ A Card only where there is a real boundary: a list of setting rows, the danger zone.\n// ✅ Every setting row is a ListRow; its control lives in `trailing`, titled by <label htmlFor>.\n// ⛔ Do NOT add SettingsSection / SettingsRow / DangerZone to src/components — they fail Gate 0.\n// ⛔ Do NOT give every block Card + CardHeader + CardTitle + CardDescription (ui-audit card-per-section).\n// ⛔ Do NOT hand-roll padding (p-4), a status colour map, or a <dl> replacement.",
     "name": "settings-section-rows",
-    "tagline": "The four canonical settings BLOCKS — identity · preference rows · billing handoff · danger zone — composed from Card + ListRow + Descriptions + StatusBadge + AlertDialog. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
+    "tagline": "The four canonical settings blocks — identity · preference rows · billing handoff · danger zone. Identity and billing are SECTIONS (Heading + Descriptions, no surface); preference rows and the danger zone are Cards because they are real boundaries. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
     "tags": [
       "settings",
       "account",
@@ -87,9 +87,9 @@
     ]
   },
   {
-    "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}",
+    "code": "import { AlertDialog, toast } from \"@godxjp/ui/feedback\";\n\n// The preset covers a typed challenge: confirm stays disabled until the input equals `slug`.\nexport function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolean; onOpenChange: (v: boolean) => void; slug: string }) {\n  return (\n    <AlertDialog\n      open={open}\n      onOpenChange={onOpenChange}\n      title=\"プロジェクトを削除\"\n      description={`この操作は取り消せません。確認のためプロジェクト名 \"${slug}\" と入力してください。`}\n      challenge={slug}\n      confirmLabel=\"完全に削除\"\n      onConfirm={() => {\n        toast.success(\"削除しました\");\n        onOpenChange(false);\n      }}\n    />\n  );\n}",
     "name": "confirm-destructive",
-    "tagline": "Type-to-confirm destructive dialog — AlertDialogRoot + Input gate + toast (real @godxjp/ui API).",
+    "tagline": "Type-to-confirm destructive dialog — the AlertDialog PRESET with `challenge` (the compound AlertDialog* parts are the older way in; a body the preset does not cover is Dialog variant=\"destructive\").",
     "tags": [
       "dialog",
       "confirm",
@@ -151,9 +151,9 @@
     ]
   },
   {
-    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { useMemo, useState } from \"react\"\nimport { PageContainer, ResponsiveGrid, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, StatCard, DataTable, EmptyState, Badge, type ColumnDef } from \"@godxjp/ui/data-display\"\nimport { SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\"\nimport { Toolbar, ToolbarGroup, Pagination } from \"@godxjp/ui/navigation\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\" // see \"inertia-persistent-layout\"\n\ntype Coupon = { id: string; name: string; status: string; scope: string; validFrom: string; validTo: string; usage: number }\nconst PAGE_SIZE = 10\n\nfunction Coupons({ coupons }: { coupons: Coupon[] }) {\n  const [q, setQ] = useState(\"\")\n  const [status, setStatus] = useState(\"all\")\n  const [page, setPage] = useState(1)\n\n  const filtered = useMemo(() => coupons.filter((c) => {\n    if (q && !c.name.toLowerCase().includes(q.toLowerCase())) return false\n    if (status !== \"all\" && c.status !== status) return false\n    return true\n  }), [coupons, q, status])\n  const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)\n\n  // ColumnDef = { key, header, render?, align?: \"left\"|\"center\"|\"right\", sortable?, width? }\n  const columns: ColumnDef<Coupon>[] = [\n    { key: \"name\", header: \"クーポン名\", render: (c) => <span className=\"font-medium\">{c.name}</span> },\n    { key: \"scope\", header: \"スコープ\", render: (c) => <Badge status={c.scope} tone=\"info\" icon={null} /> },\n    { key: \"status\", header: \"ステータス\", render: (c) => <Badge status={c.status} /> },\n    { key: \"valid\", header: \"有効期間\", render: (c) => `${formatDate(c.validFrom)} 〜 ${formatDate(c.validTo)}` },\n    { key: \"usage\", header: \"利用数\", align: \"right\", render: (c) => c.usage.toLocaleString() },\n  ]\n\n  return (\n    <>\n      <Head title=\"クーポン管理\" />\n      {/* RULE: every page wraps in PageContainer; vertical rhythm via Flex direction=\"col\"/ResponsiveGrid, never p-*/gap-* */}\n      <PageContainer title=\"クーポン管理\" subtitle=\"配信中のクーポン一覧\">\n        <Flex direction=\"col\" gap=\"lg\">\n          <ResponsiveGrid columns={3}>\n            <StatCard label=\"公開中\" value={coupons.filter((c) => c.status === \"公開中\").length} />\n            <StatCard label=\"総利用数\" value={coupons.reduce((s, c) => s + c.usage, 0).toLocaleString()} />\n            <StatCard label=\"件数\" value={coupons.length} />\n          </ResponsiveGrid>\n\n          {/* Toolbar is the filter-bar primitive (standalone, above the table surface). */}\n          <Toolbar hasActiveFilters={q !== \"\" || status !== \"all\"} onClear={() => { setQ(\"\"); setStatus(\"all\"); setPage(1) }}>\n            {/* SearchInput is value + onSearch(v) — NOT onChange */}\n            <SearchInput placeholder=\"クーポン名で検索\" value={q} onSearch={(v) => { setQ(v); setPage(1) }} />\n            <ToolbarGroup label=\"ステータス\">\n              <Select value={status} onValueChange={(v) => { setStatus(v); setPage(1) }}>\n                <SelectTrigger><SelectValue /></SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">全ステータス</SelectItem>\n                  <SelectItem value=\"公開中\">公開中</SelectItem>\n                  <SelectItem value=\"下書き\">下書き</SelectItem>\n                </SelectContent>\n              </Select>\n            </ToolbarGroup>\n          </Toolbar>\n\n          <Card>\n            <CardContent flush>\n              {filtered.length === 0\n                ? <EmptyState title=\"該当するクーポンがありません\" description=\"検索条件を変更してください。\" />\n                : <DataTable data={paged} columns={columns} getRowId={(c) => c.id} onRowClick={(c) => router.visit(`/coupons/${c.id}`)} />}\n            </CardContent>\n          </Card>\n\n          {/* Pagination ONLY for real multi-page data — hide it while empty or single-page. */}\n          {filtered.length > PAGE_SIZE && (\n            <Pagination value={page} total={filtered.length} pageSize={PAGE_SIZE} showTotal onValueChange={(p) => setPage(p)} />\n          )}\n        </Flex>\n      </PageContainer>\n    </>\n  )\n}\n\nCoupons.layout = withCrmLayout\nexport default Coupons",
+    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { useMemo, useState } from \"react\"\nimport { PageContainer, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, DataTable, EmptyState, Badge, type ColumnDef } from \"@godxjp/ui/data-display\"\nimport { SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\"\nimport { Toolbar, ToolbarGroup, Pagination } from \"@godxjp/ui/navigation\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\" // see \"inertia-persistent-layout\"\n\ntype Coupon = { id: string; name: string; status: string; scope: string; validFrom: string; validTo: string; usage: number }\nconst PAGE_SIZE = 10\n\nfunction Coupons({ coupons }: { coupons: Coupon[] }) {\n  const [q, setQ] = useState(\"\")\n  const [status, setStatus] = useState(\"all\")\n  const [page, setPage] = useState(1)\n\n  const filtered = useMemo(() => coupons.filter((c) => {\n    if (q && !c.name.toLowerCase().includes(q.toLowerCase())) return false\n    if (status !== \"all\" && c.status !== status) return false\n    return true\n  }), [coupons, q, status])\n  const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)\n\n  // ColumnDef = { key, header, render?, align?: \"left\"|\"center\"|\"right\", sortable?, width? }\n  const columns: ColumnDef<Coupon>[] = [\n    { key: \"name\", header: \"クーポン名\", render: (c) => <span className=\"font-medium\">{c.name}</span> },\n    { key: \"scope\", header: \"スコープ\" }, // a category is plain text; Badge is for the status column only\n    { key: \"status\", header: \"ステータス\", render: (c) => <Badge status={c.status} /> },\n    { key: \"valid\", header: \"有効期間\", render: (c) => `${formatDate(c.validFrom)} 〜 ${formatDate(c.validTo)}` },\n    { key: \"usage\", header: \"利用数\", align: \"right\", render: (c) => c.usage.toLocaleString() },\n  ]\n\n  return (\n    <>\n      <Head title=\"クーポン管理\" />\n      {/* RULE: every page wraps in PageContainer; vertical rhythm via Flex direction=\"col\"/ResponsiveGrid, never p-* or gap-* */}\n      {/* No subtitle that restates the title, no StatCard row: the total is Pagination's showTotal. */}\n      <PageContainer title=\"クーポン管理\">\n        <Flex direction=\"col\" gap=\"lg\">\n          {/* Toolbar is the filter-bar primitive (standalone, above the table surface). */}\n          <Toolbar hasActiveFilters={q !== \"\" || status !== \"all\"} onClear={() => { setQ(\"\"); setStatus(\"all\"); setPage(1) }}>\n            {/* SearchInput is value + onSearch(v) — NOT onChange */}\n            <SearchInput placeholder=\"クーポン名で検索\" value={q} onSearch={(v) => { setQ(v); setPage(1) }} />\n            <ToolbarGroup label=\"ステータス\">\n              <Select value={status} onValueChange={(v) => { setStatus(v); setPage(1) }}>\n                <SelectTrigger><SelectValue /></SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">全ステータス</SelectItem>\n                  <SelectItem value=\"公開中\">公開中</SelectItem>\n                  <SelectItem value=\"下書き\">下書き</SelectItem>\n                </SelectContent>\n              </Select>\n            </ToolbarGroup>\n          </Toolbar>\n\n          <Card>\n            <CardContent flush>\n              {filtered.length === 0\n                ? <EmptyState title=\"該当するクーポンがありません\" description=\"検索条件を変更してください。\" /> /* one sentence, no icon */\n                : <DataTable data={paged} columns={columns} getRowId={(c) => c.id} onRowClick={(c) => router.visit(`/coupons/${c.id}`)} />}\n            </CardContent>\n          </Card>\n\n          {/* Pagination ONLY for real multi-page data — hide it while empty or single-page. */}\n          {filtered.length > PAGE_SIZE && (\n            <Pagination value={page} total={filtered.length} pageSize={PAGE_SIZE} showTotal onValueChange={(p) => setPage(p)} />\n          )}\n        </Flex>\n      </PageContainer>\n    </>\n  )\n}\n\nCoupons.layout = withCrmLayout\nexport default Coupons",
     "name": "inertia-list-page",
-    "tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar + DataTable + Badge + Pagination (current primitive API).",
+    "tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar (above the table) + DataTable + Badge + Pagination. No KPI row, no restating subtitle.",
     "tags": [
       "inertia",
       "list",
@@ -166,9 +166,9 @@
     ]
   },
   {
-    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { PageContainer, ResponsiveGrid, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, StatCard, EmptyState, Descriptions, Badge } from \"@godxjp/ui/data-display\"\nimport { Button } from \"@godxjp/ui/general\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { ArrowLeft } from \"lucide-react\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\"\n\n// Detail routes pass the param as an Inertia prop:\n//   Route::get('/members/{id}', fn ($id) => Inertia::render('crm/members/show', ['id' => $id]))\nfunction MemberShow({ id }: { id: string }) {\n  const member = MEMBERS.find((m) => m.id === id)\n\n  if (!member) {\n    return (\n      <>\n        <Head title=\"会員詳細\" />\n        <PageContainer title=\"会員詳細\" subtitle=\"会員が見つかりません\">\n          <EmptyState title=\"会員が見つかりません\" description={`ID「${id}」は存在しません。`} />\n          <Button variant=\"outline\" onClick={() => router.visit(\"/members\")}><ArrowLeft className=\"size-4\" />一覧へ戻る</Button>\n        </PageContainer>\n      </>\n    )\n  }\n\n  return (\n    <>\n      <Head title={member.name} />\n      <PageContainer title={member.name} subtitle={`${member.id} / ${member.rank}`}>\n        <Flex direction=\"col\" gap=\"lg\">\n          <ResponsiveGrid columns={4}>\n            <StatCard label=\"累計購入額\" value={`¥${member.total.toLocaleString()}`} />\n            <StatCard label=\"来店回数\" value={member.visits} />\n            <StatCard label=\"ポイント\" value={member.points.toLocaleString()} />\n            <StatCard label=\"LTV\" value={`¥${member.ltv.toLocaleString()}`} />\n          </ResponsiveGrid>\n          <Card>\n            <CardContent>\n              {/* Descriptions is COMPOUND — value goes in children, not a prop */}\n              <Descriptions columns={2}>\n                <Descriptions.Item label=\"氏名\">{member.name}</Descriptions.Item>\n                <Descriptions.Item label=\"ランク\"><Badge status={member.rank} tone=\"info\" icon={null} /></Descriptions.Item>\n                <Descriptions.Item label=\"ステータス\"><Badge status={member.status} /></Descriptions.Item>\n                <Descriptions.Item label=\"登録日\">{formatDate(member.registeredAt)}</Descriptions.Item>\n              </Descriptions>\n            </CardContent>\n          </Card>\n        </Flex>\n      </PageContainer>\n    </>\n  )\n}\n\nMemberShow.layout = withCrmLayout\nexport default MemberShow",
+    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { PageContainer } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, EmptyState, Descriptions, Badge } from \"@godxjp/ui/data-display\"\nimport { Button } from \"@godxjp/ui/general\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { ArrowLeft } from \"lucide-react\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\"\n\n// Detail routes pass the param as an Inertia prop:\n//   Route::get('/members/{id}', fn ($id) => Inertia::render('crm/members/show', ['id' => $id]))\nfunction MemberShow({ id }: { id: string }) {\n  const member = MEMBERS.find((m) => m.id === id)\n\n  if (!member) {\n    return (\n      <>\n        <Head title=\"会員詳細\" />\n        <PageContainer title=\"会員詳細\">\n          <EmptyState title=\"会員が見つかりません\" description={`ID「${id}」は存在しません。`} />\n          <Button variant=\"outline\" onClick={() => router.visit(\"/members\")}><ArrowLeft className=\"size-4\" />一覧へ戻る</Button>\n        </PageContainer>\n      </>\n    )\n  }\n\n  return (\n    <>\n      <Head title={member.name} />\n      <PageContainer title={member.name}>\n        {/* Figures about one member are facts, not KPIs: Descriptions rows, not a StatCard row. */}\n        <Card>\n          <CardContent>\n            {/* Descriptions is COMPOUND — value goes in children, not a prop */}\n            <Descriptions columns={2}>\n              <Descriptions.Item label=\"会員ID\">{member.id}</Descriptions.Item>\n              <Descriptions.Item label=\"ランク\">{member.rank}</Descriptions.Item>\n              <Descriptions.Item label=\"ステータス\"><Badge status={member.status} /></Descriptions.Item>\n              <Descriptions.Item label=\"登録日\">{formatDate(member.registeredAt)}</Descriptions.Item>\n              <Descriptions.Item label=\"累計購入額\">{`¥${member.total.toLocaleString()}`}</Descriptions.Item>\n              <Descriptions.Item label=\"来店回数\">{member.visits}</Descriptions.Item>\n            </Descriptions>\n          </CardContent>\n        </Card>\n      </PageContainer>\n    </>\n  )\n}\n\nMemberShow.layout = withCrmLayout\nexport default MemberShow",
     "name": "inertia-detail-page",
-    "tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) + StatCard + EmptyState fallback.",
+    "tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) in one Card + EmptyState fallback. No KPI tile row.",
     "tags": [
       "inertia",
       "detail",
@@ -221,9 +221,9 @@
     ]
   },
   {
-    "code": "import { Badge } from \"@godxjp/ui/data-display\"\n\n// Badge auto-colours a fixed set of English LIFECYCLE keys:\n//   active/completed (success ✓) · draft (neutral ○) · pending/temporary (warning ⏱)\n//   scheduled/sending (info) · cancelled (neutral) · failed/deleted/bounced (destructive ✕)\n// Anything else (localized labels, tiers) falls back to neutral grey ○ unless you override.\n\n// 1) Lifecycle with localized text — map to the key, keep JP via children (icon stays):\n<Badge status=\"active\">公開中</Badge>        // green ✓ 公開中\n\n// 2) Unknown label — set tone explicitly (no icon, since the key is unknown):\n<Badge status=\"公開中\" tone=\"success\" />\n\n// 3) Tier / category — coloured pill, drop the misleading glyph with icon={null}:\n<Badge status=\"プレミアム\" tone=\"success\" icon={null} />\n<Badge status=\"ゴールド\"   tone=\"warning\" icon={null} />\n<Badge status=\"法人共通\"   tone=\"info\"    icon={null} />\n\n// tone: \"success\" | \"warning\" | \"destructive\" | \"info\" | \"neutral\"  (import type ToneProp)\n// RULE: a chip never wraps — it is pinned white-space: nowrap, so it stays one line in\n// narrow table cells. Centralize the domain→tone map in ONE small consumer wrapper and\n// import that instead of the raw Badge across pages.",
+    "code": "import { Badge } from \"@godxjp/ui/data-display\"\n\n// Badge auto-colours a fixed set of English LIFECYCLE keys:\n//   active/completed (success ✓) · draft (neutral ○) · pending/temporary (warning ⏱)\n//   scheduled/sending (info) · cancelled (neutral) · failed/deleted/bounced (destructive ✕)\n// Anything else (localized labels, tiers) falls back to neutral grey ○ unless you override.\n\n// 1) Lifecycle with localized text — map to the key, keep JP via children (icon stays):\n<Badge status=\"active\">公開中</Badge>        // green ✓ 公開中\n\n// 2) Unknown label — set tone explicitly (no icon, since the key is unknown):\n<Badge status=\"公開中\" tone=\"success\" />\n\n// 3) Tier / category — ONE neutral tone for all of them, no glyph. Colour means status;\n//    a rainbow of tiers reads as several statuses. Prefer plain text in a table column.\n<Badge status=\"プレミアム\" tone=\"neutral\" icon={null} />\n<Badge status=\"ゴールド\"   tone=\"neutral\" icon={null} />\n\n// tone: \"success\" | \"warning\" | \"destructive\" | \"info\" | \"neutral\"  (import type ToneProp)\n// RULE: a chip never wraps — it is pinned white-space: nowrap, so it stays one line in\n// narrow table cells. Centralize the domain→tone map in ONE small consumer wrapper and\n// import that instead of the raw Badge across pages.",
     "name": "badge-coloring",
-    "tagline": "Colour a Badge for localized labels and tiers via tone + icon (escape-hatch props).",
+    "tagline": "Colour a Badge for a localized STATUS via tone + icon; tiers and categories take one neutral tone (colour means status).",
     "tags": [
       "statusbadge",
       "badge",
@@ -367,16 +367,18 @@
       "page-layout",
       "stack-cards"
     ],
-    "code": "import { PageContainer, Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\n\n// Every direct child of PageContainer is a page section — the page owns the gap between them\n// (--page-body-gap, the section step). Do NOT add gap-* / space-y-* / mt-* yourself.\nexport function ReportPage() {\n  return (\n    <PageContainer title=\"Bug report\" subtitle=\"https://app.example.com/orders\" extra={<Button>Send</Button>}>\n      <Card>\n        <CardHeader><CardTitle>Details</CardTitle></CardHeader>\n        <CardContent>…</CardContent>\n      </Card>\n      <Card>\n        <CardHeader><CardTitle>Screenshots</CardTitle></CardHeader>\n        <CardContent>\n          {/* items INSIDE a section: ResponsiveGrid for a grid, Flex for a stack/row */}\n          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>…</ResponsiveGrid>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardContent>\n          <Flex direction=\"col\" gap=\"md\">…</Flex>\n        </CardContent>\n      </Card>\n    </PageContainer>\n  );\n}\n",
+    "code": "import { PageContainer, Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Card, CardContent, DataTable, Descriptions, type ColumnDef } from \"@godxjp/ui/data-display\";\nimport { Button, Heading } from \"@godxjp/ui/general\";\n\ntype Shot = { id: string; name: string };\nconst columns: ColumnDef<Shot>[] = [{ key: \"name\", header: \"File\" }];\n\n// Two steps, never one uniform gap:\n//   section step — between direct children of PageContainer (--page-body-gap). Do NOT add gap-*/mt-*.\n//   item step    — inside a section, Flex gap=\"sm\" between its heading and its content.\n// A section is a Heading, not a Card. Card is for a real boundary: here, the table surface.\nexport function ReportPage({ shots }: { shots: Shot[] }) {\n  return (\n    <PageContainer title=\"Bug report\" extra={<Button>Send</Button>}>\n      <Flex direction=\"col\" gap=\"sm\">\n        <Heading level={2}>Details</Heading>\n        <Descriptions columns={2}>\n          <Descriptions.Item label=\"URL\">https://app.example.com/orders</Descriptions.Item>\n          <Descriptions.Item label=\"Browser\">Safari 18</Descriptions.Item>\n        </Descriptions>\n      </Flex>\n      <Flex direction=\"col\" gap=\"sm\">\n        <Heading level={2}>Screenshots</Heading>\n        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>…</ResponsiveGrid>\n      </Flex>\n      <Flex direction=\"col\" gap=\"sm\">\n        <Heading level={2}>Attachments</Heading>\n        <Card>\n          <CardContent flush>\n            <DataTable data={shots} columns={columns} getRowId={(r) => r.id} />\n          </CardContent>\n        </Card>\n      </Flex>\n    </PageContainer>\n  );\n}\n",
     "name": "page-sections",
-    "tagline": "A page made of several Card sections: PageContainer spaces its direct children by default; group items inside a section with Flex/ResponsiveGrid, never Tailwind gap-*/p-*.",
+    "tagline": "A page of several sections: a Heading + section spacing marks a section, not a Card. PageContainer spaces its direct children (section step); Flex gap spaces items inside one (item step). Card only for a real boundary.",
     "tags": [
       "layout",
       "page",
       "card",
       "spacing",
       "flex",
-      "grid"
+      "grid",
+      "section",
+      "heading"
     ]
   },
   {

package/agent/tokens.json

@@ -7877,6 +7877,18 @@
     "tier": "component",
     "value": "15rem"
   },
+  {
+    "description": "Page inline margin of a shell used BARE, the way a public reader page uses it (gh#1296): default = --space-page-x, --space-page-compact-x at ≤720px, resolved at the call site because both re-derive under a density scope. Inside PageContainer / CenteredShell, which already pad, it resolves to 0 so the gutter is never doubled.",
+    "name": "--legal-document-page-padding-inline",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Document title size — two type-scale steps above a section heading, so the h1 reads as the page title and not as one more section (gh#1296). Default = the --font-size-2xl step.",
+    "name": "--legal-document-title-font-size",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Distance the pinned rail keeps from the top of the scrollport.",
     "name": "--legal-document-toc-inset-block-start",

package/dist/components/data-entry/select.js

@@ -632,10 +632,11 @@ function DataSelect(props) {
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"]
   });
-  const [hasNativeLabel, setHasNativeLabel] = React.useState(false);
+  const [nativeLabel, setNativeLabel] = React.useState(null);
+  const hasNativeLabel = nativeLabel !== null;
   useLayoutEffect(() => {
-    const labelled = typeof document !== "undefined" && props.id !== void 0 && document.querySelector(`label[for="${CSS.escape(props.id)}"]`) !== null;
-    setHasNativeLabel(labelled);
+    const label = typeof document !== "undefined" && props.id !== void 0 ? document.querySelector(`label[for="${CSS.escape(props.id)}"]`) : null;
+    setNativeLabel(label ? (label.textContent ?? "").trim() || null : null);
   }, [props.id]);
   if (props.mode !== void 0 || searchable) {
     const antdFilter = showSearchConfig?.filterOption;
@@ -742,7 +743,7 @@ function DataSelect(props) {
       },
       disabled: disabled || !hasOptions && !showEmptyPopup,
       allowsEmptyCollection: showEmptyPopup,
-      "aria-label": ariaProps["aria-label"] ?? nameFromPlaceholder,
+      "aria-label": ariaProps["aria-label"] ?? nameFromPlaceholder ?? nativeLabel ?? void 0,
       "aria-labelledby": ariaProps["aria-labelledby"] ?? inheritedName["aria-labelledby"],
       name: resolvedName,
       open,

package/dist/components/layout/page-container.js

@@ -61,12 +61,18 @@ function PageContainerRoot({
   children,
   className
 }) {
-  const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
+  const hasTitle = title != null && title !== false && title !== "";
+  const hasIcon = icon != null && icon !== false;
+  const { start: extraStart, end: extraEnd } = resolvePageExtra(extra);
+  const hasHeading = headerLoading || hasTitle || hasIcon || status != null || !!subtitle;
+  const hasBreadcrumb = !!breadcrumb && breadcrumb.length > 0;
+  const hasEyecatch = isValidElement(cover) && cover.props.variant === "eyecatch";
+  const hasHeader = hasHeading || hasBreadcrumb || hasEyecatch || extraStart != null || extraEnd != null;
+  const reveal = stickyFooter && footer != null && footerReveal === "onScroll" && hasHeader;
   const { headerRef, revealed } = useFooterReveal(reveal);
   const footerRef = useRef(null);
   useToastStickyBarClearance([footerRef], stickyFooter && !!footer && (!reveal || revealed));
   const { t } = useTranslation();
-  const { start: extraStart, end: extraEnd } = resolvePageExtra(extra);
   const titleFocus = titleRef === void 0 ? void 0 : { ref: titleRef, tabIndex: -1 };
   const coverVariant = cover == null || cover === false ? void 0 : isValidElement(cover) && cover.props.variant === "eyecatch" ? "eyecatch" : "banner";
   return /* @__PURE__ */ jsxs(
@@ -90,7 +96,7 @@ function PageContainerRoot({
       ),
       children: [
         coverVariant === "banner" ? /* @__PURE__ */ jsx("div", { className: "ui-page-cover-slot", children: cover }) : null,
-        /* @__PURE__ */ jsxs(
+        hasHeader && /* @__PURE__ */ jsxs(
           "header",
           {
             ref: headerRef,
@@ -98,7 +104,7 @@ function PageContainerRoot({
             "data-layout": headerLayout,
             "aria-busy": headerLoading ? "true" : void 0,
             children: [
-              breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
+              hasBreadcrumb && /* @__PURE__ */ jsx(
                 "nav",
                 {
                   "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
@@ -144,8 +150,8 @@ function PageContainerRoot({
               ),
               coverVariant === "eyecatch" ? /* @__PURE__ */ jsx("div", { className: "ui-page-cover-slot", children: cover }) : null,
               /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-                /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading", children: [
-                  icon != null && icon !== false ? /* @__PURE__ */ jsx("div", { className: "ui-page-header-icon", children: icon }) : null,
+                hasHeading && /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading", children: [
+                  hasIcon ? /* @__PURE__ */ jsx("div", { className: "ui-page-header-icon", children: icon }) : null,
                   headerLoading ? /* @__PURE__ */ jsx(
                     "h1",
                     {
@@ -154,9 +160,9 @@ function PageContainerRoot({
                       children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("layout.pageHeader.loading") })
                     }
                   ) : status != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-header-title-row", children: [
-                    /* @__PURE__ */ jsx("h1", { ...titleFocus, className: "ui-page-title", children: title }),
+                    hasTitle && /* @__PURE__ */ jsx("h1", { ...titleFocus, className: "ui-page-title", children: title }),
                     /* @__PURE__ */ jsx("div", { className: "ui-page-header-status", children: status })
-                  ] }) : /* @__PURE__ */ jsx("h1", { ...titleFocus, className: "ui-page-title", children: title }),
+                  ] }) : hasTitle ? /* @__PURE__ */ jsx("h1", { ...titleFocus, className: "ui-page-title", children: title }) : null,
                   headerLoading ? (
                     // Decorative only — the pending state is already announced once by the heading above,
                     // so a second live placeholder here would double-announce it.

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "32.5.0",
+  "version": "32.7.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -324,7 +324,8 @@
     "legalDocumentShell": {
       "contents": "Contents",
       "version": "Version {version}",
-      "effectiveDate": "Effective {date}"
+      "effectiveDate": "Effective {date}",
+      "updatedDate": "Updated {date}"
     },
     "errorSurface": {
       "statusLabel": "HTTP status {status}",

package/dist/i18n/messages/ja.json

@@ -319,7 +319,8 @@
     "legalDocumentShell": {
       "contents": "目次",
       "version": "バージョン {version}",
-      "effectiveDate": "施行日 {date}"
+      "effectiveDate": "施行日 {date}",
+      "updatedDate": "更新日 {date}"
     },
     "errorSurface": {
       "statusLabel": "HTTP ステータス {status}",

package/dist/i18n/messages/vi.json

@@ -320,7 +320,8 @@
     "legalDocumentShell": {
       "contents": "Mục lục",
       "version": "Phiên bản {version}",
-      "effectiveDate": "Hiệu lực từ {date}"
+      "effectiveDate": "Hiệu lực từ {date}",
+      "updatedDate": "Cập nhật {date}"
     },
     "errorSurface": {
       "statusLabel": "Trạng thái HTTP {status}",

package/dist/lab/legal-document-shell.js

@@ -33,6 +33,7 @@ const LegalDocumentShell = React.forwardRef(
     title,
     version,
     effectiveDate,
+    dateKind = "effective",
     summary,
     contentsLabel,
     sections,
@@ -135,9 +136,12 @@ const LegalDocumentShell = React.forwardRef(
               version !== void 0 && /* @__PURE__ */ jsx("span", { children: t("layout.legalDocumentShell.version", { version }) }),
               effectiveDate !== void 0 && // <time dateTime> keeps the MACHINE-readable value as the ISO 8601 input while
               // the visible text is the Intl-formatted, locale-correct rendering.
-              /* @__PURE__ */ jsx("time", { dateTime: effectiveDate, children: t("layout.legalDocumentShell.effectiveDate", {
-                date: formatEffectiveDate(effectiveDate, locale)
-              }) })
+              /* @__PURE__ */ jsx("time", { dateTime: effectiveDate, children: t(
+                dateKind === "updated" ? "layout.legalDocumentShell.updatedDate" : "layout.legalDocumentShell.effectiveDate",
+                {
+                  date: formatEffectiveDate(effectiveDate, locale)
+                }
+              ) })
             ] }),
             summary !== void 0 && // A <div> (not <p>): the summary slot may carry block content, and a <p> inside a <p>
             // is invalid HTML the browser silently un-nests.

package/dist/props/components/layout.prop.d.ts

@@ -44,7 +44,13 @@ export type PageContainerExtraProp = ExtraProp | {
 export type PageContainerProp = {
     toolbarPad?: PadProp;
     footerPad?: PadProp;
-    title: TitleProp;
+    /**
+     * The page's `<h1>`. Optional for a page whose CONTENT draws its own heading (a document reader,
+     * a LegalDocumentShell): omitted, PageContainer renders no `<h1>` at all, and a header with no
+     * other slot is not rendered. The page must then still have exactly one `<h1>` — from the
+     * content (WCAG 1.3.1 / 2.4.6); `titleRef` has nothing to attach to.
+     */
+    title?: TitleProp;
     subtitle?: SubtitleProp;
     /**
      * Status/meta band rendered beside the title inside the heading — StatusBadge, environment tag,
@@ -1676,6 +1682,12 @@ export type LegalDocumentShellProp = {
      * `<time dateTime={effectiveDate}>`, so the machine-readable value is always the ISO input.
      */
     effectiveDate?: string;
+    /**
+     * What the date in `effectiveDate` means, which picks its localized caption: `"effective"`
+     * (default — 「施行日」 / "Effective", a policy in force from that date) or `"updated"`
+     * (「更新日」 / "Updated", a wiki page or help article last revised on that date).
+     */
+    dateKind?: "effective" | "updated";
     /** Short plain-language summary rendered under the metadata, above the contents. */
     summary?: ReactNode;
     /** Accessible name + visible caption of the contents `<nav>` (e.g. "Contents"). */

package/dist/props/registry.d.ts

@@ -1309,6 +1309,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "effectiveDate";
             readonly local: true;
             readonly reason: "ISO 8601 date input formatted via Intl.DateTimeFormat in the active locale.";
+        }, {
+            readonly field: "dateKind";
+            readonly local: true;
+            readonly reason: "Meaning of the date (effective | updated) — selects the localized caption, so the consumer never concatenates a label with a formatted date.";
         }, {
             readonly field: "summary";
             readonly local: true;

package/dist/props/registry.js

@@ -1402,6 +1402,11 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "ISO 8601 date input formatted via Intl.DateTimeFormat in the active locale."
       },
+      {
+        field: "dateKind",
+        local: true,
+        reason: "Meaning of the date (effective | updated) \u2014 selects the localized caption, so the consumer never concatenates a label with a formatted date."
+      },
       {
         field: "summary",
         local: true,

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.5.0",
+  "version": "32.7.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/layout.css

@@ -1107,6 +1107,10 @@
       justify-content: flex-end;
     }
 
+    .ui-page-header-extra:only-child {
+      margin-inline-start: auto;
+    }
+
     .ui-page-container[data-header-scale="chrome"] .ui-page-header-extra {
       align-self: center;
     }
@@ -1595,6 +1599,28 @@
 
   .ui-legal-document-scope {
     container: legal-document / inline-size;
+    padding-inline: var(--legal-document-page-padding-inline, var(--space-page-x));
+
+    --heading-h1: var(
+      --legal-document-title-font-size,
+      var(
+        --font-size-2xl,
+        calc(
+          var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+            var(--font-size-ratio) * var(--font-size-ratio)
+        )
+      )
+    );
+  }
+
+  @media (max-width: 720px) {
+    .ui-legal-document-scope {
+      padding-inline: var(--legal-document-page-padding-inline, var(--space-page-compact-x));
+    }
+  }
+
+  :where(.ui-page-body, .ui-centered-shell-main) .ui-legal-document-scope {
+    --legal-document-page-padding-inline: 0px;
   }
 
   .ui-legal-document {