The /gardens page is now home base, backed by the #7 API.

- lib/units.ts: cm <-> meters/feet conversion + formatCm/formatDimensions
  (metric "m", imperial "ft/in"). Minimal for #8; #9's geometry lib
  consolidates.
- lib/gardens.ts: zod gardenSchema + useGardens/useCreateGarden/
  useUpdateGarden/useDeleteGarden (mutations invalidate the list) and
  conflictGarden() to pull the fresh row out of a 409.
- GardensPage: loading/empty/error states; empty state prompts a first
  garden; responsive card grid (single column on phones).
- GardenCard: name, dimensions formatted per the garden's unit, notes
  preview; body links into /gardens/:id, edit/delete kept out of the link.
- GardenFormModal: create/edit with a unit selector; dimensions are entered
  in the chosen unit and converted to cm (switching units converts the
  current values). A 409 rebases the form onto the server's fresh row.
- DeleteGardenModal: confirmation before removing.
- ui/: Modal (Escape/backdrop close), TextArea, Select.

Verified in a real browser against the embedded binary: create appears
without reload; edit persists (version 2), form prefilled from stored cm
converted back to the garden's unit; delete confirms then removes -> empty
state; an imperial 4 ft x 8 ft garden stores 122 x 244 cm and shows
"4' 0" x 8' 0"". tsc --noEmit clean.

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

@@ -0,0 +7,4 @@
+
+/** Confirmation dialog for deleting a garden (and everything in it). */
+export function DeleteGardenModal({ garden, onClose }: { garden: Garden; onClose: () => void }) {
+  const del = useDeleteGarden()

@@ -0,0 +30,4 @@
+        {error && <Alert>{error}</Alert>}
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="ghost" onClick={onClose} disabled={del.isPending}>
+            Cancel

@@ -0,0 +29,4 @@
+        {garden.notes && <p className="mt-2 line-clamp-2 text-sm text-muted">{garden.notes}</p>}
+      </Link>
+      <div className="flex justify-end gap-1 border-t border-border px-2 py-1.5">
+        <button

@@ -0,0 +36,4 @@
+        >
+          Edit
+        </button>
+        <button

@@ -0,0 +29,4 @@
+export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose: () => void }) {
+  const isEdit = !!garden
+  const create = useCreateGarden()
+  const update = useUpdateGarden(garden?.id ?? 0)

@@ -0,0 +41,4 @@
+  const [conflict, setConflict] = useState<string | null>(null)
+  const [formError, setFormError] = useState<string | null>(null)
+
+  function changeUnit(next: UnitPref) {

@@ -0,0 +56,4 @@
+    setFormError(null)
+    setConflict(null)
+
+    const w = parseFloat(width)

@@ -0,0 +63,4 @@
+      return
+    }
+
+    const input = {

@@ -0,0 +86,4 @@
+        setVersion(current.version)
+        setName(current.name)
+        setUnit(current.unitPref)
+        setWidth(String(displayFromCm(current.widthCm, current.unitPref)))

@@ -0,0 +14,4 @@
+  onClose: () => void
+  children: ReactNode
+}) {
+  const cardRef = useRef<HTMLDivElement>(null)

@@ -0,0 +28,4 @@
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-4 sm:items-center"
+      onMouseDown={(e) => {

@@ -0,0 +11,4 @@
+  { label, options, id, name, className, ...props },
+  ref,
+) {
+  const generatedId = useId()

@@ -0,0 +22,4 @@
+        ref={ref}
+        id={fieldId}
+        name={name}
+        className={cn(

@@ -0,0 +11,4 @@
+  { label, id, name, className, ...props },
+  ref,
+) {
+  const generatedId = useId()

@@ -0,0 +6,4 @@
+import { ApiError, api } from './api'
+import type { UnitPref } from './units'
+
+const unitPrefSchema: z.ZodType<UnitPref> = z.enum(['metric', 'imperial'])

@@ -0,0 +12,4 @@
+  id: z.number(),
+  ownerId: z.number(),
+  name: z.string(),
+  widthCm: z.number(),

@@ -0,0 +43,4 @@
+
+export function useCreateGarden() {
+  const qc = useQueryClient()
+  return useMutation({

@@ -0,0 +59,4 @@
+  return useMutation({
+    mutationFn: async (input: GardenUpdate): Promise<Garden> =>
+      gardenSchema.parse(await api.patch(`/gardens/${id}`, input)),
+    onSuccess: () => qc.invalidateQueries({ queryKey: gardensKey }),

@@ -0,0 +9,4 @@
+const INCHES_PER_FOOT = 12
+
+/** Feet (+ optional inches) → whole centimeters. */
+export function cmFromFtIn(feet: number, inches = 0): number {

@@ -0,0 +24,4 @@
+}
+
+/** Centimeters → a number in the given unit, for prefilling an input field. */
+export function displayFromCm(cm: number, unit: UnitPref): number {

@@ -5,0 +17,4 @@
+    <section>
+      <div className="flex items-center justify-between gap-4">
+        <h1 className="text-2xl font-semibold tracking-tight">Gardens</h1>
+        {gardens.data && gardens.data.length > 0 && (

@@ -5,0 +50,4 @@
+        )}
+      </div>
+
+      {dialog?.kind === 'create' && <GardenFormModal onClose={() => setDialog(null)} />}