@widgetic/creator 0.3.51 → 0.3.54

package/dist/CreatorApp.svelte

@@ -111,6 +111,21 @@
 
 	function notifyHostWidgetName(widget: { id?: string | null; name?: string | null } | null | undefined): void {
 		if (!embedded || !widget?.id) return;
+		const primaryId = (canvasPrimaryWidgetId || '').trim();
+		if (!primaryId) {
+			console.log('[CreatorApp] Skip host title — primary widget unknown');
+			emitCanvasWidgetsList('skip-host-title');
+			return;
+		}
+		if (widget.id !== primaryId) {
+			console.log(
+				'[CreatorApp] Skip host title — not primary',
+				widget.id.substring(0, 8),
+				primaryId.substring(0, 8)
+			);
+			emitCanvasWidgetsList('skip-host-title');
+			return;
+		}
 		const name = (widget.name || '').trim() || 'Untitled Widget';
 		console.log('[CreatorApp] Notify host widget name:', widget.id, name);
 		onWidgetRenamed?.({ widgetId: widget.id, name });
@@ -142,9 +157,14 @@
 	const HOST_OPEN_WIDGET_DETAILS_EVENT = 'widgetic:host-open-widget-details';
 	const HOST_DUPLICATE_WIDGET_EVENT = 'widgetic:host-duplicate-widget';
 	const HOST_DELETE_WIDGET_EVENT = 'widgetic:host-delete-widget';
+	const HOST_SAVE_CANVAS_EVENT = 'widgetic:host-save-canvas';
+	const HOST_SET_PRIMARY_WIDGET_EVENT = 'widgetic:host-set-primary-widget';
+	const HOST_REQUEST_CANVAS_WIDGETS_EVENT = 'widgetic:host-request-canvas-widgets';
+	const HOST_MOVE_CANVAS_FOLDER_EVENT = 'widgetic:host-move-canvas-folder';
 	const CREATOR_DEBUG_CHANGED_EVENT = 'widgetic:creator-debug-changed';
 	const CREATOR_WIREFRAME_CHANGED_EVENT = 'widgetic:creator-wireframe-changed';
 	const CREATOR_ADVANCED_CHANGED_EVENT = 'widgetic:creator-advanced-changed';
+	const CREATOR_CANVAS_WIDGETS_EVENT = 'widgetic:creator-canvas-widgets';
 
 	/** Site AppHeader rename — embed is a second Svelte runtime, so mount props do not update. */
 	async function applyHostWidgetName(widgetId: string | null | undefined, newName: string): Promise<void> {
@@ -246,7 +266,7 @@
 	/**
 	 * WIDGETIC EDITOR — PropsEditor for design/content property editing
 	 */
-	import { PropsEditor, setFileBrowserUploadConfig } from '@widgetic/editor';
+	import { PropsEditor, setFileBrowserUploadConfig, setGoogleFontsApiKey } from '@widgetic/editor';
 
 	// API root: embedded hosts pass apiUrl; standalone uses VITE_API_URL / PUBLIC_API_URL.
 	// If unset, @widgetic/api-sdk falls back to BASE_PATH = dev-api.widgetic.com (OpenAPI default).
@@ -549,6 +569,7 @@
 	let linkedWidgetIds: Set<string> = new Set();
 	function refreshLinkedWidgetIds() {
 		linkedWidgetIds = canvasRef?.getLinkedWidgetIds?.() ?? new Set();
+		emitCanvasWidgetsList('linked-ids');
 	}
 
 	// Delete Widget Shape confirmation dialog state
@@ -606,6 +627,7 @@
 		if (!widgetsClient || !hasValidToken) return;
 		try {
 			console.log('[WidgetCreator] Deleting widget from DB:', widgetId);
+			closeWidgetDetailsPanel(widgetId);
 			await widgetsClient.deleteWidget({ id: widgetId });
 			widgets = widgets.filter((w: any) => w.id !== widgetId);
 			if (selectedWidgetId === widgetId) {
@@ -734,6 +756,9 @@
 		updateLastUserMessageAttachments?: (attachments: Array<{ id?: string; url: string; file_type?: string; file_name?: string | null }>) => void;
 	} | null = null;
 	let chatMethodsByWidgetId: Record<string, NonNullable<typeof chatMethods>> = {};
+	/** Conversation `completed` flag per widget — ActionBar Complete / Completed. */
+	let conversationCompletedByWidgetId: Record<string, boolean> = {};
+	let conversationsByWidgetId: Record<string, any[]> = {};
 	let pendingChatDraftText = '';
 	let chatDraftRestoredForWidgetId: string | null = null;
 	/**
@@ -951,15 +976,8 @@
 				file_size: attachment.fileSize,
 				display_order: i + 1,
 			}));
-		if (persistFileAttachments.length > 0) {
-			await ensureCodegenUserMessagePersisted(
-				codegenWidgetId,
-				content,
-				undefined,
-				persistFileAttachments,
-			);
-		}
-		// Pass upload IDs / images explicitly — clearDraft already wiped Chat's local attachments.
+		// Chat.onSaveMessage already persisted this turn. generateCode keeps one
+		// ensureCodegenUserMessagePersisted after imagesToSend is finalized.
 		await generateCode({
 			prompt: content,
 			fromChat: true,
@@ -1046,6 +1064,86 @@
 			currentChatConversationId = conversationId;
 		}
 		console.log('[Chat] Active conversation changed for', widgetId.substring(0, 8), ':', conversationId || 'none');
+		const conv = (conversationsByWidgetId[widgetId] || []).find((c) => c.id === conversationId);
+		if (conv) {
+			const completed = !!(conv.completed ?? conv.is_completed ?? conv.isCompleted);
+			conversationCompletedByWidgetId = { ...conversationCompletedByWidgetId, [widgetId]: completed };
+		}
+	}
+
+	function isConversationRecordCompleted(conversation: any): boolean {
+		return !!(conversation?.completed ?? conversation?.is_completed ?? conversation?.isCompleted);
+	}
+
+	function isUuid(value: string | null | undefined): value is string {
+		return !!value && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value);
+	}
+
+	function resolvePersistableConversationId(widgetId: string, preferredId?: string | null): string | null {
+		const knownIds = (conversationsByWidgetId[widgetId] || [])
+			.map((c) => c.id)
+			.filter((id) => isUuid(id));
+		const fromChat = getChatMethodsForWidget(widgetId)?.getConversationId?.();
+		const fromFocus = widgetId === focusedPanelWidgetId ? currentChatConversationId : null;
+		const preferredKnown = [preferredId, fromChat, fromFocus].find((id) => id && knownIds.includes(id));
+		if (preferredKnown) return preferredKnown;
+		if (knownIds[0]) return knownIds[0];
+		if (isUuid(preferredId)) return preferredId;
+		if (isUuid(fromChat)) return fromChat;
+		return isUuid(fromFocus) ? fromFocus : null;
+	}
+
+	async function handleChatCompletionToggle(
+		widgetId: string,
+		detail?: { conversationId?: string | null; completed?: boolean },
+	) {
+		const next = typeof detail?.completed === 'boolean'
+			? detail.completed
+			: !conversationCompletedByWidgetId[widgetId];
+		conversationCompletedByWidgetId = { ...conversationCompletedByWidgetId, [widgetId]: next };
+		let conversationId = resolvePersistableConversationId(widgetId, detail?.conversationId);
+		console.log('[Chat] Complete toggle', widgetId.substring(0, 8), next ? 'completed' : 'active', conversationId);
+		if (!conversationsClient) {
+			console.warn('[Chat] Complete toggle skipped persist — missing conversations client');
+			return;
+		}
+		try {
+			if (!conversationId) {
+				const created = await handleCreateConversation(widgetId, 'Widget conversation');
+				conversationId = created?.id || null;
+				console.log('[Chat] Complete created conversation for persist', conversationId);
+			}
+			if (!conversationId || !isUuid(conversationId)) {
+				throw new Error('No persistable conversation id');
+			}
+			try {
+				await conversationsClient.updateConversation({
+					conversationId,
+					updateConversationRequest: { completed: next },
+				});
+			} catch (updateError) {
+				const listed = await handleLoadConversations(widgetId);
+				const fallbackId = (listed || []).map((c) => c.id).find((id) => isUuid(id) && id !== conversationId);
+				if (!fallbackId) throw updateError;
+				console.warn('[Chat] Complete retry with loaded conversation', fallbackId);
+				conversationId = fallbackId;
+				await conversationsClient.updateConversation({
+					conversationId,
+					updateConversationRequest: { completed: next },
+				});
+			}
+			conversationsByWidgetId = {
+				...conversationsByWidgetId,
+				[widgetId]: (conversationsByWidgetId[widgetId] || []).map((c) =>
+					c.id === conversationId ? { ...c, completed: next } : c,
+				),
+			};
+			console.log('[Chat] Conversation marked', next ? 'completed' : 'active', conversationId);
+		} catch (error) {
+			console.error('[Chat] Failed to persist conversation completed:', error);
+			showToast('error', 'Could not update conversation status');
+			conversationCompletedByWidgetId = { ...conversationCompletedByWidgetId, [widgetId]: !next };
+		}
 	}
 
 	/** Sync unsent chat draft + attachments to the durable per-widget draft (or clear when empty). */
@@ -1196,12 +1294,19 @@
 			if (compressedPersistImages.length === 0 && persistFileItems.length === 0) {
 				console.warn('[Codegen] Persist user message has no attachment URLs for widget', widgetId?.substring(0, 8));
 			}
-			const imagePersistItems = compressedPersistImages.map((url, i) => ({
-				url,
-				file_type: guessAttachmentFileType(url, 'design-screenshot.png', 'image/png'),
-				file_name: 'design-screenshot.png',
-				display_order: i + 1,
-			}));
+			const fileHasImage = persistFileItems.some((att) => {
+				const type = String(att.file_type || '');
+				const url = String(att.url || '');
+				return type.startsWith('image/') || url.startsWith('data:image/') || /\.(png|jpe?g|gif|webp|svg)(\?|$)/i.test(url);
+			});
+			const imagePersistItems = fileHasImage
+				? []
+				: compressedPersistImages.map((url, i) => ({
+					url,
+					file_type: guessAttachmentFileType(url, 'design-screenshot.png', 'image/png'),
+					file_name: 'design-screenshot.png',
+					display_order: i + 1,
+				}));
 			const persistAttachments = [...persistFileItems, ...imagePersistItems].map((att, i) => ({
 				...att,
 				display_order: i + 1,
@@ -1227,8 +1332,11 @@
 					.map((a: { url?: string }) => a.url)
 					.filter((url: string | undefined): url is string => !!url),
 			);
+			const existingHasRemoteImage = [...existingUrls].some((url) => /^https?:\/\//i.test(url));
 			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;
+				if (existingHasRemoteImage && String(att.file_type || '').startsWith('image/')) return false;
 				return true;
 			});
 			let savedAttachmentCount = targetUser?.attachments?.length || 0;
@@ -1366,6 +1474,13 @@
 			});
 			const json = await response.raw.json();
 			const conversations = normalizeConversationRecords(json);
+			conversationsByWidgetId = { ...conversationsByWidgetId, [contextId]: conversations };
+			if (conversations[0]) {
+				conversationCompletedByWidgetId = {
+					...conversationCompletedByWidgetId,
+					[contextId]: isConversationRecordCompleted(conversations[0]),
+				};
+			}
 			console.log('[Chat→Backend] Loaded conversations for widget:', contextId, conversations.length);
 			return conversations;
 		} catch (error) {
@@ -1481,6 +1596,15 @@
 			const conversation = json?.data || json;
 			const conversationId = conversation?.id || conversation?.conversation_id || conversation?.conversationId;
 			console.log('[Chat→Backend] Created conversation:', conversationId);
+			if (conversationId && contextId) {
+				conversationsByWidgetId = {
+					...conversationsByWidgetId,
+					[contextId]: [
+						{ ...conversation, id: conversationId },
+						...(conversationsByWidgetId[contextId] || []).filter((c) => c.id !== conversationId),
+					],
+				};
+			}
 			return conversationId ? { ...conversation, id: conversationId } : conversation;
 		} catch (error) {
 			console.error('[Chat→Backend] Failed to create conversation:', error);
@@ -1763,6 +1887,11 @@
 	let publishingWidgetId: string | null = null;
 	let publishWidgetStatus: string | null = null;
 
+	$: if (isPublishing && !publishingWidgetId) {
+		console.warn('[Publish] Clearing stuck isPublishing without publishingWidgetId');
+		isPublishing = false;
+	}
+
 	// Cross-tab operation guards — detect when another tab is generating/publishing on the same widget
 	let isGeneratingInOtherTab = false;
 	let isPublishingInOtherTab = false;
@@ -1979,6 +2108,50 @@
 		return null;
 	}
 
+	/** If the widget only has titleFont, expose subtitleFont in Edit (same FontIC). */
+	function ensureSubtitleFontInDesignSchema(schema: unknown): unknown {
+		if (!schema) return schema;
+		try {
+			const clone = JSON.parse(JSON.stringify(schema));
+			const groups = Array.isArray(clone) ? clone : clone.componentGroups;
+			if (!Array.isArray(groups) || groups.length === 0) return schema;
+			const allProps = groups.flatMap((group: { components?: Array<{ properties?: unknown[] }> }) =>
+				(group.components || []).flatMap((component) => component.properties || [])
+			);
+			const hasSubtitle = allProps.some((prop: { name?: string; id?: string }) =>
+				/subtitleFont/i.test(String(prop?.name || prop?.id || ''))
+			);
+			if (hasSubtitle) return clone;
+			const titleProp = allProps.find((prop: { name?: string; id?: string; inputController?: { type?: string } }) => {
+				const key = String(prop?.name || prop?.id || '');
+				const type = String(prop?.inputController?.type || '').toLowerCase();
+				return type === 'font' && /titleFont|^font$/i.test(key);
+			});
+			if (!titleProp || typeof titleProp !== 'object') return clone;
+			const firstComponent = groups[0]?.components?.[0];
+			if (!firstComponent) return clone;
+			firstComponent.properties = Array.isArray(firstComponent.properties) ? firstComponent.properties : [];
+			const subtitleProp = {
+				...JSON.parse(JSON.stringify(titleProp)),
+				id: 'subtitleFont',
+				name: 'subtitleFont',
+				description: 'Subtitle Font',
+			};
+			const titleIndex = firstComponent.properties.findIndex(
+				(prop: { name?: string; id?: string }) =>
+					(prop?.name || prop?.id) === ((titleProp as { name?: string; id?: string }).name
+						|| (titleProp as { name?: string; id?: string }).id)
+			);
+			if (titleIndex >= 0) firstComponent.properties.splice(titleIndex + 1, 0, subtitleProp);
+			else firstComponent.properties.push(subtitleProp);
+			console.log('[CompositionEditor] Added subtitleFont FontIC next to titleFont');
+			return Array.isArray(schema) ? clone : clone;
+		} catch (error) {
+			console.warn('[CompositionEditor] subtitleFont schema inject skipped:', error);
+			return schema;
+		}
+	}
+
 	function normalizeContentSchemaFromApiResponse(contentRes: unknown): any {
 		if (!contentRes) return null;
 		const payload = (contentRes as { data?: unknown })?.data ?? contentRes;
@@ -2108,14 +2281,20 @@
 	}
 
 	/** Load design & content schemas for a widget — per-panel; never wipes other panels. */
-	async function loadWidgetSchemas(widgetId: string): Promise<void> {
+	async function loadWidgetSchemas(widgetId: string, options?: { force?: boolean }): Promise<void> {
 		if (!widgetsClient || !hasValidToken) {
 			patchPanelSnapshot(widgetId, { compositionSchemasLoading: false, schemaLoadStartedAt: null });
 			return;
 		}
 
+		if (options?.force) {
+			widgetSchemaCache.delete(widgetId);
+			cancelPanelSchemaLoad(widgetId);
+			abandonSchemaLoadAttempt(widgetId);
+		}
+
 		const existingLoad = schemaLoadPromises.get(widgetId);
-		if (existingLoad) {
+		if (existingLoad && !options?.force) {
 			const snap = getPanelState(widgetId);
 			if (!isStalePanelSchemaLoading(widgetId, snap)) return existingLoad;
 			cancelPanelSchemaLoad(widgetId);
@@ -2131,7 +2310,7 @@
 			|| existing.compositionContentSchema
 		);
 
-		if (hasCachedSchemas) {
+		if (hasCachedSchemas && !options?.force) {
 			const designSchema = cached?.design ?? existing.compositionDesignSchema;
 			const contentSchema = cached?.content ?? existing.compositionContentSchema;
 			const schemaError = cached?.error ?? existing.compositionSchemasError;
@@ -2226,7 +2405,9 @@
 					'Content schema',
 				);
 
-				designSchema = normalizeDesignSchemaFromApiResponse(designRes);
+				designSchema = ensureSubtitleFontInDesignSchema(
+					normalizeDesignSchemaFromApiResponse(designRes)
+				);
 				contentSchema = normalizeContentSchemaFromApiResponse(contentRes);
 
 				if (!designSchema && !contentSchema) {
@@ -2330,7 +2511,7 @@
 			} else {
 				patchPanelSnapshot(widgetId, { liveDesignValues: defaults });
 			}
-			getWidgetDetailsRef(widgetId)?.sendMessageToPreview({ type: 'widgetic:update', design: defaults });
+			getWidgetDetailsRef(widgetId)?.sendMessageToPreview({ type: 'widgetic:update', design: flattenDesignValuesForPreview(defaults) });
 			console.log('[Create Preview] Applied design schema defaults:', Object.keys(defaults));
 		}
 		const contentSchema = getPanelDisplayState(widgetId).compositionContentSchema;
@@ -2468,15 +2649,22 @@
 		const versionedUrl = `${cdnBase}/widgets/${widgetId}/v${version}/widget.html`;
 
 		if (jsPath) {
+			const trimmed = jsPath.replace(/\/+$/, '');
+			let resolved = trimmed
+				.replace(/\/widget\.js$/i, '/widget.html')
+				.replace(/\.js$/i, '.html');
+			if (!/\.html$/i.test(resolved)) {
+				resolved = `${resolved}/widget.html`;
+			}
+			if (resolved.startsWith('/')) {
+				resolved = `${cdnBase}${resolved}`;
+			}
 			const jsPathVersionMatch = jsPath.match(/\/v(\d+)(?:\/|$)/);
 			const jsPathVersion = jsPathVersionMatch ? parseInt(jsPathVersionMatch[1], 10) : null;
-			if (jsPathVersion === version) {
-				const trimmed = jsPath.replace(/\/+$/, '');
-				let resolved = /\.html$/i.test(trimmed) ? trimmed : `${trimmed}/widget.html`;
-				// Bare pathname (e.g. from older saves) must be resolved against CDN, not localhost
-				if (resolved.startsWith('/')) {
-					resolved = `${cdnBase}${resolved}`;
-				}
+			const jsPathWidgetId = (resolved.match(/\/widgets\/([^/]+)\//i) || [])[1] || null;
+			const pointsAtOtherWidget = !!(jsPathWidgetId && jsPathWidgetId !== widgetId);
+			if (pointsAtOtherWidget || jsPathVersion === version || /\/widgets\//i.test(resolved)) {
+				console.log('[Publish] Using js_path artifact URL', resolved, pointsAtOtherWidget ? '(source widget)' : '');
 				return resolved;
 			}
 		}
@@ -2507,6 +2695,68 @@
 	let suppressNextBuildFromRepoChatMessage = false;
 	let _isRestoringCheckpoint = false;
 
+	function mapFontWeightToCss(weight: string | undefined): string {
+		const name = String(weight || 'Regular').toLowerCase().replace(/[\s_-]/g, '');
+		const table: Record<string, string> = {
+			thin: '100', hairline: '100',
+			extralight: '200', ultralight: '200',
+			light: '300',
+			regular: '400', normal: '400',
+			medium: '500',
+			semibold: '600', demibold: '600',
+			bold: '700',
+			extrabold: '800', ultrabold: '800',
+			black: '900', heavy: '900',
+		};
+		if (/^\d{3}$/.test(name)) return name;
+		return table[name] || '400';
+	}
+
+	function mapAspectRatioToCss(raw: string): string {
+		const key = raw.trim().toLowerCase();
+		const table: Record<string, string> = {
+			square: '1/1',
+			'1:1': '1/1',
+			'1/1': '1/1',
+			landscape: '4/3',
+			'4:3': '4/3',
+			'4/3': '4/3',
+			wide: '16/9',
+			'16:9': '16/9',
+			'16/9': '16/9',
+			portrait: '3/4',
+			'3:4': '3/4',
+			'3/4': '3/4',
+		};
+		return table[key] || raw;
+	}
+
+	/** CSS custom properties for widgetic:update — FontIC objects and dropdown {value} become strings. */
+	function flattenDesignValuesForPreview(design: Record<string, unknown>): Record<string, string> {
+		const out: Record<string, string> = {};
+		for (const [key, value] of Object.entries(design || {})) {
+			if (value && typeof value === 'object' && 'family' in (value as Record<string, unknown>)) {
+				const font = value as { family?: string; weight?: string };
+				const family = String(font.family || 'Inter');
+				out[key] = `"${family}", sans-serif`;
+				out[`${key}Family`] = family;
+				out[`${key}Weight`] = mapFontWeightToCss(font.weight);
+				continue;
+			}
+			if (value && typeof value === 'object' && 'value' in (value as Record<string, unknown>)) {
+				out[key] = mapAspectRatioToCss(String((value as { value?: unknown }).value ?? ''));
+				continue;
+			}
+			if (typeof value === 'string') {
+				out[key] = /aspect/i.test(key) ? mapAspectRatioToCss(value) : value;
+				continue;
+			}
+			if (value == null) continue;
+			out[key] = String(value);
+		}
+		return out;
+	}
+
 	/** Handle property change from PropsEditor — send to widget preview iframe */
 	function handleEditorPropertyChange(event: CustomEvent<{ schema: string; propertyId: string; value: unknown; opacity?: number; itemId?: string }>) {
 		const { schema, propertyId, value, itemId } = event.detail;
@@ -2516,7 +2766,7 @@
 			liveDesignValues = { ...liveDesignValues, [propertyId]: value };
 			getWidgetDetailsRef(focusedPanelWidgetId)?.sendMessageToPreview({
 				type: 'widgetic:update',
-				design: liveDesignValues
+				design: flattenDesignValuesForPreview(liveDesignValues)
 			});
 		} else if (schema === 'content') {
 			if (itemId) {
@@ -2699,11 +2949,16 @@
 
 	/** Push composition overlay to a specific panel preview iframe. */
 	function applyPanelCompositionToPreview(widgetId: string): void {
-		const ps = getPanelDisplayState(widgetId);
 		const panelRef = getWidgetDetailsRef(widgetId);
 		if (!panelRef) return;
+		const step = widgetId === focusedPanelWidgetId ? widgetDetailsStep : 'create';
+		if (step === 'create') {
+			console.log('[Preview] Skip composition overlay on Create step', widgetId?.substring(0, 8));
+			return;
+		}
+		const ps = getPanelDisplayState(widgetId);
 		if (Object.keys(ps.liveDesignValues).length > 0) {
-			panelRef.sendMessageToPreview({ type: 'widgetic:update', design: ps.liveDesignValues });
+			panelRef.sendMessageToPreview({ type: 'widgetic:update', design: flattenDesignValuesForPreview(ps.liveDesignValues as Record<string, unknown>) });
 		}
 		if (Object.keys(ps.liveContentValues).length > 0) {
 			panelRef.sendMessageToPreview({ type: 'widgetic:update', content: ps.liveContentValues });
@@ -2965,6 +3220,10 @@
 	/** Send current composition design/content values to the preview iframe via postMessage.
 	 *  Called on: composition select, iframe ready, and step switch to Edit/Embed. */
 	function applyCompositionToPreview() {
+		if (widgetDetailsStep === 'create') {
+			console.log('[Preview] Skip composition overlay on Create step');
+			return;
+		}
 		if (Object.keys(liveDesignValues).length > 0) {
 			widgetDetails?.sendMessageToPreview({ type: 'widgetic:update', design: liveDesignValues });
 		}
@@ -3438,19 +3697,21 @@
 	}
 
 	async function handleHostDuplicateWidgetEvent(): Promise<void> {
-		const widgetId = resolveHostTargetWidgetId();
-		if (!widgetId || !canvasRef) {
+		const widgetId = canvasPrimaryWidgetId || resolveHostTargetWidgetId();
+		if (!widgetId || isDraftConvertId(widgetId)) {
 			showToast('warning', 'Select a widget first', {
-				description: 'Click the widget on the canvas, then Duplicate.',
+				description: 'Duplicate from the header copies the widget in the title.',
 			});
 			return;
 		}
-		canvasRef.selectWidgetShape?.(widgetId);
-		if (typeof canvasRef.duplicateSelectedObjects === 'function') {
-			await canvasRef.duplicateSelectedObjects();
-			return;
+		console.log('[CreatorApp] Host Duplicate — primary widget', widgetId.substring(0, 8));
+		if (canvasRef?.selectWidgetShape && typeof canvasRef.duplicateSelectedObjects === 'function') {
+			if (canvasRef.selectWidgetShape(widgetId)) {
+				await canvasRef.duplicateSelectedObjects();
+				return;
+			}
 		}
-		showToast('error', 'Cannot duplicate widget', { description: 'Canvas duplicate is not available' });
+		await handleWidgetShapeDuplicated(widgetId, null);
 	}
 
 	async function handleHostDeleteWidgetEvent(): Promise<void> {
@@ -3470,6 +3731,15 @@
 		}
 	}
 
+	function emitCreatorSaveState(dirty: boolean): void {
+		if (typeof window === 'undefined' || !embedded) return;
+		window.dispatchEvent(new CustomEvent('widgetic:creator-save-state', { detail: { dirty } }));
+	}
+
+	function handleHostSaveCanvasEvent(): void {
+		canvasRef?.saveNow?.();
+	}
+
 	async function persistPrimaryWidgetId(widgetId: string) {
 		if (!widgetId) return;
 		canvasPrimaryWidgetId = widgetId;
@@ -3485,7 +3755,6 @@
 			}
 		}
 		const widget = getWidgetById(widgetId);
-		if (widget) notifyHostWidgetName(widget);
 		if (embedded && typeof window !== 'undefined') {
 			try {
 				const url = new URL(window.location.href);
@@ -3497,12 +3766,110 @@
 				console.warn('[CreatorApp] Failed to sync primary widget_id in URL:', err);
 			}
 		}
+		if (widget) notifyHostWidgetName(widget);
+		emitCanvasWidgetsList('primary-changed');
+	}
+
+	function emitCanvasWidgetsList(reason: string) {
+		if (!embedded || typeof window === 'undefined') return;
+		const ids = canvasRef?.getLinkedWidgetIds?.() ?? linkedWidgetIds ?? new Set<string>();
+		const items: { id: string; name: string }[] = [];
+		for (const id of ids) {
+			const widget = getWidgetById(id);
+			items.push({
+				id,
+				name: (widget?.name || '').trim() || 'Untitled Widget'
+			});
+		}
+		if (canvasPrimaryWidgetId && !items.some((item) => item.id === canvasPrimaryWidgetId)) {
+			const primary = getWidgetById(canvasPrimaryWidgetId);
+			if (primary?.id) {
+				items.unshift({
+					id: primary.id,
+					name: (primary.name || '').trim() || 'Untitled Widget'
+				});
+			}
+		}
+		const primaryWidgetId = canvasPrimaryWidgetId || '';
+		console.log('[CreatorApp] Emit canvas widgets for header', reason, items.length, primaryWidgetId);
+		window.dispatchEvent(new CustomEvent(CREATOR_CANVAS_WIDGETS_EVENT, {
+			detail: { widgets: items, primaryWidgetId }
+		}));
+	}
+
+	function handleHostRequestCanvasWidgetsEvent() {
+		emitCanvasWidgetsList('host-request');
+	}
+
+	function handleHostSetPrimaryWidgetEvent(event: Event) {
+		const widgetId = (event as CustomEvent).detail?.widgetId;
+		if (!widgetId || typeof widgetId !== 'string') {
+			console.warn('[CreatorApp] Host set primary ignored — missing widgetId');
+			return;
+		}
+		console.log('[CreatorApp] Host set primary widget', widgetId.substring(0, 8));
+		canvasRef?.setPrimaryWidgetShape?.(widgetId);
+		canvasRef?.selectWidgetShape?.(widgetId);
+		void persistPrimaryWidgetId(widgetId);
 	}
 
 	function handleSetPrimaryWidget(widgetId: string) {
 		void persistPrimaryWidgetId(widgetId);
 	}
 
+	async function hydrateCanvasPrimaryWidget(linkedIds?: string[]): Promise<string | null> {
+		const targetCanvasId = (typeof canvasId === 'string' && canvasId.trim()) ? canvasId.trim() : null;
+		if (!targetCanvasId) return canvasPrimaryWidgetId || null;
+		let primaryId = await resolvePrimaryWidgetIdForCanvas(targetCanvasId);
+		if (!primaryId) {
+			const fromLinks = (linkedIds || []).filter((id) => id && !isDraftConvertId(id) && !String(id).startsWith('draft'));
+			const fromList = widgets
+				.filter((w: any) => {
+					const cid = w.canvasId || w.canvas_id;
+					return cid === targetCanvasId && w.id && !isDraftConvertId(w.id);
+				})
+				.map((w: any) => w.id);
+			primaryId = fromLinks[0] || fromList[0] || null;
+			if (primaryId) {
+				console.log('[CreatorApp] Healing empty primary_widget_id →', primaryId.substring(0, 8));
+				await persistPrimaryWidgetId(primaryId);
+			}
+		}
+		if (primaryId) {
+			const widget = getWidgetById(primaryId);
+			if (widget) notifyHostWidgetName(widget);
+			emitCanvasWidgetsList('hydrate-primary');
+		}
+		return primaryId || canvasPrimaryWidgetId || null;
+	}
+
+	async function handleHostMoveCanvasFolderEvent(event: Event) {
+		const folderId = (event as CustomEvent).detail?.folderId;
+		if (!folderId || typeof folderId !== 'string' || !widgetsClient) return;
+		const targetCanvasId = (typeof canvasId === 'string' && canvasId.trim()) ? canvasId.trim() : null;
+		let primaryId = canvasPrimaryWidgetId || (targetCanvasId ? await resolvePrimaryWidgetIdForCanvas(targetCanvasId) : null);
+		if (!primaryId) {
+			primaryId = await hydrateCanvasPrimaryWidget();
+		}
+		const ids = new Set<string>();
+		if (primaryId) ids.add(primaryId);
+		for (const w of widgets) {
+			const cid = (w as any).canvasId || (w as any).canvas_id;
+			if (targetCanvasId && cid === targetCanvasId && w.id) ids.add(w.id);
+		}
+		console.log('[CreatorApp] Move canvas widgets to folder', folderId, [...ids].map((id) => id.substring(0, 8)));
+		for (const id of ids) {
+			try {
+				await widgetsClient.updateWidget({
+					id,
+					updateWidgetRequest: { projectId: folderId, projectFolder: folderId }
+				});
+			} catch (err) {
+				console.warn('[CreatorApp] Failed to move widget to folder', id.substring(0, 8), err);
+			}
+		}
+	}
+
 	// Preview Modal State Variables
 	let previewIframe: HTMLIFrameElement | null = null;
 	const { DEV: isDevMode } = import.meta.env;
@@ -4007,18 +4374,11 @@
 			const { loaded, widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
 			await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 			await maybeAutoRestoreWidgetShapes();
-			// Backfill widget name + thumbnail on shapes that were saved before those
-			// fields existed on WidgetShape (fixes "Widget" placeholder on old canvases).
 			backfillWidgetShapeMetadata();
-			if (loaded && canvasRef) {
-				const primaryId =
-					canvasPrimaryWidgetId ||
-					canvasRef.getPrimaryWidgetId?.() ||
-					selectedWidgetId;
-				if (primaryId && !isConvertOrDraftPanelOpen()) {
-					canvasRef.setPrimaryWidgetShape?.(primaryId);
-					canvasRef.selectWidgetShape(primaryId);
-				}
+			const primaryId = await hydrateCanvasPrimaryWidget(widgetIdsOnCanvas);
+			if (loaded && canvasRef && primaryId && !isConvertOrDraftPanelOpen()) {
+				canvasRef.setPrimaryWidgetShape?.(primaryId);
+				canvasRef.selectWidgetShape(primaryId);
 			}
 		} catch (error) {
 			console.error('Widget Creator: Load canvases error:', error);
@@ -5282,20 +5642,19 @@
 		}
 	}
 
-	/** After hydrate, cross-check GitLab HEAD if we don't have a fresh local commit.
-	 *  Widget: if HEAD sha differs from the local lastCommitId, promote it so the Edit banner
-	 *  ("Newer code than Live") can detect unpublished code even without recent codegen locally. */
+	/** After hydrate, probe GitLab HEAD only when this widget has no codegen commit yet.
+	 *  Do not promote HEAD over lastCommitId — that marks a new publish version on every Details open. */
 	async function reconcileWidgetHeadCommit(widgetId: string): Promise<void> {
 		const currentPanelLastCommit = getPanelState(widgetId).lastCommitId;
-		const publishSha = getWidgetLastPublishCommitSha(widgetId);
-		// If we already have a lastCommitId that differs from the publish SHA, no probe needed.
-		if (currentPanelLastCommit && publishSha && !commitsMatch(currentPanelLastCommit, publishSha)) {
+		if (currentPanelLastCommit) {
+			console.log(
+				`[Version] Skip HEAD probe for "${widgetId}": lastCommitId already ${currentPanelLastCommit.substring(0, 8)}`
+			);
 			return;
 		}
 		const headSha = await fetchRepoHeadCommitSha(widgetId);
 		if (!headSha) return;
-		if (currentPanelLastCommit && commitsMatch(currentPanelLastCommit, headSha)) return;
-		console.log(`[Version] Repo HEAD probe for "${widgetId}": ${headSha.substring(0, 8)} (was ${currentPanelLastCommit?.substring(0, 8) ?? 'null'})`);
+		console.log(`[Version] Repo HEAD probe for "${widgetId}": ${headSha.substring(0, 8)} (was null)`);
 		patchPanelSnapshot(widgetId, { lastCommitId: headSha, hasGeneratedCode: true });
 		saveCommitIdForWidget(widgetId, headSha);
 		if (widgetId === focusedPanelWidgetId) {
@@ -5568,9 +5927,11 @@
 			// Ensure we have an id
 			const newWidget = response.data || response; // handle envelope or direct
 			if (newWidget?.id) {
-				// Optimistically add to list and select
 				widgets = [{ ...newWidget }, ...widgets];
 				selectWidget(newWidget);
+				if (!canvasPrimaryWidgetId) {
+					void persistPrimaryWidgetId(newWidget.id);
+				}
 				authStatus = 'Widget created.';
 			} else {
 				authStatus = 'Widget created but response missing id.';
@@ -6553,16 +6914,6 @@ Requirements:
 				: 'Preparing code generation...',
 		});
 
-		// Persist chat attachments before repo/codegen so reopen + failed GLM still show the file.
-		if (!options.compileFixOnly) {
-			await ensureCodegenUserMessagePersisted(
-				generationWidgetId,
-				prompt,
-				options.promptImagesOverride,
-				options.persistFileAttachments,
-			);
-		}
-		
 		// Keep preview tab active so user sees the "Generating..." overlay.
 		// Console logs are still accessible via the Console tab button.
 		getWidgetDetailsRef(generationWidgetId)?.setInlinePanelView('preview');
@@ -6929,6 +7280,11 @@ Requirements:
 							}
 						})();
 					}
+					if (generationWidgetId) {
+						console.log('[CompositionEditor] Reloading schemas after codegen', generationWidgetId.substring(0, 8));
+						void loadWidgetSchemas(generationWidgetId, { force: true });
+					}
+
 					const completedRepoId = resolveRepositoryIdForWidget(generationWidgetId);
 					if (completedRepoId) {
 						stampWidgetRepositoryId(generationWidgetId, completedRepoId);
@@ -7160,7 +7516,11 @@ Requirements:
 		commitSha?: string | null
 	): void {
 		const jsPath = resolvePublishedJsPath(widgetId, version, artifactUrl);
-		const normalizedCommit = commitSha ? normalizeCommitSha(commitSha) : null;
+		const prevSnap = getPanelState(widgetId);
+		const normalizedCommit =
+			normalizeCommitSha(commitSha)
+			|| normalizeCommitSha(prevSnap.lastCommitId)
+			|| normalizeCommitSha(loadCommitIdForWidget(widgetId));
 
 		widgets = widgets.map((w) =>
 			w.id === widgetId
@@ -7177,7 +7537,6 @@ Requirements:
 				: w
 		);
 
-		const prevSnap = getPanelState(widgetId);
 		const optimisticHistoryEntry = normalizedCommit
 			? {
 				version,
@@ -7208,6 +7567,9 @@ Requirements:
 			saveCommitIdForWidget(widgetId, normalizedCommit);
 		}
 
+		console.log('[CompositionEditor] Reloading schemas after publish', widgetId.substring(0, 8));
+		void loadWidgetSchemas(widgetId, { force: true });
+
 		if (selectedWidgetId === widgetId) {
 			lastPublishedVersion = version;
 			selectedWidgetJsPath = jsPath;
@@ -7402,6 +7764,16 @@ Requirements:
 
 	// Restore session on mount with expiration check
 	onMount(() => {
+		const googleFontsKey =
+			(typeof import.meta !== 'undefined' &&
+				(import.meta.env?.PUBLIC_GOOGLE_FONTS_API_KEY || import.meta.env?.VITE_GOOGLE_FONTS_API_KEY)) ||
+			'';
+		if (googleFontsKey) {
+			setGoogleFontsApiKey(String(googleFontsKey));
+			console.log('[CreatorApp] Google Fonts API key set for FontIC');
+		} else {
+			console.warn('[CreatorApp] No PUBLIC_GOOGLE_FONTS_API_KEY / VITE_GOOGLE_FONTS_API_KEY — FontIC uses fallback catalog');
+		}
 		setWebsocketApiUrl(apiRoot ?? null);
 		if (embedded) {
 			syncSessionFromSiteAuth();
@@ -7551,6 +7923,10 @@ Requirements:
 			window.removeEventListener(HOST_OPEN_WIDGET_DETAILS_EVENT, handleHostOpenWidgetDetailsEvent);
 			window.removeEventListener(HOST_DUPLICATE_WIDGET_EVENT, handleHostDuplicateWidgetEvent);
 			window.removeEventListener(HOST_DELETE_WIDGET_EVENT, handleHostDeleteWidgetEvent);
+			window.removeEventListener(HOST_SAVE_CANVAS_EVENT, handleHostSaveCanvasEvent);
+			window.removeEventListener(HOST_SET_PRIMARY_WIDGET_EVENT, handleHostSetPrimaryWidgetEvent);
+			window.removeEventListener(HOST_REQUEST_CANVAS_WIDGETS_EVENT, handleHostRequestCanvasWidgetsEvent);
+			window.removeEventListener(HOST_MOVE_CANVAS_FOLDER_EVENT, handleHostMoveCanvasFolderEvent);
 			for (const wId of Object.keys(generatingWidgetIds)) {
 				setCrossTabGenerating(false, wId);
 			}
@@ -7580,9 +7956,14 @@ Requirements:
 		window.addEventListener(HOST_OPEN_WIDGET_DETAILS_EVENT, handleHostOpenWidgetDetailsEvent);
 		window.addEventListener(HOST_DUPLICATE_WIDGET_EVENT, handleHostDuplicateWidgetEvent);
 		window.addEventListener(HOST_DELETE_WIDGET_EVENT, handleHostDeleteWidgetEvent);
+		window.addEventListener(HOST_SAVE_CANVAS_EVENT, handleHostSaveCanvasEvent);
+		window.addEventListener(HOST_SET_PRIMARY_WIDGET_EVENT, handleHostSetPrimaryWidgetEvent);
+		window.addEventListener(HOST_REQUEST_CANVAS_WIDGETS_EVENT, handleHostRequestCanvasWidgetsEvent);
+		window.addEventListener(HOST_MOVE_CANVAS_FOLDER_EVENT, handleHostMoveCanvasFolderEvent);
 		emitCreatorDebugChanged();
 		emitCreatorWireframeChanged();
 		emitCreatorAdvancedChanged();
+		emitCreatorSaveState(false);
 	});
 
 	// Capture-phase Escape: close lightbox before Canvas can deselect → close WidgetDetails
@@ -7620,8 +8001,6 @@ Requirements:
 					if (file) {
 						const base64 = await processImageFile(file);
 						if (base64) {
-							promptImages = [...promptImages, base64];
-							savePromptImagesToSession();
 							chatMethods?.addImageAttachment?.(base64, file.name || 'pasted-image.png');
 							showToast('success', 'Image pasted to prompt', { duration: 2000 });
 						}
@@ -8425,14 +8804,20 @@ Requirements:
 	}
 
 	function positionOpenDetailsPanel(widgetId: string): void {
-		let rect = canvasRef?.getWidgetShapeScreenRect?.(widgetId) ?? null;
-		if (!rect) {
-			const objectId = draftConvertObjectIds.get(widgetId);
-			if (objectId && canvasRef?.getObjectScreenRect) {
-				rect = canvasRef.getObjectScreenRect(objectId);
+		const apply = () => {
+			let rect = canvasRef?.getWidgetShapeScreenRect?.(widgetId) ?? null;
+			if (!rect) {
+				const objectId = draftConvertObjectIds.get(widgetId);
+				if (objectId && canvasRef?.getObjectScreenRect) {
+					rect = canvasRef.getObjectScreenRect(objectId);
+				}
 			}
+			getWidgetDetailsRef(widgetId)?.positionBesideShape?.(rect);
+		};
+		apply();
+		if (typeof requestAnimationFrame === 'function') {
+			requestAnimationFrame(apply);
 		}
-		getWidgetDetailsRef(widgetId)?.positionBesideShape?.(rect);
 	}
 
 	async function openWidgetDetailsPanel(widgetId: string): Promise<void> {
@@ -9235,20 +9620,11 @@ Requirements:
 		const effectiveCanvasId = getEffectiveCanvasId();
 		const panelIsPublishing = isPublishing && publishingWidgetId === widgetId;
 		const anotherPanelIsPublishing = isPublishing && publishingWidgetId !== null && publishingWidgetId !== widgetId;
-		const stuckGlobalPublishing = isPublishing && !publishingWidgetId;
 		const nextVersion = (ps.lastPublishedVersion ?? 0) + 1;
 
 		if (panelIsPublishing) {
 			return { disabled: true, label: 'Publishing...', reason: 'Publishing in progress…', showDisabledHint: false };
 		}
-		if (stuckGlobalPublishing) {
-			return {
-				disabled: true,
-				label: getPublishButtonLabelFallback(ps),
-				reason: 'Publish state is busy — try again in a moment.',
-				showDisabledHint: true,
-			};
-		}
 		if (anotherPanelIsPublishing) {
 			return {
 				disabled: true,
@@ -9257,7 +9633,7 @@ Requirements:
 				showDisabledHint: true,
 			};
 		}
-		if (isPublishingInOtherTab) {
+		if (checkCrossTabPublishing(widgetId)) {
 			return {
 				disabled: true,
 				label: getPublishButtonLabelFallback(ps),
@@ -9319,6 +9695,16 @@ Requirements:
 		const unpublishedAhead = hasUnpublishedChangesForPanel(widgetId)
 			|| !!(ps.lastCommitId && liveSha && !commitsMatch(ps.lastCommitId, liveSha));
 
+		// Known up-to-date: HEAD matches live. Must win over leftover pendingPublish flags.
+		if (headSha && liveSha && commitsMatch(headSha, liveSha)) {
+			return {
+				disabled: true,
+				label: 'No new version to publish',
+				reason: `Latest commit (${formatCommitShaShort(headSha)}) is already live at v${ps.lastPublishedVersion}.`,
+				showDisabledHint: false,
+			};
+		}
+
 		if (pendingPublish || unpublishedAhead) {
 			console.log('[Publish] Gate: unpublished HEAD — enable', widgetId.substring(0, 8), {
 				pendingPublish,
@@ -9335,16 +9721,6 @@ Requirements:
 			};
 		}
 
-		// Known up-to-date: HEAD matches live.
-		if (headSha && liveSha && commitsMatch(headSha, liveSha)) {
-			return {
-				disabled: true,
-				label: 'No new version to publish',
-				reason: `Latest commit (${formatCommitShaShort(headSha)}) is already live at v${ps.lastPublishedVersion}.`,
-				showDisabledHint: false,
-			};
-		}
-
 		// After a live version exists, enable vN+1 when HEAD is proven different.
 		if (headSha && liveSha && !commitsMatch(headSha, liveSha)) {
 			return {
@@ -10178,8 +10554,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			}
 		}
 
-		// Keep address-bar widget_id aligned with the shape (prod embed props are frozen at mount).
-		if (typeof window !== 'undefined' && embedded) {
+		// Keep address-bar widget_id on the canvas primary (duplicate/select must not steal it).
+		if (typeof window !== 'undefined' && embedded && canvasPrimaryWidgetId && widgetId === canvasPrimaryWidgetId) {
 			try {
 				const url = new URL(window.location.href);
 				if (url.searchParams.get('widget_id') !== widgetId) {
@@ -10229,7 +10605,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				id: sourceWidgetId,
 				duplicateWidgetRequest: { canvas_id: canvasId } as any
 			});
-			const newWidget = response?.data;
+			let newWidget = response?.data;
 
 			if (!newWidget?.id) {
 				console.error('[WidgetCreator] duplicateWidget returned no data', response);
@@ -10255,37 +10631,94 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			}
 
 			// Re-link the cloned canvas shape to the new widget (also clears _isDuplicating on clone)
-			canvasRef?.linkObjectToWidget(clonedObject, newWidget.id, newWidget.name ?? null);
+			if (clonedObject) {
+				canvasRef?.linkObjectToWidget(clonedObject, newWidget.id, newWidget.name ?? null);
+			} else if (canvasRef?.addWidgetShape) {
+				canvasRef.addWidgetShape(newWidget.id, newWidget.name, 0, 1, null);
+			}
 			setTimeout(() => {
 				const json = canvasRef?.saveCanvas();
 				if (json) handleCanvasAutoSave(json);
 			}, 500);
 
-			// Add to beginning of list (newest first) and auto-select
 			widgets = [{ ...newWidget }, ...widgets];
 
-			// Set flag BEFORE selectWidget so loadWidget skips the build-from-repo attempt
-			// (the fork isn't ready yet — we handle it below after a delay)
-			pendingDuplicateBuildWidgetId = newWidget.id;
-			selectWidget(newWidget);
+			const sourceWidget = getWidgetById(sourceWidgetId);
+			const sourceJsPath =
+				((sourceWidget as { jsPath?: string | null; js_path?: string | null } | null)?.jsPath
+					?? (sourceWidget as { js_path?: string | null } | null)?.js_path)
+				?? null;
+			const duplicateJsPath =
+				sourceJsPath
+				?? ((newWidget as { jsPath?: string | null; js_path?: string | null }).jsPath
+					?? (newWidget as { js_path?: string | null }).js_path);
+			if (sourceWidget && duplicateJsPath) {
+				Object.assign(newWidget, {
+					jsPath: duplicateJsPath,
+					js_path: duplicateJsPath,
+					version: (newWidget as { version?: number }).version ?? (sourceWidget as { version?: number }).version,
+					isDraft: (newWidget as { isDraft?: boolean }).isDraft
+						?? (sourceWidget as { isDraft?: boolean; is_draft?: boolean }).isDraft
+						?? (sourceWidget as { is_draft?: boolean }).is_draft,
+					lastCpgCommitSha:
+						(newWidget as { lastCpgCommitSha?: string | null }).lastCpgCommitSha
+						?? (sourceWidget as { lastCpgCommitSha?: string | null }).lastCpgCommitSha,
+					lastPublishCommitSha:
+						(newWidget as { lastPublishCommitSha?: string | null }).lastPublishCommitSha
+						?? (sourceWidget as { lastPublishCommitSha?: string | null; last_publish_commit_sha?: string | null }).lastPublishCommitSha
+						?? (sourceWidget as { last_publish_commit_sha?: string | null }).last_publish_commit_sha,
+				});
+				widgets = widgets.map((w) => (w.id === newWidget.id ? { ...newWidget } : w));
+			}
+
+			const sourceCommit = loadCommitIdForWidget(sourceWidgetId);
+			if (sourceCommit) {
+				saveCommitIdForWidget(newWidget.id, sourceCommit);
+			}
+
+			const sourceHasCode =
+				!!normalizeRepositoryId(newWidget)
+				|| !!((newWidget as { jsPath?: string | null; js_path?: string | null }).jsPath
+					?? (newWidget as { js_path?: string | null }).js_path)
+				|| resolvePublishedVersionFromWidget(newWidget) !== null
+				|| !!sourceCommit;
+
+			if (!canvasPrimaryWidgetId) {
+				canvasPrimaryWidgetId = sourceWidgetId;
+			}
+
+			// Duplicate stays a sibling on the canvas — do not make it the primary widget.
+			await selectWidget(newWidget, { skipPlaceShape: true });
+			notifyHostWidgetName(getWidgetById(canvasPrimaryWidgetId) ?? getWidgetById(sourceWidgetId));
 
-			const newRepoId = normalizeRepositoryId(newWidget);
 			showToast('success', 'Widget duplicated', {
-				description: `"${newWidget.name}" created — compiling code…`
+				description: sourceHasCode
+					? `"${newWidget.name}" created with existing code`
+					: `"${newWidget.name}" created`
 			});
 
-			// Re-fetch widget from API to ensure repo_id and other fields are current
 			setTimeout(() => handleWidgetDataChanged(newWidget.id), 1500);
 
-			// Wait for GitLab fork to complete, then compile from repo
-			// GitLab forks are async — files need time to be copied
+			if (sourceHasCode) {
+				await openWidgetDetailsPanel(newWidget.id);
+				await tick();
+				getWidgetDetailsRef(newWidget.id)?.startPreviewLoadingPublic();
+				try {
+					await getWidgetDetailsRef(newWidget.id)?.retryPreviewIfEmpty?.();
+				} catch (previewErr) {
+					console.warn('[WidgetCreator] Duplicate preview fallback failed:', previewErr);
+				}
+				return;
+			}
+
+			pendingDuplicateBuildWidgetId = newWidget.id;
 			setTimeout(async () => {
 				if (selectedWidgetId !== newWidget.id) return;
 				pendingDuplicateBuildWidgetId = null;
 				try {
 					await handleWidgetDataChanged(newWidget.id);
 					const freshWidget = getWidgetById(newWidget.id);
-					let repoId = freshWidget ? normalizeRepositoryId(freshWidget) : newRepoId;
+					let repoId = freshWidget ? normalizeRepositoryId(freshWidget) : normalizeRepositoryId(newWidget);
 
 					if (!repoId) {
 						console.log('[WidgetCreator] Duplicate has no repo after re-fetch, creating one...');
@@ -10333,6 +10766,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 		if (!result.proceed) return false;
 
+		closeWidgetDetailsPanel(widgetId);
+
 		if (result.deleteFromDb) {
 			await deleteWidgetFromDb(widgetId);
 		} else {
@@ -10360,7 +10795,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			if (selectedWidget?.id === widgetId) {
 				selectedWidget = { ...selectedWidget, name: newName };
 			}
-			onWidgetRenamed?.({ widgetId, name: newName });
+			notifyHostWidgetName({ id: widgetId, name: newName });
+			emitCanvasWidgetsList('widget-renamed');
 			showToast('success', `Widget renamed to "${newName}"`);
 		} catch (error) {
 			console.error('[WidgetCreator] Failed to rename widget:', error);
@@ -10407,10 +10843,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		}
 		await syncWidgetsWithCanvas(widgetIdsOnCanvas);
 		await maybeAutoRestoreWidgetShapes();
-		const primaryId =
-			canvasPrimaryWidgetId ||
-			canvasRef.getPrimaryWidgetId?.() ||
-			selectedWidgetId;
+		const primaryId = await hydrateCanvasPrimaryWidget(widgetIdsOnCanvas);
 		if (primaryId && canvasRef && !isConvertOrDraftPanelOpen()) {
 			canvasRef.setPrimaryWidgetShape?.(primaryId);
 			const found = canvasRef.selectWidgetShape(primaryId);
@@ -10607,6 +11040,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 				const widgetIdsOnCanvas = extractWidgetIdsFromCanvasContent(parsed);
 				await canvasRef.loadCanvas(saved);
 				markCanvasStateLoaded();
+				canvasApiLoadError = null;
 				isLoadCooldownActive = true;
 				setTimeout(() => { isLoadCooldownActive = false; }, 3000);
 				lastSavedCanvasObjectCount = objectCount;
@@ -10690,6 +11124,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 
 		lastSavedCanvasObjectCount = objectCount;
 		try { sessionStorage.setItem(CANVAS_OBJ_COUNT_KEY, String(objectCount)); } catch {}
+		emitCreatorSaveState(false);
 
 		// Save to durable L1 fallback (always, even with 0 objects for legitimate clears)
 		saveCanvasState(canvasId, json);
@@ -10928,6 +11363,13 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 			// Add to widgets list so getWidgetById resolves the real widget from now on.
 			widgets = [{ ...newWidget }, ...widgets.filter((w) => w.id !== draftId)];
 
+			if (canvasId) {
+				const existingPrimary = await resolvePrimaryWidgetIdForCanvas(canvasId);
+				if (!existingPrimary) {
+					await persistPrimaryWidgetId(widgetId);
+				}
+			}
+
 			// Replace the grouped sketch with a WidgetShape screenshot. On failure
 			// fall back to linking the sketch object to the widget id.
 			if (canvasRef && canvasObjectId) {
@@ -11560,6 +12002,7 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 		}}
 		onConvertToWidget={handleConvertToWidget}
 		onWidgetImageClick={handleWidgetImageClick}
+		onCanvasDirty={() => emitCreatorSaveState(true)}
 		onWidgetShapeDuplicated={handleWidgetShapeDuplicated}
 		onWidgetShapeDeleting={handleWidgetShapeDeleting}
 		onWidgetRename={handleWidgetRename}
@@ -11998,21 +12441,15 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 						detail.repoHeadCommitSha ||
 						detail.repo_head_commit_sha ||
 						null;
-					const hasSha = typeof repoHead === 'string' && repoHead.length > 0;
-					if (hasSha) {
-						saveCommitIdForWidget(detail.widgetId, repoHead);
-					}
-					// Always persist hasGeneratedCode on the snapshot so Publish re-renders
-					// even when Worker cache hits without a SHA and the panel is unfocused.
+					// Rebuild is the same saved tree — do not promote GitLab HEAD into lastCommitId
+					// or Publish will offer vN+1 without a new codegen commit.
 					patchPanelSnapshot(detail.widgetId, {
 						panelPreviewCompileError: null,
 						hasGeneratedCode: true,
-						...(hasSha ? { lastCommitId: repoHead } : {}),
 					});
 					if (detail.widgetId === panelWidgetId) {
 						hasGeneratedCode = true;
-						if (hasSha) lastCommitId = repoHead;
-						if (!hasSha) {
+						if (!getPanelState(detail.widgetId).lastCommitId && !loadCommitIdForWidget(detail.widgetId)) {
 							void reconcileWidgetHeadCommit(detail.widgetId);
 						}
 						if (isPanelFocused && generateCodeStatus?.includes('preview build failed')) {
@@ -12273,6 +12710,8 @@ $: if (codeGenerationPrompt && selectedWidgetId) {
 							onRetryMessage={(content) => handleChatRetryMessage(content, panelWidgetId)}
 							onUploadChatFile={handleChatUploadFile}
 							onTakeScreenshot={() => handleChatScreenshot(panelWidgetId)}
+							isCompleted={!!conversationCompletedByWidgetId[panelWidgetId]}
+							onCompletionToggle={(detail) => handleChatCompletionToggle(panelWidgetId, detail)}
 							onLoadConversations={handleLoadConversations}
 							onLoadMessages={(conversationId) => handleLoadMessages(conversationId, panelWidgetId)}
 							onCreateConversation={handleCreateConversation}
@@ -12384,8 +12823,8 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 						${isPublishing && publishingWidgetId === panelWidgetId
 							? 'bg-emerald-500 border-emerald-500 opacity-80 cursor-not-allowed'
 							: isPublishDisabledForPanel(panelWidgetId)
-								? 'bg-emerald-600 border-emerald-600 opacity-35 cursor-not-allowed'
-								: 'bg-emerald-600 border-emerald-600 hover:bg-emerald-700 hover:border-emerald-700 cursor-pointer'
+								? 'bg-emerald-600 border-emerald-600 opacity-40 cursor-not-allowed'
+								: '!opacity-100 bg-emerald-600 border-emerald-600 hover:bg-emerald-700 hover:border-emerald-700 cursor-pointer'
 						} rounded-lg`}
 					>
 					{#if isPublishing && publishingWidgetId === panelWidgetId && publishWidgetStatus === 'Building...'}
@@ -12408,9 +12847,9 @@ class={`publish-widget-btn flex justify-center items-center border text-white w-
 					{/if}
 					</Button>
 
-					{#if isPublishDisabledForPanel(panelWidgetId) && shouldShowPublishDisabledHintForPanel(panelWidgetId)}
+					{#if isPublishDisabledForPanel(panelWidgetId)}
 						<p class="publish-widget-disabled-hint text-[10px] text-center text-emerald-800/80 leading-snug px-1">
-							{getPublishDisabledReasonForPanel(panelWidgetId)}
+							{getPublishDisabledReasonForPanel(panelWidgetId) || getPublishButtonLabelForPanel(panelWidgetId)}
 						</p>
 					{/if}