anentrypoint-design 0.0.477 → 0.0.480

package/dist/index.html

@@ -7,7 +7,7 @@
 
 <meta name="description" content="the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.">
 <meta name="keywords" content="design-system, tokens, 247420, anentrypoint">
-<meta name="author" content="247420 / AnEntrypoint">
+<meta name="author" content="247420 · a design system by AnEntrypoint">
 <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
 <meta name="generator" content="anentrypoint-design">
 <link rel="canonical" href="https://anentrypoint.github.io/design">
@@ -116,14 +116,21 @@ a.row:hover .ds-row-arrow { opacity: 1 }
 .ds-page-footer-links a { color: var(--fg-3) }
 .ds-page-footer-links a:hover { color: var(--fg) }
 </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":"14 kit surfaces, zero raw color literals, one importmap script tag to install. every panel, row, and form control in this system reads its color, radius, and spacing from a single token file — swap the tokens and every surface built on them changes with it.","badges":[{"label":"design-system"},{"label":"tokens"},{"label":"web"}],"ctas":[{"label":"GitHub","href":"https://github.com/AnEntrypoint/design","primary":true},{"label":"247420","href":"https://247420.xyz"}]},"sections":[],"examples":[{"label":"index shell","desc":"full navigation shell with tabs, filters, and row interactions.","href":"./index.html"},{"label":"homepage kit","desc":"hero + works layout and updated readable type scale.","href":"./ui_kits/homepage/"},{"label":"project page kit","desc":"overview, install, receipt, and changelog template.","href":"./ui_kits/project_page/"},{"label":"docs kit","desc":"technical documentation layout with sidebar and prose.","href":"./ui_kits/docs/"},{"label":"blog kit","desc":"long-form writing layout tuned for readability.","href":"./ui_kits/blog/"},{"label":"chat kit","desc":"message thread + composer with pill bubbles and room sidebar.","href":"./ui_kits/chat/"},{"label":"aicat kit","desc":"ai assistant with cat persona — ascii portrait + mood face.","href":"./ui_kits/aicat/"},{"label":"slide deck","desc":"16:9 deck stage with improved presenter controls text.","href":"./slides/"},{"label":"dashboard kit","desc":"kpis, tables, receipts, changelog — operations surface.","href":"./ui_kits/dashboard/"},{"label":"terminal kit","desc":"cli prompt, command lines, log viewer.","href":"./ui_kits/terminal/"},{"label":"settings kit","desc":"sectioned forms, toggles, segmented buttons, save bar.","href":"./ui_kits/settings/"},{"label":"signin kit","desc":"auth panel, providers, magic link.","href":"./ui_kits/signin/"},{"label":"search kit","desc":"query bar, faceted filters, ranked results.","href":"./ui_kits/search/"},{"label":"404 kit","desc":"empty-state hero with suggested routes.","href":"./ui_kits/error_404/"},{"label":"gallery kit","desc":"visual grid + lightbox over tonal cards.","href":"./ui_kits/gallery/"},{"label":"preview samples","desc":"design previews and component samples.","href":"./preview/buttons.html"}],"bodyHtml":"","sidebar":{"sections":[{"group":"open","items":[{"glyph":"+","label":"open","href":"./ui_kits/homepage/"}]},{"group":"bins","items":[{"label":"everything","href":"#all","active":true,"count":43},{"label":"pinned","href":"#kits","count":14},{"label":"shipped","href":"#previews","count":25},{"label":"drafts","href":"#decks","count":1}]},{"group":"labels","items":[{"label":"ui kits","href":"#kits","count":14},{"label":"decks","href":"#decks","count":1},{"label":"previews","href":"#previews","count":25},{"label":"docs","href":"#docs","count":3}]},{"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"}]}]},"marquee":{"items":["open source","design tokens","buildless components","zero raw color literals"],"sep":"/"},"panels":[{"id":"kits","title":"ui kits","count":"14 surfaces","items":[{"code":"","title":"homepage","sub":"marquee + 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 + reading view","meta":"open ->","href":"./ui_kits/blog/"},{"code":"","title":"chat","sub":"message thread + composer","meta":"open ->","href":"./ui_kits/chat/"},{"code":"","title":"aicat","sub":"ai assistant with cat persona","meta":"open ->","href":"./ui_kits/aicat/"},{"code":"","title":"file browser","sub":"rails by file type drop 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":"signin","sub":"auth providers 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/"}]},{"id":"file_browser","title":"file browser","count":"primitives","items":[{"code":"fb","title":"file_browser kit","sub":"drop, list, preview, dialogs","meta":"open kit","href":"./ui_kits/file_browser/"},{"code":"fb","title":"FileRow","sub":"rail icon name meta","meta":"preview","href":"./preview/file-row.html"},{"code":"fb","title":"FileGrid","sub":"stack of rows in a panel","meta":"preview","href":"./preview/file-grid.html"},{"code":"fb","title":"DropZone","sub":"tonal upload target","meta":"preview","href":"./preview/dropzone.html"},{"code":"fb","title":"FileViewer","sub":"modal preview keyed head","meta":"preview","href":"./preview/file-viewer.html"},{"code":"fb","title":"FileToolbar","sub":"actions breadcrumb upload","meta":"preview","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 wm","items":[{"code":"os","title":"createDesktopShell","sub":"menubar apps launcher taskbar window manager","meta":"shell.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/shell.js"},{"code":"os","title":"icons set","sub":"svg glyphs for menubar + taskbar","meta":"icons.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/icons.js"},{"code":"os","title":"theme.css","sub":"os chrome tokens menubar launcher wm","meta":"theme.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/theme.css"},{"code":"os","title":"import path","sub":"anentrypoint-design/desktop","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 + 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 + 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":"ds shell + 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 stack","meta":"markdown.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/markdown.js"},{"code":"api","title":"ensurePrism / highlightAllUnder","sub":"prism core + 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":3,"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"}]},{"id":"features","title":"why design","count":4,"items":[{"code":"","title":"layered surfaces","sub":"panel-on-panel rhythm; loud content sits inside quiet chrome.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css"},{"code":"","title":"monospace labels","sub":"mono only for codes/labels/CLI; sans for everything legible.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"","title":"indicator rails","sub":"color-coded inset rails for category separation, never borders.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css#L126"},{"code":"","title":"tokens-only","sub":"every surface, type ramp, accent driven by --panel-* / --fs-* tokens.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"}]},{"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","14 kits"]}</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":"14 kit surfaces, 25 previews, one deck, and a full desktop-OS shell — plus a web component and an SDK, all tokens-only, zero raw color literals, one importmap script tag to install. every panel, row, and form control in this system reads its color, radius, and spacing from a single token file — swap the tokens and every surface built on them changes with it.","badges":[{"label":"design-system"},{"label":"tokens"},{"label":"web"}],"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":45},{"label":"pinned","href":"#kits","count":14},{"label":"shipped","href":"#previews","count":25},{"label":"drafts","href":"#decks","count":1}]},{"group":"labels","items":[{"label":"ui kits","href":"#kits","count":14},{"label":"decks","href":"#decks","count":1},{"label":"previews","href":"#previews","count":25},{"label":"docs","href":"#docs","count":5}]},{"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","buildless components","zero raw color literals"],"sep":"/"},"panels":[{"id":"kits","title":"ui kits","count":"14 surfaces","items":[{"code":"","title":"homepage","sub":"marquee + 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 + reading view","meta":"open ->","href":"./ui_kits/blog/"},{"code":"","title":"chat","sub":"message thread + composer","meta":"open ->","href":"./ui_kits/chat/"},{"code":"","title":"aicat","sub":"ai assistant with cat persona","meta":"open ->","href":"./ui_kits/aicat/"},{"code":"","title":"file browser","sub":"rails by file type drop 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":"signin","sub":"auth providers 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/"}]},{"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":"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 wm","items":[{"code":"os","title":"createDesktopShell","sub":"menubar apps launcher taskbar window manager","meta":"shell.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/shell.js"},{"code":"os","title":"icons set","sub":"svg glyphs for menubar + taskbar","meta":"icons.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/icons.js"},{"code":"os","title":"theme.css","sub":"os chrome tokens menubar launcher wm","meta":"theme.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/theme.css"},{"code":"os","title":"import path","sub":"anentrypoint-design/desktop","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 + 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 + 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":"ds shell + 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 stack","meta":"markdown.js","href":"https://github.com/AnEntrypoint/design/blob/main/src/markdown.js"},{"code":"api","title":"ensurePrism / highlightAllUnder","sub":"prism core + 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":5,"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"}]},{"id":"features","title":"why design","count":4,"items":[{"code":"","title":"layered surfaces","sub":"panel-on-panel rhythm; loud content sits inside quiet chrome.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css"},{"code":"","title":"monospace labels","sub":"mono only for codes/labels/CLI; sans for everything legible.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"code":"","title":"indicator rails","sub":"color-coded inset rails for category separation, never borders.","meta":"panel-row.css","href":"https://github.com/AnEntrypoint/design/blob/main/src/css/app-shell/panel-row.css#L126"},{"code":"","title":"tokens-only","sub":"every surface, type ramp, accent driven by --panel-* / --fs-* tokens.","meta":"colors_and_type.css","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"}]},{"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","14 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>
 <div id="app"></div>
 <script type="module">
 import { mount, components as C, h } from 'anentrypoint-design';
-const data = JSON.parse(document.getElementById('__site__').textContent);
+let data;
+try {
+  data = JSON.parse(document.getElementById('__site__').textContent);
+} catch (e) {
+  console.error('[page-html] failed to parse #__site__ bootstrap data:', e);
+  document.getElementById('app').textContent = 'This page failed to load correctly. Please refresh, or contact support if the problem persists.';
+  throw e;
+}
 
 function heroNode(hero) {
   if (!hero) return null;
@@ -150,11 +157,13 @@ function heroNode(hero) {
   );
 }
 
+function __esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+
 function sectionNode(sec, idx) {
   const features = sec.features || sec.items || [];
   const rows = features.map((f, i) => {
     const kids = [h('div', { key: 't', class: 'ds-feature-title' }, String(f.name || ''))];
-    if (f.desc) kids.push(h('div', { key: 'd', class: 'ds-feature-desc', innerHTML: String(f.desc).replace(/`([^`]+)`/g, '<code>$1</code>') }));
+    if (f.desc) kids.push(h('div', { key: 'd', class: 'ds-feature-desc', innerHTML: __esc(String(f.desc)).replace(/`([^`]+)`/g, '<code>$1</code>') }));
     if (f.benefit) kids.push(h('div', { key: 'b', class: 'ds-feature-benefit' }, String(f.benefit)));
     return h('div', { key: i, class: 'ds-feature' }, ...kids);
   });
@@ -185,9 +194,64 @@ function examplesNode(examples) {
   });
 }
 
-function panelNode(panel, idx) {
-  const items = Array.isArray(panel.items) ? panel.items : [];
-  if (!items.length) return null;
+// Category glyph per homepage panel id — the same line-icon vocabulary
+// icons.js already provides, so kits/previews/decks/docs read as distinct
+// categories at a glance instead of by text label alone. Falls back to no
+// icon for panel ids outside this table (e.g. one-off feature panels).
+const PANEL_ICON = {
+  kits: 'grid',
+  file_browser: 'folder',
+  desktop_os: 'square',
+  web_components: 'page',
+  api_exports: 'link',
+  decks: 'screen',
+  docs: 'file-text',
+  previews: 'eye',
+  features: 'info',
+};
+
+// Filter state for the kits search box above the "ui kits" panel. Reuses
+// ui_kits/search's own query-bar pattern (plain module-level state object,
+// mutated on input, driving a re-render) rather than inventing a second
+// filtering mechanism -- this homepage already ships that kit, so the
+// homepage's own kit listing gets the same affordance instead of being the
+// one surface on the site without a way to search kits by name.
+const kitsFilterState = { q: '' };
+
+function panelNode(panel, idx, rerender) {
+  let items = Array.isArray(panel.items) ? panel.items : [];
+  const isKits = panel.id === 'kits';
+  const q = isKits ? kitsFilterState.q.trim().toLowerCase() : '';
+  if (isKits && q) {
+    items = items.filter((it) => {
+      const hay = (String(it.title || it.name || '') + ' ' + String(it.sub || it.desc || '')).toLowerCase();
+      return hay.includes(q);
+    });
+  }
+  const iconName = panel.id && PANEL_ICON[panel.id];
+  const titleText = panel.title || panel.name || '';
+  const titleNode = iconName && titleText
+    ? h('span', { class: 'ds-panel-title-glyph' }, C.Icon(iconName, { size: 15 }), h('span', {}, titleText))
+    : titleText;
+  const filterInput = isKits && rerender ? h('div', { class: 'ds-kits-filter' },
+    h('input', {
+      type: 'search', class: 'input ds-kits-filter-input',
+      placeholder: 'filter kits by name or description…',
+      value: kitsFilterState.q,
+      'aria-label': 'filter ui kits',
+      oninput: (e) => { kitsFilterState.q = e.target.value; rerender(); },
+    })) : null;
+  if (!items.length) {
+    if (isKits && q) {
+      return h('div', { class: 'ds-kits-panel-wrap' }, filterInput,
+        C.Panel({ id: panel.id || null, title: titleNode, count: 0, children:
+          h('div', { class: 'ds-empty-state' },
+            h('div', { class: 'ds-empty-state-glyph' }, '( )'),
+            h('p', { class: 'ds-empty-state-msg' }, 'no kits match ', h('code', {}, '"' + kitsFilterState.q.trim() + '"')),
+          ) }));
+    }
+    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 = [];
@@ -197,7 +261,8 @@ function panelNode(panel, idx) {
     kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
     return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
   });
-  return C.Panel({ id: panel.id || null, title: panel.title || panel.name || '', count: panel.count || items.length, children: rows });
+  const panelEl = C.Panel({ id: panel.id || null, title: titleNode, count: items.length, children: rows });
+  return filterInput ? h('div', { class: 'ds-kits-panel-wrap' }, filterInput, panelEl) : panelEl;
 }
 
 function marqueeNode(marquee) {
@@ -301,8 +366,14 @@ const bodyNode = data.bodyHtml ? C.Section({ children: h('div', { class: 'page-b
 function footerNode() {
   const year = new Date().getFullYear();
   const links = (data.navItems || []).filter(([, href]) => /^https?:/.test(String(href)));
+  // Names the actual maintaining entity, not just the project's numeric
+  // brand. This is a personal/community project (MIT, copyright holder
+  // "AnEntrypoint" per LICENSE) with no separate legal org behind it, so the
+  // footer says that plainly instead of leaving "247420" to stand in for an
+  // entity it isn't.
+  const entity = (data.seoAuthor || '247420 · a design system by AnEntrypoint').toLowerCase();
   return h('footer', { class: 'ds-page-footer' },
-    h('span', { class: 'ds-page-footer-copy' }, String(year) + ' · ' + data.siteName),
+    h('span', { class: 'ds-page-footer-copy' }, String(year) + ' · ' + entity),
     links.length ? h('nav', { class: 'ds-page-footer-links', 'aria-label': 'footer' },
       ...links.map(([label, href], i) => h('a', { key: i, href }, String(label).replace(' ->', '')))
     ) : null,
@@ -320,40 +391,46 @@ function tierNode(tier, children) {
   return h('section', { key: tier.key, class: 'ds-tier ds-tier-' + tier.key, id: tier.key, 'aria-labelledby': labelId }, head, ...kids);
 }
 
-const panelsById = new Map((data.panels || []).map((p) => [p.id || p.title || p.name || '', p]));
-const takePanel = (id) => { const p = panelsById.get(id); if (p) panelsById.delete(id); return p ? panelNode(p) : null; };
-
 const TIERS = [
   { key: 'open', label: 'open', lede: 'browse and try the system running.', ids: ['kits', 'previews', 'decks'], extra: () => [examplesNode(data.examples)] },
   { key: 'ships', label: 'ships', lede: 'what the package contains.', ids: ['file_browser', 'desktop_os', 'web_components', 'api_exports'], extra: () => [] },
   { key: 'read', label: 'read', lede: 'understand the rules behind it.', ids: ['docs', 'features'], extra: () => [quickstartNode(data.quickstart)] },
 ];
 
-const tierNodes = TIERS.map((t) => {
-  const kids = [...t.ids.map(takePanel), ...t.extra()].filter(Boolean);
-  if (t.key === 'open' && kids.length) {
-    const lead = kids[0];
-    if (lead.props) lead.props.class = (lead.props.class || '') + ' ds-tier-lead';
-  }
-  return tierNode(t, kids);
-});
-const leftoverPanels = [...panelsById.values()].map(panelNode);
+// Builds the whole main-content tree fresh each render so the kits filter
+// (module-level kitsFilterState) can drive a real re-render via mount()'s
+// own returned render callback -- same reactive shape mountKit() gives every
+// other kit on the site, applied here to the static-page renderer.
+function buildMainChildren(rerender) {
+  const panelsById = new Map((data.panels || []).map((p) => [p.id || p.title || p.name || '', p]));
+  const takePanel = (id) => { const p = panelsById.get(id); if (p) panelsById.delete(id); return p ? panelNode(p, 0, rerender) : null; };
 
-const mainChildren = [
-  heroNode(data.hero),
-  marqueeNode(data.marquee),
-  ...data.sections.map(sectionNode),
-  ...tierNodes,
-  ...leftoverPanels,
-  bodyNode,
-  footerNode(),
-].filter(Boolean);
+  const tierNodes = TIERS.map((t) => {
+    const kids = [...t.ids.map(takePanel), ...t.extra()].filter(Boolean);
+    if (t.key === 'open' && kids.length) {
+      const lead = kids[0];
+      if (lead.props) lead.props.class = (lead.props.class || '') + ' ds-tier-lead';
+    }
+    return tierNode(t, kids);
+  });
+  const leftoverPanels = [...panelsById.values()].map((p) => panelNode(p, 0, rerender));
+
+  return [
+    heroNode(data.hero),
+    marqueeNode(data.marquee),
+    ...data.sections.map(sectionNode),
+    ...tierNodes,
+    ...leftoverPanels,
+    bodyNode,
+    footerNode(),
+  ].filter(Boolean);
+}
 
-mount(document.getElementById('app'), () => C.AppShell({
+mount(document.getElementById('app'), (rerender) => C.AppShell({
   topbar: C.Topbar({ brand: data.siteName, items: data.navItems, active: data.title }),
   crumb: C.Crumb({ leaf: data.title }),
   side: sideNode(data.sidebar),
-  main: h('div', { class: 'app-stage' }, ...mainChildren),
+  main: h('div', { class: 'app-stage' }, ...buildMainChildren(rerender)),
   status: C.Status({
     left: data.statusLeft || [data.siteName.toLowerCase(), data.slug],
     right: data.statusRight || ['live'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.477",
+  "version": "0.0.480",
   "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/community-app.js

@@ -15,7 +15,9 @@
 //     audioQueueItems, audioQueueCurrentId, audioQueuePaused,
 //     showAuthModal, settingsOpen, voiceSettingsOpen, replyTarget,
 //     mobileMenuOpen,  // drives the .ca-rail off-canvas drawer on narrow shells
-//     canManage        // gates the rail's "+ create channel" affordance
+//     canManage,       // gates the rail's "+ create channel" affordance
+//     forumPosts,      // ch.type==='forum': [{id,title,snippet,author,time,replyCount,tags?}]
+//     pageHtml, pageAuthor, pageUpdatedAt  // ch.type==='page': PageView content + attribution
 //   }
 //   adapter.subscribe(cb) -> unsubscribe   // cb fires when any snapshot field changes
 //   adapter.actions = {
@@ -223,7 +225,7 @@ export function mountCommunityApp(root, adapter = {}) {
         const inVoiceChannel = ch.type === 'voice';
         const bodyMain = inVoiceChannel ? voiceView(s)
             : ch.type === 'forum' ? ForumView({ posts: s.forumPosts || [], onSelect: (id) => A.openThread && A.openThread(id), onNewPost: () => A.newForumPost && A.newForumPost() })
-            : ch.type === 'page' ? PageView({ title: ch.name, html: s.pageHtml || '', isAdmin: !!s.canManage, onEdit: () => A.editPage && A.editPage() })
+            : ch.type === 'page' ? PageView({ title: ch.name, html: s.pageHtml || '', author: s.pageAuthor || '', updatedAt: s.pageUpdatedAt || 0, isAdmin: !!s.canManage, onEdit: () => A.editPage && A.editPage() })
             : chatView(s);
         const showVoiceBanner = s.voiceConnected && s.voiceChannelName && !(inVoiceChannel && s.voiceChannelName === ch.name);
         return h('div', { class: 'ca-app' },

package/src/components/community/navigation.js

@@ -4,7 +4,7 @@
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Icon } from '../shell.js';
-import { Avatar, avatarInitial } from '../content.js';
+import { Avatar, avatarInitial, avatarContrastFg } from '../content.js';
 import { UserPanel } from './presence.js';
 const h = webjsx.createElement;
 
@@ -97,7 +97,7 @@ export function ChannelItem({ id, name, type = 'text', active, voiceActive, voic
         ),
         voiceActive && participants.length ? h('div', { class: 'cm-ch-voice-users' },
             ...participants.map(p => h('div', { class: 'cm-ch-voice-user' + (p.speaking ? ' speaking' : '') },
-                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? `--avatar-bg:${p.color}` : null }, avatarInitial(p.identity)),
+                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? (avatarContrastFg(p.color) ? `--avatar-bg:${p.color};--avatar-fg:${avatarContrastFg(p.color)}` : `--avatar-bg:${p.color}`) : null }, avatarInitial(p.identity)),
                 h('span', { class: 'cm-ch-voice-user-name' }, p.identity)
             ))
         ) : null

package/src/components/community/presence.js

@@ -4,13 +4,19 @@
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Icon } from '../shell.js';
-import { avatarInitial } from '../content.js';
+import { avatarInitial, avatarContrastFg } from '../content.js';
 const h = webjsx.createElement;
 
+function avatarStyle(color) {
+    if (!color) return null;
+    const fg = avatarContrastFg(color);
+    return fg ? `--avatar-bg:${color};--avatar-fg:${fg}` : `--avatar-bg:${color}`;
+}
+
 export function VoiceUser({ identity, speaking, color } = {}) {
     const initial = avatarInitial(identity);
     return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
-        h('div', { class: 'cm-voice-user-avatar', style: color ? `--avatar-bg:${color}` : null }, initial),
+        h('div', { class: 'cm-voice-user-avatar', style: avatarStyle(color) }, initial),
         h('span', { class: 'cm-voice-user-name' }, identity)
     );
 }
@@ -29,7 +35,7 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
         }
     };
     return h('div', { class: 'cm-user-panel' },
-        h('div', { class: 'cm-user-avatar', style: color ? `--avatar-bg:${color}` : null },
+        h('div', { class: 'cm-user-avatar', style: avatarStyle(color) },
             h('span', { class: 'cm-user-status-dot' }),
             initial
         ),
@@ -48,7 +54,7 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
 export function MemberItem({ identity, name, color, status = 'online' } = {}) {
     const initial = avatarInitial(name || identity);
     return h('div', { class: 'cm-member-item' },
-        h('div', { class: 'cm-member-avatar', style: color ? `--avatar-bg:${color}` : null },
+        h('div', { class: 'cm-member-avatar', style: avatarStyle(color) },
             h('span', { class: 'cm-member-status' + (status === 'online' ? ' online' : '') }),
             initial
         ),

package/src/components/community/views.js

@@ -111,10 +111,16 @@ export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost, l
     );
 }
 
-export function PageView({ title = '', html = '', isAdmin = false, onEdit } = {}) {
+export function PageView({ title = '', html = '', author = '', updatedAt = 0, isAdmin = false, onEdit } = {}) {
     return h('div', { class: 'cm-page', role: 'document' },
         h('div', { class: 'cm-page-head' },
-            h('h1', { class: 'cm-page-title' }, title || ''),
+            h('div', { class: 'cm-page-head-title' },
+                h('h1', { class: 'cm-page-title' }, title || ''),
+                (author || updatedAt) ? h('div', { class: 'cm-page-meta' },
+                    author ? h('span', { class: 'cm-page-author' }, author) : null,
+                    updatedAt ? h('span', { class: 'cm-page-time' }, fmtRelTime(updatedAt)) : null
+                ) : null
+            ),
             isAdmin && onEdit ? h('button', { type: 'button', class: 'cm-page-edit', onclick: onEdit }, 'Edit') : null
         ),
         h('div', {

package/src/components/content/avatar.js

@@ -16,6 +16,36 @@ export function avatarInitial(name, count = 1) {
     return name ? String(name).trim().slice(0, count).toUpperCase() || '?' : '?';
 }
 
+// avatarContrastFg — picks black or white text against an arbitrary
+// per-user hashed --avatar-bg color, via WCAG relative luminance, so
+// initials clear 4.5:1 regardless of which hue the hash lands on (a
+// single fixed --fg-2 token can't: some hashed hues are light enough
+// that dark-on-dark or light-on-light both existed in the wild).
+// Returns null for an unparsable color so callers can omit the
+// inline style entirely and fall back to the CSS default.
+export function avatarContrastFg(color) {
+    if (!color) return null;
+    let r, g, b;
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(color).trim());
+    if (hex) {
+        let h = hex[1];
+        if (h.length === 3) h = h.split('').map(c => c + c).join('');
+        r = parseInt(h.slice(0, 2), 16); g = parseInt(h.slice(2, 4), 16); b = parseInt(h.slice(4, 6), 16);
+    } else {
+        const rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(String(color).trim());
+        if (!rgb) return null;
+        r = +rgb[1]; g = +rgb[2]; b = +rgb[3];
+    }
+    const lin = (c) => { const v = c / 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+    const L = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+    // Contrast against pure black/white; pick whichever side clears more
+    // headroom (both landing >=4.5:1 is common, but some hues only clear
+    // one side, so max-headroom is the right tiebreak, not a 0.5 cutoff).
+    const contrastWhite = 1.05 / (L + 0.05);
+    const contrastBlack = (L + 0.05) / 0.05;
+    return contrastWhite >= contrastBlack ? '#fff' : '#000';
+}
+
 // Avatar — the single letter-fallback/image avatar primitive. `initialsCount`
 // (default 1) controls how many leading characters of `name` become the
 // fallback letters when no `src`/`fallback` is given (community.js's

package/src/components/content/hero.js

@@ -99,13 +99,20 @@ export function Marquee({ items = [], sep = '/' }) {
     if (!items.length) return null;
     // Two identical runs make the -50% translate loop seamless. Each text and
     // separator is a keyed span so webjsx applyDiff never sees a primitive
-    // sibling beside a keyed VElement.
+    // sibling beside a keyed VElement. Run 'a' is the real, assistive-tech-
+    // visible content; run 'b' is a purely visual duplicate for the seamless
+    // loop and must not be exposed to screen readers as doubled text, so it
+    // is wrapped in its own aria-hidden container (standard seamless-marquee
+    // technique).
     const run = (runKey) => items.flatMap((it, i) => [
         h('span', { class: 'ds-marquee-item', key: `${runKey}-i${i}` }, it),
         h('span', { class: 'ds-marquee-sep', key: `${runKey}-s${i}`, 'aria-hidden': 'true' }, sep),
     ]);
     return h('div', { class: 'ds-marquee', role: 'marquee' },
-        h('div', { class: 'ds-marquee-track' }, ...run('a'), ...run('b'))
+        h('div', { class: 'ds-marquee-track' },
+            h('span', { class: 'ds-marquee-run ds-marquee-run-a' }, ...run('a')),
+            h('span', { class: 'ds-marquee-run ds-marquee-run-b', 'aria-hidden': 'true' }, ...run('b')),
+        )
     );
 }
 

package/src/components/content.js

@@ -6,7 +6,7 @@
 // submodule under ./content/, and the public export surface here is unchanged
 // — no consumer import needs to move.
 
-import { avatarInitial, Avatar } from './content/avatar.js';
+import { avatarInitial, avatarContrastFg, Avatar } from './content/avatar.js';
 import { Row, RowLink } from './content/row.js';
 import { Panel, Card, PanelFromItems, Section, Receipt, Changelog } from './content/panel.js';
 import { Hero, HeroFromPageData, Marquee, Manifesto, PageHeader } from './content/hero.js';
@@ -20,7 +20,7 @@ import { Spinner, Skeleton, Alert, FilterPills } from './content/feedback.js';
 import { HomeView, ProjectView } from './content/views.js';
 
 export {
-    avatarInitial, Avatar,
+    avatarInitial, avatarContrastFg, Avatar,
     Row, RowLink,
     Panel, Card, PanelFromItems, Section, Receipt, Changelog,
     Hero, HeroFromPageData, Marquee, Manifesto, PageHeader,

package/src/components/freddie/pages-missing.js

@@ -90,7 +90,7 @@ export const themePage = makePage((ctx) => {
         return [
             PageHeader({ title: 'theme', lede: 'theme preference' }),
             section('current', Table({ headers: ['setting', 'value'], rows: [
-                ['theme', (typeof window !== 'undefined' && document.body.getAttribute('data-theme')) || 'github-dark'],
+                ['theme', (typeof window !== 'undefined' && document.documentElement.getAttribute('data-theme')) || 'github-dark'],
                 ['density', (typeof window !== 'undefined' && document.documentElement.getAttribute('data-density')) || 'compact'],
                 ['accent', (typeof window !== 'undefined' && document.documentElement.getAttribute('data-accent')) || 'default'],
             ] })),

package/src/components/overlay-primitives/emoji-picker.js

@@ -44,12 +44,18 @@ const ALL_EMOJI = EMOJI_CATEGORIES.flatMap((c) => c.emoji);
 export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose, query = '' } = {}) {
     if (!open) return null;
     let cat = EMOJI_CATEGORIES[0].id;
-    let rootEl = null, gridEl = null;
+    let rootEl = null, gridEl = null, searchEl = null;
+    // Internal search state, seeded from the `query` prop so a consumer that
+    // already knows the typed ':smile' trigger text (e.g. a composer keydown
+    // handler) can still pre-fill it — but typing in the picker's own input
+    // (added here since no consumer previously had anywhere to route text
+    // into `query`) is the primary path now.
+    let search = query || '';
     const close = () => onClose && onClose();
 
     const renderGrid = () => {
         if (!gridEl) return;
-        const q = (query || '').trim().toLowerCase();
+        const q = (search || '').trim().toLowerCase();
         const cells = q
             ? ALL_EMOJI.filter(([, name]) => name.toLowerCase().includes(q))
             : (EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0]).emoji;
@@ -82,7 +88,13 @@ export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose,
             el._ovEmojiCleanup = _anchoredOverlayLifecycle(el, { anchorX, anchorY, fallbackW: 260, fallbackH: 240, close });
         },
     },
-        (query || '').trim() ? null : h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
+        h('input', {
+            type: 'search', class: 'ov-emoji-search', placeholder: 'Search emoji…',
+            'aria-label': 'search emoji', value: search,
+            ref: (el) => { searchEl = el; },
+            oninput: (e) => { search = e.target.value; renderGrid(); },
+        }),
+        (search || '').trim() ? null : h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
             ...EMOJI_CATEGORIES.map((c) => h('button', {
                 type: 'button', class: 'ov-emoji-tab', role: 'tab',
                 'aria-selected': c.id === cat ? 'true' : 'false',

package/src/components/shell/app-shell.js

@@ -7,9 +7,14 @@ import * as webjsx from '../../../vendor/webjsx/index.js';
 import { trapTab } from '../overlay-primitives.js';
 import { Brand, Glyph } from './atoms.js';
 import { Icon } from './icons.js';
+import { ThemeToggle } from '../theme-toggle.js';
 const h = webjsx.createElement;
 
-export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search } = {}) {
+// `themeToggle` defaults on: every Topbar consumer (homepage included) gets a
+// real, working light/dark/auto control in the shell chrome instead of each
+// call site having to remember to wire ThemeToggle() in by hand. Pass
+// `themeToggle: false` to opt a shell out (e.g. a kit that renders its own).
+export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search, themeToggle = true } = {}) {
     return h('header', { class: 'app-topbar', role: 'banner' },
         Brand({ name: brand, leaf }),
         search ? h('label', { class: 'app-search' },
@@ -50,7 +55,8 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
                     }
                 }
             }, label);
-        }))
+        })),
+        themeToggle ? h('div', { class: 'app-topbar-theme' }, ThemeToggle({ compact: true })) : null
     );
 }
 
@@ -208,9 +214,14 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
     // brand + nav (topbar) and breadcrumb + right slot (crumb) share a single
     // band so the chrome reads as one bar, not two. Either prop alone still
     // renders on its own (consumers that pass only a topbar are unaffected).
+    // Landmark wrapper: topbar/crumb are opaque children with no semantics of
+    // their own, so screen-reader users landmark-navigating a page saw no
+    // "banner"/"navigation" region at all above <main>. <header role="banner">
+    // names the brand+nav band; the app-side-shell aside below already exists
+    // as a real <aside>, so this closes the missing landmark for the top band.
     const chrome = (topbar && crumb)
-        ? h('div', { class: 'app-chrome' }, topbar, crumb)
-        : (topbar || crumb || null);
+        ? h('header', { class: 'app-chrome', role: 'banner' }, topbar, crumb)
+        : (topbar || crumb) ? h('header', { class: 'app-chrome', role: 'banner' }, topbar || crumb) : null;
     return h('div', { class: 'app', ref: syncAppSide },
         h('a', { href: '#app-main', class: 'skip-link' }, 'skip to main content'),
         hasSide ? h('button', {

package/src/components/shell/workspace-shell.js

@@ -173,7 +173,7 @@ export function WorkspaceRail({ brand = '247420', action, items = [], footer } =
                     it.icon ? Icon(it.icon) : h('span', { class: 'ws-rail-item-glyph', 'aria-hidden': 'true' }),
                     h('span', { class: 'ws-rail-item-label' }, it.label),
                     (it.count != null && it.count !== 0 && it.count !== '0')
-                        ? h('span', { class: 'ws-rail-item-count', 'aria-hidden': 'true' }, String(it.count))
+                        ? h('span', { class: 'ws-rail-item-count ds-badge ds-badge--sm', 'aria-hidden': 'true' }, String(it.count))
                         : null,
                     it.rail ? h('span', { class: 'ws-rail-item-flag tone-' + it.rail, 'aria-hidden': 'true' }) : null)))),
         footer ? h('div', { class: 'ws-rail-foot' }, footer) : null,