@pascal-app/editor 0.8.0 → 0.9.1

package/src/lib/planar-cursor-placement.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test } from 'bun:test'
+import { resolvePlanarCursorPosition } from './planar-cursor-placement'
+
+const snapHalf = (value: number) => Math.round(value / 0.5) * 0.5
+
+describe('resolvePlanarCursorPosition', () => {
+  test('absolute mode places the point directly at the snapped cursor', () => {
+    const result = resolvePlanarCursorPosition({
+      cursor: [1.24, -2.26],
+      original: [10, 10],
+      anchor: null,
+      mode: 'absolute',
+      snap: snapHalf,
+    })
+
+    expect(result.point).toEqual([1, -2.5])
+    expect(result.anchor).toBeNull()
+  })
+
+  test('relative mode preserves the original grab offset from the first cursor sample', () => {
+    const start = resolvePlanarCursorPosition({
+      cursor: [4.1, 6.1],
+      original: [10, 20],
+      anchor: null,
+      mode: 'relative',
+      snap: snapHalf,
+    })
+
+    expect(start.point).toEqual([10, 20])
+    expect(start.anchor).toEqual([4.1, 6.1])
+
+    const moved = resolvePlanarCursorPosition({
+      cursor: [4.9, 5.2],
+      original: [10, 20],
+      anchor: start.anchor,
+      mode: 'relative',
+      snap: snapHalf,
+    })
+
+    expect(moved.point).toEqual([11, 19])
+    expect(moved.anchor).toEqual([4.1, 6.1])
+  })
+})

package/src/lib/planar-cursor-placement.ts

@@ -0,0 +1,42 @@
+export type PlanarPoint = [number, number]
+
+export type PlanarCursorPlacementMode = 'absolute' | 'relative'
+
+type ResolvePlanarCursorPositionArgs = {
+  cursor: PlanarPoint
+  original: PlanarPoint
+  anchor: PlanarPoint | null
+  mode: PlanarCursorPlacementMode
+  snap?: (value: number) => number
+}
+
+type ResolvePlanarCursorPositionResult = {
+  point: PlanarPoint
+  anchor: PlanarPoint | null
+}
+
+const identity = (value: number) => value
+
+export function resolvePlanarCursorPosition({
+  cursor,
+  original,
+  anchor,
+  mode,
+  snap = identity,
+}: ResolvePlanarCursorPositionArgs): ResolvePlanarCursorPositionResult {
+  if (mode === 'absolute') {
+    return {
+      point: [snap(cursor[0]), snap(cursor[1])],
+      anchor,
+    }
+  }
+
+  const resolvedAnchor = anchor ?? cursor
+  return {
+    point: [
+      original[0] + snap(cursor[0] - resolvedAnchor[0]),
+      original[1] + snap(cursor[1] - resolvedAnchor[1]),
+    ],
+    anchor: resolvedAnchor,
+  }
+}

package/src/lib/roof-duplication.ts

@@ -175,7 +175,7 @@ export function duplicateRoofSubtree(
 
 export function clearRoofDuplicateMetadata(
   roofId: AnyNodeId,
-  updates: Partial<Pick<RoofNode, 'position' | 'rotation' | 'metadata'>> = {},
+  updates: Partial<Pick<RoofNode, 'position' | 'rotation' | 'metadata' | 'visible'>> = {},
 ) {
   const scene = useScene.getState()
   const roofNode = scene.nodes[roofId]

package/src/lib/scene-clipboard.ts

@@ -0,0 +1,267 @@
+import {
+  AnyNode,
+  type AnyNodeId,
+  generateId,
+  type LevelNode,
+  type StairNode,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+
+type ClipboardPayload = {
+  copiedAt: number
+  nodes: AnyNode[]
+  rootIds: AnyNodeId[]
+}
+
+type PasteResult = {
+  pastedIds: AnyNodeId[]
+  skippedIds: AnyNodeId[]
+}
+
+const COPYABLE_ROOT_TYPES = new Set<AnyNode['type']>([
+  'wall',
+  'fence',
+  'column',
+  'item',
+  'slab',
+  'ceiling',
+  'roof',
+  'stair',
+  'spawn',
+  'zone',
+])
+
+let clipboardPayload: ClipboardPayload | null = null
+const subscribers = new Set<() => void>()
+
+function notifySubscribers() {
+  for (const subscriber of subscribers) {
+    subscriber()
+  }
+}
+
+export function subscribeEditorClipboard(subscriber: () => void) {
+  subscribers.add(subscriber)
+  return () => {
+    subscribers.delete(subscriber)
+  }
+}
+
+export function getEditorClipboardSnapshot() {
+  return clipboardPayload
+}
+
+export function hasEditorClipboard() {
+  return !!clipboardPayload && clipboardPayload.rootIds.length > 0
+}
+
+function extractIdPrefix(id: string) {
+  const underscoreIndex = id.indexOf('_')
+  return underscoreIndex === -1 ? 'node' : id.slice(0, underscoreIndex)
+}
+
+function collectSubtreeIds(
+  nodes: Record<AnyNodeId, AnyNode>,
+  rootId: AnyNodeId,
+  ids: Set<AnyNodeId>,
+) {
+  if (ids.has(rootId)) return
+  const node = nodes[rootId]
+  if (!node) return
+  ids.add(rootId)
+
+  if ('children' in node && Array.isArray(node.children)) {
+    for (const childId of node.children as AnyNodeId[]) {
+      collectSubtreeIds(nodes, childId, ids)
+    }
+  }
+}
+
+function hasSelectedAncestor(
+  nodes: Record<AnyNodeId, AnyNode>,
+  id: AnyNodeId,
+  selectedIds: Set<AnyNodeId>,
+) {
+  let parentId = nodes[id]?.parentId as AnyNodeId | null
+
+  while (parentId) {
+    if (selectedIds.has(parentId)) return true
+    parentId = nodes[parentId]?.parentId as AnyNodeId | null
+  }
+
+  return false
+}
+
+function isLevelChildRoot(nodes: Record<AnyNodeId, AnyNode>, node: AnyNode) {
+  const parentId = node.parentId as AnyNodeId | null
+  if (!parentId) return true
+  return nodes[parentId]?.type === 'level'
+}
+
+function getPasteTargetLevel(targetLevelId?: AnyNodeId) {
+  const scene = useScene.getState()
+  const resolvedLevelId =
+    targetLevelId ?? (useViewer.getState().selection.levelId as AnyNodeId | null)
+  if (!resolvedLevelId) return null
+
+  const level = scene.nodes[resolvedLevelId]
+  return level?.type === 'level' ? level : null
+}
+
+function getNextLevelId(level: LevelNode, nodes: Record<AnyNodeId, AnyNode>) {
+  const parentId = level.parentId as AnyNodeId | null
+  if (!parentId) return null
+
+  const building = nodes[parentId]
+  if (!building || building.type !== 'building') return null
+
+  const siblingLevels = building.children
+    .map((childId) => nodes[childId as AnyNodeId])
+    .filter((node): node is LevelNode => node?.type === 'level')
+
+  return (
+    siblingLevels
+      .filter((candidate) => candidate.level > level.level)
+      .sort((a, b) => a.level - b.level)[0]?.id ?? null
+  )
+}
+
+function remapNodeReferences(
+  node: AnyNode,
+  oldId: AnyNodeId,
+  targetLevel: LevelNode,
+  idMap: Map<AnyNodeId, AnyNodeId>,
+  rootIds: Set<AnyNodeId>,
+  nodes: Record<AnyNodeId, AnyNode>,
+) {
+  const clone = JSON.parse(JSON.stringify(node)) as AnyNode
+  ;(clone as Record<string, unknown>).id = idMap.get(oldId)
+
+  if (rootIds.has(oldId)) {
+    clone.parentId = targetLevel.id
+  } else if (clone.parentId && typeof clone.parentId === 'string') {
+    clone.parentId = idMap.get(clone.parentId as AnyNodeId) ?? clone.parentId
+  }
+
+  if ('children' in clone && Array.isArray(clone.children)) {
+    ;(clone as Record<string, unknown>).children = (clone.children as AnyNodeId[])
+      .map((childId) => idMap.get(childId))
+      .filter((childId): childId is AnyNodeId => !!childId)
+  }
+
+  if ('wallId' in clone && typeof clone.wallId === 'string') {
+    const nextWallId = idMap.get(clone.wallId as AnyNodeId)
+    if (nextWallId) {
+      ;(clone as Record<string, unknown>).wallId = nextWallId
+    } else {
+      delete (clone as Record<string, unknown>).wallId
+    }
+  }
+
+  if (clone.type === 'stair') {
+    const nextLevelId = getNextLevelId(targetLevel, nodes)
+    ;(clone as StairNode).fromLevelId = targetLevel.id
+    ;(clone as StairNode).toLevelId = nextLevelId
+  }
+
+  const metadata =
+    clone.metadata && typeof clone.metadata === 'object' && !Array.isArray(clone.metadata)
+      ? { ...(clone.metadata as Record<string, unknown>) }
+      : {}
+  delete metadata.isNew
+  delete metadata.isTransient
+  ;(clone as Record<string, unknown>).metadata = metadata
+
+  return AnyNode.parse(clone)
+}
+
+export function copySelectedNodesToEditorClipboard(selectedIds?: AnyNodeId[]) {
+  const scene = useScene.getState()
+  const ids = selectedIds ?? (useViewer.getState().selection.selectedIds as AnyNodeId[])
+  const selectedIdSet = new Set(ids)
+  const rootIds = ids.filter((id) => {
+    const node = scene.nodes[id]
+    return (
+      node &&
+      COPYABLE_ROOT_TYPES.has(node.type) &&
+      isLevelChildRoot(scene.nodes, node) &&
+      !hasSelectedAncestor(scene.nodes, id, selectedIdSet)
+    )
+  })
+
+  if (rootIds.length === 0) {
+    return false
+  }
+
+  const subtreeIds = new Set<AnyNodeId>()
+  for (const rootId of rootIds) {
+    collectSubtreeIds(scene.nodes, rootId, subtreeIds)
+  }
+
+  clipboardPayload = {
+    copiedAt: Date.now(),
+    nodes: [...subtreeIds]
+      .map((id) => scene.nodes[id])
+      .filter((node): node is AnyNode => !!node)
+      .map((node) => JSON.parse(JSON.stringify(node)) as AnyNode),
+    rootIds,
+  }
+  notifySubscribers()
+
+  return true
+}
+
+export function pasteEditorClipboardToLevel(targetLevelId?: AnyNodeId): PasteResult | null {
+  const payload = clipboardPayload
+  const targetLevel = getPasteTargetLevel(targetLevelId)
+  if (!payload || !targetLevel) return null
+
+  const scene = useScene.getState()
+  const idMap = new Map<AnyNodeId, AnyNodeId>()
+
+  for (const node of payload.nodes) {
+    idMap.set(node.id as AnyNodeId, generateId(extractIdPrefix(node.id)) as AnyNodeId)
+  }
+
+  const rootIdSet = new Set(payload.rootIds)
+  const pastedNodes: AnyNode[] = []
+  const skippedIds: AnyNodeId[] = []
+
+  for (const node of payload.nodes) {
+    try {
+      pastedNodes.push(
+        remapNodeReferences(node, node.id as AnyNodeId, targetLevel, idMap, rootIdSet, scene.nodes),
+      )
+    } catch (error) {
+      console.error('Failed to paste copied node', node.id, error)
+      skippedIds.push(node.id as AnyNodeId)
+    }
+  }
+
+  if (pastedNodes.length === 0) {
+    return { pastedIds: [], skippedIds }
+  }
+
+  scene.createNodes(
+    pastedNodes.map((node) => ({
+      node,
+      parentId: (node.parentId as AnyNodeId | null) ?? undefined,
+    })),
+  )
+
+  const pastedNodeIds = new Set(pastedNodes.map((node) => node.id as AnyNodeId))
+  const pastedRootIds = payload.rootIds
+    .map((rootId) => idMap.get(rootId))
+    .filter((id): id is AnyNodeId => !!id && pastedNodeIds.has(id))
+
+  useViewer.getState().setSelection({
+    levelId: targetLevel.id,
+    selectedIds: pastedRootIds,
+  })
+
+  return {
+    pastedIds: pastedRootIds,
+    skippedIds,
+  }
+}

package/src/lib/scene.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { resolveLevelId, sceneRegistry, useScene } from '@pascal-app/core'
+import { nodeRegistry, resolveLevelId, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import useEditor, {
   hasCustomPersistedEditorUiState,
@@ -220,7 +220,11 @@ function getValidatedSelectionForScene(
 
     const selectedIds = selection.selectedIds.filter((id) => {
       const node = sceneNodes[id]
-      return Boolean(node) && resolveLevelId(node, sceneNodes) === levelId
+      if (!node) return false
+      if (resolveLevelId(node, sceneNodes) === levelId) return true
+
+      const def = nodeRegistry.get(node.type)
+      return def?.floorplanScope === 'building' && node.parentId === buildingId
     })
 
     return {
@@ -283,7 +287,11 @@ export function syncEditorSelectionFromCurrentScene() {
 
     if (shouldRestoreEditorUiState) {
       if (restoredSelection) {
-        useViewer.getState().setSelection(restoredSelection)
+        // PersistedSelectionPath carries plain `string` ids (read from
+        // localStorage, no branded-template-literal guarantee). The viewer's
+        // SelectionPath expects branded ids. The runtime values match the
+        // brand; the cast bridges the static gap.
+        useViewer.getState().setSelection(restoredSelection as never)
         useEditor.setState(
           restoredEditorUiState.phase === 'site'
             ? (selectionDrivenEditorUiState ?? restoredEditorUiState)
@@ -305,7 +313,7 @@ export function syncEditorSelectionFromCurrentScene() {
     }
 
     if (restoredSelection) {
-      useViewer.getState().setSelection(restoredSelection)
+      useViewer.getState().setSelection(restoredSelection as never)
       if (selectionDrivenEditorUiState) {
         useEditor.setState(selectionDrivenEditorUiState)
       }
@@ -351,6 +359,7 @@ function resetEditorInteractionState() {
     selectedReferenceId: null,
     spaces: {},
     editingHole: null,
+    hoveredHole: null,
     isPreviewMode: false,
   })
 }

package/src/lib/sfx-bus.ts

@@ -10,9 +10,12 @@ type SFXEvents = {
   'sfx:item-pick': undefined
   'sfx:item-place': undefined
   'sfx:item-rotate': undefined
+  'sfx:structure-build-start': undefined
   'sfx:structure-build': undefined
   'sfx:structure-delete': undefined
   'sfx:snapshot-capture': undefined
+  'sfx:menu-hover': undefined
+  'sfx:menu-click': undefined
 }
 
 /**
@@ -36,9 +39,12 @@ export function initSFXBus() {
   sfxEmitter.on('sfx:item-pick', () => playSFX('itemPick'))
   sfxEmitter.on('sfx:item-place', () => playSFX('itemPlace'))
   sfxEmitter.on('sfx:item-rotate', () => playSFX('itemRotate'))
-  sfxEmitter.on('sfx:structure-build', () => playSFX('structureBuild'))
+  sfxEmitter.on('sfx:structure-build-start', () => playSFX('structureBuildStart'))
+  sfxEmitter.on('sfx:structure-build', () => playSFX('structureBuildEnd'))
   sfxEmitter.on('sfx:structure-delete', () => playSFX('structureDelete'))
   sfxEmitter.on('sfx:snapshot-capture', () => playSFX('snapshotCapture'))
+  sfxEmitter.on('sfx:menu-hover', () => playSFX('menuHover'))
+  sfxEmitter.on('sfx:menu-click', () => playSFX('menuClick'))
 }
 
 /**
@@ -49,3 +55,19 @@ export function initSFXBus() {
 export function triggerSFX(event: keyof SFXEvents) {
   sfxEmitter.emit(event)
 }
+
+/**
+ * Node types whose deletion should use the lighter item-delete cue rather
+ * than the heavier structure-delete one. Shelves are furniture-like placeable
+ * objects, so they sound like items being removed, not structures demolished.
+ */
+const ITEM_DELETE_NODE_TYPES = new Set(['item', 'shelf'])
+
+/**
+ * Emit the delete SFX appropriate for a deleted node's type.
+ */
+export function emitDeleteSFX(nodeType: string | undefined) {
+  sfxEmitter.emit(
+    nodeType && ITEM_DELETE_NODE_TYPES.has(nodeType) ? 'sfx:item-delete' : 'sfx:structure-delete',
+  )
+}

package/src/lib/sfx-player.ts

@@ -5,7 +5,8 @@ import useAudio from '../store/use-audio'
 // so a rate range of ~0.88–1.12 reads as a subtle ±2 semitones — enough to kill the
 // machine-gun feeling when the same SFX fires in rapid succession.
 type SFXConfig = {
-  src: string
+  // One file, or several pre-rendered variations cycled round-robin per play.
+  src: string | string[]
   // Random playback-rate range applied per play (1 = unchanged).
   rateRange?: [number, number]
   // Random volume multiplier range applied per play (1 = unchanged).
@@ -24,26 +25,31 @@ const DEFAULT_MIN_INTERVAL_MS = 30
 // SFX sound definitions
 export const SFX: Record<string, SFXConfig> = {
   gridSnap: {
-    src: '/audios/sfx/grid_snap.mp3',
-    rateRange: [0.94, 1.06],
-    volumeRange: [0.92, 1.0],
+    src: [
+      '/audios/sfx/grid_snap_0.mp3',
+      '/audios/sfx/grid_snap_1.mp3',
+      '/audios/sfx/grid_snap_2.mp3',
+    ],
+    rateRange: [0.98, 1.02],
+    volumeRange: [0.5, 0.6],
     panJitter: 0.15,
+    minIntervalMs: 50,
   },
   itemDelete: {
     src: '/audios/sfx/item_delete.mp3',
     rateRange: [0.9, 1.1],
     volumeRange: [0.9, 1.0],
-    panJitter: 0.15,
+    panJitter: 0.05,
   },
   itemPick: {
     src: '/audios/sfx/item_pick.mp3',
-    rateRange: [0.92, 1.08],
+    rateRange: [0.95, 1.05],
     volumeRange: [0.92, 1.0],
     panJitter: 0.15,
   },
   itemPlace: {
     src: '/audios/sfx/item_place.mp3',
-    rateRange: [0.98, 1.06],
+    rateRange: [0.98, 1.02],
     volumeRange: [0.9, 1.0],
     panJitter: 0.15,
   },
@@ -53,8 +59,16 @@ export const SFX: Record<string, SFXConfig> = {
     volumeRange: [0.92, 1.0],
     panJitter: 0.15,
   },
-  structureBuild: {
-    src: '/audios/sfx/structure_build.mp3',
+  // Fired when a structure draft begins (first click of a wall/slab/etc).
+  structureBuildStart: {
+    src: '/audios/sfx/structure_build_start.mp3',
+    rateRange: [0.95, 1.05],
+    volumeRange: [0.88, 1.0],
+    panJitter: 0.15,
+  },
+  // Fired when a structure is committed (segment placed / polygon closed).
+  structureBuildEnd: {
+    src: '/audios/sfx/structure_build_end.mp3',
     rateRange: [0.95, 1.05],
     volumeRange: [0.88, 1.0],
     panJitter: 0.15,
@@ -63,12 +77,29 @@ export const SFX: Record<string, SFXConfig> = {
     src: '/audios/sfx/structure_delete.mp3',
     rateRange: [0.9, 1.1],
     volumeRange: [0.9, 1.0],
-    panJitter: 0.15,
+    panJitter: 0.08,
   },
   snapshotCapture: {
     // Shutter should sound consistent — no variation.
     src: '/audios/sfx/snapshot_capture.mp3',
   },
+  // Soft tick when hovering a main category in the Build / Items panels.
+  // Kept quiet and rate-locked so sweeping across the grid reads as texture,
+  // not a melody.
+  menuHover: {
+    src: '/audios/sfx/menu_hover.mp3',
+    rateRange: [0.98, 1.02],
+    volumeRange: [0.2, 0.3],
+    panJitter: 0.1,
+    minIntervalMs: 0,
+  },
+  // Fired when a main category in the Build / Items panels is clicked.
+  menuClick: {
+    src: '/audios/sfx/menu_click.mp3',
+    rateRange: [0.98, 1.02],
+    volumeRange: [0.5, 0.6],
+    panJitter: 0.1,
+  },
 } as const
 
 export type SFXName = keyof typeof SFX
@@ -77,26 +108,32 @@ function randomInRange([min, max]: [number, number]): number {
   return min + Math.random() * (max - min)
 }
 
-// Preload all SFX sounds
-const sfxCache = new Map<SFXName, Howl>()
+// Preload all SFX sounds. Each variation gets its own Howl so they can overlap
+// and be cycled round-robin.
+const sfxCache = new Map<SFXName, Howl[]>()
 const lastPlayedAt = new Map<SFXName, number>()
+const lastVariation = new Map<SFXName, number>()
 
 // Initialize all sounds
 Object.entries(SFX).forEach(([name, config]) => {
-  const sound = new Howl({
-    src: [config.src],
-    preload: true,
-    volume: 0.5, // Will be adjusted by the bus
-  })
-  sfxCache.set(name as SFXName, sound)
+  const sources = Array.isArray(config.src) ? config.src : [config.src]
+  const sounds = sources.map(
+    (src) =>
+      new Howl({
+        src: [src],
+        preload: true,
+        volume: 0.5, // Will be adjusted by the bus
+      }),
+  )
+  sfxCache.set(name as SFXName, sounds)
 })
 
 /**
  * Play a sound effect with volume based on audio settings
  */
 export function playSFX(name: SFXName) {
-  const sound = sfxCache.get(name)
-  if (!sound) {
+  const sounds = sfxCache.get(name)
+  if (!sounds || sounds.length === 0) {
     console.warn(`SFX not found: ${name}`)
     return
   }
@@ -110,6 +147,15 @@ export function playSFX(name: SFXName) {
   if (last !== undefined && now - last < minInterval) return
   lastPlayedAt.set(name, now)
 
+  // Pick a random variation, avoiding an immediate repeat of the last one so
+  // consecutive plays don't land on the same file.
+  let index = Math.floor(Math.random() * sounds.length)
+  if (sounds.length > 1 && index === lastVariation.get(name)) {
+    index = (index + 1) % sounds.length
+  }
+  lastVariation.set(name, index)
+  const sound = sounds[index]!
+
   const { masterVolume, sfxVolume, muted } = useAudio.getState()
 
   if (muted) return
@@ -137,7 +183,9 @@ export function updateSFXVolumes() {
   const { masterVolume, sfxVolume } = useAudio.getState()
   const finalVolume = (masterVolume / 100) * (sfxVolume / 100)
 
-  sfxCache.forEach((sound) => {
-    sound.volume(finalVolume)
+  sfxCache.forEach((sounds) => {
+    sounds.forEach((sound) => {
+      sound.volume(finalVolume)
+    })
   })
 }

package/src/lib/site-boundary.ts

@@ -0,0 +1 @@
+export const SITE_BOUNDARY_DRAG_LABEL = 'site-boundary'