5 files changed, 822 insertions, 822 deletions
diff --git a/apps/web/src/lib/masks/definitions/box-like.ts b/apps/web/src/lib/masks/definitions/box-like.ts
index 0436151e..98aefba7 100644
--- a/apps/web/src/lib/masks/definitions/box-like.ts
+++ b/apps/web/src/lib/masks/definitions/box-like.ts
@@ -1,270 +1,270 @@
-import {
-	DEFAULT_SHAPE_MASK_SHORT_SIDE_RATIO,
-	MIN_MASK_DIMENSION,
-} from "@/constants/mask-constants";
-import { computeFeatherUpdate } from "../param-update";
-import type {
-	BaseMaskParams,
-	MaskDefaultContext,
-	MaskParamUpdateArgs,
-	RectangleMaskParams,
-} from "@/lib/masks/types";
-import type {
-	NumberParamDefinition,
-	ParamDefinition,
-	ParamValues,
-} from "@/lib/params";
-
-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 computeBoxMaskParamUpdate({
-	handleId,
-	startParams,
-	deltaX,
-	deltaY,
-	bounds,
-}: MaskParamUpdateArgs<RectangleMaskParams>): ParamValues {
-	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,
-	};
-}
+import {
+	DEFAULT_SHAPE_MASK_SHORT_SIDE_RATIO,
+	MIN_MASK_DIMENSION,
+} from "@/constants/mask-constants";
+import { computeFeatherUpdate } from "../param-update";
+import type {
+	BaseMaskParams,
+	MaskDefaultContext,
+	MaskParamUpdateArgs,
+	RectangleMaskParams,
+} from "@/lib/masks/types";
+import type {
+	NumberParamDefinition,
+	ParamDefinition,
+	ParamValues,
+} from "@/lib/params";
+
+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 computeBoxMaskParamUpdate({
+	handleId,
+	startParams,
+	deltaX,
+	deltaY,
+	bounds,
+}: MaskParamUpdateArgs<RectangleMaskParams>): ParamValues {
+	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/ellipse.ts b/apps/web/src/lib/masks/definitions/ellipse.ts
index 45d0a7c0..1fd0301c 100644
--- a/apps/web/src/lib/masks/definitions/ellipse.ts
+++ b/apps/web/src/lib/masks/definitions/ellipse.ts
@@ -1,72 +1,72 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	computeBoxMaskParamUpdate,
-	getBoxLikeGeometry,
-	getDefaultSquareMaskParams,
-	getStrokeOffset,
-} from "./box-like";
-
-export const ellipseMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "ellipse",
-	name: "Ellipse",
-	overlayShape: "box",
-	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`;
-	},
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	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;
-		},
-	},
-};
+import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
+import {
+	BOX_LIKE_MASK_PARAMS,
+	computeBoxMaskParamUpdate,
+	getBoxLikeGeometry,
+	getDefaultSquareMaskParams,
+	getStrokeOffset,
+} from "./box-like";
+
+export const ellipseMaskDefinition: MaskDefinition<RectangleMaskParams> = {
+	type: "ellipse",
+	name: "Ellipse",
+	overlayShape: "box",
+	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`;
+	},
+	features: {
+		hasPosition: true,
+		hasRotation: true,
+		sizeMode: "width-height",
+	},
+	params: BOX_LIKE_MASK_PARAMS,
+	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/index.ts b/apps/web/src/lib/masks/definitions/index.ts
index c2affe30..49404ce1 100644
--- a/apps/web/src/lib/masks/definitions/index.ts
+++ b/apps/web/src/lib/masks/definitions/index.ts
@@ -1,39 +1,39 @@
-import type { BaseMaskParams, MaskDefinition } from "@/lib/masks/types";
-import { masksRegistry, type MaskIconProps } from "../registry";
-import { ellipseMaskDefinition } from "./ellipse";
-import { rectangleMaskDefinition } from "./rectangle";
-import { splitMaskDefinition } from "./split";
-import {
-	PanelRightDashedIcon,
-	SquareIcon,
-	CircleIcon,
-} 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: rectangleMaskDefinition,
-		icon: { icon: SquareIcon },
-	});
-	registerDefaultMask({
-		definition: ellipseMaskDefinition,
-		icon: { icon: CircleIcon },
-	});
-}
+import type { BaseMaskParams, MaskDefinition } from "@/lib/masks/types";
+import { masksRegistry, type MaskIconProps } from "../registry";
+import { ellipseMaskDefinition } from "./ellipse";
+import { rectangleMaskDefinition } from "./rectangle";
+import { splitMaskDefinition } from "./split";
+import {
+	PanelRightDashedIcon,
+	SquareIcon,
+	CircleIcon,
+} 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: rectangleMaskDefinition,
+		icon: { icon: SquareIcon },
+	});
+	registerDefaultMask({
+		definition: ellipseMaskDefinition,
+		icon: { icon: CircleIcon },
+	});
+}
diff --git a/apps/web/src/lib/masks/definitions/rectangle.ts b/apps/web/src/lib/masks/definitions/rectangle.ts
index 5b7f84a9..08f969ea 100644
--- a/apps/web/src/lib/masks/definitions/rectangle.ts
+++ b/apps/web/src/lib/masks/definitions/rectangle.ts
@@ -1,94 +1,94 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	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",
-	overlayShape: "box",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	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,
-			});
-		},
-	},
-};
+import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
+import {
+	BOX_LIKE_MASK_PARAMS,
+	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",
+	overlayShape: "box",
+	features: {
+		hasPosition: true,
+		hasRotation: true,
+		sizeMode: "width-height",
+	},
+	params: BOX_LIKE_MASK_PARAMS,
+	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
index 43f02db1..91cd3001 100644
--- a/apps/web/src/lib/masks/definitions/split.ts
+++ b/apps/web/src/lib/masks/definitions/split.ts
@@ -1,347 +1,347 @@
-import { computeFeatherUpdate } from "../param-update";
-import type { ParamValues } from "@/lib/params";
-import type {
-	MaskDefinition,
-	MaskParamUpdateArgs,
-	SplitMaskParams,
-} from "@/lib/masks/types";
-import { halfPlaneSign, lineEdgeIntersection } from "../utils";
-
-// 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>): ParamValues {
-	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",
-	overlayShape: "line",
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "none",
-	},
-	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: {
-		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;
-		},
-	},
-};
+import { computeFeatherUpdate } from "../param-update";
+import type { ParamValues } from "@/lib/params";
+import type {
+	MaskDefinition,
+	MaskParamUpdateArgs,
+	SplitMaskParams,
+} from "@/lib/masks/types";
+import { halfPlaneSign, lineEdgeIntersection } from "../utils";
+
+// 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>): ParamValues {
+	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",
+	overlayShape: "line",
+	features: {
+		hasPosition: true,
+		hasRotation: true,
+		sizeMode: "none",
+	},
+	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: {
+		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;
+		},
+	},
+};