anentrypoint-design 0.0.414 → 0.0.416

package/dist/ui_kits/terminal/app.js

@@ -13,7 +13,41 @@ const liveTranscript = [
     { kind: 'cmd', text: 'echo "ready"' },
     { kind: 'out', text: 'ready' }
 ];
-const live = { input: '', cwd: '~/dev/design' };
+const live = { input: '', cwd: '~/dev/design', phase: 'ready' };
+const PHASES = ['ready', 'loading', 'empty', 'error'];
+
+// Line-shaped shimmer for scrollback still being read off disk. Reuses
+// .ds-event-row-skeleton + .ds-skel* (app-shell/files.css); a cli row is the
+// same prompt-mark / text rhythm the primitive was cut for.
+function ScrollbackSkeleton() {
+    return h('div', {},
+        ...Array.from({ length: 5 }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-event-row-skeleton' },
+            h('span', { class: 'ds-skel ds-skel-rank' }),
+            h('span', { class: 'ds-skel ds-skel-title' })
+        ))
+    );
+}
+
+function ScrollbackEmpty() {
+    return h('div', { class: 'ds-empty-state' },
+        h('div', { class: 'ds-empty-state-glyph' }, '$'),
+        h('p', { class: 'ds-empty-state-msg' }, 'nothing run in this shell yet'),
+        h('p', { class: 'ds-empty-state-hint' }, 'commands and their output land here in order. type one below and press enter — scrollback survives until you clear it.')
+    );
+}
+
+function ScrollbackError() {
+    return h('div', { class: 'ds-alert ds-alert-error' },
+        h('span', { class: 'ds-alert-icon' }, '!'),
+        h('div', { class: 'ds-alert-content' },
+            h('div', { class: 'ds-alert-title' }, 'shell exited (code 137)'),
+            h('div', { class: 'ds-alert-message' }, 'the pty was killed by the OOM reaper, so scrollback is frozen and nothing you type now would reach a shell. a new session starts in the same working directory.'),
+            h('div', { class: 'ds-alert-retry' },
+                h('button', { class: 'btn', onclick: () => { live.phase = 'ready'; kit.render(); } }, 'start new session')
+            )
+        )
+    );
+}
 
 // Demo loop — decorative showcase of the .cli row primitives playing back
 // a build-pipeline transcript. Clearly separated from the live terminal.
@@ -26,32 +60,57 @@ const demoScript = [
     { d: 220,  kind: 'cmd', text: 'npm run build' },
     { d: 180,  kind: 'out', text: '> 247420-design build' },
     { d: 180,  kind: 'out', text: '[247420] css gzip+base64: 18.4kb (raw 96.1kb)' },
-    { d: 220,  kind: 'ok',  text: '✓ bundle written to dist/247420.js (84.0 kb)' },
+    { d: 220,  kind: 'ok',  text: 'bundle written to dist/247420.js (84.0 kb)' },
     { d: 280,  kind: 'cmd', text: 'npm test' },
     { d: 500,  kind: 'out', text: '116 assertions, 0 failures' },
-    { d: 200,  kind: 'ok',  text: '✓ all tests passed' },
+    { d: 200,  kind: 'ok',  text: 'all tests passed' },
     { d: 320,  kind: 'cmd', text: 'git push' },
     { d: 240,  kind: 'out', text: 'remote: Deploying to gh-pages…' },
-    { d: 900,  kind: 'ok',  text: '✓ deploy in 11s' }
+    { d: 900,  kind: 'ok',  text: 'deploy in 11s' }
 ];
 const reduced = typeof matchMedia !== 'undefined'
     && matchMedia('(prefers-reduced-motion: reduce)').matches;
 const demo = { visible: reduced ? demoScript.slice() : [], looping: !reduced };
 
+// Commands the live shell has run, newest last — what `history (up)` walks.
+const history = [];
+let historyIdx = -1;
+
+// Empties the scrollback and drops the shell into its own empty state, which is
+// the honest reading of a cleared shell (the empty panel explains what lands
+// there). Both the sidebar item and Cmd/Ctrl+K call this.
+function clearScrollback() {
+    liveTranscript.length = 0;
+    live.phase = 'empty';
+    historyIdx = -1;
+    kit.render();
+}
+
+// Walks back through previously-run commands into the input, oldest-last like a
+// real shell. With no history it says so in the scrollback instead of silently
+// doing nothing — the whole point of this pass.
+function recallHistory() {
+    if (!history.length) {
+        if (live.phase !== 'ready') live.phase = 'ready';
+        liveTranscript.push({ kind: 'cmt', text: '# nothing in history yet — run a command first' });
+        kit.render();
+        return;
+    }
+    historyIdx = historyIdx < 0 ? history.length - 1 : Math.max(0, historyIdx - 1);
+    live.input = history[historyIdx];
+    if (live.phase !== 'ready') live.phase = 'ready';
+    kit.render();
+}
+
+const LINE_PROMPTS = { cmt: '#', cmd: '$', out: '·', ok: '+', warn: '!', log: '·' };
 function Line(l, i, opts = {}) {
-    const cursor = opts.cursor;
-    const baseChildren = (prompt, text, promptStyle, textStyle) => [
-        h('span', { class: 'prompt', style: promptStyle || '' }, prompt),
-        h('span', { class: 'cmd', style: textStyle || '' }, text),
-        cursor ? h('span', { class: 'cursor-blink' }, '') : null
-    ];
-    if (l.kind === 'cmt')  return h('div', { key: 'l' + i, class: 'cli' }, ...baseChildren('#', l.text, '', 'color:var(--fg-3)'));
-    if (l.kind === 'cmd')  return h('div', { key: 'l' + i, class: 'cli' }, ...baseChildren('$', l.text));
-    if (l.kind === 'out')  return h('div', { key: 'l' + i, class: 'cli' }, ...baseChildren('·', l.text, '', 'color:var(--fg-2)'));
-    if (l.kind === 'ok')   return h('div', { key: 'l' + i, class: 'cli' }, ...baseChildren('✓', l.text, 'color:var(--accent)', 'color:var(--accent)'));
-    if (l.kind === 'warn') return h('div', { key: 'l' + i, class: 'cli' }, ...baseChildren('!', l.text, 'color:var(--mascot)', 'color:var(--mascot)'));
-    if (l.kind === 'log')  return h('div', { key: 'l' + i, class: 'cli' }, ...baseChildren('·', l.text, 'color:var(--fg-3)', 'color:var(--fg-2);font-family:var(--ff-mono)'));
-    return null;
+    const prompt = LINE_PROMPTS[l.kind];
+    if (!prompt) return null;
+    return h('div', { key: 'l' + i, class: 'cli ds-cli-' + l.kind },
+        h('span', { class: 'prompt' }, prompt),
+        h('span', { class: 'cmd' }, l.text),
+        opts.cursor ? h('span', { class: 'cursor-blink' }, '') : null
+    );
 }
 
 function App() {
@@ -65,18 +124,41 @@ function App() {
         side: Side({
             sections: [
                 { group: 'sessions', items: [
-                    { glyph: '◆', label: 'live',     count: 'on', key: 'l' },
-                    { glyph: '◇', label: 'demo loop', count: demo.looping ? 'play' : 'still', key: 'd' }
+                    // 'live' is a readout of which shell this kit is showing —
+                    // there is only one, so it anchors to that panel rather
+                    // than posing as a session picker.
+                    { glyph: '*', label: 'live', count: live.phase === 'ready' ? liveTranscript.length : 0, key: 'l', href: '#p-live' },
+                    // The demo loop control actually pauses and resumes the
+                    // playback it names.
+                    { glyph: '-', label: 'demo loop', count: demo.looping ? 'play' : 'still', key: 'd',
+                      href: '#p-demo',
+                      onClick: (e) => {
+                          e.preventDefault();
+                          demo.looping = !demo.looping;
+                          if (demo.looping) tick();
+                          kit.render();
+                      } }
                 ] },
+                // Reachable state switcher for the live shell panel.
+                { group: 'shell state', items: PHASES.map((p) => ({
+                    glyph: h('span', { class: live.phase === p ? 'ds-dot ds-dot-on' : 'ds-dot ds-dot-off' }),
+                    label: p, key: 'ph-' + p, active: live.phase === p,
+                    onClick: (e) => { e.preventDefault(); live.phase = p; kit.render(); }
+                })) },
+                // These name real shell affordances, so they perform them
+                // rather than documenting a keystroke and doing nothing when
+                // clicked. Both are also bound to the keys they advertise.
                 { group: 'shortcuts', items: [
-                    { glyph: '·', label: 'clear (⌘k)',  key: 'c' },
-                    { glyph: '·', label: 'history (↑)', key: 'h' }
+                    { glyph: '·', label: 'clear (⌘k)', key: 'c',
+                      onClick: (e) => { e.preventDefault(); clearScrollback(); } },
+                    { glyph: '·', label: 'history (up)', key: 'h',
+                      onClick: (e) => { e.preventDefault(); recallHistory(); } }
                 ] }
             ]
         }),
         main: [
-            h('div', { class: 'ds-section', style: 'padding:8px' },
-                h('div', { style: 'display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap' },
+            h('div', { class: 'ds-app-surface ds-section-pad-sm' },
+                h('div', { class: 'ds-kit-head-row' },
                     h('div', {}, Heading({ level: 1, children: 'terminal' })),
                     ThemeToggle()
                 ),
@@ -84,24 +166,35 @@ function App() {
 
                 // Live terminal — usable, no reveal delays.
                 Panel({
+                    id: 'p-live',
                     title: 'live · ' + live.cwd,
-                    count: liveTranscript.length,
-                    style: 'margin:8px 0',
-                    children: h('div', { style: 'padding:14px 18px;display:flex;flex-direction:column;gap:4px;background:var(--bg-2);border-radius:10px' },
+                    count: live.phase === 'ready' ? liveTranscript.length : 0,
+                    class: 'ds-panel-gap',
+                    children: live.phase === 'loading' ? ScrollbackSkeleton()
+                    : live.phase === 'error' ? ScrollbackError()
+                    : live.phase === 'empty' ? ScrollbackEmpty()
+                    : h('div', { class: 'ds-term-body' },
                         ...liveTranscript.map((l, i) => Line(l, i)),
-                        h('div', { class: 'cli', style: 'margin-top:6px' },
+                        h('div', { class: 'cli ds-term-input-row' },
                             h('span', { class: 'prompt' }, '$'),
                             h('input', {
                                 value: live.input,
                                 placeholder: 'type a command and press enter…',
-                                style: 'flex:1;background:transparent;border:0;outline:0;font-family:var(--ff-mono);font-size:13px;color:var(--fg)',
+                                class: 'ds-term-input',
                                 oninput: (e) => { live.input = e.target.value; },
                                 onkeydown: (e) => {
                                     if (e.key === 'Enter' && live.input.trim()) {
                                         liveTranscript.push({ kind: 'cmd', text: live.input });
                                         liveTranscript.push({ kind: 'out', text: '(stub) ran: ' + live.input });
+                                        history.push(live.input);
+                                        historyIdx = -1;
                                         live.input = '';
                                         kit.render();
+                                    } else if (e.key === 'ArrowUp') {
+                                        // The sidebar advertises 'history (up)';
+                                        // the key it names has to do it too.
+                                        e.preventDefault();
+                                        recallHistory();
                                     }
                                 }
                             })
@@ -111,15 +204,16 @@ function App() {
 
                 // Demo loop — decorative showcase only.
                 Panel({
+                    id: 'p-demo',
                     title: 'demo · build pipeline',
                     count: demo.visible.length + '/' + demoScript.length,
-                    style: 'margin:8px 0',
-                    children: h('div', { style: 'padding:14px 18px;display:flex;flex-direction:column;gap:4px;background:var(--bg-2);border-radius:10px;min-height:280px' },
+                    class: 'ds-panel-gap',
+                    children: h('div', { class: 'ds-term-body ds-term-body--tall' },
                         ...demo.visible.map((l, i) => Line(l, i, { cursor: i === demo.visible.length - 1 && demo.looping }))
                     )
                 }),
 
-                Panel({ title: 'about this kit', style: 'margin:8px 0', children: h('div', { class: 'ds-pattern-notes' },
+                Panel({ title: 'about this kit', class: 'ds-panel-gap', children: h('div', { class: 'ds-pattern-notes' },
                     h('p', {}, '· ', Chip({ tone: 'accent', children: '.cli' }), ' rows pair ', h('code', {}, '.prompt'), ' + ', h('code', {}, '.cmd'), '.'),
                     h('p', {}, '· six line kinds: ', Chip({ tone: 'dim', children: 'cmt' }), ' ', Chip({ tone: 'dim', children: 'cmd' }), ' ', Chip({ tone: 'dim', children: 'out' }), ' ', Chip({ tone: 'accent', children: 'ok' }), ' ', Chip({ tone: '', children: 'warn' }), ' ', Chip({ tone: 'dim', children: 'log' }), '.'),
                     h('p', {}, '· live panel is instant; demo panel reveals lines on a loop for the showcase only — never fake-animate output a user is waiting on.')
@@ -127,7 +221,7 @@ function App() {
             )
         ],
         status: Status({
-            left: ['terminal', '• live ' + liveTranscript.length + ' lines', demo.looping ? '• demo playing' : '• demo still'],
+            left: ['terminal', '- live ' + (live.phase === 'ready' ? liveTranscript.length : 0) + ' lines', '- shell ' + live.phase, demo.looping ? '- demo playing' : '- demo still'],
             right: ['247420 / mmxxvi']
         })
     });
@@ -135,16 +229,39 @@ function App() {
 
 const kit = mountKit({ root, view: App, screen: '09 Terminal' });
 
-// Demo loop animation. Stays off when prefers-reduced-motion is on.
-if (demo.looping) {
-    let i = 0;
-    function tick() {
-        if (i >= demoScript.length) {
-            setTimeout(() => { demo.visible = []; i = 0; kit.render(); tick(); }, 2500);
-            return;
-        }
-        const step = demoScript[i++];
-        setTimeout(() => { demo.visible.push(step); kit.render(); tick(); }, step.d);
+// The sidebar advertises 'clear (⌘k)'; bind the keystroke it names so the label
+// is true on both surfaces.
+document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+        e.preventDefault();
+        clearScrollback();
+    }
+});
+
+// Demo loop animation. Stays off when prefers-reduced-motion is on, and the
+// sidebar's 'demo loop' item pauses/resumes it — hence module scope with a
+// `looping` guard on every step rather than a closure that cannot be stopped.
+// `pending` is the guard against a paused-then-resumed loop running two
+// interleaved timer chains over the same index.
+let demoIdx = 0;
+let demoPending = false;
+function tick() {
+    if (!demo.looping || demoPending) return;
+    if (demoIdx >= demoScript.length) {
+        demoPending = true;
+        setTimeout(() => {
+            demoPending = false;
+            if (!demo.looping) return;
+            demo.visible = []; demoIdx = 0; kit.render(); tick();
+        }, 2500);
+        return;
     }
-    tick();
+    const step = demoScript[demoIdx++];
+    demoPending = true;
+    setTimeout(() => {
+        demoPending = false;
+        if (!demo.looping) return;
+        demo.visible.push(step); kit.render(); tick();
+    }, step.d);
 }
+tick();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.414",
+  "version": "0.0.416",
   "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/page-html/client-script.js

@@ -60,10 +60,10 @@ function examplesNode(examples) {
   return C.Section({
     title: 'explore',
     children: examples.map((e, i) => {
-      const kids = [
-        h('span', { key: 'c', class: 'code' }, String(i + 1).padStart(2, '0')),
-        h('span', { key: 't', class: 'title' }, String(e.label || e.name || e.href || '')),
-      ];
+      const code = e.code == null ? '' : String(e.code).trim();
+      const kids = [];
+      if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
+      kids.push(h('span', { key: 't', class: 'title' }, String(e.label || e.name || e.href || '')));
       if (e.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + e.desc));
       kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, '->'));
       return h('a', { key: i, class: 'row', href: e.href || '#' }, ...kids);
@@ -75,10 +75,10 @@ function panelNode(panel, idx) {
   const items = Array.isArray(panel.items) ? panel.items : [];
   if (!items.length) return null;
   const rows = items.map((it, i) => {
-    const kids = [
-      h('span', { key: 'c', class: 'code' }, String(it.code || String(i + 1).padStart(2, '0'))),
-      h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')),
-    ];
+    const code = it.code == null ? '' : String(it.code).trim();
+    const kids = [];
+    if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
+    kids.push(h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')));
     if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' — ' + (it.sub || it.desc)));
     kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
     return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
@@ -128,13 +128,42 @@ function __md(md) {
 
 const bodyNode = data.bodyHtml ? C.Section({ children: h('div', { class: 'page-body', innerHTML: data.bodyHtml }) }) : null;
 
+function tierNode(tier, children) {
+  const kids = children.filter(Boolean);
+  if (!kids.length) return null;
+  const labelId = 'tier-' + tier.key + '-label';
+  const head = h('div', { key: 'h', class: 'ds-tier-head' },
+    h('h2', { class: 'eyebrow', id: labelId }, tier.label),
+    tier.lede ? h('p', { class: 'ds-tier-lede' }, tier.lede) : null,
+  );
+  return h('section', { key: tier.key, class: 'ds-tier ds-tier-' + tier.key, id: tier.key, 'aria-labelledby': labelId }, head, ...kids);
+}
+
+const panelsById = new Map((data.panels || []).map((p) => [p.id || p.title || p.name || '', p]));
+const takePanel = (id) => { const p = panelsById.get(id); if (p) panelsById.delete(id); return p ? panelNode(p) : null; };
+
+const TIERS = [
+  { key: 'open', label: 'open', lede: 'browse and try the system running.', ids: ['kits', 'previews', 'decks'], extra: () => [examplesNode(data.examples)] },
+  { key: 'ships', label: 'ships', lede: 'what the package contains.', ids: ['file_browser', 'desktop_os', 'web_components', 'api_exports'], extra: () => [] },
+  { key: 'read', label: 'read', lede: 'understand the rules behind it.', ids: ['docs', 'features'], extra: () => [quickstartNode(data.quickstart)] },
+];
+
+const tierNodes = TIERS.map((t) => {
+  const kids = [...t.ids.map(takePanel), ...t.extra()].filter(Boolean);
+  if (t.key === 'open' && kids.length) {
+    const lead = kids[0];
+    if (lead.props) lead.props.class = (lead.props.class || '') + ' ds-tier-lead';
+  }
+  return tierNode(t, kids);
+});
+const leftoverPanels = [...panelsById.values()].map(panelNode);
+
 const mainChildren = [
   heroNode(data.hero),
   marqueeNode(data.marquee),
   ...data.sections.map(sectionNode),
-  ...(data.panels || []).map(panelNode),
-  quickstartNode(data.quickstart),
-  examplesNode(data.examples),
+  ...tierNodes,
+  ...leftoverPanels,
   bodyNode,
 ].filter(Boolean);
 

package/src/page-html/page-styles.js

@@ -5,8 +5,29 @@
 // bundle on load-order at equal specificity.
 
 export const PAGE_INLINE_STYLES = `
-.app-stage { width: 100%; max-width: var(--stage-wide, min(96vw, 1440px)); margin-inline: auto; padding: var(--space-6, 48px) var(--space-4, 24px) var(--space-8, 96px); display: grid; gap: var(--space-6, 48px); box-sizing: border-box }
+.app-stage { width: 100%; max-width: var(--stage-wide, min(96%, 1600px)); margin-inline: auto; padding: var(--space-6, 48px) var(--space-4, 24px) var(--space-8, 96px); display: grid; gap: var(--space-6, 48px); box-sizing: border-box }
 @media (max-width: 768px) { .app-stage { padding: var(--space-4, 24px) var(--space-3, 16px) var(--space-6, 48px); gap: var(--space-5, 32px) } }
+/* Tier movements — the stage's uniform gap is deliberately overridden here.
+   Panels inside one tier sit tight (--space-3, 16px) because they are peers;
+   between tiers that reopens to --space-5 on top of the stage's own --space-6,
+   so the three movements read as distinct instead of one repeating slab. */
+.app-stage > .ds-tier { display: grid; gap: var(--space-3, 16px) }
+.app-stage > .ds-tier + .ds-tier { margin-top: var(--space-5, 32px) }
+.ds-tier-head { display: grid; gap: var(--space-2, 8px); margin-bottom: var(--space-1, 4px); justify-items: start }
+/* The tier label is an h2 so the three movements are real landmarks in the
+   accessibility tree; it keeps the .eyebrow voice, so the UA heading margin
+   and size are reset back onto the mono kicker scale. */
+.ds-tier-head > h2.eyebrow { margin: 0; font-size: var(--fs-tiny, 11px); line-height: 1.2 }
+.ds-tier-lede { margin: 0; max-width: var(--measure, 68ch); color: var(--fg-3); font-size: var(--fs-sm, 15px) }
+/* The lead tier carries the accent spine so the primary path is visible at a
+   squint; supporting tiers stay unmarked rather than competing. The head div
+   is the tier's first child, so the marker is an explicit class rather than a
+   positional :first-of-type, which would not match past it. */
+.ds-tier-lead { border-radius: 0 var(--r-2, 14px) var(--r-2, 14px) 0; padding-left: calc(var(--space-3, 16px) + var(--bw-chunk, 6px)); position: relative }
+.ds-tier-lead::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--bw-chunk, 6px); background: var(--accent); border-radius: var(--bw-chunk, 6px) 0 0 var(--bw-chunk, 6px) }
+/* Tertiary tier reads at prose weight: quieter rows, no panel fill competition. */
+.ds-tier-read .panel { background: var(--panel-1, var(--bg)) }
+.ds-tier-read .row .meta { color: var(--fg-3) }
 .page-body > :first-child { margin-top: 0 }
 .page-body h1 { margin-top: 0 } .page-body h2 { margin-top: var(--space-5, 32px) } .page-body h3 { margin-top: var(--space-4, 24px) }
 .page-body > * + * { margin-top: var(--space-3, 16px) }