@widgetic/creator 0.3.49 → 0.3.51

package/dist/components/WidgetDetails.svelte

@@ -31,7 +31,6 @@
 	import { userSession as userSessionStore } from '../stores/userSession.js';
 
 	import { WidgetPreview } from '@widgetic/editor';
-	import EditableName from './EditableName.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -272,6 +271,13 @@
 
 	$: hasWidgetCode = !!lastCommitId || lastPublishedVersion !== null;
 
+	/** Convert UX v2: draft panels (synthetic ids) have no widget/repo yet —
+	 *  show a friendly draft hint instead of the repo-setup loader. */
+	$: isDraftConvertPanel = !!selectedWidgetId?.startsWith('draft_convert_');
+	$: if (isDraftConvertPanel && previewError === 'NO_CODE_YET') {
+		previewError = 'DRAFT_PANEL';
+	}
+
 	/** Published widgets must never show the draft "No Code Yet" empty state. */
 	$: if (hasWidgetCode && previewError === 'NO_CODE_YET') {
 		previewError = lastPublishedVersion !== null
@@ -851,14 +857,87 @@
 	$: detailsPanelTopOffset = panelTopOffset ?? legacyTopOffset;
 	$: detailsPanelBottomMargin = panelBottomMargin ?? legacyBottomMargin;
 
-	const DETAILS_PANEL_DEFAULT_WIDTH = 1100;
-	const DETAILS_PANEL_MIN_WIDTH = 720;
-	const DETAILS_PANEL_MIN_HEIGHT = 500;
+	const DETAILS_PANEL_DEFAULT_WIDTH = 600;
+	const DETAILS_PANEL_MAX_WIDTH = 600;
+	const DETAILS_PANEL_MAX_HEIGHT = 800;
+	const DETAILS_PANEL_MIN_WIDTH = 320;
+	const DETAILS_PANEL_MIN_HEIGHT = 400;
 	const DETAILS_PANEL_FILL_INSET = 16;
+	const DETAILS_PANEL_SHAPE_GAP = 12;
 	/** Left column share of the two-col layout (chat / PropsEditor). */
 	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;
+	let widthBeforePreviewExpand = 0;
+	$: if (isGeneratingCode && !lastAutoExpandForGenerating) {
+		lastAutoExpandForGenerating = true;
+		if (previewColumnCollapsed) expandPreviewColumn();
+	}
+	$: if (!isGeneratingCode) {
+		lastAutoExpandForGenerating = false;
+	}
+	/** Open the live preview column once when this widget already has code (or a loaded iframe). */
+	$: if (
+		showWidgetDetails
+		&& !isDraftConvertPanel
+		&& previewColumnCollapsed
+		&& !hasAutoOpenedPreview
+		&& (hasWidgetCode || !!iframeSrc)
+	) {
+		hasAutoOpenedPreview = true;
+		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) {
+			detailsPanelWidth = widthBeforePreviewExpand;
+			widthBeforePreviewExpand = 0;
+			leftColPercent = LEFT_COL_DEFAULT_PERCENT;
+		}
+		console.log('[WidgetDetails] Preview column minimized, restored width', detailsPanelWidth);
+	}
+
+	function expandPreviewColumn() {
+		if (!previewColumnCollapsed) return;
+		widthBeforePreviewExpand = detailsPanelWidth;
+		previewColumnCollapsed = false;
+		const extraWidth = 420;
+		const maxRight = typeof window !== 'undefined' ? window.innerWidth - 8 : detailsPanelWidth;
+		const expandedWidth = widthBeforePreviewExpand + extraWidth;
+		const fittedWidth = Math.min(expandedWidth, Math.max(widthBeforePreviewExpand, maxRight - detailsPanelX));
+		detailsPanelWidth = Math.max(widthBeforePreviewExpand, fittedWidth);
+		const usable = Math.max(1, detailsPanelWidth);
+		leftColPercent = clampLeftColPercent((widthBeforePreviewExpand / usable) * 100);
+		console.log('[WidgetDetails] Preview column expanded', {
+			from: widthBeforePreviewExpand,
+			to: detailsPanelWidth,
+			leftColPercent,
+		});
+		tick().then(() => requestAnimationFrame(() => fitPreviewToArea()));
+	}
 
 	let detailsPanelX = -1;
 	let detailsPanelY = -1;
@@ -959,6 +1038,12 @@
 
 	/** Probe Worker / build-from-repo pipeline without resetting panel state. */
 	async function runPreviewLoadPipeline(widgetId: string): Promise<void> {
+		if (iframeSrc && previewLoadedForWidgetId === widgetId) {
+			previewBuildDeferred = false;
+			previewLoading = false;
+			console.log('[WidgetDetails] Preview already loaded, skipping pipeline:', widgetId.substring(0, 8));
+			return;
+		}
 		if (shouldDeferPreviewNetworkWork()) {
 			console.log('[WidgetDetails] Deferring preview load (background panel):', widgetId.substring(0, 8));
 			previewBuildDeferred = true;
@@ -1026,6 +1111,11 @@
 	/** Resume preview after a background panel receives focus. */
 	export async function resumeDeferredPreviewLoad(): Promise<void> {
 		if (!previewBuildDeferred || !selectedWidgetId) return;
+		if (iframeSrc && previewLoadedForWidgetId === selectedWidgetId) {
+			previewBuildDeferred = false;
+			console.log('[WidgetDetails] Skip deferred preview — already loaded for', selectedWidgetId.substring(0, 8));
+			return;
+		}
 		previewBuildDeferred = false;
 		await runPreviewLoadPipeline(selectedWidgetId);
 	}
@@ -1107,10 +1197,11 @@
 			return;
 		}
 
-		// Brand-new widget (no commit, not published): skip Worker HEAD / build-from-repo.
-		// Probing localhost:5173/__widget_builder__/preview/... only produces expected 404 noise.
+		// 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) {
+		if (!lastCommitId && lastPublishedVersion === null && !hasRepo) {
 			console.log('[WidgetDetails] No code yet — skipping Worker probe/build-from-repo', {
 				widgetId: widgetId?.substring(0, 8),
 				hasRepo,
@@ -1386,7 +1477,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 {
@@ -1515,19 +1608,65 @@
 			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);
+		});
+	}
+
 	/** 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);
 			return;
 		}
 		pendingPreviewMessages.push(message);
@@ -1869,9 +2008,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();
 		}
 	}
@@ -2043,20 +2188,30 @@
 	// ═══════════════════════════════════════════════════════════════════════
 
 	function getDefaultDetailsPanelHeight(): number {
-		if (typeof window === 'undefined') return 600;
-		return window.innerHeight - detailsPanelTopOffset - detailsPanelBottomMargin;
+		if (typeof window === 'undefined') return DETAILS_PANEL_MAX_HEIGHT;
+		const available = window.innerHeight - detailsPanelTopOffset - detailsPanelBottomMargin;
+		return Math.max(DETAILS_PANEL_MIN_HEIGHT, Math.min(DETAILS_PANEL_MAX_HEIGHT, available));
 	}
 
 	function clampPanelWidth(w: number): number {
-		if (typeof window === 'undefined') return w;
-		const maxWidth = window.innerWidth - 40;
+		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));
 	}
 
+	function clampPanelHeight(h: number): number {
+		if (typeof window === 'undefined') return Math.min(DETAILS_PANEL_MAX_HEIGHT, h);
+		const available = window.innerHeight - detailsPanelTopOffset - 16;
+		return Math.max(
+			DETAILS_PANEL_MIN_HEIGHT,
+			Math.min(h, Math.min(DETAILS_PANEL_MAX_HEIGHT, available)),
+		);
+	}
+
 	function resetDetailsPanelSize() {
 		if (typeof window === 'undefined') {
 			detailsPanelWidth = DETAILS_PANEL_DEFAULT_WIDTH;
-			detailsPanelHeight = 0;
+			detailsPanelHeight = DETAILS_PANEL_MAX_HEIGHT;
 			return;
 		}
 		if (fillViewport) {
@@ -2071,7 +2226,7 @@
 			return;
 		}
 		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
-		detailsPanelHeight = 0;
+		detailsPanelHeight = getDefaultDetailsPanelHeight();
 	}
 
 	export function centerDetailsPanel() {
@@ -2083,10 +2238,93 @@
 			return;
 		}
 		const cascade = panelCascadeIndex * 32;
-		detailsPanelX = Math.max(0, Math.round((window.innerWidth - detailsPanelWidth) / 2) + cascade);
+		detailsPanelX = Math.max(8, Math.round((window.innerWidth - detailsPanelWidth) / 2) + cascade);
 		detailsPanelY = detailsPanelTopOffset + cascade;
 	}
 
+	/** Keep the panel on-screen after a browser resize. Does not reset to default 600×800. */
+	export function keepPanelInViewport() {
+		if (typeof window === 'undefined') return;
+		if (fillViewport) {
+			resetDetailsPanelSize();
+			detailsPanelX = DETAILS_PANEL_FILL_INSET;
+			detailsPanelY = detailsPanelTopOffset;
+			return;
+		}
+		const maxW = Math.max(DETAILS_PANEL_MIN_WIDTH, window.innerWidth - 16);
+		const maxH = Math.max(
+			DETAILS_PANEL_MIN_HEIGHT,
+			window.innerHeight - detailsPanelTopOffset - 16,
+		);
+		if (detailsPanelWidth > maxW) detailsPanelWidth = maxW;
+		const currentH = detailsPanelHeight || getDefaultDetailsPanelHeight();
+		if (currentH > maxH) detailsPanelHeight = maxH;
+		const pos = clampDetailsPanelPosition(detailsPanelX, detailsPanelY);
+		detailsPanelX = pos.x;
+		detailsPanelY = pos.y;
+	}
+
+	/**
+	 * 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).
+	 */
+	export function positionBesideShape(shapeRect: {
+		left: number;
+		top: number;
+		width: number;
+		height: number;
+		viewportLeft: number;
+		viewportTop: number;
+		viewportWidth: number;
+		viewportHeight: number;
+	} | null): void {
+		if (typeof window === 'undefined') return;
+		resetDetailsPanelSize();
+		_hasBeenOpenedOnce = true;
+		if (!shapeRect) {
+			centerDetailsPanel();
+			console.log('[WidgetDetails] No shape rect — centered floating panel', detailsPanelWidth, detailsPanelHeight);
+			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 maxY = window.innerHeight - detailsPanelHeight - pad;
+		detailsPanelY = Math.min(
+			maxY,
+			Math.max(detailsPanelTopOffset, shapeRect.top),
+		);
+		console.log('[WidgetDetails] Positioned beside shape', {
+			openOnRight,
+			x: Math.round(detailsPanelX),
+			y: Math.round(detailsPanelY),
+			w: detailsPanelWidth,
+			h: detailsPanelHeight,
+		});
+	}
+
 	function startColumnResize(e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -2105,10 +2343,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();
@@ -2134,7 +2369,7 @@
 	export function openWidgetDetails() {
 		if (showWidgetDetails) return;
 		resetDetailsPanelSize();
-		if (fillViewport || !_hasBeenOpenedOnce || detailsPanelX < 0 || detailsPanelY < 0) {
+		if (fillViewport || (!_hasBeenOpenedOnce && (detailsPanelX < 0 || detailsPanelY < 0))) {
 			centerDetailsPanel();
 			_hasBeenOpenedOnce = true;
 		}
@@ -2152,7 +2387,6 @@
 		if (selectedWidgetId) {
 			if (iframeSrc && previewLoadedForWidgetId === selectedWidgetId) {
 				console.log('[WidgetDetails] Reopened with existing preview, no reload needed');
-				dispatch('buildFromRepoSuccess', { widgetId: selectedWidgetId, source: 'cached-preview' });
 				return;
 			}
 			loadWidget(selectedWidgetId);
@@ -2162,6 +2396,10 @@
 	export function closeWidgetDetails(options?: { silent?: boolean }) {
 		showWidgetDetails = false;
 		showPreviewModal = false;
+		// Next open should auto-expand preview again if the widget already has code.
+		hasAutoOpenedPreview = false;
+		previewColumnCollapsed = true;
+		widthBeforePreviewExpand = 0;
 		if (!options?.silent) {
 			dispatch('widgetDetailsToggle', { open: false, showWidgetDetails: false });
 		}
@@ -2192,15 +2430,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);
@@ -2210,10 +2460,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() {
@@ -2676,11 +2962,11 @@
 {#if selectedWidgetId}
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="widget-details-floating-panel pointer-events-auto fixed overflow-hidden
+	class="widget-details-floating-panel pointer-events-auto fixed
 		{showWidgetDetails ? 'flex flex-col' : 'hidden'}
 		{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-visible'}
 		{isFocusedPanel
 			? (fillViewport ? 'border-blue-400' : 'border-blue-400 ring-2 ring-blue-200/80')
 			: 'border-gray-300 opacity-[0.97]'}"
@@ -2691,19 +2977,18 @@
 	<!-- Widget Details Top Bar — title, steps, and close on one row -->
 	<div class="widget-details-header-ct flex flex-col shrink-0 bg-gray-100 border-b border-gray-200">
 		<div
-			class="widget-details-drag-bar relative flex items-center gap-2 px-3 py-1.5 cursor-grab active:cursor-grabbing select-none min-h-[40px] touch-none"
+			class="widget-details-drag-bar relative flex items-center justify-end gap-2 px-3 py-1.5 cursor-grab active:cursor-grabbing select-none min-h-[40px] touch-none flex-nowrap overflow-hidden"
 			onpointerdown={startDetailsDrag}
 		>
-			<h3 class="widget-details-title text-sm font-semibold text-gray-700 truncate min-w-0 max-w-[28%] shrink" title={selectedWidget?.name || 'Widget Details'}>
-				{selectedWidget?.name || 'Widget Details'}
-				{#if !isFocusedPanel}
-					<span class="text-gray-400 font-normal"> · bg</span>
-				{/if}
-			</h3>
-
-			<!-- Step Indicator (inline — same row as title) -->
-			<div class="widget-details-step-indicator-row flex flex-1 justify-center min-w-0 px-1">
-				<div class="widget-details-step-indicator flex items-center gap-1 flex-wrap justify-center">
+			<span
+				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')}
+			</span>
+			<!-- Step Indicator — centered; name is compact on the left (read-only, no rename) -->
+			<div class="widget-details-step-indicator-row pointer-events-none absolute left-1/2 -translate-x-1/2 flex justify-center px-1">
+				<div class="widget-details-step-indicator pointer-events-auto flex items-center gap-1 flex-nowrap justify-center whitespace-nowrap">
 				<!-- svelte-ignore a11y_consider_explicit_label -->
 				<button
 					type="button"
@@ -2713,7 +2998,7 @@
 							? 'bg-blue-100 text-blue-700 border border-blue-300 cursor-pointer'
 							: 'text-gray-600 hover:bg-gray-200 border border-transparent cursor-pointer'}"
 				>
-					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold {currentStep === 'create' ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-700'}">1</span>
+					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold leading-none {currentStep === 'create' ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-700'}">1</span>
 					<span class="step-label">Create</span>
 				</button>
 				<div class="step-connector w-4 h-px {canEditStep ? 'bg-gray-400' : 'bg-gray-200'}"></div>
@@ -2731,7 +3016,7 @@
 								? 'text-gray-600 hover:bg-gray-200 border border-transparent cursor-pointer'
 								: 'text-gray-300 border border-transparent cursor-default pointer-events-none'}"
 				>
-					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold {currentStep === 'edit' ? 'bg-blue-600 text-white' : canEditStep ? 'bg-gray-300 text-gray-700' : 'bg-gray-200 text-gray-400'}">2</span>
+					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold leading-none {currentStep === 'edit' ? 'bg-blue-600 text-white' : canEditStep ? 'bg-gray-300 text-gray-700' : 'bg-gray-200 text-gray-400'}">2</span>
 					<span class="step-label">Edit</span>
 				</button>
 				<div class="step-connector w-4 h-px {canEmbedStep ? 'bg-gray-400' : 'bg-gray-200'}"></div>
@@ -2749,35 +3034,49 @@
 								? 'text-gray-600 hover:bg-gray-200 border border-transparent cursor-pointer'
 								: 'text-gray-300 border border-transparent cursor-default pointer-events-none'}"
 				>
-					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold {currentStep === 'embed' ? 'bg-blue-600 text-white' : canEmbedStep ? 'bg-gray-300 text-gray-700' : 'bg-gray-200 text-gray-400'}">3</span>
+					<span class="step-number inline-flex items-center justify-center w-5 h-5 rounded-full text-[11px] font-bold leading-none {currentStep === 'embed' ? 'bg-blue-600 text-white' : canEmbedStep ? 'bg-gray-300 text-gray-700' : 'bg-gray-200 text-gray-400'}">3</span>
 					<span class="step-label">Embed</span>
 				</button>
 				</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={handleCloseButtonClick}
+					onclick={() => previewColumnCollapsed ? expandPreviewColumn() : collapsePreviewColumn()}
 					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"
+					class="widget-details-preview-toggle-bt h-6 min-w-[6.75rem] px-2 flex items-center justify-center rounded-lg text-[11px] font-medium cursor-pointer transition-colors whitespace-nowrap
+						{previewColumnCollapsed
+							? 'bg-white border border-gray-300 text-gray-600 hover:bg-gray-100'
+							: 'bg-blue-50 border border-blue-300 text-blue-700 hover:bg-blue-100'}"
+					title={previewColumnCollapsed ? 'Open live preview column' : 'Close live preview column'}
 				>
-					✕
+					{previewColumnCollapsed ? 'Open Preview' : 'Close Preview'}
 				</button>
 			</div>
 		</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">
-	<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
 		class="widget-details-left-col flex flex-col min-w-0 min-h-0 relative"
-		style="width: {leftColPercent}%; flex: 0 0 {leftColPercent}%;"
+		style="width: {previewColumnCollapsed ? 100 : leftColPercent}%; flex: 0 0 {previewColumnCollapsed ? 100 : leftColPercent}%;"
 	>
 	<div class="widget-details-left-border absolute inset-y-0 left-0 right-0 border border-gray-300 rounded-lg pointer-events-none z-10"></div>
 
@@ -2785,16 +3084,13 @@
 	<!-- Sticky Widget Info Bar (always visible above scrollable content) -->
 	<div class="widget-info-sticky-bar flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 rounded-t-lg shrink-0 gap-2 min-w-0 z-5">
 		<div class="widget-info-name flex items-center min-w-0 gap-1 text-sm text-gray-700">
-			<EditableName
-				name={selectedWidget?.name || ''}
-				placeholder="Unnamed"
-				tooltipText="Double-click to rename"
-				class="flex-1 min-w-0"
-				on:rename={({ detail }) => dispatch('widgetRename', { widgetId: selectedWidgetId, newName: detail.newName })}
-			/>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<span class="ml-1 text-[10px] font-mono text-gray-400 cursor-pointer hover:text-gray-600 shrink-0" title="Click to copy widget ID" onclick={() => { navigator.clipboard.writeText(selectedWidgetId); showToast('success', 'Widget ID copied', { duration: 2000 }); }}>(id: {selectedWidgetId.substring(0, 8)}…)</span>
+			<span
+				class="widget-id-label text-[11px] font-mono text-gray-500 cursor-pointer hover:text-gray-700 truncate"
+				title="Click to copy widget ID"
+				onclick={() => { navigator.clipboard.writeText(selectedWidgetId); showToast('success', 'Widget ID copied', { duration: 2000 }); }}
+			>Widget id: {selectedWidgetId}</span>
 		</div>
 		<div class="widget-info-meta flex items-center gap-2 shrink-0">
 			{#if saveStatus === 'saving'}
@@ -2815,17 +3111,17 @@
 
 	<!-- 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-y-auto'}"
+		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 gap-2 p-2 {currentStep === 'create' ? '' : 'hidden'}">
+		<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>
-		<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'}">
@@ -2838,6 +3134,18 @@
 
 	</div> <!-- end of widget-details-left-col -->
 
+	{#if previewColumnCollapsed}
+	<div class="widget-details-preview-expand-strip flex items-center justify-center w-8 shrink-0 border-l border-gray-200 bg-gray-50">
+		<button
+			type="button"
+			onclick={expandPreviewColumn}
+			class="widget-details-preview-expand-bt h-full w-full text-[10px] font-semibold text-gray-500 hover:text-forest-green hover:bg-gray-100 cursor-pointer"
+			title="Show live preview"
+		>
+			<span class="widget-details-preview-expand-label inline-block rotate-180" style="writing-mode: vertical-rl;">Preview</span>
+		</button>
+	</div>
+	{:else}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class="widget-details-col-resizer w-2.5 shrink-0 cursor-col-resize relative z-20 group"
@@ -2947,9 +3255,17 @@
 					{#if isGeneratingCode || previewLoading}
 						<GenerateLoader
 							title={isGeneratingCode ? 'Generating code…' : 'Building preview…'}
+							subtitle=""
 							size="md"
 						/>
-					{:else if previewError === 'NO_CODE_YET' && !hasWidgetCode}
+					{:else if previewError === 'DRAFT_PANEL'}
+					<div class="widget-preview-draft-hint 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-gray-700 mb-1">Sketch draft</div>
+						<div class="text-xs max-w-[240px] text-gray-500 mb-1">Your sketch is still on the canvas — keep editing it freely.</div>
+						<div class="text-xs max-w-[240px] text-gray-500">Send the prompt in chat to create the widget and generate code.</div>
+					</div>
+				{:else if previewError === 'NO_CODE_YET' && !hasWidgetCode}
 						<div class="widget-preview-no-code flex flex-col items-center justify-center text-center p-4">
 							{#if !normalizeRepositoryId(selectedWidget) && repositorySetupStatus !== 'failed'}
 								<GenerateLoader
@@ -2991,6 +3307,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}
@@ -3031,6 +3358,7 @@
 
 	</div> <!-- end of widget-details-right-content -->
 	</div> <!-- end of widget-details-right-col -->
+	{/if}
 
 	</div> <!-- end of widget-details-two-col -->
 
@@ -3052,7 +3380,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"/>
@@ -3062,12 +3390,31 @@
 			<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>
 {/if}
 
 <style>
 	.widget-details-left-content {
-		overflow-y: auto;
+		overflow: hidden;
 		overflow-x: hidden;
 		scrollbar-width: thin;
 		scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
@@ -3124,4 +3471,17 @@
 	:global(.widget-details-right-content .widget-preview-wrapper) {
 		overflow: visible !important;
 	}
+
+	.step-number {
+		line-height: 1;
+	}
+
+	/* Tab focus: hide DS/site orange ring inside Widget Details (buttons + links). */
+	.widget-details-floating-panel :global(button:focus),
+	.widget-details-floating-panel :global(button:focus-visible),
+	.widget-details-floating-panel :global(a:focus),
+	.widget-details-floating-panel :global(a:focus-visible) {
+		outline: none !important;
+		box-shadow: none !important;
+	}
 </style>