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

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

@@ -9,21 +9,46 @@ 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.uniqueIssuesOf = exports.groupedIssueLinesOf = exports.ownerPartOf = exports.renderIssueLineOf = exports.busyStatesOf = void 0;
+const rxjs_1 = require("rxjs");
 const browser_1 = require("../browser");
 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 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 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 actions_1 = require("./actions");
+const reach_1 = require("./reach");
+const reachable_controls_1 = require("./reachable-controls");
+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 +85,22 @@ 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 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 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');
   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 +126,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 < ${PATH_DEPTH}; at = at.parentElement) names.unshift(nameOf(at));
     return names.join(' > ');
   };
   const report = (rule, element, detail) => {
@@ -105,9 +139,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 +217,30 @@ 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 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);
     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 +256,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 +318,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 +399,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 +416,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 +428,23 @@ ${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}
+${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 +467,132 @@ 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;
+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 inspect = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d;
     const { browser, base, frames } = options;
+    const timeoutMs = (_a = options.timeoutMs) !== null && _a !== void 0 ? _a : PART_TIMEOUT_MS;
     const context = yield browser.newContext();
+    yield context.addInitScript(action_undeclared_1.CLICK_LISTENER_INIT_SCRIPT);
     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,
-            })));
-            const { product, part, state, sketch } = frame.address;
-            issues.push(...found.map((issue) => (Object.assign(Object.assign({}, issue), { product, part, state, sketch, size: frame.size }))));
+        let page = yield context.newPage();
+        let sdkErrors = (0, sdk_errors_1.watchSdkErrorLines)(page);
+        let done = 0;
+        for (const group of groups.values()) {
+            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 }))));
+                }
+            }))();
+            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);
+                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 {
+                issues.push(...found);
+                if (first)
+                    for (const line of sdkErrorsOf())
+                        issues.push({
+                            rule: 'RENDER',
+                            product: first.product,
+                            part: first.part,
+                            state: '-',
+                            size: '-',
+                            path: '-',
+                            detail: `logged SDK error ${line.split('\n')[0]}`,
+                            sketch: first.sketch,
+                        });
+            }
+            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 });
         }
     }
     finally {
@@ -383,27 +606,29 @@ 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;
     const { target, config, jobs } = options;
     const resolveChromium = (_a = options.chromiumOf) !== null && _a !== void 0 ? _a : browser_1.chromiumOf;
     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' };
+        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 });
-    let shots;
     try {
         yield server.listen();
         const { port } = (_b = server.httpServer) === null || _b === void 0 ? void 0 : _b.address();
         const base = `http://localhost:${port}`;
         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();
+        const mergedSkips = new Map();
+        const framed = new Map();
         for (const { product, sketch, parts } of jobs) {
             const skips = {};
             const drawn = system.drawnOf(product, sketch);
@@ -460,27 +685,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,
@@ -516,32 +730,41 @@ 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)((_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),
+                    };
+                    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));
+                    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) {
@@ -556,11 +779,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: ((_l = frame.size) === null || _l === void 0 ? void 0 : _l.height) !== undefined,
                                 fit: frame.size === null,
                                 skips,
                                 namespaces,
                                 controlInputs,
+                                embedControls,
                                 contrast: {
                                     exceptions: exceptions.selectors,
                                     pairs: measuresPairs.has(scheme) ? [] : pairs,
@@ -573,17 +797,41 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                 }
             }
         }
-        const inspected = yield queue.run((browser) => inspect({ browser, base, frames }));
+        const all = yield queue.run((browser) => (0, exports.inspectRetryingTimeouts)({
+            browser,
+            base,
+            frames,
+            timeoutMs: options.partTimeoutMs,
+            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 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 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 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 = (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 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) => !WARNING_RULES.has(issue.rule) && !isInput(issue)), ...sketchedInputs.filter((issue) => !existing.has(elementOf(issue))));
+        issues.push(...inspected.filter((issue) => !issue.sketch && !WARNING_RULES.has(issue.rule) && !isInput(issue)), ...sketched.filter((issue) => !isOld(issue)));
         return {
             issues,
             warnings: [
@@ -592,6 +840,11 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                 ...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])) &&
+                issue.rule !== BUSY_MARK &&
+                !WARNING_RULES.has(issue.rule) &&
+                !isInput(issue))),
             drawn: frames
                 .filter(({ contrast }) => contrast.scheme !== 'dark')
                 .map(({ address }) => {
@@ -612,7 +865,7 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
         throw error;
     }
     finally {
-        yield Promise.all([shots ? shots.close() : queue.close(), server.close()]);
+        yield Promise.all([queue.close(), server.close()]);
     }
 });
 exports.renderIssuesOf = renderIssuesOf;