anentrypoint-design 0.0.338 → 0.0.340

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.338",
+  "version": "0.0.340",
   "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/content.js

@@ -418,7 +418,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 +435,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/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/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 == */

package/src/page-html.js

@@ -37,12 +37,26 @@ export function slugify(s) {
         .replace(/\s+/g, '-');
 }
 
+// Raw-HTML passthrough block, opt-in via ```html fences. Distinct from a
+// plain ``` code fence (which still escapes+<pre>-wraps its contents) — this
+// is for SSR call sites that are trusted, repo-authored content (a theme.mjs
+// page body sourced from the project's own YAML, never end-user input) and
+// need to emit real markup (e.g. an <iframe> demo embed) that must NOT be
+// escaped. There is no sanitization here by design: the caller owns trust.
+// A consumer rendering untrusted content must not route it through this
+// path — use markdown.js's DOMPurify-backed renderMarkdown for that instead.
 export function renderMarkdown(md) {
     const lines = String(md || '').split('\n');
     const out = [];
-    let inCode = false, inList = false;
+    let inCode = false, inList = false, inRawHtml = false;
     for (const line of lines) {
-        if (line.startsWith('```')) { if (inCode) { out.push('</pre>'); inCode = false; } else { out.push('<pre>'); inCode = true; } continue; }
+        if (line.trim() === '```html') { if (!inCode) { inRawHtml = true; continue; } }
+        if (line.startsWith('```')) {
+            if (inRawHtml) { inRawHtml = false; continue; }
+            if (inCode) { out.push('</pre>'); inCode = false; } else { out.push('<pre>'); inCode = true; }
+            continue;
+        }
+        if (inRawHtml) { out.push(line); continue; }
         if (inCode) { out.push(escape(line)); continue; }
         if (line.startsWith('# ')) { const t = line.slice(2); out.push(`<h1 id="${slugify(t)}">${escape(t)}</h1>`); }
         else if (line.startsWith('## ')) { const t = line.slice(3); out.push(`<h2 id="${slugify(t)}">${escape(t)}</h2>`); }