@widgetic/creator 0.3.60 → 0.3.62

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -4,6 +4,10 @@
 	 * Body drag is locked on the shape; move via the top drag bar so the iframe stays interactive.
 	 */
 	import { onMount } from 'svelte';
+	import { Checked } from '@widgetic/design-system/icons';
+	import { Portal } from '@widgetic/design-system';
+	import HoverTooltip from './HoverTooltip.svelte';
+	import VersionDropdownRow from './VersionDropdownRow.svelte';
 
 	interface VersionOption {
 		id: string;
@@ -15,20 +19,32 @@
 		dateLabel?: string;
 		/** True when this option is the live published version. */
 		isLive?: boolean;
+		/** True when this version has never been published. */
+		isDraft?: boolean;
 	}
 
 	interface Props {
 		class?: string;
 		style?: string;
 		enabled?: boolean;
-		/** Screen-space boxes for widget shapes currently on the canvas. */
+		/** Shared host: inactive units < active body (60) < controls (70) < active chrome (80). */
+		portalTarget?: string;
+		/** Bounds park chrome; the local dimensions/matrix transform the live body. */
 		getRects?:
-			| (() => Array<{ widgetId: string; left: number; top: number; width: number; height: number }>)
+			| (() => Array<Omit<ShapeRect, 'src'>>)
 			| null;
 		/** Resolve a live preview URL for a widget (CDN published or Worker preview). */
 		resolveUrl?: ((widgetId: string) => string | null) | null;
+		/** Keep chrome visible while a historical build is pending or failed. */
+		resolvePreviewState?: ((widgetId: string) => { loading: boolean; error: string | null } | null) | null;
+		/** Retry the selected historical version; never refresh shared HEAD. */
+		onRetryPreview?: ((widgetId: string) => void) | null;
 		/** Currently selected WidgetShape id (highlights chrome). */
 		selectedWidgetId?: string | null;
+		primaryWidgetId?: string | null;
+		onSetPrimary?: ((widgetId: string) => void) | null;
+		/** Shared publish gate; explicit versions must not inherit another row's error. */
+		resolvePublishDisabled?: ((widgetId: string, version?: number | null) => boolean) | 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). */
@@ -45,30 +61,46 @@
 		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;
+		onVersionChange?: ((widgetId: string, versionId: string, buildPreview?: boolean) => 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;
+		/** Capture callback after an explicit reload has loaded and settled. */
+		onRefresh?: ((widgetId: string, iframe: HTMLIFrameElement, isCurrent: () => boolean) => void | Promise<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;
+		/**
+		 * Whether a specific Draft row can be published. Drafts carry their own
+		 * commit, so they can be promoted without regenerating first — the main
+		 * `resolveCanPublish` gate is about HEAD vs Live and would say "no".
+		 */
+		resolveCanPublishDraft?: ((widgetId: string, version: number) => boolean) | null;
 		/** Publish HEAD as a new live version (shape bar Publish button). */
 		onPublish?: ((widgetId: string) => void) | null;
+		/** Publish a specific Draft version (built from that version's own commit). */
+		onPublishDraft?: ((widgetId: string, version: number) => void) | null;
 		/** True while publish is in flight for this widget. */
 		resolveIsPublishing?: ((widgetId: string) => boolean) | null;
+		/** Publish-disabled reason for a specific Draft row (null = enabled). */
+		resolvePublishDisabledReason?: ((widgetId: string, version: number) => string | null) | null;
 	}
 
 	let {
 		class: className = '',
 		style = '',
 		enabled = true,
+		portalTarget = 'floating-panels-overlay',
 		getRects = null,
 		resolveUrl = null,
+		resolvePreviewState = null,
+		onRetryPreview = null,
 		selectedWidgetId = null,
+		primaryWidgetId = null,
+		onSetPrimary = null,
+		resolvePublishDisabled = null,
 		onTranslate = null,
 		onTranslateEnd = null,
 		onSelectShape = null,
@@ -83,8 +115,12 @@
 		onRefresh = null,
 		titleRevision = 0,
 		resolveCanPublish = null,
+		resolveCanPublishDraft = null,
 		onPublish = null,
+		onPublishDraft = null,
 		resolveIsPublishing = null,
+		/** Per-widget publish-gate reason for a Draft row (tooltip on Publish). */
+		resolvePublishDisabledReason = null,
 	}: Props = $props();
 
 	const DRAG_BAR_H = 30;
@@ -102,14 +138,39 @@
 		top: number;
 		width: number;
 		height: number;
+		localWidth?: number;
+		localHeight?: number;
+		matrix?: number[];
+		/** Pointer is over the shape (Fabric mouse:over); keeps chrome visible. */
+		hovered?: boolean;
 		src: string;
 	};
 
 	let overlays = $state<ShapeRect[]>([]);
+	// Pass the existing element to DS Portal: its string-target ancestor guard
+	// otherwise creates a second floating-panels-overlay on document.body.
+	let portalHost = $state<HTMLElement | null>(null);
 	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>>({});
+	/**
+	 * Explicit refresh intent: widgetId → token. The parent capture callback
+	 * (onRefresh) fires only after THAT reload's load event has settled, never
+	 * for a stale frame, and exactly once per explicit Refresh click.
+	 */
+	const pendingRefreshTokens = new Map<string, number>();
+	/** Settle timers for post-load captures so unmount/sync can cancel them. */
+	const refreshSettleTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+	function cancelPendingRefresh(widgetId: string) {
+		const timer = refreshSettleTimers.get(widgetId);
+		if (timer) {
+			clearTimeout(timer);
+			refreshSettleTimers.delete(widgetId);
+		}
+		pendingRefreshTokens.delete(widgetId);
+	}
 	/** Which shape chrome version menu is open. */
 	let openVersionMenuWidgetId = $state<string | null>(null);
 	/** Hide Fabric placeholder flash — show loader until iframe fires load. */
@@ -117,6 +178,7 @@
 
 	export function sync(): void {
 		if (!enabled || !getRects || !resolveUrl) {
+			for (const widgetId of [...pendingRefreshTokens.keys()]) cancelPendingRefresh(widgetId);
 			overlays = [];
 			return;
 		}
@@ -124,22 +186,24 @@
 		const nextLoaded = { ...iframeLoadedByWidgetId };
 		for (const rect of getRects() || []) {
 			if (!rect?.widgetId) continue;
-			const src = resolveUrl(rect.widgetId);
-			if (!src) continue;
+			const src = resolveUrl(rect.widgetId) || '';
+			const previewState = resolvePreviewState?.(rect.widgetId);
+			if (!src && !previewState?.loading && !previewState?.error) continue;
 			const prev = overlays.find((o) => o.widgetId === rect.widgetId);
 			if (!prev || prev.src !== src) {
+				cancelPendingRefresh(rect.widgetId);
 				nextLoaded[rect.widgetId] = false;
 			}
-			next.push({
-				widgetId: rect.widgetId,
-				left: rect.left,
-				top: rect.top,
-				width: rect.width,
-				height: rect.height,
-				src,
-			});
+			next.push({ ...rect, src });
 		}
 		iframeLoadedByWidgetId = nextLoaded;
+		// Drop refresh intents for shapes that left the canvas — their iframes
+		// will never fire the load event the capture is waiting on.
+		for (const pendingWidgetId of [...pendingRefreshTokens.keys()]) {
+			if (!next.some((overlay) => overlay.widgetId === pendingWidgetId)) {
+				cancelPendingRefresh(pendingWidgetId);
+			}
+		}
 		overlays = next;
 	}
 
@@ -159,6 +223,7 @@
 	}
 
 	function startShapeDrag(event: PointerEvent, widgetId: string) {
+		if (event.button !== 0 || draggingWidgetId || resizingWidgetId) return;
 		const target = event.target as HTMLElement | null;
 		if (target?.closest('button, a, input, select, label')) return;
 		event.preventDefault();
@@ -207,15 +272,42 @@
 		event.preventDefault();
 		event.stopPropagation();
 		onSelectShape?.(widgetId);
+		cancelPendingRefresh(widgetId);
+		const token = Math.max(Date.now(), (reloadTokens[widgetId] || 0) + 1);
+		pendingRefreshTokens.set(widgetId, token);
 		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: false };
-		reloadTokens = { ...reloadTokens, [widgetId]: Date.now() };
-		onRefresh?.(widgetId);
+		reloadTokens = { ...reloadTokens, [widgetId]: token };
 		console.log('[WidgetShapeLivePreviews] Refresh iframe', widgetId.substring(0, 8));
 	}
 
-	function markIframeLoaded(widgetId: string) {
-		if (iframeLoadedByWidgetId[widgetId]) return;
+	function markIframeLoaded(widgetId: string, iframe: EventTarget | null) {
+		if (!(iframe instanceof HTMLIFrameElement)) return;
+		const loadedSource = iframe.src;
+		const matchesFrame = () => enabled && iframe.isConnected
+			&& iframe.dataset.widgetId === widgetId && iframe.src === loadedSource
+			&& overlays.some((overlay) => overlay.widgetId === widgetId
+				&& new URL(buildIframeSrc(overlay.src, widgetId), window.location.href).href === loadedSource);
+		// An old load event must not mark the replacement loaded or claim its timer.
+		if (!matchesFrame()) return;
 		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: true };
+		const token = pendingRefreshTokens.get(widgetId);
+		if (!token || refreshSettleTimers.has(widgetId)) return;
+		const isCurrent = () => matchesFrame()
+			&& pendingRefreshTokens.get(widgetId) === token && reloadTokens[widgetId] === token;
+		// Match the existing screenshot settling delay, but only after this frame's load.
+		refreshSettleTimers.set(widgetId, setTimeout(async () => {
+			// Retain the intent and timer marker throughout capture: cancellation must
+			// invalidate in-flight work, and duplicate load events must not recapture.
+			try {
+				if (!isCurrent()) return;
+				await onRefresh?.(widgetId, iframe, isCurrent);
+			} catch (error) {
+				console.warn('[WidgetShapeLivePreviews] Refresh capture failed', widgetId, error);
+			} finally {
+				// An older completion must never consume a newer Refresh click.
+				if (pendingRefreshTokens.get(widgetId) === token) cancelPendingRefresh(widgetId);
+			}
+		}, 800));
 	}
 
 	function getTitle(widgetId: string): string {
@@ -233,6 +325,17 @@
 		return liveOpt?.id || options[0]?.id || '';
 	}
 
+	/**
+	 * True for a version that has not been published yet.
+	 *
+	 * The history is a single sequence of versions; a Draft is one that has no
+	 * `publishedAt`. It must never offer "Set live" — there is no artifact to
+	 * promote, and publishing goes through the normal Publish flow.
+	 */
+	function isDraftVersion(option: { id: string; isDraft?: boolean }): boolean {
+		return option.isDraft === true;
+	}
+
 	function getSelectedOption(widgetId: string, options: VersionOption[]): VersionOption | null {
 		if (!options.length) return null;
 		const id = resolveSelectedVersionId(widgetId, options);
@@ -257,7 +360,7 @@
 		openVersionMenuWidgetId = null;
 		if (!versionId) return;
 		onVersionChange?.(widgetId, versionId);
-		console.log('[WidgetShapeLivePreviews] Version change', widgetId.substring(0, 8), versionId);
+		// The parent logs the selected version and resolved commit once the build completes.
 	}
 
 	function handleSetLiveClick(event: MouseEvent, widgetId: string, versionId: string) {
@@ -270,6 +373,84 @@
 		console.log('[WidgetShapeLivePreviews] Set live', widgetId.substring(0, 8), version);
 	}
 
+	/** Publish a Draft row: select/preview that version first, then promote exactly it. */
+	function handlePublishDraftClick(event: MouseEvent, widgetId: string, versionId: string) {
+		event.preventDefault();
+		event.stopPropagation();
+		openVersionMenuWidgetId = null;
+		const version = versionId.startsWith('v:') ? parseInt(versionId.slice(2), 10) : NaN;
+		if (!Number.isFinite(version)) return;
+		if (!resolveCanPublishDraft?.(widgetId, version) || resolvePublishDisabled?.(widgetId, version)) return;
+		// Select exactly this draft, without launching a competing preview build.
+		onVersionChange?.(widgetId, versionId, false);
+		onPublishDraft?.(widgetId, version);
+		console.log('[WidgetShapeLivePreviews] Publish draft', widgetId.substring(0, 8), version);
+	}
+
+	/** Row-select from the shared VersionDropdownRow (no event to stop). */
+	function selectVersionFromMenu(widgetId: string, versionId: string) {
+		openVersionMenuWidgetId = null;
+		if (!versionId) return;
+		onVersionChange?.(widgetId, versionId);
+	}
+
+	/** Publish-Draft from the shared VersionDropdownRow; guards mirror handlePublishDraftClick. */
+	function handlePublishDraftClickFromMenu(widgetId: string, versionId: string) {
+		openVersionMenuWidgetId = null;
+		const version = versionId.startsWith('v:') ? parseInt(versionId.slice(2), 10) : NaN;
+		if (!Number.isFinite(version)) return;
+		if (!onPublishDraft) return;
+		if (!resolveCanPublishDraft?.(widgetId, version) || resolvePublishDisabled?.(widgetId, version)) return;
+		// Select exactly this draft, without launching a competing preview build.
+		onVersionChange?.(widgetId, versionId, false);
+		onPublishDraft?.(widgetId, version);
+		console.log('[WidgetShapeLivePreviews] Publish draft', widgetId.substring(0, 8), version);
+	}
+
+	/** Set-live from the shared VersionDropdownRow. */
+	function handleSetLiveClickFromMenu(widgetId: string, versionId: string) {
+		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);
+	}
+
+	/**
+	 * Parent-side iframe selection works across origins without reading child DOM.
+	 * pointerenter selects on hover and never cancels the child's click. Browsers
+	 * focus the iframe element in the parent document when its child gains focus;
+	 * window blur is deferred one task so activeElement has already been updated.
+	 * No focus() call or transparent click catcher: rating/audio keep the gesture.
+	 */
+	function trackIframeSelection(iframe, widgetId) {
+		let focusTimer;
+		function select() {
+			if (!enabled || draggingWidgetId || resizingWidgetId || !iframe.isConnected) return;
+			// Keep the menu owner selected while its dropdown is being used.
+			if (openVersionMenuWidgetId && openVersionMenuWidgetId !== widgetId) return;
+			if (selectedWidgetId !== widgetId) onSelectShape?.(widgetId);
+		}
+		function checkFocus() {
+			clearTimeout(focusTimer);
+			focusTimer = setTimeout(() => {
+				if (document.activeElement === iframe) select();
+			}, 0);
+		}
+		iframe.addEventListener('pointerenter', select);
+		iframe.addEventListener('focus', select);
+		window.addEventListener('blur', checkFocus);
+		return {
+			update(nextWidgetId) { widgetId = nextWidgetId; },
+			destroy() {
+				clearTimeout(focusTimer);
+				iframe.removeEventListener('pointerenter', select);
+				iframe.removeEventListener('focus', select);
+				window.removeEventListener('blur', checkFocus);
+			},
+		};
+	}
+
 	function handleDocumentPointerDown(event: PointerEvent) {
 		if (!openVersionMenuWidgetId) return;
 		const target = event.target as HTMLElement | null;
@@ -284,6 +465,15 @@
 	}
 
 	onMount(() => {
+		const existingHost = document.getElementsByClassName(portalTarget.replace(/^#/, ''))[0]
+			|| document.getElementById(portalTarget.replace(/^#/, ''));
+		portalHost = existingHost instanceof HTMLElement ? existingHost : null;
+		// A child-only HMR remount does not trigger Fabric after:render. Bootstrap
+		// once after parent bindings/layout settle; subsequent updates stay event-driven.
+		const initialSyncFrame = requestAnimationFrame(() => {
+			try { sync(); }
+			catch (error) { console.warn('[WidgetShapeLivePreviews] Initial sync failed', error); }
+		});
 		document.addEventListener('pointerdown', handleDocumentPointerDown, true);
 		document.addEventListener('keydown', handleDocumentKeydown);
 		const onShapePointerBlock = (event: Event) => {
@@ -293,6 +483,8 @@
 		};
 		window.addEventListener('widgetic:widget-shape-pointer-block', onShapePointerBlock);
 		return () => {
+			cancelAnimationFrame(initialSyncFrame);
+			for (const widgetId of [...pendingRefreshTokens.keys()]) cancelPendingRefresh(widgetId);
 			document.removeEventListener('pointerdown', handleDocumentPointerDown, true);
 			document.removeEventListener('keydown', handleDocumentKeydown);
 			window.removeEventListener('widgetic:widget-shape-pointer-block', onShapePointerBlock);
@@ -300,7 +492,8 @@
 	});
 </script>
 
-{#if enabled && overlays.length > 0}
+{#if enabled && overlays.length > 0 && portalHost}
+	<Portal target={portalHost} class="widget-shape-units-portal" style="display: contents;">
 	<div class="widget-shape-live-previews-ct pointer-events-none {className}" {style}>
 		{#each overlays as overlay (overlay.widgetId)}
 			{@const isSelected = selectedWidgetId === overlay.widgetId}
@@ -308,29 +501,44 @@
 			{@const isResizing = resizingWidgetId === overlay.widgetId}
 			{@const blockIframePointer = isDragging || isResizing}
 			{@const chromeTop = overlay.top - DRAG_BAR_H - BAR_SHAPE_GAP}
+			{@const bodyWidth = overlay.localWidth ?? overlay.width}
+			{@const bodyHeight = overlay.localHeight ?? overlay.height}
+			{@const bodyMatrix = overlay.matrix ?? [1, 0, 0, 1, overlay.left, overlay.top]}
 			{@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 titleText = (void 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 canPublish = (void titleRevision, !!resolveCanPublish?.(overlay.widgetId))}
+			{@const isPublishing = (void titleRevision, !!resolveIsPublishing?.(overlay.widgetId))}
+			{@const versionOptions = (void titleRevision, getVersionOptions(overlay.widgetId))}
 			{@const selectedVersion = getSelectedOption(overlay.widgetId, versionOptions)}
 			{@const versionTriggerText = triggerLabelForOption(
 				selectedVersion,
 				resolveVersionLabel?.(overlay.widgetId)?.trim() || '—',
 			)}
+			<!-- Inactive widgets are whole stacking units, ordered by Fabric's array.
+			     Active wrapper is transparent to stacking: body 60 < controls 70 < bar 80. -->
+			{@const chromeZIndex = isSelected ? 80 : 2}
+			{@const isPrimary = primaryWidgetId === overlay.widgetId}
+			{@const previewState = (void titleRevision, resolvePreviewState?.(overlay.widgetId))}
+			{@const selectedPreviewBlocked = !!(previewState?.loading || previewState?.error) || !iframeLoadedByWidgetId[overlay.widgetId]}
+			<!-- Chrome shows on hover or selection; an open menu pins it while the pointer is inside the menu. -->
+			{@const chromeVisible = isSelected || overlay.hovered || versionMenuOpen}
+			<div class="widget-shape-unit-ct pointer-events-none" data-widget-id={overlay.widgetId}
+				style={isSelected ? 'display: contents;' : 'position: absolute; inset: 0; z-index: 1; pointer-events: none;'}>
 			<div
-				class="widget-shape-live-chrome-ct fixed"
-				style="left: {overlay.left}px; top: {chromeTop}px; width: {chromeWidth}px; height: {DRAG_BAR_H + BAR_SHAPE_GAP + overlay.height}px; z-index: 1;"
+				class="widget-shape-live-chrome-ct fixed pointer-events-none"
+				data-widget-id={overlay.widgetId}
+				class:opacity-0={!chromeVisible}
+				style="left: {overlay.left}px; top: {chromeTop}px; width: {chromeWidth}px; height: {DRAG_BAR_H}px; z-index: {chromeZIndex}; pointer-events: none; transition: opacity 120ms ease;"
 			>
-				<!-- Drag bar sits between rotation control and the shape top stroke -->
+				<!-- Attached horizontal chrome wins hits where its own rotation stem overlaps. -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					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'}"
+					class="widget-shape-drag-bar pointer-events-auto absolute left-0 right-0 top-0 z-10 flex items-center gap-1 rounded-t-md border border-b-0 px-1.5 shadow-sm select-none [&_button:focus]:outline-none [&_button:focus]:shadow-none [&_button:focus-visible]:outline-none [&_button:focus-visible]:shadow-none
+						{isPrimary ? 'bg-red-100' : 'bg-white'} {isSelected ? 'border-blue-400' : 'border-gray-300'}"
 					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)}
@@ -343,49 +551,105 @@
 							title={titleText}
 						>{titleText}</span>
 
+						<HoverTooltip text={isPrimary ? 'Primary widget' : 'Set primary'} class="inline-flex shrink-0">
+							<button
+								type="button"
+								class="widget-shape-set-primary-btn flex h-6 w-6 shrink-0 items-center justify-center rounded text-red-700 enabled:hover:bg-red-200 enabled:hover:text-red-800 disabled:text-red-700/40 disabled:pointer-events-none disabled:cursor-default cursor-pointer"
+								aria-label={isPrimary ? 'Primary widget' : 'Set primary'}
+								disabled={isPrimary || !onSetPrimary}
+								onpointerdown={(event) => event.stopPropagation()}
+								onclick={(event) => { event.stopPropagation(); onSetPrimary?.(overlay.widgetId); }}
+							><Checked class="widget-shape-primary-icon h-4 w-4" /></button>
+						</HoverTooltip>
 						{#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()}
+								<HoverTooltip
+									text="Switch version"
+									maxWidth={120}
+									class="inline-flex shrink-0"
 								>
-									{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);
-										}}
+										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"
+										aria-haspopup="listbox"
+										aria-expanded={versionMenuOpen}
+										onclick={(e) => toggleVersionMenu(e, overlay.widgetId)}
 										onpointerdown={(e) => e.stopPropagation()}
-									>{isPublishing ? '...' : 'Publish'}</button>
+									>
+										{versionTriggerText}
+										<span class="widget-shape-version-caret text-emerald-500" aria-hidden="true">{versionMenuOpen ? '▲' : '▼'}</span>
+									</button>
+								</HoverTooltip>
+								{#if canPublish && !selectedVersion}
+									<HoverTooltip
+										text="Publish latest"
+										maxWidth={120}
+										class="inline-flex shrink-0"
+									>
+										<button
+											type="button"
+											class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 cursor-pointer"
+											disabled={isPublishing || selectedPreviewBlocked || !!resolvePublishDisabled?.(overlay.widgetId, selectedVersion ? Number(selectedVersion.id.slice(2)) : null)}
+											onclick={(e) => {
+												e.stopPropagation();
+												onPublish?.(overlay.widgetId);
+											}}
+											onpointerdown={(e) => e.stopPropagation()}
+										>{isPublishing ? '...' : 'Publish'}</button>
+									</HoverTooltip>
 								{: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>
+									<HoverTooltip
+										text="Currently live"
+										maxWidth={120}
+										class="inline-flex shrink-0"
+									>
+										<span
+											class="widget-shape-live-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded bg-emerald-100 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-emerald-600 opacity-80"
+										>Live</span>
+									</HoverTooltip>
+								{:else if selectedVersion && onSetLive && !isDraftVersion(selectedVersion)}
+									<HoverTooltip
+										text="Make this version live"
+										maxWidth={130}
+										class="inline-flex shrink-0"
+									>
+										<button
+											type="button"
+											class="widget-shape-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded border border-emerald-300 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 cursor-pointer"
+											disabled={settingLiveVersion === Number(selectedVersion.id.slice(2))}
+											onclick={(e) => handleSetLiveClick(e, overlay.widgetId, selectedVersion.id)}
+											onpointerdown={(e) => e.stopPropagation()}
+										>{settingLiveVersion === Number(selectedVersion.id.slice(2)) ? '...' : 'Set live'}</button>
+									</HoverTooltip>
+								{:else if selectedVersion && isDraftVersion(selectedVersion)}
+									{#if onPublishDraft}
+										<HoverTooltip
+											text="Publish this draft"
+											maxWidth={130}
+											class="inline-flex shrink-0"
+										>
+											<button
+												type="button"
+												class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 cursor-pointer"
+												disabled={isPublishing || selectedPreviewBlocked || !resolveCanPublishDraft?.(overlay.widgetId, Number(selectedVersion.id.slice(2))) || !!resolvePublishDisabled?.(overlay.widgetId, Number(selectedVersion.id.slice(2)))}
+												onclick={(e) => handlePublishDraftClick(e, overlay.widgetId, selectedVersion.id)}
+												onpointerdown={(e) => e.stopPropagation()}
+											>{isPublishing ? '...' : 'Publish'}</button>
+										</HoverTooltip>
+									{:else}
+										<HoverTooltip
+											text="No commit to publish"
+											maxWidth={130}
+											class="inline-flex shrink-0"
+										>
+											<span
+												class="widget-shape-draft-badge shrink-0 inline-flex items-center justify-center min-w-[3.75rem] rounded bg-amber-100 px-1 py-0.5 text-[8px] font-semibold uppercase tracking-wide text-amber-700"
+											>Draft</span>
+										</HoverTooltip>
+									{/if}
 								{/if}
 								{#if versionMenuOpen}
 									<div
@@ -394,36 +658,26 @@
 										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>
+											{@const optionVersion = Number(option.id.slice(2))}
+											{@const optionBusy = (void titleRevision, !!resolveIsPublishing?.(overlay.widgetId))}
+											{@const optionPublishDisabled = !resolveCanPublishDraft?.(overlay.widgetId, optionVersion)
+												|| !!resolvePublishDisabled?.(overlay.widgetId, optionVersion)
+												|| (selectedVersion?.id === option.id && selectedPreviewBlocked)}
+											{@const optionPublishReason = (void titleRevision, resolvePublishDisabledReason?.(overlay.widgetId, optionVersion))}
+											<VersionDropdownRow
+												versionLabel={option.shortLabel || option.label}
+												dateLabel={option.dateLabel}
+												isLive={option.isLive === true}
+												isDraft={isDraftVersion(option)}
+												selected={selectedVersion?.id === option.id}
+												busy={optionBusy}
+												publishDisabled={optionPublishDisabled}
+												publishDisabledReason={optionPublishReason || 'Build this draft version and make it the Live version'}
+												setLiveDisabled={settingLiveVersion === optionVersion}
+												onselect={() => selectVersionFromMenu(overlay.widgetId, option.id)}
+												onpublish={() => handlePublishDraftClickFromMenu(overlay.widgetId, option.id)}
+												onsetlive={() => handleSetLiveClickFromMenu(overlay.widgetId, option.id)}
+											/>
 										{/each}
 									</div>
 								{/if}
@@ -441,10 +695,25 @@
 					{/if}
 
 					<div class="widget-shape-drag-bar-actions ml-auto flex shrink-0 items-center gap-0.5">
+						<HoverTooltip text="Refresh preview" class="inline-flex shrink-0">
+						<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"
+							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>
+							<span class="sr-only">Refresh</span>
+						</button>
+						</HoverTooltip>
+						<HoverTooltip text="Open chat" maxWidth={100} class="inline-flex shrink-0">
 						<button
 							type="button"
 							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()}
@@ -463,32 +732,27 @@
 							</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>
+						</HoverTooltip>
 					</div>
 				</div>
 
+			</div>
+
 				<div
-					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; width: {overlay.width}px;"
+					class="widget-shape-live-preview-frame pointer-events-none fixed left-0 top-0 origin-top-left overflow-visible"
+					data-widget-id={overlay.widgetId}
+					style="height: {bodyHeight}px; width: {bodyWidth}px; transform: matrix({bodyMatrix.join(',')}); z-index: {isSelected ? 60 : 1};"
 				>
-					<!-- Inset so Fabric corner/rotate handles stay clickable around the edges -->
+					<!-- A new reload gets its own window so old load/screenshot replies cannot win. -->
+					{#if overlay.src}
+					{#key buildIframeSrc(overlay.src, overlay.widgetId)}
+					<!-- Inset so Fabric corner/rotate handles stay clickable around the edges.
+					     First click inside the widget selects the shape (ring + chrome) via
+					     focus, while the iframe keeps receiving the pointer events themselves. -->
 					<iframe
 						class="widget-shape-live-preview-iframe pointer-events-auto absolute border-0 bg-white"
-						class:pointer-events-none={blockIframePointer}
-						class:opacity-0={!iframeLoadedByWidgetId[overlay.widgetId]}
+						class:pointer-events-none={blockIframePointer || selectedPreviewBlocked}
+						class:opacity-0={selectedPreviewBlocked}
 						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={buildIframeSrc(overlay.src, overlay.widgetId)}
@@ -496,14 +760,28 @@
 						tabindex="-1"
 						loading="eager"
 						sandbox="allow-scripts allow-same-origin allow-forms"
-						onload={() => markIframeLoaded(overlay.widgetId)}
+						use:trackIframeSelection={overlay.widgetId}
+						onload={(event) => markIframeLoaded(overlay.widgetId, event.currentTarget)}
 					></iframe>
-					{#if !iframeLoadedByWidgetId[overlay.widgetId]}
+					{/key}
+					{/if}
+					{#if previewState?.error && !previewState.loading}
+						<div class="widget-shape-preview-error pointer-events-auto absolute inset-0 flex flex-col items-center justify-center gap-2 overflow-auto bg-white p-4 text-center text-xs text-red-600 [scrollbar-color:rgba(0,0,0,0.2)_transparent]" role="alert">
+							<span>{previewState.error}</span>
+							{#if onRetryPreview}
+								<button type="button" class="widget-shape-preview-retry pointer-events-auto cursor-pointer rounded border border-gray-300 bg-white px-3 py-1.5 text-gray-700 hover:bg-gray-100 focus:outline-none focus-visible:outline-none focus-visible:bg-gray-100"
+									onpointerdown={(event) => event.stopPropagation()}
+									onclick={(event) => { event.stopPropagation(); onRetryPreview?.(overlay.widgetId); }}>Retry</button>
+							{/if}
+						</div>
+					{:else if selectedPreviewBlocked}
 						<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"
+							class="widget-shape-preview-loader pointer-events-none absolute inset-0 z-[1] flex flex-col items-center justify-center gap-2 rounded-sm bg-white"
+							role="status"
+							aria-live="polite"
 						>
-							<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 class="widget-shape-preview-spinner h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-emerald-600" aria-hidden="true"></div>
+							<span class="widget-shape-preview-loading-label text-xs text-gray-600">{previewState?.loading ? 'Building...' : 'Loading...'}</span>
 						</div>
 					{/if}
 					{#if blockIframePointer}
@@ -517,15 +795,10 @@
 			</div>
 		{/each}
 	</div>
+	</Portal>
 {/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;