@widgetic/creator 0.3.59 → 0.3.61

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -3,30 +3,134 @@
 	 * 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';
+	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;
+		/** 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;
+		/** True when this version has never been published. */
+		isDraft?: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		style?: string;
+		enabled?: boolean;
+		/** 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<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). */
+		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, 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;
+		/** 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,
+		onOpenChat = null,
+		resolveTitle = null,
+		resolveVersionLabel = null,
+		resolveVersionOptions = null,
+		resolveVersionSelectedId = null,
+		onVersionChange = null,
+		onSetLive = null,
+		settingLiveVersion = null,
+		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;
 	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;
@@ -34,45 +138,100 @@
 		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: ShapeRect[] = [];
-	let draggingWidgetId: string | null = null;
+	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. */
+	let iframeLoadedByWidgetId = $state<Record<string, boolean>>({});
 
 	export function sync(): void {
 		if (!enabled || !getRects || !resolveUrl) {
+			for (const widgetId of [...pendingRefreshTokens.keys()]) cancelPendingRefresh(widgetId);
 			overlays = [];
 			return;
 		}
 		const next: ShapeRect[] = [];
+		const nextLoaded = { ...iframeLoadedByWidgetId };
 		for (const rect of getRects() || []) {
 			if (!rect?.widgetId) continue;
-			const src = resolveUrl(rect.widgetId);
-			if (!src) continue;
-			next.push({
-				widgetId: rect.widgetId,
-				left: rect.left,
-				top: rect.top,
-				width: rect.width,
-				height: rect.height,
-				src,
-			});
+			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({ ...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;
 	}
 
+	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) {
+		if (event.button !== 0 || draggingWidgetId || resizingWidgetId) return;
 		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 +249,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,64 +267,548 @@
 		onSelectShape?.(widgetId);
 		onOpenChat?.(widgetId);
 	}
+
+	function handleRefreshClick(event: MouseEvent, widgetId: string) {
+		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]: token };
+		console.log('[WidgetShapeLivePreviews] Refresh iframe', widgetId.substring(0, 8));
+	}
+
+	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 {
+		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 || '';
+	}
+
+	/**
+	 * 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);
+		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);
+		// The parent logs the selected version and resolved commit once the build completes.
+	}
+
+	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);
+	}
+
+	/** 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;
+		if (target?.closest?.(`[data-version-menu-for="${openVersionMenuWidgetId}"]`)) return;
+		openVersionMenuWidgetId = null;
+	}
+
+	function handleDocumentKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && openVersionMenuWidgetId) {
+			openVersionMenuWidgetId = null;
+		}
+	}
+
+	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) => {
+			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 () => {
+			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);
+		};
+	});
 </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}
 			{@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 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 = (void titleRevision, getTitle(overlay.widgetId))}
+			{@const versionMenuOpen = openVersionMenuWidgetId === 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: {overlay.width}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 h-7 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;"
+					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)}
 				>
 					<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>
+
+						<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}
+							>
+								<HoverTooltip
+									text="Switch version"
+									maxWidth={120}
+									class="inline-flex shrink-0"
+								>
+									<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"
+										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>
+								</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}
+									<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
+										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)}
+											{@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}
+							</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">
+						<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-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"
-							title="Open chat"
+							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"
+							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>
+						</HoverTooltip>
 					</div>
 				</div>
 
+			</div>
+
 				<div
-					class="widget-shape-live-preview-frame pointer-events-none absolute left-0 right-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;"
+					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={isDragging}
-						style="left: 8px; top: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); height: calc(100% - 16px);"
+						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={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"
+						use:trackIframeSelection={overlay.widgetId}
+						onload={(event) => markIframeLoaded(overlay.widgetId, event.currentTarget)}
 					></iframe>
+					{/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 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" 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}
+						<!-- 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>
+	</Portal>
 {/if}
+
+<style>
+	.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>