cozyclay 3.0.3 → 3.1.1

package/dist/scenes/city-block.cclayproject

@@ -1 +0,0 @@
-{"app":"cozyclay","kind":"project","version":3,"name":"City Block","savedAt":1788959356489,"scenes":{"version":4,"activeSceneId":"scene-mt1b9laj-2","scenes":[{"id":"scene-mt1b9laj-2","name":"SCENE 01","objects":[{"id":"cube-2","name":"Cube 2","renderer":"cube","x":-7,"y":0,"z":-6,"rot":0,"rotX":0,"rotZ":0,"scaleX":5.2,"scaleY":13.5,"scaleZ":5.5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"plane","name":"Plane","renderer":"plane","x":-6.5,"y":0,"z":-14.100000000000001,"rot":0,"rotX":0,"rotZ":0,"scaleX":7.2,"scaleY":1,"scaleZ":32,"color":"#c2c6c8","parent":null,"footprint":{"width":2,"depth":2},"height":0},{"id":"cube","name":"Cube","renderer":"cube","x":-4.5,"y":0,"z":0,"rot":0,"rotX":0,"rotZ":0,"scaleX":1.4,"scaleY":0.22,"scaleZ":32,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-3","name":"Cube 3","renderer":"cube","x":4.5,"y":0,"z":0,"rot":0,"rotX":0,"rotZ":0,"scaleX":1.4,"scaleY":0.22,"scaleZ":32,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-4","name":"Cube 4","renderer":"cube","x":-11.8,"y":0,"z":-14.9,"rot":0,"rotX":0,"rotZ":0,"scaleX":4.6,"scaleY":8,"scaleZ":5.2,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-5","name":"Cube 5","renderer":"cube","x":-9.5,"y":0,"z":-5.5,"rot":0,"rotX":0,"rotZ":0,"scaleX":5.8,"scaleY":17,"scaleZ":6.2,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-6","name":"Cube 6","renderer":"cube","x":-8,"y":0,"z":2,"rot":0,"rotX":0,"rotZ":0,"scaleX":4.5,"scaleY":9.5,"scaleZ":5.5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-7","name":"Cube 7","renderer":"cube","x":-10.2,"y":0,"z":8.5,"rot":0,"rotX":0,"rotZ":0,"scaleX":6,"scaleY":12.5,"scaleZ":5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-8","name":"Cube 8","renderer":"cube","x":-7.2,"y":0,"z":14,"rot":0,"rotX":0,"rotZ":0,"scaleX":4,"scaleY":6.5,"scaleZ":4.5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder","name":"Cylinder","renderer":"cylinder","x":9,"y":0,"z":-12,"rot":0,"rotX":0,"rotZ":0,"scaleX":4.2,"scaleY":14,"scaleZ":4.2,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-9","name":"Cube 9","renderer":"cube","x":8,"y":0,"z":-5,"rot":0,"rotX":0,"rotZ":0,"scaleX":4.5,"scaleY":7.5,"scaleZ":5.5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-10","name":"Cube 10","renderer":"cube","x":10.5,"y":0,"z":1.5,"rot":0,"rotX":0,"rotZ":0,"scaleX":6.2,"scaleY":11,"scaleZ":5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-11","name":"Cube 11","renderer":"cube","x":8,"y":0,"z":8,"rot":0,"rotX":0,"rotZ":0,"scaleX":4.8,"scaleY":8.5,"scaleZ":5.5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-12","name":"Cube 12","renderer":"cube","x":10.2,"y":0,"z":14,"rot":0,"rotX":0,"rotZ":0,"scaleX":6,"scaleY":15.5,"scaleZ":5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-13","name":"Cube 13","renderer":"cube","x":-15,"y":0,"z":-10,"rot":0,"rotX":0,"rotZ":0,"scaleX":4,"scaleY":9,"scaleZ":4,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-14","name":"Cube 14","renderer":"cube","x":-15,"y":0,"z":3,"rot":0,"rotX":0,"rotZ":0,"scaleX":5,"scaleY":6,"scaleZ":5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-15","name":"Cube 15","renderer":"cube","x":15,"y":0,"z":-6,"rot":0,"rotX":0,"rotZ":0,"scaleX":5,"scaleY":10,"scaleZ":5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-16","name":"Cube 16","renderer":"cube","x":15,"y":0,"z":7,"rot":0,"rotX":0,"rotZ":0,"scaleX":4.5,"scaleY":7,"scaleZ":4.5,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cube-17","name":"Cube 17","renderer":"cube","x":0,"y":4.3,"z":-7.5,"rot":0,"rotX":0,"rotZ":0,"scaleX":15,"scaleY":0.55,"scaleZ":2.4,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-2","name":"Cylinder 2","renderer":"cylinder","x":-4.4,"y":0,"z":-7.5,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.55,"scaleY":4.3,"scaleZ":0.55,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-3","name":"Cylinder 3","renderer":"cylinder","x":4.4,"y":0,"z":-7.5,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.55,"scaleY":4.3,"scaleZ":0.55,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"car","name":"Car","renderer":"car","x":-1.6,"y":0,"z":-7,"rot":0,"rotX":0,"rotZ":0,"scaleX":1,"scaleY":1,"scaleZ":1,"color":"#d98770","parent":null,"footprint":{"width":1.8,"depth":4.5},"height":1.4},{"id":"car-2","name":"Car 2","renderer":"car","x":1.5,"y":0,"z":-1.5,"rot":-180,"rotX":0,"rotZ":0,"scaleX":0.95,"scaleY":0.95,"scaleZ":0.95,"color":"#d98770","parent":null,"footprint":{"width":1.8,"depth":4.5},"height":1.4},{"id":"car-3","name":"Car 3","renderer":"car","x":-2.35,"y":0,"z":3.9,"rot":0,"rotX":0,"rotZ":0,"scaleX":1.05,"scaleY":1.05,"scaleZ":1.05,"color":"#d98770","parent":null,"footprint":{"width":1.8,"depth":4.5},"height":1.4},{"id":"car-4","name":"Car 4","renderer":"car","x":1.4,"y":0,"z":12,"rot":-180,"rotX":0,"rotZ":0,"scaleX":0.9,"scaleY":0.9,"scaleZ":0.9,"color":"#d98770","parent":null,"footprint":{"width":1.8,"depth":4.5},"height":1.4},{"id":"cylinder-4","name":"Cylinder 4","renderer":"cylinder","x":-3.45,"y":0,"z":-11,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.11,"scaleY":5.5,"scaleZ":0.11,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-5","name":"Cylinder 5","renderer":"cylinder","x":3.45,"y":0,"z":-7,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.11,"scaleY":5.5,"scaleZ":0.11,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-6","name":"Cylinder 6","renderer":"cylinder","x":-3.45,"y":0,"z":-2,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.11,"scaleY":5.5,"scaleZ":0.11,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-7","name":"Cylinder 7","renderer":"cylinder","x":3.45,"y":0,"z":3,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.11,"scaleY":5.5,"scaleZ":0.11,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-8","name":"Cylinder 8","renderer":"cylinder","x":-3.45,"y":0,"z":9,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.11,"scaleY":5.5,"scaleZ":0.11,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-9","name":"Cylinder 9","renderer":"cylinder","x":3.45,"y":0,"z":14,"rot":0,"rotX":0,"rotZ":0,"scaleX":0.11,"scaleY":5.5,"scaleZ":0.11,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cylinder-10","name":"Cylinder 10","renderer":"cylinder","x":8,"y":8.5,"z":8,"rot":0,"rotX":0,"rotZ":0,"scaleX":1.1,"scaleY":1.5,"scaleZ":1.1,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"cone","name":"Cone","renderer":"cone","x":8,"y":10,"z":8,"rot":0,"rotX":0,"rotZ":0,"scaleX":1.4,"scaleY":1.2,"scaleZ":1.4,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1},{"id":"sphere","name":"Sphere","renderer":"sphere","x":4.2,"y":1.4,"z":-13.5,"rot":0,"rotX":0,"rotZ":0,"scaleX":2.2,"scaleY":2.2,"scaleZ":2.2,"color":"#c2c6c8","parent":null,"footprint":{"width":1,"depth":1},"height":1}],"shotDocument":{"version":4,"frameCount":432,"waypoints":[],"shots":[]},"stage":{"characters":[{"id":"char-a","model":"y-bot-tpose","x":0,"y":0,"z":0,"rot":0,"hidden":false,"tint":null,"pose":null,"identityImage":null,"scale":1,"subject":"a young woman in a tan coat","layer":{"waypoints":[],"promptClips":[]},"motionRef":null}],"hasCharSheet":false,"environmentImage":null,"shotAspect":"16:9","cameraPresetId":null,"sensorId":"fullFrame","keyLight":{"x":6,"y":9,"z":4,"intensity":1.12,"warmth":0.5}}}]},"workspace":{"hierarchyWidth":300,"sidebarWidth":380,"timelineHeight":224,"insetWidth":310,"insetHeight":310,"insetCollapsed":false,"planZoom":1},"poseLibrary":[],"assets":[],"workflow":{"version":1,"nodes":[],"edges":[]}}

package/src/burn-in.js

@@ -1,91 +0,0 @@
-// Metadata burn-in for exported movies, after Blender's render Stamp: a
-// review cut is only reviewable when every frame names itself. The stamp bar
-// carries slate · frame counter and is composited straight into the RGBA
-// bytes the offscreen exporter already produces, so the mp4 pipeline and its
-// determinism guarantees stay untouched.
-//
-// Split on purpose:
-//   buildStampText / compositeStamp — pure byte math, unit-testable in node.
-//   renderStampBitmap / burnInCapture — need Canvas 2D, exercised in browser QA.
-
-/** the slate line for one frame, zero-padded so columns never jitter */
-export function buildStampText({ slate, frame, frameCount }) {
-	const digits = Math.max(4, String(Math.max(0, (frameCount ?? 0) - 1)).length);
-	const counter = `F ${String(frame).padStart(digits, "0")}`;
-	const head = (slate ?? "").trim().toUpperCase();
-	return head ? `${head} · ${counter}` : counter;
-}
-
-/**
- * Alpha-composite a top-down stamp bitmap into a bottom-up RGBA frame at the
- * bottom-left corner. `pixels` is the raw WebGL readback (row 0 = visual
- * bottom); the stamp is ordinary canvas output (row 0 = visual top). Margins
- * are in pixels of the target frame.
- */
-export function compositeStamp(pixels, width, height, stamp, { marginX = 0, marginY = 0 } = {}) {
-	const { data, width: stampW, height: stampH } = stamp;
-	if (!(pixels instanceof Uint8Array) && !(pixels instanceof Uint8ClampedArray)) {
-		throw new TypeError("compositeStamp needs raw RGBA bytes");
-	}
-	if (pixels.byteLength !== width * height * 4) throw new RangeError("frame byte length does not match dimensions");
-	if (data.byteLength !== stampW * stampH * 4) throw new RangeError("stamp byte length does not match dimensions");
-	const copyW = Math.min(stampW, Math.max(0, width - marginX));
-	const copyH = Math.min(stampH, Math.max(0, height - marginY));
-	for (let row = 0; row < copyH; row += 1) {
-		// stamp row (top-down) → visual y from frame bottom → frame buffer row
-		const visualFromBottom = marginY + (copyH - 1 - row);
-		const frameRowStart = (visualFromBottom * width + marginX) * 4;
-		const stampRowStart = row * stampW * 4;
-		for (let col = 0; col < copyW; col += 1) {
-			const s = stampRowStart + col * 4;
-			const alpha = data[s + 3] / 255;
-			if (alpha <= 0) continue;
-			const d = frameRowStart + col * 4;
-			pixels[d] = Math.round(data[s] * alpha + pixels[d] * (1 - alpha));
-			pixels[d + 1] = Math.round(data[s + 1] * alpha + pixels[d + 1] * (1 - alpha));
-			pixels[d + 2] = Math.round(data[s + 2] * alpha + pixels[d + 2] * (1 - alpha));
-			pixels[d + 3] = 255;
-		}
-	}
-	return pixels;
-}
-
-/** Rasterize one stamp line into RGBA bytes (browser-only: Canvas 2D). */
-function renderStampBitmap(text, { fontPx = 18, padX = 10, padY = 6, maxWidth = Infinity } = {}) {
-	const probe = new OffscreenCanvas(1, 1).getContext("2d");
-	probe.font = `600 ${fontPx}px ui-monospace, Menlo, monospace`;
-	const textW = Math.ceil(probe.measureText(text).width);
-	const width = Math.max(1, Math.min(textW + padX * 2, Math.floor(maxWidth)));
-	const height = fontPx + padY * 2;
-	const canvas = new OffscreenCanvas(width, height);
-	const ctx = canvas.getContext("2d", { willReadFrequently: true });
-	ctx.fillStyle = "rgba(14, 13, 16, 0.72)";
-	ctx.fillRect(0, 0, width, height);
-	ctx.font = probe.font;
-	ctx.textBaseline = "middle";
-	ctx.fillStyle = "rgba(255, 255, 255, 0.94)";
-	ctx.fillText(text, padX, height / 2 + 1, width - padX * 2);
-	const image = ctx.getImageData(0, 0, width, height);
-	return { data: image.data, width, height };
-}
-
-/**
- * Wrap an exporter `capture(frame)` so every returned frame carries the burn-in
- * bar. Bitmaps are cached per rendered text, so the per-frame cost is one
- * composite pass; only the frame counter changes between frames.
- */
-export function burnInCapture(capture, { width, height, slate, frameCount }) {
-	const cache = new Map();
-	const margin = Math.max(8, Math.round(height * 0.02));
-	return (frame) => {
-		const pixels = capture(frame);
-		if (!pixels) return pixels;
-		const text = buildStampText({ slate, frame, frameCount });
-		let bitmap = cache.get(text);
-		if (!bitmap) {
-			bitmap = renderStampBitmap(text, { fontPx: Math.max(12, Math.round(height / 40)), maxWidth: width - margin * 2 });
-			cache.set(text, bitmap);
-		}
-		return compositeStamp(pixels, width, height, bitmap, { marginX: margin, marginY: margin });
-	};
-}

package/src/camera-tutorial.jsx

@@ -1,520 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { ko } from "./locale.js";
-
-// The camera tutorial, Studio-native (#206).
-//
-// The landing page runs the same seven steps against the playground iframe
-// (index.html), where the studio is a black box and every signal crosses the
-// frame boundary as a postMessage. Inside /app/ there is no frame: the
-// gestures already announce themselves on `window`, so this component listens
-// to them directly.
-//
-//   cozyclay:nav               fly / walk / dolly / orbit  (src/controls.jsx)
-//   shotCount / railReady      shot / rail                 (authored state)
-//   previewing prop            play                        (lookThroughShot)
-//
-// Nothing here drives the studio. A step is done when the operator has done
-// the thing in the real tool — there is no "next" button to fake progress
-// with, which is the whole point of teaching a camera by flying it.
-
-/** Right-button + these six keys is one gesture, so the walk step only counts
- * once every key has actually been pressed (the landing page's rule). */
-export const WALK_KEYS = ["w", "a", "s", "d", "q", "e"];
-
-export const CAMERA_TUTORIAL_STEPS = [
-	{
-		kind: "fly",
-		label: ko("Look", "보기"),
-		how: () => ko(
-			"Right-drag in the viewport to look around.",
-			"뷰포트에서 오른쪽 버튼을 끌어 주위를 둘러보세요.",
-		),
-	},
-	{
-		kind: "walk",
-		label: ko("Walk", "걷기"),
-		how: ({ walked }) => {
-			const keys = (
-				<span className="camera-tutorial-keys">
-					{WALK_KEYS.map((key) => (
-						<kbd key={key} data-key={key} data-done={walked.has(key) ? 1 : 0}>{key.toUpperCase()}</kbd>
-					))}
-				</span>
-			);
-			return ko(
-				<>Hold the right button and press each key once: {keys} W A S D walk, Q E crane.</>,
-				<>오른쪽 버튼을 누른 채 각 키를 한 번씩 누르세요: {keys} W A S D 이동, Q E 크레인.</>,
-			);
-		},
-	},
-	{
-		kind: "dolly",
-		label: ko("Dolly", "돌리"),
-		how: () => ko(
-			"Scroll in the viewport to push in and pull out.",
-			"뷰포트에서 스크롤해 앞뒤로 밀고 당겨 보세요.",
-		),
-	},
-	{
-		kind: "orbit",
-		label: ko("Orbit", "궤도"),
-		how: () => ko(
-			<>Hold <kbd>Alt</kbd> (<kbd>⌥ Option</kbd> on Mac) and left-drag to circle the character.</>,
-			<><kbd>Alt</kbd>(맥은 <kbd>⌥ Option</kbd>)을 누른 채 왼쪽 버튼을 끌어 캐릭터 주위를 도세요.</>,
-		),
-	},
-	{
-		kind: "shot",
-		label: ko("Shot", "샷"),
-		// The control lives in another region than the card, so the card says
-		// which way to look before it says what to do.
-		where: ko("↓ Timeline, Camera Cuts", "↓ 타임라인 Camera Cuts"),
-		how: () => ko(
-			<>In the timeline's Camera Cuts lane click <b>+ Add shot</b>. That is your cut.</>,
-			<>타임라인의 Camera Cuts 레인에서 <b>+ 샷 추가</b>를 누르세요. 그게 컷입니다.</>,
-		),
-	},
-	{
-		kind: "rail",
-		label: ko("Rail", "레일"),
-		where: ko("↓ Timeline, Camera Cuts", "↓ 타임라인 Camera Cuts"),
-		how: () => ko(
-			<>Select the shot, click <b>Draw rail</b> in the camera bar, and drag a line across the top view. That line is the dolly move.</>,
-			<>샷을 선택하고 카메라 바의 <b>레일 그리기</b>를 누른 뒤, 탑뷰에 선을 그으세요. 그 선이 돌리 이동입니다.</>,
-		),
-	},
-	{
-		kind: "play",
-		label: ko("Play", "재생"),
-		where: ko("↘ Shot Camera monitor", "↘ Shot Camera 모니터"),
-		how: () => ko(
-			<>Click <b>Look through</b> in the Shot monitor to fly the shot camera; <b>▶</b> rides the rail, <kbd>Esc</kbd> returns to the free camera.</>,
-			<>Shot Camera 모니터의 <b>샷 시점</b>을 눌러 샷 카메라를 조종하세요. <b>▶</b>는 레일을 타고, <kbd>Esc</kbd>로 자유 카메라로 돌아옵니다.</>,
-		),
-	},
-];
-
-const NAV_KINDS = new Set(["fly", "walk", "dolly", "orbit"]);
-const SIGNAL_KINDS = new Set(["shot", "rail"]);
-
-// Where each of the last three steps actually happens (#211). The card names
-// the gesture; these pin a numbered circle and a caption onto the control
-// itself, so "click + Add shot" stops being a treasure hunt across two panes.
-//
-// `absent`/`requires` gate a beacon on the studio's own state instead of on
-// tutorial bookkeeping: the camera bar (.tl-rail-draw) only exists once a shot
-// is selected, which is exactly the moment the rail step's advice changes.
-export const TUTORIAL_BEACONS = {
-	shot: [
-		{ role: "add-shot", selector: ".tl-track.shots .tl-track-add", label: () => ko("Click here", "여기를 클릭") },
-	],
-	rail: [
-		{
-			role: "select-shot",
-			selector: ".tl-track.shots .tl-shot-block:not(.selected)",
-			absent: ".tl-rail-draw",
-			label: () => ko("1. Select the shot", "1. 샷을 선택"),
-		},
-		{ role: "draw-rail", selector: ".tl-rail-draw", label: () => ko("2. Draw rail, then drag across the top view", "2. 레일 그리기 후 탑뷰에 선 긋기") },
-		// The Top-View becomes an active drawing surface after the tool is armed.
-		{ role: "top-view", selector: ".vp-inset", requires: '[data-rail-draw="1"]', label: () => ko("Drag a line here", "여기에 선을 그으세요") },
-	],
-	play: [
-		// The glass shell keeps the same action in the bottom dock while the
-		// compact viewport card owns it in the classic shell.
-		{ role: "look-through", selector: ".dock-shot-look, .vp-look-through", label: () => ko("Click to fly the shot camera", "클릭해 샷 카메라를 조종") },
-	],
-};
-
-/** the beacon's own geometry, in px — the circle sits above-left of the target */
-const DOT = 22;
-const LIFT_X = 30;
-const LIFT_Y = 44;
-/** nominal box used only for edge clamping; the chip itself is auto-sized */
-const BEACON_W = 190;
-const BEACON_H = 26;
-
-const reducedMotion = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
-
-const boxOf = (element) => {
-	if (!element) return null;
-	const box = element.getBoundingClientRect();
-	if (box.width < 2 || box.height < 2) return null;
-	if (box.right < 0 || box.bottom < 0 || box.left > window.innerWidth || box.top > window.innerHeight) return null;
-	return box;
-};
-
-/** first element matching `selector` that is actually laid out on screen */
-const firstVisible = (selector) => {
-	if (!selector) return null;
-	for (const element of document.querySelectorAll(selector)) {
-		const box = boxOf(element);
-		if (box) return { element, box };
-	}
-	return null;
-};
-
-const round = (value) => Math.round(value * 2) / 2;
-
-/**
- * Place the beacon above-left of the target and clamp it inside whatever
- * scrolls the target (the timeline body, or the viewport pane). The leader
- * line is aimed at the real target, so a shot block scrolled past the lane's
- * edge still gets an arrow pointing off toward it.
- *
- * Above is the default; when the target hugs the top of its own pane — the
- * camera bar under the transport row, the Top-View inset under the titlebar —
- * the beacon flips below rather than sitting on the pane's header controls.
- */
-function place(element, box) {
-	const clip = element.closest(".tl-body, .timeline, .viewport")?.getBoundingClientRect();
-	const edge = Math.min(14, box.height / 2);
-	const above = box.top + edge - LIFT_Y - DOT / 2;
-	const flip = above < (clip ? clip.top : 0) + BEACON_H;
-	const aimX = box.left + Math.min(18, box.width / 2);
-	const aimY = flip ? box.bottom - edge : box.top + edge;
-	const minLeft = Math.max(8, clip ? clip.left + 6 : 8);
-	const maxLeft = Math.max(minLeft, Math.min(window.innerWidth - 8, clip ? clip.right - 6 : window.innerWidth - 8) - BEACON_W);
-	const left = Math.min(Math.max(aimX - LIFT_X - DOT / 2, minLeft), maxLeft);
-	const top = Math.min(Math.max(flip ? aimY + LIFT_Y - DOT / 2 : above, 8), Math.max(8, window.innerHeight - 46));
-	return { left: round(left), top: round(top), aimX: round(aimX - left), aimY: round(aimY - top) };
-}
-
-const samePlace = (a, b) => !!a && !!b && a.left === b.left && a.top === b.top && a.aimX === b.aimX && a.aimY === b.aimY;
-
-/**
- * One numbered circle plus a caption chip, portalled to <body> and pinned to a
- * live control. It measures on mount, on resize, on scroll, on a
- * ResizeObserver of the timeline and viewport, and on any DOM mutation — the
- * camera bar mounts only after a shot is selected, so "target not there yet"
- * is the normal case, not an error. Pointer-transparent: the control it points
- * at must stay clickable through it.
- */
-export function TutorialBeacon({ kind, step, role, selector, label, requires = null, absent = null }) {
-	const [spot, setSpot] = useState(null);
-
-	useEffect(() => {
-		let frame = 0;
-		const measure = () => {
-			frame = 0;
-			if (absent && firstVisible(absent)) return setSpot(null);
-			if (requires && !firstVisible(requires)) return setSpot(null);
-			const found = firstVisible(selector);
-			if (!found) return setSpot(null);
-			const next = place(found.element, found.box);
-			// Same numbers means no re-render, which keeps the MutationObserver
-			// below from chasing this component's own portal forever.
-			setSpot((prev) => (samePlace(prev, next) ? prev : next));
-		};
-		const schedule = () => {
-			if (!frame) frame = requestAnimationFrame(measure);
-		};
-		measure();
-		window.addEventListener("resize", schedule);
-		window.addEventListener("scroll", schedule, true);
-		const resize = new ResizeObserver(schedule);
-		for (const pane of [document.querySelector(".timeline"), document.querySelector(".viewport")]) {
-			if (pane) resize.observe(pane);
-		}
-		const mutations = new MutationObserver(schedule);
-		mutations.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "data-rail-draw"] });
-		return () => {
-			if (frame) cancelAnimationFrame(frame);
-			window.removeEventListener("resize", schedule);
-			window.removeEventListener("scroll", schedule, true);
-			resize.disconnect();
-			mutations.disconnect();
-		};
-	}, [selector, requires, absent]);
-
-	if (!spot) return null;
-	return createPortal(
-		<div
-			className="tutorial-beacon"
-			data-testid="camera-tutorial-beacon"
-			data-kind={kind}
-			data-role={role}
-			style={{ left: `${spot.left}px`, top: `${spot.top}px` }}
-		>
-			<svg className="tutorial-beacon-leader" aria-hidden="true">
-				<line x1={DOT / 2} y1={DOT / 2} x2={spot.aimX} y2={spot.aimY} />
-			</svg>
-			<span className="tutorial-beacon-dot" aria-hidden="true">{step}</span>
-			<span className="tutorial-beacon-label">{label()}</span>
-		</div>,
-		document.body,
-	);
-}
-
-// Steps 1–4 have no control to point at: the gesture IS the interface. The cue
-// draws the mouse and the keys the step wants, animated the way the hand is
-// supposed to move, and sits centre-bottom of the viewport where the eye
-// already is while flying.
-const GESTURE_CAPTIONS = {
-	fly: () => ko("Right-drag to look", "오른쪽 끌어 둘러보기"),
-	walk: () => ko("Hold right, press keys", "오른쪽 누른 채 키 입력"),
-	dolly: () => ko("Scroll to push in", "스크롤로 밀고 당기기"),
-	orbit: () => ko("Alt + left-drag to circle", "Alt+왼쪽 끌어 돌기"),
-};
-
-function MouseGlyph() {
-	return (
-		<svg className="tutorial-cue-mouse" viewBox="0 0 40 58" aria-hidden="true">
-			<rect className="cue-mouse-body" x="4" y="3" width="32" height="52" rx="16" />
-			<path className="cue-mouse-left" d="M20 3 A16 16 0 0 0 4 19 L20 19 Z" />
-			<path className="cue-mouse-right" d="M20 3 A16 16 0 0 1 36 19 L20 19 Z" />
-			<rect className="cue-mouse-wheel" x="17.5" y="8" width="5" height="11" rx="2.5" />
-		</svg>
-	);
-}
-
-/**
- * The animated gesture glyph for one nav step. `leaving` starts the fade; the
- * parent unmounts it when the opacity transition ends, so the cue never blinks
- * out mid-step. Under prefers-reduced-motion the glyph is static (styles.css)
- * and the parent drops it outright.
- */
-export function GestureCue({ kind, walked, leaving = false, onLeft }) {
-	const caption = GESTURE_CAPTIONS[kind]?.() ?? "";
-	return (
-		<div
-			className="tutorial-cue"
-			data-testid="camera-tutorial-gesture"
-			data-kind={kind}
-			data-leaving={leaving ? 1 : 0}
-			aria-hidden="true"
-			onTransitionEnd={(event) => {
-				if (leaving && event.propertyName === "opacity" && event.target === event.currentTarget) onLeft?.();
-			}}
-		>
-			<div className="tutorial-cue-stage">
-				{kind === "orbit" && <span className="tutorial-cue-key">Alt</span>}
-				<span className="tutorial-cue-arm">
-					<MouseGlyph />
-					{kind === "fly" && (
-						<svg className="tutorial-cue-arc" viewBox="0 0 64 20" aria-hidden="true">
-							<path className="cue-arc-line" d="M8 14 Q32 3 56 14" />
-							<path className="cue-arc-head" d="M13 9 L7 14 L14 17" />
-							<path className="cue-arc-head" d="M51 9 L57 14 L50 17" />
-						</svg>
-					)}
-				</span>
-				{kind === "orbit" && <span className="tutorial-cue-pivot" />}
-				{kind === "dolly" && (
-					<svg className="tutorial-cue-updown" viewBox="0 0 14 44" aria-hidden="true">
-						<path className="cue-up" d="M7 16 L7 4 M3 8 L7 4 L11 8" />
-						<path className="cue-down" d="M7 28 L7 40 M3 36 L7 40 L11 36" />
-					</svg>
-				)}
-			</div>
-			{kind === "walk" && (
-				<span className="tutorial-cue-keys">
-					{WALK_KEYS.map((walkKey) => (
-						<kbd key={walkKey} data-done={walked?.has(walkKey) ? 1 : 0}>{walkKey.toUpperCase()}</kbd>
-					))}
-				</span>
-			)}
-			<span className="tutorial-cue-caption">{caption}</span>
-		</div>
-	);
-}
-
-/**
- * The overlay itself: a seven-chip strip plus one hint card for the step the
- * operator is on. It sits at the top of the viewport pane, left of the
- * Top-View inset, and never takes the pointer except on its own close button
- * — every step is completed by working the studio underneath it.
- */
-export function CameraTutorial({ previsMode, previewing = false, shotCount = 0, railReady = false, analytics, onStepChange, onClose, onComplete, handoff = null, shotId = null, onOpenExport, onContinue }) {
-	const [done, setDone] = useState(() => new Set());
-	const [walked, setWalked] = useState(() => new Set());
-	const [cue, setCue] = useState(null);
-	const completionReported = useRef(false);
-	const effectiveDone = useMemo(() => {
-		const next = new Set(done);
-		if (shotCount > 0) next.add("shot");
-		if (railReady) next.add("rail");
-		if (previewing && next.has("rail")) next.add("play");
-		return next;
-	}, [done, previewing, railReady, shotCount]);
-
-	useEffect(() => {
-		const complete = (kind) => setDone((current) => (current.has(kind) ? current : new Set(current).add(kind)));
-		const onNav = (event) => {
-			const kind = event.detail?.kind;
-			if (!NAV_KINDS.has(kind)) return;
-			if (kind !== "walk") {
-				complete(kind);
-				return;
-			}
-			const key = typeof event.detail?.key === "string" ? event.detail.key.toLowerCase() : null;
-			if (!WALK_KEYS.includes(key)) return;
-			setWalked((current) => {
-				if (current.has(key)) return current;
-				const next = new Set(current).add(key);
-				if (WALK_KEYS.every((walkKey) => next.has(walkKey))) complete("walk");
-				return next;
-			});
-		};
-		const onSignal = (event) => {
-			if (SIGNAL_KINDS.has(event.detail?.kind)) complete(event.detail.kind);
-		};
-		window.addEventListener("cozyclay:nav", onNav);
-		window.addEventListener("cozyclay:playground-signal", onSignal);
-		return () => {
-			window.removeEventListener("cozyclay:nav", onNav);
-			window.removeEventListener("cozyclay:playground-signal", onSignal);
-		};
-	}, []);
-
-	// Studio-native completion comes from the authored state. The old playground
-	// signal was never emitted by the Studio shell, so a real Shot or rail could
-	// leave the tutorial stuck on its previous step.
-	useEffect(() => {
-		if (shotCount > 0) setDone((current) => (current.has("shot") ? current : new Set(current).add("shot")));
-	}, [shotCount]);
-	useEffect(() => {
-		if (railReady) setDone((current) => (current.has("rail") ? current : new Set(current).add("rail")));
-	}, [railReady]);
-
-	// The player is the last step, and only once there is a rail to ride:
-	// look-through before the dolly exists shows a still frame, which teaches
-	// nothing about the move. Analytics v1 observes this existing look-through
-	// boundary, not transport playback or reaching the end of a shot.
-	useEffect(() => {
-		if (!previewing) return;
-		setDone((current) => (!current.has("rail") || current.has("play") ? current : new Set(current).add("play")));
-	}, [previewing, railReady]);
-
-	const current = useMemo(() => CAMERA_TUTORIAL_STEPS.find((step) => !effectiveDone.has(step.kind)) ?? null, [effectiveDone]);
-	const complete = current === null;
-	const currentKind = current?.kind ?? null;
-	const showHandoff = !!shotId && (handoff?.canShow(effectiveDone) ?? false);
-	useEffect(() => {
-		if (!complete || completionReported.current) return;
-		completionReported.current = true;
-		onComplete?.();
-	}, [complete, onComplete]);
-
-	// Observe committed progression, outside state updaters (which StrictMode
-	// may replay). The attempt belongs to App and survives effect cleanup/resume.
-	useEffect(() => {
-		analytics?.observe(effectiveDone, currentKind);
-	}, [analytics, effectiveDone, currentKind]);
-
-	// The step the operator is on is the studio's business too: App puts it on
-	// the .app root as data-tutorial-step, and styles.css spotlights whichever
-	// control that step needs (#211).
-	useEffect(() => {
-		onStepChange?.(currentKind);
-	}, [currentKind, onStepChange]);
-	useEffect(() => () => onStepChange?.(null), [onStepChange]);
-
-	// Steps 1–4 carry a gesture cue instead of a beacon. It fades out when its
-	// step completes rather than vanishing under the hand that just finished it.
-	useEffect(() => {
-		if (currentKind && NAV_KINDS.has(currentKind)) {
-			setCue({ kind: currentKind, leaving: false });
-			return;
-		}
-		setCue((prev) => {
-			if (!prev) return prev;
-			if (reducedMotion()) return null;
-			return prev.leaving ? prev : { ...prev, leaving: true };
-		});
-	}, [currentKind]);
-
-	// Storyboard projects never show the camera tutorial (its steps are shot/rail/play).
-	if (previsMode === "storyboard") return null;
-
-	return (
-	<>
-		<aside
-			className="camera-tutorial"
-			data-testid="camera-tutorial"
-			data-state={complete ? "done" : "active"}
-			data-previewing={previewing ? 1 : 0}
-			data-handoff={showHandoff ? 1 : undefined}
-			aria-label={ko("Camera tutorial", "카메라 튜토리얼")}
-		>
-			<ol className="camera-tutorial-steps">
-				{CAMERA_TUTORIAL_STEPS.map((step, index) => (
-					<li
-						key={step.kind}
-						data-testid="camera-tutorial-step"
-						data-kind={step.kind}
-						data-done={effectiveDone.has(step.kind) ? 1 : 0}
-						data-current={step === current ? 1 : 0}
-					>
-						<i aria-hidden="true">{effectiveDone.has(step.kind) ? "✓" : index + 1}</i>
-						{step.label}
-					</li>
-				))}
-			</ol>
-			<div className="camera-tutorial-card" data-testid="camera-tutorial-card" role="status">
-				{complete ? (
-					<>
-						<span className="camera-tutorial-count done">{ko("Done", "완료")}</span>
-						<p>{ko(
-							"That is the whole camera: look, walk, dolly, orbit, cut, rail, play.",
-							"카메라의 전부입니다: 보기, 걷기, 돌리, 궤도, 컷, 레일, 재생.",
-						)}</p>
-					</>
-				) : (
-					<>
-						<span className="camera-tutorial-count">{`${CAMERA_TUTORIAL_STEPS.indexOf(current) + 1} / ${CAMERA_TUTORIAL_STEPS.length}`}</span>
-						<p>
-							{current.where && <span className="camera-tutorial-where">{current.where}</span>}
-							{current.how({ walked })}
-						</p>
-					</>
-				)}
-			</div>
-			{showHandoff && (
-				<div className="camera-tutorial-handoff" data-testid="camera-tutorial-handoff">
-					<p>{ko("Take this shot with you. Its camera and range stay yours.", "이 샷을 가져가세요. 설정한 카메라와 범위가 그대로 유지됩니다.")}</p>
-					<button type="button" className="btn primary" data-testid="camera-tutorial-handoff-export" onClick={() => onOpenExport?.(shotId)}>
-						{ko("Open Export", "내보내기 열기")}
-					</button>
-					<button type="button" className="camera-tutorial-handoff-dismiss" data-testid="camera-tutorial-handoff-dismiss" onClick={() => onContinue?.()}>
-						{ko("Continue editing", "편집 계속하기")}
-					</button>
-				</div>
-			)}
-			<button
-				type="button"
-				className="camera-tutorial-close"
-				data-testid="camera-tutorial-close"
-				aria-label={ko("Close tutorial", "튜토리얼 닫기")}
-				title={ko("Close tutorial", "튜토리얼 닫기")}
-				onClick={() => { analytics?.dismiss(); onClose?.(); }}
-			>
-				×
-			</button>
-		</aside>
-		{cue && (
-			<GestureCue
-				kind={cue.kind}
-				walked={walked}
-				leaving={cue.leaving}
-				onLeft={() => setCue((prev) => (prev?.leaving ? null : prev))}
-			/>
-		)}
-		{(TUTORIAL_BEACONS[currentKind] ?? []).map((beacon) => (
-			<TutorialBeacon
-				key={beacon.role}
-				kind={currentKind}
-				step={CAMERA_TUTORIAL_STEPS.indexOf(current) + 1}
-				role={beacon.role}
-				selector={beacon.selector}
-				label={beacon.label}
-				requires={beacon.requires}
-				absent={beacon.absent}
-			/>
-		))}
-	</>
-	);
-}
-
-export default CameraTutorial;