@honeydeck/honeydeck 0.1.0

package/src/runtime/components/BrowserFrame.tsx

@@ -0,0 +1,233 @@
+import {
+	type CSSProperties,
+	type IframeHTMLAttributes,
+	type ReactNode,
+	useState,
+} from "react";
+
+type IframeProps = Omit<
+	IframeHTMLAttributes<HTMLIFrameElement>,
+	"className" | "height" | "src" | "style"
+>;
+
+export type BrowserFrameProps = IframeProps & {
+	/**
+	 * URL loaded by the iframe.
+	 *
+	 * This should be a URL the browser can load from the presented deck, such as
+	 * an external `https://` URL or a local Vite-served route like `/demo.html`.
+	 */
+	src: string;
+	/**
+	 * Optional content shown in the address-bar field.
+	 *
+	 * Pass a short string such as `example.com` for the common case, or pass any
+	 * React node when a richer label is needed. Omit this prop to hide the
+	 * address-bar field while keeping the browser chrome.
+	 */
+	addressBar?: ReactNode;
+	/**
+	 * Light/default screenshot shown when iframe loading fails or fallback mode is toggled on.
+	 *
+	 * Use this to keep a talk reliable when a live site is offline, blocked by
+	 * iframe headers, or not available during PDF export.
+	 */
+	fallbackImage?: string;
+	/**
+	 * Dark-mode screenshot shown when fallback mode is active.
+	 *
+	 * When omitted, `fallbackImage` is used for every color mode.
+	 */
+	fallbackDarkImage?: string;
+	/**
+	 * Accessible alt text for the fallback image.
+	 *
+	 * Defaults to `Fallback preview`.
+	 */
+	fallbackAlt?: string;
+	/**
+	 * Start in fallback mode instead of loading the iframe.
+	 *
+	 * Useful for deterministic demos, final-state screenshots, and PDF-friendly
+	 * decks where the static preview is preferred by default.
+	 */
+	defaultFallback?: boolean;
+	/**
+	 * Aspect ratio of the full browser window, including chrome. Defaults to `16 / 9`.
+	 *
+	 * Accepts the same values as React's `style.aspectRatio`, for example `16 / 9`,
+	 * `"4 / 3"`, or `1.6`.
+	 */
+	aspectRatio?: CSSProperties["aspectRatio"];
+	/** Additional CSS class for the outer browser frame. */
+	className?: string;
+	/**
+	 * Additional CSS class for the iframe element.
+	 *
+	 * Only applied while live iframe content is rendered. It is not applied to the
+	 * fallback image container.
+	 */
+	iframeClassName?: string;
+};
+
+function cn(...classes: (string | undefined | false)[]): string | undefined {
+	const value = classes.filter(Boolean).join(" ");
+	return value || undefined;
+}
+
+function frameStyle(
+	aspectRatio: CSSProperties["aspectRatio"] | undefined,
+): CSSProperties {
+	return {
+		"--honeydeck-browser-frame-aspect-ratio": aspectRatio ?? "16 / 9",
+	} as CSSProperties;
+}
+
+/**
+ * Displays an iframe inside a macOS-style browser window frame.
+ *
+ * The frame uses CSS to size itself to the largest rectangle that fits its parent
+ * while preserving `aspectRatio`. It renders macOS-style traffic-light controls,
+ * optional address-bar content, and a live iframe. When `fallbackImage` is
+ * provided, iframe load errors switch to a static screenshot; presenters can
+ * also toggle that fallback with the extra chrome control that appears on hover
+ * or keyboard focus.
+ *
+ * Standard iframe attributes such as `allow`, `sandbox`, `loading`, and
+ * `referrerPolicy` are forwarded to the live iframe.
+ *
+ * ```mdx
+ * import { BrowserFrame } from '@honeydeck/honeydeck'
+ *
+ * <BrowserFrame
+ *   src="https://example.com"
+ *   addressBar="example.com"
+ *   fallbackImage="/example-light.png"
+ *   fallbackDarkImage="/example-dark.png"
+ * />
+ * ```
+ */
+export function BrowserFrame({
+	src,
+	addressBar,
+	fallbackImage,
+	fallbackDarkImage,
+	fallbackAlt,
+	defaultFallback = false,
+	aspectRatio,
+	className,
+	iframeClassName,
+	onError,
+	...iframeProps
+}: BrowserFrameProps) {
+	const hasFallback = Boolean(fallbackImage);
+	const [showFallback, setShowFallback] = useState(
+		defaultFallback && hasFallback,
+	);
+	const fallbackActive = hasFallback && showFallback;
+	const fallbackLabel = "Fallback preview";
+	const iframeTitle =
+		iframeProps.title ??
+		(typeof addressBar === "string" ? addressBar : "Embedded page");
+	const alt = fallbackAlt ?? fallbackLabel;
+
+	return (
+		<div className="grid h-full min-h-0 w-full place-items-center [container-type:size]">
+			<div
+				className={cn(
+					"group mx-auto flex aspect-[var(--honeydeck-browser-frame-aspect-ratio)] w-[min(100cqw,calc(100cqh*var(--honeydeck-browser-frame-aspect-ratio)))] max-w-full flex-col self-center overflow-hidden rounded-[calc(var(--honeydeck-border-radius)*2)] border border-border bg-surface font-body text-surface-foreground shadow-[0_2px_6px_color-mix(in_srgb,var(--honeydeck-foreground)_10%,transparent)]",
+					className,
+				)}
+				data-honeydeck-browser-frame=""
+				data-fallback={fallbackActive ? "true" : undefined}
+				style={frameStyle(aspectRatio)}
+			>
+				<div
+					className="flex items-center gap-[0.55em] border-border border-b bg-[color-mix(in_srgb,var(--honeydeck-surface)_88%,var(--honeydeck-background))] px-[0.55em] py-[0.42em]"
+					data-honeydeck-browser-frame-chrome=""
+				>
+					<div className="flex items-center gap-[0.22em]">
+						<span
+							className="h-[0.36em] w-[0.36em] rounded-full border border-[color-mix(in_srgb,var(--honeydeck-foreground)_18%,transparent)] bg-[#ff5f57]"
+							aria-hidden="true"
+						/>
+						<span
+							className="h-[0.36em] w-[0.36em] rounded-full border border-[color-mix(in_srgb,var(--honeydeck-foreground)_18%,transparent)] bg-[#febc2e]"
+							aria-hidden="true"
+						/>
+						<span
+							className="h-[0.36em] w-[0.36em] rounded-full border border-[color-mix(in_srgb,var(--honeydeck-foreground)_18%,transparent)] bg-[#28c840]"
+							aria-hidden="true"
+						/>
+						{hasFallback && (
+							<button
+								type="button"
+								className="h-[0.36em] w-[0.36em] cursor-pointer appearance-none rounded-full border border-[color-mix(in_srgb,var(--honeydeck-foreground)_18%,transparent)] bg-accent p-0 opacity-0 transition-opacity duration-150 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
+								data-honeydeck-browser-frame-toggle=""
+								aria-label={
+									fallbackActive
+										? "Show live browser content"
+										: "Show fallback preview"
+								}
+								aria-pressed={fallbackActive}
+								onClick={() => setShowFallback((value) => !value)}
+							/>
+						)}
+					</div>
+					{addressBar !== undefined && (
+						<div
+							className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap rounded-honeydeck border border-border bg-background px-[0.7em] py-[0.28em] text-center font-mono text-[0.42em] text-foreground leading-[1.4]"
+							data-honeydeck-browser-frame-address=""
+						>
+							{addressBar}
+						</div>
+					)}
+					{fallbackActive && (
+						<span
+							className="ml-auto inline-flex shrink-0 items-center rounded-honeydeck border border-border bg-background px-[0.7em] py-[0.28em] font-mono font-semibold text-[0.42em] text-foreground leading-[1.4]"
+							data-honeydeck-browser-frame-badge=""
+						>
+							{fallbackLabel}
+						</span>
+					)}
+				</div>
+				<div className="relative min-h-0 flex-1 overflow-hidden bg-background">
+					{fallbackActive ? (
+						<div className="block h-full w-full border-0 bg-background">
+							<img
+								className={cn(
+									"block h-full w-full object-cover",
+									fallbackDarkImage &&
+										"[[data-honeydeck-color-mode=dark]_&]:hidden",
+								)}
+								src={fallbackImage}
+								alt={alt}
+							/>
+							{fallbackDarkImage && (
+								<img
+									className="hidden h-full w-full object-cover [[data-honeydeck-color-mode=dark]_&]:block"
+									src={fallbackDarkImage}
+									alt={alt}
+								/>
+							)}
+						</div>
+					) : (
+						<iframe
+							{...iframeProps}
+							className={cn(
+								"block h-full w-full border-0 bg-background",
+								iframeClassName,
+							)}
+							src={src}
+							title={iframeTitle}
+							onError={(event) => {
+								if (hasFallback) setShowFallback(true);
+								onError?.(event);
+							}}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/runtime/components/Button.tsx

@@ -0,0 +1,57 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+export const transitionClass =
+	"transition-[background-color,border-color,color,box-shadow] duration-150";
+export const hoverBorderClass =
+	"hover:border-[color:color-mix(in_oklab,var(--honeydeck-primary)_48%,var(--honeydeck-border))]";
+export const surfaceControlClass = `border border-[color:var(--honeydeck-border)] bg-[color-mix(in_oklab,var(--honeydeck-surface)_86%,transparent)] text-[color:var(--honeydeck-foreground)] ${hoverBorderClass}`;
+
+const buttonBaseClass = `inline-flex items-center justify-center gap-2.5 rounded-lg px-4 py-3 font-black no-underline ${transitionClass}`;
+
+export const buttonPrimaryClass = `${buttonBaseClass} border border-[color:color-mix(in_oklab,#000_10%,var(--honeydeck-primary))] bg-[color:var(--honeydeck-primary)] text-[color:var(--honeydeck-primary-foreground)] shadow-[0_14px_30px_color-mix(in_oklab,var(--honeydeck-primary)_26%,transparent)] ${hoverBorderClass}`;
+export const buttonSecondaryClass = `${buttonBaseClass} ${surfaceControlClass}`;
+export const iconButtonClass = `inline-flex min-h-[2.35rem] min-w-[2.35rem] items-center justify-center gap-1.5 rounded-lg px-3 py-2 no-underline ${surfaceControlClass} ${transitionClass}`;
+export const smallButtonClass = `inline-flex min-h-[2.35rem] flex-1 basis-48 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-2 no-underline md:flex-none ${surfaceControlClass} ${transitionClass}`;
+export const quietLinkClass = `inline-flex items-center gap-1.5 rounded-lg border border-[color:var(--honeydeck-border)] px-3 py-2 text-[color:color-mix(in_oklab,var(--honeydeck-surface-foreground)_70%,var(--honeydeck-background))] no-underline hover:text-[color:var(--honeydeck-foreground)] ${hoverBorderClass} ${transitionClass}`;
+
+export type ButtonVariant =
+	| "primary"
+	| "secondary"
+	| "icon"
+	| "small"
+	| "quiet";
+
+const buttonClassByVariant: Record<ButtonVariant, string> = {
+	primary: buttonPrimaryClass,
+	secondary: buttonSecondaryClass,
+	icon: iconButtonClass,
+	small: smallButtonClass,
+	quiet: quietLinkClass,
+};
+
+export function buttonClass(
+	variant: ButtonVariant = "secondary",
+	className?: string,
+) {
+	const baseClass = buttonClassByVariant[variant];
+	return className ? `${baseClass} ${className}` : baseClass;
+}
+
+export type ButtonProps = ComponentPropsWithoutRef<"button"> & {
+	variant?: ButtonVariant;
+};
+
+export function Button({
+	variant = "secondary",
+	className,
+	type = "button",
+	...buttonProps
+}: ButtonProps) {
+	return (
+		<button
+			{...buttonProps}
+			type={type}
+			className={buttonClass(variant, className)}
+		/>
+	);
+}

package/src/runtime/components/CodeBlock.tsx

@@ -0,0 +1,210 @@
+/**
+ * HoneydeckCodeBlock — runtime code block component with syntax highlighting
+ * and timeline-driven step-through.
+ *
+ * ### Usage
+ * This component is **not imported directly by slide authors**. The
+ * `remarkShikiCodeBlocks` remark plugin automatically replaces fenced code
+ * blocks in MDX with `<HoneydeckCodeBlock>` elements at compile time.
+ *
+ * ### Props
+ * - `html`       — Pre-highlighted HTML string from shiki (full `<pre>…</pre>`).
+ * - `stepsJson`  — JSON-encoded `StepGroup[]` (e.g. `[[2],[4,5],"all"]`).
+ *                  Empty array = no step-through.
+ * - `startAt`    — 1-based timeline step at which group 1 activates.
+ *                  Group 0 is the baseline active highlight; 0 for non-stepped blocks.
+ * - `source`     — Original fenced code text for clipboard copying.
+ *
+ * ### Step-through mechanics
+ * The component reads `stepIndex` from `useTimeline()` and computes the active
+ * group index: group 0 before `startAt`, then later groups from `startAt`.
+ * It then adds `data-dim="1"` and an inline opacity style to non-highlighted
+ * `.line` spans in the rendered HTML.
+ * Base CSS also targets the attribute as a fallback.
+ *
+ * The highlighted HTML is injected via `dangerouslySetInnerHTML`, so the
+ * step-specific `data-dim` attributes are computed as part of the HTML string
+ * before React writes it to the DOM.
+ */
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useTimeline } from "../TimelineContext.tsx";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** A single step-through group: line numbers (1-based) or 'all'. */
+export type StepGroup = number[] | "all";
+
+type HoneydeckCodeBlockProps = {
+	/** Full shiki HTML output (includes the `<pre>` element). */
+	html: string;
+	/** JSON-encoded StepGroup[] — empty array = no step-through. */
+	stepsJson: string;
+	/** 1-based timeline step where group 1 activates (0 = no step-through). */
+	startAt: number;
+	/** Original fenced code text copied by the hover/focus copy control. */
+	source?: string;
+};
+
+const DATA_DIM_ATTR = /\sdata-dim=(["'])1\1/g;
+const LINE_SPAN = /<span\b([^>]*)>/g;
+const LINE_CLASS = /\bclass=(["'])[^"']*\bline\b[^"']*\1/;
+const DATA_LINE = /\bdata-line=(["'])(\d+)\1/;
+const STYLE_ATTR = /\sstyle=(["'])(.*?)\1/g;
+const DIM_STYLE_DECL = "opacity: var(--honeydeck-code-line-dim-opacity);";
+
+async function writeClipboardText(text: string): Promise<boolean> {
+	try {
+		if (navigator.clipboard) {
+			await navigator.clipboard.writeText(text);
+			return true;
+		}
+	} catch {
+		// Fall back to the textarea path below.
+	}
+
+	try {
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		textarea.setAttribute("readonly", "");
+		textarea.style.position = "fixed";
+		textarea.style.inset = "0";
+		textarea.style.opacity = "0";
+		document.body.appendChild(textarea);
+		textarea.select();
+		const didCopy = document.execCommand("copy");
+		document.body.removeChild(textarea);
+		return didCopy;
+	} catch {
+		return false;
+	}
+}
+
+function removeDimStyle(html: string): string {
+	return html.replace(STYLE_ATTR, (match, quote: string, style: string) => {
+		if (!style.includes(DIM_STYLE_DECL)) return match;
+
+		const cleanedStyle = style
+			.replace(DIM_STYLE_DECL, "")
+			.replace(/\s{2,}/g, " ")
+			.trim();
+
+		return cleanedStyle ? ` style=${quote}${cleanedStyle}${quote}` : "";
+	});
+}
+
+function addDimAttributes(attrs: string): string {
+	if (attrs.includes(DIM_STYLE_DECL)) return `${attrs} data-dim="1"`;
+
+	const withStyle = attrs.replace(
+		STYLE_ATTR,
+		(_match, quote: string, style: string) =>
+			` style=${quote}${style.trim()}${style.trim().endsWith(";") ? "" : ";"} ${DIM_STYLE_DECL}${quote}`,
+	);
+
+	if (withStyle !== attrs) return `${withStyle} data-dim="1"`;
+
+	return `${attrs} data-dim="1" style="${DIM_STYLE_DECL}"`;
+}
+
+export function applyCodeStepDimming(
+	html: string,
+	steps: StepGroup[],
+	stepIndex: number,
+	startAt: number,
+): string {
+	const cleanHtml = removeDimStyle(html.replace(DATA_DIM_ATTR, ""));
+
+	if (steps.length === 0) return cleanHtml;
+
+	let activeGroupIndex = 0;
+	if (startAt > 0 && stepIndex >= startAt) {
+		activeGroupIndex = Math.min(stepIndex - startAt + 1, steps.length - 1);
+	}
+
+	const activeGroup = steps[activeGroupIndex];
+	if (!activeGroup || activeGroup === "all") return cleanHtml;
+
+	return cleanHtml.replace(LINE_SPAN, (match, attrs: string) => {
+		if (!LINE_CLASS.test(attrs)) return match;
+
+		const dataLine = attrs.match(DATA_LINE);
+		if (!dataLine) return match;
+
+		const lineNumber = parseInt(dataLine[2] ?? "", 10);
+		if (activeGroup.includes(lineNumber)) return match;
+
+		return `<span${addDimAttributes(attrs)}>`;
+	});
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Renders a pre-highlighted code block and applies timeline-driven line
+ * dimming for step-through walkthroughs.
+ *
+ * Export name matches the identifier injected by `remarkShikiCodeBlocks`:
+ * `import { HoneydeckCodeBlock } from '@honeydeck/honeydeck/components/code-block'`
+ */
+export function HoneydeckCodeBlock({
+	html,
+	stepsJson,
+	startAt,
+	source,
+}: HoneydeckCodeBlockProps) {
+	const { stepIndex } = useTimeline();
+	const [copied, setCopied] = useState(false);
+
+	// Parse step groups once (stepsJson is static — set at compile time)
+	const steps = useMemo((): StepGroup[] => {
+		try {
+			return JSON.parse(stepsJson) as StepGroup[];
+		} catch {
+			return [];
+		}
+	}, [stepsJson]);
+
+	const dimmedHtml = useMemo(
+		() => applyCodeStepDimming(html, steps, stepIndex, startAt),
+		[html, startAt, stepIndex, steps],
+	);
+
+	async function copySource() {
+		if (!source) return;
+
+		if (await writeClipboardText(source)) {
+			setCopied(true);
+			window.setTimeout(() => setCopied(false), 1600);
+		}
+	}
+
+	return (
+		<div className="honeydeck-code-block group relative mb-[0.75em] overflow-hidden rounded-honeydeck font-mono text-[length:var(--honeydeck-font-size-code)] [&_.line]:transition-opacity [&_.line]:duration-150 [&_.line]:ease-in">
+			{source ? (
+				<button
+					className="honeydeck-code-copy-button"
+					type="button"
+					aria-label={copied ? "Code copied" : "Copy code"}
+					title={copied ? "Copied" : "Copy code"}
+					onClick={copySource}
+				>
+					{copied ? (
+						<CheckIcon aria-hidden="true" />
+					) : (
+						<CopyIcon aria-hidden="true" />
+					)}
+				</button>
+			) : null}
+			<div
+				// biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates this highlighted HTML during MDX compilation.
+				dangerouslySetInnerHTML={{ __html: dimmedHtml }}
+			/>
+		</div>
+	);
+}

package/src/runtime/components/ColorModeCycleButton.tsx

@@ -0,0 +1,59 @@
+import { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
+
+export const COLOR_MODES = ["system", "light", "dark"] as const;
+
+export type ColorMode = (typeof COLOR_MODES)[number];
+
+const COLOR_MODE_LABEL: Record<ColorMode, string> = {
+	system: "System",
+	light: "Light",
+	dark: "Dark",
+};
+
+const COLOR_MODE_ICON: Record<ColorMode, LucideIcon> = {
+	system: MonitorIcon,
+	light: SunIcon,
+	dark: MoonIcon,
+};
+
+export function getNextColorMode(mode: ColorMode): ColorMode {
+	if (mode === "system") return "light";
+	if (mode === "light") return "dark";
+	return "system";
+}
+
+export type ColorModeCycleButtonProps = Omit<
+	ComponentPropsWithoutRef<"button">,
+	"aria-label" | "children" | "onClick"
+> & {
+	colorMode: ColorMode;
+	onSetColorMode: (mode: ColorMode) => void;
+	iconSize?: number;
+	ariaLabel?: string;
+};
+
+export function ColorModeCycleButton({
+	colorMode,
+	onSetColorMode,
+	iconSize = 16,
+	type = "button",
+	title,
+	ariaLabel,
+	...buttonProps
+}: ColorModeCycleButtonProps) {
+	const ColorModeIcon = COLOR_MODE_ICON[colorMode];
+	const label = COLOR_MODE_LABEL[colorMode];
+
+	return (
+		<button
+			{...buttonProps}
+			type={type}
+			onClick={() => onSetColorMode(getNextColorMode(colorMode))}
+			title={title ?? `Color mode: ${label} - click to cycle`}
+			aria-label={ariaLabel ?? `Color mode: ${label} - click to cycle`}
+		>
+			<ColorModeIcon aria-hidden="true" size={iconSize} />
+		</button>
+	);
+}

package/src/runtime/components/ErrorBoundary.tsx

@@ -0,0 +1,125 @@
+/**
+ * ErrorBoundary — per-slide React error boundary.
+ *
+ * Wraps each slide in Deck.tsx so a runtime error in one slide doesn't crash
+ * the entire presentation. Other slides remain fully navigable.
+ *
+ * ### Dev mode
+ * Shows the error message and stack trace rendered inside the slide canvas
+ * area so it's visible without opening DevTools.
+ *
+ * ### Production mode
+ * Shows a minimal "Something went wrong" message with the slide number.
+ *
+ * ### Usage
+ * ```tsx
+ * <ErrorBoundary slideNumber={i + 1}>
+ *   <SlideContents />
+ * </ErrorBoundary>
+ * ```
+ */
+
+import { AlertTriangleIcon, BombIcon } from "lucide-react";
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type Props = {
+	/** 1-based slide number — shown in the fallback UI. */
+	slideNumber: number;
+	children: ReactNode;
+};
+
+type State = {
+	hasError: boolean;
+	error: Error | null;
+	componentStack: string;
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export class ErrorBoundary extends Component<Props, State> {
+	constructor(props: Props) {
+		super(props);
+		this.state = { hasError: false, error: null, componentStack: "" };
+	}
+
+	static getDerivedStateFromError(error: Error): State {
+		return { hasError: true, error, componentStack: "" };
+	}
+
+	override componentDidCatch(error: Error, info: ErrorInfo): void {
+		console.error(
+			`[honeydeck] ❌ Error on slide ${this.props.slideNumber}:`,
+			error,
+			info.componentStack,
+		);
+		this.setState({ componentStack: info.componentStack ?? "" });
+	}
+
+	override render(): ReactNode {
+		if (!this.state.hasError) {
+			return this.props.children;
+		}
+
+		const { slideNumber } = this.props;
+		const { error, componentStack } = this.state;
+
+		// Check if we're in dev mode via Vite's injected env
+		const isDev =
+			typeof import.meta !== "undefined" &&
+			(import.meta as { env?: { DEV?: boolean } }).env?.DEV === true;
+
+		if (isDev) {
+			return (
+				<div className="w-full h-full flex flex-col bg-error-surface text-error font-mono p-8 overflow-auto box-border">
+					{/* Header */}
+					<div className="flex items-center gap-3 mb-5 shrink-0">
+						<BombIcon aria-hidden="true" className="shrink-0" size={48} />
+						<div>
+							<div className="text-4xl font-bold text-error">
+								Error on slide {slideNumber}
+							</div>
+							<div className="text-md text-error/60 mt-1">
+								Other slides are still navigable (← →)
+							</div>
+						</div>
+					</div>
+
+					{/* Error message */}
+					<div className="bg-error/8 border border-error/30 rounded-md p-4 mb-4 shrink-0">
+						<div className="text-2xl font-semibold mb-2">
+							{error?.name ?? "Error"}: {error?.message}
+						</div>
+					</div>
+
+					{/* Stack trace */}
+					{(error?.stack || componentStack) && (
+						<pre className="bg-black/40 border border-white/8 rounded-md p-4 text-base leading-relaxed overflow-auto text-red-200/80 m-0 shrink-0">
+							{error?.stack ?? ""}
+							{componentStack && (
+								<>
+									{"\n\nComponent stack:"}
+									{componentStack}
+								</>
+							)}
+						</pre>
+					)}
+				</div>
+			);
+		}
+
+		// Production fallback
+		return (
+			<div className="w-full h-full flex flex-col items-center justify-center bg-void text-white/60 font-sans gap-3">
+				<AlertTriangleIcon aria-hidden="true" size={64} />
+				<div className="text-3xl font-semibold">Something went wrong</div>
+				<div className="text-md">Slide {slideNumber}</div>
+			</div>
+		);
+	}
+}