52: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"] 53: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"] 54:T433a,"use client"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import * as React from "react"; /** * The side panel for generated output — Claude's artifact, ChatGPT's canvas. * * **The trust boundary is the whole design.** This component never executes * anything. The preview is a React node the *caller* rendered; the source is * a string the component only ever prints, copies and downloads. There is no * `dangerouslySetInnerHTML`, no `eval`, no dynamic import of a model-named * module. If the artifact is a runnable web page, the caller renders it * inside its own sandboxed iframe and hands the iframe over as `preview` — * sandboxing is the host application's job, deliberately. * * **The chrome must not move while content streams.** Header, view toggle * and actions are stable from the first token; an indeterminate bar under * the header carries the "still generating" signal, and an empty streaming * artifact gets a fixed-height shimmer rather than a collapsing panel. * * **Error is a state of the panel, not the end of the conversation.** A * failed render replaces the preview with a plain-language fallback — the * source stays readable in the Code view, and nothing here throws. * * What this component is not: it does not run code (Code Execution), review * edits hunk by hunk (Edit Diff View), or render a tool result inline in the * message stream (Generative UI). It is the passive surface those write to. */ export type ArtifactType = "code" | "document" | "web" | "chart" | "image"; export type ArtifactStatus = "streaming" | "ready" | "error" | "stale"; export type ArtifactView = "preview" | "code"; export type ArtifactVersion = { id: string; label?: string; }; export type ArtifactPreviewProps = { title: string; type?: ArtifactType; status?: ArtifactStatus; /** Caller-rendered preview. Never executed by this component. */ preview?: React.ReactNode; /** The artifact's source. Enables the Code view, Copy and Download. */ code?: string; /** Label for the source language, e.g. "TSX". Drives the download extension. */ language?: string; defaultView?: ArtifactView; versions?: ArtifactVersion[]; currentVersionId?: string; onVersionChange?: (id: string) => void; errorMessage?: string; /** Note shown on the "stale" badge, e.g. which prompt it is stale against. */ staleNote?: string; onDownload?: () => void; onFullscreen?: () => void; onOpenExternal?: () => void; onClose?: () => void; className?: string; }; /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ const iconProps = { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", } as const; function CodeIcon(props: React.SVGProps) { return ( ); } function DocumentIcon(props: React.SVGProps) { return ( ); } function WebIcon(props: React.SVGProps) { return ( ); } function ChartIcon(props: React.SVGProps) { return ( ); } function ImageIcon(props: React.SVGProps) { return ( ); } function EyeIcon(props: React.SVGProps) { return ( ); } function CopyIcon(props: React.SVGProps) { return ( ); } function CheckIcon(props: React.SVGProps) { return ( ); } function DownloadIcon(props: React.SVGProps) { return ( ); } function FullscreenIcon(props: React.SVGProps) { return ( ); } function ExternalIcon(props: React.SVGProps) { return ( ); } function XIcon(props: React.SVGProps) { return ( ); } function ChevronLeftIcon(props: React.SVGProps) { return ( ); } function ChevronRightIcon(props: React.SVGProps) { return ( ); } function AlertIcon(props: React.SVGProps) { return ( ); } const TYPE_META: Record) => React.ReactNode }> = { code: { label: "Code", Icon: CodeIcon }, document: { label: "Document", Icon: DocumentIcon }, web: { label: "Web page", Icon: WebIcon }, chart: { label: "Chart", Icon: ChartIcon }, image: { label: "Image", Icon: ImageIcon }, }; /* ------------------------------------------------------------------ */ /* Helpers */ /* ------------------------------------------------------------------ */ const EXTENSIONS: Record = { tsx: "tsx", typescript: "ts", jsx: "jsx", javascript: "js", html: "html", css: "css", json: "json", python: "py", markdown: "md", }; /* ------------------------------------------------------------------ */ /* ArtifactPreview */ /* ------------------------------------------------------------------ */ export function ArtifactPreview({ title, type = "code", status = "ready", preview, code, language, defaultView = "preview", versions, currentVersionId, onVersionChange, errorMessage = "This artifact could not be rendered.", staleNote, onDownload, onFullscreen, onOpenExternal, onClose, className = "", }: ArtifactPreviewProps) { const hasCode = !!code; const [view, setView] = React.useState(hasCode ? defaultView : "preview"); const [copied, setCopied] = React.useState(false); const rootRef = React.useRef(null); const { label: typeLabel, Icon: TypeIcon } = TYPE_META[type]; const versionIndex = (() => { if (!versions || versions.length === 0) return -1; const i = versions.findIndex((v) => v.id === currentVersionId); return i >= 0 ? i : versions.length - 1; })(); async function copyCode() { if (!code) return; try { await navigator.clipboard.writeText(code); } catch { /* Clipboard permission can be denied (iframed embeds, headless). The textarea fallback still gets the source onto the clipboard. */ const ta = document.createElement("textarea"); ta.value = code; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); document.body.removeChild(ta); } setCopied(true); window.setTimeout(() => setCopied(false), 1500); } function download() { if (onDownload) return onDownload(); if (!code) return; const ext = EXTENSIONS[(language ?? "").toLowerCase()] ?? "txt"; const name = `${title.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "artifact"}.${ext}`; const url = URL.createObjectURL(new Blob([code], { type: "text/plain" })); const a = document.createElement("a"); a.href = url; a.download = name; a.click(); URL.revokeObjectURL(url); } function fullscreen() { if (onFullscreen) return onFullscreen(); rootRef.current?.requestFullscreen?.(); } const actionBtn = "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"; return ( {/* Header — wraps instead of squeezing actions off a narrow panel. */}

{title} {typeLabel} {status === "streaming" && ( Generating )} {status === "error" && ( Failed )} {status === "stale" && ( Outdated )} {versions && versions.length > 1 && ( {versions[versionIndex]?.label ?? `v${versionIndex + 1}`} )} {hasCode && status !== "error" && ( {(["preview", "code"] as const).map((v) => ( ))} )} {hasCode && ( )} {(hasCode || onDownload) && ( )} {onOpenExternal && ( )} {onClose && ( )}

{/* Streaming progress — indeterminate bar; the panel below never moves. */} {status === "streaming" && (

)} {/* Content */}

{status === "error" && view === "preview" ? (

{errorMessage}

The conversation is unaffected — ask for a fix, or read the source in the Code view.

) : view === "code" && hasCode ? (

            {code}

) : preview ? (

{preview}

) : status === "streaming" ? ( /* Fixed-shape shimmer: the panel's height is decided before the first token lands, so streaming never pushes the layout around. */

{[85, 60, 75, 40].map((w, i) => (

))}

) : (

Nothing to preview yet.

)}

{/* Keyframes live in a style tag so the file stays self-contained. */} ); } 51:["$","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":[null,["$","$L52",null,{"namespace":"@scrimui","registryDependencies":["badge","button","card"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/showcase/artifact-preview/artifact-preview.tsx","content":"$54","type":"registry:ui","target":"components/ui/artifact-preview.tsx"}],"className":"h-[70svh] min-h-80"}]]}]