anentrypoint-design 0.0.310 → 0.0.312

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.310",
+  "version": "0.0.312",
   "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,9 +531,20 @@ 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);
+        }
     });
+    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, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {

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' },