cozyclay 2.0.0 → 2.1.0

package/src/first-success-guide.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { ko } from "./locale.js";
 
-const STEPS = [
+const ANIMATION_STEPS = [
 	{
 		en: "Select a character in the Outliner.",
 		ko: "아웃라이너에서 캐릭터를 선택하세요.",
@@ -28,8 +28,39 @@ const STEPS = [
 	},
 ];
 
+const STORYBOARD_STEPS = [
+	{
+		en: "Open the Agent panel (Cmd/Ctrl+B).",
+		ko: "에이전트 패널을 여세요 (Cmd/Ctrl+B).",
+		hintEn: "The Agent panel is where you describe each panel.",
+		hintKo: "에이전트 패널에서 각 패널을 설명합니다.",
+	},
+	{
+		en: "Describe one scene in a sentence.",
+		ko: "장면 하나를 한 문장으로 설명하세요.",
+		hintEn: "One sentence per turn is enough for one panel.",
+		hintKo: "패널 하나에는 한 문장이면 충분합니다.",
+	},
+	{
+		en: "Your panel appears on the Board.",
+		ko: "패널이 보드에 나타납니다.",
+		hintEn: "Open the Board tab to see the new panel card.",
+		hintKo: "보드 탭에서 새 패널 카드를 확인하세요.",
+	},
+	{
+		en: "Stylize it, or export the panel pack.",
+		ko: "스타일을 입히거나 패널 팩으로 내보내세요.",
+		hintEn: "Use Stylize on the card, or export the panel pack.",
+		hintKo: "카드에서 스타일을 입히거나 패널 팩으로 내보내세요.",
+	},
+];
+
+const STEPS_BY_MODE = { animation: ANIMATION_STEPS, storyboard: STORYBOARD_STEPS };
+
 /** A compact, dismissible first-run checklist that follows the v2 shell grammar. */
-export default function FirstSuccessGuide({ open, onDismiss }) {
+export default function FirstSuccessGuide({ open, onDismiss, previsMode = "animation" }) {
+	const storyboard = previsMode === "storyboard";
+	const STEPS = STEPS_BY_MODE[storyboard ? "storyboard" : "animation"];
 	const [step, setStep] = useState(0);
 	useEffect(() => {
 		if (open) setStep(0);
@@ -49,8 +80,8 @@ export default function FirstSuccessGuide({ open, onDismiss }) {
 			{complete ? (
 				<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>
+					<strong>{storyboard ? ko("You made your first panel.", "첫 패널을 만들었어요.") : ko("You made your first shot.", "첫 샷을 만들었어요.")}</strong>
+					<p>{storyboard ? ko("Describe, review on the Board, then stylize or export. You can close this guide and keep adding panels.", "설명하고, 보드에서 확인한 뒤 스타일을 입히거나 내보내세요. 가이드를 닫고 패널을 계속 추가하세요.") : 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="v2-first-success-guide-next first-success-guide-next btn primary" onClick={onDismiss}>{ko("Continue editing", "편집 계속하기")}</button>
 				</div>
 			) : (

package/src/gizmo-claim.js

@@ -27,7 +27,9 @@ const CLAIM_KEYS = [
 	HANDLE_PROXY_FLAG,
 	"keyLightPick", // the key-light sun's grab surfaces (app-stage KeyLightPuck)
 	"pathAxis", // travel path: axis-gizmo pick proxies (app-stage ObjectPathHandles)
-	"pathIndex", // travel path: waypoint dots — index 0 is a valid value
+	"pathIndex", // travel path: mark dots — index 0 is a valid value
+	"pathRing", // travel path: the selected dot's bank / pitch rings
+	"pathLine", // travel path: the drawn route itself — a press near it is aimed at the route
 	"craneAxis", // crane marks: axis-gizmo pick proxies (app-stage CraneHandles)
 	"craneIndex", // crane marks: height dots
 ];

package/src/grid-floor.jsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import * as THREE from "three";
 import { STAGE_SIZE } from "./room.jsx";
-import { GRID_BACKGROUND, GRID_COLORS } from "./grid-view.js";
+import { GRID_COLORS } from "./grid-view.js";
 
 /**
  * The Blender-style reference grid: one shader plane instead of a floor.
@@ -92,6 +92,3 @@ export function GridFloor({ layer = null }) {
 		</mesh>
 	);
 }
-
-/** the void color the mode pairs with; re-exported for the App's background swap */
-export { GRID_BACKGROUND };

package/src/hierarchy-model.js

@@ -120,6 +120,8 @@ function objectRow(object, label) {
 		label,
 		kind: "object",
 		hidden: object.hidden === true,
+		// The record's kind, so a row can say it is a node with nothing to draw.
+		...(object.renderer === "empty" ? { renderer: "empty" } : {}),
 	};
 }
 
@@ -147,6 +149,47 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 	// stale record cannot hide a group's children behind an attached row.
 	const listed = sceneObjects.filter((object) => !attachedIds.has(object.id));
 
+	// One row per cast member, built once: a character grouped under a listed
+	// object reads under that object's row (it rides the object), every other
+	// one stays in the cast. A parent that is missing or carried leaves the
+	// character in the cast, as an orphaned prop stays at the top of Props.
+	const listedIds = new Set(listed.map((object) => object.id));
+	const castRows = [];
+	const groupedCharacters = new Map(); // object id → character rows
+	if (Array.isArray(characters)) {
+		characters.forEach((entry, listIndex) => {
+			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
+			// the tree no longer needs the primary-only gate. Carried props
+			// follow the rig so the body reads first and the luggage after it.
+			const children = [
+				...(entry.model === "proxy-figure" ? [] : [rigSubtree(id)]),
+				...(attachedRows.get(id) ?? []),
+			];
+			const parent = typeof entry.parent === "string" && listedIds.has(entry.parent) ? entry.parent : null;
+			const row = {
+				id,
+				label: `Character ${listIndex + 1}`,
+				kind: "character",
+				hidden: entry.hidden === true,
+				...(parent ? { grouped: true } : {}),
+				...(children.length ? { children } : {}),
+			};
+			if (!parent) castRows.push(row);
+			else if (groupedCharacters.has(parent)) groupedCharacters.get(parent).push(row);
+			else groupedCharacters.set(parent, [row]);
+		});
+	}
+	// An object row's children: the parts grouped under it, then the cast
+	// members riding it.
+	const withRiders = (row, objectId, nested) => {
+		const children = [...nested, ...(groupedCharacters.get(objectId) ?? [])];
+		if (children.length) row.children = children;
+		return row;
+	};
+
 	const clone = (node) => {
 		const next = { ...node };
 		if (node.id === "props") {
@@ -155,12 +198,7 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 			const childrenOf = (parentId) =>
 				listed
 					.filter((object) => (object.parent ?? null) === parentId)
-					.map((object) => {
-						const row = objectRow(object, object.name);
-						const nested = childrenOf(object.id);
-						if (nested.length) row.children = nested;
-						return row;
-					});
+					.map((object) => withRiders(objectRow(object, object.name), object.id, childrenOf(object.id)));
 			// An object whose parent is missing still has to appear somewhere, so
 			// anything unreachable from the top level is shown at the top level.
 			// An attached object is not a grouping parent, so its children are
@@ -169,12 +207,7 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 			const rooted = listed.filter(
 				(object) => (object.parent ?? null) === null || !ids.has(object.parent),
 			);
-			next.children = rooted.map((object) => {
-				const row = objectRow(object, object.name);
-				const nested = childrenOf(object.id);
-				if (nested.length) row.children = nested;
-				return row;
-			});
+			next.children = rooted.map((object) => withRiders(objectRow(object, object.name), object.id, childrenOf(object.id)));
 		} else if (node.children) {
 			next.children = node.children.map(clone);
 		}
@@ -186,29 +219,9 @@ export function buildHierarchyNodes(sceneObjects = [], characters = null) {
 	// the inspector already route to; extras carry their character id.
 	if (Array.isArray(characters)) {
 		const group = nodes[0]?.children?.find((node) => node.id === "characters");
-		if (group) {
-			// 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) 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
-				// the tree no longer needs the primary-only gate. Carried props
-				// follow the rig so the body reads first and the luggage after it.
-				const children = [
-					rigSubtree(id),
-					...(attachedRows.get(id) ?? []),
-				];
-				return [{
-					id,
-					label: `Character ${listIndex + 1}`,
-					kind: "character",
-					hidden: entry.hidden === true,
-					...(children.length ? { children } : {}),
-				}];
-			});
-		}
+		// 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.
+		if (group) group.children = castRows;
 	}
 	return nodes;
 }

package/src/hierarchy-panel.css

@@ -194,6 +194,7 @@
 .v2-outliner .v2-outliner-chip.cast { background: var(--chip-cast, #5fb584); }
 .v2-outliner .v2-outliner-chip.cam { background: var(--camera, #a78bfa); }
 .v2-outliner .v2-outliner-chip.light { background: var(--chip-light, #d9b84a); }
+.v2-outliner .v2-outliner-chip.empty { background: transparent; border: 1px dashed var(--chip-mesh, #7e8b99); }
 
 .v2-outliner .hierarchy-label {
 	flex: 1 1 auto;

package/src/hierarchy-panel.jsx

@@ -4,6 +4,7 @@ import { buildHierarchyNodes } from "./hierarchy-model.js";
 import { sceneObjectIdFromHierarchy } from "./scene-objects.js";
 import { CatalogueEntries, displayObjectLabel } from "./object-catalog.jsx";
 import { Dropdown } from "./ui.jsx";
+import { isImeComposing } from "./ime.js";
 import "./hierarchy-panel.css";
 
 const HIERARCHY_LABELS_KO = {
@@ -58,96 +59,6 @@ export const HIERARCHY_DRAG_MIME = "application/x-cclay-hierarchy";
 
 const carriesHierarchyRow = (event) => !!event.dataTransfer?.types?.includes?.(HIERARCHY_DRAG_MIME);
 
-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 "light":
-			return (
-				<svg {...common}>
-					<circle cx="12" cy="12" r="4" fill="currentColor" fillOpacity=".16" />
-					<path d="M12 3v2.2M12 18.8V21M3 12h2.2M18.8 12H21M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6" />
-				</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);
@@ -202,6 +113,7 @@ function displayHierarchyLabel(node) {
 }
 
 const OUTLINER_TYPES = {
+	empty: "Empty",
 	folder: "Folder",
 	mesh: "Mesh",
 	cast: "Cast",
@@ -211,7 +123,7 @@ const OUTLINER_TYPES = {
 
 function outlinerTypeFor(node) {
 	const key = node.kind === "object"
-		? "mesh"
+		? node.renderer === "empty" ? "empty" : "mesh"
 		: node.kind === "character" || node.kind === "bone"
 			? "cast"
 			: node.kind === "camera"
@@ -219,7 +131,9 @@ function outlinerTypeFor(node) {
 				: node.kind === "light"
 					? "light"
 					: "folder";
-	const label = key === "folder"
+	const label = key === "empty"
+		? ko(OUTLINER_TYPES[key], "빈 오브젝트")
+		: key === "folder"
 		? ko(OUTLINER_TYPES[key], "폴더")
 		: key === "mesh"
 			? ko(OUTLINER_TYPES[key], "메시")
@@ -339,9 +253,16 @@ function RowContextMenu({ menu, onClose, onAction, onAddObject }) {
 					</button>
 				</>
 			) : menu.kind === "character" ? (
-				<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("visibility", menu.id)}>
-					{menu.hidden ? ko("Show", "표시") : ko("Hide", "숨기기")}
-				</button>
+				<>
+					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("visibility", menu.id)}>
+						{menu.hidden ? ko("Show", "표시") : ko("Hide", "숨기기")}
+					</button>
+					{menu.grouped && (
+						<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("ungroup-character", menu.id)}>
+							{ko("Remove from group", "그룹에서 빼기")}
+						</button>
+					)}
+				</>
 			) : menu.kind === "object" ? (
 				<>
 					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("visibility", menu.id)}>
@@ -359,6 +280,14 @@ function RowContextMenu({ menu, onClose, onAction, onAddObject }) {
 					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("frame", menu.id)}>
 						{ko("Frame", "프레임 맞추기")}
 					</button>
+					<button type="button" role="menuitem" className="hierarchy-context-item" data-action="group-under-empty" onClick={() => onAction("group-under-empty", menu.id)}>
+						{ko("Group under new Empty", "빈 오브젝트로 묶기")}
+					</button>
+					{menu.grouped && (
+						<button type="button" role="menuitem" className="hierarchy-context-item" data-action="ungroup-object" onClick={() => onAction("ungroup-object", menu.id)}>
+							{ko("Move out to Props", "그룹에서 빼기 (Props로)")}
+						</button>
+					)}
 				</>
 			) : (
 				<CatalogueEntries onPick={onAddObject} />
@@ -423,10 +352,11 @@ function TreeRow({
 			dropHandlers.onDrop(event);
 		},
 	};
-	// Row drag: an object row is the handle, ANY row can be the landing spot —
-	// the panel holds no policy, the caller's canDrop decides every rule.
+	// Row drag: an object or character row is the handle, ANY row can be the
+	// landing spot — the panel holds no policy, the caller's canDrop decides
+	// every rule.
 	const [rowDropOver, setRowDropOver] = useState(false);
-	const draggableRow = node.kind === "object" && !editing;
+	const draggableRow = (node.kind === "object" || node.kind === "character") && !editing;
 	const rowDropTarget = !!(reparent && dragSourceId && reparent.canDrop?.(dragSourceId, node.id));
 	const rowDrag = (reparent || draggableRow) && {
 		...(draggableRow
@@ -559,7 +489,7 @@ function TreeRow({
 						autoFocus
 						onFocus={(event) => event.currentTarget.select()}
 						onKeyDown={(event) => {
-							if (event.key === "Enter") {
+							if (event.key === "Enter" && !isImeComposing(event)) {
 								event.preventDefault();
 								event.stopPropagation(); // keep the tree hotkey quiet
 								finish();
@@ -627,6 +557,8 @@ export default function HierarchyPanel({
 	onDuplicateObject,
 	onDeleteObject,
 	onFrameObject,
+	onGroupObject,
+	renameRequest = null,
 	onToggleHidden,
 	propsDrop = null,
 	reparent = null,
@@ -647,6 +579,10 @@ export default function HierarchyPanel({
 	// 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);
+	// A freshly made Empty asks to be named: open its row's rename field.
+	useEffect(() => {
+		if (renameRequest?.id) setEditingId(renameRequest.id);
+	}, [renameRequest?.id, renameRequest?.nonce]);
 	// The row being dragged. dataTransfer.getData() is deliberately blank during
 	// dragover in Chrome, so canDrop could never gate the highlight from the
 	// payload alone — the id lives here from dragstart until dragend/drop.
@@ -764,13 +700,18 @@ export default function HierarchyPanel({
 		event.stopPropagation(); // a row pick must not also open the create menu
 		const node = findHierarchyNode(hierarchyNodes, id);
 		if (node?.kind === "object" || node?.kind === "character") {
+			// A grouped object can leave its group from the menu too, not only by
+			// dragging its row onto Props.
+			const objectId = node.kind === "object" ? sceneObjectIdFromHierarchy(id) : null;
+			const inGroup = objectId ? Boolean(sceneObjects.find((entry) => entry.id === objectId)?.parent) : false;
 			setContextMenu({
 				x: event.clientX,
 				y: event.clientY,
-				height: node.kind === "object" ? 180 : 44,
+				height: node.kind === "object" ? (inGroup ? 248 : 212) : node.grouped ? 80 : 44,
 				kind: node.kind,
 				id,
 				hidden: node.hidden === true,
+				grouped: node.grouped === true || inGroup,
 			});
 		} else if (id === SCENE_ROOT_ID) {
 			// The root row is the scene document: its own verbs, never the
@@ -784,13 +725,13 @@ export default function HierarchyPanel({
 				canDelete: availableScenes.length > 1,
 			});
 		} else {
-			setContextMenu({ x: event.clientX, y: event.clientY, height: 344, kind: "create" });
+			setContextMenu({ x: event.clientX, y: event.clientY, height: 376, 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" });
+		setContextMenu({ x: event.clientX, y: event.clientY, height: 376, kind: "create" });
 	};
 
 	const deleteActiveScene = () => {
@@ -824,11 +765,22 @@ export default function HierarchyPanel({
 			onToggleHidden?.(hierarchyId);
 			return;
 		}
+		if (action === "ungroup-object") {
+			// The same door as dropping the row on Props: out of its group, kept where it is.
+			if (reparent?.canDrop?.(hierarchyId, "props")) reparent.onDrop?.(hierarchyId, "props");
+			return;
+		}
+		if (action === "ungroup-character") {
+			// Out of the group is a drop on the scene root: the same policy door.
+			if (reparent?.canDrop?.(hierarchyId, SCENE_ROOT_ID)) reparent.onDrop?.(hierarchyId, SCENE_ROOT_ID);
+			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);
+		else if (action === "group-under-empty") onGroupObject?.(objectId);
 	};
 
 	const commitRename = (hierarchyId, name) => {

package/src/history.js

@@ -46,8 +46,6 @@ 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

package/src/i2v-motion-client.js

@@ -1,7 +1,4 @@
-export const I2V_MOTION_MODEL = "minimax/h3-max-turbo/image-to-video";
-export const I2V_MOTION_RESOLUTION = "480P";
 export const I2V_MOTION_MIN_DURATION = 5;
-export const I2V_MOTION_MAX_DURATION = 15;
 // The durations the AI motion card offers. 15 s (362 frames) is the measured upper
 // end the H3 endpoint accepts and the extractor handles (#380 sit-to-bench).
 export const I2V_MOTION_DURATIONS = Object.freeze([5, 10, 15]);
@@ -61,7 +58,7 @@ export function submitMotionJob(input, fetchImpl = fetch) {
   return request(`/v1/motion/${kind}`, body, fetchImpl);
 }
 
-export function getMotionJob(id, fetchImpl = fetch) {
+function getMotionJob(id, fetchImpl = fetch) {
   return request(`/v1/motion/jobs/${encodeURIComponent(id)}`, undefined, fetchImpl);
 }
 

package/src/ime.js

@@ -0,0 +1,6 @@
+// Browsers report an Enter key from an active input method editor as a
+// composing key event. Chromium and Safari also use the legacy 229 keyCode;
+// keep both signals so text commits never trigger an action first.
+export function isImeComposing(event) {
+	return Boolean(event?.isComposing || event?.nativeEvent?.isComposing || event?.keyCode === 229 || event?.which === 229);
+}

package/src/keyframe-pack.js

@@ -19,7 +19,7 @@ export function keyframePackName(shot) {
 	return `cozyclay-shot-${shot.index}-${slugifyTitle(shot.title)}.zip`;
 }
 
-function readmeText({ shot, fps, hasLast, hasClip, ext }) {
+function readmeText({ shot, fps, hasLast, hasClip, ext, hasStylized }) {
 	const lines = [
 		`CozyClay keyframe pack - shot ${shot.index}: ${shot.title}`,
 		`Frame range ${shot.startFrame}-${shot.endFrame} at ${fps} fps.`,
@@ -58,30 +58,39 @@ function readmeText({ shot, fps, hasLast, hasClip, ext }) {
 		"- blocking-depth.mp4: shot-wide normalised depth video; lighter pixels are closer.",
 		"- prompt.txt: the text prompt describing the intended action.",
 	);
+	if (hasStylized) lines.push("- stylized.png: the stylized picture of this panel; first.png is its greybox.");
 	return lines.join("\n") + "\n";
 }
 
 /**
  * Build the ZIP entries for one shot's keyframe pack.
  * @param {object} args
- * @param {{ title: string, index: number, startFrame: number, endFrame: number }} args.shot
+ * @param {{ title: string, index: number, startFrame: number, endFrame: number, kind?: "clip" | "still" }} args.shot
+ *   a still (storyboard panel) is one picture held for its whole range:
+ *   camera.json gets startFrame === endFrame === the panel start, `hold`
+ *   frames and `kind: "still"`.
+ * @param {string} [args.folder] folder inside the zip, default `<index>-<slug>`
  * @param {number} args.fps
  * @param {Uint8Array} args.firstFramePng
  * @param {Uint8Array | null} args.lastFramePng
  * @param {{ data: Uint8Array, ext: "mp4" | "webm" } | null} args.clip
  * @param {object} args.camera
  * @param {string} args.prompt
+ * @param {Uint8Array | null} [args.stylizedPng] the panel's stylized picture
  * @returns {Array<{ name: string, data: Uint8Array | string }>} entries for buildZip
  */
-export function keyframePackEntries({ shot, fps, firstFramePng, lastFramePng, clip, camera, prompt }) {
-	const folder = `${shot.index}-${slugifyTitle(shot.title)}`;
+export function keyframePackEntries({ shot, fps, firstFramePng, lastFramePng, clip, camera, prompt, stylizedPng = null, folder = `${shot.index}-${slugifyTitle(shot.title)}` }) {
 	const entries = [{ name: `${folder}/first.png`, data: firstFramePng }];
 	if (lastFramePng != null) entries.push({ name: `${folder}/last.png`, data: lastFramePng });
 	if (clip != null) entries.push({ name: `${folder}/clip.${clip.ext}`, data: clip.data });
+	if (stylizedPng != null) entries.push({ name: `${folder}/stylized.png`, data: stylizedPng });
+	const range = shot.kind === "still"
+		? { startFrame: shot.startFrame, endFrame: shot.startFrame, hold: shot.endFrame - shot.startFrame + 1, kind: "still" }
+		: { startFrame: shot.startFrame, endFrame: shot.endFrame };
 	entries.push(
-		{ name: `${folder}/camera.json`, data: JSON.stringify({ ...camera, fps, startFrame: shot.startFrame, endFrame: shot.endFrame }, null, 2) + "\n" },
+		{ name: `${folder}/camera.json`, data: JSON.stringify({ ...camera, fps, ...range }, null, 2) + "\n" },
 		{ name: `${folder}/prompt.txt`, data: `${prompt}\n` },
-		{ name: `${folder}/README.txt`, data: readmeText({ shot, fps, hasLast: lastFramePng != null, hasClip: clip != null, ext: clip ? clip.ext : "mp4" }) },
+		{ name: `${folder}/README.txt`, data: readmeText({ shot, fps, hasLast: lastFramePng != null, hasClip: clip != null, ext: clip ? clip.ext : "mp4", hasStylized: stylizedPng != null }) },
 	);
 	return entries;
 }

package/src/line-edit.js

@@ -116,7 +116,7 @@ export const CURVE_GRAB_RADIUS_PX = 14;
  * any amount of drift (App.jsx paints it detached and refuses new gestures
  * until the view comes back). 1e-4 is tighter than any deliberate nudge and
  * looser than float noise from re-deriving the same matrix. */
-export const CAMERA_DRIFT_EPSILON = 1e-4;
+const CAMERA_DRIFT_EPSILON = 1e-4;
 
 /**
  * The rendering camera -> the C6 `camera` block: { fx, fy, cx, cy, R, t }.
@@ -577,7 +577,7 @@ export const DRAW_BUNCHED_WINDOW_FRAMES = 24;
  * two distinguishable PLACES on the path, and that is a screen-distance
  * question. Twice the grab radius is the app's own scale for "the same spot":
  * inside it a user could not have aimed at one end rather than the other. */
-export const DRAW_MATCH_MIN_SEPARATION_PX = 2 * CURVE_GRAB_RADIUS_PX;
+const DRAW_MATCH_MIN_SEPARATION_PX = 2 * CURVE_GRAB_RADIUS_PX;
 
 /** Seam easing, replacing the hard 2-frame pin on the DRAW path only.
  *
@@ -608,7 +608,7 @@ export const DRAW_MATCH_MIN_SEPARATION_PX = 2 * CURVE_GRAB_RADIUS_PX;
  * (Table 5), so a dozen frames is the scale at which the sampler already thinks
  * about "near a constraint". The 2-frame floor keeps the shortest legal window
  * behaving exactly like the pin it replaces. */
-export const SEAM_EASE_FRACTION = 0.15;
+const SEAM_EASE_FRACTION = 0.15;
 export const SEAM_EASE_MIN = 2;
 export const SEAM_EASE_MAX = 12;
 
@@ -1133,7 +1133,7 @@ export function curveToPoints2d(curve) {
 	for (let i = 0; i < count; i += 1) {
 		// Rounded rather than floored so the sampling is symmetric about the
 		// middle; i = count-1 lands exactly on `last`, i = 0 exactly on 0.
-		const source = count === 1 ? 0 : Math.round((i * last) / (count - 1));
+		const source = Math.round((i * last) / (count - 1));
 		const point = visible[source];
 		points2d.push([point.u, point.v]);
 	}

package/src/live-control.js

@@ -10,14 +10,14 @@ const MOTION_TELEMETRY_EVENTS = new Set([
 ]);
 const LIVE_TELEMETRY_EVENTS = new Set([...MOTION_TELEMETRY_EVENTS, ...EXECUTION_TELEMETRY_EVENTS.filter((event) => event.startsWith("mcp:"))]);
 
-export const LIVE_CONTROL_PORT = import.meta.env?.VITE_COZYCLAY_LIVE_PORT ?? "5184";
+const LIVE_CONTROL_PORT = import.meta.env?.VITE_COZYCLAY_LIVE_PORT ?? "5184";
 export const liveControlUrl = (port = LIVE_CONTROL_PORT) => `ws://127.0.0.1:${port}/live`;
-export const LIVE_CONTROL_URL = liveControlUrl();
+const LIVE_CONTROL_URL = liveControlUrl();
 // Reconnect schedule: 1 s doubling to a 15 s cap with +-25 % jitter, so a hub
 // that comes back does not take every editor's retry in the same millisecond.
-export const LIVE_RECONNECT_BASE_MS = 1_000;
+const LIVE_RECONNECT_BASE_MS = 1_000;
 export const LIVE_RECONNECT_MAX_MS = 15_000;
-export const LIVE_RECONNECT_JITTER = 0.25;
+const LIVE_RECONNECT_JITTER = 0.25;
 // App-level liveness, sent only to a hub that advertises `heartbeatMs`: a TCP
 // connection to a dead hub can stay open for minutes without a single frame.
 export const LIVE_PING_INTERVAL_MS = 20_000;
@@ -25,11 +25,11 @@ export const LIVE_PONG_TIMEOUT_MS = 10_000;
 // A blocked main thread (a 30 s capture_frame) delays every timer at once. A
 // tick that late is evidence of that stall, not of a dead hub, so the round is
 // restarted instead of being counted as a missed pong.
-export const LIVE_HEARTBEAT_SLACK_MS = 2_000;
+const LIVE_HEARTBEAT_SLACK_MS = 2_000;
 // Per-tab identity. sessionStorage is per tab and survives a reload, which is
 // exactly the lifetime the hub routes retained motion outcomes to.
 export const LIVE_WORKSPACE_ID_KEY = "cozyclay:live-workspace-id";
-export const LIVE_DUPLICATE_CLOSE_CODE = 1008;
+const LIVE_DUPLICATE_CLOSE_CODE = 1008;
 export const LIVE_DUPLICATE_CLOSE_REASON = "Workspace id is already connected";
 
 // Storage can be absent (Node), disabled, or throw on access alone; the tab