Match macOS cursor height to Tahoe

src/components/video-editor/SettingsPanel.tsx

@@ -76,10 +76,15 @@ import {
 	SPEED_OPTIONS,
 } from "./types";
 import { fromCursorSwaySliderValue, toCursorSwaySliderValue } from "./videoPlayback/cursorSway";
-import { cursorSetAssets } from "./videoPlayback/uploadedCursorAssets";
+import {
+	cursorSetAssets,
+	getCursorStyleSizeMultiplier,
+} from "./videoPlayback/uploadedCursorAssets";
 import { getWebcamPositionForPreset, resolveWebcamCorner } from "./webcamOverlay";
 
 const tahoeCursorUrl = cursorSetAssets.tahoe.arrow.url;
+const BUILTIN_CURSOR_PREVIEW_SIZE = 28;
+const BUILTIN_CURSOR_PREVIEW_FRAME_SIZE = 48;
 
 const GRADIENTS = [
 	"linear-gradient( 111.6deg,  rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
@@ -653,14 +658,27 @@ function CursorStylePreview({
 						? (previewUrls["tahoe-inverted"] ?? tahoeCursorUrl)
 						: previewUrls[style];
 
-	if (style === "macos" || style === "tahoe") {
+	if (style === "macos" || style === "tahoe" || style === "tahoe-inverted") {
+		const previewSize = BUILTIN_CURSOR_PREVIEW_SIZE * getCursorStyleSizeMultiplier(style);
 		return (
-			<img
-				src={previewSrc}
-				alt=""
-				className="h-7 w-7 object-contain drop-shadow-[0_8px_12px_rgba(15,23,42,0.18)]"
-				draggable={false}
-			/>
+			<div
+				className="flex items-center justify-center"
+				style={{
+					width: `${BUILTIN_CURSOR_PREVIEW_FRAME_SIZE}px`,
+					height: `${BUILTIN_CURSOR_PREVIEW_FRAME_SIZE}px`,
+				}}
+			>
+				<img
+					src={previewSrc ?? tahoeCursorUrl}
+					alt=""
+					className="max-w-none object-contain drop-shadow-[0_8px_12px_rgba(15,23,42,0.18)]"
+					draggable={false}
+					style={{
+						width: `${previewSize}px`,
+						height: `${previewSize}px`,
+					}}
+				/>
+			</div>
 		);
 	}
 

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

@@ -17,7 +17,7 @@ import {
 	resetSpringState,
 	stepSpringValue,
 } from "./motionSmoothing";
-import { cursorSetAssets } from "./uploadedCursorAssets";
+import { cursorSetAssets, getCursorStyleSizeMultiplier } from "./uploadedCursorAssets";
 
 type CursorAssetKey = NonNullable<CursorTelemetryPoint["cursorType"]>;
 type StatefulCursorStyle = Extract<CursorStyle, "macos" | "tahoe" | "tahoe-inverted">;
@@ -95,14 +95,6 @@ const CURSOR_SHADOW_OFFSET_X = 0;
 const CURSOR_SHADOW_OFFSET_Y = 2;
 const CURSOR_SHADOW_BLUR = 3;
 const CURSOR_SHADOW_PADDING = 12;
-const MACOS_POINTER_RAW_HEIGHT = 746;
-const TAHOE_POINTER_RAW_HEIGHT = 958;
-const CURSOR_STYLE_SIZE_MULTIPLIERS: Record<StatefulCursorStyle, number> = {
-	macos: TAHOE_POINTER_RAW_HEIGHT / MACOS_POINTER_RAW_HEIGHT,
-	tahoe: 1,
-	"tahoe-inverted": 1,
-};
-
 let cursorAssetsPromise: Promise<void> | null = null;
 let cursorPackAssetsPromise: Promise<void> | null = null;
 let loadedCursorPackSourcesSignature = "";
@@ -163,10 +155,6 @@ function isSingleCursorStyle(style: CursorStyle): style is SingleCursorStyle {
 	return style === "dot" || style === "figma";
 }
 
-function getCursorStyleSizeMultiplier(style: CursorStyle) {
-	return isStatefulCursorStyle(style) ? CURSOR_STYLE_SIZE_MULTIPLIERS[style] : 1;
-}
-
 function resolveCursorPackVariant(cursorType: CursorAssetKey): CursorPackVariant {
 	return CURSOR_PACK_POINTER_TYPES.has(cursorType) ? "pointer" : "default";
 }

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

@@ -21,6 +21,16 @@ import type { CursorStyle, CursorTelemetryPoint } from "../types";
 type CursorAssetKey = NonNullable<CursorTelemetryPoint["cursorType"]>;
 type CursorSetStyle = Extract<CursorStyle, "macos" | "tahoe" | "tahoe-inverted">;
 
+const MACOS_POINTER_ASSET_HEIGHT = 746;
+const MACOS_POINTER_CONTENT_HEIGHT = 386;
+const TAHOE_POINTER_ASSET_HEIGHT = 958;
+const TAHOE_POINTER_CONTENT_HEIGHT = 851;
+
+// Measured from the raw pointer assets using the non-shadow pixel bounds.
+const MACOS_CURSOR_STYLE_SIZE_MULTIPLIER =
+	(TAHOE_POINTER_CONTENT_HEIGHT / TAHOE_POINTER_ASSET_HEIGHT) /
+	(MACOS_POINTER_CONTENT_HEIGHT / MACOS_POINTER_ASSET_HEIGHT);
+
 export type UploadedCursorAsset = {
 	url: string;
 	fallbackAnchor: {
@@ -67,4 +77,16 @@ export const cursorSetAssets: Record<
 	},
 };
 
+export const cursorStyleSizeMultipliers: Record<CursorSetStyle, number> = {
+	macos: MACOS_CURSOR_STYLE_SIZE_MULTIPLIER,
+	tahoe: 1,
+	"tahoe-inverted": 1,
+};
+
+export function getCursorStyleSizeMultiplier(style: CursorStyle) {
+	return style in cursorStyleSizeMultipliers
+		? cursorStyleSizeMultipliers[style as CursorSetStyle]
+		: 1;
+}
+
 export const uploadedCursorAssets = cursorSetAssets.tahoe;