@docubook/flame 2.0.0-beta.0 → 2.0.0-beta.1

package/.docu/components/ScrollTo.tsx

@@ -8,9 +8,10 @@ interface ScrollToProps {
   className?: string;
   showIcon?: boolean;
   offset?: number;
+  onScrollToTop?: () => void;
 }
 
-export function ScrollTo({ className, showIcon = true }: ScrollToProps) {
+export function ScrollTo({ className, showIcon = true, onScrollToTop }: ScrollToProps) {
   const [isVisible, setIsVisible] = useState(false);
 
   const checkScroll = useCallback(() => {
@@ -41,15 +42,20 @@ export function ScrollTo({ className, showIcon = true }: ScrollToProps) {
     };
   }, [checkScroll]);
 
-  const scrollToTop = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    const container = document.getElementById("scroll-container");
-    if (container) {
-      container.scrollTo({ top: 0, behavior: "smooth" });
-    } else {
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    }
-  }, []);
+  const scrollToTop = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      onScrollToTop?.();
+      history.replaceState(null, "", "#top");
+      const container = document.getElementById("scroll-container");
+      if (container) {
+        container.scrollTo({ top: 0, behavior: "smooth" });
+      } else {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    },
+    [onScrollToTop]
+  );
 
   return (
     <div
@@ -61,7 +67,7 @@ export function ScrollTo({ className, showIcon = true }: ScrollToProps) {
       )}
     >
       <a
-        href="#"
+        href="#top"
         onClick={scrollToTop}
         className={cn(
           "inline-flex items-center text-sm",

package/.docu/components/Toc.tsx

@@ -62,9 +62,9 @@ export default function Toc({ tocs }: TocProps) {
         }
       }
 
-      if (currentId && currentId !== activeIdRef.current) {
+      if (currentId !== activeIdRef.current) {
         setActiveId(currentId);
-        history.replaceState(null, "", `#${currentId}`);
+        history.replaceState(null, "", currentId ? `#${currentId}` : "#top");
       }
     };
 
@@ -100,22 +100,43 @@ export default function Toc({ tocs }: TocProps) {
     }, 1000);
   }, []);
 
+  const handleScrollToTop = useCallback(() => {
+    clickedIdRef.current = "__top__";
+    setActiveId(null);
+    history.replaceState(null, "", "#top");
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    clickTimerRef.current = setTimeout(() => {
+      clickedIdRef.current = null;
+    }, 1000);
+  }, []);
+
   useEffect(() => {
     return () => {
       if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
     };
   }, []);
 
+  const activeItemRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (activeId && activeItemRef.current && !clickedIdRef.current) {
+      activeItemRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth",
+      });
+    }
+  }, [activeId]);
+
   if (!tocs.length) return null;
 
   return (
-    <div className="flex w-full flex-col gap-2">
-      <div className="flex items-center gap-2">
+    <div className="flex h-full min-h-0 w-full flex-col gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         <ListIcon className="h-4 w-4" />
         <h3 className="text-sm font-medium">On this page</h3>
       </div>
 
-      <div className="relative">
+      <div className="relative min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1">
         <div className="relative text-sm">
           <div className="bg-base-300 absolute top-0 left-0 h-full w-px" />
 
@@ -128,6 +149,7 @@ export default function Toc({ tocs }: TocProps) {
               return (
                 <div
                   key={href}
+                  ref={isActive ? activeItemRef : undefined}
                   className={cn(
                     "relative flex items-center transition-all duration-200",
                     isActive && "bg-primary/5"
@@ -206,9 +228,12 @@ export default function Toc({ tocs }: TocProps) {
             })}
           </div>
         </div>
-      </div>
 
-      <ScrollTo className="mt-2" />
+        <div className="mt-2 grid grid-cols-[28px_minmax(0,1fr)] items-start px-4 text-sm">
+          <div aria-hidden="true" />
+          <ScrollTo className="mt-0" onScrollToTop={handleScrollToTop} />
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-C3RCUTUE.js";
-import "./chunk-LXJLSXQI.js";
+} from "./chunk-FERG25YW.js";
+import "./chunk-URBATJEC.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-IVM5UM44.js";
+import "./chunk-6EOUQCRM.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.deno.ts

package/.docu/lib/{build.impl-S4DS5XPH.js → build.impl-3ZOQORN3.js}

@@ -1,10 +1,10 @@
 import {
   runBuild,
   runBuildCli
-} from "./chunk-C3RCUTUE.js";
-import "./chunk-LXJLSXQI.js";
+} from "./chunk-FERG25YW.js";
+import "./chunk-URBATJEC.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-IVM5UM44.js";
+import "./chunk-6EOUQCRM.js";
 import "./chunk-4IQXHHPF.js";
 export {
   runBuild,

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

@@ -1,9 +1,9 @@
 import {
   runBuildCli
-} from "./chunk-C3RCUTUE.js";
-import "./chunk-LXJLSXQI.js";
+} from "./chunk-FERG25YW.js";
+import "./chunk-URBATJEC.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-IVM5UM44.js";
+import "./chunk-6EOUQCRM.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/build.node.ts

package/.docu/lib/{chunk-IVM5UM44.js → chunk-6EOUQCRM.js}

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

package/.docu/lib/{chunk-D3QTSBR4.js → chunk-6HFBJUMG.js}

@@ -15,7 +15,7 @@ import {
   htmlShell,
   initSentry,
   loadPlugins
-} from "./chunk-LXJLSXQI.js";
+} from "./chunk-URBATJEC.js";
 import {
   SECURITY_HEADERS,
   generateNonce,
@@ -28,7 +28,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-IVM5UM44.js";
+} from "./chunk-6EOUQCRM.js";
 import {
   DIST_DIR,
   DOCS_DIR,

package/.docu/lib/{chunk-C3RCUTUE.js → chunk-FERG25YW.js}

@@ -19,7 +19,7 @@ import {
   initSentry,
   loadPlugins,
   registerPageContent
-} from "./chunk-LXJLSXQI.js";
+} from "./chunk-URBATJEC.js";
 import {
   cspHeader,
   generateNonce,
@@ -27,7 +27,7 @@ import {
 } from "./chunk-EOK6KATZ.js";
 import {
   logger
-} from "./chunk-IVM5UM44.js";
+} from "./chunk-6EOUQCRM.js";
 import {
   ASSETS_DIR,
   CACHE_FILE,

package/.docu/lib/{chunk-JMQI3FKV.js → chunk-MQRFIDS4.js}

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

package/.docu/lib/{chunk-O326MYJE.js → chunk-U7M5SK76.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-S4DS5XPH.js");
+  const { runBuildCli } = await import("./build.impl-3ZOQORN3.js");
   await runBuildCli();
 }
 async function writeDockerFiles() {

package/.docu/lib/{chunk-LXJLSXQI.js → chunk-URBATJEC.js}

@@ -1665,7 +1665,7 @@ import { ListIcon } from "lucide-react";
 import { ArrowUpIcon } from "lucide-react";
 import { useEffect, useState, useCallback } from "react";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function ScrollTo({ className, showIcon = true }) {
+function ScrollTo({ className, showIcon = true, onScrollToTop }) {
   const [isVisible, setIsVisible] = useState(false);
   const checkScroll = useCallback(() => {
     const container = document.getElementById("scroll-container");
@@ -1690,15 +1690,20 @@ function ScrollTo({ className, showIcon = true }) {
       if (timeoutId) clearTimeout(timeoutId);
     };
   }, [checkScroll]);
-  const scrollToTop = useCallback((e) => {
-    e.preventDefault();
-    const container = document.getElementById("scroll-container");
-    if (container) {
-      container.scrollTo({ top: 0, behavior: "smooth" });
-    } else {
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    }
-  }, []);
+  const scrollToTop = useCallback(
+    (e) => {
+      e.preventDefault();
+      onScrollToTop?.();
+      history.replaceState(null, "", "#top");
+      const container = document.getElementById("scroll-container");
+      if (container) {
+        container.scrollTo({ top: 0, behavior: "smooth" });
+      } else {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    },
+    [onScrollToTop]
+  );
   return /* @__PURE__ */ jsx7(
     "div",
     {
@@ -1711,7 +1716,7 @@ function ScrollTo({ className, showIcon = true }) {
       children: /* @__PURE__ */ jsxs4(
         "a",
         {
-          href: "#",
+          href: "#top",
           onClick: scrollToTop,
           className: cn(
             "inline-flex items-center text-sm",
@@ -1766,9 +1771,9 @@ function Toc({ tocs }) {
           break;
         }
       }
-      if (currentId && currentId !== activeIdRef.current) {
+      if (currentId !== activeIdRef.current) {
         setActiveId(currentId);
-        history.replaceState(null, "", `#${currentId}`);
+        history.replaceState(null, "", currentId ? `#${currentId}` : "#top");
       }
     };
     handleScroll();
@@ -1795,100 +1800,124 @@ function Toc({ tocs }) {
       clickedIdRef.current = null;
     }, 1e3);
   }, []);
+  const handleScrollToTop = useCallback2(() => {
+    clickedIdRef.current = "__top__";
+    setActiveId(null);
+    history.replaceState(null, "", "#top");
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
+    clickTimerRef.current = setTimeout(() => {
+      clickedIdRef.current = null;
+    }, 1e3);
+  }, []);
   useEffect2(() => {
     return () => {
       if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
     };
   }, []);
+  const activeItemRef = useRef(null);
+  useEffect2(() => {
+    if (activeId && activeItemRef.current && !clickedIdRef.current) {
+      activeItemRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [activeId]);
   if (!tocs.length) return null;
-  return /* @__PURE__ */ jsxs5("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "flex h-full min-h-0 w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2", children: [
       /* @__PURE__ */ jsx8(ListIcon, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx8("h3", { className: "text-sm font-medium", children: "On this page" })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "relative", children: /* @__PURE__ */ jsxs5("div", { className: "relative text-sm", children: [
-      /* @__PURE__ */ jsx8("div", { className: "bg-base-300 absolute top-0 left-0 h-full w-px" }),
-      /* @__PURE__ */ jsx8("div", { className: "flex flex-col", children: tocs.map(({ href, level, text }) => {
-        const id = href.slice(1);
-        const isActive = activeId === id;
-        const levelPadding = (level - 2) * 16;
-        return /* @__PURE__ */ jsxs5(
-          "div",
-          {
-            className: cn(
-              "relative flex items-center transition-all duration-200",
-              isActive && "bg-primary/5"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs5(
-                "div",
-                {
-                  className: cn(
-                    "flex shrink-0 items-center px-1 py-2 transition-all duration-200",
-                    isActive && "border-primary -ml-px border-l-[3px]"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx8(
-                      "div",
-                      {
-                        className: cn(
-                          "h-px transition-colors duration-200",
-                          isActive ? "bg-primary w-3" : "bg-base-300 w-2"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx8(
-                      "div",
-                      {
-                        className: cn(
-                          "h-1.5 w-1.5 shrink-0 rounded-full transition-colors duration-300",
-                          isActive ? "bg-primary" : "bg-base-300"
-                        )
-                      }
-                    )
-                  ]
-                }
+    /* @__PURE__ */ jsxs5("div", { className: "relative min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "relative text-sm", children: [
+        /* @__PURE__ */ jsx8("div", { className: "bg-base-300 absolute top-0 left-0 h-full w-px" }),
+        /* @__PURE__ */ jsx8("div", { className: "flex flex-col", children: tocs.map(({ href, level, text }) => {
+          const id = href.slice(1);
+          const isActive = activeId === id;
+          const levelPadding = (level - 2) * 16;
+          return /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              ref: isActive ? activeItemRef : void 0,
+              className: cn(
+                "relative flex items-center transition-all duration-200",
+                isActive && "bg-primary/5"
               ),
-              /* @__PURE__ */ jsx8(
-                "a",
-                {
-                  href,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    handleLinkClick(id);
-                    const el = document.getElementById(id);
-                    if (el) {
-                      const offset = getAnchorOffset();
-                      const scroller = window.innerWidth >= 1024 ? document.getElementById("scroll-container") : null;
-                      const elTop = el.getBoundingClientRect().top;
-                      if (scroller) {
-                        scroller.scrollTo({
-                          top: elTop - scroller.getBoundingClientRect().top + scroller.scrollTop - offset,
-                          behavior: "smooth"
-                        });
-                      } else {
-                        window.scrollTo({
-                          top: elTop + window.scrollY - offset,
-                          behavior: "smooth"
-                        });
+              children: [
+                /* @__PURE__ */ jsxs5(
+                  "div",
+                  {
+                    className: cn(
+                      "flex shrink-0 items-center px-1 py-2 transition-all duration-200",
+                      isActive && "border-primary -ml-px border-l-[3px]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx8(
+                        "div",
+                        {
+                          className: cn(
+                            "h-px transition-colors duration-200",
+                            isActive ? "bg-primary w-3" : "bg-base-300 w-2"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx8(
+                        "div",
+                        {
+                          className: cn(
+                            "h-1.5 w-1.5 shrink-0 rounded-full transition-colors duration-300",
+                            isActive ? "bg-primary" : "bg-base-300"
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "a",
+                  {
+                    href,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      handleLinkClick(id);
+                      const el = document.getElementById(id);
+                      if (el) {
+                        const offset = getAnchorOffset();
+                        const scroller = window.innerWidth >= 1024 ? document.getElementById("scroll-container") : null;
+                        const elTop = el.getBoundingClientRect().top;
+                        if (scroller) {
+                          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",
-                    isActive ? "text-primary font-medium" : "text-base-content/60 hover:text-base-content"
-                  ),
-                  style: { paddingLeft: `${levelPadding + 6}px` },
-                  children: /* @__PURE__ */ jsx8("span", { className: "line-clamp-2 text-sm break-words", children: text })
-                }
-              )
-            ]
-          },
-          href
-        );
-      }) })
-    ] }) }),
-    /* @__PURE__ */ jsx8(ScrollTo, { className: "mt-2" })
+                    },
+                    className: cn(
+                      "flex flex-1 items-center py-2 transition-all duration-200",
+                      isActive ? "text-primary font-medium" : "text-base-content/60 hover:text-base-content"
+                    ),
+                    style: { paddingLeft: `${levelPadding + 6}px` },
+                    children: /* @__PURE__ */ jsx8("span", { className: "line-clamp-2 text-sm break-words", children: text })
+                  }
+                )
+              ]
+            },
+            href
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "mt-2 grid grid-cols-[28px_minmax(0,1fr)] items-start px-4 text-sm", children: [
+        /* @__PURE__ */ jsx8("div", { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx8(ScrollTo, { className: "mt-0", onScrollToTop: handleScrollToTop })
+      ] })
+    ] })
   ] });
 }
 

package/.docu/lib/clean.js

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

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

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

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

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

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

@@ -1,11 +1,11 @@
 import {
   runPreview
-} from "./chunk-JMQI3FKV.js";
+} from "./chunk-MQRFIDS4.js";
 import {
   denoAdapter
 } from "./chunk-UISOJ4RW.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-IVM5UM44.js";
+import "./chunk-6EOUQCRM.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/preview.deno.ts

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

@@ -1,11 +1,11 @@
 import {
   runPreview
-} from "./chunk-JMQI3FKV.js";
+} from "./chunk-MQRFIDS4.js";
 import {
   nodeAdapter
 } from "./chunk-UISOJ4RW.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-IVM5UM44.js";
+import "./chunk-6EOUQCRM.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/preview.node.ts

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

@@ -1,12 +1,12 @@
 import {
   runServer
-} from "./chunk-D3QTSBR4.js";
-import "./chunk-LXJLSXQI.js";
+} from "./chunk-6HFBJUMG.js";
+import "./chunk-URBATJEC.js";
 import {
   denoAdapter
 } from "./chunk-UISOJ4RW.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-IVM5UM44.js";
+import "./chunk-6EOUQCRM.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/server.deno.ts

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

@@ -1,12 +1,12 @@
 import {
   runServer
-} from "./chunk-D3QTSBR4.js";
-import "./chunk-LXJLSXQI.js";
+} from "./chunk-6HFBJUMG.js";
+import "./chunk-URBATJEC.js";
 import {
   nodeAdapter
 } from "./chunk-UISOJ4RW.js";
 import "./chunk-EOK6KATZ.js";
-import "./chunk-IVM5UM44.js";
+import "./chunk-6EOUQCRM.js";
 import "./chunk-4IQXHHPF.js";
 
 // .docu/node/server.node.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/flame",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "A blazing-fast React + MDX framework powered by Bun, built for modern documentation experiences.",
   "type": "module",
   "bin": {
@@ -56,10 +56,10 @@
     "react-dom": "^19.2.7",
     "unified": "^11.0.0",
     "zod": "^4.4.3",
+    "@docubook/markdown": "^2.0.0-beta.1",
     "@docubook/core": "^2.0.0-beta.0",
-    "@docubook/markdown": "^2.0.0-beta.0",
-    "@docubook/themes-colors": "^2.0.0-beta.0",
-    "@docubook/ui-react": "^2.0.0-beta.0"
+    "@docubook/ui-react": "^2.0.0-beta.0",
+    "@docubook/themes-colors": "^2.0.0-beta.0"
   },
   "peerDependencies": {
     "@sentry/bun": "^10.0.0"