refactor: restructure files to their domains, new preview overlay system, and dep graph

23 files changed, 0 insertions, 5363 deletions

diff --git a/apps/web/src/lib/masks/__tests__/snap.test.ts b/apps/web/src/lib/masks/__tests__/snap.test.ts
deleted file mode 100644
index e2f9cafb..00000000
--- a/apps/web/src/lib/masks/__tests__/snap.test.ts
+++ /dev/null
@@ -1,487 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import {
-	findClosestPointOnCustomMaskSegment,
-	getCustomMaskClosedStateAfterPointRemoval,
-	insertPointIntoCustomMaskSegment,
-	removeCustomMaskPoints,
-} from "@/lib/masks/custom-path";
-import {
-	appendPointToCustomMask,
-	customMaskDefinition,
-	insertPointOnCustomMaskSegment,
-} from "@/lib/masks/definitions/custom";
-import { getSplitMaskStrokeSegment } from "@/lib/masks/definitions/split";
-import { textMaskDefinition } from "@/lib/masks/definitions/text";
-import { getMaskSnapGeometry } from "@/lib/masks/geometry";
-import { snapMaskInteraction } from "@/lib/masks/snap";
-import type { ElementBounds } from "@/lib/preview/element-bounds";
-import type {
-	CustomMaskParams,
-	RectangleMaskParams,
-	SplitMaskParams,
-	TextMaskParams,
-} from "@/lib/masks/types";
-
-const bounds: ElementBounds = {
-	cx: 200,
-	cy: 150,
-	width: 200,
-	height: 100,
-	rotation: 0,
-};
-
-const canvasSize = {
-	width: 400,
-	height: 300,
-};
-
-const snapThreshold = {
-	x: 8,
-	y: 8,
-};
-
-function buildSplitParams(
-	overrides: Partial<SplitMaskParams> = {},
-): SplitMaskParams {
-	return {
-		feather: 0,
-		inverted: false,
-		strokeColor: "#ffffff",
-		strokeWidth: 0,
-		strokeAlign: "center",
-		centerX: 0,
-		centerY: 0,
-		rotation: 0,
-		...overrides,
-	};
-}
-
-function buildRectangleParams(
-	overrides: Partial<RectangleMaskParams> = {},
-): RectangleMaskParams {
-	return {
-		feather: 0,
-		inverted: false,
-		strokeColor: "#ffffff",
-		strokeWidth: 0,
-		strokeAlign: "center",
-		centerX: 0,
-		centerY: 0,
-		width: 0.4,
-		height: 0.2,
-		rotation: 0,
-		scale: 1,
-		...overrides,
-	};
-}
-
-function buildTextMaskParams(
-	overrides: Partial<TextMaskParams> = {},
-): TextMaskParams {
-	return {
-		feather: 0,
-		inverted: false,
-		strokeColor: "#ffffff",
-		strokeWidth: 0,
-		strokeAlign: "center",
-		content: "Mask",
-		fontSize: 15,
-		fontFamily: "Arial",
-		fontWeight: "normal",
-		fontStyle: "normal",
-		textDecoration: "none",
-		letterSpacing: 0,
-		lineHeight: 1.2,
-		centerX: 0,
-		centerY: 0,
-		rotation: 0,
-		scale: 1,
-		...overrides,
-	};
-}
-
-function buildCustomMaskParams(
-	overrides: Partial<CustomMaskParams> = {},
-): CustomMaskParams {
-	return {
-		feather: 0,
-		inverted: false,
-		strokeColor: "#ffffff",
-		strokeWidth: 0,
-		strokeAlign: "center",
-		path: [
-			{
-				id: "a",
-				x: -0.2,
-				y: -0.1,
-				inX: 0,
-				inY: 0,
-				outX: 0,
-				outY: 0,
-			},
-			{
-				id: "b",
-				x: 0.2,
-				y: -0.1,
-				inX: 0,
-				inY: 0,
-				outX: 0,
-				outY: 0,
-			},
-			{
-				id: "c",
-				x: 0,
-				y: 0.2,
-				inX: 0,
-				inY: 0,
-				outX: 0,
-				outY: 0,
-			},
-		],
-		closed: true,
-		centerX: 0,
-		centerY: 0,
-		rotation: 0,
-		scale: 1,
-		...overrides,
-	};
-}
-
-function sortSegment(
-	segment: [{ x: number; y: number }, { x: number; y: number }],
-): [{ x: number; y: number }, { x: number; y: number }] {
-	return [...segment].sort((a, b) => (a.x === b.x ? a.y - b.y : a.x - b.x)) as [
-		{ x: number; y: number },
-		{ x: number; y: number },
-	];
-}
-
-describe("mask geometry", () => {
-	test("resolves split mask center from centerX and centerY", () => {
-		expect(
-			getMaskSnapGeometry({
-				params: buildSplitParams({
-					centerX: 0.25,
-					centerY: -0.5,
-					rotation: 45,
-				}),
-				bounds,
-			}),
-		).toEqual({
-			position: { x: 50, y: -50 },
-			size: { width: 0, height: 0 },
-			rotation: 45,
-		});
-	});
-
-	test("resolves box mask center and size from centerX and centerY", () => {
-		expect(
-			getMaskSnapGeometry({
-				params: buildRectangleParams({
-					centerX: -0.25,
-					centerY: 0.5,
-					width: 0.5,
-					height: 0.6,
-					rotation: 30,
-				}),
-				bounds,
-			}),
-		).toEqual({
-			position: { x: -50, y: 50 },
-			size: { width: 100, height: 60 },
-			rotation: 30,
-		});
-	});
-
-	test("returns a vertical split stroke segment for rotation 0", () => {
-		const segment = getSplitMaskStrokeSegment({
-			resolvedParams: buildSplitParams(),
-			width: bounds.width,
-			height: bounds.height,
-		});
-
-		expect(segment).not.toBeNull();
-		if (!segment) {
-			throw new Error("Expected split stroke segment for rotation 0");
-		}
-		expect(sortSegment(segment)).toEqual([
-			{ x: bounds.width / 2, y: 0 },
-			{ x: bounds.width / 2, y: bounds.height },
-		]);
-	});
-
-	test("returns a horizontal split stroke segment for rotation 90", () => {
-		const segment = getSplitMaskStrokeSegment({
-			resolvedParams: buildSplitParams({ rotation: 90 }),
-			width: bounds.width,
-			height: bounds.height,
-		});
-
-		expect(segment).not.toBeNull();
-		if (!segment) {
-			throw new Error("Expected split stroke segment for rotation 90");
-		}
-		expect(sortSegment(segment)).toEqual([
-			{ x: 0, y: bounds.height / 2 },
-			{ x: bounds.width, y: bounds.height / 2 },
-		]);
-	});
-});
-
-describe("mask snapping", () => {
-	test("snaps split mask movement using the shared position pipeline", () => {
-		const result = snapMaskInteraction({
-			handleId: "position",
-			startParams: buildSplitParams({
-				centerX: 0.03,
-				centerY: -0.04,
-			}),
-			proposedParams: buildSplitParams({
-				centerX: 0.03,
-				centerY: -0.04,
-			}),
-			bounds,
-			canvasSize,
-			snapThreshold,
-		});
-
-		expect(result.params.centerX).toBe(0);
-		expect(result.params.centerY).toBe(0);
-		expect(result.activeLines).toEqual([
-			{ type: "vertical", position: 0 },
-			{ type: "horizontal", position: 0 },
-		]);
-	});
-
-	test("snaps box mask movement against element center and edges", () => {
-		const result = snapMaskInteraction({
-			handleId: "position",
-			startParams: buildRectangleParams(),
-			proposedParams: buildRectangleParams({
-				centerX: 0.29,
-				centerY: 0.03,
-			}),
-			bounds,
-			canvasSize,
-			snapThreshold,
-		});
-
-		expect(result.params.centerX).toBeCloseTo(0.3);
-		expect(result.params.centerY).toBe(0);
-		expect(result.activeLines).toEqual([
-			{ type: "vertical", position: 100 },
-			{ type: "horizontal", position: 0 },
-		]);
-	});
-
-	test("snaps mask rotation through the shared rotation path", () => {
-		const result = snapMaskInteraction({
-			handleId: "rotation",
-			startParams: buildRectangleParams(),
-			proposedParams: buildRectangleParams({
-				rotation: 88,
-			}),
-			bounds,
-			canvasSize,
-			snapThreshold,
-		});
-
-		expect(result.params.rotation).toBe(90);
-		expect(result.activeLines).toEqual([]);
-	});
-
-	test("snaps edge resize for box masks", () => {
-		const result = snapMaskInteraction({
-			handleId: "right",
-			startParams: buildRectangleParams(),
-			proposedParams: buildRectangleParams({
-				width: 0.98,
-			}),
-			bounds,
-			canvasSize,
-			snapThreshold,
-		});
-
-		expect(result.params.width).toBe(1);
-		expect(result.activeLines).toEqual([{ type: "vertical", position: 100 }]);
-	});
-
-	test("snaps corner resize for box masks", () => {
-		const result = snapMaskInteraction({
-			handleId: "bottom-right",
-			startParams: buildRectangleParams(),
-			proposedParams: buildRectangleParams({
-				width: 0.99,
-				height: 0.495,
-			}),
-			bounds,
-			canvasSize,
-			snapThreshold,
-		});
-
-		expect(result.params.width).toBe(1);
-		expect(result.params.height).toBe(0.5);
-		expect(result.activeLines).toEqual([{ type: "vertical", position: 100 }]);
-	});
-
-	test("snaps text mask movement using intrinsic text bounds", () => {
-		const params = buildTextMaskParams({
-			centerX: 0.03,
-			centerY: -0.04,
-		});
-		const result = textMaskDefinition.interaction.snap?.({
-			handleId: "position",
-			startParams: params,
-			proposedParams: params,
-			bounds,
-			canvasSize,
-			snapThreshold,
-		});
-
-		expect(result?.params.centerX).toBe(0);
-		expect(result?.params.centerY).toBe(0);
-		expect(result?.activeLines).toEqual([
-			{ type: "vertical", position: 0 },
-			{ type: "horizontal", position: 0 },
-		]);
-	});
-
-	test("snaps custom mask movement using path geometry bounds", () => {
-		const params = buildCustomMaskParams({
-			centerX: 0.03,
-			centerY: -0.04,
-		});
-		const result = customMaskDefinition.interaction.snap?.({
-			handleId: "position",
-			startParams: params,
-			proposedParams: params,
-			bounds,
-			canvasSize,
-			snapThreshold,
-		});
-
-		expect(result?.params.centerX).toBe(0);
-		expect(result?.params.centerY).toBe(0);
-		expect(result?.activeLines).toEqual([
-			{ type: "vertical", position: 0 },
-			{ type: "horizontal", position: 0 },
-		]);
-	});
-
-	test("marks blank text masks inactive", () => {
-		expect(
-			textMaskDefinition.isActive?.(
-				buildTextMaskParams({
-					content: "   ",
-				}),
-			),
-		).toBe(false);
-	});
-});
-
-describe("custom mask creation", () => {
-	test("anchors the first point at the click position", () => {
-		const params = buildCustomMaskParams({
-			path: [],
-			closed: false,
-		});
-		const next = appendPointToCustomMask({
-			params,
-			canvasPoint: { x: bounds.cx + 20, y: bounds.cy - 10 },
-			bounds,
-		});
-
-		expect(next.centerX).toBeCloseTo(0.1);
-		expect(next.centerY).toBeCloseTo(-0.1);
-		expect(next.rotation).toBe(0);
-		expect(next.scale).toBe(1);
-		expect(next.path).toHaveLength(1);
-	});
-});
-
-describe("custom mask point deletion", () => {
-	test("removes the selected points by id", () => {
-		const points = buildCustomMaskParams().path;
-		const nextPoints = removeCustomMaskPoints({
-			points,
-			pointIds: ["b"],
-		});
-
-		expect(nextPoints.map((point) => point.id)).toEqual(["a", "c"]);
-	});
-
-	test("reopens a closed path once fewer than three points remain", () => {
-		const points = buildCustomMaskParams().path;
-		const nextPoints = removeCustomMaskPoints({
-			points,
-			pointIds: ["c"],
-		});
-
-		expect(
-			getCustomMaskClosedStateAfterPointRemoval({
-				wasClosed: true,
-				remainingPointCount: nextPoints.length,
-			}),
-		).toBe(false);
-	});
-});
-
-describe("custom mask point insertion", () => {
-	test("finds the closest point on the clicked segment", () => {
-		const params = buildCustomMaskParams();
-		const points = params.path;
-		const closestPoint = findClosestPointOnCustomMaskSegment({
-			points,
-			segmentIndex: 0,
-			canvasPoint: { x: bounds.cx, y: bounds.cy - 10 },
-			centerX: params.centerX,
-			centerY: params.centerY,
-			rotation: params.rotation,
-			scale: params.scale,
-			bounds,
-			closed: params.closed,
-		});
-
-		expect(closestPoint).not.toBeNull();
-		expect(closestPoint?.t).toBeCloseTo(0.5, 1);
-		expect(closestPoint?.point.x).toBeCloseTo(bounds.cx, 4);
-		expect(closestPoint?.point.y).toBeCloseTo(bounds.cy - 10, 4);
-	});
-
-	test("splits a segment into two segments at the insertion point", () => {
-		const points = buildCustomMaskParams().path;
-		const nextPoints = insertPointIntoCustomMaskSegment({
-			points,
-			segmentIndex: 0,
-			pointId: "new",
-			t: 0.5,
-			closed: true,
-		});
-
-		expect(nextPoints.map((point) => point.id)).toEqual(["a", "new", "b", "c"]);
-		expect(nextPoints[1]).toMatchObject({
-			id: "new",
-			x: 0,
-			y: -0.1,
-			inX: 0,
-			inY: 0,
-			outX: 0,
-			outY: 0,
-		});
-	});
-
-	test("builds updated custom mask params for a clicked segment", () => {
-		const result = insertPointOnCustomMaskSegment({
-			params: buildCustomMaskParams(),
-			segmentIndex: 0,
-			canvasPoint: { x: bounds.cx, y: bounds.cy - 10 },
-			bounds,
-			pointId: "new",
-		});
-
-		expect(result).not.toBeNull();
-		const nextPoints = result?.params.path ?? [];
-		expect(nextPoints).toHaveLength(4);
-		expect(nextPoints.some((point) => point.id === "new")).toBe(true);
-	});
-});
diff --git a/apps/web/src/lib/masks/custom-path.ts b/apps/web/src/lib/masks/custom-path.ts
deleted file mode 100644
index 94a9043c..00000000
--- a/apps/web/src/lib/masks/custom-path.ts
+++ /dev/null
@@ -1,842 +0,0 @@
-import type { ElementBounds } from "@/lib/preview/element-bounds";
-
-export interface CustomMaskPathPoint {
-	id: string;
-	x: number;
-	y: number;
-	inX: number;
-	inY: number;
-	outX: number;
-	outY: number;
-}
-
-export type CustomMaskHandlePart = "anchor" | "in" | "out";
-
-function isCustomMaskPathPoint(value: unknown): value is CustomMaskPathPoint {
-	if (!value || typeof value !== "object") {
-		return false;
-	}
-
-	const candidate = value as Record<string, unknown>;
-	return (
-		typeof candidate.id === "string" &&
-		typeof candidate.x === "number" &&
-		typeof candidate.y === "number" &&
-		typeof candidate.inX === "number" &&
-		typeof candidate.inY === "number" &&
-		typeof candidate.outX === "number" &&
-		typeof candidate.outY === "number"
-	);
-}
-
-export function parseCustomMaskHandleId({
-	handleId,
-}: {
-	handleId: string;
-}): { pointId: string; part: CustomMaskHandlePart } | null {
-	const match = /^point:(.+):(anchor|in|out)$/.exec(handleId);
-	if (!match) {
-		return null;
-	}
-
-	return {
-		pointId: match[1],
-		part: match[2] as CustomMaskHandlePart,
-	};
-}
-
-export function parseCustomMaskSegmentHandleId({
-	handleId,
-}: {
-	handleId: string;
-}): { segmentIndex: number } | null {
-	const match = /^segment:(\d+)$/.exec(handleId);
-	if (!match) {
-		return null;
-	}
-
-	return {
-		segmentIndex: Number.parseInt(match[1], 10),
-	};
-}
-
-export function parseCustomMaskPath({
-	path,
-}: {
-	path: string;
-}): CustomMaskPathPoint[] {
-	if (!path) {
-		return [];
-	}
-
-	try {
-		const parsed = JSON.parse(path);
-		return Array.isArray(parsed) ? parsed.filter(isCustomMaskPathPoint) : [];
-	} catch {
-		return [];
-	}
-}
-
-export function serializeCustomMaskPath({
-	points,
-}: {
-	points: CustomMaskPathPoint[];
-}): string {
-	return JSON.stringify(points);
-}
-
-export function removeCustomMaskPoints({
-	points,
-	pointIds,
-}: {
-	points: CustomMaskPathPoint[];
-	pointIds: string[];
-}): CustomMaskPathPoint[] {
-	if (pointIds.length === 0) {
-		return points;
-	}
-	const pointIdsToRemove = new Set(pointIds);
-	return points.filter((point) => !pointIdsToRemove.has(point.id));
-}
-
-export function getCustomMaskClosedStateAfterPointRemoval({
-	wasClosed,
-	remainingPointCount,
-}: {
-	wasClosed: boolean;
-	remainingPointCount: number;
-}): boolean {
-	return wasClosed && remainingPointCount >= 3;
-}
-
-function rotatePoint({
-	x,
-	y,
-	rotationDegrees,
-}: {
-	x: number;
-	y: number;
-	rotationDegrees: number;
-}): { x: number; y: number } {
-	const angleRad = (rotationDegrees * Math.PI) / 180;
-	const cos = Math.cos(angleRad);
-	const sin = Math.sin(angleRad);
-	return {
-		x: x * cos - y * sin,
-		y: x * sin + y * cos,
-	};
-}
-
-export function getCustomMaskCenterCanvasPoint({
-	centerX,
-	centerY,
-	bounds,
-}: {
-	centerX: number;
-	centerY: number;
-	bounds: ElementBounds;
-}): { x: number; y: number } {
-	return {
-		x: bounds.cx + centerX * bounds.width,
-		y: bounds.cy + centerY * bounds.height,
-	};
-}
-
-export function customMaskLocalPointToCanvas({
-	point,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-}: {
-	point: { x: number; y: number };
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-}): { x: number; y: number } {
-	const center = getCustomMaskCenterCanvasPoint({ centerX, centerY, bounds });
-	const scaledLocal = {
-		x: point.x * bounds.width * scale,
-		y: point.y * bounds.height * scale,
-	};
-	const rotated = rotatePoint({
-		x: scaledLocal.x,
-		y: scaledLocal.y,
-		rotationDegrees: rotation,
-	});
-
-	return {
-		x: center.x + rotated.x,
-		y: center.y + rotated.y,
-	};
-}
-
-export function customMaskCanvasPointToLocal({
-	point,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-}: {
-	point: { x: number; y: number };
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-}): { x: number; y: number } {
-	const center = getCustomMaskCenterCanvasPoint({ centerX, centerY, bounds });
-	const translated = {
-		x: point.x - center.x,
-		y: point.y - center.y,
-	};
-	const rotated = rotatePoint({
-		x: translated.x,
-		y: translated.y,
-		rotationDegrees: -rotation,
-	});
-
-	return {
-		x: bounds.width === 0 ? 0 : rotated.x / (bounds.width * scale),
-		y: bounds.height === 0 ? 0 : rotated.y / (bounds.height * scale),
-	};
-}
-
-export function getCustomMaskCanvasGeometry({
-	points,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-}: {
-	points: CustomMaskPathPoint[];
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-}) {
-	const anchors = points.map((point) => ({
-		id: point.id,
-		anchor: customMaskLocalPointToCanvas({
-			point: { x: point.x, y: point.y },
-			centerX,
-			centerY,
-			rotation,
-			scale,
-			bounds,
-		}),
-		inHandle: customMaskLocalPointToCanvas({
-			point: { x: point.x + point.inX, y: point.y + point.inY },
-			centerX,
-			centerY,
-			rotation,
-			scale,
-			bounds,
-		}),
-		outHandle: customMaskLocalPointToCanvas({
-			point: { x: point.x + point.outX, y: point.y + point.outY },
-			centerX,
-			centerY,
-			rotation,
-			scale,
-			bounds,
-		}),
-	}));
-
-	const geometryPoints = anchors.flatMap((point) => [
-		point.anchor,
-		point.inHandle,
-		point.outHandle,
-	]);
-	if (geometryPoints.length === 0) {
-		return {
-			anchors,
-			bounds: null,
-		};
-	}
-
-	const geometryBounds = getCanvasPointBounds({
-		points: geometryPoints,
-	});
-
-	return {
-		anchors,
-		bounds: geometryBounds,
-	};
-}
-
-export interface CanvasPoint {
-	x: number;
-	y: number;
-}
-
-function getCanvasPointBounds({ points }: { points: CanvasPoint[] }): {
-	minX: number;
-	maxX: number;
-	minY: number;
-	maxY: number;
-	width: number;
-	height: number;
-	centerX: number;
-	centerY: number;
-} | null {
-	if (points.length === 0) {
-		return null;
-	}
-
-	const [firstPoint, ...restPoints] = points;
-	let minX = firstPoint.x;
-	let maxX = firstPoint.x;
-	let minY = firstPoint.y;
-	let maxY = firstPoint.y;
-
-	for (const point of restPoints) {
-		minX = Math.min(minX, point.x);
-		maxX = Math.max(maxX, point.x);
-		minY = Math.min(minY, point.y);
-		maxY = Math.max(maxY, point.y);
-	}
-
-	return {
-		minX,
-		maxX,
-		minY,
-		maxY,
-		width: Math.max(1, maxX - minX),
-		height: Math.max(1, maxY - minY),
-		centerX: (minX + maxX) / 2,
-		centerY: (minY + maxY) / 2,
-	};
-}
-
-export interface CustomMaskCanvasSegment {
-	index: number;
-	startPointId: string;
-	endPointId: string;
-	start: CanvasPoint;
-	startOut: CanvasPoint;
-	endIn: CanvasPoint;
-	end: CanvasPoint;
-	pathData: string;
-}
-
-function clampUnit(value: number): number {
-	return Math.min(1, Math.max(0, value));
-}
-
-function getDistanceSquared(a: CanvasPoint, b: CanvasPoint): number {
-	const dx = a.x - b.x;
-	const dy = a.y - b.y;
-	return dx * dx + dy * dy;
-}
-
-function lerpPoint(a: CanvasPoint, b: CanvasPoint, t: number): CanvasPoint {
-	return {
-		x: a.x + (b.x - a.x) * t,
-		y: a.y + (b.y - a.y) * t,
-	};
-}
-
-function evaluateCubicBezier({
-	p0,
-	p1,
-	p2,
-	p3,
-	t,
-}: {
-	p0: CanvasPoint;
-	p1: CanvasPoint;
-	p2: CanvasPoint;
-	p3: CanvasPoint;
-	t: number;
-}): CanvasPoint {
-	const oneMinusT = 1 - t;
-	return {
-		x:
-			oneMinusT ** 3 * p0.x +
-			3 * oneMinusT ** 2 * t * p1.x +
-			3 * oneMinusT * t ** 2 * p2.x +
-			t ** 3 * p3.x,
-		y:
-			oneMinusT ** 3 * p0.y +
-			3 * oneMinusT ** 2 * t * p1.y +
-			3 * oneMinusT * t ** 2 * p2.y +
-			t ** 3 * p3.y,
-	};
-}
-
-function getCustomMaskSegmentIndices({
-	points,
-	segmentIndex,
-	closed,
-}: {
-	points: CustomMaskPathPoint[];
-	segmentIndex: number;
-	closed: boolean;
-}): { startIndex: number; endIndex: number } | null {
-	const segmentCount = getCustomMaskSegmentCount({ points, closed });
-	if (segmentIndex < 0 || segmentIndex >= segmentCount) {
-		return null;
-	}
-
-	return {
-		startIndex: segmentIndex,
-		endIndex: (segmentIndex + 1) % points.length,
-	};
-}
-
-export function getCustomMaskSegmentCount({
-	points,
-	closed,
-}: {
-	points: CustomMaskPathPoint[];
-	closed: boolean;
-}): number {
-	if (points.length < 2) {
-		return 0;
-	}
-	return closed ? points.length : points.length - 1;
-}
-
-export function getCustomMaskCanvasSegments({
-	points,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-	closed,
-}: {
-	points: CustomMaskPathPoint[];
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-	closed: boolean;
-}): CustomMaskCanvasSegment[] {
-	const geometry = getCustomMaskCanvasGeometry({
-		points,
-		centerX,
-		centerY,
-		rotation,
-		scale,
-		bounds,
-	});
-	const segmentCount = getCustomMaskSegmentCount({ points, closed });
-
-	return Array.from({ length: segmentCount }, (_, segmentIndex) => {
-		const start = geometry.anchors[segmentIndex];
-		const end = geometry.anchors[(segmentIndex + 1) % geometry.anchors.length];
-		return {
-			index: segmentIndex,
-			startPointId: start.id,
-			endPointId: end.id,
-			start: start.anchor,
-			startOut: start.outHandle,
-			endIn: end.inHandle,
-			end: end.anchor,
-			pathData: `M ${start.anchor.x},${start.anchor.y} C ${start.outHandle.x},${start.outHandle.y} ${end.inHandle.x},${end.inHandle.y} ${end.anchor.x},${end.anchor.y}`,
-		};
-	});
-}
-
-export function findClosestPointOnCustomMaskSegment({
-	points,
-	segmentIndex,
-	canvasPoint,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-	closed,
-}: {
-	points: CustomMaskPathPoint[];
-	segmentIndex: number;
-	canvasPoint: CanvasPoint;
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-	closed: boolean;
-}): { t: number; point: CanvasPoint } | null {
-	const segment = getCustomMaskCanvasSegments({
-		points,
-		centerX,
-		centerY,
-		rotation,
-		scale,
-		bounds,
-		closed,
-	}).find((candidate) => candidate.index === segmentIndex);
-	if (!segment) {
-		return null;
-	}
-
-	const sampleCount = 24;
-	let bestT = 0;
-	let bestDistanceSquared = getDistanceSquared(canvasPoint, segment.start);
-
-	for (let step = 0; step <= sampleCount; step++) {
-		const t = step / sampleCount;
-		const point = evaluateCubicBezier({
-			p0: segment.start,
-			p1: segment.startOut,
-			p2: segment.endIn,
-			p3: segment.end,
-			t,
-		});
-		const distanceSquared = getDistanceSquared(canvasPoint, point);
-		if (distanceSquared < bestDistanceSquared) {
-			bestDistanceSquared = distanceSquared;
-			bestT = t;
-		}
-	}
-
-	let searchStep = 1 / sampleCount;
-	for (let iteration = 0; iteration < 8; iteration++) {
-		const candidates = [bestT - searchStep, bestT, bestT + searchStep]
-			.map(clampUnit)
-			.map((t) => ({
-				t,
-				point: evaluateCubicBezier({
-					p0: segment.start,
-					p1: segment.startOut,
-					p2: segment.endIn,
-					p3: segment.end,
-					t,
-				}),
-			}));
-		for (const candidate of candidates) {
-			const distanceSquared = getDistanceSquared(canvasPoint, candidate.point);
-			if (distanceSquared < bestDistanceSquared) {
-				bestDistanceSquared = distanceSquared;
-				bestT = candidate.t;
-			}
-		}
-		searchStep /= 2;
-	}
-
-	const clampedT = Math.min(0.999, Math.max(0.001, bestT));
-	return {
-		t: clampedT,
-		point: evaluateCubicBezier({
-			p0: segment.start,
-			p1: segment.startOut,
-			p2: segment.endIn,
-			p3: segment.end,
-			t: clampedT,
-		}),
-	};
-}
-
-export function insertPointIntoCustomMaskSegment({
-	points,
-	segmentIndex,
-	pointId,
-	t,
-	closed,
-}: {
-	points: CustomMaskPathPoint[];
-	segmentIndex: number;
-	pointId: string;
-	t: number;
-	closed: boolean;
-}): CustomMaskPathPoint[] {
-	const indices = getCustomMaskSegmentIndices({
-		points,
-		segmentIndex,
-		closed,
-	});
-	if (!indices) {
-		return points;
-	}
-
-	const startPoint = points[indices.startIndex];
-	const endPoint = points[indices.endIndex];
-	const clampedT = Math.min(0.999, Math.max(0.001, t));
-	const p0 = { x: startPoint.x, y: startPoint.y };
-	const p1 = {
-		x: startPoint.x + startPoint.outX,
-		y: startPoint.y + startPoint.outY,
-	};
-	const p2 = {
-		x: endPoint.x + endPoint.inX,
-		y: endPoint.y + endPoint.inY,
-	};
-	const p3 = { x: endPoint.x, y: endPoint.y };
-	const p01 = lerpPoint(p0, p1, clampedT);
-	const p12 = lerpPoint(p1, p2, clampedT);
-	const p23 = lerpPoint(p2, p3, clampedT);
-	const p012 = lerpPoint(p01, p12, clampedT);
-	const p123 = lerpPoint(p12, p23, clampedT);
-	const splitPoint = lerpPoint(p012, p123, clampedT);
-
-	const nextPoints = [...points];
-	nextPoints[indices.startIndex] = {
-		...startPoint,
-		outX: p01.x - startPoint.x,
-		outY: p01.y - startPoint.y,
-	};
-	nextPoints[indices.endIndex] = {
-		...endPoint,
-		inX: p23.x - endPoint.x,
-		inY: p23.y - endPoint.y,
-	};
-	nextPoints.splice(indices.endIndex, 0, {
-		id: pointId,
-		x: splitPoint.x,
-		y: splitPoint.y,
-		inX: p012.x - splitPoint.x,
-		inY: p012.y - splitPoint.y,
-		outX: p123.x - splitPoint.x,
-		outY: p123.y - splitPoint.y,
-	});
-	return nextPoints;
-}
-
-export function getCustomMaskLocalBounds({
-	points,
-	bounds,
-}: {
-	points: CustomMaskPathPoint[];
-	bounds: ElementBounds;
-}) {
-	if (points.length === 0) {
-		return null;
-	}
-
-	const values = points.flatMap((point) => [
-		{ x: point.x * bounds.width, y: point.y * bounds.height },
-		{
-			x: (point.x + point.inX) * bounds.width,
-			y: (point.y + point.inY) * bounds.height,
-		},
-		{
-			x: (point.x + point.outX) * bounds.width,
-			y: (point.y + point.outY) * bounds.height,
-		},
-	]);
-
-	const localBounds = getCanvasPointBounds({
-		points: values,
-	});
-	if (!localBounds) {
-		return null;
-	}
-
-	return {
-		width: localBounds.width,
-		height: localBounds.height,
-	};
-}
-
-export function recenterCustomMaskPath({
-	points,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-}: {
-	points: CustomMaskPathPoint[];
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-}) {
-	if (points.length === 0) {
-		return { centerX, centerY, points };
-	}
-
-	const geometry = getCustomMaskCanvasGeometry({
-		points,
-		centerX,
-		centerY,
-		rotation,
-		scale,
-		bounds,
-	});
-	if (!geometry.bounds) {
-		return { centerX, centerY, points };
-	}
-
-	const nextCenterCanvas = {
-		x: geometry.bounds.centerX,
-		y: geometry.bounds.centerY,
-	};
-	const nextCenterLocal = {
-		x: bounds.width === 0 ? 0 : (nextCenterCanvas.x - bounds.cx) / bounds.width,
-		y:
-			bounds.height === 0
-				? 0
-				: (nextCenterCanvas.y - bounds.cy) / bounds.height,
-	};
-
-	const nextPoints = geometry.anchors.map((point) => {
-		const anchor = customMaskCanvasPointToLocal({
-			point: point.anchor,
-			centerX: nextCenterLocal.x,
-			centerY: nextCenterLocal.y,
-			rotation,
-			scale,
-			bounds,
-		});
-		const inHandle = customMaskCanvasPointToLocal({
-			point: point.inHandle,
-			centerX: nextCenterLocal.x,
-			centerY: nextCenterLocal.y,
-			rotation,
-			scale,
-			bounds,
-		});
-		const outHandle = customMaskCanvasPointToLocal({
-			point: point.outHandle,
-			centerX: nextCenterLocal.x,
-			centerY: nextCenterLocal.y,
-			rotation,
-			scale,
-			bounds,
-		});
-
-		return {
-			id: point.id,
-			x: anchor.x,
-			y: anchor.y,
-			inX: inHandle.x - anchor.x,
-			inY: inHandle.y - anchor.y,
-			outX: outHandle.x - anchor.x,
-			outY: outHandle.y - anchor.y,
-		};
-	});
-
-	return {
-		centerX: nextCenterLocal.x,
-		centerY: nextCenterLocal.y,
-		points: nextPoints,
-	};
-}
-
-export function buildCustomMaskPath2D({
-	points,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-	closed,
-}: {
-	points: CustomMaskPathPoint[];
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-	closed: boolean;
-}): Path2D {
-	const path = new Path2D();
-	if (points.length === 0) {
-		return path;
-	}
-
-	const geometry = getCustomMaskCanvasGeometry({
-		points,
-		centerX,
-		centerY,
-		rotation,
-		scale,
-		bounds,
-	});
-	const anchors = geometry.anchors;
-	path.moveTo(anchors[0].anchor.x, anchors[0].anchor.y);
-
-	for (let index = 1; index < anchors.length; index++) {
-		const previous = anchors[index - 1];
-		const current = anchors[index];
-		path.bezierCurveTo(
-			previous.outHandle.x,
-			previous.outHandle.y,
-			current.inHandle.x,
-			current.inHandle.y,
-			current.anchor.x,
-			current.anchor.y,
-		);
-	}
-
-	if (closed && anchors.length > 1) {
-		const last = anchors[anchors.length - 1];
-		const first = anchors[0];
-		path.bezierCurveTo(
-			last.outHandle.x,
-			last.outHandle.y,
-			first.inHandle.x,
-			first.inHandle.y,
-			first.anchor.x,
-			first.anchor.y,
-		);
-		path.closePath();
-	}
-
-	return path;
-}
-
-export function buildCustomMaskSvgPath({
-	points,
-	centerX,
-	centerY,
-	rotation,
-	scale,
-	bounds,
-	closed,
-}: {
-	points: CustomMaskPathPoint[];
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-	bounds: ElementBounds;
-	closed: boolean;
-}): string {
-	if (points.length === 0) {
-		return "";
-	}
-
-	const geometry = getCustomMaskCanvasGeometry({
-		points,
-		centerX,
-		centerY,
-		rotation,
-		scale,
-		bounds,
-	});
-	const anchors = geometry.anchors;
-	const segments = [`M ${anchors[0].anchor.x},${anchors[0].anchor.y}`];
-
-	for (let index = 1; index < anchors.length; index++) {
-		const previous = anchors[index - 1];
-		const current = anchors[index];
-		segments.push(
-			`C ${previous.outHandle.x},${previous.outHandle.y} ${current.inHandle.x},${current.inHandle.y} ${current.anchor.x},${current.anchor.y}`,
-		);
-	}
-
-	if (closed && anchors.length > 1) {
-		const last = anchors[anchors.length - 1];
-		const first = anchors[0];
-		segments.push(
-			`C ${last.outHandle.x},${last.outHandle.y} ${first.inHandle.x},${first.inHandle.y} ${first.anchor.x},${first.anchor.y}`,
-		);
-		segments.push("Z");
-	}
-
-	return segments.join(" ");
-}
diff --git a/apps/web/src/lib/masks/definitions/box-like.ts b/apps/web/src/lib/masks/definitions/box-like.ts
deleted file mode 100644
index fe0f1a85..00000000
--- a/apps/web/src/lib/masks/definitions/box-like.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-import {
-	DEFAULT_SHAPE_MASK_SHORT_SIDE_RATIO,
-	MIN_MASK_DIMENSION,
-} from "@/lib/masks/dimensions";
-import { computeFeatherUpdate } from "../param-update";
-import type {
-	BaseMaskParams,
-	MaskDefaultContext,
-	MaskFeatures,
-	MaskInteractionDefinition,
-	MaskParamUpdateArgs,
-	RectangleMaskParams,
-} from "@/lib/masks/types";
-import type { NumberParamDefinition, ParamDefinition } from "@/lib/params";
-import {
-	getBoxMaskHandlePositions,
-	getBoxMaskOverlays,
-} from "@/lib/masks/handle-positions";
-import { snapMaskInteraction } from "@/lib/masks/snap";
-
-const PERCENTAGE_DISPLAY: Pick<
-	NumberParamDefinition,
-	"displayMultiplier" | "step"
-> = {
-	displayMultiplier: 100,
-	step: 1,
-};
-
-export const BOX_LIKE_MASK_PARAMS: ParamDefinition<
-	keyof RectangleMaskParams & string
->[] = [
-	{
-		key: "centerX",
-		label: "X",
-		type: "number",
-		default: 0,
-		min: -100,
-		max: 100,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "centerY",
-		label: "Y",
-		type: "number",
-		default: 0,
-		min: -100,
-		max: 100,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "width",
-		label: "Width",
-		type: "number",
-		default: 0.6,
-		min: 1,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "height",
-		label: "Height",
-		type: "number",
-		default: 0.6,
-		min: 1,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "rotation",
-		label: "Rotation",
-		type: "number",
-		default: 0,
-		min: 0,
-		max: 360,
-		step: 1,
-	},
-	{
-		key: "scale",
-		label: "Scale",
-		type: "number",
-		default: 1,
-		min: 1,
-		max: 500,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "strokeAlign",
-		label: "Stroke Align",
-		type: "select",
-		default: "center",
-		options: [
-			{ value: "inside", label: "Inside" },
-			{ value: "center", label: "Center" },
-			{ value: "outside", label: "Outside" },
-		],
-	},
-];
-
-export function getDefaultBaseMaskParams(): BaseMaskParams {
-	return {
-		feather: 0,
-		inverted: false,
-		strokeColor: "#ffffff",
-		strokeWidth: 0,
-		strokeAlign: "center",
-	};
-}
-
-export function getStrokeOffset({
-	strokeAlign,
-	strokeWidth,
-}: Pick<BaseMaskParams, "strokeAlign" | "strokeWidth">): number {
-	if (strokeAlign === "inside") {
-		return -(strokeWidth / 2);
-	}
-
-	if (strokeAlign === "outside") {
-		return strokeWidth / 2;
-	}
-
-	return 0;
-}
-
-export function getDefaultSquareMaskParams({
-	elementSize,
-}: MaskDefaultContext): RectangleMaskParams {
-	const absWidth = Math.abs(elementSize?.width ?? 0);
-	const absHeight = Math.abs(elementSize?.height ?? 0);
-	const shortSide = Math.min(absWidth, absHeight);
-	const squareSide =
-		shortSide > 0 ? shortSide * DEFAULT_SHAPE_MASK_SHORT_SIDE_RATIO : 0;
-	const width =
-		absWidth > 0 ? squareSide / absWidth : DEFAULT_SHAPE_MASK_SHORT_SIDE_RATIO;
-	const height =
-		absHeight > 0
-			? squareSide / absHeight
-			: DEFAULT_SHAPE_MASK_SHORT_SIDE_RATIO;
-
-	return {
-		...getDefaultBaseMaskParams(),
-		centerX: 0,
-		centerY: 0,
-		width,
-		height,
-		rotation: 0,
-		scale: 1,
-	};
-}
-
-export function getBoxLikeGeometry({
-	params,
-	width,
-	height,
-}: {
-	params: RectangleMaskParams;
-	width: number;
-	height: number;
-}) {
-	return {
-		centerX: width / 2 + params.centerX * width,
-		centerY: height / 2 + params.centerY * height,
-		maskWidth: Math.max(params.width, MIN_MASK_DIMENSION) * width,
-		maskHeight: Math.max(params.height, MIN_MASK_DIMENSION) * height,
-		rotationRad: (params.rotation * Math.PI) / 180,
-	};
-}
-
-export function buildBoxMaskInteraction({
-	sizeMode,
-	buildOverlayPath,
-	showBoundingBox = true,
-}: {
-	sizeMode: MaskFeatures["sizeMode"];
-	buildOverlayPath?: (args: { width: number; height: number }) => string;
-	showBoundingBox?: boolean;
-}): MaskInteractionDefinition<RectangleMaskParams> {
-	return {
-		getInteraction({ params, bounds, displayScale, scaleX, scaleY }) {
-			return {
-				handles: getBoxMaskHandlePositions({
-					centerX: params.centerX,
-					centerY: params.centerY,
-					width: params.width,
-					height: params.height,
-					rotation: params.rotation,
-					feather: params.feather,
-					sizeMode,
-					bounds,
-					displayScale,
-				}),
-				overlays: getBoxMaskOverlays({
-					params,
-					bounds,
-					pathData: buildOverlayPath?.({
-						width: params.width * bounds.width * scaleX,
-						height: params.height * bounds.height * scaleY,
-					}),
-					showBoundingBox,
-				}),
-			};
-		},
-		snap(args) {
-			return snapMaskInteraction(args);
-		},
-	};
-}
-
-export function computeBoxMaskParamUpdate({
-	handleId,
-	startParams,
-	deltaX,
-	deltaY,
-	bounds,
-}: MaskParamUpdateArgs<RectangleMaskParams>): Partial<RectangleMaskParams> {
-	if (handleId === "position") {
-		return {
-			centerX: startParams.centerX + deltaX / bounds.width,
-			centerY: startParams.centerY + deltaY / bounds.height,
-		};
-	}
-
-	if (handleId === "rotation") {
-		const currentAngle = (Math.atan2(deltaY, deltaX) * 180) / Math.PI;
-		const newRotation = (startParams.rotation + currentAngle) % 360;
-		return { rotation: newRotation < 0 ? newRotation + 360 : newRotation };
-	}
-
-	if (handleId === "feather") {
-		const angleRad = (startParams.rotation * Math.PI) / 180;
-		return computeFeatherUpdate({
-			startFeather: startParams.feather,
-			deltaX,
-			deltaY,
-			directionX: -Math.sin(angleRad),
-			directionY: Math.cos(angleRad),
-		});
-	}
-
-	const halfWidth = startParams.width * bounds.width;
-	const halfHeight = startParams.height * bounds.height;
-
-	if (handleId === "right" || handleId === "left") {
-		const sign = handleId === "right" ? 1 : -1;
-		return {
-			width: Math.max(
-				MIN_MASK_DIMENSION,
-				startParams.width + (sign * deltaX * 2) / bounds.width,
-			),
-		};
-	}
-
-	if (handleId === "bottom" || handleId === "top") {
-		const sign = handleId === "bottom" ? 1 : -1;
-		return {
-			height: Math.max(
-				MIN_MASK_DIMENSION,
-				startParams.height + (sign * deltaY * 2) / bounds.height,
-			),
-		};
-	}
-
-	if (
-		handleId === "top-left" ||
-		handleId === "top-right" ||
-		handleId === "bottom-left" ||
-		handleId === "bottom-right"
-	) {
-		const signX = handleId.includes("right") ? 1 : -1;
-		const signY = handleId.includes("bottom") ? 1 : -1;
-		const distance = Math.sqrt(
-			(signX * deltaX + halfWidth) ** 2 + (signY * deltaY + halfHeight) ** 2,
-		);
-		const originalDistance = Math.sqrt(halfWidth ** 2 + halfHeight ** 2);
-		const scale = originalDistance > 0 ? distance / originalDistance : 1;
-		return {
-			width: Math.max(MIN_MASK_DIMENSION, startParams.width * scale),
-			height: Math.max(MIN_MASK_DIMENSION, startParams.height * scale),
-		};
-	}
-
-	if (handleId === "scale") {
-		const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
-		const originalDistance = Math.sqrt(halfWidth ** 2 + halfHeight ** 2);
-		const scale = originalDistance > 0 ? 1 + distance / originalDistance : 1;
-		return {
-			scale: Math.max(MIN_MASK_DIMENSION, startParams.scale * scale),
-		};
-	}
-
-	return {};
-}
-
-export function rotatePoint({
-	x,
-	y,
-	centerX,
-	centerY,
-	rotationRad,
-}: {
-	x: number;
-	y: number;
-	centerX: number;
-	centerY: number;
-	rotationRad: number;
-}) {
-	const dx = x - centerX;
-	const dy = y - centerY;
-	const cos = Math.cos(rotationRad);
-	const sin = Math.sin(rotationRad);
-
-	return {
-		x: centerX + dx * cos - dy * sin,
-		y: centerY + dx * sin + dy * cos,
-	};
-}
diff --git a/apps/web/src/lib/masks/definitions/cinematic-bars.ts b/apps/web/src/lib/masks/definitions/cinematic-bars.ts
deleted file mode 100644
index ef9c6e00..00000000
--- a/apps/web/src/lib/masks/definitions/cinematic-bars.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import type {
-	MaskDefaultContext,
-	MaskDefinition,
-	RectangleMaskParams,
-} from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	buildBoxMaskInteraction,
-	computeBoxMaskParamUpdate,
-	getDefaultBaseMaskParams,
-	getStrokeOffset,
-	rotatePoint,
-} from "./box-like";
-
-function getDefaultCinematicBarsMaskParams({
-	elementSize,
-}: MaskDefaultContext): RectangleMaskParams {
-	const absWidth = Math.abs(elementSize?.width ?? 0);
-	const absHeight = Math.abs(elementSize?.height ?? 0);
-	const diagonal =
-		absWidth > 0 && absHeight > 0
-			? Math.sqrt(absWidth ** 2 + absHeight ** 2)
-			: 0;
-	const fullSpanWidth =
-		absWidth > 0 ? diagonal / absWidth : Math.SQRT2;
-
-	return {
-		...getDefaultBaseMaskParams(),
-		centerX: 0,
-		centerY: 0,
-		width: Math.max(fullSpanWidth, 1),
-		height: 0.6,
-		rotation: 0,
-		scale: 1,
-	};
-}
-
-function buildBandPath({
-	centerX,
-	centerY,
-	halfWidth,
-	halfHeight,
-	rotationRad,
-}: {
-	centerX: number;
-	centerY: number;
-	halfWidth: number;
-	halfHeight: number;
-	rotationRad: number;
-}): Path2D {
-	const corners = [
-		{ x: centerX - halfWidth, y: centerY - halfHeight },
-		{ x: centerX + halfWidth, y: centerY - halfHeight },
-		{ x: centerX + halfWidth, y: centerY + halfHeight },
-		{ x: centerX - halfWidth, y: centerY + halfHeight },
-	].map((point) =>
-		rotatePoint({
-			...point,
-			centerX,
-			centerY,
-			rotationRad,
-		}),
-	);
-
-	const path = new Path2D();
-	path.moveTo(corners[0].x, corners[0].y);
-	for (const corner of corners.slice(1)) {
-		path.lineTo(corner.x, corner.y);
-	}
-	path.closePath();
-	return path;
-}
-
-export const cinematicBarsMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "cinematic-bars",
-	name: "Cinematic Bars",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "height-only",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	interaction: buildBoxMaskInteraction({
-		sizeMode: "height-only",
-		buildOverlayPath({ width, height }) {
-			return `M 0,0 H ${width} V ${height} H 0 Z`;
-		},
-	}),
-	buildDefault(context) {
-		return {
-			type: "cinematic-bars",
-			params: getDefaultCinematicBarsMaskParams(context),
-		};
-	},
-	computeParamUpdate: computeBoxMaskParamUpdate,
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const centerX = width / 2 + params.centerX * width;
-			const centerY = height / 2 + params.centerY * height;
-			const maskWidth = Math.max(params.width * width, width);
-			const maskHeight = Math.max(params.height, 0.01) * height;
-			const rotationRad = (params.rotation * Math.PI) / 180;
-
-			return buildBandPath({
-				centerX,
-				centerY,
-				halfWidth: maskWidth / 2,
-				halfHeight: maskHeight / 2,
-				rotationRad,
-			});
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const centerX = width / 2 + params.centerX * width;
-			const centerY = height / 2 + params.centerY * height;
-			const rotationRad = (params.rotation * Math.PI) / 180;
-			const offset = getStrokeOffset({
-				strokeAlign: params.strokeAlign,
-				strokeWidth: params.strokeWidth,
-			});
-
-			return buildBandPath({
-				centerX,
-				centerY,
-				halfWidth: Math.max((Math.max(params.width * width, width) / 2) + offset, 1),
-				halfHeight: Math.max(
-					(Math.max(params.height, 0.01) * height) / 2 + offset,
-					1,
-				),
-				rotationRad,
-			});
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/definitions/custom.ts b/apps/web/src/lib/masks/definitions/custom.ts
deleted file mode 100644
index 0fc69929..00000000
--- a/apps/web/src/lib/masks/definitions/custom.ts
+++ /dev/null
@@ -1,652 +0,0 @@
-import { generateUUID } from "@/utils/id";
-import type { ParamDefinition } from "@/lib/params";
-import { PEN_CURSOR } from "@/components/editor/panels/preview/cursors";
-import type { ElementBounds } from "@/lib/preview/element-bounds";
-import type {
-	CustomMask,
-	CustomMaskParams,
-	MaskDefinition,
-	MaskHandlePosition,
-	MaskOverlay,
-	MaskParamUpdateArgs,
-} from "@/lib/masks/types";
-import {
-	buildCustomMaskPath2D,
-	buildCustomMaskSvgPath,
-	customMaskCanvasPointToLocal,
-	findClosestPointOnCustomMaskSegment,
-	getCustomMaskCanvasSegments,
-	getCustomMaskCanvasGeometry,
-	getCustomMaskLocalBounds,
-	getCustomMaskSegmentCount,
-	insertPointIntoCustomMaskSegment,
-	parseCustomMaskHandleId,
-	recenterCustomMaskPath,
-	type CustomMaskPathPoint,
-} from "@/lib/masks/custom-path";
-import { getBoxMaskHandlePositions } from "@/lib/masks/handle-positions";
-import { computeFeatherUpdate } from "@/lib/masks/param-update";
-import {
-	setMaskLocalCenter,
-	toGlobalMaskSnapLines,
-} from "@/lib/masks/geometry";
-import {
-	snapPosition,
-	snapRotation,
-	snapScale,
-} from "@/lib/preview/preview-snap";
-
-const PERCENTAGE_DISPLAY = {
-	displayMultiplier: 100,
-	step: 1,
-} as const;
-
-const CUSTOM_MASK_PARAMS: ParamDefinition<keyof CustomMaskParams & string>[] = [
-	{
-		key: "centerX",
-		label: "X",
-		type: "number",
-		default: 0,
-		min: -100,
-		max: 100,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "centerY",
-		label: "Y",
-		type: "number",
-		default: 0,
-		min: -100,
-		max: 100,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "rotation",
-		label: "Rotation",
-		type: "number",
-		default: 0,
-		min: 0,
-		max: 360,
-		step: 1,
-	},
-	{
-		key: "scale",
-		label: "Scale",
-		type: "number",
-		default: 1,
-		min: 1,
-		max: 500,
-		...PERCENTAGE_DISPLAY,
-	},
-];
-
-function getCustomMaskDisplayHandles({
-	params,
-	displayScale,
-	bounds,
-}: {
-	params: CustomMaskParams;
-	displayScale: number;
-	bounds: ElementBounds;
-}): {
-	handles: MaskHandlePosition[];
-	overlays: MaskOverlay[];
-} {
-	const points = params.path;
-	const geometry = getCustomMaskCanvasGeometry({
-		points,
-		centerX: params.centerX,
-		centerY: params.centerY,
-		rotation: params.rotation,
-		scale: params.scale,
-		bounds,
-	});
-
-	const handles: MaskHandlePosition[] = [];
-	const overlays: MaskOverlay[] = [];
-
-	if (points.length > 0) {
-		overlays.push({
-			id: "path",
-			type: "canvas-path",
-			pathData: buildCustomMaskSvgPath({
-				points,
-				centerX: params.centerX,
-				centerY: params.centerY,
-				rotation: params.rotation,
-				scale: params.scale,
-				bounds,
-				closed: params.closed,
-			}),
-			coordinateSpace: "canvas",
-		});
-	}
-
-	if (params.closed) {
-		const segmentStrokeWidth = 12;
-		overlays.push(
-			...getCustomMaskCanvasSegments({
-				points,
-				centerX: params.centerX,
-				centerY: params.centerY,
-				rotation: params.rotation,
-				scale: params.scale,
-				bounds,
-				closed: true,
-			}).map((segment) => ({
-				id: `segment:${segment.index}`,
-				type: "canvas-path" as const,
-				pathData: segment.pathData,
-				coordinateSpace: "canvas" as const,
-				handleId: `segment:${segment.index}`,
-				cursor: PEN_CURSOR,
-				strokeOpacity: 0,
-				strokeWidth: segmentStrokeWidth,
-			})),
-		);
-	}
-
-	const localBounds = getCustomMaskLocalBounds({ points, bounds });
-	if (params.closed && localBounds) {
-		handles.push(
-			...getBoxMaskHandlePositions({
-				centerX: params.centerX,
-				centerY: params.centerY,
-				width: (localBounds.width * params.scale) / bounds.width,
-				height: (localBounds.height * params.scale) / bounds.height,
-				rotation: params.rotation,
-				feather: params.feather,
-				sizeMode: "uniform",
-				showScaleHandle: false,
-				bounds,
-				displayScale,
-			}),
-		);
-	}
-
-	geometry.anchors.forEach((point) => {
-		handles.push({
-			id: `point:${point.id}:anchor`,
-			x: point.anchor.x,
-			y: point.anchor.y,
-			cursor: params.closed ? "move" : "pointer",
-			kind: "point",
-		});
-	});
-
-	return {
-		handles,
-		overlays,
-	};
-}
-
-function updateCustomMaskPoint({
-	points,
-	pointId,
-	updater,
-}: {
-	points: CustomMaskPathPoint[];
-	pointId: string;
-	updater: (point: CustomMaskPathPoint) => CustomMaskPathPoint;
-}) {
-	return points.map((point) => (point.id === pointId ? updater(point) : point));
-}
-
-function computeCustomMaskParamUpdate({
-	handleId,
-	startParams,
-	deltaX,
-	deltaY,
-	startCanvasX,
-	startCanvasY,
-	bounds,
-}: MaskParamUpdateArgs<CustomMaskParams>): Partial<CustomMaskParams> {
-	if (handleId === "position") {
-		return {
-			centerX: startParams.centerX + deltaX / bounds.width,
-			centerY: startParams.centerY + deltaY / bounds.height,
-		};
-	}
-
-	const pivotX = bounds.cx + startParams.centerX * bounds.width;
-	const pivotY = bounds.cy + startParams.centerY * bounds.height;
-
-	if (handleId === "rotation") {
-		const startAngle =
-			(Math.atan2(startCanvasY - pivotY, startCanvasX - pivotX) * 180) /
-			Math.PI;
-		const currentAngle =
-			(Math.atan2(
-				startCanvasY + deltaY - pivotY,
-				startCanvasX + deltaX - pivotX,
-			) *
-				180) /
-			Math.PI;
-
-		let deltaAngle = currentAngle - startAngle;
-		if (deltaAngle > 180) deltaAngle -= 360;
-		if (deltaAngle < -180) deltaAngle += 360;
-
-		return {
-			rotation: (((startParams.rotation + deltaAngle) % 360) + 360) % 360,
-		};
-	}
-
-	if (handleId === "feather") {
-		const angleRad = (startParams.rotation * Math.PI) / 180;
-		return computeFeatherUpdate({
-			startFeather: startParams.feather,
-			deltaX,
-			deltaY,
-			directionX: -Math.sin(angleRad),
-			directionY: Math.cos(angleRad),
-		});
-	}
-
-	if (handleId === "scale") {
-		const startDistance = Math.hypot(
-			startCanvasX - pivotX,
-			startCanvasY - pivotY,
-		);
-		const currentDistance = Math.hypot(
-			startCanvasX + deltaX - pivotX,
-			startCanvasY + deltaY - pivotY,
-		);
-		const scaleFactor = startDistance > 0 ? currentDistance / startDistance : 1;
-		return {
-			scale: Math.max(0.01, startParams.scale * scaleFactor),
-		};
-	}
-
-	const parsedHandle = parseCustomMaskHandleId({ handleId });
-	if (!parsedHandle) {
-		return {};
-	}
-
-	const points = startParams.path;
-	const currentPoint = {
-		x: startCanvasX + deltaX,
-		y: startCanvasY + deltaY,
-	};
-	const localPoint = customMaskCanvasPointToLocal({
-		point: currentPoint,
-		centerX: startParams.centerX,
-		centerY: startParams.centerY,
-		rotation: startParams.rotation,
-		scale: startParams.scale,
-		bounds,
-	});
-
-	return {
-		path: updateCustomMaskPoint({
-			points,
-			pointId: parsedHandle.pointId,
-			updater: (point) => {
-				if (parsedHandle.part === "anchor") {
-					return {
-						...point,
-						x: localPoint.x,
-						y: localPoint.y,
-					};
-				}
-
-				if (parsedHandle.part === "in") {
-					return {
-						...point,
-						inX: localPoint.x - point.x,
-						inY: localPoint.y - point.y,
-					};
-				}
-
-				return {
-					...point,
-					outX: localPoint.x - point.x,
-					outY: localPoint.y - point.y,
-				};
-			},
-		}),
-	};
-}
-
-export const customMaskDefinition: MaskDefinition<CustomMaskParams> = {
-	type: "custom",
-	name: "Custom",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "uniform",
-	},
-	params: CUSTOM_MASK_PARAMS,
-	interaction: {
-		getInteraction({
-			params,
-			bounds,
-			displayScale,
-			scaleX: _scaleX,
-			scaleY: _scaleY,
-		}) {
-			return getCustomMaskDisplayHandles({ params, bounds, displayScale });
-		},
-		snap({
-			handleId,
-			proposedParams,
-			startParams,
-			bounds,
-			canvasSize,
-			snapThreshold,
-		}) {
-			const points = startParams.path;
-			const localBounds = getCustomMaskLocalBounds({ points, bounds });
-			if (!startParams.closed || !localBounds) {
-				return {
-					params: proposedParams,
-					activeLines: [],
-				};
-			}
-
-			const position = {
-				x: proposedParams.centerX * bounds.width,
-				y: proposedParams.centerY * bounds.height,
-			};
-
-			if (handleId === "position") {
-				const { snappedPosition, activeLines } = snapPosition({
-					proposedPosition: position,
-					canvasSize: bounds,
-					elementSize: {
-						width: localBounds.width * proposedParams.scale,
-						height: localBounds.height * proposedParams.scale,
-					},
-					rotation: proposedParams.rotation,
-					snapThreshold,
-				});
-
-				return {
-					params: {
-						...proposedParams,
-						...setMaskLocalCenter({
-							center: snappedPosition,
-							bounds,
-						}),
-					},
-					activeLines: toGlobalMaskSnapLines({
-						lines: activeLines,
-						bounds,
-						canvasSize,
-					}),
-				};
-			}
-
-			if (handleId === "rotation") {
-				const { snappedRotation } = snapRotation({
-					proposedRotation: proposedParams.rotation,
-				});
-				return {
-					params: {
-						...proposedParams,
-						rotation: snappedRotation,
-					},
-					activeLines: [],
-				};
-			}
-
-			if (handleId === "scale") {
-				const { snappedScale, activeLines } = snapScale({
-					proposedScale: proposedParams.scale,
-					position,
-					baseWidth: localBounds.width,
-					baseHeight: localBounds.height,
-					rotation: proposedParams.rotation,
-					canvasSize: bounds,
-					snapThreshold,
-					preferredEdges: {
-						right: true,
-						bottom: true,
-					},
-				});
-
-				return {
-					params: {
-						...proposedParams,
-						scale: Math.max(0.01, snappedScale),
-					},
-					activeLines: toGlobalMaskSnapLines({
-						lines: activeLines,
-						bounds,
-						canvasSize,
-					}),
-				};
-			}
-
-			return {
-				params: proposedParams,
-				activeLines: [],
-			};
-		},
-	},
-	buildDefault(): Omit<CustomMask, "id"> {
-		return {
-			type: "custom",
-			params: {
-				feather: 0,
-				inverted: false,
-				strokeColor: "#ffffff",
-				strokeWidth: 0,
-				strokeAlign: "center",
-				path: [],
-				closed: false,
-				centerX: 0,
-				centerY: 0,
-				rotation: 0,
-				scale: 1,
-			},
-		};
-	},
-	computeParamUpdate: computeCustomMaskParamUpdate,
-	isActive(params) {
-		return params.closed;
-	},
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as CustomMaskParams;
-			const points = params.path;
-			if (!params.closed) {
-				return new Path2D();
-			}
-
-			return buildCustomMaskPath2D({
-				points,
-				centerX: params.centerX,
-				centerY: params.centerY,
-				rotation: params.rotation,
-				scale: params.scale,
-				bounds: {
-					cx: width / 2,
-					cy: height / 2,
-					width,
-					height,
-					rotation: 0,
-				},
-				closed: true,
-			});
-		},
-		renderStroke({ resolvedParams, ctx, width, height }) {
-			const params = resolvedParams as CustomMaskParams;
-			if (!params.closed) {
-				return;
-			}
-
-			const points = params.path;
-			const path = buildCustomMaskPath2D({
-				points,
-				centerX: params.centerX,
-				centerY: params.centerY,
-				rotation: params.rotation,
-				scale: params.scale,
-				bounds: {
-					cx: width / 2,
-					cy: height / 2,
-					width,
-					height,
-					rotation: 0,
-				},
-				closed: true,
-			});
-
-			ctx.save();
-			ctx.strokeStyle = params.strokeColor;
-			ctx.lineWidth = params.strokeWidth;
-			ctx.lineJoin = "round";
-			ctx.lineCap = "round";
-			ctx.stroke(path);
-
-			if (params.strokeAlign === "inside") {
-				ctx.globalCompositeOperation = "destination-in";
-				ctx.fillStyle = "#ffffff";
-				ctx.fill(path);
-			}
-
-			if (params.strokeAlign === "outside") {
-				ctx.globalCompositeOperation = "destination-out";
-				ctx.fillStyle = "#ffffff";
-				ctx.fill(path);
-			}
-			ctx.restore();
-		},
-	},
-};
-
-export function appendPointToCustomMask({
-	params,
-	canvasPoint,
-	bounds,
-}: {
-	params: CustomMaskParams;
-	canvasPoint: { x: number; y: number };
-	bounds: ElementBounds;
-}): CustomMaskParams {
-	const points = params.path;
-
-	if (points.length === 0) {
-		return {
-			...params,
-			centerX:
-				bounds.width === 0 ? 0 : (canvasPoint.x - bounds.cx) / bounds.width,
-			centerY:
-				bounds.height === 0 ? 0 : (canvasPoint.y - bounds.cy) / bounds.height,
-			rotation: 0,
-			scale: 1,
-			path: [
-				{
-					id: generateUUID(),
-					x: 0,
-					y: 0,
-					inX: 0,
-					inY: 0,
-					outX: 0,
-					outY: 0,
-				},
-			],
-		};
-	}
-
-	const localPoint = customMaskCanvasPointToLocal({
-		point: canvasPoint,
-		centerX: params.centerX,
-		centerY: params.centerY,
-		rotation: params.rotation,
-		scale: params.scale,
-		bounds,
-	});
-	const nextPoints = [
-		...points,
-		{
-			id: generateUUID(),
-			x: localPoint.x,
-			y: localPoint.y,
-			inX: 0,
-			inY: 0,
-			outX: 0,
-			outY: 0,
-		},
-	];
-	const recentered = recenterCustomMaskPath({
-		points: nextPoints,
-		centerX: params.centerX,
-		centerY: params.centerY,
-		rotation: params.rotation,
-		scale: params.scale,
-		bounds,
-	});
-
-	return {
-		...params,
-		centerX: recentered.centerX,
-		centerY: recentered.centerY,
-		path: recentered.points,
-	};
-}
-
-export function insertPointOnCustomMaskSegment({
-	params,
-	segmentIndex,
-	canvasPoint,
-	bounds,
-	pointId = generateUUID(),
-}: {
-	params: CustomMaskParams;
-	segmentIndex: number;
-	canvasPoint: { x: number; y: number };
-	bounds: ElementBounds;
-	pointId?: string;
-}): { params: CustomMaskParams; pointId: string } | null {
-	const points = params.path;
-	if (getCustomMaskSegmentCount({ points, closed: params.closed }) === 0) {
-		return null;
-	}
-
-	const closestPoint = findClosestPointOnCustomMaskSegment({
-		points,
-		segmentIndex,
-		canvasPoint,
-		centerX: params.centerX,
-		centerY: params.centerY,
-		rotation: params.rotation,
-		scale: params.scale,
-		bounds,
-		closed: params.closed,
-	});
-	if (!closestPoint) {
-		return null;
-	}
-
-	const nextPoints = insertPointIntoCustomMaskSegment({
-		points,
-		segmentIndex,
-		pointId,
-		t: closestPoint.t,
-		closed: params.closed,
-	});
-	if (nextPoints.length === points.length) {
-		return null;
-	}
-
-	const recentered = recenterCustomMaskPath({
-		points: nextPoints,
-		centerX: params.centerX,
-		centerY: params.centerY,
-		rotation: params.rotation,
-		scale: params.scale,
-		bounds,
-	});
-
-	return {
-		pointId,
-		params: {
-			...params,
-			centerX: recentered.centerX,
-			centerY: recentered.centerY,
-			path: recentered.points,
-		},
-	};
-}
diff --git a/apps/web/src/lib/masks/definitions/diamond.ts b/apps/web/src/lib/masks/definitions/diamond.ts
deleted file mode 100644
index 56930678..00000000
--- a/apps/web/src/lib/masks/definitions/diamond.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	buildBoxMaskInteraction,
-	computeBoxMaskParamUpdate,
-	getBoxLikeGeometry,
-	getDefaultSquareMaskParams,
-	getStrokeOffset,
-	rotatePoint,
-} from "./box-like";
-
-function buildDiamondPath({
-	centerX,
-	centerY,
-	halfWidth,
-	halfHeight,
-	rotationRad,
-}: {
-	centerX: number;
-	centerY: number;
-	halfWidth: number;
-	halfHeight: number;
-	rotationRad: number;
-}): Path2D {
-	const points = [
-		{ x: centerX, y: centerY - halfHeight },
-		{ x: centerX + halfWidth, y: centerY },
-		{ x: centerX, y: centerY + halfHeight },
-		{ x: centerX - halfWidth, y: centerY },
-	].map((point) =>
-		rotatePoint({
-			...point,
-			centerX,
-			centerY,
-			rotationRad,
-		}),
-	);
-
-	const path = new Path2D();
-	path.moveTo(points[0].x, points[0].y);
-	for (const point of points.slice(1)) {
-		path.lineTo(point.x, point.y);
-	}
-	path.closePath();
-	return path;
-}
-
-export const diamondMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "diamond",
-	name: "Diamond",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	interaction: buildBoxMaskInteraction({
-		sizeMode: "width-height",
-		buildOverlayPath({ width, height }) {
-			return `M ${width / 2},0 L ${width},${height / 2} L ${width / 2},${height} L 0,${height / 2} Z`;
-		},
-	}),
-	buildDefault(context) {
-		return {
-			type: "diamond",
-			params: getDefaultSquareMaskParams(context),
-		};
-	},
-	computeParamUpdate: computeBoxMaskParamUpdate,
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			return buildDiamondPath({
-				centerX,
-				centerY,
-				halfWidth: maskWidth / 2,
-				halfHeight: maskHeight / 2,
-				rotationRad,
-			});
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const offset = getStrokeOffset({
-				strokeAlign: params.strokeAlign,
-				strokeWidth: params.strokeWidth,
-			});
-			return buildDiamondPath({
-				centerX,
-				centerY,
-				halfWidth: Math.max(maskWidth / 2 + offset, 1),
-				halfHeight: Math.max(maskHeight / 2 + offset, 1),
-				rotationRad,
-			});
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/definitions/ellipse.ts b/apps/web/src/lib/masks/definitions/ellipse.ts
deleted file mode 100644
index 2eb85f0c..00000000
--- a/apps/web/src/lib/masks/definitions/ellipse.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	buildBoxMaskInteraction,
-	computeBoxMaskParamUpdate,
-	getBoxLikeGeometry,
-	getDefaultSquareMaskParams,
-	getStrokeOffset,
-} from "./box-like";
-
-export const ellipseMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "ellipse",
-	name: "Ellipse",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	interaction: buildBoxMaskInteraction({
-		sizeMode: "width-height",
-		buildOverlayPath({ width, height }) {
-			const rx = Math.max((width - 1) / 2, 0);
-			const ry = Math.max((height - 1) / 2, 0);
-			const cx = width / 2;
-			const cy = height / 2;
-			return `M ${cx},${cy - ry} A ${rx},${ry} 0 1,1 ${cx},${cy + ry} A ${rx},${ry} 0 1,1 ${cx},${cy - ry} Z`;
-		},
-	}),
-	buildDefault(context) {
-		return {
-			type: "ellipse",
-			params: getDefaultSquareMaskParams(context),
-		};
-	},
-	computeParamUpdate: computeBoxMaskParamUpdate,
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const path = new Path2D();
-			path.ellipse(
-				centerX,
-				centerY,
-				maskWidth / 2,
-				maskHeight / 2,
-				rotationRad,
-				0,
-				Math.PI * 2,
-			);
-			return path;
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const offset = getStrokeOffset({
-				strokeAlign: params.strokeAlign,
-				strokeWidth: params.strokeWidth,
-			});
-			const path = new Path2D();
-			path.ellipse(
-				centerX,
-				centerY,
-				Math.max(1, maskWidth / 2 + offset),
-				Math.max(1, maskHeight / 2 + offset),
-				rotationRad,
-				0,
-				Math.PI * 2,
-			);
-			return path;
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/definitions/heart.ts b/apps/web/src/lib/masks/definitions/heart.ts
deleted file mode 100644
index 429c5d98..00000000
--- a/apps/web/src/lib/masks/definitions/heart.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	buildBoxMaskInteraction,
-	computeBoxMaskParamUpdate,
-	getBoxLikeGeometry,
-	getDefaultSquareMaskParams,
-	getStrokeOffset,
-	rotatePoint,
-} from "./box-like";
-
-function buildHeartPath({
-	centerX,
-	centerY,
-	halfWidth,
-	halfHeight,
-	rotationRad,
-}: {
-	centerX: number;
-	centerY: number;
-	halfWidth: number;
-	halfHeight: number;
-	rotationRad: number;
-}): Path2D {
-	const toPoint = ({
-		localX,
-		localY,
-	}: {
-		localX: number;
-		localY: number;
-	}) =>
-		rotatePoint({
-			x: centerX + localX,
-			y: centerY + localY,
-			centerX,
-			centerY,
-			rotationRad,
-		});
-
-	const start = toPoint({ localX: 0, localY: -halfHeight * 0.475 });
-	const rightControl1 = toPoint({
-		localX: halfWidth,
-		localY: -halfHeight * 1.225,
-	});
-	const rightControl2 = toPoint({
-		localX: halfWidth,
-		localY: -halfHeight * 0.125,
-	});
-	const bottom = toPoint({ localX: 0, localY: halfHeight * 0.725 });
-	const leftControl1 = toPoint({
-		localX: -halfWidth,
-		localY: -halfHeight * 0.125,
-	});
-	const leftControl2 = toPoint({
-		localX: -halfWidth,
-		localY: -halfHeight * 1.225,
-	});
-
-	const path = new Path2D();
-	path.moveTo(start.x, start.y);
-	path.bezierCurveTo(
-		rightControl1.x,
-		rightControl1.y,
-		rightControl2.x,
-		rightControl2.y,
-		bottom.x,
-		bottom.y,
-	);
-	path.bezierCurveTo(
-		leftControl1.x,
-		leftControl1.y,
-		leftControl2.x,
-		leftControl2.y,
-		start.x,
-		start.y,
-	);
-	path.closePath();
-	return path;
-}
-
-export const heartMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "heart",
-	name: "Heart",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	interaction: buildBoxMaskInteraction({
-		sizeMode: "width-height",
-		buildOverlayPath({ width, height }) {
-			const cx = width / 2;
-			const cy = height / 2;
-			const halfWidth = width / 2;
-			const halfHeight = height / 2;
-			return [
-				`M ${cx},${cy - halfHeight * 0.475}`,
-				`C ${cx + halfWidth},${cy - halfHeight * 1.225} ${cx + halfWidth},${cy - halfHeight * 0.125} ${cx},${cy + halfHeight * 0.725}`,
-				`C ${cx - halfWidth},${cy - halfHeight * 0.125} ${cx - halfWidth},${cy - halfHeight * 1.225} ${cx},${cy - halfHeight * 0.475}`,
-				"Z",
-			].join(" ");
-		},
-	}),
-	buildDefault(context) {
-		return {
-			type: "heart",
-			params: getDefaultSquareMaskParams(context),
-		};
-	},
-	computeParamUpdate: computeBoxMaskParamUpdate,
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			return buildHeartPath({
-				centerX,
-				centerY,
-				halfWidth: maskWidth / 2,
-				halfHeight: maskHeight / 2,
-				rotationRad,
-			});
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const offset = getStrokeOffset({
-				strokeAlign: params.strokeAlign,
-				strokeWidth: params.strokeWidth,
-			});
-			return buildHeartPath({
-				centerX,
-				centerY,
-				halfWidth: Math.max(maskWidth / 2 + offset, 1),
-				halfHeight: Math.max(maskHeight / 2 + offset, 1),
-				rotationRad,
-			});
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/definitions/index.ts b/apps/web/src/lib/masks/definitions/index.ts
deleted file mode 100644
index fd00cab1..00000000
--- a/apps/web/src/lib/masks/definitions/index.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { BaseMaskParams, MaskDefinition } from "@/lib/masks/types";
-import { masksRegistry, type MaskIconProps } from "../registry";
-import { cinematicBarsMaskDefinition } from "./cinematic-bars";
-import { customMaskDefinition } from "./custom";
-import { diamondMaskDefinition } from "./diamond";
-import { ellipseMaskDefinition } from "./ellipse";
-import { heartMaskDefinition } from "./heart";
-import { rectangleMaskDefinition } from "./rectangle";
-import { splitMaskDefinition } from "./split";
-import { starMaskDefinition } from "./star";
-import { textMaskDefinition } from "./text";
-import {
-	MinusSignIcon,
-	PanelRightDashedIcon,
-	SquareIcon,
-	CircleIcon,
-	FavouriteIcon,
-	DiamondIcon,
-	StarsIcon,
-	TextFontIcon,
-} from "@hugeicons/core-free-icons";
-
-function registerDefaultMask<TParams extends BaseMaskParams>({
-	definition,
-	icon,
-}: {
-	definition: MaskDefinition<TParams>;
-	icon: MaskIconProps;
-}) {
-	if (masksRegistry.has(definition.type)) {
-		return;
-	}
-
-	masksRegistry.registerMask({ definition, icon });
-}
-
-export function registerDefaultMasks(): void {
-	registerDefaultMask({
-		definition: splitMaskDefinition,
-		icon: { icon: PanelRightDashedIcon, strokeWidth: 1 },
-	});
-	registerDefaultMask({
-		definition: cinematicBarsMaskDefinition,
-		icon: { icon: MinusSignIcon },
-	});
-	registerDefaultMask({
-		definition: rectangleMaskDefinition,
-		icon: { icon: SquareIcon },
-	});
-	registerDefaultMask({
-		definition: ellipseMaskDefinition,
-		icon: { icon: CircleIcon },
-	});
-	registerDefaultMask({
-		definition: heartMaskDefinition,
-		icon: { icon: FavouriteIcon },
-	});
-	registerDefaultMask({
-		definition: diamondMaskDefinition,
-		icon: { icon: DiamondIcon },
-	});
-	registerDefaultMask({
-		definition: starMaskDefinition,
-		icon: { icon: StarsIcon },
-	});
-	registerDefaultMask({
-		definition: textMaskDefinition,
-		icon: { icon: TextFontIcon },
-	});
-	registerDefaultMask({
-		definition: customMaskDefinition,
-		icon: { icon: SquareIcon },
-	});
-}
diff --git a/apps/web/src/lib/masks/definitions/rectangle.ts b/apps/web/src/lib/masks/definitions/rectangle.ts
deleted file mode 100644
index 832b8307..00000000
--- a/apps/web/src/lib/masks/definitions/rectangle.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	buildBoxMaskInteraction,
-	computeBoxMaskParamUpdate,
-	getBoxLikeGeometry,
-	getDefaultSquareMaskParams,
-	getStrokeOffset,
-	rotatePoint,
-} from "./box-like";
-
-function buildRectanglePath({
-	centerX,
-	centerY,
-	halfWidth,
-	halfHeight,
-	rotationRad,
-}: {
-	centerX: number;
-	centerY: number;
-	halfWidth: number;
-	halfHeight: number;
-	rotationRad: number;
-}): Path2D {
-	const corners = [
-		{ x: centerX - halfWidth, y: centerY - halfHeight },
-		{ x: centerX + halfWidth, y: centerY - halfHeight },
-		{ x: centerX + halfWidth, y: centerY + halfHeight },
-		{ x: centerX - halfWidth, y: centerY + halfHeight },
-	].map((point) =>
-		rotatePoint({
-			...point,
-			centerX,
-			centerY,
-			rotationRad,
-		}),
-	);
-
-	const path = new Path2D();
-	path.moveTo(corners[0].x, corners[0].y);
-	for (const corner of corners.slice(1)) {
-		path.lineTo(corner.x, corner.y);
-	}
-	path.closePath();
-	return path;
-}
-
-export const rectangleMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "rectangle",
-	name: "Rectangle",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	interaction: buildBoxMaskInteraction({
-		sizeMode: "width-height",
-	}),
-	buildDefault(context) {
-		return {
-			type: "rectangle",
-			params: getDefaultSquareMaskParams(context),
-		};
-	},
-	computeParamUpdate: computeBoxMaskParamUpdate,
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			return buildRectanglePath({
-				centerX,
-				centerY,
-				halfWidth: maskWidth / 2,
-				halfHeight: maskHeight / 2,
-				rotationRad,
-			});
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const offset = getStrokeOffset({
-				strokeAlign: params.strokeAlign,
-				strokeWidth: params.strokeWidth,
-			});
-			return buildRectanglePath({
-				centerX,
-				centerY,
-				halfWidth: Math.max(1, maskWidth / 2 + offset),
-				halfHeight: Math.max(1, maskHeight / 2 + offset),
-				rotationRad,
-			});
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/definitions/split.ts b/apps/web/src/lib/masks/definitions/split.ts
deleted file mode 100644
index c1a14d90..00000000
--- a/apps/web/src/lib/masks/definitions/split.ts
+++ /dev/null
@@ -1,382 +0,0 @@
-import { computeFeatherUpdate } from "../param-update";
-import type {
-	MaskDefinition,
-	MaskParamUpdateArgs,
-	SplitMaskParams,
-} from "@/lib/masks/types";
-import { halfPlaneSign, lineEdgeIntersection } from "../utils";
-import {
-	getLineMaskHandlePositions,
-	getLineMaskOverlay,
-} from "@/lib/masks/handle-positions";
-import { snapMaskInteraction } from "@/lib/masks/snap";
-
-// cos(π/2) returns ~6e-17 in JS, not 0. Values below this threshold are snapped
-// to exactly 0 to prevent opposite-sign float noise on canvas corners that lie
-// exactly on the split line, which produces spurious midpoint vertices.
-const NORMAL_SNAP_EPSILON = 1e-10;
-
-// Guards against collinear vertices from float noise at canvas edges.
-const MIN_POLYGON_AREA_PX = 0.5;
-const INTERSECTION_EPSILON = 1e-6;
-
-function polygonArea({ vertices }: { vertices: [number, number][] }): number {
-	let area = 0;
-	for (let i = 0; i < vertices.length; i++) {
-		const [x1, y1] = vertices[i];
-		const [x2, y2] = vertices[(i + 1) % vertices.length];
-		area += x1 * y2 - x2 * y1;
-	}
-	return Math.abs(area) * 0.5;
-}
-
-function splitLineGeometry({
-	centerX,
-	centerY,
-	rotation,
-	width,
-	height,
-}: {
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	width: number;
-	height: number;
-}): { normalX: number; normalY: number; lineX: number; lineY: number } {
-	const angleRad = (rotation * Math.PI) / 180;
-	const normalX =
-		Math.abs(Math.cos(angleRad)) < NORMAL_SNAP_EPSILON ? 0 : Math.cos(angleRad);
-	const normalY =
-		Math.abs(Math.sin(angleRad)) < NORMAL_SNAP_EPSILON ? 0 : Math.sin(angleRad);
-	const lineX = width / 2 + centerX * width;
-	const lineY = height / 2 + centerY * height;
-	return { normalX, normalY, lineX, lineY };
-}
-
-function pointsEqual(
-	a: { x: number; y: number },
-	b: { x: number; y: number },
-): boolean {
-	return (
-		Math.abs(a.x - b.x) <= INTERSECTION_EPSILON &&
-		Math.abs(a.y - b.y) <= INTERSECTION_EPSILON
-	);
-}
-
-export function getSplitMaskStrokeSegment({
-	resolvedParams,
-	width,
-	height,
-}: {
-	resolvedParams: unknown;
-	width: number;
-	height: number;
-}): [{ x: number; y: number }, { x: number; y: number }] | null {
-	const { centerX, centerY, rotation } = resolvedParams as SplitMaskParams;
-	const { normalX, normalY, lineX, lineY } = splitLineGeometry({
-		centerX,
-		centerY,
-		rotation,
-		width,
-		height,
-	});
-
-	const edges: [number, number, number, number][] = [
-		[0, 0, width, 0],
-		[width, 0, width, height],
-		[width, height, 0, height],
-		[0, height, 0, 0],
-	];
-	const intersections: { x: number; y: number }[] = [];
-
-	for (const [x1, y1, x2, y2] of edges) {
-		const hit = lineEdgeIntersection({
-			lineX,
-			lineY,
-			normalX,
-			normalY,
-			x1,
-			y1,
-			x2,
-			y2,
-		});
-
-		if (!hit || intersections.some((point) => pointsEqual(point, hit))) {
-			continue;
-		}
-
-		intersections.push(hit);
-	}
-
-	if (intersections.length !== 2) {
-		return null;
-	}
-
-	return [intersections[0], intersections[1]];
-}
-
-function computeSplitMaskParamUpdate({
-	handleId,
-	startParams,
-	deltaX,
-	deltaY,
-	startCanvasX,
-	startCanvasY,
-	bounds,
-	canvasSize,
-}: MaskParamUpdateArgs<SplitMaskParams>): Partial<SplitMaskParams> {
-	if (handleId === "position") {
-		const rawX = startParams.centerX + deltaX / bounds.width;
-		const rawY = startParams.centerY + deltaY / bounds.height;
-
-		const minX = -bounds.cx / bounds.width;
-		const maxX = (canvasSize.width - bounds.cx) / bounds.width;
-		const minY = -bounds.cy / bounds.height;
-		const maxY = (canvasSize.height - bounds.cy) / bounds.height;
-
-		return {
-			centerX: Math.max(minX, Math.min(maxX, rawX)),
-			centerY: Math.max(minY, Math.min(maxY, rawY)),
-		};
-	}
-
-	if (handleId === "feather") {
-		const angleRad = (startParams.rotation * Math.PI) / 180;
-		return computeFeatherUpdate({
-			startFeather: startParams.feather,
-			deltaX,
-			deltaY,
-			directionX: -Math.cos(angleRad),
-			directionY: -Math.sin(angleRad),
-		});
-	}
-
-	if (handleId === "rotation") {
-		const pivotX = bounds.cx + startParams.centerX * bounds.width;
-		const pivotY = bounds.cy + startParams.centerY * bounds.height;
-		const startAngle =
-			(Math.atan2(startCanvasY - pivotY, startCanvasX - pivotX) * 180) /
-			Math.PI;
-		const currentAngle =
-			(Math.atan2(
-				startCanvasY + deltaY - pivotY,
-				startCanvasX + deltaX - pivotX,
-			) *
-				180) /
-			Math.PI;
-
-		let deltaAngle = currentAngle - startAngle;
-		if (deltaAngle > 180) deltaAngle -= 360;
-		if (deltaAngle < -180) deltaAngle += 360;
-
-		return {
-			rotation: (((startParams.rotation + deltaAngle) % 360) + 360) % 360,
-		};
-	}
-
-	return {};
-}
-
-export const splitMaskDefinition: MaskDefinition<SplitMaskParams> = {
-	type: "split",
-	name: "Split",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "none",
-	},
-	interaction: {
-		getInteraction({
-			params,
-			bounds,
-			displayScale,
-			scaleX: _scaleX,
-			scaleY: _scaleY,
-		}) {
-			return {
-				handles: getLineMaskHandlePositions({
-					centerX: params.centerX,
-					centerY: params.centerY,
-					rotation: params.rotation,
-					feather: params.feather,
-					bounds,
-					displayScale,
-				}),
-				overlays: [
-					getLineMaskOverlay({
-						centerX: params.centerX,
-						centerY: params.centerY,
-						rotation: params.rotation,
-						bounds,
-					}),
-				],
-			};
-		},
-		snap(args) {
-			return snapMaskInteraction(args);
-		},
-	},
-	buildDefault() {
-		return {
-			type: "split",
-			params: {
-				feather: 0,
-				inverted: false,
-				strokeColor: "#ffffff",
-				strokeWidth: 0,
-				strokeAlign: "center",
-				centerX: 0,
-				centerY: 0,
-				rotation: 0,
-			},
-		};
-	},
-	computeParamUpdate: computeSplitMaskParamUpdate,
-	params: [
-		{
-			key: "centerX",
-			label: "X",
-			type: "number",
-			default: 0,
-			min: -100,
-			max: 100,
-			step: 1,
-			displayMultiplier: 100,
-		},
-		{
-			key: "centerY",
-			label: "Y",
-			type: "number",
-			default: 0,
-			min: -100,
-			max: 100,
-			step: 1,
-			displayMultiplier: 100,
-		},
-		{
-			key: "rotation",
-			label: "Rotation",
-			type: "number",
-			default: 0,
-			min: 0,
-			max: 360,
-			step: 1,
-		},
-	],
-	renderer: {
-		renderMaskHandlesFeather: true,
-		renderMask({ resolvedParams, ctx, width, height, feather }) {
-			const { centerX, centerY, rotation } = resolvedParams as SplitMaskParams;
-			const { normalX, normalY, lineX, lineY } = splitLineGeometry({
-				centerX,
-				centerY,
-				rotation,
-				width,
-				height,
-			});
-
-			// Analytical gradient avoids JFA's two-sided distance artifact near canvas edges.
-			const featherHalf = feather / 2;
-			const gradient = ctx.createLinearGradient(
-				lineX - normalX * featherHalf,
-				lineY - normalY * featherHalf,
-				lineX + normalX * featherHalf,
-				lineY + normalY * featherHalf,
-			);
-			gradient.addColorStop(0, "rgba(255,255,255,0)");
-			gradient.addColorStop(1, "white");
-
-			ctx.fillStyle = gradient;
-			ctx.fillRect(0, 0, width, height);
-		},
-
-		buildPath({ resolvedParams, width, height }) {
-			const { centerX, centerY, rotation } = resolvedParams as SplitMaskParams;
-			const { normalX, normalY, lineX, lineY } = splitLineGeometry({
-				centerX,
-				centerY,
-				rotation,
-				width,
-				height,
-			});
-
-			const edges: [number, number, number, number][] = [
-				[0, 0, width, 0],
-				[width, 0, width, height],
-				[width, height, 0, height],
-				[0, height, 0, 0],
-			];
-
-			const isInsideHalfPlane = (x: number, y: number) =>
-				halfPlaneSign({ lineX, lineY, normalX, normalY, x, y }) >= 0;
-
-			const vertices: [number, number][] = [];
-			for (const [x1, y1, x2, y2] of edges) {
-				const isVertex1Inside = isInsideHalfPlane(x1, y1);
-				const isVertex2Inside = isInsideHalfPlane(x2, y2);
-
-				if (isVertex1Inside && isVertex2Inside) {
-					vertices.push([x2, y2]);
-				} else if (isVertex1Inside && !isVertex2Inside) {
-					const hit = lineEdgeIntersection({
-						lineX,
-						lineY,
-						normalX,
-						normalY,
-						x1,
-						y1,
-						x2,
-						y2,
-					});
-					if (hit) vertices.push([hit.x, hit.y]);
-				} else if (!isVertex1Inside && isVertex2Inside) {
-					const hit = lineEdgeIntersection({
-						lineX,
-						lineY,
-						normalX,
-						normalY,
-						x1,
-						y1,
-						x2,
-						y2,
-					});
-					if (hit) {
-						vertices.push([hit.x, hit.y]);
-						vertices.push([x2, y2]);
-					}
-				}
-			}
-
-			if (
-				vertices.length < 3 ||
-				polygonArea({ vertices }) < MIN_POLYGON_AREA_PX
-			) {
-				return new Path2D();
-			}
-
-			const path = new Path2D();
-			path.moveTo(vertices[0][0], vertices[0][1]);
-			for (let i = 1; i < vertices.length; i++) {
-				path.lineTo(vertices[i][0], vertices[i][1]);
-			}
-			path.closePath();
-			return path;
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const segment = getSplitMaskStrokeSegment({
-				resolvedParams,
-				width,
-				height,
-			});
-			const path = new Path2D();
-
-			if (!segment) {
-				return path;
-			}
-
-			path.moveTo(segment[0].x, segment[0].y);
-			path.lineTo(segment[1].x, segment[1].y);
-			return path;
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/definitions/star.ts b/apps/web/src/lib/masks/definitions/star.ts
deleted file mode 100644
index d311ab80..00000000
--- a/apps/web/src/lib/masks/definitions/star.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	buildBoxMaskInteraction,
-	computeBoxMaskParamUpdate,
-	getBoxLikeGeometry,
-	getDefaultSquareMaskParams,
-	getStrokeOffset,
-	rotatePoint,
-} from "./box-like";
-
-const STAR_INNER_RADIUS_RATIO = 0.45;
-const STAR_VERTEX_COUNT = 10;
-
-function buildStarPath({
-	centerX,
-	centerY,
-	halfWidth,
-	halfHeight,
-	rotationRad,
-}: {
-	centerX: number;
-	centerY: number;
-	halfWidth: number;
-	halfHeight: number;
-	rotationRad: number;
-}): Path2D {
-	const path = new Path2D();
-
-	for (let index = 0; index < STAR_VERTEX_COUNT; index++) {
-		const isOuterVertex = index % 2 === 0;
-		const radiusX = isOuterVertex
-			? halfWidth
-			: halfWidth * STAR_INNER_RADIUS_RATIO;
-		const radiusY = isOuterVertex
-			? halfHeight
-			: halfHeight * STAR_INNER_RADIUS_RATIO;
-		const angle = (index * Math.PI) / 5 - Math.PI / 2;
-		const point = rotatePoint({
-			x: centerX + radiusX * Math.cos(angle),
-			y: centerY + radiusY * Math.sin(angle),
-			centerX,
-			centerY,
-			rotationRad,
-		});
-
-		if (index === 0) {
-			path.moveTo(point.x, point.y);
-		} else {
-			path.lineTo(point.x, point.y);
-		}
-	}
-
-	path.closePath();
-	return path;
-}
-
-function buildOverlayStarPath({
-	width,
-	height,
-}: {
-	width: number;
-	height: number;
-}): string {
-	const centerX = width / 2;
-	const centerY = height / 2;
-	const halfWidth = width / 2;
-	const halfHeight = height / 2;
-	const segments: string[] = [];
-
-	for (let index = 0; index < STAR_VERTEX_COUNT; index++) {
-		const isOuterVertex = index % 2 === 0;
-		const radiusX = isOuterVertex
-			? halfWidth
-			: halfWidth * STAR_INNER_RADIUS_RATIO;
-		const radiusY = isOuterVertex
-			? halfHeight
-			: halfHeight * STAR_INNER_RADIUS_RATIO;
-		const angle = (index * Math.PI) / 5 - Math.PI / 2;
-		const x = centerX + radiusX * Math.cos(angle);
-		const y = centerY + radiusY * Math.sin(angle);
-		segments.push(`${index === 0 ? "M" : "L"} ${x},${y}`);
-	}
-
-	return `${segments.join(" ")} Z`;
-}
-
-export const starMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "star",
-	name: "Star",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	interaction: buildBoxMaskInteraction({
-		sizeMode: "width-height",
-		buildOverlayPath({ width, height }) {
-			return buildOverlayStarPath({ width, height });
-		},
-	}),
-	buildDefault(context) {
-		return {
-			type: "star",
-			params: getDefaultSquareMaskParams(context),
-		};
-	},
-	computeParamUpdate: computeBoxMaskParamUpdate,
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			return buildStarPath({
-				centerX,
-				centerY,
-				halfWidth: maskWidth / 2,
-				halfHeight: maskHeight / 2,
-				rotationRad,
-			});
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const offset = getStrokeOffset({
-				strokeAlign: params.strokeAlign,
-				strokeWidth: params.strokeWidth,
-			});
-			return buildStarPath({
-				centerX,
-				centerY,
-				halfWidth: Math.max(maskWidth / 2 + offset, 1),
-				halfHeight: Math.max(maskHeight / 2 + offset, 1),
-				rotationRad,
-			});
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/definitions/text.ts b/apps/web/src/lib/masks/definitions/text.ts
deleted file mode 100644
index b774ed28..00000000
--- a/apps/web/src/lib/masks/definitions/text.ts
+++ /dev/null
@@ -1,438 +0,0 @@
-import type { ParamDefinition } from "@/lib/params";
-import type {
-	MaskDefinition,
-	MaskParamUpdateArgs,
-	TextMask,
-	TextMaskParams,
-} from "@/lib/masks/types";
-import { DEFAULTS } from "@/lib/timeline/defaults";
-import { MIN_FONT_SIZE, MAX_FONT_SIZE } from "@/lib/text/typography";
-import {
-	drawMeasuredTextLayout,
-	measureTextLayout,
-	strokeMeasuredTextLayout,
-} from "@/lib/text/primitives";
-import { getTextMeasurementContext } from "@/lib/text/measure-element";
-import { getTextVisualRect } from "@/lib/text/layout";
-import {
-	getBoxMaskHandlePositions,
-	getBoxMaskRectOverlay,
-} from "@/lib/masks/handle-positions";
-import { computeFeatherUpdate } from "@/lib/masks/param-update";
-import {
-	setMaskLocalCenter,
-	toGlobalMaskSnapLines,
-} from "@/lib/masks/geometry";
-import {
-	snapPosition,
-	snapRotation,
-	snapScale,
-	type ScaleEdgePreference,
-} from "@/lib/preview/preview-snap";
-
-const PERCENTAGE_DISPLAY = {
-	displayMultiplier: 100,
-	step: 1,
-} as const;
-
-const TEXT_MASK_ALIGNMENT = DEFAULTS.text.element.textAlign;
-
-const TEXT_MASK_PARAMS: ParamDefinition<keyof TextMaskParams & string>[] = [
-	{
-		key: "centerX",
-		label: "X",
-		type: "number",
-		default: 0,
-		min: -100,
-		max: 100,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "centerY",
-		label: "Y",
-		type: "number",
-		default: 0,
-		min: -100,
-		max: 100,
-		...PERCENTAGE_DISPLAY,
-	},
-	{
-		key: "fontSize",
-		label: "Size",
-		type: "number",
-		default: DEFAULTS.text.element.fontSize,
-		min: MIN_FONT_SIZE,
-		max: MAX_FONT_SIZE,
-		step: 1,
-	},
-	{
-		key: "rotation",
-		label: "Rotation",
-		type: "number",
-		default: 0,
-		min: 0,
-		max: 360,
-		step: 1,
-	},
-	{
-		key: "scale",
-		label: "Scale",
-		type: "number",
-		default: 1,
-		min: 1,
-		max: 500,
-		...PERCENTAGE_DISPLAY,
-	},
-];
-
-function measureTextMask({
-	params,
-	height,
-}: {
-	params: TextMaskParams;
-	height: number;
-}) {
-	const layout = measureTextLayout({
-		text: {
-			content: params.content,
-			fontSize: params.fontSize,
-			fontFamily: params.fontFamily,
-			fontWeight: params.fontWeight,
-			fontStyle: params.fontStyle,
-			textAlign: TEXT_MASK_ALIGNMENT,
-			textDecoration: params.textDecoration,
-			letterSpacing: params.letterSpacing,
-			lineHeight: params.lineHeight,
-		},
-		canvasHeight: height,
-		ctx: getTextMeasurementContext(),
-	});
-	const visualRect = getTextVisualRect({
-		textAlign: layout.textAlign,
-		block: layout.block,
-		background: { enabled: false, color: "transparent" },
-		fontSizeRatio: layout.fontSizeRatio,
-	});
-
-	return {
-		layout,
-		intrinsicWidth: Math.max(1, visualRect.width),
-		intrinsicHeight: Math.max(1, visualRect.height),
-	};
-}
-
-function getScalePreferredEdges({
-	handleId,
-}: {
-	handleId: string;
-}): ScaleEdgePreference | undefined {
-	if (handleId !== "scale") {
-		return undefined;
-	}
-
-	return {
-		right: true,
-		bottom: true,
-	};
-}
-
-function computeTextMaskParamUpdate({
-	handleId,
-	startParams,
-	deltaX,
-	deltaY,
-	startCanvasX,
-	startCanvasY,
-	bounds,
-}: MaskParamUpdateArgs<TextMaskParams>): Partial<TextMaskParams> {
-	if (handleId === "position") {
-		return {
-			centerX: startParams.centerX + deltaX / bounds.width,
-			centerY: startParams.centerY + deltaY / bounds.height,
-		};
-	}
-
-	const pivotX = bounds.cx + startParams.centerX * bounds.width;
-	const pivotY = bounds.cy + startParams.centerY * bounds.height;
-
-	if (handleId === "rotation") {
-		const startAngle =
-			(Math.atan2(startCanvasY - pivotY, startCanvasX - pivotX) * 180) /
-			Math.PI;
-		const currentAngle =
-			(Math.atan2(
-				startCanvasY + deltaY - pivotY,
-				startCanvasX + deltaX - pivotX,
-			) *
-				180) /
-			Math.PI;
-
-		let deltaAngle = currentAngle - startAngle;
-		if (deltaAngle > 180) deltaAngle -= 360;
-		if (deltaAngle < -180) deltaAngle += 360;
-
-		return {
-			rotation: (((startParams.rotation + deltaAngle) % 360) + 360) % 360,
-		};
-	}
-
-	if (handleId === "feather") {
-		const angleRad = (startParams.rotation * Math.PI) / 180;
-		return computeFeatherUpdate({
-			startFeather: startParams.feather,
-			deltaX,
-			deltaY,
-			directionX: -Math.sin(angleRad),
-			directionY: Math.cos(angleRad),
-		});
-	}
-
-	if (handleId === "scale") {
-		const startDistance = Math.hypot(
-			startCanvasX - pivotX,
-			startCanvasY - pivotY,
-		);
-		const currentDistance = Math.hypot(
-			startCanvasX + deltaX - pivotX,
-			startCanvasY + deltaY - pivotY,
-		);
-		const scaleFactor = startDistance > 0 ? currentDistance / startDistance : 1;
-		return {
-			scale: Math.max(0.01, startParams.scale * scaleFactor),
-		};
-	}
-
-	return {};
-}
-
-export const textMaskDefinition: MaskDefinition<TextMaskParams> = {
-	type: "text",
-	name: "Text",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "uniform",
-	},
-	params: TEXT_MASK_PARAMS,
-	interaction: {
-		getInteraction({
-			params,
-			bounds,
-			displayScale,
-			scaleX: _scaleX,
-			scaleY: _scaleY,
-		}) {
-			const { intrinsicWidth, intrinsicHeight } = measureTextMask({
-				params,
-				height: bounds.height,
-			});
-			const width = (intrinsicWidth * params.scale) / bounds.width;
-			const height = (intrinsicHeight * params.scale) / bounds.height;
-			return {
-				handles: getBoxMaskHandlePositions({
-					centerX: params.centerX,
-					centerY: params.centerY,
-					width,
-					height,
-					rotation: params.rotation,
-					feather: params.feather,
-					sizeMode: "uniform",
-					bounds,
-					displayScale,
-				}),
-				overlays: [
-					getBoxMaskRectOverlay({
-						centerX: params.centerX,
-						centerY: params.centerY,
-						width,
-						height,
-						rotation: params.rotation,
-						bounds,
-					}),
-				],
-			};
-		},
-		snap({
-			handleId,
-			startParams,
-			proposedParams,
-			bounds,
-			canvasSize,
-			snapThreshold,
-		}) {
-			const { intrinsicWidth, intrinsicHeight } = measureTextMask({
-				params: startParams,
-				height: bounds.height,
-			});
-			const position = {
-				x: proposedParams.centerX * bounds.width,
-				y: proposedParams.centerY * bounds.height,
-			};
-
-			if (handleId === "position") {
-				const { snappedPosition, activeLines } = snapPosition({
-					proposedPosition: position,
-					canvasSize: bounds,
-					elementSize: {
-						width: intrinsicWidth * proposedParams.scale,
-						height: intrinsicHeight * proposedParams.scale,
-					},
-					rotation: proposedParams.rotation,
-					snapThreshold,
-				});
-
-				return {
-					params: {
-						...proposedParams,
-						...setMaskLocalCenter({
-							center: snappedPosition,
-							bounds,
-						}),
-					},
-					activeLines: toGlobalMaskSnapLines({
-						lines: activeLines,
-						bounds,
-						canvasSize,
-					}),
-				};
-			}
-
-			if (handleId === "rotation") {
-				const { snappedRotation } = snapRotation({
-					proposedRotation: proposedParams.rotation,
-				});
-				return {
-					params: {
-						...proposedParams,
-						rotation: snappedRotation,
-					},
-					activeLines: [],
-				};
-			}
-
-			if (handleId === "scale") {
-				const { snappedScale, activeLines } = snapScale({
-					proposedScale: proposedParams.scale,
-					position,
-					baseWidth: intrinsicWidth,
-					baseHeight: intrinsicHeight,
-					rotation: proposedParams.rotation,
-					canvasSize: bounds,
-					snapThreshold,
-					preferredEdges: getScalePreferredEdges({ handleId }),
-				});
-
-				return {
-					params: {
-						...proposedParams,
-						scale: Math.max(0.01, snappedScale),
-					},
-					activeLines: toGlobalMaskSnapLines({
-						lines: activeLines,
-						bounds,
-						canvasSize,
-					}),
-				};
-			}
-
-			return {
-				params: proposedParams,
-				activeLines: [],
-			};
-		},
-	},
-	buildDefault(): Omit<TextMask, "id"> {
-		return {
-			type: "text",
-			params: {
-				feather: 0,
-				inverted: false,
-				strokeColor: "#ffffff",
-				strokeWidth: 0,
-				strokeAlign: "center",
-				content: "Mask",
-				fontSize: DEFAULTS.text.element.fontSize,
-				fontFamily: DEFAULTS.text.element.fontFamily,
-				fontWeight: DEFAULTS.text.element.fontWeight,
-				fontStyle: DEFAULTS.text.element.fontStyle,
-				textDecoration: DEFAULTS.text.element.textDecoration,
-				letterSpacing: DEFAULTS.text.letterSpacing,
-				lineHeight: DEFAULTS.text.lineHeight,
-				centerX: 0,
-				centerY: 0,
-				rotation: 0,
-				scale: 1,
-			},
-		};
-	},
-	computeParamUpdate: computeTextMaskParamUpdate,
-	isActive(params) {
-		return params.content.trim().length > 0;
-	},
-	renderer: {
-		renderMask({ resolvedParams, ctx, width, height }) {
-			const params = resolvedParams as TextMaskParams;
-			const { layout } = measureTextMask({ params, height });
-
-			ctx.save();
-			ctx.translate(
-				width / 2 + params.centerX * width,
-				height / 2 + params.centerY * height,
-			);
-			ctx.scale(params.scale, params.scale);
-			if (params.rotation) {
-				ctx.rotate((params.rotation * Math.PI) / 180);
-			}
-			drawMeasuredTextLayout({
-				ctx,
-				layout,
-				textColor: "#ffffff",
-				background: null,
-			});
-			ctx.restore();
-		},
-		renderStroke({ resolvedParams, ctx, width, height }) {
-			const params = resolvedParams as TextMaskParams;
-			const { layout } = measureTextMask({ params, height });
-
-			ctx.save();
-			ctx.translate(
-				width / 2 + params.centerX * width,
-				height / 2 + params.centerY * height,
-			);
-			ctx.scale(params.scale, params.scale);
-			if (params.rotation) {
-				ctx.rotate((params.rotation * Math.PI) / 180);
-			}
-
-			strokeMeasuredTextLayout({
-				ctx,
-				layout,
-				strokeColor: params.strokeColor,
-				strokeWidth: params.strokeWidth,
-			});
-
-			if (params.strokeAlign === "inside") {
-				ctx.globalCompositeOperation = "destination-in";
-				drawMeasuredTextLayout({
-					ctx,
-					layout,
-					textColor: "#ffffff",
-					background: null,
-				});
-			}
-
-			if (params.strokeAlign === "outside") {
-				ctx.globalCompositeOperation = "destination-out";
-				drawMeasuredTextLayout({
-					ctx,
-					layout,
-					textColor: "#ffffff",
-					background: null,
-				});
-			}
-
-			ctx.restore();
-		},
-	},
-};
diff --git a/apps/web/src/lib/masks/dimensions.ts b/apps/web/src/lib/masks/dimensions.ts
deleted file mode 100644
index dcfcdc0c..00000000
--- a/apps/web/src/lib/masks/dimensions.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const DEFAULT_SHAPE_MASK_SHORT_SIDE_RATIO = 0.6;
-export const MIN_MASK_DIMENSION = 0.01;
diff --git a/apps/web/src/lib/masks/feather.ts b/apps/web/src/lib/masks/feather.ts
deleted file mode 100644
index 83e80a0c..00000000
--- a/apps/web/src/lib/masks/feather.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const MAX_FEATHER = 1000;
-export const FEATHER_HANDLE_SCALE = 0.11;
diff --git a/apps/web/src/lib/masks/geometry.ts b/apps/web/src/lib/masks/geometry.ts
deleted file mode 100644
index a5b05030..00000000
--- a/apps/web/src/lib/masks/geometry.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import type { ElementBounds } from "@/lib/preview/element-bounds";
-import type { SnapLine } from "@/lib/preview/preview-snap";
-import { MIN_MASK_DIMENSION } from "@/lib/masks/dimensions";
-import type { RectangleMaskParams } from "@/lib/masks/types";
-
-type CenterMaskParams = {
-	centerX: number;
-	centerY: number;
-};
-
-type SnapGeometryParams = CenterMaskParams & {
-	rotation?: number;
-	width?: number;
-	height?: number;
-	scale?: number;
-};
-
-export function hasCenterParams(
-	params: Partial<CenterMaskParams>,
-): params is CenterMaskParams {
-	return (
-		typeof params.centerX === "number" && typeof params.centerY === "number"
-	);
-}
-
-export function isRectangleMaskParams(
-	params: SnapGeometryParams,
-): params is RectangleMaskParams {
-	return (
-		hasCenterParams(params) &&
-		typeof params.width === "number" &&
-		typeof params.height === "number" &&
-		typeof params.rotation === "number" &&
-		typeof params.scale === "number"
-	);
-}
-
-export function getMaskLocalCenter({
-	params,
-	bounds,
-}: {
-	params: CenterMaskParams;
-	bounds: ElementBounds;
-}): { x: number; y: number } | null {
-	if (!hasCenterParams(params)) return null;
-
-	return {
-		x: params.centerX * bounds.width,
-		y: params.centerY * bounds.height,
-	};
-}
-
-export function setMaskLocalCenter({
-	center,
-	bounds,
-}: {
-	center: { x: number; y: number };
-	bounds: ElementBounds;
-}): { centerX: number; centerY: number } {
-	return {
-		centerX: bounds.width === 0 ? 0 : center.x / bounds.width,
-		centerY: bounds.height === 0 ? 0 : center.y / bounds.height,
-	};
-}
-
-export function getMaskSnapGeometry({
-	params,
-	bounds,
-}: {
-	params: SnapGeometryParams;
-	bounds: ElementBounds;
-}): {
-	position: { x: number; y: number };
-	size: { width: number; height: number };
-	rotation: number;
-} | null {
-	const position = getMaskLocalCenter({ params, bounds });
-	if (!position) return null;
-
-	if (isRectangleMaskParams(params)) {
-		return {
-			position,
-			size: {
-				width: Math.max(params.width, MIN_MASK_DIMENSION) * bounds.width,
-				height: Math.max(params.height, MIN_MASK_DIMENSION) * bounds.height,
-			},
-			rotation: params.rotation,
-		};
-	}
-
-	return {
-		position,
-		size: { width: 0, height: 0 },
-		rotation: typeof params.rotation === "number" ? params.rotation : 0,
-	};
-}
-
-export function toGlobalMaskSnapLines({
-	lines,
-	bounds,
-	canvasSize,
-}: {
-	lines: SnapLine[];
-	bounds: ElementBounds;
-	canvasSize: { width: number; height: number };
-}): SnapLine[] {
-	const centerX = bounds.cx - canvasSize.width / 2;
-	const centerY = bounds.cy - canvasSize.height / 2;
-
-	return lines.map((line) =>
-		line.type === "vertical"
-			? {
-					type: "vertical" as const,
-					position: centerX + line.position,
-				}
-			: {
-					type: "horizontal" as const,
-					position: centerY + line.position,
-				},
-	);
-}
diff --git a/apps/web/src/lib/masks/handle-positions.ts b/apps/web/src/lib/masks/handle-positions.ts
deleted file mode 100644
index d32b8424..00000000
--- a/apps/web/src/lib/masks/handle-positions.ts
+++ /dev/null
@@ -1,497 +0,0 @@
-import { FEATHER_HANDLE_SCALE } from "@/lib/masks/feather";
-import type { ElementBounds } from "@/lib/preview/element-bounds";
-import type {
-	MaskFeatures,
-	MaskHandlePosition,
-	MaskLineOverlay,
-	MaskOverlay,
-	MaskRectOverlay,
-	RectangleMaskParams,
-	MaskShapeOverlay,
-} from "@/lib/masks/types";
-
-const LINE_HANDLE_OFFSET_SCREEN_PX = 20;
-const BOX_HANDLE_OFFSET_SCREEN_PX = 20;
-const LINE_EXTENT_MULTIPLIER = 50;
-
-const CURSOR = {
-	rotate: "crosshair",
-	resizeDiagonal: "nwse-resize",
-	resizeHorizontal: "ew-resize",
-	resizeVertical: "ns-resize",
-} as const;
-
-/**
- * The renderer defines the split line as:
- *   - normal direction: (cos(rotation), sin(rotation))
- *   - line direction (parallel to cut): (-sin(rotation), cos(rotation))
- *   - reference point: (centerX * width, centerY * height) from element centre
- *
- * So rotation=0 → normal points right → line runs vertically.
- */
-export function getLineMaskLinePoints({
-	centerX,
-	centerY,
-	rotation,
-	bounds,
-}: {
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	bounds: ElementBounds;
-}): { start: { x: number; y: number }; end: { x: number; y: number } } {
-	const angleRad = (rotation * Math.PI) / 180;
-	const normalX = Math.cos(angleRad);
-	const normalY = Math.sin(angleRad);
-	const lineDirX = -normalY;
-	const lineDirY = normalX;
-
-	const cx = bounds.cx + centerX * bounds.width;
-	const cy = bounds.cy + centerY * bounds.height;
-
-	const extent = Math.max(bounds.width, bounds.height) * LINE_EXTENT_MULTIPLIER;
-
-	return {
-		start: {
-			x: cx - lineDirX * extent,
-			y: cy - lineDirY * extent,
-		},
-		end: {
-			x: cx + lineDirX * extent,
-			y: cy + lineDirY * extent,
-		},
-	};
-}
-
-export function getLineMaskOverlay({
-	centerX,
-	centerY,
-	rotation,
-	bounds,
-	handleId = "position",
-	cursor = "move",
-}: {
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	bounds: ElementBounds;
-	handleId?: string;
-	cursor?: string;
-}): MaskLineOverlay {
-	const { start, end } = getLineMaskLinePoints({
-		centerX,
-		centerY,
-		rotation,
-		bounds,
-	});
-
-	return {
-		id: "line",
-		type: "line",
-		start,
-		end,
-		handleId,
-		cursor,
-	};
-}
-
-export function getLineMaskHandlePositions({
-	centerX,
-	centerY,
-	rotation,
-	feather,
-	bounds,
-	displayScale,
-}: {
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	feather: number;
-	bounds: ElementBounds;
-	displayScale: number;
-}): MaskHandlePosition[] {
-	const angleRad = (rotation * Math.PI) / 180;
-	const normalX = Math.cos(angleRad);
-	const normalY = Math.sin(angleRad);
-
-	const cx = bounds.cx + centerX * bounds.width;
-	const cy = bounds.cy + centerY * bounds.height;
-
-	const iconOffsetCanvas = LINE_HANDLE_OFFSET_SCREEN_PX / displayScale;
-	const featherOffset = iconOffsetCanvas + feather * FEATHER_HANDLE_SCALE;
-
-	return [
-		{
-			id: "rotation",
-			x: cx + normalX * iconOffsetCanvas,
-			y: cy + normalY * iconOffsetCanvas,
-			cursor: CURSOR.rotate,
-			kind: "icon",
-			icon: "rotate",
-		},
-		{
-			id: "feather",
-			x: cx - normalX * featherOffset,
-			y: cy - normalY * featherOffset,
-			cursor: CURSOR.resizeHorizontal,
-			kind: "icon",
-			icon: "feather",
-		},
-	];
-}
-
-function rotatePoint({
-	localX,
-	localY,
-	cx,
-	cy,
-	angleRad,
-}: {
-	localX: number;
-	localY: number;
-	cx: number;
-	cy: number;
-	angleRad: number;
-}): { x: number; y: number } {
-	const cos = Math.cos(angleRad);
-	const sin = Math.sin(angleRad);
-	return {
-		x: cx + localX * cos - localY * sin,
-		y: cy + localX * sin + localY * cos,
-	};
-}
-
-export function getBoxMaskHandlePositions({
-	centerX,
-	centerY,
-	width,
-	height,
-	rotation,
-	feather,
-	sizeMode,
-	showScaleHandle = true,
-	bounds,
-	displayScale,
-}: {
-	centerX: number;
-	centerY: number;
-	width: number;
-	height: number;
-	rotation: number;
-	feather: number;
-	sizeMode: MaskFeatures["sizeMode"];
-	showScaleHandle?: boolean;
-	bounds: ElementBounds;
-	displayScale: number;
-}): MaskHandlePosition[] {
-	const cx = bounds.cx + centerX * bounds.width;
-	const cy = bounds.cy + centerY * bounds.height;
-	const angleRad = (rotation * Math.PI) / 180;
-	const halfWidth = (width * bounds.width) / 2;
-	const halfHeight = (height * bounds.height) / 2;
-
-	const handles: MaskHandlePosition[] = [];
-	const handleOffsetCanvas = BOX_HANDLE_OFFSET_SCREEN_PX / displayScale;
-
-	const rotHandle = rotatePoint({
-		localX: 0,
-		localY: -halfHeight - handleOffsetCanvas,
-		cx,
-		cy,
-		angleRad,
-	});
-	handles.push({
-		id: "rotation",
-		x: rotHandle.x,
-		y: rotHandle.y,
-		cursor: CURSOR.rotate,
-		kind: "icon",
-		icon: "rotate",
-	});
-
-	const featherHandle = rotatePoint({
-		localX: 0,
-		localY: halfHeight + handleOffsetCanvas + feather * FEATHER_HANDLE_SCALE,
-		cx,
-		cy,
-		angleRad,
-	});
-	handles.push({
-		id: "feather",
-		x: featherHandle.x,
-		y: featherHandle.y,
-		cursor: CURSOR.resizeVertical,
-		kind: "icon",
-		icon: "feather",
-	});
-
-	if (sizeMode === "width-height") {
-		const corners = [
-			{ localX: -halfWidth, localY: -halfHeight, id: "top-left" },
-			{ localX: halfWidth, localY: -halfHeight, id: "top-right" },
-			{ localX: halfWidth, localY: halfHeight, id: "bottom-right" },
-			{ localX: -halfWidth, localY: halfHeight, id: "bottom-left" },
-		];
-		for (const { localX, localY, id } of corners) {
-			const point = rotatePoint({ localX, localY, cx, cy, angleRad });
-			handles.push({
-				id,
-				x: point.x,
-				y: point.y,
-				cursor: CURSOR.resizeDiagonal,
-				kind: "corner",
-			});
-		}
-		const right = rotatePoint({
-			localX: halfWidth,
-			localY: 0,
-			cx,
-			cy,
-			angleRad,
-		});
-		const left = rotatePoint({
-			localX: -halfWidth,
-			localY: 0,
-			cx,
-			cy,
-			angleRad,
-		});
-		const bottom = rotatePoint({
-			localX: 0,
-			localY: halfHeight,
-			cx,
-			cy,
-			angleRad,
-		});
-		handles.push({
-			id: "left",
-			x: left.x,
-			y: left.y,
-			cursor: CURSOR.resizeHorizontal,
-			kind: "edge",
-			edgeAxis: "horizontal",
-			rotation,
-		});
-		handles.push({
-			id: "right",
-			x: right.x,
-			y: right.y,
-			cursor: CURSOR.resizeHorizontal,
-			kind: "edge",
-			edgeAxis: "horizontal",
-			rotation,
-		});
-		handles.push({
-			id: "bottom",
-			x: bottom.x,
-			y: bottom.y,
-			cursor: CURSOR.resizeVertical,
-			kind: "edge",
-			edgeAxis: "vertical",
-			rotation,
-		});
-	} else if (sizeMode === "height-only") {
-		const top = rotatePoint({
-			localX: 0,
-			localY: -halfHeight,
-			cx,
-			cy,
-			angleRad,
-		});
-		const bottom = rotatePoint({
-			localX: 0,
-			localY: halfHeight,
-			cx,
-			cy,
-			angleRad,
-		});
-		handles.push({
-			id: "top",
-			x: top.x,
-			y: top.y,
-			cursor: CURSOR.resizeVertical,
-			kind: "edge",
-			edgeAxis: "vertical",
-			rotation,
-		});
-		handles.push({
-			id: "bottom",
-			x: bottom.x,
-			y: bottom.y,
-			cursor: CURSOR.resizeVertical,
-			kind: "edge",
-			edgeAxis: "vertical",
-			rotation,
-		});
-	} else if (sizeMode === "width-only") {
-		const left = rotatePoint({
-			localX: -halfWidth,
-			localY: 0,
-			cx,
-			cy,
-			angleRad,
-		});
-		const right = rotatePoint({
-			localX: halfWidth,
-			localY: 0,
-			cx,
-			cy,
-			angleRad,
-		});
-		handles.push({
-			id: "left",
-			x: left.x,
-			y: left.y,
-			cursor: CURSOR.resizeHorizontal,
-			kind: "edge",
-			edgeAxis: "horizontal",
-			rotation,
-		});
-		handles.push({
-			id: "right",
-			x: right.x,
-			y: right.y,
-			cursor: CURSOR.resizeHorizontal,
-			kind: "edge",
-			edgeAxis: "horizontal",
-			rotation,
-		});
-	} else if (sizeMode === "uniform" && showScaleHandle) {
-		const point = rotatePoint({
-			localX: halfWidth,
-			localY: halfHeight,
-			cx,
-			cy,
-			angleRad,
-		});
-		handles.push({
-			id: "scale",
-			x: point.x,
-			y: point.y,
-			cursor: CURSOR.resizeDiagonal,
-			kind: "corner",
-		});
-	}
-
-	return handles;
-}
-
-export function getBoxMaskRectOverlay({
-	centerX,
-	centerY,
-	width,
-	height,
-	rotation,
-	bounds,
-	handleId = "position",
-	cursor = "move",
-	dashed = false,
-}: {
-	centerX: number;
-	centerY: number;
-	width: number;
-	height: number;
-	rotation: number;
-	bounds: ElementBounds;
-	handleId?: string;
-	cursor?: string;
-	dashed?: boolean;
-}): MaskRectOverlay {
-	return {
-		id: "bounding-box",
-		type: "rect",
-		center: {
-			x: bounds.cx + centerX * bounds.width,
-			y: bounds.cy + centerY * bounds.height,
-		},
-		width: width * bounds.width,
-		height: height * bounds.height,
-		rotation,
-		handleId,
-		cursor,
-		dashed,
-	};
-}
-
-export function getBoxMaskShapeOverlay({
-	centerX,
-	centerY,
-	width,
-	height,
-	rotation,
-	bounds,
-	pathData,
-	handleId = "position",
-	cursor = "move",
-}: {
-	centerX: number;
-	centerY: number;
-	width: number;
-	height: number;
-	rotation: number;
-	bounds: ElementBounds;
-	pathData: string;
-	handleId?: string;
-	cursor?: string;
-}): MaskShapeOverlay {
-	return {
-		id: "shape-outline",
-		type: "shape",
-		center: {
-			x: bounds.cx + centerX * bounds.width,
-			y: bounds.cy + centerY * bounds.height,
-		},
-		width: width * bounds.width,
-		height: height * bounds.height,
-		rotation,
-		pathData,
-		handleId,
-		cursor,
-	};
-}
-
-export function getBoxMaskOverlays({
-	params,
-	bounds,
-	pathData,
-	showBoundingBox = true,
-}: {
-	params: Pick<
-		RectangleMaskParams,
-		"centerX" | "centerY" | "width" | "height" | "rotation"
-	>;
-	bounds: ElementBounds;
-	pathData?: string;
-	showBoundingBox?: boolean;
-}): MaskOverlay[] {
-	const overlays: MaskOverlay[] = [];
-	if (showBoundingBox) {
-		overlays.push(
-			getBoxMaskRectOverlay({
-				centerX: params.centerX,
-				centerY: params.centerY,
-				width: params.width,
-				height: params.height,
-				rotation: params.rotation,
-				bounds,
-				dashed: Boolean(pathData),
-			}),
-		);
-	}
-
-	if (pathData) {
-		overlays.push(
-			getBoxMaskShapeOverlay({
-				centerX: params.centerX,
-				centerY: params.centerY,
-				width: params.width,
-				height: params.height,
-				rotation: params.rotation,
-				bounds,
-				pathData,
-			}),
-		);
-	}
-
-	return overlays;
-}
diff --git a/apps/web/src/lib/masks/index.ts b/apps/web/src/lib/masks/index.ts
deleted file mode 100644
index 43871b44..00000000
--- a/apps/web/src/lib/masks/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Mask, MaskDefaultContext, MaskType } from "@/lib/masks/types";

-import { masksRegistry } from "./registry";

-import { generateUUID } from "@/utils/id";

-

-export { masksRegistry } from "./registry";

-export { registerDefaultMasks } from "./definitions";

-

-export function buildDefaultMaskInstance({

-	maskType,

-	elementSize,

-}: {

-	maskType: MaskType;

-	elementSize?: { width: number; height: number };

-}): Mask {

-	const definition = masksRegistry.get(maskType);

-	const context: MaskDefaultContext = { elementSize };

-	return { ...definition.buildDefault(context), id: generateUUID() } as Mask;

-}

diff --git a/apps/web/src/lib/masks/param-update.ts b/apps/web/src/lib/masks/param-update.ts
deleted file mode 100644
index 4f8693eb..00000000
--- a/apps/web/src/lib/masks/param-update.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FEATHER_HANDLE_SCALE, MAX_FEATHER } from "@/lib/masks/feather";
-
-export function computeFeatherUpdate({
-	startFeather,
-	deltaX,
-	deltaY,
-	directionX,
-	directionY,
-}: {
-	startFeather: number;
-	deltaX: number;
-	deltaY: number;
-	directionX: number;
-	directionY: number;
-}): { feather: number } {
-	const projection = deltaX * directionX + deltaY * directionY;
-	return {
-		feather: Math.max(
-			0,
-			Math.min(
-				MAX_FEATHER,
-				Math.round(startFeather + projection / FEATHER_HANDLE_SCALE),
-			),
-		),
-	};
-}
diff --git a/apps/web/src/lib/masks/registry.ts b/apps/web/src/lib/masks/registry.ts
deleted file mode 100644
index ae8ddd20..00000000
--- a/apps/web/src/lib/masks/registry.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { MAX_FEATHER } from "@/lib/masks/feather";
-import type { ParamDefinition } from "@/lib/params";
-import type {
-	BaseMaskParams,
-	MaskDefaultContext,
-	MaskDefinition,
-	MaskInteractionResult,
-	MaskSnapArgs,
-	MaskSnapResult,
-	MaskType,
-} from "@/lib/masks/types";
-import type { HugeiconsIconProps } from "@hugeicons/react";
-import { DefinitionRegistry } from "@/lib/registry";
-
-export type MaskIconProps = {
-	icon: HugeiconsIconProps["icon"];
-	strokeWidth?: number;
-};
-
-const BASE_MASK_PARAM_DEFINITIONS: ParamDefinition<
-	keyof BaseMaskParams & string
->[] = [
-	{
-		key: "feather",
-		label: "Feather",
-		type: "number",
-		default: 0,
-		min: 0,
-		max: MAX_FEATHER,
-		step: 1,
-		unit: "percent",
-	},
-	{
-		key: "strokeWidth",
-		label: "Stroke width",
-		type: "number",
-		default: 0,
-		min: 0,
-		max: 100,
-		step: 1,
-	},
-	{
-		key: "strokeColor",
-		label: "Stroke color",
-		type: "color",
-		default: "#ffffff",
-	},
-];
-
-export interface RegisteredMaskDefinition {
-	type: MaskType;
-	name: string;
-	features: MaskDefinition<BaseMaskParams>["features"];
-	params: ParamDefinition<string>[];
-	renderer: MaskDefinition<BaseMaskParams>["renderer"];
-	interaction: {
-		getInteraction(args: {
-			params: BaseMaskParams;
-			bounds: Parameters<
-				MaskDefinition<BaseMaskParams>["interaction"]["getInteraction"]
-			>[0]["bounds"];
-			displayScale: number;
-			scaleX: number;
-			scaleY: number;
-		}): MaskInteractionResult;
-		snap?(args: MaskSnapArgs<BaseMaskParams>): MaskSnapResult<BaseMaskParams>;
-	};
-	isActive?: (params: BaseMaskParams) => boolean;
-	buildDefault(
-		context: MaskDefaultContext,
-	): ReturnType<MaskDefinition<BaseMaskParams>["buildDefault"]>;
-	computeParamUpdate(
-		args: Parameters<MaskDefinition<BaseMaskParams>["computeParamUpdate"]>[0],
-	): ReturnType<MaskDefinition<BaseMaskParams>["computeParamUpdate"]>;
-	icon: MaskIconProps;
-}
-
-export class MasksRegistry extends DefinitionRegistry<
-	MaskType,
-	RegisteredMaskDefinition
-> {
-	constructor() {
-		super("mask");
-	}
-
-	registerMask<TParams extends BaseMaskParams>({
-		definition,
-		icon,
-	}: {
-		definition: MaskDefinition<TParams>;
-		icon: MaskIconProps;
-	}): void {
-		const withBaseParams: RegisteredMaskDefinition = {
-			type: definition.type,
-			name: definition.name,
-			features: definition.features,
-			params: [...definition.params, ...BASE_MASK_PARAM_DEFINITIONS],
-			renderer: definition.renderer,
-			interaction: {
-				getInteraction(args) {
-					return definition.interaction.getInteraction(args as never);
-				},
-				snap: definition.interaction.snap
-					? (args) => definition.interaction.snap?.(args as never) as never
-					: undefined,
-			},
-			isActive: definition.isActive
-				? (params) => definition.isActive?.(params as TParams) ?? true
-				: undefined,
-			buildDefault(context) {
-				return definition.buildDefault(context);
-			},
-			computeParamUpdate(args) {
-				return definition.computeParamUpdate(args as never);
-			},
-			icon,
-		};
-		this.register(definition.type, withBaseParams);
-	}
-}
-
-export const masksRegistry = new MasksRegistry();
diff --git a/apps/web/src/lib/masks/snap.ts b/apps/web/src/lib/masks/snap.ts
deleted file mode 100644
index 7396dd82..00000000
--- a/apps/web/src/lib/masks/snap.ts
+++ /dev/null
@@ -1,336 +0,0 @@
-import type { ElementBounds } from "@/lib/preview/element-bounds";
-import { MIN_MASK_DIMENSION } from "@/lib/masks/dimensions";
-import {
-	snapPosition,
-	snapRotation,
-	snapScale,
-	snapScaleAxes,
-	type ScaleEdgePreference,
-	type SnapLine,
-} from "@/lib/preview/preview-snap";
-import type { RectangleMaskParams, SplitMaskParams } from "@/lib/masks/types";
-import {
-	isRectangleMaskParams,
-	getMaskSnapGeometry,
-	setMaskLocalCenter,
-	toGlobalMaskSnapLines,
-} from "./geometry";
-
-type SharedMaskParams = SplitMaskParams | RectangleMaskParams;
-
-type MaskSnapResult<TParams extends SharedMaskParams> = {
-	params: TParams;
-	activeLines: SnapLine[];
-};
-
-const CORNER_SIZE_HANDLES = new Set([
-	"top-left",
-	"top-right",
-	"bottom-left",
-	"bottom-right",
-]);
-
-function getClampedRatio({
-	next,
-	base,
-}: {
-	next: number;
-	base: number;
-}): number {
-	return (
-		Math.max(next, MIN_MASK_DIMENSION) / Math.max(base, MIN_MASK_DIMENSION)
-	);
-}
-
-function getPreferredEdges({
-	handleId,
-}: {
-	handleId: string;
-}): ScaleEdgePreference | undefined {
-	const preferredEdges = {
-		left:
-			handleId === "left" ||
-			handleId === "top-left" ||
-			handleId === "bottom-left",
-		right:
-			handleId === "right" ||
-			handleId === "top-right" ||
-			handleId === "bottom-right",
-		top:
-			handleId === "top" || handleId === "top-left" || handleId === "top-right",
-		bottom:
-			handleId === "bottom" ||
-			handleId === "bottom-left" ||
-			handleId === "bottom-right",
-	} satisfies ScaleEdgePreference;
-
-	return Object.values(preferredEdges).some(Boolean)
-		? preferredEdges
-		: undefined;
-}
-
-function snapMaskPosition({
-	proposedParams,
-	bounds,
-	canvasSize,
-	snapThreshold,
-}: {
-	proposedParams: SharedMaskParams;
-	bounds: ElementBounds;
-	canvasSize: { width: number; height: number };
-	snapThreshold: { x: number; y: number };
-}): MaskSnapResult<SharedMaskParams> {
-	const geometry = getMaskSnapGeometry({
-		params: proposedParams,
-		bounds,
-	});
-	if (!geometry) {
-		return { params: proposedParams, activeLines: [] };
-	}
-
-	const { snappedPosition, activeLines } = snapPosition({
-		proposedPosition: geometry.position,
-		canvasSize: bounds,
-		elementSize: geometry.size,
-		rotation: geometry.rotation,
-		snapThreshold,
-	});
-
-	return {
-		params: {
-			...proposedParams,
-			...setMaskLocalCenter({
-				center: snappedPosition,
-				bounds,
-			}),
-		},
-		activeLines: toGlobalMaskSnapLines({
-			lines: activeLines,
-			bounds,
-			canvasSize,
-		}),
-	};
-}
-
-function snapMaskRotation({
-	proposedParams,
-}: {
-	proposedParams: SharedMaskParams;
-}): MaskSnapResult<SharedMaskParams> {
-	if (typeof proposedParams.rotation !== "number") {
-		return { params: proposedParams, activeLines: [] };
-	}
-
-	const { snappedRotation } = snapRotation({
-		proposedRotation: proposedParams.rotation,
-	});
-
-	return {
-		params: {
-			...proposedParams,
-			rotation: snappedRotation,
-		},
-		activeLines: [],
-	};
-}
-
-function snapBoxMaskSize({
-	handleId,
-	startParams,
-	proposedParams,
-	bounds,
-	canvasSize,
-	snapThreshold,
-}: {
-	handleId: string;
-	startParams: SharedMaskParams;
-	proposedParams: SharedMaskParams;
-	bounds: ElementBounds;
-	canvasSize: { width: number; height: number };
-	snapThreshold: { x: number; y: number };
-}): MaskSnapResult<SharedMaskParams> {
-	if (
-		!isRectangleMaskParams(startParams) ||
-		!isRectangleMaskParams(proposedParams)
-	) {
-		return { params: proposedParams, activeLines: [] };
-	}
-
-	const geometry = getMaskSnapGeometry({
-		params: proposedParams,
-		bounds,
-	});
-	if (!geometry) {
-		return { params: proposedParams, activeLines: [] };
-	}
-
-	const localCanvasSize = bounds;
-	const baseWidth =
-		Math.max(startParams.width, MIN_MASK_DIMENSION) * bounds.width;
-	const baseHeight =
-		Math.max(startParams.height, MIN_MASK_DIMENSION) * bounds.height;
-	const preferredEdges = getPreferredEdges({ handleId });
-
-	if (handleId === "right" || handleId === "left") {
-		const proposedScaleX = getClampedRatio({
-			next: proposedParams.width,
-			base: startParams.width,
-		});
-		const { x } = snapScaleAxes({
-			proposedScaleX,
-			proposedScaleY: 1,
-			position: geometry.position,
-			baseWidth,
-			baseHeight,
-			rotation: proposedParams.rotation,
-			canvasSize: localCanvasSize,
-			snapThreshold,
-			preferredEdges,
-		});
-
-		return {
-			params: {
-				...proposedParams,
-				width: Math.max(MIN_MASK_DIMENSION, startParams.width * x.snappedScale),
-			},
-			activeLines: toGlobalMaskSnapLines({
-				lines: x.activeLines,
-				bounds,
-				canvasSize,
-			}),
-		};
-	}
-
-	if (handleId === "top" || handleId === "bottom") {
-		const proposedScaleY = getClampedRatio({
-			next: proposedParams.height,
-			base: startParams.height,
-		});
-		const { y } = snapScaleAxes({
-			proposedScaleX: 1,
-			proposedScaleY,
-			position: geometry.position,
-			baseWidth,
-			baseHeight,
-			rotation: proposedParams.rotation,
-			canvasSize: localCanvasSize,
-			snapThreshold,
-			preferredEdges,
-		});
-
-		return {
-			params: {
-				...proposedParams,
-				height: Math.max(
-					MIN_MASK_DIMENSION,
-					startParams.height * y.snappedScale,
-				),
-			},
-			activeLines: toGlobalMaskSnapLines({
-				lines: y.activeLines,
-				bounds,
-				canvasSize,
-			}),
-		};
-	}
-
-	if (handleId === "scale") {
-		const baseScale = Math.max(startParams.scale, MIN_MASK_DIMENSION);
-		const proposedScale = getClampedRatio({
-			next: proposedParams.scale,
-			base: startParams.scale,
-		});
-		const { snappedScale, activeLines } = snapScale({
-			proposedScale,
-			position: geometry.position,
-			baseWidth: baseWidth * baseScale,
-			baseHeight: baseHeight * baseScale,
-			rotation: proposedParams.rotation,
-			canvasSize: localCanvasSize,
-			snapThreshold,
-			preferredEdges,
-		});
-
-		return {
-			params: {
-				...proposedParams,
-				scale: Math.max(MIN_MASK_DIMENSION, startParams.scale * snappedScale),
-			},
-			activeLines: toGlobalMaskSnapLines({
-				lines: activeLines,
-				bounds,
-				canvasSize,
-			}),
-		};
-	}
-
-	if (CORNER_SIZE_HANDLES.has(handleId)) {
-		const proposedScale = getClampedRatio({
-			next: proposedParams.width,
-			base: startParams.width,
-		});
-		const { snappedScale, activeLines } = snapScale({
-			proposedScale,
-			position: geometry.position,
-			baseWidth,
-			baseHeight,
-			rotation: proposedParams.rotation,
-			canvasSize: localCanvasSize,
-			snapThreshold,
-			preferredEdges,
-		});
-
-		return {
-			params: {
-				...proposedParams,
-				width: Math.max(MIN_MASK_DIMENSION, startParams.width * snappedScale),
-				height: Math.max(MIN_MASK_DIMENSION, startParams.height * snappedScale),
-			},
-			activeLines: toGlobalMaskSnapLines({
-				lines: activeLines,
-				bounds,
-				canvasSize,
-			}),
-		};
-	}
-
-	return { params: proposedParams, activeLines: [] };
-}
-
-export function snapMaskInteraction<TParams extends SharedMaskParams>({
-	handleId,
-	startParams,
-	proposedParams,
-	bounds,
-	canvasSize,
-	snapThreshold,
-}: {
-	handleId: string;
-	startParams: TParams;
-	proposedParams: TParams;
-	bounds: ElementBounds;
-	canvasSize: { width: number; height: number };
-	snapThreshold: { x: number; y: number };
-}): MaskSnapResult<TParams> {
-	if (handleId === "position") {
-		return snapMaskPosition({
-			proposedParams,
-			bounds,
-			canvasSize,
-			snapThreshold,
-		}) as MaskSnapResult<TParams>;
-	}
-
-	if (handleId === "rotation") {
-		return snapMaskRotation({ proposedParams }) as MaskSnapResult<TParams>;
-	}
-
-	return snapBoxMaskSize({
-		handleId,
-		startParams,
-		proposedParams,
-		bounds,
-		canvasSize,
-		snapThreshold,
-	}) as MaskSnapResult<TParams>;
-}
diff --git a/apps/web/src/lib/masks/types.ts b/apps/web/src/lib/masks/types.ts
deleted file mode 100644
index 5a0d126d..00000000
--- a/apps/web/src/lib/masks/types.ts
+++ /dev/null
@@ -1,298 +0,0 @@
-import type { ElementBounds } from "@/lib/preview/element-bounds";
-import type { SnapLine } from "@/lib/preview/preview-snap";
-import type { ParamDefinition } from "@/lib/params";
-import type { CustomMaskPathPoint } from "@/lib/masks/custom-path";
-import type {
-	TextDecoration,
-	TextFontStyle,
-	TextFontWeight,
-} from "@/lib/text/primitives";
-
-export type MaskType =
-	| "split"
-	| "cinematic-bars"
-	| "rectangle"
-	| "ellipse"
-	| "heart"
-	| "diamond"
-	| "star"
-	| "text"
-	| "custom";
-
-export interface BaseMaskParams {
-	feather: number;
-	inverted: boolean;
-	strokeColor: string;
-	strokeWidth: number;
-	strokeAlign: "inside" | "center" | "outside";
-}
-
-export interface SplitMaskParams extends BaseMaskParams {
-	centerX: number;
-	centerY: number;
-	rotation: number;
-}
-
-export interface RectangleMaskParams extends BaseMaskParams {
-	centerX: number;
-	centerY: number;
-	width: number;
-	height: number;
-	rotation: number;
-	scale: number;
-}
-
-export interface TextMaskParams extends BaseMaskParams {
-	content: string;
-	fontSize: number;
-	fontFamily: string;
-	fontWeight: TextFontWeight;
-	fontStyle: TextFontStyle;
-	textDecoration: TextDecoration;
-	letterSpacing: number;
-	lineHeight: number;
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-}
-
-export interface CustomMaskParams extends BaseMaskParams {
-	path: CustomMaskPathPoint[];
-	closed: boolean;
-	centerX: number;
-	centerY: number;
-	rotation: number;
-	scale: number;
-}
-
-export interface SplitMask {
-	id: string;
-	type: "split";
-	params: SplitMaskParams;
-}
-
-export interface CinematicBarsMask {
-	id: string;
-	type: "cinematic-bars";
-	params: RectangleMaskParams;
-}
-
-export interface RectangleMask {
-	id: string;
-	type: "rectangle";
-	params: RectangleMaskParams;
-}
-
-export interface EllipseMask {
-	id: string;
-	type: "ellipse";
-	params: RectangleMaskParams;
-}
-
-export interface HeartMask {
-	id: string;
-	type: "heart";
-	params: RectangleMaskParams;
-}
-
-export interface DiamondMask {
-	id: string;
-	type: "diamond";
-	params: RectangleMaskParams;
-}
-
-export interface StarMask {
-	id: string;
-	type: "star";
-	params: RectangleMaskParams;
-}
-
-export interface TextMask {
-	id: string;
-	type: "text";
-	params: TextMaskParams;
-}
-
-export interface CustomMask {
-	id: string;
-	type: "custom";
-	params: CustomMaskParams;
-}
-
-export type Mask =
-	| SplitMask
-	| CinematicBarsMask
-	| RectangleMask
-	| EllipseMask
-	| HeartMask
-	| DiamondMask
-	| StarMask
-	| TextMask
-	| CustomMask;
-
-export interface MaskRenderer {
-	buildPath?: (params: {
-		resolvedParams: unknown;
-		width: number;
-		height: number;
-	}) => Path2D;
-	buildStrokePath?: (params: {
-		resolvedParams: unknown;
-		width: number;
-		height: number;
-	}) => Path2D;
-	/** Renders the feathered mask directly onto ctx, bypassing JFA. */
-	renderMask?: (params: {
-		resolvedParams: unknown;
-		ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-		width: number;
-		height: number;
-		feather: number;
-	}) => void;
-	renderMaskHandlesFeather?: boolean;
-	renderStroke?: (params: {
-		resolvedParams: unknown;
-		ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-		width: number;
-		height: number;
-	}) => void;
-}
-
-export interface MaskFeatures {
-	hasPosition: boolean;
-	hasRotation: boolean;
-	sizeMode: "none" | "uniform" | "width-height" | "height-only" | "width-only";
-}
-
-export type MaskHandleIcon = "rotate" | "feather";
-
-export type MaskHandleKind = "corner" | "edge" | "icon" | "point" | "tangent";
-
-export interface MaskHandlePosition {
-	id: string;
-	x: number;
-	y: number;
-	cursor: string;
-	kind: MaskHandleKind;
-	isSelected?: boolean;
-	edgeAxis?: "horizontal" | "vertical";
-	rotation?: number;
-	icon?: MaskHandleIcon;
-}
-
-export interface MaskLineOverlay {
-	id: string;
-	type: "line";
-	start: { x: number; y: number };
-	end: { x: number; y: number };
-	cursor?: string;
-	handleId?: string;
-}
-
-export interface MaskRectOverlay {
-	id: string;
-	type: "rect";
-	center: { x: number; y: number };
-	width: number;
-	height: number;
-	rotation: number;
-	dashed?: boolean;
-	cursor?: string;
-	handleId?: string;
-}
-
-export interface MaskShapeOverlay {
-	id: string;
-	type: "shape";
-	center: { x: number; y: number };
-	width: number;
-	height: number;
-	rotation: number;
-	pathData: string;
-	cursor?: string;
-	handleId?: string;
-}
-
-export interface MaskCanvasPathOverlay {
-	id: string;
-	type: "canvas-path";
-	pathData: string;
-	coordinateSpace?: "canvas" | "overlay";
-	cursor?: string;
-	handleId?: string;
-	strokeWidth?: number;
-	strokeOpacity?: number;
-}
-
-export type MaskOverlay =
-	| MaskLineOverlay
-	| MaskRectOverlay
-	| MaskShapeOverlay
-	| MaskCanvasPathOverlay;
-
-export interface MaskDefaultContext {
-	elementSize?: { width: number; height: number };
-}
-
-export interface MaskParamUpdateArgs<
-	TParams extends BaseMaskParams = BaseMaskParams,
-> {
-	handleId: string;
-	startParams: TParams;
-	deltaX: number;
-	deltaY: number;
-	startCanvasX: number;
-	startCanvasY: number;
-	bounds: ElementBounds;
-	canvasSize: { width: number; height: number };
-}
-
-export interface MaskSnapArgs<TParams extends BaseMaskParams = BaseMaskParams> {
-	handleId: string;
-	startParams: TParams;
-	proposedParams: TParams;
-	bounds: ElementBounds;
-	canvasSize: { width: number; height: number };
-	snapThreshold: { x: number; y: number };
-}
-
-export interface MaskSnapResult<
-	TParams extends BaseMaskParams = BaseMaskParams,
-> {
-	params: TParams;
-	activeLines: SnapLine[];
-}
-
-export interface MaskInteractionResult {
-	handles: MaskHandlePosition[];
-	overlays: MaskOverlay[];
-}
-
-export interface MaskInteractionDefinition<
-	TParams extends BaseMaskParams = BaseMaskParams,
-> {
-	getInteraction(args: {
-		params: TParams;
-		bounds: ElementBounds;
-		displayScale: number;
-		scaleX: number;
-		scaleY: number;
-	}): MaskInteractionResult;
-	snap?(args: MaskSnapArgs<TParams>): MaskSnapResult<TParams>;
-}
-
-export interface MaskDefinition<
-	TParams extends BaseMaskParams = BaseMaskParams,
-> {
-	type: MaskType;
-	name: string;
-	features: MaskFeatures;
-	params: ParamDefinition<keyof TParams & string>[];
-	renderer: MaskRenderer;
-	interaction: MaskInteractionDefinition<TParams>;
-	/** When defined and returning false, the mask is not applied and the element renders fully visible. */
-	isActive?: (params: TParams) => boolean;
-	buildDefault(context: MaskDefaultContext): Omit<Mask, "id">;
-	computeParamUpdate(args: MaskParamUpdateArgs<TParams>): Partial<TParams>;
-}
diff --git a/apps/web/src/lib/masks/utils.ts b/apps/web/src/lib/masks/utils.ts
deleted file mode 100644
index b1ac2c39..00000000
--- a/apps/web/src/lib/masks/utils.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-const LINE_PARALLEL_EPSILON = 1e-10;

-

-export function lineEdgeIntersection({

-	lineX,

-	lineY,

-	normalX,

-	normalY,

-	x1,

-	y1,

-	x2,

-	y2,

-}: {

-	lineX: number;

-	lineY: number;

-	normalX: number;

-	normalY: number;

-	x1: number;

-	y1: number;

-	x2: number;

-	y2: number;

-}): { x: number; y: number } | null {

-	const distance1 = halfPlaneSign({

-		lineX,

-		lineY,

-		normalX,

-		normalY,

-		x: x1,

-		y: y1,

-	});

-	const distance2 = halfPlaneSign({

-		lineX,

-		lineY,

-		normalX,

-		normalY,

-		x: x2,

-		y: y2,

-	});

-	const denom = distance1 - distance2;

-	if (Math.abs(denom) < LINE_PARALLEL_EPSILON) return null;

-	const t = distance1 / denom;

-	if (t < 0 || t > 1) return null;

-	return {

-		x: x1 + (x2 - x1) * t,

-		y: y1 + (y2 - y1) * t,

-	};

-}

-

-export function halfPlaneSign({

-	lineX,

-	lineY,

-	normalX,

-	normalY,

-	x,

-	y,

-}: {

-	lineX: number;

-	lineY: number;

-	normalX: number;

-	normalY: number;

-	x: number;

-	y: number;

-}): number {

-	return (x - lineX) * normalX + (y - lineY) * normalY;

-}