@pascal-app/editor 0.7.0 → 0.9.1

package/src/components/pascal-radio.tsx

@@ -1,280 +0,0 @@
-'use client'
-
-import { Howl } from 'howler'
-import { Disc3, Settings2, SkipBack, SkipForward, Volume2, VolumeX } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Slider } from '../components/ui/slider'
-import { cn } from '../lib/utils'
-import useAudio from '../store/use-audio'
-
-const PLAYLIST = [
-  {
-    title: 'Ballroom in Miniature',
-    file: '/audios/radios/classic/Ballroom in Miniature.mp3',
-  },
-  {
-    title: 'Blueprints in Springtime',
-    file: '/audios/radios/classic/Blueprints in Springtime.mp3',
-  },
-  {
-    title: 'Clockwork Tea Party',
-    file: '/audios/radios/classic/Clockwork Tea Party.mp3',
-  },
-  {
-    title: 'Clockwork Tea Party (Alternate)',
-    file: '/audios/radios/classic/Clockwork Tea Party (Alternate).mp3',
-  },
-  {
-    title: 'Clockwork Teacups',
-    file: '/audios/radios/classic/Clockwork Teacups.mp3',
-  },
-  {
-    title: 'Evening in the Parlor',
-    file: '/audios/radios/classic/Evening in the Parlor.mp3',
-  },
-  {
-    title: 'Glass Atrium',
-    file: '/audios/radios/classic/Glass Atrium.mp3',
-  },
-  {
-    title: 'Moonlight On The Drafting Table',
-    file: '/audios/radios/classic/Moonlight On The Drafting Table.mp3',
-  },
-  {
-    title: 'Sunlit Garden Reverie',
-    file: '/audios/radios/classic/Sunlit Garden Reverie.mp3',
-  },
-  {
-    title: 'Sunlit Waltz in Pastel Hues',
-    file: '/audios/radios/classic/Sunlit Waltz in Pastel Hues.mp3',
-  },
-]
-
-// Shuffle array helper
-function shuffleArray<T>(array: T[]): T[] {
-  const shuffled = [...array]
-  for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1))
-    ;[shuffled[i], shuffled[j]] = [shuffled[j]!, shuffled[i]!]
-  }
-  return shuffled
-}
-
-export function PascalRadio() {
-  const [shuffledPlaylist] = useState(() => shuffleArray(PLAYLIST))
-  const [currentTrackIndex, setCurrentTrackIndex] = useState(0)
-  const { masterVolume, radioVolume, muted, isRadioPlaying, setRadioPlaying } = useAudio()
-  const soundRef = useRef<Howl | null>(null)
-  const [isOpen, setIsOpen] = useState(false)
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  const currentTrack = shuffledPlaylist[currentTrackIndex]!
-
-  // Calculate effective volume (masterVolume * radioVolume, both are 0-100)
-  const effectiveVolume = (masterVolume / 100) * (radioVolume / 100)
-
-  // Keep a ref so the track-init effect can read current volume/muted/isRadioPlaying
-  // without those values being part of its dependency array (which would restart the song).
-  const effectiveVolumeRef = useRef(effectiveVolume)
-  const mutedRef = useRef(muted)
-  const isPlayingRef = useRef(isRadioPlaying)
-  effectiveVolumeRef.current = effectiveVolume
-  mutedRef.current = muted
-  isPlayingRef.current = isRadioPlaying
-
-  const handleNext = useCallback(() => {
-    setCurrentTrackIndex((prev) => (prev + 1) % shuffledPlaylist.length)
-  }, [shuffledPlaylist.length])
-
-  const handlePrevious = useCallback(() => {
-    setCurrentTrackIndex((prev) => (prev - 1 + shuffledPlaylist.length) % shuffledPlaylist.length)
-  }, [shuffledPlaylist.length])
-
-  // Initialize Howler only when the track changes — not on volume/mute/play-state changes.
-  // Volume and mute are handled by the separate effect below.
-  useEffect(() => {
-    if (soundRef.current) {
-      soundRef.current.unload()
-    }
-
-    const wasPlaying = isPlayingRef.current
-
-    soundRef.current = new Howl({
-      src: [currentTrack.file],
-      volume: mutedRef.current ? 0 : effectiveVolumeRef.current,
-      onend: handleNext,
-    })
-
-    if (wasPlaying && !mutedRef.current) {
-      soundRef.current?.play()
-    }
-
-    return () => {
-      soundRef.current?.unload()
-    }
-  }, [handleNext, currentTrack.file])
-
-  // Update volume when settings change
-  useEffect(() => {
-    if (soundRef.current) {
-      soundRef.current.volume(muted ? 0 : effectiveVolume)
-
-      // Pause if muted, resume if unmuted and was playing
-      if (muted && isRadioPlaying) {
-        soundRef.current.pause()
-      } else if (!muted && isRadioPlaying && !soundRef.current.playing()) {
-        soundRef.current.play()
-      } else if (!isRadioPlaying && soundRef.current.playing()) {
-        soundRef.current.pause()
-      }
-    }
-  }, [effectiveVolume, muted, isRadioPlaying])
-
-  const handlePlayPause = () => {
-    if (!soundRef.current || muted) return
-
-    if (isRadioPlaying) {
-      soundRef.current.pause()
-    } else {
-      soundRef.current.play()
-    }
-    setRadioPlaying(!isRadioPlaying)
-  }
-
-  const handleVolumeChange = (value: number[]) => {
-    useAudio.setState({ radioVolume: value[0] })
-  }
-
-  // Handle click outside to close
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false)
-      }
-    }
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside)
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [isOpen])
-
-  return (
-    <motion.div
-      className={cn(
-        'flex flex-col overflow-hidden rounded-lg border border-border bg-background/95 shadow-lg backdrop-blur-md',
-        !isOpen && 'cursor-pointer transition-colors hover:bg-accent/90',
-      )}
-      layout
-      onClick={() => {
-        if (!isOpen) setIsOpen(true)
-      }}
-      ref={containerRef}
-      transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
-    >
-      <div className="flex items-center justify-between gap-2 px-3 py-2 font-medium text-sm">
-        <div className="flex items-center gap-2">
-          <Disc3 className={cn('h-4 w-4 shrink-0', isRadioPlaying && 'animate-spin')} />
-          <span className="hidden whitespace-nowrap sm:inline">Radio Pascal</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <div
-            aria-label={isRadioPlaying ? 'Pause' : 'Play'}
-            className="cursor-pointer rounded-sm bg-accent/30 p-1 transition-all hover:bg-accent hover:text-accent-foreground hover:shadow-sm"
-            onClick={(e) => {
-              e.stopPropagation()
-              handlePlayPause()
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                e.stopPropagation()
-                handlePlayPause()
-              }
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            {isRadioPlaying ? (
-              <Volume2 className="h-3.5 w-3.5" />
-            ) : (
-              <VolumeX className="h-3.5 w-3.5" />
-            )}
-          </div>
-          <button
-            aria-label="Radio Settings"
-            className={cn(
-              'cursor-pointer rounded-sm p-1 transition-all hover:bg-accent hover:text-accent-foreground',
-              isOpen && 'bg-accent text-accent-foreground',
-            )}
-            onClick={(e) => {
-              e.stopPropagation()
-              setIsOpen(!isOpen)
-            }}
-          >
-            <Settings2 className="h-3.5 w-3.5" />
-          </button>
-        </div>
-      </div>
-
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            initial={{ opacity: 0, height: 0 }}
-            transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
-          >
-            <div className="w-[16rem] space-y-3 px-3 pb-3">
-              <div className="mb-3 h-px w-full bg-border/50" />
-              {/* Current song info with prev/next */}
-              <div>
-                <p className="mb-2 text-muted-foreground text-xs">Now Playing</p>
-                <div className="flex items-center justify-between gap-2">
-                  <button
-                    aria-label="Previous"
-                    className="shrink-0 rounded-full p-1.5 transition-colors hover:bg-accent"
-                    onClick={handlePrevious}
-                  >
-                    <SkipBack className="h-4 w-4" />
-                  </button>
-                  <p
-                    className="flex-1 truncate text-center font-medium text-sm"
-                    title={currentTrack.title}
-                  >
-                    {currentTrack.title}
-                  </p>
-                  <button
-                    aria-label="Next"
-                    className="shrink-0 rounded-full p-1.5 transition-colors hover:bg-accent"
-                    onClick={handleNext}
-                  >
-                    <SkipForward className="h-4 w-4" />
-                  </button>
-                </div>
-              </div>
-
-              {/* Volume control */}
-              <div className="flex items-center gap-2">
-                <Volume2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                <Slider
-                  aria-label="Radio Volume"
-                  className="flex-1"
-                  max={100}
-                  onValueChange={handleVolumeChange}
-                  step={1}
-                  value={[radioVolume]}
-                />
-                <span className="w-8 shrink-0 text-right text-muted-foreground text-xs">
-                  {radioVolume}%
-                </span>
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </motion.div>
-  )
-}

package/src/components/preview-button.tsx

@@ -1,16 +0,0 @@
-'use client'
-
-import { Eye } from 'lucide-react'
-import useEditor from '../store/use-editor'
-
-export function PreviewButton() {
-  return (
-    <button
-      className="flex cursor-pointer items-center gap-2 rounded-lg border border-border bg-background/95 px-3 py-2 font-medium text-sm shadow-lg backdrop-blur-md transition-colors hover:bg-accent/90"
-      onClick={() => useEditor.getState().setPreviewMode(true)}
-    >
-      <Eye className="h-4 w-4 shrink-0" />
-      <span className="hidden whitespace-nowrap sm:inline">Preview</span>
-    </button>
-  )
-}

package/src/components/tools/building/move-building-tool.tsx

@@ -1,157 +0,0 @@
-'use client'
-
-import {
-  type BuildingNode,
-  emitter,
-  type GridEvent,
-  sceneRegistry,
-  useScene,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useFrame } from '@react-three/fiber'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import * as THREE from 'three'
-import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import { CursorSphere } from '../shared/cursor-sphere'
-
-export function MoveBuildingContent({ node }: { node: BuildingNode }) {
-  const previousGridPosRef = useRef<[number, number] | null>(null)
-
-  // Stable refs so the effect never needs node in its dependency array
-  const nodeIdRef = useRef(node.id)
-  const originalPositionRef = useRef<[number, number, number]>([...node.position] as [
-    number,
-    number,
-    number,
-  ])
-  const originalRotationRef = useRef<number>(node.rotation[1] ?? 0)
-  const pendingRotationRef = useRef<number>(node.rotation[1] ?? 0)
-
-  const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
-    const obj = sceneRegistry.nodes.get(node.id)
-    if (obj) {
-      const pos = new THREE.Vector3()
-      obj.getWorldPosition(pos)
-      return [pos.x, pos.y, pos.z]
-    }
-    return [node.position[0], node.position[1], node.position[2]]
-  })
-
-  const exitMoveMode = useCallback(() => {
-    useEditor.getState().setMovingNode(null)
-  }, [])
-
-  useEffect(() => {
-    const nodeId = nodeIdRef.current
-    const originalPosition = originalPositionRef.current
-
-    useScene.temporal.getState().pause()
-
-    let wasCommitted = false
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-        return
-      }
-
-      const ROTATION_STEP = Math.PI / 2
-      let rotationDelta = 0
-      if (event.key === 'r' || event.key === 'R') rotationDelta = ROTATION_STEP
-      else if (event.key === 't' || event.key === 'T') rotationDelta = -ROTATION_STEP
-
-      if (rotationDelta !== 0) {
-        event.preventDefault()
-        sfxEmitter.emit('sfx:item-rotate')
-        pendingRotationRef.current += rotationDelta
-
-        const mesh = sceneRegistry.nodes.get(nodeId)
-        if (mesh) mesh.rotation.y = pendingRotationRef.current
-      }
-    }
-
-    const onGridMove = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
-
-      if (
-        previousGridPosRef.current &&
-        (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
-      ) {
-        sfxEmitter.emit('sfx:grid-snap')
-      }
-
-      previousGridPosRef.current = [gridX, gridZ]
-      setCursorWorldPos([gridX, 0, gridZ])
-
-      // Directly update the Three.js group — no store update during drag
-      const mesh = sceneRegistry.nodes.get(nodeId)
-      if (mesh) {
-        mesh.position.x = gridX
-        mesh.position.z = gridZ
-      }
-    }
-
-    const onGridClick = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
-
-      wasCommitted = true
-
-      useScene.temporal.getState().resume()
-      useScene.getState().updateNode(nodeId, {
-        position: [gridX, originalPosition[1], gridZ],
-        rotation: [0, pendingRotationRef.current, 0],
-      })
-      useScene.temporal.getState().pause()
-
-      sfxEmitter.emit('sfx:item-place')
-      useViewer.getState().setSelection({ buildingId: nodeId as BuildingNode['id'] })
-      exitMoveMode()
-      event.nativeEvent?.stopPropagation?.()
-    }
-
-    const onCancel = () => {
-      // Revert mesh position and rotation immediately
-      const mesh = sceneRegistry.nodes.get(nodeId)
-      if (mesh) {
-        mesh.position.x = originalPosition[0]
-        mesh.position.z = originalPosition[2]
-        mesh.rotation.y = originalRotationRef.current
-      }
-      pendingRotationRef.current = originalRotationRef.current
-      // Restore building selection
-      useViewer.getState().setSelection({ buildingId: nodeId as BuildingNode['id'] })
-      useScene.temporal.getState().resume()
-      // Tell the keyboard handler we handled this, so it doesn't also clear the selection
-      markToolCancelConsumed()
-      exitMoveMode()
-    }
-
-    emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
-    emitter.on('tool:cancel', onCancel)
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => {
-      if (!wasCommitted) {
-        useScene.getState().updateNode(nodeId, {
-          position: originalPosition,
-          rotation: [0, originalRotationRef.current, 0],
-        })
-      }
-      useScene.temporal.getState().resume()
-      emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
-      emitter.off('tool:cancel', onCancel)
-      window.removeEventListener('keydown', onKeyDown)
-    }
-  }, [exitMoveMode]) // stable — node values captured via refs at mount
-
-  return (
-    <group>
-      <CursorSphere position={cursorWorldPos} showTooltip={false} />
-    </group>
-  )
-}

package/src/components/tools/ceiling/ceiling-boundary-editor.tsx

@@ -1,43 +0,0 @@
-import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
-import { PolygonEditor } from '../shared/polygon-editor'
-
-interface CeilingBoundaryEditorProps {
-  ceilingId: CeilingNode['id']
-}
-
-/**
- * Ceiling boundary editor - allows editing ceiling polygon vertices for a specific ceiling
- * Uses the generic PolygonEditor component
- */
-export const CeilingBoundaryEditor: React.FC<CeilingBoundaryEditorProps> = ({ ceilingId }) => {
-  const ceilingNode = useScene((state) => state.nodes[ceilingId])
-  const updateNode = useScene((state) => state.updateNode)
-  const setSelection = useViewer((state) => state.setSelection)
-
-  const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
-
-  const handlePolygonChange = useCallback(
-    (newPolygon: Array<[number, number]>) => {
-      updateNode(ceilingId, { polygon: newPolygon })
-      // Re-assert selection so the ceiling stays selected after the edit
-      setSelection({ selectedIds: [ceilingId] })
-    },
-    [ceilingId, updateNode, setSelection],
-  )
-
-  if (!ceiling?.polygon || ceiling.polygon.length < 3) return null
-
-  return (
-    <PolygonEditor
-      allowEdgeMove
-      color="#d4d4d4"
-      levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
-      minVertices={3}
-      onPolygonChange={handlePolygonChange}
-      polygon={ceiling.polygon}
-      surfaceHeight={ceiling.height ?? 2.5}
-    />
-  )
-}

package/src/components/tools/ceiling/ceiling-hole-editor.tsx

@@ -1,49 +0,0 @@
-import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
-import { PolygonEditor } from '../shared/polygon-editor'
-
-interface CeilingHoleEditorProps {
-  ceilingId: CeilingNode['id']
-  holeIndex: number
-}
-
-/**
- * Ceiling hole editor - allows editing a specific hole polygon within a ceiling
- * Uses the generic PolygonEditor component
- */
-export const CeilingHoleEditor: React.FC<CeilingHoleEditorProps> = ({ ceilingId, holeIndex }) => {
-  const ceilingNode = useScene((state) => state.nodes[ceilingId])
-  const updateNode = useScene((state) => state.updateNode)
-  const setSelection = useViewer((state) => state.setSelection)
-
-  const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
-  const holes = ceiling?.holes || []
-  const hole = holes[holeIndex]
-
-  const handlePolygonChange = useCallback(
-    (newPolygon: Array<[number, number]>) => {
-      const updatedHoles = [...holes]
-      updatedHoles[holeIndex] = newPolygon
-      updateNode(ceilingId, { holes: updatedHoles })
-      // Re-assert selection so the ceiling stays selected after the edit
-      setSelection({ selectedIds: [ceilingId] })
-    },
-    [ceilingId, holeIndex, holes, updateNode, setSelection],
-  )
-
-  if (!(ceiling && hole) || hole.length < 3) return null
-
-  return (
-    <PolygonEditor
-      allowEdgeMove
-      allowPolygonMove
-      color="#ef4444"
-      levelId={resolveLevelId(ceiling, useScene.getState().nodes)} // red for holes
-      minVertices={3}
-      onPolygonChange={handlePolygonChange}
-      polygon={hole}
-      surfaceHeight={ceiling.height ?? 2.5}
-    />
-  )
-}