anentrypoint-design 0.0.339 → 0.0.341

package/package.json

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

@@ -15,6 +15,7 @@ import { ChatComposer, ChatMessage, makeThreadAutoScroll } from './chat.js';
 import { Select } from './content.js';
 import { Btn, Icon } from './shell.js';
 import { BreadcrumbPath } from './files.js';
+import { SplitPanel } from './editor-primitives.js';
 import { initializeCachesEagerly } from '../markdown-cache.js';
 
 const h = webjsx.createElement;
@@ -222,6 +223,14 @@ export function AgentChat(props = {}) {
     installHint, exportActions = [],
     onPasteFiles, onDropFiles, onEmoji,
     shownMessages, onShowEarlier,
+    // 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
+    // supplies the actual preview vnode (FilePreviewPane/FileViewer or
+    // anything else) - this component only owns the split layout + a close
+    // affordance. Omitting sidePanel keeps every existing caller's output
+    // byte-identical (no SplitPanel wrapper at all when absent).
+    sidePanel, sidePanelTitle = 'preview', onCloseSidePanel,
   } = props;
 
   // Warm the markdown/Prism stack the moment the surface mounts so the CDN
@@ -453,14 +462,25 @@ export function AgentChat(props = {}) {
           : null)
     : null;
 
-  return h('div', { class: 'agentchat' },
-    AgentControls({ agents, selectedAgent, models, selectedModel, busy, status, modelsLoading, agentsLoading,
-                    onSelectAgent, onSelectModel, onNewChat, onStop, exportActions }),
-    CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft, error: cwdError, checking: cwdChecking,
-             roots: cwdRoots, recent: cwdRecent, browse: cwdBrowse,
-             onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft,
-             onBrowseToggle: onCwdBrowseToggle, onBrowseCrumb: onCwdBrowseCrumb, onBrowseEnter: onCwdBrowseEnter, onBrowsePick: onCwdBrowsePick }),
-    ...(banners || []).filter(Boolean),
+  const threadBody = h('div', { class: 'agentchat-thread-wrap' },
+    h('div', { class: 'agentchat-thread', ref: threadRef(messages.length), role: 'log', 'aria-label': 'conversation' },
+      emptyState,
+      earlierRow,
+      ...rows.filter(Boolean),
+      showWorkingTail
+        ? h('div', { key: '_working', class: 'agentchat-working', role: 'status', 'aria-live': 'polite' },
+            h('span', { class: 'chat-thinking-dots', 'aria-hidden': 'true' }, h('span'), h('span'), h('span')),
+            h('span', { class: 'agentchat-working-text' }, 'working…'))
+        : null,
+      followupRow),
+    // Jump-to-latest: hidden until the scroll listener adds .show (user scrolled
+    // up). Clicking returns to the live edge. Pure-DOM, like the kit's other
+    // stateless chrome, so the host needn't thread scroll state through state.
+    h('button', { class: 'agentchat-jump', type: 'button', 'aria-label': 'jump to latest', title: 'jump to latest',
+      onclick: (e) => scrollThreadToBottom(e.currentTarget) },
+      Icon('arrow-down', { size: 16 }), h('span', { class: 'agentchat-jump-label' }, 'latest')));
+
+  const mainColumn = h('div', { class: 'agentchat-main-col' },
     h('div', { class: 'agentchat-head' },
       h('h1', { class: 'agentchat-title' }, name + (selectedModel ? ' · ' + selectedModel : '')),
       h('span', { class: 'agentchat-sub', 'aria-hidden': busy ? 'true' : null },
@@ -468,23 +488,35 @@ export function AgentChat(props = {}) {
         // reconnecting-while-streaming state reads one word everywhere instead of
         // the head saying "streaming…" while the controls say "reconnecting…".
         busy ? (status || 'streaming…') : (messages.length ? messages.length + (messages.length === 1 ? ' message' : ' messages') : ''))),
-    h('div', { class: 'agentchat-thread-wrap' },
-      h('div', { class: 'agentchat-thread', ref: threadRef(messages.length), role: 'log', 'aria-label': 'conversation' },
-        emptyState,
-        earlierRow,
-        ...rows.filter(Boolean),
-        showWorkingTail
-          ? h('div', { key: '_working', class: 'agentchat-working', role: 'status', 'aria-live': 'polite' },
-              h('span', { class: 'chat-thinking-dots', 'aria-hidden': 'true' }, h('span'), h('span'), h('span')),
-              h('span', { class: 'agentchat-working-text' }, 'working…'))
-          : null,
-        followupRow),
-      // Jump-to-latest: hidden until the scroll listener adds .show (user scrolled
-      // up). Clicking returns to the live edge. Pure-DOM, like the kit's other
-      // stateless chrome, so the host needn't thread scroll state through state.
-      h('button', { class: 'agentchat-jump', type: 'button', 'aria-label': 'jump to latest', title: 'jump to latest',
-        onclick: (e) => scrollThreadToBottom(e.currentTarget) },
-        Icon('arrow-down', { size: 16 }), h('span', { class: 'agentchat-jump-label' }, 'latest'))),
-    composer,
+    threadBody,
+    composer);
+
+  // sidePanel renders the caller's content vnode (a FilePreviewPane, a plain
+  // iframe/embed, anything) inside a resizable SplitPanel beside the thread -
+  // omitted entirely when sidePanel is falsy so every existing caller's DOM
+  // output is byte-unchanged.
+  const body = sidePanel
+    ? SplitPanel({ orientation: 'horizontal', initial: '55%', min: 320,
+        children: [
+          mainColumn,
+          h('div', { class: 'agentchat-side-panel' },
+            h('div', { class: 'agentchat-side-panel-head' },
+              h('span', { class: 'agentchat-side-panel-title' }, sidePanelTitle),
+              onCloseSidePanel
+                ? h('button', { type: 'button', class: 'agentchat-side-panel-close', 'aria-label': 'close preview', title: 'close preview', onclick: onCloseSidePanel }, Icon('x', { size: 14 }))
+                : null),
+            h('div', { class: 'agentchat-side-panel-body' }, sidePanel)),
+        ] })
+    : mainColumn;
+
+  return h('div', { class: 'agentchat' + (sidePanel ? ' has-side-panel' : '') },
+    AgentControls({ agents, selectedAgent, models, selectedModel, busy, status, modelsLoading, agentsLoading,
+                    onSelectAgent, onSelectModel, onNewChat, onStop, exportActions }),
+    CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft, error: cwdError, checking: cwdChecking,
+             roots: cwdRoots, recent: cwdRecent, browse: cwdBrowse,
+             onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft,
+             onBrowseToggle: onCwdBrowseToggle, onBrowseCrumb: onCwdBrowseCrumb, onBrowseEnter: onCwdBrowseEnter, onBrowsePick: onCwdBrowsePick }),
+    ...(banners || []).filter(Boolean),
+    body,
   );
 }

package/src/components/chat.js

@@ -97,7 +97,7 @@ function renderPart(p, key) {
     });
 }
 
-export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped, flat }) {
+export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped, flat, error, onRetry }) {
     _stats.messages += 1;
     // Support legacy 'who' prop, prefer 'role' with mapping:
     //   'user'      -> 'you'   (right-aligned, accent bubble)
@@ -144,6 +144,15 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
         typeof stopped === 'string' ? stopped : 'stopped — this turn was cancelled before it finished')];
     if (incomplete) bodyNodes = [...bodyNodes, h('div', { key: '_incomplete', class: 'chat-msg-notice is-incomplete', role: 'status' },
         typeof incomplete === 'string' ? incomplete : 'connection dropped mid-turn — the response may be incomplete')];
+    // Inline per-turn error: unlike a global toast, this pins the failure to
+    // the specific turn that failed (docstudio pattern) with a retry action
+    // right there instead of forcing the user to hunt for what broke.
+    if (error) bodyNodes = [...bodyNodes, h('div', { key: '_error', class: 'chat-msg-notice is-error', role: 'alert' },
+        h('span', {}, typeof error === 'string' ? error : 'this turn failed'),
+        onRetry ? h('button', {
+            type: 'button', class: 'chat-msg-retry-btn',
+            onclick: (e) => { e.preventDefault(); onRetry(e); },
+        }, 'retry') : null)];
     const reactionRow = reactions && reactions.length
         ? h('div', { class: 'chat-reactions' },
             ...reactions.map((r, i) => h('span', { class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i, 'aria-label': `${r.emoji} reaction (${String(r.count)} ${String(r.count) === '1' ? 'reaction' : 'reactions'})${r.you ? ' - you reacted' : ''}` },

package/src/components/content.js

@@ -6,6 +6,18 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Heading, Lede, Dot, Icon } from './shell.js';
 const h = webjsx.createElement;
 
+// Avatar — generic identity disc: an image when `src` resolves, else a
+// letter fallback derived from `name`/`fallback`. Kit previously only had
+// scoped one-offs (chat.js `.chat-avatar`, community.js `.cm-user-avatar`)
+// duplicating this same letter-fallback logic; this is the reusable version.
+export function Avatar({ name, src, fallback, size = 'md', key } = {}) {
+    const letter = fallback != null ? fallback
+        : (name ? String(name).trim().charAt(0).toUpperCase() || '?' : '?');
+    const cls = 'ds-avatar ds-avatar-' + size;
+    if (src) return h('img', { key, class: cls, src, alt: name || '', loading: 'lazy' });
+    return h('span', { key, class: cls, 'aria-hidden': !!name, role: name ? 'img' : undefined, 'aria-label': name || undefined }, letter);
+}
+
 export function Panel({ title, count, right, style = '', class: className = '', children, kind, id }) {
     const cls = 'panel' + (kind ? ' panel-' + kind : '') + (className ? ' ' + className : '');
     return h('div', { class: cls, style, id: id || null },
@@ -418,7 +430,7 @@ export function BarChart({ items = [], emptyText = 'no data yet' }) {
             h('div', { class: 'ds-barchart-value' }, it.display != null ? it.display : String(it.value)))));
 }
 
-export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothing here yet', rowLabels, striped = false, compact = false }) {
+export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothing here yet', rowLabels, striped = false, compact = false, sortable = false, sortKey, sortDir = 'asc', onSort }) {
     if (!rows || rows.length === 0) return h('div', { class: 'empty' }, emptyText);
     // rowLabels lets callers supply a plain-text label per row when the first
     // cell is a vnode (so the aria-label is meaningful, not the literal 'row').
@@ -435,8 +447,23 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
     // striped/compact are opt-in density modifiers (webgeist g-table parity) —
     // default false so the existing contract/visual is byte-unchanged.
     const wrapClass = 'ds-table-wrap' + (striped ? ' is-striped' : '') + (compact ? ' is-compact' : '');
+    // sortable is opt-in (default false, byte-unchanged for existing callers):
+    // a header becomes a real <button> announcing aria-sort, dispatching
+    // onSort(headerIndex) so the HOST owns the actual row-ordering logic (this
+    // component has no opinion on comparator/locale/type - it only renders the
+    // control and current state). A docstudio-style dense admin table needs
+    // sortable columns; Table previously had no way to express that at all.
+    const thFor = (hd, i) => {
+        if (!sortable || !onSort) return h('th', { key: i, scope: 'col' }, hd);
+        const isActive = sortKey === i;
+        const ariaSort = isActive ? (sortDir === 'desc' ? 'descending' : 'ascending') : 'none';
+        return h('th', { key: i, scope: 'col', 'aria-sort': ariaSort },
+            h('button', { type: 'button', class: 'ds-table-sort-btn' + (isActive ? ' is-active' : ''), onclick: () => onSort(i) },
+                h('span', { class: 'ds-table-sort-label' }, hd),
+                isActive ? Icon(sortDir === 'desc' ? 'chevron-down' : 'chevron-up', { size: 12 }) : null));
+    };
     return h('div', { class: wrapClass }, h('table', {},
-        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => h('th', { key: i, scope: 'col' }, hd)))),
+        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => thFor(hd, i)))),
         h('tbody', {}, ...rows.map((row, i) => h('tr', {
             key: i,
             class: onRowClick ? 'clickable' : '',

package/src/components/files.js

@@ -147,8 +147,8 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
 // grid does not flash from a bare spinner to a full list (predictable perceived
 // perf, the file-manager feel). `rows` controls how many ghost rows render.
 export function FileSkeleton({ rows = 12 } = {}) {
-    return h('div', { class: 'ds-file-grid ds-file-skeleton', 'aria-hidden': 'true' },
-        ...Array.from({ length: Math.max(1, rows) }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-file-row ds-file-row-skeleton' },
+    return h('div', { class: 'ds-file-grid ds-file-skeleton', role: 'status', 'aria-busy': 'true', 'aria-label': 'loading files' },
+        ...Array.from({ length: Math.max(1, rows) }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-file-row ds-file-row-skeleton', 'aria-hidden': 'true' },
             h('span', { class: 'ds-skel ds-skel-icon' }),
             h('span', { class: 'ds-skel ds-skel-title' }),
             h('span', { class: 'ds-skel ds-skel-meta' })))

package/src/components/shell.js

@@ -133,6 +133,7 @@ export const ICON_PATHS = {
     'check-check': '<path d="M18 6 7 17l-3-3"/><path d="m22 10-7.5 7.5L13 16"/>',
     'chevron-right': '<path d="m9 6 6 6-6 6"/>',
     'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+    'chevron-up': '<path d="m6 15 6-6 6 6"/>',
     'arrow-down': '<path d="M12 5v14M5 12l7 7 7-7"/>',
     'arrow-right': '<path d="M5 12h14M12 5l7 7-7 7"/>',
     x: '<path d="M18 6 6 18M6 6l12 12"/>',

package/src/components.js

@@ -16,7 +16,7 @@ export {
     WorksList, WritingList, Manifesto, Section, PageHeader,
     Kpi, Sparkline, BarChart, Table, SearchInput, TextField, Select, EventList,
     HomeView, ProjectView, Form,
-    Spinner, Skeleton, Alert, FilterPills
+    Spinner, Skeleton, Alert, FilterPills, Avatar
 } from './components/content.js';
 
 export {

package/src/css/app-shell/kits-appended.css

@@ -241,6 +241,19 @@
   max-width: 100%;
 }
 .ds-table-wrap > table { min-width: 100%; }
+/* Sortable column headers (Table's opt-in sortable prop) — a docstudio-cue
+   addition: color stays neutral at rest (this is a structural control, not a
+   brand moment) and only the active sort direction gets the accent tint,
+   matching the "color reserved for meaning, not decoration" pattern seen in
+   docstudio's admin table. */
+.ds-table-sort-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  background: none; border: none; padding: 0; margin: 0;
+  font: inherit; font-weight: inherit; color: inherit; cursor: pointer;
+}
+.ds-table-sort-btn:hover { color: var(--fg); }
+.ds-table-sort-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }
+.ds-table-sort-btn.is-active { color: var(--accent-ink, var(--accent)); }
 
 
 /* == appended: settings kit cleanup == */
@@ -359,3 +372,16 @@
   .ds-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: var(--space-4); }
   .ds-chat-detail { display: block; position: sticky; top: 0; }
 }
+
+/* Avatar — generic identity disc primitive (content.js Avatar). Sized
+   variants mirror the existing chat-avatar/community-avatar footprints so
+   any consumer gets a consistent disc without duplicating the CSS. */
+.ds-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 50%; background: var(--bg-3); color: var(--fg);
+  font-family: var(--ff-mono); font-weight: 600; text-transform: lowercase;
+  letter-spacing: 0.02em; user-select: none; flex-shrink: 0; object-fit: cover;
+}
+.ds-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
+.ds-avatar-md { width: 36px; height: 36px; font-size: 12px; }
+.ds-avatar-lg { width: 48px; height: 48px; font-size: 15px; }