@ashley-shrok/viewmodel-shell 0.16.0 → 1.1.0

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.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

@@ -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);
@@ -599,6 +605,10 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 .vms-table__row:not(:last-child) .vms-table__td { border-bottom: 1px solid var(--vms-border); }
 .vms-table__row--clickable { cursor: pointer; }
 .vms-table__row--clickable:hover { background: var(--vms-surface); }
+.vms-table__row--clickable:focus-visible {
+  outline: 2px solid var(--vms-accent);
+  outline-offset: -2px;
+}
 /* Row status variants — tints derive from theme vars (color-mix), so a
    custom :root theme recolors them automatically; no app CSS, no literals. */
 .vms-table__row--done     { opacity: 0.6; }