anentrypoint-design 0.0.172 → 0.0.174

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.172",
+  "version": "0.0.174",
   "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/content.js

@@ -109,7 +109,12 @@ export function WorksList({ works = [], openedIndex = -1, onToggle }) {
                 Row({
                     code: w.code,
                     title: w.title, sub: w.sub,
-                    meta: w.meta + '  ' + (isOpen ? '-' : '+'),
+                    // Expand affordance: a chevron icon (down when open, right when
+                    // collapsed) separated from the meta text by a CSS gap, not a
+                    // literal +/- with a double-space.
+                    meta: h('span', { class: 'ds-works-meta', style: 'display:inline-flex;align-items:center;gap:.4em' },
+                        w.meta != null ? h('span', {}, w.meta) : null,
+                        Icon(isOpen ? 'chevron-down' : 'chevron-right')),
                     active: isOpen,
                     onClick: () => onToggle && onToggle(isOpen ? -1 : i)
                 }),
@@ -163,15 +168,19 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
         const c = row[0];
         return c == null ? 'row' : (typeof c === 'object' ? 'row' : String(c));
     };
-    return h('table', { role: 'table' },
-        h('thead', {}, h('tr', { role: 'row' }, ...headers.map((hd, i) => h('th', { key: i, scope: 'col', role: 'columnheader' }, hd)))),
+    // 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.
+    return h('table', {},
+        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => h('th', { key: i, scope: 'col' }, hd)))),
         h('tbody', {}, ...rows.map((row, i) => h('tr', {
             key: i,
             class: onRowClick ? 'clickable' : '',
-            role: 'row',
             onclick: onRowClick ? () => onRowClick(i) : null,
-            ...(onRowClick ? { tabindex: '0', 'aria-label': 'open ' + labelFor(row, i), onkeydown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onRowClick(i); } } } : {})
-        }, ...row.map((c, j) => h('td', { key: j, role: 'cell' }, c == null ? '' : (typeof c === 'object' ? c : String(c))))))));
+            // 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))))))));
 }
 
 export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts = [], manifesto = [], currentlyShipping } = {}) {
@@ -256,17 +265,21 @@ export function SearchInput({ value = '', placeholder = 'search…', onInput, on
     });
 }
 
-export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4, maxLength }) {
+export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4, maxLength, min, max, 'aria-label': ariaLabel }) {
     const input = multiline
         ? h('textarea', {
             key: 'i', name, rows, placeholder, value,
             maxlength: maxLength != null ? maxLength : null,
+            'aria-label': ariaLabel || null,
             oninput: onInput ? (e) => onInput(e.target.value, e) : null,
             onchange: onChange ? (e) => onChange(e.target.value, e) : null
         })
         : h('input', {
             key: 'i', type, name, placeholder, value,
             maxlength: maxLength != null ? maxLength : null,
+            min: min != null ? String(min) : null,
+            max: max != null ? String(max) : null,
+            'aria-label': ariaLabel || null,
             oninput: onInput ? (e) => onInput(e.target.value, e) : null,
             onchange: onChange ? (e) => onChange(e.target.value, e) : null
         });
@@ -320,9 +333,19 @@ export function EventList({ items, events, emptyText = 'no events', rankPad = 3
 export function Form({ fields = [], submit = 'submit', onSubmit, columns = 1 }) {
     const cols = columns > 1 ? String(columns) : null;
     return h('form', { class: 'row-form', 'data-columns': cols, onsubmit: (ev) => { ev.preventDefault(); onSubmit && onSubmit(ev); } },
-        ...fields.map((f, i) => f.kind === 'textarea'
-            ? h('textarea', { key: i, name: f.name, placeholder: f.placeholder || '', rows: f.rows || 4 })
-            : h('input', { key: i, name: f.name, type: f.type || 'text', placeholder: f.placeholder || '', value: f.value || '', required: f.required ? 'true' : null })),
+        ...fields.map((f, i) => {
+            // Each control gets a stable id and an associated <label> so the
+            // placeholder is no longer the only (inaccessible) name. The label
+            // text falls back to label -> placeholder -> name.
+            const fieldId = 'ds-form-' + (f.name || 'field') + '-' + i;
+            const labelText = f.label != null ? f.label : (f.placeholder || f.name || '');
+            const control = f.kind === 'textarea'
+                ? h('textarea', { key: 'i', id: fieldId, name: f.name, placeholder: f.placeholder || '', rows: f.rows || 4, required: f.required ? true : null })
+                : h('input', { key: 'i', id: fieldId, name: f.name, type: f.type || 'text', placeholder: f.placeholder || '', value: f.value || '', required: f.required ? true : null });
+            return h('label', { key: i, class: 'ds-field', for: fieldId },
+                labelText !== '' ? h('span', { key: 'l', class: 'ds-field-label' }, labelText) : null,
+                control);
+        }),
         h('button', { type: 'submit', class: 'btn-primary' }, submit));
 }
 
@@ -339,13 +362,31 @@ export function Spinner({ size = 'base', tone = 'accent', label = 'loading', key
     );
 }
 
+// Clamp a caller-supplied CSS length to a sane range so a raw prop like
+// height="9999px" can't blow out the layout. Accepts a CSS length string
+// (px/em/rem/%/vh/vw) or a bare number (treated as px); rejects anything else
+// back to the default. Numeric values are clamped to [2, 600] (px-equivalent).
+function clampLen(v, fallback) {
+    if (v == null) return fallback;
+    const s = String(v).trim();
+    const m = /^(\d+(?:\.\d+)?)(px|em|rem|%|vh|vw)?$/.exec(s);
+    if (!m) return fallback;
+    const unit = m[2] || 'px';
+    let n = parseFloat(m[1]);
+    if (unit === '%' || unit === 'vh' || unit === 'vw') n = Math.min(100, Math.max(0, n));
+    else n = Math.min(600, Math.max(2, n));
+    return n + unit;
+}
+
 export function Skeleton({ height = '1em', width = '100%', count = 1, label = 'loading content', key } = {}) {
+    const h_ = clampLen(height, '1em');
+    const w_ = clampLen(width, '100%');
     return h('div', {
         key, class: 'ds-skeleton-group',
         role: 'status', 'aria-busy': 'true', 'aria-label': label
     },
         ...Array(count).fill(0).map((_, i) =>
-            h('div', { key: String(i), class: 'ds-skeleton', style: `height:${height};width:${width};`, 'aria-hidden': 'true' })
+            h('div', { key: String(i), class: 'ds-skeleton', style: `height:${h_};width:${w_};`, 'aria-hidden': 'true' })
         )
     );
 }

package/src/components/files-modals.js

@@ -6,14 +6,18 @@ import { fileGlyph, fmtFileSize } from './files.js';
 const h = webjsx.createElement;
 
 function Backdrop({ onClose, children, kind = '' } = {}) {
+    // webjsx invokes a ref callback with the element on mount and with null on
+    // unmount. We stash the per-element keydown teardown on the node itself so
+    // the null branch can run it — otherwise the document/element listener leaks
+    // once the modal is removed.
     const backdropRef = (el) => {
-        if (!el) return;
+        if (!el) return;            // unmount (ref(null)) handled by wrapper below
         const modal = el.querySelector('.ds-modal');
         if (!modal) return;
 
         // Focus trap: handle Tab key to cycle focus within modal
         const focusables = modal.querySelectorAll(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
         );
         const firstFocusable = focusables[0];
         const lastFocusable = focusables[focusables.length - 1];
@@ -46,75 +50,86 @@ function Backdrop({ onClose, children, kind = '' } = {}) {
         };
 
         el.addEventListener('keydown', handleKeydown);
-        // Auto-focus first focusable element on mount
-        if (firstFocusable && document.activeElement === document.body) {
-            firstFocusable.focus();
-        }
-
-        return () => el.removeEventListener('keydown', handleKeydown);
+        el._dsModalTeardown = () => el.removeEventListener('keydown', handleKeydown);
+        // Auto-focus on open — always, not only when focus sits on <body>.
+        // Prefer an element explicitly marked [autofocus].
+        const preferred = modal.querySelector('[autofocus]') || firstFocusable;
+        if (preferred) preferred.focus();
     };
 
     return h('div', {
         class: 'ds-modal-backdrop',
-        ref: backdropRef,
+        ref: (el) => {
+            if (el) backdropRef(el);
+            else if (Backdrop._last && Backdrop._last._dsModalTeardown) { Backdrop._last._dsModalTeardown(); Backdrop._last = null; }
+            if (el) Backdrop._last = el;
+        },
         onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); }
     },
         h('div', { class: 'ds-modal' + (kind ? ' ds-modal-' + kind : '') }, ...(Array.isArray(children) ? children : [children]))
     );
 }
 
-export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel } = {}) {
+// Shared modal shell: head + body + actions row. ConfirmDialog/PromptDialog/
+// FileViewer all funnel through this so the ds-modal markup is authored once.
+// `actions` is an array of vnodes (already using the Btn primitive). Any of the
+// slots may be omitted.
+function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body, bodyClass = 'ds-modal-body', bodyAttrs = {}, actions } = {}) {
     return Backdrop({
+        onClose,
+        kind,
+        children: [
+            head != null ? h('div', { class: ('ds-modal-head' + (headClass ? ' ' + headClass : '')), ...headAttrs }, ...(Array.isArray(head) ? head : [head])) : null,
+            body != null ? h('div', { class: bodyClass, ...bodyAttrs }, ...(Array.isArray(body) ? body : [body])) : null,
+            actions != null ? h('div', { class: 'ds-modal-actions' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
+        ].filter(Boolean)
+    });
+}
+
+export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel } = {}) {
+    return Modal({
         onClose: onCancel,
         kind: 'small',
-        children: [
-            h('div', { class: 'ds-modal-head' }, title),
-            h('div', { class: 'ds-modal-body' }, message || ''),
-            h('div', { class: 'ds-modal-actions' },
-                Btn({ onClick: onCancel, children: cancelLabel }),
-                h('button', {
-                    class: destructive ? 'btn-primary danger' : 'btn-primary',
-                    onclick: onConfirm
-                }, confirmLabel)
-            )
+        head: title,
+        body: message || '',
+        actions: [
+            Btn({ onClick: onCancel, children: cancelLabel }),
+            Btn({ primary: true, danger: !!destructive, onClick: onConfirm, children: confirmLabel })
         ]
     });
 }
 
 export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput } = {}) {
-    return Backdrop({
+    return Modal({
         onClose: onCancel,
         kind: 'small',
-        children: [
-            h('div', { class: 'ds-modal-head' }, title),
-            h('div', { class: 'ds-modal-body' },
-                h('input', {
-                    class: 'input ds-modal-input',
-                    type: 'text',
-                    value,
-                    placeholder,
-                    autofocus: true,
-                    oninput: (e) => onInput && onInput(e.target.value),
-                    onkeydown: (e) => {
-                        if (e.key === 'Enter') { e.preventDefault(); onConfirm && onConfirm(e.target.value); }
-                        if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); }
-                    }
-                })
-            ),
-            h('div', { class: 'ds-modal-actions' },
-                Btn({ onClick: onCancel, children: cancelLabel }),
-                h('button', {
-                    class: 'btn-primary',
-                    // Read the live input value, not the closed-over `value` prop:
-                    // consumers update their state in oninput without re-rendering
-                    // (to avoid caret jump), so the prop is stale at click time.
-                    onclick: (e) => {
-                        if (!onConfirm) return;
-                        const inp = e.currentTarget.closest('.ds-modal')?.querySelector('.ds-modal-input');
-                        onConfirm(inp ? inp.value : value);
-                    }
-                }, confirmLabel)
-            )
+        head: title,
+        body: h('input', {
+            class: 'input ds-modal-input',
+            type: 'text',
+            value,
+            placeholder,
+            autofocus: true,
+            oninput: (e) => onInput && onInput(e.target.value),
+            onkeydown: (e) => {
+                if (e.key === 'Enter') { e.preventDefault(); onConfirm && onConfirm(e.target.value); }
+                if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); }
+            }
+        }),
+        actions: [
+            Btn({ onClick: onCancel, children: cancelLabel }),
+            Btn({
+                primary: true,
+                // Read the live input value, not the closed-over `value` prop:
+                // consumers update their state in oninput without re-rendering
+                // (to avoid caret jump), so the prop is stale at click time.
+                onClick: (e) => {
+                    if (!onConfirm) return;
+                    const inp = e.currentTarget.closest('.ds-modal')?.querySelector('.ds-modal-input');
+                    onConfirm(inp ? inp.value : value);
+                },
+                children: confirmLabel
+            })
         ]
     });
 }
@@ -124,7 +139,7 @@ export function FilePreviewMedia({ src, type = 'other', name } = {}) {
     if (type === 'video') return h('video', { class: 'ds-preview-media', src, controls: true });
     if (type === 'audio') return h('audio', { class: 'ds-preview-audio', src, controls: true });
     return h('div', { class: 'ds-preview-fallback' },
-        h('span', { class: 'ds-preview-glyph' }, fileGlyph(type)),
+        h('span', { class: 'ds-preview-glyph', 'aria-hidden': 'true' }, Icon(fileGlyph(type))),
         h('span', {}, 'no inline preview for ' + (type || 'this file'))
     );
 }
@@ -146,21 +161,21 @@ export function FileViewer({ file, body, onClose, onAction } = {}) {
     if (!file) return null;
     const meta = [file.type, file.size != null ? fmtFileSize(file.size) : null, file.modified || null]
         .filter(Boolean).join(' · ');
-    return Backdrop({
+    return Modal({
         onClose,
         kind: 'preview',
-        children: [
-            h('div', { class: 'ds-modal-head ds-preview-head', 'data-file-type': file.type || 'other' },
-                h('span', { class: 'ds-preview-name' }, file.name || ''),
-                h('span', { class: 'ds-preview-meta' }, meta),
-                h('span', { class: 'ds-preview-actions' },
-                    onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
-                    h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x'))
-                )
-            ),
-            h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },
-                ...(Array.isArray(body) ? body : [body])
+        headClass: 'ds-preview-head',
+        headAttrs: { 'data-file-type': file.type || 'other' },
+        head: [
+            h('span', { class: 'ds-preview-name' }, file.name || ''),
+            h('span', { class: 'ds-preview-meta' }, meta),
+            h('span', { class: 'ds-preview-actions' },
+                onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
+                h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x'))
             )
-        ]
+        ],
+        bodyClass: 'ds-preview-body',
+        bodyAttrs: { 'data-file-type': file.type || 'other' },
+        body: Array.isArray(body) ? body : [body],
     });
 }

package/src/components/files.js

@@ -4,6 +4,10 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Icon } from './shell.js';
 const h = webjsx.createElement;
 
+// Minimum column width for the responsive file grid (minmax floor). Named so
+// the magic 240px isn't buried in the gridTemplateColumns string.
+const FILE_GRID_MIN_COL = '240px';
+
 const FILE_TYPES = ['dir', 'image', 'video', 'audio', 'code', 'text', 'archive', 'document', 'symlink', 'other'];
 const TYPE_ICON = {
     dir: 'file', image: 'file', video: 'file-video', audio: 'file-audio', code: 'file-code',
@@ -43,27 +47,29 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
     const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null].filter(Boolean).join(' · ');
     const typeLabel = TYPE_LABELS[type] || 'file';
     const accessibleLabel = `${typeLabel}: ${name}${meta ? ` (${meta})` : ''}`;
+    // A role=button row containing real <button> action controls is invalid
+    // HTML (interactive nesting). Instead the row is a plain container and the
+    // primary "open" affordance is itself a real <button> (native keyboard +
+    // semantics); the per-file action buttons sit alongside it as siblings.
     return h('div', {
         key,
         class: 'ds-file-row row' + (active ? ' active' : ''),
         'data-file-type': type,
-        onclick: onOpen,
-        role: 'button',
-        tabindex: '0',
-        'aria-label': accessibleLabel,
-        'aria-pressed': active ? 'true' : 'false',
-        onkeydown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onOpen && onOpen();
-            }
-        }
     },
-        code != null ? h('span', { class: 'code', 'aria-label': `code: ${code}` }, code) : null,
-        FileIcon({ type }),
-        h('span', { class: 'title' }, name),
-        h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—'),
-        onAction ? h('span', { class: 'ds-file-actions', onclick: (e) => e.stopPropagation(), role: 'group', 'aria-label': `actions for ${name}` },
+        h('button', {
+            type: 'button',
+            class: 'ds-file-open',
+            onclick: onOpen || null,
+            'aria-label': accessibleLabel,
+            'aria-pressed': active ? 'true' : 'false',
+            disabled: onOpen ? null : true,
+        },
+            code != null ? h('span', { class: 'code', 'aria-label': `code: ${code}` }, code) : null,
+            FileIcon({ type }),
+            h('span', { class: 'title' }, name),
+            h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—')
+        ),
+        onAction ? h('span', { class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
             h('button', { class: 'ds-file-act', title: 'download', 'aria-label': `download ${name}`, onclick: () => onAction('download') }, Icon('arrow-down')),
             h('button', { class: 'ds-file-act', title: 'rename', 'aria-label': `rename ${name}`, onclick: () => onAction('rename') }, Icon('pencil')),
             h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', 'aria-label': `delete ${name}`, onclick: () => onAction('delete') }, Icon('x'))
@@ -79,7 +85,7 @@ export function FileGrid({ files = [], onOpen, onAction, emptyText = 'no files h
         gridAttrs['data-columns'] = String(col);
         gridAttrs.style = {
             display: 'grid',
-            gridTemplateColumns: `repeat(${col}, minmax(240px, 1fr))`,
+            gridTemplateColumns: `repeat(${col}, minmax(${FILE_GRID_MIN_COL}, 1fr))`,
             gap: 'var(--space-3)'
         };
     }
@@ -108,7 +114,7 @@ export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave,
         ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
     },
         h('div', { class: 'ds-dropzone-inner' },
-            h('span', { class: 'ds-dropzone-glyph' }, '⇪'),
+            h('span', { class: 'ds-dropzone-glyph', role: 'img', 'aria-label': 'upload' }, Icon('arrow-up')),
             h('span', { class: 'ds-dropzone-label' }, label),
             onPick ? Btn({ onClick: onPick, children: 'pick files' }) : null
         ),
@@ -142,8 +148,8 @@ export function UploadProgress({ items = [] } = {}) {
 }
 
 export function EmptyState({ text = 'nothing here', glyph = Icon('circle') } = {}) {
-    return h('div', { class: 'ds-file-empty' },
-        h('span', { class: 'ds-file-empty-glyph' }, glyph),
+    return h('div', { class: 'ds-file-empty', role: 'status' },
+        h('span', { class: 'ds-file-empty-glyph', 'aria-hidden': 'true' }, glyph),
         h('span', { class: 'ds-file-empty-text' }, text)
     );
 }

package/src/components/form-primitives.js

@@ -116,13 +116,16 @@ export function Field({ label, hint, error, required, requiredMarker = '*', html
     const errorId = error != null ? autoId + '-err' : null;
     const describedBy = [hintId, errorId].filter(Boolean).join(' ') || null;
     const list = Array.isArray(children) ? children : [children];
+    // Apply the generated id to the FIRST control that lacks one so the label's
+    // `for=autoId` and the hint/error aria-describedby actually reference it.
+    // Controls that already carry an id keep theirs (and still get describedby).
+    let idApplied = false;
     const decorated = list.map((c) => {
         if (!c || typeof c !== 'object') return c;
         const props = c.props || {};
         const extra = { 'aria-describedby': describedBy };
         if (error != null) extra['aria-invalid'] = 'true';
-        if (!props.id && !htmlFor) { /* leave id unset */ }
-        else if (!props.id) extra.id = autoId;
+        if (!props.id && !idApplied) { extra.id = autoId; idApplied = true; }
         return cloneWithProps(c, extra);
     });
     return h('div', { key, class: 'ds-field-wrap' },

package/src/components/freddie/runtime.js

@@ -99,7 +99,7 @@ export function errorState(err, onRetry) {
         h('div', { class: 'ds-alert-content' },
             h('div', { class: 'ds-alert-title' }, 'failed to load'),
             h('div', { class: 'ds-alert-message' }, msg),
-            onRetry ? h('button', { class: 'btn ds-alert-retry', onclick: onRetry }, 'retry') : null));
+            onRetry ? h('button', { type: 'button', class: 'btn ds-alert-retry', onclick: onRetry }, 'retry') : null));
 }
 
 export function emptyState(text = 'nothing here yet', glyph = Icon('circle')) {