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

package/src/lib/design/serve.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serveDesign = exports.createDesignServer = exports.installedRootsOf = exports.DESIGN_EVENTS_HEARTBEAT_MS = exports.sendHeldJson = exports.KEEP_ALIVE_MS = void 0;
+exports.serveDesign = exports.createDesignServer = exports.installedRootsOf = exports.DELAY_FRAMES_ENV = exports.DESIGN_EVENTS_HEARTBEAT_MS = exports.sendHeldJson = exports.KEEP_ALIVE_MS = exports.registrySliceOf = void 0;
 const crypto_1 = require("crypto");
 const fs_1 = require("fs");
 const net_1 = require("net");
@@ -18,6 +18,7 @@ const path_1 = require("path");
 const rxjs_1 = require("rxjs");
 const calls_1 = require("./calls");
 const calls_tsconfig_1 = require("./calls-tsconfig");
+const parent_watch_1 = require("./parent-watch");
 const legacy_1 = require("./legacy");
 const vite_paths_1 = require("./vite-paths");
 const studio_api_1 = require("./studio-api");
@@ -30,12 +31,17 @@ const generated_stylesheets_1 = require("./generated-stylesheets");
 const sketch_stylesheets_1 = require("./sketch-stylesheets");
 const draw_ledger_1 = require("./draw-ledger");
 const shot_1 = require("./shot");
+const old_shot_folders_1 = require("./old-shot-folders");
 const shot_store_1 = require("./shot-store");
 const imports_1 = require("./system/imports");
+const served_cache_1 = require("./system/served-cache");
 const changed_parts_1 = require("./changed-parts");
 const server_identity_1 = require("./server-identity");
 const stamp_1 = require("./stamp");
+const code_hash_1 = require("./code-hash");
 const list_system_1 = require("./system/list-system");
+const stale_dist_1 = require("./system/stale-dist");
+const check_system_1 = require("./system/check-system");
 const resolve_product_1 = require("./system/resolve-product");
 const system_modules_1 = require("./system/system-modules");
 const kit_1 = require("./system/kit");
@@ -44,9 +50,13 @@ const sketch_1 = require("./system/sketch/sketch");
 const sketch_checker_1 = require("./system/sketch/sketch-checker");
 const unchanged_states_1 = require("./system/sketch/unchanged-states");
 const inventory_1 = require("./system/inventory");
+const shot_board_1 = require("./shot-board");
 const thumb_1 = require("./thumb");
 const motion_endpoint_1 = require("./motion-endpoint");
-const paths_1 = require("./paths");
+const package_root_1 = require("./package-root");
+const vite_cache_1 = require("./vite-cache");
+const work_root_1 = require("./work-root");
+const design_config_1 = require("./design-config");
 const slow_run_1 = require("./system/slow-run");
 const build_watch_1 = require("./build-watch");
 const VIRTUAL = 'virtual:design-explore';
@@ -54,7 +64,7 @@ const REBUILD_SETTLE_MS = 300;
 /** What a slug says about which project drew it: its first segment. */
 const projectOf = (slug) => { var _a; return (_a = slug.split('/')[0]) !== null && _a !== void 0 ? _a : ''; };
 const registry = (target) => {
-    const root = (0, paths_1.callsRootOf)(target);
+    const root = (0, design_config_1.callsRootOf)(target);
     const entries = (0, calls_1.callSlugsOf)(target).map((slug) => [slug, (0, vite_paths_1.fsUrl)((0, path_1.resolve)(root, slug, 'call.ts'))]);
     return `export const calls = {\n${entries
         .map(([slug, url]) => `  ${JSON.stringify(slug)}: () => import(${JSON.stringify(url)}),`)
@@ -189,6 +199,37 @@ const systemRegistry = (system) => `export const parts = {\n${system
     .products()
     .map((product) => `  ${JSON.stringify(product)}: {\n${sketchRegistry(system, product)}\n  },`)
     .join('\n')}\n};\n${tokensRegistry(system)}`;
+/**
+ * The entries of the env and system modules that a frame with the search params `query` can read: its product's parts,
+ * tokens and stylesheets, and those of the sketch variants it names; a call frame's project stylesheets and themes.
+ */
+const registrySliceOf = (options) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { target, config, system, query } = options;
+    const product = query.get('product');
+    if (!product) {
+        const project = projectOf((_a = query.get('call')) !== null && _a !== void 0 ? _a : '');
+        const entry = (_b = config.projects) === null || _b === void 0 ? void 0 : _b[project];
+        return `project ${JSON.stringify(project)}\n${entry ? stylesLoaderOf({ target, entry }) : 'none'}\n${themesOfSettings(entry ? { [project]: entry } : {})}\n`;
+    }
+    const entry = (_c = config.products) === null || _c === void 0 ? void 0 : _c[product];
+    const sketchOf = (part, variant) => part ? { target: part, variant: variant !== null && variant !== void 0 ? variant : '' } : null;
+    const sketch = sketchOf(query.get('sketch'), query.get('variant'));
+    const named = [sketch, sketchOf(query.get('props'), query.get('props-variant'))].filter((named) => named !== null);
+    const listed = system.sketchesOf(product);
+    const sketchStyles = sketch && entry && system.replacedStylesheetsOf({ product, sketch }).size > 0
+        ? stylesLoaderOf({ target, entry, product, sketch })
+        : 'none';
+    return [
+        `product ${JSON.stringify(product)}`,
+        partsRegistry({ parts: (_e = (_d = system.productOf(product)) === null || _d === void 0 ? void 0 : _d.parts) !== null && _e !== void 0 ? _e : [], product, indent: '' }),
+        ...named.map((variant) => { var _a, _b; return `sketch ${JSON.stringify(variant)} ${listed.some(({ target: part, variants }) => part === variant.target && variants.includes(variant.variant))}\n${partsRegistry({ parts: (_b = (_a = system.drawnOf(product, variant)) === null || _a === void 0 ? void 0 : _a.parts) !== null && _b !== void 0 ? _b : [], product, sketch: variant, indent: '' })}`; }),
+        `tokens ${(_f = tokensLoaderOf({ system, product, sketch: sketch !== null && sketch !== void 0 ? sketch : undefined })) !== null && _f !== void 0 ? _f : 'none'}`,
+        `styles ${entry ? stylesLoaderOf({ target, entry, product }) : 'none'} ${sketchStyles}`,
+        '',
+    ].join('\n');
+};
+exports.registrySliceOf = registrySliceOf;
 const sendJson = (response, answer) => {
     response.setHeader('access-control-allow-origin', '*');
     (0, thumb_1.send)(response, { status: answer.status, type: 'application/json', body: JSON.stringify(answer.body) });
@@ -230,6 +271,13 @@ const isSketchFile = (designRoot, file) => {
 };
 // Workaround: WebKit drops an event stream that sends nothing for 60 seconds.
 exports.DESIGN_EVENTS_HEARTBEAT_MS = 20000;
+/** Test tooling: when set to a whole number of ms, every `/frame.html` document waits that long before it is served. */
+exports.DELAY_FRAMES_ENV = 'ETHLETE_DESIGN_DELAY_FRAMES_MS';
+const frameDelayMsOf = () => {
+    var _a;
+    const ms = Number((_a = process.env[exports.DELAY_FRAMES_ENV]) !== null && _a !== void 0 ? _a : 0);
+    return Number.isInteger(ms) && ms > 0 ? ms : 0;
+};
 /**
  * A server-sent event stream for Studio: `comments`, `notes`, `flows`, `calls` and `sketches` when a file of that
  * kind changed, and `parts` with the parts a design system change redraws and the revision it gave them. A `parts`
@@ -298,6 +346,7 @@ const shotStoreOf = (options) => {
     return (0, shot_store_1.createShotStore)({
         dir,
         salt,
+        checkout: target,
         inputsOf: (address) => {
             var _a, _b;
             const { product, part } = address;
@@ -319,15 +368,15 @@ const shotStoreOf = (options) => {
                     ...((_a = entry.generated) !== null && _a !== void 0 ? _a : []).flatMap((generated) => { var _a, _b; return (_b = (_a = system.partOf({ product, part: generated.part, sketch })) === null || _a === void 0 ? void 0 : _a.css) !== null && _b !== void 0 ? _b : []; }),
                 ];
             });
-            // The snapshot folder is named after the server's pid, so its files are gone after a restart; the salt's build stamp covers them.
-            const snapshot = (0, path_1.dirname)((0, paths_1.assetRoot)());
+            // The snapshot folder is named after the server's pid, so its files are gone after a restart; the salt's asset hash covers them.
+            const snapshots = [...new Set([(0, path_1.dirname)((0, package_root_1.assetRoot)()), (0, fs_1.realpathSync)((0, path_1.dirname)((0, package_root_1.assetRoot)()))])];
             return [
                 ...(0, shot_1.dependencyFilesOf)([...roots.flatMap((root) => root !== null && root !== void 0 ? root : []), ...styles], stylesheetImports),
                 ...read,
-                (0, paths_1.configPathOf)(target),
+                (0, design_config_1.configPathOf)(target),
                 (0, path_1.resolve)(target, 'tsconfig.base.json'),
                 ...(entry.head ? [(0, path_1.resolve)(target, entry.head)] : []),
-            ].filter((file) => !isInside(snapshot, (0, path_1.resolve)(file)));
+            ].filter((file) => !snapshots.some((snapshot) => isInside(snapshot, (0, path_1.resolve)(file))));
         },
         scopeOf: (address) => JSON.stringify(drawnSystemsOf(address).map((sketch) => {
             const drawn = system.drawnOf(address.product, sketch);
@@ -397,14 +446,14 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
         /** The registries are built once per load, so a new call or part folder is invisible until it is invalidated. */
         configureServer: (vite) => {
             var _a, _b, _c;
-            const callsRoot = (0, paths_1.callsRootOf)(target);
-            const designRoot = (0, path_1.resolve)(target, paths_1.DESIGN_DIR);
+            const callsRoot = (0, design_config_1.callsRootOf)(target);
+            const designRoot = (0, path_1.resolve)(target, design_config_1.DESIGN_DIR);
             const stamp = (0, stamp_1.buildStampOf)();
             const identityOf = (0, server_identity_1.serverIdentityOf)(target);
             const base = () => {
                 var _a;
                 const address = (_a = vite.httpServer) === null || _a === void 0 ? void 0 : _a.address();
-                return `http://localhost:${address && typeof address === 'object' ? address.port : (0, paths_1.portOf)(config)}`;
+                return `http://localhost:${address && typeof address === 'object' ? address.port : (0, design_config_1.portOf)(config)}`;
             };
             const ledger = (0, draw_ledger_1.createDrawLedger)(Date.now, ({ sketch }) => {
                 const drawn = sketch && system.drawnOf(sketch.product, sketch);
@@ -413,10 +462,16 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
             const thumbs = (0, thumb_1.createThumbnailer)({ target, base, ledger });
             const inventoryDraws = (0, thumb_1.createDrawQueue)({ target, ledger });
             const sketchChecker = checkSketches ? undefined : (0, sketch_checker_1.createSketchChecker)();
+            const ruleChecker = checkSketches ? undefined : (0, sketch_checker_1.createSketchChecker)();
+            const events = createDesignEvents();
+            let revision = 0;
             const shots = (0, shot_1.createPartShooter)(Object.assign(Object.assign({ target,
                 base,
                 ledger,
-                system }, (shotCacheDir
+                system, changed: (part) => {
+                    revision += 1;
+                    events.signal('parts', { revision, all: false, parts: [part] });
+                } }, (shotCacheDir
                 ? {
                     store: shotStoreOf({
                         target,
@@ -424,7 +479,7 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                         system,
                         stylesheetImports,
                         dir: shotCacheDir,
-                        salt: `${stamp.version} ${stamp.build}`,
+                        salt: (0, code_hash_1.designPictureCodeOf)(),
                         moduleById: (id) => vite.moduleGraph.getModuleById(id),
                     }),
                 }
@@ -455,8 +510,6 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                 thumbs.forget((0, path_1.relative)(callsRoot, file));
                 shots.forgetCalls((0, path_1.relative)(callsRoot, file));
             };
-            const events = createDesignEvents();
-            let revision = 0;
             const redraw = (change, listed = false) => {
                 if (!change.all && change.parts.length === 0 && !change.errored) {
                     if (listed)
@@ -464,9 +517,10 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                     return;
                 }
                 revision += 1;
-                (0, unchanged_states_1.forgetUnchangedStates)();
+                (0, unchanged_states_1.forgetUnchangedStates)(change);
+                (0, studio_api_1.detachRunningListings)();
                 if (change.all)
-                    shots.clear();
+                    shots.clear({ announced: true });
                 else
                     shots.forget(change);
                 events.signal('parts', Object.assign({ revision }, change));
@@ -475,19 +529,21 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
             if (hot) {
                 const send = hot.send.bind(hot);
                 hot.send = (payload, data) => {
+                    var _a, _b;
                     // HMR is disabled: Studio must replace frames when Vite invalidates optimized dependency URLs.
                     if (typeof payload === 'object' && payload.type === 'full-reload') {
+                        console.error(`[design] vite full-reload: ${(_b = (_a = payload.triggeredBy) !== null && _a !== void 0 ? _a : payload.path) !== null && _b !== void 0 ? _b : 'no path'}`);
                         thumbs.clear();
                         redraw(changed_parts_1.ALL_PARTS);
                     }
                     return typeof payload === 'string' ? send(payload, data) : send(payload);
                 };
             }
-            const configPath = (0, paths_1.configPathOf)(target);
+            const configPath = (0, design_config_1.configPathOf)(target);
             const reloadConfig = () => {
                 let next;
                 try {
-                    next = (0, paths_1.readConfig)(target);
+                    next = (0, design_config_1.readConfig)(target);
                 }
                 catch (error) {
                     console.error(`design-explore: ${configPath} is invalid, keeping the last good config (${error instanceof Error ? error.message : String(error)})`);
@@ -505,14 +561,16 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
             };
             const reloadFlows = () => {
                 thumbs.clear();
-                shots.clear();
+                shots.clear({ announced: false });
                 events.signal('flows');
             };
             const signalLists = (file) => {
                 if (isInside(callsRoot, file))
                     events.signal('calls');
-                else if (isSketchFile(designRoot, file))
+                else if (isSketchFile(designRoot, file)) {
+                    (0, studio_api_1.detachRunningListings)();
                     events.signal('sketches');
+                }
             };
             const isSystemFile = (file) => !isInside(callsRoot, file) &&
                 !isSketchFile(designRoot, file) &&
@@ -600,15 +658,34 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                 }));
                 void (held ? (0, exports.sendHeldJson)(response, answered) : answered.then((answer) => sendJson(response, answer)));
             };
+            const frameDelayMs = frameDelayMsOf();
+            if (frameDelayMs)
+                vite.middlewares.use('/frame.html', (...[, , next]) => (0, rxjs_1.timer)(frameDelayMs)
+                    .pipe((0, rxjs_1.tap)(() => next()))
+                    .subscribe());
             vite.middlewares.use(stamp_1.STAMP_PATH, (_request, response) => {
                 response.setHeader('content-type', 'application/json');
                 response.end(JSON.stringify(Object.assign(Object.assign({}, stamp), identityOf())));
             });
             vite.middlewares.use(draw_ledger_1.QUEUE_PATH, (_request, response) => sendJson(response, { status: 200, body: ledger.report() }));
             vite.middlewares.use(render_1.RENDER_PATH, (0, render_1.renderMiddleware)(renderer));
+            vite.middlewares.use(served_cache_1.REGISTRY_SLICE_PATH, (request, response) => {
+                var _a;
+                return (0, thumb_1.send)(response, {
+                    status: 200,
+                    type: 'text/plain',
+                    body: (0, exports.registrySliceOf)({
+                        target,
+                        config,
+                        system,
+                        query: new URL((_a = request.url) !== null && _a !== void 0 ? _a : '', 'http://localhost').searchParams,
+                    }),
+                });
+            });
             vite.middlewares.use(render_1.FORCE_PATH, render_1.forceMiddleware);
             vite.middlewares.use(thumb_1.THUMB_PATH, thumbs.middleware);
             vite.middlewares.use(shot_1.SHOT_PATH, shots.middleware);
+            vite.middlewares.use(shot_board_1.SHOT_VIEW_PATH, shots.viewMiddleware);
             vite.middlewares.use(studio_api_1.MOTION_PATH, (0, motion_endpoint_1.motionMiddleware)({
                 system,
                 motionOf: shots.motionOf,
@@ -630,12 +707,13 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                 const asked = url.searchParams.get('product');
                 if (asked && !((_a = config.products) === null || _a === void 0 ? void 0 : _a[asked]))
                     return { status: 404, body: { error: `no product "${asked}"` } };
-                const products = yield (0, list_system_1.listSystem)({
-                    target,
-                    system,
-                    products: asked ? [asked] : system.products(),
-                    load: ({ file, product }) => vite.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product })),
-                });
+                const missing = (0, stale_dist_1.missingDistOf)({ target, config });
+                if (missing.length > 0)
+                    return { status: 503, body: { error: `missing build: ${missing.join('; ')}` } };
+                const products = yield (0, list_system_1.listSystem)(Object.assign({ target,
+                    system, products: asked ? [asked] : system.products(), load: ({ file, product }) => vite.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product })) }, (ruleChecker && {
+                    problemsOf: (name, product) => ruleChecker.rules({ target, product: name }).catch(() => (0, check_system_1.ruleProblemsOf)(product)),
+                })));
                 return { status: 200, body: products };
             })));
             vite.middlewares.use(product_command_1.PRODUCT_PATH, answer((_url_1, _a) => __awaiter(void 0, [_url_1, _a], void 0, function* (_url, { request }) {
@@ -702,15 +780,19 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
             studio(studio_api_1.INVENTORY_PATH, studio_api_1.inventoryAnswer);
             studio(studio_api_1.INVENTORY_APPROVE_PATH, studio_api_1.inventoryApproveAnswer);
             studio(studio_api_1.OPEN_POINTS_PATH, studio_api_1.openPointsAnswer);
-            studio(studio_api_1.PART_GO_PATH, studio_api_1.partGoAnswer);
-            studio(studio_api_1.PART_ACCEPT_PATH, studio_api_1.partAcceptAnswer);
             studio(studio_api_1.EXCEPTIONS_PATH, studio_api_1.exceptionsAnswer);
             studio(studio_api_1.EXCEPTION_APPROVE_PATH, studio_api_1.exceptionApproveAnswer);
             vite.middlewares.use(studio_api_1.COMMENT_EVENTS_PATH, events.middleware);
             (_c = vite.httpServer) === null || _c === void 0 ? void 0 : _c.on('close', () => {
                 events.close();
                 settling === null || settling === void 0 ? void 0 : settling.abort();
-                void Promise.all([thumbs.close(), shots.close(), inventoryDraws.close(), sketchChecker === null || sketchChecker === void 0 ? void 0 : sketchChecker.close()]);
+                void Promise.all([
+                    thumbs.close(),
+                    shots.close(),
+                    inventoryDraws.close(),
+                    sketchChecker === null || sketchChecker === void 0 ? void 0 : sketchChecker.close(),
+                    ruleChecker === null || ruleChecker === void 0 ? void 0 : ruleChecker.close(),
+                ]);
             });
             vite.watcher.add([designRoot, ...baseDirs, ...packageDirs()]);
             vite.watcher.on('add', (file) => (isPackageFile(file) ? packageChanged(file) : refresh(file)));
@@ -764,7 +846,7 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
     process.chdir(target);
     const { createServer } = yield import('vite');
     const { default: tailwind } = yield import('@tailwindcss/postcss');
-    const here = (0, paths_1.assetRoot)();
+    const here = (0, package_root_1.assetRoot)();
     const system = (0, system_modules_1.createSystemModules)({ target, config, sketchesRoot });
     const generatedStylesheetsOf = (0, generated_stylesheets_1.createGeneratedStylesheets)({ target, config, system });
     if (listen) {
@@ -776,7 +858,9 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
     }
     const baseDirs = system.products().flatMap((name) => { var _a, _b, _c; return (_c = (_b = (_a = system.productOf(name)) === null || _a === void 0 ? void 0 : _a.base) === null || _b === void 0 ? void 0 : _b.dir) !== null && _c !== void 0 ? _c : []; });
     const stylesheetImports = new Map();
-    const cache = listen && !own ? null : (0, paths_1.claimViteCache)(target, 'vite-check');
+    const cache = listen && !own ? null : (0, vite_cache_1.claimViteCache)(target, 'vite-check');
+    if (listen && !own)
+        void (0, old_shot_folders_1.removeOldShotFolders)((0, work_root_1.workRootOf)(target));
     const server = yield createServer(Object.assign(Object.assign(Object.assign({ configFile: false, root: (0, path_1.resolve)(here, 'web'), 
         // Every drawing is ruled under Tailwind 4, whatever the checkout installs. The tool brings its
         // own pipeline so no checkout's postcss config reaches a drawing.
@@ -793,7 +877,7 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
                     (0, shot_1.stylesheetImportsPlugin)(stylesheetImports),
                 ],
             },
-        }, cacheDir: (_a = cache === null || cache === void 0 ? void 0 : cache.dir) !== null && _a !== void 0 ? _a : (0, paths_1.viteCacheOf)(target, 'vite'), resolve: {
+        }, cacheDir: (_a = cache === null || cache === void 0 ? void 0 : cache.dir) !== null && _a !== void 0 ? _a : (0, vite_cache_1.viteCacheOf)(target, 'vite'), resolve: {
             alias: [
                 { find: /^@design-explore$/, replacement: (0, path_1.resolve)(here, 'define-call.ts') },
                 { find: new RegExp(`^${system_tsconfig_1.DESIGN_SYSTEM_SPECIFIER}$`), replacement: (0, path_1.resolve)(here, 'define-part.ts') },
@@ -812,13 +896,13 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
                 config,
                 system,
                 stylesheetImports,
-                shotCacheDir: listen && !own ? (0, paths_1.viteCacheOf)(target, 'shots') : null,
+                shotCacheDir: listen && !own ? (0, path_1.resolve)((0, work_root_1.workRootOf)(target), shot_store_1.SHOT_STORE_DIR) : null,
                 checkSketches,
             }),
         ] }, (listen ? {} : { appType: 'custom' })), (listen && !own ? {} : { logLevel: 'error' })), { server: Object.assign(Object.assign({ 
             // Studio swaps a frame for a fresh one once it has painted; a Vite reload would blank every frame at once.
             hmr: false }, (listen
-            ? Object.assign(Object.assign(Object.assign({ port: port !== null && port !== void 0 ? port : (0, paths_1.portOf)(config) }, (host ? { host } : {})), { strictPort: true }), (own ? { watch: null } : {})) : { middlewareMode: true, ws: false, watch: null })), { 
+            ? Object.assign(Object.assign(Object.assign({ port: port !== null && port !== void 0 ? port : (0, design_config_1.portOf)(config) }, (host ? { host } : {})), { strictPort: !own }), (own ? { watch: null } : {})) : { middlewareMode: true, ws: false, watch: null })), { 
             // The frame page lives inside this package, which is outside the checkout it draws. Vite
             // serves neither root unless both are allowed.
             fs: { allow: [target, here, ...baseDirs, ...(0, exports.installedRootsOf)(target)] } }) }));
@@ -831,9 +915,28 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
             throw error;
         throw new Error(`design-explore: cannot open a local port (${code}) - the environment forbids listening, so nothing was drawn. This is a permission failure, not a drawing failure: run outside the sandbox.`);
     });
-    return server;
+    return Object.assign(server, {
+        /** A disk store of this server's part pictures under `dir`; an entry is served while every file it was drawn from is unchanged. */
+        shotStore: (dir, salt) => {
+            return shotStoreOf({
+                target,
+                config,
+                system,
+                stylesheetImports,
+                dir,
+                salt: `${(0, code_hash_1.designPictureCodeOf)()} ${salt}`,
+                moduleById: (id) => server.moduleGraph.getModuleById(id),
+            });
+        },
+        /** Forgets every loaded part, sketch and module, so the next draw reads the files as they are now: a server started with `port` does not watch them. */
+        forgetDrawn: () => {
+            system.forget();
+            Object.values(server.environments).forEach((environment) => environment.moduleGraph.invalidateAll());
+        },
+    });
 });
 exports.createDesignServer = createDesignServer;
+const exitWhenParentIsGone = (server) => (0, parent_watch_1.exitWhenParentGone)({ onGone: () => void server.close().finally(() => process.exit(0)) });
 const exitWhenStdinCloses = (server) => {
     let closing = false;
     const shutDown = () => {
@@ -846,7 +949,7 @@ const exitWhenStdinCloses = (server) => {
     process.stdin.once('close', shutDown);
     process.stdin.resume();
 };
-const installedStampOf = () => (0, stamp_1.buildStampOf)((0, paths_1.installedAssetRoot)()).build;
+const installedStampOf = () => (0, stamp_1.buildStampOf)((0, package_root_1.installedAssetRoot)()).build;
 /**
  * Starts the design server for a checkout and keeps it running. The returned exit code is the
  * command's, not the server's: a listening server holds the process open on its own. With
@@ -855,14 +958,14 @@ const installedStampOf = () => (0, stamp_1.buildStampOf)((0, paths_1.installedAs
  */
 const serveDesign = (options) => __awaiter(void 0, void 0, void 0, function* () {
     const { target, host, reloadOnRebuild, checkSketches } = options;
-    const config = (0, paths_1.readConfig)(target);
+    const config = (0, design_config_1.readConfig)(target);
     if (!config) {
-        console.error(`design-explore: no config at ${(0, paths_1.configPathOf)(target)}`);
+        console.error(`design-explore: no config at ${(0, design_config_1.configPathOf)(target)}`);
         return 1;
     }
     const cwd = process.cwd();
     const served = reloadOnRebuild ? installedStampOf() : '';
-    (0, paths_1.snapshotPackage)(target);
+    (0, package_root_1.snapshotPackage)(target);
     const ownedByStudio = process.env['ETHLETE_DESIGN_EXIT_ON_STDIN_CLOSE'] === '1';
     const portPinned = ownedByStudio || !!Number(process.env['DE_PORT']);
     const server = yield (0, exports.createDesignServer)({
@@ -876,27 +979,28 @@ const serveDesign = (options) => __awaiter(void 0, void 0, void 0, function* ()
     yield server.listen();
     console.log(`design-explore: drawing ${target}`);
     if (!portPinned) {
-        console.log(`design-explore: not started by Studio, so it listens on a free port and leaves ${(0, paths_1.portOf)(config)} to Studio`);
+        console.log(`design-explore: not started by Studio, so it listens on a free port and leaves ${(0, design_config_1.portOf)(config)} to Studio`);
     }
     server.printUrls();
     if (process.env['ETHLETE_DESIGN_SLOW_CHECKS'] !== 'off')
         (0, slow_run_1.startSlowRunner)({
             target,
-            configOf: () => (0, paths_1.readConfig)(target),
+            configOf: () => (0, design_config_1.readConfig)(target),
             log: (line) => console.log(`design-explore: ${line}`),
         });
     if (ownedByStudio) {
         exitWhenStdinCloses(server);
     }
+    exitWhenParentIsGone(server);
     if (reloadOnRebuild) {
         (0, build_watch_1.watchBuild)({
-            root: (0, path_1.dirname)((0, paths_1.installedAssetRoot)()),
+            root: (0, path_1.dirname)((0, package_root_1.installedAssetRoot)()),
             served,
             stampOf: installedStampOf,
             onRebuild: () => {
                 var _a;
                 const address = (_a = server.httpServer) === null || _a === void 0 ? void 0 : _a.address();
-                const port = address && typeof address === 'object' ? address.port : (0, paths_1.portOf)(config);
+                const port = address && typeof address === 'object' ? address.port : (0, design_config_1.portOf)(config);
                 console.log('design-explore: the cli was rebuilt, restarting the server from the new build');
                 void server
                     .close()