anentrypoint-design 1.0.6 → 1.0.7

package/dist/index.html

@@ -115,8 +115,24 @@ 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; }
 </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/"}]},{"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>
 <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 +175,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) => {
@@ -417,6 +478,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.7",
   "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) => {
@@ -303,6 +348,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,20 @@ 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; }
 `.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,