@ashley-shrok/viewmodel-shell 0.4.6 → 0.4.8

package/dist/tui.js

@@ -989,6 +989,7 @@ function App(props) {
         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,
@@ -1244,29 +1245,52 @@ 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.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%" } : {};
+        // 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, ...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))) }));
+                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, ...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 }) })] }));
+                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, ...fillW, children: kids }));
@@ -1278,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, ...(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));
+                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);
@@ -1304,10 +1328,14 @@ export class TuiAdapter {
                 if (!href) {
                     return (_jsx(Box, { children: _jsx(Text, { underline: true, color: inherited?.color, dimColor: inherited?.dim, children: node.label }) }, key));
                 }
-                // OSC 8 hyperlink. As the SOLE child of its own Box with no wrap, the
+                // OSC 8 hyperlink: ESC ]8;; <uri> BEL <label> ESC ]8;; BEL. The
+                // ESC introducer + BEL terminator are LOAD-BEARING — without them
+                // (a long-latent bug fixed in 0.4.8) this is plain `]8;;…` garbage
+                // text in every terminal. `\x1b`/`\x07` escapes match osc52()'s
+                // proven style. As the SOLE child of its own Box with no wrap, the
                 // string-width over-count (string-width does not strip OSC 8) stays
                 // contained to this line and cannot corrupt sibling layout.
-                const osc = `]8;;${node.href}${node.label}]8;;${copied ? " ✓ copied" : ""}`;
+                const osc = `\x1b]8;;${node.href}\x07${node.label}\x1b]8;;\x07${copied ? " ✓ copied" : ""}`;
                 return this.focusWrap(_jsx(Box, { children: _jsx(Text, { wrap: "truncate-end", underline: true, color: inherited?.color, dimColor: inherited?.dim, children: osc }) }, key), focused, key);
             }
             case "stat-bar":

package/package.json

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