feat(ui): keyboard-first bulk rows, optional day, notes per purchase

Implements docs/superpowers/specs/2026-09-02-fast-entry-refinements-design.md.
Three changes shipped together because they share one tab order.

Bulk rows are description -> amount -> note, and nothing else is a tab stop.
The list always ends in exactly one blank row, appended as soon as the last
row is filled, so Tab flows into a new line with no special case and new rows
appear on touch too. The Add-line button is gone; the per-row remove button is
now a hover/focus x with tabIndex={-1}, and Backspace in an empty description
removes the row and lands on the previous row's note.

Purchases no longer demand a day. `date` accepts "2026-09" as well as
"2026-09-14"; entry defaults to the month, with an opt-in "set exact date"
link. No migration: monthOf() already parsed both shapes, verified before
choosing this over splitting the field into month + optional day, which would
have meant a schema migration in the browser against the user's only copy of
their data for an identical outcome.

Notes are an optional field on Purchase, in both entry forms and shown beside
the description in the month lists. Empty notes are omitted rather than stored
as "", so absent stays absent.

Also closes a pre-existing gap the spec surfaced: the JSON importer never
validated purchase.date, so a malformed date passed import and threw later
inside the balance fold. It is now rejected at the boundary, with out-of-range
months and days covered.

A row holding only a note is deliberately NOT blank: it asks for the missing
description and amount rather than being silently discarded.

Keyboard behaviour - tab traversal, Backspace-to-remove, focus after append -
cannot be verified in this environment and needs confirming in a browser.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/ui/components/PurchaseDialog.tsx

@@ -122,16 +122,32 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
             <>
               <div className="grid grid-cols-3 gap-3">
                 <div className="space-y-1">
-                  <Label htmlFor="bulk-date">Date</Label>
+                  <Label htmlFor="bulk-date">
+                    {bulk.date.length > 7 ? "Date" : "Month"}
+                  </Label>
                   <Input
                     id="bulk-date"
-                    type="date"
+                    type={bulk.date.length > 7 ? "date" : "text"}
+                    readOnly={bulk.date.length <= 7}
+                    className={bulk.date.length > 7 ? undefined : "font-money"}
                     value={bulk.date}
                     onChange={(event) => {
                       const date = event.target.value;
                       setBulk((b) => ({ ...b, date }));
                     }}
                   />
+                  <button
+                    type="button"
+                    className="text-xs text-muted-foreground underline"
+                    onClick={() =>
+                      setBulk((b) => ({
+                        ...b,
+                        date: b.date.length > 7 ? b.date.slice(0, 7) : `${b.date}-01`,
+                      }))
+                    }
+                  >
+                    {bulk.date.length > 7 ? "use the month only" : "set exact date"}
+                  </button>
                 </div>
                 <div className="space-y-1">
                   <Label htmlFor="bulk-post">Post</Label>
@@ -184,13 +200,40 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
             <>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
-              <Label htmlFor="purchase-date">Date</Label>
-              <Input
-                id="purchase-date"
-                type="date"
-                value={draft.date}
-                onChange={(event) => setDraft({ ...draft, date: event.target.value })}
-              />
+              <Label htmlFor="purchase-date">
+                {draft.date.length > 7 ? "Date" : "Month"}
+              </Label>
+              {draft.date.length > 7 ? (
+                <>
+                  <Input
+                    id="purchase-date"
+                    type="date"
+                    value={draft.date}
+                    onChange={(event) => {
+                      const date = event.target.value;
+                      setDraft((d) => ({ ...d, date }));
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className="text-xs text-muted-foreground underline"
+                    onClick={() => setDraft((d) => ({ ...d, date: d.date.slice(0, 7) }))}
+                  >
+                    use the month only
+                  </button>
+                </>
+              ) : (
+                <>
+                  <Input id="purchase-date" value={draft.date} readOnly className="font-money" />
+                  <button
+                    type="button"
+                    className="text-xs text-muted-foreground underline"
+                    onClick={() => setDraft((d) => ({ ...d, date: `${d.date}-01` }))}
+                  >
+                    set exact date
+                  </button>
+                </>
+              )}
             </div>
             <div className="space-y-1">
               <Label htmlFor="purchase-description">Description</Label>
@@ -234,6 +277,19 @@ export function PurchaseDialog({ monthId, purchase, trigger }: Props) {
             </div>
           </div>
 
+          <div className="space-y-1">
+            <Label htmlFor="purchase-note">Note (optional)</Label>
+            <Input
+              id="purchase-note"
+              placeholder="Anything worth remembering about this one"
+              value={draft.note}
+              onChange={(event) => {
+                const note = event.target.value;
+                setDraft((d) => ({ ...d, note }));
+              }}
+            />
+          </div>
+
           <SplitEditor draft={draft} posts={activePosts} onChange={setDraft} />
 
           <PlanEditor draft={draft} onChange={setDraft} />