doccupine 0.0.89 → 0.0.91

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

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

@@ -1 +1 @@
-export declare const commandsMdxTemplate = "---\ntitle: \"Commands\"\ndescription: \"In this page, you can find all the commands available in Doccupine CLI.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\norder: 1\n---\n# Commands\nIn this page, you can find all the commands available in Doccupine CLI.\n\n## Run Doccupine CLI\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n```bash\nnpx doccupine\n```\n\nOnce you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.\nAfter selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n## Options\n\n| Flag | Description |\n|---|---|\n| `--port <port>` | Port for the dev server (default: `3000`). Auto-increments if taken. |\n| `--verbose` | Show all Next.js output including compilation details. |\n| `--reset` | Re-prompt for watch/output directories. |\n\n## Verbose mode\n\n```bash\nnpx doccupine --verbose\n```\n\n<Callout type=\"note\">\n  This will show Next.js output in the terminal, providing detailed logs useful for debugging during development.\n</Callout>\n\n## Generate the website\n\n```bash\nnpx doccupine build\n```\n\nThis scaffolds the Next.js app from your MDX files without starting the development server. To produce a production build, run `npm install && npm run build` in the generated output directory.\n\n## Show current configuration\n\n```bash\nnpx doccupine config --show\n```\n\nThis will show the current configuration for Doccupine.\n\n## Reset configuration\n\n```bash\nnpx doccupine config --reset\n```\n\nThis will reset the current configuration for Doccupine.";
+export declare const commandsMdxTemplate = "---\ntitle: \"Commands\"\ndescription: \"In this page, you can find all the commands available in Doccupine CLI.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\norder: 1\n---\n\n# Commands\n\nIn this page, you can find all the commands available in Doccupine CLI.\n\n## Run Doccupine CLI\n\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n```bash\nnpx doccupine\n```\n\nOnce you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.\nAfter selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n## Options\n\n| Flag            | Description                                                          |\n| --------------- | -------------------------------------------------------------------- |\n| `--port <port>` | Port for the dev server (default: `3000`). Auto-increments if taken. |\n| `--verbose`     | Show all Next.js output including compilation details.               |\n| `--reset`       | Re-prompt for watch/output directories.                              |\n\n## Verbose mode\n\n```bash\nnpx doccupine --verbose\n```\n\n<Callout type=\"note\">\n  This will show Next.js output in the terminal, providing detailed logs useful for debugging during development.\n</Callout>\n\n## Generate the website\n\n```bash\nnpx doccupine build\n```\n\nThis scaffolds the Next.js app from your MDX files without starting the development server. To produce a production build, run `npm install && npm run build` in the generated output directory.\n\n## Show current configuration\n\n```bash\nnpx doccupine config --show\n```\n\nThis will show the current configuration for Doccupine.\n\n## Reset configuration\n\n```bash\nnpx doccupine config --reset\n```\n\nThis will reset the current configuration for Doccupine.";

package/dist/templates/mdx/commands.mdx.js

@@ -6,10 +6,13 @@ category: "Getting Started"
 categoryOrder: 0
 order: 1
 ---
+
 # Commands
+
 In this page, you can find all the commands available in Doccupine CLI.
 
 ## Run Doccupine CLI
+
 Create a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:
 
 \`\`\`bash
@@ -23,11 +26,11 @@ This will start the development server on port 3000. Open your browser and navig
 
 ## Options
 
-| Flag | Description |
-|---|---|
+| Flag            | Description                                                          |
+| --------------- | -------------------------------------------------------------------- |
 | \`--port <port>\` | Port for the dev server (default: \`3000\`). Auto-increments if taken. |
-| \`--verbose\` | Show all Next.js output including compilation details. |
-| \`--reset\` | Re-prompt for watch/output directories. |
+| \`--verbose\`     | Show all Next.js output including compilation details.               |
+| \`--reset\`       | Re-prompt for watch/output directories.                              |
 
 ## Verbose mode
 

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

@@ -1 +1 @@
-export declare const componentsMdxTemplate = "---\ntitle: \"Components\"\ndescription: \"Explore the full library of built-in components available in your documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 0\n---\n# Components\n\nDoccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.\n\n<Columns cols={3}>\n  <Card title=\"Headers and Text\" icon=\"heading\" href=\"/headers-and-text\">\n    Headings, paragraphs, bold, italic, links, and other text formatting.\n  </Card>\n  <Card title=\"Lists and Tables\" icon=\"list\" href=\"/lists-and-tables\">\n    Ordered lists, unordered lists, and data tables.\n  </Card>\n  <Card title=\"Code\" icon=\"code\" href=\"/code\">\n    Inline code, fenced code blocks, and syntax highlighting.\n  </Card>\n  <Card title=\"Accordion\" icon=\"chevrons-down\" href=\"/accordion\">\n    Collapsible sections for organizing lengthy content.\n  </Card>\n  <Card title=\"Tabs\" icon=\"panel-top\" href=\"/tabs\">\n    Tabbed interfaces for grouping related content.\n  </Card>\n  <Card title=\"Cards\" icon=\"square\" href=\"/cards\">\n    Visual containers for content, icons, and links.\n  </Card>\n  <Card title=\"Buttons\" icon=\"mouse-pointer-click\" href=\"/buttons\">\n    Action components with variants, sizes, and icons.\n  </Card>\n  <Card title=\"Callouts\" icon=\"megaphone\" href=\"/callouts\">\n    Highlighted blocks for tips, warnings, and important notes.\n  </Card>\n  <Card title=\"Images and Embeds\" icon=\"image\" href=\"/images-and-embeds\">\n    Images, videos, and embedded content.\n  </Card>\n  <Card title=\"Icons\" icon=\"smile\" href=\"/icons\">\n    Lucide icons you can use anywhere in your docs.\n  </Card>\n  <Card title=\"Fields\" icon=\"text-cursor-input\" href=\"/fields\">\n    Property and parameter documentation blocks.\n  </Card>\n  <Card title=\"Update\" icon=\"bell\" href=\"/update\">\n    Changelog and update announcement blocks.\n  </Card>\n  <Card title=\"Columns\" icon=\"columns-3\" href=\"/columns\">\n    Grid layouts for arranging cards and content side by side.\n  </Card>\n  <Card title=\"Steps\" icon=\"footprints\" href=\"/steps\">\n    Numbered step-by-step guides and walkthroughs.\n  </Card>\n  <Card title=\"Color Swatches\" icon=\"palette\" href=\"/color-swatches\">\n    Visual color palette swatches to document your theme colors.\n  </Card>\n</Columns>";
+export declare const componentsMdxTemplate = "---\ntitle: \"Components\"\ndescription: \"Explore the full library of built-in components available in your documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 0\n---\n\n# Components\n\nDoccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.\n\n<Columns cols={3}>\n  <Card title=\"Headers and Text\" icon=\"heading\" href=\"/headers-and-text\">\n    Headings, paragraphs, bold, italic, links, and other text formatting.\n  </Card>\n  <Card title=\"Lists and Tables\" icon=\"list\" href=\"/lists-and-tables\">\n    Ordered lists, unordered lists, and data tables.\n  </Card>\n  <Card title=\"Code\" icon=\"code\" href=\"/code\">\n    Inline code, fenced code blocks, and syntax highlighting.\n  </Card>\n  <Card title=\"Accordion\" icon=\"chevrons-down\" href=\"/accordion\">\n    Collapsible sections for organizing lengthy content.\n  </Card>\n  <Card title=\"Tabs\" icon=\"panel-top\" href=\"/tabs\">\n    Tabbed interfaces for grouping related content.\n  </Card>\n  <Card title=\"Cards\" icon=\"square\" href=\"/cards\">\n    Visual containers for content, icons, and links.\n  </Card>\n  <Card title=\"Buttons\" icon=\"mouse-pointer-click\" href=\"/buttons\">\n    Action components with variants, sizes, and icons.\n  </Card>\n  <Card title=\"Callouts\" icon=\"megaphone\" href=\"/callouts\">\n    Highlighted blocks for tips, warnings, and important notes.\n  </Card>\n  <Card title=\"Images and Embeds\" icon=\"image\" href=\"/images-and-embeds\">\n    Images, videos, and embedded content.\n  </Card>\n  <Card title=\"Icons\" icon=\"smile\" href=\"/icons\">\n    Lucide icons you can use anywhere in your docs.\n  </Card>\n  <Card title=\"Fields\" icon=\"text-cursor-input\" href=\"/fields\">\n    Property and parameter documentation blocks.\n  </Card>\n  <Card title=\"Update\" icon=\"bell\" href=\"/update\">\n    Changelog and update announcement blocks.\n  </Card>\n  <Card title=\"Columns\" icon=\"columns-3\" href=\"/columns\">\n    Grid layouts for arranging cards and content side by side.\n  </Card>\n  <Card title=\"Steps\" icon=\"footprints\" href=\"/steps\">\n    Numbered step-by-step guides and walkthroughs.\n  </Card>\n  <Card title=\"Color Swatches\" icon=\"palette\" href=\"/color-swatches\">\n    Visual color palette swatches to document your theme colors.\n  </Card>\n</Columns>";

package/dist/templates/mdx/components.mdx.js

@@ -6,6 +6,7 @@ category: "Components"
 categoryOrder: 1
 order: 0
 ---
+
 # Components
 
 Doccupine includes a rich set of built-in components you can use directly in your MDX files - no imports needed. Browse the full library below.

package/dist/templates/mdx/deployment-and-hosting.mdx.d.ts

@@ -1 +1 @@
-export declare const deploymentAndHostingMdxTemplate = "---\ntitle: \"Deployment & Hosting\"\ndescription: \"Deploy your documentation site with the Doccupine Platform or self-host on any platform that supports Next.js.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 11\n---\n# Deployment & Hosting\nThe fastest way to deploy your documentation is with the [Doccupine Platform](https://www.doccupine.com). If you prefer to manage your own infrastructure, you can self-host the generated Next.js app on any platform.\n\n## Doccupine Platform\n\nSign up at [doccupine.com](https://www.doccupine.com) and connect your repository. Your documentation site is live in minutes - no build configuration, no infrastructure to manage.\n\n<Callout type=\"success\">\n  The Doccupine Platform is the recommended way to deploy. It handles builds, hosting, SSL, and updates automatically so you can focus on writing documentation.\n</Callout>\n\n### What you get\n- **Automatic deployments** on every push to your repository\n- **Site customization** through a visual dashboard - no code changes needed\n- **Team collaboration** so your whole team can manage docs together\n- **Custom domains** with automatic SSL\n- **AI Assistant and MCP server** included out of the box, no API key required\n- **Zero maintenance** - no servers, no build pipelines, no dependency updates\n\n### Getting started\n1. Create an account at [doccupine.com](https://www.doccupine.com).\n2. Connect your GitHub repository.\n3. Your site is deployed automatically.\n\nEvery push to your repository triggers a new deployment. You can customize your site's appearance, domain, and settings from the dashboard. See the [Platform Overview](/platform) for a full walkthrough of the dashboard, editor, and configuration options.\n\n---\n\n## Self-hosting\n\nDoccupine generates a standard Next.js app, so you can deploy it anywhere that supports Node.js or Next.js.\n\n<Callout type=\"warning\">\n  Deploy the generated website directory (the Next.js app), not your MDX source folder. In a monorepo, set the root directory to the generated site folder.\n</Callout>\n\n<Callout type=\"note\">\n  Self-hosting requires you to manage your own build pipeline, hosting, SSL certificates, and AI provider API keys. For a hands-off experience, consider the [Doccupine Platform](https://www.doccupine.com).\n</Callout>\n\n### Popular hosting options\n\n- **Vercel** - native Next.js support, zero-config deploys. Connect your repo and set the root directory to the generated app folder.\n- **Netlify** - supports Next.js via the `@netlify/plugin-nextjs` adapter. Works with the standard `next build` output.\n- **AWS Amplify** - fully managed hosting with CI/CD. Supports Next.js SSR out of the box.\n- **Cloudflare Pages** - deploy using the `@cloudflare/next-on-pages` adapter for edge-based hosting.\n- **Docker** - build a container from the generated app using the standard [Next.js Docker example](https://github.com/vercel/next.js/tree/canary/examples/with-docker) and deploy to any container platform.\n- **Node.js server** - run `next build && next start` on any server or VPS with Node.js installed.\n\n### Sitemap and robots.txt\nDoccupine generates `sitemap.xml` and `robots.txt` automatically when you set a site URL. This is required for search engine indexing and is strongly recommended for any public deployment.\n\nSet the URL in `config.json`:\n\n```json\n{\n  \"url\": \"https://docs.example.com\"\n}\n```\n\nAt deploy time, you can override the value with the `NEXT_PUBLIC_SITE_URL` environment variable - useful for preview deployments or staging environments.\n\n```bash\nNEXT_PUBLIC_SITE_URL=https://staging.example.com\n```\n\nThe generated sitemap includes every page from every [section](/sections), with `lastModified` derived from each page's frontmatter `date` or the file's modification time. When no URL is configured, the sitemap is skipped and `robots.txt` is emitted without a sitemap reference.\n\n### Troubleshooting\n- **Build failed** - check build logs. Ensure your lockfile and correct Node.js version are present.\n- **Missing content** - verify your MDX files and assets are in the repository.\n- **SSR issues on edge platforms** - some features (like the AI chat API routes) require a Node.js runtime. Check your platform's documentation for SSR/API route support.";
+export declare const deploymentAndHostingMdxTemplate = "---\ntitle: \"Deployment & Hosting\"\ndescription: \"Deploy your documentation site with the Doccupine Platform or self-host on any platform that supports Next.js.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 11\n---\n\n# Deployment & Hosting\n\nThe fastest way to deploy your documentation is with the [Doccupine Platform](https://www.doccupine.com). If you prefer to manage your own infrastructure, you can self-host the generated Next.js app on any platform.\n\n## Doccupine Platform\n\nSign up at [doccupine.com](https://www.doccupine.com) and connect your repository. Your documentation site is live in minutes - no build configuration, no infrastructure to manage.\n\n<Callout type=\"success\">\n  The Doccupine Platform is the recommended way to deploy. It handles builds, hosting, SSL, and updates automatically so you can focus on writing documentation.\n</Callout>\n\n### What you get\n\n- **Automatic deployments** on every push to your repository\n- **Site customization** through a visual dashboard - no code changes needed\n- **Team collaboration** so your whole team can manage docs together\n- **Custom domains** with automatic SSL\n- **AI Assistant and MCP server** included out of the box, no API key required\n- **Zero maintenance** - no servers, no build pipelines, no dependency updates\n\n### Getting started\n\n1. Create an account at [doccupine.com](https://www.doccupine.com).\n2. Connect your GitHub repository.\n3. Your site is deployed automatically.\n\nEvery push to your repository triggers a new deployment. You can customize your site's appearance, domain, and settings from the dashboard. See the [Platform Overview](/platform) for a full walkthrough of the dashboard, editor, and configuration options.\n\n---\n\n## Self-hosting\n\nDoccupine generates a standard Next.js app, so you can deploy it anywhere that supports Node.js or Next.js.\n\n<Callout type=\"warning\">\n  Deploy the generated website directory (the Next.js app), not your MDX source folder. In a monorepo, set the root directory to the generated site folder.\n</Callout>\n\n<Callout type=\"note\">\n  Self-hosting requires you to manage your own build pipeline, hosting, SSL certificates, and AI provider API keys. For a hands-off experience, consider the [Doccupine Platform](https://www.doccupine.com).\n</Callout>\n\n### Popular hosting options\n\n- **Vercel** - native Next.js support, zero-config deploys. Connect your repo and set the root directory to the generated app folder.\n- **Netlify** - supports Next.js via the `@netlify/plugin-nextjs` adapter. Works with the standard `next build` output.\n- **AWS Amplify** - fully managed hosting with CI/CD. Supports Next.js SSR out of the box.\n- **Cloudflare Pages** - deploy using the `@cloudflare/next-on-pages` adapter for edge-based hosting.\n- **Docker** - build a container from the generated app using the standard [Next.js Docker example](https://github.com/vercel/next.js/tree/canary/examples/with-docker) and deploy to any container platform.\n- **Node.js server** - run `next build && next start` on any server or VPS with Node.js installed.\n\n### Sitemap and robots.txt\n\nDoccupine generates `sitemap.xml` and `robots.txt` automatically when you set a site URL. This is required for search engine indexing and is strongly recommended for any public deployment.\n\nSet the URL in `config.json`:\n\n```json\n{\n  \"url\": \"https://docs.example.com\"\n}\n```\n\nAt deploy time, you can override the value with the `NEXT_PUBLIC_SITE_URL` environment variable - useful for preview deployments or staging environments.\n\n```bash\nNEXT_PUBLIC_SITE_URL=https://staging.example.com\n```\n\nThe generated sitemap includes every page from every [section](/sections), with `lastModified` derived from each page's frontmatter `date` or the file's modification time. When no URL is configured, the sitemap is skipped and `robots.txt` is emitted without a sitemap reference.\n\n### Troubleshooting\n\n- **Build failed** - check build logs. Ensure your lockfile and correct Node.js version are present.\n- **Missing content** - verify your MDX files and assets are in the repository.\n- **SSR issues on edge platforms** - some features (like the AI chat API routes) require a Node.js runtime. Check your platform's documentation for SSR/API route support.";