@widgetic/creator 0.3.51 → 0.3.54

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;
@@ -1005,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. */
@@ -1076,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(),
 			});
@@ -1085,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';
@@ -1140,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;
@@ -1197,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,
@@ -1242,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;
@@ -1337,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 });
@@ -1413,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;
@@ -1551,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';
@@ -1574,6 +1637,8 @@
 		if (!target || pendingPreviewMessages.length === 0) return;
 		for (const message of pendingPreviewMessages) {
 			target.postMessage(message, '*');
+			applyRichTextInPreviewIframe(message);
+			applyDesignOverlayInPreviewIframe(message);
 		}
 		pendingPreviewMessages = [];
 	}
@@ -1662,11 +1727,129 @@
 		});
 	}
 
+	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);
@@ -2194,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 {
@@ -2265,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;
@@ -2287,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),
 		});
 	}
 
@@ -2518,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)),
 		};
 	}
@@ -2962,16 +3124,28 @@
 {#if selectedWidgetId}
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="widget-details-floating-panel pointer-events-auto fixed
-		{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 overflow-hidden'
-			: 'bg-white/95 backdrop-blur-sm shadow-2xl rounded-xl border overflow-visible'}
+			: '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 -->
@@ -3058,17 +3232,6 @@
 		</div>
 	</div>
 
-	<button
-		type="button"
-		onclick={handleCloseButtonClick}
-		onmousedown={(e) => e.stopPropagation()}
-		onpointerdown={(e) => e.stopPropagation()}
-		class="widget-details-close-bt 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>
-
 	<!-- Widget Details Content: Two-column layout -->
 	<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">
@@ -3104,7 +3267,7 @@
 				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>
@@ -3117,9 +3280,13 @@
 	<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 justify-start overflow-y-auto overflow-x-hidden scrollbar-thin 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-y-auto overflow-x-hidden scrollbar-thin {currentStep === 'edit' ? '' : 'hidden'}">
 			<slot name="composition-editor" />
@@ -3254,7 +3421,7 @@
 				<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"
 						/>
@@ -3410,6 +3577,7 @@
 	<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}
 
 <style>

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

@@ -135,6 +135,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     setPreviewLoadingState?: (val: boolean) => void;
     getPreviewError?: () => string | null;
     setPreviewBuildError?: (message: string | null) => void;
+    retryPreviewIfEmpty?: () => Promise<void>;
     showNoCodeYetState?: () => void;
     startPreviewLoadingPublic?: () => void;
     sendMessageToPreview?: (message: Record<string, unknown>) => void;
@@ -224,6 +225,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     setPreviewLoadingState: (val: boolean) => void;
     getPreviewError: () => string | null;
     setPreviewBuildError: (message: string | null) => void;
+    retryPreviewIfEmpty: () => Promise<void>;
     showNoCodeYetState: () => void;
     startPreviewLoadingPublic: () => void;
     sendMessageToPreview: (message: Record<string, unknown>) => void;

package/dist/pageHelpers.js

@@ -20,6 +20,9 @@ export function sanitizePreviewBuildError(raw) {
     if (/failed to fetch|fetch failed/i.test(text)) {
         return 'Could not reach the preview builder. Try Rebuild.';
     }
+    if (/is not a function/i.test(text)) {
+        return 'Preview rebuild is unavailable in this session. Try Rebuild or reload the page.';
+    }
     if (looksLikeHtmlErrorPage(text) || /error code:\s*1042/i.test(text)) {
         return 'Preview builder is unavailable. The widget code was saved — use Rebuild to compile it.';
     }
@@ -33,7 +36,7 @@ export function isInfrastructurePreviewError(raw) {
         return false;
     if (looksLikeHtmlErrorPage(raw))
         return true;
-    return /preview builder is unavailable|could not reach the preview builder|unexpected error page/i.test(sanitizePreviewBuildError(raw));
+    return /preview builder is unavailable|could not reach the preview builder|unexpected error page|is not a function|requested resource was not found|rebuild is unavailable/i.test(sanitizePreviewBuildError(raw));
 }
 export function normalizeErrorMessage(rawError) {
     let extracted = '';