@widgetic/creator 0.3.55 → 0.3.57

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,
@@ -3592,12 +3591,12 @@
 	const buildSha = import.meta.env.VITE_BUILD_SHA || 'local';
 	const buildLabel = `v${appVersion} · ${buildSha}`;
 	
-	// Default coder: host prop (site embed) wins. Fallback Flash for speed.
+	// Default coder: host prop (site embed) wins. Fallback = first catalog model (DeepSeek V4.1 Flash on Baseten).
 	const hostCoderModelId = (defaultCoderModelId || '').trim() || null;
 	const hostPlannerRaw = (defaultPlannerModelId || '').trim();
 	const hostPlannerModelId =
 		!hostPlannerRaw || /^(none|skip)$/i.test(hostPlannerRaw) ? null : hostPlannerRaw;
-	let defaultModelId = hostCoderModelId || 'baseten-glm-5.3-fast';
+	let defaultModelId = hostCoderModelId || 'baseten-deepseek-v4.1-flash';
 	
 	// Available LLM models for code generation
 	interface LLMModelOption {
@@ -3608,18 +3607,18 @@
 		supportsVision?: boolean;
 	}
 	
-	// Default fallback models in case API fails (one from each provider)
+	// Default fallback models in case API fails (order mirrors llm-models.catalog.json)
 	const fallbackModels: LLMModelOption[] = [
+		{ id: 'baseten-deepseek-v4.1-flash', name: 'DeepSeek V4.1 Flash (Baseten)', provider: 'Baseten', description: 'V4.1 Flash via Baseten Model APIs', supportsVision: true },
 		{ id: 'baseten-glm-5.3-fast', name: 'GLM 5.3 Fast (Baseten)', provider: 'Baseten', description: 'Lower-latency GLM 5.3 on Baseten Fast capacity', supportsVision: true },
 		{ id: 'baseten-glm-5.3-flash', name: 'GLM 5.3 Flash (Baseten)', provider: 'Baseten', description: 'Cheaper GLM via Baseten Model APIs', supportsVision: true },
 		{ id: 'zhipu-glm-5.3-flash', name: 'GLM 5.3 Flash (Z.ai)', provider: 'Zhipu', description: 'Cheapest vision + coding model', supportsVision: true },
+		{ id: 'deepseek-v4.1-flash', name: 'DeepSeek V4.1 Flash (DeepSeek API)', provider: 'DeepSeek', description: 'V4.1 Flash via DeepSeek direct API', supportsVision: true },
 		{ id: 'deepseek-v4-pro', name: 'DeepSeek V4 Pro', provider: 'DeepSeek', description: 'Frontier coding model, 1M context', supportsVision: false },
-		{ id: 'deepseek-v4-flash', name: 'DeepSeek V4 Flash', provider: 'DeepSeek', description: 'Fast and cost-efficient', supportsVision: false },
-		{ id: 'openai-gpt-5.4', name: 'GPT-5.4 (OpenAI)', provider: 'OpenAI', description: 'Affordable model for coding', supportsVision: true },
-		{ id: 'openai-gpt-5.5', name: 'GPT-5.5 (OpenAI)', provider: 'OpenAI', description: 'Frontier model for complex work', supportsVision: true },
+		{ id: 'deepseek-v4-flash', name: 'DeepSeek V4 Flash', provider: 'DeepSeek', description: 'Legacy id; routes to V4.1 Flash', supportsVision: true },
 		{ id: 'openai-codex-3.2', name: 'Codex 3.2 (OpenAI)', provider: 'OpenAI', description: 'Coding-specialized model', supportsVision: false },
-		{ id: 'gemini-3-flash', name: 'Gemini 3 Flash (Google)', provider: 'Google', description: 'Google\'s fast Gemini model', supportsVision: true },
-		{ id: 'anthropic-claude-sonnet-4.6', name: 'Claude Sonnet 4.6 (Anthropic)', provider: 'Anthropic', description: 'Best balance of intelligence, speed, and cost', supportsVision: true },
+		{ id: 'openai-gpt-5.5', name: 'GPT-5.5 (OpenAI)', provider: 'OpenAI', description: 'Frontier model for complex work', supportsVision: true },
+		{ id: 'gemini-3.8-flash', name: 'Gemini 3.8 Flash (Google)', provider: 'Google', description: 'Most capable Gemini Flash', supportsVision: true },
 	];
 	
 	// Models loaded from API (single source of truth)
@@ -3645,10 +3644,18 @@
 					supportsVision: m.supportsVision === true,
 				}));
 				
-				// Model LIST + default coder come from GET /models (API / Doppler).
+				// Model LIST from GET /models. Selection: host pin → first listed
+				// (catalog puts DeepSeek V4.1 Flash Baseten first) → API default → fallback.
 				const apiCoderId = (response as any).defaultModelId || (response as any).data?.defaultModelId;
 				const firstListedId = availableModels[0]?.id;
-				defaultModelId = hostCoderModelId || apiCoderId || firstListedId || defaultModelId;
+				const listedIds = new Set(availableModels.map((m) => m.id));
+				const pickListed = (id: string | null | undefined) =>
+					id && listedIds.has(id) ? id : null;
+				defaultModelId =
+					pickListed(hostCoderModelId) ||
+					pickListed(firstListedId) ||
+					pickListed(apiCoderId) ||
+					defaultModelId;
 				userSelectedModelId = defaultModelId;
 				console.log('[WidgetCreator] Default coder model', {
 					defaultModelId,
@@ -3724,6 +3731,11 @@
 	
 	// Get selected model object
 	$: selectedModel = availableModels.find(m => m.id === selectedModelId) || availableModels[0];
+	$: modelDropdownItems = availableModels.map((model) => ({
+		id: model.id,
+		name: model.name,
+		badge: model.provider,
+	}));
 	
 	// Handle model selection (only used in debug mode)
 	function handleModelSelect(modelId: string) {
@@ -3794,8 +3806,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 +5520,7 @@
 			selectedWidgetId === deepLinkWidgetId && !!getWidgetById(deepLinkWidgetId);
 		if (alreadyLinked) {
 			if (embeddedInitialStepPending && initialStep) {
-				widgetDetailsStep = initialStep;
+				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 				embeddedInitialStepPending = false;
 			}
 			embeddedDeepLinkAutoOpenDone = true;
@@ -5550,7 +5571,7 @@
 				canvasRef.selectWidgetShape(target.id);
 			}
 			if (embeddedInitialStepPending && initialStep) {
-				widgetDetailsStep = initialStep;
+				widgetDetailsStep = resolveCreatorWorkflowStep(initialStep);
 				embeddedInitialStepPending = false;
 			}
 
@@ -5988,10 +6009,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 +6860,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 +6913,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 +8102,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 +8756,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 +8972,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 +11918,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 +11940,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 +12919,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 }) => {
@@ -13209,22 +13247,21 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 				<div class="generation-chat-sticky-header shrink-0 z-20 bg-white border-b border-gray-200">
 					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<div class="generation-models-header flex items-center justify-end gap-2 px-2 py-1.5 bg-gray-50">
-						<span class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide shrink-0">Model</span>
 						<div class="coder-model-selector flex items-center justify-end min-w-0">
-							<select
-								class="coder-model-dropdown w-max max-w-full text-[11px] border border-gray-300 rounded px-1.5 py-0.5 bg-white text-gray-700 cursor-pointer focus:outline-none focus:border-blue-400"
-								style="width: {Math.max(18, (availableModels.reduce((longest, model) => model.name.length > longest.length ? model.name : longest, '').length) + 3)}ch"
-								value={userSelectedModelId}
-								onchange={(e) => handleModelSelect(e.currentTarget.value)}
-							>
-								{#if modelsLoading}
-									<option value="" disabled>Loading...</option>
-								{:else}
-									{#each availableModels as model (model.id)}
-										<option value={model.id}>{model.name}</option>
-									{/each}
-								{/if}
-							</select>
+							<SelectorDropdown
+								class="coder-model-dropdown"
+								label="Model"
+								labelPosition="inline"
+								items={modelDropdownItems}
+								selectedId={userSelectedModelId}
+								placeholder={modelsLoading ? 'Loading…' : 'Select model'}
+								nameWidth="240px"
+								accentColor="#314F2F"
+								showNewButton={false}
+								allowRename={false}
+								loading={modelsLoading}
+								onselect={(item) => handleModelSelect(item.id)}
+							/>
 						</div>
 					</div>
 				</div>

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.57",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",