@godxjp/ui 32.0.5 → 32.1.1

package/agent/index.json

@@ -2,9 +2,9 @@
   "counts": {
     "anti-ai-tells": 26,
     "components": 161,
-    "patterns": 22,
+    "patterns": 24,
     "rules": 43,
-    "tokens": 2183,
+    "tokens": 2193,
     "vocabulary": 14
   },
   "files": [
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.0.5/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.1.1/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1861,
-      "foundation": 210,
+      "component": 1870,
+      "foundation": 211,
       "semantic": 112
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "32.0.5"
+  "version": "32.1.1"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 161 components, 2183 design tokens,
-> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.0.5.
+> A Japanese-enterprise React design system: 161 components, 2193 design tokens,
+> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.1.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@32.0.5`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@32.1.1`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -14,11 +14,11 @@ that can only fetch URLs.
 
 ## Catalog
 
-- [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 22 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
+- [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 24 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
 - [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 47 KB — all 161 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 210 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1861 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1870 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 43 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -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/v32.0.5/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v32.1.1/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/card-grid-selection.json

@@ -0,0 +1,21 @@
+{
+  "aliases": [
+    "card-selection",
+    "selectable-cards",
+    "bulk-delete-cards",
+    "grid-bulk-actions"
+  ],
+  "code": "// Live page: /showcase/card-grid-selection (docs/showcase/card-grid-selection.tsx).\n// DataTable.BulkActions reads the table context only when one exists — outside a table pass\n// `count`: it renders nothing at 0, and the localised \"N selected\" + a labelled region above 0.\n// The Checkbox's inline label is the item name: the name is the click target and the\n// accessible name. Do NOT make the whole Card an onClick div.\nimport * as React from \"react\";\nimport { FolderOpen, Trash2 } from \"lucide-react\";\nimport { Card, CardContent, DataTable, EmptyState } from \"@godxjp/ui/data-display\";\nimport { Checkbox } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog, Toaster, toast } from \"@godxjp/ui/feedback\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Item = { id: string; name: string };\n\nexport function SelectableCardGrid({ source }: { source: Item[] }) {\n  const { t } = useTranslation();\n  const [items, setItems] = React.useState(source);\n  const [selected, setSelected] = React.useState<Set<string>>(new Set());\n  const [confirmOpen, setConfirmOpen] = React.useState(false);\n  const [confirmCount, setConfirmCount] = React.useState(0); // frozen: selection clears on confirm\n\n  const all = items.length > 0 && items.every((i) => selected.has(i.id));\n  const selectAll: boolean | \"indeterminate\" = all ? true : selected.size > 0 ? \"indeterminate\" : false;\n\n  const deleteSelected = () => {\n    const removed = new Set(selected);\n    setItems((cur) => cur.filter((i) => !removed.has(i.id)));\n    setSelected(new Set());\n    toast(t(\"files.deleted\", { count: removed.size }), {\n      action: {\n        label: t(\"files.undo\"),\n        // restore in the SOURCE order, not appended at the end\n        onClick: () => setItems((cur) => source.filter((i) => removed.has(i.id) || cur.some((c) => c.id === i.id))),\n      },\n    });\n  };\n\n  if (items.length === 0) {\n    return (\n      <EmptyState\n        icon={FolderOpen}\n        variant=\"section\"\n        title={t(\"files.emptyTitle\")}\n        action={<Button variant=\"outline\" onClick={() => setItems(source)}>{t(\"files.reset\")}</Button>}\n      />\n    );\n  }\n\n  return (\n    <Flex direction=\"col\" gap=\"md\">\n      <Flex direction=\"row\" align=\"center\" gap=\"md\" wrap>\n        <Checkbox\n          checked={selectAll}\n          onCheckedChange={(next) => setSelected(next === true ? new Set(items.map((i) => i.id)) : new Set())}\n        >\n          {t(\"files.selectAll\")}\n        </Checkbox>\n        <DataTable.BulkActions count={selected.size}>\n          <Button variant=\"destructive\" size=\"sm\" onClick={() => { setConfirmCount(selected.size); setConfirmOpen(true); }}>\n            <Trash2 aria-hidden=\"true\" />\n            {t(\"files.delete\")}\n          </Button>\n        </DataTable.BulkActions>\n      </Flex>\n      <ResponsiveGrid columns={{ base: 1, sm: 2, lg: 3 }}>\n        {items.map((item) => (\n          <Card key={item.id} className={selected.has(item.id) ? \"border-primary\" : undefined}>\n            <CardContent>\n              <Checkbox\n                checked={selected.has(item.id)}\n                onCheckedChange={(on) =>\n                  setSelected((prev) => {\n                    const next = new Set(prev);\n                    if (on === true) next.add(item.id); else next.delete(item.id);\n                    return next;\n                  })\n                }\n              >\n                {item.name}\n              </Checkbox>\n            </CardContent>\n          </Card>\n        ))}\n      </ResponsiveGrid>\n      <AlertDialog\n        open={confirmOpen}\n        onOpenChange={setConfirmOpen}\n        variant=\"destructive\"\n        title={t(\"files.confirmTitle\", { count: confirmCount })}\n        confirmLabel={t(\"files.delete\")}\n        onConfirm={deleteSelected}\n      />\n      <Toaster />{/* once per app — usually in the root layout, not here */}\n    </Flex>\n  );\n}",
+  "name": "card-grid-selection",
+  "tagline": "Select cards in a grid and act on them in bulk — Card + Checkbox per item, the real DataTable.BulkActions driven by count outside a table, indeterminate select-all, AlertDialog before delete, toast with Undo after, EmptyState when nothing is left.",
+  "tags": [
+    "selection",
+    "bulk",
+    "cards",
+    "grid",
+    "delete",
+    "undo",
+    "empty",
+    "checkbox"
+  ]
+}

package/agent/patterns/dependent-selects.json

@@ -0,0 +1,20 @@
+{
+  "aliases": [
+    "cascading-selects",
+    "country-state-city",
+    "chained-selects",
+    "linked-selects"
+  ],
+  "code": "// Live page: /showcase/form-dependent-selects (docs/showcase/form-dependent-selects.tsx).\n// Three rules: (1) child disabled until parent has a value + helper saying why;\n// (2) child loading while its options fetch; (3) parent change resets EVERY descendant to \"\".\n// Reset to \"\", Select's controlled empty value — undefined flips it to uncontrolled.\nimport * as React from \"react\";\nimport { Form, FormField, Select } from \"@godxjp/ui/data-entry\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Option = { value: string; label: string };\ntype Address = { country: string; region: string; city: string };\n\n// Fetch options for a parent value. The answer is stored WITH the parent it answers, so\n// `loading` is derived and a slow answer for an OLD parent is never shown on the new one.\nfunction useChildOptions(parent: string, fetchOptions: (parent: string) => Promise<Option[]>) {\n  const [answer, setAnswer] = React.useState<{ parent: string; options: Option[] }>({ parent: \"\", options: [] });\n  React.useEffect(() => {\n    if (!parent) return;\n    let live = true;\n    void fetchOptions(parent).then((options) => { if (live) setAnswer({ parent, options }); });\n    return () => { live = false; };\n  }, [parent, fetchOptions]);\n  const ready = parent !== \"\" && answer.parent === parent;\n  return { options: ready ? answer.options : [], loading: parent !== \"\" && !ready };\n}\n\nexport function AddressFields({\n  fetchRegions,\n  fetchCities,\n}: {\n  fetchRegions: (country: string) => Promise<Option[]>; // stable (module-level or useCallback)\n  fetchCities: (region: string) => Promise<Option[]>;\n}) {\n  const { t, locale } = useTranslation();\n  const [value, setValue] = React.useState<Address>({ country: \"\", region: \"\", city: \"\" });\n  const regions = useChildOptions(value.country, fetchRegions);\n  const cities = useChildOptions(value.region, fetchCities);\n\n  // ISO 3166-1 alpha-2 → the reader's language, no catalogue needed.\n  const countries = React.useMemo(() => {\n    const names = new Intl.DisplayNames([locale], { type: \"region\" });\n    return [\"JP\", \"US\", \"VN\"].map((code) => ({ value: code, label: names.of(code) ?? code }));\n  }, [locale]);\n\n  return (\n    <Form controlWidth=\"20rem\">\n      <Flex direction=\"col\" gap=\"md\">\n        <FormField id=\"country\" label={t(\"address.country\")}>\n          <Select\n            value={value.country}\n            onValueChange={(country: string) => setValue({ country, region: \"\", city: \"\" })}\n            options={countries}\n            placeholder={t(\"address.countryPlaceholder\")}\n          />\n        </FormField>\n        <FormField\n          id=\"region\"\n          label={t(\"address.region\")}\n          helper={value.country ? undefined : t(\"address.selectCountryFirst\")}\n        >\n          <Select\n            value={value.region}\n            onValueChange={(region: string) => setValue({ ...value, region, city: \"\" })}\n            options={regions.options}\n            disabled={!value.country}\n            loading={regions.loading}\n            placeholder={t(\"address.regionPlaceholder\")}\n          />\n        </FormField>\n        <FormField\n          id=\"city\"\n          label={t(\"address.city\")}\n          helper={value.region ? undefined : t(\"address.selectRegionFirst\")}\n        >\n          <Select\n            value={value.city}\n            onValueChange={(city: string) => setValue({ ...value, city })}\n            options={cities.options}\n            disabled={!value.region}\n            loading={cities.loading}\n            placeholder={t(\"address.cityPlaceholder\")}\n          />\n        </FormField>\n      </Flex>\n    </Form>\n  );\n}",
+  "name": "dependent-selects",
+  "tagline": "Country → state → city: three Selects where each child is disabled until its parent has a value (FormField helper says why), loading while its options fetch, and reset to \"\" when the parent changes. A composition, not a component — reach for Cascader only when it is ONE field.",
+  "tags": [
+    "form",
+    "select",
+    "dependent",
+    "cascading",
+    "address",
+    "loading",
+    "reset"
+  ]
+}

package/agent/patterns-index.json

@@ -91,6 +91,45 @@
       "delete"
     ]
   },
+  {
+    "aliases": [
+      "cascading-selects",
+      "country-state-city",
+      "chained-selects",
+      "linked-selects"
+    ],
+    "name": "dependent-selects",
+    "tagline": "Country → state → city: three Selects where each child is disabled until its parent has a value (FormField helper says why), loading while its options fetch, and reset to \"\" when the parent changes. A composition, not a component — reach for Cascader only when it is ONE field.",
+    "tags": [
+      "form",
+      "select",
+      "dependent",
+      "cascading",
+      "address",
+      "loading",
+      "reset"
+    ]
+  },
+  {
+    "aliases": [
+      "card-selection",
+      "selectable-cards",
+      "bulk-delete-cards",
+      "grid-bulk-actions"
+    ],
+    "name": "card-grid-selection",
+    "tagline": "Select cards in a grid and act on them in bulk — Card + Checkbox per item, the real DataTable.BulkActions driven by count outside a table, indeterminate select-all, AlertDialog before delete, toast with Undo after, EmptyState when nothing is left.",
+    "tags": [
+      "selection",
+      "bulk",
+      "cards",
+      "grid",
+      "delete",
+      "undo",
+      "empty",
+      "checkbox"
+    ]
+  },
   {
     "name": "deferred-loading",
     "tagline": "Inertia deferred props with a Skeleton fallback — SkeletonTable while data loads, then DataTable (real @godxjp/ui API).",

package/agent/patterns.json

@@ -97,6 +97,47 @@
       "delete"
     ]
   },
+  {
+    "aliases": [
+      "cascading-selects",
+      "country-state-city",
+      "chained-selects",
+      "linked-selects"
+    ],
+    "code": "// Live page: /showcase/form-dependent-selects (docs/showcase/form-dependent-selects.tsx).\n// Three rules: (1) child disabled until parent has a value + helper saying why;\n// (2) child loading while its options fetch; (3) parent change resets EVERY descendant to \"\".\n// Reset to \"\", Select's controlled empty value — undefined flips it to uncontrolled.\nimport * as React from \"react\";\nimport { Form, FormField, Select } from \"@godxjp/ui/data-entry\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Option = { value: string; label: string };\ntype Address = { country: string; region: string; city: string };\n\n// Fetch options for a parent value. The answer is stored WITH the parent it answers, so\n// `loading` is derived and a slow answer for an OLD parent is never shown on the new one.\nfunction useChildOptions(parent: string, fetchOptions: (parent: string) => Promise<Option[]>) {\n  const [answer, setAnswer] = React.useState<{ parent: string; options: Option[] }>({ parent: \"\", options: [] });\n  React.useEffect(() => {\n    if (!parent) return;\n    let live = true;\n    void fetchOptions(parent).then((options) => { if (live) setAnswer({ parent, options }); });\n    return () => { live = false; };\n  }, [parent, fetchOptions]);\n  const ready = parent !== \"\" && answer.parent === parent;\n  return { options: ready ? answer.options : [], loading: parent !== \"\" && !ready };\n}\n\nexport function AddressFields({\n  fetchRegions,\n  fetchCities,\n}: {\n  fetchRegions: (country: string) => Promise<Option[]>; // stable (module-level or useCallback)\n  fetchCities: (region: string) => Promise<Option[]>;\n}) {\n  const { t, locale } = useTranslation();\n  const [value, setValue] = React.useState<Address>({ country: \"\", region: \"\", city: \"\" });\n  const regions = useChildOptions(value.country, fetchRegions);\n  const cities = useChildOptions(value.region, fetchCities);\n\n  // ISO 3166-1 alpha-2 → the reader's language, no catalogue needed.\n  const countries = React.useMemo(() => {\n    const names = new Intl.DisplayNames([locale], { type: \"region\" });\n    return [\"JP\", \"US\", \"VN\"].map((code) => ({ value: code, label: names.of(code) ?? code }));\n  }, [locale]);\n\n  return (\n    <Form controlWidth=\"20rem\">\n      <Flex direction=\"col\" gap=\"md\">\n        <FormField id=\"country\" label={t(\"address.country\")}>\n          <Select\n            value={value.country}\n            onValueChange={(country: string) => setValue({ country, region: \"\", city: \"\" })}\n            options={countries}\n            placeholder={t(\"address.countryPlaceholder\")}\n          />\n        </FormField>\n        <FormField\n          id=\"region\"\n          label={t(\"address.region\")}\n          helper={value.country ? undefined : t(\"address.selectCountryFirst\")}\n        >\n          <Select\n            value={value.region}\n            onValueChange={(region: string) => setValue({ ...value, region, city: \"\" })}\n            options={regions.options}\n            disabled={!value.country}\n            loading={regions.loading}\n            placeholder={t(\"address.regionPlaceholder\")}\n          />\n        </FormField>\n        <FormField\n          id=\"city\"\n          label={t(\"address.city\")}\n          helper={value.region ? undefined : t(\"address.selectRegionFirst\")}\n        >\n          <Select\n            value={value.city}\n            onValueChange={(city: string) => setValue({ ...value, city })}\n            options={cities.options}\n            disabled={!value.region}\n            loading={cities.loading}\n            placeholder={t(\"address.cityPlaceholder\")}\n          />\n        </FormField>\n      </Flex>\n    </Form>\n  );\n}",
+    "name": "dependent-selects",
+    "tagline": "Country → state → city: three Selects where each child is disabled until its parent has a value (FormField helper says why), loading while its options fetch, and reset to \"\" when the parent changes. A composition, not a component — reach for Cascader only when it is ONE field.",
+    "tags": [
+      "form",
+      "select",
+      "dependent",
+      "cascading",
+      "address",
+      "loading",
+      "reset"
+    ]
+  },
+  {
+    "aliases": [
+      "card-selection",
+      "selectable-cards",
+      "bulk-delete-cards",
+      "grid-bulk-actions"
+    ],
+    "code": "// Live page: /showcase/card-grid-selection (docs/showcase/card-grid-selection.tsx).\n// DataTable.BulkActions reads the table context only when one exists — outside a table pass\n// `count`: it renders nothing at 0, and the localised \"N selected\" + a labelled region above 0.\n// The Checkbox's inline label is the item name: the name is the click target and the\n// accessible name. Do NOT make the whole Card an onClick div.\nimport * as React from \"react\";\nimport { FolderOpen, Trash2 } from \"lucide-react\";\nimport { Card, CardContent, DataTable, EmptyState } from \"@godxjp/ui/data-display\";\nimport { Checkbox } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog, Toaster, toast } from \"@godxjp/ui/feedback\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { useTranslation } from \"@godxjp/ui/i18n\";\n\ntype Item = { id: string; name: string };\n\nexport function SelectableCardGrid({ source }: { source: Item[] }) {\n  const { t } = useTranslation();\n  const [items, setItems] = React.useState(source);\n  const [selected, setSelected] = React.useState<Set<string>>(new Set());\n  const [confirmOpen, setConfirmOpen] = React.useState(false);\n  const [confirmCount, setConfirmCount] = React.useState(0); // frozen: selection clears on confirm\n\n  const all = items.length > 0 && items.every((i) => selected.has(i.id));\n  const selectAll: boolean | \"indeterminate\" = all ? true : selected.size > 0 ? \"indeterminate\" : false;\n\n  const deleteSelected = () => {\n    const removed = new Set(selected);\n    setItems((cur) => cur.filter((i) => !removed.has(i.id)));\n    setSelected(new Set());\n    toast(t(\"files.deleted\", { count: removed.size }), {\n      action: {\n        label: t(\"files.undo\"),\n        // restore in the SOURCE order, not appended at the end\n        onClick: () => setItems((cur) => source.filter((i) => removed.has(i.id) || cur.some((c) => c.id === i.id))),\n      },\n    });\n  };\n\n  if (items.length === 0) {\n    return (\n      <EmptyState\n        icon={FolderOpen}\n        variant=\"section\"\n        title={t(\"files.emptyTitle\")}\n        action={<Button variant=\"outline\" onClick={() => setItems(source)}>{t(\"files.reset\")}</Button>}\n      />\n    );\n  }\n\n  return (\n    <Flex direction=\"col\" gap=\"md\">\n      <Flex direction=\"row\" align=\"center\" gap=\"md\" wrap>\n        <Checkbox\n          checked={selectAll}\n          onCheckedChange={(next) => setSelected(next === true ? new Set(items.map((i) => i.id)) : new Set())}\n        >\n          {t(\"files.selectAll\")}\n        </Checkbox>\n        <DataTable.BulkActions count={selected.size}>\n          <Button variant=\"destructive\" size=\"sm\" onClick={() => { setConfirmCount(selected.size); setConfirmOpen(true); }}>\n            <Trash2 aria-hidden=\"true\" />\n            {t(\"files.delete\")}\n          </Button>\n        </DataTable.BulkActions>\n      </Flex>\n      <ResponsiveGrid columns={{ base: 1, sm: 2, lg: 3 }}>\n        {items.map((item) => (\n          <Card key={item.id} className={selected.has(item.id) ? \"border-primary\" : undefined}>\n            <CardContent>\n              <Checkbox\n                checked={selected.has(item.id)}\n                onCheckedChange={(on) =>\n                  setSelected((prev) => {\n                    const next = new Set(prev);\n                    if (on === true) next.add(item.id); else next.delete(item.id);\n                    return next;\n                  })\n                }\n              >\n                {item.name}\n              </Checkbox>\n            </CardContent>\n          </Card>\n        ))}\n      </ResponsiveGrid>\n      <AlertDialog\n        open={confirmOpen}\n        onOpenChange={setConfirmOpen}\n        variant=\"destructive\"\n        title={t(\"files.confirmTitle\", { count: confirmCount })}\n        confirmLabel={t(\"files.delete\")}\n        onConfirm={deleteSelected}\n      />\n      <Toaster />{/* once per app — usually in the root layout, not here */}\n    </Flex>\n  );\n}",
+    "name": "card-grid-selection",
+    "tagline": "Select cards in a grid and act on them in bulk — Card + Checkbox per item, the real DataTable.BulkActions driven by count outside a table, indeterminate select-all, AlertDialog before delete, toast with Undo after, EmptyState when nothing is left.",
+    "tags": [
+      "selection",
+      "bulk",
+      "cards",
+      "grid",
+      "delete",
+      "undo",
+      "empty",
+      "checkbox"
+    ]
+  },
   {
     "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",

package/agent/tokens.json

@@ -1241,6 +1241,12 @@
     "tier": "foundation",
     "value": "160ms"
   },
+  {
+    "description": "How long a toast stays before it dismisses itself (gh#1253). In the MOTION tier, like `--activity-interval`: a component-token name has no property word for a duration. Sonner takes `duration` as a JS number, so `Toaster` reads this ONCE on mount with getComputedStyle — from its ThemeScope host when it has one, else `<html>` — and accepts `ms` or `s`. A theme override applies to toasts raised after the Toaster mounts; a per-call `duration` or the Toaster's own `duration` prop still wins. 4000ms is Sonner's own default.",
+    "name": "--toast-duration",
+    "tier": "foundation",
+    "value": "4000ms"
+  },
   {
     "description": "MARQUEE — the TRAVERSAL member of the loop family, and deliberately NOT `--duration-loop`. `--duration-loop` is 1400ms because it times a BREATH: a dot rising and falling, a bar sweeping a small box. A marquee's cycle is a distance being crossed, two orders of magnitude longer, and the two are not the same knob — binding them would mean a service that calms its typing indicator to 2s also whips its logo wall across the screen twice a second. Same tier, same naming, separate value. It is a duration PER SCREENFUL, not per cycle: the component measures one copy of the content and sets `--marquee-cycle-scale` to (copy width ÷ viewport width), so the duration of one lap is `interval × scale` and the PACE is the same whether the track carries one item or forty. A per-cycle duration would make forty logos forty times faster than one, which is how every pure-CSS marquee behaves and why none of them survive real content. 20s per screenful ≈ 60px/s at 1200px — the resting pace a logo wall reads at. The two ordinals are the `speed` prop's `slow` and `fast`; they are tokens rather than multipliers in the stylesheet so a theme can retune the ladder, not just its middle rung.",
     "name": "--marquee-interval",
@@ -3653,6 +3659,36 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Pressed Toggle LABEL colour — the pair to --toggle-on-background, `initial` like it (default hsl(var(--primary-foreground)) at the call site). Without it a service that quietened the pressed fill to a pale tint was left with white text on it.",
+    "name": "--toggle-on-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "`Toggle variant=\"quiet\"` pressed state (gh#1257) — role-mirror knobs, `initial`; defaults at the call site: fill hsl(var(--secondary)), label hsl(var(--foreground)), counter hsl(var(--background)) / hsl(var(--foreground)).",
+    "name": "--toggle-quiet-on-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--toggle-quiet-on-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--toggle-quiet-on-count-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--toggle-quiet-on-count-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
     "name": "--slider-track-background",
@@ -4469,6 +4505,18 @@
     "tier": "component",
     "value": "var(--space-1)"
   },
+  {
+    "description": "Text inset of a `width=\"full\"` day cell (gh#1258). The full cell reads from the start edge so a number can sit above badges, and with the unruled cell's `padding: 0` the numeral touched the cell edge — 0px left, 3px top, flagged by the library's own `text-edge-inset` rule (cell: >= 8px inline, >= 4px block). `initial` so the density-scaled defaults (var(--space-2) inline, var(--space-1) block) resolve at the call site, not frozen at the :root density. A shift board that wants a tighter or roomier cell sets these.",
+    "name": "--calendar-full-day-padding-inline",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--calendar-full-day-padding-block",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Colour of the day-grid ruling (`Calendar bordered`, on by default). `initial` on purpose: the role default is read at the call site as `var(--calendar-grid-border-color, hsl(var(--border)))` so it follows a scoped theme. The --border tier: L* 93.80 / 1.149:1 on the popover in light, L* 20.76 / 1.270:1 in dark — a rule exactly as heavy as a Card edge or a DataTable row rule. Asked for three times: 25.3.0 drew the grid at all, 27.6.0 lightened the full --input (3.47 / 3.88) to --input/0.5 (1.74 / 1.95, L* 78.67), and gh#730 measured that still darker than the --border every card and table uses and asked for the --border tier itself. Same tier as the RangeTimeline grid. Set any colour to retint, e.g. `hsl(var(--input) / 0.5)` for the 27.6.0 weight or `hsl(var(--input))` for the heavy line.",
     "name": "--calendar-grid-border-color",
@@ -9317,6 +9365,18 @@
     "tier": "component",
     "value": "var(--font-size-base)"
   },
+  {
+    "description": "`DropdownMenuItem description` (gh#1246): the muted second line takes the shortcut's xs step, and a two-line row swaps its fixed height for this block padding.",
+    "name": "--menu-item-description-font-size",
+    "tier": "component",
+    "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )"
+  },
+  {
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers.",
+    "name": "--menu-item-description-space-block",
+    "tier": "component",
+    "value": "var(--space-1)"
+  },
   {
     "description": "Inset rows (a checkbox/radio row without its own indicator) reserve the indicator column so labels stay aligned with their checked siblings.",
     "name": "--menu-item-inset-space-inline-start",

package/dist/components/data-entry/checkbox-group.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { CheckboxGroupProp } from "../../props/components/data-entry.prop.js";
 export type { CheckboxGroupProp, CheckboxGroupProp as CheckboxGroupProps, } from "../../props/components/data-entry.prop.js";
-export declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, id, className, children, ...ariaProps }: CheckboxGroupProp): React.JSX.Element;
+export declare function CheckboxGroup({ value: controlledValue, defaultValue, onValueChange, options, orientation, disabled, name, id, className, children, selectAll, ...ariaProps }: CheckboxGroupProp): React.JSX.Element;

package/dist/components/data-entry/checkbox-group.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { Checkbox } from "./checkbox.js";
 import { Field } from "./field.js";
+import { Separator } from "../layout/separator.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { choiceGroupClassName } from "./choice-option.js";
 function useControllableArray(controlled, defaultValue) {
   const [internal, setInternal] = React.useState(defaultValue);
@@ -28,8 +30,10 @@ function CheckboxGroup({
   id,
   className,
   children,
+  selectAll,
   ...ariaProps
 }) {
+  const { t } = useTranslation();
   const reactId = React.useId();
   const [value, setValue] = useControllableArray(controlledValue, defaultValue);
   const groupA11y = pickGroupFieldA11y(ariaProps);
@@ -42,8 +46,18 @@ function CheckboxGroup({
     setValue(next);
     onValueChange?.(next);
   };
+  const enabledValues = (options ?? []).filter((opt) => !opt.disabled).map((opt) => opt.value);
+  const selectedEnabled = enabledValues.filter((v) => value.includes(v)).length;
+  const allState = enabledValues.length > 0 && selectedEnabled === enabledValues.length ? true : selectedEnabled > 0 ? "indeterminate" : false;
+  const toggleAll = () => {
+    const next = allState === true ? value.filter((v) => !enabledValues.includes(v)) : [...value, ...enabledValues.filter((v) => !value.includes(v))];
+    setValue(next);
+    onValueChange?.(next);
+  };
+  const selectAllId = id ? `${id}-select-all` : `${reactId}-select-all`;
+  const selectAllLabel = typeof selectAll === "object" && selectAll.label != null ? selectAll.label : t("dataEntry.checkboxGroup.selectAll");
   if (options && options.length > 0) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         role: "group",
@@ -53,24 +67,49 @@ function CheckboxGroup({
         "aria-disabled": disabled ? true : void 0,
         "data-orientation": orientation,
         className: choiceGroupClassName(orientation, className),
-        children: options.map((opt, index) => {
-          const optionId = optionDomId(opt.value, index);
-          const checked = value.includes(opt.value);
-          return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              id: optionId,
-              name: resolvedName,
-              "data-field": resolvedField,
-              value: opt.value,
-              checked,
-              disabled: Boolean(disabled) || Boolean(opt.disabled),
-              onCheckedChange: () => {
-                toggle(opt.value);
+        children: [
+          selectAll ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                id: selectAllId,
+                label: selectAllLabel,
+                description: t("common.selectedOfTotal", {
+                  count: selectedEnabled,
+                  total: enabledValues.length
+                }),
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: selectAllId,
+                    checked: allState,
+                    disabled: Boolean(disabled) || enabledValues.length === 0,
+                    onCheckedChange: toggleAll
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(Separator, {})
+          ] }) : null,
+          options.map((opt, index) => {
+            const optionId = optionDomId(opt.value, index);
+            const checked = value.includes(opt.value);
+            return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: optionId,
+                name: resolvedName,
+                "data-field": resolvedField,
+                value: opt.value,
+                checked,
+                disabled: Boolean(disabled) || Boolean(opt.disabled),
+                onCheckedChange: () => {
+                  toggle(opt.value);
+                }
               }
-            }
-          ) }, opt.value);
-        })
+            ) }, opt.value);
+          })
+        ]
       }
     );
   }

package/dist/components/data-entry/command-palette.d.ts

@@ -27,6 +27,21 @@ export type CommandPaletteLabels = {
     select?: React.ReactNode;
     close?: React.ReactNode;
 };
+/**
+ * Recent queries the CONSUMER keeps (gh#1249). The palette only renders them — it never reads or
+ * writes `localStorage` or any other store, and it renders `items` exactly as given (de-duplicate
+ * and cap them before passing them in).
+ */
+export type CommandPaletteRecent = {
+    /** Most recent first. Duplicates are rendered as given. */
+    items: string[];
+    /** A recent query was chosen. The palette closes, like any other selection. */
+    onSelect: (query: string) => void;
+    /** The trailing "Clear recent searches" row was chosen. The palette stays open. */
+    onClear: () => void;
+    /** Group heading. Default: `t("dataEntry.commandPalette.recent")`. */
+    label?: React.ReactNode;
+};
 /** The modifier keys held while an item was chosen (gh#1126). */
 export type CommandPaletteSelectModifiers = {
     metaKey: boolean;
@@ -90,6 +105,11 @@ export type CommandPaletteProps = {
      * `mod+shift+p` are different shortcuts. Never fires during IME composition.
      */
     shortcut?: boolean | string;
+    /**
+     * Recent queries (gh#1249), shown as the FIRST group only while the query is empty, with a
+     * trailing "Clear recent searches" row. Storage stays with the consumer.
+     */
+    recent?: CommandPaletteRecent;
 };
 /**
  * Unchanged. - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived
@@ -100,4 +120,4 @@ export type CommandPaletteProps = {
  * it races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
  * props at that render, which is what a contract test can assert.
  */
-export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;
+export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, recent, }: CommandPaletteProps): React.JSX.Element;

package/dist/components/data-entry/command-palette.js

@@ -12,39 +12,9 @@ import {
   CommandItem,
   CommandList
 } from "./command.js";
-import { isApplePlatform } from "../../lib/platform.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { isImeComposing } from "../../lib/ime.js";
-function parseShortcut(shortcut) {
-  if (shortcut === false) return null;
-  const parts = (shortcut === true ? "mod+k" : shortcut).toLowerCase().split("+").map((p) => p.trim());
-  const key = parts.pop() ?? "";
-  if (!key) return null;
-  return {
-    key,
-    mod: parts.includes("mod"),
-    meta: parts.includes("meta") || parts.includes("cmd"),
-    ctrl: parts.includes("ctrl"),
-    shift: parts.includes("shift"),
-    alt: parts.includes("alt") || parts.includes("option")
-  };
-}
-function shortcutMatches(spec, event) {
-  const keyMatches = event.key.toLowerCase() === spec.key || /^[a-z]$/.test(spec.key) && event.code === `Key${spec.key.toUpperCase()}`;
-  if (!keyMatches) return false;
-  if (spec.mod && !(isApplePlatform() ? event.metaKey : event.ctrlKey)) return false;
-  if (spec.meta && !event.metaKey) return false;
-  if (spec.ctrl && !event.ctrlKey) return false;
-  return event.shiftKey === spec.shift && event.altKey === spec.alt;
-}
-function shortcutHint(spec) {
-  return [
-    spec.meta || spec.mod && isApplePlatform() ? "\u2318" : "",
-    spec.ctrl || spec.mod && !isApplePlatform() ? "Ctrl+" : "",
-    spec.alt ? "\u2325" : "",
-    spec.shift ? "\u21E7" : "",
-    spec.key.length === 1 ? spec.key.toUpperCase() : spec.key
-  ].join("");
-}
+import { parseShortcut, shortcutHint, shortcutMatches } from "../../lib/shortcut.js";
 const modifiersOf = (event) => ({
   metaKey: event.metaKey,
   ctrlKey: event.ctrlKey,
@@ -71,8 +41,10 @@ function CommandPalette({
   loading = false,
   error,
   trigger,
-  shortcut = true
+  shortcut = true,
+  recent
 }) {
+  const { t } = useTranslation();
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
   const [uncontrolledSearch, setUncontrolledSearch] = React.useState(defaultSearch);
   const shortcutRestoreFocusRef = React.useRef(null);
@@ -120,6 +92,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen, shortcutSpec]);
   const hasItems = React.useMemo(() => groups.some((group) => group.items.length > 0), [groups]);
+  const showRecent = recent != null && recent.items.length > 0 && search === "";
   const triggerNode = trigger === void 0 ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ui-command-palette-trigger", children: [
     /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
     /* @__PURE__ */ jsx("span", { children: labels.open }),
@@ -172,11 +145,38 @@ function CommandPalette({
                   }
                 ),
                 /* @__PURE__ */ jsx(CommandList, { "aria-busy": loading, children: loading ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "alert", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  shouldFilter ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : hasItems ? null : (
+                  shouldFilter ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : hasItems || showRecent ? null : (
                     // Same node cmdk would have rendered (class + role), decided from `groups`
                     // instead of from its scheduled DOM-registration count — see the doc block.
                     /* @__PURE__ */ jsx("div", { className: "ui-command-empty", role: "presentation", children: labels.empty })
                   ),
+                  showRecent ? /* @__PURE__ */ jsxs(CommandGroup, { heading: recent.label ?? t("dataEntry.commandPalette.recent"), children: [
+                    recent.items.map((query, index) => /* @__PURE__ */ jsx(
+                      CommandItem,
+                      {
+                        value: `recent:${index}:${query}`,
+                        onSelect: () => {
+                          modifiersRef.current = NO_MODIFIERS;
+                          setOpen(false);
+                          recent.onSelect(query);
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "ui-command-palette-label", children: query })
+                      },
+                      `${index}:${query}`
+                    )),
+                    /* @__PURE__ */ jsx(
+                      CommandItem,
+                      {
+                        value: "recent:clear",
+                        className: "ui-command-palette-recent-clear",
+                        onSelect: () => {
+                          modifiersRef.current = NO_MODIFIERS;
+                          recent.onClear();
+                        },
+                        children: t("dataEntry.commandPalette.clearRecent")
+                      }
+                    )
+                  ] }) : null,
                   groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
                     CommandItem,
                     {