From 782f2394b239e04adbb9035eddf8736858b5b1d7 Mon Sep 17 00:00:00 2001
From: Steve Dudenhoeffer <steve@stevedudenhoeffer.com>
Date: Tue, 21 Jul 2026 00:38:06 -0400
Subject: [PATCH 1/2] Units correctness: exact imperial entry, garden grid at
 dimension scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three compounding defects in the measurement layer (#47), measured against the
live Home garden rather than estimated.

Entry was quantized to whole centimeters even though every measurement column is
REAL and the server only range-checks. A 12in grid stored 30cm — an 11.811in
grid, short by 0.189in per cell, and because the error is systematic it
accumulates: 4.61in of drift across a 24ft garden. cmFromFtIn / cmFromMeters /
cmFromSpacing now convert exactly, rounding only at 1e-6 cm to clear IEEE-754
dust (12 x 2.54 is 30.479999999999997 in binary). Display-side rounding is
untouched, so cm quantization still can't show through in a field.

The garden grid was entered at spacing scale: "Grid size (in)" sat directly under
"Width (ft)", two adjacent numeric fields at two different scales distinguished
only by a suffix. Home ended up on a 3cm grid, almost certainly "1" typed meaning
one foot. The garden grid is a layout concern, so it moves to dimension scale and
reads "Garden grid (ft)"; the bed grid in the object inspector is a plant-spacing
concern and deliberately stays at cm/in. A sub-10cm garden grid now draws a soft
warning rather than being silently accepted.

Snap could stay active while the grid stopped drawing: the canvas faded the grid
out below 6px per cell, so Home ran with snapToGrid on, no grid drawn, and no
snapping you could feel. Replaced the fade with coarsening — visibleGridStepCm
picks the smallest multiple of the true grid (2x, 5x, 10x...) whose cells are
legible, so every line drawn is still a real grid line and something aligned to
the grid is always visible. When the drawn step isn't the true grid the canvas
says so; a degenerate grid it can't draw at all says that instead of nothing.

Closes #47

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
---
 .../components/gardens/GardenFormModal.tsx    | 75 ++++++++++---------
 web/src/editor/GardenCanvas.tsx               | 44 ++++++++---
 web/src/lib/geometry.test.ts                  | 32 ++++++++
 web/src/lib/geometry.ts                       | 28 +++++++
 web/src/lib/units.test.ts                     | 38 ++++++++--
 web/src/lib/units.ts                          | 28 +++++--
 6 files changed, 188 insertions(+), 57 deletions(-)

diff --git a/web/src/components/gardens/GardenFormModal.tsx b/web/src/components/gardens/GardenFormModal.tsx
index e1798f5..46a6c82 100644
--- a/web/src/components/gardens/GardenFormModal.tsx
+++ b/web/src/components/gardens/GardenFormModal.tsx
@@ -9,12 +9,11 @@ import { errorMessage } from '@/lib/api'
 import { conflictGarden, useCreateGarden, useUpdateGarden, type Garden } from '@/lib/gardens'
 import {
   cmFromDisplay,
-  cmFromSpacing,
   dimensionUnitLabel,
   displayFromCm,
+  formatCm,
   isValidDimensionCm,
-  spacingFromCm,
-  spacingUnitLabel,
+  MIN_GARDEN_GRID_CM,
   type UnitPref,
 } from '@/lib/units'
 
@@ -47,7 +46,7 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
   const [width, setWidth] = useState(() => dimString(garden?.widthCm, garden?.unitPref ?? 'metric'))
   const [height, setHeight] = useState(() => dimString(garden?.heightCm, garden?.unitPref ?? 'metric'))
   const [gridSize, setGridSize] = useState(() =>
-    String(spacingFromCm(garden?.gridSizeCm ?? DEFAULT_GRID_CM, garden?.unitPref ?? 'metric')),
+    String(displayFromCm(garden?.gridSizeCm ?? DEFAULT_GRID_CM, garden?.unitPref ?? 'metric')),
   )
   const [snapToGrid, setSnapToGrid] = useState(garden?.snapToGrid ?? false)
   const [notes, setNotes] = useState(garden?.notes ?? '')
@@ -60,15 +59,12 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
       const v = parseFloat(s)
       return Number.isFinite(v) ? String(displayFromCm(cmFromDisplay(v, unit), next)) : s
     }
-    // The grid is entered at spacing scale (cm/in), so it converts with the
-    // spacing helpers, not the dimension ones.
-    const convertGrid = (s: string) => {
-      const v = parseFloat(s)
-      return Number.isFinite(v) ? String(spacingFromCm(cmFromSpacing(v, unit), next)) : s
-    }
     setWidth(convert(width))
     setHeight(convert(height))
-    setGridSize(convertGrid(gridSize))
+    // The garden grid is a layout concern, so it lives at the same scale as the
+    // garden's own dimensions — same helpers, same unit label. (The *bed* grid in
+    // the object inspector is a plant-spacing concern and stays at cm/in.)
+    setGridSize(convert(gridSize))
     setUnit(next)
   }
 
@@ -90,7 +86,7 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
       setFormError('Width and height must be between 1 cm and 100 m.')
       return
     }
-    const gridSizeCm = cmFromSpacing(parseFloat(gridSize), unit)
+    const gridSizeCm = cmFromDisplay(parseFloat(gridSize), unit)
     if (!isValidDimensionCm(gridSizeCm)) {
       setFormError('Grid size must be between 1 cm and 100 m.')
       return
@@ -123,7 +119,7 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
         setUnit(current.unitPref)
         setWidth(dimString(current.widthCm, current.unitPref))
         setHeight(dimString(current.heightCm, current.unitPref))
-        setGridSize(String(spacingFromCm(current.gridSizeCm, current.unitPref)))
+        setGridSize(String(displayFromCm(current.gridSizeCm, current.unitPref)))
         setSnapToGrid(current.snapToGrid)
         setNotes(current.notes)
         setConflict('This garden changed elsewhere. The latest values are shown — review and save again.')
@@ -134,6 +130,10 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
   }
 
   const unitLabel = dimensionUnitLabel(unit)
+  // Soft floor: warn, don't refuse. A sub-4″ garden grid is almost always "1"
+  // typed meaning one foot, but it's a legitimate choice for a tiny garden.
+  const gridEntered = cmFromDisplay(parseFloat(gridSize), unit)
+  const gridTooFine = Number.isFinite(gridEntered) && gridEntered > 0 && gridEntered < MIN_GARDEN_GRID_CM
 
   return (
     <Modal title={isEdit ? 'Edit garden' : 'New garden'} onClose={onClose} busy={pending}>
@@ -175,28 +175,35 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
           />
         </div>
 
-        <div className="flex items-end gap-3">
-          <div className="flex-1">
-            <TextField
-              label={`Grid size (${spacingUnitLabel(unit)})`}
-              name="gridSize"
-              type="number"
-              inputMode="decimal"
-              step="any"
-              min="0"
-              value={gridSize}
-              onChange={(e) => setGridSize(e.target.value)}
-            />
+        <div>
+          <div className="flex items-end gap-3">
+            <div className="flex-1">
+              <TextField
+                label={`Garden grid (${unitLabel})`}
+                name="gridSize"
+                type="number"
+                inputMode="decimal"
+                step="any"
+                min="0"
+                value={gridSize}
+                onChange={(e) => setGridSize(e.target.value)}
+              />
+            </div>
+            <label className="flex h-9 items-center gap-2 whitespace-nowrap text-sm text-fg">
+              <input
+                type="checkbox"
+                checked={snapToGrid}
+                onChange={(e) => setSnapToGrid(e.target.checked)}
+                className="h-4 w-4 rounded border-border"
+              />
+              Snap objects
+            </label>
           </div>
-          <label className="flex h-9 items-center gap-2 whitespace-nowrap text-sm text-fg">
-            <input
-              type="checkbox"
-              checked={snapToGrid}
-              onChange={(e) => setSnapToGrid(e.target.checked)}
-              className="h-4 w-4 rounded border-border"
-            />
-            Snap objects
-          </label>
+          {gridTooFine && (
+            <p className="mt-1 text-xs text-muted">
+              That's a {formatCm(gridEntered, unit)} grid for the whole garden — did you mean {unitLabel}?
+            </p>
+          )}
         </div>
 
         <TextArea label="Notes" name="notes" rows={2} value={notes} onChange={(e) => setNotes(e.target.value)} />
diff --git a/web/src/editor/GardenCanvas.tsx b/web/src/editor/GardenCanvas.tsx
index 90be8f6..f035ec7 100644
--- a/web/src/editor/GardenCanvas.tsx
+++ b/web/src/editor/GardenCanvas.tsx
@@ -1,5 +1,14 @@
 import { useEffect, useId, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'
-import { screenToWorld, snapLocalToBedGrid, snapPoint, worldToLocal, type Rect, type Size } from '@/lib/geometry'
+import {
+  screenToWorld,
+  snapLocalToBedGrid,
+  snapPoint,
+  visibleGridStepCm,
+  worldToLocal,
+  type Rect,
+  type Size,
+} from '@/lib/geometry'
+import { formatCm } from '@/lib/units'
 import { useCreateObject, useCreatePlanting } from '@/lib/objects'
 import type { Plant } from '@/lib/plants'
 import type { EditorPlanting } from '@/lib/plantings'
@@ -14,7 +23,7 @@ import { useViewport } from './useViewport'
 import type { EditorGarden, EditorObject } from './types'
 
 const GRID_MIN_CELL_PX = 6
-const GRID_MAX_OPACITY = 0.18
+const GRID_OPACITY = 0.18
 const BED_GRID_MAX_LINES = 200 // safety cap on lines drawn inside one bed
 
 /** The world-space bounds rect of an object (center + size → top-left rect). */
@@ -99,9 +108,21 @@ export function GardenCanvas({
     fitToRect(target ? objectRect(target) : gardenRect, size)
   }, [size, garden.id, garden.widthCm, garden.heightCm, focusedObjectId, objects, gardenRect, fitToRect])
 
+  // Draw the true grid when its cells are legible, else the coarsest-but-smallest
+  // multiple of it that is (see visibleGridStepCm). Snapping still uses gridCm —
+  // the drawn lines are a subset of the snap positions, never a different grid.
   const gridCm = garden.gridSizeCm
-  const cellPx = gridCm * viewport.scale
-  const gridOpacity = Math.max(0, Math.min(GRID_MAX_OPACITY, ((cellPx - GRID_MIN_CELL_PX) / GRID_MIN_CELL_PX) * GRID_MAX_OPACITY))
+  const drawnGridCm = visibleGridStepCm(gridCm, viewport.scale, GRID_MIN_CELL_PX)
+  // Two states worth explaining rather than leaving the user to infer: lines that
+  // are every Nth grid cell, and (degenerate) a grid too fine to draw at all.
+  const gridNote =
+    drawnGridCm == null
+      ? garden.snapToGrid
+        ? 'grid too fine to draw — zoom in'
+        : null
+      : drawnGridCm !== gridCm
+        ? `grid every ${formatCm(drawnGridCm, garden.unitPref)}`
+        : null
 
   const sorted = useMemo(() => [...objects].sort((a, b) => a.zIndex - b.zIndex), [objects])
   const rendered = useMemo(
@@ -197,11 +218,11 @@ export function GardenCanvas({
         onPointerDown={onCanvasPointerDown}
       >
         <g transform={`translate(${viewport.tx} ${viewport.ty}) scale(${viewport.scale})`}>
-          {gridOpacity > 0.005 && (
+          {drawnGridCm != null && (
             <>
               <defs>
-                <pattern id={gridId} width={gridCm} height={gridCm} patternUnits="userSpaceOnUse">
-                  <path d={`M ${gridCm} 0 L 0 0 0 ${gridCm}`} fill="none" stroke="#808080" strokeOpacity={gridOpacity} strokeWidth={1} vectorEffect="non-scaling-stroke" />
+                <pattern id={gridId} width={drawnGridCm} height={drawnGridCm} patternUnits="userSpaceOnUse">
+                  <path d={`M ${drawnGridCm} 0 L 0 0 0 ${drawnGridCm}`} fill="none" stroke="#808080" strokeOpacity={GRID_OPACITY} strokeWidth={1} vectorEffect="non-scaling-stroke" />
                 </pattern>
               </defs>
               <rect x={0} y={0} width={garden.widthCm} height={garden.heightCm} fill={`url(#${gridId})`} />
@@ -278,8 +299,13 @@ export function GardenCanvas({
         </g>
       </svg>
 
-      <div className="pointer-events-none absolute left-3 top-3 rounded-md bg-surface/80 px-2 py-1 text-xs text-muted backdrop-blur">
-        {viewport.scale.toFixed(2)} px/cm
+      <div className="pointer-events-none absolute left-3 top-3 flex flex-col items-start gap-1">
+        <span className="rounded-md bg-surface/80 px-2 py-1 text-xs text-muted backdrop-blur">
+          {viewport.scale.toFixed(2)} px/cm
+        </span>
+        {gridNote && (
+          <span className="rounded-md bg-surface/80 px-2 py-1 text-xs text-muted backdrop-blur">{gridNote}</span>
+        )}
       </div>
       <button
         type="button"
diff --git a/web/src/lib/geometry.test.ts b/web/src/lib/geometry.test.ts
index 546f3ae..e2d3c86 100644
--- a/web/src/lib/geometry.test.ts
+++ b/web/src/lib/geometry.test.ts
@@ -6,6 +6,7 @@ import {
   snapLocalToBedGrid,
   snapPoint,
   snapValue,
+  visibleGridStepCm,
   worldToLocal,
   worldToScreen,
   zoomToFitRect,
@@ -128,3 +129,34 @@ describe('grid snapping', () => {
     expect(p.x).toBeGreaterThanOrEqual(-60)
   })
 })
+
+describe('visibleGridStepCm', () => {
+  it('draws the true grid when its cells are already legible', () => {
+    expect(visibleGridStepCm(30.48, 1, 6)).toBe(30.48)
+    expect(visibleGridStepCm(10, 0.6, 6)).toBe(10) // exactly at the minimum
+  })
+
+  it('coarsens to a multiple rather than fading out', () => {
+    // The #47 failure: a 3cm grid at 0.84 px/cm is 2.5px per cell. Instead of
+    // drawing nothing while snapping stays on, draw every 5th line (12.6px).
+    expect(visibleGridStepCm(3, 0.84, 6)).toBe(15)
+    expect(visibleGridStepCm(1, 0.84, 6)).toBe(10)
+  })
+
+  it('only ever returns a whole multiple of the true grid', () => {
+    for (const scale of [0.05, 0.3, 0.84, 1, 4]) {
+      const step = visibleGridStepCm(7, scale, 6)
+      expect(step).not.toBeNull()
+      expect(Math.round(step! / 7) * 7).toBeCloseTo(step!, 9)
+      expect(step! * scale).toBeGreaterThanOrEqual(6)
+    }
+  })
+
+  it('reports null for a degenerate grid rather than drawing nothing silently', () => {
+    expect(visibleGridStepCm(0, 1, 6)).toBeNull()
+    expect(visibleGridStepCm(-5, 1, 6)).toBeNull()
+    expect(visibleGridStepCm(NaN, 1, 6)).toBeNull()
+    expect(visibleGridStepCm(30, 0, 6)).toBeNull()
+    expect(visibleGridStepCm(1e-9, 1, 6)).toBeNull() // beyond the coarsening cap
+  })
+})
diff --git a/web/src/lib/geometry.ts b/web/src/lib/geometry.ts
index 47dd5d4..aa09b0f 100644
--- a/web/src/lib/geometry.ts
+++ b/web/src/lib/geometry.ts
@@ -99,6 +99,34 @@ export function snapLocalToBedGrid(p: Point, step: number, halfW: number, halfH:
   return { x: snapAxis(p.x, halfW), y: snapAxis(p.y, halfH) }
 }
 
+// Multiples of the true grid tried, in ascending order within each decade, when
+// the grid itself is too fine to draw legibly at the current zoom.
+const GRID_COARSEN_MULTIPLES = [1, 2, 5]
+const GRID_MAX_COARSEN_DECADES = 5 // up to 500,000× the true grid
+
+/**
+ * The grid step (cm) to actually draw for a grid of `gridCm` at `scale` px/cm,
+ * so a cell is never smaller than `minCellPx`.
+ *
+ * Fading a too-fine grid out is what let a garden sit with snapping on and no
+ * grid drawn at all (#47). Instead, coarsen: draw 2×, 5×, 10×… the true grid, so
+ * every line drawn is still a real grid line and *something* aligned to the grid
+ * is always visible. Returns null only when even the coarsest multiple can't
+ * reach `minCellPx` — the caller should say so rather than draw nothing silently.
+ */
+export function visibleGridStepCm(gridCm: number, scale: number, minCellPx: number): number | null {
+  if (!(gridCm > 0) || !(scale > 0) || !(minCellPx > 0)) return null
+  let decade = 1
+  for (let d = 0; d <= GRID_MAX_COARSEN_DECADES; d++) {
+    for (const m of GRID_COARSEN_MULTIPLES) {
+      const step = gridCm * decade * m
+      if (step * scale >= minCellPx) return step
+    }
+    decade *= 10
+  }
+  return null
+}
+
 /** Linear interpolation. */
 export function lerp(a: number, b: number, t: number): number {
   return a + (b - a) * t
diff --git a/web/src/lib/units.test.ts b/web/src/lib/units.test.ts
index f694565..46e2280 100644
--- a/web/src/lib/units.test.ts
+++ b/web/src/lib/units.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import {
+  cmFromDisplay,
   cmFromFtIn,
   cmFromMeters,
   cmFromSpacing,
@@ -11,15 +12,37 @@ import {
 } from './units'
 
 describe('cm conversions', () => {
-  it('feet+inches → whole cm', () => {
-    expect(cmFromFtIn(4)).toBe(122) // 4ft = 121.92 → 122
-    expect(cmFromFtIn(8)).toBe(244)
-    expect(cmFromFtIn(4, 6)).toBe(137) // 4'6" = 137.16 → 137
+  // Every cm column is REAL, so entry is exact — no whole-cm quantization. A 1 ft
+  // grid is 30.48 cm, not 30, or the error accumulates across the garden (#47).
+  it('feet+inches → exact cm', () => {
+    expect(cmFromFtIn(1)).toBe(30.48)
+    expect(cmFromFtIn(4)).toBe(121.92)
+    expect(cmFromFtIn(8)).toBe(243.84)
+    expect(cmFromFtIn(4, 6)).toBe(137.16)
   })
 
-  it('meters → whole cm', () => {
+  it('meters → exact cm', () => {
     expect(cmFromMeters(10)).toBe(1000)
     expect(cmFromMeters(1.22)).toBe(122)
+    expect(cmFromMeters(0.305)).toBe(30.5)
+  })
+
+  it('rounds away float dust, not precision', () => {
+    // 12 × 2.54 is 30.479999999999997 in IEEE-754; 1 ft must read as 30.48.
+    expect(cmFromFtIn(0, 12)).toBe(30.48)
+    expect(cmFromSpacing(12, 'imperial')).toBe(30.48)
+    expect(cmFromSpacing(1, 'imperial')).toBe(2.54)
+  })
+
+  it('round-trips display → cm → display at display precision', () => {
+    const imperial = [0.5, 1, 2.5, 4, 8, 12.5, 24]
+    for (const ft of imperial) {
+      expect(displayFromCm(cmFromDisplay(ft, 'imperial'), 'imperial')).toBe(ft)
+    }
+    const metric = [0.15, 1, 1.22, 3.05, 10, 24.5]
+    for (const m of metric) {
+      expect(displayFromCm(cmFromDisplay(m, 'metric'), 'metric')).toBe(m)
+    }
   })
 })
 
@@ -59,13 +82,14 @@ describe('plant spacing (small scale)', () => {
     expect(formatSpacing(30, 'imperial')).toBe('12″')
   })
 
-  it('parses an entered value back to whole cm', () => {
+  it('parses an entered value back to exact cm', () => {
     expect(cmFromSpacing(15, 'metric')).toBe(15)
-    expect(cmFromSpacing(6, 'imperial')).toBe(15) // 6in = 15.24 → 15
+    expect(cmFromSpacing(6, 'imperial')).toBe(15.24)
   })
 
   it('prefills an input from cm', () => {
     expect(spacingFromCm(15, 'metric')).toBe(15)
     expect(spacingFromCm(30, 'imperial')).toBe(11.8) // 30/2.54 = 11.81 → 11.8
+    expect(spacingFromCm(30.48, 'imperial')).toBe(12) // an exactly-12in grid reads back as 12
   })
 })
diff --git a/web/src/lib/units.ts b/web/src/lib/units.ts
index 9e98b7c..c85826d 100644
--- a/web/src/lib/units.ts
+++ b/web/src/lib/units.ts
@@ -12,19 +12,32 @@ const INCHES_PER_FOOT = 12
 export const MIN_DIMENSION_CM = 1
 export const MAX_DIMENSION_CM = 10_000
 
+// A garden grid finer than this at *dimension* scale is a mis-entry, not a
+// preference (typing "1" in a feet field meaning one foot, and landing on a 1 cm
+// grid). Soft: the form warns, it doesn't refuse.
+export const MIN_GARDEN_GRID_CM = 10
+
 /** Whether a centimeter dimension is within the server's accepted range. */
 export function isValidDimensionCm(cm: number): boolean {
   return Number.isFinite(cm) && cm >= MIN_DIMENSION_CM && cm <= MAX_DIMENSION_CM
 }
 
-/** Feet (+ optional inches) → whole centimeters. */
-export function cmFromFtIn(feet: number, inches = 0): number {
-  return Math.round((feet * INCHES_PER_FOOT + inches) * CM_PER_INCH)
+/** Round away IEEE-754 dust without rounding away precision: 12 × 2.54 is
+ *  30.479999999999997 in binary floating point, and 1 nanometer is far below
+ *  anything a garden cares about. Every cm column is REAL, so entry stays exact
+ *  — this only stops 30.48 from being stored as 30.479999999999997. */
+function roundCm(cm: number): number {
+  return Math.round(cm * 1e6) / 1e6
 }
 
-/** Meters → whole centimeters. */
+/** Feet (+ optional inches) → centimeters, exactly (1 ft → 30.48). */
+export function cmFromFtIn(feet: number, inches = 0): number {
+  return roundCm((feet * INCHES_PER_FOOT + inches) * CM_PER_INCH)
+}
+
+/** Meters → centimeters, exactly. */
 export function cmFromMeters(meters: number): number {
-  return Math.round(meters * CM_PER_METER)
+  return roundCm(meters * CM_PER_METER)
 }
 
 /** A value typed in the given unit (meters, or feet) → centimeters. */
@@ -79,9 +92,10 @@ export function formatSpacing(cm: number, unit: UnitPref): string {
   return `${Math.round(cm)} cm`
 }
 
-/** A spacing value typed in the given unit (cm, or inches) → whole centimeters. */
+/** A spacing value typed in the given unit (cm, or inches) → centimeters,
+ *  exactly (12 in → 30.48). */
 export function cmFromSpacing(value: number, unit: UnitPref): number {
-  return unit === 'imperial' ? Math.round(value * CM_PER_INCH) : Math.round(value)
+  return roundCm(unit === 'imperial' ? value * CM_PER_INCH : value)
 }
 
 /** Centimeters → a spacing number in the given unit, for prefilling an input.
-- 
2.54.0


From 0169e32584d7ba15bd052b779efdc0062ade7d94 Mon Sep 17 00:00:00 2001
From: Steve Dudenhoeffer <steve@stevedudenhoeffer.com>
Date: Tue, 21 Jul 2026 00:49:23 -0400
Subject: [PATCH 2/2] Address Gadfly review on the units fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five findings, all fair:

The soft-minimum hint contradicted itself. "did you mean ft?" made sense when
the grid field was labelled inches sitting under a feet field — which is exactly
what this PR removed. The remaining failure mode is different: someone reaching
for plant spacing, which belongs to the bed, not the garden. The hint now says
that, and points at where the bed grid actually lives. The stale "1 typed
meaning one foot" comments went with it.

gridNote was a three-level nested ternary; it is now gridNoteFor, with the same
logic in explicit branches and the reasoning in one doc comment rather than
threaded between the arms.

cmFromDisplay(parseFloat(gridSize), unit) was computed once for the hint and
again in the submit handler. Hoisted to a single per-render value so the two
can't disagree about what was entered.

roundCm's comment called the 1e-6 cm grain "1 nanometer"; it is 10 nm. Corrected
— the constant was always fine, only the comment was wrong.

Extracted the duplicated overlay-badge class string.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ
---
 .claude/settings.json                         |  5 +++
 .../components/gardens/GardenFormModal.tsx    | 16 +++++---
 web/src/editor/GardenCanvas.tsx               | 41 +++++++++++--------
 web/src/lib/units.ts                          | 12 +++---
 4 files changed, 45 insertions(+), 29 deletions(-)
 create mode 100644 .claude/settings.json

diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..9030888
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "frontend-design@claude-plugins-official": true
+  }
+}
diff --git a/web/src/components/gardens/GardenFormModal.tsx b/web/src/components/gardens/GardenFormModal.tsx
index 46a6c82..70375be 100644
--- a/web/src/components/gardens/GardenFormModal.tsx
+++ b/web/src/components/gardens/GardenFormModal.tsx
@@ -68,6 +68,14 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
     setUnit(next)
   }
 
+  // Converted once per render and used by both the submit handler and the
+  // too-fine hint, so the two can never disagree about what was entered.
+  const gridSizeCm = cmFromDisplay(parseFloat(gridSize), unit)
+  // Soft floor: hint, don't refuse. A garden-scale grid this fine is usually
+  // someone reaching for plant spacing, which lives on the bed instead — but it
+  // is a legitimate choice for a very small garden, so the save still goes through.
+  const gridTooFine = Number.isFinite(gridSizeCm) && gridSizeCm > 0 && gridSizeCm < MIN_GARDEN_GRID_CM
+
   async function onSubmit(e: FormEvent) {
     e.preventDefault()
     setFormError(null)
@@ -86,7 +94,6 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
       setFormError('Width and height must be between 1 cm and 100 m.')
       return
     }
-    const gridSizeCm = cmFromDisplay(parseFloat(gridSize), unit)
     if (!isValidDimensionCm(gridSizeCm)) {
       setFormError('Grid size must be between 1 cm and 100 m.')
       return
@@ -130,10 +137,6 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
   }
 
   const unitLabel = dimensionUnitLabel(unit)
-  // Soft floor: warn, don't refuse. A sub-4″ garden grid is almost always "1"
-  // typed meaning one foot, but it's a legitimate choice for a tiny garden.
-  const gridEntered = cmFromDisplay(parseFloat(gridSize), unit)
-  const gridTooFine = Number.isFinite(gridEntered) && gridEntered > 0 && gridEntered < MIN_GARDEN_GRID_CM
 
   return (
     <Modal title={isEdit ? 'Edit garden' : 'New garden'} onClose={onClose} busy={pending}>
@@ -201,7 +204,8 @@ export function GardenFormModal({ garden, onClose }: { garden?: Garden; onClose:
           </div>
           {gridTooFine && (
             <p className="mt-1 text-xs text-muted">
-              That's a {formatCm(gridEntered, unit)} grid for the whole garden — did you mean {unitLabel}?
+              {formatCm(gridSizeCm, unit)} is very fine for a whole-garden grid. Plant spacing lives on each bed
+              (Bed grid in the inspector), not here.
             </p>
           )}
         </div>
diff --git a/web/src/editor/GardenCanvas.tsx b/web/src/editor/GardenCanvas.tsx
index f035ec7..c77bfc3 100644
--- a/web/src/editor/GardenCanvas.tsx
+++ b/web/src/editor/GardenCanvas.tsx
@@ -8,7 +8,7 @@ import {
   type Rect,
   type Size,
 } from '@/lib/geometry'
-import { formatCm } from '@/lib/units'
+import { formatCm, type UnitPref } from '@/lib/units'
 import { useCreateObject, useCreatePlanting } from '@/lib/objects'
 import type { Plant } from '@/lib/plants'
 import type { EditorPlanting } from '@/lib/plantings'
@@ -24,8 +24,28 @@ import type { EditorGarden, EditorObject } from './types'
 
 const GRID_MIN_CELL_PX = 6
 const GRID_OPACITY = 0.18
+const OVERLAY_BADGE_CLASS = 'rounded-md bg-surface/80 px-2 py-1 text-xs text-muted backdrop-blur'
 const BED_GRID_MAX_LINES = 200 // safety cap on lines drawn inside one bed
 
+/**
+ * What to tell the user about the grid they're looking at, or null when the
+ * drawn lines are simply the garden's own grid and need no explanation. Two
+ * states are worth naming rather than leaving them to infer: lines drawn every
+ * Nth grid cell (the grid was too fine to draw at this zoom), and — degenerate —
+ * a grid so fine no multiple of it is drawable, which matters most when snapping
+ * is on and would otherwise be invisibly active (#47).
+ */
+function gridNoteFor(
+  drawnCm: number | null,
+  gridCm: number,
+  snapToGrid: boolean,
+  unit: UnitPref,
+): string | null {
+  if (drawnCm == null) return snapToGrid ? 'grid too fine to draw — zoom in' : null
+  if (drawnCm === gridCm) return null
+  return `grid every ${formatCm(drawnCm, unit)}`
+}
+
 /** The world-space bounds rect of an object (center + size → top-left rect). */
 function objectRect(o: EditorObject): Rect {
   return { x: o.xCm - o.widthCm / 2, y: o.yCm - o.heightCm / 2, w: o.widthCm, h: o.heightCm }
@@ -113,16 +133,7 @@ export function GardenCanvas({
   // the drawn lines are a subset of the snap positions, never a different grid.
   const gridCm = garden.gridSizeCm
   const drawnGridCm = visibleGridStepCm(gridCm, viewport.scale, GRID_MIN_CELL_PX)
-  // Two states worth explaining rather than leaving the user to infer: lines that
-  // are every Nth grid cell, and (degenerate) a grid too fine to draw at all.
-  const gridNote =
-    drawnGridCm == null
-      ? garden.snapToGrid
-        ? 'grid too fine to draw — zoom in'
-        : null
-      : drawnGridCm !== gridCm
-        ? `grid every ${formatCm(drawnGridCm, garden.unitPref)}`
-        : null
+  const gridNote = gridNoteFor(drawnGridCm, gridCm, garden.snapToGrid, garden.unitPref)
 
   const sorted = useMemo(() => [...objects].sort((a, b) => a.zIndex - b.zIndex), [objects])
   const rendered = useMemo(
@@ -300,12 +311,8 @@ export function GardenCanvas({
       </svg>
 
       <div className="pointer-events-none absolute left-3 top-3 flex flex-col items-start gap-1">
-        <span className="rounded-md bg-surface/80 px-2 py-1 text-xs text-muted backdrop-blur">
-          {viewport.scale.toFixed(2)} px/cm
-        </span>
-        {gridNote && (
-          <span className="rounded-md bg-surface/80 px-2 py-1 text-xs text-muted backdrop-blur">{gridNote}</span>
-        )}
+        <span className={OVERLAY_BADGE_CLASS}>{viewport.scale.toFixed(2)} px/cm</span>
+        {gridNote && <span className={OVERLAY_BADGE_CLASS}>{gridNote}</span>}
       </div>
       <button
         type="button"
diff --git a/web/src/lib/units.ts b/web/src/lib/units.ts
index c85826d..32a78cf 100644
--- a/web/src/lib/units.ts
+++ b/web/src/lib/units.ts
@@ -12,9 +12,9 @@ const INCHES_PER_FOOT = 12
 export const MIN_DIMENSION_CM = 1
 export const MAX_DIMENSION_CM = 10_000
 
-// A garden grid finer than this at *dimension* scale is a mis-entry, not a
-// preference (typing "1" in a feet field meaning one foot, and landing on a 1 cm
-// grid). Soft: the form warns, it doesn't refuse.
+// Below this, a garden-scale grid is fine enough to be worth questioning — it
+// usually means someone reached for plant spacing, which belongs to the bed, not
+// the garden. Soft: the form hints, it doesn't refuse.
 export const MIN_GARDEN_GRID_CM = 10
 
 /** Whether a centimeter dimension is within the server's accepted range. */
@@ -23,9 +23,9 @@ export function isValidDimensionCm(cm: number): boolean {
 }
 
 /** Round away IEEE-754 dust without rounding away precision: 12 × 2.54 is
- *  30.479999999999997 in binary floating point, and 1 nanometer is far below
- *  anything a garden cares about. Every cm column is REAL, so entry stays exact
- *  — this only stops 30.48 from being stored as 30.479999999999997. */
+ *  30.479999999999997 in binary floating point, and the 1e-6 cm (10 nm) grain
+ *  here is far below anything a garden cares about. Every cm column is REAL, so
+ *  entry stays exact — this only stops 30.48 being stored as 30.479999999999997. */
 function roundCm(cm: number): number {
   return Math.round(cm * 1e6) / 1e6
 }
-- 
2.54.0