@tenphi/starlight 0.6.1 → 0.8.0

package/dist/index.js

@@ -2,14 +2,107 @@ import { n as starlight, t as createStarlightCollection } from "./content-Cwk8rm
 import { a as resolveNavigationLayout } from "./navigation-CkQXI2Zb.js";
 import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
-import { cp, mkdir, readFile } from "node:fs/promises";
+import { cp, mkdir, readFile, readdir, unlink, writeFile } from "node:fs/promises";
 import { dirname, extname, join } from "node:path";
 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 { renderMermaidSVG } from "beautiful-mermaid";
 import { apcaContrast, glaze, okhslToLinearSrgb, relativeLuminanceFromLinearRgb, variantToOkhsl } from "@tenphi/glaze";
 import "@tenphi/tasty";
+//#region src/markdown/rehype-mermaid.ts
+const sourceStyleDirective = /^\s*(?:classDef|style|linkStyle)\s+.*$/gim;
+const accessibilityDirective = /^\s*acc(?:Title|Descr):\s*.*$/gim;
+const svgStyleBlock = /\s*<style>[\s\S]*?<\/style>\s*/gi;
+const supportedDiagram = /^(?:(?:flowchart|graph)(?:\s+(?:TB|TD|BT|RL|LR))?|stateDiagram(?:-v2)?|sequenceDiagram|classDiagram|erDiagram)\b/i;
+/** Render supported Mermaid fences to theme-responsive SVG at build time. */
+function rehypeMermaid() {
+	return (tree) => {
+		replaceMermaidCodeBlocks(tree);
+	};
+}
+/** Sätteri adapter for Astro's default Markdown processor. */
+const satteriMermaid = {
+	name: "cookbook:mermaid",
+	element: {
+		filter: ["pre"],
+		visit(node, context) {
+			if (!isMermaidCodeBlock(node)) return;
+			try {
+				context.replaceNode(node, {
+					type: "raw",
+					value: renderMermaidElement(context.textContent(node))
+				});
+			} catch {
+				context.setProperty(node, "data-mermaid-state", "error");
+			}
+		}
+	}
+};
+function replaceMermaidCodeBlocks(parent) {
+	if (!parent.children) return;
+	for (const [index, child] of parent.children.entries()) {
+		if (isMermaidCodeBlock(child)) {
+			const source = textContent(child);
+			try {
+				parent.children[index] = {
+					type: "raw",
+					value: renderMermaidElement(source)
+				};
+			} catch {
+				child.properties = {
+					...child.properties,
+					"data-mermaid-state": "error"
+				};
+			}
+			continue;
+		}
+		replaceMermaidCodeBlocks(child);
+	}
+}
+function renderMermaidElement(source) {
+	return `<div class="td-mermaid" data-mermaid-state="ready">${accessibleSvg(render(source), source)}</div>`;
+}
+function isMermaidCodeBlock(node) {
+	if (node.type !== "element" || node.tagName !== "pre") return false;
+	return node.properties?.dataLanguage === "mermaid" || node.properties?.["data-language"] === "mermaid";
+}
+function render(source) {
+	const header = source.split("\n").map((line) => line.trim()).find((line) => line && !line.startsWith("%%") && !/^acc(?:Title|Descr):/i.test(line));
+	if (!header || !supportedDiagram.test(header)) throw new Error("Unsupported Mermaid diagram type");
+	const safeSource = source.replace(sourceStyleDirective, "").replace(accessibilityDirective, "");
+	return renderMermaidSVG(safeSource, {
+		bg: "var(--surface-2-color)",
+		fg: "var(--text-color)",
+		line: "var(--text-soft-color)",
+		accent: "var(--accent-text-color)",
+		muted: "var(--text-soft-color)",
+		surface: "var(--surface-color)",
+		border: "var(--border-strong-color)",
+		font: "Onest Variable",
+		transparent: true
+	}).replace(svgStyleBlock, "");
+}
+function accessibleSvg(svg, source) {
+	const title = directive(source, "accTitle") ?? "Diagram";
+	const description = directive(source, "accDescr") ?? "Rendered from a Mermaid code block.";
+	return svg.replace("<svg ", `<svg role="img" aria-label="${escapeAttribute(title)}" `).replace(/(<svg\b[^>]*>)/, `$1<title>${escapeText(title)}</title><desc>${escapeText(description)}</desc>`);
+}
+function directive(source, name) {
+	return source.match(new RegExp(`^\\s*${name}:\\s*(.+)$`, "im"))?.[1]?.trim();
+}
+function textContent(node) {
+	if (node.type === "text") return node.value ?? "";
+	return node.children?.map(textContent).join("") ?? "";
+}
+function escapeAttribute(value) {
+	return escapeText(value).replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
+}
+function escapeText(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+//#endregion
 //#region src/theme/defaults.ts
 const DEFAULT_THEME_TOKENS = {
 	$gap: "0.5rem",
@@ -109,80 +202,39 @@ function resolveDocsTheme(theme = {}) {
 		...theme.contrastLevel !== void 0 ? { contrastLevel: theme.contrastLevel } : {}
 	};
 	const surfaceFrom = theme.palette?.surface ?? "#ffffff";
-	const surface = glaze.color({
+	const resolvedSurfaceSeed = glaze.color({
 		from: surfaceFrom,
 		mode: "auto",
 		darkSaturation: .35
-	});
-	const surface2 = glaze.color({
-		from: surfaceFrom,
-		base: surface,
-		tone: "-2",
-		mode: "auto",
-		saturationFactor: .9,
-		darkSaturation: .325
-	}, glazeOptions);
-	const surface3 = glaze.color({
-		from: surfaceFrom,
-		base: surface2,
-		tone: "-2",
-		mode: "auto",
-		saturationFactor: .8,
-		darkSaturation: .3
-	}, glazeOptions);
-	const text = glaze.color({
-		from: theme.palette?.text ?? "#20232a",
-		base: surface,
-		role: "text",
-		contrast: { apca: [75, 90] },
-		mode: "auto"
-	}, glazeOptions);
-	const textSoft = glaze.color({
-		from: theme.palette?.textSoft ?? "#626875",
-		base: surface,
-		role: "text",
-		contrast: { apca: [60, 75] },
-		mode: "auto"
-	}, glazeOptions);
-	const accentText = glaze.color({
-		from: brand.from,
-		base: surface,
-		role: "text",
-		contrast: { apca: authoredTarget },
-		mode: "auto"
-	}, glazeOptions);
-	const focus = glaze.color({
-		from: brand.from,
-		base: surface,
-		role: "border",
-		contrast: { apca: authoredTarget },
-		mode: "auto"
-	}, glazeOptions);
-	const accentSurface = glaze.color({
-		from: brand.from,
-		mode: "fixed"
-	});
-	const accentSurfaceText = glaze.color({
-		from: "#ffffff",
-		base: accentSurface,
-		role: "text",
-		contrast: { apca: 60 },
-		mode: "auto"
-	});
-	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
+	}).resolve();
+	const lightSurface = variantToOkhsl(resolvedSurfaceSeed.light);
+	const darkSurface = variantToOkhsl(resolvedSurfaceSeed.dark);
+	const colorTheme = glaze({
+		hue: lightSurface.h,
+		saturation: lightSurface.s * 100,
+		darkHue: darkSurface.h,
+		darkSaturation: Math.min(100, darkSurface.s * 100 / .35)
 	}, void 0, glazeOptions);
-	shadowTheme.colors({
+	colorTheme.colors({
 		surface: {
 			from: surfaceFrom,
 			mode: "auto",
 			darkSaturation: .35
 		},
+		"surface-2": {
+			base: "surface",
+			tone: "-2",
+			mode: "auto",
+			saturation: .75,
+			darkSaturation: .275
+		},
+		"surface-3": {
+			base: "surface-2",
+			tone: "-2",
+			mode: "auto",
+			saturation: .65,
+			darkSaturation: .25
+		},
 		text: {
 			from: theme.palette?.text ?? "#20232a",
 			base: "surface",
@@ -190,14 +242,176 @@ function resolveDocsTheme(theme = {}) {
 			contrast: { apca: [75, 90] },
 			mode: "auto"
 		},
+		"text-soft": {
+			from: theme.palette?.textSoft ?? "#626875",
+			base: "surface",
+			role: "text",
+			contrast: { apca: [60, 75] },
+			mode: "auto"
+		},
+		"text-muted": mix("surface", "text", 66),
+		"surface-2-hover": mix("surface-2", "text", [3, 6]),
+		"surface-2-pressed": mix("surface-2", "text", [9, 14]),
+		"surface-3-hover": mix("surface-3", "text", [3, 6]),
+		"surface-3-pressed": mix("surface-3", "text", [9, 14]),
+		"accent-text": {
+			from: brand.from,
+			base: "surface",
+			role: "text",
+			contrast: { apca: [normalTarget, highTarget] },
+			mode: "auto"
+		},
+		focus: {
+			from: brand.from,
+			base: "surface",
+			role: "border",
+			contrast: { apca: [normalTarget, highTarget] },
+			mode: "auto"
+		},
+		"accent-surface": {
+			from: brand.from,
+			mode: "fixed"
+		},
+		"accent-surface-text": {
+			from: "#ffffff",
+			base: "accent-surface",
+			role: "text",
+			contrast: { apca: [60, 75] },
+			mode: "auto"
+		},
+		"accent-surface-subtle": mix("surface", "accent-surface", [12, 18]),
+		"accent-surface-2-subtle": mix("surface-2", "accent-surface", [12, 18]),
 		shadow: {
 			type: "shadow",
 			bg: "surface",
 			fg: "text",
 			intensity: [12, 20],
 			tuning: { alphaMax: .28 }
+		},
+		overlay: {
+			type: "mix",
+			base: "surface",
+			target: "text",
+			value: [58, 68],
+			blend: "transparent"
+		},
+		clear: {
+			from: "#ffffff",
+			mode: "fixed",
+			opacity: 0
+		},
+		...statusColors("orange", "#d97706"),
+		...statusColors("green", "#16a34a"),
+		...statusColors("blue", "#2563eb"),
+		...statusColors("purple", "#9333ea"),
+		...statusColors("red", "#dc2626")
+	});
+	const resolvedBrandSeed = glaze.color({
+		from: brand.from,
+		mode: "fixed"
+	}).resolve();
+	const lightBrand = variantToOkhsl(resolvedBrandSeed.light);
+	const darkBrand = variantToOkhsl(resolvedBrandSeed.dark);
+	const borderTheme = glaze({
+		hue: lightBrand.h,
+		saturation: lightBrand.s * 100,
+		darkHue: darkBrand.h,
+		darkSaturation: darkBrand.s * 100
+	}, void 0, glazeOptions);
+	borderTheme.colors({
+		surface: {
+			from: surfaceFrom,
+			mode: "auto",
+			darkSaturation: .35
+		},
+		border: {
+			base: "surface",
+			tone: ["-9", "-22"],
+			saturation: .205,
+			mode: "auto"
+		},
+		"border-strong": {
+			base: "surface",
+			tone: ["-20", "-38"],
+			saturation: .205,
+			mode: "auto"
+		}
+	});
+	const syntaxTheme = glaze(210, 90, glazeOptions);
+	syntaxTheme.colors({
+		bg: {
+			tone: 100,
+			saturation: .1
+		},
+		text: {
+			base: "bg",
+			tone: 0,
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 0
+		},
+		comment: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: .01,
+			hue: 210
+		},
+		punctuation: {
+			base: "bg",
+			contrast: { wcag: [6, "AAA"] },
+			saturation: .01,
+			hue: 210
+		},
+		keyword: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80
+		},
+		string: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 15
+		},
+		token: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 125
+		},
+		property: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 155
+		},
+		number: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 70
+		},
+		function: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 210
+		},
+		value: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 210
+		},
+		operator: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 340
 		}
 	});
+	const resolvedColors = colorTheme.resolve();
+	const resolvedSurface = requiredResolvedColor(resolvedColors, "surface");
+	const resolvedAccent = requiredResolvedColor(resolvedColors, "accent-text");
 	const scores = {
 		light: score(resolvedAccent.light, resolvedSurface.light),
 		dark: score(resolvedAccent.dark, resolvedSurface.dark),
@@ -215,20 +429,39 @@ function resolveDocsTheme(theme = {}) {
 		});
 	}
 	const outputOptions = { modes: { highContrast: true } };
-	const shadow = shadowTheme.json(outputOptions).shadow;
-	if (!shadow) throw new Error("The Glaze shadow token failed to resolve.");
+	const tastyOptions = {
+		...outputOptions,
+		states: {
+			dark: "theme=dark | (@media(prefers-color-scheme: dark) & :not([data-theme]))",
+			highContrast: "contrast=more | (@media(prefers-contrast: more) & :not([data-contrast]))"
+		}
+	};
+	const resolvedPalette = colorTheme.json(outputOptions);
+	const colorTokens = colorTheme.tasty(tastyOptions);
+	const borderTokens = borderTheme.tasty(tastyOptions);
+	const syntaxTokens = glaze.palette({ syntax: syntaxTheme }).tasty({
+		...tastyOptions,
+		prefix: true,
+		primary: false
+	});
 	return {
 		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
+			surface: requiredJsonColor(resolvedPalette, "surface"),
+			surface2: requiredJsonColor(resolvedPalette, "surface-2"),
+			surface3: requiredJsonColor(resolvedPalette, "surface-3"),
+			text: requiredJsonColor(resolvedPalette, "text"),
+			textSoft: requiredJsonColor(resolvedPalette, "text-soft"),
+			accentText: requiredJsonColor(resolvedPalette, "accent-text"),
+			accentSurface: requiredJsonColor(resolvedPalette, "accent-surface"),
+			accentSurfaceText: requiredJsonColor(resolvedPalette, "accent-surface-text"),
+			focus: requiredJsonColor(resolvedPalette, "focus"),
+			shadow: requiredJsonColor(resolvedPalette, "shadow")
+		},
+		colorTokens: {
+			...colorTokens,
+			"#border": requiredJsonColor(borderTokens, "#border"),
+			"#border-strong": requiredJsonColor(borderTokens, "#border-strong"),
+			...syntaxTokens
 		},
 		tokens: resolveThemeTokens(theme.tokens),
 		presets: resolveTypographyPresets(theme.presets),
@@ -236,6 +469,44 @@ function resolveDocsTheme(theme = {}) {
 		diagnostics
 	};
 }
+function mix(base, target, value, space = "okhsl") {
+	return {
+		type: "mix",
+		base,
+		target,
+		value,
+		space
+	};
+}
+function statusColors(name, from) {
+	return {
+		[name]: {
+			from,
+			base: "surface",
+			role: "border",
+			contrast: { apca: [30, 45] },
+			mode: "auto"
+		},
+		[`${name}-text`]: {
+			from,
+			base: "surface",
+			role: "text",
+			contrast: { apca: [60, 75] },
+			mode: "auto"
+		},
+		[`${name}-surface`]: mix("surface", name, [12, 18], "srgb")
+	};
+}
+function requiredResolvedColor(colors, name) {
+	const color = colors.get(name);
+	if (!color) throw new Error(`The Glaze ${name} color failed to resolve.`);
+	return color;
+}
+function requiredJsonColor(colors, name) {
+	const color = colors[name];
+	if (!color) throw new Error(`The Glaze ${name} token failed to export.`);
+	return color;
+}
 function normalizeBrand(brand) {
 	if (typeof brand === "object" && brand !== null && "from" in brand) return brand;
 	return { from: brand ?? "#315efb" };
@@ -248,6 +519,215 @@ function luminance(variant) {
 	return relativeLuminanceFromLinearRgb(okhslToLinearSrgb(h, s, l, variant.pastel));
 }
 //#endregion
+//#region src/theme/shiki-theme.ts
+const comment = "var(--syntax-comment-color)";
+const punctuation = "var(--syntax-punctuation-color)";
+const keyword = "var(--syntax-keyword-color)";
+const string = "var(--syntax-string-color)";
+const token = "var(--syntax-token-color)";
+const property = "var(--syntax-property-color)";
+const number = "var(--syntax-number-color)";
+const func = "var(--syntax-function-color)";
+const value = "var(--syntax-value-color)";
+const operator = "var(--syntax-operator-color)";
+const foreground = "var(--syntax-text-color)";
+const background = "var(--syntax-bg-color)";
+const shellLanguages = /* @__PURE__ */ new Set([
+	"bash",
+	"sh",
+	"shell",
+	"shellscript",
+	"zsh"
+]);
+const shellPlaceholder = /<[A-Za-z][A-Za-z0-9_-]*>/g;
+/**
+* Shell grammars interpret documentation placeholders such as `<plan-id>` as
+* redirections and can split the final character into an unscoped token. Keep
+* the placeholder name visually coherent while retaining the operator color
+* on the angle brackets.
+*/
+const bashPlaceholderTransformer = {
+	name: "cookbook:bash-placeholders",
+	enforce: "post",
+	tokens(lines) {
+		if (!this.options.lang || !shellLanguages.has(this.options.lang)) return;
+		const ranges = [...this.source.matchAll(shellPlaceholder)].map((match) => ({
+			start: (match.index ?? 0) + 1,
+			end: (match.index ?? 0) + match[0].length - 1
+		}));
+		if (ranges.length === 0) return;
+		for (const line of lines) for (const highlighted of line) {
+			const start = highlighted.offset;
+			const end = start + highlighted.content.length;
+			if (ranges.some((range) => start < range.end && end > range.start)) highlighted.color = string;
+		}
+		return lines;
+	}
+};
+/**
+* Shiki performs the grammatical classification, while every emitted color
+* remains a reference to a Glaze-generated token owned by Tasty.
+*/
+const tastyCodeTheme = {
+	name: "tasty-code",
+	type: "light",
+	fg: foreground,
+	bg: background,
+	colors: {
+		"editor.background": background,
+		"editor.foreground": foreground
+	},
+	settings: [
+		{
+			scope: [
+				"comment",
+				"comment.line",
+				"comment.block",
+				"punctuation.definition.comment"
+			],
+			settings: {
+				foreground: comment,
+				fontStyle: "italic"
+			}
+		},
+		{
+			scope: [
+				"keyword",
+				"keyword.control",
+				"keyword.other",
+				"storage.type",
+				"storage.modifier",
+				"keyword.control.at-rule.tasty",
+				"keyword.control.at-rule.media.tasty",
+				"keyword.control.at-rule.media-type.tasty",
+				"keyword.control.at-rule.starting.tasty",
+				"keyword.control.state-alias.tasty"
+			],
+			settings: { foreground: keyword }
+		},
+		{
+			scope: [
+				"string",
+				"string.quoted",
+				"string.template",
+				"string.quoted.attribute-value.tasty",
+				"string.unquoted.attribute-value.tasty"
+			],
+			settings: { foreground: string }
+		},
+		{
+			scope: [
+				"support.constant.color.tasty-token",
+				"support.constant.color.tasty-token.builtin",
+				"constant.other.color.tasty-token",
+				"constant.other.color.tasty",
+				"constant.other.color.hex",
+				"constant.other.color.rgb-value"
+			],
+			settings: { foreground: token }
+		},
+		{
+			scope: [
+				"constant.numeric",
+				"constant.numeric.tasty",
+				"constant.numeric.custom-unit.tasty",
+				"constant.numeric.css-with-unit",
+				"constant.numeric.bare.tasty",
+				"constant.numeric.css",
+				"constant.numeric.keyframe-step.tasty",
+				"constant.language.boolean.tasty"
+			],
+			settings: { foreground: number }
+		},
+		{
+			scope: ["support.type.property-name.tasty", "variable.other.constant.tasty"],
+			settings: { foreground: property }
+		},
+		{
+			scope: ["variable", "variable.other"],
+			settings: { foreground }
+		},
+		{
+			scope: [
+				"entity.name.function",
+				"support.function",
+				"support.function.misc.css",
+				"entity.name.tag",
+				"entity.name.tag.tsx",
+				"entity.name.type.tasty",
+				"entity.name.tag.tasty"
+			],
+			settings: { foreground: func }
+		},
+		{
+			scope: [
+				"support.constant.property-value.tasty",
+				"support.constant.property-value.tasty-display",
+				"support.constant.property-value.tasty-directional",
+				"support.constant.property-value.tasty-preset",
+				"support.constant.property-value.tasty-shape",
+				"support.constant.property-value.tasty-scrollbar",
+				"support.constant.property-value.tasty-state",
+				"support.constant.property-value.tasty-cursor",
+				"support.constant.property-value.tasty-overflow",
+				"support.constant.property-value.tasty-position",
+				"support.constant.property-value.tasty-flex",
+				"support.constant.property-value.tasty-font",
+				"support.constant.property-value.tasty-text",
+				"support.constant.property-value.tasty-alignment",
+				"support.constant.property-value.tasty-border-style",
+				"support.constant.property-value.tasty-whitespace",
+				"support.constant.property-value.tasty-global",
+				"support.constant.property-value.tasty-transition",
+				"support.constant.property-value.css-syntax",
+				"entity.other.attribute-name",
+				"entity.other.attribute-name.tasty",
+				"entity.other.attribute-name.pseudo-class.tasty",
+				"entity.other.attribute-name.pseudo-class.css",
+				"entity.other.attribute-name.class.tasty",
+				"entity.other.attribute-name.pseudo-element.css",
+				"punctuation.definition.entity.css"
+			],
+			settings: { foreground: value }
+		},
+		{
+			scope: [
+				"keyword.operator",
+				"keyword.operator.logical.tasty",
+				"keyword.operator.arithmetic.css",
+				"keyword.operator.assignment",
+				"keyword.operator.selector-affix.tasty",
+				"keyword.operator.attribute-selector.tasty",
+				"keyword.operator.comparison.tasty"
+			],
+			settings: { foreground: operator }
+		},
+		{
+			scope: [
+				"punctuation.definition.string",
+				"punctuation.separator",
+				"punctuation.definition.block",
+				"punctuation.definition.array",
+				"punctuation.section",
+				"punctuation.definition.auto-calc",
+				"punctuation.definition.attribute-selector",
+				"punctuation.definition.pseudo-class",
+				"punctuation.definition.fallback",
+				"meta.brace"
+			],
+			settings: { foreground: punctuation }
+		},
+		{
+			scope: ["keyword.control.at-rule", "entity.name.tag.class.css"],
+			settings: { foreground: keyword }
+		},
+		{
+			scope: ["support.type.property-name.css", "meta.property-name.css"],
+			settings: { foreground: property }
+		}
+	]
+};
+//#endregion
 //#region src/theme/tasty-config.ts
 const TASTY_UNITS = {
 	x: "var(--gap)",
@@ -255,42 +735,11 @@ const TASTY_UNITS = {
 	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")
-	});
+	Object.assign(tokens, theme.colorTokens);
 	return tokens;
 }
-function colorStates(colors) {
-	return {
-		"": colors.dark,
-		[LIGHT]: colors.light,
-		[HIGH_CONTRAST]: colors.darkContrast,
-		[`(${LIGHT}) & (${HIGH_CONTRAST})`]: colors.lightContrast
-	};
-}
-function mix(foreground, percentage, background) {
-	return `color-mix(in oklab, ${foreground} ${percentage}%, ${background})`;
-}
 //#endregion
 //#region src/components/component-styles.ts
 const sharedConfiguration = globalThis;
@@ -377,8 +826,10 @@ function cookbook(options = {}) {
 					}
 				};
 				usingContentCollection = hasContentConfig(context.config.srcDir);
+				registerCookbookMarkdownPlugins(context.config.markdown.processor);
 				const starlightIntegration = starlight({
 					title: options.config?.site?.title ?? "Documentation",
+					expressiveCode: false,
 					...options.config?.site?.description ? { description: options.config.site.description } : {},
 					...options.config?.search?.enabled === false ? { pagefind: false } : {},
 					...!usingContentCollection ? { disable404Route: true } : {},
@@ -392,13 +843,21 @@ function cookbook(options = {}) {
 				];
 				let markdownRuntime = {
 					image: context.config.image,
-					markdown: context.config.markdown,
+					markdown: {
+						...context.config.markdown,
+						syntaxHighlight: "shiki",
+						shikiConfig: cookbookShikiConfig(context.config.markdown.shikiConfig)
+					},
 					srcDir: context.config.srcDir
 				};
 				let markdownRenderer;
 				context.updateConfig({
 					base,
 					output: "static",
+					markdown: {
+						syntaxHighlight: "shiki",
+						shikiConfig: cookbookShikiConfig(context.config.markdown.shikiConfig)
+					},
 					vite: {
 						ssr: { external: [
 							"@tenphi/docs",
@@ -406,7 +865,7 @@ function cookbook(options = {}) {
 							"react-dom",
 							"react-dom/server"
 						] },
-						plugins: [virtualDocsPlugin(async () => {
+						plugins: [stripStarlightStylesPlugin(starlightRoot), virtualDocsPlugin(async () => {
 							const loaded = await loadGraph();
 							return {
 								entries: usingContentCollection ? loaded.entries : await Promise.all(loaded.entries.map(async (entry) => {
@@ -489,7 +948,11 @@ function cookbook(options = {}) {
 					hooks: { "astro:config:setup": ({ config }) => {
 						markdownRuntime = {
 							image: config.image,
-							markdown: config.markdown,
+							markdown: {
+								...config.markdown,
+								syntaxHighlight: "shiki",
+								shikiConfig: cookbookShikiConfig(config.markdown.shikiConfig)
+							},
 							srcDir: config.srcDir
 						};
 					} }
@@ -542,8 +1005,19 @@ function cookbook(options = {}) {
 			},
 			"astro:build:done": async (context) => {
 				await callInner(inner, "astro:build:done", context);
-				if (!graph) return;
 				const output = fileURLToPath(context.dir);
+				for (const relativePath of await readdir(output, { recursive: true })) {
+					if (extname(relativePath) !== ".html") continue;
+					const path = join(output, relativePath);
+					const html = await readFile(path, "utf8");
+					const sanitized = html.replace(/\s*<link\b(?=[^>]*rel="stylesheet")(?=[^>]*href="data:text\/css,")[^>]*>/g, "").replace(/\s*<style>\s*<\/style>/g, "").replace(/\sstyle="--sl-icon-size:\s*([^;\"]+);?"/g, " width=\"$1\" height=\"$1\"").replace(/\sstyle="--depth:\s*([^;\"]+);?"/g, " data-depth=\"$1\"").replace(/(<kbd\b[^>]*)\sstyle="display:\s*none;?"([^>]*>)/g, "$1$2").replace(/(<dialog\b[^>]*)\sstyle="padding:\s*0;?"([^>]*>)/g, "$1$2");
+					if (sanitized !== html) await writeFile(path, sanitized);
+				}
+				const pagefindOutput = join(output, "pagefind");
+				if (existsSync(pagefindOutput)) {
+					for (const name of await readdir(pagefindOutput)) if (extname(name) === ".css") await unlink(join(pagefindOutput, name));
+				}
+				if (!graph) return;
 				for (const asset of graph.assets) {
 					if (!asset.sourcePath || !asset.publicPath) continue;
 					const target = join(output, asset.publicPath.replace(/^\//, ""));
@@ -554,6 +1028,53 @@ function cookbook(options = {}) {
 		}
 	};
 }
+function cookbookShikiConfig(config) {
+	const transformers = Array.isArray(config?.transformers) ? config.transformers : [];
+	return {
+		...config,
+		theme: tastyCodeTheme,
+		transformers: transformers.includes(bashPlaceholderTransformer) ? transformers : [...transformers, bashPlaceholderTransformer]
+	};
+}
+function registerCookbookMarkdownPlugins(processor) {
+	if (processor.name === "unified") {
+		const options = processor.options;
+		const plugins = Array.isArray(options.rehypePlugins) ? options.rehypePlugins : [];
+		if (!plugins.includes(rehypeMermaid)) plugins.push(rehypeMermaid);
+		options.rehypePlugins = plugins;
+	} else if (processor.name === "satteri") {
+		const options = processor.options;
+		const plugins = Array.isArray(options.hastPlugins) ? options.hastPlugins : [];
+		if (!plugins.includes(satteriMermaid)) plugins.push(satteriMermaid);
+		options.hastPlugins = plugins;
+	}
+}
+function stripStarlightStylesPlugin(root) {
+	const normalizedRoot = root.replaceAll("\\", "/");
+	const emptyPrintId = "\0cookbook:empty-starlight-print";
+	return {
+		name: "cookbook-strip-starlight-css",
+		enforce: "pre",
+		resolveId(source, importer) {
+			if (importer?.replaceAll("\\", "/").startsWith(`${normalizedRoot}/`) && source.endsWith("/style/print.css?url&no-inline")) return emptyPrintId;
+		},
+		load(id) {
+			if (id === emptyPrintId) return "export default \"data:text/css,\";";
+		},
+		transform(code, id) {
+			const normalizedId = id.replaceAll("\\", "/");
+			if (!normalizedId.startsWith(`${normalizedRoot}/`)) return void 0;
+			const [pathname, query = ""] = normalizedId.split("?", 2);
+			const isStylesheet = pathname?.endsWith(".css");
+			const isAstroStyle = pathname?.endsWith(".astro") && query.includes("type=style");
+			if (!isStylesheet && !isAstroStyle) return void 0;
+			return {
+				code: "",
+				map: null
+			};
+		}
+	};
+}
 function starlightContentUrl(route, srcDir) {
 	const slug = route === "/" ? "index" : route.replace(/^\/+|\/+$/g, "");
 	return new URL(`content/docs/${slug}.md`, srcDir);