doccupine 0.0.71 → 0.0.72

package/dist/index.js

@@ -26,6 +26,7 @@ class MDXToNextJSGenerator {
     configWatcher = null;
     fontWatcher = null;
     publicWatcher = null;
+    rootDirWatcher = null;
     analyticsWatcher = null;
     configFiles = [
         "theme.json",
@@ -552,27 +553,53 @@ class MDXToNextJSGenerator {
         });
         const publicDir = path.join(this.rootDir, "public");
         if (await fs.pathExists(publicDir)) {
-            this.publicWatcher = chokidar.watch(publicDir, {
-                persistent: true,
-                ignoreInitial: true,
-            });
-            this.publicWatcher
-                .on("add", (filePath) => {
-                console.log(chalk.cyan(`📁 Public file added: ${path.relative(publicDir, filePath)}`));
-                this.handlePublicFileChange(filePath);
-            })
-                .on("change", (filePath) => {
-                console.log(chalk.cyan(`📁 Public file changed: ${path.relative(publicDir, filePath)}`));
-                this.handlePublicFileChange(filePath);
-            })
-                .on("unlink", (filePath) => {
-                console.log(chalk.red(`🗑️ Public file deleted: ${path.relative(publicDir, filePath)}`));
-                this.handlePublicFileDelete(filePath);
-            })
-                .on("error", (error) => {
-                console.error(chalk.red("❌ Public watcher error:"), error);
-            });
+            this.setupPublicWatcher();
         }
+        // Watch rootDir for public directory creation
+        this.rootDirWatcher = chokidar.watch(this.rootDir, {
+            persistent: true,
+            ignoreInitial: true,
+            depth: 0,
+        });
+        this.rootDirWatcher
+            .on("addDir", async (dirPath) => {
+            if (path.basename(dirPath) === "public" &&
+                path.dirname(dirPath) === this.rootDir &&
+                !this.publicWatcher) {
+                console.log(chalk.cyan("📁 Public directory created"));
+                await this.copyPublicFiles();
+                this.setupPublicWatcher();
+            }
+        })
+            .on("error", (error) => {
+            console.error(chalk.red("❌ Root dir watcher error:"), error);
+        });
+    }
+    setupPublicWatcher() {
+        if (this.publicWatcher) {
+            return;
+        }
+        const publicDir = path.join(this.rootDir, "public");
+        this.publicWatcher = chokidar.watch(publicDir, {
+            persistent: true,
+            ignoreInitial: true,
+        });
+        this.publicWatcher
+            .on("add", (filePath) => {
+            console.log(chalk.cyan(`📁 Public file added: ${path.relative(publicDir, filePath)}`));
+            this.handlePublicFileChange(filePath);
+        })
+            .on("change", (filePath) => {
+            console.log(chalk.cyan(`📁 Public file changed: ${path.relative(publicDir, filePath)}`));
+            this.handlePublicFileChange(filePath);
+        })
+            .on("unlink", (filePath) => {
+            console.log(chalk.red(`🗑️ Public file deleted: ${path.relative(publicDir, filePath)}`));
+            this.handlePublicFileDelete(filePath);
+        })
+            .on("error", (error) => {
+            console.error(chalk.red("❌ Public watcher error:"), error);
+        });
     }
     async parseMDXFile(file) {
         const fullPath = path.join(this.watchDir, file);
@@ -839,6 +866,9 @@ export default function Page() {
             await this.publicWatcher.close();
             console.log(chalk.yellow("👋 Stopped watching for public directory changes"));
         }
+        if (this.rootDirWatcher) {
+            await this.rootDirWatcher.close();
+        }
     }
 }
 program

package/dist/templates/components/layout/Button.d.ts

@@ -1 +1 @@
-export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";
+export declare const buttonTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled from \"styled-components\";\nimport {\n  theme as localTheme,\n  ButtonProps,\n  buttonStyles,\n} from \"cherry-styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\n\ninterface LinkButtonProps extends ButtonProps {\n  href?: string;\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  size?: \"default\" | \"big\";\n  outline?: boolean;\n  fullWidth?: boolean;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  theme?: typeof localTheme;\n}\n\nconst StyledLinkButton = styled(Link)<LinkButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nconst ButtonBase = styled.button<ButtonProps>`\n  ${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>\n    buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}\n\n  & p {\n    color: inherit;\n  }\n\n  & svg.lucide {\n    margin: auto 0;\n    min-width: min-content;\n    color: inherit;\n  }\n`;\n\nfunction Button({\n  variant = \"primary\",\n  size,\n  outline,\n  fullWidth,\n  icon,\n  iconPosition = \"left\",\n  theme: _theme = localTheme,\n  href,\n  ...props\n}: LinkButtonProps) {\n  return href ? (\n    <div>\n      <StyledLinkButton\n        {...props}\n        href={href}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </StyledLinkButton>\n    </div>\n  ) : (\n    <div>\n      <ButtonBase\n        {...props}\n        $variant={variant}\n        $size={size}\n        $outline={outline}\n        $fullWidth={fullWidth}\n      >\n        {iconPosition === \"left\" && icon && <Icon name={icon} size={16} />}\n        {props.children}\n        {iconPosition === \"right\" && icon && <Icon name={icon} size={16} />}\n      </ButtonBase>\n    </div>\n  );\n}\n\nexport { Button };\n";

package/dist/templates/components/layout/Button.js

@@ -24,6 +24,10 @@ const StyledLinkButton = styled(Link)<LinkButtonProps>\`
   \${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
+  & p {
+    color: inherit;
+  }
+
   & svg.lucide {
     margin: auto 0;
     min-width: min-content;
@@ -35,6 +39,10 @@ const ButtonBase = styled.button<ButtonProps>\`
   \${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
     buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
 
+  & p {
+    color: inherit;
+  }
+
   & svg.lucide {
     margin: auto 0;
     min-width: min-content;

package/dist/templates/components/layout/GlobalStyles.d.ts

@@ -1 +1 @@
-export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: ${({ theme }) => theme.colors.light};\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: ${({ theme }) => theme.colors.dark};\n}\n\na {\n  color: ${({ theme }) => (theme.isDark ? theme.colors.dark : theme.colors.primary)};\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}`;\n\nexport { GlobalStyles };\n";
+export declare const globalStylesTemplate = "\"use client\";\nimport { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyles = createGlobalStyle`\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  background-color: ${({ theme }) => theme.colors.light};\n  scroll-padding-top: 80px;\n}\n\nhtml:has(:target) {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: \"Inter\", sans-serif;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  interpolate-size: allow-keywords;\n}\n\n* {\n  box-sizing: border-box;\n  min-width: 0;\n}\n\nhr {\n  border: none;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  margin: 10px 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n}\n\npre,\ncode,\nkbd,\nsamp,\nblockquote,\np,\na,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul li,\nol li {\n  margin: 0;\n  padding: 0;\n  color: ${({ theme }) => theme.colors.dark};\n}\n\na {\n  color: ${({ theme }) => (theme.isDark ? theme.colors.dark : theme.colors.primary)};\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nfigure {\n  margin: 0;\n}\n\nfieldset {\n  appearance: none;\n  border: none;\n}\n\nbutton,\ninput,\na,\nimg,\nsvg,\nsvg * {\n  transition: all 0.3s ease;\n}\n\nstrong,\nb {\n  font-weight: 700;\n}\n\n.full-width {\n  width: 100%;\n}\n\n.light-only {\n  ${({ theme }) => theme.isDark && \"display: none !important;\"}\n}\n\n.dark-only {\n  ${({ theme }) => !theme.isDark && \"display: none !important;\"}\n}`;\n\nexport { GlobalStyles };\n";

package/dist/templates/components/layout/GlobalStyles.js

@@ -100,6 +100,14 @@ b {
 
 .full-width {
   width: 100%;
+}
+
+.light-only {
+  \${({ theme }) => theme.isDark && "display: none !important;"}
+}
+
+.dark-only {
+  \${({ theme }) => !theme.isDark && "display: none !important;"}
 }\`;
 
 export { GlobalStyles };

package/dist/templates/mdx/image-and-embeds.mdx.d.ts

@@ -1 +1 @@
-export declare const imageAndEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Images and embeds\nEnrich your documentation with visuals, videos, and interactive embeds.\n\nDisplay images, embed video content, or add interactive frames via iframes to supplement your docs.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n## Images\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://docs.doccupine.com/demo.png)\n```\n\n<Callout type=\"note\">\n  Use clear, descriptive alt text for accessibility and better SEO. Alt text should describe the image\u2019s appearance or content.\n</Callout>\n\n### HTML image embeds\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://docs.doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n## Videos\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\nTo embed a YouTube video, use the following syntax:\n\n```html\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n```\n\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n\n### Self-hosted videos\nServe up your own video content using the `<video>` tag:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n```\n\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n\n\n#### Autoplay and Looping\nFor demonstration videos that loop or start automatically, add attributes as shown:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n  autoPlay\n  muted\n  loop\n  playsInline\n></video>\n```\n";
+export declare const imageAndEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Images and embeds\nEnrich your documentation with visuals, videos, and interactive embeds.\n\nDisplay images, embed video content, or add interactive frames via iframes to supplement your docs.\n\n![Demo Image](https://docs.doccupine.com/demo.png)\n\n## Images\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://docs.doccupine.com/demo.png)\n```\n\n<Callout type=\"note\">\n  Use clear, descriptive alt text for accessibility and better SEO. Alt text should describe the image\u2019s appearance or content.\n</Callout>\n\n### HTML image embeds\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://docs.doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n### Theme-aware images\nShow different images depending on whether the user is in light or dark mode. Add the `light-only` or `dark-only` className to display an image exclusively in that theme.\n\n```md\n<img className=\"light-only\" src=\"/images/diagram-light.png\" alt=\"Diagram\">\n<img className=\"dark-only\" src=\"/images/diagram-dark.png\" alt=\"Diagram\">\n```\n\n<img className=\"light-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in light mode\">\n<img className=\"dark-only\" src=\"https://docs.doccupine.com/demo.png\" alt=\"This image is only visible in dark mode\" style={{ filter: \"invert(1)\" }}>\n\n<Callout type=\"note\">\n  The `light-only` and `dark-only` classes work on any element, not just images. You can use them on videos, iframes, or wrapper divs too.\n</Callout>\n\n## Videos\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\nTo embed a YouTube video, use the following syntax:\n\n```html\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n```\n\n<iframe\n  className=\"aspect-video\"\n  src=\"https://www.youtube.com/embed/ResP_eVPYQo\"\n  title=\"YouTube video player\"\n  frameBorder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n  allowFullScreen\n></iframe>\n\n### Self-hosted videos\nServe up your own video content using the `<video>` tag:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n```\n\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n></video>\n\n\n#### Autoplay and Looping\nFor demonstration videos that loop or start automatically, add attributes as shown:\n\n```html\n<video\n  controls\n  className=\"aspect-video\"\n  src=\"https://samplelib.com/lib/preview/mp4/sample-20s.mp4\"\n  autoPlay\n  muted\n  loop\n  playsInline\n></video>\n```\n";

package/dist/templates/mdx/image-and-embeds.mdx.js

@@ -34,6 +34,21 @@ Embed images in your Markdown content using HTML syntax.
 <img src="https://docs.doccupine.com/demo.png" alt="Alt text">
 \`\`\`
 
+### Theme-aware images
+Show different images depending on whether the user is in light or dark mode. Add the \`light-only\` or \`dark-only\` className to display an image exclusively in that theme.
+
+\`\`\`md
+<img className="light-only" src="/images/diagram-light.png" alt="Diagram">
+<img className="dark-only" src="/images/diagram-dark.png" alt="Diagram">
+\`\`\`
+
+<img className="light-only" src="https://docs.doccupine.com/demo.png" alt="This image is only visible in light mode">
+<img className="dark-only" src="https://docs.doccupine.com/demo.png" alt="This image is only visible in dark mode" style={{ filter: "invert(1)" }}>
+
+<Callout type="note">
+  The \`light-only\` and \`dark-only\` classes work on any element, not just images. You can use them on videos, iframes, or wrapper divs too.
+</Callout>
+
 ## Videos
 Videos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.
 

package/dist/templates/package.js

@@ -10,21 +10,21 @@ export const packageJsonTemplate = JSON.stringify({
         format: "prettier --write .",
     },
     dependencies: {
-        "@langchain/anthropic": "^1.3.20",
-        "@langchain/core": "^1.1.28",
-        "@langchain/google-genai": "^2.1.20",
-        "@langchain/openai": "^1.2.10",
+        "@langchain/anthropic": "^1.3.23",
+        "@langchain/core": "^1.1.32",
+        "@langchain/google-genai": "^2.1.25",
+        "@langchain/openai": "^1.2.13",
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.27.1",
-        "@posthog/react": "^1.8.1",
+        "@posthog/react": "^1.8.2",
         "cherry-styled-components": "^0.1.13",
-        langchain: "^1.2.27",
-        "lucide-react": "^0.575.0",
+        langchain: "^1.2.31",
+        "lucide-react": "^0.577.0",
         next: "16.1.6",
         "next-mdx-remote": "^6.0.0",
         polished: "^4.3.1",
-        "posthog-js": "^1.354.0",
-        "posthog-node": "^5.26.0",
+        "posthog-js": "^1.360.1",
+        "posthog-node": "^5.28.1",
         react: "19.2.4",
         "react-dom": "19.2.4",
         "rehype-highlight": "^7.0.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "description": "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.",
   "main": "dist/index.js",
   "bin": {
@@ -37,7 +37,7 @@
     "chalk": "^5.6.2",
     "chokidar": "^5.0.0",
     "commander": "^14.0.3",
-    "fs-extra": "^11.3.3",
+    "fs-extra": "^11.3.4",
     "gray-matter": "^4.0.3",
     "next": "^16.1.6",
     "prompts": "^2.4.2",
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@types/chokidar": "^2.1.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.4.0",
     "@types/prompts": "^2.4.9",
     "prettier": "^3.8.1",
     "typescript": "^5.9.3",