@widgetic/creator 0.3.65 → 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/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

@@ -187,14 +187,38 @@
 	 * 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`.
-	 * Debounced by 1200ms to avoid double-refresh flicker when WS and completed SSE both fire.
+	 *
+	 * 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 now = Date.now();
-		if (now - (lastReloadAtByWidgetId[widgetId] || 0) < 1200) {
+		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);
@@ -541,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);

package/dist/utils/freezeWatchdog.d.ts

@@ -13,10 +13,26 @@
  * (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;

package/dist/utils/freezeWatchdog.js

@@ -13,14 +13,31 @@
  * (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.
  */
 const WATCHDOG_SOURCE = `
 let lastPongAt = performance.now();
 let freezeStartedAt = null;
 let reported = false;
 let lastStatus = '';
+let breadcrumbs = [];
 const PING_MS = 500;
 const STALL_MS = 4000;
+
+function describeBreadcrumbs() {
+  if (breadcrumbs.length === 0) return 'no instrumented task over 200ms — the block is somewhere not yet measured';
+  return breadcrumbs
+    .map((b) => b.label + ' ' + Math.round(b.duration) + 'ms' + (b.source ? ' [' + b.source + ']' : ''))
+    .join(', ');
+}
+
 setInterval(() => {
   postMessage({ type: 'ping' });
   const now = performance.now();
@@ -33,18 +50,71 @@ setInterval(() => {
     }
   } else if (freezeStartedAt) {
     console.warn('[FreezeReport] Main thread recovered after ' + Math.round(now - freezeStartedAt) +
-      'ms. Last status: "' + (lastStatus || '—') + '"');
+      'ms. Last status: "' + (lastStatus || '—') + '". Blocking work: ' + describeBreadcrumbs());
     freezeStartedAt = null;
     reported = false;
   }
+  breadcrumbs = [];
 }, PING_MS);
 onmessage = (e) => {
   if (e.data && e.data.type === 'pong') {
     lastPongAt = performance.now();
     if (e.data.status) lastStatus = e.data.status;
+    if (e.data.breadcrumbs && e.data.breadcrumbs.length) {
+      breadcrumbs = breadcrumbs.concat(e.data.breadcrumbs).slice(-12);
+    }
   }
 };
 `;
+/** Long tasks and spans below this are ordinary work, not a freeze. */
+const BREADCRUMB_MIN_MS = 200;
+/**
+ * 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 function measureSync(label, run) {
+    if (typeof performance === 'undefined')
+        return run();
+    const startedAt = performance.now();
+    try {
+        return run();
+    }
+    finally {
+        const duration = performance.now() - startedAt;
+        if (duration >= BREADCRUMB_MIN_MS) {
+            const watchdog = globalThis.__widgeticFreezeWatchdog;
+            watchdog?.addBreadcrumb(label, duration);
+            console.warn(`[MainThreadBlock] ${label} took ${Math.round(duration)}ms`);
+        }
+    }
+}
+/** Long tasks the page did not measure itself, including ones inside an iframe. */
+function observeLongTasks(watchdog) {
+    if (typeof PerformanceObserver === 'undefined')
+        return null;
+    try {
+        const observer = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+                if (entry.duration < BREADCRUMB_MIN_MS)
+                    continue;
+                // `containerSrc` is the one signal that separates the page blocking
+                // itself from a widget preview blocking the main thread it shares.
+                const attribution = entry.attribution?.[0];
+                const source = attribution?.containerSrc
+                    || attribution?.containerName
+                    || attribution?.containerType
+                    || undefined;
+                watchdog.addBreadcrumb('longtask', entry.duration, source);
+            }
+        });
+        observer.observe({ entryTypes: ['longtask'] });
+        return () => observer.disconnect();
+    }
+    catch {
+        return null;
+    }
+}
 export function installFreezeWatchdog() {
     if (typeof window === 'undefined' || typeof Worker === 'undefined' || typeof Blob === 'undefined') {
         return null;
@@ -57,20 +127,35 @@ export function installFreezeWatchdog() {
     const worker = new Worker(url);
     URL.revokeObjectURL(url);
     let lastStatus = '';
+    let pendingBreadcrumbs = [];
     worker.onmessage = (event) => {
         if (event.data?.type === 'ping') {
-            worker.postMessage({ type: 'pong', status: lastStatus });
+            worker.postMessage({ type: 'pong', status: lastStatus, breadcrumbs: pendingBreadcrumbs });
+            pendingBreadcrumbs = [];
         }
     };
+    let stopLongTaskObserver = null;
     const watchdog = {
         setStatus(status) {
             lastStatus = status;
         },
+        addBreadcrumb(label, duration, source) {
+            if (duration < BREADCRUMB_MIN_MS)
+                return;
+            pendingBreadcrumbs.push({ label, duration, source });
+            // Keep only the worst offenders: a freeze is one big task, not fifty.
+            if (pendingBreadcrumbs.length > 12) {
+                pendingBreadcrumbs.sort((a, b) => b.duration - a.duration);
+                pendingBreadcrumbs = pendingBreadcrumbs.slice(0, 12);
+            }
+        },
         dispose() {
+            stopLongTaskObserver?.();
             worker.terminate();
             delete window.__widgeticFreezeWatchdog;
         },
     };
     window.__widgeticFreezeWatchdog = watchdog;
+    stopLongTaskObserver = observeLongTasks(watchdog);
     return watchdog;
 }

package/dist/utils/persistWidgetThumbnail.d.ts

@@ -1,5 +1,16 @@
 import type { WidgetsApi } from '@widgetic/api-sdk';
 /**
- * Upload a convert/preview screenshot to widgets.thumbnail_url via the API gateway.
+ * Upload a convert/preview screenshot to widgets.thumbnail_url via the API
+ * gateway.
+ *
+ * This used to be a hand-rolled fetch: the gateway route
+ * (`POST /widgets/{id}/thumbnail`) postdated the last SDK generation, so the
+ * module read `basePath` and the bearer token back out of the `WidgetsApi`
+ * instance's `Configuration` and hit the endpoint itself, unwrapping the
+ * response against four guessed shapes. The spec now carries the operation
+ * with a typed 200 (`UploadWidgetThumbnail200Response.data.thumbnailUrl`), the
+ * SDK was regenerated, and the fetch is retired — the typed method targets the
+ * same host the client was constructed with, which is what the Configuration
+ * read-back was approximating.
  */
 export declare function persistWidgetThumbnail(widgetsClient: WidgetsApi | null | undefined, widgetId: string | null | undefined, imageDataUrl: string | null | undefined): Promise<string | null>;

package/dist/utils/persistWidgetThumbnail.js

@@ -1,5 +1,16 @@
 /**
- * Upload a convert/preview screenshot to widgets.thumbnail_url via the API gateway.
+ * Upload a convert/preview screenshot to widgets.thumbnail_url via the API
+ * gateway.
+ *
+ * This used to be a hand-rolled fetch: the gateway route
+ * (`POST /widgets/{id}/thumbnail`) postdated the last SDK generation, so the
+ * module read `basePath` and the bearer token back out of the `WidgetsApi`
+ * instance's `Configuration` and hit the endpoint itself, unwrapping the
+ * response against four guessed shapes. The spec now carries the operation
+ * with a typed 200 (`UploadWidgetThumbnail200Response.data.thumbnailUrl`), the
+ * SDK was regenerated, and the fetch is retired — the typed method targets the
+ * same host the client was constructed with, which is what the Configuration
+ * read-back was approximating.
  */
 export async function persistWidgetThumbnail(widgetsClient, widgetId, imageDataUrl) {
     if (!widgetsClient || !widgetId || typeof imageDataUrl !== 'string')
@@ -7,15 +18,11 @@ export async function persistWidgetThumbnail(widgetsClient, widgetId, imageDataU
     if (!imageDataUrl.startsWith('data:image/'))
         return null;
     try {
-        const response = await widgetsClient.uploadWidgetThumbnailRaw({
+        const response = await widgetsClient.uploadWidgetThumbnail({
             id: widgetId,
             uploadWidgetThumbnailRequest: { imageDataUrl },
         });
-        const json = await response.raw.json();
-        const thumbnailUrl = json?.data?.thumbnailUrl ||
-            json?.data?.thumbnail_url ||
-            json?.thumbnailUrl ||
-            null;
+        const thumbnailUrl = response.data?.thumbnailUrl ?? null;
         if (thumbnailUrl) {
             console.log('[persistWidgetThumbnail] stored', widgetId.slice(0, 8), thumbnailUrl.slice(0, 80));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.65",
+	"version": "0.3.66",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",
@@ -45,6 +45,7 @@
 		"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",
 		"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",
@@ -67,12 +68,13 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/postcss": "^4.1.4",
 		"@tailwindcss/typography": "^0.5.15",
-		"@types/eslint": "^9.6.0",
+		"@types/node": "26.4.0",
 		"@widgetic/api-sdk": "^1.0.10",
 		"@widgetic/cache-layer": "^0.1.2",
 		"@widgetic/canvas": "^0.5.4",
 		"@widgetic/chat": "^0.1.4",
 		"@widgetic/design-system": "^0.5.8",
+		"@widgetic/dev-tools": "^0.2.0",
 		"@widgetic/editor": "^4.0.1",
 		"@widgetic/file-browser": "^0.5.17",
 		"autoprefixer": "^10.4.20",