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

@@ -0,0 +29,4 @@
+  error: (m: string) => useToastStore.getState().push(m, 'error'),
+}
+
+function ToastItem({ toast }: { toast: Toast }) {

@@ -11,2 +12,4 @@
+const GRID_MIN_CELL_PX = 6
 const GRID_MAX_OPACITY = 0.18
 
+// Kinds that render beneath beds by default; explicit z_index still wins.

@@ -54,0 +68,4 @@
+      // ?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

@@ -60,2 +80,3 @@
 
-  const ordered = useMemo(() => [...objects].sort((a, b) => a.zIndex - b.zIndex), [objects])
+  // Merge the in-flight live geometry over the server objects, then z-order.
+  const rendered = useMemo(() => {

@@ -83,3 +129,1 @@
-                    strokeWidth={1}
-                    vectorEffect="non-scaling-stroke"
-                  />
+                  <path d={`M ${GRID_CM} 0 L 0 0 0 ${GRID_CM}`} fill="none" stroke="#808080" strokeOpacity={gridOpacity} strokeWidth={1} vectorEffect="non-scaling-stroke" />

@@ -114,3 +148,2 @@
       </div>
-      <Button
-        variant="ghost"
+      <button

@@ -0,0 +28,4 @@
+  const select = useEditorStore((s) => s.select)
+
+  // Local field state (initialized once; committed on blur/change).
+  const [name, setName] = useState(object.name)

@@ -0,0 +41,4 @@
+  // When the object changes underneath us (e.g. a canvas move/resize/rotate, or
+  // an optimistic PATCH result), re-sync the fields — unless the user is
+  // actively editing one here, so we don't clobber their typing.
+  useEffect(() => {

@@ -0,0 +52,4 @@
+    setRotation(String(Math.round(object.rotationDeg)))
+  }, [object.version, object.widthCm, object.heightCm, object.xCm, object.yCm, object.rotationDeg, object.name, object.notes, unit])
+
+  const patch = (fields: Partial<Omit<EditorObject, 'id' | 'version'>>) =>

@@ -0,0 +59,4 @@
+    const v = parseFloat(raw)
+    if (!Number.isFinite(v)) return
+    const cm = cmFromDisplay(v, unit)
+    if (cm !== current) apply(cm)

@@ -0,0 +86,4 @@
+        onBlur={() => name !== object.name && patch({ name })}
+      />
+
+      <div className="grid grid-cols-2 gap-2">

@@ -0,0 +148,4 @@
+          <label htmlFor="obj-color" className="text-sm font-medium text-fg">
+            Color
+          </label>
+          <input

@@ -0,0 +167,4 @@
+        <input
+          type="checkbox"
+          checked={object.plantable}
+          onChange={(e) => patch({ plantable: e.target.checked })}

@@ -0,0 +188,4 @@
+            variant="danger"
+            className="flex-1"
+            disabled={del.isPending}
+            onClick={() => {

@@ -0,0 +16,4 @@
+  [1, 1],
+  [-1, 1],
+]
+

@@ -0,0 +54,4 @@
+
+  const halfW = object.widthCm / 2
+  const halfH = object.heightCm / 2
+  const handleCm = HANDLE_PX / scale

@@ -0,0 +85,4 @@
+    )
+  }
+
+  const base = { ...object }

@@ -0,0 +105,4 @@
+      e,
+      (world) => {
+        const p = worldToLocal(world, center0, base.rotationDeg)
+        const newW = Math.max(MIN_OBJ_CM, Math.abs(p.x - oppositeLocal.x))

@@ -0,0 +119,4 @@
+    )
+  }
+
+  const startRotate = (e: ReactPointerEvent) => {

@@ -0,0 +125,4 @@
+      (world) => {
+        // +90° because the knob points up (local -y) at rotation 0.
+        let deg = (Math.atan2(world.y - center0.y, world.x - center0.x) * 180) / Math.PI + 90
+        if (!e.shiftKey) deg = Math.round(deg / ROTATE_SNAP_DEG) * ROTATE_SNAP_DEG

@@ -0,0 +135,4 @@
+
+  return (
+    <g transform={`translate(${object.xCm} ${object.yCm}) rotate(${object.rotationDeg})`}>
+      {/* Transparent body: drag to move. */}

@@ -0,0 +127,4 @@
+      serverObjectSchema.parse(await api.patch(`/objects/${id}`, body)),
+    // Apply the change to the cache up front so the object doesn't snap back
+    // while the request is in flight. Snapshot for rollback.
+    onMutate: async (patch) => {

@@ -0,0 +156,4 @@
+        toast.error(objectErrorMessage(err, 'Could not save that change.'))
+      }
+    },
+    onSettled: () => qc.invalidateQueries({ queryKey: fullKey(gardenId) }),

@@ -0,0 +185,4 @@
+}
+
+/** Apply a patch onto a cached server object for the optimistic pass. */
+function applyServerPatch(o: ServerObject, patch: ObjectPatch): ServerObject {

@@ -18,0 +48,4 @@
+    heightCm: g.heightCm,
+    unitPref: g.unitPref,
+  }
+  const objects = full.data.objects.map(toEditorObject)