anentrypoint-design 0.0.311 → 0.0.313

package/package.json

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

@@ -161,7 +161,7 @@ export function AgentChat(props = {}) {
     avatar, composerContext,
     followups = [], onFollowupClick,
     installHint, exportActions = [],
-    onPasteFiles, onDropFiles,
+    onPasteFiles, onDropFiles, onEmoji,
     shownMessages, onShowEarlier,
   } = props;
 
@@ -335,6 +335,7 @@ export function AgentChat(props = {}) {
     // navigates away from a live session.
     onPasteFiles,
     onDropFiles,
+    onEmoji,
   });
 
   // Contextual follow-up chips below the last SETTLED assistant turn (claude.ai/

package/src/components/chat.js

@@ -477,7 +477,7 @@ function flashComposerNote(composerEl, text) {
     note._dsNoteTimer = setTimeout(() => { note.remove(); }, 2600);
 }
 
-export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled, disabledReason, label, context, onPasteFiles, onDropFiles }) {
+export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy, placeholder = 'message…', disabled, disabledReason, label, context, onPasteFiles, onDropFiles }) {
     // Keep a handle to the live textarea so send() reads the actual DOM value
     // (not the possibly-lagging `value` prop) and so we can sync the DOM value
     // only when it genuinely differs — re-applying `value` on every parent
@@ -644,9 +644,7 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         // (CSS) to save rows. Middot is kept product typography.
         h('div', { class: 'chat-composer-hint', 'aria-hidden': 'true' }, 'Enter to send · Shift+Enter for a new line'),
         h('div', { class: 'chat-composer-toolbar' },
-            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,
             busy && onCancel
                 ? h('button', { type: 'button', class: 'send cancel', onclick: (e) => { e.preventDefault(); onCancel(e); }, 'aria-label': 'stop generating', title: 'stop generating (Esc)' }, Icon('square'))
                 : h('button', { type: 'button', class: 'send', disabled: disabled || !(value && value.trim()), onclick: send,

package/src/components/content.js

@@ -521,9 +521,9 @@ export function PageHeader({ title, lede, eyebrow, right, compact, dense, id })
     );
 }
 
-export function SearchInput({ value = '', placeholder = 'search…', onInput, onSubmit, name = 'q', key, label }) {
-    return h('input', {
-        key,
+export function SearchInput({ value = '', placeholder = 'search…', onInput, onSubmit, name = 'q', key, label, resultCount }) {
+    const input = h('input', {
+        key: 'i',
         type: 'search',
         name,
         class: 'ds-search-input',
@@ -531,12 +531,26 @@ export function SearchInput({ value = '', placeholder = 'search…', onInput, on
         'aria-label': label || placeholder,
         value,
         oninput: onInput ? (e) => onInput(e.target.value, e) : null,
-        // IME guard: the Enter that commits a CJK composition must not submit.
-        onkeydown: onSubmit ? (e) => { if (e.key === 'Enter' && !e.isComposing && e.keyCode !== 229) onSubmit(e.target.value, e); } : null
+        onkeydown: (e) => {
+            // Escape clears the field in place (stays focused) rather than
+            // falling through to whatever ancestor Escape handler exists.
+            if (e.key === 'Escape' && value) { e.preventDefault(); e.stopPropagation(); if (onInput) onInput('', e); return; }
+            // IME guard: the Enter that commits a CJK composition must not submit.
+            if (onSubmit && e.key === 'Enter' && !e.isComposing && e.keyCode !== 229) onSubmit(e.target.value, e);
+        }
     });
-}
-
-export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4, maxLength, min, max, error, title, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {
+    if (resultCount == null) return input;
+    // Visually-hidden live region announces the result count as it changes,
+    // without changing SearchInput's return shape for callers that don't pass it.
+    return h('span', { key, class: 'ds-search-input-wrap' },
+        input,
+        h('span', { key: 'cnt', class: 'sr-only', role: 'status', 'aria-live': 'polite' }, resultCount));
+}
+
+export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4, maxLength, min, max, error, title, size = 'md', 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {
+    // size: 'sm' | 'md' | 'lg' — md is the base .ds-field control; sm/lg add a
+    // wrapper modifier that snaps the control height/padding/font to --ctl-*.
+    const sizeCls = size === 'sm' ? ' ds-field--sm' : (size === 'lg' ? ' ds-field--lg' : '');
     const errorId = error != null ? ((key ? key : 'tf') + '-err') : null;
     const describedBy = ariaDescribedBy || errorId || null;
     const input = multiline
@@ -562,7 +576,7 @@ export function TextField({ label, value = '', type = 'text', placeholder = '',
             oninput: onInput ? (e) => onInput(e.target.value, e) : null,
             onchange: onChange ? (e) => onChange(e.target.value, e) : null
         });
-    return h('label', { key, class: 'ds-field' },
+    return h('label', { key, class: 'ds-field' + sizeCls },
         ...[
             label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
             input,
@@ -573,7 +587,8 @@ export function TextField({ label, value = '', type = 'text', placeholder = '',
     );
 }
 
-export function Select({ label, value = '', options = [], onChange, name, key, placeholder, hint, title, 'aria-label': ariaLabel }) {
+export function Select({ label, value = '', options = [], onChange, name, key, placeholder, hint, title, size = 'md', 'aria-label': ariaLabel }) {
+    const sizeCls = size === 'sm' ? ' ds-field--sm' : (size === 'lg' ? ' ds-field--lg' : '');
     const opts = [];
     if (placeholder != null) opts.push(h('option', { key: '_ph', value: '', disabled: true, selected: value === '' || value == null }, placeholder));
     for (const o of options) {
@@ -588,8 +603,9 @@ export function Select({ label, value = '', options = [], onChange, name, key, p
         title,
         onchange: onChange ? (e) => onChange(e.target.value, e) : null
     }, ...opts);
-    if (label == null && hint == null) return select;
-    return h('label', { key, class: 'ds-field' },
+    if (label == null && hint == null && size === 'md') return select;
+    if (label == null && hint == null) return h('label', { key, class: 'ds-field' + sizeCls }, select);
+    return h('label', { key, class: 'ds-field' + sizeCls },
         label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
         select,
         hint != null ? h('span', { key: 'h', class: 'ds-field-hint' }, hint) : null

package/src/components/editor-primitives.js

@@ -53,7 +53,30 @@ export function Tabs({ items = [], active, onChange, children, 'aria-label': ari
             if (btn) btn.focus();
         });
     };
-    return h('div', { class: 'ds-ep-tabs' },
+    // Position the sliding underline from the active tab's geometry. The ref is
+    // on the OUTER .ds-ep-tabs (position:relative) — the indicator is its child,
+    // NOT the flex head's (an abspos child of a horizontal flex row mis-sizes to
+    // 0 in Chromium). Runs on every render (ref fires after applyDiff) so a tab
+    // change re-measures; the CSS transition animates the move. left/width come
+    // from the active tab; top sits the bar on the head's bottom edge.
+    const positionSlider = (root) => {
+        if (!root) return;
+        const head = root.querySelector('.ds-ep-tabs-head');
+        const active = root.querySelector('.ds-ep-tab.active');
+        const ind = root.querySelector('.ds-ep-tab-indicator');
+        if (!head || !active || !ind) return;
+        // Size via left+right insets, NOT width: an abspos element's inline
+        // `width` computes to 0 in some flex-sibling layouts (Chromium), but
+        // left+right insets size reliably. left/right animate via the CSS
+        // transition on .ds-ep-tab-indicator.
+        const rootW = root.offsetWidth;
+        const l = active.offsetLeft, w = active.offsetWidth;
+        ind.style.left = l + 'px';
+        ind.style.right = Math.max(0, rootW - l - w) + 'px';
+        ind.style.top = (head.offsetTop + head.offsetHeight - 2) + 'px';
+        head.classList.add('has-slider');
+    };
+    return h('div', { class: 'ds-ep-tabs', ref: positionSlider },
         h('div', { class: 'ds-ep-tabs-head', role: 'tablist', 'aria-label': ariaLabel || 'tabs' },
             ...items.map((it, idx) => h('button', {
                 key: it.id,
@@ -69,6 +92,9 @@ export function Tabs({ items = [], active, onChange, children, 'aria-label': ari
                 onkeydown: (e) => onTabKeyDown(e, idx)
             }, it.label))
         ),
+        // The sliding underline — child of the outer column (see positionSlider).
+        // Keyed + decorative. Renders at 0-width until positioned (no-JS: hidden).
+        h('span', { key: '__ind', class: 'ds-ep-tab-indicator', 'aria-hidden': 'true' }),
         h('div', {
             class: 'ds-ep-tabs-body',
             role: 'tabpanel',

package/src/components/files.js

@@ -277,13 +277,25 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
     // One toolbar baseline: filter + select-all + sort sit left, density is
     // pushed right by the spread. The filter used to be a separate right-aligned
     // strip ABOVE controls, giving two strips with conflicting alignment.
-    const filterCtl = filter ? h('input', {
-        key: 'filter',
-        class: 'ds-file-filter-input', type: 'search',
-        value: filter.value || '', placeholder: filter.placeholder || 'Filter files',
-        'aria-label': filter.placeholder || 'Filter files in this directory',
-        oninput: (e) => filter.onInput && filter.onInput(e.target.value),
-    }) : null;
+    const filterCtl = filter ? h('span', { key: 'filterwrap', class: 'ds-file-filter-wrap' },
+        h('input', {
+            key: 'filter',
+            class: 'ds-file-filter-input', type: 'search',
+            value: filter.value || '', placeholder: filter.placeholder || 'Filter files',
+            'aria-label': filter.placeholder || 'Filter files in this directory',
+            oninput: (e) => filter.onInput && filter.onInput(e.target.value),
+            onkeydown: (e) => {
+                if (e.key === 'Escape' && filter.value) { e.preventDefault(); e.stopPropagation(); filter.onInput && filter.onInput(''); }
+            },
+        }),
+        // Announces the filtered count as the filter narrows the list, so a
+        // screen-reader user gets the same feedback a sighted user reads off
+        // the grid without having to re-scan it after every keystroke. `files`
+        // here is already the host's filter-applied set (see hasFilter above) -
+        // there is no separate pre-filter total available inside this component.
+        h('span', { key: 'filtercount', class: 'sr-only', role: 'status', 'aria-live': 'polite' },
+            hasFilter ? files.length + (files.length === 1 ? ' file' : ' files') + ' shown' : '')
+    ) : null;
     const leftKids = [filterCtl, selectAllCtl, head].filter(Boolean);
     const controlsKids = [
         ...leftKids,

package/src/components/sessions.js

@@ -35,7 +35,12 @@ export function fmtDuration(ms) {
 export function ConversationList({ sessions = [], selected, groups, search, caption,
                                    onSelect, onNew, newLabel = 'New chat',
                                    emptyText = 'No conversations yet', loading = false, error = null,
-                                   loadingText = 'Loading conversations…' } = {}) {
+                                   loadingText = 'Loading conversations…',
+                                   // hasMore/onLoadMore: the rail's host truncates the underlying
+                                   // session list at some limit (a 200+ conversation user would
+                                   // otherwise never reach older sessions) - mirrors the History
+                                   // tab's existing "load N older" EventList pattern.
+                                   hasMore = false, onLoadMore, loadMoreLabel = 'load more conversations' } = {}) {
   const rowFor = (s, i) => h('div', {
     // Stable key: prefer sid, else position - a missing/duplicate sid would make
     // key undefined and crash webjsx applyDiff ("reading 'key'" of undefined).
@@ -97,7 +102,14 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
   } else {
     inner = sessions.map(rowFor);
   }
-  const body = h('div', { key: 'body', class: 'ds-session-list', role: 'listbox', 'aria-label': caption || 'Conversations' }, ...inner);
+  // The load-more row sits INSIDE the scrollable list body (not the outer
+  // .ds-sessions shell) so it scrolls with the rows it extends, matching
+  // where a user's eye already is after scrolling to the bottom of the rail.
+  const loadMoreRow = (hasMore && onLoadMore && sessions.length)
+    ? h('button', { key: 'loadmore', type: 'button', class: 'ds-session-loadmore', onclick: onLoadMore }, loadMoreLabel)
+    : null;
+  const body = h('div', { key: 'body', class: 'ds-session-list', role: 'listbox', 'aria-label': caption || 'Conversations' },
+    ...inner, loadMoreRow);
 
   return h('div', { class: 'ds-sessions' },
     h('div', { key: 'head', class: 'ds-session-head' },

package/src/components/shell.js

@@ -12,14 +12,22 @@ export function Brand({ name = '247420', leaf } = {}) {
         leaf || null);
 }
 
-export function Chip({ tone = '', children }) {
-    return h('span', { class: 'chip' + (tone ? ' tone-' + tone : '') }, children);
+export function Chip({ tone = '', size = 'md', tag = false, children }) {
+    // size: 'sm' | 'md' | 'lg'; tag=true -> rectangular sentence-case variant
+    // for dense data (drops the all-caps pill). Both are orthogonal to tone.
+    const sizeCls = size === 'sm' ? ' chip--sm' : (size === 'lg' ? ' chip--lg' : '');
+    return h('span', { class: 'chip' + sizeCls + (tag ? ' chip--tag' : '') + (tone ? ' tone-' + tone : '') }, children);
 }
 
-export function Btn({ href, variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled, class: className, key }) {
+export function Btn({ href, variant = 'default', size = 'md', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled, class: className, key }) {
     // Support legacy primary/ghost props for backward compatibility, but prefer variant
     const resolvedVariant = variant !== 'default' ? variant : (primary ? 'primary' : (ghost ? 'ghost' : (danger ? 'danger' : 'default')));
+    // size: 'sm' | 'md' | 'lg' — md is the base .btn rule (no class); sm/lg add a
+    // modifier that snaps height/padding/font to the --ctl-* ladder. Unknown
+    // sizes fall back to md so a typo never drops the button's base styling.
+    const sizeCls = size === 'sm' ? ' btn-sm' : (size === 'lg' ? ' btn-lg' : '');
     const cls = (resolvedVariant === 'primary' ? 'btn-primary' : (resolvedVariant === 'ghost' ? 'btn-ghost' : (resolvedVariant === 'danger' ? 'btn-primary danger' : 'btn')))
+        + sizeCls
         + (disabled ? ' is-disabled' : '')
         + (className ? ' ' + className : '');
     const onclick = (e) => {
@@ -67,8 +75,10 @@ export function IconButton({ icon, onClick, title, size = 'base', variant = 'gho
     }, Glyph({ children: icon, size }));
 }
 
-export function Badge({ children, variant = 'default', tone = 'neutral' }) {
-    return h('span', { class: 'ds-badge ds-badge-' + variant + ' tone-' + tone }, children);
+export function Badge({ children, variant = 'default', tone = 'neutral', size = 'md' }) {
+    // size: 'sm' | 'md' | 'lg' — md is the base 18px badge.
+    const sizeCls = size === 'sm' ? ' ds-badge--sm' : (size === 'lg' ? ' ds-badge--lg' : '');
+    return h('span', { class: 'ds-badge ds-badge-' + variant + sizeCls + ' tone-' + tone }, children);
 }
 
 // Pill — plain non-interactive label chip for tag-like annotations (a phase