anentrypoint-design 0.0.121 → 0.0.124

package/dist/ui_kits/search/app.js

@@ -1,107 +0,0 @@
-import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, Side, AppShell, Panel, Heading, Lede, Chip, Row, RowLink } from 'ds/components.js';
-import { mountKit } from 'ds/bootstrap.js';
-const h = webjsx.createElement;
-
-const root = document.getElementById('root');
-
-const corpus = [
-    { code: 'kit', title: 'aicat',         sub: 'ai assistant with cat persona — ascii portrait + mood face', kind: 'kit',     href: '../aicat/' },
-    { code: 'kit', title: 'chat',          sub: 'message thread + composer with pill bubbles',                kind: 'kit',     href: '../chat/' },
-    { code: 'kit', title: 'dashboard',     sub: 'kpis, tables, receipts, changelog, panels',                  kind: 'kit',     href: '../dashboard/' },
-    { code: 'kit', title: 'file_browser',  sub: 'rails by file type, drop, preview',                          kind: 'kit',     href: '../file_browser/' },
-    { code: 'kit', title: 'homepage',      sub: 'marquee + works grid editorial banner',                      kind: 'kit',     href: '../homepage/' },
-    { code: 'kit', title: 'settings',      sub: 'sectioned forms, toggles, inputs, save bar',                 kind: 'kit',     href: '../settings/' },
-    { code: 'kit', title: 'signin',        sub: 'auth panel, providers, magic link',                          kind: 'kit',     href: '../signin/' },
-    { code: 'kit', title: 'terminal',      sub: 'cli prompt, command lines, log viewer',                      kind: 'kit',     href: '../terminal/' },
-    { code: 'pre', title: 'buttons',       sub: 'primary · secondary · ghost — 6px radius',                   kind: 'preview', href: '../../preview/buttons.html' },
-    { code: 'pre', title: 'colors-core',   sub: 'paper, ink, panel-N tonal stack',                            kind: 'preview', href: '../../preview/colors-core.html' },
-    { code: 'pre', title: 'dropzone',      sub: 'tonal upload target',                                        kind: 'preview', href: '../../preview/dropzone.html' },
-    { code: 'pre', title: 'file-viewer',   sub: 'modal preview · keyed head + body',                          kind: 'preview', href: '../../preview/file-viewer.html' },
-    { code: 'pre', title: 'manifesto',     sub: 'long-form prose with editorial caps',                        kind: 'preview', href: '../../preview/manifesto.html' },
-    { code: 'pre', title: 'type-display',  sub: 'display type ramp at the largest sizes',                     kind: 'preview', href: '../../preview/type-display.html' },
-    { code: 'doc', title: 'README',        sub: 'overview, manifesto, conventions',                           kind: 'doc',     href: 'https://github.com/AnEntrypoint/design/blob/main/README.md' },
-    { code: 'doc', title: 'SKILL',         sub: 'authoring rules for the agent',                              kind: 'doc',     href: 'https://github.com/AnEntrypoint/design/blob/main/SKILL.md' },
-    { code: 'api', title: 'h / applyDiff', sub: 'webjsx createElement + diff',                                kind: 'api',     href: 'https://github.com/AnEntrypoint/design/blob/main/src/index.js' },
-    { code: 'api', title: 'mountKit',      sub: 'ds shell + ui_kit bootstrap',                                kind: 'api',     href: 'https://github.com/AnEntrypoint/design/blob/main/src/bootstrap.js' },
-    { code: 'api', title: 'renderMarkdown',sub: 'marked v15 + dompurify lazy stack',                          kind: 'api',     href: 'https://github.com/AnEntrypoint/design/blob/main/src/markdown.js' }
-];
-
-const kinds = ['all', 'kit', 'preview', 'doc', 'api'];
-
-const state = { q: 'panel', kind: 'all' };
-
-function score(item, q) {
-    const t = (item.title + ' ' + item.sub).toLowerCase();
-    const tokens = q.toLowerCase().split(/\s+/).filter(Boolean);
-    if (!tokens.length) return 1;
-    let s = 0;
-    for (const tok of tokens) {
-        if (item.title.toLowerCase().includes(tok)) s += 3;
-        if (t.includes(tok)) s += 1;
-    }
-    return s;
-}
-
-function results() {
-    const filtered = corpus.filter((c) => state.kind === 'all' || c.kind === state.kind);
-    return filtered.map((c) => ({ ...c, _s: score(c, state.q) }))
-        .filter((c) => c._s > 0)
-        .sort((a, b) => b._s - a._s);
-}
-
-function App() {
-    const rows = results();
-    return AppShell({
-        topbar: Topbar({
-            brand: '247420', leaf: 'search',
-            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',
-                oninput: (e) => { state.q = e.target.value; kit.render(); }
-            })
-        }),
-        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'search', right: rows.length + ' result' + (rows.length === 1 ? '' : 's') }),
-        side: Side({
-            sections: [
-                { group: 'kind', items: kinds.map((k) => ({
-                    glyph: state.kind === k ? '●' : '○', 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(); }
-                })) },
-                { 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(); } },
-                    { glyph: '·', label: 'chat',  key: 'q3', onClick: (e) => { e.preventDefault(); state.q = 'chat';  kit.render(); } },
-                    { glyph: '·', label: 'auth',  key: 'q4', onClick: (e) => { e.preventDefault(); state.q = 'auth';  kit.render(); } }
-                ] }
-            ]
-        }),
-        main: [
-            h('div', { class: 'ds-section', style: 'padding:8px' },
-                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.')
-                ) }),
-                Panel({ title: 'about this kit', style: 'margin:8px 0', 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.')
-                ) })
-            )
-        ],
-        status: Status({
-            left: ['search', '• kind=' + state.kind, '• ' + rows.length + ' rows'],
-            right: ['247420 / mmxxvi']
-        })
-    });
-}
-
-const kit = mountKit({ root, view: App, screen: '12 Search' });

package/dist/ui_kits/search/index.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
-  <meta name="color-scheme" content="light dark">
-  <title>search / 247420</title>
-  <meta name="description" content="search ui kit — query bar, faceted filters, ranked results.">
-  <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/search/">
-  <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
-  <link rel="stylesheet" href="../../colors_and_type.css">
-  <link rel="stylesheet" href="../../app-shell.css">
-<script type="importmap">
-{ "imports": {
-  "webjsx": "../../vendor/webjsx/index.js",
-  "webjsx/": "../../vendor/webjsx/",
-  "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
-  "ds/": "../../src/"
-} }
-</script>
-</head>
-<body data-screen-label="12 Search">
-<div id="root"></div>
-<script type="module" src="./app.js"></script>
-</body></html>

package/dist/ui_kits/settings/app.js

@@ -1,133 +0,0 @@
-import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, Side, AppShell, Panel, Heading, Lede, Chip, Btn, Row } from 'ds/components.js';
-import { mountKit } from 'ds/bootstrap.js';
-const h = webjsx.createElement;
-
-const root = document.getElementById('root');
-
-const state = {
-    section: 'profile',
-    name: 'lanmower',
-    email: 'almagestfraternite@gmail.com',
-    handle: '@247420',
-    bio: 'creative department of the internet. always open. always a little high.',
-    theme: 'auto',
-    motion: true,
-    notify: { mentions: true, releases: true, marketing: false },
-    api_key: 'sk-247420-•••••••-c2a',
-    dirty: false
-};
-
-const sections = [
-    { id: 'profile',   label: 'profile',      glyph: '◆' },
-    { id: 'theme',     label: 'theme',        glyph: '◐' },
-    { id: 'notify',    label: 'notifications',glyph: '◇' },
-    { id: 'api',       label: 'api keys',     glyph: '⌘' },
-    { id: 'danger',    label: 'danger zone',  glyph: '!' }
-];
-
-function Field({ label, hint, children }) {
-    return h('label', { class: 'ds-field', style: 'display:flex;flex-direction:column;gap:6px;margin:10px 0' },
-        h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, label),
-        children,
-        hint ? h('span', { style: 'font-size:12px;color:var(--panel-text-2)' }, hint) : null
-    );
-}
-
-function Toggle({ on, onChange, label }) {
-    return h('button', {
-        class: on ? 'btn btn-primary' : 'btn',
-        style: 'min-width:78px',
-        onclick: () => { onChange(!on); state.dirty = true; kit.render(); }
-    }, on ? '● on' : '○ off', label ? h('span', { style: 'margin-left:8px;color:inherit;opacity:0.7' }, label) : null);
-}
-
-function Profile() {
-    return Panel({ title: 'profile', style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px' },
-        Field({ label: 'name', hint: 'shown on commits and PRs.', children:
-            h('input', { class: 'input', value: state.name, oninput: (e) => { state.name = e.target.value; state.dirty = true; } }) }),
-        Field({ label: 'email', hint: 'used for git identity. never mailed.', children:
-            h('input', { class: 'input', type: 'email', value: state.email, oninput: (e) => { state.email = e.target.value; state.dirty = true; } }) }),
-        Field({ label: 'handle', children:
-            h('input', { class: 'input', value: state.handle, oninput: (e) => { state.handle = e.target.value; state.dirty = true; } }) }),
-        Field({ label: 'bio', hint: 'one sentence. plain text.', children:
-            h('textarea', { class: 'input', rows: 3, oninput: (e) => { state.bio = e.target.value; state.dirty = true; } }, state.bio) })
-    ) });
-}
-
-function Theme() {
-    const opts = [['auto', '◐ auto'], ['light', '○ light'], ['dark', '● dark']];
-    return Panel({ title: 'theme', style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px' },
-        Field({ label: 'mode', children: h('div', { style: 'display:flex;gap:6px' },
-            ...opts.map(([k, l]) => h('button', { key: k,
-                class: state.theme === k ? 'btn btn-primary' : 'btn',
-                onclick: () => { state.theme = k; state.dirty = true; kit.render(); } }, l))
-        ) }),
-        Field({ label: 'motion', hint: 'honour prefers-reduced-motion regardless.', children:
-            Toggle({ on: state.motion, onChange: (v) => state.motion = v, label: state.motion ? 'animations on' : 'animations off' }) })
-    ) });
-}
-
-function Notify() {
-    return Panel({ title: 'notifications', style: 'margin:8px 0', children: [
-        Row({ key: 'n1', code: '◆', title: 'mentions',  sub: 'when someone @s you',          meta: h('span', {}, Toggle({ on: state.notify.mentions, onChange: (v) => state.notify.mentions = v })) }),
-        Row({ key: 'n2', code: '◇', title: 'releases',  sub: 'on every tagged build',        meta: h('span', {}, Toggle({ on: state.notify.releases, onChange: (v) => state.notify.releases = v })) }),
-        Row({ key: 'n3', code: '◇', title: 'marketing', sub: 'occasional product updates',   meta: h('span', {}, Toggle({ on: state.notify.marketing, onChange: (v) => state.notify.marketing = v })) })
-    ] });
-}
-
-function ApiKeys() {
-    return Panel({ title: 'api keys', count: 1, style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px' },
-        Field({ label: 'production key', hint: 'rotate quarterly.', children:
-            h('div', { style: 'display:flex;gap:8px' },
-                h('input', { class: 'input', value: state.api_key, readonly: true, style: 'flex:1;font-family:var(--ff-mono)' }),
-                h('button', { class: 'btn', onclick: () => { navigator.clipboard?.writeText(state.api_key); } }, 'copy'),
-                h('button', { class: 'btn', onclick: () => { state.api_key = 'sk-247420-' + Math.random().toString(36).slice(2, 10) + '-' + Math.random().toString(36).slice(2, 5); state.dirty = true; kit.render(); } }, 'rotate')
-            ) })
-    ) });
-}
-
-function Danger() {
-    return Panel({ title: 'danger zone', kind: 'danger', style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px;display:flex;flex-direction:column;gap:10px' },
-        h('p', { style: 'margin:0;color:var(--panel-text-2)' }, 'these actions are permanent.'),
-        h('div', { style: 'display:flex;gap:8px' },
-            h('button', { class: 'btn', style: 'color:var(--mascot,#e0a200)' }, 'export account'),
-            h('button', { class: 'btn', style: 'color:var(--warn)' }, 'delete account')
-        )
-    ) });
-}
-
-function App() {
-    const view = { profile: Profile, theme: Theme, notify: Notify, api: ApiKeys, danger: Danger }[state.section]();
-    return AppShell({
-        topbar: Topbar({ brand: '247420', leaf: 'settings', items: [['index', '../../'], ['source ↗', 'https://github.com/AnEntrypoint/design']] }),
-        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'settings · ' + state.section }),
-        side: Side({
-            sections: [
-                { group: 'sections', items: sections.map((s) => ({
-                    glyph: s.glyph, label: s.label,
-                    href: '#' + s.id, active: state.section === s.id, key: s.id,
-                    onClick: (e) => { e.preventDefault(); state.section = s.id; kit.render(); }
-                })) }
-            ]
-        }),
-        main: [
-            h('div', { class: 'ds-section', style: 'padding:8px' },
-                Heading({ level: 1, children: 'settings' }),
-                Lede({ children: 'every input primitive in one surface — fields, toggles, segmented buttons, danger panel, save bar.' }),
-                view,
-                state.dirty ? h('div', { style: 'position:sticky;bottom:8px;display:flex;justify-content:flex-end;gap:8px;padding:10px;background:var(--panel-2);border-radius:10px;margin:8px 0' },
-                    h('span', { style: 'flex:1;color:var(--panel-text-2)' }, 'unsaved changes'),
-                    h('button', { class: 'btn', onclick: () => { state.dirty = false; kit.render(); } }, 'discard'),
-                    h('button', { class: 'btn btn-primary', onclick: () => { state.dirty = false; kit.render(); } }, 'save')
-                ) : null
-            )
-        ],
-        status: Status({
-            left: ['settings', '• ' + state.section, state.dirty ? '• dirty' : '• saved'],
-            right: ['247420 / mmxxvi']
-        })
-    });
-}
-
-const kit = mountKit({ root, view: App, screen: '10 Settings' });

package/dist/ui_kits/settings/index.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
-  <meta name="color-scheme" content="light dark">
-  <title>settings / 247420</title>
-  <meta name="description" content="settings ui kit — sectioned forms, toggles, inputs, save bar.">
-  <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/settings/">
-  <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
-  <link rel="stylesheet" href="../../colors_and_type.css">
-  <link rel="stylesheet" href="../../app-shell.css">
-<script type="importmap">
-{ "imports": {
-  "webjsx": "../../vendor/webjsx/index.js",
-  "webjsx/": "../../vendor/webjsx/",
-  "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
-  "ds/": "../../src/"
-} }
-</script>
-</head>
-<body data-screen-label="10 Settings">
-<div id="root"></div>
-<script type="module" src="./app.js"></script>
-</body></html>

package/dist/ui_kits/signin/app.js

@@ -1,115 +0,0 @@
-import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, AppShell, Panel, Heading, Lede, Chip } from 'ds/components.js';
-import { mountKit } from 'ds/bootstrap.js';
-const h = webjsx.createElement;
-
-const root = document.getElementById('root');
-const state = { mode: 'signin', email: '', password: '', remember: true, sent: false, error: '' };
-
-function setMode(m) { state.mode = m; state.sent = false; state.error = ''; kit.render(); }
-
-function submit(e) {
-    e.preventDefault();
-    if (!state.email.includes('@')) { state.error = 'enter a real email.'; kit.render(); return; }
-    if (state.mode !== 'magic' && state.password.length < 6) { state.error = 'password must be at least 6 characters.'; kit.render(); return; }
-    state.error = '';
-    state.sent = true;
-    kit.render();
-}
-
-function Provider({ glyph, label, onClick }) {
-    return h('button', {
-        class: 'btn',
-        style: 'flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px',
-        onclick: onClick || ((e) => { e.preventDefault(); state.error = '(stub) provider not wired'; kit.render(); })
-    },
-        h('span', { style: 'font-family:var(--ff-mono);color:var(--panel-text-3)' }, glyph),
-        h('span', {}, label)
-    );
-}
-
-function Form() {
-    if (state.sent) {
-        return h('div', { style: 'padding:18px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center' },
-            h('div', { style: 'font-size:32px;color:var(--panel-accent)' }, '✓'),
-            h('p', { style: 'margin:0;font-weight:600' }, state.mode === 'magic' ? 'check your email' : (state.mode === 'reset' ? 'reset link sent' : 'welcome back')),
-            h('p', { style: 'margin:0;color:var(--panel-text-2)' }, state.mode === 'magic' ? 'we sent a sign-in link to ' + state.email : (state.mode === 'reset' ? 'follow the link to set a new password.' : 'redirecting…'))
-        );
-    }
-    return h('form', { onsubmit: submit, style: 'padding:18px;display:flex;flex-direction:column;gap:10px' },
-        h('label', { style: 'display:flex;flex-direction:column;gap:4px' },
-            h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, 'email'),
-            h('input', { class: 'input', type: 'email', placeholder: 'you@247420.xyz', value: state.email, autocomplete: 'email', oninput: (e) => { state.email = e.target.value; } })
-        ),
-        state.mode !== 'magic' && state.mode !== 'reset' ? h('label', { style: 'display:flex;flex-direction:column;gap:4px' },
-            h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, 'password'),
-            h('input', { class: 'input', type: 'password', placeholder: '••••••••', value: state.password, autocomplete: state.mode === 'signup' ? 'new-password' : 'current-password', oninput: (e) => { state.password = e.target.value; } })
-        ) : null,
-        state.mode === 'signin' ? h('div', { style: 'display:flex;align-items:center;justify-content:space-between' },
-            h('label', { style: 'display:flex;align-items:center;gap:6px;cursor:pointer' },
-                h('input', { type: 'checkbox', checked: state.remember, onchange: (e) => { state.remember = e.target.checked; } }),
-                h('span', { style: 'color:var(--panel-text-2);font-size:13px' }, 'remember me')
-            ),
-            h('a', { href: '#reset', onclick: (e) => { e.preventDefault(); setMode('reset'); }, style: 'font-size:13px' }, 'forgot password?')
-        ) : null,
-        state.error ? h('div', { style: 'padding:8px 10px;background:var(--panel-1);border-radius:8px;color:#cc4242;font-size:13px' }, state.error) : null,
-        h('button', { class: 'btn btn-primary', type: 'submit' },
-            state.mode === 'signup' ? 'create account →' :
-            state.mode === 'magic'  ? 'send magic link →' :
-            state.mode === 'reset'  ? 'send reset link →' : 'sign in →'
-        ),
-        state.mode !== 'reset' ? h('div', { style: 'display:flex;align-items:center;gap:10px;margin:6px 0;color:var(--panel-text-3);font-size:12px' },
-            h('div', { style: 'flex:1;height:1px;background:var(--panel-2)' }),
-            h('span', {}, 'or'),
-            h('div', { style: 'flex:1;height:1px;background:var(--panel-2)' })
-        ) : null,
-        state.mode !== 'reset' ? h('div', { style: 'display:flex;gap:8px' },
-            Provider({ glyph: '◆', label: 'github' }),
-            Provider({ glyph: '◇', label: 'google' }),
-            Provider({ glyph: '✦', label: 'sso' })
-        ) : null,
-        state.mode !== 'reset' && state.mode !== 'magic' ? h('button', { class: 'btn', onclick: (e) => { e.preventDefault(); setMode('magic'); } }, 'use a magic link instead') : null
-    );
-}
-
-function App() {
-    const headings = {
-        signin: ['sign in',     'welcome back. pick a provider or use email.'],
-        signup: ['create',      'join the 247420 portfolio. one account, every kit.'],
-        magic:  ['magic link',  'we’ll email you a one-tap sign-in link. no password.'],
-        reset:  ['reset',       'enter your email to receive a reset link.']
-    }[state.mode];
-    return AppShell({
-        narrow: true,
-        topbar: Topbar({ brand: '247420', leaf: 'auth', items: [['index', '../../']] }),
-        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'signin · ' + state.mode }),
-        main: [
-            h('div', { class: 'ds-section', style: 'padding:8px;display:flex;flex-direction:column;align-items:center' },
-                h('div', { style: 'width:100%;max-width:440px;display:flex;flex-direction:column;gap:8px;margin:24px 0' },
-                    Heading({ level: 1, children: headings[0] }),
-                    Lede({ children: headings[1] }),
-                    Panel({ children: Form() }),
-                    h('div', { style: 'display:flex;justify-content:center;gap:14px;margin-top:8px;font-size:13px' },
-                        ['signin', 'signup', 'magic'].map((m) =>
-                            h('a', { key: m, href: '#' + m,
-                                onclick: (e) => { e.preventDefault(); setMode(m); },
-                                style: 'color:' + (state.mode === m ? 'var(--panel-text)' : 'var(--panel-text-3)') + ';text-decoration:' + (state.mode === m ? 'underline' : 'none')
-                            }, m === 'signin' ? 'sign in' : m === 'signup' ? 'create account' : 'magic link')
-                        )
-                    ),
-                    h('p', { style: 'text-align:center;font-size:12px;color:var(--panel-text-3);margin:6px 0' },
-                        'by continuing you agree to the ',
-                        Chip({ tone: 'dim', children: 'terms' }), ' and ',
-                        Chip({ tone: 'dim', children: 'privacy notice' }), '.'
-                    )
-                )
-            )
-        ],
-        status: Status({
-            left: ['auth', '• ' + state.mode, state.error ? '• error' : '• ok'],
-            right: ['247420 / mmxxvi']
-        })
-    });
-}
-
-const kit = mountKit({ root, view: App, screen: '11 Sign in' });

package/dist/ui_kits/signin/index.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
-  <meta name="color-scheme" content="light dark">
-  <title>signin / 247420</title>
-  <meta name="description" content="signin ui kit — authentication panel, providers, tone-on-tone form.">
-  <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/signin/">
-  <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
-  <link rel="stylesheet" href="../../colors_and_type.css">
-  <link rel="stylesheet" href="../../app-shell.css">
-<script type="importmap">
-{ "imports": {
-  "webjsx": "../../vendor/webjsx/index.js",
-  "webjsx/": "../../vendor/webjsx/",
-  "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
-  "ds/": "../../src/"
-} }
-</script>
-</head>
-<body data-screen-label="11 Sign in">
-<div id="root"></div>
-<script type="module" src="./app.js"></script>
-</body></html>

package/dist/ui_kits/slide_deck/app.js

@@ -1,174 +0,0 @@
-import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, Side, AppShell, Heading, Lede, Chip, ThemeToggle } from 'ds/components.js';
-import { mountKit } from 'ds/bootstrap.js';
-const h = webjsx.createElement;
-
-const root = document.getElementById('root');
-
-const slides = [
-    {
-        kind: 'title',
-        eyebrow: '247420 · mmxxvi',
-        title: 'the deck',
-        sub: 'a 16:9 slide template built from the SDK chrome.',
-        accent: 'green'
-    },
-    {
-        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.'
-    },
-    {
-        kind: 'bullets',
-        eyebrow: '02',
-        title: 'three modes for theme',
-        items: [
-            ['auto',  'follow the OS — re-renders live when you flip dark mode'],
-            ['paper', 'force light — for daylight, demos, projection screens'],
-            ['ink',   'force dark — for night, low-light reads, oled']
-        ]
-    },
-    {
-        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.'
-    },
-    {
-        kind: 'title',
-        eyebrow: 'fin',
-        title: 'two-four-seven · four-twenty',
-        sub: 'always open, always a little high.',
-        accent: 'mascot'
-    }
-];
-
-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 || '');
-
-    if (s.kind === 'title') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px' },
-            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),
-            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' },
-            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: 't-lede' }, s.body)
-        );
-    }
-    if (s.kind === 'bullets') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;gap:18px' },
-            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),
-            ...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)
-                )
-            )
-        );
-    }
-    if (s.kind === 'quote') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:42ch' },
-            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)
-        );
-    }
-    if (s.kind === 'split') {
-        return h('div', { style: 'display:flex;flex-direction:column;justify-content:center;gap:24px' },
-            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)
-            )
-        );
-    }
-    return 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)));
-}
-
-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)' },
-        h('button', {
-            class: 'btn',
-            onclick: () => { if (state.i > 0) { state.i--; kit.render(); } }
-        }, '← prev'),
-        h('span', { style: 'color:var(--fg-3)' }, (state.i + 1) + ' / ' + slides.length),
-        h('button', {
-            class: 'btn',
-            onclick: () => { if (state.i < slides.length - 1) { state.i++; kit.render(); } }
-        }, 'next →')
-    );
-}
-
-function App() {
-    return AppShell({
-        topbar: Topbar({
-            brand: '247420',
-            leaf: 'slide deck',
-            items: [['index', '../../'], ['system primer', '../system_primer/']]
-        }),
-        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'slide deck' }),
-        side: Side({
-            sections: [
-                { group: 'slides', items: slides.map((s, i) => ({
-                    glyph: i === state.i ? '◆' : '◇',
-                    label: (i + 1) + ' · ' + (s.title || s.eyebrow || s.kind),
-                    key: 's' + i
-                })) }
-            ]
-        }),
-        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.' }),
-                Stage(),
-                Controls()
-            )
-        ],
-        status: Status({
-            left: ['slide deck', '• slide ' + (state.i + 1) + '/' + slides.length, '• ←/→ to nav'],
-            right: ['247420 / mmxxvi']
-        })
-    });
-}
-
-const kit = mountKit({ root, view: App, screen: '17 Slide Deck' });
-
-window.addEventListener('keydown', (e) => {
-    if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
-        if (state.i < slides.length - 1) { state.i++; kit.render(); e.preventDefault(); }
-    } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
-        if (state.i > 0) { state.i--; kit.render(); e.preventDefault(); }
-    } else if (e.key === 'Home') { state.i = 0; kit.render(); }
-    else if (e.key === 'End') { state.i = slides.length - 1; kit.render(); }
-});

package/dist/ui_kits/slide_deck/index.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)">
-  <meta name="color-scheme" content="light dark">
-  <title>slide deck / 247420</title>
-  <meta name="description" content="16:9 slide deck template — keyboard nav, slide counter, SDK chrome.">
-  <link rel="canonical" href="https://anentrypoint.github.io/design/ui_kits/slide_deck/">
-  <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
-  <link rel="stylesheet" href="../../colors_and_type.css">
-  <link rel="stylesheet" href="../../app-shell.css">
-<script type="importmap">
-{ "imports": {
-  "webjsx": "../../vendor/webjsx/index.js",
-  "webjsx/": "../../vendor/webjsx/",
-  "webjsx/jsx-runtime": "../../vendor/webjsx/jsx-runtime.js",
-  "ds/": "../../src/"
-} }
-</script>
-</head>
-<body data-screen-label="17 Slide Deck">
-<div id="root"></div>
-<script type="module" src="./app.js"></script>
-</body></html>