doccupine 0.0.108 → 0.0.110

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

@@ -17,12 +17,11 @@ The \`Columns\` component helps you organize several \`Card\` elements into a vi
 
 You can use the \`Columns\` component to create a grid of cards with a specified number of columns.
 
-\`\`\`mdx
+\`\`\`html
 <Columns cols={2}>
   <Card title="Getting Started" icon="rocket">
     Kick off your project using our easy quickstart guide.
   </Card>
-
   <Card title="API Reference" icon="code">
     Browse all endpoints, parameters, and code examples for your API integration.
   </Card>
@@ -33,7 +32,6 @@ You can use the \`Columns\` component to create a grid of cards with a specified
   <Card title="Getting Started" icon="rocket">
     Kick off your project using our easy quickstart guide.
   </Card>
-
   <Card title="API Reference" icon="code">
     Browse all endpoints, parameters, and code examples for your API integration.
   </Card>

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\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.";
+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 directory. In a monorepo, set the root directory to the generated site directory.\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 directory.\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.";

package/dist/templates/mdx/deployment-and-hosting.mdx.js

@@ -43,7 +43,7 @@ Every push to your repository triggers a new deployment. You can customize your
 Doccupine generates a standard Next.js app, so you can deploy it anywhere that supports Node.js or Next.js.
 
 <Callout type="warning">
-  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.
+  Deploy the generated website directory (the Next.js app), not your MDX source directory. In a monorepo, set the root directory to the generated site directory.
 </Callout>
 
 <Callout type="note">
@@ -52,7 +52,7 @@ Doccupine generates a standard Next.js app, so you can deploy it anywhere that s
 
 ### Popular hosting options
 
-- **Vercel** - native Next.js support, zero-config deploys. Connect your repo and set the root directory to the generated app folder.
+- **Vercel** - native Next.js support, zero-config deploys. Connect your repo and set the root directory to the generated app directory.
 - **Netlify** - supports Next.js via the \`@netlify/plugin-nextjs\` adapter. Works with the standard \`next build\` output.
 - **AWS Amplify** - fully managed hosting with CI/CD. Supports Next.js SSR out of the box.
 - **Cloudflare Pages** - deploy using the \`@cloudflare/next-on-pages\` adapter for edge-based hosting.

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

@@ -1 +1 @@
-export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"Configure parameters for your API or SDK documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n\n# Fields\n\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\n\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n\n```mdx\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n  The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n  The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n  Whether the field is required.\n</Field>";
+export declare const fieldsMdxTemplate = "---\ntitle: \"Fields\"\ndescription: \"Configure parameters for your API or SDK documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n\n# Fields\n\nConfigure parameters for your API or SDK documentation.\n\nFields allow you to describe both the **inputs** (parameters) and **outputs** (responses) of your API. The main field component is available: `Field` for parameters and for responses.\n\n## Fields Usage\n\nUse the `<Field>` component to declare API or SDK parameters, or define the return values of an API.\n\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n\n```html\n<Field value=\"param\" type=\"string\" required>\n  Example definition of a parameter field.\n</Field>\n```\n\n## Properties\n\n<Field value=\"value\" type=\"string\" required>\n  The name of the field.\n</Field>\n\n<Field value=\"type\" type=\"string\" required>\n  The type of the field.\n</Field>\n\n<Field value=\"required\" type=\"boolean\">\n  Whether the field is required.\n</Field>";

package/dist/templates/mdx/fields.mdx.js

@@ -21,7 +21,7 @@ Use the \`<Field>\` component to declare API or SDK parameters, or define the re
   Example definition of a parameter field.
 </Field>
 
-\`\`\`mdx
+\`\`\`html
 <Field value="param" type="string" required>
   Example definition of a parameter field.
 </Field>

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

@@ -1 +1 @@
-export declare const fontsMdxTemplate = "---\ntitle: \"Fonts\"\ndescription: \"Customize the documentation typography with a fonts.json file (Google Fonts or local custom fonts).\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 7\n---\n\n# Fonts\n\nDefine your site\u2019s typography with a `fonts.json` file. You can load fonts from Google Fonts or from local font files bundled with your project.\n\n## fonts.json\n\nPlace a `fonts.json` at your project root (the same folder where you execute `npx doccupine`). Choose one of the following configurations depending on the source of your fonts.\n\n## Google Fonts\n\nUse this when your font is hosted by Google Fonts.\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": \"400\"\n  }\n}\n```\n\n### Rules\n\n- **fontName**: Capitalize each word. If the name contains spaces, replace them with `_`.\n  - Example: \"Work Sans\" \u2192 `Work_Sans`\n- **subsets**: Pick the subsets you need (for example, `latin`).\n- **weight**: The font weight to load - a single string (for example, `\"400\"`) or an array of strings (for example, `[\"400\", \"500\", \"700\"]`).\n\n<Callout type=\"warning\">\n  The `fontName` must match the Google Fonts name exactly - capitalize each word and replace spaces with underscores.\n</Callout>\n\n### Tips\n\n- **One primary family**: Start with a single family and weight, then add more if needed.\n- **Readability**: Choose readable body fonts; reserve display fonts for headings.\n\n## Local custom fonts\n\nUse this when you want to ship your own font files. Upload your font files to the Next.js `public` directory, then reference them with relative paths.\n\n```json\n{\n  \"localFonts\": {\n    \"src\": [\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"400\",\n        \"style\": \"normal\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"400\",\n        \"style\": \"italic\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"700\",\n        \"style\": \"normal\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"700\",\n        \"style\": \"italic\"\n      }\n    ]\n  }\n}\n```\n\n### Single file shorthand\n\nIf you have only one file, you can use:\n\n```json\n{\n  \"localFonts\": \"../public/font.woff\"\n}\n```\n\n### Rules\n\n- **Upload files**: Place `font.woff` (and any additional weights/styles) in your Next.js `public` directory.\n- **path**: Use a relative path to the file from where it is consumed by your build tooling; the example above uses `../public/font.woff`.\n- **weight**: String value of the font weight (for example, `\"400\"`, `\"700\"`).\n- **style**: `\"normal\"` or `\"italic\"`.\n\n### Tips\n\n- **Provide only what you need**: Include the minimal set of weights/styles to keep bundle size small.\n- **File formats**: `.woff` is broadly supported and recommended for the web.\n\n## Behavior\n\n- **Placement**: Put `fonts.json` in the project root alongside `config.json` and (optionally) `theme.json`.\n- **Validation**: Follow the naming rule for `googleFont.fontName` (capitalize, replace spaces with `_`).\n\n<Callout type=\"note\">\n  When using local fonts, ensure the referenced files exist under the Next.js `public` directory. The paths in `fonts.json` are relative to where they are consumed by the build tooling.\n</Callout>\n\n## Examples\n\n- **Google Fonts (single weight)**\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": \"400\"\n  }\n}\n```\n\n- **Google Fonts (multiple weights)**\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": [\"400\", \"500\", \"600\", \"700\"]\n  }\n}\n```\n\n- **Local fonts (multiple weights/styles)**\n\n```json\n{\n  \"localFonts\": {\n    \"src\": [\n      { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"normal\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"italic\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"normal\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"italic\" }\n    ]\n  }\n}\n```";
+export declare const fontsMdxTemplate = "---\ntitle: \"Fonts\"\ndescription: \"Customize the documentation typography with a fonts.json file (Google Fonts or local custom fonts).\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 7\n---\n\n# Fonts\n\nDefine your site\u2019s typography with a `fonts.json` file. You can load fonts from Google Fonts or from local font files bundled with your project.\n\n## fonts.json\n\nPlace a `fonts.json` at your project root (the same directory where you execute `npx doccupine`). Choose one of the following configurations depending on the source of your fonts.\n\n## Google Fonts\n\nUse this when your font is hosted by Google Fonts.\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": \"400\"\n  }\n}\n```\n\n### Rules\n\n- **fontName**: Capitalize each word. If the name contains spaces, replace them with `_`.\n  - Example: \"Work Sans\" \u2192 `Work_Sans`\n- **subsets**: Pick the subsets you need (for example, `latin`).\n- **weight**: The font weight to load - a single string (for example, `\"400\"`) or an array of strings (for example, `[\"400\", \"500\", \"700\"]`).\n\n<Callout type=\"warning\">\n  The `fontName` must match the Google Fonts name exactly - capitalize each word and replace spaces with underscores.\n</Callout>\n\n### Tips\n\n- **One primary family**: Start with a single family and weight, then add more if needed.\n- **Readability**: Choose readable body fonts; reserve display fonts for headings.\n\n## Local custom fonts\n\nUse this when you want to ship your own font files. Upload your font files to the Next.js `public` directory, then reference them with relative paths.\n\n```json\n{\n  \"localFonts\": {\n    \"src\": [\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"400\",\n        \"style\": \"normal\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"400\",\n        \"style\": \"italic\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"700\",\n        \"style\": \"normal\"\n      },\n      {\n        \"path\": \"../public/font.woff\",\n        \"weight\": \"700\",\n        \"style\": \"italic\"\n      }\n    ]\n  }\n}\n```\n\n### Single file shorthand\n\nIf you have only one file, you can use:\n\n```json\n{\n  \"localFonts\": \"../public/font.woff\"\n}\n```\n\n### Rules\n\n- **Upload files**: Place `font.woff` (and any additional weights/styles) in your Next.js `public` directory.\n- **path**: Use a relative path to the file from where it is consumed by your build tooling; the example above uses `../public/font.woff`.\n- **weight**: String value of the font weight (for example, `\"400\"`, `\"700\"`).\n- **style**: `\"normal\"` or `\"italic\"`.\n\n### Tips\n\n- **Provide only what you need**: Include the minimal set of weights/styles to keep bundle size small.\n- **File formats**: `.woff` is broadly supported and recommended for the web.\n\n## Behavior\n\n- **Placement**: Put `fonts.json` in the project root alongside `config.json` and (optionally) `theme.json`.\n- **Validation**: Follow the naming rule for `googleFont.fontName` (capitalize, replace spaces with `_`).\n\n<Callout type=\"note\">\n  When using local fonts, ensure the referenced files exist under the Next.js `public` directory. The paths in `fonts.json` are relative to where they are consumed by the build tooling.\n</Callout>\n\n## Examples\n\n- **Google Fonts (single weight)**\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": \"400\"\n  }\n}\n```\n\n- **Google Fonts (multiple weights)**\n\n```json\n{\n  \"googleFont\": {\n    \"fontName\": \"Work_Sans\",\n    \"subsets\": [\"latin\"],\n    \"weight\": [\"400\", \"500\", \"600\", \"700\"]\n  }\n}\n```\n\n- **Local fonts (multiple weights/styles)**\n\n```json\n{\n  \"localFonts\": {\n    \"src\": [\n      { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"normal\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"italic\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"normal\" },\n      { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"italic\" }\n    ]\n  }\n}\n```";

package/dist/templates/mdx/fonts.mdx.js

@@ -13,7 +13,7 @@ Define your site’s typography with a \`fonts.json\` file. You can load fonts f
 
 ## fonts.json
 
-Place a \`fonts.json\` at your project root (the same folder where you execute \`npx doccupine\`). Choose one of the following configurations depending on the source of your fonts.
+Place a \`fonts.json\` at your project root (the same directory where you execute \`npx doccupine\`). Choose one of the following configurations depending on the source of your fonts.
 
 ## Google Fonts
 

package/dist/templates/mdx/footer-links.mdx.d.ts

@@ -1 +1 @@
-export declare const footerLinksMdxTemplate = "---\ntitle: \"Footer Links\"\ndescription: \"Add static links at the bottom of the documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 4\n---\n\n# Footer Links\n\nAdd a row of static links at the bottom of your documentation pages, just above the footer. Links open in a new tab and are useful for pointing users to related resources, repositories, or external docs.\n\n## links.json\n\nPlace a `links.json` at your project root (the same folder where you execute `npx doccupine`). When present, Doccupine displays the links at the bottom of each page. You can add as many links as you need.\n\n### Example links.json\n\n```json\n[\n  {\n    \"title\": \"Back to Home\",\n    \"url\": \"https://doccupine.com\",\n    \"icon\": \"arrow-left\"\n  },\n  {\n    \"title\": \"GitHub\",\n    \"url\": \"https://github.com/doccupine\",\n    \"icon\": \"git-branch\"\n  },\n  {\n    \"title\": \"Discord\",\n    \"url\": \"https://discord.gg/E9BufYGPhG\",\n    \"icon\": \"message-circle\"\n  }\n]\n```\n\n### Fields\n\n- **title**: The label shown for the link.\n- **url**: The destination URL. Links open in a new tab with `target=\"_blank\"` and `rel=\"noopener noreferrer\"`.\n- **icon**: The icon to display next to the label. Icons are from [Lucide](https://lucide.dev/).\n\n## Behavior\n\n- **Empty or missing file**: If `links.json` is empty or not present, the footer links are hidden.\n- **Order**: Links appear in the same order as in the array.\n- **No limit**: Add as many links as you want; they wrap automatically on smaller screens.";
+export declare const footerLinksMdxTemplate = "---\ntitle: \"Footer Links\"\ndescription: \"Add static links at the bottom of the documentation pages.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 4\n---\n\n# Footer Links\n\nAdd a row of static links at the bottom of your documentation pages, just above the footer. Links open in a new tab and are useful for pointing users to related resources, repositories, or external docs.\n\n## links.json\n\nPlace a `links.json` at your project root (the same directory where you execute `npx doccupine`). When present, Doccupine displays the links at the bottom of each page. You can add as many links as you need.\n\n### Example links.json\n\n```json\n[\n  {\n    \"title\": \"Back to Home\",\n    \"url\": \"https://doccupine.com\",\n    \"icon\": \"arrow-left\"\n  },\n  {\n    \"title\": \"GitHub\",\n    \"url\": \"https://github.com/doccupine\",\n    \"icon\": \"git-branch\"\n  },\n  {\n    \"title\": \"Discord\",\n    \"url\": \"https://discord.gg/E9BufYGPhG\",\n    \"icon\": \"message-circle\"\n  }\n]\n```\n\n### Fields\n\n- **title**: The label shown for the link.\n- **url**: The destination URL. Links open in a new tab with `target=\"_blank\"` and `rel=\"noopener noreferrer\"`.\n- **icon**: The icon to display next to the label. Icons are from [Lucide](https://lucide.dev/).\n\n## Behavior\n\n- **Empty or missing file**: If `links.json` is empty or not present, the footer links are hidden.\n- **Order**: Links appear in the same order as in the array.\n- **No limit**: Add as many links as you want; they wrap automatically on smaller screens.";

package/dist/templates/mdx/footer-links.mdx.js

@@ -13,7 +13,7 @@ Add a row of static links at the bottom of your documentation pages, just above
 
 ## links.json
 
-Place a \`links.json\` at your project root (the same folder where you execute \`npx doccupine\`). When present, Doccupine displays the links at the bottom of each page. You can add as many links as you need.
+Place a \`links.json\` at your project root (the same directory where you execute \`npx doccupine\`). When present, Doccupine displays the links at the bottom of each page. You can add as many links as you need.
 
 ### Example links.json
 

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

@@ -1 +1 @@
-export declare const globalsMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\ncategoryIcon: \"settings\"\norder: 1\n---\n\n# Global Configuration\n\nUse a `config.json` file to define project\u2011wide metadata for your documentation site. These values are applied to every generated page unless a page overrides them in its own frontmatter.\n\n## config.json\n\nPlace a `config.json` at your project root (the same folder where you execute `npx doccupine`) to define global metadata for your documentation site.\n\n```json\n{\n  \"name\": \"Doccupine\",\n  \"description\": \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\",\n  \"icon\": \"https://docs.doccupine.com/favicon.ico\",\n  \"image\": \"https://docs.doccupine.com/preview.png\",\n  \"url\": \"https://docs.example.com\"\n}\n```\n\n## Fields\n\nAll fields are optional. Doccupine uses sensible defaults when a field is not set.\n\n- **name**: The primary name of your documentation website. Displayed in the site title and used in various UI elements.\n- **description**: A concise summary of your project, used in site metadata (e.g., HTML meta description) and social previews when not overridden.\n- **icon**: The favicon for your site. You can provide a full URL or a relative path to an asset in your project.\n- **image**: The Open Graph image used when links to your docs are shared on social platforms. Accepts a full URL or a relative path.\n- **url**: The public URL of your deployed site. Used as the base URL for `sitemap.xml` and `robots.txt`. When omitted, no sitemap is generated. Can be overridden at deploy time with the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n## Per-page overrides\n\nAny page can override global values by defining the matching key in its frontmatter. When present, the page's value takes precedence over `config.json` for that page only.\n\n| Frontmatter field | Overrides     | Effect                                                      |\n| ----------------- | ------------- | ----------------------------------------------------------- |\n| **title**         | -             | Page title in metadata and Open Graph                       |\n| **description**   | `description` | Meta description and Open Graph description                 |\n| **name**          | `name`        | Site name shown in the title suffix (e.g. \"Page - My Docs\") |\n| **icon**          | `icon`        | Favicon for this page                                       |\n| **image**         | `image`       | Open Graph preview image                                    |\n| **section**       | -             | Assigns the page to a [section](/sections)                  |\n| **sectionOrder**  | -             | Controls section position in the tab bar                    |\n| **sectionLabel**  | -             | Renames the default \"Docs\" tab (use on `index.mdx`)         |\n\n<Callout type=\"note\">\n  If a key is not specified in a page's frontmatter, Doccupine falls back to the corresponding value in `config.json`.\n</Callout>\n\nExample frontmatter in an `.mdx` file:\n\n```text\n---\ntitle: \"My Feature\"\ndescription: \"A focused description just for this page.\"\nname: \"My Product Docs\"\nicon: \"/custom-favicon.ico\"\nimage: \"/custom-preview.png\"\ndate: \"2026-02-19\"\ncategory: \"Guides\"\n---\n```";
+export declare const globalsMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\ncategoryIcon: \"settings\"\norder: 1\n---\n\n# Global Configuration\n\nUse a `config.json` file to define project\u2011wide metadata for your documentation site. These values are applied to every generated page unless a page overrides them in its own frontmatter.\n\n## config.json\n\nPlace a `config.json` at your project root (the same directory where you execute `npx doccupine`) to define global metadata for your documentation site.\n\n```json\n{\n  \"name\": \"Doccupine\",\n  \"description\": \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\",\n  \"icon\": \"https://docs.doccupine.com/favicon.ico\",\n  \"image\": \"https://docs.doccupine.com/preview.png\",\n  \"url\": \"https://docs.example.com\"\n}\n```\n\n## Fields\n\nAll fields are optional. Doccupine uses sensible defaults when a field is not set.\n\n- **name**: The primary name of your documentation website. Displayed in the site title and used in various UI elements.\n- **description**: A concise summary of your project, used in site metadata (e.g., HTML meta description) and social previews when not overridden.\n- **icon**: The favicon for your site. You can provide a full URL or a relative path to an asset in your project.\n- **image**: The Open Graph image used when links to your docs are shared on social platforms. Accepts a full URL or a relative path.\n- **url**: The public URL of your deployed site. Used as the base URL for `sitemap.xml` and `robots.txt`. When omitted, no sitemap is generated. Can be overridden at deploy time with the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n## Per-page overrides\n\nAny page can override global values by defining the matching key in its frontmatter. When present, the page's value takes precedence over `config.json` for that page only.\n\n| Frontmatter field | Overrides     | Effect                                                      |\n| ----------------- | ------------- | ----------------------------------------------------------- |\n| **title**         | -             | Page title in metadata and Open Graph                       |\n| **description**   | `description` | Meta description and Open Graph description                 |\n| **name**          | `name`        | Site name shown in the title suffix (e.g. \"Page - My Docs\") |\n| **icon**          | `icon`        | Favicon for this page                                       |\n| **image**         | `image`       | Open Graph preview image                                    |\n| **section**       | -             | Assigns the page to a [section](/sections)                  |\n| **sectionOrder**  | -             | Controls section position in the tab bar                    |\n| **sectionLabel**  | -             | Renames the default \"Docs\" tab (use on `index.mdx`)         |\n\n<Callout type=\"note\">\n  If a key is not specified in a page's frontmatter, Doccupine falls back to the corresponding value in `config.json`.\n</Callout>\n\nExample frontmatter in an `.mdx` file:\n\n```text\n---\ntitle: \"My Feature\"\ndescription: \"A focused description just for this page.\"\nname: \"My Product Docs\"\nicon: \"/custom-favicon.ico\"\nimage: \"/custom-preview.png\"\ndate: \"2026-02-19\"\ncategory: \"Guides\"\n---\n```";

package/dist/templates/mdx/globals.mdx.js

@@ -15,7 +15,7 @@ Use a \`config.json\` file to define project‑wide metadata for your documentat
 
 ## config.json
 
-Place a \`config.json\` at your project root (the same folder where you execute \`npx doccupine\`) to define global metadata for your documentation site.
+Place a \`config.json\` at your project root (the same directory where you execute \`npx doccupine\`) to define global metadata for your documentation site.
 
 \`\`\`json
 {

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

@@ -1 +1 @@
-export declare const iconsMdxTemplate = "---\ntitle: \"Icons\"\ndescription: \"Integrate visual icons from well-known libraries to enrich your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\n---\n\n# Icons\n\nIntegrate visual icons from well-known libraries to enrich your documentation.\n\nIcons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.\n\n<Icon name=\"flag\" size={32} />\n\n```mdx\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\n\nYou can use icons directly within text to highlight information or add visual context.\n\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n\n```mdx\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n```\n\n## Properties\n\n<Field value=\"name\" type=\"string\" required>\n  The icon to display.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"size\" type=\"number\">\n  The size of the icon in pixels.\n</Field>\n\n<Field value=\"color\" type=\"string\">\n  The color of the icon as a hex code (for example, `#FF5733`).\n</Field>";
+export declare const iconsMdxTemplate = "---\ntitle: \"Icons\"\ndescription: \"Integrate visual icons from well-known libraries to enrich your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\n---\n\n# Icons\n\nIntegrate visual icons from well-known libraries to enrich your documentation.\n\nIcons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.\n\n<Icon name=\"flag\" size={32} />\n\n```html\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\n\nYou can use icons directly within text to highlight information or add visual context.\n\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n\n```html\n<Icon name=\"flag\" size={16} /> Build your documentation seamlessly.\n```\n\n## Properties\n\n<Field value=\"name\" type=\"string\" required>\n  The icon to display.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"size\" type=\"number\">\n  The size of the icon in pixels.\n</Field>\n\n<Field value=\"color\" type=\"string\">\n  The color of the icon as a hex code (for example, `#FF5733`).\n</Field>";

package/dist/templates/mdx/icons.mdx.js

@@ -15,7 +15,7 @@ Icons can be sourced from Lucide, SVG elements, external URLs, or local files wi
 
 <Icon name="flag" size={32} />
 
-\`\`\`mdx
+\`\`\`html
 <Icon name="flag" size={32} />
 \`\`\`
 
@@ -25,7 +25,7 @@ You can use icons directly within text to highlight information or add visual co
 
 <Icon name="flag" size={16} /> Build your documentation seamlessly.
 
-\`\`\`mdx
+\`\`\`html
 <Icon name="flag" size={16} /> Build your documentation seamlessly.
 \`\`\`
 

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

@@ -1 +1 @@
-export declare const indexMdxTemplate = "---\ntitle: \"Introduction\"\ndescription: \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\ncategoryIcon: \"rocket\"\norder: 0\n---\n\n# Welcome to Doccupine\n\nDoccupine turns a folder of MDX files into a beautiful, production-ready documentation website. Write in standard Markdown, use any of the built-in components, and get a fully themed site with AI-powered search and automatic navigation - all from one command.\n\n```bash\nnpx doccupine\n```\n\nThat's it. Doccupine prompts you for a source directory, generates your site, and starts a dev server at `http://localhost:3000`. Every edit rebuilds instantly.\n\n<Callout type=\"info\">\n  Want a managed experience instead? The [Doccupine Platform](/platform) gives you a browser-based editor, one-click publishing, custom domains, and team collaboration - no local setup needed.\n</Callout>\n\n## How it works\n\nYou write `.mdx` files using Markdown and built-in components like this one. Doccupine watches your files, generates pages, builds the sidebar from your frontmatter, and handles theming, AI chat, and deployment config for you.\n\nEverything on this page - the callout above, the cards below, the code block - is a live example of what your docs can look like out of the box.\n\n<Columns cols={2}>\n  <Card title=\"Start writing\" icon=\"pencil\" href=\"/components\">\n    Rich docs from day one. 14+ components work out of the box - no imports needed.\n  </Card>\n  <Card title=\"Ship it\" icon=\"rocket\" href=\"/deployment-and-hosting\">\n    Deploy to the Doccupine Platform or self-host on any platform that supports Next.js.\n  </Card>\n</Columns>\n\n## Configure your site\n\nDoccupine works with no configuration, but when you're ready to customize, everything is controlled through simple JSON files in your project root.\n\n- [Global settings](/globals) - Site name, description, favicon, and preview image via `config.json`\n- [Navigation](/navigation) - Override the auto-generated sidebar with `navigation.json`\n- [Theme](/theme) - Colors, logos, and dark mode palette via `theme.json`\n- [Fonts](/fonts) - Google Fonts or local font files via `fonts.json`\n- [AI Assistant](/ai-assistant) - Enable the built-in chat with your own API key\n- [MCP Server](/model-context-protocol) - Let AI tools search your docs through `/api/mcp`";
+export declare const indexMdxTemplate = "---\ntitle: \"Introduction\"\ndescription: \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\"\ndate: \"2026-02-19\"\ncategory: \"Getting Started\"\ncategoryOrder: 0\ncategoryIcon: \"rocket\"\norder: 0\n---\n\n# Welcome to Doccupine\n\nDoccupine turns a directory of MDX files into a beautiful, production-ready documentation website. Write in standard Markdown, use any of the built-in components, and get a fully themed site with AI-powered search and automatic navigation - all from one command.\n\n```bash\nnpx doccupine\n```\n\nThat's it. Doccupine prompts you for a source directory, generates your site, and starts a dev server at `http://localhost:3000`. Every edit rebuilds instantly.\n\n<Callout type=\"info\">\n  Want a managed experience instead? The [Doccupine Platform](/platform) gives you a browser-based editor, one-click publishing, custom domains, and team collaboration - no local setup needed.\n</Callout>\n\n## How it works\n\nYou write `.mdx` files using Markdown and built-in components like this one. Doccupine watches your files, generates pages, builds the sidebar from your frontmatter, and handles theming, AI chat, and deployment config for you.\n\nEverything on this page - the callout above, the cards below, the code block - is a live example of what your docs can look like out of the box.\n\n<Columns cols={2}>\n  <Card title=\"Start writing\" icon=\"pencil\" href=\"/components\">\n    Rich docs from day one. 14+ components work out of the box - no imports needed.\n  </Card>\n  <Card title=\"Ship it\" icon=\"rocket\" href=\"/deployment-and-hosting\">\n    Deploy to the Doccupine Platform or self-host on any platform that supports Next.js.\n  </Card>\n</Columns>\n\n## Configure your site\n\nDoccupine works with no configuration, but when you're ready to customize, everything is controlled through simple JSON files in your project root.\n\n- [Global settings](/globals) - Site name, description, favicon, and preview image via `config.json`\n- [Navigation](/navigation) - Override the auto-generated sidebar with `navigation.json`\n- [Theme](/theme) - Colors, logos, and dark mode palette via `theme.json`\n- [Fonts](/fonts) - Google Fonts or local font files via `fonts.json`\n- [AI Assistant](/ai-assistant) - Enable the built-in chat with your own API key\n- [MCP Server](/model-context-protocol) - Let AI tools search your docs through `/api/mcp`";

package/dist/templates/mdx/index.mdx.js

@@ -11,7 +11,7 @@ order: 0
 
 # Welcome to Doccupine
 
-Doccupine turns a folder of MDX files into a beautiful, production-ready documentation website. Write in standard Markdown, use any of the built-in components, and get a fully themed site with AI-powered search and automatic navigation - all from one command.
+Doccupine turns a directory of MDX files into a beautiful, production-ready documentation website. Write in standard Markdown, use any of the built-in components, and get a fully themed site with AI-powered search and automatic navigation - all from one command.
 
 \`\`\`bash
 npx doccupine

package/dist/templates/mdx/media-and-assets.mdx.d.ts

@@ -1 +1 @@
-export declare const mediaAndAssetsMdxTemplate = "---\ntitle: \"Media and assets\"\ndescription: \"Serve static files like images, favicons, fonts, and Open Graph previews from the public directory.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 6\n---\n\n# Media and assets\n\nDoccupine watches a `public` directory in your project root (the same folder where you execute `npx doccupine`) and copies its contents into the generated Next.js `public` folder. Use it to serve static files such as favicons, Open Graph preview images, custom fonts, or any other media your documentation needs.\n\n## The public directory\n\nCreate a `public` folder at your project root. Any file you place inside is automatically synced to the generated site and served from the root URL path.\n\n```text\nmy-docs/\n\u251C\u2500\u2500 public/\n\u2502   \u251C\u2500\u2500 favicon.ico\n\u2502   \u251C\u2500\u2500 og-image.png\n\u2502   \u251C\u2500\u2500 logo.svg\n\u2502   \u2514\u2500\u2500 fonts/\n\u2502       \u2514\u2500\u2500 custom-font.woff2\n\u251C\u2500\u2500 docs/\n\u2502   \u2514\u2500\u2500 index.mdx\n\u251C\u2500\u2500 config.json\n\u2514\u2500\u2500 theme.json\n```\n\n## How assets are served\n\nFiles in the `public` directory are available at the root of your deployed domain. The path inside `public` maps directly to the URL path.\n\n| File                             | URL                                               |\n| -------------------------------- | ------------------------------------------------- |\n| `public/favicon.ico`             | `https://your-domain.com/favicon.ico`             |\n| `public/og-image.png`            | `https://your-domain.com/og-image.png`            |\n| `public/logo.svg`                | `https://your-domain.com/logo.svg`                |\n| `public/fonts/custom-font.woff2` | `https://your-domain.com/fonts/custom-font.woff2` |\n\n## Common use cases\n\n### Favicon\n\nDrop a `favicon.ico` into the `public` folder. Browsers pick it up automatically from the root path.\n\n```text\npublic/favicon.ico \u2192 https://your-domain.com/favicon.ico\n```\n\n### Open Graph preview image\n\nAdd an image for link previews on social media. Reference it in your `config.json` so Doccupine sets the correct meta tags.\n\n```text\npublic/og-image.png \u2192 https://your-domain.com/og-image.png\n```\n\n### Custom fonts\n\nPlace font files in `public` and reference them from your `fonts.json`. See the **Fonts** page for full configuration details.\n\n```text\npublic/fonts/custom-font.woff2 \u2192 https://your-domain.com/fonts/custom-font.woff2\n```\n\n### Images and other media\n\nAny image or file you want to reference in your MDX pages can live in `public`. Use a root-relative path in your content:\n\n```mdx\n![Architecture diagram](/architecture.png)\n```\n\n## Live syncing\n\n<Callout type=\"info\">\n  Doccupine watches the `public` directory for changes while running. When you add, update, or remove a file, the generated site is updated automatically.\n</Callout>\n\n## Tips\n\n- **Keep it flat**: For a small number of files, placing them directly in `public` keeps paths short and simple.\n- **Use subfolders for organization**: For larger projects, group assets into folders like `public/fonts`, `public/images`, or `public/icons`.\n- **Mind file size**: Optimize images before adding them to keep deployment size and load times low.\n- **Consistent naming**: Use lowercase, hyphen-separated filenames (e.g., `og-image.png`) for predictable URLs.";
+export declare const mediaAndAssetsMdxTemplate = "---\ntitle: \"Media and assets\"\ndescription: \"Serve static files like images, favicons, fonts, and Open Graph previews from the public directory.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 6\n---\n\n# Media and assets\n\nDoccupine watches a `public` directory in your project root (the same directory where you execute `npx doccupine`) and copies its contents into the generated Next.js `public` directory. Use it to serve static files such as favicons, Open Graph preview images, custom fonts, or any other media your documentation needs.\n\n## The public directory\n\nCreate a `public` directory at your project root. Any file you place inside is automatically synced to the generated site and served from the root URL path.\n\n```text\nmy-docs/\n\u251C\u2500\u2500 public/\n\u2502   \u251C\u2500\u2500 favicon.ico\n\u2502   \u251C\u2500\u2500 og-image.png\n\u2502   \u251C\u2500\u2500 logo.svg\n\u2502   \u2514\u2500\u2500 fonts/\n\u2502       \u2514\u2500\u2500 custom-font.woff2\n\u251C\u2500\u2500 docs/\n\u2502   \u2514\u2500\u2500 index.mdx\n\u251C\u2500\u2500 config.json\n\u2514\u2500\u2500 theme.json\n```\n\n## How assets are served\n\nFiles in the `public` directory are available at the root of your deployed domain. The path inside `public` maps directly to the URL path.\n\n| File                             | URL                                               |\n| -------------------------------- | ------------------------------------------------- |\n| `public/favicon.ico`             | `https://your-domain.com/favicon.ico`             |\n| `public/og-image.png`            | `https://your-domain.com/og-image.png`            |\n| `public/logo.svg`                | `https://your-domain.com/logo.svg`                |\n| `public/fonts/custom-font.woff2` | `https://your-domain.com/fonts/custom-font.woff2` |\n\n## Common use cases\n\n### Favicon\n\nDrop a `favicon.ico` into the `public` directory. Browsers pick it up automatically from the root path.\n\n```text\npublic/favicon.ico \u2192 https://your-domain.com/favicon.ico\n```\n\n### Open Graph preview image\n\nAdd an image for link previews on social media. Reference it in your `config.json` so Doccupine sets the correct meta tags.\n\n```text\npublic/og-image.png \u2192 https://your-domain.com/og-image.png\n```\n\n### Custom fonts\n\nPlace font files in `public` and reference them from your `fonts.json`. See the **Fonts** page for full configuration details.\n\n```text\npublic/fonts/custom-font.woff2 \u2192 https://your-domain.com/fonts/custom-font.woff2\n```\n\n### Images and other media\n\nAny image or file you want to reference in your MDX pages can live in `public`. Use a root-relative path in your content:\n\n```mdx\n![Architecture diagram](/architecture.png)\n```\n\n## Live syncing\n\n<Callout type=\"info\">\n  Doccupine watches the `public` directory for changes while running. When you add, update, or remove a file, the generated site is updated automatically.\n</Callout>\n\n## Tips\n\n- **Keep it flat**: For a small number of files, placing them directly in `public` keeps paths short and simple.\n- **Use subdirectories for organization**: For larger projects, group assets into directories like `public/fonts`, `public/images`, or `public/icons`.\n- **Mind file size**: Optimize images before adding them to keep deployment size and load times low.\n- **Consistent naming**: Use lowercase, hyphen-separated filenames (e.g., `og-image.png`) for predictable URLs.";

package/dist/templates/mdx/media-and-assets.mdx.js

@@ -9,11 +9,11 @@ order: 6
 
 # Media and assets
 
-Doccupine watches a \`public\` directory in your project root (the same folder where you execute \`npx doccupine\`) and copies its contents into the generated Next.js \`public\` folder. Use it to serve static files such as favicons, Open Graph preview images, custom fonts, or any other media your documentation needs.
+Doccupine watches a \`public\` directory in your project root (the same directory where you execute \`npx doccupine\`) and copies its contents into the generated Next.js \`public\` directory. Use it to serve static files such as favicons, Open Graph preview images, custom fonts, or any other media your documentation needs.
 
 ## The public directory
 
-Create a \`public\` folder at your project root. Any file you place inside is automatically synced to the generated site and served from the root URL path.
+Create a \`public\` directory at your project root. Any file you place inside is automatically synced to the generated site and served from the root URL path.
 
 \`\`\`text
 my-docs/
@@ -44,7 +44,7 @@ Files in the \`public\` directory are available at the root of your deployed dom
 
 ### Favicon
 
-Drop a \`favicon.ico\` into the \`public\` folder. Browsers pick it up automatically from the root path.
+Drop a \`favicon.ico\` into the \`public\` directory. Browsers pick it up automatically from the root path.
 
 \`\`\`text
 public/favicon.ico → https://your-domain.com/favicon.ico
@@ -83,6 +83,6 @@ Any image or file you want to reference in your MDX pages can live in \`public\`
 ## Tips
 
 - **Keep it flat**: For a small number of files, placing them directly in \`public\` keeps paths short and simple.
-- **Use subfolders for organization**: For larger projects, group assets into folders like \`public/fonts\`, \`public/images\`, or \`public/icons\`.
+- **Use subdirectories for organization**: For larger projects, group assets into directories like \`public/fonts\`, \`public/images\`, or \`public/icons\`.
 - **Mind file size**: Optimize images before adding them to keep deployment size and load times low.
 - **Consistent naming**: Use lowercase, hyphen-separated filenames (e.g., \`og-image.png\`) for predictable URLs.`;

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

@@ -1 +1 @@
-export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n\n# Navigation\n\nDoccupine builds your sidebar automatically from your MDX pages. By default, it reads the page frontmatter and groups pages into categories in the order you define. For larger docs, you can take full control with a `navigation.json` file.\n\n## Automatic navigation (default)\n\nWhen no custom navigation is provided, Doccupine generates a structure based on each page's frontmatter.\n\n### Frontmatter fields\n\n- **category**: The category name that groups the page in the sidebar.\n- **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.\n- **order**: The position of the page within its category. Lower numbers appear first.\n- **navIcon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the page's sidebar link.\n- **categoryIcon**: Optional Lucide icon name for the page's category header. The first page in a category that sets it wins.\n\n### Example frontmatter\n\n```text\n---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n```\n\nThis approach is great for small sets of documents. For larger projects, setting these fields on every page can become repetitive.\n\n## Custom navigation with navigation.json\n\nTo centrally define the entire sidebar, create a `navigation.json` at your project root (the same folder where you execute `npx doccupine`). When present, it takes priority over page frontmatter and fully controls the navigation structure.\n\n### Array format\n\nThe simplest format is an array of categories. When using [sections](/sections), this applies to the root section only.\n\n```json\n[\n  {\n    \"label\": \"Getting Started\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Introduction\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"components\", \"title\": \"Components\" },\n      { \"slug\": \"headers-and-text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"lists-and-tables\", \"title\": \"Lists and tables\" },\n      { \"slug\": \"code\", \"title\": \"Code\" },\n      { \"slug\": \"accordion\", \"title\": \"Accordion\" },\n      { \"slug\": \"tabs\", \"title\": \"Tabs\" },\n      { \"slug\": \"cards\", \"title\": \"Cards\" },\n      { \"slug\": \"buttons\", \"title\": \"Buttons\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"image-and-embeds\", \"title\": \"Images and embeds\" },\n      { \"slug\": \"icons\", \"title\": \"Icons\" },\n      { \"slug\": \"fields\", \"title\": \"Fields\" },\n      { \"slug\": \"update\", \"title\": \"Update\" },\n      { \"slug\": \"columns\", \"title\": \"Columns\" },\n      { \"slug\": \"steps\", \"title\": \"Steps\" },\n      { \"slug\": \"color-swatches\", \"title\": \"Color Swatches\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"sections\", \"title\": \"Sections\" },\n      { \"slug\": \"footer-links\", \"title\": \"Footer Links\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"media-and-assets\", \"title\": \"Media and assets\" },\n      { \"slug\": \"fonts\", \"title\": \"Fonts\" },\n      { \"slug\": \"ai-assistant\", \"title\": \"AI Assistant\" },\n      { \"slug\": \"model-context-protocol\", \"title\": \"Model Context Protocol\" },\n      { \"slug\": \"analytics\", \"title\": \"Analytics\" },\n      { \"slug\": \"deployment-and-hosting\", \"title\": \"Deployment & Hosting\" },\n      { \"slug\": \"authentication\", \"title\": \"Authentication\" }\n    ]\n  }\n]\n```\n\n### Object format (per-section)\n\nWhen using [sections](/sections), you can define navigation for each section by using an object keyed by section slug. Sections without a key fall back to auto-generated navigation from frontmatter.\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [\n        { \"slug\": \"\", \"title\": \"Getting Started\" },\n        { \"slug\": \"commands\", \"title\": \"Commands\" }\n      ]\n    }\n  ],\n  \"platform\": [\n    {\n      \"label\": \"Overview\",\n      \"links\": [\n        { \"slug\": \"platform/auth\", \"title\": \"Authentication\" },\n        { \"slug\": \"platform/users\", \"title\": \"Users\" }\n      ]\n    }\n  ]\n}\n```\n\nThe key `\"\"` controls the root section. Other keys match section slugs defined in `sections.json` or derived from frontmatter. See [Sections](/sections) for details on configuring sections.\n\n### Fields\n\n- **label**: The section header shown in the sidebar.\n- **icon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the category header.\n- **links**: An array of page entries for that section.\n  - **slug**: The MDX file slug (filename without extension). Use an empty string `\"\"` for `index.mdx`.\n  - **title**: The display title in the navigation. This can differ from the page's `title` frontmatter.\n  - **icon**: Optional Lucide icon name shown next to the link.\n  - **links**: Optional array of nested child links. See [Nested navigation](#nested-navigation).\n\n## Icons\n\nAdd icons to categories and links to make the sidebar easier to scan. Icons use [Lucide](https://lucide.dev/icons) names in kebab-case (e.g. `rocket`, `book-open`, `settings`). Unknown names render nothing, so a typo never breaks the build.\n\nWith frontmatter, set `navIcon` on a page for its sidebar link and `categoryIcon` for its category:\n\n```text\n---\ntitle: \"Introduction\"\ncategory: \"Getting Started\"\ncategoryOrder: 1\norder: 1\nnavIcon: \"rocket\"\ncategoryIcon: \"book-open\"\n---\n```\n\nWith `navigation.json`, add an `icon` to any category or link:\n\n```json\n[\n  {\n    \"label\": \"Getting Started\",\n    \"icon\": \"book-open\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Introduction\", \"icon\": \"rocket\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\", \"icon\": \"terminal\" }\n    ]\n  }\n]\n```\n\n## Nested navigation\n\nA link in `navigation.json` can hold its own `links` array to create a collapsible group. Groups expand and collapse on click and open automatically when one of their pages is active. Nesting can go as deep as you need.\n\n```json\n[\n  {\n    \"label\": \"Guides\",\n    \"icon\": \"book-open\",\n    \"links\": [\n      { \"slug\": \"guides\", \"title\": \"Overview\", \"icon\": \"compass\" },\n      {\n        \"title\": \"Advanced\",\n        \"icon\": \"settings\",\n        \"links\": [\n          { \"slug\": \"guides/caching\", \"title\": \"Caching\" },\n          { \"slug\": \"guides/streaming\", \"title\": \"Streaming\" }\n        ]\n      }\n    ]\n  }\n]\n```\n\nA group can be a plain label - omit `slug` and it acts only as a collapsible header - or a real page, by adding a `slug` so the group title is also a link.\n\n<Callout type=\"note\">\n  Nested groups are only available through `navigation.json`. Frontmatter navigation is always two levels: category and pages.\n</Callout>\n\n## Precedence and behavior\n\n<Callout type=\"note\">\n  `navigation.json` takes priority over frontmatter. If present, it fully controls the sidebar structure for the sections it covers.\n</Callout>\n\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` -> grouped; `categoryOrder` -> category position; `order` -> page position.\n- When using the object format, sections not listed in `navigation.json` fall back to frontmatter-based navigation.\n- Pages without a `category` appear at the top level.\n\n## Tips\n\n- **Start simple**: Use frontmatter for small docs. Switch to `navigation.json` as the structure grows.\n- **Keep slugs consistent**: `slug` must match the MDX filename (e.g., `text.mdx` -> `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.\n- **Per-section navigation**: Use the object format to define different sidebars for each section. Mix and match - define some sections explicitly and let others auto-generate.";
+export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n\n# Navigation\n\nDoccupine builds your sidebar automatically from your MDX pages. By default, it reads the page frontmatter and groups pages into categories in the order you define. For larger docs, you can take full control with a `navigation.json` file.\n\n## Automatic navigation (default)\n\nWhen no custom navigation is provided, Doccupine generates a structure based on each page's frontmatter.\n\n### Frontmatter fields\n\n- **category**: The category name that groups the page in the sidebar.\n- **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.\n- **order**: The position of the page within its category. Lower numbers appear first.\n- **navIcon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the page's sidebar link.\n- **categoryIcon**: Optional Lucide icon name for the page's category header. The first page in a category that sets it wins.\n\n### Example frontmatter\n\n```text\n---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n```\n\nThis approach is great for small sets of documents. For larger projects, setting these fields on every page can become repetitive.\n\n## Custom navigation with navigation.json\n\nTo centrally define the entire sidebar, create a `navigation.json` at your project root (the same directory where you execute `npx doccupine`). When present, it takes priority over page frontmatter and fully controls the navigation structure.\n\n### Array format\n\nThe simplest format is an array of categories. When using [sections](/sections), this applies to the root section only.\n\n```json\n[\n  {\n    \"label\": \"Getting Started\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Introduction\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"components\", \"title\": \"Components\" },\n      { \"slug\": \"headers-and-text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"lists-and-tables\", \"title\": \"Lists and tables\" },\n      { \"slug\": \"code\", \"title\": \"Code\" },\n      { \"slug\": \"accordion\", \"title\": \"Accordion\" },\n      { \"slug\": \"tabs\", \"title\": \"Tabs\" },\n      { \"slug\": \"cards\", \"title\": \"Cards\" },\n      { \"slug\": \"buttons\", \"title\": \"Buttons\" },\n      { \"slug\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"image-and-embeds\", \"title\": \"Images and embeds\" },\n      { \"slug\": \"icons\", \"title\": \"Icons\" },\n      { \"slug\": \"fields\", \"title\": \"Fields\" },\n      { \"slug\": \"update\", \"title\": \"Update\" },\n      { \"slug\": \"columns\", \"title\": \"Columns\" },\n      { \"slug\": \"steps\", \"title\": \"Steps\" },\n      { \"slug\": \"color-swatches\", \"title\": \"Color Swatches\" }\n    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"globals\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" },\n      { \"slug\": \"sections\", \"title\": \"Sections\" },\n      { \"slug\": \"footer-links\", \"title\": \"Footer Links\" },\n      { \"slug\": \"theme\", \"title\": \"Theme\" },\n      { \"slug\": \"media-and-assets\", \"title\": \"Media and assets\" },\n      { \"slug\": \"fonts\", \"title\": \"Fonts\" },\n      { \"slug\": \"ai-assistant\", \"title\": \"AI Assistant\" },\n      { \"slug\": \"model-context-protocol\", \"title\": \"Model Context Protocol\" },\n      { \"slug\": \"analytics\", \"title\": \"Analytics\" },\n      { \"slug\": \"deployment-and-hosting\", \"title\": \"Deployment & Hosting\" },\n      { \"slug\": \"authentication\", \"title\": \"Authentication\" }\n    ]\n  }\n]\n```\n\n### Object format (per-section)\n\nWhen using [sections](/sections), you can define navigation for each section by using an object keyed by section slug. Sections without a key fall back to auto-generated navigation from frontmatter.\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [\n        { \"slug\": \"\", \"title\": \"Getting Started\" },\n        { \"slug\": \"commands\", \"title\": \"Commands\" }\n      ]\n    }\n  ],\n  \"platform\": [\n    {\n      \"label\": \"Overview\",\n      \"links\": [\n        { \"slug\": \"platform/auth\", \"title\": \"Authentication\" },\n        { \"slug\": \"platform/users\", \"title\": \"Users\" }\n      ]\n    }\n  ]\n}\n```\n\nThe key `\"\"` controls the root section. Other keys match section slugs defined in `sections.json` or derived from frontmatter. See [Sections](/sections) for details on configuring sections.\n\n### Fields\n\n- **label**: The section header shown in the sidebar.\n- **icon**: Optional [Lucide](https://lucide.dev/icons) icon name shown next to the category header.\n- **links**: An array of page entries for that section.\n  - **slug**: The MDX file slug (filename without extension). Use an empty string `\"\"` for `index.mdx`.\n  - **title**: The display title in the navigation. This can differ from the page's `title` frontmatter.\n  - **icon**: Optional Lucide icon name shown next to the link.\n  - **links**: Optional array of nested child links. See [Nested navigation](#nested-navigation).\n\n## Icons\n\nAdd icons to categories and links to make the sidebar easier to scan. Icons use [Lucide](https://lucide.dev/icons) names in kebab-case (e.g. `rocket`, `book-open`, `settings`). Unknown names render nothing, so a typo never breaks the build.\n\nWith frontmatter, set `navIcon` on a page for its sidebar link and `categoryIcon` for its category:\n\n```text\n---\ntitle: \"Introduction\"\ncategory: \"Getting Started\"\ncategoryOrder: 1\norder: 1\nnavIcon: \"rocket\"\ncategoryIcon: \"book-open\"\n---\n```\n\nWith `navigation.json`, add an `icon` to any category or link:\n\n```json\n[\n  {\n    \"label\": \"Getting Started\",\n    \"icon\": \"book-open\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Introduction\", \"icon\": \"rocket\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\", \"icon\": \"terminal\" }\n    ]\n  }\n]\n```\n\n## Nested navigation\n\nA link in `navigation.json` can hold its own `links` array to create a collapsible group. Groups expand and collapse on click and open automatically when one of their pages is active. Nesting can go as deep as you need.\n\n```json\n[\n  {\n    \"label\": \"Guides\",\n    \"icon\": \"book-open\",\n    \"links\": [\n      { \"slug\": \"guides\", \"title\": \"Overview\", \"icon\": \"compass\" },\n      {\n        \"title\": \"Advanced\",\n        \"icon\": \"settings\",\n        \"links\": [\n          { \"slug\": \"guides/caching\", \"title\": \"Caching\" },\n          { \"slug\": \"guides/streaming\", \"title\": \"Streaming\" }\n        ]\n      }\n    ]\n  }\n]\n```\n\nA group can be a plain label - omit `slug` and it acts only as a collapsible header - or a real page, by adding a `slug` so the group title is also a link.\n\n<Callout type=\"note\">\n  Nested groups are only available through `navigation.json`. Frontmatter navigation is always two levels: category and pages.\n</Callout>\n\n## Precedence and behavior\n\n<Callout type=\"note\">\n  `navigation.json` takes priority over frontmatter. If present, it fully controls the sidebar structure for the sections it covers.\n</Callout>\n\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` -> grouped; `categoryOrder` -> category position; `order` -> page position.\n- When using the object format, sections not listed in `navigation.json` fall back to frontmatter-based navigation.\n- Pages without a `category` appear at the top level.\n\n## Tips\n\n- **Start simple**: Use frontmatter for small docs. Switch to `navigation.json` as the structure grows.\n- **Keep slugs consistent**: `slug` must match the MDX filename (e.g., `text.mdx` -> `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.\n- **Per-section navigation**: Use the object format to define different sidebars for each section. Mix and match - define some sections explicitly and let others auto-generate.";

package/dist/templates/mdx/navigation.mdx.js

@@ -40,7 +40,7 @@ This approach is great for small sets of documents. For larger projects, setting
 
 ## Custom navigation with navigation.json
 
-To centrally define the entire sidebar, create a \`navigation.json\` at your project root (the same folder where you execute \`npx doccupine\`). When present, it takes priority over page frontmatter and fully controls the navigation structure.
+To centrally define the entire sidebar, create a \`navigation.json\` at your project root (the same directory where you execute \`npx doccupine\`). When present, it takes priority over page frontmatter and fully controls the navigation structure.
 
 ### Array format
 

package/dist/templates/mdx/platform/file-editor.mdx.d.ts

@@ -1 +1 @@
-export declare const platformFileEditorMdxTemplate = "---\ntitle: \"File Editor\"\ndescription: \"Browse, create, and edit your documentation files directly in the browser.\"\ndate: \"2026-02-19\"\ncategory: \"Editing\"\ncategoryOrder: 1\ncategoryIcon: \"pencil\"\norder: 0\nsection: \"Platform\"\n---\n\n# File Editor\n\nThe file editor is the main workspace for your documentation project. It provides a browser-based file explorer and editor for working with your MDX files and assets.\n\n## File explorer\n\nThe left panel has three tabs:\n\n- **Files** - browse your repository's file tree, create and manage files and folders\n- **Media** - manage uploaded images and binary assets\n- **Navigation** - open the [Navigation Builder](/platform/navigation-settings) to configure your sidebar structure with drag-and-drop\n\nIn the Files tab, you can:\n\n- **Browse** directories and files\n- **Create** new files and folders\n- **Rename** and **delete** existing files\n- **Upload** binary assets like images, favicons, and font files\n\nClick any file to open it in the editor panel.\n\n## Editing files\n\nThe editor supports MDX files with full syntax highlighting. Changes you make are saved as **pending changes** - they aren't committed to your repository until you publish.\n\n<Callout type=\"note\">\n  Pending changes are stored in Doccupine's database, not in your Git repository. This means you can make edits across multiple sessions before publishing.\n</Callout>\n\n## Version history\n\nFor any file, you can view its commit history to see how it has changed over time. This lets you:\n\n- See when changes were made and what the commit messages were\n- View the file's content at any previous commit\n- Compare past versions to understand what changed\n\n## Binary files\n\nYou can upload images and other binary assets (PNG, JPG, SVG, WOFF2, etc.) directly through the file explorer. These are stored temporarily in Doccupine's storage and committed to your repository when you publish.\n\n## Read-only mode\n\nTeam members with the **Viewer** or **Billing** role can browse files but cannot make edits. The editor will display content in read-only mode for these users.";
+export declare const platformFileEditorMdxTemplate = "---\ntitle: \"File Editor\"\ndescription: \"Browse, create, and edit your documentation files directly in the browser.\"\ndate: \"2026-02-19\"\ncategory: \"Editing\"\ncategoryOrder: 1\ncategoryIcon: \"pencil\"\norder: 0\nsection: \"Platform\"\n---\n\n# File Editor\n\nThe file editor is the main workspace for your documentation project. It provides a browser-based file explorer and editor for working with your MDX files and assets.\n\n## File explorer\n\nThe left panel has three tabs:\n\n- **Files** - browse your repository's file tree, create and manage files and directories\n- **Media** - manage uploaded images and binary assets\n- **Navigation** - open the [Navigation Builder](/platform/navigation-settings) to configure your sidebar structure with drag-and-drop\n\nIn the Files tab, you can:\n\n- **Browse** directories and files\n- **Create** new files and directories\n- **Rename** and **delete** existing files\n- **Upload** binary assets like images, favicons, and font files\n\nClick any file to open it in the editor panel.\n\n## Editing files\n\nThe editor supports MDX files with full syntax highlighting. Changes you make are saved as **pending changes** - they aren't committed to your repository until you publish.\n\n<Callout type=\"note\">\n  Pending changes are stored in Doccupine's database, not in your Git repository. This means you can make edits across multiple sessions before publishing.\n</Callout>\n\n## Version history\n\nFor any file, you can view its commit history to see how it has changed over time. This lets you:\n\n- See when changes were made and what the commit messages were\n- View the file's content at any previous commit\n- Compare past versions to understand what changed\n\n## Binary files\n\nYou can upload images and other binary assets (PNG, JPG, SVG, WOFF2, etc.) directly through the file explorer. These are stored temporarily in Doccupine's storage and committed to your repository when you publish.\n\n## Read-only mode\n\nTeam members with the **Viewer** or **Billing** role can browse files but cannot make edits. The editor will display content in read-only mode for these users.";

package/dist/templates/mdx/platform/file-editor.mdx.js

@@ -17,14 +17,14 @@ The file editor is the main workspace for your documentation project. It provide
 
 The left panel has three tabs:
 
-- **Files** - browse your repository's file tree, create and manage files and folders
+- **Files** - browse your repository's file tree, create and manage files and directories
 - **Media** - manage uploaded images and binary assets
 - **Navigation** - open the [Navigation Builder](/platform/navigation-settings) to configure your sidebar structure with drag-and-drop
 
 In the Files tab, you can:
 
 - **Browse** directories and files
-- **Create** new files and folders
+- **Create** new files and directories
 - **Rename** and **delete** existing files
 - **Upload** binary assets like images, favicons, and font files
 

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

@@ -1 +1 @@
-export declare const sectionsMdxTemplate = "---\ntitle: \"Sections\"\ndescription: \"Split your documentation into top-level sections with independent sidebars.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 3\n---\n\n# Sections\n\nSections let you divide your documentation into separate top-level areas - for example \"Guides\", \"API Reference\", and \"SDKs\". Each section gets its own sidebar and appears as a horizontal tab bar below the site header.\n\n<Callout type=\"note\">\n  Sections are entirely opt-in. If you don't configure them, nothing changes - your site works exactly as before with a single flat navigation.\n</Callout>\n\n## Automatic sections (frontmatter)\n\nThe simplest way to add sections is through page frontmatter. Add a `section` field to group pages, and an optional `sectionOrder` to control the order of sections in the bar.\n\n### Frontmatter fields\n\n- **section**: The display name for the section this page belongs to (e.g. \"API Reference\").\n- **sectionOrder**: Controls the position of the section in the bar. Lower numbers appear first.\n\nThe section slug is derived automatically from the label - lowercased with spaces replaced by hyphens. So \"API Reference\" becomes `api-reference`.\n\nPages without a `section` field stay at the root URL and appear under a default tab labeled \"Docs\". You can rename this tab with the `sectionLabel` field on your `index.mdx`:\n\n```text\n---\ntitle: \"Welcome\"\nsectionLabel: \"Guides\"\n---\n```\n\n### Directory-based organization\n\nYou can organize each section's files in a subdirectory that matches the section slug. When the directory name matches, Doccupine automatically assigns the files to that section and strips the directory from the URL.\n\n```text\ndocs/\n  index.mdx\n  getting-started.mdx\n  platform/\n    index.mdx        -> /platform\n    auth.mdx         -> /platform/auth\n```\n\nWhere `platform/index.mdx` has:\n\n```text\n---\ntitle: \"Platform Overview\"\nsection: \"Platform\"\nsectionOrder: 1\ncategory: \"Getting Started\"\n---\n```\n\nThe directory `platform/` matches the section slug `platform`, so it is stripped. `platform/index.mdx` serves at `/platform/` and `platform/auth.mdx` serves at `/platform/auth`.\n\n<Callout type=\"info\">\n  Once a section exists, any file placed in a matching directory is automatically assigned to it - even without a `section` field in its own frontmatter. Only the first file needs `section` and `sectionOrder` to create the section. After that, the directory does the work.\n</Callout>\n\nFiles at the root level with a `section` field work too - they keep their full slug under the section prefix.\n\n### Section index pages\n\nIf a section has no index page (no file at its root URL), Doccupine generates a redirect to the first page in that section, sorted by `categoryOrder` then `order`.\n\n<Callout type=\"note\">\n  You can override the auto-redirect by creating an `index.mdx` in the section's directory.\n</Callout>\n\n### Flat file example\n\nYou can also keep all files at the root and rely purely on frontmatter:\n\n```text\n---\ntitle: \"Authentication\"\nsection: \"API Reference\"\nsectionOrder: 2\ncategory: \"Auth\"\ncategoryOrder: 1\norder: 1\n---\n```\n\nThis page would be served at `/api-reference/authentication`.\n\n## Explicit sections with sections.json\n\nFor full control over slugs, create a `sections.json` file at your project root (the same folder where you run `npx doccupine`).\n\n### Minimal example\n\n```json\n[\n  { \"label\": \"Docs\", \"slug\": \"\" },\n  { \"label\": \"Platform\", \"slug\": \"platform\" }\n]\n```\n\nThis defines two sections. Pages are assigned automatically:\n\n- Files in a `platform/` directory belong to the \"Platform\" section (directory name matches slug).\n- Files with `section: \"Platform\"` in their frontmatter also belong to it.\n- Everything else stays in the root \"Docs\" section.\n\nNo `directory` field is needed when the directory name already matches the section slug.\n\n### Example with explicit directories\n\nWhen the directory name differs from the slug, use the `directory` field to map them:\n\n```json\n[\n  { \"label\": \"Guides\", \"slug\": \"\", \"directory\": \"guides\" },\n  { \"label\": \"API Reference\", \"slug\": \"api\", \"directory\": \"api-reference\" },\n  { \"label\": \"SDKs\", \"slug\": \"sdks\", \"directory\": \"sdks\" }\n]\n```\n\n### Fields\n\n- **label**: The display name shown in the section bar.\n- **slug**: The URL prefix for this section. Use an empty string `\"\"` for the default section that serves at the root.\n- **directory** (optional): The subdirectory under your watch directory that contains this section's MDX files. Only needed when the directory name differs from the slug.\n\n### Directory structure example\n\nWith the explicit directory config above and a watch directory of `docs`, your files would look like:\n\n```text\ndocs/\n  guides/\n    index.mdx\n    getting-started.mdx\n  api-reference/\n    authentication.mdx\n    endpoints.mdx\n  sdks/\n    javascript.mdx\n    python.mdx\n```\n\n## Section navigation\n\nEach section builds its own sidebar from the pages that belong to it. By default, pages are grouped by `category` and sorted by `categoryOrder` and `order` from frontmatter.\n\nFor explicit control, use `navigation.json` with the object format to define per-section navigation:\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [{ \"slug\": \"\", \"title\": \"Getting Started\" }]\n    }\n  ],\n  \"platform\": [\n    { \"label\": \"API\", \"links\": [{ \"slug\": \"platform/auth\", \"title\": \"Auth\" }] }\n  ]\n}\n```\n\nKeys are section slugs. The root section uses `\"\"`. Sections without a key fall back to auto-generated navigation. See the Navigation page for the full format.\n\n## How pages are assigned to sections\n\nDoccupine checks these rules in order and uses the first match:\n\n1. **Explicit directory** - the file is inside a directory listed in a section's `directory` field.\n2. **Directory matches slug** - the file's parent directory matches a section slug (e.g. files in `platform/` match a section with `slug: \"platform\"`).\n3. **Frontmatter section field** - the file's `section` value matches a section label.\n4. **No match** - the page stays at the root.\n\n## Precedence for section discovery\n\n1. **sections.json exists** - Doccupine uses it to define available sections.\n2. **No sections.json but pages have `section` frontmatter** - Doccupine auto-discovers sections from the frontmatter. Sections update live as you add or remove the `section` field from files.\n3. **Neither** - No section bar appears. The site works exactly as before.\n\n## URL structure\n\nPages in the default section (with `slug: \"\"`) serve at the root:\n\n- Default section: `/getting-started`, `/installation`\n- Other sections: `/api/authentication`, `/sdks/javascript`\n\n<Callout type=\"info\">\n  When a file is in a directory that matches its section slug, the directory is stripped so it doesn't appear twice. For example, `platform/auth.mdx` in the \"Platform\" section serves at `/platform/auth`, not `/platform/platform/auth`.\n</Callout>\n\n## sections.json vs navigation.json\n\nThese two config files serve different purposes and complement each other:\n\n- **sections.json** defines which sections exist - their labels, slugs, directory mappings, and order in the tab bar.\n- **navigation.json** controls the sidebar within each section - page ordering and grouping.\n\nYou can use either one independently. `sections.json` without `navigation.json` gives you sections with auto-generated sidebars. `navigation.json` without `sections.json` gives you custom sidebar ordering with frontmatter-discovered sections (or no sections at all).\n\n## Tips\n\n- **Start simple**: Add `section` and `sectionOrder` to a few pages to try it out. No config files needed.\n- **Use directories**: Organize each section's files in a directory that matches the section slug for clean URLs and a tidy file tree.\n- **Rename the default tab**: Add `sectionLabel: \"Your Label\"` to your `index.mdx` frontmatter. Defaults to \"Docs\" if omitted.\n- **Switch to sections.json**: When you need custom slugs or directory mappings that don't match section names, `sections.json` gives full control.\n- **Per-section navigation**: Use the object format in `navigation.json` to define custom sidebar ordering for specific sections.\n- **Independent sidebars**: Each section has its own sidebar. Previous/next navigation stays within the active section.";
+export declare const sectionsMdxTemplate = "---\ntitle: \"Sections\"\ndescription: \"Split your documentation into top-level sections with independent sidebars.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 3\n---\n\n# Sections\n\nSections let you divide your documentation into separate top-level areas - for example \"Guides\", \"API Reference\", and \"SDKs\". Each section gets its own sidebar and appears as a horizontal tab bar below the site header.\n\n<Callout type=\"note\">\n  Sections are entirely opt-in. If you don't configure them, nothing changes - your site works exactly as before with a single flat navigation.\n</Callout>\n\n## Automatic sections (frontmatter)\n\nThe simplest way to add sections is through page frontmatter. Add a `section` field to group pages, and an optional `sectionOrder` to control the order of sections in the bar.\n\n### Frontmatter fields\n\n- **section**: The display name for the section this page belongs to (e.g. \"API Reference\").\n- **sectionOrder**: Controls the position of the section in the bar. Lower numbers appear first.\n\nThe section slug is derived automatically from the label - lowercased with spaces replaced by hyphens. So \"API Reference\" becomes `api-reference`.\n\nPages without a `section` field stay at the root URL and appear under a default tab labeled \"Docs\". You can rename this tab with the `sectionLabel` field on your `index.mdx`:\n\n```text\n---\ntitle: \"Welcome\"\nsectionLabel: \"Guides\"\n---\n```\n\n### Directory-based organization\n\nYou can organize each section's files in a subdirectory that matches the section slug. When the directory name matches, Doccupine automatically assigns the files to that section and strips the directory from the URL.\n\n```text\ndocs/\n  index.mdx\n  getting-started.mdx\n  platform/\n    index.mdx        -> /platform\n    auth.mdx         -> /platform/auth\n```\n\nWhere `platform/index.mdx` has:\n\n```text\n---\ntitle: \"Platform Overview\"\nsection: \"Platform\"\nsectionOrder: 1\ncategory: \"Getting Started\"\n---\n```\n\nThe directory `platform/` matches the section slug `platform`, so it is stripped. `platform/index.mdx` serves at `/platform/` and `platform/auth.mdx` serves at `/platform/auth`.\n\n<Callout type=\"info\">\n  Once a section exists, any file placed in a matching directory is automatically assigned to it - even without a `section` field in its own frontmatter. Only the first file needs `section` and `sectionOrder` to create the section. After that, the directory does the work.\n</Callout>\n\nFiles at the root level with a `section` field work too - they keep their full slug under the section prefix.\n\n### Section index pages\n\nIf a section has no index page (no file at its root URL), Doccupine generates a redirect to the first page in that section, sorted by `categoryOrder` then `order`.\n\n<Callout type=\"note\">\n  You can override the auto-redirect by creating an `index.mdx` in the section's directory.\n</Callout>\n\n### Flat file example\n\nYou can also keep all files at the root and rely purely on frontmatter:\n\n```text\n---\ntitle: \"Authentication\"\nsection: \"API Reference\"\nsectionOrder: 2\ncategory: \"Auth\"\ncategoryOrder: 1\norder: 1\n---\n```\n\nThis page would be served at `/api-reference/authentication`.\n\n## Explicit sections with sections.json\n\nFor full control over slugs, create a `sections.json` file at your project root (the same directory where you run `npx doccupine`).\n\n### Minimal example\n\n```json\n[\n  { \"label\": \"Docs\", \"slug\": \"\" },\n  { \"label\": \"Platform\", \"slug\": \"platform\" }\n]\n```\n\nThis defines two sections. Pages are assigned automatically:\n\n- Files in a `platform/` directory belong to the \"Platform\" section (directory name matches slug).\n- Files with `section: \"Platform\"` in their frontmatter also belong to it.\n- Everything else stays in the root \"Docs\" section.\n\nNo `directory` field is needed when the directory name already matches the section slug.\n\n### Example with explicit directories\n\nWhen the directory name differs from the slug, use the `directory` field to map them:\n\n```json\n[\n  { \"label\": \"Guides\", \"slug\": \"\", \"directory\": \"guides\" },\n  { \"label\": \"API Reference\", \"slug\": \"api\", \"directory\": \"api-reference\" },\n  { \"label\": \"SDKs\", \"slug\": \"sdks\", \"directory\": \"sdks\" }\n]\n```\n\n### Fields\n\n- **label**: The display name shown in the section bar.\n- **slug**: The URL prefix for this section. Use an empty string `\"\"` for the default section that serves at the root.\n- **directory** (optional): The subdirectory under your watch directory that contains this section's MDX files. Only needed when the directory name differs from the slug.\n\n### Directory structure example\n\nWith the explicit directory config above and a watch directory of `docs`, your files would look like:\n\n```text\ndocs/\n  guides/\n    index.mdx\n    getting-started.mdx\n  api-reference/\n    authentication.mdx\n    endpoints.mdx\n  sdks/\n    javascript.mdx\n    python.mdx\n```\n\n## Section navigation\n\nEach section builds its own sidebar from the pages that belong to it. By default, pages are grouped by `category` and sorted by `categoryOrder` and `order` from frontmatter.\n\nFor explicit control, use `navigation.json` with the object format to define per-section navigation:\n\n```json\n{\n  \"\": [\n    {\n      \"label\": \"General\",\n      \"links\": [{ \"slug\": \"\", \"title\": \"Getting Started\" }]\n    }\n  ],\n  \"platform\": [\n    { \"label\": \"API\", \"links\": [{ \"slug\": \"platform/auth\", \"title\": \"Auth\" }] }\n  ]\n}\n```\n\nKeys are section slugs. The root section uses `\"\"`. Sections without a key fall back to auto-generated navigation. See the Navigation page for the full format.\n\n## How pages are assigned to sections\n\nDoccupine checks these rules in order and uses the first match:\n\n1. **Explicit directory** - the file is inside a directory listed in a section's `directory` field.\n2. **Directory matches slug** - the file's parent directory matches a section slug (e.g. files in `platform/` match a section with `slug: \"platform\"`).\n3. **Frontmatter section field** - the file's `section` value matches a section label.\n4. **No match** - the page stays at the root.\n\n## Precedence for section discovery\n\n1. **sections.json exists** - Doccupine uses it to define available sections.\n2. **No sections.json but pages have `section` frontmatter** - Doccupine auto-discovers sections from the frontmatter. Sections update live as you add or remove the `section` field from files.\n3. **Neither** - No section bar appears. The site works exactly as before.\n\n## URL structure\n\nPages in the default section (with `slug: \"\"`) serve at the root:\n\n- Default section: `/getting-started`, `/installation`\n- Other sections: `/api/authentication`, `/sdks/javascript`\n\n<Callout type=\"info\">\n  When a file is in a directory that matches its section slug, the directory is stripped so it doesn't appear twice. For example, `platform/auth.mdx` in the \"Platform\" section serves at `/platform/auth`, not `/platform/platform/auth`.\n</Callout>\n\n## sections.json vs navigation.json\n\nThese two config files serve different purposes and complement each other:\n\n- **sections.json** defines which sections exist - their labels, slugs, directory mappings, and order in the tab bar.\n- **navigation.json** controls the sidebar within each section - page ordering and grouping.\n\nYou can use either one independently. `sections.json` without `navigation.json` gives you sections with auto-generated sidebars. `navigation.json` without `sections.json` gives you custom sidebar ordering with frontmatter-discovered sections (or no sections at all).\n\n## Tips\n\n- **Start simple**: Add `section` and `sectionOrder` to a few pages to try it out. No config files needed.\n- **Use directories**: Organize each section's files in a directory that matches the section slug for clean URLs and a tidy file tree.\n- **Rename the default tab**: Add `sectionLabel: \"Your Label\"` to your `index.mdx` frontmatter. Defaults to \"Docs\" if omitted.\n- **Switch to sections.json**: When you need custom slugs or directory mappings that don't match section names, `sections.json` gives full control.\n- **Per-section navigation**: Use the object format in `navigation.json` to define custom sidebar ordering for specific sections.\n- **Independent sidebars**: Each section has its own sidebar. Previous/next navigation stays within the active section.";

package/dist/templates/mdx/sections.mdx.js

@@ -94,7 +94,7 @@ This page would be served at \`/api-reference/authentication\`.
 
 ## Explicit sections with sections.json
 
-For full control over slugs, create a \`sections.json\` file at your project root (the same folder where you run \`npx doccupine\`).
+For full control over slugs, create a \`sections.json\` file at your project root (the same directory where you run \`npx doccupine\`).
 
 ### Minimal example
 

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

@@ -1 +1 @@
-export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 14\n---\n\n# Steps\n\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\n\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```mdx\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n<Step title=\"Step 2\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A [Lucide](https://lucide.dev/icons) icon name shown next to the step title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>";
+export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 14\n---\n\n# Steps\n\nGuide readers step-by-step using the Steps component.\n\nThe Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.\n\n## Steps Usage\n\nYou can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.\n\n```html\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n```\n\n<Steps>\n  <Step title=\"Step 1\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 2\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n  <Step title=\"Step 3\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </Step>\n</Steps>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  A [Lucide](https://lucide.dev/icons) icon name shown next to the step title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>";

package/dist/templates/mdx/steps.mdx.js

@@ -17,16 +17,14 @@ The Steps component is perfect for organizing procedures or workflows in a clear
 
 You can use the \`Steps\` component to create a step-by-step guide. Each step is represented by a \`Step\` component, which includes a title and content.
 
-\`\`\`mdx
+\`\`\`html
 <Steps>
   <Step title="Step 1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
-
-<Step title="Step 2">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</Step>
-
+  <Step title="Step 2">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Step>
   <Step title="Step 3">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
@@ -37,11 +35,9 @@ You can use the \`Steps\` component to create a step-by-step guide. Each step is
   <Step title="Step 1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
-
   <Step title="Step 2">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>
-
   <Step title="Step 3">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </Step>

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

@@ -1 +1 @@
-export declare const tabsMdxTemplate = "---\ntitle: \"Tabs\"\ndescription: \"Use the Tabs component to display different content sections in a switchable panel layout.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 5\n---\n\n# Tabs\n\nUse the Tabs component to display different content sections in a switchable panel layout.\n\nTabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.\n\n## Tabs Usage\n\nYou can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:\n\n````mdx\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n      class HelloWorld {\n          public static void main(String[] args) {\n              System.out.println(\"Hello, World!\");\n          }\n      }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n````\n\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n    ```\n\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n\nEach tab also accepts an optional `icon` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.\n\n## Properties\n\n<Field value=\"title\" type=\"string\">\n  The title of the tab.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.\n  `rocket`) shown next to the tab title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the tabs.\n</Field>";
+export declare const tabsMdxTemplate = "---\ntitle: \"Tabs\"\ndescription: \"Use the Tabs component to display different content sections in a switchable panel layout.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 5\n---\n\n# Tabs\n\nUse the Tabs component to display different content sections in a switchable panel layout.\n\nTabs are useful for grouping related information while keeping the interface tidy. You can create as many tabs as needed, and each one can hold other components, text, or code snippets.\n\n## Tabs Usage\n\nYou can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:\n\n````html\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n      public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n      }\n    }\n    ```\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n````\n\n<Tabs>\n  <TabContent title=\"First tab\" icon=\"code\">\n    \u261D\uFE0F This is the content shown only when the first tab is active.\n\n    Tabs can include all kinds of components. For example, a simple Java program:\n    ```java\n    class HelloWorld {\n      public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n      }\n    }\n    ```\n  </TabContent>\n  <TabContent title=\"Second tab\" icon=\"book-open\">\n    \u270C\uFE0F Content inside this second tab is separate from the first.\n  </TabContent>\n  <TabContent title=\"Third tab\" icon=\"rocket\">\n    \uD83D\uDCAA This third tab contains its own unique content.\n  </TabContent>\n</Tabs>\n\nEach tab also accepts an optional `icon` - any [Lucide](https://lucide.dev/icons) icon name - rendered before its title, as shown above.\n\n## Properties\n\n<Field value=\"title\" type=\"string\">\n  The title of the tab.\n</Field>\n\n<Field value=\"icon\" type=\"string\">\n  Optional [Lucide](https://lucide.dev/icons) icon name (kebab-case, e.g.\n  `rocket`) shown next to the tab title.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the tabs.\n</Field>";

package/dist/templates/mdx/tabs.mdx.js

@@ -17,20 +17,19 @@ Tabs are useful for grouping related information while keeping the interface tid
 
 You can use the Tabs component directly within your MDX files without any import. The following example shows a basic usage:
 
-\`\`\`\`mdx
+\`\`\`\`html
 <Tabs>
   <TabContent title="First tab" icon="code">
     ☝️ This is the content shown only when the first tab is active.
 
     Tabs can include all kinds of components. For example, a simple Java program:
     \`\`\`java
-      class HelloWorld {
-          public static void main(String[] args) {
-              System.out.println("Hello, World!");
-          }
+    class HelloWorld {
+      public static void main(String[] args) {
+        System.out.println("Hello, World!");
       }
+    }
     \`\`\`
-
   </TabContent>
   <TabContent title="Second tab" icon="book-open">
     ✌️ Content inside this second tab is separate from the first.
@@ -48,12 +47,11 @@ You can use the Tabs component directly within your MDX files without any import
     Tabs can include all kinds of components. For example, a simple Java program:
     \`\`\`java
     class HelloWorld {
-        public static void main(String[] args) {
-            System.out.println("Hello, World!");
-        }
+      public static void main(String[] args) {
+        System.out.println("Hello, World!");
+      }
     }
     \`\`\`
-
   </TabContent>
   <TabContent title="Second tab" icon="book-open">
     ✌️ Content inside this second tab is separate from the first.