@docubook/flame 1.5.2 → 1.5.3

package/.docu/components/Menu.tsx

@@ -36,13 +36,39 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
   if (!currentPath.startsWith("/docs")) return null;
 
   const mode = docuConfig.sidebar?.context || "dropdown";
+  const navProps = {
+    "aria-label": "Documentation navigation" as const,
+    className: cn("transition-all duration-200", className),
+  };
 
-  // Helper: check if a sublink under a given route matches the current path
-  const isItemActive = (itemHref: string, parentRouteHref: string) => {
-    const fullHref = `/docs${parentRouteHref}${itemHref}`;
-    return currentPath === fullHref || currentPath === `${fullHref}.html`;
+  // Shared nav item with border-left overlap wrapper
+  const renderBorderItem = (item: DocuRoute, parentRouteHref: string, key: string) => {
+    const fullHref = `/docs${parentRouteHref}${item.href}`;
+    const isActive = currentPath === fullHref || currentPath === `${fullHref}.html`;
+    return (
+      <li key={key}>
+        <div
+          className={cn(
+            "-ml-[14px] border-l-2",
+            isActive ? "border-primary" : "border-transparent"
+          )}
+        >
+          <div className="pl-3">
+            <Sublink
+              {...item}
+              href={item.href}
+              level={0}
+              onNavigate={onNavigate}
+              parentHref={`/docs${parentRouteHref}`}
+            />
+          </div>
+        </div>
+      </li>
+    );
   };
 
+  const sharedUlClasses = "border-base-300 flex flex-col gap-0.5 border-l-2 pb-0.5 pl-3 pt-0.5";
+
   // Separator mode: render all context sections as group headers + nav items
   if (mode === "separator") {
     const contextRoutes = menuRoutes.filter((r) => r.context);
@@ -50,62 +76,24 @@ 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
-          aria-label="Documentation navigation"
-          className={cn("transition-all duration-200", className)}
-        >
-          <ul className="flex flex-col gap-0.5 py-4">
-            {menuRoutes.map((route) => (
-              <li key={route.href}>
-                <Sublink
-                  {...route}
-                  href={route.href}
-                  level={0}
-                  onNavigate={onNavigate}
-                  parentHref="/docs"
-                />
-              </li>
-            ))}
+        <nav {...navProps}>
+          <ul className={sharedUlClasses}>
+            {menuRoutes.map((route) => renderBorderItem(route, "", route.href))}
           </ul>
         </nav>
       );
     }
 
     return (
-      <nav
-        aria-label="Documentation navigation"
-        className={cn("transition-all duration-200", className)}
-      >
+      <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="border-base-300 flex flex-col gap-0.5 border-l-2 pb-0.5 pl-3 pt-0.5">
-              {route.items?.map((item) => {
-                const isActive = isItemActive(item.href, route.href);
-                return (
-                  <li key={item.href}>
-                    <div
-                      className={cn(
-                        "-ml-[14px] border-l-2",
-                        isActive ? "border-primary" : "border-transparent"
-                      )}
-                    >
-                      <div className="pl-3">
-                        <Sublink
-                          {...item}
-                          href={item.href}
-                          level={0}
-                          onNavigate={onNavigate}
-                          parentHref={`/docs${route.href}`}
-                        />
-                      </div>
-                    </div>
-                  </li>
-                );
-              })}
+            <ul className={sharedUlClasses}>
+              {route.items?.map((item) => renderBorderItem(item, route.href, item.href))}
             </ul>
           </div>
         ))}
@@ -131,10 +119,7 @@ export default function Menu({ onNavigate, className = "", pathname, routes = []
   if (!contextRoute) return null;
 
   return (
-    <nav
-      aria-label="Documentation navigation"
-      className={cn("transition-all duration-200", className)}
-    >
+    <nav {...navProps}>
       <ul className="flex flex-col gap-0.5 py-4">
         <li key={contextRoute.title}>
           <Sublink

package/.docu/components/Navbar.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 import Anchor from "./Anchor";
 import { cn } from "../node/utils";
+import { config as docuConfig } from "../node/client-routes";
 import {
   Navbar as BaseNavbar,
   Logo as BaseLogo,
@@ -172,7 +173,7 @@ export function NavbarBrand({
 }
 
 export function GitHubLink({ repoUrl }: { repoUrl?: string }) {
-  if (!repoUrl) return null;
+  if (!docuConfig.repo?.edit || !repoUrl) return null;
 
   return (
     <a

package/.docu/components/Sublink.tsx

@@ -5,6 +5,7 @@ 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";
 
 interface SublinkProps extends DocuRoute {
   level: number;
@@ -34,7 +35,7 @@ export default function Sublink({
   });
 
   // Shared padding based on nesting level
-  const levelPadding = cn(level === 1 && "pl-2", level === 2 && "pl-4", level >= 3 && "pl-6");
+  const levelPadding = cn(level === 1 && "pl-4", level === 2 && "pl-8", level >= 3 && "pl-12");
   const isActive = currentPathname === fullHref || currentPathname === `${fullHref}.html`;
   const activeRef = useRef<HTMLDivElement>(null);
 
@@ -58,16 +59,49 @@ export default function Sublink({
       </Anchor>
     );
 
+    // Level 0: border handled by Menu.tsx wrapper
+    // Level 1+: border at natural indented position, follows levelPadding
+    if (level >= 1) {
+      // Separator mode: active border overlaps at ul's edge
+      // Each parent section adds its levelPadding to the offset
+      if (docuConfig.sidebar?.context === "separator") {
+        // Calculate accumulated offset from ul's edge to this item's natural position
+        // Base: ul border(2px) + pl-3(12px) = 14px
+        // Each parent section adds: level 1→16px, level 2→32px, level 3+→48px
+        const sectionOffsets: Record<number, number> = { 1: 16, 2: 32 };
+        let overlap = 14;
+        for (let l = 1; l < level; l++) {
+          overlap += sectionOffsets[l] ?? 48;
+        }
+
+        return (
+          <div
+            ref={activeRef}
+            className={cn("border-l-2", isActive ? "border-primary" : "border-transparent")}
+            style={{ marginLeft: `-${overlap}px` }}
+          >
+            <div className={cn("py-1 pl-3", levelPadding)}>{link}</div>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          ref={activeRef}
+          className={cn(
+            "py-1",
+            levelPadding,
+            "border-l-2",
+            isActive ? "border-primary" : "border-base-300"
+          )}
+        >
+          {link}
+        </div>
+      );
+    }
+
     return (
-      <div
-        ref={activeRef}
-        className={cn(
-          "py-1",
-          levelPadding,
-          level >= 2 && "border-l-2",
-          level >= 2 && (isActive ? "border-primary" : "border-base-300")
-        )}
-      >
+      <div ref={activeRef} className={cn("py-1", levelPadding)}>
         {link}
       </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 w-[85vw] max-w-[500px]! min-w-full! pt-2 sm:mx-auto sm:w-full">
+    <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">
       {children}
     </div>
   );

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

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-7J3N2MCP.js";
-import "./chunk-QGEFJH47.js";
+} from "./chunk-YENO4SVR.js";
+import "./chunk-YI76L7LB.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-GLOJMRT4.js";
+import "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/build.deno.ts

package/.docu/lib/{build.impl-FA57P3VC.js → build.impl-O3Z5XIGM.js}

@@ -1,10 +1,10 @@
 import {
   runBuild,
   runBuildCli
-} from "./chunk-7J3N2MCP.js";
-import "./chunk-QGEFJH47.js";
+} from "./chunk-YENO4SVR.js";
+import "./chunk-YI76L7LB.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-GLOJMRT4.js";
+import "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 export {
   runBuild,

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

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-7J3N2MCP.js";
-import "./chunk-QGEFJH47.js";
+} from "./chunk-YENO4SVR.js";
+import "./chunk-YI76L7LB.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-GLOJMRT4.js";
+import "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/build.node.ts

package/.docu/lib/{chunk-NXO2BF64.js → chunk-7VXEOH7X.js}

@@ -12,7 +12,7 @@ var WORKFLOW_FILE = join(WORKFLOW_DIR, "deploy.yml");
 async function runDeploy() {
   console.log("\u{1F4E6} Building for production...\n");
   process.env.NODE_ENV = "production";
-  const { runBuildCli } = await import("./build.impl-FA57P3VC.js");
+  const { runBuildCli } = await import("./build.impl-O3Z5XIGM.js");
   await runBuildCli();
   await writeFile(join(DIST_DIR, ".nojekyll"), "");
   if (!existsSync(WORKFLOW_FILE)) {

package/.docu/lib/{chunk-Q3AXTF2V.js → chunk-EIKBL7SD.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-GLOJMRT4.js";
+} from "./chunk-WCMRAAWH.js";
 import {
   DIST_DIR
 } from "./chunk-J5NMYSBJ.js";

package/.docu/lib/{chunk-TEXSBNMR.js → chunk-VX4HLVHE.js}

@@ -14,7 +14,7 @@ import {
   htmlShell,
   initSentry,
   loadPlugins
-} from "./chunk-QGEFJH47.js";
+} from "./chunk-YI76L7LB.js";
 import {
   SECURITY_HEADERS,
   generateNonce,
@@ -27,7 +27,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-GLOJMRT4.js";
+} from "./chunk-WCMRAAWH.js";
 import {
   DIST_DIR,
   DOCS_DIR,

package/.docu/lib/{chunk-GLOJMRT4.js → chunk-WCMRAAWH.js}

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

package/.docu/lib/{chunk-7J3N2MCP.js → chunk-YENO4SVR.js}

@@ -13,14 +13,14 @@ import {
   htmlShell,
   initSentry,
   loadPlugins
-} from "./chunk-QGEFJH47.js";
+} from "./chunk-YI76L7LB.js";
 import {
   generateNonce,
   scanMdxFiles
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-GLOJMRT4.js";
+} from "./chunk-WCMRAAWH.js";
 import {
   ASSETS_DIR,
   CACHE_FILE,

package/.docu/lib/{chunk-QGEFJH47.js → chunk-YI76L7LB.js}

@@ -1281,7 +1281,7 @@ function Pagination({
 // .docu/components/Typography.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Typography({ children }) {
-  return /* @__PURE__ */ jsx3("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 w-[85vw] max-w-[500px]! min-w-full! pt-2 sm:mx-auto sm:w-full", children });
+  return /* @__PURE__ */ jsx3("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", children });
 }
 
 // .docu/components/EditWith.tsx
@@ -1707,49 +1707,57 @@ function DocsPage({
             "data-repo": repoUrl || ""
           }
         ),
-        /* @__PURE__ */ jsxs6("div", { className: "w-full min-w-0 flex-[7] px-4 py-4 lg:px-8 lg:py-8", children: [
-          /* @__PURE__ */ jsx9(DocsBreadcrumb, { paths: slug }),
-          /* @__PURE__ */ jsxs6(Typography, { children: [
-            /* @__PURE__ */ jsx9("h1", { className: "-mt-0.5 text-3xl", children: title }),
-            description && /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground -mt-4 text-[16.5px]", children: description }),
-            /* @__PURE__ */ jsx9("div", { id: "mdx-content-island", children: content }),
-            compiledSource && /* @__PURE__ */ jsx9(
-              "script",
-              {
-                id: "mdx-compiled-source",
-                type: "application/json",
-                dangerouslySetInnerHTML: {
-                  __html: JSON.stringify(compiledSource).replace(/<\//g, "\\u003C/")
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs6("div", { className: "border-base-300 my-8 flex items-center border-b-2 border-dashed", children: [
-              /* @__PURE__ */ jsx9(EditWith, { className: "text-muted-foreground", filePath }),
-              date && /* @__PURE__ */ jsxs6("p", { className: "text-muted-foreground ml-auto text-[13px]", children: [
-                "Last updated ",
-                formatDate2(date)
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx9(
-              Pagination,
-              {
-                pathname,
-                prevIcon: /* @__PURE__ */ jsx9(ChevronLeft, { className: "h-3 w-3" }),
-                nextIcon: /* @__PURE__ */ jsx9(ChevronRight, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ jsx9(Footer, {})
-          ] })
-        ] }),
-        tocs.length > 0 && /* @__PURE__ */ jsx9(
-          "div",
-          {
-            id: "toc-island",
-            "data-tocs": tocsJson,
-            className: "sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[240px] flex-[3] self-start lg:flex lg:px-4 lg:py-6",
-            children: /* @__PURE__ */ jsx9(Toc, { tocs })
-          }
-        )
+        /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col lg:flex-row 2xl:mx-auto 2xl:max-w-[1300px]", children: [
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: `w-full min-w-0 ${tocs.length > 0 ? "flex-[7]" : "mx-auto max-w-[820px]"} px-4 py-6 lg:px-12 lg:py-10`,
+              children: [
+                /* @__PURE__ */ jsx9(DocsBreadcrumb, { paths: slug }),
+                /* @__PURE__ */ jsxs6(Typography, { children: [
+                  /* @__PURE__ */ jsx9("h1", { className: "-mt-0.5 text-3xl", children: title }),
+                  description && /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground -mt-4 text-[16.5px]", children: description }),
+                  /* @__PURE__ */ jsx9("div", { id: "mdx-content-island", children: content }),
+                  compiledSource && /* @__PURE__ */ jsx9(
+                    "script",
+                    {
+                      id: "mdx-compiled-source",
+                      type: "application/json",
+                      dangerouslySetInnerHTML: {
+                        __html: JSON.stringify(compiledSource).replace(/<\//g, "\\u003C/")
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs6("div", { className: "border-base-300 my-8 flex items-center border-b-2 border-dashed", children: [
+                    /* @__PURE__ */ jsx9(EditWith, { className: "text-muted-foreground", filePath }),
+                    date && /* @__PURE__ */ jsxs6("p", { className: "text-muted-foreground ml-auto text-[13px]", children: [
+                      "Last updated ",
+                      formatDate2(date)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx9(
+                    Pagination,
+                    {
+                      pathname,
+                      prevIcon: /* @__PURE__ */ jsx9(ChevronLeft, { className: "h-3 w-3" }),
+                      nextIcon: /* @__PURE__ */ jsx9(ChevronRight, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9(Footer, {})
+                ] })
+              ]
+            }
+          ),
+          tocs.length > 0 && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              id: "toc-island",
+              "data-tocs": tocsJson,
+              className: "sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[240px] flex-[3] self-start lg:flex lg:px-4 lg:py-6",
+              children: /* @__PURE__ */ jsx9(Toc, { tocs })
+            }
+          )
+        ] })
       ]
     }
   ) });
@@ -1996,6 +2004,16 @@ function Anchor({
   return /* @__PURE__ */ jsx15("a", { href, className: baseClasses, ...props, children });
 }
 
+// docu-config-runtime:../../docu.json
+import { readFileSync as readFileSync2 } from "node:fs";
+import { join as join4 } from "node:path";
+var config = JSON.parse(readFileSync2(join4(process.cwd(), "docu.json"), "utf-8"));
+var docu_default = config;
+
+// .docu/node/client-routes.ts
+var routes2 = docu_default.routes || [];
+var config2 = docu_default;
+
 // .docu/components/Sublink.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function Sublink({
@@ -2015,7 +2033,7 @@ function Sublink({
     if (!items) return false;
     return currentPathname.startsWith(fullHref) && currentPathname !== fullHref;
   });
-  const levelPadding = cn(level === 1 && "pl-2", level === 2 && "pl-4", level >= 3 && "pl-6");
+  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);
   useEffect3(() => {
@@ -2035,19 +2053,38 @@ function Sublink({
         children: title
       }
     );
-    return /* @__PURE__ */ jsx16(
-      "div",
-      {
-        ref: activeRef,
-        className: cn(
-          "py-1",
-          levelPadding,
-          level >= 2 && "border-l-2",
-          level >= 2 && (isActive ? "border-primary" : "border-base-300")
-        ),
-        children: link
+    if (level >= 1) {
+      if (config2.sidebar?.context === "separator") {
+        const sectionOffsets = { 1: 16, 2: 32 };
+        let overlap = 14;
+        for (let l = 1; l < level; l++) {
+          overlap += sectionOffsets[l] ?? 48;
+        }
+        return /* @__PURE__ */ jsx16(
+          "div",
+          {
+            ref: activeRef,
+            className: cn("border-l-2", isActive ? "border-primary" : "border-transparent"),
+            style: { marginLeft: `-${overlap}px` },
+            children: /* @__PURE__ */ jsx16("div", { className: cn("py-1 pl-3", levelPadding), children: link })
+          }
+        );
       }
-    );
+      return /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ref: activeRef,
+          className: cn(
+            "py-1",
+            levelPadding,
+            "border-l-2",
+            isActive ? "border-primary" : "border-base-300"
+          ),
+          children: link
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx16("div", { ref: activeRef, className: cn("py-1", levelPadding), children: link });
   }
   return /* @__PURE__ */ jsxs12("div", { ref: isActive ? activeRef : void 0, className: cn("flex flex-col", levelPadding), children: [
     /* @__PURE__ */ jsxs12(
@@ -2107,16 +2144,6 @@ function SidebarGroupHeader({ icon, title }) {
   ] });
 }
 
-// docu-config-runtime:../../docu.json
-import { readFileSync as readFileSync2 } from "node:fs";
-import { join as join4 } from "node:path";
-var config = JSON.parse(readFileSync2(join4(process.cwd(), "docu.json"), "utf-8"));
-var docu_default = config;
-
-// .docu/node/client-routes.ts
-var routes2 = docu_default.routes || [];
-var config2 = docu_default;
-
 // .docu/components/Menu.tsx
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function getCurrentContext(path) {
@@ -2137,91 +2164,64 @@ function Menu({ onNavigate, className = "", pathname, routes: routes3 = [] }) {
   );
   if (!currentPath.startsWith("/docs")) return null;
   const mode = config2.sidebar?.context || "dropdown";
-  const isItemActive = (itemHref, parentRouteHref) => {
-    const fullHref = `/docs${parentRouteHref}${itemHref}`;
-    return currentPath === fullHref || currentPath === `${fullHref}.html`;
+  const navProps = {
+    "aria-label": "Documentation navigation",
+    className: cn("transition-all duration-200", className)
+  };
+  const renderBorderItem = (item, parentRouteHref, key) => {
+    const fullHref = `/docs${parentRouteHref}${item.href}`;
+    const isActive = currentPath === fullHref || currentPath === `${fullHref}.html`;
+    return /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
+      "div",
+      {
+        className: cn(
+          "-ml-[14px] border-l-2",
+          isActive ? "border-primary" : "border-transparent"
+        ),
+        children: /* @__PURE__ */ jsx18("div", { className: "pl-3", children: /* @__PURE__ */ jsx18(
+          Sublink,
+          {
+            ...item,
+            href: item.href,
+            level: 0,
+            onNavigate,
+            parentHref: `/docs${parentRouteHref}`
+          }
+        ) })
+      }
+    ) }, key);
   };
+  const sharedUlClasses = "border-base-300 flex flex-col gap-0.5 border-l-2 pb-0.5 pl-3 pt-0.5";
   if (mode === "separator") {
     const contextRoutes = menuRoutes.filter((r) => r.context);
     if (contextRoutes.length === 0) {
-      return /* @__PURE__ */ jsx18(
-        "nav",
+      return /* @__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: [
+      /* @__PURE__ */ jsx18(
+        SidebarGroupHeader,
         {
-          "aria-label": "Documentation navigation",
-          className: cn("transition-all duration-200", className),
-          children: /* @__PURE__ */ jsx18("ul", { className: "flex flex-col gap-0.5 py-4", children: menuRoutes.map((route) => /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
-            Sublink,
-            {
-              ...route,
-              href: route.href,
-              level: 0,
-              onNavigate,
-              parentHref: "/docs"
-            }
-          ) }, route.href)) })
+          icon: route.context?.icon,
+          title: route.context?.title || route.title
         }
-      );
-    }
-    return /* @__PURE__ */ jsx18(
-      "nav",
-      {
-        "aria-label": "Documentation navigation",
-        className: cn("transition-all duration-200", className),
-        children: contextRoutes.map((route, i) => /* @__PURE__ */ jsxs14("div", { className: i > 0 ? "mt-6 lg:mt-8" : "", children: [
-          /* @__PURE__ */ jsx18(
-            SidebarGroupHeader,
-            {
-              icon: route.context?.icon,
-              title: route.context?.title || route.title
-            }
-          ),
-          /* @__PURE__ */ jsx18("ul", { className: "border-base-300 flex flex-col gap-0.5 border-l-2 pb-0.5 pl-3 pt-0.5", children: route.items?.map((item) => {
-            const isActive = isItemActive(item.href, route.href);
-            return /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
-              "div",
-              {
-                className: cn(
-                  "-ml-[14px] border-l-2",
-                  isActive ? "border-primary" : "border-transparent"
-                ),
-                children: /* @__PURE__ */ jsx18("div", { className: "pl-3", children: /* @__PURE__ */ jsx18(
-                  Sublink,
-                  {
-                    ...item,
-                    href: item.href,
-                    level: 0,
-                    onNavigate,
-                    parentHref: `/docs${route.href}`
-                  }
-                ) })
-              }
-            ) }, item.href);
-          }) })
-        ] }, route.href))
-      }
-    );
+      ),
+      /* @__PURE__ */ jsx18("ul", { className: sharedUlClasses, children: route.items?.map((item) => renderBorderItem(item, route.href, item.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",
+  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(
+    Sublink,
     {
-      "aria-label": "Documentation navigation",
-      className: cn("transition-all duration-200", className),
-      children: /* @__PURE__ */ jsx18("ul", { className: "flex flex-col gap-0.5 py-4", children: /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(
-        Sublink,
-        {
-          ...contextRoute,
-          href: contextRoute.href,
-          level: 0,
-          onNavigate,
-          parentHref: "/docs"
-        }
-      ) }, contextRoute.title) })
+      ...contextRoute,
+      href: contextRoute.href,
+      level: 0,
+      onNavigate,
+      parentHref: "/docs"
     }
-  );
+  ) }, contextRoute.title) }) });
 }
 
 // .docu/components/DocsLayout.tsx

package/.docu/lib/clean.js

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-GLOJMRT4.js";
+} from "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/clean.ts

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

@@ -1,6 +1,6 @@
 import {
   runDeploy
-} from "./chunk-NXO2BF64.js";
+} from "./chunk-7VXEOH7X.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/deploy.deno.ts

package/.docu/lib/deploy.node.js

@@ -1,6 +1,6 @@
 import {
   runDeploy
-} from "./chunk-NXO2BF64.js";
+} from "./chunk-7VXEOH7X.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/deploy.node.ts

package/.docu/lib/preview.deno.js

@@ -1,8 +1,8 @@
 import {
   runPreview
-} from "./chunk-Q3AXTF2V.js";
+} from "./chunk-EIKBL7SD.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-GLOJMRT4.js";
+import "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/preview.deno.ts

package/.docu/lib/preview.node.js

@@ -1,8 +1,8 @@
 import {
   runPreview
-} from "./chunk-Q3AXTF2V.js";
+} from "./chunk-EIKBL7SD.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-GLOJMRT4.js";
+import "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/preview.node.ts

package/.docu/lib/server.deno.js

@@ -1,9 +1,9 @@
 import {
   runServer
-} from "./chunk-TEXSBNMR.js";
-import "./chunk-QGEFJH47.js";
+} from "./chunk-VX4HLVHE.js";
+import "./chunk-YI76L7LB.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-GLOJMRT4.js";
+import "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/server.deno.ts

package/.docu/lib/server.node.js

@@ -1,9 +1,9 @@
 import {
   runServer
-} from "./chunk-TEXSBNMR.js";
-import "./chunk-QGEFJH47.js";
+} from "./chunk-VX4HLVHE.js";
+import "./chunk-YI76L7LB.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-GLOJMRT4.js";
+import "./chunk-WCMRAAWH.js";
 import "./chunk-J5NMYSBJ.js";
 
 // .docu/node/server.node.ts

package/.docu/pages/docs/[[...slug]].tsx

@@ -50,50 +50,54 @@ export default function DocsPage({
           data-repo={repoUrl || ""}
         />
 
-        <div className="w-full min-w-0 flex-[7] px-4 py-4 lg:px-8 lg:py-8">
-          <DocsBreadcrumb paths={slug} />
-          <Typography>
-            <h1 className="-mt-0.5 text-3xl">{title}</h1>
-            {description && (
-              <p className="text-muted-foreground -mt-4 text-[16.5px]">{description}</p>
-            )}
-            <div id="mdx-content-island">{content}</div>
-            {compiledSource && (
-              <script
-                id="mdx-compiled-source"
-                type="application/json"
-                dangerouslySetInnerHTML={{
-                  __html: JSON.stringify(compiledSource).replace(/<\//g, "\\u003C/"),
-                }}
-              />
-            )}
-            <div className="border-base-300 my-8 flex items-center border-b-2 border-dashed">
-              <EditWith className="text-muted-foreground" filePath={filePath} />
-              {date && (
-                <p className="text-muted-foreground ml-auto text-[13px]">
-                  Last updated {formatDate2(date)}
-                </p>
-              )}
-            </div>
-            <Pagination
-              pathname={pathname}
-              prevIcon={<ChevronLeft className="h-3 w-3" />}
-              nextIcon={<ChevronRight className="h-3 w-3" />}
-            />
-            <Footer />
-          </Typography>
-        </div>
-
-        {/* Desktop TOC - SSR rendered */}
-        {tocs.length > 0 && (
+        <div className="flex w-full flex-col lg:flex-row 2xl:mx-auto 2xl:max-w-[1300px]">
           <div
-            id="toc-island"
-            data-tocs={tocsJson}
-            className="sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[240px] flex-[3] self-start lg:flex lg:px-4 lg:py-6"
+            className={`w-full min-w-0 ${tocs.length > 0 ? "flex-[7]" : "mx-auto max-w-[820px]"} px-4 py-6 lg:px-12 lg:py-10`}
           >
-            <Toc tocs={tocs} />
+            <DocsBreadcrumb paths={slug} />
+            <Typography>
+              <h1 className="-mt-0.5 text-3xl">{title}</h1>
+              {description && (
+                <p className="text-muted-foreground -mt-4 text-[16.5px]">{description}</p>
+              )}
+              <div id="mdx-content-island">{content}</div>
+              {compiledSource && (
+                <script
+                  id="mdx-compiled-source"
+                  type="application/json"
+                  dangerouslySetInnerHTML={{
+                    __html: JSON.stringify(compiledSource).replace(/<\//g, "\\u003C/"),
+                  }}
+                />
+              )}
+              <div className="border-base-300 my-8 flex items-center border-b-2 border-dashed">
+                <EditWith className="text-muted-foreground" filePath={filePath} />
+                {date && (
+                  <p className="text-muted-foreground ml-auto text-[13px]">
+                    Last updated {formatDate2(date)}
+                  </p>
+                )}
+              </div>
+              <Pagination
+                pathname={pathname}
+                prevIcon={<ChevronLeft className="h-3 w-3" />}
+                nextIcon={<ChevronRight className="h-3 w-3" />}
+              />
+              <Footer />
+            </Typography>
           </div>
-        )}
+
+          {/* Desktop TOC - SSR rendered */}
+          {tocs.length > 0 && (
+            <div
+              id="toc-island"
+              data-tocs={tocsJson}
+              className="sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[240px] flex-[3] self-start lg:flex lg:px-4 lg:py-6"
+            >
+              <Toc tocs={tocs} />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/flame",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "A blazing-fast React + MDX framework powered by Bun, built for modern documentation experiences.",
   "type": "module",
   "bin": {
@@ -54,11 +54,11 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "unified": "^11.0.0",
-    "@docubook/core": "^1.8.2",
     "@docubook/mdx-content": "^3.4.3",
-    "@docubook/themes-colors": "^1.0.1",
-    "@docubook/runt": "^1.0.0",
-    "@docubook/ui-react": "^1.0.0"
+    "@docubook/core": "^1.8.2",
+    "@docubook/themes-colors": "^1.0.2",
+    "@docubook/ui-react": "^1.0.0",
+    "@docubook/runt": "^1.0.0"
   },
   "peerDependencies": {
     "@sentry/bun": "^10.0.0"

package/template/README.md

@@ -0,0 +1,92 @@
+<h1 align="center" style="font-size: 32px;">
+  DocuBook Flame 🔥
+</h1>
+<h3 align="center" style="font-size: 20px;">
+  Fast as flame — a Bun-native framework for modern documentation experiences.
+</h3>
+
+<p align="center">
+  <strong>@docubook/flame</strong> is a lightweight runtime for building documentation websites using React, MDX, and filesystem-based routing — running on Bun, Node.js, and Deno.
+</p>
+
+---
+
+> **Lightweight** — 📦 ~132 kB packed. No bloat, just fire.
+
+---
+## Quick Start
+
+**Bun**
+```bash
+mkdir my-docs && cd my-docs
+bun add @docubook/flame
+bunx flame init
+bun run dev
+```
+
+**Node.js**
+```bash
+mkdir my-docs && cd my-docs
+npm install @docubook/flame
+npx flame init
+npm run dev
+```
+
+**Deno**
+```bash
+mkdir my-docs && cd my-docs
+deno run -A npm:@docubook/flame init
+deno task dev
+```
+
+---
+
+## Documentation
+
+For the full documentation, please visit **[packages/flame/docs](https://github.com/DocuBook/docubook/tree/main/packages/flame/docs)** or read the individual pages below:
+
+### Getting Started
+
+| Page                                                                                                                  | Description                                  |
+| --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| [Welcome](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/index.mdx)                               | Overview and welcome to `@docubook/flame`.   |
+| [Introduction](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/introduction.mdx)   | Overview of the framework.                   |
+| [Installation](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/installation.mdx)   | Install and scaffold your first site.        |
+| [Quick Start Guide](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/quick-start-guide.mdx) | Get up and running in minutes.        |
+| [Format text](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/format-text.mdx)     | Markdown and inline styling in MDX.          |
+| [Frontmatter](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/frontmatter.mdx)     | Page metadata via frontmatter.               |
+| [Themes](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/themes.mdx)               | Color system, presets, and custom hex.       |
+| [Plugins](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/plugins.mdx)             | Extend the build and dev pipeline.           |
+| [Deployment](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/deployment.mdx)       | Deploy to static hosting with clean URLs.    |
+| [Search — Built-in](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/search/built-in.mdx) | Build-time full-text search.           |
+| [Search — Algolia](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/getting-started/search/algolia.mdx) | Algolia DocSearch integration.         |
+
+### Components
+
+| Page                                                                                              | Description                              |
+| ------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| [Accordion](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/accordion.mdx)               | Collapsible content sections.        |
+| [Accordion Group](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/accordion-group.mdx)   | Group multiple accordions.           |
+| [Button](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/button.mdx)                     | Action and navigation buttons.       |
+| [Card](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/card.mdx)                         | Compact content cards.               |
+| [Card Group](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/card-group.mdx)             | Display multiple cards together.     |
+| [Code Block](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/code-block.mdx)             | Code snippets with line highlighting. |
+| [Custom Components](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/custom.mdx)          | Register your own MDX components.    |
+| [File Tree](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/file-tree.mdx)               | Hierarchical file structures.        |
+| [Image](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/image.mdx)                       | Display images in Markdown.          |
+| [Keyboard](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/keyboard.mdx)                 | Keyboard keys with platform styling. |
+| [Link](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/link.mdx)                         | Navigation links.                    |
+| [Mermaid](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/mermaid.mdx)                   | Mermaid.js diagrams in MDX.          |
+| [Note](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/note.mdx)                         | Notes, warnings, and success messages. |
+| [Release Note](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/release-note.mdx)         | Per-version update notes.            |
+| [Stepper](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/stepper.mdx)                   | Step-by-step instructions.           |
+| [Tables](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/tables.mdx)                     | GitHub-flavored tables.              |
+| [Tabs](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/tabs.mdx)                         | Switchable content sections.         |
+| [Tooltips](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/tooltips.mdx)                 | Hover info tooltips.                 |
+| [Youtube](https://github.com/DocuBook/docubook/blob/main/packages/flame/docs/components/youtube.mdx)                   | Embed YouTube videos.                |
+
+---
+
+## License
+
+MIT