anentrypoint-design 1.0.27 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "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/threads.js

@@ -91,7 +91,7 @@ export function AICatPortrait({ name = 'aicat', status, face } = {}) {
     );
 }
 
-export function AICat({ name = 'aicat', messages = [], thinking, composer, status = 'online · purring' } = {}) {
+export function AICat({ name = 'aicat', messages = [], thinking, composer, status = 'online · purring', header } = {}) {
     ensureCachesInit();
     const annotated = messages.map((m) =>
         m.who === 'them' ? { ...m, aicat: true, avatar: m.avatar || '=^.^=' } : m);
@@ -100,7 +100,7 @@ export function AICat({ name = 'aicat', messages = [], thinking, composer, statu
         : annotated;
     const threadRef = makeThreadAutoScroll(() => all.length);
     return h('div', { class: 'chat' },
-        h('div', { class: 'chat-head', role: 'banner' },
+        header || h('div', { class: 'chat-head', role: 'banner' },
             h('span', { class: 'dot', 'aria-hidden': 'true' }),
             h('h2', { class: 'ds-chat-title' }, name),
             h('span', { class: 'sub', 'aria-label': `status: ${status}` }, ' · ' + status),

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

@@ -564,6 +564,26 @@
    fell back to the paper tone at 3.13:1 on ink. */
 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: var(--fw-medium, 500); }
 
+/* Mascot identity folded into AICat's own .chat-head row (passed as its
+   `header` prop) instead of a standalone .aicat-portrait block stacked above
+   the chat panel -- reuses the existing 32px .aicat-face circle, just placed
+   inline before the title instead of above the whole surface. */
+.aicat-portrait-head { gap: var(--space-2-5); }
+.aicat-face-inline { margin-right: var(--space-1); }
+
+/* Centers the transcript+composer as the page's dominant focal surface
+   (hero-composer framing): a bounded column with generous top margin so the
+   chat panel reads as the first thing the eye lands on, not one card in a
+   top-aligned marketing stack. Docs/heading content is demoted into
+   .ds-kit-controls below it (see kits-appended.css) so nothing above the
+   panel competes with it. */
+.aicat-focus-col {
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: var(--space-6);
+}
+
 /* ============================================================
    Composer attachment-detected badge, context line, hint, toolbar,
    note strip, elapsed counter, dragover state — all referenced from

package/src/css/app-shell/sidebar-misc.css

@@ -27,6 +27,50 @@
 .app-side a .glyph { font-family: var(--ff-body); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
 .app-side a.active .glyph { color: var(--accent-ink); }
 
+/* .ds-side-tree — two-level project-tree group (parent <details> + nested
+   child rows), the sidebar's hierarchy primitive. Sits alongside Side()'s
+   own flat .app-side-group rows but carries genuine nesting: a summary row
+   (parent) disclosing child conversation rows, closer to a project-tree
+   sidebar than a single flat list. */
+.ds-side-tree { border: 0; }
+.ds-side-tree-summary {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1-5) var(--space-2);
+  border-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-2);
+  cursor: pointer; list-style: none;
+}
+.ds-side-tree-summary::-webkit-details-marker { display: none; }
+.ds-side-tree-summary:hover { background: var(--bg-2); color: var(--fg); }
+.ds-side-tree-summary:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+.ds-side-tree-summary .glyph { font-family: var(--ff-body); font-size: 13px; font-weight: 600; color: var(--fg-3); }
+.ds-side-tree-summary .count {
+  margin-left: auto; padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
+  font-family: var(--ff-body); letter-spacing: 0.04em; min-width: 18px; text-align: center;
+  color: var(--fg-3); background: var(--bg-2); border-radius: var(--r-pill, 999px);
+}
+.ds-side-tree-children {
+  display: flex; flex-direction: column;
+  padding-left: var(--space-4);
+  gap: var(--space-hair);
+}
+.ds-side-tree-child {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
+  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ds-side-tree-child:hover, .ds-side-tree-child:focus-visible { background: var(--bg-2); color: var(--fg); }
+.ds-side-tree-child:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+.ds-side-tree-child .glyph { font-family: var(--ff-body); color: var(--fg-3); }
+
 /* -- select primitive --------------------------------------------------- */
 .ds-select {
     width: 100%;

package/types/components.d.ts

@@ -926,6 +926,7 @@ export interface AICatProps {
     composer?: any;
     /** @default 'online · purring' */
     status?: string;
+    header?: any;
 }
 export declare function AICat(props?: AICatProps): VNode;