4e: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"] 4f:I[544296,["/_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"],"ItemStyles"] 50:I[34002,["/_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"],"CodeEditor"] 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:T3338,// Hairline UI · code-block · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { ChevronDown, Copy, CornerDownLeft, WrapText } from "lucide-react"; import { StatusButton, type ActionStatus } from "./status-button"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * CODE BLOCK: code in an answer, as it streams and after * * streaming lines arrive with a caret, already highlighted * complete language and file name, Copy and wrap; wrapping * eases the block to its new height * copied the copy icon blurs into a check that draws * itself while "Copy" morphs to "Copied" * folded long code shows its start and "Show 42 more * lines"; it opens smoothly, the fade dissolves and * the label morphs to "Show less" * apply optional: Apply → Applying → Applied, one button * that settles into a quiet receipt * * A light highlighter is built in (keywords, strings, comments, * numbers, calls) so it works mid-stream with no dependencies. * ───────────────────────────────────────────────────────── */ export interface CodeBlockProps extends React.HTMLAttributes { code: string; /** e.g. "ts", "python", "bash"; shown in the header and used for comments. */ language?: string; filename?: string; /** True while the code is still arriving. */ streaming?: boolean; lineNumbers?: boolean; /** Fold code longer than this many lines (0 never folds). */ collapseAfter?: number; /** Shows Apply; return a promise to show progress. */ onApply?: () => void | Promise; applyLabel?: string; /** Turn the built-in highlighting off, e.g. for plain output. */ highlight?: boolean; } const LINE = 21; const PAD = 12; const EASE = "cubic-bezier(0.23,1,0.32,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const COPY_LABELS = { idle: "Copy", success: "Copied", error: "Couldn’t copy" }; const ACTION = `cursor-pointer inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-3.5 ${FOCUS}`; // A GitHub-like palette for light and dark themes. const TONE = { keyword: "text-[#cf222e] dark:text-[#ff7b72]", string: "text-[#0a3069] dark:text-[#a5d6ff]", comment: "italic text-[#6e7781] dark:text-[#8b949e]", number: "text-[#0550ae] dark:text-[#79c0ff]", call: "text-[#8250df] dark:text-[#d2a8ff]", }; const KEYWORDS = "const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|import|from|export|default|async|await|new|class|extends|implements|type|interface|enum|true|false|null|undefined|this|try|catch|finally|throw|yield|in|of|typeof|instanceof|as|def|elif|lambda|None|True|False|pass|with|raise|except|and|or|not|is|self|fn|pub|use|mut|impl|struct|match|func|package|go|echo|then|fi|done|esac|local|public|private|protected|static|void|int|string|bool|select|where|insert|update|delete|create|table"; const HASH_COMMENTS = /^(py|python|sh|bash|shell|zsh|yaml|yml|rb|ruby|toml|dockerfile|r|perl)$/i; function tokenize(line: string, hashComments: boolean): React.ReactNode[] { const comment = hashComments ? String.raw`#.*$|\/\/.*$` : String.raw`\/\/.*$|\/\*.*?\*\/|`; const re = new RegExp( String.raw`(${comment})|("(?:[^"\\]|\\.)*"?|'(?:[^'\\]|\\.)*'?|` + "`(?:[^`\\\\]|\\\\.)*`?" + String.raw`)|(\b\d[\d_]*(?:\.\d+)?\b)|\b(${KEYWORDS})\b|([A-Za-z_$][\w$]*)(?=\()`, "g" ); const out: React.ReactNode[] = []; let last = 0; let m: RegExpExecArray | null; while ((m = re.exec(line))) { if (m.index > last) out.push(line.slice(last, m.index)); const tone = m[1] ? TONE.comment : m[2] ? TONE.string : m[3] ? TONE.number : m[4] ? TONE.keyword : TONE.call; out.push( {m[0]} ); last = m.index + m[0].length; if (m[0].length === 0) re.lastIndex++; } if (last < line.length) out.push(line.slice(last)); return out; } const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); export function CodeBlock({ code, language, filename, streaming = false, lineNumbers = true, collapseAfter = 18, onApply, applyLabel = "Apply", highlight = true, className = "", ...props }: CodeBlockProps) { const reduced = useReducedMotion(); const [copy, setCopy] = React.useState("idle"); const [wrap, setWrap] = React.useState(false); // Code you watched stream in stays open; only code that arrives complete (e.g. history) starts folded. const [expanded, setExpanded] = React.useState(streaming); const [apply, setApply] = React.useState("idle"); // New code (a regenerated answer) can be applied again: "Applied" or "Try again" goes back to Apply. const [appliedCode, setAppliedCode] = React.useState(code); if (appliedCode !== code) { setAppliedCode(code); if (apply === "success" || apply === "error") setApply("idle"); } const [fullHeight, setFullHeight] = React.useState(0); const bodyRef = React.useRef(null); const wrapFrom = React.useRef(null); const lines = React.useMemo(() => code.replace(/\n$/, "").split("\n"), [code]); const hash = HASH_COMMENTS.test(language ?? ""); const rendered = React.useMemo( () => lines.map((line) => (highlight ? tokenize(line, hash) : [line])), [lines, highlight, hash] ); const foldable = !streaming && collapseAfter > 0 && lines.length > collapseAfter + 3; const folded = foldable && !expanded; const hidden = lines.length - collapseAfter; React.useLayoutEffect(() => { const body = bodyRef.current; if (!body) return; const measure = () => setFullHeight((h) => (h === body.scrollHeight ? h : body.scrollHeight)); measure(); const observer = new ResizeObserver(measure); observer.observe(body.firstElementChild as Element); return () => observer.disconnect(); }, [wrap]); // Wrapping changes how tall the code is: ease the block there instead of jumping. (Folded code has its own transition.) React.useLayoutEffect(() => { const body = bodyRef.current; const from = wrapFrom.current; wrapFrom.current = null; if (!body || from === null || reduced || foldable) return; const to = body.offsetHeight; if (Math.abs(to - from) > 1) body.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration: 460, easing: EASE }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [wrap, reduced]); // A blocked clipboard says so, then quietly goes back to Copy. React.useEffect(() => { if (copy !== "error") return; const timer = window.setTimeout(() => setCopy("idle"), 2400); return () => window.clearTimeout(timer); }, [copy]); const copyCode = async () => { try { await navigator.clipboard.writeText(code); setCopy("success"); } catch { setCopy("error"); } }; const runApply = async () => { if (!onApply || apply === "pending" || apply === "success") return; setApply("pending"); try { await onApply(); setApply("success"); } catch { setApply("error"); } }; const gutter = String(lines.length).length; return (

{filename ? ( <> {filename} {language && {language}} ) : ( language ?? "code" )} } status={copy} labels={COPY_LABELS} aria-label="Copy code" onClick={copyCode} onReset={() => setCopy("idle")} resetAfter={1600} /> {onApply && ( // Waits, faded, until the code has finished arriving. } status={apply} labels={{ idle: applyLabel, pending: "Applying", success: "Applied", error: "Try again" }} disabled={streaming} onClick={runApply} className="disabled:pointer-events-none" /> )}

            
              {rendered.map((tokens, i) => (
                
                  {lineNumbers && (
                    
                      {i + 1}
                    
                  )}
                  
                    {tokens.length ? tokens : " "}
                    {streaming && i === rendered.length - 1 && (
                      
                    )}
                  
                
              ))}

{/* The fade over folded code dissolves as it opens; the bar under it never moves. */} {foldable && ( {foldable && (

)}

); } 4d:["$","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","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/status-button.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L4f",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L50",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-blink {\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/code-block.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]