@ethlete/cli 3.0.0-next.26 → 3.0.0-next.28

package/src/lib/design/system/render-check.js

@@ -9,21 +9,56 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderIssuesOf = exports.groupedIssueLinesOf = exports.renderIssueLineOf = void 0;
+exports.renderIssuesOf = exports.inspectRetryingTimeouts = exports.RENDER_TIMEOUT = exports.RENDER_ISSUES = exports.INSPECTS_AT_ONCE = exports.uniqueIssuesOf = exports.BASELINED_RENDER_RULES = exports.WARNING_RULES = exports.groupedIssueLinesOf = exports.ownerPartOf = exports.renderIssueLineOf = exports.busyStatesOf = void 0;
+const rxjs_1 = require("rxjs");
+const run_yield_1 = require("../run-yield");
 const browser_1 = require("../browser");
+const vite_cache_1 = require("../vite-cache");
 const contrast_check_1 = require("./contrast-check");
 const complete_1 = require("./complete");
+const action_undeclared_1 = require("./action-undeclared");
+const disabled_interaction_1 = require("./disabled-interaction");
+const arrow_anchor_1 = require("./arrow-anchor");
+const off_centre_1 = require("./off-centre");
 const css_source_1 = require("./css-source");
 const serve_1 = require("../serve");
 const shot_1 = require("../shot");
 const thumb_1 = require("../thumb");
-const list_system_1 = require("./list-system");
+const grid_report_1 = require("./grid-report");
+const sdk_errors_1 = require("./sdk-errors");
 const resolve_product_1 = require("./resolve-product");
 const system_modules_1 = require("./system-modules");
-const unchanged_states_1 = require("./sketch/unchanged-states");
 const option_values_1 = require("./rules/option-values");
+const see_through_1 = require("./see-through");
+const surface_nesting_1 = require("./surface-nesting");
+const nested_scroll_1 = require("./nested-scroll");
+const skip_classes_1 = require("./skip-classes");
+const actions_1 = require("./actions");
+const no_verdict_1 = require("./no-verdict");
+const reach_1 = require("./reach");
+const reachable_controls_1 = require("./reachable-controls");
+const compare_cache_1 = require("./compare-cache");
+const render_issue_key_1 = require("./render-issue-key");
+const served_cache_1 = require("./served-cache");
+const code_hash_1 = require("../code-hash");
+const BUSY_MARK = 'BUSY';
+/** @internal The states the busy marks of `issues` name, once each. */
+const busyStatesOf = (issues) => {
+    const seen = new Set();
+    return issues.flatMap(({ rule, product, part, state, sketch }) => {
+        const key = JSON.stringify([product, part, state, sketch]);
+        if (rule !== BUSY_MARK || seen.has(key))
+            return [];
+        seen.add(key);
+        return [{ product, part, state, sketch }];
+    });
+};
+exports.busyStatesOf = busyStatesOf;
 const renderIssueLineOf = (issue) => `${issue.rule} ${issue.product} ${issue.part} ${issue.state} at ${issue.size}: ${issue.path} - ${issue.detail}`;
 exports.renderIssueLineOf = renderIssueLineOf;
+/** The part whose code draws the element of an issue: the innermost embedded part on its path, else the drawn part. */
+const ownerPartOf = (issue) => { var _a, _b; return (_b = (_a = [...issue.path.matchAll(/\[data-et-part=([^\]]+)\]/gu)].pop()) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : issue.part; };
+exports.ownerPartOf = ownerPartOf;
 const SCHEME_IN_DETAIL = / in the (light|dark) scheme/u;
 /** The render issues as lines, one per finding that repeats across states, sizes, schemes and variants, with where it was found. */
 const groupedIssueLinesOf = (issues) => {
@@ -60,13 +95,17 @@ const SINGLE_LINE = 'button, [role="button"], [role="tab"], [role="switch"], [ro
  * Reads the rule breaks in a drawn frame. A string, not a function: the build would add helpers to a
  * function that the page does not have.
  */
-const ESCAPABLE = ['CLIPPED', 'WRAP'];
-const WARNING_RULES = new Set(['UNDEFINED-CLASS', 'EMBED-SCALE']);
+const ESCAPABLE = skip_classes_1.ESCAPABLE_RULES;
+/** The render rules that warn instead of failing. A new rule fails, with a rule baseline for its old hits (ADR 0201). */
+exports.WARNING_RULES = new Set(['UNDEFINED-CLASS', 'EMBED-SCALE']);
+/** The render rules whose hits on merged parts the rule baseline of their product lists (ADR 0201). */
+exports.BASELINED_RENDER_RULES = new Set([off_centre_1.OFF_CENTRE_RULE]);
+const BUSY_SELECTOR = '[aria-busy="true"], [data-loading="true"]';
 // complete.ts and this module sit in an import cycle: read PLAIN_CONTROL_SELECTOR here, a top-level copy can be undefined.
 const inspectFrame = (options) => `((options) => {
   const root = document.getElementById('root');
   const refused = root.innerText.trim();
-  if (refused.startsWith('design-explore:')) return [{ rule: 'RENDER', path: '#root', detail: refused.split('\\n')[0] }];
+  if (refused.startsWith('design-explore:')) return options.sdkStylesOnly ? [] : [{ rule: 'RENDER', path: '#root', detail: refused.split('\\n').map((line) => line.trim()).filter(Boolean).join(' - ') }];
 
   const found = [];
   const seen = new Set();
@@ -92,7 +131,7 @@ const inspectFrame = (options) => `((options) => {
   };
   const pathOf = (element) => {
     const names = [];
-    for (let at = element; at && at !== root && names.length < 4; at = at.parentElement) names.unshift(nameOf(at));
+    for (let at = element; at && at !== root && names.length < ${render_issue_key_1.PATH_DEPTH}; at = at.parentElement) names.unshift(nameOf(at));
     return names.join(' > ');
   };
   const report = (rule, element, detail) => {
@@ -105,9 +144,22 @@ const inspectFrame = (options) => `((options) => {
   const sizeOf = (element) =>
     element.scrollWidth + 'x' + element.scrollHeight + ' in ' + element.clientWidth + 'x' + element.clientHeight;
 
+  if (options.sdkStylesOnly) {
+    for (const element of root.querySelectorAll('.et-visually-hidden')) {
+      if (element.getClientRects().length === 0) continue;
+      const style = getComputedStyle(element);
+      if (style.position !== 'absolute' || style.clipPath === 'none')
+        report('UNSTYLED-SDK', element, 'the visually hidden "' + element.textContent.trim().slice(0, 32) + '" draws in the picture, so an SDK component here renders without its styles');
+    }
+    return found;
+  }
+
   const partRoot = root.querySelector('[data-et-part]') ?? root.querySelector(':scope > :not(style)');
   if (!partRoot) return found;
 
+  const busy = root.querySelector('${BUSY_SELECTOR}');
+  if (busy) found.push({ rule: '${BUSY_MARK}', path: pathOf(busy), detail: 'draws ongoing work' });
+
   const sheets = [...document.styleSheets].map((sheet) => {
     try {
       return [...sheet.cssRules].map((rule) => rule.cssText).join('\\n');
@@ -170,19 +222,31 @@ const inspectFrame = (options) => `((options) => {
   }
 
   const clips = (value) => value === 'hidden' || value === 'clip';
+  const isMoved = (style) => style.transform !== 'none' || (style.translate && style.translate !== 'none');
+  const isPanned = (style) => (style.translate && style.translate !== 'none') || style.transform.startsWith('matrix(1, 0, 0, 1,');
+  const scaledChildOf = (element) =>
+    [...element.children].find((child) => {
+      const style = getComputedStyle(child);
+      return isMoved(style) && !isPanned(style);
+    });
   const drawnSizeOf = (element) => {
-    if (!element.hasAttribute('data-et-embed-box')) return { width: element.scrollWidth, height: element.scrollHeight };
-    const rect = element.firstElementChild.getBoundingClientRect();
+    const scaled = element.hasAttribute('data-et-embed-box') ? element.firstElementChild : scaledChildOf(element);
+    if (!scaled) return { width: element.scrollWidth, height: element.scrollHeight };
+    const rect = scaled.getBoundingClientRect();
     return { width: Math.floor(rect.width), height: Math.floor(rect.height) };
   };
+  const clipMarginOf = (style, axis) => (style[axis] === 'clip' ? parseFloat((style.overflowClipMargin ?? '').split(' ').pop()) || 0 : 0);
+  const drawsByClipping = (element) => element.closest('.et-spinner') !== null;
+  const pans = (element, style) => /^grab/.test(style.cursor) || [...element.children].some((child) => isPanned(getComputedStyle(child)));
   for (const element of root.querySelectorAll('*')) {
     const style = getComputedStyle(element);
     const drawn = drawnSizeOf(element);
-    const cutX = clips(style.overflowX) && drawn.width > element.clientWidth;
-    const cutY = clips(style.overflowY) && drawn.height > element.clientHeight;
-    const cutsOnPurpose = style.textOverflow === 'ellipsis' || style.webkitLineClamp !== 'none';
+    const cutX = clips(style.overflowX) && drawn.width > element.clientWidth + clipMarginOf(style, 'overflowX');
+    const cutY = clips(style.overflowY) && drawn.height > element.clientHeight + clipMarginOf(style, 'overflowY');
+    const cutsOnPurpose = style.textOverflow === 'ellipsis' || style.webkitLineClamp !== 'none' || pans(element, style) || drawsByClipping(element);
     if ((cutX || cutY) && !cutsOnPurpose) report('CLIPPED', element, 'content ' + drawn.width + 'x' + drawn.height + ' in ' + element.clientWidth + 'x' + element.clientHeight);
   }
+${nested_scroll_1.NESTED_SCROLL_STATEMENTS}
 
   const px = (value) => parseFloat(value) || 0;
   const invisible = (colour) => colour === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(colour);
@@ -198,16 +262,39 @@ const inspectFrame = (options) => `((options) => {
       const rect = at.getBoundingClientRect();
       const left = rect.left + at.clientLeft;
       const top = rect.top + at.clientTop;
+      const marginX = clipMarginOf(style, 'overflowX');
+      const marginY = clipMarginOf(style, 'overflowY');
       const box = {
-        left: style.overflowX === 'visible' ? -Infinity : left,
-        right: style.overflowX === 'visible' ? Infinity : left + at.clientWidth,
-        top: style.overflowY === 'visible' ? -Infinity : top,
-        bottom: style.overflowY === 'visible' ? Infinity : top + at.clientHeight,
+        left: style.overflowX === 'visible' ? -Infinity : left - marginX,
+        right: style.overflowX === 'visible' ? Infinity : left + at.clientWidth + marginX,
+        top: style.overflowY === 'visible' ? -Infinity : top - marginY,
+        bottom: style.overflowY === 'visible' ? Infinity : top + at.clientHeight + marginY,
       };
-      return { name: pathOf(at), box };
+      return { name: pathOf(at), box, style, element: at };
     }
     return frameBox();
   };
+  const movedBetween = (from, clipper) => {
+    for (let at = from; at && at !== clipper; at = at.parentElement) {
+      const style = getComputedStyle(at);
+      if (isMoved(style)) return true;
+    }
+    return false;
+  };
+  const ringClipOf = (element) => {
+    const clip = clipOf(element.parentElement);
+    if (!clip.element) return clip;
+    const moved = movedBetween(element, clip.element);
+    const panX = moved || clip.element.scrollWidth > clip.element.clientWidth;
+    const panY = moved || clip.element.scrollHeight > clip.element.clientHeight;
+    const box = {
+      left: panX ? -Infinity : clip.box.left,
+      right: panX ? Infinity : clip.box.right,
+      top: panY ? -Infinity : clip.box.top,
+      bottom: panY ? Infinity : clip.box.bottom,
+    };
+    return { ...clip, box };
+  };
   const pastOf = (rect, reach, box) =>
     Math.max(
       rect.left >= box.left ? box.left - (rect.left - reach.left) : 0,
@@ -237,13 +324,44 @@ const inspectFrame = (options) => `((options) => {
     if (rect.width === 0 && rect.height === 0) continue;
     const outline = style.outlineStyle !== 'none' && !invisible(style.outlineColor) ? Math.max(0, px(style.outlineWidth) + px(style.outlineOffset)) : 0;
     const shadow = shadowReachOf(style.boxShadow);
-    const clip = clipOf(element.parentElement);
+    const clip = ringClipOf(element);
     const outlinePast = outline > 0 ? pastOf(rect, { left: outline, right: outline, top: outline, bottom: outline }, clip.box) : 0;
     const shadowPast = pastOf(rect, shadow, clip.box);
     if (outlinePast > 1) report('CLIPPED', element, 'outline ' + Math.round(outlinePast) + 'px past ' + clip.name);
     else if (shadowPast > 1) report('CLIPPED', element, 'box-shadow ' + Math.round(shadowPast) + 'px past ' + clip.name);
   }
 
+  const unseen = (element) => {
+    if (getComputedStyle(element).visibility === 'hidden' || element.closest('[inert], [aria-hidden="true"]')) return true;
+    for (let at = element; at && at !== root; at = at.parentElement) if (getComputedStyle(at).opacity === '0') return true;
+    return false;
+  };
+${reachable_controls_1.REACHABLE_CONTROLS_STATEMENTS}
+  const interactive = ${JSON.stringify(actions_1.INTERACTIVE_SELECTOR)};
+  for (const element of reachableControlsOf(root, interactive)) {
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) continue;
+    const clip = clipOf(element.parentElement);
+    if (!clip.style || unseen(element)) continue;
+    const shown = {
+      width: Math.min(rect.right, clip.box.right) - Math.max(rect.left, clip.box.left),
+      height: Math.min(rect.bottom, clip.box.bottom) - Math.max(rect.top, clip.box.top),
+    };
+    if (shown.width <= 0 || shown.height <= 0) continue;
+    const cuts = [];
+    if (clips(clip.style.overflowX) && rect.width - shown.width > 1) cuts.push(Math.round(rect.width - shown.width) + 'px of its width');
+    if (clips(clip.style.overflowY) && rect.height - shown.height > 1) cuts.push(Math.round(rect.height - shown.height) + 'px of its height');
+    if (cuts.length) report('CUT-CONTROL', element, cuts.join(' and ') + ' is cut by ' + clip.name + ', so the control is only partly reachable');
+  }
+  for (const element of root.querySelectorAll('[data-et-skip~="CLIPPED"]')) {
+    if (reachableControlsOf(element, interactive).length === 0) continue;
+    const path = pathOf(element);
+    if (seen.has('SKIP-SCOPE' + path)) continue;
+    seen.add('SKIP-SCOPE' + path);
+    found.push({ rule: 'SKIP-SCOPE', path, detail: 'data-et-skip=CLIPPED on ' + path + ' covers interactive controls - put the skip on the clipped element itself' });
+  }
+${reach_1.REACH_STATEMENTS}
+
   const metrics = document.createElement('canvas').getContext('2d');
   for (const element of root.querySelectorAll('*')) {
     const style = getComputedStyle(element);
@@ -287,6 +405,7 @@ const inspectFrame = (options) => `((options) => {
   for (const [block, nodes] of groups) {
     const style = getComputedStyle(block);
     if (!singleLine(block) && style.whiteSpace !== 'nowrap' && style.textWrapMode !== 'nowrap') continue;
+    if (style.webkitLineClamp !== 'none') continue;
     const lines = [];
     for (const node of nodes) {
       const range = document.createRange();
@@ -303,6 +422,8 @@ const inspectFrame = (options) => `((options) => {
     }
   }
 ${contrast_check_1.CONTRAST_STATEMENTS}
+${see_through_1.SEE_THROUGH_STATEMENTS}
+${surface_nesting_1.SURFACE_STATEMENTS}
   const ownedOf = (element) => {
     const slotted = (element.getAttribute('data-et-slot') ?? '').split(' ').filter(Boolean);
     for (let at = element; at && at !== root; at = at.parentElement)
@@ -313,17 +434,25 @@ ${contrast_check_1.CONTRAST_STATEMENTS}
       }
     return true;
   };
+  const textOf = (node) =>
+    [...node.childNodes]
+      .map((child) => (child.nodeType === Node.TEXT_NODE ? child.data : child.nodeType === Node.ELEMENT_NODE && !child.matches('style, script, template') ? textOf(child) : ''))
+      .join('');
   if (options.part !== null)
     for (const element of root.querySelectorAll(options.controlInputs)) {
       if (element.getClientRects().length === 0 || element.closest('[data-et-control]') || !ownedOf(element)) continue;
       if (element.matches('[role="option"], [role^="menuitem"]') && element.closest('[data-et-surface]')) continue;
       const sdk = element.parentElement?.closest(options.sdkControls);
       if (sdk && root.contains(sdk)) continue;
-      const text = (element.textContent.trim() || element.getAttribute('aria-label') || element.getAttribute('placeholder') || '').replace(/\\s+/g, ' ');
+      const text = (element.getAttribute('aria-label') || textOf(element).trim() || element.getAttribute('placeholder') || '').replace(/\\s+/g, ' ');
       const cls = [...element.classList].find((name) => !/^et-(surface|color)--/.test(name));
       const named = element.tagName.toLowerCase() + (cls ? '.' + cls : '') + (text ? ' "' + (text.length > 32 ? text.slice(0, 31) + '…' : text) + '"' : '');
       report('CONTROL-PART-INPUT', element, named + ' is a control without data-et-control, so no control check sees it - mark it with control(markup, name) from @ethlete/components/design/control and declare the name in controls');
     }
+${action_undeclared_1.ACTION_UNDECLARED_STATEMENTS}
+${arrow_anchor_1.ARROW_ANCHOR_STATEMENTS}
+${off_centre_1.OFF_CENTRE_STATEMENTS}
+${disabled_interaction_1.DISABLED_INTERACTION_STATEMENTS}
   return found;
 })(${JSON.stringify(Object.assign(Object.assign({}, options), { escapable: ESCAPABLE, controlInputs: complete_1.PLAIN_CONTROL_SELECTOR, sdkControls: complete_1.SDK_CONTROLS.join(', ') }))})`;
 const stringsOf = (value) => Array.isArray(value) ? value.filter((entry) => typeof entry === 'string') : [];
@@ -346,30 +475,164 @@ const firstOfEach = (issues) => {
         return true;
     });
 };
+const uniqueIssuesOf = (issues) => {
+    const seen = new Set();
+    return issues.filter((issue) => {
+        const perState = issue.rule !== 'SKIP-SCOPE';
+        const key = JSON.stringify([
+            issue.product,
+            issue.part,
+            issue.sketch,
+            perState ? issue.state : null,
+            perState ? issue.size : null,
+            issue.rule,
+            issue.path,
+            issue.detail,
+        ]);
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+};
+exports.uniqueIssuesOf = uniqueIssuesOf;
 const widthsOf = (value) => Array.isArray(value)
     ? value.filter((width) => typeof width === 'number' && Number.isInteger(width) && width > 0)
     : [];
+const PART_TIMEOUT_MS = 120000;
+/** @internal How many frames of one part `inspect` draws at once, each on a page of its own. */
+exports.INSPECTS_AT_ONCE = 4;
+/** The cache folder of the render issues of each part, kept with the responses its drawing loaded. */
+exports.RENDER_ISSUES = 'render-issues';
+const RENDER_ISSUES_LIMIT = 64 * 1024 * 1024;
+const embedControlsOf = (controls) => typeof controls === 'object' && controls !== null
+    ? Object.entries(controls)
+        .filter(([, declared]) => typeof (declared === null || declared === void 0 ? void 0 : declared.part) === 'string')
+        .map(([name]) => name)
+    : [];
+/** The render rule of a part whose drawing did not finish in time, apart from a part that failed to draw. */
+exports.RENDER_TIMEOUT = 'RENDER-TIMEOUT';
+const timedOutKeyOf = (address) => JSON.stringify([address.product, address.part, address.sketch]);
+/** @internal Inspects `frames`, then the parts that timed out once more alone, and keeps that second answer. */
+const inspectRetryingTimeouts = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const inspectOf = (_a = options.inspectOf) !== null && _a !== void 0 ? _a : inspect;
+    const first = yield inspectOf(options);
+    const timedOut = new Set(first.filter((issue) => issue.rule === exports.RENDER_TIMEOUT).map(timedOutKeyOf));
+    if (timedOut.size === 0)
+        return first;
+    const again = yield inspectOf(Object.assign(Object.assign({}, options), { frames: options.frames.filter((frame) => timedOut.has(timedOutKeyOf(frame.address))), onPart: undefined }));
+    return [...first.filter((issue) => !timedOut.has(timedOutKeyOf(issue))), ...again];
+});
+exports.inspectRetryingTimeouts = inspectRetryingTimeouts;
+const inspectedFrameOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { page, base, frame } = options;
+    yield page.emulateMedia({ colorScheme: frame.contrast.scheme });
+    yield page.setViewportSize(frame.viewport);
+    yield (0, thumb_1.openFrame)(page, `${base}/frame.html?${frame.search}`);
+    yield (0, thumb_1.awaitSettled)(page);
+    const inspected = {
+        fixed: frame.fixed,
+        fit: frame.fit,
+        skips: frame.skips,
+        namespaces: frame.namespaces,
+        contrast: frame.contrast,
+        part: frame.controlInputs ? frame.address.part : null,
+        embedControls: frame.embedControls,
+    };
+    const inFrame = (yield page.evaluate(inspectFrame(inspected)));
+    yield page.evaluate((0, shot_1.emptySlotsScriptOf)(frame.address.part));
+    const unstyled = (yield page.evaluate(inspectFrame(Object.assign(Object.assign({}, inspected), { sdkStylesOnly: true }))));
+    const { product, part, state, sketch } = frame.address;
+    return [...inFrame, ...unstyled].map((issue) => (Object.assign(Object.assign({}, issue), { product, part, state, sketch, size: frame.size })));
+});
 const inspect = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    const { browser, base, frames } = options;
+    var _a, _b, _c, _d, _e;
+    const { browser, base, frames, cache } = options;
+    const timeoutMs = (_a = options.timeoutMs) !== null && _a !== void 0 ? _a : PART_TIMEOUT_MS;
     const context = yield browser.newContext();
+    let requested = [];
+    yield context.addInitScript(action_undeclared_1.CLICK_LISTENER_INIT_SCRIPT);
+    if (cache)
+        (0, served_cache_1.recordRequests)(context, () => requested);
     const issues = [];
+    const groups = new Map();
+    for (const frame of frames) {
+        const { product, part, sketch } = frame.address;
+        const key = JSON.stringify([product, part, sketch]);
+        groups.set(key, [...((_b = groups.get(key)) !== null && _b !== void 0 ? _b : []), frame]);
+    }
     try {
-        const page = yield context.newPage();
-        for (const frame of frames) {
-            yield page.emulateMedia({ colorScheme: frame.contrast.scheme });
-            yield page.setViewportSize(frame.viewport);
-            yield (0, thumb_1.openFrame)(page, `${base}/frame.html?${frame.search}`);
-            yield page.evaluate(thumb_1.settled);
-            const found = (yield page.evaluate(inspectFrame({
-                fixed: frame.fixed,
-                fit: frame.fit,
-                skips: frame.skips,
-                namespaces: frame.namespaces,
-                contrast: frame.contrast,
-                part: frame.controlInputs ? frame.address.part : null,
+        let lanes = [];
+        let done = 0;
+        for (const group of groups.values()) {
+            yield (0, run_yield_1.yieldRun)();
+            const started = Date.now();
+            const first = (_c = group[0]) === null || _c === void 0 ? void 0 : _c.address;
+            const key = cache ? (0, compare_cache_1.cacheKeyOf)([cache.salt, group]) : null;
+            const hit = cache && key ? yield (0, served_cache_1.servedHitOf)(cache, key) : null;
+            if (hit) {
+                issues.push(...hit);
+                done++;
+                if (first)
+                    (_d = options.onPart) === null || _d === void 0 ? void 0 : _d.call(options, { done, total: groups.size, part: first.part, ms: Date.now() - started });
+                continue;
+            }
+            const width = Math.min(exports.INSPECTS_AT_ONCE, group.length);
+            while (lanes.length < width) {
+                const page = yield context.newPage();
+                if (cache)
+                    yield (yield context.newCDPSession(page)).send('Network.setCacheDisabled', { cacheDisabled: true });
+                lanes.push({ page, sdkErrors: (0, sdk_errors_1.watchSdkErrorLines)(page) });
+            }
+            requested = [];
+            const found = group.map(() => []);
+            let next = 0;
+            const drawn = Promise.all(lanes.slice(0, width).map((_a) => __awaiter(void 0, [_a], void 0, function* ({ page }) {
+                for (let at = next++; at < group.length; at = next++) {
+                    const frame = group[at];
+                    if (frame)
+                        found[at] = yield inspectedFrameOf({ page, base, frame });
+                }
             })));
-            const { product, part, state, sketch } = frame.address;
-            issues.push(...found.map((issue) => (Object.assign(Object.assign({}, issue), { product, part, state, sketch, size: frame.size }))));
+            drawn.catch(() => undefined);
+            const result = yield (0, rxjs_1.firstValueFrom)((0, rxjs_1.race)((0, rxjs_1.from)(drawn).pipe((0, rxjs_1.map)(() => 'drawn')), (0, rxjs_1.timer)(timeoutMs).pipe((0, rxjs_1.map)(() => 'timeout'))));
+            if (result === 'timeout') {
+                yield Promise.all(lanes.map(({ page }) => page.close().catch(() => undefined)));
+                lanes = [];
+                if (first)
+                    issues.push({
+                        rule: exports.RENDER_TIMEOUT,
+                        product: first.product,
+                        part: first.part,
+                        state: '-',
+                        size: '-',
+                        path: '-',
+                        detail: `drawing the part did not finish within ${Math.round(timeoutMs / 1000)}s`,
+                        sketch: first.sketch,
+                    });
+            }
+            else {
+                const groupIssues = found.flat();
+                if (first)
+                    for (const line of new Set(lanes.flatMap(({ sdkErrors }) => sdkErrors.drain())))
+                        groupIssues.push({
+                            rule: 'RENDER',
+                            product: first.product,
+                            part: first.part,
+                            state: '-',
+                            size: '-',
+                            path: '-',
+                            detail: `logged SDK error ${line.split('\n')[0]}`,
+                            sketch: first.sketch,
+                        });
+                issues.push(...groupIssues);
+                if (cache && key)
+                    yield (0, served_cache_1.writeServed)(cache, { key, requested, value: groupIssues });
+            }
+            done++;
+            if (first)
+                (_e = options.onPart) === null || _e === void 0 ? void 0 : _e.call(options, { done, total: groups.size, part: first.part, ms: Date.now() - started });
         }
     }
     finally {
@@ -383,35 +646,48 @@ const inspect = (options) => __awaiter(void 0, void 0, void 0, function* () {
  * its content. Answers the rule breaks it finds, or why it could not draw.
  */
 const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { target, config, jobs } = options;
     const resolveChromium = (_a = options.chromiumOf) !== null && _a !== void 0 ? _a : browser_1.chromiumOf;
+    const timeoutMs = (_b = options.partTimeoutMs) !== null && _b !== void 0 ? _b : (0, no_verdict_1.loadScaledMs)(PART_TIMEOUT_MS);
     if (jobs.length === 0)
         return { issues: [], warnings: [], grids: [], drawn: [] };
-    if (!(yield resolveChromium(target)))
-        return { unavailable: 'neither the checkout nor this package resolves playwright or playwright-core' };
-    const queue = (0, thumb_1.createDrawQueue)({ target, chromiumOf: resolveChromium });
-    const server = yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
-    let shots;
+    const chromium = yield resolveChromium(target);
+    if (!chromium)
+        return {
+            unavailable: `neither ${target} nor this package (${__dirname}) resolves playwright or playwright-core, so there is no Chromium to launch`,
+        };
+    const { warm } = options;
+    const queue = warm ? warm.queue() : (0, thumb_1.createDrawQueue)({ target, chromiumOf: resolveChromium });
+    const server = warm ? yield warm.server(config) : yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
     try {
-        yield server.listen();
-        const { port } = (_b = server.httpServer) === null || _b === void 0 ? void 0 : _b.address();
-        const base = `http://localhost:${port}`;
+        if (!warm)
+            yield server.listen();
+        const address = (_c = server.httpServer) === null || _c === void 0 ? void 0 : _c.address();
+        const base = `http://localhost:${address.port}`;
+        const cache = options.cached
+            ? {
+                store: (0, served_cache_1.createServedCache)((0, vite_cache_1.viteCacheOf)(target, exports.RENDER_ISSUES), RENDER_ISSUES_LIMIT),
+                served: (0, served_cache_1.createServedHashes)(base, (0, served_cache_1.fetchServedOf)((0, served_cache_1.reachableBaseOf)(address))),
+                salt: `${(0, code_hash_1.renderInspectCodeOf)()} ${(0, compare_cache_1.browserVersionOf)(chromium.from)}`,
+            }
+            : undefined;
         const system = (0, system_modules_1.createSystemModules)({ target, config });
-        shots = (0, shot_1.createPartShooter)({ target, base, system, queue });
         const frames = [];
         const issues = [];
         const grids = [];
         const gridWarnings = [];
         const baselines = new Map();
-        for (const { product, sketch, parts } of jobs) {
+        const mergedSkips = new Map();
+        const framed = new Map();
+        for (const { product, sketch, parts, unchanged } of jobs) {
             const skips = {};
             const drawn = system.drawnOf(product, sketch);
             if (!drawn)
                 continue;
             const optionValuesOf = (0, option_values_1.optionValuesChecker)({ target, config, parts: drawn.parts });
             const merged = sketch ? system.productOf(product) : null;
-            const mergedOptionValuesOf = (0, option_values_1.optionValuesChecker)({ target, config, parts: (_c = merged === null || merged === void 0 ? void 0 : merged.parts) !== null && _c !== void 0 ? _c : [] });
+            const mergedOptionValuesOf = (0, option_values_1.optionValuesChecker)({ target, config, parts: (_d = merged === null || merged === void 0 ? void 0 : merged.parts) !== null && _d !== void 0 ? _d : [] });
             const namespaces = namespacesOf(drawn.parts.map((part) => part.cssSource));
             const schemes = (0, contrast_check_1.schemesOf)(drawn.parts.map((part) => part.cssSource));
             for (const part of drawn.parts) {
@@ -429,17 +705,17 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                             state: '-',
                             size: '-',
                             path: '-',
-                            detail: (_d = loaded.error.split('\n')[0]) !== null && _d !== void 0 ? _d : '',
+                            detail: (_e = loaded.error.split('\n')[0]) !== null && _e !== void 0 ? _e : '',
                             sketch,
                         });
                     continue;
                 }
                 const definition = loaded.module.default;
-                skips[key] = stringsOf((_e = definition === null || definition === void 0 ? void 0 : definition.checks) === null || _e === void 0 ? void 0 : _e.skip);
+                skips[key] = stringsOf((_f = definition === null || definition === void 0 ? void 0 : definition.checks) === null || _f === void 0 ? void 0 : _f.skip);
                 if (parts && !parts.includes(key))
                     continue;
                 const states = (definition === null || definition === void 0 ? void 0 : definition.states) && typeof definition.states === 'object' ? Object.keys(definition.states) : [];
-                const grid = (0, list_system_1.gridReportOf)(definition === null || definition === void 0 ? void 0 : definition.grid, states);
+                const grid = (0, grid_report_1.gridReportOf)(definition === null || definition === void 0 ? void 0 : definition.grid, states);
                 const mergedPart = merged === null || merged === void 0 ? void 0 : merged.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === key);
                 const mergedDefinition = mergedPart
                     ? (yield server.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file: mergedPart.file, product })))['default']
@@ -460,27 +736,16 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                         sketch,
                     });
                 }
-                const compare = sketch && states.some(complete_1.isInteractionState) && !(0, complete_1.isControlPart)({ part: key, controls: definition === null || definition === void 0 ? void 0 : definition.controls });
-                const baseline = compare ? system.productOf(product) : null;
-                const foundSketch = compare
-                    ? system.sketchesOf(product).find((candidate) => candidate.target === sketch.target)
-                    : null;
-                const unchanged = baseline && foundSketch && sketch
-                    ? yield (0, unchanged_states_1.unchangedStatesOf)({
-                        product: baseline,
-                        sketch: foundSketch,
-                        variant: sketch.variant,
-                        part: key,
-                        compareFrames: false,
-                        states: states.filter(complete_1.isInteractionState),
-                        pictureOf: shots.pictureOf,
-                        load: ({ file, product: name, sketch: variant }) => server.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product: name, sketch: variant })),
-                    })
+                const mergedStates = (mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.states) && typeof mergedDefinition.states === 'object'
+                    ? Object.keys(mergedDefinition.states)
                     : [];
-                for (const gap of (0, complete_1.controlStateGapsOf)({
+                const base = mergedPart ? { controls: mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.controls, states: mergedStates } : null;
+                for (const gap of (0, complete_1.introducedControlStateGapsOf)({
                     part: key,
                     controls: definition === null || definition === void 0 ? void 0 : definition.controls,
-                    states: sketch ? states.filter((state) => !unchanged.includes(state)) : [],
+                    states,
+                    sketch: !!sketch,
+                    base,
                 }))
                     issues.push({
                         rule: gap.code,
@@ -506,8 +771,8 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                         sketch,
                     }));
                 }
-                const exceptions = (0, contrast_check_1.contrastExceptionsOf)((_f = definition === null || definition === void 0 ? void 0 : definition.contrast) === null || _f === void 0 ? void 0 : _f.exceptions);
-                const pairs = (0, contrast_check_1.contrastPairsOf)((_g = definition === null || definition === void 0 ? void 0 : definition.contrast) === null || _g === void 0 ? void 0 : _g.pairs);
+                const exceptions = (0, contrast_check_1.contrastExceptionsOf)((_g = definition === null || definition === void 0 ? void 0 : definition.contrast) === null || _g === void 0 ? void 0 : _g.exceptions);
+                const pairs = (0, contrast_check_1.contrastPairsOf)((_h = definition === null || definition === void 0 ? void 0 : definition.contrast) === null || _h === void 0 ? void 0 : _h.pairs);
                 exceptions.problems.forEach((detail) => issues.push({ rule: 'CONTRAST', product, part: key, state: '-', size: '-', path: '-', detail, sketch }));
                 const sizesOf = (widths, presets) => part.layer === 'pages'
                     ? Object.keys(presets).map((preset) => ({ preset, width: null }))
@@ -516,35 +781,44 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                         : [{ preset: null, width: null }];
                 const sizes = sizesOf(widthsOf(definition === null || definition === void 0 ? void 0 : definition.widths), drawn.presets);
                 const controlInputs = part.layer !== 'foundations';
+                const embedControls = embedControlsOf(definition === null || definition === void 0 ? void 0 : definition.controls);
                 const baselineKey = JSON.stringify([product, key]);
-                if (merged && mergedPart && controlInputs && !baselines.has(baselineKey)) {
-                    const mergedStates = (mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.states) && typeof mergedDefinition.states === 'object'
-                        ? Object.keys(mergedDefinition.states)
-                        : [];
-                    baselines.set(baselineKey, mergedStates.flatMap((state) => sizesOf(widthsOf(mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.widths), merged.presets).flatMap(({ preset, width }) => {
-                        var _a, _b;
+                framed.set(JSON.stringify([product, key, sketch]), typeof (definition === null || definition === void 0 ? void 0 : definition.frame) === 'function');
+                if (merged && mergedPart && !baselines.has(baselineKey)) {
+                    const mergedContrast = {
+                        exceptions: (0, contrast_check_1.contrastExceptionsOf)((_j = mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.contrast) === null || _j === void 0 ? void 0 : _j.exceptions).selectors,
+                        pairs: (0, contrast_check_1.contrastPairsOf)((_k = mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.contrast) === null || _k === void 0 ? void 0 : _k.pairs),
+                    };
+                    const measured = new Set();
+                    mergedSkips.set(baselineKey, stringsOf((_l = mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.checks) === null || _l === void 0 ? void 0 : _l.skip));
+                    framed.set(JSON.stringify([product, key, null]), typeof (mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.frame) === 'function');
+                    baselines.set(baselineKey, mergedStates.flatMap((state) => sizesOf(widthsOf(mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.widths), merged.presets).flatMap(({ preset, width }) => schemes.flatMap((scheme) => {
+                        var _a;
                         const address = { product, part: key, state, preset, width, sketch: null, interaction: null };
                         const frame = (0, shot_1.partFrameOf)(Object.assign({ system }, address));
-                        return frame instanceof Error
-                            ? []
-                            : [
-                                {
-                                    address,
-                                    size: preset !== null && preset !== void 0 ? preset : (width ? `${width}px` : 'fitted'),
-                                    search: frame.search.toString(),
-                                    viewport: (0, shot_1.viewportOf)(frame.size),
-                                    fixed: ((_a = frame.size) === null || _a === void 0 ? void 0 : _a.height) !== undefined,
-                                    fit: frame.size === null,
-                                    skips: {},
-                                    namespaces,
-                                    contrast: { exceptions: [], pairs: [], scheme: (_b = schemes[0]) !== null && _b !== void 0 ? _b : null },
-                                    controlInputs,
-                                },
-                            ];
-                    })));
+                        if (frame instanceof Error)
+                            return [];
+                        const pairs = measured.has(scheme) ? [] : mergedContrast.pairs;
+                        measured.add(scheme);
+                        return [
+                            {
+                                address,
+                                size: preset !== null && preset !== void 0 ? preset : (width ? `${width}px` : 'fitted'),
+                                search: frame.search.toString(),
+                                viewport: (0, shot_1.viewportOf)(frame.size),
+                                fixed: ((_a = frame.size) === null || _a === void 0 ? void 0 : _a.height) !== undefined,
+                                fit: frame.size === null,
+                                skips,
+                                namespaces,
+                                contrast: { exceptions: mergedContrast.exceptions, pairs, scheme },
+                                controlInputs,
+                                embedControls,
+                            },
+                        ];
+                    }))));
                 }
                 const measuresPairs = new Set();
-                for (const state of states) {
+                for (const state of states.filter((name) => { var _a; return !((_a = unchanged === null || unchanged === void 0 ? void 0 : unchanged[key]) === null || _a === void 0 ? void 0 : _a.includes(name)); })) {
                     for (const { preset, width } of sizes) {
                         for (const scheme of schemes) {
                             const address = { product, part: key, state, preset, width, sketch, interaction: null };
@@ -556,11 +830,12 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                                 size: preset !== null && preset !== void 0 ? preset : (width ? `${width}px` : 'fitted'),
                                 search: frame.search.toString(),
                                 viewport: (0, shot_1.viewportOf)(frame.size),
-                                fixed: ((_h = frame.size) === null || _h === void 0 ? void 0 : _h.height) !== undefined,
+                                fixed: ((_m = frame.size) === null || _m === void 0 ? void 0 : _m.height) !== undefined,
                                 fit: frame.size === null,
                                 skips,
                                 namespaces,
                                 controlInputs,
+                                embedControls,
                                 contrast: {
                                     exceptions: exceptions.selectors,
                                     pairs: measuresPairs.has(scheme) ? [] : pairs,
@@ -573,26 +848,64 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                 }
             }
         }
-        const inspected = yield queue.run((browser) => inspect({ browser, base, frames }));
-        const isInput = (issue) => issue.rule === 'CONTROL-PART-INPUT';
-        const sketchedInputs = inspected.filter((issue) => isInput(issue) && issue.sketch);
-        const compared = [...new Set(sketchedInputs.map((issue) => JSON.stringify([issue.product, issue.part])))];
-        const baseline = compared.flatMap((key) => { var _a; return (_a = baselines.get(key)) !== null && _a !== void 0 ? _a : []; });
+        const asked = new Set(((_o = options.before) !== null && _o !== void 0 ? _o : []).map(({ product, part }) => JSON.stringify([product, part])));
+        const inspectBaselineOf = (keys) => {
+            const baseline = keys.flatMap((key) => {
+                var _a;
+                return ((_a = baselines.get(key)) !== null && _a !== void 0 ? _a : []).map((frame) => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, frame), { skips: Object.assign(Object.assign({}, frame.skips), { [frame.address.part]: (_a = mergedSkips.get(key)) !== null && _a !== void 0 ? _a : [] }) }));
+                });
+            });
+            return baseline.length > 0
+                ? queue.run((browser) => inspect({ browser, base, frames: baseline, cache, timeoutMs }))
+                : [];
+        };
+        const askedInProduct = Promise.resolve(inspectBaselineOf([...asked]));
+        askedInProduct.catch(() => undefined);
+        const all = yield queue.run((browser) => (0, exports.inspectRetryingTimeouts)({
+            browser,
+            base,
+            frames,
+            cache,
+            timeoutMs,
+            onPart: ({ done, total, part, ms }) => { var _a; return (_a = options.onProgress) === null || _a === void 0 ? void 0 : _a.call(options, `[${done}/${total}] ${part} ${Math.round(ms / 1000)}s`); },
+        }));
+        const inspected = (0, exports.uniqueIssuesOf)(all.filter((issue) => issue.rule !== BUSY_MARK));
+        const isInput = render_issue_key_1.isControlInput;
+        const sketched = inspected.filter((issue) => issue.sketch && !exports.WARNING_RULES.has(issue.rule));
+        const keyOf = (issue) => JSON.stringify([issue.product, issue.part]);
+        const compared = [...new Set([...sketched.map(keyOf), ...asked])];
+        const comparedAt = new Map(compared.map((key, index) => [key, index]));
+        const inProduct = [
+            ...(yield askedInProduct),
+            ...(yield inspectBaselineOf(compared.filter((key) => !asked.has(key)))),
+        ].sort((a, b) => { var _a, _b; return ((_a = comparedAt.get(keyOf(a))) !== null && _a !== void 0 ? _a : 0) - ((_b = comparedAt.get(keyOf(b))) !== null && _b !== void 0 ? _b : 0); });
         const elementOf = (issue) => JSON.stringify([issue.product, issue.part, issue.path]);
-        const existing = new Set((baseline.length > 0 ? yield queue.run((browser) => inspect({ browser, base, frames: baseline })) : [])
-            .filter(isInput)
-            .map(elementOf));
+        const sameIssueOf = render_issue_key_1.sameRenderIssueKeyOf;
+        const framedOf = (issue, sketch) => { var _a; return (_a = framed.get(JSON.stringify([issue.product, issue.part, sketch]))) !== null && _a !== void 0 ? _a : false; };
+        const existing = new Set(inProduct.flatMap((issue) => [sameIssueOf(issue, null), sameIssueOf(issue, framedOf(issue, null))]));
+        const isOld = (issue) => existing.has(sameIssueOf(issue, null)) ||
+            (framedOf(issue, issue.sketch) !== framedOf(issue, null) &&
+                existing.has(sameIssueOf(issue, framedOf(issue, issue.sketch))));
         const mergedInputs = inspected.filter((issue) => isInput(issue) && !issue.sketch);
-        issues.push(...inspected.filter((issue) => !WARNING_RULES.has(issue.rule) && !isInput(issue)), ...sketchedInputs.filter((issue) => !existing.has(elementOf(issue))));
-        return {
-            issues,
-            warnings: [
+        const undrawnBase = [
+            ...new Set(inProduct.filter((issue) => issue.rule === exports.RENDER_TIMEOUT).map((issue) => issue.part)),
+        ];
+        issues.push(...inspected.filter((issue) => !issue.sketch && !exports.WARNING_RULES.has(issue.rule) && !isInput(issue)), ...sketched.filter((issue) => !isOld(issue)));
+        return Object.assign(Object.assign({ issues, warnings: [
                 ...gridWarnings,
                 ...mergedInputs.filter((issue, index) => mergedInputs.findIndex((other) => elementOf(other) === elementOf(issue)) === index),
-                ...firstOfEach(inspected.filter((issue) => WARNING_RULES.has(issue.rule))),
-            ],
-            grids,
-            drawn: frames
+                ...firstOfEach(inspected.filter((issue) => exports.WARNING_RULES.has(issue.rule))),
+            ], grids, busy: (0, exports.busyStatesOf)(all) }, (undrawnBase.length > 0
+            ? {
+                noVerdict: (0, no_verdict_1.noVerdictOf)(`the base of ${undrawnBase.join(', ')} did not draw within ${Math.round(timeoutMs / 1000)}s, so its problems could not be told apart from the sketch's`),
+            }
+            : {})), { before: (0, exports.uniqueIssuesOf)(inProduct.filter((issue) => asked.has(JSON.stringify([issue.product, issue.part])) &&
+                issue.rule !== BUSY_MARK &&
+                issue.rule !== exports.RENDER_TIMEOUT &&
+                !exports.WARNING_RULES.has(issue.rule) &&
+                !isInput(issue))), drawn: frames
                 .filter(({ contrast }) => contrast.scheme !== 'dark')
                 .map(({ address }) => {
                 var _a;
@@ -603,8 +916,7 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                     size: (_a = address.preset) !== null && _a !== void 0 ? _a : (address.width ? `${address.width}px` : 'fitted'),
                     sketch: address.sketch,
                 });
-            }),
-        };
+            }) });
     }
     catch (error) {
         if (error instanceof thumb_1.ThumbUnavailableError)
@@ -612,7 +924,8 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
         throw error;
     }
     finally {
-        yield Promise.all([shots ? shots.close() : queue.close(), server.close()]);
+        if (!warm)
+            yield Promise.all([queue.close(), server.close()]);
     }
 });
 exports.renderIssuesOf = renderIssuesOf;