4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T415b,"use client"; import { ChevronDown, ChevronRight } from "lucide-react"; import { type ReactNode, useCallback, useEffect, useId, useRef, useState, } from "react"; import { isDarkMode as detectDarkMode } from "@/lib/dark-mode"; import { cn } from "@/lib/utils"; import { ErrorBoundary } from "@/registry/lib/error-boundary"; import { highlightTextInDom } from "@/registry/lib/highlight-text"; import { OutputErrorFallback } from "@/registry/lib/output-error-fallback"; import { AnsiErrorOutput, AnsiStreamOutput, } from "@/registry/outputs/ansi-output"; import { CommBridgeManager, type IframeToParentMessage, IsolatedFrame, type IsolatedFrameHandle, } from "@/registry/outputs/isolated"; import { DEFAULT_PRIORITY, MediaRouter } from "@/registry/outputs/media-router"; import { useWidgetStore } from "@/registry/widgets/widget-store-context"; /** * Jupyter output types based on the nbformat spec. */ export type JupyterOutput = | { output_type: "execute_result" | "display_data"; data: Record; metadata?: Record; execution_count?: number | null; } | { output_type: "stream"; name: "stdout" | "stderr"; text: string | string[]; } | { output_type: "error"; ename: string; evalue: string; traceback: string[]; }; interface OutputAreaProps { /** * Array of Jupyter outputs to render. */ outputs: JupyterOutput[]; /** * Whether the output area is collapsed. */ collapsed?: boolean; /** * Callback when collapse state is toggled. */ onToggleCollapse?: () => void; /** * Maximum height before scrolling. Set to enable scroll behavior. */ maxHeight?: number; /** * Additional CSS classes for the container. */ className?: string; /** * Custom renderers passed to MediaRouter. */ renderers?: Record< string, (props: { data: unknown; metadata: Record; mimeType: string; className?: string; }) => ReactNode >; /** * Custom MIME type priority order. */ priority?: readonly string[]; /** * Force isolation mode. When true, all outputs render in an isolated iframe. * When "auto" (default), isolation is used when any output needs it. * When false, outputs render in-DOM (less secure but faster for simple outputs). */ isolated?: boolean | "auto"; /** * Pre-create the IsolatedFrame even when there are no outputs. * This allows the iframe to bootstrap ahead of time, making output rendering instant. * The iframe is hidden until outputs that need isolation arrive. * @default false */ preloadIframe?: boolean; /** * Callback when a link is clicked in isolated outputs. */ onLinkClick?: (url: string, newTab: boolean) => void; /** * Callback when widget state is updated in isolated outputs. * @deprecated Use the comm bridge instead for full widget support */ onWidgetUpdate?: (commId: string, state: Record) => void; /** * Search query to highlight in iframe outputs. * Empty string or undefined clears highlights. */ searchQuery?: string; /** * Callback reporting how many search matches were found in this cell's outputs. * Called when iframe reports search_results or in-DOM highlighting completes. */ onSearchMatchCount?: (count: number) => void; } /** * Normalize stream text (can be string or string array). */ function normalizeText(text: string | string[]): string { return Array.isArray(text) ? text.join("") : text; } /** * MIME types that require iframe isolation for security. * These types can contain executable scripts or interactive content. */ const ISOLATED_MIME_TYPES = new Set([ "text/html", "text/markdown", "image/svg+xml", "application/vnd.jupyter.widget-view+json", "application/vnd.plotly.v1+json", "application/vnd.vegalite.v5+json", "application/vnd.vegalite.v4+json", "application/vnd.vegalite.v3+json", "application/vnd.vega.v5+json", "application/vnd.vega.v4+json", ]); /** * Select the best MIME type from available data based on priority. */ function selectMimeType( data: Record, priority: readonly string[] = DEFAULT_PRIORITY, ): string | null { const availableTypes = Object.keys(data); for (const mimeType of priority) { if (availableTypes.includes(mimeType) && data[mimeType] != null) { return mimeType; } } const firstAvailable = availableTypes.find((type) => data[type] != null); return firstAvailable || null; } /** * Check if a single output needs iframe isolation. */ function outputNeedsIsolation( output: JupyterOutput, priority: readonly string[] = DEFAULT_PRIORITY, ): boolean { if ( output.output_type === "execute_result" || output.output_type === "display_data" ) { const mimeType = selectMimeType(output.data, priority); return mimeType ? ISOLATED_MIME_TYPES.has(mimeType) : false; } // stream and error outputs don't need isolation return false; } /** * Check if any outputs in the array need iframe isolation. * If any output needs isolation, ALL outputs should go to the iframe. */ function anyOutputNeedsIsolation( outputs: JupyterOutput[], priority: readonly string[] = DEFAULT_PRIORITY, ): boolean { return outputs.some((output) => outputNeedsIsolation(output, priority)); } /** * Check if outputs contain any widget MIME types. */ function hasWidgetOutputs( outputs: JupyterOutput[], priority: readonly string[] = DEFAULT_PRIORITY, ): boolean { return outputs.some((output) => { if ( output.output_type === "execute_result" || output.output_type === "display_data" ) { const mimeType = selectMimeType(output.data, priority); return mimeType === "application/vnd.jupyter.widget-view+json"; } return false; }); } /** * Render a single Jupyter output based on its type. */ function renderOutput( output: JupyterOutput, index: number, renderers?: OutputAreaProps["renderers"], priority?: readonly string[], ) { const key = `output-${index}`; switch (output.output_type) { case "execute_result": case "display_data": return ( | undefined > } renderers={renderers} priority={priority} /> ); case "stream": return ( ); case "error": return ( ); default: return null; } } /** * OutputArea renders multiple Jupyter outputs with proper layout. * * Handles all Jupyter output types: execute_result, display_data, stream, and error. * Supports collapsible state and scroll behavior for large outputs. * * @example * ```tsx * setOutputsCollapsed(!outputsCollapsed)} * maxHeight={400} * /> * ``` */ export function OutputArea({ outputs, collapsed = false, onToggleCollapse, maxHeight, className, renderers, priority = DEFAULT_PRIORITY, isolated = "auto", preloadIframe = false, onLinkClick, onWidgetUpdate, searchQuery, onSearchMatchCount, }: OutputAreaProps) { const id = useId(); const frameRef = useRef(null); const bridgeRef = useRef(null); const inDomOutputRef = useRef(null); const searchQueryRef = useRef(searchQuery); searchQueryRef.current = searchQuery; // Track dark mode state and observe changes const [darkMode, setDarkMode] = useState(() => detectDarkMode()); useEffect(() => { // Update dark mode when document class changes const observer = new MutationObserver(() => { setDarkMode(detectDarkMode()); }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "data-mode"], }); return () => observer.disconnect(); }, []); // Get widget store context (may be null if not in provider) const widgetContext = useWidgetStore(); // Determine if we should use isolation (when we have outputs) const shouldIsolate = outputs.length > 0 && (isolated === true || (isolated === "auto" && anyOutputNeedsIsolation(outputs, priority))); // When preloading, we render the iframe even with no outputs (hidden) // This allows it to bootstrap ahead of time for instant rendering const showPreloadedIframe = preloadIframe && !collapsed; // Check if we have widgets and should set up comm bridge const hasWidgets = hasWidgetOutputs(outputs, priority); const shouldUseBridge = shouldIsolate && hasWidgets && widgetContext !== null; const hasCollapseControl = onToggleCollapse !== undefined; // Handle messages from iframe, routing widget messages to comm bridge const handleIframeMessage = useCallback( (message: IframeToParentMessage) => { // Route widget messages to bridge if (bridgeRef.current) { bridgeRef.current.handleIframeMessage(message); } // Also handle widget_update for backward compatibility if (message.type === "widget_update" && onWidgetUpdate) { onWidgetUpdate(message.payload.commId, message.payload.state); } // Capture search result count from iframe if (message.type === "search_results") { onSearchMatchCount?.(message.payload.count); } }, [onWidgetUpdate, onSearchMatchCount], ); // Callback when frame is ready - set up bridge and render outputs const handleFrameReady = useCallback(() => { if (!frameRef.current) return; // Set up comm bridge if we have widgets and widget context if (shouldUseBridge && widgetContext && !bridgeRef.current) { bridgeRef.current = new CommBridgeManager({ frame: frameRef.current, store: widgetContext.store, sendUpdate: widgetContext.sendUpdate, sendCustom: widgetContext.sendCustom, closeComm: widgetContext.closeComm, }); } // Clear existing content frameRef.current.clear(); // Render each output outputs.forEach((output, index) => { const append = index > 0; if ( output.output_type === "execute_result" || output.output_type === "display_data" ) { const mimeType = selectMimeType(output.data, priority); if (mimeType) { frameRef.current?.render({ mimeType, data: output.data[mimeType], metadata: output.metadata?.[mimeType] as | Record | undefined, outputIndex: index, append, }); } } else if (output.output_type === "stream") { frameRef.current?.render({ mimeType: "text/plain", data: normalizeText(output.text), metadata: { streamName: output.name }, outputIndex: index, append, }); } else if (output.output_type === "error") { // Render error with metadata so iframe can use AnsiErrorOutput frameRef.current?.render({ mimeType: "text/plain", data: output.traceback.join("\n"), metadata: { isError: true, ename: output.ename, evalue: output.evalue, traceback: output.traceback, }, outputIndex: index, append, }); } }); // Re-apply search highlights after rendering new content if (searchQueryRef.current) { frameRef.current?.search(searchQueryRef.current); } }, [outputs, priority, shouldUseBridge, widgetContext]); // Clean up bridge on unmount useEffect(() => { return () => { if (bridgeRef.current) { bridgeRef.current.dispose(); bridgeRef.current = null; } }; }, []); // Re-render outputs when they change (after initial ready) useEffect(() => { if (frameRef.current?.isReady) { handleFrameReady(); } }, [handleFrameReady]); // Forward search query to the iframe (for isolated outputs) useEffect(() => { if (frameRef.current?.isIframeReady) { frameRef.current.search(searchQuery || ""); } }, [searchQuery]); // Highlight search matches in in-DOM outputs // Re-run when outputs array ref changes so new content gets highlighted useEffect(() => { if (shouldIsolate) return; // iframe reports its own count via search_results if (!searchQuery || !inDomOutputRef.current || outputs.length === 0) { // Only report 0 if we were previously tracking matches for this cell if (searchQuery) onSearchMatchCount?.(0); return; } const cleanup = highlightTextInDom(inDomOutputRef.current, searchQuery); const count = inDomOutputRef.current.querySelectorAll(".global-find-match").length; onSearchMatchCount?.(count); return cleanup; }, [searchQuery, shouldIsolate, outputs, onSearchMatchCount]); // Empty state: render nothing (unless preloading iframe) if (outputs.length === 0 && !showPreloadedIframe) { return null; } // Hide the entire output area when only preloading (no visible outputs) const isPreloadOnly = showPreloadedIframe && outputs.length === 0; return (

{/* Collapse toggle */} {hasCollapseControl && ( )} {/* Output content */} {!collapsed && (

{/* Preloaded or active isolated frame */} {(shouldIsolate || showPreloadedIframe) && (

console.error("[OutputArea] iframe error:", err) } />

)} {/* In-DOM outputs (when not using isolation) */} {!shouldIsolate && (

{outputs.map((output, index) => (

( )} onError={(error, errorInfo) => { console.error( `[OutputArea] Error rendering output ${index}:`, error, errorInfo.componentStack, ); }} > {renderOutput(output, index, renderers, priority)}

))}

)}

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["@nteract/media-router","@nteract/ansi-output","@nteract/isolated-frame","@nteract/widget-store","@nteract/markdown-output","@nteract/error-boundary","@nteract/highlight-text"]}]]}],["$","$L4f",null,{"sourceUrl":"https://nteract-elements.vercel.app/r/output-area.json","proxyUrl":"https://shadcnregistry.com/r/nteract/output-area","itemId":"@nteract/output-area"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/cell/OutputArea.tsx","content":"$51","type":"registry:component","target":"components/cell/OutputArea.tsx"}]}]]}],"$L52"]}]

OutputArea

Installation

Files

components

Styles