stitch2 0.22.3 → 0.22.6

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,9 @@ 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') ?? '{}')
+const HEIGHTS = JSON.parse(localStorage.getItem('stitch2-heights-v2') ?? '{}')
 let heightsTimer
-const saveHeights = () => { clearTimeout(heightsTimer); heightsTimer = setTimeout(() => localStorage.setItem('stitch2-heights', JSON.stringify(HEIGHTS)), 1000) }
+const saveHeights = () => { clearTimeout(heightsTimer); heightsTimer = setTimeout(() => localStorage.setItem('stitch2-heights-v2', 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 +314,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 +583,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 +608,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) }
@@ -637,8 +643,8 @@ function mount(f) {
       f.el.classList.add('ready')
       for (const go of f.waiters.splice(0)) go()
     }, 350)
-    setTimeout(() => measure(f), 1200)
-    setTimeout(() => measure(f), 2500)
+    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 +678,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 +700,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 +1000,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/check.js

@@ -13,12 +13,14 @@
  * Usage: stitch2 check [path filter…] [--shots] [--strict] [--locales ru,ar | all | none]
  *   --shots   also save page-tall renders to design/renders/ (one per theme, language and width)
  *   --strict  exit 1 when any screen has errors (for CI and agent loops)
+ * Screens run four at a time; reruns only visit screens that changed since design/checks.json (or
+ * everything DESIGN.md, the tokens, the components or the catalog changed since).
  */
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { chromium } from '@playwright/test';
 import { colourIssues } from './colours.js';
-import { checkWidths, config } from './config.js';
+import { CONFIG_FILE, checkWidths, config } from './config.js';
 import { collectComponents, collectOptions, consistencyIssues, reuseIssues, } from './consistency.js';
 import { designThemes, motionDurations, typeLevels } from './design-md.js';
 import { checkLocales } from './i18n.js';
@@ -47,148 +49,219 @@ const auditOpts = { comfortable: config.comfortableTarget, durations: (() => { t
 const server = await startServer(0);
 /** The tallest render, in CSS px: a long landing page is shot whole (the canvas draws frames up to the same height). */
 const MAX_RENDER_HEIGHT = 20000;
-let browser = await chromium.launch();
-let page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+const fresh = async () => {
+    const browser = await chromium.launch();
+    const page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+    return { browser, page, visits: 0 };
+};
+const CONCURRENCY = 4;
+const pool = await Promise.all(Array.from({ length: CONCURRENCY }, fresh));
 const results = {};
 const components = {};
 const stateRows = {};
-for (const [i, s] of screens.entries()) {
-    if (i > 0 && i % 50 === 0) {
-        // Chromium gets fragile after hundreds of page loads in one browser; a fresh one keeps long runs alive.
-        await page.close().catch(() => { });
-        await browser.close().catch(() => { });
-        browser = await chromium.launch();
-        page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+// Screens unchanged since the last green run keep their results when nothing they depend on changed
+// (DESIGN.md, tokens, components, the catalog): reruns then only visit what actually changed.
+const depFiles = ['DESIGN.md', 'tokens.css', 'tokens.json'];
+const depMtime = (p) => {
+    try {
+        return statSync(join(ROOT, p)).mtimeMs;
     }
-    await page.setViewportSize({ width: s.width, height: 844 });
-    await page
-        .goto(`http://127.0.0.1:${server.port}/${s.path}`, { waitUntil: 'networkidle', timeout: 30_000 })
-        .catch(() => { });
-    // Tailwind's CDN build, web fonts and the lab components settle after load.
-    await page.waitForTimeout(600);
-    const found = await page.evaluate(collectComponents, collect);
-    components[s.path] = found.components;
-    const own = await page.evaluate(() => document.documentElement.dataset.theme || '');
-    const base = own || themes[0];
-    const layout = await page.evaluate(audit, auditOpts);
-    // With reduced motion asked for, nothing keeps moving (DESIGN.md motion, WCAG 2.3.3).
-    await page.emulateMedia({ reducedMotion: 'reduce' });
-    await page.waitForTimeout(100);
-    layout.push(...(await page.evaluate(movingAnimations)));
-    await page.emulateMedia({ reducedMotion: null });
-    for (const i of layout)
-        if (i.type === 'contrast')
-            i.theme = base;
-    // The other themes: what the colours change (contrast), plus anything that only shows there.
-    const seen = new Set(layout.map((i) => `${i.type} ${i.selector}`));
-    const themed = [];
-    for (const theme of themes.filter((t) => t !== base)) {
-        await setTheme(theme);
-        for (const i of await page.evaluate(audit, auditOpts))
-            if (i.type === 'contrast' || !seen.has(`${i.type} ${i.selector}`))
-                themed.push({ ...i, theme, message: `${theme} theme: ${i.message}` });
-        if (shots)
-            await shoot(s, theme);
+    catch {
+        return 0;
     }
-    if (themes.length > 1)
-        await setTheme(base);
-    const typed = typeIssues(levels, await page.evaluate(collectText));
-    if (shots)
-        await shoot(s);
-    // A catalog: every control at rest, hovered, focused and pressed (states.ts), then its contrast in each theme.
-    const states = [];
-    if (s.kind === 'components') {
-        const own = await catalogStates(page, s.path, { crop: true });
-        states.push(...own.issues);
-        stateRows[s.path] = own.rows;
-        for (const theme of themes.filter((t) => t !== base)) {
-            await setTheme(theme);
-            states.push(...(await catalogStates(page, s.path, { crop: false, theme })).issues.filter((i) => i.type === 'state-contrast'));
-        }
-        if (themes.length > 1)
-            await setTheme(base);
+};
+let previous = {};
+try {
+    previous = JSON.parse(readFileSync(join(ROOT, 'checks.json'), 'utf8'));
+}
+catch { }
+const currentDeps = Math.max(...depFiles.map(depMtime), depMtime(config.catalogDir), depMtime(join(config.catalogDir, 'catalog.html')), ...(CONFIG_FILE ? [depMtime(CONFIG_FILE)] : []));
+const depsChanged = !previous.checkedAt || (previous.depsMtime ?? 0) < currentDeps;
+// Renders are the point of --shots: every screen is visited, nothing is skipped.
+// ...as are explicit locales: different flags check different things.
+const runKey = JSON.stringify({ locales, shots });
+const skipping = !shots && !depsChanged && previous.runKey !== undefined && previous.runKey === runKey;
+const screenMtime = (path) => {
+    try {
+        return statSync(join(ROOT, path)).mtimeMs;
+    }
+    catch {
+        return Infinity;
+    }
+};
+const checkedAt = previous.checkedAt ? Date.parse(previous.checkedAt) : 0;
+const todo = screens.filter((s) => !skipping || !previous.screens?.[s.path] || screenMtime(s.path) >= checkedAt);
+for (const s of screens) {
+    if (!todo.includes(s)) {
+        results[s.path] = previous.screens[s.path];
+        if (previous.components?.[s.path])
+            components[s.path] = previous.components[s.path];
+    }
+}
+const checkOne = async (s, worker) => {
+    if (worker.visits > 0 && worker.visits % 20 === 0) {
+        // A check loads each screen several times (themes, languages, widths); a fresh browser keeps long
+        // runs alive.
+        await worker.page.close().catch(() => { });
+        await worker.browser.close().catch(() => { });
+        const next = await fresh();
+        worker.browser = next.browser;
+        worker.page = next.page;
     }
-    // The other languages, in the screen's own theme. Reported once per element and kind, in the first locale.
-    const unknownSeen = new Set();
-    for (const locale of locales) {
+    worker.visits++;
+    const page = worker.page;
+    try {
+        await page.setViewportSize({ width: s.width, height: 844 });
         await page
-            .goto(`http://127.0.0.1:${server.port}/${s.path}?lang=${encodeURIComponent(locale)}`, { waitUntil: 'networkidle', timeout: 30_000 })
+            .goto(`http://127.0.0.1:${server.port}/${s.path}`, { waitUntil: 'networkidle', timeout: 30_000 })
             .catch(() => { });
+        // Tailwind's CDN build, web fonts and the lab components settle after load.
         await page.waitForTimeout(600);
-        for (const i of await page.evaluate(audit, auditOpts)) {
-            const key = `${i.type} ${i.selector}`;
-            if (i.type === 'contrast' || seen.has(key))
-                continue;
-            seen.add(key);
-            themed.push({ ...i, locale, message: `${locale}: ${i.message}` });
-        }
-        const lost = await page.evaluate(() => window.__stitch2?.missing ?? []);
-        for (const m of lost) {
-            const selector = `[data-s2-key="${m.all}"]`;
-            const unknown = m.unknown.split(' ').filter(Boolean);
-            const fresh = unknown.filter((k) => !unknownSeen.has(k));
-            fresh.forEach((k) => unknownSeen.add(k));
-            if (fresh.length)
-                themed.push({
-                    severity: 'error',
-                    type: 'i18n-unknown-key',
-                    selector,
-                    text: m.text,
-                    message: `No message for ${fresh.join(' ')}: add it to the source language's messages`,
-                });
-            const lacks = m.keys.split(' ').filter((k) => !unknown.includes(k));
-            if (lacks.length)
-                themed.push({
-                    severity: 'warning',
-                    type: 'i18n-missing',
-                    locale,
-                    selector,
-                    text: m.text,
-                    message: `${locale}: no translation for ${lacks.join(' ')}`,
-                });
+        const found = await page.evaluate(collectComponents, collect);
+        components[s.path] = found.components;
+        const own = await page.evaluate(() => document.documentElement.dataset.theme || '');
+        const base = own || themes[0];
+        const layout = await page.evaluate(audit, auditOpts);
+        // With reduced motion asked for, nothing keeps moving (DESIGN.md motion, WCAG 2.3.3).
+        await page.emulateMedia({ reducedMotion: 'reduce' });
+        await page.waitForTimeout(100);
+        layout.push(...(await page.evaluate(movingAnimations)));
+        await page.emulateMedia({ reducedMotion: null });
+        for (const i of layout)
+            if (i.type === 'contrast')
+                i.theme = base;
+        // The other themes: what the colours change (contrast), plus anything that only shows there.
+        const seen = new Set(layout.map((i) => `${i.type} ${i.selector}`));
+        const themed = [];
+        for (const theme of themes.filter((t) => t !== base)) {
+            await setTheme(page, theme);
+            for (const i of await page.evaluate(audit, auditOpts))
+                if (i.type === 'contrast' || !seen.has(`${i.type} ${i.selector}`))
+                    themed.push({ ...i, theme, message: `${theme} theme: ${i.message}` });
+            if (shots)
+                await shoot(page, s, theme);
         }
+        if (themes.length > 1)
+            await setTheme(page, base);
+        const typed = typeIssues(levels, await page.evaluate(collectText));
         if (shots)
-            await shoot(s, undefined, locale);
-    }
-    // The edges of the widths this variant covers (config widths) and the breakpoints inside them, in its own theme
-    // and language: what breaks only when the window is narrower or wider than the frame it was drawn in.
-    for (const width of s.kind === 'screen' ? checkWidths(s.device).filter((w) => w !== s.width) : []) {
-        await page.setViewportSize({ width, height: 844 });
-        await page.goto(`http://127.0.0.1:${server.port}/${s.path}`, { waitUntil: 'networkidle', timeout: 30_000 }).catch(() => { });
-        await page.waitForTimeout(600);
-        for (const i of await page.evaluate(audit, auditOpts)) {
-            const key = `${i.type} ${i.selector}`;
-            if (i.type === 'contrast' || seen.has(key))
-                continue;
-            seen.add(key);
-            themed.push({ ...i, width, message: `at ${width}px: ${i.message}` });
+            await shoot(page, s);
+        // A catalog: every control at rest, hovered, focused and pressed (states.ts), then its contrast in each theme.
+        const states = [];
+        if (s.kind === 'components') {
+            const own = await catalogStates(page, s.path, { crop: true });
+            states.push(...own.issues);
+            stateRows[s.path] = own.rows;
+            for (const theme of themes.filter((t) => t !== base)) {
+                await setTheme(page, theme);
+                states.push(...(await catalogStates(page, s.path, { crop: false, theme })).issues.filter((i) => i.type === 'state-contrast'));
+            }
+            if (themes.length > 1)
+                await setTheme(page, base);
         }
-        if (shots)
-            await shoot({ ...s, width }, undefined, undefined, `${width}px`);
+        // The other languages, in the screen's own theme. Reported once per element and kind, in the first locale.
+        const unknownSeen = new Set();
+        for (const locale of locales) {
+            await page
+                .goto(`http://127.0.0.1:${server.port}/${s.path}?lang=${encodeURIComponent(locale)}`, { waitUntil: 'networkidle', timeout: 30_000 })
+                .catch(() => { });
+            await page.waitForTimeout(600);
+            for (const i of await page.evaluate(audit, auditOpts)) {
+                const key = `${i.type} ${i.selector}`;
+                if (i.type === 'contrast' || seen.has(key))
+                    continue;
+                seen.add(key);
+                themed.push({ ...i, locale, message: `${locale}: ${i.message}` });
+            }
+            const lost = await page.evaluate(() => window.__stitch2?.missing ?? []);
+            for (const m of lost) {
+                const selector = `[data-s2-key="${m.all}"]`;
+                const unknown = m.unknown.split(' ').filter(Boolean);
+                const fresh = unknown.filter((k) => !unknownSeen.has(k));
+                fresh.forEach((k) => unknownSeen.add(k));
+                if (fresh.length)
+                    themed.push({
+                        severity: 'error',
+                        type: 'i18n-unknown-key',
+                        selector,
+                        text: m.text,
+                        message: `No message for ${fresh.join(' ')}: add it to the source language's messages`,
+                    });
+                const lacks = m.keys.split(' ').filter((k) => !unknown.includes(k));
+                if (lacks.length)
+                    themed.push({
+                        severity: 'warning',
+                        type: 'i18n-missing',
+                        locale,
+                        selector,
+                        text: m.text,
+                        message: `${locale}: no translation for ${lacks.join(' ')}`,
+                    });
+            }
+            if (shots)
+                await shoot(page, s, undefined, locale);
+        }
+        // The edges of the widths this variant covers (config widths) and the breakpoints inside them, in its own theme
+        // and language: what breaks only when the window is narrower or wider than the frame it was drawn in.
+        for (const width of s.kind === 'screen' ? checkWidths(s.device).filter((w) => w !== s.width) : []) {
+            await page.setViewportSize({ width, height: 844 });
+            await page.goto(`http://127.0.0.1:${server.port}/${s.path}`, { waitUntil: 'networkidle', timeout: 30_000 }).catch(() => { });
+            await page.waitForTimeout(600);
+            for (const i of await page.evaluate(audit, auditOpts)) {
+                const key = `${i.type} ${i.selector}`;
+                if (i.type === 'contrast' || seen.has(key))
+                    continue;
+                seen.add(key);
+                themed.push({ ...i, width, message: `at ${width}px: ${i.message}` });
+            }
+            if (shots)
+                await shoot(page, { ...s, width }, undefined, undefined, `${width}px`);
+        }
+        await page.setViewportSize({ width: s.width, height: 844 });
+        results[s.path] = [
+            ...layout,
+            ...themed,
+            ...typed,
+            ...reuseIssues(s.path, found),
+            ...colourIssues(s.path),
+            ...states,
+        ];
     }
-    await page.setViewportSize({ width: s.width, height: 844 });
-    results[s.path] = [
-        ...layout,
-        ...themed,
-        ...typed,
-        ...reuseIssues(s.path, found),
-        ...colourIssues(s.path),
-        ...states,
-    ];
-}
-await browser.close();
+    catch (e) {
+        // A dead page must not kill the other workers: record the crash visibly, retry next run.
+        results[s.path] = [
+            {
+                severity: 'error',
+                type: 'check-crashed',
+                message: `check crashed on this screen (${String(e).split('\n')[0]}): rerun to retry`,
+            },
+        ];
+        console.error(`check: ${s.path} crashed, recorded and continuing`);
+    }
+};
+let cursor = 0;
+// One screen per worker at a time: workers pull from the queue, so a page is never shared.
+const drive = async (worker) => {
+    while (cursor < todo.length)
+        await checkOne(todo[cursor++], worker);
+};
+await Promise.all(pool.map((w) => drive(w)));
+await Promise.all(pool.map(async (w) => {
+    await w.page.close().catch(() => { });
+    await w.browser.close().catch(() => { });
+}));
 // The states sheet: the catalogs checked now, and the rows of the others from their last check.
 if (Object.keys(stateRows).length)
     writeStatesSheet(stateRows, listScreens().filter((s) => s.kind === 'components').map((s) => s.path));
 server.close();
-async function setTheme(theme) {
+async function setTheme(page, theme) {
     await page.evaluate((t) => {
         document.documentElement.dataset.theme = t;
     }, theme);
     await page.waitForTimeout(150);
 }
 /** A page-tall render; renders in another theme or language than the screen's own get a --<theme> suffix. */
-async function shoot(s, theme, locale, at) {
+async function shoot(page, s, theme, locale, at) {
     const height = await page.evaluate(() => document.documentElement.scrollHeight);
     await page.setViewportSize({ width: s.width, height: Math.max(844, Math.min(height, MAX_RENDER_HEIGHT)) });
     mkdirSync(join(ROOT, 'renders'), { recursive: true });
@@ -197,12 +270,6 @@ async function shoot(s, theme, locale, at) {
     await page.screenshot({ path: join(ROOT, 'renders', name) });
     await page.setViewportSize({ width: s.width, height: 844 });
 }
-// Merge with the last results, so a filtered run still compares components with every other screen.
-let previous = {};
-try {
-    previous = JSON.parse(readFileSync(join(ROOT, 'checks.json'), 'utf8'));
-}
-catch { }
 const exists = new Set(listScreens().map((s) => s.path));
 const keep = (o) => Object.fromEntries(Object.entries(o).filter(([p]) => exists.has(p)));
 const allComponents = keep({ ...previous.components, ...components });
@@ -221,7 +288,7 @@ for (const s of screens) {
     for (const i of issues.filter((i) => i.severity === 'error'))
         console.log(`    ${i.type}: ${i.message}${i.text ? ` — “${i.text}”` : ''}`);
 }
-writeFileSync(join(ROOT, 'checks.json'), `${JSON.stringify({ checkedAt: new Date().toISOString(), screens: keep({ ...previous.screens, ...results }), components: allComponents }, null, 2)}\n`);
+writeFileSync(join(ROOT, 'checks.json'), `${JSON.stringify({ checkedAt: new Date().toISOString(), depsMtime: currentDeps, runKey, screens: keep({ ...previous.screens, ...results }), components: allComponents }, null, 2)}\n`);
 console.log(`\n${screens.length} screens checked, ${errors} errors. Results in design/checks.json (badges on the canvas).`);
 if (strict && errors)
     process.exit(1);

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.3",
+  "version": "0.22.6",
   "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