cozyclay 2.1.0 → 3.0.0

package/src/{ardy → motion}/timeline.jsx

@@ -1,8 +1,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { frameFromClientX, groupKeyRuns, KEY_RUN_MIN, motionTrimRange, promptMoveStartFrame, rangePinBandGeometry, shotBlockGeometry } from "./timeline-coordinates.js";
-import { motionSegmentSpeedForFrames } from "./motion-edit.js";
+import { frameFromClientX, groupKeyRuns, KEY_RUN_MIN, rangePinBandGeometry, shotBlockGeometry } from "./timeline-coordinates.js";
 import { createPlaybackClock } from "./playback-clock.js";
-import { promptResizeFrame } from "./timeline-resize.js";
+
 import { ko, isKo } from "../locale.js";
 import { isImeComposing } from "../ime.js";
 import { buildRail, craneHeightAt } from "../camera-follow.js";
@@ -10,7 +9,9 @@ import { insertPathMark, pathMarks, pathMetrics, pathProgressAt, MAX_PATH_LEAN }
 import { NumberField } from "../ui.jsx";
 import { flatTiming, timingIsFlat, envelopeDrag, insertCut, removeCut, CUT_MIN_GAP } from "../speed-envelope.js";
 import { checkShotAgainstPreset, presetById } from "../model-presets.js";
+import { TakeSegmentClips, TakeSegmentTools } from "./take-segments.jsx"; import { BeatBoard } from "./beat-board.jsx";
 import "./timeline.css";
+export { timelineTake } from "./take-segments.jsx";
 
 /**
  * ARDY Viser-style animation timeline — the live motion workspace.
@@ -43,13 +44,12 @@ const WHEEL_STEP_PX = 50;
 const MAX_WHEEL_STEPS = 3;
 
 const TRACKS = [
-	"Prompts",
 	"Full-Body",
 	"2D Root",
 	"Shots",
 ];
 const TRACK_LABELS_KO = {
-	Prompts: ko("Prompt", "프롬프트"),
+	
 	"Full-Body": ko("Body", "바디"),
 	"2D Root": ko("Root path", "루트 경로"),
 	Shots: ko("Camera Cuts", "카메라 컷"),
@@ -60,7 +60,7 @@ const TRACK_LABELS_KO = {
 const IK_LANE = "Full-Body";
 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
+// elements (camera key dots, root pins) always land on visible
 // lines. Label density adapts to zoom in 10-based steps.
 const GRID_STEP_FRAMES = 10;
 const LABEL_STEPS = [10, 20, 50, 100, 200, 500, 1000];
@@ -899,7 +899,7 @@ function CameraBlockEditor({
 					</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) })} />
+						<input type="number" min="0.2" max="40" step="0.1" value={follow.maxDollySpeed} onChange={(event) => patchFollow({ maxDollySpeed: numberValue(event) })} />
 						<small>m/s</small>
 					</label>
 					{!(mode === "rail" && crane) && (
@@ -1005,30 +1005,25 @@ export default function Timeline({
 	playing,
 	// Which cast member's animation layer these tracks edit ("S2", …).
 	trackOwner = null,
-	// Read-only previews of the OTHER cast members' layers: their prompt
-	// blocks and root pins render dimmed with an owner chip, so the whole
-	// cast's schedule is visible while only the active layer is editable.
-	ghostLayers = [], // [{ owner, promptClips: [], waypointFrames: [] }]
+	// Read-only previews of the OTHER cast members' layers: their root pins
+	// render dimmed with an owner chip, so the whole cast's schedule is
+	// visible while only the active layer is editable.
+	ghostLayers = [], // [{ owner, waypointFrames: [] }]
 	waypointMode,
 	// Which department the studio is in ("scene" | "camera" | "motion"). The
-	// motion-layer track tools — Prompts +, the Full-Body Cut, the trim and
-	// retime grips — only mean something while motion is the job, so they are
-	// not rendered anywhere else. The Root path (Waypoint) toggle stays in
-	// every mode: blocking uses it to stage where a subject walks.
+	// camera-cut tools (Cut, Draw rail, + Track) belong to Scene and Camera.
+	// The Root path (Waypoint) toggle stays in every mode: blocking uses it to
+	// stage where a subject walks.
 	workflowMode = "motion",
-	// A storyboard works in panels: it has no Prompts lane, chips or + Block.
-	previsMode = null,
 	waypoints = [],
 	pathSpeed = null, // { min, max, warn } in m/s, shown on the 2D Root label
-	badge,
-	promptClips = [],
-	selectedPromptId,
+		badge,
 	pendingWaypointFrame = null,
 	ikMode = false,
 	ikDisabled = false, // a loaded motion owns the rig
 	// The ACTIVE cast member's loaded take, drawn as a passive strip on the
 	// Full-Body lane. Frames are already on the timeline's 24 fps clock.
-	motion = null, // { frames, label } | null
+	motion = null, // { frames, label, segments, cut, speed, remove, trim, reset } (take-segments.jsx timelineTake) | null
 	ikFrames = [], // sorted full-body key frames
 	rangePins = [], // active character's inclusive pin ranges
 	previewRanges = [], // amber preview spans shown under the Body track
@@ -1052,12 +1047,7 @@ export default function Timeline({
 	onMarkerSelect,
 	onMarkerRemove,
 	onRootKeyframeAdd,
-	onPromptAdd,
-	onPromptSelect,
-	onPromptChange,
-	onPromptResize,
-	onPromptMove,
-	onPromptRemove,
+	
 	onClearMotion,
 	onIkKeyframeAdd,
 	onIkKeyframeRemove,
@@ -1102,11 +1092,7 @@ export default function Timeline({
 	onShotCut,
 	onShotSplit,
 	onShotMove,
-	onMotionTrim,
-	onMotionTrimReset,
-	onMotionCut,
-	onMotionSpeedChange,
-	onMotionSegmentRemove,
+	
 	// One undo entry per editing GESTURE. Fired once when a continuous drag
 	// (or a keyboard nudge, or a text-editing session) begins, BEFORE the
 	// first mutation lands, so App can snapshot the pre-gesture state exactly
@@ -1115,7 +1101,7 @@ export default function Timeline({
 }) {
 	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);
@@ -1132,7 +1118,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, onIkKeyframeAdd, onIkKeyframeRemove, onPinSelect, onFootSnapToggle, onBodyContactToggle, onCameraMoveSelect, onCameraKeyframeAdd, onCameraKeyframeMove, onCameraKeyframeRemove, onCameraBlockSelect, onCameraBlockChange, onCameraPreview, onCameraRailDrawToggle, onCameraRailDelete, onObjectPathDrawToggle, onObjectPathChange, onObjectPathClear, onObjectTimingGestureStart, onObjectTimingGestureEnd, onObjectMarkAdd, onObjectMarkLean, onObjectMarkScrubStart, onObjectMarkScrubEnd, onShotSelect, onShotBoundaryMove, onShotRename, onShotRemove, onShotDuplicate, onShotCut, onShotSplit, onShotMove, onMotionTrim, onMotionTrimReset, onMotionCut, onMotionSpeedChange, onMotionSegmentRemove, onEditGestureStart };
+	handlers.current = { onScrub, onAdvance, onStep, onPlayToggle, onWaypointToggle, onMarkerSelect, onMarkerRemove, onRootKeyframeAdd, onIkKeyframeAdd, onIkKeyframeRemove, onPinSelect, onFootSnapToggle, onBodyContactToggle, onCameraMoveSelect, onCameraKeyframeAdd, onCameraKeyframeMove, onCameraKeyframeRemove, onCameraBlockSelect, onCameraBlockChange, onCameraPreview, onCameraRailDrawToggle, onCameraRailDelete, onObjectPathDrawToggle, onObjectPathChange, onObjectPathClear, onObjectTimingGestureStart, onObjectTimingGestureEnd, onObjectMarkAdd, onObjectMarkLean, onObjectMarkScrubStart, onObjectMarkScrubEnd, onShotSelect, onShotBoundaryMove, onShotRename, onShotRemove, onShotDuplicate, onShotCut, onShotSplit, onShotMove, onEditGestureStart };
 
 	// Trackpad/wheel zoom over the FRAME ruler lane only. React registers
 	// onWheel as passive, so a synthetic onWheel could never preventDefault —
@@ -1284,187 +1270,13 @@ export default function Timeline({
 		pin,
 		geometry: rangePinBandGeometry(pin, frameCount, displayFrameCount),
 	})).filter((entry) => entry.geometry), [displayFrameCount, frameCount, rangePins]);
-	const moveRef = useRef(null);
-	const suppressPromptClickRef = useRef(false);
-	const resizeRef = useRef(null);
-	const camDragRef = useRef(null);
+		const camDragRef = useRef(null);
 	const camSuppressClickRef = useRef(false);
 	const shotBoundaryRef = useRef(null);
 	const shotMoveRef = useRef(null);
 	const shotSuppressClickRef = useRef(false);
 
-	function beginPromptMove(e, clip) {
-		if (e.button !== 0 || e.target.closest(".tl-chip-handle")) return;
-		const lane = e.currentTarget.closest(".tl-lane");
-		if (!lane) return;
-		const rect = lane.getBoundingClientRect();
-		moveRef.current = {
-			id: clip.id,
-			pointerId: e.pointerId,
-			startClientX: e.clientX,
-			startFrame: clip.startFrame,
-			laneWidth: rect.width,
-			displayFrameCount,
-			moving: false,
-		};
-		handlers.current.onEditGestureStart?.("prompt-move");
-		handlers.current.onPromptSelect?.(clip.id);
-	}
-
-	function movePrompt(e) {
-		const active = moveRef.current;
-		if (!active || e.pointerId !== active.pointerId) return;
-		if (!active.moving) {
-			if (Math.abs(e.clientX - active.startClientX) < 4) return;
-			active.moving = true;
-			e.currentTarget.setPointerCapture(e.pointerId);
-			setMovingPromptId(active.id);
-			document.activeElement?.blur();
-		}
-		e.preventDefault();
-		e.stopPropagation();
-		const rawStart = promptMoveStartFrame(
-			active.startFrame,
-			active.startClientX,
-			e.clientX,
-			active.laneWidth,
-			active.displayFrameCount
-		);
-		handlers.current.onPromptMove?.(active.id, rawStart);
-	}
-
-	function endPromptMove(e) {
-		const active = moveRef.current;
-		if (!active || e.pointerId !== active.pointerId) return;
-		if (active.moving) {
-			e.preventDefault();
-			e.stopPropagation();
-			suppressPromptClickRef.current = true;
-			if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
-			queueMicrotask(() => { suppressPromptClickRef.current = false; });
-		}
-		moveRef.current = null;
-		setMovingPromptId(null);
-	}
-
-	function blockPromptClick(e) {
-		if (!suppressPromptClickRef.current) return;
-		e.preventDefault();
-		e.stopPropagation();
-	}
-
-	function beginPromptResize(e, clip, edge) {
-		if (e.button !== 0) return;
-		e.preventDefault();
-		e.stopPropagation();
-		e.currentTarget.setPointerCapture?.(e.pointerId);
-		resizeRef.current = {
-			id: clip.id,
-			edge,
-			startClientX: e.clientX,
-			startFrame: edge === "start" ? clip.startFrame : clip.endFrame,
-			lastFrame: edge === "start" ? clip.startFrame : clip.endFrame,
-		};
-		handlers.current.onEditGestureStart?.("prompt-resize");
-		handlers.current.onPromptSelect?.(clip.id);
-	}
-
-	function movePromptResize(e) {
-		const active = resizeRef.current;
-		if (!active) return;
-		const nextFrame = promptResizeFrame(active.startFrame, active.startClientX, e.clientX);
-		if (nextFrame === active.lastFrame) return;
-		active.lastFrame = nextFrame;
-		handlers.current.onPromptResize?.(active.id, active.edge, nextFrame);
-	}
-
-	function endPromptResize(e) {
-		if (!resizeRef.current) return;
-		resizeRef.current = null;
-		e.currentTarget.releasePointerCapture?.(e.pointerId);
-	}
-
-	// Motion trim: frame-accurate drag of the loaded take's in/out point on
-	// the Full-Body strip. No block snapping — a cut lands on the exact frame
-	// the hand releases. The preview lives here; the CUT itself is App's.
-	const motionTrimRef = useRef(null);
-	const [trimPreview, setTrimPreview] = useState(null);
-
-	function beginMotionTrim(e, edge) {
-		if (e.button !== 0 || !motion) return;
-		e.preventDefault();
-		e.stopPropagation();
-		e.currentTarget.setPointerCapture?.(e.pointerId);
-		const rect = e.currentTarget.closest(".tl-lane")?.getBoundingClientRect();
-		if (!rect || rect.width < 2) return;
-		const max = Math.min(motion.frames, displayFrameCount) - 1;
-		// The preview always restarts from the FULL take: App composes the cut
-		// as trimOffset + start, so an end-only drag must still report start 0.
-		motionTrimRef.current = { edge, rect, max, displayFrameCount, preview: { start: 0, end: max } };
-		setTrimPreview({ start: 0, end: max });
-	}
-
-	function moveMotionTrim(e) {
-		const active = motionTrimRef.current;
-		if (!active) return;
-		// Same pixel→frame transform as every other lane, off the pointer-down
-		// geometry, so the handle stays under the cursor at any zoom.
-		const frame = Math.min(active.max, frameFromClientX(e.clientX, active.rect.left, active.rect.width, active.displayFrameCount, frameCount));
-		const next = motionTrimRange(active.edge, frame, active.preview, active.max);
-		active.preview = next;
-		setTrimPreview(next);
-	}
-
-	function endMotionTrim(e) {
-		const active = motionTrimRef.current;
-		motionTrimRef.current = null;
-		e.currentTarget.releasePointerCapture?.(e.pointerId);
-		setTrimPreview(null);
-		if (active && (active.preview.start > 0 || active.preview.end < active.max)) {
-			handlers.current.onMotionTrim?.(active.preview.start, active.preview.end);
-		}
-	}
-
-	// Segment speed by stretch: dragging a segment's right-edge grip resizes it
-	// on the strip, and the width IS the playback rate — wider is slower. The
-	// preview lives here; the retime itself is App's, committed once on release.
-	const motionSpeedRef = useRef(null);
-	const [speedPreview, setSpeedPreview] = useState(null);
-
-	function beginMotionSpeed(e, segment) {
-		if (e.button !== 0 || !motion) return;
-		e.preventDefault();
-		e.stopPropagation();
-		e.currentTarget.setPointerCapture?.(e.pointerId);
-		const rect = e.currentTarget.closest(".tl-lane")?.getBoundingClientRect();
-		if (!rect || rect.width < 2) return;
-		motionSpeedRef.current = { segment, rect, displayFrameCount, preview: null };
-	}
-
-	function moveMotionSpeed(e) {
-		const active = motionSpeedRef.current;
-		if (!active) return;
-		const pointerFrame = frameFromClientX(e.clientX, active.rect.left, active.rect.width, active.displayFrameCount, frameCount);
-		const frames = Math.max(1, Math.round(pointerFrame) - active.segment.timelineStart + 1);
-		const speed = motionSegmentSpeedForFrames(active.segment, frames);
-		const sourceFrames = active.segment.sourceEnd - active.segment.sourceStart + 1;
-		const next = { id: active.segment.id, timelineFrames: Math.max(1, Math.round(sourceFrames / speed)), speed };
-		if (active.preview?.speed === next.speed && active.preview?.timelineFrames === next.timelineFrames) return;
-		active.preview = next;
-		setSpeedPreview(next);
-	}
-
-	function endMotionSpeed(e) {
-		const active = motionSpeedRef.current;
-		motionSpeedRef.current = null;
-		e.currentTarget.releasePointerCapture?.(e.pointerId);
-		setSpeedPreview(null);
-		if (active?.preview && active.preview.speed !== active.segment.speed) {
-			handlers.current.onMotionSpeedChange?.(active.segment.id, active.preview.speed);
-		}
-	}
-
-	// Camera key dots re-time by dragging, like prompt clips move: the frame
+	// Camera key dots re-time by dragging: the frame
 	// delta comes from the pointer-down geometry so a growing timeline cannot
 	// feed back into the next pointermove.
 	function beginCameraKeyDrag(e, key, shotIndex) {
@@ -1756,53 +1568,11 @@ export default function Timeline({
 			onReset: () => commitDolly(flatTiming()),
 		}
 		: null;
-	const motionSegments = motion?.segments ?? [];
-	const selectedMotionSegment = motionSegments.find((segment) => frame >= segment.timelineStart && frame <= segment.timelineEnd) ?? motionSegments[0] ?? null;
-	const visibleMotionSegments = trimPreview
-		? [{
-			id: "motion-trim-preview",
-			timelineStart: trimPreview.start,
-			timelineEnd: trimPreview.end,
-			speed: null,
-			preview: true,
-		}]
-		: motionSegments;
-	// While a speed grip is held, the dragged segment shows its would-be width
-	// and everything after it slides by the delta — the same reflow the commit
-	// will produce, so the release is never a surprise.
-	const displayMotionSegments = (() => {
-		if (!speedPreview || trimPreview) return visibleMotionSegments;
-		let shift = 0;
-		return visibleMotionSegments.map((segment) => {
-			if (segment.id === speedPreview.id) {
-				const shown = {
-					...segment,
-					timelineStart: segment.timelineStart + shift,
-					timelineEnd: segment.timelineStart + shift + speedPreview.timelineFrames - 1,
-					previewSpeed: speedPreview.speed,
-				};
-				shift += speedPreview.timelineFrames - (segment.timelineEnd - segment.timelineStart + 1);
-				return shown;
-			}
-			return shift === 0 ? segment : { ...segment, timelineStart: segment.timelineStart + shift, timelineEnd: segment.timelineEnd + shift };
-		});
-	})();
-	// The motion-layer track tools (Prompts +, the Full-Body Cut, the trim and
-	// retime grips) edit the take, so Scene and Camera never render them.
+	// Motion and Pose own the character layer; the camera-cut tools stay out of them.
 	const motionTools = workflowMode === "motion";
-	const promptBlocksHidden = previsMode === "storyboard";
-	const tracks = promptBlocksHidden ? TRACKS.filter((name) => name !== "Prompts") : TRACKS;
+	const tracks = TRACKS;
 	const activeShotForCut = shots[activeShotIdx] ?? null;
 	const canCutShot = Boolean(activeShotForCut && frame > activeShotForCut.startFrame && frame <= activeShotForCut.endFrame);
-	// A trim or retime grip edits ONE segment: it belongs to the segment the
-	// playhead selects. The trim preview clip carries the live gesture, so it
-	// keeps its grips while the pointer is down.
-	const segmentTools = (segment) => motionTools && (segment.preview === true || selectedMotionSegment?.id === segment.id);
-	const changeSelectedMotionSpeed = (speed) => {
-		if (!selectedMotionSegment || !Number.isFinite(speed)) return;
-		handlers.current.onMotionSpeedChange?.(selectedMotionSegment.id, Math.max(0.1, Math.min(4, speed)));
-	};
-
 	return (
 		<section className={"timeline v2-sequencer" + (expanded ? "" : " collapsed") + (!shots.length ? " empty-shots" : "")} data-testid="sequencer" aria-label={ko("Animation timeline", "애니메이션 타임라인")}>
 			{expanded ? (
@@ -1842,38 +1612,8 @@ export default function Timeline({
 							</span>
 						</div>
 						<div className="tl-sequencer-actions" role="group" aria-label={ko("Sequencer actions", "시퀀서 작업")}>
-							{motionTools ? (<>
-								<button
-									type="button"
-									className="tl-seq-action cut"
-									data-testid="sequencer-cut"
-									disabled={!selectedMotionSegment || frame <= 0 || frame >= motion.frames}
-									title={ko("Cut the Body clip at the playhead", "재생 헤드에서 바디 클립 자르기")}
-									onClick={() => handlers.current.onMotionCut?.()}
-								>
-									{ko("Cut", "컷")}
-								</button>
-								{!promptBlocksHidden && <button
-									type="button"
-									className="tl-seq-action"
-									data-testid="sequencer-add-block"
-									title={ko("Add a prompt block at the playhead", "재생 헤드에 프롬프트 블록 추가")}
-									onClick={() => handlers.current.onPromptAdd?.(frame)}
-								>
-									{ko("+ Block", "+ 블록")}
-								</button>}
-							</>) : workflowMode === "pose" || ikMode ? (
-								<button
-									type="button"
-									className="tl-seq-action cut"
-									data-testid="sequencer-cut"
-									disabled={!selectedMotionSegment || frame <= 0 || frame >= (motion?.frames ?? 0)}
-									onClick={() => handlers.current.onMotionCut?.()}
-								>
-									{ko("Cut", "컷")}
-								</button>
-							) : (<>
-								<button
+							{motionTools || workflowMode === "pose" || ikMode ? null : (<>
+								{shots.length > 0 && <button
 									type="button"
 									className="tl-seq-action cut"
 									data-testid="sequencer-cut"
@@ -1882,8 +1622,8 @@ export default function Timeline({
 									onClick={() => activeShotForCut && handlers.current.onShotSplit?.(activeShotForCut.id)}
 								>
 									{ko("Cut", "컷")}
-								</button>
-								<button
+								</button>}
+								{cameraBlockIdx != null && <button
 									type="button"
 									className="tl-seq-action rail"
 									data-testid="sequencer-draw-rail"
@@ -1894,8 +1634,8 @@ export default function Timeline({
 									onClick={() => handlers.current.onCameraRailDrawToggle?.()}
 								>
 									{ko("Draw rail", "레일 그리기")}
-								</button>
-								<button
+								</button>}
+								{!shotCutDisabled && <button
 									type="button"
 									className="tl-seq-action"
 									data-testid="sequencer-add-track"
@@ -1904,7 +1644,7 @@ export default function Timeline({
 									onClick={() => handlers.current.onShotCut?.()}
 								>
 									{ko("+ Track", "+ 트랙")}
-								</button>
+								</button>}
 							</>) }
 						</div>
 						<div className="tl-head-group tl-view-tools" role="group" aria-label={ko("Timeline view tools", "타임라인 보기 도구")}>
@@ -1961,43 +1701,18 @@ export default function Timeline({
 								</>)}
 							</>)}
 						</div>
-						{(selectedMotionSegment || onClearMotion) && (
+						{onClearMotion && (
 							<div className="tl-head-group tl-motion-tools" role="group" aria-label={ko("Motion controls", "모션 컨트롤")}>
-								{selectedMotionSegment && (
-									<label className="tl-motion-speed-editor">
-										<span>{ko(`Segment ${motionSegments.indexOf(selectedMotionSegment) + 1} speed`, `구간 ${motionSegments.indexOf(selectedMotionSegment) + 1} 배율`)}</span>
-										<input
-											type="range"
-											min="0.1"
-											max="4"
-											step="0.1"
-											value={selectedMotionSegment.speed}
-											aria-label={ko("Selected Full-Body segment speed", "선택한 전신 구간 배율")}
-											onChange={(event) => changeSelectedMotionSpeed(event.currentTarget.valueAsNumber)}
-										/>
-										<input
-											type="number"
-											min="0.1"
-											max="4"
-											step="0.1"
-											value={selectedMotionSegment.speed}
-											aria-label={ko("Selected Full-Body segment speed value", "선택한 전신 구간 배율 값")}
-											onChange={(event) => changeSelectedMotionSpeed(event.currentTarget.valueAsNumber)}
-										/>
-										<small>×</small>
-									</label>
-								)}
-								{onClearMotion && (
-									<button
-										type="button"
-										className="tl-btn clear"
-										aria-label={ko("Clear loaded motion", "불러온 모션 지우기")}
-										title={ko("Clear motion and prompt blocks, then restore the blocking pose", "모션과 프롬프트 블록을 지우고 블로킹 포즈로 되돌리기")}
-										onClick={onClearMotion}
-									>
-										✕ {ko("Clear motion", "모션 지우기")}
-									</button>
-								)}
+								{motion?.segments && motionTools && <TakeSegmentTools motion={motion} frame={frame} />}
+								<button
+									type="button"
+									className="tl-btn clear"
+									aria-label={ko("Clear loaded motion", "불러온 모션 지우기")}
+									title={ko("Clear the compiled take, then restore the blocking pose", "컴파일된 테이크를 지우고 블로킹 포즈로 되돌리기")}
+									onClick={onClearMotion}
+								>
+									✕ {ko("Clear motion", "모션 지우기")}
+								</button>
 							</div>
 						)}
 						{waypointMode && (
@@ -2109,7 +1824,7 @@ export default function Timeline({
 								onMarkScrubEnd={(...args) => handlers.current.onObjectMarkScrubEnd?.(...args)}
 							/>
 						) : tracks.map((name) => (
-							<div className={"tl-track" + (name === "Prompts" ? " prompts" : "") + (name === IK_LANE ? " ik" : "") + (name === SHOTS_LANE ? " shots" : "")} data-track-id={name} key={name}>
+							<div className={"tl-track" + (name === IK_LANE ? " ik" : "") + (name === SHOTS_LANE ? " shots" : "")} data-track-id={name} key={name}>
 								<span className="tl-track-label tl-track-tree">
 									{name === IK_LANE ? (
 										<span className="tl-track-label-stack">
@@ -2124,9 +1839,9 @@ export default function Timeline({
 											<span className="tl-track-subrow indent"><span className="tl-track-chip crane" data-lane-label="Crane">{ko("Crane", "크레인")}</span></span>
 										</span>
 									) : (
-										<span className="tl-track-subrow"><span className={"tl-track-chip " + (name === "2D Root" ? "root" : "prompt")} data-lane-label={TRACK_LABELS_KO[name]}>{TRACK_LABELS_KO[name]}</span></span>
+										<span className="tl-track-subrow"><span className="tl-track-chip root" data-lane-label={TRACK_LABELS_KO[name]}>{TRACK_LABELS_KO[name]}</span></span>
 									)}
-									{trackOwner && (name === "Prompts" || name === "2D Root") && <em className="tl-track-owner">{trackOwner}</em>}
+									{trackOwner && name === "2D Root" && <em className="tl-track-owner">{trackOwner}</em>}
 									{name === "2D Root" && pathSpeed && (
 										<em
 											className={"tl-path-speed" + (pathSpeed.warn ? " warn" : "")}
@@ -2137,7 +1852,7 @@ export default function Timeline({
 												: `${pathSpeed.min.toFixed(1)}–${pathSpeed.max.toFixed(1)} m/s`}
 										</em>
 									)}
-									{motionTools && name === "Prompts" && <button className="tl-track-add" type="button" title={ko("Add a 2–4 second prompt clip — one action per block", "2–4초 프롬프트 클립 추가 — 한 블록에 한 동작")} onClick={() => handlers.current.onPromptAdd?.(frame)}>+</button>}
+									
 									{name === SHOTS_LANE && (
 										<button
 											type="button"
@@ -2159,20 +1874,7 @@ export default function Timeline({
 											+
 										</button>
 									)}
-									{/* Cutting the take addresses the selected segment, so it is
-									    offered only where that selection means something (R2). */}
-									{name === IK_LANE && motion && motionTools && selectedMotionSegment && (
-										<button
-											className="tl-track-add motion-cut"
-											type="button"
-											disabled={frame <= 0 || frame >= motion.frames}
-											title={ko("Cut the Full-Body clip at the playhead", "재생 헤드에서 전신 클립 컷")}
-											onClick={() => handlers.current.onMotionCut?.()}
-										>
-											{ko("Cut", "컷")}
-										</button>
-									)}
-								</span>
+									</span>
 								<div
 									className={"tl-lane" + (name === "2D Root" ? " root" : "") + (name === SHOTS_LANE ? " shots" : "")}
 									onPointerDown={
@@ -2373,26 +2075,6 @@ export default function Timeline({
 											</div>
 										);
 									})}
-									{name === "Prompts" && ghostLayers.map((layer) => layer.promptClips.map((clip) => (
-										<div
-											key={`${layer.owner}:${clip.id}`}
-											className="tl-chip ghost"
-											style={{ "--tl-f-start": clipPct(clip.startFrame), "--tl-f-end": clipPct(clip.endFrame) }}
-											title={`${layer.owner} · ${clip.text}`}
-										>
-											<span className="tl-chip-ghost-label">{layer.owner} · {clip.text || "…"}</span>
-										</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={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} onFocus={() => handlers.current.onEditGestureStart?.("prompt-text", clip.id)} 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>
-										);
-									})}
 									{name === IK_LANE && pinBands.map(({ pin, geometry }) => {
 						return (
 							<button
@@ -2428,60 +2110,7 @@ export default function Timeline({
 							aria-label={ko(`Pending pin range ${geometry.startFrame}–${geometry.endFrame}`, `대기 중인 고정 범위 ${geometry.startFrame}–${geometry.endFrame}`)}
 						/>;
 					})()}
-					{name === IK_LANE && displayMotionSegments.map((segment, index) => (
-										<div
-											key={segment.id}
-											className={"tl-motion-clip" + (trimPreview ? " trimming" : "") + (segment.previewSpeed !== undefined ? " retiming" : "") + (selectedMotionSegment?.id === segment.id ? " selected" : "")}
-											style={{
-												"--tl-f-start": clipPct(trimPreview ? trimPreview.start : Math.min(segment.timelineStart, displayFrameCount)),
-												"--tl-f-end": clipPct(trimPreview ? trimPreview.end + 1 : Math.min(segment.timelineEnd + 1, displayFrameCount)),
-											}}
-											title={segment.preview ? undefined : isKo
-												? `전신 구간 ${index + 1} — ${segment.speed}×. 컷은 재생 헤드에서 · 오른쪽 그립을 끌어 배속 조절 · 우클릭으로 구간 삭제`
-												: `Full-Body segment ${index + 1} — ${segment.speed}×. Cut at the playhead; drag the right grip to retime; right-click to delete`}
-											onContextMenu={segment.preview ? undefined : (e) => {
-												e.preventDefault();
-												e.stopPropagation();
-												handlers.current.onMotionSegmentRemove?.(segment.id);
-											}}
-										>
-											{index === 0 && segmentTools(segment) && <button
-												className="tl-motion-clip-handle start"
-												type="button"
-												aria-label={ko("Trim take start", "테이크 시작점 자르기")}
-												onPointerDown={(e) => beginMotionTrim(e, "start")}
-												onPointerMove={moveMotionTrim}
-												onPointerUp={endMotionTrim}
-												onPointerCancel={endMotionTrim}
-												onContextMenu={(e) => { e.preventDefault(); handlers.current.onMotionTrimReset?.(); }}
-											/>}
-											<span className="tl-motion-clip-label">
-												{segment.preview
-													? `${trimPreview.start}–${trimPreview.end} (${trimPreview.end - trimPreview.start + 1}f)`
-													: `${index + 1} · ${segment.previewSpeed ?? segment.speed}×`}
-											</span>
-											{!segment.preview && segmentTools(segment) && <button
-												className="tl-motion-clip-handle speed"
-												type="button"
-												aria-label={ko("Retime segment by stretch", "드래그로 구간 배속 조절")}
-												title={ko("Drag — wider is slower, narrower is faster", "드래그 — 늘리면 느리게, 줄이면 빠르게")}
-												onPointerDown={(e) => beginMotionSpeed(e, segment)}
-												onPointerMove={moveMotionSpeed}
-												onPointerUp={endMotionSpeed}
-												onPointerCancel={endMotionSpeed}
-											/>}
-											{index === displayMotionSegments.length - 1 && segmentTools(segment) && <button
-												className="tl-motion-clip-handle end"
-												type="button"
-												aria-label={ko("Trim take end", "테이크 끝점 자르기")}
-												onPointerDown={(e) => beginMotionTrim(e, "end")}
-												onPointerMove={moveMotionTrim}
-												onPointerUp={endMotionTrim}
-												onPointerCancel={endMotionTrim}
-												onContextMenu={(e) => { e.preventDefault(); handlers.current.onMotionTrimReset?.(); }}
-											/>}
-										</div>
-									))}
+					{name === IK_LANE && motion?.segments && <TakeSegmentClips motion={motion} frame={frame} frameCount={frameCount} displayFrameCount={displayFrameCount} clipPct={clipPct} tools={motionTools} />}{name === IK_LANE && <BeatBoard motion={motion} frame={frame} displayFrameCount={displayFrameCount} clipPct={clipPct} onJump={(f) => handlers.current.onScrub?.(f)} />}
 
 									{name === IK_LANE &&
 										ikRuns.flatMap((run) => (run.length < KEY_RUN_MIN