Plops editor: focus mode, place/move/resize, semantic zoom (#15)

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

web/src/editor/GardenCanvas.tsx

@@ -1,9 +1,14 @@
 import { useEffect, useId, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'
-import { screenToWorld, type Rect, type Size } from '@/lib/geometry'
-import { useCreateObject } from '@/lib/objects'
+import { screenToWorld, worldToLocal, type Rect, type Size } from '@/lib/geometry'
+import { useCreateObject, useCreatePlanting } from '@/lib/objects'
+import type { Plant } from '@/lib/plants'
+import type { EditorPlanting } from '@/lib/plantings'
 import { ObjectShape } from './ObjectShape'
+import { PlopLayer } from './PlopLayer'
+import { PlopOverlay } from './PlopOverlay'
 import { SelectionOverlay } from './SelectionOverlay'
 import { kindDef } from './kinds'
+import { DIMMED_OPACITY, objectTransform } from './shared'
 import { useEditorStore } from './store'
 import { useViewport } from './useViewport'
 import type { EditorGarden, EditorObject } from './types'
@@ -12,33 +17,48 @@ const GRID_CM = 100 // 1 m grid
 const GRID_MIN_CELL_PX = 6
 const GRID_MAX_OPACITY = 0.18
 
+/** The world-space bounds rect of an object (center + size → top-left rect). */
+function objectRect(o: EditorObject): Rect {
+  return { x: o.xCm - o.widthCm / 2, y: o.yCm - o.heightCm / 2, w: o.widthCm, h: o.heightCm }
+}
+
 /**
- * The editor canvas. Pan/zoom/pinch (from useViewport), tap-to-place from the
- * armed palette kind, click to select, and — for the selected object —
- * move/resize/rotate via SelectionOverlay. The object being dragged is rendered
- * from liveObject for instant feedback; the PATCH fires on release.
+ * The editor canvas. Pan/zoom/pinch, tap-to-place objects, select+move/resize/
+ * rotate an object, and — the #15 core — focus into a plantable object to place,
+ * move, resize and remove plops with semantic-zoom rendering. The object/plop
+ * being dragged renders from liveObject/livePlanting for instant feedback; the
+ * PATCH fires on release.
  */
 export function GardenCanvas({
   garden,
   objects,
-  focusId,
+  plantings,
+  plantsById,
 }: {
   garden: EditorGarden
   objects: EditorObject[]
-  focusId?: number
+  plantings: EditorPlanting[]
+  plantsById: Map<number, Plant>
 }) {
   const svgRef = useRef<SVGSVGElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const [size, setSize] = useState<Size>({ w: 0, h: 0 })
-  const fittedForRef = useRef<number | null>(null)
+  const fitKeyRef = useRef<string | null>(null)
   const gridId = 'garden-grid-' + useId().replace(/:/g, '')
 
   const viewport = useEditorStore((s) => s.viewport)
   const selectedId = useEditorStore((s) => s.selectedId)
   const select = useEditorStore((s) => s.select)
+  const selectedPlantingId = useEditorStore((s) => s.selectedPlantingId)
+  const selectPlanting = useEditorStore((s) => s.selectPlanting)
+  const focusedObjectId = useEditorStore((s) => s.focusedObjectId)
+  const setFocusedObject = useEditorStore((s) => s.setFocusedObject)
+  const armedPlant = useEditorStore((s) => s.armedPlant)
   const liveObject = useEditorStore((s) => s.liveObject)
+  const livePlanting = useEditorStore((s) => s.livePlanting)
   const { fitToRect } = useViewport(svgRef)
-  const create = useCreateObject(garden.id)
+  const createObject = useCreateObject(garden.id)
+  const createPlanting = useCreatePlanting(garden.id)
 
   const gardenRect: Rect = useMemo(
     () => ({ x: 0, y: 0, w: garden.widthCm, h: garden.heightCm }),
@@ -53,61 +73,83 @@ export function GardenCanvas({
     return () => ro.disconnect()
   }, [])
 
+  // Single fit mechanism: frame the focused object, else the whole garden, and
+  // animate whenever that target (or the garden) changes. The key guard stops a
+  // refit on unrelated re-renders (a plop add, a bed drag).
   useEffect(() => {
-    const usable = size.w > 0 && size.h > 0 && garden.widthCm > 0 && garden.heightCm > 0
-    if (usable && fittedForRef.current !== garden.id) {
-      fittedForRef.current = garden.id
-      // ?focus=<id> frames that object (groundwork for #15's focus mode);
-      // otherwise frame the whole garden.
-      const focus = focusId != null ? objects.find((o) => o.id === focusId) : undefined
-      const target: Rect = focus
-        ? { x: focus.xCm - focus.widthCm / 2, y: focus.yCm - focus.heightCm / 2, w: focus.widthCm, h: focus.heightCm }
-        : gardenRect
-      fitToRect(target, size)
-    }
-  }, [size, garden.id, garden.widthCm, garden.heightCm, gardenRect, fitToRect, focusId, objects])
+    if (size.w === 0 || size.h === 0 || garden.widthCm === 0 || garden.heightCm === 0) return
+    const key = `${garden.id}:${focusedObjectId}`
+    if (fitKeyRef.current === key) return
+    const target = focusedObjectId != null ? objects.find((o) => o.id === focusedObjectId) : undefined
+    if (focusedObjectId != null && !target) return // object not loaded yet; try again when it is
+    fitKeyRef.current = key
+    fitToRect(target ? objectRect(target) : gardenRect, size)
+  }, [size, garden.id, garden.widthCm, garden.heightCm, focusedObjectId, objects, gardenRect, fitToRect])
 
   const cellPx = GRID_CM * viewport.scale
   const gridOpacity = Math.max(0, Math.min(GRID_MAX_OPACITY, ((cellPx - GRID_MIN_CELL_PX) / GRID_MIN_CELL_PX) * GRID_MAX_OPACITY))
 
-  // Sort once by z-order; only re-sorts when the server objects change.
   const sorted = useMemo(() => [...objects].sort((a, b) => a.zIndex - b.zIndex), [objects])
-  // Merge the in-flight live geometry over the sorted list. A gesture never
-  // changes z, so this stays a cheap O(n) map on every pointermove — no re-sort.
   const rendered = useMemo(
     () => (liveObject ? sorted.map((o) => (o.id === liveObject.id ? liveObject : o)) : sorted),
     [sorted, liveObject],
   )
-  const selected = rendered.find((o) => o.id === selectedId) ?? null
+  // Merge the in-flight live plop over the active list, same as liveObject.
+  const renderedPlops = useMemo(
+    () => (livePlanting ? plantings.map((p) => (p.id === livePlanting.id ? livePlanting : p)) : plantings),
+    [plantings, livePlanting],
+  )
+  const selectedObject = rendered.find((o) => o.id === selectedId) ?? null
+  const selectedPlop = renderedPlops.find((p) => p.id === selectedPlantingId) ?? null
+  const selectedPlopObject = selectedPlop ? rendered.find((o) => o.id === selectedPlop.objectId) ?? null : null
+  const focusedObject = focusedObjectId != null ? rendered.find((o) => o.id === focusedObjectId) ?? null : null
 
-  // A pointerdown reaching the svg is empty space: place the armed kind there, or
-  // deselect. (Objects/handles stopPropagation.)
+  // A pointerdown reaching the svg is empty space: place the armed object kind,
+  // or exit focus mode, or just deselect.
   function onCanvasPointerDown(e: ReactPointerEvent) {
     const armed = useEditorStore.getState().armedKind
-    if (!armed) {
-      select(null)
+    if (armed) {
+      useEditorStore.getState().setArmedKind(null)
+      const def = kindDef(armed)
+      const rect = svgRef.current?.getBoundingClientRect()
+      if (!def || !rect) return
+      const world = screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top }, viewport)
+      createObject.mutate(
+        { kind: def.kind, shape: def.shape, xCm: world.x, yCm: world.y, widthCm: def.widthCm, heightCm: def.heightCm, zIndex: def.defaultZ },
+        { onSuccess: (o) => select(o.id) },
+      )
       return
     }
-    const def = kindDef(armed)
-    useEditorStore.getState().setArmedKind(null)
-    if (!def) return
+    // Empty-space tap while focused exits focus (and any placement); otherwise
+    // just clears the selection.
+    if (focusedObjectId != null) {
+      setFocusedObject(null)
+      useEditorStore.getState().setArmedPlant(null)
+    }
+    select(null)
+    selectPlanting(null)
+  }
+
+  // Drop a plop where the user taps inside the focused object (placement stays
+  // armed for repeat-placement until Escape / Done).
+  function onPlace(e: ReactPointerEvent) {
+    e.stopPropagation()
+    if (!focusedObject || !armedPlant || !focusedObject.plantable) return
     const rect = svgRef.current?.getBoundingClientRect()
     if (!rect) return
     const world = screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top }, viewport)
-    create.mutate(
-      {
-        kind: def.kind,
-        shape: def.shape,
-        xCm: world.x,
-        yCm: world.y,
-        widthCm: def.widthCm,
-        heightCm: def.heightCm,
-        zIndex: def.defaultZ,
-      },
-      { 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))
+    const y = Math.max(-focusedObject.heightCm / 2, Math.min(focusedObject.heightCm / 2, local.y))
+    const radiusCm = Math.max(1.5 * armedPlant.spacingCm, 15)
+    // Stay armed for repeat-placement; don't select (the placement sheet covers
+    // the object, so a selection would be hidden until placement ends anyway).
+    createPlanting.mutate({ objectId: focusedObject.id, plantId: armedPlant.id, xCm: x, yCm: y, radiusCm })
   }
 
+  const halfFW = focusedObject ? focusedObject.widthCm / 2 : 0
+  const halfFH = focusedObject ? focusedObject.heightCm / 2 : 0
+
   return (
     <div ref={containerRef} className="relative h-full w-full overflow-hidden rounded-xl border border-border bg-bg">
       <svg
@@ -131,10 +173,42 @@ export function GardenCanvas({
           <rect x={0} y={0} width={garden.widthCm} height={garden.heightCm} fill="none" stroke="#3f8f4f" strokeOpacity={0.7} strokeWidth={1.5} vectorEffect="non-scaling-stroke" />
 
           {rendered.map((o) => (
-            <ObjectShape key={o.id} object={o} selected={o.id === selectedId} onSelect={select} />
+            <g key={o.id} opacity={focusedObjectId != null && focusedObjectId !== o.id ? DIMMED_OPACITY : 1}>
+              <ObjectShape object={o} selected={o.id === selectedId} onSelect={select} />
+            </g>
           ))}
 
-          {selected && <SelectionOverlay object={selected} gardenId={garden.id} svgRef={svgRef} />}
+          <PlopLayer
+            objects={rendered}
+            plantings={renderedPlops}
+            plantsById={plantsById}
+            scale={viewport.scale}
+            focusedObjectId={focusedObjectId}
+            selectedPlantingId={selectedPlantingId}
+            onSelectPlop={selectPlanting}
+          />
+
+          {selectedObject && <SelectionOverlay object={selectedObject} gardenId={garden.id} svgRef={svgRef} />}
+          {selectedPlop && selectedPlopObject && (
+            <PlopOverlay plop={selectedPlop} object={selectedPlopObject} gardenId={garden.id} svgRef={svgRef} />
+          )}
+
+          {/* Placement capture: a transparent sheet over the focused object while a
+              plant is armed, so taps drop plops instead of selecting the object. */}
+          {focusedObject && armedPlant && focusedObject.plantable && (
+            <g transform={objectTransform(focusedObject)}>
+              <rect
+                x={-halfFW}
+                y={-halfFH}
+                width={halfFW * 2}
+                height={halfFH * 2}
+                fill="transparent"
+                pointerEvents="all"
+                style={{ cursor: 'crosshair' }}
+                onPointerDown={onPlace}
+              />
+            </g>
+          )}
         </g>
       </svg>
 

web/src/editor/Inspector.tsx

@@ -26,10 +26,12 @@ export function Inspector({
   object,
   gardenId,
   unit,
+  onFocus,
 }: {
   object: EditorObject
   gardenId: number
   unit: UnitPref
+  onFocus?: () => void
 }) {
   const update = useUpdateObject(gardenId)
   const del = useDeleteObject(gardenId)
@@ -94,6 +96,12 @@ export function Inspector({
         </button>
       </div>
 
+      {object.plantable && onFocus && (
+        <Button onClick={onFocus} className="w-full">
+          🌱 Plant here
+        </Button>
+      )}
+
       <TextField
         label="Name"
         name="name"

web/src/editor/ObjectShape.tsx

@@ -1,4 +1,5 @@
 import { memo, type PointerEvent } from 'react'
+import { objectTransform } from './shared'
 import type { EditorObject } from './types'
 
 const DEFAULT_FILL = '#8a8a8a'
@@ -60,11 +61,7 @@ export const ObjectShape = memo(function ObjectShape({
   const strokeWidth = selected ? 2 : 1
 
   return (
-    <g
-      transform={`translate(${object.xCm} ${object.yCm}) rotate(${object.rotationDeg})`}
-      onPointerDown={handleDown}
-      style={{ cursor: 'pointer' }}
-    >
+    <g transform={objectTransform(object)} onPointerDown={handleDown} style={{ cursor: 'pointer' }}>
       {object.shape === 'circle' ? (
         <ellipse
           cx={0}

web/src/editor/PlopInspector.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '@/components/ui/Button'
+import { TextField } from '@/components/ui/TextField'
+import { PlantIcon } from '@/components/plants/PlantIcon'
+import { useRemovePlanting, useUpdatePlanting } from '@/lib/objects'
+import type { Plant } from '@/lib/plants'
+import { computeDerivedCount, type EditorPlanting } from '@/lib/plantings'
+import { cmFromSpacing, spacingFromCm, spacingUnitLabel, type UnitPref } from '@/lib/units'
+import { MIN_RADIUS_CM } from './shared'
+import { useEditorStore } from './store'
+
+/**
+ * Property panel for the selected plop. Radius/label/date/count commit a PATCH on
+ * blur (carrying the version); the count field shows the live derived value as a
+ * placeholder and takes an override when typed. "Remove" soft-removes (keeps the
+ * row with removed_at); "Change plant" opens the picker via onChangePlant. While
+ * the plop is dragged/resized on the canvas, it reads livePlanting for live
+ * feedback (subscribed here, not at the page level, so a drag only re-renders
+ * this panel).
+ */
+export function PlopInspector({
+  plop,
+  plant,
+  gardenId,
+  unit,
+  onChangePlant,
+  onClose,
+}: {
+  plop: EditorPlanting
+  plant?: Plant
+  gardenId: number
+  unit: UnitPref
+  onChangePlant: () => void
+  onClose: () => void
+}) {
+  const update = useUpdatePlanting(gardenId)
+  const remove = useRemovePlanting(gardenId)
+  const livePlanting = useEditorStore((s) => s.livePlanting)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  // The plop with any in-flight drag/resize geometry applied.
+  const p = livePlanting && livePlanting.id === plop.id ? livePlanting : plop
+
+  const [radius, setRadius] = useState(String(spacingFromCm(p.radiusCm, unit)))
+  const [count, setCount] = useState(p.count != null ? String(p.count) : '')
+  const [label, setLabel] = useState(p.label ?? '')
+  const [planted, setPlanted] = useState(p.plantedAt ?? '')
+
+  // Re-sync when the plop changes underneath us (a drag/resize or a server row),
+  // unless the user is editing a field here.
+  useEffect(() => {
+    if (rootRef.current?.contains(document.activeElement)) return
+    setRadius(String(spacingFromCm(p.radiusCm, unit)))
+    setCount(p.count != null ? String(p.count) : '')
+    setLabel(p.label ?? '')
+    setPlanted(p.plantedAt ?? '')
+  }, [p.version, p.radiusCm, p.count, p.label, p.plantedAt, unit])
+
+  const patch = (fields: Omit<Parameters<typeof update.mutate>[0], 'id' | 'version'>) =>
+    update.mutate({ id: plop.id, version: plop.version, ...fields })
+
+  const u = spacingUnitLabel(unit)
+  const derived = plant ? computeDerivedCount(p.radiusCm, plant.spacingCm) : p.derivedCount
+
+  function commitRadius() {
+    const v = Number(radius)
+    if (radius.trim() === '' || !Number.isFinite(v)) {
+      setRadius(String(spacingFromCm(p.radiusCm, unit))) // reset stale/invalid text
+      return
+    }
+    const cm = Math.max(MIN_RADIUS_CM, cmFromSpacing(v, unit))
+    if (cm !== p.radiusCm) patch({ radiusCm: cm })
+  }
+
+  function commitCount() {
+    if (count.trim() === '') {
+      if (p.count != null) patch({ count: null }) // restore derived
+      return
+    }
+    const n = Number(count)
+    if (!Number.isInteger(n) || n < 1) {
+      setCount(p.count != null ? String(p.count) : '') // reject invalid, restore
+      return
+    }
+    if (n !== p.count) patch({ count: n })
+  }
+
+  function commitPlanted() {
+    const next = planted === '' ? null : planted
+    if (next !== (p.plantedAt ?? null)) patch({ plantedAt: next })
+  }
+
+  return (
+    <div ref={rootRef} className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-fg">Plant</h2>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded px-1.5 text-sm text-muted hover:text-fg"
+          aria-label="Close inspector"
+        >
+          ✕
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2 rounded-lg border border-border p-2">
+        {plant ? (
+          <PlantIcon color={plant.color} icon={plant.icon} className="h-9 w-9 rounded-md text-xl" />
+        ) : (
+          <span className="grid h-9 w-9 place-items-center rounded-md bg-border/50 text-muted">?</span>
+        )}
+        <span className="min-w-0 flex-1 truncate text-sm font-medium text-fg">{plant?.name ?? 'Unknown plant'}</span>
+        <Button variant="ghost" className="px-2 py-1 text-xs" onClick={onChangePlant}>
+          Change
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2">
+        <TextField
+          label={`Radius (${u})`}
+          name="radius"
+          type="number"
+          inputMode="decimal"
+          step="any"
+          min="0"
+          value={radius}
+          onChange={(e) => setRadius(e.target.value)}
+          onBlur={commitRadius}
+        />
+        <TextField
+          label="Count"
+          name="count"
+          type="number"
+          inputMode="numeric"
+          step="1"
+          min="1"
+          placeholder={`${derived} (auto)`}
+          value={count}
+          onChange={(e) => setCount(e.target.value)}
+          onBlur={commitCount}
+          hint={p.count != null ? 'Override — clear for auto' : 'Auto from area ÷ spacing²'}
+        />
+      </div>
+
+      <TextField
+        label="Label (optional)"
+        name="label"
+        value={label}
+        onChange={(e) => setLabel(e.target.value)}
+        onBlur={() => label !== (p.label ?? '') && patch({ label: label.trim() || null })}
+      />
+
+      <TextField
+        label="Planted"
+        name="planted"
+        type="date"
+        value={planted}
+        onChange={(e) => setPlanted(e.target.value)}
+        onBlur={commitPlanted}
+      />
+
+      <Button
+        variant="ghost"
+        className="text-red-600 dark:text-red-400"
+        disabled={remove.isPending}
+        onClick={() => {
+          onClose()
+          remove.mutate({ id: plop.id, version: plop.version })
+        }}
+      >
+        Remove plant
+      </Button>
+    </div>
+  )
+}

web/src/editor/PlopLayer.tsx

@@ -0,0 +1,93 @@
+import { memo, useMemo } from 'react'
+import type { Plant } from '@/lib/plants'
+import type { EditorPlanting } from '@/lib/plantings'
+import { PlopMarker, SEMANTIC_FAR } from './PlopMarker'
+import { DIMMED_OPACITY, objectTransform } from './shared'
+import type { EditorObject } from './types'
+
+/** The most common plant color among an object's plops (for the far-zoom tint). */
+function dominantColor(plops: EditorPlanting[], plantsById: Map<number, Plant>): string | null {
+  const freq = new Map<string, number>()
+  for (const p of plops) {
+    const c = plantsById.get(p.plantId)?.color
+    if (c) freq.set(c, (freq.get(c) ?? 0) + 1)
+  }
+  let best: string | null = null
+  let bestN = 0
+  for (const [c, n] of freq) {
+    if (n > bestN) {
+      best = c
+      bestN = n
+    }
+  }
+  return best
+}
+
+/**
+ * Renders every active plop, grouped under its parent object's translate+rotate
+ * transform so plops track the bed when it's moved/rotated. Far zoom adds a
+ * dominant-plant tint over each planted object so beds read at a glance. Focus
+ * mode dims plops on non-focused objects.
+ */
+export const PlopLayer = memo(function PlopLayer({
+  objects,
+  plantings,
+  plantsById,
+  scale,
+  focusedObjectId,
+  selectedPlantingId,
+  onSelectPlop,
+}: {
+  objects: EditorObject[]
+  plantings: EditorPlanting[]
+  plantsById: Map<number, Plant>
+  scale: number
+  focusedObjectId: number | null
+  selectedPlantingId: number | null
+  onSelectPlop: (id: number) => void
+}) {
+  // Group plops by object once per plops change (not on every pan/zoom frame).
+  const byObject = useMemo(() => {
+    const m = new Map<number, EditorPlanting[]>()
+    for (const p of plantings) {
+      const arr = m.get(p.objectId)
+      if (arr) arr.push(p)
+      else m.set(p.objectId, [p])
+    }
+    return m
+  }, [plantings])
+  const far = scale < SEMANTIC_FAR
+
+  return (
+    <>
+      {objects.map((o) => {
+        const plops = byObject.get(o.id)
+        if (!plops || plops.length === 0) return null
+        const dimmed = focusedObjectId != null && focusedObjectId !== o.id
+        const halfW = o.widthCm / 2
+        const halfH = o.heightCm / 2
+        const tint = far ? dominantColor(plops, plantsById) : null
+        return (
+          <g key={o.id} transform={objectTransform(o)} opacity={dimmed ? DIMMED_OPACITY : 1}>
+            {tint &&
+              (o.shape === 'circle' ? (
+                <ellipse cx={0} cy={0} rx={halfW} ry={halfH} fill={tint} fillOpacity={0.5} pointerEvents="none" />
+              ) : (
+                <rect x={-halfW} y={-halfH} width={halfW * 2} height={halfH * 2} fill={tint} fillOpacity={0.5} pointerEvents="none" />
+              ))}
+            {plops.map((p) => (
+              <PlopMarker
+                key={p.id}
+                plop={p}
+                plant={plantsById.get(p.plantId)}
+                scale={scale}
+                selected={p.id === selectedPlantingId}
+                onSelect={onSelectPlop}
+              />
+            ))}
+          </g>
+        )
+      })}
+    </>
+  )
+})

web/src/editor/PlopMarker.tsx

@@ -0,0 +1,88 @@
+import { memo, type PointerEvent } from 'react'
+import type { Plant } from '@/lib/plants'
+import { computeDerivedCount, type EditorPlanting } from '@/lib/plantings'
+import { SELECT_COLOR } from './shared'
+
+// Semantic-zoom thresholds in px/cm (DESIGN § Editor / rendering), tuned by feel:
+//   < FAR      — flat color patch, no text ("what's planted where" at a glance)
+//   FAR..NEAR  — colored circle + plant emoji
+//   ≥ NEAR     — circle + emoji + plant name + count
+export const SEMANTIC_FAR = 0.75
+export const SEMANTIC_NEAR = 3
+
+const DEFAULT_COLOR = '#6aa84f'
+
+/**
+ * One plop, rendered in its parent object's local frame (the caller wraps it in
+ * the object's translate+rotate group, so the plop tracks the bed). A circle in
+ * the plant's color; emoji and name/count fade in with zoom. The count is
+ * computed live from the current radius so it updates while resizing. memo'd so a
+ * pan/zoom that only changes the world transform doesn't re-render every plop.
+ */
+export const PlopMarker = memo(function PlopMarker({
+  plop,
+  plant,
+  scale,
+  selected,
+  onSelect,
+}: {
+  plop: EditorPlanting
+  plant?: Plant
+  scale: number
+  selected: boolean
+  onSelect: (id: number) => void
+}) {
+  const color = plant?.color ?? DEFAULT_COLOR
+  const r = Math.max(0, plop.radiusCm)
+  const showIcon = scale >= SEMANTIC_FAR && !!plant?.icon
+  const showText = scale >= SEMANTIC_NEAR && !!plant
+  const count = plop.count ?? (plant ? computeDerivedCount(plop.radiusCm, plant.spacingCm) : plop.derivedCount)
+
+  function down(e: PointerEvent) {
+    e.stopPropagation()
+    onSelect(plop.id)
+  }
+
+  return (
+    <g transform={`translate(${plop.xCm} ${plop.yCm})`} onPointerDown={down} style={{ cursor: 'pointer' }}>
+      <circle
+        cx={0}
+        cy={0}
+        r={r}
+        fill={color}
+        fillOpacity={0.82}
+        stroke={selected ? SELECT_COLOR : '#00000033'}
+        strokeWidth={selected ? 2.5 : 1}
+        vectorEffect="non-scaling-stroke"
+      />
+      {showIcon && (
+        <text
+          x={0}
+          y={0}
+          fontSize={r * 1.2}
+          textAnchor="middle"
+          dominantBaseline="central"
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+        >
+          {plant!.icon}
+        </text>
+      )}
+      {showText && (
+        <text
+          x={0}
+          y={r + r * 0.3}
+          fontSize={Math.max(r * 0.5, 6)}
+          textAnchor="middle"
+          dominantBaseline="hanging"
+          fill="#1f2937"
+          stroke="#ffffff"
+          strokeWidth={0.5}
+          paintOrder="stroke"
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+        >
+          {plant!.name} · {count}
+        </text>
+      )}
+    </g>
+  )
+})

web/src/editor/PlopOverlay.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react'
+import { screenToWorld, 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'
+import { useEditorStore } from './store'
+import type { EditorObject } from './types'
+
+const MAX_RADIUS_CM = 10_000
+
+/**
+ * Move/resize handles for the selected plop, rendered inside its parent object's
+ * translate+rotate group so the plop stays in the object's local frame. Drag the
+ * body to move (clamped to the object's bounds); drag the edge handle to resize
+ * the radius. Each gesture updates livePlanting for instant feedback and fires
+ * one PATCH on release — the same contract as SelectionOverlay (#11).
+ */
+export function PlopOverlay({
+  plop,
+  object,
+  gardenId,
+  svgRef,
+}: {
+  plop: EditorPlanting
+  object: EditorObject
+  gardenId: number
+  svgRef: RefObject<SVGSVGElement | null>
+}) {
+  const setLivePlanting = useEditorStore((s) => s.setLivePlanting)
+  const setObjectDragging = useEditorStore((s) => s.setObjectDragging)
+  const scale = useEditorStore((s) => s.viewport.scale)
+  const update = useUpdatePlanting(gardenId)
+
+  const cleanupRef = useRef<(() => void) | null>(null)
+  useEffect(
+    () => () => {
+      cleanupRef.current?.()
+      cleanupRef.current = null
+    },
+    [],
+  )
+
+  const handleCm = HANDLE_PX / scale
+  const halfW = object.widthCm / 2
+  const halfH = object.heightCm / 2
+  const center: Point = { x: object.xCm, y: object.yCm }
+  const rot = object.rotationDeg
+
+  // Pointer (client) → the object's local frame, snapshotting the svg rect once
+  // per gesture (the object doesn't move during a plop drag).
+  const makePointerLocal = () => {
+    const rect = svgRef.current?.getBoundingClientRect()
+    return (e: { clientX: number; clientY: number }): Point => {
+      const vp = useEditorStore.getState().viewport
+      const canvas = rect ? { x: e.clientX - rect.left, y: e.clientY - rect.top } : { x: e.clientX, y: e.clientY }
+      return worldToLocal(screenToWorld(canvas, vp), center, rot)
+    }
+  }
+
+  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,
+    fields: (final: EditorPlanting) => Parameters<typeof update.mutate>[0],
+  ) => {
+    e.stopPropagation()
+    e.preventDefault()
+    setObjectDragging(true)
+    const move = (ev: PointerEvent) => setLivePlanting(onMove(ev))
+    const detach = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', finish)
+      window.removeEventListener('pointercancel', finish)
+    }
+    const finish = () => {
+      detach()
+      cleanupRef.current = null
+      const final = useEditorStore.getState().livePlanting
+      setObjectDragging(false)
+      setLivePlanting(null)
+      if (final) update.mutate(fields(final))
+    }
+    cleanupRef.current = () => {
+      detach()
+      setObjectDragging(false)
+      setLivePlanting(null)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', finish)
+    window.addEventListener('pointercancel', finish)
+  }
+
+  const base = { ...plop }
+
+  const startMove = (e: ReactPointerEvent) => {
+    const ptr = makePointerLocal()
+    const start = ptr(e.nativeEvent)
+    begin(
+      e,
+      (ev) => {
+        const p = ptr(ev)
+        const next = clampLocal({ x: base.xCm + (p.x - start.x), y: base.yCm + (p.y - start.y) })
+        return { ...base, xCm: next.x, yCm: next.y }
+      },
+      (f) => ({ id: base.id, version: base.version, xCm: f.xCm, yCm: f.yCm }),
+    )
+  }
+
+  const startResize = (e: ReactPointerEvent) => {
+    const ptr = makePointerLocal()
+    begin(
+      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)))
+        return { ...base, radiusCm: r }
+      },
+      (f) => ({ id: base.id, version: base.version, radiusCm: f.radiusCm }),
+    )
+  }
+
+  const r = plop.radiusCm
+  return (
+    <g transform={objectTransform(object)}>
+      {/* Transparent body: drag to move (at least handle-sized so tiny plops stay grabbable). */}
+      <circle
+        cx={plop.xCm}
+        cy={plop.yCm}
+        r={Math.max(r, handleCm)}
+        fill="transparent"
+        pointerEvents="all"
+        style={{ cursor: 'move' }}
+        onPointerDown={startMove}
+      />
+      {/* Selection ring. */}
+      <circle
+        cx={plop.xCm}
+        cy={plop.yCm}
+        r={r}
+        fill="none"
+        stroke={SELECT_COLOR}
+        strokeWidth={1.5}
+        vectorEffect="non-scaling-stroke"
+        pointerEvents="none"
+      />
+      {/* Radius handle at the local +x edge. */}
+      <circle
+        cx={plop.xCm + r}
+        cy={plop.yCm}
+        r={handleCm * 0.6}
+        fill="#ffffff"
+        stroke={SELECT_COLOR}
+        strokeWidth={1}
+        vectorEffect="non-scaling-stroke"
+        style={{ cursor: 'ew-resize' }}
+        onPointerDown={startResize}
+      />
+    </g>
+  )
+}

web/src/editor/SelectionOverlay.tsx

@@ -1,14 +1,13 @@
 import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react'
 import { localToWorld, screenToWorld, worldToLocal, type Point } from '@/lib/geometry'
 import { useUpdateObject } from '@/lib/objects'
+import { HANDLE_PX, SELECT_COLOR, objectTransform } from './shared'
 import { useEditorStore } from './store'
 import type { EditorObject } from './types'
 
-const HANDLE_PX = 12 // on-screen size of the resize handles
 const ROTATE_OFFSET_PX = 28 // distance of the rotate knob above the object
 const MIN_OBJ_CM = 1 // smallest allowed dimension
 const ROTATE_SNAP_DEG = 15
-const SELECT_COLOR = '#2f7a3e'
 
 const corners: [number, number][] = [
   [-1, -1],
@@ -162,7 +161,7 @@ export function SelectionOverlay({
   }
 
   return (
-    <g transform={`translate(${object.xCm} ${object.yCm}) rotate(${object.rotationDeg})`}>
+    <g transform={objectTransform(object)}>
       {/* Transparent body: drag to move. */}
       {object.shape === 'circle' ? (
         <ellipse cx={0} cy={0} rx={halfW} ry={halfH} fill="transparent" pointerEvents="all" style={{ cursor: 'move' }} onPointerDown={startMove} />

web/src/editor/shared.ts

@@ -0,0 +1,14 @@
+// Shared editor UI constants + tiny helpers used across the object/plop markers
+// and overlays, so colors, handle sizes, and the object-local transform stay in
+// one place instead of drifting between files.
+
+export const SELECT_COLOR = '#2f7a3e' // selection stroke/handles
+export const HANDLE_PX = 12 // on-screen size of a drag/resize handle
+export const MIN_RADIUS_CM = 1 // smallest plop radius
+export const DIMMED_OPACITY = 0.4 // non-focused objects/plops in focus mode
+
+/** SVG transform placing content in an object's local frame: its center point
+ *  then its clockwise rotation. Plops and overlays render inside this. */
+export function objectTransform(o: { xCm: number; yCm: number; rotationDeg: number }): string {
+  return `translate(${o.xCm} ${o.yCm}) rotate(${o.rotationDeg})`
+}

web/src/editor/store.ts

@@ -1,5 +1,7 @@
 import { create } from 'zustand'
 import type { Viewport } from '@/lib/geometry'
+import type { Plant } from '@/lib/plants'
+import type { EditorPlanting } from '@/lib/plantings'
 import type { EditorObject } from './types'
 
 // Ephemeral editor state only (per DESIGN § State): the viewport, the current
@@ -13,17 +15,31 @@ interface EditorState {
   viewport: Viewport
   setViewport: (next: Viewport | ((prev: Viewport) => Viewport)) => void
 
+  // The selected object OR plop (mutually exclusive; selecting one clears the
+  // other). selectedId is a garden object; selectedPlantingId is a plop.
   selectedId: number | null
   select: (id: number | null) => void
 
+  selectedPlantingId: number | null
+  selectPlanting: (id: number | null) => void
+
   focusedObjectId: number | null
   setFocusedObject: (id: number | null) => void
 
+  // The plant armed for placing plops (set after the PlantPicker choice); stays
+  // armed for repeat-placement until cleared (Escape / done). null = not placing.
+  armedPlant: Plant | null
+  setArmedPlant: (p: Plant | null) => void
+
   // During a move/resize/rotate, the object's live geometry is held here so the
   // canvas renders it instantly; the PATCH fires only on gesture end.
   liveObject: EditorObject | null
   setLiveObject: (o: EditorObject | null) => void
 
+  // The same, for a plop being moved/resized.
+  livePlanting: EditorPlanting | null
+  setLivePlanting: (p: EditorPlanting | null) => void
+
   // The palette kind armed for tap-to-place (mobile-friendly; also set while
   // dragging a kind from the palette). null when nothing is armed.
   armedKind: string | null
@@ -40,14 +56,23 @@ export const useEditorStore = create<EditorState>((set) => ({
   setViewport: (next) => set((s) => ({ viewport: typeof next === 'function' ? next(s.viewport) : next })),
 
   selectedId: null,
-  select: (id) => set({ selectedId: id }),
+  select: (id) => set({ selectedId: id, selectedPlantingId: null }),
+
+  selectedPlantingId: null,
+  selectPlanting: (id) => set({ selectedPlantingId: id, selectedId: null }),
 
   focusedObjectId: null,
   setFocusedObject: (id) => set({ focusedObjectId: id }),
 
+  armedPlant: null,
+  setArmedPlant: (p) => set({ armedPlant: p }),
+
   liveObject: null,
   setLiveObject: (o) => set({ liveObject: o }),
 
+  livePlanting: null,
+  setLivePlanting: (p) => set({ livePlanting: p }),
+
   armedKind: null,
   setArmedKind: (kind) => set({ armedKind: kind }),