50: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"] 51: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"] 52:T1885,"use client"; import { SiJavascript, SiPython, SiTypescript, } from "@icons-pack/react-simple-icons"; import { codeToHtml, type ShikiTransformer } from "shiki"; import { Check, Copy, Terminal } from "lucide-react"; import { useEffect, useMemo, useState } from "react"; import { cn } from "@/lib/sona-utils"; export interface CodeBlockProps { /** Source code to render. */ code: string; /** Language identifier used for syntax highlighting. @default "tsx" */ language?: string; /** Optional filename shown in the header. @default undefined */ filename?: string; /** Shows a numbered gutter. @default false */ showLineNumbers?: boolean; /** Lines to emphasize, as numbers or a comma-separated range. @default undefined */ highlightLines?: number[] | string; /** Removes leading diff markers and styles added or removed lines. @default false */ showDiff?: boolean; /** Lines to keep visually focused. @default undefined */ focusLines?: number[] | string; /** Additional classes for the code block. @default undefined */ className?: string; } function parseLines(value: number[] | string | undefined) { if (!value) return new Set(); if (Array.isArray(value)) return new Set(value); const lines = new Set(); value.split(",").forEach((part) => { const [start, end] = part.split("-").map(Number); if (!Number.isFinite(start)) return; for (let line = start; line <= (Number.isFinite(end) ? end : start); line++) lines.add(line); }); return lines; } function languageIcon(language: string) { const normalized = language.toLowerCase(); if (["ts", "tsx", "typescript"].includes(normalized)) return ; if (["js", "jsx", "javascript"].includes(normalized)) return ; if (["py", "python"].includes(normalized)) return ; if (["bash", "sh", "shell"].includes(normalized)) return ; return null; } function createLineTransformers( code: string, options: Pick, ): ShikiTransformer[] { const highlighted = parseLines(options.highlightLines); const focused = parseLines(options.focusLines); const originalLines = code.split("\n"); return [ { name: "code-block-lines", preprocess(source) { return options.showDiff ? source.split("\n").map((line) => line.replace(/^[-+ ]/, "")).join("\n") : source; }, line(node, lineNumber) { node.properties["data-line-number"] = String(lineNumber); if (highlighted.has(lineNumber)) node.properties["data-highlighted"] = "true"; if (focused.has(lineNumber)) node.properties["data-focused"] = "true"; if (options.showDiff) { const original = originalLines[lineNumber - 1] ?? ""; if (original.startsWith("+")) node.properties["data-diff"] = "added"; if (original.startsWith("-")) node.properties["data-diff"] = "removed"; } }, }, ]; } export default function CodeBlock({ code, language = "tsx", filename, showLineNumbers = false, highlightLines, showDiff = false, focusLines, className, }: CodeBlockProps) { const [copied, setCopied] = useState(false); const emphasized = parseLines(highlightLines); const focused = parseLines(focusLines); const lines = useMemo(() => code.split("\n"), [code]); const source = useMemo(() => { const source = showDiff ? lines.map((line) => line.replace(/^[-+ ]/, "")).join("\n") : code; return source; }, [code, lines, showDiff]); const [html, setHtml] = useState(""); useEffect(() => { let active = true; void codeToHtml(source, { lang: language, themes: { light: "github-light", dark: "github-dark" }, defaultColor: "light-dark()", transformers: createLineTransformers(code, { highlightLines, focusLines, showDiff }) }).then((result) => { if (active) setHtml(result.replace(/^]*>

/, "").replace(/<\/code><\/pre>$/, ""));
    });
    return () => { active = false; };
  }, [code, focusLines, highlightLines, language, showDiff, source]);

  async function copyCode() {
    await navigator.clipboard.writeText(
      showDiff
        ? lines.map((line) => line.replace(/^[-+ ]/, "")).join("\n")
        : code,
    );
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1400);
  }

  return (
    
      {(filename || language) && (
        
          
            {languageIcon(language)}
            {filename ?? language}
          
          
        
      )}
      
        
          {showLineNumbers && (
            
              {lines.map((_, i) => (
                {i + 1}
              ))}
            
          )}
          
        
      
    
  );
}
4f:["$","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"}]]}]}],["$","li","@icons-pack/react-simple-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40icons-pack%2Freact-simple-icons","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":"@icons-pack/react-simple-icons"}]]}]}]]}],["$","$L50",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/sonaui/code-block/code-block.tsx","content":"$52","type":"registry:ui","target":"components/ui/code-block/code-block.tsx"}],"className":"h-[70svh] min-h-80"}]]}]