@ashley-shrok/viewmodel-shell 1.1.0 → 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;

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) {

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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "1.1.0",
+  "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); }