@farming-labs/docs 0.0.2-beta.3 → 0.0.2-beta.30

package/dist/index.d.mts

@@ -137,6 +137,13 @@ interface UIConfig {
     toc?: {
       enabled?: boolean;
       depth?: number;
+      /**
+       * Visual style of the TOC indicator.
+       * - `"default"` — highlight active link text color only
+       * - `"directional"` — animated thumb bar that tracks active headings (fumadocs style)
+       * @default "default"
+       */
+      style?: "default" | "directional";
     };
     header?: {
       height?: number;
@@ -223,6 +230,8 @@ interface PageFrontmatter {
   icon?: string;
   /** Path to custom OG image for this page */
   ogImage?: string;
+  /** Sort order in the sidebar. Lower numbers appear first. Pages without `order` are sorted alphabetically after ordered pages. */
+  order?: number;
 }
 interface DocsNav {
   /**
@@ -288,6 +297,54 @@ interface BreadcrumbConfig {
    */
   component?: unknown;
 }
+/**
+ * A leaf page in the sidebar tree.
+ */
+interface SidebarPageNode {
+  type: "page";
+  name: string;
+  url: string;
+  icon?: unknown;
+}
+/**
+ * A folder (group) in the sidebar tree. May contain child pages
+ * and nested folders, forming a recursive hierarchy.
+ */
+interface SidebarFolderNode {
+  type: "folder";
+  name: string;
+  icon?: unknown;
+  /** Index page for this folder (the folder's own landing page). */
+  index?: SidebarPageNode;
+  /** Child pages and sub-folders. */
+  children: SidebarNode[];
+  /** Whether this folder section is collapsible. */
+  collapsible?: boolean;
+  /** Whether this folder starts open. */
+  defaultOpen?: boolean;
+}
+/** A node in the sidebar tree — either a page or a folder. */
+type SidebarNode = SidebarPageNode | SidebarFolderNode;
+/** The full sidebar tree passed to custom sidebar components. */
+interface SidebarTree {
+  name: string;
+  children: SidebarNode[];
+}
+/**
+ * Props passed to a custom sidebar component.
+ *
+ * Contains all the information needed to build a fully custom sidebar:
+ * the complete page tree with parent-child relationships, and the
+ * current sidebar configuration.
+ */
+interface SidebarComponentProps {
+  /** Full page tree with all parent-child-folder relationships. */
+  tree: SidebarTree;
+  /** Whether folders are collapsible. */
+  collapsible: boolean;
+  /** Whether folders are rendered flat (Mintlify-style). */
+  flat: boolean;
+}
 interface SidebarConfig {
   /**
    * Whether to show the sidebar.
@@ -295,17 +352,46 @@ interface SidebarConfig {
    */
   enabled?: boolean;
   /**
-   * Custom sidebar component to completely replace the default sidebar.
-   * Receives the page tree and config as context.
+   * Custom sidebar component to replace the default navigation.
    *
-   * @example
+   * **Next.js** — Pass a render function that receives `SidebarComponentProps`:
    * ```tsx
    * sidebar: {
-   *   component: MySidebar,
+   *   component: ({ tree, collapsible, flat }) => (
+   *     <MySidebar tree={tree} />
+   *   ),
    * }
    * ```
+   *
+   * **Astro** — Use the `sidebar` named slot on `<DocsLayout>`:
+   * ```astro
+   * <DocsLayout tree={tree} config={config}>
+   *   <MySidebar slot="sidebar" tree={tree} />
+   *   <slot />
+   * </DocsLayout>
+   * ```
+   *
+   * **SvelteKit** — Use the `sidebar` snippet on `<DocsLayout>`:
+   * ```svelte
+   * <DocsLayout {tree} {config}>
+   *   {#snippet sidebar({ tree, isActive })}
+   *     <MySidebarNav {tree} {isActive} />
+   *   {/snippet}
+   *   {@render children()}
+   * </DocsLayout>
+   * ```
+   *
+   * **Nuxt / Vue** — Use the `#sidebar` scoped slot on `<DocsLayout>`:
+   * ```vue
+   * <DocsLayout :tree="tree" :config="config">
+   *   <template #sidebar="{ tree, isActive }">
+   *     <MySidebarNav :tree="tree" :is-active="isActive" />
+   *   </template>
+   *   <DocsContent />
+   * </DocsLayout>
+   * ```
    */
-  component?: unknown;
+  component?: (props: SidebarComponentProps) => unknown;
   /**
    * Sidebar footer content (rendered below navigation items).
    */
@@ -319,6 +405,17 @@ interface SidebarConfig {
    * @default true
    */
   collapsible?: boolean;
+  /**
+   * When true, all folder children are rendered flat in the sidebar
+   * (no collapsible sections). Folder index pages appear as category
+   * headings with all children listed directly below them.
+   *
+   * This creates a Mintlify-style sidebar where all navigation items
+   * are always visible.
+   *
+   * @default false
+   */
+  flat?: boolean;
 }
 /**
  * A single "Open in …" provider shown in the Open dropdown.
@@ -334,10 +431,13 @@ interface OpenDocsProvider {
   /** Icon element rendered next to the name */
   icon?: unknown;
   /**
-   * URL template. `{url}` is replaced with the current page URL.
-   * `{mdxUrl}` is replaced with the `.mdx` variant of the page URL.
+   * URL template. Placeholders:
+   * - `{url}` — current page URL (encoded).
+   * - `{mdxUrl}` — page URL with `.mdx` suffix (encoded).
+   * - `{githubUrl}` — GitHub edit URL for the current page (same as "Edit on GitHub"). Requires `github` in config.
    *
    * @example "https://claude.ai/new?q=Read+this+doc:+{url}"
+   * @example "{githubUrl}" — open current page file on GitHub (edit view)
    */
   urlTemplate: string;
 }
@@ -404,6 +504,65 @@ interface PageActionsConfig {
    * @default "below-title"
    */
   position?: "above-title" | "below-title";
+  /**
+   * Horizontal alignment of page action buttons.
+   *
+   * - `"left"` — align to the left (default)
+   * - `"right"` — align to the right
+   *
+   * @default "left"
+   */
+  alignment?: "left" | "right";
+}
+/**
+ * Configuration for the "Last updated" date display.
+ *
+ * @example
+ * ```ts
+ * lastUpdated: { position: "below-title" }
+ * ```
+ */
+/**
+ * Configuration for auto-generated `/llms.txt` and `/llms-full.txt` routes.
+ *
+ * @see https://llmstxt.org
+ */
+interface LlmsTxtConfig {
+  /**
+   * Whether to enable llms.txt generation.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Base URL for your docs site (used to build absolute links in llms.txt).
+   * @example "https://docs.example.com"
+   */
+  baseUrl?: string;
+  /**
+   * Site title shown at the top of llms.txt.
+   * Falls back to `nav.title` if not set.
+   */
+  siteTitle?: string;
+  /**
+   * Site description shown below the title.
+   */
+  siteDescription?: string;
+}
+interface LastUpdatedConfig {
+  /**
+   * Whether to show the "Last updated" date.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Where to render the "Last updated" date.
+   *
+   * - `"footer"` — next to the "Edit on GitHub" link at the bottom (default)
+   * - `"below-title"` — below the page title/description, above the content
+   *
+   * @default "footer"
+   */
+  position?: "footer" | "below-title";
 }
 /**
  * GitHub repository configuration for "Edit on GitHub" links
@@ -442,9 +601,321 @@ interface GithubConfig {
    */
   directory?: string;
 }
+/**
+ * Configuration for "Ask AI" — a RAG-powered chat that lets users
+ * ask questions about the documentation content.
+ *
+ * The AI handler searches relevant doc pages, builds context, and
+ * streams a response from an LLM (OpenAI-compatible API).
+ *
+ * The API key is **never** stored in the config. It is read from the
+ * `OPENAI_API_KEY` environment variable at runtime on the server.
+ *
+ * @example
+ * ```ts
+ * ai: {
+ *   enabled: true,
+ *   model: "gpt-4o-mini",
+ *   systemPrompt: "You are a helpful assistant for our developer docs.",
+ * }
+ * ```
+ */
+interface AIConfig {
+  /**
+   * Whether to enable "Ask AI" functionality.
+   * When enabled, the unified `/api/docs` route handler will accept
+   * POST requests for AI chat.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * How the AI chat UI is presented.
+   *
+   * - `"search"` — AI tab integrated into the Cmd+K search dialog (default)
+   * - `"floating"` — A floating chat widget (bubble button + slide-out panel)
+   *
+   * @default "search"
+   *
+   * @example
+   * ```ts
+   * // Floating chat bubble in the bottom-right corner
+   * ai: {
+   *   enabled: true,
+   *   mode: "floating",
+   *   position: "bottom-right",
+   * }
+   * ```
+   */
+  mode?: "search" | "floating" | "sidebar-icon";
+  /**
+   * Position of the floating chat button on screen.
+   * Only used when `mode` is `"floating"`.
+   *
+   * - `"bottom-right"` — bottom-right corner (default)
+   * - `"bottom-left"` — bottom-left corner
+   * - `"bottom-center"` — bottom center
+   *
+   * @default "bottom-right"
+   */
+  position?: "bottom-right" | "bottom-left" | "bottom-center";
+  /**
+   * Visual style of the floating chat when opened.
+   * Only used when `mode` is `"floating"`.
+   *
+   * - `"panel"` — A tall panel that slides up from the button position (default).
+   *   Stays anchored near the floating button. No backdrop overlay.
+   *
+   * - `"modal"` — A centered modal dialog with a backdrop overlay,
+   *   similar to the Cmd+K search dialog. Feels more focused and immersive.
+   *
+   * - `"popover"` — A compact popover near the button. Smaller than the
+   *   panel, suitable for quick questions without taking much screen space.
+   *
+   * - `"full-modal"` — A full-screen immersive overlay (inspired by better-auth).
+   *   Messages scroll in the center, input is pinned at the bottom.
+   *   Suggested questions appear as horizontal pills. Best for
+   *   documentation-heavy sites that want a premium AI experience.
+   *
+   * @default "panel"
+   *
+   * @example
+   * ```ts
+   * ai: {
+   *   enabled: true,
+   *   mode: "floating",
+   *   position: "bottom-right",
+   *   floatingStyle: "full-modal",
+   * }
+   * ```
+   */
+  floatingStyle?: "panel" | "modal" | "popover" | "full-modal";
+  /**
+   * Custom trigger component for the floating chat button (Next.js only).
+   * Only used when `mode` is `"floating"`.
+   *
+   * The click handler is attached automatically by the wrapper.
+   *
+   * - **Next.js**: Pass a JSX element via this config option.
+   * - **SvelteKit**: Use the `aiTrigger` snippet on `<DocsLayout>`.
+   * - **Nuxt / Vue**: Use the `ai-trigger` slot on `<DocsLayout>`.
+   * - **Astro**: Use `<MyTrigger slot="ai-trigger" />` on `<DocsLayout>`.
+   *
+   * @example
+   * ```tsx
+   * // Next.js — pass JSX directly in config
+   * triggerComponent: <button className="my-chat-btn">Ask AI</button>,
+   * ```
+   *
+   * ```svelte
+   * <!-- SvelteKit — use snippet in layout -->
+   * <DocsLayout {tree} {config}>
+   *   {#snippet aiTrigger()}<AskAITrigger />{/snippet}
+   *   {@render children()}
+   * </DocsLayout>
+   * ```
+   *
+   * ```vue
+   * <!-- Nuxt / Vue — use named slot in layout -->
+   * <DocsLayout :tree="tree" :config="config">
+   *   <template #ai-trigger><AskAITrigger /></template>
+   *   <DocsContent />
+   * </DocsLayout>
+   * ```
+   *
+   * ```astro
+   * <!-- Astro — use named slot in layout -->
+   * <DocsLayout tree={tree} config={config}>
+   *   <AskAITrigger slot="ai-trigger" />
+   *   <DocsContent />
+   * </DocsLayout>
+   * ```
+   */
+  triggerComponent?: unknown;
+  /**
+   * The LLM model to use for chat completions.
+   * Must be compatible with the OpenAI Chat Completions API.
+   * @default "gpt-4o-mini"
+   */
+  model?: string;
+  /**
+   * Custom system prompt prepended to the AI conversation.
+   * The documentation context is automatically appended after this prompt.
+   *
+   * @default "You are a helpful documentation assistant. Answer questions
+   * based on the provided documentation context. Be concise and accurate.
+   * If the answer is not in the context, say so honestly."
+   */
+  systemPrompt?: string;
+  /**
+   * Base URL for an OpenAI-compatible API endpoint.
+   * Use this to point to a self-hosted model, Azure OpenAI, or any
+   * compatible provider (e.g. Groq, Together, OpenRouter).
+   * @default "https://api.openai.com/v1"
+   */
+  baseUrl?: string;
+  /**
+   * API key for the LLM provider.
+   * Pass it via an environment variable to keep it out of source control.
+   *
+   * @default process.env.OPENAI_API_KEY
+   *
+   * @example
+   * ```ts
+   * // Default — reads OPENAI_API_KEY automatically
+   * ai: { enabled: true }
+   *
+   * // Custom provider key
+   * ai: {
+   *   enabled: true,
+   *   apiKey: process.env.GROQ_API_KEY,
+   * }
+   * ```
+   */
+  apiKey?: string;
+  /**
+   * Maximum number of search results to include as context for the AI.
+   * More results = more context but higher token usage.
+   * @default 5
+   */
+  maxResults?: number;
+  /**
+   * Pre-filled suggested questions shown in the AI chat when empty.
+   * When a user clicks one, it fills the input and submits automatically.
+   *
+   * @example
+   * ```ts
+   * ai: {
+   *   enabled: true,
+   *   suggestedQuestions: [
+   *     "How do I install this?",
+   *     "What themes are available?",
+   *     "How do I create a custom component?",
+   *   ],
+   * }
+   * ```
+   */
+  suggestedQuestions?: string[];
+  /**
+   * Display name for the AI assistant in the chat UI.
+   * Shown as the message label, header title, and passed to the loading component.
+   *
+   * @default "AI"
+   *
+   * @example
+   * ```ts
+   * ai: {
+   *   enabled: true,
+   *   aiLabel: "DocsBot",
+   * }
+   * ```
+   */
+  aiLabel?: string;
+  /**
+   * The npm package name used in import examples.
+   * The AI will use this in code snippets instead of generic placeholders.
+   *
+   * @example
+   * ```ts
+   * ai: {
+   *   enabled: true,
+   *   packageName: "@farming-labs/docs",
+   * }
+   * ```
+   */
+  packageName?: string;
+  /**
+   * The public URL of the documentation site.
+   * The AI will use this for links instead of relative paths.
+   *
+   * @example
+   * ```ts
+   * ai: {
+   *   enabled: true,
+   *   docsUrl: "https://docs.farming-labs.dev",
+   * }
+   * ```
+   */
+  docsUrl?: string;
+  /**
+   * Loading indicator variant shown while the AI generates a response.
+   *
+   * - `"shimmer-dots"` — shimmer text + typing dots (default)
+   * - `"circular"` — spinning ring
+   * - `"dots"` — bouncing dots
+   * - `"typing"` — typing dots
+   * - `"wave"` — wave bars
+   * - `"bars"` — thick wave bars
+   * - `"pulse"` — pulsing ring
+   * - `"pulse-dot"` — pulsing dot
+   * - `"terminal"` — blinking terminal cursor
+   * - `"text-blink"` — blinking text
+   * - `"text-shimmer"` — shimmer text only
+   * - `"loading-dots"` — "Thinking..." with animated dots
+   *
+   * @default "shimmer-dots"
+   *
+   * @example
+   * ```ts
+   * ai: {
+   *   enabled: true,
+   *   loader: "wave",
+   * }
+   * ```
+   */
+  loader?: "shimmer-dots" | "circular" | "dots" | "typing" | "wave" | "bars" | "pulse" | "pulse-dot" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots";
+  /**
+   * Custom loading indicator that overrides the built-in `loader` variant.
+   * Receives `{ name }` (the `aiLabel` value) and returns a React element.
+   *
+   * Only works in Next.js. For other frameworks, use the `loader` option.
+   *
+   * @example
+   * ```tsx
+   * ai: {
+   *   enabled: true,
+   *   aiLabel: "Sage",
+   *   loadingComponent: ({ name }) => (
+   *     <div className="flex items-center gap-2 text-sm text-zinc-400">
+   *       <span className="animate-pulse">🤔</span>
+   *       <span>{name} is thinking...</span>
+   *     </div>
+   *   ),
+   * }
+   * ```
+   */
+  loadingComponent?: (props: {
+    name: string;
+  }) => unknown;
+}
+/**
+ * A single item in the slug-based sidebar ordering.
+ *
+ * @example
+ * ```ts
+ * ordering: [
+ *   { slug: "installation" },
+ *   { slug: "cli" },
+ *   { slug: "themes", children: [
+ *     { slug: "default" },
+ *     { slug: "darksharp" },
+ *     { slug: "pixel-border" },
+ *     { slug: "creating-themes" },
+ *   ]},
+ *   { slug: "reference" },
+ * ]
+ * ```
+ */
+interface OrderingItem {
+  /** Folder name (not the full path, just the directory name at this level) */
+  slug: string;
+  /** Ordering for child pages within this folder */
+  children?: OrderingItem[];
+}
 interface DocsConfig {
   /** Entry folder for docs (e.g. "docs" → /docs) */
   entry: string;
+  /** Path to the content directory. Defaults to `entry` value. */
+  contentDir?: string;
   /** Theme configuration - single source of truth for UI */
   theme?: DocsTheme;
   /**
@@ -579,6 +1050,106 @@ interface DocsConfig {
    * ```
    */
   pageActions?: PageActionsConfig;
+  /**
+   * Configuration for the "Last updated" date display.
+   *
+   * - `true` or `undefined` → shown in footer next to "Edit on GitHub" (default)
+   * - `false` → hidden
+   * - `{ position: "below-title" }` → shown below the page title
+   * - `{ position: "footer" }` → shown next to "Edit on GitHub" (default)
+   *
+   * @example
+   * ```ts
+   * // Show below title (Mintlify style)
+   * lastUpdated: { position: "below-title" }
+   *
+   * // Hide entirely
+   * lastUpdated: false
+   * ```
+   */
+  lastUpdated?: boolean | LastUpdatedConfig;
+  /**
+   * AI-powered "Ask AI" chat for documentation.
+   *
+   * When enabled, the unified API route handler (`/api/docs`) accepts
+   * POST requests for AI chat. The handler uses RAG (Retrieval-Augmented
+   * Generation) — it searches relevant docs, builds context, and streams
+   * a response from an LLM.
+   *
+   * The API key defaults to `process.env.OPENAI_API_KEY`. For other providers,
+   * pass the key via `apiKey: process.env.YOUR_KEY`.
+   *
+   * @example
+   * ```ts
+   * // Enable with defaults (gpt-4o-mini, OPENAI_API_KEY)
+   * ai: { enabled: true }
+   *
+   * // Custom model + system prompt
+   * ai: {
+   *   enabled: true,
+   *   model: "gpt-4o",
+   *   systemPrompt: "You are an expert on our SDK. Be concise.",
+   * }
+   *
+   * // Use a different provider (e.g. Groq)
+   * ai: {
+   *   enabled: true,
+   *   baseUrl: "https://api.groq.com/openai/v1",
+   *   apiKey: process.env.GROQ_API_KEY,
+   *   model: "llama-3.1-70b-versatile",
+   * }
+   * ```
+   */
+  ai?: AIConfig;
+  /**
+   * Sidebar ordering strategy.
+   *
+   * - `"alphabetical"` — sort pages alphabetically by folder name (default)
+   * - `"numeric"` — sort by frontmatter `order` field (lower first, unset pages last)
+   * - `OrderingItem[]` — explicit slug-based ordering with nested children
+   *
+   * @default "alphabetical"
+   *
+   * @example
+   * ```ts
+   * // Alphabetical (default)
+   * ordering: "alphabetical",
+   *
+   * // Use frontmatter `order: 1`, `order: 2`, etc.
+   * ordering: "numeric",
+   *
+   * // Explicit slug-based ordering
+   * ordering: [
+   *   { slug: "installation" },
+   *   { slug: "cli" },
+   *   { slug: "configuration" },
+   *   { slug: "themes", children: [
+   *     { slug: "default" },
+   *     { slug: "darksharp" },
+   *     { slug: "pixel-border" },
+   *     { slug: "creating-themes" },
+   *   ]},
+   *   { slug: "customization" },
+   *   { slug: "reference" },
+   * ]
+   * ```
+   */
+  ordering?: "alphabetical" | "numeric" | OrderingItem[];
+  /**
+   * Auto-generate `/llms.txt` and `/llms-full.txt` routes for LLM-friendly
+   * documentation. These files let AI tools quickly understand your docs.
+   *
+   * @example
+   * ```ts
+   * llmsTxt: {
+   *   enabled: true,
+   *   baseUrl: "https://docs.example.com",
+   * }
+   * ```
+   *
+   * @see https://llmstxt.org
+   */
+  llmsTxt?: boolean | LlmsTxtConfig;
   /** SEO metadata - separate from theme */
   metadata?: DocsMetadata;
   /** Open Graph image handling */
@@ -632,7 +1203,7 @@ declare function createTheme(baseTheme: DocsTheme): (overrides?: Partial<DocsThe
  * @example
  * ```ts
  * import { extendTheme } from "@farming-labs/docs";
- * import { fumadocs } from "@farming-labs/fumadocs/default";
+ * import { fumadocs } from "@farming-labs/theme/default";
  *
  * // Start with fumadocs defaults, override some values
  * export const myTheme = extendTheme(fumadocs(), {
@@ -654,4 +1225,4 @@ declare function resolveTitle(pageTitle: string, metadata?: DocsMetadata): strin
  */
 declare function resolveOGImage(page: PageFrontmatter, ogConfig?: OGConfig, baseUrl?: string): string | undefined;
 //#endregion
-export { type BreadcrumbConfig, type CopyMarkdownConfig, type DocsConfig, type DocsMetadata, type DocsNav, type DocsTheme, type FontStyle, type GithubConfig, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, type PageActionsConfig, type PageFrontmatter, type SidebarConfig, type ThemeToggleConfig, type TypographyConfig, type UIConfig, createTheme, deepMerge, defineDocs, extendTheme, resolveOGImage, resolveTitle };
+export { type AIConfig, type BreadcrumbConfig, type CopyMarkdownConfig, type DocsConfig, type DocsMetadata, type DocsNav, type DocsTheme, type FontStyle, type GithubConfig, type LastUpdatedConfig, type LlmsTxtConfig, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, type OrderingItem, type PageActionsConfig, type PageFrontmatter, type SidebarComponentProps, type SidebarConfig, type SidebarFolderNode, type SidebarNode, type SidebarPageNode, type SidebarTree, type ThemeToggleConfig, type TypographyConfig, type UIConfig, createTheme, deepMerge, defineDocs, extendTheme, resolveOGImage, resolveTitle };

package/dist/index.mjs

@@ -5,6 +5,7 @@
 function defineDocs(config) {
 	return {
 		entry: config.entry ?? "docs",
+		contentDir: config.contentDir,
 		theme: config.theme,
 		nav: config.nav,
 		github: config.github,
@@ -14,6 +15,10 @@ function defineDocs(config) {
 		components: config.components,
 		icons: config.icons,
 		pageActions: config.pageActions,
+		lastUpdated: config.lastUpdated,
+		llmsTxt: config.llmsTxt,
+		ai: config.ai,
+		ordering: config.ordering,
 		metadata: config.metadata,
 		og: config.og
 	};
@@ -81,7 +86,7 @@ function createTheme(baseTheme) {
 * @example
 * ```ts
 * import { extendTheme } from "@farming-labs/docs";
-* import { fumadocs } from "@farming-labs/fumadocs/default";
+* import { fumadocs } from "@farming-labs/theme/default";
 *
 * // Start with fumadocs defaults, override some values
 * export const myTheme = extendTheme(fumadocs(), {