cozyclay 1.0.0

package/src/hierarchy-panel.jsx

@@ -0,0 +1,365 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildHierarchyNodes } from "./hierarchy-model.js";
+import { sceneObjectIdFromHierarchy } from "./scene-objects.js";
+import AddObjectMenu, { CatalogueEntries } from "./object-catalog.jsx";
+
+function indexParents(nodes, parent = null, parents = new Map()) {
+	for (const node of nodes) {
+		if (parent) parents.set(node.id, parent);
+		if (node.children) indexParents(node.children, node.id, parents);
+	}
+	return parents;
+}
+
+/** Fixed-position menu at the pointer: the object-row actions
+ * (Rename / Duplicate / Delete / Frame) or the create catalogue, matching
+ * Unity's Hierarchy right-click menu (docs/unity-reference.md §9.7).
+ * Closes on Escape, on any outside mousedown, and after a pick. */
+function RowContextMenu({ menu, onClose, onAction, onAddObject }) {
+	const rootRef = useRef(null);
+
+	useEffect(() => {
+		if (!menu) return undefined;
+		const onDocDown = (event) => {
+			if (rootRef.current && !rootRef.current.contains(event.target)) onClose();
+		};
+		const onKey = (event) => {
+			if (event.key !== "Escape") return;
+			// Capture phase + stopImmediatePropagation: closing the menu must
+			// not also run the app's window-level Escape (clear selection).
+			event.stopImmediatePropagation();
+			onClose();
+		};
+		document.addEventListener("mousedown", onDocDown);
+		window.addEventListener("keydown", onKey, true);
+		return () => {
+			document.removeEventListener("mousedown", onDocDown);
+			window.removeEventListener("keydown", onKey, true);
+		};
+	}, [menu, onClose]);
+
+	if (!menu) return null;
+	// Keep the menu inside the window; `height` is an upper bound per kind,
+	// so a short menu never sits below the pointer that opened it.
+	const style = {
+		left: Math.max(4, Math.min(menu.x, window.innerWidth - 244)),
+		top: Math.max(4, Math.min(menu.y, window.innerHeight - menu.height)),
+	};
+	return (
+		<div className="hierarchy-context-menu" role="menu" style={style} ref={rootRef}>
+			{menu.kind === "object" ? (
+				<>
+					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("rename", menu.id)}>
+						Rename
+					</button>
+					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("duplicate", menu.id)}>
+						Duplicate
+					</button>
+					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("delete", menu.id)}>
+						Delete
+					</button>
+					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("frame", menu.id)}>
+						Frame
+					</button>
+				</>
+			) : (
+				<CatalogueEntries onPick={onAddObject} />
+			)}
+		</div>
+	);
+}
+
+function TreeRow({
+	node,
+	depth,
+	selectedId,
+	expanded,
+	onSelect,
+	onToggle,
+	badge,
+	status,
+	editing,
+	onRenameCommit,
+	onRenameCancel,
+	onRowContextMenu,
+}) {
+	const branch = !!node.children?.length;
+	const rowWrapRef = useRef(null);
+	const inputRef = useRef(null);
+	// A commit/cancel may race the blur that follows the input unmounting;
+	// the flag ends the edit session exactly once.
+	const doneRef = useRef(false);
+
+	const finish = () => {
+		if (doneRef.current) return;
+		doneRef.current = true;
+		const name = (inputRef.current?.value ?? "").trim();
+		if (name) onRenameCommit(name);
+		else onRenameCancel(); // an empty name is a cancel, like Unity
+		rowWrapRef.current?.focus();
+	};
+	const cancel = () => {
+		if (doneRef.current) return;
+		doneRef.current = true;
+		onRenameCancel();
+	};
+
+	return (
+		<div
+			ref={rowWrapRef}
+			className={"hierarchy-row-wrap" + (selectedId === node.id ? " selected" : "")}
+			style={{ "--hierarchy-depth": depth }}
+			data-node-id={node.id}
+			role="treeitem"
+			tabIndex={-1}
+			aria-selected={selectedId === node.id}
+			aria-expanded={branch ? expanded : undefined}
+			onContextMenu={(event) => onRowContextMenu(event, node.id)}
+		>
+			{branch ? (
+				<button
+					type="button"
+					className="hierarchy-toggle"
+					aria-label={`${expanded ? "Collapse" : "Expand"} ${node.label}`}
+					onClick={() => onToggle(node.id)}
+				>
+					{expanded ? "▾" : "▸"}
+				</button>
+			) : (
+				<span className="hierarchy-toggle placeholder" />
+			)}
+			{editing ? (
+				// In-place rename, Unity-style: Enter commits, Escape reverts,
+				// blur commits (docs/unity-reference.md §9.7). A div, not the
+				// row button — an input inside a button is invalid HTML.
+				<div className="hierarchy-row">
+					<span className={`hierarchy-icon ${node.kind}`} aria-hidden="true" />
+					<input
+						ref={inputRef}
+						className="hierarchy-rename-input"
+						defaultValue={node.label}
+						aria-label={`Rename ${node.label}`}
+						autoFocus
+						onFocus={(event) => event.currentTarget.select()}
+						onKeyDown={(event) => {
+							if (event.key === "Enter") {
+								event.preventDefault();
+								event.stopPropagation(); // keep the tree hotkey quiet
+								finish();
+							} else if (event.key === "Escape") {
+								event.stopPropagation(); // revert only, not clear-selection
+								cancel();
+							}
+						}}
+						onBlur={finish}
+					/>
+				</div>
+			) : (
+				<button type="button" className="hierarchy-row" onClick={() => onSelect(node.id)}>
+					<span className={`hierarchy-icon ${node.kind}`} aria-hidden="true" />
+					<span className="hierarchy-label">{node.label}</span>
+					{status && <span className="hierarchy-status">{status}</span>}
+					{badge !== null && badge !== undefined && badge !== 0 && <span className="hierarchy-badge">{badge}</span>}
+				</button>
+			)}
+		</div>
+	);
+}
+
+export default function HierarchyPanel({
+	selectedId,
+	onSelect,
+	showB,
+	motionFrames,
+	promptCount,
+	ikFrames,
+	ikMode,
+	waypointCount,
+	sceneObjects = [],
+	onAddObject,
+	onRenameObject,
+	onDuplicateObject,
+	onDeleteObject,
+	onFrameObject,
+}) {
+	const [expanded, setExpanded] = useState(() => new Set(["shot", "characters", "characterA", "characterA.motion"]));
+	const [contextMenu, setContextMenu] = useState(null);
+	// Row currently in in-place rename. The panel owns it: F2/Return and the
+	// row context menu are the only ways in, so app state stays out of it.
+	const [editingId, setEditingId] = useState(null);
+	const treeRef = useRef(null);
+	const lastTreeSelectRef = useRef(null);
+	const firstRenderRef = useRef(true);
+	const pendingScrollRef = useRef(false);
+	const hierarchyNodes = useMemo(() => buildHierarchyNodes(sceneObjects), [sceneObjects]);
+	const parents = useMemo(() => indexParents(hierarchyNodes), [hierarchyNodes]);
+
+	useEffect(() => {
+		setExpanded((current) => {
+			const next = new Set(current);
+			let id = selectedId;
+			while (parents.has(id)) {
+				id = parents.get(id);
+				next.add(id);
+			}
+			if (ikMode) {
+				next.add("characterA");
+				next.add("characterA.rig");
+			}
+			return next;
+		});
+	}, [ikMode, parents, selectedId]);
+
+	// Selection made outside the tree (viewport click, plan board, inspector)
+	// scrolls the row into view (docs/unity-reference.md §9.6). Tree-originated
+	// selections skip this — the browser already scrolls the clicked row. The
+	// tab may be hidden at selection time (selecting switches to the inspector),
+	// so a hidden-tree selection is remembered and scrolled once the tree shows.
+	useEffect(() => {
+		if (firstRenderRef.current) {
+			firstRenderRef.current = false;
+			return;
+		}
+		if (lastTreeSelectRef.current !== selectedId) pendingScrollRef.current = true;
+	}, [selectedId]);
+
+	useEffect(() => {
+		const tree = treeRef.current;
+		if (!tree || tree.offsetParent === null) return;
+		if (!pendingScrollRef.current) return;
+		pendingScrollRef.current = false;
+		if (!selectedId) return;
+		const row = tree.querySelector(`[data-node-id="${CSS.escape(selectedId)}"]`);
+		row?.scrollIntoView({ block: "nearest" });
+	});
+
+	const toggle = (id) => {
+		setExpanded((current) => {
+			const next = new Set(current);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+	const badgeFor = (id) => {
+		if (id === "characters") return showB ? 2 : 1;
+		if (id === "characterA.motion" || id === "characterA.baseMotion") return motionFrames ? `${motionFrames}f` : "empty";
+		if (id === "characterA.promptBlocks") return promptCount;
+		if (id === "characterA.ik") return ikFrames;
+		if (id === "rootPath") return waypointCount;
+		if (id === "props") return sceneObjects.length;
+		return null;
+	};
+	const statusFor = (id) => {
+		if (id === "characterA" && ikMode) return "IK ON";
+		return null;
+	};
+
+	const handleSelect = (id) => {
+		lastTreeSelectRef.current = id;
+		onSelect(id);
+	};
+
+	const openRowMenu = (event, id) => {
+		event.preventDefault();
+		event.stopPropagation(); // a row pick must not also open the create menu
+		if (sceneObjectIdFromHierarchy(id) !== null) {
+			setContextMenu({ x: event.clientX, y: event.clientY, height: 148, kind: "object", id });
+		} else {
+			setContextMenu({ x: event.clientX, y: event.clientY, height: 344, kind: "create" });
+		}
+	};
+
+	const openCreateMenu = (event) => {
+		event.preventDefault(); // suppress the browser menu on the tree only
+		setContextMenu({ x: event.clientX, y: event.clientY, height: 344, kind: "create" });
+	};
+
+	const handleMenuAction = (action, hierarchyId) => {
+		setContextMenu(null);
+		if (action === "rename") {
+			setEditingId(hierarchyId);
+			return;
+		}
+		const objectId = sceneObjectIdFromHierarchy(hierarchyId);
+		if (!objectId) return;
+		if (action === "duplicate") onDuplicateObject?.(objectId);
+		else if (action === "delete") onDeleteObject?.(objectId);
+		else if (action === "frame") onFrameObject?.(objectId);
+	};
+
+	const commitRename = (hierarchyId, name) => {
+		setEditingId(null);
+		const objectId = sceneObjectIdFromHierarchy(hierarchyId);
+		if (objectId) onRenameObject?.(objectId, name);
+	};
+
+	const cancelRename = () => {
+		setEditingId(null);
+	};
+
+	// F2 / Return rename the selected row in place while focus is in the
+	// tree (docs/unity-reference.md §9.2). The rename input stops its own
+	// Enter/Escape, so an active edit never re-triggers this.
+	const onTreeKeyDown = (event) => {
+		if (editingId) return;
+		if (event.key !== "F2" && event.key !== "Enter") return;
+		if (sceneObjectIdFromHierarchy(selectedId) === null) return;
+		event.preventDefault();
+		setEditingId(selectedId);
+	};
+
+	const renderNodes = (nodes, depth = 0) =>
+		nodes.flatMap((node) => {
+			if (node.optional === "showB" && !showB) return [];
+			const open = expanded.has(node.id);
+			return [
+				<TreeRow
+					key={node.id}
+					node={node}
+					depth={depth}
+					selectedId={selectedId}
+					expanded={open}
+					onSelect={handleSelect}
+					onToggle={toggle}
+					badge={badgeFor(node.id)}
+					status={statusFor(node.id)}
+					editing={editingId === node.id}
+					onRenameCommit={(name) => commitRename(node.id, name)}
+					onRenameCancel={cancelRename}
+					onRowContextMenu={openRowMenu}
+				/>,
+				...(node.children && open ? renderNodes(node.children, depth + 1) : []),
+			];
+		});
+
+	return (
+		<section className="hierarchy-pane" aria-label="Shot hierarchy">
+			<div className="hierarchy-heading">
+				<div>
+					<span className="hierarchy-kicker">Hierarchy</span>
+					<strong>Shot structure</strong>
+				</div>
+				<span className="hierarchy-frame-status">{motionFrames ? `${motionFrames} frames` : "Blocking"}</span>
+			</div>
+			{onAddObject && (
+				<div className="hierarchy-toolbar">
+					<AddObjectMenu onAdd={onAddObject} />
+					<span className="hierarchy-frame-status">{motionFrames ? `${motionFrames} frames` : "Blocking"}</span>
+				</div>
+			)}
+			<div className="hierarchy-tree" role="tree" ref={treeRef} onKeyDown={onTreeKeyDown} onContextMenu={openCreateMenu}>
+				{renderNodes(hierarchyNodes)}
+			</div>
+			<RowContextMenu
+				menu={contextMenu}
+				onClose={() => setContextMenu(null)}
+				onAction={handleMenuAction}
+				onAddObject={(kind) => {
+					setContextMenu(null);
+					onAddObject?.(kind);
+				}}
+			/>
+		</section>
+	);
+}

package/src/history.js

@@ -0,0 +1,90 @@
+// Pure undo/redo stack and transaction coordinator. No scene knowledge and
+// no React — node-importable so the transition invariants are unit-testable.
+
+export const HISTORY_LIMIT = 50;
+
+export function createHistory(present) {
+	return { past: [], present, future: [] };
+}
+
+// `pushHistory` takes the NEW present. The reference-equality short-circuit
+// is the coalescing primitive: `updateSceneObject` already returns the same
+// array when nothing changed, so a no-op drag or a patch aimed at a deleted
+// id can never create an entry.
+export function pushHistory(history, next) {
+	if (next === history.present) return history;
+	const past = [...history.past, history.present];
+	if (past.length > HISTORY_LIMIT) past.shift();
+	return { past, present: next, future: [] };
+}
+
+export function undoHistory(history) {
+	if (history.past.length === 0) return null;
+	const present = history.past[history.past.length - 1];
+	return {
+		past: history.past.slice(0, -1),
+		present,
+		future: [history.present, ...history.future],
+	};
+}
+
+export function redoHistory(history) {
+	if (history.future.length === 0) return null;
+	const [present, ...future] = history.future;
+	return {
+		past: [...history.past, history.present],
+		present,
+		future,
+	};
+}
+
+export function canUndo(history) {
+	return history.past.length > 0;
+}
+
+export function canRedo(history) {
+	return history.future.length > 0;
+}
+
+// ---------------------------------------------------------------- tx ----
+//
+// `cancel` is teardown-only by contract: it must not call back into the
+// coordinator (`endTransaction`/`settleTransaction`). The coordinator owns
+// the close — it retires the token BEFORE running `cancel`, so a close
+// attempted from inside `cancel` is inert (unit-asserted).
+
+export function createTransactions() {
+	return { current: null, nextToken: 1 };
+}
+
+// Settles any already-open transaction first: the previous owner's cancel
+// runs and the close is owned by the coordinator, not by the new begin.
+export function beginTransaction(tx, { owner, cancel }) {
+	if (tx.current !== null) settleTransaction(tx);
+	const token = tx.nextToken;
+	tx.nextToken += 1;
+	tx.current = { token, owner, cancel };
+	return token;
+}
+
+export function isCurrentTransaction(tx, token) {
+	return tx.current !== null && tx.current.token === token;
+}
+
+// False for a stale token — a resumed pointer stream after a settle is
+// inert by construction rather than by hope.
+export function endTransaction(tx, token) {
+	if (!isCurrentTransaction(tx, token)) return false;
+	tx.current = null;
+	return true;
+}
+
+// Retires the token before running cancel, so a close attempted from
+// inside cancel is inert; returns what the settle closed.
+export function settleTransaction(tx) {
+	if (tx.current === null) return null;
+	const current = tx.current;
+	tx.current = null;
+	if (typeof current.cancel === "function") current.cancel();
+	return { token: current.token, owner: current.owner };
+}

package/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import "./styles.css";
+
+createRoot(document.getElementById("root")).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);

package/src/object-catalog.jsx

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState } from "react";
+import { OBJECT_LIBRARY } from "./scene-objects.js";
+
+/**
+ * "Add object" — the hierarchy's create menu, Unity's GameObject > 3D Object
+ * in one popover. Grouped by catalogue section; picking an entry drops the
+ * object in front of the camera and hands selection to the caller.
+ */
+
+/** The catalogue grouped by section. Shared with the hierarchy's right-click
+ * create menu so both entry points list the same objects
+ * (docs/unity-reference.md §9.7). */
+export function buildObjectMenuGroups() {
+	const groups = [];
+	for (const entry of OBJECT_LIBRARY) {
+		const group = groups.find((item) => item.name === entry.group);
+		if (group) group.entries.push(entry);
+		else groups.push({ name: entry.group, entries: [entry] });
+	}
+	return groups;
+}
+
+/** One rendered entry list; the toolbar popover and the right-click create
+ * menu both use it so the two can never drift apart. */
+export function CatalogueEntries({ onPick }) {
+	return buildObjectMenuGroups().map((group) => (
+		<div className="add-object-group" key={group.name}>
+			<span className="add-object-heading">{group.name}</span>
+			{group.entries.map((entry) => (
+				<button
+					type="button"
+					role="menuitem"
+					key={entry.kind}
+					className="add-object-item"
+					onClick={() => onPick(entry.kind)}
+				>
+					<span className={`add-object-swatch ${entry.kind}`} style={{ background: entry.color }} aria-hidden="true" />
+					<span>{entry.label}</span>
+					<small>{entry.footprint.width} × {entry.footprint.depth} m</small>
+				</button>
+			))}
+		</div>
+	));
+}
+
+export default function AddObjectMenu({ onAdd, label = "Add object" }) {
+	const [open, setOpen] = useState(false);
+	const rootRef = useRef(null);
+
+	useEffect(() => {
+		if (!open) return undefined;
+		const onDocDown = (event) => {
+			if (rootRef.current && !rootRef.current.contains(event.target)) setOpen(false);
+		};
+		const onKey = (event) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("mousedown", onDocDown);
+		window.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("mousedown", onDocDown);
+			window.removeEventListener("keydown", onKey);
+		};
+	}, [open]);
+
+	return (
+		<div className={"add-object" + (open ? " open" : "")} ref={rootRef}>
+			<button
+				type="button"
+				className="add-object-trigger"
+				aria-expanded={open}
+				aria-haspopup="menu"
+				onClick={() => setOpen((value) => !value)}
+			>
+				<span aria-hidden="true">＋</span>
+				{label}
+			</button>
+			{open && (
+				<div className="add-object-menu" role="menu">
+					<CatalogueEntries
+						onPick={(kind) => {
+							onAdd(kind);
+							setOpen(false);
+						}}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}