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

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

@@ -0,0 +1,1106 @@
+"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.inventoryIdsOf = exports.seePart = exports.completenessGapLineOf = exports.completenessGapsOf = exports.findingKeyOf = exports.isFindingOf = exports.declaredControlsOf = void 0;
+const fs_1 = require("fs");
+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 exceptions_1 = require("./exceptions");
+const inventory_approval_1 = require("./inventory-approval");
+const KINDS = {
+    disclosure: { surface: 'body', closed: 'collapsed' },
+    button: { adds: ['active'] },
+    select: { surface: 'open', options: true },
+    menu: { surface: 'open', options: true },
+    row: { selects: true, virtualFocus: true },
+    field: { noActive: true },
+    tooltip: { surface: 'tooltip' },
+};
+const CHECKED_KINDS = Object.keys(KINDS);
+const INPUT_INTERACTIONS = { pointer: ['hover', 'active'], keyboard: ['focus-visible'] };
+const MARKS = {
+    selected: 'aria-selected="true", aria-checked="true", aria-pressed="true" or aria-current',
+    disabled: 'disabled or aria-disabled="true"',
+};
+const CONTROL_MARKS = Object.assign(Object.assign({}, MARKS), { disabled: `${MARKS.disabled} on it or a data-et-control-part in it` });
+const isRecord = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
+const requiredInteractionsOf = (control) => {
+    var _a, _b;
+    return [
+        ...new Set([
+            ...control.input
+                .flatMap((input) => { var _a; return (_a = INPUT_INTERACTIONS[input]) !== null && _a !== void 0 ? _a : []; })
+                .filter((interaction) => { var _a; return !(((_a = KINDS[control.kind]) === null || _a === void 0 ? void 0 : _a.noActive) && interaction === 'active'); }),
+            ...((_b = (_a = KINDS[control.kind]) === null || _a === void 0 ? void 0 : _a.adds) !== null && _b !== void 0 ? _b : []),
+        ]),
+    ];
+};
+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'))
+                    : {},
+                disabled: declared['disabled'] === true,
+            },
+        ];
+    }))
+    : null;
+exports.declaredControlsOf = declaredControlsOf;
+/** Whether a discovered element is an undeclared or unclassified finding of the part, not owned or declared. */
+const isFindingOf = (declared) => (found) => {
+    var _a;
+    return ((_a = found.owner) !== null && _a !== void 0 ? _a : 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; }) &&
+        !(found.kind === 'control' && found.marked !== null);
+};
+exports.isFindingOf = isFindingOf;
+const findingKeyOf = (found) => `${found.kind} ${found.what} ${found.path}`;
+exports.findingKeyOf = findingKeyOf;
+const discoveryGapsOf = (options) => {
+    var _a, _b, _c, _d;
+    const { part, declared, frames } = options;
+    const isFinding = (0, exports.isFindingOf)(declared);
+    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 (!isFinding(found))
+                continue;
+            const key = (0, exports.findingKeyOf)(found);
+            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 where = `${found.what} at ${found.path} in ${statesShownOf(states)}${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 statesShownOf = (states) => states.length > 4 ? `${states.slice(0, 3).join(', ')} and ${states.length - 3} more` : states.join(', ');
+const overrideGapsOf = (options) => {
+    var _a, _b;
+    const groups = new Map();
+    for (const frame of options.frames.filter((seen) => seen.interaction === null))
+        for (const override of (_a = frame.overrides) !== null && _a !== void 0 ? _a : []) {
+            const key = `${override.owner} ${override.selector} ${override.path}`;
+            const group = (_b = groups.get(key)) !== null && _b !== void 0 ? _b : { override, states: [] };
+            if (!group.states.includes(frame.state))
+                group.states.push(frame.state);
+            groups.set(key, group);
+        }
+    return [...groups.values()]
+        .sort((a, b) => a.override.owner.localeCompare(b.override.owner) || a.override.path.localeCompare(b.override.path))
+        .map(({ override, states }) => ({
+        code: 'CONTROL-OVERRIDDEN',
+        target: options.part,
+        detail: `"${override.selector}" sets ${override.properties.join(', ')} on ${override.path}, drawn by ${override.owner}, in ${statesShownOf(states)} - change ${override.owner} instead, or mark the control with data-et-control and declare it in controls`,
+    }));
+};
+const ownerGapsOf = (options) => {
+    var _a, _b, _c;
+    const { part, declared, frames, referenced } = options;
+    const named = new Set(Object.values(declared).map((control) => control.part));
+    const owned = new Map();
+    for (const frame of frames.filter((seen) => seen.interaction === null))
+        for (const found of (_a = frame.found) !== null && _a !== void 0 ? _a : []) {
+            const owner = (_b = found.owner) !== null && _b !== void 0 ? _b : null;
+            if (owner === null || named.has(owner))
+                continue;
+            owned.set(owner, ((_c = owned.get(owner)) !== null && _c !== void 0 ? _c : new Set()).add(`${found.what} ${found.path}`));
+        }
+    return [...owned.entries()]
+        .sort(([a], [b]) => a.localeCompare(b))
+        .flatMap(([owner, controls]) => {
+        const used = referenced[owner];
+        const drawn = `${owner} draws ${controls.size} control(s) here`;
+        if (typeof used === 'string')
+            return [{ code: 'CONTROL-PART-INCOMPLETE', target: part, detail: `${drawn}: ${used}` }];
+        if (!used || used.length === 0)
+            return [];
+        return [
+            {
+                code: 'CONTROL-PART-INCOMPLETE',
+                target: part,
+                detail: `${drawn} and is not design complete: ${used.length} gap(s) - run design complete ${owner}`,
+            },
+        ];
+    });
+};
+const ownersOf = (frames) => [
+    ...new Set(frames
+        .filter((seen) => seen.interaction === null)
+        .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) => {
+    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 - 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) => {
+    const { instances, forcedGap } = options;
+    const active = instances.filter((seen) => seen.keyboard);
+    const plain = instances.filter((seen) => !seen.keyboard && !seen.selected && !seen.disabled);
+    if (active.length === 0)
+        return `${forcedGap}; no state marks it data-active-source="keyboard" either`;
+    if (plain.length === 0)
+        return `a state marks it data-active-source="keyboard", but no state draws it plain (not selected, active or disabled) to compare it with`;
+    if (active.some((seen) => plain.some((other) => other.look !== seen.look)))
+        return null;
+    return `it looks the same with data-active-source="keyboard" as plain - give the active look its own colours`;
+};
+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 lookGapOf = (options) => {
+    const { seen, flag, what, marks = MARKS } = options;
+    const on = seen.filter((one) => one.flag);
+    const off = seen.filter((one) => !one.flag);
+    if (on.length === 0)
+        return `no state draws ${what} ${flag} - mark it with ${marks[flag]} in a state`;
+    if (off.length === 0)
+        return `every state draws ${what} ${flag} - draw it without ${flag} too, to compare`;
+    if (!on.some((one) => off.some((other) => one.look !== other.look)))
+        return `${what} looks the same ${flag} as without - give the ${flag} look its own colours`;
+    return null;
+};
+const forcedGapOf = (options) => {
+    var _a;
+    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 `no state draws ${what} ${interaction} - force ${interaction} on it, e.g. with forceInteraction`;
+};
+const surfaceGapsOf = (options) => {
+    const { frames, id, control, states, surface, closed } = options;
+    const rest = frames.filter((frame) => frame.interaction === null);
+    const state = control.surfaces[surface];
+    const surfaceId = `${id}.${surface}`;
+    const shows = (frame) => frame.surfaces.some((seen) => seen.id === surfaceId && seen.shown);
+    const drawsControl = (frame) => frame.controls.some((seen) => seen.id === id);
+    const gaps = [];
+    if (closed && !rest.some((frame) => drawsControl(frame) && !shows(frame)))
+        gaps.push([closed, `every state that draws it also shows its ${surface} - draw a state with ${surfaceId} closed`]);
+    if (state === undefined)
+        gaps.push([surface, `declares no surfaces.${surface} - name the state that draws it open`]);
+    else if (!states.includes(state))
+        gaps.push([surface, `surfaces.${surface} names state ${state}, which the part does not declare`]);
+    else if (!rest.some((frame) => frame.state === state && drawsControl(frame) && shows(frame)))
+        gaps.push([
+            surface,
+            `state ${state} draws no visible, non-empty data-et-surface="${surfaceId}" next to data-et-control="${id}"`,
+        ]);
+    return gaps;
+};
+const KEYBOARD_ACTIVE = 'aria-activedescendant or data-active-source="keyboard"';
+const isKeyboardActive = (option) => !!option.named || !!option.keyboard;
+const isPlain = (option) => !option.selected && !isKeyboardActive(option) && option.forced.length === 0;
+const keyboardActiveGapOf = (options) => {
+    var _a, _b;
+    const { frames, shownIn, forcedGap } = options;
+    const active = frames
+        .map((frame) => ({ state: frame.state, options: shownIn(frame) }))
+        .filter((frame) => frame.options.some(isKeyboardActive));
+    const compared = active.filter((frame) => frame.options.some(isPlain));
+    if (active.length === 0)
+        return `${forcedGap}; no option is marked active by ${KEYBOARD_ACTIVE} either`;
+    if (compared.length === 0)
+        return `state ${(_a = active[0]) === null || _a === void 0 ? void 0 : _a.state} marks an option active by ${KEYBOARD_ACTIVE}, but draws no plain option (not selected, active or forced) to compare it with`;
+    if (compared.some((frame) => frame.options.some((option) => isKeyboardActive(option) && frame.options.some((plain) => isPlain(plain) && plain.look !== option.look))))
+        return null;
+    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 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']) {
+        const forced = frames.flatMap((frame) => shownIn(frame).flatMap((option) => option.forced
+            .filter((force) => force.interaction === interaction)
+            .map((force) => ({ state: frame.state, differs: force.differs }))));
+        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]);
+    }
+    const seen = frames
+        .filter((frame) => frame.interaction === null)
+        .flatMap((frame) => shownIn(frame)
+        .filter((option) => option.forced.length === 0 && !isKeyboardActive(option))
+        .map((option) => ({ look: option.look, flag: option.selected })));
+    const selected = lookGapOf({ seen, flag: 'selected', what });
+    if (selected)
+        gaps.push(['option-selected', selected]);
+    return gaps;
+};
+const requirementGapsOf = (options) => {
+    var _a;
+    const { frames, id, control } = options;
+    const kind = (_a = KINDS[control.kind]) !== null && _a !== void 0 ? _a : {};
+    const own = control.part === null;
+    const instances = frames
+        .filter((frame) => frame.interaction === null)
+        .flatMap((frame) => frame.controls.filter((seen) => seen.id === id && seen.forced.length === 0));
+    const gaps = [];
+    for (const interaction of own ? requiredInteractionsOf(control) : []) {
+        const forcedGap = interactionGapOf({ frames, id, interaction });
+        const gap = forcedGap && interaction === 'focus-visible' && kind.virtualFocus
+            ? keyboardActiveRowGapOf({ instances, forcedGap })
+            : forcedGap;
+        if (gap)
+            gaps.push([interaction, gap]);
+    }
+    if (own && kind.selects) {
+        const selected = lookGapOf({
+            seen: instances.map((seen) => { var _a; return ({ look: seen.look, flag: (_a = seen.selected) !== null && _a !== void 0 ? _a : false }); }),
+            flag: 'selected',
+            what: 'it',
+        });
+        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 })));
+        const hovered = forcedGapOf({ forced, what: 'it selected', interaction: 'hover' });
+        if (selected)
+            gaps.push(['selected', selected]);
+        if (hovered)
+            gaps.push(['selected-hover', hovered]);
+    }
+    if (own && control.disabled) {
+        const disabled = lookGapOf({
+            seen: instances.map((seen) => { var _a; return ({ look: seen.look, flag: (_a = seen.disabled) !== null && _a !== void 0 ? _a : false }); }),
+            flag: 'disabled',
+            what: 'it',
+            marks: CONTROL_MARKS,
+        });
+        if (disabled)
+            gaps.push(['disabled', disabled]);
+    }
+    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}` }));
+    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 = {}, inventory } = options;
+    const declared = (_a = (0, exports.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 requirementGapsOf({ 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 }),
+        ...ownerGapsOf({ part, declared, frames, referenced }),
+        ...overrideGapsOf({ part, frames }),
+        ...inventoryGapsOf({ part, inventory }),
+    ];
+};
+exports.completenessGapsOf = completenessGapsOf;
+const inventoryGapsOf = ({ part, inventory }) => {
+    const reason = inventory ? (0, inventory_approval_1.inventoryReasonOf)(inventory) : null;
+    return reason === null
+        ? []
+        : [{ code: 'INVENTORY-UNAPPROVED', target: part, detail: `${reason} - check and approve it in Studio` }];
+};
+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 LOOK_PROPERTIES = [...COLOUR_PROPERTIES, 'opacity', 'box-shadow', 'font-weight', 'text-decoration-line'];
+const OPTION_SELECTOR = '[role="option"], [role^="menuitem"], [data-et-option]';
+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 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) =>
+          nested(selector, parent),
+        );
+        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 markerOf = (at, element) =>
+    at.getAttribute('data-et-control') ?? (element.matches(${JSON.stringify(OPTION_SELECTOR)}) ? at.getAttribute('data-et-surface')?.split('.')[0] : null) ?? null;
+  const withinOf = (element) => {
+    const ids = [];
+    for (let at = element; at && at !== root; at = at.parentElement) {
+      const id = markerOf(at, element);
+      if (id !== null) ids.push(id);
+    }
+    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;
+      const id = markerOf(at, element);
+      if (id !== null) return id;
+    }
+    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), owner: ownerOf(element)?.key ?? null, box: frameBoxOf(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: [], owner: ownerOf(element)?.key ?? null, box: frameBoxOf(element) });
+  }
+  return found;
+})`;
+const ROOT_LAYOUT = [
+    '^margin',
+    '^inset',
+    '^(top|right|bottom|left)$',
+    '^(min-|max-)?(width|height|inline-size|block-size)$',
+    '^position$',
+    '^z-index$',
+    '^flex(-grow|-shrink|-basis)?$',
+    '^grid-(area|row|column)',
+    '^(align|justify|place)-self$',
+    '^order$',
+    '^(transform|translate|rotate|scale)$',
+];
+const findOverrides = `((ownCss) => {
+  const LAYOUT = new RegExp(${JSON.stringify(ROOT_LAYOUT.join('|'))});
+  const USER_ACTION = /(?<!\\\\):(hover|focus-visible|focus-within|focus|active)(?![\\w-])/g;
+  const PSEUDO_ELEMENT = /::?(before|after|marker|placeholder|selection|backdrop|file-selector-button|first-line|first-letter)(?![\\w-])/g;
+  const declaredByHost = (element) => {
+    for (let at = element; at && at !== root.parentElement; at = at.parentElement)
+      if (at.hasAttribute('data-et-control') && ownerOf(at) === null) return true;
+    return false;
+  };
+  const overrides = [];
+  const seen = new Set();
+  const check = (selector, style) => {
+    const properties = [...new Set(style.cssText.split(';').map((declaration) => declaration.split(':')[0].trim()).filter(Boolean))];
+    if (properties.length === 0) return;
+    let matched = [];
+    try {
+      matched = [...root.querySelectorAll(selector.replace(PSEUDO_ELEMENT, '').replace(USER_ACTION, ':where(*)'))];
+    } catch {
+      return;
+    }
+    for (const element of matched) {
+      const owner = ownerOf(element);
+      if (owner === null || declaredByHost(element)) continue;
+      const look = owner.at === element ? properties.filter((property) => !LAYOUT.test(property)) : properties;
+      const key = selector + ' ' + pathOf(element);
+      if (look.length === 0 || seen.has(key)) continue;
+      seen.add(key);
+      overrides.push({ owner: owner.key, selector, path: pathOf(element), properties: look });
+    }
+  };
+  const walk = (rules, parent) => {
+    for (const rule of rules) {
+      if (rule instanceof CSSStyleRule) {
+        const own = splitTop(rule.selectorText).map((selector) => nested(selector, parent));
+        for (const selector of own) check(selector, rule.style);
+        if (rule.cssRules && rule.cssRules.length > 0) walk(rule.cssRules, own.join(', '));
+      } else if (parent !== null && rule.constructor.name === 'CSSNestedDeclarations') check(parent, rule.style);
+      else if (rule.cssRules) walk(rule.cssRules, parent);
+    }
+  };
+  for (const text of ownCss) {
+    const sheet = new CSSStyleSheet();
+    try {
+      sheet.replaceSync(text);
+    } catch {
+      continue;
+    }
+    walk(sheet.cssRules, null);
+  }
+  return overrides;
+})`;
+/** A control root and every `data-et-control-part` whose nearest `data-et-control` is that root, in the page. */
+const controlPartsOf = `((control) => [
+  control,
+  ...[...control.querySelectorAll('[data-et-control-part]')].filter((part) => part.parentElement.closest('[data-et-control]') === control),
+])`;
+const seeFrame = (options) => `(() => {
+  const root = document.getElementById('root');
+  const refused = root.innerText.trim();
+  if (refused.startsWith('design-explore:')) return { refused: refused.split('\\n')[0] };
+  const ORIGIN = ${options.clip} ? root.getBoundingClientRect() : { left: -scrollX, top: -scrollY };
+  const frameBoxOf = (element) => {
+    const box = element.getBoundingClientRect();
+    return box.width > 0 && box.height > 0
+      ? { 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 OWN = ${JSON.stringify(options.part)};
+  const tokensOf = (element, name) => (element.getAttribute(name) ?? '').split(' ').filter(Boolean);
+  const ownerOf = (element) => {
+    const slotted = tokensOf(element, 'data-et-slot');
+    for (let at = element; at; at = at.parentElement)
+      for (const key of tokensOf(at, 'data-et-part')) {
+        const index = slotted.indexOf(key);
+        if (index >= 0) slotted.splice(index, 1);
+        else return key === OWN ? null : { key, at };
+      }
+    return null;
+  };
+  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 nested = (selector, parent) =>
+    parent === null ? selector : selector.includes('&') ? selector.replaceAll('&', ':is(' + parent + ')') : ':is(' + parent + ') ' + selector;
+  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 LOOK = ${JSON.stringify(LOOK_PROPERTIES)};
+  const lookOf = (element) => {
+    const own = LOOK.map((name) => getComputedStyle(element).getPropertyValue(name));
+    const inside = [...element.querySelectorAll('*')].map((child) => {
+      const style = getComputedStyle(child);
+      return LOOK.map((name) => style.getPropertyValue(name)).join(' ');
+    });
+    return JSON.stringify([own, [...new Set(inside)].sort()]);
+  };
+  const named = new Set([...root.querySelectorAll('[aria-activedescendant]')].filter((element) => ownerOf(element) === null).map((element) => element.getAttribute('aria-activedescendant')));
+  const isSelected = (element) =>
+    ['aria-selected', 'aria-checked', 'aria-pressed'].some((name) => element.getAttribute(name) === 'true') ||
+    (element.hasAttribute('aria-current') && element.getAttribute('aria-current') !== 'false');
+  const isDisabled = (element) =>
+    element.matches(':disabled') || element.getAttribute('aria-disabled') === 'true' || tokensOf(element, 'data-et-force').includes('disabled');
+  const isKeyboard = (element) => element.getAttribute('data-active-source') === 'keyboard';
+  let next = 0;
+  const tagged = (element) => {
+    const at = 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});
+    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,
+      selected: isSelected(element),
+      look: lookOf(element),
+    };
+  };
+  const controls = [...root.querySelectorAll('[data-et-control]')].filter((element) => ownerOf(element) === null).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(' '));
+    return {
+      id: element.getAttribute('data-et-control'),
+      disabled: parts.some(isDisabled),
+      keyboard: parts.some(isKeyboard),
+      frameBox: frameBoxOf(element),
+      ...tagged(element),
+    };
+  });
+  const surfaces = [...root.querySelectorAll('[data-et-surface]')].filter((element) => ownerOf(element) === null).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) })),
+  }));
+  const discover = ${options.discover};
+  return {
+    controls,
+    surfaces,
+    found: discover ? ${discoverControls}(root) : [],
+    overrides: discover ? ${findOverrides}(${JSON.stringify(options.ownCss)}) : [],
+  };
+})()`;
+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]) {
+    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, part, ownCss } = 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({ discover: frame.interaction === null, part, ownCss, clip: frame.clip })));
+            if ('refused' in found) {
+                refused.push(`${frame.state}: ${found.refused}`);
+                continue;
+            }
+            const forcedOf = (element) => __awaiter(void 0, void 0, void 0, function* () {
+                const forced = [];
+                for (const interaction of element.forced.filter((name) => FORCEABLE.has(name))) {
+                    if (!element.box) {
+                        forced.push({ interaction, differs: false });
+                        continue;
+                    }
+                    const shot = () => { var _a; return page.screenshot({ type: 'png', fullPage: true, clip: (_a = element.box) !== null && _a !== void 0 ? _a : undefined, animations: 'disabled' }); };
+                    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);
+                    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),
+                    });
+                }
+                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 }));
+            for (const surface of found.surfaces) {
+                const options = [];
+                for (const option of surface.options)
+                    options.push(Object.assign(Object.assign({ selected: option.selected, look: option.look, forced: yield forcedOf(option) }, (option.named ? { named: true } : {})), (option.keyboard ? { keyboard: true } : {})));
+                surfaces.push({ id: surface.id, shown: surface.shown, options });
+            }
+            seen.push({
+                state: frame.state,
+                interaction: frame.interaction,
+                controls,
+                surfaces,
+                found: found.found,
+                overrides: found.overrides,
+            });
+        }
+    }
+    finally {
+        yield context.close();
+    }
+    return { seen, refused };
+});
+/**
+ * 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;
+    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 }))
+        .then((module) => ({ module: module }))
+        .catch((error) => ({ error: error instanceof Error ? error.message : String(error) }));
+    if ('error' in loaded)
+        return loaded.error;
+    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 presets = Object.keys((_b = (_a = system.drawnOf(product.name, null)) === null || _a === void 0 ? void 0 : _a.presets) !== null && _b !== void 0 ? _b : {});
+    const preset = part.layer === 'pages' ? ((_c = presets[0]) !== null && _c !== void 0 ? _c : null) : null;
+    const width = preset === null ? ((_d = widths[0]) !== null && _d !== void 0 ? _d : null) : null;
+    const frames = [];
+    for (const state of states)
+        for (const interaction of [null, ...(restOnly ? [] : interactions)]) {
+            const frame = (0, shot_1.partFrameOf)({
+                system,
+                product: product.name,
+                part: key,
+                state,
+                preset,
+                width,
+                sketch,
+                interaction,
+            });
+            if (!(frame instanceof Error))
+                frames.push({
+                    state,
+                    interaction,
+                    search: frame.search.toString(),
+                    size: (_e = frame.size) !== null && _e !== void 0 ? _e : null,
+                    clip: preset === null,
+                });
+        }
+    const dir = (0, path_1.dirname)(part.file);
+    const ownCss = (0, fs_1.readdirSync)(dir)
+        .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 owner = (0, inventory_approval_1.partOwnerOf)({ product, part });
+    return {
+        definition,
+        states,
+        seen,
+        refused,
+        addresses: states.map((state) => ({ state, preset, width })),
+        owner,
+        hash: (0, baseline_1.partHashOf)({ product: owner, dir }),
+    };
+});
+exports.seePart = seePart;
+/** The control ids a page draws at rest, the set its inventory approval holds. */
+const inventoryIdsOf = (frames) => [
+    ...new Set(frames.filter((frame) => frame.interaction === null).flatMap((frame) => frame.controls.map(({ id }) => id))),
+].sort();
+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.
+ * 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.
+ */
+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 : [];
+    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}"`,
+        };
+    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 } = (_d = server.httpServer) === null || _d === void 0 ? void 0 : _d.address();
+        const checked = new Map();
+        const exceptions = [];
+        const gapsOfPart = (key, chain) => __awaiter(void 0, void 0, void 0, function* () {
+            const known = checked.get(key);
+            if (known !== undefined && !chain.includes(key))
+                return known;
+            const gaps = yield freshGapsOfPart(key, chain);
+            checked.set(key, gaps);
+            return gaps;
+        });
+        const freshGapsOfPart = (key, chain) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const resolved = 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 sight = yield (0, exports.seePart)({
+                product,
+                part: resolved,
+                system,
+                base: `http://localhost:${port}`,
+                load: (id) => server.ssrLoadModule(id),
+                draw: (job) => queue.run(job),
+                sketch,
+            });
+            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 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),
+                ...ownersOf(seen),
+            ];
+            for (const other of used)
+                if (other !== null && !(other in referenced))
+                    referenced[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,
+                }),
+            });
+            exceptions.push(...excepted.listed);
+            return [...refused.map((detail) => ({ code: 'RENDER', target: key, detail })), ...excepted.gaps];
+        });
+        const gaps = yield gapsOfPart(part, []);
+        if (typeof gaps === 'string')
+            return { problem: gaps };
+        return exceptions.length > 0 ? { gaps, exceptions } : { 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