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

package/src/lib/design/serve.js

@@ -23,6 +23,8 @@ 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 generated_stylesheets_1 = require("./generated-stylesheets");
+const sketch_stylesheets_1 = require("./sketch-stylesheets");
 const shot_1 = require("./shot");
 const changed_parts_1 = require("./changed-parts");
 const stamp_1 = require("./stamp");
@@ -32,6 +34,7 @@ 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 unchanged_states_1 = require("./system/sketch/unchanged-states");
 const thumb_1 = require("./thumb");
 const paths_1 = require("./paths");
 const VIRTUAL = 'virtual:design-explore';
@@ -68,16 +71,31 @@ 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]) => {
+const stylesLoaderOf = (options) => {
     var _a;
-    return `  ${JSON.stringify(name)}: () => Promise.resolve()${((_a = entry.styles) !== null && _a !== void 0 ? _a : [])
+    return `() => Promise.resolve()${((_a = options.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) => options.product ? (0, system_modules_1.productModuleIdOf)({ file, product: options.product, sketch: options.sketch }) : file)
         .map((file) => `.then(() => import(${JSON.stringify((0, vite_paths_1.fsUrl)(file))}))`)
         .join('')},`;
-})
+};
+const settingsLoaders = (options) => `{\n${Object.entries(options.settings)
+    .map(([name, entry]) => `  ${JSON.stringify(name)}: ${stylesLoaderOf({ target: options.target, entry, product: options.products ? name : undefined })}`)
     .join('\n')}\n}`;
+/** The stylesheets of each product as one sketch variant draws them, for each variant that draws a part stylesheet from a file of its own. */
+const sketchStylesLoaders = (options) => {
+    var _a;
+    const { target, config, system } = options;
+    return `{\n${Object.entries((_a = config.products) !== null && _a !== void 0 ? _a : {})
+        .map(([product, entry]) => `  ${JSON.stringify(product)}: {\n${system
+        .sketchesOf(product)
+        .map(({ target: part, variants }) => `    ${JSON.stringify(part)}: {\n${variants
+        .filter((variant) => system.replacedStylesheetsOf({ product, sketch: { target: part, variant } }).size > 0)
+        .map((variant) => `      ${JSON.stringify(variant)}: ${stylesLoaderOf({ target, entry, product, sketch: { target: part, variant } })}`)
+        .join('\n')}\n    },`)
+        .join('\n')}\n  },`)
+        .join('\n')}\n}`;
+};
 const themesOfSettings = (settings) => JSON.stringify(Object.fromEntries(Object.entries(settings).map(([name, entry]) => {
     var _a, _b, _c, _d;
     return [
@@ -90,8 +108,9 @@ const themesOfSettings = (settings) => JSON.stringify(Object.fromEntries(Object.
  * 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) => {
+const env = (options) => {
     var _a, _b;
+    const { target, config, system } = options;
     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` +
@@ -99,7 +118,8 @@ const env = (target, config) => {
         `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`);
+        `const sketchProductEnvs = ${sketchStylesLoaders({ target, config, system })};\n` +
+        `export const loadProductEnv = ({ product, sketch, variant }) => (sketchProductEnvs[product]?.[sketch]?.[variant] ?? productEnvs[product] ?? (() => Promise.resolve()))();\n`);
 };
 /** Each product's parts, keyed `<layer>/<name>`, each loaded as the product resolves it. */
 const partsRegistry = (options) => options.parts
@@ -164,9 +184,14 @@ const isCommentFile = (file) => file.endsWith('.json') && (0, path_1.basename)((
 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);
+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;
+};
 /**
- * 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.
+ * 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`
+ * event with no parts still tells Studio the system changed.
  */
 const createDesignEvents = () => {
     const listeners = new Set();
@@ -203,256 +228,279 @@ 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, 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'));
+const designExplore = ({ target, config, system, stylesheetImports, }) => {
+    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 }));
         },
-    },
-    /** 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);
+        load: (id) => {
+            if (id === `\0${VIRTUAL}`)
+                return registry(target);
+            if (id === `\0${VIRTUAL}/env`)
+                return env({ target, config, system });
+            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 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 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.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)({
+            const thumbs = (0, thumb_1.createThumbnailer)({ target, base });
+            const shots = (0, shot_1.createPartShooter)({
                 target,
+                base,
                 system,
-                products: asked ? [asked] : system.products(),
-                load: ({ file, product }) => vite.ssrLoadModule((0, system_modules_1.productModuleIdOf)({ file, product })),
+                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) : [];
+                }),
             });
-            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) }),
+            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, listed = false) => {
+                if (!change.all && change.parts.length === 0 && !change.errored) {
+                    if (listed)
+                        events.signal('parts', Object.assign({ revision }, change));
+                    return;
+                }
+                revision += 1;
+                (0, unchanged_states_1.forgetUnchangedStates)();
+                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 signalLists = (file) => {
+                if (isInside(callsRoot, file))
+                    events.signal('calls');
+                else if (isSketchFile(designRoot, file))
+                    events.signal('sketches');
+            };
+            const isSystemFile = (file) => !isInside(callsRoot, file) &&
+                !isSketchFile(designRoot, file) &&
+                [designRoot, ...baseDirs].some((dir) => isInside(dir, file));
+            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);
+                signalLists(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}/env`);
+                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);
+                signalLists(file);
+                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) => {
+                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(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,
+            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.changedBoxesOf,
+                });
+            })));
+            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()]);
             });
-        })));
-        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);
-    },
-});
+            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);
@@ -480,6 +528,7 @@ const createDesignServer = (options) => __awaiter(void 0, void 0, void 0, functi
     const { default: tailwind } = yield import('@tailwindcss/postcss');
     const here = (0, paths_1.assetRoot)();
     const system = (0, system_modules_1.createSystemModules)({ target, config, sketchesRoot });
+    const generatedStylesheetsOf = (0, generated_stylesheets_1.createGeneratedStylesheets)({ target, config, system });
     if (listen) {
         for (const name of system.products()) {
             const product = system.productOf(name);
@@ -488,10 +537,24 @@ 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 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(), (0, force_interactions_1.forceInteractionsPlugin)()] } }, cacheDir: (0, paths_1.viteCacheOf)(target, own ? 'vite-check' : 'vite'), resolve: {
+        css: {
+            postcss: {
+                plugins: [
+                    (0, sketch_stylesheets_1.sketchStylesheetsPlugin)((id) => {
+                        var _a;
+                        const drawn = { product: (_a = (0, system_modules_1.productOfModuleId)(id)) !== null && _a !== void 0 ? _a : '', sketch: (0, system_modules_1.sketchOfModuleId)(id) };
+                        return generatedStylesheetsOf(drawn).then((generated) => new Map([...system.replacedStylesheetsOf(drawn), ...generated]));
+                    }),
+                    tailwind(),
+                    (0, force_interactions_1.forceInteractionsPlugin)(),
+                    (0, shot_1.stylesheetImportsPlugin)(stylesheetImports),
+                ],
+            },
+        }, 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') },
@@ -501,7 +564,7 @@ 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 })] }, (listen ? {} : { appType: 'custom' })), (listen && !own ? {} : { logLevel: 'error' })), { server: Object.assign(Object.assign({ 
+        optimizeDeps: { exclude: ['@ethlete/components', '@ethlete/core'] }, plugins: [designExplore({ target, config, system, stylesheetImports })] }, (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 })), {