Merge branch 'users' into main

Players library, circular NPC tokens, disposition types; keep main overlay/release fixes.

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

app/renderer/control/ControlApp.module.css

@@ -303,9 +303,29 @@
 
 .previewActions {
   display: flex;
+  align-items: center;
   gap: 10px;
 }
 
+.npcTokenScale {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.npcTokenScaleLabel {
+  color: var(--text2);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.npcTokenScaleRange {
+  width: min(140px, 22vw);
+  accent-color: var(--color-accent, #c9a227);
+}
+
 .videoHint {
   color: var(--text2);
   font-size: var(--text-xs);
@@ -579,3 +599,43 @@
 .audioScrubDefault {
   cursor: default;
 }
+
+.ctxMenuBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.ctxMenu {
+  position: fixed;
+  z-index: 41;
+  min-width: 200px;
+  padding: 6px;
+  border-radius: 8px;
+  border: 1px solid var(--stroke, #2a2f3a);
+  background: var(--color-surface-menu, #1a1e28);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  display: grid;
+  gap: 2px;
+}
+
+.ctxItem {
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text1, #e8eaef);
+  font-size: 13px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.ctxItem:hover {
+  background: rgba(255, 255, 255, 0.06);
+}

app/renderer/control/ControlApp.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import { pickEraseTargetId } from '../../shared/effectEraserHitTest';
 import { fitAspectRect } from '../../shared/geometry/fitAspectRect';
@@ -9,21 +10,36 @@ import {
   isNodeInSideStoryline,
   listSideStoryStarts,
 } from '../../shared/graph/sceneGraphLineage';
-import type { GraphNodeId, MaterialId, Scene, SceneId, SceneViewCamera } from '../../shared/types';
+import type {
+  GraphNodeId,
+  MaterialId,
+  NpcDisposition,
+  Scene,
+  SceneId,
+  SceneViewCamera,
+} from '../../shared/types';
 import {
-  DEFAULT_SCENE_VIEW_CAMERA,
-  sceneViewPanBy,
-  sceneViewZoomAt,
-} from '../../shared/types/sceneView';
+  DEFAULT_NPC_TOKEN_SESSION_SCALE,
+  DEFAULT_SCENE_NPC_TOKEN_SIZE_N,
+  NPC_TOKEN_SESSION_SCALE_MAX,
+  NPC_TOKEN_SESSION_SCALE_MIN,
+} from '../../shared/types/appPlayers';
+import { otherNpcDispositions } from '../../shared/types/npcDisposition';
+import { DEFAULT_SCENE_VIEW_CAMERA, sceneViewPanBy, sceneViewZoomAt } from '../../shared/types/sceneView';
 import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
 import { isSceneDescriptionEmpty } from '../editor/sceneDescriptionHtml';
 import { getDndApi } from '../shared/dndApi';
 import { RotatedImage } from '../shared/RotatedImage';
-import { ExplosionVideoOverlay } from '../shared/effects/ExplosionVideoOverlay';
 import {
-  PixiEffectsOverlay,
-  type PixiEffectsOverlayHandle,
-} from '../shared/effects/PxiEffectsOverlay';
+  resolveNpcTokenDisposition,
+  SceneNpcTokensOverlay,
+} from '../shared/playerToken/SceneNpcTokensOverlay';
+import { ScenePlayerTokensOverlay } from '../shared/playerToken/ScenePlayerTokensOverlay';
+import { useAppPlayers } from '../shared/playerToken/useAppPlayers';
+import { useSceneNpcTokensSession } from '../shared/playerToken/useSceneNpcTokensSession';
+import { useScenePlayerTokensSession } from '../shared/playerToken/useScenePlayerTokensSession';
+import { ExplosionVideoOverlay } from '../shared/effects/ExplosionVideoOverlay';
+import { PixiEffectsOverlay, type PixiEffectsOverlayHandle } from '../shared/effects/PxiEffectsOverlay';
 import type { EffectInstance, EffectToolType, ExplosionInstance } from '../../shared/types/effects';
 import { SceneDarknessOverlay } from '../shared/effects/SceneDarknessOverlay';
 import { useEffectsState } from '../shared/effects/useEffectsState';
@@ -62,6 +78,12 @@ import { getSunbeamEffectLifeMs, playSunbeamEffectSound } from './sunbeamSfx';
 /** Длительность молнии: быстрый удар + акцент в точке попадания. */
 const LIGHTNING_EFFECT_MS = 840;
 
+function dispositionMakeKey(d: NpcDisposition): string {
+  if (d === 'hostile') return 'npcs.makeHostile';
+  if (d === 'friendly') return 'npcs.makeFriendly';
+  return 'npcs.makeNeutral';
+}
+
 function clampAudioGain(v: number): number {
   if (!Number.isFinite(v)) return 1;
   return Math.max(0, Math.min(1, v));
@@ -72,12 +94,7 @@ function readAudioGain(gains: Map<string, number>, assetId: string): number {
 }
 
 /** Применяет пользовательскую громкость; `factor` — для fade in/out (0…1). */
-function applyAudioGain(
-  el: HTMLAudioElement,
-  gains: Map<string, number>,
-  assetId: string,
-  factor = 1,
-): void {
+function applyAudioGain(el: HTMLAudioElement, gains: Map<string, number>, assetId: string, factor = 1): void {
   el.volume = clampAudioGain(readAudioGain(gains, assetId) * factor);
 }
 
@@ -134,6 +151,14 @@ export function ControlApp() {
   const [sceneTraps, sceneTrapsApi] = useSceneTrapsState();
   const appTokens = useAppTokens();
   const [sceneTokensSession, sceneTokensApi] = useSceneTokensSession();
+  const [sceneNpcTokensSession, sceneNpcTokensApi] = useSceneNpcTokensSession();
+  const [scenePlayerTokensSession, scenePlayerTokensApi] = useScenePlayerTokensSession();
+  const { players: appPlayers } = useAppPlayers();
+  const [npcSessionCtxMenu, setNpcSessionCtxMenu] = useState<{
+    x: number;
+    y: number;
+    placementId: string;
+  } | null>(null);
   const [sceneView, sceneViewApi] = useSceneViewState();
   const [sceneViewDraft, setSceneViewDraft] = useState<SceneViewCamera | null>(null);
   const [materialsOverlay, materialsApi] = useMaterialsOverlayState();
@@ -722,10 +747,9 @@ export function ControlApp() {
     return () => ro.disconnect();
   }, []);
 
-  const activeSceneViewCamera: SceneViewCamera = sceneViewDraft ??
-    (sceneView
-      ? { scale: sceneView.scale, ox: sceneView.ox, oy: sceneView.oy }
-      : DEFAULT_SCENE_VIEW_CAMERA);
+  const activeSceneViewCamera: SceneViewCamera =
+    sceneViewDraft ??
+    (sceneView ? { scale: sceneView.scale, ox: sceneView.ox, oy: sceneView.oy } : DEFAULT_SCENE_VIEW_CAMERA);
   sceneViewRef.current = activeSceneViewCamera;
 
   useEffect(() => {
@@ -1432,9 +1456,11 @@ export function ControlApp() {
             title={hasSceneDescription ? t('control.descriptionTool') : t('control.descriptionMissing')}
             ariaLabel={hasSceneDescription ? t('control.descriptionTool') : t('control.descriptionMissing')}
             onClick={() => {
-              void api.invoke(ipcChannels.windows.openSceneDescription, { html: sceneDescription }).catch((err) => {
-                console.error('[control] openSceneDescription failed', err);
-              });
+              void api
+                .invoke(ipcChannels.windows.openSceneDescription, { html: sceneDescription })
+                .catch((err) => {
+                  console.error('[control] openSceneDescription failed', err);
+                });
             }}
           >
             <span className={styles.iconGlyph} aria-hidden>
@@ -1752,6 +1778,45 @@ export function ControlApp() {
           <div className={styles.previewHeader}>
             <div className={styles.previewTitle}>{t('control.screenPreview')}</div>
             <div className={styles.previewActions}>
+              <label className={styles.npcTokenScale}>
+                <span className={styles.npcTokenScaleLabel}>{t('control.npcTokenScale')}</span>
+                <input
+                  type="range"
+                  className={styles.npcTokenScaleRange}
+                  min={NPC_TOKEN_SESSION_SCALE_MIN}
+                  max={NPC_TOKEN_SESSION_SCALE_MAX}
+                  step={0.05}
+                  value={sceneNpcTokensSession.scale ?? DEFAULT_NPC_TOKEN_SESSION_SCALE}
+                  aria-label={t('control.npcTokenScale')}
+                  onChange={(e) => {
+                    sceneNpcTokensApi.dispatch({
+                      kind: 'setScale',
+                      scale: Number(e.currentTarget.value),
+                    });
+                  }}
+                />
+              </label>
+              {scenePlayerTokensSession.selectedPlayerIds.length > 0 ? (
+                <Button
+                  data-testid="toggle-session-players"
+                  onClick={() => {
+                    if (scenePlayerTokensSession.visible) {
+                      scenePlayerTokensApi.dispatch({ kind: 'setVisible', visible: false });
+                      return;
+                    }
+                    const grid = currentScene?.grid;
+                    const sizeN =
+                      grid?.enabled && Number.isFinite(grid.sizeN)
+                        ? grid.sizeN
+                        : DEFAULT_SCENE_NPC_TOKEN_SIZE_N;
+                    scenePlayerTokensApi.dispatch({ kind: 'show', sizeN });
+                  }}
+                >
+                  {scenePlayerTokensSession.visible
+                    ? t('control.hidePlayers')
+                    : t('control.showPlayers')}
+                </Button>
+              ) : null}
               <Button onClick={() => void api.invoke(ipcChannels.windows.closeMultiWindow, {})}>
                 {t('control.stopPresentation')}
               </Button>
@@ -1764,9 +1829,7 @@ export function ControlApp() {
             ref={previewFrameRef}
             className={styles.previewFrame}
             title={
-              isVideoPreviewScene
-                ? undefined
-                : 'Колесо — зум; перетаскивание СКМ/ПКМ или Space+ЛКМ — пан'
+              isVideoPreviewScene ? undefined : 'Колесо — зум; перетаскивание СКМ/ПКМ или Space+ЛКМ — пан'
             }
           >
             <div ref={previewHostRef} className={styles.previewHost}>
@@ -1882,9 +1945,7 @@ export function ControlApp() {
                       const dy = e.clientY - pan.lastY;
                       pan.lastX = e.clientX;
                       pan.lastY = e.clientY;
-                      publishSceneViewCamera(
-                        sceneViewPanBy(cam, { containW, containH, dx, dy }),
-                      );
+                      publishSceneViewCamera(sceneViewPanBy(cam, { containW, containH, dx, dy }));
                       return;
                     }
                     const p = toNPoint(e);
@@ -1965,6 +2026,41 @@ export function ControlApp() {
                     }}
                   />
                 ) : null}
+                {previewContentRect ? (
+                  <SceneNpcTokensOverlay
+                    placements={currentScene?.npcTokens ?? []}
+                    library={session?.project?.npcs ?? []}
+                    session={sceneNpcTokensSession}
+                    viewport={previewContentRect}
+                    grid={currentScene?.grid ?? null}
+                    editable
+                    onMove={(placementId, nx, ny) => {
+                      sceneNpcTokensApi.dispatch({ kind: 'move', placementId, nx, ny });
+                    }}
+                    onContextMenu={(e, placement) => {
+                      setNpcSessionCtxMenu({
+                        x: e.clientX,
+                        y: e.clientY,
+                        placementId: String(placement.id),
+                      });
+                    }}
+                  />
+                ) : null}
+                {previewContentRect ? (
+                  <ScenePlayerTokensOverlay
+                    library={appPlayers}
+                    session={scenePlayerTokensSession}
+                    displayScale={
+                      sceneNpcTokensSession.scale ?? DEFAULT_NPC_TOKEN_SESSION_SCALE
+                    }
+                    viewport={previewContentRect}
+                    grid={currentScene?.grid ?? null}
+                    editable
+                    onMove={(playerId, nx, ny) => {
+                      scenePlayerTokensApi.dispatch({ kind: 'move', playerId, nx, ny });
+                    }}
+                  />
+                ) : null}
                 {previewContentRect ? (
                   <SceneTrapsOverlay
                     traps={currentScene?.traps ?? []}
@@ -2286,8 +2382,7 @@ export function ControlApp() {
                       }
                       void el.play().catch(() => {
                         const mm =
-                          sceneAudioMetaRef.current.get(ref.assetId) ??
-                          ({ lastPlayError: null } as const);
+                          sceneAudioMetaRef.current.get(ref.assetId) ?? ({ lastPlayError: null } as const);
                         sceneAudioMetaRef.current.set(ref.assetId, {
                           ...mm,
                           lastPlayError: t('control.playFailed'),
@@ -2333,7 +2428,9 @@ export function ControlApp() {
                     {...(!allowCampaignAudio
                       ? {
                           extraBadge: (
-                            <div title={t('control.pauseSceneMusicTitle')}>{t('control.pauseSceneMusic')}</div>
+                            <div title={t('control.pauseSceneMusicTitle')}>
+                              {t('control.pauseSceneMusic')}
+                            </div>
                           ),
                         }
                       : {})}
@@ -2367,8 +2464,7 @@ export function ControlApp() {
                       }
                       void el.play().catch(() => {
                         const mm =
-                          campaignAudioMetaRef.current.get(ref.assetId) ??
-                          ({ lastPlayError: null } as const);
+                          campaignAudioMetaRef.current.get(ref.assetId) ?? ({ lastPlayError: null } as const);
                         campaignAudioMetaRef.current.set(ref.assetId, {
                           ...mm,
                           lastPlayError: t('control.playFailed'),
@@ -2412,6 +2508,80 @@ export function ControlApp() {
           </Surface>
         ) : null}
       </div>
+
+      {npcSessionCtxMenu
+        ? createPortal(
+            <>
+              <button
+                type="button"
+                className={styles.ctxMenuBackdrop}
+                aria-label={t('common.close')}
+                onClick={() => setNpcSessionCtxMenu(null)}
+              />
+              <div
+                className={styles.ctxMenu}
+                style={{ left: npcSessionCtxMenu.x, top: npcSessionCtxMenu.y }}
+                role="menu"
+              >
+                {(() => {
+                  const placement = (currentScene?.npcTokens ?? []).find(
+                    (item) => String(item.id) === npcSessionCtxMenu.placementId,
+                  );
+                  const npc = placement
+                    ? (session?.project?.npcs ?? []).find((item) => item.id === placement.npcId)
+                    : undefined;
+                  if (!placement || !npc) return null;
+                  const override =
+                    sceneNpcTokensSession.byPlacementId[npcSessionCtxMenu.placementId];
+                  const current = resolveNpcTokenDisposition(
+                    placement,
+                    npc,
+                    override?.disposition,
+                  );
+                  const inactive = Boolean(override?.inactive);
+                  return (
+                    <>
+                      {otherNpcDispositions(current).map((d) => (
+                        <button
+                          key={d}
+                          type="button"
+                          className={styles.ctxItem}
+                          role="menuitem"
+                          onClick={() => {
+                            sceneNpcTokensApi.dispatch({
+                              kind: 'setDisposition',
+                              placementId: npcSessionCtxMenu.placementId,
+                              disposition: d,
+                            });
+                            setNpcSessionCtxMenu(null);
+                          }}
+                        >
+                          {t(dispositionMakeKey(d))}
+                        </button>
+                      ))}
+                      <button
+                        type="button"
+                        className={styles.ctxItem}
+                        role="menuitem"
+                        onClick={() => {
+                          sceneNpcTokensApi.dispatch({
+                            kind: 'setInactive',
+                            placementId: npcSessionCtxMenu.placementId,
+                            inactive: !inactive,
+                          });
+                          setNpcSessionCtxMenu(null);
+                        }}
+                      >
+                        {inactive ? t('npcs.makeActive') : t('npcs.inactive')}
+                      </button>
+                    </>
+                  );
+                })()}
+              </div>
+            </>,
+            document.body,
+          )
+        : null}
     </div>
   );
 }