@ethlete/cli 3.0.0-next.23 → 3.0.0-next.24

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

@@ -0,0 +1,655 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.completenessOf = exports.completenessGapLineOf = exports.completenessGapsOf = void 0;
+const path_1 = require("path");
+const browser_1 = require("../browser");
+const force_interactions_1 = require("../force-interactions");
+const serve_1 = require("../serve");
+const shot_1 = require("../shot");
+const thumb_1 = require("../thumb");
+const resolve_product_1 = require("./resolve-product");
+const baseline_1 = require("./sketch/baseline");
+const merged_parts_1 = require("./sketch/merged-parts");
+const system_modules_1 = require("./system-modules");
+const CHECKED_KINDS = ['disclosure'];
+const INPUT_INTERACTIONS = { pointer: ['hover', 'active'], keyboard: ['focus-visible'] };
+const isRecord = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
+const requiredInteractionsOf = (control) => control.input.flatMap((input) => { var _a; return (_a = INPUT_INTERACTIONS[input]) !== null && _a !== void 0 ? _a : []; });
+const gridGapOf = (options) => {
+    const { grid, states, interactions } = 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}`;
+    const columns = grid['columns'];
+    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}`));
+    return holes.length > 0 ? `its grid draws no state in ${holes.join(', ')} - ${fix}` : null;
+};
+const declaredControlsOf = (value) => isRecord(value)
+    ? Object.fromEntries(Object.entries(value).map(([id, control]) => {
+        const declared = isRecord(control) ? control : {};
+        return [
+            id,
+            {
+                kind: typeof declared['kind'] === 'string' ? declared['kind'] : '',
+                part: typeof declared['part'] === 'string' ? declared['part'] : null,
+                input: Array.isArray(declared['input'])
+                    ? declared['input'].filter((input) => typeof input === 'string')
+                    : [],
+                surfaces: isRecord(declared['surfaces'])
+                    ? Object.fromEntries(Object.entries(declared['surfaces']).filter((entry) => typeof entry[1] === 'string'))
+                    : {},
+            },
+        ];
+    }))
+    : null;
+const discoveryGapsOf = (options) => {
+    var _a, _b, _c, _d;
+    const { part, declared, frames } = options;
+    const ownedByPart = (found) => 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; });
+    const groups = new Map();
+    for (const frame of frames.filter((seen) => seen.interaction === null)) {
+        const counts = new Map();
+        for (const found of (_a = frame.found) !== null && _a !== void 0 ? _a : []) {
+            if (ownedByPart(found) || (found.kind === 'control' && found.marked !== null))
+                continue;
+            const key = `${found.kind} ${found.what} ${found.path}`;
+            const group = (_b = groups.get(key)) !== null && _b !== void 0 ? _b : { found, states: [], count: 0 };
+            counts.set(key, ((_c = counts.get(key)) !== null && _c !== void 0 ? _c : 0) + 1);
+            if (!group.states.includes(frame.state))
+                group.states.push(frame.state);
+            group.count = Math.max(group.count, (_d = counts.get(key)) !== null && _d !== void 0 ? _d : 0);
+            groups.set(key, group);
+        }
+    }
+    return [...groups.values()]
+        .sort((a, b) => a.found.path.localeCompare(b.found.path) || a.found.what.localeCompare(b.found.what))
+        .map(({ found, states, count }) => {
+        const shown = states.length > 4 ? `${states.slice(0, 3).join(', ')} and ${states.length - 3} more` : states.join(', ');
+        const where = `${found.what} at ${found.path} in ${shown}${count > 1 ? ` (${count} of them)` : ''}`;
+        return found.kind === 'control'
+            ? {
+                code: 'CONTROL-UNDECLARED',
+                target: part,
+                detail: `${where} - mark it with data-et-control and declare it in controls`,
+            }
+            : {
+                code: 'CONTROL-UNCLASSIFIED',
+                target: part,
+                detail: `${where} - draw it as a native control or give it an interactive role and declare it, or drop the pointer cursor and :hover style`,
+            };
+    });
+};
+const interactionGapOf = (options) => {
+    var _a;
+    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 })));
+    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`;
+    return `no state draws it ${interaction} - draw a state that forces ${interaction} on the data-et-control element, e.g. with forceInteraction`;
+};
+const stillGapOf = (options) => {
+    var _a;
+    const { frames, id, interaction } = options;
+    for (const frame of frames)
+        for (const control of frame.controls.filter((seen) => seen.id === id))
+            for (const force of control.forced.filter((seen) => { var _a; return seen.interaction === interaction && ((_a = seen.still) === null || _a === void 0 ? void 0 : _a.length); }))
+                return `state ${frame.state} changes ${(_a = force.still) === null || _a === void 0 ? void 0 : _a.join(', ')} in one frame - give them a transition with the product's motion tokens`;
+    return null;
+};
+const disclosureGapsOf = (options) => {
+    const { frames, id, control, states } = options;
+    const rest = frames.filter((frame) => frame.interaction === null);
+    const body = control.surfaces['body'];
+    const bodyId = `${id}.body`;
+    const showsBody = (frame) => frame.surfaces.some((surface) => surface.id === bodyId && surface.shown);
+    const drawsControl = (frame) => frame.controls.some((seen) => seen.id === id);
+    const gaps = [];
+    for (const interaction of control.part === null ? requiredInteractionsOf(control) : []) {
+        const gap = interactionGapOf({ frames, id, interaction });
+        if (gap)
+            gaps.push([interaction, gap]);
+    }
+    if (!rest.some((frame) => drawsControl(frame) && !showsBody(frame)))
+        gaps.push(['collapsed', `every state that draws it also shows its body - draw a state with ${bodyId} closed`]);
+    if (body === undefined)
+        gaps.push(['body', 'declares no surfaces.body - name the state that draws it open']);
+    else if (!states.includes(body))
+        gaps.push(['body', `surfaces.body names state ${body}, which the part does not declare`]);
+    else if (!rest.some((frame) => frame.state === body && drawsControl(frame) && showsBody(frame)))
+        gaps.push([
+            'body',
+            `state ${body} draws no visible, non-empty data-et-surface="${bodyId}" next to data-et-control="${id}"`,
+        ]);
+    return gaps;
+};
+/**
+ * The gaps of one part, from its `controls` declaration, its state names and what each drawn frame showed.
+ * A part that is not `reviewed` (its files differ from its merged.json hash) has no reviewed evidence at all.
+ */
+const completenessGapsOf = (options) => {
+    var _a;
+    const { part, states, frames, reviewed, grid, referenced = {} } = options;
+    const declared = (_a = declaredControlsOf(options.controls)) !== null && _a !== void 0 ? _a : {};
+    const gaps = [];
+    if (!reviewed)
+        gaps.push({
+            code: 'PART-UNREVIEWED',
+            target: part,
+            detail: 'its files differ from the hash merged.json records for it, so no frame of it is reviewed - merge or accept it',
+        });
+    const seenIds = new Set(frames.flatMap((frame) => frame.controls.map((control) => control.id)));
+    for (const id of [...seenIds].filter((seen) => !(seen in declared)).sort())
+        gaps.push({
+            code: 'CONTROL-UNKNOWN',
+            target: `${part}.${id}`,
+            detail: `data-et-control="${id}" is not in controls`,
+        });
+    const surfaceIds = new Set(frames.flatMap((frame) => frame.surfaces.map((surface) => surface.id)));
+    for (const id of [...surfaceIds].sort()) {
+        const [control = '', surface = ''] = id.split('.');
+        if (!declared[control] || declared[control].surfaces[surface] === undefined)
+            gaps.push({
+                code: 'CONTROL-UNKNOWN',
+                target: `${part}.${control}`,
+                detail: `data-et-surface="${id}" names no surface its control declares`,
+            });
+    }
+    for (const [id, control] of Object.entries(declared)) {
+        if (!CHECKED_KINDS.includes(control.kind)) {
+            gaps.push({
+                code: 'CONTROL-KIND',
+                target: `${part}.${id}`,
+                detail: `kind "${control.kind}" is not checked yet - kinds are ${CHECKED_KINDS.join(', ')}`,
+            });
+            continue;
+        }
+        if (control.part === null && part.startsWith('pages/'))
+            gaps.push({
+                code: 'CONTROL-PART-MISSING',
+                target: `${part}.${id}`,
+                detail: "a page draws no interactions of its controls - name the part that draws them, e.g. part: 'components/disclosure'",
+            });
+        const used = control.part === null ? undefined : referenced[control.part];
+        if (typeof used === 'string')
+            gaps.push({ code: 'CONTROL-PART-INCOMPLETE', target: `${part}.${id}`, detail: `${control.part}: ${used}` });
+        else if (used && used.length > 0)
+            gaps.push({
+                code: 'CONTROL-PART-INCOMPLETE',
+                target: `${part}.${id}`,
+                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;
+        if (gridGap)
+            gaps.push({ code: 'CONTROL-GRID-MISSING', target: `${part}.${id}`, detail: gridGap });
+        if (!seenIds.has(id)) {
+            gaps.push({ code: 'CONTROL-UNDRAWN', target: `${part}.${id}`, detail: `no state draws data-et-control="${id}"` });
+            continue;
+        }
+        for (const [requirement, detail] of disclosureGapsOf({ frames, id, control, states }))
+            gaps.push({ code: 'REQUIREMENT-MISSING', target: `${part}.${id}.${requirement}`, detail });
+        for (const interaction of interactions) {
+            const gap = stillGapOf({ frames, id, interaction });
+            if (gap)
+                gaps.push({ code: 'CONTROL-TRANSITION-MISSING', target: `${part}.${id}.${interaction}`, detail: gap });
+        }
+    }
+    return [...gaps, ...discoveryGapsOf({ part, declared, frames })];
+};
+exports.completenessGapsOf = completenessGapsOf;
+const completenessGapLineOf = (gap) => `${gap.code} ${gap.target} - ${gap.detail}`;
+exports.completenessGapLineOf = completenessGapLineOf;
+const NO_MOTION = '*, *::before, *::after { transition: none !important; animation: none !important; }';
+const PAD = 8;
+const COLOUR_PROPERTIES = [
+    'background-color',
+    'color',
+    'border-top-color',
+    'border-right-color',
+    'border-bottom-color',
+    'border-left-color',
+    'box-shadow',
+];
+const COLOUR = COLOUR_PROPERTIES.indexOf('color');
+const colourSnapshot = (at) => `((at) => {
+  const control = document.querySelector('[data-et-complete="' + at + '"]');
+  const motionOff = [...document.querySelectorAll('style')].find((style) => style.textContent === ${JSON.stringify(NO_MOTION)});
+  const elements = [control, ...control.querySelectorAll('*')];
+  const colours = elements.map((element) => {
+    const style = getComputedStyle(element);
+    return ${JSON.stringify(COLOUR_PROPERTIES)}.map((name) => {
+      const side = name.match(/^border-(\\w+)-color$/);
+      return side && parseFloat(style.getPropertyValue('border-' + side[1] + '-width')) === 0 ? '' : style.getPropertyValue(name);
+    });
+  });
+  if (motionOff) motionOff.disabled = true;
+  const transitions = elements.map((element) => {
+    const style = getComputedStyle(element);
+    return {
+      properties: style.transitionProperty.split(',').map((name) => name.trim()),
+      durations: style.transitionDuration.split(',').map((duration) => parseFloat(duration)),
+    };
+  });
+  if (motionOff) motionOff.disabled = false;
+  const parents = elements.map((element) => elements.indexOf(element.parentElement));
+  const names = elements.map((element) => element.tagName.toLowerCase() + (element.classList[0] ? '.' + element.classList[0] : ''));
+  return { colours, transitions, parents, names };
+})(${JSON.stringify(at)})`;
+const coversOf = (property) => {
+    if (property === 'background-color')
+        return ['all', 'background', property];
+    if (property.startsWith('border-'))
+        return ['all', 'border', 'border-color', property.replace(/-color$/, ''), property];
+    return ['all', property];
+};
+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: [] };
+    const still = COLOUR_PROPERTIES.filter((property, at) => {
+        var _a, _b, _c, _d, _e;
+        const [before, after] = [(_a = rest.colours[element]) !== null && _a !== void 0 ? _a : [], (_b = forced.colours[element]) !== null && _b !== void 0 ? _b : []];
+        if (before[at] === after[at])
+            return false;
+        const parent = (_c = forced.parents[element]) !== null && _c !== void 0 ? _c : -1;
+        const inherited = parent >= 0 ? [(_d = rest.colours[parent]) === null || _d === void 0 ? void 0 : _d[at], (_e = forced.colours[parent]) === null || _e === void 0 ? void 0 : _e[at]] : [];
+        if (property !== 'color' && before[at] === before[COLOUR] && after[at] === after[COLOUR])
+            return false;
+        if (property === 'color' && before[at] === inherited[0] && after[at] === inherited[1])
+            return false;
+        return !properties.some((covered, index) => { var _a; return coversOf(property).includes(covered) && ((_a = durations[index % durations.length]) !== null && _a !== void 0 ? _a : 0) > 0; });
+    });
+    return still.length > 0 ? [`${still.join(', ')} of ${name}`] : [];
+});
+const INTERACTIVE_ROLES = [
+    'button',
+    'checkbox',
+    'combobox',
+    'link',
+    'menuitem',
+    'menuitemcheckbox',
+    'menuitemradio',
+    'option',
+    'radio',
+    'scrollbar',
+    'searchbox',
+    'slider',
+    'spinbutton',
+    'switch',
+    'tab',
+    'textbox',
+    'treeitem',
+];
+const SDK_CONTROLS = [
+    '[et-button]',
+    '[et-icon-button]',
+    '[et-text-button]',
+    '[et-fab]',
+    '[et-window-control-button]',
+    '[et-overlay-close]',
+    'et-accordion',
+    'et-cascader',
+    'et-checkbox',
+    'et-chip',
+    'et-color-input',
+    'et-counter',
+    'et-date-input',
+    'et-date-range-input',
+    'et-date-time-input',
+    'et-duration-input',
+    'et-form-field',
+    'et-input',
+    'et-menu-checkbox-item',
+    'et-menu-radio-item',
+    'et-number-input',
+    'et-otp-input',
+    'et-password-input',
+    'et-phone-input',
+    'et-radio',
+    'et-range-slider',
+    'et-rating',
+    'et-segmented-button',
+    'et-select',
+    'et-select-option',
+    'et-slider',
+    'et-split-button',
+    'et-switch',
+    'et-tab',
+    'et-tag-input',
+    'et-textarea',
+    '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 discoverControls = `((root) => {
+  const LIKELY = ${JSON.stringify(LIKELY_CONTROLS)};
+  const likely = LIKELY.join(', ');
+  const sdk = ${JSON.stringify(SDK_CONTROLS.join(', '))};
+  const rendered = (element) => element.getClientRects().length > 0;
+  const nameOf = (element) => {
+    const cls = [...element.classList].find((name) => /^[a-z][\\w-]*$/i.test(name));
+    return element.tagName.toLowerCase() + (cls ? '.' + cls : '');
+  };
+  const pathOf = (element) => {
+    const names = [];
+    for (let at = element; at && at !== root; at = at.parentElement) names.unshift(nameOf(at));
+    return (names.length > 4 ? '... > ' : '') + names.slice(-4).join(' > ');
+  };
+  const splitTop = (selector) => {
+    const parts = [];
+    let depth = 0;
+    let from = 0;
+    for (let at = 0; at < selector.length; at++) {
+      const char = selector[at];
+      if (char === '\\\\') at++;
+      else if (char === '(' || char === '[') depth++;
+      else if (char === ')' || char === ']') depth--;
+      else if (char === ',' && depth === 0) {
+        parts.push(selector.slice(from, at).trim());
+        from = at + 1;
+      }
+    }
+    parts.push(selector.slice(from).trim());
+    return parts.filter(Boolean);
+  };
+  const HOVER = /(?<!\\\\):hover(?![\\w-])/g;
+  const FORCED_HOVER = /:is\\(:hover,\\s*\\[data-et-force~="?hover"?\\]\\)/g;
+  const hoveredOf = (written) => {
+    const selector = written.replace(FORCED_HOVER, ':hover');
+    const match = new RegExp(HOVER.source).exec(selector);
+    if (!match) return null;
+    let depth = 0;
+    let end = selector.length;
+    for (let at = 0; at < selector.length; at++) {
+      const char = selector[at];
+      if (char === '\\\\') at++;
+      else if (char === '(' || char === '[') depth++;
+      else if (char === ')' || char === ']') depth--;
+      else if (at > match.index && depth === 0 && /[\\s>+~]/.test(char)) {
+        end = at;
+        break;
+      }
+    }
+    return selector.slice(0, end).replace(HOVER, '').trim() || null;
+  };
+  const hovered = new Set();
+  const walk = (rules, parent) => {
+    for (const rule of rules) {
+      if (rule instanceof CSSStyleRule) {
+        const own = splitTop(rule.selectorText).map((selector) =>
+          parent === null ? selector : selector.includes('&') ? selector.replaceAll('&', ':is(' + parent + ')') : ':is(' + parent + ') ' + selector,
+        );
+        for (const selector of own) {
+          const target = hoveredOf(selector);
+          if (target === null) continue;
+          try {
+            for (const element of root.querySelectorAll(target)) hovered.add(element);
+          } catch {}
+        }
+        if (rule.cssRules && rule.cssRules.length > 0) walk(rule.cssRules, own.join(', '));
+      } else if (rule.cssRules) walk(rule.cssRules, parent);
+    }
+  };
+  for (const sheet of document.styleSheets) {
+    try {
+      walk(sheet.cssRules, null);
+    } catch {}
+  }
+  const withinOf = (element) => {
+    const ids = [];
+    for (let at = element; at && at !== root; at = at.parentElement)
+      if (at.hasAttribute('data-et-control')) ids.push(at.getAttribute('data-et-control'));
+    return ids;
+  };
+  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 (at.hasAttribute('data-et-control')) return at.getAttribute('data-et-control');
+    }
+    return null;
+  };
+  const found = [];
+  for (const element of root.querySelectorAll('*')) {
+    if (!rendered(element)) continue;
+    const what = 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) });
+      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;
+    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: [] });
+  }
+  return found;
+})`;
+const seeFrame = (discover) => `(() => {
+  const root = document.getElementById('root');
+  const refused = root.innerText.trim();
+  if (refused.startsWith('design-explore:')) return { refused: refused.split('\\n')[0] };
+  const shown = (element) => {
+    const box = element.getBoundingClientRect();
+    let { left, top, right, bottom } = box;
+    if (box.width <= 0 || box.height <= 0) return false;
+    if (['hidden', 'collapse'].includes(getComputedStyle(element).visibility)) return false;
+    for (let at = element; at; at = at.parentElement) {
+      const style = getComputedStyle(at);
+      if (Number(style.opacity) === 0) return false;
+      if (at === element) continue;
+      const clip = at.getBoundingClientRect();
+      if (style.overflowX !== 'visible') [left, right] = [Math.max(left, clip.left), Math.min(right, clip.right)];
+      if (style.overflowY !== 'visible') [top, bottom] = [Math.max(top, clip.top), Math.min(bottom, clip.bottom)];
+      if (right <= left || bottom <= top) return false;
+    }
+    return element.innerText.trim() !== '' || !!element.querySelector('img, svg, canvas, video, iframe, input, select, textarea');
+  };
+  const controls = [...root.querySelectorAll('[data-et-control]')].map((element, at) => {
+    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});
+    return {
+      id: element.getAttribute('data-et-control'),
+      at,
+      forced: (element.getAttribute('data-et-force') ?? '').split(' ').filter(Boolean),
+      box: box.width > 0 && box.height > 0 ? { x, y, width: box.width + ${PAD * 2}, height: box.height + ${PAD * 2} } : null,
+    };
+  });
+  const surfaces = [...root.querySelectorAll('[data-et-surface]')].map((element) => ({
+    id: element.getAttribute('data-et-surface'),
+    shown: shown(element),
+  }));
+  return { controls, surfaces, found: ${discover} ? ${discoverControls}(root) : [] };
+})()`;
+const forceOn = ({ at, interaction, on, }) => `((at, interaction, on) => {
+  const element = document.querySelector('[data-et-complete="' + at + '"]');
+  const tokens = new Set((element.getAttribute('data-et-force') ?? '').split(' ').filter(Boolean));
+  if (on) tokens.add(interaction);
+  else tokens.delete(interaction);
+  if (tokens.size > 0) element.setAttribute('data-et-force', [...tokens].join(' '));
+  else element.removeAttribute('data-et-force');
+})(${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 } = options;
+    const context = yield browser.newContext();
+    const seen = [];
+    const refused = [];
+    try {
+        const page = yield context.newPage();
+        for (const frame of frames) {
+            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(frame.interaction === null)));
+            if ('refused' in found) {
+                refused.push(`${frame.state}: ${found.refused}`);
+                continue;
+            }
+            const controls = [];
+            for (const control of found.controls) {
+                const forced = [];
+                for (const interaction of control.forced.filter((name) => FORCEABLE.has(name))) {
+                    if (!control.box) {
+                        forced.push({ interaction, differs: false });
+                        continue;
+                    }
+                    const shot = () => { var _a; return page.screenshot({ type: 'png', fullPage: true, clip: (_a = control.box) !== null && _a !== void 0 ? _a : undefined, animations: 'disabled' }); };
+                    const drawn = yield shot();
+                    const drawnColours = (yield page.evaluate(colourSnapshot(control.at)));
+                    yield page.evaluate(forceOn({ at: control.at, interaction, on: false }));
+                    yield page.evaluate(thumb_1.settled);
+                    const rest = yield shot();
+                    const restColours = (yield page.evaluate(colourSnapshot(control.at)));
+                    yield page.evaluate(forceOn({ at: control.at, interaction, on: true }));
+                    forced.push({
+                        interaction,
+                        differs: !drawn.equals(rest),
+                        still: stillChangesOf(restColours, drawnColours),
+                    });
+                }
+                controls.push({ id: control.id, forced });
+            }
+            seen.push({
+                state: frame.state,
+                interaction: frame.interaction,
+                controls,
+                surfaces: found.surfaces,
+                found: found.found,
+            });
+        }
+    }
+    finally {
+        yield context.close();
+    }
+    return { seen, refused };
+});
+/**
+ * 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`
+ * is checked the same way, and its gaps fail the control.
+ */
+const completenessOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d;
+    const { target, config, product, part } = options;
+    const resolveChromium = (_a = options.chromiumOf) !== null && _a !== void 0 ? _a : browser_1.chromiumOf;
+    if (!product.parts.some((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part))
+        return { problem: `product "${product.name}" has no part "${part}"` };
+    if (!(yield resolveChromium(target)))
+        return { unavailable: 'neither the checkout nor this package resolves playwright or playwright-core' };
+    const queue = (0, thumb_1.createDrawQueue)({ target, chromiumOf: resolveChromium });
+    const server = yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
+    try {
+        yield server.listen();
+        const { port } = (_b = server.httpServer) === null || _b === void 0 ? void 0 : _b.address();
+        const system = (0, system_modules_1.createSystemModules)({ target, config });
+        const presets = Object.keys((_d = (_c = system.drawnOf(product.name, null)) === null || _c === void 0 ? void 0 : _c.presets) !== null && _d !== void 0 ? _d : {});
+        const gapsOfPart = (key, chain) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            const resolved = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === key);
+            if (!resolved)
+                return `product "${product.name}" has no part "${key}"`;
+            if (chain.includes(key))
+                return `its controls name each other in a cycle: ${[...chain, key].join(' > ')}`;
+            const loaded = yield server
+                .ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file: resolved.file, product: product.name, sketch: null }))
+                .then((module) => ({ module: module }))
+                .catch((error) => ({ error: error instanceof Error ? error.message : String(error) }));
+            if ('error' in loaded)
+                return [{ code: 'RENDER', target: key, detail: (_a = loaded.error.split('\n')[0]) !== null && _a !== void 0 ? _a : '' }];
+            const definition = loaded.module.default;
+            const states = isRecord(definition === null || definition === void 0 ? void 0 : definition.states) ? Object.keys(definition.states) : [];
+            const interactions = Array.isArray(definition === null || definition === void 0 ? void 0 : definition.interactions)
+                ? definition.interactions.filter((name) => force_interactions_1.INTERACTIONS.some((known) => known === name))
+                : [];
+            const widths = Array.isArray(definition === null || definition === void 0 ? void 0 : definition.widths)
+                ? definition.widths.filter((width) => typeof width === 'number')
+                : [];
+            const preset = resolved.layer === 'pages' ? ((_b = presets[0]) !== null && _b !== void 0 ? _b : null) : null;
+            const width = preset === null ? ((_c = widths[0]) !== null && _c !== void 0 ? _c : null) : null;
+            const frames = [];
+            for (const state of states)
+                for (const interaction of [null, ...interactions]) {
+                    const frame = (0, shot_1.partFrameOf)({
+                        system,
+                        product: product.name,
+                        part: key,
+                        state,
+                        preset,
+                        width,
+                        sketch: null,
+                        interaction,
+                    });
+                    if (!(frame instanceof Error))
+                        frames.push({ state, interaction, search: frame.search.toString(), size: (_d = frame.size) !== null && _d !== void 0 ? _d : null });
+                }
+            const { seen, refused } = yield queue.run((browser) => seeFrames({ browser, base: `http://localhost:${port}`, frames }));
+            const reviewed = (0, merged_parts_1.readMerged)(product.dir)[key] === (0, baseline_1.partHashOf)({ product, dir: (0, path_1.dirname)(resolved.file) });
+            const referenced = {};
+            for (const control of Object.values((_e = declaredControlsOf(definition === null || definition === void 0 ? void 0 : definition.controls)) !== null && _e !== void 0 ? _e : {}))
+                if (control.part !== null && !(control.part in referenced))
+                    referenced[control.part] = yield gapsOfPart(control.part, [...chain, key]);
+            return [
+                ...refused.map((detail) => ({ code: 'RENDER', target: key, detail })),
+                ...(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,
+                }),
+            ];
+        });
+        const gaps = yield gapsOfPart(part, []);
+        return typeof gaps === 'string' ? { problem: gaps } : { gaps };
+    }
+    catch (error) {
+        if (error instanceof thumb_1.ThumbUnavailableError)
+            return { unavailable: error.message };
+        throw error;
+    }
+    finally {
+        yield Promise.all([queue.close(), server.close()]);
+    }
+});
+exports.completenessOf = completenessOf;
+//# sourceMappingURL=complete.js.map