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

package/src/lib/design/system/design-hash.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changedFilesOf = exports.recordHolds = exports.designHashOf = exports.hashOfFiles = exports.fileHashesOf = exports.isOptionalFileHashes = exports.sha16 = void 0;
+const crypto_1 = require("crypto");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const assets_1 = require("./assets");
+const imports_1 = require("./imports");
+const inventory_approval_1 = require("./inventory-approval");
+const reachable_files_1 = require("./reachable-files");
+const baseline_1 = require("./sketch/baseline");
+const ts_source_1 = require("./ts-source");
+const sha16 = (data) => (0, crypto_1.createHash)('sha256').update(data).digest('hex').slice(0, 16);
+exports.sha16 = sha16;
+const isFileHashes = (value) => !!value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    Object.values(value).every((hash) => typeof hash === 'string');
+/** Whether a stored `files` value is absent or a valid file hash map, for the readers of the mark files. */
+const isOptionalFileHashes = (value) => value === undefined || isFileHashes(value);
+exports.isOptionalFileHashes = isOptionalFileHashes;
+/** The hash of each existing file in `files`, keyed by its `/`-separated path from `root`, sorted. */
+const fileHashesOf = (root, files) => Object.fromEntries([...new Set(files)]
+    .map((file) => [(0, path_1.relative)(root, file).split(path_1.sep).join('/'), file])
+    .sort(([a], [b]) => a.localeCompare(b))
+    .flatMap(([path, file]) => {
+    try {
+        return [[path, (0, exports.sha16)((0, fs_1.readFileSync)(file))]];
+    }
+    catch (_a) {
+        return [];
+    }
+}));
+exports.fileHashesOf = fileHashesOf;
+const hashOfFiles = (files) => (0, exports.sha16)(Object.entries(files)
+    .map(([path, hash]) => `${path}\0${hash}\n`)
+    .join(''));
+exports.hashOfFiles = hashOfFiles;
+/**
+ * The design hash of a part: its folder, the shared and asset files it reaches, and every file it reaches through
+ * imports - other `@system` parts, `@ethlete/<lib>/design` mocks and the fixtures - with the hash of each file.
+ */
+const designHashOf = (options) => {
+    const { product, part } = options;
+    const owner = (0, inventory_approval_1.partOwnerOf)({ product, part });
+    const dir = (0, path_1.dirname)(part.file);
+    const inputs = (0, baseline_1.partInputsOf)({ product: owner, dir });
+    const reachable = (0, reachable_files_1.reachableFilesOf)(product, [part]);
+    const reached = [...reachable.files.keys()];
+    const fixtures = product.fixtures && [...reachable.files.values()].some((source) => (0, ts_source_1.importsOf)(source).includes(imports_1.FIXTURES_SPECIFIER))
+        ? [product.fixtures]
+        : [];
+    const files = [
+        ...inputs.files,
+        ...inputs.shared.map(({ file }) => file),
+        ...inputs.assets.map(({ file }) => file),
+        ...reached,
+        ...(0, assets_1.importedAssetsOf)({ product: owner, files: reached }).map(({ file }) => file),
+        ...reachable.sdkDesign.keys(),
+        ...fixtures,
+    ].filter((file) => !inputs.generated.has(file));
+    const hashes = (0, exports.fileHashesOf)((0, reachable_files_1.repoRootOf)(product), files);
+    return { hash: (0, exports.hashOfFiles)(hashes), files: hashes, legacy: (0, baseline_1.partHashOf)({ product: owner, dir }) };
+};
+exports.designHashOf = designHashOf;
+const recordHolds = (record, now) => record.files ? record.hash === now.hash : record.hash === now.legacy;
+exports.recordHolds = recordHolds;
+/** The paths whose hash differs between two file hash maps, added and removed paths included, sorted. */
+const changedFilesOf = (before, now) => [...new Set([...Object.keys(before), ...Object.keys(now)])]
+    .filter((path) => before[path] !== now[path])
+    .sort((a, b) => a.localeCompare(b));
+exports.changedFilesOf = changedFilesOf;
+//# sourceMappingURL=design-hash.js.map

package/src/lib/design/system/design-hash.js.map

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

package/src/lib/design/system/disabled-interaction.d.ts

@@ -0,0 +1,8 @@
+/** The rule a disabled control breaks when a forced hover or active changes how it looks. */
+export declare const DISABLED_INTERACTION_RULE = "DISABLED-INTERACTION";
+/**
+ * The statements of the disabled-interaction check inside the frame script of `render-check`. They use `root` and
+ * `report` of that script. They measure each disabled element plain, then with `data-et-force` hover and active, and
+ * restore the element, so they run last.
+ */
+export declare const DISABLED_INTERACTION_STATEMENTS = "\n  const disabledLook = (element) => {\n    const style = getComputedStyle(element);\n    return ['backgroundColor', 'color', 'borderColor', 'boxShadow', 'outline', 'opacity', 'transform'].map((name) => [name, style[name]]);\n  };\n  for (const element of root.querySelectorAll(':disabled, [aria-disabled=\"true\"]')) {\n    if (element.getClientRects().length === 0) continue;\n    const before = element.getAttribute('data-et-force');\n    const transition = element.style.transition;\n    element.style.transition = 'none';\n    element.removeAttribute('data-et-force');\n    const plain = disabledLook(element);\n    const changed = new Set();\n    for (const interaction of ['hover', 'active']) {\n      element.setAttribute('data-et-force', interaction);\n      disabledLook(element).forEach(([name, value], index) => {\n        if (value !== plain[index][1]) changed.add(name);\n      });\n    }\n    if (before === null) element.removeAttribute('data-et-force');\n    else element.setAttribute('data-et-force', before);\n    element.style.transition = transition;\n    if (changed.size > 0)\n      report('DISABLED-INTERACTION', element, 'hover/active styles apply while disabled - add a :not([disabled]) guard (changes ' + [...changed].join(', ') + ')');\n  }\n";

package/src/lib/design/system/disabled-interaction.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DISABLED_INTERACTION_STATEMENTS = exports.DISABLED_INTERACTION_RULE = void 0;
+/** The rule a disabled control breaks when a forced hover or active changes how it looks. */
+exports.DISABLED_INTERACTION_RULE = 'DISABLED-INTERACTION';
+/**
+ * The statements of the disabled-interaction check inside the frame script of `render-check`. They use `root` and
+ * `report` of that script. They measure each disabled element plain, then with `data-et-force` hover and active, and
+ * restore the element, so they run last.
+ */
+exports.DISABLED_INTERACTION_STATEMENTS = `
+  const disabledLook = (element) => {
+    const style = getComputedStyle(element);
+    return ['backgroundColor', 'color', 'borderColor', 'boxShadow', 'outline', 'opacity', 'transform'].map((name) => [name, style[name]]);
+  };
+  for (const element of root.querySelectorAll(':disabled, [aria-disabled="true"]')) {
+    if (element.getClientRects().length === 0) continue;
+    const before = element.getAttribute('data-et-force');
+    const transition = element.style.transition;
+    element.style.transition = 'none';
+    element.removeAttribute('data-et-force');
+    const plain = disabledLook(element);
+    const changed = new Set();
+    for (const interaction of ['hover', 'active']) {
+      element.setAttribute('data-et-force', interaction);
+      disabledLook(element).forEach(([name, value], index) => {
+        if (value !== plain[index][1]) changed.add(name);
+      });
+    }
+    if (before === null) element.removeAttribute('data-et-force');
+    else element.setAttribute('data-et-force', before);
+    element.style.transition = transition;
+    if (changed.size > 0)
+      report('${exports.DISABLED_INTERACTION_RULE}', element, 'hover/active styles apply while disabled - add a :not([disabled]) guard (changes ' + [...changed].join(', ') + ')');
+  }
+`;
+//# sourceMappingURL=disabled-interaction.js.map

package/src/lib/design/system/disabled-interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disabled-interaction.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/disabled-interaction.ts"],"names":[],"mappings":";;;AAAA,6FAA6F;AAChF,QAAA,yBAAyB,GAAG,sBAAsB,CAAC;AAEhE;;;;GAIG;AACU,QAAA,+BAA+B,GAAG;;;;;;;;;;;;;;;;;;;;;;;gBAuB/B,iCAAyB;;CAExC,CAAC"}

package/src/lib/design/system/dom-command.d.ts

@@ -0,0 +1,36 @@
+import { DesignConfig } from '../paths';
+import { StartHarnessServer } from './harness-server';
+import { PointerOpen } from './part-compare';
+import { ResolvedProduct } from './resolve-product';
+export declare const DOM_USAGE = "dom <layer>/<name> --product <name> [--state <name>] [--app] [--url <app dev server url>]";
+export type ReadDom = (options: {
+    target: string;
+    config: DesignConfig;
+    product: ResolvedProduct;
+    part: string;
+    state: string | null;
+    app: boolean;
+    url: string;
+}) => Promise<{
+    state: string;
+    html: string;
+} | string>;
+/** The reason `--app` cannot print a state: compare forces its hover, active or focus, or clicks a trigger to open it. */
+export declare const appRefusalOf: (options: {
+    part: string;
+    state: string;
+    markup: string;
+    open: PointerOpen | string | undefined;
+}) => string | null;
+export declare const readDom: ReadDom;
+/**
+ * `et design dom <layer>/<name> …` prints the pretty-printed HTML of one state of a part: its rendered design, or
+ * with `--app` the harness host element of the app that compare shoots.
+ */
+export declare const designDom: (options: {
+    target: string;
+    argv: string[];
+    invocation: string;
+    read?: ReadDom;
+    start?: StartHarnessServer;
+}) => Promise<0 | 1 | 2>;

package/src/lib/design/system/dom-command.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.designDom = exports.readDom = exports.appRefusalOf = exports.DOM_USAGE = void 0;
+const browser_1 = require("../browser");
+const serve_1 = require("../serve");
+const shot_1 = require("../shot");
+const thumb_1 = require("../thumb");
+const compare_command_1 = require("./compare-command");
+const harness_map_1 = require("./harness-map");
+const harness_server_1 = require("./harness-server");
+const part_go_1 = require("./part-go");
+const part_compare_1 = require("./part-compare");
+const prettier_1 = require("./prettier");
+const resolve_product_1 = require("./resolve-product");
+const cli_args_1 = require("./sketch/cli-args");
+const sketch_1 = require("./sketch/sketch");
+const system_modules_1 = require("./system-modules");
+exports.DOM_USAGE = 'dom <layer>/<name> --product <name> [--state <name>] [--app] [--url <app dev server url>]';
+const messageOf = (error) => (error instanceof Error ? error.message : String(error));
+const refusedOf = ({ part, what, detail = '' }) => `design dom --app cannot render ${what} of ${part}${detail} yet; run it without --app for the design markup`;
+/** The reason `--app` cannot print a state: compare forces its hover, active or focus, or clicks a trigger to open it. */
+const appRefusalOf = (options) => {
+    const { part, state, markup, open } = options;
+    if ((0, part_compare_1.forcedElementsOf)(markup).length > 0)
+        return refusedOf({ part, what: `the forced state ${state}` });
+    if (open === undefined)
+        return null;
+    return refusedOf({
+        part,
+        what: `the click-opened state ${state}`,
+        detail: ` (${typeof open === 'string' ? open : `a click on ${open.control}`})`,
+    });
+};
+exports.appRefusalOf = appRefusalOf;
+const readDom = (_a) => __awaiter(void 0, [_a], void 0, function* ({ target, config, product, part, state: asked, app, url }) {
+    var _b, _c, _d, _e, _f, _g;
+    const frame = (0, compare_command_1.compareFrameOf)({ presets: product.presets, part, preset: null });
+    if (typeof frame === 'string')
+        return frame;
+    if (!(yield (0, browser_1.chromiumOf)(target)))
+        return 'dom 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 { port } = (_b = server.httpServer) === null || _b === void 0 ? void 0 : _b.address();
+        const partShooter = (shooter = (0, shot_1.createPartShooter)({
+            target,
+            base: `http://localhost:${port}`,
+            system: (0, system_modules_1.createSystemModules)({ target, config }),
+            queue,
+        }));
+        const file = (_d = (_c = product.parts.find((candidate) => (0, resolve_product_1.partKeyOf)(candidate) === part)) === null || _c === void 0 ? void 0 : _c.file) !== null && _d !== void 0 ? _d : '';
+        const module = (yield server.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product: product.name })));
+        const loaded = (_e = module.default) === null || _e === void 0 ? void 0 : _e.states;
+        const states = loaded && typeof loaded === 'object' && !Array.isArray(loaded) ? loaded : {};
+        const state = asked !== null && asked !== void 0 ? asked : Object.keys(states)[0];
+        if (state === undefined || !(state in states))
+            return `${part} has no state "${asked !== null && asked !== void 0 ? asked : ''}" - its states: ${Object.keys(states).join(', ')}`;
+        const designOf = (name) => partShooter.pictureOf({
+            product: product.name,
+            part,
+            state: name,
+            preset: frame.preset,
+            width: null,
+            sketch: null,
+            interaction: null,
+            bare: true,
+            emptySlots: true,
+            checker: false,
+            params: new URLSearchParams(),
+        });
+        if (!app) {
+            const design = yield designOf(state);
+            return design.markup === undefined
+                ? `the design of ${part} state ${state} drew no markup`
+                : { state, html: design.markup };
+        }
+        const markups = Object.fromEntries(yield Promise.all(Object.keys(states).map((name) => __awaiter(void 0, void 0, void 0, function* () { var _a; return [name, (_a = (yield designOf(name)).markup) !== null && _a !== void 0 ? _a : '']; }))));
+        const opens = (0, part_compare_1.pointerOpensOf)({
+            states,
+            controls: (_f = module.default) === null || _f === void 0 ? void 0 : _f.controls,
+            drawn: Object.fromEntries(Object.entries(markups).map(([name, markup]) => [name, (0, part_compare_1.drawnSurfacesOf)(markup)])),
+        });
+        const refusal = (0, exports.appRefusalOf)({ part, state, markup: (_g = markups[state]) !== null && _g !== void 0 ? _g : '', open: opens[state] });
+        if (refusal !== null)
+            return refusal;
+        const pageUrl = (0, part_compare_1.harnessUrlOf)({ url, part, state, props: states[state], layout: frame.layout });
+        const html = yield queue.run((browser) => __awaiter(void 0, void 0, void 0, function* () {
+            const context = yield browser.newContext({ viewport: (0, shot_1.viewportOf)(frame.size), deviceScaleFactor: 1 });
+            try {
+                const page = yield context.newPage();
+                yield page.goto(pageUrl, { timeout: thumb_1.DRAW_TIMEOUT_MS });
+                yield page.locator(part_compare_1.HARNESS_HOST_SELECTOR).first().waitFor({ state: 'visible', timeout: thumb_1.DRAW_TIMEOUT_MS });
+                yield (0, thumb_1.awaitFonts)(page);
+                return (yield page.evaluate(`document.querySelector(${JSON.stringify(part_compare_1.HARNESS_HOST_SELECTOR)})?.outerHTML ?? null`));
+            }
+            finally {
+                yield context.close();
+            }
+        }));
+        return html === null ? `the harness page ${pageUrl} showed no ${part_compare_1.HARNESS_HOST_SELECTOR} element` : { state, html };
+    }
+    catch (error) {
+        return messageOf(error);
+    }
+    finally {
+        yield (shooter === null || shooter === void 0 ? void 0 : shooter.close());
+        yield queue.close();
+        yield server.close();
+    }
+});
+exports.readDom = readDom;
+/**
+ * `et design dom <layer>/<name> …` prints the pretty-printed HTML of one state of a part: its rendered design, or
+ * with `--app` the harness host element of the app that compare shoots.
+ */
+const designDom = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const { target, invocation } = options;
+    const args = (0, cli_args_1.argsOf)(options.argv, { values: ['--product', '--state', '--url'], switches: ['--app'] });
+    if (typeof args === 'string' || args.positional.length !== 1) {
+        if (typeof args === 'string')
+            console.error(args);
+        console.error(`usage: ${invocation} ${exports.DOM_USAGE}`);
+        return 2;
+    }
+    const config = (0, cli_args_1.configOf)(target);
+    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 app = args.flags.has('--app');
+    const part = (0, resolve_product_1.partKeyOf)(parsed);
+    const found = (0, part_go_1.goPartOf)({ product, part });
+    const refusal = typeof found === 'string' ? found : app ? (0, harness_map_1.harnessStaleOf)({ target, product }) : null;
+    if (refusal !== null) {
+        console.error(refusal);
+        return 1;
+    }
+    const read = (_a = options.read) !== null && _a !== void 0 ? _a : exports.readDom;
+    const run = (url) => { var _a; return read({ target, config, product, part, state: (_a = args.values['--state']) !== null && _a !== void 0 ? _a : null, app, url }); };
+    const result = app
+        ? yield (0, harness_server_1.withHarnessUrl)({ target, product, url: args.values['--url'], start: options.start, run })
+        : yield run('');
+    if (typeof result === 'string') {
+        console.error(result);
+        return 1;
+    }
+    const formatted = (0, prettier_1.formattedTextOf)({ target, file: 'dom.html', text: result.html });
+    if (typeof formatted !== 'string') {
+        console.error(formatted.error);
+        return 1;
+    }
+    console.log(formatted.trimEnd());
+    return 0;
+});
+exports.designDom = designDom;
+//# sourceMappingURL=dom-command.js.map

package/src/lib/design/system/dom-command.js.map

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

package/src/lib/design/system/drawn-open-points.d.ts

@@ -1,10 +1,32 @@
 import { DesignConfig } from '../paths';
+import { CompletenessGap } from './complete';
 import { OpenPointsInput } from './open-points';
+import { BusyState, RenderIssue } from './render-check';
 import { ResolvedProduct } from './resolve-product';
-export type DrawnFindings = Required<Pick<OpenPointsInput, 'missingStates' | 'contrasts'>>;
+export type DrawnFindings = Required<Pick<OpenPointsInput, 'missingStates' | 'contrasts' | 'busyStates'>>;
+/** Whether a render issue says a whole part did not draw. */
+export declare const isPartUndrawn: (issue: RenderIssue) => boolean;
+/** Whether a render issue says one state of a part did not draw. */
+export declare const isStateUndrawn: (issue: RenderIssue) => boolean;
+/** The parts of a product whose control states the completeness check draws, of `parts` when given. */
+export declare const statefulPartsOf: (product: ResolvedProduct, parts: string[] | null) => string[];
 /**
- * Draws the named parts of a product as `design check --complete` does and answers their contrasts and missing
- * control states, or why they could not be drawn.
+ * The open-point findings of a drawn product: the contrasts its render `issues` found, the states its `busy` marks name, the missing control states in
+ * the `gaps` of its completeness check, and one `<part>: <why>` line per part or state the render issues say did not
+ * draw and per stateful part the completeness check could not draw.
+ */
+export declare const drawnFindingsFrom: (options: {
+    product: ResolvedProduct;
+    issues: RenderIssue[];
+    busy?: BusyState[];
+    gaps: Map<string, CompletenessGap[] | string> | null;
+    stateful: string[];
+}) => DrawnFindings & {
+    failed: string[];
+};
+/**
+ * Draws the named parts of a product as `design check` does and answers their contrasts and missing control states,
+ * or why they could not be drawn.
  */
 export declare const drawnFindingsOf: (options: {
     target: string;

package/src/lib/design/system/drawn-open-points.js

@@ -8,15 +8,68 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawnFindingsOf = void 0;
+exports.drawnFindingsOf = exports.drawnFindingsFrom = exports.statefulPartsOf = exports.isStateUndrawn = exports.isPartUndrawn = void 0;
 const complete_1 = require("./complete");
 const read_open_points_1 = require("./read-open-points");
 const render_check_1 = require("./render-check");
 const resolve_product_1 = require("./resolve-product");
+/** Whether a render issue says a whole part did not draw. */
+const isPartUndrawn = (issue) => issue.rule === render_check_1.RENDER_TIMEOUT ||
+    (issue.rule === 'RENDER' && issue.state === '-' && !issue.detail.startsWith('logged SDK error'));
+exports.isPartUndrawn = isPartUndrawn;
+/** Whether a render issue says one state of a part did not draw. */
+const isStateUndrawn = (issue) => issue.rule === 'RENDER' && issue.state !== '-' && issue.detail.startsWith('design-explore:');
+exports.isStateUndrawn = isStateUndrawn;
+const undrawnLinesOf = (issues) => [
+    ...new Set(issues.flatMap((issue) => {
+        if ((0, exports.isPartUndrawn)(issue))
+            return [`${issue.part}: ${issue.detail}`];
+        return (0, exports.isStateUndrawn)(issue) ? [`${issue.part}: state ${issue.state} did not draw - ${issue.detail}`] : [];
+    })),
+];
+/** The parts of a product whose control states the completeness check draws, of `parts` when given. */
+const statefulPartsOf = (product, parts) => product.parts
+    .filter((part) => part.layer !== 'pages' && part.layer !== 'foundations')
+    .map(resolve_product_1.partKeyOf)
+    .filter((key) => parts === null || parts.includes(key));
+exports.statefulPartsOf = statefulPartsOf;
 /**
- * Draws the named parts of a product as `design check --complete` does and answers their contrasts and missing
- * control states, or why they could not be drawn.
+ * The open-point findings of a drawn product: the contrasts its render `issues` found, the states its `busy` marks name, the missing control states in
+ * the `gaps` of its completeness check, and one `<part>: <why>` line per part or state the render issues say did not
+ * draw and per stateful part the completeness check could not draw.
+ */
+const drawnFindingsFrom = (options) => {
+    var _a;
+    const { product, issues, gaps, stateful } = options;
+    const own = issues.filter((issue) => issue.product === product.name && issue.sketch === null);
+    return {
+        contrasts: (0, read_open_points_1.contrastsOf)(own),
+        busyStates: ((_a = options.busy) !== null && _a !== void 0 ? _a : [])
+            .filter((busy) => busy.product === product.name && busy.sketch === null)
+            .map(({ part, state }) => ({ part, state })),
+        missingStates: gaps ? (0, read_open_points_1.missingStatesOf)(gaps) : [],
+        failed: [
+            ...undrawnLinesOf(own),
+            ...[...(gaps !== null && gaps !== void 0 ? gaps : [])].flatMap(([part, found]) => typeof found === 'string' && stateful.includes(part) ? [`${part}: ${found}`] : []),
+        ],
+    };
+};
+exports.drawnFindingsFrom = drawnFindingsFrom;
+/**
+ * Draws the named parts of a product as `design check` does and answers their contrasts and missing control states,
+ * or why they could not be drawn.
  */
 const drawnFindingsOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
@@ -24,20 +77,18 @@ const drawnFindingsOf = (options) => __awaiter(void 0, void 0, void 0, function*
     const rendered = yield (0, render_check_1.renderIssuesOf)({ target, config, jobs: [{ product: product.name, sketch: null, parts }] });
     if ('unavailable' in rendered)
         return rendered;
-    const stateful = product.parts
-        .filter((part) => part.layer !== 'pages' && part.layer !== 'foundations')
-        .map(resolve_product_1.partKeyOf)
-        .filter((key) => parts.includes(key));
+    const stateful = (0, exports.statefulPartsOf)(product, parts);
     const checked = stateful.length > 0 ? yield (0, complete_1.partsCompletenessOf)({ target, config, product, parts: stateful }) : null;
     if (checked && 'unavailable' in checked)
         return checked;
-    const failed = [...((_a = checked === null || checked === void 0 ? void 0 : checked.gaps) !== null && _a !== void 0 ? _a : [])].flatMap(([part, gaps]) => typeof gaps === 'string' && stateful.includes(part) ? [`${part}: ${gaps}`] : []);
-    if (failed.length > 0)
-        return { unavailable: failed.join('; ') };
-    return {
-        contrasts: (0, read_open_points_1.contrastsOf)(rendered.issues.filter((issue) => issue.product === product.name && issue.sketch === null)),
-        missingStates: checked ? (0, read_open_points_1.missingStatesOf)(checked.gaps) : [],
-    };
+    const _b = (0, exports.drawnFindingsFrom)({
+        product,
+        issues: rendered.issues,
+        busy: rendered.busy,
+        gaps: (_a = checked === null || checked === void 0 ? void 0 : checked.gaps) !== null && _a !== void 0 ? _a : null,
+        stateful,
+    }), { failed } = _b, findings = __rest(_b, ["failed"]);
+    return failed.length > 0 ? { unavailable: failed.join('; ') } : findings;
 });
 exports.drawnFindingsOf = drawnFindingsOf;
 //# sourceMappingURL=drawn-open-points.js.map

package/src/lib/design/system/drawn-open-points.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawn-open-points.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/drawn-open-points.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,yCAAiD;AAEjD,yDAAkE;AAClE,iDAAgD;AAChD,uDAA+D;AAI/D;;;GAGG;AACI,MAAM,eAAe,GAAG,CAAO,OAKrC,EAAoD,EAAE;;IACrD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IACnD,MAAM,QAAQ,GAAG,MAAM,IAAA,6BAAc,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAElH,IAAI,aAAa,IAAI,QAAQ;QAAE,OAAO,QAAQ,CAAC;IAE/C,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK;SAC3B,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC;SACxE,GAAG,CAAC,2BAAS,CAAC;SACd,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,IAAA,8BAAmB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAErH,IAAI,OAAO,IAAI,aAAa,IAAI,OAAO;QAAE,OAAO,OAAO,CAAC;IAExD,MAAM,MAAM,GAAG,CAAC,GAAG,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,CACjE,OAAO,IAAI,KAAK,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAChF,CAAC;IAEF,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,EAAE,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IAEjE,OAAO;QACL,SAAS,EAAE,IAAA,8BAAW,EAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC;QAClH,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,IAAA,kCAAe,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;KAC5D,CAAC;AACJ,CAAC,CAAA,CAAC;AA7BW,QAAA,eAAe,mBA6B1B"}
+{"version":3,"file":"drawn-open-points.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/drawn-open-points.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,yCAAkE;AAElE,yDAAkE;AAClE,iDAAwF;AACxF,uDAA+D;AAI/D,6DAA6D;AACtD,MAAM,aAAa,GAAG,CAAC,KAAkB,EAAE,EAAE,CAClD,KAAK,CAAC,IAAI,KAAK,6BAAc;IAC7B,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAFtF,QAAA,aAAa,iBAEyE;AAEnG,oEAAoE;AAC7D,MAAM,cAAc,GAAG,CAAC,KAAkB,EAAE,EAAE,CACnD,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,KAAK,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;AADlF,QAAA,cAAc,kBACoE;AAE/F,MAAM,cAAc,GAAG,CAAC,MAAqB,EAAE,EAAE,CAAC;IAChD,GAAG,IAAI,GAAG,CACR,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACvB,IAAI,IAAA,qBAAa,EAAC,KAAK,CAAC;YAAE,OAAO,CAAC,GAAG,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;QAEpE,OAAO,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,WAAW,KAAK,CAAC,KAAK,mBAAmB,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7G,CAAC,CAAC,CACH;CACF,CAAC;AAEF,uGAAuG;AAChG,MAAM,eAAe,GAAG,CAAC,OAAwB,EAAE,KAAsB,EAAE,EAAE,CAClF,OAAO,CAAC,KAAK;KACV,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC;KACxE,GAAG,CAAC,2BAAS,CAAC;KACd,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAJ/C,QAAA,eAAe,mBAIgC;AAE5D;;;;GAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,OAMjC,EAAwC,EAAE;;IACzC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IACpD,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC;IAE9F,OAAO;QACL,SAAS,EAAE,IAAA,8BAAW,EAAC,GAAG,CAAC;QAC3B,UAAU,EAAE,CAAC,MAAA,OAAO,CAAC,IAAI,mCAAI,EAAE,CAAC;aAC7B,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC;aACvE,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,IAAA,kCAAe,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;QAChD,MAAM,EAAE;YACN,GAAG,cAAc,CAAC,GAAG,CAAC;YACtB,GAAG,CAAC,GAAG,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAC7C,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAClF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,iBAAiB,qBAuB5B;AAEF;;;GAGG;AACI,MAAM,eAAe,GAAG,CAAO,OAKrC,EAAoD,EAAE;;IACrD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IACnD,MAAM,QAAQ,GAAG,MAAM,IAAA,6BAAc,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAElH,IAAI,aAAa,IAAI,QAAQ;QAAE,OAAO,QAAQ,CAAC;IAE/C,MAAM,QAAQ,GAAG,IAAA,uBAAe,EAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,IAAA,8BAAmB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAErH,IAAI,OAAO,IAAI,aAAa,IAAI,OAAO;QAAE,OAAO,OAAO,CAAC;IAExD,MAAM,KAA0B,IAAA,yBAAiB,EAAC;QAChD,OAAO;QACP,MAAM,EAAE,QAAQ,CAAC,MAAM;QACvB,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,IAAI,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,IAAI;QAC3B,QAAQ;KACT,CAAC,EANI,EAAE,MAAM,OAMZ,EANiB,QAAQ,cAArB,UAAuB,CAM3B,CAAC;IAEH,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC3E,CAAC,CAAA,CAAC;AA1BW,QAAA,eAAe,mBA0B1B"}

package/src/lib/design/system/dropped-props.d.ts

@@ -0,0 +1,25 @@
+import { DesignConfig } from '../paths';
+import { Problem } from './problem';
+import { ResolvedProduct } from './resolve-product';
+/**
+ * The input names of the one `@Component` class a source declares (`input()`, `input.required()`, `model()` and
+ * `@Input()`, aliases applied), or `null` when the class extends another or uses host directives, so its inputs are not all in the source.
+ */
+export declare const componentInputsOf: (source: string) => string[] | null;
+/**
+ * The props of each state that no component input takes and compare could not reproduce either: `designOnlyPropsOf`
+ * with no drawn markup, so a state that sets an interaction value counts as forcing it.
+ */
+export declare const droppedStatePropsOf: (options: {
+    states: Record<string, unknown>;
+    inputs: readonly string[];
+    sampled?: readonly string[];
+}) => Map<string, string[]>;
+export declare const droppedPropsMessageOf: (dropped: readonly string[]) => string;
+/** `DROPPED-PROP` for each part whose design states set a prop its app component has no input for, loading the states without drawing. */
+export declare const droppedPropProblemsOf: (options: {
+    target: string;
+    config: DesignConfig;
+    product: ResolvedProduct;
+    part?: string;
+}) => Promise<Problem[]>;