@docubook/flame 2.0.0-alpha.0 → 2.0.0-alpha.2

package/.docu/components/Menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import Sublink from "./Sublink";
+import Sublink, { GroupAccordionProvider } from "./Sublink";
 import SidebarGroupHeader from "./SidebarGroupHeader";
 import type { DocuRoute } from "../node/types";
 import { cn } from "../node/utils";
@@ -76,28 +76,32 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
     // No context routes defined — fall back to flat list of all routes
     if (contextRoutes.length === 0) {
       return (
-        <nav {...navProps}>
-          <ul className={sharedUlClasses}>
-            {menuRoutes.map((route) => renderBorderItem(route, "", route.href))}
-          </ul>
-        </nav>
+        <GroupAccordionProvider>
+          <nav {...navProps}>
+            <ul className={sharedUlClasses}>
+              {menuRoutes.map((route) => renderBorderItem(route, "", route.href))}
+            </ul>
+          </nav>
+        </GroupAccordionProvider>
       );
     }
 
     return (
-      <nav {...navProps}>
-        {contextRoutes.map((route, i) => (
-          <div key={route.href} className={i > 0 ? "mt-6 lg:mt-8" : ""}>
-            <SidebarGroupHeader
-              icon={route.context?.icon}
-              title={route.context?.title || route.title}
-            />
-            <ul className={sharedUlClasses}>
-              {route.items?.map((item) => renderBorderItem(item, route.href, item.href))}
-            </ul>
-          </div>
-        ))}
-      </nav>
+      <GroupAccordionProvider>
+        <nav {...navProps}>
+          {contextRoutes.map((route, i) => (
+            <div key={route.href} className={i > 0 ? "mt-6 lg:mt-8" : ""}>
+              <SidebarGroupHeader
+                icon={route.context?.icon}
+                title={route.context?.title || route.title}
+              />
+              <ul className={sharedUlClasses}>
+                {route.items?.map((item) => renderBorderItem(item, route.href, item.href))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      </GroupAccordionProvider>
     );
   }
 
@@ -119,18 +123,20 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
   if (!contextRoute) return null;
 
   return (
-    <nav {...navProps}>
-      <ul className="flex flex-col gap-0.5 py-4">
-        <li key={contextRoute.title}>
-          <Sublink
-            {...contextRoute}
-            href={contextRoute.href}
-            level={0}
-            onNavigate={onNavigate}
-            parentHref="/docs"
-          />
-        </li>
-      </ul>
-    </nav>
+    <GroupAccordionProvider>
+      <nav {...navProps}>
+        <ul className="flex flex-col gap-0.5 py-4">
+          <li key={contextRoute.title}>
+            <Sublink
+              {...contextRoute}
+              href={contextRoute.href}
+              level={0}
+              onNavigate={onNavigate}
+              parentHref="/docs"
+            />
+          </li>
+        </ul>
+      </nav>
+    </GroupAccordionProvider>
   );
 }

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/Sublink.tsx

@@ -1,12 +1,43 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
 import { ChevronDown } from "lucide-react";
 import Anchor from "./Anchor";
 import type { DocuRoute } from "../node/types";
 import { cn, docsHtmlHref } from "../node/utils";
 import { config as docuConfig } from "../node/client-routes";
 
+/** Exclusive accordion for level >= 2 sidebar groups — opening one group
+ * closes the previously open one. All level >= 2 groups default to closed
+ * and expand only when the header is clicked. `open` is used to auto-expand
+ * the group containing the active page. */
+export const GroupAccordionContext = createContext<{
+  openId: string | null;
+  open: (id: string) => void;
+  toggle: (id: string) => void;
+}>({ openId: null, open: () => {}, toggle: () => {} });
+
+export function GroupAccordionProvider({ children }: { children: ReactNode }) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  // Exclusive: expanding B closes A — only one group stays open at a time;
+  // clicking the open group again collapses it.
+  const open = useCallback((id: string) => setOpenId(id), []);
+  const toggle = useCallback((id: string) => setOpenId((prev) => (prev === id ? null : id)), []);
+  return (
+    <GroupAccordionContext.Provider value={{ openId, open, toggle }}>
+      {children}
+    </GroupAccordionContext.Provider>
+  );
+}
+
 interface SublinkProps extends DocuRoute {
   level: number;
   onNavigate?: () => void;
@@ -28,12 +59,39 @@ export default function Sublink({
   const currentPathname =
     pathnameProp || (typeof window !== "undefined" ? window.location.pathname : "/docs");
 
+  // Groups with children are exclusive accordions (default closed, expand on
+  // click). In separator mode every nav item renders at level 0 (sections are
+  // SidebarGroupHeader, not Sublinks), so depth can't tell them apart — the
+  // mode does. In dropdown mode the top section is level 0 (stays open) and
+  // everything deeper is an accordion.
+  const isSeparator = docuConfig.sidebar?.context === "separator";
+  const { openId, open, toggle } = useContext(GroupAccordionContext);
+  const isAccordionGroup = Boolean(items) && (isSeparator || level >= 1);
+  // Routes-tree level: separator mode renders every item at level 0 (sections
+  // are SidebarGroupHeader), dropdown starts the context section at level 0.
+  const treeLevel = level + (isSeparator ? 2 : 1);
+
   const [isOpen, setIsOpen] = useState(() => {
-    if (level === 0) return true;
-    if (!items) return false;
-    return currentPathname.startsWith(fullHref) && currentPathname !== fullHref;
+    if (isAccordionGroup) return false; // default closed — context controls it
+    if (level === 0) return true; // top-level section stays open
+    return false; // leaves
   });
 
+  const effectiveOpen = isAccordionGroup ? openId === fullHref : isOpen;
+  const handleToggle = () => {
+    if (isAccordionGroup) toggle(fullHref);
+    else setIsOpen((o) => !o);
+  };
+
+  // Auto-expand the accordion group that contains the active page — on mount
+  // and whenever the current path changes. `open` is stable (useCallback), so
+  // this only fires on real path changes; a manual collapse by the user is
+  // respected until the path changes again.
+  const isInsideActive = currentPathname.startsWith(fullHref) && currentPathname !== fullHref;
+  useEffect(() => {
+    if (isAccordionGroup && isInsideActive) open(fullHref);
+  }, [isAccordionGroup, isInsideActive, fullHref, open]);
+
   // Shared padding based on nesting level
   const levelPadding = cn(level === 1 && "pl-4", level === 2 && "pl-8", level >= 3 && "pl-12");
   const isActive = currentPathname === fullHref || currentPathname === `${fullHref}.html`;
@@ -113,12 +171,15 @@ export default function Sublink({
       {/* Section header */}
       <button
         type="button"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={handleToggle}
         className={cn(
           "flex w-full cursor-pointer items-center justify-between py-1 text-left text-sm transition-colors",
-          noLink
+          // Only the top-level section label (routes-tree level 1) is bold.
+          // Deeper groups (e.g. Search at level 2) are children that happen to
+          // have items — style them like links, no header weight.
+          noLink && treeLevel === 1
             ? "text-base-content font-semibold"
-            : "text-base-content/80 hover:text-base-content font-medium"
+            : "text-foreground hover:text-foreground/80"
         )}
       >
         {noLink ? (
@@ -137,13 +198,15 @@ export default function Sublink({
         <ChevronDown
           className={cn(
             "text-base-content/40 h-4 w-4 shrink-0 transition-transform duration-200",
-            isOpen && "rotate-180"
+            // Tree convention: closed = chevron pointing right (expandable),
+            // open = pointing down — a 90° turn instead of the 180° flip.
+            effectiveOpen ? "rotate-0" : "-rotate-90"
           )}
         />
       </button>
 
       {/* Children */}
-      {isOpen && (
+      {effectiveOpen && (
         <div className="flex flex-col py-1">
           {items.map((item) => (
             <Sublink

package/.docu/components/Toc.tsx

@@ -25,12 +25,12 @@ export default function Toc({ tocs }: TocProps) {
   // 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 {
+  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(() => {
     // Desktop-only TOC — on mobile this island is display:none but still
@@ -88,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;

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

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-2EYRWRDP.js";
-import "./chunk-QPF4DPZQ.js";
+} from "./chunk-3LRUTZZD.js";
+import "./chunk-42JQLAKP.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-AJV2GEDF.js";
+import "./chunk-IN2QAGDZ.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.deno.ts

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

@@ -1,10 +1,10 @@
 import {
   runBuild,
   runBuildCli
-} from "./chunk-2EYRWRDP.js";
-import "./chunk-QPF4DPZQ.js";
+} from "./chunk-3LRUTZZD.js";
+import "./chunk-42JQLAKP.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-AJV2GEDF.js";
+import "./chunk-IN2QAGDZ.js";
 import "./chunk-4IQXHHPF.js";
 export {
   runBuild,

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

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-2EYRWRDP.js";
-import "./chunk-QPF4DPZQ.js";
+} from "./chunk-3LRUTZZD.js";
+import "./chunk-42JQLAKP.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-AJV2GEDF.js";
+import "./chunk-IN2QAGDZ.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.node.ts

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

@@ -15,7 +15,7 @@ import {
   htmlShell,
   initSentry,
   loadPlugins
-} from "./chunk-QPF4DPZQ.js";
+} from "./chunk-42JQLAKP.js";
 import {
   cspHeader,
   generateNonce,
@@ -23,7 +23,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-AJV2GEDF.js";
+} from "./chunk-IN2QAGDZ.js";
 import {
   ASSETS_DIR,
   CACHE_FILE,
@@ -398,7 +398,10 @@ async function runBuild() {
     css: assetManifest.css,
     js: assetManifest.js,
     nonce: notFoundNonce,
-    themeCss: inlineThemeCss
+    themeCss: inlineThemeCss,
+    // Served as the static-host fallback at ANY requested path — relative
+    // depth can never be right there, so use root-absolute asset URLs.
+    absoluteAssets: true
   });
   await writeFile(join(DIST_DIR, "404.html"), notFoundHtml);
   logger.spinner.stop(

package/.docu/lib/{chunk-QPF4DPZQ.js → chunk-42JQLAKP.js}

@@ -1333,6 +1333,9 @@ function DocsBreadcrumb({ paths }) {
 }
 
 // .docu/node/route.ts
+import { readFileSync as readFileSync2 } from "node:fs";
+import { join as join4 } from "node:path";
+import { extractFrontmatter } from "@docubook/core";
 var docuConfig2 = loadDocuConfig();
 var routes = resolveRoutes(docuConfig2.routes);
 function flattenRoutes() {
@@ -1361,8 +1364,42 @@ function getRouteMap() {
   routes.forEach((route) => traverse(route));
   return map;
 }
+var descriptionCache = /* @__PURE__ */ new Map();
+function readDescription(href) {
+  const cached = descriptionCache.get(href);
+  if (cached !== void 0) return cached;
+  let description = "";
+  const rel = href.replace(/^\/|$/g, "");
+  for (const ext of [".mdx", ".md"]) {
+    for (const file of [join4(DOCS_DIR, `${rel}${ext}`), join4(DOCS_DIR, `${rel}/index${ext}`)]) {
+      try {
+        const fm = extractFrontmatter(readFileSync2(file, "utf-8"));
+        description = typeof fm.description === "string" ? fm.description : "";
+        if (description) break;
+      } catch {
+      }
+    }
+    if (description) break;
+  }
+  descriptionCache.set(href, description);
+  return description;
+}
 function getPreviousNext(pathname) {
   const normalizedPath = pathname.replace(/^\/|$/g, "");
+  if (normalizedPath === "docs" || normalizedPath === "") {
+    const paths2 = flattenRoutes();
+    const routeMap2 = getRouteMap();
+    const first = paths2[0];
+    if (!first) return { prev: null, next: null };
+    return {
+      prev: null,
+      next: {
+        href: first,
+        title: routeMap2.get(first) || "",
+        description: readDescription(first)
+      }
+    };
+  }
   const paths = flattenRoutes();
   const index = paths.findIndex((href) => href === `/${normalizedPath}` || href === normalizedPath);
   if (index === -1) {
@@ -1373,7 +1410,11 @@ function getPreviousNext(pathname) {
   const nextHref = index < paths.length - 1 ? paths[index + 1] : null;
   return {
     prev: prevHref ? { href: prevHref, title: routeMap.get(prevHref) || "" } : null,
-    next: nextHref ? { href: nextHref, title: routeMap.get(nextHref) || "" } : null
+    next: nextHref ? {
+      href: nextHref,
+      title: routeMap.get(nextHref) || "",
+      description: readDescription(nextHref)
+    } : null
   };
 }
 
@@ -1395,7 +1436,11 @@ function Pagination({
     PaginationDocs,
     {
       prev: prev ? { href: docsHtmlHref(`/docs${prev.href}`), title: prev.title } : void 0,
-      next: next ? { href: docsHtmlHref(`/docs${next.href}`), title: next.title } : void 0,
+      next: next ? {
+        href: docsHtmlHref(`/docs${next.href}`),
+        title: next.title,
+        description: next.description
+      } : void 0,
       className,
       prevIcon,
       nextIcon,
@@ -1671,12 +1716,12 @@ function Toc({ tocs }) {
   useEffect2(() => {
     activeIdRef.current = activeId;
   }, [activeId]);
-  function getAnchorOffset() {
+  const getAnchorOffset = useCallback2(() => {
     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]);
   useEffect2(() => {
     if (typeof window === "undefined" || window.innerWidth < 1024) return;
     if (!tocs.length) return;
@@ -1717,7 +1762,7 @@ function Toc({ tocs }) {
       scrollTarget.removeEventListener("scroll", listener);
       if (throttleTimer) clearTimeout(throttleTimer);
     };
-  }, [tocs]);
+  }, [tocs, getAnchorOffset]);
   const handleLinkClick = useCallback2((id) => {
     clickedIdRef.current = id;
     setActiveId(id);
@@ -2116,7 +2161,14 @@ import React2 from "react";
 import { useState as useState4 } from "react";
 
 // .docu/components/Sublink.tsx
-import { useState as useState3, useRef as useRef2, useEffect as useEffect3 } from "react";
+import {
+  createContext,
+  useContext,
+  useState as useState3,
+  useRef as useRef2,
+  useEffect as useEffect3,
+  useCallback as useCallback3
+} from "react";
 import { ChevronDown } from "lucide-react";
 
 // .docu/components/Anchor.tsx
@@ -2167,6 +2219,15 @@ var config = docuConfig5;
 
 // .docu/components/Sublink.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var GroupAccordionContext = createContext({ openId: null, open: () => {
+}, toggle: () => {
+} });
+function GroupAccordionProvider({ children }) {
+  const [openId, setOpenId] = useState3(null);
+  const open = useCallback3((id) => setOpenId(id), []);
+  const toggle = useCallback3((id) => setOpenId((prev) => prev === id ? null : id), []);
+  return /* @__PURE__ */ jsx16(GroupAccordionContext.Provider, { value: { openId, open, toggle }, children });
+}
 function Sublink({
   title,
   href,
@@ -2179,11 +2240,24 @@ function Sublink({
 }) {
   const fullHref = parentHref ? `${parentHref}${href}` : `/docs${href}`;
   const currentPathname = pathnameProp || (typeof window !== "undefined" ? window.location.pathname : "/docs");
+  const isSeparator = config.sidebar?.context === "separator";
+  const { openId, open, toggle } = useContext(GroupAccordionContext);
+  const isAccordionGroup = Boolean(items) && (isSeparator || level >= 1);
+  const treeLevel = level + (isSeparator ? 2 : 1);
   const [isOpen, setIsOpen] = useState3(() => {
+    if (isAccordionGroup) return false;
     if (level === 0) return true;
-    if (!items) return false;
-    return currentPathname.startsWith(fullHref) && currentPathname !== fullHref;
+    return false;
   });
+  const effectiveOpen = isAccordionGroup ? openId === fullHref : isOpen;
+  const handleToggle = () => {
+    if (isAccordionGroup) toggle(fullHref);
+    else setIsOpen((o) => !o);
+  };
+  const isInsideActive = currentPathname.startsWith(fullHref) && currentPathname !== fullHref;
+  useEffect3(() => {
+    if (isAccordionGroup && isInsideActive) open(fullHref);
+  }, [isAccordionGroup, isInsideActive, fullHref, open]);
   const levelPadding = cn(level === 1 && "pl-4", level === 2 && "pl-8", level >= 3 && "pl-12");
   const isActive = currentPathname === fullHref || currentPathname === `${fullHref}.html`;
   const activeRef = useRef2(null);
@@ -2242,10 +2316,13 @@ function Sublink({
       "button",
       {
         type: "button",
-        onClick: () => setIsOpen(!isOpen),
+        onClick: handleToggle,
         className: cn(
           "flex w-full cursor-pointer items-center justify-between py-1 text-left text-sm transition-colors",
-          noLink ? "text-base-content font-semibold" : "text-base-content/80 hover:text-base-content font-medium"
+          // Only the top-level section label (routes-tree level 1) is bold.
+          // Deeper groups (e.g. Search at level 2) are children that happen to
+          // have items — style them like links, no header weight.
+          noLink && treeLevel === 1 ? "text-base-content font-semibold" : "text-foreground hover:text-foreground/80"
         ),
         children: [
           noLink ? /* @__PURE__ */ jsx16("span", { children: title }) : /* @__PURE__ */ jsx16(
@@ -2264,14 +2341,16 @@ function Sublink({
             {
               className: cn(
                 "text-base-content/40 h-4 w-4 shrink-0 transition-transform duration-200",
-                isOpen && "rotate-180"
+                // Tree convention: closed = chevron pointing right (expandable),
+                // open = pointing down — a 90° turn instead of the 180° flip.
+                effectiveOpen ? "rotate-0" : "-rotate-90"
               )
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx16("div", { className: "flex flex-col py-1", children: items.map((item) => /* @__PURE__ */ jsx16(
+    effectiveOpen && /* @__PURE__ */ jsx16("div", { className: "flex flex-col py-1", children: items.map((item) => /* @__PURE__ */ jsx16(
       Sublink,
       {
         ...item,
@@ -2346,9 +2425,9 @@ function Menu({ onNavigate, className = "", pathname, routes: routes3 = [] }) {
   if (mode === "separator") {
     const contextRoutes = menuRoutes.filter((r) => r.context);
     if (contextRoutes.length === 0) {
-      return /* @__PURE__ */ jsx18("nav", { ...navProps, children: /* @__PURE__ */ jsx18("ul", { className: sharedUlClasses, children: menuRoutes.map((route) => renderBorderItem(route, "", route.href)) }) });
+      return /* @__PURE__ */ jsx18(GroupAccordionProvider, { children: /* @__PURE__ */ jsx18("nav", { ...navProps, children: /* @__PURE__ */ jsx18("ul", { className: sharedUlClasses, children: menuRoutes.map((route) => renderBorderItem(route, "", route.href)) }) }) });
     }
-    return /* @__PURE__ */ jsx18("nav", { ...navProps, children: contextRoutes.map((route, i) => /* @__PURE__ */ jsxs14("div", { className: i > 0 ? "mt-6 lg:mt-8" : "", children: [
+    return /* @__PURE__ */ jsx18(GroupAccordionProvider, { children: /* @__PURE__ */ jsx18("nav", { ...navProps, children: contextRoutes.map((route, i) => /* @__PURE__ */ jsxs14("div", { className: i > 0 ? "mt-6 lg:mt-8" : "", children: [
       /* @__PURE__ */ jsx18(
         SidebarGroupHeader,
         {
@@ -2357,13 +2436,13 @@ function Menu({ onNavigate, className = "", pathname, routes: routes3 = [] }) {
         }
       ),
       /* @__PURE__ */ jsx18("ul", { className: sharedUlClasses, children: route.items?.map((item) => renderBorderItem(item, route.href, item.href)) })
-    ] }, route.href)) });
+    ] }, route.href)) }) });
   }
   const isDocsRoot = currentPath === "/docs" || currentPath === "/docs/";
   const currentContext = isDocsRoot ? menuRoutes[0]?.href.replace(/^\/+|\/+$/, "") : getCurrentContext(currentPath);
   const contextRoute = isDocsRoot && menuRoutes[0] ? currentContext ? getContextRoute(currentContext, menuRoutes) : menuRoutes[0] : currentContext ? getContextRoute(currentContext, menuRoutes) : void 0;
   if (!contextRoute) return null;
-  return /* @__PURE__ */ jsx18("nav", { ...navProps, children: /* @__PURE__ */ jsx18("ul", { className: "flex flex-col gap-0.5 py-4", children: /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx18(GroupAccordionProvider, { children: /* @__PURE__ */ jsx18("nav", { ...navProps, children: /* @__PURE__ */ jsx18("ul", { className: "flex flex-col gap-0.5 py-4", children: /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
     Sublink,
     {
       ...contextRoute,
@@ -2372,7 +2451,7 @@ function Menu({ onNavigate, className = "", pathname, routes: routes3 = [] }) {
       onNavigate,
       parentHref: "/docs"
     }
-  ) }, contextRoute.title) }) });
+  ) }, contextRoute.title) }) }) });
 }
 
 // .docu/components/DocsLayout.tsx
@@ -2475,7 +2554,8 @@ function htmlShell(opts) {
     themeCss,
     depth = 0,
     headExtra,
-    bodyExtra
+    bodyExtra,
+    absoluteAssets = false
   } = opts;
   const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
   const themeStyle = themeCss ? `
@@ -2485,8 +2565,8 @@ function htmlShell(opts) {
   const bodyInjection = bodyExtra?.length ? `
   ${bodyExtra.join("\n  ")}` : "";
   const depthPrefix = depth === 0 ? "" : "../".repeat(depth);
-  const assetPrefix = depthPrefix + "assets/";
-  const resolvePath = (path) => path.startsWith("/") ? depthPrefix + path.slice(1) : path;
+  const assetPrefix = absoluteAssets ? "/assets/" : depthPrefix + "assets/";
+  const resolvePath = (path) => absoluteAssets ? path : path.startsWith("/") ? depthPrefix + path.slice(1) : path;
   let seoTags = "";
   if (opts.seo) {
     const s = opts.seo;

package/.docu/lib/{chunk-VPV7KP7K.js → chunk-HF3KKRQL.js}

@@ -15,7 +15,7 @@ import {
   htmlShell,
   initSentry,
   loadPlugins
-} from "./chunk-QPF4DPZQ.js";
+} from "./chunk-42JQLAKP.js";
 import {
   SECURITY_HEADERS,
   generateNonce,
@@ -28,7 +28,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-AJV2GEDF.js";
+} from "./chunk-IN2QAGDZ.js";
 import {
   DIST_DIR,
   DOCS_DIR,
@@ -60,7 +60,11 @@ 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);
 }

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

@@ -5,7 +5,7 @@ import {
 // package.json
 var package_default = {
   name: "@docubook/flame",
-  version: "2.0.0-alpha.0",
+  version: "2.0.0-alpha.2",
   description: "A blazing-fast React + MDX framework powered by Bun, built for modern documentation experiences.",
   type: "module",
   bin: {

package/.docu/lib/{chunk-KEWRVASF.js → chunk-PGIHPW5L.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-AJV2GEDF.js";
+} from "./chunk-IN2QAGDZ.js";
 import {
   DIST_DIR
 } from "./chunk-4IQXHHPF.js";

package/.docu/lib/{chunk-X7KPVCDN.js → chunk-PJVCY4FK.js}

@@ -137,7 +137,7 @@ async function runBuild() {
     process.env.FLAME_BUILD_SILENT = "1";
     process.env.LOG_LEVEL = "error";
   }
-  const { runBuildCli } = await import("./build.impl-WR24HDUT.js");
+  const { runBuildCli } = await import("./build.impl-AZBZN66Q.js");
   await runBuildCli();
 }
 async function writeDockerFiles() {

package/.docu/lib/clean.js

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-AJV2GEDF.js";
+} from "./chunk-IN2QAGDZ.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/clean.ts

package/.docu/lib/deploy.deno.js

@@ -1,6 +1,6 @@
 import {
   runDeploy
-} from "./chunk-X7KPVCDN.js";
+} from "./chunk-PJVCY4FK.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/deploy.deno.ts