cozyclay 3.0.2 → 3.1.0

package/src/props.jsx

@@ -2,11 +2,11 @@
  * Set props: low-poly clay maquettes to block against.
  *
  * The set is a bare room and a figure; a shot that needs "something in the
- * world" (a car to lean on, to walk past, to frame behind glass) has nothing
+ * world" (a wall to lean on, to walk past, to frame behind) has nothing
  * to work with. These props are built from primitives in the same clay style
  * as the Room and the character tint, so the whole frame stays one
- * consistent maquette. The hand-built set pieces live in set-pieces.jsx;
- * practical lights and glow in scene-lights.jsx and object-glow.js.
+ * consistent maquette. Practical lights and glow live in scene-lights.jsx
+ * and object-glow.js.
  */
 
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -25,7 +25,7 @@ import { EffectMarker, EffectsLayer } from "./effects/EffectsLayer.jsx";
 import { EFFECT_KIND } from "./effects/effect-record.js";
 import { applyPoseFade } from "./pose-fade.js";
 import { coplanarDepthRanks } from "./coplanar-depth.js";
-import { autoFlat, Car, Chair, SmallPlane } from "./set-pieces.jsx";
+import { autoFlat } from "./auto-flat.js";
 import { LIGHT_KIND, capPracticalShadows } from "./object-look.js";
 import { SceneLight, useLookRefresh } from "./scene-lights.jsx";
 import { placeObjectLook } from "./scene-light-place.js";
@@ -242,9 +242,6 @@ function SceneObjectContent({ object, depthRank = 0 }) {
 	if (renderer === MESH_KIND) return <ImportedMesh object={object} />;
 	if (renderer === SCULPT_KIND) return <Sculpt object={object} depthRank={depthRank} />;
 	if (renderer === TEXT_KIND) return <TextObject object={object} />;
-	if (renderer === "car") return <Car color={autoColor ?? color} autoColor={autoColor} />;
-	if (renderer === "small-plane") return <SmallPlane autoColor={autoColor} />;
-	if (renderer === "chair") return <Chair autoColor={autoColor} />;
 	if (PRIMITIVE_KINDS.has(renderer)) return <Primitive kind={renderer} color={color} autoColor={autoColor} depthRank={depthRank} />;
 	return null;
 }

package/src/retired-kinds.js

@@ -0,0 +1,37 @@
+// Object kinds an old project can carry that this build no longer ships.
+
+/**
+ * Kinds an earlier build shipped and this one does not (hand-built set
+ * pieces), with the standing size they had. They exist only so an old project
+ * still opens: each record becomes a plain cube with the same transform and
+ * the same size, so its blocking, collisions, route and children survive.
+ */
+const RETIRED_KINDS = Object.freeze({
+	chair: { width: 0.6, depth: 0.6, height: 1.15 },
+	car: { width: 1.8, depth: 4.5, height: 1.4 },
+	"small-plane": { width: 3.4, depth: 3.6, height: 1.4 },
+});
+
+/** A stored record of a retired kind as the cube that stands in for it; any
+ * other record is returned untouched. Scale absorbs the retired footprint, the
+ * same single-`scale` fallback normalizeSceneObject reads applies first. */
+export function retireObjectKind(record) {
+	const size = record && typeof record === "object" ? RETIRED_KINDS[record.renderer] : undefined;
+	if (!size) return record;
+	const single = record.scaleX === undefined && record.scaleY === undefined && record.scaleZ === undefined ? Number(record.scale) : NaN;
+	const axis = (value) => {
+		const n = value === undefined ? (Number.isFinite(single) ? single : 1) : Number(value);
+		return Number.isFinite(n) ? n : 1;
+	};
+	const { scale: _scale, ...rest } = record;
+	return {
+		...rest,
+		renderer: "cube",
+		scaleX: axis(record.scaleX) * size.width,
+		scaleY: axis(record.scaleY) * size.height,
+		scaleZ: axis(record.scaleZ) * size.depth,
+		footprint: { width: 1, depth: 1 },
+		height: 1,
+		supportY: 1,
+	};
+}

package/src/scene-objects.js

@@ -24,6 +24,7 @@ import { MESH_DEFAULT_HEIGHT, MESH_HEIGHT_MIN } from "./scene-mesh.js";
 import { normalizeSculptRecipe, sculptStandingBox } from "./sculpt-recipe.js";
 import { GREY_BOX } from "./object-colors.js";
 import { isEffectivelyHidden } from "./object-hidden.js";
+import { retireObjectKind } from "./retired-kinds.js";
 import { objectSize } from "./object-size.js";
 import { EFFECT_ENTRY, effectFields } from "./effects/effect-record.js";
 import { TEXT_ENTRY, TEXT_KIND, textFields, textPatch } from "./text/text-record.js";
@@ -65,8 +66,7 @@ const snapTo = (value, step) => Number((step > 0 ? Math.round(value / step) * st
  * object stands (used for the selection box and the gizmo's height).
  *
  * Primitives are grey-box grey on purpose: a blockout stands in for something
- * else, and a tinted maquette reads as a finished prop. The hand-built set
- * pieces keep their clay colours because they ARE the thing they depict.
+ * else, and a tinted maquette reads as a finished prop.
  */
 export const OBJECT_LIBRARY = [
 	{ kind: "cube", label: "Cube", group: "Primitives", footprint: { width: 1, depth: 1 }, height: 1, color: GREY_BOX },
@@ -75,11 +75,6 @@ export const OBJECT_LIBRARY = [
 	{ kind: "cylinder", label: "Cylinder", group: "Primitives", footprint: { width: 1, depth: 1 }, height: 1, color: GREY_BOX },
 	{ kind: "cone", label: "Cone", group: "Primitives", footprint: { width: 1, depth: 1 }, height: 1, color: GREY_BOX },
 	{ kind: "plane", label: "Plane", group: "Primitives", footprint: { width: 2, depth: 2 }, height: 0, color: GREY_BOX },
-	// supportY is the walkable surface, which can differ from the object's
-	// bounding height (a chair's back rises above its seat).
-	{ kind: "chair", label: "Chair", group: "Set pieces", footprint: { width: 0.6, depth: 0.6 }, height: 1.15, supportY: 0.495, color: "#b9855d" },
-	{ kind: "car", label: "Car", group: "Set pieces", footprint: { width: 1.8, depth: 4.5 }, height: 1.4, color: "#d98770" },
-	{ kind: "small-plane", label: "Plane (aircraft)", group: "Set pieces", footprint: { width: 3.4, depth: 3.6 }, height: 1.4, color: "#7896a4" },
 ];
 
 /**
@@ -994,6 +989,7 @@ function objectOpacity(value) {
 
 export function normalizeSceneObject(record) {
 	if (!record || typeof record !== "object" || Array.isArray(record)) return null;
+	record = retireObjectKind(record);
 	const entry = objectLibraryEntry(record.renderer);
 	if (!entry) return null;
 	if (typeof record.id !== "string" || !record.id) return null;

package/src/scenes.js

@@ -6,7 +6,7 @@ import { DEFAULT_SENSOR_FORMAT, SENSOR_FORMATS } from "./shot.js";
 import { normalizeStableItems } from "./stable-items.js";
 
 import { elementByPath } from "./studio-elements.js";
-import { wrapAngle } from "./scene-objects.js";
+import { wrapAngle } from "./scene-objects.js"; import { retireObjectKind } from "./retired-kinds.js";
 import { normalizeTakeSource } from "./domains/motion/take-source.js";
 import { createKeyLight, normalizeLighting } from "./stage-lighting.js";
 // The timeline clock lives in timeline-fps.js (three-free, so the agent
@@ -115,8 +115,6 @@ export function normalizeReferenceImage(value) {
 
 /** Stature band for a cast member: the gizmo's scale handles are a deliberate
  * artistic ask, and a previs giant or child is legitimate. */
-export const CHARACTER_SCALE_MIN = CHARACTER_SCALE_LIMITS.min;
-export const CHARACTER_SCALE_MAX = CHARACTER_SCALE_LIMITS.max;
 const clampScale = (value) => (Number.isFinite(value) && value > 0
 	? Math.max(CHARACTER_SCALE_LIMITS.min, Math.min(CHARACTER_SCALE_LIMITS.max, value))
 	: 1);
@@ -373,7 +371,8 @@ function repairScene(record, existing, fallbackNumber, fallbackStage, legacyCloc
 	return {
 		id: record.id,
 		name: uniqueName(typeof record.name === "string" ? record.name : `SCENE ${String(fallbackNumber).padStart(2, "0")}`, existing),
-		objects: record.objects.filter(plainObject).map((object) => cloneValue(object)),
+		// A kind this build no longer ships opens as the cube that stands in for it.
+		objects: record.objects.filter(plainObject).map((object) => retireObjectKind(cloneValue(object))),
 		// The shot document is a sealed envelope with its OWN version, and it
 		// migrates its own frames when its reader opens it.
 		shotDocument: cloneValue(record.shotDocument ?? null),
@@ -412,7 +411,7 @@ export function readSceneDocument(raw, legacyRaw = null) {
 				return { status: "corrupt", document: createSceneDocument(), dropped: 0, quarantineRaw: legacyRaw };
 			}
 			const document = createSceneDocument();
-			document.scenes[0].objects = legacy.objects.filter(plainObject).map((object) => cloneValue(object));
+			document.scenes[0].objects = legacy.objects.filter(plainObject).map((object) => retireObjectKind(cloneValue(object)));
 			return { status: "migrated", document, dropped: legacy.objects.length - document.scenes[0].objects.length };
 		}
 		return { status: "absent", document: createSceneDocument(), dropped: 0 };

package/src/settings-menu.jsx

@@ -7,8 +7,7 @@ import PreferencesDialog from "./shell/PreferencesDialog.jsx";
 // not belong on the Save/Export row as bare toggles.
 //
 // The trigger now opens the v2 Preferences dialog. The old language strings stay
-// here because the locale contract and the camera-tutorial source contract both
-// treat this file as the Settings entry point.
+// here because the locale contract treats this file as the Settings entry point.
 const LANGUAGES = [
 	{ id: "en", label: "English", action: "Switch to English" },
 	{ id: "ko", label: "한국어", action: "한국어로 전환" },
@@ -21,23 +20,6 @@ export default function SettingsMenu() {
 		setOpen(false);
 		triggerRef.current?.focus();
 	}, []);
-	const openCameraTutorial = useCallback(() => {
-		window.dispatchEvent(new CustomEvent("cozyclay:camera-tutorial", { detail: { open: true } }));
-		setOpen(false);
-	}, []);
-	const cameraTutorial = (
-		<>
-			<h4>{ko("Help", "도움말")}</h4>
-			<button
-				type="button"
-				data-testid="settings-camera-tutorial"
-				title={ko("Learn the camera in seven steps", "일곱 단계로 카메라 익히기")}
-				onClick={openCameraTutorial}
-			>
-				{ko("Camera tutorial", "카메라 튜토리얼")}
-			</button>
-		</>
-	);
 
 	// First-run cue: the studio starts in English even on a Korean browser, so
 	// the only visible hint that Korean exists used to be the old locale button.
@@ -64,7 +46,6 @@ export default function SettingsMenu() {
 				open={open}
 				onClose={close}
 				initialSection="Appearance"
-				cameraTutorial={cameraTutorial}
 			/>
 		</div>
 	);

package/src/shell/BottomDock.jsx

@@ -1,12 +1,13 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useStudioShell } from "./studio-shell-context.js";
+import { useStudioPlaybackFrame, useStudioShell } from "./studio-shell-context.js";
 import { logStore } from "./log-store.js";
 import "./dock.css";
 import LibrarySlot from "./LibrarySlot.jsx";
 import BoardSlot from "./BoardSlot.jsx";
+import LensScrub from "./lens-scrub.jsx";
 import { ko } from "../locale.js";
 import Timeline, { timelineTake } from "../motion/timeline.jsx";
-import { DEFAULT_PLAYBACK_SPEED, SHOT_ASPECT_PRESETS, sceneObjectNameDisplayKo } from "../app-stage.jsx";
+import { DEFAULT_PLAYBACK_SPEED, sceneObjectNameDisplayKo } from "../app-stage.jsx";
 
 import { trackFeature } from "../analytics.js";
 import { defaultRailRange } from "../camera-rail-schedule.js";
@@ -67,11 +68,11 @@ function dockTabsFor(previsMode) {
  * switching keeps the Sequencer's scroll and zoom and the Library's folder
  * and search. Any stored tab the mode does not offer opens its first tab. */
 export default function BottomDock({ tab: requestedTab = "animation", onTabChange, embedded = false }) {
-	const { previsMode } = useStudioShell();
+	const { previsMode } = useStudioShell(), liveFrame = useStudioPlaybackFrame();
 	const tabs = embedded ? dockTabsFor(null) : dockTabsFor(previsMode);
 	const tab = tabs.some((entry) => entry.key === requestedTab) ? requestedTab : tabs[0].key;
 	const {
-		tlFrame, motion, waypointMode, craneSelectedIndex,
+		motion, waypointMode, craneSelectedIndex,
 		isCameraSelection, addActiveCranePoint, deleteSelectedCranePoint, setCraneSelectedIndex, tlFrameCount,
 		tlFps, characters, activeCharIndex, ghostLayers, pathSpeed,
 		tlPlaying, workflowMode, waypoints, pendingWaypointFrame,
@@ -205,7 +206,7 @@ export default function BottomDock({ tab: requestedTab = "animation", onTabChang
 			{!embedded && previsMode === "storyboard" && <BoardSlot active={tab === "board"} />}
 			<div className="bottom-timeline" hidden={tab !== "animation"}>
 			<Timeline
-				frame={tlFrame}
+				frame={liveFrame}
 				craneSelectedIndex={craneSelectedIndex}
 				cameraSelected={isCameraSelection}
 				onCranePointAdd={addActiveCranePoint}
@@ -390,11 +391,10 @@ const CARD_RATIOS = [
 
 /** The shot camera's card at the dock's right end. The camera itself is drawn
  * into the stage canvas under `.vp-shot-preview`, which sits over the card's
- * frame slot (see glass.css); the card holds its title, ratio and look-through. */
+ * frame slot (see glass.css); the card holds its title, lens, ratio and look-through. */
 function ShotCard() {
-	const { activeShot, shot, shotAspectKey, runStudioAction, enterShotLook, exitShotLook, lookThroughShot, tlFps, embedMode } = useStudioShell();
+	const { activeShot, shot, fovDeg, shotsDomain, shotAspectKey, runStudioAction, enterShotLook, exitShotLook, lookThroughShot, tlFps, embedMode } = useStudioShell();
 	if (embedMode) return null;
-	const ratio = SHOT_ASPECT_PRESETS[shotAspectKey]?.label?.replace(/:1$/, "") ?? shotAspectKey;
 	const frames = activeShot && Number.isFinite(activeShot.startFrame) && Number.isFinite(activeShot.endFrame)
 		? `${activeShot.startFrame}–${activeShot.endFrame} · ${((activeShot.endFrame - activeShot.startFrame + 1) / (tlFps || 24)).toFixed(1)}s`
 		: null;
@@ -403,7 +403,7 @@ function ShotCard() {
 			<header className="dock-shot-head">
 				<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 5.75A1.5 1.5 0 0 1 3.5 4.25h6A1.5 1.5 0 0 1 11 5.75v4.5a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 2 10.25z M11 7l3-1.5v5L11 9" /></svg>
 				<span className="dock-shot-title">{ko("Shot Camera", "샷 카메라")}</span>
-				<span className="dock-shot-meta">{shot.focalMm} mm · {ratio}</span>
+				<LensScrub fovDeg={fovDeg} sensorHeightMm={shot?.usedSensorHeightMm} shotsDomain={shotsDomain} disabled={!shot} />
 			</header>
 			{/* While the main view looks through this camera the card has nothing
 			    of its own to show (the preview pass is off): it says where the

package/src/shell/MenuBar.jsx

@@ -196,7 +196,7 @@ export default function MenuBar({ preferences }) {
 		? panelCount ? "" : noPanels
 		: shots.length ? "" : ko("Add a shot first — a pack describes one cut", "샷을 먼저 추가하세요 — 팩은 컷 하나를 설명합니다");
 
-	// The camera tutorial's handoff opens Export directly; its flyout lives in File.
+	// Export's flyout lives in File, so an open Export menu opens File.
 	useEffect(() => {
 		if (exportMenuOpen) setOpen("file");
 	}, [exportMenuOpen]);
@@ -534,14 +534,6 @@ export default function MenuBar({ preferences }) {
 		),
 		help: (
 			<>
-				<button
-					type="button"
-					role="menuitem"
-					className="menubar-item"
-					onClick={item(() => window.dispatchEvent(new CustomEvent("cozyclay:camera-tutorial", { detail: { open: true, source: "help" } })))}
-				>
-					<span className="menubar-item-label">{ko("Tutorial", "튜토리얼")}</span>
-				</button>
 				<button type="button" role="menuitem" className="menubar-item" onClick={item(() => setDialog("shortcuts"))}>
 					<span className="menubar-item-label">{ko("Keyboard shortcuts", "단축키")}</span>
 				</button>

package/src/shell/PreferencesDialog.jsx

@@ -114,7 +114,7 @@ function ThemeControls() {
 }
 
 function preferenceSection(section, props) {
-	const { autoColor, setAutoColor, analyticsOptOut, setAnalyticsOptOutState, gridView, setGridView, cameraTutorial } = props;
+	const { autoColor, setAutoColor, analyticsOptOut, setAnalyticsOptOutState, gridView, setGridView } = props;
 	const languageControls = (
 		<div className="v2-preferences__language-controls">
 			{LANGUAGES.map((language) => (
@@ -158,7 +158,6 @@ function preferenceSection(section, props) {
 							/>
 						</PreferenceRow>
 					</PreferenceSection>
-					{cameraTutorial && <div className="v2-preferences__help">{cameraTutorial}</div>}
 				</>
 			);
 		case "Viewport":
@@ -181,7 +180,7 @@ function preferenceSection(section, props) {
 	}
 }
 
-export default function PreferencesDialog({ open, onClose, initialSection = "Appearance", cameraTutorial }) {
+export default function PreferencesDialog({ open, onClose, initialSection = "Appearance" }) {
 	const dialogRef = useRef(null);
 	const searchRef = useRef(null);
 	const closeRef = useRef(onClose);
@@ -233,7 +232,7 @@ export default function PreferencesDialog({ open, onClose, initialSection = "App
 	}, [open, initialSection]);
 
 	if (!open || typeof document === "undefined") return null;
-	const currentProps = { autoColor, setAutoColor, analyticsOptOut, setAnalyticsOptOutState, gridView, setGridView, cameraTutorial };
+	const currentProps = { autoColor, setAutoColor, analyticsOptOut, setAnalyticsOptOutState, gridView, setGridView };
 
 	return createPortal(
 		<div className="v2-preferences" data-testid="preferences-dialog-backdrop" onPointerDown={(event) => { if (event.target === event.currentTarget) closeRef.current?.(); }}>

package/src/shell/ViewportToolbar.jsx

@@ -11,7 +11,7 @@ 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 GhostsMenuGroup from "./GhostsMenuGroup.jsx"; import { addCameraShot } from "./add-camera-shot.js";
 import "./viewport.css";
 
 // G1: the single mode+tool pill. Keys 1-5 and W/E/R are bound in App's
@@ -122,7 +122,7 @@ export default function ViewportToolbar() {
 		autoColor, setAutoColor, isCharacterSelection, partColoursChoice, embedMode,
 		agentCollapsed, addSceneObject, spawnCharacter, characters, flySpeed,
 		ikEditTool, setIkEditTool, motion, setRangePinPartPick,
-		previsMode, sculptView, requestSculptView,
+		previsMode, sculptView, requestSculptView, appContext, setToast,
 	} = useStudioShell();
 	const menu = useOverlayMenu();
 
@@ -292,7 +292,7 @@ export default function ViewportToolbar() {
 									role="menuitem"
 									className="add-object-item"
 									data-add="camera"
-									onClick={() => { runStudioAction("shot.create"); menu.close(); }}
+									onClick={() => { addCameraShot({ appContext, runStudioAction, setToast }); menu.close(); }}
 								>
 									<span className="add-object-swatch vp-add-swatch-camera" aria-hidden="true" />
 									<span>{ko("Camera", "카메라")}</span>

package/src/shell/add-camera-shot.js

@@ -0,0 +1,11 @@
+// Add > Camera names the cut it made (ViewportToolbar). A refusal is already toasted by runStudioAction.
+import { ko } from "../locale.js";
+
+export function addCameraShot({ appContext, runStudioAction, setToast }) {
+	const shots = appContext.storeDomain("shot"), before = shots.read(), receipt = runStudioAction("shot.create");
+	const made = shots.read().find((row) => row.id === receipt?.affectedIds.find((id) => !before.some((old) => old.id === id)));
+	if (!made) return;
+	setToast(made.kind === "still"
+		? ko(`${made.name} added — a storyboard panel at frame ${made.startFrame}`, `${made.name} 추가됨 — ${made.startFrame}프레임의 스토리보드 패널`)
+		: ko(`${made.name} added — a camera cut at frame ${made.startFrame}`, `${made.name} 추가됨 — ${made.startFrame}프레임에서 카메라 컷`));
+}

package/src/shell/glass-regions.css

@@ -800,11 +800,12 @@
 
 /* ----------------------------------------------- Dock: Animation | Assets */
 /* The switch sits at the head's left end, where the Sequencer's transport
-   and the Library's Content | Log row start after it. */
+   and the Library's Content | Log row start after it. It paints above the
+   timeline (z-index 6, timeline.css), which would otherwise take its clicks. */
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-dock { --dock-tabs-w: 176px; }
 .app[data-shell="glass"]:not([data-embed-mode]) .dock-tabs {
 	position: absolute;
-	z-index: 3;
+	z-index: 7;
 	top: 9px;
 	left: 16px;
 	box-sizing: border-box;

package/src/shell/glass.css

@@ -326,11 +326,6 @@
 		font-size: 11.5px;
 		font-weight: 400;
 	}
-	.app[data-shell="glass"]:not([data-embed-mode]) .studio-project-head .project-menu {
-		top: calc(100% + 6px);
-		left: -6px;
-		z-index: 40;
-	}
 
 	/* --------------------------------------------- viewport overlay rails */
 	/* Overlays fill the open stage between the columns: the mode switch rides

package/src/shell/lens-scrub-math.js

@@ -0,0 +1,51 @@
+// The Shot Camera card's focal-length scrub (BottomDock ShotCard). The lens is
+// stored as a vertical FOV (shotsDomain.changeLens takes degrees); the card
+// speaks millimetres on the current filmback, the shot.js lens relation.
+import { PRIME_SET } from "../shot.js";
+
+// Editor lens range: shotsDomain.changeLens refuses FOVs outside 14-90°.
+const FOV_MIN = 14, FOV_MAX = 90;
+// px of horizontal drag per millimetre, and the Shift / Alt multipliers.
+const PX_PER_MM = 4, FINE = 0.1, COARSE = 4;
+
+const round1 = (value) => Math.round(value * 10) / 10;
+
+export function fovDegToMm(fovDeg, sensorHeightMm) {
+	return sensorHeightMm / (2 * Math.tan((fovDeg * Math.PI) / 360));
+}
+
+export function mmToFovDeg(mm, sensorHeightMm) {
+	return (2 * Math.atan(sensorHeightMm / (2 * mm)) * 180) / Math.PI;
+}
+
+/** The millimetre range the editor FOV range allows on this filmback. */
+export function lensRange(sensorHeightMm) {
+	return { min: round1(fovDegToMm(FOV_MAX, sensorHeightMm)) + 0.1, max: round1(fovDegToMm(FOV_MIN, sensorHeightMm)) - 0.1 };
+}
+
+export function clampMm(mm, range) {
+	return round1(Math.min(range.max, Math.max(range.min, mm)));
+}
+
+/** The lens a horizontal drag of dx px from startMm lands on. */
+export function dragMm(startMm, dx, { fine = false, coarse = false } = {}, range) {
+	const scale = fine ? FINE : coarse ? COARSE : 1;
+	return clampMm(startMm + (dx / PX_PER_MM) * scale, range);
+}
+
+/** A click steps to the next real prime in range, wrapping to the widest. */
+export function nextPrime(mm, range) {
+	const primes = PRIME_SET.filter((prime) => prime >= range.min && prime <= range.max);
+	return primes.find((prime) => prime > mm + 0.05) ?? primes[0];
+}
+
+/** The left arrow steps back to the previous real prime, wrapping to the longest. */
+export function previousPrime(mm, range) {
+	const primes = PRIME_SET.filter((prime) => prime >= range.min && prime <= range.max);
+	return [...primes].reverse().find((prime) => prime < mm - 0.05) ?? primes.at(-1);
+}
+
+export function formatMm(mm) {
+	const value = round1(mm);
+	return `${Number.isInteger(value) ? value : value.toFixed(1)} mm`;
+}

package/src/shell/lens-scrub.css

@@ -0,0 +1,73 @@
+/* The Shot Camera card's focal-length scrub (lens-scrub.jsx): a small field, the mm value over a track with a
+   thumb, so it reads as a control at rest; the step arrows appear just outside it on hover, taking no width. */
+.dock-lens-scrub {
+	position: relative;
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 0;
+	padding: 1px;
+	border-radius: 6px;
+	background: var(--chip-fill, rgba(127, 127, 127, .1));
+	color: var(--text-1, currentColor);
+	font: 500 11px var(--sans);
+	font-variant-numeric: tabular-nums;
+	cursor: ew-resize;
+	user-select: none;
+	touch-action: none;
+}
+.dock-lens-body { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 2px 4px; }
+.dock-lens-value { line-height: 1; white-space: nowrap; text-align: center; }
+.dock-lens-track {
+	position: relative;
+	width: 38px;
+	height: 2px;
+	border-radius: 1px;
+	background: var(--hairline, rgba(127, 127, 127, .3));
+}
+.dock-lens-fill {
+	position: absolute;
+	inset: 0 auto 0 0;
+	width: var(--lens-at, 0%);
+	border-radius: inherit;
+	background: var(--text-3, currentColor);
+}
+.dock-lens-thumb {
+	position: absolute;
+	top: 50%;
+	left: var(--lens-at, 0%);
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background: var(--text-2, currentColor);
+	box-shadow: 0 0 0 1px var(--surface-raised, #fff);
+	transform: translate(-50%, -50%);
+}
+.dock-lens-step {
+	position: absolute;
+	top: 50%;
+	display: grid;
+	place-items: center;
+	width: 12px;
+	height: 18px;
+	border-radius: 3px;
+	color: var(--text-3, currentColor);
+	cursor: pointer;
+	opacity: 0;
+	transform: translateY(-50%);
+	transition: opacity .12s;
+}
+.dock-lens-step[data-step="back"] { right: 100%; }
+.dock-lens-step[data-step="next"] { left: 100%; }
+.dock-lens-scrub:is(:hover, :focus-visible, .dragging) .dock-lens-step { opacity: 1; }
+.dock-lens-step:hover { color: var(--select); background: var(--hairline, rgba(127, 127, 127, .2)); }
+.dock-lens-scrub:hover,
+.dock-lens-scrub.dragging { color: var(--select); }
+.dock-lens-scrub:hover .dock-lens-fill,
+.dock-lens-scrub.dragging .dock-lens-fill,
+.dock-lens-scrub:hover .dock-lens-thumb,
+.dock-lens-scrub.dragging .dock-lens-thumb { background: var(--select); }
+.dock-lens-scrub.dragging .dock-lens-thumb { transform: translate(-50%, -50%) scale(1.3); }
+.dock-lens-scrub:focus-visible { outline: 2px solid var(--select); outline-offset: 1px; }
+.dock-lens-scrub[aria-disabled="true"] { cursor: default; opacity: .45; background: none; box-shadow: none; color: var(--label, var(--text-2)); }
+.dock-lens-scrub[aria-disabled="true"] :is(.dock-lens-fill, .dock-lens-thumb, .dock-lens-step) { visibility: hidden; }

package/src/shell/lens-scrub.jsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from "react";
+import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
+import { ko } from "../locale.js";
+import { PRESETS } from "../app-stage.jsx";
+import { clampMm, dragMm, fovDegToMm, formatMm, lensRange, mmToFovDeg, nextPrime, previousPrime } from "./lens-scrub-math.js";
+import "./lens-scrub.css";
+
+// A drag starts after this many px; less is a click (the next prime).
+const DRAG_SLOP = 3;
+// A click waits this long so a double-click (reset) does not also step.
+const CLICK_DELAY_MS = 220;
+
+/** The Shot Camera card's focal length: drag left/right to change the lens.
+ * A drag is one undo step (shotsDomain's gesture commits on pointer-up, Esc
+ * cancels); a click steps to the next prime (the left arrow: the previous
+ * one); a double-click resets. It is drawn as a field with arrows and a thumb
+ * so it reads as something to drag, not as a label. */
+export default function LensScrub({ fovDeg, sensorHeightMm, shotsDomain, disabled = false }) {
+	const off = disabled || !shotsDomain || !Number.isFinite(fovDeg) || !(sensorHeightMm > 0);
+	const range = off ? { min: 0, max: 0 } : lensRange(sensorHeightMm);
+	const mm = off ? 0 : clampMm(fovDegToMm(fovDeg, sensorHeightMm), range);
+	const drag = useRef(null);
+	const clickTimer = useRef(0);
+	const [dragging, setDragging] = useState(false);
+	useEffect(() => () => clearTimeout(clickTimer.current), []);
+
+	const setMm = (value) => shotsDomain.changeLens(mmToFovDeg(clampMm(value, range), sensorHeightMm));
+	const onPointerDown = (event) => {
+		if (off || event.button !== 0) return;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		drag.current = { x: event.clientX, mm, moved: false, back: event.target.closest?.("[data-step]")?.dataset.step === "back" };
+	};
+	const onPointerMove = (event) => {
+		const state = drag.current;
+		if (!state) return;
+		const dx = event.clientX - state.x;
+		if (!state.moved) {
+			if (Math.abs(dx) < DRAG_SLOP) return;
+			state.moved = true;
+			setDragging(true);
+			shotsDomain.beginGesture();
+		}
+		setMm(dragMm(state.mm, dx, { fine: event.shiftKey, coarse: event.altKey }, range));
+	};
+	const onPointerUp = () => {
+		const state = drag.current;
+		drag.current = null;
+		setDragging(false);
+		if (!state || state.moved) return;
+		clearTimeout(clickTimer.current);
+		clickTimer.current = setTimeout(() => setMm((state.back ? previousPrime : nextPrime)(state.mm, range)), CLICK_DELAY_MS);
+	};
+	const onDoubleClick = () => {
+		if (off) return;
+		clearTimeout(clickTimer.current);
+		shotsDomain.changeLens(PRESETS.medium.fov);
+	};
+	const onKeyDown = (event) => {
+		if (off || (event.key !== "ArrowLeft" && event.key !== "ArrowRight")) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const step = (event.shiftKey ? 10 : 1) * (event.key === "ArrowRight" ? 1 : -1);
+		setMm(Math.round(mm + step));
+	};
+
+	return (
+		<span
+			className={"dock-lens-scrub" + (dragging ? " dragging" : "")}
+			role="slider"
+			tabIndex={off ? -1 : 0}
+			aria-label={ko("Focal length", "초점 거리")}
+			aria-disabled={off || undefined}
+			aria-valuemin={range.min}
+			aria-valuemax={range.max}
+			aria-valuenow={mm}
+			aria-valuetext={off ? ko("No shot camera", "샷 카메라 없음") : formatMm(mm)}
+			aria-orientation="horizontal"
+			title={ko("Focal length — drag to change, click an arrow for the next lens", "초점 거리 — 드래그해 변경, 화살표를 눌러 다음 렌즈")}
+			data-testid="dock-lens-scrub"
+			onPointerDown={onPointerDown}
+			onPointerMove={onPointerMove}
+			onPointerUp={onPointerUp}
+			onPointerCancel={() => { drag.current = null; setDragging(false); }}
+			onDoubleClick={onDoubleClick}
+			onKeyDown={onKeyDown}
+		>
+			<span className="dock-lens-step" data-step="back" aria-hidden="true"><FiChevronLeft size={9} /></span>
+			<span className="dock-lens-body">
+				<span className="dock-lens-value">{off ? "— mm" : formatMm(mm)}</span>
+				<span className="dock-lens-track" aria-hidden="true" style={{ "--lens-at": `${off ? 0 : ((mm - range.min) / (range.max - range.min)) * 100}%` }}>
+					<span className="dock-lens-fill" />
+					<span className="dock-lens-thumb" />
+				</span>
+			</span>
+			<span className="dock-lens-step" data-step="next" aria-hidden="true"><FiChevronRight size={9} /></span>
+		</span>
+	);
+}

package/src/shell/mode.css

@@ -1,12 +1,13 @@
 /* Pose mode (#521) is IK editing on the motion workspace: it hides what
-   Motion hides (scene transform and camera framing chrome, the inset and the
-   shot preview) and shows the mode hint. The timeline's pose-correction
-   tools are hidden only in Scene and Camera, so they stay visible here. */
+   Motion hides (scene transform and camera framing chrome, the inset) and
+   shows the mode hint. The shot preview stays: it is drawn into the dock's
+   Shot Camera frame, and hiding it left that frame a hole onto the editor
+   view. The timeline's pose-correction tools are hidden only in Scene and
+   Camera, so they stay visible here. */
 .app[data-workflow-mode="pose"] .workflow-scene-context,
 .app[data-workflow-mode="pose"] .workflow-camera-context { display: none; }
 .app[data-workflow-mode="pose"] .workflow-toolbar-hint { display: inline-flex; }
-.app[data-workflow-mode="pose"] .vp-inset,
-.app[data-workflow-mode="pose"] .vp-shot-preview { display: none !important; }
+.app[data-workflow-mode="pose"] .vp-inset { display: none !important; }
 
 /* A storyboard project (#650) is stills: the take, motion and pose-correction
    tools, the root-path (waypoint) switch and a prop's Top-View travel path