anentrypoint-design 0.0.414 → 0.0.415

package/dist/ui_kits/project_page/app.js

@@ -1,154 +1,171 @@
 import * as webjsx from 'webjsx';
-const h = webjsx.createElement;
+import { mountKit } from 'ds/bootstrap.js';
+import {
+    AppShell, Topbar, Crumb, Side, Status, Chip,
+    Heading, Lede, Section, Install, Receipt, Changelog
+} from 'ds/components.js';
 
-const state = { copied: false, tab: 'readme' };
+const h = webjsx.createElement;
 const root = document.getElementById('root');
+// `phase` drives the changelog — this page's one remote-fed data surface.
+// Toggled from the sidebar so its loading / empty / error readings are
+// reachable here rather than only against a live registry.
+const state = { copied: false, tab: 'readme', phase: 'ready' };
 
+// `tab` items switch the readme/docs view; `anchor` items scroll to a section
+// on this page; `href` items leave. Every entry now goes somewhere — the
+// reference and links groups were previously seven inert rows styled exactly
+// like the four working ones.
 const sideSections = [
     { group: 'project', items: [
-        ['◆', 'overview', 'readme', true],
-        ['§', 'readme', 'readme', false],
-        ['§', 'docs', 'docs', false],
-        ['§', 'changelog', 'changelog', false]
-    ]},
+        { glyph: '//', label: 'readme', tab: 'readme' },
+        { glyph: '//', label: 'docs', tab: 'docs' },
+        { glyph: '-', label: 'install', anchor: 'install' },
+        { glyph: '-', label: 'receipt', anchor: 'receipt' },
+        { glyph: '-', label: 'changelog', anchor: 'changelog' }
+    ] },
     { group: 'reference', items: [
-        ['›', 'executenodejs', 'ref', false],
-        ['›', 'executedeno', 'ref', false],
-        ['›', 'astgrep_*', 'ref', false],
-        ['›', 'batch_execute', 'ref', false]
-    ]},
+        { glyph: '>', label: 'executenodejs', href: '#executenodejs' },
+        { glyph: '>', label: 'executedeno', href: '#executedeno' },
+        { glyph: '>', label: 'astgrep_*', href: '#astgrep' },
+        { glyph: '>', label: 'batch_execute', href: '#batch_execute' }
+    ] },
     { group: 'links', items: [
-        ['↗', 'source', 'ext', false],
-        ['↗', 'npm', 'ext', false],
-        ['↗', 'releases', 'ext', false]
-    ]}
+        { glyph: '->', label: 'source', href: 'https://github.com/AnEntrypoint' },
+        { glyph: '->', label: 'npm', href: 'https://www.npmjs.com/package/@anentrypoint/mcp-gm' },
+        { glyph: '->', label: 'releases', href: 'https://github.com/AnEntrypoint/releases' }
+    ] }
 ];
 
-function Topbar() {
-    return h('header', { class: 'app-topbar' },
-        h('span', { class: 'brand' }, '247420', h('span', { class: 'slash' }, ' / '), 'gm'),
-        h('nav', {},
-            h('a', { href: '../homepage/' }, '← all projects'),
-            h('a', { href: '#', class: state.tab==='readme'?'active':'' , onclick:(e)=>{e.preventDefault();state.tab='readme';render();}}, 'readme'),
-            h('a', { href: '#', class: state.tab==='docs'?'active':'' , onclick:(e)=>{e.preventDefault();state.tab='docs';render();}}, 'docs'),
-            h('a', { href: '#' }, 'source ↗')
-        )
-    );
-}
-
-function Crumb() {
-    return h('div', { class: 'app-crumb' },
-        h('span', {}, '247420'), h('span', { class: 'sep' }, '›'),
-        h('span', {}, 'gm'), h('span', { class: 'sep' }, '›'),
-        h('span', { class: 'leaf' }, state.tab),
-        h('span', { style: 'margin-left:auto;display:flex;gap:10px;align-items:center' },
-            h('span', { class: 'chip accent' }, '● live'),
-            h('span', { class: 'chip dim' }, 'v0.4.1')
-        )
-    );
-}
-
-function Side() {
-    return h('aside', { class: 'app-side' }, ...sideSections.flatMap(sec => [
-        h('div', { class: 'group', key: sec.group }, sec.group),
-        ...sec.items.map(([glyph, label, kind, active], i) =>
-            h('a', { key: sec.group + i, href: '#', class: active ? 'active' : '' },
-                h('span', { class: 'glyph' }, glyph),
-                h('span', {}, label)
-            )
-        )
-    ]));
-}
-
-function Overview() {
-    return [
-        h('h1', {}, 'gm'),
-        h('p', { class: 'lede' }, 'state machine for coding agents. it thinks, so you don\'t have to (as much).'),
+const receiptRows = [
+    ['status', 'live · ships tuesdays'],
+    ['stars', '3,124'],
+    ['license', 'MIT'],
+    ['lang', 'typescript · deno'],
+    ['size', '2.1mb'],
+    ['deps', '0 runtime'],
+    ['authors', 'the collective'],
+    ['first commit', '2024.09.03']
+];
 
-        h('h3', {}, 'install'),
-        Install({ cmd: 'npx -y @anentrypoint/mcp-gm' }),
+const changelog = [
+    { date: '2026.04.20', ver: 'v0.4.1', msg: 'ship it. fixed the thing everyone complained about.' },
+    { date: '2026.03.22', ver: 'v0.4.0', msg: 'new state machine runtime. broke everything on purpose. read the postmortem.' },
+    { date: '2026.02.09', ver: 'v0.3.7', msg: 'astgrep_search is now astgrep_enhanced_search. you will adapt.' },
+    { date: '2025.12.11', ver: 'v0.3.0', msg: 'first public release. gm, world.' }
+];
 
-        h('h3', {}, 'receipt'),
-        Receipt({ rows: [
-            ['status','live · ships tuesdays'],
-            ['stars','3,124'],
-            ['license','MIT'],
-            ['lang','typescript · deno'],
-            ['size','2.1mb'],
-            ['deps','0 runtime'],
-            ['authors','the collective'],
-            ['first commit','2024.09.03']
-        ]}),
+const PHASES = ['ready', 'loading', 'empty', 'error'];
 
-        h('h3', {}, 'changelog'),
-        Changelog({ entries: [
-            { date:'2026.04.20', ver:'v0.4.1', msg:'ship it. fixed the thing everyone complained about.' },
-            { date:'2026.03.22', ver:'v0.4.0', msg:'new state machine runtime. broke everything on purpose. read the postmortem.' },
-            { date:'2026.02.09', ver:'v0.3.7', msg:'astgrep_search is now astgrep_enhanced_search. you will adapt.' },
-            { date:'2025.12.11', ver:'v0.3.0', msg:'first public release. gm, world.' }
-        ]})
-    ];
+// Release-row shimmer. Reuses .ds-event-row-skeleton + .ds-skel*
+// (app-shell/files.css) — a Changelog entry is the same date / message /
+// version rhythm the primitive was cut for.
+function ChangelogSkeleton() {
+    return h('div', {},
+        ...Array.from({ length: 4 }, (_, 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' }),
+            h('span', { class: 'ds-skel ds-skel-meta' })
+        ))
+    );
 }
 
-function Install({ cmd }) {
-    return h('div', { class: 'cli' },
-        h('span', { class: 'prompt' }, '$'),
-        h('span', { class: 'cmd' }, cmd),
-        h('span', {
-            class: 'copy',
-            onclick: () => { navigator.clipboard?.writeText(cmd); state.copied = true; render(); setTimeout(() => { state.copied = false; render(); }, 1200); }
-        }, state.copied ? 'copied' : 'copy')
+function ChangelogEmpty() {
+    return h('div', { class: 'ds-empty-state' },
+        h('div', { class: 'ds-empty-state-glyph' }, '[ ]'),
+        h('p', { class: 'ds-empty-state-msg' }, 'no releases tagged yet'),
+        h('p', { class: 'ds-empty-state-hint' }, 'every tagged build shows up here with its date and notes. tag a commit and the first entry appears on the next publish.')
     );
 }
 
-function Receipt({ rows }) {
-    return h('table', { class: 'kv' },
-        h('tbody', {}, ...rows.map(([k, v], i) =>
-            h('tr', { key: i },
-                h('td', {}, k),
-                h('td', {}, v)
+function ChangelogError() {
+    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' }, 'release feed rate-limited'),
+            h('div', { class: 'ds-alert-message' }, 'the registry capped this page at 60 requests an hour and the window resets in about 4 minutes. the install command and receipt above are cached and still accurate.'),
+            h('div', { class: 'ds-alert-retry' },
+                h('button', { class: 'btn', onclick: () => { state.phase = 'ready'; kit.render(); } }, 'retry now')
             )
-        ))
+        )
     );
 }
 
-function Changelog({ entries }) {
-    return h('div', { class: 'panel', style: 'max-width:900px' },
-        h('div', { class: 'panel-body' }, ...entries.map((e, i) =>
-            h('div', { key: i, class: 'row', style: 'grid-template-columns:100px 70px 1fr' },
-                h('span', { class: 'code' }, e.date),
-                h('span', { style: 'color:var(--panel-accent);font-family:var(--ff-mono);font-size:14px' }, e.ver),
-                h('span', { class: 'title' }, e.msg)
-            )
-        ))
-    );
+function ChangelogBody() {
+    if (state.phase === 'loading') return ChangelogSkeleton();
+    if (state.phase === 'error') return ChangelogError();
+    if (state.phase === 'empty') return ChangelogEmpty();
+    return Changelog({ entries: changelog });
 }
 
-function Status() {
-    return h('footer', { class: 'app-status' },
-        h('span', { class: 'item' }, 'main'),
-        h('span', { class: 'item' }, '• typescript'),
-        h('span', { class: 'item' }, '• 0 errors'),
-        h('span', { class: 'item' }, '• 0 warnings'),
-        h('span', { class: 'spread' }),
-        h('span', { class: 'item' }, 'v0.4.1'),
-        h('span', { class: 'item' }, '• MIT')
-    );
+function copyInstall(cmd) {
+    navigator.clipboard?.writeText(cmd);
+    state.copied = true; kit.render();
+    setTimeout(() => { state.copied = false; kit.render(); }, 1200);
 }
 
 function App() {
-    return h('div', { class: 'app' },
-        Topbar(),
-        Crumb(),
-        h('div', { class: 'app-body' },
-            Side(),
-            h('main', { class: 'app-main narrow' }, ...Overview())
-        ),
-        Status()
-    );
+    return AppShell({
+        topbar: Topbar({
+            brand: '247420', leaf: 'gm',
+            items: [
+                ['<- all projects', '../homepage/'],
+                ['readme', '#readme'],
+                ['docs', '#docs'],
+                ['source ->', 'https://github.com/AnEntrypoint']
+            ],
+            active: state.tab,
+            onNav: (label) => { if (label === 'readme' || label === 'docs') { state.tab = label; kit.render(); } }
+        }),
+        crumb: Crumb({
+            trail: ['247420', 'gm'], leaf: state.tab,
+            right: [Chip({ tone: 'dim', children: 'shipping' }), Chip({ tone: 'dim', children: 'v0.4.1' })]
+        }),
+        side: Side({
+            sections: [
+                // Only the `tab` items can be "here", so only they take the
+                // active highlight. Previously `overview` was hardcoded active
+                // forever AND the release-feed phase row took the same acid
+                // fill, so the page showed two "you are here" markers at once
+                // and neither meant anything.
+                ...sideSections.map((sec) => ({
+                    group: sec.group,
+                    items: sec.items.map((it, i) => ({
+                        key: sec.group + i, glyph: it.glyph, label: it.label,
+                        active: !!it.tab && state.tab === it.tab,
+                        href: it.href || '#' + (it.tab || it.anchor || it.label),
+                        onClick: it.tab
+                            ? (e) => { e.preventDefault(); state.tab = it.tab; kit.render(); }
+                            : null
+                    }))
+                })),
+                // Demo switcher for the changelog's states. Marked with a
+                // glyph, never the active fill — it is not a location.
+                { group: 'release feed', items: PHASES.map((p) => ({
+                    glyph: p === state.phase ? '*' : '-',
+                    label: p, key: 'ph-' + p, href: '#feed-' + p,
+                    onClick: (e) => { e.preventDefault(); state.phase = p; kit.render(); }
+                })) }
+            ]
+        }),
+        main: [
+            h('div', { class: 'ds-section ds-section-pad' },
+                Heading({ level: 1, children: 'gm' }),
+                Lede({ children: 'state machine for coding agents. it thinks, so you don\'t have to (as much).' }),
+                Section({ id: 'install', title: 'install',
+                    children: Install({ cmd: 'npx -y @anentrypoint/mcp-gm', copied: state.copied, onCopy: copyInstall }) }),
+                Section({ id: 'receipt', title: 'receipt', children: Receipt({ rows: receiptRows }) }),
+                Section({ id: 'changelog', title: 'changelog', children: ChangelogBody() })
+            )
+        ],
+        // Describes this page, not a compiler. The previous left side read
+        // "typescript · 0 errors · 0 warnings" — an editor status bar borrowed
+        // onto a package readme, reporting on a build that is not running here.
+        status: Status({
+            left: ['gm', '- ' + state.tab, '- releases ' + state.phase],
+            right: ['v0.4.1', 'MIT']
+        })
+    });
 }
 
-function render() {
-    webjsx.applyDiff(root, App());
-}
-render();
+const kit = mountKit({ root, view: App, screen: '14 Project page' });

package/dist/ui_kits/project_page/index.html

@@ -35,7 +35,8 @@
   "webjsx": "../../vendor/webjsx/index.js",
   "webjsx/": "../../vendor/webjsx/",
   "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
-  "webjsx-router": "../../vendor/webjsx-router.js"
+  "webjsx-router": "../../vendor/webjsx-router.js",
+  "ds/": "../../src/"
 } }
 </script>
 </head>

package/dist/ui_kits/search/app.js

@@ -29,7 +29,36 @@ const corpus = [
 
 const kinds = ['all', 'kit', 'preview', 'doc', 'api'];
 
-const state = { q: 'panel', kind: 'all' };
+// `phase` drives which state the results panel renders. It is a real toggle in
+// the sidebar rather than a flag only a live backend could set — an index kit
+// whose loading and error surfaces exist only in dead code has not shipped them.
+const state = { q: 'panel', kind: 'all', phase: 'ready' };
+const PHASES = ['ready', 'loading', 'error'];
+
+// Ranked-result loading placeholder. Reuses .ds-event-row-skeleton + .ds-skel*
+// (app-shell/files.css) because a RowLink is the same code/title/meta rhythm.
+function ResultsSkeleton() {
+    return h('div', {},
+        ...[0, 1, 2, 3, 4, 5].map((i) => h('div', { key: 'sk' + i, class: 'ds-event-row-skeleton' },
+            h('span', { class: 'ds-skel ds-skel-icon' }),
+            h('span', { class: 'ds-skel ds-skel-title' }),
+            h('span', { class: 'ds-skel ds-skel-meta' })
+        ))
+    );
+}
+
+function ResultsError() {
+    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' }, 'index out of date'),
+            h('div', { class: 'ds-alert-message' }, 'the search index last rebuilt 9 days ago and rejected this query. results would be wrong rather than missing, so nothing is shown. rebuilding takes about 20s.'),
+            h('div', { class: 'ds-alert-retry' },
+                h('button', { class: 'btn', onclick: () => { state.phase = 'ready'; kit.render(); } }, 'rebuild index')
+            )
+        )
+    );
+}
 
 function score(item, q) {
     const t = (item.title + ' ' + item.sub).toLowerCase();
@@ -55,22 +84,28 @@ function App() {
     return AppShell({
         topbar: Topbar({
             brand: '247420', leaf: 'search',
-            items: [['index', '../../'], ['source ↗', 'https://github.com/AnEntrypoint/design']],
+            items: [['index', '../../'], ['source ->', 'https://github.com/AnEntrypoint/design']],
             search: h('input', {
-                class: 'input', value: state.q, placeholder: 'search kits, previews, docs, api…',
-                style: 'width:280px',
+                class: 'input ds-topbar-search', value: state.q, placeholder: 'search kits, previews, docs, api…',
                 oninput: (e) => { state.q = e.target.value; kit.render(); }
             })
         }),
-        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'search', right: rows.length + ' result' + (rows.length === 1 ? '' : 's') }),
+        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'search', right: state.phase === 'ready' ? rows.length + ' result' + (rows.length === 1 ? '' : 's') : state.phase }),
         side: Side({
             sections: [
                 { group: 'kind', items: kinds.map((k) => ({
-                    glyph: state.kind === k ? '●' : '○', label: k,
+                    glyph: h('span', { class: state.kind === k ? 'ds-dot ds-dot-on' : 'ds-dot ds-dot-off' }), label: k,
                     count: k === 'all' ? corpus.length : corpus.filter((c) => c.kind === k).length,
                     href: '#' + k, active: state.kind === k, key: k,
                     onClick: (e) => { e.preventDefault(); state.kind = k; kit.render(); }
                 })) },
+                // Reachable state switcher — the results panel is this kit's
+                // data surface, so loading and error are one click away.
+                { group: 'index 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: 'recent', items: [
                     { glyph: '·', label: 'panel', key: 'q1', onClick: (e) => { e.preventDefault(); state.q = 'panel'; kit.render(); } },
                     { glyph: '·', label: 'rail',  key: 'q2', onClick: (e) => { e.preventDefault(); state.q = 'rail';  kit.render(); } },
@@ -80,17 +115,19 @@ function App() {
             ]
         }),
         main: [
-            h('div', { class: 'ds-section', style: 'padding:8px' },
+            h('div', { class: 'ds-app-surface ds-section-pad' },
                 Heading({ level: 1, children: 'search' }),
                 Lede({ children: 'query bar in the topbar, faceted filters in the sidebar, ranked results in panel rows. same row primitive every other surface uses.' }),
-                rows.length ? Panel({ title: 'results', count: rows.length, style: 'margin:8px 0', children:
-                    rows.map((r, i) => RowLink({ key: 'r' + r.code + i, code: r.code, title: r.title, sub: r.sub, meta: r.kind + ' ↗', href: r.href }))
-                }) : Panel({ title: 'no results', style: 'margin:8px 0', children: h('div', { style: 'padding:24px;text-align:center;color:var(--panel-text-3)' },
-                    h('div', { style: 'font-size:32px' }, '◌'),
-                    h('p', { style: 'margin:6px 0' }, 'no matches for ', h('code', {}, '"' + state.q + '"')),
-                    h('p', { style: 'margin:0;font-size:13px' }, 'try a shorter query, or pick a different kind.')
+                state.phase === 'loading' ? Panel({ title: 'searching', class: 'ds-panel-gap', children: ResultsSkeleton() })
+                : state.phase === 'error' ? Panel({ title: 'results unavailable', class: 'ds-panel-gap', children: ResultsError() })
+                : rows.length ? Panel({ title: 'results', count: rows.length, class: 'ds-panel-gap', children:
+                    rows.map((r, i) => RowLink({ key: 'r' + r.code + i, code: r.code, title: r.title, sub: r.sub, meta: r.kind + ' ->', href: r.href }))
+                }) : Panel({ title: 'no results', class: 'ds-panel-gap', children: h('div', { class: 'ds-empty-state' },
+                    h('div', { class: 'ds-empty-state-glyph' }, '( )'),
+                    h('p', { class: 'ds-empty-state-msg' }, 'no matches for ', h('code', {}, '"' + state.q + '"')),
+                    h('p', { class: 'ds-empty-state-hint' }, 'try a shorter query, or pick a different kind.')
                 ) }),
-                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', {}, '· query input lives in the ', Chip({ tone: 'accent', children: 'Topbar' }), ' search slot — same component the index uses.'),
                     h('p', {}, '· filters are ', Chip({ tone: 'accent', children: 'Side' }), ' sections with active states; counts come from the corpus.'),
                     h('p', {}, '· results reuse ', Chip({ tone: 'accent', children: 'RowLink' }), ' — never a bespoke result row.')
@@ -98,7 +135,7 @@ function App() {
             )
         ],
         status: Status({
-            left: ['search', '• kind=' + state.kind, '• ' + rows.length + ' rows'],
+            left: ['search', '- kind=' + state.kind, state.phase === 'ready' ? '- ' + rows.length + ' rows' : '- ' + state.phase],
             right: ['247420 / mmxxvi']
         })
     });