anentrypoint-design 0.0.345 → 0.0.347

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.345",
+  "version": "0.0.347",
   "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

@@ -223,6 +223,7 @@ export function AgentChat(props = {}) {
     installHint, exportActions = [],
     onPasteFiles, onDropFiles, onEmoji,
     shownMessages, onShowEarlier,
+    streamingSince, detectAttachment,
     // Optional inline content viewer beside the thread (a docstudio-cue
     // addition: its chat view keeps a live document/PDF preview open next to
     // the conversation instead of forcing a separate tab/window). The host
@@ -411,6 +412,8 @@ export function AgentChat(props = {}) {
     onPasteFiles,
     onDropFiles,
     onEmoji,
+    streamingSince,
+    detectAttachment,
   });
 
   // Contextual follow-up chips below the last SETTLED assistant turn (claude.ai/

package/src/components/chat.js

@@ -241,7 +241,44 @@ export function flashComposerNote(composerEl, text) {
     showNext();
 }
 
-export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy, placeholder = 'message…', disabled, disabledReason, label, context, onPasteFiles, onDropFiles }) {
+// Cached once per session: coarse-pointer (touch/no-hover) devices get a
+// newline on Enter instead of send (mirrors the one-time-cache pattern
+// editor-primitives.js uses for its own pointer/matchMedia checks).
+let _coarsePointerCache = null;
+function isCoarsePointer() {
+    if (_coarsePointerCache != null) return _coarsePointerCache;
+    _coarsePointerCache = !!(typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(pointer: coarse)').matches);
+    return _coarsePointerCache;
+}
+
+// m:ss elapsed-time formatter for the streaming counter.
+function fmtElapsedMs(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    const m = Math.floor(total / 60);
+    const s = total % 60;
+    return m + ':' + String(s).padStart(2, '0');
+}
+
+// A small ticking `m:ss` counter, keyed off the streamingSince timestamp so a
+// parent re-render does not reset the interval — the ref only (re)starts the
+// interval when the timestamp actually changes, and clears it when streaming
+// goes false or the node unmounts.
+function ChatComposerElapsed({ streamingSince }) {
+    return h('span', {
+        class: 'chat-composer-elapsed', role: 'status', 'aria-live': 'off',
+        ref: (el) => {
+            if (!el) return;
+            if (el._dsElapsedTimer && el._dsElapsedSince === streamingSince) return; // already ticking for this timestamp
+            if (el._dsElapsedTimer) clearInterval(el._dsElapsedTimer);
+            el._dsElapsedSince = streamingSince;
+            const tick = () => { el.textContent = fmtElapsedMs(Date.now() - streamingSince); };
+            tick();
+            el._dsElapsedTimer = setInterval(tick, 1000);
+        },
+    });
+}
+
+export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy, placeholder = 'message…', disabled, disabledReason, label, context, onPasteFiles, onDropFiles, streamingSince, detectAttachment }) {
     // 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
@@ -280,9 +317,46 @@ export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy,
         }
     };
     let autoGrowScheduled = false;
+    // detectAttachment(text) -> {type,label,id}|null runs on every input change;
+    // the badge above the textarea shows/clears based on its result, and clears
+    // outright when the textarea empties (mirrors the dismissible-badge pattern
+    // via a DOM-owned dismissed flag so a re-render with the same detection
+    // doesn't resurrect a badge the user just dismissed).
+    const updateDetectedBadge = (composerEl, text) => {
+        if (!composerEl) return;
+        let badge = composerEl.querySelector('.chat-composer-detected-badge');
+        const detected = (text && detectAttachment) ? detectAttachment(text) : null;
+        if (!detected) {
+            if (badge) badge.remove();
+            composerEl._dsDetectedId = null;
+            return;
+        }
+        if (composerEl._dsDismissedId === detected.id) return; // user dismissed this exact detection
+        if (composerEl._dsDetectedId === detected.id && badge) return; // unchanged
+        composerEl._dsDetectedId = detected.id;
+        if (!badge) {
+            badge = document.createElement('div');
+            badge.className = 'chat-composer-detected-badge';
+            badge.setAttribute('role', 'status');
+            composerEl.insertBefore(badge, composerEl.firstChild);
+        }
+        badge.textContent = '';
+        const label = document.createElement('span');
+        label.className = 'chat-composer-detected-label';
+        label.textContent = detected.label;
+        badge.appendChild(label);
+        const dismiss = document.createElement('button');
+        dismiss.type = 'button';
+        dismiss.className = 'chat-composer-detected-dismiss';
+        dismiss.setAttribute('aria-label', 'dismiss ' + detected.label);
+        dismiss.textContent = 'x';
+        dismiss.onclick = (e) => { e.preventDefault(); composerEl._dsDismissedId = detected.id; badge.remove(); };
+        badge.appendChild(dismiss);
+    };
     const autoGrow = (e) => {
         const ta = e.target;
         if (onInput) onInput(ta.value);
+        if (detectAttachment) updateDetectedBadge(ta.closest('.chat-composer'), ta.value);
         // Debounce scrollHeight read with rAF to prevent sync reflow thrashing
         if (!autoGrowScheduled) {
             autoGrowScheduled = true;
@@ -306,6 +380,7 @@ export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy,
         el.style.height = 'auto';
         const cap = parseFloat(getComputedStyle(el).maxHeight) || 200;
         el.style.height = Math.min(el.scrollHeight, cap) + 'px';
+        if (detectAttachment) updateDetectedBadge(el.closest('.chat-composer'), next);
     };
     // Optional context line shown above the textarea: agent / model / cwd at the
     // point of typing (the way Claude-Desktop surfaces the active target inline).
@@ -418,13 +493,18 @@ export function ChatComposer({ value, onInput, onSend, onEmoji, onCancel, busy,
                 }
                 // IME guard: the Enter that commits a CJK composition must never
                 // send (isComposing; keyCode 229 covers older engines).
-                if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229) { e.preventDefault(); send(); }
+                // Coarse-pointer (touch) devices get a newline on Enter instead of
+                // send — there is no keyboard shortcut discoverability benefit on
+                // touch, and Enter-to-send is a frequent accidental-send source on
+                // phones/tablets where "Tap Send to send" is the predictable model.
+                if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229 && !isCoarsePointer()) { e.preventDefault(); send(); }
                 if (e.key === ';' && e.ctrlKey) { e.preventDefault(); onEmoji && onEmoji(e); }
             } }),
         // Enter-to-send affordance (Claude-Desktop style): a muted hint visible
         // at rest so it's discoverable without focusing the composer first;
         // hidden under 420px (CSS) to save rows. Middot is kept product typography.
-        h('div', { class: 'chat-composer-hint' }, 'Enter to send · Shift+Enter for a new line'),
+        h('div', { class: 'chat-composer-hint' }, isCoarsePointer() ? 'Tap Send to send' : 'Enter to send · Shift+Enter for a new line'),
+        (busy && streamingSince) ? ChatComposerElapsed({ streamingSince }) : null,
         h('div', { class: 'chat-composer-toolbar' },
             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,
             busy && onCancel

package/src/components/files-modals.js

@@ -231,6 +231,46 @@ export function PromptDialog({ title = 'Enter a name', value = '', placeholder =
     });
 }
 
+// CountdownDialog — a modal with a role=status line ticking down from
+// `seconds` to 0 once per second, auto-firing onExpire at zero. Composes on
+// top of the same Modal() shell ConfirmDialog/PromptDialog use, so it
+// inherits Backdrop's focus-trap + Escape/backdrop-dismiss handling for free
+// rather than reimplementing dialog plumbing.
+export function CountdownDialog({ title = 'Are you sure?', message, seconds = 10, onExpire, actions } = {}) {
+    const startSeconds = Math.max(0, Math.floor(seconds));
+    return Modal({
+        onClose: undefined, // no implicit dismiss path unless the caller supplies one via `actions`
+        kind: 'small',
+        head: title,
+        body: [
+            message || '',
+            h('p', {
+                class: 'ds-countdown-status', role: 'status', 'aria-live': 'polite',
+                ref: (el) => {
+                    if (!el || el._dsCountdownTimer) return;
+                    let remaining = startSeconds;
+                    const render = () => { el.textContent = remaining + (remaining === 1 ? ' second' : ' seconds') + ' remaining'; };
+                    render();
+                    el._dsCountdownTimer = setInterval(() => {
+                        remaining -= 1;
+                        if (remaining <= 0) {
+                            clearInterval(el._dsCountdownTimer);
+                            el._dsCountdownTimer = null;
+                            remaining = 0;
+                            render();
+                            if (onExpire) onExpire();
+                            return;
+                        }
+                        render();
+                    }, 1000);
+                },
+            }),
+            modalError(null),
+        ].filter(Boolean),
+        actions: actions || [],
+    });
+}
+
 export function FilePreviewMedia({ src, type = 'other', name } = {}) {
     if (type === 'image') {
         // Fit-to-pane (default) vs actual-size (1:1) toggle + a checkerboard so

package/src/components/overlay-primitives.js

@@ -239,6 +239,82 @@ export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-st
         : h('button', { type: 'button', class: 'ds-dropdown-trigger', ref: refFn }, child || 'Menu');
 }
 
+// PermissionMenu — a role=menu of role=menuitemcheckbox rows, one per
+// category, with roving tabindex + Arrow-up/down/Home/End navigation and
+// Escape-closes-and-restores-focus, plus "Approve all"/"Revoke all" actions.
+// Mirrors Dropdown's own open/close + outside-click wiring (a portaled menu
+// element, a document-level mousedown listener, focus restored to the
+// trigger on close) rather than reimplementing that plumbing.
+export function PermissionMenu({ trigger, categories = [], approved = [], onToggle, onToggleAll, placement = 'bottom-start', ariaLabel = 'Permissions' } = {}) {
+    let triggerEl = null, open = false, menuEl = null, floating = null;
+    const isApproved = (id) => approved.indexOf(id) !== -1;
+    const liveItems = () => menuEl ? [...menuEl.querySelectorAll('[role="menuitemcheckbox"]')] : [];
+    const focusItem = (idx) => { const items = liveItems(); if (!items.length) return; items[((idx % items.length) + items.length) % items.length].focus(); };
+    const onDown = (e) => { if (menuEl && menuEl.contains(e.target)) return; if (triggerEl && triggerEl.contains(e.target)) return; close(false); };
+    const close = (restore = true) => {
+        if (!open) return; open = false;
+        if (floating) { floating.dispose(); floating = null; }
+        if (menuEl && menuEl.parentNode) menuEl.parentNode.removeChild(menuEl);
+        menuEl = null;
+        document.removeEventListener('mousedown', onDown, true);
+        if (triggerEl) triggerEl.setAttribute('aria-expanded', 'false');
+        if (restore && triggerEl) triggerEl.focus();
+    };
+    const toggle = (cat) => { if (onToggle) onToggle(cat.id, !isApproved(cat.id)); };
+    const onMenuKey = (e) => {
+        const items = liveItems(), idx = items.indexOf(document.activeElement);
+        if (e.key === 'Escape') { e.preventDefault(); close(); }
+        else if (e.key === 'ArrowDown') { e.preventDefault(); focusItem(idx + 1); }
+        else if (e.key === 'ArrowUp') { e.preventDefault(); focusItem(idx - 1); }
+        else if (e.key === 'Home') { e.preventDefault(); focusItem(0); }
+        else if (e.key === 'End') { e.preventDefault(); focusItem(items.length - 1); }
+        else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (idx >= 0) items[idx].click(); }
+    };
+    const renderMenu = () => {
+        const rows = categories.map((cat, i) => h('button', {
+            key: cat.id || i, type: 'button', role: 'menuitemcheckbox',
+            'aria-checked': isApproved(cat.id) ? 'true' : 'false',
+            class: 'ov-perm-item' + (isApproved(cat.id) ? ' is-approved' : ''),
+            tabindex: '-1',
+            onclick: () => toggle(cat),
+        }, h('span', { class: 'ov-perm-label' }, cat.label || cat.id)));
+        const actionsRow = h('div', { class: 'ov-perm-actions' },
+            h('button', { type: 'button', class: 'ov-perm-action', onclick: () => onToggleAll && onToggleAll(true) }, 'Approve all'),
+            h('button', { type: 'button', class: 'ov-perm-action', onclick: () => onToggleAll && onToggleAll(false) }, 'Revoke all'));
+        return h('div', { class: 'ov-perm-list' }, ...rows, actionsRow);
+    };
+    const openMenu = (focusFirst = true) => {
+        if (open || !triggerEl) return;
+        open = true;
+        menuEl = document.createElement('div');
+        menuEl.className = 'ds-popover ov-perm-menu';
+        menuEl.setAttribute('role', 'menu');
+        menuEl.setAttribute('aria-label', ariaLabel);
+        menuEl.tabIndex = -1;
+        webjsx.applyDiff(menuEl, renderMenu());
+        document.body.appendChild(menuEl);
+        menuEl.addEventListener('keydown', onMenuKey);
+        floating = useFloating(triggerEl, menuEl, { placement, offset: FLOAT_OFFSET_DROPDOWN });
+        document.addEventListener('mousedown', onDown, true);
+        triggerEl.setAttribute('aria-expanded', 'true');
+        if (focusFirst) queueMicrotask(() => focusItem(0));
+    };
+    const onTrigClick = () => { if (open) close(false); else openMenu(true); };
+    const onTrigKey = (e) => { if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!open) openMenu(true); else focusItem(0); } };
+    const refFn = (el) => {
+        if (!el || el._dsPermMenu) return;
+        el._dsPermMenu = true; triggerEl = el;
+        el.addEventListener('click', onTrigClick);
+        el.addEventListener('keydown', onTrigKey);
+        el.setAttribute('aria-haspopup', 'menu');
+        el.setAttribute('aria-expanded', 'false');
+    };
+    const child = (typeof trigger === 'function') ? trigger() : trigger;
+    return (child && child.type)
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: refFn }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ov-perm-trigger', ref: refFn }, child || 'Permissions');
+}
+
 // Clamp a fixed-position box to the viewport given desired top-left coords.
 function _clampToViewport(x, y, w, h, margin = CLAMP_MARGIN) {
     const vw = (typeof window !== 'undefined' ? window.innerWidth : 1024);

package/src/components.js

@@ -40,7 +40,7 @@ export {
 } from './components/files.js';
 
 export {
-    ConfirmDialog, PromptDialog,
+    ConfirmDialog, PromptDialog, CountdownDialog,
     FilePreviewMedia, FilePreviewCode, FilePreviewText, FileViewer, FilePreviewPane
 } from './components/files-modals.js';
 
@@ -90,7 +90,7 @@ export {
 export {
     Tooltip, Popover, Dropdown, useLongPress, useFloating,
     CommandPalette, EmojiPicker, BootOverlay, SettingsPopover,
-    AuthModal, VideoLightbox
+    AuthModal, VideoLightbox, PermissionMenu
 } from './components/overlay-primitives.js';
 
 export {