51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1952,"use client"; import * as React from "react"; import { WandSparklesIcon } from "lucide-react"; import { CopyButton } from "@/components/custom/copy-button"; import { type Badge } from "@/components/ui/badge"; import { PackageManagerIcon } from "@/components/ui/icons/package-manager-icons"; import { cn } from "@/lib/utils"; import type { PackageManager } from "@/lib/package-manager"; export type { PackageManager }; export { convertNpmCommand } from "@/lib/package-manager"; // ─── Context ───────────────────────────────────────────────────────────────── type PackageManagerContextValue = { packageManager: PackageManager; setPackageManager: (pm: PackageManager) => void; }; const PackageManagerContext = React.createContext({ packageManager: "npm", setPackageManager: () => { }, }); export function PackageManagerProvider({ children, defaultPackageManager = "npm", }: { children: React.ReactNode; defaultPackageManager?: PackageManager; }) { const [packageManager, setPackageManagerState] = React.useState(() => { if (typeof window !== "undefined") { return ( (localStorage.getItem("packageManager") as PackageManager) ?? defaultPackageManager ); } return defaultPackageManager; }); const setPackageManager = React.useCallback((pm: PackageManager) => { setPackageManagerState(pm); localStorage.setItem("packageManager", pm); }, []); return ( {children} ); } export function usePackageManager() { return React.useContext(PackageManagerContext); } type ActiveTab = PackageManager | "prompt"; export type CodeBlockCommandProps = { prompt?: string; npm?: string; pnpm?: string; yarn?: string; bun?: string; onCopySuccess?: (text: string) => void; onCopyError?: (error: Error) => void; className?: string; badgeComponent?: React.ComponentType>; }; const PACKAGE_MANAGERS: PackageManager[] = ["pnpm", "yarn", "npm", "bun"]; export function CodeBlockCommand({ prompt, npm, pnpm, yarn, bun, onCopySuccess, onCopyError, className, badgeComponent: BadgeComponent, }: CodeBlockCommandProps) { const { packageManager, setPackageManager } = usePackageManager(); const commands: Record = { npm, pnpm, yarn, bun }; const availablePMs = PACKAGE_MANAGERS.filter((pm) => commands[pm] !== undefined); // Local tab state — "prompt" tab doesn't affect the shared PM context const [activeTab, setActiveTab] = React.useState(() => { if (availablePMs.includes(packageManager)) return packageManager; return availablePMs[0] ?? "npm"; }); // Keep active tab in sync when the shared PM context changes React.useEffect(() => { if (availablePMs.includes(packageManager)) { setActiveTab(packageManager); } }, [packageManager]); // eslint-disable-line react-hooks/exhaustive-deps function handleTabClick(tab: ActiveTab) { setActiveTab(tab); if (tab !== "prompt") { setPackageManager(tab); } } const activeContent = activeTab === "prompt" ? (prompt ?? "") : (commands[activeTab] ?? ""); return (

{BadgeComponent ? ( {activeTab === "prompt" ? ( ) : ( )} ) : activeTab === "prompt" ? ( ) : ( )} {prompt && ( handleTabClick("prompt")}> prompt )} {availablePMs.map((pm) => ( handleTabClick(pm)}> {pm} ))}

          
            {activeTab !== "prompt" && $ }
            {activeContent}

); } // ─── Helpers ────────────────────────────────────────────────────────────────── function TabButton({ active, onClick, children, }: { active: boolean; onClick: () => void; children: React.ReactNode; }) { return ( ); } 54:T25a7,import type { SVGProps } from "react"; import type { PackageManager } from "@/lib/package-manager"; import { cn } from "@/lib/utils"; // Brand colors from Simple Icons (simpleicons.org) // npm → #CB3837 pnpm → #F69220 // yarn → #2C8EBB bun → #FBF0DF (cream — dark bg brand; inverted for light mode) function NpmIcon(props: SVGProps) { return ( ); } function PnpmIcon(props: SVGProps) { return ( ); } function YarnIcon(props: SVGProps) { return ( ); } function BunIcon(props: SVGProps) { return ( ); } const PM_STYLES: Record = { npm: {}, pnpm: { style: { color: "#F69220" } }, yarn: {}, bun: {}, }; export function PackageManagerIcon({ packageManager, className, }: { packageManager: PackageManager; className?: string; }) { const { style, className: colorClass } = PM_STYLES[packageManager]; const sharedProps = { "aria-hidden": true as const, style, className: cn(colorClass, className) }; switch (packageManager) { case "npm": return ; case "pnpm": return ; case "yarn": return ; case "bun": return ; } } 55:T9d3,"use client"; import { CheckIcon, CircleXIcon, CopyIcon } from "lucide-react"; import type { HTMLMotionProps, Variants } from "motion/react"; import { AnimatePresence, motion } from "motion/react"; import type { ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import type { CopyState } from "@/hooks/use-copy-to-clipboard"; import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; export const motionIconVariants: Variants = { initial: { opacity: 0, scale: 0.8, filter: "blur(2px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: 0.8 }, }; export const motionIconProps: HTMLMotionProps<"span"> = { variants: motionIconVariants, initial: "initial", animate: "animate", exit: "exit", transition: { duration: 0.25, ease: "easeOut" }, }; export type CopyStateIconProps = { state: CopyState; idleIcon?: React.ReactNode; doneIcon?: React.ReactNode; errorIcon?: React.ReactNode; }; export function CopyStateIcon({ state, idleIcon, doneIcon, errorIcon }: CopyStateIconProps) { return ( {state === "idle" ? ( {idleIcon ?? } ) : state === "done" ? ( {doneIcon ?? } ) : state === "error" ? ( {errorIcon ?? } ) : null} ); } export type CopyButtonProps = ComponentProps & { text: string | (() => string); onCopySuccess?: (text: string) => void; onCopyError?: (error: Error) => void; } & Pick; export function CopyButton({ size = "icon", variant = "ghost", children, text, idleIcon, doneIcon, errorIcon, onClick, onCopySuccess, onCopyError, ...props }: CopyButtonProps) { const { state, copy } = useCopyToClipboard({ onCopySuccess, onCopyError }); return ( ); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@glasscn","registryDependencies":["@glasscn/utils","@glasscn/button","@glasscn/badge"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/code-block-command.tsx","content":"$53","type":"registry:ui"},{"path":"components/ui/icons/package-manager-icons.tsx","content":"$54","type":"registry:ui"},{"path":"components/custom/copy-button.tsx","content":"$55","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"}],"className":"h-[70svh] min-h-80"}]]}]