anentrypoint-design 1.0.6 → 1.0.8

package/dist/index.html

@@ -115,8 +115,50 @@ a.row:hover .ds-row-arrow { opacity: 1 }
 .ds-page-footer-links { display: flex; gap: var(--space-4, 24px) }
 .ds-page-footer-links a { color: var(--fg-3) }
 .ds-page-footer-links a:hover { color: var(--fg) }
+/* Live component showcase: a grid of cards, each holding a real mounted
+   specimen (not a screenshot) of the actual SDK components. */
+.ds-showcase-grid {
+  display: grid; gap: var(--space-3, 16px);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.ds-showcase-card {
+  padding: var(--space-3, 16px); background: var(--panel-1, var(--bg));
+  border-radius: var(--r-2, 14px); display: grid; gap: var(--space-2, 8px);
+}
+.ds-showcase-card--wide { grid-column: 1 / -1; }
+.ds-showcase-label {
+  font-size: var(--fs-tiny, 13px); font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--fg-3, #6b6b6b);
+}
+.ds-showcase-row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
+/* Card-grid layout (panel.layout === 'cards'): a browsable gallery of tiles
+   instead of a dense text-row list, opt-in per panel via home.yaml's
+   kits.layout: cards. */
+.ds-kit-card-grid {
+  display: grid; gap: var(--space-2, 8px);
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+.ds-kit-card {
+  display: grid; gap: var(--space-1, 4px); align-content: start;
+  padding: var(--space-3, 16px); background: var(--panel-1, var(--bg));
+  border-radius: var(--r-2, 14px); color: inherit; text-decoration: none;
+  transition: transform var(--dur-base, .18s) var(--ease, ease), box-shadow var(--dur-base, .18s) var(--ease, ease);
+  position: relative;
+}
+.ds-kit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.1)); }
+.ds-kit-card:focus-visible { outline: var(--focus-w, 2px) solid var(--focus-color, currentColor); outline-offset: var(--focus-offset, 2px); }
+.ds-kit-card-code {
+  font-family: var(--ff-mono, monospace); font-size: var(--fs-micro, 12px);
+  color: var(--fg-3, #6b6b6b);
+}
+.ds-kit-card-title { font-weight: 600; font-size: var(--fs-base, 16px); }
+.ds-kit-card-sub { font-size: var(--fs-sm, 15px); color: var(--fg-2, #444); }
+.ds-kit-card-arrow {
+  position: absolute; top: var(--space-3, 16px); right: var(--space-3, 16px);
+  color: var(--fg-3, #6b6b6b); font-size: var(--fs-sm, 15px);
+}
 </style>
-<script id="__site__" type="application/json">{"title":"design","slug":"index","siteName":"design","navItems":[["247420","https://247420.xyz"],["AnEntrypoint ->","https://github.com/AnEntrypoint"]],"theme":"auto","hero":{"heading":"Design","subheading":"The 247420 design system","body":"A complete, tokens-driven component system for building consistent, accessible interfaces fast: 15 ready-to-ship kit surfaces, 25 live previews, a slide deck, and a full desktop-shell demo — plus a web component and an SDK. Every panel, row, and form control reads its color, radius, and spacing from one shared token file, so a single theme change updates every surface built on it at once. WCAG AA verified across all 21 kits, zero JavaScript bundler required.","badges":[{"label":"Design system"},{"label":"Design tokens"},{"label":"WCAG AA"}],"ctas":[{"label":"GitHub","href":"https://github.com/AnEntrypoint/design","primary":true},{"label":"247420","href":"https://247420.xyz"}]},"sections":[],"examples":[],"bodyHtml":"","sidebar":{"sections":[{"group":"open","items":[{"glyph":"+","label":"open","href":"./ui_kits/homepage/"}]},{"group":"bins","items":[{"label":"Everything","href":"#all","active":true,"count":48},{"label":"Pinned","href":"#kits","count":15},{"label":"Shipped","href":"#previews","count":25},{"label":"Drafts","href":"#decks","count":1}]},{"group":"Labels","items":[{"label":"UI kits","href":"#kits","count":15},{"label":"Decks","href":"#decks","count":1},{"label":"Previews","href":"#previews","count":25},{"label":"Docs","href":"#docs","count":7}]},{"group":"More","items":[{"label":"Readme","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"label":"Skill","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"label":"Tokens","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"label":"Source","href":"https://github.com/AnEntrypoint/design"},{"label":"MIT license","href":"https://github.com/AnEntrypoint/design/blob/main/LICENSE"}]}]},"marquee":{"items":["Open source","Design tokens","WCAG AA verified","No bundler required"],"sep":"/"},"panels":[{"id":"kits","title":"UI kits","count":"15 surfaces","items":[{"code":"","title":"Homepage","sub":"Marquee and works grid","meta":"open ->","href":"./ui_kits/homepage/"},{"code":"","title":"Project page","sub":"Hero, receipt, install, changelog","meta":"open ->","href":"./ui_kits/project_page/"},{"code":"","title":"Docs","sub":"Long-form prose chrome","meta":"open ->","href":"./ui_kits/docs/"},{"code":"","title":"Blog","sub":"Dated index and reading view","meta":"open ->","href":"./ui_kits/blog/"},{"code":"","title":"Chat","sub":"Message thread and composer","meta":"open ->","href":"./ui_kits/chat/"},{"code":"","title":"AICat","sub":"AI assistant with a cat persona","meta":"open ->","href":"./ui_kits/aicat/"},{"code":"","title":"File browser","sub":"Type-aware rails, drop zone, preview","meta":"open ->","href":"./ui_kits/file_browser/"},{"code":"","title":"Dashboard","sub":"KPIs, tables, receipts, changelog","meta":"open ->","href":"./ui_kits/dashboard/"},{"code":"","title":"Terminal","sub":"CLI prompt, command lines, log view","meta":"open ->","href":"./ui_kits/terminal/"},{"code":"","title":"Settings","sub":"Sectioned forms, toggles, save bar","meta":"open ->","href":"./ui_kits/settings/"},{"code":"","title":"Sign in","sub":"Auth providers and magic link","meta":"open ->","href":"./ui_kits/signin/"},{"code":"","title":"Search","sub":"Topbar query, faceted filters, rows","meta":"open ->","href":"./ui_kits/search/"},{"code":"","title":"404","sub":"Empty-state hero, suggested routes","meta":"open ->","href":"./ui_kits/error_404/"},{"code":"","title":"Gallery","sub":"Visual grid, tonal cards, lightbox","meta":"open ->","href":"./ui_kits/gallery/"},{"code":"","title":"OS shell","sub":"Menubar, window manager, taskbar","meta":"open ->","href":"./ui_kits/os/"}]},{"id":"file_browser","title":"File browser","count":"primitives","items":[{"code":"fb","title":"file_browser kit","sub":"Drop, list, preview, dialogs","meta":"open ->","href":"./ui_kits/file_browser/"},{"code":"fb","title":"FileRow","sub":"Rail, icon, name, meta","meta":"open ->","href":"./preview/file-row.html"},{"code":"fb","title":"FileGrid","sub":"A stack of rows in a panel","meta":"open ->","href":"./preview/file-grid.html"},{"code":"fb","title":"DropZone","sub":"Tonal upload target","meta":"open ->","href":"./preview/dropzone.html"},{"code":"fb","title":"FileViewer","sub":"Modal preview, keyed head","meta":"open ->","href":"./preview/file-viewer.html"},{"code":"fb","title":"FileToolbar","sub":"Actions, breadcrumb, upload","meta":"open ->","href":"./preview/file-toolbar.html"},{"code":"fb","title":"fsbrowse","sub":"Express + busboy backend","meta":"source","href":"https://github.com/AnEntrypoint/fsbrowse"}]},{"id":"desktop_os","title":"Desktop OS shell","count":"in-page window manager","items":[{"code":"os","title":"Live demo","sub":"menubar, apps drawer, side rail, taskbar, floating windows","meta":"open ->","href":"./ui_kits/os/"},{"code":"os","title":"createDesktopShell","sub":"menubar, apps launcher, taskbar, window manager","meta":"shell.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/shell.js"},{"code":"os","title":"renderWindow / renderDock","sub":"pure paint-surface primitives","meta":"wm.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/wm.js"},{"code":"os","title":"Icon set","sub":"SVG glyphs for menubar and taskbar","meta":"icons.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/icons.js"},{"code":"os","title":"theme.css","sub":"OS chrome tokens: menubar, launcher, window manager","meta":"theme.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/theme.css"},{"code":"os","title":"Import path","sub":"anentrypoint-design/kits/os","meta":"exports","href":"https://github.com/AnEntrypoint/design/blob/main/package.json"}]},{"id":"web_components","title":"Web components","count":"1 element","items":[{"code":"wc","title":"\u003cds-chat>","sub":"Auto-registers when the SDK loads in a browser","meta":"ds-chat.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/web-components/ds-chat.js"},{"code":"wc","title":"registerChatElement","sub":"Manual register helper","meta":"source","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js"}]},{"id":"api_exports","title":"Public API","count":"SDK surface","items":[{"code":"api","title":"h / applyDiff","sub":"webjsx createElement and diff","meta":"index.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js"},{"code":"api","title":"installStyles / scope","sub":"ds-247420 CSS scope and bootstrap","meta":"styles.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js"},{"code":"api","title":"loadCss","sub":"Fetch the bundled CSS string","meta":"styles.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js"},{"code":"api","title":"mount / mountKit","sub":"Shell and ui_kit bootstrap","meta":"bootstrap.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/bootstrap.js"},{"code":"api","title":"registerDeckStage / getDeckStage","sub":"16:9 deck stage API","meta":"deck-stage.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/deck-stage.js"},{"code":"api","title":"renderMarkdown","sub":"marked v15 + DOMPurify, lazy-loaded","meta":"markdown.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/markdown.js"},{"code":"api","title":"ensurePrism / highlightAllUnder","sub":"Prism core plus per-language","meta":"highlight.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/highlight.js"},{"code":"api","title":"renderPageHtml","sub":"Static page HTML template","meta":"page-html.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/page-html.js"},{"code":"api","title":"components / motion / debug","sub":"Namespaces from the default export","meta":"components.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/components.js"}]},{"id":"decks","title":"Decks","count":1,"items":[{"code":"","title":"Deck template","sub":"16:9 stage with auto-fit","meta":"open ->","href":"./slides/"}]},{"id":"docs","title":"Docs","count":7,"items":[{"code":"md","title":"Readme","sub":"Overview, manifesto, conventions","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"code":"md","title":"Skill","sub":"Authoring rules for the agent","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"code":"css","title":"Tokens","sub":"Colors, type, panel surface tokens","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"md","title":"Component props","sub":"Generated prop reference","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/docs/component-props.md"},{"code":"md","title":"Changelog","sub":"Release history","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/CHANGELOG.md"},{"code":"md","title":"Accessibility","sub":"WCAG AA compliance, keyboard navigation","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/docs/accessibility.md"},{"code":"md","title":"Responsive breakpoints","sub":"The documented breakpoint scale in use","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/docs/responsive.md"}]},{"id":"features","title":"Why teams choose 247420","count":5,"items":[{"code":"","title":"Clear visual hierarchy","sub":"Panel-on-panel layering keeps dense dashboards scannable — important content stays legible even in complex, data-heavy screens.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css"},{"code":"","title":"Readable at a glance","sub":"A disciplined type system reserves monospace for codes and labels and sans-serif for everything meant to be read, so interfaces stay legible under real workloads.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"","title":"Instant status recognition","sub":"Color-coded indicator rails let users scan for status and category at a glance, without relying on borders that add visual noise.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css#L126"},{"code":"","title":"Rebrand in minutes, not sprints","sub":"Every surface, type scale, and accent color is driven entirely by design tokens — retheme an entire product by editing one file, with zero component code changes.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"","title":"Accessible by default","sub":"Every kit is WCAG AA verified (0 blocking violations across all 21 surfaces), with shared focus-visible tokens, skip links, and correct ARIA roles built into every component.","meta":"a11y-report.md","href":"https://github.com/AnEntrypoint/design/blob/main/docs/a11y-report.md"}]},{"id":"previews","title":"Previews","count":25,"items":[{"code":"","title":"buttons","sub":"preview · buttons.html","meta":"open ->","href":"./preview/buttons.html"},{"code":"","title":"colors core","sub":"preview · colors-core.html","meta":"open ->","href":"./preview/colors-core.html"},{"code":"","title":"colors lore","sub":"preview · colors-lore.html","meta":"open ->","href":"./preview/colors-lore.html"},{"code":"","title":"colors semantic","sub":"preview · colors-semantic.html","meta":"open ->","href":"./preview/colors-semantic.html"},{"code":"","title":"dateline","sub":"preview · dateline.html","meta":"open ->","href":"./preview/dateline.html"},{"code":"","title":"dropzone","sub":"preview · dropzone.html","meta":"open ->","href":"./preview/dropzone.html"},{"code":"","title":"file grid","sub":"preview · file-grid.html","meta":"open ->","href":"./preview/file-grid.html"},{"code":"","title":"file row","sub":"preview · file-row.html","meta":"open ->","href":"./preview/file-row.html"},{"code":"","title":"file toolbar","sub":"preview · file-toolbar.html","meta":"open ->","href":"./preview/file-toolbar.html"},{"code":"","title":"file viewer","sub":"preview · file-viewer.html","meta":"open ->","href":"./preview/file-viewer.html"},{"code":"","title":"header","sub":"preview · header.html","meta":"open ->","href":"./preview/header.html"},{"code":"","title":"icons unicode","sub":"preview · icons-unicode.html","meta":"open ->","href":"./preview/icons-unicode.html"},{"code":"","title":"index row","sub":"preview · index-row.html","meta":"open ->","href":"./preview/index-row.html"},{"code":"","title":"inputs","sub":"preview · inputs.html","meta":"open ->","href":"./preview/inputs.html"},{"code":"","title":"manifesto","sub":"preview · manifesto.html","meta":"open ->","href":"./preview/manifesto.html"},{"code":"","title":"rules","sub":"preview · rules.html","meta":"open ->","href":"./preview/rules.html"},{"code":"","title":"spacing","sub":"preview · spacing.html","meta":"open ->","href":"./preview/spacing.html"},{"code":"","title":"stamps","sub":"preview · stamps.html","meta":"open ->","href":"./preview/stamps.html"},{"code":"","title":"stamps lore","sub":"preview · stamps-lore.html","meta":"open ->","href":"./preview/stamps-lore.html"},{"code":"","title":"theme ink","sub":"preview · theme-ink.html","meta":"open ->","href":"./preview/theme-ink.html"},{"code":"","title":"type display","sub":"preview · type-display.html","meta":"open ->","href":"./preview/type-display.html"},{"code":"","title":"type mono","sub":"preview · type-mono.html","meta":"open ->","href":"./preview/type-mono.html"},{"code":"","title":"type prose","sub":"preview · type-prose.html","meta":"open ->","href":"./preview/type-prose.html"},{"code":"","title":"type scale","sub":"preview · type-scale.html","meta":"open ->","href":"./preview/type-scale.html"},{"code":"","title":"wordmarks","sub":"preview · wordmarks.html","meta":"open ->","href":"./preview/wordmarks.html"}]}],"quickstart":{"heading":"Quick start","lines":[{"kind":"cmt","text":"# Install via importmap (no bundler)"},{"kind":"cmd","text":"\u003cscript type='importmap'>{\"imports\":{\"anentrypoint-design\":\"https://unpkg.com/anentrypoint-design@latest/dist/247420.js\"}}\u003c/script>"},{"kind":"cmt","text":"# Or clone the source"},{"kind":"cmd","text":"git clone https://github.com/AnEntrypoint/design.git"}]},"statusLeft":["main","utf-8","lf"],"statusRight":["anentrypoint-design@latest","15 kits"],"seoAuthor":"247420 · a design system by AnEntrypoint"}</script>
+<script id="__site__" type="application/json">{"title":"design","slug":"index","siteName":"design","navItems":[["247420","https://247420.xyz"],["AnEntrypoint ->","https://github.com/AnEntrypoint"]],"theme":"auto","hero":{"heading":"Design","subheading":"The 247420 design system","body":"A complete, tokens-driven component system for building consistent, accessible interfaces fast: 15 ready-to-ship kit surfaces, 25 live previews, a slide deck, and a full desktop-shell demo — plus a web component and an SDK. Every panel, row, and form control reads its color, radius, and spacing from one shared token file, so a single theme change updates every surface built on it at once. WCAG AA verified across all 21 kits, zero JavaScript bundler required.","badges":[{"label":"Design system"},{"label":"Design tokens"},{"label":"WCAG AA"}],"ctas":[{"label":"GitHub","href":"https://github.com/AnEntrypoint/design","primary":true},{"label":"247420","href":"https://247420.xyz"}]},"sections":[],"examples":[],"bodyHtml":"","sidebar":{"sections":[{"group":"open","items":[{"glyph":"+","label":"open","href":"./ui_kits/homepage/"}]},{"group":"bins","items":[{"label":"Everything","href":"#all","active":true,"count":48},{"label":"Pinned","href":"#kits","count":15},{"label":"Shipped","href":"#previews","count":25},{"label":"Drafts","href":"#decks","count":1}]},{"group":"Labels","items":[{"label":"UI kits","href":"#kits","count":15},{"label":"Decks","href":"#decks","count":1},{"label":"Previews","href":"#previews","count":25},{"label":"Docs","href":"#docs","count":7}]},{"group":"More","items":[{"label":"Readme","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"label":"Skill","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"label":"Tokens","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"label":"Source","href":"https://github.com/AnEntrypoint/design"},{"label":"MIT license","href":"https://github.com/AnEntrypoint/design/blob/main/LICENSE"}]}]},"marquee":{"items":["Open source","Design tokens","WCAG AA verified","No bundler required"],"sep":"/"},"showcase":{"heading":"Live components","lede":"Not a screenshot — the same Btn, Chip, Badge, and Table components every kit page imports, rendered right here from the SDK you'd actually install."},"panels":[{"id":"kits","title":"UI kits","count":"15 surfaces","items":[{"code":"","title":"Homepage","sub":"Marquee and works grid","meta":"open ->","href":"./ui_kits/homepage/"},{"code":"","title":"Project page","sub":"Hero, receipt, install, changelog","meta":"open ->","href":"./ui_kits/project_page/"},{"code":"","title":"Docs","sub":"Long-form prose chrome","meta":"open ->","href":"./ui_kits/docs/"},{"code":"","title":"Blog","sub":"Dated index and reading view","meta":"open ->","href":"./ui_kits/blog/"},{"code":"","title":"Chat","sub":"Message thread and composer","meta":"open ->","href":"./ui_kits/chat/"},{"code":"","title":"AICat","sub":"AI assistant with a cat persona","meta":"open ->","href":"./ui_kits/aicat/"},{"code":"","title":"File browser","sub":"Type-aware rails, drop zone, preview","meta":"open ->","href":"./ui_kits/file_browser/"},{"code":"","title":"Dashboard","sub":"KPIs, tables, receipts, changelog","meta":"open ->","href":"./ui_kits/dashboard/"},{"code":"","title":"Terminal","sub":"CLI prompt, command lines, log view","meta":"open ->","href":"./ui_kits/terminal/"},{"code":"","title":"Settings","sub":"Sectioned forms, toggles, save bar","meta":"open ->","href":"./ui_kits/settings/"},{"code":"","title":"Sign in","sub":"Auth providers and magic link","meta":"open ->","href":"./ui_kits/signin/"},{"code":"","title":"Search","sub":"Topbar query, faceted filters, rows","meta":"open ->","href":"./ui_kits/search/"},{"code":"","title":"404","sub":"Empty-state hero, suggested routes","meta":"open ->","href":"./ui_kits/error_404/"},{"code":"","title":"Gallery","sub":"Visual grid, tonal cards, lightbox","meta":"open ->","href":"./ui_kits/gallery/"},{"code":"","title":"OS shell","sub":"Menubar, window manager, taskbar","meta":"open ->","href":"./ui_kits/os/"}],"layout":"cards"},{"id":"file_browser","title":"File browser","count":"primitives","items":[{"code":"fb","title":"file_browser kit","sub":"Drop, list, preview, dialogs","meta":"open ->","href":"./ui_kits/file_browser/"},{"code":"fb","title":"FileRow","sub":"Rail, icon, name, meta","meta":"open ->","href":"./preview/file-row.html"},{"code":"fb","title":"FileGrid","sub":"A stack of rows in a panel","meta":"open ->","href":"./preview/file-grid.html"},{"code":"fb","title":"DropZone","sub":"Tonal upload target","meta":"open ->","href":"./preview/dropzone.html"},{"code":"fb","title":"FileViewer","sub":"Modal preview, keyed head","meta":"open ->","href":"./preview/file-viewer.html"},{"code":"fb","title":"FileToolbar","sub":"Actions, breadcrumb, upload","meta":"open ->","href":"./preview/file-toolbar.html"},{"code":"fb","title":"fsbrowse","sub":"Express + busboy backend","meta":"source","href":"https://github.com/AnEntrypoint/fsbrowse"}],"layout":null},{"id":"desktop_os","title":"Desktop OS shell","count":"in-page window manager","items":[{"code":"os","title":"Live demo","sub":"menubar, apps drawer, side rail, taskbar, floating windows","meta":"open ->","href":"./ui_kits/os/"},{"code":"os","title":"createDesktopShell","sub":"menubar, apps launcher, taskbar, window manager","meta":"shell.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/shell.js"},{"code":"os","title":"renderWindow / renderDock","sub":"pure paint-surface primitives","meta":"wm.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/wm.js"},{"code":"os","title":"Icon set","sub":"SVG glyphs for menubar and taskbar","meta":"icons.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/icons.js"},{"code":"os","title":"theme.css","sub":"OS chrome tokens: menubar, launcher, window manager","meta":"theme.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/kits/os/theme.css"},{"code":"os","title":"Import path","sub":"anentrypoint-design/kits/os","meta":"exports","href":"https://github.com/AnEntrypoint/design/blob/main/package.json"}],"layout":null},{"id":"web_components","title":"Web components","count":"1 element","items":[{"code":"wc","title":"\u003cds-chat>","sub":"Auto-registers when the SDK loads in a browser","meta":"ds-chat.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/web-components/ds-chat.js"},{"code":"wc","title":"registerChatElement","sub":"Manual register helper","meta":"source","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js"}],"layout":null},{"id":"api_exports","title":"Public API","count":"SDK surface","items":[{"code":"api","title":"h / applyDiff","sub":"webjsx createElement and diff","meta":"index.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js"},{"code":"api","title":"installStyles / scope","sub":"ds-247420 CSS scope and bootstrap","meta":"styles.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js"},{"code":"api","title":"loadCss","sub":"Fetch the bundled CSS string","meta":"styles.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js"},{"code":"api","title":"mount / mountKit","sub":"Shell and ui_kit bootstrap","meta":"bootstrap.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/bootstrap.js"},{"code":"api","title":"registerDeckStage / getDeckStage","sub":"16:9 deck stage API","meta":"deck-stage.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/deck-stage.js"},{"code":"api","title":"renderMarkdown","sub":"marked v15 + DOMPurify, lazy-loaded","meta":"markdown.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/markdown.js"},{"code":"api","title":"ensurePrism / highlightAllUnder","sub":"Prism core plus per-language","meta":"highlight.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/highlight.js"},{"code":"api","title":"renderPageHtml","sub":"Static page HTML template","meta":"page-html.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/page-html.js"},{"code":"api","title":"components / motion / debug","sub":"Namespaces from the default export","meta":"components.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/components.js"}],"layout":null},{"id":"decks","title":"Decks","count":1,"items":[{"code":"","title":"Deck template","sub":"16:9 stage with auto-fit","meta":"open ->","href":"./slides/"}],"layout":null},{"id":"docs","title":"Docs","count":7,"items":[{"code":"md","title":"Readme","sub":"Overview, manifesto, conventions","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"code":"md","title":"Skill","sub":"Authoring rules for the agent","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"code":"css","title":"Tokens","sub":"Colors, type, panel surface tokens","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"md","title":"Component props","sub":"Generated prop reference","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/docs/component-props.md"},{"code":"md","title":"Changelog","sub":"Release history","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/CHANGELOG.md"},{"code":"md","title":"Accessibility","sub":"WCAG AA compliance, keyboard navigation","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/docs/accessibility.md"},{"code":"md","title":"Responsive breakpoints","sub":"The documented breakpoint scale in use","meta":"open ->","href":"https://github.com/AnEntrypoint/design/blob/main/docs/responsive.md"}],"layout":null},{"id":"features","title":"Why teams choose 247420","count":5,"items":[{"code":"","title":"Clear visual hierarchy","sub":"Panel-on-panel layering keeps dense dashboards scannable — important content stays legible even in complex, data-heavy screens.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css"},{"code":"","title":"Readable at a glance","sub":"A disciplined type system reserves monospace for codes and labels and sans-serif for everything meant to be read, so interfaces stay legible under real workloads.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"","title":"Instant status recognition","sub":"Color-coded indicator rails let users scan for status and category at a glance, without relying on borders that add visual noise.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css#L126"},{"code":"","title":"Rebrand in minutes, not sprints","sub":"Every surface, type scale, and accent color is driven entirely by design tokens — retheme an entire product by editing one file, with zero component code changes.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"","title":"Accessible by default","sub":"Every kit is WCAG AA verified (0 blocking violations across all 21 surfaces), with shared focus-visible tokens, skip links, and correct ARIA roles built into every component.","meta":"a11y-report.md","href":"https://github.com/AnEntrypoint/design/blob/main/docs/a11y-report.md"}],"layout":null},{"id":"previews","title":"Previews","count":25,"items":[{"code":"","title":"buttons","sub":"preview · buttons.html","meta":"open ->","href":"./preview/buttons.html"},{"code":"","title":"colors core","sub":"preview · colors-core.html","meta":"open ->","href":"./preview/colors-core.html"},{"code":"","title":"colors lore","sub":"preview · colors-lore.html","meta":"open ->","href":"./preview/colors-lore.html"},{"code":"","title":"colors semantic","sub":"preview · colors-semantic.html","meta":"open ->","href":"./preview/colors-semantic.html"},{"code":"","title":"dateline","sub":"preview · dateline.html","meta":"open ->","href":"./preview/dateline.html"},{"code":"","title":"dropzone","sub":"preview · dropzone.html","meta":"open ->","href":"./preview/dropzone.html"},{"code":"","title":"file grid","sub":"preview · file-grid.html","meta":"open ->","href":"./preview/file-grid.html"},{"code":"","title":"file row","sub":"preview · file-row.html","meta":"open ->","href":"./preview/file-row.html"},{"code":"","title":"file toolbar","sub":"preview · file-toolbar.html","meta":"open ->","href":"./preview/file-toolbar.html"},{"code":"","title":"file viewer","sub":"preview · file-viewer.html","meta":"open ->","href":"./preview/file-viewer.html"},{"code":"","title":"header","sub":"preview · header.html","meta":"open ->","href":"./preview/header.html"},{"code":"","title":"icons unicode","sub":"preview · icons-unicode.html","meta":"open ->","href":"./preview/icons-unicode.html"},{"code":"","title":"index row","sub":"preview · index-row.html","meta":"open ->","href":"./preview/index-row.html"},{"code":"","title":"inputs","sub":"preview · inputs.html","meta":"open ->","href":"./preview/inputs.html"},{"code":"","title":"manifesto","sub":"preview · manifesto.html","meta":"open ->","href":"./preview/manifesto.html"},{"code":"","title":"rules","sub":"preview · rules.html","meta":"open ->","href":"./preview/rules.html"},{"code":"","title":"spacing","sub":"preview · spacing.html","meta":"open ->","href":"./preview/spacing.html"},{"code":"","title":"stamps","sub":"preview · stamps.html","meta":"open ->","href":"./preview/stamps.html"},{"code":"","title":"stamps lore","sub":"preview · stamps-lore.html","meta":"open ->","href":"./preview/stamps-lore.html"},{"code":"","title":"theme ink","sub":"preview · theme-ink.html","meta":"open ->","href":"./preview/theme-ink.html"},{"code":"","title":"type display","sub":"preview · type-display.html","meta":"open ->","href":"./preview/type-display.html"},{"code":"","title":"type mono","sub":"preview · type-mono.html","meta":"open ->","href":"./preview/type-mono.html"},{"code":"","title":"type prose","sub":"preview · type-prose.html","meta":"open ->","href":"./preview/type-prose.html"},{"code":"","title":"type scale","sub":"preview · type-scale.html","meta":"open ->","href":"./preview/type-scale.html"},{"code":"","title":"wordmarks","sub":"preview · wordmarks.html","meta":"open ->","href":"./preview/wordmarks.html"}]}],"quickstart":{"heading":"Quick start","lines":[{"kind":"cmt","text":"# Install via importmap (no bundler)"},{"kind":"cmd","text":"\u003cscript type='importmap'>{\"imports\":{\"anentrypoint-design\":\"https://unpkg.com/anentrypoint-design@latest/dist/247420.js\"}}\u003c/script>"},{"kind":"cmt","text":"# Or clone the source"},{"kind":"cmd","text":"git clone https://github.com/AnEntrypoint/design.git"}]},"statusLeft":["main","utf-8","lf"],"statusRight":["anentrypoint-design@latest","15 kits"],"seoAuthor":"247420 · a design system by AnEntrypoint"}</script>
 <style>html,body{margin:0;padding:0}body{background:var(--bg,#F6F5F1);color:var(--fg,#131318);font-family:var(--ff-body,system-ui,sans-serif)}</style>
 </head>
 <body>
@@ -159,6 +201,51 @@ function heroNode(hero) {
 
 function __esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
 
+// A live, interactive strip of the actual SDK components (not a screenshot,
+// not a description) rendered directly below the hero -- "show, don't just
+// tell" concretely: real Btn/Chip/Badge/Table specimens, mounted from the
+// same C.* namespace every kit page uses, so what a visitor sees IS what a
+// consumer gets by importing the SDK.
+function showcaseNode(showcase) {
+  if (!showcase) return null;
+  const btnRow = h('div', { class: 'ds-showcase-row' },
+    C.Btn({ key: 'b1', variant: 'primary', children: 'Primary' }),
+    C.Btn({ key: 'b2', variant: 'default', children: 'Default' }),
+    C.Btn({ key: 'b3', variant: 'ghost', children: 'Ghost' }),
+    C.Btn({ key: 'b4', variant: 'danger', children: 'Danger' }),
+  );
+  const chipRow = h('div', { class: 'ds-showcase-row' },
+    C.Chip({ key: 'c1', tone: 'green', children: 'Live' }),
+    C.Chip({ key: 'c2', tone: 'blue', children: 'Beta' }),
+    C.Chip({ key: 'c3', tone: 'purple', children: 'New' }),
+    C.Badge({ key: 'c4', tone: 'success', children: '0 violations' }),
+  );
+  const table = C.Table({
+    headers: ['Kit', 'Status', 'A11y'],
+    rows: [
+      ['chat', 'shipped', 'pass'],
+      ['dashboard', 'shipped', 'pass'],
+      ['os', 'shipped', 'pass'],
+    ],
+    compact: true,
+  });
+  return C.Section({
+    id: 'showcase',
+    title: showcase.heading || 'Live components',
+    children: [
+      showcase.lede ? h('p', { class: 'ds-lede' }, showcase.lede) : null,
+      h('div', { class: 'ds-showcase-grid' },
+        h('div', { key: 'btns', class: 'ds-showcase-card' },
+          h('span', { class: 'ds-showcase-label' }, 'Buttons'), btnRow),
+        h('div', { key: 'chips', class: 'ds-showcase-card' },
+          h('span', { class: 'ds-showcase-label' }, 'Chips & badges'), chipRow),
+        h('div', { key: 'table', class: 'ds-showcase-card ds-showcase-card--wide' },
+          h('span', { class: 'ds-showcase-label' }, 'Table'), table),
+      ),
+    ].filter(Boolean),
+  });
+}
+
 function sectionNode(sec, idx) {
   const features = sec.features || sec.items || [];
   const rows = features.map((f, i) => {
@@ -252,16 +339,33 @@ function panelNode(panel, idx, rerender) {
     }
     return filterInput ? h('div', { class: 'ds-kits-panel-wrap' }, filterInput) : null;
   }
-  const rows = items.map((it, i) => {
-    const code = it.code == null ? '' : String(it.code).trim();
-    const kids = [];
-    if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
-    kids.push(h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')));
-    if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + (it.sub || it.desc)));
-    kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
-    return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
-  });
-  const panelEl = C.Panel({ id: panel.id || null, title: titleNode, count: items.length, children: rows });
+  // Card-grid layout (panel.layout === 'cards'): each item gets its own
+  // visual tile with a code badge and a two-line title/sub stack, instead of
+  // a single-line text row -- the "show, don't just tell" request for a
+  // browsable gallery feel on the kits panel specifically, opt-in per panel
+  // so every other panel (docs, api_exports, etc) keeps its dense row list,
+  // which suits reference material better than a card grid would.
+  const rows = panel.layout === 'cards'
+    ? items.map((it, i) => {
+        const code = it.code == null ? '' : String(it.code).trim();
+        return h('a', { key: i, class: 'ds-kit-card', href: it.href || '#' },
+          code ? h('span', { key: 'c', class: 'ds-kit-card-code' }, code) : null,
+          h('span', { key: 't', class: 'ds-kit-card-title' }, String(it.title || it.name || '')),
+          (it.sub || it.desc) ? h('span', { key: 'm', class: 'ds-kit-card-sub' }, it.sub || it.desc) : null,
+          h('span', { key: 'a', class: 'ds-kit-card-arrow' }, it.meta || '->'),
+        );
+      })
+    : items.map((it, i) => {
+        const code = it.code == null ? '' : String(it.code).trim();
+        const kids = [];
+        if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
+        kids.push(h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')));
+        if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + (it.sub || it.desc)));
+        kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
+        return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
+      });
+  const rowsWrapped = panel.layout === 'cards' ? h('div', { class: 'ds-kit-card-grid' }, ...rows) : rows;
+  const panelEl = C.Panel({ id: panel.id || null, title: titleNode, count: items.length, children: rowsWrapped });
   return filterInput ? h('div', { class: 'ds-kits-panel-wrap' }, filterInput, panelEl) : panelEl;
 }
 
@@ -417,6 +521,7 @@ function buildMainChildren(rerender) {
 
   return [
     heroNode(data.hero),
+    showcaseNode(data.showcase),
     marqueeNode(data.marquee),
     ...data.sections.map(sectionNode),
     ...tierNodes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/page-html/client-script.js

@@ -45,6 +45,51 @@ function heroNode(hero) {
 
 function __esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
 
+// A live, interactive strip of the actual SDK components (not a screenshot,
+// not a description) rendered directly below the hero -- "show, don't just
+// tell" concretely: real Btn/Chip/Badge/Table specimens, mounted from the
+// same C.* namespace every kit page uses, so what a visitor sees IS what a
+// consumer gets by importing the SDK.
+function showcaseNode(showcase) {
+  if (!showcase) return null;
+  const btnRow = h('div', { class: 'ds-showcase-row' },
+    C.Btn({ key: 'b1', variant: 'primary', children: 'Primary' }),
+    C.Btn({ key: 'b2', variant: 'default', children: 'Default' }),
+    C.Btn({ key: 'b3', variant: 'ghost', children: 'Ghost' }),
+    C.Btn({ key: 'b4', variant: 'danger', children: 'Danger' }),
+  );
+  const chipRow = h('div', { class: 'ds-showcase-row' },
+    C.Chip({ key: 'c1', tone: 'green', children: 'Live' }),
+    C.Chip({ key: 'c2', tone: 'blue', children: 'Beta' }),
+    C.Chip({ key: 'c3', tone: 'purple', children: 'New' }),
+    C.Badge({ key: 'c4', tone: 'success', children: '0 violations' }),
+  );
+  const table = C.Table({
+    headers: ['Kit', 'Status', 'A11y'],
+    rows: [
+      ['chat', 'shipped', 'pass'],
+      ['dashboard', 'shipped', 'pass'],
+      ['os', 'shipped', 'pass'],
+    ],
+    compact: true,
+  });
+  return C.Section({
+    id: 'showcase',
+    title: showcase.heading || 'Live components',
+    children: [
+      showcase.lede ? h('p', { class: 'ds-lede' }, showcase.lede) : null,
+      h('div', { class: 'ds-showcase-grid' },
+        h('div', { key: 'btns', class: 'ds-showcase-card' },
+          h('span', { class: 'ds-showcase-label' }, 'Buttons'), btnRow),
+        h('div', { key: 'chips', class: 'ds-showcase-card' },
+          h('span', { class: 'ds-showcase-label' }, 'Chips & badges'), chipRow),
+        h('div', { key: 'table', class: 'ds-showcase-card ds-showcase-card--wide' },
+          h('span', { class: 'ds-showcase-label' }, 'Table'), table),
+      ),
+    ].filter(Boolean),
+  });
+}
+
 function sectionNode(sec, idx) {
   const features = sec.features || sec.items || [];
   const rows = features.map((f, i) => {
@@ -138,16 +183,33 @@ function panelNode(panel, idx, rerender) {
     }
     return filterInput ? h('div', { class: 'ds-kits-panel-wrap' }, filterInput) : null;
   }
-  const rows = items.map((it, i) => {
-    const code = it.code == null ? '' : String(it.code).trim();
-    const kids = [];
-    if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
-    kids.push(h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')));
-    if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + (it.sub || it.desc)));
-    kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
-    return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
-  });
-  const panelEl = C.Panel({ id: panel.id || null, title: titleNode, count: items.length, children: rows });
+  // Card-grid layout (panel.layout === 'cards'): each item gets its own
+  // visual tile with a code badge and a two-line title/sub stack, instead of
+  // a single-line text row -- the "show, don't just tell" request for a
+  // browsable gallery feel on the kits panel specifically, opt-in per panel
+  // so every other panel (docs, api_exports, etc) keeps its dense row list,
+  // which suits reference material better than a card grid would.
+  const rows = panel.layout === 'cards'
+    ? items.map((it, i) => {
+        const code = it.code == null ? '' : String(it.code).trim();
+        return h('a', { key: i, class: 'ds-kit-card', href: it.href || '#' },
+          code ? h('span', { key: 'c', class: 'ds-kit-card-code' }, code) : null,
+          h('span', { key: 't', class: 'ds-kit-card-title' }, String(it.title || it.name || '')),
+          (it.sub || it.desc) ? h('span', { key: 'm', class: 'ds-kit-card-sub' }, it.sub || it.desc) : null,
+          h('span', { key: 'a', class: 'ds-kit-card-arrow' }, it.meta || '->'),
+        );
+      })
+    : items.map((it, i) => {
+        const code = it.code == null ? '' : String(it.code).trim();
+        const kids = [];
+        if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
+        kids.push(h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')));
+        if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + (it.sub || it.desc)));
+        kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
+        return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
+      });
+  const rowsWrapped = panel.layout === 'cards' ? h('div', { class: 'ds-kit-card-grid' }, ...rows) : rows;
+  const panelEl = C.Panel({ id: panel.id || null, title: titleNode, count: items.length, children: rowsWrapped });
   return filterInput ? h('div', { class: 'ds-kits-panel-wrap' }, filterInput, panelEl) : panelEl;
 }
 
@@ -303,6 +365,7 @@ function buildMainChildren(rerender) {
 
   return [
     heroNode(data.hero),
+    showcaseNode(data.showcase),
     marqueeNode(data.marquee),
     ...data.sections.map(sectionNode),
     ...tierNodes,

package/src/page-html/page-styles.js

@@ -90,4 +90,46 @@ a.row:hover .ds-row-arrow { opacity: 1 }
 .ds-page-footer-links { display: flex; gap: var(--space-4, 24px) }
 .ds-page-footer-links a { color: var(--fg-3) }
 .ds-page-footer-links a:hover { color: var(--fg) }
+/* Live component showcase: a grid of cards, each holding a real mounted
+   specimen (not a screenshot) of the actual SDK components. */
+.ds-showcase-grid {
+  display: grid; gap: var(--space-3, 16px);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.ds-showcase-card {
+  padding: var(--space-3, 16px); background: var(--panel-1, var(--bg));
+  border-radius: var(--r-2, 14px); display: grid; gap: var(--space-2, 8px);
+}
+.ds-showcase-card--wide { grid-column: 1 / -1; }
+.ds-showcase-label {
+  font-size: var(--fs-tiny, 13px); font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--fg-3, #6b6b6b);
+}
+.ds-showcase-row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
+/* Card-grid layout (panel.layout === 'cards'): a browsable gallery of tiles
+   instead of a dense text-row list, opt-in per panel via home.yaml's
+   kits.layout: cards. */
+.ds-kit-card-grid {
+  display: grid; gap: var(--space-2, 8px);
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+.ds-kit-card {
+  display: grid; gap: var(--space-1, 4px); align-content: start;
+  padding: var(--space-3, 16px); background: var(--panel-1, var(--bg));
+  border-radius: var(--r-2, 14px); color: inherit; text-decoration: none;
+  transition: transform var(--dur-base, .18s) var(--ease, ease), box-shadow var(--dur-base, .18s) var(--ease, ease);
+  position: relative;
+}
+.ds-kit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.1)); }
+.ds-kit-card:focus-visible { outline: var(--focus-w, 2px) solid var(--focus-color, currentColor); outline-offset: var(--focus-offset, 2px); }
+.ds-kit-card-code {
+  font-family: var(--ff-mono, monospace); font-size: var(--fs-micro, 12px);
+  color: var(--fg-3, #6b6b6b);
+}
+.ds-kit-card-title { font-weight: 600; font-size: var(--fs-base, 16px); }
+.ds-kit-card-sub { font-size: var(--fs-sm, 15px); color: var(--fg-2, #444); }
+.ds-kit-card-arrow {
+  position: absolute; top: var(--space-3, 16px); right: var(--space-3, 16px);
+  color: var(--fg-3, #6b6b6b); font-size: var(--fs-sm, 15px);
+}
 `.trim();

package/src/page-html.js

@@ -40,6 +40,7 @@ export function renderPageHtml({
     seo = null,               // { description, keywords, author, twitter, locale, lang, image, url, glyph, ldJson:boolean }
     sidebar = null,           // { sections: [{ group, items: [{glyph,label,href}] }] } -> C.Side
     marquee = null,           // { items: [...strings], sep }
+    showcase = null,          // { heading, lede } -> a live strip of real Btn/Chip/Table specimens, rendered right below the hero
     panels = null,            // [{ id, title, count, items: [{code,title,sub,meta,href}] }] -> C.Panel + RowLink rows
     quickstart = null,        // { heading, lines: [{ kind, text }] } -> cli block panel
     statusLeft = null,        // override the default [siteName.toLowerCase(), slug] status-bar left cluster
@@ -78,6 +79,7 @@ export function renderPageHtml({
         bodyHtml: body ? renderMarkdown(body) : '',
         sidebar: sidebar || null,
         marquee: marquee || null,
+        showcase: showcase || null,
         panels: Array.isArray(panels) ? panels : [],
         quickstart: quickstart || null,
         statusLeft: Array.isArray(statusLeft) ? statusLeft : null,