@ashley-shrok/viewmodel-shell 1.0.1 → 1.2.0

package/dist/browser.d.ts

@@ -3,6 +3,8 @@ export declare class BrowserAdapter implements Adapter {
     private container;
     private fileRegistry;
     private sa;
+    private detailsOpenSnapshot;
+    private sectionKeyCounter;
     constructor(container: HTMLElement);
     render(vm: ViewNode, onAction: (action: ActionEvent) => void, stateAccess?: StateAccess): void;
     navigate(url: string): void;
@@ -49,8 +51,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

@@ -40,6 +40,17 @@ export class BrowserAdapter {
     container;
     fileRegistry = new Map();
     sa = noopStateAccess;
+    // 1.2.0 — open-state snapshot for SectionNode.collapsible. Captured by
+    // render() BEFORE this.container.innerHTML = "" by walking
+    // [data-section-key] details elements; consumed by render() AFTER node()
+    // rebuilds the tree to restore user-opened sections. Cleared at the bottom
+    // of every render(). Same conceptual seam as focusId / scrollMap above.
+    detailsOpenSnapshot = new Map();
+    // 1.2.0 — per-render disambiguator for collapsible-section preservation
+    // keys. Reset at the top of every render(); incremented in section() when
+    // collapsible:true so that multiple sections sharing the same base key
+    // (anonymous, or duplicate heading) get distinct final keys.
+    sectionKeyCounter = new Map();
     constructor(container) {
         this.container = container;
     }
@@ -60,6 +71,19 @@ export class BrowserAdapter {
             if (el.scrollTop !== 0 || el.scrollLeft !== 0)
                 scrollMap.set(el.id, { top: el.scrollTop, left: el.scrollLeft });
         });
+        // 1.2.0 — snapshot collapsible-section open state by stable key. Same
+        // pattern as focusId/scrollMap above: capture before innerHTML wipe, walk
+        // the rebuilt tree after node() returns, restore matching keys. Reset
+        // the per-render section-key counter to 0 so snapshot keys and restore
+        // keys compute identically across the two walks.
+        const openMap = new Map();
+        this.container.querySelectorAll("[data-section-key]").forEach(el => {
+            const key = el.dataset.sectionKey;
+            if (key != null)
+                openMap.set(key, el.open);
+        });
+        this.detailsOpenSnapshot = openMap;
+        this.sectionKeyCounter = new Map();
         this.container.innerHTML = "";
         this.node(vm, this.container, onAction);
         if (focusId) {
@@ -82,6 +106,20 @@ export class BrowserAdapter {
             }
         });
         window.scrollTo(winScrollX, winScrollY);
+        // 1.2.0 — restore collapsible-section open state after node() rebuild +
+        // after focus/scroll restore. Keys absent from the new tree are
+        // naturally dropped (querySelectorAll just doesn't find them); new
+        // sections that didn't exist pre-render are naturally fresh-closed (no
+        // map entry). Only true entries need restore action — false entries
+        // match the native default and are no-ops.
+        this.container.querySelectorAll("[data-section-key]").forEach(el => {
+            const key = el.dataset.sectionKey;
+            if (key != null && this.detailsOpenSnapshot.get(key) === true) {
+                el.open = true;
+            }
+        });
+        this.detailsOpenSnapshot.clear();
+        this.sectionKeyCounter.clear();
     }
     navigate(url) {
         window.location.href = url;
@@ -202,6 +240,31 @@ export class BrowserAdapter {
         parent.appendChild(el);
     }
     section(n, parent, on) {
+        // 1.2.0 — collapsible:true branch emits native <details>/<summary>; the
+        // open/closed state is DOM-local and preserved across re-renders by the
+        // render() snapshot/restore loop. Omitted/false renders byte-identical
+        // to the pre-1.2.0 <section> tree (no className drift, no data-* attr).
+        if (n.collapsible === true) {
+            const baseKey = n.id ?? n.heading ?? "vms-section-anon";
+            const ordinal = this.sectionKeyCounter.get(baseKey) ?? 0;
+            this.sectionKeyCounter.set(baseKey, ordinal + 1);
+            const finalKey = `${baseKey}:${ordinal}`;
+            const el = document.createElement("details");
+            el.className = `vms-section vms-section--collapsible${n.variant === "card" ? " vms-section--card" : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}`;
+            el.dataset.sectionKey = finalKey;
+            // Initial render is always closed — the post-render restore loop in
+            // render() re-applies `open=true` for keys the user had open before.
+            const summary = document.createElement("summary");
+            summary.className = "vms-section__summary";
+            // Headingless fallback label — documented in TSDoc on
+            // SectionNode.collapsible and in AGENTS.md "Non-obvious framework
+            // behaviors". Choice locked.
+            summary.textContent = n.heading ?? "Show details";
+            el.appendChild(summary);
+            this.kids(n.children, el, on);
+            parent.appendChild(el);
+            return;
+        }
         const el = document.createElement("section");
         el.className = `vms-section${n.variant === "card" ? " vms-section--card" : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}`;
         if (n.heading) {
@@ -626,8 +689,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 +777,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 +820,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 +830,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

@@ -82,6 +82,10 @@ export interface SectionNode {
     variant?: "card";
     /** Layout preset arranging direct children. Omitted or "stack" = current vertical flow (no modifier class). "split" (equal 2-up), "cards" (uniform grid), "sidebar" (thin + wide app shell) emit .vms-section--{value}. Closed union (D-01/D-02; sidebar D-28). */
     layout?: "stack" | "split" | "cards" | "sidebar";
+    /** Optional stable preservation key for the renderer's collapsible-section open-state snapshot. Used only when `collapsible: true`. Provide when `heading` isn't unique within a page or is absent — otherwise the renderer falls back to `heading ?? "vms-section-anon"`, disambiguated by per-render ordinal. Omitted = use the heading fallback. */
+    id?: string;
+    /** When true, the section renders as a native `<details>`/`<summary>` disclosure widget (closed by default). Aesthetic, client-side primitive — the open/closed state is DOM-local and the server does NOT round-trip it (same conceptual model as draft text values in unsubmitted form inputs). The browser adapter snapshots `<details>.open` before each re-render and restores it after, keyed by `id ?? heading ?? "vms-section-anon"` (disambiguated by per-render ordinal); a re-key drops the preserved state (the documented escape hatch for rare server-driven expansion). The summary label is the section's `heading`; a headingless collapsible section uses the fallback string `"Show details"`. If a section needs to start open, do not mark it collapsible. Omitted/false = today's `<section>` rendering, byte-identical. */
+    collapsible?: boolean;
     children: ViewNode[];
 }
 export interface ListNode {
@@ -237,10 +241,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.2.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

@@ -217,6 +217,26 @@ body {
   padding: var(--vms-space-md);
 }
 
+/* ── Section: collapsible (1.2.0 — client-side disclosure via native <details>) ──
+   Open/closed state is DOM-local; the BrowserAdapter snapshots and restores it
+   across server-driven re-renders the same way it does for focus and scroll.
+   :focus-visible matches the 1.1.0 row-click idiom (.vms-table__row--clickable). */
+.vms-section--collapsible {
+  /* native <details> block layout is correct as-is; .vms-section flex inheritance still applies. */
+}
+.vms-section__summary {
+  font-size: var(--vms-text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--vms-text-muted);
+  cursor: pointer;
+  list-style: revert; /* keep the native disclosure triangle visible — universal "expand" affordance */
+}
+.vms-section__summary:focus-visible {
+  outline: 2px solid var(--vms-accent);
+  outline-offset: 2px;
+}
+
 /* ── Stat bar ── */
 .vms-stat-bar { display: flex; gap: var(--vms-space-lg); flex-wrap: wrap; }
 .vms-stat-bar__item { display: flex; align-items: baseline; gap: var(--vms-space-xs); }
@@ -605,6 +625,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; }