@ashley-shrok/viewmodel-shell 0.7.1 → 0.9.0

package/dist/browser.js

@@ -471,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) {
@@ -677,7 +690,10 @@ export class BrowserAdapter {
     copyButton(n, parent) {
         const btn = document.createElement("button");
         btn.type = "button";
-        btn.className = "vms-button";
+        // 0.9.0 (#14): variant modifier class, mirroring button() exactly. The
+        // existing .vms-button--{primary,secondary,danger} CSS rules apply
+        // automatically — no new style surface.
+        btn.className = `vms-button${n.variant ? ` vms-button--${n.variant}` : ""}`;
         btn.textContent = n.label ?? "Copy";
         btn.addEventListener("click", () => {
             const write = navigator.clipboard?.writeText(n.text);

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";
@@ -189,6 +196,11 @@ export interface CopyButtonNode {
     label?: string;
     /** Ephemeral label shown after a successful copy, reverts after ~1.5 s. Adapter default: "Copied!". */
     copiedLabel?: string;
+    /** Visual variant — mirrors ButtonNode.variant (issue #14). Adapter emits
+     *  `vms-button vms-button--{variant}` (browser) / variant-tinted text
+     *  (TUI), so a copy-button can read distinctly from neighboring default
+     *  buttons. Closed union; omitted = current behavior (no modifier). */
+    variant?: "primary" | "secondary" | "danger";
 }
 export interface ShellOptions {
     endpoint: string;

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]" : "[ ]";
@@ -974,7 +1019,13 @@ function CopyButtonView({ node, ctx }) {
     const label = isCopied
         ? (node.copiedLabel ?? "Copied!")
         : (node.label ?? "Copy");
-    return (_jsxs("text", { onMouseDown: () => ctx.copy(node.text), children: ["[ ", label, " ]"] }));
+    // 0.9.0 (#14): variant coloring — mirrors ButtonView's fg derivation
+    // verbatim. Adapter-medium-adaptation parity: the browser uses CSS
+    // classes; the TUI uses ANSI fg colors. Same semantic mapping.
+    const fg = node.variant === "danger" ? "#ff5555"
+        : node.variant === "primary" ? "#88aaff"
+            : undefined;
+    return (_jsxs("text", { ...(fg != null ? { fg } : {}), onMouseDown: () => ctx.copy(node.text), children: ["[ ", label, " ]"] }));
 }
 // ── form ──────────────────────────────────────────────────────────────────
 // Renders children + the submit button (decorative for B3 — Enter on any

package/package.json

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