anentrypoint-design 0.0.381 → 0.0.382

package/src/components/content/panel.js

@@ -0,0 +1,79 @@
+// Panel family — the bordered content container (`Panel`, aliased `Card`),
+// the section wrapper (`Section`), the items[]-to-rows mapper
+// (`PanelFromItems`), and the two tabular panel bodies that only ever appear
+// inside one (`Receipt` key/value table, `Changelog` release list).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { RowLink } from './row.js';
+const h = webjsx.createElement;
+
+export function Panel({ title, count, right, style = '', class: className = '', children, kind, id }) {
+    const cls = 'panel' + (kind ? ' panel-' + kind : '') + (className ? ' ' + className : '');
+    return h('div', { class: cls, style, id: id || null },
+        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]))
+    );
+}
+
+// Card — semantic alias of Panel; behaves identically.
+export const Card = Panel;
+
+// PanelFromItems — the shared 'items[] -> RowLink wrapped in Panel' mapper
+// every portfolio consumer theme.mjs (zellous/wireweave/thebird/247420) had
+// hand-rolled identically: items.map((it,i) => RowLink({code, title, sub,
+// meta, href})) inside a titled Panel. `keyPrefix` seeds each row's stable
+// key (`${keyPrefix}${i}`), matching the consumer convention of a
+// one-letter-per-section prefix (e.g. 'f' for features, 'm' for modules).
+// Field aliasing mirrors the union of shapes actually hand-rolled downstream:
+// title reads `title` then `name`; sub reads `sub` then `desc`; code falls
+// back to a zero-padded 1-based index when the item carries none. `heading`/
+// `count`/`style`/`kind` pass through to Panel unchanged.
+export function PanelFromItems({ heading, items = [], keyPrefix = 'i', count, style, kind, emptyText } = {}) {
+    if (!items || !items.length) return emptyText != null ? h('div', { class: 'empty' }, emptyText) : null;
+    const rows = items.map((it, i) => {
+        const codeVal = it.code != null ? it.code : (it.rank != null ? it.rank : String(i + 1).padStart(2, '0'));
+        return RowLink({
+            key: keyPrefix + i,
+            code: codeVal,
+            title: it.title != null ? it.title : it.name,
+            sub: it.sub != null ? it.sub : (it.desc != null ? it.desc : ''),
+            meta: it.meta != null ? it.meta : '',
+            href: it.href || '#'
+        });
+    });
+    return Panel({ title: heading, count, style, kind, children: rows });
+}
+
+export function Section({ title, eyebrow, children, id }) {
+    return h('section', { class: 'ds-section', id: id || null },
+        eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
+        title ? h('h3', {}, title) : null,
+        ...(Array.isArray(children) ? children : [children])
+    );
+}
+
+export function Receipt({ rows = [], emptyText = 'nothing here yet' }) {
+    if (!rows.length) return h('div', { class: 'empty' }, emptyText);
+    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 = [], emptyText = 'no changelog entries yet' }) {
+    if (!entries.length) return h('div', { class: 'empty' }, emptyText);
+    return Panel({
+        kind: 'wide',
+        children: entries.map((e, i) =>
+            h('div', { key: i, class: 'row ds-changelog-row' },
+                h('span', { class: 'code' }, e.date),
+                h('span', { class: 'ds-changelog-ver' }, e.ver),
+                h('span', { class: 'title' }, e.msg)
+            )
+        )
+    });
+}

package/src/components/content/row.js

@@ -0,0 +1,115 @@
+// Row primitives — the single parameterized list row (`Row`) plus its
+// link-flavoured wrapper (`RowLink`), and the search-term highlighter both
+// use. Row covers every list-row shape in the kit: static, clickable
+// (button semantics + keyboard activation), link, grid-columned, railed,
+// expandable-with-actions, and search-highlighted.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+// Split a title string around case-insensitive matches of `highlight`, wrapping
+// hits in <mark class="ds-hl">. Every segment is a keyed span so the children
+// array never mixes keyed VElements with bare strings (webjsx applyDiff crashes
+// on mixed keying).
+function highlightTitle(title, highlight) {
+    const text = String(title);
+    const needle = String(highlight).toLowerCase();
+    if (!needle) return text;
+    const lower = text.toLowerCase();
+    const segs = [];
+    let pos = 0, n = 0;
+    while (pos <= text.length) {
+        const hit = lower.indexOf(needle, pos);
+        if (hit === -1) break;
+        if (hit > pos) segs.push(h('span', { key: 'hs' + n++ }, text.slice(pos, hit)));
+        segs.push(h('mark', { key: 'hs' + n++, class: 'ds-hl' }, text.slice(hit, hit + needle.length)));
+        pos = hit + needle.length;
+    }
+    if (!segs.length) return text;
+    if (pos < text.length) segs.push(h('span', { key: 'hs' + n++ }, text.slice(pos)));
+    return segs;
+}
+
+export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail, expanded, highlight, actions, detail }) {
+    // `rank` is an alias for `code` (the leading monospace index); callers use
+    // either name. `rail` renders a thin colour bar at the row's leading edge as
+    // a status indicator (tone: green | purple | flame | <any token>).
+    const codeVal = code != null ? code : rank;
+    // Support legacy active/selected props for backward compatibility
+    const isActive = state === 'active' || (state === 'default' && (active || selected));
+    const isLink = kind === 'link' || (href != null && !onClick);
+    const isButton = !isLink && !!onClick;
+    const stateCls = state === 'disabled' ? ' row-state-disabled' : (state === 'error' ? ' row-state-error' : '');
+    // With no leading/code, the title would otherwise land in the narrow code
+    // column and wrap; `row-nocode` collapses that column so the title gets the
+    // full width (meta still pinned right).
+    const noLead = codeVal == null && leading == null;
+    const cls = 'row' + (isActive ? ' active' : '') + stateCls + (cols ? ' row-grid' : '') + (noLead && !cols ? ' row-nocode' : '') + (rail ? ' rail-' + rail : '');
+    const isDisabled = state === 'disabled';
+    const props = { key, class: cls, style: cols ? `${style ? style + ';' : ''}grid-template-columns:${cols}` : style };
+    if (isLink) {
+        props.href = href || '#';
+        if (target) props.target = target;
+    } else if (isButton && !isDisabled) {
+        // Clickable div needs button semantics + keyboard activation for a11y parity.
+        // A disabled row is inert: no click, no button role, no tab stop.
+        props.onclick = onClick;
+        props.role = 'button';
+        props.tabindex = '0';
+        props.onkeydown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(e); }
+        };
+        // When the row is a disclosure toggle (host passes a boolean `expanded`),
+        // announce its open/closed state so AT users hear "expanded/collapsed".
+        // Omitted entirely for plain action buttons (expanded === undefined).
+        if (expanded === true || expanded === false) props['aria-expanded'] = expanded ? 'true' : 'false';
+    }
+    if (isDisabled) props['aria-disabled'] = 'true';
+    if (isActive && (isLink || isButton)) props['aria-current'] = isActive ? 'page' : null;
+    // `highlight` wraps case-insensitive matches in the title in <mark class="ds-hl">.
+    // The segments live inside a single wrapper span so the title's child list
+    // never mixes keyed and unkeyed siblings.
+    const titleNode = (highlight && typeof title === 'string')
+        ? h('span', {}, ...[].concat(highlightTitle(title, highlight)))
+        : title;
+    // `actions` render ONLY when the row is expanded, as a sibling action strip
+    // inside the row container; each button stops propagation so it never fires
+    // the row onClick.
+    const actionRow = (expanded === true && Array.isArray(actions) && actions.length)
+        ? h('span', { class: 'row-actions', role: 'group', 'aria-label': 'row actions' },
+            ...actions.map((a, i) => h('button', {
+                key: 'ract' + i,
+                type: 'button',
+                class: 'row-act',
+                title: a.title || a.label,
+                'aria-label': a.title || a.label,
+                onclick: (e) => { e.stopPropagation(); a.onClick && a.onClick(e); },
+                onkeydown: (e) => { e.stopPropagation(); },
+            }, a.label)))
+        : null;
+    // Color is not the only status channel: emit a visually-hidden word for the
+    // meaningful rail tones (error/subagent) so AT and color-blind users get the
+    // state. green is the unremarkable default - announcing "ok" everywhere would
+    // be AT noise - so it emits nothing.
+    const railWord = rail === 'flame' ? 'error' : rail === 'purple' ? 'subagent' : null;
+    // `detail` renders as a sibling block AFTER the title/meta children (its own
+    // line via flex-basis:100% in .ds-row-detail), not inside the title span.
+    // The same `highlight` search term that marks matches in the collapsed
+    // title previously stopped applying the moment a row expanded - the
+    // expanded body (often the ONLY place a match beyond the 220-char title
+    // window is actually visible) rendered as plain unmarked text.
+    const detailNode = (highlight && typeof detail === 'string')
+        ? h('span', {}, ...[].concat(highlightTitle(detail, highlight)))
+        : detail;
+    return h(isLink ? 'a' : 'div', props,
+        railWord ? h('span', { class: 'sr-only' }, railWord) : null,
+        leading != null ? leading : (codeVal != null ? h('span', { class: 'code' }, codeVal) : null),
+        h('span', { class: 'title', title: typeof title === 'string' ? title : undefined }, titleNode, sub ? h('span', { class: 'sub', title: typeof sub === 'string' ? sub : undefined }, sub) : null),
+        trailing != null ? trailing : (meta != null ? h('span', { class: 'meta' }, meta) : null),
+        actionRow,
+        detail != null ? h('pre', { class: 'ds-row-detail' }, detailNode) : null);
+}
+
+export function RowLink({ code, title, sub, meta, href = '#', key, target }) {
+    return Row({ code, title, sub, meta, href, kind: 'link', key, target });
+}

package/src/components/content/table.js

@@ -0,0 +1,97 @@
+// Tables — the generic `Table` primitive plus the two domain tables built
+// directly on it: HealthTable (a health-check map with per-value tone
+// inference) and ProcessRegistryTable (a live long-lived-process census).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon, Chip } from '../shell.js';
+const h = webjsx.createElement;
+
+export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothing here yet', rowLabels, striped = false, compact = false, sortable = false, sortKey, sortDir = 'asc', onSort }) {
+    if (!rows || rows.length === 0) return h('div', { class: 'empty' }, emptyText);
+    // rowLabels lets callers supply a plain-text label per row when the first
+    // cell is a vnode (so the aria-label is meaningful, not the literal 'row').
+    const labelFor = (row, i) => {
+        if (Array.isArray(rowLabels) && rowLabels[i] != null) return String(rowLabels[i]);
+        const c = row[0];
+        return c == null ? 'row' : (typeof c === 'object' ? 'row' : String(c));
+    };
+    // Native <table>/<tr>/<th>/<td> already carry the correct implicit ARIA
+    // roles — explicit role="table"/row/columnheader/cell is redundant and only
+    // risks overriding native semantics, so it is omitted.
+    // Scroll containment lives on the component itself: a wide table used
+    // outside a Panel must never force page-level horizontal scroll.
+    // striped/compact are opt-in density modifiers (webgeist g-table parity) —
+    // default false so the existing contract/visual is byte-unchanged.
+    const wrapClass = 'ds-table-wrap' + (striped ? ' is-striped' : '') + (compact ? ' is-compact' : '');
+    // sortable is opt-in (default false, byte-unchanged for existing callers):
+    // a header becomes a real <button> announcing aria-sort, dispatching
+    // onSort(headerIndex) so the HOST owns the actual row-ordering logic (this
+    // component has no opinion on comparator/locale/type - it only renders the
+    // control and current state). A docstudio-style dense admin table needs
+    // sortable columns; Table previously had no way to express that at all.
+    const thFor = (hd, i) => {
+        if (!sortable || !onSort) return h('th', { key: i, scope: 'col' }, hd);
+        const isActive = sortKey === i;
+        const ariaSort = isActive ? (sortDir === 'desc' ? 'descending' : 'ascending') : 'none';
+        return h('th', { key: i, scope: 'col', 'aria-sort': ariaSort },
+            h('button', { type: 'button', class: 'ds-table-sort-btn' + (isActive ? ' is-active' : ''), onclick: () => onSort(i) },
+                h('span', { class: 'ds-table-sort-label' }, hd),
+                isActive ? Icon(sortDir === 'desc' ? 'chevron-down' : 'chevron-up', { size: 12 }) : null));
+    };
+    return h('div', { class: wrapClass }, h('table', {},
+        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => thFor(hd, i)))),
+        h('tbody', {}, ...rows.map((row, i) => h('tr', {
+            key: i,
+            class: onRowClick ? 'clickable' : '',
+            onclick: onRowClick ? () => onRowClick(i) : null,
+            // Space scrolls by default — preventDefault on Space (and Enter) so
+            // keyboard activation matches click without page jump.
+            ...(onRowClick ? { tabindex: '0', role: 'button', 'aria-label': 'open ' + labelFor(row, i), onkeydown: (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onRowClick(i); } } } : {})
+        }, ...row.map((c, j) => h('td', { key: j }, c == null ? '' : (typeof c === 'object' ? c : String(c)))))))));
+}
+
+// HealthTable — generic health-check table: given an arbitrary
+// `{checkName: value}` object, infers a Chip tone per row from the value's
+// own type (boolean true/false -> ok/miss Chip, object -> truncated JSON
+// string, else the raw value stringified) so a new backend health check
+// appears with zero per-check hardcoding at the call site. Ported from
+// freddie's health page (src/components/freddie.js's `health` page), which
+// hand-rolled this exact inference inline; promoted here as a reusable
+// primitive for any dashboard/monitoring surface with a health-check map
+// (agentgui's Live tab included). `okLabel`/`missLabel` let a caller
+// localize the two Chip strings; `jsonTruncate` caps the JSON.stringify
+// length for object-shaped values (matches freddie's own truncation width).
+export function HealthTable({ checks = {}, emptyText = 'no health data', okLabel = 'ok', missLabel = 'no', jsonTruncate = 60 } = {}) {
+    const entries = Object.entries(checks);
+    if (!entries.length) return h('div', { class: 'empty' }, emptyText);
+    const rows = entries.map(([name, v]) => {
+        let cell;
+        if (typeof v === 'object' && v !== null) {
+            const s = JSON.stringify(v);
+            cell = h('span', { title: s.length > jsonTruncate ? s : null }, s.length > jsonTruncate ? s.slice(0, jsonTruncate) + '…' : s);
+        } else if (v === true) cell = Chip({ tone: 'ok', children: okLabel });
+        else if (v === false) cell = Chip({ tone: 'miss', children: missLabel });
+        else cell = String(v);
+        return [name, cell];
+    });
+    return Table({ headers: ['check', 'status'], rows });
+}
+
+// ProcessRegistryTable — generic long-lived-process registry table: given a
+// list of `{kind, key, state}`-shaped rows (any in-flight process the host
+// tracks — an xstate machine, an ACP/direct-runner session, a background
+// job), renders a uniform table. Ported from freddie's `machines` page
+// (src/components/freddie.js), which used this exact shape for its xstate
+// machine census; generalized here since the shape (kind/key/state) applies
+// equally to agentgui's Live tab listing in-flight agent runner processes.
+// `extraColumns` lets a caller append columns beyond the base three (e.g. a
+// stop-action button) without forking the whole table.
+export function ProcessRegistryTable({ processes = [], emptyText = 'no live processes', extraColumns = [] } = {}) {
+    if (!processes.length) return h('div', { class: 'empty' }, emptyText);
+    const headers = ['kind', 'key', 'state', ...extraColumns.map(c => c.header)];
+    const rows = processes.map(p => [
+        p.kind || '—', p.key || '—', p.state || '—',
+        ...extraColumns.map(c => c.render(p))
+    ]);
+    return Table({ headers, rows });
+}

package/src/components/content/views.js

@@ -0,0 +1,81 @@
+// Composed page views — the two whole-page compositions assembled from the
+// primitives in this group: HomeView (hero + shipping/works/writing/manifesto
+// sections) and ProjectView (project prose + install + receipt + changelog).
+// Both return a flat array of blocks for a host to render directly.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Heading, Lede, Dot } from '../shell.js';
+import { Row } from './row.js';
+import { Panel, Section, Receipt, Changelog } from './panel.js';
+import { Hero, Manifesto } from './hero.js';
+import { Install } from './cli.js';
+import { WorksList, WritingList } from './lists.js';
+const h = webjsx.createElement;
+
+export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts = [], manifesto = [], currentlyShipping } = {}) {
+    return [
+        // The page's one deliberate kicker. 'an entrypoint' is the collective's
+        // name-as-tagline — it says something the <h1> does not, and it is the
+        // masthead position where a print eyebrow actually belongs. The sections
+        // below intentionally carry NO eyebrow: each has a heading that already
+        // names it, so a kicker there would only restate the <h3> one word
+        // shorter. Do not add eyebrows to the sibling sections to "match" this.
+        Hero({
+            eyebrow: 'an entrypoint',
+            title: 'Small, weird, useful tools — built in public.',
+            body: '247420 is a creative collective of eight, scattered across three timezones. We have been shipping open-source tools for the web since 2018.',
+            accent: 'Some become the future. Most don\'t. That\'s the deal.'
+        }),
+        // Titleless section: promoted its former eyebrow to the actual heading
+        // rather than leaving a kicker hovering over an unnamed panel. The label
+        // was carrying the section's only name, so it became the <h3>.
+        currentlyShipping ? Section({
+            title: 'currently shipping',
+            children: Panel({
+                kind: 'wide',
+                children: currentlyShipping.map((row, i) => {
+                    const dotNode = Dot({ tone: row.live ? 'live' : 'idle' });
+                    dotNode.props = { ...dotNode.props, 'aria-label': row.live ? 'live status' : 'idle status' };
+                    return Row({
+                        key: i,
+                        code: dotNode,
+                        title: row.title, sub: row.sub, meta: row.meta
+                    });
+                })
+            })
+        }) : null,
+        works.length ? Section({
+            title: 'Everything else.',
+            children: WorksList({ works, openedIndex: state.opened ?? -1, onToggle: onToggleWork })
+        }) : null,
+        posts.length ? Section({
+            title: 'When we have something to say.',
+            children: WritingList({ posts })
+        }) : null,
+        manifesto.length ? Section({
+            title: 'Eight people, three timezones, one ongoing conversation.',
+            children: Manifesto({ paragraphs: manifesto })
+        }) : null
+    ].filter(Boolean);
+}
+
+export function ProjectView({ project = {}, copied, onCopy } = {}) {
+    return [
+        h('div', { class: 'ds-prose' },
+            Heading({ level: 1, children: project.name }),
+            Lede({ children: project.tagline })
+        ),
+        project.install ? [
+            Heading({ level: 3, children: 'install' }),
+            Install({ cmd: project.install, copied, onCopy }),
+        ] : null,
+        project.receipt ? [
+            Heading({ level: 3, children: 'by the numbers' }),
+            Receipt({ rows: project.receipt }),
+        ] : null,
+        project.changelog ? [
+            Heading({ level: 3, children: 'recent releases' }),
+            Changelog({ entries: project.changelog })
+        ] : null
+    ].filter(Boolean).flat();
+}