stitch2 0.15.0 → 0.15.2

package/README.md

@@ -43,7 +43,7 @@ file that already exists. From there the agent spends its effort on the design.
   Pick mode (`P`) highlights any element of a screen and copies a reference with its source line, such as
   `home mobile v1 (design/screens/home/mobile-v1.html:36) <gg-button> “Start Push”`; Shift-click collects
   several to copy at once or add to the version's note.
-- **Checks** (`stitch2 check`): content past the frame edge or out of its card, labels that wrap, text running into
+- **Checks** (`stitch2 check`): content past the frame edge or out of its card, navigation whose links scroll or are cut (in any language), labels that wrap, text running into
   other text, labels cut short with an ellipsis, content under fixed bars, fixed bars that overlap each other, tap
   targets (WCAG 2.2), all of it again at both ends of the window widths each layout covers (360 and 599 px for a
   phone, 1024 and 1920 for desktop, or your own ranges), text contrast in every theme, text that is not one of DESIGN.md's type levels, capitals without tracking,

package/dist/audit.js

@@ -1,5 +1,5 @@
 /** Layout errors that mean the same bug wherever they appear; compare reports these for the app too. */
-export const LAYOUT_ERRORS = ['overflow', 'fixed-overlap', 'control-overlap', 'text-overlap'];
+export const LAYOUT_ERRORS = ['overflow', 'nav-overflow', 'fixed-overlap', 'control-overlap', 'text-overlap'];
 /** Runs inside the page. Plain JS on purpose: Playwright sends its source to the browser. */
 export async function audit(opts) {
     const W = document.documentElement.clientWidth;
@@ -31,6 +31,10 @@ export async function audit(opts) {
         const cs = getComputedStyle(el);
         if (cs.display === 'none' || cs.visibility === 'hidden')
             return false;
+        // A closed <details> shows only its summary (a menu's links until it opens).
+        const closed = el.closest('details:not([open])');
+        if (closed && !closed.querySelector(':scope > summary')?.contains(el))
+            return false;
         const r = el.getBoundingClientRect();
         return r.width > 0 && r.height > 0;
     };
@@ -74,6 +78,30 @@ export async function audit(opts) {
         else
             push('error', 'overflow', el, `Sticks out past the screen edge (${Math.round(r.right - W)}px)`);
     }
+    // 1b. Navigation fits: a nav's links never hide in a sideways scroll or run past its edge (in a longer language
+    // they go into a menu instead). Only chip rows scroll sideways.
+    for (const el of all) {
+        if (!el.matches('nav, [role=navigation]') && !(el.closest('header') && el.querySelector(':scope > a')))
+            continue;
+        const ox = getComputedStyle(el).overflowX;
+        if (ox === 'visible')
+            continue;
+        const box = el.getBoundingClientRect();
+        const cut = [...el.querySelectorAll('a')].filter((a) => {
+            if (!shown(a))
+                return false;
+            const r = a.getBoundingClientRect();
+            // Wholly outside (wrapped away into a menu's overflow) is a choice; partly outside is a cut link.
+            const inside = r.left >= box.left - 1 && r.right <= box.right + 1 && r.top >= box.top - 1 && r.bottom <= box.bottom + 1;
+            const outside = r.right <= box.left || r.left >= box.right || r.bottom <= box.top || r.top >= box.bottom;
+            return !inside && (!outside || ox === 'auto' || ox === 'scroll');
+        });
+        if (cut.length)
+            push('error', 'nav-overflow', el, `Navigation does not fit: ${cut.length} link${cut.length > 1 ? 's' : ''} cut off or scrolled out of view (${cut
+                .map(text)
+                .slice(0, 3)
+                .join(', ')})`);
+    }
     // 2. Short labels (buttons, chips, tabs) stay on one line.
     const isLabel = (el) => el.matches('button, a, label, [role=tab], [role=button], [role=switch], th') ||
         /(^|\s)(chip|badge|pill|tag)|rounded-full/.test(String(el.className ?? ''));

package/dist/canvas.html

@@ -483,11 +483,15 @@ function zoomTo(f) {
   apply()
 }
 
+/** The tallest a frame is drawn, in CSS px (the same limit as check's renders). */
+const MAX_FRAME_HEIGHT = 20000
+
 function measure(f) {
   try {
     const doc = f.iframe.contentDocument
     const min = bigFrame(f.screen) ? 800 : 844
-    const h = Math.min(6000, Math.max(min, doc.documentElement.scrollHeight, doc.body?.scrollHeight ?? 0))
+    // As tall as the page, up to MAX_FRAME_HEIGHT: long landing pages are drawn whole.
+    const h = Math.min(MAX_FRAME_HEIGHT, Math.max(min, doc.documentElement.scrollHeight, doc.body?.scrollHeight ?? 0))
     if (Math.abs(h - f.height) > 2) {
       f.height = h
       f.iframe.style.height = `${h}px`

package/dist/check.js

@@ -36,6 +36,8 @@ const levels = typeLevels();
 const themes = designThemes();
 const collect = collectOptions();
 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;
 const browser = await chromium.launch();
 const page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
 const results = {};
@@ -150,7 +152,7 @@ async function setTheme(theme) {
 /** 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) {
     const height = await page.evaluate(() => document.documentElement.scrollHeight);
-    await page.setViewportSize({ width: s.width, height: Math.max(844, Math.min(height, 6000)) });
+    await page.setViewportSize({ width: s.width, height: Math.max(844, Math.min(height, MAX_RENDER_HEIGHT)) });
     mkdirSync(join(ROOT, 'renders'), { recursive: true });
     const suffix = theme ?? locale ?? at;
     const name = s.path.replaceAll('/', '__').replace(/\.html$/, suffix ? `--${suffix}.png` : '.png');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "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/principles.md

@@ -68,6 +68,8 @@ short labels never wrap **(check)**.
 - The primary action sits in the thumb zone (lower half or a docked bar); destructive actions far from it.
 - Fixed bars never cover content: the scroll ends with enough bottom padding **(check)**.
 - Nothing wider than the frame; only chip rows and tab strips scroll sideways **(check)**.
+- Navigation fits in every language: a header shows the links that fit on one row and keeps all of them in a menu;
+  a link never scrolls sideways or gets cut **(check: nav-overflow)**.
 
 ## Review rubric (step 6)