@docubook/flame 1.7.1 → 2.0.0-alpha.0

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/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.
+  function getAnchorOffset(): 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;
+  }
+
   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;
@@ -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-ICNXW4Z4.js";
-import "./chunk-B6LGUADD.js";
+} from "./chunk-2EYRWRDP.js";
+import "./chunk-QPF4DPZQ.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-PFXUCD2U.js";
+import "./chunk-AJV2GEDF.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.deno.ts

package/.docu/lib/{build.impl-TUVHCOIP.js → build.impl-WR24HDUT.js}

@@ -1,10 +1,10 @@
 import {
   runBuild,
   runBuildCli
-} from "./chunk-ICNXW4Z4.js";
-import "./chunk-B6LGUADD.js";
+} from "./chunk-2EYRWRDP.js";
+import "./chunk-QPF4DPZQ.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-PFXUCD2U.js";
+import "./chunk-AJV2GEDF.js";
 import "./chunk-4IQXHHPF.js";
 export {
   runBuild,

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

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-ICNXW4Z4.js";
-import "./chunk-B6LGUADD.js";
+} from "./chunk-2EYRWRDP.js";
+import "./chunk-QPF4DPZQ.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-PFXUCD2U.js";
+import "./chunk-AJV2GEDF.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.node.ts

package/.docu/lib/{chunk-ICNXW4Z4.js → chunk-2EYRWRDP.js}

@@ -7,13 +7,15 @@ import {
   buildClientBundle,
   captureException,
   compileMdx,
+  compileMdxModule,
   computeInlineThemeCss,
+  frontmatterField,
   generateSearchIndex,
   getGitLastModifiedBatch,
   htmlShell,
   initSentry,
   loadPlugins
-} from "./chunk-B6LGUADD.js";
+} from "./chunk-QPF4DPZQ.js";
 import {
   cspHeader,
   generateNonce,
@@ -21,7 +23,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-PFXUCD2U.js";
+} from "./chunk-AJV2GEDF.js";
 import {
   ASSETS_DIR,
   CACHE_FILE,
@@ -48,7 +50,7 @@ function buildSeoMeta(config, frontmatter, slug) {
     url,
     siteName: config.meta?.title || ""
   };
-  const image = typeof frontmatter.image === "string" && frontmatter.image || config.meta?.ogImage;
+  const image = frontmatterField(frontmatter, "image") || config.meta?.ogImage;
   if (image) {
     try {
       result.image = new URL(image, image.startsWith("/") ? baseURL : `${baseURL}/docs/`).href;
@@ -121,8 +123,8 @@ ${msg}`, { cause: err });
       content
     });
   }
-  const title = (typeof frontmatter.title === "string" ? frontmatter.title : "") || slug || "Docs";
-  const description = typeof frontmatter.description === "string" ? frontmatter.description : "";
+  const title = frontmatterField(frontmatter, "title") || slug || "Docs";
+  const description = frontmatterField(frontmatter, "description");
   const slugParts = slug ? slug.split("/") : [];
   const page = React.createElement(
     DocsLayout,
@@ -131,12 +133,15 @@ ${msg}`, { cause: err });
       slug: slugParts,
       title,
       description,
-      date: frontmatter.date || void 0,
-      content: result.content,
+      date: frontmatterField(frontmatter, "date") || void 0,
+      // Render MDX content as its own root: client hydrates the island as a
+      // separate root, so SSR must be root-relative too or useId-based ids
+      // (mdx-compiler components) mismatch during hydration.
+      content: renderToString(result.content),
       tocs: result.tocs,
       filePath,
       repoUrl: docuConfig.repo?.url,
-      compiledSource: result.compiledSource
+      mdxSlug: slug
     })
   );
   const body = renderToString(page);
@@ -146,7 +151,7 @@ ${msg}`, { cause: err });
   const depth = slug ? slug.split("/").length : 1;
   const favicon = docuConfig.meta?.favicon || "/docs/assets/images/favicon.ico";
   const seo = buildSeoMeta(docuConfig, frontmatter, slug || "");
-  const csp = cspHeader(nonce, true);
+  const csp = cspHeader(nonce);
   let html = htmlShell({
     title,
     description,
@@ -200,9 +205,55 @@ async function runBuild() {
   const cache = args.force ? {} : await readCache();
   let built = 0;
   let skipped = 0;
+  const pluginsConfig = docuConfig.plugins ?? [];
+  const builder = pluginsConfig.length > 0 ? new BuildPluginBuilder(docuConfig) : null;
+  if (builder) {
+    const plugins = await loadPlugins(pluginsConfig);
+    for (const plugin of plugins) {
+      await plugin.setup(builder);
+    }
+    await builder.runOnStart();
+  }
+  const mdxSources = {};
+  const prePassTasks = mdxFiles.map(async (file) => {
+    let raw;
+    try {
+      raw = await readFile(file.absPath, "utf-8");
+    } catch {
+      return;
+    }
+    let content = raw;
+    if (builder) {
+      const relPath = file.absPath.replace(PROJECT_ROOT + "/", "");
+      const transformed = await builder.runOnLoad(relPath, content);
+      if (transformed?.contents) content = transformed.contents;
+    }
+    const remarkPlugins = builder?.collectRemarkPlugins();
+    const rehypePlugins = builder?.collectRehypePlugins();
+    mdxSources[file.path] = await compileMdxModule(content, remarkPlugins, rehypePlugins);
+  });
+  await Promise.all(prePassTasks);
+  const indexMdxPath = join(DOCS_DIR, "index.mdx");
+  if (existsSync(indexMdxPath)) {
+    try {
+      const indexRaw = await readFile(indexMdxPath, "utf-8");
+      let indexContent = indexRaw;
+      if (builder) {
+        const relPath = indexMdxPath.replace(PROJECT_ROOT + "/", "");
+        const transformed = await builder.runOnLoad(relPath, indexContent);
+        if (transformed?.contents) indexContent = transformed.contents;
+      }
+      mdxSources[""] = await compileMdxModule(
+        indexContent,
+        builder?.collectRemarkPlugins(),
+        builder?.collectRehypePlugins()
+      );
+    } catch {
+    }
+  }
   logger.bundleStart();
   let t = performance.now();
-  assetManifest = await buildClientBundle();
+  assetManifest = await buildClientBundle(mdxSources);
   logger.bundleDone(Math.round(performance.now() - t));
   inlineThemeCss = computeInlineThemeCss();
   const lastManifest = cache["__assets__"];
@@ -214,15 +265,6 @@ async function runBuild() {
       builtAt: Date.now()
     };
   }
-  const pluginsConfig = docuConfig.plugins ?? [];
-  const builder = pluginsConfig.length > 0 ? new BuildPluginBuilder(docuConfig) : null;
-  if (builder) {
-    const plugins = await loadPlugins(pluginsConfig);
-    for (const plugin of plugins) {
-      await plugin.setup(builder);
-    }
-    await builder.runOnStart();
-  }
   logger.spinner.start("Building pages...");
   t = performance.now();
   const allRelPaths = mdxFiles.map((f) => f.absPath.replace(PROJECT_ROOT + "/", ""));
@@ -301,9 +343,9 @@ async function runBuild() {
     await Promise.all(buildTasks.slice(i, i + CONCURRENCY).map((fn) => fn()));
   }
   try {
-    const indexMdxPath = join(DOCS_DIR, "index.mdx");
-    const indexRaw = await readFile(indexMdxPath, "utf-8");
-    const indexRelPath = indexMdxPath.replace(PROJECT_ROOT + "/", "");
+    const indexMdxPath2 = join(DOCS_DIR, "index.mdx");
+    const indexRaw = await readFile(indexMdxPath2, "utf-8");
+    const indexRelPath = indexMdxPath2.replace(PROJECT_ROOT + "/", "");
     const indexHtml = await renderDocsPage(
       docuConfig,
       "",
@@ -332,8 +374,7 @@ async function runBuild() {
     body: renderToString(landingPage),
     favicon: landingFavicon,
     seo: landingSeo,
-    /** unsafe-eval required by mdx-remote hydration — see above. */
-    csp: cspHeader(landingNonce, true),
+    csp: cspHeader(landingNonce),
     css: assetManifest.css,
     js: assetManifest.js,
     nonce: landingNonce,
@@ -353,8 +394,7 @@ async function runBuild() {
     body: renderToString(notFoundPage),
     favicon: notFoundFavicon,
     headExtra: ['<meta name="robots" content="noindex,follow">'],
-    /** unsafe-eval required by mdx-remote hydration — see above. */
-    csp: cspHeader(notFoundNonce, true),
+    csp: cspHeader(notFoundNonce),
     css: assetManifest.css,
     js: assetManifest.js,
     nonce: notFoundNonce,

package/.docu/lib/{chunk-PFXUCD2U.js → chunk-AJV2GEDF.js}

@@ -5,7 +5,7 @@ import {
 // package.json
 var package_default = {
   name: "@docubook/flame",
-  version: "1.7.1",
+  version: "2.0.0-alpha.0",
   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-XMIEMHTQ.js → chunk-KEWRVASF.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-PFXUCD2U.js";
+} from "./chunk-AJV2GEDF.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)
           }
         });
       }