anentrypoint-design 0.0.247 → 0.0.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.247",
+  "version": "0.0.248",
   "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",

package/src/components/data-density.js

@@ -7,6 +7,7 @@
 // keeps scripts/lint-classes.mjs passing without a PREFIXES change).
 
 import * as webjsx from '../../vendor/webjsx/index.js';
+import { Pill } from './shell.js';
 const h = webjsx.createElement;
 
 // ---------------------------------------------------------------------------
@@ -38,9 +39,9 @@ export function PhaseWalk({ phases = DEFAULT_PHASES, reached = [], gapKinds = []
 export function TreeNode({ ts, kind, variant = '', phase, id, keyLabel, reason, deviationLabel, residuals } = {}) {
     const cls = 'ds-tree-node' + (variant ? ' is-' + variant : '');
     const pills = [
-        phase ? h('span', { key: 'phase', class: 'ds-pill' }, phase) : null,
-        id ? h('span', { key: 'id', class: 'ds-pill' }, id) : null,
-        keyLabel ? h('span', { key: 'key', class: 'ds-pill' }, keyLabel) : null,
+        phase ? Pill({ key: 'phase', children: phase }) : null,
+        id ? Pill({ key: 'id', children: id }) : null,
+        keyLabel ? Pill({ key: 'key', children: keyLabel }) : null,
     ].filter(Boolean);
     return h('div', { class: cls },
         ts != null ? h('span', { class: 'ds-tree-node-ts' }, ts) : null,
@@ -128,8 +129,8 @@ export function SessionRow({ sessId, phaseWalkProps, events, verbs, prd, muts, r
 // ---------------------------------------------------------------------------
 export function DevRow({ ts, event, sess, operation, residuals } = {}) {
     const pills = [
-        sess ? h('span', { key: 'sess', class: 'ds-pill' }, sess) : null,
-        operation ? h('span', { key: 'op', class: 'ds-pill' }, operation) : null,
+        sess ? Pill({ key: 'sess', children: sess }) : null,
+        operation ? Pill({ key: 'op', children: operation }) : null,
     ].filter(Boolean);
     return h('div', { class: 'ds-dev-row' },
         ts != null ? h('span', { class: 'ds-tree-node-ts' }, ts) : null,

package/src/components/editor-primitives.js

@@ -19,6 +19,19 @@ export function Toolbar({ leading = [], trailing = [], dense = false, children }
     );
 }
 
+// ---------------------------------------------------------------------------
+// ToolbarRow — a flat, wrapping row of arbitrary action nodes (buttons,
+// inputs, chips) with no leading/center/trailing slot structure. Toolbar's
+// three-slot split is the wrong shape when a caller just wants "this row of
+// controls, left to right, wrapping on narrow viewports" — the exact shape
+// gmsniff's panels.js hand-rolled as a bare '.gm-toolbar' div because Toolbar
+// didn't cover it. Accepts children as varargs or a single array.
+// ---------------------------------------------------------------------------
+export function ToolbarRow(...actions) {
+    const flat = actions.length === 1 && Array.isArray(actions[0]) ? actions[0] : actions;
+    return h('div', { class: 'ds-ep-toolbar-row', role: 'toolbar' }, ...kids(flat));
+}
+
 export function Tabs({ items = [], active, onChange, children, 'aria-label': ariaLabel } = {}) {
     // Roving tabindex + arrow nav per WAI-ARIA tabs pattern.
     // Only the active tab is in the tab order; arrows move focus + activate.
@@ -144,6 +157,42 @@ export function PropertyField({ label, hint, inline = false, children } = {}) {
     );
 }
 
+// ---------------------------------------------------------------------------
+// PropertyGridRow — a PropertyGrid row wrapper with a bottom-border divider
+// (last-child border suppressed), for editors that need a stronger per-row
+// visual separation than the default PropertyGrid gap gives (e.g. a list of
+// independently-editable records like PRD/mutable rows). Generalizes
+// gmsniff's gm-propgrid-row.
+// ---------------------------------------------------------------------------
+export function PropertyGridRow({ children, key } = {}) {
+    return h('div', { key, class: 'ds-ep-propgrid-row' }, ...kids(children));
+}
+
+// ---------------------------------------------------------------------------
+// InlineEditableField — a borderless-until-focus text input that inherits
+// surrounding font (no boxed input chrome), with an explicit error state
+// (aria-invalid + danger-token border) for live per-field validation.
+// Generalizes gmsniff's gm-inline-input / gm-field-error pair. Renders a
+// <textarea> when multiline is set (for longer free-text edits), else a
+// single-line <input>.
+// ---------------------------------------------------------------------------
+export function InlineEditableField({ value = '', placeholder, onInput, onChange, error, multiline = false, rows = 3, ariaLabel, disabled = false } = {}) {
+    const cls = 'ds-ep-inline-input' + (error ? ' has-error' : '');
+    const common = {
+        class: cls,
+        value,
+        placeholder,
+        disabled: disabled ? 'disabled' : null,
+        'aria-label': ariaLabel,
+        'aria-invalid': error ? 'true' : null,
+        oninput: onInput ? (e) => onInput(e.target.value, e) : null,
+        onchange: onChange ? (e) => onChange(e.target.value, e) : null,
+    };
+    return multiline
+        ? h('textarea', { ...common, rows })
+        : h('input', { ...common, type: 'text' });
+}
+
 export function Dock({ top, left, right, bottom, center } = {}) {
     return h('div', { class: 'ds-ep-dock' },
         top    != null ? h('div', { class: 'ds-ep-dock-top' },    ...kids(top))    : null,
@@ -538,6 +587,48 @@ export function toast({ message, kind = 'info', duration = 3000 } = {}) {
     return dismiss;
 }
 
+// ---------------------------------------------------------------------------
+// Pager — prev/next paginator with a page label. Generalizes gmsniff's
+// gm-pager. page is 1-indexed; pageCount<=1 disables both buttons (no
+// divide-by-zero, no dead-end enabled control). total (optional) renders an
+// item-count suffix ("42 items") alongside the page label.
+// ---------------------------------------------------------------------------
+export function Pager({ page = 1, pageCount = 1, onPage, total, itemLabel = 'items' } = {}) {
+    const safeCount = Math.max(1, pageCount || 1);
+    const safePage = Math.min(Math.max(1, page || 1), safeCount);
+    const atStart = safePage <= 1;
+    const atEnd = safePage >= safeCount;
+    return h('div', { class: 'ds-ep-pager', role: 'group', 'aria-label': 'pagination' },
+        h('button', {
+            type: 'button', class: 'ds-ep-pager-btn', disabled: atStart ? 'disabled' : null,
+            'aria-label': 'previous page',
+            onclick: () => { if (!atStart && onPage) onPage(safePage - 1); },
+        }, '<-'),
+        h('span', { class: 'ds-ep-pager-label' },
+            'page ' + safePage + ' / ' + safeCount + (total != null ? ' (' + total + ' ' + itemLabel + ')' : '')),
+        h('button', {
+            type: 'button', class: 'ds-ep-pager-btn', disabled: atEnd ? 'disabled' : null,
+            'aria-label': 'next page',
+            onclick: () => { if (!atEnd && onPage) onPage(safePage + 1); },
+        }, '->')
+    );
+}
+
+// ---------------------------------------------------------------------------
+// JsonViewer — pre-formatted monospace data preview (max-height + scroll),
+// generalizing gmsniff's gm-json. Accepts a pre-stringified string OR any
+// value (objects/arrays get JSON.stringify(v, null, 2); null/undefined render
+// the empty-state text rather than the literal string "undefined"/"null").
+// ---------------------------------------------------------------------------
+export function JsonViewer({ value, emptyText = 'no data', maxHeight } = {}) {
+    let text;
+    if (value == null) text = null;
+    else if (typeof value === 'string') text = value;
+    else { try { text = JSON.stringify(value, null, 2); } catch { text = String(value); } }
+    if (!text) return h('div', { class: 'ds-ep-json ds-ep-json-empty' }, emptyText);
+    return h('pre', { class: 'ds-ep-json', style: maxHeight ? ('max-height:' + maxHeight) : null }, text);
+}
+
 export function IconButtonGroup({ items = [], value, onChange, dense = false } = {}) {
     return h('div', { class: 'ds-ep-btngrp' + (dense ? ' dense' : ''), role: 'group' },
         ...items.map((it) => h('button', {

package/src/components/shell.js

@@ -71,6 +71,16 @@ export function Badge({ children, variant = 'default', tone = 'neutral' }) {
     return h('span', { class: 'ds-badge ds-badge-' + variant + ' tone-' + tone }, children);
 }
 
+// Pill — plain non-interactive label chip for tag-like annotations (a phase
+// name, an id, a subsystem tag). Distinct from Chip (status-tone indicator),
+// Badge (count/variant marker), and FilterPills (interactive toggle-group):
+// Pill renders no button, carries no pressed/active state, just a small
+// rounded label. tone is a semantic keyword ('' | 'accent' | 'muted'),
+// never a raw color — every visual rides colors_and_type.css tokens.
+export function Pill({ tone = '', children, key } = {}) {
+    return h('span', { key, class: 'ds-pill' + (tone ? ' tone-' + tone : '') }, children);
+}
+
 export function Glyph({ children, color, size = 'base', label } = {}) {
     // Font-size is var-driven per size class (--glyph-size-{size}) so themes can
     // retune glyph scale; inline fallback keeps sizing if the SDK CSS hasn't

package/src/components.js

@@ -4,7 +4,7 @@ import * as webjsx from '../vendor/webjsx/index.js';
 export const h = webjsx.createElement;
 
 export {
-    Brand, Chip, Btn, Glyph, Icon, IconButton, Badge,
+    Brand, Chip, Btn, Glyph, Icon, IconButton, Badge, Pill,
     Topbar, Crumb, Side, Status, AppShell,
     WorkspaceShell, WorkspaceRail,
     Heading, Lede, Dot, Rail
@@ -71,14 +71,15 @@ export {
 } from './components/interaction-primitives.js';
 
 export {
-    Toolbar, Tabs,
+    Toolbar, ToolbarRow, Tabs,
     TreeView, TreeItem,
-    PropertyGrid, PropertyField,
+    PropertyGrid, PropertyField, PropertyGridRow, InlineEditableField,
     Dock, IconButtonGroup,
     ResizeHandle, SplitPanel,
     ContextMenu, useContextMenu,
     Drawer, Dialog, FocusTrap,
     Toast, toast,
+    Pager, JsonViewer,
     useMediaQuery,
     BP_SM, BP_MD, BP_LG, BP_XL
 } from './components/editor-primitives.js';