4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T29fb,"use client"; import * as React from "react"; import Prism from "prismjs"; import "prismjs/components/prism-typescript"; import "prismjs/components/prism-jsx"; import "prismjs/components/prism-tsx"; import "prismjs/components/prism-json"; import "prismjs/components/prism-bash"; import { Button, type ButtonProps } from "@/components/ui/button"; import { Meta } from "@/components/ui/typography"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { AnimatedIcon } from "@/components/ui/animated-icon"; import { Icon } from "@/components/ui/icon"; import { PatternBackground, type PatternBackgroundProps, } from "@/components/ui/pattern-background"; import { cn } from "@/lib/utils"; /** The fallback stays inside the control's tree, including a modal focus scope. */ function copyWithSelection(code: string, trigger: HTMLButtonElement): boolean { const document = trigger.ownerDocument; const active = document.activeElement as HTMLElement | null; const selection = document.getSelection(); const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i).cloneRange(), ) : []; const field = active?.tagName === "INPUT" || active?.tagName === "TEXTAREA" ? (active as HTMLInputElement | HTMLTextAreaElement) : null; const fieldSelection = field && field.selectionStart !== null ? ([ field.selectionStart, field.selectionEnd, field.selectionDirection ?? undefined, ] as const) : null; const view = document.defaultView; const scroll = view ? { x: view.scrollX, y: view.scrollY } : null; const textarea = document.createElement("textarea"); textarea.value = code; textarea.readOnly = true; textarea.tabIndex = -1; textarea.setAttribute("aria-hidden", "true"); textarea.setAttribute("data-copy-fallback", ""); textarea.style.cssText = "position:fixed;inset-block-start:0;inset-inline-start:-9999px;width:1px;height:1px;padding:0;border:0;font-size:16px;opacity:0;"; (trigger.parentElement ?? document.body).append(textarea); try { textarea.focus({ preventScroll: true }); textarea.select(); textarea.setSelectionRange(0, code.length); return ( typeof document.execCommand === "function" && document.execCommand("copy") ); } catch { return false; } finally { textarea.remove(); if (active?.isConnected) active.focus({ preventScroll: true }); if (selection) { selection.removeAllRanges(); for (const range of ranges) selection.addRange(range); } // Document selection restoration can reset a focused input's native range. if (field?.isConnected && fieldSelection) { field.setSelectionRange(...fieldSelection); } if (view && scroll) view.scrollTo(scroll.x, scroll.y); } } async function copyText( code: string, trigger: HTMLButtonElement, ): Promise { try { const clipboard = trigger.ownerDocument.defaultView?.navigator.clipboard; if (clipboard?.writeText) { await clipboard.writeText(code); return true; } } catch { // An unavailable or denied Clipboard API can still allow a user-initiated copy. } return copyWithSelection(code, trigger); } export type CopyButtonProps = ButtonProps & { code: string; /** Reports the real copy outcome without exposing copied content. */ onCopyResult?: (result: "success" | "failure") => void; }; /** Copies exactly `code`; success is reported only after a copy mechanism succeeds. */ export function CopyButton({ code, children, className, size = "sm", variant = "ghost", asChild = false, disabled, onClick, onCopyResult, ...props }: CopyButtonProps) { const [result, setResult] = React.useState<{ code: string; state: "copying" | "copied" | "error"; } | null>(null); const pending = React.useRef(false); const statusId = React.useId(); const state = result?.code === code ? result.state : "idle"; const icon = ( ); const content = asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? ( React.cloneElement(children, {}, icon, children.props.children) ) : ( <> {icon} {children ?? "Copy"} ); return ( {state === "copied" ? "Copied to clipboard." : state === "error" ? "Copy unavailable. Select the text and copy it manually." : state === "copying" ? "Copying to clipboard." : ""} ); } export type CodeBlockProps = Omit< React.ComponentProps<"figure">, "children" | "title" > & { code: string; language?: string; title?: string; wrap?: boolean; copyLabel?: string; /** Reports the real copy outcome without exposing copied content. */ onCopyResult?: CopyButtonProps["onCopyResult"]; /** Terminal adds window chrome and a decorative prompt; copied text stays exact. */ variant?: "code" | "terminal"; /** Use a containing viewer's header and copy action instead of nesting chrome. */ embedded?: boolean; /** Plain by default to keep source text clear. Decorative patterns are opt-in. */ pattern?: PatternBackgroundProps["variant"]; }; // Render tokens as React text nodes: source stays selectable and is never HTML. function renderTokens(tokens: Array): React.ReactNode[] { return tokens.map((token, index) => typeof token === "string" ? ( token ) : ( {typeof token.content === "string" ? token.content : renderTokens( Array.isArray(token.content) ? token.content : [token.content], )} ), ); } /** Language-aware source, with exact copy text and a quiet Cojeev syntax palette. */ export function CodeBlock({ code, language, title, wrap = false, copyLabel, onCopyResult, variant = "code", embedded = false, pattern, className, ...props }: CodeBlockProps) { const highlighted = React.useMemo(() => { const aliases: Record = { ts: "typescript", js: "javascript", html: "markup", sh: "bash", shell: "bash", }; const name = (language ?? "").toLowerCase(); const grammar = Prism.languages[aliases[name] ?? name]; return grammar && code.length <= 100_000 ? renderTokens(Prism.tokenize(code, grammar)) : code; }, [code, language]); return (

{pattern && pattern !== "none" && ( )} {embedded && (

{code.trimEnd().split("\n").length} lines

)} {!embedded && (

{variant === "terminal" && ( <> {copyLabel}

)} ( <> {viewport} )} >
{variant === "terminal" && ( )} {highlighted}
); } 52:T1a6d,@layer cojeev-states { .v-code-block[data-slot="code-block"] { --code-comment: #68645f; --code-keyword: #934268; --code-string: #356742; --code-function: #315f94; --code-number: #86551f; position: relative; isolation: isolate; margin: 0; min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--v-border); border-radius: var(--r-card-sm); background: var(--v-paper); color: var(--v-text); } .v-code-block[data-slot="code-block"][data-embedded] { border: 0; border-radius: 0; } .v-code-block[data-slot="code-block"] > [data-slot="code-block-header"] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-block-end: 1px solid var(--v-border); background: var(--v-beige-2); } .v-code-block[data-slot="code-block"] [data-slot="code-block-label"] { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: var(--s-2); overflow-wrap: anywhere; } .v-code-block[data-slot="code-block"] [data-slot="code-block-title"] { font-family: var(--font-text); font-size: 13px; font-weight: 600; } .v-code-block[data-slot="code-block"] [data-slot="code-block-language"] { padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--v-pink-soft); color: var(--v-accent-ink); font-family: var(--font-mono); font-size: var(--fs-meta); } /* The shared viewport owns both axes; pre remains ordinary selectable text. */ .v-code-block > .v-code-block__scroll { --h: 24rem; border-radius: 0; } .v-code-block > .v-code-block__scroll > [data-slot="scroll-area-viewport"] { padding: 0; } .v-code-block > .v-code-block__scroll > [data-slot="scroll-area-viewport"] > div { /* Bound Radix's intrinsic table so wrapped lines use the viewport's measure. */ table-layout: fixed; width: 100%; } .v-code-block[data-slot="code-block"] pre { box-sizing: border-box; margin: 0; width: max-content; min-width: 100%; padding: var(--s-4) var(--s-8) var(--s-6) var(--s-5); font-family: var(--font-mono); font-size: 13px; line-height: 1.8; tab-size: 2; white-space: pre; user-select: text; } .v-code-block[data-slot="code-block"][data-wrap] pre { width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; } .v-code-block[data-slot="code-block"] pre > code { font: inherit; color: inherit; } .v-code-block [data-slot="code-block-caption"] { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px 4px; color:var(--v-text-2); font:12px/1.4 var(--font-text); } .v-code-block [data-slot="code-block-caption"] > span:first-child { display:flex; align-items:center; gap:8px; } .v-code-block [data-slot="code-block-caption"] > span:first-child > span { padding:2px 6px; border-radius:6px; background:var(--v-pink-soft); color:var(--v-accent-ink); font:10px/1.4 var(--font-mono); } .v-code-block .token:is(.comment,.prolog,.doctype,.cdata) { color:var(--code-comment); font-style:italic; } .v-code-block .token:is(.keyword,.operator,.tag) { color:var(--code-keyword); } .v-code-block .token:is(.string,.char,.attr-value,.regex) { color:var(--code-string); } .v-code-block .token:is(.function,.class-name,.attr-name) { color:var(--code-function); } .v-code-block .token:is(.number,.boolean,.constant,.property) { color:var(--code-number); } :root[data-mode="dark"] .v-code-block, .v-code-block[data-variant="terminal"] { --code-comment:#a4aaa8; --code-keyword:#edacd0; --code-string:#b5cf91; --code-function:#a6c9ed; --code-number:#e8cd85; } .v-code-block[data-slot="code-block"] pre ::selection { background: var(--sel-bg); color: var(--sel-ink); } .v-copy-control[data-slot="copy-control"] { position: relative; display: inline-flex; align-items: flex-start; flex-direction: column; gap: var(--s-1); min-width: 0; max-width: 100%; } .v-copy-control[data-slot="copy-control"] > [role="status"] { /* The state icon is the visible receipt; keep the live announcement out of flow. */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .v-copy-control[data-slot="copy-control"] > [role="status"][data-copy-state="error"] { inset-block-start: 100%; inset-inline-end: 0; z-index: 2; width: min(32ch, calc(100vw - 2rem)); height: auto; padding: var(--s-2) var(--s-3); margin: 0; overflow: visible; clip-path: none; white-space: normal; overflow-wrap: anywhere; border: 1px solid var(--v-border); border-radius: var(--r-card-sm); background: var(--v-paper); color: var(--v-text); } /* Copy supplies its own fixed-size state icon, including the pending spinner. */ .v-copy-control [data-slot="copy-button"][aria-busy="true"] { gap: var(--s-2); } .v-copy-control [data-slot="button-loading"] { display: none; } /* A terminal is an ink surface in either appearance, using the system's fixed structural pair. Scoped tokens also keep copy feedback and scroll rails legible. */ .v-code-block[data-slot="code-block"][data-variant="terminal"] { --v-paper: var(--v-structure); --v-beige: var(--structure-quiet); --v-beige-2: var(--structure-quiet); --v-text: var(--on-structure); --v-text-2: var(--structure-text); --v-text-3: var(--structure-text); --v-ink: var(--on-structure); --v-on-ink: var(--v-structure); --v-border: var(--structure-line); --v-brand: var(--v-pink); --v-pink-soft: var(--structure-quiet); --sel-bg: var(--v-pink); --sel-ink: var(--v-on-accent); } .v-code-block[data-variant="terminal"] > [data-slot="code-block-header"] { gap: var(--s-2); padding: var(--s-3) var(--s-4); } .v-code-block[data-variant="terminal"] [data-slot="code-block-label"] { gap: var(--s-2); } .v-code-block[data-variant="terminal"] [data-slot="code-block-title"] { color: var(--structure-text); } .v-code-block[data-variant="terminal"] [data-slot="code-block-language"] { background: transparent; color: var(--structure-text); } [data-slot="terminal-window-marks"] { display: inline-flex; gap: var(--s-1); margin-inline-end: var(--s-2); } [data-slot="terminal-window-marks"] > i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--v-pink); } [data-slot="terminal-window-marks"] > i:nth-child(2) { background: var(--v-yellow); } [data-slot="terminal-window-marks"] > i:nth-child(3) { background: var(--v-olive); } .v-code-block[data-variant="terminal"] pre { display: flex; align-items: flex-start; gap: var(--s-3); padding-block: var(--s-6); } .v-code-block[data-variant="terminal"] pre > code { min-width: 0; } [data-slot="terminal-prompt"] { flex: none; color: var(--v-olive); user-select: none; } } 4c:["$","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","prismjs@1.30.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/prismjs","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":"prismjs@1.30.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/typography.json","https://000h.cojeev.com/r/scroll-area.json","https://000h.cojeev.com/r/animated-icon.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/pattern-background.json"]}]]}],["$","$L4e",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":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/code-block.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/code-block.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/code-block.css","content":"$52","type":"registry:file","target":"styles/cojeev/code-block.css"}],"className":"h-[70svh] min-h-80"}]]}]