@widgetic/creator 0.3.50 → 0.3.53

package/dist/components/WidgetDetails.svelte

@@ -14,7 +14,8 @@
 	import { get } from 'svelte/store';
 	import { Button, showToast, GenerateLoader } from '@widgetic/design-system/components';
 	import {
-		AgentApi
+		AgentApi,
+		WidgetBuilderApi
 	} from '@widgetic/api-sdk';
 	import { maxCharsFromId } from '../constants.js';
 	import {
@@ -182,6 +183,21 @@
 		return `${base}/preview/${widgetId}`;
 	}
 
+	/** CDN/js_path may point at the source widget after duplicate — never rewrite the id. */
+	function publishedHtmlUrlFromJsPath(jsPath: string | null | undefined): string | null {
+		if (!jsPath) return null;
+		let resolved = String(jsPath).replace(/\/+$/, '')
+			.replace(/\/widget\.js$/i, '/widget.html')
+			.replace(/\.js$/i, '.html');
+		if (!/\.html$/i.test(resolved)) {
+			resolved = `${resolved}/widget.html`;
+		}
+		if (resolved.startsWith('/')) {
+			resolved = `${cdnPublicBaseUrl}${resolved}`;
+		}
+		return resolved;
+	}
+
 	/** Map public preview URLs to same-origin fetch paths in dev (iframe embed). */
 	function toPreviewFetchUrl(url: string): string {
 		if (!import.meta.env.DEV) return url;
@@ -269,7 +285,7 @@
 		{ id: 'embed', label: 'Embed', number: 3 },
 	];
 
-	$: hasWidgetCode = !!lastCommitId || lastPublishedVersion !== null;
+	$: hasWidgetCode = !!lastCommitId || lastPublishedVersion !== null || !!widgetJsPath;
 
 	/** Convert UX v2: draft panels (synthetic ids) have no widget/repo yet —
 	 *  show a friendly draft hint instead of the repo-setup loader. */
@@ -278,14 +294,10 @@
 		previewError = 'DRAFT_PANEL';
 	}
 
-	/** Published widgets must never show the draft "No Code Yet" empty state. */
+	/** Duplicate still has source code — keep the loader, never flash "No Code Yet" as a compile failure. */
 	$: if (hasWidgetCode && previewError === 'NO_CODE_YET') {
-		previewError = lastPublishedVersion !== null
-			? 'Published version is not available. Use Rebuild code or republish.'
-			: 'Failed to compile widget code from repository.';
-		if (lastPublishedVersion !== null) {
-			publishedArtifactReachable = false;
-		}
+		previewError = null;
+		if (!iframeSrc) previewLoading = true;
 	}
 	$: canEditStep = lastPublishedVersion !== null && !isGeneratingCode;
 	$: canEmbedStep = lastPublishedVersion !== null && !isGeneratingCode;
@@ -647,7 +659,7 @@
 
 	function isCdnArtifactMissingError(message: string | null): boolean {
 		if (!message) return false;
-		return /artifact not found|artifact missing|not available|CDN|404 Object not found|not publicly accessible/i.test(message);
+		return /artifact not found|artifact missing|not available|CDN|404|not found|requested resource|not publicly accessible/i.test(message);
 	}
 	$: if (currentStep === 'edit') {
 		const editSource = resolvePreviewUrlForStep('edit') ?? '';
@@ -857,8 +869,8 @@
 	$: detailsPanelTopOffset = panelTopOffset ?? legacyTopOffset;
 	$: detailsPanelBottomMargin = panelBottomMargin ?? legacyBottomMargin;
 
-	const DETAILS_PANEL_DEFAULT_WIDTH = 600;
-	const DETAILS_PANEL_MAX_WIDTH = 600;
+	const DETAILS_PANEL_DEFAULT_WIDTH = 800;
+	const DETAILS_PANEL_MAX_WIDTH = 800;
 	const DETAILS_PANEL_MAX_HEIGHT = 800;
 	const DETAILS_PANEL_MIN_WIDTH = 320;
 	const DETAILS_PANEL_MIN_HEIGHT = 400;
@@ -868,6 +880,8 @@
 	const LEFT_COL_DEFAULT_PERCENT = 58;
 	const LEFT_COL_MIN_PERCENT = 32;
 	const LEFT_COL_MAX_PERCENT = 72;
+	const COL_RESIZER_PX = 10;
+	const PREVIEW_COL_MIN_PX = 240;
 	/** Chat-first layout: preview column starts collapsed and opens on generate. */
 	let previewColumnCollapsed = true;
 	let lastAutoExpandForGenerating = false;
@@ -891,6 +905,23 @@
 		expandPreviewColumn();
 	}
 
+	function maxLeftColPercent(): number {
+		const twoCol =
+			typeof document !== 'undefined'
+				? (document.querySelector('.widget-details-two-col') as HTMLElement | null)
+				: null;
+		const width = twoCol?.clientWidth || detailsPanelWidth || DETAILS_PANEL_DEFAULT_WIDTH;
+		if (width <= 0) return LEFT_COL_MAX_PERCENT;
+		const maxLeftPx = Math.max(160, width - COL_RESIZER_PX - PREVIEW_COL_MIN_PX);
+		return Math.min(LEFT_COL_MAX_PERCENT, (maxLeftPx / width) * 100);
+	}
+
+	function clampLeftColPercent(percent: number): number {
+		const maxP = maxLeftColPercent();
+		const minP = Math.min(LEFT_COL_MIN_PERCENT, maxP);
+		return Math.min(maxP, Math.max(minP, percent));
+	}
+
 	function collapsePreviewColumn() {
 		previewColumnCollapsed = true;
 		if (widthBeforePreviewExpand > 0) {
@@ -911,10 +942,7 @@
 		const fittedWidth = Math.min(expandedWidth, Math.max(widthBeforePreviewExpand, maxRight - detailsPanelX));
 		detailsPanelWidth = Math.max(widthBeforePreviewExpand, fittedWidth);
 		const usable = Math.max(1, detailsPanelWidth);
-		leftColPercent = Math.min(
-			LEFT_COL_MAX_PERCENT,
-			Math.max(LEFT_COL_MIN_PERCENT, (widthBeforePreviewExpand / usable) * 100),
-		);
+		leftColPercent = clampLeftColPercent((widthBeforePreviewExpand / usable) * 100);
 		console.log('[WidgetDetails] Preview column expanded', {
 			from: widthBeforePreviewExpand,
 			to: detailsPanelWidth,
@@ -989,35 +1017,39 @@
 
 	/** Load published CDN preview without Worker probe (safe for background panels). */
 	async function loadPublishedPreviewForCurrentStep(): Promise<boolean> {
-		if (currentStep === 'edit' && editPreviewUrl) {
-			const reachable = await probePublishedArtifactUrl(editPreviewUrl);
-			publishedArtifactReachable = reachable;
-			if (!reachable) {
-				previewError = 'Published version is not available. Use Rebuild code.';
-				previewLoading = false;
-				return false;
-			}
-			_lastEditPreviewBase = null;
-			switchPreviewUrlForStep('edit', { forceReload: true });
-			previewBuildDeferred = false;
-			previewError = null;
-			return true;
+		const widgetPath = publishedHtmlUrlFromJsPath(
+			widgetJsPath
+			|| ((selectedWidget as { jsPath?: string | null; js_path?: string | null } | null)?.jsPath
+				?? (selectedWidget as { js_path?: string | null } | null)?.js_path)
+			|| null
+		);
+		const publishedUrl =
+			currentStep === 'embed'
+				? embedPreviewUrl
+				: (widgetPath || editPreviewUrl);
+		if (!publishedUrl) return false;
+		const reachable = await probePublishedArtifactUrl(publishedUrl);
+		publishedArtifactReachable = reachable;
+		if (!reachable) {
+			console.warn('[WidgetDetails] Published artifact not reachable, falling through to repo compile', publishedUrl);
+			previewLoading = false;
+			return false;
 		}
-		if (currentStep === 'embed' && embedPreviewUrl) {
-			const reachable = await probePublishedArtifactUrl(embedPreviewUrl);
-			publishedArtifactReachable = reachable;
-			if (!reachable) {
-				previewError = 'Published version is not available. Use Rebuild code.';
-				previewLoading = false;
-				return false;
-			}
+		if (currentStep === 'embed') {
 			_lastEmbedPreviewBase = null;
-			applyPreviewUrlToIframe(embedPreviewUrl);
-			previewBuildDeferred = false;
-			previewError = null;
-			return true;
+			applyPreviewUrlToIframe(publishedUrl);
+		} else {
+			_lastEditPreviewBase = null;
+			if (currentStep === 'edit') {
+				switchPreviewUrlForStep('edit', { forceReload: true });
+			} else {
+				applyPreviewUrlToIframe(publishedUrl);
+			}
 		}
-		return false;
+		previewBuildDeferred = false;
+		previewError = null;
+		previewLoading = false;
+		return true;
 	}
 
 	/** Probe Worker / build-from-repo pipeline without resetting panel state. */
@@ -1060,7 +1092,7 @@
 		}
 
 		if (probeResult === 'not-found') {
-			console.log('[WidgetDetails] Widget not on Worker — build-from-repo', {
+			console.log('[WidgetDetails] Widget not on Worker — published artifact or build-from-repo', {
 				widgetId: capturedWidgetId.substring(0, 8),
 				hasJwt: !!getAuthJwt(),
 			});
@@ -1069,9 +1101,19 @@
 				previewError = null;
 				return;
 			}
+			if (await loadPublishedPreviewForCurrentStep()) {
+				return;
+			}
 			const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
 			if (!hasRepo) {
-				// New widget: repo is still being created — do not call build-from-repo (400 noise).
+				const fallbackUrl = publishedHtmlUrlFromJsPath(widgetJsPath);
+				if (fallbackUrl) {
+					console.log('[WidgetDetails] No repo yet — loading js_path artifact', fallbackUrl);
+					previewError = null;
+					applyPreviewUrlToIframe(fallbackUrl);
+					previewLoading = false;
+					return;
+				}
 				console.log('[WidgetDetails] No repository yet — skipping build-from-repo');
 				previewLoading = false;
 				previewError = 'NO_CODE_YET';
@@ -1124,10 +1166,7 @@
 			previewHydrating = false;
 			resetPreviewMessageBridge();
 			clearPendingRuntimeErrorOverlay();
-			// Keep previewLoading=true if it was set by widget selection (isWidgetLoading)
-			if (!isWidgetLoading) {
-				previewLoading = false;
-			}
+			previewLoading = true;
 			isWidgetLoading = false;
 			previewError = null;
 			previewRetryCount = 0;
@@ -1181,11 +1220,8 @@
 			return;
 		}
 
-		// Brand-new widget (no repo): skip Worker HEAD / build-from-repo.
-		// If the widget already has a GitLab repo, compile even without a cached commit SHA
-		// (localStorage miss, failed retries, unpublished lastCpgCommitSha).
 		const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
-		if (!lastCommitId && lastPublishedVersion === null && !hasRepo) {
+		if (!lastCommitId && lastPublishedVersion === null && !widgetJsPath && !hasRepo) {
 			console.log('[WidgetDetails] No code yet — skipping Worker probe/build-from-repo', {
 				widgetId: widgetId?.substring(0, 8),
 				hasRepo,
@@ -1226,6 +1262,27 @@
 	/** Trigger build-from-repo with retries — for duplicate/returning widgets.
 	 *  Unlike loadWidget, this doesn't reset state. Just builds and updates preview.
 	 *  When force is true, always recompiles from GitLab (evicts Worker cache) even if preview exists. */
+	async function requestBuildFromRepo(widgetId: string): Promise<any> {
+		const anyClient = agentClient as any;
+		if (typeof anyClient.agentWidgetBuilderBuildFromRepoWidgetIdPost === 'function') {
+			return anyClient.agentWidgetBuilderBuildFromRepoWidgetIdPost({ widgetId });
+		}
+		const cfg = anyClient.configuration || {};
+		const builderBasePath = String(cfg.basePath || '').replace(/\/v1\/?$/, '') || undefined;
+		const builder = new WidgetBuilderApi({
+			basePath: builderBasePath,
+			accessToken: cfg.accessToken,
+			middleware: cfg.middleware,
+			headers: cfg.headers,
+		});
+		console.log('[WidgetDetails] buildWidgetFromRepo', {
+			widgetId: widgetId.substring(0, 8),
+			builderBasePath,
+			sdkPath: '/v1/agent/widget-builder/build-from-repo/{widgetId}',
+		});
+		return builder.buildWidgetFromRepo({ widgetId });
+	}
+
 	export async function triggerBuildFromRepo(options?: { force?: boolean }): Promise<void> {
 		const forceRebuild = options?.force === true;
 		if (!selectedWidgetId) return;
@@ -1321,9 +1378,7 @@
 			for (let attempt = 1; attempt <= maxRetries; attempt++) {
 				if (isStaleRun()) return;
 				try {
-					const buildData = await agentClient.agentWidgetBuilderBuildFromRepoWidgetIdPost({
-						widgetId: capturedWidgetId
-					});
+					const buildData = await requestBuildFromRepo(capturedWidgetId);
 					if (isStaleRun()) return;
 
 					console.log('[WidgetDetails] triggerBuildFromRepo succeeded', { buildTimeMs: buildData?.data?.buildTimeMs ?? buildData?.buildTimeMs, attempt });
@@ -1397,24 +1452,17 @@
 
 		if (selectedWidgetId === capturedWidgetId) {
 			// For published widgets, try loading via API proxy (handles both R2 and CDN)
-			if (lastPublishedVersion && widgetJsPath && apiBaseUrl) {
-				const proxyUrl = `${apiBaseUrl}/widgets/${capturedWidgetId}/v${lastPublishedVersion}/widget.html`;
-				console.log('[WidgetDetails] triggerBuildFromRepo: build failed but widget is published — checking API proxy:', proxyUrl);
-				try {
-					const probeRes = await fetch(proxyUrl, { method: 'HEAD' });
-					if (probeRes.ok) {
-						console.log('[WidgetDetails] API proxy returned OK — loading published widget');
-						previewError = null;
-						previewLoading = true;
-						iframeSrc = proxyUrl;
-						setupPreviewFallbackTimeout();
-						syncPreviewLoadingWithIframe();
-						return;
-					}
-					console.warn('[WidgetDetails] API proxy returned', probeRes.status, '— artifact not on R2, showing generate button');
-				} catch (probeErr) {
-					console.warn('[WidgetDetails] API proxy probe failed:', probeErr);
+			const sourceArtifactUrl = publishedHtmlUrlFromJsPath(widgetJsPath);
+			if (sourceArtifactUrl) {
+				console.log('[WidgetDetails] triggerBuildFromRepo: using js_path artifact (not new-id proxy)', sourceArtifactUrl);
+				const reachable = await probePublishedArtifactUrl(sourceArtifactUrl);
+				if (reachable) {
+					previewError = null;
+					previewLoading = true;
+					applyPreviewUrlToIframe(sourceArtifactUrl);
+					return;
 				}
+				console.warn('[WidgetDetails] js_path artifact not reachable — showing Rebuild');
 			}
 			
 			previewLoading = false;
@@ -1461,7 +1509,9 @@
 	}
 
 	export function hasValidPreview(): boolean {
-		return !!iframeSrc && !previewError && !previewLoading;
+		// Iframe can already show a compiled preview while `previewLoading`/`previewError`
+		// still lag (e.g. iteration rebuild). Screenshot only needs a live contentWindow.
+		return !!previewIframe?.contentWindow;
 	}
 
 	export function getPreviewIframe(): HTMLIFrameElement | null {
@@ -1533,6 +1583,37 @@
 		notifyPreviewCompileErrorChanged();
 	}
 
+	/** Duplicate/fork fallback: keep published iframe if it loaded; otherwise compile from repo. */
+	export async function retryPreviewIfEmpty(): Promise<void> {
+		if (iframeSrc && !previewError) {
+			console.log('[WidgetDetails] retryPreviewIfEmpty skipped — preview already loaded');
+			return;
+		}
+		previewLoading = true;
+		previewError = null;
+		try {
+			if (await loadPublishedPreviewForCurrentStep()) return;
+			const hasRepo = !!(normalizeRepositoryId(selectedWidget) || currentRepositoryId);
+			if (hasRepo) {
+				console.log('[WidgetDetails] retryPreviewIfEmpty — compiling from repository');
+				await triggerBuildFromRepo();
+				return;
+			}
+			const fallbackUrl = publishedHtmlUrlFromJsPath(widgetJsPath);
+			if (fallbackUrl) {
+				applyPreviewUrlToIframe(fallbackUrl);
+				previewLoading = false;
+				return;
+			}
+			previewLoading = false;
+			previewError = 'NO_CODE_YET';
+			console.warn('[WidgetDetails] retryPreviewIfEmpty — no published artifact and no repo');
+		} catch (err) {
+			previewLoading = false;
+			console.warn('[WidgetDetails] retryPreviewIfEmpty failed:', err);
+		}
+	}
+
 	export function showNoCodeYetState(): void {
 		previewLoading = false;
 		previewError = 'NO_CODE_YET';
@@ -1556,6 +1637,8 @@
 		if (!target || pendingPreviewMessages.length === 0) return;
 		for (const message of pendingPreviewMessages) {
 			target.postMessage(message, '*');
+			applyRichTextInPreviewIframe(message);
+			applyDesignOverlayInPreviewIframe(message);
 		}
 		pendingPreviewMessages = [];
 	}
@@ -1590,19 +1673,183 @@
 			notifyPreviewCompileErrorChanged();
 		}
 		flushPendingPreviewMessages();
-		if (currentStep === 'edit' || currentStep === 'embed') {
-			dispatch('previewLoaded', { step: currentStep });
-		}
+		dispatch('previewLoaded', { step: currentStep });
 		// Emit previewReady so the parent app can clear the "…loading preview…" status.
 		dispatch('previewReady', { widgetId: selectedWidgetId, step: currentStep });
 		// Fill available preview area once the widget confirms it is ready.
 		scheduleFitPreviewToArea();
 	}
 
+	function looksLikeHtmlMarkup(value: unknown): value is string {
+		return typeof value === 'string' && /<[a-z][\s\S]*>/i.test(value);
+	}
+
+	/** Same-origin preview iframes (Vite /__widget_builder__ proxy): restore bold/italic after widgets set textContent. */
+	function applyRichTextInPreviewIframe(message: Record<string, unknown>): void {
+		if (message.type !== 'widgetic:update') return;
+		const doc = previewIframe?.contentDocument;
+		if (!doc) return;
+		const apply = () => {
+			try {
+				const content = message.content as Record<string, unknown> | undefined;
+				if (content) {
+					for (const [key, value] of Object.entries(content)) {
+						if (!looksLikeHtmlMarkup(value)) continue;
+						doc.querySelectorAll(`[data-content="${CSS.escape(key)}"]`).forEach((el) => {
+							if (el instanceof HTMLImageElement || el instanceof HTMLInputElement) return;
+							el.innerHTML = value;
+						});
+					}
+				}
+				const items = message.contentItems as Array<Record<string, unknown>> | undefined;
+				if (Array.isArray(items)) {
+					for (const item of items) {
+						const itemEl = item?.id
+							? doc.querySelector(`[data-content-item="${CSS.escape(String(item.id))}"]`)
+							: null;
+						const scope = itemEl || doc;
+						for (const [key, value] of Object.entries(item || {})) {
+							if (key === 'id' || !looksLikeHtmlMarkup(value)) continue;
+							scope.querySelectorAll(`[data-content="${CSS.escape(key)}"]`).forEach((el) => {
+								if (el instanceof HTMLImageElement || el instanceof HTMLInputElement) return;
+								el.innerHTML = value;
+							});
+						}
+					}
+				}
+			} catch (error) {
+				console.warn('[WidgetDetails] Rich-text preview overlay skipped:', error);
+			}
+		};
+		requestAnimationFrame(() => {
+			apply();
+			setTimeout(apply, 50);
+		});
+	}
+
+	function extractCssFontFamily(raw: string | undefined): string | null {
+		if (!raw) return null;
+		const quoted = raw.match(/["']([^"']+)["']/);
+		if (quoted?.[1]) return quoted[1].trim();
+		const first = raw.split(',')[0]?.trim();
+		if (!first || first === 'sans-serif' || first === 'serif' || first === 'system-ui') return null;
+		return first.replace(/^["']|["']$/g, '');
+	}
+
+	function ensureGoogleFontInPreviewDoc(doc: Document, family: string): void {
+		if (!family || /^(Inter|system-ui|sans-serif|serif)$/i.test(family)) return;
+		const id = `widgetic-gf-${family.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`;
+		if (doc.getElementById(id)) return;
+		const link = doc.createElement('link');
+		link.id = id;
+		link.rel = 'stylesheet';
+		link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap`;
+		doc.head?.appendChild(link);
+		console.log('[WidgetDetails] Loaded Google Font in preview iframe:', family);
+	}
+
+	/** Same-origin preview: apply CSS vars, Google Fonts, title/subtitle, tile aspect-ratio. */
+	function applyDesignOverlayInPreviewIframe(message: Record<string, unknown>): void {
+		if (message.type !== 'widgetic:update') return;
+		const design = message.design as Record<string, string> | undefined;
+		if (!design) return;
+		const doc = previewIframe?.contentDocument;
+		if (!doc?.documentElement) {
+			console.log('[WidgetDetails] Design overlay skipped — preview iframe not same-origin');
+			return;
+		}
+		const apply = () => {
+			try {
+				for (const [key, value] of Object.entries(design)) {
+					if (typeof value !== 'string' || !value) continue;
+					doc.documentElement.style.setProperty(`--${key}`, value);
+					doc.body?.style.setProperty(`--${key}`, value);
+				}
+
+				const families = new Set<string>();
+				for (const [key, value] of Object.entries(design)) {
+					if (typeof value !== 'string') continue;
+					if (/Family$/i.test(key) || (/font/i.test(key) && !/Weight$/i.test(key))) {
+						const family = extractCssFontFamily(value);
+						if (family) families.add(family);
+					}
+				}
+				families.forEach((family) => ensureGoogleFontInPreviewDoc(doc, family));
+
+				const titleFamily =
+					design.titleFontFamily ||
+					extractCssFontFamily(design.titleFont) ||
+					design.headingFontFamily ||
+					extractCssFontFamily(design.headingFont);
+				const titleWeight = design.titleFontWeight || design.headingFontWeight || '';
+				const subtitleFamily =
+					design.subtitleFontFamily ||
+					extractCssFontFamily(design.subtitleFont) ||
+					design.descriptionFontFamily ||
+					extractCssFontFamily(design.descriptionFont);
+				const subtitleWeight = design.subtitleFontWeight || design.descriptionFontWeight || '';
+
+				if (titleFamily || titleWeight) {
+					const titleStack = titleFamily ? `"${titleFamily}", sans-serif` : '';
+					doc.querySelectorAll(
+						'h1, h2, h3, .widget-title, [data-content="title"], [data-content="widgetTitle"], [data-content="heading"]'
+					).forEach((el) => {
+						if (!(el instanceof HTMLElement)) return;
+						if (titleStack) el.style.setProperty('font-family', titleStack, 'important');
+						if (titleWeight) el.style.setProperty('font-weight', titleWeight, 'important');
+					});
+				}
+				if (subtitleFamily || subtitleWeight) {
+					const subStack = subtitleFamily ? `"${subtitleFamily}", sans-serif` : '';
+					const subtitleEls = doc.querySelectorAll(
+						'.widget-subtitle, .gallery-subtitle, [data-content="subtitle"], [data-content="description"], [data-content="widgetSubtitle"]'
+					);
+					const applySub = (el: HTMLElement) => {
+						if (subStack) el.style.setProperty('font-family', subStack, 'important');
+						if (subtitleWeight) el.style.setProperty('font-weight', subtitleWeight, 'important');
+					};
+					if (subtitleEls.length > 0) {
+						subtitleEls.forEach((el) => {
+							if (el instanceof HTMLElement) applySub(el);
+						});
+					} else {
+						const firstParagraph = doc.querySelector('p');
+						if (firstParagraph instanceof HTMLElement) applySub(firstParagraph);
+					}
+				}
+
+				const aspectEntry = Object.entries(design).find(([key, value]) =>
+					/aspect/i.test(key) && typeof value === 'string' && /\d+\s*\/\s*\d+/.test(value)
+				);
+				if (aspectEntry) {
+					const cssRatio = aspectEntry[1].replace(/\s+/g, '');
+					doc.querySelectorAll('img, [class*="aspect-"], .gallery-tile, .tile').forEach((el) => {
+						if (!(el instanceof HTMLElement)) return;
+						el.style.aspectRatio = cssRatio;
+						el.style.objectFit = 'cover';
+						if (el instanceof HTMLImageElement) {
+							el.style.width = '100%';
+							el.style.height = 'auto';
+						}
+					});
+					console.log('[WidgetDetails] Applied tile aspect-ratio overlay:', cssRatio);
+				}
+			} catch (error) {
+				console.warn('[WidgetDetails] Design overlay skipped:', error);
+			}
+		};
+		requestAnimationFrame(() => {
+			apply();
+			setTimeout(apply, 50);
+		});
+	}
+
 	/** Send a postMessage to the widget preview iframe (for live property editing) */
 	export function sendMessageToPreview(message: Record<string, unknown>): void {
 		if (previewWidgetReady && previewIframe?.contentWindow) {
 			previewIframe.contentWindow.postMessage(message, '*');
+			applyRichTextInPreviewIframe(message);
+			applyDesignOverlayInPreviewIframe(message);
 			return;
 		}
 		pendingPreviewMessages.push(message);
@@ -1944,9 +2191,15 @@
 			}
 		} else {
 			previewHydrating = false;
-			previewWidgetReady = true;
 			dispatch('previewReady', { widgetId: selectedWidgetId, step: currentStep });
-			// Create step: iframe load does not go through markPreviewWidgetReady — still fit-to-area.
+			// Create: wait for widgetic:ready so contentItems overlay is not sent before the widget listens.
+			if (!previewWidgetReady) {
+				if (previewReadyFallbackTimeout) clearTimeout(previewReadyFallbackTimeout);
+				previewReadyFallbackTimeout = setTimeout(() => {
+					console.warn('[WidgetDetails] Create step widgetic:ready fallback — applying overlay');
+					markPreviewWidgetReady();
+				}, 1500);
+			}
 			scheduleFitPreviewToArea();
 		}
 	}
@@ -2124,9 +2377,7 @@
 	}
 
 	function clampPanelWidth(w: number): number {
-		if (typeof window === 'undefined') return Math.min(DETAILS_PANEL_MAX_WIDTH, w);
-		const maxWidth = Math.min(DETAILS_PANEL_MAX_WIDTH, window.innerWidth - 24);
-		return Math.max(DETAILS_PANEL_MIN_WIDTH, Math.min(w, maxWidth));
+		return Math.max(DETAILS_PANEL_MIN_WIDTH, Math.min(w, DETAILS_PANEL_MAX_WIDTH));
 	}
 
 	function clampPanelHeight(h: number): number {
@@ -2195,8 +2446,8 @@
 	}
 
 	/**
-	 * Park the panel beside a canvas widget shape: right if the shape is left of
-	 * the canvas viewport center, otherwise left. Caps at 600×800 (or smaller).
+	 * Park the panel to the right of a canvas widget shape. May overlay the
+	 * shape Props panel. Can hang halfway outside the viewport.
 	 */
 	export function positionBesideShape(shapeRect: {
 		left: number;
@@ -2217,41 +2468,20 @@
 			return;
 		}
 
-		const pad = 8;
-		const viewLeft = shapeRect.viewportLeft;
-		const viewRight = shapeRect.viewportLeft + shapeRect.viewportWidth;
-		const availableWidth = Math.max(DETAILS_PANEL_MIN_WIDTH, shapeRect.viewportWidth - pad * 2);
-		detailsPanelWidth = clampPanelWidth(Math.min(DETAILS_PANEL_MAX_WIDTH, availableWidth));
-		detailsPanelHeight = clampPanelHeight(
-			Math.min(DETAILS_PANEL_MAX_HEIGHT, shapeRect.viewportHeight - pad * 2),
-		);
-
-		const shapeCenterX = shapeRect.left + shapeRect.width / 2;
-		const viewCenterX = shapeRect.viewportLeft + shapeRect.viewportWidth / 2;
-		const openOnRight = shapeCenterX < viewCenterX;
-		if (openOnRight) {
-			detailsPanelX = shapeRect.left + shapeRect.width + DETAILS_PANEL_SHAPE_GAP;
-			if (detailsPanelX + detailsPanelWidth > viewRight - pad) {
-				detailsPanelX = Math.max(viewLeft + pad, viewRight - pad - detailsPanelWidth);
-			}
-		} else {
-			detailsPanelX = shapeRect.left - DETAILS_PANEL_SHAPE_GAP - detailsPanelWidth;
-			if (detailsPanelX < viewLeft + pad) {
-				detailsPanelX = viewLeft + pad;
-			}
-		}
+		const gap = DETAILS_PANEL_SHAPE_GAP;
+		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_MAX_WIDTH);
+		detailsPanelHeight = clampPanelHeight(DETAILS_PANEL_MAX_HEIGHT);
 
-		const maxY = window.innerHeight - detailsPanelHeight - pad;
-		detailsPanelY = Math.min(
-			maxY,
-			Math.max(detailsPanelTopOffset, shapeRect.top),
-		);
+		const x = shapeRect.left + shapeRect.width + gap;
+		const pos = clampDetailsPanelPosition(x, Math.max(detailsPanelTopOffset, shapeRect.top));
+		detailsPanelX = pos.x;
+		detailsPanelY = pos.y;
 		console.log('[WidgetDetails] Positioned beside shape', {
-			openOnRight,
 			x: Math.round(detailsPanelX),
 			y: Math.round(detailsPanelY),
 			w: detailsPanelWidth,
 			h: detailsPanelHeight,
+			shapeLeft: Math.round(shapeRect.left),
 		});
 	}
 
@@ -2273,10 +2503,7 @@
 		const width = twoCol?.clientWidth || detailsPanelWidth || DETAILS_PANEL_DEFAULT_WIDTH;
 		if (width <= 0) return;
 		const deltaPercent = ((e.clientX - columnResizeStartX) / width) * 100;
-		leftColPercent = Math.min(
-			LEFT_COL_MAX_PERCENT,
-			Math.max(LEFT_COL_MIN_PERCENT, columnResizeStartPercent + deltaPercent)
-		);
+		leftColPercent = clampLeftColPercent(columnResizeStartPercent + deltaPercent);
 		// Keep preview iframe inside the shrinking right column (avoid clipped "cut off" widgets).
 		requestAnimationFrame(() => {
 			clampPreviewToArea();
@@ -2363,15 +2590,27 @@
 		window.removeEventListener('blur', stopFn);
 	}
 
-	function startDetailsResize(e: MouseEvent) {
+	let detailsResizeEdge: 'se' | 'sw' | 'e' | 'w' | 's' = 'se';
+	let detailsResizeStartPanelX = 0;
+	let detailsResizeStartPanelY = 0;
+
+	function startDetailsResize(e: MouseEvent, edge: 'se' | 'sw' | 'e' | 'w' | 's' = 'se') {
 		e.preventDefault();
 		e.stopPropagation();
 		isResizingDetails = true;
+		detailsResizeEdge = edge;
 		detailsResizeStartX = e.clientX;
 		detailsResizeStartY = e.clientY;
 		detailsResizeStartWidth = detailsPanelWidth;
 		detailsResizeStartHeight = detailsPanelHeight || getDefaultDetailsPanelHeight();
-		document.body.style.cursor = 'nwse-resize';
+		detailsResizeStartPanelX = detailsPanelX;
+		detailsResizeStartPanelY = detailsPanelY;
+		const cursor =
+			edge === 'e' || edge === 'w' ? 'ew-resize'
+			: edge === 's' ? 'ns-resize'
+			: edge === 'sw' ? 'nesw-resize'
+			: 'nwse-resize';
+		document.body.style.cursor = cursor;
 		document.body.style.userSelect = 'none';
 		window.addEventListener('mousemove', onDetailsResize);
 		addGlobalStopListeners(stopDetailsResize);
@@ -2381,10 +2620,46 @@
 		if (!isResizingDetails) return;
 		const deltaX = e.clientX - detailsResizeStartX;
 		const deltaY = e.clientY - detailsResizeStartY;
-		const maxWidth = window.innerWidth - detailsPanelX - 20;
-		const maxHeight = window.innerHeight - detailsPanelY - 20;
-		detailsPanelWidth = Math.min(maxWidth, Math.max(DETAILS_PANEL_MIN_WIDTH, detailsResizeStartWidth + deltaX));
-		detailsPanelHeight = Math.min(maxHeight, Math.max(DETAILS_PANEL_MIN_HEIGHT, detailsResizeStartHeight + deltaY));
+		const minW = DETAILS_PANEL_MIN_WIDTH;
+		const minH = DETAILS_PANEL_MIN_HEIGHT;
+		const maxRight = window.innerWidth - 8;
+		const maxBottom = window.innerHeight - 8;
+
+		let nextW = detailsResizeStartWidth;
+		let nextH = detailsResizeStartHeight;
+		let nextX = detailsResizeStartPanelX;
+		let nextY = detailsResizeStartPanelY;
+
+		if (detailsResizeEdge === 'e' || detailsResizeEdge === 'se') {
+			nextW = detailsResizeStartWidth + deltaX;
+		}
+		if (detailsResizeEdge === 'w' || detailsResizeEdge === 'sw') {
+			nextW = detailsResizeStartWidth - deltaX;
+			nextX = detailsResizeStartPanelX + deltaX;
+		}
+		if (detailsResizeEdge === 's' || detailsResizeEdge === 'se' || detailsResizeEdge === 'sw') {
+			nextH = detailsResizeStartHeight + deltaY;
+		}
+
+		nextW = Math.max(minW, nextW);
+		nextH = Math.max(minH, nextH);
+		if (detailsResizeEdge === 'w' || detailsResizeEdge === 'sw') {
+			nextX = detailsResizeStartPanelX + (detailsResizeStartWidth - nextW);
+			if (nextX < 8) {
+				nextW -= (8 - nextX);
+				nextX = 8;
+			}
+		}
+		if (nextX + nextW > maxRight) nextW = maxRight - nextX;
+		if (nextY + nextH > maxBottom) nextH = maxBottom - nextY;
+
+		detailsPanelWidth = nextW;
+		detailsPanelHeight = nextH;
+		detailsPanelX = nextX;
+		detailsPanelY = nextY;
+		if (!previewColumnCollapsed) {
+			leftColPercent = clampLeftColPercent(leftColPercent);
+		}
 	}
 
 	function stopDetailsResize() {
@@ -2403,14 +2678,16 @@
 
 	function clampDetailsPanelPosition(x: number, y: number): { x: number; y: number } {
 		if (typeof window === 'undefined') return { x, y };
-		const pad = 8;
 		const panelH = detailsPanelHeight || getDefaultDetailsPanelHeight();
 		const panelW = detailsPanelWidth || DETAILS_PANEL_DEFAULT_WIDTH;
+		const minVisibleX = Math.max(120, panelW * 0.5);
+		const minVisibleY = Math.max(160, panelH * 0.5);
 		const minTop = detailsPanelTopOffset;
-		const maxTop = Math.max(minTop, window.innerHeight - Math.min(panelH, window.innerHeight - pad) - pad);
-		const maxLeft = Math.max(pad, window.innerWidth - Math.min(panelW, window.innerWidth - pad) - pad);
+		const minX = minVisibleX - panelW;
+		const maxX = window.innerWidth - minVisibleX;
+		const maxTop = Math.max(minTop, window.innerHeight - minVisibleY);
 		return {
-			x: Math.min(maxLeft, Math.max(pad, x)),
+			x: Math.min(maxX, Math.max(minX, x)),
 			y: Math.min(maxTop, Math.max(minTop, y)),
 		};
 	}
@@ -2847,16 +3124,28 @@
 {#if selectedWidgetId}
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="widget-details-floating-panel pointer-events-auto fixed overflow-hidden
-		{showWidgetDetails ? 'flex flex-col' : 'hidden'}
+	class="widget-details-floating-shell pointer-events-none fixed overflow-visible {showWidgetDetails ? '' : 'hidden'}"
+	style="left: {detailsPanelX}px; top: {detailsPanelY}px; width: {detailsPanelWidth}px; z-index: {panelZIndex};
+			height: {detailsPanelHeight ? detailsPanelHeight + 'px' : `calc(100vh - ${detailsPanelTopOffset + detailsPanelBottomMargin}px)`};"
+>
+	<button
+		type="button"
+		onclick={handleCloseButtonClick}
+		onmousedown={(e) => e.stopPropagation()}
+		onpointerdown={(e) => e.stopPropagation()}
+		class="widget-details-close-bt pointer-events-auto absolute -top-2.5 -right-2.5 z-30 w-7 h-7 flex items-center justify-center rounded-full bg-white border border-gray-300 shadow-md hover:bg-red-50 hover:border-red-300 hover:text-red-600 text-gray-500 cursor-pointer transition-colors text-sm"
+		title="Close widget details"
+	>
+		✕
+	</button>
+<div
+	class="widget-details-floating-panel pointer-events-auto relative flex flex-col h-full w-full
 		{fillViewport
-			? 'bg-white rounded-none border-x border-b border-t-0 ring-0 shadow-none'
-			: 'bg-white/95 backdrop-blur-sm shadow-2xl rounded-xl border'}
+			? 'bg-white rounded-none border-x border-b border-t-0 ring-0 shadow-none overflow-hidden'
+			: 'bg-white/95 backdrop-blur-sm shadow-2xl rounded-xl border overflow-hidden'}
 		{isFocusedPanel
 			? (fillViewport ? 'border-blue-400' : 'border-blue-400 ring-2 ring-blue-200/80')
 			: 'border-gray-300 opacity-[0.97]'}"
-	style="left: {detailsPanelX}px; top: {detailsPanelY}px; width: {detailsPanelWidth}px; z-index: {panelZIndex};
-			height: {detailsPanelHeight ? detailsPanelHeight + 'px' : `calc(100vh - ${detailsPanelTopOffset + detailsPanelBottomMargin}px)`};"
 	onmousedown={handlePanelFocusRequest}
 >
 	<!-- Widget Details Top Bar — title, steps, and close on one row -->
@@ -2866,7 +3155,7 @@
 			onpointerdown={startDetailsDrag}
 		>
 			<span
-				class="widget-details-name pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 max-w-[22%] truncate text-xs font-medium text-gray-600"
+				class="widget-details-name pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 max-w-[28%] truncate text-sm font-bold text-gray-800"
 				title={selectedWidget?.name || ''}
 			>
 				{selectedWidget?.name || (isDraftConvertPanel ? 'Widget Draft' : 'Widget')}
@@ -2925,7 +3214,7 @@
 				</div>
 			</div>
 
-			<div class="widget-details-debug-buttons flex items-center gap-1.5 shrink-0">
+			<div class="widget-details-debug-buttons flex items-center gap-1.5 shrink-0 pr-1">
 				<button
 					type="button"
 					onclick={() => previewColumnCollapsed ? expandPreviewColumn() : collapsePreviewColumn()}
@@ -2939,23 +3228,13 @@
 				>
 					{previewColumnCollapsed ? 'Open Preview' : 'Close Preview'}
 				</button>
-				<button
-					type="button"
-					onclick={handleCloseButtonClick}
-					onmousedown={(e) => e.stopPropagation()}
-					onpointerdown={(e) => e.stopPropagation()}
-					class="widget-details-close-bt w-6 h-6 flex items-center justify-center rounded-lg hover:bg-gray-200 text-gray-500 hover:text-gray-700 cursor-pointer transition-colors text-sm"
-					title="Close widget details"
-				>
-					✕
-				</button>
 			</div>
 		</div>
 	</div>
 
 	<!-- Widget Details Content: Two-column layout -->
-	<div class="widget-details-content-wrapper relative m-2.5 min-w-0 min-h-0 flex-1">
-	<div class="widget-details-two-col flex h-full min-h-0 gap-0">
+	<div class="widget-details-content-wrapper relative m-2.5 min-w-0 min-h-0 flex-1 overflow-x-hidden">
+	<div class="widget-details-two-col flex h-full min-h-0 min-w-0 gap-0 overflow-x-hidden">
 
 	<!-- ═══ LEFT COLUMN: Step Content (scrollable) ═══ -->
 	<div
@@ -2988,24 +3267,28 @@
 				Commit: <span class="font-mono font-medium text-gray-600" title={lastCommitId || ''}>{lastCommitId ? lastCommitId.substring(0, 8) : '—'}</span>
 			</span>
 			{#if lastPublishedVersion !== null}
-				<a href="/test-widget?widgetId={selectedWidgetId}&version={lastPublishedVersion}" target="_blank" rel="noopener noreferrer" class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-50 border border-emerald-200 text-emerald-600 hover:bg-emerald-100 transition-colors whitespace-nowrap" title="Open published widget v{lastPublishedVersion}">Live: v{lastPublishedVersion} ↗</a>
+				<a href="/test-widget?widgetId={selectedWidgetId}&version={lastPublishedVersion}" target="_blank" rel="noopener noreferrer" class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-600 border border-emerald-700 text-white hover:bg-emerald-700 transition-colors whitespace-nowrap cursor-pointer" title="Open published widget v{lastPublishedVersion}">Live: v{lastPublishedVersion} ↗</a>
 			{/if}
 		</div>
 	</div>
 
 	<!-- Scrollable step content -->
 	<div
-		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-b-lg {currentStep === 'edit' ? 'overflow-hidden' : 'overflow-hidden'}"
+		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-b-lg overflow-hidden overflow-x-hidden"
 		bind:this={contentContainerEl}
 	>
 	<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 gap-2 p-2 {currentStep === 'create' ? '' : 'hidden'}">
-			<slot name="code-generation" />
-			<slot name="publish-widget" />
+		<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-chat-ct flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin gap-2 p-2">
+				<slot name="code-generation" />
+			</div>
+			<div class="widget-details-create-publish-ct shrink-0 px-2 pb-2">
+				<slot name="publish-widget" />
+			</div>
 		</div>
-		<div class="widget-details-edit-step flex flex-col h-full min-h-0 overflow-hidden {currentStep === 'edit' ? '' : 'hidden'}">
+		<div class="widget-details-edit-step flex flex-col h-full min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin {currentStep === 'edit' ? '' : 'hidden'}">
 			<slot name="composition-editor" />
 		</div>
 		<div class="widget-details-embed-step flex flex-col gap-2 p-2 {currentStep === 'embed' ? '' : 'hidden'}">
@@ -3138,7 +3421,8 @@
 				<div class="widget-preview-fallback relative flex items-center justify-center h-full rounded-lg bg-gray-50 overflow-hidden">
 					{#if isGeneratingCode || previewLoading}
 						<GenerateLoader
-							title={isGeneratingCode ? 'Generating code…' : 'Building preview…'}
+							title={isGeneratingCode ? 'Generating code…' : 'Loading preview…'}
+							subtitle=""
 							size="md"
 						/>
 					{:else if previewError === 'DRAFT_PANEL'}
@@ -3190,6 +3474,17 @@
 								</div>
 							{/if}
 						</div>
+					{:else if lastGenerationFailed}
+						<div class="widget-preview-generation-error flex flex-col items-center justify-center text-center p-4">
+							<div class="text-3xl mb-2">⚠️</div>
+							<div class="font-medium text-sm text-red-600 mb-1">Code generation failed</div>
+							<div class="text-xs max-w-[220px] text-gray-600 mb-3">{lastGenerationError || 'Fix the prompt or attachments, then retry.'}</div>
+							<button
+								type="button"
+								onclick={() => { dispatch('generateNow', { widgetId: selectedWidgetId }); }}
+								class="generate-now-btn px-3 py-1.5 text-xs rounded border border-green-500 text-green-700 bg-white hover:bg-green-50 cursor-pointer font-medium"
+							>▶ Retry</button>
+						</div>
 					{:else if isLoadingDirectPreviewUrl || previewLoading}
 						<GenerateLoader title="Building Preview…" subtitle="Compiling widget code…" size="md" />
 					{:else}
@@ -3252,7 +3547,7 @@
 	</div> <!-- end of widget-details-content-wrapper -->
 
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-10 group" onmousedown={startDetailsResize} title="Resize panel">
+	<div class="widget-details-resize-se absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-20 group" onmousedown={(e) => startDetailsResize(e, 'se')} title="Resize panel">
 		<svg class="w-3 h-3 absolute bottom-0.5 right-0.5 text-gray-400 group-hover:text-gray-600 transition-colors" viewBox="0 0 6 6" fill="currentColor">
 			<circle cx="5" cy="1" r="0.7"/>
 			<circle cx="3" cy="3" r="0.7"/>
@@ -3262,6 +3557,26 @@
 			<circle cx="5" cy="5" r="0.7"/>
 		</svg>
 	</div>
+	{#if !fillViewport}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-sw absolute bottom-0 left-0 w-4 h-4 cursor-nesw-resize z-20 group" onmousedown={(e) => startDetailsResize(e, 'sw')} title="Resize panel">
+		<svg class="w-3 h-3 absolute bottom-0.5 left-0.5 text-gray-400 group-hover:text-gray-600 transition-colors rotate-90" viewBox="0 0 6 6" fill="currentColor">
+			<circle cx="5" cy="1" r="0.7"/>
+			<circle cx="3" cy="3" r="0.7"/>
+			<circle cx="5" cy="3" r="0.7"/>
+			<circle cx="1" cy="5" r="0.7"/>
+			<circle cx="3" cy="5" r="0.7"/>
+			<circle cx="5" cy="5" r="0.7"/>
+		</svg>
+	</div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-e absolute top-8 bottom-4 right-0 w-1.5 cursor-ew-resize z-20 hover:bg-blue-400/30" onmousedown={(e) => startDetailsResize(e, 'e')} title="Resize width"></div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-w absolute top-8 bottom-4 left-0 w-1.5 cursor-ew-resize z-20 hover:bg-blue-400/30" onmousedown={(e) => startDetailsResize(e, 'w')} title="Resize width"></div>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="widget-details-resize-s absolute bottom-0 left-4 right-4 h-1.5 cursor-ns-resize z-20 hover:bg-blue-400/30" onmousedown={(e) => startDetailsResize(e, 's')} title="Resize height"></div>
+	{/if}
+</div>
 </div>
 {/if}