doccupine 0.0.88 → 0.0.90

package/dist/templates/llms/llmsPage.js

@@ -0,0 +1,20 @@
+function pageUrl(slug, baseUrl) {
+    if (baseUrl) {
+        return slug === "" ? `${baseUrl}/` : `${baseUrl}/${slug}`;
+    }
+    return slug === "" ? "/" : `/${slug}`;
+}
+export function llmsPageTemplate(page, baseUrl) {
+    const lines = [];
+    lines.push(`# ${page.title}`);
+    lines.push("");
+    if (page.description && page.description.trim() !== "") {
+        lines.push(`> ${page.description.trim()}`);
+        lines.push("");
+    }
+    lines.push(`Source: ${pageUrl(page.slug, baseUrl)}`);
+    lines.push("");
+    lines.push(page.body.trim());
+    lines.push("");
+    return lines.join("\n");
+}

package/dist/templates/mdx/accordion.mdx.d.ts

@@ -1 +1 @@
-export declare const accordionMdxTemplate = "---\ntitle: \"Accordion\"\ndescription: \"Interactive panels for toggling visibility of content.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 4\n---\n# Accordion\nInteractive panels for toggling visibility of content.\n\nAccordion elements help organize information by letting users show or hide sections as needed. They\u2019re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.\n\n## Accordion Usage\nYou can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n   ```java HelloWorld.java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n  ```\n</Accordion>\n~~~\n\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n   ```java HelloWorld.java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n  ```\n</Accordion>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the accordion.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the accordion.\n</Field>";
+export declare const accordionMdxTemplate = "---\ntitle: \"Accordion\"\ndescription: \"Interactive panels for toggling visibility of content.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 4\n---\n\n# Accordion\n\nInteractive panels for toggling visibility of content.\n\nAccordion elements help organize information by letting users show or hide sections as needed. They\u2019re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.\n\n## Accordion Usage\n\nYou can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:\n\n````mdx\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n```java HelloWorld.java\n class HelloWorld {\n     public static void main(String[] args) {\n         System.out.println(\"Hello, World!\");\n     }\n }\n```\n\n</Accordion>\n````\n\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n```java HelloWorld.java\n class HelloWorld {\n     public static void main(String[] args) {\n         System.out.println(\"Hello, World!\");\n     }\n }\n```\n\n</Accordion>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the accordion.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the accordion.\n</Field>";

package/dist/templates/mdx/accordion.mdx.js

@@ -6,38 +6,43 @@ category: "Components"
 categoryOrder: 1
 order: 4
 ---
+
 # Accordion
+
 Interactive panels for toggling visibility of content.
 
 Accordion elements help organize information by letting users show or hide sections as needed. They’re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.
 
 ## Accordion Usage
+
 You can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:
 
-~~~mdx
+\`\`\`\`mdx
 <Accordion title="What is MDX?">
     You can put any content in here, including other components, like code:
 
-   \`\`\`java HelloWorld.java
-    class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
-    }
-  \`\`\`
+\`\`\`java HelloWorld.java
+ class HelloWorld {
+     public static void main(String[] args) {
+         System.out.println("Hello, World!");
+     }
+ }
+\`\`\`
+
 </Accordion>
-~~~
+\`\`\`\`
 
 <Accordion title="What is MDX?">
     You can put any content in here, including other components, like code:
 
-   \`\`\`java HelloWorld.java
-    class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
-    }
-  \`\`\`
+\`\`\`java HelloWorld.java
+ class HelloWorld {
+     public static void main(String[] args) {
+         System.out.println("Hello, World!");
+     }
+ }
+\`\`\`
+
 </Accordion>
 
 ## Properties

package/dist/templates/mdx/ai-assistant.mdx.d.ts

@@ -1 +1 @@
-export declare const aiAssistantMdxTemplate = "---\ntitle: \"AI Assistant\"\ndescription: \"Integrate AI capabilities into your Doccupine documentation using OpenAI, Anthropic, or Google Gemini.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 8\n---\n# AI Assistant\nDoccupine supports AI integration to enhance your documentation experience. You can use OpenAI, Anthropic, or Google Gemini to power AI features in your documentation site. The AI assistant uses your documentation content as context, allowing users to ask questions about your docs and receive accurate answers based on the documentation.\n\n## Setup\nTo enable AI features, create an `.env` file in the directory where your website is generated. By default, this is the `nextjs-app/` directory.\n\n## Configuration\nCreate an `.env` file with the following configuration options:\n\n```env\n# LLM Provider Configuration\n# Choose your preferred LLM provider: openai, anthropic, or google\nLLM_PROVIDER=openai\n\n# API Keys (set the one matching your provider)\nOPENAI_API_KEY=your_openai_api_key_here\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nGOOGLE_API_KEY=your_google_api_key_here\n\n# Optional: Override default chat model (see your provider's docs for available models)\n# LLM_CHAT_MODEL=your-model-id\n\n# Optional: Override default embedding model (see your provider's docs for available models)\n# Note: Anthropic doesn't provide embeddings, will fallback to OpenAI\n# LLM_EMBEDDING_MODEL=your-embedding-model-id\n\n# Optional: Set temperature (0-1, default: 0)\n# LLM_TEMPERATURE=0\n```\n\n## Provider Selection\nSet `LLM_PROVIDER` to one of the following values:\n- `openai` - Use OpenAI's models\n- `anthropic` - Use Anthropic's models\n- `google` - Use Google's models\n\n## API Keys\nYou need to set the API key that matches your chosen provider:\n- For OpenAI: Set `OPENAI_API_KEY`\n- For Anthropic: Set `ANTHROPIC_API_KEY`\n- For Google: Set `GOOGLE_API_KEY`\n\n<Callout type=\"warning\">\n  Keep your API keys secure. Never commit your `.env` file to version control.\n</Callout>\n\n<Callout type=\"note\">\n  Doccupine automatically adds `.env` to your `.gitignore` file.\n</Callout>\n\n## Using Anthropic with OpenAI\nIf you want to use Anthropic as your LLM provider, you must also have an OpenAI API key set. Here's why:\n\n### The Situation\nAnthropic (Claude) does not provide an embeddings API. They only offer chat/completion models, not text embeddings.\n\nYour RAG (Retrieval-Augmented Generation) system has two components:\n- **Chat/Completion** - Generates answers, works with Anthropic.\n- **Embeddings** - Creates vector representations of text for search, Anthropic doesn't provide this.\n\nWhen using Anthropic as your `LLM_PROVIDER`, Doccupine will use Anthropic for chat/completion tasks, but will automatically fallback to OpenAI for embeddings. This means you need both API keys configured:\n\n```env\nLLM_PROVIDER=anthropic\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nOPENAI_API_KEY=your_openai_api_key_here\n```\n\nThis hybrid approach allows you to leverage Anthropic's powerful chat models while still having access to embeddings functionality through OpenAI.\n\n## Default models\n\n| Provider | Chat model | Embedding model |\n|---|---|---|\n| OpenAI | `gpt-4.1-nano` | `text-embedding-3-small` |\n| Anthropic | `claude-sonnet-4-5-20250929` | OpenAI fallback |\n| Google | `gemini-2.5-flash-lite` | `gemini-embedding-001` |\n\n## Optional Settings\n\n### Chat Model\nOverride the default chat model by uncommenting and setting `LLM_CHAT_MODEL`. You can use any available model from your chosen provider. For a complete list of available models, refer to the official documentation:\n- [OpenAI Models](https://platform.openai.com/docs/models)\n- [Anthropic Models](https://docs.anthropic.com/claude/docs/models-overview)\n- [Google Gemini Models](https://ai.google.dev/models/gemini)\n\n### Embedding Model\nOverride the default embedding model by uncommenting and setting `LLM_EMBEDDING_MODEL`. For a complete list of available embedding models, refer to the official documentation:\n- [OpenAI Embeddings](https://platform.openai.com/docs/guides/embeddings)\n- [Google Gemini Embeddings](https://ai.google.dev/gemini-api/docs/embeddings)\n- **Anthropic**: Anthropic doesn't provide embeddings. If you use Anthropic as your provider, Doccupine will fallback to OpenAI for embeddings.\n\n### Temperature\nControl the randomness of AI responses by setting `LLM_TEMPERATURE` to a value between 0 and 1:\n- `0` - More deterministic and focused responses (default)\n- `1` - More creative and varied responses";
+export declare const aiAssistantMdxTemplate = "---\ntitle: \"AI Assistant\"\ndescription: \"Integrate AI capabilities into your Doccupine documentation using OpenAI, Anthropic, or Google Gemini.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 8\n---\n\n# AI Assistant\n\nDoccupine supports AI integration to enhance your documentation experience. You can use OpenAI, Anthropic, or Google Gemini to power AI features in your documentation site. The AI assistant uses your documentation content as context, allowing users to ask questions about your docs and receive accurate answers based on the documentation.\n\n## Setup\n\nTo enable AI features, create an `.env` file in the directory where your website is generated. By default, this is the `nextjs-app/` directory.\n\n## Configuration\n\nCreate an `.env` file with the following configuration options:\n\n```env\n# LLM Provider Configuration\n# Choose your preferred LLM provider: openai, anthropic, or google\nLLM_PROVIDER=openai\n\n# API Keys (set the one matching your provider)\nOPENAI_API_KEY=your_openai_api_key_here\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nGOOGLE_API_KEY=your_google_api_key_here\n\n# Optional: Override default chat model (see your provider's docs for available models)\n# LLM_CHAT_MODEL=your-model-id\n\n# Optional: Override default embedding model (see your provider's docs for available models)\n# Note: Anthropic doesn't provide embeddings, will fallback to OpenAI\n# LLM_EMBEDDING_MODEL=your-embedding-model-id\n\n# Optional: Set temperature (0-1, default: 0)\n# LLM_TEMPERATURE=0\n```\n\n## Provider Selection\n\nSet `LLM_PROVIDER` to one of the following values:\n\n- `openai` - Use OpenAI's models\n- `anthropic` - Use Anthropic's models\n- `google` - Use Google's models\n\n## API Keys\n\nYou need to set the API key that matches your chosen provider:\n\n- For OpenAI: Set `OPENAI_API_KEY`\n- For Anthropic: Set `ANTHROPIC_API_KEY`\n- For Google: Set `GOOGLE_API_KEY`\n\n<Callout type=\"warning\">\n  Keep your API keys secure. Never commit your `.env` file to version control.\n</Callout>\n\n<Callout type=\"note\">\n  Doccupine automatically adds `.env` to your `.gitignore` file.\n</Callout>\n\n## Using Anthropic with OpenAI\n\nIf you want to use Anthropic as your LLM provider, you must also have an OpenAI API key set. Here's why:\n\n### The Situation\n\nAnthropic (Claude) does not provide an embeddings API. They only offer chat/completion models, not text embeddings.\n\nYour RAG (Retrieval-Augmented Generation) system has two components:\n\n- **Chat/Completion** - Generates answers, works with Anthropic.\n- **Embeddings** - Creates vector representations of text for search, Anthropic doesn't provide this.\n\nWhen using Anthropic as your `LLM_PROVIDER`, Doccupine will use Anthropic for chat/completion tasks, but will automatically fallback to OpenAI for embeddings. This means you need both API keys configured:\n\n```env\nLLM_PROVIDER=anthropic\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nOPENAI_API_KEY=your_openai_api_key_here\n```\n\nThis hybrid approach allows you to leverage Anthropic's powerful chat models while still having access to embeddings functionality through OpenAI.\n\n## Default models\n\n| Provider  | Chat model                   | Embedding model          |\n| --------- | ---------------------------- | ------------------------ |\n| OpenAI    | `gpt-4.1-nano`               | `text-embedding-3-small` |\n| Anthropic | `claude-sonnet-4-5-20250929` | OpenAI fallback          |\n| Google    | `gemini-2.5-flash-lite`      | `gemini-embedding-001`   |\n\n## Optional Settings\n\n### Chat Model\n\nOverride the default chat model by uncommenting and setting `LLM_CHAT_MODEL`. You can use any available model from your chosen provider. For a complete list of available models, refer to the official documentation:\n\n- [OpenAI Models](https://platform.openai.com/docs/models)\n- [Anthropic Models](https://docs.anthropic.com/claude/docs/models-overview)\n- [Google Gemini Models](https://ai.google.dev/models/gemini)\n\n### Embedding Model\n\nOverride the default embedding model by uncommenting and setting `LLM_EMBEDDING_MODEL`. For a complete list of available embedding models, refer to the official documentation:\n\n- [OpenAI Embeddings](https://platform.openai.com/docs/guides/embeddings)\n- [Google Gemini Embeddings](https://ai.google.dev/gemini-api/docs/embeddings)\n- **Anthropic**: Anthropic doesn't provide embeddings. If you use Anthropic as your provider, Doccupine will fallback to OpenAI for embeddings.\n\n### Temperature\n\nControl the randomness of AI responses by setting `LLM_TEMPERATURE` to a value between 0 and 1:\n\n- `0` - More deterministic and focused responses (default)\n- `1` - More creative and varied responses";

package/dist/templates/mdx/ai-assistant.mdx.js

@@ -6,13 +6,17 @@ category: "Configuration"
 categoryOrder: 3
 order: 8
 ---
+
 # AI Assistant
+
 Doccupine supports AI integration to enhance your documentation experience. You can use OpenAI, Anthropic, or Google Gemini to power AI features in your documentation site. The AI assistant uses your documentation content as context, allowing users to ask questions about your docs and receive accurate answers based on the documentation.
 
 ## Setup
+
 To enable AI features, create an \`.env\` file in the directory where your website is generated. By default, this is the \`nextjs-app/\` directory.
 
 ## Configuration
+
 Create an \`.env\` file with the following configuration options:
 
 \`\`\`env
@@ -37,13 +41,17 @@ GOOGLE_API_KEY=your_google_api_key_here
 \`\`\`
 
 ## Provider Selection
+
 Set \`LLM_PROVIDER\` to one of the following values:
+
 - \`openai\` - Use OpenAI's models
 - \`anthropic\` - Use Anthropic's models
 - \`google\` - Use Google's models
 
 ## API Keys
+
 You need to set the API key that matches your chosen provider:
+
 - For OpenAI: Set \`OPENAI_API_KEY\`
 - For Anthropic: Set \`ANTHROPIC_API_KEY\`
 - For Google: Set \`GOOGLE_API_KEY\`
@@ -57,12 +65,15 @@ You need to set the API key that matches your chosen provider:
 </Callout>
 
 ## Using Anthropic with OpenAI
+
 If you want to use Anthropic as your LLM provider, you must also have an OpenAI API key set. Here's why:
 
 ### The Situation
+
 Anthropic (Claude) does not provide an embeddings API. They only offer chat/completion models, not text embeddings.
 
 Your RAG (Retrieval-Augmented Generation) system has two components:
+
 - **Chat/Completion** - Generates answers, works with Anthropic.
 - **Embeddings** - Creates vector representations of text for search, Anthropic doesn't provide this.
 
@@ -78,27 +89,33 @@ This hybrid approach allows you to leverage Anthropic's powerful chat models whi
 
 ## Default models
 
-| Provider | Chat model | Embedding model |
-|---|---|---|
-| OpenAI | \`gpt-4.1-nano\` | \`text-embedding-3-small\` |
-| Anthropic | \`claude-sonnet-4-5-20250929\` | OpenAI fallback |
-| Google | \`gemini-2.5-flash-lite\` | \`gemini-embedding-001\` |
+| Provider  | Chat model                   | Embedding model          |
+| --------- | ---------------------------- | ------------------------ |
+| OpenAI    | \`gpt-4.1-nano\`               | \`text-embedding-3-small\` |
+| Anthropic | \`claude-sonnet-4-5-20250929\` | OpenAI fallback          |
+| Google    | \`gemini-2.5-flash-lite\`      | \`gemini-embedding-001\`   |
 
 ## Optional Settings
 
 ### Chat Model
+
 Override the default chat model by uncommenting and setting \`LLM_CHAT_MODEL\`. You can use any available model from your chosen provider. For a complete list of available models, refer to the official documentation:
+
 - [OpenAI Models](https://platform.openai.com/docs/models)
 - [Anthropic Models](https://docs.anthropic.com/claude/docs/models-overview)
 - [Google Gemini Models](https://ai.google.dev/models/gemini)
 
 ### Embedding Model
+
 Override the default embedding model by uncommenting and setting \`LLM_EMBEDDING_MODEL\`. For a complete list of available embedding models, refer to the official documentation:
+
 - [OpenAI Embeddings](https://platform.openai.com/docs/guides/embeddings)
 - [Google Gemini Embeddings](https://ai.google.dev/gemini-api/docs/embeddings)
 - **Anthropic**: Anthropic doesn't provide embeddings. If you use Anthropic as your provider, Doccupine will fallback to OpenAI for embeddings.
 
 ### Temperature
+
 Control the randomness of AI responses by setting \`LLM_TEMPERATURE\` to a value between 0 and 1:
+
 - \`0\` - More deterministic and focused responses (default)
 - \`1\` - More creative and varied responses`;

package/dist/templates/mdx/analytics.mdx.d.ts

@@ -1 +1 @@
-export declare const analyticsMdxTemplate = "---\ntitle: \"Analytics\"\ndescription: \"Add PostHog analytics to your documentation site with an analytics.json file for both client-side and server-side tracking.\"\ndate: \"2026-02-24\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 10\n---\n# Analytics\nTrack how users interact with your documentation using PostHog. Doccupine supports both client-side and server-side tracking out of the box, with a privacy-first proxy that routes analytics through your own domain.\n\n## analytics.json\nPlace an `analytics.json` at your project root (the same folder where you execute `npx doccupine`).\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\",\n    \"host\": \"https://us.i.posthog.com\"\n  }\n}\n```\n\n## Fields\n\n- **provider**: The analytics provider to use. Currently only `\"posthog\"` is supported.\n- **posthog.key**: Your PostHog project API key. You can find this in your PostHog project settings under \"Project API Key\". This is a public identifier - it is safe to commit to version control.\n- **posthog.host**: The PostHog ingestion endpoint. Use `https://us.i.posthog.com` for US Cloud or `https://eu.i.posthog.com` for EU Cloud. If you self-host PostHog, use your instance URL.\n\n<Callout type=\"note\">\n  The PostHog project API key is a public identifier used to send events. It is not a secret and is safe to include in your repository.\n</Callout>\n\n## What gets tracked\nWhen `analytics.json` is configured, Doccupine enables two layers of tracking:\n\n### Client-side\n- **Page views**: Captured on every client-side navigation using Next.js router hooks.\n- **Page leave**: Automatically captured when a user navigates away from a page.\n\n### Server-side\n- **Page views**: Captured in middleware on every page request, including the initial server render.\n- **Request metadata**: URL, pathname, host, referrer, and user agent are sent with each event.\n- **Smart filtering**: API routes, internal Next.js routes, and prefetch requests are automatically excluded.\n\n## Privacy proxy\nDoccupine routes all analytics traffic through your documentation domain using Next.js rewrites. Instead of sending data directly to PostHog (which ad blockers may intercept), requests go through `/ingest` on your own domain and are proxied to PostHog.\n\nThis means:\n- No third-party domains appear in network requests.\n- Ad blockers are less likely to interfere with tracking.\n- Your users' browsing data stays within your domain boundary before reaching PostHog.\n\nThe proxy destinations are derived automatically from the `host` field in your configuration.\n\n## Getting a PostHog key\n1. Sign up at [posthog.com](https://posthog.com) (free tier available).\n2. Create a new project.\n3. Go to **Project Settings** and copy the **Project API Key**.\n4. Paste it into your `analytics.json` as the `posthog.key` value.\n\n## Behavior\n- **Placement**: Put `analytics.json` in the project root alongside `config.json` and `theme.json`.\n- **Hot reload**: Changes to `analytics.json` are picked up automatically in watch mode. The layout, middleware, and Next.js config are regenerated.\n- **Graceful degradation**: If `analytics.json` is missing, empty, or has an invalid configuration, no tracking code runs. Your site works exactly the same without it.\n- **Dev server restart**: After adding or removing `analytics.json` for the first time, you may need to restart the Next.js dev server for proxy rewrites to take effect.\n\n<Callout type=\"warning\">\n  After adding `analytics.json` for the first time, restart the dev server so the proxy rewrites are picked up by Next.js.\n</Callout>\n\n## Regions\nPostHog offers two cloud regions. Set the `host` field accordingly:\n\n| Region | Host |\n|---|---|\n| US Cloud | `https://us.i.posthog.com` |\n| EU Cloud | `https://eu.i.posthog.com` |\n\nIf you omit the `host` field, it defaults to the US Cloud endpoint.\n\n## Example\n\n### Minimal configuration (US Cloud)\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\"\n  }\n}\n```\n\n### EU Cloud\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\",\n    \"host\": \"https://eu.i.posthog.com\"\n  }\n}\n```\n\n## Tips\n- **Start simple**: Add the config with just your key and verify events appear in your PostHog dashboard before customizing further.\n- **Check your dashboard**: After deploying, visit your PostHog project to confirm page view events are flowing in.\n- **Production only**: Consider adding `analytics.json` only in your production/deployment setup to avoid tracking local development traffic.\n";
+export declare const analyticsMdxTemplate = "---\ntitle: \"Analytics\"\ndescription: \"Add PostHog analytics to your documentation site with an analytics.json file for both client-side and server-side tracking.\"\ndate: \"2026-02-24\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 10\n---\n\n# Analytics\n\nTrack how users interact with your documentation using PostHog. Doccupine supports both client-side and server-side tracking out of the box, with a privacy-first proxy that routes analytics through your own domain.\n\n## analytics.json\n\nPlace an `analytics.json` at your project root (the same folder where you execute `npx doccupine`).\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\",\n    \"host\": \"https://us.i.posthog.com\"\n  }\n}\n```\n\n## Fields\n\n- **provider**: The analytics provider to use. Currently only `\"posthog\"` is supported.\n- **posthog.key**: Your PostHog project API key. You can find this in your PostHog project settings under \"Project API Key\". This is a public identifier - it is safe to commit to version control.\n- **posthog.host**: The PostHog ingestion endpoint. Use `https://us.i.posthog.com` for US Cloud or `https://eu.i.posthog.com` for EU Cloud. If you self-host PostHog, use your instance URL.\n\n<Callout type=\"note\">\n  The PostHog project API key is a public identifier used to send events. It is not a secret and is safe to include in your repository.\n</Callout>\n\n## What gets tracked\n\nWhen `analytics.json` is configured, Doccupine enables two layers of tracking:\n\n### Client-side\n\n- **Page views**: Captured on every client-side navigation using Next.js router hooks.\n- **Page leave**: Automatically captured when a user navigates away from a page.\n\n### Server-side\n\n- **Page views**: Captured in middleware on every page request, including the initial server render.\n- **Request metadata**: URL, pathname, host, referrer, and user agent are sent with each event.\n- **Smart filtering**: API routes, internal Next.js routes, and prefetch requests are automatically excluded.\n\n## Privacy proxy\n\nDoccupine routes all analytics traffic through your documentation domain using Next.js rewrites. Instead of sending data directly to PostHog (which ad blockers may intercept), requests go through `/ingest` on your own domain and are proxied to PostHog.\n\nThis means:\n\n- No third-party domains appear in network requests.\n- Ad blockers are less likely to interfere with tracking.\n- Your users' browsing data stays within your domain boundary before reaching PostHog.\n\nThe proxy destinations are derived automatically from the `host` field in your configuration.\n\n## Getting a PostHog key\n\n1. Sign up at [posthog.com](https://posthog.com) (free tier available).\n2. Create a new project.\n3. Go to **Project Settings** and copy the **Project API Key**.\n4. Paste it into your `analytics.json` as the `posthog.key` value.\n\n## Behavior\n\n- **Placement**: Put `analytics.json` in the project root alongside `config.json` and `theme.json`.\n- **Hot reload**: Changes to `analytics.json` are picked up automatically in watch mode. The layout, middleware, and Next.js config are regenerated.\n- **Graceful degradation**: If `analytics.json` is missing, empty, or has an invalid configuration, no tracking code runs. Your site works exactly the same without it.\n- **Dev server restart**: After adding or removing `analytics.json` for the first time, you may need to restart the Next.js dev server for proxy rewrites to take effect.\n\n<Callout type=\"warning\">\n  After adding `analytics.json` for the first time, restart the dev server so the proxy rewrites are picked up by Next.js.\n</Callout>\n\n## Regions\n\nPostHog offers two cloud regions. Set the `host` field accordingly:\n\n| Region   | Host                       |\n| -------- | -------------------------- |\n| US Cloud | `https://us.i.posthog.com` |\n| EU Cloud | `https://eu.i.posthog.com` |\n\nIf you omit the `host` field, it defaults to the US Cloud endpoint.\n\n## Example\n\n### Minimal configuration (US Cloud)\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\"\n  }\n}\n```\n\n### EU Cloud\n\n```json\n{\n  \"provider\": \"posthog\",\n  \"posthog\": {\n    \"key\": \"phc_your_project_api_key\",\n    \"host\": \"https://eu.i.posthog.com\"\n  }\n}\n```\n\n## Tips\n\n- **Start simple**: Add the config with just your key and verify events appear in your PostHog dashboard before customizing further.\n- **Check your dashboard**: After deploying, visit your PostHog project to confirm page view events are flowing in.\n- **Production only**: Consider adding `analytics.json` only in your production/deployment setup to avoid tracking local development traffic.";

package/dist/templates/mdx/analytics.mdx.js

@@ -6,10 +6,13 @@ category: "Configuration"
 categoryOrder: 3
 order: 10
 ---
+
 # Analytics
+
 Track how users interact with your documentation using PostHog. Doccupine supports both client-side and server-side tracking out of the box, with a privacy-first proxy that routes analytics through your own domain.
 
 ## analytics.json
+
 Place an \`analytics.json\` at your project root (the same folder where you execute \`npx doccupine\`).
 
 \`\`\`json
@@ -33,21 +36,26 @@ Place an \`analytics.json\` at your project root (the same folder where you exec
 </Callout>
 
 ## What gets tracked
+
 When \`analytics.json\` is configured, Doccupine enables two layers of tracking:
 
 ### Client-side
+
 - **Page views**: Captured on every client-side navigation using Next.js router hooks.
 - **Page leave**: Automatically captured when a user navigates away from a page.
 
 ### Server-side
+
 - **Page views**: Captured in middleware on every page request, including the initial server render.
 - **Request metadata**: URL, pathname, host, referrer, and user agent are sent with each event.
 - **Smart filtering**: API routes, internal Next.js routes, and prefetch requests are automatically excluded.
 
 ## Privacy proxy
+
 Doccupine routes all analytics traffic through your documentation domain using Next.js rewrites. Instead of sending data directly to PostHog (which ad blockers may intercept), requests go through \`/ingest\` on your own domain and are proxied to PostHog.
 
 This means:
+
 - No third-party domains appear in network requests.
 - Ad blockers are less likely to interfere with tracking.
 - Your users' browsing data stays within your domain boundary before reaching PostHog.
@@ -55,12 +63,14 @@ This means:
 The proxy destinations are derived automatically from the \`host\` field in your configuration.
 
 ## Getting a PostHog key
+
 1. Sign up at [posthog.com](https://posthog.com) (free tier available).
 2. Create a new project.
 3. Go to **Project Settings** and copy the **Project API Key**.
 4. Paste it into your \`analytics.json\` as the \`posthog.key\` value.
 
 ## Behavior
+
 - **Placement**: Put \`analytics.json\` in the project root alongside \`config.json\` and \`theme.json\`.
 - **Hot reload**: Changes to \`analytics.json\` are picked up automatically in watch mode. The layout, middleware, and Next.js config are regenerated.
 - **Graceful degradation**: If \`analytics.json\` is missing, empty, or has an invalid configuration, no tracking code runs. Your site works exactly the same without it.
@@ -71,10 +81,11 @@ The proxy destinations are derived automatically from the \`host\` field in your
 </Callout>
 
 ## Regions
+
 PostHog offers two cloud regions. Set the \`host\` field accordingly:
 
-| Region | Host |
-|---|---|
+| Region   | Host                       |
+| -------- | -------------------------- |
 | US Cloud | \`https://us.i.posthog.com\` |
 | EU Cloud | \`https://eu.i.posthog.com\` |
 
@@ -106,7 +117,7 @@ If you omit the \`host\` field, it defaults to the US Cloud endpoint.
 \`\`\`
 
 ## Tips
+
 - **Start simple**: Add the config with just your key and verify events appear in your PostHog dashboard before customizing further.
 - **Check your dashboard**: After deploying, visit your PostHog project to confirm page view events are flowing in.
-- **Production only**: Consider adding \`analytics.json\` only in your production/deployment setup to avoid tracking local development traffic.
-`;
+- **Production only**: Consider adding \`analytics.json\` only in your production/deployment setup to avoid tracking local development traffic.`;

package/dist/templates/mdx/buttons.mdx.d.ts

@@ -1 +1 @@
-export declare const buttonsMdxTemplate = "---\ntitle: \"Buttons\"\ndescription: \"A flexible action component supporting variants, sizes, icons, and links.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n# Buttons\nA flexible action component supporting variants, sizes, icons, and links.\n\nButtons help users initiate actions or navigate to other pages. Use variants to convey emphasis, size for hierarchy, and icons to add clarity.\n\n## Button Usage\nYou can use the Button component directly within your MDX files without any import. The following examples show basic usage:\n\n```mdx\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n```\n\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n\n### Sizes\n\n```mdx\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n```\n\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n\n### Outline\n\n```mdx\n<Button outline>Outlined</Button>\n```\n\n<Button outline>Outlined</Button>\n\n### Full width\n\n```mdx\n<Button fullWidth>Full width button</Button>\n```\n\n<Button fullWidth>Full width button</Button>\n\n### With icon\n\n```mdx\n<Button icon=\"arrow-right\" iconPosition=\"left\">With left icon</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">With right icon</Button>\n```\n\n<Button icon=\"arrow-right\" iconPosition=\"left\">With left icon</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">With right icon</Button>\n\n### As a link\nButtons can render as links when you provide an `href`.\n\n```mdx\n<Button href=\"/\">Home</Button>\n```\n\n<Button href=\"/\">Home</Button>\n\n## Properties\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the button.\n</Field>\n\n<Field value=\"variant\" type=\"string\">\n  Controls visual emphasis.\n</Field>\n\n- **primary**\n- **secondary**\n- **tertiary**\n\n<Field value=\"size\" type=\"string\">\n  Controls the size of the button.\n</Field>\n\n- **default**\n- **big**\n\n<Field value=\"outline\" type=\"boolean\">\n  When true, renders the outlined style of the selected variant.\n</Field>\n\n<Field value=\"fullWidth\" type=\"boolean\">\n  When true, the button expands to the full width of its container.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional icon to display inside the button.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name or icon node\n\n<Field value=\"iconPosition\" type=\"string\">\n  The position of the icon relative to the text.\n</Field>\n\n- **left**\n- **right**\n\n<Field value=\"href\" type=\"string\">\n  When provided, the button renders as a link (`<a>`), enabling navigation.\n</Field>";
+export declare const buttonsMdxTemplate = "---\ntitle: \"Buttons\"\ndescription: \"A flexible action component supporting variants, sizes, icons, and links.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 7\n---\n\n# Buttons\n\nA flexible action component supporting variants, sizes, icons, and links.\n\nButtons help users initiate actions or navigate to other pages. Use variants to convey emphasis, size for hierarchy, and icons to add clarity.\n\n## Button Usage\n\nYou can use the Button component directly within your MDX files without any import. The following examples show basic usage:\n\n```mdx\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n```\n\n<Button>Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"tertiary\">Tertiary</Button>\n\n### Sizes\n\n```mdx\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n```\n\n<Button size=\"default\">Default size</Button>\n<Button size=\"big\">Big size</Button>\n\n### Outline\n\n```mdx\n<Button outline>Outlined</Button>\n```\n\n<Button outline>Outlined</Button>\n\n### Full width\n\n```mdx\n<Button fullWidth>Full width button</Button>\n```\n\n<Button fullWidth>Full width button</Button>\n\n### With icon\n\n```mdx\n<Button icon=\"arrow-right\" iconPosition=\"left\">\n  With left icon\n</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">\n  With right icon\n</Button>\n```\n\n<Button icon=\"arrow-right\" iconPosition=\"left\">With left icon</Button>\n<Button icon=\"arrow-right\" iconPosition=\"right\">With right icon</Button>\n\n### As a link\n\nButtons can render as links when you provide an `href`.\n\n```mdx\n<Button href=\"/\">Home</Button>\n```\n\n<Button href=\"/\">Home</Button>\n\n## Properties\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the button.\n</Field>\n\n<Field value=\"variant\" type=\"string\">\n  Controls visual emphasis.\n</Field>\n\n- **primary**\n- **secondary**\n- **tertiary**\n\n<Field value=\"size\" type=\"string\">\n  Controls the size of the button.\n</Field>\n\n- **default**\n- **big**\n\n<Field value=\"outline\" type=\"boolean\">\n  When true, renders the outlined style of the selected variant.\n</Field>\n\n<Field value=\"fullWidth\" type=\"boolean\">\n  When true, the button expands to the full width of its container.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional icon to display inside the button.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name or icon node\n\n<Field value=\"iconPosition\" type=\"string\">\n  The position of the icon relative to the text.\n</Field>\n\n- **left**\n- **right**\n\n<Field value=\"href\" type=\"string\">\n  When provided, the button renders as a link (`<a>`), enabling navigation.\n</Field>";

package/dist/templates/mdx/buttons.mdx.js

@@ -6,12 +6,15 @@ category: "Components"
 categoryOrder: 1
 order: 7
 ---
+
 # Buttons
+
 A flexible action component supporting variants, sizes, icons, and links.
 
 Buttons help users initiate actions or navigate to other pages. Use variants to convey emphasis, size for hierarchy, and icons to add clarity.
 
 ## Button Usage
+
 You can use the Button component directly within your MDX files without any import. The following examples show basic usage:
 
 \`\`\`mdx
@@ -53,14 +56,19 @@ You can use the Button component directly within your MDX files without any impo
 ### With icon
 
 \`\`\`mdx
-<Button icon="arrow-right" iconPosition="left">With left icon</Button>
-<Button icon="arrow-right" iconPosition="right">With right icon</Button>
+<Button icon="arrow-right" iconPosition="left">
+  With left icon
+</Button>
+<Button icon="arrow-right" iconPosition="right">
+  With right icon
+</Button>
 \`\`\`
 
 <Button icon="arrow-right" iconPosition="left">With left icon</Button>
 <Button icon="arrow-right" iconPosition="right">With right icon</Button>
 
 ### As a link
+
 Buttons can render as links when you provide an \`href\`.
 
 \`\`\`mdx

package/dist/templates/mdx/callouts.mdx.d.ts

@@ -1 +1 @@
-export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Make your content stand out by using callouts for extra emphasis.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Callouts\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n~~~\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n\n## Properties\n\n<Field value=\"type\" type=\"string\">\n  The type of the callout: `note`, `info`, `warning`, `danger`, or `success`.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A custom [Lucide](https://lucide.dev/icons) icon name. Overrides the default icon for the callout type.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the callout.\n</Field>";
+export declare const calloutsMdxTemplate = "---\ntitle: \"Callouts\"\ndescription: \"Make your content stand out by using callouts for extra emphasis.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n\n# Callouts\n\nMake your content stand out by using callouts for extra emphasis.\n\nYou can format them as Note, Warning, Info, Danger and Success.\n\n## Callouts Usage\n\nYou can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:\n\n```mdx\n<Callout type=\"note\">This is a note callout</Callout>\n\n<Callout type=\"warning\">This is a warning callout</Callout>\n\n<Callout type=\"info\">This is an info callout</Callout>\n\n<Callout type=\"danger\">This is a danger callout</Callout>\n\n<Callout type=\"success\">This is a success callout</Callout>\n```\n\n<Callout type=\"note\">\n  This is a note callout\n</Callout>\n\n<Callout type=\"warning\">\n  This is a warning callout\n</Callout>\n\n<Callout type=\"info\">\n  This is an info callout\n</Callout>\n\n<Callout type=\"danger\">\n  This is a danger callout\n</Callout>\n\n<Callout type=\"success\">\n This is a success callout\n</Callout>\n\n## Properties\n\n<Field value=\"type\" type=\"string\">\n  The type of the callout: `note`, `info`, `warning`, `danger`, or `success`.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A custom [Lucide](https://lucide.dev/icons) icon name. Overrides the default icon for the callout type.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the callout.\n</Field>";

package/dist/templates/mdx/callouts.mdx.js

@@ -6,35 +6,28 @@ category: "Components"
 categoryOrder: 1
 order: 8
 ---
+
 # Callouts
+
 Make your content stand out by using callouts for extra emphasis.
 
 You can format them as Note, Warning, Info, Danger and Success.
 
 ## Callouts Usage
+
 You can use the Callouts component directly within your MDX files without any import. The following example shows a basic usage:
 
-~~~mdx
-<Callout type="note">
-  This is a note callout
-</Callout>
+\`\`\`mdx
+<Callout type="note">This is a note callout</Callout>
 
-<Callout type="warning">
-  This is a warning callout
-</Callout>
+<Callout type="warning">This is a warning callout</Callout>
 
-<Callout type="info">
-  This is an info callout
-</Callout>
+<Callout type="info">This is an info callout</Callout>
 
-<Callout type="danger">
-  This is a danger callout
-</Callout>
+<Callout type="danger">This is a danger callout</Callout>
 
-<Callout type="success">
- This is a success callout
-</Callout>
-~~~
+<Callout type="success">This is a success callout</Callout>
+\`\`\`
 
 <Callout type="note">
   This is a note callout

package/dist/templates/mdx/cards.mdx.d.ts

@@ -1 +1 @@
-export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n# Cards\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n~~~\n\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n\n## Link Card\n\nPass a `href` prop to turn the card into a clickable link. The card will display interactive hover and focus styles automatically.\n\n~~~mdx\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n~~~\n\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the card.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  The [Lucide](https://lucide.dev/icons) icon name to display in the card.\n</Field>\n\n<Field value=\"href\" type=\"string\">\n  A URL or path to link to. When provided, the card becomes a clickable link with interactive styles.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the card.\n</Field>";
+export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n\n# Cards\n\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\n\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n```mdx\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your\n  Doccupine project. It provides a simple and intuitive interface for creating\n  and configuring your project.\n</Card>\n```\n\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n\n## Link Card\n\nPass a `href` prop to turn the card into a clickable link. The card will display interactive hover and focus styles automatically.\n\n```mdx\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n```\n\n<Card title=\"Getting Started\" icon=\"rocket\" href=\"/cards\">\n  Learn how to set up Doccupine and create your first documentation site.\n</Card>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the card.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  The [Lucide](https://lucide.dev/icons) icon name to display in the card.\n</Field>\n\n<Field value=\"href\" type=\"string\">\n  A URL or path to link to. When provided, the card becomes a clickable link with interactive styles.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the card.\n</Field>";

package/dist/templates/mdx/cards.mdx.js

@@ -6,19 +6,24 @@ category: "Components"
 categoryOrder: 1
 order: 6
 ---
+
 # Cards
+
 Duplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.
 
 Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.
 
 ## Cards Usage
+
 You can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:
 
-~~~mdx
+\`\`\`mdx
 <Card title="Note" icon="badge-info">
-  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
+  Doccupine CLI is a command-line tool that helps you create and manage your
+  Doccupine project. It provides a simple and intuitive interface for creating
+  and configuring your project.
 </Card>
-~~~
+\`\`\`
 
 <Card title="Note" icon="badge-info">
   Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
@@ -28,11 +33,11 @@ You can use the Cards component directly within your MDX files without any impor
 
 Pass a \`href\` prop to turn the card into a clickable link. The card will display interactive hover and focus styles automatically.
 
-~~~mdx
+\`\`\`mdx
 <Card title="Getting Started" icon="rocket" href="/cards">
   Learn how to set up Doccupine and create your first documentation site.
 </Card>
-~~~
+\`\`\`
 
 <Card title="Getting Started" icon="rocket" href="/cards">
   Learn how to set up Doccupine and create your first documentation site.

package/dist/templates/mdx/code.mdx.d.ts

@@ -1 +1 @@
-export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Learn how to display inline code and code blocks in documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n# Code\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n~~~text\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n~~~\n\n\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```";
+export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Learn how to display inline code and code blocks in documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n\n# Code\n\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\n\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\n\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\n\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n````text\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n````\n\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```";

package/dist/templates/mdx/code.mdx.js

@@ -6,13 +6,17 @@ category: "Components"
 categoryOrder: 1
 order: 3
 ---
+
 # Code
+
 Learn how to display inline code and code blocks in documentation.
 
 ## Adding Code Samples
+
 Both inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.
 
 ### Inline Code
+
 Highlight code within text by wrapping it with backticks:
 
 \`\`\`text
@@ -22,11 +26,12 @@ Enclose any \`word\` or \`phrase\` in backticks to format it as code.
 Enclose any \`word\` or \`phrase\` in backticks to format it as code.
 
 ## Code Blocks
+
 To present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and—if assistant features are enabled—users can request explanations.
 
 You may specify the language for highlighting:
 
-~~~text
+\`\`\`\`text
 \`\`\`java
 class HelloWorld {
     public static void main(String[] args) {
@@ -34,8 +39,7 @@ class HelloWorld {
     }
 }
 \`\`\`
-~~~
-
+\`\`\`\`
 
 \`\`\`java
 class HelloWorld {

package/dist/templates/mdx/color-swatches.mdx.d.ts

@@ -1 +1 @@
-export declare const colorSwatchesMdxTemplate = "---\ntitle: \"Color Swatches\"\ndescription: \"Display color palettes with labeled swatches to document your theme colors.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 15\n---\n# Color Swatches\nDisplay color palettes with labeled swatches to document your theme colors.\n\nThe `ColorSwatch` component renders a visual preview of a color alongside its token name, and `ColorSwatchGroup` arranges multiple swatches in a responsive grid.\n\n## Usage\nYou can use the ColorSwatch components directly within your MDX files without any import:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n\n## Dark Colors\n\nText color automatically adapts based on the background luminance, so dark swatches display white text:\n\n~~~mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n~~~\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n\n## ColorSwatch Properties\n\n<Field value=\"token\" type=\"string\" required>\n  The name or label displayed below the color preview (e.g. a design token name).\n</Field>\n\n<Field value=\"value\" type=\"string\" required>\n  A hex color value (e.g. `#6366F1`). Displayed inside the color preview and used as the background.\n</Field>\n\n## ColorSwatchGroup Properties\n\n<Field value=\"children\" type=\"node\" required>\n  One or more `ColorSwatch` components to display in a responsive grid.\n</Field>";
+export declare const colorSwatchesMdxTemplate = "---\ntitle: \"Color Swatches\"\ndescription: \"Display color palettes with labeled swatches to document your theme colors.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 15\n---\n\n# Color Swatches\n\nDisplay color palettes with labeled swatches to document your theme colors.\n\nThe `ColorSwatch` component renders a visual preview of a color alongside its token name, and `ColorSwatchGroup` arranges multiple swatches in a responsive grid.\n\n## Usage\n\nYou can use the ColorSwatch components directly within your MDX files without any import:\n\n```mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n```\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"primary\" value=\"#6366F1\" />\n  <ColorSwatch token=\"secondary\" value=\"#EC4899\" />\n  <ColorSwatch token=\"success\" value=\"#10B981\" />\n  <ColorSwatch token=\"warning\" value=\"#F59E0B\" />\n  <ColorSwatch token=\"danger\" value=\"#EF4444\" />\n  <ColorSwatch token=\"info\" value=\"#3B82F6\" />\n</ColorSwatchGroup>\n\n## Dark Colors\n\nText color automatically adapts based on the background luminance, so dark swatches display white text:\n\n```mdx\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n```\n\n<ColorSwatchGroup>\n  <ColorSwatch token=\"dark\" value=\"#1E1E2E\" />\n  <ColorSwatch token=\"grayDark\" value=\"#374151\" />\n  <ColorSwatch token=\"gray\" value=\"#6B7280\" />\n  <ColorSwatch token=\"grayLight\" value=\"#D1D5DB\" />\n  <ColorSwatch token=\"light\" value=\"#F9FAFB\" />\n  <ColorSwatch token=\"white\" value=\"#FFFFFF\" />\n</ColorSwatchGroup>\n\n## ColorSwatch Properties\n\n<Field value=\"token\" type=\"string\" required>\n  The name or label displayed below the color preview (e.g. a design token name).\n</Field>\n\n<Field value=\"value\" type=\"string\" required>\n  A hex color value (e.g. `#6366F1`). Displayed inside the color preview and used as the background.\n</Field>\n\n## ColorSwatchGroup Properties\n\n<Field value=\"children\" type=\"node\" required>\n  One or more `ColorSwatch` components to display in a responsive grid.\n</Field>";

package/dist/templates/mdx/color-swatches.mdx.js

@@ -6,15 +6,18 @@ category: "Components"
 categoryOrder: 1
 order: 15
 ---
+
 # Color Swatches
+
 Display color palettes with labeled swatches to document your theme colors.
 
 The \`ColorSwatch\` component renders a visual preview of a color alongside its token name, and \`ColorSwatchGroup\` arranges multiple swatches in a responsive grid.
 
 ## Usage
+
 You can use the ColorSwatch components directly within your MDX files without any import:
 
-~~~mdx
+\`\`\`mdx
 <ColorSwatchGroup>
   <ColorSwatch token="primary" value="#6366F1" />
   <ColorSwatch token="secondary" value="#EC4899" />
@@ -23,7 +26,7 @@ You can use the ColorSwatch components directly within your MDX files without an
   <ColorSwatch token="danger" value="#EF4444" />
   <ColorSwatch token="info" value="#3B82F6" />
 </ColorSwatchGroup>
-~~~
+\`\`\`
 
 <ColorSwatchGroup>
   <ColorSwatch token="primary" value="#6366F1" />
@@ -38,7 +41,7 @@ You can use the ColorSwatch components directly within your MDX files without an
 
 Text color automatically adapts based on the background luminance, so dark swatches display white text:
 
-~~~mdx
+\`\`\`mdx
 <ColorSwatchGroup>
   <ColorSwatch token="dark" value="#1E1E2E" />
   <ColorSwatch token="grayDark" value="#374151" />
@@ -47,7 +50,7 @@ Text color automatically adapts based on the background luminance, so dark swatc
   <ColorSwatch token="light" value="#F9FAFB" />
   <ColorSwatch token="white" value="#FFFFFF" />
 </ColorSwatchGroup>
-~~~
+\`\`\`
 
 <ColorSwatchGroup>
   <ColorSwatch token="dark" value="#1E1E2E" />

package/dist/templates/mdx/columns.mdx.d.ts

@@ -1 +1 @@
-export declare const columnsMdxTemplate = "---\ntitle: \"Columns\"\ndescription: \"Columns are used to organize content in a grid-like structure.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n# Columns\nArrange multiple cards neatly in a side-by-side grid layout.\n\nThe `Columns` component helps you organize several `Card` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.\n\n## Columns Usage\nYou can use the `Columns` component to create a grid of cards with a specified number of columns.\n\n```mdx\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n```\n\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n\n## Properties\n\n<Field value=\"cols\" type=\"number\">\n  The number of columns in the grid. Defaults to 1.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the columns.\n</Field>";
+export declare const columnsMdxTemplate = "---\ntitle: \"Columns\"\ndescription: \"Columns are used to organize content in a grid-like structure.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n\n# Columns\n\nArrange multiple cards neatly in a side-by-side grid layout.\n\nThe `Columns` component helps you organize several `Card` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.\n\n## Columns Usage\n\nYou can use the `Columns` component to create a grid of cards with a specified number of columns.\n\n```mdx\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n```\n\n<Columns cols={2}>\n  <Card title=\"Getting Started\" icon=\"rocket\">\n    Kick off your project using our easy quickstart guide.\n  </Card>\n\n  <Card title=\"API Reference\" icon=\"code\">\n    Browse all endpoints, parameters, and code examples for your API integration.\n  </Card>\n</Columns>\n\n## Properties\n\n<Field value=\"cols\" type=\"number\">\n  The number of columns in the grid. Defaults to 1.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the columns.\n</Field>";

package/dist/templates/mdx/columns.mdx.js

@@ -6,12 +6,15 @@ category: "Components"
 categoryOrder: 1
 order: 13
 ---
+
 # Columns
+
 Arrange multiple cards neatly in a side-by-side grid layout.
 
 The \`Columns\` component helps you organize several \`Card\` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.
 
 ## Columns Usage
+
 You can use the \`Columns\` component to create a grid of cards with a specified number of columns.
 
 \`\`\`mdx