anentrypoint-design 0.0.414 → 0.0.416

package/dist/ui_kits/slide_deck/app.js

@@ -1,27 +1,39 @@
 import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, Side, AppShell, Heading, Lede, Chip, ThemeToggle } from 'ds/components.js';
+import { Topbar, Crumb, Status, Side, AppShell, PageHeader, ThemeToggle } from 'ds/components.js';
 import { mountKit } from 'ds/bootstrap.js';
 const h = webjsx.createElement;
 
 const root = document.getElementById('root');
 
+// No slide sets `accent`. It fed `--slide-accent`, which the stylesheet reads
+// as a `color:` on .ds-slide-hero and .ds-slide-bullet-key — so passing a raw
+// lore fill ('green', 'mascot') put a background tone into a text slot, the
+// exact --accent vs --accent-ink split AGENTS.md warns about, and rendered the
+// title slides in a muted mid-green against near-black. Unset, both rules fall
+// through to their `var(--accent-ink)` default, which is the readable tone and
+// inverts correctly with the theme.
+//
+// Eyebrows here are reserved for the two slides that are a DIFFERENT KIND of
+// slide from the body of the deck: the opening masthead and the closing marker.
+// The interior slides deliberately carry none. Their eyebrows were the bare
+// numbers 01-04, which is a position indicator, not a category label — and the
+// deck already shows position twice (the `ds-deck-count` "n / 6" readout and
+// the numbered sidebar list), so a third copy named nothing new. If you add a
+// slide, it gets no eyebrow unless it genuinely names a new section.
 const slides = [
     {
         kind: 'title',
         eyebrow: '247420 · mmxxvi',
         title: 'the deck',
-        sub: 'a 16:9 slide template built from the SDK chrome.',
-        accent: 'green'
+        sub: 'a 16:9 slide template built from the SDK chrome.'
     },
     {
         kind: 'lede',
-        eyebrow: '01',
-        title: 'one tool, one font, one rhythm.',
-        body: 'space grotesk for prose, jetbrains mono for tokens. nothing else. the rhythm is 8pt all the way down.'
+        title: 'no fonts to load.',
+        body: 'display, narrow and body all resolve to system-ui; mono resolves to the platform ui-monospace. nothing is fetched, so nothing reflows. the rhythm is 8pt all the way down.'
     },
     {
         kind: 'bullets',
-        eyebrow: '02',
         title: 'three modes for theme',
         items: [
             ['auto',  'follow the OS — re-renders live when you flip dark mode'],
@@ -31,13 +43,11 @@ const slides = [
     },
     {
         kind: 'quote',
-        eyebrow: '03',
         body: '"the surface should never lie about what the program is doing."',
         cite: '— 247420 design principle'
     },
     {
         kind: 'split',
-        eyebrow: '04',
         title: 'usable terminals are instant.',
         left: 'output appears the moment it exists. no reveal animation, no typewriter — the user is waiting on real work.',
         right: 'showcase terminals can play a loop. they are clearly labelled "demo" and pause on prefers-reduced-motion.'
@@ -46,84 +56,98 @@ const slides = [
         kind: 'title',
         eyebrow: 'fin',
         title: 'two-four-seven · four-twenty',
-        sub: 'always open, always a little high.',
-        accent: 'mascot'
+        sub: 'always open, always a little high.'
     }
 ];
 
 const state = { i: 0 };
 
 function Slide(s) {
-    const accentVar = s.accent ? `var(--${s.accent})` : 'var(--accent)';
-    const eyebrow = h('div', {
-        style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:24px'
-    }, s.eyebrow || '');
+    // custom-property-only inline: carries the per-slide accent tone, no layout
+    const accentStyle = s.accent ? `--slide-accent:var(--${s.accent})` : '';
+    // null, not an empty div — an empty .ds-slide-eyebrow still paints its
+    // margin-bottom, leaving an unexplained gap above the eyebrow-less slides.
+    const eyebrow = s.eyebrow ? h('div', { class: 'ds-slide-eyebrow' }, s.eyebrow) : null;
 
     if (s.kind === 'title') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px' },
+        return h('div', { class: 'ds-slide-col ds-slide-col--start', style: accentStyle },
             eyebrow,
-            h('div', { style: `font-size:var(--fs-hero);line-height:var(--lh-tight);color:${accentVar};letter-spacing:var(--tr-tight);font-weight:600` }, s.title),
+            h('div', { class: 'ds-slide-hero' }, s.title),
             s.sub ? h('div', { class: 't-lede' }, s.sub) : null
         );
     }
     if (s.kind === 'lede') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:38ch' },
+        return h('div', { class: 'ds-slide-col ds-slide-col--narrow', style: accentStyle },
             eyebrow,
-            h('div', { style: 'font-size:var(--fs-h1);line-height:var(--lh-snug);color:var(--fg);font-weight:500' }, s.title),
+            h('div', { class: 'ds-slide-h1' }, s.title),
             h('div', { class: 't-lede' }, s.body)
         );
     }
     if (s.kind === 'bullets') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;gap:18px' },
+        return h('div', { class: 'ds-slide-col', style: accentStyle },
             eyebrow,
-            h('div', { style: 'font-size:var(--fs-h1);line-height:var(--lh-snug);color:var(--fg);font-weight:500;margin-bottom:12px' }, s.title),
+            h('div', { class: 'ds-slide-h1 ds-slide-h1--lead' }, s.title),
             ...s.items.map(([k, v]) =>
-                h('div', { style: 'display:flex;gap:18px;align-items:baseline;border-bottom:1px solid var(--rule);padding:12px 0' },
-                    h('span', { style: `flex:0 0 100px;font-family:var(--ff-mono);font-size:var(--fs-sm);color:${accentVar}` }, k),
-                    h('span', { style: 'color:var(--fg-2);font-size:var(--fs-lg)' }, v)
+                h('div', { class: 'ds-slide-bullet' },
+                    h('span', { class: 'ds-slide-bullet-key' }, k),
+                    h('span', { class: 'ds-slide-bullet-val' }, v)
                 )
             )
         );
     }
     if (s.kind === 'quote') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:42ch' },
+        return h('div', { class: 'ds-slide-col ds-slide-col--quote', style: accentStyle },
             eyebrow,
-            h('div', { style: 'font-size:var(--fs-h2);line-height:var(--lh-snug);color:var(--fg);font-weight:400;font-style:italic' }, s.body),
-            h('div', { style: 'font-family:var(--ff-mono);font-size:var(--fs-sm);color:var(--fg-3)' }, s.cite)
+            h('div', { class: 'ds-slide-quote-body' }, s.body),
+            h('div', { class: 'ds-slide-cite' }, s.cite)
         );
     }
     if (s.kind === 'split') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;gap:24px' },
+        return h('div', { class: 'ds-slide-col', style: accentStyle },
             eyebrow,
-            h('div', { style: 'font-size:var(--fs-h1);line-height:var(--lh-snug);color:var(--fg);font-weight:500' }, s.title),
-            h('div', { style: 'display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:12px' },
-                h('div', { style: 'padding:18px;background:var(--bg-2);border-radius:14px;color:var(--fg-2);font-size:var(--fs-lg);line-height:var(--lh-base)' }, s.left),
-                h('div', { style: `padding:18px;background:var(--bg-2);border-radius:14px;color:var(--fg-2);font-size:var(--fs-lg);line-height:var(--lh-base);border-left:3px solid ${accentVar}` }, s.right)
+            h('div', { class: 'ds-slide-h1' }, s.title),
+            h('div', { class: 'ds-slide-split' },
+                h('div', { class: 'ds-slide-split-cell' }, s.left),
+                h('div', { class: 'ds-slide-split-cell ds-slide-split-cell--accent' }, s.right)
             )
         );
     }
     return null;
 }
 
+let touchX = null;
+
 function Stage() {
     const s = slides[state.i];
     return h('div', {
         class: 'ds-deck-stage',
-        style: 'aspect-ratio:16/9;width:100%;max-width:1100px;margin:24px auto;background:var(--bg-2);border-radius:18px;padding:64px;box-sizing:border-box;display:flex;'
-    }, h('div', { style: 'flex:1;display:flex' }, Slide(s)));
+        ontouchstart: (e) => { touchX = e.touches[0].clientX; },
+        ontouchend: (e) => {
+            if (touchX == null) return;
+            const dx = e.changedTouches[0].clientX - touchX;
+            touchX = null;
+            if (dx < -40 && state.i < slides.length - 1) { state.i++; kit.render(); }
+            else if (dx > 40 && state.i > 0) { state.i--; kit.render(); }
+        }
+    }, h('div', { class: 'ds-deck-slide' }, Slide(s)));
 }
 
 function Controls() {
-    return h('div', { style: 'display:flex;align-items:center;justify-content:center;gap:14px;padding:8px;font-family:var(--ff-mono);font-size:var(--fs-sm)' },
+    // Disabled at the ends rather than silently no-op: a button that looks
+    // live and does nothing when pressed reads as a broken deck, not as "you
+    // are on the last slide".
+    const atStart = state.i === 0;
+    const atEnd = state.i === slides.length - 1;
+    return h('div', { class: 'ds-deck-controls' },
         h('button', {
-            class: 'btn',
+            class: 'btn', disabled: atStart, 'aria-disabled': atStart ? 'true' : null,
             onclick: () => { if (state.i > 0) { state.i--; kit.render(); } }
-        }, '← prev'),
-        h('span', { style: 'color:var(--fg-3)' }, (state.i + 1) + ' / ' + slides.length),
+        }, '<- prev'),
+        h('span', { class: 'ds-deck-count' }, (state.i + 1) + ' / ' + slides.length),
         h('button', {
-            class: 'btn',
+            class: 'btn', disabled: atEnd, 'aria-disabled': atEnd ? 'true' : null,
             onclick: () => { if (state.i < slides.length - 1) { state.i++; kit.render(); } }
-        }, 'next →')
+        }, 'next ->')
     );
 }
 
@@ -137,26 +161,36 @@ function App() {
         crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'slide deck' }),
         side: Side({
             sections: [
+                // The slide list IS this deck's navigation — every entry jumps
+                // to its slide. It was previously a static readout, which left
+                // the only way to reach slide 5 as four presses of `next`.
                 { group: 'slides', items: slides.map((s, i) => ({
-                    glyph: i === state.i ? '◆' : '◇',
+                    glyph: i === state.i ? '*' : '-',
                     label: (i + 1) + ' · ' + (s.title || s.eyebrow || s.kind),
-                    key: 's' + i
+                    key: 's' + i,
+                    active: i === state.i,
+                    href: '#slide-' + (i + 1),
+                    onClick: (e) => { e.preventDefault(); state.i = i; kit.render(); }
                 })) }
             ]
         }),
         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', {}, Heading({ level: 1, children: 'slide deck' })),
-                    ThemeToggle()
-                ),
-                Lede({ children: '16:9 stage, keyboard arrow keys for nav, six slide kinds: title / lede / bullets / quote / split / fin.' }),
+            // Dense page header, not a display H1 over a lede: the stage below
+            // is the content, and a full-scale kit title above it made the
+            // page's chrome read heavier than the slide it frames.
+            PageHeader({
+                dense: true,
+                title: 'slide deck',
+                lede: '16:9 stage · arrow keys, space and home/end navigate · six slide kinds',
+                right: ThemeToggle({ compact: true })
+            }),
+            h('div', { class: 'ds-section ds-section-pad' },
                 Stage(),
                 Controls()
             )
         ],
         status: Status({
-            left: ['slide deck', '• slide ' + (state.i + 1) + '/' + slides.length, '• ←/→ to nav'],
+            left: ['slide deck', '- slide ' + (state.i + 1) + '/' + slides.length, '- </> to nav'],
             right: ['247420 / mmxxvi']
         })
     });

package/dist/ui_kits/system_primer/app.js

@@ -1,5 +1,5 @@
 import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, Side, AppShell, Panel, Heading, Lede, Chip, Btn, ThemeToggle } from 'ds/components.js';
+import { Topbar, Crumb, Status, Side, AppShell, Panel, PageHeader, Chip, Btn, ThemeToggle } from 'ds/components.js';
 import { mountKit } from 'ds/bootstrap.js';
 const h = webjsx.createElement;
 
@@ -48,62 +48,71 @@ const TYPE_SCALE = [
 ];
 
 function Swatch(name, v, big) {
-    return h('div', { class: 'ds-swatch', style: 'display:flex;flex-direction:column;gap:6px' },
-        h('div', {
-            style: 'height:' + (big ? '64px' : '48px') +
-                ';background:' + v +
-                ';border-radius:10px;border:1px solid var(--rule)'
-        }),
-        h('div', { style: 'font-family:var(--ff-mono);font-size:11px;color:var(--fg-3)' }, name)
+    return h('div', { class: 'ds-swatch ds-swatch-col' },
+        // custom-property-only inline: carries the swatch tone, no layout
+        h('div', { class: 'ds-swatch-chip' + (big ? ' ds-swatch-chip--big' : ''), style: '--swatch:' + v }),
+        h('div', { class: 'ds-swatch-name' }, name)
     );
 }
 
 function PaletteGrid() {
-    return Panel({ title: 'lore palette', style: 'margin:8px 0', children:
-        h('div', { style: 'display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;padding:14px 18px' },
+    return Panel({ id: 'palette', title: 'lore palette', count: PALETTE.length, class: 'ds-panel-gap', children:
+        h('div', { class: 'ds-swatch-grid-sm' },
             ...PALETTE.map(p => Swatch(p.name, p.v, false))
         )
     });
 }
 
 function SemanticGrid() {
-    return Panel({ title: 'semantic tokens — invert with theme', count: '7', style: 'margin:8px 0', children:
-        h('div', { style: 'display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:14px 18px' },
+    // count reads off the array — it was the hardcoded string '7', which would
+    // have silently gone stale the first time a token was added or removed.
+    return Panel({ id: 'semantic', title: 'semantic tokens — invert with theme', count: SEMANTIC.length, class: 'ds-panel-gap', children:
+        h('div', { class: 'ds-swatch-grid-sm ds-swatch-grid-lg' },
             ...SEMANTIC.map(p => Swatch(p.name, p.v, true))
         )
     });
 }
 
 function TypeScalePanel() {
-    return Panel({ title: 'type scale', style: 'margin:8px 0', children:
-        h('div', { style: 'padding:14px 18px;display:flex;flex-direction:column;gap:14px' },
+    return Panel({ id: 'type-scale', title: 'type scale', count: TYPE_SCALE.length, class: 'ds-panel-gap', children:
+        h('div', { class: 'ds-type-panel' },
             ...TYPE_SCALE.map(t =>
-                h('div', { style: 'display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--rule);padding-bottom:8px' },
-                    h('span', { style: 'flex:0 0 64px;font-family:var(--ff-mono);font-size:11px;color:var(--fg-3)' }, t.name),
-                    h('div', { class: t.cls, style: 'font-size:' + t.size + ';line-height:var(--lh-tight);color:var(--fg)' }, 'two-four-seven four-twenty')
+                h('div', { class: 'ds-type-row' },
+                    h('span', { class: 'ds-type-row-label' }, t.name),
+                    // custom-property-only inline: picks the sampled size token
+                    h('div', { class: (t.cls ? t.cls + ' ' : '') + 'ds-type-sample', style: '--sample-size:' + t.size }, 'two-four-seven four-twenty')
                 )
             )
         )
     });
 }
 
+// The three button specimens are the only controls on this reference page that
+// look pressable, so pressing one has to do something. Each reports which
+// variant was last pressed, which is the one fact a primer's button row can
+// truthfully demonstrate — the alternative was three buttons that swallow every
+// click, on the page whose whole job is showing how controls behave.
+const primState = { pressed: null };
+
 function PrimitivesPanel() {
-    return Panel({ title: 'primitives', style: 'margin:8px 0', children:
-        h('div', { style: 'padding:14px 18px;display:flex;flex-direction:column;gap:18px' },
-            h('div', { style: 'display:flex;gap:10px;flex-wrap:wrap;align-items:center' },
-                h('span', { style: 'font-family:var(--ff-mono);font-size:11px;color:var(--fg-3);flex:0 0 64px' }, 'chips'),
+    return Panel({ id: 'primitives', title: 'primitives', class: 'ds-panel-gap', children:
+        h('div', { class: 'ds-prim-panel' },
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'chips'),
                 Chip({ tone: 'accent', children: 'accent' }),
                 Chip({ tone: 'dim',    children: 'dim' }),
                 Chip({ tone: '',       children: 'plain' })
             ),
-            h('div', { style: 'display:flex;gap:10px;flex-wrap:wrap;align-items:center' },
-                h('span', { style: 'font-family:var(--ff-mono);font-size:11px;color:var(--fg-3);flex:0 0 64px' }, 'buttons'),
-                Btn({ primary: true, children: 'primary' }),
-                Btn({ children: 'default' }),
-                Btn({ ghost: true, children: 'ghost' })
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'buttons'),
+                Btn({ primary: true, children: 'primary', onClick: () => { primState.pressed = 'primary'; kit.render(); } }),
+                Btn({ children: 'default', onClick: () => { primState.pressed = 'default'; kit.render(); } }),
+                Btn({ ghost: true, children: 'ghost', onClick: () => { primState.pressed = 'ghost'; kit.render(); } }),
+                h('span', { class: 'ds-prim-label' },
+                    primState.pressed ? 'last pressed: ' + primState.pressed : 'none pressed yet')
             ),
-            h('div', { style: 'display:flex;gap:10px;flex-wrap:wrap;align-items:center' },
-                h('span', { style: 'font-family:var(--ff-mono);font-size:11px;color:var(--fg-3);flex:0 0 64px' }, 'theme'),
+            h('div', { class: 'ds-prim-row' },
+                h('span', { class: 'ds-prim-label' }, 'theme'),
                 ThemeToggle(),
                 ThemeToggle({ compact: true })
             )
@@ -119,23 +128,31 @@ function App() {
             items: [['index', '../../'], ['terminal', '../terminal/']]
         }),
         crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'system primer' }),
+        // Every entry anchors to the panel it names. These were four inert
+        // rows styled exactly like working nav — the only sidebar on the page
+        // and none of it went anywhere.
         side: Side({
             sections: [
                 { group: 'sections', items: [
-                    { glyph: '◐', label: 'palette',    key: 'p' },
-                    { glyph: '◑', label: 'semantic',   key: 's' },
-                    { glyph: '◒', label: 'type scale', key: 't' },
-                    { glyph: '◓', label: 'primitives', key: 'r' }
+                    { glyph: '-', label: 'palette',    key: 'p', href: '#palette' },
+                    { glyph: '-', label: 'semantic',   key: 's', href: '#semantic' },
+                    { glyph: '-', label: 'type scale', key: 't', href: '#type-scale' },
+                    { glyph: '-', label: 'primitives', key: 'r', href: '#primitives' }
                 ] }
             ]
         }),
         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', {}, Heading({ level: 1, children: 'system primer' })),
-                    ThemeToggle()
-                ),
-                Lede({ children: 'one page showing palette, semantic tokens, type scale, and primitives. flip the theme toggle — semantic tokens invert, lore palette stays put.' }),
+            // Dense header: this is a reference surface people scroll to look
+            // something up, not a landing page. The display H1 + wrapped lede
+            // spent most of the first fold on an intro, and the lede's narrow
+            // measure sat ragged against the full-width heading above it.
+            PageHeader({
+                dense: true,
+                title: 'system primer',
+                lede: 'palette, semantic tokens, type scale, primitives — flip the theme and the semantic tokens invert while the lore palette holds',
+                right: ThemeToggle({ compact: true })
+            }),
+            h('div', { class: 'ds-section ds-section-pad' },
                 PaletteGrid(),
                 SemanticGrid(),
                 TypeScalePanel(),
@@ -143,10 +160,10 @@ function App() {
             )
         ],
         status: Status({
-            left: ['system primer', '• ' + PALETTE.length + ' lore colors', '• ' + SEMANTIC.length + ' semantic'],
+            left: ['system primer', '- ' + PALETTE.length + ' lore colors', '- ' + SEMANTIC.length + ' semantic'],
             right: ['247420 / mmxxvi']
         })
     });
 }
 
-mountKit({ root, view: App, screen: '16 System Primer' });
+const kit = mountKit({ root, view: App, screen: '16 System Primer' });