{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-snippet",
  "type": "registry:ui",
  "dependencies": [
    "highlight.js",
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/button.json"
  ],
  "files": [
    {
      "path": "tsx-grammar.ts",
      "target": "components/ui/tsx-grammar.ts",
      "type": "registry:ui",
      "content": "import type { HLJSApi, Language, Mode } from \"highlight.js\";\nimport typescript from \"highlight.js/lib/languages/typescript\";\n\nexport function tsx(hljs: HLJSApi): Language {\n  const base = typescript(hljs);\n  const contains = base.contains as Mode[];\n\n  for (const node of findXmlHandoffs(contains)) {\n    if (Object.isFrozen(node)) {\n      throw new Error(\n        \"highlight.js froze the JSX hand-off before tsx() could rewrite it.\",\n      );\n    }\n    for (const key of Object.keys(node)) delete node[key as keyof Mode];\n    node.variants = jsxModes(base.keywords, contains);\n  }\n\n  return {\n    ...base,\n    name: \"TSX\",\n    aliases: [\"tsx\", \"jsx\"],\n    contains: [...jsxModes(base.keywords, contains), ...contains],\n  };\n}\n\nfunction jsxModes(keywords: unknown, contains: Mode[]): Mode[] {\n  const expression: Mode = {\n    begin: /\\{/,\n    end: /\\}/,\n    keywords: keywords as Mode[\"keywords\"],\n    contains: [],\n  };\n\n  const OPEN = /(?:(?<![\\w$)\\]])<|<\\/)/;\n  const AFTER = /(?=\\s*\\/?>|\\s+[A-Za-z_$])/;\n\n  const tag = (name: RegExp, scope: string): Mode => ({\n    begin: [OPEN, name, AFTER],\n    beginScope: { 2: scope },\n    end: /\\/?>/,\n    contains: [\n      { scope: \"attr\", begin: /[A-Za-z_$][\\w$]*(?:-[\\w$]+)*(?=\\s*=)/ },\n      { scope: \"string\", begin: /\"/, end: /\"/ },\n      { scope: \"string\", begin: /'/, end: /'/ },\n      expression,\n    ],\n  });\n\n  const jsx: Mode[] = [\n    { begin: /(?:(?<![\\w$)\\]])<|<\\/)>/ },\n    tag(/[A-Z][\\w.$]*/, \"title.class\"),\n    tag(/[a-z][\\w.]*(?:-[\\w.]+)*/, \"name\"),\n  ];\n\n  expression.contains = [...jsx, \"self\", ...contains];\n  return jsx;\n}\n\nfunction findXmlHandoffs(modes: Mode[]): Mode[] {\n  const seen = new Set<Mode>();\n  const found: Mode[] = [];\n\n  const walk = (mode: Mode) => {\n    if (seen.has(mode)) return;\n    seen.add(mode);\n    if (mode.subLanguage === \"xml\" && mode.end === undefined) found.push(mode);\n    for (const child of mode.contains ?? []) {\n      if (typeof child !== \"string\") walk(child as Mode);\n    }\n    for (const child of mode.variants ?? []) walk(child);\n    if (mode.starts) walk(mode.starts);\n  };\n\n  for (const mode of modes) walk(mode);\n  return found;\n}\n"
    },
    {
      "path": "code-snippet.tsx",
      "target": "components/ui/code-snippet.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport hljs from \"highlight.js/lib/core\";\nimport bash from \"highlight.js/lib/languages/bash\";\nimport css from \"highlight.js/lib/languages/css\";\nimport javascript from \"highlight.js/lib/languages/javascript\";\nimport json from \"highlight.js/lib/languages/json\";\nimport markdown from \"highlight.js/lib/languages/markdown\";\nimport typescript from \"highlight.js/lib/languages/typescript\";\nimport xml from \"highlight.js/lib/languages/xml\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"./button\";\nimport { tsx } from \"./tsx-grammar\";\n\nhljs.registerLanguage(\"typescript\", typescript);\nhljs.registerLanguage(\"javascript\", javascript);\nhljs.registerLanguage(\"json\", json);\nhljs.registerLanguage(\"bash\", bash);\nhljs.registerLanguage(\"css\", css);\nhljs.registerLanguage(\"xml\", xml);\nhljs.registerLanguage(\"markdown\", markdown);\nhljs.registerLanguage(\"tsx\", tsx);\n\n/**\n * Any grammar usva bundles (`tsx`, `ts`, `jsx`, `js`, `json`, `bash`, `css`,\n * `html`, `md` and their highlight.js aliases), anything added through\n * {@link registerCodeLanguage}, or \"plain\" to skip highlighting. An unknown\n * grammar renders as unhighlighted code rather than failing.\n */\nexport type CodeSnippetLanguage = \"plain\" | (string & {});\n\n/**\n * Teach CodeSnippet a grammar usva does not bundle. Call it once, above the\n * render.\n *\n * ```ts\n * import cpp from \"highlight.js/lib/languages/cpp\";\n * registerCodeLanguage(\"cpp\", cpp);\n * ```\n */\nexport function registerCodeLanguage(\n  name: string,\n  grammar: Parameters<typeof hljs.registerLanguage>[1],\n) {\n  hljs.registerLanguage(name, grammar);\n}\n\nexport interface CodeSnippetProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** The code, verbatim. Also what the copy button writes to the clipboard. */\n  code: string;\n  language?: CodeSnippetLanguage;\n  /** Header caption, e.g. \"usage\" or a file path. No label, no header bar. */\n  label?: React.ReactNode;\n  /** Right side of the header bar. */\n  note?: React.ReactNode;\n  copyable?: boolean;\n  /** Runs after the clipboard write succeeds, never on a denied one. */\n  onCopied?: (value: string) => void;\n  /** Extra classes for the scrolling pre, e.g. a max-height cap. */\n  preClassName?: string;\n}\n\nexport function useCopyToClipboard(\n  value: string,\n  onCopied?: (value: string) => void,\n) {\n  const [copied, setCopied] = React.useState(false);\n  const timer = React.useRef(0);\n  const onCopiedRef = React.useRef(onCopied);\n  onCopiedRef.current = onCopied;\n\n  React.useEffect(() => () => window.clearTimeout(timer.current), []);\n\n  const copy = React.useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      window.clearTimeout(timer.current);\n      timer.current = window.setTimeout(() => setCopied(false), 1600);\n      onCopiedRef.current?.(value);\n    } catch {\n      /* A denied clipboard is not worth a dialog: the text is right there to\n       * select by hand, and the button simply does not confirm. */\n    }\n  }, [value]);\n\n  return { copied, copy };\n}\n\nconst CopyIcon = () => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"1.3\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"size-3.5\"\n    aria-hidden=\"true\"\n  >\n    <rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8\" rx=\"1.5\" />\n    <path d=\"M10.5 3.5A1.5 1.5 0 0 0 9 2H4a2 2 0 0 0-2 2v5a1.5 1.5 0 0 0 1.5 1.5\" />\n  </svg>\n);\n\nconst CheckIcon = () => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"1.6\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"size-3.5\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m3 8.5 3.5 3.5L13 4.5\" />\n  </svg>\n);\n\nexport function CopySnippetButton({\n  value,\n  label = \"copy the snippet\",\n  onCopied,\n}: {\n  value: string;\n  label?: string;\n  onCopied?: (value: string) => void;\n}) {\n  const { copied, copy } = useCopyToClipboard(value, onCopied);\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      iconOnly\n      size=\"sm\"\n      active={copied}\n      onClick={copy}\n      aria-label={copied ? \"copied\" : label}\n      tooltip={copied ? \"copied\" : \"copy\"}\n      className=\"shrink-0\"\n    >\n      {copied ? <CheckIcon /> : <CopyIcon />}\n    </Button>\n  );\n}\n\nexport const CodeSnippet = React.forwardRef<HTMLDivElement, CodeSnippetProps>(\n  (\n    {\n      code,\n      language = \"tsx\",\n      label,\n      note,\n      copyable = true,\n      onCopied,\n      preClassName,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const html = React.useMemo(\n      () =>\n        language !== \"plain\" && hljs.getLanguage(language)\n          ? hljs.highlight(code, { language }).value\n          : null,\n      [code, language],\n    );\n\n    const body = (\n      <pre\n        // A scrolling region has to be reachable by keyboard (WCAG 2.1.1), which\n        // is the documented exception to this rule.\n        // biome-ignore lint/a11y/noNoninteractiveTabindex: see above\n        tabIndex={0}\n        className={cn(\n          \"hljs overflow-x-auto p-4 font-mono text-[0.76rem] leading-[1.7] text-on-sunken\",\n          \"outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent\",\n          preClassName,\n        )}\n      >\n        {html === null ? (\n          <code>{code}</code>\n        ) : (\n          <code\n            // Output of highlight.js over the caller's own code string.\n            // biome-ignore lint/security/noDangerouslySetInnerHtml: see above\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        )}\n      </pre>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative overflow-hidden rounded-xl border border-border bg-sunken/70\",\n          className,\n        )}\n        {...rest}\n      >\n        {label != null ? (\n          <div className=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-b border-border bg-surface px-4 py-2\">\n            <span className=\"font-mono text-[0.6875rem] uppercase tracking-[0.18em] text-muted\">\n              {label}\n            </span>\n            <span className=\"flex items-center gap-3\">\n              {note != null && (\n                <span className=\"font-mono text-[0.7rem] text-muted\">\n                  {note}\n                </span>\n              )}\n              {copyable && (\n                <CopySnippetButton value={code} onCopied={onCopied} />\n              )}\n            </span>\n          </div>\n        ) : (\n          copyable && (\n            <span className=\"absolute right-2 top-2 z-10\">\n              <CopySnippetButton value={code} onCopied={onCopied} />\n            </span>\n          )\n        )}\n        {body}\n      </div>\n    );\n  },\n);\nCodeSnippet.displayName = \"CodeSnippet\";\n"
    }
  ]
}