cozyclay 2.0.2 → 2.1.1

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/ShotPreviewHeader.jsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export default function ShotPreviewHeader({ name, lens }) {
+	const [host, setHost] = useState(null);
+	useLayoutEffect(() => {
+		setHost(document.querySelector(".vp-shot-preview .vp-shot-preview-tag"));
+	}, []);
+	if (!host) return null;
+	return createPortal(
+		<span className="vp-shot-preview-meta" data-testid="shot-preview-header">
+			<span className="vp-shot-preview-name">{name}</span>
+			<span className="vp-shot-preview-lens">{lens}</span>
+		</span>,
+		host,
+	);
+}

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.
@@ -110,6 +124,7 @@ function GenerateMotion() {
 							key={action.id}
 							className="menubar-item"
 							data-generate-action={action.id}
+							disabled={Boolean(action.reason)}
 							aria-disabled={action.reason ? "true" : undefined}
 							data-disabled-reason={action.reason || undefined}
 							onClick={() => {

package/src/shell/ViewportToolbar.jsx

@@ -1,6 +1,6 @@
-import { useEffect, useLayoutEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
 import { useStudioShell } from "./studio-shell-context.js";
+import ShotPreviewHeader from "./ShotPreviewHeader.jsx";
 import { ko } from "../locale.js";
 import { PRESETS, SHOT_ASPECT_PRESETS } from "../app-stage.jsx";
 import { CAMERA_PRESETS } from "../camera-move.js";
@@ -10,16 +10,21 @@ import { CHARACTER_MODEL_IDS } from "../scenes.js";
 import { elementByPath } from "../studio-elements.js";
 import { saveAutoColor } from "../auto-color.js";
 import { trackFeature } from "../analytics.js";
+import { GUIDE_LABELS, nextGuideMode } from "../shot-guides.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 +32,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",
@@ -105,35 +114,18 @@ function MenuItem({ checked, role = "menuitemradio", className = "", children, .
 	);
 }
 
-/** The inset card's header (violet dot, shot name, lens) lives in App's
- * `.vp-shot-preview-tag`; this region only fills in the words it shows. */
-function ShotPreviewHeader({ name, lens }) {
-	const [host, setHost] = useState(null);
-	useLayoutEffect(() => {
-		setHost(document.querySelector(".vp-shot-preview .vp-shot-preview-tag"));
-	}, []);
-	if (!host) return null;
-	return createPortal(
-		<span className="vp-shot-preview-meta" data-testid="shot-preview-header">
-			<span className="vp-shot-preview-name">{name}</span>
-			<span className="vp-shot-preview-lens">{lens}</span>
-		</span>,
-		host,
-	);
-}
-
 export default function ViewportToolbar() {
 	const {
 		workflowMode, selectWorkflowMode, poseRefusal, gizmoMode, setGizmoMode, snapEnabled,
 		setSnapEnabled, preset, applyPreset, cameraPresetId, i2vMotionCameraLocked,
 		runStudioAction, shotAspectKey, fovDeg, shotsDomain, shot, shots, activeShot,
 		setNonce, workspaceLayout, viewMenuTriggerRef, viewMenuOpen,
-		setViewMenuOpen, viewLooksActive, gridView, setGridView,
+		setViewMenuOpen, viewLooksActive, gridView, setGridView, guideMode,
 		autoColor, setAutoColor, isCharacterSelection, partColoursChoice, embedMode,
 		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 +170,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 +377,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 +390,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)}
@@ -500,20 +499,13 @@ export default function ViewportToolbar() {
 							onClick={() => menu.toggle("shading")}
 						>
 							<RailIcon name="shading" />
-							<span className="vp-label">{autoColor ? ko("Auto Color", "자동 색") : ko("Clay Lit", "클레이 조명")}</span>
+							<span className="vp-label">{ko("Clay Lit", "클레이 조명")}</span>
 						</button>
 						{menu.open === "shading" && (
 							<div className="vp-menu" role="menu" aria-label={ko("Shading", "셰이딩")}>
 								<MenuItem checked={!autoColor} onClick={() => { setAutoColorOn(false); menu.close(); }}>
 									{ko("Clay Lit", "클레이 조명")}
 								</MenuItem>
-								<MenuItem
-									checked={autoColor}
-									title={ko("Flat, distinct colour per object — captures include them while on", "오브젝트별 평면 구분 색 — 켜둔 동안 캡처에도 포함됩니다")}
-									onClick={() => { setAutoColorOn(true); menu.close(); }}
-								>
-									{ko("Auto Color", "자동 색")}
-								</MenuItem>
 							</div>
 						)}
 					</div>
@@ -572,6 +564,19 @@ export default function ViewportToolbar() {
 									<span className="view-menu-mark" aria-hidden="true">{autoColor ? "✓" : ""}</span>
 									{ko("Auto Color", "자동 색")}
 								</button>
+								<button
+									type="button"
+									role="menuitemcheckbox"
+									className={"view-menu-item vp-guide-cycle" + (guideMode === "off" ? "" : " active")}
+									aria-checked={guideMode !== "off"}
+									aria-pressed={guideMode !== "off"}
+									title={ko(GUIDE_LABELS[guideMode].en, GUIDE_LABELS[guideMode].ko) + ko(" · click to cycle", " · 클릭으로 전환")}
+									onClick={() => runStudioAction("view.setGuideMode", { mode: nextGuideMode(guideMode) })}
+								>
+									<span className="view-menu-mark" aria-hidden="true">{guideMode !== "off" ? "✓" : ""}</span>
+									{ko("Composition guides", "구도 가이드")}
+									<small>{ko(GUIDE_LABELS[guideMode].en, GUIDE_LABELS[guideMode].ko)}</small>
+								</button>
 								<button
 									type="button"
 									role="menuitemcheckbox"

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; }
 }