anentrypoint-design 0.0.477 → 0.0.480

package/src/kits/os/wm.css

@@ -1,7 +1,9 @@
 /* ============================================================
    Window Manager visuals — paired with createWM() behavior
    Tokens: --os-* (defined by desktop/theme.css)
-   Bible: tonal surfaces, no borders for chrome, inset rail for focus.
+   Bible: tonal surfaces, inset rail for focus, subtle hairline border +
+   elevation shadow on every window (stronger on wm-focused) so windows
+   read as distinct layers against a dark desktop background.
    ============================================================ */
 
 .wm-root {
@@ -21,14 +23,18 @@
     max-height: 100%;
     background: var(--os-bg-1);
     color: var(--os-fg);
-    border: none;
+    border: 1px solid color-mix(in oklab, var(--os-fg) 14%, transparent);
     border-radius: var(--os-radius, var(--r-2, 10px));
     display: flex;
     flex-direction: column;
     pointer-events: auto;
     overflow: hidden;
+    box-shadow: var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .3));
+}
+.wm-win.wm-focused {
+    border-color: color-mix(in oklab, var(--os-fg) 28%, transparent);
+    box-shadow: inset 4px 0 0 var(--os-accent), var(--shadow-3, 0 12px 32px rgba(0, 0, 0, .4));
 }
-.wm-win.wm-focused { box-shadow: inset 4px 0 0 var(--os-accent); }
 /* Promote to a compositor layer only for the duration of a drag/resize so the
    per-frame left/top/width/height writes don't force a main-thread layout each
    pointermove. Released on pointerup (class removed) to avoid the permanent
@@ -60,10 +66,10 @@
     text-transform: lowercase;
 }
 
-.wm-btns { display: flex; gap: 6px; }
+.wm-btns { display: flex; align-items: center; gap: 6px; }
 .wm-btn {
-    width: 22px;
-    height: 22px;
+    width: 26px;
+    height: 26px;
     border: none;
     background: var(--os-bg-3);
     color: var(--os-fg-2);
@@ -79,6 +85,13 @@
     touch-action: manipulation;
 }
 .wm-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
+/* Close gets its own hover color (red) so the destructive action is
+   distinguishable from minimize/maximize at a glance, not just by position. */
+.wm-btn[title='close']:hover,
+.wm-btn[aria-label='close']:hover {
+    background: var(--color-danger, #C41C0C);
+    color: var(--paper, #fff);
+}
 
 .wm-body {
     flex: 1;

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/kits/spoint/host-join-lobby.css

@@ -62,12 +62,12 @@
   background: var(--bg);
   color: var(--fg);
   border: 1px solid var(--bw-rule, var(--rule));
-  border-radius: var(--r-1, 6px);
-  padding: 8px 10px;
+  border-radius: var(--r-1, 8px);
+  padding: var(--space-2) var(--space-2-5);
   font: var(--fs-body) var(--ff-mono);
   outline: none;
 }
-.sp-lobby-input:focus { border-color: var(--accent); }
+.sp-lobby-input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring-inset); }
 .sp-lobby-link { font-size: var(--fs-small, 11px); }
 .sp-lobby-code {
   font-family: var(--ff-display);

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/src/web-components/freddie-chat.js

@@ -10,8 +10,8 @@ class FreddieChat extends DsChat {
     constructor() {
         super();
         this._title = 'freddie';
-        this._sub = '';
-        this._placeholder = 'message freddie · /tools · /tool name {json} · /run …';
+        this._sub = '/tools · /tool name {json} · /run …';
+        this._placeholder = 'message freddie…';
     }
 
     connectedCallback() {

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;
 
@@ -2037,6 +2039,10 @@ export interface PageViewProps {
     title?: string;
     /** @default '' */
     html?: string;
+    /** @default '' */
+    author?: string;
+    /** @default 0 */
+    updatedAt?: number;
     /** @default false */
     isAdmin?: boolean;
     onEdit?: (...args: any[]) => any;