feat(editor): add always-use-pointer-cursor toggle

src/components/video-editor/SettingsPanel.tsx

@@ -512,6 +512,8 @@ interface SettingsPanelProps {
 	onShowCursorChange?: (enabled: boolean) => void;
 	loopCursor?: boolean;
 	onLoopCursorChange?: (enabled: boolean) => void;
+	alwaysUsePointerCursor?: boolean;
+	onAlwaysUsePointerCursorChange?: (enabled: boolean) => void;
 	cursorStyle?: CursorStyle;
 	onCursorStyleChange?: (style: CursorStyle) => void;
 	cursorSize?: number;
@@ -897,6 +899,8 @@ export function SettingsPanel({
 	onShowCursorChange,
 	loopCursor = false,
 	onLoopCursorChange,
+	alwaysUsePointerCursor = false,
+	onAlwaysUsePointerCursorChange,
 	cursorStyle = DEFAULT_CURSOR_STYLE,
 	onCursorStyleChange,
 	cursorSize = 5,
@@ -1523,6 +1527,7 @@ export function SettingsPanel({
 	const resetCursorSection = () => {
 		onShowCursorChange?.(initialEditorPreferences.showCursor);
 		onLoopCursorChange?.(initialEditorPreferences.loopCursor);
+		onAlwaysUsePointerCursorChange?.(initialEditorPreferences.alwaysUsePointerCursor);
 		onCursorStyleChange?.(initialEditorPreferences.cursorStyle);
 		onCursorSizeChange?.(initialEditorPreferences.cursorSize);
 		onCursorSmoothingChange?.(initialEditorPreferences.cursorSmoothing);
@@ -3308,6 +3313,19 @@ export function SettingsPanel({
 								</label>
 							</div>
 						</div>
+						<label className="flex items-center justify-between gap-3 text-[10px] text-muted-foreground">
+							<span>
+								{tSettings(
+									"effects.alwaysUsePointerCursor",
+									"Always use pointer cursor",
+								)}
+							</span>
+							<Switch
+								checked={alwaysUsePointerCursor}
+								onCheckedChange={onAlwaysUsePointerCursorChange}
+								className="data-[state=checked]:bg-[#2563EB] scale-75"
+							/>
+						</label>
 						<div className="flex flex-col gap-1.5">
 							<div className="space-y-1.5">
 								<ToggleGroup

src/components/video-editor/VideoEditor.tsx

@@ -598,6 +598,9 @@ export default function VideoEditor() {
 	);
 	const [showCursor, setShowCursor] = useState(initialEditorPreferences.showCursor);
 	const [loopCursor, setLoopCursor] = useState(initialEditorPreferences.loopCursor);
+	const [alwaysUsePointerCursor, setAlwaysUsePointerCursor] = useState(
+		initialEditorPreferences.alwaysUsePointerCursor,
+	);
 	const [cursorStyle, setCursorStyle] = useState<CursorStyle>(
 		initialEditorPreferences.cursorStyle ?? DEFAULT_CURSOR_STYLE,
 	);
@@ -848,6 +851,7 @@ export default function VideoEditor() {
 			connectedZoomEasing,
 			showCursor,
 			loopCursor,
+			alwaysUsePointerCursor,
 			cursorStyle,
 			cursorSize,
 			cursorSmoothing,
@@ -899,6 +903,7 @@ export default function VideoEditor() {
 			connectedZoomEasing,
 			showCursor,
 			loopCursor,
+			alwaysUsePointerCursor,
 			cursorStyle,
 			cursorSize,
 			cursorSmoothing,
@@ -991,6 +996,7 @@ export default function VideoEditor() {
 		setConnectedZoomEasing(snapshot.connectedZoomEasing);
 		setShowCursor(snapshot.showCursor);
 		setLoopCursor(snapshot.loopCursor);
+		setAlwaysUsePointerCursor(snapshot.alwaysUsePointerCursor);
 		setCursorStyle(snapshot.cursorStyle);
 		setCursorSize(snapshot.cursorSize);
 		setCursorSmoothing(snapshot.cursorSmoothing);
@@ -1261,6 +1267,7 @@ export default function VideoEditor() {
 					previewHeight,
 					cursorTelemetry,
 					showCursor: effectiveShowCursor,
+					alwaysUsePointerCursor,
 					cursorStyle,
 					cursorSize,
 					cursorSmoothing,
@@ -1360,6 +1367,7 @@ export default function VideoEditor() {
 		resolvedWebcamVideoUrl,
 		shadowIntensity,
 		effectiveShowCursor,
+		alwaysUsePointerCursor,
 		speedRegions,
 		wallpaper,
 		webcam,
@@ -1733,6 +1741,7 @@ export default function VideoEditor() {
 				connectedZoomEasing: ZoomTransitionEasing;
 				showCursor: boolean;
 				loopCursor: boolean;
+				alwaysUsePointerCursor: boolean;
 				cursorStyle: CursorStyle;
 				cursorSize: number;
 				cursorSmoothing: number;
@@ -1836,6 +1845,7 @@ export default function VideoEditor() {
 				connectedZoomEasing,
 				showCursor,
 				loopCursor,
+				alwaysUsePointerCursor,
 				cursorStyle,
 				cursorSize,
 				cursorSmoothing,
@@ -1898,6 +1908,7 @@ export default function VideoEditor() {
 			connectedZoomEasing,
 			showCursor,
 			loopCursor,
+			alwaysUsePointerCursor,
 			cursorStyle,
 			cursorSize,
 			cursorSmoothing,
@@ -2096,6 +2107,7 @@ export default function VideoEditor() {
 			setConnectedZoomEasing(normalizedEditor.connectedZoomEasing);
 			setShowCursor(normalizedEditor.showCursor);
 			setLoopCursor(normalizedEditor.loopCursor);
+			setAlwaysUsePointerCursor(normalizedEditor.alwaysUsePointerCursor);
 			setCursorStyle(normalizedEditor.cursorStyle);
 			setCursorSize(normalizedEditor.cursorSize);
 			setCursorSmoothing(normalizedEditor.cursorSmoothing);
@@ -2572,6 +2584,7 @@ export default function VideoEditor() {
 			connectedZoomEasing,
 			showCursor,
 			loopCursor,
+			alwaysUsePointerCursor,
 			cursorStyle,
 			cursorSize,
 			cursorSmoothing,
@@ -2623,6 +2636,7 @@ export default function VideoEditor() {
 		connectedZoomEasing,
 		showCursor,
 		loopCursor,
+		alwaysUsePointerCursor,
 		cursorStyle,
 		cursorSize,
 		cursorSmoothing,
@@ -4274,6 +4288,7 @@ export default function VideoEditor() {
 						zoomRegions: effectiveZoomRegions,
 						cursorTelemetry: effectiveCursorTelemetry,
 						showCursor: effectiveShowCursor,
+						alwaysUsePointerCursor,
 						cursorStyle,
 						cursorSize,
 						cursorSmoothing,
@@ -4446,6 +4461,7 @@ export default function VideoEditor() {
 						zoomRegions: effectiveZoomRegions,
 						cursorTelemetry: effectiveCursorTelemetry,
 						showCursor: effectiveShowCursor,
+						alwaysUsePointerCursor,
 						cursorStyle,
 						cursorSize,
 						cursorSmoothing,
@@ -4697,6 +4713,7 @@ export default function VideoEditor() {
 			zoomOutEasing,
 			connectedZoomEasing,
 			effectiveShowCursor,
+			alwaysUsePointerCursor,
 			cursorStyle,
 			effectiveCursorTelemetry,
 			cursorSize,
@@ -5882,6 +5899,8 @@ export default function VideoEditor() {
 								onShowCursorChange={handleShowCursorChange}
 								loopCursor={loopCursor}
 								onLoopCursorChange={setLoopCursor}
+								alwaysUsePointerCursor={alwaysUsePointerCursor}
+								onAlwaysUsePointerCursorChange={setAlwaysUsePointerCursor}
 								cursorStyle={cursorStyle}
 								onCursorStyleChange={setCursorStyle}
 								cursorSize={cursorSize}
@@ -6106,6 +6125,7 @@ export default function VideoEditor() {
 												onAnnotationSizeChange={handleAnnotationSizeChange}
 												cursorTelemetry={effectiveCursorTelemetry}
 												showCursor={effectiveShowCursor}
+												alwaysUsePointerCursor={alwaysUsePointerCursor}
 												cursorStyle={cursorStyle}
 												cursorSize={cursorSize}
 												cursorSmoothing={cursorSmoothing}

src/components/video-editor/VideoPlayback.tsx

@@ -352,6 +352,7 @@ interface VideoPlaybackProps {
 	onAnnotationSizeChange?: (id: string, size: { width: number; height: number }) => void;
 	cursorTelemetry?: CursorTelemetryPoint[];
 	showCursor?: boolean;
+	alwaysUsePointerCursor?: boolean;
 	cursorStyle?: CursorStyle;
 	cursorSize?: number;
 	cursorSmoothing?: number;
@@ -430,6 +431,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			onAnnotationSizeChange,
 			cursorTelemetry = [],
 			showCursor = false,
+			alwaysUsePointerCursor = false,
 			cursorStyle = DEFAULT_CURSOR_STYLE,
 			cursorSize = DEFAULT_CURSOR_SIZE,
 			cursorSmoothing = DEFAULT_CURSOR_SMOOTHING,
@@ -554,6 +556,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const cursorEffectsCanvasRef = useRef<HTMLCanvasElement | null>(null);
 		const cursorTelemetryRef = useRef<CursorTelemetryPoint[]>([]);
 		const showCursorRef = useRef(showCursor);
+		const alwaysUsePointerCursorRef = useRef(alwaysUsePointerCursor);
 		const cursorSizeRef = useRef(cursorSize);
 		const cursorStyleRef = useRef(cursorStyle);
 		const cursorSmoothingRef = useRef(cursorSmoothing);
@@ -1511,6 +1514,11 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			cursorStyleRef.current = cursorStyle;
 		}, [cursorStyle]);
 
+		useEffect(() => {
+			alwaysUsePointerCursorRef.current = alwaysUsePointerCursor;
+			cursorOverlayRef.current?.setAlwaysUsePointerCursor(alwaysUsePointerCursor);
+		}, [alwaysUsePointerCursor]);
+
 		useEffect(() => {
 			cursorSizeRef.current = cursorSize;
 		}, [cursorSize]);
@@ -1866,6 +1874,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					const cursorOverlay = new PixiCursorOverlay({
 						dotRadius: DEFAULT_CURSOR_CONFIG.dotRadius * cursorSizeRef.current,
 						style: cursorStyleRef.current,
+						alwaysUsePointerCursor: alwaysUsePointerCursorRef.current,
 						smoothingFactor: cursorSmoothingRef.current,
 						springTuning: {
 							stiffnessMultiplier: cursorSpringStiffnessMultiplierRef.current,

src/components/video-editor/editorPreferences.ts

@@ -29,6 +29,7 @@ type PersistedEditorControls = Pick<
 	| "connectedZoomEasing"
 	| "showCursor"
 	| "loopCursor"
+	| "alwaysUsePointerCursor"
 	| "cursorStyle"
 	| "cursorSize"
 	| "cursorSmoothing"
@@ -110,6 +111,7 @@ export const DEFAULT_EDITOR_PREFERENCES: EditorPreferences = {
 	connectedZoomEasing: DEFAULT_EDITOR_CONTROLS.connectedZoomEasing,
 	showCursor: DEFAULT_EDITOR_CONTROLS.showCursor,
 	loopCursor: DEFAULT_EDITOR_CONTROLS.loopCursor,
+	alwaysUsePointerCursor: DEFAULT_EDITOR_CONTROLS.alwaysUsePointerCursor,
 	cursorStyle: DEFAULT_EDITOR_CONTROLS.cursorStyle,
 	cursorSize: DEFAULT_EDITOR_CONTROLS.cursorSize,
 	cursorSmoothing: DEFAULT_EDITOR_CONTROLS.cursorSmoothing,
@@ -289,6 +291,8 @@ function normalizeEditorControls(
 			sanitizedRaw.connectedZoomEasing ?? fallback.connectedZoomEasing,
 		showCursor: sanitizedRaw.showCursor ?? fallback.showCursor,
 		loopCursor: sanitizedRaw.loopCursor ?? fallback.loopCursor,
+		alwaysUsePointerCursor:
+			sanitizedRaw.alwaysUsePointerCursor ?? fallback.alwaysUsePointerCursor,
 		cursorStyle: sanitizedRaw.cursorStyle ?? fallback.cursorStyle,
 		cursorSize: sanitizedRaw.cursorSize ?? fallback.cursorSize,
 		cursorSmoothing: sanitizedRaw.cursorSmoothing ?? fallback.cursorSmoothing,
@@ -361,6 +365,7 @@ function normalizeEditorControls(
 		connectedZoomEasing: normalized.connectedZoomEasing,
 		showCursor: normalized.showCursor,
 		loopCursor: normalized.loopCursor,
+		alwaysUsePointerCursor: normalized.alwaysUsePointerCursor,
 		cursorStyle: normalized.cursorStyle,
 		cursorSize: normalized.cursorSize,
 		cursorSmoothing: normalized.cursorSmoothing,

src/components/video-editor/projectPersistence.ts

@@ -96,6 +96,7 @@ export interface ProjectEditorState {
 	connectedZoomEasing: ZoomTransitionEasing;
 	showCursor: boolean;
 	loopCursor: boolean;
+	alwaysUsePointerCursor: boolean;
 	cursorStyle: CursorStyle;
 	cursorSize: number;
 	cursorSmoothing: number;
@@ -880,6 +881,10 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 		),
 		showCursor: typeof editor.showCursor === "boolean" ? editor.showCursor : true,
 		loopCursor: typeof editor.loopCursor === "boolean" ? editor.loopCursor : false,
+		alwaysUsePointerCursor:
+			typeof editor.alwaysUsePointerCursor === "boolean"
+				? editor.alwaysUsePointerCursor
+				: false,
 		cursorStyle: normalizedCursorStyle,
 		cursorSize: normalizedMotionPreset.cursorSize,
 		cursorSmoothing: normalizedMotionPreset.cursorSmoothing,

src/components/video-editor/videoPlayback/cursorRenderer.ts

@@ -89,6 +89,7 @@ export interface CursorRenderConfig {
 	sway: number;
 	/** Cursor visual style. */
 	style: CursorStyle;
+	alwaysUsePointerCursor: boolean;
 }
 
 export const DEFAULT_CURSOR_CONFIG: CursorRenderConfig = {
@@ -107,6 +108,7 @@ export const DEFAULT_CURSOR_CONFIG: CursorRenderConfig = {
 	clickBounceDuration: DEFAULT_CURSOR_CLICK_BOUNCE_DURATION,
 	sway: 0,
 	style: DEFAULT_CURSOR_STYLE,
+	alwaysUsePointerCursor: false,
 };
 
 const REFERENCE_WIDTH = 1920;
@@ -1011,6 +1013,10 @@ export class PixiCursorOverlay {
 		this.config.sway = clamp(sway, 0, 2);
 	}
 
+	setAlwaysUsePointerCursor(enabled: boolean) {
+		this.config.alwaysUsePointerCursor = enabled;
+	}
+
 	setStyle(style: CursorStyle) {
 		this.config.style = style;
 		if (isStatefulCursorStyle(style)) {
@@ -1108,11 +1114,14 @@ export class PixiCursorOverlay {
 		const px = viewport.x + this.state.x * viewport.width;
 		const py = viewport.y + this.state.y * viewport.height;
 		const h = this.config.dotRadius * getCursorViewportScale(viewport);
-		const { cursorType, clickBounceProgress } = getCursorVisualState(
+		const { cursorType: rawCursorType, clickBounceProgress } = getCursorVisualState(
 			samples,
 			timeMs,
 			this.config.clickBounceDuration,
 		);
+		const cursorType: CursorAssetKey = this.config.alwaysUsePointerCursor
+			? "pointer"
+			: rawCursorType;
 		const bounceScale = Math.max(
 			0.72,
 			1 - Math.sin(clickBounceProgress * Math.PI) * (0.08 * this.config.clickBounce),
@@ -1317,11 +1326,12 @@ export function drawCursorOnCanvas(
 	const px = viewport.x + smoothedState.x * viewport.width;
 	const py = viewport.y + smoothedState.y * viewport.height;
 	const h = config.dotRadius * getCursorViewportScale(viewport);
-	const { cursorType, clickBounceProgress } = getCursorVisualState(
+	const { cursorType: rawCursorType, clickBounceProgress } = getCursorVisualState(
 		samples,
 		timeMs,
 		config.clickBounceDuration,
 	);
+	const cursorType: CursorAssetKey = config.alwaysUsePointerCursor ? "pointer" : rawCursorType;
 	const spriteKey = (
 		cursorType && loadedCursorAssets[cursorType] ? cursorType : "arrow"
 	) as CursorAssetKey;

src/i18n/locales/en/settings.json

@@ -30,6 +30,7 @@
 		"show": "Show",
 		"showCursor": "Show Cursor",
 		"loopCursor": "Loop cursor",
+		"alwaysUsePointerCursor": "Always use pointer cursor",
 		"cursorStyle": "Cursor Style",
 		"cursorStyleOptions": {
 			"macos": "macOS",

src/i18n/locales/es/settings.json

@@ -30,6 +30,7 @@
 		"show": "Mostrar",
 		"showCursor": "Mostrar cursor",
 		"loopCursor": "Cursor en bucle",
+		"alwaysUsePointerCursor": "Usar siempre el cursor puntero",
 		"cursorStyle": "Estilo del cursor",
 		"cursorStyleOptions": {
 			"macos": "macOS",

src/i18n/locales/fr/settings.json

@@ -30,6 +30,7 @@
 		"show": "Afficher",
 		"showCursor": "Afficher le curseur",
 		"loopCursor": "Boucler le curseur",
+		"alwaysUsePointerCursor": "Toujours utiliser le curseur pointeur",
 		"cursorStyle": "Style du curseur",
 		"cursorStyleOptions": {
 			"macos": "macOS",

src/i18n/locales/it/settings.json

@@ -30,6 +30,7 @@
 		"show": "Mostra",
 		"showCursor": "Mostra cursore",
 		"loopCursor": "Cursore in loop",
+		"alwaysUsePointerCursor": "Usa sempre il cursore puntatore",
 		"cursorStyle": "Stile cursore",
 		"cursorStyleOptions": {
 			"macos": "macOS",

src/i18n/locales/ko/settings.json

@@ -30,6 +30,7 @@
 		"show": "표시",
 		"showCursor": "커서 표시",
 		"loopCursor": "커서 반복",
+		"alwaysUsePointerCursor": "항상 포인터 커서 사용",
 		"cursorStyle": "커서 스타일",
 		"cursorStyleOptions": {
 			"macos": "macOS",

src/i18n/locales/nl/settings.json

@@ -30,6 +30,7 @@
 		"show": "Tonen",
 		"showCursor": "Cursor tonen",
 		"loopCursor": "Cursor herhalen",
+		"alwaysUsePointerCursor": "Altijd aanwijzer-cursor gebruiken",
 		"cursorStyle": "Cursorstijl",
 		"cursorStyleOptions": {
 			"macos": "macOS",

src/i18n/locales/pt-BR/settings.json

@@ -30,6 +30,7 @@
 		"show": "Mostrar",
 		"showCursor": "Mostrar cursor",
 		"loopCursor": "Loop do cursor",
+		"alwaysUsePointerCursor": "Usar sempre cursor de ponteiro",
 		"cursorStyle": "Estilo do cursor",
 		"cursorStyleOptions": {
 			"macos": "macOS",