{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block",
  "dependencies": [
    "lucide-react",
    "prism-react-renderer",
    "prismjs"
  ],
  "registryDependencies": [
    "tabs",
    "@delta/code-block-icons",
    "@delta/copy-button"
  ],
  "files": [
    {
      "path": "components/ui/code-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useState } from \"react\"\nimport { TerminalIcon } from \"lucide-react\"\nimport { Highlight } from \"prism-react-renderer\"\nimport type { PrismTheme } from \"prism-react-renderer\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getIconForFile } from \"@/components/ui/code-block-icons\"\nimport { CopyButton } from \"@/components/ui/copy-button\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\n\ntype PackageManager = \"npm\" | \"yarn\" | \"pnpm\" | \"bun\"\n\nconst defaultTheme: PrismTheme = {\n  plain: {\n    color: \"#FFFFFF\",\n    backgroundColor: \"#161616\",\n  },\n  styles: [\n    {\n      types: [\"comment\"],\n      style: {\n        color: \"#757575\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"keyword\", \"property\", \"property-access\", \"attr-name\"],\n      style: {\n        color: \"#77b7d7\",\n      },\n    },\n    {\n      types: [\"tag\"],\n      style: {\n        color: \"#dfab5c\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"symbol\", \"dom\"],\n      style: {\n        color: \"#ffffff\",\n      },\n    },\n    {\n      types: [\"definition\", \"function\"],\n      style: {\n        color: \"#86d9ca\",\n      },\n    },\n    {\n      types: [\"string\", \"char\", \"attr-value\"],\n      style: {\n        color: \"#977cdc\",\n      },\n    },\n    {\n      types: [\"static\", \"number\"],\n      style: {\n        color: \"#ff6658\",\n      },\n    },\n  ],\n}\n\nconst lightTheme: PrismTheme = {\n  plain: {\n    color: \"#24292e\",\n    backgroundColor: \"#ffffff\",\n  },\n  styles: [\n    {\n      types: [\"comment\"],\n      style: {\n        color: \"#8b949e\",\n        fontStyle: \"italic\",\n      },\n    },\n    {\n      types: [\"variable\", \"parameter\"],\n      style: {\n        color: \"#e36209\",\n      },\n    },\n    {\n      types: [\"keyword\", \"builtin\", \"function-definition\"],\n      style: {\n        color: \"#d73a49\",\n      },\n    },\n    {\n      types: [\"property\", \"property-access\", \"attr-name\"],\n      style: {\n        color: \"#005cc5\",\n      },\n    },\n    {\n      types: [\"tag\"],\n      style: {\n        color: \"#22863a\",\n      },\n    },\n    {\n      types: [\"punctuation\", \"symbol\", \"dom\", \"operator\"],\n      style: {\n        color: \"#24292e\",\n      },\n    },\n    {\n      types: [\"function\"],\n      style: {\n        color: \"#6f42c1\",\n      },\n    },\n    {\n      types: [\"class-name\"],\n      style: {\n        color: \"#6f42c1\",\n      },\n    },\n    {\n      types: [\"string\", \"char\", \"attr-value\"],\n      style: {\n        color: \"#032f62\",\n      },\n    },\n    {\n      types: [\"static\", \"number\"],\n      style: {\n        color: \"#005cc5\",\n      },\n    },\n  ],\n}\n\ninterface CodeBlockProps {\n  npm?: string\n  yarn?: string\n  pnpm?: string\n  bun?: string\n  defaultPackageManager?: PackageManager\n  code?: string\n  css?: string\n  language?: string\n  defaultLanguage?: string\n  filename?: string\n  showLineNumbers?: boolean\n  theme?: PrismTheme\n  adaptiveTheme?: {\n    light: PrismTheme\n    dark: PrismTheme\n  }\n  useThemeBackground?: boolean\n  className?: string\n  textClassName?: string\n  scrollbar?: boolean\n  expandable?: boolean\n  defaultExpanded?: boolean\n  collapsedHeight?: string\n}\n\nconst monoFontFamily =\n  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace'\n\nfunction parseMarkdownCodeBlock(input: string): {\n  code: string\n  language: string | null\n} {\n  const markdownRegex = /^```(\\w+)?\\n?([\\s\\S]*?)```$/\n  const match = input.trim().match(markdownRegex)\n\n  if (match) {\n    return {\n      language: match[1] || null,\n      code: match[2]?.trim() || \"\",\n    }\n  }\n\n  return { code: input, language: null }\n}\n\nconst languageAliases: Record<string, string> = {\n  py: \"python\",\n  js: \"javascript\",\n  ts: \"typescript\",\n  tsx: \"tsx\",\n  jsx: \"jsx\",\n  rb: \"ruby\",\n  rs: \"rust\",\n  sh: \"bash\",\n  shell: \"bash\",\n  yml: \"yaml\",\n  md: \"markdown\",\n}\n\nconst packageManagerCommands: Record<string, PackageManager> = {\n  npx: \"npm\",\n  npm: \"npm\",\n  yarn: \"yarn\",\n  pnpm: \"pnpm\",\n  bunx: \"bun\",\n  bun: \"bun\",\n}\n\nfunction resolveLanguage(lang: string): string {\n  return languageAliases[lang.toLowerCase()] || lang.toLowerCase()\n}\n\nfunction detectPackageManagerFromMarkdown(input: string): {\n  isPackageManager: boolean\n  command: string\n  manager: PackageManager\n} | null {\n  const parsed = parseMarkdownCodeBlock(input)\n  if (!parsed.language) return null\n\n  const lang = parsed.language.toLowerCase()\n  const manager = packageManagerCommands[lang]\n\n  if (manager) {\n    return {\n      isPackageManager: true,\n      command: parsed.code,\n      manager,\n    }\n  }\n\n  return null\n}\n\nfunction convertNpxToPackageManagers(npxCommand: string): {\n  npm: string\n  yarn: string\n  pnpm: string\n  bun: string\n} {\n  // Handle patterns like \"npx shadcn@latest add button\" or just \"shadcn@latest add button\"\n  let command = npxCommand.trim()\n\n  // Remove leading \"npx \" if present\n  if (command.startsWith(\"npx \")) {\n    command = command.slice(4)\n  }\n\n  return {\n    npm: `npx ${command}`,\n    yarn: `yarn dlx ${command}`,\n    pnpm: `pnpm dlx ${command}`,\n    bun: `bunx ${command}`,\n  }\n}\n\nexport function CodeBlock({\n  npm,\n  yarn,\n  pnpm,\n  bun,\n  defaultPackageManager = \"npm\",\n  code,\n  css,\n  language = \"typescript\",\n  defaultLanguage,\n  filename,\n  showLineNumbers = true,\n  theme,\n  adaptiveTheme,\n  useThemeBackground = false,\n  className,\n  textClassName = \"text-[14px]\",\n  scrollbar = true,\n  expandable = false,\n  defaultExpanded = false,\n  collapsedHeight = \"12rem\",\n}: CodeBlockProps) {\n  const [packageManager, setPackageManager] = React.useState<PackageManager>(\n    defaultPackageManager\n  )\n  const [isDark, setIsDark] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded)\n\n  useEffect(() => {\n    const checkDarkMode = () => {\n      setIsDark(document.documentElement.classList.contains(\"dark\"))\n    }\n\n    checkDarkMode()\n\n    const observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"class\"\n        ) {\n          checkDarkMode()\n        }\n      })\n    })\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    })\n\n    return () => observer.disconnect()\n  }, [])\n\n  const commands = React.useMemo(() => {\n    return {\n      npm,\n      yarn,\n      pnpm,\n      bun,\n    }\n  }, [npm, yarn, pnpm, bun])\n\n  const availableCommands = Object.entries(commands).filter(\n    ([, command]) => command\n  )\n\n  const selectedTheme = adaptiveTheme\n    ? isDark\n      ? adaptiveTheme.dark\n      : adaptiveTheme.light\n    : theme || (isDark ? defaultTheme : lightTheme)\n\n  const packageManagerFromMarkdown = code\n    ? detectPackageManagerFromMarkdown(code)\n    : null\n\n  const parsedMarkdown = code ? parseMarkdownCodeBlock(code) : null\n  const actualCode = css || (parsedMarkdown?.code ?? code)\n  const actualLanguage = css\n    ? \"css\"\n    : parsedMarkdown?.language\n      ? resolveLanguage(parsedMarkdown.language)\n      : defaultLanguage || language\n\n  const codeBlockBgColor = useThemeBackground\n    ? selectedTheme.plain?.backgroundColor\n    : \"var(--color-surface)\"\n\n  if (packageManagerFromMarkdown) {\n    const { command, manager } = packageManagerFromMarkdown\n    const allCommands = convertNpxToPackageManagers(command)\n\n    return (\n      <div\n        className={cn(\n          \"bg-card text-card-foreground overflow-hidden rounded-lg border\",\n          className\n        )}\n        data-slot=\"tabs\"\n      >\n        <Tabs\n          value={packageManager}\n          className=\"gap-0\"\n          onValueChange={(value) => setPackageManager(value as PackageManager)}\n          defaultValue={manager}\n        >\n          <div\n            className={cn(\n              \"flex items-center justify-between border-b px-3 py-2\",\n              !useThemeBackground && \"bg-surface\"\n            )}\n            style={\n              useThemeBackground\n                ? {\n                    backgroundColor: selectedTheme.plain?.backgroundColor,\n                    color: selectedTheme.plain?.color,\n                  }\n                : undefined\n            }\n          >\n            <div className=\"flex items-center gap-2.5\">\n              <TerminalIcon\n                className=\"text-muted-foreground size-4\"\n                style={\n                  useThemeBackground\n                    ? { color: selectedTheme.plain?.color, opacity: 0.7 }\n                    : undefined\n                }\n              />\n              <TabsList className=\"h-auto rounded-none bg-transparent p-0\">\n                {([\"npm\", \"yarn\", \"pnpm\", \"bun\"] as PackageManager[]).map(\n                  (key) => (\n                    <TabsTrigger\n                      key={key}\n                      value={key}\n                      className={cn(\n                        \"text-muted-foreground data-[state=active]:text-foreground h-7 rounded-md px-2.5 font-medium transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n                        textClassName\n                      )}\n                      style={{\n                        fontFamily: monoFontFamily,\n                        ...(useThemeBackground\n                          ? {\n                              color: selectedTheme.plain?.color,\n                              opacity: 0.7,\n                            }\n                          : {}),\n                      }}\n                    >\n                      {key}\n                    </TabsTrigger>\n                  )\n                )}\n              </TabsList>\n            </div>\n            <CopyButton\n              value={allCommands[packageManager] || allCommands[manager]}\n              className={cn(\n                \"size-7\",\n                useThemeBackground &&\n                  \"hover:bg-transparent active:bg-transparent\"\n              )}\n              variant=\"secondary\"\n              iconColor={\n                useThemeBackground ? selectedTheme.plain?.color : undefined\n              }\n            />\n          </div>\n          <div className={cn(\"overflow-x-auto\", !scrollbar && \"no-scrollbar\")}>\n            {([\"npm\", \"yarn\", \"pnpm\", \"bun\"] as PackageManager[]).map((key) => (\n              <TabsContent key={key} value={key} className=\"mt-0\">\n                <div\n                  className={cn(\n                    \"relative py-4\",\n                    !useThemeBackground && \"bg-surface\"\n                  )}\n                  style={\n                    useThemeBackground\n                      ? {\n                          backgroundColor: selectedTheme.plain?.backgroundColor,\n                        }\n                      : undefined\n                  }\n                >\n                  <Highlight\n                    theme={selectedTheme}\n                    code={allCommands[key]}\n                    language=\"bash\"\n                  >\n                    {({\n                      className: highlightClassName,\n                      style,\n                      tokens,\n                      getLineProps,\n                      getTokenProps,\n                    }) => (\n                      <pre\n                        className={cn(\n                          highlightClassName,\n                          \"w-full overflow-x-auto px-4 leading-relaxed font-normal\",\n                          textClassName\n                        )}\n                        style={{\n                          ...style,\n                          fontFamily: monoFontFamily,\n                          backgroundColor: useThemeBackground\n                            ? selectedTheme.plain?.backgroundColor\n                            : \"transparent\",\n                          WebkitFontSmoothing: \"antialiased\",\n                          MozOsxFontSmoothing: \"grayscale\",\n                        }}\n                      >\n                        {tokens.map((line, i) => (\n                          <div key={i} {...getLineProps({ line })}>\n                            {line.map((token, key) => (\n                              <span key={key} {...getTokenProps({ token })} />\n                            ))}\n                          </div>\n                        ))}\n                      </pre>\n                    )}\n                  </Highlight>\n                </div>\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n      </div>\n    )\n  }\n\n  if (availableCommands.length > 0) {\n    return (\n      <div\n        className={cn(\n          \"bg-card text-card-foreground overflow-hidden rounded-lg border\",\n          className\n        )}\n        data-slot=\"tabs\"\n      >\n        <Tabs\n          value={packageManager}\n          className=\"gap-0\"\n          onValueChange={(value) => setPackageManager(value as PackageManager)}\n        >\n          <div\n            className={cn(\n              \"flex items-center justify-between border-b px-3 py-2\",\n              !useThemeBackground && \"bg-surface\"\n            )}\n            style={\n              useThemeBackground\n                ? {\n                    backgroundColor: selectedTheme.plain?.backgroundColor,\n                    color: selectedTheme.plain?.color,\n                  }\n                : undefined\n            }\n          >\n            <div className=\"flex items-center gap-2.5\">\n              <TerminalIcon\n                className=\"text-muted-foreground size-4\"\n                style={\n                  useThemeBackground\n                    ? { color: selectedTheme.plain?.color, opacity: 0.7 }\n                    : undefined\n                }\n              />\n              <TabsList className=\"h-auto rounded-none bg-transparent p-0\">\n                {availableCommands.map(([key]) => (\n                  <TabsTrigger\n                    key={key}\n                    value={key}\n                    className={cn(\n                      \"text-muted-foreground data-[state=active]:text-foreground h-7 rounded-md px-2.5 font-medium transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n                      textClassName\n                    )}\n                    style={{\n                      fontFamily: monoFontFamily,\n                      ...(useThemeBackground\n                        ? {\n                            color: selectedTheme.plain?.color,\n                            opacity: 0.7,\n                          }\n                        : {}),\n                    }}\n                  >\n                    {key}\n                  </TabsTrigger>\n                ))}\n              </TabsList>\n            </div>\n            <CopyButton\n              value={commands[packageManager] || \"\"}\n              className={cn(\n                \"size-7\",\n                useThemeBackground &&\n                  \"hover:bg-transparent active:bg-transparent\"\n              )}\n              variant=\"secondary\"\n              iconColor={\n                useThemeBackground ? selectedTheme.plain?.color : undefined\n              }\n            />\n          </div>\n          <div className={cn(\"overflow-x-auto\", !scrollbar && \"no-scrollbar\")}>\n            {availableCommands.map(([key, command]) => (\n              <TabsContent key={key} value={key} className=\"mt-0\">\n                <div\n                  className={cn(\n                    \"relative py-4\",\n                    !useThemeBackground && \"bg-surface\"\n                  )}\n                  style={\n                    useThemeBackground\n                      ? {\n                          backgroundColor: selectedTheme.plain?.backgroundColor,\n                        }\n                      : undefined\n                  }\n                >\n                  <Highlight\n                    theme={selectedTheme}\n                    code={command || \"\"}\n                    language=\"bash\"\n                  >\n                    {({\n                      className: highlightClassName,\n                      style,\n                      tokens,\n                      getLineProps,\n                      getTokenProps,\n                    }) => (\n                      <pre\n                        className={cn(\n                          highlightClassName,\n                          \"w-full overflow-x-auto px-4 leading-relaxed font-normal\",\n                          textClassName\n                        )}\n                        style={{\n                          ...style,\n                          fontFamily: monoFontFamily,\n                          backgroundColor: useThemeBackground\n                            ? selectedTheme.plain?.backgroundColor\n                            : \"transparent\",\n                          WebkitFontSmoothing: \"antialiased\",\n                          MozOsxFontSmoothing: \"grayscale\",\n                        }}\n                      >\n                        {tokens.map((line, i) => (\n                          <div key={i} {...getLineProps({ line })}>\n                            {line.map((token, key) => (\n                              <span key={key} {...getTokenProps({ token })} />\n                            ))}\n                          </div>\n                        ))}\n                      </pre>\n                    )}\n                  </Highlight>\n                </div>\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n      </div>\n    )\n  }\n\n  if (actualCode) {\n    // Helper to check if className contains specific Tailwind class prefixes\n    const hasClassPrefix = (prefix: string) => {\n      return className?.split(\" \").some((c) => c.startsWith(prefix)) ?? false\n    }\n\n    // Extract text size classes from className to override textClassName\n    const hasTextSizeClass = hasClassPrefix(\"text-\")\n    const effectiveTextClassName = hasTextSizeClass\n      ? className\n          ?.split(\" \")\n          .filter((c) => c.startsWith(\"text-\"))\n          .join(\" \") || textClassName\n      : textClassName\n\n    // Apply default border/rounded classes only if not overridden in className\n    const hasBorderClass = hasClassPrefix(\"border\")\n    const hasRoundedClass = hasClassPrefix(\"rounded\")\n\n    const codeBlockContent = (\n      <div\n        className={cn(\n          \"pointer-events-auto w-full max-w-full overflow-hidden\",\n          !hasBorderClass && \"border-border border\",\n          !hasRoundedClass && \"rounded-lg\",\n          className\n        )}\n        style={{ \"--code-block-bg\": codeBlockBgColor } as React.CSSProperties}\n      >\n        {filename && (\n          <figcaption\n            className={cn(\n              \"flex items-center justify-between border-b px-4 py-2.5 [&_svg]:size-4\",\n              !useThemeBackground && \"bg-surface\"\n            )}\n            style={{\n              fontFamily: monoFontFamily,\n              ...(useThemeBackground\n                ? {\n                    backgroundColor: selectedTheme.plain?.backgroundColor,\n                    color: selectedTheme.plain?.color,\n                  }\n                : {}),\n            }}\n          >\n            <div\n              className={cn(\n                \"text-foreground/75 flex items-center gap-2\",\n                effectiveTextClassName\n              )}\n            >\n              {getIconForFile(filename)}\n              <span className=\"font-medium tracking-tight\">{filename}</span>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {expandable && (\n                <>\n                  <CollapsibleTrigger asChild>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className={cn(\n                        \"text-muted-foreground hover:text-foreground h-auto p-0 font-medium tracking-tight hover:bg-transparent\",\n                        effectiveTextClassName\n                      )}\n                      style={{ fontFamily: monoFontFamily }}\n                    >\n                      {isExpanded ? \"Collapse\" : \"Expand\"}\n                    </Button>\n                  </CollapsibleTrigger>\n                  <span className=\"text-muted-foreground/50\">|</span>\n                </>\n              )}\n              <CopyButton\n                value={actualCode}\n                className={cn(\n                  useThemeBackground &&\n                    \"hover:bg-transparent active:bg-transparent\"\n                )}\n                iconColor={\n                  useThemeBackground ? selectedTheme.plain?.color : undefined\n                }\n              />\n            </div>\n          </figcaption>\n        )}\n\n        <div className=\"relative\">\n          {!filename && (\n            <div className=\"pointer-events-none absolute inset-x-0 top-0 z-10 flex justify-end\">\n              <div className=\"pointer-events-auto flex items-center gap-2 p-3\">\n                {expandable && (\n                  <>\n                    <CollapsibleTrigger asChild>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        className={cn(\n                          \"text-muted-foreground hover:text-foreground h-auto p-0 font-semibold tracking-tight hover:bg-transparent\",\n                          effectiveTextClassName\n                        )}\n                        style={{ fontFamily: monoFontFamily }}\n                      >\n                        {isExpanded ? \"Collapse\" : \"Expand\"}\n                      </Button>\n                    </CollapsibleTrigger>\n                    <span className=\"text-muted-foreground/50\">|</span>\n                  </>\n                )}\n                <CopyButton\n                  value={actualCode}\n                  className={cn(\n                    useThemeBackground &&\n                      \"hover:bg-transparent active:bg-transparent\"\n                  )}\n                  iconColor={\n                    useThemeBackground ? selectedTheme.plain?.color : undefined\n                  }\n                />\n              </div>\n            </div>\n          )}\n\n          {expandable ? (\n            <CollapsibleContent\n              forceMount\n              className={cn(\n                \"relative w-full transition-all\",\n                isExpanded ? \"overflow-auto\" : \"overflow-hidden\",\n                !scrollbar && \"no-scrollbar\"\n              )}\n              style={{\n                backgroundColor: \"var(--code-block-bg)\",\n                maxHeight: isExpanded ? \"none\" : collapsedHeight,\n              }}\n            >\n              <Highlight\n                theme={selectedTheme}\n                code={actualCode.trim()}\n                language={actualLanguage}\n              >\n                {({\n                  className: highlightClassName,\n                  style,\n                  tokens,\n                  getLineProps,\n                  getTokenProps,\n                }) => (\n                  <pre\n                    className={cn(\n                      highlightClassName,\n                      \"relative min-w-0 py-3.5 outline-none\",\n                      \"leading-6 font-normal\",\n                      effectiveTextClassName\n                    )}\n                    style={\n                      {\n                        ...style,\n                        fontFamily: monoFontFamily,\n                        backgroundColor: \"transparent\",\n                        MozOsxFontSmoothing: \"grayscale\",\n                        \"--line-number-color\": selectedTheme.plain?.color\n                          ? `color-mix(in srgb, ${selectedTheme.plain.color} 35%, transparent)`\n                          : \"rgba(128, 128, 128, 0.35)\",\n                      } as React.CSSProperties\n                    }\n                  >\n                    {tokens.map((line, i) => (\n                      <div\n                        key={i}\n                        {...getLineProps({ line })}\n                        className=\"relative flex min-h-[24px]\"\n                      >\n                        {showLineNumbers && (\n                          <span\n                            className={cn(\n                              \"sticky left-0 z-10 w-16 flex-shrink-0 pr-6 pl-6 text-right font-medium tabular-nums select-none\",\n                              effectiveTextClassName\n                            )}\n                            style={{\n                              fontFamily: monoFontFamily,\n                              color: selectedTheme.plain?.color\n                                ? `color-mix(in srgb, ${selectedTheme.plain.color} 35%, transparent)`\n                                : \"rgba(128, 128, 128, 0.35)\",\n                              backgroundColor: \"var(--code-block-bg)\",\n                            }}\n                          >\n                            {i + 1}\n                          </span>\n                        )}\n                        <span\n                          className={cn(\n                            \"flex-1 pr-6 whitespace-pre\",\n                            !showLineNumbers && \"pl-6\"\n                          )}\n                        >\n                          {line.map((token, key) => (\n                            <span key={key} {...getTokenProps({ token })} />\n                          ))}\n                        </span>\n                      </div>\n                    ))}\n                  </pre>\n                )}\n              </Highlight>\n            </CollapsibleContent>\n          ) : (\n            <div\n              className={cn(\n                \"relative max-h-[450px] w-full overflow-auto\",\n                !scrollbar && \"no-scrollbar\"\n              )}\n              style={{ backgroundColor: \"var(--code-block-bg)\" }}\n            >\n              <Highlight\n                theme={selectedTheme}\n                code={actualCode.trim()}\n                language={actualLanguage}\n              >\n                {({\n                  className: highlightClassName,\n                  style,\n                  tokens,\n                  getLineProps,\n                  getTokenProps,\n                }) => (\n                  <pre\n                    className={cn(\n                      highlightClassName,\n                      \"relative min-w-0 py-3.5 outline-none\",\n                      \"leading-6 font-normal\",\n                      effectiveTextClassName\n                    )}\n                    style={\n                      {\n                        ...style,\n                        fontFamily: monoFontFamily,\n                        backgroundColor: \"transparent\",\n                        MozOsxFontSmoothing: \"grayscale\",\n                        \"--line-number-color\": selectedTheme.plain?.color\n                          ? `color-mix(in srgb, ${selectedTheme.plain.color} 35%, transparent)`\n                          : \"rgba(128, 128, 128, 0.35)\",\n                      } as React.CSSProperties\n                    }\n                  >\n                    {tokens.map((line, i) => (\n                      <div\n                        key={i}\n                        {...getLineProps({ line })}\n                        className=\"relative flex min-h-[24px]\"\n                      >\n                        {showLineNumbers && (\n                          <span\n                            className={cn(\n                              \"sticky left-0 z-10 w-16 flex-shrink-0 pr-6 pl-6 text-right font-medium tabular-nums select-none\",\n                              effectiveTextClassName\n                            )}\n                            style={{\n                              fontFamily: monoFontFamily,\n                              color: selectedTheme.plain?.color\n                                ? `color-mix(in srgb, ${selectedTheme.plain.color} 35%, transparent)`\n                                : \"rgba(128, 128, 128, 0.35)\",\n                              backgroundColor: \"var(--code-block-bg)\",\n                            }}\n                          >\n                            {i + 1}\n                          </span>\n                        )}\n                        <span\n                          className={cn(\n                            \"flex-1 pr-6 whitespace-pre\",\n                            !showLineNumbers && \"pl-6\"\n                          )}\n                        >\n                          {line.map((token, key) => (\n                            <span key={key} {...getTokenProps({ token })} />\n                          ))}\n                        </span>\n                      </div>\n                    ))}\n                  </pre>\n                )}\n              </Highlight>\n            </div>\n          )}\n\n          {expandable && !isExpanded && (\n            <CollapsibleTrigger\n              className=\"absolute inset-x-0 bottom-0 z-20 flex h-24 items-end justify-center rounded-b-lg pb-3 text-sm\"\n              style={{\n                background: `linear-gradient(to bottom, transparent 0%, ${useThemeBackground && selectedTheme.plain?.backgroundColor ? selectedTheme.plain.backgroundColor : \"var(--surface)\"} 60%, ${useThemeBackground && selectedTheme.plain?.backgroundColor ? selectedTheme.plain.backgroundColor : \"var(--surface)\"} 100%)`,\n                color: selectedTheme.plain?.color,\n              }}\n            >\n              <span className=\"text-muted-foreground hover:text-foreground text-base font-normal transition-colors\">\n                Expand\n              </span>\n            </CollapsibleTrigger>\n          )}\n        </div>\n      </div>\n    )\n\n    if (expandable) {\n      return (\n        <Collapsible\n          open={isExpanded}\n          onOpenChange={setIsExpanded}\n          className=\"group/collapsible relative\"\n        >\n          {codeBlockContent}\n        </Collapsible>\n      )\n    }\n\n    return codeBlockContent\n  }\n\n  return null\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}