removed image bg

Author: dani-polani

CHANGELOG.md

@@ -24,7 +24,7 @@ Short notes for changes on branch **`v2`** relative to **`main`** (no dedicated
 ### Changed
 
 - **Home & SEO** — copy aligned with current UX (multi-line, adjacent links, terminology); Aligner (Bitext Align) branding; `SeoIntro`, `SeoSections`, `JsonLd`, `metadata.ts`.
-- **Preview** — `AlignmentPreview`, token markup (`TokenView`, `TokenRow`), link layer (`AlignmentSvg`) with pairs and line order; line reorder and line actions; **in-preview controls follow preview light/dark (or image) background**, not only the page theme.
+- **Preview** — `AlignmentPreview`, token markup (`TokenView`, `TokenRow`), link layer (`AlignmentSvg`) with pairs and line order; line reorder and line actions; **in-preview controls follow preview light/dark background**, not only the page theme.
 - **SVG export** — respects `pairControls`, background, line weight/opacity, optional embedded fonts, etc. (`svg.ts`, `ExportMenu`).
 - **Settings** — Style / Colors / Tokens / Fonts tabs; icons (gear for editor tokenization settings, split-cells for Tokens); **Flowbite `Tabs`**: `classes.content` instead of deprecated `contentClass`.
 - **Link palette** — when colors run out, the palette **cycles** (`palettes`).
@@ -38,6 +38,7 @@ Short notes for changes on branch **`v2`** relative to **`main`** (no dedicated
 ### Removed / replaced
 
 - Older narrow editor/preview pieces for a single-sentence model (`GlossInputRow`, `SentenceField`, `GlossRow`) — replaced by **multi-line cards** and token rows in preview.
+- **Preview background image** — removed from Style settings (legacy shares / compact `bg:2` decode as light).
 
 ### Dependencies (`bitext`)
 

bitext/src/app.css

@@ -101,20 +101,6 @@ html {
 	border-color: rgb(55 65 81);
 }
 
-.preview-frame__image-overlay {
-	position: absolute;
-	inset: 0;
-	backdrop-filter: blur(1px);
-}
-
-.preview-frame--light .preview-frame__image-overlay {
-	background: color-mix(in srgb, #ffffff 82%, transparent);
-}
-
-.preview-frame--dark .preview-frame__image-overlay {
-	background: color-mix(in srgb, #1e1e1e 82%, transparent);
-}
-
 /* Floating link hint — no panel chrome; halo keeps text readable on busy previews */
 .preview-frame__link-hint {
 	margin: 0;

bitext/src/lib/components/preview/AlignmentPreview.svelte

@@ -38,17 +38,9 @@
 <div
 	bind:this={rootEl}
 	class="preview-frame"
-	class:preview-frame--light={bg === 'light' || bg === 'image'}
+	class:preview-frame--light={bg === 'light'}
 	class:preview-frame--dark={bg === 'dark'}
-	style:background-image={bg === 'image' && settingsStore.settings.backgroundImageDataUrl
-		? `url(${settingsStore.settings.backgroundImageDataUrl})`
-		: undefined}
-	style:background-size="cover"
-	style:background-position="center"
 >
-	{#if bg === 'image' && settingsStore.settings.backgroundImageDataUrl}
-		<div class="preview-frame__image-overlay"></div>
-	{/if}
 	{#if selectionStore.showLinkHint()}
 		<p
 			class="preview-frame__link-hint pointer-events-none absolute left-3 top-3 z-30 max-w-[min(calc(100%-1.5rem),15rem)] px-2 py-1 text-xs leading-snug"

bitext/src/lib/components/settings/AppearanceTab.svelte

@@ -7,8 +7,6 @@
 	const sel =
 		'block w-full rounded-none border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 dark:focus:ring-primary-500';
 
-	const fileInputClass =
-		'block w-full cursor-pointer rounded-none border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400';
 </script>
 
 <div class="grid grid-cols-12 gap-4">
@@ -52,12 +50,11 @@
 			value={s.background}
 			onchange={(e) =>
 				settingsStore.patch({
-					background: (e.currentTarget as HTMLSelectElement).value as 'light' | 'dark' | 'image'
+					background: (e.currentTarget as HTMLSelectElement).value as 'light' | 'dark'
 				})}
 		>
 			<option value="light">Light</option>
 			<option value="dark">Dark</option>
-			<option value="image">Image</option>
 		</select>
 	</div>
 	<div class="col-span-12 md:col-span-6">
@@ -75,26 +72,4 @@
 			<option value="curved">Curved</option>
 		</select>
 	</div>
-	{#if s.background === 'image'}
-		<div class="col-span-12">
-			<Label for="settings-bg-file" class="mb-2">Background image</Label>
-			<input
-				id="settings-bg-file"
-				type="file"
-				accept="image/*"
-				class={fileInputClass}
-				onchange={async (e) => {
-					const f = (e.currentTarget as HTMLInputElement).files?.[0];
-					if (!f) return;
-					const dataUrl = await new Promise<string>((res, rej) => {
-						const r = new FileReader();
-						r.onload = () => res(String(r.result));
-						r.onerror = () => rej(new Error('read'));
-						r.readAsDataURL(f);
-					});
-					settingsStore.patch({ backgroundImageDataUrl: dataUrl });
-				}}
-			/>
-		</div>
-	{/if}
 </div>

bitext/src/lib/serialization/compact-v2.ts

@@ -234,7 +234,7 @@ function settingsToCompact(rounded: VisualSettingsV1): CompactSettings | undefin
 	if (rounded.tokenSplitChars !== def.tokenSplitChars) o.sp = rounded.tokenSplitChars;
 
 	if (rounded.background !== def.background) {
-		o.bg = rounded.background === 'light' ? 0 : rounded.background === 'dark' ? 1 : 2;
+		o.bg = rounded.background === 'dark' ? 1 : 0;
 	}
 
 	return Object.keys(o).length ? sortKeys(o) : undefined;
@@ -270,7 +270,8 @@ function compactToVisualSettings(s: CompactSettings | undefined): VisualSettings
 	if (s.sp !== undefined) raw.tokenSplitChars = String(s.sp);
 	if (s.bg !== undefined) {
 		const n = Number(s.bg);
-		raw.background = n === 1 ? 'dark' : n === 2 ? 'image' : 'light';
+		/* Legacy 2 = image → light */
+		raw.background = n === 1 ? 'dark' : 'light';
 	}
 	return normalizeVisualSettings(raw);
 }
@@ -355,7 +356,6 @@ function compactToProject(
 
 export function toCompactJSON(state: AppStateV1): string {
 	const slimSettings = { ...state.settings };
-	delete slimSettings.backgroundImageDataUrl;
 
 	const rounded = roundVisualSettings(slimSettings);
 	const sCompact = settingsToCompact(rounded);

bitext/src/lib/serialization/compact-v3.ts

@@ -65,7 +65,7 @@ function settingsToCompact(rounded: VisualSettingsV2): CompactSettings3 | undefi
 	}
 	if (rounded.tokenPunctuationChars) o.px = rounded.tokenPunctuationChars;
 	if (rounded.background !== def.background) {
-		o.bg = rounded.background === 'light' ? 0 : rounded.background === 'dark' ? 1 : 2;
+		o.bg = rounded.background === 'dark' ? 1 : 0;
 	}
 	const keysBeforeFinalize = Object.keys(o).length;
 	if (keysBeforeFinalize > 0) {
@@ -90,7 +90,8 @@ function compactToVisualSettings(s: CompactSettings3 | undefined): VisualSetting
 	if (s.pp !== undefined) raw.tokenSplitPunctuation = Number(s.pp) === 1;
 	if (s.bg !== undefined) {
 		const n = Number(s.bg);
-		raw.background = n === 1 ? 'dark' : n === 2 ? 'image' : 'light';
+		/* Legacy 2 = image → light */
+		raw.background = n === 1 ? 'dark' : 'light';
 	}
 	return normalizeVisualSettingsV2(raw);
 }
@@ -295,7 +296,6 @@ function pruneConnections(
 
 export function toCompactJSON(state: AppStateV2): string {
 	const slimSettings = { ...state.settings };
-	delete slimSettings.backgroundImageDataUrl;
 	const rounded = roundVisualSettings(slimSettings);
 	const sCompact = settingsToCompact(rounded);
 	const pCompact = projectToCompact(state.project);

bitext/src/lib/serialization/schema.ts

@@ -16,7 +16,13 @@ export const MAX_LINES = 8;
 export const NEW_LINE_HINT_TEXT = 'Type your text here';
 
 export type LineStyle = 'straight' | 'curved';
-export type BackgroundMode = 'light' | 'dark' | 'image';
+export type BackgroundMode = 'light' | 'dark';
+
+/** Map legacy / invalid values to the preview background enum (image mode removed). */
+export function normalizePreviewBackground(mode: unknown): BackgroundMode {
+	if (mode === 'dark') return 'dark';
+	return 'light';
+}
 /** How link colors apply to tokens when “match token color to links” is on. */
 export type TokenLinkColorMode = 'text' | 'background';
 export type UiTheme = 'light' | 'dark';
@@ -150,7 +156,6 @@ export interface VisualSettingsV2 {
 	/** Hide preview chrome (line controls, gap sliders, toolbar) and show export-style attribution in-frame. */
 	previewHideChrome: boolean;
 	background: BackgroundMode;
-	backgroundImageDataUrl?: string;
 }
 
 export interface AppStateV2 {
@@ -186,7 +191,6 @@ export interface VisualSettingsV1 {
 	colorTokensByLink: boolean;
 	tokenSplitChars: string;
 	background: BackgroundMode;
-	backgroundImageDataUrl?: string;
 }
 
 /** @deprecated v1 */
@@ -302,8 +306,7 @@ export function visualSettingsV1ToV2(v1: VisualSettingsV1): VisualSettingsV2 {
 		tokenSplitPunctuation: false,
 		tokenPunctuationChars: '',
 		previewHideChrome: false,
-		background: v1.background,
-		backgroundImageDataUrl: v1.backgroundImageDataUrl
+		background: normalizePreviewBackground(v1.background)
 	};
 }
 
@@ -539,7 +542,7 @@ export function normalizeVisualSettings(
 		)
 	);
 
-	return {
+	const out = {
 		...d,
 		...rawRest,
 		sourceTextSizePx,
@@ -590,8 +593,11 @@ export function normalizeVisualSettings(
 		glossLineGapPx:
 			typeof rawRest.glossLineGapPx === 'number'
 				? Math.max(0, Math.min(80, rawRest.glossLineGapPx))
-				: d.glossLineGapPx
+				: d.glossLineGapPx,
+		background: normalizePreviewBackground(rawRest.background ?? d.background)
 	} as VisualSettingsV1;
+	delete (out as unknown as Record<string, unknown>).backgroundImageDataUrl;
+	return out;
 }
 
 export function appStateV2FromV1(state: AppStateV1): AppStateV2 {
@@ -769,13 +775,6 @@ export function normalizeVisualSettingsV2(
 		tokenSplitChars: splitNorm,
 		previewHideChrome:
 			typeof raw.previewHideChrome === 'boolean' ? raw.previewHideChrome : d.previewHideChrome,
-		background:
-			raw.background === 'light' || raw.background === 'dark' || raw.background === 'image'
-				? raw.background
-				: d.background,
-		backgroundImageDataUrl:
-			typeof raw.backgroundImageDataUrl === 'string'
-				? raw.backgroundImageDataUrl
-				: d.backgroundImageDataUrl
+		background: normalizePreviewBackground(raw.background ?? d.background)
 	};
 }

bitext/src/lib/serialization/serialization-roundtrip.test.ts

@@ -250,7 +250,7 @@ describe('compact v3 encode/decode (current share format)', () => {
 	it('enum coverage: lineStyle, background', () => {
 		const base = migrate({});
 		const lineStyles: LineStyle[] = ['straight', 'curved'];
-		const backgrounds: BackgroundMode[] = ['light', 'dark', 'image'];
+		const backgrounds: BackgroundMode[] = ['light', 'dark'];
 		for (const lineStyle of lineStyles) {
 			for (const background of backgrounds) {
 				const next: AppStateV2 = {

bitext/src/routes/about/+page.svelte

@@ -313,7 +313,7 @@
 	<ul class="mt-3 list-disc space-y-2 pl-6 text-gray-700 dark:text-gray-300">
 		<li>
 			<strong class="text-gray-900 dark:text-white">Style</strong> — light or dark UI, background of the
-			preview (including image background), whether connectors are curved or straight, how thick and faint
+			preview background (light or dark), whether connectors are curved or straight, how thick and faint
 			they are, default vertical space between lines, and optional per-pair spacing overrides. You can
 			also hide preview controls for a clean screenshot and open fullscreen from the preview toolbar.
 		</li>