anentrypoint-design 0.0.146 → 0.0.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.146",
+  "version": "0.0.147",
   "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/chat.js

@@ -217,7 +217,7 @@ export function Chat({ title = 'chat', sub, messages = [], composer, header } =
     return h('div', { class: 'chat' },
         header || h('div', { class: 'chat-head', role: 'banner' },
             h('span', { class: 'dot', 'aria-hidden': 'true' }),
-            h('h2', { style: 'margin:0;font-size:inherit' }, title),
+            h('h2', { class: 'ds-chat-title' }, title),
             sub ? h('span', { class: 'sub', 'aria-label': `subtitle: ${sub}` }, ' · ' + sub) : null,
             h('span', { class: 'spread' }),
             h('span', { class: 'sub', 'aria-live': 'polite' }, String(messages.length).padStart(2, '0') + ' msgs')
@@ -280,7 +280,7 @@ export function AICat({ name = 'aicat', messages = [], thinking, composer, statu
     return h('div', { class: 'chat' },
         h('div', { class: 'chat-head', role: 'banner' },
             h('span', { class: 'dot', 'aria-hidden': 'true' }),
-            h('h2', { style: 'margin:0;font-size:inherit' }, name),
+            h('h2', { class: 'ds-chat-title' }, name),
             h('span', { class: 'sub', 'aria-label': `status: ${status}` }, ' · ' + status),
             h('span', { class: 'spread' }),
             h('span', { class: 'sub', 'aria-live': 'polite' }, String(messages.length).padStart(2, '0') + ' turns')

package/src/components/community.js

@@ -81,7 +81,7 @@ export function ChannelItem({ id, name, type = 'text', active, voiceActive, voic
         ),
         voiceActive && participants.length ? h('div', { class: 'cm-ch-voice-users' },
             ...participants.map(p => h('div', { class: 'cm-ch-voice-user' + (p.speaking ? ' speaking' : '') },
-                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? `background:${p.color}` : '' }, (p.identity || '?').slice(0, 1).toUpperCase()),
+                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? `--avatar-bg:${p.color}` : null }, (p.identity || '?').slice(0, 1).toUpperCase()),
                 h('span', { class: 'cm-ch-voice-user-name' }, p.identity)
             ))
         ) : null
@@ -115,7 +115,7 @@ export function ChannelCategory({ id, name, channels = [], collapsed, activeId,
 export function VoiceUser({ identity, speaking, color } = {}) {
     const initial = (identity || '?').slice(0, 1).toUpperCase();
     return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
-        h('div', { class: 'cm-voice-user-avatar', style: color ? `background:${color}` : '' }, initial),
+        h('div', { class: 'cm-voice-user-avatar', style: color ? `--avatar-bg:${color}` : null }, initial),
         h('span', { class: 'cm-voice-user-name' }, identity)
     );
 }
@@ -134,7 +134,7 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
         }
     };
     return h('div', { class: 'cm-user-panel' },
-        h('div', { class: 'cm-user-avatar', style: color ? `background:${color}` : '' },
+        h('div', { class: 'cm-user-avatar', style: color ? `--avatar-bg:${color}` : null },
             h('span', { class: 'cm-user-status-dot' }),
             initial
         ),
@@ -186,7 +186,7 @@ export function ChannelSidebar({ serverName, channels = [], categories = [], act
 export function MemberItem({ identity, name, color, status = 'online' } = {}) {
     const initial = (name || identity || '?').slice(0, 1).toUpperCase();
     return h('div', { class: 'cm-member-item' },
-        h('div', { class: 'cm-member-avatar', style: color ? `background:${color}` : '' },
+        h('div', { class: 'cm-member-avatar', style: color ? `--avatar-bg:${color}` : null },
             h('span', { class: 'cm-member-status' + (status === 'online' ? ' online' : '') }),
             initial
         ),

package/src/components/content.js

@@ -17,12 +17,16 @@ export function Panel({ title, count, right, style = '', children, kind }) {
     );
 }
 
+// Card — semantic alias of Panel; behaves identically.
+export const Card = Panel;
+
 export function Row({ code, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected }) {
     // 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 cls = 'row' + (isActive ? ' active' : '') + (cols ? ' row-grid' : '');
+    const stateCls = state === 'disabled' ? ' row-state-disabled' : (state === 'error' ? ' row-state-error' : '');
+    const cls = 'row' + (isActive ? ' active' : '') + stateCls + (cols ? ' row-grid' : '');
     const props = { key, class: cls, style: cols ? `${style ? style + ';' : ''}grid-template-columns:${cols}` : style };
     if (isLink) {
         props.href = href || '#';
@@ -36,7 +40,7 @@ export function Row({ code, title, sub, meta, active, state = 'default', onClick
             if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(e); }
         };
     }
-    if (isActive && (isLink || isButton)) props['aria-current'] = 'true';
+    if (isActive && (isLink || isButton)) props['aria-current'] = isActive ? 'page' : null;
     return h(isLink ? 'a' : 'div', props,
         leading != null ? leading : (code != null ? h('span', { class: 'code' }, code) : null),
         h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
@@ -63,7 +67,7 @@ export function Hero({ eyebrow, title, body, accent, badge, badgeCount, actions
             body,
             accent ? h('span', { class: 'ds-hero-accent' }, ' ' + accent) : null
         ) : null,
-        actions ? h('div', { class: 'ds-hero-actions', style: 'display:flex;gap:10px;flex-wrap:wrap;margin-top:8px' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
+        actions ? h('div', { class: 'ds-hero-actions' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
         badge ? Panel({ title: badge, count: badgeCount, kind: 'inline', children: [] }) : null
     );
 }
@@ -244,28 +248,31 @@ export function SearchInput({ value = '', placeholder = 'search…', onInput, on
     });
 }
 
-export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4 }) {
+export function TextField({ label, value = '', type = 'text', placeholder = '', onInput, onChange, name, key, hint, multiline, rows = 4, maxLength }) {
     const input = multiline
         ? h('textarea', {
             key: 'i', name, rows, placeholder, value,
+            maxlength: maxLength != null ? maxLength : 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,
             oninput: onInput ? (e) => onInput(e.target.value, e) : null,
             onchange: onChange ? (e) => onChange(e.target.value, e) : null
         });
     return h('label', { key, class: 'ds-field' },
         label != null ? h('span', { key: 'l', class: 'ds-field-label' }, label) : null,
         input,
+        maxLength != null ? h('span', { key: 'c', class: 'ds-field-count' }, String(value.length) + '/' + maxLength) : null,
         hint != null ? h('span', { key: 'h', class: 'lede ds-field-hint' }, hint) : null
     );
 }
 
 export function Select({ label, value = '', options = [], onChange, name, key, placeholder, hint }) {
     const opts = [];
-    if (placeholder != null) opts.push(h('option', { key: '_ph', value: '' }, placeholder));
+    if (placeholder != null) opts.push(h('option', { key: '_ph', value: '', disabled: true, selected: value === '' || value == null }, placeholder));
     for (const o of options) {
         const id = typeof o === 'string' ? o : (o.value != null ? o.value : o.id);
         const lab = typeof o === 'string' ? o : (o.label != null ? o.label : (o.id || o.value));
@@ -299,8 +306,9 @@ export function EventList({ items, events, emptyText = 'no events', rankPad = 3
     );
 }
 
-export function Form({ fields = [], submit = 'submit', onSubmit }) {
-    return h('form', { class: 'row-form', onsubmit: (ev) => { ev.preventDefault(); onSubmit && onSubmit(ev); } },
+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 })),
@@ -308,7 +316,8 @@ export function Form({ fields = [], submit = 'submit', onSubmit }) {
 }
 
 export function Spinner({ size = 'base', tone = 'accent', label = 'loading', key } = {}) {
-    const sizeClass = size === 'sm' ? 'ds-spinner-sm' : size === 'lg' ? 'ds-spinner-lg' : '';
+    const SIZE_CLASS = { xs: 'ds-spinner-xs', sm: 'ds-spinner-sm', base: '', lg: 'ds-spinner-lg', xl: 'ds-spinner-xl' };
+    const sizeClass = SIZE_CLASS[size] != null ? SIZE_CLASS[size] : '';
     return h('div', {
         key, class: 'ds-spinner ' + sizeClass + ' tone-' + tone,
         role: 'status', 'aria-live': 'polite', 'aria-label': label

package/src/components/editor-primitives.js

@@ -113,7 +113,7 @@ export function TreeItem({ label, glyph, tag, depth = 0, selected = false, expan
     },
         h('div', {
             class: 'ds-ep-tree-row',
-            style: 'padding-left:' + (depth * 12 + 6) + 'px',
+            style: 'padding-left:calc(' + depth + ' * var(--tree-indent,12px) + var(--tree-base-indent,6px))',
             tabindex: selected ? '0' : '-1',
             onclick: () => onSelect && onSelect(),
             onkeydown: onRowKeyDown
@@ -286,7 +286,7 @@ export function SplitPanel({ orientation = 'horizontal', initial = '50%', min =
         class: 'ds-ep-split ' + (isH ? 'horiz' : 'vert'),
         ref: (el) => { rootEl = el; }
     },
-        h('div', { class: 'ds-ep-split-pane', style: sizeProp + ':' + initStyle + ';flex:0 0 auto' }, first),
+        h('div', { class: 'ds-ep-split-pane', style: '--split-size:' + initStyle + ';flex:0 0 auto' }, first),
         ResizeHandle({ axis: isH ? 'horizontal' : 'vertical', onResize }),
         h('div', { class: 'ds-ep-split-pane grow', style: 'flex:1 1 0;min-' + sizeProp + ':0' }, second)
     );

package/src/components/form-primitives.js

@@ -73,7 +73,7 @@ export function RadioGroup({ legend, name, value, options = [], onChange, orient
         const inputs = root.querySelectorAll('input[type="radio"]');
         if (inputs[next]) inputs[next].focus();
     };
-    return h('fieldset', { key, class: 'ds-radio-group ' + (isHoriz ? 'horiz' : 'vert'), role: 'radiogroup', onkeydown: onKeyDown },
+    return h('fieldset', { key, class: 'ds-radio-group ' + (isHoriz ? 'horiz' : 'vert'), role: 'radiogroup', 'aria-orientation': isHoriz ? 'horizontal' : 'vertical', onkeydown: onKeyDown },
         legend != null ? h('legend', { key: 'lg', class: 'ds-field-label' }, legend) : null,
         ...options.map((o, i) => {
             const v = typeof o === 'string' ? o : o.value;
@@ -110,7 +110,7 @@ function cloneWithProps(node, extra) {
     return { ...node, props: { ...(node.props || {}), ...extra } };
 }
 
-export function Field({ label, hint, error, required, htmlFor, children, key } = {}) {
+export function Field({ label, hint, error, required, requiredMarker = '*', htmlFor, children, key } = {}) {
     const autoId = htmlFor || uid('ds-field');
     const hintId = hint != null ? autoId + '-hint' : null;
     const errorId = error != null ? autoId + '-err' : null;
@@ -128,12 +128,12 @@ export function Field({ label, hint, error, required, htmlFor, children, key } =
     return h('div', { key, class: 'ds-field-wrap' },
         label != null ? h('label', { key: 'l', class: 'ds-field-label', for: autoId },
             label,
-            required ? h('span', { key: 'r', class: 'ds-field-required', 'aria-hidden': 'true' }, ' *') : null
+            required ? h('span', { key: 'r', class: 'ds-field-required', 'aria-hidden': 'true' }, ' ' + requiredMarker) : null
         ) : null,
         required ? h('span', { key: 'sr', class: 'sr-only' }, 'required') : null,
         ...decorated,
         error != null
-            ? h('div', { key: 'e', id: errorId, class: 'ds-field-error', role: 'alert' }, error)
+            ? h('div', { key: 'e', id: errorId, class: 'ds-field-error', role: 'alert', 'aria-live': 'polite', 'aria-atomic': 'true' }, error)
             : (hint != null ? h('div', { key: 'h', id: hintId, class: 'ds-field-hint' }, hint) : null)
     );
 }
@@ -149,20 +149,33 @@ const RULES = {
 
 export function useFormValidation(schema = {}) {
     const errors = {};
+    const isPromise = (x) => x != null && typeof x.then === 'function';
+    // Runs rules for one field. Returns the error string/null synchronously when
+    // no rule yields a Promise; returns a Promise resolving to that value when
+    // any rule (e.g. an async custom validator) does.
     const validateField = (name, value) => {
         const rules = schema[name] || [];
-        for (const r of rules) {
+        const settle = (out, idx) => {
+            if (out) { errors[name] = rules[idx].message || out; return errors[name]; }
+            // No error from this rule — continue with the rest.
+            return run(idx + 1);
+        };
+        const run = (i) => {
+            if (i >= rules.length) { delete errors[name]; return null; }
+            const r = rules[i];
             const fn = RULES[r.rule];
-            if (!fn) continue;
+            if (!fn) return run(i + 1);
             const out = fn(value, r);
-            if (out) { errors[name] = r.message || out; return errors[name]; }
-        }
-        delete errors[name];
-        return null;
+            if (isPromise(out)) return out.then((res) => settle(res, i));
+            return settle(out, i);
+        };
+        return run(0);
     };
     const validate = (values = {}) => {
-        for (const name of Object.keys(schema)) validateField(name, values[name]);
-        return { valid: Object.keys(errors).length === 0, errors: { ...errors } };
+        const names = Object.keys(schema);
+        const results = names.map((name) => validateField(name, values[name]));
+        const finish = () => ({ valid: Object.keys(errors).length === 0, errors: { ...errors } });
+        return results.some(isPromise) ? Promise.all(results).then(finish) : finish();
     };
     return { errors, validate, validateField };
 }

package/src/components/freddie/runtime.js

@@ -0,0 +1,101 @@
+// Freddie page runtime — gives each page a self-contained state + fetch +
+// rerender loop so the consumer's thin router (e.g. freddie src/web/app.js)
+// only has to call `page(host)` and mount the returned vnode. No router
+// changes required downstream: each page boots its own micro render loop via
+// a ref callback that uses the SDK's own applyDiff.
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+const applyDiff = webjsx.applyDiff;
+
+// Same-origin JSON fetch helper. Returns parsed JSON or throws with a
+// readable message carrying the HTTP status so page error states can show it.
+export async function api(path, opts = {}) {
+    const res = await fetch(path, {
+        headers: { 'content-type': 'application/json', ...(opts.headers || {}) },
+        ...opts,
+        body: opts.body != null && typeof opts.body !== 'string' ? JSON.stringify(opts.body) : opts.body,
+    });
+    let json = null;
+    const text = await res.text();
+    try { json = text ? JSON.parse(text) : null; } catch { json = { _raw: text }; }
+    if (!res.ok) {
+        const msg = (json && (json.error?.message || json.error || json.message)) || text || ('HTTP ' + res.status);
+        const err = new Error(typeof msg === 'string' ? msg : JSON.stringify(msg));
+        err.status = res.status;
+        err.body = json;
+        throw err;
+    }
+    return json;
+}
+
+// makePage(setup) -> (host) => vnode
+//   setup(ctx) is called once per mount with:
+//     ctx.state    — mutable page state object (seeded from initial)
+//     ctx.set(p)   — shallow-merge into state and rerender
+//     ctx.rerender()— force a rerender
+//     ctx.host     — the consumer host object passed by the router
+//     ctx.api      — the fetch helper above
+//   setup MUST return a render() function: () => vnode (sync) using ctx.state.
+//   Optionally setup may kick off async loads that call ctx.set(...) on arrival
+//   and may register intervals via ctx.interval(fn, ms) (auto-cleared on unmount).
+export function makePage(setup, { initial = {} } = {}) {
+    return function pageRenderer(host) {
+        const state = { loading: true, error: null, ...initial };
+        const timers = [];
+        let elRef = null;
+        let render = () => h('div', {});
+        const ctx = {
+            state, host, api,
+            set(patch) { Object.assign(state, patch); ctx.rerender(); },
+            rerender() { if (elRef) { try { applyDiff(elRef, wrap()); } catch (e) { console.warn('[freddie page rerender]', e); } } },
+            interval(fn, ms) { const id = setInterval(fn, ms); timers.push(id); return id; },
+            cleanup() { for (const id of timers) clearInterval(id); timers.length = 0; },
+        };
+        function wrap() {
+            let body;
+            try { body = render(); }
+            catch (e) {
+                body = h('div', { class: 'ds-alert ds-alert-error', role: 'alert' },
+                    h('span', { class: 'ds-alert-icon' }, '✕'),
+                    h('div', { class: 'ds-alert-content' },
+                        h('div', { class: 'ds-alert-title' }, 'page render error'),
+                        h('pre', { class: 'fd-pre' }, String(e && e.stack || e))));
+            }
+            return h('div', { class: 'fd-page-inner' }, ...(Array.isArray(body) ? body : [body]));
+        }
+        const ref = (el) => {
+            if (!el) { ctx.cleanup(); return; }
+            if (elRef === el) return;
+            elRef = el;
+            const r = setup(ctx);
+            if (typeof r === 'function') render = r;
+            ctx.rerender();
+        };
+        return h('div', { class: 'fd-page-root', ref });
+    };
+}
+
+// Standard loading + error scaffolding helpers so every page is consistent.
+export function loadingState(label = 'loading…') {
+    return h('div', { class: 'fd-loading', role: 'status', 'aria-live': 'polite' },
+        h('div', { class: 'ds-spinner tone-accent', 'aria-hidden': 'true' },
+            h('span'), h('span'), h('span')),
+        h('span', { class: 'dim' }, label));
+}
+
+export function errorState(err, onRetry) {
+    const msg = String(err && err.message || err);
+    return h('div', { class: 'ds-alert ds-alert-error', role: 'alert' },
+        h('span', { class: 'ds-alert-icon' }, '✕'),
+        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', onclick: onRetry, style: 'margin-top:8px' }, 'retry') : null));
+}
+
+export function emptyState(text = 'nothing here yet', glyph = '◌') {
+    return h('div', { class: 'fd-empty', role: 'status' },
+        h('div', { class: 'fd-empty-glyph', 'aria-hidden': 'true' }, glyph),
+        h('div', { class: 'dim' }, text));
+}