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

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

@@ -9,30 +9,98 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderIssuesOf = 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 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) => {
+    var _a, _b, _c;
+    const groups = new Map();
+    for (const issue of issues) {
+        const key = JSON.stringify([
+            (_b = (_a = issue.sketch) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : '',
+            issue.rule,
+            issue.product,
+            issue.part,
+            issue.path,
+            issue.detail.replace(SCHEME_IN_DETAIL, ''),
+        ]);
+        const group = (_c = groups.get(key)) !== null && _c !== void 0 ? _c : { first: issue, issues: [] };
+        group.issues.push(issue);
+        groups.set(key, group);
+    }
+    const listOf = (values) => [...new Set(values)].join(', ');
+    return [...groups.values()].map(({ first, issues: found }) => {
+        var _a, _b;
+        const schemes = [...new Set(found.flatMap((issue) => { var _a, _b; return (_b = (_a = SCHEME_IN_DETAIL.exec(issue.detail)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : []; }))];
+        const detail = first.detail.replace(SCHEME_IN_DETAIL, ` in the ${schemes.join(' and ')} scheme`);
+        const variants = listOf(found.map((issue) => { var _a, _b; return (_b = (_a = issue.sketch) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : ''; }));
+        const where = `${listOf(found.map((issue) => issue.state))} at ${listOf(found.map((issue) => issue.size))}`;
+        const times = found.length > 1 ? ` (${found.length} times)` : '';
+        return `${(_b = (_a = first.sketch) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : ''} ${variants}: ${first.rule} ${first.product} ${first.part} ${where}: ${first.path} - ${detail}${times}`;
+    });
+};
+exports.groupedIssueLinesOf = groupedIssueLinesOf;
 const SINGLE_LINE = 'button, [role="button"], [role="tab"], [role="switch"], [role="menuitem"], [data-wireframe="button"], ' +
     '[data-wireframe="badge"], [data-wireframe="tabs"], [data-wireframe="segmented"], [data-wireframe="select"]';
 /**
  * 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();
@@ -58,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) => {
@@ -71,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');
@@ -136,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);
@@ -164,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,
@@ -203,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);
@@ -253,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();
@@ -269,8 +416,37 @@ 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)
+      for (const key of (at.getAttribute('data-et-part') ?? '').split(' ').filter(Boolean)) {
+        const index = slotted.indexOf(key);
+        if (index >= 0) slotted.splice(index, 1);
+        else return key === options.part;
+      }
+    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.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 }))})`;
+})(${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') : [];
 const SDK_PREFIX = 'et-';
 const namespacesOf = (cssSources) => [
@@ -291,28 +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.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,
-            })));
-            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 {
@@ -326,13 +606,15 @@ 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;
+    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 });
     try {
@@ -344,12 +626,19 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
         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);
             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 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) {
                 const key = (0, resolve_product_1.partKeyOf)(part);
                 const loaded = yield server
@@ -365,17 +654,58 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                             state: '-',
                             size: '-',
                             path: '-',
-                            detail: (_c = loaded.error.split('\n')[0]) !== null && _c !== void 0 ? _c : '',
+                            detail: (_d = loaded.error.split('\n')[0]) !== null && _d !== void 0 ? _d : '',
                             sketch,
                         });
                     continue;
                 }
                 const definition = loaded.module.default;
-                skips[key] = stringsOf((_d = definition === null || definition === void 0 ? void 0 : definition.checks) === null || _d === void 0 ? void 0 : _d.skip);
+                skips[key] = stringsOf((_e = definition === null || definition === void 0 ? void 0 : definition.checks) === null || _e === void 0 ? void 0 : _e.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 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']
+                    : null;
+                const existing = new Set(mergedPart
+                    ? mergedOptionValuesOf(mergedPart, mergedDefinition !== null && mergedDefinition !== void 0 ? mergedDefinition : {}).flatMap((gap) => { var _a; return (_a = gap.missing) !== null && _a !== void 0 ? _a : []; })
+                    : []);
+                for (const problem of optionValuesOf(part, Object.assign(Object.assign({}, definition), { existing: sketch ? existing : undefined }))) {
+                    const destination = problem.code === 'OPTION-VALUE-MISSING' && !sketch ? gridWarnings : issues;
+                    destination.push({
+                        rule: problem.code,
+                        product,
+                        part: key,
+                        state: '-',
+                        size: '-',
+                        path: '-',
+                        detail: problem.detail,
+                        sketch,
+                    });
+                }
+                const mergedStates = (mergedDefinition === null || mergedDefinition === void 0 ? void 0 : mergedDefinition.states) && typeof mergedDefinition.states === 'object'
+                    ? Object.keys(mergedDefinition.states)
+                    : [];
+                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: !!sketch,
+                    base,
+                }))
+                    issues.push({
+                        rule: gap.code,
+                        product,
+                        part: key,
+                        state: '-',
+                        size: '-',
+                        path: '-',
+                        detail: gap.detail,
+                        sketch,
+                    });
                 if (grid) {
                     grids.push({ product, part: key, sketch, line: grid.line });
                     grid.problems.forEach((detail) => issues.push({ rule: 'GRID', product, part: key, state: '-', size: '-', path: '-', detail, sketch }));
@@ -390,45 +720,134 @@ const renderIssuesOf = (options) => __awaiter(void 0, void 0, void 0, function*
                         sketch,
                     }));
                 }
-                const exceptions = (0, contrast_check_1.contrastExceptionsOf)((_e = definition === null || definition === void 0 ? void 0 : definition.contrast) === null || _e === void 0 ? void 0 : _e.exceptions);
-                const pairs = (0, contrast_check_1.contrastPairsOf)((_f = definition === null || definition === void 0 ? void 0 : definition.contrast) === null || _f === void 0 ? void 0 : _f.pairs);
+                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);
                 exceptions.problems.forEach((detail) => issues.push({ rule: 'CONTRAST', product, part: key, state: '-', size: '-', path: '-', detail, sketch }));
-                const widths = widthsOf(definition === null || definition === void 0 ? void 0 : definition.widths);
-                const sizes = part.layer === 'pages'
-                    ? Object.keys(drawn.presets).map((preset) => ({ preset, width: null }))
+                const sizesOf = (widths, presets) => part.layer === 'pages'
+                    ? Object.keys(presets).map((preset) => ({ preset, width: null }))
                     : widths.length > 0
                         ? widths.map((width) => ({ preset: null, width }))
                         : [{ preset: null, width: null }];
-                let measuresPairs = true;
-                for (const state of states) {
-                    for (const { preset, width } of sizes) {
-                        const address = { product, part: key, state, preset, width, sketch, interaction: 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]);
+                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));
                         if (frame instanceof Error)
-                            continue;
-                        frames.push({
-                            address,
-                            size: preset !== null && preset !== void 0 ? preset : (width ? `${width}px` : 'fitted'),
-                            search: frame.search.toString(),
-                            viewport: (0, shot_1.viewportOf)(frame.size),
-                            fixed: ((_g = frame.size) === null || _g === void 0 ? void 0 : _g.height) !== undefined,
-                            fit: frame.size === null,
-                            skips,
-                            namespaces,
-                            contrast: { exceptions: exceptions.selectors, pairs: measuresPairs ? pairs : [] },
-                        });
-                        measuresPairs = false;
+                            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 { preset, width } of sizes) {
+                        for (const scheme of schemes) {
+                            const address = { product, part: key, state, preset, width, sketch, interaction: null };
+                            const frame = (0, shot_1.partFrameOf)(Object.assign({ system }, address));
+                            if (frame instanceof Error)
+                                continue;
+                            frames.push({
+                                address,
+                                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,
+                                fit: frame.size === null,
+                                skips,
+                                namespaces,
+                                controlInputs,
+                                embedControls,
+                                contrast: {
+                                    exceptions: exceptions.selectors,
+                                    pairs: measuresPairs.has(scheme) ? [] : pairs,
+                                    scheme,
+                                },
+                            });
+                            measuresPairs.add(scheme);
+                        }
                     }
                 }
             }
         }
-        const inspected = yield queue.run((browser) => inspect({ browser, base, frames }));
-        issues.push(...inspected.filter((issue) => !WARNING_RULES.has(issue.rule)));
+        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 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 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) => !issue.sketch && !WARNING_RULES.has(issue.rule) && !isInput(issue)), ...sketched.filter((issue) => !isOld(issue)));
         return {
             issues,
-            warnings: [...gridWarnings, ...firstOfEach(inspected.filter((issue) => WARNING_RULES.has(issue.rule)))],
+            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.map(({ address }) => {
+            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 }) => {
                 var _a;
                 return ({
                     product: address.product,