lildocs 0.1.15 → 0.1.17

package/dist/cli.mjs

@@ -3,21 +3,19 @@ import { n as renderGitHubPagesWorkflow, r as repoRelativeInputPath, t as normal
 import { createRequire } from "node:module";
 import { spawn } from "node:child_process";
 import { command, flag, option, optional, positional, run, string, subcommands } from "cmd-ts";
-import { createReadStream, existsSync, readFileSync, watch } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 import { access, copyFile, mkdir, mkdtemp, readFile, readdir, rm, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
 import matter from "gray-matter";
-import { Marked, Parser, Renderer, marked } from "marked";
+import { Lexer, Marked, Parser, Renderer, marked } from "marked";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import markedShiki from "marked-shiki";
 import { bundledThemes, codeToHtml } from "shiki";
-import { renderMermaidSVG } from "beautiful-mermaid";
+import { decodeHTML } from "entities";
+import { fromShikiTheme, renderMermaidSVG } from "beautiful-mermaid";
 import os from "node:os";
 import { generateMarkdownForModule } from "exports-md";
 import { clampGamut, converter, formatHex, parse, wcagContrast } from "culori";
-import { render } from "preact-render-to-string";
-import { jsx, jsxs } from "preact/jsx-runtime";
-import http from "node:http";
 //#region src/core/errors.ts
 var LildocsError = class extends Error {
 	constructor(message) {
@@ -40,7 +38,7 @@ async function readDocsConfig(docsRoot) {
 	try {
 		parsed = JSON.parse(rawConfig);
 	} catch (error) {
-		throw new LildocsError(`Invalid docs config JSON at ${configPath}: ${errorMessage$3(error)}`);
+		throw new LildocsError(`Invalid docs config JSON at ${configPath}: ${errorMessage$4(error)}`);
 	}
 	return validateDocsConfig(parsed, configPath);
 }
@@ -180,7 +178,7 @@ function assertOptionalStringArray(value, name, configPath) {
 function isMissingFileError(error) {
 	return error instanceof Error && "code" in error && error.code === "ENOENT";
 }
-function errorMessage$3(error) {
+function errorMessage$4(error) {
 	return error instanceof Error ? error.message : String(error);
 }
 //#endregion
@@ -426,6 +424,209 @@ function ensureUniqueRoutes(pages) {
 	}
 }
 //#endregion
+//#region src/core/frontend.ts
+const sourceDir = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const virtualOctaneCssId = "\0lildocs-octane-css";
+async function readRenderAsset(name) {
+	return readFile(path.join(frontendSourceDir(), name), "utf8");
+}
+function frontendDevScriptPath() {
+	return `/@fs/${toVitePath(clientEntryPath())}`;
+}
+async function buildFrontendAssets(options) {
+	const vite = await loadVite();
+	const outDir = path.join(options.outDir, "assets", "lildocs");
+	await vite.build({
+		...await frontendViteConfig(options.cwd, "build"),
+		base: "./",
+		build: {
+			outDir,
+			emptyOutDir: true,
+			manifest: true,
+			minify: false,
+			target: "esnext",
+			rollupOptions: { input: clientEntryPath() }
+		}
+	});
+	const manifestPath = path.join(outDir, ".vite", "manifest.json");
+	const manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+	const entry = Object.values(manifest).find((chunk) => chunk.isEntry === true && typeof chunk.file === "string");
+	if (!entry) throw new LildocsError("Vite did not emit a frontend entry for the documentation site.");
+	return {
+		scriptPath: toPosixPath(path.join("assets", "lildocs", entry.file)),
+		stylePaths: (entry.css ?? []).map((file) => toPosixPath(path.join("assets", "lildocs", file)))
+	};
+}
+async function createFrontendRenderer(options) {
+	if (options.viteServer) return {
+		renderPage: renderPageExport(await options.viteServer.ssrLoadModule(serverEntryPath())),
+		close: async () => {}
+	};
+	const server = await (await loadVite()).createServer({
+		...await frontendViteConfig(options.cwd, "ssr"),
+		appType: "custom",
+		server: {
+			middlewareMode: true,
+			fs: { allow: [frontendSourceDir(), options.cwd] }
+		}
+	});
+	return {
+		renderPage: renderPageExport(await server.ssrLoadModule(serverEntryPath())),
+		close: () => server.close()
+	};
+}
+async function createFrontendDevServer(options) {
+	const server = await (await loadVite()).createServer({
+		...await frontendViteConfig(options.cwd, "dev"),
+		root: options.root,
+		appType: "mpa",
+		server: {
+			host: options.host,
+			port: options.port,
+			strictPort: false,
+			fs: { allow: [
+				frontendSourceDir(),
+				options.root,
+				options.cwd
+			] }
+		}
+	});
+	await server.listen();
+	return server;
+}
+function frontendSourceDir() {
+	const nested = path.resolve(sourceDir, "render");
+	if (existsSync(path.join(nested, "client.tsrx"))) return nested;
+	return path.resolve(sourceDir, "../render");
+}
+function clientEntryPath() {
+	return path.join(frontendSourceDir(), "client.tsrx");
+}
+function serverEntryPath() {
+	return path.join(frontendSourceDir(), "renderPage.tsrx");
+}
+async function frontendViteConfig(cwd, mode) {
+	const { octane } = await loadOctaneCompiler();
+	return {
+		configFile: false,
+		root: frontendSourceDir(),
+		publicDir: false,
+		cacheDir: path.join(cwd, "node_modules", ".vite", `lildocs-${mode}`),
+		clearScreen: false,
+		logLevel: "warn",
+		plugins: [octaneRuntimeCompatibility(), octane()],
+		optimizeDeps: { exclude: ["octane"] },
+		ssr: { noExternal: [/^octane(?:$|\/)/] }
+	};
+}
+async function loadVite() {
+	try {
+		return await import("vite");
+	} catch (error) {
+		throw new LildocsError(`Lildocs needs Vite to build and preview its frontend. Install vite in the project using Lildocs.\n${errorMessage$3(error)}`);
+	}
+}
+async function loadOctaneCompiler() {
+	try {
+		return await import("octane/compiler/vite");
+	} catch (error) {
+		throw new LildocsError(`Lildocs needs Octane to compile its frontend.\n${errorMessage$3(error)}`);
+	}
+}
+function renderPageExport(mod) {
+	const renderPage = mod && typeof mod === "object" && "renderPage" in mod ? mod.renderPage : void 0;
+	if (typeof renderPage !== "function") throw new LildocsError("Lildocs frontend renderer did not export renderPage.");
+	return renderPage;
+}
+function octaneRuntimeCompatibility() {
+	return {
+		name: "lildocs-octane-runtime-compatibility",
+		enforce: "pre",
+		resolveId(source, importer, options) {
+			if (source === "octane/server" && options.ssr) return resolveOctaneServerRuntime();
+			if (source === "./css.js" && importer && isOctaneRuntimeImport(importer)) return virtualOctaneCssId;
+			return null;
+		},
+		load(id) {
+			if (id === virtualOctaneCssId) return octaneCssHelpersSource;
+			return null;
+		}
+	};
+}
+function resolveOctaneServerRuntime() {
+	const serverEntry = require.resolve("octane/server");
+	const runtimePath = [serverEntry.replace(/[/\\]server[/\\]index\.js$/, `${path.sep}runtime.server.js`), serverEntry.replace(/[/\\]server[/\\]index\.ts$/, `${path.sep}runtime.server.ts`)].find((candidate) => candidate !== serverEntry && existsSync(candidate));
+	if (!runtimePath) throw new LildocsError(`Unable to locate Octane server runtime from ${serverEntry}.`);
+	return runtimePath;
+}
+function isOctaneRuntimeImport(importer) {
+	const [filePath] = importer.split("?", 1);
+	const normalized = toPosixPath(filePath);
+	return /\/octane\/(?:src|dist)\/runtime(?:\.server)?\.(?:ts|js)$/.test(normalized);
+}
+const octaneCssHelpersSource = `
+export function normalizeClass(value) {
+  if (typeof value === "string") return value;
+  if (typeof value !== "object") {
+    return typeof value === "number" && value ? "" + value : "";
+  }
+  if (value === null) return "";
+  let str = "";
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      if (item) {
+        const inner = normalizeClass(item);
+        if (inner) str = str ? str + " " + inner : inner;
+      }
+    }
+  } else {
+    for (const key in value) {
+      if (value[key]) str = str ? str + " " + key : key;
+    }
+  }
+  return str;
+}
+
+const styleNameCache = new Map();
+
+export function styleName(name) {
+  const cached = styleNameCache.get(name);
+  if (cached !== undefined) return cached;
+  const result = hyphenateStyleName(name);
+  styleNameCache.set(name, result);
+  return result;
+}
+
+function hyphenateStyleName(name) {
+  if (name.charCodeAt(0) === 45) return name;
+  let hasUpper = false;
+  for (let index = 0; index < name.length; index++) {
+    const code = name.charCodeAt(index);
+    if (code >= 65 && code <= 90) {
+      hasUpper = true;
+      break;
+    }
+  }
+  if (!hasUpper) return name;
+  let out = "";
+  for (let index = 0; index < name.length; index++) {
+    const code = name.charCodeAt(index);
+    out += code >= 65 && code <= 90 ? "-" + String.fromCharCode(code + 32) : name[index];
+  }
+  if (out.charCodeAt(0) === 109 && out.charCodeAt(1) === 115 && out.charCodeAt(2) === 45) {
+    out = "-" + out;
+  }
+  return out;
+}
+`;
+function toVitePath(filePath) {
+	return path.resolve(filePath).split(path.sep).join("/");
+}
+function errorMessage$3(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+//#endregion
 //#region src/vendor/marked-alert/index.ts
 const defaultAlertVariants = [
 	{
@@ -527,12 +728,19 @@ function buildSearchIndex(pages) {
 		pageTitle: page.title,
 		route: page.route,
 		headings: page.headings.map((heading) => heading.text),
-		text: normalizeSearchText(page.searchText ?? page.markdown)
+		text: normalizeSearchText(page.searchText ?? markdownToPlainText(page.markdown)),
+		excerpt: markdownToExcerpt(page.markdown)
 	}, ...buildSectionEntries(page)]);
 }
 function normalizeSearchText(value) {
 	return value.replace(/<[^>]+>/g, " ").replace(/[^\p{L}\p{N}]+/gu, " ").replace(/\s+/g, " ").trim();
 }
+function markdownToPlainText(markdown) {
+	return normalizeSearchText(markdownToExcerpt(markdown));
+}
+function markdownToExcerpt(markdown) {
+	return decodeHTML(Parser.parse(Lexer.lex(markdown, { gfm: true })).replace(/<br\s*\/?>/gi, "\n").replace(/<\/(?:p|h[1-6]|li|blockquote|pre|tr|div|section|article)>/gi, "\n\n").replace(/<[^>]+>/g, "")).replace(/[ \t]+\n/g, "\n").replace(/\n{3,}/g, "\n\n").trim();
+}
 function buildSectionEntries(page) {
 	const entries = [];
 	const headingQueue = [...page.headings];
@@ -546,7 +754,8 @@ function buildSectionEntries(page) {
 			pageTitle: page.title,
 			route: `${page.route}#${activeSection.heading.id}`,
 			headings: activeSection.path.map((heading) => heading.text),
-			text: normalizeSearchText(activeSection.lines.join("\n")),
+			text: markdownToPlainText(activeSection.lines.join("\n")),
+			excerpt: markdownToExcerpt(activeSection.lines.join("\n")),
 			depth: activeSection.heading.depth
 		});
 	};
@@ -621,7 +830,7 @@ async function renderMarkdownPage(model, page, outDir, options = {}) {
 			return highlightCode(code, lang, props, options.shikiTheme);
 		} })).parse(page.markdown),
 		assets,
-		text: normalizeSearchText(page.markdown)
+		text: markdownToPlainText(page.markdown)
 	};
 }
 async function highlightCode(code, lang, props, theme = {}) {
@@ -705,10 +914,15 @@ function escapeHtml$1(value) {
 //#endregion
 //#region src/core/mermaid.ts
 async function createMermaidRenderer(options) {
+	const lightColors = await loadShikiColors(options.themeConfig.light);
+	const darkColors = options.themeConfig.dark ? await loadShikiColors(options.themeConfig.dark) : void 0;
+	const colorKeys = sharedColorKeys(lightColors, darkColors);
+	const renderOptions = toRenderOptions(colorKeys, options.themeConfig.fontFamily);
 	return {
+		css: toThemeCss(lightColors, darkColors, colorKeys),
 		async render(source, idHint) {
 			try {
-				const svg = addImageRole(renderMermaidSVG(source, toRenderOptions(options.themeConfig)));
+				const svg = addImageRole(renderMermaidSVG(source, renderOptions));
 				return `<figure class="mermaidDiagram" id="${escapeHtml(idHint)}">${svg}</figure>`;
 			} catch (error) {
 				throw new LildocsError(`Failed to render Mermaid diagram ${idHint}: ${errorMessage$1(error)}`);
@@ -717,17 +931,51 @@ async function createMermaidRenderer(options) {
 		async close() {}
 	};
 }
-function toRenderOptions(themeConfig) {
+const optionalColorKeys = [
+	"line",
+	"accent",
+	"muted",
+	"surface",
+	"border"
+];
+async function loadShikiColors(themeName) {
+	const themeLoader = bundledThemes[themeName];
+	if (!themeLoader) throw new LildocsError(`Unknown bundled Shiki theme: ${themeName}`);
+	const themeModule = await themeLoader();
+	return fromShikiTheme("default" in themeModule ? themeModule.default : themeModule);
+}
+function sharedColorKeys(light, dark) {
+	return optionalColorKeys.filter((key) => light[key] !== void 0 && (!dark || dark[key] !== void 0));
+}
+function toRenderOptions(colorKeys, fontFamily) {
 	return {
-		bg: themeConfig.bg,
-		fg: themeConfig.fg,
-		accent: themeConfig.accent,
-		muted: themeConfig.muted,
-		surface: themeConfig.surface,
-		border: themeConfig.border,
-		font: themeConfig.fontFamily
+		bg: "var(--ld-mermaid-bg)",
+		fg: "var(--ld-mermaid-fg)",
+		...Object.fromEntries(colorKeys.map((key) => [key, `var(--ld-mermaid-${key})`])),
+		font: fontFamily
 	};
 }
+function toThemeCss(light, dark, colorKeys) {
+	const lightVariables = toCssVariables(light, colorKeys, "  ");
+	const darkVariables = dark ? toCssVariables(dark, colorKeys, "    ") : void 0;
+	return `.mermaidDiagram {
+${lightVariables}
+}${darkVariables ? `
+
+@media (prefers-color-scheme: dark) {
+  .mermaidDiagram {
+${darkVariables}
+  }
+}` : ""}
+`;
+}
+function toCssVariables(colors, colorKeys, indent) {
+	return [
+		`${indent}--ld-mermaid-bg: ${colors.bg};`,
+		`${indent}--ld-mermaid-fg: ${colors.fg};`,
+		...colorKeys.map((key) => `${indent}--ld-mermaid-${key}: ${colors[key]};`)
+	].join("\n");
+}
 function addImageRole(svg) {
 	return svg.replace("<svg", "<svg role=\"img\"");
 }
@@ -769,7 +1017,7 @@ function nestNavItems(items) {
 			let group = byDir.get(currentPath);
 			if (!group) {
 				group = {
-					title: titleFromDir$1(part),
+					title: titleFromDir(part),
 					route: `${currentPath}/index.html`,
 					active: false,
 					hasPage: false,
@@ -790,7 +1038,7 @@ function nestNavItems(items) {
 	}
 	return topLevel;
 }
-function titleFromDir$1(dir) {
+function titleFromDir(dir) {
 	return dir.replace(/[-_]+/g, " ").replace(/\S+/g, (word) => `${word[0]?.toLocaleUpperCase() ?? ""}${word.slice(1)}`);
 }
 //#endregion
@@ -956,6 +1204,11 @@ const BACKGROUND_LIGHTNESS_STEP = .015;
 const MAX_BACKGROUND_CHROMA = .03;
 const toOklch = converter("oklch");
 const clampToRgb = clampGamut("rgb");
+const defaultThemeFontSet = {
+	heading: "\"Baloo 2\", sans-serif",
+	body: "Inter, sans-serif",
+	code: "\"JetBrains Mono\", monospace"
+};
 const themes = {
 	default: {
 		color: {
@@ -968,11 +1221,7 @@ const themes = {
 			codeForeground: "#24292e",
 			sidebarBackground: "#fafafa"
 		},
-		font: {
-			heading: "system-ui, sans-serif",
-			body: "system-ui, sans-serif",
-			code: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
-		},
+		font: { ...defaultThemeFontSet },
 		shiki: { theme: "github-light" }
 	},
 	minimal: {
@@ -998,8 +1247,9 @@ async function resolveTheme(options) {
 	if (options.requestedTheme) {
 		if (typeof options.requestedTheme === "string") return { light: await resolveThemeName(options.requestedTheme) };
 		return {
-			light: await resolveThemeName(options.requestedTheme.light ?? "default"),
-			dark: await resolveThemeName(options.requestedTheme.dark ?? "github-dark")
+			light: await resolveThemeName(options.requestedTheme.light ?? "vitesse-light"),
+			dark: await resolveThemeName(options.requestedTheme.dark ?? "vitesse-dark"),
+			useDefaultFontSet: options.requestedTheme.light === void 0
 		};
 	}
 	const localThemePath = path.join(options.docsRoot, "theme.ts");
@@ -1010,8 +1260,9 @@ async function resolveTheme(options) {
 		return { light: validateTheme((await import(localThemeUrl.href)).default, localThemePath) };
 	}
 	return {
-		light: themes.default,
-		dark: await resolveThemeName("github-dark")
+		light: await resolveThemeName("vitesse-light"),
+		dark: await resolveThemeName("vitesse-dark"),
+		useDefaultFontSet: true
 	};
 }
 async function resolveThemeName(themeName) {
@@ -1067,11 +1318,24 @@ async function resolveFontOverrides(options) {
 		themeFonts
 	};
 }
+function resolveThemeFontImports(theme, overrides = {}) {
+	if (!theme.useDefaultFontSet && theme.light !== themes.default) return "";
+	const imports = [
+		!overrides.heading && googleFontsCssUrl("Baloo 2", "600;700"),
+		!overrides.body && googleFontsCssUrl("Inter", "400;500"),
+		!overrides.code && googleFontsCssUrl("JetBrains Mono", "400")
+	].filter((url) => Boolean(url));
+	return imports.length > 0 ? `${imports.map((url) => `@import url("${url}");`).join("\n")}\n` : "";
+}
 function themeToCssVariables(theme, fontOverrides = {}, linkOptions = {}, navigationOptions = {}) {
 	const linkDecoration = linkTextDecoration(linkOptions.underline);
 	const navigationDuration = navigationOptions.duration ?? 180;
-	const rootVariables = themeToCssVariableBlock(theme.light, fontOverrides);
-	const darkVariables = theme.dark ? themeToCssVariableBlock(theme.dark, fontOverrides) : void 0;
+	const effectiveFontOverrides = theme.useDefaultFontSet ? {
+		...defaultThemeFontSet,
+		...fontOverrides
+	} : fontOverrides;
+	const rootVariables = themeToCssVariableBlock(theme.light, effectiveFontOverrides);
+	const darkVariables = theme.dark ? themeToCssVariableBlock(theme.dark, theme.useDefaultFontSet || theme.light === themes.default ? resolveThemeFonts(theme.light, effectiveFontOverrides) : effectiveFontOverrides) : void 0;
 	const rootBackgroundVariables = themeToBackgroundVariableBlock(theme.light);
 	const darkBackgroundVariables = theme.dark ? themeToBackgroundVariableBlock(theme.dark) : void 0;
 	return `:root {
@@ -1111,12 +1375,8 @@ function resolveBackgroundOptions(options) {
 function themeToMermaidConfig(theme, fontOverrides = {}) {
 	const fonts = resolveThemeFonts(theme.light, fontOverrides);
 	return {
-		bg: theme.light.color.background,
-		fg: theme.light.color.text,
-		accent: theme.light.color.link,
-		muted: theme.light.color.mutedText,
-		surface: theme.light.color.codeBackground,
-		border: theme.light.color.border,
+		light: theme.light.shiki?.theme ?? "github-light",
+		dark: theme.dark?.shiki?.theme,
 		fontFamily: fonts.body
 	};
 }
@@ -1390,233 +1650,7 @@ async function exists(filePath) {
 	}
 }
 //#endregion
-//#region src/render/Layout.tsx
-function Layout({ page, nav, pageNavigation, css, searchIndexJson, logo, favicon, repositoryUrl, projectName, navigation, dev }) {
-	const transition = navigation?.transition ?? "fade";
-	const documentTitle = projectName ? `${page.title} • ${projectName}` : page.title;
-	const repoIconUrl = rootRelativeUrl(page.route, "assets/github-icon.svg");
-	const issueUrl = issueUrlForRepository(repositoryUrl);
-	return /* @__PURE__ */ jsxs("html", {
-		lang: "en",
-		children: [/* @__PURE__ */ jsxs("head", { children: [
-			/* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
-			/* @__PURE__ */ jsx("meta", {
-				name: "viewport",
-				content: "width=device-width, initial-scale=1"
-			}),
-			/* @__PURE__ */ jsx("title", { children: documentTitle }),
-			favicon ? /* @__PURE__ */ jsx("link", {
-				rel: "icon",
-				href: assetSrc(page.route, favicon)
-			}) : null,
-			/* @__PURE__ */ jsx("link", {
-				rel: "stylesheet",
-				href: rootRelativeUrl(page.route, "assets/tabler-icons.css")
-			}),
-			/* @__PURE__ */ jsx("link", {
-				rel: "stylesheet",
-				href: rootRelativeUrl(page.route, "assets/lildocs.css")
-			})
-		] }), /* @__PURE__ */ jsxs("body", { children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "pageShell",
-				children: [/* @__PURE__ */ jsxs("header", {
-					className: "siteHeader",
-					children: [/* @__PURE__ */ jsxs("a", {
-						className: "brand",
-						href: relativeUrl(page.route, "index.html"),
-						children: [logo.image ? /* @__PURE__ */ jsx("img", {
-							className: "brandLogo",
-							src: assetSrc(page.route, logo.image),
-							alt: ""
-						}) : null, logo.text ? /* @__PURE__ */ jsx("span", { children: logo.text }) : null]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "headerActions",
-						children: [repositoryUrl ? /* @__PURE__ */ jsx("a", {
-							className: "repoButton",
-							href: repositoryUrl,
-							"aria-label": "View repository on GitHub",
-							title: "View repository on GitHub",
-							children: /* @__PURE__ */ jsx("span", {
-								className: "repoIcon",
-								"aria-hidden": "true",
-								style: `--ld-repo-icon: url(${repoIconUrl})`
-							})
-						}) : null, /* @__PURE__ */ jsxs("div", {
-							id: "lildocs-search-root",
-							className: "searchBox",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "searchIcon ti ti-search",
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ jsx("input", {
-								id: "lildocs-search-input",
-								type: "search",
-								placeholder: "Search docs",
-								"aria-label": "Search docs"
-							})]
-						})]
-					})]
-				}), /* @__PURE__ */ jsxs("div", {
-					id: "swup",
-					className: "contentGrid",
-					children: [
-						/* @__PURE__ */ jsx("aside", {
-							className: "sidebar",
-							children: /* @__PURE__ */ jsx("nav", {
-								"aria-label": "Documentation navigation",
-								children: /* @__PURE__ */ jsx(NavList, {
-									items: nav,
-									currentRoute: page.route,
-									pageRoute: page.route
-								})
-							})
-						}),
-						/* @__PURE__ */ jsxs("main", {
-							className: `content transition-${transition}`,
-							children: [/* @__PURE__ */ jsxs("article", { children: [/* @__PURE__ */ jsx(GroupBreadcrumbs, { route: page.route }), /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: page.html ?? "" } })] }), /* @__PURE__ */ jsx(PageNav, { pageNavigation })]
-						}),
-						/* @__PURE__ */ jsx("aside", {
-							className: `toc transition-${transition}`,
-							children: /* @__PURE__ */ jsx(Toc, { headings: page.headings })
-						})
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `window.lildocsSearchUrl = ${JSON.stringify(rootRelativeUrl(page.route, "search-index.json"))};${issueUrl ? `window.lildocsIssueUrl = ${JSON.stringify(issueUrl)};` : ""}` } }),
-			/* @__PURE__ */ jsx("script", {
-				type: "application/json",
-				id: "lildocs-search-index",
-				dangerouslySetInnerHTML: { __html: searchIndexJson }
-			}),
-			/* @__PURE__ */ jsx("div", { id: "lildocs-overlay-root" }),
-			/* @__PURE__ */ jsx("script", {
-				type: "module",
-				src: rootRelativeUrl(page.route, "assets/search.js")
-			}),
-			/* @__PURE__ */ jsx("script", { src: rootRelativeUrl(page.route, "assets/copy-code.js") }),
-			/* @__PURE__ */ jsx("script", { src: rootRelativeUrl(page.route, "assets/swup.umd.js") }),
-			/* @__PURE__ */ jsx("script", { src: rootRelativeUrl(page.route, "assets/navigation.js") }),
-			dev ? /* @__PURE__ */ jsx("script", {
-				type: "module",
-				src: dev.clientScriptPath
-			}) : null,
-			/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } })
-		] })]
-	});
-}
-function issueUrlForRepository(repositoryUrl) {
-	if (!repositoryUrl) return;
-	let url;
-	try {
-		url = new URL(repositoryUrl);
-	} catch {
-		return;
-	}
-	if (url.hostname !== "github.com") return;
-	const [owner, repo] = url.pathname.split("/").filter(Boolean);
-	if (!owner || !repo) return;
-	return `https://github.com/${owner}/${repo}/issues/new`;
-}
-function assetSrc(pageRoute, image) {
-	if (/^(?:[a-z]+:)?\/\//i.test(image) || image.startsWith("data:") || image.startsWith("/")) return image;
-	return rootRelativeUrl(pageRoute, image);
-}
-function GroupBreadcrumbs({ route }) {
-	const dir = route.split("/").slice(0, -1);
-	if (dir.length === 0) return null;
-	return /* @__PURE__ */ jsx("p", {
-		className: "groupBreadcrumbs",
-		children: dir.map(titleFromDir).join(" / ")
-	});
-}
-function titleFromDir(dir) {
-	return dir.replace(/[-_]+/g, " ").replace(/\S+/g, (word) => `${word[0]?.toLocaleUpperCase() ?? ""}${word.slice(1)}`);
-}
-function PageNav({ pageNavigation }) {
-	if (!pageNavigation?.next) return null;
-	return /* @__PURE__ */ jsx("nav", {
-		className: "pageNav",
-		"aria-label": "Page navigation",
-		children: /* @__PURE__ */ jsxs("p", { children: [
-			"Next:",
-			" ",
-			/* @__PURE__ */ jsx("a", {
-				rel: "next",
-				href: pageNavigation.next.href,
-				children: pageNavigation.next.title
-			})
-		] })
-	});
-}
-function NavList({ items, currentRoute, pageRoute }) {
-	return /* @__PURE__ */ jsx("ul", {
-		className: "navList",
-		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
-			className: item.children.length > 0 ? "navGroup" : void 0,
-			children: [item.children.length > 0 && item.hasPage ? /* @__PURE__ */ jsxs("details", {
-				className: "navDisclosure",
-				open: isActiveBranch(item, currentRoute),
-				children: [/* @__PURE__ */ jsx("summary", {
-					className: item.route === currentRoute ? "active" : void 0,
-					children: item.title
-				}), /* @__PURE__ */ jsx(NavList, {
-					items: item.children,
-					currentRoute,
-					pageRoute
-				})]
-			}) : item.children.length > 0 ? /* @__PURE__ */ jsx("span", {
-				className: "navFolder",
-				children: item.title
-			}) : /* @__PURE__ */ jsx("a", {
-				className: item.route === currentRoute ? "active" : void 0,
-				href: relativeUrl(pageRoute, item.route),
-				children: item.title
-			}), item.children.length > 0 && !item.hasPage ? /* @__PURE__ */ jsx(NavList, {
-				items: item.children,
-				currentRoute,
-				pageRoute
-			}) : null]
-		}))
-	});
-}
-function isActiveBranch(item, currentRoute) {
-	return item.route === currentRoute || item.children.some((child) => isActiveBranch(child, currentRoute));
-}
-function Toc({ headings }) {
-	const tocHeadings = headings.filter((heading) => heading.depth > 1 && heading.depth < 4);
-	if (tocHeadings.length === 0) return null;
-	return /* @__PURE__ */ jsxs("nav", {
-		"aria-label": "Table of contents",
-		children: [/* @__PURE__ */ jsx("p", { children: "On this page" }), /* @__PURE__ */ jsx("ul", { children: tocHeadings.map((heading) => /* @__PURE__ */ jsx("li", {
-			className: `tocDepth${heading.depth}`,
-			children: /* @__PURE__ */ jsx("a", {
-				href: `#${heading.id}`,
-				children: heading.text
-			})
-		})) })]
-	});
-}
-//#endregion
-//#region src/render/renderPage.tsx
-function renderPage(page, nav, pageNavigation, css, searchIndexJson, logo, favicon, repositoryUrl, projectName, navigation, dev) {
-	return `<!doctype html>${render(/* @__PURE__ */ jsx(Layout, {
-		page,
-		nav,
-		pageNavigation,
-		css,
-		searchIndexJson,
-		logo,
-		favicon,
-		repositoryUrl,
-		projectName,
-		navigation,
-		dev
-	}))}`;
-}
-//#endregion
 //#region src/core/build.ts
-const sourceDir = path.dirname(fileURLToPath(import.meta.url));
-const require = createRequire(import.meta.url);
 async function buildSite(options) {
 	const input = await resolveInput(options.input, options.cwd, { homePagePreference: options.homePagePreference });
 	const configOptions = mergeConfigOptions({
@@ -1654,11 +1688,7 @@ async function buildSite(options) {
 	});
 	const baseCss = await readRenderAsset("styles.css");
 	const tablerIconsCss = await readRenderAsset("tabler-icons.css");
-	const searchScript = await readRenderAsset("search.js");
-	const copyCodeScript = await readRenderAsset("copy-code.js");
-	const navigationScript = await readRenderAsset("navigation.js");
 	const githubIcon = await readRenderAsset("github-icon.svg");
-	const swupScript = await readSwupAsset();
 	const backgroundResolution = resolveBackgroundOptions({
 		cwd: options.cwd,
 		docsRoot: input.docsRoot,
@@ -1673,19 +1703,20 @@ async function buildSite(options) {
 		defaultText: packageName,
 		favicon: configOptions.favicon
 	});
-	const css = `${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${backgroundResolution.css}${logoResolution.css}${baseCss}`;
+	const mermaid = await createMermaidRenderer({ themeConfig: themeToMermaidConfig(theme, fontResolution.themeFonts) });
+	const css = `${resolveThemeFontImports(theme, configOptions.fonts)}${fontResolution.css}${themeToCssVariables(theme, fontResolution.themeFonts, configOptions.link, configOptions.navigation)}\n${mermaid.css}${backgroundResolution.css}${logoResolution.css}${baseCss}`;
 	const assets = [
 		...fontResolution.assets,
 		...backgroundResolution.assets,
 		...logoResolution.assets
 	];
-	const mermaid = await createMermaidRenderer({ themeConfig: themeToMermaidConfig(theme, fontResolution.themeFonts) });
-	await rm(outDir, {
-		recursive: true,
-		force: true
-	});
-	await mkdir(path.join(outDir, "assets"), { recursive: true });
+	let frontendRenderer;
 	try {
+		await rm(outDir, {
+			recursive: true,
+			force: true
+		});
+		await mkdir(path.join(outDir, "assets"), { recursive: true });
 		const renderedPages = await Promise.all(model.pages.map((page) => renderMarkdownPage(model, page, outDir, {
 			mermaid,
 			shikiTheme: {
@@ -1702,22 +1733,45 @@ async function buildSite(options) {
 		}
 		const searchIndexJson = JSON.stringify(buildSearchIndex(model.pages), null, 2);
 		const pageNavigation = buildPageNavigation(model.pages);
+		const frontendAssets = options.dev ? {
+			scriptPath: options.dev.clientScriptPath,
+			stylePaths: []
+		} : await buildFrontendAssets({
+			cwd: options.cwd,
+			outDir
+		});
+		const renderer = await createFrontendRenderer({
+			cwd: options.cwd,
+			viteServer: options.dev?.viteServer
+		});
+		frontendRenderer = renderer;
 		await Promise.all(model.pages.map(async (page) => {
-			const html = renderPage(page, buildNavigation(model, page), pageNavigation.get(page.route), css, searchIndexJson, logoResolution.logo, logoResolution.favicon, repositoryUrl, projectName, configOptions.navigation, options.dev);
+			const nav = buildNavigation(model, page);
+			const html = renderer.renderPage({
+				page,
+				nav,
+				pageNavigation: pageNavigation.get(page.route),
+				css,
+				searchIndexJson,
+				logo: logoResolution.logo,
+				favicon: logoResolution.favicon,
+				repositoryUrl,
+				projectName,
+				navigation: configOptions.navigation,
+				clientScriptPath: frontendAssets.scriptPath,
+				clientStylePaths: frontendAssets.stylePaths
+			});
 			const outputPath = path.join(outDir, page.outputPath);
 			await mkdir(path.dirname(outputPath), { recursive: true });
 			await writeFile(outputPath, html);
 		}));
 		await writeFile(path.join(outDir, "assets", "lildocs.css"), css);
 		await writeFile(path.join(outDir, "assets", "tabler-icons.css"), tablerIconsCss);
-		await writeFile(path.join(outDir, "assets", "search.js"), searchScript);
-		await writeFile(path.join(outDir, "assets", "copy-code.js"), copyCodeScript);
-		await writeFile(path.join(outDir, "assets", "swup.umd.js"), swupScript);
-		await writeFile(path.join(outDir, "assets", "navigation.js"), navigationScript);
 		await writeFile(path.join(outDir, "assets", "github-icon.svg"), githubIcon);
 		await writeFile(path.join(outDir, "search-index.json"), searchIndexJson);
 		await copyAssets(assets);
 	} finally {
+		await frontendRenderer?.close();
 		await mermaid.close();
 	}
 	return {
@@ -1768,17 +1822,6 @@ function githubRepositoryName(repositoryUrl) {
 	if (!repositoryUrl) return;
 	return /^https:\/\/github\.com\/([^/]+\/[^/]+)$/.exec(repositoryUrl)?.[1];
 }
-async function readRenderAsset(name) {
-	const bundledPath = path.resolve(sourceDir, "render", name);
-	try {
-		return await readFile(bundledPath, "utf8");
-	} catch {
-		return readFile(path.resolve(sourceDir, "../render", name), "utf8");
-	}
-}
-async function readSwupAsset() {
-	return readFile(path.join(path.dirname(require.resolve("swup")), "Swup.umd.js"), "utf8");
-}
 function buildPageNavigation(pages) {
 	const navigation = /* @__PURE__ */ new Map();
 	if (pages.length < 2) return navigation;
@@ -1799,95 +1842,18 @@ function buildPageNavigation(pages) {
 	return navigation;
 }
 //#endregion
-//#region src/core/server.ts
-const MIME_TYPES = new Map([
-	[".html", "text/html; charset=utf-8"],
-	[".css", "text/css; charset=utf-8"],
-	[".js", "text/javascript; charset=utf-8"],
-	[".json", "application/json; charset=utf-8"],
-	[".svg", "image/svg+xml"],
-	[".png", "image/png"],
-	[".jpg", "image/jpeg"],
-	[".jpeg", "image/jpeg"],
-	[".gif", "image/gif"],
-	[".webp", "image/webp"],
-	[".avif", "image/avif"],
-	[".ico", "image/x-icon"],
-	[".txt", "text/plain; charset=utf-8"],
-	[".woff", "font/woff"],
-	[".woff2", "font/woff2"],
-	[".ttf", "font/ttf"],
-	[".otf", "font/otf"],
-	[".eot", "application/vnd.ms-fontobject"]
-]);
-async function serveStaticFile(req, res, outDir) {
-	if (req.method !== "GET" && req.method !== "HEAD") {
-		res.writeHead(405, { allow: "GET, HEAD" });
-		res.end("Method Not Allowed");
-		return;
-	}
-	const pathname = requestPathname$1(req);
-	if (!pathname) {
-		res.writeHead(400);
-		res.end("Bad Request");
-		return;
-	}
-	const relativePath = pathname === "/" ? "index.html" : pathname.slice(1);
-	const filePath = path.resolve(outDir, relativePath);
-	if (!isInside$1(outDir, filePath)) {
-		res.writeHead(404);
-		res.end("Not Found");
-		return;
-	}
-	let fileStat;
-	try {
-		fileStat = await stat(filePath);
-	} catch {
-		res.writeHead(404);
-		res.end("Not Found");
-		return;
-	}
-	if (!fileStat.isFile()) {
-		res.writeHead(404);
-		res.end("Not Found");
-		return;
-	}
-	res.writeHead(200, {
-		"content-length": fileStat.size,
-		"content-type": MIME_TYPES.get(path.extname(filePath).toLowerCase()) ?? "application/octet-stream"
-	});
-	if (req.method === "HEAD") {
-		res.end();
-		return;
-	}
-	createReadStream(filePath).pipe(res);
-}
-function requestPathname$1(req) {
-	try {
-		return decodeURIComponent(new URL(req.url ?? "/", "http://lildocs.local").pathname);
-	} catch {
-		return;
-	}
-}
-function isInside$1(root, candidate) {
-	const relative = path.relative(root, candidate);
-	return relative === "" || !relative.startsWith("..") && !path.isAbsolute(relative);
-}
-//#endregion
 //#region src/core/dev.ts
-const DEV_CLIENT_PATH = "/__lildocs/client.js";
-const DEV_EVENTS_PATH = "/__lildocs/events";
-const DEV_CLIENT_SCRIPT = `
-const events = new EventSource("${DEV_EVENTS_PATH}");
-events.addEventListener("reload", () => location.reload());
-events.onerror = () => console.debug("[lildocs] live reload disconnected");
-`;
 async function startDevServer(options) {
 	const input = await resolveInput(options.input, options.cwd, { homePagePreference: "readme-first" });
 	const outDir = path.resolve(options.cwd, options.outDir);
 	validateDevOutDir(options.cwd, input.docsRoot, outDir, options.outDir);
-	const clients = /* @__PURE__ */ new Set();
-	let watchers = [];
+	await mkdir(outDir, { recursive: true });
+	const vite = await createFrontendDevServer({
+		cwd: options.cwd,
+		root: outDir,
+		host: options.host,
+		port: options.port
+	});
 	let rebuildTimer;
 	let rebuilding = false;
 	let pending = false;
@@ -1909,12 +1875,14 @@ async function startDevServer(options) {
 				background: options.background,
 				link: options.link,
 				homePagePreference: "readme-first",
-				dev: { clientScriptPath: DEV_CLIENT_PATH }
+				dev: {
+					clientScriptPath: frontendDevScriptPath(),
+					viteServer: vite
+				}
 			});
-			await refreshWatchers();
 			const elapsed = Math.round(performance.now() - started);
 			console.log(`Rebuilt ${lastSuccessfulBuild.pages.length} page${lastSuccessfulBuild.pages.length === 1 ? "" : "s"} in ${elapsed}ms`);
-			if (emitReload) sendReload(clients);
+			if (emitReload) vite.ws.send({ type: "full-reload" });
 		} catch (error) {
 			if (throwOnFailure) throw error;
 			const message = error instanceof Error ? error.message : String(error);
@@ -1933,37 +1901,14 @@ async function startDevServer(options) {
 			rebuild(true);
 		}, 150);
 	}
-	async function refreshWatchers() {
-		for (const watcher of watchers) watcher.close();
-		watchers = [];
-		const directories = await collectWatchDirectories(input.docsRoot, outDir);
-		for (const directory of directories) watchers.push(watch(directory, { persistent: true }, (_event, filename) => {
-			if (filename && shouldIgnore(path.join(directory, filename.toString()), input.docsRoot, outDir)) return;
-			scheduleRebuild();
-		}));
-	}
-	await rebuild(false, true);
-	const server = http.createServer((req, res) => {
-		const pathname = requestPathname(req.url);
-		if (pathname === DEV_CLIENT_PATH) {
-			res.writeHead(200, { "content-type": "text/javascript; charset=utf-8" });
-			res.end(DEV_CLIENT_SCRIPT);
-			return;
-		}
-		if (pathname === DEV_EVENTS_PATH) {
-			connectEvents(res, clients);
-			return;
-		}
-		serveStaticFile(req, res, outDir);
+	vite.watcher.add(input.docsRoot);
+	vite.watcher.on("all", (_event, file) => {
+		const changedPath = path.resolve(file);
+		if (!isInside(input.docsRoot, changedPath) || shouldIgnore(changedPath, input.docsRoot, outDir)) return;
+		scheduleRebuild();
 	});
-	await new Promise((resolve, reject) => {
-		server.once("error", reject);
-		server.listen(options.port, options.host, () => {
-			server.off("error", reject);
-			resolve();
-		});
-	});
-	const address = server.address();
+	await rebuild(false, true);
+	const address = vite.httpServer?.address();
 	const actualPort = typeof address === "object" && address ? address.port : options.port;
 	const url = `http://${options.host}:${actualPort}/`;
 	console.log(`lildocs dev server listening at ${url}`);
@@ -1971,11 +1916,7 @@ async function startDevServer(options) {
 		url,
 		close: async () => {
 			if (rebuildTimer) clearTimeout(rebuildTimer);
-			for (const watcher of watchers) watcher.close();
-			for (const client of clients) client.end();
-			await new Promise((resolve, reject) => {
-				server.close((error) => error ? reject(error) : resolve());
-			});
+			await vite.close();
 		}
 	};
 }
@@ -1986,46 +1927,12 @@ function validateDevOutDir(cwd, docsRoot, outDir, requestedOutDir) {
 	if (outDir === docsRoot) throw new LildocsError("Dev output directory cannot be the docs root.");
 	if (isAncestor(outDir, docsRoot)) throw new LildocsError("Dev output directory cannot contain the docs root.");
 }
-async function collectWatchDirectories(docsRoot, outDir) {
-	const directories = /* @__PURE__ */ new Set();
-	async function walk(directory) {
-		if (shouldIgnore(directory, docsRoot, outDir)) return;
-		directories.add(directory);
-		const entries = await readdir(directory, { withFileTypes: true });
-		await Promise.all(entries.map(async (entry) => {
-			if (!entry.isDirectory()) return;
-			await walk(path.join(directory, entry.name));
-		}));
-	}
-	await walk(docsRoot);
-	return [...directories];
-}
 function shouldIgnore(candidate, docsRoot, outDir) {
 	const resolved = path.resolve(candidate);
 	if (resolved === outDir || isAncestor(outDir, resolved)) return true;
 	const relative = path.relative(docsRoot, resolved);
 	return relative === "dist" || relative.startsWith(`dist${path.sep}`) || relative === "node_modules" || relative.startsWith(`node_modules${path.sep}`) || isHiddenOrSystemPath(relative);
 }
-function connectEvents(res, clients) {
-	res.writeHead(200, {
-		"cache-control": "no-cache",
-		connection: "keep-alive",
-		"content-type": "text/event-stream"
-	});
-	res.write(": connected\n\n");
-	clients.add(res);
-	res.on("close", () => clients.delete(res));
-}
-function sendReload(clients) {
-	for (const client of clients) client.write("event: reload\ndata: {}\n\n");
-}
-function requestPathname(url) {
-	try {
-		return new URL(url ?? "/", "http://lildocs.local").pathname;
-	} catch {
-		return;
-	}
-}
 function isAncestor(parent, child) {
 	const relative = path.relative(parent, child);
 	return relative !== "" && !relative.startsWith("..") && !path.isAbsolute(relative);