cozyclay 1.0.0 → 1.2.0

package/src/ardy/timeline.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { frameFromClientX, promptMoveStartFrame } from "./timeline-coordinates.js";
+import { frameFromClientX, promptMoveStartFrame, shotBlockGeometry } from "./timeline-coordinates.js";
 import { promptResizeFrame } from "./timeline-resize.js";
+import { ko, isKo } from "../locale.js";
 
 /**
  * ARDY Viser-style animation timeline — the live motion workspace.
@@ -11,8 +12,8 @@ import { promptResizeFrame } from "./timeline-resize.js";
  * The 2D Root lane authors temporal keyframes directly: left-clicking an empty
  * track cell creates/selects a numbered waypoint, then Top-View owns its
  * spatial position through direct marker dragging.
- * The Camera lane authors shot-camera keyframings directly: left-clicking an
- * empty track cell keys the CURRENT camera framing at that frame, dots jump
+ * The unified Shot lane authors shot-camera keyframings directly: left-clicking
+ * a block's lower strip keys the CURRENT camera framing there, dots jump
  * the playhead on click, drag to re-time, right-click to remove. Playback
  * and PlayView ride the keys segment by segment.
  */
@@ -36,13 +37,19 @@ const TRACKS = [
 	"Prompts",
 	"Full-Body",
 	"2D Root",
-	"Camera",
+	"Shots",
 ];
+const TRACK_LABELS_KO = {
+	Prompts: ko("Prompts", "프롬프트"),
+	"Full-Body": ko("Full-Body", "전신"),
+	"2D Root": ko("2D Root", "2D 루트"),
+	Shots: ko("Shots", "샷"),
+};
 
 /** IK keys live on the Full-Body lane: one marker per keyed frame, holding
  * a sparse set of the limbs the user has moved (never every joint). */
 const IK_LANE = "Full-Body";
-const CAMERA_LANE = "Camera";
+const SHOTS_LANE = "Shots";
 // Ruler labels and lane gridlines share one 10-frame cadence, so authored
 // elements (40-frame prompt blocks, camera key dots) always land on visible
 // lines. Label density adapts to zoom in 10-based steps.
@@ -52,6 +59,109 @@ const MAX_LABELS = 30;
 
 const framePct = (f, count) => (count > 1 ? f / (count - 1) : 0);
 
+const CAMERA_BLOCK_DEFAULTS = {
+	distance: 3,
+	height: 1.6,
+	response: 0.7,
+	lead: 0.25,
+	railStartMode: "head",
+	maxDollySpeed: 4,
+	pitchOffsetDeg: 0,
+};
+
+function cameraBlockMode(shot) {
+	const mode = shot?.camera?.mode;
+	if (mode === "keys" || mode === "follow" || mode === "rail") return mode;
+	if (shot?.camera?.cameraRail) return "rail";
+	if (shot?.camera?.followCam?.enabled) return "follow";
+	return "keys";
+}
+
+function cameraBlockFollow(shot) {
+	return { ...CAMERA_BLOCK_DEFAULTS, ...(shot?.camera?.followCam ?? {}) };
+}
+
+function signedDegrees(value) {
+	const rounded = Math.round(Number(value) || 0);
+	return `${rounded >= 0 ? "+" : ""}${rounded}\u00b0`;
+}
+
+function signedValue(value) {
+	const rounded = Math.round((Number(value) || 0) * 10) / 10;
+	return `${rounded >= 0 ? "+" : ""}${rounded}`;
+}
+
+function CameraBlockEditor({ shot, blocked, previewing, railDraw, railLength, onChange, onPreview, onRailDrawToggle }) {
+	if (!shot) return null;
+	const mode = cameraBlockMode(shot);
+	const follow = cameraBlockFollow(shot);
+	const patchFollow = (patch) => onChange?.({ followCam: { ...follow, ...patch } });
+	const numberValue = (event) => Number(event.currentTarget.value);
+	const metric = (value, places = 1) => Number(value).toFixed(places);
+	return (
+		<section className="tl-camera-editor" aria-label={ko(`Camera controls for ${shot.name}`, `${shot.name} 카메라 컨트롤`)}>
+			<strong className="tl-camera-editor-title">{shot.name}</strong>
+			{blocked ? (
+				<span className="tl-camera-blocked">{ko("Turn Waypoint off to edit or preview this camera.", "카메라를 편집하거나 미리 보려면 Waypoint를 꺼주세요.")}</span>
+			) : (
+				<>
+					<button type="button" className={"tl-camera-tool" + (previewing ? " active" : "")} onClick={() => onPreview?.()}>
+						{previewing ? ko("Stop", "정지") : ko("Preview", "미리보기")}
+					</button>
+					<button type="button" className={"tl-camera-tool" + (railDraw ? " active" : "")} onClick={() => onRailDrawToggle?.()}>
+						{railDraw ? ko("Drawing…", "그리는 중…") : ko("Draw rail", "레일 그리기")}
+					</button>
+					<button
+						type="button"
+						className={"tl-camera-head" + (follow.railStartMode === "head" ? " active" : "")}
+						aria-pressed={follow.railStartMode === "head"}
+						title={ko("Choose whether the dolly starts at the rail head or the nearest useful point", "돌리가 레일 시작점 또는 가까운 지점에서 출발하도록 정합니다")}
+						onClick={() => patchFollow({ railStartMode: follow.railStartMode === "head" ? "nearest" : "head" })}
+					>
+						{follow.railStartMode === "head" ? ko("Head start", "시작점 출발") : ko("Nearest", "가까운 지점")}
+					</button>
+					<label title={ko("Read automatically from the camera position", "현재 카메라 위치에서 자동으로 읽습니다")}>
+						<span>{ko("Distance", "거리")}</span>
+						<output className="tl-camera-metric">{metric(follow.distance, 2)}</output>
+						<small>m</small>
+					</label>
+					<label title={ko("Cap dolly travel speed", "돌리의 최고 이동 속도를 제한합니다")}>
+						<span>{ko("Speed", "속도")}</span>
+						<input type="number" min="0.2" max="8" step="0.1" value={follow.maxDollySpeed} onChange={(event) => patchFollow({ maxDollySpeed: numberValue(event) })} />
+						<small>m/s</small>
+					</label>
+					<label title={ko("Read automatically from the camera position", "현재 카메라 위치에서 자동으로 읽습니다")}>
+						<span>{ko("Height", "높이")}</span>
+						<output className="tl-camera-metric">{metric(follow.height, 2)}</output>
+						<small>m</small>
+					</label>
+					<label title={ko("Read automatically from the camera tilt", "현재 카메라 틸트에서 자동으로 읽습니다")}>
+						<span>{ko("Pitch", "피치")}</span>
+						<output className="tl-camera-metric">{signedValue(follow.pitchOffsetDeg)}</output>
+						<small>°</small>
+					</label>
+					<details className="tl-camera-advanced">
+						<summary>{ko("Advanced", "고급")}</summary>
+						<label title={ko("Set how softly the rig catches up", "카메라가 얼마나 부드럽게 따라붙는지 정합니다")}>
+							<span>{ko("Damping", "댐핑")}</span>
+							<input type="number" min="0.1" max="3" step="0.05" value={follow.response} onChange={(event) => patchFollow({ response: numberValue(event) })} />
+							<small>s</small>
+						</label>
+						<label title={ko("Aim ahead of subject travel", "피사체 진행 방향을 미리 조준합니다")}>
+							<span>{ko("Look-ahead", "조준 선행")}</span>
+							<input type="number" min="0" max="1" step="0.05" value={follow.lead} onChange={(event) => patchFollow({ lead: numberValue(event) })} />
+							<small>s</small>
+						</label>
+					</details>
+					<span className="tl-camera-slate">
+						{mode === "rail" ? `${ko("Dolly on rail", "레일 돌리")}${railLength == null ? "" : ` · ${railLength.toFixed(1)} m`}` : ko("Camera preview", "카메라 미리보기")}
+					</span>
+				</>
+			)}
+		</section>
+	);
+}
+
 export default function Timeline({
 	frame,
 	frameCount = DEFAULT_FRAME_COUNT,
@@ -69,7 +179,10 @@ export default function Timeline({
 	ikDisabled = false, // a loaded motion owns the rig
 	ikFrames = [], // sorted full-body key frames
 	footSnap = true, // feet stay planted while the body moves
-	cameraKeyFrames = [], // sorted camera key frames — dots on the Camera lane
+	shots = [],
+	activeShotIdx = 0,
+	selectedCameraBlockIdx,
+	shotCutDisabled = false,
 	onScrub,
 	onAdvance,
 	onStep,
@@ -93,10 +206,31 @@ export default function Timeline({
 	onCameraKeyframeAdd,
 	onCameraKeyframeMove,
 	onCameraKeyframeRemove,
+	onCameraBlockSelect,
+	onCameraBlockChange,
+	onCameraPreview,
+	railDraw = false,
+	cameraRailLength = null,
+	onCameraRailDrawToggle,
+	onRailSelect,
+	onRailMove,
+	onRailRangeChange,
+	onRailRemove,
+	onShotSelect,
+	onShotBoundaryMove,
+	onShotRename,
+	onShotRemove,
+	onShotDuplicate,
+	onShotCut,
+	onShotSplit,
+	onShotMove,
 }) {
 	const [expanded, setExpanded] = useState(true);
 	const [zoom, setZoom] = useState(ZOOM_DEFAULT);
 	const [movingPromptId, setMovingPromptId] = useState(null);
+	const [renamingShotId, setRenamingShotId] = useState(null);
+	const [movingShotId, setMovingShotId] = useState(null);
+	const [localCameraBlockIdx, setLocalCameraBlockIdx] = useState(null);
 	const rulerRef = useRef(null);
 	const bodyRef = useRef(null);
 	const scrubbing = useRef(false);
@@ -110,7 +244,7 @@ export default function Timeline({
 	// The window key/interval handlers register once; the latest callbacks
 	// are read through a ref so they never go stale mid-playback.
 	const handlers = useRef({});
-	handlers.current = { onScrub, onAdvance, onStep, onPlayToggle, onWaypointToggle, onMarkerSelect, onMarkerRemove, onRootKeyframeAdd, onPromptAdd, onPromptSelect, onPromptChange, onPromptResize, onPromptMove, onPromptRemove, onIkToggle, onIkKeyframeAdd, onIkKeyframeRemove, onFootSnapToggle, onCameraMoveSelect, onCameraKeyframeAdd, onCameraKeyframeMove, onCameraKeyframeRemove };
+	handlers.current = { onScrub, onAdvance, onStep, onPlayToggle, onWaypointToggle, onMarkerSelect, onMarkerRemove, onRootKeyframeAdd, onPromptAdd, onPromptSelect, onPromptChange, onPromptResize, onPromptMove, onPromptRemove, onIkToggle, onIkKeyframeAdd, onIkKeyframeRemove, onFootSnapToggle, onCameraMoveSelect, onCameraKeyframeAdd, onCameraKeyframeMove, onCameraKeyframeRemove, onCameraBlockSelect, onCameraBlockChange, onCameraPreview, onCameraRailDrawToggle, onRailSelect, onRailMove, onRailRangeChange, onRailRemove, onShotSelect, onShotBoundaryMove, onShotRename, onShotRemove, onShotDuplicate, onShotCut, onShotSplit, onShotMove };
 
 	// Trackpad/wheel zoom over the FRAME ruler lane only. React registers
 	// onWheel as passive, so a synthetic onWheel could never preventDefault —
@@ -254,6 +388,12 @@ export default function Timeline({
 	const resizeRef = useRef(null);
 	const camDragRef = useRef(null);
 	const camSuppressClickRef = useRef(false);
+	const shotBoundaryRef = useRef(null);
+	const shotMoveRef = useRef(null);
+	const shotSuppressClickRef = useRef(false);
+	const railDragRef = useRef(null);
+	const railResizeRef = useRef(null);
+	const railSuppressClickRef = useRef(false);
 
 	function beginPromptMove(e, clip) {
 		if (e.button !== 0 || e.target.closest(".tl-chip-handle")) return;
@@ -347,9 +487,10 @@ export default function Timeline({
 	// Camera key dots re-time by dragging, like prompt clips move: the frame
 	// delta comes from the pointer-down geometry so a growing timeline cannot
 	// feed back into the next pointermove.
-	function beginCameraKeyDrag(e, keyFrame) {
+	function beginCameraKeyDrag(e, keyFrame, shotIndex) {
 		if (e.button !== 0) return;
 		e.stopPropagation();
+		selectUnifiedShotBlock(shotIndex);
 		// A 10px dot loses the pointer almost immediately without capture —
 		// grab it on pointerdown so the drag survives past the marker's edge.
 		e.currentTarget.setPointerCapture?.(e.pointerId);
@@ -359,6 +500,7 @@ export default function Timeline({
 			pointerId: e.pointerId,
 			startClientX: e.clientX,
 			fromFrame: keyFrame,
+			shotIndex,
 			currentFrame: keyFrame,
 			laneWidth: rect?.width ?? 1,
 			displayFrameCount,
@@ -381,7 +523,7 @@ export default function Timeline({
 		if (next === active.currentFrame) return;
 		const from = active.currentFrame;
 		active.currentFrame = next;
-		handlers.current.onCameraKeyframeMove?.(from, next);
+		handlers.current.onCameraKeyframeMove?.(from, next, active.shotIndex);
 	}
 
 	function endCameraKeyDrag(e) {
@@ -397,17 +539,183 @@ export default function Timeline({
 		camDragRef.current = null;
 	}
 
-	function onCameraKeyClick(e, keyFrame) {
+	function onCameraKeyClick(e, keyFrame, shotIndex) {
 		if (camSuppressClickRef.current) {
 			e.preventDefault();
 			e.stopPropagation();
 			return;
 		}
 		e.stopPropagation();
+		selectUnifiedShotBlock(shotIndex);
 		handlers.current.onScrub?.(keyFrame);
+	}
+
+	function beginRailMove(e, shotIndex, range, duration) {
+		if (e.button !== 0) return;
+		e.stopPropagation();
+		handlers.current.onRailSelect?.(shotIndex);
+		const lane = e.currentTarget.closest(".tl-lane");
+		const rect = lane?.getBoundingClientRect();
+		railDragRef.current = { shotIndex, pointerId: e.pointerId, startClientX: e.clientX, startFrame: range.start, length: range.end - range.start + 1, duration, laneWidth: rect?.width ?? 1, moved: false };
+	}
+
+	function moveRail(e) {
+		const active = railDragRef.current;
+		if (!active || e.pointerId !== active.pointerId) return;
+		if (!active.moved && Math.abs(e.clientX - active.startClientX) < 4) return;
+		active.moved = true;
+		e.preventDefault();
+		e.stopPropagation();
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		const delta = Math.round((e.clientX - active.startClientX) * Math.max(0, displayFrameCount - 1) / Math.max(1, active.laneWidth));
+		const next = Math.max(0, Math.min(active.duration - active.length, active.startFrame + delta));
+		handlers.current.onRailMove?.(active.shotIndex, next);
+	}
+
+	function endRailMove(e) {
+		const active = railDragRef.current;
+		if (!active || e.pointerId !== active.pointerId) return;
+		if (active.moved) {
+			e.preventDefault();
+			e.stopPropagation();
+			railSuppressClickRef.current = true;
+			queueMicrotask(() => { railSuppressClickRef.current = false; });
+		}
+		railDragRef.current = null;
+		e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}
+
+	function beginRailResize(e, shotIndex, edge, range, duration) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		handlers.current.onRailSelect?.(shotIndex);
+		const lane = e.currentTarget.closest(".tl-lane");
+		const rect = lane?.getBoundingClientRect();
+		railResizeRef.current = { shotIndex, edge, pointerId: e.pointerId, startClientX: e.clientX, startFrame: edge === "start" ? range.start : range.end, duration, laneWidth: rect?.width ?? 1 };
+	}
+
+	function moveRailResize(e) {
+		const active = railResizeRef.current;
+		if (!active || e.pointerId !== active.pointerId) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const delta = Math.round((e.clientX - active.startClientX) * Math.max(0, displayFrameCount - 1) / Math.max(1, active.laneWidth));
+		const next = Math.max(0, Math.min(active.duration - 1, active.startFrame + delta));
+		handlers.current.onRailRangeChange?.(active.shotIndex, active.edge, next);
+	}
+
+	function endRailResize(e) {
+		if (!railResizeRef.current || e.pointerId !== railResizeRef.current.pointerId) return;
+		railResizeRef.current = null;
+		e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}
+
+	function onRailKeyDown(e, shotIndex, range, duration) {
+		const edge = e.currentTarget.dataset.railEdge;
+		if (e.key === "Delete" || e.key === "Backspace") {
+			e.preventDefault();
+			e.stopPropagation();
+			handlers.current.onRailRemove?.(shotIndex);
+			return;
+		}
+		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+		e.preventDefault();
+		e.stopPropagation();
+		const delta = (e.key === "ArrowLeft" ? -1 : 1) * (e.shiftKey ? 10 : 1);
+		if (edge === "body") handlers.current.onRailMove?.(shotIndex, Math.max(0, Math.min(duration - (range.end - range.start + 1), range.start + delta)));
+		else handlers.current.onRailRangeChange?.(shotIndex, edge, Math.max(0, Math.min(duration - 1, (edge === "start" ? range.start : range.end) + delta)));
+	}
+
+	function beginShotBoundaryDrag(e, shotIndex, edge) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		const lane = e.currentTarget.closest(".tl-lane");
+		const rect = lane?.getBoundingClientRect();
+		shotBoundaryRef.current = { shotIndex, edge, pointerId: e.pointerId, left: rect?.left ?? 0, width: rect?.width ?? 1, displayFrameCount };
+	}
+
+	function moveShotBoundary(e) {
+		const active = shotBoundaryRef.current;
+		if (!active || e.pointerId !== active.pointerId) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const ratio = (e.clientX - active.left) / Math.max(1, active.width);
+		const rawFrame = Math.round(ratio * Math.max(0, active.displayFrameCount - 1));
+		handlers.current.onShotBoundaryMove?.(active.shotIndex, active.edge, Math.max(0, Math.min(frameCount - 1, rawFrame)));
+	}
+
+	function endShotBoundaryDrag(e) {
+		const active = shotBoundaryRef.current;
+		if (!active || e.pointerId !== active.pointerId) return;
+		shotBoundaryRef.current = null;
+		e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}
+
+	function beginShotMove(e, shot, index) {
+		if (e.button !== 0 || e.target.closest("button, input")) return;
+		const lane = e.currentTarget.closest(".tl-lane");
+		const rect = lane?.getBoundingClientRect();
+		shotMoveRef.current = { id: shot.id, index, pointerId: e.pointerId, startClientX: e.clientX, left: rect?.left ?? 0, width: rect?.width ?? 1, targetFrame: shot.startFrame, moved: false };
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+	}
+
+	function moveShot(e) {
+		const active = shotMoveRef.current;
+		if (!active || e.pointerId !== active.pointerId) return;
+		if (!active.moved && Math.abs(e.clientX - active.startClientX) < 4) return;
+		active.moved = true;
+		active.targetFrame = frameFromClientX(e.clientX, active.left, active.width, displayFrameCount, frameCount);
+		setMovingShotId(active.id);
+		e.preventDefault();
+		e.stopPropagation();
+	}
+
+	function endShotMove(e) {
+		const active = shotMoveRef.current;
+		if (!active || e.pointerId !== active.pointerId) return;
+		if (active.moved) {
+			e.preventDefault();
+			e.stopPropagation();
+			shotSuppressClickRef.current = true;
+			handlers.current.onShotMove?.(active.index, active.targetFrame);
+			queueMicrotask(() => { shotSuppressClickRef.current = false; });
+		}
+		shotMoveRef.current = null;
+		setMovingShotId(null);
+		e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}
+
+	function selectUnifiedShotBlock(index) {
+		if (shotSuppressClickRef.current) return;
+		setLocalCameraBlockIdx(index);
+		handlers.current.onCameraBlockSelect?.(index);
+		handlers.current.onShotSelect?.(index);
+		if (!handlers.current.onShotSelect) handlers.current.onScrub?.(shots[index]?.startFrame ?? 0);
 		handlers.current.onCameraMoveSelect?.();
 	}
 
+	function addCameraKeyFromBlock(e, index) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const lane = e.currentTarget.closest(".tl-lane");
+		const rect = lane?.getBoundingClientRect();
+		if (!rect) return;
+		const target = frameFromClientX(e.clientX, rect.left, rect.width, displayFrameCount, frameCount);
+		selectUnifiedShotBlock(index);
+		handlers.current.onCameraKeyframeAdd?.(target, index);
+	}
+
+	function finishShotRename(shot, index, value) {
+		const name = value.trim();
+		if (name && name !== shot.name) handlers.current.onShotRename?.(index, name);
+		setRenamingShotId(null);
+	}
+
 	function frameFromEvent(e) {
 		const el = rulerRef.current;
 		if (!el) return frame;
@@ -438,17 +746,20 @@ export default function Timeline({
 		rulerRef.current?.releasePointerCapture?.(e.pointerId);
 	}
 
+	const cameraBlockIdx = selectedCameraBlockIdx === undefined ? localCameraBlockIdx : selectedCameraBlockIdx;
+	const selectedCameraShot = cameraBlockIdx == null ? null : shots[cameraBlockIdx] ?? null;
+
 	return (
-		<section className={"timeline" + (expanded ? "" : " collapsed")} aria-label="Animation timeline">
+		<section className={"timeline" + (expanded ? "" : " collapsed")} aria-label={ko("Animation timeline", "애니메이션 타임라인")}>
 			{expanded ? (
 				<>
 					<div className="tl-head">
-						<div className="tl-transport" aria-label="Playback transport">
+						<div className="tl-transport" aria-label={ko("Playback transport", "재생 컨트롤")}>
 							<button
 								type="button"
 								className="tl-btn"
-								aria-label="Previous frame"
-								title="Previous frame (k)"
+								aria-label={ko("Previous frame", "이전 프레임")}
+								title={ko("Previous frame (k)", "이전 프레임 (k)")}
 								onClick={() => handlers.current.onStep?.(-1)}
 							>
 								‹
@@ -456,8 +767,8 @@ export default function Timeline({
 							<button
 								type="button"
 								className={"tl-btn play" + (playing ? " on" : "")}
-								aria-label={playing ? "Pause playback" : "Play playback"}
-								title="Play / pause (Space)"
+								aria-label={playing ? ko("Pause playback", "재생 일시중지") : ko("Play playback", "재생 시작")}
+								title={ko("Play / pause (Space)", "재생/일시중지 (Space)")}
 								onClick={() => handlers.current.onPlayToggle?.()}
 							>
 								{playing ? "❚❚" : "▶"}
@@ -465,8 +776,8 @@ export default function Timeline({
 							<button
 								type="button"
 								className="tl-btn"
-								aria-label="Next frame"
-								title="Next frame (j)"
+								aria-label={ko("Next frame", "다음 프레임")}
+								title={ko("Next frame (j)", "다음 프레임 (j)")}
 								onClick={() => handlers.current.onStep?.(1)}
 							>
 								›
@@ -478,7 +789,7 @@ export default function Timeline({
 						<button
 							type="button"
 							className={"tl-btn zoom" + (zoom !== ZOOM_DEFAULT ? " on" : "")}
-							title="Two-finger up/down over FRAME ruler to zoom — click to reset to 1×"
+							title={ko("Two-finger up/down over FRAME ruler to zoom — click to reset to 1×", "프레임 눈금 위에서 두 손가락으로 위아래 스크롤해 확대/축소 · 클릭하면 1×로 초기화")}
 							onClick={resetZoom}
 						>
 							{zoom.toFixed(2)}×
@@ -487,39 +798,45 @@ export default function Timeline({
 							type="button"
 							className={"tl-btn wp" + (waypointMode ? " on" : "")}
 							aria-pressed={waypointMode}
-							title="Enable or disable 2D Root path constraints (P)"
+							title={ko("Enable or disable 2D Root path constraints (P)", "2D 루트 경로 제약 켜기/끄기 (P)")}
 							onClick={() => handlers.current.onWaypointToggle?.()}
 						>
-							Waypoint {waypointMode ? "on" : "off"}
+							{isKo ? `웨이포인트 ${waypointMode ? "켜짐" : "꺼짐"}` : `Waypoint ${waypointMode ? "on" : "off"}`}
 						</button>
 						<button
 							type="button"
 							className={"tl-btn ik" + (ikMode ? " on" : "")}
 							aria-pressed={ikMode}
 							disabled={ikDisabled && !ikMode}
-							title={ikDisabled && !ikMode ? "IK needs Subject 1's rig loaded" : "IK mode — drag a wrist / ankle handle; keys land on the Full-Body lane. With a motion loaded, keys correct it layer-style"}
+							title={ikDisabled && !ikMode ? ko("IK needs Subject 1's rig loaded", "IK를 사용하려면 인물 1의 리그를 먼저 불러와야 해요") : ko("IK mode — drag a wrist / ankle handle; keys land on the Full-Body lane. With a motion loaded, keys correct it layer-style", "IK 모드 — 손목이나 발목 핸들을 드래그하세요. 키는 전신 레인에 찍히며, 모션을 불러온 뒤에는 레이어 방식으로 보정합니다")}
 							onClick={() => handlers.current.onIkToggle?.()}
 						>
-							IK {ikMode ? "on" : "off"}
+							{isKo ? `IK ${ikMode ? "켜짐" : "꺼짐"}` : `IK ${ikMode ? "on" : "off"}`}
 						</button>
 						<button
 							type="button"
 							className={"tl-btn ik snap" + (footSnap ? " on" : "")}
 							aria-pressed={footSnap}
-							title="Foot snap — keep the feet planted while you move the body (hips); the knees bend instead of the feet sinking through the floor"
+							title={ko("Foot snap — keep the feet planted while you move the body (hips); the knees bend instead of the feet sinking through the floor", "발 스냅 — 몸(엉덩이)을 움직여도 발을 바닥에 고정합니다. 발이 바닥으로 가라앉는 대신 무릎이 구부러집니다")}
 							onClick={() => handlers.current.onFootSnapToggle?.()}
 						>
-							Snap {footSnap ? "on" : "off"}
+							{isKo ? `스냅 ${footSnap ? "켜짐" : "꺼짐"}` : `Snap ${footSnap ? "on" : "off"}`}
 						</button>
 						{waypointMode && (
 							<span className={"tl-wp-hint" + (waypointFrames.length < 2 || pathSpeed?.warn ? " warn" : "")}>
 								{waypointFrames.length < 2
-									? "Click the set floor in the Shot view to drop waypoints"
-									: `${waypointFrames.length} root waypoints` +
-										(pathSpeed
-											? ` · ${pathSpeed.min.toFixed(1)}–${pathSpeed.max.toFixed(1)} m/s${pathSpeed.warn ? " — outside the natural 0.5–3 m/s locomotion band" : ""}`
-											: "") +
-										" · click the set floor to add more"}
+									? ko("Click the set floor in the Shot view to drop waypoints", "샷 뷰의 세트 바닥을 클릭해 웨이포인트를 놓으세요")
+									: isKo
+										? `루트 웨이포인트 ${waypointFrames.length}개` +
+											(pathSpeed
+												? ` · ${pathSpeed.min.toFixed(1)}–${pathSpeed.max.toFixed(1)} m/s${pathSpeed.warn ? " — 자연스러운 이동 속도 0.5–3 m/s 범위를 벗어남" : ""}`
+												: "") +
+											" · 세트 바닥을 클릭해 더 추가"
+										: `${waypointFrames.length} root waypoints` +
+											(pathSpeed
+												? ` · ${pathSpeed.min.toFixed(1)}–${pathSpeed.max.toFixed(1)} m/s${pathSpeed.warn ? " — outside the natural 0.5–3 m/s locomotion band" : ""}`
+												: "") +
+											" · click the set floor to add more"}
 							</span>
 						)}
 						{badge && <span className={"tl-badge " + badge.kind}>{badge.label}</span>}
@@ -527,33 +844,45 @@ export default function Timeline({
 							<button
 								type="button"
 								className="tl-btn clear"
-								title="Clear motion and restore the blocking pose"
+								title={ko("Clear motion and restore the blocking pose", "모션을 지우고 블로킹 포즈로 되돌리기")}
 								onClick={onClearMotion}
 							>
-								✕ Motion
+								✕ {ko("Motion", "모션")}
 							</button>
 						)}
 						<button
 							type="button"
 							className="tl-toggle"
 							aria-expanded="true"
-							aria-label="Collapse timeline"
-							title="Collapse timeline"
+							aria-label={ko("Collapse timeline", "타임라인 접기")}
+							title={ko("Collapse timeline", "타임라인 접기")}
 							onClick={() => setExpanded(false)}
 						>
 							▾
 						</button>
 					</div>
+					{selectedCameraShot && (
+						<CameraBlockEditor
+							shot={selectedCameraShot}
+							blocked={waypointMode}
+							previewing={playing}
+							railDraw={railDraw}
+							railLength={cameraRailLength}
+							onChange={(patch) => handlers.current.onCameraBlockChange?.(patch)}
+							onPreview={() => handlers.current.onCameraPreview?.(cameraBlockIdx)}
+							onRailDrawToggle={() => handlers.current.onCameraRailDrawToggle?.()}
+						/>
+					)}
 
 					<div className="tl-body" ref={bodyRef}>
 						<div className="tl-surface" style={{ "--tl-zoom": surfaceZoom }}>
 						<div className="tl-ruler">
-							<span className="tl-ruler-label">Frame</span>
+							<span className="tl-ruler-label">{ko("Frame", "프레임")}</span>
 							<div
 								className="tl-ruler-lane"
 								ref={rulerRef}
 								role="slider"
-								aria-label="Scrub timeline"
+								aria-label={ko("Scrub timeline", "타임라인 탐색")}
 								aria-valuemin={0}
 								aria-valuemax={frameCount - 1}
 								aria-valuenow={frame}
@@ -585,15 +914,26 @@ export default function Timeline({
 						</div>
 
 						{TRACKS.map((name) => (
-							<div className={"tl-track" + (name === "Prompts" ? " prompts" : "") + (name === IK_LANE ? " ik" : "")} key={name}>
+							<div className={"tl-track" + (name === "Prompts" ? " prompts" : "") + (name === IK_LANE ? " ik" : "") + (name === SHOTS_LANE ? " shots" : "")} key={name}>
 								<span className="tl-track-label">
-									{name}
-									{name === "Prompts" && <button className="tl-track-add" type="button" title="Add 2 second prompt clip" onClick={() => handlers.current.onPromptAdd?.(frame)}>+</button>}
+									{TRACK_LABELS_KO[name]}
+									{name === "Prompts" && <button className="tl-track-add" type="button" title={ko("Add 2 second prompt clip", "2초 프롬프트 클립 추가")} onClick={() => handlers.current.onPromptAdd?.(frame)}>+</button>}
+									{name === SHOTS_LANE && (
+										<button
+											type="button"
+											className="tl-track-add cut"
+											disabled={shotCutDisabled}
+											title={ko("Add a 2 second shot without changing existing shots", "기존 샷을 바꾸지 않고 2초 샷 추가")}
+											onClick={() => handlers.current.onShotCut?.()}
+										>
+											{ko("+ Add shot", "+ 샷 추가")}
+										</button>
+									)}
 									{name === IK_LANE && ikMode && (
 										<button
 											className="tl-track-add ik"
 											type="button"
-											title={`Key the current pose at frame ${frame}`}
+											title={isKo ? `현재 포즈를 ${frame}프레임에 키로 저장` : `Key the current pose at frame ${frame}`}
 											onClick={() => handlers.current.onIkKeyframeAdd?.()}
 										>
 											+
@@ -601,32 +941,151 @@ export default function Timeline({
 									)}
 								</span>
 								<div
-									className={"tl-lane" + (name === "2D Root" ? " root" : "") + (name === CAMERA_LANE ? " cam" : "")}
+									className={"tl-lane" + (name === "2D Root" ? " root" : "") + (name === SHOTS_LANE ? " shots" : "")}
 									onPointerDown={
 										name === "2D Root"
 											? (e) => {
 												if (e.button !== 0 || e.target !== e.currentTarget) return;
 												handlers.current.onRootKeyframeAdd?.(rootFrameFromEvent(e));
 											}
-											: name === CAMERA_LANE
-												? (e) => {
-													if (e.button !== 0 || e.target !== e.currentTarget) return;
-													handlers.current.onCameraKeyframeAdd?.(rootFrameFromEvent(e));
-												}
-												: undefined
+											: undefined
 									}
-									title={name === CAMERA_LANE ? "Click to key the current camera framing at this frame" : undefined}
 								>
 									{gridFrames.map((f) => (
 										<i key={f} className="tl-grid" style={{ "--tl-f": framePct(f, displayFrameCount) }} aria-hidden="true" />
 									))}
+									{name === SHOTS_LANE && shots.length === 0 && (
+										<p className="tl-shot-empty">{ko("No shots — free camera owns the timeline. Add one at the playhead.", "샷 없음 — 자유 카메라 구간입니다. 재생 헤드에 샷을 추가하세요.")}</p>
+									)}
+									{name === SHOTS_LANE && shots.map((shot, index) => {
+										const geometry = shotBlockGeometry(shots, index, frameCount, displayFrameCount);
+										if (!geometry) return null;
+										const mode = cameraBlockMode(shot);
+										const follow = cameraBlockFollow(shot);
+										const keyCount = shot.cameraKeys?.length ?? 0;
+										const lastFrame = shot.endFrame;
+										const durationS = (lastFrame - shot.startFrame + 1) / Math.max(1, fps);
+										const stateLabel = mode === "keys" && keyCount === 0 ? "FREE" : "LOCKED";
+										const modeLabel = mode === "rail" ? "RAIL" : mode === "follow" ? "FOLLOW" : `KEYS ${keyCount}`;
+										const detailLabel = mode === "rail"
+											? `${follow.railStartMode === "head" ? "HEAD" : "NEAREST"} · ${Number(follow.maxDollySpeed).toFixed(1)} m/s · PITCH ${signedDegrees(follow.pitchOffsetDeg)}`
+											: mode === "follow"
+												? `${Number(follow.distance).toFixed(1)} m · PITCH ${signedDegrees(follow.pitchOffsetDeg)}`
+												: null;
+										const durationFrames = lastFrame - shot.startFrame + 1;
+										const railAvailable = Array.isArray(shot.camera?.cameraRail) && shot.camera.cameraRail.length >= 2 && durationFrames >= 10;
+										const storedRail = shot.camera?.railFollow;
+										const railRange = railAvailable
+											? storedRail?.mode === "range"
+												? { start: Math.max(0, Math.min(durationFrames - 1, storedRail.startFrame)), end: Math.max(0, Math.min(durationFrames - 1, storedRail.endFrame)) }
+												: { start: 0, end: durationFrames - 1 }
+											: null;
+										const railOff = storedRail?.mode === "off" || mode !== "rail";
+										const localProgress = frame - shot.startFrame;
+										const railProgress = !railOff && railRange && localProgress >= railRange.start && localProgress <= railRange.end
+											? (localProgress - railRange.start) / Math.max(1, railRange.end - railRange.start)
+											: null;
+										return (
+											<div
+												key={shot.id}
+												className={"tl-shot-block" + (index === cameraBlockIdx ? " selected" : "") + (index === activeShotIdx ? " active" : "") + (movingShotId === shot.id ? " moving" : "")}
+												style={{ "--tl-f-start": geometry.startPct, "--tl-f-end": geometry.endPct }}
+												title={isKo ? `${shot.name} · ${shot.startFrame}–${lastFrame}프레임 · 드래그해 순서 이동, 양끝으로 컷 조절, 아래 빈 줄을 클릭해 카메라 키 추가` : `${shot.name} · frames ${shot.startFrame}–${lastFrame} · drag to reorder, trim cuts at either edge, click the empty lower strip to add a camera key`}
+												onPointerDown={(e) => beginShotMove(e, shot, index)}
+												onPointerMove={moveShot}
+												onPointerUp={endShotMove}
+												onPointerCancel={endShotMove}
+												onClick={() => selectUnifiedShotBlock(index)}
+												onDoubleClick={(e) => { e.stopPropagation(); setRenamingShotId(shot.id); }}
+											>
+												<button
+														type="button"
+														className="tl-shot-edge start"
+														aria-label={ko(`Resize start of ${shot.name}`, `${shot.name} 시작점 조절`)}
+														onPointerDown={(e) => beginShotBoundaryDrag(e, index, "start")}
+														onPointerMove={moveShotBoundary}
+														onPointerUp={endShotBoundaryDrag}
+														onPointerCancel={endShotBoundaryDrag}
+													>
+														⋮
+													</button>
+												<button
+													type="button"
+													className="tl-shot-edge end"
+													aria-label={ko(`Resize end of ${shot.name}`, `${shot.name} 끝 길이 조절`)}
+													onPointerDown={(e) => beginShotBoundaryDrag(e, index, "end")}
+													onPointerMove={moveShotBoundary}
+													onPointerUp={endShotBoundaryDrag}
+													onPointerCancel={endShotBoundaryDrag}
+												>
+													⋮
+												</button>
+												{renamingShotId === shot.id ? (
+													<input
+														className="tl-shot-name-input"
+														defaultValue={shot.name}
+														autoFocus
+														onClick={(e) => e.stopPropagation()}
+														onBlur={(e) => finishShotRename(shot, index, e.target.value)}
+														onKeyDown={(e) => {
+															if (e.key === "Enter") e.currentTarget.blur();
+															if (e.key === "Escape") setRenamingShotId(null);
+														}}
+													/>
+												) : (
+													<span className="tl-shot-label">
+														<b>{shot.name}</b>
+														<small>{shot.startFrame}–{lastFrame} · {durationS.toFixed(1)}{ko("s", "초")}</small>
+													</span>
+												)}
+											<span className="tl-shot-actions">
+												<button type="button" title={ko("Split at the playhead", "재생 헤드에서 분할")} disabled={frame <= shot.startFrame || frame > shot.endFrame} onClick={(e) => { e.stopPropagation(); handlers.current.onShotSplit?.(index); }}>{ko("Split", "분할")}</button>
+												<button type="button" title={ko("Duplicate shot", "샷 복제")} onClick={(e) => { e.stopPropagation(); handlers.current.onShotDuplicate?.(index); }}>{ko("Duplicate", "복제")}</button>
+													<button type="button" title={ko("Delete shot and leave free-camera time", "샷을 지우고 자유 카메라 구간으로 비우기")} onClick={(e) => { e.stopPropagation(); handlers.current.onShotRemove?.(index); }}>{ko("Delete", "삭제")}</button>
+												</span>
+												<span className="tl-shot-camera-summary">
+													<span className="tl-camera-block-state">{stateLabel}</span>
+													<b>{modeLabel}</b>
+													{detailLabel && <small>{detailLabel}</small>}
+												</span>
+												{railRange && (
+													<div
+														role="group"
+														aria-label={ko(`Rail follow range for ${shot.name}`, `${shot.name} 레일 팔로우 구간`)}
+														className={"tl-rail" + (index === cameraBlockIdx ? " selected" : "") + (railOff ? " off" : "")}
+														style={{ "--tl-f-start": railRange.start / Math.max(1, durationFrames - 1), "--tl-f-end": railRange.end / Math.max(1, durationFrames - 1) }}
+														onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); handlers.current.onRailRemove?.(index); }}
+													>
+														<button type="button" tabIndex={0} data-rail-edge="start" className="tl-rail-handle start" aria-label={ko("Resize rail follow start", "레일 팔로우 시작점 조절")} onKeyDown={(e) => onRailKeyDown(e, index, railRange, durationFrames)} onPointerDown={(e) => beginRailResize(e, index, "start", railRange, durationFrames)} onPointerMove={moveRailResize} onPointerUp={endRailResize} onPointerCancel={endRailResize} />
+														<button type="button" tabIndex={0} data-rail-edge="body" className="tl-rail-body" aria-label={ko("Rail follow — drag to move, right-click to remove", "레일 팔로우 — 드래그로 이동, 오른쪽 클릭으로 삭제")} onKeyDown={(e) => onRailKeyDown(e, index, railRange, durationFrames)} onPointerDown={(e) => beginRailMove(e, index, railRange, durationFrames)} onPointerMove={moveRail} onPointerUp={endRailMove} onPointerCancel={endRailMove} onClick={(e) => { e.stopPropagation(); if (!railSuppressClickRef.current) handlers.current.onRailSelect?.(index); }}>
+															<span className="tl-rail-label">{ko("Rail Follow", "레일 팔로우")}</span>
+															{railOff && <span className="tl-rail-off">{ko("OFF", "꺼짐")}</span>}
+														</button>
+														<button type="button" tabIndex={0} data-rail-edge="end" className="tl-rail-handle end" aria-label={ko("Resize rail follow end", "레일 팔로우 끝점 조절")} onKeyDown={(e) => onRailKeyDown(e, index, railRange, durationFrames)} onPointerDown={(e) => beginRailResize(e, index, "end", railRange, durationFrames)} onPointerMove={moveRailResize} onPointerUp={endRailResize} onPointerCancel={endRailResize} />
+														{railProgress != null && <i className="tl-rail-progress" style={{ "--tl-rail-p": railProgress }} aria-hidden="true" />}
+													</div>
+												)}
+												{/* The card body owns selection/reorder; this narrow empty strip
+												    owns keying. Keeping it a button excludes it from beginShotMove,
+												    so one gesture cannot both reorder a shot and author a key. */}
+												<button
+													type="button"
+													className="tl-shot-key-surface"
+													aria-label={ko(`Add camera key in ${shot.name}`, `${shot.name}에 카메라 키 추가`)}
+													title={ko("Click at a frame to store the current camera framing", "프레임 위치를 클릭해 현재 카메라 프레이밍을 저장합니다")}
+													onClick={(event) => addCameraKeyFromBlock(event, index)}
+													onDoubleClick={(event) => event.stopPropagation()}
+												/>
+											</div>
+										);
+									})}
 									{name === "Prompts" && promptClips.map((clip) => {
 										const duration = ((clip.endFrame - clip.startFrame) / Math.max(1, fps)).toFixed(1);
 										return (
-											<div key={clip.id} className={"tl-chip" + (selectedPromptId === clip.id ? " selected" : "") + (movingPromptId === clip.id ? " moving" : "")} style={{ "--tl-f-start": clipPct(clip.startFrame), "--tl-f-end": clipPct(clip.endFrame) }} title="Drag to move · edge handles resize · right-click removes" onPointerDown={(e) => beginPromptMove(e, clip)} onPointerMove={movePrompt} onPointerUp={endPromptMove} onPointerCancel={endPromptMove} onClick={blockPromptClick} onContextMenu={(e) => { e.preventDefault(); handlers.current.onPromptRemove?.(clip.id); }}>
-												<button className="tl-chip-handle start" type="button" aria-label="Resize prompt start" onPointerDown={(e) => beginPromptResize(e, clip, "start")} onPointerMove={movePromptResize} onPointerUp={endPromptResize} onPointerCancel={endPromptResize} />
-												<input className="tl-chip-input" value={clip.text} placeholder={`${duration}s · motion prompt`} maxLength={500} onChange={(e) => handlers.current.onPromptChange?.(clip.id, e.target.value)} />
-												<button className="tl-chip-handle end" type="button" aria-label="Resize prompt end" onPointerDown={(e) => beginPromptResize(e, clip, "end")} onPointerMove={movePromptResize} onPointerUp={endPromptResize} onPointerCancel={endPromptResize} />
+											<div key={clip.id} className={"tl-chip" + (selectedPromptId === clip.id ? " selected" : "") + (movingPromptId === clip.id ? " moving" : "")} style={{ "--tl-f-start": clipPct(clip.startFrame), "--tl-f-end": clipPct(clip.endFrame) }} title={ko("Drag to move · edge handles resize · right-click removes", "드래그로 이동 · 가장자리 핸들로 길이 조절 · 오른쪽 클릭으로 삭제")} onPointerDown={(e) => beginPromptMove(e, clip)} onPointerMove={movePrompt} onPointerUp={endPromptMove} onPointerCancel={endPromptMove} onClick={blockPromptClick} onContextMenu={(e) => { e.preventDefault(); handlers.current.onPromptRemove?.(clip.id); }}>
+												<button className="tl-chip-handle start" type="button" aria-label={ko("Resize prompt start", "프롬프트 시작점 조절")} onPointerDown={(e) => beginPromptResize(e, clip, "start")} onPointerMove={movePromptResize} onPointerUp={endPromptResize} onPointerCancel={endPromptResize} />
+												<input className="tl-chip-input" value={clip.text} placeholder={isKo ? `${duration}초 · 모션 프롬프트` : `${duration}s · motion prompt`} maxLength={500} onChange={(e) => handlers.current.onPromptChange?.(clip.id, e.target.value)} />
+												<button className="tl-chip-handle end" type="button" aria-label={ko("Resize prompt end", "프롬프트 끝점 조절")} onPointerDown={(e) => beginPromptResize(e, clip, "end")} onPointerMove={movePromptResize} onPointerUp={endPromptResize} onPointerCancel={endPromptResize} />
 											</div>
 										);
 									})}
@@ -636,7 +1095,7 @@ export default function Timeline({
 												key={f}
 												className="tl-marker ik"
 												style={{ "--tl-f": framePct(f, displayFrameCount) }}
-												title={`Full-body IK key at frame ${f} — click to jump, right-click to remove`}
+												title={isKo ? `${f}프레임의 전신 IK 키 — 클릭해 이동, 오른쪽 클릭으로 삭제` : `Full-body IK key at frame ${f} — click to jump, right-click to remove`}
 												onPointerDown={(e) => {
 													if (e.button !== 0) return;
 													e.stopPropagation();
@@ -655,7 +1114,7 @@ export default function Timeline({
 												key={f}
 												className={"tl-marker wp" + (f === pendingWaypointFrame ? " pending" : "")}
 												style={{ "--tl-f": framePct(f, displayFrameCount) }}
-												title={`Root waypoint at frame ${f} — click to select, right-click to remove; drag marker ${waypointFrames.indexOf(f) + 1} in Top-View to move`}
+												title={isKo ? `${f}프레임의 루트 웨이포인트 — 클릭해 선택, 오른쪽 클릭으로 삭제. 탑뷰에서 ${waypointFrames.indexOf(f) + 1}번 마커를 드래그해 이동` : `Root waypoint at frame ${f} — click to select, right-click to remove; drag marker ${waypointFrames.indexOf(f) + 1} in Top-View to move`}
 												onPointerDown={(e) => {
 													// Select only on the primary button — a right click
 													// must reach contextmenu so it removes without scrubbing.
@@ -670,24 +1129,24 @@ export default function Timeline({
 												}}
 											/>
 										))}
-									{name === CAMERA_LANE && cameraKeyFrames.map((f) => (
+									{name === SHOTS_LANE && shots.flatMap((shot, index) => (shot.cameraKeys ?? []).map((key) => (
 										<span
-											key={f}
+											key={`${shot.id}:${key.frame}`}
 											className="tl-marker cam"
-											style={{ "--tl-f": framePct(f, displayFrameCount) }}
-											title={`Camera key at frame ${f} — click to jump, drag to re-time, right-click to remove`}
-											onPointerDown={(e) => beginCameraKeyDrag(e, f)}
+											style={{ "--tl-f": framePct(key.frame, displayFrameCount) }}
+											title={isKo ? `${key.frame}프레임의 카메라 키 — 클릭해 이동, 드래그로 시간 변경, 오른쪽 클릭으로 삭제` : `Camera key at frame ${key.frame} — click to jump, drag to re-time, right-click to remove`}
+											onPointerDown={(e) => beginCameraKeyDrag(e, key.frame, index)}
 											onPointerMove={moveCameraKeyDrag}
 											onPointerUp={endCameraKeyDrag}
 											onPointerCancel={endCameraKeyDrag}
-											onClick={(e) => onCameraKeyClick(e, f)}
+											onClick={(e) => onCameraKeyClick(e, key.frame, index)}
 											onContextMenu={(e) => {
 												e.preventDefault();
 												e.stopPropagation();
-												handlers.current.onCameraKeyframeRemove?.(f);
+												handlers.current.onCameraKeyframeRemove?.(key.frame, index);
 											}}
 										/>
-									))}
+									)))}
 								</div>
 							</div>
 						))}
@@ -702,16 +1161,18 @@ export default function Timeline({
 					{waypointMode && (
 						<span className={"tl-wp-hint" + (waypointFrames.length < 2 ? " warn" : "")}>
 							{waypointFrames.length < 2
-								? "Click the set floor in the Shot view to add waypoints"
-								: `${waypointFrames.length} root waypoints · click the set floor to add more`}
+								? ko("Click the set floor in the Shot view to add waypoints", "샷 뷰의 세트 바닥을 클릭해 웨이포인트를 추가하세요")
+								: isKo
+									? `루트 웨이포인트 ${waypointFrames.length}개 · 세트 바닥을 클릭해 더 추가`
+									: `${waypointFrames.length} root waypoints · click the set floor to add more`}
 						</span>
 					)}
 					<button
 						type="button"
 						className="tl-toggle"
 						aria-expanded="false"
-						aria-label="Expand timeline"
-						title="Expand timeline"
+						aria-label={ko("Expand timeline", "타임라인 펼치기")}
+						title={ko("Expand timeline", "타임라인 펼치기")}
 						onClick={() => setExpanded(true)}
 					>
 						▸