{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shadcn-registry-item-code-block",
  "type": "registry:component",
  "registryDependencies": [
    "button",
    "tree"
  ],
  "files": [
    {
      "path": "components/domain-ui/shadcn-registry-item-code-block.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState, createContext, useContext } from \"react\";\nimport type { RegistryItem } from \"shadcn/registry\";\n// DynamicCodeBlock is not available, use CodeBlock instead\nimport { Button } from \"@/components/ui/button\";\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"@/components/domain-ui/tree\";\nimport { PanelLeftClose, PanelLeft, FileText, File } from \"lucide-react\";\nimport { CodeBlock, Pre } from \"fumadocs-ui/components/codeblock\";\nimport { type ComponentProps, useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { DynamicCodeBlock } from \"fumadocs-ui/components/dynamic-codeblock\";\n\ninterface FileData {\n  path: string;\n  content?: string;\n}\n\ninterface FileTreeNode {\n  path: string;\n  type: \"file\" | \"directory\";\n  children?: FileTreeNode[];\n  content?: string;\n}\n\ninterface FileSelectionContextValue {\n  selectedFilePath: string;\n  setSelectedFilePath: (path: string) => void;\n}\n\nconst FileSelectionContext = createContext<FileSelectionContextValue | null>(\n  null\n);\n\nfunction useFileSelection() {\n  const context = useContext(FileSelectionContext);\n  if (!context) {\n    throw new Error(\n      \"useFileSelection must be used within FileSelectionProvider\"\n    );\n  }\n  return context;\n}\n\n// FilePath component - displays file path\ninterface FilePathProps {\n  filePath?: string;\n}\n\nfunction FilePath({ filePath }: FilePathProps) {\n  if (!filePath) {\n    return null;\n  }\n\n  return (\n    <div className=\"bg-muted/10\">\n      <div className=\"flex h-12 items-center gap-2 border-b px-3\">\n        <FileText className=\"h-3 w-3\" />\n        <span className=\"text-muted-foreground text-sm\">{filePath}</span>\n      </div>\n    </div>\n  );\n}\n\n// FileContent component - displays file content\ninterface FileContentProps {\n  files: FileData[];\n}\n\nfunction pre(props: ComponentProps<\"pre\">) {\n  return (\n    <CodeBlock {...props} className={cn(\"my-0 rounded-none\", props.className)}>\n      <Pre>{props.children}</Pre>\n    </CodeBlock>\n  );\n}\n\nfunction FileContent({ files }: FileContentProps) {\n  const { selectedFilePath } = useFileSelection();\n\n  const options = useMemo(\n    () => ({\n      components: {\n        pre,\n      },\n      themes: {\n        light: \"github-light\",\n        dark: \"github-dark\",\n      },\n    }),\n    []\n  );\n\n  const selectedFile = files.find((file) => file.path === selectedFilePath);\n\n  if (!selectedFile) {\n    return (\n      <div className=\"flex flex-1 items-center justify-center text-muted-foreground/60\">\n        <p className=\"text-sm\">Select a file to view its contents</p>\n      </div>\n    );\n  }\n\n  const language = selectedFile.path.split(\".\").pop()?.toLowerCase() || \"text\";\n\n  return (\n    <div className=\"flex-1 overflow-auto bg-card\">\n      <DynamicCodeBlock\n        lang={language}\n        code={selectedFile.content || \"\"}\n        options={options}\n      />\n    </div>\n  );\n}\n\n// Create or get existing tree node\nfunction createOrGetTreeNode(\n  currentPath: string,\n  isLastPart: boolean,\n  file: FileData,\n  pathMap: Map<string, FileTreeNode>,\n  currentLevel: FileTreeNode[]\n): FileTreeNode {\n  let existingNode = pathMap.get(currentPath);\n\n  if (!existingNode) {\n    const newNode: FileTreeNode = {\n      path: currentPath,\n      type: isLastPart ? \"file\" : \"directory\",\n      children: isLastPart ? undefined : [],\n      content: isLastPart ? (file.content ?? \"\") : undefined,\n    };\n    pathMap.set(currentPath, newNode);\n    currentLevel.push(newNode);\n    existingNode = newNode;\n  }\n\n  return existingNode;\n}\n\n// Process single file into tree\nfunction processFileIntoTree(\n  file: FileData,\n  tree: FileTreeNode[],\n  pathMap: Map<string, FileTreeNode>\n): void {\n  const pathParts = file.path.split(\"/\");\n  let currentPath = \"\";\n  let currentLevel = tree;\n\n  for (let i = 0; i < pathParts.length; i++) {\n    const part = pathParts[i];\n    if (!part) {\n      continue;\n    }\n\n    currentPath = currentPath ? `${currentPath}/${part}` : part;\n    const isLastPart = i === pathParts.length - 1;\n\n    const existingNode = createOrGetTreeNode(\n      currentPath,\n      isLastPart,\n      file,\n      pathMap,\n      currentLevel\n    );\n\n    if (!isLastPart && existingNode.children) {\n      currentLevel = existingNode.children;\n    }\n  }\n}\n\n// Transform files into tree structure\nfunction transformFilesToTree(files: FileData[]): FileTreeNode[] {\n  const tree: FileTreeNode[] = [];\n  const pathMap = new Map<string, FileTreeNode>();\n\n  const sortedFiles = [...files].sort((a, b) => a.path.localeCompare(b.path));\n\n  for (const file of sortedFiles) {\n    processFileIntoTree(file, tree, pathMap);\n  }\n\n  return tree;\n}\n\n// Get all directory paths for default expansion\nfunction getAllDirectoryIds(nodes: FileTreeNode[]): string[] {\n  const ids: string[] = [];\n\n  function traverse(nodeList: FileTreeNode[]) {\n    for (const node of nodeList) {\n      if (node.type === \"directory\") {\n        ids.push(node.path);\n        if (node.children) {\n          traverse(node.children);\n        }\n      }\n    }\n  }\n\n  traverse(nodes);\n  return ids;\n}\n\n// Tree nodes component\nfunction TreeNodes({\n  nodes,\n  level = 1,\n}: {\n  nodes: FileTreeNode[];\n  level?: number;\n}) {\n  const { setSelectedFilePath } = useFileSelection();\n\n  return (\n    <>\n      {nodes.map((node, index) => {\n        const nodeKey = node.path;\n        const fileName = node.path.split(\"/\").pop() || \"\";\n        const isLast = index === nodes.length - 1;\n\n        if (node.type === \"file\") {\n          return (\n            <TreeNode\n              key={nodeKey}\n              nodeId={nodeKey}\n              level={level}\n              isLast={isLast}\n            >\n              <TreeNodeTrigger onClick={() => setSelectedFilePath(node.path)}>\n                <TreeExpander hasChildren={false} />\n                <TreeIcon\n                  hasChildren={false}\n                  icon={\n                    <File strokeWidth={1.5} size={16} className=\"shrink-0\" />\n                  }\n                />\n                <TreeLabel>{fileName}</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          );\n        }\n\n        return (\n          <TreeNode\n            key={nodeKey}\n            nodeId={nodeKey}\n            level={level}\n            isLast={isLast}\n          >\n            <TreeNodeTrigger>\n              <TreeExpander hasChildren={true} />\n              <TreeIcon hasChildren={true} />\n              <TreeLabel>{fileName}</TreeLabel>\n            </TreeNodeTrigger>\n            <TreeNodeContent hasChildren>\n              {node.children && (\n                <TreeNodes nodes={node.children} level={level + 1} />\n              )}\n            </TreeNodeContent>\n          </TreeNode>\n        );\n      })}\n    </>\n  );\n}\n\n// FileTree component - displays file tree with toolbar\ninterface FileTreeProps {\n  files: FileData[];\n  collapsed: boolean;\n  onToggleCollapse: () => void;\n  selectedFilePath: string;\n}\n\nfunction FileTree({\n  files,\n  collapsed,\n  onToggleCollapse,\n  selectedFilePath,\n}: FileTreeProps) {\n  if (collapsed) {\n    return (\n      <div className=\"flex flex-col border-r bg-muted/20\">\n        <div className=\"flex h-12 items-center justify-center border-b px-3\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={onToggleCollapse}\n            className=\"h-6 w-6 p-0 hover:bg-muted\"\n          >\n            <PanelLeft className=\"h-3 w-3\" />\n          </Button>\n        </div>\n      </div>\n    );\n  }\n\n  const treeNodes = transformFilesToTree(files);\n  const defaultExpandedIds = getAllDirectoryIds(treeNodes);\n\n  return (\n    <div className=\"flex w-[280px] flex-col\">\n      <div className=\"flex h-12 items-center justify-between border-r border-b bg-muted/30 px-3\">\n        <span className=\"font-semibold text-muted-foreground text-xs uppercase tracking-wide\">\n          Files ({files.length})\n        </span>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={onToggleCollapse}\n          className=\"h-6 w-6 p-0 hover:bg-muted/60\"\n        >\n          <PanelLeftClose className=\"h-3 w-3\" />\n        </Button>\n      </div>\n      <div className=\"flex-1 overflow-auto border-r bg-muted/20 py-1\">\n        <TreeProvider\n          defaultExpandedIds={defaultExpandedIds}\n          selectedIds={selectedFilePath ? [selectedFilePath] : []}\n          indent={38}\n        >\n          <TreeView className=\"min-w-fit\">\n            <TreeNodes nodes={treeNodes} />\n          </TreeView>\n        </TreeProvider>\n      </div>\n    </div>\n  );\n}\n\nasync function fetchRegistryItem(url: string): Promise<RegistryItem> {\n  const response = await fetch(url, { cache: \"force-cache\" });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch registry item: ${response.status}`);\n  }\n\n  const registryItem: RegistryItem = await response.json();\n\n  if (!registryItem) {\n    throw new Error(`Registry item not found at \"${url}\"`);\n  }\n\n  return registryItem;\n}\n\n// Main component\ninterface ShadcnRegistryItemCodeBlockProps {\n  url: string;\n}\n\nexport function ShadcnRegistryItemCodeBlock({\n  url,\n}: ShadcnRegistryItemCodeBlockProps) {\n  const [files, setFiles] = useState<FileData[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [selectedFilePath, setSelectedFilePath] = useState<string>(\"\");\n  const [isTreeCollapsed, setIsTreeCollapsed] = useState(false);\n\n  useEffect(() => {\n    let isMounted = true;\n\n    fetchRegistryItem(url)\n      .then((registryItem) => {\n        if (!registryItem.files || registryItem.files.length === 0) {\n          throw new Error(\"No files found in registry item\");\n        }\n\n        const fileData: FileData[] = registryItem.files.map((file) => ({\n          path: file.path,\n          content: file.content,\n        }));\n\n        if (isMounted) {\n          setFiles(fileData);\n          setSelectedFilePath(fileData[0]?.path || \"\");\n        }\n      })\n      .catch((err) => {\n        if (isMounted) {\n          const errorMessage = err instanceof Error ? err.message : String(err);\n          setError(errorMessage);\n        }\n      })\n      .finally(() => {\n        if (isMounted) {\n          setIsLoading(false);\n        }\n      });\n\n    return () => {\n      isMounted = false;\n    };\n  }, [url]);\n\n  if (isLoading) {\n    return (\n      <div className=\"rounded-lg border bg-card p-4\">\n        <p className=\"text-muted-foreground text-sm\">\n          Loading registry files...\n        </p>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"rounded-lg border bg-card p-4\">\n        <p className=\"text-destructive text-sm\">\n          Error loading registry: {error}\n        </p>\n      </div>\n    );\n  }\n\n  const fileSelectionValue = {\n    selectedFilePath,\n    setSelectedFilePath,\n  };\n\n  // Single file layout\n  if (files.length === 1) {\n    return (\n      <FileSelectionContext.Provider value={fileSelectionValue}>\n        <div className=\"space-y-2\">\n          <FilePath filePath={selectedFilePath} />\n          <FileContent files={files} />\n        </div>\n      </FileSelectionContext.Provider>\n    );\n  }\n\n  // Multiple files layout\n  return (\n    <FileSelectionContext.Provider value={fileSelectionValue}>\n      <div className=\"my-4 flex h-[600px] overflow-hidden rounded-lg border bg-background shadow-sm\">\n        {/* <TreeExample /> */}\n        <FileTree\n          files={files}\n          collapsed={isTreeCollapsed}\n          onToggleCollapse={() => setIsTreeCollapsed(!isTreeCollapsed)}\n          selectedFilePath={selectedFilePath}\n        />\n        <div className=\"flex flex-1 flex-col overflow-hidden\">\n          <FilePath filePath={selectedFilePath} />\n          <FileContent files={files} />\n        </div>\n      </div>\n    </FileSelectionContext.Provider>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "shadcn",
      "registry",
      "code-block",
      "file-tree",
      "code-viewer",
      "syntax-highlighting",
      "tree-view"
    ]
  }
}