Merge branch 'develop' into feat/repair-game

src/pages/editor/page.tsx

@@ -3,8 +3,11 @@ import { Canvas } from "@react-three/fiber";
 import { useProgress } from "@react-three/drei";
 import { EditorControls } from "@/components/editor/EditorControls";
 import { EditorScene } from "@/components/editor/scene/EditorScene";
+import type { EditorCinematicPreviewRequest } from "@/components/editor/scene/EditorScene";
 import { SceneLoadingOverlay } from "@/components/ui/SceneLoadingOverlay";
+import { Subtitles } from "@/components/ui/Subtitles";
 import { useEditorHistory } from "@/hooks/editor/useEditorHistory";
+import type { CinematicDefinition } from "@/types/cinematics/cinematics";
 import { useEditorSceneData } from "@/hooks/editor/useEditorSceneData";
 import type { MapNode, SceneData, TransformMode } from "@/types/editor/editor";
 import {
@@ -93,6 +96,8 @@ export function EditorPage(): React.JSX.Element {
         status: "loading" as const,
       }
     : sceneLoadingState;
+  const [cinematicPreviewRequest, setCinematicPreviewRequest] =
+    useState<EditorCinematicPreviewRequest | null>(null);
 
   const {
     undoCount,
@@ -153,6 +158,20 @@ export function EditorPage(): React.JSX.Element {
     setIsPlayerMode((prev) => !prev);
   }, []);
 
+  const handlePreviewCinematic = useCallback(
+    (cinematic: CinematicDefinition) => {
+      setCinematicPreviewRequest({
+        id: window.crypto.randomUUID(),
+        cinematic,
+      });
+    },
+    [],
+  );
+
+  const handleCinematicPreviewComplete = useCallback(() => {
+    setCinematicPreviewRequest(null);
+  }, []);
+
   const handleNodeTransform = useCallback(
     (nodeIndex: number, updatedNode: MapNode) => {
       setSceneData((prev) => {
@@ -237,6 +256,8 @@ export function EditorPage(): React.JSX.Element {
             onUndo={handleUndo}
             onRedo={handleRedo}
             isPlayerMode={isPlayerMode}
+            cinematicPreviewRequest={cinematicPreviewRequest}
+            onCinematicPreviewComplete={handleCinematicPreviewComplete}
           />
         </Suspense>
       </Canvas>
@@ -262,9 +283,11 @@ export function EditorPage(): React.JSX.Element {
           onExportJson={handleExportJson}
           onSaveToServer={import.meta.env.DEV ? handleSaveToServer : undefined}
           onPlayerMode={handlePlayerMode}
+          onPreviewCinematic={handlePreviewCinematic}
           isPlayerMode={isPlayerMode}
         />
       )}
+      <Subtitles />
     </div>
   );
 }