@tenphi/starlight 0.4.0 → 0.6.0

package/dist/index.js

@@ -4,11 +4,12 @@ import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
 import { cp, mkdir, readFile } from "node:fs/promises";
 import { dirname, extname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { assertValidDocs, createDocsGraph } from "@tenphi/docs";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { COOKBOOK_COMPONENT_NAMES, assertValidDocs, createDocsGraph } from "@tenphi/docs";
 import { configure } from "@tenphi/tasty/core";
 import { tastyIntegration } from "@tenphi/tasty/ssr/astro";
 import { apcaContrast, glaze, okhslToLinearSrgb, relativeLuminanceFromLinearRgb, variantToOkhsl } from "@tenphi/glaze";
+import "@tenphi/tasty";
 //#region src/theme/defaults.ts
 const DEFAULT_THEME_TOKENS = {
 	$gap: "0.5rem",
@@ -27,40 +28,48 @@ const DEFAULT_TYPOGRAPHY_PRESETS = {
 	body: {
 		fontFamily: BODY_FONT,
 		fontSize: "1rem",
-		lineHeight: 1.75,
-		letterSpacing: "0",
-		fontWeight: 400,
-		boldFontWeight: 650
+		lineHeight: 1.65,
+		letterSpacing: "-0.006em",
+		fontWeight: 420,
+		boldFontWeight: 640
 	},
 	heading: {
 		fontFamily: BODY_FONT,
 		fontSize: "1rem",
-		lineHeight: 1.2,
-		letterSpacing: "-0.018em",
-		fontWeight: 650,
-		boldFontWeight: 750
+		lineHeight: 1.15,
+		letterSpacing: "-0.025em",
+		fontWeight: 640,
+		boldFontWeight: 720
+	},
+	h1: heading("clamp(2.5rem, 5vw, 3.25rem)", 1.05, "-0.045em"),
+	h2: heading("clamp(1.75rem, 3vw, 2.125rem)", 1.1, "-0.035em"),
+	h3: heading("1.5rem", 1.15, "-0.025em"),
+	h4: heading("1.25rem", 1.2, "-0.018em"),
+	h5: heading("1.125rem", 1.25, "-0.012em"),
+	h6: heading("1rem", 1.3, "-0.006em"),
+	navigation: {
+		fontFamily: "var(--body-font-family)",
+		fontSize: "0.9375rem",
+		lineHeight: 1.4,
+		letterSpacing: "-0.006em",
+		fontWeight: 540,
+		boldFontWeight: 650
 	},
-	h1: heading("3rem", 1.08, "-0.035em"),
-	h2: heading("2rem", 1.15, "-0.025em"),
-	h3: heading("1.5rem", 1.2, "-0.015em"),
-	h4: heading("1.25rem", 1.25, "-0.01em"),
-	h5: heading("1.125rem", 1.3, "0"),
-	h6: heading("1rem", 1.35, "0"),
 	small: {
 		fontFamily: "var(--body-font-family)",
 		fontSize: "0.875rem",
-		lineHeight: 1.5,
-		letterSpacing: "0",
-		fontWeight: 400,
-		boldFontWeight: 700
+		lineHeight: 1.45,
+		letterSpacing: "-0.002em",
+		fontWeight: 420,
+		boldFontWeight: 650
 	},
 	code: {
 		fontFamily: "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
 		fontSize: "0.875rem",
-		lineHeight: 1.6,
+		lineHeight: 1.65,
 		letterSpacing: "0",
 		fontWeight: 400,
-		boldFontWeight: 700
+		boldFontWeight: 650
 	}
 };
 function resolveThemeTokens(tokens = {}) {
@@ -108,16 +117,18 @@ function resolveDocsTheme(theme = {}) {
 	const surface2 = glaze.color({
 		from: surfaceFrom,
 		base: surface,
-		tone: ["-2", "-4"],
+		tone: "-2",
 		mode: "auto",
-		darkSaturation: .35
+		saturationFactor: .9,
+		darkSaturation: .325
 	}, glazeOptions);
 	const surface3 = glaze.color({
 		from: surfaceFrom,
-		base: surface,
-		tone: ["-4", "-8"],
+		base: surface2,
+		tone: "-2",
 		mode: "auto",
-		darkSaturation: .35
+		saturationFactor: .8,
+		darkSaturation: .3
 	}, glazeOptions);
 	const text = glaze.color({
 		from: theme.palette?.text ?? "#20232a",
@@ -160,6 +171,33 @@ function resolveDocsTheme(theme = {}) {
 	});
 	const resolvedSurface = surface.resolve();
 	const resolvedAccent = accentText.resolve();
+	const shadowTheme = glaze({
+		hue: variantToOkhsl(resolvedSurface.light).h,
+		saturation: variantToOkhsl(resolvedSurface.light).s * 100,
+		darkHue: variantToOkhsl(resolvedSurface.dark).h,
+		darkSaturation: variantToOkhsl(resolvedSurface.dark).s * 100
+	}, void 0, glazeOptions);
+	shadowTheme.colors({
+		surface: {
+			from: surfaceFrom,
+			mode: "auto",
+			darkSaturation: .35
+		},
+		text: {
+			from: theme.palette?.text ?? "#20232a",
+			base: "surface",
+			role: "text",
+			contrast: { apca: [75, 90] },
+			mode: "auto"
+		},
+		shadow: {
+			type: "shadow",
+			bg: "surface",
+			fg: "text",
+			intensity: [12, 20],
+			tuning: { alphaMax: .28 }
+		}
+	});
 	const scores = {
 		light: score(resolvedAccent.light, resolvedSurface.light),
 		dark: score(resolvedAccent.dark, resolvedSurface.dark),
@@ -177,20 +215,21 @@ function resolveDocsTheme(theme = {}) {
 		});
 	}
 	const outputOptions = { modes: { highContrast: true } };
-	const colors = {
-		surface: surface.json(outputOptions),
-		surface2: surface2.json(outputOptions),
-		surface3: surface3.json(outputOptions),
-		text: text.json(outputOptions),
-		textSoft: textSoft.json(outputOptions),
-		accentText: accentText.json(outputOptions),
-		accentSurface: accentSurface.json(outputOptions),
-		accentSurfaceText: accentSurfaceText.json(outputOptions),
-		focus: focus.json(outputOptions)
-	};
+	const shadow = shadowTheme.json(outputOptions).shadow;
+	if (!shadow) throw new Error("The Glaze shadow token failed to resolve.");
 	return {
-		css: themeCss(colors, theme),
-		colors,
+		colors: {
+			surface: surface.json(outputOptions),
+			surface2: surface2.json(outputOptions),
+			surface3: surface3.json(outputOptions),
+			text: text.json(outputOptions),
+			textSoft: textSoft.json(outputOptions),
+			accentText: accentText.json(outputOptions),
+			accentSurface: accentSurface.json(outputOptions),
+			accentSurfaceText: accentSurfaceText.json(outputOptions),
+			focus: focus.json(outputOptions),
+			shadow
+		},
 		tokens: resolveThemeTokens(theme.tokens),
 		presets: resolveTypographyPresets(theme.presets),
 		contrast: scores,
@@ -208,71 +247,115 @@ function luminance(variant) {
 	const { h, s, l } = variantToOkhsl(variant);
 	return relativeLuminanceFromLinearRgb(okhslToLinearSrgb(h, s, l, variant.pastel));
 }
-function themeCss(colors, theme) {
-	const tokens = resolveThemeTokens(theme.tokens);
-	const presets = resolveTypographyPresets(theme.presets);
-	const designDeclarations = [...Object.entries(tokens).map(([name, value]) => `${tokenProperty(name)}:${String(value)}`), ...Object.entries(presets).flatMap(([name, preset]) => Object.entries(preset).map(([property, value]) => `--${kebab(name)}-${kebab(property)}:${String(value)}`))].join(";");
-	const declarations = (mode) => [
-		`--td-surface:${colors.surface[mode]}`,
-		`--td-surface-2:${colors.surface2[mode]}`,
-		`--td-surface-3:${colors.surface3[mode]}`,
-		`--td-text:${colors.text[mode]}`,
-		`--td-text-soft:${colors.textSoft[mode]}`,
-		`--td-accent-text:${colors.accentText[mode]}`,
-		`--td-accent-surface:${colors.accentSurface[mode]}`,
-		`--td-accent-surface-text:${colors.accentSurfaceText[mode]}`,
-		`--td-focus:${colors.focus[mode]}`,
-		"--td-surface-2-hover:color-mix(in oklab,var(--td-text) 3%,var(--td-surface-2))",
-		"--td-surface-2-pressed:color-mix(in oklab,var(--td-text) 9%,var(--td-surface-2))",
-		"--td-surface-3-hover:color-mix(in oklab,var(--td-text) 3%,var(--td-surface-3))",
-		"--td-surface-3-pressed:color-mix(in oklab,var(--td-text) 9%,var(--td-surface-3))",
-		"--td-border:color-mix(in oklab,var(--td-text) 18%,var(--td-surface))",
-		"--td-border-strong:color-mix(in oklab,var(--td-text) 34%,var(--td-surface))",
-		"--td-shadow:color-mix(in oklab,var(--td-text) 16%,transparent)",
-		"--td-overlay:color-mix(in oklab,var(--td-text) 58%,transparent)"
-	].join(";");
-	return [
-		`:root{${designDeclarations};${declarations("dark")}}`,
-		`:root[data-theme=light]{${declarations("light")}}`,
-		`@media(prefers-color-scheme:light){:root:not([data-theme]){${declarations("light")}}}`,
-		`@media(prefers-contrast:more){:root{${declarations("darkContrast")}}:root[data-theme=light]{${declarations("lightContrast")}}@media(prefers-color-scheme:light){:root:not([data-theme]){${declarations("lightContrast")}}}}`,
-		`:root[data-contrast=more]{${declarations("darkContrast")}}`,
-		`:root[data-theme=light][data-contrast=more]{${declarations("lightContrast")}}`
-	].join("\n");
+//#endregion
+//#region src/theme/tasty-config.ts
+const TASTY_UNITS = {
+	x: "var(--gap)",
+	r: "var(--radius)",
+	cr: "var(--card-radius)",
+	bw: "var(--border-width)"
+};
+const LIGHT = "theme=light | (@media(prefers-color-scheme: light) & :not([data-theme]))";
+const HIGH_CONTRAST = "contrast=more | (@media(prefers-contrast: more) & :not([data-contrast]))";
+function tastyTokens(theme) {
+	const tokens = Object.fromEntries(Object.entries(theme.tokens).filter(([name]) => name.startsWith("$")));
+	Object.assign(tokens, {
+		"#surface": colorStates(theme.colors.surface),
+		"#surface-2": colorStates(theme.colors.surface2),
+		"#surface-3": colorStates(theme.colors.surface3),
+		"#surface-2-hover": mix("#text", 3, "#surface-2"),
+		"#surface-2-pressed": mix("#text", 9, "#surface-2"),
+		"#surface-3-hover": mix("#text", 3, "#surface-3"),
+		"#surface-3-pressed": mix("#text", 9, "#surface-3"),
+		"#text": colorStates(theme.colors.text),
+		"#text-soft": colorStates(theme.colors.textSoft),
+		"#border": mix("#text", 18, "#surface"),
+		"#border-strong": mix("#text", 34, "#surface"),
+		"#accent-text": colorStates(theme.colors.accentText),
+		"#accent-surface": colorStates(theme.colors.accentSurface),
+		"#accent-surface-text": colorStates(theme.colors.accentSurfaceText),
+		"#focus": colorStates(theme.colors.focus),
+		"#shadow": colorStates(theme.colors.shadow),
+		"#overlay": mix("#text", 58, "transparent")
+	});
+	return tokens;
+}
+function colorStates(colors) {
+	return {
+		"": colors.dark,
+		[LIGHT]: colors.light,
+		[HIGH_CONTRAST]: colors.darkContrast,
+		[`(${LIGHT}) & (${HIGH_CONTRAST})`]: colors.lightContrast
+	};
 }
-function tokenProperty(name) {
-	if (name.startsWith("--")) return name;
-	return `--${name.replace(/^\$/, "")}`;
+function mix(foreground, percentage, background) {
+	return `color-mix(in oklab, ${foreground} ${percentage}%, ${background})`;
 }
-function kebab(value) {
-	return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9_-]/g, "-").toLowerCase();
+//#endregion
+//#region src/components/component-styles.ts
+const sharedConfiguration = globalThis;
+const cookbookComponentNames = new Set(COOKBOOK_COMPONENT_NAMES);
+function configureComponentStyles(styles) {
+	sharedConfiguration.__tenphiCookbookComponentStyles = styles ?? {};
 }
+/** Preserve custom anatomy names from the pre-component style API. */
+function resolveLegacyAnatomyStyles(styles) {
+	if (!styles) return void 0;
+	const entries = Object.entries(styles).filter((entry) => !cookbookComponentNames.has(entry[0]) && entry[1] !== void 0).map(([name, value]) => [`[data-tasty-anatomy="${name}"]`, isModeConfig(value) ? value.styles : value]);
+	return entries.length ? Object.fromEntries(entries) : void 0;
+}
+function isModeConfig(value) {
+	return "mode" in value && (value.mode === "extend" || value.mode === "replace") && "styles" in value;
+}
+//#endregion
+//#region src/components/tasty-states.js
+const cookbookStates = {
+	"@mobile": "@media(w < 50rem)",
+	"@desktop": "@media(w >= 50rem)",
+	"@small": "@media(w <= 40rem)",
+	"@shell-mobile": "@media(w <= 48rem)",
+	"@shell-desktop": "@media(w > 48rem)",
+	"@narrow-layout": "@media(w < 72rem)",
+	"@medium-layout": "@media(w >= 50rem) & @media(w < 72rem)",
+	"@reduced-motion": "@media(prefers-reduced-motion: reduce)"
+};
 //#endregion
 //#region src/integration.ts
 const packageRequire = createRequire(import.meta.url);
 const starlightRoot = dirname(packageRequire.resolve("@astrojs/starlight"));
 const tastyStaticMiddleware = packageRequire.resolve("@tenphi/tasty/ssr/astro-middleware-static");
+const tastyExtractStaticMiddleware = packageRequire.resolve("@tenphi/tasty/ssr/astro-middleware-extract-static");
+const astroReactServer = packageRequire.resolve("@astrojs/react/server.js");
+const astroReactClient = packageRequire.resolve("@astrojs/react/client.js");
+const astroReactIntegration = packageRequire.resolve("@astrojs/react");
+const importNative = new Function("specifier", "return import(specifier)");
 function cookbook(options = {}) {
 	const docsTheme = resolveDocsTheme(options.config?.theme);
 	if (docsTheme.diagnostics.some((diagnostic) => diagnostic.severity === "error")) throw new Error(docsTheme.diagnostics.map((diagnostic) => diagnostic.message).join("\n"));
 	configureTastyTheme(options.config?.theme, docsTheme);
-	const cssPath = fileURLToPath(new URL("./styles.css", import.meta.url));
+	configureComponentStyles(options.config?.theme?.styles);
 	const searchClientPath = fileURLToPath(new URL("./client/search.js", import.meta.url));
 	const appearanceClientPath = fileURLToPath(new URL("./client/appearance.js", import.meta.url));
 	const components = {
 		Header: fileURLToPath(new URL("./overrides/Header.astro", import.meta.url)),
 		Sidebar: fileURLToPath(new URL("./overrides/Sidebar.astro", import.meta.url)),
+		MobileMenuFooter: fileURLToPath(new URL("./overrides/MobileMenuFooter.astro", import.meta.url)),
+		ThemeSelect: fileURLToPath(new URL("./overrides/ThemeSelect.astro", import.meta.url)),
 		...options.config?.components?.overrides
 	};
 	const navigation = resolveNavigationLayout(options.config?.navigation);
-	const inner = [tastyIntegration({ islands: false }), starlight({
+	const tasty = tastyIntegration({
+		islands: false,
+		css: { mode: "extract" }
+	});
+	const starlightIntegration = starlight({
 		title: options.config?.site?.title ?? "Documentation",
 		...options.config?.site?.description ? { description: options.config.site.description } : {},
-		customCss: ["virtual:cookbook/theme.css", cssPath],
 		...options.config?.search?.enabled === false ? { pagefind: false } : {},
 		components,
 		sidebar: starlightSidebar(navigation)
-	})];
+	});
+	let inner = [tasty, starlightIntegration];
 	let projectRoot = options.root;
 	let graphConfig = options.config;
 	let graph;
@@ -291,6 +374,11 @@ function cookbook(options = {}) {
 		name: "cookbook",
 		hooks: {
 			"astro:config:setup": async (context) => {
+				inner = [
+					(await importNative(pathToFileURL(astroReactIntegration).href)).default(),
+					tasty,
+					starlightIntegration
+				];
 				if (context.config.integrations.some((integration) => integration.name === "@astrojs/starlight")) throw new Error("Cookbook already includes Starlight. Remove the direct @astrojs/starlight integration before continuing.");
 				projectRoot ??= fileURLToPath(context.config.root);
 				const base = options.config?.build?.base ?? context.config.base;
@@ -306,24 +394,47 @@ function cookbook(options = {}) {
 					base,
 					output: "static",
 					vite: {
-						ssr: { external: ["@tenphi/docs"] },
-						plugins: [virtualDocsPlugin(docsTheme.css, () => ({
-							entries: graph?.entries ?? [],
-							routes: graph?.routes ?? [],
-							site: graph?.config.site ?? options.config?.site ?? {},
-							base: graph?.config.build.base ?? base,
-							search: graph?.config.search.enabled ?? options.config?.search?.enabled ?? true
-						}), navigation)],
-						resolve: { alias: [{
-							find: "@astrojs/starlight",
-							replacement: starlightRoot
-						}, {
-							find: "@tenphi/tasty/ssr/astro-middleware-static",
-							replacement: tastyStaticMiddleware
-						}] }
+						ssr: { external: [
+							"@tenphi/docs",
+							"react",
+							"react-dom",
+							"react-dom/server"
+						] },
+						plugins: [virtualDocsPlugin(async () => {
+							const loaded = await loadGraph();
+							return {
+								entries: loaded.entries,
+								routes: loaded.routes,
+								site: documentedSite(loaded),
+								base: loaded.config.build.base,
+								search: loaded.config.search.enabled
+							};
+						}, navigation)],
+						resolve: { alias: [
+							{
+								find: "@astrojs/starlight",
+								replacement: starlightRoot
+							},
+							{
+								find: "@tenphi/tasty/ssr/astro-middleware-static",
+								replacement: tastyStaticMiddleware
+							},
+							{
+								find: "@tenphi/tasty/ssr/astro-middleware-extract-static",
+								replacement: tastyExtractStaticMiddleware
+							},
+							{
+								find: "@astrojs/react/server.js",
+								replacement: astroReactServer
+							},
+							{
+								find: "@astrojs/react/client.js",
+								replacement: astroReactClient
+							}
+						] }
 					}
 				});
-				await callInner(inner.slice(0, 1), "astro:config:setup", context);
+				await callInner(inner.slice(0, 2), "astro:config:setup", context);
 				if (!usingStarlight) {
 					graph = await createDocsGraph({
 						root: projectRoot,
@@ -339,20 +450,20 @@ function cookbook(options = {}) {
 					});
 					return;
 				}
-				const starlightIntegration = inner[1];
-				if (starlightIntegration) {
+				const starlightWithPlugins = inner[2];
+				if (starlightWithPlugins) {
 					const selfIndex = context.config.integrations.findIndex((integration) => integration.name === "cookbook");
-					context.config.integrations.splice(selfIndex + 1, 0, starlightIntegration);
+					context.config.integrations.splice(selfIndex + 1, 0, starlightWithPlugins);
 					try {
-						await callInner([starlightIntegration], "astro:config:setup", context);
+						await callInner([starlightWithPlugins], "astro:config:setup", context);
 					} finally {
-						const placeholderIndex = context.config.integrations.indexOf(starlightIntegration);
+						const placeholderIndex = context.config.integrations.indexOf(starlightWithPlugins);
 						if (placeholderIndex >= 0) context.config.integrations.splice(placeholderIndex, 1);
 					}
 				}
 			},
 			"astro:config:done": async (context) => {
-				await callInner(usingStarlight ? inner : inner.slice(0, 1), "astro:config:done", context);
+				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:config:done", context);
 			},
 			"astro:server:setup": async ({ server }) => {
 				let assets = docsAssetMap(await loadGraph());
@@ -394,10 +505,10 @@ function cookbook(options = {}) {
 			},
 			"astro:build:start": async (context) => {
 				await loadGraph();
-				await callInner(usingStarlight ? inner : inner.slice(0, 1), "astro:build:start", context);
+				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:build:start", context);
 			},
 			"astro:build:done": async (context) => {
-				await callInner(usingStarlight ? inner : inner.slice(0, 1), "astro:build:done", context);
+				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:build:done", context);
 				if (!graph) return;
 				const output = fileURLToPath(context.dir);
 				for (const asset of graph.assets) {
@@ -423,6 +534,19 @@ function cookbook(options = {}) {
 function docsAssetMap(graph) {
 	return new Map(graph.assets.flatMap((asset) => asset.publicPath && asset.sourcePath ? [[asset.publicPath, asset]] : []));
 }
+function documentedSite(graph) {
+	if (graph.config.site.version) return graph.config.site;
+	const packages = new Set(graph.entries.flatMap((entry) => entry.package?.resolved ? [entry.package.resolved] : []));
+	if (packages.size !== 1) return graph.config.site;
+	const resolved = packages.values().next().value;
+	if (!resolved) return graph.config.site;
+	const separator = resolved.lastIndexOf("@");
+	if (separator <= 0 || separator === resolved.length - 1) return graph.config.site;
+	return {
+		...graph.config.site,
+		version: resolved.slice(separator + 1)
+	};
+}
 function requestPath(url) {
 	try {
 		return decodeURIComponent(new URL(url ?? "/", "http://localhost").pathname);
@@ -443,41 +567,19 @@ function assetContentType(pathname) {
 	}
 }
 function configureTastyTheme(theme, resolved) {
-	const tokens = Object.fromEntries(Object.entries(resolved.tokens).filter(([name]) => name.startsWith("$")));
-	Object.assign(tokens, {
-		"#surface": "var(--td-surface)",
-		"#surface-2": "var(--td-surface-2)",
-		"#surface-3": "var(--td-surface-3)",
-		"#text": "var(--td-text)",
-		"#text-soft": "var(--td-text-soft)",
-		"#border": "var(--td-border)",
-		"#border-strong": "var(--td-border-strong)",
-		"#accent-text": "var(--td-accent-text)",
-		"#accent-surface": "var(--td-accent-surface)",
-		"#accent-surface-text": "var(--td-accent-surface-text)",
-		"#focus": "var(--td-focus)"
-	});
-	const globalStyles = anatomyStyles(theme?.styles);
+	const tokens = tastyTokens(resolved);
+	const globalStyles = resolveLegacyAnatomyStyles(theme?.styles);
 	configure({
-		...theme?.states ? { states: theme.states } : {},
-		units: {
-			x: "var(--gap)",
-			r: "var(--radius)",
-			cr: "var(--card-radius)",
-			bw: "var(--border-width)"
+		states: {
+			...cookbookStates,
+			...theme?.states
 		},
+		units: TASTY_UNITS,
 		tokens,
 		presets: resolved.presets,
 		...globalStyles ? { globalStyles } : {}
 	});
 }
-function anatomyStyles(styles) {
-	if (!styles) return void 0;
-	return Object.fromEntries(Object.entries(styles).filter((entry) => isRecord(entry[1])).map(([name, value]) => [`[data-tasty-anatomy="${name}"]`, value]));
-}
-function isRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
 function starlightSidebar(layout) {
 	const fallback = layout.items?.length ? layout.items.map(starlightSidebarItem) : [{ autogenerate: { directory: "" } }];
 	if (!layout.sectioned) return fallback;
@@ -516,20 +618,17 @@ async function callInner(integrations, hook, context) {
 		if (typeof handler === "function") await handler(context);
 	}
 }
-function virtualDocsPlugin(css, getContent, layout) {
-	const themeId = "\0virtual:cookbook/theme.css";
+function virtualDocsPlugin(getContent, layout) {
 	const configId = "\0virtual:cookbook/config";
 	const layoutId = "\0virtual:cookbook/layout";
 	return {
-		name: "cookbook-theme",
+		name: "cookbook-data",
 		resolveId(id) {
-			if (id === "virtual:cookbook/theme.css") return themeId;
 			if (id === "virtual:cookbook/config") return configId;
 			if (id === "virtual:cookbook/layout") return layoutId;
 		},
-		load(id) {
-			if (id === themeId) return css;
-			if (id === configId) return `export const content = ${JSON.stringify(getContent())};`;
+		async load(id) {
+			if (id === configId) return `export const content = ${JSON.stringify(await getContent())};`;
 			if (id === layoutId) return `export const layout = ${JSON.stringify(layout)};`;
 		}
 	};