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

package/src/lib/design/shot-store.js.map

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

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

@@ -4,10 +4,16 @@ import { chromiumOf } from './browser';
 import { ChangedBox } from './contact-sheet';
 import { DrawnPart, PartsChange } from './changed-parts';
 import { DesignPreset } from './paths';
+import { DrawLedger } from './draw-ledger';
 import { SketchVariant, SystemModules } from './system/system-modules';
-import { ThumbMissingError } from './thumb';
+import { createDrawQueue, ThumbMissingError } from './thumb';
 import { MotionMode, MotionPictures } from './motion-shot';
+import { ShotStore } from './shot-store';
 export declare const SHOT_PATH = "/__design/shot";
+/** Whether a `--scheme` value is absent or one the frame pins. */
+export declare const isSchemeFlag: (value: string | undefined) => value is "light" | "dark" | undefined;
+/** The frame params of the `--surface`, `--color`, `--scheme` and `--scale` flags of a shot command. */
+export declare const drawParamsOf: (values: Record<string, string | undefined>) => URLSearchParams;
 /** The `x,y,width,height` crop of a picture in CSS pixels, `null` without one, `undefined` for a malformed one. */
 export declare const cropOf: (raw: string | null | undefined) => {
     x: number;
@@ -31,6 +37,10 @@ type GraphModule = {
     file?: string | null;
     importers: Set<GraphModule>;
 };
+export type ImportingModule = {
+    file?: string | null;
+    importedModules: Set<ImportingModule>;
+};
 /** An element a part render marked as its root, in CSS pixels from the top left of the picture. */
 export type PartMark = {
     parts: string[];
@@ -40,10 +50,28 @@ export type PartMark = {
     height: number;
 };
 /** One drawn PNG, the part roots in it, and the markup of the frame root. */
+/** Where a shot response's picture came from: the disk store, the in-memory cache or a fresh draw. */
+export type ShotSource = 'disk' | 'memory' | 'drawn';
+export declare const TEXT_AMBIENT_PROPERTIES: readonly ["fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight", "letterSpacing"];
+/** The inherited text style the frame root hands to a part: font family, size, weight, style, line height and letter spacing. */
+export type TextAmbient = Record<(typeof TEXT_AMBIENT_PROPERTIES)[number], string>;
 export type Picture = {
     png: Buffer;
     marks: PartMark[];
     markup?: string;
+    ambient?: TextAmbient;
+};
+/** A box in CSS pixels rounded to whole pixels, the clip of a fitted design picture and of the app shot compare diffs it with. */
+export declare const pixelBoxOf: (box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
 };
 /** The files each stylesheet inlines through an `@import`, keyed by the stylesheet's file. */
 export type StylesheetImports = Map<string, Set<string>>;
@@ -54,6 +82,29 @@ export declare const stylesheetImportsPlugin: (imports: StylesheetImports) => Pl
  * stylesheet does not count as importing a file it only scans as a Tailwind source.
  */
 export declare const dependentIdsOf: (modules: Iterable<GraphModule>, imports?: StylesheetImports) => string[];
+/**
+ * The files of the given modules and of every module they import, directly or not: the reverse of
+ * `dependentIdsOf`, so a Tailwind source a stylesheet only scans is not among them.
+ */
+export declare const dependencyFilesOf: (modules: Iterable<ImportingModule>, imports?: StylesheetImports) => string[];
+/**
+ * A frame script that empties the `slot()` regions the part `part` draws itself, not those of the parts it embeds.
+ * A region belongs to the innermost marked part around it that its markup was not passed into through props.
+ */
+export declare const emptySlotsScriptOf: (part: string, fill?: string | null) => string;
+/** Moves the elements a selector matches by `x` and `y` CSS pixels, as a canvas camera pans its content. */
+export type Pan = {
+    selector: string;
+    x: number;
+    y: number;
+};
+/** A frame script that moves every element of `pan.selector` by the pan, on top of its own transform. */
+export declare const panScriptOf: (pan: Pan) => string;
+/** Paints the compare checkerboard on the page canvas, with its origin at the shot's top left corner. */
+export declare const checkerScriptOf: (origin: {
+    x: number;
+    y: number;
+}) => string;
 /** One state of a part as a frame draws it: at a product preset, at a container width, or fitted to its content. */
 export type PartAddress = {
     product: string;
@@ -64,6 +115,18 @@ export type PartAddress = {
     sketch: SketchVariant | null;
     interaction: string | null;
     props?: SketchVariant | null;
+    /** Fits the state to its content without the frame padding, as the app's harness host draws it. */
+    bare?: boolean;
+    /** Empties the `slot()` regions the part draws itself before the shot, as the app's harness host projects no content into them. */
+    emptySlots?: boolean;
+    /** The markup the emptied `slot()` regions get instead, as the live compare puts its fixed frame content there. */
+    slotFill?: string | null;
+    /** Props merged into every render of the named parts, as the live compare draws a page with the panel of its shell hidden. */
+    compose?: Record<string, Record<string, unknown>> | null;
+    /** Draws the part over the compare checkerboard instead of a transparent page, so a background shows in the picture. */
+    checker?: boolean;
+    /** Pans part of the picture before the shot, as the live compare moves the app's canvas camera. */
+    pan?: Pan | null;
 };
 /** The frame query, viewport and cache key that draw one state of a part, or why the part cannot be drawn. */
 export declare const partFrameOf: (options: PartAddress & {
@@ -74,6 +137,10 @@ export declare const partFrameOf: (options: PartAddress & {
     search: URLSearchParams;
     size: DesignPreset | null;
     clip: boolean;
+    emptySlots: string | null;
+    slotFill: string | null;
+    checker: boolean;
+    pan: Pan | null;
 };
 /**
  * Draws one state of a part at one preset, at one container width, or fitted to its content, or one
@@ -85,7 +152,10 @@ export declare const createPartShooter: (options: {
     base: string | (() => string);
     system: SystemModules;
     chromiumOf?: typeof chromiumOf;
+    ledger?: DrawLedger;
     statesOf?: (address: Pick<PartAddress, "product" | "part" | "sketch">) => Promise<string[] | null>;
+    store?: ShotStore;
+    queue?: ReturnType<typeof createDrawQueue>;
 }) => {
     middleware: (request: IncomingMessage, response: ServerResponse) => void;
     /**

package/src/lib/design/shot.js

@@ -9,13 +9,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPartShooter = exports.partFrameOf = exports.dependentIdsOf = exports.stylesheetImportsPlugin = exports.viewportOf = exports.cropOf = exports.SHOT_PATH = void 0;
+exports.createPartShooter = exports.partFrameOf = exports.checkerScriptOf = exports.panScriptOf = exports.emptySlotsScriptOf = exports.dependencyFilesOf = exports.dependentIdsOf = exports.stylesheetImportsPlugin = exports.pixelBoxOf = exports.TEXT_AMBIENT_PROPERTIES = exports.viewportOf = exports.cropOf = exports.drawParamsOf = exports.isSchemeFlag = exports.SHOT_PATH = void 0;
 const crypto_1 = require("crypto");
+const path_1 = require("path");
 const contact_sheet_1 = require("./contact-sheet");
 const changed_parts_1 = require("./changed-parts");
 const system_modules_1 = require("./system/system-modules");
+const viewed_shots_1 = require("./system/sketch/viewed-shots");
 const thumb_1 = require("./thumb");
 const motion_shot_1 = require("./motion-shot");
+const settle_frames_1 = require("./settle-frames");
 const warm_pages_1 = require("./warm-pages");
 exports.SHOT_PATH = '/__design/shot';
 const BOX_CACHE_LIMIT = 500;
@@ -23,10 +26,41 @@ const isPositiveWhole = (pixels) => Number.isInteger(pixels) && pixels > 0;
 const VIEWPORT_HEIGHT = 800;
 const MAX_SCALE = 4;
 const scaleOf = (params) => { var _a; return Number((_a = params.get('scale')) !== null && _a !== void 0 ? _a : 1); };
+const viewOf = (raw) => (raw !== null && isPositiveWhole(Number(raw)) ? Number(raw) : null);
+const wantOf = (params, response) => {
+    const withdraws = new Set();
+    const rank = params.get('rank');
+    let hungUp = false;
+    response.once('close', () => {
+        hungUp = !response.writableFinished;
+        if (hungUp)
+            withdraws.forEach((withdraw) => withdraw());
+    });
+    return {
+        priority: params.get('priority') === 'low' ? 'low' : 'high',
+        view: viewOf(params.get('view')),
+        rank: rank === 'active' || rank === 'visible' ? rank : null,
+        onWithdraw: (withdraw) => (hungUp ? withdraw() : withdraws.add(withdraw)),
+    };
+};
 const schemeOf = (params) => {
     const scheme = params.get('scheme');
     return scheme === 'dark' || scheme === 'light' ? scheme : null;
 };
+/** Whether a `--scheme` value is absent or one the frame pins. */
+const isSchemeFlag = (value) => value === undefined || value === 'light' || value === 'dark';
+exports.isSchemeFlag = isSchemeFlag;
+/** The frame params of the `--surface`, `--color`, `--scheme` and `--scale` flags of a shot command. */
+const drawParamsOf = (values) => {
+    const params = new URLSearchParams();
+    for (const name of ['surface', 'color', 'scheme', 'scale']) {
+        const value = values[`--${name}`];
+        if (value)
+            params.set(name, value);
+    }
+    return params;
+};
+exports.drawParamsOf = drawParamsOf;
 const isScale = (scale) => Number.isInteger(scale) && scale >= 1 && scale <= MAX_SCALE;
 /** The `x,y,width,height` crop of a picture in CSS pixels, `null` without one, `undefined` for a malformed one. */
 const cropOf = (raw) => {
@@ -50,6 +84,28 @@ const viewportOf = (size) => {
     });
 };
 exports.viewportOf = viewportOf;
+exports.TEXT_AMBIENT_PROPERTIES = [
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'fontStyle',
+    'lineHeight',
+    'letterSpacing',
+];
+const AMBIENT_SCRIPT = `(() => {
+  const root = document.getElementById('root');
+  if (!root) return null;
+  const style = getComputedStyle(root);
+  return Object.fromEntries(${JSON.stringify(exports.TEXT_AMBIENT_PROPERTIES)}.map((name) => [name, style[name]]));
+})()`;
+/** A box in CSS pixels rounded to whole pixels, the clip of a fitted design picture and of the app shot compare diffs it with. */
+const pixelBoxOf = (box) => ({
+    x: Math.round(box.x),
+    y: Math.round(box.y),
+    width: Math.round(box.width),
+    height: Math.round(box.height),
+});
+exports.pixelBoxOf = pixelBoxOf;
 const marksIn = (clip) => `(() => {
   const origin = ${clip} ? document.getElementById('root').getBoundingClientRect() : { left: -scrollX, top: -scrollY };
 
@@ -98,11 +154,88 @@ const dependentIdsOf = (modules, imports = new Map()) => {
     return [...seen].flatMap((module) => (module.id ? [module.id] : []));
 };
 exports.dependentIdsOf = dependentIdsOf;
+/**
+ * The files of the given modules and of every module they import, directly or not: the reverse of
+ * `dependentIdsOf`, so a Tailwind source a stylesheet only scans is not among them.
+ */
+const dependencyFilesOf = (modules, imports = new Map()) => {
+    const seen = new Set();
+    const open = [...modules];
+    for (let next = open.pop(); next; next = open.pop()) {
+        if (seen.has(next))
+            continue;
+        seen.add(next);
+        const importer = next;
+        open.push(...[...next.importedModules].filter((module) => !isTailwindSourceOf({ imports, module, importer })));
+    }
+    return [...seen].flatMap((module) => (module.file && (0, path_1.isAbsolute)(module.file) ? [module.file] : []));
+};
+exports.dependencyFilesOf = dependencyFilesOf;
+/**
+ * A frame script that empties the `slot()` regions the part `part` draws itself, not those of the parts it embeds.
+ * A region belongs to the innermost marked part around it that its markup was not passed into through props.
+ */
+const emptySlotsScriptOf = (part, fill = null) => `(() => {
+  const keysOf = (element, name) => (element.getAttribute(name) ?? '').split(' ').filter(Boolean);
+  const ownerOf = (slot) => {
+    let passed = keysOf(slot, 'data-et-slot');
+
+    for (let root = slot.closest('[data-et-part]'); root; root = root.parentElement?.closest('[data-et-part]') ?? null) {
+      const owner = keysOf(root, 'data-et-part').find((key) => !passed.includes(key));
+
+      if (owner) return owner;
+
+      passed = keysOf(root, 'data-et-slot');
+    }
+
+    return null;
+  };
+
+  document.querySelectorAll('[data-et-projected]').forEach((slot) => {
+    const owner = ownerOf(slot);
+
+    if (owner === null || owner === ${JSON.stringify(part)}) {
+      slot.replaceChildren();
+      ${fill === null ? '' : `slot.innerHTML = ${JSON.stringify(fill)};`}
+    }
+  });
+
+  return Promise.all([...document.images].map((image) => image.decode().catch(() => undefined)));
+})()`;
+exports.emptySlotsScriptOf = emptySlotsScriptOf;
+const SHOT_OPTIONS = { type: 'png', fullPage: true, omitBackground: true, timeout: thumb_1.DRAW_TIMEOUT_MS };
+const CHECKER_SQUARE_PX = 8;
+/** A frame script that moves every element of `pan.selector` by the pan, on top of its own transform. */
+const panScriptOf = (pan) => `(() => {
+  const elements = [...document.querySelectorAll(${JSON.stringify(pan.selector)})];
+
+  if (elements.length === 0) throw new Error(${JSON.stringify(`the picture has no ${pan.selector} to pan`)});
+
+  elements.forEach((element) => {
+    element.style.translate = '${pan.x}px ${pan.y}px';
+  });
+})()`;
+exports.panScriptOf = panScriptOf;
+/** Paints the compare checkerboard on the page canvas, with its origin at the shot's top left corner. */
+const checkerScriptOf = (origin) => `(() => {
+  const size = ${CHECKER_SQUARE_PX};
+  const style = document.documentElement.style;
+
+  style.setProperty(
+    'background',
+    'conic-gradient(rgb(150,150,150) 25%, rgb(110,110,110) 0 50%, rgb(150,150,150) 0 75%, rgb(110,110,110) 0) ' +
+      ${origin.x} + 'px ' + ${origin.y} + 'px / ' + size * 2 + 'px ' + size * 2 + 'px',
+    'important',
+  );
+  document.body.style.setProperty('background', 'transparent', 'important');
+})()`;
+exports.checkerScriptOf = checkerScriptOf;
 /** The frame query, viewport and cache key that draw one state of a part, or why the part cannot be drawn. */
 const partFrameOf = (options) => {
     var _a, _b;
-    const { system, product, part, state, preset, width, sketch, interaction, props } = options;
-    const file = (_a = system.partOf({ product, part, sketch })) === null || _a === void 0 ? void 0 : _a.file;
+    const { system, product, part, state, preset, width, sketch, interaction, props, bare, emptySlots, slotFill, compose, checker, pan, } = options;
+    const drawn = sketch ? system.drawnOf(product, sketch) : null;
+    const file = drawn && 'sketchGone' in drawn ? undefined : (_a = system.partOf({ product, part, sketch })) === null || _a === void 0 ? void 0 : _a.file;
     const size = preset ? (_b = system.productOf(product)) === null || _b === void 0 ? void 0 : _b.presets[preset] : width ? { width } : null;
     if (!file)
         return new thumb_1.ThumbMissingError(sketch
@@ -123,13 +256,23 @@ const partFrameOf = (options) => {
             interaction,
             props === null || props === void 0 ? void 0 : props.target,
             props === null || props === void 0 ? void 0 : props.variant,
+            ...(bare ? ['bare'] : []),
+            ...(emptySlots ? ['empty-slots'] : []),
+            ...(emptySlots && slotFill ? ['slot-fill', (0, crypto_1.createHash)('sha1').update(slotFill).digest('hex')] : []),
+            ...(compose ? ['compose', JSON.stringify(compose)] : []),
+            ...(checker ? ['checker'] : []),
+            ...(pan ? ['pan', pan.selector, pan.x, pan.y] : []),
         ],
         drawn: { part: { product, part, sketch } },
-        search: new URLSearchParams(Object.assign(Object.assign(Object.assign(Object.assign({ product,
+        search: new URLSearchParams(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ product,
             part,
-            state }, (size ? {} : { fit: '' })), (sketch ? { sketch: sketch.target, variant: sketch.variant } : {})), (interaction ? { interaction } : {})), (props ? { props: props.target, 'props-variant': props.variant } : {}))),
+            state }, (size ? {} : Object.assign({ fit: '' }, (bare ? { bare: '' } : {})))), (sketch ? { sketch: sketch.target, variant: sketch.variant } : {})), (interaction ? { interaction } : {})), (props ? { props: props.target, 'props-variant': props.variant } : {})), (compose ? { compose: JSON.stringify(compose) } : {}))),
         size: size !== null && size !== void 0 ? size : null,
         clip: !preset,
+        emptySlots: emptySlots ? part : null,
+        slotFill: emptySlots ? (slotFill !== null && slotFill !== void 0 ? slotFill : null) : null,
+        checker: checker !== null && checker !== void 0 ? checker : false,
+        pan: pan !== null && pan !== void 0 ? pan : null,
     };
 };
 exports.partFrameOf = partFrameOf;
@@ -139,9 +282,10 @@ exports.partFrameOf = partFrameOf;
  * and theme until a change redraws its part.
  */
 const createPartShooter = (options) => {
-    const { system, statesOf } = options;
+    var _a;
+    const { system, statesOf, store } = options;
     const baseOf = () => (typeof options.base === 'function' ? options.base() : options.base);
-    const drawQueue = (0, thumb_1.createDrawQueue)(options);
+    const drawQueue = (_a = options.queue) !== null && _a !== void 0 ? _a : (0, thumb_1.createDrawQueue)(options);
     const warmPages = (0, warm_pages_1.createWarmPages)();
     const cache = new Map();
     const motions = new Map();
@@ -150,10 +294,13 @@ const createPartShooter = (options) => {
         browser,
         context: Object.assign(Object.assign({ viewport: (0, exports.viewportOf)(frame.size) }, (frame.scale > 1 ? { deviceScaleFactor: frame.scale } : {})), (frame.scheme ? { colorScheme: frame.scheme } : {})),
     }, (page) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
+        var _a, _b, _c, _d;
         yield (0, thumb_1.openFrame)(page, `${baseOf()}/frame.html?${frame.search}`);
-        yield page.evaluate(thumb_1.settled);
-        yield page.evaluate(thumb_1.finished);
+        yield (0, settle_frames_1.settleFrames)(page);
+        if (frame.emptySlots)
+            yield page.evaluate((0, exports.emptySlotsScriptOf)(frame.emptySlots, frame.slotFill));
+        if (frame.pan)
+            yield page.evaluate((0, exports.panScriptOf)(frame.pan));
         const overlay = page.locator('vite-error-overlay');
         if ((yield overlay.count()) > 0) {
             const message = yield overlay
@@ -164,28 +311,32 @@ const createPartShooter = (options) => {
         }
         const marks = yield page.evaluate(marksIn(frame.clip));
         const root = page.locator('#root');
+        const rootBox = frame.clip ? yield root.boundingBox() : null;
         if (frame.clip) {
-            const box = yield root.boundingBox();
+            const box = rootBox;
             if (!box || box.width === 0 || box.height === 0)
                 throw new thumb_1.ShotUnprocessableError('design-explore: part root has zero size - give an element that fills its container a min-height');
         }
-        const origin = frame.crop && frame.clip ? yield root.boundingBox() : null;
+        const origin = frame.crop && frame.clip ? rootBox : null;
         const crop = frame.crop && Object.assign(Object.assign({}, frame.crop), { x: frame.crop.x + ((_a = origin === null || origin === void 0 ? void 0 : origin.x) !== null && _a !== void 0 ? _a : 0), y: frame.crop.y + ((_b = origin === null || origin === void 0 ? void 0 : origin.y) !== null && _b !== void 0 ? _b : 0) });
-        const png = yield (crop
-            ? page.screenshot({ type: 'png', fullPage: true, clip: crop, timeout: thumb_1.DRAW_TIMEOUT_MS })
-            : frame.clip
-                ? root.screenshot({ type: 'png', timeout: thumb_1.DRAW_TIMEOUT_MS })
-                : page.screenshot({ fullPage: true, type: 'png', timeout: thumb_1.DRAW_TIMEOUT_MS })).catch((error) => {
+        const shotOptions = frame.checker ? Object.assign(Object.assign({}, SHOT_OPTIONS), { omitBackground: false }) : SHOT_OPTIONS;
+        const clip = crop ? crop : rootBox ? (0, exports.pixelBoxOf)(rootBox) : null;
+        if (frame.checker)
+            yield page.evaluate((0, exports.checkerScriptOf)({ x: (_c = clip === null || clip === void 0 ? void 0 : clip.x) !== null && _c !== void 0 ? _c : 0, y: (_d = clip === null || clip === void 0 ? void 0 : clip.y) !== null && _d !== void 0 ? _d : 0 }));
+        const png = yield (clip ? page.screenshot(Object.assign(Object.assign({}, shotOptions), { clip })) : page.screenshot(shotOptions)).catch((error) => {
             const message = error instanceof Error ? error.message : String(error);
             if (error instanceof Error && error.name === 'TimeoutError')
                 throw new thumb_1.ShotTimeoutError(`design-explore: the screenshot timed out after ${thumb_1.DRAW_TIMEOUT_MS} ms: ${message}`);
             throw new thumb_1.ShotUnprocessableError(`design-explore: the screenshot failed: ${message}`);
         });
         const failure = yield page.evaluate("document.documentElement.getAttribute('data-et-error')");
-        if (typeof failure === 'string')
-            throw new thumb_1.ShotFailedError(failure, png);
+        if (typeof failure === 'string') {
+            const missing = yield page.evaluate("document.documentElement.getAttribute('data-et-missing')");
+            throw typeof missing === 'string' ? new thumb_1.ThumbMissingError(failure) : new thumb_1.ShotFailedError(failure, png);
+        }
         const markup = yield page.evaluate("document.getElementById('root')?.innerHTML ?? null");
-        return Object.assign({ png, marks: Array.isArray(marks) ? marks : [] }, (typeof markup === 'string' ? { markup } : {}));
+        const ambient = yield page.evaluate(AMBIENT_SCRIPT);
+        return Object.assign(Object.assign({ png, marks: Array.isArray(marks) ? marks : [] }, (typeof markup === 'string' ? { markup } : {})), (ambient && typeof ambient === 'object' ? { ambient: ambient } : {}));
     }));
     const themeOf = (params) => {
         var _a, _b, _c;
@@ -196,7 +347,7 @@ const createPartShooter = (options) => {
         });
     };
     const cached = (options) => {
-        var _a;
+        var _a, _b, _c, _d;
         const theme = themeOf(options.params);
         const scale = scaleOf(options.params);
         const crop = (_a = (0, exports.cropOf)(options.params.get('clip'))) !== null && _a !== void 0 ? _a : null;
@@ -204,10 +355,18 @@ const createPartShooter = (options) => {
         const key = JSON.stringify([...options.key, theme.surface, theme.color, theme.fill, scale, crop, scheme]);
         const kept = options.fresh ? undefined : cache.get(key);
         if (kept) {
-            if (options.priority === 'high')
-                drawQueue.hurry(kept.shot);
+            (_b = options.onSource) === null || _b === void 0 ? void 0 : _b.call(options, 'memory');
+            drawQueue.join(kept.shot, options.want);
             return kept.shot;
         }
+        const stored = !options.fresh && options.address ? store === null || store === void 0 ? void 0 : store.read(key, options.address) : null;
+        if (stored) {
+            (_c = options.onSource) === null || _c === void 0 ? void 0 : _c.call(options, 'disk');
+            const shot = Promise.resolve(stored);
+            cache.set(key, { drawn: options.drawn, shot });
+            return shot;
+        }
+        (_d = options.onSource) === null || _d === void 0 ? void 0 : _d.call(options, 'drawn');
         if (theme.surface)
             options.search.set('surface', theme.surface);
         if (theme.color)
@@ -215,44 +374,75 @@ const createPartShooter = (options) => {
         if (theme.fill)
             options.search.set('fill', theme.fill);
         const search = options.search.toString();
-        const shot = drawQueue.run((browser) => { var _a; return draw(browser, { search, size: options.size, clip: (_a = options.clip) !== null && _a !== void 0 ? _a : false, scale, crop, scheme }); }, options.priority);
+        const shot = drawQueue.run((browser) => {
+            var _a, _b, _c, _d, _e, _f;
+            const gone = (_a = options.gone) === null || _a === void 0 ? void 0 : _a.call(options);
+            return gone
+                ? Promise.reject(gone)
+                : draw(browser, {
+                    search,
+                    size: options.size,
+                    clip: (_b = options.clip) !== null && _b !== void 0 ? _b : false,
+                    scale,
+                    crop,
+                    scheme,
+                    emptySlots: (_c = options.emptySlots) !== null && _c !== void 0 ? _c : null,
+                    slotFill: (_d = options.slotFill) !== null && _d !== void 0 ? _d : null,
+                    checker: (_e = options.checker) !== null && _e !== void 0 ? _e : false,
+                    pan: (_f = options.pan) !== null && _f !== void 0 ? _f : null,
+                });
+        }, options.want);
+        const { address } = options;
         cache.set(key, { drawn: options.drawn, shot });
-        shot.catch(() => { var _a; return ((_a = cache.get(key)) === null || _a === void 0 ? void 0 : _a.shot) === shot && cache.delete(key); });
+        shot.then((picture) => { var _a; return address && ((_a = cache.get(key)) === null || _a === void 0 ? void 0 : _a.shot) === shot && (store === null || store === void 0 ? void 0 : store.write(key, { address, picture })); }, () => { var _a; return ((_a = cache.get(key)) === null || _a === void 0 ? void 0 : _a.shot) === shot && cache.delete(key); });
         return shot;
     };
     const partShotOf = (options) => {
-        var _a;
         const frame = (0, exports.partFrameOf)(Object.assign({ system }, options));
         if (frame instanceof thumb_1.ThumbMissingError)
             return Promise.reject(frame);
-        const draw = () => cached(Object.assign(Object.assign({}, frame), { params: options.params, priority: options.priority, fresh: options.fresh }));
+        const gone = () => {
+            const now = (0, exports.partFrameOf)(Object.assign({ system }, options));
+            return now instanceof thumb_1.ThumbMissingError ? now : null;
+        };
+        const { product, part, sketch, props } = options;
+        const address = { product, part, sketch, props: props !== null && props !== void 0 ? props : null };
+        const draw = () => cached(Object.assign(Object.assign({}, frame), { params: options.params, want: options.want, fresh: options.fresh, gone,
+            address, onSource: options.onSource }));
         if (!statesOf)
             return draw();
-        const { product, part, state } = options;
-        const sketch = (_a = options.props) !== null && _a !== void 0 ? _a : options.sketch;
-        return statesOf({ product, part, sketch }).then((names) => {
+        const { state } = options;
+        const statesFrom = props !== null && props !== void 0 ? props : sketch;
+        return statesOf({ product, part, sketch: statesFrom }).then((names) => {
             if (!names || names.includes(state))
                 return draw();
-            const holder = sketch ? `variant "${sketch.variant}" of ${sketch.target}` : `the merged part ${part}`;
+            const holder = statesFrom ? `variant "${statesFrom.variant}" of ${statesFrom.target}` : `the merged part ${part}`;
             throw new thumb_1.ThumbMissingError(`design-explore: state "${state}" is not in ${holder} - it has: ${names.join(', ') || 'no states'}`);
         });
     };
     const callShotOf = (options) => {
-        const { slug, variant, width, params, priority } = options;
+        const { slug, variant, width, params, want, onSource } = options;
         return cached({
             key: ['call', slug, variant, width],
             drawn: { slug },
             search: new URLSearchParams({ call: slug, variant }),
             params,
             size: { width },
-            priority,
+            want,
+            onSource,
         });
     };
+    const viewed = ({ product, target, variant }) => {
+        const sketch = system.sketchOf(product, target);
+        if (sketch)
+            (0, viewed_shots_1.recordShotViewed)({ target: options.target, sketch, variant });
+    };
     return {
         middleware: (request, response) => {
             var _a, _b, _c;
             const params = new URL((_a = request.url) !== null && _a !== void 0 ? _a : '', 'http://localhost').searchParams;
-            const priority = params.get('priority') === 'low' ? 'low' : 'high';
+            const want = wantOf(params, response);
+            const onSource = (source) => response.setHeader('x-design-shot', source);
             if (!isScale(scaleOf(params))) {
                 (0, thumb_1.send)(response, {
                     status: 400,
@@ -280,12 +470,21 @@ const createPartShooter = (options) => {
                     });
                     return;
                 }
-                (0, thumb_1.sendShot)(response, callShotOf({ slug, variant, width: pixels, params, priority }).then((picture) => picture.png));
+                (0, thumb_1.sendShot)(response, (0, thumb_1.noteFailure)(callShotOf({ slug, variant, width: pixels, params, want, onSource }).then((picture) => picture.png), (failure) => { var _a; return (_a = options.ledger) === null || _a === void 0 ? void 0 : _a.fail(Object.assign({ part: slug, state: variant }, failure)); }));
                 return;
             }
             const [part, state, preset] = ['part', 'state', 'preset'].map((name) => params.get(name));
             const pixels = width === null ? null : Number(width);
             const presetWidth = preset && product ? (_c = (_b = system.productOf(product)) === null || _b === void 0 ? void 0 : _b.presets[preset]) === null || _c === void 0 ? void 0 : _c.width : undefined;
+            const sketchVariants = sketch && product ? system.sketchVariantsOf(product, sketch) : null;
+            if (sketch && (sketchVariants === null || sketchVariants === void 0 ? void 0 : sketchVariants.length) && (!variant || !sketchVariants.includes(variant))) {
+                (0, thumb_1.send)(response, {
+                    status: 400,
+                    type: 'text/plain; charset=utf-8',
+                    body: `design-explore: pass variant=<one of: ${sketchVariants.join(', ')}> with sketch=${sketch}`,
+                });
+                return;
+            }
             const sketchVariant = sketch && variant ? { target: sketch, variant } : null;
             if (product && part && !state && statesOf) {
                 void statesOf({ product, part, sketch: sketchVariant }).then((names) => (0, thumb_1.send)(response, {
@@ -317,7 +516,7 @@ const createPartShooter = (options) => {
                 });
                 return;
             }
-            (0, thumb_1.sendShot)(response, partShotOf({
+            (0, thumb_1.sendShot)(response, (0, thumb_1.noteFailure)(partShotOf({
                 product,
                 part,
                 state,
@@ -326,14 +525,22 @@ const createPartShooter = (options) => {
                 sketch: sketchVariant,
                 interaction: params.get('interaction'),
                 params,
-                priority,
-            }).then((picture) => picture.png));
+                want,
+                onSource,
+            }).then((picture) => {
+                if (sketchVariant && want.priority === 'high')
+                    viewed(Object.assign({ product }, sketchVariant));
+                return picture.png;
+            }), (failure) => {
+                var _a;
+                return (_a = options.ledger) === null || _a === void 0 ? void 0 : _a.fail(Object.assign(Object.assign({ part: `${product}/${part}`, state }, failure), { sketch: sketchVariant && Object.assign({ product }, sketchVariant) }));
+            }));
         },
         /**
          * Draws one state of a part as `partShotOf` does for the middleware, with the part roots it holds,
          * ahead of every shot asked with `priority=low`.
          */
-        pictureOf: (options) => partShotOf(Object.assign(Object.assign({}, options), { priority: 'high' })),
+        pictureOf: (options) => partShotOf(Object.assign(Object.assign({}, options), { want: { priority: 'high' } })),
         /**
          * Draws `motion` of a part from its `from` state, `address.state`, at each keyframe time, with the motion's tracks;
          * `mode` picks `prefers-reduced-motion`. Kept until a change redraws the part. With `flowTo`, `motion` names a flow
@@ -400,8 +607,10 @@ const createPartShooter = (options) => {
         /** Drops the pictures of the parts `change` redraws. */
         forget: (change) => {
             for (const [key, { drawn }] of cache) {
-                if ('part' in drawn && (0, changed_parts_1.redraws)(change, drawn.part))
+                if ('part' in drawn && (0, changed_parts_1.redraws)(change, drawn.part)) {
                     cache.delete(key);
+                    store === null || store === void 0 ? void 0 : store.drop(key);
+                }
             }
             for (const [key, { drawn }] of motions) {
                 if ('part' in drawn && (0, changed_parts_1.redraws)(change, drawn.part))
@@ -416,6 +625,10 @@ const createPartShooter = (options) => {
             }
         },
         clear: () => {
+            for (const [key, { drawn }] of cache) {
+                if ('part' in drawn)
+                    store === null || store === void 0 ? void 0 : store.drop(key);
+            }
             cache.clear();
             motions.clear();
         },