anentrypoint-design 0.0.398 → 0.0.400

package/package.json

@@ -1,12 +1,23 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.398",
+  "version": "0.0.400",
   "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",
   "module": "./dist/247420.js",
+  "types": "./types/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "./src/index.js",
+    "./src/styles.js",
+    "./src/markdown-cache.js",
+    "./src/components/chat/stats.js",
+    "./src/web-components/freddie-chat.js",
+    "./dist/247420.js"
+  ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./dist/247420.js",
       "default": "./dist/247420.js"
     },
@@ -72,6 +83,7 @@
   "files": [
     "dist",
     "src",
+    "types",
     "scripts/lint-glyphs.mjs",
     "scripts/lint-null-children.mjs",
     "scripts/lint-shared.mjs",
@@ -97,6 +109,8 @@
     "sitemap": "node scripts/generate-sitemap.mjs",
     "docs:components": "node scripts/generate-component-docs.mjs",
     "lint:component-docs": "node scripts/generate-component-docs.mjs --check",
+    "types:components": "node scripts/generate-component-types.mjs",
+    "lint:component-types": "node scripts/generate-component-types.mjs --check",
     "generate:ui-kits": "node scripts/generate-ui-kit-scaffolds.mjs",
     "generate:preview-index": "node scripts/generate-preview-index.mjs",
     "a11y": "node scripts/a11y-audit.mjs",

package/scripts/lint-glyphs.mjs

@@ -18,7 +18,11 @@ const root = path.resolve(__dirname, '..');
 // Directories scanned recursively for source files. dist/ is generated,
 // node_modules/ is vendored, vendor/ is third-party (webjsx), .gm/ is the
 // plugkit spool — none are hand-authored design surfaces.
-const SCAN_DIRS = ['src', 'ui_kits', 'slides', 'site'];
+// `preview` added 2026-07-28. It had been missing while EXEMPT_FILES below
+// already carried a `preview/icons-unicode.html` entry — an exemption for a
+// directory the walk never entered, i.e. dead code that read as coverage. The
+// preview/ tree ships and is exactly where glyphs accumulate unnoticed.
+const SCAN_DIRS = ['src', 'ui_kits', 'slides', 'site', 'preview'];
 const SCAN_EXT = new Set(['.js', '.mjs', '.css', '.html']);
 // The bundled root CSS files (app-shell.css, chat.css, etc.) are the design
 // system's shipped styling but live at the repo root, outside SCAN_DIRS — they

package/scripts/lint-null-children.mjs

@@ -22,7 +22,13 @@ import { walkFiles } from './lint-shared.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const root = path.resolve(__dirname, '..');
-const SCAN_DIRS = ['src'];
+// `ui_kits`, `site`, `preview`, `slides` added 2026-07-28. The bug this gate
+// catches is a webjsx applyDiff crash on a children array holding a null/false
+// hole, so its true scope is "everywhere h() is called" — and h() is called in
+// 20 files outside src/ (every ui_kits/*/app.js, site/theme.mjs,
+// preview/data-density.js). Scanning only src/ meant the gate never looked at
+// the consumer code most likely to hand-roll a conditional child.
+const SCAN_DIRS = ['src', 'ui_kits', 'site', 'preview', 'slides'];
 const SCAN_EXT = new Set(['.js', '.mjs']);
 const SKIP_DIRS = new Set(['node_modules', 'vendor']);
 

package/src/components/editor-primitives/json-viewer.js

@@ -107,18 +107,21 @@ export function JsonViewer({ value, emptyText = 'no data', maxHeight, mode = 'pl
     else { try { text = JSON.stringify(value, null, 2); knownJson = text != null; parsed = value; } catch { text = String(value); } }
     if (!text) return h('div', { class: 'ds-ep-json ds-ep-json-empty' }, emptyText);
     const style = maxHeight ? ('max-height:' + maxHeight) : null;
-    // A maxHeight makes this an `overflow: auto` scroll container, so the
-    // clipped content is reachable by mouse wheel but by nothing a keyboard
-    // user has — WCAG 2.1.1 Keyboard, axe's `scrollable-region-focusable`.
-    // Same fix the Table wrapper carries: tabindex puts it in the tab order and
-    // arrow keys then scroll it natively, and a bare focusable region with no
-    // name is its own violation, so it is labelled. `group` rather than
-    // `region` so a page rendering several viewers does not gain a landmark
-    // each. Witnessed unreachable on a real page: 761px of content in a 250px
-    // box with no focusable descendant.
-    const scrollable = maxHeight
-        ? { tabindex: '0', role: 'group', 'aria-label': 'JSON, scrollable' }
-        : {};
+    // Every viewer is a scroll container, so these are UNCONDITIONAL. The
+    // `maxHeight` prop only overrides a height the stylesheet already sets:
+    // `.ds-ep-json` carries `max-height: 300px; overflow-y: auto` in
+    // editor-primitives.css, so a viewer rendered with no prop at all still
+    // clips and still scrolls. Gating the attributes on the prop therefore
+    // missed the common case — measured live: a prop-less viewer reported
+    // scrollHeight 1265 against clientHeight 300 while sitting at tabindex -1.
+    //
+    // Clipped content reachable by wheel but not by keyboard is WCAG 2.1.1
+    // Keyboard, axe's `scrollable-region-focusable`. tabindex puts the box in
+    // the tab order and arrow keys then scroll it natively; a bare focusable
+    // region with no name is its own violation, so it is labelled. `group`
+    // rather than `region` so a page rendering several viewers does not gain a
+    // landmark each.
+    const scrollable = { tabindex: '0', role: 'group', 'aria-label': 'JSON, scrollable' };
     if (!knownJson && (mode === 'highlight' || mode === 'tree')) {
         try { parsed = JSON.parse(text); knownJson = true; } catch { /* swallow: not JSON — render plain */ }
     }

package/src/components/files/grid.js

@@ -23,6 +23,35 @@ const h = webjsx.createElement;
 // CAP and a "show N more" row, mirroring the History tab's "load N older".
 const FILE_GRID_CAP = 200;
 
+/**
+ * The directory listing.
+ *
+ * `loading` and `busy` are NOT two spellings of one state -- they are the two
+ * halves of this SDK's standing distinction, and FileGrid is the component
+ * that takes both because it is the one place both are in play at once:
+ *
+ *   loading -- a DATA FETCH is in flight. Owns which SHAPE renders: with no
+ *              rows yet it is a cold load and the whole grid is replaced by
+ *              FileSkeleton; with rows already on screen it is a refresh and
+ *              the existing rows stay mounted and dim (is-refreshing), because
+ *              flashing a populated directory back to shimmer reads as data
+ *              loss.
+ *   busy    -- a USER ACTION is in flight (a rename/move/delete round-trip).
+ *              Owns INTERACTIVITY, not shape: it is forwarded to each FileRow
+ *              as `busy`, which disables that row's open + mutation controls
+ *              so a second click cannot fire the same mutation twice.
+ *
+ * A grid can be `busy` while not `loading` (a delete is posting, rows fully
+ * rendered) and `loading` while not `busy` (a plain refresh). Passing one for
+ * the other is a real bug, not a style choice, so they are deliberately not
+ * merged and neither is an alias of the other.
+ *
+ * @param {Array} [files=[]] - the directory entries to render.
+ * @param {boolean} [loading=false] - a data fetch is in flight (skeleton when cold, dim when refreshing).
+ * @param {boolean} [busy] - a user-initiated mutation is in flight; disables every row's controls. Per-entry `f.busy` is used when this is not passed.
+ * @param {string} [emptyText='No files here yet'] - copy for the empty/filtered-miss state.
+ * @param {'list'|'compact'|'thumb'} [density='list'] - row density; 'thumb' switches to the multi-column cell grid.
+ */
 export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No files here yet', emptyAction,
                           sort, filter, loading = false,
                           shown, onShowMore, actions, busy,

package/src/components/sessions/dashboard.js

@@ -55,7 +55,8 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
                                    sort, filter, errorsOnly = false, onErrorsOnly,
                                    selectable = false, selected, onToggleSelect, onSelectAll, onClearSelection,
                                    activeSid, streamState,
-                                   emptyText = 'No live sessions', emptyAction, offline = false } = {}) {
+                                   emptyText = 'No live sessions', emptyAction, offline = false,
+                                   density = 'comfortable' } = {}) {
   if (offline) {
     return h('div', { class: 'ds-dash-state ds-dash-state-error', role: 'status' }, 'Backend offline — live sessions unavailable');
   }
@@ -171,7 +172,7 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   const grouped = !sort || !sort.value || sort.value === 'status';
   const cardOf = (s) => h('div', { key: s.sid, role: 'listitem' },
     SessionCard({ session: s, onStop, onOpen, onView, active: s.sid === activeSid,
-                  selectable, selected: selSet.has(s.sid), onToggleSelect }));
+                  selectable, selected: selSet.has(s.sid), onToggleSelect, density }));
   // ONE stable body wrapper across every state (empty / grouped / flat), with
   // KEYED children - the ConversationList stable-keyed-body rule. Diffing
   // happens on the children, never by swapping the container's shape.
@@ -193,9 +194,9 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
     ].filter((b) => b.rows.length);
     bodyKids = buckets.map((b) => h('div', { key: 'grp' + b.key, class: 'ds-dash-group', role: 'group', 'aria-label': b.label + ' sessions' },
       h('div', { key: 'gl', class: 'ds-dash-group-label' }, b.label + ' · ' + b.rows.length),
-      h('div', { key: 'gg', class: 'ds-dash-grid', role: 'list', 'aria-label': b.label + ' sessions' }, ...b.rows.map(cardOf))));
+      h('div', { key: 'gg', class: 'ds-dash-grid' + (density === 'compact' ? ' is-compact' : ''), role: 'list', 'aria-label': b.label + ' sessions' }, ...b.rows.map(cardOf))));
   } else {
-    bodyKids = [h('div', { key: 'flat', class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf))];
+    bodyKids = [h('div', { key: 'flat', class: 'ds-dash-grid' + (density === 'compact' ? ' is-compact' : ''), role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf))];
   }
   const body = h('div', { key: 'body', class: 'ds-dash-groups' }, ...bodyKids);
   return h('div', { class: 'ds-dash' }, header, body);

package/src/components/sessions/session-card.js

@@ -28,9 +28,21 @@ const h = webjsx.createElement;
 // the card heading so the rail row and its dashboard card share one identity.
 // `session.elapsedMs` (raw ms) is formatted internally via fmtDuration; the
 // pre-formatted `elapsed` string remains as a legacy fallback.
+// `density` trades vertical space for scannability, the same list/compact axis
+// FileGrid already exposes:
+//   'comfortable' (default) — the full card: title, head, meta, per-card actions.
+//   'compact'               — one line per session. Measured on a real 16-session
+//                             dashboard the comfortable card renders 208px tall,
+//                             so a 439px viewport shows two sessions; the point of
+//                             a command center is scanning many at once. Compact
+//                             keeps every FACT (status, agent, cwd, elapsed,
+//                             activity) and drops only the per-card action row,
+//                             which is reachable by opening the session.
 export function SessionCard({ session = {}, onStop, onOpen, onView, active = false,
-                             selectable = false, selected = false, onToggleSelect } = {}) {
+                             selectable = false, selected = false, onToggleSelect,
+                             density = 'comfortable' } = {}) {
   const s = session;
+  const compact = density === 'compact';
   const st = s.stopping ? 'stopping' : (s.status === 'error' ? 'error' : (s.status === 'stale' ? 'stale' : 'running'));
   // The stat line composes elapsed + live counter; the activity line carries the
   // last-activity time and the current tool so a card shows MOTION, not just a
@@ -47,7 +59,7 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
     s.currentTool ? 'running: ' + s.currentTool : null,
     s.lastActivity ? 'last ' + s.lastActivity : null,
   ].filter(Boolean);
-  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '') + (s.external ? ' is-external' : '') + (s.isNew ? ' is-new' : '');
+  const cls = 'ds-dash-card is-' + st + (compact ? ' is-compact' : '') + (active ? ' is-active' : '') + (selected ? ' is-selected' : '') + (s.external ? ' is-external' : '') + (s.isNew ? ' is-new' : '');
   // EVERY children array is filter(Boolean)'d: webjsx applyDiff crashes
   // (reading 'key') on a bare null among VElement siblings, so a null cwd /
   // model / external flag must never reach a positional child slot.
@@ -84,9 +96,15 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
       onClick: () => !s.stopping && onStop(s),
       children: [Icon('square', { size: 14 }), h('span', {}, s.stopping ? 'stopping…' : 'stop')] }) : null,
   ].filter(Boolean));
+  // Compact keeps head + meta on ONE row and drops the action group; the title
+  // rides as the element's own accessible name (already set below) rather than
+  // taking a line of its own, so nothing is lost, only re-laid-out.
+  const children = compact
+    ? [head, meta].filter(Boolean)
+    : [
+        s.title ? h('div', { class: 'ds-dash-title', title: s.title }, s.title) : null,
+        head, meta, actions,
+      ].filter(Boolean);
   return h('div', { class: cls, role: 'group', 'aria-label': 'session ' + (s.title || s.agent || s.sid), 'aria-current': active ? 'true' : null },
-    ...[
-      s.title ? h('div', { class: 'ds-dash-title', title: s.title }, s.title) : null,
-      head, meta, actions,
-    ].filter(Boolean));
+    ...children);
 }

package/src/css/app-shell/primitives.css

@@ -165,6 +165,15 @@
 .chip.tone-wip, .chip.tone-neutral {
   background: var(--bg-3); color: var(--fg-2);
 }
+/* tone-dim was applied by five kits (aicat, project_page, signin, system_primer,
+   terminal) with no rule anywhere, so a "dim" chip rendered byte-identical to a
+   plain one — measured at rgb(234,230,218) on rgb(31,31,38), same opacity. It is
+   the recede-into-the-row tone: the tier-3 foreground on the same recessed
+   surface tone-wip uses, which is quieter than the default --fg-2 without
+   dropping to an opacity fade that would take the border and background with it. */
+.chip.tone-dim {
+  background: var(--bg-3); color: var(--fg-3);
+}
 .chip.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
 .chip.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
 .chip.tone-sun, .chip.tone-yellow {

package/src/markdown-cache.js

@@ -23,6 +23,7 @@ let _initPromise = null;
 let _renderCache = new Map();
 let _stats = {
     markdownInitMs: 0,
+    totalInitMs: 0,
     prismInitMs: 0,
     renderCount: 0,
     renderTimes: [],
@@ -59,8 +60,13 @@ export async function initializeCachesEagerly() {
             })(),
         ]);
 
-        const totalMs = performance.now() - startTime;
-        console.debug(`[247420] markdown/prism caches initialized in ${totalMs.toFixed(1)}ms (markdown: ${_stats.markdownInitMs.toFixed(1)}ms, prism: ${_stats.prismInitMs.toFixed(1)}ms)`);
+        // Recorded, not printed. This is library code, so an unconditional
+        // console.debug writes into every consuming application's console on
+        // every init. The same numbers are already live-inspectable through
+        // window.__debug['markdown-cache'] (registered at the bottom of this
+        // file), which is the repo's own observability channel and the one a
+        // consumer can actually opt into.
+        _stats.totalInitMs = performance.now() - startTime;
 
         return { markdown: mdOk, prism: prismOk };
     })();
@@ -140,6 +146,11 @@ export function getCacheStats() {
         initMs: {
             markdown: _stats.markdownInitMs,
             prism: _stats.prismInitMs,
+            // Wall-clock for the whole init, which is not the sum of the two
+            // above: they run concurrently under Promise.all, so total is the
+            // slower of the pair plus overhead. Previously only ever printed
+            // to console.debug; exposed here so it is inspectable instead.
+            total: _stats.totalInitMs,
         },
         renderStats: {
             count: _stats.renderCount,
@@ -171,6 +182,7 @@ export function resetCacheState() {
     _renderCache.clear();
     _stats = {
         markdownInitMs: 0,
+        totalInitMs: 0,
         prismInitMs: 0,
         renderCount: 0,
         renderTimes: [],