@widgetic/creator 0.3.66 → 0.3.68

package/dist/components/WidgetDetails.svelte

@@ -806,6 +806,11 @@
 		// console.log('[WidgetDetails] Codegen preview marked fresh — skipping GitLab rebuilds for 30s');
 	}
 
+	/** Restore Checkpoint must compile GitLab HEAD even inside the post-codegen window. */
+	export function clearCodegenPreviewFresh(): void {
+		codegenPreviewFreshUntil = 0;
+	}
+
 	/** Timestamp of generation start — set by the parent when the operation begins. */
 	let codegenStartedAt: number | null = null;
 	/** Parent calls this when a generation starts for THIS widget's panel. */
@@ -2394,6 +2399,10 @@
 		if (previewHealthCheckHandle) { clearInterval(previewHealthCheckHandle); previewHealthCheckHandle = null; }
 		previewFallbackHandle = setTimeout(() => {
 			if ((previewLoading || previewHydrating) && (directPreviewUrl || iframeSrc)) {
+				if (previewWidgetReady && !previewHydrating) {
+					previewLoading = false;
+					return;
+				}
 				console.warn('[WidgetDetails] Preview fallback timeout — revealing iframe');
 				previewLoading = false;
 				previewError = null;
@@ -3172,6 +3181,11 @@
 	}
 
 	let lastWsPreviewSignature: string | null = null;
+	let pendingWorkerPreviewFromWs: {
+		workerUrl: string;
+		buildTimeMs?: number | null;
+		eventTimestamp?: string | null;
+	} | null = null;
 
 	async function applyWorkerPreviewFromEvent(
 		workerUrl: string,
@@ -3188,6 +3202,16 @@
 		if (signature === lastWsPreviewSignature) return;
 		lastWsPreviewSignature = signature;
 
+		if (isGeneratingCode) {
+			pendingWorkerPreviewFromWs = { workerUrl, buildTimeMs, eventTimestamp };
+			dynamicWorkerPreviewUrl = fetchUrl;
+			directPreviewUrl = toWorkerPreviewDisplayUrl(fetchUrl);
+			console.log('[WidgetDetails] Defer Worker iframe remount until codegen finishes');
+			return;
+		}
+
+		pendingWorkerPreviewFromWs = null;
+
 		// console.log('[WidgetDetails] Worker preview ready — force reloading iframe', {
 			// widgetId: selectedWidgetId,
 			// previewUrl: fetchUrl,
@@ -3215,6 +3239,13 @@
 		);
 	}
 
+	$: if (!isGeneratingCode && pendingWorkerPreviewFromWs) {
+		const pending = pendingWorkerPreviewFromWs;
+		pendingWorkerPreviewFromWs = null;
+		lastWsPreviewSignature = null;
+		void applyWorkerPreviewFromEvent(pending.workerUrl, pending.buildTimeMs, pending.eventTimestamp);
+	}
+
 	// Process queued actions
 	$: if (queuedActions.length > 0) {
 		void processQueuedActions();
@@ -3910,9 +3941,7 @@
 
 <style>
 	.widget-details-drag-bar button:focus,
-	.widget-details-drag-bar button:focus-visible,
-	.widget-details-drag-bar a:focus,
-	.widget-details-drag-bar a:focus-visible {
+	.widget-details-drag-bar button:focus-visible {
 		outline: none;
 		box-shadow: none;
 	}

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

@@ -108,6 +108,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     showPublishedArtifact?: (url: string | null) => void;
     finishCompositionHydration?: () => void;
     markCodegenPreviewFresh?: () => void;
+    clearCodegenPreviewFresh?: () => void;
     markCodegenStarted?: () => void;
     hasLiveWorkerPreview?: () => boolean;
     getLatestRuntimeLogs?: (maxLines?: number) => string[];
@@ -208,6 +209,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     showPublishedArtifact: (url: string | null) => void;
     finishCompositionHydration: () => void;
     markCodegenPreviewFresh: () => void;
+    clearCodegenPreviewFresh: () => void;
     markCodegenStarted: () => void;
     hasLiveWorkerPreview: () => boolean;
     getLatestRuntimeLogs: (maxLines?: number) => string[];

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -130,17 +130,36 @@
 	}: 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;
+	/** Keeps Fabric handles clickable. The strip is inside the shape and outside the iframe. */
 	const IFRAME_INSET_PX = 2;
+	/**
+	 * Negative so the bar covers that inset. Otherwise the strip is a dead hit-zone:
+	 * the pointer falls through to the canvas and selects the widget underneath.
+	 */
+	const BAR_SHAPE_GAP = -IFRAME_INSET_PX;
 	/** ~5 version rows before the menu scrolls (matches chat history panel). */
 	/** 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;
+	/** Fabric corner handles sit on the shape corners and must stay clickable through the bar. */
+	const HANDLE_NOTCH_PX = 14;
+
+	function headerNotchClip(barWidth: number, shapeWidth: number): string {
+		const notch = HANDLE_NOTCH_PX;
+		const height = DRAG_BAR_H;
+		const y = height - notch;
+		const shapeRight = Math.min(barWidth, Math.max(shapeWidth, notch * 2));
+		if (shapeRight >= barWidth - 1) {
+			return `polygon(0px 0px, ${barWidth}px 0px, ${barWidth}px ${y}px, ${barWidth - notch}px ${y}px, ${barWidth - notch}px ${height}px, ${notch}px ${height}px, ${notch}px ${y}px, 0px ${y}px)`;
+		}
+		const rightInner = Math.max(notch + 1, shapeRight - notch);
+		return `polygon(0px 0px, ${barWidth}px 0px, ${barWidth}px ${height}px, ${shapeRight}px ${height}px, ${shapeRight}px ${y}px, ${rightInner}px ${y}px, ${rightInner}px ${height}px, ${notch}px ${height}px, ${notch}px ${y}px, 0px ${y}px)`;
+	}
 
 	type ShapeRect = {
 		widgetId: string;
@@ -200,6 +219,7 @@
 	const coalescedReloadTimers = new Map<string, ReturnType<typeof setTimeout>>();
 
 	export function requestReload(widgetId: string): void {
+		if (isGenerating) return;
 		const now = Date.now();
 		const sinceLast = now - (lastReloadAtByWidgetId[widgetId] || 0);
 		if (sinceLast < RELOAD_COALESCE_MS) {
@@ -222,12 +242,38 @@
 		lastReloadAtByWidgetId[widgetId] = now;
 		cancelPendingRefresh(widgetId);
 		const token = Math.max(now, (reloadTokens[widgetId] || 0) + 1);
-		pendingRefreshTokens.set(widgetId, token);
+		// Do not set pendingRefreshTokens — that path runs html2canvas (explicit Refresh only).
 		reloadTokens = { ...reloadTokens, [widgetId]: token };
 		iframeLoadedByWidgetId = { ...iframeLoadedByWidgetId, [widgetId]: false };
 		sync();
 	}
 
+	/** Drop coalesced overlay reloads and pending captures when a generation starts. */
+	export function cancelReloads(widgetId?: string): void {
+		if (widgetId) {
+			const coalesced = coalescedReloadTimers.get(widgetId);
+			if (coalesced) {
+				clearTimeout(coalesced);
+				coalescedReloadTimers.delete(widgetId);
+			}
+			cancelPendingRefresh(widgetId);
+			return;
+		}
+		for (const timer of coalescedReloadTimers.values()) clearTimeout(timer);
+		coalescedReloadTimers.clear();
+		for (const id of [...pendingRefreshTokens.keys()]) cancelPendingRefresh(id);
+	}
+
+	export function setSelectedVersion(widgetId: string, versionId: string | null): void {
+		if (!widgetId) return;
+		if (!versionId) {
+			const { [widgetId]: _dropped, ...rest } = localSelectedVersionByWidgetId;
+			localSelectedVersionByWidgetId = rest;
+			return;
+		}
+		localSelectedVersionByWidgetId = { ...localSelectedVersionByWidgetId, [widgetId]: versionId };
+	}
+
 	/** Which shape chrome version menu is open. */
 	let openVersionMenuWidgetId = $state<string | null>(null);
 	/** Local manual version selection override per widget (ensures trigger updates immediately). */
@@ -291,17 +337,32 @@
 		draggingWidgetId = widgetId;
 		let lastX = event.clientX;
 		let lastY = event.clientY;
+		let pendingDx = 0;
+		let pendingDy = 0;
+		let dragFrame = 0;
+
+		function flushDrag() {
+			dragFrame = 0;
+			const dx = pendingDx;
+			const dy = pendingDy;
+			pendingDx = 0;
+			pendingDy = 0;
+			if (dx === 0 && dy === 0) return;
+			onTranslate?.(widgetId, dx, dy);
+		}
 
 		function onMove(e: PointerEvent) {
-			const dx = e.clientX - lastX;
-			const dy = e.clientY - lastY;
+			pendingDx += e.clientX - lastX;
+			pendingDy += e.clientY - lastY;
 			lastX = e.clientX;
 			lastY = e.clientY;
-			if (dx === 0 && dy === 0) return;
-			onTranslate?.(widgetId, dx, dy);
+			if (dragFrame) return;
+			dragFrame = requestAnimationFrame(flushDrag);
 		}
 
 		function endDrag() {
+			if (dragFrame) cancelAnimationFrame(dragFrame);
+			flushDrag();
 			draggingWidgetId = null;
 			document.removeEventListener('pointermove', onMove);
 			document.removeEventListener('pointerup', endDrag);
@@ -415,11 +476,24 @@
 		return (option.shortLabel || option.label || fallback).trim();
 	}
 
+	let versionMenuBox = $state<{ widgetId: string; top: number; right: number } | null>(null);
+
 	function toggleVersionMenu(event: MouseEvent, widgetId: string) {
 		event.preventDefault();
 		event.stopPropagation();
 		onSelectShape?.(widgetId);
-		openVersionMenuWidgetId = openVersionMenuWidgetId === widgetId ? null : widgetId;
+		if (openVersionMenuWidgetId === widgetId) {
+			openVersionMenuWidgetId = null;
+			versionMenuBox = null;
+			return;
+		}
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		versionMenuBox = {
+			widgetId,
+			top: rect.bottom + 2,
+			right: window.innerWidth - rect.right,
+		};
+		openVersionMenuWidgetId = widgetId;
 	}
 
 	function selectVersion(event: MouseEvent, widgetId: string, versionId: string) {
@@ -428,7 +502,6 @@
 		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) {
@@ -586,6 +659,13 @@
 			{@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 frameScaleX = Math.hypot(bodyMatrix[0], bodyMatrix[1]) || 1}
+			{@const frameScaleY = Math.hypot(bodyMatrix[2], bodyMatrix[3]) || 1}
+			{@const frameRotation = Math.atan2(bodyMatrix[1], bodyMatrix[0])}
+			{@const frameCos = Math.cos(frameRotation)}
+			{@const frameSin = Math.sin(frameRotation)}
+			{@const frameWidth = Math.max(1, bodyWidth * frameScaleX)}
+			{@const frameHeight = Math.max(1, bodyHeight * frameScaleY)}
 			{@const showExpandedChrome = isSelected || overlay.width >= SHOW_TITLE_MIN_WIDTH}
 			{@const chromeWidth = showExpandedChrome
 				? Math.max(overlay.width, MIN_EXPANDED_CHROME_WIDTH)
@@ -621,10 +701,16 @@
 				<div
 					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;"
+					style="height: {DRAG_BAR_H}px; cursor: grab; min-width: {showExpandedChrome ? MIN_EXPANDED_CHROME_WIDTH : 0}px; clip-path: {headerNotchClip(chromeWidth, overlay.width)};"
 					title="Drag widget"
 					onpointerdown={(e) => startShapeDrag(e, overlay.widgetId)}
 				>
+					{#if isPrimary}
+						<div
+							class="widget-shape-primary-stroke pointer-events-none absolute z-20 bg-[#DC2626]"
+							style="left: 0; width: {overlay.width}px; top: {DRAG_BAR_H - IFRAME_INSET_PX - 1}px; height: 2px; clip-path: inset(0 {HANDLE_NOTCH_PX}px 0 {HANDLE_NOTCH_PX}px);"
+						></div>
+					{/if}
 					<span class="widget-shape-drag-grip shrink-0 text-xs leading-none text-gray-400" aria-hidden="true">⠿</span>
 
 					{#if showExpandedChrome}
@@ -733,42 +819,6 @@
 										</HoverTooltip>
 									{/if}
 								{/if}
-								{#if versionMenuOpen}
-									{@const hasScroll = versionOptions.length > 5}
-									<div
-										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"
-									>
-										<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>
 						{:else if versionTriggerText && versionTriggerText !== '—'}
 							<span
@@ -829,7 +879,7 @@
 				<div
 					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};"
+					style="height: {frameHeight}px; width: {frameWidth}px; transform: matrix({frameCos}, {frameSin}, {-frameSin}, {frameCos}, {bodyMatrix[4]}, {bodyMatrix[5]}); z-index: {isSelected ? 60 : 1};"
 				>
 					<!-- A new reload gets its own window so old load/screenshot replies cannot win. -->
 					{#if overlay.src}
@@ -880,6 +930,43 @@
 						></div>
 					{/if}
 				</div>
+				{#if versionMenuOpen && versionMenuBox?.widgetId === overlay.widgetId}
+					{@const hasScroll = versionOptions.length > 5}
+					<div
+						class="widget-shape-version-menu pointer-events-auto fixed z-[400] w-max rounded-md border border-emerald-200 bg-white p-1 shadow-lg"
+						data-version-menu-for={overlay.widgetId}
+						style="top: {versionMenuBox.top}px; right: {versionMenuBox.right}px;"
+						role="listbox"
+					>
+						<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>
 		{/each}
 	</div>

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

@@ -95,6 +95,8 @@ interface Props {
 }
 declare const WidgetShapeLivePreviews: import("svelte").Component<Props, {
     requestReload: (widgetId: string) => void;
+    cancelReloads: (widgetId?: string) => void;
+    setSelectedVersion: (widgetId: string, versionId: string | null) => void;
     sync: () => void;
 }, "">;
 type WidgetShapeLivePreviews = ReturnType<typeof WidgetShapeLivePreviews>;

package/dist/stores/websocketStore.d.ts

@@ -24,7 +24,7 @@ export interface CodeGenerationStatus {
     error: string | null;
     timestamp: string | null;
 }
-/** Agent harness repair lines pushed during codegen (vmConsole:aiderOutput). */
+/** Agent harness repair lines pushed during codegen (codegen:output). */
 export interface AgentHarnessOutput {
     output: string;
     timestamp: string;

package/dist/stores/websocketStore.js

@@ -222,7 +222,7 @@ function setupSocketListeners(sock) {
     // =========================================================================
     // Dynamic Worker Preview
     // =========================================================================
-    sock.on('vmConsole:aiderOutput', (data) => {
+    sock.on('codegen:output', (data) => {
         const output = typeof data?.output === 'string' ? data.output.trim() : '';
         if (!output)
             return;

package/dist/utils/creatorDraftStorage.d.ts

@@ -12,6 +12,11 @@ export declare function readAllWidgetDrafts(): Promise<Record<string, WidgetDraf
 export declare function copyWidgetDraft(sourceWidgetId: string, targetWidgetId: string): Promise<void>;
 export declare function saveCanvasState(canvasId: string | null, json: string): void;
 export declare function readCanvasState(canvasId: string | null): Promise<string | null>;
+/** False before an owner is known — nothing can be persisted yet. */
+export declare function canPersistShapeThumbnails(): boolean;
+export declare function saveShapeThumbnail(ref: string, dataUrl: string): void;
+export declare function readShapeThumbnail(ref: string): Promise<string | null>;
+export declare function deleteShapeThumbnail(ref: string): Promise<void>;
 export declare function saveActiveGeneration(widgetId: string, operationId: string): void;
 export declare function readActiveGeneration(widgetId: string): Promise<string | null>;
 export declare function clearActiveGeneration(widgetId: string): Promise<void>;

package/dist/utils/creatorDraftStorage.js

@@ -11,6 +11,7 @@ import { deleteEntity, getCacheOwner, readAllEntitiesForKind, readEntity, writeE
 const DRAFT_KIND = 'creatorDrafts';
 const CANVAS_KIND = 'creatorCanvasState';
 const GENERATION_KIND = 'creatorActiveGeneration';
+const SHAPE_THUMBNAIL_KIND = 'creatorShapeThumbnails';
 function ownerIdOrNull() {
     return getCacheOwner();
 }
@@ -56,7 +57,9 @@ export function saveCanvasState(canvasId, json) {
     const ownerId = ownerIdOrNull();
     if (!ownerId)
         return;
-    void writeEntity(ownerId, CANVAS_KIND, canvasId ?? 'default', json).catch((error) => {
+    // Wrapped: readEntity discards non-object payloads, so a bare string never
+    // came back and this durable fallback silently read as empty.
+    void writeEntity(ownerId, CANVAS_KIND, canvasId ?? 'default', { json }).catch((error) => {
         console.warn('[creatorDraftStorage] Failed to persist canvas state:', error);
     });
 }
@@ -64,20 +67,54 @@ export async function readCanvasState(canvasId) {
     const ownerId = ownerIdOrNull();
     if (!ownerId)
         return null;
-    return readEntity(ownerId, CANVAS_KIND, canvasId ?? 'default');
+    const record = await readEntity(ownerId, CANVAS_KIND, canvasId ?? 'default');
+    return record?.json ?? null;
+}
+// ─── Widget shape thumbnails ─────────────────────────────────────
+//
+// Widget screenshots used to be serialized inline in the canvas JSON, which
+// made every autosave stringify megabytes of base64 on the main thread. They
+// live here instead, keyed by the reference the canvas puts on the shape.
+/** False before an owner is known — nothing can be persisted yet. */
+export function canPersistShapeThumbnails() {
+    return !!ownerIdOrNull();
+}
+export function saveShapeThumbnail(ref, dataUrl) {
+    const ownerId = ownerIdOrNull();
+    if (!ownerId || !ref || !dataUrl)
+        return;
+    // Wrapped in an object: readEntity only hands back object payloads, so a bare
+    // string round-trips as null.
+    void writeEntity(ownerId, SHAPE_THUMBNAIL_KIND, ref, { dataUrl }).catch((error) => {
+        console.warn('[creatorDraftStorage] Failed to persist shape thumbnail:', ref, error);
+    });
+}
+export async function readShapeThumbnail(ref) {
+    const ownerId = ownerIdOrNull();
+    if (!ownerId || !ref)
+        return null;
+    const record = await readEntity(ownerId, SHAPE_THUMBNAIL_KIND, ref);
+    return record?.dataUrl ?? null;
+}
+export async function deleteShapeThumbnail(ref) {
+    const ownerId = ownerIdOrNull();
+    if (!ownerId || !ref)
+        return;
+    await deleteEntity(ownerId, SHAPE_THUMBNAIL_KIND, ref);
 }
 // ─── Active generation id ────────────────────────────────────────
 export function saveActiveGeneration(widgetId, operationId) {
     const ownerId = ownerIdOrNull();
     if (!ownerId)
         return;
-    void writeEntity(ownerId, GENERATION_KIND, widgetId, operationId);
+    void writeEntity(ownerId, GENERATION_KIND, widgetId, { operationId });
 }
 export async function readActiveGeneration(widgetId) {
     const ownerId = ownerIdOrNull();
     if (!ownerId)
         return null;
-    return readEntity(ownerId, GENERATION_KIND, widgetId);
+    const record = await readEntity(ownerId, GENERATION_KIND, widgetId);
+    return record?.operationId ?? null;
 }
 export async function clearActiveGeneration(widgetId) {
     const ownerId = ownerIdOrNull();

package/dist/utils/freezeWatchdog.js

@@ -29,7 +29,7 @@ let reported = false;
 let lastStatus = '';
 let breadcrumbs = [];
 const PING_MS = 500;
-const STALL_MS = 4000;
+const STALL_MS = 1500;
 
 function describeBreadcrumbs() {
   if (breadcrumbs.length === 0) return 'no instrumented task over 200ms — the block is somewhere not yet measured';
@@ -45,12 +45,16 @@ setInterval(() => {
     if (!freezeStartedAt) freezeStartedAt = now - STALL_MS;
     if (!reported) {
       reported = true;
-      console.warn('[FreezeReport] Main thread unresponsive ' + Math.round(now - freezeStartedAt) +
-        'ms. Last status: "' + (lastStatus || '—') + '"');
+      const msg = '[FreezeReport] Main thread unresponsive ' + Math.round(now - freezeStartedAt) +
+        'ms. Last status: "' + (lastStatus || '—') + '". Select the top page in the console frame picker (not the widget iframe).';
+      console.warn(msg);
+      postMessage({ type: 'freeze-report', phase: 'start', message: msg });
     }
   } else if (freezeStartedAt) {
-    console.warn('[FreezeReport] Main thread recovered after ' + Math.round(now - freezeStartedAt) +
-      'ms. Last status: "' + (lastStatus || '—') + '". Blocking work: ' + describeBreadcrumbs());
+    const msg = '[FreezeReport] Main thread recovered after ' + Math.round(now - freezeStartedAt) +
+      'ms. Last status: "' + (lastStatus || '—') + '". Blocking work: ' + describeBreadcrumbs();
+    console.warn(msg);
+    postMessage({ type: 'freeze-report', phase: 'recovery', message: msg });
     freezeStartedAt = null;
     reported = false;
   }
@@ -128,11 +132,38 @@ export function installFreezeWatchdog() {
     URL.revokeObjectURL(url);
     let lastStatus = '';
     let pendingBreadcrumbs = [];
+    let lastLongTaskSentAt = performance.now();
+    function longTasksSince(since) {
+        if (typeof performance === 'undefined' || typeof performance.getEntriesByType !== 'function')
+            return [];
+        const found = [];
+        for (const entry of performance.getEntriesByType('longtask')) {
+            const endedAt = entry.startTime + entry.duration;
+            if (endedAt < since || entry.duration < BREADCRUMB_MIN_MS)
+                continue;
+            const attribution = entry.attribution?.[0];
+            const source = attribution?.containerSrc || attribution?.containerName || attribution?.containerType;
+            found.push({ label: 'longtask', duration: entry.duration, source });
+        }
+        return found;
+    }
     worker.onmessage = (event) => {
-        if (event.data?.type === 'ping') {
-            worker.postMessage({ type: 'pong', status: lastStatus, breadcrumbs: pendingBreadcrumbs });
+        const data = event.data;
+        if (data?.type === 'ping') {
+            const breadcrumbs = pendingBreadcrumbs.concat(longTasksSince(lastLongTaskSentAt));
+            lastLongTaskSentAt = performance.now();
+            worker.postMessage({ type: 'pong', status: lastStatus, breadcrumbs });
             pendingBreadcrumbs = [];
         }
+        else if (data?.type === 'freeze-report' && data.message) {
+            console.warn(data.message);
+            try {
+                window.top?.console.warn(data.message);
+            }
+            catch {
+                /* cross-origin embed */
+            }
+        }
     };
     let stopLongTaskObserver = null;
     const watchdog = {

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.66",
+	"version": "0.3.68",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",
 		"@widgetic/api-sdk": "^1.0.10",
 		"@widgetic/cache-layer": "^0.1.2",
 		"@widgetic/canvas": "^0.5.4",
-		"@widgetic/chat": "^0.1.4",
+		"@widgetic/chat": "^0.1.13",
 		"@widgetic/design-system": "^0.5.8",
 		"@widgetic/editor": "^4.0.1",
 		"@widgetic/file-browser": "^0.5.17",
@@ -43,9 +43,8 @@
 		"dev": "npm run stop-dev && npm run dev-sv",
 		"predev-sv": "node scripts/suppress-postcss-from-warning.js",
 		"dev-sv": "VITE_APP_VERSION=$(node -p \"require('./package.json').version\") VITE_BUILD_SHA=$(git rev-parse --short HEAD 2>/dev/null || echo local) NODE_ENV=development vite dev --port 5174",
-		"lps": "volta run npm link --save @widgetic/design-system && volta run npm link --save @widgetic/api-sdk && volta run npm link --save @widgetic/canvas",
+		"lps": "volta run npm link --save @widgetic/design-system && volta run npm link --save @widgetic/api-sdk && volta run npm link --save @widgetic/canvas && volta run npm link --save @widgetic/chat",
 		"llinks": "ls -la node_modules/@widgetic",
-		"ldt": "volta run npm link --save @widgetic/dev-tools",
 		"clean-npm-cache": "npm cache clean --force",
 		"clean-svelte-cache": "rm -rf .svelte-kit && npx svelte-kit sync",
 		"clean-vite-cache": "rm -rf node_modules/.vite",
@@ -72,7 +71,7 @@
 		"@widgetic/api-sdk": "^1.0.10",
 		"@widgetic/cache-layer": "^0.1.2",
 		"@widgetic/canvas": "^0.5.4",
-		"@widgetic/chat": "^0.1.4",
+		"@widgetic/chat": "^0.1.13",
 		"@widgetic/design-system": "^0.5.8",
 		"@widgetic/dev-tools": "^0.2.0",
 		"@widgetic/editor": "^4.0.1",