anentrypoint-design 0.0.361 → 0.0.362

package/package.json

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

@@ -241,6 +241,31 @@ export function flashComposerNote(composerEl, text) {
     showNext();
 }
 
+// ChatSuggestions — centered blank-thread heading + subtext + a wrapped row
+// of prompt chips that fill the composer textarea on click and auto-dismiss
+// on first send. Ported from docstudio's empty-state composer-priming CTA
+// (distinct from a generic list EmptyState: this exists to seed a first
+// message, not to describe an empty list). `onPick(prompt, item)` is the
+// caller's single hook — the component does not touch the composer DOM
+// itself, so the host decides how "fill the composer" actually happens.
+// A rapid double-click on the same chip (or a click racing the first send)
+// is guarded by a one-shot `_picked` flag: only the first click of any kind
+// dispatches onPick, so the composer is never filled twice and the chips
+// never reappear having already been "used".
+export function ChatSuggestions({ heading = 'What can I help with?', subtext = '', suggestions = [] } = {}) {
+    let picked = false;
+    return h('div', { class: 'chat-suggestions', role: 'group', 'aria-label': heading },
+        h('h2', { class: 'chat-suggestions-heading' }, heading),
+        subtext ? h('p', { class: 'chat-suggestions-subtext' }, subtext) : null,
+        h('div', { class: 'chat-suggestions-list' },
+            ...suggestions.map((s, i) => h('button', {
+                key: s.id || i, type: 'button', class: 'chat-suggestions-chip',
+                onclick: () => { if (picked) return; picked = true; s.onPick ? s.onPick(s) : null; }
+            }, s.label))
+        )
+    );
+}
+
 // 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).

package/src/components/editor-primitives.js

@@ -918,3 +918,75 @@ export function Divider({ label, vertical = false, key } = {}) {
     return h('div', { key, class: 'ds-ep-divider ds-ep-divider-labeled', role: 'separator' },
         h('span', { class: 'ds-ep-divider-label' }, label));
 }
+
+// ---------------------------------------------------------------------------
+// InfoRow / InfoSection / DiagnosticsPanel — static debug/system-info
+// readouts: a bordered section of label + monospace-value rows. Ported from
+// docstudio's diagnostics page (auth/streaming/service-worker state, recent
+// client errors, environment facts). Distinct from PropertyGrid, which is
+// for EDITABLE properties — these rows are read-only display, never inputs.
+// `data == null` (not yet loaded) renders a loading placeholder row instead
+// of an empty section, so a panel never flashes an empty bordered box before
+// its first data arrives; `onRefresh` renders a trailing refresh button that
+// reuses the section's own header row rather than shifting layout beneath it.
+// ---------------------------------------------------------------------------
+export function InfoRow({ label, value, key } = {}) {
+    return h('div', { key, class: 'ds-ep-inforow' },
+        h('span', { class: 'ds-ep-inforow-label' }, label),
+        h('span', { class: 'ds-ep-inforow-value' }, value == null || value === '' ? '—' : String(value)));
+}
+
+export function InfoSection({ title, rows, key } = {}) {
+    const children = [
+        title ? h('h3', { key: 'title', class: 'ds-ep-infosection-title' }, title) : null,
+        rows == null
+            ? h('div', { key: 'body-loading', class: 'ds-ep-infosection-loading', role: 'status' }, 'Loading…')
+            : h('div', { key: 'body-rows', class: 'ds-ep-infosection-rows' }, ...rows.map((r, i) => InfoRow({ ...r, key: r.key != null ? r.key : i })))
+    ].filter(Boolean);
+    return h('section', { key, class: 'ds-ep-infosection' }, ...children);
+}
+
+export function DiagnosticsPanel({ title = 'Diagnostics', sections = [], onRefresh, refreshing = false, key } = {}) {
+    const headChildren = [
+        h('h2', { key: 'title', class: 'ds-ep-diagnostics-title' }, title),
+        onRefresh ? h('button', {
+            key: 'refresh', type: 'button', class: 'ds-ep-diagnostics-refresh', disabled: refreshing, 'aria-busy': refreshing ? 'true' : 'false',
+            onclick: () => onRefresh()
+        }, refreshing ? 'Refreshing…' : 'Refresh') : null
+    ].filter(Boolean);
+    return h('div', { key, class: 'ds-ep-diagnostics' },
+        h('div', { key: 'head', class: 'ds-ep-diagnostics-head' }, ...headChildren),
+        ...sections.map((s, i) => InfoSection({ ...s, key: s.key || i }))
+    );
+}
+
+// ---------------------------------------------------------------------------
+// BatchProgressLabel — sequential batch-operation progress readout: "label
+// (i/n)" while in flight. Ported from docstudio's sequential upload badge
+// and bulk-action progress button (both show a live count against a total
+// while processing one item at a time). Pure display — the host owns the
+// actual queue/loop; this only renders its current {done, total} state.
+// done === 0 renders the bare label with no count suffix (nothing has
+// happened yet); done === total renders as complete with no live-region
+// churn once settled.
+// ---------------------------------------------------------------------------
+export function BatchProgressLabel({ label = 'Processing', done = 0, total = 0, key } = {}) {
+    const inFlight = total > 0 && done < total;
+    const suffix = total > 0 ? ` (${done}/${total})` : '';
+    return h('span', { key, class: 'ds-ep-batchprogress', role: 'status', 'aria-live': inFlight ? 'polite' : 'off' },
+        label + suffix);
+}
+
+// formatBatchOutcome — pure string helper for the aggregate toast shown once
+// a batch settles: "N/total succeeded" plus a truncated failed-name list
+// when any items failed, matching docstudio's attach-bar/bulk-action
+// aggregation copy. Handles all three outcome shapes (all-succeed, all-fail,
+// partial) and truncates a long failed-name list ("...and N more") instead
+// of growing the toast unboundedly for a big batch.
+export function formatBatchOutcome({ succeeded = 0, total = 0, failedNames = [], maxNames = 3 } = {}) {
+    if (total === 0) return '';
+    if (failedNames.length === 0) return `${succeeded}/${total} succeeded`;
+    const shown = failedNames.slice(0, maxNames).join(', ');
+    const more = failedNames.length > maxNames ? ` and ${failedNames.length - maxNames} more` : '';
+    return `${succeeded}/${total} succeeded; failed: ${shown}${more}`;
+}

package/src/components/overlay-primitives.js

@@ -789,6 +789,97 @@ export function AuthModal({ mode = 'extension', error = '', busy = false, open =
     );
 }
 
+// MenuButton — icon-trigger select menu: one option carries a checkmark
+// (the active selection), roving keyboard nav mirrors Dropdown's own
+// open/close/outside-click/typeahead wiring, plus a stale/unavailable
+// per-item state that renders as a muted "unavailable — retry" row instead
+// of a normal selectable item (ported from docstudio's model-picker menu,
+// which shows a retry affordance when its option list fails to load).
+// Zero-option and single-option lists degrade gracefully: an empty list
+// renders a static "No options available" row (no crash, no keyboard trap,
+// nothing focusable); roving nav on a single-option list simply refocuses
+// the same item on every Arrow press (wrap-to-self), never throws.
+export function MenuButton({ trigger, items = [], selected, onSelect, onRetry, placement = 'bottom-start', ariaLabel = 'Menu', emptyText = 'No options available' } = {}) {
+    let triggerEl = null, open = false, menuEl = null, floating = null, typeBuf = '', typeTimer = null;
+    const liveBtns = () => menuEl ? [...menuEl.querySelectorAll('[role="menuitemradio"]:not([aria-disabled="true"])')] : [];
+    const focusItem = (idx) => { const b = liveBtns(); if (!b.length) return; b[((idx % b.length) + b.length) % b.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 select = (it) => { if (it.disabled || it.unavailable) return; if (onSelect) onSelect(it.id, it); close(); };
+    const onMenuKey = (e) => {
+        const b = liveBtns(), idx = b.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(b.length - 1); }
+        else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (idx >= 0) b[idx].click(); }
+        else if (e.key.length === 1 && /\S/.test(e.key)) {
+            typeBuf += e.key.toLowerCase();
+            if (typeTimer) clearTimeout(typeTimer);
+            typeTimer = setTimeout(() => { typeBuf = ''; }, 600);
+            const m = items.findIndex(it => !it.disabled && !it.unavailable && (it.label || '').toLowerCase().startsWith(typeBuf));
+            if (m >= 0) focusItem(items.slice(0, m).filter(it => !it.disabled && !it.unavailable).length);
+        }
+    };
+    const openMenu = (focusFirst = true) => {
+        if (open || !triggerEl) return;
+        open = true;
+        menuEl = document.createElement('div');
+        menuEl.className = 'ds-popover ov-menubutton-menu';
+        menuEl.setAttribute('role', 'menu');
+        menuEl.setAttribute('aria-label', ariaLabel);
+        menuEl.tabIndex = -1;
+        const tree = items.length
+            ? h('div', { class: 'ov-menubutton-list' },
+                ...items.map((it, i) => it.unavailable
+                    ? h('div', { key: it.id || i, class: 'ov-menubutton-item is-unavailable' },
+                        h('span', { class: 'ov-menubutton-label' }, it.label || 'Unavailable'),
+                        h('button', { type: 'button', class: 'ov-menubutton-retry', onclick: () => onRetry && onRetry(it.id, it) }, 'Retry')
+                    )
+                    : h('button', {
+                        key: it.id || i, type: 'button', role: 'menuitemradio',
+                        'aria-checked': it.id === selected ? 'true' : 'false',
+                        class: 'ov-menubutton-item' + (it.disabled ? '' : ''),
+                        'aria-disabled': it.disabled ? 'true' : 'false',
+                        tabindex: '-1', onclick: () => select(it),
+                    },
+                        h('span', { class: 'ov-menubutton-check', 'aria-hidden': 'true' }, it.id === selected ? Icon('check', { size: 14 }) : ''),
+                        h('span', { class: 'ov-menubutton-label' }, it.label)
+                    )))
+            : h('div', { class: 'ov-menubutton-empty' }, emptyText);
+        webjsx.applyDiff(menuEl, tree);
+        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 && items.length) 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._ovMenuButton) return;
+        el._ovMenuButton = 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-menubutton-trigger', ref: refFn }, child || 'Select');
+}
+
 // VideoLightbox — fullscreen video player overlay with backdrop dismiss.
 export function VideoLightbox({ src, label = '', open = false, onClose } = {}) {
     if (!open || !src) return null;

package/src/components.js

@@ -21,7 +21,7 @@ export {
 
 export {
     fmtBytes, renderInline, hasSelectionInside,
-    ChatMessage, ChatComposer, Chat, flashComposerNote,
+    ChatMessage, ChatComposer, Chat, flashComposerNote, ChatSuggestions,
     AICAT_FACE, AICatPortrait, AICat
 } from './components/chat.js';
 
@@ -95,13 +95,16 @@ export {
     Collapse, CollapseGroup,
     Divider,
     useMediaQuery,
-    BP_SM, BP_MD, BP_LG, BP_XL
+    BP_SM, BP_MD, BP_LG, BP_XL,
+    InfoRow, InfoSection, DiagnosticsPanel,
+    BatchProgressLabel, formatBatchOutcome
 } from './components/editor-primitives.js';
 
 export {
     Tooltip, Popover, Dropdown, useLongPress, useFloating,
     CommandPalette, EmojiPicker, BootOverlay, SettingsPopover,
-    AuthModal, VideoLightbox, PermissionMenu, ApprovalPrompt, withBusy
+    AuthModal, VideoLightbox, PermissionMenu, ApprovalPrompt, withBusy,
+    MenuButton
 } from './components/overlay-primitives.js';
 
 export {