@ashley-shrok/viewmodel-shell 0.7.0 → 0.8.0

package/dist/browser.js

@@ -25,6 +25,15 @@ export class BrowserAdapter {
         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()).
+        const winScrollX = window.scrollX;
+        const winScrollY = window.scrollY;
         const scrollMap = new Map();
         this.container.querySelectorAll("[id]").forEach(el => {
             if (el.scrollTop !== 0 || el.scrollLeft !== 0)
@@ -44,7 +53,11 @@ export class BrowserAdapter {
         if (focusId) {
             const el = this.container.querySelector(`#${CSS.escape(focusId)}`);
             if (el) {
-                el.focus();
+                // 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);
@@ -60,6 +73,10 @@ 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) {
         window.location.href = url;
@@ -454,7 +471,20 @@ export class BrowserAdapter {
         btn.type = "button";
         btn.className = `vms-button${n.variant ? ` vms-button--${n.variant}` : ""}`;
         btn.textContent = n.label;
-        btn.addEventListener("click", () => on(n.action));
+        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
+            // 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.
+            if (n.pendingLabel) {
+                btn.textContent = n.pendingLabel;
+                btn.classList.add("vms-button--pending");
+            }
+            on(n.action);
+        });
         parent.appendChild(btn);
     }
     text(n, parent) {

package/dist/index.d.ts

@@ -107,6 +107,13 @@ export interface ButtonNode {
     label: string;
     action: ActionEvent;
     variant?: "primary" | "secondary" | "danger";
+    /** Transient label shown from click until the dispatch resolves (response
+     *  arrives or dispatch errors). Mirrors `CopyButtonNode.copiedLabel`'s
+     *  lifecycle pattern at a different beat: shown DURING the round-trip
+     *  rather than AFTER it. The adapter additionally adds `.vms-button--pending`
+     *  while in this state so the button visibly disables (cursor + opacity).
+     *  Omitted = no pending feedback (existing instant-click behavior). */
+    pendingLabel?: string;
 }
 export interface TextNode {
     type: "text";

package/dist/index.js

@@ -77,6 +77,15 @@ export class ViewModelShell {
         catch (err) {
             const error = err instanceof Error ? err : new Error(String(err));
             onError ? onError(error) : console.error("[ViewModelShell]", error);
+            // 0.8.0 (#11) — re-render the current VM on dispatch error. Adapters
+            // may have applied client-side ephemeral state in onAction handlers
+            // (e.g., BrowserAdapter swaps button text for ButtonNode.pendingLabel).
+            // Re-rendering snaps that back to the authoritative server state.
+            // Skipped when no VM has loaded yet (pre-initial-load dispatch is
+            // already an error case handled above; currentVm stays null there).
+            if (this.currentVm !== null) {
+                this.options.adapter.render(this.currentVm, (a) => this.dispatch(a));
+            }
         }
         finally {
             this.dispatching = false;

package/dist/tui.d.ts

@@ -23,6 +23,7 @@ export declare class TuiAdapter implements Adapter {
     private readonly fieldWireValues;
     private copiedKey;
     private copiedTimer;
+    private pendingButtonKey;
     constructor(opts?: TuiOpts);
     private setFieldValue;
     /** Resolve a field's display value at render time. The draft-preservation
@@ -34,6 +35,8 @@ export declare class TuiAdapter implements Adapter {
      *    2. Wire value unchanged since last render — preserve the edit value.
      *    3. Wire value differs from the prior wire baseline — server intent
      *       change → reset the edit value to match. */
+    private buttonKey;
+    private setPendingButton;
     private copy;
     private resolveFieldValue;
     render(vm: ViewNode, onAction: (action: ActionEvent) => void): void;

package/dist/tui.js

@@ -31,6 +31,12 @@ export class TuiAdapter {
     // fine UX-wise and avoids needing per-button unique keys.
     copiedKey = null;
     copiedTimer = null;
+    // 0.8.0 (#11) — pending-button state. ButtonView reads ctx.pendingButtonKey
+    // and renders pendingLabel when matched. Set from ButtonView onMouseDown
+    // and from activatePane's button branch. Cleared on every external render()
+    // call (so server-driven re-render — success OR error — naturally clears
+    // pending state, no per-button cleanup wiring needed).
+    pendingButtonKey = null;
     constructor(opts) {
         this.viewport = opts?.viewport ?? "fill";
         const f = opts?.sidebarFraction ?? 1 / 3;
@@ -68,6 +74,20 @@ export class TuiAdapter {
     // ESC ] 52 ; c ; <base64> BEL. ESC = \x1b, BEL = \x07. Terminals without
     // OSC-52 support ignore the escape (no clipboard write, but the visual
     // "Copied!" feedback still fires, which is honest behavior).
+    // Returns a stable key for ButtonNode identity within a render. Uses
+    // action name + visible label — duplicates are rare and merely cause
+    // two buttons to flash together (acceptable, matches "same action
+    // is in-flight" intuition).
+    buttonKey(action, label) {
+        return `${action}::${label}`;
+    }
+    // Set the pending-button key + flush the React tree so ButtonView re-renders
+    // with the swapped label. Called from ButtonView.onMouseDown and from
+    // activatePane's button branch.
+    setPendingButton = (action, label) => {
+        this.pendingButtonKey = this.buttonKey(action, label);
+        this.flushPending();
+    };
     copy = (text) => {
         const b64 = Buffer.from(text, "utf8").toString("base64");
         const seq = `\x1b]52;c;${b64}\x07`;
@@ -105,9 +125,15 @@ export class TuiAdapter {
     // createCliRenderer is async, so we init lazily: the first render() kicks
     // off initialization; subsequent renders are sync. Late renders that
     // arrive before init resolves are coalesced into `pending` (last-write-wins).
+    //
+    // 0.8.0 (#11) — every external render clears the pending-button state
+    // (label swap) so server-driven re-renders (success path AND the dispatch-
+    // error re-render path) naturally revert any in-flight UI without per-
+    // button cleanup wiring.
     render(vm, onAction) {
         if (this.disposed)
             return;
+        this.pendingButtonKey = null;
         this.pending = { vm, onAction };
         if (this.renderer == null) {
             if (this.initPromise == null)
@@ -178,7 +204,7 @@ export class TuiAdapter {
             this.focusedPaneIndex = 0;
         }
         this.lastPaneCount = paneCount;
-        this.root.render(_jsx(App, { vm: vm, onAction: onAction, focusedPaneIndex: this.focusedPaneIndex, sidebarFraction: this.sidebarFraction, setFieldValue: this.setFieldValue, resolveFieldValue: this.resolveFieldValue, copiedKey: this.copiedKey, copy: this.copy, navigate: this.navigateForLinks }));
+        this.root.render(_jsx(App, { vm: vm, onAction: onAction, focusedPaneIndex: this.focusedPaneIndex, sidebarFraction: this.sidebarFraction, setFieldValue: this.setFieldValue, resolveFieldValue: this.resolveFieldValue, copiedKey: this.copiedKey, copy: this.copy, navigate: this.navigateForLinks, pendingButtonKey: this.pendingButtonKey, setPendingButton: this.setPendingButton }));
     }
     // B5 — bound reference to navigate(), used as the App prop. We bind once
     // (in the property initializer below) so React sees a stable function
@@ -226,6 +252,10 @@ export class TuiAdapter {
             if (a == null)
                 return;
             if (a.type === "button") {
+                // 0.8.0 (#11) — mirror ButtonView.onMouseDown's pending-state set.
+                // Enter activation is structurally identical to a mouse click here.
+                if (a.pendingLabel != null)
+                    this.setPendingButton(a.action.name, a.label);
                 this.pending.onAction(a.action);
             }
             else if (a.type === "link") {
@@ -553,7 +583,7 @@ function focusedPaneSummary(vm, index) {
             scan(c);
     return { heading, hasInputs, primaryActionable, primaryCheckbox };
 }
-function App({ vm, onAction, focusedPaneIndex = 0, sidebarFraction = 1 / 3, setFieldValue, resolveFieldValue, copiedKey = null, copy, navigate, }) {
+function App({ vm, onAction, focusedPaneIndex = 0, sidebarFraction = 1 / 3, setFieldValue, resolveFieldValue, copiedKey = null, copy, navigate, pendingButtonKey = null, setPendingButton, }) {
     // B4 — detect modal at the top of every render so the focus-trap + overlay
     // wiring is consistent end-to-end. When a modal exists in the tree, the
     // inline ModalView returns null (so it doesn't render in-place); we render
@@ -579,6 +609,10 @@ function App({ vm, onAction, focusedPaneIndex = 0, sidebarFraction = 1 / 3, setF
         // B5: link click target. Default no-op for the conformance walker (which
         // doesn't have an adapter to call). Real renders thread TuiAdapter.navigate.
         navigate: navigate ?? (() => { }),
+        // 0.8.0 (#11): pending-button plumbing. Defaults make renderTree (the
+        // static conformance walker) safe to invoke without an adapter.
+        pendingButtonKey,
+        setPendingButton: setPendingButton ?? (() => { }),
         modalActive: modal != null,
         insideModal: false,
     };
@@ -880,11 +914,22 @@ function ButtonView({ node, ctx }) {
     const fg = node.variant === "danger" ? "#ff5555"
         : node.variant === "primary" ? "#88aaff"
             : undefined;
+    // 0.8.0 (#11) — pendingLabel: when set + this button's key matches the
+    // adapter's pendingButtonKey, render the pending label instead of the
+    // normal label. Cleared on the next external render() (success path =
+    // server returns a new VM; error path = shell re-renders currentVm).
+    const key = `${node.action.name}::${node.label}`;
+    const isPending = node.pendingLabel != null && ctx.pendingButtonKey === key;
+    const label = isPending ? node.pendingLabel : node.label;
     // B5 — mouse click dispatches the button's action. Keyboard activation
     // (Enter on the focused pane's primary actionable) is wired at the
     // renderer key handler, not here.
-    const onMouseDown = () => ctx.onAction(node.action);
-    return (_jsxs("text", { ...(fg != null ? { fg } : {}), onMouseDown: onMouseDown, children: ["[ ", node.label, " ]"] }));
+    const onMouseDown = () => {
+        if (node.pendingLabel != null)
+            ctx.setPendingButton(node.action.name, node.label);
+        ctx.onAction(node.action);
+    };
+    return (_jsxs("text", { ...(fg != null ? { fg } : {}), ...(isPending ? { dimColor: true } : {}), onMouseDown: onMouseDown, children: ["[ ", label, " ]"] }));
 }
 function CheckboxView({ node, ctx }) {
     const glyph = node.checked ? "[x]" : "[ ]";

package/package.json

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

@@ -345,6 +345,18 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 }
 .vms-button--danger:hover { background: var(--vms-error-glow); border-color: var(--vms-error); }
 
+/* ── Pending state (0.8.0 / issue #11) ──
+   Applied by BrowserAdapter when a ButtonNode with `pendingLabel` is clicked.
+   The button visibly disables (dimmed + wait cursor + ignores pointer events)
+   for the duration of the dispatch round-trip; the next render either
+   replaces the button (success path) or re-renders the current VM (error
+   path) so this state always clears without per-button cleanup. */
+.vms-button--pending {
+  opacity: 0.55;
+  cursor: progress;
+  pointer-events: none;
+}
+
 /* Inside a list item, a danger button is treated as the row's "X" affordance:
    muted and hidden until the row is hovered, then visible and red on hover. */
 .vms-list-item .vms-button--danger {