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

package/src/lib/design/serve.js

@@ -9,14 +9,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serveDesign = exports.createDesignServer = 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");
 const promises_1 = require("timers/promises");
 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");
@@ -29,27 +31,40 @@ 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");
 const system_tsconfig_1 = require("./system/system-tsconfig");
 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';
 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)}),`)
@@ -184,10 +199,68 @@ 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) });
 };
+exports.KEEP_ALIVE_MS = 15000;
+/**
+ * Sends `answered` as JSON, and a space every `KEEP_ALIVE_MS` while it is pending: WebKit fails a fetch with "Load
+ * failed" when no byte arrives for 60 s. Once a space went out the status is 200, so a later failure arrives as its
+ * body alone.
+ */
+const sendHeldJson = (response, answered) => {
+    let started = false;
+    const tick = (0, rxjs_1.interval)(exports.KEEP_ALIVE_MS)
+        .pipe((0, rxjs_1.tap)(() => {
+        if (!started) {
+            started = true;
+            response.writeHead(200, { 'access-control-allow-origin': '*', 'content-type': 'application/json' });
+        }
+        response.write(' ');
+    }))
+        .subscribe();
+    response.once('close', () => tick.unsubscribe());
+    return answered.then((answer) => {
+        tick.unsubscribe();
+        if (started)
+            response.end(JSON.stringify(answer.body));
+        else
+            sendJson(response, answer);
+    });
+};
+exports.sendHeldJson = sendHeldJson;
 const isCommentFile = (file) => file.endsWith('.json') && (0, path_1.basename)((0, path_1.dirname)(file)) === 'comments';
 const isNoteFile = (file) => file.endsWith('.json') && (0, path_1.basename)((0, path_1.dirname)(file)) === 'notes';
 const isFlowFile = (file) => file.endsWith('.json') && (0, path_1.basename)((0, path_1.dirname)(file)) === 'flows';
@@ -196,6 +269,15 @@ const isSketchFile = (designRoot, file) => {
     const [product, folder, ...inside] = (0, path_1.relative)(designRoot, (0, path_1.resolve)(file)).split(path_1.sep);
     return !!product && product !== '..' && folder === 'sketches' && inside.length > 0;
 };
+// 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`
@@ -203,6 +285,11 @@ const isSketchFile = (designRoot, file) => {
  */
 const createDesignEvents = () => {
     const listeners = new Set();
+    let heartbeat;
+    const beat = () => {
+        for (const response of listeners)
+            response.write(': heartbeat\n\n');
+    };
     return {
         middleware: (request, response) => {
             response.writeHead(200, {
@@ -213,13 +300,22 @@ const createDesignEvents = () => {
             });
             response.write(': open\n\n');
             listeners.add(response);
-            request.on('close', () => listeners.delete(response));
+            heartbeat !== null && heartbeat !== void 0 ? heartbeat : (heartbeat = (0, rxjs_1.interval)(exports.DESIGN_EVENTS_HEARTBEAT_MS).subscribe(beat));
+            request.on('close', () => {
+                listeners.delete(response);
+                if (listeners.size === 0) {
+                    heartbeat === null || heartbeat === void 0 ? void 0 : heartbeat.unsubscribe();
+                    heartbeat = undefined;
+                }
+            });
         },
         signal: (event, data = {}) => {
             for (const response of listeners)
                 response.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
         },
         close: () => {
+            heartbeat === null || heartbeat === void 0 ? void 0 : heartbeat.unsubscribe();
+            heartbeat = undefined;
             for (const response of listeners)
                 response.end();
             listeners.clear();
@@ -250,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;
@@ -271,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);
@@ -291,7 +388,7 @@ const shotStoreOf = (options) => {
         })),
     });
 };
-const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir, }) => {
+const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir, checkSketches, }) => {
     const renderer = (0, render_1.createRenderer)({ target, config });
     const transform = withAssetUrls(system);
     const packageDirs = () => (0, render_packages_1.renderPackageDirsOf)({ target, packages: (0, render_packages_1.renderPackagesOf)({ target, config }) });
@@ -349,21 +446,32 @@ 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 }) => !sketch || system.drawnOf(sketch.product, sketch) !== null);
+            const ledger = (0, draw_ledger_1.createDrawLedger)(Date.now, ({ sketch }) => {
+                const drawn = sketch && system.drawnOf(sketch.product, sketch);
+                return !sketch || (!!drawn && !('sketchGone' in drawn));
+            });
             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,
@@ -371,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),
                     }),
                 }
@@ -402,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)
@@ -411,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));
@@ -422,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)})`);
@@ -452,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) &&
@@ -531,22 +642,50 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                 const dependents = (0, shot_1.dependentIdsOf)((_a = vite.moduleGraph.getModulesByFile(file)) !== null && _a !== void 0 ? _a : [], stylesheetImports);
                 redraw((0, changed_parts_1.changedPartsOf)({ target, config, system, file, dependents }), isSystemFile(file));
             };
-            const answer = (handle) => (request, response) => {
+            const answer = (handle, held = false) => (request, response) => {
                 var _a;
-                return void handle(new URL((_a = request.url) !== null && _a !== void 0 ? _a : '', 'http://localhost'), request).then((answered) => sendJson(response, answered), (error) => sendJson(response, {
+                const closed = new AbortController();
+                response.once('close', () => {
+                    if (!response.writableFinished)
+                        closed.abort();
+                });
+                const answered = handle(new URL((_a = request.url) !== null && _a !== void 0 ? _a : '', 'http://localhost'), {
+                    request,
+                    signal: closed.signal,
+                }).catch((error) => ({
                     status: 500,
                     body: { error: error instanceof Error ? error.message : String(error) },
                 }));
+                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(stamp));
+                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,
@@ -568,15 +707,16 @@ 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, request) => __awaiter(void 0, void 0, void 0, function* () {
+            vite.middlewares.use(product_command_1.PRODUCT_PATH, answer((_url_1, _a) => __awaiter(void 0, [_url_1, _a], void 0, function* (_url, { request }) {
                 const created = yield (0, product_command_1.newProductAnswer)({ target, request });
                 if (created.status === 201)
                     reloadConfig();
@@ -588,22 +728,24 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                     body: yield (0, calls_1.listCalls)({ target, load: (file) => vite.ssrLoadModule(file) }),
                 });
             })));
-            vite.middlewares.use(legacy_1.TRANSFER_PATH, answer((url, request) => __awaiter(void 0, void 0, void 0, function* () {
-                var _a;
+            vite.middlewares.use(legacy_1.TRANSFER_PATH, answer((url_1, _a) => __awaiter(void 0, [url_1, _a], void 0, function* (url, { request }) {
+                var _b;
                 if (request.method !== 'POST')
                     return { status: 405, body: { error: 'POST only' } };
-                const result = (0, legacy_1.markTransferred)({ target, slug: (_a = url.searchParams.get('call')) !== null && _a !== void 0 ? _a : '' });
+                const result = (0, legacy_1.markTransferred)({ target, slug: (_b = url.searchParams.get('call')) !== null && _b !== void 0 ? _b : '' });
                 const status = result === 'missing' ? 404 : result === 'unreadable' ? 422 : 200;
                 return { status, body: { result } };
             })));
-            const studio = (path, handle) => vite.middlewares.use(path, answer((url, request) => __awaiter(void 0, void 0, void 0, function* () {
+            const studio = (path, handle) => vite.middlewares.use(path, answer((url_1, _a) => __awaiter(void 0, [url_1, _a], void 0, function* (url, { request, signal }) {
                 return handle({
                     target,
                     url,
                     request,
+                    signal,
                     load: ({ file, product, sketch }) => vite.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product, sketch })),
                     pictureOf: shots.pictureOf,
                     boxOf: shots.changedBoxesOf,
+                    checkSketches: checkSketches !== null && checkSketches !== void 0 ? checkSketches : sketchChecker,
                     inventoryOf: ({ product, part }) => (0, inventory_1.inventoryOf)({
                         product,
                         part,
@@ -613,7 +755,7 @@ const designExplore = ({ target, config, system, stylesheetImports, shotCacheDir
                         draw: (job) => inventoryDraws.run(job),
                     }),
                 });
-            })));
+            }), path === studio_api_1.SKETCHES_PATH));
             studio(studio_api_1.SKETCHES_PATH, studio_api_1.sketchesAnswer);
             studio(studio_api_1.SKETCH_PREVIEW_PATH, studio_api_1.sketchPreviewAnswer);
             studio(studio_api_1.SKETCH_COMPARE_PATH, studio_api_1.sketchCompareAnswer);
@@ -638,14 +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_READY_PATH, studio_api_1.partReadyAnswer);
             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()]);
+                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)));
@@ -663,6 +810,24 @@ const freePortOf = () => new Promise((resolvePort, reject) => {
         probe.close(() => resolvePort(port));
     });
 });
+/** The real directories a checkout's `node_modules` points into, which Vite refuses to serve unless allowed. */
+const installedRootsOf = (target) => {
+    const modules = (0, path_1.join)(target, 'node_modules');
+    const roots = new Set();
+    try {
+        roots.add((0, fs_1.realpathSync)(modules));
+        for (const entry of (0, fs_1.readdirSync)(modules, { withFileTypes: true })) {
+            if (entry.isSymbolicLink() && !entry.name.startsWith('.')) {
+                roots.add((0, path_1.dirname)((0, fs_1.realpathSync)((0, path_1.join)(modules, entry.name))));
+            }
+        }
+    }
+    catch (_a) {
+        return [...roots];
+    }
+    return [...roots];
+};
+exports.installedRootsOf = installedRootsOf;
 /**
  * The Vite server that draws a checkout: listening on the configured port to serve the frames, or in
  * middleware mode only to load design modules for a command. With `port`, it listens there instead
@@ -671,7 +836,7 @@ const freePortOf = () => new Promise((resolvePort, reject) => {
  */
 const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
-    const { target, config, listen, sketchesRoot } = options;
+    const { target, config, listen, sketchesRoot, checkSketches } = options;
     const host = options.host || process.env['DE_HOST'] || undefined;
     const own = listen && options.port !== undefined;
     const port = own ? yield freePortOf() : options.listenOn;
@@ -681,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) {
@@ -693,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.
@@ -710,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') },
@@ -729,15 +896,16 @@ 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] } }) }));
+            fs: { allow: [target, here, ...baseDirs, ...(0, exports.installedRootsOf)(target)] } }) }));
     const closing = server.close.bind(server);
     server.close = () => closing().finally(() => cache === null || cache === void 0 ? void 0 : cache.release());
     const listening = server.listen.bind(server);
@@ -747,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 = () => {
@@ -762,18 +949,23 @@ const exitWhenStdinCloses = (server) => {
     process.stdin.once('close', shutDown);
     process.stdin.resume();
 };
+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.
+ * command's, not the server's: a listening server holds the process open on its own. With
+ * `reloadOnRebuild`, a rebuild or reinstall of the cli restarts the server on the same port from
+ * the new build, inside the process that was started.
  */
 const serveDesign = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    const { target, host } = options;
-    const config = (0, paths_1.readConfig)(target);
+    const { target, host, reloadOnRebuild, checkSketches } = options;
+    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;
     }
-    (0, paths_1.snapshotPackage)(target);
+    const cwd = process.cwd();
+    const served = reloadOnRebuild ? installedStampOf() : '';
+    (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)({
@@ -782,16 +974,42 @@ const serveDesign = (options) => __awaiter(void 0, void 0, void 0, function* ()
         listen: true,
         host,
         listenOn: portPinned ? undefined : yield freePortOf(),
+        checkSketches,
     });
     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, 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, 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, design_config_1.portOf)(config);
+                console.log('design-explore: the cli was rebuilt, restarting the server from the new build');
+                void server
+                    .close()
+                    .then(() => process.env[build_watch_1.SUPERVISED_ENV] === '1'
+                    ? process.exit(build_watch_1.RELOAD_EXIT_CODE)
+                    : (0, build_watch_1.superviseReloads)(() => (0, build_watch_1.relaunch)({ port, cwd })).then((code) => process.exit(code)));
+            },
+        });
+    }
     return 0;
 });
 exports.serveDesign = serveDesign;