- web/src/lib/plants.ts: zod-validated Plant schema + react-query hooks
  (list/create/update/delete) over the #12 endpoints, with the category enum,
  labels, isBuiltin helper, and a 409 conflict extractor.
- /plants page: searchable, category-chip-filtered grid of PlantCard; built-ins
  badged and offer only Duplicate; own plants add Edit/Delete. A local
  metric/imperial spacing toggle (no per-user unit pref exists server-side).
- PlantFormModal: create/edit/duplicate a custom plant (name, category, spacing,
  color, emoji icon, days-to-maturity, notes), unit-aware spacing, 409 rebase.
- DeletePlantModal: confirm + surface the server's PLANT_IN_USE refusal inline.
- editor/PlantPicker.tsx: reusable search-first chooser with recently-used
  (localStorage) and category filter, bottom-sheet on mobile / panel on desktop,
  onSelect callback. Demoed via the /plants "Try the picker" button until #15
  consumes it.
- units.ts: small-scale spacing helpers (cm/inches) + tests.

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

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

@@ -0,0 +1,77 @@
+import { CATEGORY_LABELS, isBuiltin, type Plant } from '@/lib/plants'
+import { formatSpacing, type UnitPref } from '@/lib/units'
+
+const actionClass =

@@ -0,0 +29,4 @@
+  const builtin = isBuiltin(plant)
+  return (
+    <div className="flex flex-col rounded-xl border border-border bg-surface">
+      <div className="flex items-start gap-3 p-4">

@@ -0,0 +61,4 @@
+  const [color, setColor] = useState(expandHex(source?.color ?? DEFAULT_COLOR))
+  const [icon, setIcon] = useState(source?.icon ?? DEFAULT_ICON)
+  const [days, setDays] = useState(source?.daysToMaturity != null ? String(source.daysToMaturity) : '')
+  const [notes, setNotes] = useState(source?.notes ?? '')

@@ -0,0 +70,4 @@
+    e.preventDefault()
+    setFormError(null)
+    setConflict(null)
+

@@ -0,0 +86,4 @@
+    }
+    let daysToMaturity: number | null = null
+    if (days.trim()) {
+      const d = parseInt(days, 10)

@@ -0,0 +154,4 @@
+            type="number"
+            inputMode="decimal"
+            step="any"
+            min="0"

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

@@ -0,0 +44,4 @@
+  onSelect: (plant: Plant) => void
+  onClose: () => void
+  unit?: UnitPref
+}) {

@@ -0,0 +50,4 @@
+  const [category, setCategory] = useState<CategoryFilter>('all')
+  const [recent, setRecent] = useState<number[]>(() => loadRecent())
+  const searchRef = useRef<HTMLInputElement>(null)
+  const onCloseRef = useRef(onClose)

@@ -0,0 +60,4 @@
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [])

@@ -0,0 +83,4 @@
+    onSelect(p)
+  }
+
+  const row = (p: Plant) => (

@@ -0,0 +89,4 @@
+      type="button"
+      onClick={() => choose(p)}
+      className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left outline-none transition-colors hover:bg-border/50 focus-visible:bg-border/50"
+    >

@@ -0,0 +112,4 @@
+      type="button"
+      onClick={() => setCategory(value)}
+      className={cn(
+        'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors',

@@ -0,0 +156,4 @@
+          {PLANT_CATEGORIES.map((c) => chip(c, CATEGORY_LABELS[c]))}
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-2">

@@ -0,0 +99,4 @@
+ * If err is a 409 version conflict, return the fresh server row it carries
+ * (under `current`), so a form can rebase onto it; otherwise null.
+ */
+export function conflictPlant(err: unknown): Plant | null {

@@ -2,0 +11,4 @@
+import { CATEGORY_LABELS, PLANT_CATEGORIES, usePlants, type Plant, type PlantCategory } from '@/lib/plants'
+import type { UnitPref } from '@/lib/units'
+
+type CategoryFilter = PlantCategory | 'all'

@@ -2,0 +24,4 @@
+
+// There's no per-user unit preference server-side (only per-garden), so the
+// catalog page keeps its own, persisted locally.
+const UNIT_KEY = 'pansy:unit-pref'

@@ -5,0 +53,4 @@
+    })
+  }
+
+  const all = useMemo(() => plants.data ?? [], [plants.data])

@@ -5,0 +61,4 @@
+    )
+  }, [all, query, category])
+
+  const chip = (value: CategoryFilter, label: string) => (

@@ -5,0 +67,4 @@
+      type="button"
+      onClick={() => setCategory(value)}
+      className={cn(
+        'shrink-0 rounded-full px-3 py-1 text-sm font-medium transition-colors',