5a: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"] 5b: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"] 4e:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/language@^6.12.3"}] 4f:["$","li","@codemirror/autocomplete@^6.20.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Fautocomplete","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":"@codemirror/autocomplete@^6.20.1"}]]}]}] 50:["$","li","@lezer/highlight@^1.2.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lezer%2Fhighlight","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":"@lezer/highlight@^1.2.3"}]]}]}] 51:["$","li","@codemirror/lang-javascript@^6.2.5",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-javascript","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":"@codemirror/lang-javascript@^6.2.5"}]]}]}] 52:["$","li","@codemirror/lang-json@^6.0.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-json","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":"@codemirror/lang-json@^6.0.2"}]]}]}] 53:["$","li","@codemirror/lang-python@^6.2.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-python","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":"@codemirror/lang-python@^6.2.1"}]]}]}] 54:["$","li","@codemirror/lang-html@^6.4.11",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-html","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":"@codemirror/lang-html@^6.4.11"}]]}]}] 55:["$","li","@codemirror/lang-css@^6.3.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-css","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":"@codemirror/lang-css@^6.3.1"}]]}]}] 56:["$","li","@codemirror/lang-markdown@^6.5.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-markdown","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":"@codemirror/lang-markdown@^6.5.0"}]]}]}] 57:["$","li","lucide-react@^1.11.0",{"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@^1.11.0"}]]}]}] 58:["$","$L5a",null,{"namespace":"@ilinxa","registryDependencies":["button","dialog","tooltip"]}] 5c:T392d,"use client"; import { useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react"; import { TooltipProvider } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { CodeBlockProvider, } from "./hooks/use-code-block-context"; import { useControllableState } from "./hooks/use-controllable-state"; import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard"; import { resolveLang } from "./lib/lang-resolution"; import { joinTerminalLines } from "./lib/terminal-utils"; import { CodeBlockBodyEdit } from "./parts/code-block-body-edit"; import { CodeBlockBodyTerminal } from "./parts/code-block-body-terminal"; import { CodeBlockBodyView } from "./parts/code-block-body-view"; import { CodeBlockCopyButton } from "./parts/code-block-copy-button"; import { CodeBlockDownloadButton } from "./parts/code-block-download-button"; import { CodeBlockExpandButton } from "./parts/code-block-expand-button"; import { CodeBlockExpandModal } from "./parts/code-block-expand-modal"; import { CodeBlockFooter } from "./parts/code-block-footer"; import { CodeBlockHeader } from "./parts/code-block-header"; import { CodeBlockTrafficLights } from "./parts/code-block-traffic-lights"; import { CodeBlockWrapButton } from "./parts/code-block-wrap-button"; import { DEFAULT_LABELS, type CodeBlockHandle, type CodeBlockProps, } from "./types"; const DEFAULT_THEMES = { light: "github-light", dark: "github-dark-default", } as const; export function CodeBlock(props: CodeBlockProps) { const { value: valueProp, defaultValue, lines, lang: langProp, filename, filenameToLang, mode = "view", readOnly = false, streaming = false, onChange, onSave, tabSize = 4, editorExtensions, header = true, showLanguage = true, showCopy = true, showExpand = false, showWrap = false, showDownload = false, showTrafficLights = false, actions, renderHeader, renderExpandModal, footer, showLineNumbers, wrap: wrapProp, highlightedLines, annotations, renderAnnotation, maxLines, expanded: expandedProp, defaultExpanded, onExpandedChange, onWrapChange, onLineClick, onCopy, onDownload, themes, regexEngine, maxHeight, emptyMessage, className, style, ariaLabel, labels: labelsProp, ref, } = props; // Resolved values const labels = useMemo( () => ({ ...DEFAULT_LABELS, ...(labelsProp ?? {}) }), [labelsProp], ); const themesResolved = themes ?? DEFAULT_THEMES; const lang = useMemo( () => resolveLang(langProp, filename, filenameToLang), [langProp, filename, filenameToLang], ); const lineDerivedValue = useMemo(() => { if (mode === "terminal" && lines) return joinTerminalLines(lines); return undefined; }, [mode, lines]); // Controlled/uncontrolled value for edit mode. const [editValue, setEditValueInternal] = useControllableState({ prop: mode === "edit" ? valueProp : undefined, defaultProp: defaultValue ?? valueProp ?? "", onChange: (next) => onChange?.({ value: next }), }); const displayValue = mode === "edit" ? editValue : lineDerivedValue !== undefined ? lineDerivedValue : (valueProp ?? ""); // Wrap state (controlled or local) const [wrap, setWrapInternal] = useControllableState<"wrap" | "scroll">({ prop: wrapProp, defaultProp: wrapProp ?? "scroll", onChange: (next) => onWrapChange?.({ wrap: next }), }); // Expanded (collapse) state const [expanded, setExpandedInternal] = useControllableState({ prop: expandedProp, defaultProp: defaultExpanded ?? false, onChange: (next) => onExpandedChange?.({ expanded: next }), }); const [modalOpen, setModalOpen] = useState(false); /** * v0.2.0 — set when the user takes the "Reload as view-only" recovery after * a failed CodeMirror mount. Local, not a `mode` mutation: `mode` belongs to * the host. * * Reset whenever `mode` changes, so a host with an Edit/Preview toggle can * get its editor back after a transient failure. Without this the flag is a * one-way trap: the host flips `mode` back to "edit", nothing happens, and * the only escape is remounting via `key` — which nothing documents. * Adjusting state during render (React's documented pattern for deriving * from a changed prop) rather than in an effect, which would be a cascading * -render hazard the compiler lint rejects. */ const [editorFellBack, setEditorFellBack] = useState(false); const [lastMode, setLastMode] = useState(mode); if (lastMode !== mode) { setLastMode(mode); if (editorFellBack) setEditorFellBack(false); } // Line numbers default per mode const resolvedShowLineNumbers = showLineNumbers !== undefined ? showLineNumbers : mode === "edit" ? true : false; // Copy const { copy: copyToClipboard, copied, failed: copyFailed } = useCopyToClipboard(); const handleCopy = useCallback(async () => { const ok = await copyToClipboard(displayValue); if (ok) onCopy?.({ value: displayValue }); return ok; }, [copyToClipboard, displayValue, onCopy]); // Download const handleDownload = useCallback(() => { const resolvedFilename = filename ?? `code.${lang === "plaintext" ? "txt" : lang}`; if (onDownload) { onDownload({ value: displayValue, filename: resolvedFilename }); return; } if (typeof window === "undefined") return; try { const blob = new Blob([displayValue], { type: "text/plain;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = resolvedFilename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } catch { // Soft-fail; download is best-effort. } }, [displayValue, filename, lang, onDownload]); // Imperative handle wired to body refs const rootRef = useRef(null); const editorImperativeRef = useRef<{ focus: () => void; getValue: () => string; scrollToLine: (line: number) => boolean; } | null>(null); /** * v0.2.1 — `scrollToLine` was an empty function body from v0.1.0 while * `meta.ts` advertised it as a working handle method. Calling it did nothing, * silently, for three minor versions. * * Three bodies, three scrollers, one entry point: * edit → CodeMirror owns its scroller; dispatch scrollIntoView. * view → Shiki emits `.line` rows (so does the v0.2.0 plaintext * fallback), inside the `[data-cb-scroller]` div. * terminal → rows carry `data-cb-line`. * * Collapsed blocks expand first. `maxLines` clips by height rather than by * dropping rows, so the target row exists in the DOM but sits under the fade * — scrolling to it without expanding would move the scroller and still show * the user nothing, which is the same silent no-op this method is being * fixed for. */ const scrollToLine = useCallback( (line: number) => { if (mode === "edit" && !editorFellBack) { if (editorImperativeRef.current?.scrollToLine(line)) return; } const root = rootRef.current; if (!root) return; const scroller = root.querySelector("[data-cb-scroller]"); if (!scroller) return; const rows = scroller.querySelectorAll("[data-cb-line], .line"); if (rows.length === 0) return; const index = Math.min(Math.max(Math.trunc(line), 1), rows.length) - 1; const row = rows[index]; if (!row) return; const reveal = () => { if (typeof row.scrollIntoView === "function") { row.scrollIntoView({ block: "center" }); } else { scroller.scrollTop = Math.max( 0, row.offsetTop - scroller.clientHeight / 2, ); } }; const collapsed = maxLines !== undefined && !expanded && index + 1 > maxLines; if (collapsed) { setExpandedInternal(true); if (typeof requestAnimationFrame === "function") { requestAnimationFrame(reveal); return; } } reveal(); }, [mode, editorFellBack, maxLines, expanded, setExpandedInternal], ); const handle = useMemo( () => ({ copy: handleCopy, focus: () => editorImperativeRef.current?.focus(), getValue: () => mode === "edit" ? (editorImperativeRef.current?.getValue() ?? editValue) : displayValue, scrollToLine, }), [handleCopy, displayValue, editValue, mode, scrollToLine], ); useImperativeHandle(ref, () => handle, [handle]); // Context value const ctxValue = useMemo( () => ({ value: displayValue, filename, lang, resolvedLang: lang, mode, streaming, wrap, showLineNumbers: resolvedShowLineNumbers, expanded, setExpanded: setExpandedInternal, setWrap: setWrapInternal, modalOpen, setModalOpen, labels, copy: handleCopy, copied, copyFailed, download: handleDownload, handle, }), [ displayValue, filename, lang, mode, streaming, wrap, resolvedShowLineNumbers, expanded, setExpandedInternal, setWrapInternal, modalOpen, labels, handleCopy, copied, copyFailed, handleDownload, handle, ], ); // Resolved aria-label const resolvedAriaLabel = ariaLabel ?? (filename ? `Code block — ${filename}` : `Code block — ${lang === "plaintext" ? "text" : lang}`); const body = (() => { // v0.2.0 — editor mount can fail (grammar chunk fetch, EditorView throw). // The recovery renders the VIEW body instead, as a local override: `mode` // is the host's prop and a component must not mutate it, so this stays // component-local and resets naturally on remount. if (mode === "edit" && !editorFellBack) { return ( setEditorFellBack(true)} value={editValue} lang={lang} readOnly={readOnly} wrap={wrap} tabSize={tabSize} showLineNumbers={resolvedShowLineNumbers} onChange={(v) => setEditValueInternal(v)} onSave={onSave ? (v) => onSave({ value: v }) : undefined} editorExtensions={editorExtensions} maxHeight={maxHeight} registerImperative={(h) => { editorImperativeRef.current = h; }} /> ); } if (mode === "terminal") { return ( ); } return ( ); })(); // Header — either the default orchestrator or the renderHeader slot. const headerNode = (() => { if (header === false) return null; if (renderHeader) { const headerCtx = { filename, lang, copyButton: showCopy ? : null, expandButton: showExpand ? : null, wrapButton: showWrap ? : null, downloadButton: showDownload ? : null, trafficLights: showTrafficLights ? : null, actions: actions ?? null, }; return <>{renderHeader(headerCtx)}; } return ( ); })(); // Modal body — same instance with expand off + maxLines undefined. // `ref={undefined}` (v0.1.2, review 5.10): `{...props}` would re-pass the // consumer's `ref` to this inner clone — the imperative handle would // re-target the modal instance and go stale when the modal closes. The // outer instance stays the sole handle owner. const expandedInner = ( ); const modalNode = (() => { if (!showExpand) return null; if (renderExpandModal) { return renderExpandModal({ open: modalOpen, onOpenChange: setModalOpen, code: expandedInner, }); } return ( {expandedInner} ); })(); // No delayDuration — Radix-only prop; Base UI's TooltipProvider rejects it (F-cross-13). return (

{headerNode} {body} {footer ? {footer} : null}

{modalNode} ); } CodeBlock.displayName = "CodeBlock"; 5d:T548,export { CodeBlock } from "./code-block"; export { CodeBlockHeader } from "./parts/code-block-header"; export { CodeBlockFilename } from "./parts/code-block-filename"; export { CodeBlockLangPill } from "./parts/code-block-lang-pill"; export { CodeBlockCopyButton } from "./parts/code-block-copy-button"; export { CodeBlockExpandButton } from "./parts/code-block-expand-button"; export { CodeBlockWrapButton } from "./parts/code-block-wrap-button"; export { CodeBlockDownloadButton } from "./parts/code-block-download-button"; export { CodeBlockTrafficLights } from "./parts/code-block-traffic-lights"; export { useCodeBlock } from "./hooks/use-code-block-context"; export { resolveLang, FILENAME_TO_LANG_MAP } from "./lib/lang-resolution"; export type { CodeBlockProps, CodeBlockServerProps, CodeBlockHandle, CodeBlockMode, CodeBlockRegexEngine, CodeBlockWrap, CodeBlockAnnotation, CodeBlockAnnotationType, CodeBlockLineRange, CodeBlockLabels, CodeBlockThemes, CodeBlockChangeArgs, CodeBlockCopyArgs, CodeBlockSaveArgs, CodeBlockDownloadArgs, CodeBlockLineClickArgs, CodeBlockExpandedChangeArgs, CodeBlockWrapChangeArgs, CodeBlockFilenameToLangArgs, CodeBlockHeaderContext, CodeBlockAnnotationRenderArgs, CodeBlockExpandModalContext, ShikiThemeObject, TerminalLine, TerminalLineKind, } from "./types"; 5e:T2300,import type { CSSProperties, ReactNode, Ref } from "react"; import type { Extension } from "@codemirror/state"; // ─── Core enums ────────────────────────────────────────────────────────────── export type CodeBlockMode = "view" | "edit" | "terminal"; /** * Regex engine for the Shiki highlighter (v0.2.0). * * `"oniguruma"` is WebAssembly-backed and requires `'wasm-unsafe-eval'` in the * host's CSP `script-src`; `"javascript"` needs no wasm at all. */ export type CodeBlockRegexEngine = "oniguruma" | "javascript"; export type CodeBlockWrap = "wrap" | "scroll"; export type CodeBlockAnnotationType = "info" | "warn" | "error"; export type TerminalLineKind = "input" | "output" | "error"; // ─── Value-shaped types ────────────────────────────────────────────────────── export interface CodeBlockLineRange { from: number; to: number; } export interface TerminalLine { kind: TerminalLineKind; text: string; } export interface CodeBlockAnnotation { line: number; type: CodeBlockAnnotationType; message: string; } export type ShikiThemeObject = { name: string; type: "light" | "dark"; [key: string]: unknown; }; export interface CodeBlockThemes { light: string | ShikiThemeObject; dark: string | ShikiThemeObject; } // ─── Imperative handle ─────────────────────────────────────────────────────── export interface CodeBlockHandle { copy: () => Promise; focus: () => void; getValue: () => string; scrollToLine: (line: number) => void; } // ─── Callback arg shapes (object-shape per F-cross-12) ─────────────────────── export interface CodeBlockChangeArgs { value: string; } export interface CodeBlockCopyArgs { value: string; } export interface CodeBlockSaveArgs { value: string; } export interface CodeBlockDownloadArgs { value: string; filename: string; } export interface CodeBlockLineClickArgs { line: number; } export interface CodeBlockExpandedChangeArgs { expanded: boolean; } export interface CodeBlockWrapChangeArgs { wrap: CodeBlockWrap; } export interface CodeBlockFilenameToLangArgs { filename: string; } // ─── Slot contexts ─────────────────────────────────────────────────────────── export interface CodeBlockHeaderContext { filename: string | undefined; lang: string; /** `null` when `showCopy` is false (v0.1.2 — widened; was an unsound `null as never`). */ copyButton: ReactNode | null; expandButton: ReactNode | null; wrapButton: ReactNode | null; downloadButton: ReactNode | null; trafficLights: ReactNode | null; actions: ReactNode | null; } export interface CodeBlockAnnotationRenderArgs { annotation: CodeBlockAnnotation; defaultMarker: ReactNode; } export interface CodeBlockExpandModalContext { open: boolean; onOpenChange: (next: boolean) => void; code: ReactNode; } // ─── i18n labels ───────────────────────────────────────────────────────────── export type CodeBlockLabels = Partial<{ copy: string; copied: string; copyFailed: string; expand: string; wrap: string; download: string; showMore: string; showLess: string; streamingCursor: string; closeModal: string; emptyDefault: string; /** Shown when CodeMirror fails to initialise in edit mode (v0.2.0). */ editorFailed: string; /** Recovery control rendered beside `editorFailed` (v0.2.0). */ reloadAsViewOnly: string; }>; export const DEFAULT_LABELS: Required = { copy: "Copy code", copied: "Copied", copyFailed: "Copy failed — select and copy manually", expand: "Expand", wrap: "Toggle wrap", download: "Download", showMore: "Show all", showLess: "Show less", streamingCursor: "Streaming", closeModal: "Close", emptyDefault: "", editorFailed: "The editor could not be loaded.", reloadAsViewOnly: "Reload as view-only", }; // ─── Top-level props (client variant) ──────────────────────────────────────── export interface CodeBlockProps { // Content value?: string; lines?: TerminalLine[]; defaultValue?: string; // Language lang?: string; filename?: string; filenameToLang?: (args: CodeBlockFilenameToLangArgs) => string | undefined; // Mode mode?: CodeBlockMode; readOnly?: boolean; streaming?: boolean; // Edit onChange?: (args: CodeBlockChangeArgs) => void; onSave?: (args: CodeBlockSaveArgs) => void; /** * Editor tab size. INITIAL-ONLY (v0.1.2): applied when the CodeMirror * editor is created; later changes are not re-applied. Remount the block * (React `key`) to change it after mount. */ tabSize?: number; /** * Extra CodeMirror extensions for edit mode. INITIAL-ONLY (v0.1.2): the * array captured at editor creation is baked into the EditorState; identity * or content changes after mount are ignored. Remount (React `key`) to swap. */ editorExtensions?: Extension[]; // Header header?: boolean; showLanguage?: boolean; showCopy?: boolean; showExpand?: boolean; showWrap?: boolean; showDownload?: boolean; showTrafficLights?: boolean; actions?: ReactNode; renderHeader?: (ctx: CodeBlockHeaderContext) => ReactNode; renderExpandModal?: (ctx: CodeBlockExpandModalContext) => ReactNode; // Footer footer?: ReactNode; // Body showLineNumbers?: boolean; wrap?: CodeBlockWrap; highlightedLines?: Array; annotations?: CodeBlockAnnotation[]; renderAnnotation?: (args: CodeBlockAnnotationRenderArgs) => ReactNode; // Collapse maxLines?: number; expanded?: boolean; defaultExpanded?: boolean; onExpandedChange?: (args: CodeBlockExpandedChangeArgs) => void; // Wrap toggle onWrapChange?: (args: CodeBlockWrapChangeArgs) => void; // Line click onLineClick?: (args: CodeBlockLineClickArgs) => void; // Copy + download onCopy?: (args: CodeBlockCopyArgs) => void; onDownload?: (args: CodeBlockDownloadArgs) => void; // Theme themes?: CodeBlockThemes; /** * Regex engine backing the view-mode highlighter (v0.2.0). * * - `"oniguruma"` (default) — Shiki's WebAssembly engine. Widest grammar * support, and what every 0.1.x consumer already gets. * - `"javascript"` — pure-JS engine, **no WebAssembly**. Use it when the host * serves a strict `Content-Security-Policy` without `'wasm-unsafe-eval'`, * where the wasm engine cannot compile at all. Slightly narrower grammar * coverage is the trade. * * Highlighters are cached per engine, so mixing both on one page is safe. */ regexEngine?: CodeBlockRegexEngine; // Sizing maxHeight?: number | string; // Empty emptyMessage?: string; // Polymorphic className?: string; style?: CSSProperties; // ARIA ariaLabel?: string; // i18n labels?: CodeBlockLabels; // Imperative handle ref?: Ref; } // ─── RSC variant props (typed narrowing) ───────────────────────────────────── /** * RSC-variant props — **the `/server` entry point does not exist.** * * @deprecated Since v0.2.1. This type shipped in v0.1.0 as a scaffold so * consumers could "prepare for the v0.2.0 RSC export without breaking * changes". v0.2.0 shipped without that export, and the type spent three * minor versions describing a component nobody could import: this package * ships no server entry module and the registry item lists no server file, so * `@ilinxa/code-block/server` resolves to nothing. * * It is kept (rather than deleted) because it is importable today and removing * it would break any consumer using it as an annotation — but it narrows props * for a component that is not shipped. Use {@link CodeBlockProps}; the client * component server-renders its first paint correctly under Next.js. * * If the zero-client-Shiki variant is ever built, it is a feature behind its * own planning gate, and this type becomes real again at that point. */ export type CodeBlockServerProps = Omit< CodeBlockProps, | "mode" | "readOnly" | "streaming" | "editorExtensions" | "onChange" | "onSave" | "tabSize" | "onWrapChange" | "showWrap" | "expanded" | "defaultExpanded" | "onExpandedChange" | "ref" > & { mode?: "view" | "terminal"; }; 5f:T7eb,"use client"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import { useCodeBlock } from "../hooks/use-code-block-context"; import { CodeBlockCopyButton } from "./code-block-copy-button"; import { CodeBlockDownloadButton } from "./code-block-download-button"; import { CodeBlockExpandButton } from "./code-block-expand-button"; import { CodeBlockFilename } from "./code-block-filename"; import { CodeBlockLangPill } from "./code-block-lang-pill"; import { CodeBlockTrafficLights } from "./code-block-traffic-lights"; import { CodeBlockWrapButton } from "./code-block-wrap-button"; export interface CodeBlockHeaderProps { showLanguage?: boolean; showCopy?: boolean; showExpand?: boolean; showWrap?: boolean; showDownload?: boolean; showTrafficLights?: boolean; actions?: ReactNode; className?: string; } export function CodeBlockHeader({ showLanguage = true, showCopy = true, showExpand = false, showWrap = false, showDownload = false, showTrafficLights = false, actions, className, }: CodeBlockHeaderProps) { const { filename, resolvedLang } = useCodeBlock(); return (

{showTrafficLights ? : null} {filename && showLanguage && resolvedLang && resolvedLang !== "plaintext" ? ( ) : null} {showLanguage ? : null}

{actions ?

{actions}

: null} {showWrap ? : null} {showDownload ? : null} {showExpand ? : null} {showCopy ? : null}

); } 60:T4c5,"use client"; import { Check, Copy, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { useCodeBlock } from "../hooks/use-code-block-context"; export interface CodeBlockCopyButtonProps { className?: string; } export function CodeBlockCopyButton({ className }: CodeBlockCopyButtonProps) { const { copy, copied, copyFailed, labels } = useCodeBlock(); const Icon = copyFailed ? X : copied ? Check : Copy; const label = copyFailed ? labels.copyFailed : copied ? labels.copied : labels.copy; return ( <> {/* Screen-reader-only status. role="status" with aria-live="polite" so the SR announces "Copied" after the icon swap. */} {copied ? labels.copied : copyFailed ? labels.copyFailed : ""} ); } 61:T633,"use client"; import { ChevronDown, ChevronUp } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { useCodeBlock } from "../hooks/use-code-block-context"; interface CodeBlockCollapseFadeProps { hiddenLineCount: number; className?: string; } export function CodeBlockCollapseFade({ hiddenLineCount, className, }: CodeBlockCollapseFadeProps) { const { expanded, setExpanded, labels } = useCodeBlock(); if (expanded) { return (

); } return (

); } 62:T695,"use client"; import { CircleAlert, CircleX, Info } from "lucide-react"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import type { CodeBlockAnnotation, CodeBlockAnnotationRenderArgs, } from "../types"; interface CodeBlockAnnotationMarkerProps { annotation: CodeBlockAnnotation; renderAnnotation?: (args: CodeBlockAnnotationRenderArgs) => React.ReactNode; } const ICON_BY_TYPE = { info: Info, warn: CircleAlert, error: CircleX, } as const; const COLOR_BY_TYPE = { info: "text-blue-500 dark:text-blue-400", warn: "text-amber-500 dark:text-amber-400", error: "text-destructive", } as const; export function CodeBlockAnnotationMarker({ annotation, renderAnnotation, }: CodeBlockAnnotationMarkerProps) { const Icon = ICON_BY_TYPE[annotation.type]; const colorClass = COLOR_BY_TYPE[annotation.type]; // F-cross-13: no `asChild` — the trigger IS the marker button. const defaultMarker = ( {annotation.message} ); if (renderAnnotation) { return <>{renderAnnotation({ annotation, defaultMarker })}; } return defaultMarker; } 63:T45a,"use client"; import { cn } from "@/lib/utils"; import { gutterWidth } from "../lib/line-utils"; interface CodeBlockLineNumbersProps { totalLines: number; highlighted?: Set; onLineClick?: (line: number) => void; className?: string; } export function CodeBlockLineNumbers({ totalLines, highlighted, onLineClick, className, }: CodeBlockLineNumbersProps) { const width = gutterWidth(totalLines); const lines = Array.from({ length: totalLines }, (_, i) => i + 1); return ( ); } 64:T1d63,"use client"; import { useMemo } from "react"; import { cn } from "@/lib/utils"; import { useShikiHighlighter } from "../hooks/use-shiki-highlighter"; import { lineCount, rangeToLines, splitToLines } from "../lib/line-utils"; import type { CodeBlockAnnotation, CodeBlockAnnotationRenderArgs, CodeBlockLineRange, CodeBlockLineClickArgs, CodeBlockRegexEngine, CodeBlockThemes, } from "../types"; import { CodeBlockAnnotationMarker } from "./code-block-annotation-marker"; import { CodeBlockCollapseFade } from "./code-block-collapse-fade"; import { CodeBlockEmpty } from "./code-block-empty"; import { CodeBlockLineNumbers } from "./code-block-line-numbers"; import { CodeBlockStreamingCursor } from "./code-block-streaming-cursor"; interface CodeBlockBodyViewProps { value: string; lang: string; themes: CodeBlockThemes | undefined; highlightedLines?: Array; annotations?: CodeBlockAnnotation[]; renderAnnotation?: (args: CodeBlockAnnotationRenderArgs) => React.ReactNode; showLineNumbers: boolean; wrap: "wrap" | "scroll"; streaming: boolean; expanded: boolean; maxLines: number | undefined; emptyMessage?: string; maxHeight?: number | string; onLineClick?: (args: CodeBlockLineClickArgs) => void; /** v0.2.0 — see `CodeBlockProps.regexEngine`. */ regexEngine?: CodeBlockRegexEngine; } export function CodeBlockBodyView({ value, lang, themes, highlightedLines, annotations, renderAnnotation, showLineNumbers, wrap, streaming, expanded, maxLines, emptyMessage, maxHeight, onLineClick, regexEngine, }: CodeBlockBodyViewProps) { const { html, failed } = useShikiHighlighter({ value, lang, themes, highlightedLines, streaming, regexEngine, }); const total = lineCount(value); const showCollapse = maxLines !== undefined && total > maxLines && !expanded; const hiddenCount = showCollapse ? total - maxLines : 0; const visibleHtml = useMemo(() => { if (!showCollapse) return html; // Naive but correct: cap the rendered

 visual via max-height.
    // Slicing tokenized HTML by line is unreliable across grammars; we keep
    // the full HTML and clip visually.
    return html;
  }, [html, showCollapse]);

  const highlightedSet = useMemo(() => rangeToLines(highlightedLines), [highlightedLines]);
  const annotationByLine = useMemo(() => {
    const m = new Map();
    for (const a of annotations ?? []) {
      const list = m.get(a.line) ?? [];
      list.push(a);
      m.set(a.line, list);
    }
    return m;
  }, [annotations]);

  if (value === "" && !streaming) {
    return ;
  }

  const clipHeight = showCollapse
    ? `calc(${maxLines} * 1.6em + 2rem)`
    : maxHeight !== undefined
      ? typeof maxHeight === "number"
        ? `${maxHeight}px`
        : maxHeight
      : undefined;

  const lines = splitToLines(value);

  return (
    
      {showLineNumbers || (annotations && annotations.length > 0) ? (
        
          {showLineNumbers ? (
             onLineClick({ line }) : undefined}
            />
          ) : null}
          {annotations && annotations.length > 0 ? (
            
              {Array.from(annotationByLine.entries()).map(([line, items]) => (
                
                  {items.map((a, i) => (
                    
                  ))}
                
              ))}
            
          ) : null}
        
      ) : null}

      
        {visibleHtml ? (
          
        ) : (
          /*
           * v0.2.0 — soft-failure for the highlighter itself.
           *
           * `html` is "" both before the first tokenize AND forever after the
           * engine gives up (strict CSP with no `wasm-unsafe-eval`, failed
           * grammar chunk). Rendering nothing in that state produced an empty
           * panel with no message and nothing in the console — the one
           * documented failure mode that had no fallback.
           *
           * Showing the raw code covers both cases: it is the pre-highlight
           * paint AND the permanent degradation. Deliberately NOT gated on
           * `failed`, because "still loading" should show the code too.
           *
           * Structure mirrors Shiki's own output (block-level lines at the
           * same 1.6em rhythm) so the line-number gutter stays aligned.
           */
                      
              {lines.map((line, i) => (
                
                  {line === "" ? " " : line}
                
              ))}
            
          
        )}
        {streaming ?  : null}
      

      {showCollapse ?  : null}
    
  );
}
65:Tbd1,"use client";
import { useEffect } from "react";
import type { Extension } from "@codemirror/state";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useCodeMirror } from "../hooks/use-code-mirror";
import { CODEMIRROR_THEME_CSS } from "../lib/codemirror-theme";
import type { CodeBlockLabels } from "../types";

interface CodeBlockBodyEditProps {
  value: string;
  lang: string;
  readOnly: boolean;
  wrap: "wrap" | "scroll";
  tabSize: number;
  showLineNumbers: boolean;
  onChange?: (value: string) => void;
  onSave?: (value: string) => void;
  editorExtensions?: Extension[];
  maxHeight?: number | string;
  registerImperative?: (handle: {
    focus: () => void;
    getValue: () => string;
    scrollToLine: (line: number) => boolean;
  }) => void;
  /** Resolved labels (defaults merged) — needed for the init-failure branch. */
  labels: Required;
  /**
   * Invoked when the user takes the "Reload as view-only" recovery after a
   * failed editor mount. Omit it and the error is still shown, just without
   * the recovery control.
   */
  onFallbackToView?: () => void;
}

export function CodeBlockBodyEdit({
  value,
  lang,
  readOnly,
  wrap,
  tabSize,
  showLineNumbers,
  onChange,
  onSave,
  editorExtensions,
  maxHeight,
  registerImperative,
  labels,
  onFallbackToView,
}: CodeBlockBodyEditProps) {
  const { containerRef, focus, getValue, scrollToLine, error } = useCodeMirror({
    value,
    lang,
    readOnly,
    wrap,
    tabSize,
    showLineNumbers,
    onChange,
    onSave,
    editorExtensions,
  });

  useEffect(() => {
    registerImperative?.({ focus, getValue, scrollToLine });
  }, [registerImperative, focus, getValue, scrollToLine]);

  const heightStyle =
    maxHeight !== undefined
      ? typeof maxHeight === "number"
        ? `${maxHeight}px`
        : maxHeight
      : undefined;

  /*
   * v0.2.0 — the soft-failure policy always documented an inline error plus a
   * "Reload as view-only" recovery here; nothing implemented it, and a failed
   * editor mount was an unhandled rejection over a blank box. `onFallbackToView`
   * is what actually swaps the body, because `mode` is a plain prop the host
   * owns — the component must not try to mutate it.
   */
  if (error) {
    return (
      
        {labels.editorFailed}
        {onFallbackToView ? (
          
        ) : null}
      
    );
  }

  return (
    <>