@ashley-shrok/viewmodel-shell 1.0.1 → 1.1.0

package/dist/browser.d.ts

@@ -49,8 +49,14 @@ export declare class BrowserAdapter implements Adapter {
      *  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. */
+     *  prevAction/nextAction. Per-row controls (row.actions[]) are a mix of
+     *  ButtonNode and CheckboxNode dispatched by entry.type. When row.action
+     *  is set, the entire <tr> becomes clickable + keyboard-activatable
+     *  (Enter / Space — Space preventDefaults page scroll) and exposes
+     *  role="button", tabindex=0, and an aria-label derived from cell text;
+     *  clicks on per-row controls or cell linkLabel anchors stopPropagation
+     *  so they don't also fire row.action. Selection is no longer a framework
+     *  concept. */
     private table;
     private copyButton;
 }

package/dist/browser.js

@@ -626,8 +626,14 @@ export class BrowserAdapter {
      *  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. */
+     *  prevAction/nextAction. Per-row controls (row.actions[]) are a mix of
+     *  ButtonNode and CheckboxNode dispatched by entry.type. When row.action
+     *  is set, the entire <tr> becomes clickable + keyboard-activatable
+     *  (Enter / Space — Space preventDefaults page scroll) and exposes
+     *  role="button", tabindex=0, and an aria-label derived from cell text;
+     *  clicks on per-row controls or cell linkLabel anchors stopPropagation
+     *  so they don't also fire row.action. Selection is no longer a framework
+     *  concept. */
     table(n, parent, on) {
         const wrapper = document.createElement("div");
         wrapper.className = "vms-table-wrapper";
@@ -708,9 +714,36 @@ 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";
             tr.className = rowClass;
             if (row.id)
                 tr.dataset.id = row.id;
+            // row.action — click-anywhere + keyboard + ARIA. Per-row controls and
+            // cell linkLabel anchors stopPropagation below so they don't double-fire.
+            if (row.action) {
+                const rowActionName = row.action.name;
+                tr.tabIndex = 0;
+                tr.setAttribute("role", "button");
+                const labelParts = Object.values(row.cells)
+                    .filter(v => v && v.trim())
+                    .map(v => v.trim());
+                const ariaLabel = labelParts.length > 0
+                    ? labelParts.join(" · ")
+                    : (row.id ? `Row ${row.id}` : "");
+                if (ariaLabel)
+                    tr.setAttribute("aria-label", ariaLabel);
+                tr.addEventListener("click", () => { on({ name: rowActionName }); });
+                tr.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter") {
+                        on({ name: rowActionName });
+                    }
+                    else if (e.key === " " || e.key === "Spacebar") {
+                        e.preventDefault(); // suppress page scroll
+                        on({ name: rowActionName });
+                    }
+                });
+            }
             n.columns.forEach(col => {
                 const td = document.createElement("td");
                 td.className = "vms-table__td";
@@ -724,6 +757,9 @@ export class BrowserAdapter {
                         a.target = "_blank";
                         a.rel = "noopener noreferrer";
                     }
+                    if (row.action) {
+                        a.addEventListener("click", (e) => { e.stopPropagation(); });
+                    }
                     td.appendChild(a);
                 }
                 else {
@@ -731,12 +767,24 @@ export class BrowserAdapter {
                 }
                 tr.appendChild(td);
             });
-            // Per-row buttons render as plain ButtonNodes in a trailing actions cell.
+            // Per-row interactive controls — dispatch by entry.type so a CheckboxNode
+            // renders as a real <input type="checkbox"> rather than silently as an
+            // empty button. When row.action is set, swallow clicks on the actions td
+            // so toggling a per-row control doesn't ALSO fire the row action.
             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);
+                for (const entry of row.actions) {
+                    if (entry.type === "button")
+                        this.button(entry, td, on);
+                    else if (entry.type === "checkbox")
+                        this.checkbox(entry, td, on);
+                    // forward-compatible: unknown entry types no-op (the closed TS union
+                    // narrows; the runtime guard is for late-arriving wire shapes).
+                }
+                if (row.action) {
+                    td.addEventListener("click", (e) => { e.stopPropagation(); });
+                }
                 tr.appendChild(td);
             }
             tbody.appendChild(tr);

package/dist/index.d.ts

@@ -237,10 +237,22 @@ export interface TableColumn {
 export interface TableRow {
     id?: string;
     cells: Record<string, string>;
-    /** Per-row action buttons. Each is a full ButtonNode with its own unique
-     *  action name (e.g. `delete-row-42`, `close-ticket-42`) — per-row identity
-     *  is encoded in the name, not as a separate context payload. */
-    actions?: ButtonNode[];
+    /** Click-anywhere row dispatch primitive. When set, the renderer makes the
+     *  entire row clickable AND keyboard-activatable (Enter / Space — Space
+     *  preventDefaults page scroll) AND exposes accessibility (role="button",
+     *  tabindex=0, aria-label derived from cell text). Per-row identity is
+     *  encoded in the action name (e.g. `select-ticket-42`) — no context field,
+     *  consistent with the Phase 6 wire. Coexists with `actions[]`: clicking a
+     *  per-row button, checkbox, or cell linkLabel anchor does NOT also fire
+     *  `row.action` (the renderer stops propagation on those targets). */
+    action?: ActionEvent;
+    /** Per-row interactive controls rendered in a trailing actions cell. Each
+     *  entry is either a ButtonNode (its own unique action name encodes per-row
+     *  identity, e.g. `delete-row-42`) or a CheckboxNode (its own `bind` path
+     *  per row). The renderer dispatches by `entry.type` so both types render
+     *  correctly — a previous version typed this as `ButtonNode[]` and called
+     *  the button renderer blindly, silently dropping non-button entries. */
+    actions?: (ButtonNode | CheckboxNode)[];
     variant?: string;
 }
 export interface TablePagination {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "1.0.1",
+  "version": "1.1.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

@@ -605,6 +605,10 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 .vms-table__row:not(:last-child) .vms-table__td { border-bottom: 1px solid var(--vms-border); }
 .vms-table__row--clickable { cursor: pointer; }
 .vms-table__row--clickable:hover { background: var(--vms-surface); }
+.vms-table__row--clickable:focus-visible {
+  outline: 2px solid var(--vms-accent);
+  outline-offset: -2px;
+}
 /* Row status variants — tints derive from theme vars (color-mix), so a
    custom :root theme recolors them automatically; no app CSS, no literals. */
 .vms-table__row--done     { opacity: 0.6; }