anentrypoint-design 1.0.26 → 1.0.28

package/package.json

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

@@ -55,7 +55,7 @@
   width: 36px; height: 36px; flex-shrink: 0;
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--ff-body); font-size: var(--fs-micro); font-weight: 600;
+  font-family: var(--ff-body); font-size: var(--fs-micro); font-weight: var(--fw-medium, 500);
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
@@ -364,7 +364,7 @@
   font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
   padding: 0 var(--space-1-75); letter-spacing: 0.02em;
 }
-.chat-meta .who { font-weight: 600; color: var(--fg-2); }
+.chat-meta .who { font-weight: var(--fw-medium, 500); color: var(--fg-2); }
 .chat-meta .who::after { content: ' ·'; color: var(--fg-3); font-weight: 400; }
 .chat-meta .t { color: var(--fg-3); }
 .chat-meta .tick { color: var(--fg-3); margin-left: var(--space-hair); letter-spacing: -2px; font-family: var(--ff-body); }
@@ -390,7 +390,7 @@
   color: var(--accent-ink);
 }
 .chat-reactions .rxn .e { font-size: var(--fs-xs); line-height: 1; }
-.chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fs-nano); color: var(--fg-2); }
+.chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: var(--fw-medium, 500); font-size: var(--fs-nano); color: var(--fg-2); }
 .chat-reactions .rxn.you .n { color: var(--accent-ink); }
 
 /* Typing indicator renders through the same .chat-bubble container as a real
@@ -562,7 +562,27 @@
    [data-theme="dark"],[data-theme="ink"] override missed data-theme="auto"
    under OS-dark, which is how the kits actually render — the author name
    fell back to the paper tone at 3.13:1 on ink. */
-.aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
+.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,

package/src/css/app-shell/data-density.css

@@ -158,7 +158,7 @@
 @media (max-width: 640px) {
   .ds-session-row-span { flex-basis: 100%; }
 }
-.ds-session-row-devcnt { color: var(--warn); font-weight: 600; }
+.ds-session-row-devcnt { color: var(--warn); font-weight: var(--fw-medium, 500); }
 .ds-session-row-span { font-size: var(--fs-micro); color: var(--fg-3); }
 
 /* DevRow */

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

@@ -220,7 +220,7 @@
   padding: var(--space-1) var(--space-2);
   background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
 }
-.ds-bulkbar-count { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); }
+.ds-bulkbar-count { font-size: var(--fs-sm); font-weight: var(--fw-medium, 500); color: var(--fg-2); }
 /* BulkBar is a toolbar (it even declares role=toolbar): compact rect buttons,
    quiet destructive outline - the app arm-confirms destructive bulk actions
    via ConfirmDialog, so the strip never needs a loud CTA. */
@@ -445,7 +445,7 @@
    design; dashed was this system's OTHER "drop target" vocabulary
    (.panel-docs, kits-appended.css) leaking in here by copy-paste. */
 .ds-dropzone {
-  border: var(--bw-rule) solid var(--rule);
+  border: var(--bw-hair) solid var(--rule);
   border-radius: var(--r-3); background: var(--bg);
   transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }

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

@@ -10,30 +10,21 @@
    and each part's own layout (aside becomes a full-width card below the body
    instead of a right-column card) changed. Centered text, capped measure.
 
-   DE-CENTERED 2026-07-31: the flex-stack architecture from the restyle above
-   is kept as-is (still a single-column stack, still the oversized display
-   lead, still the full-width aside card) -- this is NOT a revert to the old
-   two-column grid. What changed is alignment only: `align-items: center` /
-   `text-align: center` read as the textbook dead-centered "AI portfolio"
-   hero the moment the oversized display type is involved, regardless of
-   architecture. Swapping to flex-start + left text-align, plus a
-   --space-6 left inset inside the unchanged --stage-wide container, pushes
-   the whole block toward the left edge so the oversized title crops against
-   real whitespace on the right instead of sitting symmetric in the middle --
-   editorial tension from a one-axis asymmetry, no grid architecture
-   reintroduced. */
+   RE-CENTERED 2026-08-09: reverted the 2026-07-31 de-centering (flex-start +
+   left text-align + left inset) back to a centered stack -- the airy,
+   dead-centered arrangement is the intended house look after all, matching
+   the plain centered-lead reference this hero is now aligned to. Aside card
+   dropped its filled background/accent bar for a plain top-rule divider. */
 .ds-hero {
   padding: var(--space-9) 0 var(--space-8);
-  display: flex; flex-direction: column; align-items: flex-start;
+  display: flex; flex-direction: column; align-items: center;
   gap: var(--space-5);
   max-width: var(--stage-wide);
-  margin-inline-start: 0;
-  padding-inline-start: var(--space-6);
-  text-align: left;
+  text-align: center;
   position: relative; isolation: isolate;
 }
-.ds-hero-head { display: grid; gap: var(--space-3); justify-items: start; }
-.ds-hero-body  { margin-inline: 0; }
+.ds-hero-head { display: grid; gap: var(--space-3); justify-items: center; margin-inline: auto; }
+.ds-hero-body  { margin-inline: auto; }
 /* The stat/badge/CTA cluster now sits as a full-width card BELOW the body
    copy, left-aligned with the rest of the stack, rather than a right-offset
    column -- still carries its own visual weight via the top accent bar
@@ -42,18 +33,14 @@
 .ds-hero-aside {
   position: relative; isolation: isolate;
   width: 100%; max-width: 46ch;
+  margin-inline: auto;
   display: flex; flex-direction: column;
   justify-content: space-between; gap: var(--space-5);
-  background: var(--bg-2);
-  border-radius: var(--r-2);
-  padding: calc(var(--space-4) + var(--bw-chunk)) var(--space-5) var(--space-5);
+  background: transparent;
+  border-top: var(--bw-hair, 1px) solid var(--rule);
+  padding: var(--space-4) var(--space-5) var(--space-5);
   text-align: left;
 }
-.ds-hero-aside::before {
-  content: ''; position: absolute; left: 0; right: 0; top: 0;
-  height: var(--bw-chunk); background: var(--accent);
-  border-radius: var(--bw-chunk) var(--bw-chunk) 0 0;
-}
 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
 .ds-hero-stat {
   font-family: var(--ff-mono); font-size: var(--fs-sm);
@@ -81,7 +68,7 @@
      feel this title wants while clearing enough vertical room that letters
      stop colliding. */
   line-height: 1.02; letter-spacing: var(--tr-tighter);
-  margin: 0; max-width: 20ch; text-wrap: balance;
+  margin: 0; max-width: 16ch; margin-inline: auto; text-wrap: balance;
 }
 .ds-hero-body {
   font-family: var(--ff-body); font-size: var(--fs-xl);
@@ -175,7 +162,7 @@
    ============================================================ */
 .ds-marquee {
   overflow: hidden; width: 100%;
-  border-block: var(--bw-rule) solid var(--fg);
+  border-block: var(--bw-hair) solid var(--rule-strong);
   padding: var(--space-2) 0;
   font-family: var(--ff-display); font-weight: 600;
   text-transform: uppercase; letter-spacing: var(--tr-caps);

package/src/css/app-shell/otp-input.css

@@ -10,7 +10,7 @@
   font-weight: 600;
   color: var(--fg);
   background: var(--bg-2);
-  border: var(--bw-rule) solid var(--rule);
+  border: var(--bw-hair) solid var(--rule);
   border-radius: var(--r-1);
   transition: border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
 }

package/src/css/app-shell/plugins-config.css

@@ -19,7 +19,7 @@
   padding: var(--space-3) var(--space-4);
   border-bottom: var(--bw-hair) solid var(--rule); flex: 0 0 auto;
 }
-.ds-plugins-title { font-size: var(--fs-md); font-weight: 700; color: var(--fg); }
+.ds-plugins-title { font-size: var(--fs-md); font-weight: 600; color: var(--fg); }
 .ds-plugins-close {
   background: none; border: none; color: var(--fg-3); cursor: pointer;
   font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: var(--r-1);

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

@@ -18,7 +18,7 @@
 .btn:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-1); }
 .btn-primary {
   background: var(--accent); color: var(--accent-fg);
-  font-weight: 700;
+  font-weight: 600;
 }
 .btn-primary:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow-2); }
 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 var(--bw-hair) var(--fg); }

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/src/css/app-shell/slider.css

@@ -27,7 +27,7 @@
   width: 18px; height: 18px;
   border-radius: var(--r-pill);
   background: var(--bg-1);
-  border: var(--bw-rule) solid var(--accent);
+  border: var(--bw-hair) solid var(--accent);
   box-shadow: var(--shadow-1);
   transform: translate(-50%, -50%);
   pointer-events: none;

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

@@ -41,8 +41,8 @@ body.canvas-host { background: transparent !important; }
 
 :root {
   --app-status-h: 26px;
-  --app-topbar-h: var(--size-lg);
-  --app-crumb-h: var(--size-sm);
+  --app-topbar-h: 64px;
+  --app-crumb-h: 56px;
 }
 
 .app-topbar {
@@ -51,7 +51,7 @@ body.canvas-host { background: transparent !important; }
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
   padding: var(--space-2-5) var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 97%, transparent);
+  border-bottom: var(--bw-hair, 1px) solid var(--rule);
 }
 
 /* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
@@ -64,7 +64,7 @@ body.canvas-host { background: transparent !important; }
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
   padding: var(--space-2) var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 97%, transparent);
+  border-bottom: var(--bw-hair, 1px) solid var(--rule);
 }
 .app-chrome > .app-topbar,
 .app-chrome > .app-crumb {
@@ -134,7 +134,6 @@ body.canvas-host { background: transparent !important; }
    change. */
 .app-topbar nav a.active {
   color: var(--accent-ink);
-  background: color-mix(in oklab, var(--accent) 16%, transparent);
   box-shadow: inset 0 -2px 0 0 var(--accent);
   font-weight: 600;
 }

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;