Pansy's core vision: click into a bed, plop plants in its corners, zoom out and
still see what's planted where. Built on the field editor (#11), PlantPicker
(#13), and plantings API (#14).

Data layer
- lib/plantings.ts: ServerPlanting zod shape, EditorPlanting, effectiveCount, and
  a client mirror of the derived-count formula (computeDerivedCount) for live
  resize display; unit-tested.
- lib/objects.ts: /full now types plantings + plants; useCreatePlanting /
  useUpdatePlanting / useRemovePlanting patch the same FullGarden cache with the
  #11 optimistic + 409-rollback contract. A soft-remove drops the plop from the
  active list.

Editor
- store: selectedPlantingId / livePlanting / armedPlant (mutually-exclusive
  object vs plop selection).
- Focus mode: "Plant here" (object inspector) → focusedObjectId; the canvas
  animates fitToRect to the object and dims the rest; a breadcrumb / Escape /
  empty-tap exits. focusedObjectId mirrors to ?focus (deep-linkable, survives
  reload).
- Placing: "+ Add plant" opens the PlantPicker; the chosen plant stays armed for
  repeat placement; tapping inside the focused object drops a plop (default
  radius max(1.5·spacing, 15cm)) in the object's local frame.
- Manipulating: PlopOverlay (drag to move, edge handle to resize, one PATCH per
  gesture) + PlopInspector (change plant, radius, count override vs live derived,
  label, planted date, soft-remove).
- PlopMarker semantic zoom (px/cm bands): far = flat color patch + a dominant-
  plant tint on the object; mid = circle + emoji; near = + name + count. Plops
  render inside each object's rotated group, so moving/rotating a bed carries
  them with no planting writes.

tsc --noEmit clean; 24/24 vitest; production build green.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi

@@ -11,40 +15,58 @@ import type { EditorGarden, EditorObject } from './types'
 const GRID_CM = 100 // 1 m grid
 const GRID_MIN_CELL_PX = 6
 const GRID_MAX_OPACITY = 0.18
+const DIMMED_OPACITY = 0.35

@@ -45,3 +65,4 @@
     [garden.widthCm, garden.heightCm],
   )
 
+  const plantsById = useMemo(() => new Map(plants.map((p) => [p.id, p])), [plants])

@@ -94,0 +136,4 @@
+  // armed for repeat-placement until Escape / Done).
+  function onPlace(e: ReactPointerEvent) {
+    e.stopPropagation()
+    if (!focusedObject || !armedPlant) return

@@ -107,2 +143,2 @@
-      { onSuccess: (o) => select(o.id) },
-    )
+    const local = worldToLocal(world, { x: focusedObject.xCm, y: focusedObject.yCm }, focusedObject.rotationDeg)
+    const x = Math.max(-focusedObject.widthCm / 2, Math.min(focusedObject.widthCm / 2, local.x))

@@ -0,0 +7,4 @@
+import { cmFromSpacing, spacingFromCm, spacingUnitLabel, type UnitPref } from '@/lib/units'
+import { PlantIcon } from '@/components/plants/PlantIcon'
+
+const MIN_RADIUS_CM = 1

@@ -0,0 +34,4 @@
+  const remove = useRemovePlanting(gardenId)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  const [radius, setRadius] = useState(String(spacingFromCm(plop.radiusCm, unit)))

@@ -0,0 +56,4 @@
+  const derived = plant ? computeDerivedCount(plop.radiusCm, plant.spacingCm) : plop.derivedCount
+
+  function commitRadius() {
+    const v = parseFloat(radius)

@@ -0,0 +62,4 @@
+    if (cm !== plop.radiusCm) patch({ radiusCm: cm })
+  }
+
+  function commitCount() {

@@ -0,0 +67,4 @@
+      if (plop.count != null) patch({ count: null }) // restore derived
+      return
+    }
+    const n = Number(count)

@@ -0,0 +139,4 @@
+        type="date"
+        value={planted}
+        onChange={(e) => setPlanted(e.target.value)}
+        onBlur={() => planted !== (plop.plantedAt ?? '') && planted !== '' && patch({ plantedAt: planted })}

@@ -0,0 +45,4 @@
+  selectedPlantingId: number | null
+  onSelectPlop: (id: number) => void
+}) {
+  const byObject = new Map<number, EditorPlanting[]>()

@@ -0,0 +61,4 @@
+        const dimmed = focusedObjectId != null && focusedObjectId !== o.id
+        const halfW = o.widthCm / 2
+        const halfH = o.heightCm / 2
+        const tint = far ? dominantColor(plops, plantsById) : null

@@ -0,0 +65,4 @@
+        return (
+          <g
+            key={o.id}
+            transform={`translate(${o.xCm} ${o.yCm}) rotate(${o.rotationDeg})`}

@@ -0,0 +81,4 @@
+                plant={plantsById.get(p.plantId)}
+                scale={scale}
+                selected={p.id === selectedPlantingId}
+                dimmed={false}

@@ -0,0 +24,4 @@
+  scale,
+  selected,
+  dimmed,
+  onSelect,

@@ -0,0 +85,4 @@
+          paintOrder="stroke"
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+        >
+          {plant!.name} · {effectiveCount(plop)}

@@ -0,0 +8,4 @@
+const HANDLE_PX = 12
+const MIN_RADIUS_CM = 1
+const MAX_RADIUS_CM = 10_000
+const SELECT_COLOR = '#2f7a3e'

@@ -0,0 +33,4 @@
+  const scale = useEditorStore((s) => s.viewport.scale)
+  const update = useUpdatePlanting(gardenId)
+
+  const cleanupRef = useRef<(() => void) | null>(null)

@@ -0,0 +42,4 @@
+    [],
+  )
+
+  const handleCm = HANDLE_PX / scale

@@ -0,0 +118,4 @@
+      e,
+      (ev) => {
+        const p = ptr(ev)
+        const r = Math.max(MIN_RADIUS_CM, Math.min(MAX_RADIUS_CM, Math.hypot(p.x - base.xCm, p.y - base.yCm)))

@@ -184,0 +220,4 @@
+  count?: number | null
+  label?: string | null
+  plantedAt?: string | null
+  removedAt?: string | null

@@ -184,0 +265,4 @@
+
+/** Soft-remove ("Remove"): PATCH removed_at to today; the row is kept but leaves
+ *  the active list. Distinct from a hard delete. */
+export function useRemovePlanting(gardenId: number) {

@@ -184,0 +278,4 @@
+      patchFullCache(qc, gardenId, (full) => ({ ...full, plantings: full.plantings.filter((p) => p.id !== id) }))
+      return { prev }
+    },
+    onError: (err, _vars, ctx) => {

@@ -190,0 +296,4 @@
+ *  for objects), so a fast follow-up edit doesn't self-conflict. derivedCount is
+ *  left as-is here; the editor recomputes it live from the plant's spacing and
+ *  onSuccess writes the authoritative value. */
+function applyPlantingPatch(p: ServerPlanting, patch: PlantingPatch): ServerPlanting {

@@ -38,2 +63,2 @@
-    return reset
-  }, [gid, select, setArmedKind, setLiveObject])
+    clear()
+    setFocusedObject(focus ?? null)