cozyclay 1.9.0 → 2.0.0

package/src/panels/motion.css

@@ -0,0 +1,197 @@
+/* v2 Motion Details (G6): prompt blocks, line editing, Motion › Advanced and
+   the Takes section. The generate actions live in the top bar (R1). Rooted like details.css so these rules beat
+   the legacy inspector material without editing src/styles.css. */
+
+/* The selected block's range, a read-only value box in the Field grid. */
+.v2-details-section.v2-details-section .motion-block-range {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	height: var(--h-row, 24px);
+	padding: 0 var(--sp-1, 8px);
+	border-radius: var(--r-1, 4px);
+	background: var(--field, #0f0f11);
+	color: var(--text-1, #e4e4e7);
+	font-family: var(--mono, 'JetBrains Mono');
+	font-size: var(--details-mono-size, 11px);
+	font-variant-numeric: tabular-nums;
+}
+
+/* A full-width button that is a Field's control sits on the label's row. */
+/* biome-ignore lint/style/noDescendingSpecificity: the repeated region root is intentional to beat legacy inspector rules */
+.v2-details-section.v2-details-section .field > .btn.full {
+	margin-top: 0;
+}
+
+/* Readiness sits inline under the Prompt Blocks controls in the same quiet hint voice. */
+.v2-details-section.v2-details-section .motion-readiness {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--sp-1, 8px);
+	min-height: var(--h-row, 24px);
+	margin: var(--details-gap, 4px) 0 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--text-2, #9b9ba1);
+	font-size: var(--details-secondary-size, 11px);
+}
+
+/* biome-ignore lint/style/noDescendingSpecificity: the repeated region root is intentional to beat legacy inspector rules */
+.v2-details-section.v2-details-section .motion-readiness .btn {
+	flex: none;
+	width: auto;
+	height: var(--h-row, 24px);
+	min-height: var(--h-row, 24px);
+	line-height: var(--h-row, 24px);
+}
+
+.v2-details-section.v2-details-section .ardy-status {
+	margin: 0;
+	color: var(--text-2, #9b9ba1);
+	font-size: var(--details-secondary-size, 11px);
+}
+
+/* Motion › Advanced: a collapsed subsection with the same arrow grammar as a
+   section head, one step indented by living inside the section body. */
+.v2-details-section.v2-details-section .motion-advanced {
+	margin-top: var(--sp-1, 8px);
+	border-top: var(--details-border-width, 1px) solid var(--row-divider, #1d1d20);
+}
+
+.v2-details-section.v2-details-section .motion-advanced-head {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: var(--sp-1, 8px);
+	width: 100%;
+	height: var(--h-row, 24px);
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--text-3, #636369);
+	font-family: var(--sans, 'IBM Plex Sans');
+	font-size: var(--details-secondary-size, 11px);
+	font-weight: 500;
+	text-align: left;
+	cursor: pointer;
+}
+
+.v2-details-section.v2-details-section .motion-advanced-head:hover,
+.v2-details-section.v2-details-section .motion-advanced-head:focus-visible {
+	color: var(--text-1, #e4e4e7);
+	outline: none;
+}
+
+.v2-details-section.v2-details-section .motion-advanced-head:focus-visible {
+	box-shadow: inset 0 0 0 var(--details-focus-width, 1px) var(--select, #e8a33d);
+}
+
+.v2-details-section.v2-details-section .motion-advanced-body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--details-gap, 4px);
+}
+
+.v2-details-section.v2-details-section .motion-preserve-scale {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--sp-1, 8px);
+	padding-left: calc(var(--details-label-width, 100px) + var(--sp-1, 8px));
+	font-size: var(--details-meta-size, 10px);
+}
+
+/* Takes: one 24 px row per version. The current take wears the amber
+   selection tint, the same one the Outliner uses for a selected row. */
+.v2-details-section.v2-details-section .motion-takes {
+	display: flex;
+	flex-direction: column;
+	gap: var(--details-gap, 4px);
+}
+
+.v2-details-section.v2-details-section .motion-take-list {
+	display: grid;
+	gap: var(--details-group-gap, 2px);
+}
+
+.v2-details-section.v2-details-section .motion-take-row {
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: var(--motion-take-index-width, 28px) minmax(0, 1fr) auto;
+	align-items: center;
+	column-gap: var(--sp-1, 8px);
+	width: 100%;
+	height: var(--h-row, 24px);
+	min-height: var(--h-row, 24px);
+	margin: 0;
+	padding: 0 var(--sp-1, 8px);
+	border: 0;
+	border-radius: var(--r-1, 4px);
+	background: transparent;
+	color: var(--text-row, #c9c9ce);
+	font-family: var(--sans, 'IBM Plex Sans');
+	font-size: var(--details-secondary-size, 11px);
+	line-height: var(--h-row, 24px);
+	text-align: left;
+	cursor: pointer;
+}
+
+.v2-details-section.v2-details-section .motion-take-row:hover,
+.v2-details-section.v2-details-section .motion-take-row:focus-visible {
+	background: var(--surface-raised, #1e1e21);
+	color: var(--text-1, #e4e4e7);
+	outline: none;
+}
+
+.v2-details-section.v2-details-section .motion-take-row:focus-visible {
+	box-shadow: inset 0 0 0 var(--details-focus-width, 1px) var(--select, #e8a33d);
+}
+
+.v2-details-section.v2-details-section .motion-take-row.current {
+	background: var(--select-tint, rgba(232,163,61,.14));
+	color: var(--text-selected, #fff);
+}
+
+.v2-details-section.v2-details-section .motion-take-index {
+	color: var(--text-2, #9b9ba1);
+	font-family: var(--mono, 'JetBrains Mono');
+	font-size: var(--details-mono-size, 11px);
+	font-variant-numeric: tabular-nums;
+}
+
+.v2-details-section.v2-details-section .motion-take-row.current .motion-take-index {
+	color: var(--select, #e8a33d);
+}
+
+.v2-details-section.v2-details-section .motion-take-label {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.v2-details-section.v2-details-section .motion-take-time {
+	color: var(--text-3, #636369);
+	font-family: var(--mono, 'JetBrains Mono');
+	font-size: var(--details-meta-size, 10px);
+	font-variant-numeric: tabular-nums;
+}
+
+.v2-details-section.v2-details-section .replay-notice {
+	color: var(--select, #e8a33d);
+}
+
+/* The recipe summary is the section's footer line. */
+.v2-details-section.v2-details-section .motion-takes-footer {
+	box-sizing: border-box;
+	margin: 0;
+	padding: var(--details-gap, 4px) 0 0;
+	border-top: var(--details-border-width, 1px) solid var(--row-divider, #1d1d20);
+	color: var(--text-3, #636369);
+	font-family: var(--mono, 'JetBrains Mono');
+	font-size: var(--details-meta-size, 10px);
+	font-variant-numeric: tabular-nums;
+	line-height: var(--details-hint-line-height, 1.4);
+}

package/src/panels/pose.css

@@ -0,0 +1,39 @@
+@layer regions {
+.pose-details {
+  display: grid;
+  gap: 8px;
+  padding: 8px 12px 12px;
+  color: var(--text-1, #e4e4e7);
+}
+.pose-details .pose-section {
+  display: grid;
+  gap: 4px;
+  padding: 8px;
+  background: var(--surface-raised, #1e1e21);
+  border: 1px solid var(--row-divider, #2a2a2e);
+  border-radius: var(--r-1, 4px);
+}
+.pose-details .pose-section > h4 {
+  margin: 0;
+  color: var(--text-2, #9b9ba1);
+  font-size: 11px;
+  font-weight: 500;
+}
+.pose-details .pose-row { min-height: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
+.pose-details .pose-row + .pose-row { border-top: 1px solid var(--row-divider, #2a2a2e); }
+.pose-details .pose-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
+.pose-details .pose-preview {
+  display: grid;
+  gap: 4px;
+  padding: 8px;
+  border: 1px solid color-mix(in srgb, var(--select, #e8a33d) 65%, transparent);
+  border-radius: var(--r-1, 4px);
+}
+.pose-details .pose-preview-title { color: var(--select, #e8a33d); font-weight: 600; }
+.pose-details .pose-preview-summary { color: var(--text-2, #9b9ba1); font-size: 11px; }
+.pose-details .pose-results { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.pose-details .pose-results li { min-height: 24px; display: flex; align-items: center; color: var(--text-2, #9b9ba1); font-size: 11px; }
+.pose-details .pose-results li > .btn { width: 100%; justify-content: flex-start; text-align: left; padding: 0 4px; color: inherit; }
+.pose-details .pose-results li[data-status="tooHigh"], .pose-details .pose-results li[data-status="wall"] { color: var(--danger, #e5484d); }
+.pose-details .pose-keyhint { color: var(--text-3, #636369); font-size: 10px; }
+}

package/src/planview.jsx

@@ -18,8 +18,14 @@ const HANDLE_GRAB = 0.5;
 const CAMERA_COLOR = "#007f9e";
 const SUBJECT_ONE_COLOR = "#2457d6";
 const SUBJECT_TWO_COLOR = "#d63b55";
-const OBJECT_COLOR = "#c14f2c";
+// Props are the plan's backdrop: a pale wash, a hairline edge and a muted
+// name, so the camera, the cast and the rail are what reads first.
+const OBJECT_COLOR = "#f3f0ea";
+const PROP_EDGE_COLOR = "#a19b91";
+const PROP_LABEL_COLOR = "#8a847b";
 const SELECTED_COLOR = "#b77900";
+const CAST_RING_INNER = 0.62;
+const CAST_RING_OUTER = 0.8;
 
 /** yaw that makes the character's local +Z face the given direction */
 const yawToward = (dx, dz) => Math.atan2(dx, dz);
@@ -149,19 +155,19 @@ function Puck({ color, dragging, turning, showBody = true, handleDist = HANDLE_D
  * Short by design: full names ran into each other the moment two actors stood
  * closer than the width of the word, which in a two-shot is always.
  */
-function PlanLabel({ text, color, offset = -0.72 }) {
+function PlanLabel({ text, color, offset = -0.72, muted = false }) {
 	return (
 		<Text
 			position={[0, 0.05, offset]}
 			rotation={[-Math.PI / 2, 0, 0]}
-			fontSize={0.32}
+			fontSize={muted ? 0.26 : 0.32}
 			color={color}
 			anchorX="center"
 			anchorY="middle"
-			outlineWidth={0.045}
+			outlineWidth={muted ? 0 : 0.045}
 			outlineColor="#0e0d10"
 			outlineOpacity={0.92}
-			renderOrder={12}
+			renderOrder={muted ? 8 : 12}
 			depthOffset={-1}
 		>
 			{text}
@@ -169,36 +175,58 @@ function PlanLabel({ text, color, offset = -0.72 }) {
 	);
 }
 
+/** A ring around a character's real mesh in its role colour: the cast reads
+ * first on a busy plan without the mesh itself being covered. */
+function CastRing({ color }) {
+	return (
+		<mesh position={[0, 0.05, 0]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={11}>
+			<ringGeometry args={[CAST_RING_INNER, CAST_RING_OUTER, 40]} />
+			<meshBasicMaterial color={color} transparent opacity={0.9} depthWrite={false} depthTest={false} />
+		</mesh>
+	);
+}
+
 function SceneObjectFootprint({ object, selected, dragging, turning }) {
-	const { width, depth } = objectSize(object);
+	const { width, height, depth } = objectSize(object);
 	const objectLabel = displayObjectLabel(object.name).slice(0, 8);
 	const handleDist = depth / 2 + 0.65;
 	const rotation = (object.rot * Math.PI) / 180;
+	// An unselected prop is washed where it stands: a pale cap just above its
+	// top, depth-tested, so its own colours fade while a character beside or on
+	// it still shows through. Selection keeps the loud amber footprint.
+	const capY = (object.y ?? 0) + height + 0.02;
+	const edge = useMemo(() => {
+		const x = width / 2;
+		const z = depth / 2;
+		return [[-x, capY, -z], [x, capY, -z], [x, capY, z], [-x, capY, z], [-x, capY, -z]];
+	}, [width, depth, capY]);
 	return (
 		<group position={[object.x, 0, object.z]} rotation={[0, rotation, 0]}>
-			<mesh position={[0, 0.032, 0]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={10}>
-				<planeGeometry args={[width, depth]} />
-				{/* Auto-color mode stamps `autoColor` on displayed objects; the board
-				    agrees with the viewport so "the teal box" means the same thing in
-				    both panes. Selection still wins. */}
-				<meshBasicMaterial
-					color={selected ? SELECTED_COLOR : object.autoColor ?? OBJECT_COLOR}
-					transparent
-					opacity={selected ? 0.58 : 0.34}
-					depthWrite={false}
-					depthTest={false}
-				/>
-			</mesh>
-			<mesh position={[0, 0.04, 0]} renderOrder={11}>
-				<boxGeometry args={[width, 0.02, depth]} />
-				<meshBasicMaterial color={selected ? SELECTED_COLOR : object.autoColor ?? OBJECT_COLOR} wireframe depthTest={false} />
-			</mesh>
+			{selected ? (
+				<>
+					<mesh position={[0, 0.032, 0]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={10}>
+						<planeGeometry args={[width, depth]} />
+						<meshBasicMaterial color={SELECTED_COLOR} transparent opacity={0.58} depthWrite={false} depthTest={false} />
+					</mesh>
+					<mesh position={[0, 0.04, 0]} renderOrder={11}>
+						<boxGeometry args={[width, 0.02, depth]} />
+						<meshBasicMaterial color={SELECTED_COLOR} wireframe depthTest={false} />
+					</mesh>
+				</>
+			) : (
+				<>
+					{/* Auto-color mode stamps `autoColor` on displayed objects; the board
+					    agrees with the viewport so "the teal box" means the same thing in
+					    both panes. */}
+					<mesh position={[0, capY, 0]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={6}>
+						<planeGeometry args={[width, depth]} />
+						<meshBasicMaterial color={object.autoColor ?? OBJECT_COLOR} transparent opacity={0.72} depthWrite={false} />
+					</mesh>
+					<Line points={edge} color={PROP_EDGE_COLOR} lineWidth={1} transparent opacity={0.7} depthWrite={false} renderOrder={7} />
+				</>
+			)}
 			<group position={[0, 0, depth / 2 + 0.45]} rotation={[0, -rotation, 0]}>
-				<PlanLabel
-					text={objectLabel}
-					color={selected ? SELECTED_COLOR : OBJECT_COLOR}
-					offset={0}
-				/>
+				<PlanLabel text={objectLabel} color={selected ? SELECTED_COLOR : PROP_LABEL_COLOR} offset={0} muted={!selected} />
 			</group>
 			{selected && <Puck color={SELECTED_COLOR} showBody={false} handleDist={handleDist} dragging={dragging} turning={turning} />}
 		</group>
@@ -253,8 +281,8 @@ function SubjectMovementGuide({ track }) {
 				</mesh>
 			)}
 			{[
-				{ point: guide.start, label: ko("ARDY START", "ARDY 시작") },
-				{ point: guide.end, label: ko("ARDY END", "ARDY 끝") },
+				{ point: guide.start, label: ko("PATH START", "경로 시작") },
+				{ point: guide.end, label: ko("PATH END", "경로 끝") },
 			].map(({ point, label }) => (
 				<group key={label} position={[point.x, 0, point.z]}>
 					<mesh position={[0, 0.055, 0]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={11}>
@@ -874,7 +902,8 @@ export function PlanBoard({ hostRef, planCamRef, shotCamRef, look, fovDeg, chara
 				const color = listIndex === 0 ? SUBJECT_ONE_COLOR : SUBJECT_TWO_COLOR;
 				return (
 					<group key={entry.id} position={[entry.x, 0, entry.z]}>
-						<PlanLabel text={ko(`S${listIndex + 1}`, `인물 ${listIndex + 1}`)} color={color} />
+						<PlanLabel text={ko(`S${listIndex + 1}`, `인물 ${listIndex + 1}`)} color={color} offset={-(CAST_RING_OUTER + 0.3)} />
+						<CastRing color={color} />
 						<group rotation={[0, (entry.rot * Math.PI) / 180, 0]}>
 							{/* The real character mesh already renders in Top-View. Keep only
 							    its facing stem/handle instead of covering it with a hex puck. */}

package/src/posestudio.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
+import { Line } from "@react-three/drei";
 import * as THREE from "three";
 import { POSE_BONES, normalizeBoneName, primeBindPose } from "./poses.js";
 import { poseThumbnail, warmThumbnailModels } from "./pose-thumbs.js";
@@ -282,7 +283,7 @@ const FK_ROTATE_SPEED = 5;
  * Every drag move calls `onSolve(kind, trackId, targetWorld)`; the drag end
  * calls `onDragEnd(trackId)` so the caller can key it.
  */
-export function IkHandles({ chains, fkJoints, ikState, enabled, focus, onFocus, onSolve, onDragEnd }) {
+export function IkHandles({ chains, fkJoints, ikState, enabled, focus, onFocus, onSolve, onDragEnd, selectionOnly = false, onPartPick }) {
 	const { camera, gl, raycaster, scene } = useThree();
 	const handleRefs = useRef({}); // id -> mesh (all sphere handles)
 	const handleMetaRef = useRef(new Map()); // id -> { track, radius }
@@ -304,6 +305,8 @@ export function IkHandles({ chains, fkJoints, ikState, enabled, focus, onFocus,
 	const solveRef = useRef(onSolve);
 	const endRef = useRef(onDragEnd);
 	const focusRef = useRef(onFocus);
+	const partPickRef = useRef(onPartPick);
+	partPickRef.current = onPartPick;
 	// The pointerdown handler filters picks through the CURRENT focus: while
 	// a joint is focused, only that joint (sphere + its gizmo arrows) is
 	// interactive — unfocused handles are inert, so they can never shadow a
@@ -887,6 +890,12 @@ const CLICK_PX = 4;
 			if (kind === "body") dragRef.current.startLocalPos = fkJoints.get(track.id).bone.position.clone();
 		}
 		focusRef.current?.(track.id);
+		if (selectionOnly) {
+			partPickRef.current?.(track.id);
+			dragRef.current = null;
+			gl.domElement.style.cursor = "";
+			return;
+		}
 		gl.domElement.style.cursor = "grabbing";
 		window.addEventListener("pointermove", handlersRef.current.onMove);
 		window.addEventListener("pointerup", handlersRef.current.onUp);
@@ -911,8 +920,9 @@ const CLICK_PX = 4;
 				handleRefs.current[p.track.id]?.visible &&
 				handleRefs.current[p.track.id]?.userData.ikExposed !== false
 			);
-			if (focused) picks = picks.filter((p) => p.track.id === focused);
-			else picks = picks.filter((p) => !p.axisDir); // spheres only
+			if (focused && !selectionOnly) picks = picks.filter((p) => p.track.id === focused);
+		else picks = picks.filter((p) => !p.axisDir); // spheres only
+			if (selectionOnly) picks = picks.filter((p) => !p.axisDir);
 			if (!picks.length) {
 				if (focused) beginDrag("empty", { id: "empty" }, null, null, downXY);
 				return;
@@ -1101,6 +1111,51 @@ const CLICK_PX = 4;
 	);
 }
 
+/** A poser-only target marker for the active range pin. The target is supplied
+ * in world space; the line is rebuilt every render frame so object travel and
+ * the effector's keyed pose stay visually connected while the playhead moves. */
+export function RangePinMarker({ chains, track, target = null, enabled = false }) {
+	const markerRef = useRef(null);
+	const lineRef = useRef(null);
+	const effector = useRef(new THREE.Vector3()).current;
+	const targetVector = useRef(new THREE.Vector3()).current;
+	const markerColor = track?.endsWith("Hand") ? "#ff8a3d" : "#4dd2ff";
+
+	useFrame(() => {
+		if (!enabled || !track || !target) return;
+		const chain = chains?.get(track);
+		if (!chain || !markerRef.current || !lineRef.current) return;
+		targetVector.fromArray(target);
+		markerRef.current.position.copy(targetVector);
+		chain.bones[2].getWorldPosition(effector);
+		lineRef.current.geometry.setPositions([...effector.toArray(), ...targetVector.toArray()]);
+	});
+
+	return (
+		<group visible={enabled} renderOrder={1001}>
+			<mesh ref={(mesh) => {
+				markerRef.current = mesh;
+				if (mesh) mesh.layers.set(POSER_LAYER);
+			}}>
+				<sphereGeometry args={[0.035, 12, 8]} />
+				<meshBasicMaterial color={markerColor} transparent opacity={0.95} depthTest={false} depthWrite={false} />
+			</mesh>
+			<Line
+				ref={(line) => {
+					lineRef.current = line;
+					if (line) line.layers.set(POSER_LAYER);
+				}}
+				points={[[0, 0, 0], [0, 0, 0]]}
+				color={markerColor}
+				lineWidth={1.2}
+				transparent
+				opacity={0.72}
+				depthTest={false}
+			/>
+		</group>
+	);
+}
+
 /**
  * Pose Studio overlay panel. `poses` is the merged list (built-ins + custom)
  * the caller owns; every pose has `{ id, label, bones }` and custom poses add
@@ -1195,7 +1250,7 @@ export function PoseStudioPanel({ subject, model, poses, selectedId, onSelect, o
 			{motionActive && (
 				<p className="studio-hint" data-pose-motion-warning role="status">
 					{ikCorrection
-						? ko("IK mode is on — applying keys the pose as a full-body correction at the current frame; the motion stays.", "IK 모드가 켜져 있어요 — 적용하면 현재 프레임에 전신 보정 키로 들어가고, 모션은 그대로 유지됩니다.")
+						? ko("Pose mode is on — applying keys the pose as a full-body correction at the current frame; the motion stays.", "포즈 모드가 켜져 있어요 — 적용하면 현재 프레임에 전신 보정 키로 들어가고, 모션은 그대로 유지됩니다.")
 						: ko("A sample motion is moving the character — applying a pose clears it and returns to the blocking pose.", "현재 샘플 모션이 캐릭터를 움직이고 있어요. 포즈를 눈앞에 적용하려면 샘플 모션을 지우고 블로킹 포즈로 전환합니다.")}
 				</p>
 			)}