@pascal-app/editor 1.0.3 → 1.0.5

package/src/store/terrain-sculpt-mode.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test'
 import useEditor, { isBrushMode, type Mode, normalizePersistedEditorUiState } from './use-editor'
 import useInteractionScope from './use-interaction-scope'
+import { isViewVisible, sceneLayout, VIEW_2D, visibleScene } from './view-layout'
 
 /**
  * The mode-lifecycle contract for terrain sculpting.
@@ -17,9 +18,9 @@ function reset() {
   useEditor.getState().setPreviewMode(false)
   useEditor.getState().setFirstPersonMode(false)
   useEditor.getState().setWorkspaceMode('edit')
-  // Before the mode: `setViewMode('2d')` disarms sculpt, and leaving a stale view
+  // Before the mode: hiding 3D disarms sculpt, and leaving a stale layout
   // behind would silently change what the next test's `setMode` does.
-  useEditor.getState().setViewMode('3d')
+  useEditor.getState().setViewLayout(sceneLayout('3d'))
   useEditor.getState().setMode('select')
   useEditor.getState().setTerrainVerb('flatten')
   useEditor.getState().setTerrainSampling(false)
@@ -41,8 +42,8 @@ describe('terrain-sculpt mode lifecycle', () => {
     expect(useInteractionScope.getState().scope.kind).toBe('idle')
   })
 
-  test('arming sculpt from another phase moves to the site phase', () => {
-    useEditor.getState().setPhase('structure')
+  test('arming sculpt from the building moves to site', () => {
+    useEditor.getState().setPhase('building')
     useEditor.getState().setMode('terrain-sculpt')
     // Otherwise `normalizeModeForPhase` rejects the mode on the next rehydrate
     // and the UI shows a mode the store does not hold.
@@ -53,7 +54,7 @@ describe('terrain-sculpt mode lifecycle', () => {
   test('a phase switch out of site drops the scope', () => {
     useEditor.getState().setMode('terrain-sculpt')
     // The phase setter delegates its mode rewrite to the ToolMode transition.
-    useEditor.getState().setPhase('structure')
+    useEditor.getState().setPhase('building')
     expect(useInteractionScope.getState().scope.kind).toBe('idle')
   })
 })
@@ -71,7 +72,7 @@ describe('the eyedropper arm is not allowed to outlive sculpt mode', () => {
   test('leaving via a phase switch disarms it too', () => {
     useEditor.getState().setMode('terrain-sculpt')
     useEditor.getState().setTerrainSampling(true)
-    useEditor.getState().setPhase('furnish')
+    useEditor.getState().setPhase('building')
     expect(useEditor.getState().terrainSampling).toBe(false)
   })
 
@@ -106,17 +107,17 @@ describe('the brush and the 3D canvas travel together', () => {
   // moves), while choosing the floorplan asks for the floorplan (so the mode
   // yields).
   test('arming from the 2D floorplan opens a 3D pane beside it', () => {
-    useEditor.getState().setViewMode('2d')
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
     useEditor.getState().setMode('terrain-sculpt')
     // `split`, not `3d`: the floorplan was a deliberate choice, so keep it.
-    expect(useEditor.getState().viewMode).toBe('split')
-    expect(useEditor.getState().isFloorplanOpen).toBe(true)
+    expect(visibleScene(useEditor.getState())).toBe('split')
+    expect(isViewVisible(useEditor.getState(), VIEW_2D)).toBe(true)
     expect(useEditor.getState().mode).toBe('terrain-sculpt')
   })
 
   test('switching to the 2D floorplan disarms the brush', () => {
     useEditor.getState().setMode('terrain-sculpt')
-    useEditor.getState().setViewMode('2d')
+    useEditor.getState().setViewLayout(sceneLayout('2d'))
     expect(useEditor.getState().mode).toBe('select')
     // And the scope goes with it — otherwise selection stays suppressed in the
     // floorplan the user just asked for, with no visible way out.
@@ -125,10 +126,16 @@ describe('the brush and the 3D canvas travel together', () => {
 
   test('split keeps it armed — the canvas is right there', () => {
     useEditor.getState().setMode('terrain-sculpt')
-    useEditor.getState().setViewMode('split')
+    useEditor.getState().setViewLayout(sceneLayout('split'))
     expect(useEditor.getState().mode).toBe('terrain-sculpt')
   })
 
+  test('another view in the 3D pane disarms it, as the plan does', () => {
+    useEditor.getState().setMode('terrain-sculpt')
+    useEditor.getState().showView('gallery')
+    expect(useEditor.getState().mode).toBe('select')
+  })
+
   test('rehydrating the pair resolves it to select', () => {
     // Mode and view persist independently and rehydrate runs neither setter, so
     // this is the one reconciliation the setters cannot cover.
@@ -172,20 +179,11 @@ describe('the modes that hide the editing canvas release the brush', () => {
     useEditor.getState().setWorkspaceMode('studio')
     expect(useInteractionScope.getState().scope.kind).toBe('idle')
   })
-
-  test('a structure-layer switch releases it', () => {
-    useEditor.getState().setMode('terrain-sculpt')
-    // Reachable from the layer toggle while sculpt is armed, and it takes the
-    // same raw-`set` path — the mode resets, so the scope has to follow.
-    useEditor.getState().setStructureLayer('zones')
-    expect(useEditor.getState().mode).toBe('select')
-    expect(useInteractionScope.getState().scope.kind).toBe('idle')
-  })
 })
 
 describe('entering sculpt mode stands other affordances down', () => {
   test('the armed build tool is cleared', () => {
-    useEditor.getState().setPhase('structure')
+    useEditor.getState().setPhase('building')
     useEditor.getState().setMode('build')
     useEditor.getState().setTool('wall')
     useEditor.getState().setMode('terrain-sculpt')

package/src/store/tool-mode.test.ts

@@ -1,9 +1,14 @@
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import { type AnyNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { beginGesture } from '../lib/gesture-lifecycle'
 import useEditor, { normalizePersistedEditorUiState } from './use-editor'
+import useInteractionScope from './use-interaction-scope'
 
 function resetToolMode() {
-  useEditor.getState().setPhase('structure')
-  useEditor.getState().setStructureLayer('elements')
+  useEditor.getState().clearRoom()
+  useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
+  useEditor.getState().setPhase('building')
   useEditor.getState().armToolMode({ mode: 'select' })
   useEditor.getState().setActivePaintMaterial(null)
 }
@@ -12,6 +17,18 @@ beforeEach(resetToolMode)
 afterEach(resetToolMode)
 
 describe('ToolMode transition', () => {
+  test('arming building tools preserves the current phase', () => {
+    for (const phase of ['site', 'building'] as const) {
+      useEditor.getState().setPhase(phase)
+      useEditor.getState().armToolMode({ mode: 'select' })
+      for (const tool of ['item', 'wall', 'measurement', 'zone'] as const) {
+        useEditor.getState().armToolMode({ mode: 'build', tool })
+        expect(useEditor.getState().phase).toBe(phase)
+        expect(useEditor.getState().tool).toBe(tool)
+      }
+    }
+  })
+
   test('choosing a paint swatch while selected arms material paint', () => {
     useEditor.getState().armToolMode({ mode: 'select' })
     useEditor.getState().armMaterialPaint({
@@ -56,14 +73,129 @@ describe('ToolMode transition', () => {
   })
 })
 
+describe('leaving Select ends the selection', () => {
+  const ROOM = { levelId: 'level_1', zoneId: 'zone_1' }
+
+  function selectRoomAndNode() {
+    useEditor.getState().armToolMode({ mode: 'select' })
+    useViewer
+      .getState()
+      .setSelection({ selectedIds: ['wall_1' as never], zoneId: 'zone_1' as never })
+    useEditor.getState().selectRoom(ROOM)
+    useEditor.getState().setSelectedReferenceId(null)
+  }
+
+  function expectNothingSelected() {
+    expect(useViewer.getState().selection.selectedIds).toEqual([])
+    expect(useViewer.getState().selection.zoneId).toBeNull()
+    expect(useEditor.getState().room).toBeNull()
+  }
+
+  test('picking a catalog item (the item tool) clears the room and node selection', () => {
+    selectRoomAndNode()
+    useEditor.getState().setSelectedItem({ id: 'chair' } as never)
+    useEditor.getState().setTool('item')
+    expectNothingSelected()
+  })
+
+  test('the door and window tools clear it', () => {
+    for (const tool of ['door', 'window'] as const) {
+      selectRoomAndNode()
+      useEditor.getState().armToolMode({ mode: 'build', tool })
+      expectNothingSelected()
+    }
+  })
+
+  test('draw tools clear it, and so does switching from one tool to another', () => {
+    selectRoomAndNode()
+    useEditor.getState().setMode('build')
+    expect(useEditor.getState().tool).toBe('wall')
+    expectNothingSelected()
+
+    // A tool that selects what it just drew (the roof, to draw into it next)
+    // loses that selection when another tool is picked.
+    useViewer.getState().setSelection({ selectedIds: ['roof_1' as never] })
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'slab' })
+    expectNothingSelected()
+  })
+
+  test('re-arming the tool already in hand is not a transition', () => {
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'roof' })
+    useViewer.getState().setSelection({ selectedIds: ['roof_1' as never] })
+    useEditor.getState().setTool('roof')
+    expect(useViewer.getState().selection.selectedIds).toEqual(['roof_1'])
+  })
+
+  test('paint clears it, after taking its target from the selection', () => {
+    const previousNodes = useScene.getState().nodes
+    useScene.setState({
+      nodes: { roof_1: { id: 'roof_1', type: 'roof' } as unknown as AnyNode } as never,
+    })
+    try {
+      useEditor.getState().setActivePaintTarget('wall')
+      selectRoomAndNode()
+      useViewer.getState().setSelection({ selectedIds: ['roof_1' as never] })
+      useEditor.getState().armMaterialPaint()
+      expect(useEditor.getState().mode).toBe('material-paint')
+      expect(useEditor.getState().activePaintTarget).toBe('roof')
+      expectNothingSelected()
+    } finally {
+      useScene.setState({ nodes: previousNodes })
+    }
+  })
+
+  test('terrain sculpt and delete clear it', () => {
+    for (const mode of ['terrain-sculpt', 'delete'] as const) {
+      selectRoomAndNode()
+      useEditor.getState().armToolMode({ mode })
+      expectNothingSelected()
+    }
+  })
+
+  test('the level and building context survive', () => {
+    useViewer
+      .getState()
+      .setSelection({ buildingId: 'building_1' as never, levelId: 'level_1' as never })
+    selectRoomAndNode()
+    useEditor.getState().armToolMode({ mode: 'build', tool: 'door' })
+    expect(useViewer.getState().selection.levelId).toBe('level_1')
+    expect(useViewer.getState().selection.buildingId).toBe('building_1')
+  })
+
+  test('Select, and a move or handle drag inside it, keep the selection', () => {
+    selectRoomAndNode()
+    useEditor.getState().armToolMode({ mode: 'select' })
+    expect(useViewer.getState().selection.selectedIds).toEqual(['wall_1'])
+    expect(useEditor.getState().room).toEqual(ROOM)
+
+    let cancelled = false
+    const handle = beginGesture({
+      kind: 'test-handle',
+      onCancel: () => {
+        cancelled = true
+      },
+    })
+    useEditor.getState().armToolMode({ mode: 'select' })
+    expect(handle.active).toBe(true)
+    handle.end()
+    expect(cancelled).toBe(false)
+
+    useEditor.getState().setMovingNode({ id: 'wall_1', type: 'wall' } as unknown as AnyNode)
+    expect(useInteractionScope.getState().scope.kind).toBe('moving')
+    expect(useEditor.getState().mode).toBe('select')
+    expect(useViewer.getState().selection.selectedIds).toEqual(['wall_1'])
+    useEditor.getState().setMovingNode(null)
+    expect(useViewer.getState().selection.selectedIds).toEqual(['wall_1'])
+  })
+})
+
 describe('persisted ToolMode normalization', () => {
   test('elects a default for build with a null tool', () => {
     const state = normalizePersistedEditorUiState({
-      phase: 'structure',
+      phase: 'building',
       toolMode: { mode: 'build', tool: null as never },
       mode: 'select',
       tool: 'slab',
-      structureLayer: 'elements',
     })
 
     expect(state.toolMode).toEqual({ mode: 'build', tool: 'wall' })
@@ -73,11 +205,10 @@ describe('persisted ToolMode normalization', () => {
 
   test('clears a persisted tool from a non-build mode', () => {
     const state = normalizePersistedEditorUiState({
-      phase: 'structure',
+      phase: 'building',
       toolMode: { mode: 'select' },
       mode: 'build',
       tool: 'wall',
-      structureLayer: 'elements',
     })
 
     expect(state.toolMode).toEqual({ mode: 'select' })

package/src/store/use-audio.test.ts

@@ -0,0 +1,146 @@
+import { afterAll, beforeEach, describe, expect, test } from 'bun:test'
+import useAudio, { AUDIO_MUTED_STORAGE_KEY, AUDIO_SETTINGS_STORAGE_KEY } from './use-audio'
+
+function memoryStorage() {
+  const items = new Map<string, string>()
+  return {
+    items,
+    getItem: (key: string) => items.get(key) ?? null,
+    setItem: (key: string, value: string) => void items.set(key, value),
+    removeItem: (key: string) => void items.delete(key),
+  }
+}
+
+const originals = {
+  localStorage: Object.getOwnPropertyDescriptor(globalThis, 'localStorage'),
+  sessionStorage: Object.getOwnPropertyDescriptor(globalThis, 'sessionStorage'),
+}
+
+function use(name: 'localStorage' | 'sessionStorage', storage: ReturnType<typeof memoryStorage>) {
+  Object.defineProperty(globalThis, name, { configurable: true, value: storage })
+}
+
+/** One browser profile: its tabs share `localStorage`, each has its own `sessionStorage`. */
+let browser = memoryStorage()
+
+/** Another tab of the profile saves the settings: the browser stores them and tells this tab. */
+function savedInAnotherTab(state: Record<string, unknown>) {
+  const value = JSON.stringify({ state, version: 0 })
+  browser.setItem(AUDIO_SETTINGS_STORAGE_KEY, value)
+  globalThis.dispatchEvent(
+    Object.assign(new Event('storage'), { key: AUDIO_SETTINGS_STORAGE_KEY, newValue: value }),
+  )
+}
+
+/** The editor loading in a tab: a new one, or the same one reloaded (its session kept). */
+async function loadIn(tab: ReturnType<typeof memoryStorage>) {
+  use('sessionStorage', tab)
+  await useAudio.persist.rehydrate()
+  return useAudio.getState()
+}
+
+beforeEach(() => {
+  browser = memoryStorage()
+  use('localStorage', browser)
+})
+
+afterAll(() => {
+  for (const [name, descriptor] of Object.entries(originals)) {
+    if (descriptor) Object.defineProperty(globalThis, name, descriptor)
+    else Reflect.deleteProperty(globalThis, name)
+  }
+})
+
+describe('muting a tab', () => {
+  test('a tab keeps its own mute across reloads, and a new tab starts from the last choice', async () => {
+    const first = memoryStorage()
+    const second = memoryStorage()
+
+    expect((await loadIn(first)).muted).toBe(false)
+    useAudio.getState().toggleMute()
+
+    expect((await loadIn(second)).muted).toBe(true)
+    useAudio.getState().setMuted(false)
+
+    expect((await loadIn(first)).muted).toBe(true)
+    expect((await loadIn(memoryStorage())).muted).toBe(false)
+  })
+
+  test("another tab's choice does not change a tab that never chose", async () => {
+    const quiet = memoryStorage()
+    expect((await loadIn(quiet)).muted).toBe(false)
+
+    await loadIn(memoryStorage())
+    useAudio.getState().setMuted(true)
+
+    expect((await loadIn(quiet)).muted).toBe(false)
+  })
+
+  test("volumes are every tab's and never carry a mute", async () => {
+    const muting = memoryStorage()
+    await loadIn(muting)
+    useAudio.getState().setMuted(true)
+
+    await loadIn(memoryStorage())
+    useAudio.getState().setMuted(false)
+    await loadIn(muting)
+    useAudio.getState().setSfxVolume(20)
+
+    expect(JSON.parse(browser.getItem(AUDIO_SETTINGS_STORAGE_KEY)!).state).not.toHaveProperty(
+      'muted',
+    )
+    expect(browser.getItem(AUDIO_MUTED_STORAGE_KEY)).toBe('false')
+    const next = await loadIn(memoryStorage())
+    expect(next.sfxVolume).toBe(20)
+    expect(next.muted).toBe(false)
+  })
+
+  test("a volume another tab sets reaches this one at once, and this tab's saves carry it", async () => {
+    await loadIn(memoryStorage())
+    useAudio.getState().setSfxVolume(30)
+    useAudio.getState().setRadioPlaying(true)
+    const stored = JSON.parse(browser.getItem(AUDIO_SETTINGS_STORAGE_KEY)!)
+
+    savedInAnotherTab({ ...stored.state, isRadioPlaying: false, muted: true, sfxVolume: 80 })
+
+    expect(useAudio.getState()).toMatchObject({ isRadioPlaying: true, muted: false, sfxVolume: 80 })
+    const setElsewhere = browser.getItem(AUDIO_SETTINGS_STORAGE_KEY)
+    useAudio.getState().setMuted(true)
+    expect(browser.getItem(AUDIO_SETTINGS_STORAGE_KEY)).toBe(setElsewhere)
+    // The radio pausing as the tab is hidden saves every setting: the other tab's volume stays.
+    useAudio.getState().setRadioPlaying(false)
+    useAudio.getState().setMasterVolume(60)
+    expect(JSON.parse(browser.getItem(AUDIO_SETTINGS_STORAGE_KEY)!).state).toMatchObject({
+      masterVolume: 60,
+      sfxVolume: 80,
+    })
+  })
+
+  test("a mute saved when it was every tab's still holds, in settings the old build still reads", async () => {
+    browser.setItem(
+      AUDIO_SETTINGS_STORAGE_KEY,
+      JSON.stringify({ state: { masterVolume: 40, muted: true, sfxVolume: 50 }, version: 0 }),
+    )
+
+    const state = await loadIn(memoryStorage())
+
+    expect(state.muted).toBe(true)
+    expect(state.masterVolume).toBe(40)
+    expect((await loadIn(memoryStorage())).muted).toBe(true)
+    useAudio.getState().setSfxVolume(45)
+    const saved = JSON.parse(browser.getItem(AUDIO_SETTINGS_STORAGE_KEY)!)
+    expect(saved).toMatchObject({ state: { masterVolume: 40, sfxVolume: 45 }, version: 0 })
+    expect(saved.state).not.toHaveProperty('muted')
+  })
+
+  test('a tab still on the old settings does not undo a choice made since', async () => {
+    await loadIn(memoryStorage())
+    useAudio.getState().setMuted(false)
+    browser.setItem(
+      AUDIO_SETTINGS_STORAGE_KEY,
+      JSON.stringify({ state: { muted: true, sfxVolume: 50 }, version: 0 }),
+    )
+
+    expect((await loadIn(memoryStorage())).muted).toBe(false)
+  })
+})

package/src/store/use-audio.tsx

@@ -1,13 +1,22 @@
 'use client'
 
 import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+export const AUDIO_SETTINGS_STORAGE_KEY = 'pascal-audio-settings'
+/**
+ * Mute is each tab's own, so someone working in two projects can silence one and hear the other.
+ * Under this key `sessionStorage` holds this tab's mute (kept across its reloads) and
+ * `localStorage` the last choice made in any tab, which a new tab starts from.
+ */
+export const AUDIO_MUTED_STORAGE_KEY = 'pascal-audio-muted'
 
 interface AudioState {
   masterVolume: number
   sfxVolume: number
   radioVolume: number
   isRadioPlaying: boolean
+  /** This tab's mute; the volumes are every tab's. */
   muted: boolean
   autoplay: boolean
   setMasterVolume: (v: number) => void
@@ -15,10 +24,73 @@ interface AudioState {
   setRadioVolume: (v: number) => void
   setRadioPlaying: (v: boolean) => void
   toggleRadioPlaying: () => void
+  setMuted: (muted: boolean) => void
   toggleMute: () => void
   setAutoplay: (v: boolean) => void
 }
 
+type StoredSettings = Pick<
+  AudioState,
+  'masterVolume' | 'sfxVolume' | 'radioVolume' | 'isRadioPlaying' | 'autoplay'
+>
+
+type BrowserStorage = 'localStorage' | 'sessionStorage'
+
+// Storage can be missing (a test, a server render) or refuse access (site data blocked): the page
+// then keeps its choices in memory only.
+function readStored(storage: BrowserStorage, key: string) {
+  try {
+    return globalThis[storage]?.getItem(key) ?? null
+  } catch {
+    return null
+  }
+}
+
+function writeStored(storage: BrowserStorage, key: string, value: string) {
+  try {
+    globalThis[storage]?.setItem(key, value)
+  } catch {}
+}
+
+/** This tab's mute. A tab without one takes the last choice made in any tab, and keeps it. */
+function tabMuted(): boolean {
+  const own = readStored('sessionStorage', AUDIO_MUTED_STORAGE_KEY)
+  if (own !== null) return own === 'true'
+  const muted = readStored('localStorage', AUDIO_MUTED_STORAGE_KEY) === 'true'
+  writeStored('sessionStorage', AUDIO_MUTED_STORAGE_KEY, String(muted))
+  return muted
+}
+
+/** A mute chosen in this tab: this tab's, and where the next new tab starts. Open tabs keep theirs. */
+function chooseMuted(muted: boolean) {
+  writeStored('sessionStorage', AUDIO_MUTED_STORAGE_KEY, String(muted))
+  writeStored('localStorage', AUDIO_MUTED_STORAGE_KEY, String(muted))
+  return { muted }
+}
+
+// The settings as this tab last read, wrote or took from another tab. A save carries every
+// setting, so a save that changes none (a mute, which is this tab's own) is skipped.
+let heldSettings: string | null = null
+// Set while this tab takes another tab's volumes: that is no choice of its own to save back.
+let adopting = false
+
+const settingsStorage = createJSONStorage<StoredSettings>(() => ({
+  getItem: (key) => {
+    heldSettings = readStored('localStorage', key)
+    return heldSettings
+  },
+  setItem: (key, value) => {
+    if (value === heldSettings) return
+    heldSettings = value
+    if (!adopting) writeStored('localStorage', key, value)
+  },
+  removeItem: (key) => {
+    try {
+      globalThis.localStorage?.removeItem(key)
+    } catch {}
+  },
+}))
+
 const useAudio = create<AudioState>()(
   persist(
     (set) => ({
@@ -33,13 +105,65 @@ const useAudio = create<AudioState>()(
       setRadioVolume: (v) => set({ radioVolume: v }),
       setRadioPlaying: (v) => set({ isRadioPlaying: v }),
       toggleRadioPlaying: () => set((state) => ({ isRadioPlaying: !state.isRadioPlaying })),
-      toggleMute: () => set((state) => ({ muted: !state.muted })),
+      setMuted: (muted) => set(chooseMuted(muted)),
+      toggleMute: () => set((state) => chooseMuted(!state.muted)),
       setAutoplay: (v) => set({ autoplay: v }),
     }),
     {
-      name: 'pascal-audio-settings',
+      name: AUDIO_SETTINGS_STORAGE_KEY,
+      storage: settingsStorage,
+      partialize: ({ masterVolume, sfxVolume, radioVolume, isRadioPlaying, autoplay }) => ({
+        masterVolume,
+        sfxVolume,
+        radioVolume,
+        isRadioPlaying,
+        autoplay,
+      }),
+      // The settings once held one mute for every tab: whoever had muted stays muted, unless a tab
+      // has chosen since (a tab still on that build can write it again). The format is unchanged,
+      // so that build reads these settings back with only the mute gone.
+      merge: (persisted, current) => {
+        const { muted, ...settings } = (persisted ?? {}) as Partial<StoredSettings> & {
+          muted?: unknown
+        }
+        if (
+          typeof muted === 'boolean' &&
+          readStored('localStorage', AUDIO_MUTED_STORAGE_KEY) === null
+        ) {
+          writeStored('localStorage', AUDIO_MUTED_STORAGE_KEY, String(muted))
+        }
+        return { ...current, ...settings, muted: tabMuted() }
+      },
     },
   ),
 )
 
+/**
+ * Another tab saved the settings: the volumes are every tab's, so this tab takes them at once, and
+ * a later save of its own carries them. Its mute and whether its radio plays stay its own.
+ */
+function adoptOtherTabSettings(event: StorageEvent) {
+  if (event.key !== AUDIO_SETTINGS_STORAGE_KEY || event.newValue === null) return
+  let stored: Partial<Record<keyof StoredSettings, unknown>> | undefined
+  try {
+    stored = JSON.parse(event.newValue)?.state
+  } catch {
+    return
+  }
+  const shared: Partial<StoredSettings> = {}
+  for (const key of ['masterVolume', 'sfxVolume', 'radioVolume'] as const) {
+    const value = stored?.[key]
+    if (typeof value === 'number') shared[key] = value
+  }
+  if (typeof stored?.autoplay === 'boolean') shared.autoplay = stored.autoplay
+  adopting = true
+  try {
+    useAudio.setState(shared)
+  } finally {
+    adopting = false
+  }
+}
+
+globalThis.addEventListener?.('storage', adoptOtherTabSettings)
+
 export default useAudio