@ox-content/vite-plugin 1.1.0 → 2.0.0

package/dist/index.cjs

@@ -6674,51 +6674,105 @@ const highlighterCache = /* @__PURE__ */ new Map();
 * Get or create the Shiki highlighter.
 */
 async function getHighlighter(theme, customLangs = []) {
+	const { themeInput } = normalizeThemeInput(theme);
 	const cacheKey = JSON.stringify({
-		theme,
+		theme: themeInput,
 		langs: customLangs
 	});
 	let highlighterPromise = highlighterCache.get(cacheKey);
 	if (!highlighterPromise) {
 		highlighterPromise = (0, shiki.createHighlighter)({
-			themes: [theme],
+			themes: [themeInput],
 			langs: [...BUILTIN_LANGS, ...customLangs]
 		});
 		highlighterCache.set(cacheKey, highlighterPromise);
 	}
 	return highlighterPromise;
 }
+function normalizeThemeInput(theme) {
+	if (typeof theme === "string") return {
+		themeInput: theme,
+		themeName: theme
+	};
+	const themeName = theme.name || "ox-content-custom-theme";
+	return {
+		themeInput: theme.name ? theme : {
+			...theme,
+			name: themeName
+		},
+		themeName
+	};
+}
 /**
 * Rehype plugin for syntax highlighting with Shiki.
 */
 function rehypeShikiHighlight(options) {
 	const { theme, langs } = options;
 	return async (tree) => {
+		const { themeName } = normalizeThemeInput(theme);
 		const highlighter = await getHighlighter(theme, langs);
+		const highlightBlockCode = (codeElement) => {
+			let lang = "text";
+			const langClass = normalizeClassName(codeElement.properties?.className).find((value) => value.startsWith("language-"));
+			if (langClass) lang = langClass.replace("language-", "");
+			const codeText = getTextContent(codeElement);
+			try {
+				const highlighted = highlighter.codeToHtml(codeText, {
+					lang,
+					theme: themeName
+				});
+				const parsed = (0, unified.unified)().use(rehype_parse.default, { fragment: true }).parse(highlighted);
+				if (parsed.children[0]?.type === "element") {
+					const highlightedPre = parsed.children[0];
+					highlightedPre.properties ??= {};
+					highlightedPre.properties["data-language"] = lang;
+					return highlightedPre;
+				}
+			} catch {}
+			return null;
+		};
+		const highlightInlineCode = (codeElement) => {
+			let lang = "text";
+			const originalCodeClasses = normalizeClassName(codeElement.properties?.className);
+			const langClass = originalCodeClasses.find((value) => value.startsWith("language-"));
+			if (!langClass) return null;
+			lang = langClass.replace("language-", "");
+			const codeText = getTextContent(codeElement);
+			try {
+				const highlighted = highlighter.codeToHtml(codeText, {
+					lang,
+					theme: themeName
+				});
+				const parsed = (0, unified.unified)().use(rehype_parse.default, { fragment: true }).parse(highlighted);
+				if (parsed.children[0]?.type === "element") {
+					const highlightedCode = parsed.children[0].children.find((child) => child.type === "element" && child.tagName === "code");
+					if (highlightedCode) {
+						highlightedCode.properties ??= {};
+						const highlightedClasses = normalizeClassName(highlightedCode.properties.className);
+						highlightedCode.properties.className = [...new Set([
+							...originalCodeClasses,
+							...highlightedClasses,
+							"shiki-inline"
+						])];
+						highlightedCode.properties["data-language"] = lang;
+						return highlightedCode;
+					}
+				}
+			} catch {}
+			return null;
+		};
 		const visit = async (node) => {
 			if ("children" in node) for (let i = 0; i < node.children.length; i++) {
 				const child = node.children[i];
 				if (child.type === "element" && child.tagName === "pre") {
 					const codeElement = child.children.find((c) => c.type === "element" && c.tagName === "code");
 					if (codeElement) {
-						let lang = "text";
-						const langClass = normalizeClassName(codeElement.properties?.className).find((value) => value.startsWith("language-"));
-						if (langClass) lang = langClass.replace("language-", "");
-						const codeText = getTextContent(codeElement);
-						try {
-							const highlighted = highlighter.codeToHtml(codeText, {
-								lang,
-								theme
-							});
-							const parsed = (0, unified.unified)().use(rehype_parse.default, { fragment: true }).parse(highlighted);
-							if (parsed.children[0]?.type === "element") {
-								const highlightedPre = parsed.children[0];
-								highlightedPre.properties ??= {};
-								highlightedPre.properties["data-language"] = lang;
-								node.children[i] = highlightedPre;
-							}
-						} catch {}
+						const highlightedPre = highlightBlockCode(codeElement);
+						if (highlightedPre) node.children[i] = highlightedPre;
 					}
+				} else if (child.type === "element" && child.tagName === "code") {
+					const highlightedCode = highlightInlineCode(child);
+					if (highlightedCode) node.children[i] = highlightedCode;
 				} else if (child.type === "element") await visit(child);
 			}
 		};
@@ -7335,23 +7389,137 @@ function cleanSummaryText(text, maxLength = 120) {
 function renderInlineHtml(text) {
 	let html = "";
 	let lastIndex = 0;
-	const tokenPattern = /`([^`]+)`|\[([^\]]+)\]\(([^)]+)\)/g;
+	const tokenPattern = /`([^`]+)`|\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|_([^_]+)_/g;
 	let match;
 	while ((match = tokenPattern.exec(text)) !== null) {
 		html += escapeHtml$3(text.slice(lastIndex, match.index));
 		if (match[1]) html += `<code>${escapeHtml$3(match[1])}</code>`;
-		else if (match[2] && match[3]) html += `<a href="${escapeHtml$3(match[3])}">${escapeHtml$3(match[2])}</a>`;
+		else if (match[2] && match[3]) html += `<a href="${escapeHtml$3(match[3])}">${renderInlineHtml(match[2])}</a>`;
+		else if (match[4] || match[5]) {
+			const strongText = match[4] ?? match[5] ?? "";
+			html += `<strong>${renderInlineHtml(strongText)}</strong>`;
+		} else if (match[6] || match[7]) {
+			const emphasisText = match[6] ?? match[7] ?? "";
+			html += `<em>${renderInlineHtml(emphasisText)}</em>`;
+		}
 		lastIndex = match.index + match[0].length;
 	}
 	html += escapeHtml$3(text.slice(lastIndex));
 	return html.replace(/\n/g, "<br>");
 }
-function renderParagraphsHtml(text) {
-	return text.split(/\n\s*\n/).map((paragraph) => paragraph.trim()).filter(Boolean).map((paragraph) => `<p>${renderInlineHtml(paragraph)}</p>`).join("\n");
+function isFenceStart(line) {
+	return /^```([\w-]+)?\s*$/.exec(line.trim());
+}
+function isHeading(line) {
+	return /^(#{1,6})\s+(.*)$/.exec(line.trim());
+}
+function isOrderedListItem(line) {
+	return /^\d+\.\s+(.*)$/.exec(line.trim());
+}
+function isUnorderedListItem(line) {
+	return /^[-*+]\s+(.*)$/.exec(line.trim());
+}
+function isMarkdownBlockStart(line) {
+	return Boolean(isFenceStart(line) || isHeading(line) || isOrderedListItem(line) || isUnorderedListItem(line));
+}
+function renderMarkdownBlocksHtml(text) {
+	const lines = text.split(/\r?\n/);
+	const blocks = [];
+	let index = 0;
+	while (index < lines.length) {
+		const line = lines[index];
+		const trimmed = line.trim();
+		if (!trimmed) {
+			index++;
+			continue;
+		}
+		const fenceMatch = isFenceStart(line);
+		if (fenceMatch) {
+			const language = fenceMatch[1] || "text";
+			const codeLines = [];
+			index++;
+			while (index < lines.length && !lines[index].trim().startsWith("```")) {
+				codeLines.push(lines[index]);
+				index++;
+			}
+			if (index < lines.length) index++;
+			blocks.push(renderCodeBlockHtml(codeLines.join("\n"), language));
+			continue;
+		}
+		const headingMatch = isHeading(line);
+		if (headingMatch) {
+			const level = Math.min(headingMatch[1].length, 6);
+			blocks.push(`<h${level}>${renderInlineHtml(headingMatch[2].trim())}</h${level}>`);
+			index++;
+			continue;
+		}
+		if (isOrderedListItem(line)) {
+			const items = [];
+			while (index < lines.length) {
+				const currentLine = lines[index];
+				const currentMatch = isOrderedListItem(currentLine);
+				if (!currentMatch) break;
+				const itemLines = [currentMatch[1].trim()];
+				index++;
+				while (index < lines.length) {
+					const continuation = lines[index];
+					const continuationTrimmed = continuation.trim();
+					if (!continuationTrimmed || isMarkdownBlockStart(continuation) || /^ {0,1}\d+\.\s+/.test(continuationTrimmed)) break;
+					itemLines.push(continuationTrimmed);
+					index++;
+				}
+				items.push(`<li>${renderInlineHtml(itemLines.join(" "))}</li>`);
+				if (index < lines.length && !lines[index].trim()) break;
+			}
+			blocks.push(`<ol>\n${items.join("\n")}\n</ol>`);
+			continue;
+		}
+		if (isUnorderedListItem(line)) {
+			const items = [];
+			while (index < lines.length) {
+				const currentLine = lines[index];
+				const currentMatch = isUnorderedListItem(currentLine);
+				if (!currentMatch) break;
+				const itemLines = [currentMatch[1].trim()];
+				index++;
+				while (index < lines.length) {
+					const continuation = lines[index];
+					const continuationTrimmed = continuation.trim();
+					if (!continuationTrimmed || isMarkdownBlockStart(continuation) || /^[-*+]\s+/.test(continuationTrimmed)) break;
+					itemLines.push(continuationTrimmed);
+					index++;
+				}
+				items.push(`<li>${renderInlineHtml(itemLines.join(" "))}</li>`);
+				if (index < lines.length && !lines[index].trim()) break;
+			}
+			blocks.push(`<ul>\n${items.join("\n")}\n</ul>`);
+			continue;
+		}
+		const paragraphLines = [trimmed];
+		index++;
+		while (index < lines.length) {
+			const nextLine = lines[index];
+			const nextTrimmed = nextLine.trim();
+			if (!nextTrimmed || isMarkdownBlockStart(nextLine)) break;
+			paragraphLines.push(nextTrimmed);
+			index++;
+		}
+		blocks.push(`<p>${renderInlineHtml(paragraphLines.join(" "))}</p>`);
+	}
+	return `<div class="ox-api-entry__prose">\n${blocks.join("\n")}\n</div>`;
 }
 function renderCodeBlockHtml(code, language = "typescript") {
 	return `<pre><code class="language-${language}">${escapeHtml$3(code)}</code></pre>`;
 }
+function renderHighlightedInlineCodeHtml(code, className, language = "typescript") {
+	return `<code class="${escapeHtml$3(className)} language-${language}">${escapeHtml$3(code)}</code>`;
+}
+function renderDetailsControlsHtml(targetSelector) {
+	return `<div class="ox-api-controls" data-ox-api-target="${targetSelector}" role="toolbar" aria-label="Reference display controls">
+<button type="button" class="ox-api-controls__button" data-ox-api-toggle="expand">Open all</button>
+<button type="button" class="ox-api-controls__button" data-ox-api-toggle="collapse">Close all</button>
+</div>`;
+}
 function buildDocsData(docs) {
 	return {
 		version: 1,
@@ -7360,16 +7528,6 @@ function buildDocsData(docs) {
 	};
 }
 /**
-* Regex pattern for matching JSDoc comment blocks.
-*
-* Matches block comments that start at the beginning of a line
-* (with optional leading whitespace). This pattern avoids false matches
-* with block comments inside strings like glob patterns.
-*
-* @internal
-*/
-const JSDOC_BLOCK = /^[ \t]*\/\*\*\s*([\s\S]*?)\s*\*\//gm;
-/**
 * Extracts JSDoc documentation from source files in specified directories.
 *
 * This function recursively searches directories for source files matching
@@ -7435,11 +7593,13 @@ const JSDOC_BLOCK = /^[ \t]*\/\*\*\s*([\s\S]*?)\s*\*\//gm;
 * ```
 */
 async function extractDocs(srcDirs, options) {
+	const extractFileDocs = (await require_mermaid.importNapiModule()).extractFileDocs;
+	if (!extractFileDocs) throw new Error("[ox-content] extractFileDocs is not available from @ox-content/napi.");
 	const results = [];
 	for (const srcDir of srcDirs) {
 		const files = await findFiles(srcDir, options);
 		for (const file of files) {
-			const entries = extractFromContent(await fs.promises.readFile(file, "utf-8"), file, options);
+			const entries = extractFileDocs(file, options.private).map(parseNapiDocItem).filter((entry) => Boolean(entry));
 			if (entries.length > 0) results.push({
 				file,
 				entries
@@ -7490,127 +7650,21 @@ function isExcluded(file, patterns) {
 		return false;
 	});
 }
-/**
-* Extracts documentation entries from file content.
-*/
-function extractFromContent(content, file, options) {
-	const entries = [];
-	let match;
-	JSDOC_BLOCK.lastIndex = 0;
-	while ((match = JSDOC_BLOCK.exec(content)) !== null) {
-		const jsdocContent = match[1];
-		const jsdocEnd = match.index + match[0].length;
-		const afterJsdoc = content.slice(jsdocEnd).trim();
-		const lineNumber = content.slice(0, match.index).split("\n").length;
-		const entry = parseJsdocBlock(jsdocContent, afterJsdoc, file, lineNumber);
-		if (entry && (options.private || !entry.private)) entries.push(entry);
-	}
-	return entries;
-}
-/**
-* Extracts the complete function signature for display.
-*
-* Captures the full function declaration from `export/async/function name(...): ReturnType`
-* or `export const name = (...): ReturnType => {}`, handling multi-line signatures.
-*
-* @param signature - Multi-line function declaration text
-* @returns Cleaned function signature or undefined if not found
-*
-* @internal
-*/
-function extractFunctionSignature(signature) {
-	const match = signature.match(/(?:export\s+)?(?:async\s+)?(?:function\s+\w+|\w+\s*=\s*(?:async\s*)?\()\([^{]*?\)(?:\s*:\s*[^{;]+)?/s);
-	if (match) {
-		let sig = match[0].trim();
-		sig = sig.split("\n").map((line) => line.trim()).filter((line) => line).join("\n  ");
-		return sig;
-	}
-}
-/**
-* Extracts parameter and return types from a TypeScript function signature.
-*
-* Parses function signatures to extract:
-* - Parameter names and their type annotations
-* - Return type annotation
-*
-* Handles various function declaration styles:
-* - `function name(param: type): ReturnType`
-* - `const name = (param: type): ReturnType => {}`
-* - `export async function name(param: type): Promise<ReturnType>`
-*
-* @param signature - Multi-line function signature text
-* @param params - Array of parameter docs with names already extracted
-* @returns Object with extracted parameter types and return type
-*
-* @internal
-*/
-function extractTypesFromSignature(signature, _params) {
-	const paramTypes = [];
-	const paramListMatch = signature.match(/\(([^)]*)\)(?:\s*:\s*([^{=>]+))?/s);
-	if (paramListMatch && paramListMatch[1]) {
-		const paramListStr = paramListMatch[1];
-		const paramParts = splitParameters(paramListStr);
-		for (const part of paramParts) {
-			const trimmed = part.trim();
-			if (!trimmed) continue;
-			const typeMatch = /:\s*(.+?)(?:\s*=|$)/.exec(trimmed);
-			if (typeMatch) {
-				let typeStr = typeMatch[1].trim();
-				if (typeStr.includes("=")) typeStr = typeStr.split("=")[0].trim();
-				paramTypes.push(typeStr);
-			}
-		}
-	}
-	let returnType;
-	const returnTypeMatch = signature.match(/\)\s*:\s*(.+?)(?={|$)/);
-	if (returnTypeMatch) returnType = returnTypeMatch[1].trim();
-	return {
-		paramTypes,
-		returnType
-	};
-}
-/**
-* Splits function parameters while respecting nested angle brackets (generics).
-*
-* Handles cases like:
-* - `a: string, b: number` → `["a: string", "b: number"]`
-* - `a: Promise<string>, b: Record<string, any>` → `["a: Promise<string>", "b: Record<string, any>"]`
-*
-* @param paramListStr - String containing all parameters
-* @returns Array of individual parameter strings
-*
-* @internal
-*/
-function splitParameters(paramListStr) {
-	const parts = [];
-	let current = "";
-	let depth = 0;
-	for (const char of paramListStr) if (char === "<") {
-		depth++;
-		current += char;
-	} else if (char === ">") {
-		depth--;
-		current += char;
-	} else if (char === "," && depth === 0) {
-		parts.push(current);
-		current = "";
-	} else current += char;
-	if (current) parts.push(current);
-	return parts;
-}
-/**
-* Parses a JSDoc block and the following declaration.
-* Only matches if the declaration is immediately after the JSDoc (with only whitespace/keywords between).
-*/
-function parseJsdocBlock(jsdoc, declaration, file, line) {
+function parseNapiDocItem(item) {
+	const kind = normalizeNapiKind(item.kind);
+	if (!kind) return null;
 	const params = [];
 	const examples = [];
 	const tags = {};
 	let description = "";
 	let returns;
 	let isPrivate = false;
-	const rawLines = jsdoc.split("\n").map((l) => l.replace(/^\s*\*\s?/, ""));
-	const cleanedLines = rawLines.map((l) => l.trim()).filter((l) => l);
+	const rawLines = (item.jsdoc ?? "").split("\n").map((line) => {
+		const trimmedStart = line.trimStart();
+		const withoutStar = trimmedStart.startsWith("*") ? trimmedStart.slice(1) : trimmedStart;
+		return withoutStar.startsWith(" ") ? withoutStar.slice(1) : withoutStar;
+	});
+	const cleanedLines = rawLines.map((line) => line.trim()).filter(Boolean);
 	let currentExample = "";
 	let inExample = false;
 	let rawLineIndex = 0;
@@ -7657,47 +7711,40 @@ function parseJsdocBlock(jsdoc, declaration, file, line) {
 		else description += "\n" + lineText;
 	}
 	if (inExample && currentExample) examples.push(currentExample.trim());
-	const firstFewLines = declaration.split("\n").slice(0, 5).join("\n");
-	let name = "";
-	let kind = "function";
-	const ANCHORED_FUNCTION = /^(?:export\s+)?(?:async\s+)?function\s+(\w+)/;
-	const ANCHORED_CONST_FUNC = /^(?:export\s+)?const\s+(\w+)\s*=\s*(?:async\s*)?\(/;
-	const ANCHORED_CLASS = /^(?:export\s+)?class\s+(\w+)/;
-	const ANCHORED_INTERFACE = /^(?:export\s+)?interface\s+(\w+)/;
-	const ANCHORED_TYPE = /^(?:export\s+)?type\s+(\w+)/;
-	let declMatch;
-	if (declMatch = ANCHORED_FUNCTION.exec(firstFewLines)) {
-		name = declMatch[1];
-		kind = "function";
-	} else if (declMatch = ANCHORED_CONST_FUNC.exec(firstFewLines)) {
-		name = declMatch[1];
-		kind = "function";
-	} else if (declMatch = ANCHORED_CLASS.exec(firstFewLines)) {
-		name = declMatch[1];
-		kind = "class";
-	} else if (declMatch = ANCHORED_INTERFACE.exec(firstFewLines)) {
-		name = declMatch[1];
-		kind = "interface";
-	} else if (declMatch = ANCHORED_TYPE.exec(firstFewLines)) {
-		name = declMatch[1];
-		kind = "type";
-	}
-	if (!name) return null;
-	let signature;
-	if (kind === "function") {
-		const signatureTypes = extractTypesFromSignature(firstFewLines, params);
-		if (signatureTypes.paramTypes.length > 0) {
-			for (let i = 0; i < params.length && i < signatureTypes.paramTypes.length; i++) if (params[i].type === "unknown") params[i].type = signatureTypes.paramTypes[i];
-		}
-		if (signatureTypes.returnType && (!returns || returns.type === "unknown")) if (returns) returns.type = signatureTypes.returnType;
-		else returns = {
-			type: signatureTypes.returnType,
-			description: ""
-		};
-		signature = extractFunctionSignature(firstFewLines);
+	if (params.length === 0 && item.params.length > 0) params.push(...item.params.map((param) => ({
+		name: param.name,
+		type: param.typeAnnotation ?? "unknown",
+		description: param.description ?? "",
+		optional: param.optional || void 0,
+		default: param.defaultValue
+	})));
+	else if (item.params.length > 0) {
+		const paramMap = new Map(item.params.map((param) => [param.name, param]));
+		for (const param of params) {
+			const rustParam = paramMap.get(param.name);
+			if (!rustParam) continue;
+			if (param.type === "unknown" && rustParam.typeAnnotation) param.type = rustParam.typeAnnotation;
+			if (!param.description && rustParam.description) param.description = rustParam.description;
+			if (param.optional === void 0 && rustParam.optional) param.optional = true;
+			if (!param.default && rustParam.defaultValue) param.default = rustParam.defaultValue;
+		}
+	}
+	if (!returns && item.returnType) returns = {
+		type: item.returnType,
+		description: ""
+	};
+	else if (returns && returns.type === "unknown" && item.returnType) returns.type = item.returnType;
+	if (!description) description = item.doc ?? "";
+	for (const tag of item.tags) {
+		if (tag.tag === "param" || tag.tag === "returns" || tag.tag === "return" || tag.tag === "example") continue;
+		if (tag.tag === "private") {
+			isPrivate = true;
+			continue;
+		}
+		if (!tags[tag.tag]) tags[tag.tag] = tag.value;
 	}
 	return {
-		name,
+		name: item.name,
 		kind,
 		description,
 		params: params.length > 0 ? params : void 0,
@@ -7705,39 +7752,69 @@ function parseJsdocBlock(jsdoc, declaration, file, line) {
 		examples: examples.length > 0 ? examples : void 0,
 		tags: Object.keys(tags).length > 0 ? tags : void 0,
 		private: isPrivate,
-		file,
-		line,
-		signature
+		file: item.sourcePath,
+		line: item.line,
+		endLine: item.endLine,
+		signature: item.signature
 	};
 }
+function normalizeNapiKind(kind) {
+	switch (kind) {
+		case "function":
+		case "class":
+		case "interface":
+		case "type":
+		case "variable":
+		case "module": return kind;
+		case "enum": return "type";
+		default: return null;
+	}
+}
 /**
 * Generates Markdown documentation from extracted docs.
 */
 function generateMarkdown(docs, options) {
 	const result = {};
-	const symbolMap = buildSymbolMap(docs);
+	const sortedDocs = sortExtractedDocs(docs);
+	const symbolMap = buildSymbolMap(sortedDocs);
 	if (options.groupBy === "file") {
 		const docToFile = /* @__PURE__ */ new Map();
-		for (const doc of docs) {
+		for (const doc of sortedDocs) {
 			let fileName = path.basename(doc.file, path.extname(doc.file));
 			if (fileName === "index") fileName = "index-module";
 			docToFile.set(doc, fileName);
 			const markdown = generateFileMarkdown(doc, options, fileName, symbolMap);
 			result[`${fileName}.md`] = markdown;
 		}
-		result["index.md"] = generateIndex(docs, docToFile);
+		result["index.md"] = generateIndex(sortedDocs, docToFile);
 	} else {
 		const byKind = /* @__PURE__ */ new Map();
-		for (const doc of docs) for (const entry of doc.entries) {
+		for (const doc of sortedDocs) for (const entry of doc.entries) {
 			const existing = byKind.get(entry.kind) || [];
 			existing.push(entry);
 			byKind.set(entry.kind, existing);
 		}
-		for (const [kind, entries] of byKind) result[`${kind}s.md`] = generateCategoryMarkdown(kind, entries, options, symbolMap);
+		for (const entries of byKind.values()) entries.sort(compareEntriesByName);
+		for (const [kind, entries] of [...byKind.entries()].sort(([a], [b]) => compareStrings(a, b))) result[`${kind}s.md`] = generateCategoryMarkdown(kind, entries, options, symbolMap);
 		result["index.md"] = generateCategoryIndex(byKind);
 	}
 	return result;
 }
+function compareStrings(a, b) {
+	return a.localeCompare(b, "en", {
+		numeric: true,
+		sensitivity: "base"
+	});
+}
+function compareEntriesByName(a, b) {
+	return compareStrings(a.name, b.name);
+}
+function sortExtractedDocs(docs) {
+	return [...docs].map((doc) => ({
+		...doc,
+		entries: [...doc.entries].sort(compareEntriesByName)
+	})).sort((a, b) => compareStrings(path.basename(a.file), path.basename(b.file)));
+}
 function generateFileMarkdown(doc, options, currentFileName, symbolMap) {
 	let md = `# ${path.basename(doc.file)}\n\n`;
 	if (options.githubUrl) {
@@ -7745,16 +7822,25 @@ function generateFileMarkdown(doc, options, currentFileName, symbolMap) {
 		if (sourceLink) md += sourceLink + "\n\n";
 	}
 	md += `> ${doc.entries.length} documented symbol${doc.entries.length === 1 ? "" : "s"}. `;
-	md += "Skim the one-line surface first, then expand the accordions for details.\n\n";
-	md += "## Overview\n\n";
-	for (const entry of doc.entries) md += renderOverviewLine(entry, `#${entryAnchor(entry.name)}`);
-	md += "\n## Reference\n\n";
+	md += "Read the signatures first, then expand each item for parameters, return types, and examples.\n\n";
+	md += "## Reference\n\n";
+	if (doc.entries.length > 1) md += renderDetailsControlsHtml(".ox-api-entry") + "\n\n";
 	for (const entry of doc.entries) md += generateEntryMarkdown(entry, options, currentFileName, symbolMap);
 	return md;
 }
 function normalizeSignature(signature) {
 	if (!signature) return;
-	return signature.replace(/\s+/g, " ").replace(/^export\s+/, "").replace(/^async\s+function\s+/, "").replace(/^function\s+/, "").replace(/^class\s+/, "").trim();
+	return signature.replace(/\s+/g, " ").replace(/^export\s+/, "").replace(/^declare\s+/, "").replace(/^abstract\s+/, "").replace(/^async\s+function\s+/, "").replace(/^function\s+/, "").replace(/^class\s+/, "").replace(/^interface\s+/, "").replace(/^type\s+/, "").trim();
+}
+function formatKindLabel(kind) {
+	switch (kind) {
+		case "function": return "fn";
+		case "interface": return "interface";
+		case "class": return "class";
+		case "type": return "type";
+		case "const": return "const";
+		default: return kind;
+	}
 }
 function renderOverviewLine(entry, href) {
 	const signature = normalizeSignature(entry.signature);
@@ -7767,60 +7853,56 @@ function renderOverviewLine(entry, href) {
 function renderOverviewHtmlItem(entry, href) {
 	const signature = normalizeSignature(entry.signature);
 	const summary = cleanSummaryText(entry.description, 88);
-	const fragments = [`<a href="${escapeHtml$3(href)}"><code>${escapeHtml$3(entry.name)}</code></a>`, `<span class="ox-api-module__kind">${escapeHtml$3(entry.kind)}</span>`];
-	if (signature) fragments.push(`<code>${escapeHtml$3(signature)}</code>`);
-	if (summary) fragments.push(`<span>${renderInlineHtml(summary)}</span>`);
-	return `<li>${fragments.join("")}</li>`;
+	const heading = signature ? `<a href="${escapeHtml$3(href)}" class="ox-api-module__link">${renderHighlightedInlineCodeHtml(signature, "ox-api-module__signature ox-api-module__signature--highlighted")}</a>` : `<a href="${escapeHtml$3(href)}" class="ox-api-module__link"><code class="ox-api-module__name">${escapeHtml$3(entry.name)}</code></a>`;
+	return `<li><span class="ox-api-module__kind">${escapeHtml$3(formatKindLabel(entry.kind))}</span><div class="ox-api-module__item">${heading}${summary ? `<span class="ox-api-module__summary">${renderInlineHtml(summary)}</span>` : ""}</div></li>`;
 }
-function renderParamsTableHtml(params) {
-	return `<div class="ox-api-entry__section">
+function renderParamsListHtml(params) {
+	return `<div class="ox-api-entry__section ox-api-entry__section--params">
 <h4>Parameters</h4>
-<table>
-  <thead>
-    <tr><th>Name</th><th>Type</th><th>Description</th></tr>
-  </thead>
-  <tbody>
+<ul class="ox-api-entry__params">
 ${params.map((param) => {
 		const flags = [param.optional ? "optional" : "", param.default ? `default: ${param.default}` : ""].filter(Boolean);
 		const description = [param.description, flags.join(" · ")].filter(Boolean).join(" — ");
-		return `<tr>
-  <td><code>${escapeHtml$3(param.name)}</code></td>
-  <td><code>${escapeHtml$3(param.type)}</code></td>
-  <td>${renderInlineHtml(description)}</td>
-</tr>`;
+		return `<li class="ox-api-entry__param">
+  <div class="ox-api-entry__param-heading">
+    <code class="ox-api-entry__param-name">${escapeHtml$3(param.name)}</code>
+    <code class="ox-api-entry__param-type">${escapeHtml$3(param.type)}</code>
+  </div>
+  ${description ? `<p class="ox-api-entry__param-description">${renderInlineHtml(description)}</p>` : ""}
+</li>`;
 	}).join("\n")}
-  </tbody>
-</table>
+</ul>
 </div>`;
 }
 function renderTagListHtml(tags) {
-	return `<div class="ox-api-entry__section">
+	return `<div class="ox-api-entry__section ox-api-entry__section--tags">
 <h4>Tags</h4>
-<ul class="ox-api-entry__tags">${Object.entries(tags).map(([tag, value]) => `<li><span class="ox-api-entry__tag-name">@${escapeHtml$3(tag)}</span><span>${renderInlineHtml(value)}</span></li>`).join("")}</ul>
+<ul class="ox-api-entry__tags">${Object.entries(tags).map(([tag, value]) => `<li><span class="ox-api-entry__tag-name">@${escapeHtml$3(tag)}</span><span class="ox-api-entry__tag-value">${renderInlineHtml(value)}</span></li>`).join("")}</ul>
 </div>`;
 }
 function generateEntryMarkdown(entry, options, currentFileName, symbolMap) {
 	const processedDescription = entry.description && currentFileName && symbolMap ? convertSymbolLinks(entry.description, currentFileName, symbolMap) : entry.description;
 	const summarySignature = normalizeSignature(entry.signature);
-	const sourceHref = options?.githubUrl ? generateSourceHref(entry.file, options.githubUrl, entry.line) : void 0;
+	const sourceHref = options?.githubUrl ? generateSourceHref(entry.file, options.githubUrl, entry.line, entry.endLine) : void 0;
 	let body = "";
-	if (processedDescription) body += renderParagraphsHtml(processedDescription) + "\n";
+	if (processedDescription) body += renderMarkdownBlocksHtml(processedDescription) + "\n";
 	if (sourceHref) body += `<p class="ox-api-entry__source"><a href="${escapeHtml$3(sourceHref)}">View source</a></p>\n`;
-	if (entry.signature) body += `<div class="ox-api-entry__section">\n<h4>Signature</h4>\n${renderCodeBlockHtml(entry.signature)}\n</div>\n`;
-	if (entry.params && entry.params.length > 0) body += renderParamsTableHtml(entry.params) + "\n";
-	if (entry.returns) body += `<div class="ox-api-entry__section">
+	if (entry.params && entry.params.length > 0) body += renderParamsListHtml(entry.params) + "\n";
+	if (entry.returns) body += `<div class="ox-api-entry__section ox-api-entry__section--returns">
 <h4>Returns</h4>
-<p><code>${escapeHtml$3(entry.returns.type)}</code>${entry.returns.description ? ` — ${renderInlineHtml(entry.returns.description)}` : ""}</p>
+<div class="ox-api-entry__return">
+  <code class="ox-api-entry__return-type">${escapeHtml$3(entry.returns.type)}</code>
+  ${entry.returns.description ? `<p class="ox-api-entry__return-description">${renderInlineHtml(entry.returns.description)}</p>` : ""}
+</div>
 </div>\n`;
 	if (entry.examples && entry.examples.length > 0) {
 		const examplesHtml = entry.examples.map((example) => example.replace(/^```\w*\n?/, "").replace(/\n?```$/, "")).map((example) => renderCodeBlockHtml(example, "ts")).join("\n");
-		body += `<div class="ox-api-entry__section">\n<h4>Examples</h4>\n${examplesHtml}\n</div>\n`;
+		body += `<div class="ox-api-entry__section ox-api-entry__section--examples">\n<h4>Examples</h4>\n${examplesHtml}\n</div>\n`;
 	}
 	if (entry.tags && Object.keys(entry.tags).length > 0) body += renderTagListHtml(entry.tags) + "\n";
 	const summaryDescription = cleanSummaryText(processedDescription, summarySignature ? 80 : 120);
-	const summaryParts = [`<span class="ox-api-entry__kind">${escapeHtml$3(entry.kind)}</span>`, `<code class="ox-api-entry__name">${escapeHtml$3(entry.name)}</code>`];
-	if (summarySignature) summaryParts.push(`<code class="ox-api-entry__signature">${escapeHtml$3(summarySignature)}</code>`);
-	if (summaryDescription) summaryParts.push(`<span class="ox-api-entry__description">${renderInlineHtml(summaryDescription)}</span>`);
+	const summaryHeading = summarySignature ? renderHighlightedInlineCodeHtml(summarySignature, "ox-api-entry__signature ox-api-entry__signature--highlighted") : `<code class="ox-api-entry__name">${escapeHtml$3(entry.name)}</code>`;
+	const summaryParts = [`<span class="ox-api-entry__kind">${escapeHtml$3(formatKindLabel(entry.kind))}</span>`, `<span class="ox-api-entry__summary-main">${summaryHeading}${summaryDescription ? `<span class="ox-api-entry__description">${renderInlineHtml(summaryDescription)}</span>` : ""}</span>`];
 	return `<details id="${entryAnchor(entry.name)}" class="ox-api-entry">
   <summary>${summaryParts.join("")}</summary>
   <div class="ox-api-entry__body">
@@ -7835,6 +7917,7 @@ function generateIndex(docs, docToFile) {
 	md += "Generated by [Ox Content](https://github.com/ubugeeei/ox-content)\n\n";
 	md += "> Use search scopes like `@api transform` to limit results to the generated API reference.\n\n";
 	md += "## Modules\n\n";
+	if (docs.length > 1) md += renderDetailsControlsHtml(".ox-api-module") + "\n\n";
 	for (const doc of docs) {
 		const displayName = path.basename(doc.file, path.extname(doc.file));
 		let fileName = displayName;
@@ -7865,13 +7948,14 @@ function generateCategoryMarkdown(kind, entries, options, symbolMap) {
 	md += "## Overview\n\n";
 	for (const entry of entries) md += renderOverviewLine(entry, `#${entryAnchor(entry.name)}`);
 	md += "\n## Reference\n\n";
+	if (entries.length > 1) md += renderDetailsControlsHtml(".ox-api-entry") + "\n\n";
 	for (const entry of entries) md += generateEntryMarkdown(entry, options, categoryFileName, symbolMap);
 	return md;
 }
 function generateCategoryIndex(byKind) {
 	let md = "# API Documentation\n\n";
 	md += "Generated by [Ox Content](https://github.com/ubugeeei/ox-content)\n\n";
-	for (const [kind, entries] of byKind) {
+	for (const [kind, entries] of [...byKind.entries()].sort(([a], [b]) => compareStrings(a, b))) {
 		const kindTitle = kind.charAt(0).toUpperCase() + kind.slice(1) + "s";
 		md += `## [${kindTitle}](./${kind}s.md)\n\n`;
 		md += `> ${entries.length} item${entries.length === 1 ? "" : "s"}.\n\n`;
@@ -7961,18 +8045,19 @@ async function writeDocs(docs, outDir, extractedDocs, options) {
 * Resolves docs options with defaults.
 */
 /**
-* Generates a GitHub source link for a file and optional line number.
+* Generates a GitHub source link for a file and optional line range.
 *
 * @param filePath - Full path to the source file
 * @param githubUrl - Base GitHub repository URL
-* @param lineNumber - Optional line number to link to
+* @param lineNumber - Optional start line number to link to
+* @param endLineNumber - Optional end line number to link to
 * @returns Absolute GitHub URL to source code
 */
-function generateSourceHref(filePath, githubUrl, lineNumber) {
-	return `${githubUrl}/blob/main/${filePath.replace(/^.*?\/(npm|packages|crates|src)\//, "$1/")}${lineNumber ? `#L${lineNumber}` : ""}`;
+function generateSourceHref(filePath, githubUrl, lineNumber, endLineNumber) {
+	return `${githubUrl}/blob/main/${filePath.replace(/^.*?\/(npm|packages|crates|src)\//, "$1/")}${lineNumber ? endLineNumber && endLineNumber > lineNumber ? `#L${lineNumber}-L${endLineNumber}` : `#L${lineNumber}` : ""}`;
 }
-function generateSourceLink(filePath, githubUrl, lineNumber) {
-	return `**[Source](${generateSourceHref(filePath, githubUrl, lineNumber)})**`;
+function generateSourceLink(filePath, githubUrl, lineNumber, endLineNumber) {
+	return `**[Source](${generateSourceHref(filePath, githubUrl, lineNumber, endLineNumber)})**`;
 }
 function resolveDocsOptions(options) {
 	if (options === false) return false;
@@ -8130,23 +8215,74 @@ async function openBrowser() {
 function escapeHtml$2(str) {
 	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function normalizeBrandValue(str) {
+	return str.replace(/\s+/g, "").toLowerCase();
+}
+function renderWordmarkSvg() {
+	return `<svg width="430" height="102" viewBox="0 0 270 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="ogWordmarkGradient" x1="286" y1="10" x2="320" y2="54" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#355cff"/>
+      <stop offset="100%" stop-color="#74c7ff"/>
+    </linearGradient>
+  </defs>
+  <text
+    x="2"
+    y="43"
+    fill="#eff6ff"
+    font-family="IBM Plex Sans, IBM Plex Mono, Avenir Next, Segoe UI, sans-serif"
+    font-size="34"
+    font-weight="700"
+    letter-spacing="-1.4"
+  >
+    OXCONTENT
+  </text>
+  <text
+    x="213"
+    y="43.5"
+    fill="#eff6ff"
+    font-family="IBM Plex Sans, IBM Plex Mono, Avenir Next, Segoe UI, sans-serif"
+    font-size="40"
+    font-weight="400"
+  >
+    (
+  </text>
+  <g transform="translate(216 9) scale(0.089) rotate(-7 256 256)">
+    <path
+      d="M161 96H286C298 96 309 101 318 110L352 144C361 153 366 164 366 176V386C366 399 355 410 342 410H161C148 410 138 399 138 386V120C138 107 148 96 161 96Z"
+      fill="url(#ogWordmarkGradient)"
+    />
+  </g>
+  <text
+    x="252"
+    y="43.5"
+    fill="#eff6ff"
+    font-family="IBM Plex Sans, IBM Plex Mono, Avenir Next, Segoe UI, sans-serif"
+    font-size="40"
+    font-weight="400"
+  >
+    )
+  </text>
+</svg>`;
+}
 /**
 * Returns the built-in default template function.
 */
 function getDefaultTemplate() {
 	return function defaultTemplate(props) {
-		const { title, description, siteName, tags } = props;
-		const tagsHtml = tags?.length ? `<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;">
-          ${tags.map((tag) => `<span style="background:rgba(255,255,255,0.15);color:#e2e8f0;padding:4px 12px;border-radius:16px;font-size:14px;">${escapeHtml$2(tag)}</span>`).join("")}
-        </div>` : "";
-		return `<div style="width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:60px 80px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
-  <div style="display:flex;flex-direction:column;gap:16px;flex:1;justify-content:center;">
-    <h1 style="font-size:56px;font-weight:700;color:#ffffff;line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;">${escapeHtml$2(title)}</h1>
-    ${description ? `<p style="font-size:24px;color:#94a3b8;line-height:1.5;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$2(description)}</p>` : ""}
-  </div>
-  <div style="display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;">
-    ${siteName ? `<span style="font-size:20px;color:#64748b;font-weight:500;">${escapeHtml$2(siteName)}</span>` : ""}
-    ${tagsHtml}
+		const { title, description, siteName } = props;
+		const rawBrand = siteName?.trim() ? siteName : "Ox Content";
+		const isBrandCard = normalizeBrandValue(title) === normalizeBrandValue(rawBrand);
+		const heroTitle = isBrandCard ? "cargo doc for JavaScript" : title;
+		const heroDescription = isBrandCard ? "Rust-powered docs and high-performance Markdown tooling." : description && description.trim().length > 0 ? description : "Rust-powered docs and Markdown tooling.";
+		const descriptionHtml = heroDescription.trim().length > 0 ? `<p style="max-width:760px;font-size:28px;color:#93a4c3;line-height:1.45;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$2(heroDescription)}</p>` : "";
+		return `<div style="width:100%;height:100%;position:relative;overflow:hidden;box-sizing:border-box;padding:56px 64px 52px;background:#0b1220;font-family:'IBM Plex Sans','Avenir Next','Segoe UI',system-ui,sans-serif;color:#eff6ff;border:1px solid #223252;border-top:4px solid #4f6fae;">
+  <div style="position:relative;z-index:1;display:flex;flex-direction:column;height:100%;">
+    <div style="display:flex;align-items:flex-start;">${renderWordmarkSvg()}</div>
+    <div style="display:flex;flex-direction:column;justify-content:center;gap:24px;max-width:860px;flex:1;padding:22px 0 0;">
+      <h1 style="font-size:78px;font-weight:700;color:#eff6ff;line-height:1.02;letter-spacing:-0.055em;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$2(heroTitle)}</h1>
+      ${descriptionHtml}
+    </div>
   </div>
 </div>`;
 	};
@@ -8860,31 +8996,32 @@ initIslands((el, props) => {
 const defaultTheme = {
 	name: "default",
 	colors: {
-		primary: "#e04d0a",
-		primaryHover: "#f5602a",
+		primary: "#4f6fae",
+		primaryHover: "#425f96",
 		background: "#ffffff",
-		backgroundAlt: "#f8f9fa",
-		text: "#1a1a1a",
-		textMuted: "#666666",
-		border: "#e5e7eb",
-		codeBackground: "#1e293b",
-		codeText: "#e2e8f0"
+		backgroundAlt: "#f5f7fb",
+		text: "#131a30",
+		textMuted: "#4f607b",
+		border: "#d2dbea",
+		codeBackground: "#101a31",
+		codeText: "#edf3ff"
 	},
 	darkColors: {
-		primary: "#f5714a",
-		primaryHover: "#ff8a66",
-		background: "#141414",
-		backgroundAlt: "#141414",
-		text: "#e5e5e5",
-		textMuted: "#a3a3a3",
-		border: "#2a2a2a",
-		codeBackground: "#1a1a1a",
-		codeText: "#e5e5e5"
+		primary: "#86a4da",
+		primaryHover: "#a3bbe8",
+		background: "#060816",
+		backgroundAlt: "#0d1528",
+		text: "#ebf2ff",
+		textMuted: "#8ea0bf",
+		border: "#223252",
+		codeBackground: "#0a1020",
+		codeText: "#e7f0ff"
 	},
 	fonts: {
-		sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
-		mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace"
+		sans: "\"IBM Plex Sans\", \"Avenir Next\", \"Segoe UI Variable\", \"Segoe UI\", sans-serif",
+		mono: "\"IBM Plex Mono\", \"SFMono-Regular\", Consolas, monospace"
 	},
+	entryPage: { mode: "default" },
 	layout: {
 		sidebarWidth: "260px",
 		headerHeight: "60px",
@@ -8892,6 +9029,9 @@ const defaultTheme = {
 	},
 	header: {
 		logo: void 0,
+		logoLight: void 0,
+		logoDark: void 0,
+		showSiteNameText: true,
 		logoWidth: 28,
 		logoHeight: 28
 	},
@@ -8969,6 +9109,7 @@ function resolveTheme(config) {
 		colors: merged.colors ?? defaultTheme.colors,
 		darkColors: merged.darkColors ?? defaultTheme.darkColors,
 		fonts: merged.fonts ?? defaultTheme.fonts,
+		entryPage: merged.entryPage ?? defaultTheme.entryPage,
 		layout: merged.layout ?? defaultTheme.layout,
 		header: merged.header ?? defaultTheme.header,
 		footer: merged.footer ?? defaultTheme.footer,
@@ -9009,13 +9150,17 @@ function themeToNapi(theme) {
 			sans: theme.fonts.sans,
 			mono: theme.fonts.mono
 		} : void 0,
+		entryPage: theme.entryPage.mode ? { mode: theme.entryPage.mode } : void 0,
 		layout: theme.layout.sidebarWidth ? {
 			sidebarWidth: theme.layout.sidebarWidth,
 			headerHeight: theme.layout.headerHeight,
 			maxContentWidth: theme.layout.maxContentWidth
 		} : void 0,
-		header: theme.header.logo ? {
+		header: theme.header.logo || theme.header.logoLight || theme.header.logoDark ? {
 			logo: theme.header.logo,
+			logoLight: theme.header.logoLight,
+			logoDark: theme.header.logoDark,
+			showSiteNameText: theme.header.showSiteNameText,
 			logoWidth: theme.header.logoWidth,
 			logoHeight: theme.header.logoHeight
 		} : void 0,
@@ -9064,55 +9209,65 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       --sidebar-width: 260px;
       --header-height: 60px;
       --max-content-width: 960px;
-      --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+      --font-sans: 'IBM Plex Sans', 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', sans-serif;
+      --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
       --color-bg: #ffffff;
-      --color-bg-alt: #f8f9fa;
-      --color-text: #1a1a1a;
-      --color-text-muted: #666666;
-      --color-border: #e5e7eb;
-      --color-primary: #b7410e;
-      --color-primary-hover: #ce5937;
-      --color-code-bg: #1e293b;
-      --color-code-text: #e2e8f0;
+      --color-bg-alt: #f5f7fb;
+      --color-text: #131a30;
+      --color-text-muted: #4f607b;
+      --color-border: #d2dbea;
+      --color-primary: #4f6fae;
+      --color-primary-hover: #425f96;
+      --color-code-bg: #101a31;
+      --color-code-bg-top: #18264a;
+      --color-code-text: #edf3ff;
       --color-code-line-highlight: rgba(56, 189, 248, 0.16);
       --color-code-line-warning: rgba(245, 158, 11, 0.18);
       --color-code-line-warning-border: #f59e0b;
       --color-code-line-error: rgba(239, 68, 68, 0.18);
       --color-code-line-error-border: #ef4444;
+      --color-code-frame-border: rgba(147, 166, 200, 0.46);
+      --surface-noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23noise)' opacity='0.062'/%3E%3C/svg%3E");
+      --surface-noise-size: 164px 164px;
     }
     [data-theme="dark"] {
-      --color-bg: #141414;
-      --color-bg-alt: #141414;
-      --color-text: #e5e5e5;
-      --color-text-muted: #a3a3a3;
-      --color-border: #2a2a2a;
-      --color-primary: #c9714a;
-      --color-primary-hover: #d4845f;
-      --color-code-bg: #1a1a1a;
-      --color-code-text: #e5e5e5;
+      --color-bg: #060816;
+      --color-bg-alt: #0d1528;
+      --color-text: #ebf2ff;
+      --color-text-muted: #8ea0bf;
+      --color-border: #223252;
+      --color-primary: #86a4da;
+      --color-primary-hover: #a3bbe8;
+      --color-code-bg: #0a1020;
+      --color-code-bg-top: #0a1020;
+      --color-code-text: #e7f0ff;
       --color-code-line-highlight: rgba(14, 165, 233, 0.2);
       --color-code-line-warning: rgba(245, 158, 11, 0.2);
       --color-code-line-warning-border: #f59e0b;
       --color-code-line-error: rgba(239, 68, 68, 0.22);
       --color-code-line-error-border: #f87171;
+      --color-code-frame-border: rgba(34, 50, 82, 0.92);
+      --surface-noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23noise)' opacity='0.098'/%3E%3C/svg%3E");
     }
     @media (prefers-color-scheme: dark) {
       :root:not([data-theme="light"]) {
-        --color-bg: #141414;
-        --color-bg-alt: #141414;
-        --color-text: #e5e5e5;
-        --color-text-muted: #a3a3a3;
-        --color-border: #2a2a2a;
-        --color-primary: #c9714a;
-        --color-primary-hover: #d4845f;
-        --color-code-bg: #1a1a1a;
-        --color-code-text: #e5e5e5;
+        --color-bg: #060816;
+        --color-bg-alt: #0d1528;
+        --color-text: #ebf2ff;
+        --color-text-muted: #8ea0bf;
+        --color-border: #223252;
+        --color-primary: #86a4da;
+        --color-primary-hover: #a3bbe8;
+        --color-code-bg: #0a1020;
+        --color-code-bg-top: #0a1020;
+        --color-code-text: #e7f0ff;
         --color-code-line-highlight: rgba(14, 165, 233, 0.2);
         --color-code-line-warning: rgba(245, 158, 11, 0.2);
         --color-code-line-warning-border: #f59e0b;
         --color-code-line-error: rgba(239, 68, 68, 0.22);
         --color-code-line-error-border: #f87171;
+        --color-code-frame-border: rgba(34, 50, 82, 0.92);
+        --surface-noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23noise)' opacity='0.098'/%3E%3C/svg%3E");
       }
     }
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -9122,6 +9277,10 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       line-height: 1.7;
       color: var(--color-text);
       background: var(--color-bg);
+      background-image: var(--surface-noise-image);
+      background-size: var(--surface-noise-size);
+      background-repeat: repeat;
+      background-blend-mode: soft-light;
     }
     a { color: var(--color-primary); text-decoration: none; }
     a:hover { color: var(--color-primary-hover); text-decoration: underline; }
@@ -9140,6 +9299,18 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       padding: 0 1.5rem;
       z-index: 100;
     }
+    .header,
+    .sidebar,
+    .search-modal,
+    .mobile-footer,
+    .content .ox-api-entry,
+    .content .ox-api-module,
+    .content blockquote.ox-callout {
+      background-image: var(--surface-noise-image);
+      background-size: var(--surface-noise-size);
+      background-repeat: repeat;
+      background-blend-mode: soft-light;
+    }
     .header-title {
       font-size: 1.25rem;
       font-weight: 600;
@@ -9164,7 +9335,7 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       padding: 0.5rem 0.75rem;
       background: var(--color-bg-alt);
       border: 1px solid var(--color-border);
-      border-radius: 6px;
+      border-radius: 4px;
       color: var(--color-text-muted);
       cursor: pointer;
       font-size: 0.875rem;
@@ -9190,7 +9361,6 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       inset: 0;
       z-index: 200;
       background: rgba(0,0,0,0.6);
-      backdrop-filter: blur(4px);
       justify-content: center;
       padding-top: 10vh;
     }
@@ -9201,9 +9371,8 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       margin: 0 1rem;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
-      border-radius: 12px;
+      border-radius: 4px;
       overflow: hidden;
-      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
       max-height: 70vh;
       display: flex;
       flex-direction: column;
@@ -9243,7 +9412,7 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
     .search-result {
       display: block;
       padding: 0.75rem 1rem;
-      border-radius: 8px;
+      border-radius: 4px;
       color: var(--color-text);
       text-decoration: none;
     }
@@ -9274,7 +9443,7 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       border: none;
       cursor: pointer;
       padding: 0.5rem;
-      border-radius: 6px;
+      border-radius: 4px;
       color: var(--color-text-muted);
       transition: background 0.15s, color 0.15s;
     }
@@ -9303,38 +9472,50 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       left: 0;
       bottom: 0;
       width: var(--sidebar-width);
-      background: var(--color-bg-alt);
-      border-right: 1px solid var(--color-border);
+      background: color-mix(in srgb, var(--color-bg-alt) 16%, var(--color-bg));
+      border-right: 1px solid color-mix(in srgb, var(--color-border) 48%, transparent);
       overflow-y: auto;
-      padding: 1.5rem 1rem;
+      padding: 1rem 0.875rem 1.5rem;
+    }
+    .sidebar--entry { display: none; }
+    .sidebar nav {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
     }
-    .nav-section { margin-bottom: 1.5rem; }
+    .nav-section { margin-bottom: 0; }
     .nav-title {
-      font-size: 0.75rem;
+      font-size: 0.6875rem;
       font-weight: 600;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.08em;
       color: var(--color-text-muted);
-      margin-bottom: 0.5rem;
-      padding: 0 0.75rem;
+      margin-bottom: 0.4rem;
+      padding: 0 0.625rem;
+    }
+    .nav-list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
     }
-    .nav-list { list-style: none; }
-    .nav-item { margin: 0.125rem 0; }
+    .nav-item { margin: 0; }
     .nav-link {
       display: block;
-      padding: 0.5rem 0.75rem;
-      border-radius: 6px;
-      color: var(--color-text);
+      padding: 0.45rem 0.625rem;
+      border-radius: 0;
+      color: color-mix(in srgb, var(--color-text) 92%, var(--color-text-muted));
       font-size: 0.875rem;
-      transition: background 0.15s;
     }
     .nav-link:hover {
-      background: var(--color-border);
+      background: color-mix(in srgb, var(--color-bg-alt) 58%, transparent);
+      color: var(--color-text);
       text-decoration: none;
     }
     .nav-link.active {
-      background: var(--color-primary);
-      color: white;
+      background: color-mix(in srgb, var(--color-bg-alt) 72%, transparent);
+      color: var(--color-text);
+      font-weight: 600;
     }
 
     /* Main content */
@@ -9389,8 +9570,31 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       padding: 0.5rem 1rem;
       margin: 1rem 0;
       background: var(--color-bg-alt);
-      border-radius: 0 6px 6px 0;
+      border-radius: 0 4px 4px 0;
+    }
+    .content blockquote.ox-callout {
+      --callout-accent: var(--color-primary);
+      border-left-width: 3px;
+      border-left-color: var(--callout-accent);
+      padding: 0.9rem 1rem;
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--color-bg-alt) 92%, var(--callout-accent) 8%);
     }
+    .content blockquote.ox-callout.ox-callout--note,
+    .content blockquote.ox-callout.ox-callout--important { --callout-accent: var(--color-primary); }
+    .content blockquote.ox-callout.ox-callout--tip { --callout-accent: #0891b2; }
+    .content blockquote.ox-callout.ox-callout--warning { --callout-accent: #d97706; }
+    .content blockquote.ox-callout.ox-callout--caution { --callout-accent: #dc2626; }
+    .content .ox-callout-title {
+      margin: 0 0 0.5rem;
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--callout-accent, var(--color-primary));
+    }
+    .content blockquote.ox-callout > :last-child { margin-bottom: 0; }
+    .content blockquote.ox-callout > :not(.ox-callout-title):first-of-type { margin-top: 0; }
     .content code {
       font-family: var(--font-mono);
       font-size: 0.875em;
@@ -9400,18 +9604,26 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       word-break: break-all;
     }
     .content pre {
-      background: var(--color-code-bg);
+      background: linear-gradient(
+        180deg,
+        var(--color-code-bg-top) 0,
+        var(--color-code-bg) 3.5rem
+      ) !important;
       color: var(--color-code-text);
       padding: 1rem 1.25rem;
-      border-radius: 8px;
+      border-radius: 4px;
+      border: 1px solid var(--color-code-frame-border);
       overflow-x: auto;
       margin: 1.5rem 0;
       line-height: 1.5;
     }
     .content pre code {
       background: transparent;
+      border: 0;
       padding: 0;
+      border-radius: 0;
       font-size: 0.8125rem;
+      word-break: normal;
     }
     .content pre.ox-code-block code {
       display: block;
@@ -9426,11 +9638,11 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
     }
     .content pre.ox-code-block .ox-code-line--warning {
       background: var(--color-code-line-warning);
-      box-shadow: inset 3px 0 0 var(--color-code-line-warning-border);
+      border-left: 3px solid var(--color-code-line-warning-border);
     }
     .content pre.ox-code-block .ox-code-line--error {
       background: var(--color-code-line-error);
-      box-shadow: inset 3px 0 0 var(--color-code-line-error-border);
+      border-left: 3px solid var(--color-code-line-error-border);
     }
     .content table {
       width: 100%;
@@ -9444,21 +9656,355 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       text-align: left;
     }
     .content th { background: var(--color-bg-alt); font-weight: 600; }
-    .content img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
+    .content img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
     .content img[alt*="Logo"] { max-width: 200px; display: block; margin: 1rem 0; }
     .content img[alt*="Architecture"] { max-width: 600px; }
     .content img[alt*="Benchmark"] { max-width: 680px; }
     .content hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; }
+    .content .ox-api-controls {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0 0 1rem;
+    }
+    .content .ox-api-controls__button {
+      appearance: none;
+      border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
+      background: color-mix(in srgb, var(--color-bg-alt) 82%, var(--color-bg));
+      padding: 0.4rem 0.7rem;
+      border-radius: 4px;
+      color: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted));
+      font-family: var(--font-mono);
+      font-size: 0.78rem;
+      font-weight: 600;
+      line-height: 1.4;
+      cursor: pointer;
+    }
+    .content .ox-api-controls__button:hover {
+      color: var(--color-primary);
+      border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
+      background: color-mix(in srgb, var(--color-bg-alt) 68%, var(--color-primary) 6%);
+    }
+    .content .ox-api-entry,
+    .content .ox-api-module {
+      margin: 0;
+      border: 0;
+      border-top: 1px solid color-mix(in srgb, var(--color-border) 74%, transparent);
+      border-radius: 0;
+      background: transparent;
+      overflow: visible;
+    }
+    .content .ox-api-entry:last-child,
+    .content .ox-api-module:last-child {
+      border-bottom: 1px solid color-mix(in srgb, var(--color-border) 74%, transparent);
+    }
+    .content .ox-api-entry summary,
+    .content .ox-api-module summary {
+      list-style: none;
+      cursor: pointer;
+      padding: 1rem 0;
+      position: relative;
+    }
+    .content .ox-api-entry summary::-webkit-details-marker,
+    .content .ox-api-module summary::-webkit-details-marker { display: none; }
+    .content .ox-api-entry summary {
+      display: grid;
+      grid-template-columns: var(--octc-api-kind-width, 6.5rem) minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.95rem;
+    }
+    .content .ox-api-entry summary::after,
+    .content .ox-api-module summary::after {
+      content: "+";
+      align-self: center;
+      color: var(--color-text-muted);
+      font-family: var(--font-mono);
+      font-size: 0.95rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+    .content .ox-api-entry[open] summary::after,
+    .content .ox-api-module[open] summary::after {
+      content: "−";
+      color: var(--color-primary);
+    }
+    .content .ox-api-entry[open] summary,
+    .content .ox-api-module[open] summary {
+      border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+    }
+    .content .ox-api-entry__kind,
+    .content .ox-api-module__kind {
+      display: block;
+      width: var(--octc-api-kind-width, 6.5rem);
+      padding: 0.3rem 0 0;
+      background: transparent;
+      border: 0;
+      font-family: var(--font-mono);
+      font-size: 0.76rem;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      text-align: left;
+      white-space: nowrap;
+      color: var(--color-text-muted);
+    }
+    .content .ox-api-module__count {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.2rem 0.48rem;
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--color-bg-alt) 84%, var(--color-primary) 8%);
+      border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
+      color: var(--color-text-muted);
+      font-family: var(--font-mono);
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+      white-space: nowrap;
+    }
+    .content .ox-api-entry__name {
+      display: block;
+      font-family: var(--font-mono);
+      font-size: 0.95rem;
+      font-weight: 600;
+      line-height: 1.55;
+    }
+    .content .ox-api-entry__signature,
+    .content .ox-api-module__signature {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      font-family: var(--font-mono);
+      font-size: 0.95rem;
+      line-height: 1.55;
+      white-space: nowrap;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+    .content .ox-api-entry__description {
+      display: block;
+      color: color-mix(in srgb, var(--color-text) 78%, var(--color-text-muted));
+      font-size: 0.9rem;
+      line-height: 1.6;
+      max-width: 72ch;
+    }
+    .content .ox-api-entry__summary-main {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.55rem;
+    }
+    .content .ox-api-entry__name,
+    .content .ox-api-entry__signature,
+    .content .ox-api-module__name,
+    .content .ox-api-module__signature {
+      background: transparent;
+      padding: 0;
+      border-radius: 0;
+      word-break: normal;
+    }
+    .content code.shiki-inline.ox-api-entry__signature--highlighted,
+    .content code.shiki-inline.ox-api-module__signature--highlighted {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      background: linear-gradient(
+        180deg,
+        var(--color-code-bg-top) 0,
+        var(--color-code-bg) 2.75rem
+      ) !important;
+      border: 1px solid var(--color-code-frame-border) !important;
+      padding: 0.55rem 0.7rem !important;
+      border-radius: 4px !important;
+      white-space: nowrap;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+    .content code.shiki-inline.ox-api-entry__signature--highlighted .line,
+    .content code.shiki-inline.ox-api-module__signature--highlighted .line {
+      display: block;
+      width: max-content;
+      min-width: 100%;
+    }
+    .content .ox-api-entry__body,
+    .content .ox-api-module__body { padding: 0.7rem 0 1.9rem; }
+    .content .ox-api-entry__body {
+      margin-left: calc(var(--octc-api-kind-width, 6.5rem) + 0.95rem);
+      margin-top: 0.7rem;
+      padding: 1.45rem 1rem 2.1rem 1.1rem;
+      border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--color-bg-alt) 68%, transparent);
+    }
+    .content .ox-api-entry__body > :first-child { margin-top: 0; }
+    .content .ox-api-entry__body > :last-child { margin-bottom: 0; }
+    .content .ox-api-entry[open] summary {
+      padding-bottom: 0.35rem;
+    }
+    .content .ox-api-entry__section {
+      display: grid;
+      grid-template-columns: 6.5rem minmax(0, 1fr);
+      gap: 0.2rem 1.25rem;
+      align-items: start;
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+    }
+    .content .ox-api-entry__section h4 {
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-top: 0.25rem;
+      font-family: var(--font-mono);
+      font-size: 0.78rem;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--color-text-muted);
+    }
+    .content .ox-api-entry__section > :not(h4) { min-width: 0; }
+    .content .ox-api-entry__source {
+      margin: 0 0 0.15rem;
+      font-family: var(--font-mono);
+      font-size: 0.78rem;
+      color: var(--color-text-muted);
+    }
+    .content .ox-api-entry__source a {
+      color: inherit;
+      text-decoration-color: color-mix(in srgb, var(--color-text-muted) 38%, transparent);
+    }
+    .content .ox-api-entry__tags,
+    .content .ox-api-module__list {
+      list-style: none;
+      padding-left: 0;
+      margin: 0;
+    }
+    .content .ox-api-entry__tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.6rem;
+    }
+    .content .ox-api-entry__tags li {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.45rem;
+      padding: 0.4rem 0.55rem;
+      border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--color-bg-alt) 72%, transparent);
+    }
+    .content .ox-api-module__list li {
+      display: grid;
+      grid-template-columns: var(--octc-api-kind-width, 6.5rem) minmax(0, 1fr);
+      align-items: start;
+      gap: 1rem;
+      padding: 0.85rem 0;
+      border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
+    }
+    .content .ox-api-module__list li:first-child { border-top: none; }
+    .content .ox-api-entry__tag-name,
+    .content .ox-api-module__title { font-weight: 700; }
+    .content .ox-api-entry__tag-name {
+      color: var(--color-primary);
+      font-family: var(--font-mono);
+      font-size: 0.74rem;
+    }
+    .content .ox-api-entry__tag-value {
+      color: var(--color-text);
+      font-size: 0.84rem;
+      line-height: 1.45;
+    }
+    .content .ox-api-module summary {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      align-items: center;
+      gap: 0.9rem;
+    }
+    .content .ox-api-module__body { padding-top: 0.15rem; }
+    .content .ox-api-module__item { min-width: 0; }
+    .content .ox-api-module__link {
+      display: block;
+      text-decoration: none;
+    }
+    .content .ox-api-module__link:hover { text-decoration: none; }
+    .content .ox-api-module__name,
+    .content .ox-api-module__signature {
+      display: block;
+      font-family: var(--font-mono);
+      font-size: 0.91rem;
+      line-height: 1.55;
+      color: var(--color-text);
+    }
+    .content .ox-api-module__summary {
+      display: block;
+      margin-top: 0.45rem;
+      color: color-mix(in srgb, var(--color-text) 76%, var(--color-text-muted));
+      font-size: 0.88rem;
+      line-height: 1.55;
+    }
+    .content .ox-api-entry__section--examples pre {
+      margin: 0;
+      border: 1px solid var(--color-code-frame-border);
+      border-radius: 4px;
+    }
+    .content .ox-api-entry__params {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .content .ox-api-entry__param {
+      padding: 0.8rem 0;
+      border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
+    }
+    .content .ox-api-entry__param:first-child {
+      padding-top: 0;
+      border-top: 0;
+    }
+    .content .ox-api-entry__param-heading {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .content .ox-api-entry__param-name,
+    .content .ox-api-entry__return-type {
+      font-family: var(--font-mono);
+      font-size: 0.84rem;
+      font-weight: 600;
+      color: var(--color-text);
+      background: color-mix(in srgb, var(--color-bg-alt) 84%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
+      padding: 0.28rem 0.42rem;
+      border-radius: 4px;
+    }
+    .content .ox-api-entry__param-type {
+      font-family: var(--font-mono);
+      font-size: 0.78rem;
+      color: var(--color-code-text);
+      background: color-mix(in srgb, var(--color-code-bg) 96%, #243556);
+      border: 1px solid color-mix(in srgb, var(--color-code-bg) 82%, var(--color-border));
+      padding: 0.26rem 0.42rem;
+      border-radius: 4px;
+    }
+    .content .ox-api-entry__param-description,
+    .content .ox-api-entry__return-description {
+      margin: 0.55rem 0 0;
+      font-size: 0.88rem;
+      line-height: 1.6;
+      color: color-mix(in srgb, var(--color-text) 78%, var(--color-text-muted));
+    }
+    .content .ox-api-entry__return { margin: 0; }
 
     /* Responsive */
     @media (max-width: 768px) {
       .menu-toggle { display: block; }
       .sidebar {
         transform: translateX(-100%);
-        transition: transform 0.3s ease;
         z-index: 99;
         width: 280px;
       }
+      .sidebar--entry { display: block; }
       .sidebar.open { transform: translateX(0); }
       .main { margin-left: 0; padding: 1rem 0.75rem; }
       .content { padding: 0 0.25rem; }
@@ -9475,6 +10021,30 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
       }
+      .content .ox-api-controls {
+        justify-content: flex-start;
+        gap: 0.75rem;
+      }
+      .content .ox-api-entry__body {
+        margin-left: 0;
+        margin-top: 0.55rem;
+        padding: 1.2rem 0 1.7rem;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
+        border-radius: 0;
+        background: transparent;
+      }
+      .content .ox-api-entry__section {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+      }
+      .content .ox-api-entry__tags li,
+      .content .ox-api-module__list li,
+      .content .ox-api-module summary {
+        grid-template-columns: 1fr;
+      }
+      .content .ox-api-entry__signature { width: 100%; }
       .content pre.ox-code-block .line {
         margin: 0 -0.75rem;
         padding: 0 0.75rem;
@@ -9482,13 +10052,17 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       .content code { font-size: 0.8125em; }
       .content table {
         display: block;
+        width: max-content;
+        min-width: 100%;
+        max-width: calc(100vw - 1.5rem);
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         font-size: 0.8125rem;
-        margin: 1rem -0.75rem;
-        width: calc(100% + 1.5rem);
+        margin: 1rem 0;
+        border-collapse: separate;
+        border-spacing: 0;
       }
-      .content th, .content td { padding: 0.5rem 0.75rem; white-space: nowrap; }
+      .content th, .content td { padding: 0.5rem 0.75rem; white-space: nowrap; vertical-align: top; }
       .content img { margin: 1rem 0; }
       .content img[alt*="Logo"] { max-width: 150px; }
       .content img[alt*="Architecture"] { max-width: 100%; }
@@ -9496,12 +10070,13 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       .content blockquote { padding: 0.5rem 0.75rem; margin: 1rem 0; font-size: 0.9375rem; }
       .header { padding: 0 1rem; }
       .header-title { font-size: 1rem; }
-      .header-title img { width: 24px; height: 24px; }
+      .header-title:not(.header-title--logo-only) img { width: 24px; height: 24px; }
+      .header-title--logo-only .header-logo { width: 152px; height: auto; }
       .overlay {
         display: none;
         position: fixed;
         inset: 0;
-        background: rgba(0,0,0,0.5);
+        background: transparent;
         z-index: 98;
       }
       .overlay.open { display: block; }
@@ -9512,7 +10087,7 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       .main { padding: 0.75rem 0.5rem; }
       .content h1 { font-size: 1.35rem; }
       .content pre { font-size: 0.6875rem; padding: 0.625rem; }
-      .content table { font-size: 0.75rem; }
+      .content table { max-width: calc(100vw - 1rem); font-size: 0.75rem; }
       .content th, .content td { padding: 0.375rem 0.5rem; }
     }
   </style>
@@ -9565,7 +10140,7 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
   </div>
   <div class="overlay"></div>
   <div class="layout">
-    <aside class="sidebar">
+    <aside class="sidebar{{#entryPage}} sidebar--entry{{/entryPage}}">
       <nav>
 {{navigation}}
       </nav>
@@ -9619,6 +10194,22 @@ const DEFAULT_HTML_TEMPLATE = `<!DOCTYPE html>
       });
     }
 
+    document.querySelectorAll('.ox-api-controls').forEach((controls) => {
+      const targetSelector = controls.getAttribute('data-ox-api-target');
+      if (!targetSelector) return;
+
+      controls.querySelectorAll('[data-ox-api-toggle]').forEach((button) => {
+        button.addEventListener('click', () => {
+          const shouldOpen = button.getAttribute('data-ox-api-toggle') === 'expand';
+          document.querySelectorAll(targetSelector).forEach((entry) => {
+            if (entry instanceof HTMLDetailsElement) {
+              entry.open = shouldOpen;
+            }
+          });
+        });
+      });
+    });
+
     // Search functionality
     const searchButton = document.querySelector('.search-button');
     const searchOverlay = document.querySelector('.search-modal-overlay');
@@ -9951,8 +10542,14 @@ async function generateHtmlPage(pageData, navGroups, siteName, base, ogImage, th
 			name: pageData.entryPage.hero.name,
 			text: pageData.entryPage.hero.text,
 			tagline: pageData.entryPage.hero.tagline,
+			notice: pageData.entryPage.hero.notice ? {
+				title: pageData.entryPage.hero.notice.title,
+				body: pageData.entryPage.hero.notice.body
+			} : void 0,
 			image: pageData.entryPage.hero.image ? {
 				src: pageData.entryPage.hero.image.src,
+				lightSrc: pageData.entryPage.hero.image.lightSrc,
+				darkSrc: pageData.entryPage.hero.image.darkSrc,
 				alt: pageData.entryPage.hero.image.alt,
 				width: pageData.entryPage.hero.image.width,
 				height: pageData.entryPage.hero.image.height
@@ -11067,43 +11664,41 @@ function renderViewerHtml(pages, options) {
   <style>
     :root {
       --bg: #ffffff;
-      --bg-card: #f8f9fa;
+      --bg-card: #f5f7fb;
       --bg-preview: #ffffff;
-      --text: #1a1a2e;
-      --text-muted: #6b7280;
-      --border: #e5e7eb;
-      --accent: #e8590c;
-      --accent-light: #fff4e6;
+      --text: #131a30;
+      --text-muted: #4f607b;
+      --border: #d2dbea;
+      --accent: #4f6fae;
+      --accent-light: #eef2fa;
       --error: #dc2626;
       --error-bg: #fef2f2;
       --warning: #d97706;
       --warning-bg: #fffbeb;
       --success: #16a34a;
-      --tag-bg: #f0f0f0;
-      --shadow: 0 1px 3px rgba(0,0,0,0.08);
-      --radius: 8px;
+      --tag-bg: #ecf3ff;
+      --radius: 16px;
     }
     @media (prefers-color-scheme: dark) {
       :root {
-        --bg: #0f172a;
-        --bg-card: #1e293b;
-        --bg-preview: #334155;
-        --text: #e2e8f0;
-        --text-muted: #94a3b8;
-        --border: #334155;
-        --accent: #fb923c;
-        --accent-light: #431407;
+        --bg: #060816;
+        --bg-card: #0d1528;
+        --bg-preview: #10172d;
+        --text: #ebf2ff;
+        --text-muted: #8ea0bf;
+        --border: #223252;
+        --accent: #86a4da;
+        --accent-light: #151730;
         --error: #f87171;
         --error-bg: #450a0a;
         --warning: #fbbf24;
         --warning-bg: #451a03;
         --success: #4ade80;
-        --tag-bg: #334155;
-        --shadow: 0 1px 3px rgba(0,0,0,0.3);
+        --tag-bg: #131b33;
       }
     }
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); }
+    body { font-family: 'IBM Plex Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; background: radial-gradient(circle at top left, rgba(79,111,174,0.10), transparent 24%), radial-gradient(circle at 85% 14%, rgba(145,237,233,0.08), transparent 22%), var(--bg); color: var(--text); }
     .header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
     .header svg { width: 28px; height: 28px; color: var(--accent); }
     .header h1 { font-size: 18px; font-weight: 600; }
@@ -11124,7 +11719,7 @@ function renderViewerHtml(pages, options) {
     .search-input { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 13px; flex: 1; min-width: 200px; }
     .search-input::placeholder { color: var(--text-muted); }
     .container { padding: 24px; display: flex; flex-direction: column; gap: 20px; max-width: 1200px; margin: 0 auto; }
-    .card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); overflow: hidden; }
+    .card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
     .card-header { padding: 16px; border-bottom: 1px solid var(--border); }
     .card-path { font-size: 12px; color: var(--text-muted); font-family: monospace; margin-bottom: 4px; }
     .card-title { font-size: 16px; font-weight: 600; }
@@ -12019,13 +12614,16 @@ function DefaultTheme({ children }) {
   ${page.description ? `<meta name="description" content="${escapeHtml(page.description)}">` : ""}
   <style>
     :root {
-      --octc-color-primary: #e04d0a;
-      --octc-color-text: #1a1a1a;
+      --octc-color-primary: #4f6fae;
+      --octc-color-text: #131a30;
       --octc-color-bg: #ffffff;
+      --octc-color-bg-alt: #f5f7fb;
+      --octc-color-text-muted: #4f607b;
+      --octc-color-border: #d2dbea;
     }
     body {
-      font-family: system-ui, sans-serif;
-      line-height: 1.6;
+      font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
+      line-height: 1.7;
       color: var(--octc-color-text);
       background: var(--octc-color-bg);
       max-width: 800px;