@ashley-shrok/viewmodel-shell 3.0.1 → 3.1.0

package/dist/browser.d.ts

@@ -66,6 +66,7 @@ export declare class BrowserAdapter implements Adapter {
     private button;
     private text;
     private link;
+    private divider;
     private statBar;
     /** TabsNode — on click, write tab.value to state at node.bind, then dispatch
      *  the tab's own action name. */

package/dist/browser.js

@@ -238,6 +238,7 @@ export class BrowserAdapter {
             case "modal": return this.modal(n, parent, on);
             case "table": return this.table(n, parent, on);
             case "copy-button": return this.copyButton(n, parent);
+            case "divider": return this.divider(n, parent);
             case "fits": return this.fits(n, parent, on);
         }
     }
@@ -510,7 +511,24 @@ export class BrowserAdapter {
                 ev.files = files;
             on(ev);
         };
-        if (n.submitAction) {
+        // #22 — submitButton takes precedence: the form renders the consumer's own
+        // button (its label + emphasis/tone/size/width) as the submit and fires its
+        // action; submitLabel/submitAction for the implicit button are then ignored.
+        const sb = n.submitButton;
+        const effectiveSubmit = sb ? sb.action : n.submitAction;
+        if (sb) {
+            const submitAction = sb.action;
+            const submit = document.createElement("button");
+            submit.type = "submit";
+            submit.className = `vms-button${sb.emphasis ? ` vms-button--${sb.emphasis}` : ""}${sb.tone ? ` vms-button--${sb.tone}` : ""}${sb.size ? ` vms-button--${sb.size}` : ""}${sb.width === "full" ? " vms-button--full" : ""}`;
+            submit.textContent = sb.label;
+            form.appendChild(submit);
+            form.addEventListener("submit", (e) => {
+                e.preventDefault();
+                dispatchWithFiles(submitAction);
+            });
+        }
+        else if (n.submitAction) {
             const submitAction = n.submitAction;
             const submit = document.createElement("button");
             submit.type = "submit";
@@ -532,8 +550,8 @@ export class BrowserAdapter {
         // never submits). Modifier-Enter falls through to a normal newline, and an
         // IME composition Enter (candidate confirmation) must NOT submit. No-op
         // when submitAction is absent. Same dispatch path as the submit button.
-        if (n.submitOnEnter && n.submitAction) {
-            const submitAction = n.submitAction;
+        if (n.submitOnEnter && effectiveSubmit) {
+            const submitAction = effectiveSubmit;
             form.querySelectorAll("textarea").forEach(ta => {
                 ta.addEventListener("keydown", (e) => {
                     if (e.key !== "Enter")
@@ -774,7 +792,7 @@ export class BrowserAdapter {
     button(n, parent, on) {
         const btn = document.createElement("button");
         btn.type = "button";
-        btn.className = `vms-button${n.emphasis ? ` vms-button--${n.emphasis}` : ""}${n.tone ? ` vms-button--${n.tone}` : ""}${n.size ? ` vms-button--${n.size}` : ""}`;
+        btn.className = `vms-button${n.emphasis ? ` vms-button--${n.emphasis}` : ""}${n.tone ? ` vms-button--${n.tone}` : ""}${n.size ? ` vms-button--${n.size}` : ""}${n.width === "full" ? " vms-button--full" : ""}`;
         btn.textContent = n.label;
         btn.addEventListener("click", () => {
             // pendingLabel: instant client-side feedback. Swap text + add
@@ -808,6 +826,20 @@ export class BrowserAdapter {
         }
         parent.appendChild(a);
     }
+    divider(n, parent) {
+        if (n.orientation === "vertical") {
+            // <hr> is semantically horizontal; a vertical rule is a separator div.
+            const el = document.createElement("div");
+            el.className = "vms-divider vms-divider--vertical";
+            el.setAttribute("role", "separator");
+            el.setAttribute("aria-orientation", "vertical");
+            parent.appendChild(el);
+            return;
+        }
+        const hr = document.createElement("hr"); // implicit role="separator"
+        hr.className = "vms-divider";
+        parent.appendChild(hr);
+    }
     statBar(n, parent) {
         const bar = document.createElement("div");
         bar.className = "vms-stat-bar";
@@ -1142,7 +1174,7 @@ export class BrowserAdapter {
     copyButton(n, parent) {
         const btn = document.createElement("button");
         btn.type = "button";
-        btn.className = `vms-button${n.emphasis ? ` vms-button--${n.emphasis}` : ""}${n.tone ? ` vms-button--${n.tone}` : ""}${n.size ? ` vms-button--${n.size}` : ""}`;
+        btn.className = `vms-button${n.emphasis ? ` vms-button--${n.emphasis}` : ""}${n.tone ? ` vms-button--${n.tone}` : ""}${n.size ? ` vms-button--${n.size}` : ""}${n.width === "full" ? " vms-button--full" : ""}`;
         btn.textContent = n.label ?? "Copy";
         btn.addEventListener("click", () => {
             const write = navigator.clipboard?.writeText(n.text);

package/dist/index.d.ts

@@ -63,7 +63,7 @@ export interface Adapter {
      *  visually flips the box. Fail-quiet by absence (TUI has no equivalent). */
     setBusy?(active: boolean): void;
 }
-export type ViewNode = PageNode | SectionNode | ListNode | ListItemNode | FormNode | FieldNode | CheckboxNode | ButtonNode | TextNode | LinkNode | ImageNode | StatBarNode | TabsNode | ProgressNode | ModalNode | TableNode | CopyButtonNode | FitsNode;
+export type ViewNode = PageNode | SectionNode | ListNode | ListItemNode | FormNode | FieldNode | CheckboxNode | ButtonNode | TextNode | LinkNode | ImageNode | StatBarNode | TabsNode | ProgressNode | ModalNode | TableNode | CopyButtonNode | DividerNode | FitsNode;
 export interface PageNode {
     type: "page";
     title?: string;
@@ -203,6 +203,15 @@ export interface FormNode {
      *  FieldNode.action still fires per-field). */
     submitAction?: ActionEvent;
     submitLabel?: string;
+    /** Full control of the submit button (#22). When set, the form renders THIS
+     *  button as its submit — carrying its own `label` + `emphasis`/`tone`/`size`/
+     *  `width`/`pendingLabel` — instead of synthesizing a plain one from
+     *  `submitLabel`. The form fires `submitButton.action` on click, on native
+     *  submit (Enter in a text field), and on textarea Enter (`submitOnEnter`).
+     *  Mirrors the universal "write your own submit button" pattern (e.g. a
+     *  full-width submit: `width:"full"`). Takes precedence over
+     *  `submitLabel`/`submitAction`, which are ignored for the button when set. */
+    submitButton?: ButtonNode;
     /** 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
@@ -261,6 +270,11 @@ export interface ButtonNode {
     tone?: "danger" | "warning" | "success" | "info";
     /** Box geometry (padding + font), orthogonal to color/emphasis — the one axis no design system bakes into variant. Emits .vms-button--{size}. Omitted = the default (md) size. Closed union. */
     size?: "sm" | "lg";
+    /** Width axis — `"full"` stretches the button to fill its container's cross
+     *  axis (the standard full-width / "block" button: MUI `fullWidth`, Ant
+     *  `block`, Chakra `width="full"`). Emits `.vms-button--full`. Omitted/`"auto"`
+     *  = content-width (the default hug). Orthogonal to emphasis/tone/size. */
+    width?: "auto" | "full";
     /** 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
@@ -431,6 +445,11 @@ export interface CopyButtonNode {
     tone?: "danger" | "warning" | "success" | "info";
     /** Box geometry — mirrors ButtonNode.size. Emits .vms-button--{size}. Omitted = md. Closed union. */
     size?: "sm" | "lg";
+    /** Width axis — `"full"` stretches the button to fill its container's cross
+     *  axis (the standard full-width / "block" button: MUI `fullWidth`, Ant
+     *  `block`, Chakra `width="full"`). Emits `.vms-button--full`. Omitted/`"auto"`
+     *  = content-width (the default hug). Orthogonal to emphasis/tone/size. */
+    width?: "auto" | "full";
 }
 /**
  * The SwiftUI `ViewThatFits` port. The renderer picks the FIRST child whose
@@ -463,6 +482,14 @@ export interface CopyButtonNode {
  * meaningful. For list/detail and similar text panes use `split` / `sidebar`,
  * which collapse to a single column intrinsically on their own (zero @media).
  */
+/** A thematic break / separator (#22) — the standard divider primitive (MUI/Ant
+ *  `<Divider>`, Radix `<Separator>`). Horizontal (default) renders an `<hr>` with
+ *  its implicit `role="separator"`; vertical renders a `role="separator"` div with
+ *  `aria-orientation="vertical"` for row layouts. No content. */
+export interface DividerNode {
+    type: "divider";
+    orientation?: "horizontal" | "vertical";
+}
 export interface FitsNode {
     type: "fits";
     /** Axis on which the container's fit is tested. CLOSED union; OMITTED =

package/dist/tui.js

@@ -750,6 +750,7 @@ function renderNode(node, ctx, key) {
         case "stat-bar": return _jsx(StatBarView, { node: node }, key);
         case "modal": return _jsx(ModalView, { node: node, ctx: ctx }, key);
         case "copy-button": return _jsx(CopyButtonView, { node: node, ctx: ctx }, key);
+        case "divider": return _jsx("text", { fg: "#555555", children: node.orientation === "vertical" ? "│" : "─".repeat(40) }, key);
         case "form": return _jsx(FormView, { node: node, ctx: ctx }, key);
         case "field": return _jsx(FieldView, { node: node, ctx: ctx }, key);
         case "fits": {
@@ -1158,7 +1159,7 @@ function FormView({ node, ctx }) {
         ctx.onAction({ name: base.name });
     };
     // Enter-in-a-field submits the default action — only wired when present.
-    const submitAction = node.submitAction;
+    const submitAction = node.submitButton ? node.submitButton.action : node.submitAction;
     const childCtx = {
         ...ctx,
         isTopLevel: false,
@@ -1171,7 +1172,7 @@ function FormView({ node, ctx }) {
     // 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)), 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] }));
+    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.submitButton ? node.submitButton.label : (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": "3.0.1",
+  "version": "3.1.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

@@ -61,6 +61,13 @@
   --vms-text-lg:    1.125rem;
   --vms-text-xl:    1.5rem;
   --vms-text-2xl:   2.25rem;
+  /* Shared line-box height for the default-size form controls + buttons. An
+     ABSOLUTE value (not a font-relative ratio) so an input (--vms-text-md) and a
+     button (--vms-text-base) — which intentionally differ in font size — compute
+     to the SAME height when their padding + border match, and therefore line up
+     pixel-for-pixel in a filter/toolbar row. Size variants (.vms-button--sm/lg)
+     and compact icon buttons set their own line-height. */
+  --vms-control-line: 1.5rem;
   /* Page shell (D-12) — additive override seam (issue #13); host/theme-retunable
      via a single :root{} override imported after the theme. The two width
      ratchets — --vms-page-max-wide (1440px default) and --vms-page-max-full
@@ -434,6 +441,7 @@ body {
   color: var(--vms-text);
   font-family: var(--vms-font-body);
   font-size: var(--vms-text-md);
+  line-height: var(--vms-control-line);
   padding: var(--vms-space-sm) var(--vms-space-md);
   outline: none;
   transition: border-color var(--vms-t), box-shadow var(--vms-t);
@@ -526,6 +534,7 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   cursor: pointer;
   font-family: var(--vms-font-body);
   font-size: var(--vms-text-base);
+  line-height: var(--vms-control-line);
   padding: var(--vms-space-sm) var(--vms-space-md);
   align-self: flex-start;
   transition: background var(--vms-t), border-color var(--vms-t), transform var(--vms-t);
@@ -555,9 +564,20 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 }
 .vms-button--secondary:hover { background: var(--vms-accent-glow); }
 
-/* size — the ONLY axis that touches box metrics (md = base, no class). */
-.vms-button--sm { padding: var(--vms-space-2xs) var(--vms-space-sm); font-size: var(--vms-text-sm); }
-.vms-button--lg { padding: var(--vms-space-sm) var(--vms-space-lg); font-size: var(--vms-text-lg); }
+/* size — the ONLY axis that touches box metrics (md = base, no class). Each size
+   sets its own line-box so sm stays compact and lg reads larger (the default-size
+   control line lives on the base rule + --vms-control-line). */
+.vms-button--sm { padding: var(--vms-space-2xs) var(--vms-space-sm); font-size: var(--vms-text-sm); line-height: 1.125rem; }
+.vms-button--lg { padding: var(--vms-space-sm) var(--vms-space-lg); font-size: var(--vms-text-lg); line-height: 1.75rem; }
+/* width — the standard full-width / "block" button (#22). Stretches to fill the
+   container's cross axis (overriding the base align-self:flex-start), so a form
+   submit lines up with a column of width:100% inputs. */
+.vms-button--full { align-self: stretch; width: 100%; }
+
+/* ── Divider / separator (#22) — the standard thematic break. Horizontal is an
+   <hr>; vertical is a role="separator" div for row layouts. ── */
+.vms-divider { border: none; border-top: 1px solid var(--vms-border); width: 100%; margin-block: var(--vms-space-sm); }
+.vms-divider--vertical { border-top: none; border-left: 1px solid var(--vms-border); width: 0; align-self: stretch; margin: 0 var(--vms-space-sm); }
 
 /* ── Pending state (0.8.0 / issue #11) ──
    Applied by BrowserAdapter when a ButtonNode with `pendingLabel` is clicked.
@@ -578,6 +598,9 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   color: var(--vms-text-muted);
   opacity: 0;
   padding: var(--vms-space-2xs) var(--vms-space-xs);
+  /* compact inline icon affordance — opt out of the standardized control line so
+     the row's delete-X stays small, not control-height. */
+  line-height: 1.25rem;
   border-radius: var(--vms-radius-sm);
   transition: opacity var(--vms-t), color var(--vms-t), background var(--vms-t);
 }