@ashley-shrok/viewmodel-shell 0.15.0 → 1.0.1

package/dist/browser.js

@@ -1,3 +1,15 @@
+// Phase 6 — thin-interpreter rewrite.
+//
+// Every input declares a `bind` dotted path into state; the renderer reads
+// that slot to render and writes back on user-input events. Dispatch carries
+// only the action name. The 7 context-assembly sites that lived here
+// (form harvest, select-on-change, field-on-Enter, standalone CheckboxNode,
+// TabsNode, TableNode sort/filter/pagination/selection, ButtonNode pre-baked
+// context) collapse to one pattern: read via sa.read(bind); write via
+// sa.write(bind, value); dispatch { name }. Drafts ARE state. File-input
+// persistence keeps a fileRegistry for the binary side channel; the picked
+// file also lands in state as {filename, size}. Focus/caret/scroll
+// preservation continue to operate on the DOM.
 function legacyCopy(text) {
     try {
         const ta = document.createElement("textarea");
@@ -14,24 +26,33 @@ function legacyCopy(text) {
         return false;
     }
 }
+/**
+ * No-op StateAccess fallback for callers that mount the adapter without a
+ * live shell (theme-modifier tests, conformance fixture walks, etc.). Reads
+ * return undefined; writes are dropped. This keeps the static-tree test
+ * surface intact while the bind-path contract is mandatory for real apps.
+ */
+const noopStateAccess = {
+    read: () => undefined,
+    write: () => { },
+};
 export class BrowserAdapter {
     container;
     fileRegistry = new Map();
+    sa = noopStateAccess;
     constructor(container) {
         this.container = container;
     }
-    render(vm, onAction) {
+    render(vm, onAction, stateAccess) {
+        this.sa = stateAccess ?? noopStateAccess;
         const active = document.activeElement;
         const focusId = active?.id || null;
         const selStart = active?.selectionStart ?? null;
         const selEnd = active?.selectionEnd ?? null;
         // 0.7.1 (#7) — snapshot the WINDOW scroll position alongside element-level
         // scroll. Without this, an action-driven re-render rebuilds the entire
-        // subtree and the viewport jumps (to top, or wherever HTMLElement.focus()
-        // scrolled the restored-focus element into view). Same preservation
-        // contract as element scroll: preserve unless the server explicitly
-        // navigates (a redirect IS a navigation, so it correctly does NOT
-        // round-trip through render — it goes through navigate()).
+        // subtree and the viewport jumps. Same preservation contract as before;
+        // unchanged by the Phase 6 rewrite.
         const winScrollX = window.scrollX;
         const winScrollY = window.scrollY;
         const scrollMap = new Map();
@@ -39,30 +60,17 @@ export class BrowserAdapter {
             if (el.scrollTop !== 0 || el.scrollLeft !== 0)
                 scrollMap.set(el.id, { top: el.scrollTop, left: el.scrollLeft });
         });
-        const draftValues = new Map();
-        this.container.querySelectorAll("input:not([type=checkbox]):not([type=hidden]):not([type=file]), textarea").forEach(el => { if (el.name)
-            draftValues.set(el.name, el.value); });
         this.container.innerHTML = "";
         this.node(vm, this.container, onAction);
-        if (draftValues.size > 0) {
-            this.container.querySelectorAll("input:not([type=checkbox]):not([type=hidden]):not([type=file]), textarea").forEach(el => {
-                if (el.name && !el.value && draftValues.has(el.name))
-                    el.value = draftValues.get(el.name);
-            });
-        }
         if (focusId) {
             const el = this.container.querySelector(`#${CSS.escape(focusId)}`);
             if (el) {
-                // 0.7.1 (#7) — preventScroll stops focus() from yanking the viewport
-                // to the focused element. The window-scroll restore below still
-                // overrides any scroll that snuck in, but preventing the scroll in
-                // the first place is the cleaner contract.
                 el.focus({ preventScroll: true });
                 if (selStart !== null && selEnd !== null) {
                     try {
                         el.setSelectionRange(selStart, selEnd);
                     }
-                    catch { }
+                    catch { /* nothing */ }
                 }
             }
         }
@@ -73,9 +81,6 @@ export class BrowserAdapter {
                 el.scrollLeft = left;
             }
         });
-        // 0.7.1 (#7) — restore the window scroll LAST so any defensive
-        // browser behavior earlier in this method (e.g. a future element
-        // bringing itself into view) gets overridden by the snapshot.
         window.scrollTo(winScrollX, winScrollY);
     }
     navigate(url) {
@@ -85,9 +90,6 @@ export class BrowserAdapter {
         const store = scope === "session" ? sessionStorage : localStorage;
         store.setItem(key, value);
     }
-    /** Save an authenticated-download blob via the browser's native Save-As.
-     *  contentType is informational — the Blob's own .type takes precedence in
-     *  browsers. We accept the arg for adapter symmetry (other adapters use it). */
     saveFile(data, filename, _contentType) {
         const url = URL.createObjectURL(data);
         try {
@@ -100,23 +102,16 @@ export class BrowserAdapter {
             a.remove();
         }
         finally {
-            // Revoke async so the browser has time to start the download. The 0ms
-            // setTimeout is the established pattern (Chromium/Firefox/Safari).
             setTimeout(() => URL.revokeObjectURL(url), 0);
         }
     }
-    /** 0.14.0 — install / clear the browser's `beforeunload` guard. The shell
-     *  calls this on every response with `response.preventUnload ?? false`, so
-     *  the lock-and-clear cycle is just "server sets preventUnload:true while
-     *  work is pending, omits it (or sets false) when done." Idempotent. */
+    setBusy(active) {
+        this.container.classList.toggle("vms-busy", active);
+    }
     unloadHandler = null;
     setPreventUnload(active) {
         if (active && this.unloadHandler == null) {
             this.unloadHandler = (e) => {
-                // Two signals because browsers historically disagreed on which they
-                // honor; modern Chromium/Firefox honor preventDefault, older Safari
-                // and ancient browsers look at returnValue. The dialog text itself is
-                // browser-controlled ("Leave site?…") and cannot be customized.
                 e.preventDefault();
                 e.returnValue = "";
             };
@@ -130,70 +125,40 @@ export class BrowserAdapter {
     async transport(input, init, hooks) {
         const onUploadProgress = hooks?.onUploadProgress;
         if (!onUploadProgress) {
-            // No progress requested → identical to the core fetch path (D-02 fallback parity).
             return fetch(input, init);
         }
         return new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
-            // IN-01: this seam only exists to carry a body+files action request, so
-            // a method-less init is non-sensical. dispatch() (the sole caller) always
-            // passes "POST"; default to "POST" (not "GET") so a future caller bug
-            // never silently produces a body-bearing GET.
             xhr.open(init.method ?? "POST", input);
-            // WR-02: every header dispatch() builds in `init.headers` (Accept +
-            // getRequestHeaders()) is applied here, so the XHR path's request
-            // headers are byte-identical to the fetch path's. Scope note: this
-            // seam is same-origin only. The fetch fallback sends cookies on
-            // same-origin requests via its default `credentials: "same-origin"`;
-            // XHR sends same-origin cookies without `withCredentials`, so the
-            // common (same-origin `actionEndpoint`) case matches fetch exactly.
-            // Cross-origin action endpoints are out of scope for this transport.
             for (const [k, v] of Object.entries(init.headers ?? {})) {
                 xhr.setRequestHeader(k, v);
             }
-            let knownTotal = 0; // last computable total (0 = never computable)
-            let lastLoaded = 0; // last reported bytes sent
+            let knownTotal = 0;
+            let lastLoaded = 0;
             xhr.upload.onprogress = (e) => {
                 lastLoaded = e.loaded;
                 if (e.lengthComputable) {
                     knownTotal = e.total;
-                    onUploadProgress(e.loaded, e.total); // D-05 in-flight, computable
+                    onUploadProgress(e.loaded, e.total);
                 }
                 else {
-                    onUploadProgress(e.loaded, 0); // D-05 indeterminate sentinel (0)
+                    onUploadProgress(e.loaded, 0);
                 }
             };
             xhr.onload = () => {
-                // D-05 terminal emission: mirror whichever value was being reported.
-                // Known total → (total, total); indeterminate → (finalLoaded, finalLoaded).
-                // NEVER (0,0) once any progress event has fired; a body that produces
-                // no progress event (e.g. a zero-byte upload, or a transport that
-                // completes before the browser emits any upload progress) legitimately
-                // terminates at (0,0), which the documented `total > 0` consumer guard
-                // (MIGRATION.md 5b) handles.
                 if (knownTotal > 0)
                     onUploadProgress(knownTotal, knownTotal);
                 else
                     onUploadProgress(lastLoaded, lastLoaded);
-                // D-08: status 0 means a network-level failure (CORS rejection / blocked
-                // request) where onload fired but onerror did not. The Fetch Response
-                // constructor throws RangeError for status 0, and that throw would land
-                // OUTSIDE the Promise executor (never settling it → dispatch() hangs).
-                // Reject instead so dispatch()'s try/catch routes it to onError —
-                // byte-identical to fetch, which rejects on CORS/network failure.
                 if (xhr.status === 0) {
                     reject(new Error(`Transport request to ${input} failed (status 0)`));
                     return;
                 }
-                // D-08: resolve a real Response so dispatch()'s res.ok / await res.json()
-                // / processResponse() is byte-identical to the fetch path.
                 resolve(new Response(xhr.responseText, {
                     status: xhr.status,
                     statusText: xhr.statusText,
                 }));
             };
-            // D-07: error / timeout / abort → reject so dispatch()'s existing
-            // try/catch routes it to onError exactly like a failed fetch.
             xhr.onerror = () => reject(new Error(`Transport request to ${input} failed`));
             xhr.ontimeout = () => reject(new Error(`Transport request to ${input} timed out`));
             xhr.onabort = () => reject(new Error(`Transport request to ${input} aborted`));
@@ -226,10 +191,7 @@ export class BrowserAdapter {
     }
     page(n, parent, on) {
         const el = document.createElement("div");
-        el.className = `vms-page${n.density === "compact" ? " vms-page--compact" : ""}${n.layout && n.layout !== "stack" ? ` vms-page--${n.layout}` : ""}${
-        // 0.7.0 (#13) — width override: "wide" or "full" opt-in via a closed
-        // union. Omitted = no modifier class (existing 1080px cap holds).
-        n.width ? ` vms-page--${n.width}` : ""}`;
+        el.className = `vms-page${n.density === "compact" ? " vms-page--compact" : ""}${n.layout && n.layout !== "stack" ? ` vms-page--${n.layout}` : ""}${n.width ? ` vms-page--${n.width}` : ""}`;
         if (n.title) {
             const h = document.createElement("h1");
             h.className = "vms-page__title";
@@ -267,45 +229,25 @@ export class BrowserAdapter {
         this.kids(n.children, li, on);
         parent.appendChild(li);
     }
+    /** FormNode — no harvest. Field values live in state via their bind paths;
+     *  submit dispatches just `{name}`. File inputs are walked for binaries to
+     *  attach to action.files (multipart side channel). */
     form(n, parent, on) {
         const form = document.createElement("form");
         form.className = `vms-form${n.layout && n.layout !== "stack" ? ` vms-form--${n.layout}` : ""}`;
         form.noValidate = true;
         this.kids(n.children, form, on);
-        // 0.10.0 (#15) — harvest this form's current field values, merge into the
-        // given action's context, and dispatch. Factored out of the submit
-        // handler so both the default submit AND each buttons[] entry can call it
-        // with a DIFFERENT action carrying the SAME live field values.
-        const harvest = (base) => {
-            const ctx = { ...(base.context ?? {}) };
+        const dispatchWithFiles = (action) => {
             const files = {};
-            form.querySelectorAll("input:not([type=checkbox]):not([type=file]), textarea").forEach(el => { if (el.name)
-                ctx[el.name] = el.value; });
-            // Form-collected checkboxes (FieldNode inputType="checkbox").
-            // CheckboxNode renders with .vms-checkbox__input and is excluded so its
-            // immediate-dispatch path stays the only way it talks to the server.
-            form.querySelectorAll("input.vms-field__input[type=checkbox]").forEach(el => { if (el.name)
-                ctx[el.name] = el.checked; });
-            form.querySelectorAll("select:not([multiple])").forEach(sel => {
-                if (sel.name)
-                    ctx[sel.name] = sel.value;
-            });
-            form.querySelectorAll("select[multiple]").forEach(sel => {
-                if (sel.name)
-                    ctx[sel.name] = Array.from(sel.selectedOptions).map(o => o.value).join(",");
-            });
             form.querySelectorAll("input[type=file]").forEach(inp => {
                 if (inp.name && inp.files?.[0])
                     files[inp.name] = inp.files[0];
             });
-            const action = { name: base.name, context: ctx };
+            const ev = { name: action.name };
             if (Object.keys(files).length > 0)
-                action.files = files;
-            on(action);
+                ev.files = files;
+            on(ev);
         };
-        // Default submit button + Enter-to-submit, only when submitAction is set.
-        // (0.10.0: submitAction is now optional — a buttons[]-only form renders
-        // no default button, and Enter does not submit at the form level.)
         if (n.submitAction) {
             const submitAction = n.submitAction;
             const submit = document.createElement("button");
@@ -315,39 +257,42 @@ export class BrowserAdapter {
             form.appendChild(submit);
             form.addEventListener("submit", (e) => {
                 e.preventDefault();
-                harvest(submitAction);
+                dispatchWithFiles(submitAction);
             });
         }
         else {
-            // No default submit — still neutralize implicit Enter submission so a
+            // No default submit — neutralize implicit Enter submission so a
             // single-field buttons[]-only form doesn't reload via native submit.
             form.addEventListener("submit", (e) => e.preventDefault());
         }
-        // 0.10.0 (#15) — multi-action buttons. Each renders through the normal
-        // button() path (so variant + pendingLabel work) but its onAction is
-        // wrapped to harvest the form first. We render them in a footer row so
-        // they group like the default submit.
         if (n.buttons && n.buttons.length > 0) {
             const row = document.createElement("div");
             row.className = "vms-form__buttons";
-            const harvestOn = (action) => harvest(action);
+            const buttonOn = (action) => dispatchWithFiles(action);
             for (const btn of n.buttons)
-                this.button(btn, row, harvestOn);
+                this.button(btn, row, buttonOn);
             form.appendChild(row);
         }
         parent.appendChild(form);
     }
+    /** FieldNode — reads value from `sa.read(bind)`; writes back on input/change.
+     *  When `action` is set, it fires on Enter (text-like) or change (select) —
+     *  the new value is already in state by that point. */
     field(n, parent, on) {
+        const stateValue = this.sa.read(n.bind);
         if (n.inputType === "hidden") {
+            // Hidden fields don't write back — server is authoritative for hidden.
             const inp = document.createElement("input");
             inp.type = "hidden";
             inp.name = n.name;
-            if (n.value)
-                inp.value = n.value;
+            inp.value = stateValue == null ? "" : String(stateValue);
             parent.appendChild(inp);
             return;
         }
         if (n.inputType === "checkbox") {
+            // FieldNode of type checkbox — used as a form-collected checkbox (the
+            // standalone CheckboxNode is the immediate-dispatch variant). Bind path
+            // holds a boolean.
             const wrapper = document.createElement("div");
             wrapper.className = "vms-field vms-field--checkbox";
             const inp = document.createElement("input");
@@ -355,7 +300,10 @@ export class BrowserAdapter {
             inp.className = "vms-field__input";
             inp.id = `vms-${n.name}`;
             inp.name = n.name;
-            inp.checked = !!n.value && n.value !== "false" && n.value !== "0";
+            inp.checked = Boolean(stateValue);
+            inp.addEventListener("change", () => {
+                this.sa.write(n.bind, inp.checked);
+            });
             wrapper.appendChild(inp);
             if (n.label) {
                 const lbl = document.createElement("label");
@@ -382,21 +330,29 @@ export class BrowserAdapter {
             sel.id = `vms-${n.name}`;
             sel.name = n.name;
             sel.multiple = n.inputType === "select-multiple";
+            const isMulti = n.inputType === "select-multiple";
+            const selectedSet = isMulti && Array.isArray(stateValue)
+                ? new Set(stateValue.map(String))
+                : new Set();
+            const selectedSingle = !isMulti && stateValue != null ? String(stateValue) : "";
             (n.options ?? []).forEach(opt => {
                 const o = document.createElement("option");
                 o.value = opt.value;
                 o.textContent = opt.label;
-                o.selected = n.inputType === "select-multiple"
-                    ? (n.value ?? "").split(",").map(s => s.trim()).includes(opt.value)
-                    : opt.value === n.value;
+                o.selected = isMulti ? selectedSet.has(opt.value) : opt.value === selectedSingle;
                 sel.appendChild(o);
             });
-            if (n.action) {
-                const action = n.action;
-                sel.addEventListener("change", () => {
-                    on({ name: action.name, context: { ...(action.context ?? {}), [n.name]: sel.value } });
-                });
-            }
+            sel.addEventListener("change", () => {
+                if (isMulti) {
+                    const arr = Array.from(sel.selectedOptions).map(o => o.value);
+                    this.sa.write(n.bind, arr);
+                }
+                else {
+                    this.sa.write(n.bind, sel.value);
+                }
+                if (n.action)
+                    on({ name: n.action.name });
+            });
             wrapper.appendChild(sel);
         }
         else if (n.inputType === "file") {
@@ -405,6 +361,7 @@ export class BrowserAdapter {
             inp.className = "vms-field__input";
             inp.id = `vms-${n.name}`;
             inp.name = n.name;
+            // File-input persistence: re-apply any registered file to the new node.
             const existingFile = this.fileRegistry.get(n.name);
             if (existingFile) {
                 try {
@@ -412,14 +369,21 @@ export class BrowserAdapter {
                     dt.items.add(existingFile);
                     inp.files = dt.files;
                 }
-                catch { }
+                catch { /* nothing */ }
             }
             inp.addEventListener("change", () => {
                 const file = inp.files?.[0];
-                if (file)
+                if (file) {
                     this.fileRegistry.set(n.name, file);
-                else
+                    // Per Phase-6 decision: the picked file is visible in state as a
+                    // serialization-safe placeholder; the binary travels on the
+                    // multipart side channel.
+                    this.sa.write(n.bind, { filename: file.name, size: file.size });
+                }
+                else {
                     this.fileRegistry.delete(n.name);
+                    this.sa.write(n.bind, null);
+                }
             });
             wrapper.appendChild(inp);
         }
@@ -430,10 +394,10 @@ export class BrowserAdapter {
             ta.name = n.name;
             if (n.placeholder)
                 ta.placeholder = n.placeholder;
-            if (n.value)
-                ta.value = n.value;
+            ta.value = stateValue == null ? "" : String(stateValue);
             if (n.required)
                 ta.required = true;
+            ta.addEventListener("input", () => { this.sa.write(n.bind, ta.value); });
             wrapper.appendChild(ta);
         }
         else if (n.inputType === "code") {
@@ -453,10 +417,10 @@ export class BrowserAdapter {
             ta.setAttribute("autocorrect", "off");
             if (n.placeholder)
                 ta.placeholder = n.placeholder;
-            if (n.value)
-                ta.value = n.value;
+            ta.value = stateValue == null ? "" : String(stateValue);
             if (n.required)
                 ta.required = true;
+            ta.addEventListener("input", () => { this.sa.write(n.bind, ta.value); });
             ta.addEventListener("keydown", (e) => {
                 if (e.key === "Tab") {
                     e.preventDefault();
@@ -464,6 +428,7 @@ export class BrowserAdapter {
                     const end = ta.selectionEnd ?? 0;
                     ta.value = ta.value.slice(0, start) + "\t" + ta.value.slice(end);
                     ta.selectionStart = ta.selectionEnd = start + 1;
+                    this.sa.write(n.bind, ta.value);
                 }
             });
             wrapper.appendChild(ta);
@@ -476,16 +441,20 @@ export class BrowserAdapter {
             inp.name = n.name;
             if (n.placeholder)
                 inp.placeholder = n.placeholder;
-            if (n.value)
-                inp.value = n.value;
+            inp.value = stateValue == null ? "" : String(stateValue);
             if (n.required)
                 inp.required = true;
+            inp.addEventListener("input", () => { this.sa.write(n.bind, inp.value); });
             if (n.action) {
                 const action = n.action;
                 inp.addEventListener("keydown", (e) => {
                     if (e.key === "Enter") {
                         e.preventDefault();
-                        on({ name: action.name, context: { ...(action.context ?? {}), [n.name]: inp.value } });
+                        // Belt-and-suspenders: flush the latest value to state before
+                        // dispatching, in case the browser hasn't fired `input` yet
+                        // (e.g. an autofill that lands then submits).
+                        this.sa.write(n.bind, inp.value);
+                        on({ name: action.name });
                     }
                 });
             }
@@ -493,6 +462,8 @@ export class BrowserAdapter {
         }
         parent.appendChild(wrapper);
     }
+    /** CheckboxNode (standalone, immediate-dispatch) — bound boolean; on toggle,
+     *  write to state then dispatch the action name (if any). */
     checkbox(n, parent, on) {
         const lbl = document.createElement("label");
         lbl.className = "vms-checkbox";
@@ -500,7 +471,7 @@ export class BrowserAdapter {
         inp.type = "checkbox";
         inp.className = "vms-checkbox__input";
         inp.name = n.name;
-        inp.checked = n.checked;
+        inp.checked = Boolean(this.sa.read(n.bind));
         const mark = document.createElement("span");
         mark.className = "vms-checkbox__mark";
         lbl.appendChild(inp);
@@ -511,12 +482,11 @@ export class BrowserAdapter {
             span.textContent = n.label;
             lbl.appendChild(span);
         }
-        if (n.action) {
-            const action = n.action;
-            inp.addEventListener("change", () => {
-                on({ name: action.name, context: { ...(action.context ?? {}), checked: inp.checked } });
-            });
-        }
+        inp.addEventListener("change", () => {
+            this.sa.write(n.bind, inp.checked);
+            if (n.action)
+                on({ name: n.action.name });
+        });
         parent.appendChild(lbl);
     }
     button(n, parent, on) {
@@ -525,13 +495,10 @@ export class BrowserAdapter {
         btn.className = `vms-button${n.variant ? ` vms-button--${n.variant}` : ""}`;
         btn.textContent = n.label;
         btn.addEventListener("click", () => {
-            // 0.8.0 (#11) — pendingLabel: instant client-side feedback. Swap text +
-            // add .vms-button--pending BEFORE handing off to the dispatcher. On
+            // pendingLabel: instant client-side feedback. Swap text + add
+            // .vms-button--pending BEFORE handing off to the dispatcher. On
             // success the next render replaces the button entirely. On dispatch
-            // error, the shell's dispatch() catch re-renders this.currentVm so
-            // the original label snaps back automatically — no per-button cleanup
-            // wiring needed in the adapter. Pure-client ephemeral state; never
-            // round-trips through the wire.
+            // error, the shell re-renders so the original label snaps back.
             if (n.pendingLabel) {
                 btn.textContent = n.pendingLabel;
                 btn.classList.add("vms-button--pending");
@@ -575,6 +542,8 @@ export class BrowserAdapter {
         });
         parent.appendChild(bar);
     }
+    /** TabsNode — on click, write tab.value to state at node.bind, then dispatch
+     *  the tab's own action name. */
     tabs(n, parent, on) {
         const nav = document.createElement("nav");
         nav.className = "vms-tabs";
@@ -586,7 +555,8 @@ export class BrowserAdapter {
             btn.setAttribute("role", "tab");
             btn.setAttribute("aria-selected", String(tab.value === n.selected));
             btn.addEventListener("click", () => {
-                on({ name: n.action.name, context: { ...(n.action.context ?? {}), value: tab.value } });
+                this.sa.write(n.bind, tab.value);
+                on({ name: tab.action.name });
             });
             nav.appendChild(btn);
         });
@@ -652,6 +622,12 @@ export class BrowserAdapter {
         backdrop.appendChild(modal);
         parent.appendChild(backdrop);
     }
+    /** TableNode — sort writes {column, direction} to sortBind then dispatches
+     *  sortActions[col.key]; filter inputs are bound to filterBinds[col.key],
+     *  every keystroke writes, Enter dispatches filterAction; pagination
+     *  prev/next write the target page to paginationBind then dispatch
+     *  prevAction/nextAction. Per-row buttons are plain ButtonNodes. Selection
+     *  is no longer a framework concept. */
     table(n, parent, on) {
         const wrapper = document.createElement("div");
         wrapper.className = "vms-table-wrapper";
@@ -659,41 +635,13 @@ export class BrowserAdapter {
         table.className = "vms-table";
         const thead = document.createElement("thead");
         const headerRow = document.createElement("tr");
-        // Selection: a leading checkbox column. The header box is a select-all over
-        // the rows CURRENTLY rendered (the current page) — never unloaded rows.
-        const sel = n.selection;
-        const selectedSet = sel ? new Set(sel.selectedIds) : null;
-        if (sel) {
-            const th = document.createElement("th");
-            th.className = "vms-table__th vms-table__th--select";
-            const allOnPage = n.rows.length > 0 && n.rows.every(r => r.id != null && selectedSet.has(r.id));
-            const someOnPage = n.rows.some(r => r.id != null && selectedSet.has(r.id));
-            const box = document.createElement("input");
-            box.type = "checkbox";
-            box.className = "vms-table__select vms-table__select--all";
-            box.checked = allOnPage;
-            box.indeterminate = someOnPage && !allOnPage;
-            box.addEventListener("change", () => {
-                // Toggle every row checkbox + class in this table to match the header.
-                // No dispatch — selection is purely DOM-local; bulk actions harvest the
-                // checked rows when a `selection.buttons[]` entry is clicked.
-                const want = box.checked;
-                table.querySelectorAll("tbody input.vms-table__select").forEach(rowBox => {
-                    if (rowBox.disabled)
-                        return;
-                    rowBox.checked = want;
-                    const tr = rowBox.closest(".vms-table__row");
-                    if (tr)
-                        tr.classList.toggle("vms-table__row--selected", want);
-                });
-            });
-            th.appendChild(box);
-            headerRow.appendChild(th);
-        }
+        const sortIntent = (n.sortBind != null ? this.sa.read(n.sortBind) : null);
+        const sortedCol = sortIntent?.column;
+        const sortedDir = sortIntent?.direction;
         n.columns.forEach(col => {
             const th = document.createElement("th");
-            const isSorted = col.key === n.sortColumn;
-            const dir = isSorted ? (n.sortDirection ?? "asc") : null;
+            const isSorted = col.key === sortedCol;
+            const dir = isSorted ? (sortedDir ?? "asc") : null;
             let classes = "vms-table__th";
             if (col.sortable)
                 classes += " vms-table__th--sortable";
@@ -703,11 +651,17 @@ export class BrowserAdapter {
                 classes += " vms-table__th--desc";
             th.className = classes;
             th.textContent = col.label;
-            if (col.sortable && n.sortAction) {
-                const sortAction = n.sortAction;
+            const sortAction = n.sortActions?.[col.key];
+            if (col.sortable && sortAction && n.sortBind != null) {
+                const sortBind = n.sortBind;
                 th.addEventListener("click", () => {
-                    const nextDir = isSorted && n.sortDirection === "asc" ? "desc" : "asc";
-                    on({ name: sortAction.name, context: { ...(sortAction.context ?? {}), column: col.key, direction: nextDir } });
+                    // Read current sort intent at click time (not render time): if no
+                    // re-render has happened between clicks, the closure-captured
+                    // sortedDir would be stale.
+                    const cur = this.sa.read(sortBind);
+                    const nextDir = cur?.column === col.key && cur?.direction === "asc" ? "desc" : "asc";
+                    this.sa.write(sortBind, { column: col.key, direction: nextDir });
+                    on({ name: sortAction.name });
                 });
             }
             headerRow.appendChild(th);
@@ -718,8 +672,6 @@ export class BrowserAdapter {
             const filterAction = n.filterAction;
             const filterRow = document.createElement("tr");
             filterRow.className = "vms-table__filter-row";
-            if (sel)
-                filterRow.appendChild(document.createElement("th")); // align under the select column
             n.columns.forEach(col => {
                 const th = document.createElement("th");
                 if (col.filterable) {
@@ -727,15 +679,20 @@ export class BrowserAdapter {
                     inp.type = "text";
                     inp.className = "vms-table__filter-input";
                     inp.dataset.col = col.key;
-                    inp.value = col.filterValue ?? "";
+                    const bindPath = n.filterBinds?.[col.key];
+                    const bound = bindPath != null ? this.sa.read(bindPath) : undefined;
+                    inp.value = bound != null
+                        ? String(bound)
+                        : (col.filterValue ?? "");
                     inp.placeholder = `Filter…`;
+                    if (bindPath != null) {
+                        inp.addEventListener("input", () => { this.sa.write(bindPath, inp.value); });
+                    }
                     inp.addEventListener("keydown", (e) => {
                         if (e.key === "Enter") {
-                            const filters = {};
-                            filterRow.querySelectorAll("[data-col]").forEach(el => {
-                                filters[el.dataset.col] = el.value;
-                            });
-                            on({ name: filterAction.name, context: { ...(filterAction.context ?? {}), column: col.key, value: inp.value, filters } });
+                            if (bindPath != null)
+                                this.sa.write(bindPath, inp.value);
+                            on({ name: filterAction.name });
                         }
                     });
                     th.appendChild(inp);
@@ -751,53 +708,9 @@ export class BrowserAdapter {
             let rowClass = "vms-table__row";
             if (row.variant)
                 rowClass += ` vms-table__row--${row.variant}`;
-            if (row.action)
-                rowClass += " vms-table__row--clickable";
-            const isSelected = sel != null && row.id != null && selectedSet.has(row.id);
-            if (isSelected)
-                rowClass += " vms-table__row--selected";
             tr.className = rowClass;
             if (row.id)
                 tr.dataset.id = row.id;
-            if (row.action) {
-                const rowAction = row.action;
-                tr.addEventListener("click", () => on(rowAction));
-            }
-            if (sel) {
-                const td = document.createElement("td");
-                td.className = "vms-table__td vms-table__td--select";
-                // A click in the checkbox cell must not also fire the row's click action.
-                td.addEventListener("click", (e) => e.stopPropagation());
-                const box = document.createElement("input");
-                box.type = "checkbox";
-                box.className = "vms-table__select";
-                box.checked = isSelected;
-                if (row.id != null) {
-                    const rowId = row.id;
-                    // data-id is what selection.buttons[] harvest reads on click.
-                    box.dataset.id = rowId;
-                    box.addEventListener("change", () => {
-                        // Flip the row class to mirror the box, then reconcile the header
-                        // select-all (could now be all / some / none). No dispatch — bulk
-                        // actions read the DOM via the selection.buttons[] harvest.
-                        tr.classList.toggle("vms-table__row--selected", box.checked);
-                        const headerBox = table.querySelector("thead input.vms-table__select--all");
-                        if (headerBox) {
-                            const all = table.querySelectorAll("tbody input.vms-table__select:not(:disabled)");
-                            let checked = 0;
-                            all.forEach(b => { if (b.checked)
-                                checked++; });
-                            headerBox.checked = all.length > 0 && checked === all.length;
-                            headerBox.indeterminate = checked > 0 && checked < all.length;
-                        }
-                    });
-                }
-                else {
-                    box.disabled = true; // selection addresses rows by id; a row without one can't be selected
-                }
-                td.appendChild(box);
-                tr.appendChild(td);
-            }
             n.columns.forEach(col => {
                 const td = document.createElement("td");
                 td.className = "vms-table__td";
@@ -818,29 +731,18 @@ export class BrowserAdapter {
                 }
                 tr.appendChild(td);
             });
+            // Per-row buttons render as plain ButtonNodes in a trailing actions cell.
+            if (row.actions && row.actions.length > 0) {
+                const td = document.createElement("td");
+                td.className = "vms-table__td vms-table__td--actions";
+                for (const btn of row.actions)
+                    this.button(btn, td, on);
+                tr.appendChild(td);
+            }
             tbody.appendChild(tr);
         });
         table.appendChild(tbody);
         wrapper.appendChild(table);
-        // 0.13.0 — bulk-action toolbar rendered ABOVE the table. Each button's
-        // click harvests the table's currently-checked row ids and merges them as
-        // `selectedIds` into the action's context. Works with both server-truth
-        // mode (the DOM mirrors selectedIds so the harvest matches state) and
-        // local mode (the DOM is the only source of selection truth).
-        if (sel?.buttons && sel.buttons.length > 0) {
-            const toolbar = document.createElement("div");
-            toolbar.className = "vms-table__bulk-actions";
-            const harvest = (action) => {
-                const ids = [];
-                table.querySelectorAll("tbody input.vms-table__select:checked").forEach(b => {
-                    if (b.dataset.id)
-                        ids.push(b.dataset.id);
-                });
-                on({ name: action.name, context: { ...(action.context ?? {}), selectedIds: ids } });
-            };
-            sel.buttons.forEach(btn => this.button(btn, toolbar, harvest));
-            wrapper.insertBefore(toolbar, table);
-        }
         if (n.pagination) {
             const pg = n.pagination;
             const footer = document.createElement("div");
@@ -852,19 +754,26 @@ export class BrowserAdapter {
             range.className = "vms-table__pagination-range";
             range.textContent = `${from}–${to} of ${pg.totalRows}`;
             footer.appendChild(range);
-            const pgAction = pg.action;
-            const mkBtn = (label, targetPage, disabled) => {
+            const paginationBind = n.paginationBind;
+            const mkBtn = (label, targetPage, action, disabled) => {
                 const b = document.createElement("button");
                 b.type = "button";
                 b.className = "vms-button vms-button--secondary vms-table__pagination-btn";
                 b.textContent = label;
                 b.disabled = disabled;
-                if (!disabled)
-                    b.addEventListener("click", () => on({ name: pgAction.name, context: { ...(pgAction.context ?? {}), page: targetPage } }));
+                if (!disabled && action) {
+                    b.addEventListener("click", () => {
+                        if (paginationBind != null)
+                            this.sa.write(paginationBind, targetPage);
+                        on({ name: action.name });
+                    });
+                }
                 return b;
             };
-            footer.appendChild(mkBtn("‹ Prev", pg.page - 1, pg.page <= 1));
-            footer.appendChild(mkBtn("Next ›", pg.page + 1, pg.page >= totalPages));
+            const prevDisabled = pg.page <= 1 || pg.prevAction == null;
+            const nextDisabled = pg.page >= totalPages || pg.nextAction == null;
+            footer.appendChild(mkBtn("‹ Prev", pg.page - 1, pg.prevAction, prevDisabled));
+            footer.appendChild(mkBtn("Next ›", pg.page + 1, pg.nextAction, nextDisabled));
             wrapper.appendChild(footer);
         }
         parent.appendChild(wrapper);
@@ -872,9 +781,6 @@ export class BrowserAdapter {
     copyButton(n, parent) {
         const btn = document.createElement("button");
         btn.type = "button";
-        // 0.9.0 (#14): variant modifier class, mirroring button() exactly. The
-        // existing .vms-button--{primary,secondary,danger} CSS rules apply
-        // automatically — no new style surface.
         btn.className = `vms-button${n.variant ? ` vms-button--${n.variant}` : ""}`;
         btn.textContent = n.label ?? "Copy";
         btn.addEventListener("click", () => {
@@ -884,21 +790,17 @@ export class BrowserAdapter {
                     btn.textContent = n.copiedLabel ?? "Copied!";
                     setTimeout(() => { btn.textContent = n.label ?? "Copy"; }, 1500);
                 }).catch(() => {
-                    // primary failed — try legacy execCommand fallback
                     if (legacyCopy(n.text)) {
                         btn.textContent = n.copiedLabel ?? "Copied!";
                         setTimeout(() => { btn.textContent = n.label ?? "Copy"; }, 1500);
                     }
-                    // both paths failed: silent, no confirmation
                 });
             }
             else {
-                // navigator.clipboard absent — try legacy
                 if (legacyCopy(n.text)) {
                     btn.textContent = n.copiedLabel ?? "Copied!";
                     setTimeout(() => { btn.textContent = n.label ?? "Copy"; }, 1500);
                 }
-                // else: silent
             }
         });
         parent.appendChild(btn);