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

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

@@ -0,0 +1,816 @@
+"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.designActions = exports.PART_HARNESS_ONLY = exports.partActionFailuresOf = exports.unlinkedSkipLineOf = exports.hostLineOf = exports.actionLineOf = exports.checkActions = exports.runActionInput = exports.ACTIONS_USAGE = void 0;
+const crypto_1 = require("crypto");
+const no_verdict_1 = require("./no-verdict");
+const fs_1 = require("fs");
+const os_1 = require("os");
+const path_1 = require("path");
+const browser_1 = require("../browser");
+const phase_timing_1 = require("../phase-timing");
+const vite_cache_1 = require("../vite-cache");
+const serve_1 = require("../serve");
+const shot_1 = require("../shot");
+const timings_1 = require("../timings");
+const action_cache_1 = require("./action-cache");
+const code_hash_1 = require("../code-hash");
+const compare_cache_1 = require("./compare-cache");
+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 component_outputs_1 = require("./component-outputs");
+const live_actions_1 = require("./live-actions");
+const pointer_focus_1 = require("./pointer-focus");
+const reached_state_1 = require("./reached-state");
+const live_compare_1 = require("./live-compare");
+const harness_map_1 = require("./harness-map");
+const in_order_at_once_1 = require("./in-order-at-once");
+const harness_server_1 = require("./harness-server");
+const part_compare_1 = require("./part-compare");
+const resolve_product_1 = require("./resolve-product");
+const cli_args_1 = require("./sketch/cli-args");
+const part_definition_1 = require("./sketch/part-definition");
+const sketch_1 = require("./sketch/sketch");
+const system_modules_1 = require("./system-modules");
+exports.ACTIONS_USAGE = 'actions <layer>/<name> --product <name> [--url <app dev server url>] [--state <name>] | actions [<layer>/<name>] --product <name> --live [--url <app build url>]';
+const ROOM_PX = 1024;
+const ACTION_BATCH_STATES = 4;
+const sha256Of = (text) => (0, crypto_1.createHash)('sha256').update(text).digest('hex');
+const messageOf = (error) => (error instanceof Error ? error.message : String(error));
+const scanOf = (page, roots) => __awaiter(void 0, void 0, void 0, function* () { return (yield page.evaluate((0, actions_1.actionScanScriptOf)(roots))); });
+const noSuchElementOf = (nearMisses) => {
+    const named = nearMisses.map((near) => `${(0, actions_1.elementNameOf)(near)}${near.owners[0] === undefined ? '' : ` in ${near.owners[0]}`}`);
+    return named.length === 0
+        ? 'the design draws no such element, so it declares no action'
+        : `the design draws no element of this name - it draws ${named.join(', ')}: the accessible names differ`;
+};
+const probeOf = (probe) => `[data-et-action-probe="${probe}"]`;
+/**
+ * Waits until the harness host shows and holds the mounted part: a page-layout host fills the viewport before the
+ * lazily loaded part renders into it.
+ */
+const harnessMountedOf = (page, timeout) => __awaiter(void 0, void 0, void 0, function* () {
+    yield page.locator(part_compare_1.HARNESS_HOST_SELECTOR).first().waitFor({ state: 'visible', timeout });
+    yield page.locator(`${part_compare_1.HARNESS_HOST_SELECTOR} > *`).first().waitFor({ state: 'attached', timeout });
+});
+const expandedScanOf = (page, roots) => __awaiter(void 0, void 0, void 0, function* () {
+    return (yield page.evaluate(`${(0, actions_1.actionScanScriptOf)(roots)}.map((found) => ({ key: found.key, expanded: document.querySelector('[data-et-action-probe="' + found.probe + '"]')?.getAttribute('aria-expanded') ?? null }))`));
+});
+const shotOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { page, size, room, timeout } = options;
+    const host = page.locator(part_compare_1.HARNESS_HOST_SELECTOR).first();
+    if (size && (yield page.locator(part_compare_1.OVERLAY_PANES).count()) === 0) {
+        const origin = yield host.evaluate((element) => {
+            const { x, y } = element.getBoundingClientRect();
+            return { x: Math.round(x + scrollX), y: Math.round(y + scrollY) };
+        });
+        yield page.evaluate((0, shot_1.checkerScriptOf)(origin));
+        return yield host.screenshot({ type: 'png', animations: 'disabled', timeout });
+    }
+    yield host.scrollIntoViewIfNeeded({ timeout });
+    const clip = (0, shot_1.pixelBoxOf)((yield page.evaluate((0, part_compare_1.hostBoxScriptOf)({ up: room }))));
+    yield page.evaluate((0, shot_1.checkerScriptOf)(clip));
+    return yield page.screenshot({ type: 'png', fullPage: true, animations: 'disabled', clip, timeout });
+});
+/**
+ * Loads the harness page of `start`, clicks its opener, then presses `input` on the element `pick` names and returns
+ * the outputs it fired, whether its keydown default was prevented, and the host shot when `shoot` asks for one. The
+ * outputs include those of the components under the `listen` selectors; `expanded` adds each element's
+ * `aria-expanded` after the press. The wait for outputs ends as soon as `output` fired or the page settled.
+ */
+const runActionInput = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const { browser, url, start, pick, input, size, shoot, timeout, listen = [], expanded = false } = options;
+    const room = !!shoot && !size && shoot.room;
+    const viewport = (0, shot_1.viewportOf)(size);
+    const context = yield browser.newContext({
+        viewport: room ? { width: viewport.width + ROOM_PX, height: viewport.height + ROOM_PX } : viewport,
+        deviceScaleFactor: 1,
+    });
+    try {
+        yield context.addInitScript(action_press_1.INIT_SCRIPT);
+        const page = yield context.newPage();
+        yield page.goto(url, { timeout });
+        yield harnessMountedOf(page, timeout);
+        yield (0, thumb_1.awaitFonts)(page);
+        if (room)
+            yield page.evaluate(`document.documentElement.style.padding = '${ROOM_PX}px 0 0 ${ROOM_PX}px'`);
+        yield page.mouse.move(-1, -1);
+        const roots = [part_compare_1.HARNESS_HOST_SELECTOR, action_press_1.OVERLAY_ROOTS];
+        if (start.opener !== null) {
+            const opener = (yield scanOf(page, [part_compare_1.HARNESS_HOST_SELECTOR])).find((element) => element.key === start.opener);
+            if (!opener)
+                throw new Error(`the app has no ${start.opener} to open state ${start.state} with`);
+            yield page.locator(probeOf(opener.probe)).click({ timeout });
+            yield page.mouse.move(-1, -1);
+            yield (0, action_press_1.settle)(page, timeout);
+        }
+        const element = (yield scanOf(page, roots)).find((found) => found.key === pick.key && found.occurrence === pick.occurrence);
+        if (!element)
+            throw new Error('the element is gone after a fresh load');
+        yield page.evaluate('window.__etPrevented = []; (window.__etDesignEmits ?? []).length = 0;');
+        const listened = listen.length > 0 ? (yield page.evaluate((0, actions_1.listenEmbeddedScriptOf)(listen))) : 0;
+        const target = page.locator(probeOf(element.probe));
+        yield (0, action_press_1.watchMutations)(page);
+        if (input === 'click' || input === 'dblclick') {
+            yield (input === 'click' ? target.click({ timeout }) : target.dblclick({ timeout }));
+            yield page.mouse.move(-1, -1);
+        }
+        else {
+            yield page.keyboard.press('Shift');
+            yield target.focus({ timeout });
+            yield page.keyboard.press(input);
+        }
+        yield (0, action_press_1.awaitOutput)(page, (_a = options.output) !== null && _a !== void 0 ? _a : null);
+        yield (0, action_press_1.settle)(page, timeout);
+        if (shoot && input !== 'click' && input !== 'dblclick' && !options.focused) {
+            yield (0, action_press_1.dropKeyboardFocus)(page);
+            yield (0, action_press_1.settle)(page, timeout);
+        }
+        const emitted = (yield page.evaluate('(window.__etDesignEmits ?? []).map((emit) => emit.output)'));
+        const embedded = listened > 0 ? (yield page.evaluate('window.__etEmbeddedEmits')) : [];
+        const prevented = (yield page.evaluate('window.__etPrevented')).length > 0;
+        const after = expanded ? yield expandedScanOf(page, roots) : null;
+        const app = shoot ? yield shotOf({ page, size, room, timeout }) : null;
+        return Object.assign({ emitted: [...emitted, ...embedded], prevented, app }, (after && { after }));
+    }
+    finally {
+        yield context.close();
+    }
+});
+exports.runActionInput = runActionInput;
+/** Presses each interactive element of each start state of a part on the app's harness page and checks its declared action. */
+const checkActions = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d, _e;
+    const { target, config, product, part, url, only, onLine } = options;
+    const frame = (0, harness_shot_1.compareFrameOf)({ presets: product.presets, part, preset: null });
+    if (typeof frame === 'string')
+        return frame;
+    const chromium = yield (0, browser_1.chromiumOf)(target);
+    if (!chromium)
+        return 'actions needs playwright or playwright-core in the checkout';
+    const server = yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
+    const store = server.shotStore((0, vite_cache_1.viteCacheOf)(target, compare_cache_1.COMPARE_DESIGN_SHOTS), (0, compare_cache_1.browserVersionOf)(chromium.from));
+    let browser;
+    const closeBrowser = () => __awaiter(void 0, void 0, void 0, function* () {
+        const open = browser;
+        browser = undefined;
+        yield (open === null || open === void 0 ? void 0 : open.shooter.close());
+        yield (open === null || open === void 0 ? void 0 : open.queue.close());
+    });
+    try {
+        yield server.listen();
+        const { port } = (_a = server.httpServer) === null || _a === void 0 ? void 0 : _a.address();
+        const system = (0, system_modules_1.createSystemModules)({ target, config });
+        const freshBrowser = () => __awaiter(void 0, void 0, void 0, function* () {
+            yield closeBrowser();
+            const queue = (0, thumb_1.createDrawQueue)({ target });
+            browser = {
+                queue,
+                shooter: (0, shot_1.createPartShooter)({ target, base: `http://localhost:${port}`, system, queue, store }),
+            };
+            return browser;
+        });
+        const file = (_c = (_b = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part)) === null || _b === void 0 ? void 0 : _b.file) !== null && _c !== void 0 ? _c : '';
+        const module = (yield server.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product: product.name })));
+        const loaded = (_d = module.default) === null || _d === void 0 ? void 0 : _d.states;
+        const states = loaded && typeof loaded === 'object' && !Array.isArray(loaded) ? loaded : {};
+        const names = Object.keys(states);
+        const appOutputs = (() => {
+            var _a;
+            const found = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part);
+            const link = found ? (0, part_definition_1.partLinkOf)(found.source) : null;
+            const component = (link === null || link === void 0 ? void 0 : link.kind) === 'component' ? link.path : (link === null || link === void 0 ? void 0 : link.kind) === 'route' ? ((_a = link.component) !== null && _a !== void 0 ? _a : null) : null;
+            const source = component === null ? null : (0, path_1.resolve)(target, component);
+            return source && (0, fs_1.existsSync)(source) ? (0, component_outputs_1.componentOutputsOf)((0, fs_1.readFileSync)(source, 'utf8')) : null;
+        })();
+        if (only !== null && !(only in states))
+            return `${part} has no state "${only}" - its states: ${names.join(', ')}`;
+        let embedders;
+        const embeddersOfPart = () => (embedders !== null && embedders !== void 0 ? embedders : (embedders = Promise.all(product.parts.map((candidate) => __awaiter(void 0, void 0, void 0, function* () {
+            const id = (0, system_modules_1.productModuleIdOf)({ file: candidate.file, product: product.name });
+            const controls = yield server.ssrLoadModule(id).then((loaded) => { var _a; return (_a = loaded.default) === null || _a === void 0 ? void 0 : _a.controls; }, () => undefined);
+            return [(0, resolve_product_1.partKeyOf)(candidate), controls];
+        }))).then((entries) => (0, actions_1.embeddersOf)({ part, controls: Object.fromEntries(entries) }))));
+        let { queue, shooter } = yield freshBrowser();
+        const designs = new Map();
+        const draw = (state, opened = null) => {
+            var _a;
+            const key = opened === null ? state : `${state}\n${JSON.stringify(opened)}`;
+            const drawn = (_a = designs.get(key)) !== null && _a !== void 0 ? _a : shooter.pictureOf(Object.assign(Object.assign({ product: product.name, part,
+                state, preset: frame.preset, width: null, sketch: null, interaction: null, bare: true, emptySlots: true, checker: true }, (opened && { compose: { [part]: opened } })), { params: new URLSearchParams() }));
+            designs.set(key, drawn);
+            drawn.catch(() => designs.get(key) === drawn && designs.delete(key));
+            return drawn;
+        };
+        yield options.designsDrawn;
+        yield (0, phase_timing_1.timedPhase)('actions-designs', () => Promise.all(names.map((state) => draw(state))));
+        const markups = new Map(yield Promise.all([...designs].map((_a) => __awaiter(void 0, [_a], void 0, function* ([state, design]) { var _b; return [state, (_b = (yield design).markup) !== null && _b !== void 0 ? _b : '']; }))));
+        const opens = (0, part_compare_1.pointerOpensOf)({
+            states,
+            controls: (_e = module.default) === null || _e === void 0 ? void 0 : _e.controls,
+            drawn: Object.fromEntries([...markups].map(([state, markup]) => [state, (0, part_compare_1.drawnSurfacesOf)(markup)])),
+        });
+        const designScan = (state) => __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({ viewport: (0, shot_1.viewportOf)(frame.size) });
+                try {
+                    const page = yield context.newPage();
+                    yield page.setContent((_a = markups.get(state)) !== null && _a !== void 0 ? _a : '');
+                    const found = yield scanOf(page, ['body']);
+                    const owners = (yield page.evaluate((0, actions_1.embeddedOwnersScriptOf)(part)));
+                    const within = (yield page.evaluate((0, actions_1.enclosingControlsScriptOf)()));
+                    return found.map((element) => {
+                        var _a, _b;
+                        return (Object.assign(Object.assign({}, element), { owners: (_a = owners[String(element.probe)]) !== null && _a !== void 0 ? _a : [], within: (_b = within[String(element.probe)]) !== null && _b !== void 0 ? _b : [] }));
+                    });
+                }
+                finally {
+                    yield context.close();
+                }
+            }));
+        });
+        const embedded = new Map();
+        const embeddedOf = (key) => {
+            var _a;
+            const cached = (_a = embedded.get(key)) !== null && _a !== void 0 ? _a : (() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b;
+                const found = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === key);
+                const loaded = found
+                    ? (_a = (yield server.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file: found.file, product: product.name }))).default) === null || _a === void 0 ? void 0 : _a.states
+                    : undefined;
+                const link = found ? (0, part_definition_1.partLinkOf)(found.source) : null;
+                const component = (link === null || link === void 0 ? void 0 : link.kind) === 'component' ? link.path : (link === null || link === void 0 ? void 0 : link.kind) === 'route' ? ((_b = link.component) !== null && _b !== void 0 ? _b : null) : null;
+                const file = component === null ? null : (0, path_1.resolve)(target, component);
+                return {
+                    part: key,
+                    states: loaded && typeof loaded === 'object' && !Array.isArray(loaded) ? Object.keys(loaded) : [],
+                    selector: file && (0, fs_1.existsSync)(file) ? (0, actions_1.componentSelectorOf)((0, fs_1.readFileSync)(file, 'utf8')) : null,
+                };
+            }))();
+            embedded.set(key, cached);
+            return cached;
+        };
+        const expectedCache = new Map();
+        const expectedOf = (owner, state) => {
+            var _a;
+            const key = `${owner}\n${state}`;
+            const cached = (_a = expectedCache.get(key)) !== null && _a !== void 0 ? _a : (() => __awaiter(void 0, void 0, void 0, function* () {
+                const ownerFrame = (0, harness_shot_1.compareFrameOf)({ presets: product.presets, part: owner, preset: null });
+                const size = typeof ownerFrame === 'string' ? null : ownerFrame.size;
+                const picture = yield shooter.pictureOf({
+                    product: product.name,
+                    part: owner,
+                    state,
+                    preset: typeof ownerFrame === 'string' ? null : ownerFrame.preset,
+                    width: null,
+                    sketch: null,
+                    interaction: null,
+                    bare: true,
+                    emptySlots: true,
+                    params: new URLSearchParams(),
+                });
+                return queue.run((browser) => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a;
+                    const context = yield browser.newContext({ viewport: (0, shot_1.viewportOf)(size) });
+                    try {
+                        const page = yield context.newPage();
+                        yield page.setContent((_a = picture.markup) !== null && _a !== void 0 ? _a : '');
+                        return Object.fromEntries((yield expandedScanOf(page, ['body'])).flatMap(({ key, expanded }) => expanded === null ? [] : [[key, expanded]]));
+                    }
+                    finally {
+                        yield context.close();
+                    }
+                }));
+            }))();
+            expectedCache.set(key, cached);
+            return cached;
+        };
+        let dir = null;
+        const printOf = (dep) => __awaiter(void 0, void 0, void 0, function* () {
+            return dep.kind === 'draw'
+                ? sha256Of((yield draw(dep.state, dep.opened)).png)
+                : dep.kind === 'expected'
+                    ? sha256Of(JSON.stringify(yield expectedOf(dep.owner, dep.state)))
+                    : sha256Of(JSON.stringify(yield embeddersOfPart()));
+        });
+        const checkState = (state_1, ...args_1) => __awaiter(void 0, [state_1, ...args_1], void 0, function* (state, track = () => undefined) {
+            var _a, _b, _c, _d, _e;
+            const tracked = (dep, value) => __awaiter(void 0, void 0, void 0, function* () {
+                const resolved = yield value;
+                track(dep, yield printOf(dep));
+                return resolved;
+            });
+            const drawFor = (drawn, opened) => tracked({ kind: 'draw', state: drawn, opened }, draw(drawn, opened));
+            const expectedFor = (owner, expected) => tracked({ kind: 'expected', owner, state: expected }, expectedOf(owner, expected));
+            const embeddersFor = () => tracked({ kind: 'embedders' }, embeddersOfPart());
+            let wrotePictures = false;
+            const lines = [];
+            const pushLine = (line) => {
+                lines.push(line);
+                onLine === null || onLine === void 0 ? void 0 : onLine(line);
+            };
+            const open = opens[state];
+            if (typeof open === 'string') {
+                pushLine({ state, element: '-', input: null, failure: open });
+                return { lines, hosts: [], keep: true };
+            }
+            const design = yield (0, phase_timing_1.timedPhase)('actions-design-scan', () => designScan(state));
+            const opener = open ? ((_b = (_a = design.find((element) => element.control === open.control)) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null) : null;
+            if (open && opener === null) {
+                pushLine({ state, element: '-', input: null, failure: `no ${open.control} trigger to open it with` });
+                return { lines, hosts: [], keep: true };
+            }
+            const start = { state, props: open ? ((_c = open.props) !== null && _c !== void 0 ? _c : states[open.from]) : states[state], opener };
+            const startUrl = (0, part_compare_1.harnessUrlOf)({ url, part, state, props: start.props, layout: frame.layout });
+            const app = yield (0, phase_timing_1.timedPhase)('actions-app-scan', () => queue.run((browser) => __awaiter(void 0, void 0, void 0, function* () {
+                const context = yield browser.newContext({ viewport: (0, shot_1.viewportOf)(frame.size) });
+                try {
+                    const page = yield context.newPage();
+                    yield page.goto(startUrl, { timeout: thumb_1.DRAW_TIMEOUT_MS });
+                    yield harnessMountedOf(page, thumb_1.DRAW_TIMEOUT_MS);
+                    if (opener !== null) {
+                        const trigger = (yield scanOf(page, [part_compare_1.HARNESS_HOST_SELECTOR])).find((element) => element.key === opener);
+                        if (trigger)
+                            yield page.locator(probeOf(trigger.probe)).click();
+                        yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                    }
+                    return yield scanOf(page, [part_compare_1.HARNESS_HOST_SELECTOR, action_press_1.OVERLAY_ROOTS]);
+                }
+                finally {
+                    yield context.close();
+                }
+            })));
+            const hosts = (_e = (_d = product.config.harness) === null || _d === void 0 ? void 0 : _d.hosts) !== null && _e !== void 0 ? _e : [];
+            const scope = (0, actions_1.ownScopeOf)({ design, app, hosts });
+            const { paired, missing } = (0, actions_1.pairElementsOf)({ design: scope.design, app: scope.app });
+            for (const drift of (0, actions_1.accessibleNameDriftsOf)(paired))
+                pushLine({
+                    state,
+                    element: (0, actions_1.elementNameOf)(drift.app),
+                    input: null,
+                    failure: (0, actions_1.accessibleNameFailureOf)(drift),
+                });
+            for (const element of missing)
+                pushLine({
+                    state,
+                    element: (0, actions_1.elementNameOf)(element),
+                    input: null,
+                    failure: `the design declares ${element.action} but the app draws no such element`,
+                });
+            const checkedElements = yield (0, in_order_at_once_1.inOrderAtOnce)({
+                items: paired,
+                limit: thumb_1.DRAWS_AT_ONCE,
+                run: (_a) => __awaiter(void 0, [_a], void 0, function* ({ app: element, design: drawn }) {
+                    var _b, _c, _d, _e, _f, _g, _h, _j;
+                    const out = [];
+                    const finish = () => {
+                        for (const line of out)
+                            onLine === null || onLine === void 0 ? void 0 : onLine(line);
+                        return out;
+                    };
+                    const name = (0, actions_1.elementNameOf)(element);
+                    try {
+                        const probes = yield (0, phase_timing_1.timedPhase)('actions-pointer-focus', () => queue.run((browser) => (0, pointer_focus_1.probePointerFocus)({
+                            open: () => __awaiter(void 0, void 0, void 0, function* () {
+                                const context = yield browser.newContext({ viewport: (0, shot_1.viewportOf)(frame.size) });
+                                const page = yield context.newPage();
+                                const close = () => context.close();
+                                try {
+                                    yield page.goto(startUrl, { timeout: thumb_1.DRAW_TIMEOUT_MS });
+                                    yield harnessMountedOf(page, thumb_1.DRAW_TIMEOUT_MS);
+                                    yield page.mouse.move(-1, -1);
+                                    if (opener !== null) {
+                                        const trigger = (yield scanOf(page, [part_compare_1.HARNESS_HOST_SELECTOR])).find((found) => found.key === opener);
+                                        if (trigger)
+                                            yield page.locator(probeOf(trigger.probe)).click();
+                                        yield (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS);
+                                        yield page.mouse.move(-1, -1);
+                                    }
+                                    const found = (yield scanOf(page, [part_compare_1.HARNESS_HOST_SELECTOR, action_press_1.OVERLAY_ROOTS])).find((candidate) => candidate.key === element.key && candidate.occurrence === element.occurrence);
+                                    if (!found)
+                                        throw new Error('the element is gone after a fresh load');
+                                    return { page, locator: page.locator(probeOf(found.probe)), close };
+                                }
+                                catch (error) {
+                                    yield close();
+                                    throw error;
+                                }
+                            }),
+                            settle: (page) => (0, action_press_1.settle)(page, thumb_1.DRAW_TIMEOUT_MS),
+                        })));
+                        if (probes) {
+                            const { failure, warning } = (0, pointer_focus_1.pointerFocusVerdictOf)(Object.assign(Object.assign({}, probes), { activatable: !!(drawn === null || drawn === void 0 ? void 0 : drawn.action) }));
+                            out.push({ state, element: `${name} pointer focus`, input: null, failure, warning });
+                        }
+                    }
+                    catch (error) {
+                        out.push({
+                            state,
+                            element: `${name} pointer focus`,
+                            input: null,
+                            failure: (_b = messageOf(error).split('\n')[0]) !== null && _b !== void 0 ? _b : '',
+                        });
+                    }
+                    const owners = drawn ? yield Promise.all(drawn.owners.map(embeddedOf)) : [];
+                    const value = (_d = (_c = drawn === null || drawn === void 0 ? void 0 : drawn.action) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
+                    const settled = [];
+                    for (const candidate of owners)
+                        if (candidate.states.includes(value) &&
+                            (0, actions_1.drawsStateAlreadyOf)({
+                                expected: yield expectedFor(candidate.part, value),
+                                current: yield expectedFor(part, state),
+                            }))
+                            settled.push(candidate.part);
+                    const { action, owner } = drawn
+                        ? (0, actions_1.resolveActionOf)({ value: drawn.action, owners, page: { part, states: names }, settled })
+                        : { action: null, owner: part };
+                    const embeddedState = owners.find((candidate) => candidate.part === owner);
+                    const listen = owners.flatMap((candidate) => (candidate.selector === null ? [] : [candidate.selector]));
+                    if (drawn === null || action === null || typeof action === 'string') {
+                        if (typeof action !== 'string' && (yield embeddersFor()).length > 0)
+                            return finish();
+                        if (drawn !== null &&
+                            action === null &&
+                            (0, actions_1.exemptFromDeclaringOf)({ owners: drawn.owners, within: drawn.within, controls: (_e = module.default) === null || _e === void 0 ? void 0 : _e.controls }))
+                            return finish();
+                        out.push({
+                            state,
+                            element: name,
+                            input: null,
+                            failure: typeof action === 'string'
+                                ? action
+                                : drawn === null
+                                    ? noSuchElementOf((0, actions_1.nearMissesOf)({ element, design, app }))
+                                    : 'the design declares no data-et-action',
+                        });
+                        return finish();
+                    }
+                    for (const input of (0, actions_1.actionInputsOf)(element.key, action)) {
+                        const goal = action.kind === 'state'
+                            ? (0, actions_1.targetStateOf)({ state: action.state, input, states: (_f = embeddedState === null || embeddedState === void 0 ? void 0 : embeddedState.states) !== null && _f !== void 0 ? _f : names })
+                            : '';
+                        const opened = goal === '' ? null : (0, actions_1.openedFromOf)({ goal, start: state, states, open: opens[goal] });
+                        const goalPicture = goal === '' || embeddedState
+                            ? null
+                            : yield (0, phase_timing_1.timedPhase)('actions-goal-draw', () => drawFor(opened ? state : goal, opened));
+                        try {
+                            const run = yield (0, phase_timing_1.timedPhase)('actions-input', () => queue.run((browser) => {
+                                var _a, _b;
+                                return (0, exports.runActionInput)({
+                                    browser,
+                                    url: startUrl,
+                                    start,
+                                    pick: element,
+                                    input,
+                                    size: frame.size,
+                                    shoot: goalPicture
+                                        ? {
+                                            room: ((_b = (_a = goalPicture.marks.find((mark) => mark.parts.includes(part))) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0) > 0,
+                                        }
+                                        : null,
+                                    timeout: thumb_1.DRAW_TIMEOUT_MS,
+                                    listen: action.kind === 'emit' ? listen : [],
+                                    output: action.kind === 'emit' ? action.output : null,
+                                    expanded: !!embeddedState && action.kind === 'state',
+                                    focused: goal.endsWith('-focus-visible'),
+                                });
+                            }));
+                            const result = goalPicture && run.app ? (0, part_compare_1.comparePngs)({ design: goalPicture.png, app: run.app }) : null;
+                            const outcome = {
+                                emitted: run.emitted,
+                                prevented: run.prevented,
+                                compare: embeddedState && action.kind === 'state'
+                                    ? (0, live_actions_1.liveStateCompareOf)({
+                                        state: `${owner} ${goal}`,
+                                        expected: yield expectedFor(owner, goal),
+                                        after: (_g = run.after) !== null && _g !== void 0 ? _g : [],
+                                    })
+                                    : result
+                                        ? { ok: result.kind === 'ok', detail: (0, part_compare_1.compareLineOf)(goal, result).slice(goal.length + 1) }
+                                        : null,
+                            };
+                            const app = run.app;
+                            if (action.kind === 'state' && result && result.kind !== 'ok' && goalPicture && app)
+                                outcome.reached = yield (0, phase_timing_1.timedPhase)('actions-reached', () => (0, reached_state_1.reachedStateOf)({
+                                    goal,
+                                    states: names,
+                                    compare: (candidate) => __awaiter(void 0, void 0, void 0, function* () {
+                                        if (candidate === goal)
+                                            return result;
+                                        const reopened = (0, actions_1.openedFromOf)({ goal: candidate, start: state, states, open: opens[candidate] });
+                                        const picture = yield drawFor(reopened ? state : candidate, reopened);
+                                        return (0, part_compare_1.comparePngs)({ design: picture.png, app });
+                                    }),
+                                }));
+                            if (embeddedState && action.kind === 'state' && outcome.compare && !outcome.compare.ok)
+                                outcome.reached = yield (0, reached_state_1.reachedExpandedStateOf)({
+                                    goal,
+                                    states: embeddedState.states,
+                                    expectedOf: (candidate) => expectedFor(owner, candidate),
+                                    after: (_h = run.after) !== null && _h !== void 0 ? _h : [],
+                                });
+                            const failure = (0, actions_1.actionFailureOf)({
+                                action,
+                                target: goal,
+                                input,
+                                outcome,
+                                modelChanges: action.kind === 'emit' && owner === part
+                                    ? (0, component_outputs_1.modelChangesForOf)({ output: action.output, app: appOutputs, states })
+                                    : [],
+                            });
+                            if (failure !== null && result && result.kind !== 'ok' && goalPicture && run.app) {
+                                wrotePictures = true;
+                                dir !== null && dir !== void 0 ? dir : (dir = (0, fs_1.mkdtempSync)((0, path_1.join)((0, os_1.tmpdir)(), 'et-design-actions-')));
+                                const stem = `${state}--${name}--${input}`.replace(/[^\w.-]/g, '-');
+                                (0, fs_1.writeFileSync)((0, path_1.join)(dir, `${stem}.design.png`), goalPicture.png);
+                                (0, fs_1.writeFileSync)((0, path_1.join)(dir, `${stem}.app.png`), run.app);
+                                (0, fs_1.writeFileSync)((0, path_1.join)(dir, `${stem}.diff.png`), result.diff);
+                            }
+                            out.push({ state, element: name, input, failure });
+                        }
+                        catch (error) {
+                            out.push({ state, element: name, input, failure: (_j = messageOf(error).split('\n')[0]) !== null && _j !== void 0 ? _j : '' });
+                        }
+                    }
+                    return finish();
+                }),
+            });
+            lines.push(...checkedElements.flat());
+            return { lines, hosts: scope.skipped, keep: !wrotePictures };
+        });
+        const cacheInputs = options.appRoot
+            ? {
+                salt: `${(0, code_hash_1.actionCheckCodeOf)()} ${(0, compare_cache_1.browserVersionOf)(chromium.from)}`,
+                built: (0, compare_cache_1.builtAppHashOf)(options.appRoot),
+            }
+            : null;
+        const actionCache = cacheInputs ? (0, action_cache_1.createActionCache)((0, vite_cache_1.viteCacheOf)(target, action_cache_1.COMPARE_ACTIONS)) : null;
+        const actionKeyOf = (state) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (!cacheInputs)
+                return null;
+            try {
+                return (0, compare_cache_1.cacheKeyOf)([
+                    cacheInputs.salt,
+                    cacheInputs.built,
+                    url === '' ? '' : new URL(url).pathname,
+                    part,
+                    state,
+                    sha256Of((_a = markups.get(state)) !== null && _a !== void 0 ? _a : ''),
+                    (_b = states[state]) !== null && _b !== void 0 ? _b : null,
+                    (_c = opens[state]) !== null && _c !== void 0 ? _c : null,
+                    names,
+                    (_e = (_d = module.default) === null || _d === void 0 ? void 0 : _d.controls) !== null && _e !== void 0 ? _e : null,
+                    appOutputs,
+                    (_g = (_f = product.config.harness) === null || _f === void 0 ? void 0 : _f.hosts) !== null && _g !== void 0 ? _g : [],
+                    frame,
+                ]);
+            }
+            catch (_h) {
+                return null;
+            }
+        };
+        const lines = [];
+        const skippedHosts = [];
+        const checked = (only === null ? names : [only]).filter((state) => { var _a; return (0, part_compare_1.forcedElementsOf)((_a = markups.get(state)) !== null && _a !== void 0 ? _a : '').length === 0; });
+        for (let at = 0; at < checked.length; at += ACTION_BATCH_STATES) {
+            designs.clear();
+            ({ queue, shooter } = yield (0, phase_timing_1.timedPhase)('actions-browser', freshBrowser));
+            const batch = yield (0, in_order_at_once_1.inOrderAtOnce)({
+                items: checked.slice(at, at + ACTION_BATCH_STATES),
+                limit: ACTION_BATCH_STATES,
+                run: (state) => (0, phase_timing_1.timedPhase)(`actions-state ${state}`, () => __awaiter(void 0, void 0, void 0, function* () {
+                    const key = actionKeyOf(state);
+                    if (key === null)
+                        return checkState(state);
+                    const { value, hit } = yield (0, action_cache_1.cachedActionsOf)({
+                        cache: actionCache,
+                        key,
+                        printOf,
+                        run: (track) => __awaiter(void 0, void 0, void 0, function* () {
+                            const checkedState = yield checkState(state, track);
+                            return { value: checkedState, keep: checkedState.keep };
+                        }),
+                    });
+                    (0, timings_1.recordCache)(hit);
+                    if (hit)
+                        for (const line of value.lines)
+                            onLine === null || onLine === void 0 ? void 0 : onLine(line);
+                    return value;
+                })),
+            });
+            for (const checkedState of batch) {
+                lines.push(...checkedState.lines);
+                skippedHosts.push(...checkedState.hosts.filter((host) => !skippedHosts.includes(host)));
+            }
+        }
+        return { lines, pictures: dir, embedders: embedders ? yield embedders : [], hosts: skippedHosts };
+    }
+    catch (error) {
+        return messageOf(error);
+    }
+    finally {
+        yield closeBrowser();
+        yield server.close();
+    }
+});
+exports.checkActions = checkActions;
+/** The line `design actions` prints for one checked element and input. */
+const actionLineOf = ({ state, element, input, failure, warning }) => `${state} ${element}${input === null ? '' : ` ${input}`} ${failure === null ? `ok${warning ? ` (warning: ${warning})` : ''}` : `FAILED ${failure}`}`;
+exports.actionLineOf = actionLineOf;
+/** The line the action check prints once per run for a declared host component it skipped in a state. */
+const hostLineOf = (host) => `host ${host}: skipped - the app's own chrome around the part, which the design does not draw`;
+exports.hostLineOf = hostLineOf;
+/** The line the action check prints for a part it skips because no app component renders it in the harness. */
+const unlinkedSkipLineOf = (part) => `actions ${part}: skipped - no implements link, nothing to click`;
+exports.unlinkedSkipLineOf = unlinkedSkipLineOf;
+/** The failed lines `design actions` prints for a part, or why the check could not run (`[]` for a part without an implements link); with `harness` it checks the part harness at that URL instead of starting one. */
+const partActionFailuresOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d, _e;
+    const { target, config, product, part } = options;
+    const source = (_a = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part)) === null || _a === void 0 ? void 0 : _a.source;
+    if (source !== undefined && (0, part_definition_1.partLinkOf)(source).kind === 'none') {
+        (_b = options.onNote) === null || _b === void 0 ? void 0 : _b.call(options, (0, exports.unlinkedSkipLineOf)(part));
+        return [];
+    }
+    const stale = (0, harness_map_1.harnessStaleOf)({ target, product });
+    if (stale !== null)
+        return (0, no_verdict_1.noVerdictOf)(stale);
+    const check = (url) => {
+        var _a, _b;
+        return ((_a = options.check) !== null && _a !== void 0 ? _a : exports.checkActions)({
+            target,
+            config,
+            product,
+            part,
+            url,
+            only: null,
+            appRoot: (_b = options.appRoot) !== null && _b !== void 0 ? _b : null,
+            designsDrawn: options.designsDrawn,
+        });
+    };
+    const checked = options.harness
+        ? yield check(options.harness)
+        : yield (0, harness_server_1.withHarnessUrl)({ target, product, url: options.url, start: options.start, run: check });
+    if (typeof checked === 'string')
+        return (0, no_verdict_1.noVerdictOf)(checked);
+    for (const host of (_c = checked.hosts) !== null && _c !== void 0 ? _c : [])
+        (_d = options.onNote) === null || _d === void 0 ? void 0 : _d.call(options, (0, exports.hostLineOf)(host));
+    const failures = checked.lines.filter((line) => line.failure !== null).map(exports.actionLineOf);
+    if (!options.url || typeof (0, live_compare_1.liveSpecOf)({ target, product }) === 'string')
+        return failures;
+    const live = yield ((_e = options.checkLive) !== null && _e !== void 0 ? _e : live_actions_1.checkLiveActions)({ target, config, product, url: options.url, part });
+    if (typeof live === 'string')
+        return (0, no_verdict_1.noVerdictOf)(`the live action check: ${live}`);
+    return [...failures, ...live.lines.filter((line) => line.failure !== null).map((line) => `live ${(0, live_actions_1.liveLineOf)(line)}`)];
+});
+exports.partActionFailuresOf = partActionFailuresOf;
+/** The note a ready refusal adds when the action check ran on the part harness only. */
+exports.PART_HARNESS_ONLY = 'checked on the part harness only - pass --url <studio build> to check the live pages too';
+/**
+ * `et design actions <layer>/<name> …` clicks and presses Enter and Space on each interactive element of a part in the
+ * app's harness page and fails unless each reaches the state or fires the output its design's `data-et-action` declares.
+ */
+const designActions = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const { target, invocation } = options;
+    const args = (0, cli_args_1.argsOf)(options.argv, { values: ['--product', '--url', '--state'], switches: ['--live'] });
+    const live = typeof args !== 'string' && args.flags.has('--live');
+    if (typeof args === 'string' || args.positional.length > 1 || (!live && args.positional.length !== 1)) {
+        if (typeof args === 'string')
+            console.error(args);
+        console.error(`usage: ${invocation} ${exports.ACTIONS_USAGE}`);
+        return 2;
+    }
+    const config = (0, cli_args_1.configOf)(target);
+    if (live)
+        return designLiveActions(Object.assign(Object.assign({}, options), { args, config }));
+    const parsed = (0, sketch_1.parseTarget)(args.positional[0]);
+    if (typeof config === 'string' || typeof parsed === 'string') {
+        console.error(typeof config === 'string' ? config : parsed);
+        return 1;
+    }
+    const product = (0, cli_args_1.oneProductOf)({ target, config, asked: args.values['--product'] });
+    if (typeof product === 'string') {
+        console.error(product);
+        return 1;
+    }
+    const part = (0, resolve_product_1.partKeyOf)(parsed);
+    const refusal = product.parts.some((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part)
+        ? (0, harness_map_1.harnessStaleOf)({ target, product })
+        : `${product.name} has no part ${part}`;
+    if (refusal !== null) {
+        console.error(refusal);
+        return 1;
+    }
+    const printed = new Set();
+    const checked = yield (0, harness_server_1.withHarnessUrl)({
+        target,
+        product,
+        url: args.values['--url'],
+        start: options.start,
+        run: (url) => {
+            var _a, _b;
+            return ((_a = options.check) !== null && _a !== void 0 ? _a : exports.checkActions)({
+                target,
+                config,
+                product,
+                part: part,
+                url,
+                only: (_b = args.values['--state']) !== null && _b !== void 0 ? _b : null,
+                onLine: (line) => {
+                    printed.add(line);
+                    console.log((0, exports.actionLineOf)(line));
+                },
+            });
+        },
+    });
+    if (typeof checked === 'string') {
+        console.error(checked);
+        return 1;
+    }
+    for (const line of checked.lines)
+        if (!printed.has(line))
+            console.log((0, exports.actionLineOf)(line));
+    for (const host of (_a = checked.hosts) !== null && _a !== void 0 ? _a : [])
+        console.log((0, exports.hostLineOf)(host));
+    if (checked.pictures !== null)
+        console.log(`pictures: ${checked.pictures}`);
+    const failed = checked.lines.filter((line) => line.failure !== null).length;
+    if (checked.lines.length === 0) {
+        console.log(((_b = checked.embedders) === null || _b === void 0 ? void 0 : _b.length)
+            ? `${part}: exempt - ${checked.embedders.join(', ')} declare(s) the actions of its elements`
+            : `${part} has no interactive element`);
+        return 0;
+    }
+    console.log(failed === 0
+        ? `${part}: every declared action works`
+        : `${part}: ${failed} of ${checked.lines.length} action check(s) failed`);
+    return failed === 0 ? 0 : 1;
+});
+exports.designActions = designActions;
+const designLiveActions = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { target, args, config } = options;
+    const parsed = args.positional[0] === undefined ? null : (0, sketch_1.parseTarget)(args.positional[0]);
+    if (typeof config === 'string' || typeof parsed === 'string') {
+        console.error(typeof config === 'string' ? config : parsed);
+        return 1;
+    }
+    const product = (0, cli_args_1.oneProductOf)({ target, config, asked: args.values['--product'] });
+    if (typeof product === 'string') {
+        console.error(product);
+        return 1;
+    }
+    const part = parsed === null ? null : (0, resolve_product_1.partKeyOf)(parsed);
+    if (part !== null && !product.parts.some((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part)) {
+        console.error(`${product.name} has no part ${part}`);
+        return 1;
+    }
+    const printed = new Set();
+    const checked = yield (0, harness_server_1.withHarnessUrl)({
+        target,
+        product,
+        url: args.values['--url'],
+        start: options.start,
+        run: (url) => {
+            var _a;
+            return ((_a = options.checkLive) !== null && _a !== void 0 ? _a : live_actions_1.checkLiveActions)({
+                target,
+                config,
+                product,
+                url,
+                part,
+                onLine: (line) => {
+                    printed.add(line);
+                    console.log((0, live_actions_1.liveLineOf)(line));
+                },
+            });
+        },
+    });
+    if (typeof checked === 'string') {
+        console.error(checked);
+        return 1;
+    }
+    for (const line of checked.lines)
+        if (!printed.has(line))
+            console.log((0, live_actions_1.liveLineOf)(line));
+    const failed = checked.lines.filter((line) => line.failure !== null).length;
+    const scope = part !== null && part !== void 0 ? part : 'the live pages';
+    console.log(failed === 0
+        ? `${scope}: every shell control reaches its declared action and behaves the same on every page`
+        : `${scope}: ${failed} of ${checked.lines.length} live action check(s) failed`);
+    return failed === 0 ? 0 : 1;
+});
+//# sourceMappingURL=actions-command.js.map