{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "isolated-frame", "title": "Isolated Frame", "description": "Secure iframe component for rendering untrusted output content. Uses blob URLs with sandbox restrictions to isolate JavaScript execution. Includes message bridge for parent-child communication and widget comm protocol support.", "registryDependencies": [ "@nteract/widget-store" ], "files": [ { "path": "registry/outputs/isolated/index.ts", "content": "export {\n CommBridgeManager,\n createCommBridgeManager,\n} from \"./comm-bridge-manager\";\n// Message protocol types\nexport type {\n ClearMessage,\n EvalMessage,\n EvalResultMessage,\n IframeErrorMessage,\n // Utilities\n IframeMessage,\n // Iframe → Parent\n IframeToParentMessage,\n LinkClickMessage,\n MessageType,\n // Parent → Iframe\n ParentToIframeMessage,\n PingMessage,\n PongMessage,\n ReadyMessage,\n RenderCompleteMessage,\n RenderMessage,\n RenderPayload,\n ResizeMessage,\n ThemeMessage,\n WidgetStateMessage,\n WidgetUpdateMessage,\n} from \"./frame-bridge\";\nexport { isIframeMessage, isMessageType } from \"./frame-bridge\";\nexport type { FrameHtmlOptions } from \"./frame-html\";\n// HTML template generator\nexport { createFrameBlobUrl, generateFrameHtml } from \"./frame-html\";\n// Security testing component\nexport { IsolationTest } from \"./IsolationTest\";\nexport type { IsolatedFrameHandle, IsolatedFrameProps } from \"./isolated-frame\";\nexport { IsolatedFrame } from \"./isolated-frame\";\n// Provider and hook for renderer bundle\nexport {\n IsolatedRendererProvider,\n useIsolatedRenderer,\n} from \"./isolated-renderer-context\";\n", "type": "registry:lib", "target": "components/isolated/index.ts" }, { "path": "registry/outputs/isolated/isolated-frame.tsx", "content": "\"use client\";\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport type {\n IframeToParentMessage,\n ParentToIframeMessage,\n RenderPayload,\n} from \"./frame-bridge\";\nimport { isIframeMessage } from \"./frame-bridge\";\nimport { createFrameBlobUrl } from \"./frame-html\";\nimport { useIsolatedRenderer } from \"./isolated-renderer-context\";\n\nexport interface IsolatedFrameProps {\n /**\n * Unique ID for this frame (used for message routing).\n */\n id?: string;\n\n /**\n * Initial content to render when the frame is ready.\n */\n initialContent?: RenderPayload;\n\n /**\n * Whether to use dark mode styling.\n */\n darkMode?: boolean;\n\n /**\n * Minimum height of the iframe in pixels.\n * @default 24\n */\n minHeight?: number;\n\n /**\n * Maximum height of the iframe in pixels.\n * @default 2000\n */\n maxHeight?: number;\n\n /**\n * Additional CSS classes for the iframe container.\n */\n className?: string;\n\n /**\n * Callback when the iframe is ready to receive messages.\n */\n onReady?: () => void;\n\n /**\n * Callback when the iframe content resizes.\n */\n onResize?: (height: number) => void;\n\n /**\n * Callback when a link is clicked in the iframe.\n */\n onLinkClick?: (url: string, newTab: boolean) => void;\n\n /**\n * Callback when the user double-clicks in the iframe.\n */\n onDoubleClick?: () => void;\n\n /**\n * Callback when a widget state update is sent from the iframe.\n */\n onWidgetUpdate?: (commId: string, state: Record) => void;\n\n /**\n * Callback when an error occurs in the iframe.\n */\n onError?: (error: { message: string; stack?: string }) => void;\n\n /**\n * Callback for all messages from the iframe (for debugging or custom handling).\n */\n onMessage?: (message: IframeToParentMessage) => void;\n}\n\nexport interface IsolatedFrameHandle {\n /**\n * Send a message to the iframe.\n */\n send: (message: ParentToIframeMessage) => void;\n\n /**\n * Send content to render in the iframe.\n */\n render: (payload: RenderPayload) => void;\n\n /**\n * Evaluate code in the iframe (for bootstrap/injection).\n */\n eval: (code: string) => void;\n\n /**\n * Update theme settings in the iframe.\n */\n setTheme: (isDark: boolean) => void;\n\n /**\n * Clear all content in the iframe.\n */\n clear: () => void;\n\n /**\n * Search for text within the iframe's rendered content.\n * Pass empty string to clear search highlights.\n */\n search: (query: string, caseSensitive?: boolean) => void;\n\n /**\n * Navigate to a specific search match by index.\n */\n searchNavigate: (matchIndex: number) => void;\n\n /**\n * Whether the iframe is ready to receive messages.\n * True after the React renderer bundle is initialized.\n */\n isReady: boolean;\n\n /**\n * Whether the iframe bootstrap HTML is loaded.\n * True before the React renderer bundle is loaded.\n */\n isIframeReady: boolean;\n}\n\n/**\n * Sandbox attributes for the isolated iframe.\n *\n * CRITICAL: Do NOT include 'allow-same-origin' - this would give the iframe\n * access to the parent's origin and Tauri APIs.\n */\nconst SANDBOX_ATTRS = [\n \"allow-scripts\", // Required for rendering interactive content\n \"allow-downloads\", // Allow file downloads (e.g., from widgets)\n \"allow-forms\", // Allow form submissions\n \"allow-pointer-lock\", // For interactive visualizations\n \"allow-popups\", // Allow window.open (for links)\n \"allow-popups-to-escape-sandbox\", // Popups should be unrestricted\n \"allow-modals\", // Allow alert/confirm/prompt\n].join(\" \");\n\n/**\n * IsolatedFrame component - Renders untrusted content in a secure iframe.\n *\n * Uses a blob: URL with sandbox restrictions to ensure the iframe content\n * cannot access Tauri APIs or the parent DOM. Communication happens via\n * postMessage.\n *\n * **Requires** `IsolatedRendererProvider` to be present in the component tree.\n *\n * @example\n * ```tsx\n * // In your app root or layout:\n * \n * \n * \n *\n * // Then use IsolatedFrame anywhere:\n * const frameRef = useRef(null);\n *\n * {\n * frameRef.current?.render({\n * mimeType: \"text/html\",\n * data: \"

Hello from isolated frame!

\"\n * });\n * }}\n * onResize={(height) => console.log(\"New height:\", height)}\n * />\n * ```\n */\nexport const IsolatedFrame = forwardRef<\n IsolatedFrameHandle,\n IsolatedFrameProps\n>(function IsolatedFrame(\n {\n id,\n initialContent,\n darkMode = true,\n minHeight = 24,\n maxHeight = 2000,\n className = \"\",\n onReady,\n onResize,\n onLinkClick,\n onDoubleClick,\n onWidgetUpdate,\n onError,\n onMessage,\n },\n ref,\n) {\n // Get renderer bundle from context (provided by IsolatedRendererProvider)\n const {\n rendererCode,\n rendererCss,\n isLoading: providerLoading,\n error: providerError,\n } = useIsolatedRenderer();\n const iframeRef = useRef(null);\n const [blobUrl, setBlobUrl] = useState(null);\n // Track iframe ready (bootstrap HTML loaded)\n const [isIframeReady, setIsIframeReady] = useState(false);\n // Track renderer ready (React bundle initialized)\n const [isReady, setIsReady] = useState(false);\n // Use ref to track ready state for send callback (avoids stale closure)\n const isReadyRef = useRef(false);\n const [height, setHeight] = useState(minHeight);\n\n // Queue messages until iframe is ready\n const pendingMessagesRef = useRef([]);\n // Track if we've started bootstrapping to avoid double-fetch\n const bootstrappingRef = useRef(false);\n\n // Track initial darkMode for blob URL (don't recreate blob on theme change)\n const initialDarkModeRef = useRef(darkMode);\n\n // Create blob URL on mount (only once, with initial darkMode)\n useEffect(() => {\n const url = createFrameBlobUrl({ darkMode: initialDarkModeRef.current });\n setBlobUrl(url);\n\n return () => {\n URL.revokeObjectURL(url);\n };\n }, []);\n\n // Forward theme changes to iframe (without recreating the blob)\n useEffect(() => {\n if (isReady && iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage(\n { type: \"theme\", payload: { isDark: darkMode } },\n \"*\",\n );\n }\n }, [darkMode, isReady]);\n\n // Keep ref in sync with state (ref avoids stale closures in callbacks)\n useEffect(() => {\n isReadyRef.current = isReady;\n }, [isReady]);\n\n // Surface provider errors to consumers\n useEffect(() => {\n if (providerError && !providerLoading) {\n onError?.({ message: providerError.message, stack: providerError.stack });\n }\n }, [providerError, providerLoading, onError]);\n\n // Send a message to the iframe\n // Uses ref to check ready state to avoid stale closure issues\n const send = useCallback(\n (message: ParentToIframeMessage) => {\n if (!isReadyRef.current) {\n // Queue message until ready\n pendingMessagesRef.current.push(message);\n return;\n }\n\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage(message, \"*\");\n }\n },\n [], // No deps - uses ref instead of state\n );\n\n // Flush pending messages when ready\n useEffect(() => {\n if (isReady && pendingMessagesRef.current.length > 0) {\n const pending = pendingMessagesRef.current;\n pendingMessagesRef.current = [];\n pending.forEach((msg) => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage(msg, \"*\");\n }\n });\n }\n }, [isReady]);\n\n // Handle messages from iframe\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n // Verify the message is from our iframe\n if (event.source !== iframeRef.current?.contentWindow) {\n return;\n }\n\n const data = event.data;\n if (!isIframeMessage(data)) {\n return;\n }\n\n // Call generic message handler\n onMessage?.(data);\n\n // Handle specific message types\n switch (data.type) {\n case \"ready\":\n // Iframe bootstrap HTML is loaded\n // Renderer injection is handled by a separate useEffect\n setIsIframeReady(true);\n break;\n\n case \"renderer_ready\":\n // React renderer bundle is initialized\n setIsReady(true);\n onReady?.();\n // Render initial content if provided\n if (initialContent) {\n iframeRef.current?.contentWindow?.postMessage(\n { type: \"render\", payload: initialContent },\n \"*\",\n );\n }\n break;\n\n case \"resize\":\n if (data.payload?.height != null) {\n const newHeight = Math.max(\n minHeight,\n Math.min(maxHeight, data.payload.height),\n );\n setHeight(newHeight);\n onResize?.(newHeight);\n }\n break;\n\n case \"link_click\":\n if (data.payload?.url) {\n onLinkClick?.(data.payload.url, data.payload.newTab ?? false);\n }\n break;\n\n case \"dblclick\":\n onDoubleClick?.();\n break;\n\n case \"widget_update\":\n if (data.payload?.commId && data.payload?.state) {\n onWidgetUpdate?.(data.payload.commId, data.payload.state);\n }\n break;\n\n case \"error\":\n if (data.payload) {\n onError?.(data.payload);\n }\n break;\n\n case \"eval_result\":\n // Surface bundle eval failures to help diagnose injection issues\n if (data.payload?.success === false) {\n console.error(\n \"[IsolatedFrame] Bundle eval failed:\",\n data.payload.error,\n );\n onError?.({ message: `Bundle eval failed: ${data.payload.error}` });\n }\n break;\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [\n initialContent,\n minHeight,\n maxHeight,\n onReady,\n onResize,\n onLinkClick,\n onDoubleClick,\n onWidgetUpdate,\n onError,\n onMessage,\n ]);\n\n // Inject renderer when iframe is ready AND bundle props are available\n useEffect(() => {\n if (\n isIframeReady &&\n !isReady &&\n !bootstrappingRef.current &&\n rendererCode &&\n rendererCss &&\n iframeRef.current?.contentWindow\n ) {\n bootstrappingRef.current = true;\n\n // Inject CSS first (idempotent - checks if already loaded)\n const cssCode = `\n (function() {\n if (window.__ISOLATED_CSS_LOADED__) return;\n window.__ISOLATED_CSS_LOADED__ = true;\n var style = document.createElement('style');\n style.textContent = ${JSON.stringify(rendererCss)};\n document.head.appendChild(style);\n })();\n `;\n iframeRef.current.contentWindow.postMessage(\n { type: \"eval\", payload: { code: cssCode } },\n \"*\",\n );\n // Then inject JS bundle (idempotent - checks if already loaded)\n // Use string concatenation instead of template literal to avoid issues\n // with backticks or ${} in the bundled code\n const jsWrapper =\n \"(function() {\" +\n \"if (window.__ISOLATED_RENDERER_LOADED__) return;\" +\n \"window.__ISOLATED_RENDERER_LOADED__ = true;\" +\n rendererCode +\n \"})();\";\n iframeRef.current.contentWindow.postMessage(\n { type: \"eval\", payload: { code: jsWrapper } },\n \"*\",\n );\n }\n }, [isIframeReady, isReady, rendererCode, rendererCss]);\n\n // Expose imperative API\n useImperativeHandle(\n ref,\n () => ({\n send,\n render: (payload: RenderPayload) => send({ type: \"render\", payload }),\n eval: (code: string) => send({ type: \"eval\", payload: { code } }),\n setTheme: (isDark: boolean) =>\n send({ type: \"theme\", payload: { isDark } }),\n clear: () => send({ type: \"clear\" }),\n search: (query: string, caseSensitive?: boolean) => {\n // Search handler is in bootstrap HTML, so send directly when iframe is loaded\n // (bypasses the isReady queue which waits for the React renderer)\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage(\n { type: \"search\", payload: { query, caseSensitive } },\n \"*\",\n );\n }\n },\n searchNavigate: (matchIndex: number) => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage(\n { type: \"search_navigate\", payload: { matchIndex } },\n \"*\",\n );\n }\n },\n isReady,\n isIframeReady,\n }),\n [send, isReady, isIframeReady],\n );\n\n if (!blobUrl) {\n return null;\n }\n\n return (\n \n );\n});\n", "type": "registry:component", "target": "components/isolated/isolated-frame.tsx" }, { "path": "registry/outputs/isolated/frame-bridge.ts", "content": "/**\n * Message protocol types for parent ↔ iframe communication.\n *\n * This module defines the contract between the parent window and isolated output frames.\n * All communication happens via postMessage with structured message types.\n */\n\n// --- Message Types: Parent → Iframe ---\n\n/**\n * Bootstrap the iframe with JavaScript code.\n * Used to inject the ESM renderer bundle into the iframe.\n */\nexport interface EvalMessage {\n type: \"eval\";\n payload: {\n /** JavaScript code to evaluate in the iframe context */\n code: string;\n };\n}\n\n/**\n * Render output content in the iframe.\n */\nexport interface RenderMessage {\n type: \"render\";\n payload: RenderPayload;\n}\n\nexport interface RenderPayload {\n /** MIME type of the content (e.g., \"text/html\", \"text/markdown\") */\n mimeType: string;\n /** The content data (format depends on MIME type) */\n data: unknown;\n /** Optional metadata for the output */\n metadata?: Record;\n /** Cell ID this output belongs to (for routing) */\n cellId?: string;\n /** Output index within the cell */\n outputIndex?: number;\n /** If true, append to existing outputs instead of replacing */\n append?: boolean;\n /** If true, replace all existing outputs with this single output */\n replace?: boolean;\n}\n\n/**\n * Update widget state in the iframe.\n */\nexport interface WidgetStateMessage {\n type: \"widget_state\";\n payload: {\n /** Comm ID of the widget */\n commId: string;\n /** Updated state to merge */\n state: Record;\n /** Optional buffers (base64 encoded) */\n buffers?: string[];\n };\n}\n\n/**\n * Sync theme with the iframe.\n */\nexport interface ThemeMessage {\n type: \"theme\";\n payload: {\n /** Whether dark mode is active */\n isDark: boolean;\n /** Optional CSS variables to inject */\n cssVariables?: Record;\n };\n}\n\n/**\n * Ping the iframe (for health checks and latency measurement).\n */\nexport interface PingMessage {\n type: \"ping\";\n payload?: {\n sentAt: number;\n };\n}\n\n/**\n * Clear all rendered content in the iframe.\n */\nexport interface ClearMessage {\n type: \"clear\";\n}\n\n// --- Widget Comm Protocol: Parent → Iframe ---\n\n/**\n * Forward a comm_open message to the iframe.\n * Sent when a widget model is created by the kernel.\n */\nexport interface CommOpenMessage {\n type: \"comm_open\";\n payload: {\n /** Comm ID of the widget */\n commId: string;\n /** Target name (e.g., \"jupyter.widget\") */\n targetName: string;\n /** Initial widget state */\n state: Record;\n /** Buffer paths for binary data reconstruction */\n bufferPaths?: string[][];\n /** Binary buffers (transferred via structured clone) */\n buffers?: ArrayBuffer[];\n };\n}\n\n/**\n * Forward a comm_msg to the iframe.\n * Sent for state updates and custom messages from kernel.\n */\nexport interface CommMsgMessage {\n type: \"comm_msg\";\n payload: {\n /** Comm ID of the widget */\n commId: string;\n /** Message method: \"update\" or \"custom\" */\n method: \"update\" | \"custom\";\n /** State patch (for update) or custom content (for custom) */\n data: Record;\n /** Buffer paths for binary data reconstruction */\n bufferPaths?: string[][];\n /** Binary buffers (transferred via structured clone) */\n buffers?: ArrayBuffer[];\n };\n}\n\n/**\n * Forward a comm_close message to the iframe.\n * Sent when a widget is destroyed by the kernel.\n */\nexport interface CommCloseMessage {\n type: \"comm_close\";\n payload: {\n /** Comm ID of the widget to close */\n commId: string;\n };\n}\n\n/**\n * Sync all existing widget models to the iframe.\n * Sent on iframe ready to bootstrap existing widgets.\n */\nexport interface CommSyncMessage {\n type: \"comm_sync\";\n payload: {\n /** Array of existing models to sync */\n models: Array<{\n commId: string;\n targetName: string;\n state: Record;\n buffers?: ArrayBuffer[];\n }>;\n };\n}\n\n/**\n * Signal that the parent's comm bridge is ready.\n * Iframe should respond with widget_ready to trigger comm_sync.\n */\nexport interface BridgeReadyMessage {\n type: \"bridge_ready\";\n}\n\n// --- Global Find: Parent → Iframe ---\n\n/**\n * Search for text within the iframe's rendered content.\n * The iframe should highlight all matches and report the count.\n */\nexport interface SearchMessage {\n type: \"search\";\n payload: {\n /** The search query string (empty string clears search) */\n query: string;\n /** Whether the search should be case-sensitive */\n caseSensitive?: boolean;\n };\n}\n\n/**\n * Navigate to a specific match in the iframe's search results.\n */\nexport interface SearchNavigateMessage {\n type: \"search_navigate\";\n payload: {\n /** The index of the match to navigate to (0-based) */\n matchIndex: number;\n };\n}\n\n/**\n * All message types that can be sent from parent to iframe.\n */\nexport type ParentToIframeMessage =\n | EvalMessage\n | RenderMessage\n | WidgetStateMessage\n | ThemeMessage\n | PingMessage\n | ClearMessage\n | CommOpenMessage\n | CommMsgMessage\n | CommCloseMessage\n | CommSyncMessage\n | BridgeReadyMessage\n | SearchMessage\n | SearchNavigateMessage;\n\n// --- Message Types: Iframe → Parent ---\n\n/**\n * Iframe has finished loading and is ready to receive messages.\n */\nexport interface ReadyMessage {\n type: \"ready\";\n}\n\n/**\n * Response to a ping message.\n */\nexport interface PongMessage {\n type: \"pong\";\n payload: {\n receivedAt: number;\n /** Echo back the payload from the ping */\n echo?: unknown;\n };\n}\n\n/**\n * Result of evaluating code in the iframe.\n */\nexport interface EvalResultMessage {\n type: \"eval_result\";\n payload: {\n success: boolean;\n result?: string;\n error?: string;\n };\n}\n\n/**\n * Iframe content has finished rendering.\n */\nexport interface RenderCompleteMessage {\n type: \"render_complete\";\n payload?: {\n /** Height of the rendered content */\n height?: number;\n };\n}\n\n/**\n * Iframe content size has changed.\n */\nexport interface ResizeMessage {\n type: \"resize\";\n payload: {\n /** New height of the content */\n height: number;\n /** New width of the content (optional) */\n width?: number;\n };\n}\n\n/**\n * User clicked a link in the iframe.\n */\nexport interface LinkClickMessage {\n type: \"link_click\";\n payload: {\n /** The URL that was clicked */\n url: string;\n /** Whether it was a ctrl/cmd click */\n newTab: boolean;\n };\n}\n\n/**\n * User double-clicked in the iframe.\n */\nexport interface DoubleClickMessage {\n type: \"dblclick\";\n}\n\n/**\n * Widget state was updated in the iframe (needs to sync to kernel).\n */\nexport interface WidgetUpdateMessage {\n type: \"widget_update\";\n payload: {\n /** Comm ID of the widget */\n commId: string;\n /** Updated state */\n state: Record;\n /** Optional buffers (base64 encoded) */\n buffers?: string[];\n };\n}\n\n/**\n * An error occurred in the iframe.\n */\nexport interface IframeErrorMessage {\n type: \"error\";\n payload: {\n message: string;\n stack?: string;\n };\n}\n\n/**\n * The React renderer bundle has been loaded and initialized.\n * This is sent after the bundle is eval'd and React is mounted.\n */\nexport interface RendererReadyMessage {\n type: \"renderer_ready\";\n}\n\n// --- Widget Comm Protocol: Iframe → Parent ---\n\n/**\n * Iframe widget system is ready to receive comm messages.\n * Parent should send comm_sync with existing models after this.\n */\nexport interface WidgetReadyMessage {\n type: \"widget_ready\";\n}\n\n/**\n * Widget initiated a state update or custom message.\n * Parent should forward to kernel and update its store.\n */\nexport interface WidgetCommMsgMessage {\n type: \"widget_comm_msg\";\n payload: {\n /** Comm ID of the widget */\n commId: string;\n /** Message method: \"update\" or \"custom\" */\n method: \"update\" | \"custom\";\n /** State patch or custom content */\n data: Record;\n /** Buffer paths */\n bufferPaths?: string[][];\n /** Binary buffers */\n buffers?: ArrayBuffer[];\n };\n}\n\n/**\n * Widget initiated comm close.\n * Parent should forward to kernel and clean up.\n */\nexport interface WidgetCommCloseMessage {\n type: \"widget_comm_close\";\n payload: {\n /** Comm ID of the widget to close */\n commId: string;\n };\n}\n\n// --- Global Find: Iframe → Parent ---\n\n/**\n * Report search results from the iframe.\n * Sent after processing a search message.\n */\nexport interface SearchResultsMessage {\n type: \"search_results\";\n payload: {\n /** Number of matches found */\n count: number;\n };\n}\n\n/**\n * All message types that can be sent from iframe to parent.\n */\nexport type IframeToParentMessage =\n | ReadyMessage\n | PongMessage\n | EvalResultMessage\n | RenderCompleteMessage\n | ResizeMessage\n | LinkClickMessage\n | DoubleClickMessage\n | WidgetUpdateMessage\n | IframeErrorMessage\n | RendererReadyMessage\n | WidgetReadyMessage\n | WidgetCommMsgMessage\n | WidgetCommCloseMessage\n | SearchResultsMessage;\n\n// --- Utility Types ---\n\n/**\n * All message types (for generic handling).\n */\nexport type IframeMessage = ParentToIframeMessage | IframeToParentMessage;\n\n/**\n * Extract the message type string.\n */\nexport type MessageType = IframeMessage[\"type\"];\n\n/**\n * Type guard to check if a message is from the iframe.\n */\nexport function isIframeMessage(data: unknown): data is IframeToParentMessage {\n if (typeof data !== \"object\" || data === null) return false;\n const msg = data as { type?: unknown };\n return (\n typeof msg.type === \"string\" &&\n [\n \"ready\",\n \"pong\",\n \"eval_result\",\n \"render_complete\",\n \"resize\",\n \"link_click\",\n \"dblclick\",\n \"widget_update\",\n \"error\",\n \"renderer_ready\",\n \"widget_ready\",\n \"widget_comm_msg\",\n \"widget_comm_close\",\n \"search_results\",\n ].includes(msg.type)\n );\n}\n\n/**\n * Type guard for specific message types.\n */\nexport function isMessageType(\n data: unknown,\n type: T,\n): data is Extract {\n if (typeof data !== \"object\" || data === null) return false;\n return (data as { type?: unknown }).type === type;\n}\n", "type": "registry:lib", "target": "components/isolated/frame-bridge.ts" }, { "path": "registry/outputs/isolated/frame-html.ts", "content": "/**\n * HTML template generator for isolated output frames.\n *\n * Creates the minimal HTML document that runs inside the blob URL iframe.\n * This document handles the message protocol and provides a render target\n * for output content.\n *\n * Security: This code runs in an isolated origin (blob:) with sandbox\n * restrictions, so it cannot access Tauri APIs or the parent DOM.\n */\n\nexport interface FrameHtmlOptions {\n /**\n * Whether to include dark mode styles by default.\n */\n darkMode?: boolean;\n /**\n * Additional CSS to inject into the frame.\n */\n additionalCss?: string;\n /**\n * Additional JavaScript to inject (runs after bootstrap).\n */\n additionalScript?: string;\n}\n\n/**\n * Generate the HTML template for an isolated output frame.\n *\n * The generated HTML includes:\n * - Basic styling for outputs (respects light/dark mode)\n * - Message handler for parent communication\n * - ResizeObserver for auto-sizing\n * - Ready notification on load\n *\n * @param options - Configuration options for the frame\n * @returns HTML string to be used with a blob URL\n */\nexport function generateFrameHtml(options: FrameHtmlOptions = {}): string {\n const {\n darkMode = true,\n additionalCss = \"\",\n additionalScript = \"\",\n } = options;\n\n return `\n\n\n \n \n \n \n\n\n
\n \n\n`;\n}\n\n/**\n * Create a blob URL from the frame HTML.\n *\n * @param options - Configuration options for the frame\n * @returns A blob: URL that can be used as iframe src\n */\nexport function createFrameBlobUrl(options?: FrameHtmlOptions): string {\n const html = generateFrameHtml(options);\n const blob = new Blob([html], { type: \"text/html\" });\n return URL.createObjectURL(blob);\n}\n", "type": "registry:lib", "target": "components/isolated/frame-html.ts" }, { "path": "registry/outputs/isolated/comm-bridge-manager.ts", "content": "/**\n * Comm Bridge Manager - Parent Side\n *\n * This module manages the communication bridge between the parent window's\n * widget system and an isolated iframe. It:\n * - Buffers comm messages until iframe sends `widget_ready`\n * - Syncs all existing widget models to iframe on ready\n * - Forwards comm messages from kernel to iframe\n * - Handles widget messages from iframe and updates parent store + kernel\n *\n * Security: The iframe cannot access Tauri APIs directly. All widget\n * communication must go through this controlled postMessage bridge.\n */\n\nimport type { WidgetStore } from \"@/registry/widgets/widget-store\";\nimport type {\n CommCloseMessage,\n CommMsgMessage,\n CommOpenMessage,\n CommSyncMessage,\n IframeToParentMessage,\n} from \"./frame-bridge\";\nimport type { IsolatedFrameHandle } from \"./isolated-frame\";\n\n// Type for sending messages to kernel\ntype SendUpdate = (\n commId: string,\n state: Record,\n buffers?: ArrayBuffer[],\n) => void;\n\ntype SendCustom = (\n commId: string,\n content: Record,\n buffers?: ArrayBuffer[],\n) => void;\n\ntype CloseComm = (commId: string) => void;\n\ninterface CommBridgeManagerOptions {\n /** The isolated frame handle for sending messages */\n frame: IsolatedFrameHandle;\n /** The parent widget store */\n store: WidgetStore;\n /** Function to send state updates to kernel */\n sendUpdate: SendUpdate;\n /** Function to send custom messages to kernel */\n sendCustom: SendCustom;\n /** Function to close a comm with kernel */\n closeComm: CloseComm;\n}\n\n/**\n * Comm Bridge Manager for proxying widget communication to an isolated iframe.\n *\n * Usage:\n * 1. Create manager when IsolatedFrame is mounted\n * 2. Subscribe to widget store changes to forward to iframe\n * 3. Handle iframe messages via onMessage callback\n * 4. Dispose when iframe is unmounted\n */\nexport class CommBridgeManager {\n private frame: IsolatedFrameHandle;\n private store: WidgetStore;\n private sendUpdateToKernel: SendUpdate;\n private sendCustomToKernel: SendCustom;\n private closeCommWithKernel: CloseComm;\n\n private isWidgetReady = false;\n private messageBuffer: Array<\n CommOpenMessage | CommMsgMessage | CommCloseMessage\n > = [];\n private storeUnsubscribe: (() => void) | null = null;\n\n // Track which models have been sent to avoid duplicate sends\n private sentModels = new Set();\n\n // Track previous state for each model to detect kernel updates\n private previousState = new Map>();\n\n // Flag to prevent echoing iframe updates back to iframe\n private isProcessingIframeUpdate = false;\n\n // Track custom message subscriptions for each model\n private customMessageUnsubscribers = new Map void>();\n\n constructor(options: CommBridgeManagerOptions) {\n this.frame = options.frame;\n this.store = options.store;\n this.sendUpdateToKernel = options.sendUpdate;\n this.sendCustomToKernel = options.sendCustom;\n this.closeCommWithKernel = options.closeComm;\n\n // Subscribe to store changes to forward to iframe\n this.storeUnsubscribe = this.store.subscribe(() => {\n if (!this.isWidgetReady) return;\n // Skip if this change came from iframe (avoid echo)\n if (this.isProcessingIframeUpdate) return;\n this.syncModels();\n });\n\n // Signal to iframe that parent bridge is ready\n // Iframe will respond with widget_ready to trigger comm_sync\n this.frame.send({ type: \"bridge_ready\" });\n }\n\n /**\n * Handle a message from the iframe.\n * Call this from the IsolatedFrame's onMessage callback.\n */\n handleIframeMessage(message: IframeToParentMessage): void {\n switch (message.type) {\n case \"widget_ready\":\n this.handleWidgetReady();\n break;\n\n case \"widget_comm_msg\":\n this.handleWidgetCommMsg(message.payload);\n break;\n\n case \"widget_comm_close\":\n this.handleWidgetCommClose(message.payload);\n break;\n }\n }\n\n /**\n * Forward a comm_open to the iframe.\n * Called when a widget model is created by the kernel.\n */\n sendCommOpen(\n commId: string,\n targetName: string,\n state: Record,\n buffers?: ArrayBuffer[],\n ): void {\n const msg: CommOpenMessage = {\n type: \"comm_open\",\n payload: {\n commId,\n targetName,\n state,\n buffers,\n },\n };\n\n if (this.isWidgetReady) {\n this.frame.send(msg);\n this.sentModels.add(commId);\n } else {\n this.messageBuffer.push(msg);\n }\n }\n\n /**\n * Forward a comm_msg (state update or custom message) to the iframe.\n * Called when the kernel sends a state update or custom message.\n */\n sendCommMsg(\n commId: string,\n method: \"update\" | \"custom\",\n data: Record,\n buffers?: ArrayBuffer[],\n ): void {\n const msg: CommMsgMessage = {\n type: \"comm_msg\",\n payload: {\n commId,\n method,\n data,\n buffers,\n },\n };\n\n if (this.isWidgetReady) {\n this.frame.send(msg);\n } else {\n this.messageBuffer.push(msg);\n }\n }\n\n /**\n * Forward a comm_close to the iframe.\n * Called when the kernel closes a widget.\n */\n sendCommClose(commId: string): void {\n const msg: CommCloseMessage = {\n type: \"comm_close\",\n payload: { commId },\n };\n\n if (this.isWidgetReady) {\n this.frame.send(msg);\n this.sentModels.delete(commId);\n } else {\n this.messageBuffer.push(msg);\n }\n }\n\n /**\n * Clean up subscriptions and state.\n */\n dispose(): void {\n if (this.storeUnsubscribe) {\n this.storeUnsubscribe();\n this.storeUnsubscribe = null;\n }\n // Unsubscribe from all custom message subscriptions\n for (const unsubscribe of this.customMessageUnsubscribers.values()) {\n unsubscribe();\n }\n this.customMessageUnsubscribers.clear();\n this.messageBuffer = [];\n this.sentModels.clear();\n this.previousState.clear();\n this.isWidgetReady = false;\n }\n\n // --- Private Methods ---\n\n private handleWidgetReady(): void {\n this.isWidgetReady = true;\n\n // Send comm_sync with all existing models\n const models = this.store.getSnapshot();\n const modelArray: CommSyncMessage[\"payload\"][\"models\"] = [];\n\n for (const [commId, model] of models) {\n modelArray.push({\n commId,\n targetName: model.modelModule || \"jupyter.widget\",\n state: model.state,\n buffers: model.buffers,\n });\n this.sentModels.add(commId);\n // Store initial state for change detection\n this.previousState.set(commId, this.cloneStateSnapshot(model.state));\n // Subscribe to custom messages for this model\n this.subscribeToModelCustomMessages(commId);\n }\n\n if (modelArray.length > 0) {\n const syncMsg: CommSyncMessage = {\n type: \"comm_sync\",\n payload: { models: modelArray },\n };\n try {\n this.frame.send(syncMsg);\n } catch (e) {\n console.error(\"[CommBridge] Error sending comm_sync:\", e);\n }\n }\n\n // Flush buffered messages\n for (const msg of this.messageBuffer) {\n this.frame.send(msg);\n if (msg.type === \"comm_open\") {\n this.sentModels.add(msg.payload.commId);\n } else if (msg.type === \"comm_close\") {\n this.sentModels.delete(msg.payload.commId);\n }\n }\n this.messageBuffer = [];\n }\n\n private handleWidgetCommMsg(payload: {\n commId: string;\n method: \"update\" | \"custom\";\n data: Record;\n bufferPaths?: string[][];\n buffers?: ArrayBuffer[];\n }): void {\n const { commId, method, data, buffers } = payload;\n\n if (method === \"update\") {\n // Set flag to prevent echoing this update back to iframe\n this.isProcessingIframeUpdate = true;\n try {\n // Update parent store first (so UI stays in sync)\n this.store.updateModel(commId, data, buffers);\n // Update our tracked state\n const current = this.previousState.get(commId) ?? {};\n this.previousState.set(\n commId,\n this.cloneStateSnapshot({ ...current, ...data }),\n );\n // Then forward to kernel\n this.sendUpdateToKernel(commId, data, buffers);\n } finally {\n this.isProcessingIframeUpdate = false;\n }\n } else if (method === \"custom\") {\n // Custom messages go directly to kernel (no store update)\n this.sendCustomToKernel(commId, data, buffers);\n }\n }\n\n private handleWidgetCommClose(payload: { commId: string }): void {\n const { commId } = payload;\n\n // Update parent store\n this.store.deleteModel(commId);\n // Forward to kernel\n this.closeCommWithKernel(commId);\n // Clean up tracking\n this.sentModels.delete(commId);\n }\n\n /**\n * Sync models with iframe: new models, deleted models, and state changes.\n * Called when store changes after widget_ready.\n */\n private syncModels(): void {\n const models = this.store.getSnapshot();\n\n for (const [commId, model] of models) {\n if (!this.sentModels.has(commId)) {\n // New model - send comm_open\n this.sendCommOpen(\n commId,\n model.modelModule || \"jupyter.widget\",\n model.state,\n model.buffers,\n );\n // Store initial state for change detection\n this.previousState.set(commId, this.cloneStateSnapshot(model.state));\n // Subscribe to custom messages for this model\n this.subscribeToModelCustomMessages(commId);\n } else {\n // Existing model - check for state changes\n const previous = this.previousState.get(commId);\n if (previous) {\n const changedKeys = this.getChangedKeys(previous, model.state);\n if (changedKeys.length > 0) {\n // Build delta with only changed keys\n const delta: Record = {};\n for (const key of changedKeys) {\n delta[key] = model.state[key];\n }\n // Forward state update to iframe\n this.sendCommMsg(commId, \"update\", delta, model.buffers);\n // Update tracked state\n this.previousState.set(\n commId,\n this.cloneStateSnapshot(model.state),\n );\n }\n }\n }\n }\n\n // Check for deleted models\n for (const commId of this.sentModels) {\n if (!models.has(commId)) {\n this.sendCommClose(commId);\n this.previousState.delete(commId);\n // Unsubscribe from custom messages\n this.unsubscribeFromModelCustomMessages(commId);\n }\n }\n }\n\n /**\n * Subscribe to custom messages for a model and forward them to iframe.\n * This is critical for anywidgets like quak that use custom messages for data.\n */\n private subscribeToModelCustomMessages(commId: string): void {\n // Don't double-subscribe\n if (this.customMessageUnsubscribers.has(commId)) return;\n\n const unsubscribe = this.store.subscribeToCustomMessage(\n commId,\n (content: Record, buffers?: DataView[]) => {\n // Convert DataView[] to ArrayBuffer[] for postMessage\n const arrayBuffers = buffers?.map(\n (dv: DataView) => dv.buffer as ArrayBuffer,\n );\n // Forward custom message to iframe\n this.sendCommMsg(commId, \"custom\", content, arrayBuffers);\n },\n );\n\n this.customMessageUnsubscribers.set(commId, unsubscribe);\n }\n\n /**\n * Unsubscribe from custom messages for a model.\n */\n private unsubscribeFromModelCustomMessages(commId: string): void {\n const unsubscribe = this.customMessageUnsubscribers.get(commId);\n if (unsubscribe) {\n unsubscribe();\n this.customMessageUnsubscribers.delete(commId);\n }\n }\n\n /**\n * Get keys that have changed between two state objects.\n * Uses shallow comparison for performance.\n */\n private getChangedKeys(\n previous: Record,\n current: Record,\n ): string[] {\n const changed: string[] = [];\n const allKeys = new Set([\n ...Object.keys(previous),\n ...Object.keys(current),\n ]);\n for (const key of allKeys) {\n if (this.valuesAreDifferent(previous[key], current[key])) {\n changed.push(key);\n }\n }\n return changed;\n }\n\n /**\n * Create a deep snapshot of model state so future in-place mutations are detectable.\n */\n private cloneStateSnapshot(\n state: Record,\n ): Record {\n try {\n return structuredClone(state);\n } catch {\n return { ...state };\n }\n }\n\n /**\n * Compare two state values.\n * For object/array values, use JSON content comparison so deep snapshots\n * can detect in-place mutations from live state objects.\n */\n private valuesAreDifferent(previous: unknown, current: unknown): boolean {\n if (\n typeof previous !== \"object\" ||\n previous === null ||\n typeof current !== \"object\" ||\n current === null\n ) {\n return previous !== current;\n }\n\n try {\n return JSON.stringify(previous) !== JSON.stringify(current);\n } catch {\n // If value can't be serialized consistently, err on sending an update.\n return true;\n }\n }\n}\n\n/**\n * Create a comm bridge manager for an isolated frame.\n */\nexport function createCommBridgeManager(\n options: CommBridgeManagerOptions,\n): CommBridgeManager {\n return new CommBridgeManager(options);\n}\n", "type": "registry:lib", "target": "components/isolated/comm-bridge-manager.ts" }, { "path": "registry/outputs/isolated/IsolationTest.tsx", "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { IsolatedFrame, type IsolatedFrameHandle } from \"./isolated-frame\";\nimport { IsolatedRendererProvider } from \"./isolated-renderer-context\";\n\n/**\n * Test results from the isolated iframe\n */\ninterface IsolationTestResult {\n hasTauri: boolean;\n hasInvoke: boolean;\n canAccessParentDocument: boolean;\n canAccessParentLocalStorage: boolean;\n canUseOwnLocalStorage: boolean;\n canUseOwnCookies: boolean;\n canUseIndexedDB: boolean;\n canFetchParentOrigin: boolean;\n windowOrigin: string;\n error?: string;\n}\n\n/**\n * HTML template for the isolation test iframe.\n * This runs inside the iframe and reports back via postMessage.\n * Also handles bidirectional communication (ping/pong, eval, render).\n */\nconst ISOLATION_TEST_HTML = `\n\n\n \n \n\n\n

Iframe Isolation Test

\n
\n
\n
\n \n\n`;\n\n/**\n * IsolationTest component - A proof-of-concept to verify that blob URL iframes\n * are properly isolated from Tauri's IPC injection.\n *\n * This component creates an iframe using a blob: URL with sandbox attributes\n * that should prevent access to Tauri APIs while still allowing script execution.\n *\n * Expected results for proper isolation:\n * - window.__TAURI__ should be undefined\n * - invoke() should not be accessible\n * - Parent document should not be accessible\n * - Parent localStorage should not be accessible\n */\n/**\n * Communication test state\n */\ninterface CommTestState {\n iframeReady: boolean;\n pingCount: number;\n lastPongTime: number | null;\n evalResult: string | null;\n renderComplete: boolean;\n}\n\nexport function IsolationTest() {\n const iframeRef = useRef(null);\n const [blobUrl, setBlobUrl] = useState(null);\n const [testResult, setTestResult] = useState(\n null,\n );\n const [parentHasTauri, setParentHasTauri] = useState(false);\n const [commState, setCommState] = useState({\n iframeReady: false,\n pingCount: 0,\n lastPongTime: null,\n evalResult: null,\n renderComplete: false,\n });\n\n // Check if parent has Tauri (for comparison)\n useEffect(() => {\n setParentHasTauri(\n typeof (window as unknown as { __TAURI__?: unknown }).__TAURI__ !==\n \"undefined\",\n );\n }, []);\n\n // Create blob URL on mount\n useEffect(() => {\n const blob = new Blob([ISOLATION_TEST_HTML], { type: \"text/html\" });\n const url = URL.createObjectURL(blob);\n setBlobUrl(url);\n\n return () => {\n URL.revokeObjectURL(url);\n };\n }, []);\n\n // Listen for messages from iframe\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n const { type, payload } = event.data || {};\n\n switch (type) {\n case \"isolation_test_result\":\n setTestResult(payload ?? event.data.results);\n break;\n case \"ready\":\n setCommState((prev) => ({ ...prev, iframeReady: true }));\n break;\n case \"pong\":\n setCommState((prev) => ({\n ...prev,\n pingCount: prev.pingCount + 1,\n lastPongTime: payload?.receivedAt ?? Date.now(),\n }));\n break;\n case \"eval_result\":\n setCommState((prev) => ({\n ...prev,\n evalResult: payload?.success\n ? `Success: ${payload.result}`\n : `Error: ${payload?.error}`,\n }));\n break;\n case \"render_complete\":\n setCommState((prev) => ({ ...prev, renderComplete: true }));\n break;\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, []);\n\n // Send message to iframe\n const sendToIframe = (type: string, payload?: unknown) => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage({ type, payload }, \"*\");\n }\n };\n\n const handlePing = () => {\n sendToIframe(\"ping\", { sentAt: Date.now() });\n };\n\n const handleEval = () => {\n sendToIframe(\"eval\", { code: \"1 + 2 + 3\" });\n };\n\n const handleRender = () => {\n setCommState((prev) => ({ ...prev, renderComplete: false }));\n sendToIframe(\"render\", {\n mimeType: \"text/html\",\n data: \"
HTML rendered via postMessage!
\",\n });\n };\n\n const isIsolated =\n testResult &&\n !testResult.hasTauri &&\n !testResult.hasInvoke &&\n !testResult.canAccessParentDocument &&\n !testResult.canAccessParentLocalStorage &&\n !testResult.canUseOwnLocalStorage &&\n !testResult.canUseOwnCookies &&\n !testResult.canUseIndexedDB &&\n !testResult.canFetchParentOrigin;\n\n return (\n \n

Blob URL Iframe Isolation Test

\n\n {/* Parent context info */}\n
\n

Parent Window Context:

\n

\n window.__TAURI__ exists:{\" \"}\n \n {parentHasTauri ? \"Yes (expected in Tauri app)\" : \"No\"}\n \n

\n

\n Window origin: {window.origin}\n

\n
\n\n {/* Test results */}\n {testResult && (\n \n

\n {isIsolated ? \"Iframe is properly isolated!\" : \"Isolation FAILED\"}\n

\n
    \n
  • \n Tauri API blocked:{\" \"}\n \n {!testResult.hasTauri ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n invoke() blocked:{\" \"}\n \n {!testResult.hasInvoke ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n Parent document blocked:{\" \"}\n \n {!testResult.canAccessParentDocument ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n Parent localStorage blocked:{\" \"}\n \n {!testResult.canAccessParentLocalStorage ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n Own localStorage blocked (opaque origin):{\" \"}\n \n {!testResult.canUseOwnLocalStorage ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n Cookies blocked (opaque origin):{\" \"}\n \n {!testResult.canUseOwnCookies ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n IndexedDB blocked (opaque origin):{\" \"}\n \n {!testResult.canUseIndexedDB ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n Parent origin fetch blocked:{\" \"}\n \n {!testResult.canFetchParentOrigin ? \"Yes\" : \"No\"}\n \n
    • \n
  • \n Iframe origin:{\" \"}\n {testResult.windowOrigin}\n
    • \n
\n \n )}\n\n {/* Communication Test Controls */}\n
\n

Bidirectional Communication Test:

\n
\n \n Iframe ready:{\" \"}\n \n {commState.iframeReady ? \"Yes\" : \"Waiting...\"}\n \n \n
\n
\n \n Send Ping\n \n \n Test Eval (1+2+3)\n \n \n Test Render HTML\n \n
\n
\n

Pong responses received: {commState.pingCount}

\n {commState.evalResult &&

Eval result: {commState.evalResult}

}\n {commState.renderComplete && (\n

Render completed successfully

\n )}\n
\n
\n\n {/* The actual isolated iframe */}\n {blobUrl && (\n
\n \n
\n )}\n\n {/* Sandbox attribute explanation */}\n
\n

\n Sandbox attributes: allow-scripts (no\n allow-same-origin)\n

\n

\n Without allow-same-origin, the iframe gets an{\" \"}\n opaque origin which:\n

\n
    \n
  • Cannot access parent document, localStorage, or cookies
    • \n
  • Cannot use its own localStorage, cookies, or IndexedDB
    • \n
  • Blocks Tauri IPC injection (Tauri only injects at app origin)
    • \n
\n

\n ⚠️ Web Security Note: On the web, blob URLs inherit\n the creator's origin. The sandbox attribute creates isolation,\n but for maximum security in production web apps, serve untrusted\n content from a separate domain (e.g.,{\" \"}\n runtusercontent.com) rather than a subdomain, as\n subdomains can share cookies in some configurations.\n

\n
\n\n {/* Production IsolatedFrame Demo */}\n \n \n );\n}\n\n/**\n * Demo of the production IsolatedFrame component.\n */\nfunction ProductionFrameDemo() {\n const frameRef = useRef(null);\n const [isReady, setIsReady] = useState(false);\n const [height, setHeight] = useState(0);\n\n const handleRenderHtml = () => {\n frameRef.current?.render({\n mimeType: \"text/html\",\n data: `\n

Production IsolatedFrame Test

\n

This content was rendered via the IsolatedFrame component.

\n \n \n \n \n \n
FeatureStatus
Blob URL isolationWorks
postMessage communicationWorks
Auto-resizingWorks
\n \n `,\n });\n };\n\n const handleRenderImage = () => {\n // A small test image (1x1 red pixel in base64)\n frameRef.current?.render({\n mimeType: \"image/png\",\n data: \"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==\",\n });\n };\n\n const handleClear = () => {\n frameRef.current?.clear();\n };\n\n return (\n \n
\n

Production IsolatedFrame Component:

\n
\n \n Ready:{\" \"}\n \n {isReady ? \"Yes\" : \"Waiting...\"}\n \n \n |\n Height: {height}px\n
\n
\n \n Render HTML\n \n \n Render Image\n \n \n Clear\n \n
\n
\n setIsReady(true)}\n onResize={setHeight}\n onLinkClick={(url, newTab) => {\n console.log(\"Link clicked:\", url, newTab);\n window.open(url, newTab ? \"_blank\" : \"_self\");\n }}\n onError={(err) => console.error(\"Frame error:\", err)}\n />\n
\n
\n \n );\n}\n", "type": "registry:component", "target": "components/isolated/IsolationTest.tsx" }, { "path": "registry/outputs/isolated/isolated-renderer-context.tsx", "content": "\"use client\";\n\nimport {\n createContext,\n type ReactNode,\n useContext,\n useEffect,\n useState,\n} from \"react\";\n\ninterface IsolatedRendererBundle {\n rendererCode: string;\n rendererCss: string;\n}\n\ninterface IsolatedRendererContextValue {\n rendererCode: string | undefined;\n rendererCss: string | undefined;\n isLoading: boolean;\n error: Error | null;\n}\n\nconst IsolatedRendererContext =\n createContext(null);\n\ninterface IsolatedRendererProviderProps {\n children: ReactNode;\n /** Base path to fetch isolated-renderer.js and isolated-renderer.css from */\n basePath?: string;\n /** Custom loader function (e.g., for Vite virtual modules) */\n loader?: () => Promise;\n}\n\n// Module-level cache (shared across all provider instances)\nlet bundleCache: IsolatedRendererBundle | null = null;\nlet loadingPromise: Promise | null = null;\n\n/**\n * Provider for the isolated renderer bundle.\n *\n * Wrap your app (or the part that uses IsolatedFrame) with this provider.\n *\n * @example\n * // Option A: Fetch from a URL path\n * \n * \n * \n *\n * @example\n * // Option B: Use Vite virtual module (for Tauri/bundled apps)\n * import(\"virtual:isolated-renderer\")}>\n * \n * \n */\nexport function IsolatedRendererProvider({\n children,\n basePath,\n loader,\n}: IsolatedRendererProviderProps) {\n const [state, setState] = useState(() => ({\n rendererCode: bundleCache?.rendererCode,\n rendererCss: bundleCache?.rendererCss,\n isLoading: !bundleCache,\n error: null,\n }));\n\n useEffect(() => {\n if (bundleCache) {\n // Already loaded, update state if needed\n if (state.isLoading) {\n setState({\n rendererCode: bundleCache.rendererCode,\n rendererCss: bundleCache.rendererCss,\n isLoading: false,\n error: null,\n });\n }\n return;\n }\n\n let cancelled = false;\n\n if (!loadingPromise) {\n if (loader) {\n // Use custom loader (Vite plugin, etc.)\n loadingPromise = loader();\n } else if (basePath) {\n // Fetch from URL\n loadingPromise = Promise.all([\n fetch(`${basePath}/isolated-renderer.js`).then((r) => {\n if (!r.ok)\n throw new Error(`Failed to fetch renderer JS: ${r.status}`);\n return r.text();\n }),\n fetch(`${basePath}/isolated-renderer.css`).then((r) => {\n if (!r.ok)\n throw new Error(`Failed to fetch renderer CSS: ${r.status}`);\n return r.text();\n }),\n ]).then(([js, css]) => ({ rendererCode: js, rendererCss: css }));\n } else {\n const error = new Error(\n \"IsolatedRendererProvider requires either 'basePath' or 'loader' prop. \" +\n \"See: https://elements.nteract.io/docs/outputs/isolated-frame#setup\",\n );\n setState((s) => ({ ...s, isLoading: false, error }));\n return;\n }\n }\n\n loadingPromise\n .then((bundle) => {\n bundleCache = bundle;\n if (!cancelled) {\n setState({\n rendererCode: bundle.rendererCode,\n rendererCss: bundle.rendererCss,\n isLoading: false,\n error: null,\n });\n }\n })\n .catch((error) => {\n console.error(\"[IsolatedRendererProvider] Bundle load failed:\", error);\n loadingPromise = null; // Allow retry on next mount\n if (!cancelled) {\n setState((s) => ({ ...s, isLoading: false, error }));\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [basePath, loader, state.isLoading]);\n\n return (\n \n {children}\n \n );\n}\n\n// Default state when no provider is present (e.g., during SSR)\nconst NO_PROVIDER_STATE: IsolatedRendererContextValue = {\n rendererCode: undefined,\n rendererCss: undefined,\n isLoading: true,\n error: null,\n};\n\n/**\n * Hook to access the isolated renderer bundle.\n *\n * Returns a \"loading\" state if used outside IsolatedRendererProvider,\n * which allows components to render safely during SSR.\n * In development, logs a warning when no provider is present.\n */\nexport function useIsolatedRenderer(): IsolatedRendererContextValue {\n const context = useContext(IsolatedRendererContext);\n if (!context) {\n // During SSR or when provider is missing, return a \"not ready\" state\n // This allows components to render without crashing\n if (\n process.env.NODE_ENV === \"development\" &&\n typeof window !== \"undefined\"\n ) {\n console.warn(\n \"useIsolatedRenderer: No IsolatedRendererProvider found. \" +\n \"Wrap your app with . \" +\n \"See: https://elements.nteract.io/docs/outputs/isolated-frame#setup\",\n );\n }\n return NO_PROVIDER_STATE;\n }\n return context;\n}\n\n/**\n * Reset the bundle cache (useful for testing).\n * @internal\n */\nexport function _resetBundleCache() {\n bundleCache = null;\n loadingPromise = null;\n}\n", "type": "registry:component", "target": "components/isolated/isolated-renderer-context.tsx" } ], "type": "registry:component" }