@ashley-shrok/viewmodel-shell 6.3.0 → 6.4.0

package/dist/browser.js

@@ -3025,6 +3025,45 @@ export class BrowserAdapter {
         if (tableHasCheckboxes) {
             const selTh = document.createElement("th");
             selTh.className = "vms-table__th vms-table__th--select";
+            // Header "select all rendered rows" affordance. A pure client-side toggle
+            // over the leading-column checkboxes: it writes the SAME per-row binds the
+            // row checkboxes use, so the server learns the selection through the exact
+            // path it already knows — no new wire field, and agents (which set binds
+            // directly) never need it. Scope is deliberately "all RENDERED rows": under
+            // filter-narrow that equals all matches; under pagination it is the current
+            // page (selection accumulates via the round-tripped binds); over-cap /
+            // zero-match render no rows, so the control below simply is not drawn and
+            // can never claim to select rows that are not on screen. This re-adds ONLY
+            // the DOM toggle, never the per-toggle dispatch that got the old
+            // TableNode.selection seam removed in 0.15.0.
+            const rowCheckboxes = n.rows.flatMap(r => (r.actions ?? []).filter((e) => e.type === "checkbox"));
+            if (rowCheckboxes.length > 0) {
+                const lbl = document.createElement("label");
+                lbl.className = "vms-checkbox vms-table__select-all";
+                const inp = document.createElement("input");
+                inp.type = "checkbox";
+                inp.className = "vms-checkbox__input";
+                inp.setAttribute("aria-label", "Select all rows");
+                const states = rowCheckboxes.map(cb => Boolean(this.sa.read(cb.bind)));
+                const allChecked = states.every(Boolean);
+                inp.checked = allChecked;
+                inp.indeterminate = !allChecked && states.some(Boolean);
+                const mark = document.createElement("span");
+                mark.className = "vms-checkbox__mark";
+                inp.addEventListener("change", () => {
+                    const target = inp.checked;
+                    for (const cb of rowCheckboxes) {
+                        this.sa.write(cb.bind, target);
+                        const rowInp = document.getElementById(`vms-checkbox-${cb.name}`);
+                        if (rowInp)
+                            rowInp.checked = target;
+                    }
+                    inp.indeterminate = false;
+                });
+                lbl.appendChild(inp);
+                lbl.appendChild(mark);
+                selTh.appendChild(lbl);
+            }
             headerRow.appendChild(selTh);
         }
         const sortIntent = (n.sortBind != null ? this.sa.read(n.sortBind) : null);
@@ -3198,6 +3237,34 @@ export class BrowserAdapter {
         });
         table.appendChild(tbody);
         wrapper.appendChild(table);
+        // Visible-scoped bulk-action toolbar (n.selection). Rendered ABOVE the table.
+        // Each button, on click, harvests the currently-CHECKED, currently-RENDERED
+        // rows (by walking tbody for a checked leading-column checkbox and reading the
+        // row's data-id) and writes that id array to n.selection.harvestBind —
+        // OVERWRITING — before dispatching. So the server only ever sees rows the user
+        // can currently see; a row selected then filtered/paginated out of view is not
+        // harvested. This revives the old selection.buttons[] harvest (removed with the
+        // `context` wire in Phase 6), adapted to write a BIND instead of context. It
+        // adds NONE of the per-toggle dispatch that got the 0.15.0 selection.action
+        // seam removed — selection stays a pure client concern until a bulk click.
+        if (n.selection && n.selection.buttons.length > 0) {
+            const sel = n.selection;
+            const toolbar = document.createElement("div");
+            toolbar.className = "vms-table__bulk-actions";
+            const harvest = (action) => {
+                const ids = [];
+                tbody.querySelectorAll("tr").forEach(tr => {
+                    const box = tr.querySelector(".vms-table__td--select input.vms-checkbox__input");
+                    if (box?.checked && tr.dataset.id)
+                        ids.push(tr.dataset.id);
+                });
+                this.sa.write(sel.harvestBind, ids);
+                on({ name: action.name });
+            };
+            for (const btn of sel.buttons)
+                this.button(btn, toolbar, harvest);
+            wrapper.insertBefore(toolbar, table);
+        }
         if (n.pagination) {
             const pg = n.pagination;
             const footer = document.createElement("div");

package/dist/index.d.ts

@@ -868,6 +868,31 @@ export interface TableNode {
      *  filter dispatches reset `page` to 1 on the server side, since
      *  the row window changes underneath them. */
     pagination?: TablePagination;
+    /** Visible-scoped bulk-action toolbar (opt-in). When set, the adapter renders
+     *  `selection.buttons[]` ABOVE the table; each button, on click, harvests the
+     *  currently-CHECKED, currently-RENDERED row ids (from the leading-column
+     *  per-row checkboxes) and writes them — a `string[]` of `TableRow.id` — to
+     *  `selection.harvestBind`, OVERWRITING, before dispatching its own action.
+     *  The server reads that path to act, so a bulk action can only ever affect
+     *  rows the user can currently see: a row selected under one filter and then
+     *  filtered/paginated out of view is NOT harvested. This is the safe default
+     *  for the common case; an app that genuinely wants cross-page/persistent
+     *  selection simply ignores this block and reads its own bound `selectedIds`
+     *  map instead (the framework never introspects app state, so that escape
+     *  hatch is always open). Selectable rows must carry `TableRow.id`. */
+    selection?: TableSelection;
+}
+/** Visible-scoped bulk-action toolbar for a `TableNode` — see `TableNode.selection`. */
+export interface TableSelection {
+    /** Bulk-action buttons rendered above the table. On click, each harvests the
+     *  visible-checked row ids into `harvestBind` (overwriting) and dispatches its
+     *  own `action` — name-only, per the Phase-6 wire. Full ButtonNodes, so they
+     *  carry their own emphasis/tone/confirm/disabled. */
+    buttons: ButtonNode[];
+    /** State path the harvest writes the visible-checked row-id array (`string[]`)
+     *  to right before dispatch. The server reads THIS to act — not a per-row
+     *  `selectedIds` map — which is what makes the action visible-scoped. */
+    harvestBind: string;
 }
 export interface CopyButtonNode {
     type: "copy-button";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic — a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
   "type": "module",
   "license": "MIT",

package/styles/default.css

@@ -884,6 +884,14 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   border-left: none;
   transform: rotate(40deg);
 }
+.vms-checkbox__input:indeterminate + .vms-checkbox__mark { background: var(--vms-accent); border-color: var(--vms-accent); }
+.vms-checkbox__input:indeterminate + .vms-checkbox__mark::after {
+  content: '';
+  position: absolute;
+  left: 3px; top: 7px;
+  width: 10px; height: 0;
+  border-top: 2px solid #fff;
+}
 .vms-checkbox__label { margin-left: var(--vms-space-xs); font-size: var(--vms-text-base); }
 
 /* ── Buttons — three orthogonal axes: emphasis (fill) × tone (color) × size