Configurable grid + snap-to-grid in the layout system (#45)

Closes #44. Two independent grids (garden + per-bed), each with a size and a snap toggle; snapping defaults off. See PR #45 for details.

Co-authored-by: Steve Dudenhoeffer <[email protected]>

web/src/editor/PlopOverlay.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react'
-import { screenToWorld, worldToLocal, type Point } from '@/lib/geometry'
+import { screenToWorld, snapLocalToBedGrid, worldToLocal, type Point } from '@/lib/geometry'
 import { useUpdatePlanting } from '@/lib/objects'
 import type { EditorPlanting } from '@/lib/plantings'
 import { HANDLE_PX, MIN_RADIUS_CM, SELECT_COLOR, objectTransform } from './shared'
@@ -20,11 +20,17 @@ export function PlopOverlay({
   object,
   gardenId,
   svgRef,
+  snap,
+  gridCm,
 }: {
   plop: EditorPlanting
   object: EditorObject
   gardenId: number
   svgRef: RefObject<SVGSVGElement | null>
+  // The parent bed's grid: when snap is true, moving the plop snaps it to the
+  // bed grid (radius stays free either way).
+  snap: boolean
+  gridCm: number
 }) {
   const setLivePlanting = useEditorStore((s) => s.setLivePlanting)
   const setObjectDragging = useEditorStore((s) => s.setObjectDragging)
@@ -57,11 +63,6 @@ export function PlopOverlay({
     }
   }
 
-  const clampLocal = (p: Point): Point => ({
-    x: Math.max(-halfW, Math.min(halfW, p.x)),
-    y: Math.max(-halfH, Math.min(halfH, p.y)),
-  })
-
   const begin = (
     e: ReactPointerEvent,
     onMove: (e: PointerEvent) => EditorPlanting,
@@ -103,7 +104,10 @@ export function PlopOverlay({
       e,
       (ev) => {
         const p = ptr(ev)
-        const next = clampLocal({ x: base.xCm + (p.x - start.x), y: base.yCm + (p.y - start.y) })
+        const moved: Point = { x: base.xCm + (p.x - start.x), y: base.yCm + (p.y - start.y) }
+        // snapLocalToBedGrid clamps either way; step 0 (snapping off) makes it a
+        // pure clamp, so both paths go through one helper.
+        const next = snapLocalToBedGrid(moved, snap ? gridCm : 0, halfW, halfH)
         return { ...base, xCm: next.x, yCm: next.y }
       },
       (f) => ({ id: base.id, version: base.version, xCm: f.xCm, yCm: f.yCm }),