kss-modern 1.2.0-beta.1 → 1.2.0-beta.3

package/dist/node/lib/index.mjs

@@ -1,23 +1,32 @@
 import path from 'node:path';
+import { performance } from 'node:perf_hooks';
 import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 import fs from 'fs-extra';
 import { glob } from 'tinyglobby';
-import { l as logger, s as sanitizeSpecialCharacters, I as INSERT_VITE_PUG_TAG_RE, P as PUG_SRC_RE, c as compileMarkup, p as pugErrorFile, a as sectionSanitizeId, e as ensureStartingSlash, g as generateId, r as replaceWrapperContent } from '../shared/kss-modern.C3thzyxO.mjs';
-export { b as createLogger } from '../shared/kss-modern.C3thzyxO.mjs';
+import { l as logger, s as sanitizeSpecialCharacters, I as INSERT_VITE_PUG_TAG_RE, P as PUG_SRC_RE, a as PUG_ERROR_OVERLAY_TAG, c as compileMarkup, p as pugErrorFile, b as sectionSanitizeId, d as stripPugErrorOverlay, e as ensureStartingSlash, g as generateId, r as replaceWrapperContent } from '../shared/kss-modern.o1Fp758z.mjs';
+export { f as createLogger } from '../shared/kss-modern.o1Fp758z.mjs';
+import htmlLang from '@shikijs/langs/html';
+import markdownLang from '@shikijs/langs/markdown';
+import scssLang from '@shikijs/langs/scss';
+import shellscriptLang from '@shikijs/langs/shellscript';
+import typescriptLang from '@shikijs/langs/typescript';
 import { fromAsyncCodeToHtml } from '@shikijs/markdown-it/async';
+import auroraX from '@shikijs/themes/aurora-x';
+import githubLightDefault from '@shikijs/themes/github-light-default';
 import MarkdownItAsync from 'markdown-it-async';
-import { codeToHtml } from 'shiki';
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 import os from 'node:os';
 import { Worker } from 'node:worker_threads';
 import fs$1 from 'node:fs/promises';
 import { objectEntries } from '@antfu/utils';
 import { readFileSync } from 'node:fs';
 import chokidar from 'chokidar';
-import '@biomejs/js-api';
 import 'pug';
 import 'consola';
 import 'consola/utils';
+import 'pug-load';
 
 const HEX_COLOR_RE = /^#[0-9A-F]{6}$/i;
 function isValidHexColor(hexCode) {
@@ -349,6 +358,20 @@ function markdownItComponent(md, options) {
 }
 
 let md;
+let highlighter;
+let loadedLanguages;
+async function highlightCodeToHtml(code, options) {
+  if (!highlighter) {
+    highlighter = await createHighlighterCore({
+      themes: [githubLightDefault, auroraX],
+      langs: [htmlLang, scssLang, typescriptLang, shellscriptLang, markdownLang],
+      engine: createJavaScriptRegexEngine()
+    });
+    loadedLanguages = new Set(highlighter.getLoadedLanguages());
+  }
+  const lang = loadedLanguages.has(options.lang) ? options.lang : "text";
+  return highlighter.codeToHtml(code, { ...options, lang });
+}
 function shiftHeadingLevels(markdownContent, rootHeadingLevel) {
   const getHasHeadingLevel = (level) => new RegExp(`^#{${level}} `, "m").test(markdownContent);
   const shiftDown = (shiftAmount) => {
@@ -379,7 +402,7 @@ async function parseMarkdown(data) {
     });
     md.use(
       fromAsyncCodeToHtml(
-        codeToHtml,
+        highlightCodeToHtml,
         {
           themes: {
             light: "github-light-default",
@@ -998,45 +1021,116 @@ class PugDependencyGraph {
   }
 }
 
-function renderPugErrorOverlay(error) {
+function renderPugErrorOverlay(error, lastHtml = "") {
   const id = escape(error.id);
-  const file = error.file ? escape(error.file) : "";
-  const message = escape(error.message);
-  return `
-<div
-  role="alert"
-  style="box-sizing:border-box;width:100%;margin:0;padding:16px 18px;border:1px solid #f43f5e59;border-radius:12px;background:#1f1f23;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#e4e4e7;line-height:1.5;text-align:left;"
->
-  <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#f43f5e" style="width:18px;height:18px;flex:none;" aria-hidden="true">
-      <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
-    </svg>
-    <span style="font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#fb7185;">Pug compile error</span>
-  </div>
-  <h1 style="margin:0;font-size:16px;font-weight:600;color:#fafafa;">Section <code style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f43f5e1a;border-radius:5px;padding:1px 7px;color:#fda4af;">${id}</code> failed to compile</h1>
-  ${file ? `<p style="margin:8px 0 0;font-size:13px;color:#a1a1aa;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;">${file}</p>` : ""}
-  <pre style="margin:12px 0 0;padding:12px 14px;background:#111113;border:1px solid #2a2a30;border-radius:8px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;color:#f4f4f5;white-space:pre;"><code>${message}</code></pre>
-</div>`.trim();
+  const message = escape(error.message).replace(/\r?\n/g, "&#10;");
+  const fileAttr = error.file ? ` error-file="${escape(error.file)}"` : "";
+  const emptyAttr = lastHtml ? "" : " data-empty";
+  const overlay = `<${PUG_ERROR_OVERLAY_TAG} error-id="${id}"${fileAttr} error-message="${message}"${emptyAttr}></${PUG_ERROR_OVERLAY_TAG}>`;
+  return `${lastHtml}${overlay}`.trim();
 }
 
-const MAX_POOL_SIZE = os.cpus().length;
+const MAX_POOL_SIZE = Math.max(2, os.cpus().length - 1);
 const INLINE_THRESHOLD = 2;
 const cache = new PugCompileCache();
 const graph = new PugDependencyGraph();
 function getPugDependencyGraph() {
   return graph;
 }
+let lastCompileTimings = { read: 0, parse: 0, render: 0, a11y: 0, sections: 0 };
+function accumulateTimings(timings) {
+  lastCompileTimings.read += timings.read;
+  lastCompileTimings.parse += timings.parse;
+  lastCompileTimings.render += timings.render;
+  lastCompileTimings.a11y += timings.a11y;
+  lastCompileTimings.sections += 1;
+}
+function getLastCompileTimings() {
+  return lastCompileTimings;
+}
 const __filename$1 = fileURLToPath(import.meta.url);
 const __dirname$1 = path.dirname(__filename$1);
 const workerFilePath = __dirname$1.includes("dist/") ? "./pug/worker.mjs" : "./worker.ts";
 const workerFilePathResolved = path.resolve(__dirname$1, workerFilePath);
-let workerPool = [];
-async function terminateAllWorkers() {
-  await Promise.all(workerPool.map((worker) => worker.terminate()));
-  workerPool = [];
+const slots = Array.from({ length: MAX_POOL_SIZE }, () => ({ tail: Promise.resolve(), active: 0 }));
+const allWorkers = /* @__PURE__ */ new Set();
+function slotIndexFor(id) {
+  let hash = 2166136261;
+  for (let i = 0; i < id.length; i++) {
+    hash ^= id.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) % MAX_POOL_SIZE;
+}
+function spawnWorker(index) {
+  const worker = new Worker(workerFilePathResolved, { name: `pug-worker-${index}` });
+  allWorkers.add(worker);
+  return worker;
+}
+function runOnWorker(worker, input) {
+  return new Promise((resolve, reject) => {
+    function cleanup() {
+      worker.off("message", onMessage);
+      worker.off("error", onError);
+    }
+    function onMessage(result) {
+      cleanup();
+      resolve(result);
+    }
+    function onError(error) {
+      cleanup();
+      reject(error);
+    }
+    worker.once("message", onMessage);
+    worker.once("error", onError);
+    worker.postMessage(input);
+  });
+}
+function runPinned(id, input) {
+  const slot = slots[slotIndexFor(id)];
+  slot.active++;
+  const run = slot.tail.then(async () => {
+    if (!slot.worker)
+      slot.worker = spawnWorker(slots.indexOf(slot));
+    const worker = slot.worker;
+    worker.ref();
+    try {
+      return await runOnWorker(worker, input);
+    } catch (error) {
+      allWorkers.delete(worker);
+      void worker.terminate().catch(() => {
+      });
+      if (slot.worker === worker)
+        slot.worker = void 0;
+      throw error;
+    } finally {
+      slot.active--;
+      if (slot.active === 0)
+        slot.worker?.unref();
+    }
+  });
+  slot.tail = run.then(() => {
+  }, () => {
+  });
+  return run;
+}
+function getPugPoolInfo() {
+  return { cpus: os.cpus().length, maxPoolSize: MAX_POOL_SIZE, workers: allWorkers.size };
+}
+async function terminatePugWorkers() {
+  const workers = [...allWorkers];
+  allWorkers.clear();
+  for (const slot of slots) {
+    slot.worker = void 0;
+    slot.tail = Promise.resolve();
+    slot.active = 0;
+  }
+  await Promise.all(workers.map((worker) => worker.terminate()));
 }
 const signals = ["SIGINT", "SIGTERM", "SIGQUIT"];
-signals.forEach((signal) => process.on(signal, async () => await terminateAllWorkers()));
+signals.forEach((signal) => process.on(signal, () => {
+  void terminatePugWorkers();
+}));
 async function storeResult(id, markupSource, html, dependencies) {
   graph.setDependencies(id, dependencies);
   const depSignatures = await computeDepSignatures(dependencies);
@@ -1046,14 +1140,16 @@ function recordFailure(mode, repository, errors, pugError) {
   logger.error(`Pug markup failed to compile for section "${pugError.id}": ${pugError.message}`);
   errors.push(pugError);
   if (mode === "development") {
-    repository.set(pugError.id, { markup: renderPugErrorOverlay(pugError) });
+    const lastHtml = cache.get(pugError.id)?.compiledHtml ?? "";
+    repository.set(pugError.id, { markup: renderPugErrorOverlay(pugError, lastHtml) });
   }
 }
 async function compileInline(mode, contentDir, repository, id, errors) {
   const markupSource = repository.get(id).markup;
   try {
-    const { html, dependencies } = await compileMarkup(contentDir, mode, markupSource, id);
+    const { html, dependencies, timings } = await compileMarkup(contentDir, mode, markupSource, id);
     repository.set(id, { markup: html });
+    accumulateTimings(timings);
     await storeResult(id, markupSource, html, dependencies);
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
@@ -1062,39 +1158,16 @@ async function compileInline(mode, contentDir, repository, id, errors) {
   }
 }
 async function compileViaWorkerPool(mode, contentDir, repository, ids, errors) {
-  const poolSize = Math.min(ids.length, MAX_POOL_SIZE);
-  const waiters = [];
-  const freeWorkers = [];
-  function releaseWorker(worker) {
-    const waiter = waiters.shift();
-    if (waiter) {
-      waiter(worker);
-    } else {
-      freeWorkers.push(worker);
-    }
-  }
-  function acquireWorker() {
-    const worker = freeWorkers.pop();
-    if (worker) {
-      return Promise.resolve(worker);
-    }
-    return new Promise((resolve) => waiters.push(resolve));
-  }
-  workerPool = Array.from({ length: poolSize }, (_, index) => {
-    const worker = new Worker(workerFilePathResolved, {
-      name: `pug-worker-${index}`
-    });
-    freeWorkers.push(worker);
-    return worker;
-  });
   const tasks = ids.map(async (id) => {
     const markupSource = repository.get(id).markup;
-    const worker = await acquireWorker();
-    const result = await new Promise((resolve) => {
-      worker.once("message", resolve);
-      worker.postMessage({ id, mode, html: markupSource, contentDir });
-    });
-    releaseWorker(worker);
+    let result;
+    try {
+      result = await runPinned(id, { id, mode, html: markupSource, contentDir });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      recordFailure(mode, repository, errors, { id, message });
+      return;
+    }
     if ("error" in result) {
       recordFailure(mode, repository, errors, {
         id,
@@ -1104,10 +1177,10 @@ async function compileViaWorkerPool(mode, contentDir, repository, ids, errors) {
       return;
     }
     repository.set(id, { markup: result.html });
+    accumulateTimings(result.timings);
     await storeResult(id, markupSource, result.html, result.dependencies);
   });
   await Promise.all(tasks);
-  await terminateAllWorkers();
 }
 async function compileIds(mode, contentDir, repository, ids) {
   const clonedRepository = new Map(repository);
@@ -1129,6 +1202,7 @@ async function compileIds(mode, contentDir, repository, ids) {
   if (misses.length === 0)
     return clonedRepository;
   const errors = [];
+  lastCompileTimings = { read: 0, parse: 0, render: 0, a11y: 0, sections: 0 };
   const useInline = mode === "development" && misses.length <= INLINE_THRESHOLD;
   if (useInline) {
     await Promise.all(misses.map((id) => compileInline(mode, contentDir, clonedRepository, id, errors)));
@@ -1189,7 +1263,7 @@ async function generateFullPageFile(data) {
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
       ` : `<meta name="theme-color" content="${data.theme}">`}
-    <script type="module" src="/styleguide-assets/fullpage-CVmYa-FG.js"><\/script>
+    <script type="module" src="/styleguide-assets/fullpage-CzaJFxfS.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -1511,6 +1585,7 @@ ${html ?? ""}
   `;
 }
 function getMainContentRegular(section, config) {
+  const sourceCode = stripPugErrorOverlay(section.markup);
   const openInEditorPaths = {};
   if (config.mode === "development" && config.launchInEditor) {
     const computedRootPath = config.launchInEditor && typeof config.launchInEditor === "object" && "rootDir" in config.launchInEditor ? config.launchInEditor.rootDir : process.cwd();
@@ -1612,7 +1687,7 @@ function getMainContentRegular(section, config) {
                     <button
                         class="inline-flex items-center gap-1.5 p-4 cursor-pointer active:scale-90 transition hover:text-styleguide-highlight duration-200" 
                         type="button"
-                        data-clipboard-value="${encodeURIComponent(section.markup)}"
+                        data-clipboard-value="${encodeURIComponent(sourceCode)}"
                         data-clipboard-uri-encoded="true"
                     >
                         <svg class="h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -1655,7 +1730,7 @@ function getMainContentRegular(section, config) {
                 <div 
                   id="code-fullpage-${sectionSanitizeId(section.id)}" 
                   class="overflow-x-auto w-full code-highlight"
-                  data-source-code="${encodeURIComponent(section.markup)}"
+                  data-source-code="${encodeURIComponent(sourceCode)}"
                   data-source-lang="html"
                 ></div>
             </div>
@@ -1992,7 +2067,7 @@ async function generatePreviewFile(data) {
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="${data.theme.light}">
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${data.theme.dark}">
       ` : `<meta name="theme-color" content="${data.theme}">`}
-    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-CjPjhHw0.css">
+    <link rel="stylesheet" type="text/css" href="/styleguide-assets/kss-modern-DW2ZdZvd.css">
     <script>
   //#region client/lib/iframe-resize.ts
 var e = [
@@ -2145,7 +2220,7 @@ document.addEventListener("DOMContentLoaded", () => {
 //#endregion
 ;
 <\/script>
-    <script type="module" src="/styleguide-assets/preview-8L8aaFj4.js"><\/script>
+    <script type="module" src="/styleguide-assets/preview-ChQyjhUb.js"><\/script>
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" href="/styleguide-assets/fonts/geist-mono-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@@ -2568,17 +2643,21 @@ async function rebuildSections(config, context, changedSectionIds) {
   }
   if (subset.size === 0)
     return;
+  const startedAt = performance.now();
+  const workersBefore = getPugPoolInfo().workers;
   const recompiled = await compilePugMarkupIncremental(config.mode, config.contentDir, subset, subset.keys());
   for (const [id, entry] of recompiled) {
     context.compiledRepository.set(id, { markup: entry.markup });
     reindexInsertMarkupConsumer(context, id);
   }
+  const afterCompile = performance.now();
   const resolved = resolveInsertMarkupForSections(context.compiledRepository, context.sectionsById, affected);
   for (const [id, markup] of resolved) {
     const node = context.nodeById.get(id);
     if (node)
       node.markup = markup;
   }
+  const afterResolve = performance.now();
   const writeTasks = [];
   const previewsToWrite = /* @__PURE__ */ new Set();
   for (const id of affected) {
@@ -2596,6 +2675,16 @@ async function rebuildSections(config, context, changedSectionIds) {
     writeTasks.push(writePreviewFile(config, context, firstLevelIndex, secondLevelIndex));
   }
   await Promise.all(writeTasks);
+  const afterWrite = performance.now();
+  if (config.mode === "development") {
+    const ms = (value) => `${value.toFixed(1)}ms`;
+    const pool = getPugPoolInfo();
+    const spawned = pool.workers - workersBefore;
+    const t = getLastCompileTimings();
+    logger.info(
+      `Incremental rebuild: ${affected.size} section(s), ${writeTasks.length} file(s) in ${ms(afterWrite - startedAt)} (compile ${ms(afterCompile - startedAt)}, insert-markup ${ms(afterResolve - afterCompile)}, write ${ms(afterWrite - afterResolve)}) [cpus=${pool.cpus}, pool=${pool.maxPoolSize}, workers=${pool.workers}${spawned > 0 ? `, +${spawned} cold-spawned` : ""}] compile breakdown over ${t.sections} section(s): read ${ms(t.read)}, parse ${ms(t.parse)}, render ${ms(t.render)}, a11y ${ms(t.a11y)} (summed per-section; read=disk I/O, parse=lex/parse/codegen)`
+    );
+  }
 }
 async function watchStyleguide(config, onChange, onError) {
   const initialBuild = await buildAll(config);

package/dist/node/lib/pug/worker.d.mts

@@ -1,6 +1,17 @@
 import { StyleguideConfiguration } from '../index.mjs';
 
 type Mode = StyleguideConfiguration['mode'];
+/** Where a section's compile time went, summed over the entry file and any <insert-vite-pug> tags. */
+interface CompileTimings {
+    /** Reading the entry file + all includes/extends off disk (file I/O only). */
+    read: number;
+    /** pug lex + parse + codegen (CPU; excludes the include reads). */
+    parse: number;
+    /** Executing the compiled template function (pure render). */
+    render: number;
+    /** `fixAccessibilityIssues` post-processing. */
+    a11y: number;
+}
 
 interface PugWorkerInput {
     id: string;
@@ -12,6 +23,7 @@ interface PugWorkerSuccess {
     id: string;
     html: string;
     dependencies: string[];
+    timings: CompileTimings;
 }
 interface PugWorkerError {
     id: string;

package/dist/node/lib/pug/worker.d.ts

@@ -1,6 +1,17 @@
 import { StyleguideConfiguration } from '../index.js';
 
 type Mode = StyleguideConfiguration['mode'];
+/** Where a section's compile time went, summed over the entry file and any <insert-vite-pug> tags. */
+interface CompileTimings {
+    /** Reading the entry file + all includes/extends off disk (file I/O only). */
+    read: number;
+    /** pug lex + parse + codegen (CPU; excludes the include reads). */
+    parse: number;
+    /** Executing the compiled template function (pure render). */
+    render: number;
+    /** `fixAccessibilityIssues` post-processing. */
+    a11y: number;
+}
 
 interface PugWorkerInput {
     id: string;
@@ -12,6 +23,7 @@ interface PugWorkerSuccess {
     id: string;
     html: string;
     dependencies: string[];
+    timings: CompileTimings;
 }
 interface PugWorkerError {
     id: string;

package/dist/node/lib/pug/worker.mjs

@@ -1,11 +1,13 @@
 import { parentPort } from 'node:worker_threads';
-import { c as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.C3thzyxO.mjs';
+import { c as compileMarkup, p as pugErrorFile } from '../../shared/kss-modern.o1Fp758z.mjs';
+import 'node:fs';
 import 'node:fs/promises';
 import 'node:path';
-import '@biomejs/js-api';
+import 'node:perf_hooks';
 import 'pug';
 import 'consola';
 import 'consola/utils';
+import 'pug-load';
 
 if (!parentPort) {
   throw new Error("This file must be run as a worker thread");
@@ -13,8 +15,8 @@ if (!parentPort) {
 parentPort.on("message", async (data) => {
   const { id, mode, html, contentDir } = data;
   try {
-    const { html: compiled, dependencies } = await compileMarkup(contentDir, mode, html, id);
-    parentPort.postMessage({ id, html: compiled, dependencies });
+    const { html: compiled, dependencies, timings } = await compileMarkup(contentDir, mode, html, id);
+    parentPort.postMessage({ id, html: compiled, dependencies, timings });
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
     parentPort.postMessage({ id, error: message, file: pugErrorFile(error) });

package/dist/node/shared/{kss-modern.C3thzyxO.mjs → kss-modern.o1Fp758z.mjs}

@@ -1,9 +1,11 @@
+import { statSync, readFileSync } from 'node:fs';
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { Biome, Distribution } from '@biomejs/js-api';
+import { performance } from 'node:perf_hooks';
 import pug from 'pug';
 import { createConsola } from 'consola';
 import { colors } from 'consola/utils';
+import pugLoad from 'pug-load';
 
 const sectionSanitizeId = (id2) => id2.toLowerCase().replaceAll(".", "-");
 
@@ -25,6 +27,11 @@ const logger = createLogger();
 const INSERT_VITE_PUG_TAG_RE = /<insert-vite-pug src="(.+?)".*(?:[\n\r\u2028\u2029]\s*)?(modifierClass="(.+?)")? *><\/insert-vite-pug>/g;
 const PUG_SRC_RE = /src="(.+?)"/;
 const PUG_MODIFIER_CLASS_RE = /modifierClass="(.+?)"/;
+const PUG_ERROR_OVERLAY_TAG = "pug-error-overlay";
+const PUG_ERROR_OVERLAY_RE = new RegExp(`<${PUG_ERROR_OVERLAY_TAG}\\b[^>]*></${PUG_ERROR_OVERLAY_TAG}>`, "g");
+function stripPugErrorOverlay(html) {
+  return html.replace(PUG_ERROR_OVERLAY_RE, "");
+}
 function fixAccessibilityIssues(html) {
   let parsedMarkup = html;
   const omitValue = [
@@ -80,9 +87,46 @@ function generateId() {
   return value;
 }
 
+const parseCache = /* @__PURE__ */ new Map();
+function signatureOf(filename) {
+  try {
+    const stat = statSync(filename);
+    return `${stat.mtimeMs}:${stat.size}`;
+  } catch {
+    return null;
+  }
+}
+let installed = false;
+const originalLoadString = pugLoad.string;
+function installPugParseCache() {
+  if (installed)
+    return;
+  installed = true;
+  pugLoad.string = function cachedLoadString(src, options) {
+    const filename = options?.filename;
+    if (filename && typeof options.lex === "function" && typeof options.parse === "function") {
+      const sig = signatureOf(filename);
+      if (sig !== null) {
+        let parsed;
+        const cached = parseCache.get(filename);
+        if (cached && cached.sig === sig) {
+          parsed = cached.ast;
+        } else {
+          parsed = options.parse(options.lex(src, options), options);
+          parseCache.set(filename, { sig, ast: parsed });
+        }
+        return pugLoad(parsed, options);
+      }
+    }
+    return originalLoadString(src, options);
+  };
+}
+
+installPugParseCache();
 let biomePromise;
 function getBiome() {
   biomePromise ??= (async () => {
+    const { Biome, Distribution } = await import('@biomejs/js-api');
     const biome = await Biome.create({ distribution: Distribution.NODE });
     const { projectKey } = biome.openProject(".");
     biome.applyConfiguration(projectKey, {
@@ -118,7 +162,7 @@ async function biomeFormat(content) {
   }
 }
 function createUseId(sectionId) {
-  const namespace = sectionSanitizeId(sectionId);
+  const namespace = `id-${sectionSanitizeId(sectionId)}`;
   let autoCounter = 0;
   return (key) => {
     if (key === void 0) {
@@ -132,24 +176,50 @@ function pugErrorFile(error) {
   const candidate = error;
   return candidate?.path ?? candidate?.filename;
 }
+let includeReadMs = 0;
+function timedRead(filePath) {
+  const t0 = performance.now();
+  const content = readFileSync(filePath, "utf8");
+  includeReadMs += performance.now() - t0;
+  return content;
+}
 function compilePugFile(pugFilePath, mode, sectionId, extraLocals = {}) {
-  const pugFn = pug.compileFile(pugFilePath, {
+  const tRead0 = performance.now();
+  const source = readFileSync(pugFilePath, "utf8");
+  let readMs = performance.now() - tRead0;
+  const includeReadBefore = includeReadMs;
+  const tParse0 = performance.now();
+  const pugFn = pug.compile(source, {
+    filename: pugFilePath,
     // define doctype to avoid self-closing tags on wrong places
     doctype: "html",
     // pretty output in dev keeps the "Show code" view readable without Biome
-    pretty: mode === "development"
+    pretty: mode === "development",
+    // pug defaults this to true, which wraps the generated function in per-line try/catch +
+    // line-mapping — measurably bloating codegen and `new Function`. We surface compile errors via
+    // our own overlay, so the precise pug line in a runtime stack isn't worth the cost.
+    compileDebug: false,
+    plugins: [{ read: timedRead }]
   });
+  const includeReads = includeReadMs - includeReadBefore;
+  const parseMs = performance.now() - tParse0 - includeReads;
+  readMs += includeReads;
   const dependencies = [path.resolve(pugFilePath), ...pugFn.dependencies.map((dep) => path.resolve(dep))];
+  const tRender0 = performance.now();
   const html = pugFn({ ...extraLocals, useId: createUseId(sectionId) });
-  return { html, dependencies };
+  const renderMs = performance.now() - tRender0;
+  return { html, dependencies, readMs, parseMs, renderMs };
 }
 async function expandVitePugTags(contentDir, mode, html, sectionId) {
   const vitePugTags = html.match(INSERT_VITE_PUG_TAG_RE);
   if (!vitePugTags) {
-    return { html, dependencies: [] };
+    return { html, dependencies: [], timings: { read: 0, parse: 0, render: 0, a11y: 0 } };
   }
   let markupOutput = html;
   const dependencies = [];
+  let read = 0;
+  let parse = 0;
+  let render = 0;
   await Promise.all(vitePugTags.map(async (vitePugTag) => {
     const pugSourcePath = vitePugTag.match(PUG_SRC_RE)?.[1];
     if (!pugSourcePath) {
@@ -162,35 +232,51 @@ async function expandVitePugTags(contentDir, mode, html, sectionId) {
     const pugModifierClass = vitePugTag.match(PUG_MODIFIER_CLASS_RE);
     const pugLocals = pugModifierClass && pugModifierClass[1] ? { modifierClass: pugModifierClass[1] } : {};
     const pugFilePath = path.join(contentDir, pugSourcePath);
-    const { html: pugOutput, dependencies: pugDependencies } = compilePugFile(pugFilePath, mode, sectionId, pugLocals);
+    const { html: pugOutput, dependencies: pugDependencies, readMs, parseMs, renderMs } = compilePugFile(pugFilePath, mode, sectionId, pugLocals);
     dependencies.push(...pugDependencies);
+    read += readMs;
+    parse += parseMs;
+    render += renderMs;
     markupOutput = markupOutput.replaceAll(vitePugTag, pugOutput);
   }));
-  return { html: markupOutput, dependencies };
+  return { html: markupOutput, dependencies, timings: { read, parse, render, a11y: 0 } };
 }
 async function compileMarkup(contentDir, mode, html, sectionId) {
   let result = html;
   const dependencies = [];
+  let read = 0;
+  let parse = 0;
+  let render = 0;
   const trimmed = html.trim();
   const isBarePath = !trimmed.includes("<") && !trimmed.includes("\n");
   if (isBarePath && trimmed.endsWith(".html")) {
     const htmlFilePath = path.join(contentDir, trimmed);
+    const t0 = performance.now();
     result = await fs.readFile(htmlFilePath, "utf-8");
+    read += performance.now() - t0;
     dependencies.push(path.resolve(htmlFilePath));
   } else if (isBarePath && trimmed.endsWith(".pug")) {
     const pugFilePath = path.join(contentDir, trimmed);
     const compiled = compilePugFile(pugFilePath, mode, sectionId);
     result = compiled.html;
     dependencies.push(...compiled.dependencies);
+    read += compiled.readMs;
+    parse += compiled.parseMs;
+    render += compiled.renderMs;
   }
   const expanded = await expandVitePugTags(contentDir, mode, result, sectionId);
   result = expanded.html;
   dependencies.push(...expanded.dependencies);
+  read += expanded.timings.read;
+  parse += expanded.timings.parse;
+  render += expanded.timings.render;
   if (mode === "production") {
     result = await biomeFormat(result);
   }
+  const tA11y = performance.now();
   result = fixAccessibilityIssues(result);
-  return { html: result, dependencies: [...new Set(dependencies)] };
+  const a11y = performance.now() - tA11y;
+  return { html: result, dependencies: [...new Set(dependencies)], timings: { read, parse, render, a11y } };
 }
 
-export { INSERT_VITE_PUG_TAG_RE as I, PUG_SRC_RE as P, sectionSanitizeId as a, createLogger as b, compileMarkup as c, ensureStartingSlash as e, generateId as g, logger as l, pugErrorFile as p, replaceWrapperContent as r, sanitizeSpecialCharacters as s };
+export { INSERT_VITE_PUG_TAG_RE as I, PUG_SRC_RE as P, PUG_ERROR_OVERLAY_TAG as a, sectionSanitizeId as b, compileMarkup as c, stripPugErrorOverlay as d, ensureStartingSlash as e, createLogger as f, generateId as g, logger as l, pugErrorFile as p, replaceWrapperContent as r, sanitizeSpecialCharacters as s };