doccupine 0.0.98 → 0.0.100

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

@@ -1 +1 @@
-export declare const mdxComponentsTemplate = "import React from \"react\";\nimport Link from \"next/link\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype MDXComponents = Record<string, React.ComponentType<any>>;\nimport { Space } from \"cherry-styled-components\";\nimport { Code as CodeBlock } from \"@/components/layout/Code\";\nimport { Card } from \"@/components/layout/Card\";\nimport { Accordion } from \"@/components/layout/Accordion\";\nimport { Tabs, TabContent } from \"@/components/layout/Tabs\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { Columns } from \"@/components/layout/Columns\";\nimport { Field } from \"@/components/layout/Field\";\nimport { Update } from \"@/components/layout/Update\";\nimport { Steps, Step } from \"@/components/layout/Steps\";\nimport { Button } from \"@/components/layout/Button\";\nimport { ColorSwatch, ColorSwatchGroup } from \"@/components/layout/ColorSwatch\";\nimport { DemoTheme } from \"@/components/layout/DemoTheme\";\n\ninterface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children?: React.ReactNode;\n}\n\ninterface PreProps extends React.HTMLAttributes<HTMLPreElement> {\n  children?: React.ReactNode;\n}\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n  if (Array.isArray(children))\n    return children.map(extractAllTextFromChildren).join(\"\");\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<{\n      children?: React.ReactNode;\n    }>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n  return \"\";\n}\n\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\n// Map <pre><code class=\"language-xyz\"> to our <Code /> component\nfunction Pre(props: PreProps) {\n  const child = React.Children.only(props.children) as React.ReactElement<{\n    className?: string;\n    children?: React.ReactNode;\n  }> | null;\n  if (child && child.type === \"code\") {\n    const className = child.props.className || \"\";\n    const match = /language-(\\w+)/.exec(className);\n    const language = match ? match[1] : undefined;\n    const code = extractAllTextFromChildren(child.props.children).replace(\n      /\\n$/,\n      \"\",\n    );\n    if (language) {\n      return (\n        <CodeBlock className={className} code={code} language={language} />\n      );\n    }\n  }\n  return <pre {...props} />;\n}\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n  return {\n    // Headings with auto-generated ids for TOC and deep links\n    h1: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h1 id={id} {...props}>\n          {children}\n        </h1>\n      );\n    },\n    h2: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h2 id={id} {...props}>\n          {children}\n        </h2>\n      );\n    },\n    h3: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h3 id={id} {...props}>\n          {children}\n        </h3>\n      );\n    },\n    h4: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h4 id={id} {...props}>\n          {children}\n        </h4>\n      );\n    },\n    h5: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h5 id={id} {...props}>\n          {children}\n        </h5>\n      );\n    },\n    h6: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h6 id={id} {...props}>\n          {children}\n        </h6>\n      );\n    },\n\n    // Links - use Next.js Link for internal paths\n    a: ({\n      href,\n      children,\n      ...props\n    }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {\n      if (href && href.startsWith(\"/\")) {\n        return (\n          <Link href={href} {...props}>\n            {children}\n          </Link>\n        );\n      }\n      return (\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n          {children}\n        </a>\n      );\n    },\n\n    // Tables - wrap in a div for responsive overflow\n    table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (\n      <div className=\"table-wrapper\">\n        <table {...props} />\n      </div>\n    ),\n\n    // Code blocks\n    pre: Pre,\n\n    // Expose your custom components for MDX usage\n    Card,\n    Accordion,\n    Tabs,\n    TabContent,\n    Callout,\n    Icon,\n    Columns,\n    Field,\n    Update,\n    Steps,\n    Step,\n    Button,\n    ColorSwatch,\n    ColorSwatchGroup,\n    DemoTheme,\n    Space,\n    ...components,\n  };\n}\n";
+export declare const mdxComponentsTemplate = "import React from \"react\";\nimport Link from \"next/link\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype MDXComponents = Record<string, React.ComponentType<any>>;\nimport { Space } from \"cherry-styled-components\";\nimport { Code as CodeBlock, CodeTabs } from \"@/components/layout/Code\";\nimport { Card } from \"@/components/layout/Card\";\nimport { Accordion } from \"@/components/layout/Accordion\";\nimport { Tabs, TabContent } from \"@/components/layout/Tabs\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { Columns } from \"@/components/layout/Columns\";\nimport { Field } from \"@/components/layout/Field\";\nimport { Update } from \"@/components/layout/Update\";\nimport { Steps, Step } from \"@/components/layout/Steps\";\nimport { Button } from \"@/components/layout/Button\";\nimport { ColorSwatch, ColorSwatchGroup } from \"@/components/layout/ColorSwatch\";\nimport { DemoTheme } from \"@/components/layout/DemoTheme\";\n\ninterface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children?: React.ReactNode;\n}\n\ninterface PreProps extends React.HTMLAttributes<HTMLPreElement> {\n  children?: React.ReactNode;\n}\n\nfunction extractAllTextFromChildren(children: React.ReactNode): string {\n  if (children == null) return \"\";\n  if (typeof children === \"string\") return children;\n  if (typeof children === \"number\") return String(children);\n  if (typeof children === \"boolean\") return \"\";\n  if (Array.isArray(children))\n    return children.map(extractAllTextFromChildren).join(\"\");\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<{\n      children?: React.ReactNode;\n    }>;\n    return extractAllTextFromChildren(element.props.children);\n  }\n  return \"\";\n}\n\nfunction generateId(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[^\\w\\s-]/g, \"\")\n    .replace(/\\s+/g, \"-\")\n    .trim();\n}\n\n// Map <pre><code class=\"language-xyz\"> to our <Code /> component\nfunction Pre(props: PreProps) {\n  const child = React.Children.only(props.children) as React.ReactElement<{\n    className?: string;\n    children?: React.ReactNode;\n  }> | null;\n  if (child && child.type === \"code\") {\n    const className = child.props.className || \"\";\n    const match = /language-(\\w+)/.exec(className);\n    const language = match ? match[1] : undefined;\n    const code = extractAllTextFromChildren(child.props.children).replace(\n      /\\n$/,\n      \"\",\n    );\n    if (language) {\n      return (\n        <CodeBlock className={className} code={code} language={language} />\n      );\n    }\n  }\n  return <pre {...props} />;\n}\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n  return {\n    // Headings with auto-generated ids for TOC and deep links\n    h1: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h1 id={id} {...props}>\n          {children}\n        </h1>\n      );\n    },\n    h2: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h2 id={id} {...props}>\n          {children}\n        </h2>\n      );\n    },\n    h3: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h3 id={id} {...props}>\n          {children}\n        </h3>\n      );\n    },\n    h4: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h4 id={id} {...props}>\n          {children}\n        </h4>\n      );\n    },\n    h5: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h5 id={id} {...props}>\n          {children}\n        </h5>\n      );\n    },\n    h6: ({ children, ...props }: HeadingProps) => {\n      const id = generateId(extractAllTextFromChildren(children));\n      return (\n        <h6 id={id} {...props}>\n          {children}\n        </h6>\n      );\n    },\n\n    // Links - use Next.js Link for internal paths\n    a: ({\n      href,\n      children,\n      ...props\n    }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {\n      if (href && href.startsWith(\"/\")) {\n        return (\n          <Link href={href} {...props}>\n            {children}\n          </Link>\n        );\n      }\n      return (\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" {...props}>\n          {children}\n        </a>\n      );\n    },\n\n    // Tables - wrap in a div for responsive overflow\n    table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (\n      <div className=\"table-wrapper\">\n        <table {...props} />\n      </div>\n    ),\n\n    // Code blocks\n    pre: Pre,\n\n    // Expose your custom components for MDX usage\n    Code: CodeBlock,\n    CodeTabs,\n    Card,\n    Accordion,\n    Tabs,\n    TabContent,\n    Callout,\n    Icon,\n    Columns,\n    Field,\n    Update,\n    Steps,\n    Step,\n    Button,\n    ColorSwatch,\n    ColorSwatchGroup,\n    DemoTheme,\n    Space,\n    ...components,\n  };\n}\n";

package/dist/templates/components/MDXComponents.js

@@ -4,7 +4,7 @@ import Link from "next/link";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type MDXComponents = Record<string, React.ComponentType<any>>;
 import { Space } from "cherry-styled-components";
-import { Code as CodeBlock } from "@/components/layout/Code";
+import { Code as CodeBlock, CodeTabs } from "@/components/layout/Code";
 import { Card } from "@/components/layout/Card";
 import { Accordion } from "@/components/layout/Accordion";
 import { Tabs, TabContent } from "@/components/layout/Tabs";
@@ -156,6 +156,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     pre: Pre,
 
     // Expose your custom components for MDX usage
+    Code: CodeBlock,
+    CodeTabs,
     Card,
     Accordion,
     Tabs,

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

@@ -1 +1 @@
-export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  interactiveStyles,\n  resetButton,\n  styledCode,\n} from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\n/* Icon-only copy button. interactiveStyles supplies the border highlight on\n   hover plus the focus/active rings (no scale effect); the GitHub-style\n   copied/base colors stay fixed like the rest of the code block. The dark\n   block re-declares the hover border because its higher-specificity\n   :root.dark & border-color would otherwise override the mixin's hover. */\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  ${resetButton}\n  ${interactiveStyles}\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border-color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${thinScrollbar};\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({ code, language = \"javascript\", theme, className }: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code };\n";
+export declare const codeTemplate = "\"use client\";\nimport { useState, useCallback, useMemo, useId } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport {\n  interactiveStyles,\n  resetButton,\n  styledCode,\n} from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeStringify from \"rehype-stringify\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\ninterface CodeProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  code: string;\n  language?: string;\n  title?: string;\n  theme?: Theme;\n}\n\ninterface CodeTab {\n  label: string;\n  code: string;\n  language?: string;\n}\n\ninterface CodeTabsProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"theme\"\n> {\n  tabs: CodeTab[];\n  theme?: Theme;\n}\n\nconst CodeWrapper = styled.span<{ theme: Theme }>`\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    border-color: rgba(255, 255, 255, 0.2);\n  }\n`;\n\n/* Code block uses a fixed GitHub-style palette in both modes. Independent of\n   theme.json so syntax highlighting stays legible regardless of brand colors.\n   Dark variants live in :root.dark & blocks so the swap happens via the\n   active <html> class with no re-render. */\nconst TopBar = styled.div<{ theme: Theme }>`\n  position: relative;\n  background: #f6f8fa;\n  border-top-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-top-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom: solid 1px rgba(0, 0, 0, 0.1);\n  height: 33px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 5px;\n  padding: 0 10px;\n\n  :root.dark & {\n    background: #0d1117;\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n`;\n\nconst DotsContainer = styled.div`\n  display: flex;\n  gap: 5px;\n`;\n\nconst Dot = styled.span<{ theme: Theme }>`\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.1);\n\n  :root.dark & {\n    background: rgba(255, 255, 255, 0.1);\n  }\n`;\n\n/* Icon-only copy button. interactiveStyles supplies the border highlight on\n   hover plus the focus/active rings (no scale effect); the GitHub-style\n   copied/base colors stay fixed like the rest of the code block. The dark\n   block re-declares the hover border because its higher-specificity\n   :root.dark & border-color would otherwise override the mixin's hover. */\nconst CopyButton = styled.button<{ theme: Theme; $copied: boolean }>`\n  ${resetButton}\n  ${interactiveStyles}\n  background: ${({ $copied }) =>\n    $copied ? \"rgba(45, 164, 78, 0.1)\" : \"transparent\"};\n  border-color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"rgba(0, 0, 0, 0.1)\")};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -6px;\n\n  & svg.lucide {\n    color: ${({ $copied }) => ($copied ? \"#2da44e\" : \"#57606a\")};\n  }\n\n  :root.dark & {\n    background: ${({ $copied }) =>\n      $copied ? \"rgba(126, 231, 135, 0.2)\" : \"transparent\"};\n    border-color: ${({ $copied }) =>\n      $copied ? \"#7ee787\" : \"rgba(255, 255, 255, 0.1)\"};\n\n    & svg.lucide {\n      color: ${({ $copied }) => ($copied ? \"#7ee787\" : \"#c9d1d9\")};\n    }\n\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n`;\n\n/* Centered file name in the TopBar. Sits absolutely over the flex row so the\n   dots and copy button keep their edge alignment. Monospace + muted GitHub\n   grays, swapped via :root.dark like the rest of the block. pointer-events off\n   so clicks fall through to nothing and never steal focus from the buttons. */\nconst TopBarTitle = styled.span<{ theme: Theme }>`\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 60%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 2;\n  color: #57606a;\n\n  :root.dark & {\n    color: #8b949e;\n  }\n`;\n\n/* Segmented control living in the TopBar for CodeTabs. Scrolls horizontally\n   with the thin scrollbar when the labels overflow the 33px bar. */\nconst TabList = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin-left: -6px;\n`;\n\n/* Individual tab button. Active tab reads as part of the window: a light body\n   fill (#ffffff) that echoes the code area, with a soft border. Inactive tabs\n   are muted and transparent. resetButton strips native styling; focus-visible\n   uses the brand primary ring for keyboard users. All colors stay fixed and\n   swap purely via :root.dark, matching the no-re-render palette approach. */\nconst CodeTab = styled.button<{ theme: Theme; $active: boolean }>`\n  ${resetButton}\n  flex: 0 0 auto;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-size: 12px;\n  line-height: 1;\n  padding: 5px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    color 0.15s ease,\n    background 0.15s ease,\n    border-color 0.15s ease;\n  border: solid 1px\n    ${({ $active }) => ($active ? \"rgba(0, 0, 0, 0.1)\" : \"transparent\")};\n  background: ${({ $active }) => ($active ? \"#ffffff\" : \"transparent\")};\n  color: ${({ $active }) => ($active ? \"#24292f\" : \"#57606a\")};\n\n  &:hover {\n    color: #24292f;\n    background: ${({ $active }) =>\n      $active ? \"#ffffff\" : \"rgba(0, 0, 0, 0.04)\"};\n  }\n\n  &:focus-visible {\n    outline: solid 2px ${({ theme }) => theme.colors.primary};\n    outline-offset: 1px;\n  }\n\n  :root.dark & {\n    border-color: ${({ $active }) =>\n      $active ? \"rgba(255, 255, 255, 0.15)\" : \"transparent\"};\n    background: ${({ $active }) => ($active ? \"#161b22\" : \"transparent\")};\n    color: ${({ $active }) => ($active ? \"#e6edf3\" : \"#8b949e\")};\n\n    &:hover {\n      color: #e6edf3;\n      background: ${({ $active }) =>\n        $active ? \"#161b22\" : \"rgba(255, 255, 255, 0.06)\"};\n    }\n  }\n`;\n\n/* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.\n   Browser resolves which rule wins based on the active <html> class with no\n   JS or React re-render involved. */\nconst lightSyntaxHighlight = css`\n  & .hljs {\n    color: #24292f;\n    background: #ffffff;\n    min-width: min-content;\n    width: 100%;\n    display: block;\n    padding-right: 20px;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #cf222e;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #8250df;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #0550ae;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #0a3069;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #953800;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #6e7781;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #116329;\n  }\n  & .hljs-subst {\n    color: #24292f;\n  }\n  & .hljs-section {\n    color: #0550ae;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #953800;\n  }\n  & .hljs-emphasis {\n    color: #24292f;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #24292f;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #116329;\n    background-color: #dafbe1;\n  }\n  & .hljs-deletion {\n    color: #82071e;\n    background-color: #ffebe9;\n  }\n`;\n\nconst darkSyntaxHighlight = css`\n  & .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n  & .hljs-doctag,\n  & .hljs-keyword,\n  & .hljs-meta .hljs-keyword,\n  & .hljs-template-tag,\n  & .hljs-template-variable,\n  & .hljs-type,\n  & .hljs-variable.language_ {\n    color: #ff7b72;\n  }\n  & .hljs-title,\n  & .hljs-title.class_,\n  & .hljs-title.class_.inherited__,\n  & .hljs-title.function_ {\n    color: #d2a8ff;\n  }\n  & .hljs-attr,\n  & .hljs-attribute,\n  & .hljs-literal,\n  & .hljs-meta,\n  & .hljs-number,\n  & .hljs-operator,\n  & .hljs-selector-attr,\n  & .hljs-selector-class,\n  & .hljs-selector-id,\n  & .hljs-variable {\n    color: #79c0ff;\n  }\n  & .hljs-meta .hljs-string,\n  & .hljs-regexp,\n  & .hljs-string {\n    color: #a5d6ff;\n  }\n  & .hljs-built_in,\n  & .hljs-symbol {\n    color: #ffa657;\n  }\n  & .hljs-code,\n  & .hljs-comment,\n  & .hljs-formula {\n    color: #8b949e;\n  }\n  & .hljs-name,\n  & .hljs-quote,\n  & .hljs-selector-pseudo,\n  & .hljs-selector-tag {\n    color: #7ee787;\n  }\n  & .hljs-subst {\n    color: #c9d1d9;\n  }\n  & .hljs-section {\n    color: #1f6feb;\n    font-weight: 700;\n  }\n  & .hljs-bullet {\n    color: #f2cc60;\n  }\n  & .hljs-emphasis {\n    color: #c9d1d9;\n    font-style: italic;\n  }\n  & .hljs-strong {\n    color: #c9d1d9;\n    font-weight: 700;\n  }\n  & .hljs-addition {\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n  & .hljs-deletion {\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n`;\n\nconst Body = styled.div<{ theme: Theme }>`\n  background: #ffffff;\n  border-bottom-left-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border-bottom-right-radius: ${({ theme }) => theme.spacing.radius.lg};\n  color: #24292f;\n  padding: 20px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  text-align: left;\n  overflow-x: auto;\n  overflow-y: auto;\n  max-height: calc(100dvh - 400px);\n  ${thinScrollbar};\n  ${({ theme }) => styledCode(theme)};\n  ${lightSyntaxHighlight};\n\n  /* Diff lines: highlight.js wraps each +/- line in a single span, so\n     stretching it to the full row reads like a GitHub diff. inline-block keeps\n     the trailing newline as the line break instead of adding an empty row. */\n  & .hljs-addition,\n  & .hljs-deletion {\n    display: inline-table;\n    width: 100%;\n  }\n\n  :root.dark & {\n    background: #0d1117;\n    color: #ffffff;\n    ${darkSyntaxHighlight};\n  }\n`;\n\nconst escapeHtml = (unsafe: string): string => {\n  return unsafe\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n};\n\nconst sanitizeLanguage = (lang: string): string =>\n  lang.replace(/[^a-zA-Z0-9_-]/g, \"\");\n\nconst highlightCode = (code: string, language: string): string => {\n  const escapedCode = escapeHtml(code);\n  const safeLang = sanitizeLanguage(language);\n  const result = unified()\n    .use(rehypeParse, { fragment: true })\n    .use(rehypeHighlight, {\n      detect: true,\n      ignoreMissing: true,\n    })\n    .use(rehypeStringify)\n    .processSync(\n      `<pre><code class=\"language-${safeLang}\">${escapedCode}</code></pre>`,\n    );\n\n  return String(result);\n};\n\nfunction Code({\n  code,\n  language = \"javascript\",\n  title,\n  theme,\n  className,\n}: CodeProps) {\n  const [copied, setCopied] = useState(false);\n  const highlightedCode = useMemo(\n    () => highlightCode(code, language),\n    [code, language],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [code]);\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <DotsContainer>\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n          <Dot theme={theme} />\n        </DotsContainer>\n        {title ? <TopBarTitle theme={theme}>{title}</TopBarTitle> : null}\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\n/* Multi-variant code block (npm / pnpm / yarn, etc). Tabs replace the macOS\n   dots in the TopBar as a keyboard-accessible tablist; the copy button copies\n   whichever tab is active and resets its copied state when the tab changes. */\nfunction CodeTabs({ tabs, theme, className }: CodeTabsProps) {\n  const baseId = useId();\n  const [active, setActive] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const safeActive = active < tabs.length ? active : 0;\n  const activeTab = tabs[safeActive];\n\n  const highlightedCode = useMemo(\n    () =>\n      activeTab\n        ? highlightCode(activeTab.code, activeTab.language ?? \"bash\")\n        : \"\",\n    [activeTab],\n  );\n\n  const handleSelect = useCallback((index: number) => {\n    setActive(index);\n    setCopied(false);\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    if (!activeTab) return;\n    try {\n      await navigator.clipboard.writeText(activeTab.code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy code:\", err);\n    }\n  }, [activeTab]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      let next = safeActive;\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        next = (safeActive + 1) % tabs.length;\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        next = (safeActive - 1 + tabs.length) % tabs.length;\n      } else if (event.key === \"Home\") {\n        next = 0;\n      } else if (event.key === \"End\") {\n        next = tabs.length - 1;\n      } else {\n        return;\n      }\n      event.preventDefault();\n      handleSelect(next);\n      const target = document.getElementById(`${baseId}-tab-${next}`);\n      if (target) target.focus();\n    },\n    [baseId, handleSelect, safeActive, tabs.length],\n  );\n\n  if (!tabs || tabs.length === 0) return null;\n\n  return (\n    <CodeWrapper\n      className={`${className ?? \"\"} code-wrapper`.trim()}\n      theme={theme}\n    >\n      <TopBar theme={theme}>\n        <TabList role=\"tablist\" aria-label=\"Code variants\">\n          {tabs.map((tab, index) => (\n            <CodeTab\n              key={`${tab.label}-${index}`}\n              type=\"button\"\n              role=\"tab\"\n              id={`${baseId}-tab-${index}`}\n              aria-selected={index === safeActive}\n              aria-controls={`${baseId}-panel`}\n              tabIndex={index === safeActive ? 0 : -1}\n              onClick={() => handleSelect(index)}\n              onKeyDown={handleKeyDown}\n              $active={index === safeActive}\n              theme={theme}\n            >\n              {tab.label}\n            </CodeTab>\n          ))}\n        </TabList>\n        <CopyButton\n          onClick={handleCopy}\n          $copied={copied}\n          theme={theme}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          <Icon name={copied ? \"check\" : \"copy\"} size={12} />\n        </CopyButton>\n      </TopBar>\n      <Body\n        id={`${baseId}-panel`}\n        role=\"tabpanel\"\n        aria-labelledby={`${baseId}-tab-${safeActive}`}\n        dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        theme={theme}\n        className=\"code-wrapper-body\"\n      />\n    </CodeWrapper>\n  );\n}\n\nexport { Code, CodeTabs };\n";

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

@@ -1,5 +1,5 @@
 export const codeTemplate = `"use client";
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useId } from "react";
 import styled, { css } from "styled-components";
 import {
   interactiveStyles,
@@ -20,6 +20,21 @@ interface CodeProps extends Omit<
 > {
   code: string;
   language?: string;
+  title?: string;
+  theme?: Theme;
+}
+
+interface CodeTab {
+  label: string;
+  code: string;
+  language?: string;
+}
+
+interface CodeTabsProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "theme"
+> {
+  tabs: CodeTab[];
   theme?: Theme;
 }
 
@@ -41,6 +56,7 @@ const CodeWrapper = styled.span<{ theme: Theme }>\`
    Dark variants live in :root.dark & blocks so the swap happens via the
    active <html> class with no re-render. */
 const TopBar = styled.div<{ theme: Theme }>\`
+  position: relative;
   background: #f6f8fa;
   border-top-left-radius: \${({ theme }) => theme.spacing.radius.lg};
   border-top-right-radius: \${({ theme }) => theme.spacing.radius.lg};
@@ -113,6 +129,90 @@ const CopyButton = styled.button<{ theme: Theme; $copied: boolean }>\`
   }
 \`;
 
+/* Centered file name in the TopBar. Sits absolutely over the flex row so the
+   dots and copy button keep their edge alignment. Monospace + muted GitHub
+   grays, swapped via :root.dark like the rest of the block. pointer-events off
+   so clicks fall through to nothing and never steal focus from the buttons. */
+const TopBarTitle = styled.span<{ theme: Theme }>\`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  font-family: \${({ theme }) => theme.fonts.mono};
+  font-size: 12px;
+  line-height: 2;
+  color: #57606a;
+
+  :root.dark & {
+    color: #8b949e;
+  }
+\`;
+
+/* Segmented control living in the TopBar for CodeTabs. Scrolls horizontally
+   with the thin scrollbar when the labels overflow the 33px bar. */
+const TabList = styled.div<{ theme: Theme }>\`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  overflow-x: auto;
+  \${thinScrollbar};
+  margin-left: -6px;
+\`;
+
+/* Individual tab button. Active tab reads as part of the window: a light body
+   fill (#ffffff) that echoes the code area, with a soft border. Inactive tabs
+   are muted and transparent. resetButton strips native styling; focus-visible
+   uses the brand primary ring for keyboard users. All colors stay fixed and
+   swap purely via :root.dark, matching the no-re-render palette approach. */
+const CodeTab = styled.button<{ theme: Theme; $active: boolean }>\`
+  \${resetButton}
+  flex: 0 0 auto;
+  font-family: \${({ theme }) => theme.fonts.mono};
+  font-size: 12px;
+  line-height: 1;
+  padding: 5px;
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease,
+    border-color 0.15s ease;
+  border: solid 1px
+    \${({ $active }) => ($active ? "rgba(0, 0, 0, 0.1)" : "transparent")};
+  background: \${({ $active }) => ($active ? "#ffffff" : "transparent")};
+  color: \${({ $active }) => ($active ? "#24292f" : "#57606a")};
+
+  &:hover {
+    color: #24292f;
+    background: \${({ $active }) =>
+      $active ? "#ffffff" : "rgba(0, 0, 0, 0.04)"};
+  }
+
+  &:focus-visible {
+    outline: solid 2px \${({ theme }) => theme.colors.primary};
+    outline-offset: 1px;
+  }
+
+  :root.dark & {
+    border-color: \${({ $active }) =>
+      $active ? "rgba(255, 255, 255, 0.15)" : "transparent"};
+    background: \${({ $active }) => ($active ? "#161b22" : "transparent")};
+    color: \${({ $active }) => ($active ? "#e6edf3" : "#8b949e")};
+
+    &:hover {
+      color: #e6edf3;
+      background: \${({ $active }) =>
+        $active ? "#161b22" : "rgba(255, 255, 255, 0.06)"};
+    }
+  }
+\`;
+
 /* GitHub Light syntax highlighting by default; GitHub Dark in :root.dark.
    Browser resolves which rule wins based on the active <html> class with no
    JS or React re-render involved. */
@@ -120,6 +220,10 @@ const lightSyntaxHighlight = css\`
   & .hljs {
     color: #24292f;
     background: #ffffff;
+    min-width: min-content;
+    width: 100%;
+    display: block;
+    padding-right: 20px;
   }
   & .hljs-doctag,
   & .hljs-keyword,
@@ -291,6 +395,15 @@ const Body = styled.div<{ theme: Theme }>\`
   \${({ theme }) => styledCode(theme)};
   \${lightSyntaxHighlight};
 
+  /* Diff lines: highlight.js wraps each +/- line in a single span, so
+     stretching it to the full row reads like a GitHub diff. inline-block keeps
+     the trailing newline as the line break instead of adding an empty row. */
+  & .hljs-addition,
+  & .hljs-deletion {
+    display: inline-table;
+    width: 100%;
+  }
+
   :root.dark & {
     background: #0d1117;
     color: #ffffff;
@@ -327,7 +440,13 @@ const highlightCode = (code: string, language: string): string => {
   return String(result);
 };
 
-function Code({ code, language = "javascript", theme, className }: CodeProps) {
+function Code({
+  code,
+  language = "javascript",
+  title,
+  theme,
+  className,
+}: CodeProps) {
   const [copied, setCopied] = useState(false);
   const highlightedCode = useMemo(
     () => highlightCode(code, language),
@@ -355,6 +474,109 @@ function Code({ code, language = "javascript", theme, className }: CodeProps) {
           <Dot theme={theme} />
           <Dot theme={theme} />
         </DotsContainer>
+        {title ? <TopBarTitle theme={theme}>{title}</TopBarTitle> : null}
+        <CopyButton
+          onClick={handleCopy}
+          $copied={copied}
+          theme={theme}
+          aria-label={copied ? "Copied" : "Copy code"}
+        >
+          <Icon name={copied ? "check" : "copy"} size={12} />
+        </CopyButton>
+      </TopBar>
+      <Body
+        dangerouslySetInnerHTML={{ __html: highlightedCode }}
+        theme={theme}
+        className="code-wrapper-body"
+      />
+    </CodeWrapper>
+  );
+}
+
+/* Multi-variant code block (npm / pnpm / yarn, etc). Tabs replace the macOS
+   dots in the TopBar as a keyboard-accessible tablist; the copy button copies
+   whichever tab is active and resets its copied state when the tab changes. */
+function CodeTabs({ tabs, theme, className }: CodeTabsProps) {
+  const baseId = useId();
+  const [active, setActive] = useState(0);
+  const [copied, setCopied] = useState(false);
+
+  const safeActive = active < tabs.length ? active : 0;
+  const activeTab = tabs[safeActive];
+
+  const highlightedCode = useMemo(
+    () =>
+      activeTab
+        ? highlightCode(activeTab.code, activeTab.language ?? "bash")
+        : "",
+    [activeTab],
+  );
+
+  const handleSelect = useCallback((index: number) => {
+    setActive(index);
+    setCopied(false);
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    if (!activeTab) return;
+    try {
+      await navigator.clipboard.writeText(activeTab.code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy code:", err);
+    }
+  }, [activeTab]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      let next = safeActive;
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        next = (safeActive + 1) % tabs.length;
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        next = (safeActive - 1 + tabs.length) % tabs.length;
+      } else if (event.key === "Home") {
+        next = 0;
+      } else if (event.key === "End") {
+        next = tabs.length - 1;
+      } else {
+        return;
+      }
+      event.preventDefault();
+      handleSelect(next);
+      const target = document.getElementById(\`\${baseId}-tab-\${next}\`);
+      if (target) target.focus();
+    },
+    [baseId, handleSelect, safeActive, tabs.length],
+  );
+
+  if (!tabs || tabs.length === 0) return null;
+
+  return (
+    <CodeWrapper
+      className={\`\${className ?? ""} code-wrapper\`.trim()}
+      theme={theme}
+    >
+      <TopBar theme={theme}>
+        <TabList role="tablist" aria-label="Code variants">
+          {tabs.map((tab, index) => (
+            <CodeTab
+              key={\`\${tab.label}-\${index}\`}
+              type="button"
+              role="tab"
+              id={\`\${baseId}-tab-\${index}\`}
+              aria-selected={index === safeActive}
+              aria-controls={\`\${baseId}-panel\`}
+              tabIndex={index === safeActive ? 0 : -1}
+              onClick={() => handleSelect(index)}
+              onKeyDown={handleKeyDown}
+              $active={index === safeActive}
+              theme={theme}
+            >
+              {tab.label}
+            </CodeTab>
+          ))}
+        </TabList>
         <CopyButton
           onClick={handleCopy}
           $copied={copied}
@@ -365,6 +587,9 @@ function Code({ code, language = "javascript", theme, className }: CodeProps) {
         </CopyButton>
       </TopBar>
       <Body
+        id={\`\${baseId}-panel\`}
+        role="tabpanel"
+        aria-labelledby={\`\${baseId}-tab-\${safeActive}\`}
         dangerouslySetInnerHTML={{ __html: highlightedCode }}
         theme={theme}
         className="code-wrapper-body"
@@ -373,5 +598,5 @@ function Code({ code, language = "javascript", theme, className }: CodeProps) {
   );
 }
 
-export { Code };
+export { Code, CodeTabs };
 `;

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

@@ -1 +1 @@
-export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Learn how to display inline code and code blocks in documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n\n# Code\n\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\n\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\n\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\n\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n````text\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n````\n\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```";
+export declare const codeMdxTemplate = "---\ntitle: \"Code\"\ndescription: \"Learn how to display inline code and code blocks in documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 3\n---\n\n# Code\n\nLearn how to display inline code and code blocks in documentation.\n\n## Adding Code Samples\n\nBoth inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience.\n\n### Inline Code\n\nHighlight code within text by wrapping it with backticks:\n\n```text\nEnclose any `word` or `phrase` in backticks to format it as code.\n```\n\nEnclose any `word` or `phrase` in backticks to format it as code.\n\n## Code Blocks\n\nTo present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and\u2014if assistant features are enabled\u2014users can request explanations.\n\nYou may specify the language for highlighting:\n\n````text\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n````\n\n```java\nclass HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}\n```\n\n## Highlighting Diffs\n\nShow a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red. Set the language to `diff` and prefix each changed line with `+` or `-`:\n\n````text\n```diff\nfunction calculateTotal(items) {\n-  return items.reduce((sum, item) => sum + item.price, 0);\n+  const total = items.reduce((sum, item) => sum + item.price, 0);\n+  return Math.round(total * 100) / 100;\n}\n```\n````\n\n```diff\nfunction calculateTotal(items) {\n-  return items.reduce((sum, item) => sum + item.price, 0);\n+  const total = items.reduce((sum, item) => sum + item.price, 0);\n+  return Math.round(total * 100) / 100;\n}\n```\n\n## File Names\n\nAdd a `title` to a code block to display a file name in the window bar, styled to match the GitHub-style header. Pass it through the `<Code />` component:\n\n```text\n<Code title=\"package.json\" language=\"json\" code={`{\\n  \"name\": \"my-app\",\\n  \"version\": \"1.0.0\"\\n}`} />\n```\n\n<Code title=\"package.json\" language=\"json\" code={`{\\n  \"name\": \"my-app\",\\n  \"version\": \"1.0.0\"\\n}`} />\n\n## Tabbed Code Blocks\n\nUse `<CodeTabs />` to show several variants of the same snippet - for example the same install command across package managers. Each tab is a keyboard-accessible button, and the copy button copies whichever tab is active. Each tab may set a `language` for highlighting (defaults to `bash`).\n\n```text\n<CodeTabs tabs={[{ label: \"npm\", code: \"npm install doccupine\" }, { label: \"pnpm\", code: \"pnpm add doccupine\" }, { label: \"yarn\", code: \"yarn add doccupine\" }]} />\n```\n\n<CodeTabs tabs={[{ label: \"npm\", code: \"npm install doccupine\" }, { label: \"pnpm\", code: \"pnpm add doccupine\" }, { label: \"yarn\", code: \"yarn add doccupine\" }]} />";

package/dist/templates/mdx/code.mdx.js

@@ -47,4 +47,46 @@ class HelloWorld {
         System.out.println("Hello, World!");
     }
 }
-\`\`\``;
+\`\`\`
+
+## Highlighting Diffs
+
+Show a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red. Set the language to \`diff\` and prefix each changed line with \`+\` or \`-\`:
+
+\`\`\`\`text
+\`\`\`diff
+function calculateTotal(items) {
+-  return items.reduce((sum, item) => sum + item.price, 0);
++  const total = items.reduce((sum, item) => sum + item.price, 0);
++  return Math.round(total * 100) / 100;
+}
+\`\`\`
+\`\`\`\`
+
+\`\`\`diff
+function calculateTotal(items) {
+-  return items.reduce((sum, item) => sum + item.price, 0);
++  const total = items.reduce((sum, item) => sum + item.price, 0);
++  return Math.round(total * 100) / 100;
+}
+\`\`\`
+
+## File Names
+
+Add a \`title\` to a code block to display a file name in the window bar, styled to match the GitHub-style header. Pass it through the \`<Code />\` component:
+
+\`\`\`text
+<Code title="package.json" language="json" code={\`{\\n  "name": "my-app",\\n  "version": "1.0.0"\\n}\`} />
+\`\`\`
+
+<Code title="package.json" language="json" code={\`{\\n  "name": "my-app",\\n  "version": "1.0.0"\\n}\`} />
+
+## Tabbed Code Blocks
+
+Use \`<CodeTabs />\` to show several variants of the same snippet - for example the same install command across package managers. Each tab is a keyboard-accessible button, and the copy button copies whichever tab is active. Each tab may set a \`language\` for highlighting (defaults to \`bash\`).
+
+\`\`\`text
+<CodeTabs tabs={[{ label: "npm", code: "npm install doccupine" }, { label: "pnpm", code: "pnpm add doccupine" }, { label: "yarn", code: "yarn add doccupine" }]} />
+\`\`\`
+
+<CodeTabs tabs={[{ label: "npm", code: "npm install doccupine" }, { label: "pnpm", code: "pnpm add doccupine" }, { label: "yarn", code: "yarn add doccupine" }]} />`;

package/dist/templates/package.js

@@ -17,7 +17,7 @@ export const packageJsonTemplate = JSON.stringify({
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@posthog/react": "^1.10.3",
-        "cherry-styled-components": "^0.2.7",
+        "cherry-styled-components": "^0.2.8",
         langchain: "^1.5.2",
         "lucide-react": "^1.23.0",
         minisearch: "^7.2.0",
@@ -39,7 +39,7 @@ export const packageJsonTemplate = JSON.stringify({
         "@types/node": "^26",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "baseline-browser-mapping": "^2.10.41",
+        "baseline-browser-mapping": "^2.10.42",
         eslint: "^9",
         "eslint-config-next": "16.2.10",
         prettier: "^3.9.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {

package/dist/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/index.test.js

@@ -1,48 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { generateSlug, escapeTemplateContent } from "./index.js";
-describe("generateSlug", () => {
-    it("returns empty string for index.mdx", () => {
-        expect(generateSlug("index.mdx")).toBe("");
-        expect(generateSlug("./index.mdx")).toBe("");
-    });
-    it("strips .mdx extension", () => {
-        expect(generateSlug("getting-started.mdx")).toBe("getting-started");
-    });
-    it("lowercases the slug", () => {
-        expect(generateSlug("MyPage.mdx")).toBe("mypage");
-    });
-    it("replaces special characters with hyphens", () => {
-        expect(generateSlug("hello world.mdx")).toBe("hello-world");
-    });
-    it("preserves forward slashes for nested paths", () => {
-        expect(generateSlug("guides/setup.mdx")).toBe("guides/setup");
-    });
-    it("converts backslashes to forward slashes", () => {
-        expect(generateSlug("guides\\setup.mdx")).toBe("guides/setup");
-    });
-    it("preserves underscores and hyphens", () => {
-        expect(generateSlug("my_page-name.mdx")).toBe("my_page-name");
-    });
-});
-describe("escapeTemplateContent", () => {
-    it("escapes backticks", () => {
-        expect(escapeTemplateContent("hello `world`")).toBe("hello \\`world\\`");
-    });
-    it("escapes template literal expressions", () => {
-        expect(escapeTemplateContent("${variable}")).toBe("\\${variable}");
-    });
-    it("escapes backslashes", () => {
-        expect(escapeTemplateContent("path\\to\\file")).toBe("path\\\\to\\\\file");
-    });
-    it("escapes all dangerous characters together", () => {
-        const input = "Use `${process.env.SECRET}` here";
-        const result = escapeTemplateContent(input);
-        expect(result).toBe("Use \\`\\${process.env.SECRET}\\` here");
-    });
-    it("handles content with no special characters", () => {
-        expect(escapeTemplateContent("plain text")).toBe("plain text");
-    });
-    it("handles empty string", () => {
-        expect(escapeTemplateContent("")).toBe("");
-    });
-});

package/dist/metadata.d.ts

@@ -1,11 +0,0 @@
-export interface MetadataOptions {
-    title?: string;
-    titleFallback: string;
-    name?: string;
-    titleOrder: "page-first" | "name-first";
-    description?: string;
-    icon?: string;
-    image?: string;
-}
-export declare function generateMetadataBlock(opts: MetadataOptions): string;
-export declare function generateRuntimeOnlyMetadataBlock(): string;

package/dist/metadata.js

@@ -1,52 +0,0 @@
-import { DEFAULT_FAVICON, DEFAULT_META_DESCRIPTION, DEFAULT_OG_IMAGE, DEFAULT_SITE_NAME, } from "./templates/constants.js";
-function buildFieldExpression(staticValue, configKey, defaultValue) {
-    if (staticValue)
-        return staticValue;
-    return `\${config.${configKey} || "${defaultValue}"}`;
-}
-function buildTitleExpression(opts) {
-    const title = opts.title || opts.titleFallback;
-    if (opts.titleOrder === "page-first") {
-        const suffix = opts.name
-            ? `- ${opts.name}`
-            : `\${config.name ? "- " + config.name : "- ${DEFAULT_SITE_NAME}"}`;
-        return `${title} ${suffix}`;
-    }
-    // name-first
-    const prefix = opts.name
-        ? `${opts.name} -`
-        : `\${config.name ? config.name + " -" : "${DEFAULT_SITE_NAME} -"}`;
-    return `${prefix} ${title}`;
-}
-export function generateMetadataBlock(opts) {
-    const title = buildTitleExpression(opts);
-    const desc = buildFieldExpression(opts.description, "description", DEFAULT_META_DESCRIPTION);
-    const icon = buildFieldExpression(opts.icon, "icon", DEFAULT_FAVICON);
-    const image = buildFieldExpression(opts.image, "image", DEFAULT_OG_IMAGE);
-    return `export const metadata: Metadata = {
-  title: \`${title}\`,
-  description: \`${desc}\`,
-  icons: \`${icon}\`,
-  openGraph: {
-    title: \`${title}\`,
-    description: \`${desc}\`,
-    images: \`${image}\`,
-  },
-};`;
-}
-export function generateRuntimeOnlyMetadataBlock() {
-    const title = `\${config.name || "${DEFAULT_SITE_NAME}"}`;
-    const desc = `\${config.description || "${DEFAULT_META_DESCRIPTION}"}`;
-    const icon = `\${config.icon || "${DEFAULT_FAVICON}"}`;
-    const image = `\${config.image || "${DEFAULT_OG_IMAGE}"}`;
-    return `export const metadata: Metadata = {
-  title: \`${title}\`,
-  description: \`${desc}\`,
-  icons: \`${icon}\`,
-  openGraph: {
-    title: \`${title}\`,
-    description: \`${desc}\`,
-    images: \`${image}\`,
-  },
-};`;
-}

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

@@ -1 +0,0 @@
-export declare const accordionMdxTemplate = "---\ntitle: \"Accordion\"\ndescription: \"Doccupine CLI commands\"\ndate: \"2025-01-15\"\ncategory: \"Components\"\ncategoryOrder: 1\norder: 4\n---\n# Accordion\nInteractive panels for toggling visibility of content.\n\nAccordion elements help organize information by letting users show or hide sections as needed. They\u2019re an effective way to manage progressive disclosure and simplify navigation through dense or optional content.\n\n## Accordion Usage\nYou can use the Accordion component directly within your MDX files without any import. The following example shows a basic usage:\n\n~~~mdx\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n   ```java HelloWorld.java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n  ```\n</Accordion>\n~~~\n\n<Accordion title=\"What is MDX?\">\n    You can put any content in here, including other components, like code:\n\n   ```java HelloWorld.java\n    class HelloWorld {\n        public static void main(String[] args) {\n            System.out.println(\"Hello, World!\");\n        }\n    }\n  ```\n</Accordion>";