Address #125 review: memoized ink, one fallback color, reactive copy name

- monogramInk is memoized by color string; the canvas asks for every
  visible plop on every frame of a pan (Gadfly, 2/4 models).
- FALLBACK_PLANT_COLOR lives in lib/plants and is used by the canvas, the
  inspector and the garden thumbnail instead of three raw '#97a97c's.
- CopyDialog keeps its proposed "<base> — <year>" in step with the gardens
  list until the person edits the name, so a list that loads after the
  dialog opens can't leave a taken year in the field.
- GardenCard: reflowed the summary comment; no dead fallback on a plan
  name that's already known to parse.
- today() has one import path (lib/dates); the journal re-export is gone.
- CLAUDE.md says what the inspector actually does (a text-compare guard)
  rather than claiming it uses LengthField.

Co-Authored-By: Claude Fable 5 <[email protected]>

CLAUDE.md

@@ -134,7 +134,10 @@ Conventions that follow from it:
   a view, `cm` changes only when the person types. Never re-parse the display
   string on save — "29′ 6.3″" is the nearest tenth of an inch, and parsing it
   back is how a no-change Save turned 900 cm into 899.922 (and bumped the
-  version, and wrote a bogus history entry). The inspector guards the same way.
+  version, and wrote a bogus history entry). The inspector still keeps display
+  strings but gets the same result by refusing to commit text that still equals
+  the formatted original (`commitDim`); either way, a no-op save sends exactly
+  what was loaded — or nothing.
 - **"Today" is the browser's local day**, from `today()` in
   `web/src/lib/dates.ts`, and the UI always sends it: journal `observedAt`,
   plop/fill `plantedAt`, `removedAt`. The server's UTC default is only for

web/src/components/gardens/CopyDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, type FormEvent } from 'react'
+import { useEffect, useState, type FormEvent } from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import { Alert } from '@/components/ui/Alert'
 import { Button } from '@/components/ui/Button'
@@ -27,7 +27,13 @@ export function CopyDialog({ garden, onClose }: { garden: Garden; onClose: () =>
   const from = (parsePlanName(garden.name)?.year ?? new Date().getFullYear()) + 1
   const year = nextPlanYear(base, names, from)
   const [name, setName] = useState(() => planNameFor(base, year))
+  const [touched, setTouched] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  // The gardens list can still be loading when this opens; until the person
+  // edits the name, keep the proposal in step with what the list says is free.
+  useEffect(() => {
+    if (!touched) setName(planNameFor(base, year))
+  }, [base, year, touched])
   // The API allows duplicate names; say so rather than let two gardens read as
   // the same season's plan.
   const taken = names.some((n) => n.trim() === name.trim())
@@ -52,7 +58,17 @@ export function CopyDialog({ garden, onClose }: { garden: Garden; onClose: () =>
           A copy of <span className="font-semibold text-text">{garden.name}</span> to scheme in — rearrange freely, the
           original stays put. Beds and what's planted come along; shares and the public link don't.
         </p>
-        <TextField label="Name" name="name" required autoFocus value={name} onChange={(e) => setName(e.target.value)} />
+        <TextField
+          label="Name"
+          name="name"
+          required
+          autoFocus
+          value={name}
+          onChange={(e) => {
+            setTouched(true)
+            setName(e.target.value)
+          }}
+        />
         <p className="text-xs text-ink-mute">Keep the “— {year}” and it shows up as that season's plan in the editor.</p>
         {taken && <Alert tone="info">You already have a garden called “{name.trim()}” — pick another name so the two don't read as the same plan.</Alert>}
         {error && <Alert>{error}</Alert>}

web/src/components/gardens/GardenCard.tsx

@@ -15,10 +15,11 @@ import { GardenThumb } from './GardenThumb'
 const COUNTED_KINDS = ['bed', 'grow_bag', 'container', 'in_ground', 'tree', 'path', 'structure']
 
 /**
- * One garden as a card: the plot thumbnail (a link into the editor), name (a
+ * One garden as a card: the plot thumbnail (a link into the editor), name, size,
- * plan copy shows its base name and a `<year> plan` tag), size, a counts line, who it's shared with, and a footer
+ * a counts line, who it's shared with, and a footer of Open + share / copy /
- * of Open + share / copy / edit / delete. A garden shared WITH you shows its
+ * edit / delete. A plan copy shows its base name with a `<year> plan` tag. A
- * role and a leave action instead of the owner's tools.
+ * garden shared WITH you shows its role and a leave action instead of the
+ * owner's tools.
  */
 export function GardenCard({
   garden,
@@ -40,10 +41,11 @@ export function GardenCard({
   const owner = currentUserId != null && garden.ownerId === currentUserId
   const full = useGardenFull(garden.id)
   const shares = useQuery({ ...sharesQueryOptions(garden.id), enabled: owner })
+  const plan = parsePlanName(garden.name)
   const planYear = planYearOf(garden.name)
   // A plan's year is the point of its name, and the first thing truncation
   // would eat ("Back Yard — 20…"); show the base name and put the year on the tag.
-  const title = planYear != null ? (parsePlanName(garden.name)?.base ?? garden.name) : garden.name
+  const title = planYear != null && plan ? plan.base : garden.name
 
   const meta = useMemo(() => {
     const data = full.data

web/src/components/gardens/GardenThumb.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { localToWorld } from '@/lib/geometry'
 import type { FullGarden } from '@/lib/objects'
+import { FALLBACK_PLANT_COLOR } from '@/lib/plants'
 import { objectStyle, rectRadius } from '@/editor/kinds'
 
 /**
@@ -72,7 +73,7 @@ export function GardenThumb({
         const o = byId.get(p.objectId)
         if (!o) return null
         const w = localToWorld({ x: p.xCm, y: p.yCm }, { x: o.xCm, y: o.yCm }, o.rotationDeg)
-        return <circle key={p.id} cx={w.x} cy={w.y} r={p.radiusCm} fill={plantColor.get(p.plantId) ?? '#97a97c'} />
+        return <circle key={p.id} cx={w.x} cy={w.y} r={p.radiusCm} fill={plantColor.get(p.plantId) ?? FALLBACK_PLANT_COLOR} />
       })}
     </svg>
   )

web/src/editor/Canvas.tsx

@@ -12,7 +12,7 @@ import {
 import { clampScale, type Point } from '@/lib/geometry'
 import { monogramInk } from '@/lib/monogram'
 import { useCreateObject, useCreatePlanting, useUpdateObject, useUpdatePlanting } from '@/lib/objects'
-import type { Plant } from '@/lib/plants'
+import { FALLBACK_PLANT_COLOR, type Plant } from '@/lib/plants'
 import type { EditorPlanting } from '@/lib/plantings'
 import { formatSize } from '@/lib/units'
 import { kindDef, objectStyle, rectRadius } from './kinds'
@@ -35,10 +35,6 @@ import {
 import { useEditorStore, type Viewport } from './store'
 import type { EditorGarden, EditorObject } from './types'
 
-// A plop whose plant is missing from the catalog (a shared garden's private
-// plant) still needs a color to be drawn in.
-const FALLBACK_PLANT_COLOR = '#97a97c'
-
 const WHEEL_SENSITIVITY = 0.0016
 const ANIM_MS = 520
 const REFIT_THRESHOLD_PX = 60

web/src/editor/Inspector.tsx

@@ -8,7 +8,7 @@ import { Tag } from '@/components/ui/Tag'
 import { Toggle } from '@/components/ui/Toggle'
 import { cn } from '@/lib/cn'
 import { useDeleteObject, useRemovePlanting, useUpdateObject, useUpdatePlanting } from '@/lib/objects'
-import type { Plant } from '@/lib/plants'
+import { FALLBACK_PLANT_COLOR, type Plant } from '@/lib/plants'
 import type { EditorPlanting } from '@/lib/plantings'
 import {
   cmFromSpacing,
@@ -356,7 +356,7 @@ export function PlopInspector({
   return (
     <div ref={rootRef} className="flex flex-col gap-3">
       <div className="flex items-center gap-2.5">
-        <ColorDot color={plant?.color ?? '#97a97c'} size={18} />
+        <ColorDot color={plant?.color ?? FALLBACK_PLANT_COLOR} size={18} />
         <span className="min-w-0 truncate font-heading text-[17px]">{plant?.name ?? 'Unknown plant'}</span>
         {noteCount > 0 && (
           <button type="button" className="tag tag-accent-2 ml-auto cursor-pointer border-0" onClick={onNotes}>

web/src/editor/JournalTab.tsx

@@ -4,9 +4,9 @@ import { Button, IconButton } from '@/components/ui/Button'
 import { TextAreaField, TextField } from '@/components/ui/Field'
 import { errorMessage } from '@/lib/api'
 import { cn } from '@/lib/cn'
+import { today } from '@/lib/dates'
 import {
   formatObservedAt,
-  today,
   useCreateJournalEntry,
   useDeleteJournalEntry,
   useJournal,

web/src/lib/journal.ts

@@ -127,8 +127,6 @@ export function useDeleteJournalEntry(gardenId: number) {
   })
 }
 
-// "Today" for a note is the same local day everything else stamps (lib/dates.ts).
-export { today } from './dates'
 
 /** A date-only string as a short human label, without dragging the value
  *  through a Date (which would shift it by the timezone offset). */

web/src/lib/monogram.ts

@@ -87,8 +87,17 @@ function luminance(color: string): number | null {
   return 0.2126 * channel(0) + 0.7152 * channel(2) + 0.0722 * channel(4)
 }
 
+// Memoized by color string: the canvas asks for every visible plop on every
+// frame of a pan, and a catalog has a dozen distinct colors, not thousands.
+const inkByColor = new Map<string, string>()
+
 /** The CSS color the monogram letters take on a marker of `color`. */
 export function monogramInk(color: string): string {
+  let ink = inkByColor.get(color)
+  if (ink === undefined) {
     const l = luminance(color)
-  return l !== null && l > PAPER_MAX_LUMINANCE ? INK : PAPER
+    ink = l !== null && l > PAPER_MAX_LUMINANCE ? INK : PAPER
+    inkByColor.set(color, ink)
+  }
+  return ink
 }

web/src/lib/plants.ts

@@ -8,6 +8,10 @@ import { z } from 'zod'
 import { ApiError, api } from './api'
 
 export const PLANT_CATEGORIES = ['vegetable', 'herb', 'flower', 'fruit', 'tree_shrub', 'cover'] as const
+
+/** The marker color for a plop whose plant isn't in the catalog you can see (a
+ *  shared garden's private plant): the sage the curated swatches start with. */
+export const FALLBACK_PLANT_COLOR = '#97a97c'
 export type PlantCategory = (typeof PLANT_CATEGORIES)[number]
 
 export const CATEGORY_LABELS: Record<PlantCategory, string> = {