@inkandswitch/patchwork 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @inkandswitch/patchwork
 
+## 0.6.0
+
+### Minor Changes
+
+- 61a152a: Add a `frameToolId` option to `setup`, and stop seeding a frame tool into new accounts.
+
+  `createDefaultAccount` wrote `frameToolId: "threepane"` into every account it created — a tool id belonging to one particular tool bundle, hardcoded in core. A site whose `packageListURL` didn't ship `threepane` gave every new user an account pointing at a tool that never registers, so the root view never mounted.
+
+  New accounts now leave `frameToolId` unset, and the router resolves the frame each boot:
+
+  ```
+  #frame=  →  the account's frameToolId  →  setup({frameToolId})  →  first tool tagged frame-tool
+  ```
+
+  The field is still written to the account when a user picks a frame, so it stays a user preference; it is no longer decided for them at signup. Existing accounts already have it set and are unaffected.
+
+  Sites relying on the old seeded default should pass `frameToolId: "threepane"` to `setup`.
+
+- 61a152a: Make `vite dev` work without a site hand-rolling the dev server.
+
+  The build emits the service worker, the automerge shared worker, the module-loader worker, and three wasm binaries. None of them existed in serve mode, so every one 404'd and dev only worked if a site served a previous production build's `dist/` behind vite. The plugin now serves all of them itself:
+
+  - The three worker entries are bundled on demand with esbuild and rebuilt per request, so they always reflect the source on disk. Their heavy imports resolve to the dev server's optimized-dep URLs, mirroring how the build rewrites them to `/packages/...` — import maps don't apply to `type: "module"` workers, so the URLs have to be real either way.
+  - `automerge.wasm`, `keyhive_wasm.wasm`, and `subduction.wasm` are served from the bootloader's own node_modules. `@inkandswitch/patchwork-bootloader/externals` gains `wasmAssets()`, which `emitWasmAssets` now uses too.
+  - `global.css` 404'd in dev: the generated `index.html` links it by bare specifier, which only the build resolves. Both patchwork's and the bootloader's stylesheets are now served under root-absolute paths, and the link points at them.
+  - `@patchwork/service-worker` called `emitFile` from `buildStart` unconditionally, which throws in serve mode — it logged "This plugin is likely not vite-compatible" three times on every dev-server start. It now skips emission when serving.
+  - Dep pre-bundling runs esbuild outside the plugin pipeline that applies `define`, so in dev the page fell back to the default storage prefix while the workers used the configured one — the two would have opened different IndexedDB databases. The defines are now passed to the optimizer as well.
+
+  Sites no longer need to filter `@patchwork/service-worker` out of the plugin list, serve stylesheets themselves, or keep a built `dist/` around for `vite dev`.
+
+### Patch Changes
+
+- 846cfac: Update the pinned `@automerge/*` versions to `2.6.0-subduction.47`. These are exact pins in `dependencies` and `peerDependencies`, so both packages need to ship the new version together — installing a `.46` and a `.47` package side by side loads two copies of automerge-repo, and document handles from one are not recognised by the other.
+- Updated dependencies [846cfac]
+- Updated dependencies [61a152a]
+  - @inkandswitch/patchwork-bootloader@0.6.1
+
+## 0.5.0
+
+### Minor Changes
+
+- 98be594: Collapse `siteName`, `title`, and `setup({name})` into a single `title`.
+
+  A site's name was three options across two files: `siteName` and `title` in the vite config, `name` at `setup`. They fed the same handful of strings and could disagree with each other.
+
+  `title` is now the only one. It names the html `<title>`, `apple-mobile-web-app-title`, and the manifest's `name`/`short_name` as before, and is also emitted as the `__SITE_TITLE__` define, which supplies the brand word the router appends to the document title as `"<doc> | <title>"`. It defaults to `"Patchwork"`.
+
+  - `siteName` and the `__SITE_NAME__` define are removed. If you used `siteName` only for display, rename it to `title`; if you relied on it to namespace storage, see `storagePrefix`.
+  - `setup({name})` is now `setup({title})`, and is only needed to override the build-time value.
+
+- 98be594: Namespace IndexedDB and peer ids with a new build-time `storagePrefix` option.
+
+  The tab and the shared automerge worker are separate bundles that must open the same databases. Both now read the name from one place, `@inkandswitch/patchwork-bootloader/storage`, resolved from the `__STORAGE_PREFIX__` define the vite plugin emits unconditionally.
+
+  Previously each side resolved `__SITE_NAME__` itself with a different fallback — `"patchwork.inkandswitch.com"` in the worker, `"patchwork"` in the tab — so a site that never set `siteName` had its tab and worker on two different keyhive databases, and one that passed `setup({name})` split them the same way, since a runtime option never reaches the worker.
+
+  - `storagePrefix` defaults to `"patchwork"` and is settable only in the build config. Sites sharing an origin must use distinct prefixes. It is deliberately not derived from any display name: changing it points a site at empty storage, so a rebrand must not be able to change it by accident.
+  - Sites that relied on `siteName` to namespace their storage must now set `storagePrefix` explicitly to that same value to keep their existing databases.
+  - `createRepo` in `@inkandswitch/patchwork` no longer takes a site name argument.
+
+### Patch Changes
+
+- Updated dependencies [98be594]
+  - @inkandswitch/patchwork-bootloader@0.6.0
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/client.d.ts

@@ -12,7 +12,8 @@ import "@inkandswitch/patchwork-elements";
 import "@inkandswitch/patchwork-providers";
 
 declare global {
-  const __SITE_NAME__: string;
+  const __SITE_TITLE__: string;
+  const __STORAGE_PREFIX__: string;
 
   interface ImportMetaEnv {
     /**

package/dist/createAccount.js

@@ -20,7 +20,6 @@ export const createDefaultAccount = async (accountHandle, repo) => {
         }),
     ]);
     accountHandle.change((doc) => {
-        doc.frameToolId = "threepane";
         doc.rootFolderUrl = rootFolder.url;
         doc.moduleSettingsUrl = moduleSettings.url;
         doc.contactUrl = contact.url;

package/dist/index.js

@@ -53,8 +53,8 @@ export function setup(options = {}) {
 }
 export default setup;
 async function doSetup(options) {
-    const siteName = options.name ??
-        (typeof __SITE_NAME__ !== "undefined" ? __SITE_NAME__ : "patchwork");
+    const siteTitle = options.title ??
+        (typeof __SITE_TITLE__ !== "undefined" ? __SITE_TITLE__ : "Patchwork");
     const moduleSources = resolveDefaultModules(options);
     const routing = options.routing ?? "hash";
     log("booting", options);
@@ -85,7 +85,7 @@ async function doSetup(options) {
             }
         });
         let workerAdapter = new MessageChannelNetworkAdapter(workerPort);
-        ({ repo, hive, signerIdentity } = await createRepo(siteName, workerAdapter));
+        ({ repo, hive, signerIdentity } = await createRepo(workerAdapter));
         // The worker was recreated with cold state: wire the repo onto the fresh
         // port and drop the adapter stranded on the dead one.
         const bootHive = hive;
@@ -154,7 +154,8 @@ async function doSetup(options) {
             rootElement,
             repo,
             accountDocHandle,
-            siteName,
+            siteTitle,
+            frameToolId: options.frameToolId,
         });
     }
     installReveal(rootElement, router, toolsLoaded);

package/dist/repo.d.ts

@@ -3,7 +3,7 @@ import { type AutomergeRepoKeyhive } from "@automerge/automerge-repo-keyhive";
 import setupServiceWorker from "@inkandswitch/patchwork-bootloader";
 import type { SignerIdentity } from "./types.js";
 export declare function initWasm(): Promise<void>;
-export declare function createRepo(siteName: string, workerAdapter: MessageChannelNetworkAdapter): Promise<{
+export declare function createRepo(workerAdapter: MessageChannelNetworkAdapter): Promise<{
     repo: Repo;
     hive?: AutomergeRepoKeyhive;
     signerIdentity?: SignerIdentity;

package/dist/repo.js

@@ -5,6 +5,7 @@ import { initKeyhiveWasm, initializeAutomergeRepoKeyhiveWithRepo, } from "@autom
 // @ts-ignore — initSync is a wasm-bindgen runtime helper not in the .d.ts
 import { initSync as initSubductionSync } from "@automerge/automerge-subduction/slim";
 import { MemorySigner } from "@automerge/automerge-subduction/slim";
+import { keyhiveStorageName, storagePrefix, } from "@inkandswitch/patchwork-bootloader/storage";
 import debug from "debug";
 const log = debug("patchwork:setup:repo");
 const syncServer = typeof __SYNC_SERVER__ !== "undefined"
@@ -27,14 +28,14 @@ export function initWasm() {
     }
     return wasmReady;
 }
-export async function createRepo(siteName, workerAdapter) {
+export async function createRepo(workerAdapter) {
     if (syncServer.keyhive) {
         log("setting up keyhive");
         initKeyhiveWasm();
         const { hive, repo } = await initializeAutomergeRepoKeyhiveWithRepo({
             createRepo: (repoConfig) => new Repo(repoConfig),
-            storage: new IndexedDBWorkerStorageAdapter(`${siteName}-keyhive`),
-            peerIdSuffix: siteName + Math.random().toString(36).slice(2),
+            storage: new IndexedDBWorkerStorageAdapter(keyhiveStorageName),
+            peerIdSuffix: storagePrefix + Math.random().toString(36).slice(2),
             networkAdapter: workerAdapter,
             automaticArchiveIngestion: true,
             cachingMode: "periodic",
@@ -61,7 +62,7 @@ export async function createRepo(siteName, workerAdapter) {
             return peerId.includes("automerge-worker");
         },
         enableRemoteHeadsGossiping: true,
-        peerId: `${siteName}-tab-${crypto.randomUUID()}`,
+        peerId: `${storagePrefix}-tab-${crypto.randomUUID()}`,
     });
     const signerIdentity = {
         peerId: signer.peerId().toString(),

package/dist/router.d.ts

@@ -9,10 +9,11 @@ export interface RouterParams {
     rootElement: HTMLElement;
     repo: Repo;
     accountDocHandle: DocHandle<AccountDoc>;
-    siteName: string;
+    siteTitle: string;
+    frameToolId?: string;
 }
 export interface Router {
     /** Apply `location.hash` to the view. */
     route(): Promise<void>;
 }
-export declare function createRouter({ rootElement, repo, accountDocHandle, siteName, }: RouterParams): Router;
+export declare function createRouter({ rootElement, repo, accountDocHandle, siteTitle, frameToolId, }: RouterParams): Router;

package/dist/router.js

@@ -1,4 +1,4 @@
-import { isValidAutomergeUrl, isValidDocumentId, stringifyAutomergeUrl, } from "@automerge/vanillajs/slim";
+import { isValidAutomergeUrl, isValidDocumentId, parseAutomergeUrl, stringifyAutomergeUrl, } from "@automerge/vanillajs/slim";
 import { openDocument } from "@inkandswitch/patchwork-elements";
 import { getRegistry, } from "@inkandswitch/patchwork-plugins";
 // Legacy big-patchwork hash shape: `<slug>--<documentId>[?…]`. The slug can
@@ -6,12 +6,12 @@ import { getRegistry, } from "@inkandswitch/patchwork-plugins";
 // anchor on the `--` before the base58 document id rather than a strict slug
 // charset.
 const BIG_PATCHWORK_HASH_REGEX = /^(?<title>[^=&?/#]*)--(?<docId>[1-9A-HJ-NP-Za-km-z]+)/;
-// The `doc=` value is an automerge URL, kept literal rather than
+// The `doc=` and `draft=` values are automerge URLs, kept literal rather than
 // percent-encoded so links stay readable.
-const RAW_HASH_KEYS = new Set(["doc"]);
+const RAW_HASH_KEYS = new Set(["doc", "draft"]);
 // A stable order means re-serializing the same logical params is
 // byte-identical, avoiding spurious `hashchange` round-trips.
-const HASH_KEY_ORDER = ["doc", "tool", "type", "title", "frame"];
+const HASH_KEY_ORDER = ["doc", "tool", "type", "title", "frame", "draft"];
 function serializeHashParams(params) {
     const keys = [...HASH_KEY_ORDER, ...params.keys()];
     const parts = [];
@@ -47,14 +47,17 @@ function registeredFrameToolId() {
         .filter((tool) => !!tool.tags?.includes("frame-tool") && !tool.unlisted)
         .at(0)?.id;
 }
-export function createRouter({ rootElement, repo, accountDocHandle, siteName, }) {
+export function createRouter({ rootElement, repo, accountDocHandle, siteTitle, frameToolId, }) {
     const route = async () => {
         // The first call seeds the root view's tool/doc so it can mount; later
         // calls reconcile the mounted view with the hash.
         if (!rootElement.hasAttribute("tool-id")) {
             const params = new URLSearchParams(location.hash.slice(1));
             const frame = params.get("frame");
-            const toolId = frame ?? accountDocHandle.doc().frameToolId ?? registeredFrameToolId();
+            const toolId = frame ??
+                accountDocHandle.doc().frameToolId ??
+                frameToolId ??
+                registeredFrameToolId();
             if (!toolId) {
                 console.error("patchwork: no frame tool registered, nothing to mount");
                 return;
@@ -107,6 +110,14 @@ export function createRouter({ rootElement, repo, accountDocHandle, siteName, })
         // `doc` is the full automerge URL, so heads live inside it and the separate
         // `heads=` param is gone.
         params.delete("heads");
+        // `draft` is doc-scoped (owned by the drafts plugin, opaque here):
+        // navigating to a different document invalidates the selection, while
+        // same-doc navigation (tool switches, heads changes) keeps it.
+        const prevDoc = docParamToUrl(params.get("doc"));
+        if (prevDoc &&
+            parseAutomergeUrl(prevDoc).documentId !== parseAutomergeUrl(url).documentId) {
+            params.delete("draft");
+        }
         params.set("doc", url);
         for (const [key, value] of [
             ["tool", toolId],
@@ -130,7 +141,7 @@ export function createRouter({ rootElement, repo, accountDocHandle, siteName, })
                 return;
             const docTitle = datatype.module.getTitle(doc);
             if (docTitle)
-                document.title = `${docTitle} | ${siteName}`;
+                document.title = `${docTitle} | ${siteTitle}`;
         }
         catch (e) {
             console.error("Failed to update document title", e);

package/dist/site-kit/html.d.ts

@@ -1,4 +1,4 @@
-import type { PatchworkSiteOptions } from "./options.js";
+import { type PatchworkSiteOptions } from "./options.js";
 export declare function escapeHtml(value: string): string;
 /** Builds the generated index.html as a plain string — no bundler involved. */
 export declare function buildHtml(options: PatchworkSiteOptions): string;

package/dist/site-kit/html.js

@@ -1,3 +1,4 @@
+import { DEFAULT_TITLE } from "./options.js";
 import { resolveSyncServers, PRELOAD_WASM_ASSETS } from "./sync-servers.js";
 import { ICON_SPECS } from "./icons.js";
 const HTML_ESCAPES = {
@@ -12,7 +13,7 @@ export function escapeHtml(value) {
 }
 /** Builds the generated index.html as a plain string — no bundler involved. */
 export function buildHtml(options) {
-    const title = options.title ?? options.siteName ?? "Patchwork";
+    const title = options.title ?? DEFAULT_TITLE;
     const lang = (options.html && options.html.lang) || "en";
     const entry = options.entry ?? "/src/main.ts";
     const syncServers = resolveSyncServers(options);

package/dist/site-kit/manifest.d.ts

@@ -1,3 +1,3 @@
-import type { PatchworkSiteOptions } from "./options.js";
+import { type PatchworkSiteOptions } from "./options.js";
 /** Builds the generated manifest.webmanifest object — no bundler involved. */
 export declare function buildManifest(options: PatchworkSiteOptions): Record<string, unknown>;

package/dist/site-kit/manifest.js

@@ -1,7 +1,8 @@
+import { DEFAULT_TITLE } from "./options.js";
 import { ICON_SPECS } from "./icons.js";
 /** Builds the generated manifest.webmanifest object — no bundler involved. */
 export function buildManifest(options) {
-    const title = options.title ?? options.siteName ?? "Patchwork";
+    const title = options.title ?? DEFAULT_TITLE;
     const icons = !options.icons
         ? []
         : ICON_SPECS.filter((spec) => spec.fileName === "apple-touch-icon.png" || spec.manifestPurpose).map((spec) => ({

package/dist/site-kit/options.d.ts

@@ -37,10 +37,23 @@ export type PatchworkSyncServersOptions = {
     /** wss:// URL for the legacy automerge-repo sync-server channel (connected on demand via connectClassicSync). Default: wss://sync3.automerge.org. Pass false to skip its preconnect hint. */
     classic?: string | false;
 } & PatchworkPrimarySyncServerOptions;
+export declare const DEFAULT_TITLE = "Patchwork";
 export interface PatchworkSiteOptions {
-    /** -> __SITE_NAME__ define */
-    siteName?: string;
-    /** <title>, apple-mobile-web-app-title, manifest name */
+    /**
+     * Namespace for this site's IndexedDB databases and peer ids
+     * (-> __STORAGE_PREFIX__ define). Defaults to `"patchwork"`. Sites sharing
+     * an origin MUST use distinct prefixes.
+     *
+     * The tab and the shared automerge worker are separate bundles that have to
+     * open the same databases, so this is settable only here, where both of them
+     * receive it. Changing it on an existing site points it at empty storage.
+     */
+    storagePrefix?: string;
+    /**
+     * This site's name: `<title>`, apple-mobile-web-app-title, manifest name,
+     * and — via the __SITE_TITLE__ define — the brand word the router appends to
+     * the document title as `"<doc> | <title>"`. Defaults to `"Patchwork"`.
+     */
     title?: string;
     /** manifest short_name (defaults to title) */
     shortName?: string;

package/dist/site-kit/options.js

@@ -1 +1 @@
-export {};
+export const DEFAULT_TITLE = "Patchwork";

package/dist/types.d.ts

@@ -47,13 +47,24 @@ export interface PatchworkOptions {
     accountKey?: string;
     createAccount?: AccountCreator;
     /**
-     * Brand word for this site: appended to the document title as
-     * `"<doc> | <name>"` when a document is open (the separator is provided
-     * for you), and used to namespace this site's storage and peer ids.
+     * This site's name, appended to the document title as `"<doc> | <title>"`
+     * when a document is open (the separator is provided for you).
      *
-     * Defaults to the build-time `__SITE_NAME__` define, then `"patchwork"`.
+     * Defaults to the build-time `__SITE_TITLE__` define — the vite plugin's
+     * `title` option, which also names the html `<title>` and the manifest —
+     * then `"Patchwork"`.
      */
-    name?: string;
+    title?: string;
+    /**
+     * Id of the tool that frames this site — what mounts in the root view when
+     * the user hasn't chosen one on their account and the URL doesn't name one
+     * via `#frame=`. Must be a tool one of the {@link
+     * PatchworkOptions.packageListURL} sources registers.
+     *
+     * Falls back to the first registered tool tagged `frame-tool`, which with
+     * more than one of them depends on module load order.
+     */
+    frameToolId?: string;
     /** DOM id of the `<patchwork-view>` hosting the root tool. Defaults to "root". */
     rootElementId?: string;
     /**

package/dist/vite/config-plugin.d.ts

@@ -2,7 +2,14 @@ import type { Plugin } from "vite";
 import wasm from "vite-plugin-wasm";
 import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
 /**
- * Owns envPrefix, define (__SITE_NAME__/sync-server configuration),
+ * The build-time constants both the page bundle and the workers are compiled
+ * against. Values are already JSON — the shape vite's `define` and esbuild's
+ * `define` both take.
+ */
+export declare function buildDefines(options?: PatchworkVitePluginOptions): Record<string, string>;
+/**
+ * Owns envPrefix, define (__SITE_TITLE__/__STORAGE_PREFIX__/sync-server
+ * configuration),
  * server/preview CORS defaults, worker format + the wasm plugin, and build
  * defaults (firefox150 target, unminified, sourcemapped) — everything a site
  * used to hand-write in its own vite.config.ts. Each is switched off

package/dist/vite/config-plugin.js

@@ -1,8 +1,27 @@
 import wasm from "vite-plugin-wasm";
+import { DEFAULT_STORAGE_PREFIX } from "@inkandswitch/patchwork-bootloader/storage";
+import { DEFAULT_TITLE } from "../site-kit/options.js";
 import { DEFAULT_SYNC_SERVERS, resolvePrimarySyncServer, } from "../site-kit/sync-servers.js";
 const CORS_HEADERS = { "Access-Control-Allow-Origin": "*" };
 /**
- * Owns envPrefix, define (__SITE_NAME__/sync-server configuration),
+ * The build-time constants both the page bundle and the workers are compiled
+ * against. Values are already JSON — the shape vite's `define` and esbuild's
+ * `define` both take.
+ */
+export function buildDefines(options = {}) {
+    const classicSyncServer = options.syncServers && typeof options.syncServers.classic === "string"
+        ? options.syncServers.classic
+        : DEFAULT_SYNC_SERVERS.classic;
+    return {
+        __SYNC_SERVER__: JSON.stringify(resolvePrimarySyncServer(options)),
+        __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
+        __SITE_TITLE__: JSON.stringify(options.title ?? DEFAULT_TITLE),
+        __STORAGE_PREFIX__: JSON.stringify(options.storagePrefix ?? DEFAULT_STORAGE_PREFIX),
+    };
+}
+/**
+ * Owns envPrefix, define (__SITE_TITLE__/__STORAGE_PREFIX__/sync-server
+ * configuration),
  * server/preview CORS defaults, worker format + the wasm plugin, and build
  * defaults (firefox150 target, unminified, sourcemapped) — everything a site
  * used to hand-write in its own vite.config.ts. Each is switched off
@@ -12,20 +31,17 @@ export function configPlugin(options = {}) {
     return {
         name: "@patchwork/config",
         config() {
-            const primarySyncServer = resolvePrimarySyncServer(options);
-            const classicSyncServer = options.syncServers && typeof options.syncServers.classic === "string"
-                ? options.syncServers.classic
-                : DEFAULT_SYNC_SERVERS.classic;
-            const define = {
-                __SYNC_SERVER__: JSON.stringify(primarySyncServer),
-                __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
-            };
-            if (options.siteName) {
-                define.__SITE_NAME__ = JSON.stringify(options.siteName);
-            }
             return {
                 envPrefix: ["VITE_", "PATCHWORK_"],
-                define,
+                define: buildDefines(options),
+                optimizeDeps: {
+                    exclude: ["@automerge/automerge-repo-storage-indexeddb"],
+                    // Dep pre-bundling runs esbuild directly, outside the plugin
+                    // pipeline that applies `define`. Without this the page would fall
+                    // back to the built-in storage prefix while the workers used the
+                    // configured one, and they have to open the same databases.
+                    esbuildOptions: { define: buildDefines(options) },
+                },
                 server: options.server === false
                     ? undefined
                     : {

package/dist/vite/dev-plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
+export declare function devPlugin(options?: PatchworkVitePluginOptions): Plugin;

package/dist/vite/dev-plugin.js

@@ -0,0 +1,129 @@
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import * as esbuild from "esbuild";
+import { wasmAssets } from "@inkandswitch/patchwork-bootloader/externals";
+import { buildDefines } from "./config-plugin.js";
+import { builtins, devDependencyId } from "./importmap-plugin.js";
+import { workers } from "./service-worker-plugin.js";
+const PATCHWORK_CSS = "/@inkandswitch/patchwork/global.css";
+const BOOTLOADER_CSS = "/@inkandswitch/patchwork-bootloader/global.css";
+// The generated index.html links the stylesheet by bare specifier, which the
+// build resolves and the dev server does not. Serving the two files under
+// these paths, and pointing the link at the first one, covers the gap.
+const stylesheets = {
+    [PATCHWORK_CSS]: fileURLToPath(import.meta.resolve("@inkandswitch/patchwork/global.css")),
+    [BOOTLOADER_CSS]: fileURLToPath(import.meta.resolve("@inkandswitch/patchwork-bootloader/global.css")),
+};
+/**
+ * Workers are `type: "module"` scripts the browser fetches directly, so import
+ * maps don't apply to them and their heavy imports have to resolve to real
+ * URLs. The build rewrites those to the `/packages/...` chunks it emits; here
+ * they become the dev server's own optimized-dep URLs.
+ */
+function externalBuiltins() {
+    return {
+        name: "patchwork-dev-externals",
+        setup(build) {
+            build.onResolve({ filter: /.*/ }, (args) => {
+                if (!(args.path in builtins))
+                    return null;
+                return {
+                    path: `/@id/${devDependencyId(args.path)}`,
+                    external: true,
+                };
+            });
+        },
+    };
+}
+function workerContexts(options) {
+    const contexts = new Map();
+    for (const { specifier, fileName } of workers) {
+        contexts.set(`/${fileName}`, esbuild.context({
+            entryPoints: [fileURLToPath(import.meta.resolve(specifier))],
+            bundle: true,
+            write: false,
+            format: "esm",
+            platform: "browser",
+            target: "firefox115",
+            sourcemap: "inline",
+            define: buildDefines(options),
+            plugins: [externalBuiltins()],
+        }));
+    }
+    return contexts;
+}
+export function devPlugin(options = {}) {
+    let serve = false;
+    let contexts;
+    const wasm = new Map(wasmAssets().map(({ fileName, path }) => [`/${fileName}`, path]));
+    return {
+        name: "@patchwork/dev",
+        configResolved(config) {
+            serve = config.command === "serve";
+        },
+        transformIndexHtml(html) {
+            if (!serve)
+                return html;
+            return html.replace(`href="@inkandswitch/patchwork/global.css"`, `href="${PATCHWORK_CSS}"`);
+        },
+        async buildEnd() {
+            if (!contexts)
+                return;
+            for (const context of contexts.values())
+                (await context).dispose();
+            contexts = undefined;
+        },
+        configureServer(server) {
+            contexts = workerContexts(options);
+            server.middlewares.use(async (request, response, next) => {
+                const pathname = request.url?.split("?")[0] ?? "";
+                const stylesheet = stylesheets[pathname];
+                if (stylesheet) {
+                    try {
+                        const css = await readFile(stylesheet, "utf8");
+                        response.setHeader("Content-Type", "text/css");
+                        response.setHeader("Cache-Control", "no-cache");
+                        response.end(pathname === PATCHWORK_CSS
+                            ? css.replace(`"@inkandswitch/patchwork-bootloader/global.css"`, `"${BOOTLOADER_CSS}"`)
+                            : css);
+                    }
+                    catch {
+                        next();
+                    }
+                    return;
+                }
+                const binary = wasm.get(pathname);
+                if (binary) {
+                    try {
+                        response.setHeader("Content-Type", "application/wasm");
+                        response.setHeader("Cache-Control", "no-cache");
+                        response.end(await readFile(binary));
+                    }
+                    catch {
+                        next();
+                    }
+                    return;
+                }
+                const context = contexts?.get(pathname);
+                if (!context)
+                    return next();
+                try {
+                    // Rebuilt per request rather than watched: a worker is fetched once
+                    // when the browser starts it, and esbuild's incremental rebuild is
+                    // cheaper than keeping a watcher per entry.
+                    const result = await (await context).rebuild();
+                    response.setHeader("Content-Type", "text/javascript");
+                    response.setHeader("Cache-Control", "no-cache");
+                    response.end(result.outputFiles[0].text);
+                }
+                catch (error) {
+                    // A worker that fails to build is otherwise a silent 500 in a
+                    // context with no console of its own.
+                    server.config.logger.error(`[patchwork] failed to bundle ${pathname}: ${error}`);
+                    response.statusCode = 500;
+                    response.end(`console.error(${JSON.stringify(String(error))})`);
+                }
+            });
+        },
+    };
+}

package/dist/vite/importmap-plugin.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "vite";
 import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
 export declare const builtins: Record<string, string>;
+export declare function devDependencyId(id: string): string;
 export declare function importmap(options?: PatchworkVitePluginOptions): Plugin;

package/dist/vite/importmap-plugin.js

@@ -37,7 +37,7 @@ function createImportMap(options) {
     Object.assign(importmap.imports, builtins);
     return { importmap, builtins };
 }
-function devDependencyId(id) {
+export function devDependencyId(id) {
     if (id === "@inkandswitch/patchwork")
         return id;
     if (id === "@inkandswitch/patchwork-bootloader") {

package/dist/vite/patchwork-plugin.js

@@ -1,6 +1,7 @@
 import { importmap } from "./importmap-plugin.js";
 import { serviceworker } from "./service-worker-plugin.js";
 import { configPlugin, wasm } from "./config-plugin.js";
+import { devPlugin } from "./dev-plugin.js";
 import { iconsPlugin } from "./icons.js";
 import { htmlPlugin } from "./html-plugin.js";
 import { manifestPlugin } from "./manifest-plugin.js";
@@ -36,5 +37,6 @@ export default function patchwork(options) {
         netlifyPlugin(options),
         importmap(options),
         serviceworker(),
+        devPlugin(options),
     ].filter((plugin) => plugin != null);
 }

package/dist/vite/service-worker-plugin.d.ts

@@ -1,2 +1,6 @@
 import type { Plugin } from "vite";
+export declare const workers: {
+    specifier: string;
+    fileName: string;
+}[];
 export declare function serviceworker(): Plugin;

package/dist/vite/service-worker-plugin.js

@@ -10,7 +10,7 @@ const self = fileURLToPath(import.meta.url);
 // own chunks. Their heavy imports are marked external and resolved to
 // /packages/... URLs (both workers are created with type:"module", so the
 // browser fetches those as regular network requests).
-const workers = [
+export const workers = [
     {
         specifier: "@inkandswitch/patchwork-bootloader/service-worker",
         fileName: "service-worker.js",
@@ -26,10 +26,17 @@ const workers = [
 ];
 export function serviceworker() {
     const entryIds = new Set();
+    let serve = false;
     return {
         name: "@patchwork/service-worker",
         enforce: "pre",
+        configResolved(config) {
+            serve = config.command === "serve";
+        },
         async buildStart() {
+            // emitFile throws in serve mode.
+            if (serve)
+                return;
             for (const { specifier, fileName } of workers) {
                 const resolved = await this.resolve(specifier, self);
                 entryIds.add(resolved.id);

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/inkandswitch/patchwork-system.git",
     "directory": "core/patchwork"
   },
-  "version": "0.4.0",
+  "version": "0.6.0",
   "author": "Ink & Switch",
   "type": "module",
   "license": "MIT",
@@ -33,23 +33,23 @@
   },
   "dependencies": {
     "@automerge/automerge": "3.3.2",
-    "@automerge/automerge-repo": "2.6.0-subduction.46",
+    "@automerge/automerge-repo": "2.6.0-subduction.47",
     "@automerge/automerge-repo-keyhive": "0.3.0-alpha.sub.8b",
-    "@automerge/automerge-repo-storage-indexeddb": "2.6.0-subduction.46",
+    "@automerge/automerge-repo-storage-indexeddb": "2.6.0-subduction.47",
     "@automerge/automerge-subduction": "0.16.0",
-    "@automerge/vanillajs": "2.6.0-subduction.46",
+    "@automerge/vanillajs": "2.6.0-subduction.47",
     "@types/debug": "^4.1.13",
     "debug": "^4.4.3",
+    "esbuild": "^0.23.1",
     "sharp": "^0.35.3",
     "vite-plugin-wasm": "^3.6.0",
+    "@inkandswitch/patchwork-filesystem": "^0.2.5",
+    "@inkandswitch/patchwork-bootloader": "^0.6.1",
     "@inkandswitch/patchwork-plugins": "^1.2.0",
     "@inkandswitch/patchwork-providers": "^0.5.0",
-    "@inkandswitch/patchwork-elements": "^6.0.0",
-    "@inkandswitch/patchwork-filesystem": "^0.2.5",
-    "@inkandswitch/patchwork-bootloader": "^0.5.4"
+    "@inkandswitch/patchwork-elements": "^6.0.0"
   },
   "devDependencies": {
-    "esbuild": "^0.23.1",
     "rollup": "^4.61.1",
     "vite": "^7.3.5"
   },

package/src/client.d.ts

@@ -12,7 +12,8 @@ import "@inkandswitch/patchwork-elements";
 import "@inkandswitch/patchwork-providers";
 
 declare global {
-  const __SITE_NAME__: string;
+  const __SITE_TITLE__: string;
+  const __STORAGE_PREFIX__: string;
 
   interface ImportMetaEnv {
     /**

package/src/createAccount.ts

@@ -40,7 +40,6 @@ export const createDefaultAccount: AccountCreator<AccountDoc> = async (
   ]);
 
   accountHandle.change((doc) => {
-    doc.frameToolId = "threepane";
     doc.rootFolderUrl = rootFolder.url;
     doc.moduleSettingsUrl = moduleSettings.url;
     doc.contactUrl = contact.url;

package/src/index.ts

@@ -64,7 +64,7 @@ import { createDefaultAccount } from "./createAccount.js";
 
 const log = debug("patchwork:setup");
 
-declare const __SITE_NAME__: string;
+declare const __SITE_TITLE__: string;
 
 declare global {
   interface Window {
@@ -114,9 +114,9 @@ export function setup(options: PatchworkOptions = {}): Promise<Patchwork> {
 export default setup;
 
 async function doSetup(options: PatchworkOptions): Promise<Patchwork> {
-  const siteName =
-    options.name ??
-    (typeof __SITE_NAME__ !== "undefined" ? __SITE_NAME__ : "patchwork");
+  const siteTitle =
+    options.title ??
+    (typeof __SITE_TITLE__ !== "undefined" ? __SITE_TITLE__ : "Patchwork");
   const moduleSources = resolveDefaultModules(options);
   const routing = options.routing ?? "hash";
 
@@ -151,10 +151,7 @@ async function doSetup(options: PatchworkOptions): Promise<Patchwork> {
     });
 
     let workerAdapter = new MessageChannelNetworkAdapter(workerPort);
-    ({ repo, hive, signerIdentity } = await createRepo(
-      siteName,
-      workerAdapter
-    ));
+    ({ repo, hive, signerIdentity } = await createRepo(workerAdapter));
 
     // The worker was recreated with cold state: wire the repo onto the fresh
     // port and drop the adapter stranded on the dead one.
@@ -246,7 +243,8 @@ async function doSetup(options: PatchworkOptions): Promise<Patchwork> {
       rootElement,
       repo,
       accountDocHandle,
-      siteName,
+      siteTitle,
+      frameToolId: options.frameToolId,
     });
   }
 

package/src/repo.ts

@@ -17,6 +17,10 @@ import {
 import { initSync as initSubductionSync } from "@automerge/automerge-subduction/slim";
 import { MemorySigner } from "@automerge/automerge-subduction/slim";
 import setupServiceWorker from "@inkandswitch/patchwork-bootloader";
+import {
+  keyhiveStorageName,
+  storagePrefix,
+} from "@inkandswitch/patchwork-bootloader/storage";
 import type { SignerIdentity } from "./types.js";
 import debug from "debug";
 
@@ -50,7 +54,6 @@ export function initWasm(): Promise<void> {
 }
 
 export async function createRepo(
-  siteName: string,
   workerAdapter: MessageChannelNetworkAdapter
 ): Promise<{
   repo: Repo;
@@ -62,8 +65,8 @@ export async function createRepo(
     initKeyhiveWasm();
     const { hive, repo } = await initializeAutomergeRepoKeyhiveWithRepo({
       createRepo: (repoConfig) => new Repo(repoConfig),
-      storage: new IndexedDBWorkerStorageAdapter(`${siteName}-keyhive`),
-      peerIdSuffix: siteName + Math.random().toString(36).slice(2),
+      storage: new IndexedDBWorkerStorageAdapter(keyhiveStorageName),
+      peerIdSuffix: storagePrefix + Math.random().toString(36).slice(2),
       networkAdapter: workerAdapter,
       automaticArchiveIngestion: true,
       cachingMode: "periodic",
@@ -91,7 +94,8 @@ export async function createRepo(
       return peerId.includes("automerge-worker");
     },
     enableRemoteHeadsGossiping: true,
-    peerId: `${siteName}-tab-${crypto.randomUUID()}` as AutomergeRepo.PeerId,
+    peerId:
+      `${storagePrefix}-tab-${crypto.randomUUID()}` as AutomergeRepo.PeerId,
   });
   const signerIdentity = {
     peerId: signer.peerId().toString(),

package/src/router.ts

@@ -1,6 +1,7 @@
 import {
   isValidAutomergeUrl,
   isValidDocumentId,
+  parseAutomergeUrl,
   stringifyAutomergeUrl,
   type AutomergeUrl,
   type DocHandle,
@@ -23,12 +24,12 @@ import {
 const BIG_PATCHWORK_HASH_REGEX =
   /^(?<title>[^=&?/#]*)--(?<docId>[1-9A-HJ-NP-Za-km-z]+)/;
 
-// The `doc=` value is an automerge URL, kept literal rather than
+// The `doc=` and `draft=` values are automerge URLs, kept literal rather than
 // percent-encoded so links stay readable.
-const RAW_HASH_KEYS = new Set(["doc"]);
+const RAW_HASH_KEYS = new Set(["doc", "draft"]);
 // A stable order means re-serializing the same logical params is
 // byte-identical, avoiding spurious `hashchange` round-trips.
-const HASH_KEY_ORDER = ["doc", "tool", "type", "title", "frame"];
+const HASH_KEY_ORDER = ["doc", "tool", "type", "title", "frame", "draft"];
 
 function serializeHashParams(params: URLSearchParams): string {
   const keys = [...HASH_KEY_ORDER, ...params.keys()];
@@ -64,7 +65,8 @@ export interface RouterParams {
   rootElement: HTMLElement;
   repo: Repo;
   accountDocHandle: DocHandle<AccountDoc>;
-  siteName: string;
+  siteTitle: string;
+  frameToolId?: string;
 }
 
 export interface Router {
@@ -82,7 +84,8 @@ export function createRouter({
   rootElement,
   repo,
   accountDocHandle,
-  siteName,
+  siteTitle,
+  frameToolId,
 }: RouterParams): Router {
   const route = async () => {
     // The first call seeds the root view's tool/doc so it can mount; later
@@ -91,7 +94,10 @@ export function createRouter({
       const params = new URLSearchParams(location.hash.slice(1));
       const frame = params.get("frame");
       const toolId =
-        frame ?? accountDocHandle.doc().frameToolId ?? registeredFrameToolId();
+        frame ??
+        accountDocHandle.doc().frameToolId ??
+        frameToolId ??
+        registeredFrameToolId();
       if (!toolId) {
         console.error("patchwork: no frame tool registered, nothing to mount");
         return;
@@ -166,6 +172,16 @@ export function createRouter({
     // `doc` is the full automerge URL, so heads live inside it and the separate
     // `heads=` param is gone.
     params.delete("heads");
+    // `draft` is doc-scoped (owned by the drafts plugin, opaque here):
+    // navigating to a different document invalidates the selection, while
+    // same-doc navigation (tool switches, heads changes) keeps it.
+    const prevDoc = docParamToUrl(params.get("doc"));
+    if (
+      prevDoc &&
+      parseAutomergeUrl(prevDoc).documentId !== parseAutomergeUrl(url).documentId
+    ) {
+      params.delete("draft");
+    }
     params.set("doc", url);
     for (const [key, value] of [
       ["tool", toolId],
@@ -192,7 +208,7 @@ export function createRouter({
       const docTitle = (datatype.module as DatatypeImplementation).getTitle(
         doc
       );
-      if (docTitle) document.title = `${docTitle} | ${siteName}`;
+      if (docTitle) document.title = `${docTitle} | ${siteTitle}`;
     } catch (e) {
       console.error("Failed to update document title", e);
     }

package/src/site-kit/html.ts

@@ -1,4 +1,4 @@
-import type { PatchworkSiteOptions } from "./options.js";
+import { DEFAULT_TITLE, type PatchworkSiteOptions } from "./options.js";
 import { resolveSyncServers, PRELOAD_WASM_ASSETS } from "./sync-servers.js";
 import { ICON_SPECS } from "./icons.js";
 
@@ -16,7 +16,7 @@ export function escapeHtml(value: string): string {
 
 /** Builds the generated index.html as a plain string — no bundler involved. */
 export function buildHtml(options: PatchworkSiteOptions): string {
-  const title = options.title ?? options.siteName ?? "Patchwork";
+  const title = options.title ?? DEFAULT_TITLE;
   const lang = (options.html && options.html.lang) || "en";
   const entry = options.entry ?? "/src/main.ts";
   const syncServers = resolveSyncServers(options);

package/src/site-kit/manifest.ts

@@ -1,11 +1,11 @@
-import type { PatchworkSiteOptions } from "./options.js";
+import { DEFAULT_TITLE, type PatchworkSiteOptions } from "./options.js";
 import { ICON_SPECS } from "./icons.js";
 
 /** Builds the generated manifest.webmanifest object — no bundler involved. */
 export function buildManifest(
   options: PatchworkSiteOptions
 ): Record<string, unknown> {
-  const title = options.title ?? options.siteName ?? "Patchwork";
+  const title = options.title ?? DEFAULT_TITLE;
   const icons = !options.icons
     ? []
     : ICON_SPECS.filter(

package/src/site-kit/options.ts

@@ -42,10 +42,24 @@ export type PatchworkSyncServersOptions = {
   classic?: string | false;
 } & PatchworkPrimarySyncServerOptions;
 
+export const DEFAULT_TITLE = "Patchwork";
+
 export interface PatchworkSiteOptions {
-  /** -> __SITE_NAME__ define */
-  siteName?: string;
-  /** <title>, apple-mobile-web-app-title, manifest name */
+  /**
+   * Namespace for this site's IndexedDB databases and peer ids
+   * (-> __STORAGE_PREFIX__ define). Defaults to `"patchwork"`. Sites sharing
+   * an origin MUST use distinct prefixes.
+   *
+   * The tab and the shared automerge worker are separate bundles that have to
+   * open the same databases, so this is settable only here, where both of them
+   * receive it. Changing it on an existing site points it at empty storage.
+   */
+  storagePrefix?: string;
+  /**
+   * This site's name: `<title>`, apple-mobile-web-app-title, manifest name,
+   * and — via the __SITE_TITLE__ define — the brand word the router appends to
+   * the document title as `"<doc> | <title>"`. Defaults to `"Patchwork"`.
+   */
   title?: string;
   /** manifest short_name (defaults to title) */
   shortName?: string;

package/src/types.ts

@@ -65,13 +65,25 @@ export interface PatchworkOptions {
   createAccount?: AccountCreator;
 
   /**
-   * Brand word for this site: appended to the document title as
-   * `"<doc> | <name>"` when a document is open (the separator is provided
-   * for you), and used to namespace this site's storage and peer ids.
+   * This site's name, appended to the document title as `"<doc> | <title>"`
+   * when a document is open (the separator is provided for you).
    *
-   * Defaults to the build-time `__SITE_NAME__` define, then `"patchwork"`.
+   * Defaults to the build-time `__SITE_TITLE__` define — the vite plugin's
+   * `title` option, which also names the html `<title>` and the manifest —
+   * then `"Patchwork"`.
    */
-  name?: string;
+  title?: string;
+
+  /**
+   * Id of the tool that frames this site — what mounts in the root view when
+   * the user hasn't chosen one on their account and the URL doesn't name one
+   * via `#frame=`. Must be a tool one of the {@link
+   * PatchworkOptions.packageListURL} sources registers.
+   *
+   * Falls back to the first registered tool tagged `frame-tool`, which with
+   * more than one of them depends on module load order.
+   */
+  frameToolId?: string;
 
   /** DOM id of the `<patchwork-view>` hosting the root tool. Defaults to "root". */
   rootElementId?: string;

package/src/vite/config-plugin.ts

@@ -1,5 +1,7 @@
 import type { Plugin } from "vite";
 import wasm from "vite-plugin-wasm";
+import { DEFAULT_STORAGE_PREFIX } from "@inkandswitch/patchwork-bootloader/storage";
+import { DEFAULT_TITLE } from "../site-kit/options.js";
 import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
 import {
   DEFAULT_SYNC_SERVERS,
@@ -9,7 +11,30 @@ import {
 const CORS_HEADERS = { "Access-Control-Allow-Origin": "*" };
 
 /**
- * Owns envPrefix, define (__SITE_NAME__/sync-server configuration),
+ * The build-time constants both the page bundle and the workers are compiled
+ * against. Values are already JSON — the shape vite's `define` and esbuild's
+ * `define` both take.
+ */
+export function buildDefines(
+  options: PatchworkVitePluginOptions = {}
+): Record<string, string> {
+  const classicSyncServer =
+    options.syncServers && typeof options.syncServers.classic === "string"
+      ? options.syncServers.classic
+      : DEFAULT_SYNC_SERVERS.classic;
+  return {
+    __SYNC_SERVER__: JSON.stringify(resolvePrimarySyncServer(options)),
+    __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
+    __SITE_TITLE__: JSON.stringify(options.title ?? DEFAULT_TITLE),
+    __STORAGE_PREFIX__: JSON.stringify(
+      options.storagePrefix ?? DEFAULT_STORAGE_PREFIX
+    ),
+  };
+}
+
+/**
+ * Owns envPrefix, define (__SITE_TITLE__/__STORAGE_PREFIX__/sync-server
+ * configuration),
  * server/preview CORS defaults, worker format + the wasm plugin, and build
  * defaults (firefox150 target, unminified, sourcemapped) — everything a site
  * used to hand-write in its own vite.config.ts. Each is switched off
@@ -21,22 +46,17 @@ export function configPlugin(
   return {
     name: "@patchwork/config",
     config() {
-      const primarySyncServer = resolvePrimarySyncServer(options);
-      const classicSyncServer =
-        options.syncServers && typeof options.syncServers.classic === "string"
-          ? options.syncServers.classic
-          : DEFAULT_SYNC_SERVERS.classic;
-      const define: Record<string, string> = {
-        __SYNC_SERVER__: JSON.stringify(primarySyncServer),
-        __CLASSIC_SYNC_SERVER__: JSON.stringify(classicSyncServer),
-      };
-      if (options.siteName) {
-        define.__SITE_NAME__ = JSON.stringify(options.siteName);
-      }
-
       return {
         envPrefix: ["VITE_", "PATCHWORK_"],
-        define,
+        define: buildDefines(options),
+        optimizeDeps: {
+          exclude: ["@automerge/automerge-repo-storage-indexeddb"],
+          // Dep pre-bundling runs esbuild directly, outside the plugin
+          // pipeline that applies `define`. Without this the page would fall
+          // back to the built-in storage prefix while the workers used the
+          // configured one, and they have to open the same databases.
+          esbuildOptions: { define: buildDefines(options) },
+        },
         server:
           options.server === false
             ? undefined

package/src/vite/dev-plugin.ts

@@ -0,0 +1,154 @@
+import type { Plugin } from "vite";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import * as esbuild from "esbuild";
+import { wasmAssets } from "@inkandswitch/patchwork-bootloader/externals";
+import type { PatchworkVitePluginOptions } from "./patchwork-plugin.js";
+import { buildDefines } from "./config-plugin.js";
+import { builtins, devDependencyId } from "./importmap-plugin.js";
+import { workers } from "./service-worker-plugin.js";
+
+const PATCHWORK_CSS = "/@inkandswitch/patchwork/global.css";
+const BOOTLOADER_CSS = "/@inkandswitch/patchwork-bootloader/global.css";
+
+// The generated index.html links the stylesheet by bare specifier, which the
+// build resolves and the dev server does not. Serving the two files under
+// these paths, and pointing the link at the first one, covers the gap.
+const stylesheets: Record<string, string> = {
+  [PATCHWORK_CSS]: fileURLToPath(
+    import.meta.resolve("@inkandswitch/patchwork/global.css")
+  ),
+  [BOOTLOADER_CSS]: fileURLToPath(
+    import.meta.resolve("@inkandswitch/patchwork-bootloader/global.css")
+  ),
+};
+
+/**
+ * Workers are `type: "module"` scripts the browser fetches directly, so import
+ * maps don't apply to them and their heavy imports have to resolve to real
+ * URLs. The build rewrites those to the `/packages/...` chunks it emits; here
+ * they become the dev server's own optimized-dep URLs.
+ */
+function externalBuiltins(): esbuild.Plugin {
+  return {
+    name: "patchwork-dev-externals",
+    setup(build) {
+      build.onResolve({ filter: /.*/ }, (args) => {
+        if (!(args.path in builtins)) return null;
+        return {
+          path: `/@id/${devDependencyId(args.path)}`,
+          external: true,
+        };
+      });
+    },
+  };
+}
+
+function workerContexts(
+  options: PatchworkVitePluginOptions
+): Map<string, Promise<esbuild.BuildContext>> {
+  const contexts = new Map<string, Promise<esbuild.BuildContext>>();
+  for (const { specifier, fileName } of workers) {
+    contexts.set(
+      `/${fileName}`,
+      esbuild.context({
+        entryPoints: [fileURLToPath(import.meta.resolve(specifier))],
+        bundle: true,
+        write: false,
+        format: "esm",
+        platform: "browser",
+        target: "firefox115",
+        sourcemap: "inline",
+        define: buildDefines(options),
+        plugins: [externalBuiltins()],
+      })
+    );
+  }
+  return contexts;
+}
+
+export function devPlugin(options: PatchworkVitePluginOptions = {}): Plugin {
+  let serve = false;
+  let contexts: Map<string, Promise<esbuild.BuildContext>> | undefined;
+  const wasm = new Map(
+    wasmAssets().map(({ fileName, path }) => [`/${fileName}`, path])
+  );
+
+  return {
+    name: "@patchwork/dev",
+    configResolved(config) {
+      serve = config.command === "serve";
+    },
+    transformIndexHtml(html) {
+      if (!serve) return html;
+      return html.replace(
+        `href="@inkandswitch/patchwork/global.css"`,
+        `href="${PATCHWORK_CSS}"`
+      );
+    },
+    async buildEnd() {
+      if (!contexts) return;
+      for (const context of contexts.values()) (await context).dispose();
+      contexts = undefined;
+    },
+    configureServer(server) {
+      contexts = workerContexts(options);
+
+      server.middlewares.use(async (request, response, next) => {
+        const pathname = request.url?.split("?")[0] ?? "";
+
+        const stylesheet = stylesheets[pathname];
+        if (stylesheet) {
+          try {
+            const css = await readFile(stylesheet, "utf8");
+            response.setHeader("Content-Type", "text/css");
+            response.setHeader("Cache-Control", "no-cache");
+            response.end(
+              pathname === PATCHWORK_CSS
+                ? css.replace(
+                    `"@inkandswitch/patchwork-bootloader/global.css"`,
+                    `"${BOOTLOADER_CSS}"`
+                  )
+                : css
+            );
+          } catch {
+            next();
+          }
+          return;
+        }
+
+        const binary = wasm.get(pathname);
+        if (binary) {
+          try {
+            response.setHeader("Content-Type", "application/wasm");
+            response.setHeader("Cache-Control", "no-cache");
+            response.end(await readFile(binary));
+          } catch {
+            next();
+          }
+          return;
+        }
+
+        const context = contexts?.get(pathname);
+        if (!context) return next();
+        try {
+          // Rebuilt per request rather than watched: a worker is fetched once
+          // when the browser starts it, and esbuild's incremental rebuild is
+          // cheaper than keeping a watcher per entry.
+          const result = await (await context).rebuild();
+          response.setHeader("Content-Type", "text/javascript");
+          response.setHeader("Cache-Control", "no-cache");
+          response.end(result.outputFiles![0]!.text);
+        } catch (error) {
+          // A worker that fails to build is otherwise a silent 500 in a
+          // context with no console of its own.
+          server.config.logger.error(
+            `[patchwork] failed to bundle ${pathname}: ${error}`
+          );
+          response.statusCode = 500;
+          response.end(`console.error(${JSON.stringify(String(error))})`);
+        }
+      });
+    },
+  };
+}

package/src/vite/importmap-plugin.ts

@@ -65,7 +65,7 @@ function createImportMap(options?: PatchworkVitePluginOptions) {
   return { importmap, builtins };
 }
 
-function devDependencyId(id: string): string {
+export function devDependencyId(id: string): string {
   if (id === "@inkandswitch/patchwork") return id;
   if (id === "@inkandswitch/patchwork-bootloader") {
     return `@inkandswitch/patchwork > ${id}`;

package/src/vite/patchwork-plugin.ts

@@ -3,6 +3,7 @@ import type { Plugin, ServerOptions, PreviewOptions, BuildOptions } from "vite";
 import { importmap } from "./importmap-plugin.js";
 import { serviceworker } from "./service-worker-plugin.js";
 import { configPlugin, wasm } from "./config-plugin.js";
+import { devPlugin } from "./dev-plugin.js";
 import { iconsPlugin } from "./icons.js";
 import { htmlPlugin } from "./html-plugin.js";
 import { manifestPlugin } from "./manifest-plugin.js";
@@ -40,6 +41,7 @@ export default function patchwork(options?: PatchworkVitePluginOptions) {
     netlifyPlugin(options),
     importmap(options),
     serviceworker(),
+    devPlugin(options),
   ].filter((plugin): plugin is Plugin => plugin != null);
 }
 

package/src/vite/service-worker-plugin.ts

@@ -13,7 +13,7 @@ const self = fileURLToPath(import.meta.url);
 // own chunks. Their heavy imports are marked external and resolved to
 // /packages/... URLs (both workers are created with type:"module", so the
 // browser fetches those as regular network requests).
-const workers = [
+export const workers = [
   {
     specifier: "@inkandswitch/patchwork-bootloader/service-worker",
     fileName: "service-worker.js",
@@ -30,11 +30,17 @@ const workers = [
 
 export function serviceworker(): Plugin {
   const entryIds = new Set<string>();
+  let serve = false;
 
   return {
     name: "@patchwork/service-worker",
     enforce: "pre",
+    configResolved(config) {
+      serve = config.command === "serve";
+    },
     async buildStart() {
+      // emitFile throws in serve mode.
+      if (serve) return;
       for (const { specifier, fileName } of workers) {
         const resolved = await this.resolve(specifier, self);
         entryIds.add(resolved!.id);