@widgetic/creator 0.3.67 → 0.3.69

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,11 +130,16 @@
 	}: 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;
@@ -200,6 +205,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 +228,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 +323,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 +462,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 +488,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 +645,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)
@@ -625,6 +691,12 @@
 					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;"
+						></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 +805,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 +865,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 +916,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/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.67",
+	"version": "0.3.69",
 	"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",