This is rendered HTML content with styling.
++ This page demonstrates all the different cell output types supported by + the system. HTML and SVG outputs are rendered using IframeOutput for + sandboxed rendering. +
+ +
+ {finalIframeUriPrefix}/react.html
+
+
- import("@/components/outputs/shared-with-iframe/MarkdownRenderer").then(
- (m) => ({
- default: m.MarkdownRenderer,
- })
- )
+ import("./MarkdownRenderer.js").then((m) => ({
+ default: m.MarkdownRenderer,
+ }))
);
const JsonOutput = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/JsonOutput").then((m) => ({
+ import("./JsonOutput.js").then((m) => ({
default: m.JsonOutput,
}))
);
const HtmlOutput = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/HtmlOutput").then((m) => ({
+ import("./HtmlOutput.js").then((m) => ({
default: m.HtmlOutput,
}))
);
const ImageOutput = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/ImageOutput").then((m) => ({
+ import("./ImageOutput.js").then((m) => ({
default: m.ImageOutput,
}))
);
const SvgOutput = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/SvgOutput").then((m) => ({
+ import("./SvgOutput.js").then((m) => ({
default: m.SvgOutput,
}))
);
const PlainTextOutput = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/PlainTextOutput").then(
- (m) => ({
- default: m.PlainTextOutput,
- })
- )
+ import("./PlainTextOutput.js").then((m) => ({
+ default: m.PlainTextOutput,
+ }))
);
const GeoJsonMapOutput = React.lazy(() =>
- import(
- "@/components/outputs/shared-with-iframe/geojson/GeoJsonMapOutput"
- ).then((m) => ({
+ import("./geojson/GeoJsonMapOutput.js").then((m) => ({
default: m.GeoJsonMapOutput,
}))
);
// Dynamic imports for AI outputs
const AiToolCallOutput = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/AiToolCallOutput").then(
- (m) => ({
- default: m.AiToolCallOutput,
- })
- )
+ import("./AiToolCallOutput.js").then((m) => ({
+ default: m.AiToolCallOutput,
+ }))
);
const AiToolResultOutput = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/AiToolResultOutput").then(
- (m) => ({
- default: m.AiToolResultOutput,
- })
- )
+ import("./AiToolResultOutput.js").then((m) => ({
+ default: m.AiToolResultOutput,
+ }))
);
export function RichOutputContent({
diff --git a/src/components/outputs/shared-with-iframe/SingleOutput.tsx b/packages/components/src/outputs/SingleOutput.tsx
similarity index 92%
rename from src/components/outputs/shared-with-iframe/SingleOutput.tsx
rename to packages/components/src/outputs/SingleOutput.tsx
index cf2347d98..1df254591 100644
--- a/src/components/outputs/shared-with-iframe/SingleOutput.tsx
+++ b/packages/components/src/outputs/SingleOutput.tsx
@@ -1,31 +1,25 @@
import React from "react";
-import {
- AnsiErrorOutput,
- AnsiStreamOutput,
-} from "@/components/outputs/shared-with-iframe/AnsiOutput";
+import { AnsiErrorOutput, AnsiStreamOutput } from "./AnsiOutput.js";
import {
AI_TOOL_CALL_MIME_TYPE,
AI_TOOL_RESULT_MIME_TYPE,
APPLICATION_MIME_TYPES,
IMAGE_MIME_TYPES,
JUPYTER_MIME_TYPES,
- MediaContainer,
- OutputData,
TEXT_MIME_TYPES,
isArtifactContainer,
isInlineContainer,
} from "@runtimed/schema";
-import PlainTextOutput from "./PlainTextOutput";
-import { RichOutputContent } from "./RichOutputContent";
+import type { MediaContainer, OutputData } from "@runtimed/schema";
+import PlainTextOutput from "./PlainTextOutput.js";
+import { RichOutputContent } from "./RichOutputContent.js";
// Dynamic imports for heavy components
const MarkdownRenderer = React.lazy(() =>
- import("@/components/outputs/shared-with-iframe/MarkdownRenderer").then(
- (m) => ({
- default: m.MarkdownRenderer,
- })
- )
+ import("./MarkdownRenderer.js").then((m) => ({
+ default: m.MarkdownRenderer,
+ }))
);
/**
@@ -175,6 +169,8 @@ export const SingleOutput: React.FC<{
);
}
+ // outputType is now always "multimedia_display" or "multimedia_result"
+
return (
diff --git a/src/components/outputs/shared-with-iframe/SuspenseSpinner.tsx b/packages/components/src/outputs/SuspenseSpinner.tsx
similarity index 83%
rename from src/components/outputs/shared-with-iframe/SuspenseSpinner.tsx
rename to packages/components/src/outputs/SuspenseSpinner.tsx
index 3c9953dfc..f63436511 100644
--- a/src/components/outputs/shared-with-iframe/SuspenseSpinner.tsx
+++ b/packages/components/src/outputs/SuspenseSpinner.tsx
@@ -1,5 +1,5 @@
import { Suspense } from "react";
-import { Spinner, type SpinnerSize } from "../../ui/Spinner";
+import { Spinner, type SpinnerSize } from "../ui/Spinner.js";
import React from "react";
import { useTimeout } from "react-use";
@@ -11,7 +11,6 @@ export function DelayedSpinner({
size?: SpinnerSize;
delay?: number;
}) {
- // eslint-disable-next-line react-compiler/react-compiler
"use no memo";
const [isReady] = useTimeout(delay);
diff --git a/src/components/outputs/shared-with-iframe/SvgOutput.tsx b/packages/components/src/outputs/SvgOutput.tsx
similarity index 86%
rename from src/components/outputs/shared-with-iframe/SvgOutput.tsx
rename to packages/components/src/outputs/SvgOutput.tsx
index a39466bdd..1f56f8d97 100644
--- a/src/components/outputs/shared-with-iframe/SvgOutput.tsx
+++ b/packages/components/src/outputs/SvgOutput.tsx
@@ -1,4 +1,4 @@
-import { throwIfNotInIframe } from "@/util/iframe";
+import { throwIfNotInIframe } from "../utils/iframe.js";
import React from "react";
interface SvgOutputProps {
diff --git a/packages/components/src/outputs/SyntaxHighlighter.tsx b/packages/components/src/outputs/SyntaxHighlighter.tsx
new file mode 100644
index 000000000..f4e83d5eb
--- /dev/null
+++ b/packages/components/src/outputs/SyntaxHighlighter.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { Prism as PrismHighlighter } from "react-syntax-highlighter";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Check, Copy } from "lucide-react";
+
+export interface SyntaxHighlighterProps {
+ /** Code content to highlight */
+ children: string;
+ /** Programming language for syntax highlighting */
+ language?: string;
+ /** Show copy button on hover (default: true) */
+ enableCopy?: boolean;
+ /** Custom styles to apply to the code block */
+ customStyle?: React.CSSProperties;
+ /** Additional class name for the container */
+ className?: string;
+ /** Show line numbers (default: false) */
+ showLineNumbers?: boolean;
+}
+
+const defaultStyle: React.CSSProperties = {
+ margin: 0,
+ padding: "0.75rem",
+ fontSize: "0.875rem",
+ overflow: "auto",
+ background: "#fafafa",
+ borderRadius: "0.375rem",
+};
+
+/**
+ * Syntax highlighter component using Prism.
+ * Supports copy-to-clipboard and configurable styling.
+ */
+export const SyntaxHighlighter: React.FC = ({
+ children,
+ language = "",
+ enableCopy = true,
+ customStyle,
+ className,
+ showLineNumbers = false,
+}) => {
+ const [copied, setCopied] = React.useState(false);
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(children);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error("Failed to copy code:", err);
+ }
+ };
+
+ return (
+
+
+ {children}
+
+ {enableCopy && (
+
+ )}
+
+ );
+};
+
+export default SyntaxHighlighter;
diff --git a/src/components/outputs/shared-with-iframe/VerifiedImage.tsx b/packages/components/src/outputs/VerifiedImage.tsx
similarity index 100%
rename from src/components/outputs/shared-with-iframe/VerifiedImage.tsx
rename to packages/components/src/outputs/VerifiedImage.tsx
diff --git a/src/components/outputs/shared-with-iframe/comms.ts b/packages/components/src/outputs/comms.ts
similarity index 94%
rename from src/components/outputs/shared-with-iframe/comms.ts
rename to packages/components/src/outputs/comms.ts
index 78da92a87..7b2e4747e 100644
--- a/src/components/outputs/shared-with-iframe/comms.ts
+++ b/packages/components/src/outputs/comms.ts
@@ -1,7 +1,7 @@
// NOTE: code here is shared between the iframe and the parent page.
// It's done to colocate types to ensure typesafety across the two bundles.
-import { OutputData } from "@runtimed/schema";
+import type { OutputData } from "@runtimed/schema";
import { useEffect, useRef, useState } from "react";
type UpdateOutputsEvent = {
@@ -156,13 +156,14 @@ export function useIframeCommsChild() {
sendHeight();
// Handle incoming content updates
- window.addEventListener("message", (event: MessageEvent) => {
+ const messageHandler = (event: MessageEvent) => {
const data = event.data;
if (data && data.type === "update-outputs") {
setOutputs(data.outputs || []);
setTimeout(sendHeight, 50);
}
- });
+ };
+ window.addEventListener("message", messageHandler);
// After the MutationObserver setup
const resizeObserver = new ResizeObserver(sendHeight);
@@ -176,7 +177,7 @@ export function useIframeCommsChild() {
// Fire once all current fonts are ready
(document as any).fonts.ready
.then(() => {
- if (document.fonts.size > 0) {
+ if ((document.fonts as any).size > 0) {
sendHeight();
}
})
@@ -184,6 +185,7 @@ export function useIframeCommsChild() {
}
return () => {
+ window.removeEventListener("message", messageHandler);
resizeObserver.disconnect();
document.removeEventListener("load", sendHeight, true);
};
diff --git a/src/components/outputs/shared-with-iframe/geojson/GeoJsonMapOutput.tsx b/packages/components/src/outputs/geojson/GeoJsonMapOutput.tsx
similarity index 95%
rename from src/components/outputs/shared-with-iframe/geojson/GeoJsonMapOutput.tsx
rename to packages/components/src/outputs/geojson/GeoJsonMapOutput.tsx
index 5128fb58a..de658f889 100644
--- a/src/components/outputs/shared-with-iframe/geojson/GeoJsonMapOutput.tsx
+++ b/packages/components/src/outputs/geojson/GeoJsonMapOutput.tsx
@@ -7,8 +7,8 @@ import {
} from "maplibre-react-components";
import { useId, useMemo } from "react";
import { useMeasure } from "react-use";
-import { mapFitFeatures2, normalizeData } from "./geojson-utils";
-import { MapFeature } from "./MapFeature";
+import { mapFitFeatures2, normalizeData } from "./geojson-utils.js";
+import { MapFeature } from "./MapFeature.js";
interface GeoJsonMapProps {
data: unknown;
diff --git a/src/components/outputs/shared-with-iframe/geojson/MapFeature.tsx b/packages/components/src/outputs/geojson/MapFeature.tsx
similarity index 100%
rename from src/components/outputs/shared-with-iframe/geojson/MapFeature.tsx
rename to packages/components/src/outputs/geojson/MapFeature.tsx
diff --git a/src/components/outputs/shared-with-iframe/geojson/geojson-utils.ts b/packages/components/src/outputs/geojson/geojson-utils.ts
similarity index 98%
rename from src/components/outputs/shared-with-iframe/geojson/geojson-utils.ts
rename to packages/components/src/outputs/geojson/geojson-utils.ts
index dc24d6899..00908c750 100644
--- a/src/components/outputs/shared-with-iframe/geojson/geojson-utils.ts
+++ b/packages/components/src/outputs/geojson/geojson-utils.ts
@@ -109,6 +109,7 @@ export function mapFitFeatures2(
return mapFitFeatures(data, size, options);
} catch (error) {
// Fallback to no zoom if there's an error
+ console.error("Error fitting features", error);
return noZoomResult;
}
}
diff --git a/packages/components/src/styles.css b/packages/components/src/styles.css
new file mode 100644
index 000000000..2df935927
--- /dev/null
+++ b/packages/components/src/styles.css
@@ -0,0 +1,318 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@source ".";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 210 40% 96%;
+ --secondary-foreground: 222.2 84% 4.9%;
+ --muted: 210 40% 96%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+ --accent: 210 40% 96%;
+ --accent-foreground: 222.2 84% 4.9%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/*
+Breakpoints taken from:
+https://tailwindcss.com/docs/theme#:~:text=%2D%2Dbreakpoint%2Dsm%3A%2040,%3A%2048rem%3B
+Tailwind breakpoints don't show up as CSS vars unless they're explicity defined.
+*/
+:root {
+ --breakpoint-sm: 40rem;
+ --breakpoint-md: 48rem;
+ --breakpoint-lg: 64rem;
+ --breakpoint-xl: 80rem;
+ --breakpoint-2xl: 96rem;
+ --sidebar: hsl(0 0% 98%);
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
+ --sidebar-primary: hsl(240 5.9% 10%);
+ --sidebar-primary-foreground: hsl(0 0% 98%);
+ --sidebar-accent: hsl(240 4.8% 95.9%);
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
+ --sidebar-border: hsl(220 13% 91%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.13 0.028 261.692);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.13 0.028 261.692);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.13 0.028 261.692);
+ --primary: oklch(0.21 0.034 264.665);
+ --primary-foreground: oklch(0.985 0.002 247.839);
+ --secondary: oklch(0.967 0.003 264.542);
+ --secondary-foreground: oklch(0.21 0.034 264.665);
+ --muted: oklch(0.967 0.003 264.542);
+ --muted-foreground: oklch(0.551 0.027 264.364);
+ --accent: oklch(0.967 0.003 264.542);
+ --accent-foreground: oklch(0.21 0.034 264.665);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.928 0.006 264.531);
+ --input: oklch(0.928 0.006 264.531);
+ --ring: oklch(0.707 0.022 261.325);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0.002 247.839);
+ --sidebar-foreground: oklch(0.13 0.028 261.692);
+ --sidebar-primary: oklch(0.21 0.034 264.665);
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-accent: oklch(0.967 0.003 264.542);
+ --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+ --sidebar-border: oklch(0.928 0.006 264.531);
+ --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+ --background: oklch(0.13 0.028 261.692);
+ --foreground: oklch(0.985 0.002 247.839);
+ --card: oklch(0.21 0.034 264.665);
+ --card-foreground: oklch(0.985 0.002 247.839);
+ --popover: oklch(0.21 0.034 264.665);
+ --popover-foreground: oklch(0.985 0.002 247.839);
+ --primary: oklch(0.928 0.006 264.531);
+ --primary-foreground: oklch(0.21 0.034 264.665);
+ --secondary: oklch(0.278 0.033 256.848);
+ --secondary-foreground: oklch(0.985 0.002 247.839);
+ --muted: oklch(0.278 0.033 256.848);
+ --muted-foreground: oklch(0.707 0.022 261.325);
+ --accent: oklch(0.278 0.033 256.848);
+ --accent-foreground: oklch(0.985 0.002 247.839);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.551 0.027 264.364);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.21 0.034 264.665);
+ --sidebar-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-accent: oklch(0.278 0.033 256.848);
+ --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+
+/* Component-specific styles */
+
+/* DataFrame styling for pandas HTML output */
+.dataframe-container table.dataframe {
+ border-collapse: collapse;
+ margin: 0;
+ font-size: 0.875rem;
+ width: 100%;
+ background-color: white;
+}
+
+.dataframe-container table.dataframe th,
+.dataframe-container table.dataframe td {
+ border: 1px solid #dee2e6;
+ padding: 8px 12px;
+ text-align: left;
+}
+
+.dataframe-container table.dataframe thead th {
+ background-color: #f8f9fa;
+ font-weight: 600;
+ border-bottom: 2px solid #dee2e6;
+}
+
+.dataframe-container table.dataframe tbody tr:nth-child(even) {
+ background-color: #f9f9f9;
+}
+
+.dataframe-container table.dataframe tbody tr:hover {
+ background-color: #f5f5f5;
+}
+
+.dataframe-container table.dataframe tbody tr th {
+ background-color: #f8f9fa;
+ font-weight: 500;
+ text-align: right;
+}
+
+/* Handle text alignment from pandas */
+.dataframe-container table.dataframe thead th[style*="text-align: right"] {
+ text-align: right;
+}
+
+.dataframe-container table.dataframe tbody td {
+ vertical-align: top;
+}
+
+/* Override any scoped styles that might interfere */
+.dataframe-container .dataframe tbody tr th:only-of-type {
+ vertical-align: middle;
+}
+
+.dataframe-container .dataframe tbody tr th {
+ vertical-align: top;
+}
+
+.dataframe-container .dataframe thead th {
+ text-align: right;
+}
+
+/* Make sure the table is responsive */
+.dataframe-container {
+ overflow-x: auto;
+ max-width: 100%;
+}
+
+/* Image responsiveness and zoom styles */
+.rich-output img {
+ max-width: 100% !important;
+ height: auto !important;
+ display: block;
+}
+
+/* Constrain large images on mobile */
+@media (max-width: 640px) {
+ .rich-output img {
+ max-height: 300px !important;
+ object-fit: contain;
+ }
+
+ .rich-output svg {
+ max-width: 100% !important;
+ max-height: 300px !important;
+ }
+}
+
+/* SVG responsiveness */
+.rich-output svg {
+ max-width: 100%;
+ height: auto;
+}
+
+/* Zoom modal styles */
+.zoom-modal {
+ backdrop-filter: blur(4px);
+}
+
+.zoom-modal img {
+ max-width: 95vw;
+ max-height: 95vh;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+/* Hover effects for zoomable images */
+.zoomable-image {
+ transition: all 0.2s ease;
+}
+
+.zoomable-image:hover {
+ transform: scale(1.02);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Style numeric columns to align right by default */
+.dataframe-container table.dataframe td:last-child,
+.dataframe-container table.dataframe td[style*="text-align: right"] {
+ text-align: right;
+}
diff --git a/packages/components/src/ui/Spinner.tsx b/packages/components/src/ui/Spinner.tsx
new file mode 100644
index 000000000..877023270
--- /dev/null
+++ b/packages/components/src/ui/Spinner.tsx
@@ -0,0 +1,23 @@
+import { cn } from "../utils/cn.js";
+import { LoaderIcon, type LucideProps } from "lucide-react";
+
+export type SpinnerSize = "sm" | "md" | "lg";
+
+type SpinnerProps = LucideProps & {
+ size?: SpinnerSize;
+};
+
+export const Spinner = ({ className, size = "sm", ...props }: SpinnerProps) => (
+ & {
+ asChild?: boolean;
+ showFocusRing?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ Output Types Demo
+
+
+
+
+
+
diff --git a/packages/notebook-preview/index.html b/packages/notebook-preview/index.html
new file mode 100644
index 000000000..6135342e7
--- /dev/null
+++ b/packages/notebook-preview/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Notebook Preview
+
+
+
+
+
+
diff --git a/packages/notebook-preview/package.json b/packages/notebook-preview/package.json
new file mode 100644
index 000000000..d59b0be3b
--- /dev/null
+++ b/packages/notebook-preview/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "@runtimed/notebook-preview",
+ "version": "0.3.0-beta.1",
+ "type": "module",
+ "scripts": {
+ "dev": "vite build --watch --mode development",
+ "prebuild": "pnpm --filter @runtimed/components build",
+ "build": "vite build",
+ "preview": "vite --port 5175",
+ "type-check": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@runtimed/components": "workspace:*",
+ "react": "19.2.1",
+ "react-dom": "19.2.1"
+ },
+ "devDependencies": {
+ "@tailwindcss/vite": "^4.1.10",
+ "@types/react": "^19.1.8",
+ "@types/react-dom": "^19.1.6",
+ "@vitejs/plugin-react": "^4.5.2",
+ "tailwindcss": "^4.1.10",
+ "typescript": "^5.8.3",
+ "vite": "^6.3.5"
+ },
+ "engines": {
+ "node": ">=23.0.0",
+ "pnpm": ">=10.9.0"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/packages/notebook-preview/public/health.html b/packages/notebook-preview/public/health.html
new file mode 100644
index 000000000..5a495500f
--- /dev/null
+++ b/packages/notebook-preview/public/health.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Health Check
+
+
+
+ Health Check
+
+ Put this page in an iframe and send a message to the iframe to check
+ health.
+
+ iframe.contentWindow?.postMessage({ healthy: true }, "*");
+ Messages received:
+ No message received
+
+
+
diff --git a/packages/notebook-preview/react.html b/packages/notebook-preview/react.html
new file mode 100644
index 000000000..a5df9d5f9
--- /dev/null
+++ b/packages/notebook-preview/react.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ React IFrame Content
+
+
+
+
+
+
diff --git a/packages/notebook-preview/src/App.tsx b/packages/notebook-preview/src/App.tsx
new file mode 100644
index 000000000..a4c45d722
--- /dev/null
+++ b/packages/notebook-preview/src/App.tsx
@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+import { NotebookRenderer, type JupyterNotebook } from "./NotebookRenderer";
+
+export function App() {
+ const [notebookData, setNotebookData] = useState(
+ null
+ );
+
+ useEffect(() => {
+ // Notify parent that iframe is ready
+ window.parent.postMessage({ type: "iframe-loaded" }, "*");
+
+ // Accept messages from any origin
+ const handleMessage = (event: MessageEvent) => {
+ if (event.data?.json !== undefined) {
+ const json =
+ typeof event.data.json === "string"
+ ? JSON.parse(event.data.json)
+ : event.data.json;
+ setNotebookData(json as JupyterNotebook);
+ // Scroll to top when new notebook data arrives
+ window.scrollTo({ top: 0, behavior: "instant" });
+ }
+ };
+
+ window.addEventListener("message", handleMessage);
+ return () => window.removeEventListener("message", handleMessage);
+ }, []);
+
+ if (!notebookData) {
+ return (
+
+ Waiting for notebook data...
+
+ );
+ }
+
+ return ;
+ metadata?: Record;
+ execution_count?: number | null;
+ ename?: string;
+ evalue?: string;
+ traceback?: string[];
+}
+
+export interface JupyterCell {
+ id: string;
+ cell_type: "code" | "markdown" | "raw";
+ source: string | string[];
+ outputs?: JupyterOutput[];
+ execution_count?: number | null;
+}
+
+export interface JupyterNotebook {
+ cells: JupyterCell[];
+ metadata?: Record;
+ nbformat?: number;
+ nbformat_minor?: number;
+}
+
+// Helper to join source lines
+function joinSource(source: string | string[]): string {
+ return Array.isArray(source) ? source.join("") : source;
+}
+
+// Convert Jupyter output to OutputData format
+function convertJupyterOutput(
+ output: JupyterOutput,
+ cellId: string,
+ position: number
+): OutputData | null {
+ const baseOutput = {
+ id: `${cellId}-output-${position}`,
+ cellId,
+ position,
+ streamName: null,
+ executionCount: null,
+ displayId: null,
+ artifactId: null,
+ mimeType: null,
+ metadata: null,
+ representations: null,
+ data: null,
+ };
+
+ switch (output.output_type) {
+ case "stream": {
+ const text = Array.isArray(output.text)
+ ? output.text.join("")
+ : output.text || "";
+ return {
+ ...baseOutput,
+ outputType: "terminal" as OutputType,
+ streamName: (output.name as "stdout" | "stderr") || "stdout",
+ data: text,
+ } as OutputData;
+ }
+
+ case "execute_result":
+ case "display_data": {
+ const outputData = output.data || {};
+ const representations: Record =
+ {};
+
+ for (const [mimeType, content] of Object.entries(outputData)) {
+ const data = Array.isArray(content) ? content.join("") : content;
+ representations[mimeType] = { type: "inline", data };
+ }
+
+ // Get primary mime type
+ const mimeTypes = Object.keys(representations);
+ const primaryMimeType =
+ mimeTypes.find((m) => m.startsWith("text/html")) ||
+ mimeTypes.find((m) => m.startsWith("image/")) ||
+ mimeTypes.find((m) => m === "application/json") ||
+ mimeTypes.find((m) => m === "text/plain") ||
+ mimeTypes[0];
+
+ return {
+ ...baseOutput,
+ outputType:
+ output.output_type === "execute_result"
+ ? ("multimedia_result" as OutputType)
+ : ("multimedia_display" as OutputType),
+ executionCount: output.execution_count ?? null,
+ mimeType: primaryMimeType || null,
+ representations,
+ data: representations["text/plain"]?.data?.toString() || null,
+ } as OutputData;
+ }
+
+ case "error": {
+ return {
+ ...baseOutput,
+ outputType: "error" as OutputType,
+ data: JSON.stringify({
+ ename: output.ename || "Error",
+ evalue: output.evalue || "",
+ traceback: output.traceback || [],
+ }),
+ } as OutputData;
+ }
+
+ default:
+ return null;
+ }
+}
+
+// Extract language from notebook metadata
+function getNotebookLanguage(metadata?: Record): string {
+ // Try kernelspec name first (e.g., "python3", "ir", "julia")
+ const kernelspec = metadata?.kernelspec as
+ | { language?: string; name?: string }
+ | undefined;
+ if (kernelspec?.language) {
+ return kernelspec.language;
+ }
+ // Try language_info (more detailed)
+ const languageInfo = metadata?.language_info as { name?: string } | undefined;
+ if (languageInfo?.name) {
+ return languageInfo.name;
+ }
+ // Default to python
+ return "python";
+}
+
+// Code cell component
+function CodeCell({ cell, language }: { cell: JupyterCell; language: string }) {
+ const source = joinSource(cell.source);
+ const outputs = (cell.outputs || [])
+ .map((output, i) => convertJupyterOutput(output, cell.id, i))
+ .filter((o): o is OutputData => o !== null);
+
+ return (
+
+ {/* Execution count badge */}
+
+
+
+ {source}
+
+
+
+ {/* Outputs */}
+ {outputs.length > 0 && (
+
+
+
+ {outputs.map((output) => (
+
+
+
+ )}
+
+
+
+ );
+}
+
+// Markdown cell component
+function MarkdownCell({ cell }: { cell: JupyterCell }) {
+ const source = joinSource(cell.source);
+
+ // For markdown cells, render the output using SingleOutput with markdown type
+ const markdownOutput: OutputData = {
+ id: `${cell.id}-markdown`,
+ cellId: cell.id,
+ outputType: "markdown",
+ position: 0,
+ streamName: null,
+ executionCount: null,
+ displayId: null,
+ artifactId: null,
+ mimeType: null,
+ metadata: null,
+ representations: null,
+ data: source,
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// Raw cell component
+function RawCell({ cell }: { cell: JupyterCell }) {
+ const source = joinSource(cell.source);
+
+ return (
+
+
+
+
+
+ {source}
+
+
+
+
+ );
+}
+
+// Notebook renderer
+export function NotebookRenderer({ notebook }: { notebook: JupyterNotebook }) {
+ const language = getNotebookLanguage(notebook.metadata);
+
+ return (
+
+ {notebook.cells.map((cell, index) => {
+ switch (cell.cell_type) {
+ case "code":
+ return (
+
+
+);
diff --git a/packages/notebook-preview/src/main.tsx b/packages/notebook-preview/src/main.tsx
new file mode 100644
index 000000000..72f39d1eb
--- /dev/null
+++ b/packages/notebook-preview/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./style.css";
+import "@runtimed/components/styles.css";
+
+createRoot(document.getElementById("root")!).render(
+
+
+);
diff --git a/packages/notebook-preview/src/react-main.tsx b/packages/notebook-preview/src/react-main.tsx
new file mode 100644
index 000000000..bb6a13abe
--- /dev/null
+++ b/packages/notebook-preview/src/react-main.tsx
@@ -0,0 +1,30 @@
+import { createRoot } from "react-dom/client";
+import { IframeReactApp, sendFromIframe } from "@runtimed/components";
+import "./style.css";
+import "@runtimed/components/styles.css";
+
+// Main React initialization for iframe outputs
+function initializeReactIframe() {
+ const container = document.getElementById("react-root");
+ if (!container) {
+ console.error("React root element not found");
+ return;
+ }
+
+ const root = createRoot(container);
+ root.render( = ({
>
{/* Send markdown content to iframe */}
setIsEditing(true)}
onMarkdownRendered={() => setReadyToShowRendered(true)}
outputs={[
diff --git a/src/components/outputs/IframeOutput.tsx b/src/components/outputs/IframeOutput.tsx
index 30f9c3f21..5ec22afa0 100644
--- a/src/components/outputs/IframeOutput.tsx
+++ b/src/components/outputs/IframeOutput.tsx
@@ -1,80 +1,16 @@
-import { CellType, OutputData } from "@runtimed/schema";
-import { useState, useRef, useEffect } from "react";
-import { useDebounce } from "react-use";
-import { useIframeCommsParent } from "./shared-with-iframe/comms";
-
-export interface IframeOutputProps {
- outputs: OutputData[];
- style?: React.CSSProperties;
- className?: string;
- onHeightChange?: (height: number) => void;
- isReact?: boolean;
- defaultHeight?: string;
- onDoubleClick?: () => void;
- onMarkdownRendered?: () => void;
- cellType?: CellType;
-}
-
-export const IframeOutput: React.FC = ({
- outputs,
- className,
- style,
- isReact,
- onHeightChange,
- defaultHeight = "0px",
- onDoubleClick,
- onMarkdownRendered,
- cellType,
-}) => {
- const { iframeRef, iframeHeight } = useIframeCommsParent({
- defaultHeight,
- onHeightChange,
- outputs,
- onDoubleClick,
- onMarkdownRendered,
- });
-
- const [debouncedIframeHeight, setDebouncedIframeHeight] =
- useState(iframeHeight);
-
- // Iframe can get height updates pretty often, but we want to avoid layout jumping each time
- // TODO: ensure that it's a leading debounce!
- useDebounce(() => setDebouncedIframeHeight(iframeHeight), 50, [iframeHeight]);
-
- const isAiCell = cellType === "ai";
- const scrollContainerRef = useRef(null);
-
- // Auto-scroll to bottom when content changes for AI cells
- useEffect(() => {
- if (isAiCell && scrollContainerRef.current) {
- const container = scrollContainerRef.current;
- container.scrollTop = container.scrollHeight;
- }
- }, [isAiCell, outputs, debouncedIframeHeight]);
-
- const iframeElement = (
-
- );
-
- if (isAiCell) {
- return (
-
- {iframeElement}
-
- );
- }
-
- return iframeElement;
+import React from "react";
+import {
+ IframeOutput as BaseIframeOutput,
+ type IframeOutputProps,
+} from "@runtimed/components";
+
+/**
+ * Wrapper component that provides iframeUri from environment variable
+ */
+export const IframeOutput: React.FC> = (
+ props
+) => {
+ const iframeUri =
+ import.meta.env.VITE_IFRAME_OUTPUT_URI || "http://localhost:8000";
+ return