Add field editor: palette, select/move/resize/rotate, inspector, sync (#11)

Turns the canvas foundation into the real editor, loading a garden from the
server and editing it with optimistic sync. Completes Phase 3.

- lib/objects.ts: react-query over GET /gardens/:id/full + optimistic
  create/update/delete. Update applies to the cache up front and PATCHes
  with the row version; a 409 adopts the server's `current` row and toasts
  "updated elsewhere". One PATCH per gesture.
- editor/store.ts: adds liveObject (in-gesture geometry, rendered instantly),
  armedKind (palette tap-to-place), and objectDragging (so the pan gesture
  stands down while an object drag owns the pointer).
- editor/Palette.tsx + kinds.ts: the seven kinds with icons + default sizes;
  tap a kind, tap the canvas to place (works desktop + touch).
- editor/SelectionOverlay.tsx: move (drag body), resize (corner handles,
  opposite corner fixed via the object-local frame so rotation is honored),
  rotate (knob, snaps to 15°, free with Shift). Each updates liveObject and
  fires one PATCH on release.
- editor/Inspector.tsx: name, dimensions/position (unit-aware), rotation,
  color override (+ clear), plantable, notes, two-step delete. Commits per
  field; re-syncs from the object unless a field is focused.
- GardenCanvas: placement, live-drag merge, z-ordered render, selection
  overlay, and ?focus=<id> frames an object on load. GardenEditorPage loads
  /full and lays out palette | canvas | inspector (bottom sheet on mobile).
- components/ui/toast.tsx + Toaster in AppShell.

Verified in a real browser against the embedded binary: place a bed → move,
resize, rotate (rotate snapped to 60°) → set its name in the inspector →
reload, all persisted; each gesture was exactly one PATCH (version 1→2→3→4→5);
an out-of-band edit made the next drag 409 → rollback to the server's value +
toast. tsc + 17 vitest tests green.

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

web/src/editor/Palette.tsx

@@ -0,0 +1,49 @@
+import { cn } from '@/lib/cn'
+import { OBJECT_KINDS, kindDef } from './kinds'
+import { useEditorStore } from './store'
+
+/**
+ * The object-kind palette. Tap a kind to arm it, then tap the canvas to place
+ * (works on desktop and touch). Tapping the armed kind again disarms it.
+ */
+export function Palette() {
+  const armedKind = useEditorStore((s) => s.armedKind)
+  const setArmedKind = useEditorStore((s) => s.setArmedKind)
+  const select = useEditorStore((s) => s.select)
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap gap-1.5 md:flex-col">
+        {OBJECT_KINDS.map((k) => {
+          const active = armedKind === k.kind
+          return (
+            <button
+              key={k.kind}
+              type="button"
+              onClick={() => {
+                select(null)
+                setArmedKind(active ? null : k.kind)
+              }}
+              className={cn(
+                'flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm font-medium outline-none transition-colors',
+                'focus-visible:ring-2 focus-visible:ring-accent/40',
+                active
+                  ? 'border-accent bg-accent/10 text-accent-strong'
+                  : 'border-border bg-surface text-fg hover:bg-border/50',
+              )}
+              aria-pressed={active}
+            >
+              <span aria-hidden className="text-base leading-none">
+                {k.icon}
+              </span>
+              <span>{k.label}</span>
+            </button>
+          )
+        })}
+      </div>
+      {armedKind && (
+        <p className="text-xs text-muted">Tap the canvas to place a {kindDef(armedKind)?.label ?? 'object'}.</p>
+      )}
+    </div>
+  )
+}