feat: add project-owned custom cursor uploads

Author: prokop-solutions

electron/ai-edition/document-service.test.ts

@@ -37,6 +37,33 @@ describe("DocumentService", () => {
 		await fs.rm(mediaDir, { recursive: true, force: true });
 	});
 
+	it("keeps custom cursor images in the project across save, reload, and style changes", async () => {
+		const created = await service.createProject("Custom cursor");
+		const customTheme = {
+			arrow: "data:image/png;base64,YXJyb3c=",
+			pointer: "data:image/png;base64,aGFuZA==",
+			text: "data:image/jpeg;base64,dGV4dA==",
+		};
+		await service.saveProject(
+			patchEditorSettings(created, {
+				cursor: { theme: "custom", customTheme },
+			}),
+		);
+		const reopened = await new DocumentService(tempDir, mediaDir).getProject(created.project.id);
+		expect(getEditorSettings(reopened).cursorTheme).toBe("custom");
+		expect(getEditorSettings(reopened).cursorCustomTheme).toEqual(customTheme);
+		expect(
+			getEditorSettings(await service.createProject("Inherited custom look")).cursorCustomTheme,
+		).toEqual(customTheme);
+		await service.saveProject(patchEditorSettings(reopened, { cursor: { theme: "default" } }));
+		const switched = await service.getProject(created.project.id);
+		expect(getEditorSettings(switched).cursorCustomTheme).toEqual(customTheme);
+		await service.saveProject(patchEditorSettings(switched, { cursor: { customTheme: {} } }));
+		expect(
+			getEditorSettings(await service.getProject(created.project.id)).cursorCustomTheme,
+		).toEqual({});
+	});
+
 	describe("createProject", () => {
 		it("creates a v8 doc with the given title and writes it to disk", async () => {
 			const doc = await service.createProject("Demo Project");

electron/native-bridge/services/compositorViewService.test.ts

@@ -801,6 +801,16 @@ describe("resolveSceneAssetPaths", () => {
 		expect(out.background.path).toBe(dataUrl);
 	});
 
+	it("leaves custom cursor upload data URLs untouched", () => {
+		const dataUrl = "data:image/png;base64,SGkh";
+		const sprites = resolved({
+			cursor: { theme: "custom", customTheme: { pointer: dataUrl } },
+		}).cursor.cursorSprites;
+
+		expect(sprites.pointer.path).toBe(dataUrl);
+		expect(sprites.arrow.path).toBe(path.join(resources, "cursors", "default", "arrow.png"));
+	});
+
 	it("gives the default theme the built-in arrow, not a placeholder", () => {
 		// Regression: "default" used to resolve to no sprite at all, and the compositor drew
 		// its dot-and-ring fallback — a dot in a circle where the standard arrow belongs.

electron/native-bridge/services/compositorViewService.ts

@@ -5,6 +5,7 @@ import { fileURLToPath } from "node:url";
 import { app, sharedTexture, type WebFrameMain } from "electron";
 import {
 	type CursorKind,
+	type CustomCursorTheme,
 	readCursorAsArrow,
 	resolveCursorSprites,
 } from "../../../src/lib/cursor/cursorThemes";
@@ -121,10 +122,15 @@ function resolveCursorSpritePaths(
 	themeId: string,
 	asArrow: readonly CursorKind[],
 	model3d = false,
+	customTheme?: CustomCursorTheme,
 ): Record<string, SceneCursorSprite> {
 	const resolved: Record<string, SceneCursorSprite> = {};
-	for (const [type, sprite] of Object.entries(resolveCursorSprites(themeId, asArrow, model3d))) {
-		const absolute = resolveSceneAssetPath(sprite.assetPath);
+	for (const [type, sprite] of Object.entries(
+		resolveCursorSprites(themeId, asArrow, model3d, customTheme),
+	)) {
+		const absolute = sprite.assetPath.startsWith("data:image/")
+			? sprite.assetPath
+			: resolveSceneAssetPath(sprite.assetPath);
 		if (absolute) {
 			resolved[type] = {
 				path: absolute,
@@ -151,6 +157,7 @@ export function resolveSceneAssetPaths(sceneJson: string): string {
 				theme?: string;
 				asArrow?: unknown;
 				model3d?: boolean;
+				customTheme?: CustomCursorTheme;
 				cursorSprites?: Record<string, SceneCursorSprite>;
 			};
 			webcamEffect?: {
@@ -187,6 +194,7 @@ export function resolveSceneAssetPaths(sceneJson: string): string {
 				scene.cursor.theme,
 				readCursorAsArrow(scene.cursor.asArrow, undefined, []),
 				scene.cursor.model3d === true,
+				scene.cursor.customTheme,
 			);
 			changed = true;
 		}

src/components/ai-edition/CursorPane.levels.test.tsx

@@ -151,10 +151,12 @@ describe("CursorPane cursor types", () => {
 		expect(asArrow()).toEqual(["pointer"]);
 	});
 
-	it("offers nothing to redraw when the video only shows the arrow", async () => {
+	it("keeps the hand and text controls when the video only shows the arrow", async () => {
 		renderWithRecording({}, ["arrow", null]);
 		await waitFor(() => expect(nativeBridgeClient.cursor.getRecordingData).toHaveBeenCalled());
-		expect(screen.queryByRole("group", { name: "Cursor types" })).toBeNull();
+		const group = screen.getByRole("group", { name: "Cursor types" });
+		expect(within(group).getByRole("button", { name: "Hand" })).toBeTruthy();
+		expect(within(group).getByRole("button", { name: "Text" })).toBeTruthy();
 	});
 
 	// A cursor file still being written right after a take must not hide the row all session.
@@ -165,7 +167,7 @@ describe("CursorPane cursor types", () => {
 		await waitFor(() => expect(read).toHaveBeenCalledTimes(1));
 		// Let the failed read settle before the pane opens again.
 		await new Promise((resolve) => setTimeout(resolve, 0));
-		expect(screen.queryByRole("group", { name: "Cursor types" })).toBeNull();
+		expect(screen.getByRole("group", { name: "Cursor types" })).toBeTruthy();
 
 		cleanup();
 		renderProject({}, originalPath);

src/components/ai-edition/CursorPane.preview.test.tsx

@@ -1,9 +1,14 @@
 // @vitest-environment jsdom
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { toast } from "sonner";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/contexts/I18nContext";
 import { LOCALE_STORAGE_KEY } from "@/i18n/config";
-import { CURSOR_THEMES } from "@/lib/cursor/cursorThemes";
+import { createEmptyDocument } from "@/lib/ai-edition/schema";
+import { getEditorSettings } from "@/lib/ai-edition/store/editorSettings";
+import { useProjectStore } from "@/lib/ai-edition/store/projectStore";
+import { CURSOR_THEMES, DEFAULT_CURSOR_SPRITES } from "@/lib/cursor/cursorThemes";
+import { nativeBridgeClient } from "@/native";
 import { CursorPane } from "./RightPanes";
 
 function stubStorage() {
@@ -30,12 +35,28 @@ function stubStorage() {
 beforeEach(() => {
 	stubStorage();
 	window.localStorage.setItem(LOCALE_STORAGE_KEY, "en");
+	vi.spyOn(nativeBridgeClient.aiEdition, "save").mockImplementation(async (document) => ({
+		success: true,
+		document,
+	}));
 });
 
 afterEach(() => {
 	cleanup();
+	useProjectStore.getState().clear();
+	vi.restoreAllMocks();
 });
 
+function renderWithProject(legacyEditor: Record<string, unknown> = {}) {
+	const document = { ...createEmptyDocument({ projectId: "p", title: "t" }), legacyEditor };
+	useProjectStore.setState({ projectId: "p", document });
+	return render(
+		<I18nProvider>
+			<CursorPane />
+		</I18nProvider>,
+	);
+}
+
 describe("CursorPane theme picker", () => {
 	it("shows the original cursor themes beside the default", () => {
 		expect(CURSOR_THEMES).toHaveLength(6);
@@ -50,4 +71,157 @@ describe("CursorPane theme picker", () => {
 			expect(button.querySelectorAll("img")).toHaveLength(1);
 		}
 	});
+
+	it("opens a three-slot custom cursor upload panel from the plus button", () => {
+		renderWithProject();
+		fireEvent.click(screen.getByRole("button", { name: "Add custom cursor" }));
+		const panel = screen.getByRole("group", { name: "Custom cursor" });
+		expect(within(panel).getByRole("button", { name: "Arrow" })).toBeTruthy();
+		expect(within(panel).getByRole("button", { name: "Hand" })).toBeTruthy();
+		expect(within(panel).getByRole("button", { name: "Text" })).toBeTruthy();
+		expect(panel.textContent).toBe("");
+		for (const [label, kind] of [
+			["Arrow", "arrow"],
+			["Hand", "pointer"],
+			["Text", "text"],
+		] as const) {
+			expect(
+				within(panel)
+					.getByRole("button", { name: label })
+					.querySelector("img")
+					?.getAttribute("src"),
+			).toContain(DEFAULT_CURSOR_SPRITES[kind].assetPath);
+		}
+		fireEvent.pointerDown(within(panel).getByRole("button", { name: "Text" }));
+		expect(screen.getByRole("group", { name: "Custom cursor" })).toBeTruthy();
+		fireEvent.pointerDown(document.body);
+		expect(screen.queryByRole("group", { name: "Custom cursor" })).toBeNull();
+	});
+
+	it("closes with Escape and toggles from the plus button", () => {
+		renderWithProject();
+		const add = screen.getByRole("button", { name: "Add custom cursor" });
+		fireEvent.click(add);
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(screen.queryByRole("group", { name: "Custom cursor" })).toBeNull();
+		fireEvent.click(add);
+		fireEvent.pointerDown(add);
+		fireEvent.click(add);
+		expect(screen.queryByRole("group", { name: "Custom cursor" })).toBeNull();
+	});
+
+	it("uploads one image with a blank MIME type, then adds other states without losing it", async () => {
+		const { container } = renderWithProject();
+		fireEvent.click(screen.getByRole("button", { name: "Add custom cursor" }));
+		const panel = screen.getByRole("group", { name: "Custom cursor" });
+		const input = container.querySelector<HTMLInputElement>('input[type="file"]');
+		if (!input) throw new Error("Missing cursor upload input");
+		let uploads = 0;
+		const upload = async (label: string, name: string, contents: string) => {
+			uploads += 1;
+			fireEvent.click(within(panel).getByRole("button", { name: label }));
+			fireEvent.change(input, { target: { files: [new File([contents], name)] } });
+			await waitFor(() => expect(nativeBridgeClient.aiEdition.save).toHaveBeenCalledTimes(uploads));
+		};
+		await upload("Arrow", "arrow.PNG", "arrow-image");
+		const arrow = getEditorSettings(useProjectStore.getState().document).cursorCustomTheme.arrow;
+		expect(arrow).toMatch(/^data:image\/png;base64,/);
+		expect(screen.getByRole("button", { name: "Custom" }).getAttribute("aria-pressed")).toBe(
+			"true",
+		);
+		await upload("Hand", "hand.png", "hand-image");
+		await upload("Text", "text.jpg", "text-image");
+		const theme = getEditorSettings(useProjectStore.getState().document).cursorCustomTheme;
+		expect(theme.arrow).toBe(arrow);
+		expect(theme.pointer).toMatch(/^data:image\/png;base64,/);
+		expect(theme.text).toMatch(/^data:image\/jpeg;base64,/);
+		await upload("Replace Arrow image", "replacement.png", "replacement-image");
+		const replaced = getEditorSettings(useProjectStore.getState().document).cursorCustomTheme;
+		expect(replaced.arrow).not.toBe(arrow);
+		expect(replaced.pointer).toBe(theme.pointer);
+		expect(replaced.text).toBe(theme.text);
+		expect(screen.getAllByRole("button", { name: "Custom" })).toHaveLength(1);
+		fireEvent.click(screen.getByRole("button", { name: "Default" }));
+		await waitFor(() =>
+			expect(getEditorSettings(useProjectStore.getState().document).cursorTheme).toBe("default"),
+		);
+		fireEvent.click(screen.getByRole("button", { name: "Custom" }));
+		await waitFor(() =>
+			expect(getEditorSettings(useProjectStore.getState().document).cursorTheme).toBe("custom"),
+		);
+		expect(getEditorSettings(useProjectStore.getState().document).cursorCustomTheme).toEqual(
+			replaced,
+		);
+	});
+
+	it("removes one custom image while keeping the other images and the selected style", async () => {
+		const arrow = "data:image/png;base64,YXJyb3c=";
+		const pointer = "data:image/png;base64,aGFuZA==";
+		renderWithProject({ cursorTheme: "custom", cursorCustomTheme: { arrow, pointer } });
+		fireEvent.click(screen.getByRole("button", { name: "Add custom cursor" }));
+		fireEvent.click(screen.getByRole("button", { name: "Remove Hand image" }));
+		await waitFor(() => {
+			const settings = getEditorSettings(useProjectStore.getState().document);
+			expect(settings.cursorCustomTheme).toEqual({ arrow });
+			expect(settings.cursorTheme).toBe("custom");
+		});
+		expect(screen.queryByRole("button", { name: "Remove Hand image" })).toBeNull();
+		expect(
+			within(screen.getByRole("group", { name: "Custom cursor" })).getByRole("button", {
+				name: "Hand",
+			}),
+		).toBeTruthy();
+	});
+
+	it.each([
+		"custom",
+		"studio-ink",
+	])("removes the last custom image safely while %s is selected", async (selected) => {
+		renderWithProject({
+			cursorTheme: selected,
+			cursorCustomTheme: { text: "data:image/png;base64,dGV4dA==" },
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Add custom cursor" }));
+		fireEvent.click(screen.getByRole("button", { name: "Remove Text image" }));
+		await waitFor(() => {
+			const settings = getEditorSettings(useProjectStore.getState().document);
+			expect(settings.cursorCustomTheme).toEqual({});
+			expect(settings.cursorTheme).toBe(selected === "custom" ? "default" : selected);
+		});
+		expect(screen.queryByRole("button", { name: "Custom" })).toBeNull();
+		expect(screen.queryByRole("button", { name: "Delete custom cursor set" })).toBeNull();
+	});
+
+	it("deletes the whole custom cursor set without closing the upload panel", async () => {
+		renderWithProject({
+			cursorTheme: "custom",
+			cursorCustomTheme: {
+				arrow: "data:image/png;base64,YXJyb3c=",
+				pointer: "data:image/png;base64,aGFuZA==",
+			},
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Add custom cursor" }));
+		fireEvent.click(screen.getByRole("button", { name: "Delete custom cursor set" }));
+		await waitFor(() =>
+			expect(getEditorSettings(useProjectStore.getState().document).cursorCustomTheme).toEqual({}),
+		);
+		expect(getEditorSettings(useProjectStore.getState().document).cursorTheme).toBe("default");
+		expect(screen.queryByRole("button", { name: "Custom" })).toBeNull();
+		expect(
+			within(screen.getByRole("group", { name: "Custom cursor" })).getAllByRole("button"),
+		).toHaveLength(3);
+	});
+
+	it("rejects unsupported files without changing the project", () => {
+		const error = vi.spyOn(toast, "error");
+		const { container } = renderWithProject();
+		const input = container.querySelector<HTMLInputElement>('input[type="file"]');
+		if (!input) throw new Error("Missing cursor upload input");
+		fireEvent.change(input, {
+			target: { files: [new File(["text"], "fake.png", { type: "text/plain" })] },
+		});
+		expect(error).toHaveBeenCalled();
+		expect(nativeBridgeClient.aiEdition.save).not.toHaveBeenCalled();
+		expect(getEditorSettings(useProjectStore.getState().document).cursorCustomTheme).toEqual({});
+	});
 });

src/components/ai-edition/NewEditorShell.module.css

@@ -1448,6 +1448,58 @@ textarea.control {
 .cursorCellOff img { opacity: 0.35; transition: opacity 150ms ease; }
 .cursorCellOff:hover:not(:disabled) img { opacity: 0.7; }
 .cursorCellFixed { cursor: default; }
+.customCursorPanel {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 6px;
+	margin: calc(-1 * var(--sp-2)) var(--sp-4) var(--sp-4);
+	padding: var(--sp-2);
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-md);
+	background: color-mix(in oklab, var(--fg) 4%, transparent);
+}
+.customCursorSlot {
+	min-width: 0;
+	width: 100%;
+	aspect-ratio: 1;
+	border: 1px solid transparent;
+	border-radius: var(--r-sm);
+	background: color-mix(in oklab, var(--fg) 5%, transparent);
+	color: var(--muted);
+	display: grid;
+	place-items: center;
+	gap: var(--sp-1);
+	padding: var(--sp-2);
+	font: 600 0.72rem var(--font-body);
+	cursor: pointer;
+	transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
+}
+.customCursorSlot:hover {
+	border-color: var(--border-hi);
+	color: var(--fg-2);
+}
+.customCursorSlot:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+.customCursorUploadSlot { position: relative; min-width: 0; }
+.customCursorSlot.isActive { border-color: var(--accent); }
+.customCursorRemove, .customCursorDelete {
+	display: grid;
+	place-items: center;
+	width: 24px;
+	height: 24px;
+	padding: 0;
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-sm);
+	background: var(--surface-2);
+	color: var(--muted);
+	cursor: pointer;
+}
+.customCursorRemove { position: absolute; top: 2px; right: 2px; }
+.customCursorDelete { width: 28px; height: 28px; }
+.customCursorRemove:hover, .customCursorDelete:hover { color: var(--danger); border-color: var(--danger); }
+.customCursorActions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
 /* A row that belongs to the grid right above it: the 3D switch under the cursor style. */
 .paneRowTight { margin-top: calc(-1 * var(--sp-2)); }
 /* Same cell, reused for the icon+label rows (camera shape, camera background).