doccupine 0.0.13 → 0.0.15

package/dist/index.js

@@ -714,7 +714,7 @@ export default function Home() {
 program
     .name("doccupine")
     .description("Watch MDX files and generate Next.js documentation pages automatically")
-    .version("0.0.13");
+    .version("0.0.15");
 program
     .command("watch", { isDefault: true })
     .description("Watch a directory for MDX changes and generate Next.js app")

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

@@ -1 +1 @@
-export declare const accordionTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components/src/lib\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledAccordion = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)}\n`;\n\nconst StyledAccordionTitle = styled.h3<{ theme: Theme; $isOpen: boolean }>`\n  cursor: pointer;\n  margin: 0;\n  padding: 0 40px 0 0;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.primary};\n  transition: color 0.3s ease;\n  position: relative;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\n    }\n  }\n\n  & .lucide-chevron-down {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: translateY(-50%) rotate(180deg);\n      `}\n  }\n`;\n\nconst StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      margin: 20px 0 0;\n      height: auto;\n    `}\n`;\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n}\n\nfunction Accordion({ children, title }: AccordionProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <StyledAccordion>\n      <StyledAccordionTitle onClick={() => setIsOpen(!isOpen)} $isOpen={isOpen}>\n        {title} <Icon name=\"ChevronDown\" />\n      </StyledAccordionTitle>\n      <StyledAccordionContent $isOpen={isOpen}>\n        {children}\n      </StyledAccordionContent>\n    </StyledAccordion>\n  );\n}\n\nexport { Accordion };\n";
+export declare const accordionTemplate = "\"use client\";\nimport { useState } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { styledText, Theme } from \"cherry-styled-components/src/lib\";\nimport { Icon } from \"@/components/layout/Icon\";\n\nconst StyledAccordion = styled.div<{ theme: Theme }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledText(theme)};\n  width: 100%;\n`;\n\nconst StyledAccordionTitle = styled.h3<{ theme: Theme; $isOpen: boolean }>`\n  cursor: pointer;\n  margin: 0;\n  padding: 0 40px 0 0;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.primary};\n  transition: color 0.3s ease;\n  position: relative;\n\n  @media (hover: hover) {\n    &:hover {\n      color: ${({ theme }) => theme.colors.primaryDark};\n    }\n  }\n\n  & .lucide-chevron-down {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    transition: transform 0.3s ease;\n\n    ${({ $isOpen }) =>\n      $isOpen &&\n      css`\n        transform: translateY(-50%) rotate(180deg);\n      `}\n  }\n`;\n\nconst StyledAccordionContent = styled.div<{ theme: Theme; $isOpen: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n  height: 0;\n  overflow: clip;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex: 1;\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    css`\n      margin: 20px 0 0;\n      height: auto;\n    `}\n`;\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n}\n\nfunction Accordion({ children, title }: AccordionProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <StyledAccordion>\n      <StyledAccordionTitle onClick={() => setIsOpen(!isOpen)} $isOpen={isOpen}>\n        {title} <Icon name=\"ChevronDown\" />\n      </StyledAccordionTitle>\n      <StyledAccordionContent $isOpen={isOpen}>\n        {children}\n      </StyledAccordionContent>\n    </StyledAccordion>\n  );\n}\n\nexport { Accordion };\n";

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

@@ -10,7 +10,8 @@ const StyledAccordion = styled.div<{ theme: Theme }>\`
   border-radius: \${({ theme }) => theme.spacing.radius.lg};
   padding: 20px;
   margin: 0;
-  \${({ theme }) => styledText(theme)}
+  \${({ theme }) => styledText(theme)};
+  width: 100%;
 \`;
 
 const StyledAccordionTitle = styled.h3<{ theme: Theme; $isOpen: boolean }>\`

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

@@ -1 +1 @@
-export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components/src/lib\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  ${({ theme, $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: ${theme.isDark ? \"#0ea5e94d\" : \"#0ea5e933\"};\n      background: ${theme.isDark ? \"#0ea5e91a\" : \"#f0f9ff80\"};\n\n      & svg,\n      & p {\n        color: ${theme.isDark ? \"#bae6fd\" : \"#0c4a6e\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: ${theme.isDark ? \"#71717a4d\" : \"#71717a33\"};\n      background: ${theme.isDark ? \"#71717a1a\" : \"#fafafa80\"};\n\n      & svg,\n      & p {\n        color: ${theme.isDark ? \"#e4e4e7\" : \"#18181b\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: ${theme.isDark ? \"#f59e0b4d\" : \"#f59e0b33\"};\n      background: ${theme.isDark ? \"#f59e0b1a\" : \"#fffbeb80\"};\n\n      & svg,\n      & p {\n        color: ${theme.isDark ? \"#fde68a\" : \"#78350f\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: ${theme.isDark ? \"#ef44444d\" : \"#ef444433\"};\n      background: ${theme.isDark ? \"#ef44441a\" : \"#fef2f280\"};\n\n      & svg,\n      & p {\n      color: ${theme.isDark ? \"#fecaca\" : \"#7f1d1d\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: ${theme.isDark ? \"#10b9814d\" : \"#10b98133\"};\n      background: ${theme.isDark ? \"#10b9811a\" : \"#ecfdf580\"};\n\n      & svg,\n      & p {\n        color: ${theme.isDark ? \"#a7f3d0\" : \"#064e3b\"};\n      }\n    `}\n`;\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      {children}\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";
+export declare const calloutTemplate = "\"use client\";\nimport { Theme } from \"@/app/theme\";\nimport { styledSmall } from \"cherry-styled-components/src/lib\";\nimport styled, { css } from \"styled-components\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\n\ntype CalloutType = \"note\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\nconst StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  padding: 20px;\n  margin: 0;\n  ${({ theme }) => styledSmall(theme)}\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: flex;\n\n  & svg {\n    vertical-align: middle;\n    min-width: min-content;\n    margin: 3px 10px 0 0;\n  }\n\n  ${({ theme, $type }) =>\n    $type === \"note\" &&\n    css`\n      border-color: ${theme.isDark ? \"#0ea5e94d\" : \"#0ea5e933\"};\n      background: ${theme.isDark ? \"#0ea5e91a\" : \"#f0f9ff80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#bae6fd\" : \"#0c4a6e\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"info\" &&\n    css`\n      border-color: ${theme.isDark ? \"#71717a4d\" : \"#71717a33\"};\n      background: ${theme.isDark ? \"#71717a1a\" : \"#fafafa80\"};\n\n      & svg.lucide,\n      & .lucide,\n      & p {\n        color: ${theme.isDark ? \"#e4e4e7\" : \"#18181b\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"warning\" &&\n    css`\n      border-color: ${theme.isDark ? \"#f59e0b4d\" : \"#f59e0b33\"};\n      background: ${theme.isDark ? \"#f59e0b1a\" : \"#fffbeb80\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#fde68a\" : \"#78350f\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"danger\" &&\n    css`\n      border-color: ${theme.isDark ? \"#ef44444d\" : \"#ef444433\"};\n      background: ${theme.isDark ? \"#ef44441a\" : \"#fef2f280\"};\n\n      & svg.lucide,\n      & p {\n      color: ${theme.isDark ? \"#fecaca\" : \"#7f1d1d\"};\n      }\n    `}\n\n  ${({ theme, $type }) =>\n    $type === \"success\" &&\n    css`\n      border-color: ${theme.isDark ? \"#10b9814d\" : \"#10b98133\"};\n      background: ${theme.isDark ? \"#10b9811a\" : \"#ecfdf580\"};\n\n      & svg.lucide,\n      & p {\n        color: ${theme.isDark ? \"#a7f3d0\" : \"#064e3b\"};\n      }\n    `}\n`;\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  icon?: IconProps;\n  type?: CalloutType;\n}\n\nfunction Callout({ children, type, icon }: CalloutProps) {\n  const iconType =\n    type === \"note\"\n      ? \"CircleAlert\"\n      : type === \"info\"\n        ? \"Info\"\n        : type === \"warning\"\n          ? \"TriangleAlert\"\n          : type === \"danger\"\n            ? \"OctagonAlert\"\n            : type === \"success\"\n              ? \"Check\"\n              : (icon as IconProps);\n  return (\n    <StyledCallout $type={type}>\n      <Icon name={iconType} size={16} />\n      {children}\n    </StyledCallout>\n  );\n}\n\nexport { Callout };\n";

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

@@ -28,7 +28,7 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
       border-color: \${theme.isDark ? "#0ea5e94d" : "#0ea5e933"};
       background: \${theme.isDark ? "#0ea5e91a" : "#f0f9ff80"};
 
-      & svg,
+      & svg.lucide,
       & p {
         color: \${theme.isDark ? "#bae6fd" : "#0c4a6e"};
       }
@@ -40,7 +40,8 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
       border-color: \${theme.isDark ? "#71717a4d" : "#71717a33"};
       background: \${theme.isDark ? "#71717a1a" : "#fafafa80"};
 
-      & svg,
+      & svg.lucide,
+      & .lucide,
       & p {
         color: \${theme.isDark ? "#e4e4e7" : "#18181b"};
       }
@@ -52,7 +53,7 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
       border-color: \${theme.isDark ? "#f59e0b4d" : "#f59e0b33"};
       background: \${theme.isDark ? "#f59e0b1a" : "#fffbeb80"};
 
-      & svg,
+      & svg.lucide,
       & p {
         color: \${theme.isDark ? "#fde68a" : "#78350f"};
       }
@@ -64,7 +65,7 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
       border-color: \${theme.isDark ? "#ef44444d" : "#ef444433"};
       background: \${theme.isDark ? "#ef44441a" : "#fef2f280"};
 
-      & svg,
+      & svg.lucide,
       & p {
       color: \${theme.isDark ? "#fecaca" : "#7f1d1d"};
       }
@@ -76,7 +77,7 @@ const StyledCallout = styled.div<{ theme: Theme; $type?: CalloutType }>\`
       border-color: \${theme.isDark ? "#10b9814d" : "#10b98133"};
       background: \${theme.isDark ? "#10b9811a" : "#ecfdf580"};
 
-      & svg,
+      & svg.lucide,
       & p {
         color: \${theme.isDark ? "#a7f3d0" : "#064e3b"};
       }

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

@@ -1 +1 @@
-export declare const docsComponentsTemplate = "\"use client\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  resetButton,\n  styledSmall,\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  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 0 0 100px 0;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 0 320px 80px 320px;\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n  }\n\n  & pre {\n    max-width: 100%;\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      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  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\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  max-width: 640px;\n  margin: auto;\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  z-index: 99;\n  top: 70px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n\n  ${mq(\"lg\")} {\n    max-height: 100svh;\n    width: 220px;\n    background: transparent;\n    padding: 90px 40px 40px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    top: 0;\n    width: 320px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100vh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 40px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\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: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 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  }\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";
+export declare const docsComponentsTemplate = "\"use client\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n  resetButton,\n  styledSmall,\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  clear: both;\n`;\n\nconst StyledDocsContainer = styled.div<{ theme: Theme }>`\n  position: relative;\n  padding: 0 0 100px 0;\n  width: 100%;\n  ${({ theme }) => styledText(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 0 320px 80px 320px;\n  }\n\n  & p {\n    color: ${({ theme }) => theme.colors.grayDark};\n  }\n\n  & pre {\n    max-width: 100%;\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      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  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  }\n\n  & code:not([class]) {\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  }\n\n  & table {\n    margin: 0;\n    padding: 0;\n    border-collapse: collapse;\n    width: 100%;\n    text-align: left;\n\n    & tr {\n      margin: 0;\n      padding: 0;\n    }\n\n    & th {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 0;\n      ${({ theme }) => styledSmall(theme)};\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.dark};\n    }\n\n    & td {\n      border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n      padding: 10px 10px 10px 0;\n      color: ${({ theme }) => theme.colors.grayDark};\n      ${({ theme }) => styledSmall(theme)};\n    }\n  }\n\n  & .lucide {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  & .aspect-video {\n    aspect-ratio: 16 / 9;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\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  max-width: 640px;\n  margin: auto;\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  z-index: 99;\n  top: 70px;\n  height: 100%;\n  padding: 20px;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 0.3s ease;\n  transform: translateY(30px);\n  left: 0;\n  background: ${({ theme }) => theme.colors.light};\n\n  ${mq(\"lg\")} {\n    max-height: 100svh;\n    width: 220px;\n    background: transparent;\n    padding: 90px 40px 40px;\n    opacity: 1;\n    pointer-events: all;\n    transform: translateY(0);\n    background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n    top: 0;\n    width: 320px;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      transform: translateY(0);\n      opacity: 1;\n      pointer-events: all;\n    `}\n`;\n\nexport const StyledIndexSidebar = styled.ul<{ theme: Theme }>`\n  display: none;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 320px;\n  height: 100vh;\n  overflow-y: auto;\n  z-index: 1;\n  padding: 40px;\n  background: ${({ theme }) => theme.colors.light};\n  border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  ${mq(\"lg\")} {\n    display: block;\n  }\n\n  & li {\n    padding: 5px 0;\n  }\n`;\n\nexport const StyledIndexSidebarLabel = styled.span<{ theme: Theme }>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nexport const StyledIndexSidebarLink = styled.a<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  color: ${({ theme, $isActive }) =>\n    $isActive ? theme.colors.primary : theme.colors.dark};\n  font-weight: ${({ $isActive }) => ($isActive ? \"600\" : \"400\")};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.primaryDark};\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: 1.6;\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.grayDark : theme.colors.primary};\n  padding: 5px 0 5px 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  }\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";

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

@@ -239,7 +239,7 @@ export const StyledIndexSidebarLink = styled.a<{
   theme: Theme;
   $isActive: boolean;
 }>\`
-  \${({ theme }) => styledText(theme)};
+  \${({ theme }) => styledSmall(theme)};
   color: \${({ theme, $isActive }) =>
     $isActive ? theme.colors.primary : theme.colors.dark};
   font-weight: \${({ $isActive }) => ($isActive ? "600" : "400")};

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

@@ -1 +1 @@
-export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n# Cards\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Card title=\"Note\" icon=\"BadgeInfo\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n~~~\n\n<Card title=\"Note\" icon=\"BadgeInfo\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the card.\n</Field>\n\n<Field value=\"icon\" type=\"string\" required>\n  The icon to display in the card.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the card.\n</Field>";
+export declare const cardsMdxTemplate = "---\ntitle: \"Cards\"\ndescription: \"Cards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 6\n---\n# Cards\nDuplicate a page or section with ease, then emphasize important information or links using customizable layouts and icons.\n\nCards act as visual containers for your content, giving you flexibility to combine text, icons, images, and links in a clean and organized way.\n\n## Cards Usage\nYou can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n~~~\n\n<Card title=\"Note\" icon=\"badge-info\">\n  Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.\n</Card>\n\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the card.\n</Field>\n\n<Field value=\"icon\" type=\"string\" required>\n  The icon to display in the card.\n</Field>\n\n- [**Lucide icon**](https://lucide.dev/icons) name\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the card.\n</Field>";

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

@@ -15,12 +15,12 @@ Cards act as visual containers for your content, giving you flexibility to combi
 You can use the Cards component directly within your MDX files without any import. The following example shows a basic usage:
 
 ~~~mdx
-<Card title="Note" icon="BadgeInfo">
+<Card title="Note" icon="badge-info">
   Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
 </Card>
 ~~~
 
-<Card title="Note" icon="BadgeInfo">
+<Card title="Note" icon="badge-info">
   Doccupine CLI is a command-line tool that helps you create and manage your Doccupine project. It provides a simple and intuitive interface for creating and configuring your project.
 </Card>
 

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

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

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

@@ -7,16 +7,14 @@ categoryOrder: 1
 order: 12
 ---
 # Columns
-
 Arrange multiple cards neatly in a side-by-side grid layout.
 
 The \`Columns\` component helps you organize several \`Card\` elements into a visually balanced grid. By choosing how many columns you want, you can control the layout and spacing of your cards.
 
 ## Columns Usage
-
 You can use the \`Columns\` component to create a grid of cards with a specified number of columns.
 
-\`\`\`jsx
+\`\`\`mdx
 <Columns cols={2}>
   <Card title="Getting Started" icon="rocket">
     Kick off your project using our easy quickstart guide.
@@ -38,7 +36,6 @@ You can use the \`Columns\` component to create a grid of cards with a specified
   </Card>
 </Columns>
 
-
 ## Properties
 
 <Field value="cols" type="number" required>

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

@@ -1 +1 @@
-export declare const commandsMdxTemplate = "---\ntitle: \"Commands\"\ndescription: \"In this page, you can find all the commands available in Doccupine CLI.\"\ndate: \"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## Verbose mode\n\n~~~bash\nnpx doccupine --verbose\n~~~\n\nThis will show Next.js errors in the terminal console logs, providing more detailed output useful for debugging during development.\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.";
+export declare const commandsMdxTemplate = "---\ntitle: \"Commands\"\ndescription: \"In this page, you can find all the commands available in Doccupine CLI.\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 1\n---\n# Commands\nIn this page, you can find all the commands available in Doccupine CLI.\n\n## Run Doccupine CLI\nCreate a new directory for your project and navigate to it in your terminal. Run the following command to create a new Doccupine project:\n\n```bash\nnpx doccupine\n```\n\nOnce you run the command, Doccupine will ask you to select a directory to store your MDX files. Choose the directory where you want to create your documentation files.\nAfter selecting the directory, Doccupine will ask you to enter the name of the directory for the generated website. Enter the name of the directory where you want to create your website.\n\nThis will start the development server on port 3000. Open your browser and navigate to http://localhost:3000 to view your documentation.\n\n## Verbose mode\n\n```bash\nnpx doccupine --verbose\n```\n\nThis will show Next.js errors in the terminal console logs, providing more detailed output useful for debugging during development.\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/mdx/commands.mdx.js

@@ -7,16 +7,14 @@ 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
+\`\`\`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.
@@ -25,32 +23,32 @@ This will start the development server on port 3000. Open your browser and navig
 
 ## Verbose mode
 
-~~~bash
+\`\`\`bash
 npx doccupine --verbose
-~~~
+\`\`\`
 
 This will show Next.js errors in the terminal console logs, providing more detailed output useful for debugging during development.
 
 ## Generate the website
 
-~~~bash
+\`\`\`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
+\`\`\`bash
 npx doccupine config --show
-~~~
+\`\`\`
 
 This will show the current configuration for Doccupine.
 
 ## Reset configuration
 
-~~~bash
+\`\`\`bash
 npx doccupine config --reset
-~~~
+\`\`\`
   
 This will reset the current configuration for Doccupine.`;

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

@@ -1 +1 @@
-export declare const configMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 1\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 document management system that allows you to store, organize, and share your documentation with ease.\",\n  \"icon\": \"https://doccupine.com/favicon.ico\",\n  \"preview\": \"https://doccupine.com/preview.png\"\n}\n```\n\n## Fields\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- **preview**: The Open Graph image used when links to your docs are shared. Accepts a full URL or a relative path.\n\n## Per\u2011page overrides\n\nAny page can override these global values by defining the same keys in its frontmatter. When present, the page\u2019s values take precedence over `config.json` for that page only.\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: \"https://doccupine.com/favicon.ico\"\npreview: \"https://doccupine.com/preview.png\"\ndate: \"2025-01-15\"\ncategory: \"Guides\"\n---\n```\n\nIf a key is not specified in a page\u2019s frontmatter, Doccupine falls back to the corresponding value in `config.json`.";
+export declare const configMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 1\n---\n# Global Configuration\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\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 document management system that allows you to store, organize, and share your documentation with ease.\",\n  \"icon\": \"https://doccupine.com/favicon.ico\",\n  \"preview\": \"https://doccupine.com/preview.png\"\n}\n```\n\n## Fields\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- **preview**: The Open Graph image used when links to your docs are shared. Accepts a full URL or a relative path.\n\n## Per\u2011page overrides\nAny page can override these global values by defining the same keys in its frontmatter. When present, the page\u2019s values take precedence over `config.json` for that page only.\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: \"https://doccupine.com/favicon.ico\"\npreview: \"https://doccupine.com/preview.png\"\ndate: \"2025-01-15\"\ncategory: \"Guides\"\n---\n```\n\nIf a key is not specified in a page\u2019s frontmatter, Doccupine falls back to the corresponding value in `config.json`.";

package/dist/templates/mdx/config.mdx.js

@@ -7,11 +7,9 @@ categoryOrder: 3
 order: 1
 ---
 # Global Configuration
-
 Use a \`config.json\` file to define project‑wide metadata for your documentation site. These values are applied to every generated page unless a page overrides them in its own frontmatter.
 
 ## 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.
 
 \`\`\`json
@@ -24,14 +22,12 @@ Place a \`config.json\` at your project root (the same folder where you execute
 \`\`\`
 
 ## Fields
-
 - **name**: The primary name of your documentation website. Displayed in the site title and used in various UI elements.
 - **description**: A concise summary of your project, used in site metadata (e.g., HTML meta description) and social previews when not overridden.
 - **icon**: The favicon for your site. You can provide a full URL or a relative path to an asset in your project.
 - **preview**: The Open Graph image used when links to your docs are shared. Accepts a full URL or a relative path.
 
 ## Per‑page overrides
-
 Any page can override these global values by defining the same keys in its frontmatter. When present, the page’s values take precedence over \`config.json\` for that page only.
 
 Example frontmatter in an \`.mdx\` file:

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: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\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\n```text\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: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 10\n---\n# Fields\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\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>";

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

@@ -7,21 +7,18 @@ categoryOrder: 1
 order: 10
 ---
 # Fields
-
 Configure parameters for your API or SDK documentation.
 
 Fields 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.
 
 ## Fields Usage
-
 Use the \`<Field>\` component to declare API or SDK parameters, or define the return values of an API.
 
 <Field value="param" type="string" required>
   Example definition of a parameter field.
 </Field>
 
-
-\`\`\`text
+\`\`\`mdx
 <Field value="param" type="string" required>
   Example definition of a parameter field.
 </Field>

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: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 9\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```text\n<Icon name=\"flag\" size={32} />\n```\n\n## Inline icons\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```text\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: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 9\n---\n# Icons\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\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>";

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

@@ -7,14 +7,13 @@ categoryOrder: 1
 order: 9
 ---
 # Icons
-
 Integrate visual icons from well-known libraries to enrich your documentation.
 
 Icons can be sourced from Lucide, SVG elements, external URLs, or local files within your project directory.
 
 <Icon name="flag" size={32} />
 
-\`\`\`text
+\`\`\`mdx
 <Icon name="flag" size={32} />
 \`\`\`
 
@@ -23,7 +22,7 @@ You can use icons directly within text to highlight information or add visual co
 
 <Icon name="flag" size={16} /> Build your documentation seamlessly.
 
-\`\`\`text
+\`\`\`mdx
 <Icon name="flag" size={16} /> Build your documentation seamlessly.
 \`\`\`
 

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

@@ -1 +1 @@
-export declare const imageEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 8\n---\n# Images and embeds\n\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://doccupine.com/demo.png)\n\n## Images\n\nImages enhance documentation with context, illustration, or decorative visual cues.\n\n### Basic Image Syntax\n\nInclude an image in Markdown using the syntax below:\n\n```md\n![Alt text](https://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\n\nEmbed images in your Markdown content using HTML syntax.\n\n```md\n<img src=\"https://doccupine.com/demo.png\" alt=\"Alt text\">\n```\n\n## Videos\n\nVideos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.\n\n### YouTube Embed\n\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\n\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\n\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 imageEmbedsMdxTemplate = "---\ntitle: \"Images and embeds\"\ndescription: \"Enrich your documentation with visuals, videos, and interactive embeds.\"\ndate: \"2025-01-15\"\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://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://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://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";

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

@@ -7,7 +7,6 @@ categoryOrder: 1
 order: 8
 ---
 # Images and embeds
-
 Enrich your documentation with visuals, videos, and interactive embeds.
 
 Display images, embed video content, or add interactive frames via iframes to supplement your docs.
@@ -15,11 +14,9 @@ Display images, embed video content, or add interactive frames via iframes to su
 ![Demo Image](https://doccupine.com/demo.png)
 
 ## Images
-
 Images enhance documentation with context, illustration, or decorative visual cues.
 
 ### Basic Image Syntax
-
 Include an image in Markdown using the syntax below:
 
 \`\`\`md
@@ -31,7 +28,6 @@ Include an image in Markdown using the syntax below:
 </Callout>
 
 ### HTML image embeds
-
 Embed images in your Markdown content using HTML syntax.
 
 \`\`\`md
@@ -39,11 +35,9 @@ Embed images in your Markdown content using HTML syntax.
 \`\`\`
 
 ## Videos
-
 Videos add a dynamic element to your documentation, engaging your audience and providing a more immersive experience.
 
 ### YouTube Embed
-
 To embed a YouTube video, use the following syntax:
 
 \`\`\`html
@@ -67,7 +61,6 @@ To embed a YouTube video, use the following syntax:
 ></iframe>
 
 ### Self-hosted videos
-
 Serve up your own video content using the \`<video>\` tag:
 
 \`\`\`html
@@ -86,7 +79,6 @@ Serve up your own video content using the \`<video>\` tag:
 
 
 #### Autoplay and Looping
-
 For demonstration videos that loop or start automatically, add attributes as shown:
 
 \`\`\`html

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

@@ -1 +1 @@
-export declare const indexMdxTemplate = "---\ntitle: \"Getting Started\"\ndescription: \"Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 0\n---\n# Welcome to Doccupine\n\nDoccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. Using Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.\n\n## Open Source and Extensible\nDoccupine is built on open standards, enabling customization and extensibility for different documentation needs. You stay in control of your content, with the option to host docs yourself and tailor the website\u2019s look and features to match your organization\u2019s requirements.\n\n## Features\n\n- \uD83D\uDCDD Markdown-based content\n- \uD83D\uDCE6 Built-in file structure\n- \u26A1 Live Preview & Auto-Update\n- \uD83D\uDE80 Easy Deployment\n\n## Getting Started\n\nTo get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:\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## Start documenting\nStart documenting your project by editing the **index.mdx** file in the choosen MDX directory.\n\nIn your MDX directory, you can structure your content using folders and files. Doccupine will automatically generate a navigation menu based on the configured categories and order.\n";
+export declare const indexMdxTemplate = "---\ntitle: \"Getting Started\"\ndescription: \"Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease.\"\ndate: \"2025-01-15\"\ncategory: \"General\"\ncategoryOrder: 0\norder: 0\n---\n# Welcome to Doccupine\nDoccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. Using Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.\n\n## Open Source and Extensible\nDoccupine is built on open standards, enabling customization and extensibility for different documentation needs. You stay in control of your content, with the option to host docs yourself and tailor the website\u2019s look and features to match your organization\u2019s requirements.\n\n## Features\n- \uD83D\uDCDD Markdown-based content\n- \uD83D\uDCE6 Built-in file structure\n- \u26A1 Live Preview & Auto-Update\n- \uD83D\uDE80 Easy Deployment\n\n## Getting Started\n\nTo get started with Doccupine, make sure you have [Node.js](https://nodejs.org) and npm installed on your machine. Then, follow these steps:\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## Start documenting\nStart documenting your project by editing the **index.mdx** file in the choosen MDX directory.\n\nIn your MDX directory, you can structure your content using folders and files. Doccupine will automatically generate a navigation menu based on the configured categories and order.\n";

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

@@ -7,14 +7,12 @@ categoryOrder: 0
 order: 0
 ---
 # Welcome to Doccupine
-
 Doccupine is a free and open-source document management system that allows you to store, organize, and share your documentation with ease. Using Doccupine, you simply create your documentation in MDX files with traditional Markdown syntax, Doccupine monitors your changes automatically generating a beautiful, modern documentation website.
 
 ## Open Source and Extensible
 Doccupine is built on open standards, enabling customization and extensibility for different documentation needs. You stay in control of your content, with the option to host docs yourself and tailor the website’s look and features to match your organization’s requirements.
 
 ## Features
-
 - 📝 Markdown-based content
 - 📦 Built-in file structure
 - ⚡ Live Preview & Auto-Update
@@ -28,9 +26,9 @@ To get started with Doccupine, make sure you have [Node.js](https://nodejs.org)
 
 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
+\`\`\`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.

package/dist/templates/mdx/list-table.mdx.d.ts

@@ -1 +1 @@
-export declare const listTableMdxTemplate = "---\ntitle: \"Lists and tables\"\ndescription: \"Present structured information using lists or tables.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 2\n---\n# Lists and Tables\n\nPresent structured information using lists or tables.\n\n## Lists\n\nMarkdown supports both *ordered* and *unordered* lists, as well as nested list structures.\n\n### Ordered List\n\nStart each item with a number followed by a period to create an ordered list.\n\n```md\n1. First item\n2. Second item\n3. Third item\n4. Fourth item\n```\n\n1. First item\n2. Second item\n3. Third item\n4. Fourth item\n\n\n### Unordered List\n\nUse dashes (`-`), asterisks (`*`), or plus signs (`+`) before each item for unordered lists.\n\n```md\n- First item\n- Second item\n- Third item\n- Fourth item\n```\n\n- First item\n- Second item\n- Third item\n- Fourth item\n\n### Nested List\n\nIndent items under another to create nested lists.\n\n```md\n- First item\n- Second item  \n  - Additional item  \n  - Additional item  \n- Third item\n```\n\n- First item\n- Second item  \n  - Additional item  \n  - Additional item  \n- Third item\n\n## Tables\n\nMarkdown tables use pipes (`|`) to separate columns and hyphens (`---`) to define the header row. Place a pipe at the start and end of each row for better compatibility.\n\n```md\n| Property | Description                            |\n| -------- | -------------------------------------- |\n| Name     | Full name of the user                  |\n| Age      | Age in years                           |\n| Joined   | Indicates if user joined the community |\n```\n\n\n| Property | Description                            |\n| -------- | -------------------------------------- |\n| Name     | Full name of the user                  |\n| Age      | Age in years                           |\n| Joined   | Indicates if user joined the community |";
+export declare const listTableMdxTemplate = "---\ntitle: \"Lists and tables\"\ndescription: \"Present structured information using lists or tables.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 2\n---\n# Lists and Tables\nPresent structured information using lists or tables.\n\n## Lists\nMarkdown supports both *ordered* and *unordered* lists, as well as nested list structures.\n\n### Ordered List\nStart each item with a number followed by a period to create an ordered list.\n\n```md\n1. First item\n2. Second item\n3. Third item\n4. Fourth item\n```\n\n1. First item\n2. Second item\n3. Third item\n4. Fourth item\n\n\n### Unordered List\nUse dashes (`-`), asterisks (`*`), or plus signs (`+`) before each item for unordered lists.\n\n```md\n- First item\n- Second item\n- Third item\n- Fourth item\n```\n\n- First item\n- Second item\n- Third item\n- Fourth item\n\n### Nested List\nIndent items under another to create nested lists.\n\n```md\n- First item\n- Second item  \n  - Additional item  \n  - Additional item  \n- Third item\n```\n\n- First item\n- Second item  \n  - Additional item  \n  - Additional item  \n- Third item\n\n## Tables\nMarkdown tables use pipes (`|`) to separate columns and hyphens (`---`) to define the header row. Place a pipe at the start and end of each row for better compatibility.\n\n```md\n| Property | Description                            |\n| -------- | -------------------------------------- |\n| Name     | Full name of the user                  |\n| Age      | Age in years                           |\n| Joined   | Indicates if user joined the community |\n```\n\n| Property | Description                            |\n| -------- | -------------------------------------- |\n| Name     | Full name of the user                  |\n| Age      | Age in years                           |\n| Joined   | Indicates if user joined the community |";

package/dist/templates/mdx/list-table.mdx.js

@@ -7,15 +7,12 @@ categoryOrder: 1
 order: 2
 ---
 # Lists and Tables
-
 Present structured information using lists or tables.
 
 ## Lists
-
 Markdown supports both *ordered* and *unordered* lists, as well as nested list structures.
 
 ### Ordered List
-
 Start each item with a number followed by a period to create an ordered list.
 
 \`\`\`md
@@ -32,7 +29,6 @@ Start each item with a number followed by a period to create an ordered list.
 
 
 ### Unordered List
-
 Use dashes (\`-\`), asterisks (\`*\`), or plus signs (\`+\`) before each item for unordered lists.
 
 \`\`\`md
@@ -48,7 +44,6 @@ Use dashes (\`-\`), asterisks (\`*\`), or plus signs (\`+\`) before each item fo
 - Fourth item
 
 ### Nested List
-
 Indent items under another to create nested lists.
 
 \`\`\`md
@@ -66,7 +61,6 @@ Indent items under another to create nested lists.
 - Third item
 
 ## Tables
-
 Markdown tables use pipes (\`|\`) to separate columns and hyphens (\`---\`) to define the header row. Place a pipe at the start and end of each row for better compatibility.
 
 \`\`\`md
@@ -77,7 +71,6 @@ Markdown tables use pipes (\`|\`) to separate columns and hyphens (\`---\`) to d
 | Joined   | Indicates if user joined the community |
 \`\`\`
 
-
 | Property | Description                            |
 | -------- | -------------------------------------- |
 | Name     | Full name of the user                  |

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

@@ -1 +1 @@
-export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\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\u2019s 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\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### Example navigation.json\n\n```json\n[\n  {\n    \"label\": \"General\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Getting Started\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"list-table\", \"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\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"image-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    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"config\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" }\n    ]\n  }\n]\n```\n\n### Fields\n\n- **label**: The section header shown in the sidebar.\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\u2019s `title` frontmatter.\n\n## Precedence and behavior\n\n- **navigation.json takes priority**. If present, it defines the entire sidebar structure.\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` \u2192 grouped; `categoryOrder` \u2192 category position; `order` \u2192 page position.\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` \u2192 `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.";
+export declare const navigationMdxTemplate = "---\ntitle: \"Navigation\"\ndescription: \"Organize and structure your navigation.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 2\n---\n# Navigation\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)\nWhen no custom navigation is provided, Doccupine generates a structure based on each page\u2019s frontmatter.\n\n### Frontmatter fields\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\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\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### Example navigation.json\n\n```json\n[\n  {\n    \"label\": \"General\",\n    \"links\": [\n      { \"slug\": \"\", \"title\": \"Getting Started\" },\n      { \"slug\": \"commands\", \"title\": \"Commands\" }\n    ]\n  },\n  {\n    \"label\": \"Components\",\n    \"links\": [\n      { \"slug\": \"text\", \"title\": \"Headers and Text\" },\n      { \"slug\": \"list-table\", \"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\": \"callouts\", \"title\": \"Callouts\" },\n      { \"slug\": \"image-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    ]\n  },\n  {\n    \"label\": \"Configuration\",\n    \"links\": [\n      { \"slug\": \"config\", \"title\": \"Globals\" },\n      { \"slug\": \"navigation\", \"title\": \"Navigation\" }\n    ]\n  }\n]\n```\n\n### Fields\n- **label**: The section header shown in the sidebar.\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\u2019s `title` frontmatter.\n\n## Precedence and behavior\n- **navigation.json takes priority**. If present, it defines the entire sidebar structure.\n- Without `navigation.json`, the sidebar is built from page frontmatter: `category` \u2192 grouped; `categoryOrder` \u2192 category position; `order` \u2192 page position.\n- Pages without a `category` appear at the top level.\n\n## Tips\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` \u2192 `text`).\n- **Control titles**: Use `title` in `navigation.json` to customize sidebar labels without changing page frontmatter.";

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

@@ -7,15 +7,12 @@ categoryOrder: 3
 order: 2
 ---
 # Navigation
-
 Doccupine 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.
 
 ## Automatic navigation (default)
-
 When no custom navigation is provided, Doccupine generates a structure based on each page’s frontmatter.
 
 ### Frontmatter fields
-
 - **category**: The category name that groups the page in the sidebar.
 - **categoryOrder**: The position of the category within the sidebar. Lower numbers appear first.
 - **order**: The position of the page within its category. Lower numbers appear first.
@@ -36,7 +33,6 @@ order: 2
 This approach is great for small sets of documents. For larger projects, setting these fields on every page can become repetitive.
 
 ## 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.
 
 ### Example navigation.json
@@ -79,20 +75,17 @@ To centrally define the entire sidebar, create a \`navigation.json\` at your pro
 \`\`\`
 
 ### Fields
-
 - **label**: The section header shown in the sidebar.
 - **links**: An array of page entries for that section.
   - **slug**: The MDX file slug (filename without extension). Use an empty string \`""\` for \`index.mdx\`.
   - **title**: The display title in the navigation. This can differ from the page’s \`title\` frontmatter.
 
 ## Precedence and behavior
-
 - **navigation.json takes priority**. If present, it defines the entire sidebar structure.
 - Without \`navigation.json\`, the sidebar is built from page frontmatter: \`category\` → grouped; \`categoryOrder\` → category position; \`order\` → page position.
 - Pages without a \`category\` appear at the top level.
 
 ## Tips
-
 - **Start simple**: Use frontmatter for small docs. Switch to \`navigation.json\` as the structure grows.
 - **Keep slugs consistent**: \`slug\` must match the MDX filename (e.g., \`text.mdx\` → \`text\`).
 - **Control titles**: Use \`title\` in \`navigation.json\` to customize sidebar labels without changing page frontmatter.`;

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: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\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```jsx\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\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>\n";
+export declare const stepsMdxTemplate = "---\ntitle: \"Steps\"\ndescription: \"Guide readers step-by-step using the Steps component.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 13\n---\n\n# Steps\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\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\n## Properties\n\n<Field value=\"title\" type=\"string\" required>\n  The title of the step.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the step.\n</Field>\n";

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

@@ -8,16 +8,14 @@ order: 13
 ---
 
 # Steps
-
 Guide readers step-by-step using the Steps component.
 
 The Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.
 
 ## Steps Usage
-
 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.
 
-\`\`\`jsx
+\`\`\`mdx
   <Steps>
   <Step title="Step 1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

@@ -1 +1 @@
-export declare const textMdxTemplate = "---\ntitle: \"Headers and Text\"\ndescription: \"Learn how to structure and style your content with headers, formatting, and links.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 1\n---\n# Headers and Text\nLearn how to structure and style your content with headers, formatting, and links.\n\n## Headers\nHeaders define the hierarchy of your content and automatically generate navigation anchors. They also appear in the table of contents, helping readers quickly scan through documentation.\n\n### Creating headers\nAdd `#` symbols before text to create headers at various levels:\n\n```text\n## Main section header\n### Subsection header\n#### Nested subsection header\n```\n\n## Text Formatting\nMarkdown text styling is supported for emphasis, highlighting, and readability.\n\n### Basic formatting\nUse these common syntax options:\n\n- Bold: `**bold text**` \u2192 **bold text**\n- Italic: `*italic text*` \u2192 *italic text*\n- Strikethrough: `~~strikethrough~~` \u2192 ~~strikethrough~~\n\n### Combining formats\nYou can mix multiple styles at once for clarity:\n\n```text\n**_bold and italic_**\n**~~bold and strikethrough~~**\n*~~italic and strikethrough~~**\n```\n\n## Superscript and subscript\nFor formulas, notes, or variables, use HTML tags:\n\n- Superscript `X<sup>2</sup>` \u2192 X<sup>2</sup>\n- Subscript `H<sub>2</sub>O` \u2192 H<sub>2</sub>O\n\n## Links\nLinks connect users to internal pages or external resources. Always use descriptive link text for better accessibility.\n\n### Internal links\nReference other docs with root-relative paths:\n\n```text\n[Getting Started](/)\n[Commands](/commands)\n```\n\n- [Getting Started](/)\n- [Commands](/commands)\n\n### External links\nPoint to external pages by including full URLs:\n\n```text\n[Markdown Guide](https://www.markdownguide.org/)\n```\n\n[Markdown Guide](https://www.markdownguide.org/)\n\n## Blockquotes\nBlockquotes are used to visually highlight key information, quotations, or examples.\n\n### Single line blockquotes\nPrefix text with `>` for a single-line blockquote:\n\n```text\n> Highlighted message or quote\n```\n\n> Highlighted message or quote\n\n### Multi-line blockquotes\nFor larger quotes spanning more than one paragraph:\n\n```text\n> This is a blockquote that spans multiple lines.\n> It can include several paragraphs of text.\n> Each new line starts with a `>` symbol.\n```\n\n> This is a blockquote that spans multiple lines.\n> It can include several paragraphs of text.\n> Each new line starts with a `>` symbol.\n\n## Line Breaks and Spacing\nControl spacing to improve readability and layout.\n\n### Paragraph breaks\nSeparate paragraphs with blank lines:\n\n```text\nFirst paragraph.\n\nSecond paragraph.\n```\n\nFirst paragraph.\n\nSecond paragraph.\n\n## Manual line breaks\nFor shorter breaks inside the same paragraph, use `<br />`:\n\n```text\nThis is one line.<br />\nThis is the next line.\n```\n\nThis is one line.<br />\nThis is the next line.\n\n# Best Practices\n\n## Organizing content\n\n- Use headers to establish hierarchy\n- Maintain logical order (avoid skipping levels, e.g., H2 \u2192 H4)\n- Always write meaningful, descriptive headers\n\n## Formatting text\n\n- Use **bold** for key emphasis only\n- Use *italics* for emphasis or technical terms\n- Limit formatting combinations to maintain readability\n\n## Links\n\n- Avoid vague text like \u201Cclick here\u201D\n- Prefer root-relative paths for internal links\n- Regularly validate links to ensure they are not broken";
+export declare const textMdxTemplate = "---\ntitle: \"Headers and Text\"\ndescription: \"Learn how to structure and style your content with headers, formatting, and links.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 1\n---\n# Headers and Text\nLearn how to structure and style your content with headers, formatting, and links.\n\n## Headers\nHeaders define the hierarchy of your content and automatically generate navigation anchors. They also appear in the table of contents, helping readers quickly scan through documentation.\n\n### Creating headers\nAdd `#` symbols before text to create headers at various levels:\n\n```text\n## Main section header\n### Subsection header\n#### Nested subsection header\n```\n\n## Text Formatting\nMarkdown text styling is supported for emphasis, highlighting, and readability.\n\n### Basic formatting\nUse these common syntax options:\n\n- Bold: `**bold text**` \u2192 **bold text**\n- Italic: `*italic text*` \u2192 *italic text*\n- Strikethrough: `~~strikethrough~~` \u2192 ~~strikethrough~~\n\n### Combining formats\nYou can mix multiple styles at once for clarity:\n\n```text\n**_bold and italic_**\n**~~bold and strikethrough~~**\n*~~italic and strikethrough~~**\n```\n\n## Superscript and subscript\nFor formulas, notes, or variables, use HTML tags:\n\n- Superscript `X<sup>2</sup>` \u2192 X<sup>2</sup>\n- Subscript `H<sub>2</sub>O` \u2192 H<sub>2</sub>O\n\n## Links\nLinks connect users to internal pages or external resources. Always use descriptive link text for better accessibility.\n\n### Internal links\nReference other docs with root-relative paths:\n\n```text\n[Getting Started](/)\n[Commands](/commands)\n```\n\n- [Getting Started](/)\n- [Commands](/commands)\n\n### External links\nPoint to external pages by including full URLs:\n\n```text\n[Markdown Guide](https://www.markdownguide.org/)\n```\n\n[Markdown Guide](https://www.markdownguide.org/)\n\n## Blockquotes\nBlockquotes are used to visually highlight key information, quotations, or examples.\n\n### Single line blockquotes\nPrefix text with `>` for a single-line blockquote:\n\n```text\n> Highlighted message or quote\n```\n\n> Highlighted message or quote\n\n### Multi-line blockquotes\nFor larger quotes spanning more than one paragraph:\n\n```text\n> This is a blockquote that spans multiple lines.\n> It can include several paragraphs of text.\n> Each new line starts with a `>` symbol.\n```\n\n> This is a blockquote that spans multiple lines.\n> It can include several paragraphs of text.\n> Each new line starts with a `>` symbol.\n\n## Line Breaks and Spacing\nControl spacing to improve readability and layout.\n\n### Paragraph breaks\nSeparate paragraphs with blank lines:\n\n```text\nFirst paragraph.\n\nSecond paragraph.\n```\n\nFirst paragraph.\n\nSecond paragraph.\n\n## Manual line breaks\nFor shorter breaks inside the same paragraph, use `<br />`:\n\n```text\nThis is one line.<br />\nThis is the next line.\n```\n\nThis is one line.<br />\nThis is the next line.\n\n# Best Practices\n\n## Organizing content\n- Use headers to establish hierarchy\n- Maintain logical order (avoid skipping levels, e.g., H2 \u2192 H4)\n- Always write meaningful, descriptive headers\n\n## Formatting text\n- Use **bold** for key emphasis only\n- Use *italics* for emphasis or technical terms\n- Limit formatting combinations to maintain readability\n\n## Links\n- Avoid vague text like \u201Cclick here\u201D\n- Prefer root-relative paths for internal links\n- Regularly validate links to ensure they are not broken";

package/dist/templates/mdx/text.mdx.js

@@ -124,19 +124,16 @@ This is the next line.
 # Best Practices
 
 ## Organizing content
-
 - Use headers to establish hierarchy
 - Maintain logical order (avoid skipping levels, e.g., H2 → H4)
 - Always write meaningful, descriptive headers
 
 ## Formatting text
-
 - Use **bold** for key emphasis only
 - Use *italics* for emphasis or technical terms
 - Limit formatting combinations to maintain readability
 
 ## Links
-
 - Avoid vague text like “click here”
 - Prefer root-relative paths for internal links
 - Regularly validate links to ensure they are not broken`;

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

@@ -1 +1 @@
-export declare const updateMdxTemplate = "---\ntitle: \"Update\"\ndescription: \"Easily manage and present change history.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n# Update\n\nEasily manage and present change history.\n\nThe `Update` component helps you display release notes, version details, and changelogs in a standardized format.\n\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n\n## Update Usage\n\nYou can combine multiple `Update` components to build complete changelogs.\n\n~~~text\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n~~~\n\n## Properties\n\n<Field value=\"label\" type=\"string\" required>\n  The label of the update.\n</Field>\n\n<Field value=\"description\" type=\"string\" required>\n  The description of the update.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the update.\n</Field>";
+export declare const updateMdxTemplate = "---\ntitle: \"Update\"\ndescription: \"Easily manage and present change history.\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 11\n---\n# Update\nEasily manage and present change history.\n\nThe `Update` component helps you display release notes, version details, and changelogs in a standardized format.\n\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n\n## Update Usage\nYou can combine multiple `Update` components to build complete changelogs.\n\n```mdx\n<Update label=\"Example\" description=\"v0.0.1\">\n  ## Example entry\n\n  You can include anything here\u2014images, code snippets, or a bullet list of modifications.\n\n  ![Demo Image](https://doccupine.com/demo.png)\n\n  ### Key additions\n\n  - Fully responsive layout\n  - Individual anchor for each update\n  - Automatic RSS feed entry generation\n</Update>\n```\n\n## Properties\n\n<Field value=\"label\" type=\"string\" required>\n  The label of the update.\n</Field>\n\n<Field value=\"description\" type=\"string\" required>\n  The description of the update.\n</Field>\n\n<Field value=\"children\" type=\"node\" required>\n  The content of the update.\n</Field>";

package/dist/templates/mdx/update.mdx.js

@@ -7,7 +7,6 @@ categoryOrder: 1
 order: 11
 ---
 # Update
-
 Easily manage and present change history.
 
 The \`Update\` component helps you display release notes, version details, and changelogs in a standardized format.
@@ -27,10 +26,9 @@ The \`Update\` component helps you display release notes, version details, and c
 </Update>
 
 ## Update Usage
-
 You can combine multiple \`Update\` components to build complete changelogs.
 
-~~~text
+\`\`\`mdx
 <Update label="Example" description="v0.0.1">
   ## Example entry
 
@@ -44,7 +42,7 @@ You can combine multiple \`Update\` components to build complete changelogs.
   - Individual anchor for each update
   - Automatic RSS feed entry generation
 </Update>
-~~~
+\`\`\`
 
 ## Properties
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Generate beautiful, ready-to-use documentation with just one CLI command – fast, simple, and open source.",
   "main": "dist/index.js",
   "bin": {
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@types/chokidar": "^2.1.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^24.8.0",
+    "@types/node": "^24.8.1",
     "@types/prompts": "^2.4.9",
     "typescript": "^5.9.3"
   },