@weasel-js/forge 1.11.0 → 1.12.0

package/dist/vite/index.js

@@ -1,11 +1,13 @@
-import { DEFAULT_TITLE } from '../chunk-5DXUNLV2.js';
+import { CAPTURE_PAGES, DEFAULT_TITLE, CAPTURE_PATH, parsePayload, messageOf } from '../chunk-ORMMZ5PV.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { PROP_ARG_TYPES_EXPORT, storyNameFromExport, storyId } from '../chunk-ZAWXMUGZ.js';
+import { PROP_ARG_TYPES_EXPORT, storyNameFromExport, storyId } from '../chunk-5WS67HMU.js';
 import { readFileSync, mkdtempSync, existsSync, mkdirSync, writeFileSync, globSync, statSync, watch, rmSync } from 'fs';
 import { resolve, sep, relative, join, dirname, basename, matchesGlob, posix } from 'path';
 import { parse } from '@babel/parser';
 import { execFile } from 'child_process';
 import { fileURLToPath } from 'url';
+import { createHash } from 'crypto';
+import { stableStringify } from '@weasel-js/core/json';
 import { tmpdir } from 'os';
 
 // src/vite/html.ts
@@ -81,7 +83,7 @@ function createDepGraph({ root, read }) {
     reset() {
       resolutions.clear();
     },
-    async build(entries, resolve5) {
+    async build(entries, resolve6) {
       const resolveFrom = (spec, importer) => {
         let byImporter = resolutions.get(importer);
         if (!byImporter) {
@@ -90,7 +92,7 @@ function createDepGraph({ root, read }) {
         }
         let pending = byImporter.get(spec);
         if (!pending) {
-          pending = resolve5(spec, importer).then(
+          pending = resolve6(spec, importer).then(
             (id) => {
               const file = id?.split("?")[0];
               return file && !file.startsWith("\0") && SCRIPT.test(file) && !file.split(/[\\/]/).includes("node_modules") ? file : null;
@@ -344,7 +346,13 @@ function fileDates(log, paths) {
     const name = files.at(-1);
     const path = name === void 0 ? void 0 : names.get(name);
     if (!status || name === void 0 || path === void 0) continue;
-    out.set(path, { created: date, modified: out.get(path)?.modified ?? date, commit });
+    const newer = out.get(path);
+    out.set(path, {
+      created: date,
+      modified: newer?.modified ?? date,
+      createdBy: commit,
+      modifiedBy: newer?.modifiedBy ?? commit
+    });
     const renamed = status.startsWith("R") ? files[0] : void 0;
     if (status === "A" || renamed !== void 0) names.delete(name);
     if (renamed !== void 0) names.set(renamed, path);
@@ -384,11 +392,16 @@ function createHistoryReader(root, git = runGit) {
     const history = {};
     for (const [name, paths] of byPackage) {
       const refs = ["v[0-9]*", "[0-9]*", ...name === null ? [] : [`${name}@[0-9]*`]].map((ref) => `--refs=${ref}`);
-      const commits = paths.map((path) => dates.get(path).commit);
+      const commits = paths.flatMap((path) => [dates.get(path).createdBy, dates.get(path).modifiedBy]);
       const named = (await git(["name-rev", "--tags", "--name-only", ...refs, ...commits], top)).split("\n");
       paths.forEach((path, i) => {
         const { created, modified } = dates.get(path);
-        history[inRepo.get(path)] = { created, modified, introduced: versionOf(named[i] ?? "") };
+        history[inRepo.get(path)] = {
+          created,
+          modified,
+          introduced: versionOf(named[2 * i] ?? ""),
+          modifiedIn: versionOf(named[2 * i + 1] ?? "")
+        };
       });
     }
     return history;
@@ -842,13 +855,13 @@ function createTracer(read) {
     }
     return modules.get(file) ?? null;
   };
-  return (resolve5) => {
+  return (resolve6) => {
     const trace = {
       reads: /* @__PURE__ */ new Set(),
       unresolved: false,
       info,
       async target(spec, importer) {
-        const id = (await resolve5(spec, importer).catch(() => null))?.split("?")[0];
+        const id = (await resolve6(spec, importer).catch(() => null))?.split("?")[0];
         if (!id) trace.unresolved = true;
         return id && !id.startsWith("\0") ? id : null;
       },
@@ -890,8 +903,8 @@ function sameResolution(a, b) {
 }
 function createWrapperResolver(read) {
   const tracer = createTracer(read);
-  return async (file, callees, resolve5) => {
-    const trace = tracer(resolve5);
+  return async (file, callees, resolve6) => {
+    const trace = tracer(resolve6);
     const wrappers = /* @__PURE__ */ new Set();
     const direct = [...trace.info(file)?.imports.values() ?? []].some((imp) => imp.spec === "@weasel-js/forge");
     if (callees.length === 0 && !direct) return { wrappers, foreign: NO_FOREIGN, reads: trace.reads, unresolved: false };
@@ -918,8 +931,8 @@ function indexStory(code, file, source, resolved) {
   const foreign = resolved ? foreignFrom(resolved.foreign) : void 0;
   return indexFile(code, file, autoTitle(file, source.root, source.stories), resolved?.wrappers, foreign);
 }
-async function indexStoryResolved(code, file, source, resolve5, decide = createWrapperResolver((path) => readFileSync(path, "utf8"))) {
-  const resolution = await decide(file, foreignCallees(code, file), resolve5);
+async function indexStoryResolved(code, file, source, resolve6, decide = createWrapperResolver((path) => readFileSync(path, "utf8"))) {
+  const resolution = await decide(file, foreignCallees(code, file), resolve6);
   return { entries: indexStory(code, file, source, resolution), resolution };
 }
 function ownEntries(realms) {
@@ -934,56 +947,6 @@ function ownEntries(realms) {
   }
   return [];
 }
-
-// src/vite/entries.ts
-function shellEntry(base, stories) {
-  return `import { mountWorkshop } from '@weasel-js/forge/shell';
-import '@weasel-js/labkit/styles.css';
-import '@weasel-js/forge/shell.css';
-import index from 'virtual:forge/index.js';
-import importers from 'virtual:forge/importers.js';
-import config from 'virtual:forge/shell-config.js';
-import setup from 'virtual:forge/frame-config.js';
-
-const workshop = mountWorkshop({
-  index,
-  importers,
-  setup,
-  config,
-  frameUrl: ${JSON.stringify(`${base}frame.html`)},
-  stories: ${JSON.stringify(stories)},
-});
-import.meta.hot?.on('forge:index', (next) => workshop.setIndex(next));
-// Read from source on first request, so the graph costs nothing until the page is up.
-import('virtual:forge/deps.js').then((m) => workshop.setDependencies(m.default));
-import.meta.hot?.on('forge:deps', (next) => workshop.setDependencies(next));
-// An edit to a story file, or to a module one imports, reaches here as an update of the importers module, whose
-// fresh import() URLs carry the new timestamps; the files it reaches arrive just before, so the reload waits for
-// the importers that can fetch them.
-const stale = new Set();
-import.meta.hot?.on('forge:story', ({ file }) => stale.add(file));
-import.meta.hot?.accept('virtual:forge/importers.js', (next) => {
-  if (!next) return;
-  workshop.setImporters(next.default);
-  for (const file of stale) workshop.reloadStory(file);
-  stale.clear();
-});
-`;
-}
-function frameEntry(styles) {
-  return `import { mountFrame } from '@weasel-js/forge/frame';
-import '@weasel-js/forge/frame.css';
-${styles.map((path) => `import ${JSON.stringify(path)};
-`).join("")}import index from 'virtual:forge/index.js';
-import importers from 'virtual:forge/importers.js';
-import setup from 'virtual:forge/frame-config.js';
-
-mountFrame({ index, importers, setup });
-// The importers module is shared with the workshop page, which accepts a story edit in place; a frame document
-// showing the old module reloads instead, and without this the edit would dead-end here and reload every page.
-import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
-`;
-}
 var PLATFORM = /[\\/]node_modules[\\/](@types[\\/]react(-dom)?|typescript)[\\/]/;
 async function createPropReader(root, stories, { skip } = {}) {
   const skipped = (file) => PLATFORM.test(file) || skip?.(file) === true;
@@ -1148,10 +1111,339 @@ export const ${PROP_ARG_TYPES_EXPORT} = ${JSON.stringify(table.argTypes)};
     }
   };
 }
+var IDLE_CLOSE_MS = 12e4;
+var SHOT_DEADLINE_MS = 2e4;
+var QUEUE_CAP = 8;
+var QUEUE_FULL = "capture queue is full";
+var INSTALL_PLAYWRIGHT = "install playwright";
+var INSTALL_CHROMIUM = "install Chromium for Playwright: npx playwright install chromium";
+var loadPlaywright = () => import('playwright');
+async function captureAvailability(load = loadPlaywright) {
+  let playwright;
+  try {
+    playwright = await load();
+  } catch {
+    return { unavailable: INSTALL_PLAYWRIGHT };
+  }
+  let executable;
+  try {
+    executable = playwright.chromium.executablePath();
+  } catch (err) {
+    return { unavailable: messageOf(err) };
+  }
+  return existsSync(executable) ? { available: true } : { unavailable: INSTALL_CHROMIUM };
+}
+var WIRE_HEADERS = /* @__PURE__ */ new Set(["content-encoding", "content-length", "transfer-encoding"]);
+async function passThrough(route, fetchImpl) {
+  const request = route.request();
+  const method = request.method();
+  if (method !== "GET" && method !== "HEAD") return route.abort();
+  try {
+    const response = await fetchImpl(request.url(), { method, headers: request.headers(), redirect: "manual" });
+    await route.fulfill({
+      status: response.status,
+      headers: Object.fromEntries([...response.headers].filter(([name]) => !WIRE_HEADERS.has(name))),
+      body: Buffer.from(await response.arrayBuffer())
+    });
+  } catch {
+    await route.abort();
+  }
+}
+async function guard(page, url, allow, fetchImpl) {
+  const own = new URL(url);
+  const secure = own.protocol === "https:";
+  const reach = new Set(allow);
+  await page.route("**/*", (route) => {
+    const origin = new URL(route.request().url()).origin;
+    if (origin === own.origin) return route.continue();
+    if (!reach.has(origin)) return route.abort();
+    return secure ? passThrough(route, fetchImpl) : route.continue();
+  });
+  const ownSocket = `${secure ? "wss:" : "ws:"}//${own.host}`;
+  await page.routeWebSocket(
+    (u) => `${u.protocol}//${u.host}` !== ownSocket,
+    (ws) => ws.close()
+  );
+}
+async function launchCaptureBrowser(load = loadPlaywright, fetchImpl = fetch) {
+  let playwright;
+  try {
+    playwright = await load();
+  } catch {
+    return { unavailable: INSTALL_PLAYWRIGHT };
+  }
+  let chromium;
+  try {
+    chromium = Promise.resolve(await playwright.chromium.launch({ headless: true }));
+  } catch (err) {
+    return { unavailable: messageOf(err) };
+  }
+  const contexts = /* @__PURE__ */ new Map();
+  let idle;
+  let outstanding = 0;
+  let tail = Promise.resolve();
+  const shut = async () => {
+    clearTimeout(idle);
+    const closing = chromium;
+    chromium = null;
+    contexts.clear();
+    await closing?.then((b) => b.close(), () => {
+    });
+  };
+  const arm = () => {
+    clearTimeout(idle);
+    idle = setTimeout(() => void shut(), IDLE_CLOSE_MS);
+    idle.unref?.();
+  };
+  const browser = () => {
+    if (!chromium) {
+      const launching = playwright.chromium.launch({ headless: true });
+      chromium = launching;
+      launching.catch(() => {
+        if (chromium === launching) chromium = null;
+      });
+    }
+    return chromium;
+  };
+  const contextFor = (dpr, secure) => {
+    const key = `${dpr}:${secure}`;
+    let context = contexts.get(key);
+    if (!context) {
+      const making = browser().then(
+        (b) => b.newContext({ deviceScaleFactor: dpr, ignoreHTTPSErrors: secure, serviceWorkers: "block" })
+      );
+      context = making;
+      contexts.set(key, making);
+      making.catch(() => {
+        if (contexts.get(key) === making) contexts.delete(key);
+      });
+    }
+    return context;
+  };
+  const render = async (page, payload, url, allow) => {
+    await guard(page, url, allow, fetchImpl);
+    await page.setViewportSize({ width: Math.ceil(payload.box.width), height: Math.ceil(payload.box.height) });
+    await page.emulateMedia({ colorScheme: payload.colorScheme });
+    await page.goto(url);
+    await page.waitForFunction(() => window.__forgeCapture !== void 0);
+    await page.evaluate((p) => window.__forgeCapture.render(p), payload);
+    return page.locator("[data-fg-capture]").screenshot({ type: "png" });
+  };
+  const shoot = async (url, payload, allow) => {
+    let page = null;
+    let late = false;
+    let timer;
+    const deadline = new Promise((_, reject) => {
+      timer = setTimeout(() => reject(new Error(`capture took longer than ${SHOT_DEADLINE_MS / 1e3} s`)), SHOT_DEADLINE_MS);
+    });
+    const work = (async () => {
+      const opened = await (await contextFor(payload.dpr, url.startsWith("https:"))).newPage();
+      page = opened;
+      if (late) throw new Error("capture timed out");
+      return render(opened, payload, url, allow);
+    })();
+    try {
+      return await Promise.race([work, deadline]);
+    } finally {
+      late = true;
+      clearTimeout(timer);
+      await page?.close().catch(() => {
+      });
+      void work.catch(() => page?.close().catch(() => {
+      }));
+    }
+  };
+  arm();
+  return {
+    capture(url, payload, allow = []) {
+      if (outstanding >= QUEUE_CAP) return Promise.reject(new Error(QUEUE_FULL));
+      outstanding += 1;
+      clearTimeout(idle);
+      const run = tail.then(() => shoot(url, payload, allow));
+      tail = run.catch(() => {
+      });
+      return run.finally(() => {
+        outstanding -= 1;
+        if (outstanding === 0) arm();
+      });
+    },
+    close: shut
+  };
+}
+
+// src/vite/capture/cache.ts
+function createCaptureCache(limits = { entries: 64, bytes: 64 * 1024 * 1024 }) {
+  const held = /* @__PURE__ */ new Map();
+  let bytes = 0;
+  const drop = (key) => {
+    const png = held.get(key);
+    if (!png) return;
+    held.delete(key);
+    bytes -= png.length;
+  };
+  return {
+    get(key) {
+      const png = held.get(key);
+      if (!png) return void 0;
+      held.delete(key);
+      held.set(key, png);
+      return png;
+    },
+    set(key, png) {
+      drop(key);
+      if (png.length > limits.bytes) return;
+      held.set(key, png);
+      bytes += png.length;
+      for (const oldest of held.keys()) {
+        if (held.size <= limits.entries && bytes <= limits.bytes) break;
+        drop(oldest);
+      }
+    },
+    clear() {
+      held.clear();
+      bytes = 0;
+    },
+    get size() {
+      return held.size;
+    },
+    get bytes() {
+      return bytes;
+    }
+  };
+}
+
+// src/vite/capture/endpoint.ts
+var MAX_BODY = 16 * 1024 * 1024;
+var keyOf2 = (payload) => createHash("sha1").update(stableStringify(payload)).digest("hex");
+var urlHost = (address) => {
+  const v4 = address.replace(/^::ffff:(?=\d+\.\d+\.\d+\.\d+$)/, "");
+  return v4.includes(":") ? `[${v4.replace("%", "%25")}]` : v4;
+};
+var socketOrigin = (req, protocol) => `${protocol}://${urlHost(req.socket.localAddress ?? "127.0.0.1")}:${req.socket.localPort}`;
+var LOOPBACK = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
+function ownOrigin(origin, req, protocol, server) {
+  let url;
+  try {
+    url = new URL(origin);
+  } catch {
+    return false;
+  }
+  if (url.origin === socketOrigin(req, protocol)) return true;
+  if (url.protocol === `${protocol}:` && LOOPBACK.has(url.hostname) && url.port === String(req.socket.localPort)) return true;
+  const printed = [...server.resolvedUrls?.local ?? [], ...server.resolvedUrls?.network ?? []];
+  return printed.some((u) => new URL(u).origin === url.origin);
+}
+var json = (res, status, body2) => {
+  res.statusCode = status;
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify(body2));
+};
+function readBody(req) {
+  return new Promise((resolve6, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on("data", (chunk) => {
+      size += chunk.length;
+      if (size <= MAX_BODY) return void chunks.push(chunk);
+      req.pause();
+      req.removeAllListeners("data");
+      resolve6(null);
+    });
+    req.on("end", () => resolve6(Buffer.concat(chunks).toString("utf8")));
+    req.on("error", reject);
+  });
+}
+function serveCapture(server, base, allowOrigins = () => []) {
+  const cache = createCaptureCache();
+  let launched = null;
+  let revision = 0;
+  const browser = () => {
+    if (!launched) {
+      const launching = launchCaptureBrowser();
+      launched = launching;
+      void launching.then((result) => {
+        if ("unavailable" in result && launched === launching) launched = null;
+      });
+    }
+    return launched;
+  };
+  const protocol = server.config.server.https ? "https" : "http";
+  const capture = async (req, res) => {
+    const origin = req.headers.origin;
+    if (origin !== void 0 && !ownOrigin(origin, req, protocol, server)) {
+      return json(res, 403, { error: "a capture is only taken for this server\u2019s own pages" });
+    }
+    const type = (req.headers["content-type"] ?? "").split(";")[0]?.trim().toLowerCase();
+    if (type !== "application/json") return json(res, 415, { error: "a capture payload is sent as application/json" });
+    const body2 = await readBody(req);
+    if (body2 === null) {
+      res.setHeader("Connection", "close");
+      json(res, 413, { error: "capture payload is too large" });
+      return void res.once("finish", () => req.destroy());
+    }
+    let parsed;
+    try {
+      parsed = JSON.parse(body2);
+    } catch {
+      return json(res, 400, { error: "capture payload is not JSON" });
+    }
+    const payload = parsePayload(parsed);
+    if ("error" in payload) return json(res, 400, payload);
+    const key = keyOf2(payload);
+    let png = cache.get(key);
+    if (!png) {
+      const result = await browser();
+      if ("unavailable" in result) return json(res, 503, { available: false, reason: result.unavailable });
+      const page = `${socketOrigin(req, protocol)}${base}${payload.isolate ? CAPTURE_PAGES.frame : CAPTURE_PAGES.shell}`;
+      const at = revision;
+      try {
+        png = await result.capture(page, payload, allowOrigins());
+      } catch (err) {
+        const message = messageOf(err);
+        if (message === QUEUE_FULL) return json(res, 503, { available: false, reason: QUEUE_FULL });
+        return json(res, 500, { error: message });
+      }
+      if (at === revision) cache.set(key, png);
+    }
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "image/png");
+    res.end(png);
+  };
+  const status = async (res) => {
+    const result = await captureAvailability();
+    json(res, 200, "unavailable" in result ? { available: false, reason: result.unavailable } : { available: true });
+  };
+  server.middlewares.use((req, res, next) => {
+    if (req.url?.split("?")[0] !== `${base}${CAPTURE_PATH}`) return next();
+    if (req.method === "GET") return void status(res).catch(next);
+    if (req.method === "POST") return void capture(req, res).catch(next);
+    next();
+  });
+  return {
+    revise() {
+      revision += 1;
+      cache.clear();
+    },
+    async close() {
+      revision += 1;
+      cache.clear();
+      const closing = launched;
+      launched = null;
+      const result = await closing;
+      if (result && !("unavailable" in result)) await result.close();
+    }
+  };
+}
 
 // src/vite/servePages.ts
-var PAGES2 = { "/": "shell-entry.js", "/index.html": "shell-entry.js", "/frame.html": "frame-entry.js" };
-function servePages(server, base, title) {
+var PAGES2 = {
+  "/": "shell-entry.js",
+  "/index.html": "shell-entry.js",
+  "/frame.html": "frame-entry.js",
+  [`/${CAPTURE_PAGES.shell}`]: "capture-entry.js",
+  [`/${CAPTURE_PAGES.frame}`]: "capture-frame-entry.js"
+};
+function servePages(server, base, shell) {
   server.middlewares.use((req, res, next) => {
     const url = req.url ?? "/";
     const path = url.split("?")[0] ?? "/";
@@ -1159,7 +1451,7 @@ function servePages(server, base, title) {
     const page = path === prefix ? "/" : path.startsWith(`${prefix}/`) ? path.slice(prefix.length) : null;
     const entry = req.method === "GET" && page !== null ? PAGES2[page] : void 0;
     if (!entry) return next();
-    server.transformIndexHtml(url, html(entry, "serve", title())).then(
+    server.transformIndexHtml(url, html(entry, "serve", shell().title)).then(
       (doc) => {
         res.statusCode = 200;
         res.setHeader("Content-Type", "text/html");
@@ -1168,15 +1460,14 @@ function servePages(server, base, title) {
       (err) => next(err)
     );
   });
+  return serveCapture(server, base, () => shell().allowOrigins);
 }
-
-// src/vite/shellTitle.ts
-function shellTitle(code, file) {
+function configOf(code, file) {
   let program;
   try {
     program = parseFile(code, file);
   } catch {
-    return void 0;
+    return null;
   }
   const bindings = /* @__PURE__ */ new Map();
   let config;
@@ -1191,7 +1482,46 @@ function shellTitle(code, file) {
     }
   }
   const wrapper = calleeOf(config, bindings);
-  return stringOf(prop(objectOf(config, bindings, new Set(wrapper ? [wrapper] : [])), "title"), bindings);
+  return { config: objectOf(config, bindings, new Set(wrapper ? [wrapper] : [])), bindings };
+}
+function shellTitle(code, file) {
+  const read = configOf(code, file);
+  return read ? stringOf(prop(read.config, "title"), read.bindings) : void 0;
+}
+function arrayOf(node, bindings, depth = 0) {
+  if (!node || depth > 16) return null;
+  if (node.type === "ArrayExpression") return node;
+  if (node.type === "Identifier") return arrayOf(bindings.get(node.name), bindings, depth + 1);
+  if ("expression" in node && (node.type.startsWith("TS") || node.type === "ParenthesizedExpression")) {
+    return arrayOf(node.expression, bindings, depth + 1);
+  }
+  return null;
+}
+var originOf = (url) => {
+  if (url === void 0) return [];
+  try {
+    const { origin } = new URL(url);
+    return origin === "null" ? [] : [origin];
+  } catch {
+    return [];
+  }
+};
+function shellAllowOrigins(code, file) {
+  const read = configOf(code, file);
+  if (!read) return [];
+  const capture = objectOf(prop(read.config, "capture"), read.bindings, /* @__PURE__ */ new Set());
+  const list = arrayOf(prop(capture, "allowOrigins"), read.bindings);
+  return (list?.elements ?? []).flatMap((el) => el && el.type !== "SpreadElement" ? originOf(stringOf(el, read.bindings)) : []);
+}
+function readShellFields(file) {
+  let code;
+  try {
+    if (file === void 0) throw new Error("no shell config");
+    code = readFileSync(file, "utf8");
+  } catch {
+    return { title: void 0, allowOrigins: [] };
+  }
+  return { title: shellTitle(code, file), allowOrigins: shellAllowOrigins(code, file) };
 }
 var SHIMS = [
   [/^@?storybook\/preview-api$/, "@weasel-js/forge/preview-api"],
@@ -1208,6 +1538,105 @@ function storybookShims() {
     }
   };
 }
+
+// src/vite/capture/entries.ts
+var body = (mount) => `import index from 'virtual:forge/index.js';
+import importers from 'virtual:forge/importers.js';
+import setup from 'virtual:forge/frame-config.js';
+
+${mount}
+// The endpoint drops its captures on any edit; a page loaded before one would render the old module.
+import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
+`;
+function captureEntry() {
+  return `import { mountCapture } from '@weasel-js/forge/frame';
+import '@weasel-js/labkit/styles.css';
+import '@weasel-js/forge/shell.css';
+import config from 'virtual:forge/shell-config.js';
+${body("mountCapture({ index, importers, setup, labTheme: config.labTheme });")}`;
+}
+function captureFrameEntry(styles) {
+  return `import { mountCapture } from '@weasel-js/forge/frame';
+import '@weasel-js/forge/frame.css';
+${styles.map((path) => `import ${JSON.stringify(path)};
+`).join("")}${body("mountCapture({ index, importers, setup });")}`;
+}
+
+// src/vite/entries.ts
+function shellEntry(base, stories) {
+  return `import { followEdits, mountWorkshop } from '@weasel-js/forge/shell';
+import '@weasel-js/labkit/styles.css';
+import '@weasel-js/forge/shell.css';
+import index from 'virtual:forge/index.js';
+import importers from 'virtual:forge/importers.js';
+import config from 'virtual:forge/shell-config.js';
+import setup from 'virtual:forge/frame-config.js';
+
+const workshop = mountWorkshop({
+  index,
+  importers,
+  setup,
+  config,
+  frameUrl: ${JSON.stringify(`${base}frame.html`)},
+  captureBase: ${JSON.stringify(base)},
+  stories: ${JSON.stringify(stories)},
+});
+// Read from source on first request, so the graph costs nothing until the page is up.
+import('virtual:forge/deps.js').then((m) => workshop.setDependencies(m.default));
+const edits = followEdits(import.meta.hot, workshop);
+import.meta.hot?.accept('virtual:forge/importers.js', (next) => edits.importers(next?.default));
+`;
+}
+function frameEntry(styles) {
+  return `import { mountFrame } from '@weasel-js/forge/frame';
+import '@weasel-js/forge/frame.css';
+${styles.map((path) => `import ${JSON.stringify(path)};
+`).join("")}import index from 'virtual:forge/index.js';
+import importers from 'virtual:forge/importers.js';
+import setup from 'virtual:forge/frame-config.js';
+
+mountFrame({ index, importers, setup });
+// The importers module is shared with the workshop page, which accepts a story edit in place; a frame document
+// showing the old module reloads instead, and without this the edit would dead-end here and reload every page.
+import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
+`;
+}
+
+// src/vite/virtualModules.ts
+var PREFIX = "virtual:forge/";
+var MODULES = /* @__PURE__ */ new Set([
+  "index.js",
+  "importers.js",
+  "deps.js",
+  "frame-config.js",
+  "shell-config.js",
+  "shell-entry.js",
+  "frame-entry.js",
+  "capture-entry.js",
+  "capture-frame-entry.js"
+]);
+function virtualModules(options, src) {
+  const configModule = (path) => path ? `export { default } from ${JSON.stringify(resolve(src.root(), path))};
+` : "export default {};\n";
+  const frameStyles = () => (options.frameStyles ?? []).map((path) => resolve(src.root(), path));
+  return {
+    "index.js": () => `export default ${JSON.stringify(src.index())};
+`,
+    "importers.js": () => {
+      const lines = [...src.files()].filter(([, entries]) => entries.length > 0).map(([file]) => `  ${JSON.stringify(file)}: () => import(${JSON.stringify(file)}),`);
+      return `export default {
+${lines.join("\n")}
+};
+`;
+    },
+    "frame-config.js": () => configModule(options.frameConfig),
+    "shell-config.js": () => configModule(options.shellConfig),
+    "shell-entry.js": () => shellEntry(src.base(), options.stories),
+    "frame-entry.js": () => frameEntry(frameStyles()),
+    "capture-entry.js": () => captureEntry(),
+    "capture-frame-entry.js": () => captureFrameEntry(frameStyles())
+  };
+}
 var WAIT_MS = 5e3;
 var REWRITE_MS = 250;
 var watchDir = (dir, onEvent) => {
@@ -1219,7 +1648,7 @@ var watchDir = (dir, onEvent) => {
 };
 function fileEventsArrive({ waitMs = WAIT_MS, watch = watchDir } = {}) {
   const dir = mkdtempSync(join(tmpdir(), "forge-watch-"));
-  return new Promise((resolve5) => {
+  return new Promise((resolve6) => {
     let settled2 = false;
     let writes = 0;
     let stop;
@@ -1232,7 +1661,7 @@ function fileEventsArrive({ waitMs = WAIT_MS, watch = watchDir } = {}) {
       clearTimeout(deadline);
       stop?.();
       rmSync(dir, { recursive: true, force: true });
-      resolve5(arrived);
+      resolve6(arrived);
     };
     const write = () => writeFileSync(join(dir, "probe"), String(writes++));
     try {
@@ -1265,8 +1694,6 @@ function watchProbe({ probe } = {}) {
 }
 
 // src/vite/plugin.ts
-var PREFIX = "virtual:forge/";
-var MODULES = /* @__PURE__ */ new Set(["index.js", "importers.js", "deps.js", "frame-config.js", "shell-config.js", "shell-entry.js", "frame-entry.js"]);
 var SCRIPT2 = /\.[cm]?[jt]sx?$/;
 function forge(options) {
   let root = process.cwd();
@@ -1337,32 +1764,9 @@ function forge(options) {
     }
     return graph;
   }
-  const titleUnder = (at) => {
-    if (!options.shellConfig) return void 0;
-    const file = resolve(at, options.shellConfig);
-    try {
-      return shellTitle(readFileSync(file, "utf8"), file);
-    } catch {
-      return void 0;
-    }
-  };
-  const configModule = (path) => path ? `export { default } from ${JSON.stringify(resolve(root, path))};
-` : "export default {};\n";
-  const modules = {
-    "index.js": () => `export default ${JSON.stringify(index())};
-`,
-    "importers.js": () => {
-      const lines = [...files()].filter(([, entries]) => entries.length > 0).map(([file]) => `  ${JSON.stringify(file)}: () => import(${JSON.stringify(file)}),`);
-      return `export default {
-${lines.join("\n")}
-};
-`;
-    },
-    "frame-config.js": () => configModule(options.frameConfig),
-    "shell-config.js": () => configModule(options.shellConfig),
-    "shell-entry.js": () => shellEntry(base, options.stories),
-    "frame-entry.js": () => frameEntry((options.frameStyles ?? []).map((path) => resolve(root, path)))
-  };
+  const shellUnder = (at) => readShellFields(options.shellConfig ? resolve(at, options.shellConfig) : void 0);
+  const modules = virtualModules(options, { index, files, root: () => root, base: () => base });
+  let capture = null;
   const invalidate = (server, names) => {
     for (const env of Object.values(server.environments)) {
       for (const name of names) {
@@ -1373,12 +1777,12 @@ ${lines.join("\n")}
   };
   function redeps(server) {
     if (depsSent === null || depsPending) return;
-    const resolve5 = async (spec, importer) => (await server.environments.client.pluginContainer.resolveId(spec, importer))?.id ?? null;
+    const resolve6 = async (spec, importer) => (await server.environments.client.pluginContainer.resolveId(spec, importer))?.id ?? null;
     depsPending = Promise.resolve().then(async () => {
-      const graph = await graphOf(resolve5);
-      const json = JSON.stringify(graph);
-      if (json === depsSent) return;
-      depsSent = json;
+      const graph = await graphOf(resolve6);
+      const json2 = JSON.stringify(graph);
+      if (json2 === depsSent) return;
+      depsSent = json2;
       invalidate(server, ["deps.js"]);
       server.ws.send({ type: "custom", event: "forge:deps", data: graph });
     }).catch(logError).finally(() => {
@@ -1442,7 +1846,7 @@ ${lines.join("\n")}
         ];
         const optimizeDeps = { entries };
         if (command !== "build") return { optimizeDeps };
-        return { optimizeDeps, build: { rolldownOptions: { input: writePages(at, titleUnder(at)) } } };
+        return { optimizeDeps, build: { rolldownOptions: { input: writePages(at, shellUnder(at).title) } } };
       },
       generateBundle: {
         order: "post",
@@ -1479,6 +1883,7 @@ ${lines.join("\n")}
       },
       hotUpdate({ modules: modules2, server }) {
         if (this.environment.name !== "client") return;
+        capture?.revise();
         for (const file of storiesReaching(modules2)) server.ws.send({ type: "custom", event: "forge:story", data: { file } });
       },
       configureServer(server) {
@@ -1495,8 +1900,9 @@ ${lines.join("\n")}
             }, logError);
           });
         }
-        servePages(server, base, () => titleUnder(root));
-      }
+        capture = servePages(server, base, () => shellUnder(root));
+      },
+      closeServer: () => capture?.close()
     }
   ];
 }
@@ -1540,7 +1946,6 @@ function forgeTest(options) {
         const lines = [
           "",
           `import { test as __forge_test } from "vitest";`,
-          `import { page as __forge_page } from "vitest/browser";`,
           `import { runStory as __forge_runStory } from "@weasel-js/forge/test";`,
           // shell.css draws the story host; frame.css still holds the boundary's fault rule.
           `import "@weasel-js/forge/shell.css";`,
@@ -1551,7 +1956,6 @@ function forgeTest(options) {
           `const __forge_timeout = ${TIMEOUT_MS};`,
           "const __forge_options = {",
           `  setup: ${options.frameConfig ? "__forge_frame_config" : "undefined"},`,
-          "  viewport: (width, height) => __forge_page.viewport(width, height),",
           "};",
           "const __forge_run = async (exportName) => __forge_runStory(await import(/* @vite-ignore */ import.meta.url), exportName, __forge_file, __forge_title, __forge_options);",
           // An isolated story asks for a document of its own, which the test page is not; its reason goes in the name.