@widgetic/editor 4.0.11 → 4.1.0

package/README.md

@@ -152,6 +152,130 @@ has no preview address (`WIDGET_NOT_PUBLISHED`): its settings stay editable and
 It is a Svelte component for a page that can import it, and it takes the page's styles and fonts as they are. A
 plain-JavaScript module that works on any page, inside a shadow root, is a separate step.
 
+## Languages
+
+The editor shows English until it is told otherwise. `CompositionEditorApp` takes two props, and both can change while
+the editor is open:
+
+```svelte
+<CompositionEditorApp
+	{compositionId}
+	{apiBasePath}
+	{getAccessToken}
+	locale="de"
+	messages={{
+		'editor.props.save': 'Speichern',
+		'editor.app.tryAgain': 'Erneut versuchen',
+		'action.cancel': 'Abbrechen',
+		'shadEditor.toolbar.bold': 'Fett (⌘B)'
+	}}
+/>
+```
+
+- **`locale`** is a BCP 47 language tag (`de`, `pt-BR`, `ar-EG`). It decides the plural rules and how numbers, dates and the
+  names of months and weekdays are written (all through `Intl`). It translates nothing. Blank or left out is English.
+- **`messages`** replaces words, and it is ONE flat object for everything inside the editor: the editor's own words
+  (keys that start with `editor.`), the File Browser that opens from its file pickers (`action.`, `upload.`, `dialog.` ...,
+  see the File Browser's README, "Languages") and the rich text editor of its text fields (`shadEditor.`). Give the keys
+  you want to change; every key you leave out stays English, so a language can be added one screen at a time. A key that
+  does not exist is ignored, and the console says `[Editor] ...` once, with the key you probably meant.
+
+`ALL_EDITOR_MESSAGES` is the list to hand to a translator: every key of the three catalogs with its English text.
+`EDITOR_MESSAGES` is the editor's own part of it.
+
+```ts
+import { ALL_EDITOR_MESSAGES, EDITOR_MESSAGES } from '@widgetic/editor';
+
+console.log(Object.keys(ALL_EDITOR_MESSAGES).length); // every word a person can read in the editor
+console.log(EDITOR_MESSAGES['editor.preview.compilationErrorsDetail']); // 'The generated code has syntax or compilation errors (HTTP {status}).'
+```
+
+A message is text. `{name}` puts a value in, and `{count, plural, one {# file} other {# files}}` picks a form for a
+number in the page's language (the format is the design system's: `@widgetic/design-system/i18n`). Each English message
+names the values it is given; a translation may leave one out or use them in any order, but it cannot ask for a value the
+message is never given.
+
+**Finding a mistake before a person does.** `checkEditorMessages(messages)` checks a `messages` object without showing
+anything: a key that does not exist (with the nearest real one), a value that is not text, a template that does not parse,
+a message that asks for a value it is never given. An empty list means every message will be used. Put it in a test of your
+page; `describeMessageProblem` (from `@widgetic/design-system/i18n`) turns each problem into a sentence:
+
+```ts
+import { checkEditorMessages } from '@widgetic/editor';
+import { describeMessageProblem } from '@widgetic/design-system/i18n';
+import german from './editor.de.json';
+
+expect(checkEditorMessages(german).map(describeMessageProblem)).toEqual([]);
+```
+
+While the editor runs, a message that cannot be used is never thrown: the English text of that key is shown.
+
+**Parts used on their own.** `PropsEditor`, `EmbedEditor` and `WidgetPreview` read their words from the language of the
+`CompositionEditorApp` they sit in. A page that mounts one of them without it says English, unless a component above it
+calls `provideEditorLanguage({ locale, messages })` while it is being made (it gives back a handle whose `update(...)`
+changes the language later). `useEditorLanguage()` is what the parts read it with.
+
+**What stays as it is**
+
+- **The widget's own words.** The names, descriptions and options of a widget's settings are written by the person who made
+  the widget, and are shown as written.
+- **What is saved with the composition.** The title of a new item ("Item 03"), "Untitled Composition" and the names a font
+  weight or a position is saved under ("ExtraBold", "top-left") are kept in English whatever the language. The editor shows
+  the weights, the tabs of the font and vector lists and the positions in the language; it saves the English name.
+- **What the editor tells the page's code.** `error` events, `failure.message` and the other event details stay English: they
+  are for your logs. The person is told by the editor's own screen, in the language.
+- **What comes from outside.** A sentence the Widgetic API sends back, or a media library you give the file pickers, is
+  shown as it arrived.
+- **A sentence the editor said once** (why there is no preview) keeps the language it was said in until the editor says
+  something new. Every label and button changes at once, and so do the banners of a composition that could not be loaded and
+  of a save that failed: they are written when they are drawn.
+- **Dates.** Months and weekdays follow `locale`, and so does the way the range control shows the chosen dates: 7 October 2026
+  is `10/07/26` with `en` (and with no `locale`), `07/10/26` with `en-GB` and `07.10.26` with `de`. In a language written right
+  to left a calendar writes each weekday in one letter (Arabic `ح ن ث ر خ ج س`) and gives a screen reader the whole name;
+  where the browser has no one-letter names (Urdu) the short names stay.
+- **Right to left.** The layout turns around when the editor is given `dir="rtl"` (see "Right to left" below). For a language written right to left a name that is put inside a sentence sits between two invisible marks (Unicode isolates U+2068 and U+2069, made by the shared translator), so the words around it cannot turn it around; a test that compares text has to leave them out.
+- **The design system.** The editor needs `@widgetic/design-system` **0.5.16 or newer** and a `@widgetic/file-browser` that
+  takes `locale` and `messages`: its words come from the design system's `@widgetic/design-system/i18n`.
+
+The `@widgetic/ui-sdk` module of the composition editor takes the same `locale` and `messages` and adds `setLanguage()`.
+
+### Right to left
+
+Arabic, Hebrew, Persian and Urdu start a line on the right. `CompositionEditorApp` takes one more prop for that, and it can
+change while the editor is open:
+
+```svelte
+<CompositionEditorApp {compositionId} {apiBasePath} {getAccessToken} locale="ar" messages={arabic} dir="rtl" />
+```
+
+- **`dir`** is `'rtl'` or `'ltr'`. It is not taken from `locale`: it says which way the screen is read, and a page decides
+  that (`resolveTextDirection(locale)` from `@widgetic/design-system/i18n` answers it for a language tag; the `@widgetic/ui-sdk`
+  module does exactly this). Left out, the editor follows the direction of the screen it sits in (a component above it that
+  calls `provideTextDirection(store)` from `@widgetic/design-system/components/textDirection`), and with neither it is left
+  to right, as it always was. The editor writes `dir` on its own root, so it is read the right way wherever it is put.
+- **What turns around.** The settings editor and the preview float over the editor's area and are put in place in pixels
+  when the editor appears and again when `dir` changes: on a right to left screen the settings editor is docked at the
+  right of the middle and the preview left of it, with the same gaps (`leftOnThisScreen`, `src/lib/utils/dockPlacement.ts`).
+  The Design and Content tabs, the label and the control of a row, the calendars (their arrows are mirrored), the sliders,
+  the switches and the file picker (the File Browser, which opens inside the editor's own root and is read the way the root
+  is) all start at the start of the line; the arrow keys of the date fields follow it, the help tip opens at the end of
+  the line, and each tab panel slides in from the side its tab is on.
+- **What a person types** is read by its own first letter on a right to left screen (`directionOfFieldValue`,
+  `src/lib/utils/fieldDirection.ts`): a sentence in Latin letters is set from the left and one in Arabic from the right,
+  in the same form. A field with nothing in it yet has no first letter (`dir="auto"` on an empty field reads left to right,
+  which would put the hint and the caret at the wrong edge), so it takes the direction of the screen. The kinds `email` and
+  `url` are addresses and stay left to right on every screen. Note that the kind a schema gives a plain text field is
+  `textInput`, not an HTML `type`: only those two names are addresses.
+- **Left to right on every screen.** The colour code, the drawing of the colour picker (saturation and hue), the grid that
+  places a box and the picker of the corners of a rounded box are drawings, not lines of text, and say `dir="ltr"` themselves.
+- **Keeping it so.** `tests/editor-placement.test.mjs` reads the source of the editor with `auditPhysicalPlacement` from
+  `@widgetic/design-system/rtl/audit` and fails on a class or a style that puts something on a physical side (`left`,
+  `right`, `ml-`, `pr-`, `text-left`, four-value shorthands such as `padding: 4px 6px 4px 0` ...): write `start`/`end`
+  (`ms-`, `pe-`, `text-start`, `border-s`) or say why with the note `rtl-ok` on the same line or the line above.
+  `tests/editor-direction.test.mjs` pins the rest. A panel that went off the screen in Arabic (a `position: relative` box
+  is moved from where it sits in the flow, which on a right to left screen is the right edge) and a field that never read
+  its text by its own letter were not found by the audit but by looking at a screen: look at one.
+
 ## Input Controllers
 
 The component uses the input controllers to edit the widget properties.

package/dist/components/WidgetPreview.svelte

@@ -2,6 +2,10 @@
 	import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
 	import { GenerateLoader } from '@widgetic/design-system/components';
 	import { lockPointerStyle } from '../utils/shadowDom';
+	import { useEditorLanguage } from '../i18n/language';
+
+	// 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 +92,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 +110,6 @@
 	let internalIframeSrc: string | null = null;
 	let iframeLoaded = false;
 	let iframeError = false;
-	let errorMessage = '';
 	let isWidgetPublished = false;
 	let triedFallback = false;
 	let pendingWidget: any = null;
@@ -174,6 +178,7 @@
 	): { 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);
+		// 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);
@@ -378,8 +383,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 +425,6 @@
 		iframeLoaded = false;
 		iframeError = false;
 		widgetReady = false;
-		errorMessage = '';
 		pendingMessages = [];
 		isResolvingUrl = false;
 
@@ -476,7 +480,6 @@
 		isWidgetPublished = false;
 		iframeLoaded = false;
 		iframeError = false;
-		errorMessage = '';
 		widgetReady = false;
 		isResolvingUrl = false;
 	}
@@ -594,7 +597,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 +812,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 +820,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 +829,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 +844,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 +852,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 +861,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 +882,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 +894,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 +911,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,18 +923,18 @@
 						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>
+							<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">Preview</span>
+						<span class="preview-chrome-title text-[11px] font-semibold uppercase tracking-wide text-gray-500 shrink-0">{$t('editor.preview.title')}</span>
 						{#if showChromeDeviceToggle}
 							<div
-								class="preview-chrome-device-toggle ml-auto flex shrink-0 items-center overflow-hidden rounded border border-gray-300"
+								class="preview-chrome-device-toggle ms-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-label={$t('editor.preview.desktop')}
 									aria-pressed={!deviceMobile}
 									onclick={() => dispatch('deviceView', { mobile: false })}
 									onpointerdown={(event) => event.stopPropagation()}
@@ -941,8 +943,8 @@
 								</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"
+									class="preview-chrome-device-mobile flex h-6 w-6 items-center justify-center border-s 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={$t('editor.preview.mobile')}
 									aria-pressed={deviceMobile}
 									onclick={() => dispatch('deviceView', { mobile: true })}
 									onpointerdown={(event) => event.stopPropagation()}
@@ -952,9 +954,9 @@
 							</div>
 						{/if}
 						{#if showDimensionInputs}
-							<div class="preview-chrome-dimensions flex items-center gap-1.5 {showChromeDeviceToggle ? '' : 'ml-auto'}">
+							<div class="preview-chrome-dimensions flex items-center gap-1.5 {showChromeDeviceToggle ? '' : 'ms-auto'}">
 								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
-									<span>W</span>
+									<span>{$t('editor.preview.widthShort')}</span>
 									<input
 										type="number"
 										min={MIN_WIDTH}
@@ -969,7 +971,7 @@
 								</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>
+									<span>{$t('editor.preview.heightShort')}</span>
 									<input
 										type="number"
 										min={MIN_HEIGHT}
@@ -1021,20 +1023,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 +1044,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 +1065,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 +1107,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 +1117,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 +1176,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/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
 	/>