cozyclay 2.1.1 → 3.0.0

package/src/object-look.js

@@ -0,0 +1,196 @@
+/**
+ * Practical lights and glow: the record fields, their defaults and clamps, and
+ * the per-frame numbers the renderer reads (flicker, take level, shadow cap).
+ *
+ * Pure on purpose: no three.js and no React, so the agent sidecar, the record
+ * normalizer and Node tests all read the same rules.
+ *
+ * A light is a record with renderer "light". It is created from one of two
+ * catalogue kinds, `point-light` and `spot-light`, which differ only in the
+ * `light.type` they start with. Like an Empty it has no size: no collision, no
+ * surface, no footprint on the plan.
+ *
+ * `glow` can sit on any record. It makes the record's materials emissive and
+ * adds a camera-facing additive halo, so an ember or a bulb reads as a light
+ * source in the shot render without any post-processing pass.
+ */
+
+import { normalizeObjectColor } from "./object-colors.js";
+
+export const LIGHT_KIND = "light";
+
+/** three.js intensity per authored unit. Authored values are candela-like
+ * (decay 2: lighter flame 0.3-0.6, candle 0.3, desk lamp 5, street lamp 40).
+ * The scale is tuned against the default stage key (directional, 1.12) so a
+ * street lamp's pool at 4 m reads about as bright as half the key, and a
+ * lighter 25 cm from a face lifts it to roughly the key. */
+export const LIGHT_INTENSITY_SCALE = 0.35;
+
+/** At most this many practical lights render shadows (each point shadow is six
+ * extra depth passes). The rest still light the scene and are reported. */
+export const PRACTICAL_SHADOW_CAP = 2;
+
+const LIGHT_DEFAULTS = Object.freeze({
+	point: Object.freeze({ type: "point", color: "#ffc787", intensity: 5, range: 0, angle: 30, softness: 0.3, shadow: false, flicker: 0, aim: null }),
+	spot: Object.freeze({ type: "spot", color: "#ffe0b2", intensity: 40, range: 0, angle: 30, softness: 0.3, shadow: true, flicker: 0, aim: null }),
+});
+const GLOW_DEFAULTS = Object.freeze({ color: "#ff9a3c", intensity: 4, halo: 1.5 });
+
+const LIGHT_SIZE = { footprint: { width: 0, depth: 0 }, height: 0 };
+/** The record entry every light normalizes through. */
+const LIGHT_ENTRY = Object.freeze({ kind: LIGHT_KIND, label: "Light", group: "Lights", ...LIGHT_SIZE, color: "#ffd38a" });
+/** The two creatable kinds: the add menu and the agent catalogue list these.
+ * `placeY` is where a fresh one hangs, so it lights something on arrival. */
+export const LIGHT_MENU_ENTRIES = Object.freeze([
+	Object.freeze({ kind: "point-light", renderer: LIGHT_KIND, label: "Point light", group: "Lights", ...LIGHT_SIZE, color: "#ffc787", placeY: 1.5, light: LIGHT_DEFAULTS.point }),
+	Object.freeze({ kind: "spot-light", renderer: LIGHT_KIND, label: "Spot light", group: "Lights", ...LIGHT_SIZE, color: "#ffe0b2", placeY: 3, light: LIGHT_DEFAULTS.spot }),
+]);
+
+/** The library entry for a light kind or the light renderer, or null. */
+export function lightLibraryEntry(kind) {
+	if (kind === LIGHT_KIND) return LIGHT_ENTRY;
+	return LIGHT_MENU_ENTRIES.find((entry) => entry.kind === kind) ?? null;
+}
+
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const finite = (value, fallback, min, max) => {
+	const n = typeof value === "number" || typeof value === "string" ? Number(value) : NaN;
+	return Number.isFinite(n) ? clamp(n, min, max) : fallback;
+};
+const hex = (value, fallback) => normalizeObjectColor(value) ?? fallback;
+const point = (value) => {
+	if (!value || typeof value !== "object") return null;
+	const out = { x: Number(value.x), y: Number(value.y), z: Number(value.z) };
+	return Object.values(out).every(Number.isFinite) ? out : null;
+};
+
+/** A stored or requested light repaired into the full record. `type` falls back
+ * to `typeHint` (the kind it was created as), then to "point". */
+export function normalizeObjectLight(value, typeHint = "point") {
+	const source = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+	const type = source.type === "spot" || source.type === "point" ? source.type : typeHint === "spot" ? "spot" : "point";
+	const base = LIGHT_DEFAULTS[type];
+	return {
+		type,
+		color: hex(source.color, base.color),
+		intensity: finite(source.intensity, base.intensity, 0, 1000),
+		range: finite(source.range, base.range, 0, 100),
+		angle: finite(source.angle, base.angle, 1, 89),
+		softness: finite(source.softness, base.softness, 0, 1),
+		shadow: typeof source.shadow === "boolean" ? source.shadow : base.shadow,
+		flicker: finite(source.flicker, base.flicker, 0, 1),
+		aim: point(source.aim),
+	};
+}
+
+/** A glow repaired into `{ color, intensity, halo }`, or null for none. */
+export function normalizeObjectGlow(value) {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+	return {
+		color: hex(value.color, GLOW_DEFAULTS.color),
+		intensity: finite(value.intensity, GLOW_DEFAULTS.intensity, 0, 20),
+		halo: finite(value.halo, GLOW_DEFAULTS.halo, 0, 4),
+	};
+}
+
+/** The light/glow fields a normalized record carries. A light renderer always
+ * has a light; any record keeps a glow only when it has one, so records written
+ * before glow existed come back byte-for-byte unchanged. */
+export function objectLookFields(record, entry) {
+	const out = {};
+	if ((entry.renderer ?? entry.kind) === LIGHT_KIND) out.light = normalizeObjectLight(record.light, record.light?.type ?? entry.light?.type);
+	const glow = normalizeObjectGlow(record.glow);
+	if (glow) out.glow = glow;
+	// A kit part a take switches on (a muzzle flash and its light) stays hidden without one (object-travel.js trackShown).
+	if (record.showOnlyInTake === true) out.showOnlyInTake = true;
+	return out;
+}
+
+/** The light/glow part of an object.update patch: each field merges over the
+ * record's own and is repaired; `glow: null` removes the glow. Only changes are
+ * returned. A light on a record that is not a light is ignored. */
+export function objectLookPatch(object, patch) {
+	const update = {};
+	if (patch?.light && typeof patch.light === "object" && object.renderer === LIGHT_KIND) {
+		const next = normalizeObjectLight({ ...object.light, ...patch.light }, object.light?.type);
+		if (JSON.stringify(next) !== JSON.stringify(object.light)) update.light = next;
+	}
+	if (patch?.glow !== undefined) {
+		const next = patch.glow === null ? null : normalizeObjectGlow({ ...(object.glow ?? {}), ...patch.glow });
+		if (JSON.stringify(next) !== JSON.stringify(object.glow ?? null)) update.glow = next;
+	}
+	return update;
+}
+
+/** 32-bit FNV-1a of the record id: the flicker's seed. */
+function seedOf(id) {
+	let hash = 0x811c9dc5;
+	for (const char of String(id)) {
+		hash ^= char.codePointAt(0);
+		hash = Math.imul(hash, 0x01000193) >>> 0;
+	}
+	return hash;
+}
+
+/** Lattice value in [-1, 1] for an integer cell of a seeded stream. */
+function lattice(seed, cell) {
+	let h = Math.imul(seed ^ Math.imul(cell, 0x27d4eb2d), 0x165667b1) >>> 0;
+	h = Math.imul(h ^ (h >>> 15), 0x85ebca6b) >>> 0;
+	h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35) >>> 0;
+	return ((h ^ (h >>> 16)) >>> 0) / 0x7fffffff - 1;
+}
+
+/** Smooth value noise in [-1, 1] at time `t` (cells of 1). */
+function noise(seed, t) {
+	const cell = Math.floor(t);
+	const f = t - cell;
+	const s = f * f * (3 - 2 * f);
+	return lattice(seed, cell) * (1 - s) + lattice(seed, cell + 1) * s;
+}
+
+/**
+ * The flicker multiplier of a light at `frame`: a pure function of the id, the
+ * frame and the amount, so scrubbing, playback and export see the same value.
+ * 0 is steady (exactly 1); 0.3 wavers like a candle; 0.6 jumps like a lighter.
+ */
+export function flickerAt(id, frame, amount, fps = 24) {
+	const depth = finite(amount, 0, 0, 1);
+	if (!(depth > 0)) return 1;
+	const seed = seedOf(id);
+	const t = (Number(frame) || 0) / (fps > 0 ? fps : 24);
+	const n = 0.55 * noise(seed, t * 7) + 0.3 * noise(seed ^ 0x9e3779b9, t * 15) + 0.15 * noise(seed ^ 0x7f4a7c15, t * 31);
+	return Math.max(0, 1 + depth * 0.65 * n);
+}
+
+/**
+ * Which shown lights that ask for a shadow get one: the first
+ * PRACTICAL_SHADOW_CAP in record order. `capped` lists the rest by id.
+ * `isHidden(record)` drops records the stage does not draw.
+ */
+export function practicalShadows(objects, isHidden = (object) => object?.hidden === true) {
+	const asking = (objects ?? []).filter((object) => object?.renderer === LIGHT_KIND && object.light?.shadow === true && !isHidden(object));
+	return { casting: asking.slice(0, PRACTICAL_SHADOW_CAP).map((object) => object.id), capped: asking.slice(PRACTICAL_SHADOW_CAP).map((object) => object.id) };
+}
+
+/** The records as the stage draws them: lights past the shadow cap render with
+ * `shadow: false` and `shadowCapped: true`. The same array when none is capped. */
+export function capPracticalShadows(objects) {
+	const capped = new Set(practicalShadows(objects).capped);
+	if (!capped.size) return objects;
+	return objects.map((object) => (capped.has(object.id) ? { ...object, light: { ...object.light, shadow: false }, shadowCapped: true } : object));
+}
+
+/** Receipt warnings, one per light that asked for a shadow but is past the cap,
+ * limited to `ids` when given (the records an edit touched). */
+function shadowCapWarnings(objects, ids = null, isHidden = undefined) {
+	const { casting, capped } = practicalShadows(objects, isHidden);
+	return capped.filter((id) => !ids || ids.includes(id)).slice(0, 4).map((id) => ({ code: "SHADOW_CAP", id,
+		message: `Renders without a shadow: only ${PRACTICAL_SHADOW_CAP} lights cast shadows (${casting.join(", ")}).`.slice(0, 120) }));
+}
+
+/** A command result with the shadow-cap warnings for the records it touched
+ * appended, so a receipt says when a requested shadow is not drawn. */
+export function withShadowCapWarnings(result, objects) {
+	const warnings = shadowCapWarnings(objects, result?.affectedIds ?? []);
+	return warnings.length ? { ...result, warnings: [...(result.warnings ?? []), ...warnings] } : result;
+}

package/src/object-size.js

@@ -0,0 +1,10 @@
+// A leaf module: the motion compiler's scene reader (motion3/scene.js) needs an object's size without
+// scene-objects.js, which imports three; the agent sidecar reaches motion3 through motion.describe and must not.
+/** The object's world size along each axis, for the gizmo and the plan board. */
+export function objectSize(object) {
+	return {
+		width: (object.footprint?.width ?? 1) * (object.scaleX ?? 1),
+		height: (object.height ?? 1) * (object.scaleY ?? 1),
+		depth: (object.footprint?.depth ?? 1) * (object.scaleZ ?? 1),
+	};
+}

package/src/object-travel.js

@@ -66,8 +66,67 @@ export function travelPose(object, at) {
 	};
 }
 
-/** The record's own route sample as a matrix, or null when it does not travel. */
+const trackFrame = (track, frame) => Math.max(0, Math.min(track.frameCount - 1, Math.round(frame) || 0));
+
+// A compiled take's per-frame pose for the record (a hinged door), as a matrix, or null. A
+// switch track (vis/lvl only, no pos/quat: C15) is no motion of its own, so a parent's carry still applies.
+function trackMatrix(object, frame, take, out) {
+	const track = take?.objectTracks?.get?.(object.id);
+	if (!track?.pos) return null;
+	const f = trackFrame(track, frame);
+	scratchPos.set(track.pos[f * 3], track.pos[f * 3 + 1], track.pos[f * 3 + 2]);
+	scratchQuat.set(track.quat[f * 4], track.quat[f * 4 + 1], track.quat[f * 4 + 2], track.quat[f * 4 + 3]);
+	scratchScale.set(object.scaleX ?? 1, object.scaleY ?? 1, object.scaleZ ?? 1);
+	return out.compose(scratchPos, scratchQuat, scratchScale);
+}
+
+// The record's own vis track at `frame`: true or false, null when the take has none for it.
+const visAt = (id, frame, take) => {
+	const track = take?.objectTracks?.get?.(id);
+	return track?.vis ? track.vis[trackFrame(track, frame)] === 1 : null;
+};
+
+// False while a compiled take carries the record out of sight (a cigarette still in the pocket),
+// or hides a record it is grouped under: with `objects` (the authored records, a Map by id or the
+// list) every ancestor's vis track counts too, so a group's visible channel hides its parts.
+// A record marked showOnlyInTake (a kit's flame, ember, tip smoke, exhale puff or muzzle flash, and
+// their lights) is hidden unless a vis track drives it: its own or, with `objects`, a group's above it
+// (the exhale kit's root shows its puff). A static scene never draws it.
+export function trackShown(id, frame, take, objects = null) {
+	const lookup = objects && asLookup(objects), own = visAt(id, frame, take);
+	if (own === false) return false;
+	let driven = own === true;
+	if (lookup && take?.objectTracks?.size) {
+		const seen = new Set([id]);
+		for (let parent = lookup.get(id)?.parent; typeof parent === "string" && !seen.has(parent); parent = lookup.get(parent)?.parent) {
+			seen.add(parent);
+			const shown = visAt(parent, frame, take);
+			if (shown === false || (shown === null && lookup.get(parent)?.showOnlyInTake === true)) return false;
+			driven ||= shown === true;
+		}
+	}
+	return driven || lookup?.get(id)?.showOnlyInTake !== true;
+}
+
+// The take's level of the record at `frame` (its lvl track: 0 dark, 1 as authored, up to 4; C15), else 1.
+export function trackLevel(id, frame, take) {
+	const track = take?.objectTracks?.get?.(id), value = track?.lvl ? Number(track.lvl[trackFrame(track, frame)]) : 1;
+	return Number.isFinite(value) ? Math.min(4, Math.max(0, value)) : 1;
+}
+
+/**
+ * True while a compiled take holds the record in a hand (a grabbed cup): its track is in world
+ * space then, so the carry from its own parents (the table it stood on) is cut, like `attach`.
+ */
+function held(id, frame, take) {
+	const track = take?.objectTracks?.get?.(id);
+	return !!track?.hold && track.hold[trackFrame(track, frame)] === 1;
+}
+
+/** The record's own route sample (or compiled track) as a matrix, or null when it does not travel. */
 function ownTravelMatrix(object, frame, take, out) {
+	const tracked = trackMatrix(object, frame, take, out);
+	if (tracked) return tracked;
 	if (!object.path) return null;
 	const at = objectTransformAt(object, frame, take);
 	if (!at) return null;
@@ -129,11 +188,13 @@ export function sceneObjectTravelMatrixAt(objects, id, frame, take = {}, out = n
 	for (let index = chain.length - 1; index >= 0; index -= 1) {
 		const ancestor = chain[index];
 		if (!ownTravelMatrix(ancestor, frame, take, scratchOwn)) continue;
+		if (held(ancestor.id, frame, take)) scratchMotion.identity();
 		scratchMotion.multiply(scratchOwn).multiply(authoredMatrix(ancestor, scratchAuthored).invert());
 		moved = true;
 	}
 	const own = ownTravelMatrix(object, frame, take, scratchOwn);
 	if (!moved && !own) return null;
+	if (own && held(object.id, frame, take)) return out.copy(own);
 	return out.multiplyMatrices(scratchMotion, own ?? authoredMatrix(object, scratchAuthored));
 }
 
@@ -177,11 +238,12 @@ const wrapDegrees = (value) => {
 
 /**
  * The records as they stand at `frame`: x/y/z and rotation replaced for every
- * record that travels on its own route or under a routed ancestor. Untouched
+ * record that travels on its own route or compiled track, or under an ancestor
+ * that does. Untouched
  * records are returned as-is, and so is the list when nothing moves.
  */
 export function sceneObjectsAt(objects, frame, take = {}) {
-	if (!objects.some((object) => object.path)) return objects;
+	if (!objects.some((object) => object.path || object.showOnlyInTake || take?.objectTracks?.has?.(object.id))) return objects;
 	const lookup = asLookup(objects);
 	const matrix = new Matrix4();
 	const position = new Vector3();
@@ -205,8 +267,11 @@ export function sceneObjectsAt(objects, frame, take = {}) {
 		}
 		return next;
 	};
-	return objects.map((object) => {
-		if (object.attach || (!ancestorsOf(lookup, object).some((ancestor) => ancestor.path) && !ridden(lookup, object))) {
+	return objects.map((object) => { const record = placedAt(object); return trackShown(record.id, frame, take, lookup) ? record : { ...record, hidden: true }; });
+	function placedAt(object) {
+		// A compiled track (a hinged door, a carried cup) on the record or above it places it too; a switch track moves nothing.
+		const tracked = (record) => !!take?.objectTracks?.get?.(record.id)?.pos;
+		if (object.attach || (!tracked(object) && !ancestorsOf(lookup, object).some((ancestor) => ancestor.path || tracked(ancestor)) && !ridden(lookup, object))) {
 			// Nothing above it travels (and nothing below carries it): the route
 			// sample alone, exactly as before the hierarchy carry — for a carried
 			// prop, in the frame its numbers already live in.
@@ -220,5 +285,5 @@ export function sceneObjectsAt(objects, frame, take = {}) {
 		}
 		if (!sceneObjectTravelMatrixAt(lookup, object.id, frame, take, matrix)) return object;
 		return recordAt(object, matrix);
-	});
+	}
 }

package/src/panels/CameraPanel.jsx

@@ -9,9 +9,9 @@ export default function CameraPanel({ isCameraSelection, shot, moveSequence, cam
 	return (
 <Foldout hidden={!isCameraSelection} title={ko("Camera", "카메라")}>
 						<div className="readout v2-details-readout">
-						<span title={ko("camera to subject", "카메라와 피사체 거리")}>{shot.distance.toFixed(2)} m</span>
-						<span title={ko("nearest prime on the cropped filmback", "크롭된 필름백 기준 가장 가까운 단렌즈")}>{shot.focalMm} mm</span>
-						<span title={ko("angle relative to the subject's eyes", "피사체 눈높이 기준 각도")}>{shot.elevationDeg.toFixed(0)}°</span>
+						<span title={ko("camera to subject", "카메라와 피사체 거리")}><small>{ko("Distance", "거리")}</small> {shot.distance.toFixed(2)} m</span>
+						<span title={ko("nearest prime on the cropped filmback", "크롭된 필름백 기준 가장 가까운 단렌즈")}><small>{ko("Lens", "렌즈")}</small> {shot.focalMm} mm</span>
+						<span title={ko("angle relative to the subject's eyes", "피사체 눈높이 기준 각도")}><small>{ko("Angle", "각도")}</small> {shot.elevationDeg.toFixed(0)}°</span>
 						</div>
 						<h3 className="move-head v2-details-subsection-title">{ko("Move keys", "움직임 키")}</h3>
 						{moveSequence ? (
@@ -19,11 +19,11 @@ export default function CameraPanel({ isCameraSelection, shot, moveSequence, cam
 								{moveSequence.displaySlate} · {moveSequence.spanS}{ko("s", "초")}
 							</div>
 						) : (
-							<div className="move-slate v2-details-value-box">
+							<p className="inspector-hint v2-details-hint">
 								{cameraKeys.length === 1
-									? (isKo ? `프레임 ${cameraKeys[0].frame}부터 고정 샷 — 샷 블록 아래 빈 줄을 클릭해 움직임을 추가하세요` : `locked-off hold from frame ${cameraKeys[0].frame} — click the empty lower strip in a Shot block to add a move`)
-									: ko("click a Shot block's lower strip to key the current framing at that frame", "샷 블록 아래 빈 줄을 클릭하면 해당 프레임에 현재 프레이밍을 저장합니다")}
-							</div>
+									? (isKo ? `프레임 ${cameraKeys[0].frame}부터 고정 샷이에요. 샷 블록 아래 빈 줄을 클릭해 움직임을 추가하세요.` : `Locked-off hold from frame ${cameraKeys[0].frame}. Click the empty lower strip of a Shot block to add a move.`)
+									: ko("Click a Shot block's lower strip to key the current framing at that frame.", "샷 블록 아래 빈 줄을 클릭하면 해당 프레임에 현재 프레이밍을 저장합니다.")}
+							</p>
 						)}
 
 						<h3 className="move-head v2-details-subsection-title">{ko("Follow cam", "팔로우 카메라")}</h3>

package/src/panels/HdrEnvironmentControls.jsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { ko } from "../locale.js";
+import { Dropdown, Field, Slider } from "../ui.jsx";
+import { HDR_BUILTINS } from "../stage-hdr.js";
+import { hdrEnvironmentCatalogue, importHdrFile, refreshHdrLibrary, subscribeHdrLibrary } from "../stage-hdr-library.js";
+
+const KO_NAMES = Object.fromEntries(HDR_BUILTINS.map(({ id, ko: name }) => [id, name]));
+
+/**
+ * The Light panel's HDR environment: load a .hdr / .exr / equirectangular
+ * picture, pick a loaded or built-in map, turn and scale it, show it as the
+ * backdrop or not, remove it. Picking, loading and removing are one undo step
+ * each; the sliders ride the panel's gesture transaction (`setLighting`).
+ */
+export default function HdrEnvironmentControls({ lighting, run, setLighting }) {
+	const environments = useSyncExternalStore(subscribeHdrLibrary, hdrEnvironmentCatalogue);
+	const [problem, setProblem] = useState(null), [loading, setLoading] = useState(false), input = useRef(null);
+	useEffect(() => { void refreshHdrLibrary(); }, []);
+	// A map lights the set only while envLight > 0, so choosing one under the studio look turns that on too.
+	const choose = (hdr) => run("stage.set", { lighting: hdr ? { hdr, ...(lighting.envLight > 0 ? {} : { envLight: 1 }) } : { hdr: null } });
+	const load = async (event) => {
+		const file = event.target.files?.[0];
+		event.target.value = "";
+		if (!file) return;
+		setLoading(true);
+		try {
+			const { id } = await importHdrFile(file);
+			setProblem(null);
+			choose(id);
+		} catch (error) {
+			setProblem(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+	const options = [{ value: "", label: ko("None (the look's sky)", "없음 (룩의 하늘)") },
+		...environments.map(({ id, name, source }) => ({ value: id, label: source === "builtin" ? ko(name, KO_NAMES[id] ?? name) : name }))];
+	return (
+		<div data-testid="hdr-environment">
+			<Field label={ko("HDR environment", "HDR 환경")}>
+				<Dropdown value={lighting.hdr ?? ""} ariaLabel={ko("HDR environment", "HDR 환경")} options={options} onChange={(value) => choose(value || null)} />
+			</Field>
+			<button type="button" className="btn ghost" disabled={loading} onClick={() => input.current?.click()}>
+				{loading ? ko("Loading HDR…", "HDR 불러오는 중…") : ko("Load HDR…", "HDR 불러오기…")}
+			</button>
+			<input ref={input} type="file" hidden data-testid="hdr-file" accept=".hdr,.exr,.png,.jpg,.jpeg,image/vnd.radiance,image/x-exr,image/png,image/jpeg" onChange={load} />
+			{problem && <p className="hint v2-details-hint" role="alert">{problem}</p>}
+			{lighting.hdr && <>
+				<Slider label={ko("Rotation", "회전")} min={-180} max={180} step={1} unit="°" value={lighting.hdrRotation} onChange={(hdrRotation) => setLighting({ hdrRotation })} />
+				<Slider label={ko("Intensity", "세기")} min={0} max={4} step={0.05} value={lighting.hdrIntensity} onChange={(hdrIntensity) => setLighting({ hdrIntensity })} />
+				<label className="check details-toggle-row">
+					<span>{ko("Show as background", "배경으로 표시")}</span>
+					<input type="checkbox" checked={lighting.hdrBackground} onChange={(event) => run("stage.set", { lighting: { hdrBackground: event.target.checked } })} />
+				</label>
+				<button type="button" className="btn ghost" onClick={() => choose(null)}>{ko("Remove HDR", "HDR 제거")}</button>
+			</>}
+		</div>
+	);
+}

package/src/panels/LightPanel.jsx

@@ -1,17 +1,38 @@
 import { ko } from "../locale.js";
 import Foldout from "./Foldout.jsx";
-import { Slider } from "../ui.jsx";
-import { createKeyLight } from "../scenes.js";
+import { Dropdown, Field, Slider } from "../ui.jsx";
+import { createKeyLight, LIGHTING_PRESETS } from "../stage-lighting.js";
+import { STAGE_BACKGROUND } from "../grid-view.js";
 import { useStageTransaction } from "../domains/stage.js";
+import HdrEnvironmentControls from "./HdrEnvironmentControls.jsx";
 
-export default function LightPanel({ keyLightSelected, keyLight }) {
+const LOOK_LABELS = { studio: ["Studio", "스튜디오"], day: ["Day", "낮"], overcast: ["Overcast", "흐린 날"], golden: ["Golden hour", "골든아워"],
+	dusk: ["Dusk", "해 질 녘"], night: ["Night", "밤"], interior: ["Interior", "실내"], stage: ["Stage spotlight", "무대 조명"] };
+
+export default function LightPanel({ keyLightSelected, keyLight, lighting }) {
 	const { run, begin, commit, cancel } = useStageTransaction();
+	// One look in one undo step; sky and exposure then tweak it like any slider.
+	const setLighting = (patch) => run("run.update", { txId: begin("stage.set"), args: { lighting: patch } });
 	return (
 <Foldout hidden={!keyLightSelected} title={ko("Light", "조명")}>
 						<p className="hint v2-details-hint">{ko("Drag the sun in the scene to move the light. Shadows and warmth follow it.", "씬의 해를 드래그해 조명을 옮깁니다. 그림자와 빛의 방향이 따라옵니다.")}</p>
+						{lighting && <Field label={ko("Look", "조명 룩")}>
+							<Dropdown value={lighting.preset} ariaLabel={ko("Lighting look", "조명 룩")} options={LIGHTING_PRESETS.map((value) => ({ value, label: ko(...LOOK_LABELS[value]) }))}
+								onChange={(preset) => run("stage.applyLighting", { preset })} />
+						</Field>}
 						<div onPointerUp={commit} onPointerCancel={cancel} onKeyUp={commit} onBlur={commit}>
 						<Slider label={ko("Brightness", "밝기")} min={0} max={4} step={0.05} value={keyLight.intensity} onChange={(value) => run("run.update", { txId: begin("stage.setKeyLight"), args: { keyLight: { intensity: value } } })} />
-						<Slider label={ko("Warm ↔ Cool", "따뜻함 ↔ 차가움")} min={0} max={1} step={0.05} value={keyLight.warmth ?? 0.5} onChange={(value) => run("run.update", { txId: begin("stage.setKeyLight"), args: { keyLight: { warmth: value } } })} />
+						<Slider label={ko("Warm ↔ Cool", "따뜻함 ↔ 차가움")} min={0} max={1} step={0.05} value={keyLight.warmth ?? 0.5} onChange={(value) => run("run.update", { txId: begin("stage.setKeyLight"), args: { keyLight: { warmth: value, color: null } } })} />
+						{lighting && <>
+							<Slider label={ko("Exposure", "노출")} min={0.2} max={3} step={0.05} value={lighting.exposure} onChange={(exposure) => setLighting({ exposure })} />
+							<Slider label={ko("Sky light", "하늘빛")} min={0} max={2} step={0.05} value={lighting.envLight ?? 0} onChange={(envLight) => setLighting({ envLight })} />
+							<Slider label={ko("Ambient occlusion", "앰비언트 오클루전")} min={0} max={1} step={0.05} value={lighting.ao ?? 0} onChange={(ao) => setLighting({ ao })} />
+							<Field label={ko("Sky", "하늘")}>
+								<input type="color" className="object-color object-color-free" value={lighting.sky ?? STAGE_BACKGROUND} title={ko("Sky colour", "하늘 색")} aria-label={ko("Sky colour", "하늘 색")}
+									onChange={(event) => setLighting({ sky: event.target.value })} />
+							</Field>
+							<HdrEnvironmentControls lighting={lighting} run={run} setLighting={setLighting} />
+						</>}
 						</div>
 						<div className="readout v2-details-readout">
 							<span title={ko("light position", "조명 위치")}>{`x ${keyLight.x.toFixed(1)}  y ${keyLight.y.toFixed(1)}  z ${keyLight.z.toFixed(1)}`}</span>

package/src/panels/ObjectLookPanel.jsx

@@ -0,0 +1,88 @@
+import { useContext, useEffect, useRef } from "react";
+import { AppContext } from "../app-context.js";
+import { useStudioShell } from "../shell/studio-shell-context.js";
+import Foldout from "./Foldout.jsx";
+import { Field, Slider } from "../ui.jsx";
+import { ko } from "../locale.js";
+import { LIGHT_KIND, practicalShadows } from "../object-look.js";
+
+/**
+ * Light and glow for the selected record: a practical light's type, colour,
+ * brightness, reach, cone, shadow and flicker, and any record's glow. A drag is
+ * one open transaction (one undo); a switch is one atomic edit.
+ */
+export default function ObjectLookPanel() {
+	const { selectedSceneObject: object, sceneObjects, beginSceneTransaction, endSceneTransaction } = useStudioShell();
+	const app = useContext(AppContext), session = useRef(null);
+	const run = (...args) => {
+		const receipt = app.bus.run(...args);
+		if (receipt && !receipt.ok) app.notify(receipt.message);
+		return receipt;
+	};
+	function commit() {
+		const active = session.current;
+		if (!active) return;
+		session.current = null;
+		endSceneTransaction(active.txId, { commit: true });
+	}
+	function drag(field, patch) {
+		if (session.current?.field !== field) commit();
+		if (!session.current) session.current = { field, txId: beginSceneTransaction({ owner: `inspector:${field}`, cancel: () => { session.current = null; } }) };
+		run("run.update", { txId: session.current.txId, args: { id: object.id, patch } });
+	}
+	const set = (patch) => { commit(); run("object.update", { id: object.id, patch }); };
+	useEffect(() => () => commit(), [object?.id]);
+	if (!object) return null;
+	const light = object.renderer === LIGHT_KIND ? object.light : null;
+	const glow = object.glow ?? null;
+	const capped = light?.shadow && practicalShadows(sceneObjects).capped.includes(object.id);
+	const ends = { onPointerUp: commit, onPointerCancel: commit, onKeyUp: commit, onBlur: commit };
+	const lightSlider = (field, label, min, max, step, unit = "") => (
+		<Slider label={label} min={min} max={max} step={step} unit={unit} softMax value={light[field]} onChange={(value) => drag(`light.${field}`, { light: { [field]: value } })} />
+	);
+	return (
+		<>
+			{light && (
+				<Foldout title={ko("Light", "조명")}>
+					<div {...ends}>
+						<Field label={ko("Type", "종류")}>
+							<select value={light.type} onChange={(event) => set({ light: { type: event.target.value } })}>
+								<option value="point">{ko("Point", "점 조명")}</option>
+								<option value="spot">{ko("Spot", "스포트")}</option>
+							</select>
+						</Field>
+						<Field label={ko("Colour", "색")}>
+							<input type="color" value={light.color} onChange={(event) => drag("light.color", { light: { color: event.target.value } })} />
+						</Field>
+						{lightSlider("intensity", ko("Intensity (cd)", "밝기 (cd)"), 0, 100, 0.05)}
+						{lightSlider("range", ko("Range (0 = none)", "범위 (0 = 없음)"), 0, 30, 0.1, " m")}
+						{light.type === "spot" && lightSlider("angle", ko("Cone angle", "원뿔 각도"), 1, 89, 1, "°")}
+						{light.type === "spot" && lightSlider("softness", ko("Edge softness", "가장자리 부드럽기"), 0, 1, 0.05)}
+						{lightSlider("flicker", ko("Flicker", "깜빡임"), 0, 1, 0.05)}
+						<label className="check details-toggle-row">
+							<span>{capped ? ko("Shadow (off: only 2 lights cast)", "그림자 (꺼짐: 2개까지만)") : ko("Shadow", "그림자")}</span>
+							<input type="checkbox" checked={light.shadow} onChange={(event) => set({ light: { shadow: event.target.checked } })} />
+						</label>
+					</div>
+				</Foldout>
+			)}
+			<Foldout title={ko("Glow", "발광")} defaultOpen={Boolean(glow)}>
+				<div {...ends}>
+					<label className="check details-toggle-row">
+						<span>{ko("Glows (lit by itself)", "스스로 빛남")}</span>
+						<input type="checkbox" checked={Boolean(glow)} onChange={(event) => set({ glow: event.target.checked ? {} : null })} />
+					</label>
+					{glow && (
+						<>
+							<Field label={ko("Colour", "색")}>
+								<input type="color" value={glow.color} onChange={(event) => drag("glow.color", { glow: { color: event.target.value } })} />
+							</Field>
+							<Slider label={ko("Intensity", "세기")} min={0} max={20} step={0.1} value={glow.intensity} onChange={(value) => drag("glow.intensity", { glow: { intensity: value } })} />
+							<Slider label={ko("Halo (× size)", "후광 (× 크기)")} min={0} max={4} step={0.05} value={glow.halo} onChange={(value) => drag("glow.halo", { glow: { halo: value } })} />
+						</>
+					)}
+				</div>
+			</Foldout>
+		</>
+	);
+}

package/src/panels/PosePanel.jsx

@@ -1,18 +1,15 @@
 import Foldout from "./Foldout.jsx";
 import { ko, isKo } from "../locale.js";
-import { I2vMotionCaptureCard } from "../i2v-motion-studio.jsx";
 import { PoseTileGrid } from "../posestudio.jsx";
 import { DEFAULT_POSE } from "../poses.js";
 import { poseLabelKo } from "../app-stage.jsx";
 import ReferenceImageField from "./ReferenceImageField.jsx";
 import { useBus } from '../app-context.js';
-import { trackFeature } from "../analytics.js";
 
 export default function PosePanel({
-	isCharacterSelection, activeCharIndex, i2vMotionModel, i2vMotionActions, setI2vMotionStudioOpen,
+	isCharacterSelection, activeCharIndex,
 	selectablePoses, activeChar, ikMode, ikApplyPoseAsKey, motion,
-	setStudioPick, setToast, removePose, setPhotoPoseError, photoPoseFileRef,
-	photoPoseState, photoPoseError, activeRig, saveCurrentPose,
+	setStudioPick, setToast, removePose, activeRig, saveCurrentPose,
 }) {
 	const { run } = useBus();
 	return (
@@ -24,12 +21,6 @@ export default function PosePanel({
 					<p className="inspector-hint v2-details-hint">
 						{isKo ? `인물 ${activeCharIndex + 1}의 자세입니다.` : `The pose on Subject ${activeCharIndex + 1}.`}
 					</p>
-					<I2vMotionCaptureCard model={i2vMotionModel} actions={i2vMotionActions} onOpen={() => {
-						// While the route is locked its Generate button is disabled, so opening
-						// the authoring modal is the card's demand signal (#466).
-						trackFeature("fal_motion_open");
-						setI2vMotionStudioOpen(true);
-					}} />
 					<PoseTileGrid
 						poses={selectablePoses}
 						model={activeChar.model}
@@ -50,14 +41,8 @@ export default function PosePanel({
 								: ko("Pose applied", "포즈를 적용했어요"));
 						}}
 						onDelete={removePose}
-						onPhoto={() => {
-							setPhotoPoseError("");
-							photoPoseFileRef.current?.click();
-						}}
-						photoState={photoPoseState}
 						labelOf={poseLabelKo}
 					/>
-					{photoPoseError && <p className="studio-hint error" data-pose-photo-error role="status">{photoPoseError}</p>}
 					{/* Bottles whatever the viewport shows right now — a take frame,
 					    IK corrections included — without touching the character, so a
 					    good mid-clip moment becomes a reusable library pose. */}