52: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"] 53: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"] 54:T438,import { MultiFileCodeBlock } from "@/components/ui/code-block"; import type { FileEntry } from "@/components/ui/code-block"; const files: FileEntry[] = [ { filename: "avatar.tsx", language: "tsx", code: `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export default function AvatarComponent() { return ( B ) }`, }, { filename: "button.tsx", language: "tsx", code: `import { Button } from "@/components/ui/button" export default function ButtonComponent() { return ( ) }`, }, ]; export default function CodeBlockMultiFile() { return (

); } 55:T3e8b,"use client"; import { codeToHtml } from "shiki"; import type { BundledLanguage } from "shiki"; import { Check, Copy, FileCode2 } from "lucide-react"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import type { SVGProps } from "react"; // -- Package manager icons (inlined for registry self-containment) -- const PnpmIcon = (p: SVGProps) => ( ); const NpmIcon = (p: SVGProps) => ( ); const YarnIcon = (p: SVGProps) => ( ); const BunIcon = (p: SVGProps) => ( ); // -- Styles -- // Injected once at runtime — ships as a single self-contained file with no // modifications to globals.css required. const CB_STYLES = ` .cbln code{counter-reset:line;counter-increment:line 0} .cbln .line::before{content:counter(line);counter-increment:line;display:inline-block;min-width:1.5rem;padding-right:.75rem;margin-right:1rem;text-align:right;font-size:.75rem;line-height:1.7;user-select:none;color:color-mix(in srgb,var(--muted-foreground,#888) 55%,transparent)} .cbhl .line-highlighted{display:block;background-color:oklch(0.828 0.189 84.429/.12);border-left:2px solid oklch(0.769 0.188 70.08);margin:0 -1rem;padding:0 1rem} `; function injectStyles() { if (typeof document === "undefined") return; if (document.getElementById("ss-code-block")) return; const el = document.createElement("style"); el.id = "ss-code-block"; el.textContent = CB_STYLES; document.head.appendChild(el); } // -- Types -- interface CodeBlockProps { code: string; language?: string; filename?: string; showLineNumbers?: boolean; scrollable?: boolean; maxHeight?: number; highlightLines?: number[]; /** Tailwind class(es) applied to the code body — e.g. "bg-muted", "bg-slate-950" */ bodyClassName?: string; className?: string; } export interface FileEntry { filename: string; code: string; language?: string; } export interface LanguageTab { label: string; filename: string; code: string; language?: string; } // -- Shiki renderer -- async function renderCode( code: string, language: string, highlightLines?: number[] ): Promise { return codeToHtml(code, { lang: language as BundledLanguage, themes: { light: "github-light", dark: "github-dark-default" }, tabindex: false, transformers: [ { pre(node) { // Strip shiki's inline background-color so the wrapper's bodyClassName shows through if (node.properties?.style) { node.properties.style = (node.properties.style as string) .replace(/background-color:\s*[^;]+;?\s*/gi, "") .replace(/--shiki-dark-bg:\s*[^;]+;?\s*/gi, ""); } }, line(node, line) { if (highlightLines?.includes(line)) { this.addClassToHast(node, "line-highlighted"); } }, }, ], }); } // -- Copy button -- function CopyBtn({ code }: { code: string }) { const [copied, setCopied] = useState(false); const copy = () => { if (typeof window === "undefined" || !navigator?.clipboard) return; navigator.clipboard.writeText(code).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; return ( ); } // -- Internal code renderer -- interface RendererProps { code: string; language: string; showLineNumbers: boolean; scrollable: boolean; maxHeight: number; highlightLines?: number[]; bodyClassName?: string; } function CodeRenderer({ code, language, showLineNumbers, scrollable, maxHeight, highlightLines, bodyClassName, }: RendererProps) { const [html, setHtml] = useState(null); useEffect(() => { injectStyles(); renderCode(code, language, highlightLines).then(setHtml); }, [code, language, highlightLines]); return (

{html ? (

pre]:p-4 [&_.line]:leading-[1.7]", showLineNumbers && "cbln", highlightLines?.length && "cbhl" )} /> ) : (

)}

); } // -- CodeBlock -- export function CodeBlock({ code, language = "tsx", filename, showLineNumbers = false, scrollable = false, maxHeight = 400, highlightLines, bodyClassName, className, }: CodeBlockProps) { return (

{filename ?? language}

); } // -- MultiFileCodeBlock -- interface MultiFileCodeBlockProps { files: FileEntry[]; showLineNumbers?: boolean; scrollable?: boolean; maxHeight?: number; bodyClassName?: string; className?: string; } export function MultiFileCodeBlock({ files, showLineNumbers = false, scrollable = false, maxHeight = 400, bodyClassName, className, }: MultiFileCodeBlockProps) { const [active, setActive] = useState(files[0]?.filename ?? ""); const file = files.find((f) => f.filename === active) ?? files[0]; return (

{files.map((f) => ( ))}

{file &&

}

{file && ( )}

); } // -- LanguageTabsCodeBlock -- interface LanguageTabsCodeBlockProps { tabs: LanguageTab[]; showLineNumbers?: boolean; scrollable?: boolean; maxHeight?: number; bodyClassName?: string; className?: string; } export function LanguageTabsCodeBlock({ tabs, showLineNumbers = false, scrollable = false, maxHeight = 400, bodyClassName, className, }: LanguageTabsCodeBlockProps) { const [active, setActive] = useState(tabs[0]?.label ?? ""); const tab = tabs.find((t) => t.label === active) ?? tabs[0]; return (

{/* Language selector */}

{tabs.map((t) => ( ))}

{/* Filename + copy */} {tab && ( <>

{tab.filename}

)}

); } // -- InstallCommand -- const PM_LIST = [ { label: "pnpm", icon: PnpmIcon }, { label: "npm", icon: NpmIcon }, { label: "yarn", icon: YarnIcon }, { label: "bun", icon: BunIcon }, ] as const; function buildCommand(pm: string, url: string) { switch (pm) { case "npm": return `npx shadcn@latest add ${url}`; case "yarn": return `yarn dlx shadcn@latest add ${url}`; case "bun": return `bunx --bun shadcn@latest add ${url}`; default: return `pnpm dlx shadcn@latest add ${url}`; } } interface InstallCommandProps { registryUrl: string; className?: string; } export function InstallCommand({ registryUrl, className }: InstallCommandProps) { const [pm, setPm] = useState("pnpm"); const [copied, setCopied] = useState(false); const command = buildCommand(pm, registryUrl); const copy = () => { if (typeof window === "undefined" || !navigator?.clipboard) return; navigator.clipboard.writeText(command).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; return (

{/* Package manager tabs */}

{PM_LIST.map(({ label, icon: Icon }) => ( ))}

{/* Command row */}

{command}

); } 51:["$","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","shiki",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/shiki","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":"shiki"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@shadcn-space","registryDependencies":["button"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/components/shadcn-space/code-block/code-block-05.tsx","content":"$54","type":"registry:component","target":"components/shadcn-space/code-block/code-block-05.tsx"},{"path":"src/components/ui/code-block.tsx","content":"$55","type":"registry:ui","target":"components/ui/code-block.tsx"}],"className":"h-[70svh] min-h-80"}]]}]