@godxjp/ui 33.20.0 → 33.22.1

package/README.md

@@ -18,7 +18,7 @@ npm i @godxjp/ui
 
 <!-- agent-catalog-counts:start -->
 
-The catalog — 171 components, 2266 tokens, 44 cardinal rules — is published in two forms from one
+The catalog — 210 components, 3184 tokens, 44 cardinal rules — is published in two forms from one
 source. **Entry point for either: [`AGENTS.md`](AGENTS.md).**
 <!-- agent-catalog-counts:end -->
 
@@ -53,10 +53,10 @@ static files straight from this public repo — no hosting, no deploy step:
 | [`agent/llms.txt`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/llms.txt) | 3 KB | the [llms.txt](https://llmstxt.org/) entry point |
 | [`agent/DESIGN.md`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/DESIGN.md) | 18 KB | the visual spec: tokens, colour scarcity, admin screen anatomy, do/don't |
 | [`agent/index.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json) | 3 KB | manifest: version, counts, every file's URL |
-| [`agent/components-index.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json) | 54 KB | all 171 as name + group + tagline — **fetch this first** |
+| [`agent/components-index.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json) | 46 KB | all 210 as name + group + tagline — **fetch this first** |
 | [`agent/components/<Name>.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json) | 1 KB–38 KB | one file per component, each with its `importPath` — **this is the route to take** |
-| [`agent/components.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json) | 1.3 MB | all 171 entries in one file — most URL fetchers truncate this silently; prefer the per-component files |
-| [`agent/tokens.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json) | 863 KB | all 2266 design tokens, their values and why they exist |
+| [`agent/components.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json) | 1.4 MB | all 210 entries in one file — most URL fetchers truncate this silently; prefer the per-component files |
+| [`agent/tokens.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json) | 1.4 MB | all 3184 design tokens, their values and why they exist |
 | [`agent/vocabulary.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json) | 7 KB | the controlled prop vocabulary |
 | [`agent/rules.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json) | 23 KB | the 44 cardinal rules |
 <!-- prettier-ignore-end -->

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 33.20.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 33.22.1.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -52,24 +52,24 @@ screen anatomy, the visual target the rules below do not give you. Then fetch in
    task is a task** — "build a settings page", "confirm a destructive delete", "a list page with
    filters" — start HERE, not at the components. Then fetch `patterns/<name>.json` for complete,
    copy-paste-ready code. A component index answers "does X exist"; it cannot answer "build Y".
-1. `components-index.json` — 54 KB, all 171 components as name + group +
+1. `components-index.json` — 46 KB, all 210 components as name + group +
    tagline. Read this when you already know the SHAPE you need. Each entry may carry `absorbed`:
    names that **do not exist** and map to it — `Combobox`, `Autocomplete`, `CountrySelect` and
    `SearchSelect` are all `Select`. If you are about to hand-roll something, search this field
    first; it exists because that is the mistake.
-2. `components/<Name>.json` — one file per component (1 KB–38 KB, median 6 KB), carrying its props,
+2. `components/<Name>.json` — one file per component (1 KB–38 KB, median 5 KB), carrying its props,
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 44 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2266 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 3184 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 220 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1933 `component` entries are per-part knobs; reach for one only when a role is
+   2851 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 35 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
 
-**Do not fetch `components.json`.** It is 1.3 MB, and most URL fetchers truncate a
+**Do not fetch `components.json`.** It is 1.4 MB, and most URL fetchers truncate a
 response that size and return the head without telling you. You get the first few entries, believe
 you read the catalog, and answer the rest from memory — which is the failure this file exists to
 prevent. The per-component files say the same thing without the cliff.
@@ -150,7 +150,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 220 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** The default `--primary` is a neutral placeholder: set it (`:root { --primary: <H> <S>% <L>%; }`, HSL components, no `hsl()` wrapper) or import a theme preset such as `@godxjp/ui/themes/godx.css` |
 | `semantic` | 113 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1933 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `component` | 2851 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/AppSettingPicker.json

@@ -5,7 +5,6 @@
     "TimezonePicker",
     "DateFormatPicker",
     "TimeFormatPicker",
-    "ThemePicker",
     "DensityPicker",
     "AppSettingToggle"
   ],

package/agent/components/AppShell.json

@@ -4,6 +4,16 @@
   "importPath": "@godxjp/ui/layout",
   "name": "AppShell",
   "props": [
+    {
+      "description": "Phone-only destinations in drawer mode (<=900px). Reuses MobileShell tabBar: equal-width children, safe-area insets, aria-current=page. Reserve the measured band outside the scrolling main; the app footer flows at the end of main, leaving only this bottom navigation persistent; publishes --app-shell-mobile-tab-bar-block-size on the shell and --toast-sticky-bar-height on html. Omit/null/false for none; responsiveNavigation=none disables it. Use 3–5 Button asChild links; native Tab/Shift+Tab and Enter. Hidden on desktop and in print. External dock: reserve --app-shell-viewport-inset; bar stays inside the remaining shell viewport.",
+      "name": "mobileTabBar",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Navigation landmark name; defaults to the shared localized primary-navigation label (ja/en/vi).",
+      "name": "mobileTabBarLabel",
+      "type": "string"
+    },
     {
       "description": "Optional sidebar node, typically a Sidebar. Omit or pass null/false to remove its landmark and grid track. Logo remains in the topbar; navRail is independent.",
       "name": "sidebar",
@@ -86,7 +96,7 @@
       "type": "string"
     },
     {
-      "description": "App-level footer outside the main content area.",
+      "description": "App-level footer with page keyline insets (--space-page-x, --space-page-compact-x on phones). Outside main on desktop; when mobileTabBar is visible, flows at the end of the scrolling main instead of reserving persistent chrome.",
       "name": "footer",
       "type": "ReactNode"
     },

package/agent/components/BlockEditor.json

@@ -57,10 +57,15 @@
       "type": "\"framed\" | \"plain\""
     },
     {
-      "description": "Extra `/` rows ({ key, label, icon, keywords?, run(api) }) — `api.insertMarkdown` inserts through the codec.",
+      "description": "Extra `/` rows ({ key, label, icon, keywords?, run(api) }) — `api.insertMarkdown` inserts through the codec, so a directive skeleton (`:::poll[Q]{id=x}\\n- A\\n- B\\n:::`) lands as a directive block.",
       "name": "actions",
       "type": "BlockEditorAction[]"
     },
+    {
+      "description": "Editor previews for directive blocks, by name. A container directive the kit does not model (`:::poll[…]{…}`) is one atomic block — dragged, deleted and inserted whole, its source edited behind Edit source; the preview gets `{ name, label, attributes, source, body }` (canonical). No renderer, or `undefined`: the block shows its source.",
+      "name": "directives",
+      "type": "Record<string, (block: DirectiveBlock) => ReactNode | undefined>"
+    },
     {
       "description": "Override any string (defaults: kit ja / en / vi).",
       "name": "labels",

package/agent/components/Button.json

@@ -59,7 +59,7 @@
     },
     {
       "defaultValue": "false",
-      "description": "In-flight state — shows a leading `Loader2` spinner (replaces a leading icon if present), sets `aria-busy=\"true\"`, and blocks activation (non-interactive, pointer-events disabled) while keeping the label visible so the width doesn't jump. Prefer this over a hand-rolled `<Loader2 className=\"animate-spin\">` inside the button. Ignored when `asChild` (Slot requires a single child).",
+      "description": "In-flight state — shows a leading `Loader2` spinner (replaces a leading icon if present), sets `aria-busy=\"true\"` and `aria-disabled=\"true\"`, and blocks activation (click, Enter/Space and a `type=\"submit\"` form submission are swallowed; pointer-events disabled) while keeping the label visible so the width doesn't jump. It never sets native `disabled`, so the button keeps focus while the request runs — a disabled element drops focus to <body>, which strands a keyboard user outside a dialog after a failed save. Prefer this over a hand-rolled `<Loader2 className=\"animate-spin\">` inside the button. Ignored when `asChild` (Slot requires a single child).",
       "name": "loading",
       "type": "boolean"
     },

package/agent/components/CardShowcase.json

@@ -0,0 +1,44 @@
+{
+  "example": "import { CardShowcase } from \"@godxjp/ui/layout\";\n\n<CardShowcase preset=\"fan\" label=\"ONE PLACE. MANY WORLDS.\" caption={{ overline: \"A whole world in your hands.\", title: \"Find your next favourite.\" }} items={cards.map((c) => <a key={c.id} href={c.href} aria-label={c.name}><img src={c.image} alt={c.name} /></a>)} />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "CardShowcase",
+  "props": [
+    {
+      "description": "Composition.",
+      "name": "preset",
+      "required": true,
+      "type": "\"fan\" | \"binder\""
+    },
+    {
+      "description": "Pictures in reading order (links wrapping an img, or imgs).",
+      "name": "items",
+      "required": true,
+      "type": "ReactNode[]"
+    },
+    {
+      "description": "fan: corner label.",
+      "name": "label",
+      "type": "ReactNode"
+    },
+    {
+      "description": "fan: caption card.",
+      "name": "caption",
+      "type": "{ icon?: ReactNode; overline?: ReactNode; title: ReactNode }"
+    }
+  ],
+  "related": [
+    "EditorialHero — the `media` slot.",
+    "EditorialBanner — the `media` slot (binder)."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A staged composition of product pictures (gh#1435). `preset=\"fan\"`: three cards fanned (start, centre, end) over ornament orbits, stars and a glow, with a corner `label` and a `caption` card. `preset=\"binder\"`: a tilted binder page of up to six pockets. Decorations are aria-hidden; each item keeps its own accessible name. Geometry: `--editorial-showcase-*`, `--editorial-binder-*`.",
+  "usage": [
+    "DO give each linked picture an accessible name; the stage itself is decoration."
+  ]
+}

package/agent/components/CatalogCard.json

@@ -0,0 +1,83 @@
+{
+  "example": "import { CatalogCard, CatalogCardTag } from \"@godxjp/ui/layout\";\n\n<CatalogCard media={<a href={href} tabIndex={-1} aria-hidden><img src={img} alt=\"\" /></a>} favorite={{ pressed: saved, onPressedChange: setSaved, label: saveLabel }} overline=\"Pokémon\" title={<a href={href}>{name}</a>} meta={<><span>132/106</span><CatalogCardTag>SAR</CatalogCardTag></>} price=\"¥12,800\" change=\"↓ −4.2%\" />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "CatalogCard",
+  "props": [
+    {
+      "description": "The picture (a link, tabIndex -1 + aria-hidden, wrapping an img).",
+      "name": "media",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "The item link.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "\"card\"",
+      "description": "Picture frame.",
+      "name": "variant",
+      "type": "\"card\" | \"sealed\""
+    },
+    {
+      "description": "Overlaid toggle; disabled while the saved state is loading.",
+      "name": "favorite",
+      "type": "{ pressed: boolean; onPressedChange: (pressed: boolean) => void; label: string; disabled?: boolean }"
+    },
+    {
+      "description": "Line above the title.",
+      "name": "overline",
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "3",
+      "description": "Heading level.",
+      "name": "level",
+      "type": "2 | 3 | 4"
+    },
+    {
+      "description": "Metadata row.",
+      "name": "meta",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Price caption.",
+      "name": "priceLabel",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Price figure.",
+      "name": "price",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Price change.",
+      "name": "change",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Bottom row (links inside get the row's link style).",
+      "name": "footer",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "ResponsiveGrid — `preset=\"catalog\"`."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "subParts": [
+    "CatalogCardTag"
+  ],
+  "tagline": "A catalog tile (gh#1435): the framed picture with an overlaid circular favourite toggle, then an overline, the title (a heading wrapping the item link, clamped to two lines), a metadata row with `CatalogCardTag`s, a price caption and line (price + change), and a footer row. `variant=\"sealed\"` frames a wider, unshadowed product picture. Geometry: `--editorial-catalog-card-*`.",
+  "usage": [
+    "DO lay tiles out with `ResponsiveGrid preset=\"catalog\"`."
+  ]
+}

package/agent/components/CatalogDetail.json

@@ -0,0 +1,76 @@
+{
+  "example": "import { CatalogDetail, CatalogDetailTag, Eyebrow } from \"@godxjp/ui/layout\";\n\n<CatalogDetail media={<img src={src} alt={name} />} overline={<Eyebrow>Pokémon</Eyebrow>} title={name} meta={<CatalogDetailTag>SAR</CatalogDetailTag>} summary={{ label: \"Market\", price: \"¥32,800\" }} facts={[{ key: \"set\", label: \"Expansion\", value: \"151\" }]} />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "CatalogDetail",
+  "props": [
+    {
+      "defaultValue": "\"card\"",
+      "description": "Frame for a card or a sealed package.",
+      "name": "variant",
+      "type": "\"card\" | \"sealed\""
+    },
+    {
+      "description": "The picture.",
+      "name": "media",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Save toggle over the frame.",
+      "name": "favorite",
+      "type": "{ pressed; onPressedChange; label; disabled? }"
+    },
+    {
+      "description": "Line under the frame.",
+      "name": "mediaCaption",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Kicker (an Eyebrow).",
+      "name": "overline",
+      "type": "ReactNode"
+    },
+    {
+      "description": "The h1.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "CatalogDetailTags.",
+      "name": "meta",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Summary price block.",
+      "name": "summary",
+      "type": "{ label?; price; note? }"
+    },
+    {
+      "description": "Actions under the summary.",
+      "name": "actions",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Facts, two columns.",
+      "name": "facts",
+      "type": "{ key; label; value }[]"
+    }
+  ],
+  "related": [
+    "CatalogCard — the item in a grid.",
+    "CatalogDetailSection — the bands under it."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "The head of a catalog item's page (gh#1438): a framed picture with the save toggle over its corner and a caption, beside the kicker, the page's h1, a row of CatalogDetailTags, a summary price between hairlines, actions and a two-column facts list. Geometry: `--editorial-catalog-detail-*`.",
+  "usage": [
+    "DO pass the item's one h1 as title; the page has no other h1.",
+    "DO use CatalogCard for the same item in a grid."
+  ]
+}

package/agent/components/CatalogDetailSection.json

@@ -0,0 +1,52 @@
+{
+  "example": "import { CatalogDetailSection } from \"@godxjp/ui/layout\";\n\n<CatalogDetailSection titleId=\"info\" title=\"Card information\" description=\"From the catalogue.\" />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "CatalogDetailSection",
+  "props": [
+    {
+      "defaultValue": "\"band\"",
+      "description": "Hairlined band, or a page module (no hairline, module rhythm).",
+      "name": "variant",
+      "type": "\"band\" | \"module\""
+    },
+    {
+      "description": "Id on the section (in-page link target).",
+      "name": "id",
+      "type": "string"
+    },
+    {
+      "description": "The h2.",
+      "name": "title",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Muted paragraph.",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Anything after.",
+      "name": "children",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Id on the h2 (names the section).",
+      "name": "titleId",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "EditorialSection — a full-width band of a sections page."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "One band of an item page under its head (gh#1438): a top hairline, an h2, a muted paragraph, then anything else. Geometry: `--editorial-catalog-detail-section-*`.",
+  "usage": [
+    "DO pass titleId so the section is a named region."
+  ]
+}

package/agent/components/CatalogDetailTag.json

@@ -0,0 +1,27 @@
+{
+  "example": "import { CatalogDetailTag } from \"@godxjp/ui/layout\";\n\n<CatalogDetailTag>SV8 132/106</CatalogDetailTag>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "CatalogDetailTag",
+  "props": [
+    {
+      "description": "Tag text.",
+      "name": "children",
+      "required": true,
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "CatalogCardTag — the tag of a grid tile."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "One outlined tag (number, rarity, printed language) in a CatalogDetail meta row (gh#1438).",
+  "usage": [
+    "DO keep it to a short code or word."
+  ]
+}

package/agent/components/EditorialArticle.json

@@ -0,0 +1,53 @@
+{
+  "example": "import { EditorialArticle, EditorialArticleSection, EditorialNote, Eyebrow } from \"@godxjp/ui/layout\";\n\n<EditorialArticle eyebrow={<Eyebrow>PRICE GUIDE</Eyebrow>} title=\"A fair comparison starts with the details.\" intro=\"A matching card name is only the beginning.\">\n  <EditorialArticleSection title=\"Check it is the same card\" paragraphs={[\"Confirm the game, card number and set.\"]} />\n  <EditorialNote>An original guide, not a price forecast.</EditorialNote>\n</EditorialArticle>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialArticle",
+  "props": [
+    {
+      "description": "The page's h1.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Kicker above it (an Eyebrow).",
+      "name": "eyebrow",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Lead paragraph under it.",
+      "name": "intro",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Sections, note, link.",
+      "name": "children",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Id on the h1.",
+      "name": "titleId",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "EditorialBreadcrumb, EditorialTextLink, LegalDocumentShell."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "subParts": [
+    "EditorialArticleSection",
+    "EditorialNote"
+  ],
+  "tagline": "The reading column of a long-form editorial page (gh#1440): the ruled kicker, the page's one h1, an intro set off by a rule, then `EditorialArticleSection`s (an h2 and paragraphs at the reading leading), an `EditorialNote` and a trailing `EditorialTextLink`. Block flow with collapsing margins, so the design's rhythm holds. Geometry: `--editorial-article-*`, `--editorial-note-*`.",
+  "usage": [
+    "DO put it in an EditorialSection after an EditorialBreadcrumb on a `flow=\"sections\"` page.",
+    "DO pass each prose paragraph in `EditorialArticleSection paragraphs`, not raw `<p>`.",
+    "DON'T use it for a versioned legal/admin document — that is LegalDocumentShell."
+  ]
+}

package/agent/components/EditorialAuth.json

@@ -0,0 +1,53 @@
+{
+  "example": "import { EditorialAuth, EditorialAuthCard, Eyebrow } from \"@godxjp/ui/layout\";\n\n<EditorialAuth eyebrow={<Eyebrow>YOUR COLLECTION STARTS HERE</Eyebrow>} title=\"Make room for what you love.\" benefits={[\"A collection of your own\"]}><EditorialAuthCard title=\"Welcome back.\" /></EditorialAuth>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialAuth",
+  "props": [
+    {
+      "description": "Kicker.",
+      "name": "eyebrow",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Display title (h1).",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Copy.",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Picture on the front card.",
+      "name": "art",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Benefit lines.",
+      "name": "benefits",
+      "type": "ReactNode[]"
+    },
+    {
+      "description": "EditorialAuthCard.",
+      "name": "children",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "EditorialAuthCard — the card.",
+    "CenteredShell — use variant=\"auth\" for the application sign-in shell."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A sign-in / sign-up page (gh#1439): a story column (kicker, display title — line breaks kept —, copy, a decorative card pair carrying `art`, benefit lines with a check) beside the form card (`children`, default 460px). Geometry: `--editorial-auth-*`.",
+  "usage": [
+    "DO keep the form in an EditorialAuthCard with Form + FormField."
+  ]
+}

package/agent/components/EditorialAuthCard.json

@@ -0,0 +1,52 @@
+{
+  "example": "import { EditorialAuthCard } from \"@godxjp/ui/layout\";\n\n<EditorialAuthCard title=\"Welcome back.\" description=\"Sign in to see your collection.\" footer=\"New here?\" />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialAuthCard",
+  "props": [
+    {
+      "description": "Badge slot.",
+      "name": "badge",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Title.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Heading level. Default: 2.",
+      "name": "level",
+      "type": "2 | 3"
+    },
+    {
+      "description": "Copy.",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "The form.",
+      "name": "children",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Ruled footer line.",
+      "name": "footer",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "EditorialAuth — the page."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "The form card of EditorialAuth (gh#1439): badge, title, copy, the form (`children`) and a ruled footer line (\"New to the site? Create an account\").",
+  "usage": [
+    "DO keep one form per card."
+  ]
+}

package/agent/components/EditorialBanner.json

@@ -0,0 +1,53 @@
+{
+  "example": "import { CardShowcase, EditorialBanner, Eyebrow } from \"@godxjp/ui/layout\";\nimport { Button } from \"@godxjp/ui/general\";\n\n<EditorialBanner eyebrow={<Eyebrow>YOUR COLLECTION HAS A STORY.</Eyebrow>} title=\"A home for the cards that matter.\" action={<Button asChild><a href=\"/collection/\">Start your collection</a></Button>} media={<CardShowcase preset=\"binder\" items={pockets} />} />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialBanner",
+  "props": [
+    {
+      "description": "The heading.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Kicker.",
+      "name": "eyebrow",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Paragraph.",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Call to action (a kit Button).",
+      "name": "action",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Media column (a CardShowcase preset=\"binder\").",
+      "name": "media",
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "2",
+      "description": "Heading level.",
+      "name": "level",
+      "type": "2 | 3"
+    }
+  ],
+  "related": [
+    "CardShowcase."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A rounded brand panel inside the column (gh#1435): kicker, title, description and a call to action beside a media slot, in the inverse palette. The kit Button in `action` is re-pointed to the inverse roles. Colours and geometry: `--editorial-banner-*`.",
+  "usage": [
+    "DO put it in an EditorialSection with spacing=\"section\"."
+  ]
+}