stitch2 0.24.1 → 0.24.3

package/dist/audit.js

@@ -842,8 +842,17 @@ export async function audit(opts) {
         if (!el.matches('nav, [role=navigation], [role=tablist]') && !el.querySelector('nav, [role=navigation], [role=tablist]'))
             continue;
         const items = [...el.querySelectorAll('a[href], button, [role=tab]')].filter((i) => shown(i) && !i.parentElement?.closest('a[href], button, [role=tab]'));
-        if (items.length > 5)
-            push('warning', 'nav-destinations', el, items.length + " destinations in the bottom navigation: Material's navigation bar holds 3–5");
+        // The destinations stand in one row. A panel above them (a workout that is running, a player) belongs to the bar
+        // but is not a destination: the widest row counts.
+        const tops = items.map((i) => i.getBoundingClientRect().top).sort((a, b) => a - b);
+        let widest = 0;
+        for (let from = 0, row = 0; row < tops.length; row++) {
+            if (tops[row] - tops[from] > 12)
+                from = row;
+            widest = Math.max(widest, row - from + 1);
+        }
+        if (widest > 5)
+            push('warning', 'nav-destinations', el, widest + " destinations in the bottom navigation: Material's navigation bar holds 3–5");
     }
     // 6h. Keyboard focus is visible (Material's focus state, web.dev, WCAG 2.4.7): focusing a control changes how
     // it or its frame looks. Transitions are paused so a ring that fades in still counts.

package/dist/canvas.html

@@ -677,6 +677,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) }
@@ -787,7 +791,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 +1176,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.1",
+  "version": "0.24.3",
   "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/google.md

@@ -71,7 +71,8 @@ the rest are judged from the render. Where Google and DESIGN.md disagree, DESIGN
 ## Components
 
 - **Navigation bar:** three to five destinations, each an icon with a one-line label; more destinations go to a
-  rail, a drawer or a page **(check: nav-destinations; label-wraps)**.
+  rail, a drawer or a page **(check: nav-destinations; label-wraps)**. The check counts the destinations in one row:
+  a panel stacked above them in the same bar (a running workout's Resume and Discard, a player) is not a destination.
 - **Button emphasis:** filled for the one main action, tonal or outlined for secondary, text buttons for
   low-emphasis; one floating action button at most.
 - **Icon-only controls have a name** that says what they do ("Share", not "Share button"); repeated items in a