anentrypoint-design 0.0.449 → 0.0.451

package/package.json

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

@@ -46,7 +46,12 @@ import { EmojiPicker, CommandPalette, AuthModal, BootOverlay, SettingsPopover, V
 
 const h = webjsx.createElement;
 
-const CHANNEL_ICON = { voice: 'speaker', forum: 'forum', threaded: 'thread', announcement: 'megaphone', page: 'page', text: 'hash' };
+// announcement previously used 'megaphone', whose two-arc speaker-cone SVG
+// path reads as visually near-identical to the voice channel's 'speaker'
+// icon at rail size (15px) -- easy to confuse a text-only broadcast channel
+// for a live voice room. 'send' (paper-plane) reads distinctly as
+// one-way/outbound at a glance and shares no silhouette with 'speaker'.
+const CHANNEL_ICON = { voice: 'speaker', forum: 'forum', threaded: 'thread', announcement: 'send', page: 'page', text: 'hash' };
 
 export function mountCommunityApp(root, adapter = {}) {
     if (!root) throw new Error('mountCommunityApp: root required');
@@ -154,7 +159,18 @@ export function mountCommunityApp(root, adapter = {}) {
             const isYou = selfId && String(m.userId) === String(selfId);
             const reactions = Array.isArray(m.reactions) ? m.reactions.map(r => ({ emoji: r.emoji, count: r.count != null ? r.count : (r.users ? r.users.length : 1), you: !!(r.you || (r.users && selfId && r.users.includes(selfId))) })) : null;
             const msgActions = [
-                { label: 'react', title: 'react to ' + username + '\'s message', icon: 'smile', onClick: () => A.reactToMessage && A.reactToMessage(m.id, m.userId) },
+                {
+                    label: 'react', title: 'react to ' + username + '\'s message', icon: 'smile',
+                    onClick: (e) => {
+                        if (!A.reactToMessage) return;
+                        const rect = e && e.currentTarget && e.currentTarget.getBoundingClientRect ? e.currentTarget.getBoundingClientRect() : null;
+                        if (api.emojiPicker) {
+                            api.emojiPicker.show(rect ? rect.left : 200, rect ? rect.bottom + 4 : 200, (em) => A.reactToMessage(m.id, m.userId, em));
+                        } else {
+                            A.reactToMessage(m.id, m.userId);
+                        }
+                    },
+                },
                 { label: 'reply', title: 'reply to ' + username, icon: 'corner-up-left', onClick: () => A.startReply && A.startReply({ id: m.id, userId: m.userId, username, content: m.content }) },
                 isYou ? { label: 'delete', title: 'delete message', icon: 'trash', onClick: () => A.deleteMessage && A.deleteMessage(m.id) } : null,
             ].filter(Boolean);

package/src/components/chat/threads.js

@@ -69,7 +69,12 @@ export function Chat({ title = 'chat', sub, messages = [], composer, header, sug
 
 export const AICAT_FACE = ` /\\_/\\\n( o.o )\n > ^ <`;
 
-export function AICatPortrait({ name = 'aicat', status = 'idle', face } = {}) {
+// `status` is opt-in and omitted by default: this component renders IDENTITY
+// (who you're talking to — name, avatar/face), not live conversation state.
+// A caller that also renders a thread head with its own status (AICat below)
+// should leave `status` unset here so there is exactly one place on the page
+// showing dynamic state — passing it back in duplicates that source of truth.
+export function AICatPortrait({ name = 'aicat', status, face } = {}) {
     return h('div', { class: 'aicat-portrait' },
         // role="img" collapses the ASCII art into a single named image for a
         // screen reader (otherwise the slashes and parens are read out
@@ -79,7 +84,9 @@ export function AICatPortrait({ name = 'aicat', status = 'idle', face } = {}) {
         h('pre', { class: 'aicat-face', role: 'img', 'aria-label': `${name} portrait` }, face || AICAT_FACE),
         h('div', { class: 'aicat-meta' },
             h('span', { class: 'name' }, name),
-            h('span', { class: 'status', 'aria-label': `status: ${status}` }, h('span', { class: 'dot ds-dot ds-dot-on', 'aria-hidden': 'true' }), ' ', status)
+            status != null
+                ? h('span', { class: 'status', 'aria-label': `status: ${status}` }, h('span', { class: 'dot ds-dot ds-dot-on', 'aria-hidden': 'true' }), ' ', status)
+                : null
         )
     );
 }

package/src/components/content/hero.js

@@ -1,16 +1,18 @@
-// Masthead blocks — the page-opening surfaces: Hero (the asymmetric
-// two-column grid), HeroFromPageData (the same shape driven by a parsed
-// page-data object), PageHeader (display and dense forms), Marquee (the
-// signature ticker) and Manifesto (long-form prose block).
+// Masthead blocks — the page-opening surfaces: Hero (a left-aligned,
+// left-inset single-column stack: oversized display title, body copy, then
+// the badge/CTA cluster as a full-width card below — offset off the left
+// edge rather than dead-centered), HeroFromPageData (the same shape driven
+// by a parsed page-data object), PageHeader (display and dense forms),
+// Marquee (the signature ticker) and Manifesto (long-form prose block).
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 const h = webjsx.createElement;
 
 export function Hero({ eyebrow, title, body, accent, actions, badges }) {
-    // Eyebrow + title share the title grid-area so the named-area layout stays
-    // intact; body occupies the wide left column, badges + actions stack in
-    // the narrow right column so it carries real visual weight instead of
-    // sitting empty beside the body copy.
+    // Eyebrow + title stack at the top of the single-column layout; badges +
+    // actions render into a full-width card BELOW the body copy (.ds-hero-aside)
+    // rather than a side column, so it still carries real visual weight instead
+    // of sitting empty beside the body copy.
     const badgeList = Array.isArray(badges) ? badges.filter(Boolean) : [];
     const badgeRow = badgeList.length
         ? h('div', { class: 'ds-hero-stats' }, ...badgeList.map((b, i) =>

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

@@ -8,21 +8,37 @@
    specific to the retired Acid Editorial identity. All child classes/markup
    are UNCHANGED (no JS component edit needed) -- only the grid arrangement
    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. */
+   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. */
 .ds-hero {
   padding: var(--space-9) 0 var(--space-8);
-  display: flex; flex-direction: column; align-items: center;
+  display: flex; flex-direction: column; align-items: flex-start;
   gap: var(--space-5);
   max-width: var(--stage-wide);
-  text-align: center;
+  margin-inline-start: 0;
+  padding-inline-start: var(--space-6);
+  text-align: left;
   position: relative; isolation: isolate;
 }
-.ds-hero-head { display: grid; gap: var(--space-3); justify-items: center; }
-.ds-hero-body  { margin-inline: auto; }
+.ds-hero-head { display: grid; gap: var(--space-3); justify-items: start; }
+.ds-hero-body  { margin-inline: 0; }
 /* The stat/badge/CTA cluster now sits as a full-width card BELOW the body
-   copy, centered, rather than a right-offset column -- still carries its own
-   visual weight via the top accent bar (rotated from the former left spine)
-   so it still reads as a deliberate block, not an afterthought. */
+   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
+   (rotated from the former left spine) so it still reads as a deliberate
+   block, not an afterthought. */
 .ds-hero-aside {
   position: relative; isolation: isolate;
   width: 100%; max-width: 46ch;
@@ -54,23 +70,23 @@
      Snapping to either changes the hero's whole optical weight. */
   font-size: clamp(40px, 9cqi, 116px);
   line-height: 0.96; letter-spacing: var(--tr-tighter);
-  margin: 0 auto; max-width: 20ch; text-wrap: balance;
+  margin: 0; max-width: 20ch; text-wrap: balance;
 }
 .ds-hero-body {
   font-family: var(--ff-body); font-size: var(--fs-xl);
-  line-height: 1.45; margin: 0 auto; max-width: 46ch;
+  line-height: 1.45; margin: 0; max-width: 46ch;
   color: var(--fg-2);
 }
 /* The lead phrase in the title — printed in the electric lead, not glowing. */
 .ds-hero-accent { color: var(--accent-ink); font-weight: 700; }
 .ds-hero-actions {
   display: flex; gap: var(--space-2, 10px); flex-wrap: wrap;
-  justify-content: center; margin-top: var(--space-hair, 4px);
+  justify-content: flex-start; margin-top: var(--space-hair, 4px);
 }
 /* Below this width the aside card's own internal rhythm (stat rows still
    stacked vertically at full width) is already correct for a narrow column —
    no separate breakpoint override needed now that .ds-hero is always a
-   single-column centered stack at every width. */
+   single-column left-aligned stack at every width. */
 @container (max-width: 900px) {
   .ds-hero { padding: var(--space-7) 0 var(--space-6); }
 }
@@ -80,6 +96,21 @@
    Section grouping
    ============================================================ */
 .ds-section { margin: var(--space-8) 0; }
+/* A .ds-section's own margin-top exists so a BARE first section (no element
+   above it inside .app-main/.ds-app-surface) still gets the --space-8 lead
+   from something. But .app-main and .ds-tier are flex/grid containers, where
+   sibling margins never collapse -- so once ANY preceding sibling supplies
+   its own trailing space (a .panel's --space-4 bottom margin, or a prior
+   .ds-section's own --space-8 bottom margin), that top margin stacks ON TOP
+   of it instead of coordinating into one gap: measured live, two adjacent
+   .ds-section elements sat 192px apart (96 + 96) instead of 96, and a .panel
+   followed by a .ds-section sat ~136px apart instead of the intended single
+   gap. Zeroing the top margin on every NON-first .ds-section collapses the
+   pair back to one coordinated gap, supplied by whichever side already
+   carries it (the preceding sibling's own bottom margin, or the .ds-section's
+   trailing margin below) -- same "gap is owned by one side only" pattern as
+   .ds-panel-gap + .ds-panel-gap / .row + .row elsewhere in this file. */
+* + .ds-section { margin-top: 0; }
 /* Compact section (e.g. a PageHeader used as a page's first element): no large
    leading margin, modest trailing margin — top-aligns without consumer overrides. */
 .ds-section-compact { margin-top: 0; margin-bottom: var(--space-4); }

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

@@ -638,7 +638,21 @@
    it leaves a lone thread column growing to 1400px+ with no other use of
    the extra width. This wrapper adds a persistent "thread info" rail once
    there is room to spare, instead of just widening the message column. */
-.ds-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--space-3); }
+/* 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); }
 .ds-chat-layout > .chat { min-width: 0; }
 .ds-chat-detail { display: none; }
 @media (min-width: 1100px) {
@@ -874,6 +888,67 @@
 }
 .ds-pattern-notes strong { color: var(--fg); font-weight: 600; }
 
+/* .panel.panel-docs — documentation/annotation chrome, visibly different from
+   the plain .panel the real interface renders in. aicat stacks its "about
+   this kit" caption directly under the live chat surface; identical card
+   chrome on both made the meta-explanation read as part of the product
+   instead of a caption about it. Dashed border reuses the .ds-dropzone
+   affordance vocabulary (a dashed edge already reads as "not solid content"
+   in this system) and the tint is a quiet, low-saturation wash rather than
+   an accent color, so it never competes with real accent-toned UI state. */
+.panel.panel-docs {
+  border-style: dashed;
+  border-color: var(--rule-strong);
+  background: color-mix(in oklab, var(--fg) 4%, var(--bg-2));
+  box-shadow: none;
+}
+.panel.panel-docs .panel-title {
+  color: var(--fg-3);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.panel.panel-docs .panel-title::before {
+  content: 'docs · ';
+  color: var(--fg-3);
+}
+
+/* .ds-kit-controls — collapsed-by-default dev/demo toggle drawer. Reference
+   state-toggle pills (ready/loading/empty/error and similar) are scaffolding
+   for exercising a kit's other states, not live content; sitting exposed in
+   the flow next to real content made them read as leftover dev debris. A
+   native <details>/<summary> disclosure needs no bespoke open/close state or
+   JS and is keyboard/AT-operable for free — closed by default, opens on
+   click or Enter/Space on the summary. */
+.ds-kit-controls {
+  border: var(--bw-hair) dashed var(--rule);
+  border-radius: var(--r-2);
+  margin: 0 0 var(--space-4);
+  background: var(--bg);
+}
+.ds-kit-controls summary {
+  cursor: pointer;
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-xs);
+  color: var(--fg-3);
+  list-style: none;
+}
+.ds-kit-controls summary::-webkit-details-marker { display: none; }
+.ds-kit-controls summary::before { content: '[+] '; }
+.ds-kit-controls[open] summary::before { content: '[-] '; }
+.ds-kit-controls summary:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+.ds-kit-controls-body {
+  padding: 0 var(--space-3) var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
 /* Swatch cell wrapper (system_primer pairs it with .ds-swatch-col, which owns
    the column/gap). This adds only what the wrapper itself needs: a minimum-zero
    track so long token names ellipsize inside the grid instead of widening it. */

package/src/css/app-shell/panel-row.css

@@ -180,30 +180,46 @@ a.row:hover .meta, .row[role="button"]:hover .meta { color: var(--accent-ink); t
 /* A row with no leading code/index drops the empty first column so the title
    takes the full width instead of wrapping in the narrow code gutter. */
 .row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; }
-/* Template-rendered index/example rows (site/theme.mjs "why design" +
-   "live examples" panels, via panelNode()/examplesNode() in
-   src/page-html/client-script.js) never emit a leading ".code" span for
-   these entries (no `code` field on the "features" items), so their actual
-   children are title + an inline ".meta.dim" description + a trailing
-   ".ds-row-arrow" — three items, but with no ".code" as the first child the
-   base 3-track .row grid (minmax(80px,12ch) / minmax(0,1fr) / auto) still
-   places the FIRST item (the title) into the narrow 12ch leading track
-   meant for a code index, not the 1fr track. ".ds-row-arrow" also had no
-   rule at all, and ".meta" is nowrap by default, so on longer descriptions
-   ("…never borders", "…--fs-* tokens") the un-wrapped text overflows its
-   cramped column straight into the arrow's box. Rows carrying both a dim
-   meta description and an arrow get their own two-row template instead:
-   title + arrow share row 1, the description drops to its own full-width
-   row 2 and wraps normally — matching how every other multi-line row
-   pattern in this file (.ds-row-detail) already gets a dedicated line. */
+/* Template-rendered index/example rows (site/theme.mjs panels, via
+   panelNode()/examplesNode() in src/page-html/client-script.js) share one
+   row template across every panel-driven section on the homepage — "ui
+   kits", "previews", "file browser", "web components", "public api", "why
+   design", "live examples". Every one of those rows carries an inline
+   ".meta.dim" description and a trailing ".ds-row-arrow"; some ALSO carry a
+   leading ".code" span (file_browser/web_components/api_exports items have
+   a `code` field, "why design"/"live examples" items do not) — the
+   selector below has to handle both shapes as ONE template, not two.
+   Un-augmented, the base 3-track .row grid (minmax(80px,12ch) /
+   minmax(0,1fr) / auto) either crams the title into the narrow 12ch code
+   gutter (no-code rows) or, worse, auto-places an EXPLICIT-grid orphan:
+   once .title/.ds-row-arrow/.meta.dim below are pinned to explicit
+   grid-column/grid-row, a .code span left on `auto` placement can't share
+   row 1 with .title (already occupying column 1) and gets pushed into a
+   phantom row 3, rendering as a stray floating "fb"/"wc"/"api" line under
+   the description — the exact bug this rule exists to prevent, previously
+   left unfixed for the has-code case. Rows carrying a dim meta description
+   and an arrow always get the two-row template: code + title + arrow share
+   row 1 (code first, in its own narrow track), the description drops to
+   its own full-width row 2 and wraps normally — matching how every other
+   multi-line row pattern in this file (.ds-row-detail) already gets a
+   dedicated line. */
 .row:has(.meta.dim):has(.ds-row-arrow) {
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
   grid-template-rows: auto auto;
   row-gap: var(--space-1);
 }
-.row:has(.meta.dim):has(.ds-row-arrow) .title { grid-column: 1; grid-row: 1; }
-.row:has(.meta.dim):has(.ds-row-arrow) .ds-row-arrow { grid-column: 2; grid-row: 1; }
+.row:has(.meta.dim):has(.ds-row-arrow) .code { grid-column: 1; grid-row: 1; }
+.row:has(.meta.dim):has(.ds-row-arrow) .title { grid-column: 2; grid-row: 1; }
+.row:has(.meta.dim):has(.ds-row-arrow) .ds-row-arrow { grid-column: 3; grid-row: 1; }
 .row:has(.meta.dim):has(.ds-row-arrow) .meta.dim { grid-column: 1 / -1; grid-row: 2; }
+/* No-code rows ("why design", "live examples") drop the empty leading
+   gutter so the title starts flush left instead of leaving a dead 12ch
+   column — same fix .row-nocode already applies to the base template. */
+.row:has(.meta.dim):has(.ds-row-arrow):not(:has(.code)) {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+.row:has(.meta.dim):has(.ds-row-arrow):not(:has(.code)) .title { grid-column: 1; }
+.row:has(.meta.dim):has(.ds-row-arrow):not(:has(.code)) .ds-row-arrow { grid-column: 2; }
 .row .meta.dim {
   white-space: normal;
   min-width: 0;

package/types/components.d.ts

@@ -907,8 +907,7 @@ export declare const AICAT_FACE: any;
 export interface AICatPortraitProps {
     /** @default 'aicat' */
     name?: string;
-    /** @default 'idle' */
-    status?: string;
+    status?: any;
     face?: any;
 }
 export declare function AICatPortrait(props?: AICatPortraitProps): VNode;