@widgetic/creator 0.3.58 → 0.3.60

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -0,0 +1,541 @@
+<script lang="ts">
+	/**
+	 * 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.
+	 */
+	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;
+		left: number;
+		top: number;
+		width: number;
+		height: number;
+		src: string;
+	};
+
+	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) {
+			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;
+			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,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height,
+				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, select, label')) return;
+		event.preventDefault();
+		event.stopPropagation();
+		onSelectShape?.(widgetId);
+		draggingWidgetId = widgetId;
+		let lastX = event.clientX;
+		let lastY = event.clientY;
+
+		function onMove(e: PointerEvent) {
+			const dx = e.clientX - lastX;
+			const dy = e.clientY - lastY;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			if (dx === 0 && dy === 0) return;
+			onTranslate?.(widgetId, dx, dy);
+		}
+
+		function endDrag() {
+			draggingWidgetId = null;
+			document.removeEventListener('pointermove', onMove);
+			document.removeEventListener('pointerup', endDrag);
+			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));
+		}
+
+		document.body.style.userSelect = 'none';
+		document.body.style.cursor = 'grabbing';
+		document.addEventListener('pointermove', onMove);
+		document.addEventListener('pointerup', endDrag);
+		document.addEventListener('pointercancel', endDrag);
+		console.log('[WidgetShapeLivePreviews] Drag start', widgetId.substring(0, 8));
+	}
+
+	function handleOpenChat(event: MouseEvent, widgetId: string) {
+		event.preventDefault();
+		event.stopPropagation();
+		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}
+	<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 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: {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 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; 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 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 shrink-0 items-center gap-0.5">
+						<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()}
+						>
+							<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 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;"
+				>
+					<!-- 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={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={buildIframeSrc(overlay.src, overlay.widgetId)}
+						data-widget-id={overlay.widgetId}
+						tabindex="-1"
+						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>

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

@@ -0,0 +1,64 @@
+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;
+}
+declare const WidgetShapeLivePreviews: import("svelte").Component<Props, {
+    sync: () => void;
+}, "">;
+type WidgetShapeLivePreviews = ReturnType<typeof WidgetShapeLivePreviews>;
+export default WidgetShapeLivePreviews;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.58",
+	"version": "0.3.60",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",