@widgetic/creator 0.3.59 → 0.3.60

package/dist/components/WidgetDetails.svelte

@@ -3496,9 +3496,15 @@
 			{/if}
 
 			<div
-				class="widget-details-debug-buttons relative z-[1] ml-auto flex items-center shrink-0"
+				class="widget-details-header-actions relative z-[1] ml-auto flex items-center gap-2 shrink-0"
 				bind:this={widgetDetailsDebugButtonsEl}
 			>
+				<div class="widget-details-header-meta flex items-center gap-2 shrink-0 min-w-0">
+					<slot name="header-meta" />
+					<div class="widget-info-version-history-slot relative z-20 shrink-0">
+						<slot name="version-history" />
+					</div>
+				</div>
 				{#if SHOW_PANEL_PREVIEW_COLUMN}
 				<HoverTooltip text={previewColumnCollapsed ? 'Open live preview' : 'Close live preview'}>
 				<button
@@ -3533,7 +3539,7 @@
 	</div>
 
 	<!-- Widget Details Content: Two-column layout -->
-	<div class="widget-details-content-wrapper relative m-2.5 min-w-[460px] min-h-0 flex-1 overflow-hidden">
+	<div class="widget-details-content-wrapper relative m-0 min-w-[460px] min-h-0 flex-1 overflow-hidden">
 	<div class="widget-details-two-col flex h-full min-h-0 min-w-[460px] gap-0 overflow-hidden">
 
 	<!-- ═══ LEFT COLUMN: Step Content (scrollable) ═══ -->
@@ -3541,43 +3547,13 @@
 		class="widget-details-left-col flex flex-col min-w-[460px] min-h-0 overflow-hidden relative"
 		style="width: {previewColumnCollapsed ? 100 : leftColPercent}%; flex: 0 0 {previewColumnCollapsed ? 100 : leftColPercent}%;"
 	>
-	<div class="widget-details-left-border absolute inset-y-0 left-0 right-0 border border-gray-300 rounded-lg pointer-events-none z-10"></div>
+	<div class="widget-details-left-border absolute inset-y-0 left-0 right-0 border border-gray-300 rounded-none pointer-events-none z-10"></div>
 
 	{#if selectedWidgetId}
 	<div class="widget-details-left-stack relative z-0 flex flex-col h-full min-h-0 min-w-[460px] overflow-hidden">
-	<!-- Sticky Widget Info Bar (always visible above scrollable content) -->
-	<div class="widget-info-sticky-bar relative flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 rounded-t-lg shrink-0 gap-2 min-w-0 z-20 overflow-visible">
-		<div class="widget-info-name flex items-center min-w-0 gap-1 text-sm text-gray-700">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<span
-				class="widget-id-label text-[11px] font-mono text-gray-500 cursor-pointer hover:text-gray-700 truncate"
-				title="Click to copy widget ID"
-				onclick={() => { navigator.clipboard.writeText(selectedWidgetId); showToast('success', 'Widget ID copied', { duration: 2000 }); }}
-			>Widget id: {selectedWidgetId}</span>
-		</div>
-		<div class="widget-info-meta flex items-center gap-2 shrink-0">
-			{#if saveStatus === 'saving'}
-				<span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 animate-pulse">Saving...</span>
-			{:else if saveStatus === 'saved'}
-				<span class="text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">Saved</span>
-			{:else if saveStatus === 'error'}
-				<span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-700">Save Error</span>
-			{/if}
-			{#if debugMode}
-			<span class="text-[10px] text-gray-500">
-				Commit: <span class="font-mono font-medium text-gray-600" title={lastCommitId || ''}>{lastCommitId ? lastCommitId.substring(0, 8) : '—'}</span>
-			</span>
-			{/if}
-			<div class="widget-info-version-history-slot relative z-20 shrink-0">
-				<slot name="version-history" />
-			</div>
-		</div>
-	</div>
-
 	<!-- Scrollable step content -->
 	<div
-		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-b-lg overflow-hidden overflow-x-hidden"
+		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-none overflow-hidden overflow-x-hidden"
 		bind:this={contentContainerEl}
 	>
 	<div class="actions-panel widget-details-actions-panel relative flex flex-col flex-1 min-h-0">

package/dist/components/WidgetDetails.svelte.d.ts

@@ -191,6 +191,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'header-meta': {};
     'version-history': {};
     'code-generation-models': {};
     'code-generation-status': {};

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -3,30 +3,98 @@
 	 * Live iframe + chrome over Fabric WidgetShapes (W3).
 	 * Body drag is locked on the shape; move via the top drag bar so the iframe stays interactive.
 	 */
-	let className = '';
-	export { className as class };
-	export let style = '';
-
-	export let enabled = true;
-	/** Screen-space boxes for widget shapes currently on the canvas. */
-	export let getRects:
-		| (() => Array<{ widgetId: string; left: number; top: number; width: number; height: number }>)
-		| null = null;
-	/** Resolve a live preview URL for a widget (CDN published or Worker preview). */
-	export let resolveUrl: ((widgetId: string) => string | null) | null = null;
-	/** Currently selected WidgetShape id (highlights chrome). */
-	export let selectedWidgetId: string | null = null;
-	/** Translate shape by screen-pixel delta. */
-	export let onTranslate:
-		| ((widgetId: string, dxScreen: number, dyScreen: number) => void)
-		| null = null;
-	/** Select the Fabric WidgetShape (e.g. when pressing the drag bar). */
-	export let onSelectShape: ((widgetId: string) => void) | null = null;
-	/** Open Widget Details / chat for this widget. */
-	export let onOpenChat: ((widgetId: string) => void) | null = null;
-
-	const DRAG_BAR_H = 28;
+	import { onMount } from 'svelte';
+
+	interface VersionOption {
+		id: string;
+		/** Full list label, e.g. "Version 9". */
+		label: string;
+		/** Compact trigger label, e.g. "v9". */
+		shortLabel?: string;
+		/** Published date/time shown in the list. */
+		dateLabel?: string;
+		/** True when this option is the live published version. */
+		isLive?: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		style?: string;
+		enabled?: boolean;
+		/** Screen-space boxes for widget shapes currently on the canvas. */
+		getRects?:
+			| (() => Array<{ widgetId: string; left: number; top: number; width: number; height: number }>)
+			| null;
+		/** Resolve a live preview URL for a widget (CDN published or Worker preview). */
+		resolveUrl?: ((widgetId: string) => string | null) | null;
+		/** Currently selected WidgetShape id (highlights chrome). */
+		selectedWidgetId?: string | null;
+		/** Translate shape by screen-pixel delta. */
+		onTranslate?: ((widgetId: string, dxScreen: number, dyScreen: number) => void) | null;
+		/** Fired once when a chrome drag ends (mark canvas dirty / history). */
+		onTranslateEnd?: ((widgetId: string) => void) | null;
+		/** Select the Fabric WidgetShape (e.g. when pressing the drag bar). */
+		onSelectShape?: ((widgetId: string) => void) | null;
+		/** Open Widget Details / chat for this widget. */
+		onOpenChat?: ((widgetId: string) => void) | null;
+		/** Resolve display title for the chrome bar. */
+		resolveTitle?: ((widgetId: string) => string | null) | null;
+		/** Current version label, e.g. "v3" or "Preview". */
+		resolveVersionLabel?: ((widgetId: string) => string | null) | null;
+		/** Available version options for the select (null/empty → show label only). */
+		resolveVersionOptions?: ((widgetId: string) => Array<VersionOption> | null) | null;
+		/** Currently selected version option id. */
+		resolveVersionSelectedId?: ((widgetId: string) => string | null) | null;
+		onVersionChange?: ((widgetId: string, versionId: string) => void) | null;
+		/** Promote a published version to Live (same as chat Set live). */
+		onSetLive?: ((widgetId: string, version: number) => void) | null;
+		/** Version currently being set live (disables that row's button). */
+		settingLiveVersion?: number | null;
+		/** Optional notify after local iframe reload (does not capture screenshots). */
+		onRefresh?: ((widgetId: string) => void) | null;
+		/** Bump when widget names / publish state change so chrome re-renders. */
+		titleRevision?: number;
+		/** Whether this widget has unpublished codegen ahead of Live (show Publish). */
+		resolveCanPublish?: ((widgetId: string) => boolean) | null;
+		/** Publish HEAD as a new live version (shape bar Publish button). */
+		onPublish?: ((widgetId: string) => void) | null;
+		/** True while publish is in flight for this widget. */
+		resolveIsPublishing?: ((widgetId: string) => boolean) | null;
+	}
+
+	let {
+		class: className = '',
+		style = '',
+		enabled = true,
+		getRects = null,
+		resolveUrl = null,
+		selectedWidgetId = null,
+		onTranslate = null,
+		onTranslateEnd = null,
+		onSelectShape = null,
+		onOpenChat = null,
+		resolveTitle = null,
+		resolveVersionLabel = null,
+		resolveVersionOptions = null,
+		resolveVersionSelectedId = null,
+		onVersionChange = null,
+		onSetLive = null,
+		settingLiveVersion = null,
+		onRefresh = null,
+		titleRevision = 0,
+		resolveCanPublish = null,
+		onPublish = null,
+		resolveIsPublishing = null,
+	}: Props = $props();
+
+	const DRAG_BAR_H = 30;
 	const BAR_SHAPE_GAP = 4;
+	const SHOW_TITLE_MIN_WIDTH = 160;
+	/** Minimum chrome width when expanded so version + Live/Publish controls fit. */
+	const MIN_EXPANDED_CHROME_WIDTH = 220;
+	const IFRAME_INSET_PX = 2;
+	/** ~5 version rows before the menu scrolls (matches chat history panel). */
+	const VERSION_MENU_MAX_H = '12.5rem';
 
 	type ShapeRect = {
 		widgetId: string;
@@ -37,8 +105,15 @@
 		src: string;
 	};
 
-	let overlays: ShapeRect[] = [];
-	let draggingWidgetId: string | null = null;
+	let overlays = $state<ShapeRect[]>([]);
+	let draggingWidgetId = $state<string | null>(null);
+	let resizingWidgetId = $state<string | null>(null);
+	/** Per-widget cache-bust tokens for Refresh (iframe reload only). */
+	let reloadTokens = $state<Record<string, number>>({});
+	/** Which shape chrome version menu is open. */
+	let openVersionMenuWidgetId = $state<string | null>(null);
+	/** Hide Fabric placeholder flash — show loader until iframe fires load. */
+	let iframeLoadedByWidgetId = $state<Record<string, boolean>>({});
 
 	export function sync(): void {
 		if (!enabled || !getRects || !resolveUrl) {
@@ -46,10 +121,15 @@
 			return;
 		}
 		const next: ShapeRect[] = [];
+		const nextLoaded = { ...iframeLoadedByWidgetId };
 		for (const rect of getRects() || []) {
 			if (!rect?.widgetId) continue;
 			const src = resolveUrl(rect.widgetId);
 			if (!src) continue;
+			const prev = overlays.find((o) => o.widgetId === rect.widgetId);
+			if (!prev || prev.src !== src) {
+				nextLoaded[rect.widgetId] = false;
+			}
 			next.push({
 				widgetId: rect.widgetId,
 				left: rect.left,
@@ -59,20 +139,34 @@
 				src,
 			});
 		}
+		iframeLoadedByWidgetId = nextLoaded;
 		overlays = next;
 	}
 
+	function buildIframeSrc(baseSrc: string, widgetId: string): string {
+		const token = reloadTokens[widgetId];
+		if (!token) return baseSrc;
+		try {
+			const url = new URL(baseSrc, typeof window !== 'undefined' ? window.location.href : 'http://localhost');
+			url.searchParams.set('_t', String(token));
+			return url.toString();
+		} catch (err) {
+			console.warn('[WidgetShapeLivePreviews] buildIframeSrc failed', err);
+			const cleaned = baseSrc.replace(/([?&])_t=\d+/g, '$1').replace(/[?&]$/, '');
+			const sep = cleaned.includes('?') ? '&' : '?';
+			return `${cleaned}${sep}_t=${token}`;
+		}
+	}
+
 	function startShapeDrag(event: PointerEvent, widgetId: string) {
 		const target = event.target as HTMLElement | null;
-		if (target?.closest('button, a, input')) return;
+		if (target?.closest('button, a, input, select, label')) return;
 		event.preventDefault();
 		event.stopPropagation();
 		onSelectShape?.(widgetId);
 		draggingWidgetId = widgetId;
-		const startX = event.clientX;
-		const startY = event.clientY;
-		let lastX = startX;
-		let lastY = startY;
+		let lastX = event.clientX;
+		let lastY = event.clientY;
 
 		function onMove(e: PointerEvent) {
 			const dx = e.clientX - lastX;
@@ -90,6 +184,7 @@
 			document.removeEventListener('pointercancel', endDrag);
 			document.body.style.removeProperty('user-select');
 			document.body.style.removeProperty('cursor');
+			onTranslateEnd?.(widgetId);
 			console.log('[WidgetShapeLivePreviews] Drag end', widgetId.substring(0, 8));
 		}
 
@@ -107,6 +202,102 @@
 		onSelectShape?.(widgetId);
 		onOpenChat?.(widgetId);
 	}
+
+	function handleRefreshClick(event: MouseEvent, widgetId: string) {
+		event.preventDefault();
+		event.stopPropagation();
+		onSelectShape?.(widgetId);
+		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: false };
+		reloadTokens = { ...reloadTokens, [widgetId]: Date.now() };
+		onRefresh?.(widgetId);
+		console.log('[WidgetShapeLivePreviews] Refresh iframe', widgetId.substring(0, 8));
+	}
+
+	function markIframeLoaded(widgetId: string) {
+		if (iframeLoadedByWidgetId[widgetId]) return;
+		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: true };
+	}
+
+	function getTitle(widgetId: string): string {
+		return resolveTitle?.(widgetId)?.trim() || 'Widget';
+	}
+
+	function getVersionOptions(widgetId: string): VersionOption[] {
+		return resolveVersionOptions?.(widgetId) || [];
+	}
+
+	function resolveSelectedVersionId(widgetId: string, options: VersionOption[]): string {
+		const fromParent = resolveVersionSelectedId?.(widgetId)?.trim();
+		if (fromParent && options.some((o) => o.id === fromParent)) return fromParent;
+		const liveOpt = options.find((o) => o.isLive);
+		return liveOpt?.id || options[0]?.id || '';
+	}
+
+	function getSelectedOption(widgetId: string, options: VersionOption[]): VersionOption | null {
+		if (!options.length) return null;
+		const id = resolveSelectedVersionId(widgetId, options);
+		return options.find((o) => o.id === id) || options[0] || null;
+	}
+
+	function triggerLabelForOption(option: VersionOption | null, fallback: string): string {
+		if (!option) return fallback;
+		return (option.shortLabel || option.label || fallback).trim();
+	}
+
+	function toggleVersionMenu(event: MouseEvent, widgetId: string) {
+		event.preventDefault();
+		event.stopPropagation();
+		onSelectShape?.(widgetId);
+		openVersionMenuWidgetId = openVersionMenuWidgetId === widgetId ? null : widgetId;
+	}
+
+	function selectVersion(event: MouseEvent, widgetId: string, versionId: string) {
+		event.preventDefault();
+		event.stopPropagation();
+		openVersionMenuWidgetId = null;
+		if (!versionId) return;
+		onVersionChange?.(widgetId, versionId);
+		console.log('[WidgetShapeLivePreviews] Version change', widgetId.substring(0, 8), versionId);
+	}
+
+	function handleSetLiveClick(event: MouseEvent, widgetId: string, versionId: string) {
+		event.preventDefault();
+		event.stopPropagation();
+		const version = versionId.startsWith('v:') ? parseInt(versionId.slice(2), 10) : NaN;
+		if (!Number.isFinite(version)) return;
+		onSetLive?.(widgetId, version);
+		openVersionMenuWidgetId = null;
+		console.log('[WidgetShapeLivePreviews] Set live', widgetId.substring(0, 8), version);
+	}
+
+	function handleDocumentPointerDown(event: PointerEvent) {
+		if (!openVersionMenuWidgetId) return;
+		const target = event.target as HTMLElement | null;
+		if (target?.closest?.(`[data-version-menu-for="${openVersionMenuWidgetId}"]`)) return;
+		openVersionMenuWidgetId = null;
+	}
+
+	function handleDocumentKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && openVersionMenuWidgetId) {
+			openVersionMenuWidgetId = null;
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener('pointerdown', handleDocumentPointerDown, true);
+		document.addEventListener('keydown', handleDocumentKeydown);
+		const onShapePointerBlock = (event: Event) => {
+			const detail = (event as CustomEvent<{ widgetId?: string | null; active?: boolean }>).detail;
+			if (!detail) return;
+			resizingWidgetId = detail.active && detail.widgetId ? detail.widgetId : null;
+		};
+		window.addEventListener('widgetic:widget-shape-pointer-block', onShapePointerBlock);
+		return () => {
+			document.removeEventListener('pointerdown', handleDocumentPointerDown, true);
+			document.removeEventListener('keydown', handleDocumentKeydown);
+			window.removeEventListener('widgetic:widget-shape-pointer-block', onShapePointerBlock);
+		};
+	});
 </script>
 
 {#if enabled && overlays.length > 0}
@@ -114,57 +305,237 @@
 		{#each overlays as overlay (overlay.widgetId)}
 			{@const isSelected = selectedWidgetId === overlay.widgetId}
 			{@const isDragging = draggingWidgetId === overlay.widgetId}
+			{@const isResizing = resizingWidgetId === overlay.widgetId}
+			{@const blockIframePointer = isDragging || isResizing}
 			{@const chromeTop = overlay.top - DRAG_BAR_H - BAR_SHAPE_GAP}
+			{@const showExpandedChrome = isSelected || overlay.width >= SHOW_TITLE_MIN_WIDTH}
+			{@const chromeWidth = showExpandedChrome
+				? Math.max(overlay.width, MIN_EXPANDED_CHROME_WIDTH)
+				: overlay.width}
+			{@const titleText = (titleRevision, getTitle(overlay.widgetId))}
+			{@const versionMenuOpen = openVersionMenuWidgetId === overlay.widgetId}
+			{@const canPublish = (titleRevision, !!resolveCanPublish?.(overlay.widgetId))}
+			{@const isPublishing = (titleRevision, !!resolveIsPublishing?.(overlay.widgetId))}
+			{@const versionOptions = (titleRevision, getVersionOptions(overlay.widgetId))}
+			{@const selectedVersion = getSelectedOption(overlay.widgetId, versionOptions)}
+			{@const versionTriggerText = triggerLabelForOption(
+				selectedVersion,
+				resolveVersionLabel?.(overlay.widgetId)?.trim() || '—',
+			)}
 			<div
 				class="widget-shape-live-chrome-ct fixed"
-				style="left: {overlay.left}px; top: {chromeTop}px; width: {overlay.width}px; height: {DRAG_BAR_H + BAR_SHAPE_GAP + overlay.height}px; z-index: 1;"
+				style="left: {overlay.left}px; top: {chromeTop}px; width: {chromeWidth}px; height: {DRAG_BAR_H + BAR_SHAPE_GAP + overlay.height}px; z-index: 1;"
 			>
 				<!-- Drag bar sits between rotation control and the shape top stroke -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="widget-shape-drag-bar pointer-events-auto absolute left-0 right-0 top-0 flex h-7 items-center gap-1 rounded-t-md border border-b-0 bg-white/95 px-1.5 shadow-sm select-none
+					class="widget-shape-drag-bar pointer-events-auto absolute left-0 right-0 top-0 flex items-center gap-1 rounded-t-md border border-b-0 bg-white/95 px-1.5 shadow-sm select-none
 						{isSelected ? 'border-blue-400' : 'border-gray-300'}"
-					style="height: {DRAG_BAR_H}px; cursor: grab;"
+					style="height: {DRAG_BAR_H}px; cursor: grab; min-width: {showExpandedChrome ? MIN_EXPANDED_CHROME_WIDTH : 0}px;"
 					title="Drag widget"
 					onpointerdown={(e) => startShapeDrag(e, overlay.widgetId)}
 				>
 					<span class="widget-shape-drag-grip shrink-0 text-xs leading-none text-gray-400" aria-hidden="true">⠿</span>
-					{#if isSelected}
+
+					{#if showExpandedChrome}
+						<span
+							class="widget-shape-title-el min-w-0 flex-1 truncate text-[11px] font-medium text-gray-700"
+							title={titleText}
+						>{titleText}</span>
+
+						{#if versionOptions.length > 0}
+							<div
+								class="widget-shape-version-ct relative flex shrink-0 items-center gap-0.5"
+								data-version-menu-for={overlay.widgetId}
+							>
+								<button
+									type="button"
+									class="widget-shape-version-trigger flex min-w-[2.25rem] max-w-[4rem] cursor-pointer items-center gap-0.5 rounded border border-emerald-300 bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-emerald-800 hover:bg-emerald-100"
+									title="Open version list — Live is what visitors see on your website"
+									aria-haspopup="listbox"
+									aria-expanded={versionMenuOpen}
+									onclick={(e) => toggleVersionMenu(e, overlay.widgetId)}
+									onpointerdown={(e) => e.stopPropagation()}
+								>
+									{versionTriggerText}
+									<span class="widget-shape-version-caret text-emerald-500" aria-hidden="true">{versionMenuOpen ? '▲' : '▼'}</span>
+								</button>
+								{#if canPublish}
+									<button
+										type="button"
+										class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] rounded border border-emerald-600 bg-emerald-600 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 cursor-pointer"
+										disabled={isPublishing}
+										title="Publish the latest generated code as the Live version"
+										onclick={(e) => {
+											e.stopPropagation();
+											onPublish?.(overlay.widgetId);
+										}}
+										onpointerdown={(e) => e.stopPropagation()}
+									>{isPublishing ? '...' : 'Publish'}</button>
+								{:else if selectedVersion?.isLive}
+									<span
+										class="widget-shape-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] rounded bg-emerald-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-emerald-600 opacity-80"
+										title="This version is Live"
+									>Live</span>
+								{:else if selectedVersion && onSetLive}
+									<button
+										type="button"
+										class="widget-shape-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] rounded border border-emerald-300 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 cursor-pointer"
+										disabled={settingLiveVersion === Number(selectedVersion.id.slice(2))}
+										title="Publish this version so visitors see it on your website"
+										onclick={(e) => handleSetLiveClick(e, overlay.widgetId, selectedVersion.id)}
+										onpointerdown={(e) => e.stopPropagation()}
+									>{settingLiveVersion === Number(selectedVersion.id.slice(2)) ? '...' : 'Set live'}</button>
+								{/if}
+								{#if versionMenuOpen}
+									<div
+										class="widget-shape-version-menu absolute right-0 top-full z-30 mt-0.5 w-max max-w-[min(22rem,calc(100vw-16px))] overflow-y-auto overflow-x-hidden rounded-md border border-emerald-200 bg-white py-0.5 shadow-lg"
+										style="max-height: {VERSION_MENU_MAX_H}; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;"
+										role="listbox"
+									>
+										{#each versionOptions as option (option.id)}
+											<!-- svelte-ignore a11y_no_static_element_interactions -->
+											<div
+												role="option"
+												aria-selected={selectedVersion?.id === option.id}
+												tabindex="0"
+												class="widget-shape-version-option flex w-max max-w-full items-center gap-2 px-2 py-1.5 text-left text-[10px] cursor-pointer
+													{selectedVersion?.id === option.id ? 'bg-emerald-50 text-emerald-800' : 'text-gray-700 hover:bg-gray-50'}"
+												onclick={(e) => selectVersion(e, overlay.widgetId, option.id)}
+												onkeydown={(e) => {
+													if (e.key === 'Enter' || e.key === ' ') {
+														e.preventDefault();
+														selectVersion(e as unknown as MouseEvent, overlay.widgetId, option.id);
+													}
+												}}
+												onpointerdown={(e) => e.stopPropagation()}
+											>
+												<span class="widget-shape-version-option-label shrink-0 font-semibold tabular-nums">{option.shortLabel || option.label}</span>
+												<span class="widget-shape-version-option-date shrink-0 whitespace-nowrap tabular-nums text-slate-400" style="padding-right: 4px;">{option.dateLabel || '—'}</span>
+												{#if option.isLive}
+													<span class="widget-shape-version-live-badge shrink-0 inline-flex items-center justify-center min-w-[4.75rem] rounded bg-emerald-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-emerald-600">live</span>
+												{:else if onSetLive}
+													<button
+														type="button"
+														class="widget-shape-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] rounded border border-emerald-300 px-1.5 py-0.5 text-[9px] font-medium text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 cursor-pointer"
+														disabled={settingLiveVersion === Number(option.id.slice(2))}
+														onclick={(e) => handleSetLiveClick(e, overlay.widgetId, option.id)}
+														onpointerdown={(e) => e.stopPropagation()}
+													>{settingLiveVersion === Number(option.id.slice(2)) ? '...' : 'Set live'}</button>
+												{/if}
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{:else if versionTriggerText && versionTriggerText !== '—'}
+							<span
+								class="widget-shape-version-label shrink-0 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500"
+								title="Current version"
+							>{versionTriggerText}</span>
+						{/if}
+					{:else if isSelected}
 						<span
 							class="widget-shape-edit-mode-badge shrink-0 rounded-full bg-amber-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-900"
 						>Edit mode</span>
 					{/if}
-					<div class="widget-shape-drag-bar-actions ml-auto flex items-center gap-0.5">
+
+					<div class="widget-shape-drag-bar-actions ml-auto flex shrink-0 items-center gap-0.5">
 						<button
 							type="button"
-							class="widget-shape-open-chat-bt flex h-6 items-center gap-1 rounded px-1.5 text-[10px] font-medium text-gray-600 hover:bg-gray-100 hover:text-forest-green cursor-pointer"
+							class="widget-shape-open-chat-btn flex h-6 w-6 items-center justify-center rounded text-gray-500 hover:bg-gray-100 hover:text-forest-green cursor-pointer"
 							title="Open chat"
+							aria-label="Open chat"
 							onclick={(e) => handleOpenChat(e, overlay.widgetId)}
 							onpointerdown={(e) => e.stopPropagation()}
 						>
-							Chat
+							<svg
+								class="widget-shape-chat-icon h-4 w-4"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								aria-hidden="true"
+							>
+								<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+							</svg>
+							<span class="sr-only">Chat</span>
+						</button>
+						<button
+							type="button"
+							class="widget-shape-refresh-btn flex h-6 w-6 items-center justify-center rounded text-gray-500 hover:bg-gray-100 hover:text-forest-green cursor-pointer"
+							title="Refresh preview"
+							aria-label="Refresh preview"
+							onclick={(e) => handleRefreshClick(e, overlay.widgetId)}
+							onpointerdown={(e) => e.stopPropagation()}
+						>
+							<svg class="widget-shape-refresh-icon h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+								<polyline points="23 4 23 10 17 10"/>
+								<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+							</svg>
 						</button>
 					</div>
 				</div>
 
 				<div
-					class="widget-shape-live-preview-frame pointer-events-none absolute left-0 right-0 overflow-visible
+					class="widget-shape-live-preview-frame pointer-events-none absolute left-0 overflow-visible
 						{isSelected ? 'ring-2 ring-blue-400/80 rounded-sm' : ''}"
-					style="top: {DRAG_BAR_H + BAR_SHAPE_GAP}px; height: {overlay.height}px;"
+					style="top: {DRAG_BAR_H + BAR_SHAPE_GAP}px; height: {overlay.height}px; width: {overlay.width}px;"
 				>
 					<!-- Inset so Fabric corner/rotate handles stay clickable around the edges -->
 					<iframe
 						class="widget-shape-live-preview-iframe pointer-events-auto absolute border-0 bg-white"
-						class:pointer-events-none={isDragging}
-						style="left: 8px; top: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); height: calc(100% - 16px);"
+						class:pointer-events-none={blockIframePointer}
+						class:opacity-0={!iframeLoadedByWidgetId[overlay.widgetId]}
+						style="left: {IFRAME_INSET_PX}px; top: {IFRAME_INSET_PX}px; right: {IFRAME_INSET_PX}px; bottom: {IFRAME_INSET_PX}px; width: calc(100% - {IFRAME_INSET_PX * 2}px); height: calc(100% - {IFRAME_INSET_PX * 2}px);"
 						title="Live widget preview"
-						src={overlay.src}
+						src={buildIframeSrc(overlay.src, overlay.widgetId)}
+						data-widget-id={overlay.widgetId}
 						tabindex="-1"
-						loading="lazy"
+						loading="eager"
 						sandbox="allow-scripts allow-same-origin allow-forms"
+						onload={() => markIframeLoaded(overlay.widgetId)}
 					></iframe>
+					{#if !iframeLoadedByWidgetId[overlay.widgetId]}
+						<div
+							class="widget-shape-preview-loader pointer-events-none absolute inset-0 z-[1] flex items-center justify-center rounded-sm bg-white/90"
+							aria-hidden="true"
+						>
+							<div class="widget-shape-preview-spinner h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-emerald-600"></div>
+						</div>
+					{/if}
+					{#if blockIframePointer}
+						<!-- Transparent blue shield so drag/resize isn't stolen by the iframe -->
+						<div
+							class="widget-shape-iframe-pointer-shield pointer-events-auto absolute inset-0 z-[2] rounded-sm bg-blue-400/20"
+							aria-hidden="true"
+						></div>
+					{/if}
 				</div>
 			</div>
 		{/each}
 	</div>
 {/if}
+
+<style>
+	/* Suppress default Tab focus ring on chrome toolbar controls */
+	.widget-shape-drag-bar button:focus,
+	.widget-shape-drag-bar button:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+	.widget-shape-version-menu::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+		background: transparent;
+	}
+	.widget-shape-version-menu::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	.widget-shape-version-menu::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 4px;
+	}
+</style>