cozyclay 2.0.2 → 2.1.0

package/src/ardy/playback.js

@@ -314,9 +314,6 @@ export function motionBones(rig) {
 	return prepOf(rig).bones;
 }
 
-/** QA introspection: expose the cached per-rig prep (scale, offsets, chain
- * parents) so headless checks can compare app-side prep against node-side
- * expectations. Not used by the app itself. */
 /** Recover the current ARDY-space root from the live retargeted rig.
  *
  * Positional skinning writes each mapped bone as
@@ -326,7 +323,6 @@ export function motionBones(rig) {
  * unrelated reference clip. */
 export function captureArdyRoot(rig) {
 	const prep = prepOf(rig);
-	if (!prep) throw new Error("captureArdyRoot: rig is not prepared for ARDY playback");
 	const rootIndex = CSKEL27_JOINTS.indexOf("Hips");
 	const bone = prep.bones[rootIndex];
 	if (!bone) throw new Error("captureArdyRoot: mapped Hips bone is unavailable");
@@ -354,7 +350,7 @@ export function captureArdyRoot(rig) {
  *  floor-shifted the same way prepOf does, in rig units via prep.scale.
  *  Cached per (rig, boneScale array) — one take, one skeleton. */
 const scaledOffsetCache = new WeakMap();
-export function scaledOffsets(prep, boneScale) {
+function scaledOffsets(prep, boneScale) {
 	let cached = scaledOffsetCache.get(boneScale);
 	if (cached && cached.prep === prep) return cached.offsets;
 	const grown = new Array(CSKEL27_JOINTS.length);

package/src/ardy/range-pin.js

@@ -20,7 +20,7 @@ import { createIkState, ikBakeKeyframe, solveHipsTranslateToFloor, solveIk } fro
  *         | { space: "object", objectId, local: [x,y,z] } }
  */
 
-export const RANGE_PIN_TRACKS = Object.freeze(["leftHand", "rightHand", "leftFoot", "rightFoot"]);
+const RANGE_PIN_TRACKS = Object.freeze(["leftHand", "rightHand", "leftFoot", "rightFoot"]);
 const LEGS = ["leftFoot", "rightFoot"];
 const REACH_MARGIN = 0.005;
 const BODY_STEP = 0.01;
@@ -35,7 +35,7 @@ export function rangePinTracks(pin) {
 const BLEND_MAX = 240;
 const ID_MAX = 64;
 
-export class RangePinError extends Error {
+class RangePinError extends Error {
 	constructor(code, message) {
 		super(message);
 		this.name = "RangePinError";

package/src/ardy/root-drop.js

@@ -119,7 +119,6 @@ export function applySupportRise(
 			const rise = (motion.rootPos[evidenceFrame * 3 + 1] - motion.rootPos[from * 3 + 1]) * scale;
 			const slope = rise / ((evidenceFrame - from) / motion.fps);
 			if (rise < Number(minRise) || slope < Number(minSlope)) continue;
-			const feet = SUPPORT_FEET.filter((joint) => joint < joints);
 			if (!feet.length) continue;
 			const supportRect = {
 				x: Number(support.x) || 0, z: Number(support.z) || 0,

package/src/ardy/timeline.css

@@ -858,10 +858,11 @@
 /* The bar hangs above the block's top-left corner instead of inside it: a
    short cut (40 frames ~ 38px) is narrower than Split + Duplicate + Delete,
    and an in-block bar would sit on the shot's name, turning a click on the
-   name into Delete. Hover is kept because the bar is still a child. */
+   name into Delete. Keep the edges flush so the pointer can travel from the
+   block into the bar without ending :hover in a gap. */
 .v2-sequencer .tl-shot-actions {
 	top: auto;
-	bottom: calc(100% + 2px);
+	bottom: 100%;
 	left: 0;
 	right: auto;
 	background: var(--overlay, rgba(12, 12, 13, .78));
@@ -870,10 +871,17 @@
 /* The block clips its own box (overflow hidden) so the hanging bar only exists
    while it is wanted; the label clips its own text, so nothing else escapes. */
 .v2-sequencer .tl-shot-block:hover,
-.v2-sequencer .tl-shot-block:focus-within {
+.v2-sequencer .tl-shot-block:focus-within,
+.v2-sequencer .tl-shot-block.selected,
+.v2-sequencer .tl-shot-block.active {
 	overflow: visible;
 }
 
+.v2-sequencer .tl-shot-block.selected .tl-shot-actions,
+.v2-sequencer .tl-shot-block.active .tl-shot-actions {
+	display: flex;
+}
+
 .v2-sequencer .tl-shot-actions button {
 	height: var(--h-row, 24px);
 	border-radius: var(--r-1, 4px);
@@ -1167,10 +1175,17 @@
 	fill: var(--select-tint, rgba(232, 163, 61, .14));
 }
 
-.v2-sequencer .sg-cut,
-.v2-sequencer .sg-cut-diamond {
+.v2-sequencer .sg-cut {
 	stroke: var(--select, #e8a33d);
-	fill: var(--select, #e8a33d);
+}
+
+.v2-sequencer .sg-cut-pin {
+	background: var(--select, #e8a33d);
+}
+
+.v2-sequencer .sg-cut-pin.selected {
+	background: var(--select, #e8a33d);
+	box-shadow: 0 0 0 1.5px var(--surface-panel, #1a1a1c), 0 0 0 3px var(--select, #e8a33d);
 }
 
 .v2-sequencer .sg-playhead {
@@ -1212,3 +1227,166 @@
 		width: var(--tl-track-tree-width, 190px);
 	}
 }
+
+/* ------------------------------------------------- Route strip (v2) ----
+   A prop's route rows wear the sequencer's own chips and type: neutral
+   pills, the segmented "on" look for toggles, muted facts, and the select
+   colour only on the curve. The legacy green instrument stays for the
+   classic shell (styles.css). */
+.v2-sequencer .tl-track.objmo .tl-track-label {
+	gap: 6px;
+	color: var(--text-1, #e4e4e7);
+	font: 500 12px var(--sans);
+}
+.v2-sequencer .tl-track.objmo .tl-track-label .tl-subject-kind {
+	color: var(--label, #8e8e96);
+	font: 500 10px var(--sans);
+	letter-spacing: .04em;
+}
+.v2-sequencer .tl-track.objmo .tl-lane {
+	background: none;
+	border-bottom: 1px solid var(--hairline, rgba(255,255,255,.07));
+}
+.v2-sequencer .objmo-tools {
+	gap: 6px;
+	padding: 4px 10px;
+	color: var(--text-2, #6e6e73);
+	font: 400 11px var(--sans);
+}
+.v2-sequencer .objmo-tools .tl-camera-tool,
+.v2-sequencer .objmo .sg-head .tl-camera-tool {
+	height: 24px;
+	padding: 0 10px;
+	border: 0;
+	border-radius: 12px;
+	background: var(--chip-fill, rgba(255,255,255,.06));
+	color: var(--text-soft, #c9c9ce);
+	font: 500 11px var(--sans);
+}
+.v2-sequencer .objmo-tools .tl-camera-tool:hover:not(:disabled),
+.v2-sequencer .objmo .sg-head .tl-camera-tool:hover:not(:disabled) {
+	background: var(--field-fill, rgba(255,255,255,.05));
+	color: var(--text-1, #e4e4e7);
+}
+.v2-sequencer .objmo-tools .tl-camera-tool.active {
+	background: var(--seg-on, rgba(255,255,255,.14));
+	box-shadow: var(--seg-on-shadow, none);
+	color: var(--seg-on-text, #e08a55);
+}
+.v2-sequencer .objmo-tools .tl-camera-tool.danger,
+.v2-sequencer .objmo .sg-head .tl-camera-tool.danger {
+	background: none;
+	color: var(--text-3, #636369);
+}
+.v2-sequencer .objmo-tools .tl-camera-tool.danger:hover:not(:disabled),
+.v2-sequencer .objmo .sg-head .tl-camera-tool.danger:hover:not(:disabled) {
+	background: var(--chip-fill, rgba(255,255,255,.06));
+	color: var(--danger, #e5484d);
+}
+.v2-sequencer .objmo-tools .objmo-end { margin-left: auto; }
+.v2-sequencer .objmo-speed {
+	height: 24px;
+	padding: 0 10px 0 9px;
+	border: 0;
+	border-radius: 12px;
+	background: var(--chip-fill, rgba(255,255,255,.06));
+	color: var(--label, #8e8e96);
+	font: 500 11px var(--sans);
+}
+.v2-sequencer .objmo-speed input[type="range"]::-webkit-slider-runnable-track { background: var(--divider-strong, rgba(255,255,255,.18)); }
+.v2-sequencer .objmo-speed input[type="range"]::-moz-range-track { background: var(--divider-strong, rgba(255,255,255,.18)); }
+.v2-sequencer .objmo-speed input[type="range"]::-webkit-slider-thumb {
+	background: var(--seg-on, #fff);
+	box-shadow: var(--seg-on-shadow, 0 1px 2px rgba(0,0,0,.3));
+}
+.v2-sequencer .objmo-speed input[type="range"]::-moz-range-thumb {
+	background: var(--seg-on, #fff);
+	box-shadow: var(--seg-on-shadow, 0 1px 2px rgba(0,0,0,.3));
+}
+.v2-sequencer .objmo-speed input[type="range"]:focus-visible { outline-color: var(--select, #e8a33d); }
+.v2-sequencer .objmo-speed .objmo-speed-value { color: var(--text-1, #e4e4e7); }
+.v2-sequencer .objmo-lean .number-field {
+	height: 24px;
+	border: 0;
+	border-radius: 12px;
+	background: var(--chip-fill, rgba(255,255,255,.06));
+	color: var(--text-1, #e4e4e7);
+	overflow: hidden;
+}
+.v2-sequencer .objmo-lean .number-field .axis {
+	background: none;
+	color: var(--label, #8e8e96);
+	font: 500 11px var(--sans);
+}
+.v2-sequencer .objmo-lean .number-field input {
+	border: 0;
+	background: none;
+	color: var(--text-1, #e4e4e7);
+	font: 500 11px var(--sans);
+}
+.v2-sequencer .objmo-lean .number-field:focus-within { box-shadow: 0 0 0 1.5px var(--select, #e8a33d) inset; }
+.v2-sequencer .tl-path-hint {
+	color: var(--text-3, #636369);
+	font: 400 10.5px var(--sans);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.v2-sequencer .objmo .sg-head {
+	gap: 8px;
+	padding: 4px 10px 3px;
+	color: var(--label, #8e8e96);
+	font: 400 11px var(--sans);
+}
+.v2-sequencer .objmo .sg-head .sg-facts { color: var(--text-1, #e4e4e7); font-weight: 500; }
+/* The body spans the lane edge to edge: the SVG maps time across its own
+   width, so a side margin would put the curve on a different clock from the
+   ruler and the playhead above it. */
+.v2-sequencer .objmo .sg-body {
+	margin: 0 0 6px;
+	border: 0;
+	border-radius: 0;
+	background: var(--tile-fill, rgba(255,255,255,.04));
+}
+/* The sequencer's own playhead already crosses the strip. */
+.v2-sequencer .objmo .sg-playhead { display: none; }
+.v2-sequencer .objmo .sg-line { stroke: var(--select, #e8a33d); }
+.v2-sequencer .objmo .sg-fill { fill: var(--select-tint, rgba(232,163,61,.14)); }
+.v2-sequencer .objmo .sg-axis,
+.v2-sequencer .objmo .sg-average { stroke: var(--divider-strong, rgba(255,255,255,.18)); }
+.v2-sequencer .objmo .sg-outside { fill: var(--chip-fill, rgba(255,255,255,.06)); }
+.v2-sequencer .objmo .sg-scale-top,
+.v2-sequencer .objmo .sg-scale-avg,
+.v2-sequencer .objmo .sg-scale-zero { color: var(--text-3, #636369); }
+.v2-sequencer .objmo .sg-readout { background: var(--text-1, #e4e4e7); color: var(--bg, #fff); }
+
+/* The prop strip is three rows of its own — controls, dots, the speed graph —
+   not the performer's row / group / row / group grid: give the surface that
+   shape while it is loaded, and let the graph take whatever height is left
+   instead of spilling past the dock. */
+.v2-sequencer .tl-surface.prop-subject {
+	grid-template-rows:
+		var(--tl-ruler-height, 24px)
+		var(--tl-prop-row-height, 32px)
+		var(--tl-prop-row-height, 32px)
+		minmax(0, 1fr);
+}
+.v2-sequencer .tl-track.objmo {
+	height: var(--tl-prop-row-height, 32px);
+	min-height: 0;
+}
+.v2-sequencer .tl-track.objmo .tl-lane {
+	min-height: 0;
+	height: 100%;
+	overflow: hidden;
+}
+.v2-sequencer .tl-track.objmo.sg-row,
+.v2-sequencer .tl-track.objmo.sg-row .tl-lane {
+	height: 100%;
+	min-height: 0;
+}
+.v2-sequencer .tl-track.objmo.sg-row .tl-track-label { padding-top: 6px; }
+.v2-sequencer .objmo-tools { height: 100%; padding: 0 10px; flex-wrap: nowrap; overflow: hidden; }
+.v2-sequencer .objmo .sg { position: absolute; inset: 0; }
+.v2-sequencer .objmo .sg-head { padding: 3px 10px 2px; }
+.v2-sequencer .objmo .sg-body { min-height: 36px; margin: 0 0 6px; }

package/src/ardy/timeline.jsx

@@ -4,8 +4,10 @@ import { motionSegmentSpeedForFrames } from "./motion-edit.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";
-import { pathMetrics } from "../object-path.js";
+import { insertPathMark, pathMarks, pathMetrics, pathProgressAt, MAX_PATH_LEAN } from "../object-path.js";
+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 "./timeline.css";
@@ -70,8 +72,6 @@ const framePct = (f, count) => (count > 1 ? f / (count - 1) : 0);
 // number of frames divided by its clock. Keeping this conversion local makes
 // the readout honest at any loaded fps (the final frame is just shy of the
 // displayed total duration, as it is in an actual frame sequence).
-const formatTimelineSeconds = (seconds) => `${Math.max(0, Number(seconds) || 0).toFixed(2)}s`;
-
 const CAMERA_BLOCK_DEFAULTS = {
 	distance: 3,
 	height: 1.6,
@@ -317,7 +317,6 @@ const GRAPH_MIN_SCALE = 2;
 const DRAG_TRAVEL_PX = 220;
 const FINE_DRAG_FACTOR = 0.25;
 
-/** Value under the pointer for a rate-based vertical drag. */
 function dragValue(start, event, unitsPerPx) {
 	const gain = unitsPerPx * (event.shiftKey ? FINE_DRAG_FACTOR : 1);
 	return start.value + (start.clientY - event.clientY) * gain;
@@ -507,9 +506,6 @@ function SpeedGraph({
 		<div className={"sg" + (bare ? " sg-bare" : "")}>
 			{!bare && <header className="sg-head">
 				<span className="sg-facts">{facts ?? `${averageSpeed.toFixed(1)} ${speedUnit} ${ko("average", "평균")}`}</span>
-				<span className="tl-path-hint">
-					{ko("drag the curve · double-click or the button cuts · Delete removes a cut", "곡선을 끌어 조절 · 더블클릭이나 버튼으로 컷 · 컷 선택 후 Delete로 삭제")}
-				</span>
 				<button
 					type="button"
 					className="tl-camera-tool"
@@ -533,7 +529,7 @@ function SpeedGraph({
 					</button>
 				)}
 			</header>}
-			<div className="sg-body">
+			<div className="sg-body" title={ko("Drag the curve · double-click or the button cuts · Delete removes a cut", "곡선을 끌어 조절 · 더블클릭이나 버튼으로 컷 · 컷 선택 후 Delete로 삭제")}>
 				<svg
 					ref={svgRef}
 					viewBox="0 0 1 1"
@@ -550,7 +546,6 @@ function SpeedGraph({
 							<stop offset="100%" stopOpacity="0.05" />
 						</linearGradient>
 					</defs>
-					{/* axes: the floor is zero speed, the dashed line is the average */}
 					<line className="sg-axis" x1="0" y1="1" x2="1" y2="1" />
 					<line className="sg-average" x1={origin} y1={avgY} x2={origin + span} y2={avgY} />
 					{origin > 0.001 && <rect className="sg-outside" x="0" y="0" width={origin} height="1" />}
@@ -570,7 +565,6 @@ function SpeedGraph({
 						return (
 							<g key={index} className={"sg-pin" + (index === selectedCut ? " selected" : "")}>
 								<line className="sg-cut" x1={x} y1="0.06" x2={x} y2="1" />
-								<path className="sg-cut-diamond" d={`M ${x} 0.055 l 0.007 -0.045 l -0.014 0 l 0.007 0.045 z`} />
 								<line
 									className="sg-cut-pick"
 									x1={x}
@@ -587,6 +581,26 @@ function SpeedGraph({
 					})}
 					<line className="sg-playhead" x1={playheadTakeX} y1="0" x2={playheadTakeX} y2="1" />
 				</svg>
+				{/* The pin heads are HTML, not SVG: the graph's 1×1 viewBox is
+				    stretched to the lane, so a shape drawn inside it comes out as
+				    wide as the lane is long, and a stroke on it swallowed the whole
+				    graph. A positioned square keeps its size whatever the lane does. */}
+				{shown.cuts.map((cut, index) => (
+					<button
+						key={index}
+						type="button"
+						className={"sg-cut-pin" + (index === selectedCut ? " selected" : "")}
+						style={{ left: `${((origin + cut.t * span) * 100).toFixed(3)}%` }}
+						aria-pressed={index === selectedCut}
+						aria-label={ko("Cut", "컷")}
+						title={ko("Cut: click to select, Delete removes it", "컷: 클릭해 선택, Delete로 삭제")}
+						onPointerDown={(event) => {
+							event.stopPropagation();
+							event.preventDefault();
+							setSelectedCut(index === selectedCut ? null : index);
+						}}
+					/>
+				))}
 				<span className="sg-scale-top">{Math.round(yMax * averageSpeed * 10) / 10}</span>
 				<span className="sg-scale-avg" style={{ top: `${avgY * 100}%` }}>{averageSpeed.toFixed(1)}</span>
 				<span className="sg-scale-zero">0</span>
@@ -600,7 +614,6 @@ function SpeedGraph({
 	);
 }
 
-/** Frames the prop is actually travelling for, given its speed. */
 function travelSpan(path, metrics, frameCount, fps) {
 	if (!path || !metrics || metrics.length <= 0) return null;
 	const last = Math.max(1, frameCount - 1);
@@ -617,12 +630,21 @@ function travelSpan(path, metrics, frameCount, fps) {
  * row ask "whose?". The frame ruler and the transport above stay put, because
  * those belong to the take, not to any one subject.
  */
-function ObjectTravelTrack({ object, frame, frameCount, fps, pathDraw, onPathDrawToggle, onPathChange, onPathClear, onTimingGestureStart, onTimingGestureEnd }) {
+function ObjectTravelTrack({ object, frame, frameCount, fps, pathDraw, onPathDrawToggle, onPathChange, onPathClear, onTimingGestureStart, onTimingGestureEnd, markIndex = null, onMarkAdd, onMarkLean, onMarkScrubStart, onMarkScrubEnd }) {
 	const path = object?.path ?? null;
 	const metrics = useMemo(() => (path ? pathMetrics(path) : null), [path]);
 	const span = useMemo(() => travelSpan(path, metrics, frameCount, fps), [path, metrics, frameCount, fps]);
 	const patch = (change) => onPathChange?.({ ...path, ...change });
 	const seconds = span ? (span.end - span.start) / Math.max(1, fps) : 0;
+	// The dot under the playhead: where on the route the prop is this frame.
+	// Null when the route is full or the prop is standing on a dot or an end.
+	const playheadMark = useMemo(() => {
+		if (!path) return null;
+		const progress = pathProgressAt(path, frame, { frameCount, fps });
+		return progress == null ? null : insertPathMark(path, progress);
+	}, [path, frame, frameCount, fps]);
+	const marks = useMemo(() => (path ? pathMarks(path) : []), [path]);
+	const selectedMark = markIndex != null && markIndex > 0 && markIndex <= marks.length ? marks[markIndex - 1] : null;
 	return (
 		<>
 			<div className="tl-track objmo">
@@ -681,22 +703,16 @@ function ObjectTravelTrack({ object, frame, frameCount, fps, pathDraw, onPathDra
 							>
 								{ko("Loop", "반복")}
 							</button>
+							{/* Destructive, so it sits apart at the row's end and only
+							    turns red under the pointer. */}
 							<button
 								type="button"
-								className="tl-camera-tool danger"
+								className="tl-camera-tool danger objmo-end"
 								title={ko("Delete this route; the object stands still again", "경로를 지웁니다. 오브젝트는 다시 제자리에 섭니다")}
 								onClick={() => onPathClear?.()}
 							>
 								{ko("Delete path", "경로 삭제")}
 							</button>
-							{/* The two gestures nobody guesses, on the same row rather than
-							    a lane of their own — an empty track reads as broken. */}
-							<span className="tl-path-hint">
-								{ko(
-									`${metrics.length.toFixed(1)} m · ${path.points.length} points · double-click the line to add a point · Delete removes it`,
-									`${metrics.length.toFixed(1)} m · 점 ${path.points.length}개 · 선을 더블클릭하면 점 추가 · Delete로 삭제`,
-								)}
-							</span>
 						</>
 					) : (
 						<span className="tl-path-hint">
@@ -705,6 +721,59 @@ function ObjectTravelTrack({ object, frame, frameCount, fps, pathDraw, onPathDra
 					)}
 				</div>
 			</div>
+			{path && (
+				<div className="tl-track objmo objmo-dots">
+					<span className="tl-track-label">{ko("Dots", "점")}</span>
+					<div className="tl-lane objmo-tools">
+						<button
+							type="button"
+							className="tl-camera-tool"
+							data-testid="route-add-dot"
+							disabled={!playheadMark}
+							title={playheadMark
+								? ko("Add a dot where the prop is on this frame", "지금 프레임에서 소품이 있는 곳에 점을 추가합니다")
+								: ko("No room for a dot here: the route is full, or the playhead is on a dot or an end", "여기엔 점을 추가할 수 없어요: 경로가 가득 찼거나, 재생 위치가 점이나 끝에 있어요")}
+							onClick={() => playheadMark && onMarkAdd?.(playheadMark.marks[playheadMark.index - 1].t)}
+						>
+							{ko("Add dot at playhead", "현재 위치에 점 추가")}
+						</button>
+						<span className="objmo-lean" data-testid="route-lean-fields" title={selectedMark ? undefined : ko("Ends are always level; select a dot between them to lean the prop there", "양 끝은 항상 수평이에요. 사이의 점을 선택하면 그 지점에서 기울일 수 있어요")}>
+							<NumberField
+								label={ko("Bank", "기울기")}
+								title={ko("Roll about the direction of travel; positive leans onto the right side", "진행 방향을 축으로 한 기울기; 양수는 오른쪽이 내려갑니다")}
+								value={selectedMark ? selectedMark.bank : 0}
+								step={1}
+								precision={1}
+								scrubRange={MAX_PATH_LEAN}
+								disabled={!selectedMark}
+								onChange={(value, token) => onMarkLean?.("bank", value, token)}
+								onScrubStart={onMarkScrubStart}
+								onScrubEnd={onMarkScrubEnd}
+							/>
+							<NumberField
+								label={ko("Pitch", "피치")}
+								title={ko("Nose up (positive) or down; the prop holds this angle at the dot", "코가 위(양수) 또는 아래로 향하는 각도; 이 점에서 이 각도를 유지합니다")}
+								value={selectedMark ? selectedMark.pitch : 0}
+								step={1}
+								precision={1}
+								scrubRange={MAX_PATH_LEAN}
+								disabled={!selectedMark}
+								onChange={(value, token) => onMarkLean?.("pitch", value, token)}
+								onScrubStart={onMarkScrubStart}
+								onScrubEnd={onMarkScrubEnd}
+							/>
+						</span>
+						{/* One short status, muted: the long form is in the tooltips. */}
+						<span className="tl-path-hint">
+							{selectedMark
+								? ko("Eases back to level at the next dot · E shows rings on the dot", "다음 점에서 수평으로 돌아와요 · E 키로 점에 회전 링")
+								: markIndex === 0 || (markIndex != null && markIndex === marks.length + 1)
+									? ko("Ends stay level", "양 끝은 수평")
+									: ko("Select a dot to lean the prop there", "점을 선택하면 그 지점에서 기울기")}
+						</span>
+					</div>
+				</div>
+			)}
 			{path && span && (
 				<div className="tl-track objmo sg-row">
 					<span className="tl-track-label">{ko("Speed", "속도 곡선")}</span>
@@ -947,6 +1016,8 @@ export default function Timeline({
 	// not rendered anywhere else. 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,
@@ -1017,6 +1088,11 @@ export default function Timeline({
 	onObjectPathClear,
 	onObjectTimingGestureStart,
 	onObjectTimingGestureEnd,
+	objectPathPointIndex = null,
+	onObjectMarkAdd,
+	onObjectMarkLean,
+	onObjectMarkScrubStart,
+	onObjectMarkScrubEnd,
 	onCameraRailDelete,
 	onShotSelect,
 	onShotBoundaryMove,
@@ -1056,7 +1132,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, onShotSelect, onShotBoundaryMove, onShotRename, onShotRemove, onShotDuplicate, onShotCut, onShotSplit, onShotMove, onMotionTrim, onMotionTrimReset, onMotionCut, onMotionSpeedChange, onMotionSegmentRemove, onEditGestureStart };
+	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 };
 
 	// Trackpad/wheel zoom over the FRAME ruler lane only. React registers
 	// onWheel as passive, so a synthetic onWheel could never preventDefault —
@@ -1714,6 +1790,8 @@ export default function Timeline({
 	// 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.
 	const motionTools = workflowMode === "motion";
+	const promptBlocksHidden = previsMode === "storyboard";
+	const tracks = promptBlocksHidden ? TRACKS.filter((name) => name !== "Prompts") : 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
@@ -1775,7 +1853,7 @@ export default function Timeline({
 								>
 									{ko("Cut", "컷")}
 								</button>
-								<button
+								{!promptBlocksHidden && <button
 									type="button"
 									className="tl-seq-action"
 									data-testid="sequencer-add-block"
@@ -1783,7 +1861,7 @@ export default function Timeline({
 									onClick={() => handlers.current.onPromptAdd?.(frame)}
 								>
 									{ko("+ Block", "+ 블록")}
-								</button>
+								</button>}
 							</>) : workflowMode === "pose" || ikMode ? (
 								<button
 									type="button"
@@ -1914,7 +1992,7 @@ export default function Timeline({
 										type="button"
 										className="tl-btn clear"
 										aria-label={ko("Clear loaded motion", "불러온 모션 지우기")}
-										title={ko("Clear motion and restore the blocking pose", "모션을 지우고 블로킹 포즈로 되돌리기")}
+										title={ko("Clear motion and prompt blocks, then restore the blocking pose", "모션과 프롬프트 블록을 지우고 블로킹 포즈로 되돌리기")}
 										onClick={onClearMotion}
 									>
 										✕ {ko("Clear motion", "모션 지우기")}
@@ -1970,7 +2048,7 @@ export default function Timeline({
 					)}
 
 					<div className="tl-body" ref={bodyRef}>
-						<div className={"tl-surface" + (!shots.length ? " empty-shots" : "")} style={{ "--tl-zoom": surfaceZoom }}>
+						<div className={"tl-surface" + (!shots.length ? " empty-shots" : "") + (pathObject ? " prop-subject" : "")} style={{ "--tl-zoom": surfaceZoom }}>
 						<div className="tl-ruler">
 							<span className="tl-ruler-label">{ko("Frame", "프레임")}</span>
 							<div
@@ -2024,8 +2102,13 @@ export default function Timeline({
 								onPathClear={() => handlers.current.onObjectPathClear?.()}
 								onTimingGestureStart={() => handlers.current.onObjectTimingGestureStart?.()}
 								onTimingGestureEnd={() => handlers.current.onObjectTimingGestureEnd?.()}
+								markIndex={objectPathPointIndex}
+								onMarkAdd={(t) => handlers.current.onObjectMarkAdd?.(t)}
+								onMarkLean={(key, value, token) => handlers.current.onObjectMarkLean?.(key, value, token)}
+								onMarkScrubStart={(...args) => handlers.current.onObjectMarkScrubStart?.(...args)}
+								onMarkScrubEnd={(...args) => handlers.current.onObjectMarkScrubEnd?.(...args)}
 							/>
-						) : TRACKS.map((name) => (
+						) : tracks.map((name) => (
 							<div className={"tl-track" + (name === "Prompts" ? " prompts" : "") + (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 ? (
@@ -2152,6 +2235,7 @@ export default function Timeline({
 											<div
 												key={shot.id}
 												className={"tl-shot-block" + (index === cameraBlockIdx ? " selected" : "") + (index === activeShotIdx ? " active" : "") + (movingShotId === shot.id ? " moving" : "") + (!railOff && railRange && railLengthByShot.has(shot.id) ? " has-dolly" : "")}
+												data-shot-kind={shot.kind === "still" ? "still" : undefined}
 												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)}
@@ -2191,7 +2275,7 @@ export default function Timeline({
 														onClick={(e) => e.stopPropagation()}
 														onBlur={(e) => finishShotRename(shot, index, e.target.value)}
 														onKeyDown={(e) => {
-															if (e.key === "Enter") e.currentTarget.blur();
+															if (e.key === "Enter" && !isImeComposing(e)) e.currentTarget.blur();
 															if (e.key === "Escape") setRenamingShotId(null);
 														}}
 													/>
@@ -2199,6 +2283,7 @@ export default function Timeline({
 													<span className="tl-shot-label">
 														<b>{shot.name}</b>
 														<small>{shot.startFrame}–{lastFrame} · {durationS.toFixed(1)}{ko("s", "초")}</small>
+														{shot.kind === "still" && shot.caption && <small className="tl-shot-caption" title={shot.caption}>{shot.caption}</small>}
 													</span>
 												)}
 												{modelWarnings.length > 0 && (

package/src/ardy/to-cskel27.js

@@ -140,7 +140,6 @@ export function poseToCskel27({ pose, rest, reference }) {
 		}
 	}
 
-	// Every joint CozyClay authors must be present and a unit quaternion.
 	for (const bone of COZYCLAY_BONES) {
 		if (!(bone in pose.bones)) {
 			throw new Error(`poseToCskel27: pose.bones is missing "${bone}"`);
@@ -198,7 +197,6 @@ export function poseToCskel27({ pose, rest, reference }) {
 		}
 	}
 
-	// Every emitted matrix must be a real rotation.
 	for (let index = 0; index < CSKEL27_JOINTS.length; index += 1) {
 		requireRotationMatrix(
 			local_rot_mats[index],

package/src/ardy/waypoints.js

@@ -93,7 +93,6 @@ export function densifyArdyWaypoints(waypoints, actorRotationDeg = 0, maxPoints
 		for (let i = 0; i < gaps.length; i += 1) gapSizes[i] = base[i];
 	}
 
-	// Sample frames: authored frames plus evenly spaced integer fillers.
 	const frames = [];
 	for (let i = 0; i < authored.length; i += 1) {
 		if (i > 0) {
@@ -243,8 +242,6 @@ export function poseConstraintFrame(requestedFrame, clipFrames, hasRootPath) {
 	return Math.max(0, Math.min(Math.round(requestedFrame) || 0, clipFrames - 1));
 }
 
-/* ---------------------------------------------------- path limits ------ */
-
 // What the generator can actually express, learned the hard way: waypoints
 // are inpainting observations ARDY cannot refuse, so a request outside the
 // training distribution collapses into foot-sliding instead of erroring.