@farming-labs/theme 0.1.9 → 0.1.11

package/dist/ai-search-dialog.mjs

@@ -22,6 +22,8 @@ function buildCodeBlock(lang, code) {
 	return `<div class="fd-ai-code-block"><div class="fd-ai-code-header">${lang ? `<div class="fd-ai-code-lang">${escapeHtml(lang)}</div>` : ""}<button class="fd-ai-code-copy" onclick="(function(btn){var code=btn.closest('.fd-ai-code-block').querySelector('code').textContent;navigator.clipboard.writeText(code).then(function(){btn.textContent='Copied!';setTimeout(function(){btn.textContent='Copy'},1500)})})(this)">Copy</button></div><pre><code>${highlighted}</code></pre></div>`;
 }
 function renderMarkdown(text) {
+	const codeBlockTokenBoundary = String.fromCharCode(0);
+	const codeBlockTokenPattern = new RegExp(`${codeBlockTokenBoundary}CB(\\d+)${codeBlockTokenBoundary}`, "g");
 	const codeBlocks = [];
 	let processed = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
 		codeBlocks.push(buildCodeBlock(lang, code));
@@ -51,7 +53,7 @@ function renderMarkdown(text) {
 	}
 	let result = output.join("\n");
 	result = result.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a href=\"$2\">$1</a>").replace(/^### (.*$)/gm, "<h4>$1</h4>").replace(/^## (.*$)/gm, "<h3>$1</h3>").replace(/^# (.*$)/gm, "<h2>$1</h2>").replace(/^[-*] (.*$)/gm, "<div style=\"display:flex;gap:8px;padding:2px 0\"><span style=\"opacity:0.5\">•</span><span>$1</span></div>").replace(/^(\d+)\. (.*$)/gm, "<div style=\"display:flex;gap:8px;padding:2px 0\"><span style=\"opacity:0.5\">$1.</span><span>$2</span></div>").replace(/\n\n/g, "<div style=\"height:8px\"></div>").replace(/\n/g, "<br>");
-	result = result.replace(/\x00CB(\d+)\x00/g, (_m, idx) => codeBlocks[Number(idx)]);
+	result = result.replace(codeBlockTokenPattern, (_m, idx) => codeBlocks[Number(idx)]);
 	return result;
 }
 function escapeHtml(s) {

package/dist/docs-api.mjs

@@ -1,9 +1,9 @@
 import { withLangInUrl } from "./i18n.mjs";
 import { getNextAppDir } from "./get-app-dir.mjs";
-import { performDocsSearch, resolveDocsI18n, resolveDocsLocale, resolveSearchRequestConfig } from "@farming-labs/docs";
 import fs from "node:fs";
 import path from "node:path";
 import matter from "gray-matter";
+import { performDocsSearch, resolveDocsI18n, resolveDocsLocale, resolveSearchRequestConfig } from "@farming-labs/docs";
 import { createDocsMcpHttpHandler, createFilesystemDocsMcpSource } from "@farming-labs/docs/server";
 
 //#region src/docs-api.ts

package/dist/docs-layout.mjs

@@ -5,29 +5,16 @@ import { DocsAIFeatures } from "./docs-ai-features.mjs";
 import { DocsCommandSearch } from "./docs-command-search.mjs";
 import { SidebarSearchWithAI } from "./sidebar-search-ai.mjs";
 import { LocaleThemeControl } from "./locale-theme-control.mjs";
+import fs from "node:fs";
+import path from "node:path";
+import matter from "gray-matter";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { Suspense } from "react";
 import { buildPageOpenGraph, buildPageTwitter } from "@farming-labs/docs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/docs-layout.tsx
-function runtimeRequire(id) {
-	const requireFn = eval("require");
-	return requireFn(id);
-}
-function getNodeFs() {
-	return runtimeRequire("node:fs");
-}
-function getNodePath() {
-	return runtimeRequire("node:path");
-}
-function getMatter() {
-	const module = runtimeRequire("gray-matter");
-	return module.default ?? module;
-}
 function getNextAppDir(root) {
-	const fs = getNodeFs();
-	const path = getNodePath();
 	if (fs.existsSync(path.join(root, "src", "app"))) return "src/app";
 	return "app";
 }
@@ -38,8 +25,6 @@ function resolveIcon(iconKey, registry) {
 }
 /** Read frontmatter from a page.mdx file. */
 function readFrontmatter(filePath) {
-	const fs = getNodeFs();
-	const matter = getMatter();
 	try {
 		const { data } = matter(fs.readFileSync(filePath, "utf-8"));
 		return data;
@@ -49,8 +34,6 @@ function readFrontmatter(filePath) {
 }
 /** Check if a directory has any subdirectories that contain page.mdx. */
 function hasChildPages(dir) {
-	const fs = getNodeFs();
-	const path = getNodePath();
 	if (!fs.existsSync(dir)) return false;
 	for (const name of fs.readdirSync(dir)) {
 		const full = path.join(dir, name);
@@ -74,7 +57,6 @@ function resolveDocsLocaleContext(config, locale) {
 	const entryBase = config.entry ?? "docs";
 	const i18n = resolveDocsI18nConfig(getDocsI18n(config));
 	const contentDir = config.contentDir;
-	const path = getNodePath();
 	function resolveContentDir(localeValue) {
 		if (!contentDir) {
 			const appDir = getNextAppDir(process.cwd());
@@ -99,8 +81,6 @@ function buildTree(config, ctx, flat = false) {
 	const icons = config.icons;
 	const ordering = config.ordering;
 	const rootChildren = [];
-	const fs = getNodeFs();
-	const path = getNodePath();
 	if (fs.existsSync(path.join(docsDir, "page.mdx"))) {
 		const data = readFrontmatter(path.join(docsDir, "page.mdx"));
 		rootChildren.push({
@@ -227,8 +207,6 @@ function localizeTreeUrls(tree, locale) {
 function buildLastModifiedMap(ctx) {
 	const docsDir = ctx.docsDir;
 	const map = {};
-	const fs = getNodeFs();
-	const path = getNodePath();
 	function formatDate(date) {
 		return date.toLocaleDateString("en-US", {
 			year: "numeric",
@@ -258,8 +236,6 @@ function buildLastModifiedMap(ctx) {
 function buildDescriptionMap(ctx) {
 	const docsDir = ctx.docsDir;
 	const map = {};
-	const fs = getNodeFs();
-	const path = getNodePath();
 	function scan(dir, slugParts) {
 		if (!fs.existsSync(dir)) return;
 		const pagePath = path.join(dir, "page.mdx");

package/dist/serialize-icon.mjs

@@ -1,10 +1,16 @@
+import { createRequire } from "node:module";
+
 //#region src/serialize-icon.ts
+/**
+* Server-only helper to convert a ReactNode icon into an HTML string
+* so it can be safely serialized across the server→client boundary.
+*/
+const require = createRequire(import.meta.url);
 function serializeIcon(icon) {
 	if (!icon) return void 0;
 	if (typeof icon === "string") return icon;
 	try {
-		const runtimeRequire = eval("require");
-		const { renderToStaticMarkup } = runtimeRequire("react-dom/server");
+		const { renderToStaticMarkup } = require("react-dom/server");
 		return renderToStaticMarkup(icon);
 	} catch {
 		return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "keywords": [
     "docs",
@@ -133,7 +133,7 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@farming-labs/docs": "0.1.9"
+    "@farming-labs/docs": "0.1.11"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/base.css

@@ -650,3 +650,29 @@ figure.shiki:hover > div:first-child button {
   width: 16px;
   height: 16px;
 }
+
+/* ─── Logical inset compatibility ─────────────────────────────────── */
+
+/* Tailwind 4 currently emits `start-*` utilities for some imported Fumadocs
+ * logical inset classes, while the rendered docs layout still uses `inset-s-*`.
+ * Add the small alias set the layout relies on so sidebar connectors, active
+ * markers, and sticky sidebar placement keep working across themes. */
+.inset-s-0 {
+  inset-inline-start: 0;
+}
+
+.inset-s-4 {
+  inset-inline-start: calc(var(--spacing) * 4);
+}
+
+.inset-e-0 {
+  inset-inline-end: 0;
+}
+
+.before\:inset-s-2\.5::before {
+  inset-inline-start: calc(var(--spacing) * 2.5);
+}
+
+.data-\[active\=true\]\:before\:inset-s-2\.5[data-active="true"]::before {
+  inset-inline-start: calc(var(--spacing) * 2.5);
+}

package/styles/colorful.css

@@ -17,6 +17,12 @@
   --color-fd-ring: hsl(45, 90%, 55%);
 }
 
+.fd-sidebar {
+  --color-fd-muted: hsl(0 0% 96%);
+  --color-fd-secondary: hsl(0 0% 97%);
+  --color-fd-muted-foreground: hsl(0 0% 45%);
+}
+
 /* ─── Description under title ──────────────────────────────────────── */
 
 .fd-page-description {
@@ -397,3 +403,30 @@
 .fd-feedback-status[data-status="success"] {
   color: var(--color-fd-primary);
 }
+
+/* ─── Desktop docs layout (colorful theme) ──────────────────────── */
+
+@media (min-width: 1024px) {
+  #nd-docs-layout.grid {
+    grid-template:
+      "sidebar header toc"
+      "sidebar toc-popover toc"
+      "sidebar main toc" 1fr /
+      var(--fd-sidebar-col)
+      minmax(0, 1fr)
+      var(--fd-toc-width) !important;
+  }
+
+  #nd-docs-layout [data-sidebar-placeholder] {
+    justify-self: stretch;
+  }
+
+  #nd-docs-layout article#nd-page {
+    max-width: none;
+    margin-inline: 0;
+  }
+
+  #nd-docs-layout article#nd-page > .prose {
+    max-width: none;
+  }
+}