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

package/src/lib/design/system/pointer-focus.js

@@ -0,0 +1,175 @@
+"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.probePointerFocus = exports.readRingAfterKey = exports.tabAwayFrom = exports.ringProbeOrNullOf = exports.readRingProbe = exports.RingProbeTimeoutError = exports.RING_PROBE_TIMEOUT_MS = exports.POINTER_FOCUS_SELECTOR = exports.pointerFocusVerdictOf = exports.focusMarkedOf = exports.ringVisibleOf = void 0;
+const thumb_1 = require("../thumb");
+const TRANSPARENT = /^transparent$|\/\s*0(\.0+)?\s*\)$|,\s*0(\.0+)?\s*\)$/;
+/** Whether a computed outline draws a visible ring: a style other than none, a width above 0 and an opaque-enough colour. */
+const ringVisibleOf = (style) => style.outlineStyle !== 'none' &&
+    style.outlineStyle !== 'hidden' &&
+    Number.parseFloat(style.outlineWidth) > 0 &&
+    !TRANSPARENT.test(style.outlineColor.trim());
+exports.ringVisibleOf = ringVisibleOf;
+/** Whether focusing moved a ring onto the element: a visible outline, or a box-shadow that differs from the unfocused one. */
+const focusMarkedOf = (options) => (0, exports.ringVisibleOf)(options.after) ||
+    (options.after.boxShadow !== 'none' && options.after.boxShadow !== options.before.boxShadow);
+exports.focusMarkedOf = focusMarkedOf;
+const ringAfter = (probe) => !!probe && !probe.textEntry && probe.focused && (0, exports.ringVisibleOf)(probe.style);
+const outlineOf = (style) => `outline ${style.outlineStyle} ${style.outlineWidth} ${style.outlineColor}`;
+/**
+ * The verdict of a pointer-focus check. A pointer click must leave no ring (text entry is exempt: browsers always match
+ * `:focus-visible` there). A focus target that is no control - neither a `control` probe nor `activatable`, an element
+ * the design declares an action for - must also stay without ring after a following key press that moves no focus;
+ * on a control, browsers match `:focus-visible` after any key. Keyboard focus without a ring is a warning, not a
+ * failure: another indicator, such as a focus-within wrapper, may draw it.
+ */
+const pointerFocusVerdictOf = (options) => {
+    const { click, clickThenKey, keyboard } = options;
+    const failure = ringAfter(click)
+        ? `shows a focus ring after a pointer click (${outlineOf(click.style)})`
+        : !options.activatable && !(clickThenKey === null || clickThenKey === void 0 ? void 0 : clickThenKey.control) && ringAfter(clickThenKey)
+            ? `shows a focus ring after a pointer click and a Shift press (${outlineOf(clickThenKey.style)})`
+            : null;
+    const warning = keyboard && (!keyboard.probe.focused || !(0, exports.focusMarkedOf)({ before: keyboard.before, after: keyboard.probe.style }))
+        ? keyboard.probe.focused
+            ? 'shows no focus ring on keyboard focus, so the click check proves nothing about it'
+            : 'could not take keyboard focus'
+        : null;
+    return { failure, warning };
+};
+exports.pointerFocusVerdictOf = pointerFocusVerdictOf;
+/** The elements the pointer-focus check visits. */
+exports.POINTER_FOCUS_SELECTOR = '[tabindex]:not([tabindex="-1"]), button, a[href], input:not([type="hidden"]), select, textarea, [contenteditable]';
+const TEXT_FREE_INPUTS = ['button', 'submit', 'reset', 'checkbox', 'radio', 'range', 'color', 'file', 'image'];
+const CONTROL_SELECTOR = [
+    'button',
+    'a[href]',
+    'input',
+    'select',
+    'textarea',
+    'summary',
+    ...[
+        'button',
+        'link',
+        'checkbox',
+        'radio',
+        'switch',
+        'tab',
+        'option',
+        'menuitem',
+        'menuitemcheckbox',
+        'menuitemradio',
+        'treeitem',
+        'gridcell',
+        'combobox',
+        'textbox',
+        'searchbox',
+        'slider',
+        'spinbutton',
+    ].map((role) => `[role="${role}"]`),
+].join(', ');
+exports.RING_PROBE_TIMEOUT_MS = 1000;
+class RingProbeTimeoutError extends Error {
+}
+exports.RingProbeTimeoutError = RingProbeTimeoutError;
+/**
+ * Reads the ring probe of the element a locator names; `null` when it is not one the check visits or is gone from the
+ * page. Throws a `RingProbeTimeoutError` when the element does not answer within `timeout`.
+ */
+const readRingProbe = (locator_1, ...args_1) => __awaiter(void 0, [locator_1, ...args_1], void 0, function* (locator, timeout = exports.RING_PROBE_TIMEOUT_MS) {
+    if ((yield locator.count()) === 0)
+        return null;
+    return locator.evaluate((element, { selector, textFree, control }) => {
+        if (!element.matches(selector))
+            return null;
+        const style = getComputedStyle(element);
+        const type = element instanceof HTMLInputElement ? element.type : '';
+        return {
+            style: {
+                outlineStyle: style.outlineStyle,
+                outlineWidth: style.outlineWidth,
+                outlineColor: style.outlineColor,
+                boxShadow: style.boxShadow,
+            },
+            focused: element.ownerDocument.activeElement === element,
+            textEntry: element instanceof HTMLTextAreaElement ||
+                (element instanceof HTMLElement && element.isContentEditable) ||
+                (element instanceof HTMLInputElement && !textFree.includes(type)),
+            control: element.matches(control),
+        };
+    }, { selector: exports.POINTER_FOCUS_SELECTOR, textFree: TEXT_FREE_INPUTS, control: CONTROL_SELECTOR }, { timeout }).catch((error) => {
+        if (error instanceof Error && error.name === 'TimeoutError')
+            throw new RingProbeTimeoutError(`the element did not answer the focus ring probe within ${timeout} ms`);
+        throw error;
+    });
+});
+exports.readRingProbe = readRingProbe;
+/** `readRingProbe`, with `null` for any failure except a `RingProbeTimeoutError`. */
+const ringProbeOrNullOf = (locator) => (0, exports.readRingProbe)(locator).catch((error) => {
+    if (error instanceof RingProbeTimeoutError)
+        throw error;
+    return null;
+});
+exports.ringProbeOrNullOf = ringProbeOrNullOf;
+/** Presses Tab so the last input is a key and the element itself does not hold focus. */
+const tabAwayFrom = (page, locator) => __awaiter(void 0, void 0, void 0, function* () {
+    yield page.keyboard.press('Tab');
+    if (yield locator.evaluate((element) => element.ownerDocument.activeElement === element, undefined, {
+        timeout: exports.RING_PROBE_TIMEOUT_MS,
+    }))
+        yield page.keyboard.press('Tab');
+});
+exports.tabAwayFrom = tabAwayFrom;
+/** Presses Shift, which moves no focus but makes the browser treat the last input as a key, and reads the probe again. */
+const readRingAfterKey = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    yield options.page.keyboard.press('Shift');
+    yield options.settle(options.page);
+    return (0, exports.ringProbeOrNullOf)(options.locator);
+});
+exports.readRingAfterKey = readRingAfterKey;
+/**
+ * Probes an element in two fresh pages: `open` returns the locator of the element on a freshly loaded page. The click
+ * is a real mouse click at its centre after Tab presses that leave focus elsewhere, because a script focus after a pointer press paints the ring only when the last input was a key; keyboard focus follows a Shift press so the browser treats it as keyboard
+ * focus.
+ */
+const probePointerFocus = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const clicked = yield options.open();
+    let click;
+    let clickThenKey = null;
+    try {
+        yield (0, exports.tabAwayFrom)(clicked.page, clicked.locator);
+        yield clicked.locator.click({ timeout: thumb_1.DRAW_TIMEOUT_MS });
+        yield options.settle(clicked.page);
+        click = yield (0, exports.ringProbeOrNullOf)(clicked.locator);
+        if (click)
+            clickThenKey = yield (0, exports.readRingAfterKey)(Object.assign(Object.assign({}, clicked), { settle: options.settle }));
+    }
+    finally {
+        yield clicked.close();
+    }
+    if (click === null)
+        return null;
+    const focused = yield options.open();
+    try {
+        const before = (_a = (yield (0, exports.readRingProbe)(focused.locator))) === null || _a === void 0 ? void 0 : _a.style;
+        yield focused.page.keyboard.press('Shift');
+        yield focused.locator.focus({ timeout: thumb_1.DRAW_TIMEOUT_MS });
+        yield options.settle(focused.page);
+        const probe = yield (0, exports.readRingProbe)(focused.locator);
+        return { click, clickThenKey, keyboard: before && probe ? { before, probe } : null };
+    }
+    finally {
+        yield focused.close();
+    }
+});
+exports.probePointerFocus = probePointerFocus;
+//# sourceMappingURL=pointer-focus.js.map

package/src/lib/design/system/pointer-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer-focus.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/pointer-focus.ts"],"names":[],"mappings":"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"}

package/src/lib/design/system/prettier.d.ts

@@ -0,0 +1,10 @@
+/** The Prettier CLI of the target checkout, else the one this package resolves, else `null`. */
+export declare const prettierBinOf: (target: string) => string | null;
+/** `text` formatted with the target's Prettier config as if it were `file`; the text as is when Prettier is missing. */
+export declare const formattedTextOf: (options: {
+    target: string;
+    file: string;
+    text: string;
+}) => string | {
+    error: string;
+};

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formattedTextOf = exports.prettierBinOf = void 0;
+const module_1 = require("module");
+const path_1 = require("path");
+const plain_output_1 = require("../../plain-output");
+/** The Prettier CLI of the target checkout, else the one this package resolves, else `null`. */
+const prettierBinOf = (target) => {
+    const from = [(0, path_1.join)(target, 'package.json'), __filename].find((file) => {
+        try {
+            return !!(0, module_1.createRequire)(file).resolve('prettier/package.json');
+        }
+        catch (_a) {
+            return false;
+        }
+    });
+    return from ? (0, path_1.resolve)((0, path_1.dirname)((0, module_1.createRequire)(from).resolve('prettier/package.json')), 'bin/prettier.cjs') : null;
+};
+exports.prettierBinOf = prettierBinOf;
+/** `text` formatted with the target's Prettier config as if it were `file`; the text as is when Prettier is missing. */
+const formattedTextOf = (options) => {
+    var _a;
+    const bin = (0, exports.prettierBinOf)(options.target);
+    if (!bin)
+        return options.text;
+    const formatted = (0, plain_output_1.spawnPlain)([process.execPath, bin, '--stdin-filepath', options.file, '--log-level', 'warn'], {
+        cwd: options.target,
+        input: options.text,
+    });
+    if (formatted.error || formatted.status !== 0)
+        return { error: (formatted.stderr || ((_a = formatted.error) === null || _a === void 0 ? void 0 : _a.message) || 'prettier failed').trim() };
+    if (formatted.stdout === '' && options.text.trim() !== '')
+        return { error: 'prettier printed nothing' };
+    return formatted.stdout;
+};
+exports.formattedTextOf = formattedTextOf;
+//# sourceMappingURL=prettier.js.map

package/src/lib/design/system/prettier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prettier.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/prettier.ts"],"names":[],"mappings":";;;AAAA,mCAAuC;AACvC,+BAA8C;AAC9C,qDAAgD;AAEhD,gGAAgG;AACzF,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE;IAC9C,MAAM,IAAI,GAAG,CAAC,IAAA,WAAI,EAAC,MAAM,EAAE,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QACpE,IAAI,CAAC;YACH,OAAO,CAAC,CAAC,IAAA,sBAAa,EAAC,IAAI,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;QAChE,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC,CAAC,CAAC,IAAA,cAAO,EAAC,IAAA,cAAO,EAAC,IAAA,sBAAa,EAAC,IAAI,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAClH,CAAC,CAAC;AAVW,QAAA,aAAa,iBAUxB;AAEF,wHAAwH;AACjH,MAAM,eAAe,GAAG,CAAC,OAI/B,EAA8B,EAAE;;IAC/B,MAAM,GAAG,GAAG,IAAA,qBAAa,EAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAE1C,IAAI,CAAC,GAAG;QAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAE9B,MAAM,SAAS,GAAG,IAAA,yBAAU,EAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,EAAE,kBAAkB,EAAE,OAAO,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,CAAC,EAAE;QAC7G,GAAG,EAAE,OAAO,CAAC,MAAM;QACnB,KAAK,EAAE,OAAO,CAAC,IAAI;KACpB,CAAC,CAAC;IAEH,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;QAC3C,OAAO,EAAE,KAAK,EAAE,CAAC,SAAS,CAAC,MAAM,KAAI,MAAA,SAAS,CAAC,KAAK,0CAAE,OAAO,CAAA,IAAI,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;IAE/F,IAAI,SAAS,CAAC,MAAM,KAAK,EAAE,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE;QAAE,OAAO,EAAE,KAAK,EAAE,0BAA0B,EAAE,CAAC;IAExG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1B,CAAC,CAAC;AApBW,QAAA,eAAe,mBAoB1B"}

package/src/lib/design/system/problem.d.ts

@@ -1,5 +1,11 @@
+/**
+ * A rule hit; `at` is a stable place of it within its part (a control, a state, an action) for the rule baseline, and
+ * `part` the part it is about when the file alone does not say.
+ */
 export type Problem = {
     rule: string;
     file: string;
     message: string;
+    at?: string;
+    part?: string;
 };

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fixturesOf = exports.partFilesOf = exports.productDirOf = void 0;
 const fs_1 = require("fs");
 const path_1 = require("path");
-const paths_1 = require("../paths");
+const design_config_1 = require("../design-config");
 const layers_1 = require("./layers");
-const productDirOf = (options) => (0, path_1.resolve)(options.target, paths_1.DESIGN_DIR, options.product);
+const productDirOf = (options) => (0, path_1.resolve)(options.target, design_config_1.DESIGN_DIR, options.product);
 exports.productDirOf = productDirOf;
 const foldersOf = (dir) => (0, fs_1.existsSync)(dir) ? (0, fs_1.readdirSync)(dir).filter((name) => (0, fs_1.statSync)((0, path_1.resolve)(dir, name)).isDirectory()) : [];
 /** Every `<layer>/<name>/<name>.ts` of a product folder, with its `<name>.css` when there is one. */

package/src/lib/design/system/product.js.map

@@ -1 +1 @@
-{"version":3,"file":"product.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/product.ts"],"names":[],"mappings":";;;AAAA,2BAAuD;AACvD,+BAA+B;AAC/B,oCAAsC;AACtC,qCAAyC;AAKlC,MAAM,YAAY,GAAG,CAAC,OAA4C,EAAE,EAAE,CAC3E,IAAA,cAAO,EAAC,OAAO,CAAC,MAAM,EAAE,kBAAU,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;AAD1C,QAAA,YAAY,gBAC8B;AAEvD,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAChC,IAAA,eAAU,EAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAW,EAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,aAAQ,EAAC,IAAA,cAAO,EAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAEvG,qGAAqG;AAC9F,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IACzC,MAAM,KAAK,GAAe,EAAE,CAAC;IAC7B,MAAM,QAAQ,GAAc,EAAE,CAAC;IAE/B,KAAK,MAAM,KAAK,IAAI,eAAM,EAAE,CAAC;QAC3B,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,IAAA,cAAO,EAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;YACzD,MAAM,MAAM,GAAG,IAAA,cAAO,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;YACzC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,GAAG,IAAI,KAAK,CAAC,CAAC;YAC3C,MAAM,GAAG,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,GAAG,IAAI,MAAM,CAAC,CAAC;YAE3C,IAAI,CAAC,IAAA,eAAU,EAAC,IAAI,CAAC,EAAE,CAAC;gBACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,IAAI,KAAK,EAAE,CAAC,CAAC;gBAC9E,SAAS;YACX,CAAC;YAED,KAAK,CAAC,IAAI,iBAAG,KAAK,EAAE,IAAI,EAAE,IAAI,IAAK,CAAC,IAAA,eAAU,EAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC;QACzE,CAAC;IACH,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC7B,CAAC,CAAC;AApBW,QAAA,WAAW,eAoBtB;AAEK,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE;IACxC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,GAAG,EAAE,aAAa,CAAC,CAAC;IAEzC,OAAO,IAAA,eAAU,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACxC,CAAC,CAAC;AAJW,QAAA,UAAU,cAIrB"}
+{"version":3,"file":"product.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/product.ts"],"names":[],"mappings":";;;AAAA,2BAAuD;AACvD,+BAA+B;AAC/B,oDAA8C;AAC9C,qCAAyC;AAKlC,MAAM,YAAY,GAAG,CAAC,OAA4C,EAAE,EAAE,CAC3E,IAAA,cAAO,EAAC,OAAO,CAAC,MAAM,EAAE,0BAAU,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;AAD1C,QAAA,YAAY,gBAC8B;AAEvD,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAChC,IAAA,eAAU,EAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAW,EAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAA,aAAQ,EAAC,IAAA,cAAO,EAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAEvG,qGAAqG;AAC9F,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IACzC,MAAM,KAAK,GAAe,EAAE,CAAC;IAC7B,MAAM,QAAQ,GAAc,EAAE,CAAC;IAE/B,KAAK,MAAM,KAAK,IAAI,eAAM,EAAE,CAAC;QAC3B,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,IAAA,cAAO,EAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;YACzD,MAAM,MAAM,GAAG,IAAA,cAAO,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;YACzC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,GAAG,IAAI,KAAK,CAAC,CAAC;YAC3C,MAAM,GAAG,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,GAAG,IAAI,MAAM,CAAC,CAAC;YAE3C,IAAI,CAAC,IAAA,eAAU,EAAC,IAAI,CAAC,EAAE,CAAC;gBACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,IAAI,KAAK,EAAE,CAAC,CAAC;gBAC9E,SAAS;YACX,CAAC;YAED,KAAK,CAAC,IAAI,iBAAG,KAAK,EAAE,IAAI,EAAE,IAAI,IAAK,CAAC,IAAA,eAAU,EAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC;QACzE,CAAC;IACH,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC7B,CAAC,CAAC;AApBW,QAAA,WAAW,eAoBtB;AAEK,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE;IACxC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,GAAG,EAAE,aAAa,CAAC,CAAC;IAEzC,OAAO,IAAA,eAAU,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACxC,CAAC,CAAC;AAJW,QAAA,UAAU,cAIrB"}

package/src/lib/design/system/reach.d.ts

@@ -0,0 +1,12 @@
+/** The rule a declared action or a projected region breaks when an opaque element of another subtree paints above it. */
+export declare const COVERED_RULE = "COVERED";
+/** The rule a declared action breaks when the state that draws it hides it, fades it out, shrinks it to nothing or buries it. */
+export declare const UNREACHABLE_RULE = "UNREACHABLE";
+/**
+ * The statements of the reach check inside the frame script of `render-check`. They use `root`, `report` and
+ * `pathOf` of that script. Each `data-et-action` element must be shown, sized and hit by a click at some point of its
+ * unclipped box; each point where an opaque element of another subtree paints above an action, or above a projected
+ * region nested in another projected region from inside that outer region, is a cover. An action inside such a nested
+ * region is preview content and is not judged. The click pass runs before `pointer-events` is forced on for the paint pass, and the force is removed.
+ */
+export declare const REACH_STATEMENTS: string;

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

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REACH_STATEMENTS = exports.UNREACHABLE_RULE = exports.COVERED_RULE = void 0;
+const see_through_1 = require("./see-through");
+/** The rule a declared action or a projected region breaks when an opaque element of another subtree paints above it. */
+exports.COVERED_RULE = 'COVERED';
+/** The rule a declared action breaks when the state that draws it hides it, fades it out, shrinks it to nothing or buries it. */
+exports.UNREACHABLE_RULE = 'UNREACHABLE';
+const ACTION_SAMPLES_PER_SIDE = 3;
+const REGION_SAMPLES_PER_SIDE = 5;
+const OPAQUE = 0.95;
+const PAN_STEP = 32;
+const PAN_MAX_STEPS = 200;
+/**
+ * The statements of the reach check inside the frame script of `render-check`. They use `root`, `report` and
+ * `pathOf` of that script. Each `data-et-action` element must be shown, sized and hit by a click at some point of its
+ * unclipped box; each point where an opaque element of another subtree paints above an action, or above a projected
+ * region nested in another projected region from inside that outer region, is a cover. An action inside such a nested
+ * region is preview content and is not judged. The click pass runs before `pointer-events` is forced on for the paint pass, and the force is removed.
+ */
+exports.REACH_STATEMENTS = `
+  {
+    const floating = ${JSON.stringify(see_through_1.OVERLAY_PANE_SELECTOR + ', [role="tooltip"]')};
+    const alphaOf = (colour) => {
+      if (colour === 'transparent') return 0;
+      const slash = /\\/\\s*([\\d.]+)(%?)\\s*\\)$/.exec(colour);
+      if (slash) return parseFloat(slash[1]) / (slash[2] ? 100 : 1);
+      const rgba = /^rgba\\([^,]+,[^,]+,[^,]+,\\s*([\\d.]+)\\s*\\)$/.exec(colour);
+      return rgba ? parseFloat(rgba[1]) : 1;
+    };
+    const opacityOf = (element) => {
+      let opacity = 1;
+      for (let at = element; at; at = at.parentElement) opacity *= parseFloat(getComputedStyle(at).opacity);
+      return opacity;
+    };
+    const solid = (element) => {
+      const style = getComputedStyle(element);
+      const paints = element.matches('img, video, canvas, iframe, object, embed') || style.backgroundImage !== 'none' || alphaOf(style.backgroundColor) >= ${OPAQUE};
+      return paints && style.visibility === 'visible' && opacityOf(element) >= ${OPAQUE};
+    };
+    const layer = '[aria-modal="true"]';
+    let passive = new Set();
+    const coverOf = (hit, target, opaqueOnly, within) => {
+      if (!hit || target.contains(hit) || hit.contains(target) || hit.closest(floating) || hit.closest(layer) || !within.contains(hit)) return null;
+      if (passive.has(hit) && hit.closest('[aria-hidden="true"]')) return null;
+      const skip = hit.closest('[data-et-skip~="COVERED"]');
+      if (skip && !skip.contains(target)) return null;
+      for (let at = hit; at && !at.contains(target); at = at.parentElement) if (!opaqueOnly || solid(at)) return at;
+      return null;
+    };
+    const visibleBoxOf = (element) => {
+      const rect = element.getBoundingClientRect();
+      const box = { left: Math.max(rect.left, 0), top: Math.max(rect.top, 0), right: Math.min(rect.right, innerWidth), bottom: Math.min(rect.bottom, innerHeight) };
+      for (let at = element.parentElement; at && at !== document.documentElement; at = at.parentElement) {
+        const style = getComputedStyle(at);
+        if (style.overflowX === 'visible' && style.overflowY === 'visible') continue;
+        const clip = at.getBoundingClientRect();
+        const left = clip.left + at.clientLeft;
+        const top = clip.top + at.clientTop;
+        if (style.overflowX !== 'visible') [box.left, box.right] = [Math.max(box.left, left), Math.min(box.right, left + at.clientWidth)];
+        if (style.overflowY !== 'visible') [box.top, box.bottom] = [Math.max(box.top, top), Math.min(box.bottom, top + at.clientHeight)];
+      }
+      return box.right - box.left > 2 && box.bottom - box.top > 2 ? box : null;
+    };
+    const pointsOf = (box, perSide) => {
+      const points = [];
+      for (let x = 0; x < perSide; x++)
+        for (let y = 0; y < perSide; y++)
+          points.push([box.left + 1 + ((box.right - box.left - 2) * (x + 0.5)) / perSide, box.top + 1 + ((box.bottom - box.top - 2) * (y + 0.5)) / perSide]);
+      return points;
+    };
+    const coversOf = (target, box, perSide, opaqueOnly, within = document.documentElement) => {
+      const covers = new Map();
+      const points = pointsOf(box, perSide);
+      for (const [x, y] of points) {
+        const cover = coverOf(document.elementFromPoint(x, y), target, opaqueOnly, within);
+        if (cover) covers.set(cover, (covers.get(cover) ?? 0) + 1);
+      }
+      const hits = [...covers.values()].reduce((sum, count) => sum + count, 0);
+      const most = [...covers.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? null;
+      return { hits, total: points.length, most };
+    };
+    const labelOf = (element) => {
+      const text = (element.getAttribute('aria-label') || element.textContent || '').trim().replace(/\\s+/g, ' ');
+      const short = text.length > 32 ? text.slice(0, 31) + '…' : text;
+      return (short ? '"' + short + '" ' : '') + '(' + element.getAttribute('data-et-action') + ')';
+    };
+    const hiddenOf = (element) => {
+      let gone = null;
+      for (let at = element; at && at !== root; at = at.parentElement) {
+        if (at.hasAttribute('hidden') || at.matches('template')) return { skip: true };
+        if (!gone && getComputedStyle(at).display === 'none') gone = at;
+      }
+      if (gone) return { why: 'not displayed (display: none on ' + pathOf(gone) + ')' };
+      const style = getComputedStyle(element);
+      if (style.visibility !== 'visible') return { why: 'hidden (visibility: ' + style.visibility + ')' };
+      for (let at = element; at && at !== root; at = at.parentElement)
+        if (parseFloat(getComputedStyle(at).opacity) === 0) return { why: 'invisible (opacity 0 on ' + pathOf(at) + ')' };
+      const rect = element.getBoundingClientRect();
+      if (rect.width < 1 || rect.height < 1) return { why: 'zero-size (' + Math.round(rect.width) + 'x' + Math.round(rect.height) + ')' };
+      if (style.pointerEvents === 'none') return { why: 'not clickable (pointer-events: none)' };
+      return null;
+    };
+    const previewed = (element) => element.closest('[data-et-projected]')?.parentElement?.closest('[data-et-projected]');
+    const actions = reachableControlsOf(root, '[data-et-action]', true).filter((element) => !previewed(element));
+    const shownActions = [];
+    for (const element of actions) {
+      const hidden = hiddenOf(element);
+      if (hidden?.skip) continue;
+      if (hidden) report('${exports.UNREACHABLE_RULE}', element, labelOf(element) + ' is ' + hidden.why + ' in a state that declares it, so it can not be pressed');
+      else shownActions.push(element);
+    }
+    const force = document.createElement('style');
+    force.textContent = '* { pointer-events: auto !important; }';
+    const judge = (pose) => {
+      passive = new Set([...root.querySelectorAll('*')].filter((element) => getComputedStyle(element).pointerEvents === 'none'));
+      const sampled = [];
+      for (const element of shownActions) {
+        const box = visibleBoxOf(element);
+        if (box) sampled.push({ element, points: pointsOf(box, ${ACTION_SAMPLES_PER_SIDE}).map((point) => ({ point, click: null, cover: null })) });
+      }
+      for (const { points, element } of sampled)
+        for (const sample of points) sample.click = coverOf(document.elementFromPoint(...sample.point), element, false, document.documentElement);
+      document.head.append(force);
+      try {
+        for (const { points, element } of sampled)
+          for (const sample of points) sample.cover = coverOf(document.elementFromPoint(...sample.point), element, true, document.documentElement) ?? sample.click;
+      } finally {
+        force.remove();
+      }
+      for (const { element, points } of sampled) {
+        const counts = new Map();
+        for (const { cover } of points) if (cover) counts.set(cover, (counts.get(cover) ?? 0) + 1);
+        const hits = [...counts.values()].reduce((sum, count) => sum + count, 0);
+        if (hits === 0) continue;
+        const most = [...counts.entries()].sort((a, b) => b[1] - a[1])[0][0];
+        if (points.every(({ click }) => click)) {
+          report('${exports.UNREACHABLE_RULE}', element, labelOf(element) + ' is covered: a click at any point of it lands on ' + pathOf(most) + pose);
+          continue;
+        }
+        const under = solid(most) ? 'the opaque ' + pathOf(most) : pathOf(most) + ', which takes the click there';
+        report('${exports.COVERED_RULE}', element, labelOf(element) + ': ' + hits + ' of ' + points.length + ' points lie under ' + under + pose);
+      }
+    };
+    judge('');
+    const placesOf = (elements) => elements.map((element) => element.getBoundingClientRect()).map((rect) => [rect.left, rect.top]);
+    const wheel = (canvas, x, y) => canvas.dispatchEvent(new WheelEvent('wheel', { deltaX: x, deltaY: y, bubbles: true, cancelable: true }));
+    const canvases = new Set();
+    for (const element of shownActions)
+      for (let at = element.parentElement; at && at !== root; at = at.parentElement) {
+        const style = getComputedStyle(at);
+        if (style.overflowX !== 'visible' || style.overflowY !== 'visible') canvases.add(at);
+      }
+    for (const canvas of canvases) {
+      const inside = shownActions.filter((element) => canvas.contains(element));
+      for (const [dx, dy, way] of [[1, 0, 'right'], [-1, 0, 'left'], [0, 1, 'down'], [0, -1, 'up']]) {
+        const start = placesOf(inside);
+        for (let step = 1; step <= ${PAN_MAX_STEPS}; step++) {
+          const before = placesOf(inside).join(' ');
+          wheel(canvas, dx * ${PAN_STEP}, dy * ${PAN_STEP});
+          if (placesOf(inside).join(' ') === before) break;
+          judge(' when ' + pathOf(canvas) + ' is panned ' + step * ${PAN_STEP} + 'px ' + way);
+        }
+        const back = placesOf(inside)
+          .map(([left, top], index) => [left - start[index][0], top - start[index][1]])
+          .sort((a, b) => Math.abs(b[0]) + Math.abs(b[1]) - Math.abs(a[0]) - Math.abs(a[1]))[0];
+        if (back[0] || back[1]) wheel(canvas, back[0], back[1]);
+      }
+    }
+    document.head.append(force);
+    try {
+      for (const element of root.querySelectorAll('[data-et-projected]')) {
+        const outer = element.parentElement?.closest('[data-et-projected]');
+        if (!outer || element.closest('[inert], [aria-hidden="true"]') || element.getClientRects().length === 0) continue;
+        const box = visibleBoxOf(element);
+        if (!box) continue;
+        const covered = coversOf(element, box, ${REGION_SAMPLES_PER_SIDE}, true, outer);
+        if (covered.hits > 0)
+          report('${exports.COVERED_RULE}', element, 'the projected region "' + element.getAttribute('data-et-projected') + '": ' + covered.hits + ' of ' + covered.total + ' points lie under the opaque ' + pathOf(covered.most));
+      }
+    } finally {
+      force.remove();
+    }
+  }
+`;
+//# sourceMappingURL=reach.js.map

package/src/lib/design/system/reach.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reach.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/reach.ts"],"names":[],"mappings":";;;AAAA,+CAAsD;AAEtD,yHAAyH;AAC5G,QAAA,YAAY,GAAG,SAAS,CAAC;AAEtC,iIAAiI;AACpH,QAAA,gBAAgB,GAAG,aAAa,CAAC;AAE9C,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAClC,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAClC,MAAM,MAAM,GAAG,IAAI,CAAC;AACpB,MAAM,QAAQ,GAAG,EAAE,CAAC;AACpB,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B;;;;;;GAMG;AACU,QAAA,gBAAgB,GAAG;;uBAET,IAAI,CAAC,SAAS,CAAC,mCAAqB,GAAG,oBAAoB,CAAC;;;;;;;;;;;;;;;6JAe0E,MAAM;iFAClF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAuE3D,wBAAgB;;;;;;;;;;iEAUqB,uBAAuB;;;;;;;;;;;;;;;;;;oBAkBpE,wBAAgB;;;;kBAIlB,oBAAY;;;;;;;;;;;;;;;;qCAgBO,aAAa;;+BAEnB,QAAQ,UAAU,QAAQ;;qEAEY,QAAQ;;;;;;;;;;;;;;;iDAe5B,uBAAuB;;oBAEpD,oBAAY;;;;;;CAM/B,CAAC"}

package/src/lib/design/system/reachable-controls.d.ts

@@ -0,0 +1,6 @@
+/**
+ * In-page statements that define `reachableControlsOf(scope, selector, keepHidden)`: the elements of `scope` matching
+ * `selector` that a render rule may judge. Subtrees under `[inert]` or `[aria-hidden="true"]` never count; elements
+ * under `hidden` or `display: none` are dropped unless `keepHidden` is set, for rules that report them as unreachable.
+ */
+export declare const REACHABLE_CONTROLS_STATEMENTS = "\n  const reachableControlsOf = (scope, selector, keepHidden) =>\n    [...scope.querySelectorAll(selector)].filter((control) => {\n      if (control.closest('[inert], [aria-hidden=\"true\"]')) return false;\n      if (keepHidden) return true;\n      for (let at = control; at && at !== scope.parentElement; at = at.parentElement)\n        if (at.hasAttribute('hidden') || getComputedStyle(at).display === 'none') return false;\n      return true;\n    });\n";

package/src/lib/design/system/reachable-controls.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REACHABLE_CONTROLS_STATEMENTS = void 0;
+/**
+ * In-page statements that define `reachableControlsOf(scope, selector, keepHidden)`: the elements of `scope` matching
+ * `selector` that a render rule may judge. Subtrees under `[inert]` or `[aria-hidden="true"]` never count; elements
+ * under `hidden` or `display: none` are dropped unless `keepHidden` is set, for rules that report them as unreachable.
+ */
+exports.REACHABLE_CONTROLS_STATEMENTS = `
+  const reachableControlsOf = (scope, selector, keepHidden) =>
+    [...scope.querySelectorAll(selector)].filter((control) => {
+      if (control.closest('[inert], [aria-hidden="true"]')) return false;
+      if (keepHidden) return true;
+      for (let at = control; at && at !== scope.parentElement; at = at.parentElement)
+        if (at.hasAttribute('hidden') || getComputedStyle(at).display === 'none') return false;
+      return true;
+    });
+`;
+//# sourceMappingURL=reachable-controls.js.map

package/src/lib/design/system/reachable-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reachable-controls.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/reachable-controls.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACU,QAAA,6BAA6B,GAAG;;;;;;;;;CAS5C,CAAC"}

package/src/lib/design/system/reachable-files.d.ts

@@ -0,0 +1,14 @@
+import { ProductSource } from './base';
+import { SharedDirs } from './imports';
+import { ResolvedPart, ResolvedProduct } from './resolve-product';
+export declare const repoRootOf: (source: ProductSource) => string;
+/** The source file of an `@ethlete/<lib>/design[/<path>]` specifier in the repo at `root`, or `null` for any other specifier. */
+export declare const sdkDesignFileOf: (root: string, specifier: string) => string | null;
+/**
+ * The files the parts in `from` reach through relative, shared and system imports, with their
+ * sources, and the `@ethlete/<lib>/design` module files they reach. `from` defaults to every part.
+ */
+export declare const reachableFilesOf: (product: ResolvedProduct & SharedDirs, from?: ResolvedPart[]) => {
+    files: Map<string, string>;
+    sdkDesign: Map<string, string>;
+};

package/src/lib/design/system/reachable-files.js

@@ -0,0 +1,101 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reachableFilesOf = exports.sdkDesignFileOf = exports.repoRootOf = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const postcss_1 = __importDefault(require("postcss"));
+const vite_paths_1 = require("../vite-paths");
+const imports_1 = require("./imports");
+const resolve_product_1 = require("./resolve-product");
+const ts_source_1 = require("./ts-source");
+const SDK_DESIGN_MODULE = /^@ethlete\/([\w-]+)\/design((?:\/[\w-]+)*)$/u;
+const repoRootOf = (source) => (0, path_1.resolve)((0, path_1.dirname)(source.configFile), '../..');
+exports.repoRootOf = repoRootOf;
+const stylesheetImportsOf = (css) => {
+    const imports = [];
+    try {
+        postcss_1.default.parse(css).walkAtRules('import', (rule) => {
+            var _a;
+            const match = /^(?:url\(\s*)?(?:['"]([^'"]+)['"]|([^'"\s)]+))/u.exec(rule.params.trim());
+            const specifier = (_a = match === null || match === void 0 ? void 0 : match[1]) !== null && _a !== void 0 ? _a : match === null || match === void 0 ? void 0 : match[2];
+            if (specifier)
+                imports.push(specifier);
+        });
+    }
+    catch (_a) {
+        return [];
+    }
+    return imports;
+};
+const relativeFileOf = (file, specifier) => {
+    var _a;
+    const path = (0, path_1.resolve)((0, path_1.dirname)(file), (_a = specifier.split('?')[0]) !== null && _a !== void 0 ? _a : specifier);
+    return path.endsWith('.css') ? ((0, fs_1.existsSync)(path) ? path : null) : (0, vite_paths_1.sourceFileOf)(path);
+};
+/** The source file of an `@ethlete/<lib>/design[/<path>]` specifier in the repo at `root`, or `null` for any other specifier. */
+const sdkDesignFileOf = (root, specifier) => {
+    var _a, _b;
+    const match = SDK_DESIGN_MODULE.exec(specifier);
+    return match ? (0, vite_paths_1.sourceFileOf)((0, path_1.resolve)(root, 'libs', (_a = match[1]) !== null && _a !== void 0 ? _a : '', `design${(_b = match[2]) !== null && _b !== void 0 ? _b : ''}`)) : null;
+};
+exports.sdkDesignFileOf = sdkDesignFileOf;
+const sdkDesignFilesOf = (root, specifiers) => {
+    const files = new Map();
+    const queue = specifiers.flatMap((specifier) => { var _a; return (_a = (0, exports.sdkDesignFileOf)(root, specifier)) !== null && _a !== void 0 ? _a : []; });
+    for (let file = queue.shift(); file !== undefined; file = queue.shift()) {
+        if (files.has(file) || !(0, fs_1.existsSync)(file))
+            continue;
+        const source = (0, fs_1.readFileSync)(file, 'utf8');
+        files.set(file, source);
+        const imports = file.endsWith('.css') ? stylesheetImportsOf(source) : (0, ts_source_1.importsOf)(source);
+        for (const specifier of imports) {
+            const found = specifier.startsWith('.') ? relativeFileOf(file, specifier) : (0, exports.sdkDesignFileOf)(root, specifier);
+            if (found && !files.has(found))
+                queue.push(found);
+        }
+    }
+    return files;
+};
+/**
+ * The files the parts in `from` reach through relative, shared and system imports, with their
+ * sources, and the `@ethlete/<lib>/design` module files they reach. `from` defaults to every part.
+ */
+const reachableFilesOf = (product, from = product.parts) => {
+    var _a, _b;
+    const parts = new Map(product.parts.map((part) => [(0, resolve_product_1.partKeyOf)(part), part]));
+    const files = new Map();
+    const packages = new Set();
+    const queue = from.flatMap((part) => [part.file, ...(part.css ? [part.css] : [])]);
+    for (let file = queue.shift(); file !== undefined; file = queue.shift()) {
+        if (files.has(file) || !(0, fs_1.existsSync)(file))
+            continue;
+        const source = (0, fs_1.readFileSync)(file, 'utf8');
+        files.set(file, source);
+        const specifiers = file.endsWith('.css') ? stylesheetImportsOf(source) : (0, ts_source_1.importsOf)(source);
+        for (const specifier of specifiers) {
+            const imported = (0, imports_1.classifyImport)(specifier);
+            let found = null;
+            if (imported.kind === 'relative') {
+                found = relativeFileOf(file, specifier);
+            }
+            else if (imported.kind === 'other') {
+                packages.add(specifier);
+            }
+            else if (imported.kind === 'shared') {
+                found = (0, imports_1.sharedFileOf)({ dirs: (0, imports_1.sharedDirsOf)(product), path: imported.path });
+            }
+            else if (imported.kind === 'part') {
+                const part = parts.get((0, resolve_product_1.partKeyOf)(imported));
+                found = imported.stylesheet ? ((_a = part === null || part === void 0 ? void 0 : part.css) !== null && _a !== void 0 ? _a : null) : ((_b = part === null || part === void 0 ? void 0 : part.file) !== null && _b !== void 0 ? _b : null);
+            }
+            if (found && !files.has(found))
+                queue.push(found);
+        }
+    }
+    return { files, sdkDesign: sdkDesignFilesOf((0, exports.repoRootOf)(product), [...packages]) };
+};
+exports.reachableFilesOf = reachableFilesOf;
+//# sourceMappingURL=reachable-files.js.map