fix: game audio persistence and editor perf

- Keep game/campaign audio assets referenced (no prune)
- Flush pending project save on quit/switch/export to avoid losing campaignAudios
- Control: prevent game music restarts on scene changes; allow always-on controls; handle autoplay-after-scene-audio
- Editor: reduce ReactFlow churn with stable scene card map; lazy/async image decode
- Add contract/unit tests and update test script

Made-with: Cursor

app/renderer/control/ControlApp.tsx

@@ -49,10 +49,18 @@ export function ControlApp() {
   const historyRef = useRef<GraphNodeId[]>([]);
   const suppressNextHistoryPushRef = useRef(false);
   const [history, setHistory] = useState<GraphNodeId[]>([]);
-  const audioElsRef = useRef<Map<string, HTMLAudioElement>>(new Map());
-  const audioMetaRef = useRef<Map<string, { lastPlayError: string | null }>>(new Map());
-  const [audioStateTick, setAudioStateTick] = useState(0);
-  const audioLoadRunRef = useRef(0);
+  const sceneAudioElsRef = useRef<Map<string, HTMLAudioElement>>(new Map());
+  const sceneAudioMetaRef = useRef<Map<string, { lastPlayError: string | null }>>(new Map());
+  const [sceneAudioStateTick, setSceneAudioStateTick] = useState(0);
+  const sceneAudioLoadRunRef = useRef(0);
+
+  const campaignAudioElsRef = useRef<Map<string, HTMLAudioElement>>(new Map());
+  const campaignAudioMetaRef = useRef<Map<string, { lastPlayError: string | null }>>(new Map());
+  const [campaignAudioStateTick, setCampaignAudioStateTick] = useState(0);
+  const campaignAudioLoadRunRef = useRef(0);
+  /** Snapshot of `!el.paused` per assetId when scene music takes over; used to resume when `allowCampaignAudio` is true again. */
+  const campaignResumeAfterSceneRef = useRef<Map<string, boolean> | null>(null);
+  const allowCampaignAudioRef = useRef<boolean>(true);
   const audioUnmountRef = useRef(false);
   const previewHostRef = useRef<HTMLDivElement | null>(null);
   const previewVideoRef = useRef<HTMLVideoElement | null>(null);
@@ -137,6 +145,17 @@ export function ControlApp() {
     project && session?.currentSceneId ? project.scenes[session.currentSceneId] : undefined;
   const isVideoPreviewScene = currentScene?.previewAssetType === 'video';
   const sceneAudioRefs = useMemo(() => currentScene?.media.audios ?? [], [currentScene]);
+  // Keep this memo as narrow as possible: project changes on scene switch,
+  // but campaign audio list/config often does not.
+  const campaignAudioRefs = useMemo(() => project?.campaignAudios ?? [], [project?.campaignAudios]);
+  const allowCampaignAudio = !sceneAudioRefs.some((a) => a.autoplay);
+  allowCampaignAudioRef.current = allowCampaignAudio;
+
+  const campaignAudioSpecKey = useMemo(
+    () =>
+      campaignAudioRefs.map((r) => `${r.assetId}:${r.loop ? '1' : '0'}:${r.autoplay ? '1' : '0'}`).join('|'),
+    [campaignAudioRefs],
+  );
 
   const sceneAudios = useMemo(() => {
     if (!project) return [];
@@ -150,14 +169,26 @@ export function ControlApp() {
       );
   }, [project, sceneAudioRefs]);
 
-  useEffect(() => {
-    audioLoadRunRef.current += 1;
-    const runId = audioLoadRunRef.current;
+  const campaignAudios = useMemo(() => {
+    if (!project) return [];
+    return campaignAudioRefs
+      .map((r) => {
+        const a = project.assets[r.assetId];
+        return a?.type === 'audio' ? { ref: r, asset: a } : null;
+      })
+      .filter((x): x is { ref: (typeof campaignAudioRefs)[number]; asset: NonNullable<typeof x>['asset'] } =>
+        Boolean(x),
+      );
+  }, [campaignAudioRefs, project]);
 
-    const oldEls = new Map(audioElsRef.current);
-    audioElsRef.current = new Map();
-    audioMetaRef.current.clear();
-    setAudioStateTick((x) => x + 1);
+  useEffect(() => {
+    sceneAudioLoadRunRef.current += 1;
+    const runId = sceneAudioLoadRunRef.current;
+
+    const oldEls = new Map(sceneAudioElsRef.current);
+    sceneAudioElsRef.current = new Map();
+    sceneAudioMetaRef.current.clear();
+    setSceneAudioStateTick((x) => x + 1);
 
     const FADE_OUT_MS = 450;
     const fadeOutCtl = { raf: 0, cancelled: false };
@@ -213,24 +244,24 @@ export function ControlApp() {
       const loaded: { ref: (typeof sceneAudioRefs)[number]; el: HTMLAudioElement }[] = [];
       for (const item of sceneAudioRefs) {
         const r = await api.invoke(ipcChannels.project.assetFileUrl, { assetId: item.assetId });
-        if (audioLoadRunRef.current !== runId) return;
+        if (sceneAudioLoadRunRef.current !== runId) return;
         if (!r.url) continue;
         const el = new Audio(r.url);
         el.loop = item.loop;
         el.preload = 'auto';
         el.volume = item.autoplay ? 0 : 1;
-        audioMetaRef.current.set(item.assetId, { lastPlayError: null });
-        el.addEventListener('play', () => setAudioStateTick((x) => x + 1));
-        el.addEventListener('pause', () => setAudioStateTick((x) => x + 1));
-        el.addEventListener('ended', () => setAudioStateTick((x) => x + 1));
-        el.addEventListener('canplay', () => setAudioStateTick((x) => x + 1));
-        el.addEventListener('error', () => setAudioStateTick((x) => x + 1));
+        sceneAudioMetaRef.current.set(item.assetId, { lastPlayError: null });
+        el.addEventListener('play', () => setSceneAudioStateTick((x) => x + 1));
+        el.addEventListener('pause', () => setSceneAudioStateTick((x) => x + 1));
+        el.addEventListener('ended', () => setSceneAudioStateTick((x) => x + 1));
+        el.addEventListener('canplay', () => setSceneAudioStateTick((x) => x + 1));
+        el.addEventListener('error', () => setSceneAudioStateTick((x) => x + 1));
         loaded.push({ ref: item, el });
-        audioElsRef.current.set(item.assetId, el);
+        sceneAudioElsRef.current.set(item.assetId, el);
       }
-      setAudioStateTick((x) => x + 1);
+      setSceneAudioStateTick((x) => x + 1);
       for (const { ref, el } of loaded) {
-        if (audioLoadRunRef.current !== runId) {
+        if (sceneAudioLoadRunRef.current !== runId) {
           try {
             el.pause();
             el.currentTime = 0;
@@ -244,13 +275,13 @@ export function ControlApp() {
         try {
           await el.play();
         } catch {
-          const m = audioMetaRef.current.get(ref.assetId) ?? { lastPlayError: null };
-          audioMetaRef.current.set(ref.assetId, {
+          const m = sceneAudioMetaRef.current.get(ref.assetId) ?? { lastPlayError: null };
+          sceneAudioMetaRef.current.set(ref.assetId, {
             ...m,
             lastPlayError:
               'Автозапуск заблокирован (нужно действие пользователя) или ошибка воспроизведения.',
           });
-          setAudioStateTick((x) => x + 1);
+          setSceneAudioStateTick((x) => x + 1);
           try {
             el.volume = 1;
           } catch {
@@ -258,7 +289,7 @@ export function ControlApp() {
           }
           continue;
         }
-        if (audioLoadRunRef.current !== runId || audioUnmountRef.current) {
+        if (sceneAudioLoadRunRef.current !== runId || audioUnmountRef.current) {
           try {
             el.volume = 1;
           } catch {
@@ -268,7 +299,7 @@ export function ControlApp() {
         }
         const tIn0 = performance.now();
         const tickIn = (now: number): void => {
-          if (audioLoadRunRef.current !== runId || audioUnmountRef.current) {
+          if (sceneAudioLoadRunRef.current !== runId || audioUnmountRef.current) {
             try {
               el.volume = 1;
             } catch {
@@ -294,19 +325,203 @@ export function ControlApp() {
     };
   }, [api, currentScene, project, sceneAudioRefs]);
 
+  // Campaign elements: lifecycle depends only on campaign track list/config, not scene or allowCampaignAudio
+  // (scene music uses allowCampaignAudioRef + separate pause/resume effect).
+  // Spec is encoded in campaignAudioSpecKey; campaignAudioRefs is intentionally omitted to avoid scene-switch churn.
+  useEffect(() => {
+    campaignAudioLoadRunRef.current += 1;
+    const runId = campaignAudioLoadRunRef.current;
+
+    const oldEls = new Map(campaignAudioElsRef.current);
+    campaignAudioElsRef.current = new Map();
+    campaignAudioMetaRef.current.clear();
+    setCampaignAudioStateTick((x) => x + 1);
+
+    for (const el of oldEls.values()) {
+      try {
+        el.pause();
+        el.volume = 1;
+      } catch {
+        // ignore
+      }
+    }
+
+    if (campaignAudioSpecKey === '') {
+      return;
+    }
+
+    void (async () => {
+      const loaded: { ref: (typeof campaignAudioRefs)[number]; el: HTMLAudioElement }[] = [];
+      for (const item of campaignAudioRefs) {
+        const r = await api.invoke(ipcChannels.project.assetFileUrl, { assetId: item.assetId });
+        if (campaignAudioLoadRunRef.current !== runId) return;
+        if (!r.url) continue;
+        const el = new Audio(r.url);
+        el.loop = item.loop;
+        el.preload = 'auto';
+        el.volume = item.autoplay ? 0 : 1;
+        campaignAudioMetaRef.current.set(item.assetId, { lastPlayError: null });
+        el.addEventListener('play', () => setCampaignAudioStateTick((x) => x + 1));
+        el.addEventListener('pause', () => setCampaignAudioStateTick((x) => x + 1));
+        el.addEventListener('ended', () => setCampaignAudioStateTick((x) => x + 1));
+        el.addEventListener('canplay', () => setCampaignAudioStateTick((x) => x + 1));
+        el.addEventListener('error', () => setCampaignAudioStateTick((x) => x + 1));
+        loaded.push({ ref: item, el });
+        campaignAudioElsRef.current.set(item.assetId, el);
+      }
+      setCampaignAudioStateTick((x) => x + 1);
+
+      if (!allowCampaignAudioRef.current) return;
+
+      for (const { ref, el } of loaded) {
+        if (campaignAudioLoadRunRef.current !== runId) return;
+        if (!ref.autoplay) continue;
+        try {
+          await el.play();
+        } catch {
+          const m = campaignAudioMetaRef.current.get(ref.assetId) ?? { lastPlayError: null };
+          campaignAudioMetaRef.current.set(ref.assetId, {
+            ...m,
+            lastPlayError:
+              'Автозапуск заблокирован (нужно действие пользователя) или ошибка воспроизведения.',
+          });
+          setCampaignAudioStateTick((x) => x + 1);
+          try {
+            el.volume = 1;
+          } catch {
+            // ignore
+          }
+          continue;
+        }
+        if (campaignAudioLoadRunRef.current !== runId || audioUnmountRef.current) {
+          try {
+            el.volume = 1;
+          } catch {
+            // ignore
+          }
+          continue;
+        }
+        const tIn0 = performance.now();
+        const tickIn = (now: number): void => {
+          if (campaignAudioLoadRunRef.current !== runId || audioUnmountRef.current) {
+            try {
+              el.volume = 1;
+            } catch {
+              // ignore
+            }
+            return;
+          }
+          const u = Math.min(1, (now - tIn0) / 550);
+          try {
+            el.volume = u;
+          } catch {
+            // ignore
+          }
+          if (u < 1) window.requestAnimationFrame(tickIn);
+        };
+        window.requestAnimationFrame(tickIn);
+      }
+    })();
+    // Deps: api + campaignAudioSpecKey only; list iteration uses current campaignAudioRefs (stable while spec is stable).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [api, campaignAudioSpecKey]);
+
+  useEffect(() => {
+    if (allowCampaignAudio) {
+      const snap = campaignResumeAfterSceneRef.current;
+      campaignResumeAfterSceneRef.current = null;
+      if (snap && snap.size > 0) {
+        void (async () => {
+          for (const [assetId, wasPlaying] of snap) {
+            if (!wasPlaying) continue;
+            const el = campaignAudioElsRef.current.get(assetId) ?? null;
+            if (!el) continue;
+            try {
+              // If a track was created with autoplay volume ramp but never started yet,
+              // ensure it is audible on resume.
+              if (el.volume === 0) el.volume = 1;
+              await el.play();
+            } catch {
+              // ignore; user can press play
+            }
+          }
+          setCampaignAudioStateTick((x) => x + 1);
+        })();
+      }
+      // If we entered a scene that allows campaign audio and there was no "resume snapshot"
+      // (e.g. first scene had autoplay scene music so campaign autoplay was blocked),
+      // start campaign tracks that have autoplay enabled.
+      if (!snap || snap.size === 0) {
+        void (async () => {
+          for (const ref of campaignAudioRefs) {
+            if (!ref.autoplay) continue;
+            const el = campaignAudioElsRef.current.get(ref.assetId) ?? null;
+            if (!el) continue;
+            if (!el.paused) continue;
+            try {
+              el.volume = 0;
+            } catch {
+              // ignore
+            }
+            try {
+              await el.play();
+            } catch {
+              // ignore; user can press play
+              continue;
+            }
+            const tIn0 = performance.now();
+            const tickIn = (now: number): void => {
+              if (!allowCampaignAudioRef.current || audioUnmountRef.current) return;
+              const u = Math.min(1, (now - tIn0) / 550);
+              try {
+                el.volume = u;
+              } catch {
+                // ignore
+              }
+              if (u < 1) window.requestAnimationFrame(tickIn);
+            };
+            window.requestAnimationFrame(tickIn);
+          }
+          setCampaignAudioStateTick((x) => x + 1);
+        })();
+      }
+      return;
+    }
+    // Scene has its own audio: remember what was playing, then pause campaign. (keep currentTime)
+    const snap = new Map<string, boolean>();
+    for (const [assetId, el] of campaignAudioElsRef.current) {
+      snap.set(assetId, !el.paused);
+    }
+    campaignResumeAfterSceneRef.current = snap;
+    for (const el of campaignAudioElsRef.current.values()) {
+      try {
+        el.pause();
+      } catch {
+        // ignore
+      }
+    }
+    setCampaignAudioStateTick((x) => x + 1);
+    // Intentionally not depending on campaignAudioRefs: this effect is about scene-driven pausing/resuming.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowCampaignAudio]);
+
   const anyPlaying = useMemo(() => {
-    for (const el of audioElsRef.current.values()) {
+    for (const el of sceneAudioElsRef.current.values()) {
+      if (!el.paused) return true;
+    }
+    for (const el of campaignAudioElsRef.current.values()) {
       if (!el.paused) return true;
     }
     return false;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [audioStateTick]);
+  }, [campaignAudioStateTick, sceneAudioStateTick]);
 
   useEffect(() => {
     if (!anyPlaying) return;
     let raf = 0;
     const tick = () => {
-      setAudioStateTick((x) => x + 1);
+      setSceneAudioStateTick((x) => x + 1);
+      setCampaignAudioStateTick((x) => x + 1);
       raf = window.requestAnimationFrame(tick);
     };
     raf = window.requestAnimationFrame(tick);
@@ -326,10 +541,16 @@ export function ControlApp() {
     return () => ro.disconnect();
   }, []);
 
-  function audioStatus(assetId: string): { label: string; detail?: string } {
-    const el = audioElsRef.current.get(assetId) ?? null;
+  function audioStatus(group: 'scene' | 'campaign', assetId: string): { label: string; detail?: string } {
+    const el =
+      group === 'scene'
+        ? (sceneAudioElsRef.current.get(assetId) ?? null)
+        : (campaignAudioElsRef.current.get(assetId) ?? null);
     if (!el) return { label: 'URL не получен', detail: 'Не удалось получить dnd://asset URL для аудио.' };
-    const meta = audioMetaRef.current.get(assetId) ?? { lastPlayError: null };
+    const meta =
+      group === 'scene'
+        ? (sceneAudioMetaRef.current.get(assetId) ?? { lastPlayError: null })
+        : (campaignAudioMetaRef.current.get(assetId) ?? { lastPlayError: null });
     if (meta.lastPlayError) return { label: 'Ошибка/блок', detail: meta.lastPlayError };
     if (el.error)
       return {
@@ -1075,13 +1296,16 @@ export function ControlApp() {
             <div className={styles.previewTitle}>Музыка</div>
           </div>
           <div className={styles.spacer10} />
+          <div className={styles.sectionLabel}>МУЗЫКА СЦЕНЫ</div>
+          <div className={styles.spacer10} />
           {sceneAudios.length === 0 ? (
             <div className={styles.musicEmpty}>В текущей сцене нет аудио.</div>
-          ) : (
+          ) : null}
+          {sceneAudios.length > 0 ? (
             <div className={styles.audioList}>
               {sceneAudios.map(({ ref, asset }) => {
-                const el = audioElsRef.current.get(ref.assetId) ?? null;
-                const st = audioStatus(ref.assetId);
+                const el = sceneAudioElsRef.current.get(ref.assetId) ?? null;
+                const st = audioStatus('scene', ref.assetId);
                 const dur = el?.duration && Number.isFinite(el.duration) ? el.duration : 0;
                 const cur = el?.currentTime && Number.isFinite(el.currentTime) ? el.currentTime : 0;
                 const pct = dur > 0 ? Math.max(0, Math.min(1, cur / dur)) : 0;
@@ -1106,7 +1330,7 @@ export function ControlApp() {
                           if (!dur) return;
                           if (e.key === 'ArrowLeft') el.currentTime = Math.max(0, el.currentTime - 5);
                           if (e.key === 'ArrowRight') el.currentTime = Math.min(dur, el.currentTime + 5);
-                          setAudioStateTick((x) => x + 1);
+                          setSceneAudioStateTick((x) => x + 1);
                         }}
                         onClick={(e) => {
                           if (!el) return;
@@ -1114,7 +1338,7 @@ export function ControlApp() {
                           const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
                           const next = (e.clientX - rect.left) / rect.width;
                           el.currentTime = Math.max(0, Math.min(dur, next * dur));
-                          setAudioStateTick((x) => x + 1);
+                          setSceneAudioStateTick((x) => x + 1);
                         }}
                         className={[
                           styles.audioScrub,
@@ -1137,15 +1361,17 @@ export function ControlApp() {
                         variant="primary"
                         onClick={() => {
                           if (!el) return;
-                          const m = audioMetaRef.current.get(ref.assetId) ?? { lastPlayError: null };
-                          audioMetaRef.current.set(ref.assetId, { ...m, lastPlayError: null });
+                          const m = sceneAudioMetaRef.current.get(ref.assetId) ?? { lastPlayError: null };
+                          sceneAudioMetaRef.current.set(ref.assetId, { ...m, lastPlayError: null });
                           void el.play().catch(() => {
-                            const mm = audioMetaRef.current.get(ref.assetId) ?? { lastPlayError: null };
-                            audioMetaRef.current.set(ref.assetId, {
+                            const mm =
+                              sceneAudioMetaRef.current.get(ref.assetId) ??
+                              ({ lastPlayError: null } as const);
+                            sceneAudioMetaRef.current.set(ref.assetId, {
                               ...mm,
                               lastPlayError: 'Не удалось запустить.',
                             });
-                            setAudioStateTick((x) => x + 1);
+                            setSceneAudioStateTick((x) => x + 1);
                           });
                         }}
                       >
@@ -1164,7 +1390,122 @@ export function ControlApp() {
                           if (!el) return;
                           el.pause();
                           el.currentTime = 0;
-                          setAudioStateTick((x) => x + 1);
+                          setSceneAudioStateTick((x) => x + 1);
+                        }}
+                      >
+                        ■
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : null}
+
+          <div className={styles.spacer12} />
+          <div className={styles.sectionLabel}>МУЗЫКА ИГРЫ</div>
+          <div className={styles.spacer10} />
+          {campaignAudios.length === 0 ? (
+            <div className={styles.musicEmpty}>В игре нет аудио.</div>
+          ) : (
+            <div className={styles.audioList}>
+              {campaignAudios.map(({ ref, asset }) => {
+                const el = campaignAudioElsRef.current.get(ref.assetId) ?? null;
+                const st = audioStatus('campaign', ref.assetId);
+                const dur = el?.duration && Number.isFinite(el.duration) ? el.duration : 0;
+                const cur = el?.currentTime && Number.isFinite(el.currentTime) ? el.currentTime : 0;
+                const pct = dur > 0 ? Math.max(0, Math.min(1, cur / dur)) : 0;
+                return (
+                  <div key={ref.assetId} className={styles.audioCard}>
+                    <div className={styles.audioMeta}>
+                      <div className={styles.audioName}>{asset.originalName}</div>
+                      <div className={styles.audioBadges}>
+                        <div>{ref.autoplay ? 'Авто' : 'Ручн.'}</div>
+                        <div>{ref.loop ? 'Цикл' : 'Один раз'}</div>
+                        <div title={st.detail}>{st.label}</div>
+                        {!allowCampaignAudio ? <div title="В сцене есть музыка">Пауза (сцена)</div> : null}
+                      </div>
+                      <div className={styles.spacer10} />
+                      <div
+                        role="slider"
+                        aria-valuemin={0}
+                        aria-valuemax={dur > 0 ? Math.round(dur) : 0}
+                        aria-valuenow={Math.round(cur)}
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                          if (!el) return;
+                          if (!dur) return;
+                          if (e.key === 'ArrowLeft') el.currentTime = Math.max(0, el.currentTime - 5);
+                          if (e.key === 'ArrowRight') el.currentTime = Math.min(dur, el.currentTime + 5);
+                          setCampaignAudioStateTick((x) => x + 1);
+                        }}
+                        onClick={(e) => {
+                          if (!el) return;
+                          if (!dur) return;
+                          const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+                          const next = (e.clientX - rect.left) / rect.width;
+                          el.currentTime = Math.max(0, Math.min(dur, next * dur));
+                          setCampaignAudioStateTick((x) => x + 1);
+                        }}
+                        className={[
+                          styles.audioScrub,
+                          dur > 0 ? styles.audioScrubPointer : styles.audioScrubDefault,
+                        ].join(' ')}
+                        title={dur > 0 ? 'Клик — перемотка' : 'Длительность неизвестна'}
+                      >
+                        <div
+                          className={styles.scrubFill}
+                          style={{ width: `${String(Math.round(pct * 100))}%` }}
+                        />
+                      </div>
+                      <div className={styles.timeRow}>
+                        <div>{formatTime(cur)}</div>
+                        <div>{dur ? formatTime(dur) : '—:—'}</div>
+                      </div>
+                    </div>
+                    <div className={styles.audioTransport}>
+                      <Button
+                        variant="primary"
+                        title={!allowCampaignAudio ? 'Пауза: в сцене есть музыка' : undefined}
+                        onClick={() => {
+                          if (!el) return;
+                          const m = campaignAudioMetaRef.current.get(ref.assetId) ?? { lastPlayError: null };
+                          campaignAudioMetaRef.current.set(ref.assetId, { ...m, lastPlayError: null });
+                          // If this track was created for autoplay but autoplay was blocked (e.g. scene music),
+                          // it might still be at volume 0. Ensure manual play is audible.
+                          try {
+                            if (el.volume === 0) el.volume = 1;
+                          } catch {
+                            // ignore
+                          }
+                          void el.play().catch(() => {
+                            const mm =
+                              campaignAudioMetaRef.current.get(ref.assetId) ??
+                              ({ lastPlayError: null } as const);
+                            campaignAudioMetaRef.current.set(ref.assetId, {
+                              ...mm,
+                              lastPlayError: 'Не удалось запустить.',
+                            });
+                            setCampaignAudioStateTick((x) => x + 1);
+                          });
+                        }}
+                      >
+                        ▶
+                      </Button>
+                      <Button
+                        onClick={() => {
+                          if (!el) return;
+                          el.pause();
+                        }}
+                      >
+                        ❚❚
+                      </Button>
+                      <Button
+                        onClick={() => {
+                          if (!el) return;
+                          el.pause();
+                          el.currentTime = 0;
+                          setCampaignAudioStateTick((x) => x + 1);
                         }}
                       >
                         ■

app/renderer/control/controlApp.effectsPanel.test.ts

@@ -94,3 +94,38 @@ void test('ControlApp: радиус кисти не в блоке предпро
     'Слайдер радиуса должен быть в пульте (файл: выше заголовка предпросмотра)',
   );
 });
+
+void test('ControlApp: музыка разделена на сцену и кампанию', () => {
+  const src = readControlApp();
+  assert.ok(src.includes('МУЗЫКА СЦЕНЫ'));
+  assert.ok(src.includes('МУЗЫКА ИГРЫ'));
+  // при музыке сцены — кампанию ставим на паузу
+  assert.ok(src.includes('allowCampaignAudio'));
+  assert.ok(
+    src.includes('campaignAudioSpecKey'),
+    'кампания: перезагрузка аудио привязана к списку треков, не к смене сцены',
+  );
+  assert.match(src, /pause campaign\./i);
+});
+
+void test('ControlApp: загрузка камп. аудио — useEffect зависит только от api и campaignAudioSpecKey', () => {
+  const src = readControlApp();
+  const re = /\/\/ Campaign elements:[\s\S]*?useEffect\(\(\) => \{[\s\S]*?\}\s*,\s*\[([^\]]*)\]\s*\)\s*;/;
+  const m = re.exec(src);
+  assert.ok(m, 'ожидается useEffect загрузки кампании после комментария Campaign elements');
+  const depList = m[1];
+  assert.ok(depList !== undefined);
+  const deps = depList
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  assert.deepEqual(
+    deps,
+    ['api', 'campaignAudioSpecKey'],
+    'смена сцены / allowCampaignAudio / campaignAudioRefs не должны перезапускать загрузку кампании',
+  );
+  assert.ok(!/\ballowCampaignAudio\b/.test(depList));
+  assert.ok(!/\bcurrentScene\b/.test(depList));
+  assert.ok(!/\bproject\b/.test(depList));
+  assert.ok(!/\bcampaignAudioRefs\b/.test(depList));
+});

app/renderer/editor/EditorApp.module.css

@@ -100,6 +100,10 @@
   height: 14px;
 }
 
+.spacer18 {
+  height: 18px;
+}
+
 .sidebarScroll {
   overflow: auto;
   padding-right: 2px;
@@ -408,7 +412,7 @@
   overflow: hidden;
   background: var(--color-overlay-dark-3);
   aspect-ratio: 16 / 9;
-  max-height: 140px;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;

app/renderer/editor/EditorApp.tsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 import { ipcChannels } from '../../shared/ipc/contracts';
 import { EULA_CURRENT_VERSION } from '../../shared/license/eulaVersion';
 import type { LicenseSnapshot } from '../../shared/license/licenseSnapshot';
-import type { AssetId, MediaAsset, ProjectId, SceneAudioRef, SceneId } from '../../shared/types';
+import type { AssetId, MediaAsset, Project, ProjectId, SceneAudioRef, SceneId } from '../../shared/types';
 import { AppLogo } from '../shared/branding/AppLogo';
 import { getDndApi } from '../shared/dndApi';
 import { RotatedImage } from '../shared/RotatedImage';
@@ -13,7 +13,8 @@ import { LayoutShell } from '../shared/ui/LayoutShell';
 import { useAssetUrl } from '../shared/useAssetImageUrl';
 
 import styles from './EditorApp.module.css';
-import { DND_SCENE_ID_MIME, SceneGraph } from './graph/SceneGraph';
+import { buildNextSceneCardById } from './graph/sceneCardById';
+import { DND_SCENE_ID_MIME, SceneGraph, type SceneGraphSceneCard } from './graph/SceneGraph';
 import { EulaModal, LicenseAboutModal, LicenseTokenModal } from './license/EditorLicenseModals';
 import { useProjectState } from './state/projectState';
 
@@ -27,6 +28,33 @@ type SceneCard = {
   previewRotationDeg: 0 | 90 | 180 | 270;
 };
 
+/** Лёгкая карта сцен для графа: стабильные ссылки на объекты, пока не меняются поля карточки. */
+function useStableSceneCardById(project: Project | null): Record<SceneId, SceneGraphSceneCard> {
+  const recordRef = useRef<Record<SceneId, SceneGraphSceneCard>>({});
+  const projectIdRef = useRef<ProjectId | null>(null);
+
+  /* Ref cache: avoid new Record / per-scene object identities when only irrelevant Scene fields change
+   * (e.g. description). react-hooks/refs disallows ref access during render; this is intentional. */
+  /* eslint-disable react-hooks/refs -- stable graph input identity */
+  return useMemo(() => {
+    if (!project) {
+      recordRef.current = {};
+      projectIdRef.current = null;
+      return {};
+    }
+    if (projectIdRef.current !== project.id) {
+      recordRef.current = {};
+      projectIdRef.current = project.id;
+    }
+
+    const prevRecord = recordRef.current;
+    const nextMap = buildNextSceneCardById(prevRecord, project);
+    recordRef.current = nextMap;
+    return nextMap;
+  }, [project]);
+  /* eslint-enable react-hooks/refs */
+}
+
 export function EditorApp() {
   const [appVersionText, setAppVersionText] = useState<string | null>(null);
   const [query, setQuery] = useState('');
@@ -42,6 +70,7 @@ export function EditorApp() {
   const [openKeyAfterEula, setOpenKeyAfterEula] = useState(false);
   const licenseActive = licenseSnap?.active === true;
   const [state, actions] = useProjectState(licenseActive);
+  const sceneCardById = useStableSceneCardById(state.project);
   const fileMenuBtnRef = useRef<HTMLButtonElement | null>(null);
   const projectMenuBtnRef = useRef<HTMLButtonElement | null>(null);
   const settingsMenuBtnRef = useRef<HTMLButtonElement | null>(null);
@@ -51,15 +80,23 @@ export function EditorApp() {
   const scenes = useMemo<SceneCard[]>(() => {
     const p = state.project;
     if (!p) return [];
-    return Object.values(p.scenes).map((s) => ({
-      id: s.id,
-      title: s.title,
-      active: s.id === state.selectedSceneId,
-      previewAssetId: s.previewAssetId,
-      previewAssetType: s.previewAssetType,
-      previewVideoAutostart: s.previewVideoAutostart,
-      previewRotationDeg: s.previewRotationDeg,
-    }));
+    const createdAtSortKey = (sceneId: string): number => {
+      // sceneId создаётся как `${prefix}_${rand}_${Date.now().toString(16)}`
+      const last = sceneId.split('_').at(-1) ?? '';
+      const n = Number.parseInt(last, 16);
+      return Number.isFinite(n) ? n : 0;
+    };
+    return Object.values(p.scenes)
+      .map((s) => ({
+        id: s.id,
+        title: s.title,
+        active: s.id === state.selectedSceneId,
+        previewAssetId: s.previewAssetId,
+        previewAssetType: s.previewAssetType,
+        previewVideoAutostart: s.previewVideoAutostart,
+        previewRotationDeg: s.previewRotationDeg,
+      }))
+      .sort((a, b) => createdAtSortKey(b.id) - createdAtSortKey(a.id));
   }, [state.project, state.selectedSceneId]);
 
   const filtered = useMemo(
@@ -86,6 +123,16 @@ export function EditorApp() {
     return scene.media.audios;
   }, [state.project, state.selectedSceneId]);
 
+  const campaignAudioRefs = useMemo<SceneAudioRef[]>(() => {
+    return state.project?.campaignAudios ?? [];
+  }, [state.project]);
+
+  const campaignAudioAssets = useMemo<MediaAsset[]>(() => {
+    const p = state.project;
+    if (!p) return [];
+    return campaignAudioRefs.map((r) => p.assets[r.assetId]).filter((a): a is MediaAsset => Boolean(a));
+  }, [campaignAudioRefs, state.project]);
+
   const graphStartSceneId = useMemo(() => {
     const p = state.project;
     if (!p) return null;
@@ -354,7 +401,7 @@ export function EditorApp() {
               <SceneGraph
                 sceneGraphNodes={state.project.sceneGraphNodes}
                 sceneGraphEdges={state.project.sceneGraphEdges}
-                sceneById={state.project.scenes}
+                sceneCardById={sceneCardById}
                 currentSceneId={state.selectedSceneId}
                 onCurrentSceneChange={(id) => void actions.selectScene(id)}
                 onConnect={(sourceGn, targetGn) => void actions.addSceneGraphEdge(sourceGn, targetGn)}
@@ -376,40 +423,66 @@ export function EditorApp() {
         }
         right={
           <div className={styles.editorInspector}>
-            <div className={styles.inspectorTitle}>Свойства сцены</div>
             <div className={styles.inspectorScroll}>
-              {state.project && state.selectedSceneId ? (
-                (() => {
-                  const proj = state.project;
-                  const sid = state.selectedSceneId;
-                  const sc = proj.scenes[sid];
-                  return (
-                    <SceneInspector
-                      title={sc?.title ?? ''}
-                      description={sc?.description ?? ''}
-                      previewAssetId={sc?.previewAssetId ?? null}
-                      previewAssetType={sc?.previewAssetType ?? null}
-                      previewVideoAutostart={sc?.previewVideoAutostart ?? false}
-                      previewRotationDeg={sc?.previewRotationDeg ?? 0}
-                      mediaAssets={sceneMediaAssets}
-                      audioRefs={sceneAudioRefs}
-                      onAudioRefsChange={(next) => void actions.updateScene(sid, { media: { audios: next } })}
-                      onPreviewVideoAutostartChange={(next) =>
-                        void actions.updateScene(sid, { previewVideoAutostart: next })
-                      }
-                      onTitleChange={(title) => void actions.updateScene(sid, { title })}
-                      onDescriptionChange={(description) => void actions.updateScene(sid, { description })}
-                      onImportPreview={() => void actions.importScenePreview(sid)}
-                      onClearPreview={() => void actions.clearScenePreview(sid)}
-                      onRotatePreview={(previewRotationDeg) =>
-                        void actions.updateScene(sid, { previewRotationDeg })
-                      }
-                      onUploadMedia={() => void actions.importMediaToScene(sid)}
-                    />
-                  );
-                })()
+              {state.project ? (
+                <>
+                  <div className={styles.inspectorTitle}>Свойства игры</div>
+                  <CampaignInspector
+                    audioRefs={campaignAudioRefs}
+                    mediaAssets={campaignAudioAssets}
+                    onAudioRefsChange={(next) => void actions.updateCampaignAudios(next)}
+                    onUploadAudio={() => {
+                      void (async () => {
+                        try {
+                          await actions.importCampaignAudio();
+                        } catch (e) {
+                          window.alert(e instanceof Error ? e.message : String(e));
+                        }
+                      })();
+                    }}
+                  />
+                  <div className={styles.spacer18} />
+                  <div className={styles.inspectorTitle}>Свойства сцены</div>
+                  {state.selectedSceneId ? (
+                    (() => {
+                      const proj = state.project;
+                      const sid = state.selectedSceneId;
+                      const sc = proj.scenes[sid];
+                      return (
+                        <SceneInspector
+                          title={sc?.title ?? ''}
+                          description={sc?.description ?? ''}
+                          previewAssetId={sc?.previewAssetId ?? null}
+                          previewAssetType={sc?.previewAssetType ?? null}
+                          previewVideoAutostart={sc?.previewVideoAutostart ?? false}
+                          previewRotationDeg={sc?.previewRotationDeg ?? 0}
+                          mediaAssets={sceneMediaAssets}
+                          audioRefs={sceneAudioRefs}
+                          onAudioRefsChange={(next) =>
+                            void actions.updateScene(sid, { media: { audios: next } })
+                          }
+                          onPreviewVideoAutostartChange={(next) =>
+                            void actions.updateScene(sid, { previewVideoAutostart: next })
+                          }
+                          onTitleChange={(title) => void actions.updateScene(sid, { title })}
+                          onDescriptionChange={(description) =>
+                            void actions.updateScene(sid, { description })
+                          }
+                          onImportPreview={() => void actions.importScenePreview(sid)}
+                          onClearPreview={() => void actions.clearScenePreview(sid)}
+                          onRotatePreview={(previewRotationDeg) =>
+                            void actions.updateScene(sid, { previewRotationDeg })
+                          }
+                          onUploadMedia={() => void actions.importMediaToScene(sid)}
+                        />
+                      );
+                    })()
+                  ) : (
+                    <div className={styles.muted}>Выберите сцену слева, чтобы редактировать её свойства.</div>
+                  )}
+                </>
               ) : (
-                <div className={styles.muted}>Откройте проект, чтобы редактировать сцену.</div>
+                <div className={styles.muted}>Откройте проект, чтобы редактировать кампанию и сцены.</div>
               )}
             </div>
           </div>
@@ -955,6 +1028,92 @@ type SceneInspectorProps = {
   onUploadMedia: () => void;
 };
 
+type CampaignInspectorProps = {
+  mediaAssets: MediaAsset[];
+  audioRefs: SceneAudioRef[];
+  onAudioRefsChange: (next: SceneAudioRef[]) => void;
+  onUploadAudio: () => void;
+};
+
+function CampaignInspector({
+  mediaAssets,
+  audioRefs,
+  onAudioRefsChange,
+  onUploadAudio,
+}: CampaignInspectorProps) {
+  const audioById = useMemo(() => new Map(audioRefs.map((a) => [a.assetId, a])), [audioRefs]);
+  return (
+    <div className={styles.sceneInspector}>
+      <div className={styles.labelSm}>АУДИО ИГРЫ</div>
+      <div className={styles.audioDrop}>
+        {mediaAssets.filter((a) => a.type === 'audio').length === 0 ? (
+          <div className={[styles.muted, styles.spanSm].join(' ')}>Файлов пока нет. Добавьте аудио.</div>
+        ) : (
+          <div className={styles.audioList}>
+            {mediaAssets
+              .filter((a) => a.type === 'audio')
+              .map((a) => (
+                <div key={a.id} className={styles.audioRow}>
+                  <span className={styles.audioName}>{a.originalName}</span>
+                  <span className={styles.audioControls}>
+                    <label className={styles.checkboxLabelSm}>
+                      <input
+                        type="checkbox"
+                        checked={audioById.get(a.id)?.autoplay ?? false}
+                        onChange={(e) => {
+                          const next = audioRefs.map((x) =>
+                            x.assetId === a.id ? { ...x, autoplay: e.target.checked } : x,
+                          );
+                          onAudioRefsChange(next);
+                        }}
+                      />
+                      <span className={styles.spanXs}>Авто</span>
+                    </label>
+                    <label className={styles.checkboxLabelSm}>
+                      <input
+                        type="checkbox"
+                        checked={audioById.get(a.id)?.loop ?? false}
+                        onChange={(e) => {
+                          const next = audioRefs.map((x) =>
+                            x.assetId === a.id ? { ...x, loop: e.target.checked } : x,
+                          );
+                          onAudioRefsChange(next);
+                        }}
+                      />
+                      <span className={styles.spanXs}>Цикл</span>
+                    </label>
+                    <button
+                      type="button"
+                      title="Убрать из кампании"
+                      className={styles.audioRemove}
+                      onClick={() => {
+                        onAudioRefsChange(audioRefs.filter((x) => x.assetId !== a.id));
+                      }}
+                    >
+                      <svg
+                        className={styles.audioRemoveIcon}
+                        viewBox="0 0 24 24"
+                        width={16}
+                        height={16}
+                        aria-hidden
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M9 3h6a1 1 0 0 1 1 1v1h4v2H4V5h4V4a1 1 0 0 1 1-1zm1 5h2v9h-2V8zm4 0h2v9h-2V8zM7 8h2v9H7V8zm9-3H8v1h8V5zM6 21a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6v13z"
+                        />
+                      </svg>
+                    </button>
+                  </span>
+                </div>
+              ))}
+          </div>
+        )}
+        <Button onClick={onUploadAudio}>Загрузить</Button>
+      </div>
+    </div>
+  );
+}
+
 function SceneInspector({
   title,
   description,
@@ -988,7 +1147,7 @@ function SceneInspector({
       />
       <div className={styles.spacer6} />
       <div className={styles.labelSm}>ПРЕВЬЮ СЦЕНЫ</div>
-      <div className={styles.hint}>Отдельный файл изображения (PNG, JPG, WebP, GIF и т.д.).</div>
+      <div className={styles.hint}>Файл изображения (PNG, JPG, WebP, GIF и т.д.).</div>
       <div className={styles.previewBox}>
         {previewUrl && previewAssetType === 'image' ? (
           <RotatedImage url={previewUrl} rotationDeg={previewRotationDeg} mode="cover" />
@@ -1159,7 +1318,13 @@ function SceneListCard({ scene, onSelect, onDeleteScene }: SceneListCardProps) {
       <div className={url ? styles.sceneThumb : styles.sceneThumbEmpty}>
         {url && scene.previewAssetType === 'image' ? (
           <div className={styles.sceneThumbInner}>
-            <RotatedImage url={url} rotationDeg={scene.previewRotationDeg} mode="cover" />
+            <RotatedImage
+              url={url}
+              rotationDeg={scene.previewRotationDeg}
+              mode="cover"
+              loading="lazy"
+              decoding="async"
+            />
           </div>
         ) : url && scene.previewAssetType === 'video' ? (
           <div className={styles.sceneThumbInner}>

app/renderer/editor/graph/SceneGraph.tsx

@@ -19,19 +19,29 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 
 import { isSceneGraphEdgeRejected } from '../../../shared/graph/sceneGraphEdgeRules';
-import type {
-  AssetId,
-  GraphNodeId,
-  Scene,
-  SceneGraphEdge,
-  SceneGraphNode,
-  SceneId,
-} from '../../../shared/types';
+import type { AssetId, GraphNodeId, SceneGraphEdge, SceneGraphNode, SceneId } from '../../../shared/types';
 import { RotatedImage } from '../../shared/RotatedImage';
 import { useAssetUrl } from '../../shared/useAssetImageUrl';
 
 import styles from './SceneGraph.module.css';
 
+/** Поля сцены, нужные только для карточки узла графа (без описания и прочего). */
+export type SceneGraphSceneAudioSummary = {
+  assetId: AssetId;
+  loop: boolean;
+  autoplay: boolean;
+};
+
+export type SceneGraphSceneCard = {
+  title: string;
+  previewAssetId: AssetId | null;
+  previewAssetType: 'image' | 'video' | null;
+  previewVideoAutostart: boolean;
+  previewRotationDeg: 0 | 90 | 180 | 270;
+  loopVideo: boolean;
+  audios: readonly SceneGraphSceneAudioSummary[];
+};
+
 /** MIME для перетаскивания сцены из списка на граф (см. EditorApp). */
 export const DND_SCENE_ID_MIME = 'application/x-dnd-scene-id';
 
@@ -42,7 +52,7 @@ const SCENE_CARD_H = 248;
 export type SceneGraphProps = {
   sceneGraphNodes: SceneGraphNode[];
   sceneGraphEdges: SceneGraphEdge[];
-  sceneById: Record<SceneId, Scene>;
+  sceneCardById: Record<SceneId, SceneGraphSceneCard>;
   currentSceneId: SceneId | null;
   onCurrentSceneChange: (id: SceneId) => void;
   onConnect: (sourceGraphNodeId: GraphNodeId, targetGraphNodeId: GraphNodeId) => void;
@@ -132,12 +142,21 @@ function SceneCardNode({ data }: NodeProps<SceneCardData>) {
           {url && data.previewAssetType === 'image' ? (
             <div className={styles.previewFill}>
               {data.previewRotationDeg === 0 ? (
-                <img src={url} alt="" className={styles.imageCover} draggable={false} />
+                <img
+                  src={url}
+                  alt=""
+                  className={styles.imageCover}
+                  draggable={false}
+                  loading="lazy"
+                  decoding="async"
+                />
               ) : (
                 <RotatedImage
                   url={url}
                   rotationDeg={data.previewRotationDeg}
                   mode="cover"
+                  loading="lazy"
+                  decoding="async"
                   style={{ width: '100%', height: '100%' }}
                 />
               )}
@@ -261,7 +280,7 @@ function GraphZoomToolbar() {
 function SceneGraphCanvas({
   sceneGraphNodes,
   sceneGraphEdges,
-  sceneById,
+  sceneCardById,
   currentSceneId,
   onCurrentSceneChange,
   onConnect,
@@ -291,33 +310,33 @@ function SceneGraphCanvas({
 
   const desiredNodes = useMemo<Node<SceneCardData>[]>(() => {
     return sceneGraphNodes.map((gn) => {
-      const s = sceneById[gn.sceneId];
+      const c = sceneCardById[gn.sceneId];
       const active = gn.sceneId === currentSceneId;
-      const audios = s?.media.audios ?? [];
+      const audios = c?.audios ?? [];
       return {
         id: gn.id,
         type: 'sceneCard',
         position: { x: gn.x, y: gn.y },
         data: {
           sceneId: gn.sceneId,
-          title: s?.title ?? '',
+          title: c?.title ?? '',
           active,
-          previewAssetId: s?.previewAssetId ?? null,
-          previewAssetType: s?.previewAssetType ?? null,
-          previewVideoAutostart: s?.previewVideoAutostart ?? false,
-          previewRotationDeg: s?.previewRotationDeg ?? 0,
+          previewAssetId: c?.previewAssetId ?? null,
+          previewAssetType: c?.previewAssetType ?? null,
+          previewVideoAutostart: c?.previewVideoAutostart ?? false,
+          previewRotationDeg: c?.previewRotationDeg ?? 0,
           isStartScene: gn.isStartScene,
           hasSceneAudio: audios.length >= 1,
-          previewIsVideo: s?.previewAssetType === 'video',
+          previewIsVideo: c?.previewAssetType === 'video',
           hasAnyAudioLoop: audios.some((a) => a.loop),
           hasAnyAudioAutoplay: audios.some((a) => a.autoplay),
-          showPreviewVideoAutostart: s?.previewAssetType === 'video' ? s.previewVideoAutostart : false,
-          showPreviewVideoLoop: s?.previewAssetType === 'video' ? s.settings.loopVideo : false,
+          showPreviewVideoAutostart: c?.previewAssetType === 'video' ? c.previewVideoAutostart : false,
+          showPreviewVideoLoop: c?.previewAssetType === 'video' ? c.loopVideo : false,
         },
         style: { padding: 0, background: 'transparent', border: 'none' },
       };
     });
-  }, [currentSceneId, sceneById, sceneGraphNodes]);
+  }, [currentSceneId, sceneCardById, sceneGraphNodes]);
 
   const desiredEdges = useMemo<Edge[]>(() => {
     return sceneGraphEdges.map((e) => ({

app/renderer/editor/graph/sceneCardById.test.ts

@@ -0,0 +1,101 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import type { Project } from '../../../shared/types';
+import type { AssetId, SceneId } from '../../../shared/types/ids';
+
+import { buildNextSceneCardById } from './sceneCardById';
+
+function minimalProject(overrides: Partial<Project>): Project {
+  return {
+    id: 'p1' as unknown as Project['id'],
+    meta: {
+      name: 'n',
+      fileBaseName: 'f',
+      createdAt: '',
+      updatedAt: '',
+      createdWithAppVersion: '1',
+      appVersion: '1',
+      schemaVersion: 1 as unknown as Project['meta']['schemaVersion'],
+    },
+    scenes: {},
+    assets: {},
+    campaignAudios: [],
+    currentSceneId: null,
+    currentGraphNodeId: null,
+    sceneGraphNodes: [],
+    sceneGraphEdges: [],
+    ...overrides,
+  } as unknown as Project;
+}
+
+void test('buildNextSceneCardById: does not change refs when irrelevant fields change', () => {
+  const sid = 's1' as SceneId;
+  const base = minimalProject({
+    scenes: {
+      [sid]: {
+        id: sid,
+        title: 'T',
+        description: 'A',
+        media: { videos: [], audios: [{ assetId: 'a1' as AssetId, autoplay: false, loop: true }] },
+        settings: { autoplayVideo: false, autoplayAudio: false, loopVideo: false, loopAudio: false },
+        connections: [],
+        layout: { x: 0, y: 0 },
+        previewAssetId: null,
+        previewAssetType: null,
+        previewVideoAutostart: false,
+        previewRotationDeg: 0,
+      },
+    } as unknown as Project['scenes'],
+  });
+
+  const first = buildNextSceneCardById({}, base);
+  const card1 = first[sid];
+  assert.ok(card1);
+
+  const changedOnlyDescription = minimalProject({
+    ...base,
+    scenes: {
+      ...base.scenes,
+      [sid]: { ...base.scenes[sid], description: 'B' },
+    },
+  });
+  const second = buildNextSceneCardById(first, changedOnlyDescription);
+
+  assert.equal(second, first, 'record identity should be reused');
+  assert.equal(second[sid], card1, 'card identity should be reused');
+});
+
+void test('buildNextSceneCardById: changes card when title changes', () => {
+  const sid = 's1' as SceneId;
+  const base = minimalProject({
+    scenes: {
+      [sid]: {
+        id: sid,
+        title: 'T',
+        description: '',
+        media: { videos: [], audios: [] },
+        settings: { autoplayVideo: false, autoplayAudio: false, loopVideo: false, loopAudio: false },
+        connections: [],
+        layout: { x: 0, y: 0 },
+        previewAssetId: null,
+        previewAssetType: null,
+        previewVideoAutostart: false,
+        previewRotationDeg: 0,
+      },
+    } as unknown as Project['scenes'],
+  });
+  const first = buildNextSceneCardById({}, base);
+  const card1 = first[sid];
+
+  const changedTitle = minimalProject({
+    ...base,
+    scenes: {
+      ...base.scenes,
+      [sid]: { ...base.scenes[sid], title: 'T2' },
+    },
+  });
+  const second = buildNextSceneCardById(first, changedTitle);
+
+  assert.notEqual(second[sid], card1);
+});

app/renderer/editor/graph/sceneCardById.ts

@@ -0,0 +1,68 @@
+import type { Project } from '../../../shared/types';
+import type { SceneId } from '../../../shared/types/ids';
+
+import type { SceneGraphSceneAudioSummary, SceneGraphSceneCard } from './SceneGraph';
+
+export function stableSceneGraphAudios(
+  prevCard: SceneGraphSceneCard | undefined,
+  nextRaw: SceneGraphSceneAudioSummary[],
+): readonly SceneGraphSceneAudioSummary[] {
+  if (!prevCard) return nextRaw;
+  const pa = prevCard.audios;
+  if (pa.length !== nextRaw.length) return nextRaw;
+  for (let i = 0; i < nextRaw.length; i++) {
+    const p = pa[i];
+    const n = nextRaw[i];
+    if (p?.assetId !== n?.assetId || p?.loop !== n?.loop || p?.autoplay !== n?.autoplay) return nextRaw;
+  }
+  return pa;
+}
+
+export function buildNextSceneCardById(
+  prevRecord: Record<SceneId, SceneGraphSceneCard>,
+  project: Project,
+): Record<SceneId, SceneGraphSceneCard> {
+  const nextMap: Record<SceneId, SceneGraphSceneCard> = {};
+
+  for (const id of Object.keys(project.scenes) as SceneId[]) {
+    const s = project.scenes[id];
+    if (!s) continue;
+    const prevCard = prevRecord[id];
+    const nextAudiosRaw: SceneGraphSceneAudioSummary[] = s.media.audios.map((a) => ({
+      assetId: a.assetId,
+      loop: a.loop,
+      autoplay: a.autoplay,
+    }));
+    const audios = stableSceneGraphAudios(prevCard, nextAudiosRaw);
+    const loopVideo = s.settings.loopVideo;
+    if (
+      prevCard?.title === s.title &&
+      prevCard.previewAssetId === s.previewAssetId &&
+      prevCard.previewAssetType === s.previewAssetType &&
+      prevCard.previewVideoAutostart === s.previewVideoAutostart &&
+      prevCard.previewRotationDeg === s.previewRotationDeg &&
+      prevCard.loopVideo === loopVideo &&
+      prevCard.audios === audios
+    ) {
+      nextMap[id] = prevCard;
+    } else {
+      nextMap[id] = {
+        title: s.title,
+        previewAssetId: s.previewAssetId,
+        previewAssetType: s.previewAssetType,
+        previewVideoAutostart: s.previewVideoAutostart,
+        previewRotationDeg: s.previewRotationDeg,
+        loopVideo,
+        audios,
+      };
+    }
+  }
+
+  const prevKeys = Object.keys(prevRecord);
+  const nextKeys = Object.keys(nextMap);
+  const reuseRecord =
+    prevKeys.length === nextKeys.length &&
+    nextKeys.every((k) => prevRecord[k as SceneId] === nextMap[k as SceneId]);
+
+  return reuseRecord ? prevRecord : nextMap;
+}

app/renderer/editor/state/projectState.ts

@@ -19,6 +19,8 @@ type Actions = {
   closeProject: () => Promise<void>;
   createScene: () => Promise<void>;
   selectScene: (id: SceneId) => Promise<void>;
+  importCampaignAudio: () => Promise<void>;
+  updateCampaignAudios: (next: Project['campaignAudios']) => Promise<void>;
   updateScene: (
     sceneId: SceneId,
     patch: {
@@ -129,6 +131,22 @@ export function useProjectState(licenseActive: boolean): readonly [State, Action
       await api.invoke(ipcChannels.project.setCurrentScene, { sceneId: id });
     };
 
+    const importCampaignAudio = async () => {
+      const res = await api.invoke(ipcChannels.project.importCampaignAudio, {});
+      if (res.canceled) return;
+      if (res.imported.length === 0) {
+        window.alert('Аудио не добавлено. Проверьте формат файла.');
+      }
+      setState((s) => ({ ...s, project: res.project }));
+      await refreshProjects();
+    };
+
+    const updateCampaignAudios = async (next: Project['campaignAudios']) => {
+      const res = await api.invoke(ipcChannels.project.updateCampaignAudios, { audios: next });
+      setState((s) => ({ ...s, project: res.project }));
+      await refreshProjects();
+    };
+
     const updateScene = async (
       sceneId: SceneId,
       patch: {
@@ -299,6 +317,8 @@ export function useProjectState(licenseActive: boolean): readonly [State, Action
       closeProject,
       createScene,
       selectScene,
+      importCampaignAudio,
+      updateCampaignAudios,
       updateScene,
       updateConnections,
       importMediaToScene,

app/renderer/shared/RotatedImage.tsx

@@ -9,6 +9,8 @@ type RotatedImageProps = {
   rotationDeg: 0 | 90 | 180 | 270;
   mode: Mode;
   alt?: string;
+  loading?: React.ImgHTMLAttributes<HTMLImageElement>['loading'];
+  decoding?: React.ImgHTMLAttributes<HTMLImageElement>['decoding'];
   /** Высота/ширина полностью контролируются родителем. */
   style?: React.CSSProperties;
   /** Прямоугольник видимого контента (contain/cover) внутри контейнера. */
@@ -40,6 +42,8 @@ export function RotatedImage({
   rotationDeg,
   mode,
   alt = '',
+  loading,
+  decoding,
   style,
   onContentRectChange,
 }: RotatedImageProps) {
@@ -91,6 +95,8 @@ export function RotatedImage({
       <img
         alt={alt}
         src={url}
+        loading={loading}
+        decoding={decoding}
         className={styles.img}
         style={{
           width: w ?? '100%',