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

package/src/lib/design/system/live-actions.js

@@ -0,0 +1,674 @@
+"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.checkLiveActions = exports.liveLineOf = exports.toggleSyncFailureOf = exports.liveStateCompareOf = exports.liveDriftOf = exports.liveOutcomeOf = exports.nearestControlOf = exports.controlNameOf = exports.listenOutputsScriptOf = exports.awaitEmitted = exports.liveControlsScriptOf = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const browser_1 = require("../browser");
+const serve_1 = require("../serve");
+const shot_1 = require("../shot");
+const thumb_1 = require("../thumb");
+const actions_1 = require("./actions");
+const action_press_1 = require("./action-press");
+const harness_shot_1 = require("./harness-shot");
+const live_compare_1 = require("./live-compare");
+const pointer_focus_1 = require("./pointer-focus");
+const reached_state_1 = require("./reached-state");
+const resolve_product_1 = require("./resolve-product");
+const system_modules_1 = require("./system-modules");
+const ownedScript = (shell) => `
+  const shellHost = document.querySelector(${JSON.stringify(shell)});
+  const shellRoot = shellHost && window.ng ? window.ng.getComponent(shellHost) : null;
+  const owned = (element) => {
+    let owner = window.ng.getOwningComponent(element);
+
+    for (let depth = 0; owner && depth < 100; depth++) {
+      if (owner === shellRoot) return true;
+      owner = window.ng.getOwningComponent(window.ng.getHostElement(owner));
+    }
+
+    return false;
+  };`;
+/**
+ * A script that scans the interactive elements under `roots` as the part check does and answers them with their
+ * centre relative to the first `frame` element, `aria-expanded`, `aria-current` and their `data-et-part` keys from the
+ * innermost out. With `shell` it keeps only the elements the shell component's view tree owns (Angular dev mode) and
+ * those in an overlay, whose host Angular creates outside any view.
+ */
+const liveControlsScriptOf = (options) => `(() => {
+  const scanned = ${(0, actions_1.actionScanScriptOf)(options.roots)};
+  ${options.shell === null ? 'const keep = () => true;' : `${ownedScript(options.shell)}\n  if (!window.ng) throw new Error('the app has no window.ng - the live action check needs a development build');\n  if (!shellRoot) return null;\n  const keep = (element) => owned(element) || !!element.closest(${JSON.stringify(action_press_1.OVERLAY_ROOTS)});`}
+  const frame = document.querySelector(${JSON.stringify(options.frame)})?.getBoundingClientRect() ?? { x: 0, y: 0 };
+  const counts = new Map();
+
+  return scanned.flatMap((found) => {
+    const element = document.querySelector('[data-et-action-probe="' + found.probe + '"]');
+
+    if (!element || !keep(element)) return [];
+
+    const box = element.getBoundingClientRect();
+    const parts = [];
+
+    for (let marked = element.closest('[data-et-part]'); marked; marked = marked.parentElement?.closest('[data-et-part]') ?? null)
+      parts.push(...(marked.getAttribute('data-et-part') ?? '').split(' ').filter(Boolean));
+
+    const occurrence = counts.get(found.key) ?? 0;
+
+    counts.set(found.key, occurrence + 1);
+
+    return [{
+      ...found,
+      occurrence,
+      x: Math.round(box.x + box.width / 2 - frame.x),
+      y: Math.round(box.y + box.height / 2 - frame.y),
+      expanded: element.getAttribute('aria-expanded'),
+      current: element.getAttribute('aria-current'),
+      overlay: !!element.closest(${JSON.stringify(action_press_1.OVERLAY_ROOTS)}),
+      parts,
+    }];
+  });
+})()`;
+exports.liveControlsScriptOf = liveControlsScriptOf;
+/** Waits after a press until the declared `output` fired or the page went quiet, then until its animations settle. */
+const awaitEmitted = (page, output) => __awaiter(void 0, void 0, void 0, function* () {
+    yield (0, action_press_1.awaitOutput)(page, output);
+    yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+});
+exports.awaitEmitted = awaitEmitted;
+/** A script that records each output the shell's components emit in `window.__etDesignEmits`. */
+const listenOutputsScriptOf = (shell) => `(() => {
+  ${ownedScript(shell)}
+  window.__etDesignEmits = [];
+  window.__etListened ??= new WeakSet();
+
+  for (const element of document.querySelectorAll('*')) {
+    const component = window.ng.getComponent(element);
+
+    if (!component || window.__etListened.has(component) || (component !== shellRoot && !owned(element))) continue;
+
+    window.__etListened.add(component);
+
+    for (const [output, property] of Object.entries(window.ng.getDirectiveMetadata(component)?.outputs ?? {}))
+      component[property]?.subscribe?.(() => window.__etDesignEmits.push({ output }));
+  }
+})()`;
+exports.listenOutputsScriptOf = listenOutputsScriptOf;
+const idOf = (control) => `${control.key}#${control.occurrence}`;
+/** The name a report line gives a control. */
+const controlNameOf = (control) => control.occurrence === 0 ? control.key : `${control.key} (${control.occurrence + 1}.)`;
+exports.controlNameOf = controlNameOf;
+/** The design control of the same key nearest to `app`, as both sit in their host box. */
+const nearestControlOf = (app, design) => design
+    .filter((candidate) => candidate.key === app.key)
+    .reduce((best, candidate) => best === null ||
+    Math.hypot(candidate.x - app.x, candidate.y - app.y) < Math.hypot(best.x - app.x, best.y - app.y)
+    ? candidate
+    : best, null);
+exports.nearestControlOf = nearestControlOf;
+/** What a press changed: the outputs it fired, the expanded controls after it, the controls that gained an `aria-current`, and the controls it added or removed. */
+const liveOutcomeOf = (options) => {
+    const { before, after } = options;
+    const currentBefore = new Map(before.map((control) => [idOf(control), control.current]));
+    const gained = after
+        .filter((control) => control.current !== null && currentBefore.get(idOf(control)) !== control.current)
+        .map((control) => `${(0, exports.controlNameOf)(control)}=${control.current}`);
+    const ids = (controls) => new Set(controls.map(idOf));
+    const had = ids(before);
+    const has = ids(after);
+    return {
+        emitted: [...new Set(options.emitted)].sort(),
+        expanded: after.filter((control) => control.expanded === 'true').map(exports.controlNameOf),
+        current: gained.length === 0 ? null : gained.join(', '),
+        added: after.filter((control) => !had.has(idOf(control))).map(exports.controlNameOf),
+        removed: before.filter((control) => !has.has(idOf(control))).map(exports.controlNameOf),
+    };
+};
+exports.liveOutcomeOf = liveOutcomeOf;
+const outcomeTextOf = (outcome, fields) => fields
+    .map((field) => {
+    const value = outcome[field];
+    return `${field} ${Array.isArray(value) ? (value.length > 0 ? value.join(', ') : 'none') : (value !== null && value !== void 0 ? value : 'unchanged')}`;
+})
+    .join('; ');
+/**
+ * The drift lines of the presses on several pages: a control, its declared action and input whose outcome differs
+ * between pages fails once, naming each page with what it did.
+ */
+const liveDriftOf = (presses) => {
+    var _a, _b;
+    const groups = new Map();
+    for (const press of [...presses].sort((a, b) => a.page.localeCompare(b.page))) {
+        const group = `${press.control}\n${(_a = press.action) !== null && _a !== void 0 ? _a : ''}\n${press.input}`;
+        groups.set(group, [...((_b = groups.get(group)) !== null && _b !== void 0 ? _b : []), press]);
+    }
+    return [...groups.values()].flatMap((group) => {
+        const first = group[0];
+        const distinct = new Set(group.map((press) => JSON.stringify(press.outcome)));
+        if (!first || group.length < 2)
+            return [];
+        const fields = Object.keys(first.outcome).filter((field) => new Set(group.map((press) => JSON.stringify(press.outcome[field]))).size > 1);
+        return [
+            {
+                page: 'drift',
+                element: first.control,
+                input: first.input,
+                parts: [...new Set(group.flatMap((press) => [press.page, ...press.parts]))],
+                failure: distinct.size === 1
+                    ? null
+                    : `behaves differently per page: ${group.map((press) => `${press.page}: ${outcomeTextOf(press.outcome, fields)}`).join(' | ')}`,
+            },
+        ];
+    });
+};
+exports.liveDriftOf = liveDriftOf;
+/** Whether the controls after a press show the `aria-expanded` values the declared state draws. */
+const liveStateCompareOf = (options) => {
+    const keys = Object.keys(options.expected);
+    if (keys.length === 0)
+        return {
+            ok: false,
+            detail: `state ${options.state} draws no aria-expanded control, so a live page cannot tell it`,
+        };
+    const wrong = keys.flatMap((key) => {
+        var _a, _b;
+        const found = (_b = (_a = options.after.find((control) => control.key === key)) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : 'absent';
+        return found === options.expected[key] ? [] : [`${key} aria-expanded ${found}, not ${options.expected[key]}`];
+    });
+    return { ok: wrong.length === 0, detail: wrong.join(', ') };
+};
+exports.liveStateCompareOf = liveStateCompareOf;
+/**
+ * Whether a toggle control that opens an overlay keeps its pressed or expanded state equal to the overlay's open state
+ * after every click; answers the first click where they part, or `null`.
+ */
+const toggleSyncFailureOf = (steps) => {
+    const first = steps[0];
+    if (!first || first.overlays === 0)
+        return null;
+    const attribute = first.pressed !== null ? 'aria-pressed' : first.expanded !== null ? 'aria-expanded' : null;
+    if (attribute === null)
+        return null;
+    for (const [index, step] of steps.entries()) {
+        const on = (attribute === 'aria-pressed' ? step.pressed : step.expanded) === 'true';
+        const open = step.overlays > 0;
+        if (on !== open)
+            return `click ${index + 1} leaves ${attribute} ${on}, but its overlay is ${open ? 'open' : 'closed'}`;
+    }
+    return null;
+};
+exports.toggleSyncFailureOf = toggleSyncFailureOf;
+/** The line `design actions --live` prints for one checked control and input. */
+const liveLineOf = ({ page, element, input, failure, warning }) => `${page} ${element}${input === null ? '' : ` ${input}`} ${failure === null ? `ok${warning ? ` (warning: ${warning})` : ''}` : `FAILED ${failure}`}`;
+exports.liveLineOf = liveLineOf;
+const LOCATE_TIMEOUT_MS = 5000;
+const LOCATE_POLL_MS = 100;
+const STABLE_SCANS = 3;
+const STABLE_POLL_MS = 250;
+const TOGGLE_CLICKS = 3;
+const overlayCountOf = (page) => __awaiter(void 0, void 0, void 0, function* () {
+    return (yield page.evaluate(`[...document.querySelectorAll(${JSON.stringify(action_press_1.OVERLAY_ROOTS)})].reduce((count, root) => count + root.children.length, 0)`));
+});
+const messageOf = (error) => (error instanceof Error ? error.message : String(error));
+/**
+ * Presses every shell control of the first live state of every live page with click, Enter and Space, checks that each
+ * reaches the action its page design declares (an output of a shell component fires, or the declared state's
+ * `aria-expanded` values show), and compares the outcome of each control across pages. With `part` it presses only the
+ * controls drawn by that part and keeps the lines of that page or part.
+ */
+const checkLiveActions = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const { target, config, product, url, part, onLine } = options;
+    const live = (0, live_compare_1.liveSpecOf)({ target, product });
+    if (typeof live === 'string')
+        return live;
+    const { spec, dir } = live;
+    if (spec.shell === undefined)
+        return `the live spec has no "shell" selector of the app's shell component`;
+    const presetName = (_a = Object.keys(product.presets)[0]) !== null && _a !== void 0 ? _a : '';
+    const presetSize = product.presets[presetName];
+    if ((presetSize === null || presetSize === void 0 ? void 0 : presetSize.height) === undefined)
+        return `the product has no preset "${presetName}" with a height`;
+    const size = { width: presetSize.width, height: presetSize.height };
+    const shell = spec.shell;
+    if (!(yield (0, browser_1.chromiumOf)(target)))
+        return 'actions needs playwright or playwright-core in the checkout';
+    const queue = (0, thumb_1.createDrawQueue)({ target });
+    const server = yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
+    let shooter;
+    try {
+        yield server.listen();
+        const base = `http://localhost:${((_b = server.httpServer) === null || _b === void 0 ? void 0 : _b.address()).port}`;
+        shooter = (0, shot_1.createPartShooter)({ target, base, system: (0, system_modules_1.createSystemModules)({ target, config }), queue });
+        const pictures = shooter;
+        const slotFill = spec.frame ? (0, live_compare_1.frameContentOf)((0, fs_1.readFileSync)((0, path_1.resolve)(dir, spec.frame))) : null;
+        const statesCache = new Map();
+        const statesOf = (key) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            const cached = statesCache.get(key);
+            if (cached)
+                return cached;
+            const file = (_a = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === key)) === null || _a === void 0 ? void 0 : _a.file;
+            const module = file
+                ? (yield server.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product: product.name })))
+                : {};
+            const loaded = (_b = module.default) === null || _b === void 0 ? void 0 : _b.states;
+            const names = loaded && typeof loaded === 'object' && !Array.isArray(loaded) ? Object.keys(loaded) : [];
+            statesCache.set(key, names);
+            return names;
+        });
+        const designControlsOf = (design) => __awaiter(void 0, void 0, void 0, function* () {
+            return queue.run((browser) => __awaiter(void 0, void 0, void 0, function* () {
+                const context = yield browser.newContext({ viewport: design.viewport, deviceScaleFactor: 1 });
+                try {
+                    const page = yield context.newPage();
+                    yield page.setContent(design.markup);
+                    return (yield page.evaluate((0, exports.liveControlsScriptOf)({ roots: ['body'], frame: design.frame, shell: null })));
+                }
+                finally {
+                    yield context.close();
+                }
+            }));
+        });
+        const targetCache = new Map();
+        const targetControlsOf = (owner, state) => {
+            var _a;
+            const key = `${owner}\n${state}`;
+            const cached = (_a = targetCache.get(key)) !== null && _a !== void 0 ? _a : (() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b;
+                const frame = (0, harness_shot_1.compareFrameOf)({ presets: product.presets, part: owner, preset: null });
+                const picture = yield pictures.pictureOf({
+                    product: product.name,
+                    part: owner,
+                    state,
+                    preset: typeof frame === 'string' ? null : frame.preset,
+                    width: null,
+                    sketch: null,
+                    interaction: null,
+                    bare: true,
+                    emptySlots: true,
+                    params: new URLSearchParams(),
+                });
+                return designControlsOf({
+                    markup: (_a = picture.markup) !== null && _a !== void 0 ? _a : '',
+                    frame: 'body',
+                    viewport: typeof frame === 'string' || !frame.size
+                        ? size
+                        : { width: frame.size.width, height: (_b = frame.size.height) !== null && _b !== void 0 ? _b : size.height },
+                });
+            }))();
+            targetCache.set(key, cached);
+            return cached;
+        };
+        const ownerOf = (state, parts) => __awaiter(void 0, void 0, void 0, function* () {
+            for (const candidate of parts)
+                if ((yield statesOf(candidate)).includes(state))
+                    return candidate;
+            return null;
+        });
+        const runs = Object.entries(spec.pages).flatMap(([name, page]) => {
+            const first = Object.values(page.states)[0];
+            return first ? [{ name, page, state: first, design: first.design }] : [];
+        });
+        const lines = [];
+        const kept = (line) => part === null || line.parts.includes(part);
+        const pushLine = (line) => {
+            lines.push(line);
+            if (kept(line))
+                onLine === null || onLine === void 0 ? void 0 : onLine(line);
+        };
+        const presses = [];
+        const press = (options) => __awaiter(void 0, void 0, void 0, function* () {
+            return queue.run((browser) => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                const context = yield browser.newContext(Object.assign({ viewport: size, deviceScaleFactor: 1 }, (spec.now !== undefined && { timezoneId: 'UTC' })));
+                try {
+                    yield context.addInitScript(action_press_1.INIT_SCRIPT);
+                    const { page, host } = yield (0, live_compare_1.openLivePage)({
+                        context,
+                        url,
+                        size,
+                        spec,
+                        dir,
+                        page: options.run.page,
+                        state: options.run.state,
+                        server: base,
+                        checkout: target,
+                        timeout: thumb_1.DRAW_TIMEOUT_MS,
+                    });
+                    const scan = () => __awaiter(void 0, void 0, void 0, function* () {
+                        return (yield page.evaluate((0, exports.liveControlsScriptOf)({ roots: [host, action_press_1.OVERLAY_ROOTS], frame: host, shell })));
+                    });
+                    const locate = (want) => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a;
+                        const deadline = Date.now() + LOCATE_TIMEOUT_MS;
+                        for (;;) {
+                            const found = (_a = (yield scan())) === null || _a === void 0 ? void 0 : _a.find((control) => control.key === want.key && control.occurrence === want.occurrence);
+                            if (found)
+                                return page.locator(`[data-et-action-probe="${found.probe}"]`);
+                            if (Date.now() > deadline)
+                                throw new live_compare_1.LiveError(`the page has no ${(0, exports.controlNameOf)(want)} after a fresh load`);
+                            yield page.waitForTimeout(LOCATE_POLL_MS);
+                        }
+                    });
+                    const stableScan = () => __awaiter(void 0, void 0, void 0, function* () {
+                        const deadline = Date.now() + thumb_1.DRAW_TIMEOUT_MS;
+                        let last = '';
+                        let same = 0;
+                        yield page.waitForLoadState('networkidle', { timeout: thumb_1.DRAW_TIMEOUT_MS }).catch(() => undefined);
+                        for (;;) {
+                            const controls = yield scan();
+                            const shape = JSON.stringify(controls === null || controls === void 0 ? void 0 : controls.map(({ key, occurrence, expanded, current }) => [key, occurrence, expanded, current]));
+                            same = shape === last ? same + 1 : 0;
+                            last = shape;
+                            if (same >= STABLE_SCANS - 1 || Date.now() > deadline)
+                                return controls !== null && controls !== void 0 ? controls : [];
+                            yield page.waitForTimeout(STABLE_POLL_MS);
+                        }
+                    });
+                    yield page.mouse.move(-1, -1);
+                    yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                    yield stableScan();
+                    if (options.opener) {
+                        yield (yield locate(options.opener)).click({ timeout: thumb_1.DRAW_TIMEOUT_MS });
+                        yield page.mouse.move(-1, -1);
+                        yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                    }
+                    const before = yield stableScan();
+                    const control = yield locate(options.pick);
+                    yield page.evaluate((0, exports.listenOutputsScriptOf)(shell));
+                    yield page.evaluate('window.__etPrevented = [];');
+                    let clickRing = null;
+                    let clickThenKeyRing = null;
+                    let keyboardRing = null;
+                    const overlaysBefore = options.input === 'click' ? yield overlayCountOf(page) : 0;
+                    const toggleSteps = [];
+                    const readToggle = () => __awaiter(void 0, void 0, void 0, function* () {
+                        return toggleSteps.push(Object.assign(Object.assign({}, (yield control.evaluate((element) => ({
+                            pressed: element.getAttribute('aria-pressed'),
+                            expanded: element.getAttribute('aria-expanded'),
+                        })))), { overlays: (yield overlayCountOf(page)) - overlaysBefore }));
+                    });
+                    if (options.input === 'dblclick') {
+                        yield (0, action_press_1.watchMutations)(page);
+                        yield control.dblclick({ timeout: thumb_1.DRAW_TIMEOUT_MS });
+                        yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                        yield page.mouse.move(-1, -1);
+                    }
+                    else if (options.input === 'click') {
+                        yield (0, pointer_focus_1.tabAwayFrom)(page, control);
+                        yield (0, action_press_1.watchMutations)(page);
+                        yield control.click({ timeout: thumb_1.DRAW_TIMEOUT_MS });
+                        yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                        yield readToggle();
+                        clickRing = yield (0, pointer_focus_1.ringProbeOrNullOf)(control);
+                        if (clickRing) {
+                            clickThenKeyRing = yield (0, pointer_focus_1.readRingAfterKey)({
+                                page,
+                                locator: control,
+                                settle: (settled) => (0, action_press_1.settle)(settled, thumb_1.DRAW_TIMEOUT_MS),
+                            });
+                        }
+                        yield page.mouse.move(-1, -1);
+                    }
+                    else {
+                        const before = (_a = (yield (0, pointer_focus_1.ringProbeOrNullOf)(control))) === null || _a === void 0 ? void 0 : _a.style;
+                        yield page.keyboard.press('Shift');
+                        yield control.focus({ timeout: thumb_1.DRAW_TIMEOUT_MS });
+                        if (options.input === 'Enter') {
+                            yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                            const probe = yield (0, pointer_focus_1.ringProbeOrNullOf)(control);
+                            keyboardRing = before && probe ? { before, probe } : null;
+                        }
+                        yield (0, action_press_1.watchMutations)(page);
+                        yield page.keyboard.press(options.input);
+                    }
+                    yield (0, exports.awaitEmitted)(page, options.output);
+                    const emitted = (yield page.evaluate('(window.__etDesignEmits ?? []).map((emit) => emit.output)'));
+                    const prevented = (yield page.evaluate('window.__etPrevented')).length > 0;
+                    const after = yield stableScan();
+                    const first = toggleSteps[0];
+                    const isToggle = !!first && first.overlays > 0 && (first.pressed !== null || first.expanded !== null);
+                    if (isToggle) {
+                        for (let click = 0; click < TOGGLE_CLICKS - 1; click++) {
+                            yield control.click({ timeout: thumb_1.DRAW_TIMEOUT_MS });
+                            yield page.mouse.move(-1, -1);
+                            yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                            yield readToggle();
+                        }
+                    }
+                    return {
+                        before,
+                        after,
+                        emitted,
+                        prevented,
+                        clickRing,
+                        clickThenKeyRing,
+                        keyboardRing,
+                        toggle: isToggle ? (0, exports.toggleSyncFailureOf)(toggleSteps) : undefined,
+                    };
+                }
+                finally {
+                    yield context.close();
+                }
+            }));
+        });
+        const check = (run, controls) => __awaiter(void 0, void 0, void 0, function* () {
+            const found = [];
+            yield Promise.all(controls.map((_a) => __awaiter(void 0, [_a], void 0, function* ({ app, declared, owner, parts, opener }) {
+                const name = (0, exports.controlNameOf)(app);
+                const action = declared === null
+                    ? null
+                    : declared
+                        .trim()
+                        .replace(/^dblclick:/u, '')
+                        .startsWith('emit:')
+                        ? (0, actions_1.parseAction)(declared, [])
+                        : owner === null
+                            ? `data-et-action="${declared}" names no state of ${parts.join(', ') || 'its part'}`
+                            : (0, actions_1.parseAction)(declared, yield statesOf(owner));
+                if (action === null || typeof action === 'string') {
+                    pushLine({
+                        page: run.name,
+                        element: name,
+                        input: null,
+                        parts,
+                        failure: action !== null && action !== void 0 ? action : 'the page design declares no data-et-action for it',
+                    });
+                }
+                const rings = { click: null, keyboard: null };
+                let toggle;
+                yield Promise.all((0, actions_1.actionInputsOf)(app.key, action).map((input) => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a, _b, _c, _d, _e, _f;
+                    try {
+                        const result = yield press({
+                            run,
+                            opener,
+                            pick: app,
+                            input,
+                            output: typeof action === 'object' && (action === null || action === void 0 ? void 0 : action.kind) === 'emit' ? action.output : null,
+                        });
+                        const outcome = (0, exports.liveOutcomeOf)(result);
+                        (_a = rings.click) !== null && _a !== void 0 ? _a : (rings.click = result.clickRing);
+                        (_b = rings.clickThenKey) !== null && _b !== void 0 ? _b : (rings.clickThenKey = result.clickThenKeyRing);
+                        (_c = rings.keyboard) !== null && _c !== void 0 ? _c : (rings.keyboard = result.keyboardRing);
+                        if (input === 'click')
+                            toggle = result.toggle;
+                        presses.push({ page: run.name, control: name, action: declared, input, outcome, parts });
+                        if (input === 'click' &&
+                            action !== null &&
+                            typeof action !== 'string' &&
+                            action.kind === 'state' &&
+                            owner !== null) {
+                            const reached = yield targetControlsOf(owner, action.state);
+                            for (const added of result.after.filter((control) => control.overlay && !result.before.some((had) => idOf(had) === idOf(control)))) {
+                                const drawn = reached.find((control) => control.key === added.key && control.occurrence === added.occurrence);
+                                found.push({
+                                    app: added,
+                                    declared: (_d = drawn === null || drawn === void 0 ? void 0 : drawn.action) !== null && _d !== void 0 ? _d : null,
+                                    owner: (drawn === null || drawn === void 0 ? void 0 : drawn.action) ? yield ownerOf(drawn.action, [owner, ...drawn.parts]) : null,
+                                    parts: [...new Set([...((_e = drawn === null || drawn === void 0 ? void 0 : drawn.parts) !== null && _e !== void 0 ? _e : []), ...parts])],
+                                    opener: app,
+                                });
+                            }
+                        }
+                        if (action === null || typeof action === 'string')
+                            return;
+                        const expectedOf = (state) => __awaiter(void 0, void 0, void 0, function* () {
+                            return Object.fromEntries(owner === null
+                                ? []
+                                : (yield targetControlsOf(owner, state)).flatMap((control) => control.expanded === null ? [] : [[control.key, control.expanded]]));
+                        });
+                        const compare = action.kind === 'state' && owner !== null
+                            ? (0, exports.liveStateCompareOf)({
+                                state: action.state,
+                                expected: yield expectedOf(action.state),
+                                after: result.after,
+                            })
+                            : null;
+                        const reached = action.kind === 'state' && owner !== null && compare && !compare.ok
+                            ? yield (0, reached_state_1.reachedExpandedStateOf)({
+                                goal: action.state,
+                                states: yield statesOf(owner),
+                                expectedOf,
+                                after: result.after,
+                            })
+                            : null;
+                        pushLine({
+                            page: run.name,
+                            element: name,
+                            input,
+                            parts,
+                            failure: (0, actions_1.actionFailureOf)({
+                                action,
+                                target: action.kind === 'state' ? action.state : '',
+                                input,
+                                outcome: { emitted: result.emitted, prevented: result.prevented, compare, reached },
+                            }),
+                        });
+                    }
+                    catch (error) {
+                        pushLine({
+                            page: run.name,
+                            element: name,
+                            input,
+                            parts,
+                            failure: (_f = messageOf(error).split('\n')[0]) !== null && _f !== void 0 ? _f : '',
+                        });
+                    }
+                })));
+                if (toggle !== undefined) {
+                    pushLine({ page: run.name, element: `${name} toggle`, input: null, parts, failure: toggle });
+                }
+                if (rings.click !== null) {
+                    const { failure, warning } = (0, pointer_focus_1.pointerFocusVerdictOf)(Object.assign(Object.assign({}, rings), { activatable: declared !== null }));
+                    pushLine({ page: run.name, element: `${name} pointer focus`, input: null, parts, failure, warning });
+                }
+            })));
+            return found;
+        });
+        yield Promise.all(runs.map((run) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            try {
+                const picture = yield pictures.pictureOf({
+                    product: product.name,
+                    part: run.name,
+                    state: run.design,
+                    preset: presetName,
+                    width: null,
+                    sketch: null,
+                    interaction: null,
+                    pan: (_a = run.state.pan) !== null && _a !== void 0 ? _a : null,
+                    emptySlots: slotFill !== null,
+                    slotFill,
+                    compose: (_b = run.state.compose) !== null && _b !== void 0 ? _b : null,
+                    params: new URLSearchParams(),
+                });
+                const design = yield designControlsOf({
+                    markup: (_c = picture.markup) !== null && _c !== void 0 ? _c : '',
+                    frame: `[data-et-part~="${run.name}"]`,
+                    viewport: size,
+                });
+                const app = yield queue.run((browser) => __awaiter(void 0, void 0, void 0, function* () {
+                    const context = yield browser.newContext({ viewport: size, deviceScaleFactor: 1 });
+                    try {
+                        const { page, host } = yield (0, live_compare_1.openLivePage)({
+                            context,
+                            url,
+                            size,
+                            spec,
+                            dir,
+                            page: run.page,
+                            state: run.state,
+                            server: base,
+                            checkout: target,
+                            timeout: thumb_1.DRAW_TIMEOUT_MS,
+                        });
+                        yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                        return (yield page.evaluate((0, exports.liveControlsScriptOf)({ roots: [host, action_press_1.OVERLAY_ROOTS], frame: host, shell })));
+                    }
+                    finally {
+                        yield context.close();
+                    }
+                }));
+                if (app === null) {
+                    pushLine({
+                        page: run.name,
+                        element: `(no ${shell} on the page)`,
+                        input: null,
+                        parts: [run.name],
+                        failure: null,
+                    });
+                    return;
+                }
+                const relevant = (parts) => part === null || part === run.name || parts.includes(part);
+                const controls = yield Promise.all(app.map((control) => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a, _b, _c;
+                    const drawn = (0, exports.nearestControlOf)(control, design);
+                    const parts = [run.name, ...((_a = drawn === null || drawn === void 0 ? void 0 : drawn.parts) !== null && _a !== void 0 ? _a : [])];
+                    const declared = (_b = drawn === null || drawn === void 0 ? void 0 : drawn.action) !== null && _b !== void 0 ? _b : null;
+                    return {
+                        app: control,
+                        declared,
+                        owner: declared === null ? null : yield ownerOf(declared.trim(), (_c = drawn === null || drawn === void 0 ? void 0 : drawn.parts) !== null && _c !== void 0 ? _c : []),
+                        parts,
+                        opener: null,
+                    };
+                })));
+                const reached = yield check(run, controls.filter((control) => relevant(control.parts)));
+                const unique = [...new Map(reached.map((control) => [idOf(control.app), control])).values()];
+                yield check(run, unique.filter((control) => relevant(control.parts)));
+            }
+            catch (error) {
+                pushLine({
+                    page: run.name,
+                    element: '-',
+                    input: null,
+                    parts: [run.name],
+                    failure: error instanceof live_compare_1.LiveError ? error.message : ((_d = messageOf(error).split('\n')[0]) !== null && _d !== void 0 ? _d : ''),
+                });
+            }
+        })));
+        const order = (line) => `${line.page}\n${line.element}\n${line.input === null ? '' : actions_1.ACTION_INPUTS.indexOf(line.input)}`;
+        return {
+            lines: [...lines.sort((a, b) => order(a).localeCompare(order(b))), ...(0, exports.liveDriftOf)(presses)].filter(kept),
+        };
+    }
+    catch (error) {
+        return messageOf(error);
+    }
+    finally {
+        yield (shooter === null || shooter === void 0 ? void 0 : shooter.close());
+        yield queue.close();
+        yield server.close();
+    }
+});
+exports.checkLiveActions = checkLiveActions;
+//# sourceMappingURL=live-actions.js.map