@ashley-shrok/viewmodel-shell 0.4.5 → 0.4.7

package/dist/tui.js

@@ -12,6 +12,7 @@ const NO_CTX = {
     copiedKey: null,
     focusKey: () => undefined,
     interactive: false,
+    fill: false,
     draft: () => undefined,
 };
 /** OSC 52 clipboard write — the terminal-native analog of the clipboard API.
@@ -987,6 +988,8 @@ function App(props) {
         copiedKey,
         focusKey: (o) => map.get(o),
         interactive,
+        fill: fillViewport,
+        fillCols: fillViewport ? vp.cols : undefined,
         draft: (k) => draftFor(k),
         onFieldChange: (k, v) => setDraft((s) => ({ ...s, [k]: v })),
         onFieldSubmit,
@@ -1242,25 +1245,55 @@ export class TuiAdapter {
         }
     }
     /** page & section share the 4 layout presets. Information-honest, not pixel. */
-    layoutContainer(layout, children, density, rctx) {
+    layoutContainer(layout, children, density, rctx, topLevel = false) {
         const sp = this.spacing(density);
         const kids = (children ?? []).map((c, i) => this.renderNode(c, this.keyOf(c, i), density, undefined, rctx));
+        // 0.4.7 — numeric width ONLY at the page's TOP layout container (it IS
+        // the full terminal width). Everything below fills via Yoga align-stretch
+        // from this numeric anchor (proven on the real-adapter oracle). NESTED
+        // layoutContainer calls (a section's own children) pass topLevel=false ⇒
+        // no width ⇒ they get the correct PANE-relative width via stretch (a
+        // global numeric cols here would overflow a narrower pane). `cards` never
+        // gets it (uniform small-tile grid by design). Not top-level / not
+        // filling ⇒ {} ⇒ byte-identical.
+        const fillW = topLevel && rctx.fillCols ? { width: rctx.fillCols } : {};
         switch (layout) {
             case "split":
-                return (_jsx(Box, { flexDirection: "row", gap: sp.gap || 1, children: kids.map((el, i) => (_jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, children: el }, i))) }));
+                return (_jsx(Box, { flexDirection: "row", gap: sp.gap || 1, ...fillW, children: kids.map((el, i) => (_jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, children: el }, i))) }));
             case "cards":
                 return (_jsx(Box, { flexDirection: "row", flexWrap: "wrap", gap: sp.gap || 1, children: kids.map((el, i) => (_jsx(Box, { flexGrow: 0, flexShrink: 1, flexBasis: 28, minWidth: 20, children: el }, i))) }));
             case "sidebar": {
                 if (kids.length === 0)
                     return _jsx(Box, {});
                 const [rail, ...rest] = kids;
+                // Deterministic NUMERIC split when filling. `flexGrow` does NOT
+                // distribute reliably past a flexShrink:0 fixed-basis rail (real-
+                // adapter oracle: sidebar stayed 34 at cols 80 AND 160, while `split`
+                // — symmetric flexGrow — scaled). So when filling: fixed numeric rail
+                // + the exact remaining width on the main pane (it then carries the
+                // terminal width to its section via align-stretch). Not filling ⇒ the
+                // ORIGINAL flex props, byte-identical.
+                const cols = topLevel && rctx.fillCols ? rctx.fillCols : 0;
+                const filling = cols > 0;
+                const RAIL = 24;
+                const g = sp.gap || 1;
+                const mw = Math.max(1, cols - RAIL - g);
                 if (rest.length === 0) {
-                    return (_jsx(Box, { flexShrink: 0, flexBasis: 24, minWidth: 18, children: rail }));
+                    return filling ? (
+                    // flexDirection:column ⇒ the lone section align-stretches to the
+                    // numeric width (a default-row box would not width-stretch it).
+                    _jsx(Box, { flexDirection: "column", flexShrink: 0, ...fillW, children: rail })) : (_jsx(Box, { flexShrink: 0, flexBasis: 24, minWidth: 18, children: rail }));
                 }
-                return (_jsxs(Box, { flexDirection: "row", gap: sp.gap || 1, children: [_jsx(Box, { flexShrink: 0, flexBasis: 24, minWidth: 18, children: rail }), _jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, children: _jsx(Box, { flexDirection: "column", gap: sp.gap, children: rest }) })] }));
+                return (_jsxs(Box, { flexDirection: "row", gap: g, ...fillW, children: [filling ? (_jsx(Box, { flexShrink: 0, width: RAIL, children: rail })) : (_jsx(Box, { flexShrink: 0, flexBasis: 24, minWidth: 18, children: rail })), filling ? (
+                        // Single numeric-width column directly holding the detail
+                        // sections — exactly the `stack` shape the oracle proves scales
+                        // (a card section align-stretches to a numeric-width parent).
+                        // The extra auto-width wrapper that used to sit here broke that
+                        // align-stretch chain (oracle: card detail stuck at 38).
+                        _jsx(Box, { flexDirection: "column", gap: sp.gap, flexShrink: 1, width: mw, children: rest })) : (_jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, children: _jsx(Box, { flexDirection: "column", gap: sp.gap, children: rest }) }))] }));
             }
             default: // "stack" / undefined
-                return (_jsx(Box, { flexDirection: "column", gap: sp.gap, children: kids }));
+                return (_jsx(Box, { flexDirection: "column", gap: sp.gap, ...fillW, children: kids }));
         }
     }
     // ── the node switch ──────────────────────────────────────────────────────
@@ -1269,7 +1302,7 @@ export class TuiAdapter {
             case "page": {
                 const d = node.density === "compact" ? "compact" : "comfortable";
                 const sp = this.spacing(d);
-                return (_jsxs(Box, { flexDirection: "column", gap: sp.gap, children: [node.title ? (_jsx(Box, { children: _jsx(Text, { bold: true, underline: true, children: node.title }) })) : null, this.layoutContainer(node.layout, node.children ?? [], d, rctx)] }, key));
+                return (_jsxs(Box, { flexDirection: "column", gap: sp.gap, ...(rctx.fillCols ? { width: rctx.fillCols, flexGrow: 1 } : {}), children: [node.title ? (_jsx(Box, { children: _jsx(Text, { bold: true, underline: true, children: node.title }) })) : null, this.layoutContainer(node.layout, node.children ?? [], d, rctx, true)] }, key));
             }
             case "section": {
                 const sp = this.spacing(density);

package/package.json

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