@godxjp/ui 31.31.8 → 32.0.0

package/agent/components/MegaMenu.json

@@ -1,8 +1,8 @@
 {
   "docPath": "navigation/mega-menu.tsx",
-  "example": "import { MegaMenu } from \"@godxjp/ui/navigation\";\n\n<MegaMenu\n  label=\"メインナビゲーション\"\n  value={route}\n  onValueChange={setRoute}\n  triggerAction=\"hover\"\n  items={[\n    {\n      key: \"products\",\n      label: \"製品\",\n      panel: {\n        groups: [\n          {\n            key: \"core\",\n            label: \"コア\",\n            description: \"毎日使う業務アプリ\",\n            links: [\n              { key: \"hr\", label: \"人事管理\", href: \"/hr\", description: \"従業員台帳と異動\" },\n              { key: \"payroll\", label: \"給与計算\", href: \"/payroll\" },\n            ],\n          },\n        ],\n        footer: <a href=\"/products\">すべての製品を見る</a>,\n      },\n    },\n    { key: \"pricing\", label: \"料金\", href: \"/pricing\" },\n  ]}\n/>",
+  "example": "import { MegaMenu } from \"@godxjp/ui/lab\";\n\n<MegaMenu\n  label=\"メインナビゲーション\"\n  value={route}\n  onValueChange={setRoute}\n  triggerAction=\"hover\"\n  items={[\n    {\n      key: \"products\",\n      label: \"製品\",\n      panel: {\n        groups: [\n          {\n            key: \"core\",\n            label: \"コア\",\n            description: \"毎日使う業務アプリ\",\n            links: [\n              { key: \"hr\", label: \"人事管理\", href: \"/hr\", description: \"従業員台帳と異動\" },\n              { key: \"payroll\", label: \"給与計算\", href: \"/payroll\" },\n            ],\n          },\n        ],\n        footer: <a href=\"/products\">すべての製品を見る</a>,\n      },\n    },\n    { key: \"pricing\", label: \"料金\", href: \"/pricing\" },\n  ]}\n/>",
   "group": "navigation",
-  "importPath": "@godxjp/ui/navigation",
+  "importPath": "@godxjp/ui/lab",
   "name": "MegaMenu",
   "props": [
     {
@@ -100,8 +100,9 @@
     44,
     45
   ],
-  "storyPath": "navigation/MegaMenu.stories.tsx",
+  "storyPath": "navigation/mega-menu.tsx",
   "tagline": "A primary site navigation whose top-level items disclose a full-width panel of grouped links (Ant Design `Menu mode=\"horizontal\"` whose SubMenu renders through popupRender). Implements the WAI-ARIA APG Disclosure Navigation pattern — NOT menu/menubar roles — with a roving tabindex across the bar, hover intent, Escape-to-trigger, and a narrow layout where the same disclosure lays out in flow.",
+  "tier": "lab",
   "usage": [
     "DO reach for this INSTEAD of DropdownMenu for a site nav. DropdownMenu is react-aria-components Menu, i.e. role=\"menu\" / role=\"menuitem\": a row of them announces a desktop application menubar for what is actually a set of links, and Tab then leaves the whole widget instead of walking the links. That is the classic megamenu a11y defect and it is why this component exists.",
     "DO give the bar its landmark name through `label` when a page has more than one nav (a primary bar plus a footer nav): two unnamed <nav> landmarks are indistinguishable in a landmark list.",

package/agent/components/MobileShell.json

@@ -46,7 +46,7 @@
   "related": [
     "AppShell — the authenticated shell WITH a sidebar rail and a mobile drawer at the 900px step. Use it for an admin console that happens to be viewed on a phone; use MobileShell when the phone IS the product.",
     "CenteredShell — the authenticated no-sidebar shell whose main scrolls the PAGE. MobileShell is its handheld counterpart: same 'no rail' shape, opposite scroll contract.",
-    "AuthShell — the unauthenticated root. A login screen inside a handheld app still belongs to AuthShell, not MobileShell.",
+    "CenteredShell (auth shape) — the unauthenticated root. A login screen inside a handheld app still belongs to the auth CenteredShell, not MobileShell.",
     "Sheet — `side=\"bottom\"` is the handheld modal: scanners, pickers and forms open from the bottom over MobileShell rather than navigating away."
   ],
   "rules": [
@@ -54,15 +54,15 @@
     24,
     45
   ],
-  "storyPath": "layout/MobileShell.stories.tsx",
+  "storyPath": "layout/mobile-shell.tsx",
   "tagline": "Handheld app shell (gh#354) — status band · app bar · the ONE scroll region · sticky action bar · bottom tab bar, with device safe-area insets and a document that never scrolls.",
   "usage": [
-    "DO use MobileShell for a HANDHELD app screen — a warehouse/handy terminal, a driver app, a field-work PWA. It is the fourth root shell: AppShell (needs a sidebar) · AuthShell (unauthenticated card) · CenteredShell (authenticated scrolling document) · MobileShell (a phone app that does NOT scroll its document).",
+    "DO use MobileShell for a HANDHELD app screen — a warehouse/handy terminal, a driver app, a field-work PWA. It is the fourth root shell: AppShell (needs a sidebar) · the auth CenteredShell (unauthenticated card) · CenteredShell (authenticated scrolling document) · MobileShell (a phone app that does NOT scroll its document).",
     "DO let `children` be the only thing that scrolls. Put the primary verb in `actions` and navigation in `tabBar` — both sit outside the scroll region, so neither needs `position: sticky`, a z-index, or bottom padding to clear the other.",
     "DO NOT compose one out of <Card> + `ui-card-inset*` + `overflow-y-auto` (what docs/showcase/case6 did before gh#354). That reproduces the look and neither behaviour that matters on a device: the document still scrolls, and nothing pads out of env(safe-area-inset-*), so the notch covers the app bar and the home indicator covers the primary button.",
     "DO swap the `header` node for a screen MODE (select mode, search mode) instead of stacking a second contextual strip below it — one bar to read, and the platform pattern on both iOS and Android.",
     "DO use `height=\"fill\"` ONLY when the shell is inside a bounded parent (a device-frame preview). In a real app leave it at \"viewport\": that is what keeps the document from scrolling.",
-    "DO NOT nest MobileShell inside AppShell / AuthShell / CenteredShell (or the reverse) — it is a ROOT shell. Retune the page gutter and the three band heights from the theme (--mobile-shell-inset-inline, --mobile-shell-header-bar-height, --mobile-shell-tab-bar-height, --mobile-shell-status-bar-height); never fork .ui-mobile-shell-* CSS."
+    "DO NOT nest MobileShell inside AppShell / CenteredShell (or the reverse) — it is a ROOT shell. Retune the page gutter and the three band heights from the theme (--mobile-shell-inset-inline, --mobile-shell-header-bar-height, --mobile-shell-tab-bar-height, --mobile-shell-status-bar-height); never fork .ui-mobile-shell-* CSS."
   ],
   "useCases": [
     "Warehouse handheld (代理店ハンディ): a status band, an app bar with a select-mode text action, a scrolling item list, a dominant Scan button in `actions`, and a three-destination `tabBar` (inbound · packing · outbound). See the case6-agency-handy showcase.",

package/agent/components/NavList.json

@@ -43,7 +43,7 @@
     5,
     6
   ],
-  "storyPath": "layout/NavList.stories.tsx",
+  "storyPath": "layout/nav-list.tsx",
   "tagline": "Vertical route navigation for INSIDE a page — the shape a settings nav takes. Renders the same `.sb-nav-item` rows as the Sidebar rail (icon column, label, badge, active tokens, `aria-current=\"page\"`) in a `<nav>` landmark, without the AppShell grid the rail depends on.",
   "usage": [
     "DO use NavList for a settings / account / preferences sub-navigation beside the pane it drives — typically as MasterDetail's `master`.",

package/agent/components/NumberInput.json

@@ -137,7 +137,7 @@
     3,
     6
   ],
-  "storyPath": "data-entry/NumberInput.stories.tsx",
+  "storyPath": "data-entry/number-input.tsx",
   "tagline": "WAI-ARIA spinbutton for localized numeric entry — composes the real Input (role=spinbutton, inputMode=decimal) with stacked increment/decrement step Buttons. Type freely, Arrow/Shift-Arrow step, value commits clamped to min/max + rounded to precision.",
   "usage": [
     "DO use NumberInput (not `<Input type='number'>`) whenever numeric entry wants steppers, min/max clamping, precision rounding, or a ¥/% affix — it is the canonical numeric primitive. Plain Input has no stepper and no clamp.",

package/agent/components/OrgChart.json

@@ -1,8 +1,8 @@
 {
   "docPath": "data-display/org-chart.tsx",
-  "example": "import { Avatar, AvatarFallback, Badge, OrgChart } from \"@godxjp/ui/data-display\";\n\n<OrgChart\n  label=\"Company org chart\"\n  data={[\n    {\n      key: \"ceo\", name: \"Haruka Tanaka\", title: \"CEO\",\n      avatar: <Avatar size=\"sm\"><AvatarFallback>HT</AvatarFallback></Avatar>,\n      children: [\n        { key: \"cto\", name: \"Kenji Watanabe\", title: \"CTO\" },\n        { key: \"bot\", name: \"Review Agent\", title: \"Code review\", variant: \"agent\",\n          extra: <Badge tone=\"success\">Running</Badge> },\n      ],\n    },\n  ]}\n/>",
+  "example": "import { Avatar, AvatarFallback, Badge } from \"@godxjp/ui/data-display\";\nimport { OrgChart } from \"@godxjp/ui/lab\";\n\n<OrgChart\n  label=\"Company org chart\"\n  data={[\n    {\n      key: \"ceo\", name: \"Haruka Tanaka\", title: \"CEO\",\n      avatar: <Avatar size=\"sm\"><AvatarFallback>HT</AvatarFallback></Avatar>,\n      children: [\n        { key: \"cto\", name: \"Kenji Watanabe\", title: \"CTO\" },\n        { key: \"bot\", name: \"Review Agent\", title: \"Code review\", variant: \"agent\",\n          extra: <Badge tone=\"success\">Running</Badge> },\n      ],\n    },\n  ]}\n/>",
   "group": "data-display",
-  "importPath": "@godxjp/ui/data-display",
+  "importPath": "@godxjp/ui/lab",
   "name": "OrgChart",
   "props": [
     {
@@ -43,8 +43,9 @@
     44,
     45
   ],
-  "storyPath": "data-display/OrgChart.stories.tsx",
+  "storyPath": "data-display/org-chart.tsx",
   "tagline": "An organization chart: boxes (avatar, name, title, extra) joined by CSS connector lines, top-down; `agent` nodes are dashed. Scrolls horizontally in its own named region when wider than its container, and turns into an indented Tree when the CONTAINER is under 40rem. APG tree view (tree/treeitem/group, roving tabindex, arrow keys).",
+  "tier": "lab",
   "usage": [
     "DO mark AI agents with `variant: \"agent\"` — the box is dashed AND its accessible name ends in a localized \"AI agent\", so the kind is never carried by the stroke alone.",
     "DO give it the width it has; the breakpoint is a container query, so a chart in a narrow side panel switches to the Tree form on a wide screen too.",

package/agent/components/OrgSwitcher.json

@@ -77,7 +77,7 @@
     "Sidebar — APP scope, and therefore NOT where this goes. Its `brand` slot is the app's own lockup; putting the organization switcher there mixes two scopes in one header."
   ],
   "rules": [],
-  "storyPath": "layout/OrgSwitcher.stories.tsx",
+  "storyPath": "layout/org-switcher.tsx",
   "tagline": "Searchable organization switcher with canonical trigger geometry, desktop popover, and mobile sheet.",
   "usage": [
     "Provide only organizations the current user may select; the component does not authorize or fetch tenants.",

package/agent/components/OverlayPortalProvider.json

@@ -25,7 +25,6 @@
   "rules": [
     5
   ],
-  "storyPath": "app/OverlayPortalProvider.stories.tsx",
   "tagline": "Moves EVERY overlay in this library (Popover, Dialog, Sheet, Tooltip, DropdownMenu, HoverCard, Select, Cascader) into a container you name — the one thing an app mounted inside a SHADOW ROOT cannot do with props.",
   "usage": [
     "DO mount it when this library is rendered inside a shadow root (an embedded bar, a widget injected into a host page, a Web Component wrapper). Overlays default to document.body, which is outside the tree carrying this library's stylesheet — measured on an embedded bar as border 0, radius 0, a transparent background and the anchor maths 40px off.",

package/agent/components/PageContainer.json

@@ -155,7 +155,7 @@
   "rules": [
     23
   ],
-  "storyPath": "layout/PageContainer.stories.tsx",
+  "storyPath": "layout/page-container.tsx",
   "tagline": "Mandatory page shell — EVERY page wraps its content in PageContainer (title/subtitle/extra/footer/breadcrumb).",
   "usage": [
     "DO: Always wrap every page's content in PageContainer — it is the mandatory page shell. Pass `title` (required, rendered as `<h1>`) for every page; omitting it leaves the page without an accessible heading.",
@@ -189,8 +189,8 @@
     "A dashboard page with KPI cards and chart sections — use `variant='default'` with `children={<Flex direction='col' gap='lg'>…</Flex>}` to vertically stack multiple Card/StatCard sections beneath the page title.",
     "Any deep-nav page in a multi-level admin (e.g. Accounting > Ledger > Journal Entry #42) where a 3-segment breadcrumb trail provides back-navigation without browser history dependence.",
     "A high-density data reconciliation page where an analyst needs to see maximum rows — use `density='compact'` to tighten all spacing across the DataTable, Toolbar, and controls in a single prop.",
-    "A chat / messaging detail page where the message list should scroll inside the page and the composer stays pinned at the bottom — use `fill` so the body occupies the full shell height, with `footer={<Composer/>}` + `stickyFooter`. Without `fill` the page would top-pack and the composer would float mid-screen on a tall viewport.",
+    "A chat / messaging detail page where the message list should scroll inside the page and the composer stays pinned at the bottom — use `fill` so the body occupies the full shell height, with `footer={<ChatComposer />}` (@godxjp/chat) + `stickyFooter`. Without `fill` the page would top-pack and the composer would float mid-screen on a tall viewport.",
     "A Slack-like chat channel, a mail thread, or an IDE-style tab view whose top row is the SURFACE's name rather than a document title — `headerScale='chrome'` (usually with `variant='ghost'`) puts the `<h1>` on the body type step so the header reads as a channel label and the band collapses to roughly the height of one control row, leaving the vertical space to the conversation.",
-    "A chat channel page where a fixed band (channel workflow / pinned-message / connection status) must sit between the page header and the scrolling transcript — `toolbar={<Toolbar>…</Toolbar>}` with `fill` + `footer={<Composer/>}` + `stickyFooter`. The band is outside the scroller, so the transcript never travels under it and the composer stays pinned; a collection page uses the same slot for its filter strip above a full-bleed DataTable (`variant='flush'`)."
+    "A chat channel page where a fixed band (channel workflow / pinned-message / connection status) must sit between the page header and the scrolling transcript — `toolbar={<Toolbar>…</Toolbar>}` with `fill` + `footer={<ChatComposer />}` (@godxjp/chat) + `stickyFooter`. The band is outside the scroller, so the transcript never travels under it and the composer stays pinned; a collection page uses the same slot for its filter strip above a full-bleed DataTable (`variant='flush'`)."
   ]
 }

package/agent/components/PageCover.json

@@ -1,8 +1,8 @@
 {
   "docPath": "docs/layout/page-cover.tsx",
-  "example": "import { PageContainer, PageCover } from \"@godxjp/ui/layout\";\nimport { Button } from \"@godxjp/ui/general\";\n\n<PageContainer\n  title={page.title}\n  headerScale=\"display\"\n  icon={<span aria-hidden=\"true\">{page.icon}</span>}\n  cover={\n    <PageCover\n      src={page.cover}\n      alt=\"\"\n      positionY={y}\n      onPositionChange={setY}\n      repositioning={moving}\n      onRepositioningChange={setMoving}\n      actions={<Button size=\"sm\" variant=\"secondary\" onClick={() => setMoving(true)}>Reposition</Button>}\n    />\n  }\n>\n  {body}\n</PageContainer>",
+  "example": "import { PageContainer } from \"@godxjp/ui/layout\";\nimport { PageCover } from \"@godxjp/ui/lab\";\nimport { Button } from \"@godxjp/ui/general\";\n\n<PageContainer\n  title={page.title}\n  headerScale=\"display\"\n  icon={<span aria-hidden=\"true\">{page.icon}</span>}\n  cover={\n    <PageCover\n      src={page.cover}\n      alt=\"\"\n      positionY={y}\n      onPositionChange={setY}\n      repositioning={moving}\n      onRepositioningChange={setMoving}\n      actions={<Button size=\"sm\" variant=\"secondary\" onClick={() => setMoving(true)}>Reposition</Button>}\n    />\n  }\n>\n  {body}\n</PageContainer>",
   "group": "layout",
-  "importPath": "@godxjp/ui/layout",
+  "importPath": "@godxjp/ui/lab",
   "name": "PageCover",
   "props": [
     {
@@ -68,6 +68,7 @@
   "rules": [],
   "storyPath": "layout/page-cover.tsx",
   "tagline": "A page's cover image (gh#1160): Notion's banner across the top, or note.com's eyecatch (~1.91:1, rounded) in the reading column. Put it in PageContainer `cover`. The focal point is positionY (object-position); while `repositioning` the image IS a vertical WAI-ARIA slider — drag or arrows / PageUp / PageDown / Home / End, Enter / Escape to finish.",
+  "tier": "lab",
   "usage": [
     "DO pass it as PageContainer `cover` with the page `icon` — the container places it and overlaps the icon.",
     "DO wire a Reposition button in `actions` that sets `repositioning`, and persist positionY from onPositionChange."

package/agent/components/Pagination.json

@@ -100,7 +100,7 @@
   "rules": [
     40
   ],
-  "storyPath": "navigation/Pagination.stories.tsx",
+  "storyPath": "navigation/pagination.tsx",
   "subParts": [
     "PaginationContent",
     "PaginationEllipsis",

package/agent/components/PasswordInput.json

@@ -64,7 +64,7 @@
     3,
     6
   ],
-  "storyPath": "data-entry/PasswordInput.stories.tsx",
+  "storyPath": "data-entry/password-input.tsx",
   "tagline": "Input for passwords with a built-in show/hide eye toggle. Accepts all Input props except `type`.",
   "usage": [
     "DO use for any password / secret field instead of `<Input type=\"password\">` so users get the show/hide affordance.",

package/agent/components/PasswordStrength.json

@@ -42,7 +42,7 @@
     3,
     6
   ],
-  "storyPath": "data-entry/PasswordStrength.stories.tsx",
+  "storyPath": "data-entry/password-strength.tsx",
   "tagline": "Evaluates password quality with a 0-4 score and optional rule checklist. Use with PasswordInput in secure forms.",
   "usage": [
     "DO show PasswordStrength immediately below PasswordInput so users understand password quality before submitting.",

package/agent/components/PermissionMatrix.json

@@ -69,7 +69,7 @@
   "rules": [
     24
   ],
-  "storyPath": "data-display/PermissionMatrix.stories.tsx",
+  "storyPath": "data-display/permission-matrix.tsx",
   "tagline": "Domain data is 100% consumer-supplied.",
   "usage": [
     "DO import it — it is a real export from @godxjp/ui/data-display (the lesson: a docs page is not importable). Never hand-compose the sticky-column grid per app.",

package/agent/components/PieChart.json

@@ -83,7 +83,6 @@
     "Progress — single ratio against a target rather than a multi-slice split."
   ],
   "rules": [],
-  "storyPath": "charts/PieChart.stories.tsx",
   "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 import from the charts entry: `import { PieChart } from \"@godxjp/ui/charts\";` (recharts optional peer required).",

package/agent/components/Popover.json

@@ -1,4 +1,9 @@
 {
+  "absorbed": [
+    "HoverCard",
+    "HoverCardTrigger",
+    "HoverCardContent"
+  ],
   "example": "import {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n} from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\n\n// Uncontrolled — basic usage\nexport function InvoiceFilterPopover() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Advanced filters</Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" width=\"trigger\">\n        <PopoverHeader>\n          <PopoverTitle>Filter invoices</PopoverTitle>\n          <PopoverDescription>Narrow results by date range and status.</PopoverDescription>\n        </PopoverHeader>\n        {/* place form controls here */}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n// Controlled — programmatic open/close\nimport * as React from \"react\";\n\nexport function ControlledPopover() {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button variant=\"ghost\" size=\"icon\" aria-label=\"Show details\">\n          ?\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent side=\"right\" sideOffset={8}>\n        <PopoverHeader>\n          <PopoverTitle>About this field</PopoverTitle>\n          <PopoverDescription>\n            The MF ID is the unique identifier assigned by Money Forward.\n          </PopoverDescription>\n        </PopoverHeader>\n      </PopoverContent>\n    </Popover>\n  );\n}",
   "group": "data-display",
   "importPath": "@godxjp/ui/data-display",
@@ -22,10 +27,28 @@
     },
     {
       "defaultValue": "false",
-      "description": "When true, interaction outside the popover is blocked and focus is trapped inside (Radix Root prop).",
+      "description": "When true, interaction outside the popover is blocked and focus is trapped inside (React Aria modal popover).",
       "name": "modal",
       "type": "boolean"
     },
+    {
+      "defaultValue": "\"click\"",
+      "description": "What opens the panel. \"click\": the trigger toggles a dialog panel. \"hover\": a HOVER CARD — rich, non-modal preview content that opens when the pointer rests on the trigger for `openDelay` and closes `closeDelay` after it leaves (moving onto the card cancels the close); keyboard focus opens it and blur closes it at once; touch never opens it. In hover mode the panel is not a dialog and takes no focus, and a trigger without `asChild` renders an `<a>`. This is what `HoverCard` was (v32).",
+      "name": "openOn",
+      "type": "\"click\" | \"hover\""
+    },
+    {
+      "defaultValue": "200",
+      "description": "`openOn=\"hover\"` only: ms the pointer rests on the trigger before opening.",
+      "name": "openDelay",
+      "type": "number"
+    },
+    {
+      "defaultValue": "100",
+      "description": "`openOn=\"hover\"` only: ms after the pointer leaves before closing.",
+      "name": "closeDelay",
+      "type": "number"
+    },
     {
       "defaultValue": "\"center\"",
       "description": "PopoverContent prop. Horizontal alignment of the popover relative to the trigger.",
@@ -52,13 +75,13 @@
     },
     {
       "defaultValue": "false",
-      "description": "PopoverContent prop. The panel's CONTENT owns its inset: the popover zeroes its own --popover-space-inset so a Command list, a menu or a table runs edge to edge and draws its separators across the full width. Reach for it whenever the child already paints its own rows; leave it off for prose panels, which want the panel padding.",
+      "description": "PopoverContent prop. The panel's CONTENT owns its inset: the popover zeroes its own --popover-space-inset so a Command list, a menu or a table runs edge to edge and draws its separators across the full width. Reach for it whenever the child already paints its own rows; leave it off for prose panels, which want the panel padding. Ignored under openOn=\"hover\" (a hover card keeps its own measure).",
       "name": "flush",
       "type": "boolean"
     },
     {
       "defaultValue": "\"panel\"",
-      "description": "PopoverContent prop. How the panel is MEASURED across the inline axis. \"panel\" (default) is the popover's own --popover-width (18rem) — right for prose and for a list the panel sizes itself. \"auto\" lets the CONTENT decide, the only correct answer for something with a width of its own (a two-month Calendar is far wider than 18rem and was being clipped by it). \"trigger\" matches the anchor. It is the counterpart of `flush`: both set a token the panel already reads, so a service theme keeps owning them, where a `w-*` utility on className is a per-call-site constant nothing can retune.",
+      "description": "PopoverContent prop. How the panel is MEASURED across the inline axis. \"panel\" (default) is the popover's own --popover-width (18rem) — right for prose and for a list the panel sizes itself. \"auto\" lets the CONTENT decide, the only correct answer for something with a width of its own (a two-month Calendar is far wider than 18rem and was being clipped by it). \"trigger\" matches the anchor. It is the counterpart of `flush`: both set a token the panel already reads, so a service theme keeps owning them, where a `w-*` utility on className is a per-call-site constant nothing can retune. Ignored under openOn=\"hover\" (a hover card keeps its own measure).",
       "name": "width",
       "type": "\"panel\" | \"auto\" | \"trigger\""
     },
@@ -79,7 +102,7 @@
     31,
     35
   ],
-  "storyPath": "data-display/Popover.stories.tsx",
+  "storyPath": "data-display/popover.tsx",
   "subParts": [
     "PopoverAnchor",
     "PopoverContent",
@@ -88,8 +111,9 @@
     "PopoverTitle",
     "PopoverTrigger"
   ],
-  "tagline": "Radix-backed floating panel anchored to a trigger — always compose with PopoverTrigger + PopoverContent; never use a raw div overlay.",
+  "tagline": "React Aria floating panel anchored to a trigger — always compose with PopoverTrigger + PopoverContent; never use a raw div overlay.",
   "usage": [
+    "HOVER CARD: `<Popover openOn=\"hover\"><PopoverTrigger asChild><a href=…>@yamada</a></PopoverTrigger><PopoverContent>…</PopoverContent></Popover>` for RICH preview content (an avatar + bio, an entity summary). For a short plain-text hint use Tooltip. DON'T put essential information only in a hover card — touch never opens it; make the same content reachable from the trigger's destination. There is no `HoverCard` component.",
     "DO compose: <Popover> → <PopoverTrigger asChild> → <Button/> and <PopoverContent>. All four parts are required for any popover to function; omitting PopoverTrigger or PopoverContent produces nothing.",
     "DO set `<PopoverContent width=\"auto\">` when the child brings its own measure — a Calendar, a chart, a fixed-width preview. The panel's own 18rem clips them, and a `w-*` utility on className is a per-call-site constant no service theme can retune, which is exactly what `flush` exists to avoid on the padding axis. `width=\"trigger\"` matches the anchor, the shape every select-like control wants.",
     "DO set `<PopoverContent flush>` when the panel holds a Command list, a menu or a table — the child owns its own inset, so its rows and separators reach the panel edges. Never zero the padding with a utility on className: that is a per-call-site constant no service theme can retune, while `flush` keeps the inset on --popover-space-inset.",
@@ -97,9 +121,10 @@
     "DO use controlled mode (open + onOpenChange) when external code must open/close the popover programmatically (e.g., form validation reveal, keyboard shortcut). For toggle-only interactions, uncontrolled (defaultOpen) is simpler.",
     "DO structure panel content with PopoverHeader > PopoverTitle + PopoverDescription for labelled panels. This is purely presentational but establishes the correct font-weight and muted-foreground on the description.",
     "DON'T hand-roll a floating div or use a CSS show/hide toggle — Popover provides portal rendering, focus trap, Escape-to-close, and ARIA automatically.",
-    "DON'T place a Popover inside a Dialog without setting modal={false} on the Popover — nested modals conflict with Radix's focus management and produce stuck focus."
+    "DON'T place a Popover inside a Dialog without setting modal={false} on the Popover — nested modals conflict in focus management and produce stuck focus."
   ],
   "useCases": [
+    "User/profile preview on an @mention, or an entity (customer/account) preview on a table cell — `openOn=\"hover\"`.",
     "Advanced filter panel: a Filters Button triggers a Popover containing filter inputs (date range, status selects); panel measured with `<PopoverContent width='auto'>` so the filters set the width, or `width='trigger'` to match the button.",
     "Row action menu overflow: when a DataTable row has too many actions for inline display, a Popover holds the secondary actions (Edit, Archive, Delete) without navigating away.",
     "Contextual help / tooltip-rich: a small '?' icon button opens a Popover with PopoverTitle + PopoverDescription explaining a form field — richer than a Tooltip but less intrusive than a Dialog.",

package/agent/components/PrefetchLink.json

@@ -45,7 +45,7 @@
     3,
     31
   ],
-  "storyPath": "data-display/PrefetchLink.stories.tsx",
+  "storyPath": "react-router/prefetch-link.tsx",
   "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.",

package/agent/components/Progress.json

@@ -64,7 +64,7 @@
     "BarChart / PieChart / LineChart (@godxjp/ui/charts) — a Progress breakdown handles ONE total split into a few named states, inline and without a charting runtime; move up to a chart when you have several series, many categories, or a value changing over time."
   ],
   "rules": [],
-  "storyPath": "data-display/Progress.stories.tsx",
+  "storyPath": "data-display/progress.tsx",
   "tagline": "Progress in two modes: a METER (`value` 0–100, optional tone, over-capacity striped state, drawn as a bar or — with `shape='ring'` — as an arc with the readout inside it) and a BREAKDOWN (`segments` — one total split into tone-coloured slices on a taller track).",
   "usage": [
     "DO import from `@godxjp/ui/data-display`, not from a generic UI path: `import { Progress } from \"@godxjp/ui/data-display\";`",

package/agent/components/Prose.json

@@ -45,7 +45,7 @@
     "ScrollArea - if a very long document needs its own scroll viewport, wrap Prose in ScrollArea."
   ],
   "rules": [],
-  "storyPath": "data-display/Prose.stories.tsx",
+  "storyPath": "data-display/prose.tsx",
   "tagline": "Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from. To RENDER Markdown, use the sibling package `@godxjp/markdown` inside it — `<Prose><Markdown>{body}</Markdown></Prose>` — the one GFM renderer + sanitiser + Mermaid gate shared by every GoDX app; do not assemble react-markdown + rehype-sanitize per app (gh#1108). Tables: `@godxjp/markdown` wraps each in `.ui-prose-table-scroll`, which Prose scrolls horizontally (focusable only while it overflows), and table cells keep their words whole — a short code like `F02` never breaks (gh#1131).",
   "usage": [
     "DO import from `@godxjp/ui/data-display`: `import { Prose } from \"@godxjp/ui/data-display\";`",

package/agent/components/QrCode.json

@@ -44,7 +44,7 @@
     23,
     24
   ],
-  "storyPath": "data-display/QrCode.stories.tsx",
+  "storyPath": "data-display/qr-code.tsx",
   "tagline": "Local-only SVG QR renderer for enrollment links, device pairing and other values that must never be sent to a third-party image service.",
   "usage": [
     "DO use QrCode when the encoded payload must remain inside the browser, especially an otpauth enrollment URI containing a TOTP secret.",

package/agent/components/Radio.json

@@ -74,7 +74,6 @@
     13,
     23
   ],
-  "storyPath": "data-entry/Radio.stories.tsx",
   "subParts": [
     "RadioItem"
   ],

package/agent/components/RadioGroup.json

@@ -67,14 +67,14 @@
   "rules": [
     23
   ],
-  "storyPath": "data-entry/RadioGroup.stories.tsx",
+  "storyPath": "data-entry/radio-group.tsx",
   "subParts": [
     "RadioGroupRoot"
   ],
   "tagline": "Radio group accepting an options array or RadioItem children.",
   "usage": [
     "DO use the `options` prop for the data-driven path: pass `{ label, value, disabled?, description? }[]` and RadioGroup renders every option as a correctly labelled Field automatically — never hand-roll Radio.Item + Label pairs in a loop yourself.",
-    "DO provide `name` whenever the group lives inside an HTML form: Radix renders a hidden `<input name={name}>` carrying the selected string value, making the field natively form-submittable without a separate hidden input.",
+    "DO provide `name` whenever the group lives inside an HTML form: the group renders a hidden `<input name={name}>` carrying the selected string value, making the field natively form-submittable without a separate hidden input.",
     "DO use controlled mode (`value` + `onValueChange`) for any form managed by useForm or a state manager. Use `defaultValue` only for truly uncontrolled UI where you never need to read the value in code.",
     "DO NOT reach for children / manual composition unless the options list is dynamic-JSX (e.g. each item needs a custom rendered label with an icon). When you do compose children manually, wrap each Radio.Item in a Field — rendering a bare Radio.Item without Field skips the label and breaks a11y.",
     "DO NOT use RadioGroup when the user may select zero or multiple items — that is CheckboxGroup. RadioGroup enforces exactly one selection at all times (or none before first interaction when uncontrolled).",

package/agent/components/RangeTimeline.json

@@ -2,7 +2,7 @@
   "docPath": "docs/data-display/timeline.tsx",
   "example": "<RangeTimeline label=\"Schedule\" columns={[{ label: \"Week\", units: 7 }]} rows={[{ id: \"task\", label: \"Task\", start: 0, end: 6, startLabel: \"Start: day 1\", endLabel: \"End: day 7\" }]} />",
   "group": "data-display",
-  "importPath": "@godxjp/ui/data-display",
+  "importPath": "@godxjp/ui/lab",
   "name": "RangeTimeline",
   "props": [
     {
@@ -112,6 +112,7 @@
   "rules": [],
   "storyPath": "data-display/timeline.tsx",
   "tagline": "Horizontal intervals with token-owned geometry and optional endpoint editing.",
+  "tier": "lab",
   "usage": [
     "Provide a precise non-drag editor in each row label when enabling changes. Clipped endpoints and short intervals omit grips; labels and their editors remain available.",
     "An interval wholly outside the columns shows a localized direction indicator at that edge of its row: a chevron plus \"before\" at the inline-start edge, \"after\" plus a chevron at the inline-end edge; the chevrons mirror under RTL.",

package/agent/components/Rating.json

@@ -74,7 +74,7 @@
     6,
     23
   ],
-  "storyPath": "data-entry/Rating.stories.tsx",
+  "storyPath": "data-entry/rating.tsx",
   "tagline": "Star-rating input (radiogroup) — controlled via value/onValueChange, form-submittable via name, supports readOnly display.",
   "usage": [
     "DO theme the stars with `--rating-star-filled-color` (default `var(--warning)`) and `--rating-star-empty-color` (default `var(--muted-foreground)`, at `--rating-star-empty-alpha` 0.45) — HSL components, set on :root or a scoped [data-tenant] (gh#694). NEVER override `.ui-rating-star-filled`: it is an internal class. Unset, the stars paint exactly as before.",

package/agent/components/RecordPicker.json

@@ -105,7 +105,7 @@
     "Dialog — the over-threshold branch; `RecordPicker` opens one for you."
   ],
   "rules": [],
-  "storyPath": "data-entry/RecordPicker.stories.tsx",
+  "storyPath": "data-entry/record-picker.tsx",
   "tagline": "ONE picker whose SHAPE follows the size of the set behind it: at or under `threshold` it IS a Select (dropdown with search); over it, a Dialog with search + consumer-declared filters, chips, and a confirm step for `multiple`. Reach for it when the same field may hold eight records on one tenant and eight thousand on another.",
   "usage": [
     "DO pass `count` from the server whenever the list is server-backed. It is the only honest input to the threshold decision — `rows.length` describes the page you fetched, not the set behind it, so a picker over 9000 records would render as a dropdown showing 20.",

package/agent/components/ResizablePanel.json

@@ -46,7 +46,7 @@
     3,
     6
   ],
-  "storyPath": "layout/ResizablePanel.stories.tsx",
+  "storyPath": "layout/resizable-panel.tsx",
   "subParts": [
     "ResizableHandle",
     "ResizablePanelGroup"

package/agent/components/ResponsiveGrid.json

@@ -52,7 +52,7 @@
   ],
   "related": [
     "Flex — use Flex (direction col or row) for sequential blocks of mixed-width content (forms, description lists, button rows). Use ResponsiveGrid only when you want equal-width, auto-reflowing tile columns.",
-    "SplitPane — use SplitPane for a fixed two-panel side-by-side layout with a defined primary/secondary ratio that does NOT collapse to stacked tiles. Use ResponsiveGrid when you want automatic column count collapse on narrow screens.",
+    "SplitPane — a main column beside a FIXED-rem aside that splits at the pane's own 48rem and stacks below it (a user-draggable ratio is ResizablePanel). Use ResponsiveGrid when you want automatic column count collapse on narrow screens.",
     "StatCard — the canonical direct child of ResponsiveGrid for KPI tiles. StatCard is self-contained (draws its own bordered card); never wrap it in Card/CardContent when placing it inside ResponsiveGrid.",
     "SkeletonStat — the loading-state sibling of StatCard, used as a drop-in placeholder child of ResponsiveGrid with the same columns count while KPI data is in flight."
   ],
@@ -60,7 +60,7 @@
     24,
     40
   ],
-  "storyPath": "layout/ResponsiveGrid.stories.tsx",
+  "storyPath": "layout/responsive-grid.tsx",
   "tagline": "Container-responsive card grid with configurable base, sm, md and lg columns.",
   "usage": [
     "ResponsiveGrid.Item span={2} owns a responsive column span; an object {base:1,lg:2} sets explicit steps, clamped to the parent columns.",

package/agent/components/Reveal.json

@@ -42,14 +42,14 @@
     }
   ],
   "related": [
-    "AuthShell — pairs with Reveal for the auth card entrance; AuthShell delegates all motion to Reveal.",
+    "CenteredShell (auth shape) — pairs with Reveal for the auth card entrance; the auth shape delegates all motion to Reveal.",
     "Card — the most common thing to wrap in <Reveal> (dashboard cards, auth card, settings sections).",
     "ResponsiveGrid — combine with `<Reveal delay={n}>` (or `asChild`) per grid item for a staggered grid reveal.",
     "Carousel — wrap the WHOLE Carousel in one `<Reveal on=\"view\">`, never each CarouselItem: the rail clips its slides, so a per-slide observer never fires for the ones outside the window.",
     "ScrollArea — same rule as Carousel: reveal the scroller, not the children it clips."
   ],
   "rules": [],
-  "storyPath": "general/Reveal.stories.tsx",
+  "storyPath": "general/reveal.tsx",
   "tagline": "The official entrance-motion primitive (staggered fade-up) — reads DS motion tokens and honours prefers-reduced-motion, replacing hand-rolled @keyframes + .app-reveal/.d1..d6 classes.",
   "usage": [
     "DO use <Reveal> INSTEAD of hand-rolling `@keyframes auth-fade-up` + `.app-reveal` + `.d1..d6` in a consumer global.css — that repeats literal durations/delays and violates the tokens-only rule. Reveal reads `--duration-slow` / `--ease-emphasized` / `--reveal-distance` / `--reveal-stagger-step`.",
@@ -65,7 +65,7 @@
     "DO NOT set a raw ms delay or a literal translate distance — the whole point is that `delay` is a controlled ordinal and the distance/duration come from tokens."
   ],
   "useCases": [
-    "Auth card entrance: `<AuthShell><Reveal><Card/></Reveal></AuthShell>` — the sign-in card fades up on load, respecting reduced-motion.",
+    "Auth card entrance: `<CenteredShell variant=\"auth\"><Reveal><Card/></Reveal></CenteredShell>` — the sign-in card fades up on load, respecting reduced-motion.",
     "Staggered dashboard: map stat cards with `<Reveal delay={i + 1}>` so the row cascades in.",
     "Section reveal on a settings/detail page — wrap each Card in <Reveal> for a calm entrance without hand-written CSS.",
     "asChild on a grid item: `<Reveal asChild delay={2}><ResponsiveGrid.Item/></Reveal>` keeps the grid cell intact while animating it in.",

package/agent/components/ScrollArea.json

@@ -72,11 +72,11 @@
     24,
     31
   ],
-  "storyPath": "data-display/ScrollArea.stories.tsx",
+  "storyPath": "data-display/scroll-area.tsx",
   "subParts": [
     "ScrollBar"
   ],
-  "tagline": "A native scrolling box (no Radix since v23): one `overflow: auto` element whose scrollbar is styled from --scroll-area-* tokens. Always set an explicit height/max-height, or nothing overflows and no scrollbar appears. Owns the scrolling element, so it also owns reaching it (viewportRef) and bottom anchoring for a live stream (anchor).",
+  "tagline": "A native scrolling box (no scroll library since v23): one `overflow: auto` element whose scrollbar is styled from --scroll-area-* tokens. Always set an explicit height/max-height, or nothing overflows and no scrollbar appears. Owns the scrolling element, so it also owns reaching it (viewportRef) and bottom anchoring for a live stream (anchor).",
   "usage": [
     "DO set an explicit height or max-height on ScrollArea via className (e.g. `className=\"h-64\"` or `className=\"max-h-[min(300px,50vh)]\"`). Without a height constraint the viewport grows to fit content and the scrollbar is never rendered.",
     "DO wrap content in a single child element inside ScrollArea — the Viewport observes its single child's size to decide whether overflow exists.",

package/agent/components/SearchInput.json

@@ -83,7 +83,7 @@
   "rules": [
     23
   ],
-  "storyPath": "data-entry/SearchInput.stories.tsx",
+  "storyPath": "data-entry/search-input.tsx",
   "tagline": "Debounced search box with a clear button. Fires onSearch (NOT onChange) after the debounce. Controlled (value) or uncontrolled (defaultValue).",
   "usage": [
     "DO: listen to `onSearch`, not `onChange`. The component debounces internally (default 250 ms) and fires `onSearch(q)` after the delay — never wire your filter logic to `onChange` on SearchInput because it does not expose one.",

package/agent/components/Segmented.json

@@ -74,7 +74,7 @@
     6,
     23
   ],
-  "storyPath": "data-entry/Segmented.stories.tsx",
+  "storyPath": "data-entry/segmented.tsx",
   "tagline": "One-of-N from a small, closed, always-visible set — the enterprise Segmented / filter bar drawn on react-aria-components' RadioGroup. A track with the chosen item as a lifted slab. Reach for it INSTEAD OF a Select when there are 2-4 options and all of them fit on screen, and instead of ToggleGroup when exactly one must always be chosen.",
   "usage": [
     "DO use it for a closed set of 2-4 peer choices that are cheap to show — theme, view mode, a date range preset.",

package/agent/components/Select.json

@@ -5,7 +5,8 @@
     "CountrySelect",
     "SearchSelect",
     "Typeahead",
-    "AsyncSelect"
+    "AsyncSelect",
+    "TagInput"
   ],
   "example": "import {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@godxjp/ui/data-entry\";\nimport { Text } from \"@godxjp/ui/general\";\n// as=\"span\" on both: an option row is a phrasing context, so a <div> would be invalid HTML.\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// ── 1. Data-driven (Ant-style) — static list, no search ──────────────────────\nexport function StatusSelect({ value, onChange }) {\n  return (\n    <Select\n      value={value}\n      onValueChange={onChange}\n      options={[\n        { value: \"draft\",    label: \"Draft\" },\n        { value: \"sent\",     label: \"Sent\" },\n        { value: \"paid\",     label: \"Paid\" },\n        { value: \"overdue\",  label: \"Overdue\" },\n      ]}\n      placeholder=\"Select status\"\n      name=\"status\"\n      id=\"status\"\n    />\n  );\n}\n\n// ── 2. Data-driven, searchable static list with groups ────────────────────────\nexport function CurrencySelect({ value, onChange }) {\n  return (\n    <Select\n      value={value}\n      onValueChange={onChange}\n      showSearch\n      options={[\n        { value: \"JPY\", label: \"Japanese Yen\",  group: \"Asia\" },\n        { value: \"VND\", label: \"Vietnamese Dong\", group: \"Asia\" },\n        { value: \"EUR\", label: \"Euro\",           group: \"Europe\" },\n        { value: \"GBP\", label: \"Pound Sterling\", group: \"Europe\" },\n      ]}\n      placeholder=\"Select currency\"\n      searchPlaceholder=\"Search currencies…\"\n      name=\"currency\"\n    />\n  );\n}\n\n// ── 3. Data-driven, async (loadOptions) ──────────────────────────────────────\nexport function AccountSelect({ value, onChange, selectedLabel }) {\n  async function loadOptions({ query, page }) {\n    const res = await fetch(`/api/accounts?q=${query}&page=${page}`);\n    const json = await res.json();\n    return { options: json.data, hasMore: json.hasMore };\n  }\n  return (\n    <Select\n      value={value}\n      onValueChange={onChange}\n      loadOptions={loadOptions}\n      selectedLabel={selectedLabel}\n      placeholder=\"Search accounts…\"\n      renderOption={(opt) => (\n        <Flex as=\"span\" align=\"center\" gap=\"xs\">\n          <Text as=\"span\" tone=\"muted\" mono>\n            {opt.value}\n          </Text>\n          {opt.label}\n        </Flex>\n      )}\n      name=\"account_id\"\n    />\n  );\n}\n\n// ── 4. Compound API — custom trigger content ──────────────────────────────────\nexport function PrioritySelect({ value, onValueChange }) {\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger size=\"sm\" id=\"priority\">\n        <SelectValue placeholder=\"Priority\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Urgency</SelectLabel>\n          <SelectItem value=\"high\">High</SelectItem>\n          <SelectItem value=\"medium\">Medium</SelectItem>\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectItem value=\"low\">Low</SelectItem>\n      </SelectContent>\n    </Select>\n  );\n}",
   "group": "data-entry",
@@ -138,7 +139,7 @@
       "type": "\"full\" | \"auto\" | \"bounded\""
     },
     {
-      "description": "Searchable mode only. Controlled popover open state (uncontrolled by default). Pair with onOpenChange.",
+      "description": "Searchable mode only. Controlled popover open state (uncontrolled by default). Pair with onOpenChange. With `mode=\"tags\"`, `open={false}` (antd's spelling of \"a tags field whose list never opens\") renders the INLINE chip field instead — no popup, no combobox: type + Enter or a `tokenSeparators` character adds a tag, Backspace on an empty draft drops the last, a pasted \"a, b, c\" becomes three tags, the draft commits on blur, and `name` submits the tags comma-joined in one hidden input. `onValueChange` then receives the tag array only. This is what the retired `TagInput` was (v32 #1223).",
       "name": "open",
       "type": "boolean"
     },
@@ -366,18 +367,18 @@
   ],
   "related": [
     "Segmented — the same choice when the option set is small and worth showing at once. Select hides its options behind a trigger; Segmented lays them out, which reads better for 2-4 mutually exclusive options.",
-    "SearchSelect — the combobox engine Select delegates to when showSearch=true or loadOptions is set. Prefer Select with showSearch instead of reaching for SearchSelect directly (SearchSelect is now deprecated as a public API).",
+    "Select showSearch / loadOptions — the searchable combobox is a MODE of this component (an internal engine, not a public SearchSelect export); never build your own.",
     "TreeSelect — use when options are hierarchical (parent/child tree). Not a drop-in for Select; has expand/collapse and a separate treeData prop.",
     "Select with showSearch — use Select (with the `showSearch` prop) for typeahead/autocomplete lookup patterns instead of the removed Autocomplete component.",
     "RadioGroup — use instead of Select when there are 2-4 mutually exclusive choices that must all be visible at once without opening a popover.",
-    "Combobox (if present) — compound cmdk-powered combobox for free-text + suggestion; Select is for strict value lists only."
+    "Command — the cmdk-powered list for free-text command search (a palette, a slash menu); a value-picking combobox is Select showSearch — there is no Combobox component."
   ],
   "rules": [
     3,
     6,
     23
   ],
-  "storyPath": "data-entry/Select.stories.tsx",
+  "storyPath": "data-entry/select.tsx",
   "subParts": [
     "SelectContent",
     "SelectGroup",
@@ -391,6 +392,7 @@
   ],
   "tagline": "Polymorphic single-select: pass options/loadOptions for the data-driven (Ant-style) API, or compose sub-parts manually — never use a raw <select>.",
   "usage": [
+    "FREE-TEXT TAGS WITH NO LIST (keywords, email recipients, labels typed from scratch): `<Select mode=\"tags\" open={false} value={tags} onValueChange={setTags} />` — the inline chip field. Use plain `mode=\"tags\"` (popup) only when there is a list of existing tags to pick from. There is no `TagInput` component.",
     "DO use the data-driven API (options/loadOptions) for straightforward selects — it handles grouping, search, async, and custom rendering automatically. Only reach for the compound API when you need to inject arbitrary content into the trigger or listbox.",
     "DO pass name= on the data-driven Select so the value is submitted with a native form or Inertia useForm. Without name= the value is React-only and will not appear in form data.",
     "NAMING A SELECT WITH NO VISIBLE LABEL: put `aria-label` on `<Select>`, NOT on `<SelectTrigger>`. Both render the identical button attribute — Select forwards its name down through SelectFieldA11yContext and the trigger writes last — but only the root spelling also names the react-aria field, and a root that cannot see a name warns once per render (gh#869). Inside a FormField or Field, pass nothing: the label id reaches both levels on its own. `aria-labelledby` pointing at your own element works on either level and is the right spelling when a visible heading already names the control.",

package/agent/components/Separator.json

@@ -64,7 +64,7 @@
     44,
     45
   ],
-  "storyPath": "layout/Separator.stories.tsx",
+  "storyPath": "layout/separator.tsx",
   "tagline": "Tokenized horizontal or vertical rule, optionally INTERRUPTED by a localized label (day divider, unread watermark, auth conjunction).",
   "usage": [
     "DO use Separator for section dividers instead of raw border divs.",