{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-shiki-highlighter",
  "type": "registry:component",
  "title": "Shiki Highlighter",
  "description": "The props-driven Shiki code block: streaming-aware highlighting, no runtime required.",
  "dependencies": [
    "react-shiki"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/shiki-highlighter.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/shiki-highlighter.tsx",
      "content": "\"use client\";\n\nimport type { FC } from \"react\";\nimport { useShikiHighlighter, type ShikiHighlighterProps } from \"react-shiki\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Props for the SyntaxHighlighter component\n */\nexport type SyntaxHighlighterProps = Omit<\n  ShikiHighlighterProps,\n  \"children\" | \"theme\"\n> & {\n  theme?: ShikiHighlighterProps[\"theme\"];\n  code: string;\n  /** Skips tokenization and renders the plain code while `true`. */\n  streaming?: boolean;\n};\n\nconst containerClassName =\n  \"aui-shiki-base [&_pre]:border-border/50 [&_pre]:bg-muted/30! [&_.line]:px-0! [&_pre]:overflow-x-auto [&_pre]:rounded-t-none [&_pre]:rounded-b-xl [&_pre]:border [&_pre]:border-t-0 [&_pre]:p-3.5 [&_pre]:text-[13px] [&_pre]:leading-relaxed\";\n\nconst PlainCode: FC<{ code: string }> = ({ code }) => (\n  <pre>\n    <code>{code}</code>\n  </pre>\n);\n\nconst HighlightedCode: FC<{\n  code: string;\n  language: SyntaxHighlighterProps[\"language\"];\n  theme: NonNullable<SyntaxHighlighterProps[\"theme\"]>;\n  options: Omit<ShikiHighlighterProps, \"children\" | \"language\" | \"theme\">;\n}> = ({ code, language, theme, options }) => {\n  const highlighted = useShikiHighlighter(code, language, theme, {\n    ...options,\n    defaultColor: \"light-dark()\",\n  });\n  return <>{highlighted ?? <PlainCode code={code} />}</>;\n};\n\n/**\n * SyntaxHighlighter component, using react-shiki\n *\n * Skips tokenization while `streaming` and renders the plain code in the\n * same container, so streaming costs no Shiki work and settling is a color\n * change rather than a layout shift.\n */\nexport const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({\n  code,\n  language,\n  theme = { dark: \"github-dark-default\", light: \"github-light-default\" },\n  className,\n  style,\n  // Inert: useShikiHighlighter output has no default styles or language label.\n  addDefaultStyles: _addDefaultStyles,\n  showLanguage: _showLanguage,\n  delay = 150, // the part settles before smooth streaming finishes draining, so code keeps changing for a few frames\n  streaming = false,\n  ...options\n}) => {\n  const trimmed = code.trim();\n\n  return (\n    <div\n      className={cn(\n        containerClassName,\n        streaming && \"aui-shiki-streaming\",\n        className,\n      )}\n      style={style}\n    >\n      {streaming ? (\n        <PlainCode code={trimmed} />\n      ) : (\n        <HighlightedCode\n          code={trimmed}\n          language={language}\n          theme={theme}\n          options={{ ...options, delay }}\n        />\n      )}\n    </div>\n  );\n};\n\nSyntaxHighlighter.displayName = \"SyntaxHighlighter\";\n"
    }
  ]
}