@widgetic/creator 0.3.58 → 0.3.59

package/dist/CreatorApp.svelte

@@ -447,6 +447,7 @@
 	 */
 	import SelectorDropdown from './components/SelectorDropdown.svelte';
 	import type { DropdownItem } from './components/SelectorDropdown.svelte';
+	import WidgetShapeLivePreviews from './components/WidgetShapeLivePreviews.svelte';
 
 	// WIDGET DETAILS COMPONENT — lazy-loaded to reduce peak build memory
 	let WidgetDetails: any;
@@ -473,6 +474,10 @@
 
 	let WidgeticCanvas: any;
 	let canvasRef: any;
+	/** HTML iframe overlays over Fabric WidgetShapes (W3). */
+	let widgetShapeLivePreviewsRef: { sync?: () => void } | null = null;
+	/** Selected WidgetShape id for chrome highlight (from Fabric selection). */
+	let canvasSelectedWidgetShapeId: string | null = null;
 	let widgetDetailsModulePromise: Promise<any> | null = null;
 
 	function loadWidgetDetailsModule(): Promise<any> {
@@ -8996,6 +9001,48 @@ Requirements:
 		return resolvePublishedWidgetUrl(widgetId, version, jsPath);
 	}
 
+	/** Widget Builder origin for canvas shape iframes (mirrors WidgetDetails). */
+	function widgetBuilderPreviewBaseUrl(): string {
+		const publicBase = (
+			widgetBuilderUrl ||
+			import.meta.env.VITE_WIDGET_BUILDER_URL ||
+			import.meta.env.PUBLIC_WIDGET_BUILDER_URL ||
+			'https://wbuilder.widgetic.com'
+		).replace(/\/+$/, '');
+		if (import.meta.env.DEV && publicBase.includes('wbuilder.widgetic.com')) {
+			return '/__widget_builder__';
+		}
+		return publicBase;
+	}
+
+	/**
+	 * Live preview URL for a canvas WidgetShape overlay.
+	 * Prefer published CDN when available; else Worker /preview when code exists.
+	 * Returns null → screenshot-only fallback on the Fabric shape.
+	 */
+	function resolveWidgetShapeLivePreviewUrl(widgetId: string): string | null {
+		if (!widgetId) return null;
+		const published = getPanelEditPreviewUrl(widgetId);
+		if (published) return published;
+
+		const widget = getWidgetById(widgetId);
+		if (!widget) return null;
+		const ps = getPanelDisplayState(widgetId);
+		const hasCode = !!(ps.lastCommitId || loadCommitIdForWidget(widgetId));
+		if (!hasCode) return null;
+
+		return `${widgetBuilderPreviewBaseUrl()}/preview/${widgetId}`;
+	}
+
+	function syncWidgetShapeLivePreviews(): void {
+		try {
+			canvasSelectedWidgetShapeId = canvasRef?.getSelectedWidgetShapeId?.() ?? null;
+			widgetShapeLivePreviewsRef?.sync?.();
+		} catch (err) {
+			console.warn('[CreatorApp] WidgetShape live preview sync failed', err);
+		}
+	}
+
 	function getPanelEmbedPreviewUrl(widgetId: string): string | null {
 		const base = getPanelEditPreviewUrl(widgetId);
 		if (!base) return null;
@@ -11298,6 +11345,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			if (selectedWidget?.id && !didForceCreateNewWidget) {
 				placeSelectedWidgetShapeOnCanvas();
 			}
+			syncWidgetShapeLivePreviews();
 			return;
 		}
 		const { loaded, widgetIds: widgetIdsOnCanvas } = await tryLoadCanvasState();
@@ -11306,6 +11354,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 			if (!isCanvasStateLoaded) {
 				scheduleCanvasHydrateRetry('canvas ready before canvasId');
 			}
+			syncWidgetShapeLivePreviews();
 			return;
 		}
 		await syncWidgetsWithCanvas(widgetIdsOnCanvas);
@@ -11318,6 +11367,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		} else if (isConvertOrDraftPanelOpen()) {
 			// console.log('[CreatorApp] Skip primary shape select — convert/draft panel is open');
 		}
+		syncWidgetShapeLivePreviews();
 	}
 
 	/**
@@ -12550,6 +12600,7 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 		onWidgetRename={handleWidgetRename}
 		onRefreshScreenshot={handleRefreshScreenshot}
 		onSetPrimaryWidget={handleSetPrimaryWidget}
+		onAfterRender={syncWidgetShapeLivePreviews}
 		getWidgetName={getWidgetNameById}
 		isWidgetKnown={isWidgetKnownById}
 		onNonWidgetSelected={() => {
@@ -12574,6 +12625,24 @@ $: if (codeGenerationPrompt && selectedWidgetId && promptLoadedForWidgetId === s
 	<!-- FLOATING PANELS OVERLAY (pointer-events-none container, each panel is pointer-events-auto) -->
 		<div class="floating-panels-overlay absolute inset-0 z-2003 pointer-events-none">
 
+			<!-- W3: live iframe + drag bar on WidgetShapes (iframe interactive; body drag locked) -->
+			<WidgetShapeLivePreviews
+				bind:this={widgetShapeLivePreviewsRef}
+				getRects={() => canvasRef?.listWidgetShapeScreenRects?.() ?? []}
+				resolveUrl={resolveWidgetShapeLivePreviewUrl}
+				selectedWidgetId={canvasSelectedWidgetShapeId}
+				onTranslate={(widgetId, dx, dy) => {
+					canvasRef?.translateWidgetShapeByScreen?.(widgetId, dx, dy);
+				}}
+				onSelectShape={(widgetId) => {
+					canvasRef?.selectWidgetShapeById?.(widgetId);
+					canvasSelectedWidgetShapeId = widgetId;
+				}}
+				onOpenChat={(widgetId) => {
+					void openWidgetDetailsPanel(widgetId);
+				}}
+			/>
+
 			<!-- ═══ PANEL 2: Widgets Panel — debug + showWidgetsList (site passes false) ═══ -->
 			{#if debugMode && showWidgetsList}
 			<!-- svelte-ignore a11y-no-static-element-interactions -->

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();
 	}
 
@@ -3447,6 +3499,7 @@
 				class="widget-details-debug-buttons relative z-[1] ml-auto flex items-center shrink-0"
 				bind:this={widgetDetailsDebugButtonsEl}
 			>
+				{#if SHOW_PANEL_PREVIEW_COLUMN}
 				<HoverTooltip text={previewColumnCollapsed ? 'Open live preview' : 'Close live preview'}>
 				<button
 					type="button"
@@ -3474,6 +3527,7 @@
 					{/if}
 				</button>
 				</HoverTooltip>
+				{/if}
 			</div>
 		</div>
 	</div>
@@ -3561,7 +3615,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 +3626,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 +3699,7 @@
 						mode="controlled"
 						enableResize={true}
 						resizeMode="concentric"
+						defaultStageAlign="center"
 						autoFitStage={showPreviewModal}
 						src={iframeSrc || getFallbackPreviewUrl()}
 						displayUrl={directPreviewUrl || iframeSrc}

package/dist/components/WidgetShapeLivePreviews.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	/**
+	 * Live iframe + chrome over Fabric WidgetShapes (W3).
+	 * Body drag is locked on the shape; move via the top drag bar so the iframe stays interactive.
+	 */
+	let className = '';
+	export { className as class };
+	export let style = '';
+
+	export let enabled = true;
+	/** Screen-space boxes for widget shapes currently on the canvas. */
+	export let getRects:
+		| (() => Array<{ widgetId: string; left: number; top: number; width: number; height: number }>)
+		| null = null;
+	/** Resolve a live preview URL for a widget (CDN published or Worker preview). */
+	export let resolveUrl: ((widgetId: string) => string | null) | null = null;
+	/** Currently selected WidgetShape id (highlights chrome). */
+	export let selectedWidgetId: string | null = null;
+	/** Translate shape by screen-pixel delta. */
+	export let onTranslate:
+		| ((widgetId: string, dxScreen: number, dyScreen: number) => void)
+		| null = null;
+	/** Select the Fabric WidgetShape (e.g. when pressing the drag bar). */
+	export let onSelectShape: ((widgetId: string) => void) | null = null;
+	/** Open Widget Details / chat for this widget. */
+	export let onOpenChat: ((widgetId: string) => void) | null = null;
+
+	const DRAG_BAR_H = 28;
+	const BAR_SHAPE_GAP = 4;
+
+	type ShapeRect = {
+		widgetId: string;
+		left: number;
+		top: number;
+		width: number;
+		height: number;
+		src: string;
+	};
+
+	let overlays: ShapeRect[] = [];
+	let draggingWidgetId: string | null = null;
+
+	export function sync(): void {
+		if (!enabled || !getRects || !resolveUrl) {
+			overlays = [];
+			return;
+		}
+		const next: ShapeRect[] = [];
+		for (const rect of getRects() || []) {
+			if (!rect?.widgetId) continue;
+			const src = resolveUrl(rect.widgetId);
+			if (!src) continue;
+			next.push({
+				widgetId: rect.widgetId,
+				left: rect.left,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height,
+				src,
+			});
+		}
+		overlays = next;
+	}
+
+	function startShapeDrag(event: PointerEvent, widgetId: string) {
+		const target = event.target as HTMLElement | null;
+		if (target?.closest('button, a, input')) return;
+		event.preventDefault();
+		event.stopPropagation();
+		onSelectShape?.(widgetId);
+		draggingWidgetId = widgetId;
+		const startX = event.clientX;
+		const startY = event.clientY;
+		let lastX = startX;
+		let lastY = startY;
+
+		function onMove(e: PointerEvent) {
+			const dx = e.clientX - lastX;
+			const dy = e.clientY - lastY;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			if (dx === 0 && dy === 0) return;
+			onTranslate?.(widgetId, dx, dy);
+		}
+
+		function endDrag() {
+			draggingWidgetId = null;
+			document.removeEventListener('pointermove', onMove);
+			document.removeEventListener('pointerup', endDrag);
+			document.removeEventListener('pointercancel', endDrag);
+			document.body.style.removeProperty('user-select');
+			document.body.style.removeProperty('cursor');
+			console.log('[WidgetShapeLivePreviews] Drag end', widgetId.substring(0, 8));
+		}
+
+		document.body.style.userSelect = 'none';
+		document.body.style.cursor = 'grabbing';
+		document.addEventListener('pointermove', onMove);
+		document.addEventListener('pointerup', endDrag);
+		document.addEventListener('pointercancel', endDrag);
+		console.log('[WidgetShapeLivePreviews] Drag start', widgetId.substring(0, 8));
+	}
+
+	function handleOpenChat(event: MouseEvent, widgetId: string) {
+		event.preventDefault();
+		event.stopPropagation();
+		onSelectShape?.(widgetId);
+		onOpenChat?.(widgetId);
+	}
+</script>
+
+{#if enabled && overlays.length > 0}
+	<div class="widget-shape-live-previews-ct pointer-events-none {className}" {style}>
+		{#each overlays as overlay (overlay.widgetId)}
+			{@const isSelected = selectedWidgetId === overlay.widgetId}
+			{@const isDragging = draggingWidgetId === overlay.widgetId}
+			{@const chromeTop = overlay.top - DRAG_BAR_H - BAR_SHAPE_GAP}
+			<div
+				class="widget-shape-live-chrome-ct fixed"
+				style="left: {overlay.left}px; top: {chromeTop}px; width: {overlay.width}px; height: {DRAG_BAR_H + BAR_SHAPE_GAP + overlay.height}px; z-index: 1;"
+			>
+				<!-- Drag bar sits between rotation control and the shape top stroke -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="widget-shape-drag-bar pointer-events-auto absolute left-0 right-0 top-0 flex h-7 items-center gap-1 rounded-t-md border border-b-0 bg-white/95 px-1.5 shadow-sm select-none
+						{isSelected ? 'border-blue-400' : 'border-gray-300'}"
+					style="height: {DRAG_BAR_H}px; cursor: grab;"
+					title="Drag widget"
+					onpointerdown={(e) => startShapeDrag(e, overlay.widgetId)}
+				>
+					<span class="widget-shape-drag-grip shrink-0 text-xs leading-none text-gray-400" aria-hidden="true">⠿</span>
+					{#if isSelected}
+						<span
+							class="widget-shape-edit-mode-badge shrink-0 rounded-full bg-amber-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-900"
+						>Edit mode</span>
+					{/if}
+					<div class="widget-shape-drag-bar-actions ml-auto flex items-center gap-0.5">
+						<button
+							type="button"
+							class="widget-shape-open-chat-bt flex h-6 items-center gap-1 rounded px-1.5 text-[10px] font-medium text-gray-600 hover:bg-gray-100 hover:text-forest-green cursor-pointer"
+							title="Open chat"
+							onclick={(e) => handleOpenChat(e, overlay.widgetId)}
+							onpointerdown={(e) => e.stopPropagation()}
+						>
+							Chat
+						</button>
+					</div>
+				</div>
+
+				<div
+					class="widget-shape-live-preview-frame pointer-events-none absolute left-0 right-0 overflow-visible
+						{isSelected ? 'ring-2 ring-blue-400/80 rounded-sm' : ''}"
+					style="top: {DRAG_BAR_H + BAR_SHAPE_GAP}px; height: {overlay.height}px;"
+				>
+					<!-- Inset so Fabric corner/rotate handles stay clickable around the edges -->
+					<iframe
+						class="widget-shape-live-preview-iframe pointer-events-auto absolute border-0 bg-white"
+						class:pointer-events-none={isDragging}
+						style="left: 8px; top: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); height: calc(100% - 16px);"
+						title="Live widget preview"
+						src={overlay.src}
+						tabindex="-1"
+						loading="lazy"
+						sandbox="allow-scripts allow-same-origin allow-forms"
+					></iframe>
+				</div>
+			</div>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,40 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WidgetShapeLivePreviews: $$__sveltets_2_IsomorphicComponent<{
+    /**
+         * Live iframe + chrome over Fabric WidgetShapes (W3).
+         * Body drag is locked on the shape; move via the top drag bar so the iframe stays interactive.
+         */ class?: string;
+    style?: string;
+    enabled?: boolean;
+    /** Screen-space boxes for widget shapes currently on the canvas. */ getRects?: (() => Array<{
+        widgetId: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }>) | null;
+    /** Resolve a live preview URL for a widget (CDN published or Worker preview). */ resolveUrl?: ((widgetId: string) => string | null) | null;
+    /** Currently selected WidgetShape id (highlights chrome). */ selectedWidgetId?: string | null;
+    /** Translate shape by screen-pixel delta. */ onTranslate?: ((widgetId: string, dxScreen: number, dyScreen: number) => void) | null;
+    /** Select the Fabric WidgetShape (e.g. when pressing the drag bar). */ onSelectShape?: ((widgetId: string) => void) | null;
+    /** Open Widget Details / chat for this widget. */ onOpenChat?: ((widgetId: string) => void) | null;
+    sync?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    sync: () => void;
+}, string>;
+type WidgetShapeLivePreviews = InstanceType<typeof WidgetShapeLivePreviews>;
+export default WidgetShapeLivePreviews;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/creator",
-	"version": "0.3.58",
+	"version": "0.3.59",
 	"type": "module",
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.0",