anentrypoint-design 1.0.14 → 1.0.16

package/package.json

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

@@ -15,9 +15,18 @@ const h = webjsx.createElement;
 // call site having to remember to wire ThemeToggle() in by hand. Pass
 // `themeToggle: false` to opt a shell out (e.g. a kit that renders its own).
 export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search, themeToggle = true } = {}) {
+    // `search` is either a plain placeholder string (Topbar renders the
+    // default uncontrolled input itself, and owns the icon below) or a
+    // caller-built VElement (has .type/.props — e.g. SearchInput(), a
+    // component that already renders its own icon + input + clear button).
+    // A VElement renders as-is with NO extra wrapper: SearchInput's own
+    // markup already covers the icon and the field, so wrapping it in
+    // Topbar's own '.app-search' icon+label previously doubled the search
+    // glyph (one from Topbar, one from inside SearchInput).
+    const isElement = search && typeof search === 'object' && 'type' in search;
     return h('header', { class: 'app-topbar', role: 'banner' },
         Brand({ name: brand, leaf }),
-        search ? h('label', { class: 'app-search' },
+        isElement ? search : (search ? h('label', { class: 'app-search' },
             // Line-icon, not the literal word "search" as a pseudo-glyph: the
             // text stand-in inherited .app-search .icon's 0.6 opacity, which
             // dropped --fg-3 to 3.74:1 on --bg-2 and failed AA as real text.
@@ -25,15 +34,8 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
             // contrast rule no longer applies to it and the affordance stops
             // depending on a colour value at all.
             h('span', { class: 'icon', 'aria-hidden': 'true' }, Icon('search', { size: 15 })),
-            // `search` is either a plain placeholder string (renders the
-            // default uncontrolled input) or a caller-built VElement (has
-            // .type/.props — e.g. a controlled <input> wired to app state)
-            // rendered as-is. Stringifying a VElement into placeholder/
-            // aria-label previously produced literal "[object Object]" text.
-            (search && typeof search === 'object' && 'type' in search)
-                ? search
-                : h('input', { type: 'search', name: 'q', placeholder: search, 'aria-label': `search ${search}` })
-        ) : null,
+            h('input', { type: 'search', name: 'q', placeholder: search, 'aria-label': `search ${search}` })
+        ) : null),
         h('nav', { 'aria-label': 'main navigation' }, ...items.map(([label, href]) => {
             const cleanLabel = String(label).replace(' ->', '');
             return h('a', {
@@ -149,8 +151,43 @@ export function Side({ sections = [] } = {}) {
     }));
 }
 
+// Collapse state persists per-origin so the choice survives navigation
+// between kit pages (the status bar is chrome, not per-page content).
+const STATUS_COLLAPSE_KEY = 'ds-status-collapsed';
+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 bar = app && app.querySelector('.app-status');
+    if (!bar) return;
+    const next = !bar.classList.contains('is-collapsed');
+    bar.classList.toggle('is-collapsed', next);
+    const btn = bar.querySelector('.app-status-toggle');
+    if (btn) btn.setAttribute('aria-expanded', next ? 'false' : 'true');
+    // .app-main's bottom padding mirrors the bar's real height via this var
+    // (set on .app, read by .app-main's padding-bottom) so collapsing frees
+    // the reserved clearance instead of leaving a dead gap.
+    if (app) app.style.setProperty('--app-status-h-live', next ? 'var(--space-4)' : 'var(--app-status-h)');
+    try { localStorage.setItem(STATUS_COLLAPSE_KEY, next ? '1' : '0'); } catch (_) { /* private mode: state just won't persist */ }
+}
+
 export function Status({ left = [], right = [] } = {}) {
-    return h('footer', { class: 'app-status', role: 'contentinfo' },
+    const collapsed = isStatusCollapsed();
+    // Sync .app-main's reserved clearance to the persisted collapse state on
+    // first render, matching what toggleStatusCollapsed sets on click -- the
+    // 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');
+        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 },
+        h('button', {
+            class: 'app-status-toggle', type: 'button',
+            'aria-label': 'toggle status bar', 'aria-expanded': collapsed ? 'false' : 'true',
+            onclick: (e) => toggleStatusCollapsed(e.currentTarget),
+        }, Icon(collapsed ? 'chevron-up' : 'chevron-down', { size: 12 })),
         ...left.map((t, i) => h('span', { key: 'l' + i, class: 'item' }, t)),
         h('span', { key: 'spread', class: 'spread', 'aria-hidden': 'true' }),
         ...right.map((t, i) => h('span', { key: 'r' + i, class: 'item' }, t))

package/src/components/shell/icons.js

@@ -20,6 +20,7 @@ export const ICON_PATHS = {
     screen: '<rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/>',
     phone: '<path d="M5 4h3l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>',
     members: '<circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0M16 6a3 3 0 0 1 0 6M21 20a6 6 0 0 0-4-5.7"/>',
+    user: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>',
     menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
     settings: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/>',
     paperclip: '<path d="M21 11.5 12.5 20a5 5 0 0 1-7-7l8-8a3.5 3.5 0 0 1 5 5l-8 8a2 2 0 0 1-3-3l7.5-7.5"/>',

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

@@ -280,6 +280,10 @@
 }
 .ds-err-numeral {
   font-family: var(--ff-mono); font-size: clamp(56px, 20vw, 120px);
+  /* Shares the headline's weight (base.css h1: font-weight:600) so the two
+     most important elements on the page read as one weight relationship
+     instead of a thin numeral against a bold headline. */
+  font-weight: 600;
   line-height: 1; color: var(--panel-text-3); letter-spacing: -0.03em;
 }
 .ds-err-path {

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

@@ -17,10 +17,10 @@
 .btn { background: var(--bg-2); color: var(--fg); border-color: var(--rule); }
 .btn:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-1); }
 .btn-primary {
-  background: var(--green); color: var(--on-color);
+  background: var(--accent); color: var(--accent-fg);
   font-weight: 700;
 }
-.btn-primary:hover { background: var(--fg); color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow-2); }
+.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 2px var(--fg); }
 .btn-ghost:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); transform: translateY(-1px); }
 .btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px); box-shadow: none; }

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

@@ -79,6 +79,14 @@ body.canvas-host { background: transparent !important; }
 .app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
 .app-topbar > .brand { flex: 0 0 auto; }
 .app-topbar > .app-search { flex: 1 1 auto; }
+/* SearchInput() passed directly as Topbar's search prop renders with no
+   Topbar-owned wrapper (see Topbar's isElement branch). Its own outer span
+   (.ds-search-input-wrap) is display:contents, so .ds-search-field becomes
+   the actual direct .app-topbar flex-item child — an inline-flex box that
+   otherwise shrinks to its content and starves the input's own width:100%
+   of anything to grow into, truncating the placeholder. Matches
+   .app-search's flex-basis above so both search-slot shapes size the same. */
+.app-topbar > .ds-search-field { flex: 1 1 auto; max-width: 360px; min-width: 0; }
 .app-topbar > nav { margin-left: auto; }
 /* Utility cluster grouping: the theme toggle sits after the repo-info nav
    links with no visual separation between the two groups, so the row read
@@ -310,7 +318,13 @@ body.canvas-host { background: transparent !important; }
 }
 
 .app-main {
-  padding: var(--space-5) var(--pad-x) 0;
+  /* Bottom padding reserves clearance equal to the status bar's own height so
+     the last scrolled child never sits flush behind .app-status (a flex
+     sibling pinned below .app-main in the .app column, not a child of it).
+     --app-status-h-live tracks the bar's collapsed/expanded state (set by
+     the toggle in app-shell.js) and falls back to the full bar height when
+     unset (bar starts expanded / JS hasn't run yet). */
+  padding: var(--space-5) var(--pad-x) var(--app-status-h-live, var(--app-status-h));
   min-width: 0;
   /* Full-height flex column so a single flex:1 child (e.g. .chat) fills the
      region between crumb and status instead of floating at content height. */
@@ -458,6 +472,25 @@ body.canvas-host { background: transparent !important; }
    agent target) drop in priority order instead of breaking mid-word onto a
    second line. */
 .app-status { flex-wrap: nowrap; overflow: hidden; }
+
+/* Collapse control — the status bar permanently claims --app-status-h of
+   viewport on every page; this toggle lets it shrink to a thin reachable
+   strip instead. The bar itself stays a fixed-height flex child (never
+   display:none) so the toggle remains reachable to re-expand. */
+.app-status-toggle {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; padding: 0; margin-right: var(--space-1);
+  background: transparent; border: none; color: var(--fg-3); cursor: pointer;
+  border-radius: var(--r-0);
+}
+.app-status-toggle:hover { color: var(--fg); background: var(--bg-3); }
+.app-status-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.app-status.is-collapsed {
+  height: var(--space-4); min-height: var(--space-4);
+  overflow: hidden;
+}
+.app-status.is-collapsed .item,
+.app-status.is-collapsed .spread { display: none; }
 @media (max-width: 1100px) {
   .app-status .item:last-of-type:not(:only-of-type) { display: none; }
 }