@ashley-shrok/viewmodel-shell 0.8.0 → 0.10.0

package/dist/browser.js

@@ -249,14 +249,12 @@ export class BrowserAdapter {
         form.className = `vms-form${n.layout && n.layout !== "stack" ? ` vms-form--${n.layout}` : ""}`;
         form.noValidate = true;
         this.kids(n.children, form, on);
-        const submit = document.createElement("button");
-        submit.type = "submit";
-        submit.className = "vms-button vms-button--primary";
-        submit.textContent = n.submitLabel ?? "Submit";
-        form.appendChild(submit);
-        form.addEventListener("submit", (e) => {
-            e.preventDefault();
-            const ctx = { ...(n.submitAction.context ?? {}) };
+        // 0.10.0 (#15) — harvest this form's current field values, merge into the
+        // given action's context, and dispatch. Factored out of the submit
+        // handler so both the default submit AND each buttons[] entry can call it
+        // with a DIFFERENT action carrying the SAME live field values.
+        const harvest = (base) => {
+            const ctx = { ...(base.context ?? {}) };
             const files = {};
             form.querySelectorAll("input:not([type=checkbox]):not([type=file]), textarea").forEach(el => { if (el.name)
                 ctx[el.name] = el.value; });
@@ -277,11 +275,43 @@ export class BrowserAdapter {
                 if (inp.name && inp.files?.[0])
                     files[inp.name] = inp.files[0];
             });
-            const action = { name: n.submitAction.name, context: ctx };
+            const action = { name: base.name, context: ctx };
             if (Object.keys(files).length > 0)
                 action.files = files;
             on(action);
-        });
+        };
+        // Default submit button + Enter-to-submit, only when submitAction is set.
+        // (0.10.0: submitAction is now optional — a buttons[]-only form renders
+        // no default button, and Enter does not submit at the form level.)
+        if (n.submitAction) {
+            const submitAction = n.submitAction;
+            const submit = document.createElement("button");
+            submit.type = "submit";
+            submit.className = "vms-button vms-button--primary";
+            submit.textContent = n.submitLabel ?? "Submit";
+            form.appendChild(submit);
+            form.addEventListener("submit", (e) => {
+                e.preventDefault();
+                harvest(submitAction);
+            });
+        }
+        else {
+            // No default submit — still neutralize implicit Enter submission so a
+            // single-field buttons[]-only form doesn't reload via native submit.
+            form.addEventListener("submit", (e) => e.preventDefault());
+        }
+        // 0.10.0 (#15) — multi-action buttons. Each renders through the normal
+        // button() path (so variant + pendingLabel work) but its onAction is
+        // wrapped to harvest the form first. We render them in a footer row so
+        // they group like the default submit.
+        if (n.buttons && n.buttons.length > 0) {
+            const row = document.createElement("div");
+            row.className = "vms-form__buttons";
+            const harvestOn = (action) => harvest(action);
+            for (const btn of n.buttons)
+                this.button(btn, row, harvestOn);
+            form.appendChild(row);
+        }
         parent.appendChild(form);
     }
     field(n, parent, on) {
@@ -690,7 +720,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

@@ -68,10 +68,23 @@ export interface ListItemNode {
 }
 export interface FormNode {
     type: "form";
-    submitAction: ActionEvent;
+    /** The default submit action — renders an auto submit button + fires on
+     *  Enter in a text field. OPTIONAL since 0.10.0 (#15): omit it for a form
+     *  whose only triggers are `buttons[]`. When omitted, no default submit
+     *  button renders and Enter does not submit at the form level (a
+     *  FieldNode.action still fires per-field). */
+    submitAction?: ActionEvent;
     submitLabel?: string;
     /** Layout preset for the form's controls. Omitted or "stack" = fields stacked (current, no modifier class). "inline" = field row + submit on one line (add/search bar) — emits .vms-form--inline. Closed union (D-29). */
     layout?: "stack" | "inline";
+    /** Multi-action submit buttons (#15). Each is a full ButtonNode (so
+     *  `variant` + `pendingLabel` apply) that, on activation, HARVESTS this
+     *  form's current field values into its `action.context` and dispatches —
+     *  the same harvest the default submit performs, but carrying a different
+     *  action. Mirrors HTML's multiple submit buttons / `formaction`. A plain
+     *  ButtonNode placed in `children` keeps its no-harvest behavior; only
+     *  buttons in THIS slot harvest. */
+    buttons?: ButtonNode[];
     children: ViewNode[];
 }
 export interface FieldNode {
@@ -196,6 +209,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/tui.js

@@ -1019,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
@@ -1028,12 +1034,12 @@ function CopyButtonView({ node, ctx }) {
 // reads each from the adapter's fieldValues map (falling back to wire), and
 // dispatches submitAction with `{ [name]: value, ... }` merged into context.
 function FormView({ node, ctx }) {
-    // Snapshot the form for the closure — same-instance fine since the closure
-    // is recreated on every render (which is every server response).
-    const submitThisForm = () => {
-        const merged = {
-            ...(node.submitAction.context ?? {}),
-        };
+    // 0.10.0 (#15) — harvest this form's current field values, merge into the
+    // given action's context, and dispatch. Generalized from the single-submit
+    // closure so the default submit AND each buttons[] entry can call it with
+    // a DIFFERENT action carrying the SAME live field values.
+    const submitFormWith = (base) => {
+        const merged = { ...(base.context ?? {}) };
         const collect = (n) => {
             if (n.type === "field") {
                 const wireValue = n.value ?? "";
@@ -1052,17 +1058,23 @@ function FormView({ node, ctx }) {
         };
         for (const child of node.children)
             collect(child);
-        ctx.onAction({ name: node.submitAction.name, context: merged });
+        ctx.onAction({ name: base.name, context: merged });
     };
+    // Enter-in-a-field submits the default action — only wired when present.
+    const submitAction = node.submitAction;
     const childCtx = {
         ...ctx,
         isTopLevel: false,
-        submitForm: submitThisForm,
+        submitForm: submitAction ? () => submitFormWith(submitAction) : null,
     };
+    // buttons[] (#15) render through ButtonView so variant + pendingLabel work;
+    // their onAction is wrapped to harvest the form first. pendingButtonKey
+    // plumbing (0.8.0) flows through ctx unchanged.
+    const buttonCtx = { ...childCtx, onAction: submitFormWith };
     // Layout preset on form: "stack" (default — fields stacked) or "inline"
     // (field row + submit on one line, the add-bar/search-bar pattern).
     const isInline = node.layout === "inline";
-    return (_jsxs("box", { flexDirection: isInline ? "row" : "column", gap: 1, children: [node.children.map((child, i) => renderNode(child, childCtx, i)), _jsxs("text", { attributes: 1 /* BOLD */, children: ["[ ", node.submitLabel ?? "Submit", " ]"] })] }));
+    return (_jsxs("box", { flexDirection: isInline ? "row" : "column", gap: 1, children: [node.children.map((child, i) => renderNode(child, childCtx, i)), submitAction != null ? (_jsxs("text", { attributes: 1 /* BOLD */, children: ["[ ", node.submitLabel ?? "Submit", " ]"] })) : null, node.buttons && node.buttons.length > 0 ? (_jsx("box", { flexDirection: "row", gap: 2, children: node.buttons.map((btn, i) => (_jsx(ButtonView, { node: btn, ctx: buttonCtx }, `b${i}`))) })) : null] }));
 }
 // ── field ─────────────────────────────────────────────────────────────────
 // Real OpenTUI input/textarea/select wired to the adapter's field state.

package/package.json

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

@@ -231,6 +231,16 @@ body {
   flex-wrap: wrap;
 }
 .vms-form--inline > .vms-field { flex: 1 1 12rem; }
+/* Multi-action submit buttons row (0.10.0 / #15) — groups the form's
+   buttons[] entries on one line, like a dialog action bar. align-self
+   flex-start keeps the row from stretching full-width in the stacked form. */
+.vms-form__buttons {
+  display: flex;
+  flex-direction: row;
+  gap: var(--vms-space-sm);
+  align-self: flex-start;
+  flex-wrap: wrap;
+}
 .vms-field { display: flex; flex-direction: column; gap: var(--vms-space-2xs); }
 .vms-field__label { font-size: var(--vms-text-sm); color: var(--vms-text-muted); }
 .vms-field__input {