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

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

@@ -9,18 +9,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderIssuesOf = exports.inspectRetryingTimeouts = exports.RENDER_TIMEOUT = exports.uniqueIssuesOf = exports.groupedIssueLinesOf = exports.ownerPartOf = exports.renderIssueLineOf = exports.busyStatesOf = 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");
@@ -28,9 +32,15 @@ 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) => {
@@ -85,17 +95,12 @@ 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', nested_scroll_1.NESTED_SCROLL_RULE, surface_nesting_1.NESTED_SURFACE_RULE, surface_nesting_1.LOST_SURFACE_RULE];
-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"]';
-const PATH_DEPTH = 4;
-const tagOf = (name) => { var _a, _b; return (_b = (_a = /^[a-z0-9-]+/u.exec(name)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : name; };
-const frameNeutralPathOf = ({ path, part, framed }) => {
-    const names = path.split(' > ');
-    const marked = names.findIndex((name) => name.endsWith(`[data-et-part=${part}]`));
-    const cut = marked < 0 ? (names.length === PATH_DEPTH ? [0] : []) : framed ? [marked - 1, marked] : [marked, marked + 1];
-    return names.map((name, index) => (cut.includes(index) ? tagOf(name) : name)).join(' > ');
-};
 // 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');
@@ -126,7 +131,7 @@ const inspectFrame = (options) => `((options) => {
   };
   const pathOf = (element) => {
     const names = [];
-    for (let at = element; at && at !== root && names.length < ${PATH_DEPTH}; 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) => {
@@ -231,13 +236,14 @@ const inspectFrame = (options) => `((options) => {
     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 + 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);
+    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}
@@ -444,6 +450,8 @@ ${surface_nesting_1.SURFACE_STATEMENTS}
       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(', ') }))})`;
@@ -492,6 +500,11 @@ 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')
@@ -512,12 +525,36 @@ const inspectRetryingTimeouts = (options) => __awaiter(void 0, void 0, void 0, f
     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* () {
-    var _a, _b, _c, _d;
-    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) {
@@ -526,43 +563,43 @@ const inspect = (options) => __awaiter(void 0, void 0, void 0, function* () {
         groups.set(key, [...((_b = groups.get(key)) !== null && _b !== void 0 ? _b : []), frame]);
     }
     try {
-        let page = yield context.newPage();
-        let sdkErrors = (0, sdk_errors_1.watchSdkErrorLines)(page);
+        let lanes = [];
         let done = 0;
         for (const group of groups.values()) {
+            yield (0, run_yield_1.yieldRun)();
             const started = Date.now();
-            const found = [];
-            const current = page;
-            const sdkErrorsOf = sdkErrors.drain;
-            const drawn = (() => __awaiter(void 0, void 0, void 0, function* () {
-                for (const frame of group) {
-                    yield current.emulateMedia({ colorScheme: frame.contrast.scheme });
-                    yield current.setViewportSize(frame.viewport);
-                    yield (0, thumb_1.openFrame)(current, `${base}/frame.html?${frame.search}`);
-                    yield (0, thumb_1.awaitSettled)(current);
-                    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 current.evaluate(inspectFrame(inspected)));
-                    yield current.evaluate((0, shot_1.emptySlotsScriptOf)(frame.address.part));
-                    const unstyled = (yield current.evaluate(inspectFrame(Object.assign(Object.assign({}, inspected), { sdkStylesOnly: true }))));
-                    const { product, part, state, sketch } = frame.address;
-                    found.push(...[...inFrame, ...unstyled].map((issue) => (Object.assign(Object.assign({}, issue), { product, part, state, sketch, size: frame.size }))));
+            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 });
                 }
-            }))();
+            })));
             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'))));
-            const first = (_c = group[0]) === null || _c === void 0 ? void 0 : _c.address;
             if (result === 'timeout') {
-                yield current.close().catch(() => undefined);
-                page = yield context.newPage();
-                sdkErrors = (0, sdk_errors_1.watchSdkErrorLines)(page);
+                yield Promise.all(lanes.map(({ page }) => page.close().catch(() => undefined)));
+                lanes = [];
                 if (first)
                     issues.push({
                         rule: exports.RENDER_TIMEOUT,
@@ -576,10 +613,10 @@ const inspect = (options) => __awaiter(void 0, void 0, void 0, function* () {
                     });
             }
             else {
-                issues.push(...found);
+                const groupIssues = found.flat();
                 if (first)
-                    for (const line of sdkErrorsOf())
-                        issues.push({
+                    for (const line of new Set(lanes.flatMap(({ sdkErrors }) => sdkErrors.drain())))
+                        groupIssues.push({
                             rule: 'RENDER',
                             product: first.product,
                             part: first.part,
@@ -589,10 +626,13 @@ const inspect = (options) => __awaiter(void 0, void 0, void 0, function* () {
                             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)
-                (_d = options.onPart) === null || _d === void 0 ? void 0 : _d.call(options, { done, total: groups.size, part: first.part, ms: Date.now() - started });
+                (_e = options.onPart) === null || _e === void 0 ? void 0 : _e.call(options, { done, total: groups.size, part: first.part, ms: Date.now() - started });
         }
     }
     finally {
@@ -606,21 +646,32 @@ 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, _j, _k, _l, _m;
+    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)))
+    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 queue = (0, thumb_1.createDrawQueue)({ target, chromiumOf: resolveChromium });
-    const server = yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
+    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 });
         const frames = [];
         const issues = [];
@@ -629,14 +680,14 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
         const baselines = new Map();
         const mergedSkips = new Map();
         const framed = new Map();
-        for (const { product, sketch, parts } of jobs) {
+        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) {
@@ -654,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']
@@ -720,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 }))
@@ -735,11 +786,11 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                 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)((_h = mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.contrast) === null || _h === void 0 ? void 0 : _h.exceptions).selectors,
-                        pairs: (0, contrast_check_1.contrastPairsOf)((_j = mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.contrast) === null || _j === void 0 ? void 0 : _j.pairs),
+                        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((_k = mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.checks) === null || _k === void 0 ? void 0 : _k.skip));
+                    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;
@@ -767,7 +818,7 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                     }))));
                 }
                 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 };
@@ -779,7 +830,7 @@ 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: ((_l = frame.size) === null || _l === void 0 ? void 0 : _l.height) !== undefined,
+                                fixed: ((_m = frame.size) === null || _m === void 0 ? void 0 : _m.height) !== undefined,
                                 fit: frame.size === null,
                                 skips,
                                 namespaces,
@@ -797,55 +848,64 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                 }
             }
         }
+        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,
-            timeoutMs: options.partTimeoutMs,
+            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 = (issue) => issue.rule === 'CONTROL-PART-INPUT';
-        const sketched = inspected.filter((issue) => issue.sketch && !WARNING_RULES.has(issue.rule));
-        const asked = new Set(((_m = options.before) !== null && _m !== void 0 ? _m : []).map(({ product, part }) => JSON.stringify([product, part])));
-        const compared = [...new Set([...sketched.map((issue) => JSON.stringify([issue.product, issue.part])), ...asked])];
-        const baseline = compared.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 : [] }) }));
-            });
-        });
+        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 sameIssueOf = (issue, inFrame) => JSON.stringify([
-            issue.product,
-            issue.part,
-            issue.rule,
-            isInput(issue) ? null : issue.detail,
-            inFrame === null ? issue.path : frameNeutralPathOf({ path: issue.path, part: issue.part, framed: inFrame }),
-        ]);
+        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 inProduct = baseline.length > 0 ? yield queue.run((browser) => inspect({ browser, base, frames: baseline })) : [];
         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) => !issue.sketch && !WARNING_RULES.has(issue.rule) && !isInput(issue)), ...sketched.filter((issue) => !isOld(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,
-            busy: (0, exports.busyStatesOf)(all),
-            before: (0, exports.uniqueIssuesOf)(inProduct.filter((issue) => asked.has(JSON.stringify([issue.product, issue.part])) &&
+                ...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 &&
-                !WARNING_RULES.has(issue.rule) &&
-                !isInput(issue))),
-            drawn: frames
+                issue.rule !== exports.RENDER_TIMEOUT &&
+                !exports.WARNING_RULES.has(issue.rule) &&
+                !isInput(issue))), drawn: frames
                 .filter(({ contrast }) => contrast.scheme !== 'dark')
                 .map(({ address }) => {
                 var _a;
@@ -856,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)
@@ -865,7 +924,8 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
         throw error;
     }
     finally {
-        yield Promise.all([queue.close(), server.close()]);
+        if (!warm)
+            yield Promise.all([queue.close(), server.close()]);
     }
 });
 exports.renderIssuesOf = renderIssuesOf;