@widgetic/creator 0.3.55 → 0.3.56

package/dist/CreatorApp.svelte

@@ -67,6 +67,7 @@
 		isInfrastructurePreviewError
 	} from './pageHelpers.js';
 	import { uploadChatFileToWidgeticApi } from './utils/widgeticChatUpload.js';
+	import { persistWidgetThumbnail } from './utils/persistWidgetThumbnail.js';
 	import { nativeScrollbarPadding } from './utils/nativeScrollbarPadding.js';
 	import { streamOperationUpdates } from './utils/operationStream.js';
 	import { generateEmbedCode, EMBED_FORMATS, EMBED_FORMAT_LABELS, type EmbedFormat } from './utils/embedCode.js';
@@ -81,6 +82,14 @@
 	import { setEnableLocalCache, isLocalCacheEnabled } from './localCacheGate.js';
 	import type { CreatorAppProps } from './creator-types.js';
 
+	function resolveCreatorWorkflowStep(
+		step?: CreatorAppProps['initialStep'] | 'create' | 'edit' | 'embed' | null
+	): 'create' | 'edit' | 'embed' {
+		if (!canvasAdvancedFeatures) return 'create';
+		if (step === 'edit' || step === 'embed') return step;
+		return 'create';
+	}
+
 	/** Embedded mode props (site integration) */
 	export let embedded: CreatorAppProps['embedded'] = false;
 	export let canvasId: CreatorAppProps['canvasId'] = null;
@@ -928,10 +937,6 @@
 			codegenWidgetId = finalizedWidgetId;
 			const newPanelChat = getChatMethodsForWidget(finalizedWidgetId);
 			newPanelChat?.setDraftText?.('');
-			const hydrateImages = fallbackChatImageAttachments(finalizedWidgetId);
-			if (hydrateImages.length > 0) {
-				newPanelChat?.updateLastUserMessageAttachments?.(hydrateImages);
-			}
 		}
 
 		const panelChat = getChatMethodsForWidget(codegenWidgetId);
@@ -1251,31 +1256,6 @@
 	 * picked, which may differ from convos[0] when several empty conversations
 	 * exist (feedback c: chat looked empty while messages went elsewhere).
 	 */
-	function userMessageImpliesAttachedFile(content: string): boolean {
-		return /imaginea ata[sș]at[ăa]|attached (reference )?(image|document|file|pdf|video)|reference image|din imagine|ata[sș]at[ăa]?\s+(document|pdf|fi[sș]ier|video)|attached document|starting from the attached image/i.test(
-			content || '',
-		);
-	}
-
-	function fallbackChatImageAttachments(widgetId: string): Array<{
-		id: string;
-		url: string;
-		file_type: string;
-		file_name: string;
-	}> {
-		const urls = uniquePersistImageUrls([
-			...(getPanelState(widgetId).promptImages ?? []),
-			...(widgetId === focusedPanelWidgetId ? promptImages : []),
-			(typeof canvasRef?.getWidgetShapeDataUrl === 'function' ? canvasRef.getWidgetShapeDataUrl(widgetId) : '') || '',
-		]);
-		return urls.map((url, i) => ({
-			id: `hydrate_img_${i}`,
-			url,
-			file_type: guessAttachmentFileType(url, 'design-screenshot.png', 'image/png'),
-			file_name: 'design-screenshot.png',
-		}));
-	}
-
 	function guessAttachmentFileType(url: string, fileName?: string | null, fallback?: string | null): string {
 		if (fallback && String(fallback).includes('/')) return String(fallback);
 		const hint = `${url || ''} ${fileName || ''}`;
@@ -1297,7 +1277,26 @@
 			else if (url.startsWith('data:image/')) dataUrls.push(url);
 		}
 		// Same screenshot often exists as CDN URL + compressed data URL — keep HTTPS only.
-		return httpsUrls.length > 0 ? httpsUrls : dataUrls;
+		// If only data URLs remain, keep the first one so convert does not triple the bubble.
+		if (httpsUrls.length > 0) return httpsUrls;
+		return dataUrls.slice(0, 1);
+	}
+
+	async function persistWidgetListThumbnail(widgetId: string, imageDataUrl: string): Promise<void> {
+		if (!widgetsClient || !widgetId || !imageDataUrl) return;
+		try {
+			const compact = imageDataUrl.startsWith('data:image/')
+				? await compressImageDataUrlForCodegen(imageDataUrl, 384, 180000)
+				: imageDataUrl;
+			const thumbnailUrl = await persistWidgetThumbnail(widgetsClient, widgetId, compact);
+			if (thumbnailUrl) {
+				widgets = widgets.map((w) =>
+					w.id === widgetId ? { ...w, thumbnailUrl, thumbnail_url: thumbnailUrl } : w
+				);
+			}
+		} catch (error) {
+			console.warn('[CreatorApp] persist list thumbnail failed', widgetId.slice(0, 8), error);
+		}
 	}
 
 	async function ensureCodegenUserMessagePersisted(
@@ -1400,6 +1399,14 @@
 					.filter((url: string | undefined): url is string => !!url),
 			);
 			const existingHasRemoteImage = [...existingUrls].some((url) => /^https?:\/\//i.test(url));
+			// Chat already persisted CDN attachments for this turn — do not merge data URLs/canvas shots.
+			if (targetUser && existingHasRemoteImage) {
+				if (convId !== visibleConversationId) {
+					await panelChat?.selectConversation?.(convId);
+					patchPanelSnapshot(widgetId, { currentChatConversationId: convId });
+				}
+				return;
+			}
 			const missingPersist = persistAttachments.filter((att) => {
 				if (att.url && existingUrls.has(att.url)) return false;
 				if (existingHasRemoteImage && typeof att.url === 'string' && att.url.startsWith('data:')) return false;
@@ -1627,14 +1634,6 @@
 						created_at: content.created_at || content.createdAt || a.created_at || a.createdAt || new Date().toISOString(),
 					};
 				}).filter((a: { url: string }) => !!a.url);
-				if (
-					attachments.length === 0
-					&& (m.message_type || m.messageType || 'user') === 'user'
-					&& userMessageImpliesAttachedFile(m.message_content || m.messageContent || '')
-					&& widgetIdForSync
-				) {
-					attachments = fallbackChatImageAttachments(widgetIdForSync);
-				}
 				return {
 				id: m.id,
 				conversationId: m.conversation_id || m.conversationId || conversationId,
@@ -3794,8 +3793,17 @@
 
 	function handleHostToggleAdvancedEvent() {
 		canvasAdvancedFeatures = !canvasAdvancedFeatures;
-		// console.log('[CreatorApp] Advanced canvas features:', canvasAdvancedFeatures ? 'ON' : 'OFF');
 		emitCreatorAdvancedChanged();
+		console.log('[CreatorApp] Advanced', canvasAdvancedFeatures ? 'ON' : 'OFF',
+			'— composition steps', canvasAdvancedFeatures ? 'visible' : 'hidden');
+		if (!canvasAdvancedFeatures) {
+			widgetDetailsStep = 'create';
+			for (const panelId of Object.keys(widgetPanelSnapshots || {})) {
+				if (getPanelState(panelId).widgetDetailsStep !== 'create') {
+					patchPanelSnapshot(panelId, { widgetDetailsStep: 'create' });
+				}
+			}
+		}
 	}
 
 	function resolveHostTargetWidgetId(): string | null {
@@ -5499,7 +5507,7 @@
 			selectedWidgetId === deepLinkWidgetId && !!getWidgetById(deepLinkWidgetId);
 		if (alreadyLinked) {
 			if (embeddedInitialStepPending && initialStep) {
-				widgetDetailsStep = initialStep;
+				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 				embeddedInitialStepPending = false;
 			}
 			embeddedDeepLinkAutoOpenDone = true;
@@ -5550,7 +5558,7 @@
 				canvasRef.selectWidgetShape(target.id);
 			}
 			if (embeddedInitialStepPending && initialStep) {
-				widgetDetailsStep = initialStep;
+				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 				embeddedInitialStepPending = false;
 			}
 
@@ -5988,10 +5996,10 @@
 		}
 		if (!isGeneratingCode && !_isRestoringCheckpoint) {
 			if (embeddedInitialStepPending && initialStep) {
-				widgetDetailsStep = initialStep;
+				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 				embeddedInitialStepPending = false;
 			} else if (initialStep) {
-				widgetDetailsStep = initialStep;
+				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 			} else {
 				widgetDetailsStep = 'create';
 			}
@@ -6839,8 +6847,8 @@
 				if (quiet || isConvertOrDraftPanelOpen()) {
 					const shapeDataUrl = canvasRef?.getWidgetShapeDataUrl?.(widgetId);
 					if (shapeDataUrl && canvasRef) {
-						// console.log('[handleRefreshScreenshot] Using canvas shape screenshot (panel closed):', widgetId.substring(0, 8));
 						canvasRef.updateWidgetImage(widgetId, shapeDataUrl);
+						void persistWidgetListThumbnail(widgetId, shapeDataUrl);
 					} else {
 						// console.log('[handleRefreshScreenshot] Skip quiet capture — panel closed:', widgetId.substring(0, 8));
 					}
@@ -6892,6 +6900,7 @@
 						const json = canvasRef?.saveCanvas();
 						if (json) handleCanvasAutoSave(json);
 					}, 500);
+					void persistWidgetListThumbnail(widgetId, result.data);
 					if (!quiet) {
 						showToast('success', 'Widget preview updated on canvas', { duration: 2000 });
 					} else {
@@ -8080,9 +8089,10 @@ Requirements:
 			selectedWidgetId = initialWidgetId;
 			saveSelectedWidgetId(initialWidgetId);
 		}
-		// Site deep-link: Edit widget → create, New Composition → edit (before widget hydrate).
+		// Site deep-link: Edit widget / New Composition used to open Edit/Embed in Creator.
+		// Canvas is Create-only now; /composition owns the editor.
 		if (embedded && initialStep) {
-			widgetDetailsStep = initialStep;
+			widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 		}
 		if (embedded && projectId) {
 			// console.log('[CreatorApp] Embedded project context:', {
@@ -8733,7 +8743,7 @@ Requirements:
 			lastPublishedVersion: publishedVersion,
 			selectedWidgetJsPath: widget?.jsPath ?? null,
 			currentRepositoryId: normalizeRepositoryId(widget),
-			widgetDetailsStep: publishedVersion !== null ? 'edit' : 'create',
+			widgetDetailsStep: resolveCreatorWorkflowStep(publishedVersion !== null ? 'edit' : 'create'),
 			generateCodeStatus: null,
 			lastGenerationFailed: false,
 			lastGenerationError: null,
@@ -8949,12 +8959,18 @@ Requirements:
 		const resolvedVersion = resolvePublishedVersionFromWidget(widget);
 		const resolvedJsPath = ((widget as { jsPath?: string | null; js_path?: string | null })?.jsPath
 			?? (widget as { js_path?: string | null })?.js_path) as string | null;
-		if (resolvedVersion !== null && (snap.lastPublishedVersion === null || snap.widgetDetailsStep === 'create')) {
+		if (resolvedVersion !== null && snap.lastPublishedVersion === null) {
 			patchPanelSnapshot(widgetId, {
 				lastPublishedVersion: resolvedVersion,
 				selectedWidgetJsPath: snap.selectedWidgetJsPath ?? resolvedJsPath,
-				widgetDetailsStep: 'edit',
+				...(canvasAdvancedFeatures ? { widgetDetailsStep: 'edit' as const } : {}),
 			});
+		} else if (
+			canvasAdvancedFeatures
+			&& resolvedVersion !== null
+			&& snap.widgetDetailsStep === 'create'
+		) {
+			patchPanelSnapshot(widgetId, { widgetDetailsStep: 'edit' });
 		}
 	}
 
@@ -11889,6 +11905,10 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				}
 			}
 
+			if (screenshot) {
+				void persistWidgetListThumbnail(widgetId, screenshot);
+			}
+
 			// Auto-create repository so generation can start right away.
 			try {
 				const repoId = await ensureWidgetRepository(newWidget, { silent: true });
@@ -11907,11 +11927,15 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			// panel remounts: the freshly mounted Chat then activates this
 			// conversation (best-conversation = one with messages) instead of
 			// starting empty after a close/reopen.
-			await ensureCodegenUserMessagePersisted(widgetId, prompt, [
-				...(draftPanelState.promptImages ?? []),
-				...extraImageUrls,
-				screenshot,
-			].filter(Boolean));
+			await ensureCodegenUserMessagePersisted(
+				widgetId,
+				prompt,
+				uniquePersistImageUrls([
+					...extraImageUrls,
+					...(draftPanelState.promptImages ?? []),
+					screenshot,
+				]),
+			);
 			// NOTE: never copy currentChatConversationId from the draft — the draft
 			// chat's conversation is a local UUID that doesn't exist in the DB, and
 			// migrating it would point codegen/summaries at a phantom conversation.
@@ -12882,6 +12906,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				panelTopOffset={widgetsPanelTopOffset}
 				panelBottomMargin={embedded ? 24 : widgetsPanelBottomMargin}
 				fillViewport={false}
+				showCompositionSteps={canvasAdvancedFeatures}
 				currentStep={ps.widgetDetailsStep}
 				on:focusPanel={() => focusWidgetPanel(panelWidgetId)}
 				on:stepChange={({ detail }) => {

package/dist/components/WidgetDetails.svelte

@@ -285,6 +285,12 @@
 	// ═══════════════════════════════════════════════════════════════════════
 	type WidgetStep = 'create' | 'edit' | 'embed';
 	export let currentStep: WidgetStep = 'create';
+	/**
+	 * Canvas Creator is code-only (chat + preview). Edit/Embed header steps stay
+	 * off until composition editing lives on /composition. Keep the Edit/Embed
+	 * panels mounted (CSS-hidden) so we can turn this back on without ripping slots.
+	 */
+	export let showCompositionSteps: boolean = false;
 	/** After Set live, Create preview stays on that published artifact until the next Worker build. */
 	let pinnedPublishedPreviewUrl: string | null = null;
 
@@ -308,8 +314,15 @@
 		previewError = null;
 		if (!iframeSrc) previewLoading = true;
 	}
-	$: canEditStep = lastPublishedVersion !== null && !isGeneratingCode;
-	$: canEmbedStep = lastPublishedVersion !== null && !isGeneratingCode;
+	$: canEditStep = showCompositionSteps && lastPublishedVersion !== null && !isGeneratingCode;
+	$: canEmbedStep = showCompositionSteps && lastPublishedVersion !== null && !isGeneratingCode;
+	$: activeWorkflowStep = showCompositionSteps ? currentStep : 'create';
+
+	$: if (!showCompositionSteps && currentStep !== 'create') {
+		currentStep = 'create';
+		dispatch('stepChange', { step: 'create' });
+		switchPreviewUrlForStep('create');
+	}
 
 	// Auto-switch back to Create when code generation starts
 	let _justFinishedGenerating = false;
@@ -358,6 +371,7 @@
 
 	function canNavigateToStep(step: WidgetStep): boolean {
 		if (step === 'create') return true;
+		if (!showCompositionSteps) return false;
 		if (step === 'edit') return canEditStep;
 		if (step === 'embed') return canEmbedStep;
 		return false;
@@ -978,6 +992,7 @@
 	let detailsDragBarEl: HTMLElement | null = null;
 	let widgetDetailsNameCtEl: HTMLElement | null = null;
 	let widgetDetailsStepsRowEl: HTMLElement | null = null;
+	let widgetDetailsDebugButtonsEl: HTMLElement | null = null;
 	let headerNameMaxWidthPx = 96;
 	let detailsDragStartX = 0;
 	let detailsDragStartY = 0;
@@ -2818,10 +2833,14 @@
 	}
 
 	function updateHeaderNameMaxWidth() {
-		if (!widgetDetailsNameCtEl || !widgetDetailsStepsRowEl) return;
+		if (!widgetDetailsNameCtEl) return;
 		const nameRect = widgetDetailsNameCtEl.getBoundingClientRect();
-		const stepsRect = widgetDetailsStepsRowEl.getBoundingClientRect();
-		const available = Math.floor(stepsRect.left - nameRect.left - HEADER_ELEMENTS_GAP_PX);
+		const rightEl = showCompositionSteps && widgetDetailsStepsRowEl
+			? widgetDetailsStepsRowEl
+			: widgetDetailsDebugButtonsEl;
+		if (!rightEl) return;
+		const rightRect = rightEl.getBoundingClientRect();
+		const available = Math.floor(rightRect.left - nameRect.left - HEADER_ELEMENTS_GAP_PX);
 		const next = Math.max(HEADER_NAME_MIN_WIDTH_PX, available);
 		if (next !== headerNameMaxWidthPx) {
 			headerNameMaxWidthPx = next;
@@ -3359,6 +3378,7 @@
 					}}
 				/>
 			</div>
+			{#if showCompositionSteps}
 			<div
 				class="widget-details-step-indicator-row pointer-events-none absolute left-1/2 top-1/2 z-0 flex -translate-x-1/2 -translate-y-1/2 justify-center"
 				bind:this={widgetDetailsStepsRowEl}
@@ -3421,8 +3441,12 @@
 				</HoverTooltip>
 				</div>
 			</div>
+			{/if}
 
-			<div class="widget-details-debug-buttons relative z-[1] ml-auto flex items-center shrink-0">
+			<div
+				class="widget-details-debug-buttons relative z-[1] ml-auto flex items-center shrink-0"
+				bind:this={widgetDetailsDebugButtonsEl}
+			>
 				<HoverTooltip text={previewColumnCollapsed ? 'Open live preview' : 'Close live preview'}>
 				<button
 					type="button"
@@ -3505,7 +3529,7 @@
 	<div class="actions-panel widget-details-actions-panel relative flex flex-col flex-1 min-h-0">
 
 		<!-- Keep all steps mounted — switching tabs must not destroy chat / PropsEditor state -->
-		<div class="widget-details-create-step flex flex-col flex-1 min-h-0 overflow-hidden overflow-x-hidden {currentStep === 'create' ? '' : 'hidden'}">
+		<div class="widget-details-create-step flex flex-col flex-1 min-h-0 overflow-hidden overflow-x-hidden {activeWorkflowStep === 'create' ? '' : 'hidden'}">
 			<div class="widget-details-create-models-ct shrink-0 empty:hidden">
 				<slot name="code-generation-models" />
 			</div>
@@ -3523,10 +3547,10 @@
 				<slot name="publish-widget" />
 			</div>
 		</div>
-		<div class="widget-details-edit-step flex flex-col flex-1 min-h-0 overflow-hidden {currentStep === 'edit' ? '' : 'hidden'}">
+		<div class="widget-details-edit-step flex flex-col flex-1 min-h-0 overflow-hidden {activeWorkflowStep === 'edit' ? '' : 'hidden'}">
 			<slot name="composition-editor" />
 		</div>
-		<div class="widget-details-embed-step flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin gap-2 p-2 {currentStep === 'embed' ? '' : 'hidden'}">
+		<div class="widget-details-embed-step flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin gap-2 p-2 {activeWorkflowStep === 'embed' ? '' : 'hidden'}">
 			<slot name="embed-section" />
 		</div>
 

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

@@ -99,6 +99,11 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     /** Cascade offset index (0 = centered, 1+ = shifted down-right). */ panelCascadeIndex?: number;
     /** False when another panel has keyboard/chat focus. */ isFocusedPanel?: boolean;
     currentStep?: "embed" | "create" | "edit";
+    /**
+         * Canvas Creator is code-only (chat + preview). Edit/Embed header steps stay
+         * off until composition editing lives on /composition. Keep the Edit/Embed
+         * panels mounted (CSS-hidden) so we can turn this back on without ripping slots.
+         */ showCompositionSteps?: boolean;
     beginCompositionHydration?: () => void;
     showPublishedArtifact?: (url: string | null) => void;
     finishCompositionHydration?: () => void;

package/dist/creator-types.d.ts

@@ -6,7 +6,7 @@ export interface CreatorAppProps {
     initialWidgetId?: string | null;
     /** Select this composition when opening Edit step from site. */
     initialCompositionId?: string | null;
-    /** Open Widget Details on this step when embedded from site (overrides auto step once). */
+    /** Open Widget Details on this step when embedded from site (overrides auto step once). Ignored while Creator composition steps are hidden. */
     initialStep?: 'create' | 'edit' | 'embed';
     /**
      * Site "+ New widget": create an empty canvas + Untitled widget instead of
@@ -35,6 +35,7 @@ export interface CreatorAppProps {
     /**
      * Extra canvas tools (undo/frame/image/library, zoom 1:1/fit/shortcuts).
      * Independent of debugMode — Debug is staging-only UI.
+     * Also shows Widget Details Edit/Embed steps while ON (dev testing).
      * Site owns the header toggle; embed uses CustomEvent after mount.
      */
     initialAdvancedFeatures?: boolean;

package/dist/utils/persistWidgetThumbnail.d.ts

@@ -0,0 +1,5 @@
+import type { WidgetsApi } from '@widgetic/api-sdk';
+/**
+ * Upload a convert/preview screenshot to widgets.thumbnail_url via the API gateway.
+ */
+export declare function persistWidgetThumbnail(widgetsClient: WidgetsApi | null | undefined, widgetId: string | null | undefined, imageDataUrl: string | null | undefined): Promise<string | null>;

package/dist/utils/persistWidgetThumbnail.js

@@ -0,0 +1,28 @@
+/**
+ * Upload a convert/preview screenshot to widgets.thumbnail_url via the API gateway.
+ */
+export async function persistWidgetThumbnail(widgetsClient, widgetId, imageDataUrl) {
+    if (!widgetsClient || !widgetId || typeof imageDataUrl !== 'string')
+        return null;
+    if (!imageDataUrl.startsWith('data:image/'))
+        return null;
+    try {
+        const response = await widgetsClient.uploadWidgetThumbnailRaw({
+            id: widgetId,
+            uploadWidgetThumbnailRequest: { imageDataUrl },
+        });
+        const json = await response.raw.json();
+        const thumbnailUrl = json?.data?.thumbnailUrl ||
+            json?.data?.thumbnail_url ||
+            json?.thumbnailUrl ||
+            null;
+        if (thumbnailUrl) {
+            console.log('[persistWidgetThumbnail] stored', widgetId.slice(0, 8), thumbnailUrl.slice(0, 80));
+        }
+        return thumbnailUrl;
+    }
+    catch (error) {
+        console.warn('[persistWidgetThumbnail] failed', widgetId?.slice(0, 8), error);
+        return null;
+    }
+}

package/package.json

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