@widgetic/editor 4.0.2 → 4.0.4

package/dist/components/MockWidget.svelte

@@ -30,7 +30,7 @@
     };
 
     function handleVote(index: number) {
-        console.log("Vote cast for:", pollData.options[index].label);
+        // console.log("Vote cast for:", pollData.options[index].label);
         // In a real implementation, this would call an API
     }
 </script>

package/dist/components/WidgetPreview.svelte

@@ -59,6 +59,12 @@
 	export let mobileViewportWidth: number = 390;
 	export let mobileViewportHeight: number = 667;
 	export let enableResize: boolean = false;
+	/** Drag only via the preview chrome header (keeps iframe interactive). */
+	export let enableDrag: boolean = false;
+	/** W×H number inputs in the chrome header, live-synced with resize. */
+	export let showDimensionInputs: boolean = false;
+	/** Initial / reset placement inside the stage. */
+	export let defaultStageAlign: 'center' | 'right-half' = 'center';
 	/** 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 */
@@ -87,32 +93,163 @@
 	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;
+	/** Inset padding so resize handles stay inside bounds */
+	const RESIZE_PAD_X = 12;
+	const RESIZE_PAD_TOP = 12;
+	const RESIZE_PAD_BOTTOM = 12;
+	const PREVIEW_CHROME_HEADER_H = 36;
+	const PREVIEW_STROKE = '#3b82f6';
+	const PREVIEW_STROKE_ALT = '#f97316';
 	let isResizing = false;
+	let isDraggingPreview = false;
+	let isSymmetricalResize = false;
+	let previewShellLeft = 0;
+	let previewShellTop = 0;
+	let previewPositionReady = false;
+	let widthInputValue = '';
+	let heightInputValue = '';
 	let contentContainerEl: HTMLElement | null = null;
 	let resizeStageEl: HTMLElement | null = null;
 	let stageResizeObserver: ResizeObserver | null = null;
 
+	$: showPreviewChrome = enableDrag || showDimensionInputs;
+	$: chromeHeaderHeight = showPreviewChrome ? PREVIEW_CHROME_HEADER_H : 0;
+	$: if (resizeWidth != null) widthInputValue = String(Math.round(resizeWidth));
+	$: if (resizeHeight != null) heightInputValue = String(Math.round(resizeHeight));
+	$: previewStrokeColor = isSymmetricalResize ? PREVIEW_STROKE_ALT : PREVIEW_STROKE;
+
 	export function getResizeLimits(): { maxWidth: number; maxHeight: number } {
 		const stageEl = resizeStageEl ?? contentContainerEl;
+		const chromeH = showPreviewChrome ? PREVIEW_CHROME_HEADER_H : 0;
 		if (stageEl) {
 			return {
 				maxWidth: Math.max(MIN_WIDTH, stageEl.clientWidth),
-				maxHeight: Math.max(MIN_HEIGHT, stageEl.clientHeight),
+				maxHeight: Math.max(MIN_HEIGHT, stageEl.clientHeight - chromeH),
 			};
 		}
 		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),
+				maxHeight: Math.max(MIN_HEIGHT, boundsHeight - RESIZE_PAD_TOP - RESIZE_PAD_BOTTOM - chromeH),
 			};
 		}
 		return { maxWidth: 720, maxHeight: 420 };
 	}
 
+	function clampDimension(value: number, min: number, max: number): number {
+		return Math.max(min, Math.min(max, value));
+	}
+
+	function computeDefaultShellPosition(
+		stageWidth: number,
+		stageHeight: number,
+		shellWidth: number,
+		shellHeight: number
+	): { left: number; top: number } {
+		const maxLeft = Math.max(RESIZE_PAD_X, stageWidth - shellWidth - RESIZE_PAD_X);
+		const maxTop = Math.max(RESIZE_PAD_TOP, stageHeight - shellHeight - RESIZE_PAD_BOTTOM);
+		if (defaultStageAlign === 'right-half') {
+			const rightHalfCenterX = stageWidth * 0.75;
+			const left = clampDimension(rightHalfCenterX - shellWidth / 2, RESIZE_PAD_X, maxLeft);
+			const top = clampDimension((stageHeight - shellHeight) / 2, RESIZE_PAD_TOP, maxTop);
+			return { left, top };
+		}
+		const left = clampDimension((stageWidth - shellWidth) / 2, RESIZE_PAD_X, maxLeft);
+		const top = clampDimension((stageHeight - shellHeight) / 2, RESIZE_PAD_TOP, maxTop);
+		return { left, top };
+	}
+
+	/** Dock / reset preview shell to defaultStageAlign. */
+	export function resetPreviewPosition(): void {
+		const stageEl = resizeStageEl ?? contentContainerEl;
+		if (!stageEl || resizeWidth == null || resizeHeight == null) return;
+		if (stageEl.clientWidth < 40 || stageEl.clientHeight < 40) {
+			requestAnimationFrame(() => resetPreviewPosition());
+			return;
+		}
+		const shellWidth = resizeWidth;
+		const shellHeight = resizeHeight + chromeHeaderHeight;
+		const next = computeDefaultShellPosition(
+			stageEl.clientWidth,
+			stageEl.clientHeight,
+			shellWidth,
+			shellHeight
+		);
+		previewShellLeft = next.left;
+		previewShellTop = next.top;
+		previewPositionReady = true;
+		console.log('[WidgetPreview] Reset preview position', {
+			align: defaultStageAlign,
+			left: previewShellLeft,
+			top: previewShellTop,
+		});
+	}
+
+	function ensurePreviewPosition(): void {
+		if (previewPositionReady) return;
+		resetPreviewPosition();
+	}
+
+	function applyDimensionFromInput(dimension: 'width' | 'height', raw: string) {
+		const { maxWidth, maxHeight } = getResizeLimits();
+		const parsed = Number.parseInt(raw, 10);
+		if (!Number.isFinite(parsed)) return;
+		if (dimension === 'width') {
+			resizeWidth = clampDimension(parsed, MIN_WIDTH, maxWidth);
+			widthInputValue = String(Math.round(resizeWidth));
+		} else {
+			resizeHeight = clampDimension(parsed, MIN_HEIGHT, maxHeight);
+			heightInputValue = String(Math.round(resizeHeight));
+		}
+		if (resizeWidth != null && resizeHeight != null) {
+			dispatch('resize', { width: resizeWidth, height: resizeHeight });
+		}
+		console.log('[WidgetPreview] Dimension input', { dimension, value: parsed });
+	}
+
+	function startPreviewDrag(event: PointerEvent) {
+		if (!enableDrag || isResizing) return;
+		const target = event.target as HTMLElement | null;
+		if (target?.closest('input, button, a, label')) return;
+		event.preventDefault();
+		event.stopPropagation();
+		isDraggingPreview = true;
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const startLeft = previewShellLeft;
+		const startTop = previewShellTop;
+		const stageEl = resizeStageEl ?? contentContainerEl;
+		const shellWidth = resizeWidth ?? 0;
+		const shellHeight = (resizeHeight ?? 0) + chromeHeaderHeight;
+
+		function onPointerMove(e: PointerEvent) {
+			if (!stageEl) return;
+			const maxLeft = Math.max(RESIZE_PAD_X, stageEl.clientWidth - shellWidth - RESIZE_PAD_X);
+			const maxTop = Math.max(RESIZE_PAD_TOP, stageEl.clientHeight - shellHeight - RESIZE_PAD_BOTTOM);
+			previewShellLeft = clampDimension(startLeft + (e.clientX - startX), RESIZE_PAD_X, maxLeft);
+			previewShellTop = clampDimension(startTop + (e.clientY - startY), RESIZE_PAD_TOP, maxTop);
+		}
+
+		function endDrag() {
+			isDraggingPreview = false;
+			document.removeEventListener('pointermove', onPointerMove);
+			document.removeEventListener('pointerup', endDrag);
+			document.removeEventListener('pointercancel', endDrag);
+			document.body.style.removeProperty('user-select');
+			document.body.style.removeProperty('cursor');
+			console.log('[WidgetPreview] Preview drag end', {
+				left: previewShellLeft,
+				top: previewShellTop,
+			});
+		}
+
+		document.body.style.userSelect = 'none';
+		document.body.style.cursor = 'move';
+		document.addEventListener('pointermove', onPointerMove);
+		document.addEventListener('pointerup', endDrag);
+		document.addEventListener('pointercancel', endDrag);
+	}
+
 	/** 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 {
@@ -205,7 +342,7 @@
 				const artifactPath = jsPath.match(/\/widgets\/[^/]+\/v\d+\/.+$/i);
 				if (artifactPath) {
 					const proxyUrl = `${apiBaseUrl}${artifactPath[0]}`;
-					console.log('[WidgetPreview] Using API proxy URL (R2):', proxyUrl);
+					// console.log('[WidgetPreview] Using API proxy URL (R2):', proxyUrl);
 					return proxyUrl;
 				}
 			}
@@ -215,11 +352,11 @@
 
 		if (widgetBuilderUrl && w.id) {
 			const previewUrl = `${widgetBuilderUrl.replace(/\/+$/, '')}/preview/${w.id}`;
-			console.log('[WidgetPreview] Using Worker preview URL (unpublished):', previewUrl);
+			// 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);
+		// console.log('[WidgetPreview] Widget not published and no Worker URL:', w.name, w.id);
 		return null;
 	}
 
@@ -228,32 +365,6 @@
 		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;
@@ -262,20 +373,16 @@
 		widgetReady = false;
 		errorMessage = '';
 		pendingMessages = [];
+		isResolvingUrl = false;
 
 		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();
+		// console.log('[WidgetPreview] Setting widget URL:', url);
+		internalIframeSrc = url;
+		void tick().then(() => {
 			requestAnimationFrame(() => {
 				ensureIframeLoadDetected();
 			});
@@ -299,7 +406,7 @@
 
 		window.setTimeout(() => {
 			if (mode === 'standalone' && !iframeLoaded && !iframeError && iframeEl && effectiveSrc) {
-				console.log('[WidgetPreview] Fallback: marking iframe loaded after ping timeout');
+				// console.log('[WidgetPreview] Fallback: marking iframe loaded after ping timeout');
 				void handleIframeLoad();
 			}
 		}, 400);
@@ -353,12 +460,12 @@
 				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)
-			});
+			// 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);
 		}
@@ -406,7 +513,7 @@
 		iframeLoaded = true;
 		iframeError = false;
 		widgetReady = true;
-		console.log('[WidgetPreview] iframe onload:', effectiveSrc);
+		// console.log('[WidgetPreview] iframe onload:', effectiveSrc);
 
 		if (iframeEl?.contentWindow) {
 			iframeEl.contentWindow.postMessage({ type: 'widgetic:ping' }, '*');
@@ -426,6 +533,15 @@
 			dispatch('iframeError', event || new Event('error'));
 			return;
 		}
+		if (!triedFallback && pendingWidget) {
+			const fallbackUrl = tryFallbackUrl(pendingWidget);
+			if (fallbackUrl && fallbackUrl !== internalIframeSrc) {
+				triedFallback = true;
+				// console.log('[WidgetPreview] Primary iframe load failed, trying Worker fallback:', fallbackUrl);
+				internalIframeSrc = fallbackUrl;
+				return;
+			}
+		}
 		iframeError = true;
 		iframeLoaded = false;
 		widgetReady = false;
@@ -441,7 +557,7 @@
 				iframeLoaded = true;
 				iframeError = false;
 				widgetReady = true;
-				console.log('[WidgetPreview] Widget confirmed ready via postMessage');
+				// console.log('[WidgetPreview] Widget confirmed ready via postMessage');
 				sendPropertiesToWidget(designValues, contentValues);
 				flushPendingMessages();
 			}
@@ -496,22 +612,64 @@
 		event.preventDefault();
 		event.stopPropagation();
 		isResizing = true;
+		isSymmetricalResize = event.altKey;
 		const startX = event.clientX;
 		const startY = event.clientY;
-
+		const startLeft = previewShellLeft;
+		const startTop = previewShellTop;
 		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));
+			const useAlt = e.altKey;
+			isSymmetricalResize = useAlt;
+			const dx = e.clientX - startX;
+			const dy = e.clientY - startY;
+
+			if (useAlt) {
+				const deltaW = signX !== 0 ? dx * signX * 2 : 0;
+				const deltaH = signY !== 0 ? dy * signY * 2 : 0;
+				const nextW = clampDimension(startWidth + deltaW, MIN_WIDTH, maxWidth);
+				const nextH = clampDimension(startHeight + deltaH, MIN_HEIGHT, maxHeight);
+				resizeWidth = nextW;
+				resizeHeight = nextH;
+				previewShellLeft = startLeft + (startWidth - nextW) / 2;
+				previewShellTop = startTop + (startHeight - nextH) / 2;
+			} else {
+				let nextW = startWidth;
+				let nextH = startHeight;
+				let nextLeft = startLeft;
+				let nextTop = startTop;
+
+				if (signX === -1) {
+					nextW = clampDimension(startWidth - dx, MIN_WIDTH, maxWidth);
+					nextLeft = startLeft + (startWidth - nextW);
+				} else if (signX === 1) {
+					nextW = clampDimension(startWidth + dx, MIN_WIDTH, maxWidth);
+				}
+
+				if (signY === -1) {
+					nextH = clampDimension(startHeight - dy, MIN_HEIGHT, maxHeight);
+					nextTop = startTop + (startHeight - nextH);
+				} else if (signY === 1) {
+					nextH = clampDimension(startHeight + dy, MIN_HEIGHT, maxHeight);
+				}
+
+				resizeWidth = nextW;
+				resizeHeight = nextH;
+				previewShellLeft = nextLeft;
+				previewShellTop = nextTop;
+			}
+
+			if (resizeWidth != null && resizeHeight != null) {
+				dispatch('resize', { width: resizeWidth, height: resizeHeight });
+			}
 		}
 
 		function endResize() {
 			isResizing = false;
+			isSymmetricalResize = false;
 			document.removeEventListener('pointermove', onPointerMove);
 			document.removeEventListener('pointerup', endResize);
 			document.removeEventListener('pointercancel', endResize);
@@ -523,7 +681,14 @@
 		}
 
 		document.body.style.userSelect = 'none';
-		document.body.style.cursor = 'nwse-resize';
+		document.body.style.cursor =
+			signX !== 0 && signY !== 0
+				? signX * signY > 0
+					? 'nwse-resize'
+					: 'nesw-resize'
+				: signX !== 0
+					? 'ew-resize'
+					: 'ns-resize';
 		document.addEventListener('pointermove', onPointerMove);
 		document.addEventListener('pointerup', endResize);
 		document.addEventListener('pointercancel', endResize);
@@ -531,6 +696,7 @@
 
 	$: if (enableResize && contentContainerEl && (resizeWidth != null || resizeHeight != null)) {
 		clampResizeToLimits();
+		ensurePreviewPosition();
 	}
 
 	$: if (autoFitStage && resizeStageEl) {
@@ -544,6 +710,18 @@
 
 	onMount(() => {
 		window.addEventListener('message', handleMessage);
+		const onAltDown = (e: KeyboardEvent) => {
+			if (e.key === 'Alt') isSymmetricalResize = true;
+		};
+		const onAltUp = (e: KeyboardEvent) => {
+			if (e.key === 'Alt' && !isResizing) isSymmetricalResize = false;
+		};
+		window.addEventListener('keydown', onAltDown);
+		window.addEventListener('keyup', onAltUp);
+		return () => {
+			window.removeEventListener('keydown', onAltDown);
+			window.removeEventListener('keyup', onAltUp);
+		};
 	});
 
 	onDestroy(() => {
@@ -657,12 +835,66 @@
 		{: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'}"
+				class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-hidden' : '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'};"
+				class="preview-iframe-shell relative flex flex-col {enableResize ? 'preview-iframe-shell-positioned' : ''}"
+				class:preview-iframe-shell-symmetrical={isSymmetricalResize}
+				style="{enableResize
+					? `position: absolute; left: ${previewShellLeft}px; top: ${previewShellTop}px; width: ${resizeWidth ? resizeWidth + 'px' : '100%'};`
+					: `width: ${resizeWidth ? resizeWidth + 'px' : '100%'}; height: ${resizeHeight ? resizeHeight + 'px' : '100%'};`} transition: {isResizing || isDraggingPreview ? 'none' : 'width 0.2s, height 0.2s, left 0.15s, top 0.15s'};"
 			>
+				{#if showPreviewChrome}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="preview-chrome-header flex items-center gap-2 h-9 px-2 border border-b-0 rounded-t-md bg-white select-none {enableDrag ? 'cursor-move' : ''}"
+						style="border-color: {previewStrokeColor};"
+						onpointerdown={startPreviewDrag}
+					>
+						{#if enableDrag}
+							<span class="preview-chrome-drag-grip shrink-0 text-gray-400 text-xs leading-none" title="Drag preview" aria-hidden="true">⠿</span>
+						{/if}
+						<span class="preview-chrome-title text-[11px] font-semibold uppercase tracking-wide text-gray-500 shrink-0">Preview</span>
+						{#if showDimensionInputs}
+							<div class="preview-chrome-dimensions ml-auto flex items-center gap-1.5">
+								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
+									<span>W</span>
+									<input
+										type="number"
+										min={MIN_WIDTH}
+										class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
+										value={widthInputValue}
+										oninput={(e) => {
+											widthInputValue = e.currentTarget.value;
+											applyDimensionFromInput('width', e.currentTarget.value);
+										}}
+										onpointerdown={(e) => e.stopPropagation()}
+									/>
+								</label>
+								<span class="text-[10px] text-gray-400">×</span>
+								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
+									<span>H</span>
+									<input
+										type="number"
+										min={MIN_HEIGHT}
+										class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
+										value={heightInputValue}
+										oninput={(e) => {
+											heightInputValue = e.currentTarget.value;
+											applyDimensionFromInput('height', e.currentTarget.value);
+										}}
+										onpointerdown={(e) => e.stopPropagation()}
+									/>
+								</label>
+							</div>
+						{/if}
+					</div>
+				{/if}
+
+				<div
+					class="preview-iframe-wrapper relative"
+					style="width: 100%; height: {resizeHeight ? resizeHeight + 'px' : '100%'};"
+				>
 				{#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>
@@ -672,9 +904,17 @@
 					<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>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-t" onpointerdown={(e) => startResize(e, 0, -1)}></div>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-r" onpointerdown={(e) => startResize(e, 1, 0)}></div>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-b" onpointerdown={(e) => startResize(e, 0, 1)}></div>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div class="preview-resize-handle preview-resize-handle-l" onpointerdown={(e) => startResize(e, -1, 0)}></div>
 				{/if}
 
-				{#if resizeWidth || resizeHeight}
+				{#if (resizeWidth || resizeHeight) && !showDimensionInputs}
 					<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);"
@@ -683,7 +923,10 @@
 					</div>
 				{/if}
 
-				<div class="preview-iframe-container relative w-full h-full overflow-hidden {compactChrome ? '' : showUrlBar || mode === 'controlled' || enableResize ? 'border border-gray-300' : ''}">
+				<div
+					class="preview-iframe-container relative w-full h-full overflow-hidden {compactChrome && !enableResize ? '' : showUrlBar || mode === 'controlled' || enableResize ? 'border' : ''}"
+					style={enableResize ? `border-color: ${previewStrokeColor}; border-radius: ${showPreviewChrome ? '0 0 6px 6px' : '6px'};` : ''}
+				>
 					{#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">
@@ -734,9 +977,14 @@
 					{#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 class="font-semibold text-xl mb-2">
+								{previewError && /TypeError|Uncaught|is not a function|is not defined/i.test(previewError)
+									? 'Widget runtime error'
+									: 'Code Has Compilation Errors'}
+							</div>
+							<div class="text-sm text-center text-red-600 mb-4 max-w-md whitespace-pre-line">
+								{previewError
+									|| `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>
@@ -755,7 +1003,7 @@
 							src={mountedPreviewSrc}
 							class="widget-preview-iframe h-full w-full border-0"
 							tabindex="-1"
-							sandbox={mode === 'controlled' ? undefined : 'allow-scripts allow-popups allow-forms'}
+							sandbox={mode === 'controlled' ? undefined : 'allow-scripts allow-popups allow-forms allow-same-origin'}
 							loading="eager"
 							allow="clipboard-read; clipboard-write"
 							onload={handleIframeLoad}
@@ -772,6 +1020,7 @@
 						<GenerateLoader overlay title="Generating code…" subtitle="" size="lg" />
 					{/if}
 				</div>
+				</div>
 			</div>
 			</div>
 
@@ -800,10 +1049,10 @@
 		{/if}
 	</div>
 
-	{#if isResizing}
+	{#if isResizing || isDraggingPreview}
 		<div
-			class="widget-preview-resize-guard-ct fixed inset-0 z-999999 cursor-nwse-resize"
-			style="background: transparent;"
+			class="widget-preview-resize-guard-ct fixed inset-0 z-999999"
+			style="background: transparent; cursor: {isDraggingPreview ? 'move' : 'nwse-resize'};"
 			aria-hidden="true"
 		></div>
 	{/if}
@@ -815,38 +1064,39 @@
 
 	.preview-resize-handle {
 		position: absolute;
-		width: 16px;
-		height: 16px;
+		width: 10px;
+		height: 10px;
 		z-index: 30;
-		border-radius: 2px;
-	}
-
-	.preview-resize-handle::before,
-	.preview-resize-handle::after {
-		content: '';
-		position: absolute;
-		background: #94a3b8;
+		box-sizing: border-box;
+		background: #ffffff;
+		border: 1.5px solid #3b82f6;
 		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-iframe-shell-symmetrical .preview-resize-handle,
+	.preview-iframe-shell-symmetrical .preview-iframe-container {
+		border-color: #f97316 !important;
+	}
 
-	.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-chrome-header button:focus,
+	.preview-chrome-header button:focus-visible,
+	.preview-chrome-header input:focus,
+	.preview-chrome-header input:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
 
-	.preview-resize-handle:hover::before,
-	.preview-resize-handle:hover::after {
-		background: #64748b;
+	.preview-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; }
+	.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; }
+	.preview-resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
+	.preview-resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; }
+	.preview-resize-handle-t { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
+	.preview-resize-handle-b { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
+	.preview-resize-handle-l { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
+	.preview-resize-handle-r { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
+
+	.preview-resize-handle:hover {
+		background: #eff6ff;
+		border-color: #2563eb;
 	}
 </style>