{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-tree-code-viewer",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/code/tree-code-viewer.tsx",
      "content": "'use client';\nimport { TreeCodeViewer } from '@/components/ui/tree-view-code';\nimport { type TransformedCodeFile, transformCodeFiles } from '@/lib/transform-code-files';\nimport React from 'react';\n\nconst sampleFileData = [\n  {\n    fileName: 'hero-ai-value-proposition.tsx',\n    fileSrc: `'use client'\nimport React, { useRef } from 'react'\nimport {\n  Layout,\n  Monitor,\n  Smartphone,\n  PenTool,\n  MousePointer2,\n} from 'lucide-react'\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\n\nexport const HeroAiValueProposition = () => {\n  const timelineRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <section\n      className=\"relative min-h-screen bg-[#f9f9f9] text-[#111] overflow-hidden flex flex-col\"\n      ref={timelineRef}\n    >\n      {/* Header */}\n      <TimelineAnimation\n        once={true}\n        as=\"header\"\n        animationNum={1}\n        timelineRef={timelineRef}\n        className=\"relative z-10 w-full max-w-7xl mx-auto p-6 flex items-center justify-between border-x border-zinc-200\"\n      >\n        <div className=\"flex items-center gap-2\">\n          <svg\n            className=\"fill-black w-8 h-8\"\n            width=\"97\"\n            height=\"108\"\n            viewBox=\"0 0 97 108\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\n          </svg>\n          <span className=\"text-xl font-bold tracking-tight text-slate-900\">\n            UI-Layout\n          </span>\n        </div>\n\n        <button className=\"bg-white border border-neutral-100 text-neutral-500 px-4 py-2.5 rounded-full font-bold text-sm shadow-sm hover:text-black hover:border-neutral-300 transition-all cursor-pointer\">\n          Sign in\n        </button>\n      </TimelineAnimation>\n\n      {/* Main Hero Content */}\n      <div className=\"relative z-10 px-6\">\n        <article className=\"border-y w-full border-zinc-200\">\n          <div className=\"flex flex-col items-center text-center space-y-4 max-w-7xl mx-auto border-x border-zinc-200 p-8\">\n            <TimelineAnimation\n              once={true}\n              as=\"h1\"\n              animationNum={2}\n              timelineRef={timelineRef}\n              className=\"text-5xl md:text-7xl font-semibold tracking-tight leading-[1.05] text-slate-900 \"\n            >\n              AI-generated project briefs <br className=\"hidden md:block\" />{' '}\n              built for designers\n            </TimelineAnimation>\n            <TimelineAnimation\n              once={true}\n              as=\"p\"\n              animationNum={3}\n              timelineRef={timelineRef}\n              className=\"text-neutral-400 text-lg md:text-xl max-w-4xl font-medium leading-relaxed\"\n            >\n              Turn rough ideas into clear, structured project briefs in seconds.\n              Let AI handle the planning so you can focus on design, creativity,\n              and execution.\n            </TimelineAnimation>\n          </div>\n        </article>\n        <div className=\"border-b border-zinc-200\">\n          <div className=\"max-w-7xl mx-auto border-x border-zinc-200 flex flex-col justify-center gap-5 p-10\">\n            <TimelineAnimation\n              once={true}\n              as=\"button\"\n              animationNum={4}\n              timelineRef={timelineRef}\n              className=\"bg-neutral-900 cursor-pointer text-white px-10 py-4 rounded-full font-bold text-base shadow-2xl hover:bg-black transition-all w-fit mx-auto border-4 border-white/80\"\n            >\n              Get started for free\n            </TimelineAnimation>\n            {/* Designer Proof */}\n            <div className=\"relative z-10 flex flex-col items-center gap-1\">\n              <TimelineAnimation\n                once={true}\n                as=\"p\"\n                animationNum={5}\n                timelineRef={timelineRef}\n                className=\"text-[10px] font-bold text-neutral-400 uppercase tracking-[0.2em]\"\n              >\n                Join 80,000+ designers\n              </TimelineAnimation>\n              <div className=\"flex items-center gap-1\">\n                <TimelineAnimation\n                  once={true}\n                  as=\"div\"\n                  animationNum={7}\n                  timelineRef={timelineRef}\n                  className=\"bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-lg\"\n                >\n                  1,234+\n                </TimelineAnimation>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>`,\n    pathSrc: 'registry/components/hero-ai-value-proposition.tsx',\n  },\n  {\n    fileName: 'timeline-animation.tsx',\n    fileSrc: `import { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\nimport type { Variants } from 'motion/react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <\n  T extends keyof HTMLElementTagNameMap = 'div',\n>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const isInView = useInView(timelineRef, { once });\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={customVariants || defaultSequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};`,\n    pathSrc: 'registry/components/timeline-animation.tsx',\n  },\n  {\n    fileName: 'utils.tsx',\n    fileSrc: `import { ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}`,\n    pathSrc: 'registry/components/utils.tsx',\n  },\n];\n\nexport default function TreeCodeViewerDemo() {\n  const [files, setFiles] = React.useState<TransformedCodeFile[]>([]);\n\n  React.useEffect(() => {\n    const transformFiles = async () => {\n      const transformedFiles = await transformCodeFiles(sampleFileData, 'tree-code-viewer');\n      setFiles(transformedFiles);\n    };\n    transformFiles();\n  }, []);\n\n  if (files.length === 0) {\n    return (\n      <div className='p-6 w-full mx-auto h-[400px] dark:bg-neutral-800 bg-neutral-200 animate-pulse'></div>\n    );\n  }\n\n  return (\n    <div className='p-6 w-full mx-auto dark:bg-black bg-white rounded'>\n      <TreeCodeViewer files={files} />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}