cozyclay 1.9.0 → 2.0.0

package/src/range-pin-panel.jsx

@@ -0,0 +1,344 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ko } from "./locale.js";
+import "./range-pin-panel.css";
+
+export const RANGE_PIN_TRACKS = Object.freeze(["leftHand", "rightHand", "leftFoot", "rightFoot"]);
+
+const PARTS = Object.freeze([
+	{ id: "leftHand", label: "Left Hand", ko: "왼손", color: "var(--range-pin-hand)" },
+	{ id: "rightHand", label: "Right Hand", ko: "오른손", color: "var(--range-pin-hand)" },
+	{ id: "leftFoot", label: "Left Foot", ko: "왼발", color: "var(--range-pin-foot)" },
+	{ id: "rightFoot", label: "Right Foot", ko: "오른발", color: "var(--range-pin-foot)" },
+]);
+
+const PIN_ID_PREFIX = "pin";
+const DEFAULT_BLEND_SECONDS = 0.25;
+const BLEND_MIN_SECONDS = 0.1;
+const BLEND_MAX_SECONDS = 2;
+const BLEND_STEP_SECONDS = 0.05;
+
+function pinId() {
+	if (globalThis.crypto?.randomUUID) return `${PIN_ID_PREFIX}-${globalThis.crypto.randomUUID()}`;
+	return `${PIN_ID_PREFIX}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function clampFrame(value, frameCount) {
+	const max = Math.max(0, Number(frameCount || 1) - 1);
+	return Math.max(0, Math.min(max, Math.round(Number(value) || 0)));
+}
+
+function partFor(track) {
+	return PARTS.find((part) => part.id === track) ?? PARTS[1];
+}
+
+function objectName(object) {
+	return object?.name || object?.id || ko("Missing object", "없는 오브젝트");
+}
+
+function blendFramesForSeconds(seconds, fps) {
+	return Math.max(1, Math.round(Number(seconds || DEFAULT_BLEND_SECONDS) * Math.max(1, fps || 24)));
+}
+
+function secondsForBlend(blend, fps) {
+	return Math.max(BLEND_MIN_SECONDS, Math.min(BLEND_MAX_SECONDS, Number(blend || 1) / Math.max(1, fps || 24)));
+}
+
+function freshDraft(frame, fps) {
+	return {
+		id: pinId(),
+		track: "rightHand",
+		startFrame: clampFrame(frame, Number.MAX_SAFE_INTEGER),
+		endFrame: clampFrame(frame, Number.MAX_SAFE_INTEGER),
+		blend: blendFramesForSeconds(DEFAULT_BLEND_SECONDS, fps),
+		reach: "body",
+		targetKind: "hold",
+		objectId: "",
+	};
+}
+
+function draftFromPin(pin, fps) {
+	return {
+		id: pin.id,
+		track: pin.track,
+		startFrame: pin.startFrame,
+		endFrame: pin.endFrame,
+		blend: pin.blend,
+		reach: pin.reach ?? "limb",
+		targetKind: pin.target.space === "object" ? "object" : "hold",
+		objectId: pin.target.space === "object" ? pin.target.objectId : "",
+	};
+}
+
+function residualWarning(residuals) {
+	const feet = (residuals ?? []).filter((entry) => Number(entry?.feetErrorM) > 0.01).map((entry) => entry.frame);
+	const frames = (residuals ?? []).filter((entry) => Number(entry?.errorM) > 0.01 || Number(entry?.feetErrorM) > 0.01).map((entry) => entry.frame);
+	if (!frames.length) return null;
+	return {
+		frames,
+		label: ko(
+			`Can't reach on ${frames.length} frame${frames.length === 1 ? "" : "s"}`,
+			`${frames.length}개 프레임에 닿지 않음`,
+		),
+		title: ko(`Residual over 1 cm on frames ${frames.join(", ")}`, `1cm를 넘는 잔여 오차: ${frames.join(", ")}프레임`)
+			+ (feet.length ? ko(`; feet cannot stay planted on frames ${feet.join(", ")}`, `; 발 위치를 유지할 수 없는 프레임: ${feet.join(", ")}`) : ""),
+	};
+}
+
+function validationFor(draft, { motion, frameCount, objects }) {
+	if (!motion) return ko("Load a motion before creating a pin.", "핀을 만들기 전에 모션을 불러오세요.");
+	if (!RANGE_PIN_TRACKS.includes(draft.track)) return ko("Choose a hand or foot.", "손이나 발을 선택하세요.");
+	if (!Number.isInteger(Number(draft.startFrame)) || !Number.isInteger(Number(draft.endFrame))) return ko("In and Out must be whole frames.", "In과 Out은 정수 프레임이어야 해요.");
+	if (draft.startFrame < 0 || draft.endFrame >= frameCount) return ko(`Use frames 0–${Math.max(0, frameCount - 1)}.`, `${Math.max(0, frameCount - 1)}프레임 안에서 선택하세요.`);
+	if (draft.endFrame < draft.startFrame) return ko("Out must be on or after In.", "Out은 In 이후여야 해요.");
+	if (draft.targetKind === "object" && !draft.objectId) return ko("Choose a scene object.", "씬 오브젝트를 선택하세요.");
+	if (draft.targetKind === "object" && !objects.some((object) => object.id === draft.objectId)) return ko("That scene object is no longer available.", "씬 오브젝트를 찾을 수 없어요.");
+	if (!Number.isInteger(Number(draft.blend)) || draft.blend < 1) return ko("Blend must be at least one frame.", "Blend는 한 프레임 이상이어야 해요.");
+	return "";
+}
+
+function targetLabel(pin, objects) {
+	if (pin.target.space === "object") {
+		return ko(`Object · ${objectName(objects.find((object) => object.id === pin.target.objectId))}`, `오브젝트 · ${objectName(objects.find((object) => object.id === pin.target.objectId))}`);
+	}
+	return ko("Hold at In", "In 위치 고정");
+}
+
+export function RangePinPanel({
+	active = false,
+	motion = null,
+	frame = 0,
+	frameCount = 1,
+	fps = 24,
+	pins = [],
+	residuals = new Map(),
+	objects = [],
+	selectedPinId = null,
+	partPick = null,
+	conflictFrames = [],
+	overlapError = "",
+	onSelectPin,
+	onApply,
+	onCancel,
+	onDelete,
+	onPreviewTarget,
+}) {
+	const [draft, setDraft] = useState(() => freshDraft(frame, fps));
+	const [editingId, setEditingId] = useState(null);
+	const [replaceConfirmed, setReplaceConfirmed] = useState(false);
+
+	const selectedPin = useMemo(() => pins.find((pin) => pin.id === selectedPinId) ?? null, [pins, selectedPinId]);
+	const validation = validationFor(draft, { motion, frameCount, objects });
+	const selectedObject = objects.find((object) => object.id === draft.objectId) ?? null;
+	const needsReplace = conflictFrames.length > 0;
+	const canApply = !validation && !overlapError && (!needsReplace || replaceConfirmed);
+
+	// React may run state updaters during render (and replay them). Keep every
+	// updater pure; notify App only after the draft has committed.
+	useEffect(() => {
+		if (active) onPreviewTarget?.(draft);
+	// The parent callback is a render-time command bridge. It is intentionally
+	// omitted from the dependencies so a new closure cannot retrigger preview
+	// state forever while the draft itself is unchanged.
+	}, [active, draft, frame]);
+
+	const updateDraft = useCallback((patch) => {
+		setDraft((current) => ({ ...current, ...patch }));
+		setReplaceConfirmed(false);
+	}, []);
+
+	useEffect(() => {
+		if (!active) return;
+		if (selectedPin) {
+			setEditingId(selectedPin.id);
+			setReplaceConfirmed(false);
+			const next = draftFromPin(selectedPin, fps);
+			setDraft(next);
+			return;
+		}
+		if (editingId && !pins.some((pin) => pin.id === editingId)) setEditingId(null);
+		if (!editingId) {
+			const next = freshDraft(frame, fps);
+			setReplaceConfirmed(false);
+			setDraft(next);
+		}
+	}, [active, editingId, fps, pins, selectedPin]);
+
+	useEffect(() => {
+		if (!active || !partPick || !RANGE_PIN_TRACKS.includes(partPick)) return;
+		updateDraft({ track: partPick });
+	}, [active, partPick, updateDraft]);
+
+	useEffect(() => {
+		if (!active) return undefined;
+		const onKeyDown = (event) => {
+			if (event.metaKey || event.ctrlKey || event.altKey) return;
+			if (event.code === "KeyI") {
+				event.preventDefault();
+				updateDraft({ startFrame: clampFrame(frame, frameCount) });
+			} else if (event.code === "KeyO") {
+				event.preventDefault();
+				updateDraft({ endFrame: clampFrame(frame, frameCount) });
+			}
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [active, frame, frameCount, updateDraft]);
+
+	const startNew = () => {
+		const next = freshDraft(frame, fps);
+		setEditingId(null);
+		setReplaceConfirmed(false);
+		onSelectPin?.(null);
+		setDraft(next);
+	};
+
+	const editPin = (pin) => {
+		const next = draftFromPin(pin, fps);
+		setEditingId(pin.id);
+		setReplaceConfirmed(false);
+		onSelectPin?.(pin.id);
+		setDraft(next);
+	};
+
+	const submit = () => {
+		if (!canApply) return;
+		onApply?.({ ...draft, id: editingId ?? draft.id, replaceExisting: replaceConfirmed });
+	};
+
+	const setBlendSeconds = (seconds) => updateDraft({ blend: blendFramesForSeconds(seconds, fps) });
+	const blendSeconds = secondsForBlend(draft.blend, fps);
+	const sortedPins = [...pins].sort((a, b) => a.startFrame - b.startFrame || a.endFrame - b.endFrame || a.id.localeCompare(b.id));
+
+	return (
+		<section className="range-pin-panel" data-testid="range-pin-panel" aria-label={ko("Range pins", "범위 고정") }>
+			<div className="range-pin-panel-head">
+				<div>
+					<strong>{ko("Pin", "고정")}</strong>
+					<span>{ko("Hold a hand or foot across a frame range", "프레임 범위 동안 손이나 발을 고정합니다")}</span>
+				</div>
+				{editingId && <button type="button" className="btn ghost small" onClick={startNew}>{ko("New", "새로 만들기")}</button>}
+			</div>
+			{!motion && <p className="inspector-hint range-pin-disabled-hint">{ko("Load a motion to enable range pins.", "범위 고정을 사용하려면 모션을 불러오세요.")}</p>}
+			<div className="range-pin-form" aria-disabled={!motion}>
+				<div className="range-pin-form-label">{ko("Part", "파츠")}</div>
+				<div className="range-pin-part-grid" role="radiogroup" aria-label={ko("Pin part", "고정할 파츠")}>
+					{PARTS.map((part) => (
+						<button
+							type="button"
+							key={part.id}
+							className={"range-pin-part" + (draft.track === part.id ? " selected" : "")}
+							style={{ "--range-pin-color": part.color }}
+							aria-pressed={draft.track === part.id}
+							disabled={!motion}
+							onClick={() => updateDraft({ track: part.id })}
+						>
+							<span className="range-pin-part-dot" aria-hidden="true" />
+							{ko(part.label, part.ko)}
+						</button>
+					))}
+				</div>
+
+				<div className="range-pin-form-label">{ko("Range", "범위")}</div>
+				<div className="range-pin-frame-row">
+					<label className="range-pin-frame-field">
+						<span>{ko("In", "시작")}</span>
+						<input data-testid="range-pin-in" type="number" min="0" max={Math.max(0, frameCount - 1)} step="1" value={draft.startFrame} disabled={!motion} onChange={(event) => updateDraft({ startFrame: clampFrame(event.target.value, frameCount) })} />
+					</label>
+					<span className="range-pin-frame-dash" aria-hidden="true">–</span>
+					<label className="range-pin-frame-field">
+						<span>{ko("Out", "끝")}</span>
+						<input data-testid="range-pin-out" type="number" min="0" max={Math.max(0, frameCount - 1)} step="1" value={draft.endFrame} disabled={!motion} onChange={(event) => updateDraft({ endFrame: clampFrame(event.target.value, frameCount) })} />
+					</label>
+				</div>
+				<div className="range-pin-frame-actions">
+					<button type="button" className="btn ghost small" disabled={!motion} onClick={() => updateDraft({ startFrame: clampFrame(frame, frameCount) })}>{ko("Set In to playhead", "In을 현재 프레임으로")}</button>
+					<button type="button" className="btn ghost small" disabled={!motion} onClick={() => updateDraft({ endFrame: clampFrame(frame, frameCount) })}>{ko("Set Out to playhead", "Out을 현재 프레임으로")}</button>
+				</div>
+				<p className="range-pin-shortcut-hint">{ko("Keyboard: I sets In · O sets Out", "키보드: I는 In · O는 Out")}</p>
+
+				<div className="range-pin-form-label">{ko("Target", "대상")}</div>
+				<div className="range-pin-targets" role="radiogroup" aria-label={ko("Pin target", "고정 대상")}>
+					<label className="range-pin-target-option">
+						<input type="radio" name="range-pin-target" value="hold" checked={draft.targetKind === "hold"} disabled={!motion} onChange={() => updateDraft({ targetKind: "hold", objectId: "" })} />
+						<span>
+							<b>{ko("Hold where it is at In", "In 위치에 고정")}</b>
+							<small>{ko("Capture the part's world position at the In frame.", "In 프레임의 파츠 월드 위치를 사용합니다.")}</small>
+						</span>
+					</label>
+					<label className="range-pin-target-option">
+						<input type="radio" name="range-pin-target" value="object" checked={draft.targetKind === "object"} disabled={!motion || objects.length === 0} onChange={() => updateDraft({ targetKind: "object" })} />
+						<span>
+							<b>{ko("Stick to object", "오브젝트에 붙이기")}</b>
+							<small>{ko("Follow a scene object's transform and travel path.", "씬 오브젝트의 변환과 이동 경로를 따라갑니다.")}</small>
+						</span>
+					</label>
+				</div>
+				{objects.length === 0 && <p className="range-pin-empty-hint">{ko("Add a scene object to use an object target.", "오브젝트 대상을 사용하려면 씬에 오브젝트를 추가하세요.")}</p>}
+			{draft.targetKind === "object" && objects.length > 0 && (
+				<label className="range-pin-object-select">
+					<span>{ko("Scene object", "씬 오브젝트")}</span>
+					<select data-testid="range-pin-object" value={draft.objectId} disabled={!motion} onChange={(event) => updateDraft({ objectId: event.target.value })}>
+						<option value="">{ko("Choose an object", "오브젝트 선택")}</option>
+						{objects.map((object) => <option key={object.id} value={object.id}>{objectName(object)}</option>)}
+					</select>
+				</label>
+			)}
+			{selectedObject && <p className="range-pin-object-readout">{ko("Following", "따라가는 대상")}: {objectName(selectedObject)}</p>}
+
+			<label className="range-pin-target-option">
+				<input data-testid="range-pin-reach" type="checkbox" checked={draft.reach === "body"} disabled={!motion} onChange={(event) => updateDraft({ reach: event.target.checked ? "body" : "limb" })} />
+				<span><b>{ko("Body follows when out of reach", "손이 안 닿으면 몸도 따라가기")}</b></span>
+			</label>
+
+			<div className="range-pin-form-label">{ko("Blend", "블렌드")}</div>
+			<div className="range-pin-blend-row">
+				<input data-testid="range-pin-blend" type="range" min={BLEND_MIN_SECONDS} max={BLEND_MAX_SECONDS} step={BLEND_STEP_SECONDS} value={blendSeconds} disabled={!motion} onChange={(event) => setBlendSeconds(event.target.value)} />
+				<span className="trail-falloff-value">{blendSeconds.toFixed(2)}s ({draft.blend}f)</span>
+			</div>
+
+			{overlapError && <p className="range-pin-validation" role="alert">{overlapError}</p>}
+			{validation && <p className="range-pin-validation" role="alert">{validation}</p>}
+			{needsReplace && (
+				<div className="range-pin-replace-warning" role="alert">
+					<span>{ko(`Existing IK keys on ${conflictFrames.length} frame${conflictFrames.length === 1 ? "" : "s"}: ${conflictFrames.join(", ")}`, `기존 IK 키가 ${conflictFrames.length}개 프레임에 있어요: ${conflictFrames.join(", ")}`)}</span>
+					<button type="button" className="btn ghost small" onClick={() => setReplaceConfirmed((value) => !value)} aria-pressed={replaceConfirmed}>
+						{replaceConfirmed ? ko("Replace confirmed", "교체 확인됨") : ko("Replace existing keys", "기존 키 교체")}
+					</button>
+				</div>
+			)}
+			<div className="range-pin-actions">
+				<button type="button" className="btn ghost" disabled={!motion} onClick={onCancel}>{ko("Cancel", "취소")}</button>
+				<button type="button" className="btn primary" data-testid="range-pin-apply" disabled={!canApply} onClick={submit}>{editingId ? ko("Update pin", "고정 업데이트") : ko("Apply pin", "고정 적용")}</button>
+			</div>
+			</div>
+
+			<div className="range-pin-list-head">
+				<span>{ko("Pins", "고정 목록")}</span>
+				<small>{sortedPins.length}</small>
+			</div>
+			{sortedPins.length === 0 ? (
+				<p className="range-pin-empty-hint">{ko("No pins yet. Choose a part and apply a range.", "아직 고정이 없어요. 파츠와 범위를 정한 뒤 적용하세요.")}</p>
+			) : (
+				<div className="range-pin-list">
+					{sortedPins.map((pin) => {
+						const part = partFor(pin.track);
+						const warning = residualWarning(residuals instanceof Map ? residuals.get(pin.id) : residuals?.[pin.id]);
+						const missingObject = pin.target.space === "object" && !objects.some((object) => object.id === pin.target.objectId);
+						return (
+							<div key={pin.id} className={"range-pin-item" + (selectedPinId === pin.id ? " selected" : "")} style={{ "--range-pin-color": part.color }}>
+								<button type="button" className="range-pin-item-main" onClick={() => editPin(pin)} aria-pressed={selectedPinId === pin.id}>
+									<span className="range-pin-item-top"><span className="range-pin-part-dot" aria-hidden="true" />{ko(part.label, part.ko)} <b>{pin.startFrame}–{pin.endFrame}</b></span>
+									<span className="range-pin-item-target">{missingObject ? ko("Missing object target", "오브젝트 대상 없음") : targetLabel(pin, objects)}</span>
+									{(warning || missingObject) && <span className="range-pin-warning" title={missingObject ? ko("The referenced object was deleted.", "참조한 오브젝트가 삭제됐어요.") : warning.title}>{missingObject ? ko("Invalid target", "대상 없음") : warning.label}</span>}
+								</button>
+								<button type="button" className="range-pin-delete" data-testid={`range-pin-delete-${pin.id}`} aria-label={ko(`Delete ${part.label} pin`, `${part.ko} 고정 삭제`)} title={ko("Delete pin", "고정 삭제")} onClick={() => onDelete?.(pin.id)}><span aria-hidden="true">×</span></button>
+							</div>
+						);
+					})}
+				</div>
+			)}
+		</section>
+	);
+}
+
+export { PARTS as RANGE_PIN_PARTS, partFor as rangePinPartFor, freshDraft as createRangePinDraft };

package/src/result-modal.jsx

@@ -3,7 +3,7 @@ import { ko, isKo } from "./locale.js";
 export default function ResultModal({ result, copied, recordedVideoName, onClose, onCopy, onDownload, downloadDisabled = false, exportFeedback = null }) {
 	const isVideo = result.mode === "video";
 	const motionVideo = result.motion?.videoUrl ?? null;
-	const isFalMotion = Boolean(motionVideo);
+	const isI2vMotion = Boolean(motionVideo);
 	const modelLabel = result.modelLabel ?? (isVideo ? ko("your AI video tool", "AI 영상 도구") : ko("your selected image model", "선택한 이미지 모델"));
 	const hasFrame = Boolean(result.frame);
 
@@ -42,12 +42,12 @@ export default function ResultModal({ result, copied, recordedVideoName, onClose
 		<div className="modal-overlay" onClick={onClose}>
 			<div className="modal result-modal" role="dialog" aria-modal="true" aria-labelledby="result-title" onClick={(event) => event.stopPropagation()}>
 				<div className="modal-head">
-				<h3 id="result-title">{isFalMotion ? ko("Your motion is ready", "모션이 준비됐어요") : ko("Your shot is ready", "장면이 준비됐어요")}</h3>
+				<h3 id="result-title">{isI2vMotion ? ko("Your motion is ready", "모션이 준비됐어요") : ko("Your shot is ready", "장면이 준비됐어요")}</h3>
 					<button type="button" className="x" onClick={onClose} aria-label={ko("Close the result", "결과 닫기")}>
 						✕
 					</button>
 				</div>
-				{isFalMotion ? (
+				{isI2vMotion ? (
 					<video className="preview result-motion-video" src={motionVideo} controls playsInline preload="metadata" />
 				) : result.frameB ? (
 					<div className="move-frames">
@@ -69,7 +69,7 @@ export default function ResultModal({ result, copied, recordedVideoName, onClose
 						<small>{ko("Camera move made from timeline keyframes", "타임라인 키프레임으로 만든 카메라 움직임")}</small>
 					</div>
 				)}
-				{isFalMotion && result.motion && <div className="result-motion-meta">
+				{isI2vMotion && result.motion && <div className="result-motion-meta">
 					<span>{result.motion.resolution || "480P"}</span>
 					{result.motion.width && result.motion.height && <span>{result.motion.width}×{result.motion.height}</span>}
 					{result.motion.fps && <span>{result.motion.fps} fps</span>}
@@ -90,7 +90,7 @@ export default function ResultModal({ result, copied, recordedVideoName, onClose
 				</div>
 
 				{exportFeedback}
-				{isFalMotion ? <section className="result-next" aria-labelledby="result-next-title">
+				{isI2vMotion ? <section className="result-next" aria-labelledby="result-next-title">
 					<span className="result-next-kicker">{ko("Next · CozyClay motion source", "다음 · CozyClay 모션 소스")}</span>
 					<h4 id="result-next-title">{ko("Use this video for mocap extraction", "이 영상을 모캡 추출에 사용하세요")}</h4>
 					<div className="result-next-intro"><p>{ko("The fixed-camera H3 Max Turbo video is attached to the extraction panel as a motion source. Run GVHMR there, then review the resulting take in the timeline.", "고정 카메라 H3 Max Turbo 영상이 추출 패널의 모션 소스로 연결됐어요. 거기서 GVHMR을 실행한 뒤 타임라인의 테이크를 확인하세요.")}</p></div>

package/src/room.jsx

@@ -15,8 +15,9 @@ import * as THREE from "three";
  * never meets an unbounded surface.
  */
 
-// Bright enough to sit clearly above the grid lines: the deck reads as a lit
-// surface with lines drawn ON it, not as a dark line-texture tiling to the fog.
+// The deck is the grey workbench (the same neutral family as STAGE_BACKGROUND
+// in grid-view.js), a step lighter than the sky so the horizon still reads,
+// with the grid lines drawn ON it in a lighter grey.
 //
 // Lit, not unlit. An unlit deck renders one flat colour across its whole 500 m,
 // which costs an exported blocking frame two depth cues at once: the falloff
@@ -24,60 +25,85 @@ import * as THREE from "three";
 // subject is standing ON it rather than floating. The colour is lifted to
 // compensate for the shading the lambert term now applies, so the deck keeps
 // the same on-screen brightness it had while unlit.
-const FLOOR = "#fffdf7";
+const FLOOR = "#5b5d63";
+// The light theme's deck: the cyclorama floor. Tone mapping caps a lit
+// white deck near #d4, a dull grey under a white sky, so it also glows a
+// little (FLOOR_LIGHT_GLOW): it renders about #dedede near the camera and
+// fades into the sky (grid-view.js STAGE_BACKGROUND_LIGHT) with distance.
+// The key's contact shadow still reads, since the glow is only a fifth.
+const FLOOR_LIGHT = "#ffffff";
+const FLOOR_LIGHT_GLOW = 0.2;
 
 export const STAGE_SIZE = 500;
 
-/** Metres per grid tile; one heavy line per tile, minor lines every metre. */
+/** Metres between the heavy lines; minor lines every metre. */
 const TILE_M = 10;
 
+// Line ink per theme: how far a line darkens the lit deck. The light deck
+// needs as much ink as the dark one to read: its lines are thin dark marks on
+// a bright floor, and anything fainter vanished into it.
+const GRID_INK = Object.freeze({
+	dark: { minor: 0.22, major: 0.42 },
+	light: { minor: 0.38, major: 0.5 },
+});
+
 /**
  * The measuring grid, drawn INTO the deck rather than floating above it.
  *
  * A GridHelper is a separate object a couple of millimetres over a 500 m
  * plane, and at that separation it loses to the floor across almost the whole
  * frame — it survives only where the surface is grazed near the horizon, which
- * is exactly where it is useless. Baking the lines into the floor's own map
+ * is exactly where it is useless. Drawing the lines in the floor's own shader
  * ends the contest: the marks ARE the surface, so they cannot z-fight with it,
- * cannot be sorted behind it, and shade and fog exactly as the deck does.
+ * cannot be sorted behind it, and shade, shadow and fog exactly as the deck
+ * does.
+ *
+ * Computed per pixel from the world position, not baked into a tiled texture:
+ * a texture blurred its lines up close and mip-averaged them into a grey
+ * moire toward the horizon. Here every line is ~1 px wide at any distance
+ * (fwidth), and a line family fades out once its spacing drops under a few
+ * pixels, so the far deck is clean floor instead of a band of noise.
  */
-function makeGridTexture() {
-	const PX = 1024;
-	const pxPerM = PX / TILE_M;
-	const canvas = document.createElement("canvas");
-	canvas.width = PX;
-	canvas.height = PX;
-	const ctx = canvas.getContext("2d");
-	ctx.fillStyle = "#ffffff";
-	ctx.fillRect(0, 0, PX, PX);
-	ctx.strokeStyle = "rgba(120, 110, 92, 0.34)";
-	ctx.lineWidth = 2;
-	for (let m = 1; m < TILE_M; m += 1) {
-		const p = Math.round(m * pxPerM) + 0.5;
-		ctx.beginPath(); ctx.moveTo(p, 0); ctx.lineTo(p, PX); ctx.stroke();
-		ctx.beginPath(); ctx.moveTo(0, p); ctx.lineTo(PX, p); ctx.stroke();
-	}
-	// The ten-metre lines carry the scale read, so they stay heavier.
-	ctx.strokeStyle = "rgba(96, 86, 68, 0.6)";
-	ctx.lineWidth = 5;
-	ctx.strokeRect(0, 0, PX, PX);
-	const texture = new THREE.CanvasTexture(canvas);
-	texture.wrapS = THREE.RepeatWrapping;
-	texture.wrapT = THREE.RepeatWrapping;
-	texture.repeat.set(STAGE_SIZE / TILE_M, STAGE_SIZE / TILE_M);
-	texture.anisotropy = 8;
-	texture.colorSpace = THREE.SRGBColorSpace;
-	return texture;
+function makeDeckMaterial(light) {
+	const ink = light ? GRID_INK.light : GRID_INK.dark;
+	const material = new THREE.MeshLambertMaterial({
+		color: light ? FLOOR_LIGHT : FLOOR,
+		emissive: light ? FLOOR_LIGHT : "#000000",
+		emissiveIntensity: light ? FLOOR_LIGHT_GLOW : 0,
+	});
+	material.onBeforeCompile = (shader) => {
+		shader.uniforms.gridInk = { value: new THREE.Vector2(ink.minor, ink.major) };
+		shader.vertexShader = shader.vertexShader
+			.replace("#include <common>", "#include <common>\nvarying vec2 vGridXZ;")
+			.replace("#include <begin_vertex>", "#include <begin_vertex>\nvGridXZ = (modelMatrix * vec4(transformed, 1.0)).xz;");
+		shader.fragmentShader = shader.fragmentShader
+			.replace("#include <common>", `#include <common>
+varying vec2 vGridXZ;
+uniform vec2 gridInk;
+// 0..1 coverage of the lines every \`spacing\` metres, \`width\` px wide.
+float gridLines(float spacing, float width) {
+	vec2 cell = vGridXZ / spacing;
+	vec2 perPx = fwidth(cell);
+	vec2 dist = abs(fract(cell - 0.5) - 0.5) / max(perPx, vec2(1e-5));
+	float line = 1.0 - clamp(min(dist.x, dist.y) - (width - 1.0) * 0.5, 0.0, 1.0);
+	// Cells under ~5 px would alias: fade the family out before they do.
+	float fade = 1.0 - smoothstep(0.08, 0.2, max(perPx.x, perPx.y));
+	return line * fade;
+}`)
+			.replace("#include <opaque_fragment>", `outgoingLight *= 1.0 - max(gridLines(1.0, 1.0) * gridInk.x, gridLines(${TILE_M.toFixed(1)}, 1.6) * gridInk.y);
+#include <opaque_fragment>`);
+	};
+	material.customProgramCacheKey = () => `deck-grid-${light ? "light" : "dark"}`;
+	return material;
 }
 
-export function Room() {
-	const grid = useMemo(() => makeGridTexture(), []);
-	useEffect(() => () => grid.dispose(), [grid]);
+export function Room({ light = false }) {
+	const material = useMemo(() => makeDeckMaterial(light), [light]);
+	useEffect(() => () => material.dispose(), [material]);
 	return (
 		<group>
-			<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]} receiveShadow>
+			<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]} receiveShadow userData={{ noInk: true }} material={material}>
 				<planeGeometry args={[STAGE_SIZE, STAGE_SIZE]} />
-				<meshLambertMaterial color={FLOOR} map={grid} />
 			</mesh>
 		</group>
 	);
@@ -87,32 +113,34 @@ export function Room() {
  * The key is the USER'S light: `keyLight` carries its grabbable position and
  * the rig's master brightness — fill and rim ride the same dimmer so turning
  * the key down darkens the whole stage instead of flattening it. */
-// Warm/cool slider → light colour. 0.5 is the tuned default (#fff8e8);
-// 0 pulls toward cool daylight, 1 toward sunset amber.
+// Warm/cool slider → light colour. 0.5 is the tuned default (neutral white,
+// so the grey set and the grey clay stay grey); 0 pulls toward cool daylight,
+// 1 toward sunset amber.
 export function keyLightColor(warmth = 0.5) {
 	const w = Math.max(0, Math.min(1, warmth ?? 0.5));
-	const base = new THREE.Color("#fff8e8");
+	const base = new THREE.Color("#ffffff");
 	if (w < 0.5) return base.clone().lerp(new THREE.Color("#e8f0ff"), (0.5 - w) * 2).getStyle();
 	if (w > 0.5) return base.clone().lerp(new THREE.Color("#ffc27a"), (w - 0.5) * 2).getStyle();
-	return "#fff8e8";
+	return "#ffffff";
 }
 
 /**
- * `neutral` is the grid-view rig (Blender's workbench studio light idea):
- * the clay hemisphere fakes a warm bounce off the ivory deck, and with the
- * deck gone that bounce reads as mud against the dark void. Neutral mode
- * swaps it for a white sky over a void-dark ground and lifts the ambient so
- * authored colours stay saturated without any pretend floor.
+ * One neutral rig (Blender's workbench studio light idea): a white sky over
+ * a grey ground bounce. `neutral` is the grid view, where the deck is gone
+ * and the ambient is lifted so authored colours stay saturated without any
+ * pretend floor.
  */
-export function StageLights({ keyLight = { x: 6, y: 9, z: 4, intensity: 1.12, warmth: 0.5 }, neutral = false }) {
+export function StageLights({ keyLight = { x: 6, y: 9, z: 4, intensity: 1.12, warmth: 0.5 }, neutral = false, light = false }) {
 	const dim = keyLight.intensity / 1.12;
 	return (
 		<>
 			<hemisphereLight
-				args={neutral ? ["#ffffff", "#3a3d42", 0.9] : ["#fffdf6", "#d8d0c3", 0.9]}
+				args={neutral ? ["#ffffff", "#3a3d42", 0.9] : ["#ffffff", light ? "#d6d8de" : "#5a5d64", 0.9]}
 				intensity={0.9 * Math.min(1, 0.35 + 0.65 * dim)}
 			/>
-			<ambientLight intensity={(neutral ? 0.34 : 0.18) * Math.min(1, 0.35 + 0.65 * dim)} />
+			{/* The light stage is a bright room: more ambient, so the clay's shaded
+			    side stays soft grey instead of going charcoal against white. */}
+			<ambientLight intensity={(neutral ? 0.34 : light ? 0.32 : 0.18) * Math.min(1, 0.35 + 0.65 * dim)} />
 			{/* Only the key casts: one soft, unambiguous contact shadow reads as
 			    ground contact, while three overlapping shadows read as noise. The
 			    map covers the blocking area rather than the whole 500 m deck — a
@@ -136,7 +164,7 @@ export function StageLights({ keyLight = { x: 6, y: 9, z: 4, intensity: 1.12, wa
 				shadow-bias={-0.0006}
 				shadow-normalBias={0.02}
 			/>
-			<directionalLight color="#dff6f7" position={[-6, 4, -4]} intensity={0.36 * dim} />
+			<directionalLight color="#eef2f4" position={[-6, 4, -4]} intensity={0.36 * dim} />
 			<directionalLight color="#ffffff" position={[2, 3, 9]} intensity={0.22 * dim} />
 		</>
 	);