@pascal-app/editor 0.7.0 → 0.8.0

package/src/hooks/use-auto-save.ts

@@ -60,6 +60,7 @@ export function useAutoSave({
   // Stable subscription to scene changes
   useEffect(() => {
     let lastNodesSnapshot = JSON.stringify(useScene.getState().nodes)
+    let lastNodeCount = Object.keys(useScene.getState().nodes).length
 
     async function executeSave() {
       if (isLoadingSceneRef.current || isVersionPreviewModeRef.current) {
@@ -71,6 +72,19 @@ export function useAutoSave({
       const { nodes, rootNodeIds } = useScene.getState()
       const sceneGraph = { nodes, rootNodeIds } as SceneGraph
 
+      // Guard: refuse to autosave if the scene went from populated to nearly empty.
+      // This catches accidental full deletions before they're persisted.
+      const currentNodeCount = Object.keys(nodes).length
+      const STRUCTURAL_NODE_COUNT = 4 // site + building + levels (empty scene skeleton)
+      if (lastNodeCount > STRUCTURAL_NODE_COUNT && currentNodeCount <= STRUCTURAL_NODE_COUNT) {
+        console.warn(
+          `[autosave] Blocked: scene dropped from ${lastNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
+        )
+        setSaveStatus('error')
+        return
+      }
+      lastNodeCount = currentNodeCount
+
       isSavingRef.current = true
       pendingSaveRef.current = false
       setSaveStatus('saving')

package/src/hooks/use-keyboard.ts

@@ -77,6 +77,7 @@ export const useKeyboard = ({
         e.preventDefault()
         useEditor.getState().setPhase('furnish')
         useEditor.getState().setMode('build')
+        useEditor.getState().setActiveSidebarPanel('items')
       } else if (e.key === 'z' && !e.metaKey && !e.ctrlKey) {
         if (isVersionPreviewMode) return
         e.preventDefault()
@@ -252,6 +253,15 @@ export const useKeyboard = ({
         const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
 
         if (selectedNodeIds.length > 0) {
+          // Guard against accidental bulk deletion (e.g. box-select all + Delete)
+          const BULK_DELETE_THRESHOLD = 10
+          if (selectedNodeIds.length >= BULK_DELETE_THRESHOLD) {
+            const confirmed = window.confirm(
+              `Delete ${selectedNodeIds.length} selected elements? This cannot be undone if the undo history is exhausted.`,
+            )
+            if (!confirmed) return
+          }
+
           // Play appropriate SFX based on what's being deleted
           if (selectedNodeIds.length === 1) {
             const node = useScene.getState().nodes[selectedNodeIds[0]!]

package/src/index.tsx

@@ -1,13 +1,21 @@
 export type { EditorProps } from './components/editor'
 export { default as Editor } from './components/editor'
+export {
+  type SnapshotCameraData,
+  ThumbnailGenerator,
+} from './components/editor/thumbnail-generator'
+export { CameraActions as ViewerToolbarRight } from './components/ui/action-menu/camera-actions'
+export { ViewToggles as ViewerToolbarLeft } from './components/ui/action-menu/view-toggles'
 export { useCommandPalette } from './components/ui/command-palette'
 export { SliderControl } from './components/ui/controls/slider-control'
 export { FloatingLevelSelector } from './components/ui/floating-level-selector'
 export { CATALOG_ITEMS } from './components/ui/item-catalog/catalog-items'
+export { PALETTE_COLORS } from './components/ui/primitives/color-dot'
 export { useSidebarStore } from './components/ui/primitives/sidebar'
 export { Slider } from './components/ui/primitives/slider'
 export { SceneLoader } from './components/ui/scene-loader'
 export type { ExtraPanel } from './components/ui/sidebar/icon-rail'
+export { ItemsPanel } from './components/ui/sidebar/panels/items-panel'
 export {
   type ProjectVisibility,
   SettingsPanel,
@@ -15,7 +23,6 @@ export {
 } from './components/ui/sidebar/panels/settings-panel'
 export type { SitePanelProps } from './components/ui/sidebar/panels/site-panel'
 export type { SidebarTab } from './components/ui/sidebar/tab-bar'
-export { ViewerToolbarLeft, ViewerToolbarRight } from './components/ui/viewer-toolbar'
 export type { PresetsAdapter, PresetsTab } from './contexts/presets-context'
 export { PresetsProvider } from './contexts/presets-context'
 export type { SaveStatus } from './hooks/use-auto-save'

package/src/lib/level-duplication.test.ts

@@ -1,5 +1,3 @@
-// @ts-expect-error — bun:test is provided by the Bun runtime; editor does not
-// depend on @types/bun so the import type is unresolved at compile time.
 import { describe, expect, test } from 'bun:test'
 import {
   type AnyNode,

package/src/lib/level-duplication.ts

@@ -123,7 +123,7 @@ export function buildLevelDuplicateCreateOps({
   const keptIds = new Set(filteredNodes.map((node) => node.id))
 
   const cleanedNodes = filteredNodes.map((node) => {
-    if (!('children' in node) || !Array.isArray(node.children)) {
+    if (!('children' in node && Array.isArray(node.children))) {
       return node
     }
 

package/src/lib/material-paint.ts

@@ -154,7 +154,7 @@ export function resolveActivePaintMaterialFromSelection(params: {
   } | null
 }): ActivePaintMaterial | null {
   const { nodes, selectedId, selectedMaterialTarget } = params
-  if (!selectedId || !selectedMaterialTarget || selectedMaterialTarget.nodeId !== selectedId)
+  if (!(selectedId && selectedMaterialTarget) || selectedMaterialTarget.nodeId !== selectedId)
     return null
 
   const selectedNode = nodes[selectedId]

package/src/lib/roof-duplication.ts

@@ -134,7 +134,7 @@ export function duplicateRoofSubtree(
     createdParent && 'children' in createdParent && Array.isArray(createdParent.children)
       ? (createdParent.children as AnyNodeId[])
       : null
-  if (!createdParent || !parentChildIds?.includes(createdRoof.id as AnyNodeId)) {
+  if (!(createdParent && parentChildIds?.includes(createdRoof.id as AnyNodeId))) {
     throw new Error(`Duplicated roof "${createdRoof.id}" was not linked to parent "${parentId}"`)
   }
 

package/src/lib/scene-bounds.ts

@@ -33,7 +33,7 @@ function extendPoint(
   z: unknown,
 ): void {
   if (typeof x !== 'number' || typeof z !== 'number') return
-  if (!Number.isFinite(x) || !Number.isFinite(z)) return
+  if (!(Number.isFinite(x) && Number.isFinite(z))) return
   if (x < acc.minX) acc.minX = x
   if (x > acc.maxX) acc.maxX = x
   if (z < acc.minZ) acc.minZ = z

package/src/lib/sfx-bus.ts

@@ -12,6 +12,7 @@ type SFXEvents = {
   'sfx:item-rotate': undefined
   'sfx:structure-build': undefined
   'sfx:structure-delete': undefined
+  'sfx:snapshot-capture': undefined
 }
 
 /**
@@ -37,6 +38,7 @@ export function initSFXBus() {
   sfxEmitter.on('sfx:item-rotate', () => playSFX('itemRotate'))
   sfxEmitter.on('sfx:structure-build', () => playSFX('structureBuild'))
   sfxEmitter.on('sfx:structure-delete', () => playSFX('structureDelete'))
+  sfxEmitter.on('sfx:snapshot-capture', () => playSFX('snapshotCapture'))
 }
 
 /**

package/src/lib/sfx-player.ts

@@ -2,7 +2,7 @@ import { Howl } from 'howler'
 import useAudio from '../store/use-audio'
 
 // Per-sound variation config. Playback rate also shifts pitch (one semitone ≈ 1.0595×),
-// so a rate range of ~0.88–1.12 reads as a subtle ±2 semitones, enough to kill the
+// 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
@@ -13,8 +13,8 @@ type SFXConfig = {
   // Minimum gap between two plays of this SFX. Triggers within this window
   // are silently dropped so bursty sequences don't phase-stack into noise.
   minIntervalMs?: number
-  // Random stereo pan per play, max absolute offset (0 = center, 1 = hard
-  // right). A small value like 0.15 keeps things centered but adds just enough
+  // Random stereo pan per play — max absolute offset (0 = center, 1 = hard
+  // right). A small value like 0.15 keeps things centred but adds just enough
   // spread to stop repeats from stacking on the same point in the field.
   panJitter?: number
 }
@@ -66,7 +66,7 @@ export const SFX: Record<string, SFXConfig> = {
     panJitter: 0.15,
   },
   snapshotCapture: {
-    // Shutter should sound consistent, no variation.
+    // Shutter should sound consistent — no variation.
     src: '/audios/sfx/snapshot_capture.mp3',
   },
 } as const
@@ -102,7 +102,7 @@ export function playSFX(name: SFXName) {
   }
   const config = SFX[name]!
 
-  // Drop rapid repeats, two plays of the same SFX within minIntervalMs just
+  // Drop rapid repeats — two plays of the same SFX within minIntervalMs just
   // smear into noise, they don't add useful information.
   const now = performance.now()
   const minInterval = config.minIntervalMs ?? DEFAULT_MIN_INTERVAL_MS

package/src/lib/stair-duplication.ts

@@ -1,11 +1,11 @@
 import {
-  generateId,
   type AnyNodeId,
-  sceneRegistry,
+  generateId,
   type StairNode,
   StairNode as StairNodeSchema,
   type StairSegmentNode,
   StairSegmentNode as StairSegmentNodeSchema,
+  sceneRegistry,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'

package/src/store/use-editor.tsx

@@ -1,8 +1,8 @@
 'use client'
 
+import type { AssetInput } from '@pascal-app/core'
 import {
   type AnyNodeId,
-  type AssetInput,
   type BuildingNode,
   type CeilingNode,
   type ColumnNode,
@@ -36,7 +36,7 @@ import {
   type SingleSurfaceMaterialRole,
 } from '../lib/material-paint'
 
-const DEFAULT_ACTIVE_SIDEBAR_PANEL = 'site'
+const DEFAULT_ACTIVE_SIDEBAR_PANEL = 'ai'
 const DEFAULT_FLOORPLAN_PANE_RATIO = 0.5
 const MIN_FLOORPLAN_PANE_RATIO = 0.15
 const MAX_FLOORPLAN_PANE_RATIO = 0.85
@@ -138,11 +138,11 @@ type EditorState = {
     | ItemNode
     | WindowNode
     | DoorNode
-    | FenceNode
     | CeilingNode
     | ColumnNode
     | SlabNode
     | WallNode
+    | FenceNode
     | RoofNode
     | RoofSegmentNode
     | SpawnNode
@@ -155,11 +155,11 @@ type EditorState = {
       | ItemNode
       | WindowNode
       | DoorNode
-      | FenceNode
       | CeilingNode
       | ColumnNode
       | SlabNode
       | WallNode
+      | FenceNode
       | RoofNode
       | RoofSegmentNode
       | SpawnNode
@@ -202,6 +202,9 @@ type EditorState = {
   // Preview mode (viewer-like experience inside the editor)
   isPreviewMode: boolean
   setPreviewMode: (preview: boolean) => void
+  // Capture mode (snapshot toolbar — hides panels for clean framing)
+  isCaptureMode: boolean
+  setCaptureMode: (active: boolean) => void
   // View mode (3D only, 2D only, or split 2D+3D)
   viewMode: ViewMode
   setViewMode: (mode: ViewMode) => void
@@ -224,21 +227,22 @@ type EditorState = {
   setReferenceFloorOffset: (offset: number) => void
   referenceFloorOpacity: number
   setReferenceFloorOpacity: (opacity: number) => void
+  // Development-only camera debug flag for inspecting underside geometry
+  allowUndergroundCamera: boolean
+  setAllowUndergroundCamera: (enabled: boolean) => void
   // First-person walkthrough mode (street view)
   isFirstPersonMode: boolean
   _viewModeBeforeFirstPerson: ViewMode | null
   setFirstPersonMode: (enabled: boolean) => void
-  // Development-only camera debug flag for inspecting underside geometry
-  allowUndergroundCamera: boolean
-  setAllowUndergroundCamera: (enabled: boolean) => void
   activeSidebarPanel: string
   setActiveSidebarPanel: (id: string) => void
-  mobilePanelSheetHeight: number
-  setMobilePanelSheetHeight: (height: number) => void
-  isCaptureMode: boolean
   setIsCaptureMode: (enabled: boolean) => void
   floorplanPaneRatio: number
   setFloorplanPaneRatio: (ratio: number) => void
+  // Mobile-only: pixel height of the secondary panel sheet while open (0 when closed).
+  // Read by the mobile layout so the viewer container can shrink to preview edits.
+  mobilePanelSheetHeight: number
+  setMobilePanelSheetHeight: (px: number) => void
 }
 
 export type PersistedEditorUiState = Pick<
@@ -456,10 +460,6 @@ export function selectDefaultBuildingAndLevel() {
   }
 }
 
-function getDefaultSelectedItemForCategory(category: CatalogCategory | null): AssetInput | null {
-  return getDefaultCatalogItem(category)
-}
-
 const useEditor = create<EditorState>()(
   persist(
     (set, get) => ({
@@ -481,11 +481,7 @@ const useEditor = create<EditorState>()(
           } else if (phase === 'structure') {
             set({ tool: 'wall', catalogCategory: null })
           } else if (phase === 'furnish') {
-            set({
-              tool: 'item',
-              catalogCategory: 'furniture',
-              selectedItem: getDefaultSelectedItemForCategory('furniture'),
-            })
+            set({ tool: 'item', catalogCategory: 'furniture' })
           }
         } else {
           // Reset to select mode and clear tool/catalog when switching phases
@@ -525,15 +521,8 @@ const useEditor = create<EditorState>()(
             } else if (phase === 'structure' && structureLayer === 'elements') {
               set({ tool: 'wall' })
             } else if (phase === 'furnish') {
-              set({
-                tool: 'item',
-                catalogCategory: 'furniture',
-                selectedItem: getDefaultSelectedItemForCategory('furniture'),
-              })
+              set({ tool: 'item', catalogCategory: 'furniture' })
             }
-          } else if (phase === 'furnish' && tool === 'item' && !get().selectedItem) {
-            const category = get().catalogCategory ?? 'furniture'
-            set({ selectedItem: getDefaultSelectedItemForCategory(category) })
           }
         } else if (mode === 'material-paint') {
           get().primeMaterialPaintFromSelection()
@@ -563,27 +552,17 @@ const useEditor = create<EditorState>()(
         })
       },
       catalogCategory: DEFAULT_PERSISTED_EDITOR_UI_STATE.catalogCategory,
-      setCatalogCategory: (category) =>
-        set((state) => ({
-          catalogCategory: category,
-          selectedItem:
-            category !== null &&
-            state.phase === 'furnish' &&
-            state.mode === 'build' &&
-            state.tool === 'item'
-              ? getDefaultSelectedItemForCategory(category)
-              : state.selectedItem,
-        })),
+      setCatalogCategory: (category) => set({ catalogCategory: category }),
       selectedItem: null,
       setSelectedItem: (item) => set({ selectedItem: item }),
       movingNode: null as
         | ItemNode
         | WindowNode
         | DoorNode
-        | FenceNode
         | CeilingNode
         | SlabNode
         | WallNode
+        | FenceNode
         | RoofNode
         | RoofSegmentNode
         | StairNode
@@ -688,6 +667,8 @@ const useEditor = create<EditorState>()(
           set({ isPreviewMode: false })
         }
       },
+      isCaptureMode: false,
+      setCaptureMode: (active) => set({ isCaptureMode: active }),
       viewMode: DEFAULT_PERSISTED_EDITOR_UI_STATE.viewMode,
       setViewMode: (mode) => set({ viewMode: mode, isFloorplanOpen: mode !== '3d' }),
       splitOrientation: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.splitOrientation,
@@ -742,33 +723,20 @@ const useEditor = create<EditorState>()(
       },
       activeSidebarPanel: DEFAULT_ACTIVE_SIDEBAR_PANEL,
       setActiveSidebarPanel: (id) => set({ activeSidebarPanel: id }),
-      mobilePanelSheetHeight: 0,
-      setMobilePanelSheetHeight: (height) => set({ mobilePanelSheetHeight: height }),
-      isCaptureMode: false,
       setIsCaptureMode: (enabled) => set({ isCaptureMode: enabled }),
       floorplanPaneRatio: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.floorplanPaneRatio,
       setFloorplanPaneRatio: (ratio) =>
         set({ floorplanPaneRatio: normalizeFloorplanPaneRatio(ratio) }),
+      mobilePanelSheetHeight: 0,
+      setMobilePanelSheetHeight: (px) => set({ mobilePanelSheetHeight: Math.max(0, px) }),
     }),
     {
       name: 'pascal-editor-ui-preferences',
-      merge: (persistedState, currentState) => {
-        const mergedState = {
-          ...currentState,
-          ...normalizePersistedEditorUiState(persistedState as Partial<PersistedEditorState>),
-          ...normalizePersistedEditorLayoutState(persistedState as Partial<PersistedEditorState>),
-        }
-
-        return {
-          ...mergedState,
-          selectedItem:
-            mergedState.phase === 'furnish' &&
-            mergedState.mode === 'build' &&
-            mergedState.tool === 'item'
-              ? getDefaultSelectedItemForCategory(mergedState.catalogCategory ?? 'furniture')
-              : currentState.selectedItem,
-        }
-      },
+      merge: (persistedState, currentState) => ({
+        ...currentState,
+        ...normalizePersistedEditorUiState(persistedState as Partial<PersistedEditorState>),
+        ...normalizePersistedEditorLayoutState(persistedState as Partial<PersistedEditorState>),
+      }),
       partialize: (state) => ({
         phase: state.phase,
         mode: state.mode,

package/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "@pascal/typescript-config/react-library.json",
   "compilerOptions": {
     "rootDir": "src",
-    "noEmit": true
+    "noEmit": true,
+    "types": ["bun"]
   },
   "include": ["src"],
   "exclude": ["node_modules"]

package/src/components/feedback-dialog.tsx

@@ -1,265 +0,0 @@
-'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>
-    </>
-  )
-}