@godxjp/ui 30.8.0 → 31.0.2

package/README.md

@@ -112,7 +112,8 @@ A value is defined **once** as a CSS var (`--primary`), mapped to a utility in t
 | **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `Field`, `DatePicker`, `TimePicker`, `Combobox`, `Switch`, `Toggle`, `Upload`, `Cascader`, `TreeSelect`, `ColorPicker`, `Slider`, `PasswordInput`, `PasswordStrength`, `InputOTP`, `Rating`, `TagInput` |
 | **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                         |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
-| **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
+| **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState` (adapter subpath — pulls TanStack Query; no router)                                                                                                                                                   |
+| **React Router**   | `@godxjp/ui/react-router` | `PrefetchLink` — imports the optional `react-router-dom` peer, so it is kept out of `/query` (gh#996)                                                                                                                                   |
 | **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                                                              |
 | **App**            | `@godxjp/ui/app`          | `AppProvider`, `useDateTime` (adapter — i18n/datetime singleton)                                                                                                                                                                        |
 | **Datetime**       | `@godxjp/ui/datetime`     | `formatDate` (mandatory for display)                                                                                                                                                                                                    |
@@ -214,7 +215,29 @@ slices below roughly 620 distinct characters. Full table and reasoning in
 > missing layer fails silently: menus render with no background, rows with no
 > height. `styles`, `styles/core`, `styles/core-with-fallbacks` and
 > `styles/core-with-jis-level1` are the four supported entries; the runtime `visual-audit` flags a
-> page whose layers are incomplete (`css-layers-missing`).
+> page whose layers are incomplete (`css-layers-missing`). The one supported way to ship LESS
+> than `core` is `prune-css` below — the tool slices along the dependency graph the package
+> ships, so it cannot forget a layer the way a hand-picked list does.
+
+### prune-css — ship only the component layers you use (gh#971)
+
+`core` still carries every component's layers (~64 KB gzip for all ~165). If that remainder
+matters, let the package slice it:
+
+```bash
+npx @godxjp/ui prune-css resources/js --out resources/css/godx-ui.css   # --fonts for the bundled faces
+```
+
+It scans your sources for `@godxjp/ui` imports, resolves the CSS layer dependency closure from
+the graph shipped in `dist/styles/layers.json` (what each component's internals render is part
+of the graph — a `DataTable` still gets its dropdown and pagination surfaces), and emits a file
+that imports the foundation plus only the needed layers, in `styles/index.css`'s exact order.
+Import that file INSTEAD of `@godxjp/ui/styles`. Defaults mirror `styles/core` (no
+`@font-face`); the sonner / react-day-picker vendor sheets come along only when a used
+component renders them. **Re-run it whenever the set of components you use changes and after
+every upgrade** — the emitted header says so, and the tool refuses to run against a manifest
+from a different package version. Measured on gh#971's 15-component app: 368 KB gzip
+(`styles`) → 86 KB (`core`) → 75 KB pruned; a small 8-component app lands at 55 KB.
 
 ## Golden ratio (φ ≈ 1.618)
 

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 30.8.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.0.2.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.

package/agent/components/PrefetchLink.json

@@ -1,7 +1,7 @@
 {
-  "example": "import { PrefetchLink } from \"@godxjp/ui/query\";\nimport { fetchInvoice } from \"@/api/invoices\";\n\n// Inside a table row or list item:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  staleTime={60_000}\n  className=\"font-medium hover:underline\"\n>\n  {invoice.number}\n</PrefetchLink>\n\n// Disable prefetch for rows where data is not yet stable:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  prefetchOn=\"none\"\n>\n  {invoice.number}\n</PrefetchLink>",
+  "example": "import { PrefetchLink } from \"@godxjp/ui/react-router\";\nimport { fetchInvoice } from \"@/api/invoices\";\n\n// Inside a table row or list item:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  staleTime={60_000}\n  className=\"font-medium hover:underline\"\n>\n  {invoice.number}\n</PrefetchLink>\n\n// Disable prefetch for rows where data is not yet stable:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  prefetchOn=\"none\"\n>\n  {invoice.number}\n</PrefetchLink>",
   "group": "data-display",
-  "importPath": "@godxjp/ui/query",
+  "importPath": "@godxjp/ui/react-router",
   "name": "PrefetchLink",
   "props": [
     {
@@ -46,7 +46,7 @@
     31
   ],
   "storyPath": "data-display/PrefetchLink.stories.tsx",
-  "tagline": "React Router Link that fires prefetchQuery on hover/focus so detail pages feel instant — requires a TanStack Query QueryClient in context.",
+  "tagline": "React Router Link that fires prefetchQuery on hover/focus so detail pages feel instant — requires a TanStack Query QueryClient in context. Imported from `@godxjp/ui/react-router` (not `/query`) because it imports the optional `react-router-dom` peer; in `/query` it broke every router-less app's build (gh#996).",
   "usage": [
     "DO: provide a queryKey that exactly matches the destination page's useQuery key — a mismatch means the prefetch populates a different cache slot and the page still loads cold.",
     "DO: keep queryFn lightweight and side-effect-free; it runs speculatively on hover. Avoid mutations or write operations inside queryFn.",

package/agent/components-index.json

@@ -590,7 +590,7 @@
   {
     "group": "data-display",
     "name": "PrefetchLink",
-    "tagline": "React Router Link that fires prefetchQuery on hover/focus so detail pages feel instant — requires a TanStack Query QueryClient in context."
+    "tagline": "React Router Link that fires prefetchQuery on hover/focus so detail pages feel instant — requires a TanStack Query QueryClient in context. Imported from `@godxjp/ui/react-router` (not `/query`) because it imports the optional `react-router-dom` peer; in `/query` it broke every router-less app's build (gh#996)."
   },
   {
     "group": "data-display",

package/agent/components.json

@@ -11201,9 +11201,9 @@
     ]
   },
   {
-    "example": "import { PrefetchLink } from \"@godxjp/ui/query\";\nimport { fetchInvoice } from \"@/api/invoices\";\n\n// Inside a table row or list item:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  staleTime={60_000}\n  className=\"font-medium hover:underline\"\n>\n  {invoice.number}\n</PrefetchLink>\n\n// Disable prefetch for rows where data is not yet stable:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  prefetchOn=\"none\"\n>\n  {invoice.number}\n</PrefetchLink>",
+    "example": "import { PrefetchLink } from \"@godxjp/ui/react-router\";\nimport { fetchInvoice } from \"@/api/invoices\";\n\n// Inside a table row or list item:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  staleTime={60_000}\n  className=\"font-medium hover:underline\"\n>\n  {invoice.number}\n</PrefetchLink>\n\n// Disable prefetch for rows where data is not yet stable:\n<PrefetchLink\n  to={`/invoices/${invoice.id}`}\n  queryKey={[\"invoice\", invoice.id]}\n  queryFn={() => fetchInvoice(invoice.id)}\n  prefetchOn=\"none\"\n>\n  {invoice.number}\n</PrefetchLink>",
     "group": "data-display",
-    "importPath": "@godxjp/ui/query",
+    "importPath": "@godxjp/ui/react-router",
     "name": "PrefetchLink",
     "props": [
       {
@@ -11248,7 +11248,7 @@
       31
     ],
     "storyPath": "data-display/PrefetchLink.stories.tsx",
-    "tagline": "React Router Link that fires prefetchQuery on hover/focus so detail pages feel instant — requires a TanStack Query QueryClient in context.",
+    "tagline": "React Router Link that fires prefetchQuery on hover/focus so detail pages feel instant — requires a TanStack Query QueryClient in context. Imported from `@godxjp/ui/react-router` (not `/query`) because it imports the optional `react-router-dom` peer; in `/query` it broke every router-less app's build (gh#996).",
     "usage": [
       "DO: provide a queryKey that exactly matches the destination page's useQuery key — a mismatch means the prefetch populates a different cache slot and the page still loads cold.",
       "DO: keep queryFn lightweight and side-effect-free; it runs speculatively on hover. Avoid mutations or write operations inside queryFn.",

package/agent/index.json

@@ -48,7 +48,7 @@
   "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/v30.8.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.0.2/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
@@ -62,5 +62,5 @@
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "30.8.0"
+  "version": "31.0.2"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
 > A Japanese-enterprise React design system: 175 components, 2074 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 30.8.0.
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.0.2.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@30.8.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.0.2`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v30.8.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.0.2/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/settings-page-responsive.json

@@ -4,7 +4,7 @@
     "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.",
+  "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 { Form, 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 — set ONCE on the <Form>, which every FormField reads\n// (gh#998). FormField OWNS the label↔control relationship — do NOT 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 layout=\"horizontal\" controlWidth=\"24rem\"\n      onSubmit={(e) => { e.preventDefault(); onSave(new FormData(e.currentTarget)); }}>\n      <FormField id=\"ws-name\" label=\"ワークスペース名\"\n        helper=\"請求書や共有リンクに表示されます。\" error={error}>\n        <Input id=\"ws-name\" name=\"name\" defaultValue={defaults.name} />\n      </FormField>\n      <FormField id=\"ws-email\" label=\"連絡先メール\">\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    </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": [

package/agent/patterns.json

@@ -34,7 +34,7 @@
       "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.",
+    "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 { Form, 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 — set ONCE on the <Form>, which every FormField reads\n// (gh#998). FormField OWNS the label↔control relationship — do NOT 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 layout=\"horizontal\" controlWidth=\"24rem\"\n      onSubmit={(e) => { e.preventDefault(); onSave(new FormData(e.currentTarget)); }}>\n      <FormField id=\"ws-name\" label=\"ワークスペース名\"\n        helper=\"請求書や共有リンクに表示されます。\" error={error}>\n        <Input id=\"ws-name\" name=\"name\" defaultValue={defaults.name} />\n      </FormField>\n      <FormField id=\"ws-email\" label=\"連絡先メール\">\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    </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": [

package/dist/components/query/index.d.ts

@@ -6,7 +6,5 @@ export { ButtonRefetch } from "./query-refetch-button.js";
 export type { ButtonRefetchProp, ButtonRefetchProps } from "./query-refetch-button.js";
 export { InfiniteQueryState, flattenItemPages } from "./infinite-query-state.js";
 export type { InfiniteQueryStateProp, InfiniteQueryStateProps } from "./infinite-query-state.js";
-export { PrefetchLink } from "./prefetch-link.js";
-export type { PrefetchLinkProp, PrefetchLinkProps } from "./prefetch-link.js";
 export { classifyQueryError, isRetryableQueryError } from "../../lib/query-error.js";
 export type { QueryErrorCategory, QueryErrorInfo } from "../../lib/query-error.js";

package/dist/components/query/index.js

@@ -2,14 +2,12 @@ import { DataState } from "./data-state.js";
 import { AlertMutationFeedback } from "./mutation-feedback.js";
 import { ButtonRefetch } from "./query-refetch-button.js";
 import { InfiniteQueryState, flattenItemPages } from "./infinite-query-state.js";
-import { PrefetchLink } from "./prefetch-link.js";
 import { classifyQueryError, isRetryableQueryError } from "../../lib/query-error.js";
 export {
   AlertMutationFeedback,
   ButtonRefetch,
   DataState,
   InfiniteQueryState,
-  PrefetchLink,
   classifyQueryError,
   flattenItemPages,
   isRetryableQueryError

package/dist/components/react-router/index.d.ts

@@ -0,0 +1,2 @@
+export { PrefetchLink } from "./prefetch-link.js";
+export type { PrefetchLinkProp, PrefetchLinkProps } from "./prefetch-link.js";

package/dist/components/react-router/index.js

@@ -0,0 +1,4 @@
+import { PrefetchLink } from "./prefetch-link.js";
+export {
+  PrefetchLink
+};

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": "30.8.0",
+  "version": "31.0.2",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/alert-layout.css

@@ -2,6 +2,8 @@
 
 @layer components {
   [data-slot="alert"] {
+
+    container: alert / inline-size;
     position: relative;
     display: flex;
     align-items: flex-start;
@@ -133,7 +135,7 @@
     gap: var(--alert-inner-space-gap);
   }
 
-  @media (min-width: 640px) {
+  @container alert (min-width: 40rem) {
     [data-slot="alert-body"]:has(> [data-slot="alert-actions"]) {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
@@ -190,7 +192,7 @@
     width: 100%;
   }
 
-  @media (min-width: 640px) {
+  @container alert (min-width: 40rem) {
     [data-slot="alert-actions"] {
       width: auto;
       justify-content: flex-end;