doccupine 0.0.98 → 0.0.99

package/dist/templates/code.mdx.js

@@ -1,46 +0,0 @@
-export const codeMdxTemplate = `---
-title: "Code"
-description: "Doccupine CLI commands"
-date: "2025-01-15"
-category: "Components"
-categoryOrder: 1
-order: 3
----
-# Code
-Learn how to display inline code and code blocks in documentation.
-
-## Adding Code Samples
-Both inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.
-
-### Inline Code
-Highlight code within text by wrapping it with backticks:
-
-\`\`\`text
-Enclose any \`word\` or \`phrase\` in backticks to format it as code.
-\`\`\`
-
-Enclose any \`word\` or \`phrase\` in backticks to format it as code.
-
-## Code Blocks
-To present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and—if assistant features are enabled—users can request explanations.
-
-You may specify the language for highlighting:
-
-~~~text
-\`\`\`java
-class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
-}
-\`\`\`
-~~~
-
-
-\`\`\`java
-class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, World!");
-    }
-}
-\`\`\``;

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

@@ -1 +0,0 @@
-export declare const commandsMdxTemplate = "---\ntitle: \"Commands\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 1\n---\n# Commands\n\nIn this page, you can find all the commands available in Doccupine CLI.\n\n## Run Doccupine CLI\n\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n~~~bash\nnpx doccupine\n~~~\n\nOnce you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.\nAfter selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n## Generate the website\n\n~~~bash\nnpx doccupine build\n~~~\n\nThis will generate the build files for your documentation website without starting the development server. You can then deploy the generated files to a hosting service of your choice.\n\n## Show current configuration\n\n~~~bash\nnpx doccupine config --show\n~~~\n\nThis will show the current configuration for Doccupine.\n\n## Reset configuration\n\n~~~bash\nnpx doccupine config --reset\n~~~\n  \nThis will reset the current configuration for Doccupine.";

package/dist/templates/commands.mdx.js

@@ -1,48 +0,0 @@
-export const commandsMdxTemplate = `---
-title: "Commands"
-description: "Doccupine CLI commands"
-date: "2025-01-15"
-category: "General"
-categoryOrder: 0
-order: 1
----
-# Commands
-
-In this page, you can find all the commands available in Doccupine CLI.
-
-## Run Doccupine CLI
-
-Create a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:
-
-~~~bash
-npx doccupine
-~~~
-
-Once you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.
-After selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.
-
-This will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.
-
-## Generate the website
-
-~~~bash
-npx doccupine build
-~~~
-
-This will generate the build files for your documentation website without starting the development server. You can then deploy the generated files to a hosting service of your choice.
-
-## Show current configuration
-
-~~~bash
-npx doccupine config --show
-~~~
-
-This will show the current configuration for Doccupine.
-
-## Reset configuration
-
-~~~bash
-npx doccupine config --reset
-~~~
-  
-This will reset the current configuration for Doccupine.`;

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

@@ -1 +0,0 @@
-export declare const clickOutsideTemplate = "import { RefObject, useCallback, useEffect } from \"react\";\n\nexport function useOnClickOutside(\n  refs: RefObject<HTMLElement | null>[],\n  cb: () => void,\n) {\n  // Stable callback ref to avoid re-subscribing on every render\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (\n        refs.every(\n          (ref) => !ref.current || !ref.current.contains(event.target as Node),\n        )\n      ) {\n        cb();\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [...refs, cb],\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [handleClickOutside]);\n}\n";

package/dist/templates/components/ClickOutside.js

@@ -1,29 +0,0 @@
-export const clickOutsideTemplate = `import { RefObject, useCallback, useEffect } from "react";
-
-export function useOnClickOutside(
-  refs: RefObject<HTMLElement | null>[],
-  cb: () => void,
-) {
-  // Stable callback ref to avoid re-subscribing on every render
-  const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
-      if (
-        refs.every(
-          (ref) => !ref.current || !ref.current.contains(event.target as Node),
-        )
-      ) {
-        cb();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...refs, cb],
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [handleClickOutside]);
-}
-`;

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

@@ -1 +0,0 @@
-export declare const clientThemeProviderTemplate = "\"use client\";\nimport React, { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ThemeProvider as StyledThemeProvider } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { GlobalStyles } from \"@/components/layout/GlobalStyles\";\n\ntype ThemeMode = \"light\" | \"dark\";\n\ntype ThemeContextValue = {\n  /** The styled-components theme object \u2014 same reference in both modes;\n      the values it points to are CSS variables that flip per active class. */\n  theme: Theme;\n  /** Active mode, derived from the \"dark\" class on <html>. */\n  mode: ThemeMode;\n  /** Update the active mode: flips the class and persists the cookie. */\n  setMode: (m: ThemeMode) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction useThemeOverride() {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\"useThemeOverride must be used within ClientThemeProvider\");\n  }\n  return ctx;\n}\n\nfunction readMode(): ThemeMode {\n  if (typeof document === \"undefined\") return \"light\";\n  return document.documentElement.classList.contains(\"dark\") ? \"dark\" : \"light\";\n}\n\nfunction ClientThemeProvider({\n  children,\n  theme,\n}: {\n  children: React.ReactNode;\n  theme: Theme;\n}) {\n  // Mode lives in React state so consumers (e.g. ThemeToggle) re-render when\n  // the user toggles. The visual swap itself is driven entirely by the\n  // \"dark\" class on <html> + CSS variables \u2014 React doesn't drive paint.\n  // The lazy initializer reads the class set by the theme-init blocking\n  // script (SSR returns \"light\"); no rendered markup branches on mode, so\n  // reading the DOM during the hydration render can't cause a mismatch.\n  const [mode, setModeState] = useState<ThemeMode>(readMode);\n\n  useEffect(() => {\n    // Backfill the cookie if the theme-init script didn't get to write one\n    // (rare \u2014 e.g. cookies disabled at first paint).\n    try {\n      const has = document.cookie\n        .split(\";\")\n        .some((c) => c.trim().startsWith(\"theme=\"));\n      if (!has) {\n        const m = readMode();\n        document.cookie = `theme=${m};path=/;max-age=31536000;SameSite=Lax`;\n      }\n    } catch {}\n  }, []);\n\n  const setMode = useCallback((next: ThemeMode) => {\n    if (typeof document !== \"undefined\") {\n      document.documentElement.classList.toggle(\"dark\", next === \"dark\");\n      document.documentElement.style.colorScheme = next;\n      try {\n        document.cookie = `theme=${next};path=/;max-age=31536000;SameSite=Lax`;\n      } catch {}\n    }\n    setModeState(next);\n  }, []);\n\n  return (\n    <ThemeContext.Provider value={{ theme, mode, setMode }}>\n      <StyledThemeProvider theme={theme}>\n        <GlobalStyles />\n        {children}\n      </StyledThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport { ClientThemeProvider, useThemeOverride };\n";

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

@@ -1,85 +0,0 @@
-export const clientThemeProviderTemplate = `"use client";
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import { ThemeProvider as StyledThemeProvider } from "styled-components";
-import { Theme } from "@/app/theme";
-import { GlobalStyles } from "@/components/layout/GlobalStyles";
-
-type ThemeMode = "light" | "dark";
-
-type ThemeContextValue = {
-  /** The styled-components theme object — same reference in both modes;
-      the values it points to are CSS variables that flip per active class. */
-  theme: Theme;
-  /** Active mode, derived from the "dark" class on <html>. */
-  mode: ThemeMode;
-  /** Update the active mode: flips the class and persists the cookie. */
-  setMode: (m: ThemeMode) => void;
-};
-
-const ThemeContext = React.createContext<ThemeContextValue | null>(null);
-
-function useThemeOverride() {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) {
-    throw new Error("useThemeOverride must be used within ClientThemeProvider");
-  }
-  return ctx;
-}
-
-function readMode(): ThemeMode {
-  if (typeof document === "undefined") return "light";
-  return document.documentElement.classList.contains("dark") ? "dark" : "light";
-}
-
-function ClientThemeProvider({
-  children,
-  theme,
-}: {
-  children: React.ReactNode;
-  theme: Theme;
-}) {
-  // Mode lives in React state so consumers (e.g. ThemeToggle) re-render when
-  // the user toggles. The visual swap itself is driven entirely by the
-  // "dark" class on <html> + CSS variables — React doesn't drive paint.
-  // The lazy initializer reads the class set by the theme-init blocking
-  // script (SSR returns "light"); no rendered markup branches on mode, so
-  // reading the DOM during the hydration render can't cause a mismatch.
-  const [mode, setModeState] = useState<ThemeMode>(readMode);
-
-  useEffect(() => {
-    // Backfill the cookie if the theme-init script didn't get to write one
-    // (rare — e.g. cookies disabled at first paint).
-    try {
-      const has = document.cookie
-        .split(";")
-        .some((c) => c.trim().startsWith("theme="));
-      if (!has) {
-        const m = readMode();
-        document.cookie = \`theme=\${m};path=/;max-age=31536000;SameSite=Lax\`;
-      }
-    } catch {}
-  }, []);
-
-  const setMode = useCallback((next: ThemeMode) => {
-    if (typeof document !== "undefined") {
-      document.documentElement.classList.toggle("dark", next === "dark");
-      document.documentElement.style.colorScheme = next;
-      try {
-        document.cookie = \`theme=\${next};path=/;max-age=31536000;SameSite=Lax\`;
-      } catch {}
-    }
-    setModeState(next);
-  }, []);
-
-  return (
-    <ThemeContext.Provider value={{ theme, mode, setMode }}>
-      <StyledThemeProvider theme={theme}>
-        <GlobalStyles />
-        {children}
-      </StyledThemeProvider>
-    </ThemeContext.Provider>
-  );
-}
-
-export { ClientThemeProvider, useThemeOverride };
-`;

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

@@ -1 +0,0 @@
-export declare const copyButtonTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { mq, Theme } from \"@/app/theme\";\n\ninterface CopyButtonProps {\n  content: string;\n}\n\nconst StyledCopyWrapper = styled.div`\n  position: relative;\n  padding-top: 70px;\n\n  ${mq(\"lg\")} {\n    padding-top: 80px;\n  }\n`;\n\nconst StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  background: transparent;\n  border: solid 1px\n    ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.grayLight};\n  color: ${({ theme, $copied }) =>\n    $copied ? theme.colors.success : theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px 8px;\n  font-size: 12px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:hover {\n    border-color: ${({ theme, $copied }) =>\n      $copied ? theme.colors.success : theme.colors.primary};\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n`;\n\nfunction CopyButton({ content }: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopyContent = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy:\", err);\n    }\n  };\n\n  return (\n    <StyledCopyWrapper>\n      <StyledCopyButton onClick={handleCopyContent} $copied={copied}>\n        {copied ? (\n          <>\n            <Icon name=\"check\" size={12} />\n            <span>Copied!</span>\n          </>\n        ) : (\n          <>\n            <Icon name=\"copy\" size={12} />\n            <span>Copy Content</span>\n          </>\n        )}\n      </StyledCopyButton>\n    </StyledCopyWrapper>\n  );\n}\n\nexport { CopyButton };";

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

@@ -1,85 +0,0 @@
-export const copyButtonTemplate = `"use client";
-import { useState } from "react";
-import styled from "styled-components";
-import { Icon } from "@/components/layout/Icon";
-import { mq, Theme } from "@/app/theme";
-
-interface CopyButtonProps {
-  content: string;
-}
-
-const StyledCopyWrapper = styled.div\`
-  position: relative;
-  padding-top: 70px;
-
-  \${mq("lg")} {
-    padding-top: 80px;
-  }
-\`;
-
-const StyledCopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
-  background: transparent;
-  border: solid 1px
-    \${({ theme, $copied }) =>
-      $copied ? theme.colors.success : theme.colors.grayLight};
-  color: \${({ theme, $copied }) =>
-    $copied ? theme.colors.success : theme.colors.primary};
-  border-radius: \${({ theme }) => theme.spacing.radius.xs};
-  padding: 4px 8px;
-  font-size: 12px;
-  font-family: \${({ theme }) => theme.fonts.mono};
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-right: -6px;
-
-  & svg.lucide {
-    color: \${({ theme, $copied }) =>
-      $copied ? theme.colors.success : theme.colors.primary};
-  }
-
-  &:hover {
-    border-color: \${({ theme, $copied }) =>
-      $copied ? theme.colors.success : theme.colors.primary};
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-\`;
-
-function CopyButton({ content }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopyContent = async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
-
-  return (
-    <StyledCopyWrapper>
-      <StyledCopyButton onClick={handleCopyContent} $copied={copied}>
-        {copied ? (
-          <>
-            <Icon name="check" size={12} />
-            <span>Copied!</span>
-          </>
-        ) : (
-          <>
-            <Icon name="copy" size={12} />
-            <span>Copy Content</span>
-          </>
-        )}
-      </StyledCopyButton>
-    </StyledCopyWrapper>
-  );
-}
-
-export { CopyButton };`;

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

@@ -1 +0,0 @@
-export declare const renderMarkdownTemplate = "import React from \"react\";\nimport { StyledMarkdownContainer } from \"@/components/layout/DocsComponents\";\nimport { MDXRemote } from \"next-mdx-remote/rsc\";\nimport remarkGfm from \"remark-gfm\";\nimport { useMDXComponents } from \"@/components/MDXComponents\";\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n\n  if (Array.isArray(children)) {\n    return children.map(extractAllTextFromChildren).join(\"\");\n  }\n\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<any>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n\n  return \"\";\n}\n\nfunction normalizeMarkdownSpacing(input: string): string {\n  return (\n    input\n      // Ensure a blank line before headings\n      .replace(/([^\\n])(#[\\s]+)/g, '$1\\n\\n$2')\n\n      // Ensure a blank line before fenced code blocks\n      .replace(/([^\\n])(~~~|```)/g, '$1\\n\\n$2')\n\n      // Ensure a blank line before images/links if they start a line\n      .replace(/([^\\n])(!\\[)/g, '$1\\n\\n$2')\n  );\n}\n\nfunction RenderMarkdown({ children }: { children: React.ReactNode }) {\n  const childrenAsString = extractAllTextFromChildren(children);\n  const normalizedChildren = normalizeMarkdownSpacing(childrenAsString);\n  const components = useMDXComponents({});\n\n  return (\n    <StyledMarkdownContainer>\n      <MDXRemote\n        source={normalizedChildren}\n        options={{\n          mdxOptions: {\n            remarkPlugins: [remarkGfm],\n          },\n        }}\n        components={components}\n      />\n    </StyledMarkdownContainer>\n  );\n}\n\nexport { RenderMarkdown };\n";

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

@@ -1,61 +0,0 @@
-export const renderMarkdownTemplate = `import React from "react";
-import { StyledMarkdownContainer } from "@/components/layout/DocsComponents";
-import { MDXRemote } from "next-mdx-remote/rsc";
-import remarkGfm from "remark-gfm";
-import { useMDXComponents } from "@/components/MDXComponents";
-
-function extractAllTextFromChildren(children: React.ReactNode): string {
-  if (children == null) return "";
-
-  if (typeof children === "string") return children;
-  if (typeof children === "number") return String(children);
-  if (typeof children === "boolean") return "";
-
-  if (Array.isArray(children)) {
-    return children.map(extractAllTextFromChildren).join("");
-  }
-
-  if (React.isValidElement(children)) {
-    const element = children as React.ReactElement<any>;
-    return extractAllTextFromChildren(element.props.children);
-  }
-
-  return "";
-}
-
-function normalizeMarkdownSpacing(input: string): string {
-  return (
-    input
-      // Ensure a blank line before headings
-      .replace(/([^\\n])(#[\\s]+)/g, '$1\\n\\n$2')
-
-      // Ensure a blank line before fenced code blocks
-      .replace(/([^\\n])(~~~|\`\`\`)/g, '$1\\n\\n$2')
-
-      // Ensure a blank line before images/links if they start a line
-      .replace(/([^\\n])(!\\[)/g, '$1\\n\\n$2')
-  );
-}
-
-function RenderMarkdown({ children }: { children: React.ReactNode }) {
-  const childrenAsString = extractAllTextFromChildren(children);
-  const normalizedChildren = normalizeMarkdownSpacing(childrenAsString);
-  const components = useMDXComponents({});
-
-  return (
-    <StyledMarkdownContainer>
-      <MDXRemote
-        source={normalizedChildren}
-        options={{
-          mdxOptions: {
-            remarkPlugins: [remarkGfm],
-          },
-        }}
-        components={components}
-      />
-    </StyledMarkdownContainer>
-  );
-}
-
-export { RenderMarkdown };
-`;

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

@@ -1 +0,0 @@
-export declare const stepsTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components/src/lib\";\nimport { rgba } from \"polished\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\nconst StyledStepsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  width: 100%;\n`;\n\nconst StyledStep = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 0 0 20px 52px;\n  margin: 0;\n  position: relative;\n  ${({ theme }) => styledText(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    left: 16px;\n    top: 0;\n    width: 1px;\n    height: 100%;\n    background: ${({ theme }) => theme.colors.primary};\n    background: linear-gradient(\n      180deg,\n      ${({ theme }) => theme.colors.primary},\n      ${({ theme }) => rgba(theme.colors.primary, 0)}\n    );\n    border-radius: 4px;\n  }\n`;\n\nconst StepNumber = styled.div<{ theme: Theme }>`\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.light};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  margin-bottom: 12px;\n  ${({ theme }) => styledText(theme)};\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n`;\n\nconst StyledStepTitle = styled.h3<{ theme: Theme }>`\n  margin: 0 0 10px 0;\n  padding: 2px 0 0 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\nconst StepContent = styled.div<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledText(theme)};\n\n  & > .code-wrapper {\n    margin: 10px 0;\n  }\n`;\n\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  title: string;\n  children: React.ReactNode;\n  icon?: IconProps;\n}\n\nfunction Step({ title, children, icon, ...props }: StepProps) {\n  return null;\n}\n\ninterface StepsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nfunction Steps({ children, ...props }: StepsProps) {\n  const theme = useTheme() as Theme;\n\n  const steps = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<StepProps> =>\n      React.isValidElement(child),\n  );\n\n  return (\n    <StyledStepsContainer theme={theme}>\n      {steps.map((step, index) => {\n        const { title, children: stepContent, icon } = step.props;\n\n        return (\n          <StyledStep key={index} theme={theme}>\n            <StepNumber theme={theme}>{index + 1}</StepNumber>\n            {icon && <Icon name={icon} color={theme.colors.primary} />}\n            <StyledStepTitle theme={theme}>{title}</StyledStepTitle>\n            <StepContent theme={theme}>{stepContent}</StepContent>\n          </StyledStep>\n        );\n      })}\n    </StyledStepsContainer>\n  );\n}\n\nexport { Steps, Step };\n";

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

@@ -1,114 +0,0 @@
-export const stepsTemplate = `"use client";
-import React from "react";
-import styled, { useTheme } from "styled-components";
-import { styledText, Theme } from "cherry-styled-components/src/lib";
-import { rgba } from "polished";
-import { Icon, IconProps } from "@/components/layout/Icon";
-
-const StyledStepsContainer = styled.div<{ theme: Theme }>\`
-  position: relative;
-  width: 100%;
-\`;
-
-const StyledStep = styled.div<{ theme: Theme }>\`
-  background: \${({ theme }) => theme.colors.light};
-  border-radius: \${({ theme }) => theme.spacing.radius.lg};
-  padding: 0 0 20px 52px;
-  margin: 0;
-  position: relative;
-  \${({ theme }) => styledText(theme)}
-  color: \${({ theme }) => theme.colors.grayDark};
-
-  &::after {
-    content: "";
-    position: absolute;
-    left: 16px;
-    top: 0;
-    width: 1px;
-    height: 100%;
-    background: \${({ theme }) => theme.colors.primary};
-    background: linear-gradient(
-      180deg,
-      \${({ theme }) => theme.colors.primary},
-      \${({ theme }) => rgba(theme.colors.primary, 0)}
-    );
-    border-radius: 4px;
-  }
-\`;
-
-const StepNumber = styled.div<{ theme: Theme }>\`
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: \${({ theme }) => theme.colors.primary};
-  color: \${({ theme }) => theme.colors.light};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  margin-bottom: 12px;
-  \${({ theme }) => styledText(theme)};
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-\`;
-
-const StyledStepTitle = styled.h3<{ theme: Theme }>\`
-  margin: 0 0 10px 0;
-  padding: 2px 0 0 0;
-  color: \${({ theme }) => theme.colors.dark};
-  \${({ theme }) => styledText(theme)};
-\`;
-
-const StepContent = styled.div<{ theme: Theme }>\`
-  color: \${({ theme }) => theme.colors.grayDark};
-  \${({ theme }) => styledText(theme)};
-
-  & > .code-wrapper {
-    margin: 10px 0;
-  }
-\`;
-
-interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  children: React.ReactNode;
-  icon?: IconProps;
-}
-
-function Step({ title, children, icon, ...props }: StepProps) {
-  return null;
-}
-
-interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-function Steps({ children, ...props }: StepsProps) {
-  const theme = useTheme() as Theme;
-
-  const steps = React.Children.toArray(children).filter(
-    (child): child is React.ReactElement<StepProps> =>
-      React.isValidElement(child),
-  );
-
-  return (
-    <StyledStepsContainer theme={theme}>
-      {steps.map((step, index) => {
-        const { title, children: stepContent, icon } = step.props;
-
-        return (
-          <StyledStep key={index} theme={theme}>
-            <StepNumber theme={theme}>{index + 1}</StepNumber>
-            {icon && <Icon name={icon} color={theme.colors.primary} />}
-            <StyledStepTitle theme={theme}>{title}</StyledStepTitle>
-            <StepContent theme={theme}>{stepContent}</StepContent>
-          </StyledStep>
-        );
-      })}
-    </StyledStepsContainer>
-  );
-}
-
-export { Steps, Step };
-`;

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

@@ -1 +0,0 @@
-export declare const themeToggleTemplate = "\"use client\";\nimport { resetButton } from \"cherry-styled-components\";\nimport styled, { css } from \"styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useThemeOverride } from \"@/components/layout/ClientThemeProvider\";\n\nconst StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>`\n  ${resetButton}\n  width: 59px;\n  height: 32px;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  margin: auto 0;\n  transform: scale(1);\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 3px;\n    left: 3px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    transition: all 0.3s ease;\n    z-index: 1;\n  }\n\n  /* Knob position depends on the active mode, signaled by the \"dark\" class\n     on <html>. Pure CSS \u2014 no JS conditional needed for the visual swap. */\n  :root.dark &::after {\n    transform: translateX(27px);\n  }\n\n  ${({ $hidden }) =>\n    $hidden &&\n    css`\n      display: none;\n    `}\n\n  & svg {\n    width: 16px;\n    height: 16px;\n    object-fit: contain;\n    margin: auto;\n    transition: all 0.3s ease;\n    position: relative;\n    z-index: 2;\n  }\n\n  & .lucide-sun {\n    transform: translateX(1px);\n  }\n\n  & .lucide-moon-star {\n    transform: translateX(-1px);\n  }\n\n  & svg[stroke] {\n    stroke: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:hover {\n    transform: scale(1.05);\n    color: ${({ theme }) => theme.colors.accent};\n\n    & svg[stroke] {\n      stroke: ${({ theme }) => theme.colors.accent};\n    }\n  }\n\n  &:active {\n    transform: scale(0.97);\n  }\n`;\n\nfunction ToggleTheme({ $hidden }: { $hidden?: boolean }) {\n  const { mode, setMode } = useThemeOverride();\n\n  return (\n    <StyledThemeToggle\n      onClick={() => setMode(mode === \"dark\" ? \"light\" : \"dark\")}\n      $hidden={$hidden}\n      aria-label=\"Toggle Theme\"\n    >\n      <Icon name=\"Sun\" className=\"light\" />\n      <Icon name=\"MoonStar\" className=\"dark\" />\n    </StyledThemeToggle>\n  );\n}\n\nfunction ToggleThemeLoading() {\n  return (\n    <StyledThemeToggle $hidden aria-label=\"Toggle Theme\">\n      <Icon name=\"MoonStar\" className=\"dark\" />\n      <Icon name=\"Sun\" className=\"light\" />\n    </StyledThemeToggle>\n  );\n}\n\nexport { ToggleTheme, ToggleThemeLoading };\n";

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

@@ -1,107 +0,0 @@
-export const themeToggleTemplate = `"use client";
-import { resetButton } from "cherry-styled-components";
-import styled, { css } from "styled-components";
-import { Theme } from "@/app/theme";
-import { Icon } from "@/components/layout/Icon";
-import { useThemeOverride } from "@/components/layout/ClientThemeProvider";
-
-const StyledThemeToggle = styled.button<{ theme: Theme; $hidden?: boolean }>\`
-  \${resetButton}
-  width: 59px;
-  height: 32px;
-  border-radius: 30px;
-  display: flex;
-  position: relative;
-  margin: auto 0;
-  transform: scale(1);
-  background: \${({ theme }) => theme.colors.light};
-  border: solid 1px \${({ theme }) => theme.colors.grayLight};
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background: \${({ theme }) =>
-      \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
-    transition: all 0.3s ease;
-    z-index: 1;
-  }
-
-  /* Knob position depends on the active mode, signaled by the "dark" class
-     on <html>. Pure CSS — no JS conditional needed for the visual swap. */
-  :root.dark &::after {
-    transform: translateX(27px);
-  }
-
-  \${({ $hidden }) =>
-    $hidden &&
-    css\`
-      display: none;
-    \`}
-
-  & svg {
-    width: 16px;
-    height: 16px;
-    object-fit: contain;
-    margin: auto;
-    transition: all 0.3s ease;
-    position: relative;
-    z-index: 2;
-  }
-
-  & .lucide-sun {
-    transform: translateX(1px);
-  }
-
-  & .lucide-moon-star {
-    transform: translateX(-1px);
-  }
-
-  & svg[stroke] {
-    stroke: \${({ theme }) => theme.colors.primary};
-  }
-
-  &:hover {
-    transform: scale(1.05);
-    color: \${({ theme }) => theme.colors.accent};
-
-    & svg[stroke] {
-      stroke: \${({ theme }) => theme.colors.accent};
-    }
-  }
-
-  &:active {
-    transform: scale(0.97);
-  }
-\`;
-
-function ToggleTheme({ $hidden }: { $hidden?: boolean }) {
-  const { mode, setMode } = useThemeOverride();
-
-  return (
-    <StyledThemeToggle
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-      $hidden={$hidden}
-      aria-label="Toggle Theme"
-    >
-      <Icon name="Sun" className="light" />
-      <Icon name="MoonStar" className="dark" />
-    </StyledThemeToggle>
-  );
-}
-
-function ToggleThemeLoading() {
-  return (
-    <StyledThemeToggle $hidden aria-label="Toggle Theme">
-      <Icon name="MoonStar" className="dark" />
-      <Icon name="Sun" className="light" />
-    </StyledThemeToggle>
-  );
-}
-
-export { ToggleTheme, ToggleThemeLoading };
-`;

package/dist/templates/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const DEFAULT_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.";
-export declare const DEFAULT_SITE_NAME = "Doccupine";
-export declare const DEFAULT_META_DESCRIPTION = "Generated with Doccupine";
-export declare const DEFAULT_FAVICON = "https://docs.doccupine.com/favicon.ico";
-export declare const DEFAULT_OG_IMAGE = "https://docs.doccupine.com/preview.png";

package/dist/templates/constants.js

@@ -1,5 +0,0 @@
-export const DEFAULT_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.";
-export const DEFAULT_SITE_NAME = "Doccupine";
-export const DEFAULT_META_DESCRIPTION = "Generated with Doccupine";
-export const DEFAULT_FAVICON = "https://docs.doccupine.com/favicon.ico";
-export const DEFAULT_OG_IMAGE = "https://docs.doccupine.com/preview.png";

package/dist/templates/docs-components.d.ts

@@ -1 +0,0 @@
-export declare const docsComponentsTemplate = "\n\"use client\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  resetButton,\n  styledStrong,\n  styledText,\n} from \"cherry-styled-components/src/lib\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { interactiveStyles } from \"./SharedStyled\";\n\ninterface DocsProps {\n  children: React.ReactNode;\n}\n\nconst StyledDocsWrapper = styled.div<{ theme: Theme }>`\n  position: relative;\n`;\n\nconst StyledDocsSidebar = styled.div<{ theme: Theme }>`\n  position: sticky;\n  top: 90px;\n  min-width: 200px;\n  float: left;\n  z-index: 999;\n\n  ${mq(\"lg\")} {\n    z-index: 2;\n  }\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 0;\n  width: 100%;\n\n  ${mq(\"lg\")} {\n    padding-left: 230px;\n  }\n\n  & ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    & li {\n      text-indent: 0;\n      display: block;\n      position: relative;\n      padding: 0 0 0 15px;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n      min-height: 23px;\n\n      $mq: \"lg\" {\n        min-height: 27px;\n      }\n\n      &::before {\n        content: \"\";\n        display: block;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: ${({ theme }) => theme.colors.primary};\n        position: absolute;\n        top: 8px;\n        left: 2px;\n\n        ${mq(\"lg\")} {\n          top: 10px;\n        }\n      }\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0;\n\n    & > li {\n      position: relative;\n      padding: 0;\n      counter-increment: item;\n      padding: 0;\n      margin: 0;\n      ${({ theme }) => styledText(theme)};\n\n      &::before {\n        content: counter(item) \".\";\n        display: inline-block;\n        margin: 0 4px 0 0;\n        font-weight: 700;\n        color: ${({ theme }) => theme.colors.primary};\n        min-width: max-content;\n      }\n    }\n  }\n`;\n\nexport const StyledMarkdownContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n`;\n\ninterface Props {\n  theme?: Theme;\n  $isActive?: boolean;\n}\n\nexport const StyledSidebar = styled.nav<Props>`\n  position: fixed;\n  overflow-y: auto;\n  max-height: calc(100svh - 70px);\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  z-index: 99;\n  top: 70px;\n  height: 100%;\n  padding: 20px 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n\n  ${mq(\"lg\")} {\n    width: 220px;\n    left: 20px;\n    background: transparent;\n    padding: 20px 20px 20px 0;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n  }\n\n  ${mq(\"xl\")} {\n    width: 220px;\n    left: calc(50% - 610px);\n  }\n\n  ${mq(\"xxl\")} {\n    width: 220px;\n    left: calc(50% - 690px);\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledSidebarList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledStrong = styled.strong<{ theme: Theme }>`\n  font-weight: 600;\n  ${({ theme }) => styledStrong(theme)};\n`;\n\nexport const StyledSidebarListItem = styled.li`\n  display: flex;\n  gap: 10px;\n  clear: both;\n`;\n\nexport const StyledSidebarListItemLink = styled(Link)<Props>`\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.strong.xs};\n  line-height: 2.1;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 0 0 0 20px;\n  display: flex;\n  transition: all 0.3s ease;\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n    line-height: 2.1;\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) =>\n        theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      border-color: ${({ theme }) => theme.colors.info};\n    }\n  }\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    `\n\t\t\tcolor: ${theme.colors.dark};\n\t\t\tborder-color: ${theme.colors.info};\n\t\t\tfont-weight: 600;\n\t`};\n`;\n\nexport const StyleMobileBar = styled.button<Props>`\n  ${resetButton};\n  position: fixed;\n  z-index: 1000;\n  bottom: 0;\n  right: 20px;\n  font-size: ${({ theme }) => theme.fontSizes.strong.lg};\n  line-height: ${({ theme }) => theme.fontSizes.strong.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) =>\n    theme.isDark\n      ? rgba(theme.colors.grayLight, 0.7)\n      : rgba(theme.colors.light, 0.7)};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.primary};\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  padding: 30px;\n  border-radius: 100px;\n  margin: 0 0 20px 0;\n  font-weight: 600;\n  display: flex;\n  justify-content: flex-start;\n  width: auto;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n\n  ${({ $isActive }) => $isActive && `position: fixed; `};\n`;\n\nexport const StyledMobileBurger = styled.span<Props>`\n  display: block;\n  margin: auto 0;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  overflow: hidden;\n  background: transparent;\n  position: relative;\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    width: 18px;\n    height: 3px;\n    border-radius: 3px;\n    background: ${({ theme }) =>\n      theme.isDark ? theme.colors.dark : theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  &::before {\n    top: 3px;\n  }\n\n  &::after {\n    bottom: 3px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        transform: translateY(5px) rotate(45deg);\n      }\n\n      &::after {\n        transform: translateY(-4px) rotate(-45deg);\n      }\n    `};\n`;\n\nexport const StyledInlineButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  ${interactiveStyles};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 0;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n      background: ${({ theme }) => theme.colors.primary};\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 12px;\n    height: 12px;\n    margin: auto;\n  }\n`;\n\nexport const StyledPlusButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n  padding: 0;\n  width: 100%;\n  height: 18px;\n  display: flex;\n  margin: auto 0;\n  transition: all 0.3s ease;\n  position: relative;\n  margin: 20px 0 0 0;\n\n  &::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 100%;\n    height: 1px;\n    border-radius: 3px;\n    background: ${({ theme }) => theme.colors.grayLight};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 18px;\n    height: 18px;\n    border: solid 1px ${({ theme }) => theme.colors.grayLight};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    background: ${({ theme }) => theme.colors.light};\n    transition: all 0.3s ease;\n    z-index: -1;\n  }\n\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  @media (hover: hover) {\n    &:hover {\n      &::after {\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  &:focus {\n    &::after {\n      border-color: ${({ theme }) => theme.colors.primary};\n      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  &:active {\n    &::after {\n      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.light};\n\n      &::after {\n        background: ${({ theme }) => theme.colors.primary};\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  & svg {\n    vertical-align: middle;\n    width: 14px;\n    height: 14px;\n    margin: auto;\n  }\n`;\n\nexport const StyledFullHeightInput = styled.div`\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex: 1;\n\n  & > span {\n    height: 100%;\n    width: 100%;\n  }\n\n  & textarea {\n    height: 100%;\n  }\n`;\n\nexport const StyledEditorWrapper = styled.div`\n  flex: 1;\n\n  &:empty {\n    display: none;\n  }\n`;\n\nfunction DocsWrapper({ children }: DocsProps) {\n  return <StyledDocsWrapper>{children}</StyledDocsWrapper>;\n}\n\nfunction DocsSidebar({ children }: DocsProps) {\n  return <StyledDocsSidebar>{children}</StyledDocsSidebar>;\n}\n\nfunction DocsContainer({ children }: DocsProps) {\n  return <StyledDocsContainer>{children}</StyledDocsContainer>;\n}\n\nexport { DocsWrapper, DocsSidebar, DocsContainer };\n";