feat(scene): keep map tokens with preview rotation

When previewRotationDeg changes, remap non-player, NPC and trap
markers (plus live session token overrides) so they stay on the art.

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

app/main/index.ts

@@ -20,6 +20,10 @@ import {
 } from '../shared/project/projectZipExtension';
 import type { Project } from '../shared/types';
 import { asNpcId } from '../shared/types/ids';
+import {
+  asPreviewRotationDeg,
+  previewRotationStepsCw,
+} from '../shared/types/scenePreviewRotation';
 
 import { EffectsStore, effectsDefaultTool } from './effects/effectsStore';
 import { SceneDarknessStore } from './effects/sceneDarknessStore';
@@ -678,6 +682,7 @@ async function main() {
     };
   });
   registerHandler(ipcChannels.project.updateScene, async ({ sceneId, patch }) => {
+    const before = projectStore.getOpenProject()?.scenes[sceneId];
     const next = await projectStore.updateScene(sceneId, patch);
     const project = projectStore.getOpenProject();
     if (project?.currentSceneId === sceneId && patch.darkenScene !== undefined) {
@@ -688,6 +693,29 @@ async function main() {
       syncSceneTrapsForProject(project);
       emitSceneTrapsState();
     }
+    if (
+      project?.currentSceneId === sceneId &&
+      patch.previewRotationDeg !== undefined &&
+      before
+    ) {
+      const steps = previewRotationStepsCw(
+        asPreviewRotationDeg(before.previewRotationDeg),
+        asPreviewRotationDeg(patch.previewRotationDeg),
+      );
+      if (steps !== 0) {
+        sceneTokensSessionStore.rotateMapCwSteps(steps);
+        sceneNpcTokensSessionStore.rotateMapCwSteps(steps);
+        scenePlayerTokensSessionStore.rotateMapCwSteps(steps);
+        emitSceneTokensSessionState();
+        emitSceneNpcTokensSessionState();
+        emitScenePlayerTokensSessionState();
+      }
+    }
+    if (project && project.currentSceneId === sceneId && patch.previewRotationDeg !== undefined) {
+      // Trap ids stay the same; runtime statuses remain valid after coordinate remap in project.
+      syncSceneTrapsForProject(project);
+      emitSceneTrapsState();
+    }
     emitSessionState();
     return { scene: next };
   });

app/main/players/sceneNpcTokensSessionStore.ts

@@ -6,6 +6,7 @@ import {
   type SceneNpcTokensSessionState,
 } from '../../shared/types/appPlayers';
 import { normalizeNpcDisposition } from '../../shared/types/npcDisposition';
+import { rotateMapNormPointByCwSteps } from '../../shared/types/scenePreviewRotation';
 
 function emptyState(revision = 1): SceneNpcTokensSessionState {
   return {
@@ -63,6 +64,34 @@ export class SceneNpcTokensSessionStore {
     return this.state;
   }
 
+  /** Rotate session position overrides with the scene preview (CSS rotate steps). */
+  rotateMapCwSteps(steps: number): SceneNpcTokensSessionState {
+    const n = ((steps % 4) + 4) % 4;
+    if (n === 0) return this.state;
+    const ids = Object.keys(this.state.byPlacementId);
+    if (ids.length === 0) return this.state;
+    let changed = false;
+    const byPlacementId: SceneNpcTokensSessionState['byPlacementId'] = {};
+    for (const id of ids) {
+      const prev = this.state.byPlacementId[id];
+      if (!prev) continue;
+      if (typeof prev.nx === 'number' && typeof prev.ny === 'number') {
+        const p = rotateMapNormPointByCwSteps(prev.nx, prev.ny, n);
+        byPlacementId[id] = { ...prev, nx: p.nx, ny: p.ny };
+        changed = true;
+      } else {
+        byPlacementId[id] = prev;
+      }
+    }
+    if (!changed) return this.state;
+    this.state = {
+      revision: this.state.revision + 1,
+      byPlacementId,
+      scale: this.state.scale,
+    };
+    return this.state;
+  }
+
   dispatch(event: SceneNpcTokensSessionEvent): SceneNpcTokensSessionState {
     switch (event.kind) {
       case 'clear':

app/main/players/scenePlayerTokensSessionStore.test.ts

@@ -37,3 +37,13 @@ void test('ScenePlayerTokensSessionStore move and reset', () => {
   assert.equal(s2.visible, false);
   assert.deepEqual(s2.byPlayerId, {});
 });
+
+void test('ScenePlayerTokensSessionStore rotateMapCwSteps', () => {
+  const store = new ScenePlayerTokensSessionStore();
+  store.dispatch({ kind: 'setSelection', playerIds: ['p1'] });
+  store.dispatch({ kind: 'show', sizeN: 0.1 });
+  store.dispatch({ kind: 'move', playerId: 'p1', nx: 0.2, ny: 0.1 });
+  const s = store.rotateMapCwSteps(1);
+  assert.equal(s.byPlayerId.p1?.nx, 0.9);
+  assert.equal(s.byPlayerId.p1?.ny, 0.2);
+});

app/main/players/scenePlayerTokensSessionStore.ts

@@ -5,6 +5,7 @@ import {
   type ScenePlayerTokensSessionEvent,
   type ScenePlayerTokensSessionState,
 } from '../../shared/types/appPlayers';
+import { rotateMapNormPointByCwSteps } from '../../shared/types/scenePreviewRotation';
 
 function emptyState(revision = 1): ScenePlayerTokensSessionState {
   return {
@@ -60,6 +61,27 @@ export class ScenePlayerTokensSessionStore {
     return this.state;
   }
 
+  /** Rotate live player tokens with the scene preview (CSS rotate steps). */
+  rotateMapCwSteps(steps: number): ScenePlayerTokensSessionState {
+    const n = ((steps % 4) + 4) % 4;
+    if (n === 0) return this.state;
+    const ids = Object.keys(this.state.byPlayerId);
+    if (ids.length === 0) return this.state;
+    const byPlayerId: ScenePlayerTokensSessionState['byPlayerId'] = {};
+    for (const id of ids) {
+      const prev = this.state.byPlayerId[id];
+      if (!prev) continue;
+      const p = rotateMapNormPointByCwSteps(prev.nx, prev.ny, n);
+      byPlayerId[id] = { ...prev, nx: p.nx, ny: p.ny };
+    }
+    this.state = {
+      ...this.state,
+      revision: this.state.revision + 1,
+      byPlayerId,
+    };
+    return this.state;
+  }
+
   dispatch(event: ScenePlayerTokensSessionEvent): ScenePlayerTokensSessionState {
     switch (event.kind) {
       case 'clear':

app/main/project/zipStore.ts

@@ -67,6 +67,12 @@ import {
   type NpcDisposition,
 } from '../../shared/types/npcDisposition';
 import { DEFAULT_SCENE_GRID, normalizeSceneGrid } from '../../shared/types/sceneGrid';
+import {
+  asPreviewRotationDeg,
+  previewRotationStepsCw,
+  rotateMapMarkersByCwSteps,
+  rotateSceneTokensByCwSteps,
+} from '../../shared/types/scenePreviewRotation';
 import { normalizeSceneTrap } from '../../shared/types/sceneTraps';
 import type {
   AssetId,
@@ -787,6 +793,24 @@ export class ZipProjectStore {
       ...(patch.layout ? { layout: { ...base.layout, ...patch.layout } } : null),
     };
 
+    // Keep map markers glued to the art when previewRotationDeg changes (image/video).
+    if (patch.previewRotationDeg !== undefined) {
+      const fromRot = asPreviewRotationDeg(base.previewRotationDeg);
+      const toRot = asPreviewRotationDeg(patch.previewRotationDeg);
+      const steps = previewRotationStepsCw(fromRot, toRot);
+      if (steps !== 0) {
+        if (patch.tokens === undefined) {
+          next.tokens = rotateSceneTokensByCwSteps(base.tokens ?? [], steps);
+        }
+        if (patch.npcTokens === undefined) {
+          next.npcTokens = rotateMapMarkersByCwSteps(base.npcTokens ?? [], steps);
+        }
+        if (patch.traps === undefined) {
+          next.traps = rotateMapMarkersByCwSteps(base.traps ?? [], steps);
+        }
+      }
+    }
+
     await this.updateProject((p) => {
       const scenes = { ...p.scenes, [sceneId]: next };
       const sceneListOrder =

app/main/tokens/sceneTokensSessionStore.ts

@@ -1,4 +1,5 @@
 import type { SceneTokensSessionEvent, SceneTokensSessionState } from '../../shared/types';
+import { rotateMapNormPointByCwSteps } from '../../shared/types/scenePreviewRotation';
 
 function emptyState(): SceneTokensSessionState {
   return {
@@ -23,6 +24,26 @@ export class SceneTokensSessionStore {
     return this.state;
   }
 
+  /** Rotate session position overrides with the scene preview (CSS rotate steps). */
+  rotateMapCwSteps(steps: number): SceneTokensSessionState {
+    const n = ((steps % 4) + 4) % 4;
+    if (n === 0) return this.state;
+    const ids = Object.keys(this.state.byPlacementId);
+    if (ids.length === 0) return this.state;
+    const byPlacementId: SceneTokensSessionState['byPlacementId'] = {};
+    for (const id of ids) {
+      const prev = this.state.byPlacementId[id];
+      if (!prev) continue;
+      const next = rotateMapNormPointByCwSteps(prev.nx, prev.ny, n);
+      byPlacementId[id] = { nx: next.nx, ny: next.ny };
+    }
+    this.state = {
+      revision: this.state.revision + 1,
+      byPlacementId,
+    };
+    return this.state;
+  }
+
   dispatch(event: SceneTokensSessionEvent): SceneTokensSessionState {
     switch (event.kind) {
       case 'clear':