cozyclay 2.0.0 → 2.1.0

package/src/shell/MenuBar.jsx

@@ -170,9 +170,10 @@ const MENUS = [
 export default function MenuBar({ preferences }) {
 	const shell = useStudioShell();
 	const {
-		runStudioAction, projectSaveState, recState, exportMenuTriggerRef, exportMenuOpen,
+		runStudioAction, projectSaveState, previsMode, recState, exportMenuTriggerRef, exportMenuOpen,
 		exportShotIdRef, setExportMenuOpen, shots, exportKeyframePacks, hasCameraKeys, motion,
 		exportRenderPasses, exportDepthVideo, exportStoryboard, downloadOtioCutList,
+		exportContactSheet, exportPanelPacks, exportAnimatic,
 		castDomain, preferencesOpen, setPreferencesOpen, agentOpen, toggleAgent,
 		setToast, embedMode, setProjectStartupOpen, setProjectBrowserOpen,
 	} = shell;
@@ -187,7 +188,13 @@ export default function MenuBar({ preferences }) {
 	const exportOpenRef = useRef(exportMenuOpen);
 	exportOpenRef.current = exportMenuOpen;
 	const recording = recState === "recording";
-	const packReason = shots.length ? "" : ko("Add a shot first — a pack describes one cut", "샷을 먼저 추가하세요 — 팩은 컷 하나를 설명합니다");
+	// A storyboard project exports panels (its stills), never clip packs or shot video.
+	const storyboard = previsMode === "storyboard";
+	const panelCount = storyboard ? shots.filter((entry) => entry.kind === "still").length : 0;
+	const noPanels = ko("Add a panel first — storyboard exports describe panels", "패널을 먼저 추가하세요 — 스토리보드 내보내기는 패널을 담습니다");
+	const packReason = storyboard
+		? panelCount ? "" : noPanels
+		: shots.length ? "" : ko("Add a shot first — a pack describes one cut", "샷을 먼저 추가하세요 — 팩은 컷 하나를 설명합니다");
 
 	// The camera tutorial's handoff opens Export directly; its flyout lives in File.
 	useEffect(() => {
@@ -223,7 +230,7 @@ export default function MenuBar({ preferences }) {
 
 	// ⌘S saves and ⌘E exports the keyframe pack (G7), from anywhere in the studio.
 	const keys = useRef(null);
-	keys.current = { runStudioAction, projectSaveState, recording, packReason, exportKeyframePacks, setToast };
+	keys.current = { runStudioAction, projectSaveState, recording, packReason, exportKeyframePacks: storyboard ? exportPanelPacks : exportKeyframePacks, setToast };
 	useEffect(() => {
 		if (embedMode) return undefined;
 		const onKeyDown = (event) => {
@@ -277,6 +284,42 @@ export default function MenuBar({ preferences }) {
 		closeMenus(false);
 		onSelect();
 	};
+	const panelItem = (testId, label, title, onSelect, shortcut = null) => (
+		<button
+			type="button"
+			role="menuitem"
+			className="menubar-item"
+			data-testid={testId}
+			disabled={!panelCount || recording}
+			data-disabled-reason={panelCount ? undefined : "no-panels"}
+			title={panelCount ? title : noPanels}
+			onClick={() => {
+				const shotId = exportShotIdRef.current;
+				closeMenus(false);
+				onSelect(shotId);
+			}}
+		>
+			<span className="menubar-item-label">{label}</span>
+			{shortcut && <Shortcut keys={shortcut} />}
+		</button>
+	);
+	const storyboardExports = (
+		<>
+			{panelItem("export-contact-sheet", ko("Contact sheet (PNG)", "콘택트 시트 (PNG)"),
+				ko("Every panel with its caption on one sheet", "모든 패널과 캡션을 한 장에"), () => void exportContactSheet())}
+			{panelItem("export-panel-pack", ko("Panel pack (zip)", "패널 팩 (zip)"),
+				ko("The selected panel's frame, stylized image, camera and prompt as one zip", "선택한 패널의 프레임·스타일 이미지·카메라·프롬프트를 zip 하나로"),
+				(shotId) => void exportPanelPacks(false, shotId), `${MOD}E`)}
+			{panelItem("export-all-panels", ko("All panels (zip)", "모든 패널 (zip)"),
+				ko("One zip with a folder per panel", "패널마다 폴더 하나씩 담은 zip"), () => void exportPanelPacks(true, null))}
+			{panelItem("export-animatic", ko("Animatic (mp4)", "애니매틱 (mp4)"),
+				ko("Every panel held for its hold, as one MP4", "모든 패널을 홀드만큼 이어 MP4 하나로"), () => void exportAnimatic())}
+			{panelItem("export-otio", ko("Cut list (OTIO)", "컷 목록 (OTIO)"),
+				ko("Download the OTIO cut list; each panel is a clip as long as its hold", "OTIO 컷 목록 다운로드 — 패널마다 홀드 길이의 클립"), () => downloadOtioCutList())}
+			{panelItem("export-render-passes", ko("Depth + normal (PNG)", "뎄스 + 노멀 (PNG)"),
+				ko("Depth and normal conditioning plates of the current framing", "현재 프레이밍의 뎄스·노멀 컨디션 플레이트"), () => exportRenderPasses())}
+		</>
+	);
 
 	const content = {
 		file: (
@@ -303,6 +346,17 @@ export default function MenuBar({ preferences }) {
 				<button type="button" role="menuitem" className="menubar-item" onClick={item(() => runStudioAction("project.saveAs"))}>
 					<span className="menubar-item-label">{ko("Save As…", "다른 이름으로 저장…")}</span>
 				</button>
+				{previsMode === "storyboard" && (
+					<button
+						type="button"
+						role="menuitem"
+						className="menubar-item"
+						data-testid="export-animation-project"
+						onClick={item(() => runStudioAction("project.exportAsAnimation"))}
+					>
+						<span className="menubar-item-label">{ko("Export as Animation project…", "애니메이션 프로젝트로 내보내기…")}</span>
+					</button>
+				)}
 				<hr className="menubar-separator" />
 				{/* One Export menu for every delivery this studio makes (#193,
 				    R4). The keyframe pack leads because it is the pack an AI video
@@ -330,6 +384,7 @@ export default function MenuBar({ preferences }) {
 					</button>
 					{exportMenuOpen && (
 						<ExportFlyout anchorRef={exportMenuTriggerRef} autoFocus={flyoutFocus} onAutoFocused={focusedFlyout}>
+							{storyboard ? storyboardExports : (<>
 							<button
 								type="button"
 								role="menuitem"
@@ -357,14 +412,30 @@ export default function MenuBar({ preferences }) {
 									className="menubar-item"
 									data-testid="export-video"
 									disabled={recording}
-									title={ko("Render the shot to an MP4 — camera move and character motion, no editor chrome", "샷을 MP4로 렌더링합니다 — 카메라 움직임과 캐릭터 모션만, 편집 UI는 제외")}
+									title={ko("Render the whole timeline to one MP4 — every shot back to back, camera and motion, no editor chrome", "타임라인 전체를 MP4 하나로 — 모든 샷을 이어서, 카메라·모션만, 편집 UI 제외")}
+									onClick={() => {
+										closeMenus(false);
+										void runStudioAction("export.shotVideo", { scope: "timeline" });
+									}}
+								>
+									<span className="menubar-item-label">{ko("Video — whole timeline (mp4)", "영상 — 타임라인 전체 (mp4)")}</span>
+								</button>
+							)}
+							{shots.length > 0 && (
+								<button
+									type="button"
+									role="menuitem"
+									className="menubar-item"
+									data-testid="export-video-shot"
+									disabled={recording}
+									title={ko("Render one shot to its own MP4 — the shot you opened the menu from, or the one under the playhead", "샷 하나만 MP4로 — 메뉴를 연 샷, 아니면 재생 위치의 샷")}
 									onClick={() => {
 										const shotId = exportShotIdRef.current;
 										closeMenus(false);
-										void runStudioAction("export.shotVideo", shotId ? { shotId } : {});
+										void runStudioAction("export.shotVideo", shotId ? { shotId, scope: "shot" } : { scope: "shot" });
 									}}
 								>
-									<span className="menubar-item-label">{ko("Video (mp4)", "영상 (mp4)")}</span>
+									<span className="menubar-item-label">{ko("Video — this shot only (mp4)", "영상 — 이 샷만 (mp4)")}</span>
 								</button>
 							)}
 							<button
@@ -427,6 +498,7 @@ export default function MenuBar({ preferences }) {
 										: ko("Add a shot to export video or OTIO", "영상·OTIO를 내보내려면 샷을 추가하세요")}
 								</p>
 							)}
+							</>)}
 						</ExportFlyout>
 					)}
 				</div>

package/src/shell/OutlinerSlot.jsx

@@ -9,7 +9,7 @@ export default function OutlinerSlot() {
 		ikMode, rowIdForCharIndex, activeCharIndex, sceneObjects,
 		scenes, activeSceneId, selectSceneDocument, createSceneDocumentFromUi, duplicateSceneDocumentFromUi,
 		renameSceneDocumentFromUi, deleteSceneDocumentFromUi, addSceneObject, renameSceneObject, runStudioAction,
-		deleteSceneObject, frameSelection, toggleHierarchyHidden, propsDrop, hierarchyReparent,
+		deleteSceneObject, frameSelection, groupObjectUnderNewEmpty, renameRequest, toggleHierarchyHidden, propsDrop, hierarchyReparent,
 		agentTouchedRows,
 	} = useStudioShell();
 	return (
@@ -40,6 +40,8 @@ export default function OutlinerSlot() {
 			onDuplicateObject={(objectId) => runStudioAction("object.duplicate", objectId ? { objectId } : {})}
 			onDeleteObject={deleteSceneObject}
 			onFrameObject={frameSelection}
+			onGroupObject={groupObjectUnderNewEmpty}
+			renameRequest={renameRequest}
 			onToggleHidden={toggleHierarchyHidden}
 			propsDrop={propsDrop}
 			reparent={hierarchyReparent}

package/src/shell/TopBar.jsx

@@ -10,7 +10,7 @@ import "./topbar.css";
 // primary action. Save and Export live in File (G7). #570: the project name
 // and its save state head the left column (ProjectHead below).
 export default function TopBar({ preferences }) {
-	const { recState, liveHubStatus, liveWorkspaceHandle } = useStudioShell();
+	const { recState, liveHubStatus, liveWorkspaceHandle, previsMode } = useStudioShell();
 	const connected = liveHubStatus === "connected";
 	return (
 		<header className="topbar v2-topbar" data-rec-state={recState}>
@@ -25,7 +25,7 @@ export default function TopBar({ preferences }) {
 				<i className="topbar-mcp-dot" aria-hidden="true" />
 				<span className="topbar-mcp-text">{connected ? ko("MCP connected", "MCP 연결됨") : ko("MCP offline", "MCP 꺼짐")}</span>
 			</span>
-			<GenerateMotion />
+			{previsMode !== "storyboard" && <GenerateMotion />}
 		</header>
 	);
 }
@@ -35,7 +35,7 @@ export default function TopBar({ preferences }) {
 export function ProjectHead() {
 	const {
 		projectMenuOpen, setProjectMenuOpen, projectDirty, projectName, projectStartupOpen,
-		projectManifest, saveStatus,
+		projectManifest, saveStatus, previsMode,
 	} = useStudioShell();
 	return (
 		<div className="topbar-project studio-project-head">
@@ -48,10 +48,24 @@ export function ProjectHead() {
 				projectManifest={projectManifest}
 			/>
 			<SaveState status={saveStatus} />
+			<PrevisModeBadge mode={previsMode} />
 		</div>
 	);
 }
 
+// The project's previs mode, a quiet label under the save state.
+function previsModeLabel(mode) {
+	return mode === "storyboard" ? ko("Storyboard", "스토리보드") : ko("Animation", "애니메이션");
+}
+
+function PrevisModeBadge({ mode }) {
+	return (
+		<span className="topbar-previs-mode" data-testid="topbar-previs-mode" data-previs-mode={mode}>
+			{previsModeLabel(mode)}
+		</span>
+	);
+}
+
 // "Generate Motion" is today's Scene generate (G6) and the one home for
 // generation (IS-2): with authored prompt blocks it runs them all, as the
 // removed Details "Generate all blocks" did; otherwise it runs the prompt.

package/src/shell/ViewportToolbar.jsx

@@ -12,14 +12,18 @@ import { saveAutoColor } from "../auto-color.js";
 import { trackFeature } from "../analytics.js";
 import "./viewport.css";
 
-// G1: the single mode+tool pill. Keys 1-4 and W/E/R are bound in App's
+// G1: the single mode+tool pill. Keys 1-5 and W/E/R are bound in App's
 // keydown handler; these buttons are the same doors for the pointer.
 const MODES = [
 	{ id: "scene", key: "1", label: ko("Stage", "배치") },
 	{ id: "pose", key: "2", label: ko("Pose", "포즈") },
 	{ id: "camera", key: "3", label: ko("Camera", "카메라") },
 	{ id: "motion", key: "4", label: ko("Motion", "모션") },
+	// #739: an isolated turntable for one sculpt. Every previs mode has it.
+	{ id: "sculpt", key: "5", label: ko("Sculpt", "조각") },
 ];
+// A storyboard project has no Motion department: its pill reads 1 2 3 5.
+const modesFor = (previsMode) => (previsMode === "storyboard" ? MODES.filter((mode) => mode.id !== "motion") : MODES);
 
 // #570 line icons (16px, 1.3 stroke) for the floating rails.
 const ICON = {
@@ -27,6 +31,10 @@ const ICON = {
 	pose: "M8 2.25a1.5 1.5 0 1 1 0 3 1.5 1.5 0 1 1 0-3z M5 7.25h6 M8 7.25v3.5 M6.25 13.75 8 10.75l1.75 3",
 	camera: "M2 5.75A1.5 1.5 0 0 1 3.5 4.25h6A1.5 1.5 0 0 1 11 5.75v4.5a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 2 10.25z M11 7l3-1.5v5L11 9",
 	motion: "M1.75 9.5c1.5 0 2-4 3.25-4s1.75 5 3 5 1.75-5 3-5 1.75 4 3.25 4",
+	sculpt: "M3.75 11.75c0-3.25 1.9-5.5 4.25-5.5s4.25 2.25 4.25 5.5z M2 11.75h12 M5.25 14h5.5 M10 2.25 8.5 5.25",
+	front: "M8 2.5a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 1 1 0-3.5z M4.5 13.5v-2.75a3.5 3.5 0 0 1 7 0v2.75",
+	side: "M7.25 2.5a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 1 1 0-3.5z M9 4.25h1.5 M6 13.5v-2.75a2.5 2.5 0 0 1 4.5-1.5",
+	back: "M8 2.5a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 1 1 0-3.5z M4.5 13.5v-2.75a3.5 3.5 0 0 1 7 0v2.75 M8 9v4.5",
 	move: "M8 2v12 M2 8h12 M6.25 3.75 8 2l1.75 1.75 M6.25 12.25 8 14l1.75-1.75 M3.75 6.25 2 8l1.75 1.75 M12.25 6.25 14 8l-1.75 1.75",
 	rotate: "M13.25 8A5.25 5.25 0 1 1 11.7 4.3 M13.25 2.5v2.75H10.5",
 	scale: "M2.5 8.5v4a1 1 0 0 0 1 1h4 M8.5 2.5h5v5 M13.5 2.5 7.5 8.5",
@@ -133,7 +141,7 @@ export default function ViewportToolbar() {
 		agentCollapsed, addSceneObject, spawnCharacter, characters, flySpeed,
 		ikEditTool, setIkEditTool, showTrails, setShowTrails, motion, setRangePinPartPick,
 		trailFalloffS, setTrailFalloffS, lineEditMode, exitLineEditMode, enterRefineMode,
-		refineDisabledReason,
+		refineDisabledReason, previsMode, sculptView, requestSculptView,
 	} = useStudioShell();
 	const menu = useOverlayMenu();
 
@@ -178,6 +186,12 @@ export default function ViewportToolbar() {
 				refused: refineReason, pick: () => { if (!lineEditMode) enterRefineMode(); },
 			},
 		],
+		// Sculpt mode's W/E/R swing the turntable camera to a reference view.
+		sculpt: [
+			{ key: "W", id: "front", name: ko("Front view", "정면 보기"), active: sculptView?.view === "front", pick: () => requestSculptView("front") },
+			{ key: "E", id: "side", name: ko("Side view", "측면 보기"), active: sculptView?.view === "side", pick: () => requestSculptView("side") },
+			{ key: "R", id: "back", name: ko("Back view", "뒷면 보기"), active: sculptView?.view === "back", pick: () => requestSculptView("back") },
+		],
 	}[workflowMode] ?? [];
 
 	// Lens choices are the real primes that fit the editor's FOV range, turned
@@ -379,7 +393,7 @@ export default function ViewportToolbar() {
 
 			<div className="vp-mode-toolbar" role="toolbar" data-testid="mode-toolbar" aria-label={ko("Mode and tools", "모드와 도구")}>
 				<div className="vp-mode-keys" role="tablist" aria-label={ko("Workflow", "작업 모드")}>
-					{MODES.map((mode) => {
+					{modesFor(previsMode).map((mode) => {
 						const active = workflowMode === mode.id;
 						const refused = mode.id === "pose" ? poseRefusal : null;
 						return (
@@ -392,6 +406,7 @@ export default function ViewportToolbar() {
 								className={"vp-mode-key" + (active ? " active" : "")}
 								aria-selected={active}
 								aria-disabled={refused ? true : undefined}
+								data-disabled-reason={refused || undefined}
 								aria-label={mode.label}
 								title={refused || `${mode.label} (${mode.key})`}
 								onClick={() => selectWorkflowMode(mode.id)}

package/src/shell/dock.css

@@ -90,4 +90,243 @@
 	.app[data-embed-mode] .v2-dock-resize {
 		display: none;
 	}
+
+	/* Board (storyboard projects): the stills as a strip of panel cards in the
+	   Sequencer's place, the Shot Camera card still docked at the right end.
+	   DESIGN.md §2-3: 12 px text, 4 px controls, 6 px cards, the amber
+	   selection ring and the primary fill for the one add action. */
+	.app:not([data-embed-mode]) .v2-dock > .dock-board {
+		--board-card-w: 184px;
+		grid-column: 1;
+		grid-row: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		min-height: 0;
+		margin-right: var(--shell-camera, 0px);
+		color: var(--text-1);
+		font: 400 12px var(--sans);
+	}
+
+	.app:not([data-embed-mode]) .dock-board-head {
+		flex: none;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		height: 48px;
+		padding: 0 var(--sp-3) 0 calc(var(--sp-3) + var(--dock-tabs-w, 0px) + var(--sp-3));
+	}
+
+	.app:not([data-embed-mode]) .dock-board-count {
+		color: var(--label, var(--text-2));
+		font-size: 11px;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-add {
+		height: var(--h-control);
+		padding: 0 var(--sp-2);
+		border: 0;
+		border-radius: var(--r-1);
+		background: var(--primary-fill, var(--primary));
+		color: var(--on-select);
+		font: 600 12px var(--sans);
+		cursor: pointer;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-head > .dock-board-add { margin-left: auto; }
+
+	.app:not([data-embed-mode]) .dock-board-add:focus-visible,
+	.app:not([data-embed-mode]) .dock-board-actions button:focus-visible,
+	.app:not([data-embed-mode]) .dock-board-card:focus-visible {
+		outline: 2px solid var(--select);
+		outline-offset: 2px;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-empty {
+		flex: 1 1 auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-3);
+		color: var(--text-2);
+		text-align: center;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-empty p { margin: 0; max-width: 46ch; }
+
+	.app:not([data-embed-mode]) .dock-board-strip {
+		flex: 1 1 auto;
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sp-2);
+		min-height: 0;
+		margin: 0;
+		padding: 2px var(--sp-3) var(--sp-2);
+		overflow: auto hidden;
+		list-style: none;
+		scroll-padding-inline: var(--sp-3);
+	}
+
+	.app:not([data-embed-mode]) .dock-board-card {
+		position: relative;
+		flex: none;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		width: var(--board-card-w);
+		padding: 6px;
+		box-sizing: border-box;
+		border-radius: var(--r-2);
+		background: var(--card-fill, var(--surface-raised));
+		box-shadow: var(--card-ring, none);
+		cursor: grab;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-card:hover { background: var(--tile-fill, var(--surface-active)); }
+	.app:not([data-embed-mode]) .dock-board-card[data-selected] { box-shadow: 0 0 0 1.5px var(--select); }
+	.app:not([data-embed-mode]) .dock-board-card[data-dragging] { opacity: .45; cursor: grabbing; }
+
+	/* The drop slot: a 2 px amber bar in the gap on the side the panel lands. */
+	.app:not([data-embed-mode]) .dock-board-card[data-drop]::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		border-radius: 1px;
+		background: var(--select);
+	}
+	.app:not([data-embed-mode]) .dock-board-card[data-drop="before"]::after { left: calc(var(--sp-2) / -2 - 1px); }
+	.app:not([data-embed-mode]) .dock-board-card[data-drop="after"]::after { right: calc(var(--sp-2) / -2 - 1px); }
+
+	/* Card actions ride above the picture and show on hover or focus, the
+	   Sequencer's shot-card pattern (#606). */
+	.app:not([data-embed-mode]) .dock-board-actions {
+		position: absolute;
+		z-index: 2;
+		top: 10px;
+		left: 10px;
+		right: 10px;
+		display: none;
+		flex-wrap: wrap;
+		gap: 4px;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-card:hover .dock-board-actions,
+	.app:not([data-embed-mode]) .dock-board-card:focus-within .dock-board-actions {
+		display: flex;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-actions button {
+		height: 20px;
+		padding: 0 6px;
+		border: 0;
+		border-radius: var(--r-1);
+		background: var(--surface-bar);
+		box-shadow: 0 0 0 .5px var(--divider-strong);
+		color: var(--text-1);
+		font: 500 11px var(--sans);
+		cursor: pointer;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-menu { display: flex; flex-basis: 100%; gap: 4px; }
+	.app:not([data-embed-mode]) .dock-board-actions button:hover:not(:disabled) { background: var(--surface-active); }
+	.app:not([data-embed-mode]) .dock-board-actions button.danger:hover { color: var(--danger); }
+	.app:not([data-embed-mode]) .dock-board-actions button:disabled { color: var(--text-3); cursor: default; }
+
+	.app:not([data-embed-mode]) .dock-board-thumb {
+		position: relative;
+		aspect-ratio: 16 / 9;
+		overflow: hidden;
+		border-radius: var(--r-1);
+		background: var(--frame-well, var(--field-deep));
+	}
+
+	.app:not([data-embed-mode]) .dock-board-image {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		pointer-events: none;
+	}
+
+	/* The greybox stays readable under a stylized picture as a corner inset. */
+	.app:not([data-embed-mode]) .dock-board-inset {
+		position: absolute;
+		right: 4px;
+		bottom: 4px;
+		width: 32%;
+		border-radius: var(--r-1);
+		box-shadow: 0 0 0 1px var(--overlay);
+		pointer-events: none;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-index {
+		position: absolute;
+		left: 4px;
+		bottom: 4px;
+		min-width: 18px;
+		height: 18px;
+		padding: 0 4px;
+		box-sizing: border-box;
+		border-radius: var(--r-1);
+		background: var(--overlay);
+		color: var(--text-1);
+		font: 600 11px/18px var(--sans);
+		font-variant-numeric: tabular-nums;
+		text-align: center;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-card[data-selected] .dock-board-index {
+		background: var(--select);
+		color: var(--on-select);
+	}
+
+	.app:not([data-embed-mode]) .dock-board-caption {
+		box-sizing: border-box;
+		width: 100%;
+		min-height: 36px;
+		padding: 2px 6px;
+		border: 0;
+		border-radius: var(--r-1);
+		background: var(--field-fill, var(--field));
+		color: var(--text-1);
+		font: 400 12px/16px var(--sans);
+		resize: none;
+		cursor: text;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-caption::placeholder { color: var(--text-3); }
+
+	.app:not([data-embed-mode]) .dock-board-caption:focus-visible,
+	.app:not([data-embed-mode]) .dock-board-hold input:focus-visible {
+		outline: 1.5px solid var(--select);
+		outline-offset: 0;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-hold {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		height: var(--h-row);
+		color: var(--label, var(--text-2));
+		font-size: 11px;
+		cursor: default;
+	}
+
+	.app:not([data-embed-mode]) .dock-board-hold input {
+		width: 56px;
+		height: 20px;
+		padding: 0 6px;
+		box-sizing: border-box;
+		border: 0;
+		border-radius: var(--r-1);
+		background: var(--field-fill, var(--field));
+		color: var(--text-1);
+		font: 400 12px var(--sans);
+		font-variant-numeric: tabular-nums;
+	}
 }

package/src/shell/glass-regions.css

@@ -87,6 +87,7 @@
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-outliner .v2-outliner-chip.cast { background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.25a1.5 1.5 0 1 1 0 3 1.5 1.5 0 1 1 0-3z M5 7.25h6 M8 7.25v3.5 M6.25 13.75 8 10.75l1.75 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.25a1.5 1.5 0 1 1 0 3 1.5 1.5 0 1 1 0-3z M5 7.25h6 M8 7.25v3.5 M6.25 13.75 8 10.75l1.75 3'/%3E%3C/svg%3E"); }
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-outliner .v2-outliner-chip.cam { background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.75A1.5 1.5 0 0 1 3.5 4.25h6A1.5 1.5 0 0 1 11 5.75v4.5a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 2 10.25z M11 7l3-1.5v5L11 9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.75A1.5 1.5 0 0 1 3.5 4.25h6A1.5 1.5 0 0 1 11 5.75v4.5a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 2 10.25z M11 7l3-1.5v5L11 9'/%3E%3C/svg%3E"); }
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-outliner .v2-outliner-chip.light { background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 1 1 0-5z M8 1.75v1.5 M8 12.75v1.5 M1.75 8h1.5 M12.75 8h1.5 M3.6 3.6l1 1 M11.4 11.4l1 1 M3.6 12.4l1-1 M11.4 4.6l1-1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 1 1 0-5z M8 1.75v1.5 M8 12.75v1.5 M1.75 8h1.5 M12.75 8h1.5 M3.6 3.6l1 1 M11.4 11.4l1 1 M3.6 12.4l1-1 M11.4 4.6l1-1'/%3E%3C/svg%3E"); }
+.app[data-shell="glass"]:not([data-embed-mode]) .v2-outliner .v2-outliner-chip.empty { background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8V2.25 M8 8l-4.75 3 M8 8l5 2.75'/%3E%3Ccircle cx='8' cy='8' r='1.1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8V2.25 M8 8l-4.75 3 M8 8l5 2.75'/%3E%3Ccircle cx='8' cy='8' r='1.1'/%3E%3C/svg%3E"); }
 /* The toggles draw the same chevron as the rest of the shell. */
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-outliner .hierarchy-toggle:not(.placeholder) {
 	font-size: 0;
@@ -442,7 +443,7 @@
 	font-family: var(--sans);
 }
 .app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-head {
-	height: 48px;
+	height: auto;
 	min-height: 48px;
 	gap: 12px;
 	padding: 0 16px;
@@ -700,7 +701,7 @@
 
 /* The Sequencer head drops its secondary groups as the dock narrows. */
 .app[data-shell="glass"]:not([data-embed-mode]) .bottom-timeline { container-type: inline-size; }
-.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-head { overflow: hidden; }
+.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-head { overflow: visible; }
 @container (max-width: 760px) {
 	.app[data-shell="glass"]:not([data-embed-mode]) .v2-sequencer .tl-badge { display: none; }
 }

package/src/shell/log-store.js

@@ -21,7 +21,7 @@ function publish(next) {
  * newest entry updates that entry in place instead of adding a row, so an
  * encoding counter reads as one line that ticks.
  */
-export function push({ kind = "info", text, key = null, at = Date.now() }) {
+function push({ kind = "info", text, key = null, at = Date.now() }) {
 	const message = typeof text === "string" ? text.trim() : "";
 	if (!message) return null;
 	const last = entries[entries.length - 1];
@@ -36,16 +36,16 @@ export function push({ kind = "info", text, key = null, at = Date.now() }) {
 	return entry;
 }
 
-export function getEntries() {
+function getEntries() {
 	return entries;
 }
 
-export function subscribe(listener) {
+function subscribe(listener) {
 	listeners.add(listener);
 	return () => listeners.delete(listener);
 }
 
-export function clear() {
+function clear() {
 	if (entries.length) publish([]);
 }
 

package/src/shell/mode.css

@@ -7,3 +7,23 @@
 .app[data-workflow-mode="pose"] .workflow-toolbar-hint { display: inline-flex; }
 .app[data-workflow-mode="pose"] .vp-inset,
 .app[data-workflow-mode="pose"] .vp-shot-preview { display: none !important; }
+
+/* A storyboard project (#650) is stills: the take, motion and pose-correction
+   tools, the root-path (waypoint) switch and a prop's Top-View travel path
+   never show, whatever the mode. */
+.app[data-previs-mode="storyboard"] .take-bar,
+.app[data-previs-mode="storyboard"] .tl-motion-tools,
+.app[data-previs-mode="storyboard"] .tl-pose-tools,
+.app[data-previs-mode="storyboard"] .tl-btn.wp,
+.app[data-previs-mode="storyboard"] .tl-wp-hint,
+.app[data-previs-mode="storyboard"] .tl-track.objmo { display: none !important; }
+
+/* The project mode under the project name: secondary text, never a control. */
+.topbar-previs-mode {
+	color: var(--text-2, #9b9ba1);
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.3;
+	letter-spacing: .02em;
+	white-space: nowrap;
+}

package/src/shell/studio-shell-context.js

@@ -11,7 +11,10 @@ import { createContext, useContext } from "react";
 // - generation, blocks/refine, takes/recipe and preserve strength;
 // - agentOpen/toggleAgent, preferencesOpen/setPreferencesOpen;
 // - statusText/setStatusText, previewRanges/setPreviewRanges, liveHubStatus,
-//   flySpeed (the navigation multiplier, not metres per second).
+//   flySpeed (the navigation multiplier, not metres per second);
+// - previsMode ("storyboard" | "animation"), sceneRevision (bumps on every
+//   authored edit) and capturePanelThumbnail(shot) (the shot's first frame as
+//   a PNG data URL, or null) for the Board dock tab.
 export const StudioShellContext = createContext(null);
 
 export function useStudioShell() {