@usecross/docs 0.7.0 → 0.8.1

package/dist/index.js

@@ -307,7 +307,7 @@ function DocSetSelector({ docSets, currentDocSet, className }) {
 
 // src/components/DocsLayout.tsx
 import { Head, Link as Link2, usePage } from "@inertiajs/react";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 
 // src/components/Sidebar.tsx
 import { Link } from "@inertiajs/react";
@@ -332,12 +332,138 @@ function Sidebar({ nav, currentPath, className, docSets, currentDocSet }) {
   ] });
 }
 
+// src/components/TableOfContents.tsx
+import { useEffect as useEffect3, useState as useState3, useRef as useRef2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TableOfContents({ items, className = "" }) {
+  const [activeId, setActiveId] = useState3(() => {
+    if (typeof window !== "undefined" && window.location.hash) {
+      return window.location.hash.slice(1);
+    }
+    return "";
+  });
+  const isClickScrolling = useRef2(false);
+  useEffect3(() => {
+    if (items.length === 0) return;
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      if (hash) {
+        setActiveId(hash);
+      }
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    const handleScroll = () => {
+      if (isClickScrolling.current) return;
+      const headerOffset = 100;
+      let currentId = "";
+      const scrollTop = window.scrollY;
+      const scrollHeight = document.documentElement.scrollHeight;
+      const clientHeight = document.documentElement.clientHeight;
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 50;
+      if (isAtBottom) {
+        for (let i = items.length - 1; i >= 0; i--) {
+          const element = document.getElementById(items[i].id);
+          if (element) {
+            const rect = element.getBoundingClientRect();
+            if (rect.top < clientHeight && rect.bottom > 0) {
+              currentId = items[i].id;
+              break;
+            }
+          }
+        }
+      } else {
+        for (const item of items) {
+          const element = document.getElementById(item.id);
+          if (element) {
+            const rect = element.getBoundingClientRect();
+            if (rect.top <= headerOffset) {
+              currentId = item.id;
+            } else {
+              break;
+            }
+          }
+        }
+      }
+      if (!currentId && items.length > 0) {
+        currentId = items[0].id;
+      }
+      if (currentId) {
+        setActiveId(currentId);
+      }
+    };
+    let ticking = false;
+    const scrollListener = () => {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          handleScroll();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+    window.addEventListener("scroll", scrollListener, { passive: true });
+    if (!window.location.hash) {
+      handleScroll();
+    }
+    return () => {
+      window.removeEventListener("scroll", scrollListener);
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [items]);
+  const handleClick = (e, id) => {
+    e.preventDefault();
+    const element = document.getElementById(id);
+    if (element) {
+      isClickScrolling.current = true;
+      setActiveId(id);
+      const top = element.getBoundingClientRect().top + window.scrollY - 80;
+      window.scrollTo({ top, behavior: "smooth" });
+      window.history.pushState(null, "", `#${id}`);
+      let lastScrollY = window.scrollY;
+      let stableCount = 0;
+      const checkScrollEnd = () => {
+        if (window.scrollY === lastScrollY) {
+          stableCount++;
+          if (stableCount >= 5) {
+            isClickScrolling.current = false;
+            return;
+          }
+        } else {
+          stableCount = 0;
+          lastScrollY = window.scrollY;
+        }
+        requestAnimationFrame(checkScrollEnd);
+      };
+      requestAnimationFrame(checkScrollEnd);
+    }
+  };
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs4("nav", { className, children: [
+    /* @__PURE__ */ jsx4("h3", { className: "mb-3 text-xs font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400", children: "On this page" }),
+    /* @__PURE__ */ jsx4("ul", { className: "space-y-1 border-l-2 border-gray-200 dark:border-gray-700", children: items.map((item) => {
+      const isActive = activeId === item.id;
+      const indent = item.level === 3 ? "pl-6" : "pl-4";
+      return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+        "a",
+        {
+          href: `#${item.id}`,
+          onClick: (e) => handleClick(e, item.id),
+          className: `block border-l-2 py-1.5 ${indent} -ml-0.5 text-sm transition-colors ${isActive ? "border-primary-500 text-gray-900 dark:text-white font-bold" : "border-transparent text-gray-600 dark:text-gray-300 hover:border-gray-900 dark:hover:border-white hover:text-gray-900 dark:hover:text-white"}`,
+          children: item.text
+        }
+      ) }, item.id);
+    }) })
+  ] });
+}
+
 // src/components/ThemeToggle.tsx
-import { useState as useState4, useRef as useRef2, useEffect as useEffect4 } from "react";
+import { useState as useState5, useRef as useRef3, useEffect as useEffect5 } from "react";
 
 // src/components/ThemeProvider.tsx
-import { createContext, useContext, useEffect as useEffect3, useState as useState3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { createContext, useContext, useEffect as useEffect4, useState as useState4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ThemeContext = createContext(null);
 var STORAGE_KEY = "cross-docs-theme";
 function getSystemTheme() {
@@ -357,17 +483,17 @@ function ThemeProvider({
   defaultTheme: defaultTheme2 = "system",
   forcedTheme
 }) {
-  const [theme, setThemeState] = useState3(() => {
+  const [theme, setThemeState] = useState4(() => {
     if (typeof window === "undefined") return defaultTheme2;
     return getStoredTheme() ?? defaultTheme2;
   });
-  const [resolvedTheme, setResolvedTheme] = useState3(() => {
+  const [resolvedTheme, setResolvedTheme] = useState4(() => {
     if (forcedTheme) return forcedTheme;
     if (typeof window === "undefined") return "light";
     if (theme === "system") return getSystemTheme();
     return theme;
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (forcedTheme) {
       setResolvedTheme(forcedTheme);
       return;
@@ -389,7 +515,7 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, [theme, forcedTheme]);
-  useEffect3(() => {
+  useEffect4(() => {
     const root = document.documentElement;
     root.classList.remove("light", "dark");
     root.classList.add(resolvedTheme);
@@ -398,7 +524,7 @@ function ThemeProvider({
     setThemeState(newTheme);
     localStorage.setItem(STORAGE_KEY, newTheme);
   };
-  return /* @__PURE__ */ jsx4(ThemeContext.Provider, { value: { theme, resolvedTheme, setTheme }, children });
+  return /* @__PURE__ */ jsx5(ThemeContext.Provider, { value: { theme, resolvedTheme, setTheme }, children });
 }
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -419,15 +545,15 @@ var themeInitScript = `
 `.trim();
 
 // src/components/ThemeToggle.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var SunIcon = ({ className }) => /* @__PURE__ */ jsxs4("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
-  /* @__PURE__ */ jsx5("path", { d: "M12 5V3M12 21v-2M5 12H3m18 0h-2M7.05 7.05 5.636 5.636m12.728 12.728L16.95 16.95M7.05 16.95l-1.414 1.414M18.364 5.636 16.95 7.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var SunIcon = ({ className }) => /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx6("path", { d: "M12 5V3M12 21v-2M5 12H3m18 0h-2M7.05 7.05 5.636 5.636m12.728 12.728L16.95 16.95M7.05 16.95l-1.414 1.414M18.364 5.636 16.95 7.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
 ] });
-var MoonIcon = ({ className }) => /* @__PURE__ */ jsx5("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx5("path", { d: "M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var MonitorIcon = ({ className }) => /* @__PURE__ */ jsxs4("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx5("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
-  /* @__PURE__ */ jsx5("path", { d: "M8 21h8m-4-4v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+var MoonIcon = ({ className }) => /* @__PURE__ */ jsx6("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx6("path", { d: "M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var MonitorIcon = ({ className }) => /* @__PURE__ */ jsxs5("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx6("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx6("path", { d: "M8 21h8m-4-4v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
 ] });
 var themeOptions = [
   { value: "light", label: "Light", icon: SunIcon },
@@ -436,9 +562,9 @@ var themeOptions = [
 ];
 function ThemeToggle({ className, size = "md" }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
-  const [isOpen, setIsOpen] = useState4(false);
-  const dropdownRef = useRef2(null);
-  useEffect4(() => {
+  const [isOpen, setIsOpen] = useState5(false);
+  const dropdownRef = useRef3(null);
+  useEffect5(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -449,7 +575,7 @@ function ThemeToggle({ className, size = "md" }) {
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  useEffect4(() => {
+  useEffect5(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") setIsOpen(false);
     };
@@ -463,8 +589,8 @@ function ThemeToggle({ className, size = "md" }) {
     md: "w-5 h-5",
     lg: "w-[22px] h-[22px]"
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "relative", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         onClick: () => setIsOpen(!isOpen),
@@ -482,7 +608,7 @@ function ThemeToggle({ className, size = "md" }) {
         "aria-expanded": isOpen,
         "aria-haspopup": "listbox",
         children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             SunIcon,
             {
               className: cn(
@@ -492,7 +618,7 @@ function ThemeToggle({ className, size = "md" }) {
               )
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             MoonIcon,
             {
               className: cn(
@@ -505,7 +631,7 @@ function ThemeToggle({ className, size = "md" }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         className: cn(
@@ -524,7 +650,7 @@ function ThemeToggle({ className, size = "md" }) {
         children: themeOptions.map((option, index) => {
           const Icon = option.icon;
           const isSelected = theme === option.value;
-          return /* @__PURE__ */ jsxs4(
+          return /* @__PURE__ */ jsxs5(
             "button",
             {
               onClick: () => {
@@ -545,13 +671,13 @@ function ThemeToggle({ className, size = "md" }) {
                 animationDelay: isOpen ? `${index * 25}ms` : "0ms"
               },
               children: [
-                /* @__PURE__ */ jsx5(Icon, { className: cn(
+                /* @__PURE__ */ jsx6(Icon, { className: cn(
                   "w-4 h-4 flex-shrink-0",
                   "transition-transform duration-150",
                   isSelected ? "scale-110" : "scale-100"
                 ) }),
-                /* @__PURE__ */ jsx5("span", { className: "flex-1 text-left", children: option.label }),
-                /* @__PURE__ */ jsx5("div", { className: cn(
+                /* @__PURE__ */ jsx6("span", { className: "flex-1 text-left", children: option.label }),
+                /* @__PURE__ */ jsx6("div", { className: cn(
                   "w-1.5 h-1.5 rounded-full",
                   "transition-all duration-200",
                   isSelected ? "bg-primary-500 scale-100 opacity-100" : "bg-transparent scale-0 opacity-0"
@@ -567,23 +693,23 @@ function ThemeToggle({ className, size = "md" }) {
 }
 
 // src/components/DocsLayout.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function MobileMenuButton({ onClick, isOpen }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       onClick,
       className: "inline-flex items-center justify-center p-2 -ml-2 text-gray-700 hover:text-primary-500 dark:text-gray-300 dark:hover:text-primary-400 lg:hidden transition-colors",
       "aria-expanded": isOpen,
       children: [
-        /* @__PURE__ */ jsx6("span", { className: "sr-only", children: isOpen ? "Close menu" : "Open menu" }),
-        isOpen ? /* @__PURE__ */ jsx6("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx6("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
+        /* @__PURE__ */ jsx7("span", { className: "sr-only", children: isOpen ? "Close menu" : "Open menu" }),
+        isOpen ? /* @__PURE__ */ jsx7("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx7("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
       ]
     }
   );
 }
 function GitHubIcon() {
-  return /* @__PURE__ */ jsx6("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
     "path",
     {
       fillRule: "evenodd",
@@ -602,31 +728,32 @@ function DocsLayout({
   logoInvertedUrl: propLogoInvertedUrl,
   githubUrl: propGithubUrl,
   navLinks: propNavLinks,
-  footer
+  footer,
+  toc
 }) {
   const sharedProps = usePage().props;
   const { nav, currentPath, docSets, currentDocSet } = sharedProps;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState5(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState6(false);
   const { resolvedTheme } = useTheme();
   const logoUrl = propLogoUrl ?? sharedProps.logoUrl;
   const logoInvertedUrl = propLogoInvertedUrl ?? sharedProps.logoInvertedUrl;
   const githubUrl = propGithubUrl ?? sharedProps.githubUrl;
   const navLinks = propNavLinks ?? sharedProps.navLinks ?? [];
-  const headerLogo = logoInverted || logo || (logoInvertedUrl ? /* @__PURE__ */ jsx6("img", { src: logoInvertedUrl, alt: "Logo", className: "h-8" }) : logoUrl ? /* @__PURE__ */ jsx6("img", { src: logoUrl, alt: "Logo", className: "h-8" }) : null);
+  const headerLogo = logoInverted || logo || (logoInvertedUrl ? /* @__PURE__ */ jsx7("img", { src: logoInvertedUrl, alt: "Logo", className: "h-8" }) : logoUrl ? /* @__PURE__ */ jsx7("img", { src: logoUrl, alt: "Logo", className: "h-8" }) : null);
   const footerLogoUrl = sharedProps.footerLogoUrl || logoUrl;
   const footerLogoInvertedUrl = sharedProps.footerLogoInvertedUrl || logoInvertedUrl;
   const currentFooterLogoUrl = resolvedTheme === "dark" ? footerLogoInvertedUrl || footerLogoUrl : footerLogoUrl;
-  const footerLogo = logo || (currentFooterLogoUrl ? /* @__PURE__ */ jsx6("img", { src: currentFooterLogoUrl, alt: "Logo", className: "h-6" }) : null);
-  return /* @__PURE__ */ jsxs5("div", { className: "min-h-screen bg-white dark:bg-[#0f0f0f] flex flex-col transition-colors duration-200", children: [
-    /* @__PURE__ */ jsx6(Head, { title }),
-    /* @__PURE__ */ jsx6("nav", { className: "fixed w-full z-50 bg-white/95 dark:bg-[#0f0f0f]/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx6("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs5("div", { className: "flex justify-between h-16 items-center", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx6(MobileMenuButton, { onClick: () => setMobileMenuOpen(!mobileMenuOpen), isOpen: mobileMenuOpen }),
-        headerLogo ? /* @__PURE__ */ jsx6(Link2, { href: "/", className: "flex items-center", children: headerLogo }) : /* @__PURE__ */ jsx6(Link2, { href: "/", className: "font-bold text-lg text-gray-900 dark:text-white", children: "Docs" })
+  const footerLogo = logo || (currentFooterLogoUrl ? /* @__PURE__ */ jsx7("img", { src: currentFooterLogoUrl, alt: "Logo", className: "h-6" }) : null);
+  return /* @__PURE__ */ jsxs6("div", { className: "min-h-screen bg-white dark:bg-[#0f0f0f] flex flex-col transition-colors duration-200", children: [
+    /* @__PURE__ */ jsx7(Head, { title }),
+    /* @__PURE__ */ jsx7("nav", { className: "fixed w-full z-50 bg-white/95 dark:bg-[#0f0f0f]/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx7("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs6("div", { className: "flex justify-between h-16 items-center", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7(MobileMenuButton, { onClick: () => setMobileMenuOpen(!mobileMenuOpen), isOpen: mobileMenuOpen }),
+        headerLogo ? /* @__PURE__ */ jsx7(Link2, { href: "/", className: "flex items-center", children: headerLogo }) : /* @__PURE__ */ jsx7(Link2, { href: "/", className: "font-bold text-lg text-gray-900 dark:text-white", children: "Docs" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-6", children: [
-        /* @__PURE__ */ jsx6("div", { className: "-mr-2", children: /* @__PURE__ */ jsx6(ThemeToggle, { size: "sm" }) }),
-        navLinks.map((link) => /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx7("div", { className: "-mr-2", children: /* @__PURE__ */ jsx7(ThemeToggle, { size: "sm" }) }),
+        navLinks.map((link) => /* @__PURE__ */ jsx7(
           Link2,
           {
             href: link.href,
@@ -635,31 +762,32 @@ function DocsLayout({
           },
           link.href
         )),
-        githubUrl && /* @__PURE__ */ jsx6(
+        githubUrl && /* @__PURE__ */ jsx7(
           "a",
           {
             href: githubUrl,
             target: "_blank",
             rel: "noopener noreferrer",
             className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
-            children: /* @__PURE__ */ jsx6(GitHubIcon, {})
+            children: /* @__PURE__ */ jsx7(GitHubIcon, {})
           }
         )
       ] })
     ] }) }) }),
-    mobileMenuOpen && /* @__PURE__ */ jsxs5("div", { className: "fixed inset-0 z-40 lg:hidden", children: [
-      /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 bg-black/50 dark:bg-black/70", onClick: () => setMobileMenuOpen(false) }),
-      /* @__PURE__ */ jsx6("div", { className: "fixed inset-y-0 left-0 w-64 overflow-y-auto bg-white dark:bg-[#0f0f0f] px-4 py-6 pt-20 border-r border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx6(Sidebar, { nav, currentPath, docSets, currentDocSet }) })
+    mobileMenuOpen && /* @__PURE__ */ jsxs6("div", { className: "fixed inset-0 z-40 lg:hidden", children: [
+      /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 bg-black/50 dark:bg-black/70", onClick: () => setMobileMenuOpen(false) }),
+      /* @__PURE__ */ jsx7("div", { className: "fixed inset-y-0 left-0 w-64 overflow-y-auto bg-white dark:bg-[#0f0f0f] px-4 py-6 pt-20 border-r border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx7(Sidebar, { nav, currentPath, docSets, currentDocSet }) })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "bg-white dark:bg-[#0f0f0f] pt-16 w-full flex-1 transition-colors", children: /* @__PURE__ */ jsxs5("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx6("aside", { className: "hidden lg:block w-72 flex-shrink-0 border-r border-gray-200 dark:border-gray-800 min-h-[calc(100vh-4rem)] transition-colors", children: /* @__PURE__ */ jsx6("nav", { className: "sticky top-16 px-4 py-6 max-h-[calc(100vh-4rem)] overflow-y-auto", children: /* @__PURE__ */ jsx6(Sidebar, { nav, currentPath, docSets, currentDocSet }) }) }),
-      /* @__PURE__ */ jsx6("main", { className: "flex-1 min-w-0 p-4 lg:px-10 lg:py-6", children: /* @__PURE__ */ jsx6("article", { className: "prose prose-lg max-w-3xl prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-3xl prose-h1:mb-4 prose-h2:text-2xl prose-h2:mt-10 first:prose-h2:mt-0 prose-h3:text-xl prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none dark:prose-headings:text-white dark:prose-strong:text-white dark:text-gray-300", children }) })
+    /* @__PURE__ */ jsx7("div", { className: "bg-white dark:bg-[#0f0f0f] pt-16 w-full flex-1 transition-colors", children: /* @__PURE__ */ jsxs6("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx7("aside", { className: "hidden lg:block w-72 flex-shrink-0 border-r border-gray-200 dark:border-gray-800 min-h-[calc(100vh-4rem)] transition-colors", children: /* @__PURE__ */ jsx7("nav", { className: "sticky top-16 px-4 py-6 max-h-[calc(100vh-4rem)] overflow-y-auto", children: /* @__PURE__ */ jsx7(Sidebar, { nav, currentPath, docSets, currentDocSet }) }) }),
+      /* @__PURE__ */ jsx7("main", { className: "flex-1 min-w-0 p-4 lg:px-10 lg:py-6", children: /* @__PURE__ */ jsx7("article", { className: "prose prose-lg max-w-3xl prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-3xl prose-h1:mb-4 prose-h2:text-2xl prose-h2:mt-10 first:prose-h2:mt-0 prose-h3:text-xl prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none dark:prose-headings:text-white dark:prose-strong:text-white dark:text-gray-300", children }) }),
+      toc && toc.length > 0 && /* @__PURE__ */ jsx7("aside", { className: "hidden xl:block w-64 flex-shrink-0 min-h-[calc(100vh-4rem)] transition-colors", children: /* @__PURE__ */ jsx7("div", { className: "sticky top-16 px-4 py-6 max-h-[calc(100vh-4rem)] overflow-y-auto", children: /* @__PURE__ */ jsx7(TableOfContents, { items: toc }) }) })
     ] }) }),
-    footer || /* @__PURE__ */ jsx6("footer", { className: "border-t border-gray-200 dark:border-gray-800 py-8 bg-white dark:bg-[#0f0f0f] transition-colors", children: /* @__PURE__ */ jsxs5("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
-      footerLogo && /* @__PURE__ */ jsx6(Link2, { href: "/", children: footerLogo }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex gap-8 text-sm text-gray-600 dark:text-gray-400", children: [
-        navLinks.map((link) => /* @__PURE__ */ jsx6(Link2, { href: link.href, className: "hover:text-black dark:hover:text-white transition-colors", children: link.label }, link.href)),
-        githubUrl && /* @__PURE__ */ jsx6(
+    footer || /* @__PURE__ */ jsx7("footer", { className: "border-t border-gray-200 dark:border-gray-800 py-8 bg-white dark:bg-[#0f0f0f] transition-colors", children: /* @__PURE__ */ jsxs6("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
+      footerLogo && /* @__PURE__ */ jsx7(Link2, { href: "/", children: footerLogo }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex gap-8 text-sm text-gray-600 dark:text-gray-400", children: [
+        navLinks.map((link) => /* @__PURE__ */ jsx7(Link2, { href: link.href, className: "hover:text-black dark:hover:text-white transition-colors", children: link.label }, link.href)),
+        githubUrl && /* @__PURE__ */ jsx7(
           "a",
           {
             href: githubUrl,
@@ -678,7 +806,19 @@ function DocsLayout({
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
-import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8 } from "react/jsx-runtime";
+function slugify(text) {
+  return text.toLowerCase().replace(/[\s_]+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function getTextContent(children) {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(getTextContent).join("");
+  if (children && typeof children === "object" && "props" in children) {
+    return getTextContent(children.props.children);
+  }
+  return "";
+}
 function Markdown({ content, components }) {
   const lowercaseComponents = components ? Object.entries(components).reduce(
     (acc, [name, Component]) => {
@@ -687,7 +827,7 @@ function Markdown({ content, components }) {
     },
     {}
   ) : {};
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm],
@@ -696,14 +836,14 @@ function Markdown({ content, components }) {
         ...lowercaseComponents,
         // Override pre to avoid double wrapping with CodeBlock
         pre({ children }) {
-          return /* @__PURE__ */ jsx7(Fragment, { children });
+          return /* @__PURE__ */ jsx8(Fragment, { children });
         },
         // Custom code block rendering with syntax highlighting
         code({ node, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "");
           const isInline = !match && !className;
           if (isInline) {
-            return /* @__PURE__ */ jsx7(
+            return /* @__PURE__ */ jsx8(
               "code",
               {
                 className: "rounded bg-gray-100 px-1.5 py-0.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200",
@@ -716,7 +856,7 @@ function Markdown({ content, components }) {
           const titleMatch = /title="([^"]+)"/.exec(meta);
           const filename = titleMatch ? titleMatch[1] : void 0;
           const showLineNumbers = meta.includes("showLineNumbers");
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx8(
             CodeBlock,
             {
               code: String(children).replace(/\n$/, ""),
@@ -729,7 +869,7 @@ function Markdown({ content, components }) {
         // Custom link styling
         a({ href, children }) {
           const isExternal = href?.startsWith("http");
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx8(
             "a",
             {
               href,
@@ -741,13 +881,24 @@ function Markdown({ content, components }) {
         },
         // Tables
         table({ children }) {
-          return /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx7("table", { className: "w-full text-left text-sm", children }) });
+          return /* @__PURE__ */ jsx8("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx8("table", { className: "w-full text-left text-sm", children }) });
         },
         th({ children }) {
-          return /* @__PURE__ */ jsx7("th", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2 font-semibold dark:border-gray-700 dark:bg-gray-800", children });
+          return /* @__PURE__ */ jsx8("th", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2 font-semibold dark:border-gray-700 dark:bg-gray-800", children });
         },
         td({ children }) {
-          return /* @__PURE__ */ jsx7("td", { className: "border-b border-gray-200 px-4 py-2 dark:border-gray-700", children });
+          return /* @__PURE__ */ jsx8("td", { className: "border-b border-gray-200 px-4 py-2 dark:border-gray-700", children });
+        },
+        // Headings with anchor IDs for TOC
+        h2({ children }) {
+          const text = getTextContent(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ jsx8("h2", { id, children });
+        },
+        h3({ children }) {
+          const text = getTextContent(children);
+          const id = slugify(text);
+          return /* @__PURE__ */ jsx8("h3", { id, children });
         }
       },
       children: content
@@ -757,31 +908,40 @@ function Markdown({ content, components }) {
 
 // src/context/ComponentsContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var ComponentsContext = createContext2({});
 function ComponentsProvider({
   children,
   components
 }) {
-  return /* @__PURE__ */ jsx8(ComponentsContext.Provider, { value: { components }, children });
+  return /* @__PURE__ */ jsx9(ComponentsContext.Provider, { value: { components }, children });
 }
 function useComponents() {
   return useContext2(ComponentsContext);
 }
 
 // src/components/DocsPage.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function DocsPage({ content, ...layoutProps }) {
   const { components } = useComponents();
-  return /* @__PURE__ */ jsx9(DocsLayout, { title: content?.title ?? "", description: content?.description, ...layoutProps, children: /* @__PURE__ */ jsx9(Markdown, { content: content?.body ?? "", components }) });
+  return /* @__PURE__ */ jsx10(
+    DocsLayout,
+    {
+      title: content?.title ?? "",
+      description: content?.description,
+      toc: content?.toc,
+      ...layoutProps,
+      children: /* @__PURE__ */ jsx10(Markdown, { content: content?.body ?? "", components })
+    }
+  );
 }
 
 // src/components/EmojiConfetti.tsx
-import { useState as useState6, useCallback } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState7, useCallback } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function EmojiConfetti({ children, emoji }) {
-  const [particles, setParticles] = useState6([]);
-  const [isActive, setIsActive] = useState6(false);
+  const [particles, setParticles] = useState7([]);
+  const [isActive, setIsActive] = useState7(false);
   const triggerBurst = useCallback(() => {
     if (isActive) return;
     setIsActive(true);
@@ -808,17 +968,17 @@ function EmojiConfetti({ children, emoji }) {
       setIsActive(false);
     }, 1e3);
   }, [isActive]);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "span",
     {
       className: "relative inline-block",
       onMouseEnter: triggerBurst,
       children: [
         children,
-        /* @__PURE__ */ jsx10("span", { className: "absolute inset-0 pointer-events-none overflow-visible", children: particles.map((p) => {
+        /* @__PURE__ */ jsx11("span", { className: "absolute inset-0 pointer-events-none overflow-visible", children: particles.map((p) => {
           const endX = p.x + Math.cos(p.angle) * p.velocity;
           const endY = p.y + Math.sin(p.angle) * p.velocity;
-          return /* @__PURE__ */ jsx10(
+          return /* @__PURE__ */ jsx11(
             "span",
             {
               className: "absolute",
@@ -844,8 +1004,8 @@ function EmojiConfetti({ children, emoji }) {
 
 // src/components/HomePage.tsx
 import { Head as Head2, Link as Link3 } from "@inertiajs/react";
-import { createContext as createContext3, useContext as useContext3, useState as useState7 } from "react";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext3, useState as useState8 } from "react";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var HomePageContext = createContext3(null);
 function useHomePage() {
   const context = useContext3(HomePageContext);
@@ -855,28 +1015,28 @@ function useHomePage() {
   return context;
 }
 function InstallCommand({ command }) {
-  const [copied, setCopied] = useState7(false);
+  const [copied, setCopied] = useState8(false);
   const copyToClipboard = async () => {
     await navigator.clipboard.writeText(command);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "button",
     {
       onClick: copyToClipboard,
       className: "group relative flex items-center bg-gray-900 dark:bg-white border border-gray-900 dark:border-white px-4 h-14 font-mono text-sm text-white dark:text-gray-900 hover:bg-white dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer",
       children: [
-        /* @__PURE__ */ jsx11("span", { className: "text-primary-500 dark:text-primary-600 mr-2", children: "$" }),
-        /* @__PURE__ */ jsx11("span", { children: command }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("span", { className: "text-primary-500 dark:text-primary-600 mr-2", children: "$" }),
+        /* @__PURE__ */ jsx12("span", { children: command }),
+        /* @__PURE__ */ jsx12(
           "svg",
           {
             className: `ml-4 w-4 h-4 transition ${copied ? "text-green-400" : "opacity-50 group-hover:opacity-100"}`,
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx12(
               "path",
               {
                 strokeLinecap: "round",
@@ -887,7 +1047,7 @@ function InstallCommand({ command }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "span",
           {
             className: `absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-xs py-1 px-2 rounded transition-opacity duration-300 whitespace-nowrap ${copied ? "opacity-100" : "opacity-0"}`,
@@ -899,7 +1059,7 @@ function InstallCommand({ command }) {
   );
 }
 function GitHubIcon2() {
-  return /* @__PURE__ */ jsx11("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(
     "path",
     {
       fillRule: "evenodd",
@@ -911,17 +1071,17 @@ function GitHubIcon2() {
 function DefaultLogo() {
   const { title, logoUrl } = useHomePage();
   if (logoUrl) {
-    return /* @__PURE__ */ jsx11(Link3, { href: "/", className: "flex items-center", children: /* @__PURE__ */ jsx11("img", { src: logoUrl, alt: title, className: "h-8" }) });
+    return /* @__PURE__ */ jsx12(Link3, { href: "/", className: "flex items-center", children: /* @__PURE__ */ jsx12("img", { src: logoUrl, alt: title, className: "h-8" }) });
   }
-  return /* @__PURE__ */ jsx11(Link3, { href: "/", className: "font-bold text-lg text-gray-900 dark:text-white", children: title });
+  return /* @__PURE__ */ jsx12(Link3, { href: "/", className: "font-bold text-lg text-gray-900 dark:text-white", children: title });
 }
 function HomeHeader({ renderLogo } = {}) {
   const { navLinks, githubUrl } = useHomePage();
-  return /* @__PURE__ */ jsx11("nav", { className: "fixed w-full z-50 bg-white/95 dark:bg-[#0f0f0f]/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx11("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs7("div", { className: "flex justify-between h-16 items-center", children: [
-    renderLogo ? renderLogo() : /* @__PURE__ */ jsx11(DefaultLogo, {}),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ jsx11("div", { className: "-mr-2", children: /* @__PURE__ */ jsx11(ThemeToggle, { size: "sm" }) }),
-      navLinks.map((link) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("nav", { className: "fixed w-full z-50 bg-white/95 dark:bg-[#0f0f0f]/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx12("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs8("div", { className: "flex justify-between h-16 items-center", children: [
+    renderLogo ? renderLogo() : /* @__PURE__ */ jsx12(DefaultLogo, {}),
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx12("div", { className: "-mr-2", children: /* @__PURE__ */ jsx12(ThemeToggle, { size: "sm" }) }),
+      navLinks.map((link) => /* @__PURE__ */ jsx12(
         Link3,
         {
           href: link.href,
@@ -930,14 +1090,14 @@ function HomeHeader({ renderLogo } = {}) {
         },
         link.href
       )),
-      githubUrl && /* @__PURE__ */ jsx11(
+      githubUrl && /* @__PURE__ */ jsx12(
         "a",
         {
           href: githubUrl,
           target: "_blank",
           rel: "noopener noreferrer",
           className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
-          children: /* @__PURE__ */ jsx11(GitHubIcon2, {})
+          children: /* @__PURE__ */ jsx12(GitHubIcon2, {})
         }
       )
     ] })
@@ -945,19 +1105,19 @@ function HomeHeader({ renderLogo } = {}) {
 }
 function HomeHero() {
   const { title, tagline, description, ctaText, ctaHref, installCommand, heroLogoUrl } = useHomePage();
-  return /* @__PURE__ */ jsx11("section", { className: "pt-16", children: /* @__PURE__ */ jsx11("div", { className: "px-4 lg:px-10 py-16 lg:py-24", children: /* @__PURE__ */ jsxs7("div", { className: "max-w-4xl", children: [
-    /* @__PURE__ */ jsx11("div", { className: "mb-4 text-sm font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400", children: tagline }),
-    heroLogoUrl ? /* @__PURE__ */ jsx11("h1", { className: "mb-6 lg:mb-8", children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("section", { className: "pt-16", children: /* @__PURE__ */ jsx12("div", { className: "px-4 lg:px-10 py-16 lg:py-24", children: /* @__PURE__ */ jsxs8("div", { className: "max-w-4xl", children: [
+    /* @__PURE__ */ jsx12("div", { className: "mb-4 text-sm font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400", children: tagline }),
+    heroLogoUrl ? /* @__PURE__ */ jsx12("h1", { className: "mb-6 lg:mb-8", children: /* @__PURE__ */ jsx12(
       "img",
       {
         src: heroLogoUrl,
         alt: title,
         className: "h-auto w-auto max-w-[580px]"
       }
-    ) }) : /* @__PURE__ */ jsx11("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight mb-6 text-gray-900 dark:text-white", children: title }),
-    /* @__PURE__ */ jsx11("p", { className: "text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-2xl leading-relaxed mb-8", children: description }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col sm:flex-row gap-3", children: [
-      /* @__PURE__ */ jsx11(
+    ) }) : /* @__PURE__ */ jsx12("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight mb-6 text-gray-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsx12("p", { className: "text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-2xl leading-relaxed mb-8", children: description }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-col sm:flex-row gap-3", children: [
+      /* @__PURE__ */ jsx12(
         Link3,
         {
           href: ctaHref,
@@ -965,19 +1125,19 @@ function HomeHero() {
           children: ctaText
         }
       ),
-      installCommand && /* @__PURE__ */ jsx11(InstallCommand, { command: installCommand })
+      installCommand && /* @__PURE__ */ jsx12(InstallCommand, { command: installCommand })
     ] })
   ] }) }) });
 }
 function HomeFeatureItem({ feature, index, totalFeatures }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `p-4 lg:p-10 border-b sm:border-b border-gray-200 dark:border-gray-800 ${index % 2 === 0 ? "sm:border-r" : ""} ${index >= totalFeatures - 2 ? "sm:border-b-0" : ""} ${index === totalFeatures - 1 && totalFeatures % 2 === 1 ? "border-b-0" : ""} transition-colors`,
       children: [
-        /* @__PURE__ */ jsx11("div", { className: "text-5xl font-bold text-primary-500 dark:text-primary-400 mb-4", children: String(index + 1).padStart(2, "0") }),
-        /* @__PURE__ */ jsx11("h3", { className: "text-xl font-bold mb-2 text-gray-900 dark:text-white", children: feature.title }),
-        /* @__PURE__ */ jsx11("p", { className: "text-gray-600 dark:text-gray-300", children: feature.description })
+        /* @__PURE__ */ jsx12("div", { className: "text-5xl font-bold text-primary-500 dark:text-primary-400 mb-4", children: String(index + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsx12("h3", { className: "text-xl font-bold mb-2 text-gray-900 dark:text-white", children: feature.title }),
+        /* @__PURE__ */ jsx12("p", { className: "text-gray-600 dark:text-gray-300", children: feature.description })
       ]
     }
   );
@@ -987,17 +1147,17 @@ function HomeFeatures({ renderFeature } = {}) {
   if (features.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11("section", { className: "border-t border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-12", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "col-span-12 lg:col-span-4 p-4 lg:p-10 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-800 transition-colors", children: [
-      /* @__PURE__ */ jsx11("div", { className: "text-sm font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4", children: "Features" }),
-      /* @__PURE__ */ jsxs7("h2", { className: "text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 dark:text-white", children: [
+  return /* @__PURE__ */ jsx12("section", { className: "border-t border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-12", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "col-span-12 lg:col-span-4 p-4 lg:p-10 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-800 transition-colors", children: [
+      /* @__PURE__ */ jsx12("div", { className: "text-sm font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4", children: "Features" }),
+      /* @__PURE__ */ jsxs8("h2", { className: "text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 dark:text-white", children: [
         "Why ",
         title,
         "?"
       ] })
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "col-span-12 lg:col-span-8 grid grid-cols-1 sm:grid-cols-2", children: features.map(
-      (feature, index) => renderFeature ? /* @__PURE__ */ jsx11("div", { children: renderFeature(feature, index, HomeFeatureItem) }, index) : /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12("div", { className: "col-span-12 lg:col-span-8 grid grid-cols-1 sm:grid-cols-2", children: features.map(
+      (feature, index) => renderFeature ? /* @__PURE__ */ jsx12("div", { children: renderFeature(feature, index, HomeFeatureItem) }, index) : /* @__PURE__ */ jsx12(
         HomeFeatureItem,
         {
           feature,
@@ -1011,11 +1171,11 @@ function HomeFeatures({ renderFeature } = {}) {
 }
 function HomeCTA() {
   const { ctaHref } = useHomePage();
-  return /* @__PURE__ */ jsx11("section", { className: "border-t border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-12 items-center", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "col-span-12 lg:col-span-8 p-4 lg:p-10", children: [
-      /* @__PURE__ */ jsx11("h2", { className: "text-4xl lg:text-6xl font-bold tracking-tight mb-4 text-gray-900 dark:text-white", children: "Ready to start?" }),
-      /* @__PURE__ */ jsx11("p", { className: "text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl", children: "Get up and running in minutes. Check out our documentation to learn more." }),
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("section", { className: "border-t border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-12 items-center", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "col-span-12 lg:col-span-8 p-4 lg:p-10", children: [
+      /* @__PURE__ */ jsx12("h2", { className: "text-4xl lg:text-6xl font-bold tracking-tight mb-4 text-gray-900 dark:text-white", children: "Ready to start?" }),
+      /* @__PURE__ */ jsx12("p", { className: "text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl", children: "Get up and running in minutes. Check out our documentation to learn more." }),
+      /* @__PURE__ */ jsx12(
         Link3,
         {
           href: ctaHref,
@@ -1024,12 +1184,12 @@ function HomeCTA() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       Link3,
       {
         href: ctaHref,
         className: "col-span-12 lg:col-span-4 h-full bg-primary-500 hidden lg:flex items-center justify-center p-4 lg:p-10 hover:bg-gray-900 dark:hover:bg-white transition-colors min-h-[200px] group",
-        children: /* @__PURE__ */ jsx11("div", { className: "text-white group-hover:text-white dark:group-hover:text-gray-900 text-8xl font-bold transition-colors", children: "\u2192" })
+        children: /* @__PURE__ */ jsx12("div", { className: "text-white group-hover:text-white dark:group-hover:text-gray-900 text-8xl font-bold transition-colors", children: "\u2192" })
       }
     )
   ] }) });
@@ -1038,11 +1198,11 @@ function HomeFooter() {
   const { title, logoUrl, footerLogoUrl, footerLogoInvertedUrl, navLinks, githubUrl } = useHomePage();
   const { resolvedTheme } = useTheme();
   const currentLogoUrl = resolvedTheme === "dark" ? footerLogoInvertedUrl || footerLogoUrl || logoUrl : footerLogoUrl || logoUrl;
-  return /* @__PURE__ */ jsx11("footer", { className: "border-t border-gray-200 dark:border-gray-800 py-8 bg-white dark:bg-[#0f0f0f] transition-colors", children: /* @__PURE__ */ jsxs7("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
-    currentLogoUrl && /* @__PURE__ */ jsx11(Link3, { href: "/", children: /* @__PURE__ */ jsx11("img", { src: currentLogoUrl, alt: title, className: "h-6" }) }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex gap-8 text-sm text-gray-600 dark:text-gray-300", children: [
-      navLinks.map((link) => /* @__PURE__ */ jsx11(Link3, { href: link.href, className: "hover:text-black dark:hover:text-white transition-colors", children: link.label }, link.href)),
-      githubUrl && /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("footer", { className: "border-t border-gray-200 dark:border-gray-800 py-8 bg-white dark:bg-[#0f0f0f] transition-colors", children: /* @__PURE__ */ jsxs8("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
+    currentLogoUrl && /* @__PURE__ */ jsx12(Link3, { href: "/", children: /* @__PURE__ */ jsx12("img", { src: currentLogoUrl, alt: title, className: "h-6" }) }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex gap-8 text-sm text-gray-600 dark:text-gray-300", children: [
+      navLinks.map((link) => /* @__PURE__ */ jsx12(Link3, { href: link.href, className: "hover:text-black dark:hover:text-white transition-colors", children: link.label }, link.href)),
+      githubUrl && /* @__PURE__ */ jsx12(
         "a",
         {
           href: githubUrl,
@@ -1056,7 +1216,7 @@ function HomeFooter() {
   ] }) });
 }
 function HomeSpacer() {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "grow dark:hidden",
@@ -1065,7 +1225,7 @@ function HomeSpacer() {
   );
 }
 function HomeSpacerDark() {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "grow hidden dark:block",
@@ -1074,14 +1234,14 @@ function HomeSpacerDark() {
   );
 }
 function DefaultHomeLayout() {
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx11(HomeHeader, {}),
-    /* @__PURE__ */ jsx11(HomeHero, {}),
-    /* @__PURE__ */ jsx11(HomeFeatures, {}),
-    /* @__PURE__ */ jsx11(HomeCTA, {}),
-    /* @__PURE__ */ jsx11(HomeSpacer, {}),
-    /* @__PURE__ */ jsx11(HomeSpacerDark, {}),
-    /* @__PURE__ */ jsx11(HomeFooter, {})
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx12(HomeHeader, {}),
+    /* @__PURE__ */ jsx12(HomeHero, {}),
+    /* @__PURE__ */ jsx12(HomeFeatures, {}),
+    /* @__PURE__ */ jsx12(HomeCTA, {}),
+    /* @__PURE__ */ jsx12(HomeSpacer, {}),
+    /* @__PURE__ */ jsx12(HomeSpacerDark, {}),
+    /* @__PURE__ */ jsx12(HomeFooter, {})
   ] });
 }
 function HomePage({
@@ -1093,9 +1253,9 @@ function HomePage({
     ...props,
     navLinks
   };
-  return /* @__PURE__ */ jsx11(HomePageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs7("div", { className: "min-h-screen bg-white dark:bg-[#0f0f0f] flex flex-col transition-colors duration-200", children: [
-    /* @__PURE__ */ jsx11(Head2, { title: props.title }),
-    children || /* @__PURE__ */ jsx11(DefaultHomeLayout, {})
+  return /* @__PURE__ */ jsx12(HomePageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8("div", { className: "min-h-screen bg-white dark:bg-[#0f0f0f] flex flex-col transition-colors duration-200", children: [
+    /* @__PURE__ */ jsx12(Head2, { title: props.title }),
+    children || /* @__PURE__ */ jsx12(DefaultHomeLayout, {})
   ] }) });
 }
 HomePage.Header = HomeHeader;
@@ -1108,7 +1268,7 @@ HomePage.Footer = HomeFooter;
 // src/app.tsx
 import { createInertiaApp } from "@inertiajs/react";
 import { createRoot, hydrateRoot } from "react-dom/client";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function createDocsApp(config) {
   const { pages, title, components } = config;
   if (typeof window !== "undefined") {
@@ -1125,7 +1285,7 @@ function createDocsApp(config) {
       return page;
     },
     setup({ el, App, props }) {
-      const appElement = /* @__PURE__ */ jsx12(ThemeProvider, { children: /* @__PURE__ */ jsx12(ComponentsProvider, { components, children: /* @__PURE__ */ jsx12(App, { ...props }) }) });
+      const appElement = /* @__PURE__ */ jsx13(ThemeProvider, { children: /* @__PURE__ */ jsx13(ComponentsProvider, { components, children: /* @__PURE__ */ jsx13(App, { ...props }) }) });
       if (el.hasChildNodes()) {
         hydrateRoot(el, appElement);
       } else {
@@ -1150,6 +1310,7 @@ export {
   InlineCode,
   Markdown,
   Sidebar,
+  TableOfContents,
   ThemeProvider,
   ThemeToggle,
   cn,