@ethlete/cli 3.0.0-next.21 → 3.0.0-next.23

package/src/lib/design/serve.js

@@ -9,14 +9,29 @@ 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';
@@ -24,9 +39,7 @@ const VIRTUAL = 'virtual:design-explore';
 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`;
@@ -53,103 +66,419 @@ 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);
 /**
- * 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()`.
+ * 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 designExplore = (target, config) => ({
-    name: 'design-explore',
-    enforce: 'pre',
-    resolveId: (id) => {
-        var _a, _b;
-        if (id === VIRTUAL || id === `${VIRTUAL}/env`)
-            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 });
-    },
-    load: (id) => {
-        if (id === `\0${VIRTUAL}`)
-            return registry(target);
-        if (id === `\0${VIRTUAL}/env`)
-            return env(target, config);
-        return null;
-    },
-    transformIndexHtml: {
-        order: 'pre',
-        handler: (html, ctx) => {
-            var _a, _b, _c, _d;
-            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;
-            if (!head)
-                return html;
-            return html.replace('<!--head-->', (0, fs_1.readFileSync)((0, path_1.resolve)(target, head), 'utf8'));
+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, 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 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 }) => {
+    const renderer = (0, render_1.createRenderer)({ target, config });
+    return {
+        name: 'design-explore',
+        enforce: 'pre',
+        resolveId: (id, importer) => {
+            var _a, _b, _c;
+            if (id === VIRTUAL || id === `${VIRTUAL}/env` || id === `${VIRTUAL}/system`)
+                return `\0${id}`;
+            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, _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 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. */
-    configureServer: (vite) => {
-        var _a;
-        const callsRoot = (0, paths_1.callsRootOf)(target);
-        const stamp = (0, stamp_1.buildStampOf)();
-        const thumbs = (0, thumb_1.createThumbnailer)({ target, base: `http://localhost:${(0, paths_1.portOf)(config)}` });
-        const refresh = (file) => {
-            thumbs.forget((0, path_1.relative)(callsRoot, file));
-            if (!(0, vite_paths_1.isCallFile)({ callsRoot, file }))
-                return;
-            const module = vite.moduleGraph.getModuleById(`\0${VIRTUAL}`);
-            if (module)
-                vite.moduleGraph.invalidateModule(module);
-            vite.ws.send({ type: 'full-reload' });
-        };
-        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.middlewares.use(thumb_1.THUMB_PATH, thumbs.middleware);
-        (_a = vite.httpServer) === null || _a === void 0 ? void 0 : _a.on('close', () => void thumbs.close());
-        vite.watcher.add(callsRoot);
-        vite.watcher.on('add', refresh);
-        vite.watcher.on('unlink', refresh);
-        vite.watcher.on('change', (file) => thumbs.forget((0, path_1.relative)(callsRoot, file)));
-    },
+        /** 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 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);
+            };
+            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)(renderer));
+            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_CROP_PATH, studio_api_1.sketchCropAnswer);
+            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);
+        },
+        closeBundle: () => renderer.close(),
+    };
+};
+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.
@@ -157,31 +486,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;