fix(editor): keep a hex draft in the Custom background rows

ColorField emits #abc while a hex is typed. The Custom rows forwarded it, the
value came back normalised and replaced the draft mid-typing. They now
forward only complete #rrggbb, and the gradient row keeps the colour as
picked instead of reading back the lightness-bounded first stop.

Author: EtienneLescot

src/components/ai-edition/RightPanes.backgroundPicker.test.tsx

@@ -5,6 +5,7 @@
 
 import "@testing-library/jest-dom";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/contexts/I18nContext";
 import { LOCALE_STORAGE_KEY } from "@/i18n/config";
@@ -82,6 +83,67 @@ describe("gradient tab", () => {
 	});
 });
 
+/** The picker wired like the pane: a live change comes back as the new value. */
+function Stateful({ initial, onLive }: { initial: string; onLive: (v: string) => void }) {
+	const [value, setValue] = useState(initial);
+	return (
+		<WallpaperPicker
+			value={value}
+			hasDocument
+			onChange={setValue}
+			onLiveChange={(v) => {
+				onLive(v);
+				setValue(v);
+			}}
+			onCommit={() => undefined}
+			onPickFile={() => undefined}
+			updateNativeBackground={false}
+		/>
+	);
+}
+
+describe("typing a hex in a Custom row", () => {
+	function typeHex(button: string, initial: string, text: string) {
+		const onLive = vi.fn();
+		render(
+			<I18nProvider>
+				<Stateful initial={initial} onLive={onLive} />
+			</I18nProvider>,
+		);
+		fireEvent.click(screen.getByRole("button", { name: button }));
+		const input = screen.getByRole("textbox", { name: "Color wheel" }) as HTMLInputElement;
+		fireEvent.change(input, { target: { value: text } });
+		return { onLive, input };
+	}
+
+	it("keeps a 3-digit draft on the gradient row instead of replacing it", () => {
+		const { onLive, input } = typeHex(
+			"Gradient from one color",
+			"linear-gradient(135deg, #3b82f6, #8b5cf6)",
+			"#abc",
+		);
+		expect(onLive).not.toHaveBeenCalled();
+		expect(input.value).toBe("#abc");
+	});
+
+	it("keeps a 3-digit draft on the colour row instead of replacing it", () => {
+		const { onLive, input } = typeHex("Custom color", "#16171d", "#abc");
+		expect(onLive).not.toHaveBeenCalled();
+		expect(input.value).toBe("#abc");
+	});
+
+	it("keeps a dark pick as typed, though the gradient lifts its lightness", () => {
+		const { onLive, input } = typeHex(
+			"Gradient from one color",
+			"linear-gradient(135deg, #3b82f6, #8b5cf6)",
+			"#000000",
+		);
+		expect(onLive).toHaveBeenCalledTimes(1);
+		expect(parseCssGradient(onLive.mock.calls[0][0])?.stops[0].color).not.toBe("#000000");
+		expect(input.value).toBe("#000000");
+	});
+});
+
 describe("color tab", () => {
 	it("shows the palette before the custom colour, and writes what is picked there", () => {
 		const { onLiveChange } = renderPicker("#16171d");

src/components/ai-edition/RightPanes.tsx

@@ -442,6 +442,7 @@ function useMemoCustomWallpapers(current: string): string[] {
 
 /** The seed the one-colour gradient starts from when the wallpaper is not one of its own. */
 const GRADIENT_SEED_FALLBACK = "#3b82f6";
+const FULL_HEX = /^#[0-9a-f]{6}$/i;
 
 /**
  * The free choice, folded behind the curated set: a "Custom" row under the swatches whose
@@ -472,7 +473,12 @@ function CustomBackgroundRow({
 				value={value}
 				swatch={swatch}
 				disabled={!hasDocument}
-				onChange={onChange}
+				// Only a complete #rrggbb goes out. ColorField also emits "#abc" while the hex is
+				// being typed; forwarding it wrote a value that came back normalised and replaced
+				// the draft under the user's fingers.
+				onChange={(hex) => {
+					if (FULL_HEX.test(hex)) onChange(hex.toLowerCase());
+				}}
 				onCommit={onCommit}
 			/>
 		</div>
@@ -566,7 +572,14 @@ export function WallpaperPicker({
 	const live = onLiveChange ?? onChange;
 	const commit = () => void onCommit?.();
 	const customUrls = useMemoCustomWallpapers(value);
-	const seed = gradientSeedColor(value) ?? GRADIENT_SEED_FALLBACK;
+	// The colour the user picked, kept as picked: the gradient's first stop is that colour held
+	// inside 35–85% lightness, so reading it back would move a dark pick under the user. It only
+	// stands while the wallpaper is still the gradient it made; a preset or undo replaces it.
+	const [picked, setPicked] = useState<string | null>(null);
+	const seed =
+		picked && oneColorGradient(picked) === value
+			? picked
+			: (gradientSeedColor(value) ?? GRADIENT_SEED_FALLBACK);
 
 	const isSelected = (candidate: string) => value === candidate;
 	const tabs = [
@@ -663,7 +676,10 @@ export function WallpaperPicker({
 						value={seed}
 						swatch={oneColorGradient(seed)}
 						hasDocument={hasDocument}
-						onChange={(hex) => live(oneColorGradient(hex))}
+						onChange={(hex) => {
+							setPicked(hex);
+							live(oneColorGradient(hex));
+						}}
 						onCommit={commit}
 					/>
 				</>