@pascal-app/editor 0.4.0

package/src/components/feedback-dialog.tsx

@@ -0,0 +1,265 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { ImageIcon, MessageSquare, X } from 'lucide-react'
+import { useCallback, useRef, useState } from 'react'
+import { Button } from './ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './ui/primitives/dialog'
+
+const MAX_IMAGES = 5
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024
+
+type ImagePreview = { file: File; url: string }
+
+export function FeedbackDialog({
+  projectId: projectIdProp,
+  onSubmit,
+}: {
+  projectId?: string
+  onSubmit?: (data: {
+    message: string
+    projectId?: string
+    sceneGraph: unknown
+    images: File[]
+  }) => Promise<{ success: boolean; error?: string }>
+}) {
+  const projectId = projectIdProp
+
+  const [open, setOpen] = useState(false)
+  const [message, setMessage] = useState('')
+  const [images, setImages] = useState<ImagePreview[]>([])
+  const [isDragging, setIsDragging] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [sent, setSent] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const dragCounter = useRef(0)
+
+  const handleOpen = () => {
+    setOpen(true)
+    setSent(false)
+    setError(null)
+    setMessage('')
+    setImages([])
+    setIsDragging(false)
+    dragCounter.current = 0
+  }
+
+  const handleClose = () => {
+    if (isSubmitting) return
+    setOpen(false)
+    images.forEach((img) => {
+      URL.revokeObjectURL(img.url)
+    })
+  }
+
+  const addFiles = useCallback((files: FileList | File[]) => {
+    const incoming = Array.from(files).filter(
+      (f) => f.type.startsWith('image/') && f.size <= MAX_IMAGE_SIZE,
+    )
+    setImages((prev) => {
+      const remaining = MAX_IMAGES - prev.length
+      const added = incoming.slice(0, remaining).map((file) => ({
+        file,
+        url: URL.createObjectURL(file),
+      }))
+      return [...prev, ...added]
+    })
+  }, [])
+
+  const removeImage = (index: number) => {
+    setImages((prev) => {
+      const img = prev[index]
+      if (img) URL.revokeObjectURL(img.url)
+      return prev.filter((_, i) => i !== index)
+    })
+  }
+
+  // ── Drag handlers (on the entire dialog content) ──
+  const onDragEnter = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCounter.current++
+    if (e.dataTransfer.types.includes('Files')) {
+      setIsDragging(true)
+    }
+  }
+
+  const onDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCounter.current--
+    if (dragCounter.current === 0) {
+      setIsDragging(false)
+    }
+  }
+
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCounter.current = 0
+    setIsDragging(false)
+    if (e.dataTransfer.files.length > 0) {
+      addFiles(e.dataTransfer.files)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setIsSubmitting(true)
+
+    try {
+      if (!onSubmit) return
+      const { nodes, rootNodeIds } = useScene.getState()
+      const sceneGraph = { nodes, rootNodeIds }
+      const result = await onSubmit({
+        message,
+        projectId,
+        sceneGraph,
+        images: images.map((img) => img.file),
+      })
+      if (result.success) {
+        setSent(true)
+        setTimeout(() => setOpen(false), 1500)
+      } else {
+        setError(result.error ?? 'Something went wrong')
+      }
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <button
+        className="flex 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={handleOpen}
+      >
+        <MessageSquare className="h-4 w-4" />
+        Feedback
+      </button>
+
+      <Dialog onOpenChange={handleClose} open={open}>
+        <DialogContent
+          className="sm:max-w-[460px]"
+          onDragEnter={onDragEnter}
+          onDragLeave={onDragLeave}
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+        >
+          {/* Drag overlay — only visible when dragging files over the dialog */}
+          {isDragging && (
+            <div className="absolute inset-0 z-50 flex items-center justify-center rounded-lg border-2 border-primary/50 border-dashed bg-primary/5 backdrop-blur-sm transition-all">
+              <div className="flex flex-col items-center gap-2 text-primary/70">
+                <ImageIcon className="h-8 w-8" />
+                <p className="font-medium text-sm">Drop images here</p>
+              </div>
+            </div>
+          )}
+
+          <DialogHeader>
+            <DialogTitle>Send Feedback</DialogTitle>
+            <DialogDescription>We&apos;d love to hear your thoughts</DialogDescription>
+          </DialogHeader>
+
+          {sent ? (
+            <p className="py-4 text-center text-muted-foreground text-sm">
+              Thanks for your feedback!
+            </p>
+          ) : (
+            <form className="space-y-4" onSubmit={handleSubmit}>
+              <div>
+                <label className="font-medium text-sm" htmlFor="feedback-message">
+                  Your feedback
+                </label>
+                <textarea
+                  autoFocus
+                  className="mt-1 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                  disabled={isSubmitting}
+                  id="feedback-message"
+                  onChange={(e) => setMessage(e.target.value)}
+                  placeholder="Share your thoughts, suggestions, feature requests, or report issues..."
+                  rows={5}
+                  value={message}
+                />
+              </div>
+
+              {/* Image thumbnails */}
+              {images.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {images.map((img, i) => (
+                    <div
+                      className="group relative h-14 w-14 overflow-hidden rounded-md border border-border"
+                      key={img.url}
+                    >
+                      <img alt="" className="h-full w-full object-cover" src={img.url} />
+                      <button
+                        className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
+                        onClick={() => removeImage(i)}
+                        type="button"
+                      >
+                        <X className="h-4 w-4 text-white" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {error && <p className="text-destructive text-sm">{error}</p>}
+
+              <div className="flex items-center justify-between">
+                {/* Subtle attach button */}
+                <button
+                  className="flex items-center gap-1.5 text-muted-foreground text-xs transition-colors hover:text-foreground disabled:opacity-40"
+                  disabled={isSubmitting || images.length >= MAX_IMAGES}
+                  onClick={() => fileInputRef.current?.click()}
+                  type="button"
+                >
+                  <ImageIcon className="h-3.5 w-3.5" />
+                  {images.length > 0 ? `${images.length}/${MAX_IMAGES}` : 'Attach'}
+                </button>
+                <input
+                  accept="image/*"
+                  className="hidden"
+                  multiple
+                  onChange={(e) => {
+                    if (e.target.files) addFiles(e.target.files)
+                    e.target.value = ''
+                  }}
+                  ref={fileInputRef}
+                  type="file"
+                />
+
+                <div className="flex gap-2">
+                  <Button
+                    disabled={isSubmitting}
+                    onClick={handleClose}
+                    type="button"
+                    variant="outline"
+                  >
+                    Cancel
+                  </Button>
+                  <Button disabled={isSubmitting || !message.trim() || !onSubmit} type="submit">
+                    {isSubmitting ? 'Sending...' : 'Send Feedback'}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/components/pascal-radio.tsx

@@ -0,0 +1,280 @@
+'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

@@ -0,0 +1,16 @@
+'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/systems/ceiling/ceiling-system.tsx

@@ -0,0 +1,77 @@
+import { type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect } from 'react'
+import useEditor from '../../../store/use-editor'
+
+export const CeilingSystem = () => {
+  const tool = useEditor((state) => state.tool)
+  const selectedItem = useEditor((state) => state.selectedItem)
+  const movingNode = useEditor((state) => state.movingNode)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const activeLevelId = useViewer((state) => state.selection.levelId)
+
+  useEffect(() => {
+    const nodes = useScene.getState().nodes
+
+    const levelsToShowCeilings = new Set<string>()
+
+    const isCeilingToolActive =
+      tool === 'ceiling' ||
+      selectedItem?.attachTo === 'ceiling' ||
+      (movingNode?.type === 'item' && movingNode?.asset?.attachTo === 'ceiling')
+
+    if (isCeilingToolActive && activeLevelId) {
+      levelsToShowCeilings.add(activeLevelId)
+    }
+
+    for (const id of selectedIds) {
+      let currentId: string | null = id
+      let isCeilingRelated = false
+      let levelId: string | null = null
+
+      while (currentId && nodes[currentId as AnyNodeId]) {
+        const node = nodes[currentId as AnyNodeId]
+        if (node?.type === 'ceiling') {
+          isCeilingRelated = true
+        }
+        if (node?.type === 'level') {
+          levelId = node.id
+          break
+        }
+        currentId = node?.parentId as string | null
+      }
+
+      if (isCeilingRelated && levelId) {
+        levelsToShowCeilings.add(levelId)
+      }
+    }
+
+    const ceilings = sceneRegistry.byType.ceiling
+    ceilings.forEach((ceiling) => {
+      const mesh = sceneRegistry.nodes.get(ceiling)
+      if (mesh) {
+        const ceilingGrid = mesh.getObjectByName('ceiling-grid')
+        if (ceilingGrid) {
+          let belongsToVisibleLevel = false
+          let currentId: string | null = ceiling
+
+          while (currentId && nodes[currentId as AnyNodeId]) {
+            const node = nodes[currentId as AnyNodeId]
+            if (node && levelsToShowCeilings.has(node.id)) {
+              belongsToVisibleLevel = true
+              break
+            }
+            currentId = node?.parentId as string | null
+          }
+
+          const shouldShowGrid =
+            belongsToVisibleLevel || (levelsToShowCeilings.size === 0 && isCeilingToolActive)
+
+          ceilingGrid.visible = shouldShowGrid
+          ceilingGrid.scale.setScalar(shouldShowGrid ? 1 : 0.0) // Scale down to zero to prevent event interference when grid is hidden
+        }
+      }
+    })
+  }, [tool, selectedItem, movingNode, selectedIds, activeLevelId])
+  return null
+}