cozyclay 2.1.0 → 3.0.0

package/src/shell/ViewportToolbar.jsx

@@ -1,6 +1,6 @@
-import { useEffect, useLayoutEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
 import { useStudioShell } from "./studio-shell-context.js";
+import ShotPreviewHeader from "./ShotPreviewHeader.jsx";
 import { ko } from "../locale.js";
 import { PRESETS, SHOT_ASPECT_PRESETS } from "../app-stage.jsx";
 import { CAMERA_PRESETS } from "../camera-move.js";
@@ -10,6 +10,8 @@ import { CHARACTER_MODEL_IDS } from "../scenes.js";
 import { elementByPath } from "../studio-elements.js";
 import { saveAutoColor } from "../auto-color.js";
 import { trackFeature } from "../analytics.js";
+import { GUIDE_LABELS, nextGuideMode } from "../shot-guides.js";
+import GhostsMenuGroup from "./GhostsMenuGroup.jsx";
 import "./viewport.css";
 
 // G1: the single mode+tool pill. Keys 1-5 and W/E/R are bound in App's
@@ -39,7 +41,6 @@ const ICON = {
 	rotate: "M13.25 8A5.25 5.25 0 1 1 11.7 4.3 M13.25 2.5v2.75H10.5",
 	scale: "M2.5 8.5v4a1 1 0 0 0 1 1h4 M8.5 2.5h5v5 M13.5 2.5 7.5 8.5",
 	ik: "M2.5 13.5 6.5 9l3 2.2 4-7.7 M6.5 9h.01 M9.5 11.2h.01",
-	trail: "M2 12.5c3 0 3-9 6-9s3 9 6 9",
 	pin: "M8 14.5v-4 M5 2h6 M6.2 2v3.6L4.5 10.5h7L9.8 5.6V2",
 	blocks: "M2 3.5h7.5v3.5H2z M6.5 9h7.5v3.5H6.5z",
 	refine: "M10.5 2.5l3 3L6 13H3v-3z",
@@ -62,12 +63,10 @@ function RailIcon({ name, size = 16 }) {
 
 // The gizmo's snap increments (TRANSLATE_SNAP / ROTATE_SNAP in
 // src/scene-objects.js). They are fixed, so the value group names them.
-const SNAP_MOVE = "5cm";
-const SNAP_TURN = "5°";
+const SNAP_MOVE = "5cm", SNAP_TURN = "5°";
 
 // Editor lens range: shotsDomain.changeLens and the FOV slider take 14-90°.
-const FOV_MIN = 14;
-const FOV_MAX = 90;
+const FOV_MIN = 14, FOV_MAX = 90;
 
 // "+ Add › Character" stands the new body one metre along X per existing
 // character, inside the same stage clamp the Content drag applies.
@@ -113,35 +112,17 @@ function MenuItem({ checked, role = "menuitemradio", className = "", children, .
 	);
 }
 
-/** The inset card's header (violet dot, shot name, lens) lives in App's
- * `.vp-shot-preview-tag`; this region only fills in the words it shows. */
-function ShotPreviewHeader({ name, lens }) {
-	const [host, setHost] = useState(null);
-	useLayoutEffect(() => {
-		setHost(document.querySelector(".vp-shot-preview .vp-shot-preview-tag"));
-	}, []);
-	if (!host) return null;
-	return createPortal(
-		<span className="vp-shot-preview-meta" data-testid="shot-preview-header">
-			<span className="vp-shot-preview-name">{name}</span>
-			<span className="vp-shot-preview-lens">{lens}</span>
-		</span>,
-		host,
-	);
-}
-
 export default function ViewportToolbar() {
 	const {
 		workflowMode, selectWorkflowMode, poseRefusal, gizmoMode, setGizmoMode, snapEnabled,
-		setSnapEnabled, preset, applyPreset, cameraPresetId, i2vMotionCameraLocked,
+		setSnapEnabled, preset, applyPreset, cameraPresetId,
 		runStudioAction, shotAspectKey, fovDeg, shotsDomain, shot, shots, activeShot,
 		setNonce, workspaceLayout, viewMenuTriggerRef, viewMenuOpen,
-		setViewMenuOpen, viewLooksActive, gridView, setGridView,
+		setViewMenuOpen, viewLooksActive, gridView, setGridView, guideMode,
 		autoColor, setAutoColor, isCharacterSelection, partColoursChoice, embedMode,
 		agentCollapsed, addSceneObject, spawnCharacter, characters, flySpeed,
-		ikEditTool, setIkEditTool, showTrails, setShowTrails, motion, setRangePinPartPick,
-		trailFalloffS, setTrailFalloffS, lineEditMode, exitLineEditMode, enterRefineMode,
-		refineDisabledReason, previsMode, sculptView, requestSculptView,
+		ikEditTool, setIkEditTool, motion, setRangePinPartPick,
+		previsMode, sculptView, requestSculptView,
 	} = useStudioShell();
 	const menu = useOverlayMenu();
 
@@ -152,7 +133,6 @@ export default function ViewportToolbar() {
 		setAutoColor(next);
 	};
 
-	const refineReason = lineEditMode ? null : refineDisabledReason();
 	const tools = {
 		scene: [
 			{ key: "W", id: "move", name: ko("Move", "이동"), active: gizmoMode === "move", pick: () => setGizmoMode("move") },
@@ -161,11 +141,7 @@ export default function ViewportToolbar() {
 		],
 		pose: [
 			{ key: "W", id: "ik", name: ko("Pose fix (IK parts)", "포즈 수정 (IK 파츠)"), active: ikEditTool === "ik", pick: () => setIkEditTool("ik") },
-			{
-				key: "E", id: "trail", name: ko("Path fix (motion trail)", "경로 수정 (궤적선)"), active: ikEditTool === "trail",
-				refused: showTrails ? null : ko("Turn Trails on in Show to edit the motion path", "경로를 수정하려면 표시에서 궤적선을 켜세요"),
-				pick: () => setIkEditTool("trail"),
-			},
+			
 			{
 				key: "R", id: "pin", name: ko("Pin (range pin)", "고정 (범위 고정)"), active: ikEditTool === "pin",
 				refused: motion ? null : ko("Pinning needs a motion take", "고정하려면 모션 테이크가 필요해요"),
@@ -176,16 +152,8 @@ export default function ViewportToolbar() {
 			{ key: "W", id: "move", name: ko("Move camera", "카메라 이동"), active: gizmoMode === "move", pick: () => setGizmoMode("move") },
 			{ key: "E", id: "rotate", name: ko("Rotate camera", "카메라 회전"), active: gizmoMode === "rotate", pick: () => setGizmoMode("rotate") },
 		],
-		motion: [
-			{
-				key: "W", id: "blocks", name: ko("Blocks (select and move prompt blocks)", "블록 (프롬프트 블록 선택·이동)"), active: !lineEditMode,
-				pick: () => { if (lineEditMode) exitLineEditMode(); },
-			},
-			{
-				key: "E", id: "refine", name: ko("Refine (edit the path line)", "다듬기 (경로선 편집)"), active: lineEditMode,
-				refused: refineReason, pick: () => { if (!lineEditMode) enterRefineMode(); },
-			},
-		],
+		// Motion is compiled by the agent (motion.compile); the department has no tools of its own.
+		motion: [],
 		// Sculpt mode's W/E/R swing the turntable camera to a reference view.
 		sculpt: [
 			{ key: "W", id: "front", name: ko("Front view", "정면 보기"), active: sculptView?.view === "front", pick: () => requestSculptView("front") },
@@ -216,33 +184,6 @@ export default function ViewportToolbar() {
 			<span className="vp-value-part"><RailIcon name="grid" size={14} />{SNAP_MOVE}</span>
 			<span className="vp-value-part"><RailIcon name="angle" size={14} />{SNAP_TURN}</span>
 		</button>
-	) : workflowMode === "pose" ? (
-		<div className="vp-menu-wrap" data-vp-menu="influence">
-			<button
-				type="button"
-				className="vp-value"
-				aria-haspopup="dialog"
-				aria-expanded={menu.open === "influence"}
-				title={ko("Influence range — how far an edit blends into nearby frames", "영향 범위 — 수정이 주변 프레임에 섞이는 길이")}
-				onClick={() => menu.toggle("influence")}
-			>
-				{trimNumber(trailFalloffS)}s
-			</button>
-			{menu.open === "influence" && (
-				<div className="vp-menu vp-slider-popover" role="dialog" aria-label={ko("Influence range", "영향 범위")}>
-					<input
-						type="range"
-						min={0.1}
-						max={2}
-						step={0.1}
-						value={trailFalloffS}
-						aria-label={ko("Influence range", "영향 범위")}
-						onChange={(event) => setTrailFalloffS(Number(event.target.value))}
-					/>
-					<output>{trimNumber(trailFalloffS)}s</output>
-				</div>
-			)}
-		</div>
 	) : workflowMode === "camera" ? (
 		<>
 			<div className="vp-menu-wrap" data-vp-menu="lens">
@@ -264,7 +205,6 @@ export default function ViewportToolbar() {
 								key={mm}
 								data-lens={mm}
 								checked={shot.focalMm === mm}
-								disabled={i2vMotionCameraLocked}
 								onClick={() => { shotsDomain.changeLens(fov); menu.close(); }}
 							>
 								{mm}mm
@@ -278,7 +218,6 @@ export default function ViewportToolbar() {
 								max={FOV_MAX}
 								step="1"
 								value={fovDeg}
-								disabled={i2vMotionCameraLocked}
 								onChange={(event) => shotsDomain.changeLens(Number(event.target.value))}
 							/>
 							<output>{Math.round(fovDeg)}°</output>
@@ -476,7 +415,6 @@ export default function ViewportToolbar() {
 									<select
 										aria-label={ko("Camera preset", "카메라 프리셋")}
 										value={cameraPresetId ?? ""}
-										disabled={i2vMotionCameraLocked}
 										onChange={(event) => {
 											const id = event.target.value;
 											if (!id) { runStudioAction("stage.setFilmback", { cameraPresetId: null }); return; }
@@ -515,20 +453,13 @@ export default function ViewportToolbar() {
 							onClick={() => menu.toggle("shading")}
 						>
 							<RailIcon name="shading" />
-							<span className="vp-label">{autoColor ? ko("Auto Color", "자동 색") : ko("Clay Lit", "클레이 조명")}</span>
+							<span className="vp-label">{ko("Clay Lit", "클레이 조명")}</span>
 						</button>
 						{menu.open === "shading" && (
 							<div className="vp-menu" role="menu" aria-label={ko("Shading", "셰이딩")}>
 								<MenuItem checked={!autoColor} onClick={() => { setAutoColorOn(false); menu.close(); }}>
 									{ko("Clay Lit", "클레이 조명")}
 								</MenuItem>
-								<MenuItem
-									checked={autoColor}
-									title={ko("Flat, distinct colour per object — captures include them while on", "오브젝트별 평면 구분 색 — 켜둔 동안 캡처에도 포함됩니다")}
-									onClick={() => { setAutoColorOn(true); menu.close(); }}
-								>
-									{ko("Auto Color", "자동 색")}
-								</MenuItem>
 							</div>
 						)}
 					</div>
@@ -590,18 +521,17 @@ export default function ViewportToolbar() {
 								<button
 									type="button"
 									role="menuitemcheckbox"
-									className={"view-menu-item trails-toggle" + (showTrails ? " active" : "")}
-									aria-checked={showTrails}
-									aria-pressed={showTrails}
-									title={ko("Motion trails while posing", "포즈 편집 중 궤적선")}
-									onClick={() => {
-										if (showTrails && ikEditTool === "trail") setIkEditTool("ik");
-										setShowTrails(!showTrails);
-									}}
+									className={"view-menu-item vp-guide-cycle" + (guideMode === "off" ? "" : " active")}
+									aria-checked={guideMode !== "off"}
+									aria-pressed={guideMode !== "off"}
+									title={ko(GUIDE_LABELS[guideMode].en, GUIDE_LABELS[guideMode].ko) + ko(" · click to cycle", " · 클릭으로 전환")}
+									onClick={() => runStudioAction("view.setGuideMode", { mode: nextGuideMode(guideMode) })}
 								>
-									<span className="view-menu-mark" aria-hidden="true">{showTrails ? "✓" : ""}</span>
-									{ko("Trails", "궤적선")}
+									<span className="view-menu-mark" aria-hidden="true">{guideMode !== "off" ? "✓" : ""}</span>
+									{ko("Composition guides", "구도 가이드")}
+									<small>{ko(GUIDE_LABELS[guideMode].en, GUIDE_LABELS[guideMode].ko)}</small>
 								</button>
+								<GhostsMenuGroup />
 								{/* Part colours repaint a BODY, so the section only exists
 								    while a character is selected (R2). */}
 								{isCharacterSelection && (

package/src/shell/agent-glass.css

@@ -23,7 +23,14 @@
 	border: 0;
 	background: none;
 }
-.app[data-shell="glass"] .studio-agent-inspector .agent-title { font: 600 13px var(--sans); color: var(--text-1); }
+.app[data-shell="glass"] .studio-agent-inspector .agent-title {
+	min-width: 0;
+	overflow: hidden;
+	color: var(--text-1);
+	font: 600 13px var(--sans);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
 .app[data-shell="glass"] .studio-agent-inspector .agent-status-dot { display: none; }
 .app[data-shell="glass"] .studio-agent-inspector .agent-icon-button {
 	display: grid;
@@ -227,7 +234,9 @@
 	font: 400 12.5px/1.5 var(--sans);
 }
 .app[data-shell="glass"] .studio-agent-inspector .agent-composer textarea::placeholder { color: var(--text-3); }
-.app[data-shell="glass"] .studio-agent-inspector .agent-composer-controls { gap: 2px; margin: 4px 0 0 -6px; }
+/* A narrow dock wraps the controls to a second row instead of crushing the
+   model name to its caret or pushing Send past the field's edge. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-composer-controls { flex-wrap: wrap; gap: 4px 2px; margin: 4px 0 0 -6px; }
 .app[data-shell="glass"] .studio-agent-inspector .agent-attach-chip {
 	display: grid;
 	place-items: center;
@@ -248,9 +257,9 @@
 .app[data-shell="glass"] .studio-agent-inspector .agent-model-select {
 	-webkit-appearance: none;
 	appearance: none;
-	flex: 0 1 auto;
-	min-width: 0;
-	max-width: 132px;
+	flex: 1 1 96px;
+	min-width: 96px;
+	max-width: none;
 	height: 26px;
 	padding: 0 18px 0 8px;
 	border: 0;
@@ -262,7 +271,7 @@
 	cursor: pointer;
 }
 .app[data-shell="glass"] .studio-agent-inspector .agent-model-select:hover { background-color: var(--chip-fill); color: var(--text-1); }
-.app[data-shell="glass"] .studio-agent-inspector .agent-effort-select { flex: none; max-width: none; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-effort-select { flex: none; min-width: 0; max-width: none; }
 .app[data-shell="glass"] .studio-agent-inspector .agent-model-select optgroup,
 .app[data-shell="glass"] .studio-agent-inspector .agent-model-select option { background: var(--surface-raised); color: var(--text-1); }
 .app[data-shell="glass"] .studio-agent-inspector .agent-send {
@@ -293,4 +302,8 @@
 
 /* Provider keys: the same quiet rows. */
 .app[data-shell="glass"] .studio-agent-inspector .agent-keys { margin: 0 10px 8px; border: 0; border-radius: 12px; background: var(--card-fill); box-shadow: var(--card-ring); }
+/* Connect a model takes the panel body while it is open: one scroll, and no
+   second "Connect a model" card showing through behind it. */
+.app[data-shell="glass"] .studio-agent-inspector .agent-login { flex: 1 1 auto; min-height: 0; max-height: none; }
+.app[data-shell="glass"] .studio-agent-inspector .agent-login ~ .agent-transcript { display: none; }
 .app[data-shell="glass"] .studio-agent-inspector .agent-key-input { border: 0; border-radius: 8px; background: var(--field-fill); color: var(--text-1); }

package/src/shell/details-selection.js

@@ -0,0 +1,42 @@
+// The Details panel's selection header: the selected item's name and its
+// "Kind · detail" type line.
+import { ko } from "../locale.js";
+import { sceneObjectNameDisplayKo, HIERARCHY_INSPECTOR_TITLES, CHARACTER_MODEL_LABELS } from "../app-stage.jsx";
+import { CUTOUT_KIND, EMPTY_KIND, SCULPT_KIND } from "../scene-objects.js";
+import { LIGHT_KIND } from "../object-look.js";
+
+const characterIndexForRow = (rowId, characters) => rowId === "characterA" ? 0
+	: rowId === "characterB" ? 1
+		: characters.findIndex((entry) => `character:${entry.id}` === rowId);
+const characterTitle = (index) => ko(`Character ${index + 1}`, `인물 ${index + 1}`);
+
+/** The 2a selection header: the selected item's name and a "Kind · detail"
+ * type line. Null when nothing that owns settings is selected. */
+export function detailsSelection({ selectedHierarchyId: id, selectedSceneObject, rigSelection, characters, shot, inspectorHasContent }) {
+	if (!inspectorHasContent) return null;
+	if (selectedSceneObject) {
+		const { renderer, light } = selectedSceneObject;
+		if (renderer === LIGHT_KIND) return { name: sceneObjectNameDisplayKo(selectedSceneObject.name), type: `${ko("Light", "조명")} · ${light?.type === "spot" ? ko("Spot", "스포트") : ko("Point", "점")}` };
+		const kind = renderer === CUTOUT_KIND ? ko("Cutout", "컷아웃") : renderer === EMPTY_KIND ? ko("Empty", "빈 오브젝트") : renderer === SCULPT_KIND ? ko("Sculpt", "조형") : ko("Mesh", "메시");
+		return { name: sceneObjectNameDisplayKo(selectedSceneObject.name), type: `${renderer === EMPTY_KIND ? ko("Node", "노드") : ko("Prop", "소품")} · ${kind}` };
+	}
+	if (rigSelection) {
+		const index = characterIndexForRow(rigSelection.rowId, characters);
+		const kind = rigSelection.token === "rig" ? ko("Rig", "리그") : ko("Bone", "본");
+		return { name: HIERARCHY_INSPECTOR_TITLES[rigSelection.token] ?? kind, type: index >= 0 ? `${kind} · ${characterTitle(index)}` : kind };
+	}
+	if (id === "camera") return { name: HIERARCHY_INSPECTOR_TITLES.camera, type: `${ko("Camera", "카메라")} · ${shot.focalMm}mm` };
+	if (id === "characterA" || id === "characterB" || id.startsWith("character:")) {
+		const index = characterIndexForRow(id, characters);
+		const model = CHARACTER_MODEL_LABELS[characters[index]?.model];
+		return { name: characterTitle(Math.max(index, 0)), type: model ? `${ko("Character", "인물")} · ${model}` : ko("Character", "인물") };
+	}
+	const types = {
+		shot: ko("Scene", "장면"),
+		light: ko("Light", "조명"),
+		characters: ko("Folder", "폴더"),
+		environment: ko("Environment", "환경"),
+		props: ko("Folder", "폴더"),
+	};
+	return { name: HIERARCHY_INSPECTOR_TITLES[id] ?? ko("Selection", "선택 항목"), type: types[id] ?? "" };
+}

package/src/shell/ghosts-menu.css

@@ -0,0 +1,22 @@
+/* The View menu's Ghosts group (GhostsMenuGroup.jsx): two colour chips in the heading and
+   compact number steppers that keep the 24px menu rows. */
+.ghosts-menu .view-menu-label { display: flex; align-items: center; gap: 4px; }
+.ghosts-menu .ghost-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; opacity: 0.8; }
+.ghosts-menu .ghost-swatch:first-of-type { margin-left: 4px; }
+.ghosts-menu .view-menu-item.ghost-stepper { cursor: default; }
+.ghosts-menu .ghost-stepper.disabled { opacity: 0.45; }
+.ghosts-menu .ghost-stepper-label { flex: 1; }
+.ghosts-menu .ghost-stepper button {
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	border: 1px solid var(--row-divider, var(--line));
+	border-radius: 4px;
+	background: none;
+	color: inherit;
+	font: inherit;
+	line-height: 1;
+	cursor: pointer;
+}
+.ghosts-menu .ghost-stepper button:disabled { cursor: default; opacity: 0.5; }
+.ghosts-menu .ghost-stepper-value { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }

package/src/shell/glass-regions.css

@@ -431,9 +431,9 @@
 	--tl-ruler-height: 24px;
 	--tl-track-row-height: 22px;
 	--tl-track-group-height: 66px;
-	/* The surface is exactly its rows (ruler + 2 lanes + 2 lane groups), so it
+	/* The surface is exactly its rows (ruler + 1 lane + 2 lane groups), so it
 	   never asks the body for more height than the dock gives it. */
-	--tl-surface-height: calc(var(--tl-ruler-height) + var(--tl-track-row-height) * 2 + var(--tl-track-group-height) * 2);
+	--tl-surface-height: calc(var(--tl-ruler-height) + var(--tl-track-row-height) + var(--tl-track-group-height) * 2);
 	--tl-camera-bar-height: 28px;
 	--tl-track-tree-width: 170px;
 	--tl-clip-inset: 4px;
@@ -446,7 +446,8 @@
 	height: auto;
 	min-height: 48px;
 	gap: 12px;
-	padding: 0 16px;
+	/* The right inset keeps the pinned collapse toggle clear of the controls. */
+	padding: 0 52px 0 16px;
 	border: 0;
 	background: none;
 }
@@ -500,6 +501,31 @@
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-seq-action:hover:not(:disabled),
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-head-group .tl-btn:hover:not(:disabled) { background: var(--chip-fill); color: var(--text-1); }
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-seq-action:disabled { opacity: .4; }
+/* The take's segment speed sits in the same quiet chip grammar as its neighbours. */
+.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-motion-speed-editor {
+	min-width: 0;
+	height: 26px;
+	gap: 6px;
+	padding: 0 8px;
+	border: 0;
+	border-radius: 13px;
+	background: none;
+	color: var(--label);
+	font: 500 12px var(--sans);
+}
+.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-motion-speed-editor > span { font-weight: 500; }
+.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-motion-speed-editor input[type="range"] { width: 72px; accent-color: var(--primary-fill, var(--select)); }
+.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-motion-speed-editor input[type="number"] {
+	width: 40px;
+	height: 22px;
+	padding: 0 4px;
+	border: 0;
+	border-radius: 6px;
+	background: var(--chip-fill);
+	color: var(--text-1);
+	font: 500 12px var(--sans);
+}
+.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-motion-speed-editor small { color: var(--label); }
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-btn.wp.on { background: var(--seg-on); box-shadow: var(--seg-on-shadow); color: var(--seg-on-text); }
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-badge {
 	height: 22px;

package/src/shell/preferences.css

@@ -381,6 +381,9 @@
 }
 
 .v2-preferences .v2-preferences__language {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	height: var(--h-control, 28px);
 	padding: 0 var(--sp-2, 12px);
 	border: 0;
@@ -512,6 +515,8 @@
 	color: var(--text-3, #636369);
 	font-size: var(--prefs-secondary-size, 11px);
 	font-weight: 500;
+	letter-spacing: 0;
+	text-transform: none;
 }
 
 .v2-preferences .v2-preferences__help button {
@@ -519,7 +524,7 @@
 	padding: 0 var(--sp-2, 12px);
 	border: 0;
 	border-radius: var(--r-1, 4px);
-	background: transparent;
+	background: var(--field-fill, var(--surface-raised, #1e1e21));
 	color: var(--text-2, #9b9ba1);
 	font: inherit;
 	font-size: var(--prefs-secondary-size, 11px);

package/src/shell/viewport.css

@@ -32,6 +32,18 @@
 		color: var(--text-1);
 	}
 	.app[data-embed-mode] .viewport-titlebar { display: none; }
+	.app[data-embed-mode] .vp-embed-guide {
+		position: absolute;
+		top: var(--sp-1);
+		right: var(--sp-1);
+		z-index: 6;
+		padding: var(--sp-1);
+		border-radius: var(--r-2);
+		background: var(--surface-panel);
+		color: var(--text-2);
+	}
+	.app[data-embed-mode] .vp-embed-guide:hover,
+	.app[data-embed-mode] .vp-embed-guide.on { color: var(--select); }
 
 	.viewport-titlebar button { font-family: inherit; }
 	.viewport-titlebar button:focus-visible {

package/src/shot-authoring.js

@@ -6,6 +6,7 @@
 
 import { createTiming, timingIsFlat } from "./speed-envelope.js";
 import { createShot } from "./cuts.js";
+import { railShotFields } from "./camera-block.js";
 import { normalizeStableItems } from "./stable-items.js";
 import { VIDEO_MODEL_PRESETS } from "./model-presets.js";
 import { elementByPath } from "./studio-elements.js";
@@ -110,7 +111,7 @@ const FOLLOW_BOUNDS = {
 	height: [0.2, Number.POSITIVE_INFINITY],
 	response: [0.1, 3],
 	lead: [0, 1],
-	maxDollySpeed: [0.2, 8],
+	maxDollySpeed: [0.2, 40],
 	pitchOffsetDeg: [-170, 170],
 	orbitOffsetDeg: [-180, 180],
 };
@@ -299,6 +300,7 @@ function repairCamera(value) {
 		// The dolly's speed curve rides the rail the same way; the envelope
 		// module owns its repair (parse-don't-validate, flat heals to null).
 		dollyTiming: cameraRail ? repairDollyTiming(source.dollyTiming) : null,
+		...railShotFields(source, cameraRail),
 	};
 }
 
@@ -310,12 +312,7 @@ function repairDollyTiming(value) {
 function migratedCamera(followCam, cameraRail, railFollow = null) {
 	const rail = repairRail(cameraRail);
 	const enabled = followCam?.enabled === true;
-	return repairCamera({
-		mode: enabled ? (rail ? "rail" : "follow") : "keys",
-		followCam,
-		cameraRail: rail,
-		railFollow,
-	});
+	return repairCamera({ mode: enabled ? (rail ? "rail" : "follow") : "keys", followCam, cameraRail: rail, railFollow });
 }
 
 function repairShared(parsed, frameCount, ids) {

package/src/soft-shadows.js

@@ -0,0 +1,37 @@
+// Soft key shadows in the same pass. three r185's PCF filter takes five taps
+// on a Vogel disk of shadow.radius texels, rotated per pixel by interleaved
+// gradient noise; past a radius of about two texels those five taps show as a
+// cross-hatched grain over every penumbra. A wider radius (stage.lighting
+// shadowSoftness) therefore takes SOFT_SHADOW_TAPS taps instead, which keeps
+// the same disk and noise rotation but averages the grain away. Radius 1 —
+// every stage before the look was authorable — runs the original five-tap code
+// unchanged, so studio frames stay pixel-identical.
+//
+// Evaluated against the alternatives: PCFSoftShadowMap is deprecated in r185
+// (it falls back to PCF); VSMShadowMap blurs smoothly but loses contact shadows
+// (a leg's shadow on a box beside it vanished), cannot shadow point lights, and
+// is renderer-wide, so it would restyle the studio look too.
+import { ShaderChunk } from "three";
+
+const SOFT_SHADOW_TAPS = 16;
+const tap = (index) => `texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( ${index}, 5, phi ) * radius, shadowCoord.z ) )`;
+const FIVE_TAPS = `shadow = (\n${[0, 1, 2, 3, 4].map((index) => `\t\t\t\t\t${tap(index)}`).join(" +\n")}\n\t\t\t\t) * 0.2;`;
+const SOFT_TAPS = `if ( shadowRadius <= 1.0 ) {
+					${FIVE_TAPS}
+				} else {
+					shadow = 0.0;
+					for ( int i = 0; i < ${SOFT_SHADOW_TAPS}; i ++ ) shadow += texture( shadowMap, vec3( shadowCoord.xy + vogelDiskSample( i, ${SOFT_SHADOW_TAPS}, phi ) * radius, shadowCoord.z ) );
+					shadow /= ${SOFT_SHADOW_TAPS}.0;
+				}`;
+
+/** Patch the directional/spot PCF filter once; answers whether the soft path is in. */
+export function installSoftShadows(chunks = ShaderChunk) {
+	const source = chunks.shadowmap_pars_fragment;
+	if (source.includes(SOFT_TAPS)) return true;
+	// A three upgrade that rewrites the filter leaves the stock one in place.
+	if (!source.includes(FIVE_TAPS)) return false;
+	chunks.shadowmap_pars_fragment = source.replace(FIVE_TAPS, SOFT_TAPS);
+	return true;
+}
+
+installSoftShadows();

package/src/stage-attach-frames.js

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { SCENE_ATTACH_BONES } from "./scene-objects.js";
-import { TRAIL_EFFECTOR_JOINTS } from "./motion-trail.js";
+
 import { normalizeBoneName } from "./poses.js";
 
 /** The rig rows that ARE an attach frame: `rig.<track id>`, the same camel
@@ -8,14 +8,14 @@ import { normalizeBoneName } from "./poses.js";
  * rig.leftArm …) name a limb, not a frame, so they are deliberately absent. */
 export const ATTACH_BONE_ROWS = new Map(SCENE_ATTACH_BONES.map((bone) => [`rig.${bone}`, bone]));
 
-/** Attach track id -> the Mixamo bone carrying that frame on the shipped rigs.
- * TRAIL_EFFECTOR_JOINTS names the cskel27 joint, and cskel27 and Mixamo agree
- * everywhere except the spine, which sits one bone up the Mixamo chain (the
- * same shift ardy/playback.js SKINNING_MAP makes). */
-export const ATTACH_BONE_NAMES = Object.fromEntries(SCENE_ATTACH_BONES.map((bone) => {
-	const joint = TRAIL_EFFECTOR_JOINTS[bone];
-	return [bone, joint === "Spine1" ? "Spine" : joint === "Spine2" ? "Spine1" : joint];
-}));
+/** Attach track id -> the Mixamo bone carrying that frame on the shipped rigs. */
+const MIXAMO_ATTACH_BONES = {
+	hips: "Hips", spine: "Spine", chest: "Spine1", neck: "Neck", head: "Head",
+	leftShoulder: "LeftArm", leftElbow: "LeftForeArm", leftHand: "LeftHand",
+	rightShoulder: "RightArm", rightElbow: "RightForeArm", rightHand: "RightHand",
+	leftKnee: "LeftLeg", leftFoot: "LeftFoot", rightKnee: "RightLeg", rightFoot: "RightFoot",
+};
+export const ATTACH_BONE_NAMES = Object.fromEntries(SCENE_ATTACH_BONES.map((bone) => [bone, MIXAMO_ATTACH_BONES[bone]]));
 
 // One scratch set for the whole module: resolving a frame runs per attached
 // prop per frame and must never allocate.
@@ -36,7 +36,7 @@ export const placeEuler = new THREE.Euler();
 
 /** The bone a rig offers under `mixamoName`, by the project's matching rule
  * (normalised names equal, or one a suffix of the other; first depth-first
- * match wins — poses.js and ardy/playback.js agree). Cached per rig: this is
+ * match wins — poses.js and motion3/playback.js agree). Cached per rig: this is
  * asked once per attached prop per rendered frame. */
 export const attachBoneCache = new WeakMap();
 export function attachBoneOf(rig, mixamoName) {
@@ -65,8 +65,8 @@ export function attachBoneOf(rig, mixamoName) {
  * A carried prop takes the bone's place and facing; its size stays its own.
  *
  * `bone === null` is the character's animated ROOT: the hips' travel (during
- * playback the whole root trajectory lives in the bones — see
- * ardy/playback.js) carried at the character's own yaw, so a prop dropped on
+ * playback the hips travel lives in the bones — see motion3/playback.js)
+ * carried at the character's own yaw, so a prop dropped on
  * the character walks with the body instead of rolling with the hips.
  */
 export function attachFrameMatrix(rig, bone, out = new THREE.Matrix4()) {

package/src/stage-canvas-rigs.jsx

@@ -212,9 +212,7 @@ export function FollowCamRig({ enabled, frame, frameRef, scene, shot, camRef, lo
 		applied.current = null;
 		if (enabled) invalidate();
 	}, [scene, shot, enabled, invalidate]);
-	useEffect(() => {
-		if (enabled) invalidate();
-	}, [frame, enabled, invalidate]);
+	useEffect(() => { if (enabled) invalidate(); }, [frame, enabled, invalidate]);
 	useFrame(() => {
 		if (!enabled) return;
 		if (isInterrupted?.()) return; // the user is flying; yield until released
@@ -227,6 +225,8 @@ export function FollowCamRig({ enabled, frame, frameRef, scene, shot, camRef, lo
 		cam.position.set(sample.pos.x, sample.pos.y, sample.pos.z);
 		look.current.yaw = sample.yaw;
 		look.current.pitch = sample.pitch;
+		// A rail with a lens of its own carries it; otherwise this is the scene lens.
+		if (Math.abs(cam.fov - sample.fovDeg) > 1e-3) { cam.fov = sample.fovDeg; cam.updateProjectionMatrix(); }
 		invalidate();
 	});
 	return null;