From fba861a5abc400979f5696235b12abd2a5307dbc Mon Sep 17 00:00:00 2001
From: 0xmyst3ry <130799986+0xmyst3ry@users.noreply.github.com>
Date: Sun, 25 Oct 2026 10:40:59 +0530
Subject: [PATCH 1/2] feat(editor): add pixel X / Y / Width / Height fields to
 the crop

The Edit clip dialog could only crop by dragging handles. Add four number
fields (X, Y, Width, Height) in source pixels under the ratio row.

They show the crop as whole pixels of the source frame, follow the handles
and the arrow keys, and write back to the same crop draft when typed into,
rounded to a pixel and clamped to the frame. The clamp and the percent/pixel
conversion are pure helpers in cropDraft.ts with unit tests. A typed width or
height re-detects the ratio preset, so a preset no longer claims a shape the
crop does not have.

Labels are added to all 15 locales.
---
 .../ai-edition/EditClipModal.test.tsx         |  95 +++++++++++++++
 src/components/ai-edition/Modals.tsx          | 108 +++++++++++++++++-
 src/components/ai-edition/cropDraft.test.ts   |  94 ++++++++++++++-
 src/components/ai-edition/cropDraft.ts        |  79 +++++++++++++
 src/i18n/locales/ar/settings.json             |   7 +-
 src/i18n/locales/cs/settings.json             |   7 +-
 src/i18n/locales/de/settings.json             |   7 +-
 src/i18n/locales/en/settings.json             |   7 +-
 src/i18n/locales/es/settings.json             |   7 +-
 src/i18n/locales/fr/settings.json             |   7 +-
 src/i18n/locales/it/settings.json             |   7 +-
 src/i18n/locales/ja-JP/settings.json          |   7 +-
 src/i18n/locales/ko-KR/settings.json          |   7 +-
 src/i18n/locales/pt-BR/settings.json          |   7 +-
 src/i18n/locales/ru/settings.json             |   7 +-
 src/i18n/locales/tr/settings.json             |   7 +-
 src/i18n/locales/vi/settings.json             |   7 +-
 src/i18n/locales/zh-CN/settings.json          |   7 +-
 src/i18n/locales/zh-TW/settings.json          |   7 +-
 19 files changed, 462 insertions(+), 19 deletions(-)

diff --git a/src/components/ai-edition/EditClipModal.test.tsx b/src/components/ai-edition/EditClipModal.test.tsx
index 9d5c5ad075..e8d93e5486 100644
--- a/src/components/ai-edition/EditClipModal.test.tsx
+++ b/src/components/ai-edition/EditClipModal.test.tsx
@@ -357,3 +357,98 @@ describe("EditClipModal playhead for framing the crop", () => {
 		expect(onClose).toHaveBeenCalledTimes(1);
 	});
 });
+
+describe("EditClipModal crop in pixels", () => {
+	beforeAll(() => {
+		// jsdom has no media pipeline: report a loaded 1920x1080 source.
+		Object.defineProperty(HTMLMediaElement.prototype, "readyState", {
+			configurable: true,
+			get: () => 1,
+		});
+		Object.defineProperty(HTMLMediaElement.prototype, "currentTime", {
+			configurable: true,
+			get: () => 0,
+			set: vi.fn(),
+		});
+		HTMLMediaElement.prototype.pause = vi.fn();
+		Object.defineProperty(HTMLVideoElement.prototype, "videoWidth", {
+			configurable: true,
+			get: () => 1920,
+		});
+		Object.defineProperty(HTMLVideoElement.prototype, "videoHeight", {
+			configurable: true,
+			get: () => 1080,
+		});
+	});
+
+	function renderWithVideo(videoSources: Array<{ id: string; src: string; label: string }>) {
+		const onApply = vi.fn();
+		renderWithI18n(
+			<EditClipModal
+				open
+				onClose={vi.fn()}
+				clip={CLIP}
+				assetMeta={ASSET}
+				videoSources={videoSources}
+				onApply={onApply}
+			/>,
+		);
+		return { onApply };
+	}
+	const withVideo = [{ id: "asset_1", src: "file:///rec.mp4", label: "rec" }];
+	const field = (name: string) => screen.getByLabelText(name) as HTMLInputElement;
+
+	it("shows the whole frame in pixels, labelled for each side", () => {
+		renderWithVideo(withVideo);
+		expect(field("X (px)").value).toBe("0");
+		expect(field("Y (px)").value).toBe("0");
+		expect(field("Width (px)").value).toBe("1920");
+		expect(field("Height (px)").value).toBe("1080");
+	});
+
+	it("stays off until the source size is known", () => {
+		renderWithVideo([]);
+		expect(field("Width (px)")).toBeDisabled();
+		expect(field("X (px)").value).toBe("");
+	});
+
+	it("applies typed pixels as a crop, clamped to the frame", () => {
+		const { onApply } = renderWithVideo(withVideo);
+		fireEvent.change(field("Width (px)"), { target: { value: "960" } });
+		fireEvent.change(field("X (px)"), { target: { value: "5000" } });
+		expect(field("X (px)").value).toBe("5000"); // what is being typed stays until blur
+		fireEvent.blur(field("X (px)"));
+		expect(field("X (px)").value).toBe("960");
+
+		fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+		expect(onApply).toHaveBeenCalledWith(
+			20,
+			105,
+			expect.objectContaining({ x: 0.5, y: 0, width: 0.5, height: 1 }),
+		);
+	});
+
+	it("lets a field be cleared and retyped", () => {
+		renderWithVideo(withVideo);
+		fireEvent.change(field("Height (px)"), { target: { value: "" } });
+		expect(field("Height (px)").value).toBe("");
+		fireEvent.change(field("Height (px)"), { target: { value: "540" } });
+		expect(field("Height (px)").value).toBe("540");
+	});
+
+	it("follows the crop when it is moved with the keyboard", () => {
+		renderWithVideo(withVideo);
+		fireEvent.change(field("Width (px)"), { target: { value: "960" } });
+		fireEvent.keyDown(screen.getByRole("slider", { name: "Crop" }), { key: "ArrowRight" });
+		expect(field("X (px)").value).toBe("19"); // 1% of 1920, rounded
+		expect(field("Width (px)").value).toBe("960");
+	});
+
+	it("drops a ratio preset when a typed size no longer has that shape", () => {
+		renderWithVideo(withVideo);
+		fireEvent.click(screen.getByRole("button", { name: "1:1" }));
+		expect(screen.getByRole("button", { name: "1:1" })).toHaveAttribute("aria-pressed", "true");
+		fireEvent.change(field("Width (px)"), { target: { value: "1000" } });
+		expect(screen.getByRole("button", { name: "1:1" })).toHaveAttribute("aria-pressed", "false");
+	});
+});
diff --git a/src/components/ai-edition/Modals.tsx b/src/components/ai-edition/Modals.tsx
index abe259c12f..413f6a2144 100644
--- a/src/components/ai-edition/Modals.tsx
+++ b/src/components/ai-edition/Modals.tsx
@@ -4,6 +4,7 @@ import {
 	type ReactNode,
 	type PointerEvent as ReactPointerEvent,
 	useEffect,
+	useId,
 	useRef,
 	useState,
 } from "react";
@@ -11,7 +12,19 @@ import type { CropRegion } from "@/components/video-editor/types";
 import { useScopedT } from "@/contexts/I18nContext";
 import type { AxcutClip } from "@/lib/ai-edition/schema";
 import { formatSeconds } from "@/lib/ai-edition/timeline/format";
-import { cropDraftFromRegion, cropDraftToPct, previewBoxStyle } from "./cropDraft";
+import {
+	type CropField,
+	type CropPct,
+	cropDraftFromRegion,
+	cropDraftToPct,
+	cropFieldRangePx,
+	cropPctToPx,
+	type FrameSize,
+	isUsableFrameSize,
+	MIN_CROP_PCT,
+	previewBoxStyle,
+	setCropFieldPx,
+} from "./cropDraft";
 import styles from "./NewEditorShell.module.css";
 import { ChoiceRow } from "./RightPanes";
 import type { VideoSource } from "./VirtualPreview";
@@ -614,11 +627,10 @@ function centeredFitPct(fr: number): { x: number; y: number; w: number; h: numbe
 	return { x: (100 - w) / 2, y: 0, w, h: 100 };
 }
 
-const MIN_PCT = 4;
+const MIN_PCT = MIN_CROP_PCT;
 const clampPct = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
 
 type ResizeEdges = { left?: boolean; right?: boolean; top?: boolean; bottom?: boolean };
-type CropPct = { x: number; y: number; w: number; h: number };
 
 /** `start` with its `edges` moved by (dxPct, dyPct), kept inside the frame. With a locked
  *  fraction-space ratio `fr`, the opposite dimension follows to keep width/height locked. */
@@ -731,6 +743,8 @@ export function EditClipModal({
 	// fraction-of-frame width/height. 16/9 is just a placeholder until the
 	// crop <video>'s real metadata loads (see the effect below).
 	const [videoAspectRatio, setVideoAspectRatio] = useState(16 / 9);
+	// The same frame in pixels, for the X / Y / Width / Height fields. Null until the metadata loads.
+	const [videoSize, setVideoSize] = useState<FrameSize | null>(null);
 	const cropFrameRef = useRef<HTMLDivElement | null>(null);
 	const cropVideoRef = useRef<HTMLVideoElement | null>(null);
 	// The frame the crop is framed on, on the source clock like the trim. Local to this
@@ -791,12 +805,14 @@ export function EditClipModal({
 		// below refills them (immediately, when this clip's metadata is already
 		// loaded).
 		setVideoAspectRatio(16 / 9);
+		setVideoSize(null);
 		const v = cropVideoRef.current;
 		if (!v) return;
 		const onMetadata = () => {
 			v.pause();
 			if (v.videoWidth > 0 && v.videoHeight > 0) {
 				setVideoAspectRatio(v.videoWidth / v.videoHeight);
+				setVideoSize({ width: v.videoWidth, height: v.videoHeight });
 			}
 		};
 		if (v.readyState >= 1) onMetadata();
@@ -940,6 +956,24 @@ export function EditClipModal({
 		setCropHPct(next.h);
 	};
 
+	// A value typed into one of the pixel fields. Size edits are free-form, so a ratio preset
+	// is re-detected from the new shape (and drops to Free when it no longer matches).
+	const handleCropFieldChange = (field: CropField, px: number) => {
+		if (!isUsableFrameSize(videoSize)) return;
+		const current = { x: cropXPct, y: cropYPct, w: cropWPct, h: cropHPct };
+		const next = setCropFieldPx(current, field, px, videoSize);
+		setCropTouched(true);
+		setCrop(next);
+		if (field === "w" || field === "h") {
+			setCropRatio(
+				detectRatio(
+					{ x: next.x / 100, y: next.y / 100, width: next.w / 100, height: next.h / 100 },
+					videoAspectRatio,
+				),
+			);
+		}
+	};
+
 	// The keyboard's way to the same two gestures: the arrows move the crop, Shift + the
 	// arrows resize it from its bottom-right corner, a locked ratio held as the handles hold it.
 	const onCropKeyDown = (e: ReactKeyboardEvent) => {
@@ -1237,11 +1271,79 @@ export function EditClipModal({
 						/>
 					</div>
 				</div>
+				<div
+					role="group"
+					aria-label={ts("crop.position")}
+					style={{ display: "flex", gap: 10, marginTop: 10 }}
+				>
+					{(
+						[
+							["x", ts("crop.x")],
+							["y", ts("crop.y")],
+							["w", ts("crop.width")],
+							["h", ts("crop.height")],
+						] as const
+					).map(([field, label]) => {
+						const crop = { x: cropXPct, y: cropYPct, w: cropWPct, h: cropHPct };
+						const usable = isUsableFrameSize(videoSize);
+						return (
+							<CropPxField
+								key={field}
+								label={label}
+								value={usable ? cropPctToPx(crop, videoSize)[field] : null}
+								range={usable ? cropFieldRangePx(crop, field, videoSize) : null}
+								onChange={(px) => handleCropFieldChange(field, px)}
+							/>
+						);
+					})}
+				</div>
 			</div>
 		</ModalShell>
 	);
 }
 
+/** One of the crop's pixel fields. It keeps what is being typed until it loses focus, so a
+ *  field can be cleared and retyped; every valid number is applied to the crop as it is typed,
+ *  and the field shows the clamped value again on blur. */
+function CropPxField({
+	label,
+	value,
+	range,
+	onChange,
+}: {
+	label: string;
+	value: number | null;
+	range: { min: number; max: number } | null;
+	onChange: (px: number) => void;
+}) {
+	const id = useId();
+	const [draft, setDraft] = useState<string | null>(null);
+	return (
+		<div style={{ display: "flex", flexDirection: "column", gap: 4, flex: 1, minWidth: 0 }}>
+			<label htmlFor={id} className={styles.fieldLabel}>
+				{label}
+			</label>
+			<input
+				id={id}
+				className={styles.control}
+				type="number"
+				inputMode="numeric"
+				step={1}
+				min={range?.min}
+				max={range?.max}
+				disabled={value === null}
+				value={value === null ? "" : (draft ?? String(value))}
+				onChange={(e) => {
+					setDraft(e.target.value);
+					if (e.target.value.trim() !== "") onChange(Number(e.target.value));
+				}}
+				onBlur={() => setDraft(null)}
+				style={{ width: "100%", fontVariantNumeric: "tabular-nums" }}
+			/>
+		</div>
+	);
+}
+
 function RangeStat({ label, value, testId }: { label: string; value: string; testId?: string }) {
 	return (
 		<div data-testid={testId} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
diff --git a/src/components/ai-edition/cropDraft.test.ts b/src/components/ai-edition/cropDraft.test.ts
index 740b879ce2..8fc3154f50 100644
--- a/src/components/ai-edition/cropDraft.test.ts
+++ b/src/components/ai-edition/cropDraft.test.ts
@@ -1,5 +1,15 @@
 import { describe, expect, it } from "vitest";
-import { cropDraftFromRegion, PREVIEW_MAX_HEIGHT_PX, previewBoxStyle } from "./cropDraft";
+import {
+	type CropPct,
+	cropDraftFromRegion,
+	cropFieldRangePx,
+	cropPctToPx,
+	isUsableFrameSize,
+	MIN_CROP_PCT,
+	PREVIEW_MAX_HEIGHT_PX,
+	previewBoxStyle,
+	setCropFieldPx,
+} from "./cropDraft";
 
 describe("crop draft helpers", () => {
 	it("gives the preview box the video's own aspect ratio", () => {
@@ -28,3 +38,85 @@ describe("crop draft helpers", () => {
 		expect(draft.x).not.toBe(33);
 	});
 });
+
+describe("crop pixel fields", () => {
+	const frame = { width: 1920, height: 1080 };
+	const crop: CropPct = { x: 10, y: 20, w: 50, h: 40 };
+
+	it("converts the percent crop to whole source pixels", () => {
+		expect(cropPctToPx(crop, frame)).toEqual({ x: 192, y: 216, w: 960, h: 432 });
+		expect(cropPctToPx({ x: 0, y: 0, w: 100, h: 100 }, frame)).toEqual({
+			x: 0,
+			y: 0,
+			w: 1920,
+			h: 1080,
+		});
+	});
+
+	it("rounds fractional pixels to the nearest pixel", () => {
+		const px = cropPctToPx({ x: 33.333, y: 0, w: 33.333, h: 100 }, frame);
+		expect(px.x).toBe(640);
+		expect(px.w).toBe(640);
+	});
+
+	it("round-trips a typed pixel value through the stored percent", () => {
+		for (const [field, value] of [
+			["x", 123],
+			["y", 77],
+			["w", 801],
+			["h", 333],
+		] as const) {
+			const next = setCropFieldPx(crop, field, value, frame);
+			expect(cropPctToPx(next, frame)[field]).toBe(value);
+		}
+	});
+
+	it("changes only the field that was typed into", () => {
+		const next = setCropFieldPx(crop, "w", 1000, frame);
+		expect(next).toEqual({ ...crop, w: (1000 / 1920) * 100 });
+	});
+
+	it("keeps the crop inside the frame", () => {
+		// x can move up to the point where the right edge meets the frame.
+		expect(setCropFieldPx(crop, "x", 5000, frame).x).toBe(50);
+		expect(setCropFieldPx(crop, "x", -40, frame).x).toBe(0);
+		expect(setCropFieldPx(crop, "y", 5000, frame).y).toBe(60);
+		// Width and height can grow only to the frame edge from where the crop starts.
+		expect(setCropFieldPx(crop, "w", 5000, frame).w).toBe(90);
+		expect(setCropFieldPx(crop, "h", 5000, frame).h).toBe(80);
+	});
+
+	it("does not let a side shrink below the minimum", () => {
+		expect(setCropFieldPx(crop, "w", 0, frame).w).toBe(MIN_CROP_PCT);
+		expect(setCropFieldPx(crop, "h", -5, frame).h).toBe(MIN_CROP_PCT);
+	});
+
+	it("ignores a value that is not a number", () => {
+		expect(setCropFieldPx(crop, "x", Number.NaN, frame)).toBe(crop);
+		expect(setCropFieldPx(crop, "w", Number.POSITIVE_INFINITY, frame)).toBe(crop);
+	});
+
+	it("rounds a typed decimal to a whole pixel", () => {
+		const next = setCropFieldPx(crop, "x", 100.4, frame);
+		expect(cropPctToPx(next, frame).x).toBe(100);
+	});
+
+	it("reports the range each field accepts, matching what the setter allows", () => {
+		expect(cropFieldRangePx(crop, "x", frame)).toEqual({ min: 0, max: 960 });
+		expect(cropFieldRangePx(crop, "y", frame)).toEqual({ min: 0, max: 648 });
+		expect(cropFieldRangePx(crop, "w", frame)).toEqual({ min: 77, max: 1728 });
+		expect(cropFieldRangePx(crop, "h", frame)).toEqual({ min: 43, max: 864 });
+		for (const field of ["x", "y", "w", "h"] as const) {
+			const { min, max } = cropFieldRangePx(crop, field, frame);
+			expect(cropPctToPx(setCropFieldPx(crop, field, max, frame), frame)[field]).toBe(max);
+			expect(cropPctToPx(setCropFieldPx(crop, field, min, frame), frame)[field]).toBe(min);
+		}
+	});
+
+	it("only trusts a frame size with real dimensions", () => {
+		expect(isUsableFrameSize(frame)).toBe(true);
+		expect(isUsableFrameSize(null)).toBe(false);
+		expect(isUsableFrameSize({ width: 0, height: 1080 })).toBe(false);
+		expect(isUsableFrameSize({ width: 1920, height: Number.NaN })).toBe(false);
+	});
+});
diff --git a/src/components/ai-edition/cropDraft.ts b/src/components/ai-edition/cropDraft.ts
index 337e0243e5..ac0bcb601b 100644
--- a/src/components/ai-edition/cropDraft.ts
+++ b/src/components/ai-edition/cropDraft.ts
@@ -60,3 +60,82 @@ export function previewBoxStyle(videoAspectRatio: number): {
 		overflow: "hidden",
 	};
 }
+
+/** The crop rectangle in percent of the frame (0-100), the unit the dialog edits in. */
+export type CropPct = { x: number; y: number; w: number; h: number };
+
+/** Smallest crop side, in percent of the frame, that the handles and the typed fields allow. */
+export const MIN_CROP_PCT = 4;
+
+export type CropField = keyof CropPct;
+
+/** The source frame in pixels. */
+export interface FrameSize {
+	width: number;
+	height: number;
+}
+
+export const isUsableFrameSize = (frame: FrameSize | null): frame is FrameSize =>
+	!!frame &&
+	Number.isFinite(frame.width) &&
+	Number.isFinite(frame.height) &&
+	frame.width > 0 &&
+	frame.height > 0;
+
+/** The crop in whole source pixels, as shown in the X / Y / Width / Height fields. */
+export function cropPctToPx(crop: CropPct, frame: FrameSize): CropPct {
+	return {
+		x: Math.round((crop.x / 100) * frame.width),
+		y: Math.round((crop.y / 100) * frame.height),
+		w: Math.round((crop.w / 100) * frame.width),
+		h: Math.round((crop.h / 100) * frame.height),
+	};
+}
+
+/**
+ * `crop` with one field set to a typed pixel value. The value is rounded to a whole pixel
+ * and clamped so the crop stays inside the frame and no side drops under MIN_CROP_PCT; the
+ * other three fields keep their exact stored values. A value that is not a number leaves the
+ * crop as it was.
+ */
+export function setCropFieldPx(
+	crop: CropPct,
+	field: CropField,
+	px: number,
+	frame: FrameSize,
+): CropPct {
+	if (!Number.isFinite(px)) return crop;
+	const horizontal = field === "x" || field === "w";
+	const pct = (Math.round(px) / (horizontal ? frame.width : frame.height)) * 100;
+	switch (field) {
+		case "x":
+			return { ...crop, x: Math.min(Math.max(0, 100 - crop.w), Math.max(0, pct)) };
+		case "y":
+			return { ...crop, y: Math.min(Math.max(0, 100 - crop.h), Math.max(0, pct)) };
+		case "w":
+			return { ...crop, w: Math.min(100 - crop.x, Math.max(MIN_CROP_PCT, pct)) };
+		case "h":
+			return { ...crop, h: Math.min(100 - crop.y, Math.max(MIN_CROP_PCT, pct)) };
+	}
+}
+
+/** The pixel range a field accepts right now: what the stepper and the arrow keys stay within. */
+export function cropFieldRangePx(
+	crop: CropPct,
+	field: CropField,
+	frame: FrameSize,
+): { min: number; max: number } {
+	const horizontal = field === "x" || field === "w";
+	const size = horizontal ? frame.width : frame.height;
+	const toPx = (pct: number) => Math.round((pct / 100) * size);
+	switch (field) {
+		case "x":
+			return { min: 0, max: toPx(100 - crop.w) };
+		case "y":
+			return { min: 0, max: toPx(100 - crop.h) };
+		case "w":
+			return { min: toPx(MIN_CROP_PCT), max: toPx(100 - crop.x) };
+		case "h":
+			return { min: toPx(MIN_CROP_PCT), max: toPx(100 - crop.y) };
+	}
+}
diff --git a/src/i18n/locales/ar/settings.json b/src/i18n/locales/ar/settings.json
index 0810409f12..f112a1490f 100644
--- a/src/i18n/locales/ar/settings.json
+++ b/src/i18n/locales/ar/settings.json
@@ -351,7 +351,12 @@
 		"done": "تم",
 		"ratio": "النسبة",
 		"cropVideo": "اقتصاص الفيديو",
-		"lockAspectRatio": "قفل نسبة العرض إلى الارتفاع"
+		"lockAspectRatio": "قفل نسبة العرض إلى الارتفاع",
+		"x": "X (بكسل)",
+		"y": "Y (بكسل)",
+		"width": "العرض (بكسل)",
+		"height": "الارتفاع (بكسل)",
+		"position": "موضع الاقتصاص وحجمه بالبكسل"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/cs/settings.json b/src/i18n/locales/cs/settings.json
index 80eb9b2687..10301b0e46 100644
--- a/src/i18n/locales/cs/settings.json
+++ b/src/i18n/locales/cs/settings.json
@@ -351,7 +351,12 @@
 		"done": "Hotovo",
 		"ratio": "Poměr",
 		"cropVideo": "Oříznout video",
-		"lockAspectRatio": "Zamknout poměr stran"
+		"lockAspectRatio": "Zamknout poměr stran",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Šířka (px)",
+		"height": "Výška (px)",
+		"position": "Poloha a velikost ořezu v pixelech"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/de/settings.json b/src/i18n/locales/de/settings.json
index 715d3c9bb9..88462649bc 100644
--- a/src/i18n/locales/de/settings.json
+++ b/src/i18n/locales/de/settings.json
@@ -351,7 +351,12 @@
 		"done": "Fertig",
 		"ratio": "Verhältnis",
 		"cropVideo": "Video zuschneiden",
-		"lockAspectRatio": "Seitenverhältnis sperren"
+		"lockAspectRatio": "Seitenverhältnis sperren",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Breite (px)",
+		"height": "Höhe (px)",
+		"position": "Position und Größe des Ausschnitts in Pixeln"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index be8b13a694..a896ad4c49 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -351,7 +351,12 @@
 		"done": "Done",
 		"ratio": "Ratio",
 		"cropVideo": "Crop Video",
-		"lockAspectRatio": "Lock aspect ratio"
+		"lockAspectRatio": "Lock aspect ratio",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Width (px)",
+		"height": "Height (px)",
+		"position": "Crop position and size in pixels"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
index f9efcfab37..c89cff6da3 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -351,7 +351,12 @@
 		"done": "Listo",
 		"ratio": "Proporción",
 		"cropVideo": "Recortar video",
-		"lockAspectRatio": "Bloquear relación de aspecto"
+		"lockAspectRatio": "Bloquear relación de aspecto",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Ancho (px)",
+		"height": "Alto (px)",
+		"position": "Posición y tamaño del recorte en píxeles"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/fr/settings.json b/src/i18n/locales/fr/settings.json
index cbd0536996..cbcfe38ab4 100644
--- a/src/i18n/locales/fr/settings.json
+++ b/src/i18n/locales/fr/settings.json
@@ -351,7 +351,12 @@
 		"done": "Terminer",
 		"ratio": "Ratio",
 		"cropVideo": "Recadrer la vidéo",
-		"lockAspectRatio": "Verrouiller le ratio"
+		"lockAspectRatio": "Verrouiller le ratio",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Largeur (px)",
+		"height": "Hauteur (px)",
+		"position": "Position et taille du recadrage en pixels"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/it/settings.json b/src/i18n/locales/it/settings.json
index fd37547e2f..fd1208664d 100644
--- a/src/i18n/locales/it/settings.json
+++ b/src/i18n/locales/it/settings.json
@@ -351,7 +351,12 @@
 		"done": "Fatto",
 		"ratio": "Proporzioni",
 		"cropVideo": "Ritaglia video",
-		"lockAspectRatio": "Blocca proporzioni"
+		"lockAspectRatio": "Blocca proporzioni",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Larghezza (px)",
+		"height": "Altezza (px)",
+		"position": "Posizione e dimensione del ritaglio in pixel"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/ja-JP/settings.json b/src/i18n/locales/ja-JP/settings.json
index 7349992049..d88d457285 100644
--- a/src/i18n/locales/ja-JP/settings.json
+++ b/src/i18n/locales/ja-JP/settings.json
@@ -351,7 +351,12 @@
 		"done": "完了",
 		"ratio": "比率",
 		"cropVideo": "動画をクロップ",
-		"lockAspectRatio": "アスペクト比を固定"
+		"lockAspectRatio": "アスペクト比を固定",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "幅 (px)",
+		"height": "高さ (px)",
+		"position": "クロップの位置とサイズ（ピクセル）"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/ko-KR/settings.json b/src/i18n/locales/ko-KR/settings.json
index c464581da8..459400e68c 100644
--- a/src/i18n/locales/ko-KR/settings.json
+++ b/src/i18n/locales/ko-KR/settings.json
@@ -351,7 +351,12 @@
 		"done": "완료",
 		"ratio": "비율",
 		"cropVideo": "비디오 자르기",
-		"lockAspectRatio": "화면 비율 고정"
+		"lockAspectRatio": "화면 비율 고정",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "너비 (px)",
+		"height": "높이 (px)",
+		"position": "자르기 위치와 크기(픽셀)"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/pt-BR/settings.json b/src/i18n/locales/pt-BR/settings.json
index 53a4c89de0..8a27aa0420 100644
--- a/src/i18n/locales/pt-BR/settings.json
+++ b/src/i18n/locales/pt-BR/settings.json
@@ -351,7 +351,12 @@
 		"done": "Concluir",
 		"ratio": "Proporção",
 		"cropVideo": "Cortar Vídeo",
-		"lockAspectRatio": "Bloquear proporção"
+		"lockAspectRatio": "Bloquear proporção",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Largura (px)",
+		"height": "Altura (px)",
+		"position": "Posição e tamanho do corte em pixels"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/ru/settings.json b/src/i18n/locales/ru/settings.json
index 08c1a76c9d..1dc9e1d143 100644
--- a/src/i18n/locales/ru/settings.json
+++ b/src/i18n/locales/ru/settings.json
@@ -351,7 +351,12 @@
 		"done": "Готово",
 		"ratio": "Соотношение сторон",
 		"cropVideo": "Обрезать видео",
-		"lockAspectRatio": "Заблокировать соотношение сторон"
+		"lockAspectRatio": "Заблокировать соотношение сторон",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Ширина (px)",
+		"height": "Высота (px)",
+		"position": "Положение и размер обрезки в пикселях"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/tr/settings.json b/src/i18n/locales/tr/settings.json
index 2f3fd2c676..8ff7da7ab2 100644
--- a/src/i18n/locales/tr/settings.json
+++ b/src/i18n/locales/tr/settings.json
@@ -351,7 +351,12 @@
 		"done": "Tamam",
 		"ratio": "Oran",
 		"cropVideo": "Videoyu Kırp",
-		"lockAspectRatio": "En boy oranını kilitle"
+		"lockAspectRatio": "En boy oranını kilitle",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Genişlik (px)",
+		"height": "Yükseklik (px)",
+		"position": "Kırpmanın konumu ve boyutu (piksel)"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/vi/settings.json b/src/i18n/locales/vi/settings.json
index ece372040f..da820d9aef 100644
--- a/src/i18n/locales/vi/settings.json
+++ b/src/i18n/locales/vi/settings.json
@@ -351,7 +351,12 @@
 		"done": "Hoàn tất",
 		"ratio": "Tỷ lệ",
 		"cropVideo": "Cắt xén video",
-		"lockAspectRatio": "Khóa tỷ lệ khung hình"
+		"lockAspectRatio": "Khóa tỷ lệ khung hình",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "Chiều rộng (px)",
+		"height": "Chiều cao (px)",
+		"position": "Vị trí và kích thước vùng cắt tính bằng pixel"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index 3aa4b4b485..c18fda7318 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -351,7 +351,12 @@
 		"done": "完成",
 		"ratio": "比例",
 		"cropVideo": "裁剪视频",
-		"lockAspectRatio": "锁定宽高比"
+		"lockAspectRatio": "锁定宽高比",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "宽度 (px)",
+		"height": "高度 (px)",
+		"position": "裁剪位置和大小（像素）"
 	},
 	"zoom": {
 		"position": {
diff --git a/src/i18n/locales/zh-TW/settings.json b/src/i18n/locales/zh-TW/settings.json
index f33f5439d9..94bb8a4cee 100644
--- a/src/i18n/locales/zh-TW/settings.json
+++ b/src/i18n/locales/zh-TW/settings.json
@@ -351,7 +351,12 @@
 		"done": "完成",
 		"ratio": "比例",
 		"cropVideo": "裁剪影片",
-		"lockAspectRatio": "鎖定長寬比"
+		"lockAspectRatio": "鎖定長寬比",
+		"x": "X (px)",
+		"y": "Y (px)",
+		"width": "寬度 (px)",
+		"height": "高度 (px)",
+		"position": "裁切位置與大小（像素）"
 	},
 	"zoom": {
 		"position": {

From 349567c21e25f4d2be0c2a67718ee59144b9d716 Mon Sep 17 00:00:00 2001
From: 0xmyst3ry <130799986+0xmyst3ry@users.noreply.github.com>
Date: Tue, 27 Oct 2026 14:17:11 +0530
Subject: [PATCH 2/2] fix(editor): put crop pixel labels inline so the fields
 fit above the footer

The stacked label-over-input layout pushed the X/Y/Width/Height row below the fold at common window heights. Inline labels make the row one line tall.
---
 src/components/ai-edition/Modals.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ai-edition/Modals.tsx b/src/components/ai-edition/Modals.tsx
index 413f6a2144..8001c60535 100644
--- a/src/components/ai-edition/Modals.tsx
+++ b/src/components/ai-edition/Modals.tsx
@@ -1274,7 +1274,7 @@ export function EditClipModal({
 				<div
 					role="group"
 					aria-label={ts("crop.position")}
-					style={{ display: "flex", gap: 10, marginTop: 10 }}
+					style={{ display: "flex", gap: 10, marginTop: 8 }}
 				>
 					{(
 						[
@@ -1319,8 +1319,8 @@ function CropPxField({
 	const id = useId();
 	const [draft, setDraft] = useState<string | null>(null);
 	return (
-		<div style={{ display: "flex", flexDirection: "column", gap: 4, flex: 1, minWidth: 0 }}>
-			<label htmlFor={id} className={styles.fieldLabel}>
+		<div style={{ display: "flex", alignItems: "center", gap: 6, flex: 1, minWidth: 0 }}>
+			<label htmlFor={id} className={styles.fieldLabel} style={{ flexShrink: 0 }}>
 				{label}
 			</label>
 			<input
@@ -1338,7 +1338,7 @@ function CropPxField({
 					if (e.target.value.trim() !== "") onChange(Number(e.target.value));
 				}}
 				onBlur={() => setDraft(null)}
-				style={{ width: "100%", fontVariantNumeric: "tabular-nums" }}
+				style={{ flex: 1, minWidth: 0, fontVariantNumeric: "tabular-nums" }}
 			/>
 		</div>
 	);