anentrypoint-design 1.0.32 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "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/community-app.js

@@ -256,7 +256,7 @@ export function mountCommunityApp(root, adapter = {}) {
                 // id + tabindex match AppShell()'s contract so the skip link
                 // above actually lands somewhere; this app builds its own shell
                 // and so inherited neither.
-                h('main', { class: 'app-main', id: 'app-main', tabindex: '0', onclick: () => { if (s.mobileMenuOpen && A.closeMobileMenu) A.closeMobileMenu(); } },
+                h('main', { class: 'app-main ds-app-surface', id: 'app-main', tabindex: '0', onclick: () => { if (s.mobileMenuOpen && A.closeMobileMenu) A.closeMobileMenu(); } },
                     // The channel name is the page title, but it lived only in
                     // the topbar brand span, leaving the document with no
                     // heading at all. sr-only because the topbar and chat-head

package/src/components/chat/message.js

@@ -95,6 +95,12 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     if (time) metaItems.push(h('span', { class: 't', key: 'ti' }, time));
     if (tickNode) metaItems.push(tickNode);
     const meta = metaItems.length ? h('div', { class: 'chat-meta' }, ...metaItems) : null;
+    // Incoming turns show the name above the bubble, level with the avatar's
+    // top edge, so the two read as one identity unit -- the way the 'you'
+    // side already pairs its avatar with its own bubble. Placing meta after
+    // the bubble (as for 'you', where only time/receipt trail below) left an
+    // incoming message's name floating above the PREVIOUS message's bubble
+    // instead of its own, with a bare avatar disc stranded beside its bubble.
     // Per-message actions (copy / retry / edit) — a hover-revealed control row
     // below the bubble, the way Claude-Desktop surfaces message-level actions.
     // Each action is { label, icon, onClick, title }. Kept icon-only with an
@@ -132,7 +138,9 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     const roleLabel = isFlat
         ? h('div', { class: 'chat-role', key: '_role' }, resolvedWho === 'you' ? t('chat.roleYou', 'You') : (name || t('chat.roleAssistant', 'Assistant')))
         : null;
-    const stack = h('div', { class: 'chat-stack' }, roleLabel, ...bodyNodes, reactionRow, actionRow, meta);
+    const stack = resolvedWho === 'them'
+        ? h('div', { class: 'chat-stack' }, roleLabel, meta, ...bodyNodes, reactionRow, actionRow)
+        : h('div', { class: 'chat-stack' }, roleLabel, ...bodyNodes, reactionRow, actionRow, meta);
     // Centered roles (system/tool/thinking) skip the avatar column entirely so
     // the bubble owns the full row — the chrome reads as out-of-band signal,
     // not a participant turn.

package/src/components/content/panel.js

@@ -14,7 +14,7 @@ export function Panel({ title, count, right, style = '', class: className = '',
     // a screen-reader heading-jump can actually find each section, not just
     // the page's single top-level h1.
     const headingTag = 'h' + headingLevel;
-    return h('div', { class: cls, style, ...(id ? { id } : {}) },
+    return h('div', { class: cls, style: style || null, ...(id ? { id } : {}) },
         title != null ? h('div', { class: 'panel-head' },
             h(headingTag, { class: 'panel-title' }, title),
             right != null ? right : (count != null ? h('span', { class: 'ds-badge' }, String(count)) : null)

package/src/components/shell/app-shell.js

@@ -164,7 +164,7 @@ function isStatusCollapsed() {
     try { return localStorage.getItem(STATUS_COLLAPSE_KEY) === '1'; } catch (_) { return false; }
 }
 function toggleStatusCollapsed(fromEl) {
-    const app = fromEl && fromEl.closest && fromEl.closest('.app');
+    const app = fromEl && fromEl.closest && fromEl.closest('.app, .ws-shell');
     const bar = app && app.querySelector('.app-status');
     if (!bar) return;
     const next = !bar.classList.contains('is-collapsed');
@@ -185,7 +185,7 @@ export function Status({ left = [], right = [] } = {}) {
     // ref runs on mount, before paint, so there's no expanded-then-collapse flash.
     const syncLiveVar = (el) => {
         if (!el) return;
-        const app = el.closest('.app');
+        const app = el.closest('.app, .ws-shell');
         if (app) app.style.setProperty('--app-status-h-live', collapsed ? 'var(--space-4)' : 'var(--app-status-h)');
     };
     return h('footer', { class: 'app-status' + (collapsed ? ' is-collapsed' : ''), role: 'contentinfo', ref: syncLiveVar },

package/src/components/shell/atoms.js

@@ -145,7 +145,7 @@ export function Glyph({ children, color, size = 'base', label } = {}) {
 }
 
 export function Heading({ level = 1, children, style = '', class: className = '', 'aria-level': ariaLevel }) {
-    return h('h' + level, { class: className || null, style, 'aria-level': ariaLevel != null ? String(ariaLevel) : null }, children);
+    return h('h' + level, { class: className || null, style: style || null, 'aria-level': ariaLevel != null ? String(ariaLevel) : null }, children);
 }
 
 export function Lede({ children }) {

package/src/components/shell/workspace-shell.js

@@ -120,7 +120,7 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                         onclick: (e) => toggleWsDrawer('pane', null, e.currentTarget),
                     }, Icon('page')) : null)
                 : null,
-            h('main', { class: 'ws-main' + (narrow ? ' narrow' : '') + (mainFlush ? ' ws-main--flush' : ''), id: 'ws-main', tabindex: '-1' },
+            h('main', { class: 'ws-main ds-app-surface' + (narrow ? ' narrow' : '') + (mainFlush ? ' ws-main--flush' : ''), id: 'ws-main', tabindex: '-1' },
                 ...(Array.isArray(main) ? main : [main])),
             status || null),
         // Optional right context pane. Its desktop collapse toggle now lives in

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

@@ -143,6 +143,15 @@ h3 + .lede, h3 + .t-lede,
   margin-top: var(--space-2);
 }
 
+/* .app-main.narrow widens well past prose measure on wide no-sidebar
+   viewports on purpose (topbar.css) so full-width siblings like .post-meta/
+   h1/.post-index use the room. .lede/.ds-prose keep their reading-measure
+   caps (38ch/--measure) but stayed left edge-anchored inside that wider
+   column, turning the freed width into one-sided dead whitespace on the
+   right of the article body instead of being absorbed as margin. */
+.app-main.narrow > .lede, .app-main.narrow > .t-lede,
+.app-main.narrow > .ds-prose { margin-left: auto; margin-right: auto; }
+
 .lede + .post-body, .t-lede + .post-body,
 .lede + .ds-prose, .t-lede + .ds-prose {
   margin-top: var(--space-4);

package/src/css/app-shell/chat-polish.css

@@ -46,7 +46,7 @@
 .chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
 .chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .82; } /* WCAG-verified 2026 restyle: .7 blended --fg-3 to 3.72:1 on dark --bg (#1a1a1a); .82 clears 4.53:1 */
 
-.chat-msg { display: flex; gap: var(--space-2-75); align-items: flex-start; padding: var(--space-1-75) 0; position: relative; min-width: 0; }
+.chat-msg { display: flex; flex-shrink: 0; gap: var(--space-2-75); align-items: flex-start; padding: var(--space-1-75) 0; position: relative; min-width: 0; }
 .chat-msg.you { flex-direction: row-reverse; }
 .chat-msg.you .chat-stack { align-items: flex-end; }
 .chat-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); padding: var(--space-1-75) 0; margin: 0; border-radius: var(--r-0); transition: background var(--dur-base) var(--ease); }
@@ -613,6 +613,23 @@
   text-align: center;
   margin: 0;
 }
+/* Reference's Projects/General sidebar switcher: a two-pill row sitting
+   above the tree, spaced off the tree below it like a real section header,
+   not flush against it. Tighter side padding than --pad-x (round 4 widened
+   that to 48px) -- two pills at natural width need more of the 256px rail
+   than a 48px-each-side gutter leaves, so this row alone uses --space-3 to
+   stay a single non-wrapping row like the reference, without touching the
+   shared --pad-x token every other sidebar section still uses. */
+.aicat-side-tabs {
+  padding: var(--space-3) var(--space-3) var(--space-2);
+  flex-wrap: nowrap;
+}
+.ds-side-empty-note {
+  padding: var(--space-2) var(--pad-x);
+  color: var(--fg-3);
+  font-size: var(--fs-sm);
+  margin: 0;
+}
 
 /* ============================================================
    Composer attachment-detected badge, context line, hint, toolbar,

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

@@ -51,7 +51,10 @@
 .ds-skel::after {
   content: ''; position: absolute; inset: 0;
   background: linear-gradient(90deg, transparent, var(--bg-3), transparent);
-  transform: translateX(-100%); animation: ds-skel-shimmer 1.2s infinite;
+  transform: translateX(-100%);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-skel::after { animation: ds-skel-shimmer 1.2s infinite; }
 }
 .ds-skel-icon { width: 22px; height: 22px; }
 .ds-skel-title { height: 12px; width: 60%; }
@@ -375,6 +378,7 @@
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .ds-crumb-seg:hover { background: var(--bg-2); color: var(--fg); }
+.ds-crumb-seg:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
 .ds-crumb-seg.leaf { color: var(--fg); font-weight: 600; }
 .ds-crumb-sep { color: var(--fg-3); opacity: 0.6; user-select: none; }
 
@@ -546,7 +550,11 @@
    progress) — a sliding marquee bar reads as "working", not stuck at 0%. */
 .ds-upload-bar.indeterminate .ds-upload-fill {
   width: 40%; transition: none;
-  animation: ds-upload-marquee 1.1s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-upload-bar.indeterminate .ds-upload-fill {
+    animation: ds-upload-marquee 1.1s ease-in-out infinite;
+  }
 }
 @keyframes ds-upload-marquee {
   0% { transform: translateX(-100%); }

package/src/css/app-shell/hero-content.css

@@ -100,6 +100,16 @@
 @container (max-width: 900px) {
   .ds-hero { padding: var(--space-7) 0 var(--space-6); }
 }
+/* .ds-hero already supplies its own --space-8 (96px) trailing padding, same
+   "gap owned by one side only" pattern as * + .ds-section below. A .panel
+   right after it still added its own --space-6-scaled top margin PLUS its
+   panel-head top padding on top of that -- measured live, the stat block sat
+   ~138px from "currently shipping" (96 hero pad + panel's own lead) versus
+   the ~42px any other block gets ahead of a .panel, and well past the 96px
+   .ds-section itself uses for its "more space above than below" lead. Zero
+   the panel's own top margin here so the hero's trailing padding is the only
+   contributor, matching every other panel/section transition on the page. */
+.ds-hero + .panel { margin-top: 0; }
 .ds-chat-title { margin: 0; font-size: inherit; }
 
 /* ============================================================
@@ -172,14 +182,16 @@
 .ds-marquee-track {
   display: inline-flex; gap: var(--space-5);
   white-space: nowrap; will-change: transform;
-  animation: ds-marquee-run 28s linear infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-marquee-track { animation: ds-marquee-run 28s linear infinite; }
+  .ds-marquee:hover .ds-marquee-track,
+  .ds-marquee:focus-within .ds-marquee-track,
+  .ds-marquee:active .ds-marquee-track { animation-play-state: paused; }
 }
 .ds-marquee-run { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-marquee-item { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-marquee-sep { color: var(--accent-ink); }
-.ds-marquee:hover .ds-marquee-track,
-.ds-marquee:focus-within .ds-marquee-track,
-.ds-marquee:active .ds-marquee-track { animation-play-state: paused; }
 @keyframes ds-marquee-run {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }

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

@@ -388,7 +388,18 @@
 }
 .ds-prim-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 18px; }
 .ds-prim-row { display: flex; gap: var(--space-2-5); flex-wrap: wrap; align-items: center; }
+/* collab overlay specimens (LiveCursorOverlay/RemoteSelectionRings/
+   RecentEditHighlightFlash) are `position:absolute; inset:0`, meant to
+   overlay their own demo row -- without a positioned ancestor closer than
+   the ancestor `.panel` (panel-row.css), they escape to cover the whole
+   panel including its title. Scope them to this row. */
+.ds-prim-row-collab { position: relative; min-height: 64px; }
 .ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
+/* Trailing status readouts (e.g. "none pressed yet") share .ds-prim-label's
+   type/color but are free-length prose, not the fixed-width leading row
+   label -- the shared 64px flex-basis wrapped them into a cramped 3-line
+   stack. Give status text room to sit on one line instead. */
+.ds-prim-label-status { flex: 0 1 auto; white-space: nowrap; }
 
 /* == appended: content-site == */
 /* Home landing wrappers (site/theme.mjs) — replace banned inline styles. */
@@ -475,8 +486,8 @@
    need a clearly larger interval between them than within them, or the whole
    form reads as one undifferentiated column. Margin-collapse-free (flow root
    siblings) — first/last are zeroed so the panel body sets the outer edge. */
-.ds-field-block { display: flex; flex-direction: column; gap: var(--space-1-75); margin: calc(var(--space-4) * var(--density)) 0 0; }
-.ds-settings-body > .ds-field-block:first-child { margin-top: 0; }
+.ds-field-block, .ds-field-wrap { display: flex; flex-direction: column; gap: var(--space-1-75); margin: calc(var(--space-4) * var(--density)) 0 0; }
+.ds-settings-body > .ds-field-block:first-child, .ds-settings-body > .ds-field-wrap:first-child { margin-top: 0; }
 /* Field width is a hint about expected input length. A name or handle stretched
    across a 1000px desktop column tells the user to type a paragraph and leaves
    the eye no left-to-right anchor; capping the control (not the row) keeps the
@@ -555,7 +566,7 @@
    then has to scroll. `auto` collapses when the pane is short, centres when tall. */
 .ds-auth-col { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-2); margin: auto 0; min-width: 0; }
 /* 18px ceiling: no tier between --space-3 (16) and --space-3-5 (20). */
-.ds-auth-form { padding: clamp(var(--space-2-75), 3vw, 18px); display: flex; flex-direction: column; gap: var(--space-2-5); }
+.ds-auth-form { display: flex; flex-direction: column; gap: var(--space-2-5); }
 .ds-auth-sent { align-items: center; text-align: center; }
 /* 32px is an ICON size, not a type size: this is the confirmation mark above
    the "check your mail" copy, sized to the 440px auth column, and the --fs-*
@@ -762,18 +773,19 @@
 /* min-height is a floor, not the intended size — .chat-kit-page's flex-column
    splits leftover height between this (flex:1 1 0%, "leftover") and the
    pattern-notes panel below it (flex:0 1 auto, i.e. sized to its own content
-   first). On a short viewport the panel's natural content height can consume
-   the entire column budget, squeezing this flex-basis:0% sibling to a real,
-   rendered, fully-populated-with-messages 0px — the thread is never empty,
-   it is invisible. Inside .chat itself, .chat-head and .chat-composer are
-   also flex:0-ish naturally-sized siblings of .chat-thread (flex:1 1 0%,
-   chat-polish.css), so the floor has to clear their combined natural height
-   (~55px head + ~78px composer, chrome + gap) with real room left for the
-   thread to still show at least a couple of message bubbles rather than
-   collapsing to a sliver between them — 30vh was not enough on a short
-   viewport. It still grows past this floor via flex:1 whenever the column
-   has room. */
-.ds-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: max(30vh, 420px); gap: var(--space-3); }
+   first). A hard px floor here (this used to read max(30vh, 420px)) can
+   exceed .chat-kit-page's own available height on a short/laptop viewport —
+   420px plus the panel's natural content height overflows the column
+   instead of yielding to it, so .chat-thread's internal overflow-y:auto
+   never engages and the last couple of messages are stranded below the
+   fold with no reachable scroll region (the thread is never empty, it is
+   invisible). min-height:0 here — same as .chat/.chat-thread already use —
+   lets flex:1 actually shrink this to whatever .chat-kit-page has left,
+   so .chat-thread (flex:1, min-height:0, overflow-y:auto) is the thing that
+   scrolls, not the page. It still grows past 0 via flex:1 whenever the
+   column has room, and 30vh remains the width->grid breakpoint's intent via
+   plain flex growth, not a floor that can outgrow its container. */
+.ds-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--space-3); }
 .ds-chat-layout > .chat { min-width: 0; }
 .ds-chat-detail { display: none; }
 @media (min-width: 1100px) {
@@ -962,9 +974,14 @@
   color: var(--fg-3);
   line-height: 1.3;
 }
-/* Message body claims the full second line of the wrapping body row. */
+/* Message body claims the full second line of the wrapping body row. Capped
+   to a readable measure -- unlike .chat-bubble this is a flat list row, not
+   a two-sided bubble, but an uncapped prose line stretches the full pane
+   width (~970px), which reads as dead paper beside every short message
+   rather than an intentionally spacious flat list. */
 .ds-community-msg-text {
   flex: 1 0 100%;
+  max-width: 70ch;
   margin: 0;
   min-width: 0;
   color: var(--fg-2);

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

@@ -188,7 +188,11 @@
   border-radius: 50%;
   background: var(--sky);
   transform: translateY(-50%);
-  animation: chip-live-pulse 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .chip.tone-live::before {
+    animation: chip-live-pulse 1.6s ease-in-out infinite;
+  }
 }
 @keyframes chip-live-pulse {
   0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--sky) 50%, transparent); }
@@ -317,3 +321,31 @@
   .ds-tooltip { transition: none; }
 }
 
+/* -- Menubar -------------------------------------------------------------
+   Row of closed triggers (mirrors .ds-dp-trigger's affordance); without
+   this the wrapper and its item divs fall back to block-level UA defaults,
+   stacking the triggers vertically and rendering them as filled buttons
+   abutting any adjacent status text. */
+.ds-menubar { display: inline-flex; align-items: center; gap: var(--space-1); }
+.ds-menubar-item { display: inline-flex; }
+.ds-menubar-trigger {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: var(--space-1-5) var(--space-2-5);
+  border: 0;
+  border-radius: var(--r-2);
+  background: var(--bg-2);
+  color: var(--fg);
+  font-family: inherit;
+  font-size: var(--fs-sm);
+  cursor: pointer;
+  transition: background-color var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-menubar-trigger:hover { background: var(--bg-3); }
+.ds-menubar-trigger:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; }
+.ds-menubar-trigger.is-open { background: var(--bg-3); }
+@media (prefers-reduced-motion: reduce) {
+  .ds-menubar-trigger { transition: none; }
+}
+

package/src/css/app-shell/states-interactions.css

@@ -77,6 +77,9 @@ button:not(:disabled):hover,
   border-radius: 50%;
   animation: spinner-rotate 0.8s linear infinite;
 }
+@media (prefers-reduced-motion: reduce) {
+  .loading::after { animation: none; }
+}
 
 /* Error state.
    No !important: the only rule in the kit that also resets a matching element's
@@ -208,6 +211,16 @@ input[type="checkbox"], input[type="radio"] {
   .list-item.drag-after::after { animation: pulse-line 0.6s ease-in-out infinite; }
 }
 
+/* ------------------------------------------------------------
+   Focus-visible for controls with no other component sheet
+   -------------------------------------------------------------- */
+
+.ds-session-new:focus-visible,
+.agentchat-cwd-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-inset);
+}
+
 /* ------------------------------------------------------------
    Context Menu Styles
    -------------------------------------------------------------- */
@@ -775,6 +788,9 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   animation: skeleton-load 1.5s infinite;
   border-radius: var(--r-2);
 }
+@media (prefers-reduced-motion: reduce) {
+  .skeleton { animation: none; }
+}
 
 @keyframes skeleton-load {
   0% { background-position: 200% 0; }

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

@@ -72,8 +72,19 @@ body.canvas-host { background: transparent !important; }
   -webkit-backdrop-filter: none; padding: 0; min-height: 0;
   flex: 1 1 auto;
 }
-.app-chrome > .app-crumb { order: 1; flex: 1 1 auto; }
-.app-chrome > .app-topbar { order: 2; flex: 0 0 auto; }
+.app-chrome > .app-crumb { order: 1; flex: 1 1 auto; min-width: 0; }
+/* flex:1 1 auto + min-width:0 (not the previous 0 0 auto): a merged
+ * chrome's topbar carries the search input, which has its own shrink
+ * basis (.ds-topbar-search, kits-appended.css) meant to yield space before
+ * the row wraps -- but a `0 0 auto` topbar box never shrinks itself, so the
+ * search input's flexibility was inert and the whole topbar instead
+ * dropped to a second line as one unit once combined crumb+topbar content
+ * exceeded the row (witnessed live on the search kit at 1280px: crumb
+ * 564px + topbar 596px overflowed a 1184px content box, wrapping the
+ * topbar under the crumb and reading as a broken sticky header). Letting
+ * the topbar itself shrink means the search input actually compresses
+ * first, keeping both bars on one line at realistic content widths. */
+.app-chrome > .app-topbar { order: 2; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
 .app-chrome > .app-topbar > .brand { display: none; }
 .app-chrome > .app-topbar > nav { margin-left: 0; }
 .app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
@@ -369,6 +380,7 @@ body.canvas-host { background: transparent !important; }
 /* Full-height route children fill the region instead of scrolling the page. */
 .app-main > .chat,
 .app-main > .chat-area,
+.app-main > .chat-kit-page,
 .app-main > .ds-file-stage,
 .app-main > .ds-files-stack,
 .app-main > .grow { flex: 1 1 auto; min-height: 0; }

package/src/kits/os/theme.css

@@ -361,6 +361,7 @@ html, body {
  * independent — replacing the `!important` wall that previously did the same
  * job by force. Do not un-scope these; the scope IS the override mechanism. */
 .ds-247420 .wm-win {
+    position: absolute;
     background: var(--os-bg-1);
     border: 1px solid color-mix(in oklab, var(--os-fg) 14%, transparent);
     border-radius: var(--radius-lg, var(--r-3));