@ashley-shrok/viewmodel-shell 3.0.2 → 3.2.0

package/README.md

@@ -1,8 +1,12 @@
 # @ashley-shrok/viewmodel-shell
 
-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.
+A server-driven UI framework built around one promise: **an agent can build, test, and operate a complete app end-to-end — with no human in the loop and no browser anywhere in sight.** That falls out of a single idea: the interface is structured data, not code.
 
-The server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to the DOM (or, with the same wire, a terminal). The browser never owns application state — every interaction dispatches a semantic action to a single POST endpoint and the server returns the next state plus a fresh view.
+The server is a pure transformer — current UI state + an action → next state + a fresh view tree (a JSON tree of typed nodes). A thin adapter renders it to the DOM (or, with the same wire, a terminal) with zero app-specific code; the browser never owns application state. Because the whole interface is data, three things come for free:
+
+- **Build it blind** — there's nothing to *look at* to get it right; the view description is the truth.
+- **Test it without a browser** — every interaction is a plain function from input → output, so the entire UI is exercised with ordinary in-process unit tests (no headless browser, no Playwright, no flake) on every CI run. The quiet giant: the full-coverage, test-everything-through-the-UI regime that's usually aspirational is the *default* here.
+- **Use it like an API** — a finished app is already a clean, self-describing wire protocol, so a *different* agent can drive it (read the screen → act → read the next) as if it were an API, because it is one.
 
 The frontend is backend-agnostic: it speaks a small JSON contract over a single POST endpoint that takes `multipart/form-data` (with `_action` and `_state` fields). A .NET reference backend ships in the repo, but any language can produce the same contract.
 

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);
         }
     }
@@ -358,7 +359,7 @@ export class BrowserAdapter {
             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.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}`;
+            el.className = `vms-section vms-section--collapsible${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}${n.alignSelf ? ` vms-self--${n.alignSelf}` : ""}${n.maxWidth ? ` vms-maxw--${n.maxWidth}` : ""}`;
             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.
@@ -382,7 +383,7 @@ export class BrowserAdapter {
         // action — see validateSectionAction in server.ts.
         if (n.link) {
             const a = document.createElement("a");
-            a.className = `vms-section vms-section--linked${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}`;
+            a.className = `vms-section vms-section--linked${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}${n.alignSelf ? ` vms-self--${n.alignSelf}` : ""}${n.maxWidth ? ` vms-maxw--${n.maxWidth}` : ""}`;
             a.href = n.link.url;
             // Mirror LinkNode's external-attribute pattern (browser.ts ~line 666)
             // byte-for-byte: target=_blank + rel=noopener noreferrer when external.
@@ -426,7 +427,7 @@ export class BrowserAdapter {
             return;
         }
         const el = document.createElement("section");
-        el.className = `vms-section${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}${n.action ? " vms-section--clickable" : ""}`;
+        el.className = `vms-section${n.variant === "card" ? " vms-section--card" : ""}${n.tone ? ` vms-section--${n.tone}` : ""}${n.layout && n.layout !== "stack" ? ` vms-section--${n.layout}` : ""}${n.arrange ? ` vms-arrange--${n.arrange}` : ""}${n.align ? ` vms-align--${n.align}` : ""}${n.threshold ? ` vms-switch--${n.threshold}` : ""}${n.limit ? ` vms-switch-limit--${n.limit}` : ""}${n.minItem ? ` vms-cards-min--${n.minItem}` : ""}${n.alignSelf ? ` vms-self--${n.alignSelf}` : ""}${n.maxWidth ? ` vms-maxw--${n.maxWidth}` : ""}${n.action ? " vms-section--clickable" : ""}`;
         if (n.heading) {
             const h = document.createElement("h2");
             h.className = "vms-section__heading";
@@ -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;
@@ -104,6 +104,10 @@ export interface SectionNode {
     limit?: 2 | 3 | 4 | 5 | 6 | 7 | 8;
     /** For `layout:"cards"`: overrides the auto-fit minimum track width (today's fixed `--vms-card-min: 16rem`) — a CLOSED size scale (NOT raw CSS, per P2) mapping xs→10rem, sm→13rem, md→16rem (= today's default), lg→20rem, xl→24rem. Emits .vms-cards-min--{token} which sets `--vms-card-min` on that element (the existing `repeat(auto-fit, minmax(min(var(--vms-card-min),100%),1fr))` cards rule reads it). Omitted = no class → the inherited 16rem default holds = byte-identical to today. Intended for `cards`; harmless elsewhere (it only sets a variable the cards rule reads). (GRID-01) */
     minItem?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** Per-child cross-axis self-alignment — maps to CSS `align-self`, the per-child counterpart to the parent-level `align`. In the default vertical `stack` (a flex column) the cross axis is horizontal, so `start | center | end` = left/center/right, overriding the parent's alignment for THIS section only. The motivating case is a chat bubble (a `variant:"card"` section aligned to one side); general-purpose otherwise (a centered narrow group). Omitted = no class → the child inherits the parent's cross-axis alignment = byte-identical to today. Emits .vms-self--{value}. Closed union (CHILD-01). */
+    alignSelf?: "start" | "center" | "end";
+    /** Bounded content-width cap — a CLOSED token set (NOT raw CSS, per P2), implemented with `max-inline-size` (writing-mode-safe). Fractional values are proportional to the container (half→50%, two-thirds→66.6667%, three-quarters→75%) — the chat-gutter case, scaling with width; `prose` caps at the readable measure (min(65ch,100%), the Tailwind `max-w-prose` / Every-Layout `--measure` cap). The section still shrinks to its content below the cap. Omitted = no class → no cap (today's full-width behavior) = byte-identical. Emits .vms-maxw--{value}. Closed union (CHILD-02). */
+    maxWidth?: "half" | "two-thirds" | "three-quarters" | "prose";
     /** 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. */
@@ -203,6 +207,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 +274,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 +449,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 +486,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.2",
+  "version": "3.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

@@ -278,6 +278,24 @@ body {
 .vms-align--stretch  { align-items: stretch; }
 .vms-align--baseline { align-items: baseline; }
 
+/* ── Child-side modifiers: alignSelf (per-child cross axis → align-self) + maxWidth
+   (bounded content cap → max-inline-size) on a SectionNode (CHILD-01/02 / 3.2.0).
+   alignSelf is the per-child counterpart to align: in the default flex column stack
+   the cross axis is horizontal, so start/center/end = left/center/right and it
+   overrides the parent's alignment for ONE section — the chat-bubble case (a card
+   pinned to one side). maxWidth is a CLOSED token set (P2), not raw CSS: fractional
+   values scale with the container (the chat gutter), prose caps at the readable
+   measure min(65ch,100%) (the established min(X,100%) intrinsic-safety idiom, same
+   as the cards rule). Both intrinsic, zero @media (P1). An OMITTED field emits no
+   class → inherit parent alignment / no cap = byte-identical to today. ── */
+.vms-self--start  { align-self: flex-start; }
+.vms-self--center { align-self: center; }
+.vms-self--end    { align-self: flex-end; }
+.vms-maxw--half           { max-inline-size: 50%; }
+.vms-maxw--two-thirds     { max-inline-size: 66.6667%; }
+.vms-maxw--three-quarters { max-inline-size: 75%; }
+.vms-maxw--prose          { max-inline-size: min(65ch, 100%); }
+
 /* ── Layout preset: switcher (SWITCH-01/02 / 1.13.0) — the Every-Layout Switcher,
    zero @media. N equal items flip all-row ↔ all-stack ATOMICALLY via a negative
    `flex-basis`: above the threshold the basis `(threshold - 100%) * 999` goes
@@ -569,6 +587,15 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
    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.