@ashley-shrok/viewmodel-shell 0.16.0 → 1.0.1

package/dist/server.js

@@ -8,6 +8,172 @@
 // Re-export the ViewNode hierarchy and wire types so a backend can import
 // everything it needs from one place.
 export * from "./index.js";
+/**
+ * Walk a ViewNode tree and assert that every dispatch-bearing action name names
+ * exactly one operation. Two occurrences are considered "the same operation"
+ * iff they share the same enclosing FormNode reference; otherwise a duplicate
+ * action name is a violation.
+ *
+ * Call this from your GET handler before returning the initial response if you
+ * want the same protection at initial-load time — the action-handler wrapper
+ * (`createAction`) calls it automatically on every response that carries `vm`.
+ *
+ * @throws Error when a violation is found. The message names the colliding
+ *   action and suggests the two fixes (rename one node, or move both into the
+ *   same enclosing form).
+ */
+export function validateActionNames(vm) {
+    const occurrences = [];
+    collectActions(vm, null, occurrences);
+    // Group by action name; for each group, verify all occurrences share the
+    // same enclosing FormNode (and that form is non-null). Anything else is a
+    // violation.
+    const byName = new Map();
+    for (const occ of occurrences) {
+        const bucket = byName.get(occ.name);
+        if (bucket)
+            bucket.push(occ);
+        else
+            byName.set(occ.name, [occ]);
+    }
+    for (const [name, group] of byName) {
+        if (group.length < 2)
+            continue;
+        const firstForm = group[0].enclosingForm;
+        // Allowed iff every occurrence is inside the SAME non-null form.
+        const allInSameForm = firstForm !== null && group.every((o) => o.enclosingForm === firstForm);
+        if (!allInSameForm) {
+            throw new Error(`Duplicate action name '${name}' dispatched from semantically distinct nodes. ` +
+                `Each action name must name exactly one operation. Either rename one of the ` +
+                `nodes (e.g. '${name}-X' / '${name}-Y') or move them into the same surrounding ` +
+                `form if they are intended to fire the same operation.`);
+        }
+    }
+}
+function collectActions(node, enclosingForm, out) {
+    switch (node.type) {
+        case "page": {
+            const page = node;
+            for (const child of page.children)
+                collectActions(child, enclosingForm, out);
+            return;
+        }
+        case "section": {
+            const section = node;
+            for (const child of section.children)
+                collectActions(child, enclosingForm, out);
+            return;
+        }
+        case "list": {
+            const list = node;
+            for (const child of list.children)
+                collectActions(child, enclosingForm, out);
+            return;
+        }
+        case "list-item": {
+            const li = node;
+            for (const child of li.children)
+                collectActions(child, enclosingForm, out);
+            return;
+        }
+        case "form": {
+            const form = node;
+            if (form.submitAction)
+                recordAction(form.submitAction, form, out);
+            if (form.buttons) {
+                for (const btn of form.buttons)
+                    recordAction(btn.action, form, out);
+            }
+            for (const child of form.children)
+                collectActions(child, form, out);
+            return;
+        }
+        case "field": {
+            const field = node;
+            if (field.action)
+                recordAction(field.action, enclosingForm, out);
+            return;
+        }
+        case "checkbox": {
+            const cb = node;
+            if (cb.action)
+                recordAction(cb.action, enclosingForm, out);
+            return;
+        }
+        case "button": {
+            const btn = node;
+            recordAction(btn.action, enclosingForm, out);
+            return;
+        }
+        case "tabs": {
+            const tabs = node;
+            for (const tab of tabs.tabs)
+                recordAction(tab.action, enclosingForm, out);
+            return;
+        }
+        case "modal": {
+            const modal = node;
+            if (modal.dismissAction)
+                recordAction(modal.dismissAction, enclosingForm, out);
+            for (const child of modal.children)
+                collectActions(child, enclosingForm, out);
+            if (modal.footer) {
+                for (const child of modal.footer)
+                    collectActions(child, enclosingForm, out);
+            }
+            return;
+        }
+        case "table": {
+            const table = node;
+            if (table.sortActions) {
+                for (const action of Object.values(table.sortActions)) {
+                    recordAction(action, enclosingForm, out);
+                }
+            }
+            if (table.filterAction)
+                recordAction(table.filterAction, enclosingForm, out);
+            if (table.pagination?.prevAction) {
+                recordAction(table.pagination.prevAction, enclosingForm, out);
+            }
+            if (table.pagination?.nextAction) {
+                recordAction(table.pagination.nextAction, enclosingForm, out);
+            }
+            for (const row of table.rows) {
+                if (row.actions) {
+                    // row.actions is ViewNode[] — it can include bind-only nodes (e.g. a
+                    // per-row CheckboxNode used for selection has no .action). Filter to
+                    // ButtonNodes the same way the .NET validator does (OfType<ButtonNode>())
+                    // before recording — otherwise the validator throws on a non-button
+                    // entry's missing .action property. Phase 6 surfaced this when
+                    // TableSelection was removed and per-row selection moved into
+                    // row.actions as bound CheckboxNodes (06-04).
+                    for (const node of row.actions) {
+                        // TableRow.actions is typed ButtonNode[] but Phase 6 (06-04)
+                        // started using it for bind-only CheckboxNodes too — the .NET
+                        // twin types it IReadOnlyList<ViewNode>. Narrow through unknown
+                        // so both branches type-check until the TS type widens.
+                        const n = node;
+                        if (n.type === "button") {
+                            recordAction(n.action, enclosingForm, out);
+                        }
+                        else if (n.type === "checkbox") {
+                            if (n.action)
+                                recordAction(n.action, enclosingForm, out);
+                        }
+                    }
+                }
+            }
+            return;
+        }
+        // Nodes with no dispatch-bearing actions of their own:
+        //   text, link, image, stat-bar, progress, copy-button
+        default:
+            return;
+    }
+}
+function recordAction(action, enclosingForm, out) {
+    out.push({ name: action.name, enclosingForm });
+}
 /** Parse a multipart/form-data action body — the wire format the TypeScript shell uses. */
 export function parseFormDataAction(formData) {
     const actionRaw = formData.get("_action");
@@ -30,19 +196,20 @@ export function parseFormDataAction(formData) {
     }
     return {
         name: action.name,
-        context: action.context ?? null,
         state,
         files,
     };
 }
-/** Parse a flat JSON action body — { name, context, state }. For curl/agent callers. */
+/** Parse a flat JSON action body — `{name, state}`. For curl/agent callers. */
 export function parseJsonAction(body) {
     const parsed = typeof body === "string"
         ? JSON.parse(body)
         : body;
+    if (typeof parsed.name !== "string" || parsed.name === "") {
+        throw new Error("Missing required 'name' field in action payload");
+    }
     return {
         name: parsed.name,
-        context: parsed.context ?? null,
         state: parsed.state,
         files: {},
     };
@@ -64,6 +231,92 @@ export const shellSideEffect = {
     download: (url, filename) => ({ type: "download", url, ...(filename != null ? { filename } : {}) }),
 };
 // ─── Action handler factory ──────────────────────────────────────────────────
+/**
+ * Thrown by an action handler to signal a malformed/invalid request. The
+ * createAction wrapper catches this and returns a 400 with the error
+ * message in the body, matching the .NET twin's BadRequest("...") path.
+ * Reserved for "structurally invalid request the user can't see" (missing
+ * required action field, etc.) — NOT for routine app validation (that stays
+ * state-based per gotcha #4). No `code` is set on the wire entry (D-08).
+ */
+export class BadRequestError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = "BadRequestError";
+    }
+}
+/**
+ * Thrown by an action handler to signal that the dispatched action name is
+ * not recognised. The createAction wrapper catches this and returns a 400
+ * with `code: "unknown_action"` in the envelope, allowing agents to distinguish
+ * "I sent a name your tree doesn't expose" from "your handler crashed."
+ *
+ * Usage — add a default arm to your dispatch switch:
+ *   default: throw new UnknownActionError(payload.name);
+ *
+ * Mirrors .NET `UnknownActionException` — both backends use the same wire code.
+ */
+export class UnknownActionError extends Error {
+    /** The offending action name sent by the client. */
+    actionName;
+    constructor(actionName) {
+        super(`Unknown action: ${actionName}`);
+        this.name = "UnknownActionError";
+        this.actionName = actionName;
+    }
+}
+/**
+ * Stable, framework-only error code vocabulary. Apps MUST NOT set these —
+ * the framework sets `code` on framework-detected failures only. Agents
+ * that want generic handling check `ok`; agents that want to branch by
+ * failure class check `code` against these constants.
+ *
+ * D-03 lock: "small, stable, framework-only set."
+ */
+export const ERR_CODES = {
+    /** Malformed / unparseable request body. HTTP 400. */
+    PARSE: "parse_error",
+    /** App threw `UnknownActionError` (action name not recognised). HTTP 400. */
+    UNKNOWN_ACTION: "unknown_action",
+    /** Built view tree violates the action-name uniqueness rule. HTTP 500. */
+    INVALID_TREE: "invalid_tree",
+    /** App handler threw an unrecognised exception. HTTP 500. */
+    UNCAUGHT: "uncaught_exception",
+};
+/**
+ * Build a JSON-stringified `{ok: false, errors: [...]}` envelope.
+ * Uses the conditional-spread pattern to omit `path` and `code` when
+ * undefined — matching the .NET WhenWritingNull null-omission contract.
+ */
+function errorEnvelope(entries) {
+    const serialized = entries.map(({ message, path, code }) => ({
+        message,
+        ...(path != null ? { path } : {}),
+        ...(code != null ? { code } : {}),
+    }));
+    return JSON.stringify({ ok: false, errors: serialized });
+}
+/**
+ * Derive a safe wire message from an unknown thrown value.
+ * T1 info-disclosure mitigation: only copies `Error.prototype.message`
+ * for Error instances; substitutes a generic string for non-Error throws
+ * so unknown shapes never reach the wire.
+ */
+function errorMessageFromUnknownThrow(err) {
+    if (err instanceof Error)
+        return err.message;
+    return "Internal server error";
+}
+/**
+ * Shared response factory — deduplicates the JSON + Content-Type header
+ * boilerplate across the four error cases and the success path.
+ */
+function jsonResponse(body, status) {
+    return new Response(body, {
+        status,
+        headers: { "Content-Type": "application/json" },
+    });
+}
 /**
  * Web Fetch API–native request handler factory. Auto-detects content-type
  * (application/json vs multipart/form-data), parses the body, calls your
@@ -92,14 +345,42 @@ export function createAction(handler) {
             }
         }
         catch (err) {
-            return new Response(JSON.stringify({ error: err.message }), {
-                status: 400,
-                headers: { "Content-Type": "application/json" },
-            });
-        }
-        const result = await handler(payload);
-        return new Response(JSON.stringify(result), {
-            headers: { "Content-Type": "application/json" },
-        });
+            // Parse failure — client sent malformed input. 400.
+            return jsonResponse(errorEnvelope([{ message: err.message, code: ERR_CODES.PARSE }]), 400);
+        }
+        let result;
+        try {
+            result = await handler(payload);
+        }
+        catch (err) {
+            if (err instanceof BadRequestError) {
+                // Structurally invalid request — no `code` per D-08.
+                return jsonResponse(errorEnvelope([{ message: err.message }]), 400);
+            }
+            if (err instanceof UnknownActionError) {
+                // App threw to signal an unknown action name. 400 per D-11.
+                return jsonResponse(errorEnvelope([{ message: err.message, code: ERR_CODES.UNKNOWN_ACTION }]), 400);
+            }
+            // Any other throw: server-side failure. Log server-side for observability
+            // (T1: stack trace stays on the server, only safe message reaches the wire).
+            console.error("[ViewModelShell] Uncaught exception in action handler:", err);
+            return jsonResponse(errorEnvelope([{ message: errorMessageFromUnknownThrow(err), code: ERR_CODES.UNCAUGHT }]), 500);
+        }
+        // Phase 06 / WIRE-05 — enforce action-name uniqueness on the built tree
+        // before it leaves the server. A violation here is a server-side bug, so
+        // we surface it as a 500 (the parse-error path above is a 400 because the
+        // client sent malformed input). Only run when the response carries a vm
+        // (redirect-only responses have nothing to walk).
+        if (result.vm) {
+            try {
+                validateActionNames(result.vm);
+            }
+            catch (err) {
+                return jsonResponse(errorEnvelope([{ message: err.message, code: ERR_CODES.INVALID_TREE }]), 500);
+            }
+        }
+        // Phase 07 / ERROR-01 — every successful response acquires ok:true at the
+        // response edge. Controllers / app handlers do NOT set ok themselves.
+        return jsonResponse(JSON.stringify({ ok: true, ...result }), 200);
     };
 }

package/dist/tui.d.ts

@@ -1,4 +1,4 @@
-import type { Adapter, ActionEvent, ViewNode } from "./index.js";
+import type { Adapter, ActionEvent, ViewNode, StateAccess } from "./index.js";
 interface TuiOpts {
     /** "fill" (default) takes the full terminal via alternate-screen buffer;
      *  "content" renders intrinsic content size in the inline scrollback. */
@@ -49,7 +49,7 @@ export declare class TuiAdapter implements Adapter {
     private setPendingButton;
     private copy;
     private resolveFieldValue;
-    render(vm: ViewNode, onAction: (action: ActionEvent) => void): void;
+    render(vm: ViewNode, onAction: (action: ActionEvent) => void, _stateAccess?: StateAccess): void;
     private init;
     private flushPending;
     private navigateForLinks;

package/dist/tui.js

@@ -159,7 +159,9 @@ export class TuiAdapter {
     // (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) {
+    render(vm, onAction, 
+    // TODO Phase 7: implement bindable input flow for terminal — currently inputs are read-only display
+    _stateAccess) {
         if (this.disposed)
             return;
         this.pendingButtonKey = null;
@@ -298,10 +300,10 @@ export class TuiAdapter {
             const c = summary.primaryCheckbox;
             if (c == null || c.action == null)
                 return;
-            this.pending.onAction({
-                name: c.action.name,
-                context: { ...(c.action.context ?? {}), checked: !c.checked },
-            });
+            // Phase 6: action name only — the checked value lives in state at the
+            // checkbox's bind path. TUI bindable input flow is TODO for Phase 7;
+            // until then this dispatches the action without flipping local state.
+            this.pending.onAction({ name: c.action.name });
         }
     }
     /** Teardown — restore terminal cleanly. Idempotent. */
@@ -902,51 +904,36 @@ function TableView({ node, ctx }) {
     const isPaneFocusable = !ctx.modalActive || ctx.insideModal;
     const paneIndex = isPaneFocusable ? ctx.paneCounter.current++ : -1;
     const focused = isPaneFocusable && paneIndex === ctx.focusedPaneIndex;
-    // B5 — header click toggles sort. Direction policy: clicking the
-    // currently-sorted column flips asc↔desc; clicking any other column
-    // starts at asc. Matches BrowserAdapter table semantics.
+    // Phase 6 wire-shape: per-column sortActions keyed by column key. TUI input
+    // is stubbed until Phase 7; the click dispatches the per-column action by
+    // name only — sort intent should be written to state at node.sortBind by a
+    // future bindable TUI implementation.
+    // TODO Phase 7: implement bindable sort/filter/pagination state writes via stateAccess.
     const onHeaderClick = (columnKey) => {
-        if (!node.sortAction)
+        const a = node.sortActions?.[columnKey];
+        if (!a)
             return;
-        const direction = node.sortColumn === columnKey && node.sortDirection === "asc" ? "desc" : "asc";
-        ctx.onAction({
-            name: node.sortAction.name,
-            context: { ...(node.sortAction.context ?? {}), column: columnKey, direction },
-        });
+        ctx.onAction({ name: a.name });
     };
-    // Selection — leading [x]/[ ] column. TUI is render-only: checkboxes display
-    // selectedIds; clicks are inert (the TUI doesn't track DOM-equivalent state
-    // across the hook-less conformance walker). Bulk actions live in
-    // selection.buttons[]; the harvest reads sel.selectedIds (server's
-    // pre-selection). The browser carries the interactive surface.
-    const sel = node.selection;
-    const effectiveSet = sel ? new Set(sel.selectedIds) : null;
-    const allOnPage = sel != null && node.rows.length > 0 &&
-        node.rows.every((r) => r.id != null && effectiveSet.has(r.id));
-    return (_jsx("scrollbox", { focused: focused, focusable: isPaneFocusable, borderColor: focused ? "#88aaff" : "#555555", focusedBorderColor: "#88aaff", flexGrow: 1, flexShrink: 1, children: _jsxs("box", { flexDirection: "column", children: [sel?.buttons && sel.buttons.length > 0 ? (_jsx("box", { flexDirection: "row", gap: 1, children: sel.buttons.map((btn, i) => {
-                        const harvestCtx = {
-                            ...ctx,
-                            onAction: (action) => {
-                                const ids = [...effectiveSet];
-                                ctx.onAction({
-                                    name: action.name,
-                                    context: { ...(action.context ?? {}), selectedIds: ids },
-                                });
-                            },
-                        };
-                        return _jsx(ButtonView, { node: btn, ctx: harvestCtx }, i);
-                    }) })) : null, _jsxs("box", { flexDirection: "row", gap: 2, children: [sel ? (_jsx("text", { attributes: 1 /* BOLD */, children: allOnPage ? "[x]" : "[ ]" })) : null, node.columns.map((c) => {
-                            const isSorted = node.sortColumn === c.key;
-                            const caret = isSorted ? (node.sortDirection === "desc" ? " ↓" : " ↑") : "";
-                            // B5 — only sortable headers respond to clicks (matches BrowserAdapter).
-                            const clickable = c.sortable && node.sortAction != null;
+    // Phase 6 removed TableSelection from the framework. Per-row selection now
+    // expressed as bound CheckboxNode cells; bulk-action toolbars are plain
+    // ButtonNodes. TUI render is reduced accordingly.
+    const sel = undefined;
+    const effectiveSet = null;
+    const allOnPage = false;
+    return (_jsx("scrollbox", { focused: focused, focusable: isPaneFocusable, borderColor: focused ? "#88aaff" : "#555555", focusedBorderColor: "#88aaff", flexGrow: 1, flexShrink: 1, children: _jsxs("box", { flexDirection: "column", children: [_jsxs("box", { flexDirection: "row", gap: 2, children: [sel ? (_jsx("text", { attributes: 1 /* BOLD */, children: allOnPage ? "[x]" : "[ ]" })) : null, node.columns.map((c) => {
+                            // Phase 6 — sortBind holds {column, direction}. TUI display of the
+                            // sort caret is TODO Phase 7 (would read from stateAccess.read).
+                            const isSorted = false;
+                            const caret = isSorted ? " ↑" : "";
+                            const clickable = c.sortable && node.sortActions?.[c.key] != null;
                             const onMouseDown = clickable ? () => onHeaderClick(c.key) : undefined;
                             return (_jsxs("text", { attributes: 1 /* BOLD */, ...(onMouseDown ? { onMouseDown } : {}), children: [c.label, caret] }, c.key));
                         })] }), node.columns.some((c) => c.filterable) ? (_jsxs("box", { flexDirection: "row", gap: 2, children: [sel ? _jsx("text", { fg: "#888888", children: "   " }) : null, node.columns.map((c) => (_jsx("text", { fg: "#888888", children: c.filterable ? (c.filterValue ? `[${c.filterValue}]` : "[filter]") : "" }, c.key)))] })) : null, node.rows.map((row, ri) => {
-                    // B5 — row click dispatches row.action when present.
-                    const onRowClick = row.action
-                        ? () => ctx.onAction(row.action)
-                        : undefined;
+                    // Phase 6 — TableRow.action → TableRow.actions[]. Per-row buttons
+                    // render as ButtonNodes; entire-row click is no longer a row-level
+                    // concept. Apps that want a clickable row composed via row.actions[].
+                    const onRowClick = undefined;
                     return (_jsxs("box", { flexDirection: "row", gap: 2, ...(onRowClick ? { onMouseDown: onRowClick } : {}), children: [sel ? (() => {
                                 const isSel = row.id != null && effectiveSet.has(row.id);
                                 return (_jsx("text", { fg: isSel ? "#88ff88" : "#888888", children: isSel ? "[x]" : "[ ]" }));
@@ -974,13 +961,13 @@ function TableView({ node, ctx }) {
                     const totalPages = Math.max(1, Math.ceil(pg.totalRows / pg.pageSize));
                     const from = pg.totalRows === 0 ? 0 : (pg.page - 1) * pg.pageSize + 1;
                     const to = Math.min(pg.page * pg.pageSize, pg.totalRows);
-                    const go = (p) => ctx.onAction({
-                        name: pg.action.name,
-                        context: { ...(pg.action.context ?? {}), page: p },
-                    });
-                    const canPrev = pg.page > 1;
-                    const canNext = pg.page < totalPages;
-                    return (_jsxs("box", { flexDirection: "row", gap: 2, children: [_jsx("text", { fg: "#888888", children: `${from}–${to} of ${pg.totalRows}` }), _jsx("text", { fg: canPrev ? "#88aaff" : "#555555", ...(canPrev ? { onMouseDown: () => go(pg.page - 1) } : {}), children: "‹ Prev" }), _jsx("text", { fg: canNext ? "#88aaff" : "#555555", ...(canNext ? { onMouseDown: () => go(pg.page + 1) } : {}), children: "Next ›" })] }));
+                    const goPrev = () => { if (pg.prevAction)
+                        ctx.onAction({ name: pg.prevAction.name }); };
+                    const goNext = () => { if (pg.nextAction)
+                        ctx.onAction({ name: pg.nextAction.name }); };
+                    const canPrev = pg.page > 1 && pg.prevAction != null;
+                    const canNext = pg.page < totalPages && pg.nextAction != null;
+                    return (_jsxs("box", { flexDirection: "row", gap: 2, children: [_jsx("text", { fg: "#888888", children: `${from}–${to} of ${pg.totalRows}` }), _jsx("text", { fg: canPrev ? "#88aaff" : "#555555", ...(canPrev ? { onMouseDown: goPrev } : {}), children: "‹ Prev" }), _jsx("text", { fg: canNext ? "#88aaff" : "#555555", ...(canNext ? { onMouseDown: goNext } : {}), children: "Next ›" })] }));
                 })() : null] }) }));
 }
 // ── minimum-viable text surface for the rest of the node set ───────────────
@@ -1007,19 +994,14 @@ function ButtonView({ node, ctx }) {
     return (_jsxs("text", { ...(fg != null ? { fg } : {}), ...(isPending ? { dimColor: true } : {}), onMouseDown: onMouseDown, children: ["[ ", label, " ]"] }));
 }
 function CheckboxView({ node, ctx }) {
-    const glyph = node.checked ? "[x]" : "[ ]";
-    // B5 — mouse click toggles. When node.action is defined, dispatch it with
-    // the NEW checked value merged into context (matches BrowserAdapter's
-    // checkbox onChange wire: `{checked: !node.checked}`). When no action,
-    // the click has no semantic effect — the visual state is server-owned
-    // and only changes on the next server response that flips node.checked.
+    // Phase 6 — checkbox.checked removed; value lives in state at node.bind.
+    // TUI bindable read is TODO Phase 7; rendering as unchecked until then.
+    const glyph = "[ ]";
+    // Click dispatches the action name; bindable write-back is TODO Phase 7.
     const onMouseDown = () => {
         if (!node.action)
             return;
-        ctx.onAction({
-            name: node.action.name,
-            context: { ...(node.action.context ?? {}), checked: !node.checked },
-        });
+        ctx.onAction({ name: node.action.name });
     };
     return _jsxs("text", { onMouseDown: onMouseDown, children: [glyph, " ", node.label ?? ""] });
 }
@@ -1028,13 +1010,13 @@ function CheckboxView({ node, ctx }) {
 // value: tab.value }` merged. Selected tab renders bold; unselected tabs
 // render dim. Keyboard activation (Tab on focused tab-bar → cycle) is B5.
 function TabsView({ node, ctx }) {
+    // Phase 6 — TabsNode.action removed; each tab carries its own unique
+    // action name. The renderer writes tab.value to state at node.bind before
+    // dispatching (TODO Phase 7 — bindable write here is a no-op for now).
     return (_jsx("box", { flexDirection: "row", gap: 1, children: node.tabs.map((t) => {
             const selected = t.value === node.selected;
             const onMouseDown = () => {
-                ctx.onAction({
-                    name: node.action.name,
-                    context: { ...(node.action.context ?? {}), value: t.value },
-                });
+                ctx.onAction({ name: t.action.name });
             };
             return (_jsx("text", { onMouseDown: onMouseDown, attributes: selected ? 1 /* BOLD */ : 0, ...(selected ? {} : { fg: "#888888" }), children: t.label }, t.value));
         }) }));
@@ -1109,31 +1091,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 }) {
-    // 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.
+    // Phase 6 — context-assembly removed. Field values live in state at their
+    // bind paths; the server reads them from `state`. The form dispatches just
+    // the action name. TUI form-harvest behavior under the new wire is TODO
+    // Phase 7 (would write each field value to state via stateAccess.write).
     const submitFormWith = (base) => {
-        const merged = { ...(base.context ?? {}) };
-        const collect = (n) => {
-            if (n.type === "field") {
-                const wireValue = n.value ?? "";
-                // The map may not have an entry for fields the user hasn't touched
-                // (or for hidden fields we register on render). Fall back to the
-                // wire value in that case — the resolveFieldValue plumbing keeps the
-                // two in sync for fields that DID render.
-                const v = ctx.resolveFieldValue(n.name, wireValue);
-                // Checkbox-typed fields submit as boolean, not string.
-                merged[n.name] = n.inputType === "checkbox" ? v === "true" : v;
-            }
-            const children = n.children;
-            if (children)
-                for (const c of children)
-                    collect(c);
-        };
-        for (const child of node.children)
-            collect(child);
-        ctx.onAction({ name: base.name, context: merged });
+        ctx.onAction({ name: base.name });
     };
     // Enter-in-a-field submits the default action — only wired when present.
     const submitAction = node.submitAction;
@@ -1185,7 +1148,13 @@ function FormView({ node, ctx }) {
 //   initialValue=…> — the conformance walker is extended in this phase to
 //   read those props as user-visible information.
 function FieldView({ node, ctx }) {
-    const wireValue = node.value ?? "";
+    // Phase 6 — FieldNode.value removed; current value lives in state at
+    // node.bind. Until TUI bindable input flow ships (Phase 7), the wire value
+    // is treated as empty and the local field-values map remains the source of
+    // displayed text. The `bind` field is recorded so the field can be wired
+    // when stateAccess plumbing arrives.
+    const wireValue = "";
+    void node.bind;
     // Resolve through the adapter so draft preservation runs as a side effect
     // even for hidden fields (the form needs their wire value at submit time).
     const currentValue = ctx.resolveFieldValue(node.name, wireValue);
@@ -1199,6 +1168,8 @@ function FieldView({ node, ctx }) {
     const focused = ctx.inFocusedPane && inputIndex === 0;
     // Submit handler — common to text/textarea/select. Wired to the parent
     // form (if any), else dispatches the field's own action (immediate-dispatch).
+    // Phase 6 — action carries name only; bindable write of latestValue to
+    // state at node.bind is TODO Phase 7.
     const handleSubmit = (latestValue) => {
         if (latestValue !== undefined)
             ctx.setFieldValue(node.name, latestValue);
@@ -1207,13 +1178,7 @@ function FieldView({ node, ctx }) {
             return;
         }
         if (node.action) {
-            ctx.onAction({
-                name: node.action.name,
-                context: {
-                    ...(node.action.context ?? {}),
-                    [node.name]: latestValue ?? ctx.resolveFieldValue(node.name, wireValue),
-                },
-            });
+            ctx.onAction({ name: node.action.name });
         }
     };
     // ── textarea / code: multi-line editor ─────────────────────────────────

package/package.json

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

@@ -133,6 +133,15 @@ body {
 .vms-page--wide { max-width: var(--vms-page-max-wide); }
 .vms-page--full { max-width: none; }
 
+/* ── Section ── */
+.vms-section { display: flex; flex-direction: column; gap: var(--vms-space-sm); }
+.vms-section__heading {
+  font-size: var(--vms-text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--vms-text-muted);
+}
+
 /* ── Layout preset: cards (LAYOUT-03, D-04) ──
    auto-fit intrinsically collapses toward 1 column as the container narrows;
    min(...,100%) floor prevents single-column overflow on a narrow viewport
@@ -168,6 +177,12 @@ body {
   grid-column: 1 / -1;
 }
 
+/* Grid items default to min-width: auto; setting min-width: 0 lets wide media (full-width images, long text) shrink to the track instead of blowing it out. */
+.vms-page--cards > *,
+.vms-section--cards > *,
+.vms-page--split > *,
+.vms-section--split > * { min-width: 0; }
+
 /* ── Layout preset: sidebar (D-28) — thin + wide app shell ──
    The common real-app shell: a narrow first column + a wide main that
    grows to fill. Flex-wrap "holy grail": main grows aggressively so the
@@ -194,15 +209,6 @@ body {
 .vms-page--sidebar > .vms-page__title,
 .vms-section--sidebar > .vms-section__heading { flex: 0 0 100%; }
 
-/* ── Section ── */
-.vms-section { display: flex; flex-direction: column; gap: var(--vms-space-sm); }
-.vms-section__heading {
-  font-size: var(--vms-text-xs);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--vms-text-muted);
-}
-
 /* ── Section variant: card (THEME-04) — grouped surface, existing seam vars ── */
 .vms-section--card {
   background: var(--vms-surface);