@geenius/docs 0.8.10 → 0.9.0

package/packages/react-css/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 React$1 from 'react';
 
 /**
  * @module docsReactCssBreadcrumbs
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders breadcrumb navigation for the React CSS variant using
  * the shared vanilla CSS class contract.
  */
 
 interface BreadcrumbsProps {
     items: BreadcrumbItem[];
+    className?: string;
 }
 /**
  * Renders a breadcrumb trail for docs pages.
@@ -18,17 +19,18 @@ interface BreadcrumbsProps {
  * @param props - Breadcrumb items describing the current page path.
  * @returns The breadcrumb navigation or `null` when there are no items.
  */
-declare function Breadcrumbs({ items }: BreadcrumbsProps): React$1.JSX.Element | null;
+declare function Breadcrumbs({ items, className, }: BreadcrumbsProps): React$1.JSX.Element | null;
 
 /**
  * @module docsReactCssDocPage
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders markdown content for the standalone React CSS docs
  * variant using the package-local vanilla CSS class contract.
  */
 
 interface DocPageProps {
     page: DocPage$1;
+    className?: string;
 }
 /**
  * Markdown page renderer for the React CSS docs variant.
@@ -36,11 +38,11 @@ interface DocPageProps {
  * @param props - Page record containing the markdown body to render.
  * @returns Rendered docs article markup.
  */
-declare function DocPage({ page }: DocPageProps): React.JSX.Element;
+declare function DocPage({ page, className }: DocPageProps): React.JSX.Element;
 
 /**
  * @module docsReactCssDocSearch
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Provides the standalone React CSS command-palette style docs
  * search modal with keyboard navigation and vanilla CSS styling.
  */
@@ -52,6 +54,7 @@ interface DocSearchProps {
     onSelect: (result: SearchResult) => void;
     isOpen: boolean;
     onClose: () => void;
+    className?: string;
 }
 /**
  * Search modal for the standalone React CSS docs variant.
@@ -59,11 +62,11 @@ interface DocSearchProps {
  * @param props - Search state, result list, and modal event handlers.
  * @returns Search dialog markup when open, otherwise `null`.
  */
-declare function DocSearch({ results, query, onQuery, onSelect, isOpen, onClose, }: DocSearchProps): React.JSX.Element | null;
+declare function DocSearch({ results, query, onQuery, onSelect, isOpen, onClose, className, }: DocSearchProps): React.JSX.Element | null;
 
 /**
  * @module docsReactCssDocSidebar
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders the standalone React CSS sidebar navigation for docs
  * trees using the shared vanilla CSS layout and BEM-style class contract.
  */
@@ -75,6 +78,7 @@ interface DocSidebarProps {
     })[];
     currentPageId?: string;
     onNavigate: (page: DocPage$1, section: DocSection) => void;
+    className?: string;
 }
 /**
  * Sidebar navigation for section and page browsing in the React CSS variant.
@@ -82,11 +86,11 @@ interface DocSidebarProps {
  * @param props - Sections, active page id, and page navigation handler.
  * @returns Sidebar navigation markup for the docs tree.
  */
-declare function DocSidebar({ sections, currentPageId, onNavigate, }: DocSidebarProps): React.JSX.Element;
+declare function DocSidebar({ sections, currentPageId, onNavigate, className, }: DocSidebarProps): React.JSX.Element;
 
 /**
  * @module docsReactCssDocsLayout
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Composes the standalone React CSS layout shell for docs pages,
  * including sidebar navigation, content chrome, and the right-rail TOC.
  */
@@ -94,6 +98,7 @@ declare function DocSidebar({ sections, currentPageId, onNavigate, }: DocSidebar
 interface DocsLayoutProps {
     sections: (DocSection & {
         pages?: DocPage$1[];
+        pageCount?: number;
     })[];
     currentPage?: DocPage$1;
     toc?: TocItem[];
@@ -102,6 +107,7 @@ interface DocsLayoutProps {
     currentPageId?: string;
     onNavigate: (page: DocPage$1, section: DocSection) => void;
     children: React.ReactNode;
+    className?: string;
 }
 /**
  * Layout shell used by standalone React CSS docs pages.
@@ -109,11 +115,11 @@ interface DocsLayoutProps {
  * @param props - Docs navigation state, TOC state, and page content.
  * @returns Full page layout for docs screens.
  */
-declare function DocsLayout({ sections, toc, activeHeadingId, breadcrumbs, currentPageId, onNavigate, children, }: DocsLayoutProps): React.JSX.Element;
+declare function DocsLayout({ sections, toc, activeHeadingId, breadcrumbs, currentPageId, onNavigate, children, className, }: DocsLayoutProps): React.JSX.Element;
 
 /**
  * @module docsReactCssEditButton
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Exposes the CSS-backed edit-link affordance for docs pages so
  * hosts can route users to the source repository without Tailwind classes.
  */
@@ -121,6 +127,7 @@ declare function DocsLayout({ sections, toc, activeHeadingId, breadcrumbs, curre
 interface EditButtonProps {
     pageSlug: string;
     editUrl?: string;
+    className?: string;
 }
 /**
  * Renders the "Edit this page" link when source editing is configured.
@@ -128,11 +135,11 @@ interface EditButtonProps {
  * @param props - Page slug and optional base edit URL.
  * @returns The edit link or `null` when editing is disabled.
  */
-declare function EditButton({ pageSlug, editUrl, }: EditButtonProps): React$1.JSX.Element | null;
+declare function EditButton({ pageSlug, editUrl, className, }: EditButtonProps): React$1.JSX.Element | null;
 
 /**
  * @module docsReactCssPageNavigation
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders previous and next page affordances for the React CSS
  * docs variant using the shared vanilla CSS navigation classes.
  */
@@ -146,6 +153,7 @@ interface PageNavigationProps {
         title: string;
         href: string;
     };
+    className?: string;
 }
 /**
  * Renders previous and next page links for the current article.
@@ -153,11 +161,11 @@ interface PageNavigationProps {
  * @param props - Optional previous and next navigation links.
  * @returns Page navigation markup or `null` when neither link exists.
  */
-declare function PageNavigation({ prev, next, }: PageNavigationProps): React$1.JSX.Element | null;
+declare function PageNavigation({ prev, next, className, }: PageNavigationProps): React$1.JSX.Element | null;
 
 /**
  * @module docsReactCssTableOfContents
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders the CSS-backed table of contents tree for docs pages so
  * heading navigation remains consistent with the shared vanilla CSS contract.
  */
@@ -165,6 +173,7 @@ declare function PageNavigation({ prev, next, }: PageNavigationProps): React$1.J
 interface TableOfContentsProps {
     toc: TocItem[];
     activeId?: string;
+    className?: string;
 }
 /**
  * Renders the page table of contents.
@@ -172,11 +181,11 @@ interface TableOfContentsProps {
  * @param props - TOC entries and the currently active heading id.
  * @returns The TOC nav or `null` when the page has no headings.
  */
-declare function TableOfContents({ toc, activeId, }: TableOfContentsProps): React$1.JSX.Element | null;
+declare function TableOfContents({ toc, activeId, className, }: TableOfContentsProps): React$1.JSX.Element | null;
 
 /**
  * @module docsReactCssVersionSelector
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Provides the CSS-backed version selector for versioned docs
  * surfaces using a native select for accessibility and low runtime overhead.
  */
@@ -185,6 +194,7 @@ interface VersionSelectorProps {
     versions: string[];
     current: string;
     onSelect: (version: string) => void;
+    className?: string;
 }
 /**
  * Renders a version switcher when multiple docs versions exist.
@@ -192,11 +202,11 @@ interface VersionSelectorProps {
  * @param props - Supported versions, current version, and selection callback.
  * @returns The version selector or `null` when only one version exists.
  */
-declare function VersionSelector({ versions, current, onSelect, }: VersionSelectorProps): React$1.JSX.Element | null;
+declare function VersionSelector({ versions, current, onSelect, className, }: VersionSelectorProps): React$1.JSX.Element | null;
 
 /**
  * @module docsReactCssUseDocSearch
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Implements debounced search state for the React CSS docs
  * variant so modal and page-level search experiences share the same query and
  * loading lifecycle.
@@ -223,7 +233,7 @@ declare function useDocSearch(searchFn: (query: string) => SearchResult[] | Prom
 
 /**
  * @module docsReactCssUseDocs
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Provides the React CSS variant state bridge for docs trees. The
  * hook mirrors the Tailwind React surface while staying local to the CSS
  * package so the published CSS entry does not depend on the React variant.
@@ -261,7 +271,7 @@ declare function useDocs(tree: (DocSection & {
 
 /**
  * @module docsReactCssUseDocsAdmin
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Adapts the docs admin mutation contract to stable React CSS
  * callbacks so admin surfaces can stay framework-native while the backend
  * remains transport-agnostic.
@@ -327,7 +337,7 @@ declare function useDocsAdmin(mutations: {
 
 /**
  * @module docsReactCssUseTableOfContents
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Tracks the extracted table of contents and active heading for
  * the React CSS docs variant so CSS-backed page chrome can stay in sync with
  * the rendered article structure.
@@ -351,7 +361,7 @@ declare function useTableOfContents(mdxContent: string | undefined): TableOfCont
 
 /**
  * @module docsReactCssDocSearchPage
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders the standalone React CSS full-page docs search
  * experience using local search results and vanilla CSS layouts.
  */
@@ -362,6 +372,7 @@ interface DocSearchPageProps {
         pageCount: number;
     })[] | undefined;
     onSelectPage?: (page: DocPage$1, section: DocSection) => void;
+    className?: string;
 }
 /**
  * Full-page search experience for the standalone React CSS docs variant.
@@ -369,11 +380,11 @@ interface DocSearchPageProps {
  * @param props - Docs tree and optional page selection callback.
  * @returns Full-page search UI for docs results.
  */
-declare function DocSearchPage({ tree, onSelectPage, }: DocSearchPageProps): React.JSX.Element;
+declare function DocSearchPage({ tree, onSelectPage, className, }: DocSearchPageProps): React.JSX.Element;
 
 /**
  * @module docsReactCssDocsAdminPage
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders the standalone React CSS admin surface for managing doc
  * sections and pages using the package-local vanilla CSS panel styles.
  */
@@ -385,6 +396,7 @@ interface DocsAdminPageProps {
     })[] | undefined;
     allPages?: DocPage$1[];
     admin: DocsAdminActions;
+    className?: string;
 }
 /**
  * Admin page for section and page management in the React CSS variant.
@@ -392,11 +404,11 @@ interface DocsAdminPageProps {
  * @param props - Tree data, optional page list, and admin actions.
  * @returns Admin UI for managing docs content.
  */
-declare function DocsAdminPage({ tree, allPages, admin, }: DocsAdminPageProps): React.JSX.Element;
+declare function DocsAdminPage({ tree, allPages, admin, className, }: DocsAdminPageProps): React.JSX.Element;
 
 /**
  * @module docsReactCssDocsIndexPage
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders the standalone React CSS docs landing page with
  * section cards, recent pages, and a package-local search trigger.
  */
@@ -407,6 +419,7 @@ interface DocsIndexPageProps {
         pageCount: number;
     })[] | undefined;
     onSelectPage?: (page: DocPage$1, section: DocSection) => void;
+    className?: string;
 }
 /**
  * Landing page for the standalone React CSS docs experience.
@@ -414,11 +427,11 @@ interface DocsIndexPageProps {
  * @param props - Docs tree plus optional page selection handler.
  * @returns Landing page UI for the React CSS docs variant.
  */
-declare function DocsIndexPage({ tree, onSelectPage, }: DocsIndexPageProps): React.JSX.Element;
+declare function DocsIndexPage({ tree, onSelectPage, className, }: DocsIndexPageProps): React.JSX.Element;
 
 /**
  * @module docsReactCssDocViewPage
- * @package @geenius/docs-react-css
+ * @package @geenius/docs/react-css
  * @description Renders the standalone React CSS docs detail page with local
  * layout, TOC tracking, navigation footer, and metadata presentation.
  */
@@ -432,6 +445,7 @@ interface DocViewPageProps {
     editPageUrl?: string;
     onNavigate: (page: DocPage$1, section: DocSection) => void;
     onIncrementView?: (pageId: string) => void;
+    className?: string;
 }
 /**
  * Page view for the standalone React CSS docs variant.
@@ -439,6 +453,27 @@ interface DocViewPageProps {
  * @param props - Docs tree, selected page, and page-level event handlers.
  * @returns Detailed page view or an appropriate empty/loading state.
  */
-declare function DocViewPage({ tree, page, editPageUrl, onNavigate, onIncrementView, }: DocViewPageProps): React.JSX.Element;
+declare function DocViewPage({ tree, page, editPageUrl, onNavigate, onIncrementView, className, }: DocViewPageProps): React.JSX.Element;
+
+/**
+ * @module docsReactCssTypes
+ * @package @geenius/docs/react-css
+ * @description Declares the supporting React CSS types shared across the
+ * standalone vanilla CSS docs components and pages.
+ */
+
+/**
+ * Optional `className` contract shared by React CSS docs exports.
+ */
+interface WithClassName {
+    className?: string;
+}
+/**
+ * Shared docs section shape used by layout, navigation, and page components.
+ */
+type DocsSectionWithPages = DocSection & {
+    pages?: DocPage$1[];
+    pageCount?: number;
+};
 
-export { Breadcrumbs, DocPage, DocSearch, DocSearchPage, type DocSearchState, DocSidebar, DocViewPage, type DocsAdminActions, DocsAdminPage, DocsIndexPage, DocsLayout, type DocsState, EditButton, PageNavigation, TableOfContents, type TableOfContentsState, VersionSelector, useDocSearch, useDocs, useDocsAdmin, useTableOfContents };
+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, useDocSearch, useDocs, useDocsAdmin, useTableOfContents };

package/packages/react-css/dist/index.js

@@ -1,18 +1,22 @@
 import React, { useState, useId, useRef, useMemo, useEffect, useCallback, Children, isValidElement } from 'react';
-import clsx from 'clsx';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 // src/components/Breadcrumbs.tsx
-function cx(...values) {
-  return clsx(...values);
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
 }
-function Breadcrumbs({ items }) {
+function Breadcrumbs({
+  items,
+  className
+}) {
   if (items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("nav", { className: "docs__breadcrumbs", "aria-label": "Breadcrumb", children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { className: cx("docs__breadcrumbs", className), "aria-label": "Breadcrumb", children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     index > 0 ? /* @__PURE__ */ jsx(
       "svg",
       {
@@ -37,7 +41,7 @@ function Breadcrumbs({ items }) {
   ] }, `${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;
@@ -203,8 +207,8 @@ function createHeading(Tag, className) {
     ] });
   };
 }
-function DocPage({ page }) {
-  return /* @__PURE__ */ jsx("article", { className: "docs__article", children: /* @__PURE__ */ jsx("div", { className: "docs__article-body docs__content-main", children: /* @__PURE__ */ jsx(
+function DocPage({ page, className }) {
+  return /* @__PURE__ */ jsx("article", { className: cx("docs__article", className), children: /* @__PURE__ */ jsx("div", { className: "docs__article-body docs__content-main", children: /* @__PURE__ */ jsx(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm],
@@ -239,7 +243,8 @@ function DocSearch({
   onQuery,
   onSelect,
   isOpen,
-  onClose
+  onClose,
+  className
 }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const dialogId = useId();
@@ -312,7 +317,7 @@ function DocSearch({
       firstElement.focus();
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "docs__search-modal", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx("docs__search-modal", className), children: [
     /* @__PURE__ */ jsx("button", { type: "button", className: "docs__search-backdrop", "aria-label": "Close search", onClick: onClose }),
     /* @__PURE__ */ jsxs(
       "div",
@@ -393,7 +398,8 @@ function collectAncestorIds(section, sectionMap) {
 function DocSidebar({
   sections,
   currentPageId,
-  onNavigate
+  onNavigate,
+  className
 }) {
   const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
   const sectionMap = useMemo(
@@ -509,10 +515,17 @@ function DocSidebar({
       section.id
     );
   };
-  return /* @__PURE__ */ jsxs("nav", { className: "docs__sidebar-nav", "aria-label": "Documentation navigation", children: [
-    /* @__PURE__ */ jsx("div", { className: "docs__sidebar-header", children: "Documentation" }),
-    topLevelSections.map((section) => renderSection(section))
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cx("docs__sidebar-nav", className),
+      "aria-label": "Documentation navigation",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "docs__sidebar-header", children: "Documentation" }),
+        topLevelSections.map((section) => renderSection(section))
+      ]
+    }
+  );
 }
 function TocEntry({
   item,
@@ -538,12 +551,13 @@ function TocEntry({
 }
 function TableOfContents({
   toc,
-  activeId
+  activeId,
+  className
 }) {
   if (toc.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("nav", { className: "docs__toc", "aria-label": "On this page", children: [
+  return /* @__PURE__ */ jsxs("nav", { className: cx("docs__toc", className), "aria-label": "On this page", children: [
     /* @__PURE__ */ jsx("h2", { className: "docs__toc-title", children: "On this page" }),
     /* @__PURE__ */ jsx("div", { className: "docs__toc-list", children: toc.map((item) => /* @__PURE__ */ jsx(TocEntry, { item, activeId }, item.id)) })
   ] });
@@ -555,9 +569,10 @@ function DocsLayout({
   breadcrumbs,
   currentPageId,
   onNavigate,
-  children
+  children,
+  className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "docs__layout", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx("docs__layout", className), children: [
     /* @__PURE__ */ jsx("aside", { className: "docs__sidebar", children: /* @__PURE__ */ jsx(
       DocSidebar,
       {
@@ -577,7 +592,8 @@ function DocsLayout({
 }
 function EditButton({
   pageSlug,
-  editUrl
+  editUrl,
+  className
 }) {
   if (!editUrl) {
     return null;
@@ -589,7 +605,7 @@ function EditButton({
       href,
       target: "_blank",
       rel: "noreferrer noopener",
-      className: "docs__edit-link",
+      className: cx("docs__edit-link", className),
       children: [
         /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ jsx(
           "path",
@@ -606,12 +622,13 @@ function EditButton({
 }
 function PageNavigation({
   prev,
-  next
+  next,
+  className
 }) {
   if (!prev && !next) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("nav", { className: "docs__page-nav", "aria-label": "Page navigation", children: [
+  return /* @__PURE__ */ jsxs("nav", { className: cx("docs__page-nav", className), "aria-label": "Page navigation", children: [
     prev ? /* @__PURE__ */ jsxs("a", { href: prev.href, className: "docs__page-nav-prev", children: [
       /* @__PURE__ */ jsx("span", { className: "docs__page-nav-label", children: "Previous" }),
       /* @__PURE__ */ jsx("span", { className: "docs__page-nav-title", children: prev.title })
@@ -625,12 +642,13 @@ function PageNavigation({
 function VersionSelector({
   versions,
   current,
-  onSelect
+  onSelect,
+  className
 }) {
   if (versions.length <= 1) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: "docs__version-selector", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cx("docs__version-selector", className), children: /* @__PURE__ */ jsx(
     "select",
     {
       className: "docs__version-select docs__version-select--active",
@@ -850,7 +868,8 @@ function useTableOfContents(mdxContent) {
 }
 function DocSearchPage({
   tree,
-  onSelectPage
+  onSelectPage,
+  className
 }) {
   const sections = tree ?? [];
   const flatPages = sections.flatMap((section) => section.pages ?? []);
@@ -863,9 +882,9 @@ function DocSearchPage({
   );
   const { query, results, isSearching, setQuery } = useDocSearch(searchFn);
   if (tree === void 0) {
-    return /* @__PURE__ */ jsx("div", { className: "docs__empty", style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
+    return /* @__PURE__ */ jsx("div", { className: cx("docs__empty", className), style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "docs__main", children: /* @__PURE__ */ jsx("div", { className: "docs__content", children: /* @__PURE__ */ jsxs("div", { className: "docs__content-inner", style: { display: "block" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cx("docs__main", className), children: /* @__PURE__ */ jsx("div", { className: "docs__content", children: /* @__PURE__ */ jsxs("div", { className: "docs__content-inner", style: { display: "block" }, children: [
     /* @__PURE__ */ jsx("header", { className: "docs__header", children: /* @__PURE__ */ jsx("h1", { className: "docs__title", children: "Search documentation" }) }),
     /* @__PURE__ */ jsxs("div", { className: "docs__search-page", children: [
       /* @__PURE__ */ jsx(
@@ -925,7 +944,8 @@ function parseDocAccess(value) {
 function DocsAdminPage({
   tree,
   allPages,
-  admin
+  admin,
+  className
 }) {
   const sections = useMemo(() => tree ?? [], [tree]);
   const [selectedSectionId, setSelectedSectionId] = useState(null);
@@ -958,9 +978,9 @@ 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: "docs__empty", style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
+    return /* @__PURE__ */ jsx("div", { className: cx("docs__empty", className), style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "docs__main", children: /* @__PURE__ */ jsx("div", { className: "docs__content", children: /* @__PURE__ */ jsxs("div", { className: "docs__content-inner", style: { display: "block" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cx("docs__main", className), children: /* @__PURE__ */ jsx("div", { className: "docs__content", children: /* @__PURE__ */ jsxs("div", { className: "docs__content-inner", style: { display: "block" }, children: [
     /* @__PURE__ */ jsx("header", { className: "docs__header", children: /* @__PURE__ */ jsx("h1", { className: "docs__title", children: "Docs admin" }) }),
     /* @__PURE__ */ jsxs("div", { className: "docs__admin-grid", children: [
       /* @__PURE__ */ jsxs("section", { className: "docs__admin-panel", children: [
@@ -1316,7 +1336,8 @@ function DocsAdminPage({
 }
 function DocsIndexPage({
   tree,
-  onSelectPage
+  onSelectPage,
+  className
 }) {
   const docs = useDocs(tree);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -1339,10 +1360,10 @@ function DocsIndexPage({
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [docs.config.cmdKEnabled]);
   if (docs.isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "docs__empty", style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
+    return /* @__PURE__ */ jsx("div", { className: cx("docs__empty", className), style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
   }
   if (docs.sections.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "docs__empty", style: { minHeight: "100vh" }, children: [
+    return /* @__PURE__ */ jsxs("div", { className: cx("docs__empty", className), style: { minHeight: "100vh" }, children: [
       /* @__PURE__ */ jsx("div", { className: "docs__empty-icon", "aria-hidden": "true", children: "\u{1F4DA}" }),
       /* @__PURE__ */ jsx("div", { className: "docs__empty-title", children: "No documentation yet" }),
       /* @__PURE__ */ jsx("div", { className: "docs__empty-desc", children: "Create a section and at least one page to populate the docs index." })
@@ -1351,7 +1372,7 @@ function DocsIndexPage({
   const recentPages = docs.flatPages.slice().sort(
     (left, right) => new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime()
   ).slice(0, 6);
-  return /* @__PURE__ */ jsxs("div", { className: "docs__main", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx("docs__main", className), children: [
     /* @__PURE__ */ jsx("div", { className: "docs__content", children: /* @__PURE__ */ jsxs("div", { className: "docs__content-inner", style: { display: "block" }, children: [
       /* @__PURE__ */ jsxs("header", { className: "docs__header", children: [
         /* @__PURE__ */ jsx("h1", { className: "docs__title", children: "Documentation" }),
@@ -1473,7 +1494,8 @@ function DocViewPage({
   page,
   editPageUrl,
   onNavigate,
-  onIncrementView
+  onIncrementView,
+  className
 }) {
   const docs = useDocs(tree);
   const { toc, activeId } = useTableOfContents(page?.content);
@@ -1512,10 +1534,10 @@ function DocViewPage({
     };
   }, [docs.flatPages, docs.sections, page]);
   if (docs.isLoading || page === void 0) {
-    return /* @__PURE__ */ jsx("div", { className: "docs__empty", style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
+    return /* @__PURE__ */ jsx("div", { className: cx("docs__empty", className), style: { minHeight: "100vh" }, children: /* @__PURE__ */ jsx("div", { className: "docs__skeleton", style: { width: "24rem", height: "3rem" } }) });
   }
   if (!page) {
-    return /* @__PURE__ */ jsxs("div", { className: "docs__empty", style: { minHeight: "100vh" }, children: [
+    return /* @__PURE__ */ jsxs("div", { className: cx("docs__empty", className), style: { minHeight: "100vh" }, children: [
       /* @__PURE__ */ jsx("div", { className: "docs__empty-icon", "aria-hidden": "true", children: "\u{1F50D}" }),
       /* @__PURE__ */ jsx("div", { className: "docs__empty-title", children: "Page not found" }),
       /* @__PURE__ */ jsx("div", { className: "docs__empty-desc", children: "The requested documentation page could not be resolved." })
@@ -1530,6 +1552,7 @@ function DocViewPage({
       breadcrumbs,
       currentPageId: page.id,
       onNavigate,
+      className,
       children: [
         /* @__PURE__ */ jsxs("header", { className: "docs__page-header", children: [
           /* @__PURE__ */ jsx("h1", { className: "docs__page-title", children: page.title }),