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

package/src/lib/design/system/complete.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.completenessOf = exports.inventoryIdsOf = exports.seePart = exports.completenessGapLineOf = exports.completenessGapsOf = exports.findingKeyOf = exports.isFindingOf = exports.declaredControlsOf = void 0;
+exports.partsCompletenessOf = exports.completenessOf = exports.inventoryIdsOf = exports.seePart = exports.seeFrame = exports.PLAIN_CONTROL_SELECTOR = exports.SDK_CONTROLS = exports.isMissingStateGap = exports.completenessGapLineOf = exports.completenessGapsOf = exports.findingKeyOf = exports.isFindingOf = exports.smallChangeHintsOf = exports.introducedControlStateGapsOf = exports.controlStateGapsOf = exports.isControlPart = exports.isInteractionState = exports.declaredControlsOf = void 0;
 const fs_1 = require("fs");
 const path_1 = require("path");
 const browser_1 = require("../browser");
@@ -17,17 +17,21 @@ const force_interactions_1 = require("../force-interactions");
 const serve_1 = require("../serve");
 const shot_1 = require("../shot");
 const thumb_1 = require("../thumb");
+const actions_1 = require("./actions");
 const resolve_product_1 = require("./resolve-product");
+const contact_sheet_1 = require("../contact-sheet");
 const baseline_1 = require("./sketch/baseline");
 const merged_parts_1 = require("./sketch/merged-parts");
 const system_modules_1 = require("./system-modules");
 const exceptions_1 = require("./exceptions");
 const inventory_approval_1 = require("./inventory-approval");
+const option_values_1 = require("./rules/option-values");
+const demo_backdrop_1 = require("./demo-backdrop");
 const KINDS = {
     disclosure: { surface: 'body', closed: 'collapsed' },
     button: { adds: ['active'] },
-    select: { surface: 'open', options: true },
-    menu: { surface: 'open', options: true },
+    select: { surface: 'open', options: { interactions: ['hover', 'focus-visible'], selected: true } },
+    menu: { surface: 'open', options: { interactions: ['hover', 'focus-visible', 'active'], selected: false } },
     row: { selects: true, virtualFocus: true },
     field: { noActive: true },
     tooltip: { surface: 'tooltip' },
@@ -52,7 +56,7 @@ const requiredInteractionsOf = (control) => {
     ];
 };
 const gridGapOf = (options) => {
-    const { grid, states, interactions } = options;
+    const { grid, states, interactions, disabledStates = new Set() } = options;
     const fix = `draw its states with interactionRows, which gives the grid a column per interaction (${interactions.join(', ')})`;
     if (!isRecord(grid) || !Array.isArray(grid['columns']) || !isRecord(grid['rows']))
         return `the part has no grid - ${fix}`;
@@ -60,12 +64,14 @@ const gridGapOf = (options) => {
     const missing = interactions.filter((interaction) => !columns.includes(interaction));
     if (missing.length > 0)
         return `its grid has no column ${missing.join(', ')} - ${fix}`;
-    const holes = Object.entries(grid['rows']).flatMap(([row, cells]) => interactions
-        .filter((interaction) => {
-        const state = isRecord(cells) ? cells[interaction] : undefined;
-        return typeof state !== 'string' || !states.includes(state);
-    })
-        .map((interaction) => `${row} ${interaction}`));
+    const holes = Object.entries(grid['rows']).flatMap(([row, cells]) => isRecord(cells) && typeof cells['rest'] === 'string' && disabledStates.has(cells['rest'])
+        ? []
+        : interactions
+            .filter((interaction) => {
+            const state = isRecord(cells) ? cells[interaction] : undefined;
+            return typeof state !== 'string' || !states.includes(state);
+        })
+            .map((interaction) => `${row} ${interaction}`));
     return holes.length > 0 ? `its grid draws no state in ${holes.join(', ')} - ${fix}` : null;
 };
 const declaredControlsOf = (value) => isRecord(value)
@@ -88,6 +94,86 @@ const declaredControlsOf = (value) => isRecord(value)
     }))
     : null;
 exports.declaredControlsOf = declaredControlsOf;
+const INTERACTION_WORDS = new Set(['hover', 'hovered', 'focus', 'focused', 'pressed', 'active', 'selected']);
+const NAME_WORDS = new Set([...INTERACTION_WORDS, 'visible', 'within', 'invalid', 'disabled', 'checked', 'open']);
+const wordsOf = (state) => state
+    .replace(/([a-z0-9])([A-Z])/gu, '$1-$2')
+    .toLowerCase()
+    .split(/[^a-z0-9]+/u)
+    .filter((word) => word !== '');
+/**
+ * Whether a state name shows an interaction: its last word, split at `-`, `_`, spaces and camelCase, or the whole name
+ * is hover, hovered, focus, focused, pressed, active or selected. `row-hover`, `collapseFocus` and `focus-visible`
+ * are; `active-only` and `inactive` are not.
+ */
+const isInteractionState = (state) => {
+    var _a, _b;
+    const words = wordsOf(state);
+    while (words.length > 1 && ['visible', 'within'].includes((_a = words[words.length - 1]) !== null && _a !== void 0 ? _a : ''))
+        words.pop();
+    return INTERACTION_WORDS.has((_b = words[words.length - 1]) !== null && _b !== void 0 ? _b : '');
+};
+exports.isInteractionState = isInteractionState;
+/** Whether a part may draw interaction states: it is no page, and its `controls` declare a control of a checked kind. */
+const isControlPart = (options) => {
+    var _a;
+    return !options.part.startsWith('pages/') &&
+        Object.values((_a = (0, exports.declaredControlsOf)(options.controls)) !== null && _a !== void 0 ? _a : {}).some((control) => CHECKED_KINDS.includes(control.kind));
+};
+exports.isControlPart = isControlPart;
+/**
+ * One `CONTROL-STATE` gap per element whose interaction states a part draws that is no control part. The element is
+ * the state name without its interaction words (`row-hover` names the row), or `control` when nothing is left.
+ */
+const controlStateGapsOf = (options) => {
+    var _a, _b;
+    const { part, states } = options;
+    if ((0, exports.isControlPart)(options))
+        return [];
+    const elements = new Map();
+    for (const state of states.filter(exports.isInteractionState)) {
+        const element = wordsOf(state)
+            .filter((word) => !NAME_WORDS.has(word))
+            .join('-') || 'control';
+        elements.set(element, [...((_a = elements.get(element)) !== null && _a !== void 0 ? _a : []), state]);
+    }
+    const why = part.startsWith('pages/')
+        ? 'a page is no control part'
+        : `${part} declares no control of a kind ${CHECKED_KINDS.join(', ')}`;
+    const declaresNone = Object.keys((_b = (0, exports.declaredControlsOf)(options.controls)) !== null && _b !== void 0 ? _b : {}).length === 0;
+    const fixOf = (element) => part.startsWith('components/') && declaresNone
+        ? `declare its controls (Q164), or extract the ${element} as its own control part`
+        : `extract the ${element} as its own control part`;
+    return [...elements].map(([element, shown]) => ({
+        code: 'CONTROL-STATE',
+        target: part,
+        detail: `${shown.length === 1 ? 'state' : 'states'} ${statesShownOf(shown)} draw${shown.length === 1 ? 's' : ''} an interaction (hover, focus, pressed, active or selected), which only a control part draws, and ${why} - ${fixOf(element)} and draw ${shown.length === 1 ? 'this state' : 'these states'} there`,
+    }));
+};
+exports.controlStateGapsOf = controlStateGapsOf;
+/**
+ * The `CONTROL-STATE` gaps render check fails a part on. Only a sketch variant fails, and only on interaction states
+ * its base part, `base`, does not already draw as a gap: product check leaves those gaps to `design complete`.
+ */
+const introducedControlStateGapsOf = (options) => {
+    const { part, controls, states, sketch, base } = options;
+    if (!sketch)
+        return [];
+    const inherited = new Set(base && !(0, exports.isControlPart)({ part, controls: base.controls }) ? base.states.filter(exports.isInteractionState) : []);
+    return (0, exports.controlStateGapsOf)({ part, controls, states: states.filter((state) => !inherited.has(state)) });
+};
+exports.introducedControlStateGapsOf = introducedControlStateGapsOf;
+const SMALL_CHANGE = 0.1;
+/**
+ * One hint per state of an element or component that is no control part whose pixels differ from its first state in
+ * under a tenth of the frame. Pages compose parts, so they get none; interaction states are left to `CONTROL-STATE`.
+ */
+const smallChangeHintsOf = (options) => options.part.startsWith('pages/') || (0, exports.isControlPart)(options)
+    ? []
+    : options.changes
+        .filter(({ state, share }) => share > 0 && share < SMALL_CHANGE && !(0, exports.isInteractionState)(state))
+        .map(({ state, base, share }) => `HINT ${options.part} ${state} - changes ${(share * 100).toFixed(1)} % of the frame against ${base} - extract the changed element as its own part`);
+exports.smallChangeHintsOf = smallChangeHintsOf;
 /** Whether a discovered element is an undeclared or unclassified finding of the part, not owned or declared. */
 const isFindingOf = (declared) => (found) => {
     var _a;
@@ -96,8 +182,9 @@ const isFindingOf = (declared) => (found) => {
         !(found.kind === 'control' && found.marked !== null);
 };
 exports.isFindingOf = isFindingOf;
-const findingKeyOf = (found) => `${found.kind} ${found.what} ${found.path}`;
+const findingKeyOf = (found) => { var _a; return `${found.kind} ${found.what} ${found.path} ${(_a = found.label) !== null && _a !== void 0 ? _a : ''}`; };
 exports.findingKeyOf = findingKeyOf;
+const NATIVE_CONTROLS = ['button', 'a[href]', 'input:not([type="hidden"])', 'select', 'textarea', 'summary'];
 const discoveryGapsOf = (options) => {
     var _a, _b, _c, _d;
     const { part, declared, frames } = options;
@@ -125,7 +212,9 @@ const discoveryGapsOf = (options) => {
             ? {
                 code: 'CONTROL-UNDECLARED',
                 target: part,
-                detail: `${where} - mark it with data-et-control and declare it in controls`,
+                detail: `${where} - ${NATIVE_CONTROLS.includes(found.what)
+                    ? 'mark it with control(markup, name) from @ethlete/components/design/control and declare the name in controls'
+                    : 'mark it with data-et-control and declare it in controls'}`,
             }
             : {
                 code: 'CONTROL-UNCLASSIFIED',
@@ -134,6 +223,29 @@ const discoveryGapsOf = (options) => {
             };
     });
 };
+const actionGapsOf = (options) => {
+    var _a, _b, _c;
+    const { part, declared, frames } = options;
+    const groups = new Map();
+    for (const frame of frames.filter((seen) => seen.interaction === null))
+        for (const found of (_a = frame.found) !== null && _a !== void 0 ? _a : []) {
+            if (found.action !== null ||
+                ((_b = found.owner) !== null && _b !== void 0 ? _b : null) !== null ||
+                found.within.some((id) => { var _a, _b; return ((_b = (_a = declared[id]) === null || _a === void 0 ? void 0 : _a.part) !== null && _b !== void 0 ? _b : null) !== null; }))
+                continue;
+            const key = (0, exports.findingKeyOf)(found);
+            const group = (_c = groups.get(key)) !== null && _c !== void 0 ? _c : { found, states: [] };
+            if (!group.states.includes(frame.state))
+                group.states.push(frame.state);
+            groups.set(key, group);
+        }
+    return [...groups.values()].map(({ found, states }) => ({
+        code: 'ACTION-UNDECLARED',
+        target: part,
+        detail: `${found.what}${found.label ? ` "${found.label}"` : ''} at ${found.path} in ${statesShownOf(states)} - declare what it does: data-et-action="<state>" or "emit:<output>"`,
+    }));
+};
+const isUndeclaredControlGap = (gap) => gap.code === 'CONTROL-UNDECLARED';
 const statesShownOf = (states) => states.length > 4 ? `${states.slice(0, 3).join(', ')} and ${states.length - 3} more` : states.join(', ');
 const overrideGapsOf = (options) => {
     var _a, _b;
@@ -190,17 +302,26 @@ const ownersOf = (frames) => [
         .flatMap((seen) => { var _a; return ((_a = seen.found) !== null && _a !== void 0 ? _a : []).map((found) => { var _a; return (_a = found.owner) !== null && _a !== void 0 ? _a : null; }); })
         .filter((owner) => owner !== null)),
 ];
-const interactionGapOf = (options) => {
+const undefinedClassesGapOf = (options) => {
     var _a;
+    const { forced, what, interaction } = options;
+    const seen = forced.find((force) => { var _a; return (_a = force.undefinedClasses) === null || _a === void 0 ? void 0 : _a.length; });
+    if (!seen)
+        return null;
+    const classes = (_a = seen.undefinedClasses) !== null && _a !== void 0 ? _a : [];
+    return `state ${seen.state} forces ${interaction} on ${what}, but no stylesheet defines its ${classes.length === 1 ? 'class' : 'classes'} ${classes.join(', ')} - Tailwind generates no utility of that name; use a colour or value the product's theme defines`;
+};
+const interactionGapOf = (options) => {
+    var _a, _b;
     const { frames, id, interaction } = options;
     const forced = frames.flatMap((frame) => frame.controls
         .filter((control) => control.id === id)
         .flatMap((control) => control.forced.filter((force) => force.interaction === interaction))
-        .map((force) => ({ state: frame.state, differs: force.differs })));
+        .map((force) => ({ state: frame.state, differs: force.differs, undefinedClasses: force.undefinedClasses })));
     if (forced.some((force) => force.differs))
         return null;
     if (forced.length > 0)
-        return `state ${(_a = forced[0]) === null || _a === void 0 ? void 0 : _a.state} forces ${interaction} on it, but its box draws no different pixel than at rest - if a descendant draws ${interaction}, mark it with data-et-control-part`;
+        return ((_a = undefinedClassesGapOf({ forced, what: 'it', interaction })) !== null && _a !== void 0 ? _a : `state ${(_b = forced[0]) === null || _b === void 0 ? void 0 : _b.state} forces ${interaction} on it, but its box draws no different pixel than at rest - if a descendant draws ${interaction}, mark it with data-et-control-part`);
     return `no state draws it ${interaction} - draw a state that forces ${interaction} on the data-et-control element, e.g. with forceInteraction - a data-et-control-part in it takes the force too`;
 };
 const keyboardActiveRowGapOf = (options) => {
@@ -237,12 +358,12 @@ const lookGapOf = (options) => {
     return null;
 };
 const forcedGapOf = (options) => {
-    var _a;
+    var _a, _b;
     const { forced, what, interaction } = options;
     if (forced.some((force) => force.differs))
         return null;
     if (forced.length > 0)
-        return `state ${(_a = forced[0]) === null || _a === void 0 ? void 0 : _a.state} forces ${interaction} on ${what}, but its box draws no different pixel than at rest`;
+        return ((_a = undefinedClassesGapOf(options)) !== null && _a !== void 0 ? _a : `state ${(_b = forced[0]) === null || _b === void 0 ? void 0 : _b.state} forces ${interaction} on ${what}, but its box draws no different pixel than at rest`);
     return `no state draws ${what} ${interaction} - force ${interaction} on it, e.g. with forceInteraction`;
 };
 const surfaceGapsOf = (options) => {
@@ -285,19 +406,21 @@ const keyboardActiveGapOf = (options) => {
     return `state ${(_b = compared[0]) === null || _b === void 0 ? void 0 : _b.state} marks an option active by ${KEYBOARD_ACTIVE}, but it looks the same as a plain option - give the active option its own look`;
 };
 const optionGapsOf = (options) => {
-    const { frames, surfaceId } = options;
+    const { frames, surfaceId, interactions } = options;
     const shownIn = (frame) => frame.surfaces.filter((seen) => seen.id === surfaceId && seen.shown).flatMap((seen) => { var _a; return (_a = seen.options) !== null && _a !== void 0 ? _a : []; });
     const what = `an option in ${surfaceId}`;
     const gaps = [];
-    for (const interaction of ['hover', 'focus-visible']) {
+    for (const interaction of interactions) {
         const forced = frames.flatMap((frame) => shownIn(frame).flatMap((option) => option.forced
             .filter((force) => force.interaction === interaction)
-            .map((force) => ({ state: frame.state, differs: force.differs }))));
+            .map((force) => ({ state: frame.state, differs: force.differs, undefinedClasses: force.undefinedClasses }))));
         const gap = forcedGapOf({ forced, what, interaction });
         const missing = gap && interaction === 'focus-visible' ? keyboardActiveGapOf({ frames, shownIn, forcedGap: gap }) : gap;
         if (missing)
             gaps.push([`option-${interaction}`, missing]);
     }
+    if (!options.selected)
+        return gaps;
     const seen = frames
         .filter((frame) => frame.interaction === null)
         .flatMap((frame) => shownIn(frame)
@@ -334,7 +457,7 @@ const requirementGapsOf = (options) => {
         const forced = frames.flatMap((frame) => frame.controls
             .filter((seen) => seen.id === id && seen.selected)
             .flatMap((seen) => seen.forced.filter((force) => force.interaction === 'hover'))
-            .map((force) => ({ state: frame.state, differs: force.differs })));
+            .map((force) => ({ state: frame.state, differs: force.differs, undefinedClasses: force.undefinedClasses })));
         const hovered = forcedGapOf({ forced, what: 'it selected', interaction: 'hover' });
         if (selected)
             gaps.push(['selected', selected]);
@@ -354,7 +477,7 @@ const requirementGapsOf = (options) => {
     if (kind.surface)
         gaps.push(...surfaceGapsOf(Object.assign(Object.assign({}, options), { surface: kind.surface, closed: kind.closed })));
     if (own && kind.options && kind.surface)
-        gaps.push(...optionGapsOf({ frames, surfaceId: `${id}.${kind.surface}` }));
+        gaps.push(...optionGapsOf(Object.assign({ frames, surfaceId: `${id}.${kind.surface}` }, kind.options)));
     return gaps;
 };
 /**
@@ -414,7 +537,10 @@ const completenessGapsOf = (options) => {
                 detail: `${control.part} is not design complete: ${used.length} gap(s) - run design complete ${control.part}`,
             });
         const interactions = control.part === null && !part.startsWith('pages/') ? requiredInteractionsOf(control) : [];
-        const gridGap = interactions.length > 0 ? gridGapOf({ grid, states, interactions }) : null;
+        const disabledStates = new Set(frames
+            .filter((frame) => frame.interaction === null && frame.controls.some((seen) => seen.id === id && seen.disabled))
+            .map((frame) => frame.state));
+        const gridGap = interactions.length > 0 ? gridGapOf({ grid, states, interactions, disabledStates }) : null;
         if (gridGap)
             gaps.push({ code: 'CONTROL-GRID-MISSING', target: `${part}.${id}`, detail: gridGap });
         if (!seenIds.has(id)) {
@@ -431,7 +557,8 @@ const completenessGapsOf = (options) => {
     }
     return [
         ...gaps,
-        ...discoveryGapsOf({ part, declared, frames }),
+        ...discoveryGapsOf({ part, declared, frames }).filter((gap) => !isUndeclaredControlGap(gap)),
+        ...actionGapsOf({ part, declared, frames }),
         ...ownerGapsOf({ part, declared, frames, referenced }),
         ...overrideGapsOf({ part, frames }),
         ...inventoryGapsOf({ part, inventory }),
@@ -446,6 +573,10 @@ const inventoryGapsOf = ({ part, inventory }) => {
 };
 const completenessGapLineOf = (gap) => `${gap.code} ${gap.target} - ${gap.detail}`;
 exports.completenessGapLineOf = completenessGapLineOf;
+const MISSING_STATE_CODES = ['CONTROL-UNDRAWN', 'CONTROL-GRID-MISSING', 'REQUIREMENT-MISSING'];
+/** Whether a gap is a declared control that no state draws, or that lacks a drawn interaction, look or surface. */
+const isMissingStateGap = (gap) => MISSING_STATE_CODES.includes(gap.code);
+exports.isMissingStateGap = isMissingStateGap;
 const NO_MOTION = '*, *::before, *::after { transition: none !important; animation: none !important; }';
 const PAD = 8;
 const COLOUR_PROPERTIES = [
@@ -489,6 +620,28 @@ const coversOf = (property) => {
         return ['all', 'border', 'border-color', property.replace(/-color$/, ''), property];
     return ['all', property];
 };
+const undefinedVariantClasses = (at) => `((at) => {
+  const control = document.querySelector('[data-et-complete="' + at + '"]');
+  const selectors = [];
+  const collect = (rules) => {
+    for (const rule of rules) {
+      if (rule.selectorText) selectors.push(rule.selectorText);
+      if (rule.cssRules) collect(rule.cssRules);
+    }
+  };
+  for (const sheet of document.styleSheets) {
+    try {
+      collect(sheet.cssRules);
+    } catch {}
+  }
+  const tokens = new Set([control, ...control.querySelectorAll('*')].flatMap((element) => [...element.classList]));
+  return [...tokens].filter((token) => token.includes(':') && !selectors.some((selector) => selector.includes('.' + CSS.escape(token))));
+})(${JSON.stringify(at)})`;
+const VARIANT_WORDS = { hover: 'hover', active: 'active', 'focus-visible': 'focus' };
+const isVariantOf = (token, interaction) => token
+    .split(':')
+    .slice(0, -1)
+    .some((variant) => { var _a; return variant.includes((_a = VARIANT_WORDS[interaction]) !== null && _a !== void 0 ? _a : interaction); });
 const stillChangesOf = (rest, forced) => forced.names.flatMap((name, element) => {
     var _a;
     const { properties, durations } = (_a = forced.transitions[element]) !== null && _a !== void 0 ? _a : { properties: [], durations: [] };
@@ -526,7 +679,7 @@ const INTERACTIVE_ROLES = [
     'textbox',
     'treeitem',
 ];
-const SDK_CONTROLS = [
+exports.SDK_CONTROLS = [
     '[et-button]',
     '[et-icon-button]',
     '[et-text-button]',
@@ -566,26 +719,26 @@ const SDK_CONTROLS = [
     'et-time-input',
     'et-toggletip',
 ];
-const LIKELY_CONTROLS = [
-    ...SDK_CONTROLS,
-    'button',
-    'a[href]',
-    'input:not([type="hidden"])',
-    'select',
-    'textarea',
-    'summary',
-    '[tabindex]',
-    ...INTERACTIVE_ROLES.map((role) => `[role="${role}"]`),
-];
+const PLAIN_CONTROLS = [...NATIVE_CONTROLS, '[tabindex]', ...INTERACTIVE_ROLES.map((role) => `[role="${role}"]`)];
+const LIKELY_CONTROLS = [...exports.SDK_CONTROLS, ...PLAIN_CONTROLS];
 const LOOK_PROPERTIES = [...COLOUR_PROPERTIES, 'opacity', 'box-shadow', 'font-weight', 'text-decoration-line'];
 const OPTION_SELECTOR = '[role="option"], [role^="menuitem"], [data-et-option]';
+const COMPOSITE_ROLES = ['grid', 'listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'];
+const DIALOG_ROLES = ['dialog', 'alertdialog'];
+const FOCUS_CONTAINER = [
+    ...COMPOSITE_ROLES.flatMap((role) => [`[role="${role}"][tabindex="-1"]`, `[role="${role}"][aria-activedescendant]`]),
+    ...DIALOG_ROLES.map((role) => `[role="${role}"][tabindex="-1"]`),
+].join(', ');
+exports.PLAIN_CONTROL_SELECTOR = `:is(${PLAIN_CONTROLS.join(', ')}):not(${FOCUS_CONTAINER})`;
 const discoverControls = `((root) => {
   const LIKELY = ${JSON.stringify(LIKELY_CONTROLS)};
   const likely = LIKELY.join(', ');
-  const sdk = ${JSON.stringify(SDK_CONTROLS.join(', '))};
+  const container = ${JSON.stringify(FOCUS_CONTAINER)};
+  const isLikely = (element) => element.matches(likely) && !element.matches(container);
+  const sdk = ${JSON.stringify(exports.SDK_CONTROLS.join(', '))};
   const rendered = (element) => element.getClientRects().length > 0;
   const HOVER = /(?<!\\\\):hover(?![\\w-])/g;
-  const FORCED_HOVER = /:is\\(:hover,\\s*\\[data-et-force~="?hover"?\\]\\)/g;
+  const FORCED_HOVER = /:is\\(:hover,\\s*\\[data-et-force~="?hover"?\\](?:,\\s*\\[data-et-force~="?active"?\\])?\\)/g;
   const hoveredOf = (written) => {
     const selector = written.replace(FORCED_HOVER, ':hover');
     const match = new RegExp(HOVER.source).exec(selector);
@@ -640,28 +793,32 @@ const discoverControls = `((root) => {
   const markedOf = (element) => {
     if (element.hasAttribute('data-et-control')) return element.getAttribute('data-et-control');
     for (let at = element.parentElement; at && at !== root; at = at.parentElement) {
-      if (at.matches(likely)) return null;
+      if (isLikely(at)) return null;
       const id = markerOf(at, element);
       if (id !== null) return id;
     }
     return null;
   };
+  const labelOf = (element) =>
+    (element.getAttribute('aria-label') ?? element.innerText ?? element.textContent ?? '').replace(/\\s+/g, ' ').trim().slice(0, 60) || null;
   const found = [];
   for (const element of root.querySelectorAll('*')) {
     if (!rendered(element)) continue;
-    const what = LIKELY.find((selector) => element.matches(selector));
+    const what = !element.matches(container) && LIKELY.find((selector) => element.matches(selector));
     if (what) {
       const inSdk = element.parentElement.closest(sdk);
       if (inSdk !== null && root.contains(inSdk)) continue;
-      found.push({ kind: 'control', what: what.startsWith('[') ? element.tagName.toLowerCase() + what : what, path: pathOf(element), marked: markedOf(element), within: withinOf(element), owner: ownerOf(element)?.key ?? null, box: frameBoxOf(element) });
+      found.push({ kind: 'control', what: what.startsWith('[') ? element.tagName.toLowerCase() + what : what, path: pathOf(element), label: labelOf(element), marked: markedOf(element), within: withinOf(element), owner: ownerOf(element)?.key ?? null, box: frameBoxOf(element), covered: isCovered(element), ...(element.matches(${JSON.stringify(actions_1.INTERACTIVE_SELECTOR)}) ? { action: element.getAttribute('data-et-action') } : {}) });
       continue;
     }
     const cursor = getComputedStyle(element).cursor;
     const pointer = cursor === 'pointer' && getComputedStyle(element.parentElement).cursor !== 'pointer';
     if (!pointer && !hovered.has(element)) continue;
-    if (element.closest('[data-et-control], ' + likely) !== null) continue;
+    let inControl = false;
+    for (let at = element; at && !inControl; at = at.parentElement) inControl = at.hasAttribute('data-et-control') || isLikely(at);
+    if (inControl) continue;
     const reason = [pointer ? 'cursor: pointer' : '', hovered.has(element) ? ':hover rule' : ''].filter(Boolean).join(' and ');
-    found.push({ kind: 'unclassified', what: nameOf(element) + ' with ' + reason, path: pathOf(element), marked: null, within: [], owner: ownerOf(element)?.key ?? null, box: frameBoxOf(element) });
+    found.push({ kind: 'unclassified', what: nameOf(element) + ' with ' + reason, path: pathOf(element), label: labelOf(element), marked: null, within: [], owner: ownerOf(element)?.key ?? null, box: frameBoxOf(element), covered: isCovered(element) });
   }
   return found;
 })`;
@@ -745,7 +902,31 @@ const seeFrame = (options) => `(() => {
       ? { x: Math.round(box.left - ORIGIN.left), y: Math.round(box.top - ORIGIN.top), width: Math.round(box.width), height: Math.round(box.height) }
       : null;
   };
+  const isCovered = (element) => {
+    const box = element.getBoundingClientRect();
+    if (box.width <= 0 || box.height <= 0) return false;
+    const x = [box.left + 1, box.left + box.width / 2, box.right - 1];
+    const y = [box.top + 1, box.top + box.height / 2, box.bottom - 1];
+    const points = [[x[1], y[1]], [x[0], y[0]], [x[2], y[0]], [x[0], y[2]], [x[2], y[2]]];
+    let hit = false;
+    const inline = element.style.getPropertyValue('pointer-events');
+    const priority = element.style.getPropertyPriority('pointer-events');
+    element.style.setProperty('pointer-events', 'auto', 'important');
+    try {
+      for (const [px, py] of points) {
+        const top = document.elementFromPoint(px, py);
+        if (top === null) return false;
+        if (element.contains(top)) return false;
+        hit = true;
+      }
+    } finally {
+      if (inline) element.style.setProperty('pointer-events', inline, priority);
+      else element.style.removeProperty('pointer-events');
+    }
+    return hit;
+  };
   const OWN = ${JSON.stringify(options.part)};
+  const CONTROL_PARTS = ${JSON.stringify(options.controlParts)};
   const tokensOf = (element, name) => (element.getAttribute(name) ?? '').split(' ').filter(Boolean);
   const ownerOf = (element) => {
     const slotted = tokensOf(element, 'data-et-slot');
@@ -819,20 +1000,26 @@ const seeFrame = (options) => `(() => {
   const isKeyboard = (element) => element.getAttribute('data-active-source') === 'keyboard';
   let next = 0;
   const tagged = (element) => {
-    const at = next++;
+    const at = element.hasAttribute('data-et-complete') ? Number(element.getAttribute('data-et-complete')) : next++;
     element.setAttribute('data-et-complete', String(at));
     const box = element.getBoundingClientRect();
     const x = Math.max(0, box.x + scrollX - ${PAD});
     const y = Math.max(0, box.y + scrollY - ${PAD});
+    const width = Math.min(box.x + scrollX + box.width + ${PAD}, document.documentElement.scrollWidth) - x;
+    const height = Math.min(box.y + scrollY + box.height + ${PAD}, document.documentElement.scrollHeight) - y;
     return {
       at,
       forced: tokensOf(element, 'data-et-force'),
-      box: box.width > 0 && box.height > 0 ? { x, y, width: box.width + ${PAD * 2}, height: box.height + ${PAD * 2} } : null,
+      box: box.width > 0 && box.height > 0 && width > 0 && height > 0 ? { x, y, width, height } : null,
       selected: isSelected(element),
       look: lookOf(element),
     };
   };
-  const controls = [...root.querySelectorAll('[data-et-control]')].filter((element) => ownerOf(element) === null).map((element) => {
+  const isOwnControl = (element) => {
+    const owner = ownerOf(element);
+    return owner === null || CONTROL_PARTS[element.getAttribute('data-et-control')] === owner.key;
+  };
+  const controls = [...root.querySelectorAll('[data-et-control]')].filter(isOwnControl).map((element) => {
     const parts = ${controlPartsOf}(element);
     const forced = new Set(parts.flatMap((part) => tokensOf(part, 'data-et-force')));
     for (const part of parts) if (forced.size > 0) part.setAttribute('data-et-force', [...forced].join(' '));
@@ -841,10 +1028,12 @@ const seeFrame = (options) => `(() => {
       disabled: parts.some(isDisabled),
       keyboard: parts.some(isKeyboard),
       frameBox: frameBoxOf(element),
+      covered: isCovered(element),
       ...tagged(element),
     };
   });
-  const surfaces = [...root.querySelectorAll('[data-et-surface]')].filter((element) => ownerOf(element) === null).map((element) => ({
+  const partRoot = [root, ...root.querySelectorAll('[data-et-part]')].find((element) => (element.getAttribute('data-et-part') ?? '').split(' ').includes(${JSON.stringify(options.part)}));
+  const surfaces = [...root.querySelectorAll('[data-et-surface]')].filter((element) => ownerOf(element) === null && !(element === partRoot && element.getAttribute('data-et-surface') === '')).map((element) => ({
     id: element.getAttribute('data-et-surface'),
     shown: shown(element),
     options: [...element.querySelectorAll(${JSON.stringify(OPTION_SELECTOR)})].filter((option) => ownerOf(option) === null && shown(option)).map((option) => ({ ...tagged(option), named: option.id !== '' && named.has(option.id), keyboard: isKeyboard(option) })),
@@ -855,8 +1044,10 @@ const seeFrame = (options) => `(() => {
     surfaces,
     found: discover ? ${discoverControls}(root) : [],
     overrides: discover ? ${findOverrides}(${JSON.stringify(options.ownCss)}) : [],
+    backdrop: discover ? ${(0, demo_backdrop_1.findDemoBackdrop)(options.part)}(root) : null,
   };
 })()`;
+exports.seeFrame = seeFrame;
 const forceOn = ({ at, interaction, on, }) => `((at, interaction, on) => {
   const found = document.querySelector('[data-et-complete="' + at + '"]');
   for (const element of found.hasAttribute('data-et-control') ? ${controlPartsOf}(found) : [found]) {
@@ -869,21 +1060,29 @@ const forceOn = ({ at, interaction, on, }) => `((at, interaction, on) => {
 })(${JSON.stringify(at)}, ${JSON.stringify(interaction)}, ${JSON.stringify(on)})`;
 const FORCEABLE = new Set(['hover', 'focus-visible', 'active']);
 const seeFrames = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    const { browser, base, frames, part, ownCss } = options;
+    const { browser, base, frames, part, ownCss, controlParts } = options;
     const context = yield browser.newContext();
     const seen = [];
     const refused = [];
+    const shots = [];
     try {
         const page = yield context.newPage();
-        for (const frame of frames) {
+        const seeOne = (frame) => __awaiter(void 0, void 0, void 0, function* () {
             yield page.setViewportSize((0, shot_1.viewportOf)(frame.size));
             yield (0, thumb_1.openFrame)(page, `${base}/frame.html?${frame.search}`);
             yield page.addStyleTag({ content: NO_MOTION });
-            yield page.evaluate(thumb_1.settled);
-            const found = (yield page.evaluate(seeFrame({ discover: frame.interaction === null, part, ownCss, clip: frame.clip })));
+            yield (0, thumb_1.awaitSettled)(page);
+            const found = (yield page.evaluate((0, exports.seeFrame)({ discover: frame.interaction === null, part, ownCss, controlParts, clip: frame.clip })));
             if ('refused' in found) {
                 refused.push(`${frame.state}: ${found.refused}`);
-                continue;
+                return;
+            }
+            if (frame.interaction === null) {
+                const box = frame.clip ? yield page.locator('#root').boundingBox() : null;
+                shots.push({
+                    state: frame.state,
+                    png: yield page.screenshot({ type: 'png', fullPage: true, animations: 'disabled', clip: box !== null && box !== void 0 ? box : undefined }),
+                });
             }
             const forcedOf = (element) => __awaiter(void 0, void 0, void 0, function* () {
                 const forced = [];
@@ -896,22 +1095,23 @@ const seeFrames = (options) => __awaiter(void 0, void 0, void 0, function* () {
                     const drawn = yield shot();
                     const drawnColours = (yield page.evaluate(colourSnapshot(element.at)));
                     yield page.evaluate(forceOn({ at: element.at, interaction, on: false }));
-                    yield page.evaluate(thumb_1.settled);
+                    yield (0, thumb_1.awaitSettled)(page);
                     const rest = yield shot();
                     const restColours = (yield page.evaluate(colourSnapshot(element.at)));
                     yield page.evaluate(forceOn({ at: element.at, interaction, on: true }));
-                    forced.push({
-                        interaction,
-                        differs: !drawn.equals(rest),
-                        still: stillChangesOf(restColours, drawnColours),
-                    });
+                    const differs = !drawn.equals(rest);
+                    const undefinedClasses = differs
+                        ? []
+                        : (yield page.evaluate(undefinedVariantClasses(element.at))).filter((token) => isVariantOf(token, interaction));
+                    forced.push(Object.assign({ interaction,
+                        differs, still: stillChangesOf(restColours, drawnColours) }, (undefinedClasses.length > 0 ? { undefinedClasses } : {})));
                 }
                 return forced;
             });
             const controls = [];
             const surfaces = [];
             for (const control of found.controls)
-                controls.push(Object.assign(Object.assign({ id: control.id, forced: yield forcedOf(control), selected: control.selected, disabled: control.disabled, look: control.look }, (control.keyboard ? { keyboard: true } : {})), { box: control.frameBox }));
+                controls.push(Object.assign(Object.assign(Object.assign({ id: control.id, forced: yield forcedOf(control), selected: control.selected, disabled: control.disabled, look: control.look }, (control.keyboard ? { keyboard: true } : {})), { box: control.frameBox }), (control.covered ? { covered: true } : {})));
             for (const surface of found.surfaces) {
                 const options = [];
                 for (const option of surface.options)
@@ -925,20 +1125,42 @@ const seeFrames = (options) => __awaiter(void 0, void 0, void 0, function* () {
                 surfaces,
                 found: found.found,
                 overrides: found.overrides,
+                backdrop: found.backdrop,
             });
+        });
+        for (const frame of frames) {
+            try {
+                yield seeOne(frame);
+            }
+            catch (error) {
+                refused.push(`${frame.state}: design check could not draw this frame (${error instanceof Error ? error.message.split('\n')[0] : String(error)})`);
+            }
         }
     }
     finally {
         yield context.close();
     }
-    return { seen, refused };
+    const [first, ...others] = shots;
+    const shares = first ? yield (0, contact_sheet_1.changedSharesOf)({ browser, base: first.png, others: others.map(({ png }) => png) }) : [];
+    return {
+        seen,
+        refused,
+        changes: others.map(({ state }, index) => {
+            var _a, _b;
+            return ({
+                state,
+                base: (_a = first === null || first === void 0 ? void 0 : first.state) !== null && _a !== void 0 ? _a : '',
+                share: (_b = shares[index]) !== null && _b !== void 0 ? _b : 0,
+            });
+        }),
+    };
 });
 /**
  * Draws every state of one part of the product, at rest and, unless `restOnly`, in each interaction it declares,
  * once at its first preset or width, and answers what each frame showed, or why its module did not load as a string.
  */
 const seePart = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { product, part, system, base, load, draw, restOnly = false, sketch = null } = options;
     const key = (0, resolve_product_1.partKeyOf)(part);
     const loaded = yield load((0, system_modules_1.productModuleIdOf)({ file: part.file, product: product.name, sketch }))
@@ -984,13 +1206,15 @@ const seePart = (options) => __awaiter(void 0, void 0, void 0, function* () {
         .filter((file) => file.endsWith('.css'))
         .sort()
         .map((file) => (0, fs_1.readFileSync)((0, path_1.join)(dir, file), 'utf8'));
-    const { seen, refused } = yield draw((browser) => seeFrames({ browser, base, frames, part: key, ownCss }));
+    const controlParts = Object.fromEntries(Object.entries((_f = (0, exports.declaredControlsOf)(definition === null || definition === void 0 ? void 0 : definition.controls)) !== null && _f !== void 0 ? _f : {}).flatMap(([id, control]) => control.part === null ? [] : [[id, control.part]]));
+    const { seen, refused, changes } = yield draw((browser) => seeFrames({ browser, base, frames, part: key, ownCss, controlParts }));
     const owner = (0, inventory_approval_1.partOwnerOf)({ product, part });
     return {
         definition,
         states,
         seen,
         refused,
+        changes,
         addresses: states.map((state) => ({ state, preset, width })),
         owner,
         hash: (0, baseline_1.partHashOf)({ product: owner, dir }),
@@ -1005,23 +1229,45 @@ exports.inventoryIdsOf = inventoryIdsOf;
 /**
  * Draws every state of one part, at rest and in each interaction it declares, once at its first preset or width,
  * and answers the gaps of its `controls` declaration, or why it could not draw. A part a control names in `part`,
- * and an embedded part whose `data-et-part` root draws a control, is checked the same way, and its gaps fail it.
+ * and an embedded part whose `data-et-part` root draws a control, is checked the same way, and its gaps fail it -
+ * unless it is a part of the product's base, whose gaps stay its own.
  * A page fails until the user approves its control inventory in Studio. An exception the user approved in Studio
  * drops the gap it names until the part changes; a pending one still fails. With `sketch`, every part is drawn as
  * that variant draws it, and a part the variant changes is not merged yet, so it never fails as unreviewed.
+ * A drawn control that no `controls` entry declares is a hint; the sketch check fails on one a sketch adds.
  */
 const completenessOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d;
     const { target, config, product, part, sketch = null } = options;
-    const resolveChromium = (_a = options.chromiumOf) !== null && _a !== void 0 ? _a : browser_1.chromiumOf;
     const system = (0, system_modules_1.createSystemModules)({ target, config });
-    const parts = (_c = (_b = (sketch ? system.drawnOf(product.name, sketch) : product)) === null || _b === void 0 ? void 0 : _b.parts) !== null && _c !== void 0 ? _c : [];
+    const parts = (_b = (_a = (sketch ? system.drawnOf(product.name, sketch) : product)) === null || _a === void 0 ? void 0 : _a.parts) !== null && _b !== void 0 ? _b : [];
     if (!parts.some((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part))
         return {
             problem: sketch
                 ? `variant "${sketch.variant}" of the sketch on ${sketch.target} in product "${product.name}" has no part "${part}"`
                 : `product "${product.name}" has no part "${part}"`,
         };
+    const checked = yield (0, exports.partsCompletenessOf)(Object.assign(Object.assign({}, options), { parts: [part] }));
+    if ('unavailable' in checked)
+        return checked;
+    const gaps = (_c = checked.gaps.get(part)) !== null && _c !== void 0 ? _c : [];
+    if (typeof gaps === 'string')
+        return { problem: gaps };
+    const hints = (_d = checked.hints.get(part)) !== null && _d !== void 0 ? _d : [];
+    return Object.assign(Object.assign({ gaps }, (checked.exceptions.length > 0 ? { exceptions: checked.exceptions } : {})), (hints.length > 0 ? { hints } : {}));
+});
+exports.completenessOf = completenessOf;
+/**
+ * Checks each named part as `completenessOf` does, sharing one server, browser and cache, and answers the gaps of
+ * each part, or why it could not be checked as a string.
+ */
+const partsCompletenessOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d;
+    const { target, config, product, sketch = null } = options;
+    const resolveChromium = (_a = options.chromiumOf) !== null && _a !== void 0 ? _a : browser_1.chromiumOf;
+    const system = (0, system_modules_1.createSystemModules)({ target, config });
+    const parts = (_c = (_b = (sketch ? system.drawnOf(product.name, sketch) : product)) === null || _b === void 0 ? void 0 : _b.parts) !== null && _c !== void 0 ? _c : [];
+    const optionValuesOf = (0, option_values_1.optionValuesChecker)({ target, config, parts });
     if (!(yield resolveChromium(target)))
         return { unavailable: 'neither the checkout nor this package resolves playwright or playwright-core' };
     const queue = (0, thumb_1.createDrawQueue)({ target, chromiumOf: resolveChromium });
@@ -1031,6 +1277,7 @@ const completenessOf = (options) => __awaiter(void 0, void 0, void 0, function*
         const { port } = (_d = server.httpServer) === null || _d === void 0 ? void 0 : _d.address();
         const checked = new Map();
         const exceptions = [];
+        const hints = new Map();
         const gapsOfPart = (key, chain) => __awaiter(void 0, void 0, void 0, function* () {
             const known = checked.get(key);
             if (known !== undefined && !chain.includes(key))
@@ -1040,7 +1287,7 @@ const completenessOf = (options) => __awaiter(void 0, void 0, void 0, function*
             return gaps;
         });
         const freshGapsOfPart = (key, chain) => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const resolved = parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === key);
             if (!resolved)
                 return `product "${product.name}" has no part "${key}"`;
@@ -1057,41 +1304,64 @@ const completenessOf = (options) => __awaiter(void 0, void 0, void 0, function*
             });
             if (typeof sight === 'string')
                 return [{ code: 'RENDER', target: key, detail: (_a = sight.split('\n')[0]) !== null && _a !== void 0 ? _a : '' }];
-            const { definition, states, seen, refused, owner, hash } = sight;
-            const sketched = ((_b = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === key)) === null || _b === void 0 ? void 0 : _b.file) !== resolved.file;
+            const { definition, states, seen, refused, changes, owner, hash } = sight;
+            const optionProblems = optionValuesOf(resolved, definition !== null && definition !== void 0 ? definition : {});
+            hints.set(key, [
+                ...(0, exports.smallChangeHintsOf)({ part: key, controls: definition === null || definition === void 0 ? void 0 : definition.controls, changes }),
+                ...[
+                    ...(0, exports.controlStateGapsOf)({ part: key, controls: definition === null || definition === void 0 ? void 0 : definition.controls, states }),
+                    ...discoveryGapsOf({
+                        part: key,
+                        declared: (_b = (0, exports.declaredControlsOf)(definition === null || definition === void 0 ? void 0 : definition.controls)) !== null && _b !== void 0 ? _b : {},
+                        frames: seen,
+                    }).filter(isUndeclaredControlGap),
+                    ...optionProblems
+                        .filter((gap) => gap.code === 'OPTION-VALUE-MISSING')
+                        .map((gap) => (Object.assign(Object.assign({}, gap), { target: key }))),
+                ].map((gap) => `HINT ${(0, exports.completenessGapLineOf)(gap)}`),
+            ]);
+            const sketched = ((_c = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === key)) === null || _c === void 0 ? void 0 : _c.file) !== resolved.file;
             const reviewed = sketched || (0, merged_parts_1.readMerged)(owner.dir)[key] === hash;
             const referenced = {};
             const used = [
-                ...Object.values((_c = (0, exports.declaredControlsOf)(definition === null || definition === void 0 ? void 0 : definition.controls)) !== null && _c !== void 0 ? _c : {}).map((control) => control.part),
+                ...Object.values((_d = (0, exports.declaredControlsOf)(definition === null || definition === void 0 ? void 0 : definition.controls)) !== null && _d !== void 0 ? _d : {}).map((control) => control.part),
                 ...ownersOf(seen),
             ];
+            const isKitPart = (other) => { var _a; return resolved.origin !== 'base' && ((_a = parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === other)) === null || _a === void 0 ? void 0 : _a.origin) === 'base'; };
             for (const other of used)
                 if (other !== null && !(other in referenced))
-                    referenced[other] = yield gapsOfPart(other, [...chain, key]);
+                    referenced[other] = isKitPart(other) ? [] : yield gapsOfPart(other, [...chain, key]);
             const excepted = (0, exceptions_1.withExceptions)({
                 part: key,
                 exceptions: (0, exceptions_1.readExceptions)(owner.dir),
                 hash,
-                gaps: (0, exports.completenessGapsOf)({
-                    part: key,
-                    controls: definition === null || definition === void 0 ? void 0 : definition.controls,
-                    states,
-                    frames: seen,
-                    reviewed,
-                    grid: definition === null || definition === void 0 ? void 0 : definition.grid,
-                    referenced,
-                    inventory: resolved.layer === 'pages'
-                        ? (0, inventory_approval_1.inventoryStateOf)({ approval: (0, inventory_approval_1.readInventory)(owner.dir)[key], ids: (0, exports.inventoryIdsOf)(seen), hash })
-                        : undefined,
-                }),
+                gaps: [
+                    ...(0, exports.completenessGapsOf)({
+                        part: key,
+                        controls: definition === null || definition === void 0 ? void 0 : definition.controls,
+                        states,
+                        frames: seen,
+                        reviewed,
+                        grid: definition === null || definition === void 0 ? void 0 : definition.grid,
+                        referenced,
+                        inventory: resolved.layer === 'pages'
+                            ? (0, inventory_approval_1.inventoryStateOf)({ approval: (0, inventory_approval_1.readInventory)(owner.dir)[key], ids: (0, exports.inventoryIdsOf)(seen), hash })
+                            : undefined,
+                    }),
+                    ...(resolved.layer === 'pages' ? [] : (0, demo_backdrop_1.demoBackdropGapsOf)({ part: key, frames: seen })),
+                ],
             });
             exceptions.push(...excepted.listed);
-            return [...refused.map((detail) => ({ code: 'RENDER', target: key, detail })), ...excepted.gaps];
+            return [
+                ...refused.map((detail) => ({ code: 'RENDER', target: key, detail })),
+                ...optionProblems.filter((gap) => gap.code !== 'OPTION-VALUE-MISSING').map((gap) => (Object.assign(Object.assign({}, gap), { target: key }))),
+                ...excepted.gaps,
+            ];
         });
-        const gaps = yield gapsOfPart(part, []);
-        if (typeof gaps === 'string')
-            return { problem: gaps };
-        return exceptions.length > 0 ? { gaps, exceptions } : { gaps };
+        const gaps = new Map();
+        for (const part of options.parts)
+            gaps.set(part, yield gapsOfPart(part, []));
+        return { gaps, exceptions, hints };
     }
     catch (error) {
         if (error instanceof thumb_1.ThumbUnavailableError)
@@ -1102,5 +1372,5 @@ const completenessOf = (options) => __awaiter(void 0, void 0, void 0, function*
         yield Promise.all([queue.close(), server.close()]);
     }
 });
-exports.completenessOf = completenessOf;
+exports.partsCompletenessOf = partsCompletenessOf;
 //# sourceMappingURL=complete.js.map