@ashley-shrok/viewmodel-shell 0.6.0 → 0.7.1

package/dist/browser.js

@@ -25,6 +25,15 @@ export class BrowserAdapter {
         const focusId = active?.id || null;
         const selStart = active?.selectionStart ?? null;
         const selEnd = active?.selectionEnd ?? null;
+        // 0.7.1 (#7) — snapshot the WINDOW scroll position alongside element-level
+        // scroll. Without this, an action-driven re-render rebuilds the entire
+        // subtree and the viewport jumps (to top, or wherever HTMLElement.focus()
+        // scrolled the restored-focus element into view). Same preservation
+        // contract as element scroll: preserve unless the server explicitly
+        // navigates (a redirect IS a navigation, so it correctly does NOT
+        // round-trip through render — it goes through navigate()).
+        const winScrollX = window.scrollX;
+        const winScrollY = window.scrollY;
         const scrollMap = new Map();
         this.container.querySelectorAll("[id]").forEach(el => {
             if (el.scrollTop !== 0 || el.scrollLeft !== 0)
@@ -44,7 +53,11 @@ export class BrowserAdapter {
         if (focusId) {
             const el = this.container.querySelector(`#${CSS.escape(focusId)}`);
             if (el) {
-                el.focus();
+                // 0.7.1 (#7) — preventScroll stops focus() from yanking the viewport
+                // to the focused element. The window-scroll restore below still
+                // overrides any scroll that snuck in, but preventing the scroll in
+                // the first place is the cleaner contract.
+                el.focus({ preventScroll: true });
                 if (selStart !== null && selEnd !== null) {
                     try {
                         el.setSelectionRange(selStart, selEnd);
@@ -60,6 +73,10 @@ export class BrowserAdapter {
                 el.scrollLeft = left;
             }
         });
+        // 0.7.1 (#7) — restore the window scroll LAST so any defensive
+        // browser behavior earlier in this method (e.g. a future element
+        // bringing itself into view) gets overridden by the snapshot.
+        window.scrollTo(winScrollX, winScrollY);
     }
     navigate(url) {
         window.location.href = url;
@@ -186,7 +203,10 @@ export class BrowserAdapter {
     }
     page(n, parent, on) {
         const el = document.createElement("div");
-        el.className = `vms-page${n.density === "compact" ? " vms-page--compact" : ""}${n.layout && n.layout !== "stack" ? ` vms-page--${n.layout}` : ""}`;
+        el.className = `vms-page${n.density === "compact" ? " vms-page--compact" : ""}${n.layout && n.layout !== "stack" ? ` vms-page--${n.layout}` : ""}${
+        // 0.7.0 (#13) — width override: "wide" or "full" opt-in via a closed
+        // union. Omitted = no modifier class (existing 1080px cap holds).
+        n.width ? ` vms-page--${n.width}` : ""}`;
         if (n.title) {
             const h = document.createElement("h1");
             h.className = "vms-page__title";

package/dist/index.d.ts

@@ -41,6 +41,8 @@ export interface PageNode {
     density?: "comfortable" | "compact";
     /** Layout preset arranging direct children. Omitted or "stack" = current vertical flow (no modifier class). "split" (equal 2-up), "cards" (uniform grid), "sidebar" (thin + wide app shell) emit .vms-page--{value}. Closed union (D-01/D-02; sidebar D-28). */
     layout?: "stack" | "split" | "cards" | "sidebar";
+    /** Page-shell max-width override. Omitted = framework default cap (`--vms-page-max`, 1080px). "wide" = `--vms-page-max-wide` (1440px default), for data-heavy pages with wide tables. "full" = uncapped (max-width: none), for full-bleed dashboards. TUI ignores this (terminals fill naturally). Closed union (D-13 / issue #13). */
+    width?: "wide" | "full";
     children: ViewNode[];
 }
 export interface SectionNode {

package/dist/server.js

@@ -19,7 +19,12 @@ export function parseFormDataAction(formData) {
     const state = JSON.parse(stateRaw);
     const files = {};
     for (const [key, value] of formData.entries()) {
-        if (key !== "_action" && key !== "_state" && value instanceof File) {
+        // Narrow via typeof, NOT `instanceof File`: @types/node@22.19+ declares
+        // its own `File` interface alongside DOM's, and the TS narrowing for
+        // `instanceof File` ambiguates between the two on
+        // `FormDataEntryValue = string | File`. `typeof !== "string"` narrows
+        // the union to File unambiguously and is identical at runtime.
+        if (key !== "_action" && key !== "_state" && typeof value !== "string") {
             files[key] = value;
         }
     }

package/package.json

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

@@ -54,10 +54,15 @@
   --vms-text-lg:    1rem;
   --vms-text-xl:    1.375rem;
   --vms-text-2xl:   2.25rem;
-  /* Page shell (D-12) */
-  --vms-page-max:   1080px;
+  /* Page shell (D-12) — additive override seam (issue #13); host/theme-retunable
+     via a single :root{} override imported after the theme. The two width
+     ratchets — --vms-page-max-wide (1440px default) and --vms-page-max-full
+     (none) — back the `.vms-page--wide` / `.vms-page--full` modifier classes
+     emitted when PageNode.width is set. */
+  --vms-page-max:        1080px;
+  --vms-page-max-wide:   1440px;
   /* Card-grid min item width — additive override seam (D-05); host/theme-retunable */
-  --vms-card-min:   16rem;
+  --vms-card-min:        16rem;
 }
 
 /* ── Page chrome ──
@@ -116,6 +121,15 @@ body {
   --vms-space-lg: 1rem;
 }
 
+/* ── Width override (0.7.0 / issue #13) ──
+   `.vms-page--wide` opts a data-heavy page into a wider cap (1440px default)
+   without retuning the global --vms-page-max. `.vms-page--full` removes the
+   cap entirely (full-bleed). Both compose with --vms-page-max-wide for host
+   retunes — set `:root { --vms-page-max-wide: 1280px }` to change the wide
+   value app-wide while leaving the framework default alone. */
+.vms-page--wide { max-width: var(--vms-page-max-wide); }
+.vms-page--full { max-width: none; }
+
 /* ── 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