cozyclay 1.2.0 → 1.3.0

package/src/hierarchy-panel.jsx

@@ -11,18 +11,115 @@ const HIERARCHY_LABELS_KO = {
 	"Character 1": "캐릭터 1",
 	"Character 2": "캐릭터 2",
 	Rig: "리그",
+	Torso: "몸통",
 	"Root / Hips": "루트 / 골반",
 	Spine: "척추",
+	Chest: "가슴",
+	Neck: "목",
+	Head: "머리",
 	"Left Arm": "왼팔",
+	"Left Shoulder": "왼쪽 어깨",
+	"Left Elbow": "왼쪽 팔꿈치",
+	"Left Hand": "왼손",
 	"Right Arm": "오른팔",
+	"Right Shoulder": "오른쪽 어깨",
+	"Right Elbow": "오른쪽 팔꿈치",
+	"Right Hand": "오른손",
 	"Left Leg": "왼다리",
+	"Left Knee": "왼쪽 무릎",
+	"Left Foot": "왼발",
 	"Right Leg": "오른다리",
+	"Right Knee": "오른쪽 무릎",
+	"Right Foot": "오른발",
 	Environment: "환경",
 	Props: "소품",
 };
 
 const FALLBACK_SCENES = [{ id: "current-scene", name: "SCENE 01" }];
 
+function HierarchyIcon({ kind, className = "" }) {
+	const common = {
+		className: `hierarchy-icon ${kind}${className ? ` ${className}` : ""}`,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.7,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+	};
+
+	switch (kind) {
+		case "scene":
+			return (
+				<svg {...common}>
+					<path d="M12 3.25 21 8l-9 4.75L3 8l9-4.75Z" fill="currentColor" fillOpacity=".16" />
+					<path d="m4.25 12 7.75 4.1 7.75-4.1M4.25 16 12 20.1l7.75-4.1" />
+				</svg>
+			);
+		case "camera":
+			return (
+				<svg {...common}>
+					<rect x="3" y="6.5" width="13.5" height="11" rx="2" />
+					<path d="m16.5 10 4.5-2.25v8.5L16.5 14" />
+					<circle cx="9.5" cy="12" r="2.4" />
+				</svg>
+			);
+		case "group":
+			return (
+				<svg {...common}>
+					<circle cx="9" cy="8.25" r="2.75" />
+					<circle cx="16.5" cy="9.25" r="2.15" />
+					<path d="M3.75 18c.45-3.25 2.15-5 5.25-5s4.8 1.75 5.25 5M14 14.25c3.55-.55 5.65.75 6.25 3.75" />
+				</svg>
+			);
+		case "character":
+			return (
+				<svg {...common}>
+					<circle cx="12" cy="7.25" r="3" fill="currentColor" fillOpacity=".12" />
+					<path d="M5.25 20c.45-5 2.7-7.5 6.75-7.5S18.3 15 18.75 20M9.25 13.25 12 16l2.75-2.75" />
+				</svg>
+			);
+		case "rig":
+			return (
+				<svg {...common}>
+					<circle cx="12" cy="4.5" r="1.75" fill="currentColor" fillOpacity=".18" />
+					<circle cx="6" cy="11.5" r="1.75" />
+					<circle cx="18" cy="11.5" r="1.75" />
+					<circle cx="12" cy="19.5" r="1.75" />
+					<path d="m10.8 5.8-3.6 4.4m6-4.4 3.6 4.4M7.75 12.65l3 5.4m5.5-5.4-3 5.4" />
+				</svg>
+			);
+		case "bone":
+			return (
+				<svg {...common}>
+					<path d="M7.4 8.25a2.5 2.5 0 1 1-3.65-3.4A2.5 2.5 0 1 1 7.2 8.5l8.3 8.3a2.5 2.5 0 1 1 3.65 3.4 2.5 2.5 0 1 1-3.4-3.65L7.4 8.25Z" />
+				</svg>
+			);
+		case "environment":
+			return (
+				<svg {...common}>
+					<circle cx="12" cy="12" r="8.5" fill="currentColor" fillOpacity=".08" />
+					<path d="M3.8 13h16.4M12 3.5c2.25 2.35 3.4 5.2 3.4 8.5S14.25 18.15 12 20.5C9.75 18.15 8.6 15.3 8.6 12S9.75 5.85 12 3.5Z" />
+				</svg>
+			);
+		case "props":
+		case "object":
+			return (
+				<svg {...common}>
+					<path d="m12 3.5 8 4.25v8.5l-8 4.25-8-4.25v-8.5L12 3.5Z" fill="currentColor" fillOpacity=".1" />
+					<path d="m4.25 7.9 7.75 4.2 7.75-4.2M12 12.1v8.15" />
+				</svg>
+			);
+		default:
+			return (
+				<svg {...common}>
+					<circle cx="12" cy="12" r="7.5" />
+				</svg>
+			);
+	}
+}
+
 function displaySceneName(name) {
 	if (!isKo) return name;
 	const generatedName = /^SCENE\s+(\d+)$/i.exec(name);
@@ -108,7 +205,7 @@ function SceneSwitcher({
 									}}
 									onDoubleClick={() => setEditingId(scene.id)}
 								>
-									<span className="scene-document-icon" aria-hidden="true" />
+									<HierarchyIcon kind="scene" className="scene-document-icon" />
 									<span>{displaySceneName(scene.name)}</span>
 								</button>
 							)}
@@ -212,8 +309,33 @@ function TreeRow({
 	onRenameCommit,
 	onRenameCancel,
 	onRowContextMenu,
+	dropHandlers,
 }) {
 	const branch = !!node.children?.length;
+	// The drop BEHAVIOUR is shared by every row that accepts a picture; the
+	// highlight is not. One row lit under the cursor says where the file will
+	// land; a whole branch lighting up says nothing.
+	const [dropOver, setDropOver] = useState(false);
+	const dropDepth = useRef(0);
+	const drop = dropHandlers && {
+		onDragEnter: (event) => {
+			dropHandlers.onDragEnter(event);
+			if (!event.dataTransfer?.types?.includes?.("Files")) return;
+			dropDepth.current += 1;
+			setDropOver(true);
+		},
+		onDragOver: dropHandlers.onDragOver,
+		onDragLeave: (event) => {
+			dropHandlers.onDragLeave(event);
+			dropDepth.current = Math.max(0, dropDepth.current - 1);
+			if (!dropDepth.current) setDropOver(false);
+		},
+		onDrop: (event) => {
+			dropDepth.current = 0;
+			setDropOver(false);
+			dropHandlers.onDrop(event);
+		},
+	};
 	const label = displayHierarchyLabel(node);
 	const rowWrapRef = useRef(null);
 	const inputRef = useRef(null);
@@ -241,6 +363,8 @@ function TreeRow({
 			className={"hierarchy-row-wrap" + (selectedId === node.id ? " selected" : "")}
 			style={{ "--hierarchy-depth": depth }}
 			data-node-id={node.id}
+			data-drop={drop ? (dropOver ? "over" : "target") : undefined}
+			{...(drop ?? {})}
 			role="treeitem"
 			tabIndex={-1}
 			aria-selected={selectedId === node.id}
@@ -264,7 +388,7 @@ function TreeRow({
 				// 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" />
+					<HierarchyIcon kind={node.kind} />
 					<input
 						ref={inputRef}
 						className="hierarchy-rename-input"
@@ -287,7 +411,7 @@ function TreeRow({
 				</div>
 			) : (
 				<button type="button" className="hierarchy-row" onClick={() => onSelect(node.id)}>
-					<span className={`hierarchy-icon ${node.kind}`} aria-hidden="true" />
+					<HierarchyIcon kind={node.kind} />
 					<span className="hierarchy-label">{label}</span>
 					{status && <span className="hierarchy-status">{status}</span>}
 					{badge !== null && badge !== undefined && badge !== 0 && <span className="hierarchy-badge">{badge}</span>}
@@ -301,6 +425,7 @@ export default function HierarchyPanel({
 	selectedId,
 	onSelect,
 	showB,
+	characters = null,
 	motionFrames,
 	ikMode,
 	sceneObjects = [],
@@ -309,6 +434,7 @@ export default function HierarchyPanel({
 	onDuplicateObject,
 	onDeleteObject,
 	onFrameObject,
+	propsDrop = null,
 	scenes,
 	activeSceneId,
 	onSceneSelect,
@@ -331,9 +457,9 @@ export default function HierarchyPanel({
 		return (availableScenes.find((scene) => scene.id === activeSceneId) ?? availableScenes[0]).name;
 	}, [activeSceneId, scenes]);
 	const hierarchyNodes = useMemo(() => {
-		const nodes = buildHierarchyNodes(sceneObjects);
+		const nodes = buildHierarchyNodes(sceneObjects, characters);
 		return nodes.map((node) => node.kind === "scene" ? { ...node, label: activeSceneName } : node);
-	}, [activeSceneName, sceneObjects]);
+	}, [activeSceneName, sceneObjects, characters]);
 	const parents = useMemo(() => indexParents(hierarchyNodes), [hierarchyNodes]);
 
 	useEffect(() => {
@@ -384,7 +510,9 @@ export default function HierarchyPanel({
 		});
 	};
 	const badgeFor = (id) => {
-		if (id === "characters") return showB ? 2 : 1;
+		if (id === "characters") {
+			return Array.isArray(characters) ? characters.filter((entry) => !entry.hidden).length : (showB ? 2 : 1);
+		}
 		if (id === "props") return sceneObjects.length;
 		return null;
 	};
@@ -466,6 +594,11 @@ export default function HierarchyPanel({
 					onRenameCommit={(name) => commitRename(node.id, name)}
 					onRenameCancel={cancelRename}
 					onRowContextMenu={openRowMenu}
+					// A picture dropped on Props — or on any prop already in it —
+					// becomes a cutout in the set. Dropping ON an object is the
+					// same gesture as dropping on the group it lives in: people
+					// aim at the list, not at the heading.
+					dropHandlers={propsDrop && (node.kind === "props" || node.kind === "object") ? propsDrop.handlers : null}
 				/>,
 				...(node.children && open ? renderNodes(node.children, depth + 1) : []),
 			];

package/src/live-control.js

@@ -0,0 +1,122 @@
+// Browser-side client for the editor half of mcp/LIVE-PROTOCOL.md. This
+// module deliberately has no browser imports so its frame dispatcher is
+// directly testable in Node with a fake WebSocket.
+
+export const LIVE_CONTROL_URL = "ws://127.0.0.1:5184/live";
+export const LIVE_CONTROL_RECONNECT_MS = 3000;
+
+function errorMessage(error) {
+	if (error instanceof Error && error.message) return error.message;
+	return typeof error === "string" && error ? error : "Command failed";
+}
+
+function result(id, ok, body) {
+	return ok
+		? { type: "result", id, ok: true, value: body ?? {} }
+		: { type: "result", id, ok: false, error: body };
+}
+
+/**
+ * Parse and dispatch one incoming text frame. Non-command frames are ignored;
+ * a command with a valid id always receives a protocol result, including for
+ * malformed arguments and unknown command names.
+ */
+export async function dispatchLiveFrame(data, handlers = {}) {
+	if (typeof data !== "string") return null;
+	let frame;
+	try {
+		frame = JSON.parse(data);
+	} catch {
+		return null;
+	}
+	if (!frame || typeof frame !== "object" || Array.isArray(frame) || frame.type !== "cmd") return null;
+	if (typeof frame.id !== "string") return null;
+	if (typeof frame.name !== "string" || !frame.name) return result(frame.id, false, "Invalid command name");
+	if (!frame.args || typeof frame.args !== "object" || Array.isArray(frame.args)) return result(frame.id, false, "Invalid command arguments");
+	const handler = handlers[frame.name];
+	if (typeof handler !== "function") return result(frame.id, false, `Unknown command: ${frame.name}`);
+	try {
+		return result(frame.id, true, await handler(frame.args));
+	} catch (error) {
+		return result(frame.id, false, errorMessage(error));
+	}
+}
+
+/**
+ * Open the editor's one-way client connection. Failures are intentionally
+ * silent: a studio remains a fully local editor when the MCP server is absent.
+ */
+export function createLiveControl({
+	handlers = {},
+	WebSocketImpl = globalThis.WebSocket,
+	url = LIVE_CONTROL_URL,
+	reconnectMs = LIVE_CONTROL_RECONNECT_MS,
+} = {}) {
+	let currentHandlers = handlers;
+	let socket = null;
+	let retry = null;
+	let stopped = false;
+
+	const clearRetry = () => {
+		if (retry !== null) clearTimeout(retry);
+		retry = null;
+	};
+	const scheduleReconnect = () => {
+		if (stopped || retry !== null) return;
+		retry = setTimeout(() => {
+			retry = null;
+			connect();
+		}, reconnectMs);
+	};
+	const send = (frame) => {
+		if (!socket || socket.readyState !== (socket.OPEN ?? 1)) return;
+		try {
+			socket.send(JSON.stringify(frame));
+		} catch {
+			// A close between readyState and send is indistinguishable from an
+			// absent server to the editor, so leave it silent and retry on close.
+		}
+	};
+	const connect = () => {
+		if (stopped || !WebSocketImpl) return;
+		try {
+			socket = new WebSocketImpl(url);
+		} catch {
+			scheduleReconnect();
+			return;
+		}
+		const connected = socket;
+		connected.onopen = () => {
+			if (socket !== connected || stopped) return;
+			send({ type: "hello", role: "editor", version: 1 });
+		};
+		connected.onmessage = async (event) => {
+			const response = await dispatchLiveFrame(event?.data, currentHandlers);
+			if (response) send(response);
+		};
+		// Suppress browser error reporting for an optional local endpoint.
+		connected.onerror = () => {};
+		connected.onclose = () => {
+			if (socket === connected) socket = null;
+			scheduleReconnect();
+		};
+	};
+
+	connect();
+	return {
+		setHandlers(nextHandlers) {
+			currentHandlers = nextHandlers && typeof nextHandlers === "object" ? nextHandlers : {};
+		},
+		close() {
+			stopped = true;
+			clearRetry();
+			const current = socket;
+			socket = null;
+			try {
+				current?.close();
+			} catch {
+				// Optional transport cleanup must not affect the editor.
+			}
+		},
+	};
+}