mokup 2.1.0 → 2.2.0

package/dist/shared/{mokup.i875Kuim.cjs → mokup.CYGG6ENd.cjs}

@@ -246,6 +246,34 @@ function buildManifestData(params) {
   };
 }
 
+const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/mokup.CYGG6ENd.cjs', document.baseURI).href)));
+const mimeTypes = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".ico": "image/x-icon"
+};
+function resolvePlaygroundDist() {
+  const pkgPath = require$1.resolve("@mokup/playground/package.json");
+  return pathe.join(pkgPath, "..", "dist");
+}
+function sendJson(res, data, statusCode = 200) {
+  res.statusCode = statusCode;
+  res.setHeader("Content-Type", "application/json; charset=utf-8");
+  res.end(JSON.stringify(data, null, 2));
+}
+function sendFile(res, content, contentType) {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", contentType);
+  res.end(content);
+}
+
 function normalizePlaygroundPath(value) {
   if (!value) {
     return "/__mokup";
@@ -272,43 +300,16 @@ function resolvePlaygroundRequestPath(base, playgroundPath) {
 }
 function resolvePlaygroundOptions(playground) {
   if (playground === false) {
-    return { enabled: false, path: "/__mokup" };
+    return { enabled: false, path: "/__mokup", build: false };
   }
   if (playground && typeof playground === "object") {
     return {
       enabled: playground.enabled !== false,
-      path: normalizePlaygroundPath(playground.path)
+      path: normalizePlaygroundPath(playground.path),
+      build: playground.build === true
     };
   }
-  return { enabled: true, path: "/__mokup" };
-}
-
-const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/mokup.i875Kuim.cjs', document.baseURI).href)));
-const mimeTypes = {
-  ".html": "text/html; charset=utf-8",
-  ".css": "text/css; charset=utf-8",
-  ".js": "text/javascript; charset=utf-8",
-  ".map": "application/json; charset=utf-8",
-  ".json": "application/json; charset=utf-8",
-  ".svg": "image/svg+xml",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".jpeg": "image/jpeg",
-  ".ico": "image/x-icon"
-};
-function resolvePlaygroundDist() {
-  const pkgPath = require$1.resolve("@mokup/playground/package.json");
-  return pathe.join(pkgPath, "..", "dist");
-}
-function sendJson(res, data, statusCode = 200) {
-  res.statusCode = statusCode;
-  res.setHeader("Content-Type", "application/json; charset=utf-8");
-  res.end(JSON.stringify(data, null, 2));
-}
-function sendFile(res, content, contentType) {
-  res.statusCode = 200;
-  res.setHeader("Content-Type", contentType);
-  res.end(content);
+  return { enabled: true, path: "/__mokup", build: false };
 }
 
 function toPosixPath(value) {
@@ -774,6 +775,7 @@ function resolveSwUnregisterConfig(options, logger) {
 function buildSwScript(params) {
   const { routes, root } = params;
   const runtimeImportPath = params.runtimeImportPath ?? "mokup/runtime";
+  const loggerImportPath = params.loggerImportPath ?? "@mokup/shared/logger";
   const basePaths = params.basePaths ?? [];
   const resolveModulePath = params.resolveModulePath ?? toViteImportPath;
   const { manifest, modules } = buildManifestData({
@@ -782,7 +784,7 @@ function buildSwScript(params) {
     resolveModulePath
   });
   const imports = [
-    "import { createLogger } from '@mokup/shared/logger'",
+    `import { createLogger } from ${JSON.stringify(loggerImportPath)}`,
     `import { createRuntimeApp, handle } from ${JSON.stringify(runtimeImportPath)}`
   ];
   const moduleEntries = [];
@@ -1315,7 +1317,7 @@ function isConfigFile(file) {
   return configExtensions.includes(ext);
 }
 
-const sourceRoot = pathe.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/mokup.i875Kuim.cjs', document.baseURI).href))));
+const sourceRoot = pathe.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/mokup.CYGG6ENd.cjs', document.baseURI).href))));
 const mokupSourceEntry = pathe.resolve(sourceRoot, "../index.ts");
 const mokupViteSourceEntry = pathe.resolve(sourceRoot, "../vite.ts");
 const hasMokupSourceEntry = node_fs.existsSync(mokupSourceEntry);
@@ -1340,7 +1342,7 @@ const workspaceResolvePlugin = createWorkspaceResolvePlugin();
 async function loadModule(file) {
   const ext = pathe.extname(file).toLowerCase();
   if (ext === ".cjs") {
-    const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/mokup.i875Kuim.cjs', document.baseURI).href)));
+    const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/mokup.CYGG6ENd.cjs', document.baseURI).href)));
     delete require$1.cache[file];
     return require$1(file);
   }
@@ -2062,11 +2064,21 @@ exports.createDebouncer = createDebouncer;
 exports.createHonoApp = createHonoApp;
 exports.createMiddleware = createMiddleware;
 exports.createPlaygroundMiddleware = createPlaygroundMiddleware;
+exports.injectPlaygroundSw = injectPlaygroundSw;
 exports.isInDirs = isInDirs;
+exports.normalizePlaygroundPath = normalizePlaygroundPath;
 exports.resolveDirs = resolveDirs;
+exports.resolveGroupRoot = resolveGroupRoot;
+exports.resolveGroups = resolveGroups;
+exports.resolvePlaygroundDist = resolvePlaygroundDist;
 exports.resolvePlaygroundOptions = resolvePlaygroundOptions;
+exports.resolvePlaygroundRequestPath = resolvePlaygroundRequestPath;
 exports.resolveSwConfig = resolveSwConfig;
 exports.resolveSwUnregisterConfig = resolveSwUnregisterConfig;
 exports.scanRoutes = scanRoutes;
 exports.sortRoutes = sortRoutes;
+exports.toPlaygroundConfigFile = toPlaygroundConfigFile;
+exports.toPlaygroundDisabledRoute = toPlaygroundDisabledRoute;
+exports.toPlaygroundIgnoredRoute = toPlaygroundIgnoredRoute;
+exports.toPlaygroundRoute = toPlaygroundRoute;
 exports.toPosix = toPosix;

package/dist/shared/{mokup.Bp9u3JKA.mjs → mokup.ClsvLg8n.mjs}

@@ -243,6 +243,34 @@ function buildManifestData(params) {
   };
 }
 
+const require$1 = createRequire(import.meta.url);
+const mimeTypes = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".ico": "image/x-icon"
+};
+function resolvePlaygroundDist() {
+  const pkgPath = require$1.resolve("@mokup/playground/package.json");
+  return join(pkgPath, "..", "dist");
+}
+function sendJson(res, data, statusCode = 200) {
+  res.statusCode = statusCode;
+  res.setHeader("Content-Type", "application/json; charset=utf-8");
+  res.end(JSON.stringify(data, null, 2));
+}
+function sendFile(res, content, contentType) {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", contentType);
+  res.end(content);
+}
+
 function normalizePlaygroundPath(value) {
   if (!value) {
     return "/__mokup";
@@ -269,43 +297,16 @@ function resolvePlaygroundRequestPath(base, playgroundPath) {
 }
 function resolvePlaygroundOptions(playground) {
   if (playground === false) {
-    return { enabled: false, path: "/__mokup" };
+    return { enabled: false, path: "/__mokup", build: false };
   }
   if (playground && typeof playground === "object") {
     return {
       enabled: playground.enabled !== false,
-      path: normalizePlaygroundPath(playground.path)
+      path: normalizePlaygroundPath(playground.path),
+      build: playground.build === true
     };
   }
-  return { enabled: true, path: "/__mokup" };
-}
-
-const require$1 = createRequire(import.meta.url);
-const mimeTypes = {
-  ".html": "text/html; charset=utf-8",
-  ".css": "text/css; charset=utf-8",
-  ".js": "text/javascript; charset=utf-8",
-  ".map": "application/json; charset=utf-8",
-  ".json": "application/json; charset=utf-8",
-  ".svg": "image/svg+xml",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".jpeg": "image/jpeg",
-  ".ico": "image/x-icon"
-};
-function resolvePlaygroundDist() {
-  const pkgPath = require$1.resolve("@mokup/playground/package.json");
-  return join(pkgPath, "..", "dist");
-}
-function sendJson(res, data, statusCode = 200) {
-  res.statusCode = statusCode;
-  res.setHeader("Content-Type", "application/json; charset=utf-8");
-  res.end(JSON.stringify(data, null, 2));
-}
-function sendFile(res, content, contentType) {
-  res.statusCode = 200;
-  res.setHeader("Content-Type", contentType);
-  res.end(content);
+  return { enabled: true, path: "/__mokup", build: false };
 }
 
 function toPosixPath(value) {
@@ -771,6 +772,7 @@ function resolveSwUnregisterConfig(options, logger) {
 function buildSwScript(params) {
   const { routes, root } = params;
   const runtimeImportPath = params.runtimeImportPath ?? "mokup/runtime";
+  const loggerImportPath = params.loggerImportPath ?? "@mokup/shared/logger";
   const basePaths = params.basePaths ?? [];
   const resolveModulePath = params.resolveModulePath ?? toViteImportPath;
   const { manifest, modules } = buildManifestData({
@@ -779,7 +781,7 @@ function buildSwScript(params) {
     resolveModulePath
   });
   const imports = [
-    "import { createLogger } from '@mokup/shared/logger'",
+    `import { createLogger } from ${JSON.stringify(loggerImportPath)}`,
     `import { createRuntimeApp, handle } from ${JSON.stringify(runtimeImportPath)}`
   ];
   const moduleEntries = [];
@@ -2053,4 +2055,4 @@ async function scanRoutes(params) {
   return sortRoutes(routes);
 }
 
-export { sortRoutes as a, buildSwScript as b, createHonoApp as c, createDebouncer as d, resolvePlaygroundOptions as e, resolveSwConfig as f, resolveSwUnregisterConfig as g, createPlaygroundMiddleware as h, isInDirs as i, createMiddleware as j, buildManifestData as k, resolveDirs as r, scanRoutes as s, toPosix as t };
+export { sortRoutes as a, buildSwScript as b, createHonoApp as c, createDebouncer as d, resolvePlaygroundOptions as e, resolveSwConfig as f, resolveSwUnregisterConfig as g, createPlaygroundMiddleware as h, isInDirs as i, createMiddleware as j, buildManifestData as k, resolvePlaygroundDist as l, injectPlaygroundSw as m, normalizePlaygroundPath as n, resolveGroupRoot as o, resolveGroups as p, resolvePlaygroundRequestPath as q, resolveDirs as r, scanRoutes as s, toPosix as t, toPlaygroundConfigFile as u, toPlaygroundIgnoredRoute as v, toPlaygroundDisabledRoute as w, toPlaygroundRoute as x };

package/dist/vite.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 const process = require('node:process');
-const scanner = require('./shared/mokup.i875Kuim.cjs');
+const scanner = require('./shared/mokup.CYGG6ENd.cjs');
+const node_fs = require('node:fs');
+const pathe = require('@mokup/shared/pathe');
 const logger = require('@mokup/shared/logger');
 const pc = require('picocolors');
 const node_path = require('node:path');
 const chokidar = require('@mokup/shared/chokidar');
-const node_fs = require('node:fs');
 const node_url = require('node:url');
-require('@mokup/shared/pathe');
 require('node:module');
 require('node:buffer');
 require('@mokup/shared/hono');
@@ -64,6 +64,79 @@ function buildBundleModule(params) {
   return lines.join("\n");
 }
 
+function resolvePlaygroundOutDir(outDir, playgroundPath) {
+  const normalized = scanner.normalizePlaygroundPath(playgroundPath);
+  const trimmed = normalized.replace(/^\/+/, "");
+  return trimmed ? pathe.join(outDir, pathe.normalize(trimmed)) : outDir;
+}
+function stripSwLifecycle(html) {
+  return html.replace(
+    /<script[^>]*mokup-sw-lifecycle\.js[^>]*><\/script>\s*/gi,
+    ""
+  );
+}
+async function writeRoutesPayload(params, targetDir) {
+  const baseRoot = scanner.resolveGroupRoot(params.dirs, params.root);
+  const groups = scanner.resolveGroups(params.dirs, baseRoot);
+  const basePath = scanner.resolvePlaygroundRequestPath(params.base, params.playgroundPath);
+  const payload = {
+    basePath,
+    root: baseRoot,
+    count: params.routes.length,
+    groups: groups.map((group) => ({ key: group.key, label: group.label })),
+    routes: params.routes.map((route) => scanner.toPlaygroundRoute(route, baseRoot, groups)),
+    disabled: params.disabledRoutes.map(
+      (route) => scanner.toPlaygroundDisabledRoute(route, baseRoot, groups)
+    ),
+    ignored: params.ignoredRoutes.map(
+      (route) => scanner.toPlaygroundIgnoredRoute(route, baseRoot, groups)
+    ),
+    configs: params.configFiles.map((entry) => scanner.toPlaygroundConfigFile(entry, baseRoot, groups)),
+    disabledConfigs: params.disabledConfigFiles.map(
+      (entry) => scanner.toPlaygroundConfigFile(entry, baseRoot, groups)
+    )
+  };
+  await node_fs.promises.writeFile(
+    pathe.join(targetDir, "routes"),
+    JSON.stringify(payload, null, 2),
+    "utf8"
+  );
+}
+async function updateIndexHtml(targetDir, swScript) {
+  const indexPath = pathe.join(targetDir, "index.html");
+  const html = await node_fs.promises.readFile(indexPath, "utf8");
+  const cleaned = stripSwLifecycle(html);
+  const output = swScript ? scanner.injectPlaygroundSw(cleaned, swScript) : cleaned;
+  await node_fs.promises.writeFile(indexPath, output, "utf8");
+}
+async function removeLegacySwAsset(targetDir) {
+  const legacyFiles = [
+    pathe.join(targetDir, "assets", "mokup-sw-lifecycle.js"),
+    pathe.join(targetDir, "assets", "mokup-sw-lifecycle.js.map")
+  ];
+  await Promise.all(legacyFiles.map((file) => node_fs.promises.rm(file, { force: true })));
+}
+async function writePlaygroundBuild(params) {
+  const distDir = scanner.resolvePlaygroundDist();
+  const targetDir = resolvePlaygroundOutDir(params.outDir, params.playgroundPath);
+  if (targetDir === params.outDir) {
+    params.logger.error("Playground build path resolves to the Vite outDir. Aborting output.");
+    return;
+  }
+  try {
+    await node_fs.promises.stat(distDir);
+  } catch (error) {
+    params.logger.error("Failed to locate playground assets:", error);
+    return;
+  }
+  await node_fs.promises.rm(targetDir, { recursive: true, force: true });
+  await node_fs.promises.mkdir(params.outDir, { recursive: true });
+  await node_fs.promises.cp(distDir, targetDir, { recursive: true });
+  await removeLegacySwAsset(targetDir);
+  await updateIndexHtml(targetDir, params.swScript);
+  await writeRoutesPayload(params, targetDir);
+}
+
 const legacyEntryKeys = [
   "dir",
   "prefix",
@@ -148,6 +221,10 @@ function resolveSwRuntimeImportPath(base) {
   const normalizedBase = normalizeBase(base);
   return `${normalizedBase}@id/mokup/runtime`;
 }
+function resolveSwLoggerImportPath(base) {
+  const normalizedBase = normalizeBase(base);
+  return `${normalizedBase}@id/@mokup/shared/logger`;
+}
 
 function buildRouteSignature(routes, disabledRoutes, ignoredRoutes, configFiles, disabledConfigFiles) {
   return routes.map(
@@ -316,6 +393,47 @@ function addMiddlewareFirst(server, middleware) {
   server.middlewares.use(middleware);
 }
 
+const portPattern = /:(?<port>\d{2,5})/g;
+const escapeCode = 27;
+function stripAnsi(value) {
+  let output = "";
+  for (let index = 0; index < value.length; index += 1) {
+    const code = value.charCodeAt(index);
+    if (code === escapeCode && value[index + 1] === "[") {
+      index += 1;
+      while (index < value.length && value[index] !== "m") {
+        index += 1;
+      }
+      continue;
+    }
+    output += value[index];
+  }
+  return output;
+}
+function formatOutputLine(line, options) {
+  const { arrowToken, formattedArrow, labels, formatLabel, formatPort } = options;
+  let output = formattedArrow ? line.replaceAll(arrowToken, formattedArrow) : line;
+  if (labels && formatLabel) {
+    for (const label of labels) {
+      output = output.replaceAll(label, formatLabel(label));
+    }
+  }
+  if (formatPort) {
+    output = output.replace(portPattern, (_match, port) => `:${formatPort(port)}`);
+  }
+  return output;
+}
+
+const arrowToken = "\u279C";
+const playgroundLabel = "Mokup Playground";
+const coloredArrow = pc__default.green(arrowToken);
+const formatOptions = {
+  arrowToken,
+  formattedArrow: coloredArrow,
+  labels: [playgroundLabel],
+  formatLabel: pc__default.bold,
+  formatPort: pc__default.bold
+};
 function patchPlaygroundPrintUrls(server, playgroundPath) {
   const originalPrintUrls = server.printUrls.bind(server);
   const patchPrintUrls = () => {
@@ -340,18 +458,22 @@ function patchPlaygroundPrintUrls(server, playgroundPath) {
     const localUrl = server.resolvedUrls?.local?.[0];
     const outputUrl = formatPlaygroundUrl(localUrl, playgroundPath);
     const coloredUrl = pc__default.magenta(outputUrl);
-    const playgroundLine = `  \u279C  Mokup Playground: ${coloredUrl}`;
-    const ansiEscape = "\x1B";
-    const ansiPattern = new RegExp(`${ansiEscape}\\[[0-9;]*m`, "g");
-    const stripAnsi = (value) => value.replace(ansiPattern, "");
+    const playgroundLine = `  ${arrowToken}  ${playgroundLabel}: ${coloredUrl}`;
+    const arrowPrefix = `  ${arrowToken}  `;
     const findIndex = (needle) => lines.findIndex((args) => stripAnsi(args[0]).includes(needle));
-    const networkIndex = findIndex("  \u279C  Network:");
-    const localIndex = findIndex("  \u279C  Local:");
+    const networkIndex = findIndex(`${arrowPrefix}Network:`);
+    const localIndex = findIndex(`${arrowPrefix}Local:`);
     const insertIndex = networkIndex >= 0 ? networkIndex + 1 : localIndex >= 0 ? localIndex + 1 : lines.length;
     const outputLines = lines.slice();
     outputLines.splice(insertIndex, 0, [playgroundLine]);
     for (const args of outputLines) {
-      originalInfo(...args);
+      if (typeof args[0] === "string") {
+        const nextArgs = args.slice();
+        nextArgs[0] = formatOutputLine(nextArgs[0], formatOptions);
+        originalInfo(...nextArgs);
+      } else {
+        originalInfo(...args);
+      }
     }
   };
   Object.defineProperty(server, "printUrls", {
@@ -476,6 +598,7 @@ async function configureDevServer(params) {
           routes: state.swRoutes,
           root,
           runtimeImportPath: resolveSwRuntimeImportPath(base),
+          loggerImportPath: resolveSwLoggerImportPath(base),
           basePaths: swConfig?.basePaths ?? []
         });
         res.statusCode = 200;
@@ -564,17 +687,35 @@ async function configurePreviewServer(params) {
 }
 
 const swModuleCandidates = [
-  new URL("../../sw.ts", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('vite.cjs', document.baseURI).href))),
-  new URL("../../sw.js", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('vite.cjs', document.baseURI).href)))
+  "dist/sw.mjs",
+  "dist/sw.js",
+  "src/sw.ts",
+  "src/sw.js"
 ];
+function resolvePackageRoot() {
+  const moduleDir = node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('vite.cjs', document.baseURI).href))));
+  let current = moduleDir;
+  for (let index = 0; index < 6; index += 1) {
+    if (node_fs.existsSync(node_path.resolve(current, "package.json"))) {
+      return current;
+    }
+    const parent = node_path.dirname(current);
+    if (parent === current) {
+      break;
+    }
+    current = parent;
+  }
+  return moduleDir;
+}
 const localSwModulePath = (() => {
+  const packageRoot = resolvePackageRoot();
   for (const candidate of swModuleCandidates) {
-    const filePath = node_url.fileURLToPath(candidate);
+    const filePath = node_path.resolve(packageRoot, candidate);
     if (node_fs.existsSync(filePath)) {
       return filePath;
     }
   }
-  return node_url.fileURLToPath(swModuleCandidates[0] ?? new URL("../../sw.ts", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('vite.cjs', document.baseURI).href))));
+  return node_path.resolve(packageRoot, "src/sw.ts");
 })();
 async function resolveSwModuleImport(context) {
   const resolved = await context.resolve("mokup/sw");
@@ -628,12 +769,102 @@ function buildSwLifecycleScript(params) {
     "})()"
   ].join("\n");
 }
+function buildSwLifecycleInlineScript(params) {
+  const {
+    swConfig,
+    unregisterConfig,
+    hasSwEntries,
+    hasSwRoutes,
+    resolveRequestPath,
+    resolveRegisterScope
+  } = params;
+  const shouldUnregister = unregisterConfig.unregister === true || !hasSwEntries;
+  if (shouldUnregister) {
+    const path2 = resolveRequestPath(unregisterConfig.path);
+    const scope2 = resolveRegisterScope(unregisterConfig.scope);
+    return [
+      "(async () => {",
+      "  if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {",
+      "    return",
+      "  }",
+      `  const path = ${JSON.stringify(path2)}`,
+      `  const scope = ${JSON.stringify(scope2)}`,
+      "  const origin = window.location.origin",
+      "  const normalizeScope = (value) => {",
+      "    const url = new URL(value, origin)",
+      "    if (!url.pathname.endsWith('/')) {",
+      "      url.pathname = url.pathname + '/'",
+      "    }",
+      "    return url.href",
+      "  }",
+      "  const pathUrl = new URL(path, origin)",
+      "  const scopeUrl = normalizeScope(scope)",
+      "  const matchesScript = (scriptUrl) => {",
+      "    if (!scriptUrl) {",
+      "      return false",
+      "    }",
+      "    try {",
+      "      const parsed = new URL(scriptUrl)",
+      "      return parsed.origin === origin && parsed.pathname === pathUrl.pathname",
+      "    }",
+      "    catch {",
+      "      return false",
+      "    }",
+      "  }",
+      "  try {",
+      "    const registrations = await navigator.serviceWorker.getRegistrations()",
+      "    for (const registration of registrations) {",
+      "      if (registration.scope !== scopeUrl) {",
+      "        continue",
+      "      }",
+      "      const scriptUrls = [",
+      "        registration.active?.scriptURL,",
+      "        registration.waiting?.scriptURL,",
+      "        registration.installing?.scriptURL,",
+      "      ]",
+      "      if (scriptUrls.some(matchesScript)) {",
+      "        await registration.unregister()",
+      "      }",
+      "    }",
+      "  }",
+      "  catch (error) {",
+      "    console.warn('Failed to unregister service worker:', error)",
+      "  }",
+      "})()"
+    ].join("\n");
+  }
+  if (!swConfig || swConfig.register === false) {
+    return null;
+  }
+  if (!hasSwRoutes) {
+    return null;
+  }
+  const path = resolveRequestPath(swConfig.path);
+  const scope = resolveRegisterScope(swConfig.scope);
+  return [
+    "(async () => {",
+    "  if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {",
+    "    return",
+    "  }",
+    `  const path = ${JSON.stringify(path)}`,
+    `  const scope = ${JSON.stringify(scope)}`,
+    "  try {",
+    "    await navigator.serviceWorker.register(path, { type: 'module', scope })",
+    "  }",
+    "  catch (error) {",
+    "    console.warn('Failed to register service worker:', error)",
+    "  }",
+    "})()"
+  ].join("\n");
+}
 
 function createMokupPlugin(options = {}) {
   let root = process.cwd();
   let base = "/";
   let command = "serve";
   let assetsDir = "assets";
+  let outDir = "dist";
+  let isSsrBuild = false;
   const state = {
     routes: [],
     serverRoutes: [],
@@ -852,6 +1083,8 @@ function createMokupPlugin(options = {}) {
       base = config.base ?? "/";
       command = config.command;
       assetsDir = config.build.assetsDir ?? "assets";
+      outDir = config.build.outDir ?? "dist";
+      isSsrBuild = !!config.build.ssr;
     },
     async configureServer(server) {
       currentServer = server;
@@ -891,9 +1124,35 @@ function createMokupPlugin(options = {}) {
         previewWatcher = null;
       });
     },
-    closeBundle() {
+    async closeBundle() {
       previewWatcher?.close();
       previewWatcher = null;
+      if (command !== "build" || isSsrBuild || !playgroundConfig.enabled || playgroundConfig.build !== true) {
+        return;
+      }
+      await refreshRoutes();
+      const swScript = buildSwLifecycleInlineScript({
+        swConfig,
+        unregisterConfig,
+        hasSwEntries,
+        hasSwRoutes: hasSwRoutes(),
+        resolveRequestPath: resolveSwRequestPath,
+        resolveRegisterScope: resolveSwRegisterScope
+      });
+      await writePlaygroundBuild({
+        outDir,
+        base,
+        playgroundPath: playgroundConfig.path,
+        root,
+        routes: state.routes,
+        disabledRoutes: state.disabledRoutes,
+        ignoredRoutes: state.ignoredRoutes,
+        configFiles: state.configFiles,
+        disabledConfigFiles: state.disabledConfigFiles,
+        dirs: resolveAllDirs(),
+        swScript,
+        logger: logger$1
+      });
     }
   };
 }

package/dist/vite.mjs

@@ -1,12 +1,12 @@
 import { cwd } from 'node:process';
-import { k as buildManifestData, r as resolveDirs, s as scanRoutes, a as sortRoutes, c as createHonoApp, i as isInDirs, d as createDebouncer, b as buildSwScript, j as createMiddleware, e as resolvePlaygroundOptions, f as resolveSwConfig, g as resolveSwUnregisterConfig, h as createPlaygroundMiddleware } from './shared/mokup.Bp9u3JKA.mjs';
+import { k as buildManifestData, l as resolvePlaygroundDist, n as normalizePlaygroundPath, m as injectPlaygroundSw, o as resolveGroupRoot, p as resolveGroups, q as resolvePlaygroundRequestPath, u as toPlaygroundConfigFile, v as toPlaygroundIgnoredRoute, w as toPlaygroundDisabledRoute, x as toPlaygroundRoute, r as resolveDirs, s as scanRoutes, a as sortRoutes, c as createHonoApp, i as isInDirs, d as createDebouncer, b as buildSwScript, j as createMiddleware, e as resolvePlaygroundOptions, f as resolveSwConfig, g as resolveSwUnregisterConfig, h as createPlaygroundMiddleware } from './shared/mokup.ClsvLg8n.mjs';
+import { promises, existsSync } from 'node:fs';
+import { join, normalize } from '@mokup/shared/pathe';
 import { createLogger } from '@mokup/shared/logger';
 import pc from 'picocolors';
-import { isAbsolute, resolve } from 'node:path';
+import { isAbsolute, resolve, dirname } from 'node:path';
 import chokidar from '@mokup/shared/chokidar';
-import { existsSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
-import '@mokup/shared/pathe';
 import 'node:module';
 import 'node:buffer';
 import '@mokup/shared/hono';
@@ -56,6 +56,79 @@ function buildBundleModule(params) {
   return lines.join("\n");
 }
 
+function resolvePlaygroundOutDir(outDir, playgroundPath) {
+  const normalized = normalizePlaygroundPath(playgroundPath);
+  const trimmed = normalized.replace(/^\/+/, "");
+  return trimmed ? join(outDir, normalize(trimmed)) : outDir;
+}
+function stripSwLifecycle(html) {
+  return html.replace(
+    /<script[^>]*mokup-sw-lifecycle\.js[^>]*><\/script>\s*/gi,
+    ""
+  );
+}
+async function writeRoutesPayload(params, targetDir) {
+  const baseRoot = resolveGroupRoot(params.dirs, params.root);
+  const groups = resolveGroups(params.dirs, baseRoot);
+  const basePath = resolvePlaygroundRequestPath(params.base, params.playgroundPath);
+  const payload = {
+    basePath,
+    root: baseRoot,
+    count: params.routes.length,
+    groups: groups.map((group) => ({ key: group.key, label: group.label })),
+    routes: params.routes.map((route) => toPlaygroundRoute(route, baseRoot, groups)),
+    disabled: params.disabledRoutes.map(
+      (route) => toPlaygroundDisabledRoute(route, baseRoot, groups)
+    ),
+    ignored: params.ignoredRoutes.map(
+      (route) => toPlaygroundIgnoredRoute(route, baseRoot, groups)
+    ),
+    configs: params.configFiles.map((entry) => toPlaygroundConfigFile(entry, baseRoot, groups)),
+    disabledConfigs: params.disabledConfigFiles.map(
+      (entry) => toPlaygroundConfigFile(entry, baseRoot, groups)
+    )
+  };
+  await promises.writeFile(
+    join(targetDir, "routes"),
+    JSON.stringify(payload, null, 2),
+    "utf8"
+  );
+}
+async function updateIndexHtml(targetDir, swScript) {
+  const indexPath = join(targetDir, "index.html");
+  const html = await promises.readFile(indexPath, "utf8");
+  const cleaned = stripSwLifecycle(html);
+  const output = swScript ? injectPlaygroundSw(cleaned, swScript) : cleaned;
+  await promises.writeFile(indexPath, output, "utf8");
+}
+async function removeLegacySwAsset(targetDir) {
+  const legacyFiles = [
+    join(targetDir, "assets", "mokup-sw-lifecycle.js"),
+    join(targetDir, "assets", "mokup-sw-lifecycle.js.map")
+  ];
+  await Promise.all(legacyFiles.map((file) => promises.rm(file, { force: true })));
+}
+async function writePlaygroundBuild(params) {
+  const distDir = resolvePlaygroundDist();
+  const targetDir = resolvePlaygroundOutDir(params.outDir, params.playgroundPath);
+  if (targetDir === params.outDir) {
+    params.logger.error("Playground build path resolves to the Vite outDir. Aborting output.");
+    return;
+  }
+  try {
+    await promises.stat(distDir);
+  } catch (error) {
+    params.logger.error("Failed to locate playground assets:", error);
+    return;
+  }
+  await promises.rm(targetDir, { recursive: true, force: true });
+  await promises.mkdir(params.outDir, { recursive: true });
+  await promises.cp(distDir, targetDir, { recursive: true });
+  await removeLegacySwAsset(targetDir);
+  await updateIndexHtml(targetDir, params.swScript);
+  await writeRoutesPayload(params, targetDir);
+}
+
 const legacyEntryKeys = [
   "dir",
   "prefix",
@@ -140,6 +213,10 @@ function resolveSwRuntimeImportPath(base) {
   const normalizedBase = normalizeBase(base);
   return `${normalizedBase}@id/mokup/runtime`;
 }
+function resolveSwLoggerImportPath(base) {
+  const normalizedBase = normalizeBase(base);
+  return `${normalizedBase}@id/@mokup/shared/logger`;
+}
 
 function buildRouteSignature(routes, disabledRoutes, ignoredRoutes, configFiles, disabledConfigFiles) {
   return routes.map(
@@ -308,6 +385,47 @@ function addMiddlewareFirst(server, middleware) {
   server.middlewares.use(middleware);
 }
 
+const portPattern = /:(?<port>\d{2,5})/g;
+const escapeCode = 27;
+function stripAnsi(value) {
+  let output = "";
+  for (let index = 0; index < value.length; index += 1) {
+    const code = value.charCodeAt(index);
+    if (code === escapeCode && value[index + 1] === "[") {
+      index += 1;
+      while (index < value.length && value[index] !== "m") {
+        index += 1;
+      }
+      continue;
+    }
+    output += value[index];
+  }
+  return output;
+}
+function formatOutputLine(line, options) {
+  const { arrowToken, formattedArrow, labels, formatLabel, formatPort } = options;
+  let output = formattedArrow ? line.replaceAll(arrowToken, formattedArrow) : line;
+  if (labels && formatLabel) {
+    for (const label of labels) {
+      output = output.replaceAll(label, formatLabel(label));
+    }
+  }
+  if (formatPort) {
+    output = output.replace(portPattern, (_match, port) => `:${formatPort(port)}`);
+  }
+  return output;
+}
+
+const arrowToken = "\u279C";
+const playgroundLabel = "Mokup Playground";
+const coloredArrow = pc.green(arrowToken);
+const formatOptions = {
+  arrowToken,
+  formattedArrow: coloredArrow,
+  labels: [playgroundLabel],
+  formatLabel: pc.bold,
+  formatPort: pc.bold
+};
 function patchPlaygroundPrintUrls(server, playgroundPath) {
   const originalPrintUrls = server.printUrls.bind(server);
   const patchPrintUrls = () => {
@@ -332,18 +450,22 @@ function patchPlaygroundPrintUrls(server, playgroundPath) {
     const localUrl = server.resolvedUrls?.local?.[0];
     const outputUrl = formatPlaygroundUrl(localUrl, playgroundPath);
     const coloredUrl = pc.magenta(outputUrl);
-    const playgroundLine = `  \u279C  Mokup Playground: ${coloredUrl}`;
-    const ansiEscape = "\x1B";
-    const ansiPattern = new RegExp(`${ansiEscape}\\[[0-9;]*m`, "g");
-    const stripAnsi = (value) => value.replace(ansiPattern, "");
+    const playgroundLine = `  ${arrowToken}  ${playgroundLabel}: ${coloredUrl}`;
+    const arrowPrefix = `  ${arrowToken}  `;
     const findIndex = (needle) => lines.findIndex((args) => stripAnsi(args[0]).includes(needle));
-    const networkIndex = findIndex("  \u279C  Network:");
-    const localIndex = findIndex("  \u279C  Local:");
+    const networkIndex = findIndex(`${arrowPrefix}Network:`);
+    const localIndex = findIndex(`${arrowPrefix}Local:`);
     const insertIndex = networkIndex >= 0 ? networkIndex + 1 : localIndex >= 0 ? localIndex + 1 : lines.length;
     const outputLines = lines.slice();
     outputLines.splice(insertIndex, 0, [playgroundLine]);
     for (const args of outputLines) {
-      originalInfo(...args);
+      if (typeof args[0] === "string") {
+        const nextArgs = args.slice();
+        nextArgs[0] = formatOutputLine(nextArgs[0], formatOptions);
+        originalInfo(...nextArgs);
+      } else {
+        originalInfo(...args);
+      }
     }
   };
   Object.defineProperty(server, "printUrls", {
@@ -468,6 +590,7 @@ async function configureDevServer(params) {
           routes: state.swRoutes,
           root,
           runtimeImportPath: resolveSwRuntimeImportPath(base),
+          loggerImportPath: resolveSwLoggerImportPath(base),
           basePaths: swConfig?.basePaths ?? []
         });
         res.statusCode = 200;
@@ -556,17 +679,35 @@ async function configurePreviewServer(params) {
 }
 
 const swModuleCandidates = [
-  new URL("../../sw.ts", import.meta.url),
-  new URL("../../sw.js", import.meta.url)
+  "dist/sw.mjs",
+  "dist/sw.js",
+  "src/sw.ts",
+  "src/sw.js"
 ];
+function resolvePackageRoot() {
+  const moduleDir = dirname(fileURLToPath(import.meta.url));
+  let current = moduleDir;
+  for (let index = 0; index < 6; index += 1) {
+    if (existsSync(resolve(current, "package.json"))) {
+      return current;
+    }
+    const parent = dirname(current);
+    if (parent === current) {
+      break;
+    }
+    current = parent;
+  }
+  return moduleDir;
+}
 const localSwModulePath = (() => {
+  const packageRoot = resolvePackageRoot();
   for (const candidate of swModuleCandidates) {
-    const filePath = fileURLToPath(candidate);
+    const filePath = resolve(packageRoot, candidate);
     if (existsSync(filePath)) {
       return filePath;
     }
   }
-  return fileURLToPath(swModuleCandidates[0] ?? new URL("../../sw.ts", import.meta.url));
+  return resolve(packageRoot, "src/sw.ts");
 })();
 async function resolveSwModuleImport(context) {
   const resolved = await context.resolve("mokup/sw");
@@ -620,12 +761,102 @@ function buildSwLifecycleScript(params) {
     "})()"
   ].join("\n");
 }
+function buildSwLifecycleInlineScript(params) {
+  const {
+    swConfig,
+    unregisterConfig,
+    hasSwEntries,
+    hasSwRoutes,
+    resolveRequestPath,
+    resolveRegisterScope
+  } = params;
+  const shouldUnregister = unregisterConfig.unregister === true || !hasSwEntries;
+  if (shouldUnregister) {
+    const path2 = resolveRequestPath(unregisterConfig.path);
+    const scope2 = resolveRegisterScope(unregisterConfig.scope);
+    return [
+      "(async () => {",
+      "  if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {",
+      "    return",
+      "  }",
+      `  const path = ${JSON.stringify(path2)}`,
+      `  const scope = ${JSON.stringify(scope2)}`,
+      "  const origin = window.location.origin",
+      "  const normalizeScope = (value) => {",
+      "    const url = new URL(value, origin)",
+      "    if (!url.pathname.endsWith('/')) {",
+      "      url.pathname = url.pathname + '/'",
+      "    }",
+      "    return url.href",
+      "  }",
+      "  const pathUrl = new URL(path, origin)",
+      "  const scopeUrl = normalizeScope(scope)",
+      "  const matchesScript = (scriptUrl) => {",
+      "    if (!scriptUrl) {",
+      "      return false",
+      "    }",
+      "    try {",
+      "      const parsed = new URL(scriptUrl)",
+      "      return parsed.origin === origin && parsed.pathname === pathUrl.pathname",
+      "    }",
+      "    catch {",
+      "      return false",
+      "    }",
+      "  }",
+      "  try {",
+      "    const registrations = await navigator.serviceWorker.getRegistrations()",
+      "    for (const registration of registrations) {",
+      "      if (registration.scope !== scopeUrl) {",
+      "        continue",
+      "      }",
+      "      const scriptUrls = [",
+      "        registration.active?.scriptURL,",
+      "        registration.waiting?.scriptURL,",
+      "        registration.installing?.scriptURL,",
+      "      ]",
+      "      if (scriptUrls.some(matchesScript)) {",
+      "        await registration.unregister()",
+      "      }",
+      "    }",
+      "  }",
+      "  catch (error) {",
+      "    console.warn('Failed to unregister service worker:', error)",
+      "  }",
+      "})()"
+    ].join("\n");
+  }
+  if (!swConfig || swConfig.register === false) {
+    return null;
+  }
+  if (!hasSwRoutes) {
+    return null;
+  }
+  const path = resolveRequestPath(swConfig.path);
+  const scope = resolveRegisterScope(swConfig.scope);
+  return [
+    "(async () => {",
+    "  if (typeof window === 'undefined' || !('serviceWorker' in navigator)) {",
+    "    return",
+    "  }",
+    `  const path = ${JSON.stringify(path)}`,
+    `  const scope = ${JSON.stringify(scope)}`,
+    "  try {",
+    "    await navigator.serviceWorker.register(path, { type: 'module', scope })",
+    "  }",
+    "  catch (error) {",
+    "    console.warn('Failed to register service worker:', error)",
+    "  }",
+    "})()"
+  ].join("\n");
+}
 
 function createMokupPlugin(options = {}) {
   let root = cwd();
   let base = "/";
   let command = "serve";
   let assetsDir = "assets";
+  let outDir = "dist";
+  let isSsrBuild = false;
   const state = {
     routes: [],
     serverRoutes: [],
@@ -844,6 +1075,8 @@ function createMokupPlugin(options = {}) {
       base = config.base ?? "/";
       command = config.command;
       assetsDir = config.build.assetsDir ?? "assets";
+      outDir = config.build.outDir ?? "dist";
+      isSsrBuild = !!config.build.ssr;
     },
     async configureServer(server) {
       currentServer = server;
@@ -883,9 +1116,35 @@ function createMokupPlugin(options = {}) {
         previewWatcher = null;
       });
     },
-    closeBundle() {
+    async closeBundle() {
       previewWatcher?.close();
       previewWatcher = null;
+      if (command !== "build" || isSsrBuild || !playgroundConfig.enabled || playgroundConfig.build !== true) {
+        return;
+      }
+      await refreshRoutes();
+      const swScript = buildSwLifecycleInlineScript({
+        swConfig,
+        unregisterConfig,
+        hasSwEntries,
+        hasSwRoutes: hasSwRoutes(),
+        resolveRequestPath: resolveSwRequestPath,
+        resolveRegisterScope: resolveSwRegisterScope
+      });
+      await writePlaygroundBuild({
+        outDir,
+        base,
+        playgroundPath: playgroundConfig.path,
+        root,
+        routes: state.routes,
+        disabledRoutes: state.disabledRoutes,
+        ignoredRoutes: state.ignoredRoutes,
+        configFiles: state.configFiles,
+        disabledConfigFiles: state.disabledConfigFiles,
+        dirs: resolveAllDirs(),
+        swScript,
+        logger
+      });
     }
   };
 }

package/dist/webpack.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 const process = require('node:process');
-const scanner = require('./shared/mokup.i875Kuim.cjs');
+const scanner = require('./shared/mokup.CYGG6ENd.cjs');
+require('node:fs');
+const pathe = require('@mokup/shared/pathe');
 const logger = require('@mokup/shared/logger');
 const esbuild = require('@mokup/shared/esbuild');
 const node_module = require('node:module');
-const pathe = require('@mokup/shared/pathe');
 const chokidar = require('@mokup/shared/chokidar');
-require('node:fs');
 require('node:buffer');
 require('@mokup/shared/hono');
 require('node:url');

package/dist/webpack.mjs

@@ -1,11 +1,11 @@
 import { cwd } from 'node:process';
-import { b as buildSwScript, t as toPosix, r as resolveDirs, s as scanRoutes, a as sortRoutes, c as createHonoApp, i as isInDirs, d as createDebouncer, e as resolvePlaygroundOptions, f as resolveSwConfig, g as resolveSwUnregisterConfig, h as createPlaygroundMiddleware, j as createMiddleware } from './shared/mokup.Bp9u3JKA.mjs';
+import { b as buildSwScript, t as toPosix, r as resolveDirs, s as scanRoutes, a as sortRoutes, c as createHonoApp, i as isInDirs, d as createDebouncer, e as resolvePlaygroundOptions, f as resolveSwConfig, g as resolveSwUnregisterConfig, h as createPlaygroundMiddleware, j as createMiddleware } from './shared/mokup.ClsvLg8n.mjs';
+import 'node:fs';
+import { isAbsolute, resolve } from '@mokup/shared/pathe';
 import { createLogger } from '@mokup/shared/logger';
 import { build } from '@mokup/shared/esbuild';
 import { createRequire } from 'node:module';
-import { isAbsolute, resolve } from '@mokup/shared/pathe';
 import chokidar from '@mokup/shared/chokidar';
-import 'node:fs';
 import 'node:buffer';
 import '@mokup/shared/hono';
 import 'node:url';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mokup",
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Mock utilities and Vite plugin for mokup.",
   "license": "MIT",
   "homepage": "https://mokup.icebreaker.top",
@@ -92,11 +92,11 @@
   },
   "dependencies": {
     "picocolors": "^1.1.1",
-    "@mokup/cli": "1.0.6",
-    "@mokup/playground": "0.0.11",
-    "@mokup/runtime": "1.0.3",
-    "@mokup/server": "1.1.3",
-    "@mokup/shared": "1.0.2"
+    "@mokup/cli": "1.0.8",
+    "@mokup/playground": "0.0.13",
+    "@mokup/runtime": "1.0.4",
+    "@mokup/server": "1.1.5",
+    "@mokup/shared": "1.1.0"
   },
   "devDependencies": {
     "@types/node": "^25.0.10",