cozyclay 2.1.0 → 3.0.0

package/src/shell/DetailsSlot.jsx

@@ -1,7 +1,6 @@
 import { useStudioShell } from "./studio-shell-context.js";
 import { ko } from "../locale.js";
-import { sceneObjectNameDisplayKo, HIERARCHY_INSPECTOR_TITLES, CHARACTER_MODEL_LABELS } from "../app-stage.jsx";
-import { CUTOUT_KIND, EMPTY_KIND, SCULPT_KIND } from "../scene-objects.js";
+import { detailsSelection } from "./details-selection.js";
 import LightPanel from "../panels/LightPanel.jsx";
 import CameraPanel from "../panels/CameraPanel.jsx";
 import SubjectsPanel from "../panels/SubjectsPanel.jsx";
@@ -9,85 +8,32 @@ import CharacterTransformPanel from "../panels/CharacterTransformPanel.jsx";
 import RigPanel from "../panels/RigPanel.jsx";
 import ProxyFigurePanel from "../panels/ProxyFigurePanel.jsx";
 import PosePanel from "../panels/PosePanel.jsx";
-import VideoCapturePanel from "../panels/VideoCapturePanel.jsx";
-import PromptBlocksPanel from "../panels/PromptBlocksPanel.jsx";
 import RigControlPanel from "../panels/RigControlPanel.jsx";
 import PoseImagePanel from "../panels/PoseImagePanel.jsx";
 import EnvironmentPanel from "../panels/EnvironmentPanel.jsx";
 import PropsPanel from "../panels/PropsPanel.jsx";
 import ObjectTransformPanel from "../panels/ObjectTransformPanel.jsx";
-import { ASSET_IMAGE_TYPES } from "../scene-assets.js";
+import ObjectLookPanel from "../panels/ObjectLookPanel.jsx";
 import { PoseStudioPanel } from "../posestudio.jsx";
 import { DEFAULT_POSE } from "../poses.js";
 import "../panels/details.css";
 
-const characterIndexForRow = (rowId, characters) => rowId === "characterA" ? 0
-	: rowId === "characterB" ? 1
-		: characters.findIndex((entry) => `character:${entry.id}` === rowId);
-const characterTitle = (index) => ko(`Character ${index + 1}`, `인물 ${index + 1}`);
-
-/** The 2a selection header: the selected item's name and a "Kind · detail"
- * type line. Null when nothing that owns settings is selected. */
-function detailsSelection({ selectedHierarchyId: id, selectedSceneObject, rigSelection, characters, shot, inspectorHasContent }) {
-	if (!inspectorHasContent) return null;
-	if (selectedSceneObject) {
-		const kind = selectedSceneObject.renderer === CUTOUT_KIND ? ko("Cutout", "컷아웃") : selectedSceneObject.renderer === EMPTY_KIND ? ko("Empty", "빈 오브젝트") : selectedSceneObject.renderer === SCULPT_KIND ? ko("Sculpt", "조형") : ko("Mesh", "메시");
-		return { name: sceneObjectNameDisplayKo(selectedSceneObject.name), type: `${selectedSceneObject.renderer === EMPTY_KIND ? ko("Node", "노드") : ko("Prop", "소품")} · ${kind}` };
-	}
-	if (rigSelection) {
-		const index = characterIndexForRow(rigSelection.rowId, characters);
-		const kind = rigSelection.token === "rig" ? ko("Rig", "리그") : ko("Bone", "본");
-		return { name: HIERARCHY_INSPECTOR_TITLES[rigSelection.token] ?? kind, type: index >= 0 ? `${kind} · ${characterTitle(index)}` : kind };
-	}
-	if (id === "camera") return { name: HIERARCHY_INSPECTOR_TITLES.camera, type: `${ko("Camera", "카메라")} · ${shot.focalMm}mm` };
-	if (id === "characterA" || id === "characterB" || id.startsWith("character:")) {
-		const index = characterIndexForRow(id, characters);
-		const model = CHARACTER_MODEL_LABELS[characters[index]?.model];
-		return { name: characterTitle(Math.max(index, 0)), type: model ? `${ko("Character", "인물")} · ${model}` : ko("Character", "인물") };
-	}
-	const types = {
-		shot: ko("Scene", "장면"),
-		light: ko("Light", "조명"),
-		characters: ko("Folder", "폴더"),
-		environment: ko("Environment", "환경"),
-		props: ko("Folder", "폴더"),
-	};
-	return { name: HIERARCHY_INSPECTOR_TITLES[id] ?? ko("Selection", "선택 항목"), type: types[id] ?? "" };
-}
-
 export default function DetailsSlot() {
 	const {
 		sculptPanel, selectedHierarchyId, sceneSaveError, studioAgentError, embedMode, studioAgentMode,
 		setStudioAgentMode, AgentPanel, setAgentCollapsed, scenes, activeSceneId,
-		buildStudioAgentContext, highlightAgentTargets, generateI2vMotionFromUi, selectedSceneObject, rigSelection,
+		buildStudioAgentContext, highlightAgentTargets, selectedSceneObject, rigSelection,
 		inspectorActionsOpen, setInspectorActionsOpen, runStudioAction, deleteSelectedSceneObject, inspectorHasContent,
-		keyLightSelected, keyLight, isCameraSelection,
+		keyLightSelected, keyLight, lighting, isCameraSelection,
 		shot, moveSequence, cameraKeys, activeShot,
 		isCharacterSelection, showB, characters, openStudio,
 		posing, workflowMode, activeChar,
-		activeCharIndex, i2vMotionModel, i2vMotionActions, setI2vMotionStudioOpen,
+		activeCharIndex,
 		selectablePoses, ikMode, ikApplyPoseAsKey, motion, setStudioPick,
-		appContext, removePose, setPhotoPoseError, photoPoseFileRef, photoPoseState,
-		photoPoseError, activeRig, saveCurrentPose, multiModelStatus, multiModelStage,
-		multiModelFileRef, chooseMultiModelFile, multiModelSource, multiModelUrl, setMultiModelUrl,
-		useMultiModelUrl, pasteMultiModelUrl, multiModelProgress, multiModelError, multiModelFootage,
-		extractMultiModelMotion, multiModelExtract, multiModelTake, multiModelExtractProgress, multiModelExtractError,
-		bridge, promptBlocksReveal, promptClips, selectedPromptId, setSelectedPromptId,
-		setArdyPrompt, setTlFrame, tlFrameCount, ardySeed,
-		changeArdySeed, lineEditMode, toggleLineEditMode, linePreviewUrl, lineCurve,
-		lineDrifted, lineTrack, setLineTrack, linePinMode, setLinePinMode,
-		linePins, lineClipFrames, lineEditRange, setLineRange, lineRadius,
-		changeLineRadius, lineCurveDirty, lineEditFrom, lineEditTo, lineCurvePointCount,
-		lineDriftHint, lineCurveHidden, linePreviewBusy, linePreviewMs, linePreviewError,
-		generationBusy, bridgeChecking, lineReadinessState, runLineEdit, openMotionSetup,
-		recheckMotionHealth, resetLineCurve, exitLineEditMode, readinessState, ardyRunning,
-		cancelArdy, ardyStatus, ardyOutcome, tlFrame,
-		isRigSelection, ikChains, ikFocus, footSnap, poseObjectOpacity, setPoseObjectOpacity, capturePoseImage, collisionCleanupSupported,
-		autoPhysicsRunning, physicsProgress, physicsPreview,
-		physicsShow, physicsOptions, platformFitRunning, platformFitProgress, platformFitLast,
-		platformFitApplied, changePhysicsOptions, runAutoPhysics, showPhysicsPreview, applyPhysicsPreview,
-		cancelPhysicsPreview, ikEditTool, setIkEditTool, showTrails, setShowTrails,
-		trailFalloffS, setTrailFalloffS, trailEdit, trailTrackFocus, selectTrailTrack, clearTrailTrackFocus, runTrailRegeneration, trailReadinessState,
+		appContext, removePose, activeRig, saveCurrentPose,
+		tlFrame,
+		isRigSelection, ikChains, ikFocus, footSnap, poseObjectOpacity, setPoseObjectOpacity, capturePoseImage,
+		ikEditTool, setIkEditTool,
 		pendingIkEdit, applyPendingIkEdit, cancelPendingIkEdit,
 		rangePins, rangePinResiduals, rangePinSelection, rangePinPartPick, rangePinPreview,
 		sceneObjects, setRangePinSelection, setRangePinPartPick, previewRangePinDraft, applyRangePinDraft,
@@ -99,7 +45,7 @@ export default function DetailsSlot() {
 		matteTolerance, setMatteTolerance, matteBrush, setMatteBrush, matteShrink,
 		setMatteShrink, matteFeather, setMatteFeather, matteBusy,
 		autoColor, recentObjectColors, rememberSceneObjectColor, objectColorDraft, setObjectColorDraft,
-		posePhotoFile, posingIndex, posingChar, charA, allPoses,
+		posingIndex, posingChar, charA, allPoses,
 		studioPick, posingClosing, closeStudio, castDomain, setToast,
 		savePose, beginWorkspaceResize,
 	} = useStudioShell();
@@ -164,8 +110,8 @@ export default function DetailsSlot() {
 		{!inspectorHasContent && (
 			<p className="inspector-empty" data-inspector-empty role="status">
 				{ko(
-					"Select something in the hierarchy — the scene, the camera, a character, the environment or a prop — and its settings appear here.",
-					"계층에서 항목을 고르면 — 씨, 카메라, 캐릭터, 환경, 소품 — 그 설정이 여기 나타납니다.",
+					"Select the camera, a character, the light, the environment or a prop in the Outliner, and its settings appear here.",
+					"아웃라이너에서 카메라, 캐릭터, 조명, 환경, 소품을 고르면 그 설정이 여기 나타납니다.",
 				)}
 			</p>
 		)}
@@ -175,7 +121,7 @@ export default function DetailsSlot() {
 
 			{/* Camera animation is authored against the same playhead as motion,
 			    so keep its controls beside the Motion tools as well as Shot setup. */}
-			<LightPanel keyLightSelected={keyLightSelected} keyLight={keyLight} />
+			<LightPanel keyLightSelected={keyLightSelected} keyLight={keyLight} lighting={lighting} />
 			{/* Lens, Recenter and Record used to live here as well as in the
 			    viewport camera bar and the topbar Export menu. One home each
 			    (#193, R1): framing is the bar's job, delivery is Export's, and
@@ -218,9 +164,6 @@ export default function DetailsSlot() {
 		<PosePanel
 			isCharacterSelection={isCharacterSelection}
 			activeCharIndex={activeCharIndex}
-			i2vMotionModel={i2vMotionModel}
-			i2vMotionActions={i2vMotionActions}
-			setI2vMotionStudioOpen={setI2vMotionStudioOpen}
 			selectablePoses={selectablePoses}
 			activeChar={activeChar}
 			ikMode={ikMode}
@@ -229,87 +172,10 @@ export default function DetailsSlot() {
 			setStudioPick={setStudioPick}
 			setToast={appContext.notify}
 			removePose={removePose}
-			setPhotoPoseError={setPhotoPoseError}
-			photoPoseFileRef={photoPoseFileRef}
-			photoPoseState={photoPoseState}
-			photoPoseError={photoPoseError}
 			activeRig={activeRig}
 			saveCurrentPose={saveCurrentPose}
 		/>
 
-		<VideoCapturePanel
-			isCharacterSelection={isCharacterSelection}
-			multiModelStatus={multiModelStatus}
-			multiModelStage={multiModelStage}
-			multiModelFileRef={multiModelFileRef}
-			chooseMultiModelFile={chooseMultiModelFile}
-			multiModelSource={multiModelSource}
-			multiModelUrl={multiModelUrl}
-			setMultiModelUrl={setMultiModelUrl}
-			useMultiModelUrl={useMultiModelUrl}
-			pasteMultiModelUrl={pasteMultiModelUrl}
-			multiModelProgress={multiModelProgress}
-			multiModelError={multiModelError}
-			multiModelFootage={multiModelFootage}
-			extractMultiModelMotion={extractMultiModelMotion}
-			multiModelExtract={multiModelExtract}
-			multiModelTake={multiModelTake}
-			multiModelExtractProgress={multiModelExtractProgress}
-			multiModelExtractError={multiModelExtractError}
-			activeChar={activeChar}
-			bridge={bridge}
-		/>
-		<PromptBlocksPanel
-			isCharacterSelection={isCharacterSelection}
-			promptBlocksReveal={promptBlocksReveal}
-			promptClips={promptClips}
-			selectedPromptId={selectedPromptId}
-			setSelectedPromptId={setSelectedPromptId}
-			setArdyPrompt={setArdyPrompt}
-			setTlFrame={setTlFrame}
-			tlFrameCount={tlFrameCount}
-			ardySeed={ardySeed}
-			changeArdySeed={changeArdySeed}
-			motion={motion}
-			lineEditMode={lineEditMode}
-			toggleLineEditMode={toggleLineEditMode}
-			linePreviewUrl={linePreviewUrl}
-			lineCurve={lineCurve}
-			lineDrifted={lineDrifted}
-			lineTrack={lineTrack}
-			setLineTrack={setLineTrack}
-			linePinMode={linePinMode}
-			setLinePinMode={setLinePinMode}
-			linePins={linePins}
-			lineClipFrames={lineClipFrames}
-			lineEditRange={lineEditRange}
-			setLineRange={setLineRange}
-			lineRadius={lineRadius}
-			changeLineRadius={changeLineRadius}
-			lineCurveDirty={lineCurveDirty}
-			lineEditFrom={lineEditFrom}
-			lineEditTo={lineEditTo}
-			lineCurvePointCount={lineCurvePointCount}
-			lineDriftHint={lineDriftHint}
-			lineCurveHidden={lineCurveHidden}
-			linePreviewBusy={linePreviewBusy}
-			linePreviewMs={linePreviewMs}
-			linePreviewError={linePreviewError}
-			generationBusy={generationBusy}
-			bridgeChecking={bridgeChecking}
-			bridge={bridge}
-			lineReadinessState={lineReadinessState}
-			runLineEdit={runLineEdit}
-			openMotionSetup={openMotionSetup}
-			recheckMotionHealth={recheckMotionHealth}
-			resetLineCurve={resetLineCurve}
-			exitLineEditMode={exitLineEditMode}
-			readinessState={readinessState}
-			ardyRunning={ardyRunning}
-			cancelArdy={cancelArdy}
-			ardyStatus={ardyStatus}
-			ardyOutcome={ardyOutcome}
-		/>
 
 			<RigControlPanel
 				isRigSelection={isRigSelection}
@@ -320,44 +186,14 @@ export default function DetailsSlot() {
 				poseObjectOpacity={poseObjectOpacity}
 				setPoseObjectOpacity={setPoseObjectOpacity}
 				ikMode={ikMode}
-				collisionCleanupSupported={collisionCleanupSupported}
 				motion={motion}
-				autoPhysicsRunning={autoPhysicsRunning}
-				physicsProgress={physicsProgress}
-				physicsPreview={physicsPreview}
-				physicsShow={physicsShow}
-				physicsOptions={physicsOptions}
-				platformFitRunning={platformFitRunning}
-				platformFitProgress={platformFitProgress}
-				platformFitLast={platformFitLast}
-				platformFitApplied={platformFitApplied}
 				tlFrame={tlFrame}
-				changePhysicsOptions={changePhysicsOptions}
-				runAutoPhysics={runAutoPhysics}
-				showPhysicsPreview={showPhysicsPreview}
-				applyPhysicsPreview={applyPhysicsPreview}
-				cancelPhysicsPreview={cancelPhysicsPreview}
-				setTlFrame={setTlFrame}
 				ikEditTool={ikEditTool}
 				setIkEditTool={setIkEditTool}
-				showTrails={showTrails}
-				setShowTrails={setShowTrails}
-				trailFalloffS={trailFalloffS}
-				setTrailFalloffS={setTrailFalloffS}
-				trailEdit={trailEdit}
-				trailTrackFocus={trailTrackFocus}
-				selectTrailTrack={selectTrailTrack}
-				clearTrailTrackFocus={clearTrailTrackFocus}
+				
 				pendingIkEdit={pendingIkEdit}
 				applyPendingIkEdit={applyPendingIkEdit}
 				cancelPendingIkEdit={cancelPendingIkEdit}
-				generationBusy={generationBusy}
-				bridgeChecking={bridgeChecking}
-				bridge={bridge}
-				runTrailRegeneration={runTrailRegeneration}
-				trailReadinessState={trailReadinessState}
-				openMotionSetup={openMotionSetup}
-				recheckMotionHealth={recheckMotionHealth}
 				rangePins={rangePins}
 				rangePinResiduals={rangePinResiduals}
 				rangePinSelection={rangePinSelection}
@@ -419,6 +255,7 @@ export default function DetailsSlot() {
 			objectColorDraft={objectColorDraft}
 			setObjectColorDraft={setObjectColorDraft}
 		/>
+		<ObjectLookPanel />
 		</>)}
 			</div>
 			{selectedSceneObject && (
@@ -465,23 +302,8 @@ export default function DetailsSlot() {
 				</button>
 				<AgentPanel embedded hidden={!studioAgentMode} surface="studio" defaultCollapsed onCollapsedChange={setAgentCollapsed}
 					sceneName={scenes.find((entry) => entry.id === activeSceneId)?.name ?? ko("Untitled Scene", "제목 없는 씬")}
-					buildContext={buildStudioAgentContext} onReceipt={highlightAgentTargets}
-					onI2vAction={(instruction) => void generateI2vMotionFromUi(instruction)} />
+					buildContext={buildStudioAgentContext} onReceipt={highlightAgentTargets} />
 			</div>}
-			{/* The reference-photo picker sits outside the panel so re-mounting
-			    the studio cannot cancel an in-flight read. */}
-			<input
-				ref={photoPoseFileRef}
-				className="multimodel-file-input"
-				type="file"
-				accept={ASSET_IMAGE_TYPES.join(",")}
-				data-pose-photo-input
-				onChange={(event) => {
-					const file = event.target.files?.[0];
-					event.target.value = ""; // the same photo must be re-pickable after an error
-					if (file) posePhotoFile(file);
-				}}
-			/>
 			{/* Pose Studio docks under the inspector instead of floating over
 			    the shot: the viewport keeps the posed character unobstructed. */}
 			{posing && (
@@ -518,12 +340,6 @@ export default function DetailsSlot() {
 						setToast(ko("Back to the default pose", "기본 포즈로 돌아왔어요"));
 					}}
 					onSave={savePose}
-					onPhoto={() => {
-						setPhotoPoseError("");
-						photoPoseFileRef.current?.click();
-					}}
-					photoState={photoPoseState}
-					photoError={photoPoseError}
 					onDelete={removePose}
 					onClose={closeStudio}
 				/>

package/src/shell/GhostsMenuGroup.jsx

@@ -0,0 +1,74 @@
+// The View menu's Ghosts group: onion skin on or off, every N frames or at the key frames, and
+// how many on each side. Every control runs view.setGhosts, the agent's door to the same setting.
+// The last item shows or hides the agent's draft ghost (draft-ghost.js), a viewer-only setting.
+import { useStudioShell } from "./studio-shell-context.js";
+import { ko } from "../locale.js";
+import { GHOST_COLORS, GHOST_COUNT, GHOST_STEP, useGhostSettings } from "../view-ghosts.js";
+import { DRAFT_GHOST_COLOR, setDraftGhostShown, useDraftGhostShown } from "../draft-ghost.js";
+import "./ghosts-menu.css";
+
+function Stepper({ label, value, range, disabled, onChange, testId }) {
+	return (
+		<div className={"view-menu-item ghost-stepper" + (disabled ? " disabled" : "")} data-testid={testId}>
+			<span className="view-menu-mark" aria-hidden="true" />
+			<span className="ghost-stepper-label">{label}</span>
+			<button type="button" role="menuitem" aria-label={`${label} −`} disabled={disabled || value <= range.min} onClick={() => onChange(value - 1)}>−</button>
+			<output className="ghost-stepper-value">{value}</output>
+			<button type="button" role="menuitem" aria-label={`${label} +`} disabled={disabled || value >= range.max} onClick={() => onChange(value + 1)}>+</button>
+		</div>
+	);
+}
+
+export default function GhostsMenuGroup() {
+	const { runStudioAction } = useStudioShell();
+	const ghosts = useGhostSettings();
+	const drafts = useDraftGhostShown();
+	const set = (patch) => runStudioAction("view.setGhosts", { mode: ghosts.mode, count: ghosts.count, step: ghosts.step, ...patch });
+	const options = [
+		{ value: "off", label: ko("Off", "끔") },
+		{ value: "step", label: ko(`Every ${ghosts.step} frames`, `${ghosts.step}프레임마다`) },
+		{ value: "keys", label: ko("Key frames", "키 프레임") },
+	];
+	return (
+		<div className="view-menu-group ghosts-menu" role="group" aria-label={ko("Ghosts (onion skin)", "고스트 (어니언 스킨)")}>
+			<span className="view-menu-label" aria-hidden="true">
+				{ko("Ghosts", "고스트")}
+				<i className="ghost-swatch" style={{ background: GHOST_COLORS.before }} title={ko("before the playhead", "재생 헤드 앞")} />
+				<i className="ghost-swatch" style={{ background: GHOST_COLORS.after }} title={ko("after the playhead", "재생 헤드 뒤")} />
+			</span>
+			{options.map((option) => {
+				const checked = option.value === ghosts.mode;
+				return (
+					<button
+						type="button"
+						key={option.value}
+						role="menuitemradio"
+						className={"view-menu-item ghost-mode-option" + (checked ? " active" : "")}
+						data-ghosts={option.value}
+						aria-checked={checked}
+						title={ko("Translucent poses of the selected character's take before and after the playhead; never in exports", "선택한 캐릭터 테이크의 앞뒤 포즈를 반투명하게 표시합니다. 내보내기에는 나오지 않습니다")}
+						onClick={() => set({ mode: option.value })}
+					>
+						<span className="view-menu-mark" aria-hidden="true">{checked ? "✓" : ""}</span>
+						{option.label}
+					</button>
+				);
+			})}
+			<Stepper label={ko("Each side", "양쪽 개수")} value={ghosts.count} range={GHOST_COUNT} disabled={ghosts.mode === "off"} onChange={(count) => set({ count })} testId="ghost-count" />
+			<Stepper label={ko("Step", "간격")} value={ghosts.step} range={GHOST_STEP} disabled={ghosts.mode !== "step"} onChange={(step) => set({ step })} testId="ghost-step" />
+			<button
+				type="button"
+				role="menuitemcheckbox"
+				className={"view-menu-item draft-ghost-option" + (drafts ? " active" : "")}
+				data-testid="draft-ghost-toggle"
+				aria-checked={drafts}
+				title={ko("While the agent works, its latest motion draft plays on the character as a teal figure; never in exports", "에이전트가 작업하는 동안 최신 모션 초안을 캐릭터 위에 청록색으로 재생합니다. 내보내기에는 나오지 않습니다")}
+				onClick={() => setDraftGhostShown(!drafts)}
+			>
+				<span className="view-menu-mark" aria-hidden="true">{drafts ? "✓" : ""}</span>
+				{ko("Agent draft", "에이전트 초안")}
+				<i className="ghost-swatch" style={{ background: DRAFT_GHOST_COLOR, marginLeft: "auto" }} aria-hidden="true" />
+			</button>
+		</div>
+	);
+}

package/src/shell/LibrarySlot.jsx

@@ -28,7 +28,7 @@ export default function LibrarySlot({ active = true }) {
 		setBottomTab, beginAssetDrag, shelfImageIds, shelfMeshIds,
 		manageAssetStorage, setManageAssetStorage, unusedAssetIds, usedAssetIds, usageCounts,
 		projectAssetGraphSignature, assetTrash, deleteUnusedAsset, undoDeletedAsset, deletingAssetId,
-		projectManifest, takeVersions, loadTakeVersion, shots, selectTimelineShot, allPoses,
+		projectManifest, shots, selectTimelineShot, allPoses,
 		spawnCharacter, addSceneObject, runStudioAction,
 	} = useStudioShell();
 	const [collapsed, setCollapsed] = useState(readContentCollapsed);
@@ -70,10 +70,8 @@ export default function LibrarySlot({ active = true }) {
 				deletingAssetId={deletingAssetId}
 				resourceManifest={projectManifest}
 				shots={shots}
-				takeVersions={takeVersions}
 				poses={allPoses}
 				onShotOpen={selectTimelineShot}
-				onTakeOpen={loadTakeVersion}
 				collapsed={collapsed}
 				onCollapsedChange={(next) => {
 					setCollapsed(next);

package/src/shell/MenuBar.jsx

@@ -74,7 +74,7 @@ function useFirstItemFocus(ref, box, autoFocus, onAutoFocused) {
 /** One portaled menu. Outside presses, Escape and window resizes dismiss it;
  * arrow keys walk its items. `keepOpen` reports a nested flyout that owns
  * Escape first (App closes the Export flyout on the same key). */
-export function MenuPopover({ anchorRef, ignoreRef, onClose, align = "start", label, className = "", keepOpen, onKeyDown, autoFocus, onAutoFocused, children, menuRef: externalRef, ...props }) {
+function MenuPopover({ anchorRef, ignoreRef, onClose, align = "start", label, className = "", keepOpen, onKeyDown, autoFocus, onAutoFocused, children, menuRef: externalRef, ...props }) {
 	const ownRef = useRef(null);
 	const menuRef = externalRef ?? ownRef;
 	const box = usePlacement(anchorRef, menuRef, "below", align, true);
@@ -316,8 +316,8 @@ export default function MenuBar({ preferences }) {
 				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())}
+			{panelItem("export-render-passes", ko("Depth + normal (PNG)", "뎁스 + 노멀 (PNG)"),
+				ko("Depth and normal conditioning plates of the current framing", "현재 프레이밍의 뎁스·노멀 컨디션 플레이트"), () => exportRenderPasses())}
 		</>
 	);