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

package/src/lib/design/motion-command.js

@@ -0,0 +1,308 @@
+"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.designMotion = exports.motionSummaryOf = exports.flowReportOf = exports.motionReportOf = exports.MOTION_USAGE = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const contact_sheet_1 = require("./contact-sheet");
+const motion_flow_1 = require("./motion-flow");
+const motion_shot_1 = require("./motion-shot");
+const paths_1 = require("./paths");
+const serve_1 = require("./serve");
+const shot_1 = require("./shot");
+const shot_command_1 = require("./shot-command");
+const flow_1 = require("./system/flows/flow");
+const cli_args_1 = require("./system/sketch/cli-args");
+const system_modules_1 = require("./system/system-modules");
+const thumb_1 = require("./thumb");
+exports.MOTION_USAGE = `motion shots <layer>/<name> <motion> [--variant <key>] [--mode <${motion_shot_1.MOTION_MODES.join('|')}>] [--preset <preset> | --width <px>] [--scale <1-4>] [--product <name>] [--surface <name>] [--color <name>] [--scheme <light|dark>] [--out <file>]
+  motion flow <flow> <line id | part#state→part#state> [--mode <${motion_shot_1.MOTION_MODES.join('|')}>] [--preset <preset>] [--scale <1-4>] [--product <name>] [--surface <name>] [--color <name>] [--scheme <light|dark>] [--out <file>]`;
+const motionsOf = (part) => {
+    const motions = part === null || part === void 0 ? void 0 : part.motions;
+    return motions && typeof motions === 'object' ? motions : {};
+};
+/** The JSON `motion shots` writes next to its sheet: per mode the end, the keyframe times and the tracks. */
+const motionReportOf = (options) => {
+    var _a;
+    return ({
+        product: options.product,
+        part: options.part,
+        motion: options.motion,
+        from: options.declared.from,
+        to: options.declared.to,
+        interrupt: (_a = options.declared.interrupt) !== null && _a !== void 0 ? _a : null,
+        preset: options.preset,
+        width: options.width,
+        modes: Object.fromEntries(Object.entries(options.drawn).map(([mode, { end, tracks, keyframes }]) => [
+            mode,
+            { end, keyframes: keyframes.map((keyframe) => keyframe.ms), tracks },
+        ])),
+    });
+};
+exports.motionReportOf = motionReportOf;
+/** The JSON `motion flow` writes next to its sheet: the line, its ends, and per mode the end, the keyframe times and the tracks. */
+const flowReportOf = (options) => {
+    var _a;
+    return ({
+        product: options.product,
+        flow: options.flow.name,
+        line: (0, motion_flow_1.flowLineAddressOf)(options.line),
+        label: (_a = options.line.label) !== null && _a !== void 0 ? _a : null,
+        from: (0, flow_1.flowStateKeyOf)(options.line.from),
+        to: (0, flow_1.flowStateKeyOf)(options.line.to),
+        preset: options.preset,
+        modes: Object.fromEntries(Object.entries(options.drawn).map(([mode, { end, tracks, keyframes }]) => [
+            mode,
+            { end, keyframes: keyframes.map((keyframe) => keyframe.ms), tracks },
+        ])),
+    });
+};
+exports.flowReportOf = flowReportOf;
+/** One line per mode: when the motion ends and what runs, or that it runs no animation. */
+const motionSummaryOf = (drawn) => Object.entries(drawn).map(([mode, { end, tracks, keyframes }]) => tracks.length === 0
+    ? `${mode}: runs no animation`
+    : `${mode}: ends at ${end} ms, ${tracks.length} track${tracks.length === 1 ? '' : 's'}, keyframes at ${keyframes.map((keyframe) => keyframe.ms).join(', ')} ms`);
+exports.motionSummaryOf = motionSummaryOf;
+const MOTION_FLAGS = [
+    '--product',
+    '--variant',
+    '--mode',
+    '--preset',
+    '--width',
+    '--scale',
+    '--surface',
+    '--color',
+    '--scheme',
+    '--out',
+];
+/** Opens a design server and a shooter, lets `draw` draw each mode, and writes the contact sheet and the JSON report. */
+const writeMotionSheet = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const { target, config, system } = options;
+    const queue = (0, thumb_1.createDrawQueue)({ target });
+    const server = yield (0, serve_1.createDesignServer)({ target, config, listen: true, port: 0 });
+    try {
+        yield server.listen();
+        const { port } = (_a = server.httpServer) === null || _a === void 0 ? void 0 : _a.address();
+        const shooter = (0, shot_1.createPartShooter)({ target, base: `http://localhost:${port}`, system });
+        try {
+            const sheet = yield options.draw({ server, shooter });
+            if (typeof sheet === 'string') {
+                console.error(sheet);
+                return 1;
+            }
+            const rows = Object.entries(sheet.drawn).map(([shown, { keyframes }]) => keyframes.map(({ ms, png }) => ({ label: `${shown} ${ms} ms`, png })));
+            const out = (0, path_1.resolve)(target, sheet.out);
+            const json = out.replace(/(\.png)?$/u, '.json');
+            const { png } = yield queue.run((browser) => (0, contact_sheet_1.contactSheetOf)({ browser, rows }));
+            (0, fs_1.mkdirSync)((0, path_1.dirname)(out), { recursive: true });
+            (0, fs_1.writeFileSync)(out, png);
+            (0, fs_1.writeFileSync)(json, `${JSON.stringify(sheet.report, null, 2)}\n`);
+            console.log(out);
+            console.log(json);
+            for (const line of (0, exports.motionSummaryOf)(sheet.drawn))
+                console.log(line);
+            return 0;
+        }
+        finally {
+            yield shooter.close();
+        }
+    }
+    catch (error) {
+        console.error(error instanceof Error ? error.message : String(error));
+        return 1;
+    }
+    finally {
+        yield queue.close();
+        yield server.close();
+    }
+});
+const modesOf = (mode) => (mode ? [mode] : motion_shot_1.MOTION_MODES);
+/**
+ * `et design motion flow <flow> <line>` draws a flow line with `"transition": "view"`: the `from` page morphs to the `to`
+ * page inside a View Transition, shot in the whole preset viewport at each keyframe time, in full and reduced motion.
+ */
+const designMotionFlow = (options) => {
+    var _a, _b, _c, _d;
+    const { target, config, args, usage } = options;
+    const [, flowName, address, ...extra] = args.positional;
+    const mode = args.values['--mode'];
+    const scale = Number((_a = args.values['--scale']) !== null && _a !== void 0 ? _a : 1);
+    if (!flowName ||
+        !address ||
+        extra.length > 0 ||
+        args.flags.size > 0 ||
+        args.values['--width'] !== undefined ||
+        args.values['--variant'] !== undefined ||
+        (mode !== undefined && !motion_shot_1.MOTION_MODES.includes(mode)) ||
+        !(Number.isInteger(scale) && scale >= 1 && scale <= 4) ||
+        !(0, shot_1.isSchemeFlag)(args.values['--scheme'])) {
+        console.error(usage);
+        return Promise.resolve(2);
+    }
+    const resolved = (0, cli_args_1.oneProductOf)({ target, config, asked: args.values['--product'] });
+    if (typeof resolved === 'string') {
+        console.error(resolved);
+        return Promise.resolve(1);
+    }
+    const product = resolved.name;
+    const { flows, unreadable } = (0, flow_1.listFlows)(resolved.dir);
+    const flow = flows.find((found) => found.name === flowName);
+    if (!flow) {
+        const broken = unreadable.find((entry) => entry.file.endsWith(`/${flowName}.json`));
+        console.error(broken
+            ? `design-explore: flows/${flowName}.json ${broken.problem}`
+            : `design-explore: product "${product}" has no flow "${flowName}" (flows: ${flows.map((found) => found.name).join(', ') || 'none'})`);
+        return Promise.resolve(1);
+    }
+    const line = (0, motion_flow_1.flowLineOf)(flow, address);
+    if (typeof line === 'string') {
+        console.error(`design-explore: ${line}`);
+        return Promise.resolve(1);
+    }
+    const system = (0, system_modules_1.createSystemModules)({ target, config });
+    const preset = (_b = args.values['--preset']) !== null && _b !== void 0 ? _b : Object.keys((_d = (_c = system.productOf(product)) === null || _c === void 0 ? void 0 : _c.presets) !== null && _d !== void 0 ? _d : {})[0];
+    if (!preset) {
+        console.error(`design-explore: product "${product}" has no preset - a flow line is drawn in a preset viewport`);
+        return Promise.resolve(1);
+    }
+    const params = (0, shot_1.drawParamsOf)(args.values);
+    const name = (0, motion_flow_1.flowLineAddressOf)(line);
+    return writeMotionSheet({
+        target,
+        config,
+        system,
+        draw: (_a) => __awaiter(void 0, [_a], void 0, function* ({ shooter }) {
+            var _b;
+            const drawn = {};
+            for (const shown of modesOf(mode)) {
+                drawn[shown] = yield shooter.motionOf({
+                    product,
+                    part: line.from.part,
+                    state: line.from.state,
+                    preset,
+                    width: null,
+                    sketch: null,
+                    interaction: null,
+                    motion: name,
+                    flowTo: line.to,
+                    mode: shown,
+                    params,
+                });
+            }
+            return {
+                drawn,
+                out: (_b = args.values['--out']) !== null && _b !== void 0 ? _b : `${(0, paths_1.workRootOf)(target)}/shots/${product}-flow-${flow.name}-${name.replace(/[^A-Za-z0-9._-]+/gu, '-')}.png`,
+                report: (0, exports.flowReportOf)({ product, flow, line, preset, drawn }),
+            };
+        }),
+    });
+};
+/**
+ * `et design motion shots <layer>/<name> <motion>` draws a motion of a part at each keyframe time, in full and reduced
+ * motion, into one contact sheet PNG with a row per mode, writes its tracks as JSON next to it, and prints both paths.
+ * `et design motion flow` draws a flow line the same way.
+ */
+const designMotion = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const { target, argv, invocation } = options;
+    const args = (0, cli_args_1.argsOf)(argv, MOTION_FLAGS);
+    const usage = `usage: ${invocation} ${exports.MOTION_USAGE}`;
+    if (typeof args === 'string') {
+        console.error(`${args}\n${usage}`);
+        return 2;
+    }
+    const [command, part, motion, ...extra] = args.positional;
+    const mode = args.values['--mode'];
+    const width = args.values['--width'] === undefined ? null : Number(args.values['--width']);
+    const preset = (_a = args.values['--preset']) !== null && _a !== void 0 ? _a : null;
+    const scale = Number((_b = args.values['--scale']) !== null && _b !== void 0 ? _b : 1);
+    const config = (0, cli_args_1.configOf)(target);
+    if (command === 'flow') {
+        if (typeof config === 'string') {
+            console.error(config);
+            return 1;
+        }
+        return designMotionFlow({ target, config, args, usage });
+    }
+    if (command !== 'shots' ||
+        !part ||
+        !motion ||
+        extra.length > 0 ||
+        args.flags.size > 0 ||
+        (mode !== undefined && !motion_shot_1.MOTION_MODES.includes(mode)) ||
+        (width !== null && !(Number.isInteger(width) && width > 0)) ||
+        (preset && width) ||
+        !(Number.isInteger(scale) && scale >= 1 && scale <= 4) ||
+        !(0, shot_1.isSchemeFlag)(args.values['--scheme'])) {
+        console.error(usage);
+        return 2;
+    }
+    if (typeof config === 'string') {
+        console.error(config);
+        return 1;
+    }
+    const resolved = (0, shot_command_1.shotProductOf)({ target, config, asked: args.values['--product'], part });
+    if (typeof resolved === 'string') {
+        console.error(resolved);
+        return 1;
+    }
+    const product = resolved.name;
+    const system = (0, system_modules_1.createSystemModules)({ target, config });
+    const variant = args.values['--variant'];
+    const sketch = variant === undefined ? null : { target: part, variant };
+    const found = system.partOf({ product, part, sketch });
+    if (!found) {
+        console.error(sketch
+            ? `design-explore: variant "${variant}" of the sketch on ${part} in product "${product}" has no part "${part}"`
+            : `design-explore: product "${product}" has no part "${part}"`);
+        return 1;
+    }
+    return writeMotionSheet({
+        target,
+        config,
+        system,
+        draw: (_a) => __awaiter(void 0, [_a], void 0, function* ({ server, shooter }) {
+            var _b, _c, _d, _e;
+            const module = (yield server.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file: found.file, product, sketch })));
+            const motions = motionsOf(module.default);
+            const declared = motions[motion];
+            if (!declared)
+                return `design-explore: ${part} has no motion "${motion}" (motions: ${Object.keys(motions).join(', ') || 'none'})`;
+            const presets = (_c = (_b = system.productOf(product)) === null || _b === void 0 ? void 0 : _b.presets) !== null && _c !== void 0 ? _c : {};
+            const chosenPreset = preset !== null && preset !== void 0 ? preset : (part.startsWith('pages/') ? ((_d = Object.keys(presets)[0]) !== null && _d !== void 0 ? _d : null) : null);
+            const params = (0, shot_1.drawParamsOf)(args.values);
+            const drawn = {};
+            for (const shown of modesOf(mode)) {
+                drawn[shown] = yield shooter.motionOf({
+                    product,
+                    part,
+                    state: declared.from,
+                    preset: chosenPreset,
+                    width: chosenPreset ? null : width,
+                    sketch,
+                    interaction: null,
+                    motion,
+                    at: declared.at,
+                    mode: shown,
+                    params,
+                });
+            }
+            return {
+                drawn,
+                out: (_e = args.values['--out']) !== null && _e !== void 0 ? _e : `${(0, paths_1.workRootOf)(target)}/shots/${product}-${part.replace('/', '-')}-motion-${motion}.png`,
+                report: (0, exports.motionReportOf)({ product, part, motion, declared, preset: chosenPreset, width, drawn }),
+            };
+        }),
+    });
+});
+exports.designMotion = designMotion;
+//# sourceMappingURL=motion-command.js.map

package/src/lib/design/motion-command.js.map

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

package/src/lib/design/motion-endpoint.d.ts

@@ -0,0 +1,61 @@
+import { IncomingMessage, ServerResponse } from 'http';
+import { MotionMode, MotionPictures } from './motion-shot';
+import { PartAddress } from './shot';
+import { SketchVariant, SystemModules } from './system/system-modules';
+export type DeclaredMotion = {
+    from: string;
+    to: string;
+    at?: number[];
+};
+export type MotionDraw = PartAddress & {
+    motion: string;
+    at?: readonly number[];
+    mode: MotionMode;
+    params: URLSearchParams;
+};
+/** The JSON `GET /__design/motion` answers: one mode of a motion, its tracks and a URL per keyframe image. */
+export type MotionAnswer = {
+    product: string;
+    part: string;
+    motion: string;
+    from: string;
+    to: string;
+    mode: MotionMode;
+    preset: string | null;
+    width: number | null;
+    end: number;
+    tracks: unknown[];
+    keyframes: {
+        ms: number;
+        src: string;
+    }[];
+};
+type MotionSource = {
+    system: SystemModules;
+    motionOf: (draw: MotionDraw) => Promise<MotionPictures>;
+    declaredOf: (address: {
+        product: string;
+        part: string;
+        sketch: SketchVariant | null;
+    }) => Promise<Record<string, DeclaredMotion>>;
+};
+export declare class MotionRequestError extends Error {
+    constructor();
+}
+/**
+ * Draws one mode of a motion through `motionOf` and answers its JSON. A page without a preset or width draws at the
+ * first product preset, as `et design motion shots` does.
+ */
+export declare const motionAnswerOf: (options: MotionSource & {
+    url: URL;
+}) => Promise<{
+    answer: MotionAnswer;
+    pictures: MotionPictures;
+    ms: number | null;
+}>;
+/**
+ * `GET /__design/motion?product=&part=&motion=` answers a {@link MotionAnswer}; with `&frame=<ms>` it answers the PNG of
+ * that keyframe. Takes `sketch`+`variant`, `mode`, `preset` or `width`, `scale`, `surface` and `color` like the shot.
+ */
+export declare const motionMiddleware: (source: MotionSource) => (request: IncomingMessage, response: ServerResponse) => void;
+export {};

package/src/lib/design/motion-endpoint.js

@@ -0,0 +1,133 @@
+"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.motionMiddleware = exports.motionAnswerOf = exports.MotionRequestError = void 0;
+const motion_shot_1 = require("./motion-shot");
+const studio_api_1 = require("./studio-api");
+const thumb_1 = require("./thumb");
+class MotionRequestError extends Error {
+    constructor() {
+        super('design-explore: pass product, part, motion, and optionally sketch and variant, mode (full|reduced), preset or width, and frame=<ms>');
+    }
+}
+exports.MotionRequestError = MotionRequestError;
+const askedOf = (params) => {
+    const product = params.get('product');
+    const part = params.get('part');
+    const motion = params.get('motion');
+    const sketch = params.get('sketch');
+    const variant = params.get('variant');
+    const preset = params.get('preset');
+    const width = params.get('width');
+    const mode = params.get('mode');
+    const frame = params.get('frame');
+    const pixels = width === null ? null : Number(width);
+    const ms = frame === null ? null : Number(frame);
+    if (!product ||
+        !part ||
+        !motion ||
+        (mode !== null && !motion_shot_1.MOTION_MODES.includes(mode)) ||
+        (pixels !== null && !(Number.isInteger(pixels) && pixels > 0)) ||
+        (preset && pixels !== null) ||
+        (ms !== null && !Number.isFinite(ms)))
+        return null;
+    return {
+        product,
+        part,
+        motion,
+        sketch: sketch && variant ? { target: sketch, variant } : null,
+        preset,
+        width: pixels,
+        mode: (mode !== null && mode !== void 0 ? mode : 'full'),
+        ms,
+    };
+};
+/**
+ * Draws one mode of a motion through `motionOf` and answers its JSON. A page without a preset or width draws at the
+ * first product preset, as `et design motion shots` does.
+ */
+const motionAnswerOf = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d;
+    const { system, url } = options;
+    const asked = askedOf(url.searchParams);
+    if (!asked)
+        throw new MotionRequestError();
+    const { product, part, motion, sketch, mode } = asked;
+    const motions = yield options.declaredOf({ product, part, sketch });
+    const declared = motions[motion];
+    if (!declared) {
+        throw new thumb_1.ThumbMissingError(`design-explore: ${part} has no motion "${motion}" (motions: ${Object.keys(motions).join(', ') || 'none'})`);
+    }
+    const presets = (_b = (_a = system.productOf(product)) === null || _a === void 0 ? void 0 : _a.presets) !== null && _b !== void 0 ? _b : {};
+    const preset = (_c = asked.preset) !== null && _c !== void 0 ? _c : (part.startsWith('pages/') && asked.width === null ? ((_d = Object.keys(presets)[0]) !== null && _d !== void 0 ? _d : null) : null);
+    const width = preset ? null : asked.width;
+    const pictures = yield options.motionOf({
+        product,
+        part,
+        state: declared.from,
+        preset,
+        width,
+        sketch,
+        interaction: null,
+        motion,
+        at: declared.at,
+        mode,
+        params: url.searchParams,
+    });
+    const srcOf = (ms) => {
+        const params = new URLSearchParams(url.searchParams);
+        params.set('frame', String(ms));
+        return `${studio_api_1.MOTION_PATH}?${params}`;
+    };
+    const answer = {
+        product,
+        part,
+        motion,
+        from: declared.from,
+        to: declared.to,
+        mode,
+        preset,
+        width,
+        end: pictures.end,
+        tracks: pictures.tracks,
+        keyframes: pictures.keyframes.map(({ ms }) => ({ ms, src: srcOf(ms) })),
+    };
+    return { answer, pictures, ms: asked.ms };
+});
+exports.motionAnswerOf = motionAnswerOf;
+/**
+ * `GET /__design/motion?product=&part=&motion=` answers a {@link MotionAnswer}; with `&frame=<ms>` it answers the PNG of
+ * that keyframe. Takes `sketch`+`variant`, `mode`, `preset` or `width`, `scale`, `surface` and `color` like the shot.
+ */
+const motionMiddleware = (source) => (request, response) => {
+    var _a;
+    const url = new URL((_a = request.url) !== null && _a !== void 0 ? _a : '', 'http://localhost');
+    const answered = (0, exports.motionAnswerOf)(Object.assign(Object.assign({}, source), { url }));
+    answered.catch((error) => {
+        if (error instanceof MotionRequestError)
+            (0, thumb_1.send)(response, { status: 400, type: 'text/plain; charset=utf-8', body: error.message });
+        else
+            (0, thumb_1.sendShot)(response, Promise.reject(error));
+    });
+    void answered.then(({ answer, pictures, ms }) => {
+        if (ms === null) {
+            (0, thumb_1.send)(response, { status: 200, type: 'application/json', body: JSON.stringify(answer) });
+            return;
+        }
+        const keyframe = pictures.keyframes.find((candidate) => candidate.ms === ms);
+        if (keyframe)
+            (0, thumb_1.send)(response, { status: 200, type: 'image/png', body: keyframe.png });
+        else
+            (0, thumb_1.sendShot)(response, Promise.reject(new thumb_1.ThumbMissingError(`design-explore: ${ms} ms is not a keyframe - the keyframes are at ${answer.keyframes.map((frame) => frame.ms).join(', ')} ms`)));
+    }, () => undefined);
+};
+exports.motionMiddleware = motionMiddleware;
+//# sourceMappingURL=motion-endpoint.js.map

package/src/lib/design/motion-endpoint.js.map

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

package/src/lib/design/motion-flow.d.ts

@@ -0,0 +1,5 @@
+import { DesignFlow, FlowLine } from './system/flows/flow';
+/** How `et design motion flow` names a line: its `id`, else `<part>#<state>→<part>#<state>`. */
+export declare const flowLineAddressOf: (line: FlowLine) => string;
+/** The line of `flow` that `address` names and that animates, or why there is none. */
+export declare const flowLineOf: (flow: DesignFlow, address: string) => FlowLine | string;

package/src/lib/design/motion-flow.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flowLineOf = exports.flowLineAddressOf = void 0;
+const flow_1 = require("./system/flows/flow");
+const ARROW = /→|->/u;
+/** How `et design motion flow` names a line: its `id`, else `<part>#<state>→<part>#<state>`. */
+const flowLineAddressOf = (line) => { var _a; return (_a = line.id) !== null && _a !== void 0 ? _a : `${(0, flow_1.flowStateKeyOf)(line.from)}→${(0, flow_1.flowStateKeyOf)(line.to)}`; };
+exports.flowLineAddressOf = flowLineAddressOf;
+/** The line of `flow` that `address` names and that animates, or why there is none. */
+const flowLineOf = (flow, address) => {
+    const animated = flow.lines.filter((line) => line.transition === 'view').map(exports.flowLineAddressOf);
+    const known = `animated lines: ${animated.join(', ') || 'none - give a line "transition": "view"'}`;
+    const [from, to, ...rest] = address.split(ARROW).map((end) => end.trim());
+    const found = flow.lines.filter((line) => to === undefined || rest.length > 0
+        ? line.id === address
+        : (0, flow_1.flowStateKeyOf)(line.from) === from && (0, flow_1.flowStateKeyOf)(line.to) === to);
+    const [line, ...more] = found;
+    if (!line)
+        return `flow "${flow.name}" has no line "${address}" (${known})`;
+    if (more.length > 0)
+        return `flow "${flow.name}" has ${found.length} lines ${address} - give each its own "id" and name it`;
+    if (to !== undefined && line.id)
+        return `line ${address} of flow "${flow.name}" has the id "${line.id}" - name it by that`;
+    if (line.transition !== 'view')
+        return `line ${address} of flow "${flow.name}" does not animate - give it "transition": "view" (${known})`;
+    return line;
+};
+exports.flowLineOf = flowLineOf;
+//# sourceMappingURL=motion-flow.js.map

package/src/lib/design/motion-flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-flow.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/motion-flow.ts"],"names":[],"mappings":";;;AAAA,8CAA2E;AAE3E,MAAM,KAAK,GAAG,OAAO,CAAC;AAEtB,gGAAgG;AACzF,MAAM,iBAAiB,GAAG,CAAC,IAAc,EAAE,EAAE,WAClD,OAAA,MAAA,IAAI,CAAC,EAAE,mCAAI,GAAG,IAAA,qBAAc,EAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAA,qBAAc,EAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAA,EAAA,CAAC;AAD1D,QAAA,iBAAiB,qBACyC;AAEvE,uFAAuF;AAChF,MAAM,UAAU,GAAG,CAAC,IAAgB,EAAE,OAAe,EAAqB,EAAE;IACjF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,GAAG,CAAC,yBAAiB,CAAC,CAAC;IAChG,MAAM,KAAK,GAAG,mBAAmB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,yCAAyC,EAAE,CAAC;IACpG,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CACvC,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;QACjC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,OAAO;QACrB,CAAC,CAAC,IAAA,qBAAc,EAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,IAAA,qBAAc,EAAC,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CACzE,CAAC;IACF,MAAM,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC;IAE9B,IAAI,CAAC,IAAI;QAAE,OAAO,SAAS,IAAI,CAAC,IAAI,kBAAkB,OAAO,MAAM,KAAK,GAAG,CAAC;IAC5E,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;QACjB,OAAO,SAAS,IAAI,CAAC,IAAI,SAAS,KAAK,CAAC,MAAM,UAAU,OAAO,uCAAuC,CAAC;IACzG,IAAI,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,EAAE;QAC7B,OAAO,QAAQ,OAAO,aAAa,IAAI,CAAC,IAAI,iBAAiB,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC5F,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM;QAC5B,OAAO,QAAQ,OAAO,aAAa,IAAI,CAAC,IAAI,sDAAsD,KAAK,GAAG,CAAC;IAE7G,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AApBW,QAAA,UAAU,cAoBrB"}

package/src/lib/design/motion-shot.d.ts

@@ -0,0 +1,43 @@
+import { Browser } from './thumb';
+type Page = Awaited<ReturnType<Awaited<ReturnType<Browser['newContext']>>['newPage']>>;
+export type MotionMode = 'full' | 'reduced';
+type MotionBox = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export declare const MOTION_MODES: readonly MotionMode[];
+/** How far a motion runs to find its end: a step or animation that starts later is not drawn. */
+export declare const MOTION_LIMIT_MS = 30000;
+/** The keyframe times of a motion that ends at `end`: 0, 25, 50, 75 and 100 %, plus its `at` times, in ms. */
+export declare const keyframeTimesOf: (end: number, at?: readonly number[]) => number[];
+/** The tracks are the `MotionTrack`s of `design/motion-runtime.ts`, as the frame sends them. */
+/** The smallest box around all of `boxes`, cut at the page origin, which a screenshot cannot reach past. */
+export declare const unionOfBoxes: (boxes: readonly MotionBox[]) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type MotionPictures = {
+    end: number;
+    tracks: unknown[];
+    keyframes: {
+        ms: number;
+        png: Buffer;
+    }[];
+};
+/**
+ * Draws a motion in a frame opened with `motion=<name>` (or `flow-to=<part>#<state>`) at its `from` state; `viewport`
+ * draws the visible viewport instead of the whole page: one run to its end finds the end and the
+ * tracks, a second run is drawn at each keyframe time.
+ */
+export declare const motionPicturesOf: (options: {
+    page: Page;
+    url: string;
+    clip: boolean;
+    viewport?: boolean;
+    at?: readonly number[];
+}) => Promise<MotionPictures>;
+export {};