anentrypoint-design 0.0.413 → 0.0.415

package/dist/ui_kits/gallery/app.js

@@ -14,44 +14,103 @@ const swatchTokens = [
     { name: 'panel-select',hint: 'mint hover/select tone' }
 ];
 
+// Specimens, not captions. Each tile shows an actual piece of ascii art at
+// display size — the thing a gallery is for. The previous set was twelve
+// equal cards whose captions were design-system documentation ("panel-on-panel
+// rhythm", "1px panel-2 hairline"), so every tile read at one weight and the
+// grid was a lecture wearing a gallery's layout. One of them ("no svgs in
+// chrome") had also gone stale — chrome icons are Icon() line SVGs now.
+//
+// One tone across the whole set. The tiles previously alternated panel-1 /
+// panel-2 / panel-3, which produced a checkerboard the reader has to try to
+// decode — the tone changed but meant nothing, and because the grid reflows
+// to the container (5-up here, 3-up narrower) any index-based tone pattern
+// lands differently at every width. With the frame constant the specimen is
+// the only thing that varies, which is what a gallery is for.
 const items = [
-    { id: 'a', label: 'mascot · cat',      caption: '/\\_/\\\n( o.o )',         tone: 'panel-1', glyph: '◐' },
-    { id: 'b', label: 'panel · stack',     caption: 'panel-on-panel rhythm',     tone: 'panel-2', glyph: '▣' },
-    { id: 'c', label: 'rail · indicator',  caption: 'color-coded inset',         tone: 'panel-1', glyph: '▰' },
-    { id: 'd', label: 'mono · label',      caption: 'all caps · letter-spaced',  tone: 'panel-2', glyph: '§' },
-    { id: 'e', label: 'cli · prompt',      caption: '$ ship it',                 tone: 'panel-3', glyph: '◆' },
-    { id: 'f', label: 'pill · radius 999', caption: 'sidebar fab tone',          tone: 'panel-1', glyph: '●' },
-    { id: 'g', label: 'badge · chip',      caption: 'meta pill, dim/accent',     tone: 'panel-2', glyph: '◇' },
-    { id: 'h', label: 'glyph · unicode',   caption: 'no svgs in chrome',         tone: 'panel-1', glyph: '✦' },
-    { id: 'i', label: 'manifesto · prose', caption: 'long-form, max 64ch',       tone: 'panel-2', glyph: '¶' },
-    { id: 'j', label: 'fade · in',         caption: 'visibility-driven only',    tone: 'panel-3', glyph: '◌' },
-    { id: 'k', label: 'rule · divider',    caption: '1px panel-2 hairline',      tone: 'panel-1', glyph: '—' },
-    { id: 'l', label: 'stamp · seal',      caption: 'editorial mark',            tone: 'panel-2', glyph: '◯' }
+    { id: 'a', label: 'the mascot',   caption: '/\\_/\\\n( o.o )\n > ^ <', tone: 'panel-2', glyph: '(=)' },
+    { id: 'b', label: 'the prompt',   caption: '$ _',                      tone: 'panel-2', glyph: '$' },
+    { id: 'c', label: 'the seal',     caption: '(( 247 ))\n(( 420 ))',     tone: 'panel-2', glyph: 'O' },
+    { id: 'd', label: 'the arrow',    caption: '-->',                      tone: 'panel-2', glyph: '->' },
+    { id: 'e', label: 'the rule',     caption: '---------',                tone: 'panel-2', glyph: '-' },
+    { id: 'f', label: 'the corner',   caption: '+------\n|\n|',            tone: 'panel-2', glyph: '[#]' },
+    { id: 'g', label: 'the stack',    caption: '[###]\n [##]\n  [#]',      tone: 'panel-2', glyph: '[]' },
+    { id: 'h', label: 'the wave',     caption: '~~~~~~~',                  tone: 'panel-2', glyph: '~' },
+    { id: 'i', label: 'the target',   caption: '(o)',                      tone: 'panel-2', glyph: '(o)' },
+    { id: 'j', label: 'the ladder',   caption: '|- - -|\n|- - -|',         tone: 'panel-2', glyph: '=' },
+    { id: 'k', label: 'the spark',    caption: '*',                        tone: 'panel-2', glyph: '*' },
+    { id: 'l', label: 'the terminus', caption: '[x]',                      tone: 'panel-2', glyph: '[x]' }
 ];
 
-const state = { open: null, density: 'comfy' };
+// `phase` drives the tiles panel. A gallery is the surface where a blank grid
+// is most ambiguous (still loading? nothing uploaded? request failed?), so all
+// three readings get distinct, reachable copy instead of one blank box.
+const state = { open: null, density: 'comfy', phase: 'ready' };
+const PHASES = ['ready', 'loading', 'empty', 'error'];
+
+// Tile-shaped shimmer. Reuses the .ds-skeleton primitive (app-shell/
+// loading-alerts.css) inside the existing .ds-tile-grid so the placeholders
+// occupy exactly the tracks the real tiles will.
+function TilesSkeleton() {
+    return h('div', { class: 'ds-tile-grid' + (state.density === 'tight' ? ' ds-tile-grid--tight' : '') },
+        ...Array.from({ length: 8 }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-gallery-tile' },
+            h('div', { class: 'ds-skeleton ds-skel-title' }),
+            h('div', { class: 'ds-skeleton ds-skel-meta' })
+        ))
+    );
+}
+
+function TilesEmpty() {
+    return h('div', { class: 'ds-empty-state' },
+        h('div', { class: 'ds-empty-state-glyph' }, '[ ]'),
+        h('p', { class: 'ds-empty-state-msg' }, 'no tiles in this set'),
+        h('p', { class: 'ds-empty-state-hint' }, 'a tile is one tonal card plus a caption. add entries to the items array and they land in this grid at whichever density is selected.')
+    );
+}
+
+function TilesError() {
+    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' }, 'tile set failed to decode'),
+            h('div', { class: 'ds-alert-message' }, 'four of the twelve captions came back as malformed utf-8, so the whole set was rejected rather than rendered with holes in it. re-export the set as utf-8 and reload.'),
+            h('div', { class: 'ds-alert-retry' },
+                h('button', { class: 'btn', onclick: () => { state.phase = 'ready'; kit.render(); } }, 'reload set')
+            )
+        )
+    );
+}
+
+function TilesBody() {
+    if (state.phase === 'loading') return TilesSkeleton();
+    if (state.phase === 'error') return TilesError();
+    if (state.phase === 'empty') return TilesEmpty();
+    return h('div', { class: 'ds-tile-grid' + (state.density === 'tight' ? ' ds-tile-grid--tight' : '') }, ...items.map(Tile));
+}
 
 function Tile(it) {
-    const size = state.density === 'tight' ? '120px' : '160px';
     return h('button', {
         key: it.id,
         onclick: () => { state.open = it.id; kit.render(); },
-        style: 'all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;background:var(--' + it.tone + ');padding:12px;border-radius:10px;min-height:' + size
+        class: 'ds-gallery-tile' + (state.density === 'tight' ? ' ds-gallery-tile--tight' : ''),
+        // custom-property-only inline: carries the per-tile tone, no layout
+        style: '--tile-tone:var(--' + it.tone + ')'
     },
-        h('div', { style: 'flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);white-space:pre-line;color:var(--panel-text-2);font-size:18px' }, it.caption),
-        h('div', { style: 'display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px' },
-            h('span', { style: 'font-family:var(--ff-mono);color:var(--panel-text-3)' }, it.glyph),
-            h('span', { style: 'color:var(--panel-text)' }, it.label)
+        h('div', { class: 'ds-tile-cap' }, it.caption),
+        h('div', { class: 'ds-tile-meta' },
+            h('span', { class: 'ds-tile-glyph' }, it.glyph),
+            h('span', { class: 'ds-tile-label' }, it.label)
         )
     );
 }
 
 function Swatch(t) {
-    return h('div', { key: t.name, style: 'display:flex;flex-direction:column;gap:6px' },
-        h('div', { style: 'height:64px;border-radius:8px;background:var(--' + t.name + ')' }),
-        h('div', { style: 'display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:11px' },
-            h('span', { style: 'color:var(--panel-text)' }, t.name),
-            h('span', { style: 'color:var(--panel-text-3)' }, t.hint)
+    return h('div', { key: t.name, class: 'ds-swatch-col' },
+        // custom-property-only inline: carries the per-swatch tone, no layout
+        h('div', { class: 'ds-gal-swatch', style: '--swatch:var(--' + t.name + ')' }),
+        h('div', { class: 'ds-gal-swatch-meta' },
+            h('span', { class: 'ds-gal-swatch-name' }, t.name),
+            h('span', { class: 'ds-gal-swatch-hint' }, t.hint)
         )
     );
 }
@@ -59,34 +118,44 @@ function Swatch(t) {
 function Lightbox() {
     if (!state.open) return null;
     const it = items.find((i) => i.id === state.open);
+    const close = () => { state.open = null; kit.render(); };
     return h('div', {
-        onclick: () => { state.open = null; kit.render(); },
-        style: 'position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:32px;z-index:50'
+        onclick: close,
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
+        tabindex: '-1',
+        ref: (el) => { if (el && !el._dsLbFocused) { el._dsLbFocused = true; el.focus(); } },
+        class: 'ds-lightbox'
     },
-        h('div', { onclick: (e) => e.stopPropagation(),
-            style: 'background:var(--panel-0);border-radius:14px;padding:28px;min-width:320px;max-width:520px;display:flex;flex-direction:column;gap:14px' },
-            h('div', { style: 'display:flex;justify-content:space-between;align-items:center' },
-                h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, 'tile · ' + it.id),
-                h('button', { class: 'btn', onclick: () => { state.open = null; kit.render(); } }, 'close')
+        h('div', { onclick: (e) => e.stopPropagation(), class: 'ds-lightbox-card' },
+            h('div', { class: 'ds-lightbox-head' },
+                h('span', { class: 'ds-lightbox-tag' }, 'tile · ' + it.id),
+                h('button', { class: 'btn', onclick: close }, 'close')
             ),
-            h('div', { style: 'background:var(--' + it.tone + ');padding:36px;border-radius:10px;text-align:center;font-family:var(--ff-mono);white-space:pre-line;font-size:24px' }, it.caption),
-            h('p', { style: 'margin:0' }, h('strong', {}, it.label)),
-            h('p', { style: 'margin:0;color:var(--panel-text-2)' }, 'this lightbox uses the same tonal panel — no extra components, no shadow. backdrop is fixed inset, click outside dismisses.')
+            h('div', { class: 'ds-lightbox-preview', style: '--tile-tone:var(--' + it.tone + ')' }, it.caption),
+            h('p', { class: 'ds-m0' }, h('strong', {}, it.label)),
+            // Tells the reader how to leave, which is the one thing they need
+            // from a lightbox. It previously described its own implementation.
+            h('p', { class: 'ds-m0 ds-text-2' }, 'esc, or click anywhere outside, to close.')
         )
     );
 }
 
 function App() {
-    const cols = state.density === 'tight' ? 'repeat(auto-fill, minmax(140px, 1fr))' : 'repeat(auto-fill, minmax(180px, 1fr))';
     return AppShell({
-        topbar: Topbar({ brand: '247420', leaf: 'gallery', items: [['index', '../../'], ['source ↗', 'https://github.com/AnEntrypoint/design']] }),
-        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'gallery', right: items.length + ' tiles' }),
+        topbar: Topbar({ brand: '247420', leaf: 'gallery', items: [['index', '../../'], ['source ->', 'https://github.com/AnEntrypoint/design']] }),
+        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'gallery', right: state.phase === 'ready' ? items.length + ' tiles' : state.phase }),
         side: Side({
             sections: [
                 { group: 'density', items: [
-                    { glyph: state.density === 'comfy' ? '●' : '○', label: 'comfy', key: 'd1', onClick: (e) => { e.preventDefault(); state.density = 'comfy'; kit.render(); } },
-                    { glyph: state.density === 'tight' ? '●' : '○', label: 'tight', key: 'd2', onClick: (e) => { e.preventDefault(); state.density = 'tight'; kit.render(); } }
+                    { glyph: h('span', { class: state.density === 'comfy' ? 'ds-dot ds-dot-on' : 'ds-dot ds-dot-off' }), label: 'comfy', key: 'd1', onClick: (e) => { e.preventDefault(); state.density = 'comfy'; kit.render(); } },
+                    { glyph: h('span', { class: state.density === 'tight' ? 'ds-dot ds-dot-on' : 'ds-dot ds-dot-off' }), label: 'tight', key: 'd2', onClick: (e) => { e.preventDefault(); state.density = 'tight'; kit.render(); } }
                 ] },
+                // Reachable state switcher for the tiles panel.
+                { group: 'tile state', items: PHASES.map((p) => ({
+                    glyph: h('span', { class: state.phase === p ? 'ds-dot ds-dot-on' : 'ds-dot ds-dot-off' }),
+                    label: p, key: 'ph-' + p, active: state.phase === p, href: '#' + p,
+                    onClick: (e) => { e.preventDefault(); state.phase = p; kit.render(); }
+                })) },
                 { group: 'jump', items: [
                     { glyph: '·', label: 'tiles',    key: 'j1', href: '#tiles' },
                     { glyph: '·', label: 'swatches', key: 'j2', href: '#swatches' }
@@ -94,28 +163,38 @@ function App() {
             ]
         }),
         main: [
-            h('div', { class: 'ds-section', style: 'padding:8px' },
+            h('div', { class: 'ds-section ds-section-pad' },
                 Heading({ level: 1, children: 'gallery' }),
-                Lede({ children: 'visual grid of tonal cards. tiles use the same panel tokens the rest of the system does — no bespoke tile component, no shadows, no borders.' }),
-                Panel({ title: 'tiles', count: items.length, style: 'margin:8px 0', children:
-                    h('div', { style: 'padding:16px;display:grid;grid-template-columns:' + cols + ';gap:8px' }, ...items.map(Tile))
-                }),
-                Panel({ title: 'swatches', count: swatchTokens.length, style: 'margin:8px 0', children:
-                    h('div', { style: 'padding:16px;display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:12px' }, ...swatchTokens.map(Swatch))
+                // Says what the reader is looking at. The old lede described
+                // the implementation ("no bespoke tile component, no shadows,
+                // no borders") and was contradicted on screen — the tiles lift
+                // with a shadow on hover.
+                Lede({ children: 'twelve ascii specimens on one tonal frame. pick any tile to open it large.' }),
+                Panel({ title: 'tiles', count: state.phase === 'ready' ? items.length : 0, class: 'ds-panel-gap', children: TilesBody() }),
+                Panel({ title: 'swatches', count: swatchTokens.length, class: 'ds-panel-gap', children:
+                    h('div', { class: 'ds-swatch-grid' }, ...swatchTokens.map(Swatch))
                 }),
-                Panel({ title: 'about this kit', style: 'margin:8px 0', children: h('div', { class: 'ds-pattern-notes' },
-                    h('p', {}, '· tiles are tonal panels stacked into a css grid — ', Chip({ tone: 'accent', children: 'auto-fill minmax' }), ' for the responsive default.'),
-                    h('p', {}, '· lightbox reuses the panel surface; no extra component, no transitions, no z-stack circus.'),
-                    h('p', {}, '· density toggle drops min tile size — same tokens, different rhythm.')
+                // Two notes that say something the page does not already show.
+                // The third ("density toggle drops min tile size") described a
+                // control the reader can just press, and the second claimed the
+                // lightbox has "no transitions" while .ds-gallery-tile animates
+                // transform and box-shadow on hover.
+                Panel({ title: 'about this kit', class: 'ds-panel-gap', children: h('div', { class: 'ds-pattern-notes' },
+                    h('p', {}, '· the grid is ', Chip({ tone: 'accent', children: 'auto-fill minmax' }), ' — tiles reflow to the container, never to a breakpoint list.'),
+                    h('p', {}, '· the lightbox is the same tonal panel at a larger size, so there is one surface to theme, not two.')
                 ) })
             ),
             Lightbox()
         ],
         status: Status({
-            left: ['gallery', '• ' + items.length + ' tiles', '• density=' + state.density],
+            left: ['gallery', '- ' + (state.phase === 'ready' ? items.length : 0) + ' tiles', '- density=' + state.density, '- ' + state.phase],
             right: ['247420 / mmxxvi']
         })
     });
 }
 
 const kit = mountKit({ root, view: App, screen: '14 Gallery' });
+
+window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && state.open) { state.open = null; kit.render(); }
+});

package/dist/ui_kits/homepage/app.js

@@ -1,166 +1,184 @@
 import * as webjsx from 'webjsx';
 import { mountKit } from 'ds/bootstrap.js';
-const h = webjsx.createElement;
+import {
+    AppShell, Topbar, Crumb, Status, Dot,
+    Hero, Panel, Row, Section, WorksList, WritingList, Manifesto
+} from 'ds/components.js';
 
-const state = { route: 'works', opened: 0 };
+const h = webjsx.createElement;
 const root = document.getElementById('root');
 
-const navItems = [['works','#works'],['writing','#writing'],['manifesto','#manifesto'],['source ↗','https://github.com/AnEntrypoint']];
+const navItems = [
+    ['works', '#works'],
+    ['writing', '#writing'],
+    ['manifesto', '#manifesto'],
+    ['source ->', 'https://github.com/AnEntrypoint']
+];
+
+const shipping = [
+    { name: 'gm', sub: 'state machine v0.4.1', live: true },
+    { name: 'zellous', sub: 'push-to-talk', live: true },
+    { name: 'thebird', sub: '—', live: false }
+];
+
+// `href` (the "open ->" button) and `source` (the "source" button) are the two
+// destinations WorksList renders inside an expanded work. Both are required:
+// WorksList falls back to '#' when they are absent, which renders the buttons
+// as real, pressable affordances that lead nowhere. Every entry below points at
+// a repo that actually exists under the AnEntrypoint org.
+const GH = 'https://github.com/AnEntrypoint/';
+const works = [
+    { code: '001', title: 'gm', sub: 'state machine for coding agents', meta: '2025 · 3k', body: 'a tiny deterministic state machine that lets llms code without losing their minds. it thinks so you don\'t have to (as much).', href: GH + 'gm', source: GH + 'gm' },
+    { code: '002', title: 'zellous', sub: 'production push-to-talk', meta: '2024 · shipped', body: 'hold the button. talk. someone on the other side hears you. opus codec, dynamic rooms, 50-message replay.', href: GH + 'zellous', source: GH + 'zellous' },
+    { code: '003', title: 'spoint', sub: 'spawnpoint', meta: '2024 · shipped', body: 'the directory for "where should we start?" one url, one room, everyone lands in the same place.', href: GH + 'spoint', source: GH + 'spoint' },
+    { code: '004', title: 'flatspace', sub: 'flat-file cms', meta: 'wip', body: 'still figuring out what to say about this one. come back tuesday.', href: GH + 'flatspace', source: GH + 'flatspace' },
+    { code: '005', title: 'thebird', sub: '—', meta: 'wip', body: 'yes, the name is a reference. no, we won\'t tell you to what.', href: GH + 'thebird', source: GH + 'thebird' },
+    { code: '006', title: 'mcp-repl', sub: 'repl for mcp', meta: '2024 · live', body: 'executenodejs, executedeno, executebash, astgrep_search. if you don\'t know what those are, this one isn\'t for you.', href: GH + 'mcp-repl', source: GH + 'mcp-repl' },
+    { code: '007', title: 'mutagen', sub: 'adaptogen server', meta: '2024 · live', body: 'everything to do with a dapp deg3n. read the source.', href: GH + 'mutagen', source: GH + 'mutagen' },
+    { code: '008', title: 'techshaman', sub: 'member site', meta: 'ongoing', body: 'the official website for the techshaman. an entrypoint probably emerging.', href: GH + 'techshaman', source: GH + 'techshaman' }
+];
+
+// There is no posts backend behind this kit, so these link to the blog kit —
+// which renders the first entry below as a full post — rather than to invented
+// per-post URLs that would 404. href:'#' (the previous value) rendered five
+// anchors that looked like article links and did nothing when clicked.
+const POST_HREF = '../blog/';
+const posts = [
+    { date: '2026.04.14', title: 'we were here first', tag: 'lore', href: POST_HREF },
+    { date: '2026.03.22', title: 'gm v0.4 postmortem, or: why state machines', tag: 'gm', href: POST_HREF },
+    { date: '2026.02.09', title: 'push-to-talk is a protocol, not a feature', tag: 'zellous', href: POST_HREF },
+    { date: '2025.12.11', title: 'against the vibe-coded interface', tag: 'manifesto', href: POST_HREF },
+    { date: '2025.10.03', title: 'notes on shipping weird', tag: 'notes', href: POST_HREF }
+];
 
-function Topbar() {
-    return h('header', { class: 'app-topbar' },
-        h('span', { class: 'brand' }, '247420', h('span', { class: 'slash' }, ' / '), 'an entrypoint'),
-        h('nav', {}, ...navItems.map(([label, href]) =>
-            h('a', {
-                key: label,
-                href,
-                class: state.route === label.replace(' ↗','') ? 'active' : '',
-                onclick: (e) => { if (!href.startsWith('http')) { e.preventDefault(); state.route = label.replace(' ↗',''); render(); } }
-            }, label)
+const manifesto = [
+    { text: 'we are the creative department of the internet. always open (24/7). always a little bit high on possibility (420).' },
+    { text: 'move fast. break things. document honestly. ship the rough draft. humor is load-bearing.' },
+    { text: 'we will not tolerate simpleton design patterns, trifectas, gradients, or anything silly. nothing lame. we\'re internet natives and not easily pleased.', dim: true }
+];
+
+// `phase` drives the three content lists (shipping / works / writing). Cycled
+// from the topbar so each reading is reachable in the kit — a portfolio page
+// that only ever renders a full grid has never shown what a cold or failed
+// fetch looks like.
+const state = { route: 'works', opened: 0, phase: 'ready' };
+const PHASES = ['ready', 'loading', 'empty', 'error'];
+
+// Row shimmer. Reuses .ds-event-row-skeleton + .ds-skel* (app-shell/files.css).
+function ListSkeleton(n, prefix) {
+    return h('div', {},
+        ...Array.from({ length: n }, (_, i) => h('div', { key: prefix + i, class: 'ds-event-row-skeleton' },
+            h('span', { class: 'ds-skel ds-skel-rank' }),
+            h('span', { class: 'ds-skel ds-skel-title' }),
+            h('span', { class: 'ds-skel ds-skel-meta' })
         ))
     );
 }
 
-function Crumb() {
-    return h('div', { class: 'app-crumb' },
-        h('span', {}, '247420'), h('span', { class: 'sep' }, '›'),
-        h('span', { class: 'leaf' }, state.route)
+function ListEmpty(msg, hint) {
+    return h('div', { class: 'ds-empty-state' },
+        h('div', { class: 'ds-empty-state-glyph' }, '[ ]'),
+        h('p', { class: 'ds-empty-state-msg' }, msg),
+        h('p', { class: 'ds-empty-state-hint' }, hint)
     );
 }
 
-function Hero() {
-    return h('div', { style: 'padding:32px 32px 24px 32px' },
-        h('h1', { style: 'font-size:36px;font-weight:600;margin:0 0 4px 0;color:var(--panel-text);letter-spacing:-0.01em' },
-            'the creative department of the internet.'
-        ),
-        h('p', { style: 'font-size:14px;line-height:1.55;color:var(--panel-text-2);max-width:64ch;margin:0 0 20px 0' },
-            '247420 is a collective of mercurials. we ship fast, break things on purpose, and document honestly. ',
-            h('span', { style: 'color:var(--panel-accent);font-weight:500' }, 'humor is load-bearing.')
-        ),
-        h('div', { class: 'panel', style: 'max-width:560px;margin:0' },
-            h('div', { class: 'panel-head' }, h('span', {}, 'currently shipping'), h('span', {}, '3')),
-            h('div', { class: 'panel-body' },
-                h('div', { class: 'row' },
-                    h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-accent)' }, '●')),
-                    h('span', { class: 'title' }, 'gm', h('span', { class: 'sub' }, 'state machine v0.4.1')),
-                    h('span', { class: 'meta' }, 'live')
-                ),
-                h('div', { class: 'row' },
-                    h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-accent)' }, '●')),
-                    h('span', { class: 'title' }, 'zellous', h('span', { class: 'sub' }, 'push-to-talk')),
-                    h('span', { class: 'meta' }, 'live')
-                ),
-                h('div', { class: 'row' },
-                    h('span', { class: 'code' }, h('span', { style: 'color:var(--panel-text-3)' }, '○')),
-                    h('span', { class: 'title' }, 'thebird', h('span', { class: 'sub' }, '—')),
-                    h('span', { class: 'meta' }, 'wip')
-                )
+function ListError(title, msg) {
+    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' }, title),
+            h('div', { class: 'ds-alert-message' }, msg),
+            h('div', { class: 'ds-alert-retry' },
+                h('button', { class: 'btn', onclick: () => { state.phase = 'ready'; render(); } }, 'refetch')
             )
         )
     );
 }
 
-const works = [
-    { code:'001', title:'gm', sub:'state machine for coding agents', meta:'2025 · 3k★', body:'a tiny deterministic state machine that lets llms code without losing their minds. it thinks so you don\'t have to (as much).' },
-    { code:'002', title:'zellous', sub:'production push-to-talk', meta:'2024 · live', body:'hold the button. talk. someone on the other side hears you. opus codec, dynamic rooms, 50-message replay.' },
-    { code:'003', title:'spoint', sub:'spawnpoint', meta:'2024 · live', body:'the directory for "where should we start?" one url, one room, everyone lands in the same place.' },
-    { code:'004', title:'flatspace', sub:'flat-file cms', meta:'wip', body:'still figuring out what to say about this one. come back tuesday.' },
-    { code:'005', title:'thebird', sub:'—', meta:'wip', body:'yes, the name is a reference. no, we won\'t tell you to what.' },
-    { code:'006', title:'mcp-repl', sub:'repl for mcp', meta:'2024 · live', body:'executenodejs, executedeno, executebash, astgrep_search. if you don\'t know what those are, this one isn\'t for you.' },
-    { code:'007', title:'mutagen', sub:'adaptogen server', meta:'2024 · live', body:'everything to do with a dapp deg3n. read the source.' },
-    { code:'008', title:'techshaman', sub:'member site', meta:'ongoing', body:'the official website for the techshaman. an entrypoint probably emerging.' }
-];
-
-function Works() {
-    return h('div', { style: 'padding:20px 32px' },
-        h('h3', {}, '// works'),
-        h('div', { class: 'panel' },
-            h('div', { class: 'panel-head' },
-                h('span', {}, 'works · 08 of ~61'),
-                h('a', { href: 'https://github.com/AnEntrypoint', style: 'color:var(--panel-accent);text-decoration:none' }, 'all repos ↗')
-            ),
-            h('div', { class: 'panel-body' }, ...works.map((w, i) => {
-                const isOpen = state.opened === i;
-                return h('div', { key: i },
-                    h('div', {
-                        class: 'row' + (isOpen ? ' active' : ''),
-                        onclick: () => { state.opened = isOpen ? null : i; render(); }
-                    },
-                        h('span', { class: 'code' }, w.code),
-                        h('span', { class: 'title' }, w.title, h('span', { class: 'sub' }, w.sub)),
-                        h('span', { class: 'meta' }, w.meta + '  ' + (isOpen ? '−' : '+'))
-                    ),
-                    isOpen ? h('div', { class: 'work-detail' },
-                        h('p', { class: 'ds-prose ds-work-body' }, w.body),
-                        h('div', { class: 'ds-work-actions' },
-                            h('a', { class: 'btn-primary', href: '#' }, 'open ↗'),
-                            h('a', { class: 'btn', href: '#' }, 'source')
-                        )
-                    ) : null
-                );
-            }))
-        )
-    );
+function ShippingBody() {
+    const p = state.phase;
+    if (p === 'loading') return ListSkeleton(3, 'sk-ship-');
+    if (p === 'error') return ListError('build status unavailable',
+        'the status endpoint timed out, so live and wip cannot be told apart right now. the projects below are still real; only their badges are unknown.');
+    if (p === 'empty') return ListEmpty('nothing in flight this week',
+        'projects appear here while they are actively being worked on. everything currently shipped is in works below.');
+    return h('div', {}, ...shipping.map((s) => Row({
+        key: s.name, leading: Dot({ tone: s.live ? 'on' : 'off' }),
+        title: s.name, sub: s.sub, meta: s.live ? 'live' : 'wip'
+    })));
 }
 
-function Writing() {
-    const posts = [
-        { date:'2026.04.14', title:'we were here first', tag:'lore' },
-        { date:'2026.03.22', title:'gm v0.4 postmortem, or: why state machines', tag:'gm' },
-        { date:'2026.02.09', title:'push-to-talk is a protocol, not a feature', tag:'zellous' },
-        { date:'2025.12.11', title:'against the vibe-coded interface', tag:'manifesto' },
-        { date:'2025.10.03', title:'notes on shipping weird', tag:'notes' }
-    ];
-    return h('div', { style: 'padding:20px 32px' },
-        h('h3', {}, '// recent writing'),
-        h('div', { class: 'panel' },
-            h('div', { class: 'panel-body' }, ...posts.map((p, i) =>
-                h('a', { key: i, class: 'row', href: '#' },
-                    h('span', { class: 'code' }, p.date),
-                    h('span', { class: 'title' }, p.title),
-                    h('span', { class: 'meta' }, '§ ' + p.tag)
-                )
-            ))
-        )
-    );
+function WorksBody() {
+    const p = state.phase;
+    if (p === 'loading') return ListSkeleton(6, 'sk-work-');
+    if (p === 'error') return ListError('works index failed to load',
+        'the projects manifest returned malformed json at entry 4, so the list was rejected rather than shown with a hole in it. a refetch usually picks up the corrected file.');
+    if (p === 'empty') return ListEmpty('no works published yet',
+        'each entry is one shipped project with its year, size and a paragraph on what it does. the first one lands here as soon as it is tagged.');
+    return WorksList({ works, openedIndex: state.opened, onToggle: (i) => { state.opened = i; render(); } });
 }
 
-function Manifesto() {
-    return h('div', { class: 'ds-section ds-manifesto-section' },
-        h('h3', {}, '// manifesto · rough draft'),
-        h('div', { class: 'ds-prose ds-manifesto' },
-            h('p', { class: 'ds-manifesto-para' }, 'we are the creative department of the internet. always open (24/7). always a little bit high on possibility (420).'),
-            h('p', { class: 'ds-manifesto-para' }, 'move fast. break things. document honestly. ship the rough draft. ', h('strong', {}, 'humor is load-bearing.')),
-            h('p', { class: 'ds-manifesto-para dim' }, 'we will not tolerate simpleton design patterns, trifectas, gradients, or anything silly. nothing lame. we\'re internet natives and not easily pleased.')
-        )
-    );
-}
-
-function Status() {
-    return h('footer', { class: 'app-status' },
-        h('span', { class: 'item' }, 'main'),
-        h('span', { class: 'item' }, '• 8 works'),
-        h('span', { class: 'item' }, '• 5 posts'),
-        h('span', { class: 'spread' }),
-        h('span', { class: 'item' }, 'probably emerging'),
-        h('span', { class: 'item' }, h('a', { href: 'https://github.com/AnEntrypoint' }, 'source ↗'))
-    );
+function WritingBody() {
+    const p = state.phase;
+    if (p === 'loading') return ListSkeleton(5, 'sk-post-');
+    if (p === 'error') return ListError('writing feed unreachable',
+        'the posts feed is served from a different origin and that origin is down. the works list above is local and unaffected.');
+    if (p === 'empty') return ListEmpty('nothing written lately',
+        'posts land here newest first, tagged by which project they belong to. quiet here usually means loud somewhere else.');
+    return WritingList({ posts });
 }
 
 function App() {
-    return h('div', { class: 'app' },
-        Topbar(),
-        Crumb(),
-        h('div', { class: 'app-body no-side' },
-            h('main', { class: 'app-main', style: 'padding:0' },
-                Hero(),
-                Works(),
-                Writing(),
-                Manifesto()
-            )
-        ),
-        Status()
-    );
+    return AppShell({
+        // The nav carries destinations only. The phase cycler used to ride
+        // here as a fifth item, which made a demo control a peer of works /
+        // writing / manifesto and let it take the `active` highlight away from
+        // the section the reader is actually in. It moved onto the first panel
+        // it governs.
+        topbar: Topbar({
+            brand: '247420', leaf: 'an entrypoint',
+            items: navItems,
+            active: state.route,
+            onNav: (label) => { state.route = label; render(); }
+        }),
+        crumb: Crumb({ trail: ['247420'], leaf: state.route }),
+        main: [
+            // badges fill the Hero's narrow right column — without them the
+            // asymmetric two-column grid renders with a dead right half at
+            // desktop width, which reads as a layout bug rather than tension.
+            // They are counts this page already knows, not invented metrics.
+            Hero({
+                title: 'the creative department of the internet.',
+                body: '247420 is a collective of mercurials. we ship fast, break things on purpose, and document honestly.',
+                accent: 'humor is load-bearing.',
+                badges: state.phase === 'ready'
+                    ? [works.length + ' works', posts.length + ' posts', shipping.filter((s) => s.live).length + ' live']
+                    : null
+            }),
+            Panel({
+                title: 'currently shipping',
+                right: h('button', { class: 'btn', onclick: () => {
+                    state.phase = PHASES[(PHASES.indexOf(state.phase) + 1) % PHASES.length];
+                    render();
+                } }, state.phase === 'ready' ? shipping.length + ' in flight' : state.phase),
+                children: ShippingBody()
+            }),
+            // No eyebrow: '08 of ~61' was a position indicator over a section
+            // that is not part of any sequence, and the ~61 contradicted the
+            // eight works actually listed. The count belongs in the status bar,
+            // which already carries it.
+            Section({ id: 'works', title: 'works', children: WorksBody() }),
+            Section({ id: 'writing', title: 'recent writing',
+                children: WritingBody() }),
+            Section({ id: 'manifesto', title: 'manifesto · rough draft',
+                children: Manifesto({ paragraphs: manifesto }) })
+        ],
+        status: Status({
+            left: ['main', state.phase === 'ready' ? '8 works' : '0 works', state.phase === 'ready' ? '5 posts' : '0 posts', state.phase],
+            right: ['probably emerging', h('a', { href: 'https://github.com/AnEntrypoint' }, 'source ->')]
+        })
+    });
 }
 
 const kit = mountKit({ root, view: App, screen: '01 Homepage' });