The editor's technically-riskiest slice, built against mock data so #11
only adds interactions on top.

- lib/geometry.ts (+ vitest): world<->screen and object-local<->world
  transforms, clampScale, zoomViewportAt (the wheel/pinch "keep the point
  under the cursor stationary" math), zoomToFitRect. 11 geometry tests
  (round-trips, rotation, cursor-anchored zoom, fit) + 6 units tests.
- editor/store.ts: Zustand store for ephemeral editor state — viewport,
  selection, focusedObjectId (selection interactions grow in #11).
- editor/useViewport.ts: @use-gesture wiring — wheel + pinch zoom toward
  the pointer, drag-pan, scale clamped to [0.05, 20] px/cm, and an animated
  fitToRect (eased rAF tween). touch-action:none so the browser doesn't
  fight gestures.
- editor/ObjectShape.tsx: rect/circle centered + rotated, kind default
  colors, name label; non-scaling strokes so outlines stay 1px at any zoom.
- editor/GardenCanvas.tsx: full-size svg, single world <g>, fading 1m grid,
  garden boundary, z-ordered objects; ResizeObserver-driven auto-fit, a
  zoom readout, and a Fit control. Deps: zustand, @use-gesture/react,
  vitest (+ test scripts).
- GardenEditorPage renders the canvas with a mock scene (#11 swaps in
  /full).

Verified in a real browser: wheel zoom keeps the world point under the
cursor stationary (sub-cm drift on a 12m garden), a real drag pans, and
Fit animates to frame the garden. tsc + vitest green.

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

@@ -0,0 +10,4 @@
+
+/**
+ * The editor canvas: a full-size SVG with a single world <g> that pan/zoom/pinch
+ * transforms. Renders a fading 1 m grid, the garden boundary, and its objects.

@@ -0,0 +18,4 @@
+  const svgRef = useRef<SVGSVGElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState<Size>({ w: 0, h: 0 })
+  const fittedRef = useRef(false)

@@ -0,0 +43,4 @@
+
+  // Frame the garden the first time we know the canvas size.
+  useEffect(() => {
+    if (!fittedRef.current && size.w > 0 && size.h > 0) {

@@ -0,0 +66,4 @@
+          {showGrid && (
+            <>
+              <defs>
+                <pattern id="garden-grid" width={GRID_CM} height={GRID_CM} patternUnits="userSpaceOnUse">

@@ -0,0 +108,4 @@
+        <button
+          type="button"
+          onClick={() => size.w > 0 && fitToRect(gardenRect, size)}
+          className="rounded-md border border-border bg-surface/90 px-3 py-1.5 text-sm font-medium text-fg shadow-sm outline-none backdrop-blur transition-colors hover:bg-border/50 focus-visible:ring-2 focus-visible:ring-accent/40"

@@ -0,0 +3,4 @@
+
+// Default fills by kind (overridable per object via object.color). Muted, earthy
+// tones so plops (added in #15) read clearly on top.
+const kindColors: Record<string, string> = {

@@ -0,0 +24,4 @@
+ * vector-effect=non-scaling-stroke to stay a constant pixel width at any zoom.
+ * Full move/resize/rotate interactions come in #11.
+ */
+export function ObjectShape({

@@ -0,0 +34,4 @@
+  onSelect: (id: number) => void
+}) {
+  const fill = fillFor(object)
+  const halfW = object.widthCm / 2

@@ -0,0 +57,4 @@
+          r={halfW}
+          fill={fill}
+          fillOpacity={0.85}
+          stroke={selected ? '#2f7a3e' : '#00000033'}

@@ -0,0 +67,4 @@
+          y={-halfH}
+          width={object.widthCm}
+          height={object.heightCm}
+          rx={Math.min(halfW, halfH) * 0.06}

@@ -0,0 +15,4 @@
+  selectedId: number | null
+  select: (id: number | null) => void
+
+  focusedObjectId: number | null

@@ -0,0 +21,4 @@
+
+export const useEditorStore = create<EditorState>((set) => ({
+  viewport: { tx: 0, ty: 0, scale: 1 },
+  setViewport: (next) =>

@@ -0,0 +15,4 @@
+  rotationDeg: number
+  zIndex: number
+  color?: string | null
+  plantable: boolean

@@ -0,0 +24,4 @@
+  name: string
+  widthCm: number
+  heightCm: number
+  unitPref: 'metric' | 'imperial'

@@ -0,0 +7,4 @@
+const FIT_PADDING = 32 // px margin around a fitted rect
+const FIT_DURATION_MS = 350
+
+const easeInOutCubic = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2)

@@ -0,0 +17,4 @@
+ * [MIN_SCALE, MAX_SCALE]. The svg must set touch-action:none so the browser
+ * doesn't hijack the gestures.
+ */
+export function useViewport(svgRef: RefObject<SVGSVGElement | null>) {

@@ -0,0 +28,4 @@
+    }
+  }, [])
+
+  const toLocal = useCallback(

@@ -0,0 +50,4 @@
+      onWheel: ({ event, delta: [, dy] }) => {
+        event.preventDefault()
+        const p = toLocal(event.clientX, event.clientY)
+        setViewport((vp) => zoomViewportAt(vp, p, vp.scale * Math.exp(-dy * WHEEL_SENSITIVITY), MIN_SCALE, MAX_SCALE))

@@ -0,0 +71,4 @@
+  )
+
+  const fitToRect = useCallback(
+    (rect: Rect, viewport: Size) => {

@@ -0,0 +33,4 @@
+}
+
+export function screenToWorld(p: Point, vp: Viewport): Point {
+  return { x: (p.x - vp.tx) / vp.scale, y: (p.y - vp.ty) / vp.scale }

@@ -0,0 +94,4 @@
+ * with `padding` px of margin on every side. Scale is clamped to [minScale,
+ * maxScale] so a tiny/huge rect still lands in a sane zoom.
+ */
+export function zoomToFitRect(

@@ -0,0 +101,4 @@
+  minScale: number,
+  maxScale: number,
+): Viewport {
+  const availW = Math.max(1, viewport.w - padding * 2)