@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/WidgetPreview.svelte

@@ -0,0 +1,852 @@
+<script lang="ts">
+	import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
+	import { GenerateLoader } from '@widgetic/design-system/components';
+
+	const dispatch = createEventDispatcher<{
+		load: { src: string | null };
+		error: { src: string | null };
+		refresh: void;
+		openInTab: void;
+		resize: { width: number; height: number };
+		mobileViewport: { width: number; height: number };
+		desktopViewport: void;
+		iframeLoad: Event;
+		iframeError: Event;
+		retry: void;
+		fixErrors: void;
+		viewErrors: void;
+		retryPreview: void;
+	}>();
+
+	/** standalone = resolve URL + postMessage internally; controlled = parent supplies src/state */
+	export let mode: 'standalone' | 'controlled' = 'standalone';
+
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+
+	// ── Standalone props (props-editor) ─────────────────────────────────────
+	export let widget: any = null;
+	export let apiBaseUrl: string = '';
+	export let widgetBuilderUrl: string = '';
+	export let designValues: any = {};
+	export let contentValues: any = {};
+
+	// ── Controlled props (widget-creator) ───────────────────────────────────
+	export let src: string | null = null;
+	export let displayUrl: string | null = null;
+	export let previewLoading: boolean = false;
+	export let previewHydrating: boolean = false;
+	export let previewError: string | null = null;
+	export let previewRetryCount: number = 0;
+	export let previewHasRuntimeError: boolean = false;
+	export let previewRuntimeErrorStatus: number | null = null;
+	export let isContentReady: boolean = false;
+	export let isLoadingUrl: boolean = false;
+	export let isGeneratingCode: boolean = false;
+	export let forceMockReady: boolean = false;
+	export let debugMode: boolean = false;
+	export let iframeReloadKey = 0;
+
+	// ── Layout / chrome ─────────────────────────────────────────────────────
+	export let width: string = '100%';
+	export let height: string = '100%';
+	export let contentHeight: string = '100%';
+	export let showUrlBar: boolean = false;
+	export let showUrlBarButtons: boolean = true;
+	/** Mobile + desktop viewport buttons in URL bar (before New tab) */
+	export let showViewportButtons: boolean = true;
+	export let mobileViewportWidth: number = 390;
+	export let mobileViewportHeight: number = 667;
+	export let enableResize: boolean = false;
+	/** Observe stage size and fill it (desktop modal) */
+	export let autoFitStage: boolean = false;
+	/** No padding/border on preview-content-container — matches widget-creator Edit panel */
+	export let compactChrome: boolean = false;
+	/** Fixed preview stage size; inner iframe resizes within these bounds */
+	export let boundsWidth: number | null = null;
+	export let boundsHeight: number | null = null;
+	export let resizeWidth: number | null = null;
+	export let resizeHeight: number | null = null;
+
+	export let iframeEl: HTMLIFrameElement | null = null;
+
+	// ── Standalone internal state ───────────────────────────────────────────
+	let internalIframeSrc: string | null = null;
+	let iframeLoaded = false;
+	let iframeError = false;
+	let errorMessage = '';
+	let isWidgetPublished = false;
+	let triedFallback = false;
+	let pendingWidget: any = null;
+	let activeWidgetKey: string | null = null;
+	let pendingMessages: Record<string, unknown>[] = [];
+	let widgetReady = false;
+	let isResolvingUrl = false;
+
+	const MIN_WIDTH = 120;
+	const MIN_HEIGHT = 80;
+	const HANDLE_MARGIN = 6;
+	/** Inset padding so resize handles (-4px) and dimension badge stay inside bounds */
+	const RESIZE_PAD_X = 8;
+	const RESIZE_PAD_TOP = 8;
+	const RESIZE_PAD_BOTTOM = 22;
+	let isResizing = false;
+	let contentContainerEl: HTMLElement | null = null;
+	let resizeStageEl: HTMLElement | null = null;
+	let stageResizeObserver: ResizeObserver | null = null;
+
+	export function getResizeLimits(): { maxWidth: number; maxHeight: number } {
+		const stageEl = resizeStageEl ?? contentContainerEl;
+		if (stageEl) {
+			return {
+				maxWidth: Math.max(MIN_WIDTH, stageEl.clientWidth),
+				maxHeight: Math.max(MIN_HEIGHT, stageEl.clientHeight),
+			};
+		}
+		if (hasFixedBounds && boundsWidth != null && boundsHeight != null) {
+			return {
+				maxWidth: Math.max(MIN_WIDTH, boundsWidth - RESIZE_PAD_X * 2),
+				maxHeight: Math.max(MIN_HEIGHT, boundsHeight - RESIZE_PAD_TOP - RESIZE_PAD_BOTTOM),
+			};
+		}
+		return { maxWidth: 720, maxHeight: 420 };
+	}
+
+	/** Firefox/Chrome skip painting a cross-origin iframe that started at opacity 0 or inside a CSS filter until a reflow (opening DevTools). */
+	let iframePaintNudgeGeneration = 0;
+	export function nudgeIframePaint(): void {
+		const el = iframeEl;
+		if (!el) return;
+		const generation = ++iframePaintNudgeGeneration;
+		// Force a 1px layout twitch, then ALWAYS clear inline size so w-full/h-full can track the wrapper.
+		// Restoring a previous pixel width (from overlapping nudges) permanently capped the iframe
+		// smaller than the resize stage — widgets looked letterboxed / "not responsive".
+		const twitchWidth = Math.max(1, el.offsetWidth + 1);
+		el.style.width = `${twitchWidth}px`;
+		void el.offsetHeight;
+		requestAnimationFrame(() => {
+			if (generation !== iframePaintNudgeGeneration) return;
+			el.style.width = '';
+			el.style.height = '';
+		});
+	}
+
+	/** Drop any stuck inline iframe size whenever the stage pixel size changes. */
+	$: if (iframeEl && (resizeWidth != null || resizeHeight != null)) {
+		iframeEl.style.width = '';
+		iframeEl.style.height = '';
+	}
+
+	/** Fill the available preview stage (e.g. desktop modal) */
+	export function fitToContainer(): void {
+		const attemptFit = (attemptsLeft: number) => {
+			const stageEl = resizeStageEl ?? contentContainerEl;
+			const limits = getResizeLimits();
+			const stageReady =
+				!!stageEl && stageEl.clientWidth > MIN_WIDTH && stageEl.clientHeight > MIN_HEIGHT;
+			if (!stageReady && attemptsLeft > 0) {
+				requestAnimationFrame(() => attemptFit(attemptsLeft - 1));
+				return;
+			}
+			resizeWidth = limits.maxWidth;
+			resizeHeight = limits.maxHeight;
+			dispatch('resize', { width: limits.maxWidth, height: limits.maxHeight });
+			requestAnimationFrame(() => nudgeIframePaint());
+		};
+		attemptFit(24);
+	}
+
+	$: effectiveSrc = mode === 'controlled' ? src : internalIframeSrc;
+	$: effectiveDisplayUrl =
+		mode === 'controlled' ? displayUrl || src : internalIframeSrc;
+	$: mountedPreviewSrc =
+		effectiveSrc && effectiveSrc !== 'about:blank' ? effectiveSrc : null;
+	$: showStandaloneLoading =
+		mode === 'standalone' &&
+		(isResolvingUrl || !!effectiveSrc) &&
+		!iframeLoaded &&
+		!iframeError;
+	$: showControlledLoading =
+		mode === 'controlled' &&
+		(previewLoading || previewHydrating) &&
+		!previewHasRuntimeError;
+	$: showResizeHandles = enableResize && (mode === 'controlled' ? isContentReady : iframeLoaded);
+	$: hasFixedBounds = boundsWidth != null && boundsHeight != null;
+	$: containerPaddingStyle = enableResize
+		? `padding: ${RESIZE_PAD_TOP}px ${RESIZE_PAD_X}px ${RESIZE_PAD_BOTTOM}px ${RESIZE_PAD_X}px;`
+		: !hasFixedBounds && !compactChrome && (showUrlBar || mode === 'controlled')
+			? `padding: ${HANDLE_MARGIN}px;`
+			: '';
+	// Always clip — a too-wide iframe must not paint outside the stage when the Creator
+	// column shrinks (that looked like the widget being "cut off" on resize).
+	$: containerOverflowClass = 'overflow-hidden';
+	// Keep pixel preview size inside the stage whenever the parent layout changes.
+	$: if (enableResize && (resizeWidth != null || resizeHeight != null)) {
+		const { maxWidth, maxHeight } = getResizeLimits();
+		if (resizeWidth != null && resizeWidth > maxWidth) resizeWidth = maxWidth;
+		if (resizeHeight != null && resizeHeight > maxHeight) resizeHeight = maxHeight;
+	}
+	$: boundedContainerStyle = hasFixedBounds
+		? `width: ${boundsWidth}px; height: ${boundsHeight}px; flex: 0 0 auto;`
+		: '';
+	$: iframeTitle =
+		mode === 'controlled'
+			? 'Widget preview'
+			: `Widget preview – ${widget?.name || 'Widget'}`;
+
+	function buildWidgetUrl(w: any): string | null {
+		if (!w) return null;
+
+		const jsPath = w.jsPath || w.js_path;
+
+		if (jsPath) {
+			if (apiBaseUrl) {
+				const artifactPath = jsPath.match(/\/widgets\/[^/]+\/v\d+\/.+$/i);
+				if (artifactPath) {
+					const proxyUrl = `${apiBaseUrl}${artifactPath[0]}`;
+					console.log('[WidgetPreview] Using API proxy URL (R2):', proxyUrl);
+					return proxyUrl;
+				}
+			}
+			if (jsPath.startsWith('http')) return jsPath;
+			return `https://cdn.widgetic.com${jsPath.startsWith('/') ? '' : '/'}${jsPath}`;
+		}
+
+		if (widgetBuilderUrl && w.id) {
+			const previewUrl = `${widgetBuilderUrl.replace(/\/+$/, '')}/preview/${w.id}`;
+			console.log('[WidgetPreview] Using Worker preview URL (unpublished):', previewUrl);
+			return previewUrl;
+		}
+
+		console.log('[WidgetPreview] Widget not published and no Worker URL:', w.name, w.id);
+		return null;
+	}
+
+	function tryFallbackUrl(w: any): string | null {
+		if (!w?.id || !widgetBuilderUrl) return null;
+		return `${widgetBuilderUrl.replace(/\/+$/, '')}/preview/${w.id}`;
+	}
+
+	async function resolveWidgetPreviewUrl(w: any, primaryUrl: string): Promise<string> {
+		try {
+			const res = await fetch(primaryUrl, { method: 'GET', mode: 'cors' });
+			const contentType = res.headers.get('content-type') || '';
+			const looksLikeErrorPayload =
+				!res.ok || (contentType.includes('application/json') && !contentType.includes('html'));
+			if (looksLikeErrorPayload) {
+				const fallbackUrl = tryFallbackUrl(w);
+				if (fallbackUrl && !triedFallback) {
+					triedFallback = true;
+					console.log('[WidgetPreview] Primary URL failed, trying Worker fallback:', fallbackUrl);
+					return fallbackUrl;
+				}
+			}
+		} catch (err) {
+			const fallbackUrl = tryFallbackUrl(w);
+			if (fallbackUrl && !triedFallback) {
+				triedFallback = true;
+				console.log('[WidgetPreview] Primary URL unreachable, trying Worker fallback:', fallbackUrl);
+				return fallbackUrl;
+			}
+			console.warn('[WidgetPreview] URL probe failed:', primaryUrl, err);
+		}
+		return primaryUrl;
+	}
+
+	function beginWidgetLoad(w: any, url: string | null) {
+		pendingWidget = w;
+		triedFallback = false;
+		iframeLoaded = false;
+		iframeError = false;
+		widgetReady = false;
+		errorMessage = '';
+		pendingMessages = [];
+
+		if (!url) {
+			internalIframeSrc = null;
+			isResolvingUrl = false;
+			return;
+		}
+
+		isResolvingUrl = true;
+		console.log('[WidgetPreview] Resolving widget URL:', url);
+		void resolveWidgetPreviewUrl(w, url).then(async (resolvedUrl) => {
+			if (pendingWidget !== w) return;
+			isResolvingUrl = false;
+			internalIframeSrc = resolvedUrl;
+			await tick();
+			requestAnimationFrame(() => {
+				ensureIframeLoadDetected();
+			});
+		});
+	}
+
+	function ensureIframeLoadDetected() {
+		if (!iframeEl || (mode === 'standalone' && (iframeLoaded || iframeError))) return;
+
+		try {
+			const doc = iframeEl.contentDocument;
+			if (doc?.readyState === 'complete') {
+				void handleIframeLoad();
+				return;
+			}
+		} catch {
+			// Cross-origin
+		}
+
+		iframeEl.contentWindow?.postMessage({ type: 'widgetic:ping' }, '*');
+
+		window.setTimeout(() => {
+			if (mode === 'standalone' && !iframeLoaded && !iframeError && iframeEl && effectiveSrc) {
+				console.log('[WidgetPreview] Fallback: marking iframe loaded after ping timeout');
+				void handleIframeLoad();
+			}
+		}, 400);
+	}
+
+	$: if (mode === 'standalone' && widget) {
+		isWidgetPublished = !!(widget.jsPath || widget.js_path);
+		const newUrl = buildWidgetUrl(widget);
+		const widgetKey = `${widget.id}:${newUrl ?? 'none'}`;
+		if (widgetKey !== activeWidgetKey) {
+			activeWidgetKey = widgetKey;
+			beginWidgetLoad(widget, newUrl);
+		}
+	} else if (mode === 'standalone' && !widget) {
+		activeWidgetKey = null;
+		pendingWidget = null;
+		internalIframeSrc = null;
+		isWidgetPublished = false;
+		iframeLoaded = false;
+		iframeError = false;
+		errorMessage = '';
+		widgetReady = false;
+		isResolvingUrl = false;
+	}
+
+	$: if (mode === 'controlled' && src) {
+		requestAnimationFrame(() => ensureIframeLoadDetected());
+	}
+
+	$: if (mode === 'standalone' && iframeLoaded && iframeEl?.contentWindow) {
+		sendPropertiesToWidget(designValues, contentValues);
+	}
+
+	function sendPropertiesToWidget(design: any, content: any) {
+		if (!iframeEl?.contentWindow) return;
+		try {
+			const { items, ...genericContent } = content || {};
+
+			let contentItems: any[] | undefined;
+			if (items && typeof items === 'object') {
+				contentItems = Object.entries(items).map(([itemId, props]: [string, any]) => ({
+					id: itemId,
+					...props
+				}));
+			}
+
+			const message = {
+				type: 'widgetic:update',
+				design,
+				content: genericContent,
+				contentItems
+			};
+			iframeEl.contentWindow.postMessage(message, '*');
+			console.log('[WidgetPreview] Sent property update to widget iframe', {
+				designKeys: design ? Object.keys(design) : [],
+				genericContentKeys: Object.keys(genericContent),
+				contentItemsCount: contentItems?.length,
+				iframeSrc: effectiveSrc?.substring(0, 80)
+			});
+		} catch (err) {
+			console.warn('[WidgetPreview] Failed to send postMessage:', err);
+		}
+	}
+
+	function flushPendingMessages() {
+		if (!iframeEl?.contentWindow || pendingMessages.length === 0) return;
+		for (const message of pendingMessages) {
+			iframeEl.contentWindow.postMessage(message, '*');
+		}
+		pendingMessages = [];
+	}
+
+	export function sendMessageToPreview(message: Record<string, unknown>): void {
+		if (mode === 'controlled') {
+			if (iframeEl?.contentWindow) {
+				iframeEl.contentWindow.postMessage(message, '*');
+			}
+			return;
+		}
+		if (widgetReady && iframeEl?.contentWindow) {
+			iframeEl.contentWindow.postMessage(message, '*');
+			return;
+		}
+		pendingMessages.push(message);
+	}
+
+	export function goToItem(index: number) {
+		sendMessageToPreview({ type: 'widgetic:goToItem', index });
+	}
+
+	export function refreshValues() {
+		sendPropertiesToWidget(designValues, contentValues);
+	}
+
+	async function handleIframeLoad() {
+		if (mode === 'controlled') {
+			if (src === 'about:blank' || iframeEl?.src?.includes('about:blank')) return;
+			dispatch('iframeLoad', new Event('load'));
+			requestAnimationFrame(() => nudgeIframePaint());
+			return;
+		}
+
+		if (iframeLoaded) return;
+		iframeLoaded = true;
+		iframeError = false;
+		widgetReady = true;
+		console.log('[WidgetPreview] iframe onload:', effectiveSrc);
+
+		if (iframeEl?.contentWindow) {
+			iframeEl.contentWindow.postMessage({ type: 'widgetic:ping' }, '*');
+			sendPropertiesToWidget(designValues, contentValues);
+			flushPendingMessages();
+			dispatch('load', { src: effectiveSrc });
+		}
+
+		await tick();
+		requestAnimationFrame(() => {
+			nudgeIframePaint();
+		});
+	}
+
+	function handleIframeError(event?: Event) {
+		if (mode === 'controlled') {
+			dispatch('iframeError', event || new Event('error'));
+			return;
+		}
+		iframeError = true;
+		iframeLoaded = false;
+		widgetReady = false;
+		errorMessage = 'Failed to load widget preview.';
+		console.error('[WidgetPreview] Widget iframe onerror:', effectiveSrc);
+		dispatch('error', { src: effectiveSrc });
+	}
+
+	function handleMessage(event: MessageEvent) {
+		const type = event.data?.type;
+		if (type === 'widgetic:ready' || type === 'widgetic:pong') {
+			if (mode === 'standalone') {
+				iframeLoaded = true;
+				iframeError = false;
+				widgetReady = true;
+				console.log('[WidgetPreview] Widget confirmed ready via postMessage');
+				sendPropertiesToWidget(designValues, contentValues);
+				flushPendingMessages();
+			}
+		}
+	}
+
+	function handleRefreshClick() {
+		if (mode === 'standalone' && widget) {
+			beginWidgetLoad(widget, buildWidgetUrl(widget));
+		}
+		dispatch('refresh');
+	}
+
+	function handleOpenInTabClick() {
+		const url = effectiveDisplayUrl || effectiveSrc;
+		if (url) window.open(url, '_blank');
+		dispatch('openInTab');
+	}
+
+	function applyMobileViewport() {
+		const { maxWidth, maxHeight } = getResizeLimits();
+		const w = Math.min(mobileViewportWidth, maxWidth);
+		const h = Math.min(mobileViewportHeight, maxHeight);
+		resizeWidth = w;
+		resizeHeight = h;
+		dispatch('resize', { width: w, height: h });
+		dispatch('mobileViewport', { width: w, height: h });
+	}
+
+	function handleDesktopViewport() {
+		dispatch('desktopViewport');
+	}
+
+	function handleFitToAreaClick() {
+		fitToContainer();
+		dispatch('fitToArea');
+	}
+
+	function clampResizeToLimits() {
+		if (!enableResize || resizeWidth == null || resizeHeight == null) return;
+		const { maxWidth, maxHeight } = getResizeLimits();
+		const nextW = Math.min(resizeWidth, maxWidth);
+		const nextH = Math.min(resizeHeight, maxHeight);
+		if (nextW !== resizeWidth || nextH !== resizeHeight) {
+			resizeWidth = nextW;
+			resizeHeight = nextH;
+			dispatch('resize', { width: nextW, height: nextH });
+		}
+	}
+
+	function startResize(event: PointerEvent, signX: number, signY: number) {
+		event.preventDefault();
+		event.stopPropagation();
+		isResizing = true;
+		const startX = event.clientX;
+		const startY = event.clientY;
+
+		const { maxWidth, maxHeight } = getResizeLimits();
+		const startWidth = resizeWidth ?? maxWidth;
+		const startHeight = resizeHeight ?? maxHeight;
+
+		function onPointerMove(e: PointerEvent) {
+			const deltaX = (e.clientX - startX) * signX * 2;
+			const deltaY = (e.clientY - startY) * signY * 2;
+			resizeWidth = Math.max(MIN_WIDTH, Math.min(maxWidth, startWidth + deltaX));
+			resizeHeight = Math.max(MIN_HEIGHT, Math.min(maxHeight, startHeight + deltaY));
+		}
+
+		function endResize() {
+			isResizing = false;
+			document.removeEventListener('pointermove', onPointerMove);
+			document.removeEventListener('pointerup', endResize);
+			document.removeEventListener('pointercancel', endResize);
+			document.body.style.removeProperty('user-select');
+			document.body.style.removeProperty('cursor');
+			if (resizeWidth != null && resizeHeight != null) {
+				dispatch('resize', { width: resizeWidth, height: resizeHeight });
+			}
+		}
+
+		document.body.style.userSelect = 'none';
+		document.body.style.cursor = 'nwse-resize';
+		document.addEventListener('pointermove', onPointerMove);
+		document.addEventListener('pointerup', endResize);
+		document.addEventListener('pointercancel', endResize);
+	}
+
+	$: if (enableResize && contentContainerEl && (resizeWidth != null || resizeHeight != null)) {
+		clampResizeToLimits();
+	}
+
+	$: if (autoFitStage && resizeStageEl) {
+		stageResizeObserver?.disconnect();
+		stageResizeObserver = new ResizeObserver(() => {
+			fitToContainer();
+		});
+		stageResizeObserver.observe(resizeStageEl);
+		fitToContainer();
+	}
+
+	onMount(() => {
+		window.addEventListener('message', handleMessage);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('message', handleMessage);
+		stageResizeObserver?.disconnect();
+		document.body.style.removeProperty('user-select');
+		document.body.style.removeProperty('cursor');
+	});
+</script>
+
+<div
+	class="{className ? className + ' ' : ''}widget-preview-content-root flex flex-col min-h-0 user-select-none {hasFixedBounds ? 'w-auto shrink-0' : mode === 'standalone' && !showUrlBar ? 'relative overflow-hidden rounded-[4px] bg-transparent' : 'h-full w-full'}"
+	style="{style ? style + ';' : ''}{hasFixedBounds ? `width: ${boundsWidth}px;` : mode === 'standalone' && !showUrlBar ? `width: ${width}; height: ${height};` : ''}"
+>
+	{#if showUrlBar}
+		<div class="preview-content-url-bar flex items-center gap-1.5 pb-1.5 min-w-0">
+			<span
+				class="preview-url-text flex-1 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 min-w-0 font-mono overflow-x-auto whitespace-nowrap"
+			>
+				{effectiveDisplayUrl || effectiveSrc || 'no URL'}
+			</span>
+			<button
+				type="button"
+				onclick={() => {
+					const url = effectiveDisplayUrl || effectiveSrc;
+					if (url) navigator.clipboard.writeText(url);
+				}}
+				title="Copy URL"
+				class="shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 text-sm cursor-pointer"
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+			</button>
+			{#if showUrlBarButtons}
+				<button
+					type="button"
+					onclick={handleRefreshClick}
+					title="Refresh preview"
+					class="shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 text-sm cursor-pointer"
+				>🔄</button>
+				{#if showViewportButtons && enableResize}
+					<button
+						type="button"
+						onclick={handleFitToAreaClick}
+						title="Fit preview to panel"
+						class="preview-fit-to-area-btn shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 cursor-pointer"
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>
+					</button>
+					<button
+						type="button"
+						onclick={applyMobileViewport}
+						title="Mobile viewport"
+						class="preview-mobile-viewport-btn shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 cursor-pointer"
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+					</button>
+					<button
+						type="button"
+						onclick={handleDesktopViewport}
+						title="Desktop viewport (full window)"
+						class="preview-desktop-viewport-btn shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 cursor-pointer"
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+					</button>
+				{/if}
+				<button
+					type="button"
+					onclick={handleOpenInTabClick}
+					title="Open in new tab"
+					class="shrink-0 px-2 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 text-xs cursor-pointer whitespace-nowrap"
+				>↗ New tab</button>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		bind:this={contentContainerEl}
+		class="preview-content-container relative flex items-center justify-center {containerOverflowClass} {hasFixedBounds ? 'rounded-lg bg-gray-50 border border-gray-300 shrink-0' : compactChrome ? 'flex-1 min-h-0 h-full' : showUrlBar || mode === 'controlled' ? 'flex-1 min-h-0 rounded-lg bg-gray-50 border border-gray-300' : 'flex-1 min-h-0 h-full'}"
+		style="{boundedContainerStyle}{containerPaddingStyle}{contentHeight && (showUrlBar || mode === 'controlled') && !compactChrome && !hasFixedBounds ? ` min-height: 0;` : ''}"
+	>
+		{#if forceMockReady}
+			<div class="flex flex-col items-center justify-center w-full h-full bg-gray-100 text-gray-500">
+				<div class="text-4xl mb-2">🚀</div>
+				<div class="font-semibold">Mock Preview Mode</div>
+				<div class="text-sm">Preview simulated as Ready. URL: about:blank</div>
+			</div>
+
+		{:else if mode === 'standalone' && !widget}
+			<div class="widget-preview-select-ct flex items-center justify-center h-full text-sm text-gray-400">
+				Select a widget to preview
+			</div>
+
+		{:else if mode === 'standalone' && widget && !effectiveSrc && !isResolvingUrl && !iframeError}
+			<div class="widget-preview-unpublished-ct flex items-center justify-center h-full w-full">
+				<div class="widget-preview-unpublished-content-ct flex flex-col items-center gap-3 text-center px-6">
+					<div class="w-10 h-10 rounded-full bg-amber-50 flex items-center justify-center">
+						<svg class="w-5 h-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+						</svg>
+					</div>
+					<div>
+						<p class="text-sm font-medium text-gray-600">{widget.name || 'Widget'}</p>
+						<p class="text-xs text-gray-400 mt-1">Not published yet</p>
+					</div>
+					<p class="text-[11px] text-gray-300 max-w-[220px]">
+						Publish the widget in Widget Creator to preview it here.
+					</p>
+				</div>
+			</div>
+
+		{:else if effectiveSrc || (mode === 'standalone' && isResolvingUrl)}
+			<div
+				bind:this={resizeStageEl}
+				class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-hidden flex items-center justify-center' : 'preview-resize-stage-ct relative flex items-center justify-center w-full h-full'}"
+			>
+			<div
+				class="preview-iframe-wrapper relative"
+				style="width: {resizeWidth ? resizeWidth + 'px' : '100%'}; height: {resizeHeight ? resizeHeight + 'px' : '100%'}; transition: {isResizing ? 'none' : 'width 0.2s, height 0.2s'};"
+			>
+				{#if showResizeHandles}
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-tl" onpointerdown={(e) => startResize(e, -1, -1)}></div>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-tr" onpointerdown={(e) => startResize(e, 1, -1)}></div>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-bl" onpointerdown={(e) => startResize(e, -1, 1)}></div>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-br" onpointerdown={(e) => startResize(e, 1, 1)}></div>
+				{/if}
+
+				{#if resizeWidth || resizeHeight}
+					<div
+						class="widget-preview-dimension-badge absolute left-1/2 -translate-x-1/2 text-[10px] bg-black/70 px-1.5 py-px rounded text-gray-300 select-none pointer-events-none z-20 whitespace-nowrap"
+						style="top: calc(100% + 4px);"
+					>
+						{resizeWidth != null ? Math.round(resizeWidth) + 'px' : '100%'} × {resizeHeight != null ? Math.round(resizeHeight) + 'px' : '100%'}
+					</div>
+				{/if}
+
+				<div class="preview-iframe-container relative w-full h-full overflow-hidden {compactChrome ? '' : showUrlBar || mode === 'controlled' || enableResize ? 'border border-gray-300' : ''}">
+					{#if mode === 'standalone' && iframeError}
+						<div class="widget-preview-error-ct absolute inset-0 flex items-center justify-center bg-white z-10 rounded">
+							<div class="widget-preview-error-content-ct flex flex-col items-center gap-2 text-center px-4">
+								<svg class="w-8 h-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+								</svg>
+								<span class="text-sm text-gray-500">{@html errorMessage || 'Failed to load widget.'}</span>
+							</div>
+						</div>
+					{:else if mode === 'controlled' && previewError && !isGeneratingCode}
+						<div class="preview-error-overlay absolute inset-0 z-10 flex h-full flex-col items-center justify-center bg-red-50/95 text-gray-700 p-6">
+							<div class="text-4xl mb-3">⚠️</div>
+							<div class="font-semibold text-lg text-red-600 mb-2">Preview Unavailable</div>
+							<div class="text-sm text-center max-w-md whitespace-pre-line text-gray-600 mb-4">{previewError}</div>
+							<div class="flex gap-3">
+								<button type="button" onclick={() => dispatch('retry')} class="px-3 py-1.5 text-xs rounded border border-blue-500 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer">
+									🔄 Retry {previewRetryCount > 0 ? `(${previewRetryCount})` : ''}
+								</button>
+								<button type="button" onclick={() => dispatch('openInTab')} class="px-3 py-1.5 text-xs rounded border border-gray-300 text-gray-600 bg-white hover:bg-gray-100 cursor-pointer">
+									Open in new tab
+								</button>
+							</div>
+						</div>
+					{/if}
+
+					{#if showStandaloneLoading}
+						<div class="widget-preview-loading-ct absolute inset-0 z-10 flex items-center justify-center bg-gray-50/80">
+							<GenerateLoader title="Loading widget…" subtitle="" size="md" />
+						</div>
+					{:else if showControlledLoading && !isGeneratingCode}
+						<div class="loading-overlay absolute inset-0 z-20 flex items-center justify-center bg-gray-50">
+							<GenerateLoader
+								title={!src && isLoadingUrl
+									? 'Loading Preview…'
+									: previewHydrating
+										? 'Loading Preview…'
+										: 'Loading Preview…'}
+								subtitle={!src && isLoadingUrl
+									? 'Checking widget on Worker…'
+									: previewHydrating
+										? 'Applying composition settings…'
+										: 'Connecting to the widget preview…'}
+								size="lg"
+							/>
+						</div>
+					{/if}
+
+					{#if mode === 'controlled' && previewHasRuntimeError && !isGeneratingCode}
+						<div class="compilation-error-overlay absolute inset-0 z-20 flex flex-col items-center justify-center bg-red-50 text-red-700 p-6">
+							<div class="text-5xl mb-4">⚠️</div>
+							<div class="font-semibold text-xl mb-2">Code Has Compilation Errors</div>
+							<div class="text-sm text-center text-red-600 mb-4 max-w-md">
+								The generated code has syntax or compilation errors (HTTP {previewRuntimeErrorStatus}).
+							</div>
+							<div class="flex gap-3 flex-wrap justify-center">
+								<button type="button" onclick={() => dispatch('fixErrors')} class="px-4 py-2 text-xs rounded bg-red-600 hover:bg-red-700 text-white cursor-pointer border-0">🔧 Fix Errors</button>
+								<button type="button" onclick={() => dispatch('viewErrors')} class="px-3 py-1.5 text-xs rounded border border-orange-400 text-orange-600 bg-white hover:bg-orange-50 cursor-pointer">📋 View Errors</button>
+								<button type="button" onclick={() => dispatch('retryPreview')} class="px-3 py-1.5 text-xs rounded border border-red-300 text-red-600 bg-white hover:bg-red-50 cursor-pointer">🔄 Retry Preview</button>
+							</div>
+						</div>
+					{/if}
+
+					{#if mountedPreviewSrc}
+					{#key mode === 'controlled' ? `${iframeReloadKey}:${mountedPreviewSrc}` : mountedPreviewSrc}
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<iframe
+							bind:this={iframeEl}
+							title={iframeTitle}
+							src={mountedPreviewSrc}
+							class="widget-preview-iframe h-full w-full border-0"
+							tabindex="-1"
+							sandbox={mode === 'controlled' ? undefined : 'allow-scripts allow-popups allow-forms'}
+							loading="eager"
+							allow="clipboard-read; clipboard-write"
+							onload={handleIframeLoad}
+							onerror={handleIframeError}
+						></iframe>
+					{/key}
+					{/if}
+
+					{#if isResizing}
+						<div class="resize-iframe-blocker absolute inset-0 z-5 cursor-nwse-resize" style="background: transparent;"></div>
+					{/if}
+
+					{#if mode === 'controlled' && isGeneratingCode}
+						<GenerateLoader overlay title="Generating code…" size="lg" />
+					{/if}
+				</div>
+			</div>
+			</div>
+
+		{:else if mode === 'controlled'}
+			{#if isLoadingUrl}
+				<div class="flex h-full flex-col items-center justify-center p-6">
+					<GenerateLoader title="Loading Preview…" subtitle="" size="lg" />
+				</div>
+			{:else}
+				<div class="flex h-full flex-col items-center justify-center p-6 text-center text-sm text-gray-600">
+					{#if isGeneratingCode}
+						<GenerateLoader title="Generating code…" size="lg" />
+					{:else if previewError === 'NO_CODE_YET'}
+						<div class="font-semibold text-lg text-gray-700 mb-2">No Code Generated Yet</div>
+					{:else if previewError}
+						<div class="font-semibold text-lg text-red-600 mb-2">Preview Unavailable</div>
+						<div class="text-sm text-gray-600 mb-4">{previewError}</div>
+						<button type="button" onclick={() => dispatch('retry')} class="px-3 py-1.5 text-xs rounded border border-blue-500 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer">🔄 Retry Build</button>
+					{:else if previewLoading}
+						<div class="text-lg font-medium text-gray-700">Building Preview...</div>
+					{:else}
+						<div class="text-lg text-gray-600 mb-2">🖼️ No Preview Available</div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	{#if isResizing}
+		<div
+			class="widget-preview-resize-guard-ct fixed inset-0 z-999999 cursor-nwse-resize"
+			style="background: transparent;"
+			aria-hidden="true"
+		></div>
+	{/if}
+</div>
+
+<style>
+	.preview-url-text::-webkit-scrollbar { display: none; }
+	.preview-url-text { scrollbar-width: none; }
+
+	.preview-resize-handle {
+		position: absolute;
+		width: 16px;
+		height: 16px;
+		z-index: 30;
+		border-radius: 2px;
+	}
+
+	.preview-resize-handle::before,
+	.preview-resize-handle::after {
+		content: '';
+		position: absolute;
+		background: #94a3b8;
+		border-radius: 1px;
+	}
+
+	.preview-resize-handle-tl { top: -4px; left: -4px; cursor: nwse-resize; }
+	.preview-resize-handle-tl::before { top: 0; left: 0; width: 10px; height: 2px; }
+	.preview-resize-handle-tl::after  { top: 0; left: 0; width: 2px; height: 10px; }
+
+	.preview-resize-handle-tr { top: -4px; right: -4px; cursor: nesw-resize; }
+	.preview-resize-handle-tr::before { top: 0; right: 0; width: 10px; height: 2px; }
+	.preview-resize-handle-tr::after  { top: 0; right: 0; width: 2px; height: 10px; }
+
+	.preview-resize-handle-bl { bottom: -4px; left: -4px; cursor: nesw-resize; }
+	.preview-resize-handle-bl::before { bottom: 0; left: 0; width: 10px; height: 2px; }
+	.preview-resize-handle-bl::after  { bottom: 0; left: 0; width: 2px; height: 10px; }
+
+	.preview-resize-handle-br { bottom: -4px; right: -4px; cursor: nwse-resize; }
+	.preview-resize-handle-br::before { bottom: 0; right: 0; width: 10px; height: 2px; }
+	.preview-resize-handle-br::after  { bottom: 0; right: 0; width: 2px; height: 10px; }
+
+	.preview-resize-handle:hover::before,
+	.preview-resize-handle:hover::after {
+		background: #64748b;
+	}
+</style>