pith-ui 0.1.0 → 0.1.1

package/dist/primitives.js

@@ -1,64 +1,20 @@
-import { Generation, Lifetime, setControlPending } from './core.js';
-import { element, focusableElements, iconElement, setText, uniqueId } from './dom.js';
+import { Generation, Lifetime } from './core.js';
+import { element, iconElement, setText, uniqueId } from './dom.js';
+import { adoptAction, adoptActionLayout, adoptFeedback, adoptNativeControl, reconcileSelectOptions } from './foundations.js';
+import { installDialogLifecycle, installMenuNavigation } from './surface.js';
 export function createButton(options) {
     const node = element('button', 'pui-button');
     node.type = options.type ?? 'button';
     const caption = element('span');
     node.append(caption);
-    const life = new Lifetime();
-    const generation = new Generation();
-    let state = options;
-    let localPending = false;
-    let currentIcon = '';
-    let glyph;
+    const action = adoptAction(node, { caption, onAction: options.onAction, onError: options.onError });
     const update = (next) => {
-        state = next;
-        setText(caption, next.label);
-        node.className = `pui-button pui-${next.intent ?? 'neutral'} pui-${next.density ?? 'normal'}`;
-        node.disabled = !!(next.disabled || next.pending || localPending);
-        setControlPending(node, !!(next.pending || localPending));
-        node.setAttribute('aria-busy', String(!!(next.pending || localPending)));
-        node.title = next.title ?? '';
-        if (currentIcon !== (next.icon ?? '')) {
-            glyph?.remove();
-            currentIcon = next.icon ?? '';
-            glyph = next.icon ? iconElement(next.icon) : undefined;
-            if (glyph)
-                node.prepend(glyph);
-        }
+        action.update({ ...next, intent: next.intent ?? 'neutral', density: next.density ?? 'normal',
+            disabled: !!next.disabled, pending: !!next.pending, title: next.title ?? '', icon: next.icon ?? '',
+            appearance: next.appearance ?? 'standard' });
     };
-    life.listen(node, 'click', (() => {
-        if (!options.onAction || node.disabled)
-            return;
-        const seq = generation.next();
-        localPending = true;
-        update(state);
-        const complete = (result) => {
-            if (generation.current(seq) && result && !result.ok)
-                options.onError?.(result.error);
-        };
-        const failed = (error) => { if (generation.current(seq))
-            options.onError?.(error instanceof Error ? error.message : String(error)); };
-        const finish = () => { if (generation.current(seq)) {
-            localPending = false;
-            update(state);
-        } };
-        try {
-            const result = options.onAction();
-            if (result && 'then' in result)
-                void result.then(complete).catch(failed).finally(finish);
-            else {
-                complete(result);
-                finish();
-            }
-        }
-        catch (error) {
-            failed(error);
-            finish();
-        }
-    }));
     update(options);
-    return { element: node, update, destroy() { generation.destroy(); life.destroy(); } };
+    return { element: node, update, destroy() { action.destroy(); } };
 }
 export function createIconButton(options) {
     const block = createButton(options);
@@ -140,11 +96,11 @@ export function createKeyValue(options) {
 }
 export function createToolbar(options) {
     const root = element('div', 'pui-toolbar');
-    root.setAttribute('role', 'group');
     root.append(...(options.children ?? []));
-    const update = (state) => { root.setAttribute('aria-label', state.label); root.classList.toggle('pui-compact', state.density === 'compact'); };
+    const layout = adoptActionLayout(root, 'toolbar');
+    const update = (state) => { layout.update({ ...state, density: state.density ?? 'normal' }); };
     update(options);
-    return { element: root, update, destroy() { } };
+    return { element: root, update, destroy() { layout.destroy(); } };
 }
 export function createScrollArea(options) {
     const root = element('div', 'pui-scroll-area', options.content);
@@ -160,33 +116,19 @@ export function createField(options) {
     const description = element('div', 'pui-field-description');
     const error = element('div', 'pui-field-error');
     const control = options.control;
-    if (!control.id)
-        control.id = uniqueId('pui-input');
-    label.htmlFor = control.id;
     description.id = uniqueId('pui-description');
     error.id = uniqueId('pui-error');
-    error.setAttribute('role', 'alert');
     control.classList.add('pui-control');
     root.append(label, control, description, error);
+    const field = adoptNativeControl(control, { label, description, error });
     const update = (state) => {
-        setText(label, `${state.label}${state.required ? ' *' : ''}`);
+        field.update({ ...state, label: `${state.label}${state.required ? ' *' : ''}`,
+            description: state.description ?? '', error: state.error ?? '', disabled: !!state.disabled, required: !!state.required });
         label.hidden = !state.label;
-        setText(description, state.description);
-        description.hidden = !state.description;
-        setText(error, state.error);
-        error.hidden = !state.error;
-        control.disabled = !!state.disabled;
-        control.required = !!state.required;
-        control.setAttribute('aria-invalid', String(!!state.error));
-        const describedBy = [state.description ? description.id : '', state.error ? error.id : ''].filter(Boolean).join(' ');
-        if (describedBy)
-            control.setAttribute('aria-describedby', describedBy);
-        else
-            control.removeAttribute('aria-describedby');
         root.classList.toggle('pui-invalid', !!state.error);
     };
     update(options);
-    return { element: root, control, update, destroy() { } };
+    return { element: root, control, update, destroy() { field.destroy(); } };
 }
 function textControl(options, type) {
     const control = type === 'textarea' ? element('textarea') : element('input');
@@ -203,20 +145,16 @@ function textControl(options, type) {
         control.setAttribute('autocomplete', options.autocomplete);
     control.value = options.value ?? '';
     const field = createField({ ...options, control });
-    const life = new Lifetime();
-    life.listen(control, 'input', (event => options.onInput?.(control.value, event)));
-    life.listen(control, 'change', (event => options.onChange?.(control.value, event)));
+    const input = adoptNativeControl(control, { onInput: options.onInput, onChange: options.onChange });
     const update = (state) => {
         field.update(state);
-        control.placeholder = state.placeholder ?? '';
-        control.readOnly = !!state.readOnly;
+        input.update({ placeholder: state.placeholder ?? '', readOnly: !!state.readOnly });
         control.classList.toggle('pui-compact', state.density === 'compact');
     };
     update(options);
-    return { element: field.element, control, update, getValue: () => control.value,
-        reset(value) { if (control.value !== value)
-            control.value = value; }, focus() { control.focus(); },
-        destroy() { life.destroy(); field.destroy(); } };
+    return { element: field.element, control, update, getValue: input.getValue,
+        reset: input.reset, focus: input.focus,
+        destroy() { input.destroy(); field.destroy(); } };
 }
 export const createTextInput = (options) => textControl(options, 'text');
 export const createSearchInput = (options) => textControl(options, 'search');
@@ -246,7 +184,7 @@ export function createSelect(options) {
     if (options.size)
         control.size = options.size;
     const field = createField({ ...options, control });
-    const life = new Lifetime();
+    const input = adoptNativeControl(control, { onChange: () => options.onChange?.(control.value) });
     let signature = '';
     const update = (state) => {
         field.update(state);
@@ -254,23 +192,16 @@ export function createSelect(options) {
         const next = JSON.stringify(state.options);
         if (next !== signature) {
             signature = next;
-            const selected = new Set([...control.selectedOptions].map(option => option.value));
-            const nodes = state.options.map(item => {
-                const option = element('option', '', item.label);
-                option.value = item.value;
-                option.disabled = !!item.disabled;
-                option.selected = selected.has(item.value);
-                return option;
-            });
-            control.replaceChildren(...nodes);
+            reconcileSelectOptions(control, state.options);
+            if (!control.multiple && control.selectedIndex < 0 && control.options.length)
+                control.selectedIndex = 0;
         }
     };
-    life.listen(control, 'change', (() => options.onChange?.(control.value)));
     update(options);
     if (options.value != null)
         control.value = options.value;
-    return { element: field.element, control, update, getValue: () => control.value,
-        reset(value) { control.value = value; }, focus() { control.focus(); }, destroy() { life.destroy(); } };
+    return { element: field.element, control, update, getValue: input.getValue,
+        reset: input.reset, focus: input.focus, destroy() { input.destroy(); field.destroy(); } };
 }
 export function createCheckbox(options) {
     const control = element('input');
@@ -279,34 +210,29 @@ export function createCheckbox(options) {
     const caption = element('span');
     const description = element('small');
     const root = element('label', 'pui-checkbox', control, element('span', '', caption, description));
-    const life = new Lifetime();
+    const input = adoptNativeControl(control, { onChange: () => options.onChange?.(control.checked) });
     const update = (state) => {
         setText(caption, state.label);
         setText(description, state.description);
         description.hidden = !state.description;
-        control.disabled = !!state.disabled;
+        input.update({ disabled: !!state.disabled });
     };
-    life.listen(control, 'change', (() => options.onChange?.(control.checked)));
     update(options);
-    return { element: root, control, update, getValue: () => control.checked,
-        reset(value) { control.checked = value; }, focus() { control.focus(); }, destroy() { life.destroy(); } };
+    return { element: root, control, update, getValue: input.getChecked,
+        reset: input.reset, focus: input.focus, destroy() { input.destroy(); } };
 }
 export function createNotice(state) {
     const root = element('div', 'pui-notice');
-    const update = (next) => {
-        root.className = `pui-notice pui-notice-${next.tone ?? 'info'}`;
-        root.setAttribute('role', next.tone === 'error' || next.tone === 'warning' ? 'alert' : 'status');
-        root.hidden = !next.message;
-        setText(root, next.message);
-    };
-    update(state);
-    return { element: root, update, destroy() { } };
+    const notice = adoptFeedback(root, { presentation: 'notice' });
+    notice.update(state);
+    return notice;
 }
 export function createStatus(state) {
     const root = element('span', 'pui-status');
-    const update = (next) => { root.className = `pui-status pui-status-${next.tone ?? 'neutral'}`; setText(root, next.label); };
+    const status = adoptFeedback(root, { presentation: 'status', autoHide: false });
+    const update = (next) => { status.update({ message: next.label, tone: next.tone }); };
     update(state);
-    return { element: root, update, destroy() { } };
+    return { element: root, update, destroy() { status.destroy(); } };
 }
 export function createProgress(state) {
     const control = element('progress');
@@ -336,9 +262,10 @@ export function createFormSection(options) {
 export function createActions(options = {}) {
     const root = element('div', 'pui-actions');
     root.append(...(options.children ?? []));
-    const update = (state) => { root.dataset.align = state.align ?? 'end'; };
+    const layout = adoptActionLayout(root, 'actions');
+    const update = (state) => { layout.update({ align: state.align ?? 'end' }); };
     update(options);
-    return { element: root, update, destroy() { } };
+    return { element: root, update, destroy() { layout.destroy(); } };
 }
 export function createDisclosure(options) {
     const root = element('details', 'pui-disclosure');
@@ -424,9 +351,7 @@ export function createDialog(options) {
     root.replaceChildren(heading, body);
     if (options.actions)
         root.append(options.actions);
-    const life = new Lifetime();
     let state = options;
-    let previousFocus = null;
     let disposed = false;
     const update = (next) => {
         state = next;
@@ -441,39 +366,14 @@ export function createDialog(options) {
             root.removeAttribute('aria-describedby');
         close.update({ label: `Close ${next.title}`, icon: 'close', disabled: next.closeDisabled });
     };
-    life.listen(root, 'cancel', (event => { if (state.closeDisabled)
-        event.preventDefault(); }));
-    life.listen(root, 'click', (event => {
-        if (!options.closeOnBackdrop || state.closeDisabled || event.target !== root)
-            return;
-        const pointer = event;
-        const rect = root.getBoundingClientRect();
-        if (pointer.clientX < rect.left || pointer.clientX > rect.right || pointer.clientY < rect.top || pointer.clientY > rect.bottom)
-            root.close();
-    }));
-    life.listen(root, 'close', (() => {
-        // Native close events are queued; an old close must not affect a reopened dialog.
-        if (root.open)
-            return;
-        options.onClose?.();
-        if (previousFocus?.isConnected)
-            previousFocus.focus({ preventScroll: true });
-        previousFocus = null;
-    }));
+    const surface = installDialogLifecycle(root, { closeOnBackdrop: options.closeOnBackdrop ?? !!options.dialog,
+        canClose: () => !state.closeDisabled, onClose: options.onClose });
     update(options);
     return { element: root, body, update,
-        open() {
-            if (disposed || root.open)
-                return;
-            previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-            if (!root.isConnected)
-                document.body.append(root);
-            root.showModal();
-        }, close() { if (root.open)
-            root.close(); },
+        open() { if (!disposed)
+            surface.open(); }, close() { surface.close(); },
         destroy() { if (disposed)
-            return; disposed = true; if (root.open)
-            root.close(); life.destroy(); close.destroy(); root.remove(); } };
+            return; disposed = true; surface.close(); surface.destroy(); close.destroy(); root.remove(); } };
 }
 export function createTextEditDialog(options = {}) {
     // The editor has one form-level error, so it does not need the general field's
@@ -483,6 +383,7 @@ export function createTextEditDialog(options = {}) {
     control.id = options.ids?.control ?? uniqueId('pui-input');
     const label = element('label', 'pui-field-label', options.label ?? 'Message');
     label.htmlFor = control.id;
+    const input = adoptNativeControl(control, { label, onInput: value => options.onInput?.(value) });
     const field = element('div', 'pui-field', label, control);
     const note = element('p', 'pui-muted');
     const error = createNotice({ message: '', tone: 'error' });
@@ -515,9 +416,8 @@ export function createTextEditDialog(options = {}) {
         note.hidden = !next.note;
         error.update({ message: next.error ?? '', tone: 'error' });
         submit.update({ label: next.submitLabel ?? options.submitLabel ?? 'Save', intent: 'primary', disabled: next.disabled, pending: !!(next.pending || pending) });
-        control.disabled = !!next.inputDisabled;
+        input.update({ disabled: !!next.inputDisabled });
     };
-    life.listen(control, 'input', () => options.onInput?.(control.value));
     life.listen(form, 'submit', (event => {
         event.preventDefault();
         if (pending || state.pending || state.disabled || submit.element.disabled || !options.onSubmit)
@@ -544,15 +444,15 @@ export function createTextEditDialog(options = {}) {
     }));
     update(state);
     return { element: dialog.element, control, submitButton: submit.element, update,
-        open(input) {
+        open(target) {
             generation.invalidate();
             pending = false;
-            update({ ...state, error: '', title: input.title ?? options.title ?? 'Edit message', description: input.description ?? options.description, note: input.note ?? options.note });
-            control.value = input.value;
+            update({ ...state, error: '', title: target.title ?? options.title ?? 'Edit message', description: target.description ?? options.description, note: target.note ?? options.note });
+            input.reset(target.value);
             dialog.open();
-            control.focus();
-        }, close() { generation.invalidate(); dialog.close(); }, getValue: () => control.value, focus() { control.focus(); },
-        destroy() { generation.destroy(); life.destroy(); dialog.destroy(); cancel.destroy(); submit.destroy(); } };
+            input.focus();
+        }, close() { generation.invalidate(); dialog.close(); }, getValue: input.getValue, focus: input.focus,
+        destroy() { generation.destroy(); life.destroy(); input.destroy(); dialog.destroy(); cancel.destroy(); submit.destroy(); } };
 }
 export function createConfirmDialog(options) {
     const message = element('p', 'pui-modal-description');
@@ -618,12 +518,12 @@ export function createConfirmDialog(options) {
         setText(hint, next.hint);
         hint.hidden = !next.hint;
         error.update({ message: next.error ?? '', tone: 'error' });
-        confirm.update({ label: next.confirmLabel ?? 'Remove', intent: 'danger', disabled: next.disabled, pending: !!(next.pending || pending) });
+        confirm.update({ label: next.confirmLabel ?? 'Remove', intent: 'danger', disabled: !!(next.disabled || options.unavailable?.()), pending: !!(next.pending || pending) });
     };
     life.listen(form, 'submit', (event => { event.preventDefault(); void run(); }));
     update(options);
     return { element: dialog.element, confirmButton: confirm.element, cancelButton: cancel.element, update, open(next) { generation.invalidate(); pending = false; update({ ...(next ?? state), error: '' }); dialog.open(); cancel.element.focus(); },
-        close() { generation.invalidate(); dialog.close(); }, destroy() { generation.destroy(); life.destroy(); dialog.destroy(); confirm.destroy(); cancel.destroy(); } };
+        close() { generation.invalidate(); dialog.close(); }, refreshAvailability() { update(state); }, destroy() { generation.destroy(); life.destroy(); dialog.destroy(); confirm.destroy(); cancel.destroy(); } };
 }
 export function createPopover(options) {
     let open = false;
@@ -720,22 +620,14 @@ export function createMenu(options) {
         if (key === 'ArrowDown' || key === 'ArrowUp') {
             event.preventDefault();
             popover.open();
-            const targets = focusableElements(content);
-            (key === 'ArrowDown' ? targets[0] : targets.at(-1))?.focus();
+            navigation.focus(key === 'ArrowUp' ? 'last' : 'first');
         }
     }));
-    life.listen(content, 'keydown', (event => {
-        const key = event.key;
-        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(key))
-            return;
-        event.preventDefault();
-        const targets = focusableElements(content);
-        const index = targets.indexOf(document.activeElement);
-        const next = key === 'Home' ? 0 : key === 'End' ? targets.length - 1 : (index + (key === 'ArrowUp' ? -1 : 1) + targets.length) % targets.length;
-        targets[next]?.focus();
-    }));
+    const navigation = installMenuNavigation(content, { trigger: popover.trigger, isOpen: popover.isOpen,
+        onDismiss(restoreFocus) { popover.close(); if (restoreFocus)
+            popover.trigger.focus(); } });
     update(options);
-    return { ...popover, update, destroy() { life.destroy(); popover.destroy(); for (const block of blocks.values())
+    return { ...popover, update, destroy() { navigation.destroy(); life.destroy(); popover.destroy(); for (const block of blocks.values())
             block.destroy(); } };
 }
 //# sourceMappingURL=primitives.js.map