stitch2 0.23.0 → 0.24.0

package/README.md

@@ -59,7 +59,7 @@ file that already exists. From there the agent spends its effort on the design.
   icon-only controls without a name, more than five bottom-navigation destinations and controls without visible
   focus. Motion: transitions whose length isn't one of DESIGN.md's motion tokens, and anything that still moves
   with reduced motion on. Each screen is also run in long and right-to-left
-  pseudo-languages and your locales (see below).
+  pseudo-languages and your locales (see below), and, with `modes`, in each app state it is not drawn in.
 - **States** (from `stitch2 check` on the component catalog): every control at rest, hovered, focused and
   pressed, forced through Chromium so the components need nothing extra, side by side on one sheet; with
   warnings for a control that gives no feedback and text that loses contrast in a state.
@@ -262,7 +262,7 @@ layout first, then a shorter natural word, never a smaller type size.
 | `stitch2 init --name N --primary #hex [options]` | Writes a complete DESIGN.md from a few choices |
 | `stitch2 extract <url or file…>` | Writes a DESIGN.md measured from an existing site or screens |
 | `stitch2 canvas` | The canvas at http://localhost:4400 (`PORT` and `HOST` to change) |
-| `stitch2 check [filter] [--shots] [--strict] [--locales l,…]` | All checks, in every theme and check language; `--shots` saves renders to `<design>/renders/` (`--light.png`, `--pseudo.png`…) |
+| `stitch2 check [filter] [--shots] [--strict] [--locales l,…]` | All checks, in every theme, app state and check language; `--shots` saves renders to `<design>/renders/` (`--light.png`, `--pseudo.png`, `--auth-user.png`…) |
 | `stitch2 i18n [filter] [--locale l] [--suggest] [--json]` | Message keys the source or a locale lacks, and screen text with no key |
 | `stitch2 consistency [kind…]` | The consistency report, `<design>/consistency/index.html` |
 | `stitch2 type [filter] [--json]` | The type audit |

package/config.schema.json

@@ -79,7 +79,7 @@
     },
     "modes": {
       "type": "array",
-      "description": "App states every screen can be shown in, picked from the canvas sidebar: signed in or out, a plan, a role. The pick is an attribute on each screen's <html>, so the screens' own CSS and scripts answer to it. The dropdown also offers the screens as drawn, which leaves each one as its file has it.",
+      "description": "App states every screen can be shown in, picked from the canvas sidebar: signed in or out, a plan, a role. The pick is an attribute on each screen's <html>, so the screens' own CSS and scripts answer to it. The dropdown also offers the screens as drawn, which leaves each one as its file has it. stitch2 check also runs each screen in every value its file does not already have, one mode at a time, and tags what only shows there.",
       "items": {
         "type": "object",
         "additionalProperties": false,

package/dist/canvas.html

@@ -920,7 +920,10 @@ function inspector(f) {
     li.querySelector('code').textContent = i.selector
     li.onclick = () => {
       const r = rangeOf(s)
-      if (i.width && r && i.width !== s.width) { setWidth(i.width === r[0] ? 'narrow' : i.width === r[1] ? 'wide' : `at:${i.width}`); setTimeout(() => locate(f, i.selector), 900) }
+      // An issue found in another app state: show every screen in it, then find the element.
+      const [mode, value] = i.mode ? i.mode.split(':') : []
+      if (mode && modePick[mode] !== value) { setMode(mode, value); setTimeout(() => locate(f, i.selector), 600) }
+      else if (i.width && r && i.width !== s.width) { setWidth(i.width === r[0] ? 'narrow' : i.width === r[1] ? 'wide' : `at:${i.width}`); setTimeout(() => locate(f, i.selector), 900) }
       else locate(f, i.selector)
     }
     ul.append(li)

package/dist/check.js

@@ -5,13 +5,16 @@
  * the canvas shows as badges.
  * Every screen is checked in its own theme, then again in each other theme DESIGN.md defines (designThemes):
  * colours change there, so contrast is checked again, tagged with the theme.
+ * Then in each app state (config modes), one mode at a time and in the screen's own theme: a screen is checked with
+ * every value its own file does not already have, and what only shows there (a bar that overflows signed in, a control
+ * that crowds another) is tagged with the state.
  * Then again in each check language (i18n.ts: the pseudo-languages and the config's): layout problems that
  * show only there (a label running into its neighbour, text cut off, a control drawn backwards right to left),
  * and keys a locale has no translation for, tagged with the locale. Last, each variant at both ends of the widths
  * it covers (config widths: mobile 360–599, desktop 1024–1920 by default) and at every breakpoint inside them
  * (config breakpoints, Tailwind's by default), tagged with the width.
  * 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)
+ *   --shots   also save page-tall renders to design/renders/ (one per theme, app state, 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).
@@ -22,7 +25,7 @@ import { fileURLToPath } from 'node:url';
 import { chromium } from '@playwright/test';
 import { fingerprintPaths } from './cache.js';
 import { colourIssues } from './colours.js';
-import { CONFIG_FILE, checkWidths, config } from './config.js';
+import { CONFIG_FILE, checkWidths, config, modes } from './config.js';
 import { collectComponents, collectOptions, consistencyIssues, reuseIssues, } from './consistency.js';
 import { designThemes, motionDurations, typeLevels } from './design-md.js';
 import { checkLocales } from './i18n.js';
@@ -40,6 +43,7 @@ const filters = args.filter((a, i) => !a.startsWith('--') && (localesFlag < 0 ||
 const screens = listScreens().filter((s) => !filters.length || filters.some((f) => s.path.includes(f)));
 const levels = typeLevels();
 const themes = designThemes();
+const appModes = modes();
 const collect = collectOptions();
 /** What the layout audit needs: the comfortable tap size and DESIGN.md's motion durations. */
 const auditOpts = { comfortable: config.comfortableTarget, durations: (() => { try {
@@ -134,6 +138,23 @@ const checkOne = async (s, worker) => {
         }
         if (themes.length > 1)
             await setTheme(page, base);
+        // The app states: each value the screen is not drawn in, one mode at a time, then the screen's own value again.
+        for (const mode of appModes) {
+            const drawn = await page.evaluate((attribute) => document.documentElement.getAttribute(attribute), mode.attribute);
+            for (const value of mode.values.filter((v) => v.value !== drawn)) {
+                await setAttribute(page, mode.attribute, value.value);
+                for (const i of await page.evaluate(audit, auditOpts)) {
+                    const key = `${i.type} ${i.selector}`;
+                    if (seen.has(key))
+                        continue;
+                    seen.add(key);
+                    themed.push({ ...i, ...(i.type === 'contrast' ? { theme: base } : {}), mode: `${mode.name}:${value.value}`, message: `${value.label}: ${i.message}` });
+                }
+                if (shots)
+                    await shoot(page, s, undefined, undefined, `${mode.name}-${value.value}`);
+            }
+            await setAttribute(page, mode.attribute, drawn);
+        }
         const typed = typeIssues(levels, await page.evaluate(collectText));
         if (shots)
             await shoot(page, s);
@@ -251,7 +272,16 @@ async function setTheme(page, theme) {
     }, 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 setAttribute(page, attribute, value) {
+    await page.evaluate(([name, to]) => {
+        if (to === null)
+            document.documentElement.removeAttribute(name);
+        else
+            document.documentElement.setAttribute(name, to);
+    }, [attribute, value]);
+    await page.waitForTimeout(150);
+}
+/** A page-tall render; renders in another theme, app state or language than the screen's own get a --<name> suffix. */
 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)) });

package/dist/config.d.ts

@@ -60,7 +60,8 @@ export interface LabConfig {
     sandboxExclude?: string[];
     /**
      * App states shown across all screens (see ModeConfig). The canvas has a dropdown for each, with the screens as drawn
-     * first; picking a value sets its attribute on every screen, live ones and the pictures of the rest.
+     * first; picking a value sets its attribute on every screen, live ones and the pictures of the rest. stitch2 check also
+     * runs each screen in every value its file does not already have, one mode at a time.
      */
     modes?: ModeConfig[];
     /** The live app, for stitch2 compare (see compare.ts): its URL, a sign-in script and a route per screen. */

package/dist/typecheck.d.ts

@@ -15,6 +15,8 @@ export interface Issue {
     locale?: string;
     /** Set when the issue shows only at another window width: the edge of its variant's range (config widths). */
     width?: number;
+    /** Set when the issue shows only in another app state (config modes): "name:value", as the canvas sidebar names it. */
+    mode?: string;
 }
 export interface TextItem {
     selector: string;

package/package.json

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

@@ -77,6 +77,8 @@ References, read before the first screen:
    An issue tagged with a width ("at 1024px: …") breaks at an edge of the windows the variant covers: fix it with a
    responsive rule in the screen, or a new variant when the layout's structure has to change (screens.md, Widths).
    Widths include the breakpoints inside the range; `narrow-layout` is a phone column left in a wide window.
+   An issue tagged with an app state ("Signed in: …"; `modes` in the config, screens.md) shows only in that state: fix it in
+   the screen's rules for that state, and look at its render (`--auth-user.png`). Clicking it on the canvas shows the state.
    Overlap checks compare the drawn fragments of wrapped inline controls, not the empty corners of their
    bounding boxes. For fixed bars, the browser's paint order decides coverage: a menu painted in front of a
    header is not hidden by it. Native modal dialogs and ARIA modals limit coverage and control comparisons
@@ -127,7 +129,7 @@ References, read before the first screen:
 |---|---|
 | `setup [--name N --primary #hex] [options]` | Sets a project up in one step; keeps every file that exists |
 | `canvas` | The canvas at http://localhost:4400: screens and versions, DESIGN.md, the consistency report, approval and notes |
-| `check [filter] [--shots] [--strict] [--locales l,…]` | Layout, type, reuse and consistency checks, in every theme and check language, and at both ends of each variant's widths; `--shots` saves renders |
+| `check [filter] [--shots] [--strict] [--locales l,…]` | Layout, type, reuse and consistency checks, in every theme, app state and check language, and at both ends of each variant's widths; `--shots` saves renders |
 | `i18n [filter] [--locale l] [--suggest]` | Message keys screens use that the source or a locale lacks, and text with no key (stitch2-i18n) |
 | `consistency [kind…]` | Every shared component cropped from every screen, next to the catalog's version |
 | `type [filter] [--json]` | Every text style a screen uses and the type level it matches |

package/skills/stitch2/references/screens.md

@@ -186,8 +186,10 @@ screen per state. Draw it once, let its CSS and scripts answer to an attribute o
 The canvas sidebar then has a dropdown for each mode. A value sets the attribute (`data-auth="user"`; `attribute`
 names another) on every screen, live frames and the pictures of the rest, and "As drawn" puts each screen back to what
 its file says. `m` cycles the first mode. A screen is still written for the state it shows (a signed-in account page has
-`data-auth="user"` in its file); modes show the other states of the same screen. `stitch2 check` runs on the screens as
-drawn, not in each state, so open the other states on the canvas and look at them before hand-over.
+`data-auth="user"` in its file); modes show the other states of the same screen. `stitch2 check` also runs each screen in every
+value its own file does not have, one mode at a time (modes are not combined), and tags what only shows there with the
+state ("Signed in: …"); clicking such an issue on the canvas shows that state. With `--shots` each state is rendered too
+(`<screen>--auth-user.png`): look at it before hand-over.
 
 ## The canvas