anentrypoint-design 0.0.477 → 0.0.478

package/src/css/app-shell/row-print.css

@@ -71,5 +71,39 @@
   .ds-live-log { height: auto; max-height: none; overflow: visible; }
   .ds-stat, .kpi-card { border: 1px solid var(--rule); }
   .ds-session-row { break-inside: avoid; }
+
+  /* Receipt table (Receipt() in src/components/content/panel.js, `.kv`) — the
+     project_page kit's "receipt" section, and any other kv-table consumer.
+     On screen it inherits panel/token colors that can render as near-white
+     text on a printer's assumed-white page background if the browser's
+     "background graphics" print option is off (the common default); force
+     the LIGHT-theme ink/paper tokens (real print-page colors, not a raw
+     literal — --ink/--paper are the same "true black text on true white
+     page" values the light theme already defines) and visible cell borders
+     so it stays legible without relying on background-graphics printing at
+     all. break-inside:avoid keeps a receipt from splitting a row across a
+     page boundary. */
+  .kv { border-collapse: collapse; width: 100%; color: var(--ink); background: var(--paper); }
+  .kv tr { break-inside: avoid; }
+  .kv td { border: 1px solid var(--paper-3); padding: 4px 8px; color: var(--ink); }
+
+  /* Any button/interactive-only affordance still present inside otherwise-
+     printable content (copy buttons, expand/collapse toggles, filter pills,
+     the receipt/doc section's own action row) is chrome, not content. */
+  .btn, .btn-primary, .btn-ghost, .row-act, .ds-filter-pills,
+  .app-search, input[type="search"] { display: none; }
+
+  /* Force real ink-on-paper for body copy: panel/fg tokens are tuned for
+     screen surfaces (including dark theme, where --panel-text can resolve
+     near-white) and a printer defaults to a white page regardless of
+     data-theme, so an unconverted dark-theme page would print near-invisible
+     text without this override. Same --ink/--paper light-theme pair as the
+     receipt table above, not a second raw literal. */
+  /* No !important: source order already wins here (this rule is the last
+     word inside its own @media print block, same as every other override in
+     this file), and an unconditional !important on `body` would beat even a
+     future print-specific consumer override with higher specificity. */
+  html body, .app-main, .page-body, .ds-lede { color: var(--ink); background: var(--paper); }
+  a { color: var(--ink); text-decoration: underline; }
 }
 

package/src/css/app-shell/states-interactions.css

@@ -825,3 +825,45 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
     max-width: none;
   }
 }
+
+/* Stacking host for the imperative toast()/<Toast> component
+   (src/components/editor-primitives/toast.js). One fixed-position column;
+   individual toasts are appended/removed as siblings inside it rather than
+   each toast fixed-positioning itself, so more than one toast in flight
+   stacks instead of overlapping at the same bottom-right point. */
+.ds-ep-toast-host {
+  position: fixed; z-index: var(--z-toast);
+  bottom: 24px; right: 24px;
+  display: flex; flex-direction: column-reverse; gap: var(--space-2);
+  pointer-events: none;
+}
+.ds-ep-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: var(--space-3);
+  background: var(--bg-2); color: var(--fg);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-2);
+  padding: var(--space-3) var(--space-4);
+  max-width: 320px;
+  box-shadow: var(--shadow-overlay);
+  font-size: var(--fs-sm);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-ep-toast { animation: toast-slide-in 0.3s ease-out; }
+  .ds-ep-toast.leaving { animation: toast-slide-in 0.2s ease-in reverse; }
+}
+.ds-ep-toast.kind-error   { border-color: var(--danger, var(--warn)); }
+.ds-ep-toast.kind-success { border-color: var(--green-2); }
+.ds-ep-toast.kind-warning { border-color: var(--amber); }
+.ds-ep-toast-msg { flex: 1; }
+.ds-ep-toast-action {
+  flex-shrink: 0;
+  background: transparent; border: 0; color: var(--accent-ink);
+  font: inherit; font-weight: 600; cursor: pointer; padding: 0;
+}
+.ds-ep-toast-action:hover { text-decoration: underline; }
+
+@media (max-width: 480px) {
+  .ds-ep-toast-host { bottom: 16px; right: 16px; left: 16px; }
+  .ds-ep-toast { max-width: none; }
+}

package/src/css/app-shell/topbar.css

@@ -80,6 +80,7 @@ body.canvas-host { background: transparent !important; }
 .app-topbar > .brand { flex: 0 0 auto; }
 .app-topbar > .app-search { flex: 1 1 auto; }
 .app-topbar > nav { margin-left: auto; }
+.app-topbar > .app-topbar-theme { flex: 0 0 auto; }
 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
 .app-topbar nav a { flex: 0 0 auto; }
 .app-topbar nav a {

package/src/kits/os/theme.css

@@ -58,6 +58,8 @@ html, body {
     color: var(--os-fg);
     font: var(--fs-tiny) var(--os-font);
     height: var(--os-bar-h);
+    /* prefers-reduced-transparency handled below (near bottom of this file):
+       drops the blur + backing translucency to a solid --os-bg-2 fill. */
     padding: 0 var(--space-2-75);
     gap: var(--space-1-75);
     box-shadow: none;
@@ -1099,6 +1101,25 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   .ds-247420 .tb-sess-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
 }
 
+/* -----------------------------------------------------------------------
+   prefers-reduced-transparency — distinct from prefers-reduced-motion
+   above: a user can want full animation but zero see-through/blur panel
+   chrome (vestibular-motion sensitivity vs. low-vision/legibility need are
+   different accessibility needs, so this is its own media query, not folded
+   into the motion one). Every backdrop-blur/translucent-panel effect in this
+   kit drops to a solid, fully-opaque backing fill — the blur adds nothing
+   once nothing shows through it, so it is dropped alongside the alpha for
+   one less GPU compositing pass, not just left as dead blur-on-opaque.
+   ----------------------------------------------------------------------- */
+@media (prefers-reduced-transparency: reduce) {
+  .os-menubar, .os-taskbar {
+    background: var(--os-bg-2);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  .ds-247420 .tb-sess-overlay { background: var(--scrim-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
+}
+
 /* -----------------------------------------------------------------------
  *  Freddie chat — jank pass 3 (2026-05-31)
  *  Pins layout, spacing, focus, scrollbar, role-distinct bubbles, focus ring,

package/src/kits/os/wm.js

@@ -11,6 +11,38 @@
 
 import { icons } from './icons.js';
 
+// Shared aria-live announcer for window open/close/focus-change events.
+// Visually hidden, one instance per document, lazily created so importing
+// this module has no side effect until a window actually renders. Screen
+// readers get no other signal that a floating, non-modal window opened,
+// closed, or changed focus -- there is no page navigation or route change
+// to announce it implicitly, unlike a normal document flow.
+let _announcer = null;
+function getAnnouncer() {
+    if (_announcer && _announcer.isConnected) return _announcer;
+    _announcer = document.getElementById('wm-announcer');
+    if (_announcer) return _announcer;
+    _announcer = document.createElement('div');
+    _announcer.id = 'wm-announcer';
+    _announcer.setAttribute('aria-live', 'polite');
+    _announcer.setAttribute('aria-atomic', 'true');
+    _announcer.className = 'sr-only';
+    // Inline fallback in case the consuming page's stylesheet doesn't define
+    // .sr-only (this module has no guaranteed CSS import of its own) --
+    // standard clip-based visually-hidden-but-AT-visible technique.
+    _announcer.style.cssText = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';
+    document.body.appendChild(_announcer);
+    return _announcer;
+}
+function announce(text) {
+    const a = getAnnouncer();
+    // Clear-then-set on a microtask forces a re-announcement even if the
+    // text is identical to what's already there (e.g. focusing the same
+    // window twice in a row) -- aria-live only fires on a DOM mutation.
+    a.textContent = '';
+    requestAnimationFrame(() => { a.textContent = text; });
+}
+
 export function renderWindow(opts = {}) {
     const {
         title = 'window',
@@ -127,11 +159,15 @@ export function renderWindow(opts = {}) {
             return;
         }
         disarmClose();
+        announce('closed ' + titleEl.textContent);
         callbacks.onClose && callbacks.onClose();
     });
     closeBtn.addEventListener('blur', disarmClose);
 
-    const focus = () => callbacks.onFocus && callbacks.onFocus();
+    const focus = () => {
+        if (!el.classList.contains('wm-focused')) announce(titleEl.textContent + ' focused');
+        callbacks.onFocus && callbacks.onFocus();
+    };
 
     el.addEventListener('pointerdown', () => focus());
 
@@ -172,6 +208,7 @@ export function renderWindow(opts = {}) {
     applyFocused(el, focused);
     applyMaximized(el, maximized);
     applyMinimized(el, minimized);
+    announce('opened ' + title);
 
     return {
         el,

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

@@ -80,9 +80,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 = [];
@@ -92,7 +147,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) {
@@ -196,8 +252,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,
@@ -215,40 +277,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 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));
 
-const mainChildren = [
-  heroNode(data.hero),
-  marqueeNode(data.marquee),
-  ...data.sections.map(sectionNode),
-  ...tierNodes,
-  ...leftoverPanels,
-  bodyNode,
-  footerNode(),
-].filter(Boolean);
+  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/src/page-html.js

@@ -82,13 +82,14 @@ export function renderPageHtml({
         quickstart: quickstart || null,
         statusLeft: Array.isArray(statusLeft) ? statusLeft : null,
         statusRight: Array.isArray(statusRight) ? statusRight : null,
+        seoAuthor: seo && seo.author ? seo.author : null,
     };
 
     const seoTags = seo ? renderSeoTags({ title, siteName, seo }) : '';
     const faviconTags = renderFaviconTags({ faviconHref, faviconGlyph });
 
     return `<!doctype html>
-<html lang="en" class="ds-247420">
+<html lang="en" class="ds-247420" data-theme="${theme}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -105,7 +106,7 @@ ${PAGE_INLINE_STYLES}
 <script id="__site__" type="application/json">${JSON.stringify(pageData).replace(/</g, '\\u003c')}</script>
 ${headExtra}
 </head>
-<body data-theme="${theme}">
+<body>
 <div id="app"></div>
 <script type="module">
 ${CLIENT_SCRIPT}${clientScriptExtra}

package/src/theme.js

@@ -43,7 +43,11 @@ function writeStored(mode) {
 
 function writeAttr(mode) {
     if (!isBrowser()) return;
-    document.body.setAttribute('data-theme', mode);
+    // data-theme must live on the same element carrying the .ds-247420 scope
+    // class (<html>, per every shipped page template) -- the bundled CSS
+    // selectors are `.ds-247420[data-theme="ink"]`, which cannot match if
+    // the attribute sits on <body> instead of <html>.
+    document.documentElement.setAttribute('data-theme', mode);
 }
 
 function ensureMq() {
@@ -169,7 +173,7 @@ export function initDirection() {
 export function initTheme() {
     if (!isBrowser()) return 'auto';
     const stored = readStored();
-    const fromAttr = document.body.getAttribute('data-theme');
+    const fromAttr = document.documentElement.getAttribute('data-theme');
     const initial = stored || (VALID.has(fromAttr) ? fromAttr : 'auto');
     applyTheme(initial);
     // Restore persisted accent/density (no-op if none stored — keeps the

package/src/web-components/ds-chat.js

@@ -28,6 +28,7 @@ class DsChat extends HTMLElement {
             this._placeholder = val || '';
         } else if (name === 'title') {
             this._title = val || 'chat';
+            if (!this.hasAttribute('aria-label') || this._ariaLabelAuto) { this.setAttribute('aria-label', this._title); this._ariaLabelAuto = true; }
         } else if (name === 'sub') {
             this._sub = val || '';
         } else if (name === 'disabled') {
@@ -47,6 +48,14 @@ class DsChat extends HTMLElement {
     get disabled() { return this._disabled; }
     connectedCallback() {
         this.classList.add('ds-247420');
+        // Accessible name for the custom element itself: <ds-chat> has no
+        // implicit ARIA role/name, so a screen reader landmark/element list
+        // shows an unlabeled item without this. role="region" + aria-label
+        // (falling back to the chat title) makes it identifiable on its own,
+        // separate from the inner .chat-thread's role="log"/aria-live, which
+        // announces individual streamed messages rather than naming the widget.
+        if (!this.hasAttribute('role')) this.setAttribute('role', 'region');
+        if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', this._title || 'chat');
         this._render();
     }
     _send(text) {

package/types/components.d.ts

@@ -141,6 +141,8 @@ export interface TopbarProps {
     active?: string;
     onNav?: (...args: any[]) => any;
     search?: any;
+    /** @default true */
+    themeToggle?: boolean;
 }
 export declare function Topbar(props?: TopbarProps): VNode;