@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -0,0 +1,331 @@
+// 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 WallSnapRadii = Partial<Record<WallDraftSnapKind, number>>
+
+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
+// Tight capture radius for the connectivity snap that runs in NON-magnetic modes
+// (grid / off / angles). Joining an existing wall is treated as connectivity —
+// separate from the 'lines' magnetic alignment — so a room can still close in
+// those modes: within this distance of a wall the endpoint sticks onto it (and
+// the beacon shows); beyond it, positioning is left to the mode. Kept small so
+// only the last few cm near a wall stick, well above the room-detection junction
+// tolerance so a captured endpoint always registers as connected.
+export const WALL_CONNECT_SNAP_RADIUS = 0.05
+// 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[],
+  radius = WALL_ENDPOINT_SNAP_RADIUS,
+): WallPlanPoint | null {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const radiusSquared = 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[],
+  radius = WALL_MIDPOINT_SNAP_RADIUS,
+): WallPlanPoint | null {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const radiusSquared = 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[],
+  radius = WALL_INTERSECTION_SNAP_RADIUS,
+): WallPlanPoint | null {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const straight = walls.filter((wall) => !ignored.has(wall.id) && !isCurvedWall(wall))
+  const radiusSquared = 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
+}
+
+// Tolerance for "the committed endpoint actually lies on existing wall
+// geometry". Commit-time resolution (corner join, connect snap, split) puts
+// the endpoint exactly on the geometry, so this only needs to absorb float
+// drift — it is NOT a snap radius.
+export const WALL_CHAIN_JOIN_TOLERANCE = 1e-3
+
+/**
+ * True when a committed chain segment's resolved `end` lies on wall geometry
+ * (an endpoint, or a straight wall's interior) of a wall outside the current
+ * draft chain. The wall tools stop chaining there: a segment that tees into
+ * the existing network is a termination — continuing would draft the next
+ * segment on top of existing walls. `chainWallIds` excludes the chain's own
+ * segments (including the just-committed one) so edge/midpoint snaps onto a
+ * previous own segment don't read as a join. Curved wall interiors are
+ * skipped (their endpoints still count) — resolving an end onto a curve body
+ * is rare and continuing there matches the previous behaviour.
+ */
+export function chainEndJoinsExistingWall(
+  end: WallPlanPoint,
+  walls: WallNode[],
+  chainWallIds: string[],
+  tolerance = WALL_CHAIN_JOIN_TOLERANCE,
+): boolean {
+  const ignored = new Set(chainWallIds)
+  const toleranceSquared = tolerance * tolerance
+
+  for (const wall of walls) {
+    if (ignored.has(wall.id)) continue
+
+    if (
+      distanceSquared(end, wall.start) <= toleranceSquared ||
+      distanceSquared(end, wall.end) <= toleranceSquared
+    ) {
+      return true
+    }
+
+    if (isCurvedWall(wall)) continue
+
+    const projected = projectPointOntoWall(end, wall)
+    if (projected && distanceSquared(end, projected) <= toleranceSquared) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * 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[],
+  radii?: WallSnapRadii,
+): WallDraftSnapResult | null {
+  const endpoint = findWallEndpointFromRaw(point, walls, ignoreWallIds, radii?.endpoint)
+  if (endpoint) return { point: endpoint, snap: 'endpoint' }
+
+  const midpoint = findWallMidpointFromRaw(point, walls, ignoreWallIds, radii?.midpoint)
+  const intersection = findWallIntersectionFromRaw(point, walls, ignoreWallIds, radii?.intersection)
+  return nearestCandidate(point, [
+    midpoint && { point: midpoint, snap: 'midpoint' },
+    intersection && { point: intersection, snap: 'intersection' },
+  ])
+}

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

@@ -18,7 +18,11 @@ export const ZoneBoundaryEditor: React.FC<ZoneBoundaryEditorProps> = ({ zoneId }
 
   const handlePolygonChange = useCallback(
     (newPolygon: Array<[number, number]>) => {
-      updateNode(zoneId, { polygon: newPolygon })
+      updateNode(zoneId, {
+        polygon: newPolygon,
+        autoFromWalls: false,
+        boundaryWallIds: [],
+      })
     },
     [zoneId, updateNode],
   )

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

@@ -1,50 +1,27 @@
-import { emitter, type GridEvent, type LevelNode, useScene, ZoneNode } from '@pascal-app/core'
+import {
+  DEFAULT_ANGLE_STEP,
+  emitter,
+  type GridEvent,
+  type LevelNode,
+  snapPointAlongAngleRay,
+  useScene,
+  ZoneNode,
+} from '@pascal-app/core'
 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 useEditor from './../../../store/use-editor'
+import {
+  clearSurfacePlanSnapFeedback,
+  resolveSurfacePlanPointSnap,
+} from './../../../lib/surface-plan-snap'
+import { snapWorldXZForActiveBuilding } from './../../../lib/world-grid-snap'
+import useEditor, { isAngleSnapActive, isGridSnapActive } from './../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
 
 const Y_OFFSET = 0.02
 
-/**
- * Snaps a point to the nearest axis-aligned or 45-degree diagonal from the last point
- */
-const calculateSnapPoint = (
-  lastPoint: [number, number],
-  currentPoint: [number, number],
-): [number, number] => {
-  const [x1, y1] = lastPoint
-  const [x, y] = currentPoint
-
-  const dx = x - x1
-  const dy = y - y1
-  const absDx = Math.abs(dx)
-  const absDy = Math.abs(dy)
-
-  // Calculate distances to horizontal, vertical, and diagonal lines
-  const horizontalDist = absDy
-  const verticalDist = absDx
-  const diagonalDist = Math.abs(absDx - absDy)
-
-  // Find the minimum distance to determine which axis to snap to
-  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
-
-  if (minDist === diagonalDist) {
-    // Snap to 45° diagonal
-    const diagonalLength = Math.min(absDx, absDy)
-    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
-  }
-  if (minDist === horizontalDist) {
-    // Snap to horizontal
-    return [x, y1]
-  }
-  // Snap to vertical
-  return [x1, y]
-}
-
 /**
  * Creates a zone with the given polygon points
  */
@@ -106,11 +83,35 @@ export const ZoneTool: React.FC = () => {
     if (!currentLevelId) return
 
     let cursorPosition: [number, number] = [0, 0]
+    let snappedCursorPosition: [number, number] | null = null
 
     // Initialize line geometries
     mainLineRef.current.geometry = new BufferGeometry()
     closingLineRef.current.geometry = new BufferGeometry()
 
+    // Snapping follows the active mode: `angles` locks the ray to 15° from the
+    // last vertex (grid quantizes the distance along it), otherwise `grid`
+    // quantizes to the world-aligned grid; the shared surface snap then layers
+    // wall-corner/midpoint/crossing magnetics and alignment guides on top —
+    // the same pipeline slab/ceiling drafting uses. No held-Shift bypass —
+    // Shift cycles the mode (see interaction-scope.md).
+    const snapDraftPoint = (
+      lastPoint: [number, number] | undefined,
+      gridPoint: [number, number],
+      rawPoint: [number, number],
+    ): [number, number] => {
+      const gridStep = isGridSnapActive() ? useEditor.getState().gridSnapStep : 0
+      const orthoPoint: [number, number] =
+        isAngleSnapActive() && lastPoint
+          ? [...snapPointAlongAngleRay(lastPoint, rawPoint, DEFAULT_ANGLE_STEP, gridStep)]
+          : gridPoint
+      return resolveSurfacePlanPointSnap({
+        rawPoint,
+        fallbackPoint: orthoPoint,
+        levelId: currentLevelId,
+      }).point
+    }
+
     const updateLines = () => {
       const points = pointsRef.current
       const y = levelYRef.current + Y_OFFSET
@@ -126,11 +127,9 @@ export const ZoneTool: React.FC = () => {
 
       // Add cursor point
       const lastPoint = points[points.length - 1]
-      if (lastPoint) {
-        const snapped = calculateSnapPoint(lastPoint, cursorPosition)
-        if (isValidPoint(snapped)) {
-          linePoints.push(new Vector3(snapped[0], y, snapped[1]))
-        }
+      const snapped = snappedCursorPosition ?? cursorPosition
+      if (lastPoint && isValidPoint(snapped)) {
+        linePoints.push(new Vector3(snapped[0], y, snapped[1]))
       }
 
       // Update main line geometry
@@ -144,17 +143,14 @@ export const ZoneTool: React.FC = () => {
 
       // Update closing line (from cursor back to first point)
       const firstPoint = points[0]
-      if (points.length >= 2 && lastPoint && isValidPoint(firstPoint)) {
-        const snapped = calculateSnapPoint(lastPoint, cursorPosition)
-        if (isValidPoint(snapped)) {
-          const closingPoints = [
-            new Vector3(snapped[0], y, snapped[1]),
-            new Vector3(firstPoint[0], y, firstPoint[1]),
-          ]
-          closingLineRef.current.geometry.dispose()
-          closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
-          closingLineRef.current.visible = true
-        }
+      if (points.length >= 2 && lastPoint && isValidPoint(firstPoint) && isValidPoint(snapped)) {
+        const closingPoints = [
+          new Vector3(snapped[0], y, snapped[1]),
+          new Vector3(firstPoint[0], y, firstPoint[1]),
+        ]
+        closingLineRef.current.geometry.dispose()
+        closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
+        closingLineRef.current.visible = true
       } else {
         closingLineRef.current.visible = false
       }
@@ -162,36 +158,45 @@ export const ZoneTool: React.FC = () => {
 
     const updatePreview = () => {
       const points = pointsRef.current
-      const lastPoint = points[points.length - 1]
+      const cursorPt = snappedCursorPosition ?? cursorPosition
 
-      let cursorPt: [number, number] | null = null
-      if (lastPoint) {
-        cursorPt = calculateSnapPoint(lastPoint, cursorPosition)
-      } else if (points.length === 0) {
-        cursorPt = cursorPosition
-      }
-
-      setPreview({ points: [...points], cursorPoint: cursorPt, levelY: levelYRef.current })
+      setPreview({
+        points: [...points],
+        cursorPoint: isValidPoint(cursorPt) ? cursorPt : null,
+        levelY: levelYRef.current,
+      })
       updateLines()
     }
 
+    // World-grid snap projected into building-local; rotated buildings
+    // used to pull the snap off the visible grid lines. Grid quantize only
+    // in grid mode; off / lines / angles leave the raw cursor.
+    const gridPointOf = (event: GridEvent): [number, number] =>
+      isGridSnapActive()
+        ? snapWorldXZForActiveBuilding(
+            event.position[0],
+            event.position[2],
+            useEditor.getState().gridSnapStep,
+          ).local
+        : [event.localPosition[0], event.localPosition[2]]
+
     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
-      cursorPosition = [gridX, gridZ]
+      cursorPosition = gridPointOf(event)
       levelYRef.current = event.localPosition[1]
 
-      // If we have points, snap to axis from last point
       const lastPoint = pointsRef.current[pointsRef.current.length - 1]
-      const displayPoint = lastPoint
-        ? calculateSnapPoint(lastPoint, cursorPosition)
-        : cursorPosition
-
-      // Play snap sound when the snapped position changes during drawing
+      const displayPoint = snapDraftPoint(lastPoint, cursorPosition, [
+        event.localPosition[0],
+        event.localPosition[2],
+      ])
+      snappedCursorPosition = displayPoint
+
+      // Play snap sound when the snapped position changes during drawing — only
+      // when a quantizing mode is active (off / lines move continuously).
       if (
+        (isGridSnapActive() || isAngleSnapActive()) &&
         pointsRef.current.length > 0 &&
         previousSnappedPointRef.current &&
         (displayPoint[0] !== previousSnappedPointRef.current[0] ||
@@ -209,15 +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
-      let clickPoint: [number, number] = [gridX, gridZ]
-
-      // Snap to axis from last point
       const lastPoint = pointsRef.current[pointsRef.current.length - 1]
-      if (lastPoint) {
-        clickPoint = calculateSnapPoint(lastPoint, clickPoint)
-      }
+      const clickPoint = snapDraftPoint(lastPoint, gridPointOf(event), [
+        event.localPosition[0],
+        event.localPosition[2],
+      ])
 
       // Check if clicking on the first point to close the shape
       const firstPoint = pointsRef.current[0]
@@ -236,7 +237,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()
       }
@@ -269,6 +272,7 @@ export const ZoneTool: React.FC = () => {
 
       // Reset state on unmount
       pointsRef.current = []
+      clearSurfacePlanSnapFeedback()
     }
   }, [currentLevelId])
 

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}
           >