@ashley-shrok/viewmodel-shell 0.4.5 → 0.4.6

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,7 @@ function App(props) {
         copiedKey,
         focusKey: (o) => map.get(o),
         interactive,
+        fill: fillViewport,
         draft: (k) => draftFor(k),
         onFieldChange: (k, v) => setDraft((s) => ({ ...s, [k]: v })),
         onFieldSubmit,
@@ -1245,9 +1247,16 @@ export class TuiAdapter {
     layoutContainer(layout, children, density, rctx) {
         const sp = this.spacing(density);
         const kids = (children ?? []).map((c, i) => this.renderNode(c, this.keyOf(c, i), density, undefined, rctx));
+        // 0.4.6 — when filling a real terminal, the layout spine must carry the
+        // terminal width into the panes. Probed fact: Yoga align-stretch ALONE
+        // does NOT fill here; an explicit width:"100%" on the content wrapper
+        // does. `cards` is intentionally excluded (a uniform small-tile grid by
+        // design — force-filling defeats the preset). fill=false on the static /
+        // non-TTY path ⇒ {} ⇒ byte-identical to pre-0.4.6.
+        const fillW = rctx.fill ? { width: "100%" } : {};
         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: rctx.fill ? (_jsx(Box, { width: "100%", flexDirection: "column", children: el })) : (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": {
@@ -1257,10 +1266,10 @@ export class TuiAdapter {
                 if (rest.length === 0) {
                     return (_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: sp.gap || 1, ...fillW, 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, ...fillW, 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 +1278,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.fill ? { width: "100%", 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)] }, 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.6",
   "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",