{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-block-command", "title": "Code Block Command", "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "@glasscn/utils", "@glasscn/button", "@glasscn/badge" ], "files": [ { "path": "components/ui/code-block-command.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { WandSparklesIcon } from \"lucide-react\";\n\nimport { CopyButton } from \"@/components/custom/copy-button\";\nimport { type Badge } from \"@/components/ui/badge\";\nimport { PackageManagerIcon } from \"@/components/ui/icons/package-manager-icons\";\nimport { cn } from \"@/lib/utils\";\nimport type { PackageManager } from \"@/lib/package-manager\";\n\nexport type { PackageManager };\nexport { convertNpmCommand } from \"@/lib/package-manager\";\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ntype PackageManagerContextValue = {\n packageManager: PackageManager;\n setPackageManager: (pm: PackageManager) => void;\n};\n\nconst PackageManagerContext = React.createContext({\n packageManager: \"npm\",\n setPackageManager: () => { },\n});\n\nexport function PackageManagerProvider({\n children,\n defaultPackageManager = \"npm\",\n}: {\n children: React.ReactNode;\n defaultPackageManager?: PackageManager;\n}) {\n const [packageManager, setPackageManagerState] =\n React.useState(() => {\n if (typeof window !== \"undefined\") {\n return (\n (localStorage.getItem(\"packageManager\") as PackageManager) ??\n defaultPackageManager\n );\n }\n return defaultPackageManager;\n });\n\n const setPackageManager = React.useCallback((pm: PackageManager) => {\n setPackageManagerState(pm);\n localStorage.setItem(\"packageManager\", pm);\n }, []);\n\n return (\n \n {children}\n \n );\n}\n\nexport function usePackageManager() {\n return React.useContext(PackageManagerContext);\n}\n\ntype ActiveTab = PackageManager | \"prompt\";\n\nexport type CodeBlockCommandProps = {\n prompt?: string;\n npm?: string;\n pnpm?: string;\n yarn?: string;\n bun?: string;\n onCopySuccess?: (text: string) => void;\n onCopyError?: (error: Error) => void;\n className?: string;\n badgeComponent?: React.ComponentType>;\n};\n\nconst PACKAGE_MANAGERS: PackageManager[] = [\"pnpm\", \"yarn\", \"npm\", \"bun\"];\n\nexport function CodeBlockCommand({\n prompt,\n npm,\n pnpm,\n yarn,\n bun,\n onCopySuccess,\n onCopyError,\n className,\n badgeComponent: BadgeComponent,\n}: CodeBlockCommandProps) {\n const { packageManager, setPackageManager } = usePackageManager();\n\n const commands: Record = { npm, pnpm, yarn, bun };\n\n const availablePMs = PACKAGE_MANAGERS.filter((pm) => commands[pm] !== undefined);\n\n // Local tab state — \"prompt\" tab doesn't affect the shared PM context\n const [activeTab, setActiveTab] = React.useState(() => {\n if (availablePMs.includes(packageManager)) return packageManager;\n return availablePMs[0] ?? \"npm\";\n });\n\n // Keep active tab in sync when the shared PM context changes\n React.useEffect(() => {\n if (availablePMs.includes(packageManager)) {\n setActiveTab(packageManager);\n }\n }, [packageManager]); // eslint-disable-line react-hooks/exhaustive-deps\n\n function handleTabClick(tab: ActiveTab) {\n setActiveTab(tab);\n if (tab !== \"prompt\") {\n setPackageManager(tab);\n }\n }\n\n const activeContent =\n activeTab === \"prompt\" ? (prompt ?? \"\") : (commands[activeTab] ?? \"\");\n\n return (\n \n
\n {BadgeComponent ? (\n \n {activeTab === \"prompt\" ? (\n \n ) : (\n \n )}\n \n ) : activeTab === \"prompt\" ? (\n \n ) : (\n \n )}\n\n {prompt && (\n handleTabClick(\"prompt\")}>\n prompt\n \n )}\n\n {availablePMs.map((pm) => (\n handleTabClick(pm)}>\n {pm}\n \n ))}\n
\n\n
\n 
\n          \n            {activeTab !== \"prompt\" && $ }\n            {activeContent}\n          \n
\n
\n\n \n \n );\n}\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction TabButton({\n active,\n onClick,\n children,\n}: {\n active: boolean;\n onClick: () => void;\n children: React.ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n", "type": "registry:ui" }, { "path": "components/ui/icons/package-manager-icons.tsx", "content": "import type { SVGProps } from \"react\";\n\nimport type { PackageManager } from \"@/lib/package-manager\";\nimport { cn } from \"@/lib/utils\";\n\n// Brand colors from Simple Icons (simpleicons.org)\n// npm → #CB3837 pnpm → #F69220\n// yarn → #2C8EBB bun → #FBF0DF (cream — dark bg brand; inverted for light mode)\n\nfunction NpmIcon(props: SVGProps) {\n return (\n \n \n \n );\n}\n\nfunction PnpmIcon(props: SVGProps) {\n return (\n \n \n \n );\n}\n\nfunction YarnIcon(props: SVGProps) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction BunIcon(props: SVGProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nconst PM_STYLES: Record = {\n npm: {},\n pnpm: { style: { color: \"#F69220\" } },\n yarn: {},\n bun: {},\n};\n\nexport function PackageManagerIcon({\n packageManager,\n className,\n}: {\n packageManager: PackageManager;\n className?: string;\n}) {\n const { style, className: colorClass } = PM_STYLES[packageManager];\n const sharedProps = { \"aria-hidden\": true as const, style, className: cn(colorClass, className) };\n\n switch (packageManager) {\n case \"npm\":\n return ;\n case \"pnpm\":\n return ;\n case \"yarn\":\n return ;\n case \"bun\":\n return ;\n }\n}\n", "type": "registry:ui" }, { "path": "components/custom/copy-button.tsx", "content": "\"use client\";\n\nimport { CheckIcon, CircleXIcon, CopyIcon } from \"lucide-react\";\nimport type { HTMLMotionProps, Variants } from \"motion/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport type { CopyState } from \"@/hooks/use-copy-to-clipboard\";\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\";\n\nexport const motionIconVariants: Variants = {\n initial: { opacity: 0, scale: 0.8, filter: \"blur(2px)\" },\n animate: { opacity: 1, scale: 1, filter: \"blur(0px)\" },\n exit: { opacity: 0, scale: 0.8 },\n};\n\nexport const motionIconProps: HTMLMotionProps<\"span\"> = {\n variants: motionIconVariants,\n initial: \"initial\",\n animate: \"animate\",\n exit: \"exit\",\n transition: { duration: 0.25, ease: \"easeOut\" },\n};\n\nexport type CopyStateIconProps = {\n state: CopyState;\n idleIcon?: React.ReactNode;\n doneIcon?: React.ReactNode;\n errorIcon?: React.ReactNode;\n};\n\nexport function CopyStateIcon({ state, idleIcon, doneIcon, errorIcon }: CopyStateIconProps) {\n return (\n \n {state === \"idle\" ? (\n \n {idleIcon ?? }\n \n ) : state === \"done\" ? (\n \n {doneIcon ?? }\n \n ) : state === \"error\" ? (\n \n {errorIcon ?? }\n \n ) : null}\n \n );\n}\n\nexport type CopyButtonProps = ComponentProps & {\n text: string | (() => string);\n onCopySuccess?: (text: string) => void;\n onCopyError?: (error: Error) => void;\n} & Pick;\n\nexport function CopyButton({\n size = \"icon\",\n variant = \"ghost\",\n children,\n text,\n idleIcon,\n doneIcon,\n errorIcon,\n onClick,\n onCopySuccess,\n onCopyError,\n ...props\n}: CopyButtonProps) {\n const { state, copy } = useCopyToClipboard({ onCopySuccess, onCopyError });\n\n return (\n {\n void copy(text);\n onClick?.(e);\n }}\n aria-label=\"Copy\"\n {...props}\n >\n \n {children}\n \n );\n}\n", "type": "registry:component" }, { "path": "hooks/use-copy-to-clipboard.ts", "content": "import { useState } from \"react\";\n\nexport type CopyState = \"idle\" | \"done\" | \"error\";\n\ntype UseCopyToClipboardOptions = {\n onCopySuccess?: (text: string) => void;\n onCopyError?: (error: Error) => void;\n timeout?: number;\n};\n\nexport function useCopyToClipboard({ onCopySuccess, onCopyError, timeout = 2000 }: UseCopyToClipboardOptions = {}) {\n const [state, setState] = useState(\"idle\");\n\n async function copy(text: string | (() => string)) {\n const value = typeof text === \"function\" ? text() : text;\n try {\n await navigator.clipboard.writeText(value);\n setState(\"done\");\n onCopySuccess?.(value);\n } catch (err) {\n setState(\"error\");\n onCopyError?.(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setTimeout(() => setState(\"idle\"), timeout);\n }\n }\n\n return { state, copy };\n}\n", "type": "registry:hook" }, { "path": "lib/package-manager.ts", "content": "export type PackageManager = \"pnpm\" | \"yarn\" | \"npm\" | \"bun\";\n\nexport function convertNpmCommand(command: string): Record {\n const pnpm = command\n .replace(/^npm install/, \"pnpm add\")\n .replace(/^npx create-(\\S+)/, \"pnpm create $1\")\n .replace(/^npx/, \"pnpm dlx\")\n .replace(/^npm run/, \"pnpm\");\n\n const yarn = command\n .replace(/^npm install/, \"yarn add\")\n .replace(/^npx create-(\\S+)/, \"yarn create $1\")\n .replace(/^npx/, \"yarn dlx\")\n .replace(/^npm run/, \"yarn\");\n\n const bun = command\n .replace(/^npm install/, \"bun add\")\n .replace(/^npx create-(\\S+)/, \"bunx --bun create-$1\")\n .replace(/^npx/, \"bunx --bun\")\n .replace(/^npm run/, \"bun\");\n\n return { npm: command, pnpm, yarn, bun };\n}\n", "type": "registry:lib" } ], "type": "registry:ui" }