63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T50b0,"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { KeyboardEvent, PointerEvent } from "react"; type PackageManager = "npm" | "pnpm" | "yarn" | "bun"; type Tok = { t: string; c: string; i?: boolean }; const CSN_MANAGERS: readonly PackageManager[] = ["npm", "pnpm", "yarn", "bun"]; const CSN_SHELL = new Set(["bash", "sh", "shell", "zsh", "terminal", "console"]); const CSN_HASH = new Set(["py", "python", "yaml", "yml", "toml", "rb", "ruby", "env"]); const CSN_SUBS = new Set(["add", "init", "install", "i", "run", "dlx", "exec", "create", "remove", "build", "dev", "start", "test", "update"]); const CSN_KEYWORDS = new Set([ "const", "let", "var", "function", "return", "import", "from", "export", "default", "if", "else", "for", "while", "async", "await", "new", "class", "extends", "type", "interface", "true", "false", "null", "undefined", "def", "in", "of", ]); const CSN_COLOR = { cmd: "#c4b5fd", sub: "#f4f4f5", flag: "#7dd3fc", pkg: "#fcd34d", str: "#86efac", com: "#6b7280", num: "#fdba74", fn: "#7dd3fc", key: "#93c5fd", dim: "#71717a", base: "#e4e4e7", }; /** npm-flavoured lines rewritten for another package manager. */ function csnConvert(line: string, pm: PackageManager): string { if (pm === "npm") return line; const m = line.match(/^(\s*)(npx|npm)\s+(.*)$/); if (!m) return line; const ind = m[1] ?? ""; const bin = m[2] ?? ""; const rest = m[3] ?? ""; if (bin === "npx") return ind + (pm === "bun" ? "bunx" : pm + " dlx") + " " + rest; const add = rest.match(/^(?:install|i|add)(?:\s+(.*))?$/); if (add) return add[1] ? ind + pm + " add " + add[1] : ind + pm + " install"; const rm = rest.match(/^(?:uninstall|remove|rm)\s+(.*)$/); if (rm) return ind + pm + " remove " + (rm[1] ?? ""); return ind + pm + " " + rest; } function csnShell(line: string): Tok[] { const out: Tok[] = []; const re = /(#.*$)|("[^"]*"|'[^']*')|(\s+)|(&&|\|\||[|;<>]+)|([^\s"'|;&<>]+)|(.)/g; let expectCmd = true; let afterCmd = false; let m: RegExpExecArray | null; while ((m = re.exec(line)) !== null) { const [all, com, str, ws, op, word] = m; if (com) out.push({ t: com, c: CSN_COLOR.com, i: true }); else if (str) out.push({ t: str, c: CSN_COLOR.str }); else if (ws) out.push({ t: ws, c: CSN_COLOR.base }); else if (op) { out.push({ t: op, c: CSN_COLOR.dim }); expectCmd = !/[<>]/.test(op); afterCmd = false; } else if (word) { if (expectCmd && /^[A-Za-z_]+=/.test(word)) { out.push({ t: word, c: CSN_COLOR.dim }); } else if (expectCmd) { out.push({ t: word, c: CSN_COLOR.cmd }); expectCmd = false; afterCmd = true; } else if (word.startsWith("-")) { out.push({ t: word, c: CSN_COLOR.flag }); } else { if (afterCmd && CSN_SUBS.has(word)) out.push({ t: word, c: CSN_COLOR.sub }); else if (/[@/]/.test(word)) { const at = word.lastIndexOf("@"); if (at > 0) { out.push({ t: word.slice(0, at), c: CSN_COLOR.pkg }); out.push({ t: word.slice(at), c: CSN_COLOR.dim }); } else out.push({ t: word, c: CSN_COLOR.pkg }); } else if (/^\d/.test(word)) out.push({ t: word, c: CSN_COLOR.num }); else out.push({ t: word, c: CSN_COLOR.base }); afterCmd = false; } } else out.push({ t: all, c: CSN_COLOR.base }); } return out; } function csnGeneric(line: string, hash: boolean): Tok[] { const out: Tok[] = []; const re = /(\/\/.*$)|(#.*$)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)|(\s+)|(.)/g; let m: RegExpExecArray | null; while ((m = re.exec(line)) !== null) { const [all, slash, pound, str, num, id] = m; const rest = line.slice(m.index + all.length); if (slash) out.push({ t: slash, c: CSN_COLOR.com, i: true }); else if (pound) out.push(hash ? { t: pound, c: CSN_COLOR.com, i: true } : { t: pound, c: CSN_COLOR.base }); else if (str) out.push({ t: str, c: /^\s*:/.test(rest) ? CSN_COLOR.key : CSN_COLOR.str }); else if (num) out.push({ t: num, c: CSN_COLOR.num }); else if (id) { if (CSN_KEYWORDS.has(id)) out.push({ t: id, c: CSN_COLOR.cmd }); else if (rest.startsWith("(")) out.push({ t: id, c: CSN_COLOR.fn }); else out.push({ t: id, c: CSN_COLOR.base }); } else out.push({ t: all, c: /^[^\w\s]$/.test(all) ? CSN_COLOR.dim : CSN_COLOR.base }); } return out; } async function csnWrite(text: string): Promise { try { if (typeof navigator !== "undefined" && navigator.clipboard && typeof navigator.clipboard.writeText === "function") { await navigator.clipboard.writeText(text); return true; } } catch { // Permission denied or insecure context: fall through to the legacy path. } if (typeof document === "undefined") return false; const prev = document.activeElement as HTMLElement | null; const ta = document.createElement("textarea"); ta.value = text; ta.setAttribute("readonly", ""); ta.setAttribute("aria-hidden", "true"); ta.style.cssText = "position:fixed;top:-1000px;left:0;opacity:0;pointer-events:none;"; document.body.appendChild(ta); let ok = false; try { ta.select(); ta.setSelectionRange(0, text.length); ok = document.execCommand("copy"); } catch { ok = false; } document.body.removeChild(ta); if (prev && typeof prev.focus === "function") prev.focus({ preventScroll: true }); return ok; } const CSN_CSS = [ ".csn{container-type:inline-size;position:relative;color:#e4e4e7;font-family:inherit;-webkit-tap-highlight-color:transparent}", ".csn ::selection{background:rgba(125,211,252,.28)}", ".csn-glow,.csn-ring{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;border-radius:inherit}", ".csn-glow{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(125,211,252,.09),transparent 70%)}", ".csn-ring{padding:1px;background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),rgba(186,230,253,.55),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}", ".csn:hover .csn-glow,.csn:hover .csn-ring,.csn:focus-within .csn-glow,.csn:focus-within .csn-ring{opacity:1}", ".csn-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 8px;border-bottom:1px solid rgba(255,255,255,.07)}", ".csn-tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}", ".csn-pill{position:absolute;top:3px;bottom:3px;left:3px;border-radius:7px;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.4);transition:transform .34s cubic-bezier(.34,1.32,.64,1)}", ".csn-t{position:relative;z-index:1;min-height:32px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:#8b8d96;font:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;cursor:pointer;transition:color .2s ease}", ".csn-t:hover{color:#d4d4d8}", ".csn-t[aria-selected=true]{color:#fff}", ".csn-lang{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#9a9ca6;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}", ".csn-right{display:flex;align-items:center;gap:10px}", ".csn-copy{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px 0 10px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.05);color:#d4d4d8;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:background .2s ease,border-color .25s ease,color .25s ease,transform .15s ease}", ".csn-copy:hover{background:rgba(255,255,255,.1);color:#fff}", ".csn-copy:active{transform:scale(.95)}", ".csn-copy[data-status=copied]{background:rgba(16,185,129,.14);border-color:rgba(52,211,153,.4);color:#6ee7b7}", ".csn-copy[data-status=failed]{background:rgba(244,63,94,.14);border-color:rgba(251,113,133,.4);color:#fda4af}", ".csn button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}", ".csn-t:focus-visible{border-radius:7px}", ".csn-copy:focus-visible{border-radius:9px}", ".csn-stack{display:grid}", ".csn-stack>*{grid-area:1/1;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1),filter .22s ease}", ".csn-icons{width:16px;height:16px;place-items:center}", ".csn-stack>[data-on=false]{opacity:0;transform:translateY(5px) scale(.7);filter:blur(2px)}", ".csn-labels>[data-on=false]{transform:translateY(7px)}", ".csn-stack>[data-on=true]{opacity:1;transform:none;filter:none}", ".csn-check{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .32s cubic-bezier(.65,0,.35,1) .08s}", ".csn-stack>[data-on=true] .csn-check{stroke-dashoffset:0}", ".csn-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}", ".csn-scroll::-webkit-scrollbar{display:none}", ".csn-scroll:focus-visible{outline:2px solid #7dd3fc;outline-offset:-2px;border-radius:0}", ".csn-code{margin:0;padding:14px 0;width:max-content;min-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-size:13px;line-height:1.75;tab-size:2;animation:csn-in .28s cubic-bezier(.2,.8,.2,1) both}", ".csn-line{display:flex;align-items:baseline;padding:0 18px;white-space:pre;border-left:2px solid transparent;margin-left:0}", ".csn-line[data-hl=true]{background:linear-gradient(90deg,rgba(125,211,252,.12),rgba(125,211,252,.03));border-left-color:#7dd3fc}", ".csn-gut{flex:none;user-select:none;-webkit-user-select:none;color:#52525b;text-align:right;min-width:2ch;margin-right:16px}", ".csn-sweep{position:absolute;top:0;left:0;width:45%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#6ee7b7,transparent);box-shadow:0 0 14px 1px rgba(110,231,183,.55);animation:csn-sweep .85s cubic-bezier(.4,0,.2,1) both}", ".csn-wash{position:absolute;left:0;right:0;top:0;height:70%;pointer-events:none;background:linear-gradient(180deg,rgba(16,185,129,.12),transparent);animation:csn-wash 1s ease-out both}", "@keyframes csn-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}", "@keyframes csn-sweep{from{transform:translateX(-100%);opacity:1}80%{opacity:1}to{transform:translateX(230%);opacity:0}}", "@keyframes csn-wash{from{opacity:1}to{opacity:0}}", "@media (pointer:coarse){.csn-t,.csn-copy{min-height:40px}.csn-t{padding:0 13px}}", "@container (max-width:380px){.csn-lang{display:none}.csn-t{padding:0 10px}}", "@media (prefers-reduced-motion:reduce){.csn *,.csn *::before{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}.csn-sweep,.csn-wash{display:none}.csn-stack>[data-on=false]{transform:none;filter:none}}", ].join("\n"); export function CopyCodeSnippet({ code = "npx shadcn@latest add viberdy-dev/ui/copy-code-snippet", language = "bash", packageTabs = true, defaultTab = "npm", lineNumbers, highlight, className = "", onCopy, }: { /** The snippet. Line breaks are kept exactly as given. */ code?: string; /** Label pill and tokenizer hint (bash, ts, json, python ...). */ language?: string; /** Show npm / pnpm / yarn / bun tabs when the snippet contains npx or npm lines. */ packageTabs?: boolean; defaultTab?: PackageManager; /** Gutter numbers. Left undefined: on for multi-line code that is not a shell command. */ lineNumbers?: boolean; /** 1-based line numbers to mark. */ highlight?: number[]; className?: string; onCopy?: (text: string) => void; }) { const uid = useId(); const scroller = useRef(null); const codeEl = useRef(null); const tabRefs = useRef<(HTMLButtonElement | null)[]>([]); const timer = useRef(0); const [pm, setPm] = useState(defaultTab); const [status, setStatus] = useState<"idle" | "copied" | "failed">("idle"); const [pulse, setPulse] = useState(0); const lang = language.toLowerCase(); const shell = CSN_SHELL.has(lang); const raw = code.replace(/\r\n/g, "\n").replace(/\n+$/, ""); const hasTabs = packageTabs && shell && /^\s*(npx|npm)\s/m.test(raw); const active: PackageManager = hasTabs ? pm : "npm"; const lines = raw.split("\n").map((l) => (hasTabs ? csnConvert(l, active) : l)); const text = lines.join("\n"); const marked = new Set(highlight ?? []); const numbered = lineNumbers ?? (!shell && lines.length > 1); const tabIndex = Math.max(0, CSN_MANAGERS.indexOf(active)); const panelId = "csn-panel-" + uid.replace(/[^a-zA-Z0-9]/g, ""); useEffect(() => { return () => window.clearTimeout(timer.current); }, []); // Edge fades follow how much code is hidden on each side. useEffect(() => { const el = scroller.current; if (!el) return; const update = () => { const max = el.scrollWidth - el.clientWidth; el.style.setProperty("--fl", Math.min(36, Math.max(0, el.scrollLeft)) + "px"); el.style.setProperty("--fr", Math.min(36, Math.max(0, max - el.scrollLeft)) + "px"); el.tabIndex = max > 1 ? 0 : -1; }; update(); el.addEventListener("scroll", update, { passive: true }); let ro: ResizeObserver | null = null; if (typeof ResizeObserver !== "undefined") { ro = new ResizeObserver(update); ro.observe(el); if (el.firstElementChild) ro.observe(el.firstElementChild); } return () => { el.removeEventListener("scroll", update); ro?.disconnect(); }; }, [text, active]); async function copy() { const ok = await csnWrite(text); window.clearTimeout(timer.current); if (ok) { setStatus("copied"); setPulse((n) => n + 1); onCopy?.(text); } else { setStatus("failed"); const sel = window.getSelection(); if (sel && codeEl.current) { const range = document.createRange(); range.selectNodeContents(codeEl.current); sel.removeAllRanges(); sel.addRange(range); } } timer.current = window.setTimeout(() => setStatus("idle"), ok ? 1900 : 2600); } function onMove(e: PointerEvent) { const el = e.currentTarget; const r = el.getBoundingClientRect(); const k = r.width > 0 ? el.offsetWidth / r.width : 1; el.style.setProperty("--mx", (e.clientX - r.left) * k + "px"); el.style.setProperty("--my", (e.clientY - r.top) * k + "px"); } function onTabKey(e: KeyboardEvent) { let next = tabIndex; if (e.key === "ArrowRight") next = (tabIndex + 1) % CSN_MANAGERS.length; else if (e.key === "ArrowLeft") next = (tabIndex - 1 + CSN_MANAGERS.length) % CSN_MANAGERS.length; else if (e.key === "Home") next = 0; else if (e.key === "End") next = CSN_MANAGERS.length - 1; else return; e.preventDefault(); const target = CSN_MANAGERS[next]; if (target) setPm(target); tabRefs.current[next]?.focus(); } const label = hasTabs ? "Copy " + active + " command" : "Copy code"; return ( <>

{pulse > 0 && status === "copied" ? (

) : null}

{hasTabs ? (

{CSN_MANAGERS.map((m, i) => ( ))}

) : ( {language} )}

{hasTabs ? {language} : null}

              {lines.map((line, i) => (
                
                  {numbered ? (
                    
                      {i + 1}
                    
                  ) : shell && line.trim() !== "" && !line.trim().startsWith("#") ? (
                    
                      $
                    
                  ) : null}
                  
                    {(shell ? csnShell(line) : csnGeneric(line, CSN_HASH.has(lang))).map((tok, j) => (
                      
                        {tok.t}
                      
                    ))}
                    {line === "" ? " " : null}
                  
                
              ))}

{status === "copied" ? "Copied to clipboard" : status === "failed" ? "Copy failed. The code is selected, press Ctrl+C." : ""}

); } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"components/viberdy/copy-code-snippet.tsx","content":"$64","type":"registry:component","target":"components/viberdy/copy-code-snippet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]