doccupine 0.0.97 → 0.0.99

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/Card.d.ts

@@ -1 +1 @@
-export declare const cardTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst cardStyles = css<{ 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  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  ${cardStyles}\n`;\n\nconst StyledCardLink = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  ${cardStyles}\n  text-decoration: none;\n`;\n\nconst StyledCardTitle = styled.p<{ theme: Theme }>`\n  font-weight: bold;\n  margin: 5px 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n  icon?: IconProps;\n  href?: string;\n}\n\nfunction Card({ children, title, icon, href }: CardProps) {\n  const theme = useTheme() as Theme;\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} color={theme.colors.primary} />}\n      <StyledCardTitle>{title}</StyledCardTitle>\n      {children}\n    </>\n  );\n\n  if (href) {\n    return <StyledCardLink href={href}>{content}</StyledCardLink>;\n  }\n\n  return <StyledCard>{content}</StyledCard>;\n}\n\nexport { Card };\n";
+export declare const cardTemplate = "\"use client\";\nimport Link from \"next/link\";\nimport styled, { css, useTheme } from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\nimport { Icon, IconProps } from \"@/components/layout/Icon\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\n\nconst cardStyles = css<{ 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  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  ${cardStyles}\n`;\n\nconst StyledCardLink = styled(Link)<{ theme: Theme }>`\n  ${interactiveStyles};\n  ${cardStyles}\n  text-decoration: none;\n`;\n\nconst StyledCardTitle = styled.p<{ theme: Theme }>`\n  font-weight: bold;\n  margin: 5px 0;\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledText(theme)};\n`;\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  title: string;\n  icon?: IconProps;\n  href?: string;\n}\n\nfunction Card({ children, title, icon, href }: CardProps) {\n  const theme = useTheme() as Theme;\n\n  const content = (\n    <>\n      {icon && <Icon name={icon} color={theme.colors.primary} />}\n      <StyledCardTitle>{title}</StyledCardTitle>\n      {children}\n    </>\n  );\n\n  if (href) {\n    const isExternal = /^(https?:)?\\/\\//i.test(href);\n    return (\n      <StyledCardLink\n        href={href}\n        target={isExternal ? \"_blank\" : undefined}\n        rel={isExternal ? \"noopener noreferrer\" : undefined}\n      >\n        {content}\n      </StyledCardLink>\n    );\n  }\n\n  return <StyledCard>{content}</StyledCard>;\n}\n\nexport { Card };\n";

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

@@ -52,7 +52,16 @@ function Card({ children, title, icon, href }: CardProps) {
   );
 
   if (href) {
-    return <StyledCardLink href={href}>{content}</StyledCardLink>;
+    const isExternal = /^(https?:)?\\/\\//i.test(href);
+    return (
+      <StyledCardLink
+        href={href}
+        target={isExternal ? "_blank" : undefined}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+      >
+        {content}
+      </StyledCardLink>
+    );
   }
 
   return <StyledCard>{content}</StyledCard>;

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`\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\`
+  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/components/layout/Footer.d.ts

@@ -1 +1 @@
-export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) => theme.colors.accent};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primary};\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by <a href=\"https://doccupine.com\">Doccupine</a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\n            aria-label=\"Doccupine on GitHub\"\n          >\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";
+export declare const footerTemplate = "\"use client\";\nimport { useContext } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Space, styledSmall } from \"cherry-styled-components\";\nimport { ChatContext } from \"@/components/Chat\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { GitHubLogo } from \"@/components/layout/Pictograms\";\nimport linksData from \"@/links.json\";\n\ninterface LinkProps {\n  title: string;\n  url: string;\n  icon?: string;\n}\n\nconst links = linksData as LinkProps[];\n\nconst StyledFooter = styled.footer<{\n  theme: Theme;\n  $isChatOpen?: boolean;\n  $hasLinks?: boolean;\n}>`\n  padding: 0 20px;\n  transition: all 0.3s ease;\n\n  ${({ $hasLinks }) =>\n    $hasLinks &&\n    css`\n      margin-top: 20px;\n    `}\n\n  ${mq(\"lg\")} {\n    margin: 0;\n    padding: 0 300px 0 300px;\n\n    ${({ $isChatOpen }) =>\n      $isChatOpen &&\n      css`\n        padding: 0 440px 0 300px;\n      `}\n  }\n`;\n\nconst StyledFooterInner = styled.div<{ theme: Theme }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  max-width: 640px;\n  margin: 0 auto;\n  padding: 28px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ theme }) => styledSmall(theme)};\n\n  ${mq(\"lg\")} {\n    padding: 20px 0;\n  }\n\n  & a {\n    font-weight: 700;\n    color: ${({ theme }) => theme.colors.accent};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    display: inline-flex;\n\n    &:hover {\n      color: ${({ theme }) => theme.colors.primary};\n    }\n\n    & svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n`;\n\nconst StyledFooterFlex = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 20px;\n\n  ${mq(\"lg\")} {\n    justify-content: space-between;\n  }\n`;\n\nfunction Footer({ hideBranding }: { hideBranding?: boolean }) {\n  const { isOpen } = useContext(ChatContext);\n\n  if (hideBranding) return <Space $xs={80} $lg=\"none\" />;\n\n  return (\n    <StyledFooter $isChatOpen={isOpen} $hasLinks={links.length > 0}>\n      <StyledFooterInner>\n        <StyledFooterFlex>\n          <span>\n            Powered by{\" \"}\n            <a\n              href=\"https://doccupine.com\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Doccupine\n            </a>\n          </span>\n          <a\n            href=\"https://github.com/doccupine/cli\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            aria-label=\"Doccupine on GitHub\"\n          >\n            <GitHubLogo />\n          </a>\n        </StyledFooterFlex>\n      </StyledFooterInner>\n    </StyledFooter>\n  );\n}\n\nexport { Footer };\n";

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

@@ -93,11 +93,19 @@ function Footer({ hideBranding }: { hideBranding?: boolean }) {
       <StyledFooterInner>
         <StyledFooterFlex>
           <span>
-            Powered by <a href="https://doccupine.com">Doccupine</a>
+            Powered by{" "}
+            <a
+              href="https://doccupine.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Doccupine
+            </a>
           </span>
           <a
             href="https://github.com/doccupine/cli"
             target="_blank"
+            rel="noopener noreferrer"
             aria-label="Doccupine on GitHub"
           >
             <GitHubLogo />

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

@@ -1 +1 @@
-export declare const siteGateComponentTemplate = "\"use client\";\nimport { useState, type FormEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Input, ThemeToggle } from \"cherry-styled-components\";\nimport { Lock } from \"lucide-react\";\nimport { Theme } from \"@/app/theme\";\nimport { Button } from \"@/components/layout/Button\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { config } from \"@/utils/config\";\n\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  min-height: 100dvh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  background: ${({ theme }) => theme.colors.light};\n`;\n\nconst StyledInner = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  max-width: 380px;\n`;\n\nconst StyledFooter = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n`;\n\nconst StyledBranding = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 14px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  & a {\n    color: ${({ theme }) => theme.colors.accent};\n    font-weight: 700;\n    text-decoration: none;\n    transition: all 0.3s ease;\n  }\n\n  & a:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 40px 32px;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  text-align: center;\n`;\n\nconst StyledIcon = styled.div<{ theme: Theme }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: ${({ theme }) => theme.colors.accent};\n  background: ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    width: 22px;\n    height: 22px;\n  }\n`;\n\nconst StyledTitle = styled.h1<{ theme: Theme }>`\n  margin: 0;\n  font-size: 22px;\n  color: ${({ theme }) => theme.colors.accent};\n`;\n\nconst StyledLede = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 15px;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledForm = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  width: 100%;\n`;\n\nconst StyledAlert = styled.div`\n  width: 100%;\n  text-align: left;\n`;\n\nexport function SiteGate({ hideBranding }: { hideBranding?: boolean }) {\n  const [password, setPassword] = useState(\"\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"error\">(\"idle\");\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (!password || status === \"loading\") return;\n\n    setStatus(\"loading\");\n    try {\n      const res = await fetch(\"/api/gate\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ password }),\n      });\n      if (res.ok) {\n        window.location.reload();\n        return;\n      }\n      setStatus(\"error\");\n    } catch {\n      setStatus(\"error\");\n    }\n  }\n\n  return (\n    <StyledWrapper>\n      <StyledInner>\n        <StyledCard>\n          <StyledIcon>\n            <Lock />\n          </StyledIcon>\n          <StyledTitle>{config.name || \"Documentation\"}</StyledTitle>\n          <StyledLede>This site is password protected.</StyledLede>\n          <StyledForm onSubmit={handleSubmit} noValidate>\n            <Input\n              type=\"password\"\n              name=\"password\"\n              autoComplete=\"current-password\"\n              placeholder=\"Enter password\"\n              aria-label=\"Password\"\n              autoFocus\n              value={password}\n              $error={status === \"error\"}\n              $fullWidth\n              onChange={(e) => {\n                setPassword(e.target.value);\n                if (status === \"error\") setStatus(\"idle\");\n              }}\n            />\n            <Button\n              type=\"submit\"\n              fullWidth\n              disabled={status === \"loading\" || !password}\n            >\n              {status === \"loading\" ? \"Unlocking...\" : \"Enter\"}\n            </Button>\n          </StyledForm>\n          {status === \"error\" && (\n            <StyledAlert>\n              <Callout type=\"danger\">\n                <p>Incorrect password. Try again.</p>\n              </Callout>\n            </StyledAlert>\n          )}\n        </StyledCard>\n        <StyledFooter>\n          <ThemeToggle />\n          {!hideBranding && (\n            <StyledBranding>\n              Powered by <a href=\"https://doccupine.com\">Doccupine</a>\n            </StyledBranding>\n          )}\n        </StyledFooter>\n      </StyledInner>\n    </StyledWrapper>\n  );\n}\n";
+export declare const siteGateComponentTemplate = "\"use client\";\nimport { useState, type FormEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Input, ThemeToggle } from \"cherry-styled-components\";\nimport { Lock } from \"lucide-react\";\nimport { Theme } from \"@/app/theme\";\nimport { Button } from \"@/components/layout/Button\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { config } from \"@/utils/config\";\n\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  min-height: 100dvh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  background: ${({ theme }) => theme.colors.light};\n`;\n\nconst StyledInner = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  max-width: 380px;\n`;\n\nconst StyledFooter = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n`;\n\nconst StyledBranding = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 14px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  & a {\n    color: ${({ theme }) => theme.colors.accent};\n    font-weight: 700;\n    text-decoration: none;\n    transition: all 0.3s ease;\n  }\n\n  & a:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 40px 32px;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  text-align: center;\n`;\n\nconst StyledIcon = styled.div<{ theme: Theme }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: ${({ theme }) => theme.colors.accent};\n  background: ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    width: 22px;\n    height: 22px;\n  }\n`;\n\nconst StyledTitle = styled.h1<{ theme: Theme }>`\n  margin: 0;\n  font-size: 22px;\n  color: ${({ theme }) => theme.colors.accent};\n`;\n\nconst StyledLede = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 15px;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledForm = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  width: 100%;\n`;\n\nconst StyledAlert = styled.div`\n  width: 100%;\n  text-align: left;\n`;\n\nexport function SiteGate({ hideBranding }: { hideBranding?: boolean }) {\n  const [password, setPassword] = useState(\"\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"error\">(\"idle\");\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (!password || status === \"loading\") return;\n\n    setStatus(\"loading\");\n    try {\n      const res = await fetch(\"/api/gate\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ password }),\n      });\n      if (res.ok) {\n        window.location.reload();\n        return;\n      }\n      setStatus(\"error\");\n    } catch {\n      setStatus(\"error\");\n    }\n  }\n\n  return (\n    <StyledWrapper>\n      <StyledInner>\n        <StyledCard>\n          <StyledIcon>\n            <Lock />\n          </StyledIcon>\n          <StyledTitle>{config.name || \"Documentation\"}</StyledTitle>\n          <StyledLede>This site is password protected.</StyledLede>\n          <StyledForm onSubmit={handleSubmit} noValidate>\n            <Input\n              type=\"password\"\n              name=\"password\"\n              autoComplete=\"current-password\"\n              placeholder=\"Enter password\"\n              aria-label=\"Password\"\n              autoFocus\n              value={password}\n              $error={status === \"error\"}\n              $fullWidth\n              onChange={(e) => {\n                setPassword(e.target.value);\n                if (status === \"error\") setStatus(\"idle\");\n              }}\n            />\n            <Button\n              type=\"submit\"\n              fullWidth\n              disabled={status === \"loading\" || !password}\n            >\n              {status === \"loading\" ? \"Unlocking...\" : \"Enter\"}\n            </Button>\n          </StyledForm>\n          {status === \"error\" && (\n            <StyledAlert>\n              <Callout type=\"danger\">\n                <p>Incorrect password. Try again.</p>\n              </Callout>\n            </StyledAlert>\n          )}\n        </StyledCard>\n        <StyledFooter>\n          <ThemeToggle />\n          {!hideBranding && (\n            <StyledBranding>\n              Powered by{\" \"}\n              <a\n                href=\"https://doccupine.com\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                Doccupine\n              </a>\n            </StyledBranding>\n          )}\n        </StyledFooter>\n      </StyledInner>\n    </StyledWrapper>\n  );\n}\n";

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

@@ -174,7 +174,14 @@ export function SiteGate({ hideBranding }: { hideBranding?: boolean }) {
           <ThemeToggle />
           {!hideBranding && (
             <StyledBranding>
-              Powered by <a href="https://doccupine.com">Doccupine</a>
+              Powered by{" "}
+              <a
+                href="https://doccupine.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Doccupine
+              </a>
             </StyledBranding>
           )}
         </StyledFooter>

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.5",
+        "cherry-styled-components": "^0.2.7",
         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.97",
+  "version": "0.0.99",
   "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 {};