@godxjp/ui 28.9.0 → 28.10.0

package/agent/index.json

@@ -0,0 +1,56 @@
+{
+  "counts": {
+    "anti-ai-tells": 26,
+    "components": 170,
+    "patterns": 19,
+    "rules": 47,
+    "tokens": 1684,
+    "vocabulary": 14
+  },
+  "files": [
+    {
+      "file": "components-index.json",
+      "note": "45 KB — name + group + tagline for all 170. FETCH THIS FIRST, then fetch only the components you chose.",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
+    },
+    {
+      "file": "components/<Name>.json",
+      "note": "One file per component (1 KB–33 KB, median 6 KB), each carrying its importPath. This is the selective route: read the index, then fetch only what you need instead of the 1.1 MB blob.",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/<Name>.json"
+    },
+    {
+      "file": "components.json",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json"
+    },
+    {
+      "file": "tokens.json",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json"
+    },
+    {
+      "file": "vocabulary.json",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json"
+    },
+    {
+      "file": "rules.json",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json"
+    },
+    {
+      "file": "patterns.json",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns.json"
+    },
+    {
+      "file": "anti-ai-tells.json",
+      "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json"
+    }
+  ],
+  "generated": "scripts/gen-agent-catalog.mjs",
+  "name": "@godxjp/ui",
+  "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
+  "read": {
+    "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v28.10.0/agent/index.json"
+  },
+  "source": "mcp/src/data — the same data @godxjp/ui-mcp serves",
+  "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
+  "version": "28.10.0"
+}

package/agent/llms.txt

@@ -0,0 +1,32 @@
+# @godxjp/ui
+
+> A Japanese-enterprise React design system: 170 components, 1684 design tokens,
+> 47 cardinal rules. This file is the entry point for AI agents. Catalog version 28.10.0.
+
+If your client can run a process, do not read these files — run the MCP server instead
+(`npx @godxjp/ui-mcp@28.10.0`). It is searchable and version-locked. These files exist for agents
+that can only fetch URLs.
+
+## Start
+
+- [START-HERE.md](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md): the whole contract — the four rules, the token override model, a page that passes review. Read this first; it is self-contained.
+- [index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json): version, counts, and the URL of every file.
+
+## Catalog
+
+- [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 19 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 45 KB — all 170 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–33 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
+- [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.1 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value and the reason it exists.
+- [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
+- [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 47 cardinal rules.
+- [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
+
+## Pinning
+
+Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
+the tag: `.../godx-jp/godxjp-ui/v28.10.0/agent/...`. A catalog that does not match the installed
+package describes props that are absent, or hides props that are present, and says nothing either way.
+
+Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

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

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

package/agent/patterns/async-data-state.json

@@ -0,0 +1,20 @@
+{
+  "aliases": [
+    "loading-states",
+    "data-state",
+    "query-states"
+  ],
+  "code": "import { DataState, classifyQueryError } from \"@godxjp/ui/query\";\nimport { EmptyState } from \"@godxjp/ui/data-display\";\nimport { SkeletonTable } from \"@godxjp/ui/feedback\";\nimport { Building2, Inbox } from \"lucide-react\";\n\n// ONE primary state renders at a time; DataState makes them mutually exclusive:\n//   prerequisite → skeleton(loading) → data → empty → error   (never two at once).\n//\n// enabled:false is PREREQUISITE/idle, NOT loading. TanStack reports isPending while a query is\n// disabled, but fetchStatus stays \"idle\" (no request in flight) — DataState renders the prerequisite\n// slot, so a disabled query shows an instruction, NOT an endless skeleton.\n//   const query = useQuery({ queryKey: [\"members\", orgId], queryFn, enabled: Boolean(orgId) });\n//\n// A background refetch over EXISTING data keeps the content on screen (no skeleton flash) and\n// announces the busy state politely — stale/placeholder refresh is handled for you.\n//\n// Errors are classified by CAUSE, not blanket-retried:\n//   auth (401)         → onAuthError: renew session / sign in again  (NOT a retry)\n//   forbidden (403)    → permission message + access path            (no retry)\n//   notFound (404)     → contextual not-found                        (no retry)\n//   validation (400/422)→ corrective guidance                        (no retry)\n//   transient (408/429/5xx/network) → Retry offered automatically\n//   unknown            → neutral; opt into Retry via showRetry/onRetry only if it can help\nexport function MembersPanel({ query, orgId, onSignIn }: {\n  query: any; orgId?: string; onSignIn: () => void;\n}) {\n  return (\n    <DataState\n      query={query}\n      prerequisite={<EmptyState icon={Building2} variant=\"section\" title=\"組織を選択してください\"\n        description=\"メンバーを表示するには、上のセレクタで組織を選びます。\" />}\n      skeleton={<SkeletonTable rows={8} columns={4} />}\n      empty={<EmptyState icon={Inbox} variant=\"section\" title=\"メンバーがいません\"\n        description=\"この組織にはまだメンバーが登録されていません。\" />}\n      isEmpty={(data) => data.items.length === 0}\n      onAuthError={onSignIn}\n    >\n      {(data) => <MemberTable items={data.items} />}\n    </DataState>\n  );\n}\n\n// Need a bespoke error surface? Pass errorRenderer and branch on the classified category — the\n// default detail is always a localized message (never raw token / endpoint / stack text):\n//   errorRenderer={(error, retry) => {\n//     const { category } = classifyQueryError(error);\n//     if (category === \"auth\") return <SessionExpired onRenew={onSignIn} />;\n//     if (category === \"forbidden\") return <NoAccess />;\n//     if (category === \"transient\") return <Retryable onRetry={retry} />;\n//     return <GenericError />;\n//   }}\n// RULE: pagination/footer chrome NEVER renders outside the populated-data branch (see data-table-page).",
+  "name": "async-data-state",
+  "tagline": "The full async state machine — ONE primary state at a time: prerequisite, disabled-vs-loading, stale refresh, populated, real-empty, and cause-aware error (401/403/404/422/transient) with correct recovery.",
+  "tags": [
+    "async",
+    "loading",
+    "query",
+    "error",
+    "empty",
+    "prerequisite",
+    "retry",
+    "react-query"
+  ]
+}

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

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

package/agent/patterns/badge-coloring.json

@@ -0,0 +1,14 @@
+{
+  "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.",
+  "name": "badge-coloring",
+  "tagline": "Colour a Badge for localized labels and tiers via tone + icon (escape-hatch props).",
+  "tags": [
+    "statusbadge",
+    "badge",
+    "tone",
+    "color",
+    "status",
+    "tier",
+    "table"
+  ]
+}

package/agent/patterns/common-fixes.json

@@ -0,0 +1,16 @@
+{
+  "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",
+  "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": [
+    "fixes",
+    "migration",
+    "bug",
+    "cardstat",
+    "statusbadge",
+    "datatable",
+    "sidebar",
+    "gotcha",
+    "review"
+  ]
+}

package/agent/patterns/confirm-destructive.json

@@ -0,0 +1,11 @@
+{
+  "code": "import { useState } from \"react\";\nimport { AlertDialogRoot, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from \"@godxjp/ui/feedback\";\nimport { Input } from \"@godxjp/ui/data-entry\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { toast } from \"sonner\";\n\nexport function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolean; onOpenChange: (v: boolean) => void; slug: string }) {\n  const [confirm, setConfirm] = useState(\"\");\n  return (\n    <AlertDialogRoot open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>プロジェクトを削除</AlertDialogTitle>\n          <AlertDialogDescription>この操作は取り消せません。確認のためプロジェクト名 \"{slug}\" と入力してください。</AlertDialogDescription>\n        </AlertDialogHeader>\n        <Flex direction=\"col\" gap=\"md\">\n          <Input value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder={slug} />\n        </Flex>\n        <AlertDialogFooter>\n          <AlertDialogCancel asChild><Button variant=\"outline\">キャンセル</Button></AlertDialogCancel>\n          <AlertDialogAction asChild>\n            <Button variant=\"destructive\" disabled={confirm !== slug} onClick={() => { toast.success(\"削除しました\"); onOpenChange(false); }}>完全に削除</Button>\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialogRoot>\n  );\n}",
+  "name": "confirm-destructive",
+  "tagline": "Type-to-confirm destructive dialog — AlertDialogRoot + Input gate + toast (real @godxjp/ui API).",
+  "tags": [
+    "dialog",
+    "confirm",
+    "destructive",
+    "delete"
+  ]
+}

package/agent/patterns/data-table-page.json

@@ -0,0 +1,18 @@
+{
+  "aliases": [
+    "filter-bar",
+    "table-state",
+    "list-page"
+  ],
+  "code": "import { useState } from \"react\";\nimport { DataState } from \"@godxjp/ui/query\";\nimport { Card, CardContent, DataTable, EmptyState, type ColumnDef } from \"@godxjp/ui/data-display\";\nimport { SkeletonTable } from \"@godxjp/ui/feedback\";\nimport { SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\";\nimport { Toolbar, ToolbarGroup, Pagination } from \"@godxjp/ui/navigation\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { useQuery, keepPreviousData } from \"@tanstack/react-query\";\n\ntype Row = { id: string; name: string; status: string };\n\nexport function MembersTablePage({ orgId }: { orgId?: string }) {\n  const [q, setQ] = useState(\"\");\n  const [status, setStatus] = useState(\"all\");\n  const [page, setPage] = useState(1);\n  const pageSize = 20;\n\n  // placeholderData: keepPreviousData → on page/filter change the PREVIOUS page stays visible\n  // (a stale refresh) instead of flashing a skeleton. enabled gates on the prerequisite (orgId).\n  const query = useQuery({\n    queryKey: [\"members\", orgId, q, status, page],\n    queryFn: () => fetchMembers({ orgId: orgId!, q, status, page, pageSize }),\n    enabled: Boolean(orgId),\n    placeholderData: keepPreviousData,\n  });\n\n  const columns: ColumnDef<Row>[] = [\n    { key: \"name\", header: \"氏名\", render: (r) => <span className=\"font-medium\">{r.name}</span> },\n    { key: \"status\", header: \"ステータス\" },\n  ];\n\n  return (\n    <Flex direction=\"col\" gap=\"lg\">\n      {/* Toolbar (filter bar) is STANDALONE and always visible so the user can change filters even\n          while a query is idle/loading/empty. Changing a filter resets to page 1. */}\n      <Toolbar hasActiveFilters={q !== \"\" || status !== \"all\"}\n        onClear={() => { setQ(\"\"); setStatus(\"all\"); setPage(1); }}>\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=\"active\">有効</SelectItem>\n              <SelectItem value=\"invited\">招待中</SelectItem>\n            </SelectContent>\n          </Select>\n        </ToolbarGroup>\n      </Toolbar>\n\n      {/* The table surface owns exactly ONE card. Pagination lives INSIDE the success branch, so it\n          is hidden during prerequisite / loading / empty / error and for single-page results. */}\n      <DataState\n        query={query}\n        prerequisite={<EmptyState variant=\"section\" title=\"組織を選択してください\" />}\n        skeleton={<Card><CardContent flush><SkeletonTable rows={8} columns={2} /></CardContent></Card>}\n        empty={<EmptyState variant=\"section\" title=\"該当するメンバーがいません\" description=\"検索条件を変更してください。\" />}\n        isEmpty={(d) => d.items.length === 0}\n      >\n        {(d) => {\n          const totalPages = Math.ceil(d.total / pageSize);\n          return (\n            <>\n              <Card><CardContent flush><DataTable data={d.items} columns={columns} getRowId={(r) => r.id} /></CardContent></Card>\n              {totalPages > 1 && (\n                <Pagination value={page} total={d.total} pageSize={pageSize} showTotal onValueChange={setPage} />\n              )}\n            </>\n          );\n        }}\n      </DataState>\n    </Flex>\n  );\n}\n// Responsive: Pagination's showTotal range + controls stack at narrow widths automatically.\n// A transient retry keeps q/status/page (they live in component state, not the query) — the\n// same page reloads in place; the user never loses their filters.",
+  "name": "data-table-page",
+  "tagline": "Filter (Toolbar) + table surface + bottom pagination driven by a query state machine — pagination shows ONLY for successful multi-page data; filters/page survive a transient retry.",
+  "tags": [
+    "table",
+    "pagination",
+    "filter",
+    "async",
+    "toolbar",
+    "datatable"
+  ]
+}

package/agent/patterns/deferred-loading.json

@@ -0,0 +1,12 @@
+{
+  "code": "// Server (Laravel): defer the heavy prop\n//   Inertia::render('crm/coupons/index', [\n//     'coupons' => Inertia::defer(fn () => Coupon::all()),\n//   ]);\nimport { Card, CardContent, DataTable } from \"@godxjp/ui/data-display\";\nimport type { ColumnDef } from \"@godxjp/ui/data-display\";\nimport { SkeletonTable } from \"@godxjp/ui/feedback\";\n\ntype Coupon = { id: string; name: string };\nconst columns: ColumnDef<Coupon>[] = [{ key: \"name\", header: \"クーポン名\" }];\n\n// coupons is undefined until the deferred request resolves\nexport default function Coupons({ coupons }: { coupons?: Coupon[] }) {\n  return (\n    <Card>\n      <CardContent flush>\n        {!coupons\n          ? <SkeletonTable rows={10} columns={6} />\n          : <DataTable data={coupons} columns={columns} getRowId={(c) => c.id} />}\n      </CardContent>\n    </Card>\n  );\n}",
+  "name": "deferred-loading",
+  "tagline": "Inertia deferred props with a Skeleton fallback — SkeletonTable while data loads, then DataTable (real @godxjp/ui API).",
+  "tags": [
+    "loading",
+    "skeleton",
+    "deferred",
+    "inertia",
+    "table"
+  ]
+}

package/agent/patterns/error-pages.json

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

package/agent/patterns/inertia-detail-page.json

@@ -0,0 +1,13 @@
+{
+  "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",
+  "name": "inertia-detail-page",
+  "tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) + StatCard + EmptyState fallback.",
+  "tags": [
+    "inertia",
+    "detail",
+    "show",
+    "page",
+    "keyvaluegrid",
+    "crm"
+  ]
+}

package/agent/patterns/inertia-list-page.json

@@ -0,0 +1,15 @@
+{
+  "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",
+  "name": "inertia-list-page",
+  "tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar + DataTable + Badge + Pagination (current primitive API).",
+  "tags": [
+    "inertia",
+    "list",
+    "table",
+    "page",
+    "filter",
+    "pagination",
+    "datatable",
+    "crm"
+  ]
+}

package/agent/patterns/inertia-persistent-layout.json

@@ -0,0 +1,14 @@
+{
+  "code": "// resources/js/layouts/crm-layout.tsx\nimport { router, usePage } from \"@inertiajs/react\"\nimport { AppShell, Sidebar } from \"@godxjp/ui/layout\"\nimport { LayoutDashboard } from \"lucide-react\"\nimport type { ReactNode } from \"react\"\n\nexport function CrmLayout({ children }: { children: ReactNode }) {\n  const { url } = usePage()\n  const sections = [{ label: \"メイン\", items: [{ id: \"/dashboard\", label: \"ダッシュボード\", icon: LayoutDashboard }] }]\n  return (\n    <AppShell sidebar={<Sidebar activeId={url} onSelect={(id) => router.visit(id)} sections={sections} product={{ name: \"JOVY CRM\" }} />}>\n      {children}\n    </AppShell>\n  )\n}\n\n// ⚠️ GOTCHA 1 — persistent layout MUST be the ARRAY form.\n// A render fn `(page) => <CrmLayout>{page}</CrmLayout>` is indistinguishable from a\n// component; Inertia React calls it with the page-PROPS object and renders that\n// object as a child → \"Objects are not valid as a React child {errors, auth, …}\".\nexport const withCrmLayout = [CrmLayout]   // ✅ array → Inertia passes the page as children\n// page usage:  Dashboard.layout = withCrmLayout\n\n// ⚠️ GOTCHA 2 — Inertia v3 SSRs even in `npm run dev`. NEVER call Math.random() or\n// argless new Date() during render (e.g. fabricating chart/demo numbers) → React\n// hydration mismatch (\"server rendered text didn't match the client\"). Seed\n// deterministically by index, or compute inside an event handler:\nconst seeded = (n: number) => { const x = Math.sin((n + 1) * 99.71) * 1e4; return x - Math.floor(x) }",
+  "name": "inertia-persistent-layout",
+  "tagline": "Inertia persistent layout (AppShell+Sidebar) — the array-form gotcha + the SSR/Math.random gotcha.",
+  "tags": [
+    "inertia",
+    "layout",
+    "appshell",
+    "sidebar",
+    "ssr",
+    "hydration",
+    "gotcha"
+  ]
+}

package/agent/patterns/organization-memberships.json

@@ -0,0 +1,19 @@
+{
+  "aliases": [
+    "organization-switcher",
+    "workspace-switcher",
+    "received-invitations",
+    "memberships"
+  ],
+  "code": "// Research basis: GitHub organization membership + Slack workspace switching/invitations.\n// Each row = recognizable identity (Avatar/logo, NOT an identical decorative icon) + name +\n// a \"現在\" (Current) badge for the active org + role + a permission-aware action menu.\nimport { Card, CardContent, CardHeader, CardTitle, ListRow, Badge, Avatar, AvatarImage, AvatarFallback, EmptyState } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from \"@godxjp/ui/navigation\";\nimport { MoreHorizontal, Plus } from \"lucide-react\";\n\ntype Role = \"owner\" | \"admin\" | \"member\";\ntype Membership = { id: string; name: string; logoUrl?: string; role: Role; joinedAt: string; isCurrent: boolean; canManage: boolean };\ntype Invite = { id: string; orgName: string; invitedBy: string };\n\nconst ROLE_LABEL: Record<Role, string> = { owner: \"オーナー\", admin: \"管理者\", member: \"メンバー\" };\n\nexport function OrganizationMemberships({\n  memberships, invitations, onOpen, onSwitch, onManage, onLeave, onCreate, onAccept, onDecline,\n}: {\n  memberships: Membership[]; invitations: Invite[];\n  onOpen: (id: string) => void; onSwitch: (id: string) => void; onManage: (id: string) => void;\n  onLeave: (id: string) => void; onCreate: () => void; onAccept: (id: string) => void; onDecline: (id: string) => void;\n}) {\n  return (\n    <Flex direction=\"col\" gap=\"lg\">\n      <Card>\n        <CardHeader>\n          <Flex justify=\"between\" align=\"center\">\n            <CardTitle>組織</CardTitle>\n            {/* Create belongs at page/section level, not per row. */}\n            <Button variant=\"outline\" size=\"sm\" onClick={onCreate}><Plus className=\"size-4\" />組織を作成</Button>\n          </Flex>\n        </CardHeader>\n        {/* flush → ListRows draw their own edge-to-edge dividers. */}\n        <CardContent flush>\n          {memberships.length === 0 ? (\n            <EmptyState variant=\"section\" title=\"所属している組織がありません\" description=\"新しい組織を作成するか、招待を受け取ってください。\" />\n          ) : (\n            memberships.map((m) => (\n              <ListRow\n                key={m.id}\n                leading={\n                  <Avatar>\n                    {m.logoUrl ? <AvatarImage src={m.logoUrl} alt=\"\" /> : null}\n                    <AvatarFallback>{m.name.slice(0, 1)}</AvatarFallback>\n                  </Avatar>\n                }\n                title={\n                  <Flex gap=\"sm\" align=\"center\">\n                    <span className=\"font-medium\">{m.name}</span>\n                    {m.isCurrent && <Badge tone=\"success\" icon={null}>現在</Badge>}\n                  </Flex>\n                }\n                description={ROLE_LABEL[m.role]}\n                trailing={\n                  <Flex gap=\"sm\" align=\"center\">\n                    {m.isCurrent\n                      ? <Button size=\"sm\" onClick={() => onOpen(m.id)}>開く</Button>\n                      : <Button variant=\"outline\" size=\"sm\" onClick={() => onSwitch(m.id)}>切り替え</Button>}\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"ghost\" size=\"icon\" aria-label={`${m.name} の操作`}><MoreHorizontal className=\"size-4\" /></Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\">\n                        <DropdownMenuItem onSelect={() => onOpen(m.id)}>開く</DropdownMenuItem>\n                        {m.canManage && <DropdownMenuItem onSelect={() => onManage(m.id)}>管理</DropdownMenuItem>}\n                        {m.role !== \"owner\" && <DropdownMenuItem onSelect={() => onLeave(m.id)}>退出</DropdownMenuItem>}\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </Flex>\n                }\n              />\n            ))\n          )}\n        </CardContent>\n      </Card>\n\n      {/* CONDITIONAL invitations — no pending invites ⇒ render NOTHING (no permanent empty Card).\n          Few pending ⇒ a compact actionable list. Many/history ⇒ link to a focused route instead. */}\n      {invitations.length > 0 && (\n        <Card>\n          <CardHeader><CardTitle>保留中の招待</CardTitle></CardHeader>\n          <CardContent flush>\n            {invitations.map((inv) => (\n              <ListRow\n                key={inv.id}\n                title={<span className=\"font-medium\">{inv.orgName}</span>}\n                description={`${inv.invitedBy} からの招待`}\n                trailing={\n                  <Flex gap=\"sm\">\n                    <Button size=\"sm\" onClick={() => onAccept(inv.id)}>参加</Button>\n                    <Button variant=\"ghost\" size=\"sm\" onClick={() => onDecline(inv.id)}>辞退</Button>\n                  </Flex>\n                }\n              />\n            ))}\n          </CardContent>\n        </Card>\n      )}\n    </Flex>\n  );\n}\n// DON'T: passive rows with no action · identical decorative icons · unlabeled timestamps\n// (label them: \"2024年に参加\") · a large empty invitation Card shown permanently.",
+  "name": "organization-memberships",
+  "tagline": "Workspace membership list — recognizable identity, current/active state, role, permission-aware Open/Switch/Manage/Leave row actions, page-level Create, and CONDITIONAL invitations (omit when none).",
+  "tags": [
+    "organization",
+    "workspace",
+    "membership",
+    "invitation",
+    "account",
+    "switcher"
+  ]
+}

package/agent/patterns/page-sections.json

@@ -0,0 +1,18 @@
+{
+  "aliases": [
+    "cards-in-page",
+    "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",
+  "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-*.",
+  "tags": [
+    "layout",
+    "page",
+    "card",
+    "spacing",
+    "flex",
+    "grid"
+  ]
+}

package/agent/patterns/settings-page-responsive.json

@@ -0,0 +1,18 @@
+{
+  "aliases": [
+    "settings-tabs",
+    "settings-page",
+    "settings-layout"
+  ],
+  "code": "// Research basis: GitHub, Google Account, Microsoft Account, Atlassian Account settings +\n// the IBM Carbon form grid. Every destination is a URL, so deep links and browser back/forward\n// work for free and the active item is derived from the route — never from local tab state.\n//\n// Desktop (>= lg): persistent vertical local nav on the left + bounded content on the right.\n// Mobile (< lg):   the SAME routes become a horizontal, scrollable tab strip above the content.\n// Styling uses ONLY real semantic token classes (bg-muted / text-foreground / text-muted-foreground)\n// and responsive/visibility utilities — the library ships NO bespoke settings shell/nav CSS classes.\nimport { NavLink, Outlet, Navigate } from \"react-router-dom\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { FormField, Input } from \"@godxjp/ui/data-entry\";\nimport { Button } from \"@godxjp/ui/general\";\n\nconst SECTIONS = [\n  { to: \"general\", label: \"基本情報\" },\n  { to: \"security\", label: \"セキュリティ\" },\n  { to: \"notifications\", label: \"通知\" },\n] as const;\n\n// One link renderer for BOTH breakpoints. NavLink gives us the active state (and sets\n// aria-current=\"page\") straight from the URL; semantic tokens only, no invented classes.\nconst link = ({ isActive }: { isActive: boolean }) =>\n  [\n    \"rounded-md px-3 py-2 text-sm no-underline transition-colors whitespace-nowrap\",\n    isActive\n      ? \"bg-muted text-foreground font-medium\"\n      : \"text-muted-foreground hover:text-foreground\",\n  ].join(\" \");\n\nexport function SettingsLayout() {\n  return (\n    <Flex direction=\"col\" gap=\"lg\" className=\"lg:flex-row lg:items-start\">\n      {/* < lg: horizontal, scrollable route tabs. Flex owns the row and the gap — hideFrom /\n          hideBelow own the breakpoint, so neither nav needs a hand-rolled flex or gap utility. */}\n      <Flex as=\"nav\" aria-label=\"設定\" gap={1} hideFrom=\"lg\" className=\"overflow-x-auto\">\n        {SECTIONS.map((s) => (\n          <NavLink key={s.to} to={s.to} className={link} end>{s.label}</NavLink>\n        ))}\n      </Flex>\n      {/* >= lg: persistent vertical local nav (bounded width, does not shrink). */}\n      <Flex as=\"nav\" aria-label=\"設定\" direction=\"col\" gap={1} hideBelow=\"lg\" width={224} shrink={false}>\n        {SECTIONS.map((s) => (\n          <NavLink key={s.to} to={s.to} className={link} end>{s.label}</NavLink>\n        ))}\n      </Flex>\n      {/* Bounded content region (~42rem) — the routed section renders here. min-w-0 lets it shrink. */}\n      <main className=\"min-w-0 max-w-2xl flex-1\"><Outlet /></main>\n    </Flex>\n  );\n}\n\n// A settings section. Horizontal label/control rows on desktop (collapse to stacked on mobile),\n// controls bounded to a semantic width. FormField OWNS the label↔control relationship — do NOT\n// hand-roll <Label> + <input>. Save feedback = Button loading prop + a toast in onSuccess.\nexport function GeneralSettingsSection({\n  defaults, onSave, saving, error,\n}: { defaults: { name: string; email: string }; onSave: (v: FormData) => void; saving: boolean; error?: string }) {\n  return (\n    <form onSubmit={(e) => { e.preventDefault(); onSave(new FormData(e.currentTarget)); }}>\n      <Flex direction=\"col\" gap=\"md\">\n        <FormField id=\"ws-name\" label=\"ワークスペース名\" layout=\"horizontal\" controlWidth=\"24rem\"\n          helper=\"請求書や共有リンクに表示されます。\" error={error}>\n          <Input id=\"ws-name\" name=\"name\" defaultValue={defaults.name} />\n        </FormField>\n        <FormField id=\"ws-email\" label=\"連絡先メール\" layout=\"horizontal\" controlWidth=\"24rem\">\n          <Input id=\"ws-email\" name=\"email\" type=\"email\" defaultValue={defaults.email} />\n        </FormField>\n        <Flex gap=\"sm\"><Button type=\"submit\" loading={saving}>変更を保存</Button></Flex>\n      </Flex>\n    </form>\n  );\n}\n\n// Router wiring — each destination is addressable, so deep links + back/forward just work:\n//   <Route path=\"settings\" element={<SettingsLayout/>}>\n//     <Route index element={<Navigate to=\"general\" replace/>} />\n//     <Route path=\"general\" element={<GeneralSettingsSection .../>} />\n//     <Route path=\"security\" element={<SecuritySection/>} />\n//     <Route path=\"notifications\" element={<NotificationsSection/>} />\n//   </Route>\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Tabs (navigation) are fine for a SMALL number (2–4) of PEER views inside ONE task/section\n//    — e.g. \"プロフィール\" ⇄ \"環境設定\" within a single account page — where losing the URL is OK.\n// ⛔ Tabs as the PRIMARY IA for broad settings (Account / Security / Billing / Members / …):\n//    use route-backed local navigation so every area is deep-linkable and back/forward works.\n// ⛔ Do NOT wrap the whole settings page in a Card, and do NOT make desktop a horizontal tab bar\n//    — persistent local nav scales to many sections; a tab strip does not.\n// ⛔ Do NOT invent CSS class names for the shell/nav/content — compose Flex + semantic tokens.",
+  "name": "settings-page-responsive",
+  "tagline": "Route-backed settings: persistent desktop local navigation, compact mobile tab strip, deep links + browser history, and bounded form content — NO Card wrapper, NO undefined CSS.",
+  "tags": [
+    "settings",
+    "form",
+    "tabs",
+    "admin",
+    "responsive",
+    "navigation"
+  ]
+}

package/agent/patterns/settings-section-rows.json

@@ -0,0 +1,23 @@
+{
+  "aliases": [
+    "settings-section",
+    "settings-row",
+    "danger-zone",
+    "billing-handoff",
+    "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.",
+  "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.",
+  "tags": [
+    "settings",
+    "account",
+    "billing",
+    "danger",
+    "preferences",
+    "listrow",
+    "card",
+    "admin"
+  ]
+}

package/agent/patterns/signup-form.json

@@ -0,0 +1,13 @@
+{
+  "code": "import { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\nimport { Card, CardHeader, CardTitle, CardContent, CardFooter } from \"@godxjp/ui/data-display\";\nimport { FormField, Input } from \"@godxjp/ui/data-entry\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\nconst schema = z.object({\n  name: z.string().min(1, \"氏名は必須です\"),\n  email: z.string().email(\"有効なメールアドレスを入力してください\"),\n});\ntype Values = z.infer<typeof schema>;\n\nexport function SignUpCard() {\n  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<Values>({ resolver: zodResolver(schema) });\n  const onSubmit = handleSubmit(async (v) => {\n    await fetch(\"/api/signup\", { method: \"POST\", body: JSON.stringify(v) });\n  });\n  return (\n    <Card>\n      <CardHeader><CardTitle>アカウント作成</CardTitle></CardHeader>\n      <CardContent>\n        <form id=\"signup\" onSubmit={onSubmit}>\n          {/* Vertical rhythm comes from Flex direction=\"col\" gap — never space-y-*/gap-* utilities. */}\n          <Flex direction=\"col\" gap=\"md\">\n            <FormField id=\"name\" label=\"氏名\" required error={errors.name?.message}>\n              <Input id=\"name\" {...register(\"name\")} />\n            </FormField>\n            <FormField id=\"email\" label=\"メールアドレス\" required error={errors.email?.message}>\n              <Input id=\"email\" type=\"email\" {...register(\"email\")} />\n            </FormField>\n          </Flex>\n        </form>\n      </CardContent>\n      <CardFooter separated>\n        <Button type=\"submit\" form=\"signup\" loading={isSubmitting}>アカウントを作成</Button>\n      </CardFooter>\n    </Card>\n  );\n}",
+  "name": "signup-form",
+  "tagline": "Card-wrapped sign-up form using react-hook-form + zod with FormField/Input and a CardFooter action bar (real @godxjp/ui API).",
+  "tags": [
+    "form",
+    "auth",
+    "sign-up",
+    "zod",
+    "validation",
+    "react-hook-form"
+  ]
+}

package/agent/patterns/topbar-account-chip.json

@@ -0,0 +1,18 @@
+{
+  "aliases": [
+    "user-chip",
+    "account-menu",
+    "signed-in-user"
+  ],
+  "code": "import { Flex } from \"@godxjp/ui/layout\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"@godxjp/ui/data-display\";\nimport { Button, Text } from \"@godxjp/ui/general\";\nimport { LogOut } from \"lucide-react\";\n\n// ❌ <div className=\"inline-flex items-center gap-1.5 rounded-full border py-0.5\">…</div>\n//    → 38px tall next to 32px controls, and the audit flags every class on it.\n// ✅ a Flex row of real primitives: Avatar (control-sized), Text, an icon Button.\nexport function AccountChip({ user, onSignOut }: { user: { name: string; email: string; avatarUrl?: string }; onSignOut: () => void }) {\n  return (\n    <Flex gap=\"xs\" align=\"center\" title={user.email}>\n      <Avatar>\n        {user.avatarUrl && <AvatarImage src={user.avatarUrl} alt=\"\" />}\n        <AvatarFallback>{user.name.slice(0, 1)}</AvatarFallback>\n      </Avatar>\n      <Text>{user.name}</Text>\n      <Button variant=\"ghost\" size=\"icon\" aria-label=\"Sign out\" onClick={onSignOut}><LogOut /></Button>\n    </Flex>\n  );\n}\n\n// In the page header, a language Select takes width=\"auto\" so it does not swallow the row:\n// <PageContainer title=\"…\" extra={<><Select …><SelectTrigger width=\"auto\">…</SelectTrigger>…</Select><AccountChip … /><Button>Send</Button></>}>\n",
+  "name": "topbar-account-chip",
+  "tagline": "Signed-in user in a PageContainer `extra` slot: Avatar + name + sign-out as a Flex row of primitives — same control height as the buttons beside it. Never a hand-rolled rounded-full border div.",
+  "tags": [
+    "auth",
+    "topbar",
+    "avatar",
+    "header",
+    "account",
+    "chip"
+  ]
+}