cozyclay 1.9.0 → 2.0.0

package/src/panels/RigControlPanel.jsx

@@ -0,0 +1,78 @@
+import { useEffect } from "react";
+import Foldout from "./Foldout.jsx";
+import { useStudioShell } from "../shell/studio-shell-context.js";
+import { useMotionCommands } from "../domains/motion.js";
+import { ko, isKo } from "../locale.js";
+import { HIERARCHY_INSPECTOR_TITLES } from "../app-stage.jsx";
+import { PhysicsPanel } from "../ardy/physics-panel.jsx";
+import { Field } from "../ui.jsx";
+import { MotionReadiness } from "../motion-readiness-ui.jsx";
+import { RangePinPanel } from "../range-pin-panel.jsx";
+import { PlatformFitPanel } from "../ardy/platform-fit-panel.jsx";
+import "../ardy/auto-fix-panel.css";
+import "./pose.css";
+
+export default function RigControlPanel({
+ isRigSelection, rigSelection, ikChains, ikFocus, footSnap, ikMode,
+ collisionCleanupSupported, motion, autoPhysicsRunning, physicsProgress, physicsPreview,
+ physicsShow, physicsOptions, tlFrame, changePhysicsOptions, runAutoPhysics, showPhysicsPreview,
+ applyPhysicsPreview, cancelPhysicsPreview, setTlFrame, platformFitRunning, platformFitProgress,
+ platformFitLast, platformFitApplied, ikEditTool, setIkEditTool, showTrails, setShowTrails,
+ trailFalloffS, setTrailFalloffS, trailEdit, generationBusy, bridgeChecking, bridge,
+ runTrailRegeneration, trailReadinessState, openMotionSetup, recheckMotionHealth,
+ rangePins = [], rangePinResiduals = new Map(), rangePinSelection = null, rangePinPartPick = null,
+ rangePinPreview = null, objects = [], setRangePinSelection, setRangePinPartPick,
+ previewRangePinDraft, applyRangePinDraft, deleteRangePin,
+}) {
+ const { run } = useMotionCommands();
+ const shell = useStudioShell();
+ useEffect(() => {
+  const preview = platformFitLast && !platformFitApplied && platformFitLast.candidate;
+  const physics = physicsPreview && !preview;
+  if (preview) {
+   shell?.setStatusText?.(ko("Platform fit preview — review before applying", "발판 맞춤 미리보기 — 적용 전에 확인하세요"));
+   const next = (platformFitLast.steps ?? []).map((step) => ({ start: step.start, end: step.end, kind: "body" }));
+   shell?.setPreviewRanges?.((current) => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+  } else if (physics) {
+   shell?.setStatusText?.(ko("Physics cleanup preview — review before applying", "물리 정리 미리보기 — 적용 전에 확인하세요"));
+   const next = (physicsPreview.changedFrames ?? []).map((frame) => ({ start: frame, end: frame, kind: "body" }));
+   shell?.setPreviewRanges?.((current) => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+  } else if (!platformFitRunning) {
+   shell?.setStatusText?.(""); shell?.setPreviewRanges?.((current) => current.length ? [] : current);
+  }
+ }, [platformFitLast, platformFitApplied, platformFitRunning, physicsPreview, shell]);
+ const activeTool = ikEditTool === "trail" ? "Path fix" : ikEditTool === "pin" ? "Pin" : "IK";
+ return <Foldout hidden={!isRigSelection} title={ko("Pose", "포즈")}>
+  <div className="pose-details" data-testid="pose-details">
+   <section className="pose-section">
+    <h4>{ko("Pose", "포즈")}</h4>
+    <div className="pose-row"><span>{ko("Foot lock", "발 고정")}</span><b>{footSnap ? ko("On", "켜짐") : ko("Off", "꺼짐")}</b></div>
+    <div className="pose-row"><span>{ko("Body contact", "몸 접촉")}</span><b>{ikChains ? ko("Ready", "준비됨") : ko("Unavailable", "사용 불가")}</b></div>
+    <div className="pose-row"><span>{ko("Influence", "영향")}</span><b>{ikFocus ?? ko("All", "전체")}</b></div>
+    <p className="inspector-hint">{rigSelection && rigSelection.token !== "rig" ? (isKo ? `${HIERARCHY_INSPECTOR_TITLES[rigSelection.token]}이 활성 제어 그룹입니다.` : `${HIERARCHY_INSPECTOR_TITLES[rigSelection.token]} is the active control group.`) : ko("Select a body group to pose it in the viewport.", "몸 그룹을 선택해 뷰포트에서 포즈를 잡으세요.")}</p>
+   </section>
+   {ikMode && <section className="pose-section" data-testid="pose-active-tool">
+    <h4>{ko("Active tool", "활성 도구")} · {ko(activeTool, activeTool === "Path fix" ? "경로 수정" : activeTool === "Pin" ? "고정" : "IK")}</h4>
+    <div className="pose-actions">
+     <button type="button" className={"btn" + (ikEditTool === "ik" ? " primary" : "")} aria-pressed={ikEditTool === "ik"} onClick={() => setIkEditTool("ik")}>{ko("IK", "IK")}</button>
+     <button type="button" className={"btn" + (ikEditTool === "trail" ? " primary" : "")} aria-pressed={ikEditTool === "trail"} disabled={!showTrails} onClick={() => setIkEditTool("trail")}>{ko("Path fix", "경로 수정")}</button>
+     <button type="button" data-testid="range-pin-tool" className={"btn" + (ikEditTool === "pin" ? " primary" : "")} aria-pressed={ikEditTool === "pin"} disabled={!motion} onClick={() => { setIkEditTool("pin"); setRangePinPartPick?.(null); }}>{ko("Pin", "고정")}</button>
+    </div>
+    {ikEditTool === "pin" && <RangePinPanel active motion={motion} frame={tlFrame} frameCount={motion?.frames ?? 1} fps={motion?.fps ?? 24} pins={rangePins} residuals={rangePinResiduals} objects={objects} selectedPinId={rangePinSelection} partPick={rangePinPartPick} conflictFrames={rangePinPreview?.conflictFrames ?? []} overlapError={rangePinPreview?.overlapError ?? ""} onSelectPin={(id) => { setRangePinSelection?.(id); if (id) setIkEditTool("pin"); }} onApply={applyRangePinDraft} onCancel={() => { setRangePinSelection?.(null); setIkEditTool("ik"); }} onDelete={deleteRangePin} onPreviewTarget={previewRangePinDraft} />}
+    {ikEditTool === "trail" && <>
+     <button type="button" className="btn full" aria-pressed={showTrails} onClick={() => setShowTrails((value) => !value)}>{ko(`Trails ${showTrails ? "on" : "off"}`, `궤적선 ${showTrails ? "표시" : "숨김"}`)}</button>
+     <Field label={ko("Falloff", "영향 범위")}><div className="trail-falloff-row"><input type="range" min={0.1} max={2} step={0.1} value={trailFalloffS} onChange={(event) => setTrailFalloffS(Number(event.target.value))} /><span className="trail-falloff-value">{trailFalloffS.toFixed(1)}s</span></div></Field>
+     <button type="button" className="btn primary full" disabled={!trailEdit || !motion?.url || generationBusy || bridgeChecking || bridge === null} onClick={runTrailRegeneration}>{ko("Regenerate", "재생성")}</button>
+     <MotionReadiness state={trailReadinessState} checking={bridgeChecking} onSetup={() => openMotionSetup("trail")} onRetry={recheckMotionHealth} />
+    </>}
+    {ikEditTool === "ik" && <p className="inspector-hint">{ko("Grab a hand, foot, elbow or knee handle in the viewport.", "뷰포트에서 손·발·팔꿈치·무릎 핸들을 잡으세요.")}</p>}
+   </section>}
+   <section className="pose-section" data-testid="pose-auto-fix">
+    <h4>{ko("Auto-fix", "자동 수정")}</h4>
+    {collisionCleanupSupported && <div className="pose-actions"><button type="button" className="btn" disabled={!ikChains} onClick={() => run("motion.fixCollisions", { scope: "frame" })}>{ko("Body collisions · Frame", "신체 충돌 · 프레임")}</button><button type="button" className="btn" disabled={!ikChains || !motion} onClick={() => run("motion.fixCollisions", { scope: "clip" })}>{ko("Body collisions · Clip", "신체 충돌 · 클립")}</button></div>}
+    <PlatformFitPanel ko={ko} disabled={!ikChains || !motion || autoPhysicsRunning} running={platformFitRunning} progress={platformFitProgress} last={platformFitLast} applied={platformFitApplied} onRun={() => run("motion.platformFit.run", { preview: true })} onApply={() => run("motion.platformFit.remove", { apply: true })} onCancel={() => run("motion.platformFit.remove")} onRemove={() => run("motion.platformFit.remove")} onFrame={setTlFrame} />
+    <PhysicsPanel ko={ko} disabled={!ikChains || !motion} running={autoPhysicsRunning} progress={physicsProgress} preview={physicsPreview} show={physicsShow} options={physicsOptions} frame={tlFrame} frames={motion?.frames ?? 1} onOptions={changePhysicsOptions} onRun={runAutoPhysics} onShow={showPhysicsPreview} onApply={applyPhysicsPreview} onCancel={cancelPhysicsPreview} onFrame={setTlFrame} />
+   </section>
+  </div>
+ </Foldout>;
+}

package/src/panels/RigPanel.jsx

@@ -0,0 +1,37 @@
+import Foldout from "./Foldout.jsx";
+import { ko } from "../locale.js";
+import { CHARACTER_MODEL_IDS } from "../scenes.js";
+import { PoseThumbPreview } from "../posestudio.jsx";
+import { DEFAULT_POSE } from "../poses.js";
+import { CHARACTER_MODEL_LABELS } from "../app-stage.jsx";
+import { useBus } from '../app-context.js';
+
+export default function RigPanel({ isCharacterSelection, activeChar }) {
+	const { run } = useBus();
+	return (
+<Foldout hidden={!isCharacterSelection} defaultOpen={false} title={ko("Rig", "리그")}>
+					{/* The rig is a property of the character, and swapping it is a
+					    look decision made while blocking — so it belongs beside the
+					    subject, not buried in the project file. */}
+					<div className="rig-picker v2-details-rig-picker" role="radiogroup" aria-label={ko("Character rig", "캐릭터 리그")}>
+						{CHARACTER_MODEL_IDS.map((id) => (
+							<button
+								type="button"
+								key={id}
+								role="radio"
+								aria-checked={activeChar.model === id}
+								className={"rig-option" + (activeChar.model === id ? " active" : "")}
+								data-rig-id={id}
+								onClick={() => {
+									if (activeChar.model === id) return;
+									run('character.update', { characterId: activeChar.id, patch: { model: id } });
+								}}
+							>
+								<PoseThumbPreview model={id} pose={activeChar.pose ?? DEFAULT_POSE} alt={CHARACTER_MODEL_LABELS[id]} />
+								<span>{CHARACTER_MODEL_LABELS[id]}</span>
+							</button>
+						))}
+					</div>
+				</Foldout>
+	);
+}

package/src/panels/SubjectBox.jsx

@@ -0,0 +1,47 @@
+import { ko, isKo } from "../locale.js";
+
+export default function SubjectBox({ label, value, onChange, onRemove, onPose, posing, color, onColorChange, onColorEditStart }) {
+	return (
+		<div className="subject-box v2-subject-box">
+			<div className="subject-box-head">
+				<span className="sb-name">{label}</span>
+				<div className="sb-actions">
+					{onColorChange && (
+						<input
+							type="color"
+							className="sb-color"
+							title={ko("Character color", "인물 색상")}
+							aria-label={ko("Character color", "인물 색상")}
+							value={color}
+							/* Focus opens the session for keyboard/eyedropper use; the
+							   native swatch dialog can drive onChange without focus, so the
+							   first change of a session opens it too (the handler is
+							   session-idempotent). */
+							onFocus={onColorEditStart}
+							onChange={(e) => {
+								onColorEditStart?.();
+								onColorChange(e.target.value);
+							}}
+						/>
+					)}
+					{onPose && (
+						<button
+							type="button"
+							className={"cam-toggle" + (posing ? " active" : "")}
+							aria-label={isKo ? `${label} 포즈 열기` : `Open pose studio for ${label}`}
+							title={isKo ? `${label} 포즈` : `Pose ${label}`}
+							onClick={onPose}
+						>
+							⌘
+						</button>
+					)}
+					{onRemove && (
+						<button type="button" className="sb-remove" title={ko("Remove subject", "인물 제거")} onClick={onRemove}>
+							✕
+						</button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/panels/SubjectsPanel.jsx

@@ -0,0 +1,39 @@
+import Foldout from "./Foldout.jsx";
+import { ko } from "../locale.js";
+import { defaultCharacterTint } from "../app-stage.jsx";
+import SubjectBox from "./SubjectBox.jsx";
+import { useCastTransaction } from '../domains/cast.js';
+
+export default function SubjectsPanel({
+	isCharacterSelection, showB, characters, openStudio, posing,
+}) {
+	const { run, begin, commit, cancel } = useCastTransaction();
+	return (
+<Foldout hidden={!isCharacterSelection} title={showB ? ko("Subjects", "인물들") : ko("Subject", "인물")}>
+						<div className={"subjects-row v2-details-subjects" + (showB ? "" : " single")} onBlur={commit} onPointerUp={commit} onPointerCancel={cancel}>
+							{characters.map((entry, index) => entry.hidden ? null : (
+								<SubjectBox
+									key={entry.id}
+									label={ko(`Subject ${index + 1}`, `인물 ${index + 1}`)}
+									value={entry}
+									onChange={(patch) => run('character.update', { characterId: entry.id, patch })}
+									onPose={() => openStudio(entry.id)}
+									posing={posing === entry.id}
+									onRemove={index > 0 ? () => run('character.remove', { characterId: entry.id }) : undefined}
+									color={entry.tint ?? defaultCharacterTint(entry, index)}
+									/* A colour picker streams values while it is open, so the
+									   whole picking session is one Ctrl+Z entry. */
+									onColorEditStart={begin}
+									onColorChange={(tint) => run('character.update', { characterId: entry.id, patch: { tint } })}
+								/>
+							))}
+						</div>
+						{!showB && (
+							<button type="button" className="add-subject" onClick={() => run('cast.showExtras', { show: true })}>
+								<span className="as-plus">＋</span>
+								<span>{ko("Add second subject", "두 번째 인물 추가")}</span>
+							</button>
+						)}
+					</Foldout>
+	);
+}

package/src/panels/VideoCapturePanel.jsx

@@ -0,0 +1,180 @@
+import Foldout from "./Foldout.jsx";
+import { ko, isKo } from "../locale.js";
+import { footageSummary, trajectoryReceipt, segmentationReceipt } from "../multimodel-ingest.js";
+
+export default function VideoCapturePanel({
+	isCharacterSelection, multiModelStatus, multiModelStage, multiModelFileRef, chooseMultiModelFile,
+	multiModelSource, multiModelUrl, setMultiModelUrl, useMultiModelUrl, pasteMultiModelUrl,
+	multiModelProgress, multiModelError, multiModelFootage, extractMultiModelMotion, multiModelExtract,
+	multiModelTake, multiModelExtractProgress, multiModelExtractError, activeChar, bridge,
+}) {
+	return (
+<Foldout hidden={!isCharacterSelection} defaultOpen={false} title={ko("Video capture", "영상 모캡")}>
+					<div className="multimodel-card v2-details-video-card">
+						<div className="multimodel-card-head">
+							<div>
+								<strong>{ko("Footage → motion", "영상 → 모션")}</strong>
+								<span>{ko("Prepare a source inside the Motion workspace.", "모션 작업공간에서 입력 영상을 준비하세요.")}</span>
+							</div>
+							<span className={"multimodel-status " + multiModelStatus}>
+								{multiModelStatus === "ready"
+									? ko("READY", "준비됨")
+									: multiModelStatus === "error"
+										? ko("CHECK", "확인 필요")
+										: multiModelStatus === "busy"
+											? (multiModelStage === "fetching" ? ko("FETCHING", "받는 중") : ko("PROBING", "분석 중"))
+											: ko("IDLE", "대기")}
+							</span>
+						</div>
+						<div className="multimodel-input-block">
+							<div className="multimodel-input-label">
+								<strong>{ko("Local video file", "로컬 비디오 파일")}</strong>
+								<span>{ko("Upload from this computer", "이 컴퓨터에서 업로드")}</span>
+							</div>
+							<div className="multimodel-source-row">
+								<button type="button" className="btn ghost" onClick={() => multiModelFileRef.current?.click()}>
+									{ko("Choose video", "영상 선택")}
+								</button>
+								<input ref={multiModelFileRef} className="multimodel-file-input" type="file" accept="video/*" onChange={chooseMultiModelFile} />
+								<span className="multimodel-file-name">{multiModelSource?.kind === "file" ? multiModelSource.name : ko("No file selected", "파일이 선택되지 않음")}</span>
+							</div>
+						</div>
+						<div className="multimodel-input-block">
+							<div className="multimodel-input-label">
+								<strong>{ko("Video URL", "비디오 URL")}</strong>
+								<span>{ko("Use a hosted or local route", "호스팅 또는 로컬 경로 사용")}</span>
+							</div>
+							<input
+								className="multimodel-url-input"
+								type="text"
+								value={multiModelUrl}
+								onChange={(event) => setMultiModelUrl(event.target.value)}
+								onKeyDown={(event) => { if (event.key === "Enter") useMultiModelUrl(); }}
+								placeholder={ko("https://…/boxing.mp4", "https://…/boxing.mp4")}
+								aria-label={ko("Multi-Model video URL", "멀티 모델 영상 URL")}
+								spellCheck={false}
+							/>
+							<div className="multimodel-url-actions">
+								<button type="button" className="btn ghost" onClick={pasteMultiModelUrl}>
+									{ko("Paste", "붙여넣기")}
+								</button>
+								<button type="button" className="btn ghost" onClick={() => setMultiModelUrl("")} disabled={!multiModelUrl}>
+									{ko("Clear", "지우기")}
+								</button>
+								<button type="button" className="btn primary" onClick={useMultiModelUrl} disabled={!multiModelUrl.trim()}>
+									{ko("Use URL", "URL 사용")}
+								</button>
+							</div>
+						</div>
+						{multiModelStatus === "busy" && (
+							<div className="multimodel-progress">
+								<div className="multimodel-progress-track">
+									<div
+										className={"multimodel-progress-bar" + (multiModelProgress === null ? " indeterminate" : "")}
+										style={multiModelProgress === null ? undefined : { width: `${Math.round(multiModelProgress * 100)}%` }}
+									/>
+								</div>
+								<span>
+									{multiModelStage === "fetching"
+										? (multiModelProgress === null
+											? ko("Downloading…", "다운로드 중…")
+											: `${Math.round(multiModelProgress * 100)}%`)
+										: ko("Decoding…", "디코딩 중…")}
+								</span>
+							</div>
+						)}
+						{multiModelError && <p className="multimodel-error">{multiModelError}</p>}
+						{multiModelFootage && (
+							<div className="multimodel-receipt">
+								<video className="multimodel-preview" src={multiModelFootage.objectUrl} muted playsInline preload="metadata" />
+								<div className="multimodel-receipt-body">
+									<strong>{multiModelSource?.name}</strong>
+									<span>{footageSummary(multiModelFootage)}</span>
+									<span className="multimodel-receipt-timeline">
+										{isKo
+											? `타임라인 0–${multiModelFootage.frames - 1} 프레임으로 맞춤`
+											: `Timeline sized to frames 0–${multiModelFootage.frames - 1}`}
+									</span>
+								</div>
+							</div>
+						)}
+						{multiModelFootage && (
+							<div className="multimodel-extract">
+								<button
+									type="button"
+									className="btn primary"
+									onClick={extractMultiModelMotion}
+									disabled={multiModelExtract === "running"}
+								>
+									{multiModelExtract === "running"
+										? ko("Extracting…", "추출 중…")
+										: multiModelTake
+											? ko("Extract again", "다시 추출")
+											: ko("Extract motion", "모션 추출")}
+								</button>
+								{multiModelExtract === "running" && (
+									<div className="multimodel-progress">
+										<div className="multimodel-progress-track">
+											<div
+												className={"multimodel-progress-bar" + (multiModelExtractProgress === null ? " indeterminate" : "")}
+												style={multiModelExtractProgress === null ? undefined : { width: `${Math.round(multiModelExtractProgress * 100)}%` }}
+											/>
+										</div>
+										<span>
+											{multiModelExtractProgress === null
+												? ko("Engine…", "엔진 준비…")
+												: `${Math.round(multiModelExtractProgress * 100)}%`}
+										</span>
+									</div>
+								)}
+								{multiModelExtract === "error" && <p className="multimodel-error">{multiModelExtractError}</p>}
+								{multiModelTake && (
+					<p className="multimodel-extract-receipt">
+						{multiModelTake.gpu
+							? (isKo
+								? `GVHMR 테이크 ${multiModelTake.frames}프레임 추출됨 — 타임라인에서 재생하세요`
+								: `GVHMR take extracted, ${multiModelTake.frames} frames — press play on the timeline`)
+											: (isKo
+												? `${multiModelTake.frames}프레임 테이크 구움 (실측 ${multiModelTake.fitted} · 유지 ${multiModelTake.held}) — 타임라인에서 재생하세요`
+												: `Baked a ${multiModelTake.frames}-frame take (${multiModelTake.fitted} measured · ${multiModelTake.held} held) — press play on the timeline`)}
+									</p>
+								)}
+								{multiModelTake?.trajectory && <p className="multimodel-note" data-testid="trajectory-receipt">{trajectoryReceipt(multiModelTake.trajectory, isKo)}</p>}
+								{multiModelTake?.segmentation && <p className="multimodel-note" data-testid="segmentation-receipt">{segmentationReceipt(multiModelTake.segmentation, isKo)}</p>}
+								{multiModelTake?.quality && <p className="multimodel-note" data-testid="mocap-quality-receipt">
+									{multiModelTake.quality.pass
+										? ko("Mocap quality gate passed", "모캡 품질 게이트 통과")
+										: ko(`Mocap quality warning: ${multiModelTake.quality.checks?.filter((check) => !check.pass).map((check) => check.name).join(", ") || "review required"}`, `모캡 품질 게이트 경고: ${multiModelTake.quality.checks?.filter((check) => !check.pass).map((check) => check.name).join(", ") || "확인 필요"}`)}
+								</p>}
+								{multiModelTake?.gpu && Math.abs(activeChar.y ?? 0) > .001 && <p className="multimodel-note" data-testid="trajectory-stage-offset">{isKo ? `씬 높이 ${(activeChar.y * 100).toFixed(1)}cm가 모션에 추가돼요 (Subject → Y)` : `Scene height ${(activeChar.y * 100).toFixed(1)}cm is added to the motion (Subject → Y)`}</p>}
+								{multiModelTake?.persons > 1 && (
+									<p className="multimodel-extract-receipt">
+										{isKo
+											? `${multiModelTake.persons}명의 테이크를 각 인물 레이어에 배치했어요`
+											: `${multiModelTake.persons} performers landed on their own subject layers`}
+									</p>
+								)}
+								{multiModelExtract === "idle" && !multiModelTake && (
+									<p className="multimodel-note">
+						{bridge === null
+							? ko("Checking for the dev bridge…", "개발 브리지를 확인하는 중…")
+							: bridge.ok && bridge.extractionBackend === "gvhmr"
+								? ko(
+									"GVHMR extraction runs on the GPU box (about a minute per 15 s of footage).",
+									"GVHMR 추출은 GPU 박스에서 돌아갑니다(영상 15초당 약 1분)."
+								)
+								: ko(
+									"GVHMR extraction is unavailable until the local GPU bridge is connected.",
+									"로컬 GPU 브리지가 연결될 때까지 GVHMR 추출을 사용할 수 없어요."
+								)}
+									</p>
+								)}
+							</div>
+						)}
+						<p className="multimodel-note">
+							{ko("Locked-off footage with both performers in frame is best.", "두 사람이 함께 보이는 고정 카메라 영상이 가장 적합합니다.")}
+						</p>
+					</div>
+				</Foldout>
+	);
+}