@ethlete/cli 3.0.0-next.20 → 3.0.0-next.22

package/src/lib/design/serve.js

@@ -9,23 +9,37 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serveDesign = void 0;
+exports.serveDesign = exports.createDesignServer = void 0;
 const fs_1 = require("fs");
+const net_1 = require("net");
 const path_1 = require("path");
+const calls_1 = require("./calls");
 const calls_tsconfig_1 = require("./calls-tsconfig");
+const legacy_1 = require("./legacy");
 const vite_paths_1 = require("./vite-paths");
+const studio_api_1 = require("./studio-api");
+const force_interactions_1 = require("./force-interactions");
+const product_command_1 = require("./product-command");
 const render_1 = require("./render");
 const render_packages_1 = require("./render-packages");
+const part_marks_1 = require("./part-marks");
+const shot_1 = require("./shot");
+const changed_parts_1 = require("./changed-parts");
 const stamp_1 = require("./stamp");
+const list_system_1 = require("./system/list-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 thumb_1 = require("./thumb");
 const paths_1 = require("./paths");
 const VIRTUAL = 'virtual:design-explore';
 /** 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 entries = (0, fs_1.globSync)('**/call.ts', { cwd: root })
-        .sort()
-        .map((file) => [(0, vite_paths_1.callSlugOf)(file), (0, vite_paths_1.fsUrl)((0, path_1.resolve)(root, file))]);
+    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)}),`)
         .join('\n')}\n};\n`;
@@ -52,97 +66,412 @@ const workspaceAliases = (target) => {
         ];
     });
 };
+// Sequential on purpose: Vite appends a sheet's <style> when its import settles, so parallel
+// imports let the head order, and with it the winning rule, change from load to load.
+const settingsLoaders = (options) => `{\n${Object.entries(options.settings)
+    .map(([name, entry]) => {
+    var _a;
+    return `  ${JSON.stringify(name)}: () => Promise.resolve()${((_a = entry.styles) !== null && _a !== void 0 ? _a : [])
+        .map((style) => (0, path_1.resolve)(options.target, style))
+        .map((file) => (options.products ? (0, system_modules_1.productModuleIdOf)({ file, product: name }) : file))
+        .map((file) => `.then(() => import(${JSON.stringify((0, vite_paths_1.fsUrl)(file))}))`)
+        .join('')},`;
+})
+    .join('\n')}\n}`;
+const themesOfSettings = (settings) => JSON.stringify(Object.fromEntries(Object.entries(settings).map(([name, entry]) => {
+    var _a, _b, _c, _d;
+    return [
+        name,
+        { surface: (_b = (_a = entry.themes) === null || _a === void 0 ? void 0 : _a.surface) !== null && _b !== void 0 ? _b : [], color: (_d = (_c = entry.themes) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : [] },
+    ];
+})));
 /**
- * The stylesheet of every project, each behind its own loader. A frame loads the one its call
- * belongs to: two projects define the same theme variables, so a frame that loaded both would
+ * The stylesheet of every project and every product, each behind its own loader. A frame loads the
+ * one it draws for: two projects define the same theme variables, so a frame that loaded both would
  * draw under whichever stylesheet came last.
  */
 const env = (target, config) => {
     var _a, _b;
-    const loaders = Object.entries((_a = config.projects) !== null && _a !== void 0 ? _a : {}).map(([name, project]) => {
-        var _a;
-        return `  ${JSON.stringify(name)}: () => Promise.all([${((_a = project.styles) !== null && _a !== void 0 ? _a : [])
-            .map((style) => `import(${JSON.stringify((0, vite_paths_1.fsUrl)((0, path_1.resolve)(target, style)))})`)
-            .join(', ')}]),`;
-    });
-    const themes = Object.fromEntries(Object.entries((_b = config.projects) !== null && _b !== void 0 ? _b : {}).map(([name, project]) => {
-        var _a, _b, _c, _d;
-        return [
-            name,
-            { surface: (_b = (_a = project.themes) === null || _a === void 0 ? void 0 : _a.surface) !== null && _b !== void 0 ? _b : [], color: (_d = (_c = project.themes) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : [] },
-        ];
-    }));
-    return (`const envs = {\n${loaders.join('\n')}\n};\n` +
+    const projects = (_a = config.projects) !== null && _a !== void 0 ? _a : {};
+    const products = (_b = config.products) !== null && _b !== void 0 ? _b : {};
+    return (`const envs = ${settingsLoaders({ target, settings: projects })};\n` +
         `export const loadEnv = (project) => (envs[project] ?? (() => Promise.resolve()))();\n` +
-        `const themes = ${JSON.stringify(themes)};\n` +
-        `export const themesOf = (project) => themes[project] ?? { surface: [], color: [] };\n`);
+        `const themes = ${themesOfSettings(projects)};\n` +
+        `export const themesOf = (project) => themes[project] ?? { surface: [], color: [] };\n` +
+        `const productEnvs = ${settingsLoaders({ target, settings: products, products: true })};\n` +
+        `export const loadProductEnv = (product) => (productEnvs[product] ?? (() => Promise.resolve()))();\n`);
+};
+/** Each product's parts, keyed `<layer>/<name>`, each loaded as the product resolves it. */
+const partsRegistry = (options) => options.parts
+    .map((part) => `${options.indent}${JSON.stringify((0, resolve_product_1.partKeyOf)(part))}: () => import(${JSON.stringify((0, vite_paths_1.fsUrl)((0, system_modules_1.productModuleIdOf)({ file: part.file, product: options.product, sketch: options.sketch })))}),`)
+    .join('\n');
+const sketchRegistry = (system, product) => system
+    .sketchesOf(product)
+    .map(({ target, variants }) => `    ${JSON.stringify(target)}: {\n${variants
+    .map((variant) => {
+    var _a, _b;
+    return `      ${JSON.stringify(variant)}: {\n${partsRegistry({
+        parts: (_b = (_a = system.drawnOf(product, { target, variant })) === null || _a === void 0 ? void 0 : _a.parts) !== null && _b !== void 0 ? _b : [],
+        product,
+        sketch: { target, variant },
+        indent: '        ',
+    })}\n      },`;
+})
+    .join('\n')}\n    },`)
+    .join('\n');
+/** The loader of the tokens stylesheets a product, or one sketch variant, draws under, in order; `null` without one. */
+const tokensLoaderOf = (options) => {
+    const { system, product, sketch } = options;
+    const imports = system
+        .tokenStylesheetsOf({ product, sketch })
+        .map((css) => `import(${JSON.stringify((0, vite_paths_1.fsUrl)((0, system_modules_1.stylesheetModuleIdOf)({ file: css, query: 'inline', product, sketch: sketch !== null && sketch !== void 0 ? sketch : null })))})`);
+    if (imports.length === 0)
+        return null;
+    if (imports.length === 1)
+        return `() => ${imports[0]}`;
+    return `() => Promise.all([${imports.join(', ')}]).then((sheets) => ({ default: sheets.map((sheet) => sheet.default).join('\\n') }))`;
+};
+const tokensRegistry = (system) => `export const tokens = {\n${system
+    .products()
+    .flatMap((product) => {
+    const loader = tokensLoaderOf({ system, product });
+    return loader ? [`  ${JSON.stringify(product)}: ${loader},`] : [];
+})
+    .join('\n')}\n};\nexport const sketchTokens = {\n${system
+    .products()
+    .map((product) => `  ${JSON.stringify(product)}: {\n${system
+    .sketchesOf(product)
+    .map(({ target, variants }) => `    ${JSON.stringify(target)}: {\n${variants
+    .flatMap((variant) => {
+    const loader = tokensLoaderOf({ system, product, sketch: { target, variant } });
+    return loader ? [`      ${JSON.stringify(variant)}: ${loader},`] : [];
+})
+    .join('\n')}\n    },`)
+    .join('\n')}\n  },`)
+    .join('\n')}\n};\n`;
+const systemRegistry = (system) => `export const parts = {\n${system
+    .products()
+    .map((product) => { var _a, _b; return `  ${JSON.stringify(product)}: {\n${partsRegistry({ parts: (_b = (_a = system.productOf(product)) === null || _a === void 0 ? void 0 : _a.parts) !== null && _b !== void 0 ? _b : [], product, indent: '    ' })}\n  },`; })
+    .join('\n')}\n};\nexport const sketchParts = {\n${system
+    .products()
+    .map((product) => `  ${JSON.stringify(product)}: {\n${sketchRegistry(system, product)}\n  },`)
+    .join('\n')}\n};\n${tokensRegistry(system)}`;
+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) });
+};
+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';
+const isDecisionFile = (file) => (0, path_1.basename)(file) === sketch_1.SKETCH_FILE || isCommentFile(file) || isNoteFile(file);
+/**
+ * A server-sent event stream for Studio: `comments` when a comment file changed, `notes` when a note file changed,
+ * `flows` when a flow file changed, and `parts` with the parts any change redraws and the revision it gave them.
+ */
+const createDesignEvents = () => {
+    const listeners = new Set();
+    return {
+        middleware: (request, response) => {
+            response.writeHead(200, {
+                'content-type': 'text/event-stream',
+                'cache-control': 'no-cache',
+                connection: 'keep-alive',
+                'access-control-allow-origin': '*',
+            });
+            response.write(': open\n\n');
+            listeners.add(response);
+            request.on('close', () => listeners.delete(response));
+        },
+        signal: (event, data = {}) => {
+            for (const response of listeners)
+                response.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+        },
+        close: () => {
+            for (const response of listeners)
+                response.end();
+            listeners.clear();
+        },
+    };
 };
+const isInside = (folder, file) => file.startsWith(`${folder}${path_1.sep}`);
 /**
- * Serves the call registry and each project's global stylesheet to the frame page, and renders the
- * Angular templates a drawing asks for with `ng()`.
+ * Serves the call registry, each product's parts and each project's and product's global stylesheet
+ * to the frame page, resolves `@system/...` per product, and renders the Angular templates a drawing
+ * asks for with `ng()`.
  */
-const designExplore = (target, config) => ({
+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, }) => ({
     name: 'design-explore',
     enforce: 'pre',
-    resolveId: (id) => {
-        var _a, _b;
-        if (id === VIRTUAL || id === `${VIRTUAL}/env`)
+    resolveId: (id, importer) => {
+        var _a, _b, _c;
+        if (id === VIRTUAL || id === `${VIRTUAL}/env` || id === `${VIRTUAL}/system`)
             return `\0${id}`;
-        return (0, render_packages_1.mappedSubpathOf)({ specifier: id, packages: (_b = (_a = config.render) === null || _a === void 0 ? void 0 : _a.packages) !== null && _b !== void 0 ? _b : {}, target });
+        return ((_a = system.resolveId(id, importer)) !== null && _a !== void 0 ? _a : (0, render_packages_1.mappedSubpathOf)({ specifier: id, packages: (_c = (_b = config.render) === null || _b === void 0 ? void 0 : _b.packages) !== null && _c !== void 0 ? _c : {}, target }));
     },
     load: (id) => {
         if (id === `\0${VIRTUAL}`)
             return registry(target);
         if (id === `\0${VIRTUAL}/env`)
             return env(target, config);
+        if (id === `\0${VIRTUAL}/system`)
+            return systemRegistry(system);
         return null;
     },
+    transform: withAssetUrls(system),
     transformIndexHtml: {
         order: 'pre',
         handler: (html, ctx) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             if (!ctx.path.includes('frame'))
                 return html;
             const asked = new URL((_a = ctx.originalUrl) !== null && _a !== void 0 ? _a : ctx.path, 'http://localhost');
-            const head = (_d = (_b = config.projects) === null || _b === void 0 ? void 0 : _b[projectOf((_c = asked.searchParams.get('call')) !== null && _c !== void 0 ? _c : '')]) === null || _d === void 0 ? void 0 : _d.head;
+            const product = asked.searchParams.get('product');
+            const head = product
+                ? (_c = (_b = config.products) === null || _b === void 0 ? void 0 : _b[product]) === null || _c === void 0 ? void 0 : _c.head
+                : (_f = (_d = config.projects) === null || _d === void 0 ? void 0 : _d[projectOf((_e = asked.searchParams.get('call')) !== null && _e !== void 0 ? _e : '')]) === null || _f === void 0 ? void 0 : _f.head;
             if (!head)
                 return html;
             return html.replace('<!--head-->', (0, fs_1.readFileSync)((0, path_1.resolve)(target, head), 'utf8'));
         },
     },
-    /** The registry is built once per load, so a new call folder is invisible until it is invalidated. */
+    /** 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 stamp = (0, stamp_1.buildStampOf)();
-        const refresh = (file) => {
-            if (!(0, vite_paths_1.isCallFile)({ callsRoot, file }))
-                return;
-            const module = vite.moduleGraph.getModuleById(`\0${VIRTUAL}`);
+        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 shots = (0, shot_1.createPartShooter)({
+            target,
+            base,
+            system,
+            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)
+                    return null;
+                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));
+        const reload = (id) => {
+            const module = vite.moduleGraph.getModuleById(`\0${id}`);
             if (module)
                 vite.moduleGraph.invalidateModule(module);
-            vite.ws.send({ type: 'full-reload' });
+        };
+        const unresolveParts = () => {
+            for (const module of vite.moduleGraph.idToModuleMap.values()) {
+                if ((0, system_modules_1.productOfModuleId)(module.id))
+                    vite.moduleGraph.invalidateModule(module);
+            }
+        };
+        const forgetCalls = (file) => {
+            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) => {
+            if (!change.all && change.parts.length === 0 && !change.errored)
+                return;
+            revision += 1;
+            if (change.all)
+                shots.clear();
+            else
+                shots.forget(change);
+            events.signal('parts', Object.assign({ revision }, change));
+        };
+        const hot = (_b = (_a = vite.environments) === null || _a === void 0 ? void 0 : _a['client']) === null || _b === void 0 ? void 0 : _b.hot;
+        if (hot) {
+            const send = hot.send.bind(hot);
+            hot.send = (payload, data) => {
+                // HMR is disabled: Studio must replace frames when Vite invalidates optimized dependency URLs.
+                if (typeof payload === 'object' && payload.type === 'full-reload') {
+                    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 reloadConfig = () => {
+            let next;
+            try {
+                next = (0, paths_1.readConfig)(target);
+            }
+            catch (error) {
+                console.error(`design-explore: ${configPath} is invalid, keeping the last good config (${error instanceof Error ? error.message : String(error)})`);
+                return;
+            }
+            if (!next)
+                return;
+            for (const key of Object.keys(config))
+                delete config[key];
+            Object.assign(config, next);
+            system.forget();
+            reload(`${VIRTUAL}/env`);
+            reload(`${VIRTUAL}/system`);
+            redraw(changed_parts_1.ALL_PARTS);
+        };
+        const reloadFlows = () => {
+            thumbs.clear();
+            shots.clear();
+            events.signal('flows');
+        };
+        const refresh = (file) => {
+            if ((0, path_1.resolve)(file) === configPath)
+                return reloadConfig();
+            if (isCommentFile(file))
+                return events.signal('comments');
+            if (isNoteFile(file))
+                return events.signal('notes');
+            if (isFlowFile(file))
+                return reloadFlows();
+            forgetCalls(file);
+            if ((0, vite_paths_1.isCallFile)({ callsRoot, file }))
+                return reload(VIRTUAL);
+            if (isDecisionFile(file))
+                return;
+            if (isInside(callsRoot, file) || ![designRoot, ...baseDirs].some((dir) => isInside(dir, file)))
+                return;
+            system.forget();
+            unresolveParts();
+            reload(`${VIRTUAL}/system`);
+            redraw((0, changed_parts_1.addedPartsOf)({ designRoot, baseDirs, system, file: (0, path_1.resolve)(file) }));
+        };
+        const change = (file) => {
+            var _a;
+            if ((0, path_1.resolve)(file) === configPath)
+                return reloadConfig();
+            if (isCommentFile(file))
+                return events.signal('comments');
+            if (isNoteFile(file))
+                return events.signal('notes');
+            if (isFlowFile(file))
+                return reloadFlows();
+            forgetCalls(file);
+            const dependents = (0, shot_1.dependentIdsOf)((_a = vite.moduleGraph.getModulesByFile(file)) !== null && _a !== void 0 ? _a : []);
+            redraw((0, changed_parts_1.changedPartsOf)({ target, config, system, file, dependents }));
+        };
+        const answer = (handle) => (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, {
+                status: 500,
+                body: { error: error instanceof Error ? error.message : String(error) },
+            }));
         };
         vite.middlewares.use(stamp_1.STAMP_PATH, (_request, response) => {
             response.setHeader('content-type', 'application/json');
             response.end(JSON.stringify(stamp));
         });
         vite.middlewares.use(render_1.RENDER_PATH, (0, render_1.renderMiddleware)((0, render_1.createRenderer)({ target, config })));
-        vite.watcher.add(callsRoot);
+        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(list_system_1.SYSTEM_PATH, answer((url) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            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 })),
+            });
+            return { status: 200, body: products };
+        })));
+        vite.middlewares.use(product_command_1.PRODUCT_PATH, answer((_url, request) => __awaiter(void 0, void 0, void 0, function* () {
+            const created = yield (0, product_command_1.newProductAnswer)({ target, request });
+            if (created.status === 201)
+                reloadConfig();
+            return created;
+        })));
+        vite.middlewares.use(calls_1.CALLS_PATH, answer(() => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                status: 200,
+                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;
+            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 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* () {
+            return handle({
+                target,
+                url,
+                request,
+                load: ({ file, product, sketch }) => vite.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product, sketch })),
+                pictureOf: shots.pictureOf,
+                boxOf: shots.changedBoxOf,
+            });
+        })));
+        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);
+        studio(studio_api_1.SKETCH_DIFF_PATH, studio_api_1.sketchDiffAnswer);
+        studio(studio_api_1.SKETCH_DECISION_PATH, studio_api_1.sketchDecisionAnswer);
+        studio(studio_api_1.SKETCH_MERGE_PATH, studio_api_1.sketchMergeAnswer);
+        studio(studio_api_1.SKETCH_DISCARD_PATH, studio_api_1.sketchDiscardAnswer);
+        studio(studio_api_1.COMMENTS_PATH, studio_api_1.commentsAnswer);
+        studio(studio_api_1.COMMENT_PATH, studio_api_1.commentAnswer);
+        studio(studio_api_1.COMMENT_DONE_PATH, studio_api_1.commentDoneAnswer);
+        studio(studio_api_1.COMMENT_WITHDRAW_PATH, studio_api_1.commentWithdrawAnswer);
+        studio(studio_api_1.COMMENT_REPLY_PATH, studio_api_1.commentReplyAnswer);
+        studio(studio_api_1.FLOWS_PATH, studio_api_1.flowsAnswer);
+        studio(studio_api_1.NOTES_PATH, studio_api_1.notesAnswer);
+        studio(studio_api_1.NOTE_PATH, studio_api_1.noteAnswer);
+        studio(studio_api_1.NOTE_CHANGE_PATH, studio_api_1.noteChangeAnswer);
+        studio(studio_api_1.NOTE_DELETE_PATH, studio_api_1.noteDeleteAnswer);
+        studio(studio_api_1.FLOW_NOTE_PATH, studio_api_1.flowNoteAnswer);
+        studio(studio_api_1.FLOW_NOTE_CHANGE_PATH, studio_api_1.flowNoteChangeAnswer);
+        studio(studio_api_1.FLOW_NOTE_DELETE_PATH, studio_api_1.flowNoteDeleteAnswer);
+        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()]);
+        });
+        vite.watcher.add([designRoot, ...baseDirs]);
         vite.watcher.on('add', refresh);
         vite.watcher.on('unlink', refresh);
+        vite.watcher.on('change', change);
     },
 });
+const freePortOf = () => new Promise((resolvePort, reject) => {
+    const probe = (0, net_1.createServer)();
+    probe.once('error', reject);
+    probe.listen(0, () => {
+        const { port } = probe.address();
+        probe.close(() => resolvePort(port));
+    });
+});
 /**
- * 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.
+ * 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.
  */
-const serveDesign = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    const { target } = 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 createDesignServer = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { target, config, listen, sketchesRoot } = options;
+    const host = options.host || process.env['DE_HOST'] || undefined;
+    const own = listen && options.port !== undefined;
+    const port = own ? yield freePortOf() : options.listenOn;
     (0, calls_tsconfig_1.writeCallsTsconfig)(target);
     // Vite reads a tsconfig out of the working directory to transpile a call, and the calls sit
     // outside its root. From a directory that holds none, every call compiles to an empty module.
@@ -150,31 +479,86 @@ const serveDesign = (options) => __awaiter(void 0, void 0, void 0, function* ()
     const { createServer } = yield import('vite');
     const { default: tailwind } = yield import('@tailwindcss/postcss');
     const here = (0, paths_1.assetRoot)();
-    const server = yield createServer({
-        configFile: false,
-        root: (0, path_1.resolve)(here, 'web'),
+    const system = (0, system_modules_1.createSystemModules)({ target, config, sketchesRoot });
+    if (listen) {
+        for (const name of system.products()) {
+            const product = system.productOf(name);
+            if (product)
+                (0, system_tsconfig_1.writeEditorTsconfig)({ target, product });
+        }
+    }
+    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 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.
-        css: { postcss: { plugins: [tailwind()] } },
-        cacheDir: (0, path_1.resolve)((0, paths_1.workRootOf)(target), 'vite'),
-        resolve: {
-            alias: [{ find: /^@design-explore$/, replacement: (0, path_1.resolve)(here, 'define-call.ts') }, ...workspaceAliases(target)],
-        },
+        css: { postcss: { plugins: [tailwind(), (0, force_interactions_1.forceInteractionsPlugin)()] } }, cacheDir: (0, paths_1.viteCacheOf)(target, own ? 'vite-check' : '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') },
+                { find: new RegExp(`^${kit_1.KIT_SPECIFIER}$`), replacement: (0, path_1.resolve)(here, 'wireframe-kit.ts') },
+                ...workspaceAliases(target),
+            ],
+        }, 
         // 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)],
-        server: {
-            port: (0, paths_1.portOf)(config),
-            strictPort: true,
+        optimizeDeps: { exclude: ['@ethlete/components', '@ethlete/core'] }, plugins: [designExplore({ target, config, system })] }, (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] },
-        },
+            fs: { allow: [target, here, ...baseDirs] } }) }));
+    const listening = server.listen.bind(server);
+    server.listen = (...args) => listening(...args).catch((error) => {
+        const code = error === null || error === void 0 ? void 0 : error.code;
+        if (code !== 'EPERM' && code !== 'EACCES')
+            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;
+});
+exports.createDesignServer = createDesignServer;
+const exitWhenStdinCloses = (server) => {
+    let closing = false;
+    const shutDown = () => {
+        if (closing)
+            return;
+        closing = true;
+        void server.close().finally(() => process.exit(0));
+    };
+    process.stdin.once('end', shutDown);
+    process.stdin.once('close', shutDown);
+    process.stdin.resume();
+};
+/**
+ * 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.
+ */
+const serveDesign = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { target, host } = options;
+    const config = (0, paths_1.readConfig)(target);
+    if (!config) {
+        console.error(`design-explore: no config at ${(0, paths_1.configPathOf)(target)}`);
+        return 1;
+    }
+    (0, paths_1.snapshotPackage)(target);
+    const ownedByStudio = process.env['ETHLETE_DESIGN_EXIT_ON_STDIN_CLOSE'] === '1';
+    const server = yield (0, exports.createDesignServer)({
+        target,
+        config,
+        listen: true,
+        host,
+        listenOn: ownedByStudio ? undefined : yield freePortOf(),
     });
     yield server.listen();
     console.log(`design-explore: drawing ${target}`);
+    if (!ownedByStudio) {
+        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 (ownedByStudio) {
+        exitWhenStdinCloses(server);
+    }
     return 0;
 });
 exports.serveDesign = serveDesign;