@pascal-app/editor 1.0.7 → 1.1.1

package/src/lib/room-name-messages.ts

@@ -1,14 +1,7 @@
 import type { MessageDescriptor } from '@pascal-app/core'
+import { type DescriptorTranslator, displayRoomName } from '@pascal-app/viewer/ui'
 import type { RoomNameSection } from './room-name-catalog'
 
-/**
- * The room-name catalog in the UI language. The catalog stays English (it is
- * matched, numbered and stored as data); the combobox and room labels show these.
- * `room-name-catalog.test.ts` fails when a catalog name has no entry here.
- */
-/** Anything that translates a descriptor: a `PascalI18n`, or a stand-in in tests. */
-export type DescriptorTranslator = { _(descriptor: MessageDescriptor): string }
-
 export const ROOM_NAME_SECTION_TITLES: Record<string, MessageDescriptor> = {
   living: /* i18n */ { id: 'editor.roomName.section.living', message: 'Living' },
   sleeping: /* i18n */ { id: 'editor.roomName.section.sleeping', message: 'Sleeping' },
@@ -20,72 +13,6 @@ export const ROOM_NAME_SECTION_TITLES: Record<string, MessageDescriptor> = {
   mezzanine: /* i18n */ { id: 'editor.roomName.section.mezzanine', message: 'Mezzanine' },
 }
 
-export const ROOM_NAME_MESSAGES: Record<string, MessageDescriptor> = {
-  'Living room': /* i18n */ { id: 'editor.roomName.livingRoom', message: 'Living room' },
-  'Family room': /* i18n */ { id: 'editor.roomName.familyRoom', message: 'Family room' },
-  'Dining room': /* i18n */ { id: 'editor.roomName.diningRoom', message: 'Dining room' },
-  Kitchen: /* i18n */ { id: 'editor.roomName.kitchen', message: 'Kitchen' },
-  Kitchenette: /* i18n */ { id: 'editor.roomName.kitchenette', message: 'Kitchenette' },
-  Pantry: /* i18n */ { id: 'editor.roomName.pantry', message: 'Pantry' },
-  Lounge: /* i18n */ { id: 'editor.roomName.lounge', message: 'Lounge' },
-  Den: /* i18n */ { id: 'editor.roomName.den', message: 'Den' },
-  Library: /* i18n */ { id: 'editor.roomName.library', message: 'Library' },
-  Playroom: /* i18n */ { id: 'editor.roomName.playroom', message: 'Playroom' },
-  'Home cinema': /* i18n */ { id: 'editor.roomName.homeCinema', message: 'Home cinema' },
-  'Games room': /* i18n */ { id: 'editor.roomName.gamesRoom', message: 'Games room' },
-  Sunroom: /* i18n */ { id: 'editor.roomName.sunroom', message: 'Sunroom' },
-  Bedroom: /* i18n */ { id: 'editor.roomName.bedroom', message: 'Bedroom' },
-  'Primary bedroom': /* i18n */ {
-    id: 'editor.roomName.primaryBedroom',
-    message: 'Primary bedroom',
-  },
-  'Guest room': /* i18n */ { id: 'editor.roomName.guestRoom', message: 'Guest room' },
-  "Kids' room": /* i18n */ { id: 'editor.roomName.kidsRoom', message: "Kids' room" },
-  Nursery: /* i18n */ { id: 'editor.roomName.nursery', message: 'Nursery' },
-  'Dressing room': /* i18n */ { id: 'editor.roomName.dressingRoom', message: 'Dressing room' },
-  'Walk-in closet': /* i18n */ { id: 'editor.roomName.walkInCloset', message: 'Walk-in closet' },
-  Bathroom: /* i18n */ { id: 'editor.roomName.bathroom', message: 'Bathroom' },
-  'En-suite': /* i18n */ { id: 'editor.roomName.enSuite', message: 'En-suite' },
-  'Shower room': /* i18n */ { id: 'editor.roomName.showerRoom', message: 'Shower room' },
-  Toilet: /* i18n */ { id: 'editor.roomName.toilet', message: 'Toilet' },
-  'Powder room': /* i18n */ { id: 'editor.roomName.powderRoom', message: 'Powder room' },
-  Office: /* i18n */ { id: 'editor.roomName.office', message: 'Office' },
-  Study: /* i18n */ { id: 'editor.roomName.study', message: 'Study' },
-  Studio: /* i18n */ { id: 'editor.roomName.studio', message: 'Studio' },
-  Workshop: /* i18n */ { id: 'editor.roomName.workshop', message: 'Workshop' },
-  Gym: /* i18n */ { id: 'editor.roomName.gym', message: 'Gym' },
-  Entrance: /* i18n */ { id: 'editor.roomName.entrance', message: 'Entrance' },
-  Hallway: /* i18n */ { id: 'editor.roomName.hallway', message: 'Hallway' },
-  Corridor: /* i18n */ { id: 'editor.roomName.corridor', message: 'Corridor' },
-  Landing: /* i18n */ { id: 'editor.roomName.landing', message: 'Landing' },
-  Stairwell: /* i18n */ { id: 'editor.roomName.stairwell', message: 'Stairwell' },
-  Mudroom: /* i18n */ { id: 'editor.roomName.mudroom', message: 'Mudroom' },
-  Laundry: /* i18n */ { id: 'editor.roomName.laundry', message: 'Laundry' },
-  'Utility room': /* i18n */ { id: 'editor.roomName.utilityRoom', message: 'Utility room' },
-  Storage: /* i18n */ { id: 'editor.roomName.storage', message: 'Storage' },
-  Closet: /* i18n */ { id: 'editor.roomName.closet', message: 'Closet' },
-  'Boiler room': /* i18n */ { id: 'editor.roomName.boilerRoom', message: 'Boiler room' },
-  Cellar: /* i18n */ { id: 'editor.roomName.cellar', message: 'Cellar' },
-  Basement: /* i18n */ { id: 'editor.roomName.basement', message: 'Basement' },
-  Attic: /* i18n */ { id: 'editor.roomName.attic', message: 'Attic' },
-  Garage: /* i18n */ { id: 'editor.roomName.garage', message: 'Garage' },
-  Garden: /* i18n */ { id: 'editor.roomName.garden', message: 'Garden' },
-  Patio: /* i18n */ { id: 'editor.roomName.patio', message: 'Patio' },
-  Terrace: /* i18n */ { id: 'editor.roomName.terrace', message: 'Terrace' },
-  Balcony: /* i18n */ { id: 'editor.roomName.balcony', message: 'Balcony' },
-  Porch: /* i18n */ { id: 'editor.roomName.porch', message: 'Porch' },
-  Veranda: /* i18n */ { id: 'editor.roomName.veranda', message: 'Veranda' },
-  Deck: /* i18n */ { id: 'editor.roomName.deck', message: 'Deck' },
-  Courtyard: /* i18n */ { id: 'editor.roomName.courtyard', message: 'Courtyard' },
-  'Pool area': /* i18n */ { id: 'editor.roomName.poolArea', message: 'Pool area' },
-  Carport: /* i18n */ { id: 'editor.roomName.carport', message: 'Carport' },
-  'Garden shed': /* i18n */ { id: 'editor.roomName.gardenShed', message: 'Garden shed' },
-  Mezzanine: /* i18n */ { id: 'editor.roomName.mezzanine', message: 'Mezzanine' },
-  Loft: /* i18n */ { id: 'editor.roomName.loft', message: 'Loft' },
-  'Reading nook': /* i18n */ { id: 'editor.roomName.readingNook', message: 'Reading nook' },
-  Gallery: /* i18n */ { id: 'editor.roomName.gallery', message: 'Gallery' },
-}
-
 export function localizedRoomNameSections(
   sections: readonly RoomNameSection[],
   i18n: DescriptorTranslator,
@@ -101,47 +28,3 @@ export function localizedRoomNameSections(
     }
   })
 }
-
-/**
- * A room name in the UI language. Catalog names stay English in the scene
- * (numbering, MCP and exports read them); a catalog name with the number the
- * picker adds shows translated with that number ("Bedroom 2" → "Chambre 2").
- * Anything else the user typed shows as written.
- */
-export function displayRoomName(name: string, i18n: DescriptorTranslator): string {
-  const { lead, base, number, trail } = roomNameParts(name)
-  const label = catalogLabel(base, i18n)
-  return label === undefined ? name : `${lead}${label}${number}${trail}`
-}
-
-/**
- * What an edit of a room's name field stores. The field shows the room's own
- * catalog name translated ("Lounge 2" as "Salon 2"); when the edit only
- * changes, adds or removes that name's number ("Salon 3"), it stores the
- * English name with the new number ("Lounge 3"), as editing it in English
- * would. Any other text, an exact translation of a different name included, is
- * stored exactly as typed.
- */
-export function editedRoomName(stored: string, text: string, i18n: DescriptorTranslator): string {
-  const own = roomNameParts(stored).base
-  const label = catalogLabel(own, i18n)
-  const edited = roomNameParts(text)
-  if (label === undefined || edited.base !== label) return text
-  return `${edited.lead}${own}${edited.number}${edited.trail}`
-}
-
-function roomNameParts(name: string) {
-  const match = /^(\s*)(.*?)(\s+\d+)?(\s*)$/.exec(name)
-  return {
-    lead: match?.[1] ?? '',
-    base: match?.[2] ?? '',
-    number: match?.[3] ?? '',
-    trail: match?.[4] ?? '',
-  }
-}
-
-function catalogLabel(english: string, i18n: DescriptorTranslator): string | undefined {
-  // Own keys only: a room named "constructor" or "__proto__" is free text.
-  if (!(english && Object.hasOwn(ROOM_NAME_MESSAGES, english))) return undefined
-  return i18n._(ROOM_NAME_MESSAGES[english]!)
-}

package/src/lib/room-name-storage.test.ts

@@ -15,6 +15,7 @@ import {
 } from '@pascal-app/core'
 import { AGENT_OPERATIONS, applyAgentOutcome } from '@pascal-app/core/agent-operations'
 import { createAgentHost, liveSceneRuntime } from '@pascal-app/core/runtime'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 import {
   commitRoomNameEdit,
   commitRoomNamePick,
@@ -22,7 +23,7 @@ import {
   roomNameOptions,
 } from '../components/ui/panels/room-name-options'
 import { roomNameSections } from './room-name-catalog'
-import { displayRoomName, localizedRoomNameSections } from './room-name-messages'
+import { localizedRoomNameSections } from './room-name-messages'
 import { applyRoomPlan, renameRoom } from './room-structure-commands'
 import { copySelectedNodesToEditorClipboard, pasteEditorClipboardToLevel } from './scene-clipboard'
 

package/src/lib/room-push-dimensions.test.ts

@@ -2,11 +2,11 @@ import { describe, expect, test } from 'bun:test'
 import {
   type AnyNode,
   createRoomTopologyIndex,
+  formatLinearMeasurement,
   LevelNode,
   type Point,
   WallNode,
 } from '@pascal-app/core'
-import { formatLinearMeasurement } from './measurements'
 import {
   DIMENSION_FLOOR_LIFT,
   mezzanineEdgeDimensions,

package/src/lib/room-selection-commands.ts

@@ -1,9 +1,9 @@
 import { type AnyNodeId, type BuildingNode, type LevelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import type { SelectionModifierKeys } from '@pascal-app/viewer/ui'
+import { type RoomKey, shouldSelectRoom } from '@pascal-app/viewer/ui'
 import useEditor from '../store/use-editor'
 import useSessionGroups from '../store/use-session-groups'
-import { type RoomKey, shouldSelectRoom } from './room-selection'
-import type { SelectionModifierKeys } from './selection-routing'
 
 export function selectRoom(room: RoomKey) {
   const level = useScene.getState().nodes[room.levelId as AnyNodeId]

package/src/lib/room-selection.test.ts

@@ -24,6 +24,12 @@ import {
 } from '@pascal-app/core'
 import { migrateCeilingRoomLinks, migrateRoomZones } from '@pascal-app/core/scene-migrations'
 import { useViewer } from '@pascal-app/viewer'
+import {
+  type RoomKey,
+  RoomSelectionIndex,
+  resolveRoomHit,
+  shouldSelectRoom,
+} from '@pascal-app/viewer/ui'
 import { _roots, act } from '@react-three/fiber'
 import { createElement } from 'react'
 import { Group, type LineSegments } from 'three'
@@ -37,12 +43,6 @@ import useSessionGroups from '../store/use-session-groups'
 import { withSelectionHarness } from '../test-utils/selection-harness'
 import { startRoomDivide } from './room-divide-session'
 import { runRoomHandleDrag } from './room-handle-drag'
-import {
-  type RoomKey,
-  RoomSelectionIndex,
-  resolveRoomHit,
-  shouldSelectRoom,
-} from './room-selection'
 import { selectRoom, selectRoomFromHit, shouldInterceptRoom } from './room-selection-commands'
 
 const levelId = 'level_room_selection'

package/src/lib/room-transform-session.ts

@@ -10,7 +10,7 @@ import {
   useScene,
   type ZoneTransformPlan,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { isTypingTarget, useViewer } from '@pascal-app/viewer'
 import { Plane, Vector2, Vector3 } from 'three'
 import { create } from 'zustand'
 import { levelFrame } from '../components/editor/group-transform-shared'
@@ -23,7 +23,6 @@ import { beginGesture, type GestureHandle } from './gesture-lifecycle'
 import { isHistoryShortcut } from './history'
 import { mezzanineConflictMessage } from './mezzanine-messages'
 import { sfxEmitter } from './sfx-bus'
-import { isTypingTarget } from './typing-target'
 
 export const ROOM_MOVE_DRAG_LABEL = 'room-move'
 

package/src/lib/room-zone-routing.ts

@@ -1,11 +1,11 @@
 import { type AnyNode, type AnyNodeId, useScene, type ZoneNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import { type RoomKey, type SelectionModifierKeys, sameRoom } from '@pascal-app/viewer/ui'
 import { getRoomSelectionIndex, hoverRoomFromHit } from '../hooks/use-selected-room'
 import useEditor from '../store/use-editor'
 import { expandSessionSelectionForNode } from '../store/use-session-groups'
-import { type RoomKey, sameRoom } from './room-selection'
 import { selectRoom } from './room-selection-commands'
-import { resolveSelectedIdsForNodeClick, type SelectionModifierKeys } from './selection-routing'
+import { resolveSelectedIdsForNodeClick } from './selection-routing'
 
 // A room is one thing to the user whichever way they reach it: the canvas, the
 // Rooms list, the plan's fill or its label. Rooms the room index knows (closed,

package/src/lib/scene-clipboard.ts

@@ -6,6 +6,7 @@ import {
   generateSceneMaterialId,
   getArtifactStore,
   isDerivedNode,
+  isNodeDuplicable,
   isStoreyContent,
   type LevelNode,
   nodeRegistry,
@@ -156,7 +157,7 @@ function isClipboardRoot(
 }
 
 function isCopyableRootType(node: AnyNode) {
-  if (isDerivedNode(node)) return false
+  if (isDerivedNode(node) || !isNodeDuplicable(node)) return false
   if (COPYABLE_ROOT_TYPES.has(node.type)) return true
   const definition = nodeRegistry.get(node.type)
   return !!definition && definition.capabilities?.duplicable !== false

package/src/lib/selection-routing.test.ts

@@ -18,7 +18,6 @@ import {
   resolveCanvasBuildingId,
   resolveCanvasSelectionNode,
   resolveSelectedIdsForNodeClick,
-  selectionModifiersFromEvent,
   shouldPreserveSelectedRoofHostTarget,
 } from './selection-routing'
 
@@ -249,33 +248,6 @@ describe('deleteNodeFromCanvas', () => {
   })
 })
 
-describe('selectionModifiersFromEvent', () => {
-  test('falls back to tracked modifier state when the click event omits keys', () => {
-    expect(
-      selectionModifiersFromEvent({}, { meta: false, ctrl: true, shift: false, alt: false }),
-    ).toEqual({
-      meta: false,
-      ctrl: true,
-      shift: false,
-      alt: false,
-    })
-  })
-
-  test('prefers explicit event key state over stale tracked modifiers', () => {
-    expect(
-      selectionModifiersFromEvent(
-        { metaKey: false, ctrlKey: false, shiftKey: false, altKey: false },
-        { meta: true, ctrl: true, shift: true, alt: true },
-      ),
-    ).toEqual({
-      meta: false,
-      ctrl: false,
-      shift: false,
-      alt: false,
-    })
-  })
-})
-
 describe('resolveCanvasSelectionNode', () => {
   // Mirrors the cabinet-module setup: modules proxy to their run for grouped
   // move / rotate, but declare `selectionProxy.bypassDirectPick` so a direct

package/src/lib/selection-routing.ts

@@ -8,6 +8,7 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import type { SelectionModifierKeys } from '@pascal-app/viewer/ui'
 import useEditor from '../store/use-editor'
 import { emitDeleteSFX } from './sfx-bus'
 
@@ -43,14 +44,6 @@ export function enterBuildingFromPlanHit(hitId: string | null): boolean {
   return node ? enterBuildingFromCanvas(node) : false
 }
 
-export type SelectionModifierKeys = {
-  meta: boolean
-  ctrl: boolean
-  shift: boolean
-  /** Alt alone: select one session-group member without expanding. */
-  alt: boolean
-}
-
 /** A Delete-mode click on a plan entry: the sledgehammer, not a selection. */
 /**
  * A canvas click (2D or 3D) selected `node`: publish it on
@@ -111,38 +104,6 @@ export function isSelectionModifierActive(keys: SelectionModifierKeys): boolean
   return keys.meta || keys.ctrl || keys.shift
 }
 
-export function selectionModifiersFromEvent(
-  event?: {
-    metaKey?: boolean
-    ctrlKey?: boolean
-    shiftKey?: boolean
-    altKey?: boolean
-    nativeEvent?: {
-      metaKey?: boolean
-      ctrlKey?: boolean
-      shiftKey?: boolean
-      altKey?: boolean
-    }
-  } | null,
-  fallback?: Partial<SelectionModifierKeys>,
-): SelectionModifierKeys {
-  const fromEvent = (
-    key: keyof SelectionModifierKeys,
-    eventKey: 'metaKey' | 'ctrlKey' | 'shiftKey' | 'altKey',
-  ) => {
-    if (typeof event?.[eventKey] === 'boolean') return event[eventKey]
-    if (typeof event?.nativeEvent?.[eventKey] === 'boolean') return event.nativeEvent[eventKey]
-    return Boolean(fallback?.[key])
-  }
-
-  return {
-    meta: fromEvent('meta', 'metaKey'),
-    ctrl: fromEvent('ctrl', 'ctrlKey'),
-    shift: fromEvent('shift', 'shiftKey'),
-    alt: fromEvent('alt', 'altKey'),
-  }
-}
-
 export function resolveSelectedIdsForNodeClick({
   baseSelectedIds,
   currentSelectedIds,

package/src/lib/sfx-bus.ts

@@ -1,11 +1,11 @@
-import { emitter, type InteractionSound, type TerrainVerb } from '@pascal-app/core'
+import type { TerrainVerb } from '@pascal-app/core'
+import { initInteractionSounds } from '@pascal-app/viewer/sfx'
 import mitt from 'mitt'
-import useAudio from '../store/use-audio'
 import {
   disposeSFX,
   type LoopSFXName,
   playSFX,
-  type SFXName,
+  preloadSFX,
   startLoopSFX,
   stopLoopSFX,
   updateSFXVolumes,
@@ -73,30 +73,7 @@ const TERRAIN_LOOP_BY_VERB = {
 } as const satisfies Record<TerrainVerb, LoopSFXName>
 const handleTerrainSculptStart = (verb: TerrainVerb) => startLoopSFX(TERRAIN_LOOP_BY_VERB[verb])
 const handleTerrainSculptStop = () => stopLoopSFX()
-let unsubscribeAudio: (() => void) | null = null
-
-/** Windows ride the door recordings, softer: a sash weighs less than a leaf. */
-const INTERACTION_SFX: Record<InteractionSound, [SFXName, number]> = {
-  'door-open': ['doorOpen', 1],
-  'door-swing': ['doorSwing', 1],
-  'door-close': ['doorClose', 1],
-  'window-open': ['doorOpen', 0.6],
-  'window-swing': ['doorSwing', 0.6],
-  'window-close': ['doorClose', 0.6],
-  garage: ['garageDoor', 1],
-  'shutters-open': ['shuttersOpen', 1],
-  'shutters-close': ['shuttersClose', 1],
-  // Cabinet doors and drawers: the panel recordings, as the marketing house plays its cabinets.
-  'panel-open': ['shuttersOpen', 0.75],
-  'panel-swing': ['doorSwing', 0.45],
-  'panel-close': ['shuttersClose', 0.75],
-  'switch-on': ['switchOn', 1],
-  'switch-off': ['switchOff', 1],
-}
-const handleInteractionSound = (sound: InteractionSound) => {
-  const [name, volumeMultiplier] = INTERACTION_SFX[sound]
-  playSFX(name, { volumeMultiplier })
-}
+let unsubscribeInteractions: (() => void) | null = null
 
 /**
  * Initialize SFX Bus - connects SFX events to actual sound playback.
@@ -124,8 +101,8 @@ export function initSFXBus() {
   sfxEmitter.on('sfx:turn-needs-input', handleTurnNeedsInput)
   sfxEmitter.on('sfx:terrain-sculpt-start', handleTerrainSculptStart)
   sfxEmitter.on('sfx:terrain-sculpt-stop', handleTerrainSculptStop)
-  emitter.on('interaction:sound', handleInteractionSound)
-  unsubscribeAudio = useAudio.subscribe(updateSFXVolumes)
+  unsubscribeInteractions = initInteractionSounds()
+  preloadSFX()
   updateSFXVolumes()
 }
 
@@ -150,9 +127,8 @@ export function disposeSFXBus() {
     sfxEmitter.off('sfx:turn-needs-input', handleTurnNeedsInput)
     sfxEmitter.off('sfx:terrain-sculpt-start', handleTerrainSculptStart)
     sfxEmitter.off('sfx:terrain-sculpt-stop', handleTerrainSculptStop)
-    emitter.off('interaction:sound', handleInteractionSound)
-    unsubscribeAudio?.()
-    unsubscribeAudio = null
+    unsubscribeInteractions?.()
+    unsubscribeInteractions = null
     sfxBusInitialized = false
   }
   disposeSFX()

package/src/lib/sfx-player.test.ts

@@ -1,5 +1,6 @@
 import { afterAll, beforeEach, describe, expect, mock, test } from 'bun:test'
-import useAudio from '../store/use-audio'
+import { emitter } from '@pascal-app/core'
+import { configureViewer } from '@pascal-app/viewer'
 
 type FakeContext = { id: string }
 
@@ -93,12 +94,18 @@ const fakeHowler = {
 
 mock.module('howler', () => ({ Howl: FakeHowl, Howler: fakeHowler }))
 
+const sharedSounds = await import('@pascal-app/viewer/sfx')
+const howlsOnImport = instances.length
+
+const { useAudioSettings: useAudio } = sharedSounds
+
 const { disposeSFX, playSFX, preloadSFX, startLoopSFX, stopLoopSFX, updateSFXVolumes } =
   await import('./sfx-player')
 const { disposeSFXBus, initSFXBus, sfxEmitter, triggerSFX } = await import('./sfx-bus')
 
 beforeEach(() => {
   disposeSFXBus()
+  configureViewer({ sfxBaseUrl: '/audios/sfx' })
   activeContext = { id: 'first' }
   initialState = 'loaded'
   useAudio.setState({ masterVolume: 100, muted: false, sfxVolume: 100 })
@@ -108,6 +115,7 @@ beforeEach(() => {
 
 afterAll(() => {
   disposeSFXBus()
+  configureViewer({})
   mock.restore()
 })
 
@@ -325,3 +333,66 @@ describe('SFX audio context lifecycle', () => {
     }
   })
 })
+
+describe('public viewer SFX entry', () => {
+  test('importing the public entry creates no Howl instances', () => {
+    expect(howlsOnImport).toBe(0)
+  })
+
+  test('resolves the default and configured SFX origins at playback time', () => {
+    configureViewer({})
+    sharedSounds.playSound('menuClick')
+    expect(
+      instances.some((s) => s.src === 'https://editor.pascal.app/audios/sfx/menu_click.mp3'),
+    ).toBe(true)
+    const previous = [...instances]
+    configureViewer({ sfxBaseUrl: 'https://sounds.example/custom/' })
+    sharedSounds.playSound('switchOn')
+    expect(previous.every((s) => s.unloadCount === 1)).toBe(true)
+    expect(instances.find((s) => s.playCount === 1 && s.src?.endsWith('switch_on.mp3'))?.src).toBe(
+      'https://sounds.example/custom/switch_on.mp3',
+    )
+    configureViewer({ sfxBaseUrl: '/audios/sfx' })
+    sharedSounds.playSound('switchOff')
+    expect(
+      instances.find((s) => s.playCount === 1 && s.src === '/audios/sfx/switch_off.mp3'),
+    ).toBeDefined()
+  })
+
+  test('interaction subscriptions share delivery and detach independently and idempotently', () => {
+    const first = sharedSounds.initInteractionSounds()
+    const second = sharedSounds.initInteractionSounds()
+    emitter.emit('interaction:sound', 'switch-on')
+    expect(instances.filter((s) => s.playCount === 1)).toHaveLength(1)
+    first()
+    first()
+    emitter.emit('interaction:sound', 'switch-off')
+    expect(instances.filter((s) => s.playCount === 1)).toHaveLength(2)
+    second()
+    emitter.emit('interaction:sound', 'garage')
+    expect(instances.filter((s) => s.playCount === 1)).toHaveLength(2)
+  })
+
+  test('interaction playback uses window and panel gains and the shared mute', () => {
+    const stop = sharedSounds.initInteractionSounds()
+    emitter.emit('interaction:sound', 'window-swing')
+    const swing = instances.find((s) => s.src === '/audios/sfx/door_swing.mp3')
+    expect(swing?.volumeCalls.find(([, id]) => id === 1)?.[0]).toBeCloseTo(0.6)
+    emitter.emit('interaction:sound', 'panel-open')
+    const panel = instances.find((s) => s.src === '/audios/sfx/shutters_open.mp3')
+    expect(panel?.volumeCalls.find(([, id]) => id === 1)?.[0]).toBeCloseTo(0.75)
+    useAudio.getState().setMuted(true)
+    emitter.emit('interaction:sound', 'switch-on')
+    expect(instances.find((s) => s.src === '/audios/sfx/switch_on.mp3')?.playCount).toBe(0)
+    stop()
+  })
+
+  test('viewer and editor UI cues reuse the same Howl cache and settings store', () => {
+    preloadSFX()
+    const count = instances.length
+    sharedSounds.playSound('menuHover')
+    playSFX('menuHover')
+    expect(instances).toHaveLength(count)
+    expect(instances.find((s) => s.src === '/audios/sfx/menu_hover.mp3')?.playCount).toBe(2)
+  })
+})