@veil-runtime/ui 0.4.1 → 0.5.0

package/dist/dom.js

@@ -209,6 +209,16 @@ export function createMountedInterface(target, definition, options = {}) {
             return; disposed = true; unmount(); disposeController(); },
     });
 }
+const gridCounts = [1, 2, 3, 4];
+const gridTracks = (count) => `repeat(${count}, minmax(0, 1fr))`;
+const gridStyles = [
+    `.veil-interface-grid > *{min-width:0}`,
+    `.veil-interface-badge{display:inline-block;border:1px solid currentColor;border-radius:0.25rem;padding:0.1rem 0.4rem}`,
+    ...gridCounts.map((count) => `.veil-interface-grid-cols-${count}{grid-template-columns:${gridTracks(count)}}`),
+    `@media (min-width:600px){${gridCounts.map((count) => `.veil-interface-grid-sm-${count}{grid-template-columns:${gridTracks(count)}}`).join("")}}`,
+    `@media (min-width:1024px){${gridCounts.map((count) => `.veil-interface-grid-lg-${count}{grid-template-columns:${gridTracks(count)}}`).join("")}}`,
+].join("");
+const gridGaps = { none: "0", sm: "0.5rem", md: "0.75rem", lg: "1.5rem" };
 /** Mount a framework-neutral interface. The caller owns and disposes the controller separately. */
 export function mountInterface(target, controller, components = {}, onError) {
     let active = true;
@@ -227,10 +237,29 @@ export function mountInterface(target, controller, components = {}, onError) {
         catch { /* Reporting cannot interrupt a transaction. */ }
     };
     const domId = `veil-interface-${++instance}`;
+    const style = document.createElement("style");
+    style.textContent = gridStyles;
     const make = (tag, className) => { const el = document.createElement(tag); el.className = className; return el; };
     const display = (value) => value === undefined || value === null ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
     const resolveText = (node, snapshot) => typeof node.text === "string" ? node.text : node.text ? display(resolveInterfaceBinding(snapshot, node.text)) : "";
     const visible = (node, snapshot) => !node.visible || evaluateInterfaceCondition(node.visible, snapshot);
+    // Resolve eligibility from accepted state, including ancestors, rather than a
+    // creation-time node captured by a retained control's event handler.
+    function currentVisibleNode(key, snapshot) {
+        const find = (node) => {
+            if (!visible(node, snapshot))
+                return undefined;
+            if (node.key === key)
+                return node;
+            for (const child of node.children ?? []) {
+                const found = find(child);
+                if (found)
+                    return found;
+            }
+            return undefined;
+        };
+        return find(snapshot.definition.screen);
+    }
     function create(node, snapshot, candidate = false) {
         const children = [];
         let element;
@@ -238,7 +267,7 @@ export function mountInterface(target, controller, components = {}, onError) {
         let updateCustom;
         let live = true;
         const lifetime = new AbortController();
-        if (node.component === "Stack" || node.component === "Row")
+        if (node.component === "Stack" || node.component === "Row" || node.component === "Grid")
             element = make("div", `veil-interface-${node.component.toLowerCase()}`);
         else if (node.component === "Text")
             element = make("p", "veil-interface-text");
@@ -253,14 +282,27 @@ export function mountInterface(target, controller, components = {}, onError) {
             const button = document.createElement("button");
             button.type = "button";
             button.className = "veil-interface-button";
-            const click = () => { if (active && live) {
-                try {
-                    controller.dispatch(node.action, node.key);
-                }
-                catch (error) {
-                    report(error);
+            const click = () => {
+                if (active && live) {
+                    try {
+                        controller.dispatch(node.action, node.key);
+                    }
+                    catch (error) {
+                        const snapshot = controller.snapshot();
+                        const current = currentVisibleNode(node.key, snapshot);
+                        if (current?.validate && !(current.disabled && evaluateInterfaceCondition(current.disabled, snapshot))) {
+                            const errors = getInterfaceValidation(snapshot);
+                            for (const control of root?.element.querySelectorAll("input,select,textarea") ?? []) {
+                                if (control.dataset["veilField"] && Object.hasOwn(errors, control.dataset["veilField"]) && !control.disabled) {
+                                    control.focus();
+                                    break;
+                                }
+                            }
+                        }
+                        report(error);
+                    }
                 }
-            } };
+            };
             button.addEventListener("click", click);
             dispose = () => button.removeEventListener("click", click);
             element = button;
@@ -270,15 +312,29 @@ export function mountInterface(target, controller, components = {}, onError) {
             const label = document.createElement("label");
             const input = document.createElement(node.component === "Textarea" ? "textarea" : node.component === "Select" ? "select" : "input");
             input.id = `${domId}-input-${node.key}`;
+            input.dataset["veilField"] = node.key;
             label.htmlFor = input.id;
-            if (input instanceof HTMLInputElement)
+            if (input instanceof HTMLInputElement) {
                 input.type = node.inputType ?? "text";
+                if (input.type === "number")
+                    input.step = "any";
+            }
             input.style.boxSizing = "border-box";
             input.style.maxWidth = "100%";
             input.style.minWidth = "0";
             const change = () => {
                 if (!active || !live)
                     return;
+                const snapshot = controller.snapshot();
+                const current = currentVisibleNode(node.key, snapshot);
+                if (!current || current.readOnly || (current.disabled && evaluateInterfaceCondition(current.disabled, snapshot))) {
+                    const accepted = resolveInterfaceBinding(snapshot, node.binding);
+                    if (input instanceof HTMLInputElement && input.type === "checkbox")
+                        input.checked = accepted === true;
+                    else
+                        input.value = display(accepted);
+                    return;
+                }
                 const value = input instanceof HTMLInputElement && input.type === "checkbox" ? input.checked : input.type === "number" && input.value !== "" ? Number(input.value) : input.value;
                 try {
                     controller.setState(node.binding.path, value);
@@ -299,7 +355,10 @@ export function mountInterface(target, controller, components = {}, onError) {
             feedback.id = `${domId}-feedback-${node.key}`;
             feedback.setAttribute("aria-live", "polite");
             input.setAttribute("aria-describedby", feedback.id);
-            wrapper.append(label, input, feedback);
+            const description = document.createElement("p");
+            description.id = `${domId}-description-${node.key}`;
+            description.className = "veil-interface-description";
+            wrapper.append(label, description, input, feedback);
             element = wrapper;
         }
         else if (node.component === "Table") {
@@ -350,9 +409,9 @@ export function mountInterface(target, controller, components = {}, onError) {
             }
         }
         const result = { node, element, children, dispose: () => { live = false; lifetime.abort(); dispose(); }, updateCustom, visibleDisplay: element.style.display, live: true };
-        if (node.component === "Stack" || node.component === "Row") {
-            element.style.display = node.component === "Stack" ? "grid" : "flex";
-            element.style.gap = "0.75rem";
+        if (node.component === "Stack" || node.component === "Row" || node.component === "Grid") {
+            element.style.display = node.component === "Row" ? "flex" : "grid";
+            element.style.gap = node.component === "Grid" ? gridGaps[node.gap ?? "md"] : "0.75rem";
             element.style.minWidth = "0";
             if (node.component === "Stack")
                 element.style.gridTemplateColumns = "minmax(0, 1fr)";
@@ -382,8 +441,157 @@ export function mountInterface(target, controller, components = {}, onError) {
         }
         return result;
     }
+    function clearCollection(rendered) {
+        for (const row of rendered.collection?.rows.values() ?? [])
+            for (const button of row.buttons.values())
+                button.dispose();
+        delete rendered.collection;
+    }
+    function cellText(cell, value, badge) {
+        const text = display(value);
+        if (badge) {
+            let span = cell.firstElementChild;
+            if (!span || !span.classList.contains("veil-interface-badge")) {
+                span = make("span", "veil-interface-badge");
+                cell.replaceChildren(span);
+            }
+            if (span.textContent !== text)
+                span.textContent = text;
+        }
+        else if (cell.firstElementChild || cell.textContent !== text)
+            cell.textContent = text;
+    }
+    function updateCollection(rendered, snapshot) {
+        const { node, element } = rendered;
+        const scope = JSON.stringify([snapshot.definition.id, node.key, node.binding.source, node.binding.path, node.rowKey]);
+        if (rendered.collection?.scope !== scope) {
+            clearCollection(rendered);
+            const head = document.createElement("thead"), body = document.createElement("tbody");
+            rendered.collection = { scope, head, body, rows: new Map() };
+            element.replaceChildren(head, body);
+        }
+        const collection = rendered.collection;
+        const columns = Array.isArray(node.columns) ? node.columns : [];
+        const header = document.createElement("tr");
+        for (const label of [...columns.map(col => col.label), ...(node.rowActions ? ["Actions"] : [])]) {
+            const th = document.createElement("th");
+            th.scope = "col";
+            th.textContent = label;
+            header.append(th);
+        }
+        collection.head.replaceChildren(header);
+        const rows = (resolveInterfaceBinding(snapshot, node.binding) ?? []);
+        const retained = new Set();
+        for (const [index, data] of rows.entries()) {
+            const id = data[node.rowKey];
+            retained.add(id);
+            let row = collection.rows.get(id);
+            if (!row) {
+                row = { element: document.createElement("tr"), cells: [], actions: document.createElement("td"), buttons: new Map() };
+                collection.rows.set(id, row);
+            }
+            while (row.cells.length > columns.length)
+                row.cells.pop().remove();
+            for (const [i, col] of columns.entries()) {
+                if (!row.cells[i])
+                    row.cells.push(document.createElement("td"));
+                cellText(row.cells[i], Object.hasOwn(data, col.key) ? data[col.key] : undefined, col.presentation === "badge");
+                if (row.element.children[i] !== row.cells[i])
+                    row.element.insertBefore(row.cells[i], row.element.children[i] ?? null);
+            }
+            const desired = new Set(node.rowActions?.map(item => item.action));
+            for (const [action, button] of row.buttons)
+                if (!desired.has(action)) {
+                    button.dispose();
+                    button.element.remove();
+                    row.buttons.delete(action);
+                }
+            for (const [i, action] of (node.rowActions ?? []).entries()) {
+                let button = row.buttons.get(action.action);
+                if (!button) {
+                    const control = document.createElement("button");
+                    control.type = "button";
+                    let live = true;
+                    let gesture;
+                    let renderedRevision = snapshot.revision;
+                    const clicks = new WeakMap();
+                    const consumed = new WeakSet();
+                    const start = () => { gesture = renderedRevision; };
+                    const key = (event) => {
+                        if (event.key !== "Enter" && event.key !== " ")
+                            return;
+                        if (event.repeat) {
+                            event.preventDefault();
+                            return;
+                        }
+                        start();
+                    };
+                    const captureClick = (event) => { clicks.set(event, gesture ?? renderedRevision); gesture = undefined; };
+                    const click = (event) => {
+                        if (event.target !== control || !active || !live || !rendered.live || consumed.has(event))
+                            return;
+                        consumed.add(event);
+                        try {
+                            controller.dispatchRow(action.action, node.key, id, clicks.get(event) ?? renderedRevision);
+                        }
+                        catch (error) {
+                            report(error);
+                        }
+                    };
+                    // Capture before target/bubble handlers can commit a replacement dataset.
+                    const capture = (event) => { if (event.target === control)
+                        captureClick(event); };
+                    const pointer = (event) => { if (event.target === control)
+                        start(); };
+                    const keyboard = (event) => { if (event.target === control)
+                        key(event); };
+                    element.addEventListener("pointerdown", pointer, true);
+                    element.addEventListener("keydown", keyboard, true);
+                    element.addEventListener("click", capture, true);
+                    element.addEventListener("click", click);
+                    // Store revision separately from gesture so commits cannot refresh an active press.
+                    button = { element: control, updateRevision(value) { renderedRevision = value; }, dispose() {
+                            live = false;
+                            element.removeEventListener("pointerdown", pointer, true);
+                            element.removeEventListener("keydown", keyboard, true);
+                            element.removeEventListener("click", capture, true);
+                            element.removeEventListener("click", click);
+                        } };
+                    row.buttons.set(action.action, button);
+                }
+                button.updateRevision(snapshot.revision);
+                // Preserve the text node through data commits during a press.
+                if (button.element.textContent !== action.label) {
+                    if (button.element.firstChild?.nodeType === 3)
+                        button.element.firstChild.nodeValue = action.label;
+                    else
+                        button.element.textContent = action.label;
+                }
+                button.element.setAttribute("aria-label", `${action.label}, ${id}`);
+                if (row.actions.children[i] !== button.element)
+                    row.actions.insertBefore(button.element, row.actions.children[i] ?? null);
+            }
+            if (node.rowActions)
+                row.element.append(row.actions);
+            else
+                row.actions.remove();
+            if (collection.body.children[index] !== row.element)
+                collection.body.insertBefore(row.element, collection.body.children[index] ?? null);
+        }
+        for (const [id, row] of collection.rows)
+            if (!retained.has(id)) {
+                for (const button of row.buttons.values())
+                    button.dispose();
+                row.element.remove();
+                collection.rows.delete(id);
+            }
+    }
     function update(rendered, snapshot) {
         const { node, element } = rendered;
+        if (node.component === "Grid") {
+            element.className = `veil-interface-grid veil-interface-grid-cols-${node.columns ?? 1}${node.columnsAt?.sm ? ` veil-interface-grid-sm-${node.columnsAt.sm}` : ""}${node.columnsAt?.lg ? ` veil-interface-grid-lg-${node.columnsAt.lg}` : ""}`;
+            element.style.gap = gridGaps[node.gap ?? "md"];
+        }
         const isVisible = visible(node, snapshot);
         element.hidden = !isVisible;
         if (node.component === "Button")
@@ -393,8 +601,30 @@ export function mountInterface(target, controller, components = {}, onError) {
             element.setAttribute("aria-label", node.ariaLabel);
         else
             element.removeAttribute("aria-label");
-        if (["Text", "Heading", "Status", "Button"].includes(node.component))
-            element.textContent = resolveText(node, snapshot);
+        const phase = node.component === "Status" && node.phase !== undefined ? (typeof node.phase === "string" ? node.phase : resolveInterfaceBinding(snapshot, node.phase)) : undefined;
+        if (node.component === "Status") {
+            if (phase) {
+                element.dataset["phase"] = phase;
+                element.tabIndex = -1;
+                element.setAttribute("aria-atomic", "true");
+            }
+            else {
+                delete element.dataset["phase"];
+                element.removeAttribute("tabindex");
+                element.removeAttribute("aria-atomic");
+            }
+        }
+        if (["Text", "Heading", "Status", "Button"].includes(node.component)) {
+            const text = phase && node.text === undefined ? { loading: "Loading…", ready: "Ready.", empty: "No results.", error: "Unable to complete the request." }[phase] : resolveText(node, snapshot);
+            // Retain the pressed button's text node across blur-driven state commits.
+            if (element.textContent !== text) {
+                const child = element.firstChild;
+                if (child?.nodeType === 3 && child === element.lastChild)
+                    child.nodeValue = text;
+                else
+                    element.textContent = text;
+            }
+        }
         if (node.component === "List") {
             const items = resolveInterfaceBinding(snapshot, node.binding);
             if (items !== undefined && (!Array.isArray(items) || items.length > 100))
@@ -410,7 +640,21 @@ export function mountInterface(target, controller, components = {}, onError) {
             }
             const errors = getInterfaceValidation(snapshot);
             const error = Object.hasOwn(errors, node.key) ? errors[node.key] : "";
-            element.querySelector("span").textContent = error;
+            const feedback = element.querySelector("span");
+            if (feedback.textContent !== error)
+                feedback.textContent = error;
+            const description = element.querySelector("p");
+            if (description.textContent !== (node.description ?? ""))
+                description.textContent = node.description ?? "";
+            description.hidden = !node.description;
+            input.setAttribute("aria-describedby", [node.description ? description.id : "", feedback.id].filter(Boolean).join(" "));
+            if (error)
+                input.setAttribute("aria-errormessage", feedback.id);
+            else
+                input.removeAttribute("aria-errormessage");
+            input.disabled = !!node.disabled && evaluateInterfaceCondition(node.disabled, snapshot);
+            if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement)
+                input.readOnly = node.readOnly === true;
             input.setAttribute("aria-invalid", String(!!error));
             input.required = node.validation?.required === true;
             label.textContent = node.label ?? "";
@@ -428,13 +672,16 @@ export function mountInterface(target, controller, components = {}, onError) {
             else
                 input.removeAttribute("aria-label");
         }
-        if (node.component === "Table") {
+        if (node.component === "Table" && node.rowKey)
+            updateCollection(rendered, snapshot);
+        if (node.component === "Table" && !node.rowKey) {
+            clearCollection(rendered);
             const rows = resolveInterfaceBinding(snapshot, node.binding);
             if (rows !== undefined && (!Array.isArray(rows) || rows.length > 100))
                 throw new Error("Table row limit exceeded");
             const head = document.createElement("thead");
             const header = document.createElement("tr");
-            for (const col of node.columns ?? []) {
+            for (const col of Array.isArray(node.columns) ? node.columns : []) {
                 const cell = document.createElement("th");
                 cell.scope = "col";
                 cell.textContent = col.label;
@@ -446,9 +693,9 @@ export function mountInterface(target, controller, components = {}, onError) {
                 if (!row || typeof row !== "object" || Array.isArray(row))
                     throw new Error("Invalid table row");
                 const tr = document.createElement("tr");
-                for (const col of node.columns ?? []) {
+                for (const col of Array.isArray(node.columns) ? node.columns : []) {
                     const cell = document.createElement("td");
-                    cell.textContent = display(Object.hasOwn(row, col.key) ? row[col.key] : undefined);
+                    cellText(cell, Object.hasOwn(row, col.key) ? row[col.key] : undefined, col.presentation === "badge");
                     tr.append(cell);
                 }
                 body.append(tr);
@@ -460,6 +707,7 @@ export function mountInterface(target, controller, components = {}, onError) {
         if (!rendered.live)
             return;
         rendered.live = false;
+        clearCollection(rendered);
         try {
             rendered.dispose();
         }
@@ -474,13 +722,13 @@ export function mountInterface(target, controller, components = {}, onError) {
         const same = previous.node.key === node.key && previous.node.component === node.component &&
             (node.component !== "Button" || previous.node.action === node.action) &&
             (!isInterfaceField(node) || (previous.node.binding?.path === node.binding?.path && previous.node.inputType === node.inputType)) &&
-            ["Stack", "Row", "Text", "Heading", "Status", "Input", "Textarea", "Select", "Button", "Table", "List"].includes(node.component);
+            ["Stack", "Row", "Grid", "Text", "Heading", "Status", "Input", "Textarea", "Select", "Button", "Table", "List"].includes(node.component);
         if (!same) {
             const next = create(node, snapshot, true);
             staged.push(next);
             return () => { previous.element.replaceWith(next.element); destroy(previous); return next; };
         }
-        const prior = node.component === "Stack" || node.component === "Row" ? new Map(previous.children.map((child) => [child.node.key, child])) : undefined;
+        const prior = node.component === "Stack" || node.component === "Row" || node.component === "Grid" ? new Map(previous.children.map((child) => [child.node.key, child])) : undefined;
         const childPlans = (node.children ?? []).map((child) => {
             const old = prior?.get(child.key);
             if (old) {
@@ -494,7 +742,7 @@ export function mountInterface(target, controller, components = {}, onError) {
         return () => {
             previous.node = node;
             update(previous, snapshot);
-            if (node.component === "Stack" || node.component === "Row") {
+            if (node.component === "Stack" || node.component === "Row" || node.component === "Grid") {
                 const children = childPlans.map((plan) => plan());
                 previous.children = children;
                 for (let index = 0; index < children.length; index++) {
@@ -526,7 +774,12 @@ export function mountInterface(target, controller, components = {}, onError) {
                         const focused = root?.element.contains(document.activeElement) ? document.activeElement : undefined;
                         const selection = focused instanceof HTMLInputElement || focused instanceof HTMLTextAreaElement ? { start: focused.selectionStart, end: focused.selectionEnd, direction: focused.selectionDirection } : undefined;
                         root = commit();
-                        if (focused?.isConnected && document.activeElement !== focused) {
+                        const eligible = (element) => element.isConnected && !element.closest('[hidden]') && !element.matches(':disabled');
+                        if (focused && !eligible(focused)) {
+                            const destination = [root.element, ...root.element.querySelectorAll('[data-phase]')].find(element => element.hasAttribute('data-phase') && eligible(element));
+                            destination?.focus({ preventScroll: true });
+                        }
+                        else if (focused?.isConnected && document.activeElement !== focused) {
                             focused.focus({ preventScroll: true });
                             if (selection && selection.start !== null && selection.end !== null && (focused instanceof HTMLInputElement || focused instanceof HTMLTextAreaElement))
                                 focused.setSelectionRange(selection.start, selection.end, selection.direction ?? undefined);
@@ -542,9 +795,11 @@ export function mountInterface(target, controller, components = {}, onError) {
             }
         });
         mounted.get(target)?.();
+        document.head.append(style);
         target.replaceChildren(root.element);
     }
     catch (error) {
+        style.remove();
         unregister?.();
         if (root)
             destroy(root);
@@ -556,6 +811,7 @@ export function mountInterface(target, controller, components = {}, onError) {
             return;
         active = false;
         unregister?.();
+        style.remove();
         if (root) {
             destroy(root);
             if (root.element.parentNode === target)