@pascal-app/editor 0.7.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

@@ -3,6 +3,8 @@ import { useViewer } from '@pascal-app/viewer'
 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'
 
@@ -67,6 +69,9 @@ const commitZoneDrawing = (levelId: LevelNode['id'], points: Array<[number, numb
 
   // Select the newly created zone
   useViewer.getState().setSelection({ zoneId: zone.id })
+
+  // Play structure build sound
+  sfxEmitter.emit('sfx:structure-build')
 }
 
 type PreviewState = {
@@ -86,6 +91,7 @@ export const ZoneTool: React.FC = () => {
   const mainLineRef = useRef<Line>(null!)
   const closingLineRef = useRef<Line>(null!)
   const pointsRef = useRef<Array<[number, number]>>([])
+  const previousSnappedPointRef = useRef<[number, number] | null>(null)
   const levelYRef = useRef(0) // Track current level Y position
   const currentLevelId = useViewer((state) => state.selection.levelId)
   const setTool = useEditor((state) => state.setTool)
@@ -173,20 +179,34 @@ 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]
 
       // If we have points, snap to axis from last point
       const lastPoint = pointsRef.current[pointsRef.current.length - 1]
-      if (lastPoint) {
-        const snapped = calculateSnapPoint(lastPoint, cursorPosition)
-        cursorRef.current.position.set(snapped[0], event.localPosition[1], snapped[1])
-      } else {
-        cursorRef.current.position.set(gridX, event.localPosition[1], gridZ)
+      const displayPoint = lastPoint
+        ? calculateSnapPoint(lastPoint, cursorPosition)
+        : cursorPosition
+
+      // Play snap sound when the snapped position changes during drawing
+      if (
+        pointsRef.current.length > 0 &&
+        previousSnappedPointRef.current &&
+        (displayPoint[0] !== previousSnappedPointRef.current[0] ||
+          displayPoint[1] !== previousSnappedPointRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
       }
+      previousSnappedPointRef.current = displayPoint
+
+      cursorRef.current.position.set(displayPoint[0], event.localPosition[1], displayPoint[1])
 
       updatePreview()
     }
@@ -194,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
@@ -221,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,7 +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
@@ -127,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
@@ -144,10 +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 })
+        selectSiteFloorplanContext()
       }
       return
     }
@@ -164,31 +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')
-      }
     } else if (id === 'zone') {
       if (getIsActive('zone')) {
         setMode('select')

package/src/components/ui/action-menu/furnish-tools.tsx

@@ -1,9 +1,4 @@
-'use client'
-
-import NextImage from 'next/image'
-import { cn } from './../../../lib/utils'
-import useEditor, { type CatalogCategory } from './../../../store/use-editor'
-import { ActionButton } from './action-button'
+import type { CatalogCategory } from './../../../store/use-editor'
 
 export type FurnishToolConfig = {
   id: 'item'
@@ -12,91 +7,10 @@ export type FurnishToolConfig = {
   catalogCategory: CatalogCategory
 }
 
-// Furnish mode tools: furniture, appliances, decoration (painting is now a control mode)
 export const furnishTools: FurnishToolConfig[] = [
-  {
-    id: 'item',
-    iconSrc: '/icons/couch.png',
-    label: 'Furniture',
-    catalogCategory: 'furniture',
-  },
-  {
-    id: 'item',
-    iconSrc: '/icons/appliance.png',
-    label: 'Appliance',
-    catalogCategory: 'appliance',
-  },
-  {
-    id: 'item',
-    iconSrc: '/icons/kitchen.png',
-    label: 'Kitchen',
-    catalogCategory: 'kitchen',
-  },
-  {
-    id: 'item',
-    iconSrc: '/icons/bathroom.png',
-    label: 'Bathroom',
-    catalogCategory: 'bathroom',
-  },
-  {
-    id: 'item',
-    iconSrc: '/icons/tree.png',
-    label: 'Outdoor',
-    catalogCategory: 'outdoor',
-  },
+  { id: 'item', iconSrc: '/icons/couch.png', label: 'Furniture', catalogCategory: 'furniture' },
+  { id: 'item', iconSrc: '/icons/appliance.png', label: 'Appliance', catalogCategory: 'appliance' },
+  { id: 'item', iconSrc: '/icons/kitchen.png', label: 'Kitchen', catalogCategory: 'kitchen' },
+  { id: 'item', iconSrc: '/icons/bathroom.png', label: 'Bathroom', catalogCategory: 'bathroom' },
+  { id: 'item', iconSrc: '/icons/tree.png', label: 'Outdoor', catalogCategory: 'outdoor' },
 ]
-
-export function FurnishTools() {
-  const mode = useEditor((state) => state.mode)
-  const activeTool = useEditor((state) => state.tool)
-  const setActiveTool = useEditor((state) => state.setTool)
-  const setMode = useEditor((state) => state.setMode)
-  const catalogCategory = useEditor((state) => state.catalogCategory)
-  const setCatalogCategory = useEditor((state) => state.setCatalogCategory)
-
-  const hasActiveTool = furnishTools.some(
-    (tool) => mode === 'build' && activeTool === 'item' && catalogCategory === tool.catalogCategory,
-  )
-
-  return (
-    <div className="flex items-center gap-1.5 px-1">
-      {furnishTools.map((tool, index) => {
-        // For item tools with catalog category, check both tool and category match
-        const isActive =
-          mode === 'build' && activeTool === 'item' && catalogCategory === tool.catalogCategory
-
-        return (
-          <ActionButton
-            className={cn(
-              'rounded-lg duration-300',
-              isActive
-                ? 'z-10 scale-110 bg-black/40 hover:bg-black/40'
-                : 'scale-95 bg-transparent opacity-60 grayscale hover:bg-black/20 hover:opacity-100 hover:grayscale-0',
-            )}
-            key={`${tool.id}-${tool.catalogCategory ?? index}`}
-            label={tool.label}
-            onClick={() => {
-              if (!isActive) {
-                setCatalogCategory(tool.catalogCategory)
-                setActiveTool('item')
-                if (mode !== 'build') {
-                  setMode('build')
-                }
-              }
-            }}
-            size="icon"
-            variant="ghost"
-          >
-            <NextImage
-              alt={tool.label}
-              className="size-full object-contain"
-              height={28}
-              src={tool.iconSrc}
-              width={28}
-            />
-          </ActionButton>
-        )
-      })}
-    </div>
-  )
-}