@widgetic/creator 0.3.58 → 0.3.60

package/dist/components/WidgetDetails.svelte

@@ -763,7 +763,11 @@
 	}
 	let showPreviewModal = false;
 	let previewModalRef: HTMLDivElement | null = null;
-	let widgetPreviewComponentRef: { getResizeLimits?: () => { maxWidth: number; maxHeight: number }; fitToContainer?: () => void } | undefined;
+	let widgetPreviewComponentRef: {
+		getResizeLimits?: () => { maxWidth: number; maxHeight: number };
+		fitToContainer?: () => void;
+		resetPreviewPosition?: () => void;
+	} | undefined;
 	let previewIframe: HTMLIFrameElement | null = null;
 	let isLoadingDirectPreviewUrl = false;
 	let previewFetchRetryCount = 0;
@@ -925,27 +929,18 @@
 	const LEFT_COL_MAX_PERCENT = 62;
 	const COL_RESIZER_PX = 10;
 	const PREVIEW_COL_MIN_PX = 420;
-	/** Chat-first layout: preview column starts collapsed and opens on generate. */
+	/** Chat-first: panel preview column is hidden (W3 canvas live preview is primary). */
+	const SHOW_PANEL_PREVIEW_COLUMN = false;
+	/** Chat-first layout: preview column stays collapsed until the user opens it (W3 canvas shows live preview). */
 	let previewColumnCollapsed = true;
 	let lastAutoExpandForGenerating = false;
 	let widthBeforePreviewExpand = 0;
-	$: if (isGeneratingCode && !lastAutoExpandForGenerating) {
-		lastAutoExpandForGenerating = true;
-		if (previewColumnCollapsed) expandPreviewColumn();
-	}
+	// Do not auto-expand the right preview column — canvas WidgetShape iframes are the live preview.
 	$: 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();
+	$: if (!SHOW_PANEL_PREVIEW_COLUMN) {
+		previewColumnCollapsed = true;
 	}
 
 	function maxLeftColPercent(): number {
@@ -974,6 +969,7 @@
 	}
 
 	function expandPreviewColumn() {
+		if (!SHOW_PANEL_PREVIEW_COLUMN) return;
 		if (!previewColumnCollapsed) return;
 		previewColumnCollapsed = false;
 		leftColPercent = clampLeftColPercent(LEFT_COL_DEFAULT_PERCENT);
@@ -982,7 +978,25 @@
 			detailsPanelX = Math.max(8, window.innerWidth - 8 - detailsPanelWidth);
 		}
 		console.log('[WidgetDetails] Open Preview — panel width', detailsPanelWidth);
-		tick().then(() => requestAnimationFrame(() => fitPreviewToArea()));
+		tick().then(() => requestAnimationFrame(async () => {
+			// Load panel preview only when the user opens the column (avoid wasted Worker/CDN requests).
+			if (selectedWidgetId && !iframeSrc && !showPreviewModal) {
+				try {
+					if (await loadPublishedPreviewForCurrentStep()) {
+						fitPreviewToArea();
+						return;
+					}
+					if (lastCommitId || lastPublishedVersion !== null || normalizeRepositoryId(selectedWidget) || currentRepositoryId) {
+						previewLoading = true;
+						await runPreviewLoadPipeline(selectedWidgetId);
+						previewLoadedForWidgetId = selectedWidgetId;
+					}
+				} catch (err) {
+					console.warn('[WidgetDetails] Deferred preview load on expand failed', err);
+				}
+			}
+			fitPreviewToArea();
+		}));
 	}
 
 	let detailsPanelX = -1;
@@ -1256,6 +1270,14 @@
 			return;
 		}
 
+		// Chat-first: skip panel Worker/CDN preview while the right column is closed (W3 canvas overlays handle live view).
+		if (previewColumnCollapsed && !showPreviewModal) {
+			previewLoading = false;
+			previewError = null;
+			console.log('[WidgetDetails] Preview column collapsed — skipping panel preview network');
+			return;
+		}
+
 		if (await loadPublishedPreviewForCurrentStep()) {
 			return;
 		}
@@ -2019,7 +2041,8 @@
 		stopPreviewTokenAutoRefresh();
 		// console.log('[TokenAutoRefresh] Started - checking every', TOKEN_CHECK_INTERVAL_MS / 1000, 'seconds');
 		previewTokenRefreshInterval = setInterval(async () => {
-			const isPreviewVisible = showPreviewModal || (showWidgetDetails && inlinePanelView === 'preview');
+			const isPreviewVisible = showPreviewModal
+				|| (showWidgetDetails && !previewColumnCollapsed && inlinePanelView === 'preview');
 			if (!isPreviewVisible || !lastPreviewUrlFetchTime || !directPreviewUrl) return;
 			const tokenAge = Date.now() - lastPreviewUrlFetchTime;
 			if (tokenAge >= PREVIEW_TOKEN_REFRESH_MS) {
@@ -2536,7 +2559,9 @@
 			);
 			return;
 		}
-		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
+		detailsPanelWidth = clampPanelWidth(
+			previewColumnCollapsed ? DETAILS_PANEL_MIN_WIDTH : DETAILS_PANEL_DEFAULT_WIDTH
+		);
 		detailsPanelHeight = getDefaultDetailsPanelHeight();
 	}
 
@@ -2583,7 +2608,8 @@
 	}
 
 	/**
-	 * Center Widget Details in the canvas viewport (X and Y), clamped on-screen.
+	 * Park the panel beside a canvas widget shape: right if the shape is left of
+	 * viewport center, otherwise left. Chat-first width when preview is collapsed.
 	 */
 	export function positionBesideShape(shapeRect: {
 		left: number;
@@ -2596,32 +2622,55 @@
 		viewportHeight: number;
 	} | null): void {
 		if (typeof window === 'undefined') return;
+		previewColumnCollapsed = true;
 		resetDetailsPanelSize();
 		_hasBeenOpenedOnce = true;
 		if (!shapeRect) {
 			centerDetailsPanel();
-			// console.log('[WidgetDetails] No shape rect — centered floating panel', detailsPanelWidth, detailsPanelHeight);
+			console.log('[WidgetDetails] No shape rect — centered floating panel', detailsPanelWidth, detailsPanelHeight);
 			return;
 		}
 
-		detailsPanelWidth = clampPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
-		detailsPanelHeight = clampPanelHeight(DETAILS_PANEL_MAX_HEIGHT);
+		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(
+			previewColumnCollapsed
+				? DETAILS_PANEL_MIN_WIDTH
+				: Math.min(DETAILS_PANEL_MAX_WIDTH, availableWidth)
+		);
+		detailsPanelHeight = clampPanelHeight(
+			Math.min(DETAILS_PANEL_MAX_HEIGHT, shapeRect.viewportHeight - pad * 2),
+		);
 
-		const viewportLeft = shapeRect.viewportLeft ?? 0;
-		const viewportWidth = shapeRect.viewportWidth || window.innerWidth;
-		const viewportTop = shapeRect.viewportTop ?? detailsPanelTopOffset;
-		const viewportHeight = shapeRect.viewportHeight || (window.innerHeight - viewportTop);
+		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 x = Math.round(viewportLeft + (viewportWidth - detailsPanelWidth) / 2);
-		const y = Math.round(viewportTop + Math.max(0, (viewportHeight - detailsPanelHeight) / 2));
-		const pos = clampDetailsPanelPosition(x, y);
-		detailsPanelX = pos.x;
-		detailsPanelY = pos.y;
-		console.log('[WidgetDetails] Centered in canvas viewport', {
+		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,
+			previewCollapsed: previewColumnCollapsed,
 		});
 	}
 
@@ -2668,6 +2717,8 @@
 	let _hasBeenOpenedOnce = false;
 	export function openWidgetDetails() {
 		if (showWidgetDetails) return;
+		previewColumnCollapsed = true;
+		hasAutoOpenedPreview = false;
 		resetDetailsPanelSize();
 		if (fillViewport || (!_hasBeenOpenedOnce && (detailsPanelX < 0 || detailsPanelY < 0))) {
 			centerDetailsPanel();
@@ -2676,7 +2727,7 @@
 		showWidgetDetails = true;
 		dispatch('widgetDetailsToggle', { open: true });
 
-		// Clamp preview after DOM is laid out
+		// Clamp preview after DOM is laid out (no-op while column collapsed)
 		tick().then(() => {
 			requestAnimationFrame(() => {
 				fitPreviewToArea();
@@ -2959,6 +3010,7 @@
 	/** Expand preview to fill the available panel (fit-to-area). */
 	function fitPreviewToArea() {
 		widgetPreviewComponentRef?.fitToContainer?.();
+		widgetPreviewComponentRef?.resetPreviewPosition?.();
 	}
 
 	// Clamp preview to available stage inside WidgetPreview (handles + dimension badge padding)
@@ -3064,8 +3116,8 @@
 		previewLoading = false;
 	}
 
-	// Stop token auto-refresh when no preview is visible
-	$: if (!showPreviewModal && !(showWidgetDetails && inlinePanelView === 'preview')) {
+	// Stop token auto-refresh when no preview is visible (collapsed column counts as hidden)
+	$: if (!showPreviewModal && !(showWidgetDetails && !previewColumnCollapsed && inlinePanelView === 'preview')) {
 		stopPreviewTokenAutoRefresh();
 	}
 
@@ -3444,9 +3496,16 @@
 			{/if}
 
 			<div
-				class="widget-details-debug-buttons relative z-[1] ml-auto flex items-center shrink-0"
+				class="widget-details-header-actions relative z-[1] ml-auto flex items-center gap-2 shrink-0"
 				bind:this={widgetDetailsDebugButtonsEl}
 			>
+				<div class="widget-details-header-meta flex items-center gap-2 shrink-0 min-w-0">
+					<slot name="header-meta" />
+					<div class="widget-info-version-history-slot relative z-20 shrink-0">
+						<slot name="version-history" />
+					</div>
+				</div>
+				{#if SHOW_PANEL_PREVIEW_COLUMN}
 				<HoverTooltip text={previewColumnCollapsed ? 'Open live preview' : 'Close live preview'}>
 				<button
 					type="button"
@@ -3474,12 +3533,13 @@
 					{/if}
 				</button>
 				</HoverTooltip>
+				{/if}
 			</div>
 		</div>
 	</div>
 
 	<!-- Widget Details Content: Two-column layout -->
-	<div class="widget-details-content-wrapper relative m-2.5 min-w-[460px] min-h-0 flex-1 overflow-hidden">
+	<div class="widget-details-content-wrapper relative m-0 min-w-[460px] min-h-0 flex-1 overflow-hidden">
 	<div class="widget-details-two-col flex h-full min-h-0 min-w-[460px] gap-0 overflow-hidden">
 
 	<!-- ═══ LEFT COLUMN: Step Content (scrollable) ═══ -->
@@ -3487,43 +3547,13 @@
 		class="widget-details-left-col flex flex-col min-w-[460px] min-h-0 overflow-hidden relative"
 		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>
+	<div class="widget-details-left-border absolute inset-y-0 left-0 right-0 border border-gray-300 rounded-none pointer-events-none z-10"></div>
 
 	{#if selectedWidgetId}
 	<div class="widget-details-left-stack relative z-0 flex flex-col h-full min-h-0 min-w-[460px] overflow-hidden">
-	<!-- Sticky Widget Info Bar (always visible above scrollable content) -->
-	<div class="widget-info-sticky-bar relative 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-20 overflow-visible">
-		<div class="widget-info-name flex items-center min-w-0 gap-1 text-sm text-gray-700">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<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'}
-				<span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 animate-pulse">Saving...</span>
-			{:else if saveStatus === 'saved'}
-				<span class="text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">Saved</span>
-			{:else if saveStatus === 'error'}
-				<span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-700">Save Error</span>
-			{/if}
-			{#if debugMode}
-			<span class="text-[10px] text-gray-500">
-				Commit: <span class="font-mono font-medium text-gray-600" title={lastCommitId || ''}>{lastCommitId ? lastCommitId.substring(0, 8) : '—'}</span>
-			</span>
-			{/if}
-			<div class="widget-info-version-history-slot relative z-20 shrink-0">
-				<slot name="version-history" />
-			</div>
-		</div>
-	</div>
-
 	<!-- Scrollable step content -->
 	<div
-		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-b-lg overflow-hidden overflow-x-hidden"
+		class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-none 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">
@@ -3561,7 +3591,7 @@
 
 	</div> <!-- end of widget-details-left-col -->
 
-	{#if previewColumnCollapsed}
+	{#if SHOW_PANEL_PREVIEW_COLUMN && 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"
@@ -3572,7 +3602,7 @@
 			<span class="widget-details-preview-expand-label inline-block rotate-180" style="writing-mode: vertical-rl;">Preview</span>
 		</button>
 	</div>
-	{:else}
+	{:else if SHOW_PANEL_PREVIEW_COLUMN}
 	<!-- 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"
@@ -3645,6 +3675,7 @@
 						mode="controlled"
 						enableResize={true}
 						resizeMode="concentric"
+						defaultStageAlign="center"
 						autoFitStage={showPreviewModal}
 						src={iframeSrc || getFallbackPreviewUrl()}
 						displayUrl={directPreviewUrl || iframeSrc}

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

@@ -191,6 +191,7 @@ declare const WidgetDetails: $$__sveltets_2_IsomorphicComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'header-meta': {};
     'version-history': {};
     'code-generation-models': {};
     'code-generation-status': {};