{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tutorial-intro-content",
  "type": "registry:component",
  "title": "Tutorial Intro Content",
  "description": "Introduction section for tutorial pages with overview and prerequisites.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/tutorial-intro-content/tutorial-intro-content.tsx",
      "content": "import ReactMarkdown from \"react-markdown\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type TutorialIntroContentProps = {\n  className?: string;\n  content: string;\n  title: string;\n};\n\n// Server-side markdown components (no 'use client')\nconst serverMarkdownComponents = {\n  a: ({\n    children,\n    href,\n    ...props\n  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <a\n      className=\"text-primary underline underline-offset-4 hover:text-primary/80 font-medium\"\n      href={href}\n      {...props}\n    >\n      {children}\n    </a>\n  ),\n  blockquote: ({\n    children,\n    ...props\n  }: React.BlockquoteHTMLAttributes<HTMLQuoteElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <blockquote\n      className=\"border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm\"\n      {...props}\n    >\n      {children}\n    </blockquote>\n  ),\n  code: ({\n    children,\n    className: codeClassName,\n    ...props\n  }: React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }) => {\n    const isBlock = codeClassName?.includes(\"language-\");\n    if (isBlock) {\n      return (\n        <code className={cn(\"font-mono text-sm\", codeClassName)} {...props}>\n          {children}\n        </code>\n      );\n    }\n    return (\n      <code\n        className=\"bg-muted px-1.5 py-0.5 rounded text-sm font-mono\"\n        {...props}\n      >\n        {children}\n      </code>\n    );\n  },\n  h1: ({\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLHeadingElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <h1 className=\"text-2xl font-semibold mt-8 mb-4\" {...props}>\n      {children}\n    </h1>\n  ),\n  h2: ({\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLHeadingElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <h2 className=\"text-xl font-semibold mt-6 mb-3\" {...props}>\n      {children}\n    </h2>\n  ),\n  h3: ({\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLHeadingElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <h3 className=\"text-lg font-semibold mt-4 mb-2\" {...props}>\n      {children}\n    </h3>\n  ),\n  hr: (props: React.HTMLAttributes<HTMLHRElement>) => (\n    <hr className=\"my-8 border-border\" {...props} />\n  ),\n  li: ({\n    children,\n    ...props\n  }: React.LiHTMLAttributes<HTMLLIElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <li\n      className=\"mb-2 leading-relaxed text-muted-foreground text-sm pl-2\"\n      {...props}\n    >\n      {children}\n    </li>\n  ),\n  ol: ({\n    children,\n    ...props\n  }: React.OlHTMLAttributes<HTMLOListElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <ol\n      className=\"list-decimal list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm\"\n      {...props}\n    >\n      {children}\n    </ol>\n  ),\n  p: ({\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLParagraphElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <p\n      className=\"mb-4 leading-relaxed text-muted-foreground text-sm\"\n      {...props}\n    >\n      {children}\n    </p>\n  ),\n  pre: ({\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLPreElement> & { children?: React.ReactNode }) => (\n    <pre\n      className=\"bg-zinc-950 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 border border-zinc-800 shadow-lg font-mono text-sm\"\n      {...props}\n    >\n      {children}\n    </pre>\n  ),\n  strong: ({\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }) => (\n    <strong className=\"font-semibold text-foreground\" {...props}>\n      {children}\n    </strong>\n  ),\n  ul: ({\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLUListElement> & {\n    children?: React.ReactNode;\n  }) => (\n    <ul\n      className=\"list-disc list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm\"\n      {...props}\n    >\n      {children}\n    </ul>\n  ),\n};\n\n// Strip MDX component tags for server rendering (they render on client)\nfunction stripMDXComponents(content: string): string {\n  let cleaned = content.replaceAll(/<[A-Z][A-Za-z]*[^>]*\\/>/g, \"\");\n  cleaned = cleaned.replaceAll(\n    /<[A-Z][A-Za-z]*[^>]*>[\\S\\s]*?<\\/[A-Z][A-Za-z]*>/g,\n    \"\",\n  );\n  return cleaned;\n}\n\nexport function TutorialIntroContent({\n  className,\n  content,\n  title,\n}: TutorialIntroContentProps): React.ReactNode {\n  const markdownContent = stripMDXComponents(content);\n\n  return (\n    <section className={cn(\"py-6\", className)}>\n      <h2 className=\"text-2xl md:text-3xl font-semibold mb-6\">{title}</h2>\n      <div className=\"max-w-none [&_h2:first-of-type]:hidden\">\n        <ReactMarkdown components={serverMarkdownComponents}>\n          {markdownContent}\n        </ReactMarkdown>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}