anentrypoint-design 0.0.1

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "anentrypoint-design",
+  "version": "0.0.1",
+  "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
+  "type": "module",
+  "main": "./dist/247420.js",
+  "module": "./dist/247420.js",
+  "exports": {
+    ".": {
+      "import": "./dist/247420.js",
+      "default": "./dist/247420.js"
+    },
+    "./app": "./dist/247420.app.js",
+    "./css": "./dist/247420.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AnEntrypoint/Design.git"
+  },
+  "keywords": [
+    "247420",
+    "anentrypoint",
+    "design-system",
+    "webjsx",
+    "rippleui"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "postcss": "^8.5.12",
+    "postcss-prefix-selector": "^2.1.1"
+  }
+}

package/src/app.js

@@ -0,0 +1,131 @@
+// Unified 247420 single-page app. Replaces the separate homepage,
+// project_page, writing, and manifesto entry points with one WebJSX page
+// that uses the design-system components and hash routing.
+import { h, mount, installStyles, components as C } from './index.js';
+
+const data = {
+    nav: [['works', '#/works'], ['writing', '#/writing'], ['manifesto', '#/manifesto'], ['source ↗', 'https://github.com/AnEntrypoint']],
+    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.' },
+        { 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.' }
+    ],
+    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' }
+    ],
+    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 }
+    ],
+    currentlyShipping: [
+        { title: 'gm', sub: 'state machine v0.4.1', meta: 'live', live: true },
+        { title: 'zellous', sub: 'push-to-talk', meta: 'live', live: true },
+        { title: 'thebird', sub: '—', meta: 'wip', live: false }
+    ],
+    project: {
+        name: 'gm', tagline: 'state machine for coding agents. it thinks, so you don\'t have to (as much).',
+        install: 'npx -y @anentrypoint/mcp-gm',
+        receipt: [['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']],
+        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.' },
+            { date: '2026.02.09', ver: 'v0.3.7', msg: 'astgrep_search is now astgrep_enhanced_search.' },
+            { date: '2025.12.11', ver: 'v0.3.0', msg: 'first public release. gm, world.' }
+        ]
+    }
+};
+
+const state = {
+    route: parseRoute(),
+    opened: -1,
+    copied: false
+};
+
+function parseRoute() {
+    const m = (location.hash || '#/').slice(1).split('/').filter(Boolean);
+    return { page: m[0] || 'works', id: m[1] || null };
+}
+
+window.addEventListener('hashchange', () => {
+    state.route = parseRoute();
+    render();
+});
+
+let render;
+
+function navigate(name) {
+    location.hash = '#/' + name;
+}
+
+function topbar() {
+    return C.Topbar({
+        brand: '247420', leaf: 'an entrypoint',
+        items: data.nav,
+        active: state.route.page,
+        onNav: navigate
+    });
+}
+
+function crumb() {
+    if (state.route.page === 'project') {
+        return C.Crumb({
+            trail: ['247420', 'gm'], leaf: 'overview',
+            right: [C.Chip({ tone: 'accent', children: '● live' }), C.Chip({ tone: 'dim', children: 'v0.4.1' })]
+        });
+    }
+    return C.Crumb({ trail: ['247420'], leaf: state.route.page });
+}
+
+function status() {
+    return C.Status({
+        left: ['main', '• 8 works', '• 5 posts'],
+        right: ['probably emerging', h('a', { href: 'https://github.com/AnEntrypoint' }, 'source ↗')]
+    });
+}
+
+function pageMain() {
+    const r = state.route.page;
+    if (r === 'project') {
+        return C.ProjectView({
+            project: data.project,
+            copied: state.copied,
+            onCopy: (cmd) => { navigator.clipboard?.writeText(cmd); state.copied = true; render(); setTimeout(() => { state.copied = false; render(); }, 1200); }
+        });
+    }
+    if (r === 'writing') {
+        return [C.Section({ title: '// recent writing', children: C.WritingList({ posts: data.posts }) })];
+    }
+    if (r === 'manifesto') {
+        return [C.Section({ title: '// manifesto · rough draft', children: C.Manifesto({ paragraphs: data.manifesto }) })];
+    }
+    return C.HomeView({
+        state, onNav: navigate,
+        onToggleWork: (i) => { state.opened = i; render(); },
+        works: data.works, posts: data.posts, manifesto: data.manifesto,
+        currentlyShipping: data.currentlyShipping
+    });
+}
+
+function App() {
+    return C.AppShell({
+        topbar: topbar(),
+        crumb: crumb(),
+        main: pageMain(),
+        status: status(),
+        narrow: state.route.page === 'project'
+    });
+}
+
+await installStyles();
+const root = document.getElementById('root');
+render = mount(root, App);

package/src/components.js

@@ -0,0 +1,280 @@
+import * as webjsx from '../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+// ---------- primitives ----------
+
+export function Brand({ name = '247420', leaf } = {}) {
+    return h('span', { class: 'brand' }, name,
+        leaf ? h('span', { class: 'slash' }, ' / ') : null,
+        leaf || null);
+}
+
+export function Chip({ tone = '', children }) {
+    return h('span', { class: 'chip' + (tone ? ' ' + tone : '') }, children);
+}
+
+export function Btn({ href = '#', primary, children, onClick }) {
+    return h('a', {
+        class: primary ? 'btn-primary' : 'btn',
+        href,
+        onclick: onClick
+    }, children);
+}
+
+export function Glyph({ children, color }) {
+    return h('span', { class: 'glyph', style: color ? `color:${color}` : '' }, children);
+}
+
+// ---------- chrome ----------
+
+export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search } = {}) {
+    return h('header', { class: 'app-topbar' },
+        Brand({ name: brand, leaf }),
+        search ? h('label', { class: 'app-search' },
+            h('span', { class: 'icon' }, '⌕'),
+            h('input', { type: 'search', placeholder: search, 'aria-label': 'search' })
+        ) : null,
+        h('nav', {}, ...items.map(([label, href]) =>
+            h('a', {
+                key: label,
+                href,
+                class: active === label.replace(' ↗', '') ? 'active' : '',
+                onclick: (e) => {
+                    if (!String(href).startsWith('http') && onNav) {
+                        e.preventDefault();
+                        onNav(label.replace(' ↗', ''));
+                    }
+                }
+            }, label)
+        ))
+    );
+}
+
+export function Crumb({ trail = [], leaf = '', right } = {}) {
+    const parts = [];
+    trail.forEach((t, i) => {
+        parts.push(h('span', { key: 't' + i }, t));
+        parts.push(h('span', { key: 's' + i, class: 'sep' }, '›'));
+    });
+    parts.push(h('span', { key: 'leaf', class: 'leaf' }, leaf));
+    if (right) parts.push(h('span', { key: 'r', style: 'margin-left:auto;display:flex;gap:10px;align-items:center' }, ...(Array.isArray(right) ? right : [right])));
+    return h('div', { class: 'app-crumb' }, ...parts);
+}
+
+export function Side({ sections = [] } = {}) {
+    return h('aside', { class: 'app-side' }, ...sections.flatMap(sec => [
+        h('div', { class: 'group', key: sec.group }, sec.group),
+        ...sec.items.map((item, i) => {
+            const { glyph, label, href = '#', active, count, color, onClick } = item;
+            return h('a', {
+                key: sec.group + i,
+                href,
+                class: active ? 'active' : '',
+                onclick: onClick
+            },
+                glyph != null ? Glyph({ children: glyph, color }) : null,
+                h('span', {}, label),
+                count != null ? h('span', { class: 'count' }, String(count)) : null
+            );
+        })
+    ]));
+}
+
+export function Status({ left = [], right = [] } = {}) {
+    return h('footer', { class: 'app-status' },
+        ...left.map((t, i) => h('span', { key: 'l' + i, class: 'item' }, t)),
+        h('span', { class: 'spread' }),
+        ...right.map((t, i) => h('span', { key: 'r' + i, class: 'item' }, t))
+    );
+}
+
+export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
+    return h('div', { class: 'app' },
+        topbar || null,
+        crumb || null,
+        h('div', { class: 'app-body' + (side ? '' : ' no-side') },
+            side || null,
+            h('main', { class: 'app-main' + (narrow ? ' narrow' : '') }, ...(Array.isArray(main) ? main : [main]))
+        ),
+        status || null
+    );
+}
+
+// ---------- panels & rows ----------
+
+export function Panel({ title, count, right, style = '', children }) {
+    return h('div', { class: 'panel', style },
+        title != null ? h('div', { class: 'panel-head' },
+            h('span', {}, title),
+            right != null ? right : (count != null ? h('span', {}, String(count)) : null)
+        ) : null,
+        h('div', { class: 'panel-body' }, ...(Array.isArray(children) ? children : [children]))
+    );
+}
+
+export function Row({ code, title, sub, meta, active, onClick, key, style }) {
+    return h('div', {
+        key,
+        class: 'row' + (active ? ' active' : ''),
+        onclick: onClick,
+        style
+    },
+        code != null ? h('span', { class: 'code' }, code) : null,
+        h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
+        meta != null ? h('span', { class: 'meta' }, meta) : null
+    );
+}
+
+export function RowLink({ code, title, sub, meta, href = '#', key }) {
+    return h('a', { key, class: 'row', href },
+        code != null ? h('span', { class: 'code' }, code) : null,
+        h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
+        meta != null ? h('span', { class: 'meta' }, meta) : null
+    );
+}
+
+// ---------- content blocks ----------
+
+export function Heading({ level = 1, children, style = '' }) {
+    return h('h' + level, { style }, children);
+}
+
+export function Lede({ children }) {
+    return h('p', { class: 'lede' }, children);
+}
+
+export function Hero({ title, body, accent, badge, badgeCount }) {
+    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' }, title),
+        body ? h('p', { style: 'font-size:14px;line-height:1.55;color:var(--panel-text-2);max-width:64ch;margin:0 0 20px 0' },
+            body,
+            accent ? h('span', { style: 'color:var(--panel-accent);font-weight:500' }, ' ' + accent) : null
+        ) : null,
+        badge ? Panel({ title: badge, count: badgeCount, style: 'max-width:560px;margin:0', children: [] }) : null
+    );
+}
+
+export function Install({ cmd, copied, onCopy }) {
+    return h('div', { class: 'cli' },
+        h('span', { class: 'prompt' }, '$'),
+        h('span', { class: 'cmd' }, cmd),
+        h('span', { class: 'copy', onclick: () => onCopy && onCopy(cmd) }, copied ? 'copied' : 'copy')
+    );
+}
+
+export 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))
+        ))
+    );
+}
+
+export function Changelog({ entries = [] }) {
+    return Panel({
+        style: 'max-width:900px',
+        children: 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:12px' }, e.ver),
+                h('span', { class: 'title' }, e.msg)
+            )
+        )
+    });
+}
+
+export function WorksList({ works = [], openedIndex = -1, onToggle }) {
+    return Panel({
+        title: `works · ${String(works.length).padStart(2, '0')} of ~${works.length}`,
+        right: h('a', { href: 'https://github.com/AnEntrypoint', style: 'color:var(--panel-accent);text-decoration:none' }, 'all repos ↗'),
+        children: works.map((w, i) => {
+            const isOpen = openedIndex === i;
+            return h('div', { key: i },
+                Row({
+                    code: w.code, title: w.title, sub: w.sub,
+                    meta: w.meta + '  ' + (isOpen ? '−' : '+'),
+                    active: isOpen,
+                    onClick: () => onToggle && onToggle(isOpen ? -1 : i)
+                }),
+                isOpen ? h('div', { style: 'padding:14px 20px 18px 86px;background:var(--panel-2);color:var(--panel-text);font-size:13px;line-height:1.6' },
+                    h('p', { style: 'margin:0 0 12px 0;max-width:64ch' }, w.body),
+                    h('div', { style: 'display:flex;gap:8px' },
+                        Btn({ primary: true, href: w.href || '#', children: 'open ↗' }),
+                        Btn({ href: w.source || '#', children: 'source' })
+                    )
+                ) : null
+            );
+        })
+    });
+}
+
+export function WritingList({ posts = [] }) {
+    return Panel({
+        children: posts.map((p, i) =>
+            RowLink({ key: i, code: p.date, title: p.title, meta: '§ ' + p.tag, href: p.href || '#' })
+        )
+    });
+}
+
+export function Manifesto({ paragraphs = [], maxWidth = 820 }) {
+    return Panel({
+        style: `max-width:${maxWidth}px`,
+        children: h('div', { style: 'padding:20px 24px;font-size:14px;line-height:1.7;color:var(--panel-text)' },
+            ...paragraphs.map((p, i) => h('p', {
+                key: i,
+                style: 'margin:0 0 12px 0' + (p.dim ? ';color:var(--panel-text-2)' : '')
+            }, p.text || p))
+        )
+    });
+}
+
+export function Section({ title, children }) {
+    return h('div', { style: 'padding:20px 32px' },
+        title ? h('h3', {}, title) : null,
+        ...(Array.isArray(children) ? children : [children])
+    );
+}
+
+// ---------- assembled page views ----------
+
+export function HomeView({ state, onNav, onToggleWork, works, posts, manifesto, currentlyShipping }) {
+    return [
+        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.'
+        }),
+        currentlyShipping ? h('div', { style: 'padding:0 32px 24px 32px' },
+            Panel({
+                title: 'currently shipping',
+                count: currentlyShipping.length,
+                style: 'max-width:560px;margin:0',
+                children: currentlyShipping.map((row, i) =>
+                    Row({
+                        key: i,
+                        code: h('span', { style: `color:${row.live ? 'var(--panel-accent)' : 'var(--panel-text-3)'}` }, row.live ? '●' : '○'),
+                        title: row.title, sub: row.sub, meta: row.meta
+                    })
+                )
+            })
+        ) : null,
+        Section({ title: '// works', children: WorksList({ works, openedIndex: state.opened, onToggle: onToggleWork }) }),
+        Section({ title: '// recent writing', children: WritingList({ posts }) }),
+        Section({ title: '// manifesto · rough draft', children: Manifesto({ paragraphs: manifesto }) })
+    ];
+}
+
+export function ProjectView({ project, copied, onCopy }) {
+    return [
+        Heading({ level: 1, children: project.name }),
+        Lede({ children: project.tagline }),
+        Heading({ level: 3, children: 'install' }),
+        Install({ cmd: project.install, copied, onCopy }),
+        Heading({ level: 3, children: 'receipt' }),
+        Receipt({ rows: project.receipt }),
+        Heading({ level: 3, children: 'changelog' }),
+        Changelog({ entries: project.changelog })
+    ];
+}
+
+export { h };

package/src/deck-stage.js

@@ -0,0 +1,17 @@
+// Lazy registration: <deck-stage> requires HTMLElement / customElements,
+// which only exist in the browser. Calling registerDeckStage() in a
+// browser context performs the side-effect import and defines the element.
+let _registered = false;
+export async function registerDeckStage() {
+    if (_registered) return customElements.get('deck-stage');
+    if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') {
+        return null;
+    }
+    await import('../slides/deck-stage.js');
+    _registered = true;
+    return customElements.get('deck-stage');
+}
+
+export function getDeckStage() {
+    return (typeof customElements !== 'undefined') ? customElements.get('deck-stage') : null;
+}

package/src/index.js

@@ -0,0 +1,30 @@
+import * as webjsx from '../vendor/webjsx/index.js';
+import { loadCss, scope } from './styles.js';
+import { registerDeckStage, getDeckStage } from './deck-stage.js';
+import * as components from './components.js';
+
+let _installed = false;
+export async function installStyles(target) {
+    if (_installed && !target) return;
+    const css = await loadCss();
+    const root = target || document.head;
+    const tag = document.createElement('style');
+    tag.setAttribute('data-247420', '');
+    tag.textContent = css;
+    root.appendChild(tag);
+    if (!target) _installed = true;
+}
+
+export function mount(rootEl, viewFn, { autoScope = true } = {}) {
+    if (autoScope && rootEl && rootEl.classList && !rootEl.classList.contains(scope.slice(1))) {
+        rootEl.classList.add(scope.slice(1));
+    }
+    const render = () => webjsx.applyDiff(rootEl, viewFn(render));
+    render();
+    return render;
+}
+
+export { webjsx, loadCss, scope, registerDeckStage, getDeckStage, components };
+export const h = webjsx.createElement;
+export const applyDiff = webjsx.applyDiff;
+export default { webjsx, loadCss, scope, installStyles, mount, h, applyDiff, registerDeckStage, getDeckStage, components };

package/src/styles.js

@@ -0,0 +1,4 @@
+// Replaced at build time by scripts/build.mjs with the gzip+base64 payload
+// and a streaming DecompressionStream-based loader.
+export const scope = '.ds-247420';
+export async function loadCss() { return ''; }