stitch2 0.24.2 → 0.24.4

package/dist/canvas.html

@@ -654,6 +654,33 @@ function measure(f) {
 }
 
 const minHeight = (s) => (bigFrame(s) ? 800 : 844)
+/** Whether two addresses are the same page: the same place, whatever their query or hash say. */
+function samePage(a, b) {
+  try { const x = new URL(a), y = new URL(b); return x.origin === y.origin && x.pathname === y.pathname } catch { return false }
+}
+/**
+ * A page keeps growing after it loads: a table fetches its rows, an image arrives, a font swaps in. The measurements at load and in the first
+ * seconds catch what is there by then; this watches the page itself, so the frame is as tall as its page whenever the page changes size. The
+ * observer belongs to the loaded document and is replaced when the page reloads.
+ */
+function watchSize(f, iframe) {
+  f.sizeWatch?.disconnect()
+  f.sizeWatch = null
+  try {
+    const doc = iframe.contentDocument
+    const Observer = iframe.contentWindow?.ResizeObserver
+    if (!doc || !Observer) return
+    let queued
+    const watch = new Observer(() => {
+      clearTimeout(queued)
+      // Wait for the page to settle: a table draws many rows in a few frames, and one measure after them is enough.
+      queued = setTimeout(() => { if (f.sizeWatch === watch && f.iframe === iframe) measure(f) }, 80)
+    })
+    watch.observe(doc.documentElement)
+    if (doc.body) watch.observe(doc.body)
+    f.sizeWatch = watch
+  } catch {}
+}
 function setHeight(f, h) {
   h = Math.min(MAX_FRAME_HEIGHT, Math.max(minHeight(f.screen), h))
   HEIGHTS[`${f.screen.path}@${f.screen.width}`] = h
@@ -677,6 +704,10 @@ const frameSrc = (s) => `/${s.path}?pick&canvas=${s.viewportHeight ?? 844}${lang
 // 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 = 6, SHOTS_AT_ONCE = 3
+// A picture costs the server a whole page render. A frame narrower than MIN_SHOT_PX on screen shows nothing you could read, so it is not
+// asked for (fit-all with hundreds of screens would otherwise queue a render of every one, and again after every shared file or link change),
+// and at most SHOTS_QUEUED pictures wait at a time, the nearest to the middle first; as they arrive the next ones are asked for.
+const MIN_SHOT_PX = 64, SHOTS_QUEUED = 24
 let shotRev = 0, shotErrors = 0, syncTimer
 const shotsFailed = () => shotErrors > 2
 const scheduleSync = () => { clearTimeout(syncTimer); syncTimer = setTimeout(syncLive, 120) }
@@ -708,7 +739,9 @@ function mount(f) {
     // `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
+    // The address is compared without its query: a page may rewrite its own
+    // (a table that keeps its state there), and that is still the same page.
+    return f.iframe === iframe && iframe.contentDocument === doc && doc.readyState === 'complete' && samePage(doc.location.href, iframe.src)
   }
   iframe.addEventListener('load', () => {
     if (f.iframe !== iframe) return
@@ -727,6 +760,7 @@ function mount(f) {
       }, 350)
       setTimeout(() => { if (f.iframe === iframe) measure(f) }, 1200)
       setTimeout(() => { if (f.iframe === iframe) measure(f) }, 2500)
+      watchSize(f, iframe)
     })()
   })
   iframe.src = frameSrc(f.screen)
@@ -735,6 +769,8 @@ function mount(f) {
 function unmount(f) {
   if (!f.iframe) return
   clearTimeout(f.reveal)
+  f.sizeWatch?.disconnect()
+  f.sizeWatch = null
   // Cleared first: a page still loading can fire its load event as it's removed.
   const iframe = f.iframe
   f.iframe = null
@@ -787,7 +823,11 @@ function syncLive() {
   // 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.map(({ f }) => [f, shotUrl(f.screen)])
+  shotQueue = near
+    .filter(({ f }) => f.screen.width * view.z >= MIN_SHOT_PX)
+    .map(({ f }) => [f, shotUrl(f.screen)])
+    .filter(([f, url]) => f.img.getAttribute('src') !== url)
+    .slice(0, SHOTS_QUEUED)
   pumpShots()
 }
 
@@ -1168,12 +1208,14 @@ events.onmessage = async (e) => {
   // (tokens.tailwind.css), the components.
   const shared = paths.some((p) => /\.(css|js|mjs)$/.test(p) || p.startsWith('components/'))
   if (shared) shotRev++
-  for (const f of frames.values()) {
-    if (shared || html.includes(f.screen.path)) {
-      f.iframe?.contentWindow?.location.reload()
-      f.el.classList.remove('changed'); void f.el.offsetWidth; f.el.classList.add('changed')
-    }
+  // One reflow for all the frames that flash, not one each: approving a version can touch every screen that linked to it.
+  const touched = [...frames.values()].filter((f) => shared || html.includes(f.screen.path))
+  for (const f of touched) {
+    f.iframe?.contentWindow?.location.reload()
+    f.el.classList.remove('changed')
   }
+  void viewport.offsetWidth
+  for (const f of touched) f.el.classList.add('changed')
   scheduleSync()
 }
 

package/dist/shots.js

@@ -31,8 +31,13 @@ function sharedStamp() {
                 if (depth < 4)
                     walk(join(dir, e.name), depth + 1);
             }
-            else if (!e.name.endsWith('.html') && !(depth === 0 && REPORTS.has(e.name)))
-                newest = Math.max(newest, statSync(join(dir, e.name)).mtimeMs);
+            else if (!e.name.endsWith('.html') && !(depth === 0 && REPORTS.has(e.name))) {
+                // A link to nothing (a symlinked folder that is not there on this machine) is not a file that can change a picture.
+                try {
+                    newest = Math.max(newest, statSync(join(dir, e.name)).mtimeMs);
+                }
+                catch { }
+            }
         }
     };
     walk(ROOT, 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.24.2",
+  "version": "0.24.4",
   "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",