@geenius/docs 0.8.10 → 0.11.0

package/packages/react/dist/index.js

@@ -1,37 +1,43 @@
 import React, { useState, useId, useRef, useEffect, useCallback, useMemo, Children } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { AnimatePresence, motion } from '@geenius/motion/react';
 
 // src/components/Breadcrumbs.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 function Breadcrumbs({
-  items
+  items,
+  className
 }) {
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-1.5 text-sm", "aria-label": "Breadcrumb", children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { className: cn("flex items-center gap-1.5 text-sm", className), "aria-label": "Breadcrumb", children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     idx > 0 && /* @__PURE__ */ jsx(
       "svg",
       {
         "aria-hidden": "true",
-        className: "h-3.5 w-3.5 shrink-0 text-white/20",
+        className: "h-3.5 w-3.5 shrink-0 text-foreground/20",
         viewBox: "0 0 16 16",
         fill: "none",
         children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5" })
       }
     ),
-    idx === items.length - 1 ? /* @__PURE__ */ jsx("span", { className: "truncate text-white/60", children: item.title }) : /* @__PURE__ */ jsx(
+    idx === items.length - 1 ? /* @__PURE__ */ jsx("span", { className: "truncate text-foreground/60", children: item.title }) : /* @__PURE__ */ jsx(
       "a",
       {
         href: item.href,
-        className: "truncate text-white/40 transition-colors hover:text-white/70",
+        className: "truncate text-foreground/40 transition-colors hover:text-foreground/70",
         children: item.title
       }
     )
   ] }, `${item.href}-${item.title}`)) });
 }
 
-// ../shared/dist/chunk-BR2XBF64.js
+// ../shared/dist/chunk-QKKVTCRJ.js
 function toTocLevel(level) {
   if (level === 2 || level === 3 || level === 4) {
     return level;
@@ -188,11 +194,11 @@ function createHeading(Tag, className) {
   return ({ children }) => {
     const text = getNodeText(children);
     const id = slugify(text);
-    return /* @__PURE__ */ jsx(Tag, { id, className: `${className} scroll-mt-20`, children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: "transition-colors hover:text-primary", children }) });
+    return /* @__PURE__ */ jsx(Tag, { id, className: cn(className, "scroll-mt-20"), children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: "transition-colors hover:text-primary", children }) });
   };
 }
 function DocPage(props) {
-  return /* @__PURE__ */ jsx("article", { className: "prose-custom max-w-none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("article", { className: cn("prose-custom max-w-none", props.className), children: /* @__PURE__ */ jsx(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm],
@@ -200,11 +206,11 @@ function DocPage(props) {
         h1: createHeading("h1", "mb-4 mt-8 text-3xl font-bold"),
         h2: createHeading(
           "h2",
-          "mb-3 mt-8 border-b border-white/10 pb-2 text-2xl font-bold"
+          "mb-3 mt-8 border-b border-border/60 pb-2 text-2xl font-bold"
         ),
         h3: createHeading("h3", "mb-2 mt-6 text-xl font-semibold"),
         h4: createHeading("h4", "mb-2 mt-4 text-lg font-medium"),
-        p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "my-3 leading-relaxed text-white/80", children }),
+        p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "my-3 leading-relaxed text-foreground/80", children }),
         a: ({ href, children }) => /* @__PURE__ */ jsx(
           "a",
           {
@@ -215,12 +221,12 @@ function DocPage(props) {
             children
           }
         ),
-        code: ({ className, children }) => className ? /* @__PURE__ */ jsx("code", { className, children }) : /* @__PURE__ */ jsx("code", { className: "rounded bg-white/10 px-1.5 py-0.5 text-sm text-primary", children }),
-        pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "my-4 overflow-x-auto rounded-lg bg-black/30 p-4 text-sm leading-relaxed", children }),
-        blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { className: "my-4 rounded-r-lg border-l-4 border-primary/40 bg-white/5 py-3 pl-4 pr-4 italic text-white/70", children }),
-        table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "my-4 overflow-x-auto rounded-lg border border-white/10", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children }) }),
-        th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "border-b border-white/10 bg-white/5 px-4 py-2.5 text-left font-semibold", children }),
-        td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "border-b border-white/5 px-4 py-2 text-white/70 last:border-none", children })
+        code: ({ className, children }) => className ? /* @__PURE__ */ jsx("code", { className, children }) : /* @__PURE__ */ jsx("code", { className: "rounded bg-foreground/10 px-1.5 py-0.5 text-sm text-primary", children }),
+        pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "my-4 overflow-x-auto rounded-lg bg-background/80 p-4 text-sm leading-relaxed", children }),
+        blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { className: "my-4 rounded-r-lg border-l-4 border-primary/40 bg-foreground/5 py-3 pl-4 pr-4 italic text-foreground/70", children }),
+        table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "my-4 overflow-x-auto rounded-lg border border-border/60", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children }) }),
+        th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "border-b border-border/60 bg-foreground/5 px-4 py-2.5 text-left font-semibold", children }),
+        td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "border-b border-border/40 px-4 py-2 text-foreground/70 last:border-none", children })
       },
       children: props.page.content
     }
@@ -236,7 +242,8 @@ function DocSearch({
   onQuery,
   onSelect,
   isOpen,
-  onClose
+  onClose,
+  className
 }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const dialogId = useId();
@@ -297,7 +304,7 @@ function DocSearch({
     },
     [results, activeIndex, onSelect, onClose]
   );
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]", children: [
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs("div", { className: cn("fixed inset-0 z-50 flex items-start justify-center pt-[15vh]", className), children: [
     /* @__PURE__ */ jsx(
       motion.button,
       {
@@ -306,7 +313,7 @@ function DocSearch({
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        className: "fixed inset-0 bg-black/60 backdrop-blur-md",
+        className: "fixed inset-0 bg-background/80 backdrop-blur-md",
         onClick: onClose
       }
     ),
@@ -318,16 +325,16 @@ function DocSearch({
         animate: { opacity: 1, scale: 1, y: 0 },
         exit: { opacity: 0, scale: 0.95, y: -20 },
         transition: { type: "spring", damping: 25, stiffness: 250 },
-        className: "relative z-10 w-full max-w-xl overflow-hidden rounded-2xl border border-white/10 bg-card/40 backdrop-blur-3xl shadow-2xl ring-1 ring-white/5",
+        className: "relative z-10 w-full max-w-xl overflow-hidden rounded-2xl border border-border/60 bg-card/40 backdrop-blur-3xl shadow-2xl ring-1 ring-border/40",
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": `${dialogId}-title`,
         onKeyDown: handleKeyDown,
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-white/10 px-5 py-4 bg-white/5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-border/60 px-5 py-4 bg-foreground/5", children: [
             /* @__PURE__ */ jsx("h2", { id: `${dialogId}-title`, className: "sr-only", children: "Search documentation" }),
-            /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 shrink-0 text-white/40", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", clipRule: "evenodd" }) }),
+            /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 shrink-0 text-foreground/40", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", clipRule: "evenodd" }) }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -339,10 +346,10 @@ function DocSearch({
                 "aria-label": "Search documentation",
                 "aria-controls": `${dialogId}-results`,
                 "aria-activedescendant": activeResultId,
-                className: "flex-1 bg-transparent text-sm text-white placeholder-white/30 outline-none"
+                className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-0"
               }
             ),
-            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-white/10 bg-white/5 px-1.5 py-0.5 text-[11px] text-white/30 font-medium", children: "ESC" })
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border/60 bg-foreground/5 px-1.5 py-0.5 text-[11px] text-foreground/30 font-medium", children: "ESC" })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -358,7 +365,7 @@ function DocSearch({
                       initial: { opacity: 0 },
                       animate: { opacity: 1 },
                       exit: { opacity: 0 },
-                      className: "flex flex-col items-center py-10 text-center text-white/30",
+                      className: "flex flex-col items-center py-10 text-center text-foreground/30",
                       children: [
                         /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "mb-3 h-10 w-10 opacity-50", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [
                           /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8", strokeWidth: "1.5" }),
@@ -379,7 +386,7 @@ function DocSearch({
                       initial: { opacity: 0 },
                       animate: { opacity: 1 },
                       exit: { opacity: 0 },
-                      className: "py-8 text-center text-sm text-white/30",
+                      className: "py-8 text-center text-sm text-foreground/30",
                       children: "Start typing to search\u2026"
                     }
                   )
@@ -396,7 +403,10 @@ function DocSearch({
                     "aria-selected": idx === activeIndex,
                     onMouseEnter: () => setActiveIndex(idx),
                     onClick: () => onSelect(result),
-                    className: `group flex w-full flex-col gap-1 rounded-xl px-4 py-3 text-left transition-colors relative my-0.5 ${idx === activeIndex ? "bg-primary/15 text-white ring-1 ring-primary/30" : "text-white/70 hover:bg-white/5"}`,
+                    className: cn(
+                      "group relative my-0.5 flex w-full flex-col gap-1 rounded-xl px-4 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                      idx === activeIndex ? "bg-primary/15 text-foreground ring-1 ring-primary/30" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    ),
                     children: [
                       idx === activeIndex && /* @__PURE__ */ jsx(
                         motion.div,
@@ -410,8 +420,8 @@ function DocSearch({
                         /* @__PURE__ */ jsx("span", { className: "rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: result.sectionTitle }),
                         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: result.pageTitle })
                       ] }),
-                      /* @__PURE__ */ jsx("p", { className: "relative z-10 truncate text-xs text-white/40", children: highlightMatch(result.highlight, query) }),
-                      result.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative z-10 flex gap-1 mt-1", children: result.tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx("span", { className: "rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-white/30 border border-white/5", children: tag }, tag)) })
+                      /* @__PURE__ */ jsx("p", { className: "relative z-10 truncate text-xs text-foreground/40", children: highlightMatch(result.highlight, query) }),
+                      result.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "relative z-10 flex gap-1 mt-1", children: result.tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx("span", { className: "rounded bg-foreground/5 px-1.5 py-0.5 text-[10px] text-foreground/30 border border-border/40", children: tag }, tag)) })
                     ]
                   },
                   result.pageId
@@ -419,19 +429,19 @@ function DocSearch({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-t border-white/10 px-5 py-2.5 text-[11px] text-white/30 bg-black/20", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-t border-border/60 px-5 py-2.5 text-[11px] text-foreground/30 bg-background/70", children: [
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-white/10 bg-white/5 px-1 pb-0.5 text-[10px]", children: "\u2191" }),
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border/60 bg-foreground/5 px-1 pb-0.5 text-[10px]", children: "\u2191" }),
               " ",
-              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-white/10 bg-white/5 px-1 pb-0.5 text-[10px]", children: "\u2193" }),
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border/60 bg-foreground/5 px-1 pb-0.5 text-[10px]", children: "\u2193" }),
               " navigate"
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-white/10 bg-white/5 px-1 pb-0.5 text-[10px]", children: "\u21B5" }),
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border/60 bg-foreground/5 px-1 pb-0.5 text-[10px]", children: "\u21B5" }),
               " select"
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-white/10 bg-white/5 px-1 pb-0.5 text-[10px]", children: "esc" }),
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border/60 bg-foreground/5 px-1 pb-0.5 text-[10px]", children: "esc" }),
               " close"
             ] })
           ] })
@@ -443,7 +453,8 @@ function DocSearch({
 function DocSidebar({
   sections,
   currentPageId,
-  onNavigate
+  onNavigate,
+  className
 }) {
   const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
   const toggle = useCallback((id) => {
@@ -467,7 +478,11 @@ function DocSidebar({
         {
           type: "button",
           onClick: () => toggle(section.id),
-          className: "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm font-medium transition-colors hover:bg-white/10",
+          "aria-expanded": hasContent ? isExpanded : void 0,
+          className: cn(
+            "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+            isExpanded ? "bg-muted text-foreground" : "text-foreground hover:bg-muted/70"
+          ),
           whileHover: { x: 2 },
           whileTap: { scale: 0.98 },
           children: [
@@ -503,7 +518,10 @@ function DocSidebar({
                 onClick: () => onNavigate(page, section),
                 whileHover: { x: 2 },
                 whileTap: { scale: 0.98 },
-                className: `flex w-full items-center gap-2 rounded-lg px-3 py-1.5 my-0.5 text-left text-sm transition-all outline-none ${currentPageId === page.id ? "bg-primary/10 text-primary font-semibold ring-1 ring-primary/20" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`,
+                className: cn(
+                  "my-0.5 flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                  currentPageId === page.id ? "bg-primary/10 font-semibold text-primary ring-1 ring-primary/20" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                ),
                 children: /* @__PURE__ */ jsx("span", { className: "truncate", children: page.title })
               },
               page.id
@@ -514,7 +532,7 @@ function DocSidebar({
       ) })
     ] }, section.id);
   };
-  return /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-1 py-4", children: [
+  return /* @__PURE__ */ jsxs("nav", { className: cn("flex flex-col gap-1 py-4", className), children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 pb-3 text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Documentation" }),
     topLevel.map((s) => renderSection(s, 0))
   ] });
@@ -526,7 +544,10 @@ function TocLink({ item, activeId, depth = 0 }) {
       motion.a,
       {
         href: `#${item.id}`,
-        className: `block truncate border-l-2 py-1 text-[13px] transition-all relative ${isActive ? "border-primary text-primary font-medium" : "border-transparent text-white/40 hover:text-white/80 hover:border-white/20"}`,
+        className: cn(
+          "block truncate border-l-2 py-1 text-[13px] transition-all relative",
+          isActive ? "border-primary text-primary font-medium" : "border-transparent text-foreground/40 hover:text-foreground/80 hover:border-border/80"
+        ),
         style: { paddingLeft: 12 + depth * 12 },
         whileHover: { x: 2 },
         whileTap: { scale: 0.98 },
@@ -539,11 +560,12 @@ function TocLink({ item, activeId, depth = 0 }) {
 }
 function TableOfContents({
   toc,
-  activeId
+  activeId,
+  className
 }) {
   if (toc.length === 0) return null;
-  return /* @__PURE__ */ jsxs("nav", { className: "sticky top-24", children: [
-    /* @__PURE__ */ jsx("h4", { className: "mb-3 text-xs font-semibold uppercase tracking-widest text-white/40", children: "On this page" }),
+  return /* @__PURE__ */ jsxs("nav", { className: cn("sticky top-24", className), children: [
+    /* @__PURE__ */ jsx("h4", { className: "mb-3 text-xs font-semibold uppercase tracking-widest text-foreground/40", children: "On this page" }),
     /* @__PURE__ */ jsx(motion.div, { className: "flex flex-col relative", layoutRoot: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: toc.map((item) => /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, children: /* @__PURE__ */ jsx(TocLink, { item, activeId }) }, item.id)) }) })
   ] });
 }
@@ -554,10 +576,11 @@ function DocsLayout({
   breadcrumbs,
   currentPageId,
   onNavigate,
-  children
+  children,
+  className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen bg-[#090a0f] text-white", children: [
-    /* @__PURE__ */ jsx("aside", { className: "sticky top-0 hidden h-screen w-[260px] shrink-0 overflow-y-auto border-r border-white/5 bg-[#0b0c12] lg:block", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-screen bg-background text-foreground", className), children: [
+    /* @__PURE__ */ jsx("aside", { className: "sticky top-0 hidden h-screen w-[260px] shrink-0 overflow-y-auto border-r border-border bg-card lg:block", children: /* @__PURE__ */ jsx(
       DocSidebar,
       {
         sections,
@@ -604,7 +627,8 @@ function DocsLayout({
 }
 function EditButton({
   pageSlug,
-  editUrl
+  editUrl,
+  className
 }) {
   if (!editUrl) return null;
   const href = `${editUrl.replace(/\/$/, "")}/${pageSlug}.mdx`;
@@ -614,7 +638,10 @@ function EditButton({
       href,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "inline-flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-white/40 transition-colors hover:border-white/20 hover:text-white/60",
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-lg border border-border/60 px-3 py-1.5 text-xs text-foreground/40 transition-colors hover:border-border/80 hover:text-foreground/60",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "h-3.5 w-3.5", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M11.5 1.5l3 3-9 9H2.5v-3l9-9z", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
         "Edit this page"
@@ -624,18 +651,19 @@ function EditButton({
 }
 function PageNavigation({
   prev,
-  next
+  next,
+  className
 }) {
   if (!prev && !next) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-12 flex items-stretch gap-4 border-t border-white/10 pt-8", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex items-stretch gap-4 border-t border-border/60 pt-8", className), children: [
     prev ? /* @__PURE__ */ jsxs(
       "a",
       {
         href: prev.href,
-        className: "group flex flex-1 flex-col rounded-xl border border-white/10 p-4 transition-all hover:border-primary/40 hover:bg-white/5",
+        className: "group flex flex-1 flex-col rounded-xl border border-border/60 p-4 transition-all hover:border-primary/40 hover:bg-foreground/5",
         children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-white/40 group-hover:text-primary transition-colors", children: "\u2190 Previous" }),
-          /* @__PURE__ */ jsx("span", { className: "mt-1 text-sm font-medium text-white/80 group-hover:text-white transition-colors truncate", children: prev.title })
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/40 group-hover:text-primary transition-colors", children: "\u2190 Previous" }),
+          /* @__PURE__ */ jsx("span", { className: "mt-1 text-sm font-medium text-foreground/80 group-hover:text-foreground transition-colors truncate", children: prev.title })
         ]
       }
     ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
@@ -643,10 +671,10 @@ function PageNavigation({
       "a",
       {
         href: next.href,
-        className: "group flex flex-1 flex-col items-end rounded-xl border border-white/10 p-4 text-right transition-all hover:border-primary/40 hover:bg-white/5",
+        className: "group flex flex-1 flex-col items-end rounded-xl border border-border/60 p-4 text-right transition-all hover:border-primary/40 hover:bg-foreground/5",
         children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-white/40 group-hover:text-primary transition-colors", children: "Next \u2192" }),
-          /* @__PURE__ */ jsx("span", { className: "mt-1 text-sm font-medium text-white/80 group-hover:text-white transition-colors truncate", children: next.title })
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/40 group-hover:text-primary transition-colors", children: "Next \u2192" }),
+          /* @__PURE__ */ jsx("span", { className: "mt-1 text-sm font-medium text-foreground/80 group-hover:text-foreground transition-colors truncate", children: next.title })
         ]
       }
     ) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
@@ -655,10 +683,12 @@ function PageNavigation({
 function VersionSelector({
   versions,
   current,
-  onSelect
+  onSelect,
+  className
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef(null);
+  const menuId = useId();
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (ref.current && e.target instanceof Node && !ref.current.contains(e.target)) {
@@ -669,39 +699,73 @@ function VersionSelector({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   if (versions.length <= 1) return null;
-  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: () => setIsOpen(!isOpen),
-        className: "flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-white/60 transition-colors hover:border-primary/30 hover:text-white/80",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": menuId,
+        className: cn(
+          "flex items-center gap-1.5 rounded-lg border border-border bg-card/60 px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+          isOpen && "border-primary/30 text-foreground"
+        ),
         children: [
           /* @__PURE__ */ jsxs("span", { children: [
             "v",
             current
           ] }),
-          /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: `h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "2", fill: "none" }) })
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: cn("h-3 w-3 transition-transform", isOpen && "rotate-180"),
+              viewBox: "0 0 16 16",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "2", fill: "none" })
+            }
+          )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-20 mt-1 min-w-[120px] overflow-hidden rounded-lg border border-white/10 bg-[#111218] shadow-xl", children: versions.map((v) => /* @__PURE__ */ jsxs(
-      "button",
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
       {
-        type: "button",
-        onClick: () => {
-          onSelect(v);
-          setIsOpen(false);
+        id: menuId,
+        role: "listbox",
+        className: "absolute right-0 top-full z-20 mt-1 min-w-[120px] overflow-hidden rounded-lg border border-border bg-popover shadow-xl",
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setIsOpen(false);
+          }
         },
-        className: `flex w-full items-center px-3 py-2 text-xs transition-colors ${v === current ? "bg-primary/15 text-primary font-medium" : "text-white/60 hover:bg-white/5 hover:text-white/80"}`,
-        children: [
-          "v",
-          v,
-          v === current && /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px]", children: "\u2713" })
-        ]
-      },
-      v
-    )) })
+        children: versions.map((v) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": v === current,
+            onClick: () => {
+              onSelect(v);
+              setIsOpen(false);
+            },
+            className: cn(
+              "flex w-full items-center px-3 py-2 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40",
+              v === current ? "bg-primary/15 font-medium text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            ),
+            children: [
+              "v",
+              v,
+              v === current && /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px]", children: "\u2713" })
+            ]
+          },
+          v
+        ))
+      }
+    )
   ] });
 }
 function useDocSearch(searchFn, debounceMs = 250) {
@@ -898,7 +962,8 @@ function useTableOfContents(mdxContent) {
 }
 function DocSearchPage({
   tree,
-  onSelectPage
+  onSelectPage,
+  className
 }) {
   const sections = useMemo(() => tree ?? [], [tree]);
   const flatPages = useMemo(() => sections.flatMap((s) => s.pages ?? []), [sections]);
@@ -911,15 +976,15 @@ function DocSearchPage({
   );
   const { results, isSearching, query, setQuery } = useDocSearch(searchFn);
   if (tree === void 0) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-8 h-12 animate-pulse rounded-xl bg-white/5" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: 5 }, (_, index) => `doc-search-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-xl bg-white/5" }, key)) })
+    return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-background px-6 py-16", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-8 h-12 animate-pulse rounded-xl bg-foreground/5" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: 5 }, (_, index) => `doc-search-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-xl bg-foreground/5" }, key)) })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl px-6 py-16", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-background text-foreground", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl px-6 py-16", children: [
     /* @__PURE__ */ jsx("h1", { className: "mb-8 text-2xl font-bold", children: "Search Documentation" }),
     /* @__PURE__ */ jsxs("div", { className: "relative mb-8", children: [
-      /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-white/30", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", clipRule: "evenodd" }) }),
+      /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-foreground/30", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", clipRule: "evenodd" }) }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -927,10 +992,11 @@ function DocSearchPage({
           value: query,
           onChange: (e) => setQuery(e.target.value),
           placeholder: "Type to search\u2026",
-          className: "w-full rounded-xl border border-white/10 bg-white/5 py-3.5 pl-12 pr-4 text-sm text-white placeholder-white/30 outline-none transition-colors focus:border-primary/40 focus:ring-1 focus:ring-ring/20"
+          "aria-label": "Search documentation",
+          className: "w-full rounded-xl border border-border bg-card/60 py-3.5 pl-12 pr-4 text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
         }
       ),
-      isSearching && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white/10 border-t-primary" }) })
+      isSearching && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-border/60 border-t-primary" }) })
     ] }),
     results.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: results.map((result) => {
       const section = sections.find((s) => s.slug === result.sectionSlug);
@@ -942,18 +1008,18 @@ function DocSearchPage({
           onClick: () => {
             if (page && section && onSelectPage) onSelectPage(page, section);
           },
-          className: "flex w-full flex-col gap-1.5 rounded-xl border border-white/5 bg-white/[0.02] p-4 text-left transition-all hover:border-primary/20 hover:bg-white/[0.05]",
+          className: "flex w-full flex-col gap-1.5 rounded-xl border border-border bg-card/40 p-4 text-left transition-all hover:border-primary/20 hover:bg-card",
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx("span", { className: "rounded bg-primary/20 px-2 py-0.5 text-[10px] font-medium text-primary", children: result.sectionTitle }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white/90", children: result.pageTitle }),
-              /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs tabular-nums text-white/20", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground/90", children: result.pageTitle }),
+              /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs tabular-nums text-foreground/20", children: [
                 page?.readingTime ?? 0,
                 " min"
               ] })
             ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-white/40", children: highlightMatch(result.highlight, query) }),
-            result.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 mt-1", children: result.tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsx("span", { className: "rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-white/30", children: tag }, tag)) })
+            /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-foreground/40", children: highlightMatch(result.highlight, query) }),
+            result.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 mt-1", children: result.tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: tag }, tag)) })
           ]
         },
         result.pageId
@@ -961,12 +1027,12 @@ function DocSearchPage({
     }) }),
     query.trim() && results.length === 0 && !isSearching && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-16 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-4 text-5xl opacity-30", children: "\u{1F50D}" }),
-      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-medium text-white/60", children: "No results found" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-white/30", children: "Try different keywords or check your spelling." })
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-medium text-foreground/60", children: "No results found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/30", children: "Try different keywords or check your spelling." })
     ] }),
     !query.trim() && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-16 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-4 text-5xl opacity-20", children: "\u{1F4D6}" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-white/30", children: "Start typing to search across all documentation" })
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/30", children: "Start typing to search across all documentation" })
     ] })
   ] }) });
 }
@@ -997,7 +1063,8 @@ function initialPageForm() {
 function DocsAdminPage({
   tree,
   allPages,
-  admin
+  admin,
+  className
 }) {
   const sections = useMemo(() => tree ?? [], [tree]);
   const [selectedSectionId, setSelectedSectionId] = useState(null);
@@ -1014,20 +1081,20 @@ function DocsAdminPage({
   const canCreateSection = sectionForm.title.trim().length > 0 && sectionForm.slug.trim().length > 0;
   const canCreatePage = pageForm.title.trim().length > 0 && pageForm.slug.trim().length > 0 && pageForm.content.trim().length > 0;
   if (tree === void 0) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-8 h-10 w-48 animate-pulse rounded bg-white/5" }),
+    return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-background px-6 py-12", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-8 h-10 w-48 animate-pulse rounded bg-muted/60" }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-96 animate-pulse rounded-xl bg-white/5" }),
-        /* @__PURE__ */ jsx("div", { className: "h-96 animate-pulse rounded-xl bg-white/5" })
+        /* @__PURE__ */ jsx("div", { className: "h-96 animate-pulse rounded-xl bg-muted/60" }),
+        /* @__PURE__ */ jsx("div", { className: "h-96 animate-pulse rounded-xl bg-muted/60" })
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6 py-12", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-background text-foreground", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6 py-12", children: [
     /* @__PURE__ */ jsx("h1", { className: "mb-8 text-2xl font-bold", children: "Docs Admin" }),
     /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/8 bg-white/[0.02] p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card/40 p-5", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-white/80", children: "Sections" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Sections" }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -1038,9 +1105,9 @@ function DocsAdminPage({
             }
           )
         ] }),
-        showSectionForm && /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2 rounded-lg border border-white/10 bg-white/5 p-4", children: [
+        showSectionForm && /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2 rounded-lg border border-border bg-card/60 p-4", children: [
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-section-title", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Title" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Title" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1049,12 +1116,12 @@ function DocsAdminPage({
                 placeholder: "Getting Started",
                 value: sectionForm.title,
                 onChange: (e) => setSectionForm({ ...sectionForm, title: e.target.value }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40"
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-section-slug", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Slug" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Slug" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1063,12 +1130,12 @@ function DocsAdminPage({
                 placeholder: "getting-started",
                 value: sectionForm.slug,
                 onChange: (e) => setSectionForm({ ...sectionForm, slug: e.target.value }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40"
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-section-icon", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Icon" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Icon" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1077,7 +1144,7 @@ function DocsAdminPage({
                 placeholder: "\u{1F4DA}",
                 value: sectionForm.icon,
                 onChange: (e) => setSectionForm({ ...sectionForm, icon: e.target.value }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40"
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
               }
             )
           ] }),
@@ -1087,7 +1154,7 @@ function DocsAdminPage({
               className: "block space-y-1",
               htmlFor: "docs-admin-section-description",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Description" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Description" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -1099,14 +1166,14 @@ function DocsAdminPage({
                       ...sectionForm,
                       description: e.target.value
                     }),
-                    className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40"
+                    className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
                   }
                 )
               ]
             }
           ),
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-section-access", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Access" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Access" }),
             /* @__PURE__ */ jsxs(
               "select",
               {
@@ -1116,7 +1183,7 @@ function DocsAdminPage({
                   ...sectionForm,
                   access: toDocAccess(e.target.value)
                 }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40",
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20",
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "public", children: "Public" }),
                   /* @__PURE__ */ jsx("option", { value: "team", children: "Team" }),
@@ -1150,18 +1217,21 @@ function DocsAdminPage({
               {
                 type: "button",
                 onClick: () => setShowSectionForm(false),
-                className: "rounded-lg border border-white/10 px-4 py-2 text-xs hover:bg-white/5",
+                className: "rounded-lg border border-border px-4 py-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
                 children: "Cancel"
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          sections.length === 0 && /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-white/30", children: "No sections yet" }),
+          sections.length === 0 && /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No sections yet" }),
           sections.map((section) => /* @__PURE__ */ jsxs(
             "div",
             {
-              className: `group flex items-center gap-2 rounded-lg px-3 py-2.5 transition-colors cursor-pointer ${selectedSectionId === section.id ? "bg-primary/15 text-primary" : "hover:bg-white/5 text-white/70"}`,
+              className: cn(
+                "group flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2.5 transition-colors",
+                selectedSectionId === section.id ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
               children: [
                 /* @__PURE__ */ jsxs(
                   "button",
@@ -1186,7 +1256,7 @@ function DocsAdminPage({
                         admin.deleteSection(section.id);
                       }
                     },
-                    className: "rounded p-1 text-white/20 opacity-0 transition-opacity group-hover:opacity-100 hover:text-destructive",
+                    className: "rounded p-1 text-muted-foreground/60 opacity-0 transition-opacity group-hover:opacity-100 hover:text-destructive",
                     "aria-label": `Delete section ${section.title}`,
                     title: "Delete section",
                     children: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "h-3.5 w-3.5", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -1201,9 +1271,9 @@ function DocsAdminPage({
           ))
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/8 bg-white/[0.02] p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card/40 p-5", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-white/80", children: selectedSection ? `Pages \u2014 ${selectedSection.title}` : "Pages" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: selectedSection ? `Pages \u2014 ${selectedSection.title}` : "Pages" }),
           selectedSection && /* @__PURE__ */ jsx(
             "button",
             {
@@ -1214,10 +1284,10 @@ function DocsAdminPage({
             }
           )
         ] }),
-        !selectedSection && /* @__PURE__ */ jsx("p", { className: "py-16 text-center text-sm text-white/30", children: "Select a section to manage pages" }),
-        showPageForm && selectedSection && /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2 rounded-lg border border-white/10 bg-white/5 p-4", children: [
+        !selectedSection && /* @__PURE__ */ jsx("p", { className: "py-16 text-center text-sm text-muted-foreground", children: "Select a section to manage pages" }),
+        showPageForm && selectedSection && /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2 rounded-lg border border-border bg-card/60 p-4", children: [
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-page-title", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Title" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Title" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1226,12 +1296,12 @@ function DocsAdminPage({
                 placeholder: "Install the package",
                 value: pageForm.title,
                 onChange: (e) => setPageForm({ ...pageForm, title: e.target.value }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40"
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-page-slug", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Slug" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Slug" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1240,12 +1310,12 @@ function DocsAdminPage({
                 placeholder: "install",
                 value: pageForm.slug,
                 onChange: (e) => setPageForm({ ...pageForm, slug: e.target.value }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40"
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-page-content", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Content (MDX)" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Content (MDX)" }),
             /* @__PURE__ */ jsx(
               "textarea",
               {
@@ -1254,12 +1324,12 @@ function DocsAdminPage({
                 value: pageForm.content,
                 onChange: (e) => setPageForm({ ...pageForm, content: e.target.value }),
                 rows: 5,
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40 resize-y"
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20 resize-y"
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-page-tags", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Tags" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Tags" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1268,12 +1338,12 @@ function DocsAdminPage({
                 placeholder: "setup, install",
                 value: pageForm.tags,
                 onChange: (e) => setPageForm({ ...pageForm, tags: e.target.value }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40"
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20"
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "block space-y-1", htmlFor: "docs-admin-page-access", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Access" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Access" }),
             /* @__PURE__ */ jsxs(
               "select",
               {
@@ -1283,7 +1353,7 @@ function DocsAdminPage({
                   ...pageForm,
                   access: toDocAccess(e.target.value)
                 }),
-                className: "w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm outline-none focus:border-primary/40",
+                className: "w-full rounded-lg border border-border bg-card/70 px-3 py-2 text-sm outline-none focus:border-primary/40 focus:ring-2 focus:ring-ring/20",
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "public", children: "Public" }),
                   /* @__PURE__ */ jsx("option", { value: "team", children: "Team" }),
@@ -1320,7 +1390,7 @@ function DocsAdminPage({
               {
                 type: "button",
                 onClick: () => setShowPageForm(false),
-                className: "rounded-lg border border-white/10 px-4 py-2 text-xs hover:bg-white/5",
+                className: "rounded-lg border border-border px-4 py-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
                 children: "Cancel"
               }
             )
@@ -1329,11 +1399,11 @@ function DocsAdminPage({
         selectedSection && sectionPages.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sectionPages.map((page) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "group flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-white/5",
+            className: "group flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-muted",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-white/80 truncate", children: page.title }),
-                /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-white/30", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground truncate", children: page.title }),
+                /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground", children: [
                   "/",
                   page.slug
                 ] })
@@ -1341,7 +1411,10 @@ function DocsAdminPage({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: `shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${page.status === "published" ? "bg-success/15 text-success" : page.status === "archived" ? "bg-white/5 text-white/30" : "bg-warning/15 text-warning"}`,
+                  className: cn(
+                    "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium",
+                    page.status === "published" ? "bg-success/15 text-success" : page.status === "archived" ? "bg-muted text-muted-foreground" : "bg-warning/15 text-warning"
+                  ),
                   children: page.status
                 }
               ),
@@ -1373,7 +1446,7 @@ function DocsAdminPage({
                     onClick: () => {
                       if (confirm(`Delete page "${page.title}"?`)) admin.deletePage(page.id);
                     },
-                    className: "rounded p-1 text-white/20 hover:text-destructive",
+                    className: "rounded p-1 text-muted-foreground/60 hover:text-destructive",
                     "aria-label": `Delete page ${page.title}`,
                     title: "Delete",
                     children: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "h-3.5 w-3.5", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -1387,14 +1460,15 @@ function DocsAdminPage({
           },
           page.id
         )) }),
-        selectedSection && sectionPages.length === 0 && !showPageForm && /* @__PURE__ */ jsx("p", { className: "py-12 text-center text-sm text-white/30", children: "No pages in this section" })
+        selectedSection && sectionPages.length === 0 && !showPageForm && /* @__PURE__ */ jsx("p", { className: "py-12 text-center text-sm text-muted-foreground", children: "No pages in this section" })
       ] })
     ] })
   ] }) });
 }
 function DocsIndexPage({
   tree,
-  onSelectPage
+  onSelectPage,
+  className
 }) {
   const docs = useDocs(tree);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -1417,33 +1491,43 @@ function DocsIndexPage({
     return () => document.removeEventListener("keydown", handler);
   }, []);
   if (docs.isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-10 h-10 w-64 animate-pulse rounded-lg bg-white/5" }),
-      /* @__PURE__ */ jsx("div", { className: "mb-8 h-12 w-full max-w-xl animate-pulse rounded-xl bg-white/5" }),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => `docs-index-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-36 animate-pulse rounded-xl bg-white/5" }, key)) })
+    return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-background px-6 py-16", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-10 h-10 w-64 animate-pulse rounded-lg bg-foreground/5" }),
+      /* @__PURE__ */ jsx("div", { className: "mb-8 h-12 w-full max-w-xl animate-pulse rounded-xl bg-foreground/5" }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => `docs-index-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-36 animate-pulse rounded-xl bg-foreground/5" }, key)) })
     ] }) });
   }
   if (docs.sections.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F4DA}" }),
-      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-white/80", children: "No documentation yet" }),
-      /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-white/40", children: "Create your first section and pages to get started with your documentation." })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-h-screen flex-col items-center justify-center bg-background text-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F4DA}" }),
+          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-foreground/80", children: "No documentation yet" }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-foreground/40", children: "Create your first section and pages to get started with your documentation." })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[#090a0f] text-white", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6 py-16", children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-2 text-4xl font-bold tracking-tight", children: "Documentation" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-10 text-lg text-white/50", children: "Browse guides, API references, and tutorials." }),
+      /* @__PURE__ */ jsx("p", { className: "mb-10 text-lg text-foreground/50", children: "Browse guides, API references, and tutorials." }),
       /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           onClick: () => setIsSearchOpen(true),
-          className: "mb-12 flex w-full max-w-xl items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-5 py-3.5 text-left text-sm text-white/30 transition-colors hover:border-white/20 hover:bg-white/[0.07]",
+          "aria-haspopup": "dialog",
+          className: "mb-12 flex w-full max-w-xl items-center gap-3 rounded-xl border border-border bg-card/60 px-5 py-3.5 text-left text-sm text-muted-foreground transition-colors hover:border-primary/20 hover:bg-card",
           children: [
             /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "h-4.5 w-4.5 shrink-0", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", clipRule: "evenodd" }) }),
             /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Search documentation\u2026" }),
-            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-white/10 bg-white/5 px-2 py-0.5 text-[11px]", children: "\u2318K" })
+            /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border/60 bg-foreground/5 px-2 py-0.5 text-[11px]", children: "\u2318K" })
           ]
         }
       ),
@@ -1455,12 +1539,12 @@ function DocsIndexPage({
             const firstPage = section.pages?.[0];
             if (firstPage && onSelectPage) onSelectPage(firstPage, section);
           },
-          className: "group flex flex-col rounded-xl border border-white/8 bg-white/[0.03] p-5 text-left transition-all hover:border-primary/30 hover:bg-white/[0.06] hover:shadow-lg hover:shadow-primary/5",
+          className: "group flex flex-col rounded-xl border border-border bg-card/40 p-5 text-left transition-all hover:border-primary/30 hover:bg-card hover:shadow-lg hover:shadow-primary/5",
           children: [
             section.icon && /* @__PURE__ */ jsx("span", { className: "mb-3 text-2xl", children: section.icon }),
-            /* @__PURE__ */ jsx("h3", { className: "mb-1.5 text-base font-semibold text-white/90 group-hover:text-white transition-colors", children: section.title }),
-            section.description && /* @__PURE__ */ jsx("p", { className: "mb-3 flex-1 text-sm leading-relaxed text-white/40", children: section.description }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-xs text-white/25", children: /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "mb-1.5 text-base font-semibold text-foreground/90 group-hover:text-foreground transition-colors", children: section.title }),
+            section.description && /* @__PURE__ */ jsx("p", { className: "mb-3 flex-1 text-sm leading-relaxed text-foreground/40", children: section.description }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-xs text-foreground/25", children: /* @__PURE__ */ jsxs("span", { children: [
               section.pageCount ?? 0,
               " pages"
             ] }) })
@@ -1469,7 +1553,7 @@ function DocsIndexPage({
         section.id
       )) }),
       docs.flatPages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-16", children: [
-        /* @__PURE__ */ jsx("h2", { className: "mb-6 text-lg font-semibold text-white/80", children: "Recently updated" }),
+        /* @__PURE__ */ jsx("h2", { className: "mb-6 text-lg font-semibold text-foreground/80", children: "Recently updated" }),
         /* @__PURE__ */ jsx("div", { className: "space-y-2", children: docs.flatPages.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()).slice(0, 8).map((page) => {
           const section = docs.sections.find((s) => s.id === page.sectionId);
           return /* @__PURE__ */ jsxs(
@@ -1477,13 +1561,13 @@ function DocsIndexPage({
             {
               type: "button",
               onClick: () => section && onSelectPage?.(page, section),
-              className: "flex w-full items-center gap-4 rounded-lg px-4 py-3 text-left transition-colors hover:bg-white/5",
+              className: "flex w-full items-center gap-4 rounded-lg px-4 py-3 text-left transition-colors hover:bg-muted",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-white/80 truncate", children: page.title }),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-white/30 truncate", children: section?.title })
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground/80 truncate", children: page.title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground/30 truncate", children: section?.title })
                 ] }),
-                /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs tabular-nums text-white/20", children: [
+                /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs tabular-nums text-foreground/20", children: [
                   page.readingTime,
                   " min read"
                 ] })
@@ -1518,7 +1602,8 @@ function DocViewPage({
   page,
   editPageUrl,
   onNavigate,
-  onIncrementView
+  onIncrementView,
+  className
 }) {
   const docs = useDocs(tree);
   const { toc, activeId } = useTableOfContents(page?.content);
@@ -1542,21 +1627,30 @@ function DocViewPage({
     };
   }, [page, docs.flatPages, docs.sections]);
   if (docs.isLoading || page === void 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen bg-[#090a0f]", children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden w-[260px] shrink-0 border-r border-white/5 bg-[#0b0c12] lg:block", children: /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 8 }, (_, index) => `doc-view-sidebar-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-8 animate-pulse rounded-lg bg-white/5" }, key)) }) }),
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-screen bg-background", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "hidden w-[260px] shrink-0 border-r border-border bg-card lg:block", children: /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 8 }, (_, index) => `doc-view-sidebar-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-8 animate-pulse rounded-lg bg-foreground/5" }, key)) }) }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 px-10 py-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-5 w-48 animate-pulse rounded bg-white/5" }),
-        /* @__PURE__ */ jsx("div", { className: "h-10 w-96 animate-pulse rounded bg-white/5" }),
-        /* @__PURE__ */ jsx("div", { className: "mt-8 space-y-3", children: Array.from({ length: 12 }, (_, index) => `doc-view-body-skeleton-${index}`).map((key, index) => /* @__PURE__ */ jsx("div", { className: "h-4 animate-pulse rounded bg-white/5", style: { width: `${60 + index * 3}%` } }, key)) })
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-48 animate-pulse rounded bg-foreground/5" }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 w-96 animate-pulse rounded bg-foreground/5" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-8 space-y-3", children: Array.from({ length: 12 }, (_, index) => `doc-view-body-skeleton-${index}`).map((key, index) => /* @__PURE__ */ jsx("div", { className: "h-4 animate-pulse rounded bg-foreground/5", style: { width: `${60 + index * 3}%` } }, key)) })
       ] }) })
     ] });
   }
   if (!page) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F50D}" }),
-      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-white/80", children: "Page not found" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-white/40", children: "The documentation page you're looking for doesn't exist." })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-h-screen flex-col items-center justify-center bg-background text-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F50D}" }),
+          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-foreground/80", children: "Page not found" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/40", children: "The documentation page you're looking for doesn't exist." })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     DocsLayout,
@@ -1568,10 +1662,11 @@ function DocViewPage({
       breadcrumbs,
       currentPageId: page.id,
       onNavigate,
+      className,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-3 text-3xl font-bold tracking-tight", children: page.title }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-white/40", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-foreground/40", children: [
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
               page.author.avatar ? /* @__PURE__ */ jsx("img", { src: page.author.avatar, alt: "", className: "h-5 w-5 rounded-full" }) : /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-primary/20 text-[10px] text-primary", children: page.author.name[0] }),
               page.author.name
@@ -1589,12 +1684,12 @@ function DocViewPage({
               " views"
             ] })
           ] }),
-          page.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: page.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "rounded-full bg-white/5 px-2.5 py-0.5 text-xs text-white/40", children: tag }, tag)) })
+          page.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: page.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "rounded-full bg-foreground/5 px-2.5 py-0.5 text-xs text-foreground/40", children: tag }, tag)) })
         ] }),
         /* @__PURE__ */ jsx(DocPage, { page }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-between border-t border-white/5 pt-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-between border-t border-border/40 pt-6", children: [
           /* @__PURE__ */ jsx(EditButton, { pageSlug: page.slug, editUrl: editPageUrl }),
-          page.version && /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/25", children: [
+          page.version && /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground/25", children: [
             "v",
             page.version
           ] })