@widgetic/editor 4.0.11 → 4.1.2

package/dist/components/WidgetPreview.svelte

@@ -2,6 +2,11 @@
 	import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
 	import { GenerateLoader } from '@widgetic/design-system/components';
 	import { lockPointerStyle } from '../utils/shadowDom';
+	import { useEditorLanguage } from '../i18n/language';
+	import PreviewChromeControls from './PreviewChromeControls.svelte';
+
+	// The words of the editor in the language of the page: the editor above this one chose it (see `provideEditorLanguage`).
+	const { t } = useEditorLanguage();
 
 	const dispatch = createEventDispatcher<{
 		load: { src: string | null };
@@ -88,6 +93,7 @@
 	 */
 	export let resizeMode: 'concentric' | 'corner' = 'concentric';
 	/** Initial / reset placement inside the stage. */
+	// rtl-ok: 'right-half' names the half of the stage by its place on the screen; the composition editor docks the preview itself
 	export let defaultStageAlign: 'center' | 'right-half' = 'center';
 	/** Observe stage size and fill it (desktop modal) */
 	export let autoFitStage: boolean = false;
@@ -105,7 +111,6 @@
 	let internalIframeSrc: string | null = null;
 	let iframeLoaded = false;
 	let iframeError = false;
-	let errorMessage = '';
 	let isWidgetPublished = false;
 	let triedFallback = false;
 	let pendingWidget: any = null;
@@ -117,10 +122,8 @@
 	const MIN_WIDTH = 120;
 	const MIN_HEIGHT = 80;
 	const HANDLE_MARGIN = 6;
-	/** Inset padding so resize handles stay inside bounds */
-	const RESIZE_PAD_X = 12;
-	const RESIZE_PAD_TOP = 12;
-	const RESIZE_PAD_BOTTOM = 12;
+	/** Inset so resize handles stay inside bounds. 0 sits the frame on the stage edge. */
+	export let edgeInset = 12;
 	const PREVIEW_CHROME_HEADER_H = 36;
 	const PREVIEW_STROKE = '#3b82f6';
 	const PREVIEW_STROKE_ALT = '#f97316';
@@ -155,8 +158,8 @@
 		}
 		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 - chromeH),
+				maxWidth: Math.max(MIN_WIDTH, boundsWidth - edgeInset * 2),
+				maxHeight: Math.max(MIN_HEIGHT, boundsHeight - edgeInset - edgeInset - chromeH),
 			};
 		}
 		return { maxWidth: 720, maxHeight: 420 };
@@ -172,16 +175,17 @@
 		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);
+		const maxLeft = Math.max(edgeInset, stageWidth - shellWidth - edgeInset);
+		const maxTop = Math.max(edgeInset, stageHeight - shellHeight - edgeInset);
+		// rtl-ok: the half of the stage is named by its place on the screen, see the prop
 		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);
+			const left = clampDimension(rightHalfCenterX - shellWidth / 2, edgeInset, maxLeft);
+			const top = clampDimension((stageHeight - shellHeight) / 2, edgeInset, maxTop);
 			return { left, top };
 		}
-		const left = clampDimension((stageWidth - shellWidth) / 2, RESIZE_PAD_X, maxLeft);
-		const top = clampDimension((stageHeight - shellHeight) / 2, RESIZE_PAD_TOP, maxTop);
+		const left = clampDimension((stageWidth - shellWidth) / 2, edgeInset, maxLeft);
+		const top = clampDimension((stageHeight - shellHeight) / 2, edgeInset, maxTop);
 		return { left, top };
 	}
 
@@ -266,10 +270,10 @@
 
 		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);
+			const maxLeft = Math.max(edgeInset, stageEl.clientWidth - shellWidth - edgeInset);
+			const maxTop = Math.max(edgeInset, stageEl.clientHeight - shellHeight - edgeInset);
+			previewShellLeft = clampDimension(startLeft + (e.clientX - startX), edgeInset, maxLeft);
+			previewShellTop = clampDimension(startTop + (e.clientY - startY), edgeInset, maxTop);
 		}
 
 		function endDrag() {
@@ -360,7 +364,7 @@
 	$: showResizeHandles = enableResize && (mode === 'controlled' ? isContentReady : iframeLoaded);
 	$: hasFixedBounds = boundsWidth != null && boundsHeight != null;
 	$: containerPaddingStyle = enableResize
-		? `padding: ${RESIZE_PAD_TOP}px ${RESIZE_PAD_X}px ${RESIZE_PAD_BOTTOM}px ${RESIZE_PAD_X}px;`
+		? `padding: ${edgeInset}px ${edgeInset}px ${edgeInset}px ${edgeInset}px;`
 		: !hasFixedBounds && !compactChrome && (showUrlBar || mode === 'controlled')
 			? `padding: ${HANDLE_MARGIN}px;`
 			: '';
@@ -378,8 +382,8 @@
 		: '';
 	$: iframeTitle =
 		mode === 'controlled'
-			? 'Widget preview'
-			: `Widget preview – ${widget?.name || 'Widget'}`;
+			? $t('editor.preview.frameTitle')
+			: $t('editor.preview.frameTitleNamed', { name: widget?.name || $t('editor.preview.widgetName') });
 
 	function buildWidgetUrl(w: any): string | null {
 		if (!w) return null;
@@ -420,7 +424,6 @@
 		iframeLoaded = false;
 		iframeError = false;
 		widgetReady = false;
-		errorMessage = '';
 		pendingMessages = [];
 		isResolvingUrl = false;
 
@@ -476,7 +479,6 @@
 		isWidgetPublished = false;
 		iframeLoaded = false;
 		iframeError = false;
-		errorMessage = '';
 		widgetReady = false;
 		isResolvingUrl = false;
 	}
@@ -594,7 +596,6 @@
 		iframeError = true;
 		iframeLoaded = false;
 		widgetReady = false;
-		errorMessage = 'Failed to load widget preview.';
 		console.error('[WidgetPreview] Widget iframe onerror:', effectiveSrc);
 		dispatch('error', { src: effectiveSrc });
 	}
@@ -810,7 +811,7 @@
 			<span
 				class="preview-url-text flex-1 rounded border border-gray-300 px-2 py-1 text-xs text-gray-500 min-w-0 font-mono overflow-x-auto whitespace-nowrap"
 			>
-				{effectiveDisplayUrl || effectiveSrc || 'no URL'}
+				{effectiveDisplayUrl || effectiveSrc || $t('editor.preview.noUrl')}
 			</span>
 			<button
 				type="button"
@@ -818,7 +819,7 @@
 					const url = effectiveDisplayUrl || effectiveSrc;
 					if (url) navigator.clipboard.writeText(url);
 				}}
-				title="Copy URL"
+				title={$t('editor.preview.copyUrl')}
 				class="shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 text-sm cursor-pointer"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
@@ -827,14 +828,14 @@
 				<button
 					type="button"
 					onclick={handleRefreshClick}
-					title="Refresh preview"
+					title={$t('editor.preview.refresh')}
 					class="shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 text-sm cursor-pointer"
 				>🔄</button>
 				{#if showViewportButtons && enableResize}
 					<button
 						type="button"
 						onclick={handleFitToAreaClick}
-						title="Fit preview to panel"
+						title={$t('editor.preview.fitToPanel')}
 						class="preview-fit-to-area-btn shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 cursor-pointer"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>
@@ -842,7 +843,7 @@
 					<button
 						type="button"
 						onclick={applyMobileViewport}
-						title="Mobile viewport"
+						title={$t('editor.preview.mobileViewport')}
 						class="preview-mobile-viewport-btn shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 cursor-pointer"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
@@ -850,7 +851,7 @@
 					<button
 						type="button"
 						onclick={handleDesktopViewport}
-						title="Desktop viewport (full window)"
+						title={$t('editor.preview.desktopViewport')}
 						class="preview-desktop-viewport-btn shrink-0 w-7 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 cursor-pointer"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
@@ -859,9 +860,9 @@
 				<button
 					type="button"
 					onclick={handleOpenInTabClick}
-					title="Open in new tab"
+					title={$t('editor.preview.openInNewTab')}
 					class="shrink-0 px-2 h-7 flex items-center justify-center rounded border border-gray-300 bg-white hover:bg-gray-100 text-xs cursor-pointer whitespace-nowrap"
-				>↗ New tab</button>
+				>{$t('editor.preview.newTab')}</button>
 			{/if}
 		</div>
 	{/if}
@@ -880,7 +881,7 @@
 
 		{:else if mode === 'standalone' && !widget}
 			<div class="widget-preview-select-ct flex items-center justify-center h-full text-sm text-gray-400">
-				Select a widget to preview
+				{$t('editor.preview.selectWidget')}
 			</div>
 
 		{:else if mode === 'standalone' && widget && !effectiveSrc && !isResolvingUrl && !iframeError}
@@ -892,11 +893,11 @@
 						</svg>
 					</div>
 					<div>
-						<p class="text-sm font-medium text-gray-600">{widget.name || 'Widget'}</p>
-						<p class="text-xs text-gray-400 mt-1">Not published yet</p>
+						<p class="text-sm font-medium text-gray-600">{widget.name || $t('editor.preview.widgetName')}</p>
+						<p class="text-xs text-gray-400 mt-1">{$t('editor.preview.notPublished')}</p>
 					</div>
 					<p class="text-[11px] text-gray-300 max-w-[220px]">
-						Publish the widget in Widget Creator to preview it here.
+						{$t('editor.preview.publishToPreview')}
 					</p>
 				</div>
 			</div>
@@ -909,7 +910,7 @@
 			<div
 				class="preview-iframe-shell relative flex flex-col {enableResize ? 'preview-iframe-shell-positioned' : ''}"
 				class:preview-iframe-shell-symmetrical={showSymmetricalStroke}
-				style="{enableResize
+				style="{enableResize /* rtl-ok: the preview is placed in pixels from the left edge of the stage; the dock of the editor mirrors it */
 					? `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'};"
 			>
@@ -921,69 +922,32 @@
 						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 showChromeDeviceToggle}
-							<div
-								class="preview-chrome-device-toggle ml-auto flex shrink-0 items-center overflow-hidden rounded border border-gray-300"
-								onpointerdown={(event) => event.stopPropagation()}
-							>
-								<button
-									type="button"
-									class="preview-chrome-device-desktop flex h-6 w-6 items-center justify-center {!deviceMobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
-									aria-label="Desktop preview"
-									aria-pressed={!deviceMobile}
-									onclick={() => dispatch('deviceView', { mobile: false })}
-									onpointerdown={(event) => event.stopPropagation()}
-								>
-									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
-								</button>
-								<button
-									type="button"
-									class="preview-chrome-device-mobile flex h-6 w-6 items-center justify-center border-l border-gray-300 {deviceMobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
-									aria-label="Mobile preview"
-									aria-pressed={deviceMobile}
-									onclick={() => dispatch('deviceView', { mobile: true })}
-									onpointerdown={(event) => event.stopPropagation()}
-								>
-									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
-								</button>
-							</div>
-						{/if}
-						{#if showDimensionInputs}
-							<div class="preview-chrome-dimensions flex items-center gap-1.5 {showChromeDeviceToggle ? '' : 'ml-auto'}">
-								<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>
+							<span class="preview-chrome-drag-grip shrink-0 text-gray-400 text-xs leading-none" title={$t('editor.preview.dragHandle')} aria-hidden="true">⠿</span>
 						{/if}
+						<span class="preview-chrome-title text-[11px] font-semibold uppercase tracking-wide text-gray-500 shrink-0">{$t('editor.preview.title')}</span>
+						<PreviewChromeControls
+							class="{showChromeDeviceToggle || showDimensionInputs ? 'ms-auto' : ''}"
+							mobile={deviceMobile}
+							showDevices={showChromeDeviceToggle}
+							showDimensions={showDimensionInputs}
+							widthValue={widthInputValue}
+							heightValue={heightInputValue}
+							minWidth={MIN_WIDTH}
+							minHeight={MIN_HEIGHT}
+							desktopLabel={$t('editor.preview.desktop')}
+							mobileLabel={$t('editor.preview.mobile')}
+							widthLabel={$t('editor.preview.widthShort')}
+							heightLabel={$t('editor.preview.heightShort')}
+							onDevice={(nextMobile) => dispatch('deviceView', { mobile: nextMobile })}
+							onWidth={(value) => {
+								widthInputValue = value;
+								applyDimensionFromInput('width', value);
+							}}
+							onHeight={(value) => {
+								heightInputValue = value;
+								applyDimensionFromInput('height', value);
+							}}
+						/>
 					</div>
 				{/if}
 
@@ -1021,20 +985,20 @@
 								<svg class="w-8 h-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
 									<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
 								</svg>
-								<span class="text-sm text-gray-500">{@html errorMessage || 'Failed to load widget.'}</span>
+								<span class="text-sm text-gray-500">{$t('editor.preview.loadFailedPreview')}</span>
 							</div>
 						</div>
 					{:else if mode === 'controlled' && previewError && !isGeneratingCode}
 						<div class="preview-error-overlay absolute inset-0 z-10 flex h-full flex-col items-center justify-center bg-red-50/95 text-gray-700 p-6">
 							<div class="text-4xl mb-3">⚠️</div>
-							<div class="font-semibold text-lg text-red-600 mb-2">Preview Unavailable</div>
+							<div class="font-semibold text-lg text-red-600 mb-2">{$t('editor.preview.unavailable')}</div>
 							<div class="text-sm text-center max-w-md whitespace-pre-line text-gray-600 mb-4">{previewError}</div>
 							<div class="flex gap-3">
 								<button type="button" onclick={() => dispatch('retry')} class="px-3 py-1.5 text-xs rounded border border-blue-500 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer">
-									🔄 Retry {previewRetryCount > 0 ? `(${previewRetryCount})` : ''}
+									🔄 {$t('editor.preview.retry')} {previewRetryCount > 0 ? `(${previewRetryCount})` : ''}
 								</button>
 								<button type="button" onclick={() => dispatch('openInTab')} class="px-3 py-1.5 text-xs rounded border border-gray-300 text-gray-600 bg-white hover:bg-gray-100 cursor-pointer">
-									Open in new tab
+									{$t('editor.preview.openInNewTab')}
 								</button>
 							</div>
 						</div>
@@ -1042,21 +1006,17 @@
 
 					{#if showStandaloneLoading}
 						<div class="widget-preview-loading-ct absolute inset-0 z-10 flex items-center justify-center bg-gray-50/80">
-							<GenerateLoader title="Loading widget…" subtitle="" size="md" />
+							<GenerateLoader title={$t('editor.preview.loadingWidget')} subtitle="" size="md" />
 						</div>
 					{:else if showControlledLoading && !isGeneratingCode}
 						<div class="loading-overlay absolute inset-0 z-20 flex items-center justify-center bg-gray-50">
 							<GenerateLoader
-								title={!src && isLoadingUrl
-									? 'Loading Preview…'
-									: previewHydrating
-										? 'Loading Preview…'
-										: 'Loading Preview…'}
+								title={$t('editor.preview.loadingPreview')}
 								subtitle={!src && isLoadingUrl
-									? 'Checking widget on Worker…'
+									? $t('editor.preview.checkingWidget')
 									: previewHydrating
-										? 'Applying composition settings…'
-										: 'Connecting to the widget preview…'}
+										? $t('editor.preview.applyingSettings')
+										: $t('editor.preview.connecting')}
 								size="lg"
 							/>
 						</div>
@@ -1067,17 +1027,17 @@
 							<div class="text-5xl mb-4">⚠️</div>
 							<div class="font-semibold text-xl mb-2">
 								{previewError && /TypeError|Uncaught|is not a function|is not defined/i.test(previewError)
-									? 'Widget runtime error'
-									: 'Code Has Compilation Errors'}
+									? $t('editor.preview.runtimeError')
+									: $t('editor.preview.compilationErrors')}
 							</div>
 							<div class="text-sm text-center text-red-600 mb-4 max-w-md whitespace-pre-line">
 								{previewError
-									|| `The generated code has syntax or compilation errors (HTTP ${previewRuntimeErrorStatus}).`}
+									|| $t('editor.preview.compilationErrorsDetail', { status: previewRuntimeErrorStatus ?? '?' })}
 							</div>
 							<div class="flex gap-3 flex-wrap justify-center">
-								<button type="button" onclick={() => dispatch('fixErrors')} class="px-4 py-2 text-xs rounded bg-red-600 hover:bg-red-700 text-white cursor-pointer border-0">🔧 Fix Errors</button>
-								<button type="button" onclick={() => dispatch('viewErrors')} class="px-3 py-1.5 text-xs rounded border border-orange-400 text-orange-600 bg-white hover:bg-orange-50 cursor-pointer">📋 View Errors</button>
-								<button type="button" onclick={() => dispatch('retryPreview')} class="px-3 py-1.5 text-xs rounded border border-red-300 text-red-600 bg-white hover:bg-red-50 cursor-pointer">🔄 Retry Preview</button>
+								<button type="button" onclick={() => dispatch('fixErrors')} class="px-4 py-2 text-xs rounded bg-red-600 hover:bg-red-700 text-white cursor-pointer border-0">🔧 {$t('editor.preview.fixErrors')}</button>
+								<button type="button" onclick={() => dispatch('viewErrors')} class="px-3 py-1.5 text-xs rounded border border-orange-400 text-orange-600 bg-white hover:bg-orange-50 cursor-pointer">📋 {$t('editor.preview.viewErrors')}</button>
+								<button type="button" onclick={() => dispatch('retryPreview')} class="px-3 py-1.5 text-xs rounded border border-red-300 text-red-600 bg-white hover:bg-red-50 cursor-pointer">🔄 {$t('editor.preview.retryPreview')}</button>
 							</div>
 						</div>
 					{/if}
@@ -1109,7 +1069,7 @@
 					{/if}
 
 					{#if mode === 'controlled' && isGeneratingCode}
-						<GenerateLoader overlay title="Generating code…" subtitle="" size="lg" />
+						<GenerateLoader overlay title={$t('editor.preview.generatingCode')} subtitle="" size="lg" />
 					{/if}
 				</div>
 				</div>
@@ -1119,22 +1079,22 @@
 		{:else if mode === 'controlled'}
 			{#if isLoadingUrl}
 				<div class="flex h-full flex-col items-center justify-center p-6">
-					<GenerateLoader title="Loading Preview…" subtitle="" size="lg" />
+					<GenerateLoader title={$t('editor.preview.loadingPreview')} subtitle="" size="lg" />
 				</div>
 			{:else}
 				<div class="flex h-full flex-col items-center justify-center p-6 text-center text-sm text-gray-600">
 					{#if isGeneratingCode}
-						<GenerateLoader title="Generating code…" subtitle="" size="lg" />
+						<GenerateLoader title={$t('editor.preview.generatingCode')} subtitle="" size="lg" />
 					{:else if previewError === 'NO_CODE_YET'}
-						<div class="font-semibold text-lg text-gray-700 mb-2">No Code Generated Yet</div>
+						<div class="font-semibold text-lg text-gray-700 mb-2">{$t('editor.preview.noCodeYet')}</div>
 					{:else if previewError}
-						<div class="font-semibold text-lg text-red-600 mb-2">Preview Unavailable</div>
+						<div class="font-semibold text-lg text-red-600 mb-2">{$t('editor.preview.unavailable')}</div>
 						<div class="text-sm text-gray-600 mb-4">{previewError}</div>
-						<button type="button" onclick={() => dispatch('retry')} class="px-3 py-1.5 text-xs rounded border border-blue-500 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer">🔄 Retry Build</button>
+						<button type="button" onclick={() => dispatch('retry')} class="px-3 py-1.5 text-xs rounded border border-blue-500 text-blue-600 bg-white hover:bg-blue-50 cursor-pointer">🔄 {$t('editor.preview.retryBuild')}</button>
 					{:else if previewLoading}
-						<div class="text-lg font-medium text-gray-700">Building Preview...</div>
+						<div class="text-lg font-medium text-gray-700">{$t('editor.preview.building')}</div>
 					{:else}
-						<div class="text-lg text-gray-600 mb-2">🖼️ No Preview Available</div>
+						<div class="text-lg text-gray-600 mb-2">🖼️ {$t('editor.preview.noPreview')}</div>
 					{/if}
 				</div>
 			{/if}
@@ -1178,10 +1138,11 @@
 		box-shadow: none;
 	}
 
-	.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; }
+	/* The four corner handles of the preview are on the four corners of the box, a place on the screen: the set is the same in both directions. */
+	.preview-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; } /* rtl-ok: top left corner */
+	.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; } /* rtl-ok: top right corner */
+	.preview-resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; } /* rtl-ok: bottom left corner */
+	.preview-resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; } /* rtl-ok: bottom right corner */
 
 	.preview-resize-handle:hover {
 		background: #eff6ff;

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

@@ -66,6 +66,7 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
     resizeWidth?: number | null;
     resizeHeight?: number | null;
     iframeEl?: HTMLIFrameElement | null;
+    /** Inset so resize handles stay inside bounds. 0 sits the frame on the stage edge. */ edgeInset?: number;
     getResizeLimits?: () => {
         maxWidth: number;
         maxHeight: number;

package/dist/components/color-select/ColorSelect.svelte

@@ -173,8 +173,10 @@ $: if (rgb && typeof a === 'number') {
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- The picker is a drawing: saturation grows to the right and hue is a strip next to it, on every screen, so it is a left to right island. -->
 <div
   class={$$props.class}
+  dir="ltr"
   tabindex="0"
   style="width: {width}px; height: {height}px;"
   on:keydown={onKeydown}
@@ -184,8 +186,7 @@ $: if (rgb && typeof a === 'number') {
 		id="{instanceId}_sv"
         width={pickerSize}
         height={pickerSize}
-        style:top="{border_size}px"
-        style:left="{border_size}px"
+        style="top: {border_size}px; left: {border_size}px; /* rtl-ok: the saturation square is drawn from the left edge of the picker */"
         use:pointer={update_sv}
         use:render_main_image={color.h}
 	/>
@@ -193,8 +194,7 @@ $: if (rgb && typeof a === 'number') {
 	<canvas
         width={sliderWidth}
         height={pickerSize}
-        style:top="{border_size}px"
-        style:left="{pickerSize + gap_size}px"
+        style="top: {border_size}px; left: {pickerSize + gap_size}px; /* rtl-ok: the hue strip is drawn next to the square, from the left edge of the picker */"
         use:pointer={update_h}
         use:render_slider_image
 	/>