@weasel-js/forge 1.9.4 → 1.10.0

package/dist/vite/index.js

@@ -1,10 +1,12 @@
 import { DEFAULT_TITLE } from '../chunk-5DXUNLV2.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { storyNameFromExport, storyId } from '../chunk-HRGPFQBW.js';
-import { readFileSync, existsSync, mkdirSync, writeFileSync, globSync, statSync } from 'fs';
-import { resolve, sep, relative, dirname, join, basename, matchesGlob } from 'path';
+import { PROP_ARG_TYPES_EXPORT, storyNameFromExport, storyId } from '../chunk-ZAWXMUGZ.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 { tmpdir } from 'os';
 
 // src/vite/html.ts
 var escaped = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -79,7 +81,7 @@ function createDepGraph({ root, read }) {
     reset() {
       resolutions.clear();
     },
-    async build(entries, resolve4) {
+    async build(entries, resolve5) {
       const resolveFrom = (spec, importer) => {
         let byImporter = resolutions.get(importer);
         if (!byImporter) {
@@ -88,7 +90,7 @@ function createDepGraph({ root, read }) {
         }
         let pending = byImporter.get(spec);
         if (!pending) {
-          pending = resolve4(spec, importer).then(
+          pending = resolve5(spec, importer).then(
             (id) => {
               const file = id?.split("?")[0];
               return file && !file.startsWith("\0") && SCRIPT.test(file) && !file.split(/[\\/]/).includes("node_modules") ? file : null;
@@ -318,6 +320,92 @@ function namesIn(node) {
   walk(node);
   return out;
 }
+var runGit = (args, cwd) => new Promise((done, fail) => {
+  execFile(
+    "git",
+    ["-c", "core.quotepath=off", ...args],
+    { cwd, maxBuffer: 1 << 30 },
+    (error, stdout) => error ? fail(error) : done(stdout)
+  );
+});
+var LOG_FORMAT = "--format=%x00%H%x09%aI";
+function fileDates(log, paths) {
+  const out = /* @__PURE__ */ new Map();
+  const names = new Map(paths.map((path) => [path, path]));
+  let commit = "";
+  let date = "";
+  for (const line of log.split("\n")) {
+    if (names.size === 0) break;
+    if (line.startsWith("\0")) {
+      [commit = "", date = ""] = line.slice(1).split("	");
+      continue;
+    }
+    const [status, ...files] = line.split("	");
+    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 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);
+  }
+  return out;
+}
+function versionOf(named) {
+  const tag = named.trim().split(/[~^]/)[0] ?? "";
+  return /(?:^v?|@)(\d+\.\d+\.\d+[-+.\w]*)$/.exec(tag)?.[1] ?? null;
+}
+function packageOf(file, top) {
+  for (let dir = dirname(file); dir.startsWith(top); dir = dirname(dir)) {
+    const manifest = join(dir, "package.json");
+    if (existsSync(manifest)) {
+      try {
+        const name = JSON.parse(readFileSync(manifest, "utf8")).name;
+        if (typeof name === "string") return name;
+      } catch {
+      }
+    }
+    if (dir === top) break;
+  }
+  return null;
+}
+function createHistoryReader(root, git = runGit) {
+  let cached = null;
+  async function load(sources) {
+    const [top = "", prefix = ""] = (await git(["rev-parse", "--show-toplevel", "--show-prefix"], root)).split("\n");
+    const inRepo = new Map(sources.map((source) => [posix.normalize(posix.join(prefix, source)), source]));
+    const log = await git(["log", "--name-status", "-M", LOG_FORMAT], top);
+    const dates = fileDates(log, [...inRepo.keys()]);
+    const byPackage = /* @__PURE__ */ new Map();
+    for (const path of dates.keys()) {
+      const name = packageOf(resolve(top, path), top);
+      byPackage.set(name, [...byPackage.get(name) ?? [], path]);
+    }
+    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 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] ?? "") };
+      });
+    }
+    return history;
+  }
+  return {
+    async read(sources) {
+      try {
+        const head = (await git(["rev-parse", "HEAD"], root)).trim();
+        const key = [...sources].sort().join("\n");
+        if (cached?.head !== head || cached.sources !== key) cached = { head, sources: key, history: await load(sources) };
+        return cached.history;
+      } catch {
+        return {};
+      }
+    }
+  };
+}
 function parseFile(code, file) {
   const plugins = ["typescript", "decorators-legacy", .../\.[jt]sx$/.test(file) ? ["jsx"] : []];
   return parse(code, { sourceType: "module", plugins }).program;
@@ -647,7 +735,7 @@ function storyGlobOf(path, stories) {
 }
 
 // src/vite/autoTitle.ts
-var posix = (path) => path.split(sep).join("/");
+var posix2 = (path) => path.split(sep).join("/");
 var dotted = (path) => /^\.{1,2}([/\\]|$)/.test(path) ? path : `./${path}`;
 function globDirectory(pattern) {
   const segments = pattern.split("/");
@@ -666,11 +754,11 @@ function titleParts(parts) {
 }
 var titleFrom = (importPath, directory) => titleParts(importPath.replace(directory, "").split("/").filter(Boolean)).join("/");
 function autoTitle(file, root, stories) {
-  const path = posix(relative(root, file));
+  const path = posix2(relative(root, file));
   const importPath = dotted(path);
   const pattern = storyGlobOf(path, stories);
   if (pattern === void 0) return titleFrom(importPath, ".");
-  const directory = dotted(posix(relative(root, resolve(root, globDirectory(pattern))))).replace(/\/$/, "");
+  const directory = dotted(posix2(relative(root, resolve(root, globDirectory(pattern))))).replace(/\/$/, "");
   return titleFrom(importPath, directory);
 }
 
@@ -754,13 +842,13 @@ function createTracer(read) {
     }
     return modules.get(file) ?? null;
   };
-  return (resolve4) => {
+  return (resolve5) => {
     const trace = {
       reads: /* @__PURE__ */ new Set(),
       unresolved: false,
       info,
       async target(spec, importer) {
-        const id = (await resolve4(spec, importer).catch(() => null))?.split("?")[0];
+        const id = (await resolve5(spec, importer).catch(() => null))?.split("?")[0];
         if (!id) trace.unresolved = true;
         return id && !id.startsWith("\0") ? id : null;
       },
@@ -802,8 +890,8 @@ function sameResolution(a, b) {
 }
 function createWrapperResolver(read) {
   const tracer = createTracer(read);
-  return async (file, callees, resolve4) => {
-    const trace = tracer(resolve4);
+  return async (file, callees, resolve5) => {
+    const trace = tracer(resolve5);
     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 };
@@ -830,8 +918,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, resolve4, decide = createWrapperResolver((path) => readFileSync(path, "utf8"))) {
-  const resolution = await decide(file, foreignCallees(code, file), resolve4);
+async function indexStoryResolved(code, file, source, resolve5, decide = createWrapperResolver((path) => readFileSync(path, "utf8"))) {
+  const resolution = await decide(file, foreignCallees(code, file), resolve5);
   return { entries: indexStory(code, file, source, resolution), resolution };
 }
 function ownEntries(realms) {
@@ -847,6 +935,241 @@ 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;
+  let tsm;
+  try {
+    tsm = (await import('typescript')).default;
+  } catch {
+    return null;
+  }
+  const { sys } = tsm;
+  const configFile = tsm.findConfigFile(root, sys.fileExists);
+  const read = configFile ? tsm.readConfigFile(configFile, sys.readFile) : void 0;
+  const parsed = read?.config ? tsm.parseJsonConfigFileContent(read.config, { ...sys, readDirectory: () => [] }, dirname(configFile)) : void 0;
+  const options = {
+    jsx: tsm.JsxEmit.ReactJSX,
+    moduleResolution: tsm.ModuleResolutionKind.Bundler,
+    module: tsm.ModuleKind.ESNext,
+    target: tsm.ScriptTarget.ESNext,
+    strict: true,
+    ...parsed?.options,
+    allowJs: true,
+    noEmit: true,
+    skipLibCheck: true
+  };
+  const host = {
+    getScriptFileNames: () => [...stories()],
+    getScriptVersion: (file) => String(sys.getModifiedTime?.(file)?.getTime() ?? 0),
+    getScriptSnapshot: (file) => {
+      const text = sys.readFile(file);
+      return text === void 0 ? void 0 : tsm.ScriptSnapshot.fromString(text);
+    },
+    getCurrentDirectory: () => root,
+    getCompilationSettings: () => options,
+    getDefaultLibFileName: tsm.getDefaultLibFilePath,
+    fileExists: sys.fileExists,
+    readFile: sys.readFile,
+    readDirectory: sys.readDirectory,
+    directoryExists: sys.directoryExists,
+    getDirectories: sys.getDirectories
+  };
+  const service = tsm.createLanguageService(host, tsm.createDocumentRegistry());
+  return {
+    read(file) {
+      const program = service.getProgram();
+      const source = program?.getSourceFile(file);
+      if (!program || !source) return null;
+      const checker = program.getTypeChecker();
+      const props = componentProps(tsm, checker, source);
+      return props ? propTable(tsm, checker, props, source, skipped) : null;
+    }
+  };
+}
+function componentProps(tsm, checker, source) {
+  const module = checker.getSymbolAtLocation(source);
+  const exported = module && checker.tryGetMemberInModuleExports("default", module);
+  if (!exported) return null;
+  const meta = checker.getTypeOfSymbolAtLocation(
+    exported.flags & tsm.SymbolFlags.Alias ? checker.getAliasedSymbol(exported) : exported,
+    source
+  );
+  const named = meta.getProperty("component");
+  if (!named) return null;
+  const component = checker.getNonNullableType(checker.getTypeOfSymbolAtLocation(named, source));
+  for (const part of component.isUnion() ? component.types : [component]) {
+    const [call] = part.getCallSignatures();
+    const [param] = call?.getParameters() ?? [];
+    if (call) return param ? checker.getTypeOfSymbolAtLocation(param, source) : null;
+    const instance = part.getConstructSignatures()[0]?.getReturnType();
+    const held = instance?.getProperty("props");
+    if (held) return checker.getTypeOfSymbolAtLocation(held, source);
+  }
+  return null;
+}
+function propTable(tsm, checker, props, at, skipped) {
+  const argTypes = {};
+  const sources = /* @__PURE__ */ new Set();
+  for (const prop2 of checker.getPropertiesOfType(checker.getApparentType(props))) {
+    const files = (prop2.getDeclarations() ?? []).map((declaration) => declaration.getSourceFile().fileName);
+    if (files.length > 0 && files.every(skipped)) continue;
+    const argType = controlFor(
+      tsm,
+      checker.getNonNullableType(checker.getTypeOfSymbolAtLocation(prop2, at)),
+      () => writtenOrder(tsm, checker, prop2)
+    );
+    if (!argType) continue;
+    const description = tsm.displayPartsToString(prop2.getDocumentationComment(checker)).replace(/\s+/g, " ").trim();
+    argTypes[prop2.getName()] = description ? { ...argType, description } : argType;
+    for (const file of files) if (!/[\\/]node_modules[\\/]/.test(file)) sources.add(file);
+  }
+  return { argTypes, sources: [...sources] };
+}
+function controlFor(tsm, type, written) {
+  const { TypeFlags } = tsm;
+  const parts = type.isUnion() ? type.types : [type];
+  const every = (flags) => parts.every((part) => part.flags & flags);
+  if (every(TypeFlags.BooleanLike)) return { control: { type: "boolean" } };
+  if (type.flags & TypeFlags.String) return { control: { type: "text" } };
+  if (type.flags & TypeFlags.Number) return { control: { type: "number" } };
+  if (parts.length > 1 && every(TypeFlags.StringLiteral)) {
+    const options = parts.map((part) => part.value);
+    const order = written();
+    const same = order?.length === options.length && options.every((option) => order.includes(option));
+    return { options: same ? order : options };
+  }
+  return null;
+}
+function writtenOrder(tsm, checker, prop2) {
+  const [declaration, ...others] = prop2.getDeclarations() ?? [];
+  if (!declaration || others.length > 0) return null;
+  if (!tsm.isPropertySignature(declaration) && !tsm.isPropertyDeclaration(declaration)) return null;
+  const seen = /* @__PURE__ */ new Set();
+  const literals = (node) => {
+    if (!node || seen.has(node)) return null;
+    seen.add(node);
+    if (tsm.isParenthesizedTypeNode(node)) return literals(node.type);
+    if (tsm.isLiteralTypeNode(node)) {
+      if (node.literal.kind === tsm.SyntaxKind.NullKeyword) return [];
+      return tsm.isStringLiteralLike(node.literal) ? [node.literal.text] : null;
+    }
+    if (node.kind === tsm.SyntaxKind.UndefinedKeyword) return [];
+    if (tsm.isUnionTypeNode(node)) {
+      const parts = node.types.map(literals);
+      return parts.every((part) => part !== null) ? [...new Set(parts.flat())] : null;
+    }
+    if (tsm.isTypeReferenceNode(node) && !node.typeArguments) {
+      const named = checker.getSymbolAtLocation(node.typeName);
+      const target = named && named.flags & tsm.SymbolFlags.Alias ? checker.getAliasedSymbol(named) : named;
+      const [alias, ...rest] = target?.getDeclarations() ?? [];
+      if (alias && rest.length === 0 && tsm.isTypeAliasDeclaration(alias) && !alias.typeParameters) {
+        return literals(alias.type);
+      }
+    }
+    return null;
+  };
+  return literals(declaration.type);
+}
+
+// src/vite/propControls.ts
+function propControls(stories, options = {}) {
+  let root = process.cwd();
+  let reader = null;
+  return {
+    name: "weaselforge:prop-controls",
+    configResolved(config) {
+      root = config.root;
+      reader = null;
+    },
+    async transform(code, id) {
+      if (!stories().includes(id)) return void 0;
+      const props = await (reader ??= createPropReader(root, stories, options));
+      let table = null;
+      try {
+        table = props?.read(id) ?? null;
+      } catch (err) {
+        this.warn(`could not read the props for ${id}: ${err instanceof Error ? err.message : String(err)}`);
+      }
+      if (!table || Object.keys(table.argTypes).length === 0) return void 0;
+      for (const source of table.sources) this.addWatchFile(source);
+      return { code: `${code}
+export const ${PROP_ARG_TYPES_EXPORT} = ${JSON.stringify(table.argTypes)};
+`, map: null };
+    }
+  };
+}
+
+// src/vite/servePages.ts
+var PAGES2 = { "/": "shell-entry.js", "/index.html": "shell-entry.js", "/frame.html": "frame-entry.js" };
+function servePages(server, base, title) {
+  server.middlewares.use((req, res, next) => {
+    const url = req.url ?? "/";
+    const path = url.split("?")[0] ?? "/";
+    const prefix = base.endsWith("/") ? base.slice(0, -1) : base;
+    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(
+      (doc) => {
+        res.statusCode = 200;
+        res.setHeader("Content-Type", "text/html");
+        res.end(doc);
+      },
+      (err) => next(err)
+    );
+  });
+}
+
 // src/vite/shellTitle.ts
 function shellTitle(code, file) {
   let program;
@@ -885,12 +1208,57 @@ function storybookShims() {
     }
   };
 }
+var WAIT_MS = 5e3;
+var REWRITE_MS = 250;
+var watchDir = (dir, onEvent) => {
+  const watcher = watch(dir, onEvent);
+  watcher.on("error", () => {
+  });
+  watcher.unref();
+  return () => watcher.close();
+};
+function fileEventsArrive({ waitMs = WAIT_MS, watch = watchDir } = {}) {
+  const dir = mkdtempSync(join(tmpdir(), "forge-watch-"));
+  return new Promise((resolve5) => {
+    let settled2 = false;
+    let writes = 0;
+    let stop;
+    let rewrite;
+    let deadline;
+    const settle = (arrived) => {
+      if (settled2) return;
+      settled2 = true;
+      clearInterval(rewrite);
+      clearTimeout(deadline);
+      stop?.();
+      rmSync(dir, { recursive: true, force: true });
+      resolve5(arrived);
+    };
+    const write = () => writeFileSync(join(dir, "probe"), String(writes++));
+    try {
+      stop = watch(dir, () => settle(true));
+      write();
+    } catch {
+      settle(false);
+      return;
+    }
+    rewrite = setInterval(write, REWRITE_MS);
+    deadline = setTimeout(() => settle(false), waitMs);
+    rewrite.unref();
+    deadline.unref();
+  });
+}
+var SILENT = `[forge] a file written ${WAIT_MS / 1e3} s ago has not been reported by the OS file watcher, so an edit will not reach the page until file events arrive again. \`server.watch: { usePolling: true }\` serves edits without them. On macOS, look for \`fseventsd\` held at 100% CPU.`;
+async function warnWhenWatchIsSilent(server, probe = fileEventsArrive) {
+  const { watch } = server.config.server;
+  if (watch === null || watch?.usePolling) return;
+  if (!await probe()) server.config.logger.warn(SILENT);
+}
 
 // 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?$/;
-var PAGES2 = { "/": "shell-entry.js", "/index.html": "shell-entry.js", "/frame.html": "frame-entry.js" };
 function forge(options) {
   let root = process.cwd();
   let base = "/";
@@ -949,6 +1317,17 @@ function forge(options) {
     }
   };
   const depGraph = () => deps ??= createDepGraph({ root, read: (file) => readFileSync(file, "utf8") });
+  let history = null;
+  async function graphOf(resolveImport) {
+    const graph = await depGraph().build(index(), resolveImport);
+    const sources = Object.values(graph).flatMap((entry) => entry.source === null ? [] : [entry.source]);
+    const histories = await (history ??= createHistoryReader(root)).read(sources);
+    for (const entry of Object.values(graph)) {
+      const found = entry.source === null ? void 0 : histories[entry.source];
+      if (found) entry.history = found;
+    }
+    return graph;
+  }
   const titleUnder = (at) => {
     if (!options.shellConfig) return void 0;
     const file = resolve(at, options.shellConfig);
@@ -972,50 +1351,8 @@ ${lines.join("\n")}
     },
     "frame-config.js": () => configModule(options.frameConfig),
     "shell-config.js": () => configModule(options.shellConfig),
-    "shell-entry.js": () => `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(options.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();
-});
-`,
-    "frame-entry.js": () => `import { mountFrame } from '@weasel-js/forge/frame';
-import '@weasel-js/forge/frame.css';
-${(options.frameStyles ?? []).map((path) => `import ${JSON.stringify(resolve(root, 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());
-`
+    "shell-entry.js": () => shellEntry(base, options.stories),
+    "frame-entry.js": () => frameEntry((options.frameStyles ?? []).map((path) => resolve(root, path)))
   };
   const invalidate = (server, names) => {
     for (const env of Object.values(server.environments)) {
@@ -1027,9 +1364,9 @@ import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
   };
   function redeps(server) {
     if (depsSent === null || depsPending) return;
-    const resolve4 = async (spec, importer) => (await server.environments.client.pluginContainer.resolveId(spec, importer))?.id ?? null;
+    const resolve5 = async (spec, importer) => (await server.environments.client.pluginContainer.resolveId(spec, importer))?.id ?? null;
     depsPending = Promise.resolve().then(async () => {
-      const graph = await depGraph().build(index(), resolve4);
+      const graph = await graphOf(resolve5);
       const json = JSON.stringify(graph);
       if (json === depsSent) return;
       depsSent = json;
@@ -1084,6 +1421,7 @@ import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
   }
   return [
     ...options.storybookShims === false ? [] : [storybookShims()],
+    ...options.propControls === false ? [] : [propControls(() => [...files().keys()], options.propControls === true ? void 0 : options.propControls)],
     {
       name: "weaselforge",
       config(config, { command }) {
@@ -1111,6 +1449,7 @@ import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
         wrappersOf.clear();
         settledAll = null;
         deps = null;
+        history = null;
         depsSent = null;
       },
       resolveId(id) {
@@ -1124,7 +1463,7 @@ import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
           await settledAll;
         }
         if (name !== "deps.js") return modules[name]?.();
-        const graph = await depGraph().build(index(), async (spec, importer) => (await this.resolve(spec, importer))?.id ?? null);
+        const graph = await graphOf(async (spec, importer) => (await this.resolve(spec, importer))?.id ?? null);
         depsSent = JSON.stringify(graph);
         return `export default ${depsSent};
 `;
@@ -1135,6 +1474,7 @@ import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
       },
       configureServer(server) {
         server.watcher.add([...files().keys()]);
+        void warnWhenWatchIsSilent(server);
         for (const event of ["add", "change", "unlink"]) {
           server.watcher.on(event, (path) => {
             const file = resolve(path);
@@ -1146,22 +1486,7 @@ import.meta.hot?.accept('virtual:forge/importers.js', () => location.reload());
             }, logError);
           });
         }
-        server.middlewares.use((req, res, next) => {
-          const url = req.url ?? "/";
-          const path = url.split("?")[0] ?? "/";
-          const prefix = base.endsWith("/") ? base.slice(0, -1) : base;
-          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", titleUnder(root))).then(
-            (doc) => {
-              res.statusCode = 200;
-              res.setHeader("Content-Type", "text/html");
-              res.end(doc);
-            },
-            (err) => next(err)
-          );
-        });
+        servePages(server, base, () => titleUnder(root));
       }
     }
   ];