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

package/src/lib/design/serve.js

@@ -9,10 +9,13 @@ 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.DESIGN_EVENTS_HEARTBEAT_MS = exports.sendHeldJson = exports.KEEP_ALIVE_MS = 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 legacy_1 = require("./legacy");
@@ -25,8 +28,12 @@ const render_packages_1 = require("./render-packages");
 const part_marks_1 = require("./part-marks");
 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 shot_store_1 = require("./shot-store");
+const imports_1 = require("./system/imports");
 const changed_parts_1 = require("./changed-parts");
+const server_identity_1 = require("./server-identity");
 const stamp_1 = require("./stamp");
 const list_system_1 = require("./system/list-system");
 const resolve_product_1 = require("./system/resolve-product");
@@ -34,12 +41,16 @@ 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 thumb_1 = require("./thumb");
 const motion_endpoint_1 = require("./motion-endpoint");
 const paths_1 = require("./paths");
+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) => {
@@ -182,6 +193,33 @@ 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';
@@ -190,6 +228,8 @@ 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;
 /**
  * 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`
@@ -197,6 +237,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, {
@@ -207,13 +252,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();
@@ -230,8 +284,76 @@ const withAssetUrls = (system) => {
     const marks = (0, part_marks_1.partMarksTransform)(system);
     return (code, id) => { var _a; return (_a = system.withAssetUrls(code, id)) !== null && _a !== void 0 ? _a : marks(code, id); };
 };
-const designExplore = ({ target, config, system, stylesheetImports, }) => {
+const filesUnder = (dir) => (0, fs_1.existsSync)(dir)
+    ? (0, fs_1.readdirSync)(dir, { recursive: true, withFileTypes: true })
+        .filter((entry) => entry.isFile())
+        .map((entry) => (0, path_1.relative)(dir, (0, path_1.join)(entry.parentPath, entry.name)))
+        .sort()
+    : [];
+const shotStoreOf = (options) => {
+    const { target, config, system, stylesheetImports, dir, salt, moduleById } = options;
+    const drawnSystemsOf = (address) => [
+        ...new Map([address.sketch, address.props].map((sketch) => [JSON.stringify(sketch !== null && sketch !== void 0 ? sketch : null), sketch !== null && sketch !== void 0 ? sketch : null])).values(),
+    ];
+    return (0, shot_store_1.createShotStore)({
+        dir,
+        salt,
+        inputsOf: (address) => {
+            var _a, _b;
+            const { product, part } = address;
+            const entry = (_a = config.products) === null || _a === void 0 ? void 0 : _a[product];
+            const sketches = drawnSystemsOf(address);
+            const roots = sketches.map((sketch) => {
+                var _a;
+                const file = (_a = system.partOf({ product, part, sketch })) === null || _a === void 0 ? void 0 : _a.file;
+                return file ? moduleById((0, system_modules_1.productModuleIdOf)({ file, product, sketch })) : undefined;
+            });
+            if (!entry || roots.some((root) => !root))
+                return null;
+            const styles = ((_b = entry.styles) !== null && _b !== void 0 ? _b : []).flatMap((style) => [null, ...sketches].flatMap((sketch) => { var _a; return (_a = moduleById((0, system_modules_1.productModuleIdOf)({ file: (0, path_1.resolve)(target, style), product, sketch }))) !== null && _a !== void 0 ? _a : []; }));
+            const read = sketches.flatMap((sketch) => {
+                var _a;
+                return [
+                    ...system.tokenStylesheetsOf({ product, sketch }),
+                    ...system.replacedStylesheetsOf({ product, sketch }).values(),
+                    ...((_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)());
+            return [
+                ...(0, shot_1.dependencyFilesOf)([...roots.flatMap((root) => root !== null && root !== void 0 ? root : []), ...styles], stylesheetImports),
+                ...read,
+                (0, paths_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)));
+        },
+        scopeOf: (address) => JSON.stringify(drawnSystemsOf(address).map((sketch) => {
+            const drawn = system.drawnOf(address.product, sketch);
+            return (drawn && {
+                parts: drawn.parts.map((part) => [(0, resolve_product_1.partKeyOf)(part), part.file, part.css]),
+                fixtures: drawn.fixtures,
+                shared: (0, imports_1.sharedDirsOf)(drawn).map((shared) => [shared, filesUnder(shared)]),
+            });
+        })),
+    });
+};
+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 }) });
+    const isPackageFile = (file) => packageDirs().some((dir) => isInside(dir, (0, path_1.resolve)(file)));
+    const loadedPackageCode = new Map();
+    const hashOf = (code) => (0, crypto_1.createHash)('sha1').update(code).digest('hex');
+    const isAsLoaded = (file) => {
+        try {
+            return loadedPackageCode.get(file) === hashOf((0, fs_1.readFileSync)(file, 'utf8'));
+        }
+        catch (_a) {
+            return false;
+        }
+    };
     return {
         name: 'design-explore',
         enforce: 'pre',
@@ -250,7 +372,12 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
                 return systemRegistry(system);
             return null;
         },
-        transform: withAssetUrls(system),
+        transform: (code, id) => {
+            const file = (0, path_1.resolve)((0, system_modules_1.fileOfModuleId)(id));
+            if (isPackageFile(file))
+                loadedPackageCode.set(file, hashOf(code));
+            return transform(code, id);
+        },
         transformIndexHtml: {
             order: 'pre',
             handler: (html, ctx) => {
@@ -273,18 +400,35 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
             const callsRoot = (0, paths_1.callsRootOf)(target);
             const designRoot = (0, path_1.resolve)(target, paths_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)}`;
             };
-            const thumbs = (0, thumb_1.createThumbnailer)({ target, base });
-            const inventoryDraws = (0, thumb_1.createDrawQueue)({ target });
-            const shots = (0, shot_1.createPartShooter)({
-                target,
+            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 shots = (0, shot_1.createPartShooter)(Object.assign(Object.assign({ target,
                 base,
-                system,
-                statesOf: (_a) => __awaiter(void 0, [_a], void 0, function* ({ product, part, sketch }) {
+                ledger,
+                system }, (shotCacheDir
+                ? {
+                    store: shotStoreOf({
+                        target,
+                        config,
+                        system,
+                        stylesheetImports,
+                        dir: shotCacheDir,
+                        salt: `${stamp.version} ${stamp.build}`,
+                        moduleById: (id) => vite.moduleGraph.getModuleById(id),
+                    }),
+                }
+                : {})), { statesOf: (_a) => __awaiter(void 0, [_a], void 0, function* ({ product, part, sketch }) {
                     var _b, _c;
                     const file = (_b = system.partOf({ product, part, sketch })) === null || _b === void 0 ? void 0 : _b.file;
                     if (!file)
@@ -292,8 +436,7 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
                     const module = (yield vite.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product, sketch })));
                     const states = (_c = module.default) === null || _c === void 0 ? void 0 : _c.states;
                     return states && typeof states === 'object' ? Object.keys(states) : [];
-                }),
-            });
+                }) }));
             const baseDirs = [
                 ...new Set(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 : []; })),
             ].filter((dir) => !isInside(designRoot, dir));
@@ -374,7 +517,34 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
             const isSystemFile = (file) => !isInside(callsRoot, file) &&
                 !isSketchFile(designRoot, file) &&
                 [designRoot, ...baseDirs].some((dir) => isInside(dir, file));
+            const modulesOf = (file) => { var _a; return [...((_a = vite.moduleGraph.getModulesByFile((0, path_1.resolve)(file))) !== null && _a !== void 0 ? _a : [])]; };
+            const rebuilt = new Set();
+            let settling;
+            const redrawRebuilt = () => {
+                const changed = [...rebuilt].filter((rewritten) => !isAsLoaded(rewritten));
+                const modules = changed.flatMap(modulesOf);
+                const [file] = changed;
+                rebuilt.clear();
+                if (!file || modules.length === 0)
+                    return;
+                const dependents = (0, shot_1.dependentIdsOf)(modules, stylesheetImports);
+                for (const module of modules)
+                    vite.moduleGraph.invalidateModule(module);
+                redraw((0, changed_parts_1.changedPartsOf)({ target, config, system, file, dependents }));
+            };
+            // A package build deletes its folder and writes it anew; a module stays stale unless it is
+            // invalidated once the new file is there, so `unlink` alone redraws nothing.
+            const packageChanged = (file) => {
+                if (modulesOf(file).length === 0)
+                    return;
+                rebuilt.add((0, path_1.resolve)(file));
+                settling === null || settling === void 0 ? void 0 : settling.abort();
+                settling = new AbortController();
+                void (0, promises_1.setTimeout)(REBUILD_SETTLE_MS, undefined, { signal: settling.signal }).then(redrawRebuilt, () => undefined);
+            };
             const refresh = (file) => {
+                if (isPackageFile(file))
+                    return;
                 if ((0, path_1.resolve)(file) === configPath)
                     return reloadConfig();
                 if (isCommentFile(file))
@@ -399,6 +569,8 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
             };
             const change = (file) => {
                 var _a;
+                if (isPackageFile(file))
+                    return packageChanged(file);
                 if ((0, path_1.resolve)(file) === configPath)
                     return reloadConfig();
                 if (isCommentFile(file))
@@ -412,17 +584,27 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
                 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)));
             };
             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(render_1.FORCE_PATH, render_1.forceMiddleware);
             vite.middlewares.use(thumb_1.THUMB_PATH, thumbs.middleware);
@@ -456,7 +638,7 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
                 });
                 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();
@@ -468,22 +650,24 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
                     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,
@@ -493,7 +677,7 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
                         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);
@@ -517,15 +701,19 @@ const designExplore = ({ target, config, system, stylesheetImports, }) => {
             studio(studio_api_1.FLOW_NOTE_DELETE_PATH, studio_api_1.flowNoteDeleteAnswer);
             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();
-                void Promise.all([thumbs.close(), shots.close(), inventoryDraws.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()]);
             });
-            vite.watcher.add([designRoot, ...baseDirs]);
-            vite.watcher.on('add', refresh);
+            vite.watcher.add([designRoot, ...baseDirs, ...packageDirs()]);
+            vite.watcher.on('add', (file) => (isPackageFile(file) ? packageChanged(file) : refresh(file)));
             vite.watcher.on('unlink', refresh);
             vite.watcher.on('change', change);
         },
@@ -540,14 +728,33 @@ 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
- * (0 picks a free one), quiet, unwatched and with a dependency cache of its own, so a command can draw
- * while the user's server runs.
+ * (0 picks a free one), quiet and unwatched. Only the user's server uses the checkout's dependency cache,
+ * so a command can draw while that server runs.
  */
 const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    const { target, config, listen, sketchesRoot } = options;
+    var _a;
+    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;
@@ -569,6 +776,7 @@ 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 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.
@@ -585,7 +793,7 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
                     (0, shot_1.stylesheetImportsPlugin)(stylesheetImports),
                 ],
             },
-        }, cacheDir: (0, paths_1.viteCacheOf)(target, own ? 'vite-check' : 'vite'), resolve: {
+        }, cacheDir: (_a = cache === null || cache === void 0 ? void 0 : cache.dir) !== null && _a !== void 0 ? _a : (0, paths_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') },
@@ -594,14 +802,28 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
             ],
         }, 
         // A design mock ships as TS that imports CSS with `?inline`, which the dependency pre-bundler
-        // can not load.
-        optimizeDeps: { exclude: ['@ethlete/components', '@ethlete/core'] }, plugins: [designExplore({ target, config, system, stylesheetImports })] }, (listen ? {} : { appType: 'custom' })), (listen && !own ? {} : { logLevel: 'error' })), { server: Object.assign(Object.assign({ 
+        // can not load. The tool's own modules sit in a snapshot under `node_modules`; pre-bundled, each
+        // late find of one reloads every frame.
+        optimizeDeps: {
+            exclude: ['@ethlete/components', '@ethlete/core', '@design-explore', system_tsconfig_1.DESIGN_SYSTEM_SPECIFIER, kit_1.KIT_SPECIFIER],
+        }, plugins: [
+            designExplore({
+                target,
+                config,
+                system,
+                stylesheetImports,
+                shotCacheDir: listen && !own ? (0, paths_1.viteCacheOf)(target, 'shots') : 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 })), { 
             // 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);
     server.listen = (...args) => listening(...args).catch((error) => {
         const code = error === null || error === void 0 ? void 0 : error.code;
@@ -624,35 +846,66 @@ const exitWhenStdinCloses = (server) => {
     process.stdin.once('close', shutDown);
     process.stdin.resume();
 };
+const installedStampOf = () => (0, stamp_1.buildStampOf)((0, paths_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 { target, host, reloadOnRebuild, checkSketches } = options;
     const config = (0, paths_1.readConfig)(target);
     if (!config) {
         console.error(`design-explore: no config at ${(0, paths_1.configPathOf)(target)}`);
         return 1;
     }
+    const cwd = process.cwd();
+    const served = reloadOnRebuild ? installedStampOf() : '';
     (0, paths_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)({
         target,
         config,
         listen: true,
         host,
-        listenOn: ownedByStudio ? undefined : yield freePortOf(),
+        listenOn: portPinned ? undefined : yield freePortOf(),
+        checkSketches,
     });
     yield server.listen();
     console.log(`design-explore: drawing ${target}`);
-    if (!ownedByStudio) {
+    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`);
     }
     server.printUrls();
+    if (process.env['ETHLETE_DESIGN_SLOW_CHECKS'] !== 'off')
+        (0, slow_run_1.startSlowRunner)({
+            target,
+            configOf: () => (0, paths_1.readConfig)(target),
+            log: (line) => console.log(`design-explore: ${line}`),
+        });
     if (ownedByStudio) {
         exitWhenStdinCloses(server);
     }
+    if (reloadOnRebuild) {
+        (0, build_watch_1.watchBuild)({
+            root: (0, path_1.dirname)((0, paths_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);
+                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;