stitch2 0.22.10 → 0.22.12

package/dist/audit.js

@@ -145,15 +145,13 @@ export async function audit(opts) {
             (c.display.includes('flex') && c.flexDirection.startsWith('column')) ||
             (c.display.includes('grid') && c.gridTemplateColumns.split(/\s+/).length === 1);
     };
-    const disclosureTextFits = (el) => {
-        if (!el.matches('button[aria-expanded]:not([aria-haspopup])'))
-            return false;
+    const contentTextFits = (el) => {
         const c = getComputedStyle(el);
-        if (!['left', 'start'].includes(c.textAlign))
-            return false;
         const r = el.getBoundingClientRect();
         const top = r.top + parseFloat(c.borderTopWidth) + parseFloat(c.paddingTop);
         const bottom = r.bottom - parseFloat(c.borderBottomWidth) - parseFloat(c.paddingBottom);
+        const left = r.left + parseFloat(c.borderLeftWidth) + parseFloat(c.paddingLeft);
+        const right = r.right - parseFloat(c.borderRightWidth) - parseFloat(c.paddingRight);
         const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
         let found = false;
         for (let n = walker.nextNode(); n; n = walker.nextNode()) {
@@ -163,12 +161,23 @@ export async function audit(opts) {
             range.selectNodeContents(n);
             for (const q of range.getClientRects()) {
                 found = true;
-                if (q.top < top - 1 || q.bottom > bottom + 1)
+                if (q.top < top - 1 || q.bottom > bottom + 1 || q.left < left - 1 || q.right > right + 1)
                     return false;
             }
         }
         return found;
     };
+    const disclosureTextFits = (el) => el.matches('button[aria-expanded]:not([aria-haspopup])') &&
+        ['left', 'start'].includes(getComputedStyle(el).textAlign) && contentTextFits(el);
+    const readableContentControl = (el) => {
+        if (el.closest('nav, [role=navigation], [role=menu], [role=tablist], [role=toolbar]'))
+            return false;
+        const c = getComputedStyle(el);
+        // Pretty/balanced wrapping explicitly authors a content title, not a
+        // compact action label. It still has to fit without clipping or crowding.
+        return ['pretty', 'balance'].includes(c.textWrapStyle) &&
+            parseFloat(c.lineHeight) >= parseFloat(c.fontSize) * 1.3 && contentTextFits(el);
+    };
     // 1. Nothing past the screen edge, except inside deliberate horizontal scrollers (chip rows).
     if (document.documentElement.scrollWidth > W + 1)
         push('error', 'page-overflow', document.body, `The page scrolls sideways (${document.documentElement.scrollWidth}px wide)`);
@@ -177,6 +186,10 @@ export async function audit(opts) {
         const r = el.getBoundingClientRect();
         if (r.right <= W + 1 && r.left >= -1)
             continue;
+        // A nested clip (for example a title's ellipsis) must not hide the fact
+        // that its whole card belongs to a deliberate horizontal scroller.
+        if (visibleRects(el).every((q) => q.right <= 0 || q.left >= W))
+            continue;
         let clip = null;
         for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
             const ox = getComputedStyle(p).overflowX;
@@ -227,26 +240,29 @@ export async function audit(opts) {
     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 ?? ''));
     for (const el of all) {
-        if (!isLabel(el) || text(el).length > 40 || el.querySelector('p, div, li, ul, br'))
+        if (!isLabel(el) || el.querySelector('p, div, li, ul, br'))
+            continue;
+        // A tooltip describes its trigger but is not its painted control label,
+        // even when hovered. Hidden hints cannot create a wrap or conceal a real
+        // wrapped label by pushing its text beyond the short-label length limit.
+        const labelNodes = [];
+        const textWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        for (let n = textWalker.nextNode(); n; n = textWalker.nextNode())
+            if (n.textContent.trim() && n.parentElement && shown(n.parentElement) && !n.parentElement.closest('[role=tooltip]'))
+                labelNodes.push(n);
+        if (!labelNodes.length || labelNodes.map((n) => n.textContent).join(' ').trim().length > 40)
             continue;
         // Prose links flow with their sentence; vertical contents titles and fitted disclosure headings can
         // also wrap. Horizontal navigation, tabs and ordinary button labels retain their one-line rule.
-        if (proseLink(el) || verticalNavigationLink(el) || disclosureTextFits(el))
+        if (proseLink(el) || verticalNavigationLink(el) || disclosureTextFits(el) || readableContentControl(el))
             continue;
         // A control whose text sits in two or more elements (a list row's title and its meta line) is a composite
         // control, not a label: its lines are laid out on purpose.
-        const holders = new Set();
-        const textWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-        for (let n = textWalker.nextNode(); n; n = textWalker.nextNode())
-            if (n.textContent.trim() && n.parentElement)
-                holders.add(n.parentElement);
+        const holders = new Set(labelNodes.map((n) => n.parentElement));
         if (holders.size > 1)
             continue;
         // A wrap is one text node breaking across lines; an icon above its label is layout, not a wrap.
-        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
-            if (!n.textContent.trim())
-                continue;
+        for (const n of labelNodes) {
             // A label allowed two lines on purpose (line-clamp-2: a navigation rail's, under its icon) may wrap.
             if ((parseInt(getComputedStyle(n.parentElement).getPropertyValue('-webkit-line-clamp')) || 0) > 1)
                 continue;
@@ -338,7 +354,7 @@ export async function audit(opts) {
             const atEdge = edge === 'bottom' ? b.bottom >= H - 4 && b.top > H / 2 : b.top <= 4 && b.bottom < H / 2;
             if (!atEdge)
                 continue;
-            const drawn = paintedParts(bar).flatMap(visibleRects);
+            const drawn = paintedParts(bar).flatMap((part) => visibleRects(part));
             for (const el of content) {
                 if (el.contains(bar))
                     continue;
@@ -354,7 +370,7 @@ export async function audit(opts) {
     // 3b. Fixed bars never overlap one another, including what sticks out of them (a raised tab-bar button
     // reaching into a docked timer). Compares the painted parts: backgrounds, borders, text, icons, controls.
     const fixedBars = outer.filter((b) => getComputedStyle(b).position === 'fixed' && b.getBoundingClientRect().height < window.innerHeight * 0.8);
-    const parts = (bar) => paintedParts(bar).flatMap(visibleRects);
+    const parts = (bar) => paintedParts(bar).flatMap((part) => visibleRects(part));
     for (const [i, a] of fixedBars.entries())
         for (const b of fixedBars.slice(i + 1)) {
             const hit = parts(a).some((r) => parts(b).some((q) => Math.min(r.right, q.right) - Math.max(r.left, q.left) > 2 && Math.min(r.bottom, q.bottom) - Math.max(r.top, q.top) > 2));
@@ -385,12 +401,58 @@ export async function audit(opts) {
                 return e;
         return null;
     };
+    const tapRect = (el) => {
+        if (el instanceof HTMLInputElement && /^(checkbox|radio)$/.test(el.type))
+            for (const label of el.labels ?? []) {
+                if (!shown(label) || label.control !== el || getComputedStyle(label).pointerEvents === 'none')
+                    continue;
+                const sized = (box) => box.right - box.left >= opts.comfortable && box.bottom - box.top >= opts.comfortable;
+                let r = visibleRects(label).find(sized);
+                // A row at a scrollport edge can be fully revealed even inside an
+                // overflow-hidden dialog frame. Prove that by scrolling, measuring the
+                // actually exposed area, then restoring every scroll position.
+                if (!r) {
+                    const original = label.getBoundingClientRect();
+                    const scrolls = [];
+                    for (let p = label.parentElement; p; p = p.parentElement) {
+                        const c = getComputedStyle(p);
+                        if ((/auto|scroll/.test(c.overflowX) && p.scrollWidth > p.clientWidth) || (/auto|scroll/.test(c.overflowY) && p.scrollHeight > p.clientHeight))
+                            scrolls.push({ el: p, left: p.scrollLeft, top: p.scrollTop });
+                    }
+                    if (scrolls.length && original.width >= opts.comfortable && original.height >= opts.comfortable) {
+                        const before = { x: scrollX, y: scrollY };
+                        try {
+                            label.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'instant' });
+                            const revealed = visibleRects(label).find(sized);
+                            if (revealed)
+                                r = { left: original.left, top: original.top, right: original.left + revealed.right - revealed.left, bottom: original.top + revealed.bottom - revealed.top };
+                        }
+                        finally {
+                            for (const s of scrolls) {
+                                s.el.scrollLeft = s.left;
+                                s.el.scrollTop = s.top;
+                            }
+                            window.scrollTo({ left: before.x, top: before.y, behavior: 'instant' });
+                        }
+                    }
+                }
+                // Associated native labels are part of the hit area, not checkbox artwork.
+                if (r)
+                    return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.right - r.left, height: r.bottom - r.top };
+            }
+        return el.getBoundingClientRect();
+    };
     for (const el of interactive) {
         if (interactive.some((o) => o !== el && o.contains(el)))
             continue;
         if (proseLink(el))
             continue;
-        const r = el.getBoundingClientRect();
+        // Scrolling containers can fully clip an otherwise laid-out control. It
+        // has no current hit area to measure; being below the window alone does
+        // not clip it, and the control is checked after scrolling it into view.
+        if (!visibleRects(el).length)
+            continue;
+        const r = tapRect(el);
         const min = Math.min(r.width, r.height);
         // WCAG 2.2 spacing exception: a smaller target passes when a 24px circle on it touches no other target.
         const cx = r.left + r.width / 2;
@@ -398,7 +460,7 @@ export async function audit(opts) {
         const crowded = interactive.some((o) => {
             if (o === el || o.contains(el) || el.contains(o) || layerOf(o) !== layerOf(el))
                 return false;
-            const q = o.getBoundingClientRect();
+            const q = tapRect(o);
             const dx = Math.max(q.left - cx, 0, cx - q.right);
             const dy = Math.max(q.top - cy, 0, cy - q.bottom);
             return Math.hypot(dx, dy) < 12;
@@ -478,7 +540,7 @@ export async function audit(opts) {
         return q.right <= left + 1 || q.left >= right - 1;
     };
     // Behind an open modal (found above) only the modal's own controls count.
-    const solid = interactive.filter((el) => opacity(el) > 0.05 && (!modal || modal.contains(el)));
+    const solid = interactive.filter((el) => opacity(el) > 0.05 && visibleRects(el).length > 0 && (!modal || modal.contains(el)));
     const emptyOverlays = new Set(solid.filter(isEmptyOverlay));
     const controlRects = new Map(solid.map((el) => [el, visibleRects(el)]));
     for (const [i, a] of solid.entries())
@@ -640,9 +702,16 @@ export async function audit(opts) {
     // 6. Google's guidelines (Material 3, Android's app quality guidelines, web.dev, Lighthouse). Warnings: each names
     // the rule it comes from, so a screen can break one on purpose (see skills/stitch2/references/google.md).
     const textRects = (el) => {
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        return [...range.getClientRects()].filter((r) => r.width > 1 && r.height > 1);
+        const rects = [];
+        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+            if (!node.textContent.trim() || !node.parentElement || !shown(node.parentElement) || opacity(node.parentElement) < 0.1)
+                continue;
+            const range = document.createRange();
+            range.selectNodeContents(node);
+            rects.push(...range.getClientRects());
+        }
+        return rects.filter((r) => r.width > 1 && r.height > 1);
     };
     const scrollsSideways = (el) => {
         for (let e = el.parentElement; e && e !== document.body; e = e.parentElement) {
@@ -682,7 +751,9 @@ export async function audit(opts) {
             continue;
         const lineChars = [];
         const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-        for (let t = walker.nextNode(); t; t = walker.nextNode())
+        for (let t = walker.nextNode(); t; t = walker.nextNode()) {
+            if (!t.parentElement || !shown(t.parentElement) || opacity(t.parentElement) < 0.1)
+                continue;
             for (const m of t.textContent.matchAll(/\S+\s*/g)) {
                 const range = document.createRange();
                 range.setStart(t, m.index);
@@ -694,6 +765,7 @@ export async function audit(opts) {
                 else
                     lineChars.push({ top, n: m[0].replace(/\s+/g, ' ').length });
             }
+        }
         if (lineChars.length < 2)
             continue;
         const longest = Math.max(...lineChars.sort((a, b) => a.top - b.top).slice(0, -1).map((l) => l.n));
@@ -708,7 +780,7 @@ export async function audit(opts) {
         for (const el of solid) {
             if (solid.some((o) => o !== el && o.contains(el)) || proseLink(el))
                 continue;
-            const r = el.getBoundingClientRect();
+            const r = tapRect(el);
             if (r.width >= 48 && r.height >= 48)
                 continue;
             if (out.some((i) => i.type === 'tap-target' && i.selector === sel(el)))
@@ -718,7 +790,12 @@ export async function audit(opts) {
             const hit = solid.find((o) => {
                 if (o === el || o.contains(el) || el.contains(o) || layer(o) !== layer(el))
                     return false;
-                const q = o.getBoundingClientRect();
+                // A compound input's clear/reveal/list button occupies reserved padding,
+                // not a neighbouring target. The same geometry as overlap checks keeps
+                // insufficient padding and unrelated adjacent controls checked.
+                if (reservedInputAction(el, o) || reservedInputAction(o, el) || emptyOverlay(el, o) || emptyOverlay(o, el))
+                    return false;
+                const q = tapRect(o);
                 const ox = Math.max(0, Math.min(cx + 24, q.right) - Math.max(cx - 24, q.left));
                 const oy = Math.max(0, Math.min(cy + 24, q.bottom) - Math.max(cy - 24, q.top));
                 return ox * oy > 48;

package/dist/canvas.html

@@ -385,6 +385,15 @@ const rows = () => {
 
 // Screens flow left to right and wrap, like a design canvas; each screen's versions stay together.
 function layout() {
+  // Late page/thumbnail heights move later rows. Keep the frame being reviewed
+  // at its current screen position, not at a fresh zoomTo position. A frame the
+  // user has panned away from, or an active drag, must not pull the camera back.
+  const anchor = (() => {
+    if (!selected || selected.el.style.display === 'none' || viewport.classList.contains('panning')) return null
+    const a = selected.el.getBoundingClientRect(), b = viewport.getBoundingClientRect()
+    if (a.right <= b.left || a.left >= b.right || a.bottom <= b.top || a.top >= b.bottom) return null
+    return { frame: selected, x: parseFloat(selected.el.style.left), y: parseFloat(selected.el.style.top) }
+  })()
   for (const n of world.querySelectorAll('.row-label')) n.remove()
   let x = 0, y = 0, lineH = 0, page = ''
   const all = rows()
@@ -435,6 +444,11 @@ function layout() {
   }
   tree()
   sendFilter()
+  if (anchor && selected === anchor.frame && selected.el.style.display !== 'none') {
+    const dx = (anchor.x - parseFloat(selected.el.style.left)) * view.z
+    const dy = (anchor.y - parseFloat(selected.el.style.top)) * view.z
+    if (dx || dy) { view.x += dx; view.y += dy; apply(); return }
+  }
   scheduleSync()
 }
 

package/dist/colours.js

@@ -9,15 +9,31 @@ import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { config } from './config.js';
 import { familyOf } from './consistency.js';
-import { ROOT } from './screens.js';
+import { ROOT, meta, tag } from './screens.js';
 const LITERAL = /(?<![\w&/=-])#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b|(?<![a-zA-Z])(?:rgba?|hsla?)\(\s*[\d.][^)]*\)/g;
 /** Lines with a literal colour, comments blanked out (keeping line numbers). */
 function literals(source, js) {
     let s = source.replace(/<!--[\s\S]*?-->/g, (m) => m.replace(/[^\n]/g, ' '));
     if (js)
         s = s.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')).replace(/^\s*\/\/.*$/gm, '');
-    else
+    else {
         s = s.replace(/<head[\s>][\s\S]*?<\/head>/i, (m) => m.replace(/[^\n]/g, ' '));
+        // Code examples and syntax highlighting are content. Keep the outer tag's
+        // styles so an actual code-container background still follows the theme.
+        s = s.replace(/(<(pre|code)\b[^>]*>)([\s\S]*?)(<\/\2\s*>)/gi, (_, open, _tag, body, close) => open + body.replace(/[^\n]/g, ' ') + close);
+        // SVG drawing colours belong to an asset; the outer SVG's class/style
+        // still follows UI tokens (for example a muted search icon).
+        s = s.replace(/(<svg\b[^>]*>)([\s\S]*?)(<\/svg\s*>)/gi, (_, open, body, close) => open + body.replace(/[^\n]/g, ' ') + close);
+        // Documentation can describe a literal colour without painting it. Only
+        // markup attributes are authored styling, not prose or example values.
+        const tags = [...s.matchAll(/<(?:[^>"']|"[^"]*"|'[^']*')*>/g)];
+        let styled = s.replace(/[^\n]/g, ' ');
+        for (const match of tags) {
+            const tag = match[0].replace(/\s(?:data-[\w-]+|on[\w]+)\s*=\s*("[^"]*"|'[^']*')/gi, (attribute) => attribute.replace(/[^\n]/g, ' '));
+            styled = styled.slice(0, match.index) + tag + styled.slice(match.index + match[0].length);
+        }
+        s = styled;
+    }
     const out = [];
     s.split('\n').forEach((text, i) => {
         for (const m of text.matchAll(LITERAL)) {
@@ -34,6 +50,9 @@ export function colourIssues(path) {
     if (familyOf(path) !== 'screens')
         return [];
     const html = readFileSync(join(ROOT, path), 'utf8');
+    // Imported captures document the app as it is, not an editable token source.
+    if (meta(html, tag('source')) === 'app')
+        return [];
     const found = literals(html, false).map((l) => ({ ...l, file: `${config.designDir}/${path}` }));
     if (path.startsWith(`${config.catalogDir}/`))
         for (const [, src] of html.matchAll(/<script[^>]*\bsrc="\/([^"]+\.js)"/g)) {

package/dist/consistency.js

@@ -201,9 +201,11 @@ export function collectComponents(opts) {
         const variant = el.getAttribute('data-variant');
         const kind = g === 'button'
             ? `button:${variant ?? 'primary'}:${el.getAttribute('data-size') ?? 'md'}`
-            : variant
-                ? `${g}:${variant}`
-                : g;
+            : g === 'card'
+                ? `card:${variant ?? 'default'}:${el.getAttribute('data-layout') ?? 'default'}:${el.getAttribute('data-size') ?? 'default'}`
+                : variant
+                    ? `${g}:${variant}`
+                    : g;
         if (!(g === 'button' && el.hasAttribute('disabled')))
             add(kind, el);
     }
@@ -293,6 +295,11 @@ const NAMES = {
 };
 export const nameOf = (kind) => NAMES[kind]?.[0] ?? kind.replace(/:/g, ' ');
 const key = (s) => JSON.stringify(s.fields);
+// An icon/thumb-only control has no painted typography to compare with a
+// labelled example. Its geometry still matches, and two actual fonts must match.
+const differences = (a, b) => Object.keys({ ...a.fields, ...b.fields })
+    .filter((f) => !(f === 'font' && (!a.fields.font || !b.fields.font)) && a.fields[f] !== b.fields[f]);
+const matches = (a, b) => differences(a, b).length === 0;
 /** Issues for the screens in `paths`, comparing with every screen whose components are known. */
 export function consistencyIssues(known, paths) {
     const out = {};
@@ -306,7 +313,7 @@ export function consistencyIssues(known, paths) {
         const peers = (families.get(familyOf(path)) ?? []).filter((p) => p !== path);
         for (const [kind, sigs] of Object.entries(known[path] ?? {})) {
             // The catalog shows every variant of a component side by side; a screen shows one.
-            if (sigs.length > 1 && MEASURED.has(kind.split(':')[0]) && !catalogs.includes(path))
+            if (sigs.some((a, i) => sigs.slice(i + 1).some((b) => !matches(a, b))) && MEASURED.has(kind.split(':')[0]) && !catalogs.includes(path))
                 issues.push({
                     severity: 'warning',
                     type: 'consistency',
@@ -322,11 +329,10 @@ export function consistencyIssues(known, paths) {
                 continue;
             if (reference.length) {
                 const mine = sigs[0];
-                if (reference.some((r) => key(r) === key(mine)))
+                if (reference.some((r) => matches(r, mine)))
                     continue;
                 const ref = reference[0];
-                const diffs = Object.keys({ ...mine.fields, ...ref.fields })
-                    .filter((f) => mine.fields[f] !== ref.fields[f])
+                const diffs = differences(mine, ref)
                     .map((f) => `${f} ${mine.fields[f] ?? '–'} (catalog ${ref.fields[f] ?? '–'})`);
                 issues.push({
                     severity: 'warning',
@@ -354,7 +360,7 @@ export function consistencyIssues(known, paths) {
                 continue;
             // No majority: report when this screen matches none of its peers either.
             if (top.n < 2 || ranked[1]?.n === top.n) {
-                if (!votes.has(key(mine)) && peers.filter((p) => known[p]?.[kind]).length >= 2)
+                if (![...votes.values()].some((v) => matches(mine, v.sig)) && peers.filter((p) => known[p]?.[kind]).length >= 2)
                     issues.push({
                         severity: 'warning',
                         type: 'consistency',
@@ -364,10 +370,9 @@ export function consistencyIssues(known, paths) {
                     });
                 continue;
             }
-            if (key(mine) === key(top.sig))
+            if (matches(mine, top.sig))
                 continue;
-            const diffs = Object.keys({ ...mine.fields, ...top.sig.fields })
-                .filter((f) => mine.fields[f] !== top.sig.fields[f])
+            const diffs = differences(mine, top.sig)
                 .map((f) => `${f} ${mine.fields[f] ?? '–'} (others ${top.sig.fields[f] ?? '–'})`);
             issues.push({
                 severity: 'warning',

package/dist/states.js

@@ -140,7 +140,7 @@ export async function catalogStates(page, path, opts) {
         const noHover = looks.hover?.look === looks.rest?.look;
         // Pressed is forced on top of hover: a press that adds nothing to hover shows nothing on a touch screen.
         const noPress = looks.pressed?.look === looks.hover?.look;
-        if (!c.field && !c.chosen) {
+        if (c.clickable && !c.field && !c.chosen) {
             if (noHover && noPress)
                 add('state-feedback', who + ': neither hovering nor pressing changes it, so a pointer or a tap gives no feedback (DESIGN.md, hover and pressed)');
             else if (noHover)
@@ -148,6 +148,8 @@ export async function catalogStates(page, path, opts) {
             else if (noPress)
                 add('state-pressed', who + ': pressing adds nothing to hover, so a tap gives no feedback (DESIGN.md, pressed)');
         }
+        if (!c.clickable && !c.field && looks.focus?.look === looks.rest?.look)
+            add('state-focus', who + ': this keyboard-focusable region needs a visible focus indicator, not hover or pressed feedback');
         // The hand says "this does something" before the click; the arrow over a button reads as plain text.
         const cursor = looks.hover?.cursor;
         if (c.clickable && cursor && cursor !== 'pointer')

package/dist/typecheck.d.ts

@@ -31,6 +31,8 @@ export interface TextItem {
     upper: boolean;
     numeric: boolean;
     lines: number;
+    /** Literal code uses its language's case and monospace conventions, not UI labels. */
+    code?: boolean;
 }
 /** Runs in the page. Plain JS on purpose: Playwright sends its source to the browser. */
 export declare function collectText(): TextItem[];

package/dist/typecheck.js

@@ -66,9 +66,10 @@ export function collectText() {
             color: `#${hex(m[0])}${hex(m[1])}${hex(m[2])}${alpha < 0.99 ? ` ${Math.round(alpha * 100)}%` : ''}`,
             // Set in capitals: uppercased by CSS, or typed in capitals (6+ letters, so "RPE" and "PR" don't count).
             upper: cs.textTransform === 'uppercase' ||
-                (own === own.toUpperCase() && own.replace(/[^A-Z]/g, '').length >= 6),
+                (!el.closest('td, dd, output') && own === own.toUpperCase() && own.replace(/[^A-Z]/g, '').length >= 6),
             numeric: /^[\d\s.,:×x+\-−–/%]+[a-z]{0,4}$/i.test(own) && /\d/.test(own),
             lines,
+            code: Boolean(el.closest('pre, code')),
         });
     }
     return out;
@@ -97,7 +98,7 @@ export function typeIssues(levels, items) {
         out.push({ severity, type, message, selector: t.selector, text: t.text });
     };
     for (const t of items) {
-        if (levels.length && !matchLevel(levels, t)) {
+        if (!t.code && levels.length && !matchLevel(levels, t)) {
             const key = describe(t);
             if (!seen.has(key)) {
                 seen.add(key);
@@ -106,9 +107,9 @@ export function typeIssues(levels, items) {
         }
         if (t.lines > 1 && t.lineHeight < t.size * 1.15)
             push('error', 'type-leading', t, `Wrapped text with cramped line height (${Math.round(t.lineHeight)}px for ${t.size}px type)`);
-        if (t.upper && t.text.length > 2 && t.tracking < 0.03 * t.size)
+        if (!t.code && t.upper && t.text.length > 2 && t.tracking < 0.03 * t.size)
             push('warning', 'type-caps', t, 'Capitals without letter-spacing (use label-caps, +0.06em)');
-        if (t.mono && t.size >= 18 && /\d[.,:]\d/.test(t.text))
+        if (!t.code && t.mono && t.size >= 18 && /\d[.,:]\d/.test(t.text))
             push('warning', 'type-mono-number', t, 'Large number in a monospace font: its point, comma or colon gets a full-width gap; use Geist with tabular figures');
     }
     return out;

package/package.json

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

@@ -57,6 +57,14 @@ References, read before the first screen:
    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`).
+   Native checkbox and radio targets include their visible, associated label; the glyph need not be 44px.
+   Hidden or noninteractive labels do not enlarge a hit area. Offscreen content in a deliberate horizontal
+   rail is not viewport clipping, while a partially visible cut label still needs correction.
+   Literal `<pre>`/`<code>` content keeps its language's case and syntax colours, not UI-label typography.
+   Native table-data, definition values and output values keep their supplied case too. Explicit CSS uppercase
+   and column headings still receive the caps-label tracking check.
+   The code container's own authored colours still follow DESIGN.md. Unchanged `source=app` captures are
+   not token-migration targets.
    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`,
@@ -78,11 +86,24 @@ References, read before the first screen:
    An empty, transparent stretched row/card action may sit under a secondary link; painted controls or
    partially colliding neighbours still fail. Do not silence an overlap by hiding content or removing its
    accessible label: inspect the visible state and fix actual collisions in the shared component.
+   Content-title controls may explicitly use `text-wrap: pretty` or `balance` when their full text fits
+   inside the control with readable line height. This does not exempt navigation, menus, tabs or toolbars,
+   clipped titles, or ordinary compact action labels. Do not shrink or truncate content to force one line.
    Inline links within a prose sentence may wrap and receive WCAG's inline-target exception, including
    sentences inside list items; standalone links do not. Titles in vertical contents/menu lists may wrap,
    unlike horizontal navigation labels. An in-page disclosure (`aria-expanded`, without `aria-haspopup`)
    may have a multiline heading when its height and padding fit the complete text. A text input's clear,
    reveal or list-toggle button may overlap only padding reserved for it, never the editable text area.
+   Such a geometrically contained action is one compound input, not a close neighbour for `tap-spacing`;
+   a button intruding into editable text or an unrelated adjacent control still fails the checks.
+   A transparent stretched row action below its own secondary link is not a competing touch target when
+   browser hit-testing proves that link is reachable; painted, blocking or merely adjacent controls still fail.
+   Fully clipped controls inside scrolling containers have no painted hit area until scrolled into view;
+   this does not exempt visible small controls or content merely below the window.
+   A partly scroll-clipped native choice label retains its full hit-area size only when the scrollport can
+   reveal the minimum target. Permanent clipping and scrollports too small to reveal it still fail.
+   Tooltip copy is reading text, not its trigger's compact label: it may wrap when visible and does not
+   create or hide a `label-wraps` issue on the trigger. The actual painted control label is still checked.
    Cached checks are invalidated when shared components, the catalog or the checker change. A filtered
    rerun refreshes only those screens; it must not make unrelated screens' older checks appear current.
    Motion warnings: `motion-token` (a transition length DESIGN.md doesn't name) and `reduced-motion` (something
@@ -90,6 +111,9 @@ References, read before the first screen:
    States sheet (components.md, States).
 6. **Look and critique.** View the render in `<design>/renders/` (crop the first screenful). Score it with the
    rubric in principles.md, fix what fails, repeat 5–6 at most three times.
+   On the canvas, select a later row and zoom out and back while earlier pages/thumbnails load. The selected
+   visible frame keeps its screen position when row heights settle; this does not recenter a frame you pan
+   away from or interrupt a drag. Check the live canvas as well as the saved render before hand-over.
 7. **Hand over.** Set the version's status to `review`, point the user to it on the canvas, and report what
    changed, how you answered their notes, and any rubric item you could not satisfy. The page's empty and loading
    screens go to review with it; for a page without them (a form, a static page), say why. The user approves; only then

package/skills/stitch2/references/components.md

@@ -45,7 +45,9 @@ clickable element that is not a button or a link gets `role="button"` (and a key
 it the hand. Override the cursor only with a reason (`cursor-grab` on a drag handle).
 
 The catalog shows each component in each of its **data states** (selected, done, active, disabled, error, with
-and without an icon). Hover, focus and pressed are not drawn by hand: `stitch2 check` on the catalog forces them on
+and without an icon). Keyboard-focusable reading or scrolling regions are not click actions and need no hover
+or pressed feedback, but must show a visible focus indicator (`state-focus`). Actual actions retain those checks.
+Hover, focus and pressed are not drawn by hand: `stitch2 check` on the catalog forces them on
 every control and writes the **States** sheet (canvas sidebar), each control at rest, hovered, focused and
 pressed side by side. It reports a control that gives no feedback (**state-feedback**, **state-hover**,
 **state-pressed**: pressing adds nothing to hover, so a tap shows nothing) and text that loses contrast in a state

package/skills/stitch2-consistency/SKILL.md

@@ -6,6 +6,8 @@ description: Verify that shared elements (tab bar, header, buttons, chips, icon
 # Verifying design consistency with stitch2
 
 A shared element must be the same everywhere: same size, radius, type, colour, icon set, icons and states.
+Declared card layout and size variants are compared separately: a horizontal row and a media showcase
+have different geometry by design. Each variant still has to match its own catalog reference or peers.
 stitch2 measures this; your job is to read the evidence, decide what is wrong, and fix it at the source. The
 reference is the **component catalog** (the screen in the config's `catalogDir`); without a catalog, the
 majority of screens in the same family.
@@ -28,6 +30,8 @@ majority of screens in the same family.
    - `reuse`: a lab screen built a catalog component by hand instead of using it.
 4. Look at the crops yourself. Numbers say what differs; the images say whether it matters. A 1 px height
    difference from a border is noise; another icon set, label size or button shape is not.
+   Font comparisons apply when both controls paint a label. An icon/thumb-only control has no label font;
+   its geometry remains checked, and genuine font differences between labelled controls still fail.
 
 ## 2. Decide, per difference