@widgetic/creator 0.3.49 → 0.3.50

package/dist/components/EditableName.svelte

@@ -65,8 +65,8 @@
 	ondblclick={() => startEditing()}
 >
 	<input
-		class="editable-name-input font-semibold rounded px-1 py-0.5 text-sm outline-none transition-colors {isEditing ? 'border border-blue-400 bg-white focus:ring-1 focus:ring-blue-500' : 'border border-transparent bg-transparent cursor-default'}"
-		style="min-width: 60px; flex: 1 1 auto; {!isEditing ? 'pointer-events: none;' : ''}"
+		class="editable-name-input min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap font-semibold rounded px-1 py-0.5 text-sm outline-none transition-colors {isEditing ? 'border border-blue-400 bg-white focus:ring-1 focus:ring-blue-500' : 'border border-transparent bg-transparent cursor-default'}"
+		style="flex: 1 1 0%; {!isEditing ? 'pointer-events: none;' : ''}"
 		type="text"
 		value={isEditing ? inputValue : (name || placeholder)}
 		readonly={!isEditing}

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,71 @@
 	$: 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;
+	/** 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 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 = Math.min(
+			LEFT_COL_MAX_PERCENT,
+			Math.max(LEFT_COL_MIN_PERCENT, (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 +1022,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 +1095,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 +1181,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,
@@ -2043,20 +2118,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 +2156,7 @@
 			return;
 		}
 		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
-		detailsPanelHeight = 0;
+		detailsPanelHeight = getDefaultDetailsPanelHeight();
 	}
 
 	export function centerDetailsPanel() {
@@ -2083,10 +2168,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();
@@ -2134,7 +2302,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 +2320,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 +2329,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 });
 		}
@@ -2691,19 +2862,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-[22%] truncate text-xs font-medium text-gray-600"
+				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 +2883,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 +2901,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,13 +2919,26 @@
 								? '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">
+				<button
+					type="button"
+					onclick={() => previewColumnCollapsed ? expandPreviewColumn() : collapsePreviewColumn()}
+					onmousedown={(e) => e.stopPropagation()}
+					onpointerdown={(e) => e.stopPropagation()}
+					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>
 				<button
 					type="button"
 					onclick={handleCloseButtonClick}
@@ -2777,7 +2960,7 @@
 	<!-- ═══ 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 +2968,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,13 +2995,13 @@
 
 	<!-- 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 {currentStep === 'edit' ? 'overflow-hidden' : 'overflow-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 overflow-hidden gap-2 p-2 {currentStep === 'create' ? '' : 'hidden'}">
 			<slot name="code-generation" />
 			<slot name="publish-widget" />
 		</div>
@@ -2838,6 +3018,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"
@@ -2949,7 +3141,14 @@
 							title={isGeneratingCode ? 'Generating code…' : 'Building preview…'}
 							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
@@ -3031,6 +3230,7 @@
 
 	</div> <!-- end of widget-details-right-content -->
 	</div> <!-- end of widget-details-right-col -->
+	{/if}
 
 	</div> <!-- end of widget-details-two-col -->
 
@@ -3067,7 +3267,7 @@
 
 <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 +3324,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>

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

@@ -147,12 +147,22 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     startTokenAutoRefreshPublic?: () => void;
     fetchDirectPreviewUrlPublic?: () => Promise<string | null>;
     centerDetailsPanel?: () => void;
+    keepPanelInViewport?: () => void;
+    positionBesideShape?: (shapeRect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null) => void;
     openWidgetDetails?: () => void;
     closeWidgetDetails?: (options?: {
         silent?: boolean;
     }) => void;
 }, {
-    widgetRename: CustomEvent<any>;
     fixErrors: CustomEvent<any>;
     retryRepository: CustomEvent<any>;
     generateNow: CustomEvent<any>;
@@ -226,6 +236,17 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
     startTokenAutoRefreshPublic: () => void;
     fetchDirectPreviewUrlPublic: () => Promise<string | null>;
     centerDetailsPanel: () => void;
+    keepPanelInViewport: () => void;
+    positionBesideShape: (shapeRect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null) => void;
     openWidgetDetails: () => void;
     closeWidgetDetails: (options?: {
         silent?: boolean;

package/dist/utils/operationStream.js

@@ -19,6 +19,10 @@ export function streamOperationUpdates(operationId, options) {
         let abortController = null;
         let reader = null;
         const cleanup = () => {
+            if (watchdogTimer) {
+                clearTimeout(watchdogTimer);
+                watchdogTimer = null;
+            }
             try {
                 reader?.cancel();
             }
@@ -42,6 +46,18 @@ export function streamOperationUpdates(operationId, options) {
             else
                 reject(value);
         };
+        // Watchdog: if no frame arrives for a while (proxy dropped the stream,
+        // server stalled), give up on SSE and let the caller fall back to
+        // polling GET /operations/:id — the terminal event then always lands.
+        const WATCHDOG_TIMEOUT_MS = 45000;
+        let watchdogTimer = null;
+        const armWatchdog = () => {
+            if (watchdogTimer)
+                clearTimeout(watchdogTimer);
+            watchdogTimer = setTimeout(() => {
+                settle('reject', new Error('Operation stream idle — falling back to polling'));
+            }, WATCHDOG_TIMEOUT_MS);
+        };
         const run = async () => {
             abortController = new AbortController();
             // Propagate caller aborts into the fetch request.
@@ -68,12 +84,15 @@ export function streamOperationUpdates(operationId, options) {
             reader = response.body.getReader();
             const decoder = new TextDecoder();
             let buffer = '';
+            armWatchdog();
             while (true) {
                 const { done, value } = await reader.read();
                 if (done)
                     break;
+                armWatchdog();
                 buffer += decoder.decode(value, { stream: true });
-                // SSE frames are `data: {...}\n\n`
+                // SSE frames are `data: {...}\n\n`; keepalive comment frames carry
+                // no data line and are skipped.
                 let frameEnd = buffer.indexOf('\n\n');
                 while (frameEnd !== -1) {
                     const frame = buffer.slice(0, frameEnd);

package/package.json

@@ -1,17 +1,17 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.49",
+	"version": "0.3.50",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",
 		"svelte": "^5.25.0",
-		"@widgetic/api-sdk": "*",
-		"@widgetic/canvas": "^0.5.3",
-		"@widgetic/cache-layer": "^0.1.1",
-		"@widgetic/chat": "^0.1.3",
-		"@widgetic/design-system": ">=0.3.0",
-		"@widgetic/editor": "^4.0.0",
-		"@widgetic/file-browser": "^0.5.16"
+		"@widgetic/api-sdk": "^1.0.10",
+		"@widgetic/canvas": "^0.5.4",
+		"@widgetic/cache-layer": "^0.1.2",
+		"@widgetic/chat": "^0.1.4",
+		"@widgetic/design-system": "^0.5.8",
+		"@widgetic/editor": "^4.0.1",
+		"@widgetic/file-browser": "^0.5.17"
 	},
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -89,13 +89,13 @@
 		"vite": "^6.2.6",
 		"vite-imagetools": "^7.0.4",
 		"vitest": "^2.0.0",
-		"@widgetic/api-sdk": "*",
-		"@widgetic/canvas": "^0.5.3",
-		"@widgetic/cache-layer": "^0.1.1",
-		"@widgetic/chat": "^0.1.3",
-		"@widgetic/design-system": ">=0.3.0",
-		"@widgetic/editor": "^4.0.0",
-		"@widgetic/file-browser": "^0.5.16"
+		"@widgetic/api-sdk": "^1.0.10",
+		"@widgetic/canvas": "^0.5.4",
+		"@widgetic/cache-layer": "^0.1.2",
+		"@widgetic/chat": "^0.1.4",
+		"@widgetic/design-system": "^0.5.8",
+		"@widgetic/editor": "^4.0.1",
+		"@widgetic/file-browser": "^0.5.17"
 	},
 	"dependencies": {
 		"@codesandbox/sandpack-react": "^2.19.9",