@widgetic/creator 0.3.66 → 0.3.67

package/dist/CreatorApp.svelte

@@ -529,6 +529,8 @@
 	onMount(async () => {
 		if (canvasModulePromise) {
 			const canvasModule = await canvasModulePromise;
+			// Installed before the canvas mounts so the first save already externalizes
+			installCanvasThumbnailStore(canvasModule);
 			WidgeticCanvas = canvasModule.Canvas;
 		}
 		installLongTaskFreezeReporter();
@@ -590,7 +592,10 @@
 		saveWidgetDraft,
 		readWidgetDraft,
 		deleteWidgetDraft,
-		copyWidgetDraft
+		copyWidgetDraft,
+		saveShapeThumbnail,
+		readShapeThumbnail,
+		canPersistShapeThumbnails
 	} from './utils/creatorDraftStorage';
 
 	/**
@@ -1410,6 +1415,76 @@
 		return dataUrls.slice(0, 1);
 	}
 
+	/**
+	 * Keeps widget screenshots out of the canvas JSON.
+	 *
+	 * Fabric serialized each widget shape's screenshot inline as base64, so an
+	 * autosave stringified megabytes of image data and wrote it three times over —
+	 * the main-thread block the freeze reports kept naming. The canvas now stores a
+	 * reference and asks for the bytes back through this store: the local copy
+	 * first, then the widget's persisted thumbnail so a fresh browser still paints
+	 * the shape.
+	 */
+	function installCanvasThumbnailStore(canvasModule: any): void {
+		if (typeof canvasModule?.setShapeImageStore !== 'function') return;
+		canvasModule.setShapeImageStore({
+			save(ref: string, dataUrl: string) {
+				// Refusing here tells the canvas to keep the bytes inline, so a save
+				// before the owner is known cannot drop a screenshot on the floor.
+				if (!canPersistShapeThumbnails()) throw new Error('No cache owner yet');
+				saveShapeThumbnail(ref, dataUrl);
+			},
+			async load(ref: string): Promise<string | null> {
+				const local = await readShapeThumbnail(ref);
+				if (local) return local;
+				const widgetId = ref.startsWith('widget:') ? ref.slice('widget:'.length) : null;
+				if (!widgetId) return null;
+				return await waitForWidgetThumbnailUrl(widgetId);
+			}
+		});
+	}
+
+	/**
+	 * The canvas often loads before the widget list does, so a reference with no
+	 * local copy has nothing to resolve to yet. Give the list a few seconds to
+	 * arrive rather than leaving the shape blank until the next screenshot.
+	 */
+	async function waitForWidgetThumbnailUrl(widgetId: string): Promise<string | null> {
+		for (let attempt = 0; attempt < 12; attempt++) {
+			const widget = getWidgetById(widgetId) as any;
+			const url = widget?.thumbnailUrl || widget?.thumbnail_url;
+			if (url) return url;
+			// The canvas widget list is slim and often omits the thumbnail, so ask the
+			// API for this one widget rather than leaving the shape blank.
+			if (widget) return await fetchWidgetThumbnailUrl(widgetId);
+			await new Promise((resolve) => setTimeout(resolve, 500));
+		}
+		return null;
+	}
+
+	/** One-widget lookup for the persisted thumbnail, cached per widget. */
+	const thumbnailUrlRequests = new Map<string, Promise<string | null>>();
+
+	function fetchWidgetThumbnailUrl(widgetId: string): Promise<string | null> {
+		const pending = thumbnailUrlRequests.get(widgetId);
+		if (pending) return pending;
+		const request = (async () => {
+			if (!widgetsClient) return null;
+			try {
+				const response = (await widgetsClient.getWidgetsBatch({
+					getWidgetsBatchRequest: { widgetIds: [widgetId] }
+				})) as { widgets?: any[]; data?: { widgets?: any[] } };
+				const fetched = (response?.widgets ?? response?.data?.widgets ?? [])[0];
+				return fetched?.thumbnailUrl ?? fetched?.thumbnail_url ?? null;
+			} catch (error) {
+				console.warn('[CreatorApp] thumbnail lookup failed', widgetId.slice(0, 8), error);
+				return null;
+			}
+		})();
+		thumbnailUrlRequests.set(widgetId, request);
+		return request;
+	}
+
 	async function persistWidgetListThumbnail(widgetId: string, imageDataUrl: string, isCurrent = () => true): Promise<void> {
 		if (!widgetsClient || !widgetId || !imageDataUrl || !isCurrent()) return;
 		try {

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/package.json

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