@widgetic/creator 0.3.64 → 0.3.66

package/dist/CreatorApp.svelte.d.ts

@@ -37,6 +37,8 @@ declare const CreatorApp: $$__sveltets_2_IsomorphicComponent<{
     style?: string;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    onBack: CreatorAppProps["onBack"];
+}, string>;
 type CreatorApp = InstanceType<typeof CreatorApp>;
 export default CreatorApp;

package/dist/components/VersionDropdownRow.svelte

@@ -42,14 +42,16 @@
 	// One fixed width per column — identical on every row and in both dropdowns.
 	// Explicit PIXEL widths that hug the content (vN, 7-char SHA, dd/mm/yyyy
 	// hh:mm) — no rem sizing, no floating side padding.
-	const COL_VERSION = 'w-[16px] justify-end';
+	const COL_VERSION = 'w-[20px] justify-end';
 	const COL_COMMIT = 'w-[44px] justify-end';
 	const COL_DATE = 'w-[88px]';
-	const COL_ACTION = 'w-[60px]';
+	// Same width as the header Publish/Live button (min-w-[4.75rem] / w-[4.75rem]) so every
+	// action button lines up in one column across rows, header and overlay.
+	const COL_ACTION = 'w-[4.75rem]';
 </script>
 
 <div
-	class="version-dropdown-row flex items-center gap-2 rounded px-2 py-1.5 w-max text-[10px] cursor-pointer {selected ? 'bg-emerald-50 text-emerald-800' : 'text-gray-700 hover:bg-gray-50'}"
+	class="version-dropdown-row flex items-center justify-between gap-2 rounded px-2 py-1.5 w-full text-[10px] cursor-pointer {selected ? 'bg-emerald-50 text-emerald-800' : 'text-gray-700 hover:bg-gray-50'}"
 	role="option"
 	aria-selected={selected}
 	tabindex="0"

package/dist/components/WidgetDetails.svelte

@@ -69,7 +69,9 @@
 		| { type: 'save' };
 
 	export let userSession: { jwt?: string; user?: { id?: string } } | null = null;
-	export let hasValidToken: boolean = false;
+	// Passed by CreatorApp but never read here — export const keeps the
+	// init-set contract without the unused-reactive warning.
+	export const hasValidToken: boolean = false;
 	export let selectedWidgetId: string | null = null;
 	export let selectedWidget: WidgetSummary | null = null;
 	export let isGeneratingCode: boolean = false;
@@ -81,11 +83,13 @@
 	/** 'pending' = repo being created (show loader); 'failed' = show Create Repository; 'ready' = normal. */
 	export let repositorySetupStatus: 'pending' | 'ready' | 'failed' = 'ready';
 	export let generateCodeStatus: string | null = null;
-	export let isCheckingActiveGeneration: boolean = false;
+	export const isCheckingActiveGeneration: boolean = false;
 	export let lastCommitId: string | null = null;
 	export let debugMode: boolean = false;
 	export let forceMockReady: boolean = false;
-	export let debugModeAvailable: boolean = false;
+	// Passed by CreatorApp but never read here — export const keeps the
+	// init-set contract without the unused-reactive warning.
+	export const debugModeAvailable: boolean = false;
 
 	// Code gen / save / publish state — passed through to parent's slot content.
 	// svelte-ignore export_let_unused — these are consumed by <svelte:fragment> slots in the parent.
@@ -767,6 +771,7 @@
 		getResizeLimits?: () => { maxWidth: number; maxHeight: number };
 		fitToContainer?: () => void;
 		resetPreviewPosition?: () => void;
+		nudgeIframePaint?: () => void;
 	} | undefined;
 	let previewIframe: HTMLIFrameElement | null = null;
 	let isLoadingDirectPreviewUrl = false;
@@ -806,6 +811,14 @@
 	/** Parent calls this when a generation starts for THIS widget's panel. */
 	export function markCodegenStarted(): void {
 		codegenStartedAt = Date.now();
+		// A pinned published artifact — a version picked from the history dropdown —
+		// makes the Worker build event a no-op, so the panel went on showing that
+		// older version after the generation finished. The code being generated is
+		// what the user just asked to see, so the pin does not survive a generation.
+		pinnedPublishedPreviewUrl = null;
+		// The build event is judged against the previous generation's signature
+		// otherwise, and a Worker cache hit can reproduce it exactly.
+		lastWsPreviewSignature = null;
 	}
 
 	/**
@@ -2046,7 +2059,8 @@
 
 	function normalizeRepositoryId(source: WidgetSummary | null): string | null {
 		if (!source) return null;
-		return source.repositoryId || source.repo_id || source.repoId || null;
+		const candidate = source.repositoryId || source.repo_id || source.repoId;
+		return typeof candidate === 'string' ? candidate : null;
 	}
 
 	// ═══════════════════════════════════════════════════════════════════════
@@ -3159,10 +3173,18 @@
 
 	let lastWsPreviewSignature: string | null = null;
 
-	async function applyWorkerPreviewFromEvent(workerUrl: string, buildTimeMs?: number | null): Promise<void> {
+	async function applyWorkerPreviewFromEvent(
+		workerUrl: string,
+		buildTimeMs?: number | null,
+		eventTimestamp?: string | null,
+	): Promise<void> {
 		if (pinnedPublishedPreviewUrl) return;
 		const fetchUrl = toWorkerPreviewFetchUrl(workerUrl);
-		const signature = `${fetchUrl}:${buildTimeMs ?? 'na'}:${selectedWidgetId ?? ''}`;
+		// The Worker serves every build of a widget at the same /preview URL, and
+		// buildTimeMs repeats across builds (0 on a cache hit), so url + buildTimeMs
+		// alone made a second generation look like a replay of the first and the
+		// iframe kept the previous version. The per-event timestamp separates them.
+		const signature = `${fetchUrl}:${buildTimeMs ?? 'na'}:${eventTimestamp ?? 'na'}:${selectedWidgetId ?? ''}`;
 		if (signature === lastWsPreviewSignature) return;
 		lastWsPreviewSignature = signature;
 
@@ -3189,6 +3211,7 @@
 		void applyWorkerPreviewFromEvent(
 			$dynamicWorkerPreviewStatus.previewUrl,
 			$dynamicWorkerPreviewStatus.buildTimeMs,
+			$dynamicWorkerPreviewStatus.timestamp,
 		);
 	}
 
@@ -3685,14 +3708,11 @@
 								<Button onclick={() => { showPreviewModal = false; }} variant="outline" size="sm" class="close-preview-modal-btn shrink-0 w-6 h-6 p-[3px] cursor-pointer border border-black text-md bg-white text-black hover:bg-gray-100 rounded-lg">X</Button>
 							</div>
 						</div>
-					{/if}
-					<WidgetPreview
-						bind:this={widgetPreviewComponentRef}
-						mode="controlled"
-						enableResize={true}
-						resizeMode="concentric"
-						defaultStageAlign="center"
-						autoFitStage={showPreviewModal}
+					{/if}						<WidgetPreview
+							bind:this={widgetPreviewComponentRef}
+							mode="controlled"
+							enableResize={true}
+							autoFitStage={showPreviewModal}
 						src={iframeSrc || getFallbackPreviewUrl()}
 						displayUrl={directPreviewUrl || iframeSrc}
 						bind:resizeWidth={previewResizeWidth}

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

@@ -201,6 +201,9 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     'composition-editor': {};
     'embed-section': {};
 }, {
+    hasValidToken: boolean;
+    isCheckingActiveGeneration: boolean;
+    debugModeAvailable: boolean;
     beginCompositionHydration: () => void;
     showPublishedArtifact: (url: string | null) => void;
     finishCompositionHydration: () => void;

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -49,6 +49,8 @@
 		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;
+		/** Tell the canvas a chrome drag started/ended (suppresses hover-select). */
+		onOverlayDragChange?: ((active: boolean) => 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. */
@@ -86,6 +88,8 @@
 		resolveIsPublishing?: ((widgetId: string) => boolean) | null;
 		/** Publish-disabled reason for a specific Draft row (null = enabled). */
 		resolvePublishDisabledReason?: ((widgetId: string, version: number) => string | null) | null;
+		/** Whether code generation is running (suppresses background captures / reloads). */
+		isGenerating?: boolean;
 	}
 
 	let {
@@ -103,6 +107,7 @@
 		resolvePublishDisabled = null,
 		onTranslate = null,
 		onTranslateEnd = null,
+		onOverlayDragChange = null,
 		onSelectShape = null,
 		onOpenChat = null,
 		resolveTitle = null,
@@ -121,6 +126,7 @@
 		resolveIsPublishing = null,
 		/** Per-widget publish-gate reason for a Draft row (tooltip on Publish). */
 		resolvePublishDisabledReason = null,
+		isGenerating = false,
 	}: Props = $props();
 
 	const DRAG_BAR_H = 30;
@@ -130,7 +136,11 @@
 	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';
+	/** Row height ≈2.1rem (py-1.5 + text) + 0.6rem vertical padding for the menu box. */
+	const VERSION_MENU_ROW_REM = 2.1;
+	const VERSION_MENU_PAD_REM = 0.6;
+	/** Menu shows at most 5 rows before scrolling. */
+	const VERSION_MENU_MAX_ROWS = 5;
 
 	type ShapeRect = {
 		widgetId: string;
@@ -177,15 +187,51 @@
 	 * at the same URL (codegen rebuild). `sync()` only reloads when `src` changes,
 	 * so without a cache-bust token the overlay keeps showing pre-codegen content.
 	 * Bumps the reload token → `{#key}` remounts the iframe with a fresh `_t`.
+	 *
+	 * Reloads closer together than RELOAD_COALESCE_MS are collapsed into one, so
+	 * the WS build event and the codegen `completed` handler do not flicker the
+	 * overlay twice. The extra call is deferred rather than dropped: the later
+	 * request is the authoritative one (codegen reloads after the build event, and
+	 * a build-repair loop builds more than once), and dropping it left the overlay
+	 * showing the version from before the generation.
 	 */
+	const RELOAD_COALESCE_MS = 1200;
+	let lastReloadAtByWidgetId: Record<string, number> = {};
+	const coalescedReloadTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
 	export function requestReload(widgetId: string): void {
-		const token = Math.max(Date.now(), (reloadTokens[widgetId] || 0) + 1);
+		const now = Date.now();
+		const sinceLast = now - (lastReloadAtByWidgetId[widgetId] || 0);
+		if (sinceLast < RELOAD_COALESCE_MS) {
+			if (!coalescedReloadTimers.has(widgetId)) {
+				coalescedReloadTimers.set(
+					widgetId,
+					setTimeout(() => {
+						coalescedReloadTimers.delete(widgetId);
+						requestReload(widgetId);
+					}, RELOAD_COALESCE_MS - sinceLast),
+				);
+			}
+			return;
+		}
+		const coalesced = coalescedReloadTimers.get(widgetId);
+		if (coalesced) {
+			clearTimeout(coalesced);
+			coalescedReloadTimers.delete(widgetId);
+		}
+		lastReloadAtByWidgetId[widgetId] = now;
+		cancelPendingRefresh(widgetId);
+		const token = Math.max(now, (reloadTokens[widgetId] || 0) + 1);
+		pendingRefreshTokens.set(widgetId, token);
 		reloadTokens = { ...reloadTokens, [widgetId]: token };
 		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: false };
+		sync();
 	}
 
 	/** Which shape chrome version menu is open. */
 	let openVersionMenuWidgetId = $state<string | null>(null);
+	/** Local manual version selection override per widget (ensures trigger updates immediately). */
+	let localSelectedVersionByWidgetId = $state<Record<string, string>>({});
 	/** Hide Fabric placeholder flash — show loader until iframe fires load. */
 	let iframeLoadedByWidgetId = $state<Record<string, boolean>>({});
 
@@ -263,11 +309,13 @@
 			document.body.style.removeProperty('user-select');
 			document.body.style.removeProperty('cursor');
 			onTranslateEnd?.(widgetId);
+			onOverlayDragChange?.(false);
 			console.log('[WidgetShapeLivePreviews] Drag end', widgetId.substring(0, 8));
 		}
 
 		document.body.style.userSelect = 'none';
 		document.body.style.cursor = 'grabbing';
+		onOverlayDragChange?.(true);
 		document.addEventListener('pointermove', onMove);
 		document.addEventListener('pointerup', endDrag);
 		document.addEventListener('pointercancel', endDrag);
@@ -303,6 +351,11 @@
 		// An old load event must not mark the replacement loaded or claim its timer.
 		if (!matchesFrame()) return;
 		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: true };
+		// Suppress auto-refresh / screenshot capture when code generation is running.
+		if (isGenerating) {
+			cancelPendingRefresh(widgetId);
+			return;
+		}
 		const token = pendingRefreshTokens.get(widgetId);
 		if (!token || refreshSettleTimers.has(widgetId)) return;
 		const isCurrent = () => matchesFrame()
@@ -332,6 +385,8 @@
 	}
 
 	function resolveSelectedVersionId(widgetId: string, options: VersionOption[]): string {
+		const local = localSelectedVersionByWidgetId[widgetId];
+		if (local && options.some((o) => o.id === local)) return local;
 		const fromParent = resolveVersionSelectedId?.(widgetId)?.trim();
 		if (fromParent && options.some((o) => o.id === fromParent)) return fromParent;
 		const liveOpt = options.find((o) => o.isLive);
@@ -404,6 +459,7 @@
 	function selectVersionFromMenu(widgetId: string, versionId: string) {
 		openVersionMenuWidgetId = null;
 		if (!versionId) return;
+		localSelectedVersionByWidgetId = { ...localSelectedVersionByWidgetId, [widgetId]: versionId };
 		onVersionChange?.(widgetId, versionId);
 	}
 
@@ -438,8 +494,15 @@
 	 */
 	function trackIframeSelection(iframe, widgetId) {
 		let focusTimer;
+		let pointerIsDown = false;
+		const onWindowPointerDown = () => { pointerIsDown = true; };
+		const onWindowPointerUp = () => { pointerIsDown = false; };
 		function select() {
 			if (!enabled || draggingWidgetId || resizingWidgetId || !iframe.isConnected) return;
+			// A drag in progress anywhere (Fabric shape drag or overlay chrome drag)
+			// must not let hover over this iframe steal the selection — the pointer
+			// merely passes over other shapes while carrying the dragged one.
+			if (pointerIsDown) return;
 			// Keep the menu owner selected while its dropdown is being used.
 			if (openVersionMenuWidgetId && openVersionMenuWidgetId !== widgetId) return;
 			if (selectedWidgetId !== widgetId) onSelectShape?.(widgetId);
@@ -450,6 +513,8 @@
 				if (document.activeElement === iframe) select();
 			}, 0);
 		}
+		window.addEventListener('pointerdown', onWindowPointerDown, true);
+		window.addEventListener('pointerup', onWindowPointerUp, true);
 		iframe.addEventListener('pointerenter', select);
 		iframe.addEventListener('focus', select);
 		window.addEventListener('blur', checkFocus);
@@ -457,6 +522,8 @@
 			update(nextWidgetId) { widgetId = nextWidgetId; },
 			destroy() {
 				clearTimeout(focusTimer);
+				window.removeEventListener('pointerdown', onWindowPointerDown, true);
+				window.removeEventListener('pointerup', onWindowPointerUp, true);
 				iframe.removeEventListener('pointerenter', select);
 				iframe.removeEventListener('focus', select);
 				window.removeEventListener('blur', checkFocus);
@@ -498,6 +565,8 @@
 		return () => {
 			cancelAnimationFrame(initialSyncFrame);
 			for (const widgetId of [...pendingRefreshTokens.keys()]) cancelPendingRefresh(widgetId);
+			for (const timer of coalescedReloadTimers.values()) clearTimeout(timer);
+			coalescedReloadTimers.clear();
 			document.removeEventListener('pointerdown', handleDocumentPointerDown, true);
 			document.removeEventListener('keydown', handleDocumentKeydown);
 			window.removeEventListener('widgetic:widget-shape-pointer-block', onShapePointerBlock);
@@ -604,7 +673,7 @@
 									>
 										<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"
+											class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[10px] 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();
@@ -620,7 +689,7 @@
 										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"
+											class="widget-shape-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded bg-emerald-100 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-600 opacity-80"
 										>Live</span>
 									</HoverTooltip>
 								{:else if selectedVersion && onSetLive && !isDraftVersion(selectedVersion)}
@@ -631,7 +700,7 @@
 									>
 										<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"
+											class="widget-shape-set-live-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded border border-emerald-300 px-1 py-0.5 text-[10px] 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()}
@@ -646,7 +715,7 @@
 										>
 											<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"
+												class="widget-shape-publish-btn shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded border border-emerald-600 bg-emerald-600 px-1 py-0.5 text-[10px] 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()}
@@ -659,39 +728,45 @@
 											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"
+												class="widget-shape-draft-badge shrink-0 inline-flex items-center justify-center min-w-[4.75rem] w-[4.75rem] rounded bg-amber-100 px-1 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700"
 											>Draft</span>
 										</HoverTooltip>
 									{/if}
 								{/if}
 								{#if versionMenuOpen}
+									{@const hasScroll = versionOptions.length > 5}
 									<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;"
+										class="widget-shape-version-menu absolute top-full z-30 mt-0.5 w-max rounded-md border border-emerald-200 bg-white p-1 shadow-lg"
+										style="right: -12px;"
 										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
+											class="widget-shape-version-scroll flex flex-col gap-1 overflow-x-hidden {hasScroll ? 'overflow-y-auto' : 'overflow-y-visible'}"
+											style="{hasScroll ? 'max-height: 185px; margin-right: -4px; padding-right: 4px;' : 'max-height: none;'} scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;"
+										>
+											{#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>
 									</div>
 								{/if}
 							</div>
@@ -812,16 +887,19 @@
 {/if}
 
 <style>
-	.widget-shape-version-menu::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
+	.widget-shape-version-scroll::-webkit-scrollbar {
+		width: 4px;
+		height: 4px;
 		background: transparent;
 	}
-	.widget-shape-version-menu::-webkit-scrollbar-track {
+	.widget-shape-version-scroll::-webkit-scrollbar-track {
 		background: transparent;
 	}
-	.widget-shape-version-menu::-webkit-scrollbar-thumb {
+	.widget-shape-version-scroll::-webkit-scrollbar-thumb {
 		background: rgba(0, 0, 0, 0.2);
 		border-radius: 4px;
 	}
+	.widget-shape-version-scroll::-webkit-scrollbar-thumb:hover {
+		background: rgba(0, 0, 0, 0.35);
+	}
 </style>

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

@@ -51,6 +51,8 @@ interface Props {
     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;
+    /** Tell the canvas a chrome drag started/ended (suppresses hover-select). */
+    onOverlayDragChange?: ((active: boolean) => 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. */
@@ -88,6 +90,8 @@ interface Props {
     resolveIsPublishing?: ((widgetId: string) => boolean) | null;
     /** Publish-disabled reason for a specific Draft row (null = enabled). */
     resolvePublishDisabledReason?: ((widgetId: string, version: number) => string | null) | null;
+    /** Whether code generation is running (suppresses background captures / reloads). */
+    isGenerating?: boolean;
 }
 declare const WidgetShapeLivePreviews: import("svelte").Component<Props, {
     requestReload: (widgetId: string) => void;

package/dist/utils/freezeWatchdog.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Main-thread responsiveness watchdog.
+ *
+ * PerformanceObserver('longtask') only fires AFTER a blocking task completes —
+ * an infinite reactive loop, or heavy work running inside a same-origin iframe
+ * (html2canvas screenshot captures in the widget preview share the parent's main
+ * thread), is never attributed to the page. The result was a frozen site with no
+ * [FreezeReport] in the console.
+ *
+ * This watchdog flips the model: a Web Worker (own thread, unaffected by the
+ * blocked main thread) pings every 500ms and the main thread answers. When pongs
+ * stop arriving, the worker logs a [FreezeReport] straight to the page console
+ * (worker console output shows in DevTools) with the block duration and the last
+ * codegen status the main thread reported. It also reports recovery, so each
+ * freeze episode produces exactly two lines: block start + recovery.
+ *
+ * The duration alone never said *what* blocked, which is why the freeze survived
+ * several rounds of fixes. So the main thread also keeps breadcrumbs — long tasks
+ * seen by PerformanceObserver (with their iframe attribution, since a widget
+ * preview blocking the shared main thread looks identical to the page blocking
+ * itself) and explicit `measureSync` spans — and ships the ones it has not
+ * reported yet on the next pong. The pong that lands on recovery therefore
+ * carries the task that caused the freeze, named and measured.
+ */
+export interface FreezeWatchdog {
+    /** Main thread reports the current codegen status; included in freeze reports. */
+    setStatus(status: string): void;
+    /** Record a synchronous span so a freeze report can name it. */
+    addBreadcrumb(label: string, duration: number, source?: string): void;
+    dispose(): void;
+}
+/**
+ * Times a synchronous step and hands it to the watchdog when it blocks long
+ * enough to matter. Cheap enough to leave on any suspect path permanently: two
+ * `performance.now()` reads and, for ordinary fast calls, nothing else.
+ */
+export declare function measureSync<T>(label: string, run: () => T): T;
+export declare function installFreezeWatchdog(): FreezeWatchdog | null;