stitch2 0.22.5 → 0.22.7

package/dist/canvas.html

@@ -92,6 +92,7 @@
   .frame.ready .device iframe { visibility: visible; }
   .device .shot { display: block; left: 0; pointer-events: none; position: absolute; top: 0; user-select: none; }
   .device .shot:not([src]) { display: none; }
+  .frame.ready .device .shot { visibility: hidden; }
   .device .shield { cursor: pointer; inset: 0; position: absolute; }
   .frame.live .shield { display: none; }
   .frame.changed .device { animation: flash 900ms ease-out; }
@@ -288,7 +289,9 @@ const copyButton = (text, title) => {
   b.onclick = (e) => { e.stopPropagation(); copy(text) }
   return b
 }
-let view = JSON.parse(localStorage.getItem('stitch2-view') ?? 'null') ?? { x: 40, y: 60, z: 0.4 }
+const VIEW_KEY = 'stitch2-view-v2'
+const savedView = JSON.parse(localStorage.getItem(VIEW_KEY) ?? 'null')
+let view = savedView ?? { x: 40, y: 60, z: 0.4 }
 const filters = JSON.parse(localStorage.getItem('stitch2-filters') ?? 'null') ?? { status: 'active' }
 if (typeof filters.device === 'string') { filters.devices = filters.device === 'all' ? [] : [filters.device]; delete filters.device }
 let screens = []
@@ -297,9 +300,13 @@ let reports = { consistency: null, compare: null, states: null }
 let selected = null
 const frames = new Map() // path -> { el, device, img, iframe (while live), screen, height }
 // Heights measured before, so the layout doesn't jump while pictures and pages load.
-const HEIGHTS = JSON.parse(localStorage.getItem('stitch2-heights') ?? '{}')
+// Height semantics changed when live frames began loading at their authored
+// viewport. Do not carry a pre-fix cache into this layout: one stale 20k page
+// is enough to create a giant gap before its iframe is visited.
+const HEIGHT_KEY = 'stitch2-heights-v3'
+const HEIGHTS = JSON.parse(localStorage.getItem(HEIGHT_KEY) ?? '{}')
 let heightsTimer
-const saveHeights = () => { clearTimeout(heightsTimer); heightsTimer = setTimeout(() => localStorage.setItem('stitch2-heights', JSON.stringify(HEIGHTS)), 1000) }
+const saveHeights = () => { clearTimeout(heightsTimer); heightsTimer = setTimeout(() => localStorage.setItem(HEIGHT_KEY, JSON.stringify(HEIGHTS)), 1000) }
 let layoutQueued = false
 /** Many frames measure themselves at once while loading: one layout per animation frame. */
 const scheduleLayout = () => { if (!layoutQueued) { layoutQueued = true; requestAnimationFrame(() => { layoutQueued = false; layout() }) } }
@@ -311,7 +318,7 @@ const apply = () => {
   viewport.style.backgroundSize = `${s}px ${s}px`
   viewport.style.backgroundPosition = `${view.x}px ${view.y}px`
   document.getElementById('zoom').textContent = `${Math.round(view.z * 100)}%`
-  localStorage.setItem('stitch2-view', JSON.stringify(view))
+  localStorage.setItem(VIEW_KEY, JSON.stringify(view))
   scheduleSync()
 }
 const zoomAt = (cx, cy, z) => {
@@ -580,8 +587,11 @@ function measure(f) {
   if (!f.iframe) return
   try {
     const doc = f.iframe.contentDocument
+    // A previously tall iframe supplies a scrollHeight floor even after content shrinks.
+    f.iframe.style.height = `${f.screen.viewportHeight ?? 844}px`
     // As tall as the page, up to MAX_FRAME_HEIGHT: long landing pages are drawn whole.
     setHeight(f, Math.max(doc.documentElement.scrollHeight, doc.body?.scrollHeight ?? 0))
+    size(f)
   } catch {}
 }
 
@@ -602,13 +612,13 @@ function size(f) {
   f.img.style.width = w
   if (f.iframe) Object.assign(f.iframe.style, { width: w, height: h })
 }
-const frameSrc = (s) => `/${s.path}?pick${langQuery()}`
+const frameSrc = (s) => `/${s.path}?pick&canvas=${s.viewportHeight ?? 844}${langQuery()}`
 
 // ---- live frames: a screen is a whole page, so only the frames in view, at a zoom where you can work with them,
 // are live (at most MAX_LIVE, nearest the middle first), plus the selected one and those with picked elements.
 // The rest show the picture the server renders (/api/shot). Without pictures (no Chromium), frames in view stay
 // live at any zoom, still at most MAX_LIVE. ----
-const LIVE_ZOOM = 0.3, MAX_LIVE = 12, SHOTS_AT_ONCE = 3
+const LIVE_ZOOM = 0.3, MAX_LIVE = 6, SHOTS_AT_ONCE = 3
 let shotRev = 0, shotErrors = 0, syncTimer
 const shotsFailed = () => shotErrors > 2
 const scheduleSync = () => { clearTimeout(syncTimer); syncTimer = setTimeout(syncLive, 120) }
@@ -624,21 +634,40 @@ function mount(f) {
   const iframe = document.createElement('iframe')
   iframe.setAttribute('scrolling', 'no')
   f.iframe = iframe
+  // A remounted frame can still have a cached full-page height. Start the
+  // document at its authored viewport so vh/svh/dvh rules are evaluated
+  // against the screen, not against the previous page height.
   size(f)
+  iframe.style.height = `${f.screen.viewportHeight ?? 844}px`
+  const waitForStyles = async () => {
+    const doc = iframe.contentDocument
+    if (!doc || doc.readyState !== 'complete') return false
+    try { await doc.fonts?.ready } catch {}
+    // Browser-built Tailwind and late stylesheet links can settle just after
+    // load. Do not measure or reveal the live page until that layout pass.
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+    // `load` also fires for the initial about:blank document. Compare the
+    // loaded document itself with the current iframe target (which may have
+    // changed for a language/theme reload while this mount was pending).
+    return f.iframe === iframe && iframe.contentDocument === doc && doc.readyState === 'complete' && doc.location.href === iframe.src
+  }
   iframe.addEventListener('load', () => {
     if (f.iframe !== iframe) return
-    applyTheme(f)
-    measure(f)
-    clearTimeout(f.reveal)
-    // Tailwind's browser build and the components settle just after load: the picture stays until then.
-    f.reveal = setTimeout(() => {
-      if (f.iframe !== iframe) return
+    void (async () => {
+      if (!(await waitForStyles()) || f.iframe !== iframe) return
+      applyTheme(f)
       measure(f)
-      f.el.classList.add('ready')
-      for (const go of f.waiters.splice(0)) go()
-    }, 350)
-    setTimeout(() => measure(f), 1200)
-    setTimeout(() => measure(f), 2500)
+      clearTimeout(f.reveal)
+      // The picture stays until the complete, styled page has been measured.
+      f.reveal = setTimeout(() => {
+        if (f.iframe !== iframe) return
+        measure(f)
+        f.el.classList.add('ready')
+        for (const go of f.waiters.splice(0)) go()
+      }, 350)
+      setTimeout(() => { if (f.iframe === iframe) measure(f) }, 1200)
+      setTimeout(() => { if (f.iframe === iframe) measure(f) }, 2500)
+    })()
   })
   iframe.src = frameSrc(f.screen)
   f.device.insertBefore(iframe, f.img.nextSibling)
@@ -672,7 +701,8 @@ function shotDone(f, ok) {
   if (!f.img.dataset.loading) return
   delete f.img.dataset.loading
   shotsLoading--
-  if (ok) { shotErrors = 0; if (!f.iframe) setHeight(f, f.img.naturalHeight) } else if (++shotErrors > 2) scheduleSync()
+  if (ok) { shotErrors = 0; if (!f.iframe) setHeight(f, f.img.naturalHeight) } else shotErrors++
+  scheduleSync()
   pumpShots()
 }
 function syncLive() {
@@ -693,9 +723,11 @@ function syncLive() {
     // Frames just out of view stay live while there's room, so panning back and forth doesn't reload them.
     for (const f of kept) { if (live.size >= MAX_LIVE) break; if (f.iframe) live.add(f) }
   }
-  for (const f of frames.values()) if (f.iframe && !live.has(f)) unmount(f)
+  const visible = new Set(near.map(({ f }) => f))
+  // Keep the page until its picture is loaded; switching zoom must never reveal an empty frame.
+  for (const f of frames.values()) if (f.iframe && !live.has(f) && (!visible.has(f) || (f.img.complete && f.img.naturalWidth))) unmount(f)
   for (const f of live) mount(f)
-  shotQueue = near.filter(({ f }) => !f.el.classList.contains('ready')).map(({ f }) => [f, shotUrl(f.screen)])
+  shotQueue = near.map(({ f }) => [f, shotUrl(f.screen)])
   pumpShots()
 }
 
@@ -991,7 +1023,7 @@ async function load(first, given) {
   await loadChecks()
   await loadReports()
   if (selected) inspector(selected)
-  if (first && !localStorage.getItem('stitch2-view')) setTimeout(fit, 1500)
+  if (first && !savedView) setTimeout(fit, 1500)
 }
 
 // ---- filters ----

package/dist/screens.d.ts

@@ -14,6 +14,8 @@ export interface Screen {
     title: string;
     /** Frame width in px: <meta name="<prefix>-frame-width" content="390">, default 390 (phone). */
     width: number;
+    /** Viewport height for vh/svh/dvh layout; independent of the full document height. */
+    viewportHeight: number;
     mtime: number;
     /** "screen", or "components" for the component catalog. */
     kind: 'screen' | 'components';

package/dist/screens.js

@@ -48,6 +48,7 @@ export function listScreens() {
                 name,
                 title: /<title>([^<]*)<\/title>/i.exec(html)?.[1]?.trim() ?? '',
                 width,
+                viewportHeight: Math.min(4000, Math.max(200, Number(meta(html, tag('frame-height'))) || 844)),
                 mtime: statSync(file).mtimeMs,
                 kind: under(path, config.catalogDir) ? 'components' : 'screen',
                 screen: meta(html, tag('screen')) ?? (versioned ? group.split('/').pop() : name),

package/dist/serve.js

@@ -16,6 +16,7 @@ import { designPage } from './design-page.js';
 import { languagesPage } from './languages-page.js';
 import { annotate } from './pick.js';
 import { closeShots, sharedChanged, shot } from './shots.js';
+import { pinViewportHeight } from './viewport.js';
 /**
  * Inlines <link rel="stylesheet" type="text/tailwindcss" href="…">: the Tailwind v4 browser build reads @theme and
  * @utility only from inline <style type="text/tailwindcss"> blocks. On one line, so source line numbers hold.
@@ -210,7 +211,12 @@ export function startServer(port) {
         // The canvas loads screens with ?pick: their elements carry source lines for picking.
         if (extname(file) === '.html') {
             const html = inlineTailwind(readFileSync(file, 'utf8'), file);
-            const page = url.searchParams.has('pick') ? annotate(html) : html;
+            let page = url.searchParams.has('pick') ? annotate(html) : html;
+            if (url.searchParams.has('canvas')) {
+                const requested = Number(url.searchParams.get('canvas')) || 844;
+                const height = Math.min(4000, Math.max(200, requested));
+                page = page.replace(/<head(\s[^>]*)?>/i, (head) => head + `<script>(${pinViewportHeight.toString()})(${height})</script>`);
+            }
             const lang = url.searchParams.get('lang');
             if (!lang || lang === sourceLocale())
                 return res.end(page);

package/dist/shots.js

@@ -10,7 +10,7 @@ import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSy
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 import { messagesFile, sourceLocale } from './i18n.js';
-import { ROOT } from './screens.js';
+import { ROOT, meta, tag } from './screens.js';
 /** The tallest picture, in CSS px: the same limit as the canvas frames and check's renders. */
 const MAX_HEIGHT = 20000;
 const DIR = join(tmpdir(), 'stitch2-shots');
@@ -48,6 +48,7 @@ function keyOf(r) {
         return null;
     const messages = r.lang && r.lang !== sourceLocale() ? messagesFile(r.lang) : undefined;
     const parts = [
+        'viewport-v2',
         r.path,
         statSync(file).mtimeMs,
         sharedStamp(),
@@ -89,8 +90,12 @@ export function shot(base, r) {
         browser ??= launch();
         const page = await (await browser).newPage({ viewport: { width: r.width, height: 844 }, deviceScaleFactor: 1 });
         try {
-            const lang = r.lang && r.lang !== sourceLocale() ? `?lang=${encodeURIComponent(r.lang)}` : '';
-            await page.goto(`${base}/${r.path}${lang}`, { waitUntil: 'networkidle', timeout: 30_000 }).catch(() => { });
+            const viewport = Math.min(4000, Math.max(200, Number(meta(readFileSync(join(ROOT, r.path), 'utf8'), tag('frame-height'))) || 844));
+            await page.setViewportSize({ width: r.width, height: viewport });
+            const query = new URLSearchParams({ canvas: String(viewport) });
+            if (r.lang && r.lang !== sourceLocale())
+                query.set('lang', r.lang);
+            await page.goto(`${base}/${r.path}?${query}`, { waitUntil: 'networkidle', timeout: 30_000 }).catch(() => { });
             if (r.theme)
                 await page.evaluate((t) => { document.documentElement.dataset.theme = t; }, r.theme);
             await page.evaluate(() => document.fonts.ready);

package/dist/viewport.d.ts

@@ -0,0 +1,3 @@
+/** Runs inside a page. Canvas frames grow to the document, but viewport units
+ * must keep describing the original screen rather than that growing frame. */
+export declare function pinViewportHeight(height: number): void;

package/dist/viewport.js

@@ -0,0 +1,68 @@
+/** Runs inside a page. Canvas frames grow to the document, but viewport units
+ * must keep describing the original screen rather than that growing frame. */
+export function pinViewportHeight(height) {
+    // shortcut: cross-origin and shadow-root styles keep native units; localize sheets before supporting those screens.
+    const freeze = () => {
+        const units = /url\(\s*(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|(?:\\.|[^)])*)\s*\)|(["'])(?:\\.|(?!\1)[\s\S])*?\1|(-?(?:\d*\.)?\d+)(?:s|l|d)?v(h|min|max)\b/gi;
+        const value = (text) => text.replace(units, (match, quoted, amount, axis) => {
+            if (quoted || amount == null)
+                return match;
+            const unit = axis.toLowerCase();
+            const size = unit === 'h' ? height : unit === 'min' ? Math.min(innerWidth, height) : Math.max(innerWidth, height);
+            return `${Number(amount) * size / 100}px`;
+        });
+        const style = (declarations) => {
+            for (const property of Array.from(declarations)) {
+                const current = declarations.getPropertyValue(property);
+                const next = value(current);
+                if (next !== current)
+                    declarations.setProperty(property, next, declarations.getPropertyPriority(property));
+            }
+        };
+        const walk = (rules) => {
+            for (const rule of Array.from(rules)) {
+                if ('style' in rule)
+                    style(rule.style);
+                if ('cssRules' in rule) {
+                    try {
+                        walk(rule.cssRules);
+                    }
+                    catch { /* Cross-origin nested rules remain browser-owned. */ }
+                }
+                if ('styleSheet' in rule) {
+                    try {
+                        const imported = rule.styleSheet;
+                        if (imported)
+                            walk(imported.cssRules);
+                    }
+                    catch { /* Cross-origin imported sheets remain browser-owned. */ }
+                }
+            }
+        };
+        for (const sheet of Array.from(document.styleSheets)) {
+            try {
+                walk(sheet.cssRules);
+            }
+            catch { /* Cross-origin sheets remain browser-owned. */ }
+        }
+        for (const element of document.querySelectorAll('[style]'))
+            style(element.style);
+    };
+    let pending = false;
+    const schedule = () => {
+        if (pending)
+            return;
+        pending = true;
+        requestAnimationFrame(() => { pending = false; freeze(); });
+    };
+    // Fonts, async style links and browser-built Tailwind can arrive after DOMContentLoaded.
+    document.addEventListener('DOMContentLoaded', freeze, { once: true });
+    document.addEventListener('load', freeze, true);
+    new MutationObserver(schedule).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['style'],
+        childList: true,
+        subtree: true,
+    });
+    freeze();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.22.5",
+  "version": "0.22.7",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",

package/skills/stitch2/references/screens.md

@@ -17,6 +17,11 @@ and build on it. Meta tag names below use the project's prefix (`<p>`, from `sti
   `<p>-frame-width` (390 mobile, 1280 desktop) and, written by the user, `<p>-note`. Older files elsewhere
   carry the same tags.
 
+`<p>-frame-height` optionally sets the viewport height the design was drawn at (default 844 px).
+It is not the document height: long pages still appear whole. In canvas frames and their pictures,
+`vh`, `svh`, `dvh` and `lvh` keep this viewport height when the frame grows, so full-height sections
+do not create ever-growing gaps. Width responsiveness stays active.
+
 ## Pages and their screens
 
 A place in the app often has several states or steps: the workout with its number pad, its menu and its discard