anentrypoint-design 0.0.156 → 0.0.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.156",
+  "version": "0.0.157",
   "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/components/chat.js

@@ -5,6 +5,7 @@
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { renderMarkdownCached, highlightCodeBlockCached, initializeCachesEagerly, getCacheStats } from '../markdown-cache.js';
 import { register } from '../debug.js';
+import { Icon } from './shell.js';
 
 const h = webjsx.createElement;
 let _stats = { messages: 0, lastKindCounts: {} };
@@ -171,10 +172,10 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
                 if (e.key === ';' && e.ctrlKey) { e.preventDefault(); onEmoji && onEmoji(e); }
             } }),
         h('div', { class: 'chat-composer-toolbar' },
-            onAttach ? h('button', { class: 'composer-btn', onclick: (e) => { e.preventDefault(); onAttach(e); }, 'aria-label': 'attach file', title: 'attach file' }, '📎') : null,
-            onEmoji ? h('button', { class: 'composer-btn', onclick: (e) => { e.preventDefault(); onEmoji(e); }, 'aria-label': 'emoji picker', title: 'emoji picker (Ctrl+;)' }, '😊') : null,
-            onMenu ? h('button', { class: 'composer-btn', onclick: (e) => { e.preventDefault(); onMenu(e); }, 'aria-label': 'composer menu', title: 'more options' }, '⋯') : null,
-            h('button', { class: 'send', disabled: disabled || !(value && value.trim()), onclick: send, 'aria-label': 'send message', title: 'send message (Enter)' }, '↑')
+            onAttach ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onAttach(e); }, 'aria-label': 'attach file', title: 'attach file' }, Icon('paperclip')) : null,
+            onEmoji ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onEmoji(e); }, 'aria-label': 'emoji picker', title: 'emoji picker (Ctrl+;)' }, Icon('smile')) : null,
+            onMenu ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onMenu(e); }, 'aria-label': 'composer menu', title: 'more options' }, Icon('more-horizontal')) : null,
+            h('button', { type: 'button', class: 'send', disabled: disabled || !(value && value.trim()), onclick: send, 'aria-label': 'send message', title: 'send message (Enter)' }, Icon('arrow-up'))
         )
     );
 }
@@ -223,6 +224,11 @@ export function Chat({ title = 'chat', sub, messages = [], composer, header } =
             h('span', { class: 'sub', 'aria-live': 'polite' }, String(messages.length).padStart(2, '0') + ' msgs')
         ),
         h('div', { class: 'chat-thread', ref: threadRef, role: 'log', 'aria-label': 'chat messages' },
+            messages.length === 0
+                ? h('div', { key: '_empty', class: 'chat-empty', role: 'status' },
+                    h('p', { class: 'chat-empty-title' }, 'no messages yet'),
+                    h('p', { class: 'chat-empty-sub' }, 'start the conversation'))
+                : null,
             ...messages.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i }))
         ),
         composer || null

package/src/components/content.js

@@ -274,7 +274,7 @@ export function TextField({ label, value = '', type = 'text', placeholder = '',
         label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
         input,
         maxLength != null ? h('span', { key: 'c', class: 'ds-field-count' }, String(value.length) + '/' + maxLength) : null,
-        hint != null ? h('span', { key: 'h', class: 'lede ds-field-hint' }, hint) : null
+        hint != null ? h('span', { key: 'h', class: 'ds-field-hint' }, hint) : null
     );
 }
 
@@ -294,7 +294,7 @@ export function Select({ label, value = '', options = [], onChange, name, key, p
     return h('label', { key, class: 'ds-field' },
         label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
         select,
-        hint != null ? h('span', { key: 'h', class: 'lede ds-field-hint' }, hint) : null
+        hint != null ? h('span', { key: 'h', class: 'ds-field-hint' }, hint) : null
     );
 }
 

package/src/components/shell.js

@@ -15,31 +15,35 @@ export function Chip({ tone = '', children }) {
     return h('span', { class: 'chip' + (tone ? ' tone-' + tone : '') }, children);
 }
 
-export function Btn({ href = '#', variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled }) {
+export function Btn({ href, variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled }) {
     // Support legacy primary/ghost props for backward compatibility, but prefer variant
     const resolvedVariant = variant !== 'default' ? variant : (primary ? 'primary' : (ghost ? 'ghost' : (danger ? 'danger' : 'default')));
     const cls = (resolvedVariant === 'primary' ? 'btn-primary' : (resolvedVariant === 'ghost' ? 'btn-ghost' : (resolvedVariant === 'danger' ? 'btn-primary danger' : 'btn')))
         + (disabled ? ' is-disabled' : '');
-    // Anchor with role=button needs explicit Space/Enter activation for keyboard parity with <button>.
-    // Browsers fire click on Enter for anchors with href, but Space does nothing — and href="#"
-    // synthesizes navigation if onclick doesn't preventDefault.
-    const onkeydown = (e) => {
-        if (disabled) { e.preventDefault(); return; }
-        if (e.key === ' ' || (e.key === 'Enter' && (!href || href === '#'))) {
-            e.preventDefault();
-            if (onClick) onClick(e);
-        }
-    };
     const onclick = (e) => {
         if (disabled) { e.preventDefault(); return; }
         if (onClick) onClick(e);
     };
-    return h('a', {
-        class: cls, href, role: 'button',
-        tabindex: disabled ? '-1' : '0',
-        'aria-label': ariaLabel || (typeof children === 'string' ? children : undefined),
-        'aria-disabled': disabled ? 'true' : null,
-        onclick, onkeydown
+    const ariaName = ariaLabel || (typeof children === 'string' ? children : undefined);
+
+    // A real navigational href renders an anchor; everything else is an action
+    // button and renders a native <button> (correct semantics + keyboard
+    // activation for free, no role=button / href="#" scroll-jump hack).
+    const isLink = href != null && href !== '' && href !== '#';
+    if (isLink) {
+        return h('a', {
+            class: cls, href,
+            'aria-label': ariaName,
+            'aria-disabled': disabled ? 'true' : null,
+            tabindex: disabled ? '-1' : null,
+            onclick
+        }, children);
+    }
+    return h('button', {
+        type: 'button', class: cls,
+        disabled: disabled ? true : null,
+        'aria-label': ariaName,
+        onclick
     }, children);
 }
 
@@ -59,10 +63,14 @@ export function Badge({ children, variant = 'default', tone = 'neutral' }) {
     return h('span', { class: 'ds-badge ds-badge-' + variant + ' tone-' + tone }, children);
 }
 
-export function Glyph({ children, color, size = 'base' }) {
+export function Glyph({ children, color, size = 'base', label } = {}) {
     const fontSize = size === 'sm' ? '11px' : (size === 'lg' ? '16px' : '13px');
     const style = `font-size:${fontSize}` + (color ? `;color:${color}` : '');
-    return h('span', { class: 'glyph', style }, children);
+    // Decorative by default (screen readers skip the glyph char). Pass `label`
+    // to expose an accessible name instead.
+    return h('span', label
+        ? { class: 'glyph', style, role: 'img', 'aria-label': label }
+        : { class: 'glyph', style, 'aria-hidden': 'true' }, children);
 }
 
 // Monochrome inline-SVG icons (stroke=currentColor) so chrome reads as one
@@ -77,7 +85,12 @@ const ICON_PATHS = {
     phone: '<path d="M5 4h3l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>',
     members: '<circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0M16 6a3 3 0 0 1 0 6M21 20a6 6 0 0 0-4-5.7"/>',
     menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
-    settings: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/>'
+    settings: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/>',
+    paperclip: '<path d="M21 11.5 12.5 20a5 5 0 0 1-7-7l8-8a3.5 3.5 0 0 1 5 5l-8 8a2 2 0 0 1-3-3l7.5-7.5"/>',
+    smile: '<circle cx="12" cy="12" r="9"/><path d="M8 14a4 4 0 0 0 8 0"/><path d="M9 9h.01M15 9h.01"/>',
+    'more-horizontal': '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
+    'arrow-up': '<path d="M12 19V5M5 12l7-7 7 7"/>',
+    send: '<path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/>'
 };
 export function Icon(name, { size = 16 } = {}) {
     const inner = ICON_PATHS[name];

package/src/kits/os/theme.css

@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 :root {
-    --ff-ui: 'Space Grotesk', system-ui, sans-serif;
-    --ff-display: 'Space Grotesk', system-ui, sans-serif;
+    --ff-ui: 'Inter', system-ui, sans-serif;
+    --ff-display: 'Inter', system-ui, sans-serif;
     --ff-mono: 'JetBrains Mono', ui-monospace, monospace;
     --os-accent: var(--panel-accent, #3F8A4A);
     --os-accent-2: var(--panel-accent-2, #2B6B36);
@@ -23,8 +23,8 @@
     --os-bar-h-mobile: 52px;
     --os-rail-w: 64px;
     --os-tap: 44px;
-    --os-font: var(--ff-ui, 'Space Grotesk', system-ui, sans-serif);
-    --os-display: var(--ff-display, 'Space Grotesk', system-ui, sans-serif);
+    --os-font: var(--ff-ui, 'Inter', system-ui, sans-serif);
+    --os-display: var(--ff-display, 'Inter', system-ui, sans-serif);
     --os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, monospace);
 }
 
@@ -464,7 +464,7 @@ html, body {
  * thebird theme preset (migrated from thebird's local thebird-brand.css
  * 2026-05-26). thebird ships ZERO design CSS — every rule below lives here
  * upstream and is delivered via the published package. Scoped to .ds-247420
- * (thebird's OS root carries that class). Brand identity: Space Grotesk +
+ * (thebird's OS root carries that class). Brand identity: Inter +
  * --paper #F5F0E4 + green accent #247420 + uniform 34px bars +
  * Windows-style right-side window controls.
  * ============================================================ */
@@ -472,9 +472,9 @@ html, body {
     --paper: #F5F0E4;
 }
 .ds-247420 {
-    --ff-ui: 'Space Grotesk', system-ui, sans-serif !important;
-    --ff-display: 'Space Grotesk', system-ui, sans-serif !important;
-    --ff-prose: 'Space Grotesk', system-ui, sans-serif !important;
+    --ff-ui: 'Inter', system-ui, sans-serif !important;
+    --ff-display: 'Inter', system-ui, sans-serif !important;
+    --ff-prose: 'Inter', system-ui, sans-serif !important;
     --os-accent: #247420;
     /* uniform bar height: 22px button + 6px+6px padding = 34px */
     --os-bar-h: 34px !important;
@@ -538,7 +538,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   border: 1px solid var(--os-accent, #247420);
   border-radius: 8px;
   z-index: 9600;
-  font-family: var(--ff-ui, 'Space Grotesk', sans-serif);
+  font-family: var(--ff-ui, 'Inter', sans-serif);
   color: var(--os-fg, #fff);
   min-width: 280px;
   box-shadow: 0 12px 40px rgba(0,0,0,0.5);
@@ -555,19 +555,19 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   color: var(--paper, #fff);
 }
 
-/* freddie-chat font family (upstream still ships Nunito; brand is Space Grotesk). */
+/* freddie-chat font family (upstream still ships Nunito; brand is Inter). */
 .ds-247420 freddie-chat,
 .ds-247420 freddie-chat .chat-bubble,
 .ds-247420 freddie-chat .chat-meta,
 .ds-247420 freddie-chat .chat-head {
-  font-family: var(--ff-ui, 'Space Grotesk', system-ui, sans-serif);
+  font-family: var(--ff-ui, 'Inter', system-ui, sans-serif);
 }
 .ds-247420 freddie-chat .chat-bubble pre,
 .ds-247420 freddie-chat .chat-bubble code {
   font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
 }
 .ds-247420 freddie-chat .chat-head {
-  font-family: var(--ff-display, 'Space Grotesk', system-ui, sans-serif);
+  font-family: var(--ff-display, 'Inter', system-ui, sans-serif);
   font-weight: 700;
 }