anentrypoint-design 1.0.15 → 1.0.17

package/package.json

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

@@ -151,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

@@ -222,6 +222,12 @@ body.canvas-host { background: transparent !important; }
 .app-side-shell {
   background: var(--bg); overflow-y: auto; min-height: 0;
   scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
+  /* A visible-only-while-scrolled thin scrollbar was the sole cue that this
+     and .app-main are two independent scroll regions -- easy to miss,
+     reading as a layout glitch (sidebar not moving) rather than an
+     intentional split view. A permanent hairline border reads at a glance
+     regardless of scroll/hover state. */
+  border-right: 1px solid var(--rule);
   /* Bottom-edge fade: a rail longer than the viewport otherwise shows only
      the thin scrollbar track as its sole "there is more below" cue. Mirrors
      the horizontal fade already used by .os-instances (src/kits/os/theme.css)
@@ -318,7 +324,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. */
@@ -466,6 +478,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; }
 }