@pascal-app/editor 0.8.0 → 0.9.1

package/src/components/tools/wall/wall-snap-geometry.ts

@@ -0,0 +1,270 @@
+// Pure geometry for "magnetic" wall-draft snapping — no store / viewer / React
+// deps, so it's unit-testable in isolation. Coordinates are XZ plan points
+// (building-local meters). `wall-drafting.ts` layers grid/angle snapping and
+// scene access on top of these primitives.
+
+import {
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  isCurvedWall,
+  type WallNode,
+} from '@pascal-app/core'
+
+export type WallPlanPoint = [number, number]
+
+/** Which kind of existing-geometry snap produced a drafted point. */
+export type WallDraftSnapKind = 'endpoint' | 'midpoint' | 'intersection' | 'wall'
+
+export type WallDraftSnapResult = {
+  point: WallPlanPoint
+  /**
+   * Set when `point` locked onto existing wall geometry (a corner, midpoint,
+   * crossing, or wall body) rather than a plain grid/angle position. This is
+   * the "magnetic" snap the beacon visualises; `null` for grid/angle-only.
+   */
+  snap: WallDraftSnapKind | null
+}
+
+export const WALL_JOIN_SNAP_RADIUS = 0.35
+// Generous radius for snapping to an *existing* wall's endpoint while
+// drafting. Larger than `WALL_JOIN_SNAP_RADIUS` because endpoint snap
+// is the strongest user intent (closing a polygon, attaching to a
+// corner) and the cursor never lands pixel-perfect on a corner.
+export const WALL_ENDPOINT_SNAP_RADIUS = 0.7
+// Discrete "special point" snaps taken from the raw cursor (like the
+// endpoint snap) but slightly tighter — a corner is the strongest intent,
+// a midpoint / crossing is the next tier down.
+export const WALL_MIDPOINT_SNAP_RADIUS = 0.5
+export const WALL_INTERSECTION_SNAP_RADIUS = 0.5
+
+export function distanceSquared(a: WallPlanPoint, b: WallPlanPoint): number {
+  const dx = a[0] - b[0]
+  const dz = a[1] - b[1]
+  return dx * dx + dz * dz
+}
+
+export function projectPointOntoWall(point: WallPlanPoint, wall: WallNode): WallPlanPoint | null {
+  const [x1, z1] = wall.start
+  const [x2, z2] = wall.end
+  const dx = x2 - x1
+  const dz = z2 - z1
+  const lengthSquared = dx * dx + dz * dz
+  if (lengthSquared < 1e-9) {
+    return null
+  }
+
+  const t = ((point[0] - x1) * dx + (point[1] - z1) * dz) / lengthSquared
+  if (t <= 0 || t >= 1) {
+    return null
+  }
+
+  return [x1 + dx * t, z1 + dz * t]
+}
+
+export function findWallSnapTarget(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  options?: { ignoreWallIds?: string[]; radius?: number },
+): WallPlanPoint | null {
+  const ignoreWallIds = new Set(options?.ignoreWallIds ?? [])
+  const radiusSquared = (options?.radius ?? WALL_JOIN_SNAP_RADIUS) ** 2
+  let bestTarget: WallPlanPoint | null = null
+  let bestDistanceSquared = Number.POSITIVE_INFINITY
+
+  for (const wall of walls) {
+    if (ignoreWallIds.has(wall.id)) {
+      continue
+    }
+
+    const candidates: Array<WallPlanPoint | null> = [wall.start, wall.end]
+
+    if (isCurvedWall(wall)) {
+      const sampleCount = Math.max(8, Math.ceil(getWallCurveLength(wall) / 0.3))
+      for (let index = 0; index <= sampleCount; index += 1) {
+        const frame = getWallCurveFrameAt(wall, index / sampleCount)
+        candidates.push([frame.point.x, frame.point.y])
+      }
+    } else {
+      candidates.push(projectPointOntoWall(point, wall))
+    }
+    for (const candidate of candidates) {
+      if (!candidate) {
+        continue
+      }
+
+      const candidateDistanceSquared = distanceSquared(point, candidate)
+      if (
+        candidateDistanceSquared > radiusSquared ||
+        candidateDistanceSquared >= bestDistanceSquared
+      ) {
+        continue
+      }
+
+      bestTarget = candidate
+      bestDistanceSquared = candidateDistanceSquared
+    }
+  }
+
+  return bestTarget
+}
+
+/**
+ * Endpoint-only snap from the *raw* cursor (no grid pre-snap), with a
+ * generous radius. Use this before `findWallSnapTarget` so the strong
+ * "attach to an existing wall corner" intent isn't accidentally pushed
+ * out of range by an interim grid snap that moved the cursor away from
+ * the endpoint.
+ */
+export function findWallEndpointFromRaw(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  ignoreWallIds?: string[],
+): WallPlanPoint | null {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const radiusSquared = WALL_ENDPOINT_SNAP_RADIUS ** 2
+  let best: WallPlanPoint | null = null
+  let bestDistSq = Number.POSITIVE_INFINITY
+
+  for (const wall of walls) {
+    if (ignored.has(wall.id)) continue
+    for (const corner of [wall.start, wall.end] as WallPlanPoint[]) {
+      const d = distanceSquared(point, corner)
+      if (d <= radiusSquared && d < bestDistSq) {
+        best = corner
+        bestDistSq = d
+      }
+    }
+  }
+  return best
+}
+
+/** Midpoint of a wall — curve midpoint for curved walls, segment midpoint otherwise. */
+function wallMidpoint(wall: WallNode): WallPlanPoint {
+  if (isCurvedWall(wall)) {
+    const frame = getWallCurveFrameAt(wall, 0.5)
+    return [frame.point.x, frame.point.y]
+  }
+  return [(wall.start[0] + wall.end[0]) / 2, (wall.start[1] + wall.end[1]) / 2]
+}
+
+/** Nearest wall midpoint to the raw cursor, within `WALL_MIDPOINT_SNAP_RADIUS`. */
+export function findWallMidpointFromRaw(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  ignoreWallIds?: string[],
+): WallPlanPoint | null {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const radiusSquared = WALL_MIDPOINT_SNAP_RADIUS ** 2
+  let best: WallPlanPoint | null = null
+  let bestDistSq = Number.POSITIVE_INFINITY
+
+  for (const wall of walls) {
+    if (ignored.has(wall.id)) continue
+    const mid = wallMidpoint(wall)
+    const d = distanceSquared(point, mid)
+    if (d <= radiusSquared && d < bestDistSq) {
+      best = mid
+      bestDistSq = d
+    }
+  }
+  return best
+}
+
+/** Crossing point of two straight segments, or null if they don't intersect within both. */
+function segmentIntersection(
+  a1: WallPlanPoint,
+  a2: WallPlanPoint,
+  b1: WallPlanPoint,
+  b2: WallPlanPoint,
+): WallPlanPoint | null {
+  const rx = a2[0] - a1[0]
+  const rz = a2[1] - a1[1]
+  const sx = b2[0] - b1[0]
+  const sz = b2[1] - b1[1]
+  const denom = rx * sz - rz * sx
+  if (Math.abs(denom) < 1e-9) return null // parallel / collinear
+
+  const qpx = b1[0] - a1[0]
+  const qpz = b1[1] - a1[1]
+  const t = (qpx * sz - qpz * sx) / denom
+  const u = (qpx * rz - qpz * rx) / denom
+  if (t < 0 || t > 1 || u < 0 || u > 1) return null
+
+  return [a1[0] + t * rx, a1[1] + t * rz]
+}
+
+/**
+ * Nearest point where two existing straight walls cross, within
+ * `WALL_INTERSECTION_SNAP_RADIUS`. Curved walls are skipped. O(n²) over the
+ * level's walls — fine at editor scale.
+ */
+export function findWallIntersectionFromRaw(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  ignoreWallIds?: string[],
+): WallPlanPoint | null {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const straight = walls.filter((wall) => !ignored.has(wall.id) && !isCurvedWall(wall))
+  const radiusSquared = WALL_INTERSECTION_SNAP_RADIUS ** 2
+  let best: WallPlanPoint | null = null
+  let bestDistSq = Number.POSITIVE_INFINITY
+
+  for (let i = 0; i < straight.length; i += 1) {
+    for (let j = i + 1; j < straight.length; j += 1) {
+      const crossing = segmentIntersection(
+        straight[i]!.start,
+        straight[i]!.end,
+        straight[j]!.start,
+        straight[j]!.end,
+      )
+      if (!crossing) continue
+      const d = distanceSquared(point, crossing)
+      if (d <= radiusSquared && d < bestDistSq) {
+        best = crossing
+        bestDistSq = d
+      }
+    }
+  }
+  return best
+}
+
+/** Pick the candidate nearest to `point`, ignoring nulls. */
+function nearestCandidate(
+  point: WallPlanPoint,
+  candidates: Array<WallDraftSnapResult | null | false>,
+): WallDraftSnapResult | null {
+  let best: WallDraftSnapResult | null = null
+  let bestDistSq = Number.POSITIVE_INFINITY
+  for (const candidate of candidates) {
+    if (!candidate) continue
+    const d = distanceSquared(point, candidate.point)
+    if (d < bestDistSq) {
+      best = candidate
+      bestDistSq = d
+    }
+  }
+  return best
+}
+
+/**
+ * Discrete "special point" snap from the raw cursor, in priority order:
+ *   1. corners (endpoints) — strongest intent, largest radius
+ *   2. midpoints / crossings — next tier; the nearer of the two wins
+ * A corner within range always wins over a midpoint/crossing. Returns null
+ * when no special point is in range (caller falls back to grid/edge snap).
+ */
+export function findWallSpecialPointSnap(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  ignoreWallIds?: string[],
+): WallDraftSnapResult | null {
+  const endpoint = findWallEndpointFromRaw(point, walls, ignoreWallIds)
+  if (endpoint) return { point: endpoint, snap: 'endpoint' }
+
+  const midpoint = findWallMidpointFromRaw(point, walls, ignoreWallIds)
+  const intersection = findWallIntersectionFromRaw(point, walls, ignoreWallIds)
+  return nearestCandidate(point, [
+    midpoint && { point: midpoint, snap: 'midpoint' },
+    intersection && { point: intersection, snap: 'intersection' },
+  ])
+}

package/src/components/tools/zone/zone-tool.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { BufferGeometry, DoubleSide, type Group, type Line, Shape, Vector3 } from 'three'
 import { EDITOR_LAYER } from './../../../lib/constants'
 import { sfxEmitter } from './../../../lib/sfx-bus'
+import { snapWorldXZForActiveBuilding } from './../../../lib/world-grid-snap'
 import useEditor from './../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
 
@@ -178,9 +179,13 @@ export const ZoneTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!cursorRef.current) return
 
-      // Snap to 0.5 grid
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      // World-grid snap projected into building-local; rotated buildings
+      // used to pull the snap off the visible grid lines.
+      const [gridX, gridZ] = snapWorldXZForActiveBuilding(
+        event.position[0],
+        event.position[2],
+        0.5,
+      ).local
       cursorPosition = [gridX, gridZ]
       levelYRef.current = event.localPosition[1]
 
@@ -209,8 +214,11 @@ export const ZoneTool: React.FC = () => {
     const onGridClick = (event: GridEvent) => {
       if (!currentLevelId) return
 
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      const [gridX, gridZ] = snapWorldXZForActiveBuilding(
+        event.position[0],
+        event.position[2],
+        0.5,
+      ).local
       let clickPoint: [number, number] = [gridX, gridZ]
 
       // Snap to axis from last point
@@ -236,7 +244,9 @@ export const ZoneTool: React.FC = () => {
         mainLineRef.current.visible = false
         closingLineRef.current.visible = false
       } else {
-        // Add point to polygon
+        // Add point to polygon. Every non-closing vertex is a "start" tick;
+        // closing the polygon above fires the structure-build (end) cue.
+        sfxEmitter.emit('sfx:structure-build-start')
         pointsRef.current = [...pointsRef.current, clickPoint]
         updatePreview()
       }

package/src/components/ui/action-menu/action-button.tsx

@@ -5,6 +5,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from './../../../components/ui/primitives/tooltip'
+import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
 
 interface ActionButtonProps extends React.ComponentProps<typeof Button> {
@@ -17,7 +18,18 @@ interface ActionButtonProps extends React.ComponentProps<typeof Button> {
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
   (
-    { className, children, label, shortcut, isActive, tooltipContent, tooltipSide, ...props },
+    {
+      className,
+      children,
+      label,
+      shortcut,
+      isActive,
+      tooltipContent,
+      tooltipSide,
+      onClick,
+      onMouseEnter,
+      ...props
+    },
     ref,
   ) => {
     return (
@@ -25,6 +37,14 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
         <TooltipTrigger asChild>
           <Button
             className={cn('relative h-11 w-11 transition-all', className)}
+            onClick={(event) => {
+              triggerSFX('sfx:menu-click')
+              onClick?.(event)
+            }}
+            onMouseEnter={(event) => {
+              triggerSFX('sfx:menu-hover')
+              onMouseEnter?.(event)
+            }}
             ref={ref}
             {...props}
           >

package/src/components/ui/action-menu/control-modes.tsx

@@ -6,18 +6,10 @@ import { useViewer } from '@pascal-app/viewer'
 import { type LucideIcon, Trash2 } from 'lucide-react'
 import Image from 'next/image'
 import { cn } from './../../../lib/utils'
-import useEditor from './../../../store/use-editor'
+import useEditor, { selectSiteFloorplanContext } from './../../../store/use-editor'
 import { ActionButton } from './action-button'
 
-type ControlId =
-  | 'select'
-  | 'box-select'
-  | 'site-edit'
-  | 'build'
-  | 'material-paint'
-  | 'furnish'
-  | 'zone'
-  | 'delete'
+type ControlId = 'select' | 'box-select' | 'site-edit' | 'zone' | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -40,44 +32,13 @@ const controls: ControlConfig[] = [
     color: 'hover:bg-blue-500/20 hover:text-blue-400',
     activeColor: 'bg-blue-500/20 text-blue-400',
   },
-  {
-    id: 'box-select',
-    iconifyIcon: 'mdi:select-drag',
-    label: 'Box select',
-    color: 'hover:bg-white/5',
-    activeColor: 'bg-white/10 hover:bg-white/10',
-  },
   {
     id: 'site-edit',
-    imageSrc: '/icons/site.png',
+    imageSrc: '/icons/site-flag.png',
     label: 'Edit site',
     color: 'hover:bg-white/5',
     activeColor: 'bg-white/10 hover:bg-white/10',
   },
-  {
-    id: 'build',
-    imageSrc: '/icons/build.png',
-    label: 'Build',
-    shortcut: 'B',
-    color: 'hover:bg-green-500/20 hover:text-green-400',
-    activeColor: 'bg-green-500/20 text-green-400',
-  },
-  {
-    id: 'material-paint',
-    imageSrc: '/icons/paint.png',
-    label: 'Material Paint',
-    shortcut: 'P',
-    color: 'hover:bg-amber-500/20 hover:text-amber-400',
-    activeColor: 'bg-amber-500/20 text-amber-400',
-  },
-  {
-    id: 'furnish',
-    imageSrc: '/icons/couch.png',
-    label: 'Furnish',
-    shortcut: 'F',
-    color: 'hover:bg-green-500/20 hover:text-green-400',
-    activeColor: 'bg-green-500/20 text-green-400',
-  },
   {
     id: 'zone',
     imageSrc: '/icons/zone.png',
@@ -90,7 +51,7 @@ const controls: ControlConfig[] = [
     id: 'delete',
     icon: Trash2,
     label: 'Delete',
-    shortcut: 'D',
+    shortcut: 'X',
     color: 'hover:bg-red-500/20 hover:text-red-400',
     activeColor: 'bg-red-500/20 text-red-400',
   },
@@ -104,9 +65,6 @@ export function ControlModes() {
   const setPhase = useEditor((state) => state.setPhase)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
-  const primeMaterialPaintFromSelection = useEditor(
-    (state) => state.primeMaterialPaintFromSelection,
-  )
   const levelId = useViewer((s) => s.selection.levelId)
 
   // Only subscribe to the primitive `level` number — when walls are added to
@@ -129,10 +87,6 @@ export function ControlModes() {
     if (id === 'select') return mode === 'select' && selectionTool === 'click'
     if (id === 'box-select') return mode === 'select' && selectionTool === 'marquee'
     if (id === 'site-edit') return false
-    if (id === 'build')
-      return mode === 'build' && phase === 'structure' && structureLayer === 'elements'
-    if (id === 'material-paint') return mode === 'material-paint'
-    if (id === 'furnish') return mode === 'build' && phase === 'furnish'
     if (id === 'zone')
       return mode === 'build' && phase === 'structure' && structureLayer === 'zones'
     return mode === id
@@ -146,12 +100,8 @@ export function ControlModes() {
         setMode('select')
         setStructureLayer('elements')
       } else if (isGroundFloor) {
-        // Enter site editing — set state directly to preserve level selection.
-        // setPhase('site') calls viewer.resetSelection() which clears levelId,
-        // breaking the 2D floorplan (it needs a level to render the SVG).
         useEditor.setState({ phase: 'site', mode: 'select', tool: null, catalogCategory: null })
-        // Clear object selection so the polygon editor handles receive pointer events
-        useViewer.getState().setSelection({ selectedIds: [] })
+        selectSiteFloorplanContext()
       }
       return
     }
@@ -168,33 +118,6 @@ export function ControlModes() {
     } else if (id === 'box-select') {
       setMode('select')
       setSelectionTool('marquee')
-    } else if (id === 'build') {
-      // Toggle: if already in structure build, go back to select
-      if (getIsActive('build')) {
-        setMode('select')
-      } else {
-        setPhase('structure')
-        setStructureLayer('elements')
-        setMode('build')
-      }
-    } else if (id === 'material-paint') {
-      if (getIsActive('material-paint')) {
-        setMode('select')
-      } else {
-        primeMaterialPaintFromSelection()
-        setPhase('structure')
-        setStructureLayer('elements')
-        setMode('material-paint')
-      }
-    } else if (id === 'furnish') {
-      if (getIsActive('furnish')) {
-        setMode('select')
-      } else {
-        setPhase('furnish')
-        setMode('build')
-        // Auto-switch sidebar to the items panel so the user can pick furniture
-        useEditor.getState().setActiveSidebarPanel('items')
-      }
     } else if (id === 'zone') {
       if (getIsActive('zone')) {
         setMode('select')

package/src/components/ui/action-menu/index.tsx

@@ -1,19 +1,14 @@
 'use client'
 
-import { useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { AnimatePresence, motion } from 'motion/react'
-import { useEffect, useMemo } from 'react'
-import { MaterialPicker } from './../../../components/ui/controls/material-picker'
+import { motion } from 'motion/react'
 import { TooltipProvider } from './../../../components/ui/primitives/tooltip'
 import { useIsMobile } from './../../../hooks/use-mobile'
 import { useReducedMotion } from './../../../hooks/use-reduced-motion'
-import { resolvePaintTargetFromSelection } from './../../../lib/material-paint'
 import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
-import { StructureTools } from './structure-tools'
 import { GridSnapControl, SecondaryToggles } from './view-toggles'
 
 // Mobile bottom offset matches the viewer's overlap behind the sheet's
@@ -21,47 +16,7 @@ import { GridSnapControl, SecondaryToggles } from './view-toggles'
 // just above that strip instead of inside it.
 const MOBILE_BOTTOM_OFFSET = 24
 
-function PaintMaterialTray() {
-  const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
-  const activePaintTarget = useEditor((state) => state.activePaintTarget)
-  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
-  const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
-  const selectedIds = useViewer((state) => state.selection.selectedIds)
-  const nodes = useScene((state) => state.nodes)
-  const selectedId = selectedIds.length === 1 ? (selectedIds[0] ?? null) : null
-
-  useEffect(() => {
-    const selectedPaintTarget = resolvePaintTargetFromSelection({
-      nodes,
-      selectedId,
-    })
-
-    if (selectedPaintTarget) {
-      setActivePaintTarget(selectedPaintTarget)
-    }
-  }, [nodes, selectedId, setActivePaintTarget])
-
-  return (
-    <div className="w-[42rem] max-w-[calc(100vw-2rem)]">
-      <MaterialPicker
-        onChange={(material) => {
-          setActivePaintMaterial({ material, sourceTarget: activePaintTarget })
-        }}
-        onSelectMaterialPreset={(materialPreset) => {
-          setActivePaintMaterial({ materialPreset, sourceTarget: activePaintTarget })
-        }}
-        selectedMaterialPreset={activePaintMaterial?.materialPreset}
-        value={activePaintMaterial?.material}
-      />
-    </div>
-  )
-}
-
 export function ActionMenu({ className }: { className?: string }) {
-  const phase = useEditor((state) => state.phase)
-  const mode = useEditor((state) => state.mode)
-  const tool = useEditor((state) => state.tool)
-  const catalogCategory = useEditor((state) => state.catalogCategory)
   const isMobile = useIsMobile()
   const hasSelectionOnMobile = useViewer((s) => isMobile && s.selection.selectedIds.length > 0)
   const hasReferenceOnMobile = useEditor((s) => isMobile && Boolean(s.selectedReferenceId))
@@ -70,7 +25,6 @@ export function ActionMenu({ className }: { className?: string }) {
     (s) => isMobile && CONTEXTUAL_TABS.has(s.activeSidebarPanel),
   )
   const reducedMotion = useReducedMotion()
-  const showPaintTray = useMemo(() => mode === 'material-paint', [mode])
 
   // On mobile, defer the bottom rail to the selection bar when something
   // is selected — the contextual actions take priority over mode controls.
@@ -97,72 +51,6 @@ export function ActionMenu({ className }: { className?: string }) {
         style={isMobile ? { bottom: MOBILE_BOTTOM_OFFSET } : undefined}
         transition={transition}
       >
-        {/* Structure Tools Row - Animated */}
-        <AnimatePresence>
-          {phase === 'structure' && mode === 'build' && (
-            <motion.div
-              animate={{
-                opacity: 1,
-                maxHeight: 80,
-                paddingTop: 8,
-                paddingBottom: 8,
-                borderBottomWidth: 1,
-              }}
-              className={cn('max-h-20 overflow-hidden border-border border-b px-2 py-2')}
-              exit={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              initial={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              transition={transition}
-            >
-              <div className="w-max">
-                <StructureTools />
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <AnimatePresence>
-          {showPaintTray && (
-            <motion.div
-              animate={{
-                opacity: 1,
-                maxHeight: 96,
-                paddingTop: 8,
-                paddingBottom: 8,
-                borderBottomWidth: 1,
-              }}
-              className={cn('overflow-hidden border-border border-b px-3')}
-              exit={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              initial={{
-                opacity: 0,
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                borderBottomWidth: 0,
-              }}
-              transition={transition}
-            >
-              <PaintMaterialTray />
-            </motion.div>
-          )}
-        </AnimatePresence>
         {isMobile ? (
           <div className="flex flex-col items-stretch gap-0.5 px-2 py-1.5">
             {/* Row 1: control modes only */}