@godxjp/ui 33.15.0 → 33.17.0

package/agent/components.json

@@ -1329,7 +1329,7 @@
       23
     ],
     "storyPath": "layout/app-shell.tsx",
-    "tagline": "Root application shell — composes sidebar, topbar rail, main content area, and optional footer. Keyboard focus in clipped chrome stays inset; the main scroll region shows an inset brand ring by default (--region-focus-ring-width).",
+    "tagline": "Root application shell — composes sidebar, topbar rail, main content area, and optional footer. In print, navigation, topbar, breadcrumb and footer are hidden; main content flows across the paper width on the light --background. Put every consumer-authored dark theme override inside @media not print, with light declarations outside it, matching the package themes. Keyboard focus in clipped chrome stays inset; the main scroll region shows an inset brand ring by default (--region-focus-ring-width).",
     "usage": [
       "DO put a sidebar collapse toggle IN the rail, not floating in the bar (ADR C10): the shell does not render one, so pass it through `Sidebar action={(collapsed) => <Button variant=\"ghost\" size=\"icon\" aria-label={t(\"toggleSidebar\")} aria-expanded={!collapsed} …/>}` (or the `footer` render-prop), which keeps it attached to the rail in both states. A toggle in `Topbar start` under `topbarSpan=\"full\"` lands beside the brand, detached from the rail it controls. The shell has no edge-mounted toggle (a control straddling the rail border); `Sidebar action` keeps it inside the rail head, which is the supported placement. Below the navigation boundary the drawer has its own trigger; render no collapse toggle there.",
       "useAppShellNavigationMode() returns drawer/docked at the same 56.25rem boundary as AppShell. The root also publishes data-navigation. Use this instead of a consumer media query.",
@@ -3042,6 +3042,12 @@
         "description": "Single-line ellipsis.",
         "name": "truncate",
         "type": "boolean"
+      },
+      {
+        "defaultValue": "\"display\"",
+        "description": "Heading face. `editorial` sets this heading in --font-family-editorial — the opt-in serif a public/editorial page uses for its hero and section headings while every UI heading stays in the display face. Until a theme names --font-family-editorial it falls back to --font-family-display, so the prop is inert by default. Prefer it over moving --font-family-display, which re-faces EVERY heading (card titles, empty states, form sections).",
+        "name": "family",
+        "type": "\"display\" | \"editorial\""
       }
     ],
     "rules": [
@@ -3489,7 +3495,7 @@
       },
       {
         "defaultValue": "'default'",
-        "description": "Named collection contract — the SAME preset the Table primitive owns, forwarded to the table DataTable renders. 'default' emits NO attribute and matches no selector, so an existing DataTable is byte-identical. 'action-collection' is the canonical dense approval/action queue: at EVERY width the desktop INTRINSIC column widths give way to the token-owned column-PRIORITY measures (--table-action-collection-*: primary 18% · secondary 22% · meta 12% · actions a 3.5rem floor, the unmarked column takes the rest) under table-layout: fixed, and below collapseBelow they switch to the compact tier (24% · 22% · 20% · 2.75rem) — collapseBelow picks the TIER, it does not turn the measures on (gh#1408). Cells wrap, and the bordered surface drops its --table-surface-min-inline-size floor — so requester · target · reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll. Mark each column with `priority` on its ColumnDef. Semantics are untouched (no display change, no role rewriting, no card swap), so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. Measured: table 1182 / 766 / 388px at 1440 / 1024 / 390, document scrollWidth === clientWidth at every width, LTR and RTL. 'stacked-record-collection' is the other direction, for a WIDE, HETEROGENEOUS record set that has no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a key-value record with a single separator between records (--table-stacked-collection-*). Each cell then carries its column's header inline above the value, DERIVED from the same ColumnDef.header the <th> uses — so the card cannot drift from the table, and a column with a deliberately empty header names itself with ariaLabel (gh#864). In card mode the row inset defaults to the live --card-space-inset, sharing the CardTitle keyline at every density and in RTL (override --table-stacked-collection-card-padding-x independently). The CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). Every folded cell reads from the START: a column's `align`/`numeric` end or centre alignment belongs to the table, not the card, so a count sits under its label like every other field (gh#1310). The labels are aria-hidden: the real <th> is still in the DOM and remains the accessible-name source, so screen-reader table navigation is unchanged at every width. Reach for this instead of building a parallel Card tree beside the table; two trees for one dataset means two sets of labels to keep in sync.",
+        "description": "Named collection contract — the SAME preset the Table primitive owns, forwarded to the table DataTable renders. 'default' emits NO attribute and matches no selector, so an existing DataTable is byte-identical. 'action-collection' is the canonical dense approval/action queue: at EVERY width the desktop INTRINSIC column widths give way to the token-owned column-PRIORITY measures (--table-action-collection-*: primary 18% · secondary 22% · meta 12% · actions a 3.5rem floor, the unmarked column takes the rest) under table-layout: fixed, and below collapseBelow they switch to the compact tier (24% · 22% · 20% · 2.75rem) — collapseBelow picks the TIER, it does not turn the measures on (gh#1408). Cells wrap, and the bordered surface drops its --table-surface-min-inline-size floor — so requester · target · reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll. Mark each column with `priority` on its ColumnDef. Semantics are untouched (no display change, no role rewriting, no card swap), so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. Measured: table 1182 / 766 / 388px at 1440 / 1024 / 390, document scrollWidth === clientWidth at every width, LTR and RTL. 'stacked-record-collection' is the other direction, for a WIDE, HETEROGENEOUS record set that has no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a key-value record with zero gap and a single separator between records (--table-stacked-collection-*; --table-stacked-collection-card-gap defaults to 0 and remains themeable). Each cell then carries its column's header inline above the value, DERIVED from the same ColumnDef.header the <th> uses — so the card cannot drift from the table, and a column with a deliberately empty header names itself with ariaLabel (gh#864). In card mode the row inset defaults to the live --card-space-inset, sharing the CardTitle keyline at every density and in RTL (override --table-stacked-collection-card-padding-x independently). The CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). Every folded cell reads from the START: a column's `align`/`numeric` end or centre alignment belongs to the table, not the card, so a count sits under its label like every other field (gh#1310). The labels are aria-hidden: the real <th> is still in the DOM and remains the accessible-name source, so screen-reader table navigation is unchanged at every width. Reach for this instead of building a parallel Card tree beside the table; two trees for one dataset means two sets of labels to keep in sync.",
         "name": "preset",
         "type": "'default' | 'action-collection' | 'stacked-record-collection'"
       },
@@ -3756,7 +3762,7 @@
       "CardHeader",
       "CardTitle"
     ],
-    "tagline": "Surface container with optional accent stripe, variant fill (including the Ant Design borderless edge), hoverable lift, and density. ⚠️ The bare <Card> has NO inner padding — body content MUST be wrapped in <CardContent> (titles in <CardHeader>), or it sits FLUSH against the card edges. Never hand-roll padding with className=\"p-4\"; use <CardContent>. Compose with CardHeader/CardTitle/CardContent/CardFooter. For Ant Design's card-head TAB STRIP (tabs under the title, inside the card border) use the `tabList`/`activeTabKey`/`defaultActiveTabKey`/`onTabChange`/`extra`/`tabProps` props — the Card renders the strip and the children become the selected tab's body. For a non-tab TOOL strip inside the card (composer or editor tools) use <CardBar extra={…}> — a positionable bar that auto-draws its separator from its position (top→bottom border, bottom→top border, middle→both) and pins `extra` content to the inline-end edge; place it as first/last child of the Card. List FILTERS (search, filter selects, filter chips) are NOT a CardBar: CardBar's main slot scrolls sideways, and a filter strip never does — they go in a FilterBar ABOVE the card, which wraps (cardinal rule #51, pattern `list-filters`).",
+    "tagline": "Surface container that requests break-inside: avoid in print, with optional accent stripe, variant fill (including the Ant Design borderless edge), hoverable lift, and density. ⚠️ The bare <Card> has NO inner padding — body content MUST be wrapped in <CardContent> (titles in <CardHeader>), or it sits FLUSH against the card edges. Never hand-roll padding with className=\"p-4\"; use <CardContent>. Compose with CardHeader/CardTitle/CardContent/CardFooter. For Ant Design's card-head TAB STRIP (tabs under the title, inside the card border) use the `tabList`/`activeTabKey`/`defaultActiveTabKey`/`onTabChange`/`extra`/`tabProps` props — the Card renders the strip and the children become the selected tab's body. For a non-tab TOOL strip inside the card (composer or editor tools) use <CardBar extra={…}> — a positionable bar that auto-draws its separator from its position (top→bottom border, bottom→top border, middle→both) and pins `extra` content to the inline-end edge; place it as first/last child of the Card. List FILTERS (search, filter selects, filter chips) are NOT a CardBar: CardBar's main slot scrolls sideways, and a filter strip never does — they go in a FilterBar ABOVE the card, which wraps (cardinal rule #51, pattern `list-filters`).",
     "usage": [
       "DO always wrap body content in <CardContent> — the bare <Card> div has zero inner padding; content renders flush against card edges without it. Never add className=\"p-4\" directly on <Card> as a substitute.",
       "DO put titles/descriptions in <CardHeader>/<CardTitle>/<CardDescription>. Use <CardHeader banded> for a visually separated muted-background header band (mirrors <CardFooter separated>). Pair with <CardAction> inside a flex-row CardHeader for header-level action buttons.",
@@ -5696,7 +5702,7 @@
       },
       {
         "defaultValue": "\"default\"",
-        "description": "Named collection contract. \"default\" emits no attribute and keeps the plain table. \"action-collection\" is the canonical dense approval/action queue: the desktop INTRINSIC column widths (which make a five-column queue wider than its card and force a horizontal scroll at 390) are replaced by table-layout: fixed plus the token-owned column PRIORITY measures (--table-action-collection-*), and cells wrap. Mark each column with `priority` on its TableHead AND its TableCell. Semantics are untouched — no display change, no role rewriting, no card transformation — so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. \"stacked-record-collection\" is the other direction, for a WIDE, HETEROGENEOUS record set with no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a key-value record with a single separator between records (--table-stacked-collection-*). Give each TableCell a `label` — its column header — because the <th> association it normally reads from is the thing that just went away; DataTable derives that label from ColumnDef.header for you (gh#864). In card mode the row inset defaults to the live --card-space-inset, sharing the CardTitle keyline at every density and in RTL (override --table-stacked-collection-card-padding-x independently). The CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). Every folded cell reads from the START: a column's `align`/`numeric` end or centre alignment belongs to the table, not the card, so a count sits under its label like every other field (gh#1310). The label is aria-hidden and the real <th> stays in the DOM, so the accessible name and table navigation are unchanged.",
+        "description": "Named collection contract. \"default\" emits no attribute and keeps the plain table. \"action-collection\" is the canonical dense approval/action queue: the desktop INTRINSIC column widths (which make a five-column queue wider than its card and force a horizontal scroll at 390) are replaced by table-layout: fixed plus the token-owned column PRIORITY measures (--table-action-collection-*), and cells wrap. Mark each column with `priority` on its TableHead AND its TableCell. Semantics are untouched — no display change, no role rewriting, no card transformation — so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. \"stacked-record-collection\" is the other direction, for a WIDE, HETEROGENEOUS record set with no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a key-value record with zero gap and a single separator between records (--table-stacked-collection-*; --table-stacked-collection-card-gap defaults to 0 and remains themeable). Give each TableCell a `label` — its column header — because the <th> association it normally reads from is the thing that just went away; DataTable derives that label from ColumnDef.header for you (gh#864). In card mode the row inset defaults to the live --card-space-inset, sharing the CardTitle keyline at every density and in RTL (override --table-stacked-collection-card-padding-x independently). The CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). Every folded cell reads from the START: a column's `align`/`numeric` end or centre alignment belongs to the table, not the card, so a count sits under its label like every other field (gh#1310). The label is aria-hidden and the real <th> stays in the DOM, so the accessible name and table navigation are unchanged.",
         "name": "preset",
         "type": "\"default\" | \"action-collection\" | \"stacked-record-collection\""
       },
@@ -5722,6 +5728,7 @@
     "storyPath": "data-display/table.tsx",
     "subParts": [
       "TableBody",
+      "TableCaption",
       "TableCell",
       "TableHead",
       "TableHeader",
@@ -8834,7 +8841,7 @@
       "PaginationNext",
       "PaginationPrevious"
     ],
-    "tagline": "Offset/page-based pagination bar. Sits below a table card. Keyboard focus uses the shared inset ring in clipping surfaces; scrollports reveal partially clipped keyboard targets without changing their layout.",
+    "tagline": "Offset/page-based pagination bar. Its container owns the inset: no outer inline padding, including inside CardContent, CardFooter or PageContainer footer. Keyboard focus uses the shared inset ring in clipping surfaces; scrollports reveal partially clipped keyboard targets without changing their layout.",
     "usage": [
       "DO always control Pagination externally: store `value` (page) and `pageSize` in React state (or URL params), and update both in the `onValueChange(page, pageSize)` callback. Pagination is fully controlled — it has no internal state and will not move unless `value` changes.",
       "DO let Pagination hide itself for zero items and single pages (`hideOnSinglePage`, default true) — it is navigation between multiple result pages. Render it inside a table footer only in the DATA state: never during loading, empty, error, or an unmet prerequisite. Pass `hideOnSinglePage={false}` only when you still want the bar on one page to keep `showTotal` visible.",
@@ -13557,6 +13564,11 @@
     "importPath": "@godxjp/ui/charts",
     "name": "LineChart",
     "props": [
+      {
+        "description": "Opt-in pointer and Enter/Space selection. seriesKey is the series dataKey; index is the original data index. Arrows navigate; Home/End move to ends. Finite data only (pie: positive slices). No handler preserves the non-selectable chart. Dashboard owns filter state.",
+        "name": "onDatumSelect",
+        "type": "(datum: ChartDatum, context: { seriesKey: string; index: number }) => void"
+      },
       {
         "description": "Row data: one category per row with a numeric value per series.",
         "name": "data",
@@ -13656,6 +13668,7 @@
     "rules": [],
     "tagline": "Trends over an ordered category axis — one or more series, locale-formatted ticks/tooltips, screen-reader text alternative built in. Data-visualization graph / plot.",
     "usage": [
+      "DO use onDatumSelect for accessible drill-through; keep filter state in the screen. Marks have localized names, roving focus and the brand ring. Line/area display points while interactive. RTL mirrors horizontal arrow navigation.",
       "DO import from the tree-shaken charts entry: `import { LineChart } from \"@godxjp/ui/charts\";`. Importing any other subpath never pulls in recharts.",
       "DO import only the chart a screen uses — `import { LineChart } from \"@godxjp/ui/charts/line-chart\";` — when the `./charts` barrel should not link the whole chart family. Without the `recharts` peer the build then fails ONCE, naming the package and the fix.",
       "DO install the `recharts` optional peer dependency in the consuming app — charts are the only part of @godxjp/ui that needs it, so apps without charts never pay for it.",
@@ -13677,6 +13690,11 @@
     "importPath": "@godxjp/ui/charts",
     "name": "BarChart",
     "props": [
+      {
+        "description": "Opt-in pointer and Enter/Space selection. seriesKey is the series dataKey; index is the original data index. Arrows navigate; Home/End move to ends. Finite data only (pie: positive slices). No handler preserves the non-selectable chart. Dashboard owns filter state.",
+        "name": "onDatumSelect",
+        "type": "(datum: ChartDatum, context: { seriesKey: string; index: number }) => void"
+      },
       {
         "description": "Row data: one category per row with a numeric value per series.",
         "name": "data",
@@ -13776,6 +13794,7 @@
     "rules": [],
     "tagline": "Compare a value across categories — grouped or `stacked`, vertical or `horizontal`, with localized ticks/tooltips and a built-in text alternative. Data-visualization graph / plot / diagram.",
     "usage": [
+      "DO use onDatumSelect for accessible drill-through; keep filter state in the screen. Marks have localized names, roving focus and the brand ring. Line/area display points while interactive. RTL mirrors horizontal arrow navigation.",
       "DO import from the charts entry: `import { BarChart } from \"@godxjp/ui/charts\";` (recharts optional peer required).",
       "DO import only the chart a screen uses — `import { BarChart } from \"@godxjp/ui/charts/bar-chart\";` — when the `./charts` barrel should not link the whole chart family. Without the `recharts` peer the build then fails ONCE, naming the package and the fix.",
       "DO use `horizontal` when category labels are long (they read better on the y-axis).",
@@ -13895,6 +13914,11 @@
     "importPath": "@godxjp/ui/charts/heatmap-chart",
     "name": "HeatmapChart",
     "props": [
+      {
+        "description": "Opt-in pointer and Enter/Space selection. seriesKey is String(column key); index is the original data index. Arrows navigate; Home/End move to ends. Finite data only (pie: positive slices). No handler preserves the non-selectable chart. Dashboard owns filter state.",
+        "name": "onDatumSelect",
+        "type": "(datum: HeatmapDatum, context: { seriesKey: string; index: number }) => void"
+      },
       {
         "description": "Row categories, top to bottom (the y axis — weekdays). `label` is already translated.",
         "name": "rows",
@@ -13972,6 +13996,7 @@
     "storyPath": "charts/heatmap-chart.tsx",
     "tagline": "DEPENDENCY-FREE rows × columns heatmap — weekday × hour revenue / order counts, cell intensity from the sequential CVD-safe --chart-heat-1..5 ramp. Empty ≠ zero (dashed outline + 'no data' text), optional top-N ring, per-cell tooltip, APG grid keyboard, the table itself is the text alternative. Needs NO recharts. Matrix / punch card / activity heatmap / busy-hours chart.",
     "usage": [
+      "DO use onDatumSelect for accessible drill-through; keep filter state in the screen. Marks have localized names, roving focus and the brand ring. Line/area display points while interactive. RTL mirrors horizontal arrow navigation.",
       "DO import from the isolated entry: `import { HeatmapChart } from \"@godxjp/ui/charts/heatmap-chart\";` — it never links the optional `recharts` peer.",
       "DO derive axis labels with Intl in the active locale — weekdays via `Intl.DateTimeFormat(locale, { weekday: 'short' })`, hours via `Intl.NumberFormat(locale)` — and pass money through `numberFormat`, never a hand-built '¥' string.",
       "DO leave a slot OUT of `data` (or pass `value: null`) when there is no measurement — a closed hour, a day before the store opened. Pass `0` only for a real zero. The two render differently (dashed outline vs filled) and read differently ('No data' vs '¥0').",
@@ -13992,6 +14017,11 @@
     "importPath": "@godxjp/ui/charts",
     "name": "AreaChart",
     "props": [
+      {
+        "description": "Opt-in pointer and Enter/Space selection. seriesKey is the series dataKey; index is the original data index. Arrows navigate; Home/End move to ends. Finite data only (pie: positive slices). No handler preserves the non-selectable chart. Dashboard owns filter state.",
+        "name": "onDatumSelect",
+        "type": "(datum: ChartDatum, context: { seriesKey: string; index: number }) => void"
+      },
       {
         "description": "Row data: one category per row with a numeric value per series.",
         "name": "data",
@@ -14096,6 +14126,7 @@
     "rules": [],
     "tagline": "Magnitude over an ordered category axis — overlay or `stacked` areas, optional `curved` smoothing, localized formatting + text alternative. Data-visualization graph / plot.",
     "usage": [
+      "DO use onDatumSelect for accessible drill-through; keep filter state in the screen. Marks have localized names, roving focus and the brand ring. Line/area display points while interactive. RTL mirrors horizontal arrow navigation.",
       "DO import from the charts entry: `import { AreaChart } from \"@godxjp/ui/charts\";` (recharts optional peer required).",
       "DO import only the chart a screen uses — `import { AreaChart } from \"@godxjp/ui/charts/area-chart\";` — when the `./charts` barrel should not link the whole chart family. Without the `recharts` peer the build then fails ONCE, naming the package and the fix.",
       "DO use `stacked` to show how parts accumulate into a total over time.",
@@ -14114,6 +14145,11 @@
     "importPath": "@godxjp/ui/charts",
     "name": "PieChart",
     "props": [
+      {
+        "description": "Opt-in pointer and Enter/Space selection. seriesKey is dataKey; index is the original data index. Arrows navigate; Home/End move to ends. Finite data only (pie: positive slices). No handler preserves the non-selectable chart. Dashboard owns filter state.",
+        "name": "onDatumSelect",
+        "type": "(datum: ChartDatum, context: { seriesKey: string; index: number }) => void"
+      },
       {
         "description": "Row data: one slice per row.",
         "name": "data",
@@ -14195,6 +14231,7 @@
     "rules": [],
     "tagline": "Part-to-whole composition across a small set of slices — `donut` option, localized tooltips, and a screen-reader breakdown of every slice. Data-visualization graph / diagram.",
     "usage": [
+      "DO use onDatumSelect for accessible drill-through; keep filter state in the screen. Marks have localized names, roving focus and the brand ring. Line/area display points while interactive. RTL mirrors horizontal arrow navigation.",
       "DO import from the charts entry: `import { PieChart } from \"@godxjp/ui/charts\";` (recharts optional peer required).",
       "DO import only the chart a screen uses — `import { PieChart } from \"@godxjp/ui/charts/pie-chart\";` — when the `./charts` barrel should not link the whole chart family. Without the `recharts` peer the build then fails ONCE, naming the package and the fix.",
       "DO keep slices few (≈2–6) — pies are unreadable past a handful; use BarChart for many categories.",
@@ -14386,6 +14423,82 @@
       "The data loads on first open (one locale, ~100 KB gzip); nothing ships in your main bundle."
     ]
   },
+  {
+    "docPath": "docs/lab/dashboard-grid.tsx",
+    "example": "import { DashboardGrid } from \"@godxjp/ui/lab\";\n\n<DashboardGrid items={[{ id: \"revenue\", label: \"Revenue\", content: \"Revenue\" }]} defaultLayout={[{ id: \"revenue\", x: 0, y: 0, w: 2, h: 3 }]} columns={{ base: 1, lg: 4 }} editable />",
+    "group": "layout",
+    "importPath": "@godxjp/ui/lab",
+    "name": "DashboardGrid",
+    "props": [
+      {
+        "description": "Stable ids, visible header labels (also accessible region names) and widget body content. Wrap padded bodies in CardContent, tables in CardContent flush; DashboardGrid owns the Card and header. DOM reading order remains items order.",
+        "name": "items",
+        "required": true,
+        "type": "{ id: string; label: string; content: ReactNode }[]"
+      },
+      {
+        "description": "Controlled layout: {id,x,y,w,h}, integer cells, zero-based x from inline-start.",
+        "name": "layout",
+        "type": "DashboardGridItemProp[]"
+      },
+      {
+        "description": "Uncontrolled initial layout.",
+        "name": "defaultLayout",
+        "type": "DashboardGridItemProp[]"
+      },
+      {
+        "description": "One callback per changed drop; Escape restores without saving.",
+        "name": "onLayoutChange",
+        "type": "(layout: DashboardGridItemProp[]) => void"
+      },
+      {
+        "description": "Default 12. Responsive viewport breakpoints; a single column stacks at natural content heights. Narrow projection never overwrites saved layout.",
+        "name": "columns",
+        "type": "number | { base: number; sm?: number; md?: number; lg?: number; xl?: number }"
+      },
+      {
+        "description": "Positive pixel row track size. Omitted uses --dashboard-grid-row-height.",
+        "name": "rowHeight",
+        "type": "number"
+      },
+      {
+        "description": "Default false. Inset header grip and bottom-end resize corner (on hover/focus); header space is reserved in view mode to prevent content shift. Enter/Space grab/drop, arrows move, Shift+arrows resize, Escape cancels.",
+        "name": "editable",
+        "type": "boolean"
+      },
+      {
+        "description": "Root class.",
+        "name": "className",
+        "type": "string"
+      },
+      {
+        "description": "Root id.",
+        "name": "id",
+        "type": "string"
+      }
+    ],
+    "related": [
+      "ResponsiveGrid — static flow layout.",
+      "SortableList — ordering without cell geometry."
+    ],
+    "rules": [
+      44,
+      45
+    ],
+    "storyPath": "lab/dashboard-grid.tsx",
+    "tagline": "BI widget layout editor with deterministic push-down collisions and vertical compaction. Static CSS grid in view mode; temporary pointer/touch/keyboard previews commit once on drop.",
+    "tier": "lab",
+    "usage": [
+      "C7 exception approved by the owner, BI precedents (Tableau/Power BI/Grafana/react-grid-layout). Approved 2026-10-23. Lab §2.1: same gates as core; promotion only once ≥2 repos import it.",
+      "Use stable unique ids and order items by reading priority. Persist only onLayoutChange.",
+      "Coordinates are normalized and compacted. View mode exposes content semantics, not an ARIA data grid.",
+      "RTL mirrors x and horizontal keyboard/pointer deltas. Touch-action none is confined to handles.",
+      "Theme --dashboard-grid-gap, row-height, handle-size, handle-inset, item-radius and preview-ring-color."
+    ],
+    "useCases": [
+      "BI dashboards with rearrangeable and resizable widgets."
+    ]
+  },
   {
     "docPath": "docs/data-entry/sortable-list.tsx",
     "example": "import { SortableList } from \"@godxjp/ui/lab\";\n\n<SortableList\n  aria-label=\"Widgets\"\n  items={[{ value: \"cal\", label: \"Calendar\" }, { value: \"mail\", label: \"Mail\" }]}\n  value={order}\n  onValueChange={setOrder}\n/>",

package/agent/index.json

@@ -1,11 +1,11 @@
 {
   "counts": {
     "anti-ai-tells": 35,
-    "components": 170,
+    "components": 171,
     "patterns": 28,
     "rules": 44,
-    "tokens": 2251,
-    "vocabulary": 15
+    "tokens": 2263,
+    "vocabulary": 16
   },
   "design": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/DESIGN.md",
   "files": [
@@ -16,7 +16,7 @@
     },
     {
       "file": "components-index.json",
-      "note": "53 KB — name + group + tagline for all 170. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "54 KB — name + group + tagline for all 171. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
@@ -54,19 +54,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/v33.15.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.17.0/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": 1920,
-      "foundation": 218,
+      "component": 1930,
+      "foundation": 220,
       "semantic": 113
     },
     "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": "33.15.0"
+  "version": "33.17.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 170 components, 2251 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.15.0.
+> A Japanese-enterprise React design system: 171 components, 2263 design tokens,
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.17.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.15.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.17.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -16,10 +16,10 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 28 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): 53 KB — all 170 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 54 KB — all 171 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–38 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.3 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` — 218 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1920 `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` — 220 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1930 `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): 44 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 35 shapes that make generated UI look generated, each with its fix.
@@ -27,7 +27,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/v33.15.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.17.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/rules.json

@@ -80,7 +80,7 @@
     "title": "No \"platform-only\" exports"
   },
   {
-    "body": "`.dark` / light theme, `data-density` (compact / default / comfortable) and `data-font-size` (sm / base / lg) are axes the component must follow. Read from tokens, never hardcode values.",
+    "body": "`.dark` / light theme, `data-density` (compact / default / comfortable) and `data-font-size` (sm / base / lg) are axes the component must follow. Read from tokens, never hardcode values. Enclose every consumer-authored dark override in @media not print and leave light declarations outside it, matching the shipped themes so paper uses the light palette.",
     "number": 21,
     "title": "Every component honours every theme axis"
   },

package/agent/tokens.json

@@ -773,6 +773,18 @@
     "tier": "foundation",
     "value": "var(--font-family-sans)"
   },
+  {
+    "description": "EDITORIAL face (opt-in) — a magazine-style serif for a hero, an article or a public page's section heading, beside a sans UI. Read by `Heading family=\"editorial\"` and by the PageContainer `headerScale=\"display\"` title. `initial`, default = --font-family-display at the call site, so nothing changes until a theme names a face.",
+    "name": "--font-family-editorial",
+    "tier": "foundation",
+    "value": "initial"
+  },
+  {
+    "description": "FIGURES face (opt-in) — the family tabular numbers are set in (`Text tabular`, `Badge tabular`, numeric TableHead/TableCell): a brand that sets prices in a figure face beside a CJK UI face. `initial` = inherit, so tabular figures keep the surrounding family until a theme names one.",
+    "name": "--font-family-tabular",
+    "tier": "foundation",
+    "value": "initial"
+  },
   {
     "description": "── Type scale — GOLDEN-RATIO modular scale (Ant/Tailwind model). ONE base + ONE ratio; every step is base × ratioⁿ, so the whole scale stays in golden proportion. `--font-size-ratio` is φ^¼ (the golden ratio's quarter-step ≈ 1.1227) — a TRUE golden ratio yet dense enough that headings stay small (h1≈20, h2≈18; pure φ=1.618 would be marketing-size). Internal apps get the 14px DEFAULT with ZERO config; a customer overrides `--font-size-base` (and optionally `--font-size-ratio`) and the entire scale rescales in golden proportion. 14px — THE base (= <body>). The single knob; override to retheme.",
     "name": "--font-size-base",
@@ -5291,6 +5303,42 @@
     "tier": "component",
     "value": "var(--space-1)"
   },
+  {
+    "description": "Gap between DashboardGrid tiles, both axes (#1397).",
+    "name": "--dashboard-grid-gap",
+    "tier": "component",
+    "value": "var(--space-4)"
+  },
+  {
+    "description": "Height of one grid row; a tile's `h` is a multiple of it.",
+    "name": "--dashboard-grid-row-height",
+    "tier": "component",
+    "value": "var(--space-20)"
+  },
+  {
+    "description": "Size of the drag and resize handles in edit mode (≥24px target).",
+    "name": "--dashboard-grid-handle-size",
+    "tier": "component",
+    "value": "var(--control-height)"
+  },
+  {
+    "description": "Inset of the resize handle from the tile's bottom-end corner.",
+    "name": "--dashboard-grid-handle-inset",
+    "tier": "component",
+    "value": "var(--space-1)"
+  },
+  {
+    "description": "Corner radius of a tile; defaults to the Card radius.",
+    "name": "--dashboard-grid-item-radius",
+    "tier": "component",
+    "value": "var(--card-radius)"
+  },
+  {
+    "description": "Colour of the drop-preview ring while moving or resizing (role-mirror knob; defaults to the focus ring colour).",
+    "name": "--dashboard-grid-preview-ring-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Accordion chevron and Carousel arrow. Both were bare 1rem literals in data-display-layout.css — glyphs with no tier-2 route, invisible to the icon ratchet because neither selector contains the word \"icon\".",
     "name": "--accordion-chevron-size",
@@ -7151,6 +7199,12 @@
     "tier": "component",
     "value": "32rem"
   },
+  {
+    "description": "Corner of the dialog panel. `initial`: square mobile, --radius-lg → --radius desktop at the call site; a brand whose dialogs are rounder than its cards (cards 8px, dialogs 16px) sets it once here.",
+    "name": "--dialog-radius",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Per-instance width, set by DialogContent `width` (gh#1174) — `initial`, so the default above resolves at the call site; the viewport cap (minus --dialog-viewport-inset) always wins.",
     "name": "--dialog-width",
@@ -12588,7 +12642,7 @@
     "value": "0px"
   },
   {
-    "description": "Table · stacked-record-collection preset (gh#293 restore — SCR-215) — the canonical WIDE, heterogeneous record collection. Below the collapse step every `<tr>` becomes a bordered key-value card; these tokens own the card's own geometry (unlike action-collection, there is no column-priority measure to retune — the whole row becomes one block).",
+    "description": "Table · stacked-record-collection preset (gh#293 restore — SCR-215) — the canonical WIDE, heterogeneous record collection. Below the collapse step every `<tr>` becomes a continuous key-value record; these tokens own the record's geometry (unlike action-collection, there is no column-priority measure to retune — the whole row becomes one block).",
     "name": "--table-stacked-collection-card-padding-y",
     "tier": "component",
     "value": "var(--space-stack-sm)"
@@ -12603,7 +12657,7 @@
     "description": "Table component tokens: row height, cell padding.",
     "name": "--table-stacked-collection-card-gap",
     "tier": "component",
-    "value": "var(--space-stack-sm)"
+    "value": "0"
   },
   {
     "description": "Table component tokens: row height, cell padding.",
@@ -12713,6 +12767,24 @@
     "tier": "component",
     "value": "0.06"
   },
+  {
+    "description": "TableCaption — `initial`, defaults resolved at the call site (table-layout.css): ink --muted-foreground, size --font-size-sm, block inset --space-2. It sits above the rows (HTML's own side).",
+    "name": "--table-caption-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Table component tokens: row height, cell padding.",
+    "name": "--table-caption-font-size",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Table component tokens: row height, cell padding.",
+    "name": "--table-caption-space-y",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Distance from the text baseline to the underline. In `em` on purpose: the rule has to stay proportional across the seven type steps, and a px value that reads right at `lg` crowds the descenders at `2xs`. GoDX v2.3 guideline: `.gx a { text-underline-offset: .18em }`",
     "name": "--text-link-underline-offset",

package/agent/vocabulary.json

@@ -1,4 +1,16 @@
 [
+  {
+    "concept": "Opt-in heading face, independent of UI headings.",
+    "name": "HeadingFamilyProp",
+    "notes": "display preserves the default markup; editorial reads --font-family-editorial with --font-family-display as its fallback.",
+    "usedBy": [
+      "Heading"
+    ],
+    "values": [
+      "display",
+      "editorial"
+    ]
+  },
   {
     "concept": "Which breadcrumb item represents the current page.",
     "name": "BreadcrumbCurrentItemProp",

package/dist/components/charts/chart-cartesian.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ChartDatum, ChartSeriesProp } from "../../props/components/charts.prop.js";
+import type { ChartDatum, ChartSeriesProp, ChartDatumSelect } from "../../props/components/charts.prop.js";
 /**
  * Shared cartesian renderer for Line / Bar / Area. Internal — the filename pascal
  * (`ChartCartesian`) is intentionally NOT exported, so this is not a catalog entry.
@@ -21,6 +21,7 @@ type CartesianChartProps = {
     valueTicks?: number[];
     numberFormat?: Intl.NumberFormatOptions;
     emptyMessage?: string;
+    onDatumSelect?: ChartDatumSelect;
     onCategoryClick?: (datum: ChartDatum, index: number) => void;
     className?: string;
     id?: string;
@@ -33,5 +34,5 @@ type CartesianChartProps = {
     /** bar */
     horizontal?: boolean;
 };
-export declare function CartesianChart({ kind, data, series, categoryKey, label, showCaption, description, size, height, showLegend, showGrid, valueDomain, valueTicks, numberFormat, emptyMessage, onCategoryClick, className, id, curved, showDots, stacked, horizontal, }: CartesianChartProps): React.JSX.Element;
+export declare function CartesianChart({ kind, data, series, categoryKey, label, showCaption, description, size, height, showLegend, showGrid, valueDomain, valueTicks, numberFormat, emptyMessage, onCategoryClick, onDatumSelect, className, id, curved, showDots, stacked, horizontal, }: CartesianChartProps): React.JSX.Element;
 export {};