@geenius/docs 0.5.0 → 0.9.0

package/packages/solidjs/dist/index.d.ts

@@ -1,16 +1,17 @@
-import { BreadcrumbItem, DocPage as DocPage$1, SearchResult, DocSection, TocItem, DocsConfig } from '@geenius/docs-shared';
-export { BreadcrumbItem, DocAccess, DocPage as DocPageType, DocSection, DocStatus, DocsConfig, SearchResult, TocItem } from '@geenius/docs-shared';
+import { BreadcrumbItem, DocPage as DocPage$1, SearchResult, DocSection, TocItem, DocsConfig } from '@geenius/docs/shared';
+export { BreadcrumbItem, DocAccess, DocPage as DocPageType, DocSection, DocStatus, DocsConfig, SearchResult, TocItem } from '@geenius/docs/shared';
 import { JSX, Accessor } from 'solid-js';
 
 /**
  * @module solidjsBreadcrumbs
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the SolidJS docs breadcrumb trail using shared route
  * metadata and the Tailwind-styled docs presentation contract.
  */
 
 interface BreadcrumbsProps {
     items: BreadcrumbItem[];
+    class?: string;
 }
 /**
  * Renders the current docs breadcrumb hierarchy.
@@ -22,7 +23,7 @@ declare function Breadcrumbs(props: BreadcrumbsProps): JSX.Element | null;
 
 /**
  * @module solidDocPage
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders a docs page body with safe Markdown semantics, heading
  * anchors, and package-consistent typography. The component deliberately avoids
  * raw HTML injection so authored docs content stays within the Markdown runtime.
@@ -30,6 +31,7 @@ declare function Breadcrumbs(props: BreadcrumbsProps): JSX.Element | null;
 
 interface DocPageProps {
     page: DocPage$1;
+    class?: string;
 }
 /**
  * Renders a docs page body using safe Markdown rendering.
@@ -41,7 +43,7 @@ declare function DocPage(props: DocPageProps): JSX.Element;
 
 /**
  * @module solidjsDocSearch
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Provides the SolidJS command-palette style docs search modal
  * with keyboard navigation, animated presentation, and highlighted matches.
  */
@@ -53,6 +55,7 @@ interface DocSearchProps {
     onSelect: (result: SearchResult) => void;
     isOpen: boolean;
     onClose: () => void;
+    class?: string;
 }
 /**
  * Renders the SolidJS docs search modal and result list.
@@ -62,20 +65,40 @@ interface DocSearchProps {
  */
 declare function DocSearch(props: DocSearchProps): JSX.Element | null;
 
+/**
+ * @module docsSolidTypes
+ * @package @geenius/docs/solidjs
+ * @description Declares the SolidJS-specific supporting types that keep the
+ * exported docs components aligned on shared section/page shapes and a common
+ * optional `class` extension point.
+ */
+
+/**
+ * Optional `class` contract shared by SolidJS docs exports.
+ */
+interface WithClassName {
+    class?: string;
+}
+/**
+ * Shared docs section shape used by layout, navigation, and page components.
+ */
+type DocsSectionWithPages = DocSection & {
+    pages?: DocPage$1[];
+    pageCount?: number;
+};
+
 /**
  * @module solidjsDocSidebar
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the hierarchical SolidJS docs sidebar with expandable
  * sections, nested pages, and the active-page highlight state.
  */
 
 interface DocSidebarProps {
-    sections: (DocSection & {
-        pages?: DocPage$1[];
-        pageCount?: number;
-    })[];
+    sections: DocsSectionWithPages[];
     currentPageId?: string;
     onNavigate: (page: DocPage$1, section: DocSection) => void;
+    class?: string;
 }
 /**
  * Renders the docs section tree for sidebar navigation.
@@ -87,15 +110,13 @@ declare function DocSidebar(props: DocSidebarProps): JSX.Element;
 
 /**
  * @module solidjsDocsLayout
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Composes the SolidJS docs chrome, including sidebar,
  * breadcrumbs, main content region, and table of contents rail.
  */
 
 interface DocsLayoutProps {
-    sections: (DocSection & {
-        pages?: DocPage$1[];
-    })[];
+    sections: DocsSectionWithPages[];
     currentPage?: DocPage$1;
     toc?: TocItem[];
     activeHeadingId?: string;
@@ -103,6 +124,7 @@ interface DocsLayoutProps {
     currentPageId?: string;
     onNavigate: (page: DocPage$1, section: DocSection) => void;
     children: JSX.Element;
+    class?: string;
 }
 /**
  * Renders the shared SolidJS docs page shell.
@@ -114,7 +136,7 @@ declare function DocsLayout(props: DocsLayoutProps): JSX.Element;
 
 /**
  * @module solidjsEditButton
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the external edit-source affordance for the SolidJS
  * docs variant when an upstream repository edit URL is configured.
  */
@@ -122,6 +144,7 @@ declare function DocsLayout(props: DocsLayoutProps): JSX.Element;
 interface EditButtonProps {
     pageSlug: string;
     editUrl?: string;
+    class?: string;
 }
 /**
  * Renders an external link for editing the current docs page source.
@@ -133,7 +156,7 @@ declare function EditButton(props: EditButtonProps): JSX.Element | null;
 
 /**
  * @module solidjsPageNavigation
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders previous and next page affordances for the SolidJS
  * docs variant so readers can move linearly through the content graph.
  */
@@ -147,6 +170,7 @@ interface PageNavigationProps {
         title: string;
         href: string;
     };
+    class?: string;
 }
 /**
  * Renders previous and next page links for the current docs page.
@@ -158,7 +182,7 @@ declare function PageNavigation(props: PageNavigationProps): JSX.Element | null;
 
 /**
  * @module solidjsTableOfContents
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the SolidJS docs table of contents with nested anchor
  * links and animated active-heading highlighting.
  */
@@ -166,6 +190,7 @@ declare function PageNavigation(props: PageNavigationProps): JSX.Element | null;
 interface TableOfContentsProps {
     toc: TocItem[];
     activeId?: string;
+    class?: string;
 }
 /**
  * Renders the page-local table of contents rail.
@@ -177,7 +202,7 @@ declare function TableOfContents(props: TableOfContentsProps): JSX.Element | nul
 
 /**
  * @module solidjsVersionSelector
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Presents the SolidJS docs version switcher for packages that
  * expose multiple documentation versions in the same surface.
  */
@@ -186,6 +211,7 @@ interface VersionSelectorProps {
     versions: string[];
     current: string;
     onSelect: (version: string) => void;
+    class?: string;
 }
 /**
  * Renders a version picker when more than one docs version is available.
@@ -197,7 +223,7 @@ declare function VersionSelector(props: VersionSelectorProps): JSX.Element | nul
 
 /**
  * @module solidjsDocSearchPage
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the dedicated SolidJS docs search page, including
  * query input, derived search results, and empty or loading states.
  */
@@ -208,6 +234,7 @@ interface DocSearchPageProps {
         pageCount: number;
     })[] | undefined>;
     onSelectPage?: (page: DocPage$1, section: DocSection) => void;
+    class?: string;
 }
 /**
  * Renders a full-page docs search experience for SolidJS consumers.
@@ -219,7 +246,7 @@ declare function DocSearchPage(props: DocSearchPageProps): JSX.Element;
 
 /**
  * @module solidjsCreateDocsAdmin
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Adapts caller-provided section and page mutations into a
  * stable SolidJS admin controller with normalized method signatures.
  */
@@ -281,7 +308,7 @@ declare function createDocsAdmin(mutations: {
 
 /**
  * @module solidjsDocsAdminPage
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the SolidJS docs administration surface for creating,
  * selecting, publishing, archiving, and deleting sections and pages.
  */
@@ -293,6 +320,7 @@ interface DocsAdminPageProps {
     })[] | undefined>;
     allPages?: DocPage$1[];
     admin: DocsAdminActions;
+    class?: string;
 }
 /**
  * Renders the docs administration dashboard for SolidJS consumers.
@@ -304,7 +332,7 @@ declare function DocsAdminPage(props: DocsAdminPageProps): JSX.Element;
 
 /**
  * @module solidjsDocsIndexPage
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the SolidJS docs landing page with section cards,
  * keyboard-accessible search launch, and empty or loading states.
  */
@@ -315,6 +343,7 @@ interface DocsIndexPageProps {
         pageCount: number;
     })[] | undefined>;
     onSelectPage?: (page: DocPage$1, section: DocSection) => void;
+    class?: string;
 }
 /**
  * Renders the root docs landing page for the SolidJS variant.
@@ -326,7 +355,7 @@ declare function DocsIndexPage(props: DocsIndexPageProps): JSX.Element;
 
 /**
  * @module solidjsDocViewPage
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Renders the main SolidJS docs reading experience, including
  * layout chrome, MDX content, table of contents, and sibling navigation.
  */
@@ -340,6 +369,7 @@ interface DocViewPageProps {
     editPageUrl?: string;
     onNavigate: (page: DocPage$1, section: DocSection) => void;
     onIncrementView?: (pageId: string) => void;
+    class?: string;
 }
 /**
  * Renders the docs reader view for a selected SolidJS page.
@@ -351,7 +381,7 @@ declare function DocViewPage(props: DocViewPageProps): JSX.Element;
 
 /**
  * @module solidjsCreateDocSearch
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Creates the SolidJS docs search state machine, including the
  * query signal, debounced execution, and normalized result lifecycle.
  */
@@ -383,7 +413,7 @@ declare function createDocSearch(searchFn: (query: string) => SearchResult[] | P
 
 /**
  * @module solidjsCreateDocs
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Creates the canonical SolidJS docs state container that merges
  * config, flattens pages, and tracks section, page, and search selection state.
  */
@@ -431,7 +461,7 @@ declare function createDocs(tree: Accessor<(DocSection & {
 
 /**
  * @module solidjsCreateTableOfContents
- * @package @geenius/docs-solidjs
+ * @package @geenius/docs/solidjs
  * @description Derives the SolidJS docs table of contents from MDX content
  * and tracks the active heading via intersection observer updates.
  */
@@ -456,4 +486,4 @@ interface TableOfContentsState {
  */
 declare function createTableOfContents(mdxContent: Accessor<string | undefined>): TableOfContentsState;
 
-export { Breadcrumbs, DocPage, DocSearch, DocSearchPage, DocSidebar, DocViewPage, DocsAdminPage, DocsIndexPage, DocsLayout, EditButton, PageNavigation, TableOfContents, VersionSelector, createDocSearch, createDocs, createDocsAdmin, createTableOfContents };
+export { Breadcrumbs, DocPage, DocSearch, DocSearchPage, type DocSearchState, DocSidebar, DocViewPage, type DocsAdminActions, DocsAdminPage, DocsIndexPage, DocsLayout, type DocsSectionWithPages, type DocsState, EditButton, PageNavigation, TableOfContents, type TableOfContentsState, VersionSelector, type WithClassName, createDocSearch, createDocs, createDocsAdmin, createTableOfContents };

package/packages/solidjs/dist/index.js

@@ -1,21 +1,26 @@
 import { For, Show, createSignal, createUniqueId, createMemo, createEffect, children, onCleanup } from 'solid-js';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'solid-js/h/jsx-runtime';
 import remarkGfm from 'remark-gfm';
 import { SolidMarkdown } from 'solid-markdown';
 import { AnimatePresence, motion } from '@geenius/motion/solidjs';
 
 // src/components/Breadcrumbs.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 function Breadcrumbs(props) {
   if (props.items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("nav", { class: "flex items-center gap-1.5 text-sm", "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx(For, { each: props.items, children: (item, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { class: cn("flex items-center gap-1.5 text-sm", props.class), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx(For, { each: props.items, children: (item, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Show, { when: idx() > 0, children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", class: "h-3.5 w-3.5 shrink-0 text-white/20", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", "stroke-width": "1.5" }) }) }),
     /* @__PURE__ */ jsx(Show, { when: idx() === props.items.length - 1, fallback: /* @__PURE__ */ jsx("a", { href: item.href, class: "truncate text-white/40 transition-colors hover:text-white/70", children: item.title }), children: /* @__PURE__ */ jsx("span", { class: "truncate text-white/60", children: item.title }) })
   ] }) }) });
 }
 
-// ../shared/dist/chunk-BR2XBF64.js
+// ../shared/dist/chunk-QKKVTCRJ.js
 function toTocLevel(level) {
   if (level === 2 || level === 3 || level === 4) {
     return level;
@@ -173,11 +178,11 @@ function createHeading(Tag, className) {
   return (props) => {
     const text = getNodeText(props.children);
     const id = slugify(text);
-    return /* @__PURE__ */ jsx(Tag, { id, class: className, children: /* @__PURE__ */ jsx("a", { href: `#${id}`, class: "transition-colors hover:text-indigo-300", children: props.children }) });
+    return /* @__PURE__ */ jsx(Tag, { id, class: cn(className), children: /* @__PURE__ */ jsx("a", { href: `#${id}`, class: "transition-colors hover:text-indigo-300", children: props.children }) });
   };
 }
 function DocPage(props) {
-  return /* @__PURE__ */ jsx("article", { class: "prose-custom max-w-none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("article", { class: cn("prose-custom max-w-none", props.class), children: /* @__PURE__ */ jsx(
     SolidMarkdown,
     {
       remarkPlugins: [remarkGfm],
@@ -259,7 +264,7 @@ function DocSearch(props) {
   if (!props.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs("div", { class: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]", children: [
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs("div", { class: cn("fixed inset-0 z-50 flex items-start justify-center pt-[15vh]", props.class), children: [
     /* @__PURE__ */ jsx(
       motion.button,
       {
@@ -473,7 +478,7 @@ function DocSidebar(props) {
       ) }) })
     ] });
   };
-  return /* @__PURE__ */ jsxs("nav", { class: "flex flex-col gap-1 py-4", children: [
+  return /* @__PURE__ */ jsxs("nav", { class: cn("flex flex-col gap-1 py-4", props.class), children: [
     /* @__PURE__ */ jsx("div", { class: "px-4 pb-3 text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500", children: "Documentation" }),
     /* @__PURE__ */ jsx(For, { each: topLevel(), children: (s) => renderSection(s, 0) })
   ] });
@@ -486,7 +491,10 @@ function TocLink(props) {
       motion.a,
       {
         href: `#${props.item.id}`,
-        class: `block truncate border-l-2 py-1 text-[13px] transition-all relative ${isActive() ? "border-indigo-500 text-indigo-400 font-medium" : "border-transparent text-white/40 hover:text-white/80 hover:border-white/20"}`,
+        class: cn(
+          "block truncate border-l-2 py-1 text-[13px] transition-all relative",
+          isActive() ? "border-indigo-500 text-indigo-400 font-medium" : "border-transparent text-white/40 hover:text-white/80 hover:border-white/20"
+        ),
         style: { "padding-left": `${12 + depth() * 12}px` },
         whileHover: { x: 2 },
         whileTap: { scale: 0.98 },
@@ -501,7 +509,7 @@ function TableOfContents(props) {
   if (props.toc.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("nav", { class: "sticky top-24", children: [
+  return /* @__PURE__ */ jsxs("nav", { class: cn("sticky top-24", props.class), children: [
     /* @__PURE__ */ jsx("h4", { class: "mb-3 text-xs font-semibold uppercase tracking-widest text-white/40", children: "On this page" }),
     /* @__PURE__ */ jsx(motion.div, { class: "flex flex-col relative", layoutRoot: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(For, { each: props.toc, children: (item) => /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, children: /* @__PURE__ */ jsx(TocLink, { item, activeId: props.activeId }) }) }) }) })
   ] });
@@ -510,7 +518,7 @@ function DocsLayout(props) {
   const resolvedChildren = children(() => props.children);
   const breadcrumbs = () => props.breadcrumbs ?? [];
   const toc = () => props.toc ?? [];
-  return /* @__PURE__ */ jsxs("div", { class: "flex min-h-screen bg-[#090a0f] text-white", children: [
+  return /* @__PURE__ */ jsxs("div", { class: cn("flex min-h-screen bg-[#090a0f] text-white", props.class), children: [
     /* @__PURE__ */ jsx("aside", { class: "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(
       DocSidebar,
       {
@@ -565,7 +573,10 @@ function EditButton(props) {
       href: `${props.editUrl.replace(/\/$/, "")}/${props.pageSlug}.mdx`,
       target: "_blank",
       rel: "noopener noreferrer",
-      class: "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",
+      class: cn(
+        "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",
+        props.class
+      ),
       children: [
         /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", class: "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", "stroke-width": "1.5", "stroke-linejoin": "round" }) }),
         "Edit this page"
@@ -577,7 +588,7 @@ function PageNavigation(props) {
   if (!props.prev && !props.next) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { class: "mt-12 flex items-stretch gap-4 border-t border-white/10 pt-8", children: [
+  return /* @__PURE__ */ jsxs("div", { class: cn("mt-12 flex items-stretch gap-4 border-t border-white/10 pt-8", props.class), children: [
     /* @__PURE__ */ jsx(Show, { when: props.prev, fallback: /* @__PURE__ */ jsx("div", { class: "flex-1" }), children: (prev) => /* @__PURE__ */ jsxs("a", { href: prev().href, class: "group flex flex-1 flex-col rounded-xl border border-white/10 p-4 transition-all hover:border-indigo-500/40 hover:bg-white/5", children: [
       /* @__PURE__ */ jsx("span", { class: "text-xs text-white/40 group-hover:text-indigo-400 transition-colors", children: "\u2190 Previous" }),
       /* @__PURE__ */ jsx("span", { class: "mt-1 text-sm font-medium text-white/80 group-hover:text-white transition-colors truncate", children: prev().title })
@@ -593,7 +604,7 @@ function VersionSelector(props) {
     return null;
   }
   const [isOpen, setIsOpen] = createSignal(false);
-  return /* @__PURE__ */ jsxs("div", { class: "relative", children: [
+  return /* @__PURE__ */ jsxs("div", { class: cn("relative", props.class), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -681,8 +692,8 @@ function DocSearchPage(props) {
     Show,
     {
       when: props.tree() !== void 0,
-      fallback: /* @__PURE__ */ jsx("div", { class: "min-h-screen bg-[#090a0f] px-6 py-16", children: /* @__PURE__ */ jsx("div", { class: "mx-auto max-w-2xl", children: /* @__PURE__ */ jsx("div", { class: "mb-8 h-12 animate-pulse rounded-xl bg-white/5" }) }) }),
-      children: /* @__PURE__ */ jsx("div", { class: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { class: "mx-auto max-w-2xl px-6 py-16", children: [
+      fallback: /* @__PURE__ */ jsx("div", { class: cn("min-h-screen bg-[#090a0f] px-6 py-16", props.class), children: /* @__PURE__ */ jsx("div", { class: "mx-auto max-w-2xl", children: /* @__PURE__ */ jsx("div", { class: "mb-8 h-12 animate-pulse rounded-xl bg-white/5" }) }) }),
+      children: /* @__PURE__ */ jsx("div", { class: cn("min-h-screen bg-[#090a0f] text-white", props.class), children: /* @__PURE__ */ jsxs("div", { class: "mx-auto max-w-2xl px-6 py-16", children: [
         /* @__PURE__ */ jsx("h1", { class: "mb-8 text-2xl font-bold", children: "Search Documentation" }),
         /* @__PURE__ */ jsxs("div", { class: "relative mb-8", children: [
           /* @__PURE__ */ jsx(
@@ -781,8 +792,8 @@ function DocsAdminPage(props) {
     Show,
     {
       when: props.tree?.() !== void 0,
-      fallback: /* @__PURE__ */ jsx("div", { class: "min-h-screen bg-[#090a0f] px-6 py-12", children: /* @__PURE__ */ jsx("div", { class: "mx-auto max-w-6xl", children: /* @__PURE__ */ jsx("div", { class: "mb-8 h-10 w-48 animate-pulse rounded bg-white/5" }) }) }),
-      children: /* @__PURE__ */ jsx("div", { class: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { class: "mx-auto max-w-6xl px-6 py-12", children: [
+      fallback: /* @__PURE__ */ jsx("div", { class: cn("min-h-screen bg-[#090a0f] px-6 py-12", props.class), children: /* @__PURE__ */ jsx("div", { class: "mx-auto max-w-6xl", children: /* @__PURE__ */ jsx("div", { class: "mb-8 h-10 w-48 animate-pulse rounded bg-white/5" }) }) }),
+      children: /* @__PURE__ */ jsx("div", { class: cn("min-h-screen bg-[#090a0f] text-white", props.class), children: /* @__PURE__ */ jsxs("div", { class: "mx-auto max-w-6xl px-6 py-12", children: [
         /* @__PURE__ */ jsx("h1", { class: "mb-8 text-2xl font-bold", children: "Docs Admin" }),
         /* @__PURE__ */ jsxs("div", { class: "grid gap-6 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { class: "rounded-xl border border-white/8 bg-white/[0.02] p-5", children: [
@@ -1100,7 +1111,7 @@ function DocsIndexPage(props) {
     Show,
     {
       when: !docs.isLoading(),
-      fallback: /* @__PURE__ */ jsx("div", { class: "min-h-screen bg-[#090a0f] px-6 py-16", children: /* @__PURE__ */ jsxs("div", { class: "mx-auto max-w-5xl", children: [
+      fallback: /* @__PURE__ */ jsx("div", { class: cn("min-h-screen bg-[#090a0f] px-6 py-16", props.class), children: /* @__PURE__ */ jsxs("div", { class: "mx-auto max-w-5xl", children: [
         /* @__PURE__ */ jsx("div", { class: "mb-10 h-10 w-64 animate-pulse rounded-lg bg-white/5" }),
         /* @__PURE__ */ jsx("div", { class: "mb-8 h-12 w-full max-w-xl animate-pulse rounded-xl bg-white/5" }),
         /* @__PURE__ */ jsx("div", { class: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: /* @__PURE__ */ jsx(For, { each: Array(6), children: () => /* @__PURE__ */ jsx("div", { class: "h-36 animate-pulse rounded-xl bg-white/5" }) }) })
@@ -1109,12 +1120,21 @@ function DocsIndexPage(props) {
         Show,
         {
           when: docs.sections().length > 0,
-          fallback: /* @__PURE__ */ jsxs("div", { class: "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center", children: [
-            /* @__PURE__ */ jsx("div", { class: "mb-4 text-6xl opacity-30", children: "\u{1F4DA}" }),
-            /* @__PURE__ */ jsx("h2", { class: "mb-2 text-xl font-semibold text-white/80", children: "No documentation yet" }),
-            /* @__PURE__ */ jsx("p", { class: "max-w-sm text-sm text-white/40", children: "Create your first section and pages to get started." })
-          ] }),
-          children: /* @__PURE__ */ jsxs("div", { class: "min-h-screen bg-[#090a0f] text-white", children: [
+          fallback: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: cn(
+                "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center",
+                props.class
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { class: "mb-4 text-6xl opacity-30", children: "\u{1F4DA}" }),
+                /* @__PURE__ */ jsx("h2", { class: "mb-2 text-xl font-semibold text-white/80", children: "No documentation yet" }),
+                /* @__PURE__ */ jsx("p", { class: "max-w-sm text-sm text-white/40", children: "Create your first section and pages to get started." })
+              ]
+            }
+          ),
+          children: /* @__PURE__ */ jsxs("div", { class: cn("min-h-screen bg-[#090a0f] text-white", props.class), children: [
             /* @__PURE__ */ jsxs("div", { class: "mx-auto max-w-5xl px-6 py-16", children: [
               /* @__PURE__ */ jsx("h1", { class: "mb-2 text-4xl font-bold tracking-tight", children: "Documentation" }),
               /* @__PURE__ */ jsx("p", { class: "mb-10 text-lg text-white/50", children: "Browse guides, API references, and tutorials." }),
@@ -1251,7 +1271,7 @@ function DocViewPage(props) {
     Show,
     {
       when: !docs.isLoading() && props.page() !== void 0,
-      fallback: /* @__PURE__ */ jsxs("div", { class: "flex min-h-screen bg-[#090a0f]", children: [
+      fallback: /* @__PURE__ */ jsxs("div", { class: cn("flex min-h-screen bg-[#090a0f]", props.class), children: [
         /* @__PURE__ */ jsx("div", { class: "hidden w-[260px] shrink-0 border-r border-white/5 bg-[#0b0c12] lg:block", children: /* @__PURE__ */ jsx("div", { class: "space-y-3 p-4", children: Array.from({ length: 8 }).map(() => /* @__PURE__ */ jsx("div", { class: "h-8 animate-pulse rounded-lg bg-white/5" })) }) }),
         /* @__PURE__ */ jsx("div", { class: "flex-1 px-10 py-8", children: /* @__PURE__ */ jsx("div", { class: "mx-auto max-w-3xl space-y-4", children: /* @__PURE__ */ jsx("div", { class: "h-10 w-96 animate-pulse rounded bg-white/5" }) }) })
       ] }),
@@ -1259,10 +1279,19 @@ function DocViewPage(props) {
         Show,
         {
           when: props.page(),
-          fallback: /* @__PURE__ */ jsxs("div", { class: "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center", children: [
-            /* @__PURE__ */ jsx("div", { class: "mb-4 text-6xl opacity-30", children: "\u{1F50D}" }),
-            /* @__PURE__ */ jsx("h2", { class: "mb-2 text-xl font-semibold text-white/80", children: "Page not found" })
-          ] }),
+          fallback: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: cn(
+                "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center",
+                props.class
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { class: "mb-4 text-6xl opacity-30", children: "\u{1F50D}" }),
+                /* @__PURE__ */ jsx("h2", { class: "mb-2 text-xl font-semibold text-white/80", children: "Page not found" })
+              ]
+            }
+          ),
           children: (page) => /* @__PURE__ */ jsxs(
             DocsLayout,
             {
@@ -1272,6 +1301,7 @@ function DocViewPage(props) {
               breadcrumbs: breadcrumbs(),
               currentPageId: page().id,
               onNavigate: props.onNavigate,
+              class: props.class,
               children: [
                 /* @__PURE__ */ jsxs("div", { class: "mb-8", children: [
                   /* @__PURE__ */ jsx("h1", { class: "mb-3 text-3xl font-bold tracking-tight", children: page().title }),