@widgetic/editor 4.0.3 → 4.0.5

package/dist/components/WidgetPreview.svelte

@@ -59,6 +59,17 @@
 	export let mobileViewportWidth: number = 390;
 	export let mobileViewportHeight: number = 667;
 	export let enableResize: boolean = false;
+	/** Drag only via the preview chrome header (keeps iframe interactive). */
+	export let enableDrag: boolean = false;
+	/** W×H number inputs in the chrome header, live-synced with resize. */
+	export let showDimensionInputs: boolean = false;
+	/**
+	 * concentric — always resize from center (widget-creator / Canvas).
+	 * corner — opposite corner fixed; hold Alt for concentric (composition page).
+	 */
+	export let resizeMode: 'concentric' | 'corner' = 'concentric';
+	/** Initial / reset placement inside the stage. */
+	export let defaultStageAlign: 'center' | 'right-half' = 'center';
 	/** Observe stage size and fill it (desktop modal) */
 	export let autoFitStage: boolean = false;
 	/** No padding/border on preview-content-container — matches widget-creator Edit panel */
@@ -87,32 +98,165 @@
 	const MIN_WIDTH = 120;
 	const MIN_HEIGHT = 80;
 	const HANDLE_MARGIN = 6;
-	/** Inset padding so resize handles (-4px) and dimension badge stay inside bounds */
-	const RESIZE_PAD_X = 8;
-	const RESIZE_PAD_TOP = 8;
-	const RESIZE_PAD_BOTTOM = 22;
+	/** Inset padding so resize handles stay inside bounds */
+	const RESIZE_PAD_X = 12;
+	const RESIZE_PAD_TOP = 12;
+	const RESIZE_PAD_BOTTOM = 12;
+	const PREVIEW_CHROME_HEADER_H = 36;
+	const PREVIEW_STROKE = '#3b82f6';
+	const PREVIEW_STROKE_ALT = '#f97316';
 	let isResizing = false;
+	let isDraggingPreview = false;
+	/** Alt held — keeps orange stroke on composition even after pointerup. */
+	let isAltKeyDown = false;
+	let previewShellLeft = 0;
+	let previewShellTop = 0;
+	let previewPositionReady = false;
+	let widthInputValue = '';
+	let heightInputValue = '';
 	let contentContainerEl: HTMLElement | null = null;
 	let resizeStageEl: HTMLElement | null = null;
 	let stageResizeObserver: ResizeObserver | null = null;
 
+	$: showPreviewChrome = enableDrag || showDimensionInputs;
+	$: chromeHeaderHeight = showPreviewChrome ? PREVIEW_CHROME_HEADER_H : 0;
+	$: if (resizeWidth != null) widthInputValue = String(Math.round(resizeWidth));
+	$: if (resizeHeight != null) heightInputValue = String(Math.round(resizeHeight));
+	$: showSymmetricalStroke = resizeMode === 'corner' && isAltKeyDown;
+	$: previewStrokeColor = showSymmetricalStroke ? PREVIEW_STROKE_ALT : PREVIEW_STROKE;
+
 	export function getResizeLimits(): { maxWidth: number; maxHeight: number } {
 		const stageEl = resizeStageEl ?? contentContainerEl;
+		const chromeH = showPreviewChrome ? PREVIEW_CHROME_HEADER_H : 0;
 		if (stageEl) {
 			return {
 				maxWidth: Math.max(MIN_WIDTH, stageEl.clientWidth),
-				maxHeight: Math.max(MIN_HEIGHT, stageEl.clientHeight),
+				maxHeight: Math.max(MIN_HEIGHT, stageEl.clientHeight - chromeH),
 			};
 		}
 		if (hasFixedBounds && boundsWidth != null && boundsHeight != null) {
 			return {
 				maxWidth: Math.max(MIN_WIDTH, boundsWidth - RESIZE_PAD_X * 2),
-				maxHeight: Math.max(MIN_HEIGHT, boundsHeight - RESIZE_PAD_TOP - RESIZE_PAD_BOTTOM),
+				maxHeight: Math.max(MIN_HEIGHT, boundsHeight - RESIZE_PAD_TOP - RESIZE_PAD_BOTTOM - chromeH),
 			};
 		}
 		return { maxWidth: 720, maxHeight: 420 };
 	}
 
+	function clampDimension(value: number, min: number, max: number): number {
+		return Math.max(min, Math.min(max, value));
+	}
+
+	function computeDefaultShellPosition(
+		stageWidth: number,
+		stageHeight: number,
+		shellWidth: number,
+		shellHeight: number
+	): { left: number; top: number } {
+		const maxLeft = Math.max(RESIZE_PAD_X, stageWidth - shellWidth - RESIZE_PAD_X);
+		const maxTop = Math.max(RESIZE_PAD_TOP, stageHeight - shellHeight - RESIZE_PAD_BOTTOM);
+		if (defaultStageAlign === 'right-half') {
+			const rightHalfCenterX = stageWidth * 0.75;
+			const left = clampDimension(rightHalfCenterX - shellWidth / 2, RESIZE_PAD_X, maxLeft);
+			const top = clampDimension((stageHeight - shellHeight) / 2, RESIZE_PAD_TOP, maxTop);
+			return { left, top };
+		}
+		const left = clampDimension((stageWidth - shellWidth) / 2, RESIZE_PAD_X, maxLeft);
+		const top = clampDimension((stageHeight - shellHeight) / 2, RESIZE_PAD_TOP, maxTop);
+		return { left, top };
+	}
+
+	/** Dock / reset preview shell to defaultStageAlign. */
+	export function resetPreviewPosition(): void {
+		const stageEl = resizeStageEl ?? contentContainerEl;
+		if (!stageEl || resizeWidth == null || resizeHeight == null) return;
+		if (stageEl.clientWidth < 40 || stageEl.clientHeight < 40) {
+			requestAnimationFrame(() => resetPreviewPosition());
+			return;
+		}
+		const shellWidth = resizeWidth;
+		const shellHeight = resizeHeight + chromeHeaderHeight;
+		const next = computeDefaultShellPosition(
+			stageEl.clientWidth,
+			stageEl.clientHeight,
+			shellWidth,
+			shellHeight
+		);
+		previewShellLeft = next.left;
+		previewShellTop = next.top;
+		previewPositionReady = true;
+		console.log('[WidgetPreview] Reset preview position', {
+			align: defaultStageAlign,
+			left: previewShellLeft,
+			top: previewShellTop,
+		});
+	}
+
+	function ensurePreviewPosition(): void {
+		if (previewPositionReady) return;
+		resetPreviewPosition();
+	}
+
+	function applyDimensionFromInput(dimension: 'width' | 'height', raw: string) {
+		const { maxWidth, maxHeight } = getResizeLimits();
+		const parsed = Number.parseInt(raw, 10);
+		if (!Number.isFinite(parsed)) return;
+		if (dimension === 'width') {
+			resizeWidth = clampDimension(parsed, MIN_WIDTH, maxWidth);
+			widthInputValue = String(Math.round(resizeWidth));
+		} else {
+			resizeHeight = clampDimension(parsed, MIN_HEIGHT, maxHeight);
+			heightInputValue = String(Math.round(resizeHeight));
+		}
+		if (resizeWidth != null && resizeHeight != null) {
+			dispatch('resize', { width: resizeWidth, height: resizeHeight });
+		}
+		console.log('[WidgetPreview] Dimension input', { dimension, value: parsed });
+	}
+
+	function startPreviewDrag(event: PointerEvent) {
+		if (!enableDrag || isResizing) return;
+		const target = event.target as HTMLElement | null;
+		if (target?.closest('input, button, a, label')) return;
+		event.preventDefault();
+		event.stopPropagation();
+		isDraggingPreview = true;
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const startLeft = previewShellLeft;
+		const startTop = previewShellTop;
+		const stageEl = resizeStageEl ?? contentContainerEl;
+		const shellWidth = resizeWidth ?? 0;
+		const shellHeight = (resizeHeight ?? 0) + chromeHeaderHeight;
+
+		function onPointerMove(e: PointerEvent) {
+			if (!stageEl) return;
+			const maxLeft = Math.max(RESIZE_PAD_X, stageEl.clientWidth - shellWidth - RESIZE_PAD_X);
+			const maxTop = Math.max(RESIZE_PAD_TOP, stageEl.clientHeight - shellHeight - RESIZE_PAD_BOTTOM);
+			previewShellLeft = clampDimension(startLeft + (e.clientX - startX), RESIZE_PAD_X, maxLeft);
+			previewShellTop = clampDimension(startTop + (e.clientY - startY), RESIZE_PAD_TOP, maxTop);
+		}
+
+		function endDrag() {
+			isDraggingPreview = false;
+			document.removeEventListener('pointermove', onPointerMove);
+			document.removeEventListener('pointerup', endDrag);
+			document.removeEventListener('pointercancel', endDrag);
+			document.body.style.removeProperty('user-select');
+			document.body.style.removeProperty('cursor');
+			console.log('[WidgetPreview] Preview drag end', {
+				left: previewShellLeft,
+				top: previewShellTop,
+			});
+		}
+
+		document.body.style.userSelect = 'none';
+		document.body.style.cursor = 'move';
+		document.addEventListener('pointermove', onPointerMove);
+		document.addEventListener('pointerup', endDrag);
+		document.addEventListener('pointercancel', endDrag);
+	}
+
 	/** Firefox/Chrome skip painting a cross-origin iframe that started at opacity 0 or inside a CSS filter until a reflow (opening DevTools). */
 	let iframePaintNudgeGeneration = 0;
 	export function nudgeIframePaint(): void {
@@ -475,22 +619,65 @@
 		event.preventDefault();
 		event.stopPropagation();
 		isResizing = true;
+		if (event.altKey) isAltKeyDown = true;
 		const startX = event.clientX;
 		const startY = event.clientY;
-
+		const startLeft = previewShellLeft;
+		const startTop = previewShellTop;
 		const { maxWidth, maxHeight } = getResizeLimits();
 		const startWidth = resizeWidth ?? maxWidth;
 		const startHeight = resizeHeight ?? maxHeight;
+		const alwaysConcentric = resizeMode === 'concentric';
 
 		function onPointerMove(e: PointerEvent) {
-			const deltaX = (e.clientX - startX) * signX * 2;
-			const deltaY = (e.clientY - startY) * signY * 2;
-			resizeWidth = Math.max(MIN_WIDTH, Math.min(maxWidth, startWidth + deltaX));
-			resizeHeight = Math.max(MIN_HEIGHT, Math.min(maxHeight, startHeight + deltaY));
+			if (e.altKey) isAltKeyDown = true;
+			const useConcentric = alwaysConcentric || isAltKeyDown || e.altKey;
+			const dx = e.clientX - startX;
+			const dy = e.clientY - startY;
+
+			if (useConcentric) {
+				const deltaW = signX !== 0 ? dx * signX * 2 : 0;
+				const deltaH = signY !== 0 ? dy * signY * 2 : 0;
+				const nextW = clampDimension(startWidth + deltaW, MIN_WIDTH, maxWidth);
+				const nextH = clampDimension(startHeight + deltaH, MIN_HEIGHT, maxHeight);
+				resizeWidth = nextW;
+				resizeHeight = nextH;
+				previewShellLeft = startLeft + (startWidth - nextW) / 2;
+				previewShellTop = startTop + (startHeight - nextH) / 2;
+			} else {
+				let nextW = startWidth;
+				let nextH = startHeight;
+				let nextLeft = startLeft;
+				let nextTop = startTop;
+
+				if (signX === -1) {
+					nextW = clampDimension(startWidth - dx, MIN_WIDTH, maxWidth);
+					nextLeft = startLeft + (startWidth - nextW);
+				} else if (signX === 1) {
+					nextW = clampDimension(startWidth + dx, MIN_WIDTH, maxWidth);
+				}
+
+				if (signY === -1) {
+					nextH = clampDimension(startHeight - dy, MIN_HEIGHT, maxHeight);
+					nextTop = startTop + (startHeight - nextH);
+				} else if (signY === 1) {
+					nextH = clampDimension(startHeight + dy, MIN_HEIGHT, maxHeight);
+				}
+
+				resizeWidth = nextW;
+				resizeHeight = nextH;
+				previewShellLeft = nextLeft;
+				previewShellTop = nextTop;
+			}
+
+			if (resizeWidth != null && resizeHeight != null) {
+				dispatch('resize', { width: resizeWidth, height: resizeHeight });
+			}
 		}
 
 		function endResize() {
 			isResizing = false;
+			// Keep orange stroke while Alt remains held (composition corner mode).
 			document.removeEventListener('pointermove', onPointerMove);
 			document.removeEventListener('pointerup', endResize);
 			document.removeEventListener('pointercancel', endResize);
@@ -502,7 +689,14 @@
 		}
 
 		document.body.style.userSelect = 'none';
-		document.body.style.cursor = 'nwse-resize';
+		document.body.style.cursor =
+			signX !== 0 && signY !== 0
+				? signX * signY > 0
+					? 'nwse-resize'
+					: 'nesw-resize'
+				: signX !== 0
+					? 'ew-resize'
+					: 'ns-resize';
 		document.addEventListener('pointermove', onPointerMove);
 		document.addEventListener('pointerup', endResize);
 		document.addEventListener('pointercancel', endResize);
@@ -510,6 +704,7 @@
 
 	$: if (enableResize && contentContainerEl && (resizeWidth != null || resizeHeight != null)) {
 		clampResizeToLimits();
+		ensurePreviewPosition();
 	}
 
 	$: if (autoFitStage && resizeStageEl) {
@@ -523,6 +718,27 @@
 
 	onMount(() => {
 		window.addEventListener('message', handleMessage);
+		const onAltDown = (e: KeyboardEvent) => {
+			if (e.key === 'Alt' || e.code === 'AltLeft' || e.code === 'AltRight') {
+				isAltKeyDown = true;
+			}
+		};
+		const onAltUp = (e: KeyboardEvent) => {
+			if (e.key === 'Alt' || e.code === 'AltLeft' || e.code === 'AltRight') {
+				isAltKeyDown = false;
+			}
+		};
+		const onWindowBlur = () => {
+			isAltKeyDown = false;
+		};
+		window.addEventListener('keydown', onAltDown);
+		window.addEventListener('keyup', onAltUp);
+		window.addEventListener('blur', onWindowBlur);
+		return () => {
+			window.removeEventListener('keydown', onAltDown);
+			window.removeEventListener('keyup', onAltUp);
+			window.removeEventListener('blur', onWindowBlur);
+		};
 	});
 
 	onDestroy(() => {
@@ -636,12 +852,66 @@
 		{:else if effectiveSrc || (mode === 'standalone' && isResolvingUrl)}
 			<div
 				bind:this={resizeStageEl}
-				class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-hidden flex items-center justify-center' : 'preview-resize-stage-ct relative flex items-center justify-center w-full h-full'}"
+				class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-hidden' : 'preview-resize-stage-ct relative flex items-center justify-center w-full h-full'}"
 			>
 			<div
-				class="preview-iframe-wrapper relative"
-				style="width: {resizeWidth ? resizeWidth + 'px' : '100%'}; height: {resizeHeight ? resizeHeight + 'px' : '100%'}; transition: {isResizing ? 'none' : 'width 0.2s, height 0.2s'};"
+				class="preview-iframe-shell relative flex flex-col {enableResize ? 'preview-iframe-shell-positioned' : ''}"
+				class:preview-iframe-shell-symmetrical={showSymmetricalStroke}
+				style="{enableResize
+					? `position: absolute; left: ${previewShellLeft}px; top: ${previewShellTop}px; width: ${resizeWidth ? resizeWidth + 'px' : '100%'};`
+					: `width: ${resizeWidth ? resizeWidth + 'px' : '100%'}; height: ${resizeHeight ? resizeHeight + 'px' : '100%'};`} transition: {isResizing || isDraggingPreview ? 'none' : 'width 0.2s, height 0.2s, left 0.15s, top 0.15s'};"
 			>
+				{#if showPreviewChrome}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="preview-chrome-header flex items-center gap-2 h-9 px-2 border border-b-0 rounded-t-md bg-white select-none {enableDrag ? 'cursor-move' : ''}"
+						style="border-color: {previewStrokeColor};"
+						onpointerdown={startPreviewDrag}
+					>
+						{#if enableDrag}
+							<span class="preview-chrome-drag-grip shrink-0 text-gray-400 text-xs leading-none" title="Drag preview" aria-hidden="true">⠿</span>
+						{/if}
+						<span class="preview-chrome-title text-[11px] font-semibold uppercase tracking-wide text-gray-500 shrink-0">Preview</span>
+						{#if showDimensionInputs}
+							<div class="preview-chrome-dimensions ml-auto flex items-center gap-1.5">
+								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
+									<span>W</span>
+									<input
+										type="number"
+										min={MIN_WIDTH}
+										class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
+										value={widthInputValue}
+										oninput={(e) => {
+											widthInputValue = e.currentTarget.value;
+											applyDimensionFromInput('width', e.currentTarget.value);
+										}}
+										onpointerdown={(e) => e.stopPropagation()}
+									/>
+								</label>
+								<span class="text-[10px] text-gray-400">×</span>
+								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
+									<span>H</span>
+									<input
+										type="number"
+										min={MIN_HEIGHT}
+										class="preview-dim-input w-14 h-6 rounded border border-gray-300 bg-white px-1 text-[11px] text-gray-800 focus:outline-none focus:border-blue-400 focus-visible:outline-none"
+										value={heightInputValue}
+										oninput={(e) => {
+											heightInputValue = e.currentTarget.value;
+											applyDimensionFromInput('height', e.currentTarget.value);
+										}}
+										onpointerdown={(e) => e.stopPropagation()}
+									/>
+								</label>
+							</div>
+						{/if}
+					</div>
+				{/if}
+
+				<div
+					class="preview-iframe-wrapper relative"
+					style="width: 100%; height: {resizeHeight ? resizeHeight + 'px' : '100%'};"
+				>
 				{#if showResizeHandles}
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<div class="preview-resize-handle preview-resize-handle-tl" onpointerdown={(e) => startResize(e, -1, -1)}></div>
@@ -653,7 +923,7 @@
 					<div class="preview-resize-handle preview-resize-handle-br" onpointerdown={(e) => startResize(e, 1, 1)}></div>
 				{/if}
 
-				{#if resizeWidth || resizeHeight}
+				{#if (resizeWidth || resizeHeight) && !showDimensionInputs}
 					<div
 						class="widget-preview-dimension-badge absolute left-1/2 -translate-x-1/2 text-[10px] bg-black/70 px-1.5 py-px rounded text-gray-300 select-none pointer-events-none z-20 whitespace-nowrap"
 						style="top: calc(100% + 4px);"
@@ -662,7 +932,10 @@
 					</div>
 				{/if}
 
-				<div class="preview-iframe-container relative w-full h-full overflow-hidden {compactChrome ? '' : showUrlBar || mode === 'controlled' || enableResize ? 'border border-gray-300' : ''}">
+				<div
+					class="preview-iframe-container relative w-full h-full overflow-hidden {compactChrome && !enableResize ? '' : showUrlBar || mode === 'controlled' || enableResize ? 'border' : ''}"
+					style={enableResize ? `border-color: ${previewStrokeColor}; border-radius: ${showPreviewChrome ? '0 0 6px 6px' : '6px'};` : ''}
+				>
 					{#if mode === 'standalone' && iframeError}
 						<div class="widget-preview-error-ct absolute inset-0 flex items-center justify-center bg-white z-10 rounded">
 							<div class="widget-preview-error-content-ct flex flex-col items-center gap-2 text-center px-4">
@@ -756,6 +1029,7 @@
 						<GenerateLoader overlay title="Generating code…" subtitle="" size="lg" />
 					{/if}
 				</div>
+				</div>
 			</div>
 			</div>
 
@@ -784,10 +1058,10 @@
 		{/if}
 	</div>
 
-	{#if isResizing}
+	{#if isResizing || isDraggingPreview}
 		<div
-			class="widget-preview-resize-guard-ct fixed inset-0 z-999999 cursor-nwse-resize"
-			style="background: transparent;"
+			class="widget-preview-resize-guard-ct fixed inset-0 z-999999"
+			style="background: transparent; cursor: {isDraggingPreview ? 'move' : 'nwse-resize'};"
 			aria-hidden="true"
 		></div>
 	{/if}
@@ -799,38 +1073,35 @@
 
 	.preview-resize-handle {
 		position: absolute;
-		width: 16px;
-		height: 16px;
+		width: 10px;
+		height: 10px;
 		z-index: 30;
-		border-radius: 2px;
-	}
-
-	.preview-resize-handle::before,
-	.preview-resize-handle::after {
-		content: '';
-		position: absolute;
-		background: #94a3b8;
+		box-sizing: border-box;
+		background: #ffffff;
+		border: 1.5px solid #3b82f6;
 		border-radius: 1px;
 	}
 
-	.preview-resize-handle-tl { top: -4px; left: -4px; cursor: nwse-resize; }
-	.preview-resize-handle-tl::before { top: 0; left: 0; width: 10px; height: 2px; }
-	.preview-resize-handle-tl::after  { top: 0; left: 0; width: 2px; height: 10px; }
-
-	.preview-resize-handle-tr { top: -4px; right: -4px; cursor: nesw-resize; }
-	.preview-resize-handle-tr::before { top: 0; right: 0; width: 10px; height: 2px; }
-	.preview-resize-handle-tr::after  { top: 0; right: 0; width: 2px; height: 10px; }
+	.preview-iframe-shell-symmetrical .preview-resize-handle,
+	.preview-iframe-shell-symmetrical .preview-iframe-container {
+		border-color: #f97316 !important;
+	}
 
-	.preview-resize-handle-bl { bottom: -4px; left: -4px; cursor: nesw-resize; }
-	.preview-resize-handle-bl::before { bottom: 0; left: 0; width: 10px; height: 2px; }
-	.preview-resize-handle-bl::after  { bottom: 0; left: 0; width: 2px; height: 10px; }
+	.preview-chrome-header button:focus,
+	.preview-chrome-header button:focus-visible,
+	.preview-chrome-header input:focus,
+	.preview-chrome-header input:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
 
-	.preview-resize-handle-br { bottom: -4px; right: -4px; cursor: nwse-resize; }
-	.preview-resize-handle-br::before { bottom: 0; right: 0; width: 10px; height: 2px; }
-	.preview-resize-handle-br::after  { bottom: 0; right: 0; width: 2px; height: 10px; }
+	.preview-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; }
+	.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; }
+	.preview-resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
+	.preview-resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; }
 
-	.preview-resize-handle:hover::before,
-	.preview-resize-handle:hover::after {
-		background: #64748b;
+	.preview-resize-handle:hover {
+		background: #eff6ff;
+		border-color: #2563eb;
 	}
 </style>

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

@@ -43,6 +43,13 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
     mobileViewportWidth?: number;
     mobileViewportHeight?: number;
     enableResize?: boolean;
+    /** Drag only via the preview chrome header (keeps iframe interactive). */ enableDrag?: boolean;
+    /** W×H number inputs in the chrome header, live-synced with resize. */ showDimensionInputs?: boolean;
+    /**
+         * concentric — always resize from center (widget-creator / Canvas).
+         * corner — opposite corner fixed; hold Alt for concentric (composition page).
+         */ resizeMode?: "concentric" | "corner";
+    /** Initial / reset placement inside the stage. */ defaultStageAlign?: "center" | "right-half";
     /** Observe stage size and fill it (desktop modal) */ autoFitStage?: boolean;
     /** No padding/border on preview-content-container — matches widget-creator Edit panel */ compactChrome?: boolean;
     /** Fixed preview stage size; inner iframe resizes within these bounds */ boundsWidth?: number | null;
@@ -54,6 +61,7 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
         maxWidth: number;
         maxHeight: number;
     };
+    resetPreviewPosition?: () => void;
     nudgeIframePaint?: () => void;
     fitToContainer?: () => void;
     sendMessageToPreview?: (message: Record<string, unknown>) => void;
@@ -90,6 +98,7 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
         maxWidth: number;
         maxHeight: number;
     };
+    resetPreviewPosition: () => void;
     nudgeIframePaint: () => void;
     fitToContainer: () => void;
     sendMessageToPreview: (message: Record<string, unknown>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.0.3",
+	"version": "4.0.5",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",