@godxjp/ui 33.20.0 → 33.22.1

package/agent/components/EditorialBreadcrumb.json

@@ -0,0 +1,38 @@
+{
+  "example": "import { EditorialBreadcrumb, EditorialSection } from \"@godxjp/ui/layout\";\n\n<EditorialSection>\n  <EditorialBreadcrumb items={[{ label: \"Home\", to: \"/\" }, { label: \"Journal\", to: \"/journal/\" }, { label: \"Price guide\" }]} />\n</EditorialSection>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialBreadcrumb",
+  "props": [
+    {
+      "description": "Trail, root first; the last item is the current page.",
+      "name": "items",
+      "required": true,
+      "type": "BreadcrumbItemProp[]"
+    },
+    {
+      "description": "Router link for ancestors.",
+      "name": "linkComponent",
+      "type": "ElementType"
+    },
+    {
+      "description": "Name of the nav landmark.",
+      "name": "ariaLabel",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "EditorialPageHeader, Breadcrumb."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "The trail at the top of an editorial page (gh#1437): `Breadcrumb` (same `<nav>`/`<ol>`, `aria-current` on the last item, router `linkComponent`) with the editorial rhythm — top inset, gap and line height from `--editorial-breadcrumb-*`. Use it alone above a reader page; `EditorialPageHeader` renders it for a listing page.",
+  "usage": [
+    "DO put it first in an EditorialSection of a `flow=\"sections\"` page.",
+    "DON'T nest it in a PageContainer — that page shell has its own trail."
+  ]
+}

package/agent/components/EditorialCard.json

@@ -0,0 +1,70 @@
+{
+  "example": "import { EditorialCard } from \"@godxjp/ui/layout\";\n\n<EditorialCard variant=\"journal\" link={<a href=\"/journal/price-guide/\" />} media={<img src={cover} alt=\"\" />} overline=\"Price guide\" title=\"Why the same card has different prices.\" description=\"Condition, language and edition all move the price.\" action=\"Read the story\" />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialCard",
+  "props": [
+    {
+      "description": "Shape.",
+      "name": "variant",
+      "required": true,
+      "type": "\"journal\" | \"spotlight\""
+    },
+    {
+      "description": "The link element the card renders into.",
+      "name": "link",
+      "required": true,
+      "type": "ReactElement"
+    },
+    {
+      "description": "The heading.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Cover (journal) or picture (spotlight).",
+      "name": "media",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Category (journal) or kicker (spotlight).",
+      "name": "overline",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Lines under the title.",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "journal: footer call to action.",
+      "name": "action",
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "3",
+      "description": "Heading level.",
+      "name": "level",
+      "type": "2 | 3 | 4"
+    },
+    {
+      "description": "Title id (generated when omitted).",
+      "name": "titleId",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "ResponsiveGrid — `preset=\"trio\"`."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A whole-card link (gh#1435). `variant=\"journal\"`: an edge-to-edge cover, category, title, two lines of description and a footer with a circled arrow; the link is named by its title (aria-labelledby). `variant=\"spotlight\"`: kicker, title and a line beside a tilted picture. Pass the link element (router Link or `<a href>`) as `link`; the card content is rendered into it. Geometry: `--editorial-journal-*`, `--editorial-spotlight-*`.",
+  "usage": [
+    "DO lay journal cards out with `ResponsiveGrid preset=\"trio\"`."
+  ]
+}

package/agent/components/EditorialEmptyPanel.json

@@ -0,0 +1,57 @@
+{
+  "example": "import { Button } from \"@godxjp/ui/general\";\nimport { EditorialEmptyPanel, Eyebrow } from \"@godxjp/ui/layout\";\n\n<EditorialEmptyPanel eyebrow={<Eyebrow>A PLACE FOR YOUR COLLECTION</Eyebrow>} title=\"Keep what you love, together.\" description=\"Record your cards and products.\" actions={<Button>Sign in</Button>} />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialEmptyPanel",
+  "props": [
+    {
+      "description": "Illustrated guest panel or dashed empty panel. Default: \"guest\".",
+      "name": "variant",
+      "type": "\"guest\" | \"empty\""
+    },
+    {
+      "description": "Kicker (an Eyebrow).",
+      "name": "eyebrow",
+      "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": "Buttons.",
+      "name": "actions",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Medallion glyph (variant=\"empty\").",
+      "name": "icon",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "EmptyState — the application empty state."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A centred panel for a signed-out or an empty state (gh#1439). `variant=\"guest\"` draws a decorative three-card stack above kicker, title, copy and centred actions; `variant=\"empty\"` is dashed with a round icon medallion. Geometry: `--editorial-empty-panel-*`.",
+  "usage": [
+    "DO use variant=\"guest\" where a page needs an account, variant=\"empty\" for a collection with nothing in it."
+  ]
+}

package/agent/components/EditorialFilterBar.json

@@ -0,0 +1,51 @@
+{
+  "example": "import { EditorialFilterBar } from \"@godxjp/ui/layout\";\n\n<EditorialFilterBar aria-label=\"Selection\" value={tab} onValueChange={setTab} options={[{ value: \"all\", label: \"Selected cards\" }, { value: \"down\", label: \"Price drops\" }]} extra=\"vs. 30 days ago\" />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialFilterBar",
+  "props": [
+    {
+      "description": "Group name.",
+      "name": "aria-label",
+      "required": true,
+      "type": "string"
+    },
+    {
+      "description": "The toggles.",
+      "name": "options",
+      "required": true,
+      "type": "{ value: string; label: ReactNode }[]"
+    },
+    {
+      "description": "Pressed toggle.",
+      "name": "value",
+      "required": true,
+      "type": "string"
+    },
+    {
+      "description": "Change handler.",
+      "name": "onValueChange",
+      "required": true,
+      "type": "(value: string) => void"
+    },
+    {
+      "description": "Trailing note.",
+      "name": "extra",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "Tabs — panels.",
+    "Segmented — a compact single choice."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A row of underlined filter toggles above a collection (gh#1435): a named `role=\"group\"` of `aria-pressed` buttons (one pressed at a time) and a trailing note, over a hairline. The collection below is the consumer's. Geometry: `--editorial-filter-bar-*`.",
+  "usage": [
+    "DO use Tabs when each option owns a panel; this bar only filters one collection."
+  ]
+}

package/agent/components/EditorialFilterField.json

@@ -0,0 +1,39 @@
+{
+  "example": "import { EditorialFilterField } from \"@godxjp/ui/layout\";\n\n<EditorialFilterField label=\"Rarity\" htmlFor=\"f-rarity\"><Select id=\"f-rarity\" value={r} onValueChange={setR} options={rarities} /></EditorialFilterField>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialFilterField",
+  "props": [
+    {
+      "description": "Visible label.",
+      "name": "label",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "The control's id.",
+      "name": "htmlFor",
+      "required": true,
+      "type": "string"
+    },
+    {
+      "description": "The control.",
+      "name": "children",
+      "required": true,
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "FormField — a form's field with help and errors."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "One field of an EditorialFilterPanel (gh#1438): a visible label (600, muted) over one control; `htmlFor` names the control.",
+  "usage": [
+    "DO pass the same id to the control (Select id) and to htmlFor."
+  ]
+}

package/agent/components/EditorialFilterPanel.json

@@ -0,0 +1,46 @@
+{
+  "example": "import { EditorialFilterField, EditorialFilterPanel } from \"@godxjp/ui/layout\";\nimport { Select } from \"@godxjp/ui/data-entry\";\n\n<EditorialFilterPanel aria-label=\"Filters\" action={<Button variant=\"outline\" onClick={reset}>Reset</Button>}>\n  <EditorialFilterField label=\"Expansion\" htmlFor=\"f-set\"><Select id=\"f-set\" value={set} onValueChange={setSet} options={sets} /></EditorialFilterField>\n</EditorialFilterPanel>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialFilterPanel",
+  "props": [
+    {
+      "description": "Group name.",
+      "name": "aria-label",
+      "required": true,
+      "type": "string"
+    },
+    {
+      "description": "The fields.",
+      "name": "children",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Trailing control (reset).",
+      "name": "action",
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "\"panel\"",
+      "description": "Framed panel, or a bare field row (inside a framed module).",
+      "name": "variant",
+      "type": "\"panel\" | \"bare\""
+    }
+  ],
+  "related": [
+    "Toolbar — application filter strip.",
+    "EditorialToolbar summary — the row under it."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A catalog's filter panel (gh#1438): one bordered surface of `EditorialFilterField`s that wrap, bottom aligned, and a trailing `action` (a reset button), as a named `role=\"group\"`. The selects inside read the panel's control scale. Geometry: `--editorial-filter-panel-*`, `--editorial-filter-field-*`.",
+  "usage": [
+    "DO put one control per EditorialFilterField and pass the control's id as htmlFor.",
+    "DO use Toolbar for an application list's search + filters strip; this panel is the editorial catalog's."
+  ]
+}

package/agent/components/EditorialFooter.json

@@ -0,0 +1,54 @@
+{
+  "example": "import { EditorialFooter } from \"@godxjp/ui/layout\";\n\n<EditorialFooter brand={<a href=\"/\" aria-label=\"Home\"><img src=\"/logo.svg\" alt=\"\" /></a>} tagline=\"Discover. Compare.\" groups={[{ title: \"DISCOVER\", links: [<a key=\"c\" href=\"/cards/\">Cards</a>] }]} legal=\"© 2026 TCG-M.\" />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialFooter",
+  "props": [
+    {
+      "description": "The logo link.",
+      "name": "brand",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Link groups.",
+      "name": "groups",
+      "required": true,
+      "type": "{ title: ReactNode; links: ReactNode[] }[]"
+    },
+    {
+      "description": "Line under the logo.",
+      "name": "tagline",
+      "type": "ReactNode"
+    },
+    {
+      "defaultValue": "2",
+      "description": "Heading level of the group titles.",
+      "name": "level",
+      "type": "2 | 3"
+    },
+    {
+      "description": "Rights line.",
+      "name": "legal",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Note paragraph.",
+      "name": "note",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "CenteredShell — `footer`, `footerTone=\"inverse\"`."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A public site's footer content (gh#1435) for `CenteredShell footerTone=\"inverse\"`: logo and tagline, link groups (a heading + links each), and a bottom row with the rights line and a note. The footer holding it takes the editorial spacing. Geometry and colours: `--editorial-footer-*`.",
+  "usage": [
+    "DO pass plain links in each group; the footer styles them."
+  ]
+}

package/agent/components/EditorialFootnote.json

@@ -0,0 +1,36 @@
+{
+  "example": "import { EditorialFootnote, EditorialTextButton } from \"@godxjp/ui/layout\";\n\n<EditorialFootnote action={<EditorialTextButton onClick={reset}>Reset display preferences</EditorialTextButton>}>Changes are saved automatically.</EditorialFootnote>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialFootnote",
+  "props": [
+    {
+      "description": "The note.",
+      "name": "children",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Trailing action.",
+      "name": "action",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Cross-axis alignment. Default: \"start\".",
+      "name": "align",
+      "type": "\"start\" | \"center\""
+    }
+  ],
+  "related": [
+    "EditorialNote — a ruled aside in a reading column."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A quiet closing line under a collection or a settings form (gh#1439): a muted note at the start and an optional action (an EditorialTextButton) at the end. Geometry: `--editorial-footnote-*`.",
+  "usage": [
+    "DO keep it to one or two sentences."
+  ]
+}

package/agent/components/EditorialHero.json

@@ -0,0 +1,52 @@
+{
+  "example": "import { EditorialHero, EditorialSection, EditorialSearch, Eyebrow } from \"@godxjp/ui/layout\";\n\n<EditorialSection tone=\"hero\" divider=\"end\">\n  <EditorialHero\n    eyebrow={<Eyebrow>FOR EVERY CARD, EVERY COLLECTOR.</Eyebrow>}\n    title=\"Discover. Compare.\"\n    description=\"Your next favourite card.\"\n    search={<EditorialSearch label=\"Card name or number\" submitLabel=\"Search\" onSearch={go} />}\n  />\n</EditorialSection>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialHero",
+  "props": [
+    {
+      "description": "The h1. Emphasise a second line with `<Text tone=\"brand\" size=\"inherit\">`.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Kicker above the title (an Eyebrow).",
+      "name": "eyebrow",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Lead paragraph.",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "The search (an EditorialSearch).",
+      "name": "search",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Suggested-query links under the search (plain links; the slot styles them).",
+      "name": "footer",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Media column (a CardShowcase preset=\"fan\").",
+      "name": "media",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "EditorialSearch, CardShowcase, Eyebrow."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "The opening of an editorial page (gh#1435): a copy column — kicker, the page's one h1, a lead, a search and a line of suggested queries — beside a media column. Put it in `EditorialSection tone=\"hero\" divider=\"end\"`. Geometry: `--editorial-hero-*` (tracks, min-height, h1 size/leading/tracking and every gap).",
+  "usage": [
+    "DO keep it the page's only h1."
+  ]
+}

package/agent/components/EditorialInlineSearch.json

@@ -0,0 +1,54 @@
+{
+  "example": "import { EditorialInlineSearch } from \"@godxjp/ui/layout\";\n\n<EditorialInlineSearch label=\"Search your collection\" placeholder=\"Name or card number\" onSearch={setQuery} count=\"12 entries\" />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialInlineSearch",
+  "props": [
+    {
+      "description": "Visible label and region name.",
+      "name": "label",
+      "required": true,
+      "type": "string"
+    },
+    {
+      "description": "id of the input.",
+      "name": "id",
+      "type": "string"
+    },
+    {
+      "description": "Placeholder.",
+      "name": "placeholder",
+      "type": "string"
+    },
+    {
+      "description": "Initial query.",
+      "name": "defaultValue",
+      "type": "string"
+    },
+    {
+      "description": "Settled, trimmed query.",
+      "name": "onSearch",
+      "required": true,
+      "type": "(query: string) => void"
+    },
+    {
+      "default": "300",
+      "description": "Settle delay (ms).",
+      "name": "debounce",
+      "type": "number"
+    },
+    {
+      "description": "Live count at the end.",
+      "name": "count",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "SearchInput — the application search field.",
+    "EditorialSearch — the inset site search."
+  ],
+  "tagline": "A collection's own search row (gh#1439): a visible label, a framed field with a search glyph (max 400px) and a live count at the end. The query is reported after typing settles (`debounce`, default 300ms) or at once on Enter. A named `role=\"search\"` region. Geometry: `--editorial-inline-search-*`; a theme hides the label on narrow screens with `--editorial-inline-search-label-display: none`.",
+  "usage": [
+    "DO keep the query in the URL; the row only reports it."
+  ]
+}

package/agent/components/EditorialMasthead.json

@@ -0,0 +1,52 @@
+{
+  "example": "import { EditorialMasthead, EditorialMastheadAction, EditorialMastheadLink } from \"@godxjp/ui/layout\";\nimport { Moon } from \"lucide-react\";\n\n<EditorialMasthead\n  brand={<a href=\"/\" aria-label=\"Home\"><img src=\"/logo.svg\" alt=\"\" /></a>}\n  navLabel=\"Main navigation\"\n  nav={<EditorialMastheadLink href=\"/cards/\" aria-current=\"page\">Cards</EditorialMastheadLink>}\n  actions={<EditorialMastheadAction aria-label=\"Toggle colour theme\"><Moon aria-hidden /></EditorialMastheadAction>}\n/>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialMasthead",
+  "props": [
+    {
+      "description": "The logo link.",
+      "name": "brand",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Primary navigation links.",
+      "name": "nav",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Navigation landmark name.",
+      "name": "navLabel",
+      "type": "string"
+    },
+    {
+      "description": "End actions.",
+      "name": "actions",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Phone-only menu trigger (a Sheet trigger).",
+      "name": "menu",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "CenteredShell — `topbar`.",
+    "Sheet + NavList — the phone menu."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "subParts": [
+    "EditorialMastheadLink",
+    "EditorialMastheadAction"
+  ],
+  "tagline": "A public site's header row (gh#1435) for CenteredShell's `topbar` slot: the logo, primary navigation (`EditorialMastheadLink`; `aria-current=\"page\"` underlines the current one) and end actions (the kit `Select variant=\"borderless\" width=\"auto\"` for the interface language or the display currency — the masthead sizes its trigger, `EditorialMastheadAction` 44px icon controls, `variant=\"outline\"` for the account). The bar holding it turns sticky and translucent. `menu` is the phone-only trigger shown when the theme hides `nav`. Geometry: `--editorial-masthead-*`.",
+  "usage": [
+    "DO pass it as CenteredShell `topbar`; the bar becomes sticky with a blur."
+  ]
+}

package/agent/components/EditorialMetaBar.json

@@ -0,0 +1,37 @@
+{
+  "example": "import { Badge } from \"@godxjp/ui/data-display\";\nimport { EditorialMetaBar } from \"@godxjp/ui/layout\";\nimport { Lock } from \"lucide-react\";\n\n<EditorialMetaBar icon={<Lock />} start=\"Your private collection\" end={<Badge variant=\"outline\">Saved to your account</Badge>} />",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialMetaBar",
+  "props": [
+    {
+      "description": "Leading glyph (primary tone).",
+      "name": "icon",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Start line.",
+      "name": "start",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "End slot, e.g. a Badge.",
+      "name": "end",
+      "type": "ReactNode"
+    }
+  ],
+  "related": [
+    "EditorialPageHeader — the header above it."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "A hairline-ruled strip under a page header (gh#1439): a glyph and a line at the start (\"Your private collection\"), a badge at the end. Stacks on a phone when the theme sets `--editorial-meta-bar-align-flow: column`.",
+  "usage": [
+    "DO keep it to one fact and one chip."
+  ]
+}

package/agent/components/EditorialPageHeader.json

@@ -0,0 +1,73 @@
+{
+  "example": "import { EditorialPageHeader, EditorialSection, Eyebrow } from \"@godxjp/ui/layout\";\n\n<EditorialSection>\n  <EditorialPageHeader\n    breadcrumb={[{ label: \"Home\", to: \"/\" }, { label: \"Journal\" }]}\n    eyebrow={<Eyebrow>THE TCG-M JOURNAL</Eyebrow>}\n    title=\"A little knowledge. More enjoyment.\"\n    description=\"A few helpful perspectives for finding, comparing and collecting.\"\n  />\n</EditorialSection>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "EditorialPageHeader",
+  "props": [
+    {
+      "description": "The page's h1.",
+      "name": "title",
+      "required": true,
+      "type": "ReactNode"
+    },
+    {
+      "description": "Trail above the header.",
+      "name": "breadcrumb",
+      "type": "BreadcrumbItemProp[]"
+    },
+    {
+      "description": "Router link for the trail.",
+      "name": "linkComponent",
+      "type": "ElementType"
+    },
+    {
+      "description": "Name of the trail's nav.",
+      "name": "breadcrumbLabel",
+      "type": "string"
+    },
+    {
+      "description": "Kicker above the title (an Eyebrow).",
+      "name": "eyebrow",
+      "type": "ReactNode"
+    },
+    {
+      "description": "One lead line under it.",
+      "name": "description",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Action at the end of the title row.",
+      "name": "actions",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Search under the description (an EditorialSearch).",
+      "name": "search",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Id on the h1.",
+      "name": "titleId",
+      "type": "string"
+    },
+    {
+      "description": "Kicker from the page-header knobs, or the plain accent Eyebrow (gh#1439). Default: \"page\".",
+      "name": "eyebrowTone",
+      "type": "\"page\" | \"accent\""
+    }
+  ],
+  "related": [
+    "EditorialBreadcrumb, Eyebrow, EditorialSection."
+  ],
+  "rules": [
+    2,
+    6,
+    44,
+    45
+  ],
+  "tagline": "The intro of an editorial listing page (gh#1437): an optional `EditorialBreadcrumb`, then the ruled kicker, the page's one h1, one lead line, and an action at the end of the title row. Geometry: `--editorial-page-header-*` (block padding, title size/leading/margins, lead size/measure, kicker size/colour, row display — `block` stacks the action under the copy on a phone).",
+  "usage": [
+    "DO put it in an EditorialSection on a `flow=\"sections\"` page, so it shares the landing column.",
+    "DON'T also give the page a PageContainer title — the header owns the page's one h1."
+  ]
+}