cozyclay 1.9.0 → 2.0.0

package/src/dualview.jsx

@@ -28,6 +28,8 @@ export const SHOT_ASPECT = 16 / 9;
  * styles.css) rather than the scene's sky. Kept in sync by eye: a mismatch
  * here reads as a seam around the frame, not as a wrong colour. */
 export const LETTERBOX = new THREE.Color("#1e1e1e");
+// The light theme's bars take the light panel tone, not a black slab.
+export const LETTERBOX_LIGHT = new THREE.Color("#dcdde1");
 /** half-height of the plan frustum, in metres — covers the full camera throw */
 export const PLAN_EXTENT = 12.4;
 
@@ -113,7 +115,7 @@ export function fitAspect(rect, aspect) {
 	return { x: rect.x + (rect.w - w) / 2, y: rect.y + (rect.h - h) / 2, w, h };
 }
 
-export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCamRef, planCamRef, poserCamRef, editorCamRef, ikMode = false, planIsMain, playMode = false, lookThrough = false, insetCollapsed = false, planZoom = 1, shotAspect = SHOT_ASPECT }) {
+export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCamRef, planCamRef, poserCamRef, editorCamRef, ikMode = false, planIsMain, playMode = false, lookThrough = false, insetCollapsed = false, planZoom = 1, shotAspect = SHOT_ASPECT, editorLook = false }) {
 	const invalidate = useThree((state) => state.invalidate);
 	const lastPoserPose = useRef({ position: new THREE.Vector3(), quaternion: new THREE.Quaternion(), valid: false });
 	const interactivePixelRatio = useRef({ base: null, reduced: false, needsFrozenRedraw: false });
@@ -129,6 +131,22 @@ export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCa
 			cancelAnimationFrame(f2);
 		};
 	}, [invalidate]);
+	// The theme is read per frame, but a demand-mode canvas draws nothing after
+	// a toggle unless something asks for a frame.
+	useEffect(() => {
+		window.addEventListener("cozyclay:theme-change", invalidate);
+		return () => window.removeEventListener("cozyclay:theme-change", invalidate);
+	}, [invalidate]);
+	// Likewise when the preview card is resized (the dock handle changes
+	// --shell-dock): the dock's glass hole grows at once, and without a new
+	// frame it shows whatever the canvas last drew there.
+	useEffect(() => {
+		const card = shotPreviewRef?.current;
+		if (!card || typeof ResizeObserver === "undefined") return undefined;
+		const observer = new ResizeObserver(() => invalidate());
+		observer.observe(card);
+		return () => observer.disconnect();
+	}, [shotPreviewRef, invalidate]);
 	const { gl, scene, size } = useThree();
 	const edgePass = useMemo(() => {
 		const target = new THREE.WebGLRenderTarget(1, 1, {
@@ -230,7 +248,11 @@ export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCa
 		// A collapsed inset is just its tag pill: skip the whole inset pass
 		// instead of drawing a squished viewport into it.
 		const insetRect = insetCollapsed ? { x: 0, y: 0, w: 0, h: 0 } : rectOf(insetRef.current);
-		if (mainRect.w < 2 || (!playMode && !insetCollapsed && insetRect.w < 2)) return;
+		// The glass shell hides the plan/shot inset with CSS (display: none), which
+		// leaves it 0x0. That skips the inset pass like a collapsed one; it must not
+		// skip the main pane, or the stage stays blank.
+		const insetOff = insetCollapsed || (!playMode && insetRect.w < 2);
+		if (mainRect.w < 2) return;
 
 		const planPane = planIsMain ? mainRect : insetRect;
 		const shotPane = planIsMain ? insetRect : mainRect;
@@ -292,11 +314,13 @@ export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCa
 		// rather than information. They take the editor's own tone instead, and
 		// the scene draw is scissored to the image so the sky inside the frame is
 		// untouched.
+		const uiTheme = typeof document !== "undefined" ? document.documentElement.dataset.theme : undefined;
+		const letterbox = uiTheme === "light" ? LETTERBOX_LIGHT : LETTERBOX;
 		const draw = (camera, pane, imageRect, ink = true) => {
 			const glY = size.height - (pane.y + pane.h);
 			gl.setScissorTest(true);
 			gl.setScissor(pane.x, glY, pane.w, pane.h);
-			gl.setClearColor(LETTERBOX, 1);
+			gl.setClearColor(letterbox, 1);
 			gl.clear(true, true, false);
 			const img = imageRect ?? pane;
 			const imgY = size.height - (img.y + img.h);
@@ -321,9 +345,14 @@ export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCa
 				// used to trace an empty frame around every pasted image — the
 				// "border that will not go away". Hiding the card from the prepass
 				// leaves the wall behind it continuous, so no edge is drawn.
+				// The deck takes no ink either (userData.noInk, room.jsx): seen at a
+				// grazing angle its depth runs away fast enough that the depth
+				// kernel inked the whole far floor as a dark band under the
+				// horizon. Without it in the prepass, figures still outline
+				// against the cleared depth behind them.
 				const cutouts = [];
 				scene.traverse((node) => {
-					if (node.userData?.cutoutTexture !== undefined && node.visible) {
+					if ((node.userData?.cutoutTexture !== undefined || node.userData?.noInk) && node.visible) {
 						cutouts.push(node);
 						node.visible = false;
 					}
@@ -350,9 +379,38 @@ export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCa
 				gl.autoClear = true;
 			}
 		};
+		// The stage is the grey workbench in every pane and in every capture
+		// (STAGE_BACKGROUND, room.jsx), so an editor pane is a plain draw.
+		const drawEditorPane = draw;
 		const drawVisibleInset = (...args) => {
-			if (!insetCollapsed) draw(...args);
+			if (!insetOff) draw(...args);
+		};
+		// The shot card. Every main-pane draw above covers the whole canvas,
+		// including the pixels under the card, so the card is repainted every
+		// frame — a camera drag used to leave the editor's pixels showing through
+		// it. Only the ink pass waits for the gesture to settle.
+		const drawPreviewCard = () => {
+			const previewEl = shotPreviewRef?.current;
+			if (!previewEl || previewEl.hidden) return;
+			const previewRect = rectOf(previewEl);
+			// The inset card's header strip (src/shell/viewport.css) is chrome:
+			// the frame is drawn into the card body below it.
+			const header = parseFloat(getComputedStyle(previewEl).getPropertyValue("--shot-preview-header")) || 0;
+			previewRect.y += header;
+			previewRect.h -= header;
+			if (previewRect.w < 2 || previewRect.h < 2) return;
+			const previewMask = shotCam.layers.mask;
+			shotCam.layers.disable(GIZMO_LAYER);
+			draw(shotCam, previewRect, fitAspect(previewRect, shotAspect), !navigatingCamera);
+			shotCam.layers.mask = previewMask;
 		};
+		// The heads' facing marks are the exported frame's heading cue, not
+		// something to look at: the studio hides them in every on-screen draw and
+		// puts them back before the frame ends, so captures (which render outside
+		// this loop) still carry them.
+		const marks = [];
+		if (editorLook) scene.traverse((node) => { if (node.userData.facingMark) marks.push(node); });
+		for (const mark of marks) mark.visible = false;
 
 		gl.autoClear = true;
 		shotCam.aspect = shotAspect;
@@ -378,60 +436,58 @@ export function DualRender({ stageRef, mainRef, insetRef, shotPreviewRef, shotCa
 		// tested first, so the Workflow embed and the playground rail land HERE —
 		// the framed player — and never in the editing draw below that keeps the
 		// gizmo layer, the plan inset, and fly controls on the shot camera.
-		if (playMode) {
-			// PlayView (Unity Game view): the shot camera owns the whole pane —
-			// no plan inset, no editing chrome, just the framed output. Editor
-			// furniture (selection cage, gizmo, grid, pins) lives on
-			// GIZMO_LAYER and is dropped for this draw, mask restored after.
-			const playMask = shotCam.layers.mask;
-			shotCam.layers.disable(GIZMO_LAYER);
-			draw(shotCam, mainRect, fitAspect(mainRect, shotAspect));
-			shotCam.layers.mask = playMask;
-		} else if (ikMode && poserCam) {
-			// IK mode: the main pane is the poser working view (free navigation,
-			// handle layer visible); the inset is the FROZEN shot camera — the
-			// separate camera-placement screen the framing lives on.
-			poserCam.aspect = mainRect.w / mainRect.h;
-			poserCam.updateProjectionMatrix();
-			draw(poserCam, mainRect, null, !navigatingCamera);
-			if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(shotCam, insetRect, fitAspect(insetRect, shotAspect), !navigatingCamera);
-		} else if (planIsMain) {
-			draw(planCam, planPane, null, false);
-			if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(shotCam, shotPane, fitAspect(shotPane, shotAspect), !navigatingCamera);
-		} else if (editorCam && !lookThrough) {
-			// Split-camera editing: the main pane is the EDITOR camera — free
-			// navigation that never touches the recording. The shot camera only
-			// appears in its own preview pane, framed to the export aspect and
-			// stripped of editing chrome, exactly like an exported frame.
-			editorCam.aspect = mainRect.w / mainRect.h;
-			editorCam.updateProjectionMatrix();
-			// A right-drag is a camera gesture even with IK off. Keep the main
-			// image readable while the camera is moving by deferring the expensive
-			// edge/ink pass until the gesture ends; the static panes stay frozen too.
-			draw(editorCam, mainRect, null, !navigatingCamera);
-			if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(planCam, planPane, null, false);
-			const previewEl = shotPreviewRef?.current;
-			if (previewEl && !previewEl.hidden && (!navigatingCamera || redrawFrozenPanes)) {
-				const previewRect = rectOf(previewEl);
-				if (previewRect.w >= 2) {
-					const previewMask = shotCam.layers.mask;
-					shotCam.layers.disable(GIZMO_LAYER);
-					draw(shotCam, previewRect, fitAspect(previewRect, shotAspect), !navigatingCamera);
-					shotCam.layers.mask = previewMask;
-				}
+		try {
+			if (playMode) {
+				// PlayView (Unity Game view): the shot camera owns the whole pane —
+				// no plan inset, no editing chrome, just the framed output. Editor
+				// furniture (selection cage, gizmo, grid, pins) lives on
+				// GIZMO_LAYER and is dropped for this draw, mask restored after.
+				const playMask = shotCam.layers.mask;
+				shotCam.layers.disable(GIZMO_LAYER);
+				draw(shotCam, mainRect, fitAspect(mainRect, shotAspect));
+				shotCam.layers.mask = playMask;
+			} else if (ikMode && poserCam) {
+				// IK mode: the main pane is the poser working view (free navigation,
+				// handle layer visible); the inset is the FROZEN shot camera — the
+				// separate camera-placement screen the framing lives on.
+				poserCam.aspect = mainRect.w / mainRect.h;
+				poserCam.updateProjectionMatrix();
+				drawEditorPane(poserCam, mainRect, null, !navigatingCamera);
+				if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(shotCam, insetRect, fitAspect(insetRect, shotAspect), !navigatingCamera);
+				drawPreviewCard();
+			} else if (planIsMain) {
+				draw(planCam, planPane, null, false);
+				if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(shotCam, shotPane, fitAspect(shotPane, shotAspect), !navigatingCamera);
+				drawPreviewCard();
+			} else if (editorCam && !lookThrough) {
+				// Split-camera editing: the main pane is the EDITOR camera — free
+				// navigation that never touches the recording. The shot camera only
+				// appears in its own preview pane, framed to the export aspect and
+				// stripped of editing chrome, exactly like an exported frame.
+				editorCam.aspect = mainRect.w / mainRect.h;
+				editorCam.updateProjectionMatrix();
+				// A right-drag is a camera gesture even with IK off. Keep the main
+				// image readable while the camera is moving by deferring the expensive
+				// edge/ink pass until the gesture ends; the plan inset stays frozen.
+				drawEditorPane(editorCam, mainRect, null, !navigatingCamera);
+				if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(planCam, planPane, null, false);
+				drawPreviewCard();
+			} else {
+				// Shot camera in the main pane WITH the editing chrome. Look-through
+				// (the PiP expand) lands here so the operator
+				// can fly the recording lens with the same bindings as the free camera.
+				// The QA hook (`window.__cozyclay.setLookThrough`) draws the same path.
+				// Look-through is the recording lens: it keeps the authored stage.
+				draw(shotCam, shotPane, fitAspect(shotPane, shotAspect), !navigatingCamera);
+				if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(planCam, planPane, null, false);
+				drawPreviewCard();
 			}
-		} else {
-			// Shot camera in the main pane WITH the editing chrome. Look-through
-			// (the PiP expand) lands here so the operator
-			// can fly the recording lens with the same bindings as the free camera.
-			// The QA hook (`window.__cozyclay.setLookThrough`) draws the same path.
-			draw(shotCam, shotPane, fitAspect(shotPane, shotAspect), !navigatingCamera);
-			if (!navigatingCamera || redrawFrozenPanes) drawVisibleInset(planCam, planPane, null, false);
+			if (redrawFrozenPanes) pixelState.needsFrozenRedraw = false;
+		} finally {
+			for (const mark of marks) mark.visible = true;
+			gl.setScissorTest(false);
+			gl.setViewport(0, 0, size.width, size.height);
 		}
-		if (redrawFrozenPanes) pixelState.needsFrozenRedraw = false;
-
-		gl.setScissorTest(false);
-		gl.setViewport(0, 0, size.width, size.height);
 	}, 1);
 
 	return null;

package/src/facing-marks.js

@@ -66,6 +66,9 @@ export function addFacingMarks(clone) {
 		if (spec.rotation) mesh.rotation.set(...spec.rotation);
 		mesh.castShadow = true;
 		mesh.frustumCulled = false;
+		// The marks are for the exported frame (the model's heading cue); the
+		// studio's editor panes hide them per draw (dualview.jsx) by this tag.
+		mesh.userData.facingMark = true;
 		// The head bone's local +Z is the face direction on both rigs.
 		head.add(mesh);
 	}

package/src/first-success-guide.jsx

@@ -3,8 +3,8 @@ import { ko } from "./locale.js";
 
 const STEPS = [
 	{
-		en: "Select a character in the Hierarchy panel.",
-		ko: "계층 패널에서 캐릭터를 선택하세요.",
+		en: "Select a character in the Outliner.",
+		ko: "아웃라이너에서 캐릭터를 선택하세요.",
 		hintEn: "Click Character 1 (or its row) to make it active.",
 		hintKo: "캐릭터 1(또는 캐릭터 행)을 클릭하면 활성화됩니다.",
 	},
@@ -28,7 +28,7 @@ const STEPS = [
 	},
 ];
 
-/** A small, dismissible first-run checklist shown after creating a project. */
+/** A compact, dismissible first-run checklist that follows the v2 shell grammar. */
 export default function FirstSuccessGuide({ open, onDismiss }) {
 	const [step, setStep] = useState(0);
 	useEffect(() => {
@@ -38,38 +38,38 @@ export default function FirstSuccessGuide({ open, onDismiss }) {
 	const complete = step >= STEPS.length;
 
 	return (
-		<aside className="first-success-guide" role="dialog" aria-labelledby="first-success-guide-title" aria-describedby="first-success-guide-description">
-			<div className="first-success-guide-head">
+		<aside className="v2-first-success-guide first-success-guide" role="dialog" aria-labelledby="first-success-guide-title" aria-describedby="first-success-guide-description">
+			<div className="v2-first-success-guide-head first-success-guide-head">
 				<div>
 					<strong id="first-success-guide-title">{ko("Your first 60 seconds", "첫 60초")}</strong>
 					<span>{complete ? ko("Core loop complete", "핵심 흐름 완료") : ko(`Step ${step + 1} of ${STEPS.length}`, `${step + 1} / ${STEPS.length} 단계`)}</span>
 				</div>
-				<button type="button" className="first-success-guide-close" onClick={onDismiss} aria-label={ko("Dismiss guide", "가이드 닫기")}>×</button>
+				<button type="button" className="v2-first-success-guide-close first-success-guide-close" onClick={onDismiss} aria-label={ko("Dismiss guide", "가이드 닫기")}>×</button>
 			</div>
 			{complete ? (
-				<div className="first-success-guide-complete" id="first-success-guide-description" role="status">
-					<div className="first-success-guide-check">✓</div>
+				<div className="v2-first-success-guide-complete first-success-guide-complete" id="first-success-guide-description" role="status">
+					<div className="v2-first-success-guide-check first-success-guide-check">✓</div>
 					<strong>{ko("You made your first shot.", "첫 샷을 만들었어요.")}</strong>
 					<p>{ko("Select, move, key, and play are the core CozyClay loop. You can close this guide and keep blocking.", "선택하고, 움직이고, 키를 찍고, 재생하는 것이 CozyClay의 핵심 흐름입니다. 가이드를 닫고 계속 블로킹하세요.")}</p>
-					<button type="button" className="btn primary" onClick={onDismiss}>{ko("Continue editing", "편집 계속하기")}</button>
+					<button type="button" className="v2-first-success-guide-next first-success-guide-next btn primary" onClick={onDismiss}>{ko("Continue editing", "편집 계속하기")}</button>
 				</div>
 			) : (
 				<>
-					<p id="first-success-guide-description" className="first-success-guide-intro">{ko("Follow these four actions to see a result quickly.", "네 가지 동작으로 빠르게 결과를 확인해 보세요.")}</p>
-					<ol className="first-success-guide-steps">
+					<p id="first-success-guide-description" className="v2-first-success-guide-intro first-success-guide-intro">{ko("Follow these four actions to see a result quickly.", "네 가지 동작으로 빠르게 결과를 확인해 보세요.")}</p>
+					<ol className="v2-first-success-guide-steps first-success-guide-steps">
 						{STEPS.map((item, index) => (
 							<li key={item.en} className={index < step ? "done" : index === step ? "current" : ""}>
-								<span className="first-success-guide-step-mark">{index < step ? "✓" : index + 1}</span>
+								<span className="v2-first-success-guide-step-mark first-success-guide-step-mark">{index < step ? "✓" : index + 1}</span>
 								<div><strong>{ko(item.en, item.ko)}</strong>{index === step && <span>{ko(item.hintEn, item.hintKo)}</span>}</div>
 							</li>
 						))}
 					</ol>
-					<button type="button" className="btn primary first-success-guide-next" onClick={() => setStep((value) => value + 1)}>
+					<button type="button" className="v2-first-success-guide-next first-success-guide-next btn primary" onClick={() => setStep((value) => value + 1)}>
 						{ko(step === STEPS.length - 1 ? "Mark complete" : "I did this", step === STEPS.length - 1 ? "완료로 표시" : "했어요")}
 					</button>
 				</>
 			)}
-			<button type="button" className="first-success-guide-skip" onClick={onDismiss}>{ko("Skip guide", "가이드 건너뛰기")}</button>
+			<button type="button" className="v2-first-success-guide-skip first-success-guide-skip" onClick={onDismiss}>{ko("Skip guide", "가이드 건너뛰기")}</button>
 		</aside>
 	);
 }

package/src/grid-view.js

@@ -6,11 +6,24 @@
 
 export const GRID_VIEW_STORAGE_KEY = "cozyclay.grid-view.v1";
 
-// Blender's solid-mode look: a dark grey void, not true black. Fog matches
-// the background so distance still dissolves into the same neutral. The far
-// plane stays below the capture rig's CAPTURE_FOG_NEAR (55) so pushing near
-// past far still disables fog for exported frames, exactly as in clay mode.
-export const GRID_BACKGROUND = "#2c2e33";
+// Blender's solid-mode look: a dark grey void, not true black. Under the dark
+// UI theme the stage wears it — editor, shot preview and exports — so the set
+// reads as one grey workbench; the grid view only trades the deck for the
+// reference grid (and keeps the dark void under both themes: its line palette
+// is tuned for it). Fog matches the background so distance still dissolves
+// into the same neutral. The far plane stays below the capture rig's
+// CAPTURE_FOG_NEAR (55) so pushing near past far still disables fog for
+// exported frames.
+export const STAGE_BACKGROUND = "#232428";
+// The light UI theme's stage: a photo-studio cyclorama. A near-white sky the
+// deck fades into, so the floor has no horizon line and the figures stand in
+// a bright, soft room that sits in the light shell instead of punching a
+// dark hole in it.
+// Matched to the lit deck's far tone (room.jsx FLOOR_LIGHT after tone
+// mapping), so fog blends floor into sky without a step.
+export const STAGE_BACKGROUND_LIGHT = "#e7e8eb";
+export const stageBackground = (theme) => (theme === "light" ? STAGE_BACKGROUND_LIGHT : STAGE_BACKGROUND);
+export const GRID_BACKGROUND = STAGE_BACKGROUND;
 export const GRID_FOG = Object.freeze({ color: GRID_BACKGROUND, near: 30, far: 54 });
 
 // Line palette, tuned against the dark background the way Blender's theme

package/src/hierarchy-model.js

@@ -101,38 +101,45 @@ function characterRowId(entry, listIndex) {
 	return listIndex === 0 ? "characterA" : listIndex === 1 ? "characterB" : `character:${entry.id}`;
 }
 
-/** The visible cast as `characterId → row id`; hidden entries have no row, so
- * anything attached to them has nowhere to nest and falls back to Props. */
-function visibleCharacterRows(characters) {
+/** Every cast member as `characterId → row id`, including hidden ones.
+ *  A prop attached to a hidden character stays under that row. An unknown
+ *  characterId still has no row and falls back to Props. */
+function characterRows(characters) {
 	const rows = new Map();
 	if (!Array.isArray(characters)) return rows;
 	characters.forEach((entry, listIndex) => {
-		if (!entry || entry.hidden) return;
+		if (!entry || typeof entry.id !== "string") return;
 		rows.set(entry.id, characterRowId(entry, listIndex));
 	});
 	return rows;
 }
 
+function objectRow(object, label) {
+	return {
+		id: `object:${object.id}`,
+		label,
+		kind: "object",
+		hidden: object.hidden === true,
+	};
+}
+
 export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 	// An attached prop is carried BY a character, so it reads under that
 	// character rather than in the flat Props list it no longer follows.
-	const characterRows = visibleCharacterRows(characters);
+	const characterRowsById = characterRows(characters);
 	const attachedRows = new Map(); // character row id → attached object rows
 	const attachedIds = new Set();
 	for (const object of sceneObjects) {
 		const attach = object?.attach;
 		if (!attach || typeof attach !== "object") continue;
-		const rowId = characterRows.get(attach.characterId);
-		// A dangling / hidden characterId keeps the object in Props: a prop that
+		const rowId = characterRowsById.get(attach.characterId);
+		// A dangling characterId keeps the object in Props: a prop that
 		// vanishes from the tree is worse than one filed in the wrong place.
+		// A hidden character still has a row, so the prop stays under it.
 		if (!rowId) continue;
 		attachedIds.add(object.id);
 		const boneLabel = attachBoneLabel(attach.bone);
-		const row = {
-			id: `object:${object.id}`,
-			label: boneLabel ? `${object.name} · ${boneLabel}` : object.name,
-			kind: "object",
-		};
+		const row = objectRow(object, boneLabel ? `${object.name} · ${boneLabel}` : object.name);
 		if (attachedRows.has(rowId)) attachedRows.get(rowId).push(row);
 		else attachedRows.set(rowId, [row]);
 	}
@@ -149,7 +156,7 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 				listed
 					.filter((object) => (object.parent ?? null) === parentId)
 					.map((object) => {
-						const row = { id: `object:${object.id}`, label: object.name, kind: "object" };
+						const row = objectRow(object, object.name);
 						const nested = childrenOf(object.id);
 						if (nested.length) row.children = nested;
 						return row;
@@ -163,7 +170,7 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 				(object) => (object.parent ?? null) === null || !ids.has(object.parent),
 			);
 			next.children = rooted.map((object) => {
-				const row = { id: `object:${object.id}`, label: object.name, kind: "object" };
+				const row = objectRow(object, object.name);
 				const nested = childrenOf(object.id);
 				if (nested.length) row.children = nested;
 				return row;
@@ -174,7 +181,7 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 		return next;
 	};
 	const nodes = HIERARCHY_NODES.map(clone);
-	// The cast is list-driven: one row per visible character. The first two
+	// The cast is list-driven: one row per character, hidden ones included. The first two
 	// keep the legacy row ids (characterA/characterB) that selection, IK and
 	// the inspector already route to; extras carry their character id.
 	if (Array.isArray(characters)) {
@@ -183,7 +190,7 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 			// Row ids follow the entry's LIST index so they match the viewport
 			// pickId (A/B/charId) stamped by the Character renderer in App.jsx.
 			group.children = characters.flatMap((entry, listIndex) => {
-				if (entry.hidden) return [];
+				if (!entry) return [];
 				const id = characterRowId(entry, listIndex);
 				// Every cast member carries its own rig subtree (#78) — ids are
 				// namespaced per row (#76) and IK state is per character (#77), so
@@ -197,6 +204,7 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 					id,
 					label: `Character ${listIndex + 1}`,
 					kind: "character",
+					hidden: entry.hidden === true,
 					...(children.length ? { children } : {}),
 				}];
 			});