stitch2 0.21.0 → 0.22.1

package/dist/check.js

@@ -47,12 +47,19 @@ 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;
-const browser = await chromium.launch();
-const page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+let browser = await chromium.launch();
+let page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
 const results = {};
 const components = {};
 const stateRows = {};
-for (const s of screens) {
+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 });
+    }
     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 })

package/dist/consistency.js

@@ -335,7 +335,7 @@ export function reuseIssues(path, page) {
     if (familyOf(path) !== 'screens')
         return [];
     return page.handBuilt.slice(0, 10).map((h) => ({
-        severity: 'warning',
+        severity: 'error',
         type: 'reuse',
         message: `${nameOf(h.kind)} built by hand; use <${NAMES[h.kind]?.[1] ?? 'the catalog component'}> (see the component catalog, ${config.catalogDir})`,
         selector: h.selector,

package/dist/report.js

@@ -22,11 +22,18 @@ const esc = (s) => String(s ?? '')
     .replaceAll('>', '>')
     .replaceAll('"', '"');
 const server = await startServer(0);
-const browser = await chromium.launch();
-const page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+let browser = await chromium.launch();
+let page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
 const known = {};
 const crops = {}; // kind -> path -> image files
-for (const s of screens) {
+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 });
+    }
     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 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "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/SKILL.md

@@ -54,8 +54,9 @@ References, read before the first screen:
    and translate it with **stitch2-translate**. Never add classes to a component to change how it looks, and never write a colour value (hex,
    `rgb()`, `hsl()`): only DESIGN.md's colours, as token classes or `var(--<prefix>-<name>)`.
 5. **Check** `stitch2 check <path> --shots --strict`. Fix every error (overflow, wrapped labels, content under
-   fixed bars, fixed bars overlapping each other, tap targets, contrast, cramped text) and every warning about type (`type-*`), hand-built
-   components (`reuse`), components that differ from the catalog (`consistency`) and colour values (`color`).
+   fixed bars, fixed bars overlapping each other, tap targets, contrast, cramped text), a hand-built copy of a
+   catalog component (`reuse`: use the component or extend it, never rebuild it), and every warning about type
+   (`type-*`), components that differ from the catalog (`consistency`) and colour values (`color`).
    Text running into other text (`text-overlap`) or out of its card (`overflow`) is an error; a short label cut
    short with an ellipsis (`truncated`) is a warning to fix with room, not a smaller size. Google's rules are
    warnings too (`text-small`, `edge-margin`, `measure`, `tap-spacing`, `placeholder-label`, `unnamed-control`,

package/skills/stitch2/references/components.md

@@ -11,6 +11,8 @@ colour, icons and states. Users learn an element once; every variant costs atten
 
 ## The ladder
 
+Open the catalog first (on the canvas, or its render under `<design>/renders/`): every element of the
+screen is mapped to a component before any markup is written, and the mapping is part of the hand-over.
 Go down only when the step above cannot work:
 
 1. **Use** a component as it is.
@@ -69,9 +71,11 @@ series) is added to DESIGN.md first, with a line in the prose saying where it is
 
 ## What the checks report
 
-- **reuse**: on a lab screen, an element that looks like a catalog component but was built by hand (a bottom
-  bar with three or more buttons, an h1, a primary-filled button, a pill chip, a header icon button, a caps
-  label).
+- **reuse** (an error: it fails `check --strict` and blocks the hand-over): on a lab screen, an element that
+  looks like a catalog component but was built by hand (a bottom bar with three or more buttons, an h1,
+  a primary-filled button, a pill chip, a header icon button, a caps label). A screen that duplicates a
+  component instead of using it is not handed over: use the component, or extend it (step 4 of the ladder)
+  when it cannot do what the screen needs.
 - **consistency**: a component whose size, radius, font, icon set or icons differ from the catalog's version
   (or, without a catalog, from the majority of screens in its family), or that appears in two versions on one
   screen. `stitch2 consistency` shows the same as cropped images; see the stitch2-consistency skill.