fix: control UX — no default tool, launch loader, NPC layout

Deselect effect tools by default and on re-click, block the editor during session launch, and fix NPC overlay/window empty-state layout.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/main/effects/effectsStore.test.ts

@@ -3,6 +3,11 @@ import test from 'node:test';
 
 import { EffectsStore } from './effectsStore';
 
+void test('defaultTool: при старте инструмент не выбран', () => {
+  const store = new EffectsStore();
+  assert.equal(store.getState().tool.tool, 'none');
+});
+
 void test('pruneExpired: лёд не удаляется по времени', () => {
   const store = new EffectsStore();
   const createdAtMs = Date.now() - 365 * 24 * 60 * 60 * 1000;

app/main/effects/effectsStore.ts

@@ -8,7 +8,12 @@ function nowMs(): number {
 }
 
 function defaultTool(): EffectToolState {
-  return { tool: 'fog', radiusN: 0.08, intensity: 0.6 };
+  return { tool: 'none', radiusN: 0.08, intensity: 0.6 };
+}
+
+/** Сброс выбранного инструмента (при старте сессии). */
+export function effectsDefaultTool(): EffectToolState {
+  return defaultTool();
 }
 
 export class EffectsStore {

app/main/index.ts

@@ -19,7 +19,7 @@ import {
 } from '../shared/project/projectZipExtension';
 import type { Project } from '../shared/types';
 
-import { EffectsStore } from './effects/effectsStore';
+import { EffectsStore, effectsDefaultTool } from './effects/effectsStore';
 import { SceneDarknessStore } from './effects/sceneDarknessStore';
 import { SceneTrapsStore } from './sceneTraps/sceneTrapsStore';
 import { installIpcRouter, registerHandler, setLicenseAssert } from './ipc/router';
@@ -378,6 +378,7 @@ async function main() {
   registerHandler(ipcChannels.windows.openMultiWindow, () => {
     sceneDarknessStore.resetSession();
     sceneTrapsStore.resetSession();
+    effectsStore.dispatch({ kind: 'tool.set', tool: effectsDefaultTool() });
     openMultiWindow();
     const project = projectStore.getOpenProject();
     if (project) {
@@ -386,6 +387,7 @@ async function main() {
     }
     emitSceneDarknessState();
     emitSceneTrapsState();
+    emitEffectsState();
     return { ok: true };
   });
   registerHandler(ipcChannels.windows.closeMultiWindow, () => {

app/renderer/control/ControlApp.tsx

@@ -23,7 +23,7 @@ import {
   PixiEffectsOverlay,
   type PixiEffectsOverlayHandle,
 } from '../shared/effects/PxiEffectsOverlay';
-import type { EffectInstance, ExplosionInstance } from '../../shared/types/effects';
+import type { EffectInstance, EffectToolType, ExplosionInstance } from '../../shared/types/effects';
 import { SceneDarknessOverlay } from '../shared/effects/SceneDarknessOverlay';
 import { useEffectsState } from '../shared/effects/useEffectsState';
 import { useSceneDarknessState } from '../shared/effects/useSceneDarknessState';
@@ -839,10 +839,16 @@ export function ControlApp() {
   const showReturnToMain = isInSideStoryline && mainStoryReturnGraphNodeId !== null;
   const branchOptionOffset = showReturnToMain ? 1 : 0;
 
-  const tool = fxState?.tool ?? { tool: 'fog', radiusN: 0.08, intensity: 0.6 };
+  const tool = fxState?.tool ?? { tool: 'none' as const, radiusN: 0.08, intensity: 0.6 };
   const toolRef = useRef(tool);
   toolRef.current = tool;
 
+  /** Повторный клик по активному инструменту снимает выбор. */
+  function selectEffectTool(next: Exclude<EffectToolType, 'none'>): void {
+    const toolName: EffectToolType = tool.tool === next ? 'none' : next;
+    void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: toolName } });
+  }
+
   function layoutBrushCursor(): void {
     const el = brushCursorElRef.current;
     const p = cursorPosRef.current;
@@ -850,7 +856,7 @@ export function ControlApp() {
     const ps = previewSizeRef.current;
     const t = toolRef.current;
     if (!el) return;
-    if (!p) {
+    if (!p || t.tool === 'none') {
       el.style.visibility = 'hidden';
       return;
     }
@@ -1447,7 +1453,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.eraser')}
                     ariaLabel={t('control.eraser')}
-                    onClick={() => void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'eraser' } })}
+                    onClick={() => selectEffectTool('eraser')}
                   >
                     <span className={styles.iconGlyph}>🧹</span>
                   </Button>
@@ -1483,7 +1489,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.fog')}
                     ariaLabel={t('control.fog')}
-                    onClick={() => void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'fog' } })}
+                    onClick={() => selectEffectTool('fog')}
                   >
                     <span className={styles.iconGlyph}>🌫️</span>
                   </Button>
@@ -1492,7 +1498,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.rain')}
                     ariaLabel={t('control.rain')}
-                    onClick={() => void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'rain' } })}
+                    onClick={() => selectEffectTool('rain')}
                   >
                     <span className={styles.iconGlyph}>🌧️</span>
                   </Button>
@@ -1501,7 +1507,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.fire')}
                     ariaLabel={t('control.fire')}
-                    onClick={() => void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'fire' } })}
+                    onClick={() => selectEffectTool('fire')}
                   >
                     <span className={styles.iconGlyph}>🔥</span>
                   </Button>
@@ -1510,7 +1516,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.water')}
                     ariaLabel={t('control.water')}
-                    onClick={() => void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'water' } })}
+                    onClick={() => selectEffectTool('water')}
                   >
                     <span className={styles.iconGlyph}>💧</span>
                   </Button>
@@ -1524,9 +1530,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.lightning')}
                     ariaLabel={t('control.lightning')}
-                    onClick={() =>
-                      void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'lightning' } })
-                    }
+                    onClick={() => selectEffectTool('lightning')}
                   >
                     <span className={styles.iconGlyph}>⚡</span>
                   </Button>
@@ -1535,7 +1539,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.sunbeam')}
                     ariaLabel={t('control.sunbeam')}
-                    onClick={() => void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'sunbeam' } })}
+                    onClick={() => selectEffectTool('sunbeam')}
                   >
                     <span className={styles.iconGlyph}>☀️</span>
                   </Button>
@@ -1544,7 +1548,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.freeze')}
                     ariaLabel={t('control.freeze')}
-                    onClick={() => void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'freeze' } })}
+                    onClick={() => selectEffectTool('freeze')}
                   >
                     <span className={styles.iconGlyph}>❄️</span>
                   </Button>
@@ -1553,9 +1557,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.darkness')}
                     ariaLabel={t('control.darkness')}
-                    onClick={() =>
-                      void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'darkness' } })
-                    }
+                    onClick={() => selectEffectTool('darkness')}
                   >
                     <span className={styles.iconGlyph}>🌑</span>
                   </Button>
@@ -1564,9 +1566,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.poisonCloud')}
                     ariaLabel={t('control.poisonCloud')}
-                    onClick={() =>
-                      void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'poisonCloud' } })
-                    }
+                    onClick={() => selectEffectTool('poisonCloud')}
                   >
                     <span className={styles.iconGlyph}>☣️</span>
                   </Button>
@@ -1575,9 +1575,7 @@ export function ControlApp() {
                     iconOnly
                     title={t('control.explosion')}
                     ariaLabel={t('control.explosion')}
-                    onClick={() =>
-                      void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'explosion' } })
-                    }
+                    onClick={() => selectEffectTool('explosion')}
                   >
                     <span className={styles.iconGlyph}>💥</span>
                   </Button>
@@ -1592,9 +1590,7 @@ export function ControlApp() {
                       iconOnly
                       title={t('control.explorerBrush')}
                       ariaLabel={t('control.explorerBrush')}
-                      onClick={() =>
-                        void fx.dispatch({ kind: 'tool.set', tool: { ...tool, tool: 'exploreBrush' } })
-                      }
+                      onClick={() => selectEffectTool('exploreBrush')}
                     >
                       <span className={styles.iconGlyph}>🔦</span>
                     </Button>
@@ -1772,6 +1768,7 @@ export function ControlApp() {
                       return;
                     }
                     if (e.button !== 0) return;
+                    if (tool.tool === 'none') return;
                     const p = toNPoint(e);
                     if (!p) return;
                     cursorPosRef.current = p;

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

@@ -97,6 +97,8 @@ void test('ControlApp: эффекты в пульте, иконки с тулт
   assert.ok(src.includes("title={t('control.poisonCloud')}"));
   assert.ok(src.includes("title={t('control.fog')}"));
   assert.ok(src.includes("ariaLabel={t('control.fog')}"));
+  assert.ok(src.includes('selectEffectTool'), 'повторный клик снимает инструмент');
+  assert.ok(src.includes("tool.tool === next ? 'none' : next"));
   assert.ok(src.includes('iconOnly'));
   assert.ok(src.includes("title={t('control.clearEffects')}"));
   assert.ok(src.includes("ariaLabel={t('control.clearEffects')}"));

app/renderer/editor/EditorApp.tsx

@@ -143,6 +143,7 @@ export function EditorApp() {
   const [importReport, setImportReport] = useState<StorylineImportMergeReport | null>(null);
   const [previewDialogSceneId, setPreviewDialogSceneId] = useState<SceneId | null>(null);
   const [presentationOpen, setPresentationOpen] = useState(false);
+  const [launching, setLaunching] = useState(false);
   const [licenseSnap, setLicenseSnap] = useState<LicenseSnapshot | null>(null);
   const [checkUpdatesOpen, setCheckUpdatesOpen] = useState(false);
   const [appPackaged, setAppPackaged] = useState(false);
@@ -351,15 +352,24 @@ export function EditorApp() {
 
   const launchFromGraphNode = useCallback(
     (graphNodeId: GraphNodeId) => {
-      if (!licenseActive) return;
+      if (!licenseActive || launching) return;
+      setLaunching(true);
       void (async () => {
+        try {
           await getDndApi().invoke(ipcChannels.project.setCurrentGraphNode, { graphNodeId });
           await getDndApi().invoke(ipcChannels.windows.openMultiWindow, {});
+        } catch {
+          setLaunching(false);
+        }
       })();
     },
-    [licenseActive],
+    [licenseActive, launching],
   );
 
+  useEffect(() => {
+    if (presentationOpen) setLaunching(false);
+  }, [presentationOpen]);
+
   const currentProjectName = state.project?.meta.name ?? '';
   const currentFileBaseName = state.project?.meta.fileBaseName ?? '';
   const existingProjectNames = useMemo(() => state.projects.map((p) => p.name), [state.projects]);
@@ -646,6 +656,17 @@ export function EditorApp() {
 
   return (
     <>
+      {launching
+        ? createPortal(
+            <div className={styles.progressOverlay} role="dialog" aria-label={t('top.launching')} aria-busy>
+              <div className={styles.previewBusyModal}>
+                <div className={styles.previewSpinner} aria-hidden />
+                <div className={styles.previewBusyText}>{t('top.launching')}</div>
+              </div>
+            </div>,
+            document.body,
+          )
+        : null}
       {presentationOpen
         ? createPortal(
             <div className={styles.editorLockOverlay} role="dialog" aria-label={t('presentation.overlay')}>
@@ -821,9 +842,9 @@ export function EditorApp() {
                 <>
                   <Button
                     variant="primary"
-                    disabled={runDisabled}
+                    disabled={runDisabled || launching}
                     onClick={() => {
-                      if (!licenseActive || !graphStartGraphNodeId) return;
+                      if (!licenseActive || !graphStartGraphNodeId || launching) return;
                       launchFromGraphNode(graphStartGraphNodeId);
                     }}
                   >

app/renderer/editor/i18n/editorMessages.ts

@@ -113,6 +113,7 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
     'top.backToProjects': 'К списку проектов',
     'top.appVersion': 'Версия приложения',
     'top.run': 'Запустить',
+    'top.launching': 'Запуск…',
     'top.afterLicense': 'Доступно после активации лицензии',
     'top.setStartScene': 'Назначьте начальную сцену на графе (ПКМ по узлу)',
     'top.runHelpAria': 'Как разблокировать кнопку «Запустить»',
@@ -431,7 +432,7 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
     'npcs.graphZoomOut': 'Уменьшить',
     'npcs.graphFitAll': 'Показать всё',
     'npcs.windowEmpty': 'Добавьте НПС в редакторе.',
-    'npcs.selectToShow': 'Выберите персонажей в списке — они появятся на экране.',
+    'npcs.selectToShow': 'Выберите персонажа в списке — он появится на экране.',
     'npcs.closeOverlay': 'Закрыть всех',
     'npcs.rotateOverlay': 'Повернуть',
     'npcs.zoomIn': 'Увеличить',
@@ -658,6 +659,7 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
     'top.backToProjects': 'Back to projects',
     'top.appVersion': 'App version',
     'top.run': 'Run',
+    'top.launching': 'Starting…',
     'top.afterLicense': 'Available after license activation',
     'top.setStartScene': 'Set a start scene on the graph (right‑click a node)',
     'top.runHelpAria': 'How to enable the Run button',
@@ -977,7 +979,7 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
     'npcs.graphZoomOut': 'Zoom out',
     'npcs.graphFitAll': 'Fit view',
     'npcs.windowEmpty': 'Add NPCs in the editor.',
-    'npcs.selectToShow': 'Select characters in the list — they will appear on screen.',
+    'npcs.selectToShow': 'Select a character in the list — they will appear on screen.',
     'npcs.closeOverlay': 'Close all',
     'npcs.rotateOverlay': 'Rotate',
     'npcs.zoomIn': 'Zoom in',

app/renderer/npcs/NpcsApp.tsx

@@ -214,13 +214,13 @@ export function NpcsApp() {
 
   return (
     <div className={styles.page}>
-      {hasActive ? (
       <div className={styles.toolbar}>
         <div className={styles.toolbarRow}>
           <Button
             title={t('npcs.closeOverlay')}
             ariaLabel={t('npcs.closeOverlay')}
             tooltipPlacement="bottom"
+            disabled={!hasActive}
             onClick={() => {
               void overlayApi.dispatch({ kind: 'hide' });
             }}
@@ -229,7 +229,6 @@ export function NpcsApp() {
           </Button>
         </div>
       </div>
-      ) : null}
 
       <div className={styles.body}>
         <div className={styles.detail}>
@@ -264,9 +263,11 @@ export function NpcsApp() {
               );
             })
           ) : (
+            <div className={styles.detailCard}>
               <div className={styles.detailEmpty}>
                 {npcs.length === 0 ? t('npcs.windowEmpty') : t('npcs.selectToShow')}
               </div>
+            </div>
           )}
         </div>
 

app/renderer/shared/npcs/NpcsSceneOverlay.tsx

@@ -342,11 +342,6 @@ function NpcAvatarFrame({
         src={url}
         alt=""
         draggable={false}
-        style={{
-          width: w,
-          height: h,
-          transform: 'translate(-50%, -50%)',
-        }}
         onLoad={(e) => {
           const img = e.currentTarget;
           setNatural({ w: img.naturalWidth || 1, h: img.naturalHeight || 1 });

app/shared/types/effects.ts

@@ -1,4 +1,5 @@
 export type EffectToolType =
+  | 'none'
   | 'fog'
   | 'fire'
   | 'rain'