@docubook/flame 1.7.2 → 2.0.0-alpha.1

package/.docu/components/Context.tsx

@@ -76,7 +76,7 @@ export function Context({ className }: ContextProps) {
             onClick={() => navigate(contextPath)}
             className={cn(
               "relative flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm",
-              "text-left outline-none transition-colors",
+              "text-left transition-colors outline-none",
               isActive
                 ? "bg-primary/20 text-primary"
                 : "hover:bg-base-200 text-base-content/80 hover:text-base-content"

package/.docu/components/Pagination.tsx

@@ -29,7 +29,15 @@ export default function Pagination({
   return (
     <PaginationDocs
       prev={prev ? { href: docsHtmlHref(`/docs${prev.href}`), title: prev.title } : undefined}
-      next={next ? { href: docsHtmlHref(`/docs${next.href}`), title: next.title } : undefined}
+      next={
+        next
+          ? {
+              href: docsHtmlHref(`/docs${next.href}`),
+              title: next.title,
+              description: next.description,
+            }
+          : undefined
+      }
       className={className}
       prevIcon={prevIcon}
       nextIcon={nextIcon}

package/.docu/components/Search.tsx

@@ -154,7 +154,7 @@ export default function Search({ className }: SearchProps) {
         boxClassName="w-[calc(100%-2rem)] max-w-[640px] p-0 mx-auto relative z-10"
       >
         <div onKeyDown={handleKeyDown}>
-          <div className="px-4 pb-2 pt-4">
+          <div className="px-4 pt-4 pb-2">
             <div className="border-base-300 flex items-center gap-3 rounded-lg border px-4 py-2.5">
               <SearchIcon className="text-primary h-5 w-5 shrink-0" />
               <input
@@ -163,7 +163,7 @@ export default function Search({ className }: SearchProps) {
                 onChange={handleQueryChange}
                 placeholder="Search documentation..."
                 autoFocus
-                className="placeholder:text-base-content/40 h-8 w-full border-none bg-transparent text-base outline-none ring-0 focus:outline-none focus:ring-0"
+                className="placeholder:text-base-content/40 h-8 w-full border-none bg-transparent text-base ring-0 outline-none focus:ring-0 focus:outline-none"
                 aria-label="Search documentation"
               />
               {query && (
@@ -187,7 +187,7 @@ export default function Search({ className }: SearchProps) {
             </div>
           </div>
 
-          <div className="max-h-[400px] overflow-y-auto px-3 py-2">
+          <div className="max-h-100 overflow-y-auto px-3 py-2">
             {query.trim().length >= 2 && results.length === 0 && (
               <p className="text-base-content/50 py-8 text-center text-sm">
                 No results for &ldquo;<span className="text-primary">{query}</span>&rdquo;
@@ -248,10 +248,10 @@ function SearchTrigger({ onClick }: { onClick: () => void }) {
           <SearchIcon className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">Search</span>
           <div className="flex items-center gap-0.5">
-            <Kbd className="bg-primary text-[12px text-base-300 dark:text-foreground rounded-md p-1.5 font-medium">
+            <Kbd className="bg-primary text-primary-foreground rounded-md p-1.5 text-[12px] font-medium">
               <FnKey.Cmd />
             </Kbd>
-            <Kbd className="bg-primary text-base-300 dark:text-foreground rounded-md p-1.5 text-[12px] font-medium">
+            <Kbd className="bg-primary text-primary-foreground rounded-md p-1.5 text-[12px] font-medium">
               K
             </Kbd>
           </div>
@@ -289,7 +289,7 @@ function GroupedResults({
     <div className="flex flex-col gap-1">
       {groups.map((group) => (
         <div key={group.section}>
-          <div className="text-base-content/50 px-2 pb-1 pt-3 text-xs font-semibold">
+          <div className="text-base-content/50 px-2 pt-3 pb-1 text-xs font-semibold">
             {group.section}
           </div>
           {group.items.map(({ result, globalIndex }) => {

package/.docu/components/Sidebar.tsx

@@ -92,13 +92,21 @@ export function MobileBar({
   useEffect(() => {
     if (!tocs.length) return;
 
+    // Match the CSS scroll-margin-top (scroll-mt-54 = 216px) that anchor
+    // jumps rest at, so the highlight agrees with where a jump lands.
+    const firstEl = document.getElementById(tocs[0].href.slice(1));
+    const offset = firstEl ? parseFloat(getComputedStyle(firstEl).scrollMarginTop) || 100 : 100;
+
     const handleScroll = () => {
       let currentId: string | null = null;
       for (const toc of tocs) {
         const id = toc.href.slice(1);
         const el = document.getElementById(id);
         if (!el) continue;
-        if (el.getBoundingClientRect().top <= 100) {
+        // Round: smooth anchor scrolls land at sub-pixel positions (e.g.
+        // 216.4px), which would otherwise fail the <= offset comparison and
+        // leave the previous heading highlighted.
+        if (Math.round(el.getBoundingClientRect().top) <= offset) {
           currentId = id;
         } else {
           break;
@@ -109,7 +117,13 @@ export function MobileBar({
 
     handleScroll();
     window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
+    // Smooth anchor scrolls may not emit a trailing scroll event at the
+    // target position — recompute once the animation actually settles.
+    window.addEventListener("scrollend", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scrollend", handleScroll);
+    };
   }, [tocs]);
 
   useEffect(() => {
@@ -192,7 +206,10 @@ export function MobileBar({
               <MobileTocList
                 tocs={tocs}
                 activeId={activeId}
-                onSelect={() => setTocExpanded(false)}
+                onSelect={(id) => {
+                  setTocExpanded(false);
+                  setActiveId(id);
+                }}
               />
             ) : (
               <div className="flex flex-col items-center py-6 text-center">
@@ -216,7 +233,7 @@ function MobileTocList({
 }: {
   tocs: TocItem[];
   activeId: string | null;
-  onSelect: () => void;
+  onSelect: (id: string) => void;
 }) {
   return (
     <ul className="flex flex-col gap-0.5">
@@ -230,9 +247,21 @@ function MobileTocList({
               href={toc.href}
               onClick={(e) => {
                 e.preventDefault();
-                onSelect();
-                const el = document.getElementById(id);
-                if (el) el.scrollIntoView({ behavior: "smooth" });
+                onSelect(id);
+                history.replaceState(null, "", toc.href);
+                const targetId = id;
+                // Wait for the bar collapse re-render so the measurement is
+                // accurate, then jump with the same offset the observer uses
+                // (scrollIntoView ignores scroll-margin-top on iOS Safari).
+                requestAnimationFrame(() => {
+                  const el = document.getElementById(targetId);
+                  if (!el) return;
+                  const margin = parseFloat(getComputedStyle(el).scrollMarginTop) || 100;
+                  window.scrollTo({
+                    top: el.getBoundingClientRect().top + window.scrollY - margin,
+                    behavior: "smooth",
+                  });
+                });
               }}
               className={cn(
                 "block rounded px-2 py-1.5 text-sm transition-colors",
@@ -276,7 +305,7 @@ function MobileDrawer({
   return (
     <div className="fixed inset-0 z-[100]">
       <div className="absolute inset-0 bg-black/40" onClick={onClose} aria-hidden="true" />
-      <div className="bg-base-100 absolute right-0 top-0 flex h-full w-80 max-w-[85vw] flex-col shadow-xl">
+      <div className="bg-base-100 absolute top-0 right-0 flex h-full w-80 max-w-[85vw] flex-col shadow-xl">
         <div className="border-base-200 flex items-center justify-between border-b px-4 py-3">
           <div className="flex items-center gap-2">
             <GitHubLink repoUrl={repoUrl} />

package/.docu/components/Theme.tsx

@@ -24,7 +24,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
           >
             <Sun
               className={`h-4 w-4 transition-colors ${
-                !isDark ? "text-base-300" : "text-foreground"
+                !isDark ? "text-primary-foreground" : "text-foreground"
               }`}
             />
           </button>
@@ -38,7 +38,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
           >
             <Moon
               className={`h-4 w-4 transition-colors ${
-                isDark ? "text-foreground" : "text-base-content/60"
+                isDark ? "text-primary-foreground" : "text-base-content/60"
               }`}
             />
           </button>

package/.docu/components/Toc.tsx

@@ -20,13 +20,29 @@ export default function Toc({ tocs }: TocProps) {
     activeIdRef.current = activeId;
   }, [activeId]);
 
+  // Single source of truth for the anchor offset — used by BOTH the scroll
+  // observer and the TOC click scroll so they can never disagree. Reads the
+  // CSS scroll-margin-top (prose-headings:scroll-mt-4 desktop /
+  // scroll-mt-16 mobile) so a change in one place updates both, and the
+  // heading lands exactly where the browser would put a native anchor jump.
+  const getAnchorOffset = useCallback((): number => {
+    if (typeof window === "undefined") return 100;
+    const first = tocs[0] ? document.getElementById(tocs[0].href.slice(1)) : null;
+    const margin = first ? parseFloat(getComputedStyle(first).scrollMarginTop) : 0;
+    return margin || 100;
+  }, [tocs]);
+
   useEffect(() => {
-    if (typeof document === "undefined" || !tocs.length) return;
+    // Desktop-only TOC — on mobile this island is display:none but still
+    // mounted; letting its observer run would hijack the URL hash while the
+    // mobile bar owns TOC behavior there.
+    if (typeof window === "undefined" || window.innerWidth < 1024) return;
+    if (!tocs.length) return;
 
     const isDesktop = window.innerWidth >= 1024;
     const container = isDesktop ? document.getElementById("scroll-container") : null;
     const scrollTarget = container || window;
-    const offset = isDesktop ? 80 : 100;
+    const offset = getAnchorOffset();
 
     const handleScroll = () => {
       if (clickedIdRef.current) return;
@@ -72,7 +88,7 @@ export default function Toc({ tocs }: TocProps) {
       scrollTarget.removeEventListener("scroll", listener);
       if (throttleTimer) clearTimeout(throttleTimer);
     };
-  }, [tocs]);
+  }, [tocs, getAnchorOffset]);
 
   const handleLinkClick = useCallback((id: string) => {
     clickedIdRef.current = id;
@@ -101,7 +117,7 @@ export default function Toc({ tocs }: TocProps) {
 
       <div className="relative">
         <div className="relative text-sm">
-          <div className="bg-base-300 absolute left-0 top-0 h-full w-px" />
+          <div className="bg-base-300 absolute top-0 left-0 h-full w-px" />
 
           <div className="flex flex-col">
             {tocs.map(({ href, level, text }) => {
@@ -143,7 +159,37 @@ export default function Toc({ tocs }: TocProps) {
                       e.preventDefault();
                       handleLinkClick(id);
                       const el = document.getElementById(id);
-                      if (el) el.scrollIntoView({ behavior: "smooth" });
+                      if (el) {
+                        // Manual scroll with the same offset the observer uses —
+                        // scrollIntoView ignores scroll-margin-top on iOS Safari
+                        // window-scroll, landing the heading under the sticky
+                        // mobile bar.
+                        const offset = getAnchorOffset();
+                        const scroller =
+                          window.innerWidth >= 1024
+                            ? document.getElementById("scroll-container")
+                            : null;
+                        const elTop = el.getBoundingClientRect().top;
+                        if (scroller) {
+                          // Container scroll space: element offset within the
+                          // container minus the anchor offset (the container
+                          // itself may sit below the viewport top, e.g. under
+                          // the navbar).
+                          scroller.scrollTo({
+                            top:
+                              elTop -
+                              scroller.getBoundingClientRect().top +
+                              scroller.scrollTop -
+                              offset,
+                            behavior: "smooth",
+                          });
+                        } else {
+                          window.scrollTo({
+                            top: elTop + window.scrollY - offset,
+                            behavior: "smooth",
+                          });
+                        }
+                      }
                     }}
                     className={cn(
                       "flex flex-1 items-center py-2 transition-all duration-200",
@@ -153,7 +199,7 @@ export default function Toc({ tocs }: TocProps) {
                     )}
                     style={{ paddingLeft: `${levelPadding + 6}px` }}
                   >
-                    <span className="line-clamp-2 break-words text-sm">{text}</span>
+                    <span className="line-clamp-2 text-sm break-words">{text}</span>
                   </a>
                 </div>
               );

package/.docu/components/Typography.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 export function Typography({ children }: PropsWithChildren) {
   return (
-    <div className="prose prose-zinc dark:prose-invert prose-code:font-code dark:prose-code:bg-stone-900/25 prose-code:bg-stone-50 prose-pre:bg-background max-lg:prose-headings:scroll-mt-54 prose-headings:scroll-mt-4 prose-code:text-sm prose-code:leading-6 dark:prose-code:text-white prose-code:text-stone-800 prose-code:p-1 prose-code:rounded-md prose-code:border prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto prose-img:my-3 prose-h2:my-4 prose-h2:mt-8 max-w-full! w-full pt-2">
+    <div className="prose prose-zinc dark:prose-invert prose-code:font-code dark:prose-code:bg-stone-900/25 prose-code:bg-stone-50 prose-pre:bg-background max-lg:prose-headings:scroll-mt-16 prose-headings:scroll-mt-4 prose-code:text-sm prose-code:leading-6 dark:prose-code:text-white prose-code:text-stone-800 prose-code:p-1 prose-code:rounded-md prose-code:border prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto prose-img:my-3 prose-h2:my-4 prose-h2:mt-8 w-full max-w-full! pt-2">
       {children}
     </div>
   );

package/.docu/components/home/Hero.tsx

@@ -34,8 +34,8 @@ function renderActionButtonIcon(iconName: string | undefined, className?: string
 
 function ActionButton({ action }: ActionButtonProps) {
   const themeClasses = {
-    primary: "bg-primary text-primary-content hover:bg-primary/90",
-    secondary: "bg-secondary text-secondary-content hover:bg-secondary/90",
+    primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
     ghost: "bg-transparent text-muted-foreground border border-base-300 hover:bg-base-200",
   };
 
@@ -64,11 +64,11 @@ export function Hero({ hero, className }: HeroProps) {
     <div className={cn("mx-auto max-w-4xl px-6 py-32 sm:py-44", className)}>
       <div className="text-center">
         {tagline && <p className="text-primary mb-4 text-lg font-semibold">{tagline}</p>}
-        <h1 className="text-balance text-5xl font-semibold tracking-tight sm:text-7xl">
+        <h1 className="text-5xl font-semibold tracking-tight text-balance sm:text-7xl">
           {headline}
         </h1>
         {description && (
-          <p className="text-muted-foreground mt-8 text-pretty text-lg sm:text-xl">{description}</p>
+          <p className="text-muted-foreground mt-8 text-lg text-pretty sm:text-xl">{description}</p>
         )}
         {actions && actions.length > 0 && (
           <div className="mt-10 flex flex-wrap items-center justify-center gap-4">

package/.docu/components/registry.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from "react";
-import { createMdxComponents } from "@docubook/mdx-content";
+import { createMdxComponents } from "@docubook/markdown";
 import { Dropdown, DropdownItem, DropdownLink } from "@docubook/ui-react/dropdown";
 import { PaginationDocs } from "@docubook/ui-react/pagination";
 import { Toggle, ToggleGroup } from "@docubook/ui-react/toggle";

package/.docu/lib/build.deno.js

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-HRO7ONJQ.js";
-import "./chunk-B6LGUADD.js";
+} from "./chunk-MQWWCO6O.js";
+import "./chunk-TRT6WQZG.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-PJIJEPNR.js";
+import "./chunk-JRERMREW.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.deno.ts

package/.docu/lib/{build.impl-TSIF3F7O.js → build.impl-VXB4KL4D.js}

@@ -1,10 +1,10 @@
 import {
   runBuild,
   runBuildCli
-} from "./chunk-HRO7ONJQ.js";
-import "./chunk-B6LGUADD.js";
+} from "./chunk-MQWWCO6O.js";
+import "./chunk-TRT6WQZG.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-PJIJEPNR.js";
+import "./chunk-JRERMREW.js";
 import "./chunk-4IQXHHPF.js";
 export {
   runBuild,

package/.docu/lib/build.node.js

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-HRO7ONJQ.js";
-import "./chunk-B6LGUADD.js";
+} from "./chunk-MQWWCO6O.js";
+import "./chunk-TRT6WQZG.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-PJIJEPNR.js";
+import "./chunk-JRERMREW.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.node.ts

package/.docu/lib/{chunk-SPHVBXRR.js → chunk-7PRQ3RQB.js}

@@ -28,7 +28,7 @@ var NGINX_CONF = `server {
   add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
   add_header Referrer-Policy "strict-origin-when-cross-origin" always;
   add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
-  add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'" always;
+  add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'" always;
 
   location /assets/ {
     expires 1y;
@@ -38,7 +38,7 @@ var NGINX_CONF = `server {
     add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
     add_header Referrer-Policy "strict-origin-when-cross-origin" always;
     add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'" always;
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'" always;
   }
 
   location /docs/assets/ {
@@ -49,7 +49,7 @@ var NGINX_CONF = `server {
     add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
     add_header Referrer-Policy "strict-origin-when-cross-origin" always;
     add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'" always;
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'" always;
   }
 
   location / {
@@ -113,7 +113,7 @@ var HEADERS_FILE = `/*
   Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' data:; connect-src 'self' https:; frame-src https://www.youtube-nocookie.com; frame-ancestors 'none'
 
 /assets/*
   Cache-Control: public, max-age=31536000, immutable
@@ -137,7 +137,7 @@ async function runBuild() {
     process.env.FLAME_BUILD_SILENT = "1";
     process.env.LOG_LEVEL = "error";
   }
-  const { runBuildCli } = await import("./build.impl-TSIF3F7O.js");
+  const { runBuildCli } = await import("./build.impl-VXB4KL4D.js");
   await runBuildCli();
 }
 async function writeDockerFiles() {
@@ -145,7 +145,7 @@ async function writeDockerFiles() {
   if (!existsSync(join(dockerDir, "Dockerfile"))) {
     await writeFile(
       join(dockerDir, "Dockerfile"),
-      `FROM ghcr.io/docubook/flame-builder:${FLAME_MAJOR} AS builder
+      `FROM ghcr.io/docubook/flame:${FLAME_MAJOR} AS builder
 ENV NODE_ENV=production
 WORKDIR /app
 COPY . .

package/.docu/lib/{chunk-DITXUPUV.js → chunk-A6FIEG3H.js}

@@ -9,12 +9,13 @@ import {
   compileMdx,
   computeInlineThemeCss,
   errorHtml,
+  frontmatterField,
   generateSearchIndex,
   hmrScript,
   htmlShell,
   initSentry,
   loadPlugins
-} from "./chunk-B6LGUADD.js";
+} from "./chunk-TRT6WQZG.js";
 import {
   SECURITY_HEADERS,
   generateNonce,
@@ -27,7 +28,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-PJIJEPNR.js";
+} from "./chunk-JRERMREW.js";
 import {
   DIST_DIR,
   DOCS_DIR,
@@ -36,10 +37,12 @@ import {
 } from "./chunk-4IQXHHPF.js";
 
 // .docu/node/server.impl.ts
-import { watch } from "node:fs";
+import { watch, existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { createRequire } from "node:module";
 
 // .docu/node/server-routes.ts
-import { readFile } from "node:fs/promises";
+import { readFile, stat } from "node:fs/promises";
 import { resolve } from "node:path";
 import { readFileSync, statSync } from "node:fs";
 import React from "react";
@@ -57,10 +60,15 @@ function createHtmlResponse(title, description, body, status, state, depth = 0)
     nonce,
     extraScripts: hmrScript(nonce),
     themeCss: state.inlineThemeCss,
-    depth
+    depth,
+    // 404 pages can be requested at arbitrary depths (e.g. a noLink section
+    // path typed in the address bar) — relative asset paths would resolve
+    // against the wrong directory and break CSS/JS.
+    absoluteAssets: status === 404
   });
   return htmlResponse(html, nonce, status, true);
 }
+var docsCache = /* @__PURE__ */ new Map();
 async function getDocsForSlug(slug, state) {
   if (!isSlugSafe(slug, DOCS_DIR)) return null;
   const paths = [
@@ -87,6 +95,11 @@ async function getDocsForSlug(slug, state) {
   }
   if (!filePath || !raw) return null;
   const relPath = filePath.replace(PROJECT_ROOT + "/", "");
+  const mtimeMs = (await stat(filePath)).mtimeMs;
+  const cached = docsCache.get(relPath);
+  if (cached && cached.mtimeMs === mtimeMs) {
+    return cached.doc;
+  }
   let content = raw;
   if (state.builder) {
     const transformed = await state.builder.runOnLoad(relPath, content);
@@ -105,7 +118,7 @@ async function getDocsForSlug(slug, state) {
       content
     });
   }
-  return {
+  const doc = {
     content: result.content,
     compiledSource: result.compiledSource,
     frontmatter,
@@ -113,10 +126,12 @@ async function getDocsForSlug(slug, state) {
     filePath: relPath,
     resolvedContent: content
   };
+  docsCache.set(relPath, { mtimeMs, doc });
+  return doc;
 }
 async function renderDocsServerPage(doc, slug, pathname, state) {
-  const title = (typeof doc.frontmatter.title === "string" ? doc.frontmatter.title : "") || slug.join("/") || "Docs";
-  const description = typeof doc.frontmatter.description === "string" ? doc.frontmatter.description : "";
+  const title = frontmatterField(doc.frontmatter, "title") || slug.join("/") || "Docs";
+  const description = frontmatterField(doc.frontmatter, "description");
   const page = React.createElement(
     DocsLayout,
     { repoUrl: state.docuConfig.repo?.url, pathname },
@@ -124,8 +139,9 @@ async function renderDocsServerPage(doc, slug, pathname, state) {
       slug,
       title,
       description,
-      date: doc.frontmatter.date,
-      content: doc.content,
+      date: frontmatterField(doc.frontmatter, "date") || void 0,
+      // Same root-relative SSR as build — see build.ts.
+      content: renderToString(doc.content),
       tocs: doc.tocs,
       filePath: doc.filePath,
       repoUrl: state.docuConfig.repo?.url,
@@ -283,6 +299,16 @@ async function runServer(adapter) {
     builder
   };
   const hmrClients = /* @__PURE__ */ new Set();
+  const require2 = createRequire(import.meta.url);
+  function resolveMdxContentSrc() {
+    try {
+      const pkgDir = dirname(require2.resolve("@docubook/markdown/package.json"));
+      const src = join(pkgDir, "src");
+      return existsSync(src) ? src : null;
+    } catch {
+      return null;
+    }
+  }
   let hmrTimeout = null;
   const watcher = watch(DOCS_DIR, { recursive: true }, (_event, filename) => {
     if (!filename || !filename.endsWith(".mdx") && !filename.endsWith(".md")) return;
@@ -297,12 +323,37 @@ async function runServer(adapter) {
       }
     }, 300);
   });
+  let srcHmrTimeout = null;
+  const mdxContentSrc = resolveMdxContentSrc();
+  const srcWatcher = mdxContentSrc ? watch(mdxContentSrc, { recursive: true }, (_event, filename) => {
+    if (!filename || !/\.(ts|tsx|js|jsx|css)$/.test(filename)) return;
+    if (srcHmrTimeout) clearTimeout(srcHmrTimeout);
+    srcHmrTimeout = setTimeout(async () => {
+      try {
+        state.assetManifest = await buildClientBundle();
+        logger.warn("[hmr] client bundle rebuilt (component change)");
+      } catch (e) {
+        logger.warn(
+          `[hmr] bundle rebuild failed: ${e instanceof Error ? e.message : String(e)}`
+        );
+      }
+      for (const client of [...hmrClients]) {
+        try {
+          client.enqueue(new TextEncoder().encode("data: reload\n\n"));
+        } catch {
+          hmrClients.delete(client);
+        }
+      }
+    }, 300);
+  }) : null;
   process.on("SIGINT", () => {
     watcher.close();
+    srcWatcher?.close();
     process.exit(0);
   });
   process.on("SIGTERM", () => {
     watcher.close();
+    srcWatcher?.close();
     process.exit(0);
   });
   let handle = null;

package/.docu/lib/{chunk-PJIJEPNR.js → chunk-JRERMREW.js}

@@ -5,7 +5,7 @@ import {
 // package.json
 var package_default = {
   name: "@docubook/flame",
-  version: "1.7.2",
+  version: "2.0.0-alpha.1",
   description: "A blazing-fast React + MDX framework powered by Bun, built for modern documentation experiences.",
   type: "module",
   bin: {
@@ -62,10 +62,10 @@ var package_default = {
   license: "MIT",
   dependencies: {
     "@docubook/core": "workspace:^",
-    "@docubook/mdx-content": "workspace:^",
-    "@docubook/runt": "workspace:^",
+    "@docubook/markdown": "workspace:^",
     "@docubook/themes-colors": "workspace:^",
     "@docubook/ui-react": "workspace:^",
+    "@mdx-js/react": "^3.0.1",
     "@tailwindcss/cli": "4.3.0",
     "@tailwindcss/typography": "0.5.16",
     "bun-plugin-tailwind": "^0.1.2",
@@ -74,7 +74,8 @@ var package_default = {
     "lucide-react": "^1.14.0",
     react: "^19.2.7",
     "react-dom": "^19.2.7",
-    unified: "^11.0.0"
+    unified: "^11.0.0",
+    zod: "^4.4.3"
   },
   peerDependencies: {
     "@sentry/bun": "^10.0.0"

package/.docu/lib/{chunk-KMDGSD57.js → chunk-LZDEWK25.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-PJIJEPNR.js";
+} from "./chunk-JRERMREW.js";
 import {
   DIST_DIR
 } from "./chunk-4IQXHHPF.js";
@@ -58,7 +58,7 @@ async function runPreview(adapter) {
             headers: {
               "Content-Type": "text/html",
               ...SECURITY_HEADERS,
-              "Content-Security-Policy": cspHeader(nonce, true)
+              "Content-Security-Policy": cspHeader(nonce)
             }
           });
         }
@@ -75,7 +75,7 @@ async function runPreview(adapter) {
           headers: {
             "Content-Type": "text/html",
             ...SECURITY_HEADERS,
-            "Content-Security-Policy": cspHeader(nonce, true)
+            "Content-Security-Policy": cspHeader(nonce)
           }
         });
       }