4f: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"] 50: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"] 51:T85b,import type { HLJSApi, Language, Mode } from "highlight.js"; import typescript from "highlight.js/lib/languages/typescript"; export function tsx(hljs: HLJSApi): Language { const base = typescript(hljs); const contains = base.contains as Mode[]; for (const node of findXmlHandoffs(contains)) { if (Object.isFrozen(node)) { throw new Error( "highlight.js froze the JSX hand-off before tsx() could rewrite it.", ); } for (const key of Object.keys(node)) delete node[key as keyof Mode]; node.variants = jsxModes(base.keywords, contains); } return { ...base, name: "TSX", aliases: ["tsx", "jsx"], contains: [...jsxModes(base.keywords, contains), ...contains], }; } function jsxModes(keywords: unknown, contains: Mode[]): Mode[] { const expression: Mode = { begin: /\{/, end: /\}/, keywords: keywords as Mode["keywords"], contains: [], }; const OPEN = /(?:(?|\s+[A-Za-z_$])/; const tag = (name: RegExp, scope: string): Mode => ({ begin: [OPEN, name, AFTER], beginScope: { 2: scope }, end: /\/?>/, contains: [ { scope: "attr", begin: /[A-Za-z_$][\w$]*(?:-[\w$]+)*(?=\s*=)/ }, { scope: "string", begin: /"/, end: /"/ }, { scope: "string", begin: /'/, end: /'/ }, expression, ], }); const jsx: Mode[] = [ { begin: /(?:(?/ }, tag(/[A-Z][\w.$]*/, "title.class"), tag(/[a-z][\w.]*(?:-[\w.]+)*/, "name"), ]; expression.contains = [...jsx, "self", ...contains]; return jsx; } function findXmlHandoffs(modes: Mode[]): Mode[] { const seen = new Set(); const found: Mode[] = []; const walk = (mode: Mode) => { if (seen.has(mode)) return; seen.add(mode); if (mode.subLanguage === "xml" && mode.end === undefined) found.push(mode); for (const child of mode.contains ?? []) { if (typeof child !== "string") walk(child as Mode); } for (const child of mode.variants ?? []) walk(child); if (mode.starts) walk(mode.starts); }; for (const mode of modes) walk(mode); return found; } 52:T1aa5,"use client"; import hljs from "highlight.js/lib/core"; import bash from "highlight.js/lib/languages/bash"; import css from "highlight.js/lib/languages/css"; import javascript from "highlight.js/lib/languages/javascript"; import json from "highlight.js/lib/languages/json"; import markdown from "highlight.js/lib/languages/markdown"; import typescript from "highlight.js/lib/languages/typescript"; import xml from "highlight.js/lib/languages/xml"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "./button"; import { tsx } from "./tsx-grammar"; hljs.registerLanguage("typescript", typescript); hljs.registerLanguage("javascript", javascript); hljs.registerLanguage("json", json); hljs.registerLanguage("bash", bash); hljs.registerLanguage("css", css); hljs.registerLanguage("xml", xml); hljs.registerLanguage("markdown", markdown); hljs.registerLanguage("tsx", tsx); /** * Any grammar usva bundles (`tsx`, `ts`, `jsx`, `js`, `json`, `bash`, `css`, * `html`, `md` and their highlight.js aliases), anything added through * {@link registerCodeLanguage}, or "plain" to skip highlighting. An unknown * grammar renders as unhighlighted code rather than failing. */ export type CodeSnippetLanguage = "plain" | (string & {}); /** * Teach CodeSnippet a grammar usva does not bundle. Call it once, above the * render. * * ```ts * import cpp from "highlight.js/lib/languages/cpp"; * registerCodeLanguage("cpp", cpp); * ``` */ export function registerCodeLanguage( name: string, grammar: Parameters[1], ) { hljs.registerLanguage(name, grammar); } export interface CodeSnippetProps extends Omit, "children"> { /** The code, verbatim. Also what the copy button writes to the clipboard. */ code: string; language?: CodeSnippetLanguage; /** Header caption, e.g. "usage" or a file path. No label, no header bar. */ label?: React.ReactNode; /** Right side of the header bar. */ note?: React.ReactNode; copyable?: boolean; /** Runs after the clipboard write succeeds, never on a denied one. */ onCopied?: (value: string) => void; /** Extra classes for the scrolling pre, e.g. a max-height cap. */ preClassName?: string; } export function useCopyToClipboard( value: string, onCopied?: (value: string) => void, ) { const [copied, setCopied] = React.useState(false); const timer = React.useRef(0); const onCopiedRef = React.useRef(onCopied); onCopiedRef.current = onCopied; React.useEffect(() => () => window.clearTimeout(timer.current), []); const copy = React.useCallback(async () => { try { await navigator.clipboard.writeText(value); setCopied(true); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setCopied(false), 1600); onCopiedRef.current?.(value); } catch { /* A denied clipboard is not worth a dialog: the text is right there to * select by hand, and the button simply does not confirm. */ } }, [value]); return { copied, copy }; } const CopyIcon = () => ( ); const CheckIcon = () => ( ); export function CopySnippetButton({ value, label = "copy the snippet", onCopied, }: { value: string; label?: string; onCopied?: (value: string) => void; }) { const { copied, copy } = useCopyToClipboard(value, onCopied); return ( ); } export const CodeSnippet = React.forwardRef( ( { code, language = "tsx", label, note, copyable = true, onCopied, preClassName, className, ...rest }, ref, ) => { const html = React.useMemo( () => language !== "plain" && hljs.getLanguage(language) ? hljs.highlight(code, { language }).value : null, [code, language], ); const body = (

        {html === null ? (
          {code}
        ) : (
          
        )}


    );

    return (
      
        {label != null ? (
          
            
              {label}
            
            
              {note != null && (
                
                  {note}
                
              )}
              {copyable && (
                
              )}
            
          
        ) : (
          copyable && (
            
              
            
          )
        )}
        {body}
      
    );
  },
);
CodeSnippet.displayName = "CodeSnippet";
4e:["$","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","highlight.js",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/highlight.js","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":"highlight.js"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@usva","registryDependencies":["https://usva.build/r/button.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"tsx-grammar.ts","content":"$51","type":"registry:ui","target":"components/ui/tsx-grammar.ts"},{"path":"code-snippet.tsx","content":"$52","type":"registry:ui","target":"components/ui/code-snippet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]