From f28c1a0e830739749582d1ba5ae09dd9c69b489b Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 17:31:25 -0400
Subject: [PATCH 01/28] docs: add v0.9.0-beta implementation plan

Canonical scope, phasing, and decision record for the v0.9 UI revamp.
Covers 10 implementation phases, 10 locked design decisions, success
criteria checklist, glossary of new/retired components, and open issue
tracking (#59, #60, PR #45).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/v0.9-plan.md | 660 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 660 insertions(+)
 create mode 100644 docs/v0.9-plan.md

diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
new file mode 100644
index 0000000..459f1a1
--- /dev/null
+++ b/docs/v0.9-plan.md
@@ -0,0 +1,660 @@
+# v0.9.0-beta — Implementation Plan
+
+**Status:** In design / Pre-implementation  
+**Target tag:** `v0.9.0-beta`  
+**Planned milestone:** Following v0.8.2-alpha (shipped 2026-05-01)  
+**Document date:** 2026-05-03  
+**Author:** Bea + Claude Code, session 2026-05-03
+
+## Design Handoff References
+
+| Pass | Folder | Covers |
+|---|---|---|
+| v0.9 (first pass) | `design_handoff_v0.9_curator/` | Design language, palette, type scale, all screens incl. CategoryTab sectioning |
+| v0.9.1 (second pass) | `design_handoff_v0.9.1_curator/` | TownManager drawer, GlobalSearchDropdown, Sea Creatures nav integration, `chip-sea` token |
+| v0.9.2 (third pass, most current) | `design_handoff_v0.9.2_curator/` | ProgressMeter 5-segment responsive, scroll-to + highlight, Settings page |
+
+**Read the handoffs in order.** Where a topic is covered by multiple passes, the later pass takes precedence. Treat the v0.9 README as the canonical base spec for anything not overridden by v0.9.1 or v0.9.2.
+
+> **Codename note:** The design exercise is codenamed "Curator" internally — this appears in folder names and prototype files. "Curator" is **not** a rename of the app. No user-facing copy should say "Curator."
+
+---
+
+## 1. Goals
+
+### User-facing
+
+- Replace the horizontal tab bar + header bar with a persistent left sidebar that shows the active town, per-category donation counts, and nav links. Users always know where they are and how complete each category is.
+- Surface seasonal urgency on the Home tab (leaving-soon shelf, new-this-month shelf, hero stat) so players don't miss catches.
+- Unify town switching, creating, and editing into a single right-side TownManager drawer — no more disjointed modal + dropdown combo.
+- Replace the flat A–Z item list with a sectioned view: Leaving this month → Available now → Out of season → Already donated. Players see what matters first.
+- Make the app fast and clear on mobile (≥390px) with a single breakpoint at 980px.
+- Provide a Settings page with app info and data reset actions.
+
+### Architectural
+
+- Retire `MuseumHeader`, `TabBar`, `TownSwitcher`, `CreateTownModal`, `EditTownModal` — replace with `Sidebar` and `TownManager`.
+- Retire `GlobalSearchBar`, `GlobalSearchResults`, `SearchHistoryPopover` — replace with `GlobalSearchDropdown`.
+- Retire `CategoryProgress` component — progress display moves into the sidebar nav counts and ProgressMeter.
+- Introduce Meadow design tokens as CSS custom properties in `index.css`; retire Varela Round; adopt Fraunces + Inter.
+- Deprecate `playerName` field from the `Town` type.
+- Add a `Settings` route (`/settings`) inside the main column.
+- Add `highlightId` app-level state for scroll-to + expand behavior.
+
+### Version bump rationale
+
+v0.9 shifts the version suffix from `-alpha` to `-beta`. Alpha denoted pre-feature-complete internal builds. Beta denotes feature-complete, publicly accessible builds undergoing broader testing. v0.9.0-beta is the first release with the full redesigned UI — it warrants the milestone bump.
+
+---
+
+## 2. In-Scope Summary
+
+- Meadow design tokens + font swap (Fraunces + Inter replacing Varela Round)
+- Sidebar shell layout (280px fixed left, 980px breakpoint collapses above main)
+- Settings page (About + Danger zone only — see locked decision #3)
+- TownManager drawer (replaces three existing components — see locked decision #1)
+- CollectibleRow + ItemExpandPanel restyle (glyph tile, meta line, sectioning, pills, pulse animation)
+- HomeTab rebuild (hero + month strip + shelves + ProgressMeter)
+- CategoryTab sectioning (4 groups: Leaving / Available / Out of season / Already donated)
+- GlobalSearchDropdown (5 groups for ACNL/ACNH, keyboard nav, search history in localStorage)
+- StatsTab rebuild (4-up or 5-up cards gated by game, updated chart)
+- Mobile responsive verification pass (single 980px breakpoint, touch targets ≥44px)
+- Scroll-to + highlight wiring across Home shelves and GlobalSearchDropdown
+- Sea creatures in ProgressMeter (5th segment, ACNL/ACNH only)
+- Sea creatures in StatsTab (5th card, ACNL/ACNH only — see locked decision #4)
+- Open issues #59, #60, PR #45 housekeeping
+
+---
+
+## 3. Out of Scope for v0.9.0-beta
+
+| Item | Reason |
+|---|---|
+| First-run onboarding flow | Design not yet started; separate parallel workstream |
+| PWA service worker / offline support | Bea explicitly deferred — v0.9 ships manifest + icons + add-to-home only ("PWA-lite") |
+| ACGCN custom Procreate icons | Bea is painting them on her own timeline; monogram glyphs are the v0.9 fallback per the design |
+| Themes beyond Meadow (Parchment, Midnight, Sakura) | Locked decision #2 — see below |
+| Styled confirm dialog in danger zone | v1.0 polish item; native `confirm()` is acceptable for v0.9 |
+| Migration UX for changing a town's game | Game is immutable post-creation (locked decision #1); no migration UI needed |
+| Shadow size display surface (issue #59) | Data + type exist; roll in if cheap during ItemExpandPanel restyle, otherwise carry to v0.9.x |
+| Component renames beyond what's listed | No broader rename pass; only the specific retirements listed in the Glossary |
+
+---
+
+## 4. Locked Design Decisions
+
+These decisions were made explicitly in conversation with Bea on 2026-05-03 and are binding for v0.9.0-beta. Future sessions must not reverse these without a new explicit conversation.
+
+### Decision 1 — Game is immutable post-creation
+
+**Rule:** The TownManager edit form must NOT include a game `<select>`. Only `name` and (for ACNH only) `hemisphere` are editable fields.
+
+**Why:** Changing a town's game would orphan all existing donation data — the 3-level store schema (`donated[townId][gameId][itemId]`) scopes donations under the original `gameId`. A game change would leave ghost data under the old `gameId` with no migration UX. Building migration UX is out of scope for v0.9.
+
+**Implementation note:** The v0.9.2 design (`design_handoff_v0.9.2_curator/addons.jsx` `TownRow` editing state, line 104) still includes the game `<select>`:
+```jsx
+<label className="ac-tm-field">
+  <span className="ac-tm-field-label">Game</span>
+  <select className="ac-tm-input" value={gameId} onChange={e=>setGameId(e.target.value)}>
+    {GAMES.map(g => <option key={g.id} value={g.id}>{g.label}</option>)}
+  </select>
+</label>
+```
+**Drop this field entirely.** Display game as a read-only badge (same as the view state: `<span className="ac-tm-badge">{game?.short}</span>`). Do not carry `gameId` in the `onSave` patch object.
+
+---
+
+### Decision 2 — Ship Meadow theme only
+
+**Rule:** Parchment, Midnight, and Sakura themes are dropped for v0.9. Meadow is the only theme.
+
+**Why:** Bea's words: *"parchment looks a little poorly baked and it is more work to maintain. We can add themes later on."*
+
+**Implications:**
+- No `[data-theme="..."]` attribute branching in CSS or JS
+- No theme selector in Settings (the Appearance section is omitted entirely — see Decision 3)
+- No Zustand persistence for `theme`
+- Varela Round is fully retired — Fraunces + Inter become the sole type stack
+- The v0.9.2 design's Settings → Appearance section (swatch cards) is not built for v0.9
+
+Themes may return in a future v0.9.x or v1.x when there are real alternatives to choose from.
+
+---
+
+### Decision 3 — Settings page = About + Danger zone only
+
+**Rule:** The Settings page ships with two sections: About and Danger zone. The Appearance section (theme switcher) is not built.
+
+**Why:** With only one theme (Meadow), there is no choice to present. An Appearance section with a single card would feel hollow and could mislead users into expecting more options.
+
+**Sections in order:**
+1. **About** — version, source link, live storage summary (town count + total donations), credits/disclaimer
+2. **Danger zone** — "Reset donations for active town" (ghost button, `confirm()`) + "Reset everything" (solid red, `confirm()`)
+
+Appearance returns when there are multiple themes to offer (v0.9.x or v1.x).
+
+---
+
+### Decision 4 — Sea creatures in StatsTab as a 5th card
+
+**Rule:** StatsTab shows 4 category cards for ACGCN/ACWW/ACCF, and 5 category cards (adding sea) for ACNL/ACNH. Gating is identical to home shelves, sidebar nav, and ProgressMeter.
+
+**Why:** Sea is already a first-class category in sidebar nav, ProgressMeter, global search, and home shelves. Excluding it from Stats would be an inconsistency — players would see sea progress everywhere except the Stats view. The v0.9.2 spec doesn't explicitly include this; implementation extends it for consistency.
+
+---
+
+### Decision 5 — `playerName` deprecated from Town type
+
+**Rule:** Remove `playerName` from the `Town` interface in `src/lib/types.ts`. Do not display it or collect it in any form.
+
+**Why:** Bea's words: *"really not important tbh."* It was never surfaced in the v0.9 design. Re-addable later if a user need surfaces.
+
+**Migration:** Zustand's `persist` middleware will simply ignore the field on existing stored data — no migration step required. Any existing `playerName` values in localStorage will be silently dropped on next write.
+
+---
+
+### Decision 6 — Hemisphere exposed only for ACNH
+
+**Rule:** In TownManager (both the create form and the edit form), the hemisphere toggle is only shown when `gameId === "acnh"`.
+
+**Why:** The ACNL sea creature and fish/bug data we shipped is NH-only — no SH month variant exists in our published JSON. Exposing a hemisphere toggle for ACNL would produce incorrect month availability display. This matches the guard condition in the v0.9.2 design.
+
+---
+
+### Decision 7 — Native `confirm()` for danger zone
+
+**Rule:** Both danger zone actions use native browser `confirm()` dialogs for v0.9.
+
+**Why:** A styled confirmation dialog is a v1.0 polish item. The v0.9.2 spec explicitly calls this out: *"Both actions in the demo go through `confirm()` placeholders; production should wire a proper styled confirm dialog (out of scope for this design pass)."*
+
+---
+
+### Decision 8 — Search includes `basedOn` field for art
+
+**Rule:** Art search matches against both `name` and `basedOn` (the real-world painting name). Searching "Leonardo" must surface Famous Painting.
+
+**Why:** This is the current behavior and is explicitly confirmed in the v0.9.2 README: *"`basedOn` matching confirmed in the existing search filter (`it.basedOn.toLowerCase().includes(q)`) — 'Leonardo' surfaces Famous Painting. No change needed."*
+
+Do not break this during GlobalSearchDropdown replacement.
+
+---
+
+### Decision 9 — Sea creatures in GlobalSearchDropdown
+
+**Rule:** For ACNL/ACNH towns, GlobalSearchDropdown shows a 5th result group for sea creatures. Empty groups are hidden, same as other categories. Row treatment matches fish/bugs/fossils.
+
+**Why:** Sea is a first-class category. Excluding it from search while it appears in nav, ProgressMeter, and HomeTab shelves would be a confusing inconsistency. Explicitly confirmed in the v0.9.2 README.
+
+---
+
+### Decision 10 — Scroll-to + highlight behavior
+
+**Rule:** When a Home shelf card or GlobalSearchDropdown result is clicked, the target row is:
+1. Scrolled into view (`scrollIntoView({ behavior: 'smooth', block: 'center' })`)
+2. Auto-expanded (inline detail panel opens)
+3. Highlighted with a 1.4s `accent-soft` background pulse
+
+Behavior is identical on mobile. No separate codepath for small screens.
+
+**CSS (verbatim from v0.9.2 README):**
+```css
+.ac-row-pulse > .ac-row-main { animation: ac-row-pulse 1.4s ease-out; }
+@keyframes ac-row-pulse {
+  0%   { background: var(--accent-soft); }
+  60%  { background: color-mix(in oklch, var(--accent) 16%, transparent); }
+  100% { background: var(--surface-alt); }
+}
+```
+
+**Wiring (verbatim from v0.9.2 README):**
+> `App` owns `highlightId` state. Setters: `jumpTo(cat, id)` (Home cards) and `onJump` in `GlobalSearchDropdown` both `setTab(cat) + setHighlightId(id)`. `CategoryTab` receives `highlightId` + `onHighlightConsumed`. On change, it sets `expanded = highlightId`, waits a frame for the row to render, then queries `[data-row-id="…"]`, scrolls + adds `.ac-row-pulse`, and clears the parent state via `onHighlightConsumed` so re-clicking the same item triggers the effect again. `ItemRow` stamps `data-row-id={item.id}` on its outer div.
+
+---
+
+## 5. Visual Direction
+
+### Palette — Meadow (only theme for v0.9)
+
+All values must be defined as CSS custom properties in `src/index.css` `@theme` block and mirrored in `src/lib/colors.ts`.
+
+| Token | Value | Usage |
+|---|---|---|
+| `--bg` | `#F4EFE3` | Page background |
+| `--surface` | `#FFFDF7` | Card backgrounds |
+| `--surface-alt` | `#F8F2E2` | Hover, expand panel, secondary surfaces |
+| `--ink` | `#23241F` | Primary text |
+| `--ink-soft` | `#5C5848` | Secondary text |
+| `--ink-muted` | `#8A8470` | Tertiary text, eyebrows |
+| `--border` | `#E2D9C3` | Subtle borders, dividers |
+| `--border-strong` | `#CFC4A8` | Hover borders, separator dots, strikethrough |
+| `--accent` | `oklch(0.55 0.09 150)` | Primary moss green — buttons, progress bars |
+| `--accent-soft` | `oklch(0.55 0.09 150 / 0.12)` | Nav active bg, accent pill bg, current-month bg |
+| `--accent-ink` | `oklch(0.32 0.06 150)` | Accent text on light bg |
+| `--warn` | `oklch(0.62 0.12 50)` | Clay — leaving-soon |
+| `--warn-soft` | `oklch(0.62 0.12 50 / 0.14)` | Warn pill bg |
+| `--chip-fish` | `oklch(0.62 0.08 230)` | Fish category tint |
+| `--chip-bugs` | `oklch(0.6 0.1 130)` | Bugs category tint |
+| `--chip-fossils` | `oklch(0.55 0.06 60)` | Fossils category tint |
+| `--chip-art` | `oklch(0.58 0.08 320)` | Art category tint |
+| `--chip-sea` | `oklch(0.58 0.09 200)` | Sea creatures category tint (v0.9.1) |
+
+Category chip colors are **identity tokens** — per v0.9.1 README: *"Category chip colors are identity tokens — they should remain consistent across all themes. Only `accent`, `bg`, `surface`, and `ink` shift between themes."*
+
+### Typography
+
+- **Display:** `'Fraunces', Georgia, serif` — 9..144 opsz axis. Weights 400/500/600. Italic 400/500 for accents.
+- **UI:** `'Inter', system-ui, sans-serif` — weights 400/500/600/700.
+- Load both via Google Fonts. Remove the Varela Round `@import` from `src/index.css`.
+
+| Usage | Spec |
+|---|---|
+| Hero headline | Fraunces 38 / 400 / lh 1.15 / tracking -0.02em |
+| Category h1 | Fraunces 44 / 400 / lh 1.0 / tracking -0.02em |
+| Card / shelf title | Fraunces 24 / 500 / lh 1.2 / tracking -0.01em |
+| Section eyebrow | Inter 11 / 600 / lh 1.4 / tracking 0.12em / UPPERCASE |
+| Body | Inter 14 / 400 / lh 1.5 / tracking -0.005em |
+| Row name | Inter 14 / 500 |
+| Row meta | Inter 12 / 400 |
+| Stat value | Fraunces 22 / 500 / tracking -0.01em |
+| Tabular numbers | `font-variant-numeric: tabular-nums` everywhere counts/values appear |
+
+### Spacing and Radii
+
+- Card radius: 12px (lists, stat cards), 14px (hero cards, town card)
+- Pill radius: 999px
+- Button radius: 8px; glyph tile: 8–10px
+- Section gaps: 36px between hero/shelves/groups; 28px between groups
+- Sidebar padding: 28×22px; main column padding: 32×48px (24×20px mobile)
+- No box shadows. Hover lift is `transform: translateY(-1px)` + border color change only.
+
+### Motion
+
+- Row background + card border + donate button opacity hover transitions: 0.12s
+- Chevron rotation: 0.18s
+- Scroll-to + highlight: `scrollIntoView({ behavior: 'smooth', block: 'center' })` + 1.4s ease-out pulse (see Decision 10 CSS)
+
+### Mobile breakpoint
+
+Single breakpoint at **980px**. Below 980px:
+- Sidebar stacks above main column (not hidden)
+- ProgressMeter 5-segment wraps to 2 rows (`.ac-meter-5` modifier — see Phase 6)
+- Main column padding reduces to 24×20px
+
+TownManager collapses to bottom sheet at ≤**720px**.  
+Settings page sections collapse at ≤**700px**.
+
+---
+
+## 6. Implementation Phasing
+
+Phases are ordered by dependency. Each phase targets the `development` branch via PR on its own feature branch. Each PR must include: CHANGELOG entry, CLAUDE.md updates, passing `npm run build` + `npm test`.
+
+Parallel work is allowed within a phase where components are independent. The phase order itself is locked.
+
+---
+
+### Phase 1 — Tokens + Fonts
+
+**Branch:** `feature/v09-phase-1-tokens`  
+**Goal:** Pre-work only. No visible UI changes.
+
+**Work:**
+- Add Meadow CSS custom properties to `src/index.css` `@theme` block (all tokens from section 5)
+- Add `@import` for Fraunces (variable, weights 400/500/600) + Inter (400/500/600/700) via Google Fonts
+- Remove Varela Round `@import` and any `font-family: 'Varela Round'` declarations
+- Update `src/lib/colors.ts`: add a `meadow` export alongside the existing `colors` export; keep `colors` intact as it may still be referenced elsewhere until later phases clean it up
+- Add `--chip-sea` to the token set
+
+**Files likely affected:** `src/index.css`, `src/lib/colors.ts`
+
+**Definition of done:** Build passes; no font flash; grep confirms zero remaining `Varela Round` references.
+
+---
+
+### Phase 2 — Sidebar + Shell Layout
+
+**Branch:** `feature/v09-phase-2-sidebar`  
+**Goal:** Replace `MuseumHeader` + `TabBar` + `TownSwitcher` with a 280px left sidebar. React Router routes and URL structure are fully preserved.
+
+**Work:**
+- Create `src/components/Sidebar.tsx` — CSS grid `280px 1fr`, sticky full-height sidebar, max-width 1440px centered
+- Sidebar contents (top → bottom per v0.9 README):
+  - Brand: museum-roof SVG monogram (38×38) + app wordmark (Fraunces 20/600) + italic sub
+  - Active town card: eyebrow "ACTIVE TOWN", town name (Fraunces 22/500), meta line with game + hemisphere, "Switch town ›" link that opens TownManager (stub for Phase 4)
+  - Nav: vertical list, `<NavLink>` per tab. Each shows label left + `donated/total` count right (tabular-nums, dimmed slash). Active: `accent-soft` bg + `accent-ink` text + 500 weight + 9px radius. Hover: `surface-alt` bg.
+  - Sea entry gated on `gameId in {acnl, acnh}`
+  - Footer: Export CSV link + Settings link (routes to `/settings`, Phase 3), 1px top border
+- Below 980px: sidebar stacks above main (CSS grid row change, not a hidden/toggle)
+- Remove `MuseumHeader.tsx`, `TabBar.tsx`, `TownSwitcher.tsx` (or mark as dead — clean delete if no other consumers)
+- Update `App.tsx` + `ACCanvas.tsx` to mount `Sidebar` instead of the old header/tab pattern
+- Wire existing `useCategoryStats` hook into sidebar nav counts
+
+**Files likely affected:** `src/App.tsx`, `src/components/ACCanvas.tsx`, `src/components/MuseumHeader.tsx` (delete), `src/components/TabBar.tsx` (delete), `src/components/TownSwitcher.tsx` (delete), new `src/components/Sidebar.tsx`
+
+**Dependencies:** Phase 1 (tokens must exist)
+
+**Definition of done:** All 5 tab routes load correctly; counts display; nav active state tracks URL; sea nav entry appears/disappears by game; 980px sidebar stacks above main.
+
+---
+
+### Phase 3 — Settings Page
+
+**Branch:** `feature/v09-phase-3-settings`  
+**Goal:** Full-page settings route. Two sections: About + Danger zone.
+
+**Work:**
+- Create `src/components/SettingsPage.tsx` — full-page route inside main column; when mounted, main column renders `<SettingsPage>` instead of the active tab
+- Add `/settings` route in `App.tsx` router; sidebar Settings link navigates to it; any tab click or Esc closes it (navigate back to active town/tab)
+- **About section:** `dl/dt/dd` list in a single card — version label (`v0.9.0-beta`), source (GitHub link, `target="_blank"`), live storage summary (derive from store: town count, total donations), credits disclaimer ("Companion app for the Animal Crossing series. Not affiliated with Nintendo.")
+- **Danger zone section:** Red-tinted card (`oklch(0.62 0.12 25)` family per v0.9.2). Two actions:
+  - "Reset donations for active town" — ghost button, `confirm()` guard, calls store action
+  - "Reset everything" — solid red button, `confirm()` guard, clears towns + donations + search history
+- Responsive: sections collapse at ≤700px; title shrinks 56→40px; danger buttons full-width at ≤700px
+- Esc key closes settings (navigate back)
+- **No Appearance section** — locked decision #3
+
+**Files likely affected:** `src/App.tsx` (new route), new `src/components/SettingsPage.tsx`, `src/lib/store.ts` (confirm reset actions exist)
+
+**Dependencies:** Phase 2 (sidebar footer link must exist to wire)
+
+**Definition of done:** Settings route loads; About data is live (not hardcoded); both danger zone actions work with `confirm()`; Esc navigates back; responsive at 700px.
+
+---
+
+### Phase 4 — TownManager Drawer
+
+**Branch:** `feature/v09-phase-4-townmanager`  
+**Goal:** Replace `CreateTownModal`, `EditTownModal`, and the stub "Switch town" link from Phase 2 with a single right-side TownManager drawer.
+
+**Work:**
+- Create `src/components/TownManager.tsx` — right-side drawer, 420px wide, scrim overlay, mounts at **layout level** (in `App.tsx`, above the router outlet), so it renders on all routes including category tabs. This resolves the v0.8.1 stopgap (greyed-out buttons).
+- View state: list of towns. Each row shows radio mark, town name, game badge (short label, e.g. "NL"), game full name, hemisphere (if ACNH), donated count.
+- Active town: `--accent` border, filled `●` mark
+- Edit state (row-level inline): **`name` field only** + hemisphere toggle (ACNH only). **No game `<select>`.** Game displayed as read-only badge. (Locked decision #1)
+- Save patch: `{ name, hemisphere: gameId === "acnh" ? hemisphere : null }` — never includes `gameId`
+- Create form ("+ New town" sticky CTA in footer): `name` field + game selector (new towns may choose any game) + hemisphere toggle (ACNH only). Game is set at creation and becomes immutable.
+- Delete: allowed if `towns.length > 1`; uses native `confirm()`. Not allowed for last remaining town.
+- Mobile: bottom sheet at ≤720px
+- Esc closes drawer
+- Remove `CreateTownModal.tsx`, `EditTownModal.tsx`, `src/components/shared/TownNameFields.tsx` (if no other consumers)
+- Remove the v0.8.1 greyed-out button stopgap from whichever component holds it
+- Deprecate `playerName` from `Town` type in `src/lib/types.ts` (remove field, remove from any form that collected it)
+
+**Files likely affected:** `src/App.tsx`, new `src/components/TownManager.tsx`, `src/components/modals/CreateTownModal.tsx` (delete), `src/components/modals/EditTownModal.tsx` (delete), `src/components/shared/TownNameFields.tsx` (delete), `src/lib/types.ts`, `src/lib/store.ts`
+
+**Dependencies:** Phase 2 (sidebar "Switch town" stub wires to this)
+
+**Definition of done:** All town CRUD works; game cannot be changed for existing towns; new towns can set any game; hemisphere toggle ACNH-only; drawer renders on category tabs without z-index or overflow issues; `playerName` absent from type and all forms; mobile bottom sheet at 720px.
+
+---
+
+### Phase 5 — CollectibleRow + ItemExpandPanel Restyle
+
+**Branch:** `feature/v09-phase-5-rows`  
+**Goal:** Restyle item rows and inline expand panels to match v0.9 design. Wire `data-row-id` and `highlightId` for scroll-to (Decision 10).
+
+**Work:**
+
+**CollectibleRow:**
+- Left: Glyph tile (32×32 rounded square, 1.5px category-tinted border, Fraunces monogram — first two letters of name). Donated state: fills glyph bg with category tint, inverts text to `--surface`.
+- Name (Inter 14/500). Donated: add `●` checkmark in `--accent`; strike through name with 1px `--border-strong` decoration.
+- Meta line (Inter 12/400): `habitat · value ✦` for fish; `location · value` for bugs; `part · value` for fossils; italic `basedOn` for art. Separators use `·` glyph in `--border-strong`, 8px each side.
+- Right: `Leaving soon` warn pill (if leaving this month and not donated) OR `New this month` accent pill (if new this month and not donated). Time pill ("4pm–9am") if not "all day". Animated chevron (0.18s rotation on expand).
+- Hover: `--surface-alt` bg (0.12s).
+- Stamp `data-row-id={item.id}` on outer div.
+- Accept `highlightId` prop; add `.ac-row-pulse` class when `item.id === highlightId`.
+
+**ItemExpandPanel:**
+- Two-column grid: `1fr 240px`, padding `4px 18px 22px 64px` (left-pad aligns with row text after glyph)
+- `--surface-alt` bg, 1px top border
+- Left column: "Available in" eyebrow + 12-cell MonthGrid. Available months: `--accent-soft` bg + `--accent` border. Current month: 1.5px inset accent ring + 600 weight label.
+- Right column: stats stack — bells value (Fraunces 22/500), shadow size (if present), active hours. Optional `notes` quote-block (`--accent`-bordered left). Donate button at bottom: `--accent` bg / `--surface` text; flips to outlined "Donated ✓ — undonate" when donated.
+- Chevron rotates 90° on expand.
+
+**Highlight/scroll wiring (Decision 10):**
+- `CategoryTab` receives `highlightId: string | null` + `onHighlightConsumed: () => void`
+- On `highlightId` change: `setExpanded(highlightId)`, wait one frame, query `[data-row-id="${highlightId}"]`, call `scrollIntoView({ behavior: 'smooth', block: 'center' })`, add `.ac-row-pulse` class, call `onHighlightConsumed()`
+
+**CSS additions:**
+```css
+.ac-row-pulse > .ac-row-main { animation: ac-row-pulse 1.4s ease-out; }
+@keyframes ac-row-pulse {
+  0%   { background: var(--accent-soft); }
+  60%  { background: color-mix(in oklch, var(--accent) 16%, transparent); }
+  100% { background: var(--surface-alt); }
+}
+```
+
+**Files likely affected:** `src/components/CollectibleRow.tsx`, `src/components/ItemExpandPanel.tsx`, `src/components/shared/MonthGrid.tsx`, `src/components/shared/DonateToggle.tsx`, `src/index.css`
+
+**Dependencies:** Phases 1 (tokens), 2 (sidebar exists so layout context is correct)
+
+**Definition of done:** All categories render with new row style; expand panel is two-column; `data-row-id` stamps present; pulse animation fires on highlight; donated state strikes through and fills glyph.
+
+---
+
+### Phase 6 — HomeTab + ProgressMeter
+
+**Branch:** `feature/v09-phase-6-home`  
+**Goal:** Rebuild HomeTab with hero + month strip + leaving/new shelves. Ship ProgressMeter with 5-segment support for ACNL/ACNH.
+
+**Work:**
+
+**ProgressMeter (in Sidebar or HomeTab header):**
+- Derives segment list from `gameId`: 4 segments (fish/bugs/fossils/art) for ACGCN/ACWW/ACCF; 5 segments (+ sea, `--chip-sea`) for ACNL/ACNH
+- Each segment: colored fill proportional to `donated/total`, dot + name label + `n/total` fraction
+- 5-segment responsive behavior (`.ac-meter-5` modifier class):
+  - ≥1180px: full labels with fraction. 8px gap.
+  - 980–1180px: drop fractions, keep dot + name, tighter padding (7px 8px).
+  - ≤980px: wrap to 2 rows, `flex-basis: calc(50% - 3px)`, fractions return.
+- 4-segment: unchanged from the design's default behavior
+
+**HomeTab:**
+- **Hero:** Eyebrow "AVAILABLE IN [MONTH]". Headline (Fraunces 38/400/lh 1.15/tracking -0.02em): `<em>{stillNeeded}</em> creatures still to donate this month.<br><span class="aside">{leavingSoon} are leaving soon.</span>` — italic accent number in `--accent-ink`, warn aside in `--warn` italic.
+- **Month strip:** 12-cell grid in a `--surface` rounded card. Current month: `--accent-soft` bg + `--accent-ink` + 500 weight.
+- **"Leaving end of month" shelf:** `--warn`-colored eyebrow, Fraunces shelf title, count. Cards: 3-column grid, each card shows tinted glyph tile (44×44), name + meta + month dots + warn ⚠ icon.
+- **"Just arrived" shelf:** same card pattern, no warn icon, `--accent`-toned eyebrow.
+- **Latest donations:** `--surface` card, list rows with category dot + item name + category eyebrow + relative time.
+- Sea creatures included in shelves for ACNL/ACNH towns.
+- Cards are clickable: call `jumpTo(cat, id)` which sets `tab` + `highlightId` at App level.
+- `jumpTo` wires to `setTab(cat) + setHighlightId(id)` in App state.
+
+**Files likely affected:** `src/components/HomeTab.tsx`, new or updated `src/components/shared/ProgressMeter.tsx`, `src/index.css` (`.ac-meter-5` rules)
+
+**Dependencies:** Phases 1, 2, 5 (rows must be wired for `highlightId` before `jumpTo` flows end-to-end)
+
+**Definition of done:** Hero stat is accurate for current month; leaving/new shelves show correct items; month strip highlights current month; ProgressMeter shows 4 vs 5 segments by game; shelf card click fires scroll-to + highlight in category tab; sea appears in shelves + ProgressMeter for ACNL/ACNH.
+
+---
+
+### Phase 7 — CategoryTab Sectioning
+
+**Branch:** `feature/v09-phase-7-sections`  
+**Goal:** Group category items into 4 sections instead of a flat A–Z list.
+
+**Section order (groups appear only when non-empty):**
+1. **Leaving this month** — warn-toned eyebrow
+2. **Available now** — accent-toned eyebrow
+3. **Out of season** — muted eyebrow
+4. **Already donated** — muted eyebrow
+
+**Work:**
+- Section header: Inter 11/600/0.12em tracking/UPPERCASE, count right-aligned 12px tabular
+- Section card: `--surface` bg, 1px `--border`, 12px radius, divider lines between rows
+- Month-wrapping logic for "leaving" and "new": an item is "leaving this month" if it's available in the current month but not next month. An item is "new this month" if it's available in the current month but not last month. Handle December→January wrap correctly (month index modulo 12).
+- Items in multiple states: "leaving" takes precedence over "new"; donated items always go to the "Already donated" section regardless of availability.
+- Per v0.9 README: *"Row click: toggles inline expand. Only one row open at a time per category (state lives in CategoryTab)."*
+- Apply `--accent-soft` bg + `--accent` border to "Leaving soon" and "New this month" pill labels (not row bg) as appropriate.
+
+**Files likely affected:** `src/components/ACCanvas.tsx` or a new `src/components/CategoryTab.tsx`, `src/components/CollectibleRow.tsx`
+
+**Dependencies:** Phase 5 (rows restyled), Phase 1 (tokens)
+
+**Definition of done:** All 4 section groups appear in correct order; empty groups hidden; leaving/new month-wrap logic handles December/January correctly; single-expand-at-a-time enforced per tab; donated items always in "Already donated" section.
+
+---
+
+### Phase 8 — GlobalSearchDropdown
+
+**Branch:** `feature/v09-phase-8-search`  
+**Goal:** Replace `GlobalSearchBar`, `GlobalSearchResults`, `SearchHistoryPopover` with `GlobalSearchDropdown`.
+
+**Work:**
+- Create `src/components/search/GlobalSearchDropdown.tsx`
+- Anchored under the search input in the main column topbar. Only active on home tab (`tab === "home"`); other tabs keep per-tab inline search filtering.
+- Three states:
+  1. **Empty / focused with no query:** shows recent searches from localStorage (key: `ac-curator-search-history`, max 8 entries)
+  2. **No results for query:** "No results" empty state
+  3. **Results:** grouped by category (colored dot + count header). Each row: monogram glyph (category-tinted), name, meta line, donated badge
+- 5 groups for ACNL/ACNH towns (fish, bugs, fossils, art, sea). 4 groups for others. Empty groups hidden.
+- **`basedOn` matching preserved** (Decision 8): art matches against both `name` and `basedOn` fields.
+- Keyboard nav: `↑↓` moves between results, `↵` selects (fires `jumpTo` + closes dropdown), `Esc` closes.
+- Selecting a result: calls `jumpTo(cat, id)` which sets tab + highlightId, then closes dropdown.
+- Search history: on result selection, add query to `ac-curator-search-history` in localStorage (trim to 8 entries, deduplicate).
+- Debounce: 150ms (wire through existing `useSearch` hook for debounce logic; replace `SearchHistoryPopover` entirely).
+- Delete `src/components/search/GlobalSearchBar.tsx`, `src/components/search/GlobalSearchResults.tsx`, `src/components/search/SearchHistoryPopover.tsx`
+
+**Files likely affected:** `src/components/search/GlobalSearchDropdown.tsx` (new), `src/hooks/useSearch.ts`, `src/components/ACCanvas.tsx`, deletions of old search components
+
+**Dependencies:** Phases 2 (topbar location), 5 (row/glyph treatment for result rows)
+
+**Definition of done:** Search works for all categories; `basedOn` art search confirmed ("Leonardo" → Famous Painting); keyboard nav ↑↓↵esc functional; history persisted to correct localStorage key; max 8 entries; sea group appears for ACNL/ACNH; selecting result jumps to correct tab + row with pulse.
+
+---
+
+### Phase 9 — StatsTab
+
+**Branch:** `feature/v09-phase-9-stats`  
+**Goal:** Rebuild StatsTab with per-category cards and updated yearly rhythm chart.
+
+**Work:**
+- **Category cards:** 4-up grid for ACGCN/ACWW/ACCF, 5-up for ACNL/ACNH (sea card gated same as nav/ProgressMeter)
+- Each card: eyebrow in category chip color, donated/total in Fraunces big, thin progress bar tinted with chip color, "X% complete" caption
+- **Yearly rhythm chart:** 12 columns, each with stacked bar. BG height = % of max availability across all months. Inner fill (50% accent opacity) = donated fraction within available. Current month column has `--accent` border. Number above each column = items available that month.
+- Sea creatures included in chart calculation for ACNL/ACNH towns (Decision 4).
+- Legend: "Available" / "Already donated"
+- Retire `src/components/views/AnalyticsView.tsx` if it holds the old stats view (or refactor in place).
+
+**Files likely affected:** `src/components/views/AnalyticsView.tsx` (restyle/replace), `src/hooks/useCategoryStats.ts` (extend if sea not already counted for ACNL/ACNH)
+
+**Dependencies:** Phase 1 (tokens), Phase 2 (layout context)
+
+**Definition of done:** 4 vs 5 cards display correctly by game; chart uses correct current month; sea included in chart for ACNL/ACNH; percentage captions accurate; category chip colors correct.
+
+---
+
+### Phase 10 — Mobile Responsive Verification
+
+**Branch:** `feature/v09-phase-10-mobile`  
+**Goal:** Audit and fix any mobile regressions; verify all 980px breakpoint behaviors.
+
+**Checklist:**
+- [ ] Sidebar stacks above main at 980px (not hidden)
+- [ ] TownManager renders as bottom sheet at ≤720px
+- [ ] ProgressMeter 5-segment wraps to 2 rows at ≤980px; 4-segment unchanged
+- [ ] Settings sections collapse at ≤700px; danger buttons full-width
+- [ ] All touch targets ≥44px (nav items, donate toggle, glyph tile, drawer close, row chevron)
+- [ ] Hero headline wraps without overflow at 390px
+- [ ] Scroll-to + highlight works on mobile (identical behavior per Decision 10 spec)
+- [ ] Category section headers + row meta readable at 390px
+- [ ] GlobalSearchDropdown keyboard nav inaccessible without hardware keyboard on mobile — ensure tap-to-select works
+
+**Files likely affected:** `src/index.css`, any component with hardcoded pixel widths
+
+**Dependencies:** All prior phases
+
+**Definition of done:** All checklist items pass at 390px (iPhone SE) and 768px (iPad portrait) viewport simulation.
+
+---
+
+## 7. Open Issues
+
+### Issue #59 — Shadow size not displayed
+
+Shadow size data exists in the JSON and is typed correctly, but has no render surface in `ItemExpandPanel` or elsewhere. The v0.9 ItemExpandPanel spec includes it in the right-column stat stack ("shadow size"). Roll in during Phase 5 if it's trivial (it's just another stat line in the expand panel). If it adds meaningful scope, carry to v0.9.x and leave the issue open.
+
+### Issue #60 — Version footer branch suffix
+
+`App.tsx` version footer always shows `· release/...` suffix on non-prod hostnames. Should hide for branches whose name `startsWith('release/')`. Address during Phase 2 or 10 (the new shell may move or replace the footer entirely). If the footer is retired during the shell rebuild, close #60 as "resolved by design change."
+
+### PR #45 — Stale roadmap docs draft
+
+PR #45 ("docs: v0.8.0-alpha roadmap audit") has been open since 2026-04-29, is never-merged, and is mostly superseded by `docs/decisions.md` and this document. Close it during v0.9 housekeeping with a comment: "Superseded by docs/v0.9-plan.md and docs/decisions.md."
+
+---
+
+## 8. Success Criteria for Tagging v0.9.0-beta
+
+All 10 phases merged to `development`. All of the following must be true:
+
+- [ ] `npm run build` passes with zero TypeScript errors
+- [ ] `npm test` passes
+- [ ] Meadow tokens are the only active theme; no Varela Round font loads
+- [ ] Sidebar renders on all routes; nav counts are accurate; sea entry gated correctly
+- [ ] TownManager creates, edits (name only), activates, and deletes towns correctly; game immutable on edit; hemisphere ACNH-only; `playerName` absent from all forms and types
+- [ ] Settings page has About + Danger zone sections only; reset actions work; Esc closes
+- [ ] Item rows match v0.9 design: glyph, meta line, pills, strikethrough, chevron
+- [ ] CategoryTab sections: Leaving / Available / Out of season / Already donated; month-wrap logic correct
+- [ ] HomeTab: hero stat accurate; shelves correct; month strip; ProgressMeter 4/5 segments; jumpTo works
+- [ ] GlobalSearchDropdown: 5 groups for ACNL/ACNH; `basedOn` art search; keyboard nav; history max 8; jump fires scroll+highlight
+- [ ] StatsTab: 4/5 cards by game; chart includes sea for ACNL/ACNH
+- [ ] Scroll-to + highlight: smooth scroll, auto-expand, 1.4s pulse, works from both Home shelves and search
+- [ ] Mobile: 980px breakpoint; touch targets ≥44px; bottom sheet at 720px; 5-seg ProgressMeter wraps
+- [ ] Dev preview at https://development-animalcrossingwebapp.vercel.app verified manually before tag
+- [ ] CHANGELOG.md has v0.9.0-beta entry; CLAUDE.md updated with new component names and retired names
+- [ ] PR #45 closed with a comment
+- [ ] Issues #59 and #60 assessed: either fixed or explicitly carried with updated labels
+
+---
+
+## 9. Glossary / Vocabulary
+
+### New names (v0.9+)
+
+| New name | Type | Description |
+|---|---|---|
+| `Sidebar` | Component | Left 280px navigation column with brand, active town card, nav links, footer |
+| `TownManager` | Component | Right-side drawer (bottom sheet on mobile) for switch/create/edit/delete towns |
+| `ProgressMeter` | Component | Multi-segment donation progress bar; 4-seg for older games, 5-seg for ACNL/ACNH |
+| `GlobalSearchDropdown` | Component | Unified search dropdown with category groups, keyboard nav, history |
+| `SettingsPage` | Component | Full-page settings route: About + Danger zone |
+| `ac-row-pulse` | CSS class | Keyframe animation class for scroll-to + highlight effect |
+| `ac-meter-5` | CSS class | Modifier for 5-segment ProgressMeter responsive rules |
+| `highlightId` | App state | String or null — the item ID to scroll to and pulse when set |
+| `jumpTo(cat, id)` | Function | Sets active tab to `cat` + sets `highlightId` to `id` |
+| `ac-curator-search-history` | localStorage key | Persists last 8 search queries (max 8, deduplicated) |
+
+### Retired names (deprecated in v0.9)
+
+| Retired name | Replaced by |
+|---|---|
+| `MuseumHeader` | `Sidebar` |
+| `TabBar` | `Sidebar` nav section |
+| `TownSwitcher` | `TownManager` drawer |
+| `CreateTownModal` | `TownManager` create form |
+| `EditTownModal` | `TownManager` row edit |
+| `TownNameFields` | Inline fields in `TownManager` |
+| `GlobalSearchBar` | `GlobalSearchDropdown` |
+| `GlobalSearchResults` | `GlobalSearchDropdown` |
+| `SearchHistoryPopover` | `GlobalSearchDropdown` empty state |
+| `CategoryProgress` | Sidebar nav counts + `ProgressMeter` |
+| `AnalyticsView` | `StatsTab` (refactored in place or replaced) |
+| `playerName` (Town field) | Deprecated — not replaced |
+
+---
+
+## 10. References
+
+| Resource | Path / URL |
+|---|---|
+| Design handoff v0.9 | `design_handoff_v0.9_curator/README.md` |
+| Design handoff v0.9.1 | `design_handoff_v0.9.1_curator/README.md` |
+| Design handoff v0.9.2 (most current) | `design_handoff_v0.9.2_curator/README.md` |
+| Architecture reference | `.claude/rules/architecture.md` |
+| Dev process checklist | `.claude/rules/dev-process.md` |
+| Vercel deployment rules | `.claude/rules/vercel.md` |
+| Project context | `CLAUDE.md` |
+| Decisions log | `docs/decisions.md` |
+| Changelog | `CHANGELOG.md` |
+| Dev preview | https://development-animalcrossingwebapp.vercel.app |
+| Production | https://animalcrossingwebapp.vercel.app |

From b7e04ca34fcf39892a615ee42c2a4d07729f1688 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 17:43:29 -0400
Subject: [PATCH 02/28] feat(v0.9-phase-1): add Meadow tokens + Fraunces/Inter,
 retire Varela Round
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 1 of the v0.9.0-beta plan (docs/v0.9-plan.md §6). Plumbing only —
no components consume the new tokens yet; visual output is near-identical
to v0.8.2-alpha.

- Add Meadow palette to src/index.css @theme block as CSS custom
  properties (bg, surface, surface-alt, ink trio, border pair, accent
  trio, warn pair, 5 chip tokens incl. --chip-sea).
- Add Fraunces (opsz 9..144, weights 400/500/600 + italic) and Inter
  (400/500/600/700) via Google Fonts in index.html, src/index.css, and
  public/version-history.html. Register --font-display / --font-sans.
- Mirror tokens in src/lib/colors.ts as new `meadow` export; add
  `fontStacks` export. Legacy `colors` export kept untouched until
  later phases retire its consumers.
- Retire Varela Round entirely: remove all @imports and any
  font-family references (src/index.css, index.html, src/App.tsx
  loading state, public/version-history.html).

Per locked decision #2, Parchment / Midnight / Sakura are intentionally
excluded — Meadow is the only theme for v0.9.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                | 13 ++++++++++
 index.html                  |  2 +-
 public/version-history.html |  4 +--
 src/App.tsx                 |  2 +-
 src/index.css               | 49 ++++++++++++++++++++++++++++++++++++-
 src/lib/colors.ts           | 33 +++++++++++++++++++++++++
 6 files changed, 98 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88d9849..103bb75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes to this project are documented here.
 
+## [Unreleased] — v0.9.0-beta (in progress)
+
+### Added — Phase 1: tokens + fonts
+- **Meadow design tokens** — full palette added to `src/index.css` `@theme` block as CSS custom properties (`--bg`, `--surface`, `--surface-alt`, `--ink`, `--ink-soft`, `--ink-muted`, `--border`, `--border-strong`, `--accent`, `--accent-soft`, `--accent-ink`, `--warn`, `--warn-soft`, `--chip-fish`, `--chip-bugs`, `--chip-fossils`, `--chip-art`, `--chip-sea`). Mirrored in `src/lib/colors.ts` as the new `meadow` export.
+- **Fraunces** (variable, opsz 9..144, weights 400/500/600 + italic 400/500) and **Inter** (400/500/600/700) loaded via Google Fonts in `index.html` and `src/index.css`. Registered as `--font-display` and `--font-sans` in `@theme`. New `fontStacks` export in `src/lib/colors.ts`.
+
+### Removed — Phase 1
+- **Varela Round** — fully retired. `@import` removed from `src/index.css`, `index.html`, and `public/version-history.html`. Inline `fontFamily: 'Varela Round, ...'` reference in `src/App.tsx` loading state replaced with Inter. Per locked decision #2 in `docs/v0.9-plan.md`, Fraunces + Inter is the sole type stack.
+
+### Notes
+- This phase is plumbing only. No components consume the new tokens yet; visual output is intentionally near-identical to v0.8.2-alpha. Component restyles begin in Phase 5.
+- **Parchment, Midnight, and Sakura themes are intentionally excluded** per locked decision #2 in `docs/v0.9-plan.md` ("ship Meadow only"). The legacy `colors` export in `src/lib/colors.ts` is kept untouched until later phases retire its consumers.
+
 ## [v0.8.2-alpha] — 2026-05-01
 
 ### Added
diff --git a/index.html b/index.html
index 2176a18..8585b5d 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <title>Animal Crossing Museum Tracker</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Varela+Round:wght@400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/version-history.html b/public/version-history.html
index a0069d5..f8c969e 100644
--- a/public/version-history.html
+++ b/public/version-history.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Animal Crossing Web App — Version History & Roadmap</title>
-  <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -25,7 +25,7 @@
     }
 
     body {
-      font-family: 'Varela Round', sans-serif;
+      font-family: 'Inter', system-ui, sans-serif;
       background: #eef7ee;
       color: var(--ink);
       min-height: 100vh;
diff --git a/src/App.tsx b/src/App.tsx
index 464a91f..0c1bc26 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,7 +34,7 @@ function App() {
         <span
           style={{
             color: '#7B5E3B',
-            fontFamily: 'Varela Round, sans-serif',
+            fontFamily: "'Inter', system-ui, sans-serif",
             fontSize: 18,
           }}
         >
diff --git a/src/index.css b/src/index.css
index 7f1fb85..bfc28a1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@theme {
+  --color-bg: #F4EFE3;
+  --color-surface: #FFFDF7;
+  --color-surface-alt: #F8F2E2;
+  --color-ink: #23241F;
+  --color-ink-soft: #5C5848;
+  --color-ink-muted: #8A8470;
+  --color-border: #E2D9C3;
+  --color-border-strong: #CFC4A8;
+  --color-accent: oklch(0.55 0.09 150);
+  --color-accent-soft: oklch(0.55 0.09 150 / 0.12);
+  --color-accent-ink: oklch(0.32 0.06 150);
+  --color-warn: oklch(0.62 0.12 50);
+  --color-warn-soft: oklch(0.62 0.12 50 / 0.14);
+  --color-chip-fish: oklch(0.62 0.08 230);
+  --color-chip-bugs: oklch(0.6 0.1 130);
+  --color-chip-fossils: oklch(0.55 0.06 60);
+  --color-chip-art: oklch(0.58 0.08 320);
+  --color-chip-sea: oklch(0.58 0.09 200);
+
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+
+:root {
+  --bg: #F4EFE3;
+  --surface: #FFFDF7;
+  --surface-alt: #F8F2E2;
+  --ink: #23241F;
+  --ink-soft: #5C5848;
+  --ink-muted: #8A8470;
+  --border: #E2D9C3;
+  --border-strong: #CFC4A8;
+  --accent: oklch(0.55 0.09 150);
+  --accent-soft: oklch(0.55 0.09 150 / 0.12);
+  --accent-ink: oklch(0.32 0.06 150);
+  --warn: oklch(0.62 0.12 50);
+  --warn-soft: oklch(0.62 0.12 50 / 0.14);
+  --chip-fish: oklch(0.62 0.08 230);
+  --chip-bugs: oklch(0.6 0.1 130);
+  --chip-fossils: oklch(0.55 0.06 60);
+  --chip-art: oklch(0.58 0.08 320);
+  --chip-sea: oklch(0.58 0.09 200);
+}
+
 * {
-  font-family: 'Varela Round', sans-serif;
+  font-family: 'Inter', system-ui, sans-serif;
 }
diff --git a/src/lib/colors.ts b/src/lib/colors.ts
index 9893071..56b3371 100644
--- a/src/lib/colors.ts
+++ b/src/lib/colors.ts
@@ -7,3 +7,36 @@ export const colors = {
   border: '#E7DAC4', // borders
   muted: '#5a4a35', // secondary/muted text
 } as const;
+
+/**
+ * Meadow theme tokens (v0.9). Mirrors the CSS custom properties defined in
+ * `src/index.css` `@theme` block. Use the CSS vars (`var(--accent)`) for
+ * styling; this export exists for cases where a JS literal is required.
+ *
+ * Color values match the locked palette in docs/v0.9-plan.md §5.
+ */
+export const meadow = {
+  bg: '#F4EFE3',
+  surface: '#FFFDF7',
+  surfaceAlt: '#F8F2E2',
+  ink: '#23241F',
+  inkSoft: '#5C5848',
+  inkMuted: '#8A8470',
+  border: '#E2D9C3',
+  borderStrong: '#CFC4A8',
+  accent: 'oklch(0.55 0.09 150)',
+  accentSoft: 'oklch(0.55 0.09 150 / 0.12)',
+  accentInk: 'oklch(0.32 0.06 150)',
+  warn: 'oklch(0.62 0.12 50)',
+  warnSoft: 'oklch(0.62 0.12 50 / 0.14)',
+  chipFish: 'oklch(0.62 0.08 230)',
+  chipBugs: 'oklch(0.6 0.1 130)',
+  chipFossils: 'oklch(0.55 0.06 60)',
+  chipArt: 'oklch(0.58 0.08 320)',
+  chipSea: 'oklch(0.58 0.09 200)',
+} as const;
+
+export const fontStacks = {
+  display: "'Fraunces', Georgia, serif",
+  sans: "'Inter', system-ui, sans-serif",
+} as const;

From 42eb18079bf6a626b44441a29315baf1a2906654 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 17:58:38 -0400
Subject: [PATCH 03/28] chore(docs): commit v0.9 design handoffs to
 docs/design-handoffs/

Worktree-isolated sessions can't see untracked files at the host repo root.
Move the three design curator handoffs into docs/ so future sessions (Phase 5+)
can reference them. Update docs/v0.9-plan.md paths accordingly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/design-handoffs/README.md                |  13 +
 .../v0.9.1_curator/Curator.html               | 268 ++++++++
 docs/design-handoffs/v0.9.1_curator/README.md |  75 +++
 .../v0.9.1_curator/addons-styles.css          | 280 +++++++++
 .../design-handoffs/v0.9.1_curator/addons.jsx | 327 ++++++++++
 .../v0.9.1_curator/components.jsx             | 127 ++++
 docs/design-handoffs/v0.9.1_curator/data.js   | 121 ++++
 docs/design-handoffs/v0.9.1_curator/shell.jsx | 117 ++++
 .../design-handoffs/v0.9.1_curator/styles.css | 554 +++++++++++++++++
 docs/design-handoffs/v0.9.1_curator/tabs.jsx  | 265 ++++++++
 docs/design-handoffs/v0.9.1_curator/theme.js  | 105 ++++
 .../v0.9.1_curator/tweaks-panel.jsx           | 425 +++++++++++++
 .../v0.9.2_curator/Curator.html               | 296 +++++++++
 docs/design-handoffs/v0.9.2_curator/README.md | 147 +++++
 .../v0.9.2_curator/addons-styles.css          | 409 +++++++++++++
 .../design-handoffs/v0.9.2_curator/addons.jsx | 428 +++++++++++++
 .../v0.9.2_curator/components.jsx             | 127 ++++
 docs/design-handoffs/v0.9.2_curator/data.js   | 121 ++++
 docs/design-handoffs/v0.9.2_curator/shell.jsx | 123 ++++
 .../design-handoffs/v0.9.2_curator/styles.css | 576 ++++++++++++++++++
 docs/design-handoffs/v0.9.2_curator/tabs.jsx  | 288 +++++++++
 docs/design-handoffs/v0.9.2_curator/theme.js  | 105 ++++
 .../v0.9.2_curator/tweaks-panel.jsx           | 425 +++++++++++++
 .../design-handoffs/v0.9_curator/Curator.html | 220 +++++++
 docs/design-handoffs/v0.9_curator/README.md   | 205 +++++++
 .../v0.9_curator/components.jsx               | 127 ++++
 docs/design-handoffs/v0.9_curator/data.js     | 105 ++++
 docs/design-handoffs/v0.9_curator/shell.jsx   | 115 ++++
 docs/design-handoffs/v0.9_curator/styles.css  | 553 +++++++++++++++++
 docs/design-handoffs/v0.9_curator/tabs.jsx    | 258 ++++++++
 docs/design-handoffs/v0.9_curator/theme.js    | 101 +++
 .../v0.9_curator/tweaks-panel.jsx             | 425 +++++++++++++
 docs/v0.9-plan.md                             |  14 +-
 33 files changed, 7838 insertions(+), 7 deletions(-)
 create mode 100644 docs/design-handoffs/README.md
 create mode 100644 docs/design-handoffs/v0.9.1_curator/Curator.html
 create mode 100644 docs/design-handoffs/v0.9.1_curator/README.md
 create mode 100644 docs/design-handoffs/v0.9.1_curator/addons-styles.css
 create mode 100644 docs/design-handoffs/v0.9.1_curator/addons.jsx
 create mode 100644 docs/design-handoffs/v0.9.1_curator/components.jsx
 create mode 100644 docs/design-handoffs/v0.9.1_curator/data.js
 create mode 100644 docs/design-handoffs/v0.9.1_curator/shell.jsx
 create mode 100644 docs/design-handoffs/v0.9.1_curator/styles.css
 create mode 100644 docs/design-handoffs/v0.9.1_curator/tabs.jsx
 create mode 100644 docs/design-handoffs/v0.9.1_curator/theme.js
 create mode 100644 docs/design-handoffs/v0.9.1_curator/tweaks-panel.jsx
 create mode 100644 docs/design-handoffs/v0.9.2_curator/Curator.html
 create mode 100644 docs/design-handoffs/v0.9.2_curator/README.md
 create mode 100644 docs/design-handoffs/v0.9.2_curator/addons-styles.css
 create mode 100644 docs/design-handoffs/v0.9.2_curator/addons.jsx
 create mode 100644 docs/design-handoffs/v0.9.2_curator/components.jsx
 create mode 100644 docs/design-handoffs/v0.9.2_curator/data.js
 create mode 100644 docs/design-handoffs/v0.9.2_curator/shell.jsx
 create mode 100644 docs/design-handoffs/v0.9.2_curator/styles.css
 create mode 100644 docs/design-handoffs/v0.9.2_curator/tabs.jsx
 create mode 100644 docs/design-handoffs/v0.9.2_curator/theme.js
 create mode 100644 docs/design-handoffs/v0.9.2_curator/tweaks-panel.jsx
 create mode 100644 docs/design-handoffs/v0.9_curator/Curator.html
 create mode 100644 docs/design-handoffs/v0.9_curator/README.md
 create mode 100644 docs/design-handoffs/v0.9_curator/components.jsx
 create mode 100644 docs/design-handoffs/v0.9_curator/data.js
 create mode 100644 docs/design-handoffs/v0.9_curator/shell.jsx
 create mode 100644 docs/design-handoffs/v0.9_curator/styles.css
 create mode 100644 docs/design-handoffs/v0.9_curator/tabs.jsx
 create mode 100644 docs/design-handoffs/v0.9_curator/theme.js
 create mode 100644 docs/design-handoffs/v0.9_curator/tweaks-panel.jsx

diff --git a/docs/design-handoffs/README.md b/docs/design-handoffs/README.md
new file mode 100644
index 0000000..44b8fe2
--- /dev/null
+++ b/docs/design-handoffs/README.md
@@ -0,0 +1,13 @@
+# v0.9 Design Handoffs
+
+Read-only design references for the v0.9 implementation. Three iterative passes from the design curator, each building on the previous one:
+
+| Pass | Folder | Notes |
+|------|--------|-------|
+| First | `v0.9_curator/` | Design language, palette, type scale, all screens |
+| Second | `v0.9.1_curator/` | TownManager drawer, GlobalSearchDropdown, Sea Creatures nav, `chip-sea` token |
+| Third (most current) | `v0.9.2_curator/` | ProgressMeter 5-segment responsive, scroll-to + highlight, Settings page |
+
+**v0.9.2 is the most current handoff.** Where passes disagree, the later pass wins.
+
+These are *inputs*. The canonical implementation source of truth is [`docs/v0.9-plan.md`](../v0.9-plan.md). Don't modify the handoff files — treat them as historical design artifacts.
diff --git a/docs/design-handoffs/v0.9.1_curator/Curator.html b/docs/design-handoffs/v0.9.1_curator/Curator.html
new file mode 100644
index 0000000..5adf237
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/Curator.html
@@ -0,0 +1,268 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Curator — AC Museum Tracker</title>
+<link rel="stylesheet" href="styles.css" />
+<link rel="stylesheet" href="addons-styles.css" />
+</head>
+<body>
+<div id="root"></div>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+
+<script src="data.js"></script>
+<script src="theme.js"></script>
+<script type="text/babel" src="components.jsx"></script>
+<script type="text/babel" src="shell.jsx"></script>
+<script type="text/babel" src="tabs.jsx"></script>
+<script type="text/babel" src="addons.jsx"></script>
+<script type="text/babel" src="tweaks-panel.jsx"></script>
+
+<script type="text/babel">
+const { useState, useMemo, useEffect } = React;
+const { Sidebar } = window.ACShell;
+const { HomeTab, CategoryTab, StatsTab } = window.ACTabs;
+const { TownManager, GlobalSearchDropdown } = window.ACAddOns;
+const { MONTHS_LONG } = window.ACComponents;
+const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakSlider, useTweaks } = window;
+
+const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "theme": "meadow",
+  "currentMonth": 7,
+  "showLeavingShelf": true,
+  "showNewShelf": true,
+  "compactRows": false,
+  "hideDonated": false
+}/*EDITMODE-END*/;
+
+function App() {
+  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
+  const data = window.MUSEUM_DATA;
+  const [tab, setTab] = useState("home");
+  const [search, setSearch] = useState("");
+
+  // donated state — sets per category
+  const [donated, setDonated] = useState({
+    fish: new Set(data.donated.fish),
+    bugs: new Set(data.donated.bugs),
+    fossils: new Set(data.donated.fossils),
+    art: new Set(data.donated.art),
+    sea: new Set(data.donated.sea || []),
+  });
+
+  // Towns + active town state
+  const [towns, setTowns] = useState(data.towns);
+  const [activeTownId, setActiveTownId] = useState(towns[0].id);
+  const activeTown = towns.find(t => t.id === activeTownId) || towns[0];
+  const [townMgrOpen, setTownMgrOpen] = useState(false);
+  const [searchFocused, setSearchFocused] = useState(false);
+
+  useEffect(() => {
+    const onPrefill = (e) => setSearch(e.detail);
+    window.addEventListener("ac-search-prefill", onPrefill);
+    return () => window.removeEventListener("ac-search-prefill", onPrefill);
+  }, []);
+
+  useEffect(() => { window.applyTheme(tweaks.theme); }, [tweaks.theme]);
+
+  function toggleDonated(cat, id) {
+    setDonated(prev => {
+      const next = { ...prev };
+      const s = new Set(prev[cat]);
+      if (s.has(id)) s.delete(id); else s.add(id);
+      next[cat] = s;
+      return next;
+    });
+  }
+
+  const stats = {
+    fish:    { donated: donated.fish.size,    total: data.fish.length },
+    bugs:    { donated: donated.bugs.size,    total: data.bugs.length },
+    fossils: { donated: donated.fossils.size, total: data.fossils.length },
+    art:     { donated: donated.art.size,     total: data.art.length },
+    sea:     { donated: donated.sea.size,     total: (data.sea||[]).length },
+  };
+
+  const currentMonth = tweaks.currentMonth;
+
+  function jumpTo(cat, id) {
+    setTab(cat);
+    // could scroll to id, kept simple
+  }
+
+  // Filter donated rows out if hideDonated tweak is on
+  const filteredCat = (cat) => {
+    if (!tweaks.hideDonated) return data[cat];
+    return data[cat].filter(it => !donated[cat].has(it.id));
+  };
+
+  return (
+    <div className="ac-app" data-compact={tweaks.compactRows ? "true" : "false"}>
+      <Sidebar
+        town={{...data.meta, gameId: activeTown.gameId, townName: activeTown.name, hemisphere: activeTown.hemisphere || data.meta.hemisphere}}
+        currentTab={tab}
+        onTab={setTab}
+        stats={stats}
+        onOpenTowns={()=>setTownMgrOpen(true)}
+      />
+
+      <main className="ac-main">
+        <div className="ac-topbar">
+          <div className="ac-search-wrap">
+            <div className="ac-search">
+              <svg className="ac-search-icon" width="14" height="14" viewBox="0 0 16 16" fill="none">
+                <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.4"/>
+                <path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
+              </svg>
+              <input
+                placeholder={tab === "home" ? "Search across categories…" : `Search ${tab}…`}
+                value={search}
+                onChange={e=>setSearch(e.target.value)}
+                onFocus={()=>setSearchFocused(true)}
+                onBlur={()=>setTimeout(()=>setSearchFocused(false), 180)}
+              />
+            </div>
+            {tab === "home" && searchFocused && (
+              <GlobalSearchDropdown
+                query={search}
+                data={data}
+                donated={donated}
+                onJump={(cat, id)=>{ setTab(cat); setSearch(""); setSearchFocused(false); }}
+                onClose={()=>setSearchFocused(false)}
+              />
+            )}
+          </div>
+          <div className="ac-topbar-actions">
+            <div className="ac-date-chip">
+              <span>Sat</span>
+              <strong>May {data.meta.currentDay}</strong>
+            </div>
+          </div>
+        </div>
+
+        {tab === "home" && (
+          <HomeTab
+            data={{...data,
+              recentActivity: data.recentActivity,
+            }}
+            donated={donated}
+            currentMonth={currentMonth}
+            onJump={jumpTo}
+            onToggle={toggleDonated}
+            showLeavingShelf={tweaks.showLeavingShelf}
+            showNewShelf={tweaks.showNewShelf}
+          />
+        )}
+
+        {["fish","bugs","fossils","art","sea"].includes(tab) && (
+          <>
+            <header className="ac-category-head">
+              <h1 className="ac-category-title">
+                <em>{stats[tab].donated}</em> of {stats[tab].total} {tab}
+              </h1>
+              <div className="ac-category-meta">
+                <strong>{Math.round((stats[tab].donated/stats[tab].total)*100)}% complete</strong>
+                {tab !== "art" && tab !== "fossils" && `Showing availability for ${MONTHS_LONG[currentMonth-1]}`}
+              </div>
+            </header>
+            <CategoryTab
+              category={tab}
+              items={filteredCat(tab)}
+              donated={donated[tab]}
+              onToggle={(id)=>toggleDonated(tab, id)}
+              currentMonth={currentMonth}
+              search={search}
+            />
+          </>
+        )}
+
+        {tab === "stats" && (
+          <>
+            <header className="ac-category-head">
+              <h1 className="ac-category-title"><em>Stats</em> &amp; rhythms</h1>
+              <div className="ac-category-meta">
+                <strong>{data.meta.townName}</strong>
+                {data.meta.game}
+              </div>
+            </header>
+            <StatsTab data={data} donated={donated} currentMonth={currentMonth} />
+          </>
+        )}
+      </main>
+
+      <TownManager
+        open={townMgrOpen}
+        onClose={()=>setTownMgrOpen(false)}
+        towns={towns}
+        activeTownId={activeTownId}
+        onActivate={(id)=>{ setActiveTownId(id); setTownMgrOpen(false); }}
+        onUpdate={(id, patch)=>setTowns(ts => ts.map(t => t.id === id ? {...t, ...patch} : t))}
+        onCreate={(t)=>{ const id = t.name.toLowerCase().replace(/\s+/g,"-")+"-"+Date.now().toString(36).slice(-4); setTowns(ts => [...ts, {...t, id, itemCount: 0}]); setActiveTownId(id); }}
+        onDelete={(id)=>{ setTowns(ts => ts.filter(t => t.id !== id)); if (activeTownId === id) setActiveTownId(towns.find(t=>t.id!==id).id); }}
+      />
+
+      <TweaksPanel title="Tweaks">
+        <TweakSection title="Theme">
+          <TweakSelect
+            label="Palette"
+            value={tweaks.theme}
+            onChange={v => setTweak("theme", v)}
+            options={[
+              { value: "meadow",     label: "Meadow (default)" },
+              { value: "parchment",  label: "Parchment (current app)" },
+              { value: "midnight",   label: "Midnight" },
+              { value: "sakura",     label: "Sakura" },
+            ]}
+          />
+        </TweakSection>
+
+        <TweakSection title="Time">
+          <TweakSlider
+            label={`Current month — ${MONTHS_LONG[tweaks.currentMonth-1]}`}
+            value={tweaks.currentMonth}
+            onChange={v => setTweak("currentMonth", v)}
+            min={1} max={12} step={1}
+          />
+        </TweakSection>
+
+        <TweakSection title="Layout">
+          <TweakToggle
+            label="Show 'Leaving soon' shelf"
+            value={tweaks.showLeavingShelf}
+            onChange={v => setTweak("showLeavingShelf", v)}
+          />
+          <TweakToggle
+            label="Show 'New this month' shelf"
+            value={tweaks.showNewShelf}
+            onChange={v => setTweak("showNewShelf", v)}
+          />
+          <TweakToggle
+            label="Hide donated items in lists"
+            value={tweaks.hideDonated}
+            onChange={v => setTweak("hideDonated", v)}
+          />
+          <TweakToggle
+            label="Compact row density"
+            value={tweaks.compactRows}
+            onChange={v => setTweak("compactRows", v)}
+          />
+        </TweakSection>
+      </TweaksPanel>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+</script>
+
+<style id="__compact-density">
+[data-compact="true"] .ac-row-main { padding: 8px 18px; }
+[data-compact="true"] .ac-row-meta { display: none; }
+[data-compact="true"] .ac-glyph { width: 26px; height: 26px; font-size: 10px; }
+</style>
+</body>
+</html>
diff --git a/docs/design-handoffs/v0.9.1_curator/README.md b/docs/design-handoffs/v0.9.1_curator/README.md
new file mode 100644
index 0000000..3110a08
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/README.md
@@ -0,0 +1,75 @@
+# Handoff: v0.9.1 UI Redesign — "Curator"
+
+## What's new since v0.9
+
+This bundle replaces the prior `design_handoff_v0.9_curator/` snapshot. Same overall direction (sidebar + sectioned list, Meadow palette, Fraunces+Inter type), but with three additions and one bugfix:
+
+1. **Town Manager drawer** (`addons.jsx` → `TownManager`, `addons-styles.css`)
+   - Right-side drawer (420px wide) with scrim. Replaces the old town-switcher dropdown + Create/Edit modals.
+   - Row-level inline edit (name, game, hemisphere for ACNH). "+ New town" sticky CTA in the footer expands into the same form pattern.
+   - Active town shows accent border + filled radio mark.
+   - Mobile: collapses to a bottom sheet at ≤720px.
+   - **Wiring:** Replaces `CreateTownModal`, `EditTownModal`, and the `TownSwitcher` dropdown. Reads/writes `towns` and `activeTownId` from the existing Zustand store.
+
+2. **Sea Creatures tab** (already in v0.8.2 but visually styled here)
+   - Sidebar shows the Sea entry only when `activeTown.gameId === "acnh" || "acnl"`.
+   - Same row treatment as fish/bugs/fossils, with shadow size + time pill in the meta line.
+   - Slotted between Art and Stats.
+
+3. **Global Search dropdown** (`addons.jsx` → `GlobalSearchDropdown`)
+   - Anchored under the search input on Home only (`tab === "home"`). Other tabs keep per-tab inline filtering.
+   - Three states: empty (recent searches from `localStorage`), no-match, and grouped results.
+   - Grouped by category with colored dot + count. Each row: monogram glyph (category-tinted), name, meta line (habitat / value), donated badge.
+   - Keyboard nav: ↑↓ to move, ↵ to open, esc to close. Search history persisted to `ac-curator-search-history` (8 entries max).
+   - **Wiring:** Replaces the existing `GlobalSearchBar` + `GlobalSearchResults` + `SearchHistoryPopover` trio. Selecting a result jumps to that category's tab.
+
+4. **Bugfix: theme switching no longer tints all category icons green**
+   - `theme.js` was writing `--chip-bug` and `--chip-fossil` (singular) but the CSS reads `--chip-bugs` and `--chip-fossils` (plural). Fixed all four themes.
+   - Added `chipSea` token to every theme.
+
+## File map
+
+| File | Purpose |
+|---|---|
+| `Curator.html` | Entry point. Defaults, theme, and orchestration. |
+| `shell.jsx` | Sidebar, ProgressMeter |
+| `components.jsx` | Glyph, ItemRow, ExpandPanel, MonthStrip, MonthGrid, Pill, etc. |
+| `tabs.jsx` | HomeTab, CategoryTab, StatsTab |
+| `addons.jsx` | **NEW** — TownManager drawer + GlobalSearchDropdown |
+| `data.js` | Mock data (fish/bugs/fossils/art/sea, towns, recent activity) |
+| `theme.js` | 4 themes — Meadow (default), Parchment, Midnight, Sakura |
+| `styles.css` | Core styles |
+| `addons-styles.css` | **NEW** — drawer + dropdown styles |
+| `tweaks-panel.jsx` | In-page Tweaks panel (skip in production) |
+
+## Migration notes (delta from v0.9)
+
+- `useMuseumData` already takes a `gameId` — no change. Continue gating Sea on `gameId in {acnl, acnh}`.
+- The Town Manager drawer should mount at the **layout level** (above the router), not inside `ACCanvas`. This unblocks the v0.8.1 stopgap where Edit/Create buttons were greyed out on category tabs.
+- `GlobalSearchDropdown` should hook into the existing `useSearch` hook for debounce + history. Replace `SearchHistoryPopover` entirely; recent-search rendering moves into the dropdown's empty state.
+- All existing route paths preserved.
+
+## Themes
+
+Default: **Meadow**. Other three are progressive enhancement.
+
+| token | meadow | parchment |
+|---|---|---|
+| `accent` | `oklch(0.55 0.09 150)` (moss) | `#3CA370` (leaf) |
+| `chip-fish` | `oklch(0.62 0.08 230)` | `#3F6FA8` |
+| `chip-bugs` | `oklch(0.6 0.1 130)` | `#7B9C3A` |
+| `chip-fossils` | `oklch(0.55 0.06 60)` | `#7B5E3B` |
+| `chip-art` | `oklch(0.58 0.08 320)` | `#8B5E94` |
+| `chip-sea` | `oklch(0.58 0.09 200)` | `#3D8B96` |
+
+Category chip colors are **identity tokens** — they should remain consistent across all themes. Only `accent`, `bg`, `surface`, and `ink` shift between themes.
+
+## Fonts
+
+- Display: **Fraunces** (500/italic) — headers, titles, hero, monogram glyphs
+- UI: **Inter** (400/500/600) — everything else
+- Parchment theme overrides both to **Varela Round** to match the existing app
+
+## See also
+
+The v0.9 README in `design_handoff_v0.9_curator/README.md` has the full screen-by-screen spec — layouts, spacing, interaction notes. This bundle's components are the same shape; treat the v0.9 README as the canonical spec and this one as the diff.
diff --git a/docs/design-handoffs/v0.9.1_curator/addons-styles.css b/docs/design-handoffs/v0.9.1_curator/addons-styles.css
new file mode 100644
index 0000000..5a332e5
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/addons-styles.css
@@ -0,0 +1,280 @@
+/* ── Town Manager drawer ── */
+.ac-tm-scrim {
+  position: fixed; inset: 0; z-index: 9990;
+  background: rgba(20,18,12,0.32);
+  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+  display: flex; justify-content: flex-end;
+  animation: ac-fade 0.18s ease;
+}
+@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ac-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+.ac-tm-drawer {
+  width: 420px; max-width: 100vw;
+  background: var(--bg);
+  border-left: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  height: 100vh;
+  animation: ac-slide 0.22s ease;
+  box-shadow: -20px 0 60px rgba(0,0,0,0.08);
+}
+.ac-tm-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  padding: 22px 24px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-tm-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); }
+.ac-tm-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 4px 0 0; letter-spacing: -0.01em; max-width: 280px; }
+.ac-tm-close {
+  width: 32px; height: 32px; border-radius: 8px;
+  font-size: 22px; line-height: 1; color: var(--ink-muted);
+}
+.ac-tm-close:hover { background: var(--surface-alt); color: var(--ink); }
+
+.ac-tm-list { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
+
+.ac-tm-row {
+  display: flex; align-items: stretch;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: border-color 0.12s;
+}
+.ac-tm-row:hover { border-color: var(--border-strong); }
+.ac-tm-row-active { border-color: var(--accent); background: var(--accent-soft); }
+.ac-tm-row-main {
+  flex: 1; display: flex; gap: 14px; align-items: center;
+  padding: 14px 16px; text-align: left; min-width: 0;
+}
+.ac-tm-row-mark {
+  width: 18px; height: 18px; border-radius: 50%;
+  border: 1.5px solid;
+  display: grid; place-items: center;
+  flex: none;
+}
+.ac-tm-row-tick { color: var(--accent); font-size: 9px; }
+.ac-tm-row-text { flex: 1; min-width: 0; }
+.ac-tm-row-name { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
+.ac-tm-row-meta {
+  display: flex; gap: 6px; align-items: center;
+  font-size: 12px; color: var(--ink-soft); margin-top: 2px;
+  flex-wrap: wrap;
+}
+.ac-tm-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--ink-soft);
+}
+.ac-tm-row-active .ac-tm-badge { background: var(--surface); }
+
+.ac-tm-row-edit {
+  padding: 0 16px;
+  color: var(--ink-muted);
+  border-left: 1px solid var(--border);
+  display: grid; place-items: center;
+  transition: background 0.12s, color 0.12s;
+}
+.ac-tm-row-edit:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-tm-row-active .ac-tm-row-edit { border-left-color: var(--accent); }
+
+/* Editing state */
+.ac-tm-row-editing {
+  flex-direction: column;
+  background: var(--surface);
+  border-color: var(--border-strong);
+  padding: 18px;
+  gap: 14px;
+}
+.ac-tm-form { display: flex; flex-direction: column; gap: 12px; }
+.ac-tm-field { display: flex; flex-direction: column; gap: 4px; }
+.ac-tm-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-tm-input {
+  font: inherit; color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  outline: none;
+}
+.ac-tm-input:focus { border-color: var(--accent); }
+
+.ac-tm-seg {
+  display: flex; gap: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px;
+}
+.ac-tm-seg button {
+  flex: 1; padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--ink-soft);
+  transition: background 0.12s, color 0.12s;
+}
+.ac-tm-seg button:hover { color: var(--ink); }
+.ac-tm-seg button.ac-tm-seg-on {
+  background: var(--surface);
+  color: var(--accent-ink);
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+.ac-tm-row-actions {
+  display: flex; justify-content: space-between; gap: 8px;
+  padding-top: 8px; border-top: 1px solid var(--border);
+}
+.ac-tm-row-actions-right { display: flex; gap: 8px; }
+.ac-tm-ghost, .ac-tm-primary, .ac-tm-danger {
+  padding: 7px 14px; border-radius: 8px;
+  font-size: 13px; font-weight: 500;
+  transition: background 0.12s, opacity 0.12s;
+}
+.ac-tm-ghost { color: var(--ink-soft); }
+.ac-tm-ghost:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-tm-primary { background: var(--accent); color: var(--surface); }
+.ac-tm-primary:hover { opacity: 0.88; }
+.ac-tm-primary:disabled { opacity: 0.4; cursor: not-allowed; }
+.ac-tm-danger { color: var(--warn); }
+.ac-tm-danger:hover { background: var(--warn-soft); }
+
+.ac-tm-empty { padding: 60px 20px; text-align: center; color: var(--ink-muted); }
+.ac-tm-empty-glyph {
+  width: 56px; height: 56px; border-radius: 50%;
+  border: 1.5px dashed var(--border-strong);
+  margin: 0 auto 14px;
+  display: grid; place-items: center;
+  color: var(--ink-muted);
+  font-size: 24px;
+}
+.ac-tm-empty-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 4px; }
+.ac-tm-empty-sub { font-size: 13px; }
+
+.ac-tm-foot { padding: 14px 18px 22px; border-top: 1px solid var(--border); }
+.ac-tm-cta {
+  width: 100%;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1.5px dashed var(--border-strong);
+  border-radius: 12px;
+  color: var(--ink-soft);
+  font-weight: 500;
+  font-size: 14px;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+.ac-tm-cta:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
+.ac-tm-cta-plus { font-size: 18px; line-height: 1; }
+.ac-tm-newform { display: flex; flex-direction: column; gap: 8px; }
+.ac-tm-newform-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+
+/* Mobile: bottom sheet */
+@media (max-width: 720px) {
+  .ac-tm-scrim { align-items: flex-end; justify-content: center; }
+  .ac-tm-drawer {
+    width: 100%; height: 88vh;
+    border-left: none; border-top: 1px solid var(--border);
+    border-radius: 16px 16px 0 0;
+    animation: ac-slide-up 0.22s ease;
+  }
+  @keyframes ac-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+}
+
+/* ── Global Search dropdown ── */
+.ac-search-wrap { position: relative; flex: 1; max-width: 380px; }
+.ac-search-wrap .ac-search { max-width: none; }
+.ac-gs-panel {
+  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(20,18,12,0.10);
+  z-index: 50;
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 8px;
+  animation: ac-fade 0.12s ease;
+}
+.ac-gs-empty { padding: 22px 14px; text-align: center; }
+.ac-gs-empty-title { font-family: var(--font-display); font-size: 16px; color: var(--ink); margin-bottom: 4px; }
+.ac-gs-empty-title em { font-style: italic; color: var(--accent-ink); }
+.ac-gs-empty-sub { font-size: 12px; color: var(--ink-muted); }
+.ac-gs-hint { margin-top: 14px; font-size: 11px; color: var(--ink-muted); }
+
+.ac-gs-section-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 10px 6px;
+}
+.ac-gs-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--ink-muted); }
+.ac-gs-clear { font-size: 11px; color: var(--ink-muted); padding: 2px 6px; border-radius: 4px; }
+.ac-gs-clear:hover { background: var(--surface-alt); color: var(--ink); }
+
+.ac-gs-history { display: flex; flex-direction: column; gap: 1px; }
+.ac-gs-history-row {
+  display: flex; gap: 10px; align-items: center;
+  padding: 8px 12px; border-radius: 8px;
+  font-size: 13px; color: var(--ink-soft); text-align: left;
+}
+.ac-gs-history-row:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-gs-history-icon { color: var(--ink-muted); font-size: 12px; }
+
+.ac-gs-group { margin-bottom: 6px; }
+.ac-gs-group-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 10px 4px;
+}
+.ac-gs-group-dot { width: 6px; height: 6px; border-radius: 50%; }
+.ac-gs-group-count { margin-left: auto; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+.ac-gs-row {
+  width: 100%;
+  display: flex; gap: 12px; align-items: center;
+  padding: 8px 10px; border-radius: 8px;
+  text-align: left;
+  transition: background 0.1s;
+}
+.ac-gs-row:hover { background: var(--surface-alt); }
+.ac-gs-row-active { background: var(--accent-soft); }
+.ac-gs-row-glyph {
+  width: 28px; height: 28px;
+  border: 1.5px solid;
+  border-radius: 6px;
+  display: grid; place-items: center;
+  font-family: var(--font-display); font-size: 10px; font-weight: 500;
+  flex: none;
+}
+.ac-gs-row-text { flex: 1; min-width: 0; }
+.ac-gs-row-name {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 13px; color: var(--ink); font-weight: 500;
+}
+.ac-gs-row-donated {
+  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--accent); font-weight: 600;
+}
+.ac-gs-row-meta { font-size: 11px; color: var(--ink-muted); margin-top: 1px; text-transform: capitalize; }
+.ac-gs-row-arrow { color: var(--ink-muted); font-size: 11px; opacity: 0; }
+.ac-gs-row-active .ac-gs-row-arrow { opacity: 1; }
+
+.ac-gs-foot {
+  display: flex; gap: 14px; justify-content: center;
+  padding: 10px 8px 4px;
+  border-top: 1px solid var(--border);
+  margin-top: 6px;
+  font-size: 10px; color: var(--ink-muted);
+}
+kbd {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 1px 4px;
+  margin-right: 4px;
+}
diff --git a/docs/design-handoffs/v0.9.1_curator/addons.jsx b/docs/design-handoffs/v0.9.1_curator/addons.jsx
new file mode 100644
index 0000000..45a4e81
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/addons.jsx
@@ -0,0 +1,327 @@
+/* global React, ACComponents */
+const { useState, useEffect, useRef, useMemo } = React;
+
+// ── Town Manager: right-side drawer with switch / edit / create ──
+function TownManager({ open, onClose, towns, activeTownId, onActivate, onUpdate, onCreate, onDelete }) {
+  const [editingId, setEditingId] = useState(null);
+  const [creating, setCreating] = useState(false);
+  const drawerRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) { setEditingId(null); setCreating(false); }
+  }, [open]);
+
+  // ESC to close
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="ac-tm-scrim" onClick={onClose}>
+      <aside ref={drawerRef} className="ac-tm-drawer" onClick={e=>e.stopPropagation()} role="dialog" aria-label="Towns">
+        <header className="ac-tm-head">
+          <div>
+            <div className="ac-tm-eyebrow">Your towns</div>
+            <h2 className="ac-tm-title">Switch, edit, or add a town</h2>
+          </div>
+          <button className="ac-tm-close" onClick={onClose} aria-label="Close">×</button>
+        </header>
+
+        {towns.length === 0 && !creating && (
+          <div className="ac-tm-empty">
+            <div className="ac-tm-empty-glyph">○</div>
+            <div className="ac-tm-empty-title">No towns yet</div>
+            <div className="ac-tm-empty-sub">Create your first town to start tracking donations.</div>
+          </div>
+        )}
+
+        <div className="ac-tm-list">
+          {towns.map(t => (
+            <TownRow
+              key={t.id}
+              town={t}
+              active={t.id === activeTownId}
+              editing={editingId === t.id}
+              onActivate={()=>onActivate(t.id)}
+              onEditStart={()=>setEditingId(t.id)}
+              onEditCancel={()=>setEditingId(null)}
+              onSave={(patch)=>{ onUpdate(t.id, patch); setEditingId(null); }}
+              onDelete={()=>onDelete(t.id)}
+              canDelete={towns.length > 1}
+            />
+          ))}
+        </div>
+
+        <footer className="ac-tm-foot">
+          {creating ? (
+            <NewTownForm
+              onCancel={()=>setCreating(false)}
+              onCreate={(t)=>{ onCreate(t); setCreating(false); }}
+            />
+          ) : (
+            <button className="ac-tm-cta" onClick={()=>setCreating(true)}>
+              <span className="ac-tm-cta-plus">+</span>
+              <span>New town</span>
+            </button>
+          )}
+        </footer>
+      </aside>
+    </div>
+  );
+}
+
+const GAMES = [
+  { id: "acgcn", label: "GameCube",     short: "GCN" },
+  { id: "acww",  label: "Wild World",   short: "WW" },
+  { id: "accf",  label: "City Folk",    short: "CF" },
+  { id: "acnl",  label: "New Leaf",     short: "NL" },
+  { id: "acnh",  label: "New Horizons", short: "NH" },
+];
+
+function TownRow({ town, active, editing, onActivate, onEditStart, onEditCancel, onSave, onDelete, canDelete }) {
+  const [name, setName] = useState(town.name);
+  const [gameId, setGameId] = useState(town.gameId);
+  const [hemisphere, setHemisphere] = useState(town.hemisphere || "NH");
+  useEffect(() => { setName(town.name); setGameId(town.gameId); setHemisphere(town.hemisphere || "NH"); }, [town, editing]);
+
+  const game = GAMES.find(g => g.id === town.gameId);
+
+  if (editing) {
+    return (
+      <div className="ac-tm-row ac-tm-row-editing">
+        <div className="ac-tm-form">
+          <label className="ac-tm-field">
+            <span className="ac-tm-field-label">Town name</span>
+            <input className="ac-tm-input" value={name} onChange={e=>setName(e.target.value)} autoFocus />
+          </label>
+          <label className="ac-tm-field">
+            <span className="ac-tm-field-label">Game</span>
+            <select className="ac-tm-input" value={gameId} onChange={e=>setGameId(e.target.value)}>
+              {GAMES.map(g => <option key={g.id} value={g.id}>{g.label}</option>)}
+            </select>
+          </label>
+          {gameId === "acnh" && (
+            <label className="ac-tm-field">
+              <span className="ac-tm-field-label">Hemisphere</span>
+              <div className="ac-tm-seg">
+                <button className={hemisphere==="NH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("NH")}>Northern</button>
+                <button className={hemisphere==="SH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("SH")}>Southern</button>
+              </div>
+            </label>
+          )}
+        </div>
+        <div className="ac-tm-row-actions">
+          {canDelete && (
+            <button className="ac-tm-danger" onClick={()=>{ if (confirm(`Delete "${town.name}"? This can't be undone.`)) onDelete(); }}>Delete</button>
+          )}
+          <div className="ac-tm-row-actions-right">
+            <button className="ac-tm-ghost" onClick={onEditCancel}>Cancel</button>
+            <button className="ac-tm-primary" onClick={()=>onSave({ name, gameId, hemisphere: gameId === "acnh" ? hemisphere : null })}>Save</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`ac-tm-row ${active?"ac-tm-row-active":""}`}>
+      <button className="ac-tm-row-main" onClick={onActivate}>
+        <div className="ac-tm-row-mark" style={{borderColor: active ? "var(--accent)" : "var(--border-strong)"}}>
+          {active && <span className="ac-tm-row-tick">●</span>}
+        </div>
+        <div className="ac-tm-row-text">
+          <div className="ac-tm-row-name">{town.name}</div>
+          <div className="ac-tm-row-meta">
+            <span className="ac-tm-badge">{game?.short || "?"}</span>
+            <span>{game?.label}</span>
+            {town.hemisphere && <><span className="ac-dot-sep">·</span><span>Hem. {town.hemisphere}</span></>}
+            {town.itemCount != null && <><span className="ac-dot-sep">·</span><span>{town.itemCount} donated</span></>}
+          </div>
+        </div>
+      </button>
+      <button className="ac-tm-row-edit" onClick={onEditStart} aria-label="Edit town">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+          <path d="M11 2l3 3-9 9H2v-3l9-9z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+function NewTownForm({ onCancel, onCreate }) {
+  const [name, setName] = useState("");
+  const [gameId, setGameId] = useState("acnh");
+  const [hemisphere, setHemisphere] = useState("NH");
+  return (
+    <div className="ac-tm-newform">
+      <input className="ac-tm-input" autoFocus placeholder="Town name (e.g. Marigold)" value={name} onChange={e=>setName(e.target.value)} />
+      <select className="ac-tm-input" value={gameId} onChange={e=>setGameId(e.target.value)}>
+        {GAMES.map(g => <option key={g.id} value={g.id}>{g.label}</option>)}
+      </select>
+      {gameId === "acnh" && (
+        <div className="ac-tm-seg">
+          <button className={hemisphere==="NH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("NH")}>Northern</button>
+          <button className={hemisphere==="SH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("SH")}>Southern</button>
+        </div>
+      )}
+      <div className="ac-tm-newform-actions">
+        <button className="ac-tm-ghost" onClick={onCancel}>Cancel</button>
+        <button className="ac-tm-primary" disabled={!name.trim()} onClick={()=>onCreate({ name: name.trim(), gameId, hemisphere: gameId === "acnh" ? hemisphere : null })}>Create town</button>
+      </div>
+    </div>
+  );
+}
+
+// ── Global Search Dropdown ──
+const SEARCH_HISTORY_KEY = "ac-curator-search-history";
+function loadHistory() { try { return JSON.parse(localStorage.getItem(SEARCH_HISTORY_KEY) || "[]"); } catch { return []; } }
+function saveHistory(arr) { try { localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(arr.slice(0, 8))); } catch {} }
+
+function GlobalSearchDropdown({ query, data, donated, onJump, onClose }) {
+  const [history, setHistory] = useState(loadHistory());
+  const [activeIdx, setActiveIdx] = useState(0);
+
+  const grouped = useMemo(() => {
+    if (!query.trim()) return null;
+    const q = query.trim().toLowerCase();
+    const g = { fish:[], bugs:[], fossils:[], art:[] };
+    for (const cat of Object.keys(g)) {
+      g[cat] = data[cat].filter(it =>
+        it.name.toLowerCase().includes(q) ||
+        (it.basedOn||"").toLowerCase().includes(q)
+      ).slice(0, 5);
+    }
+    return g;
+  }, [query, data]);
+
+  const flatList = useMemo(() => {
+    if (!grouped) return [];
+    return ["fish","bugs","fossils","art"].flatMap(cat => grouped[cat].map(it => ({...it, _cat:cat})));
+  }, [grouped]);
+
+  useEffect(() => { setActiveIdx(0); }, [query]);
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") { e.preventDefault(); setActiveIdx(i => Math.min(i+1, flatList.length-1)); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); setActiveIdx(i => Math.max(i-1, 0)); }
+      else if (e.key === "Enter" && flatList[activeIdx]) {
+        const it = flatList[activeIdx];
+        commitSearch(it.name);
+        onJump(it._cat, it.id);
+      } else if (e.key === "Escape") { onClose(); }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [flatList, activeIdx, onJump, onClose]);
+
+  function commitSearch(term) {
+    const next = [term, ...history.filter(h => h !== term)].slice(0, 8);
+    setHistory(next); saveHistory(next);
+  }
+
+  function clearHistory() { setHistory([]); saveHistory([]); }
+
+  // Empty-input state: recent searches
+  if (!query.trim()) {
+    if (history.length === 0) {
+      return (
+        <div className="ac-gs-panel">
+          <div className="ac-gs-empty">
+            <div className="ac-gs-empty-title">Search across categories</div>
+            <div className="ac-gs-empty-sub">Type a name to find fish, bugs, fossils, or art at once.</div>
+            <div className="ac-gs-hint"><kbd>↑↓</kbd> navigate · <kbd>↵</kbd> open · <kbd>esc</kbd> close</div>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="ac-gs-panel">
+        <div className="ac-gs-section-head">
+          <span className="ac-gs-eyebrow">Recent searches</span>
+          <button className="ac-gs-clear" onClick={clearHistory}>Clear</button>
+        </div>
+        <div className="ac-gs-history">
+          {history.map((h,i) => (
+            <button key={i} className="ac-gs-history-row" onClick={()=>{ /* prefill — handled by parent via onJump('search',h) but simpler: set query */ window.dispatchEvent(new CustomEvent("ac-search-prefill", {detail: h})); }}>
+              <span className="ac-gs-history-icon">↻</span>
+              <span>{h}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // No matches
+  const total = flatList.length;
+  if (total === 0) {
+    return (
+      <div className="ac-gs-panel">
+        <div className="ac-gs-empty">
+          <div className="ac-gs-empty-title">No matches for "<em>{query}</em>"</div>
+          <div className="ac-gs-empty-sub">Try a shorter term or check the spelling.</div>
+        </div>
+      </div>
+    );
+  }
+
+  // Grouped results
+  let rowIdx = -1;
+  return (
+    <div className="ac-gs-panel">
+      {["fish","bugs","fossils","art"].map(cat => {
+        const items = grouped[cat];
+        if (items.length === 0) return null;
+        return (
+          <div key={cat} className="ac-gs-group">
+            <div className="ac-gs-group-head">
+              <span className="ac-gs-group-dot" style={{background:`var(--chip-${cat})`}}/>
+              <span className="ac-gs-eyebrow" style={{color:`var(--chip-${cat})`}}>{cat}</span>
+              <span className="ac-gs-group-count">{items.length}</span>
+            </div>
+            {items.map(it => {
+              rowIdx++;
+              const isActive = rowIdx === activeIdx;
+              const isDonated = donated[cat].has(it.id);
+              return (
+                <button
+                  key={it.id}
+                  className={`ac-gs-row ${isActive?"ac-gs-row-active":""}`}
+                  onClick={()=>{ commitSearch(it.name); onJump(cat, it.id); }}
+                >
+                  <div className="ac-gs-row-glyph" style={{borderColor:`var(--chip-${cat})`,color:`var(--chip-${cat})`}}>
+                    {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+                  </div>
+                  <div className="ac-gs-row-text">
+                    <div className="ac-gs-row-name">
+                      {it.name}
+                      {isDonated && <span className="ac-gs-row-donated">donated</span>}
+                    </div>
+                    <div className="ac-gs-row-meta">
+                      {it.habitat || it.location || it.part || it.basedOn || "—"}
+                      {it.value != null && <> · {it.value.toLocaleString()} ✦</>}
+                    </div>
+                  </div>
+                  <span className="ac-gs-row-arrow">↵</span>
+                </button>
+              );
+            })}
+          </div>
+        );
+      })}
+      <div className="ac-gs-foot">
+        <span><kbd>↑↓</kbd> navigate</span>
+        <span><kbd>↵</kbd> open</span>
+        <span><kbd>esc</kbd> close</span>
+      </div>
+    </div>
+  );
+}
+
+window.ACAddOns = { TownManager, GlobalSearchDropdown, GAMES };
diff --git a/docs/design-handoffs/v0.9.1_curator/components.jsx b/docs/design-handoffs/v0.9.1_curator/components.jsx
new file mode 100644
index 0000000..fad2e6d
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/components.jsx
@@ -0,0 +1,127 @@
+/* global React */
+const { useState, useMemo } = React;
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const MONTHS_LONG = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+// ── Glyph: a simple monogram tile, category-tinted. No copyrighted sprites. ──
+function Glyph({ name, category, donated }) {
+  const initials = name.split(/\s|-/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("").toUpperCase();
+  const tint = `var(--chip-${category})`;
+  return (
+    <div className="ac-glyph" style={{
+      background: donated ? tint : "transparent",
+      borderColor: tint,
+      color: donated ? "var(--surface)" : tint
+    }}>
+      <span>{initials}</span>
+    </div>);
+
+}
+
+function Pill({ children, tone = "default", size = "sm" }) {
+  return <span className={`ac-pill ac-pill-${tone} ac-pill-${size}`}>{children}</span>;
+}
+
+function MonthDots({ months, current }) {
+  return (
+    <div className="ac-monthdots" role="img" aria-label="Month availability">
+      {Array.from({ length: 12 }, (_, i) => {
+        const m = i + 1;
+        const on = months.includes(m);
+        const here = m === current;
+        return <span key={m} className={`ac-monthdot ${on ? "on" : ""} ${here ? "here" : ""}`} title={MONTHS[i]} />;
+      })}
+    </div>);
+
+}
+
+function MonthGrid({ months, current }) {
+  return (
+    <div className="ac-monthgrid">
+      {MONTHS.map((m, i) => {
+        const on = months.includes(i + 1);
+        const here = i + 1 === current;
+        return (
+          <div key={m} className={`ac-monthcell ${on ? "on" : ""} ${here ? "here" : ""}`}>
+            <span className="ac-monthcell-label">{m}</span>
+          </div>);
+
+      })}
+    </div>);
+
+}
+
+// ── Item row with inline expand panel ──
+function ItemRow({ item, category, donated, onToggle, currentMonth, expanded, onExpand }) {
+  const leavingSoon = item.months && item.months.includes(currentMonth) && !item.months.includes(currentMonth === 12 ? 1 : currentMonth + 1);
+  const newThisMonth = item.months && item.months.includes(currentMonth) && !item.months.includes(currentMonth === 1 ? 12 : currentMonth - 1);
+
+  return (
+    <div className={`ac-row ${expanded ? "ac-row-expanded" : ""} ${donated ? "ac-row-donated" : ""}`}>
+      <button className="ac-row-main" onClick={onExpand}>
+        <Glyph name={item.name} category={category} donated={donated} />
+        <div className="ac-row-text">
+          <div className="ac-row-name">
+            <span>{item.name}</span>
+            {donated && <span className="ac-row-checkmark" aria-label="donated">●</span>}
+          </div>
+          <div className="ac-row-meta">
+            {item.habitat && <span className="ac-row-meta-bit">{item.habitat.replace("-", " · ")}</span>}
+            {item.location && <span className="ac-row-meta-bit">{item.location}</span>}
+            {item.part && <span className="ac-row-meta-bit">{item.part}</span>}
+            {item.basedOn && <span className="ac-row-meta-bit ac-row-meta-italic">{item.basedOn}</span>}
+            {item.value != null && <span className="ac-row-meta-bit ac-row-meta-bells">{item.value.toLocaleString()} ✦</span>}
+          </div>
+        </div>
+        <div className="ac-row-side">
+          {leavingSoon && !donated && <Pill tone="warn">Leaving soon</Pill>}
+          {newThisMonth && !donated && !leavingSoon && <Pill tone="accent">New this month</Pill>}
+          {item.time && item.time !== "all day" && <span className="ac-row-time">{item.time}</span>}
+          <span className={`ac-chevron ${expanded ? "ac-chevron-open" : ""}`}>›</span>
+        </div>
+      </button>
+      {expanded &&
+      <div className="ac-expand">
+          {item.months &&
+        <div className="ac-expand-section">
+              <div className="ac-expand-label">Available in</div>
+              <MonthGrid months={item.months} current={currentMonth} />
+            </div>
+        }
+          <div className="ac-expand-side">
+            {item.value != null &&
+          <div className="ac-stat">
+                <div className="ac-stat-num">{item.value.toLocaleString()}</div>
+                <div className="ac-stat-label">bells · sell value</div>
+              </div>
+          }
+            {item.shadow &&
+          <div className="ac-stat">
+                <div className="ac-stat-num ac-stat-num-text">{item.shadow}</div>
+                <div className="ac-stat-label">shadow size</div>
+              </div>
+          }
+            {item.time &&
+          <div className="ac-stat">
+                <div className="ac-stat-num ac-stat-num-text">{item.time}</div>
+                <div className="ac-stat-label">active hours</div>
+              </div>
+          }
+            {item.notes &&
+          <div className="ac-note">{item.notes}</div>
+          }
+            <button
+            className={`ac-donate-btn ${donated ? "ac-donate-btn-on" : ""}`}
+            onClick={(e) => {e.stopPropagation();onToggle();}}>
+            
+              {donated ? "Donated ✓ — undonate" : "Mark as donated"}
+            </button>
+          </div>
+        </div>
+      }
+    </div>);
+
+}
+
+window.ACComponents = { Glyph, Pill, MonthDots, MonthGrid, ItemRow, MONTHS, MONTHS_LONG };
\ No newline at end of file
diff --git a/docs/design-handoffs/v0.9.1_curator/data.js b/docs/design-handoffs/v0.9.1_curator/data.js
new file mode 100644
index 0000000..4cf64aa
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/data.js
@@ -0,0 +1,121 @@
+// Sample museum data inspired by AC GCN/NH species lists.
+// Real-feeling enough for a prototype; no copyrighted sprite assets.
+window.MUSEUM_DATA = {
+  meta: {
+    townName: "Marigold",
+    playerName: "Bea",
+    game: "New Horizons",
+    hemisphere: "NH",
+    currentMonth: 5, // May
+    currentDay: 2,
+  },
+  fish: [
+    { id: "loach", name: "Loach", value: 400, habitat: "river", shadow: "small", time: "all day", months: [3,4,5] },
+    { id: "angelfish", name: "Angelfish", value: 3000, habitat: "river", shadow: "small", time: "4pm–9am", months: [5,6,7,8,9,10] },
+    { id: "cherry-salmon", name: "Cherry Salmon", value: 1000, habitat: "river", shadow: "medium", time: "4pm–9am", months: [3,4,5,6,9,10,11] },
+    { id: "barbel-steed", name: "Barbel Steed", value: 200, habitat: "river", shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "barred-knifejaw", name: "Barred Knifejaw", value: 5000, habitat: "ocean", shadow: "medium", time: "all day", months: [3,4,5,6,7,8,9,10,11] },
+    { id: "bass", name: "Black Bass", value: 400, habitat: "river", shadow: "large", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "bluegill", name: "Bluegill", value: 180, habitat: "river", shadow: "small", time: "9am–4pm", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "brook-trout", name: "Brook Trout", value: 150, habitat: "river-clifftop", shadow: "small", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "carp", name: "Carp", value: 300, habitat: "pond", shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "cherry-shrimp", name: "Cherry Shrimp", value: 600, habitat: "pond", shadow: "tiny", time: "all day", months: [4,5,6,7,8,9] },
+    { id: "clouded-cichlid", name: "Clouded Cichlid", value: 800, habitat: "river", shadow: "medium", time: "all day", months: [4,5,6,7,8,9,10] },
+    { id: "coelacanth", name: "Coelacanth", value: 15000, habitat: "ocean", shadow: "huge", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12], notes: "Only when raining or snowing" },
+    { id: "crawfish", name: "Crawfish", value: 200, habitat: "pond", shadow: "small", time: "all day", months: [4,5,6,7,8,9] },
+    { id: "crucian-carp", name: "Crucian Carp", value: 160, habitat: "river", shadow: "small", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "dace", name: "Dace", value: 240, habitat: "river", shadow: "medium", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "freshwater-goby", name: "Freshwater Goby", value: 400, habitat: "river", shadow: "small", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "frog", name: "Frog", value: 120, habitat: "pond", shadow: "small", time: "all day", months: [5,6,7,8] },
+    { id: "goldfish", name: "Goldfish", value: 1300, habitat: "pond", shadow: "tiny", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "guppy", name: "Guppy", value: 1300, habitat: "river", shadow: "tiny", time: "9am–4pm", months: [4,5,6,7,8,9,10,11] },
+    { id: "killifish", name: "Killifish", value: 300, habitat: "pond", shadow: "tiny", time: "all day", months: [4,5,6,7,8] },
+    { id: "koi", name: "Koi", value: 4000, habitat: "pond", shadow: "medium", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "ladybug", name: "Ladybug", value: 200, habitat: "pond", shadow: "tiny", time: "8am–5pm", months: [3,4,5,6,10] },
+    { id: "rainbow-trout", name: "Rainbow Trout", value: 800, habitat: "river-clifftop", shadow: "medium", time: "4pm–9am", months: [3,4,5,6,9,10,11] },
+    { id: "sea-bass", name: "Sea Bass", value: 400, habitat: "ocean", shadow: "large", time: "all day", months: [1,2,3,4,5,6,7,9,10,11,12] },
+    { id: "stringfish", name: "Stringfish", value: 15000, habitat: "river-clifftop", shadow: "huge", time: "4pm–9am", months: [12,1,2,3] },
+  ],
+  bugs: [
+    { id: "mole-cricket", name: "Mole Cricket", value: 500, location: "underground", time: "all day", months: [11,12,1,2,3,4,5] },
+    { id: "ant", name: "Ant", value: 80, location: "rotten food", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "bee", name: "Bee", value: 2500, location: "shaking trees", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "common-butterfly", name: "Common Butterfly", value: 160, location: "flying", time: "4am–7pm", months: [1,2,3,4,5,6,9,10,11,12] },
+    { id: "common-dragonfly", name: "Common Dragonfly", value: 180, location: "flying", time: "8am–7pm", months: [4,5,6,7,8,9,10] },
+    { id: "clouded-yellow", name: "Clouded Yellow Butterfly", value: 160, location: "flying", time: "4am–7pm", months: [3,4,5,6,9,10] },
+    { id: "cockroach", name: "Cockroach", value: 5, location: "underground", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "cricket", name: "Cricket", value: 130, location: "ground", time: "5pm–8am", months: [9,10,11] },
+    { id: "darner-dragonfly", name: "Darner Dragonfly", value: 230, location: "flying", time: "8am–5pm", months: [4,5,6,7,8,9,10] },
+    { id: "diving-beetle", name: "Diving Beetle", value: 800, location: "ponds", time: "8am–7pm", months: [5,6,7,8,9] },
+    { id: "earth-boring-beetle", name: "Earth-Boring Beetle", value: 300, location: "ground", time: "all day", months: [7,8,9,10,11] },
+    { id: "hermit-crab", name: "Hermit Crab", value: 1000, location: "beach", time: "7pm–8am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "honeybee", name: "Honeybee", value: 200, location: "flying", time: "8am–5pm", months: [3,4,5,6,7] },
+  ],
+  fossils: [
+    { id: "ammonite", name: "Ammonite", value: 1100 },
+    { id: "ankylo-skull", name: "Ankylo Skull", value: 6000 },
+    { id: "ankylo-tail", name: "Ankylo Tail", value: 2500 },
+    { id: "ankylo-torso", name: "Ankylo Torso", value: 5500 },
+    { id: "archaeopteryx", name: "Archaeopteryx", value: 1300 },
+    { id: "archelon-skull", name: "Archelon Skull", value: 4000 },
+    { id: "archelon-tail", name: "Archelon Tail", value: 3500 },
+    { id: "australopith", name: "Australopith", value: 1100 },
+    { id: "brachio-chest", name: "Brachio Chest", value: 5500 },
+    { id: "brachio-pelvis", name: "Brachio Pelvis", value: 5500 },
+    { id: "brachio-skull", name: "Brachio Skull", value: 6000 },
+    { id: "brachio-tail", name: "Brachio Tail", value: 5500 },
+    { id: "deinony-tail", name: "Deinony Tail", value: 2500 },
+    { id: "deinony-torso", name: "Deinony Torso", value: 5500 },
+    { id: "diplo-chest", name: "Diplo Chest", value: 5000 },
+    { id: "diplo-neck", name: "Diplo Neck", value: 2500 },
+    { id: "diplo-pelvis", name: "Diplo Pelvis", value: 4500 },
+    { id: "diplo-skull", name: "Diplo Skull", value: 5000 },
+    { id: "diplo-tail", name: "Diplo Tail", value: 2500 },
+  ],
+  art: [
+    { id: "academic", name: "Academic Painting", basedOn: "Vitruvian Man by Leonardo da Vinci", hasFake: true },
+    { id: "amazing", name: "Amazing Painting", basedOn: "The Night Watch by Rembrandt", hasFake: true },
+    { id: "basic", name: "Basic Painting", basedOn: "The Blue Boy by Thomas Gainsborough", hasFake: false },
+    { id: "calm", name: "Calm Painting", basedOn: "A Sunday Afternoon on La Grande Jatte by Georges Seurat", hasFake: false },
+    { id: "classic", name: "Classic Painting", basedOn: "Washington Crossing the Delaware by Emanuel Leutze", hasFake: true },
+    { id: "common", name: "Common Painting", basedOn: "The Gleaners by Jean-François Millet", hasFake: false },
+    { id: "dainty", name: "Dainty Painting", basedOn: "The Star — Dancer on Stage by Edgar Degas", hasFake: true },
+    { id: "famous", name: "Famous Painting", basedOn: "Mona Lisa by Leonardo da Vinci", hasFake: true },
+    { id: "flowery", name: "Flowery Painting", basedOn: "Sunflowers by Vincent van Gogh", hasFake: false },
+    { id: "graceful", name: "Graceful Painting", basedOn: "Beauty Looking Back by Hishikawa Moronobu", hasFake: true },
+    { id: "moving", name: "Moving Painting", basedOn: "The Birth of Venus by Sandro Botticelli", hasFake: true },
+    { id: "perfect", name: "Perfect Painting", basedOn: "The Apotheosis of Homer by Ingres", hasFake: false },
+    { id: "scary", name: "Scary Painting", basedOn: "The Great Wave off Kanagawa by Hokusai", hasFake: false },
+    { id: "warm", name: "Warm Painting", basedOn: "Et in Arcadia ego by Nicolas Poussin", hasFake: false },
+  ],
+  // Pre-seed donation state for realism
+  donated: {
+    fish: ["barbel-steed","bass","bluegill","brook-trout","carp","crucian-carp","dace","frog","goldfish","koi"],
+    bugs: ["ant","cockroach","common-butterfly","clouded-yellow","honeybee"],
+    fossils: ["ammonite","ankylo-skull","ankylo-tail","ankylo-torso","archaeopteryx","brachio-chest","brachio-pelvis","brachio-skull","brachio-tail","deinony-tail","diplo-chest","diplo-pelvis","diplo-skull"],
+    art: ["basic","calm","common","flowery","perfect","scary","warm"],
+    sea: ["seaweed","sea-anemone","scallop"],
+  },
+  towns: [
+    { id: "marigold", name: "Marigold", gameId: "acnh", hemisphere: "NH", itemCount: 35 },
+    { id: "saffron",  name: "Saffron",  gameId: "acgcn", hemisphere: null, itemCount: 12 },
+    { id: "willow",   name: "Willow",   gameId: "acnl", hemisphere: null, itemCount: 28 },
+  ],
+  sea: [
+    { id: "seaweed", name: "Seaweed", value: 600, shadow: "tiny", time: "all day", months: [10,11,12,1,2,3,4,5,6,7] },
+    { id: "sea-grapes", name: "Sea Grapes", value: 900, shadow: "tiny", time: "all day", months: [6,7,8,9] },
+    { id: "sea-anemone", name: "Sea Anemone", value: 500, shadow: "small", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "sea-pineapple", name: "Sea Pineapple", value: 1500, shadow: "small", time: "all day", months: [4,5,6,7,8] },
+    { id: "sea-cucumber", name: "Sea Cucumber", value: 500, shadow: "small", time: "all day", months: [11,12,1,2,3,4,5] },
+    { id: "spider-crab", name: "Spider Crab", value: 12000, shadow: "huge", time: "all day", months: [3,4] },
+    { id: "spotted-garden-eel", name: "Spotted Garden Eel", value: 1100, shadow: "small", time: "4am–9pm", months: [5,6,7,8,9,10] },
+    { id: "scallop", name: "Scallop", value: 1200, shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+  ],
+  recentActivity: [
+    { item: "Honeybee",      category: "bugs",    when: "2h ago"   },
+    { item: "Brook Trout",   category: "fish",    when: "yesterday"},
+    { item: "Brachio Chest", category: "fossils", when: "yesterday"},
+    { item: "Warm Painting", category: "art",     when: "3d ago"   },
+    { item: "Carp",          category: "fish",    when: "5d ago"   },
+  ],
+};
diff --git a/docs/design-handoffs/v0.9.1_curator/shell.jsx b/docs/design-handoffs/v0.9.1_curator/shell.jsx
new file mode 100644
index 0000000..3b6d0f7
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/shell.jsx
@@ -0,0 +1,117 @@
+/* global React, ACComponents */
+const { useState, useMemo } = React;
+const { Glyph, Pill, MonthDots, MonthGrid, ItemRow, MONTHS, MONTHS_LONG } = ACComponents;
+
+// ── Header / sidebar / shell ──
+function Sidebar({ town, currentTab, onTab, stats, onOpenTowns }) {
+  const hasSea = town.gameId === "acnh" || town.gameId === "acnl";
+  const tabs = [
+    { id: "home", label: "Home" },
+    { id: "fish", label: "Fish", n: stats.fish },
+    { id: "bugs", label: "Bugs", n: stats.bugs },
+    { id: "fossils", label: "Fossils", n: stats.fossils },
+    { id: "art", label: "Art", n: stats.art },
+    ...(hasSea ? [{ id: "sea", label: "Sea", n: stats.sea }] : []),
+    { id: "stats", label: "Stats" },
+  ];
+  return (
+    <aside className="ac-sidebar">
+      <div className="ac-brand">
+        <div className="ac-brand-mark">
+          <svg viewBox="0 0 32 32" width="22" height="22">
+            <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1.5"/>
+            <path d="M10 18 Q16 8 22 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            <circle cx="16" cy="20" r="1.6" fill="currentColor"/>
+          </svg>
+        </div>
+        <div className="ac-brand-text">
+          <div className="ac-brand-name">Curator</div>
+          <div className="ac-brand-sub">a museum companion</div>
+        </div>
+      </div>
+
+      <div className="ac-town-card">
+        <div className="ac-town-label">Active town</div>
+        <div className="ac-town-name">{town.townName}</div>
+        <div className="ac-town-meta">
+          <span>{town.game}</span>
+          <span className="ac-dot-sep">·</span>
+          <span>Hem. {town.hemisphere}</span>
+        </div>
+        <button className="ac-town-switch" onClick={onOpenTowns}>Switch town ›</button>
+      </div>
+
+      <nav className="ac-nav">
+        {tabs.map(t => (
+          <button
+            key={t.id}
+            className={`ac-nav-item ${currentTab===t.id?"ac-nav-item-active":""}`}
+            onClick={()=>onTab(t.id)}
+          >
+            <span>{t.label}</span>
+            {t.n && <span className="ac-nav-count">{t.n.donated}<span className="ac-nav-count-slash">/</span>{t.n.total}</span>}
+          </button>
+        ))}
+      </nav>
+
+      <div className="ac-sidebar-foot">
+        <button className="ac-foot-link">Export CSV</button>
+        <button className="ac-foot-link">Settings</button>
+      </div>
+    </aside>
+  );
+}
+
+function MonthStrip({ current }) {
+  return (
+    <div className="ac-monthstrip">
+      {MONTHS.map((m,i) => (
+        <div key={m} className={`ac-monthstrip-cell ${i+1===current?"is-now":""}`}>
+          <span className="ac-monthstrip-num">{String(i+1).padStart(2,"0")}</span>
+          <span className="ac-monthstrip-name">{m}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ProgressMeter({ stats }) {
+  const total = stats.fish.total + stats.bugs.total + stats.fossils.total + stats.art.total;
+  const done  = stats.fish.donated + stats.bugs.donated + stats.fossils.donated + stats.art.donated;
+  const pct = Math.round((done/total)*100);
+  return (
+    <div className="ac-meter">
+      <div className="ac-meter-head">
+        <div>
+          <div className="ac-meter-eyebrow">Museum progress</div>
+          <div className="ac-meter-num">
+            <span className="ac-meter-done">{done}</span>
+            <span className="ac-meter-of"> / {total}</span>
+          </div>
+        </div>
+        <div className="ac-meter-pct">{pct}<span className="ac-meter-pct-sym">%</span></div>
+      </div>
+      <div className="ac-meter-bar">
+        {["fish","bugs","fossils","art"].map(k => {
+          const seg = stats[k];
+          const frac = seg.total/total;
+          return (
+            <div key={k} className="ac-meter-seg" style={{flex: frac}}>
+              <div className="ac-meter-seg-fill" style={{
+                width: `${(seg.donated/seg.total)*100}%`,
+                background: `var(--chip-${k})`
+              }}/>
+              <div className="ac-meter-seg-label">
+                <span className="ac-meter-seg-dot" style={{background:`var(--chip-${k})`}}/>
+                <span>{k}</span>
+                <span className="ac-meter-seg-frac">{seg.donated}/{seg.total}</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+window.ACShell = { Sidebar, MonthStrip, ProgressMeter };
diff --git a/docs/design-handoffs/v0.9.1_curator/styles.css b/docs/design-handoffs/v0.9.1_curator/styles.css
new file mode 100644
index 0000000..4399b42
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/styles.css
@@ -0,0 +1,554 @@
+/* AC Curator — soft museum aesthetic */
+
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=Varela+Round&display=swap');
+
+:root {
+  --bg: #F4EFE3;
+  --surface: #FFFDF7;
+  --surface-alt: #F8F2E2;
+  --ink: #23241F;
+  --ink-soft: #5C5848;
+  --ink-muted: #8A8470;
+  --border: #E2D9C3;
+  --border-strong: #CFC4A8;
+  --accent: oklch(0.55 0.09 150);
+  --accent-soft: oklch(0.55 0.09 150 / 0.12);
+  --accent-ink: oklch(0.32 0.06 150);
+  --warn: oklch(0.62 0.12 50);
+  --warn-soft: oklch(0.62 0.12 50 / 0.14);
+  --chip-fish: oklch(0.62 0.08 230);
+  --chip-bugs: oklch(0.6 0.1 130);
+  --chip-fossils: oklch(0.55 0.06 60);
+  --chip-art: oklch(0.58 0.08 320);
+  --chip-sea: oklch(0.58 0.09 200);
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-ui: 'Inter', system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  font-family: var(--font-ui);
+  background: var(--bg);
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: -0.005em;
+}
+button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
+
+/* ── App shell ── */
+.ac-app {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  min-height: 100vh;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+/* ── Sidebar ── */
+.ac-sidebar {
+  border-right: 1px solid var(--border);
+  padding: 28px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+.ac-brand { display: flex; gap: 12px; align-items: center; color: var(--accent); }
+.ac-brand-mark {
+  width: 38px; height: 38px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  display: grid; place-items: center;
+}
+.ac-brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
+.ac-brand-sub { font-size: 11px; color: var(--ink-muted); font-style: italic; font-family: var(--font-display); }
+
+.ac-town-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px 16px;
+}
+.ac-town-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-town-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-top: 2px; letter-spacing: -0.01em; }
+.ac-town-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
+.ac-dot-sep { color: var(--border-strong); }
+.ac-town-switch {
+  font-size: 12px; color: var(--accent-ink); margin-top: 10px;
+  padding: 0; text-align: left; font-weight: 500;
+}
+.ac-town-switch:hover { text-decoration: underline; }
+
+.ac-nav { display: flex; flex-direction: column; gap: 1px; }
+.ac-nav-item {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding: 10px 14px; border-radius: 9px;
+  font-size: 14px; color: var(--ink-soft); text-align: left;
+  transition: background 0.12s;
+}
+.ac-nav-item:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-nav-item-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
+.ac-nav-count { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-nav-count-slash { opacity: 0.5; margin: 0 1px; }
+.ac-nav-item-active .ac-nav-count { color: var(--accent-ink); }
+
+.ac-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
+.ac-foot-link { padding: 6px 14px; font-size: 12px; color: var(--ink-muted); text-align: left; }
+.ac-foot-link:hover { color: var(--ink); }
+
+/* ── Main column ── */
+.ac-main {
+  padding: 32px 48px 80px;
+  min-width: 0;
+}
+.ac-topbar {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 28px; gap: 16px;
+}
+.ac-search {
+  flex: 1; max-width: 380px;
+  display: flex; align-items: center; gap: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 12px;
+}
+.ac-search:focus-within { border-color: var(--border-strong); }
+.ac-search input { border: none; background: none; outline: none; font: inherit; flex: 1; color: var(--ink); }
+.ac-search input::placeholder { color: var(--ink-muted); }
+.ac-search-icon { color: var(--ink-muted); }
+
+.ac-topbar-actions { display: flex; gap: 8px; align-items: center; }
+.ac-date-chip {
+  display: flex; align-items: baseline; gap: 6px;
+  padding: 6px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 12px;
+  color: var(--ink-soft);
+}
+.ac-date-chip strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
+
+/* ── Hero ── */
+.ac-hero { margin-bottom: 36px; }
+.ac-hero-eyebrow {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin-bottom: 8px;
+}
+.ac-hero-title {
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: 38px;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  margin: 0 0 24px;
+  text-wrap: pretty;
+  max-width: 720px;
+}
+.ac-hero-title em { font-style: italic; color: var(--accent-ink); font-weight: 500; }
+.ac-hero-aside { color: var(--warn); font-style: italic; font-size: 0.85em; }
+
+/* ── Month strip ── */
+.ac-monthstrip {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 8px;
+}
+.ac-monthstrip-cell {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 10px 4px;
+  border-radius: 8px;
+  position: relative;
+}
+.ac-monthstrip-num {
+  font-size: 10px; color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ac-monthstrip-name {
+  font-family: var(--font-display);
+  font-size: 14px;
+  margin-top: 2px;
+  color: var(--ink-soft);
+}
+.ac-monthstrip-cell.is-now {
+  background: var(--accent-soft);
+}
+.ac-monthstrip-cell.is-now .ac-monthstrip-num { color: var(--accent-ink); }
+.ac-monthstrip-cell.is-now .ac-monthstrip-name { color: var(--accent-ink); font-weight: 500; }
+
+/* ── Progress meter ── */
+.ac-meter {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 18px 22px;
+  margin-bottom: 36px;
+}
+.ac-meter-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 18px;
+}
+.ac-meter-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
+.ac-meter-num { font-family: var(--font-display); font-size: 32px; line-height: 1; margin-top: 4px; letter-spacing: -0.02em; }
+.ac-meter-done { font-weight: 500; }
+.ac-meter-of { color: var(--ink-muted); font-weight: 400; }
+.ac-meter-pct { font-family: var(--font-display); font-size: 44px; font-weight: 500; color: var(--accent-ink); letter-spacing: -0.03em; line-height: 1; }
+.ac-meter-pct-sym { font-size: 0.5em; vertical-align: top; margin-left: 2px; opacity: 0.7; }
+
+.ac-meter-bar {
+  display: flex;
+  gap: 10px;
+}
+.ac-meter-seg {
+  background: var(--surface-alt);
+  border-radius: 8px;
+  padding: 10px 12px;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+}
+.ac-meter-seg-fill {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  opacity: 0.18;
+  border-right: 2px solid currentColor;
+  z-index: 0;
+}
+.ac-meter-seg-label {
+  position: relative; z-index: 1;
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+.ac-meter-seg-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
+.ac-meter-seg-frac { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
+
+/* ── Shelf (cards row) ── */
+.ac-shelf { margin-bottom: 36px; }
+.ac-shelf-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
+.ac-shelf-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); }
+.ac-shelf-eyebrow-warn { color: var(--warn); }
+.ac-shelf-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 4px 0 0; letter-spacing: -0.01em; }
+.ac-shelf-count { font-family: var(--font-display); font-size: 28px; color: var(--ink-muted); font-weight: 400; }
+
+.ac-cards {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.ac-card {
+  display: flex; gap: 14px; align-items: flex-start;
+  padding: 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  text-align: left;
+  transition: border-color 0.12s, transform 0.12s;
+}
+.ac-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
+.ac-card-glyph {
+  width: 44px; height: 44px;
+  border: 1.5px solid;
+  border-radius: 10px;
+  display: grid; place-items: center;
+  font-family: var(--font-display); font-size: 14px; font-weight: 500;
+  flex: none;
+  background: repeating-linear-gradient(135deg, transparent 0 4px, currentColor 4px 5px);
+  background-blend-mode: overlay;
+}
+.ac-card-glyph::before {
+  content: attr(data-i);
+}
+.ac-card-body { flex: 1; min-width: 0; }
+.ac-card-name { font-weight: 500; color: var(--ink); margin-bottom: 2px; }
+.ac-card-meta { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; text-transform: capitalize; }
+.ac-card-warn { color: var(--warn); font-size: 18px; }
+
+/* ── Month dots (in cards) ── */
+.ac-monthdots { display: flex; gap: 3px; }
+.ac-monthdot {
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+}
+.ac-monthdot.on { background: var(--accent); border-color: var(--accent); opacity: 0.6; }
+.ac-monthdot.here.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--accent-soft); }
+.ac-monthdot.here:not(.on) { border-color: var(--ink-muted); }
+
+/* ── Activity ── */
+.ac-activity {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.ac-activity-row {
+  display: grid;
+  grid-template-columns: 12px 1fr auto auto;
+  gap: 12px; align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-activity-row:last-child { border-bottom: none; }
+.ac-activity-dot { width: 8px; height: 8px; border-radius: 50%; }
+.ac-activity-name { color: var(--ink); }
+.ac-activity-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-activity-when { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+/* ── Category groups ── */
+.ac-category-head {
+  display: flex; justify-content: space-between; align-items: flex-end;
+  margin-bottom: 24px; padding-bottom: 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-category-title {
+  font-family: var(--font-display); font-weight: 400;
+  font-size: 44px; letter-spacing: -0.02em; margin: 0;
+}
+.ac-category-title em { font-style: italic; color: var(--accent-ink); }
+.ac-category-meta { font-size: 13px; color: var(--ink-soft); text-align: right; }
+.ac-category-meta strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: 18px; display: block; }
+
+.ac-group { margin-bottom: 28px; }
+.ac-group-head {
+  display: flex; align-items: baseline; gap: 12px;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+.ac-group-title {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ink-soft);
+}
+.ac-group-warn .ac-group-title { color: var(--warn); }
+.ac-group-accent .ac-group-title { color: var(--accent-ink); }
+.ac-group-done .ac-group-title { color: var(--ink-muted); }
+.ac-group-count { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+.ac-list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* ── Item row ── */
+.ac-row { border-bottom: 1px solid var(--border); }
+.ac-row:last-child { border-bottom: none; }
+.ac-row-main {
+  display: flex; gap: 14px; align-items: center;
+  width: 100%;
+  padding: 12px 18px;
+  text-align: left;
+  transition: background 0.12s;
+}
+.ac-row-main:hover { background: var(--surface-alt); }
+.ac-row-expanded > .ac-row-main { background: var(--surface-alt); }
+.ac-row-donated .ac-row-name { color: var(--ink-muted); }
+.ac-row-donated .ac-row-name span:first-child { text-decoration: line-through; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; }
+
+.ac-glyph {
+  width: 32px; height: 32px;
+  border: 1.5px solid;
+  border-radius: 8px;
+  display: grid; place-items: center;
+  font-family: var(--font-display);
+  font-size: 11px; font-weight: 500;
+  flex: none;
+}
+.ac-row-text { flex: 1; min-width: 0; }
+.ac-row-name {
+  display: flex; align-items: center; gap: 8px;
+  font-weight: 500;
+}
+.ac-row-checkmark { color: var(--accent); font-size: 8px; }
+.ac-row-meta {
+  display: flex; gap: 0; font-size: 12px; color: var(--ink-muted);
+  margin-top: 2px;
+  flex-wrap: wrap;
+}
+.ac-row-meta-bit:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--border-strong); }
+.ac-row-meta-italic { font-style: italic; font-family: var(--font-display); }
+.ac-row-meta-bells { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.ac-row-side { display: flex; align-items: center; gap: 10px; flex: none; }
+.ac-row-time { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-chevron { color: var(--ink-muted); font-size: 18px; transition: transform 0.18s; line-height: 1; }
+.ac-chevron-open { transform: rotate(90deg); color: var(--ink); }
+
+/* ── Pills ── */
+.ac-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.ac-pill-warn { background: var(--warn-soft); color: var(--warn); }
+.ac-pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
+
+/* ── Expand panel ── */
+.ac-expand {
+  display: grid;
+  grid-template-columns: 1fr 240px;
+  gap: 28px;
+  padding: 4px 18px 22px 64px;
+  background: var(--surface-alt);
+  border-top: 1px solid var(--border);
+}
+.ac-expand-section { }
+.ac-expand-label {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin-bottom: 10px; margin-top: 14px;
+}
+.ac-monthgrid {
+  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
+}
+.ac-monthcell {
+  aspect-ratio: 1;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  display: grid; place-items: center;
+  position: relative;
+}
+.ac-monthcell-label {
+  font-size: 10px; color: var(--ink-muted);
+  font-family: var(--font-display);
+}
+.ac-monthcell.on { background: var(--accent-soft); border-color: var(--accent); }
+.ac-monthcell.on .ac-monthcell-label { color: var(--accent-ink); }
+.ac-monthcell.here { box-shadow: inset 0 0 0 1.5px var(--accent); }
+.ac-monthcell.here .ac-monthcell-label { font-weight: 600; }
+
+.ac-expand-side {
+  display: flex; flex-direction: column; gap: 10px;
+  padding-top: 14px;
+}
+.ac-stat {
+  display: flex; flex-direction: column; gap: 1px;
+}
+.ac-stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
+.ac-stat-num-text { font-size: 16px; }
+.ac-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-note {
+  font-size: 12px; color: var(--ink-soft); font-style: italic;
+  font-family: var(--font-display);
+  padding: 8px 10px;
+  background: var(--surface);
+  border-left: 2px solid var(--accent);
+  border-radius: 4px;
+}
+.ac-donate-btn {
+  margin-top: auto;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--surface);
+  font-weight: 500;
+  font-size: 13px;
+  transition: opacity 0.12s;
+}
+.ac-donate-btn:hover { opacity: 0.88; }
+.ac-donate-btn-on { background: var(--surface); color: var(--accent-ink); border: 1px solid var(--border-strong); }
+
+.ac-empty {
+  padding: 60px 0; text-align: center;
+  color: var(--ink-muted);
+  font-style: italic;
+  font-family: var(--font-display);
+}
+
+/* ── Stats ── */
+.ac-stats-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
+  margin-bottom: 36px;
+}
+.ac-statcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+}
+.ac-statcard-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
+.ac-statcard-num { font-family: var(--font-display); font-size: 32px; margin-top: 4px; letter-spacing: -0.02em; }
+.ac-statcard-of { color: var(--ink-muted); font-size: 0.6em; margin-left: 4px; }
+.ac-statcard-bar { height: 4px; background: var(--surface-alt); border-radius: 2px; overflow: hidden; margin-top: 10px; }
+.ac-statcard-fill { height: 100%; }
+.ac-statcard-pct { font-size: 11px; color: var(--ink-muted); margin-top: 6px; }
+
+.ac-chartcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px;
+}
+.ac-chart {
+  display: grid; grid-template-columns: repeat(12, 1fr);
+  gap: 6px;
+  height: 180px;
+  margin-top: 18px;
+  align-items: end;
+}
+.ac-chart-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
+.ac-chart-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
+.ac-chart-bar-bg {
+  width: 100%;
+  background: var(--surface-alt);
+  border-radius: 6px 6px 0 0;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-bottom: none;
+}
+.ac-chart-bar-fill {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  background: var(--accent);
+  opacity: 0.5;
+}
+.ac-chart-num { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.ac-chart-month { font-size: 11px; color: var(--ink-muted); font-family: var(--font-display); }
+.ac-chart-col.is-now .ac-chart-bar-bg { border-color: var(--accent); }
+.ac-chart-col.is-now .ac-chart-month { color: var(--accent-ink); font-weight: 600; }
+.ac-chart-legend {
+  display: flex; gap: 18px;
+  font-size: 11px; color: var(--ink-muted);
+  margin-top: 14px; padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.ac-chart-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
+.ac-chart-legend-dot-bg { background: var(--surface-alt); border: 1px solid var(--border); }
+.ac-chart-legend-dot-fill { background: var(--accent); opacity: 0.5; }
+
+/* ── Theme: parchment forces Varela ── */
+[data-theme="parchment"] .ac-hero-title em,
+[data-theme="parchment"] .ac-category-title em {
+  font-style: normal;
+}
+
+/* ── Responsive ── */
+@media (max-width: 980px) {
+  .ac-app { grid-template-columns: 1fr; }
+  .ac-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
+  .ac-main { padding: 24px 20px 60px; }
+  .ac-cards { grid-template-columns: 1fr; }
+  .ac-stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .ac-meter-bar { flex-wrap: wrap; }
+  .ac-expand { grid-template-columns: 1fr; padding-left: 18px; }
+  .ac-hero-title { font-size: 28px; }
+  .ac-monthstrip-name { font-size: 12px; }
+}
diff --git a/docs/design-handoffs/v0.9.1_curator/tabs.jsx b/docs/design-handoffs/v0.9.1_curator/tabs.jsx
new file mode 100644
index 0000000..8f311e2
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/tabs.jsx
@@ -0,0 +1,265 @@
+/* global React, ACComponents, ACShell */
+const { useState, useMemo } = React;
+const { ItemRow, Pill, MonthDots, MONTHS, MONTHS_LONG } = ACComponents;
+const { MonthStrip, ProgressMeter } = ACShell;
+
+// ── Home tab ──
+function HomeTab({ data, donated, currentMonth, onJump, onToggle, showLeavingShelf = true, showNewShelf = true }) {
+  const allItems = useMemo(() => [
+    ...data.fish.map(x=>({...x, _cat:"fish"})),
+    ...data.bugs.map(x=>({...x, _cat:"bugs"})),
+  ], [data]);
+
+  const leavingSoon = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth === 12 ? 1 : currentMonth+1) &&
+    !donated[it._cat].has(it.id)
+  );
+
+  const newThisMonth = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth === 1 ? 12 : currentMonth-1) &&
+    !donated[it._cat].has(it.id)
+  );
+
+  const stillNeeded = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) && !donated[it._cat].has(it.id)
+  ).length;
+
+  return (
+    <div className="ac-home">
+      <div className="ac-hero">
+        <div className="ac-hero-eyebrow">Available in {MONTHS_LONG[currentMonth-1]}</div>
+        <h1 className="ac-hero-title">
+          <em>{stillNeeded}</em> creatures still to donate this month.
+          {leavingSoon.length > 0 && <><br/><span className="ac-hero-aside">{leavingSoon.length} are leaving soon.</span></>}
+        </h1>
+        <MonthStrip current={currentMonth} />
+      </div>
+
+      <ProgressMeter stats={{
+        fish: { donated: donated.fish.size, total: data.fish.length },
+        bugs: { donated: donated.bugs.size, total: data.bugs.length },
+        fossils: { donated: donated.fossils.size, total: data.fossils.length },
+        art: { donated: donated.art.size, total: data.art.length },
+      }} />
+
+      {showLeavingShelf && leavingSoon.length > 0 && (
+        <section className="ac-shelf">
+          <div className="ac-shelf-head">
+            <div>
+              <div className="ac-shelf-eyebrow ac-shelf-eyebrow-warn">Leaving end of month</div>
+              <h2 className="ac-shelf-title">Catch these before {MONTHS_LONG[currentMonth-1]} ends</h2>
+            </div>
+            <span className="ac-shelf-count">{leavingSoon.length}</span>
+          </div>
+          <div className="ac-cards">
+            {leavingSoon.slice(0,6).map(it => (
+              <button key={it._cat+it.id} className="ac-card" onClick={()=>onJump(it._cat, it.id)}>
+                <div className="ac-card-glyph" style={{borderColor:`var(--chip-${it._cat})`,color:`var(--chip-${it._cat})`}}>
+                  {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+                </div>
+                <div className="ac-card-body">
+                  <div className="ac-card-name">{it.name}</div>
+                  <div className="ac-card-meta">
+                    <span style={{color:`var(--chip-${it._cat})`}}>{it._cat}</span>
+                    <span> · {it.value.toLocaleString()} ✦</span>
+                  </div>
+                  <MonthDots months={it.months} current={currentMonth} />
+                </div>
+                <div className="ac-card-warn">⚠</div>
+              </button>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {showNewShelf && newThisMonth.length > 0 && (
+      <section className="ac-shelf">
+        <div className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Just arrived</div>
+            <h2 className="ac-shelf-title">New this month</h2>
+          </div>
+          <span className="ac-shelf-count">{newThisMonth.length}</span>
+        </div>
+        <div className="ac-cards">
+          {newThisMonth.slice(0,6).map(it => (
+            <button key={it._cat+it.id} className="ac-card" onClick={()=>onJump(it._cat, it.id)}>
+              <div className="ac-card-glyph" style={{borderColor:`var(--chip-${it._cat})`,color:`var(--chip-${it._cat})`}}>
+                {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+              </div>
+              <div className="ac-card-body">
+                <div className="ac-card-name">{it.name}</div>
+                <div className="ac-card-meta">
+                  <span style={{color:`var(--chip-${it._cat})`}}>{it._cat}</span>
+                  <span> · {it.value.toLocaleString()} ✦</span>
+                </div>
+                <MonthDots months={it.months} current={currentMonth} />
+              </div>
+            </button>
+          ))}
+        </div>
+      </section>
+      )}
+
+      <section className="ac-shelf">
+        <div className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Recent</div>
+            <h2 className="ac-shelf-title">Latest donations</h2>
+          </div>
+        </div>
+        <div className="ac-activity">
+          {data.recentActivity.map((a,i) => (
+            <div key={i} className="ac-activity-row">
+              <div className="ac-activity-dot" style={{background:`var(--chip-${a.category})`}}/>
+              <div className="ac-activity-name">{a.item}</div>
+              <div className="ac-activity-cat">{a.category}</div>
+              <div className="ac-activity-when">{a.when}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// ── Category tab (sectioned list) ──
+function CategoryTab({ category, items, donated, onToggle, currentMonth, search }) {
+  const [expanded, setExpanded] = useState(null);
+
+  const lowered = search.trim().toLowerCase();
+  const filtered = lowered
+    ? items.filter(i => i.name.toLowerCase().includes(lowered) || (i.basedOn||"").toLowerCase().includes(lowered))
+    : items;
+
+  const isAvail = (it) => it.months ? it.months.includes(currentMonth) : true;
+  const isLeavingSoon = (it) => it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth===12?1:currentMonth+1);
+
+  const groups = useMemo(() => {
+    const leaving = [], avail = [], done = [], locked = [];
+    for (const it of filtered) {
+      const isDonated = donated.has(it.id);
+      if (isDonated) done.push(it);
+      else if (isLeavingSoon(it)) leaving.push(it);
+      else if (isAvail(it)) avail.push(it);
+      else locked.push(it);
+    }
+    const byName = (a,b)=>a.name.localeCompare(b.name);
+    return [
+      { id: "leaving", label: "Leaving this month", items: leaving.sort(byName), tone: "warn" },
+      { id: "avail",   label: "Available now",       items: avail.sort(byName),   tone: "accent" },
+      { id: "locked",  label: "Out of season",       items: locked.sort(byName),  tone: "muted" },
+      { id: "done",    label: "Already donated",     items: done.sort(byName),    tone: "done" },
+    ].filter(g => g.items.length > 0);
+  }, [filtered, donated, currentMonth]);
+
+  return (
+    <div className="ac-category">
+      {groups.map(g => (
+        <section key={g.id} className={`ac-group ac-group-${g.tone}`}>
+          <header className="ac-group-head">
+            <h3 className="ac-group-title">{g.label}</h3>
+            <span className="ac-group-count">{g.items.length}</span>
+          </header>
+          <div className="ac-list">
+            {g.items.map(it => (
+              <ItemRow
+                key={it.id}
+                item={it}
+                category={category}
+                donated={donated.has(it.id)}
+                onToggle={()=>onToggle(it.id)}
+                currentMonth={currentMonth}
+                expanded={expanded === it.id}
+                onExpand={()=>setExpanded(expanded===it.id?null:it.id)}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+      {groups.length === 0 && (
+        <div className="ac-empty">No matches for "{search}"</div>
+      )}
+    </div>
+  );
+}
+
+// ── Stats tab ──
+function StatsTab({ data, donated, currentMonth }) {
+  const counts = {
+    fish: { donated: donated.fish.size, total: data.fish.length },
+    bugs: { donated: donated.bugs.size, total: data.bugs.length },
+    fossils: { donated: donated.fossils.size, total: data.fossils.length },
+    art: { donated: donated.art.size, total: data.art.length },
+  };
+
+  // monthly bars: how many fish+bugs available per month
+  const monthlyAvail = MONTHS.map((_, i) => {
+    const m = i+1;
+    let avail = 0, donatedCount = 0;
+    for (const cat of ["fish","bugs"]) {
+      for (const it of data[cat]) {
+        if (it.months && it.months.includes(m)) {
+          avail++;
+          if (donated[cat].has(it.id)) donatedCount++;
+        }
+      }
+    }
+    return { avail, donatedCount, m };
+  });
+  const maxAvail = Math.max(...monthlyAvail.map(x=>x.avail));
+
+  return (
+    <div className="ac-stats">
+      <div className="ac-stats-grid">
+        {Object.entries(counts).map(([k,v]) => (
+          <div key={k} className="ac-statcard">
+            <div className="ac-statcard-cat" style={{color:`var(--chip-${k})`}}>{k}</div>
+            <div className="ac-statcard-num">
+              <span>{v.donated}</span>
+              <span className="ac-statcard-of">/ {v.total}</span>
+            </div>
+            <div className="ac-statcard-bar">
+              <div className="ac-statcard-fill" style={{
+                width: `${(v.donated/v.total)*100}%`,
+                background:`var(--chip-${k})`
+              }}/>
+            </div>
+            <div className="ac-statcard-pct">{Math.round((v.donated/v.total)*100)}% complete</div>
+          </div>
+        ))}
+      </div>
+
+      <section className="ac-chartcard">
+        <header className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Yearly rhythm</div>
+            <h2 className="ac-shelf-title">Fish &amp; bug availability by month</h2>
+          </div>
+        </header>
+        <div className="ac-chart">
+          {monthlyAvail.map(({avail, donatedCount, m}, i) => (
+            <div key={m} className={`ac-chart-col ${m===currentMonth?"is-now":""}`}>
+              <div className="ac-chart-bar">
+                <div className="ac-chart-bar-bg" style={{height: `${(avail/maxAvail)*100}%`}}>
+                  <div className="ac-chart-bar-fill" style={{height: `${(donatedCount/avail)*100}%`}}/>
+                </div>
+              </div>
+              <div className="ac-chart-num">{avail}</div>
+              <div className="ac-chart-month">{MONTHS[i]}</div>
+            </div>
+          ))}
+        </div>
+        <div className="ac-chart-legend">
+          <span><span className="ac-chart-legend-dot ac-chart-legend-dot-bg"/>Available</span>
+          <span><span className="ac-chart-legend-dot ac-chart-legend-dot-fill"/>Already donated</span>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+window.ACTabs = { HomeTab, CategoryTab, StatsTab };
diff --git a/docs/design-handoffs/v0.9.1_curator/theme.js b/docs/design-handoffs/v0.9.1_curator/theme.js
new file mode 100644
index 0000000..3d903b1
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/theme.js
@@ -0,0 +1,105 @@
+// Theme tokens. Exposed as CSS variables on :root via setTheme().
+window.THEMES = {
+  meadow: {
+    label: "Meadow",
+    bg: "#F4EFE3",
+    surface: "#FFFDF7",
+    surfaceAlt: "#F8F2E2",
+    ink: "#23241F",
+    inkSoft: "#5C5848",
+    inkMuted: "#8A8470",
+    border: "#E2D9C3",
+    borderStrong: "#CFC4A8",
+    accent: "oklch(0.55 0.09 150)", // moss
+    accentSoft: "oklch(0.55 0.09 150 / 0.12)",
+    accentInk: "oklch(0.32 0.06 150)",
+    warn: "oklch(0.62 0.12 50)", // clay
+    warnSoft: "oklch(0.62 0.12 50 / 0.14)",
+    chipFish: "oklch(0.62 0.08 230)",
+    chipBugs: "oklch(0.6 0.1 130)",
+    chipFossils: "oklch(0.55 0.06 60)",
+    chipArt: "oklch(0.58 0.08 320)",
+    chipSea: "oklch(0.58 0.09 200)",
+    fontDisplay: "'Fraunces', 'Playfair Display', Georgia, serif",
+    fontUi: "'Inter', system-ui, -apple-system, sans-serif",
+  },
+  parchment: {
+    label: "Parchment (current)",
+    bg: "#EFE6D0",
+    surface: "#F5E9D4",
+    surfaceAlt: "#EADCBE",
+    ink: "#2A2A2A",
+    inkSoft: "#5a4a35",
+    inkMuted: "#8B7A5C",
+    border: "#E0D2B0",
+    borderStrong: "#C9B98D",
+    accent: "#3CA370",
+    accentSoft: "rgba(60,163,112,0.14)",
+    accentInk: "#1F5A3C",
+    warn: "#C76B3F",
+    warnSoft: "rgba(199,107,63,0.16)",
+    chipFish: "#3F6FA8",
+    chipBugs: "#7B9C3A",
+    chipFossils: "#7B5E3B",
+    chipArt: "#8B5E94",
+    chipSea: "#3D8B96",
+    fontDisplay: "'Varela Round', system-ui, sans-serif",
+    fontUi: "'Varela Round', system-ui, sans-serif",
+  },
+  midnight: {
+    label: "Midnight",
+    bg: "#16181F",
+    surface: "#1E212A",
+    surfaceAlt: "#262A35",
+    ink: "#EFEAE0",
+    inkSoft: "#B5AE9E",
+    inkMuted: "#7E7866",
+    border: "#2F3340",
+    borderStrong: "#3D4250",
+    accent: "oklch(0.7 0.09 150)",
+    accentSoft: "oklch(0.7 0.09 150 / 0.16)",
+    accentInk: "oklch(0.85 0.06 150)",
+    warn: "oklch(0.72 0.12 50)",
+    warnSoft: "oklch(0.72 0.12 50 / 0.18)",
+    chipFish: "oklch(0.72 0.09 230)",
+    chipBugs: "oklch(0.74 0.09 130)",
+    chipFossils: "oklch(0.7 0.06 60)",
+    chipArt: "oklch(0.72 0.08 320)",
+    chipSea: "oklch(0.74 0.08 200)",
+    fontDisplay: "'Fraunces', Georgia, serif",
+    fontUi: "'Inter', system-ui, sans-serif",
+  },
+  sakura: {
+    label: "Sakura",
+    bg: "#FBF0EE",
+    surface: "#FFFCFB",
+    surfaceAlt: "#F7E5E1",
+    ink: "#2C2228",
+    inkSoft: "#705661",
+    inkMuted: "#9C8590",
+    border: "#EFD9D3",
+    borderStrong: "#DEBDB4",
+    accent: "oklch(0.6 0.11 10)", // rose
+    accentSoft: "oklch(0.6 0.11 10 / 0.12)",
+    accentInk: "oklch(0.4 0.09 10)",
+    warn: "oklch(0.6 0.13 50)",
+    warnSoft: "oklch(0.6 0.13 50 / 0.14)",
+    chipFish: "oklch(0.6 0.08 230)",
+    chipBugs: "oklch(0.6 0.09 130)",
+    chipFossils: "oklch(0.55 0.06 60)",
+    chipArt: "oklch(0.58 0.08 320)",
+    chipSea: "oklch(0.6 0.08 200)",
+    fontDisplay: "'Fraunces', Georgia, serif",
+    fontUi: "'Inter', system-ui, sans-serif",
+  },
+};
+
+window.applyTheme = function applyTheme(name) {
+  const t = window.THEMES[name] || window.THEMES.meadow;
+  const root = document.documentElement;
+  for (const [k, v] of Object.entries(t)) {
+    if (k === "label") continue;
+    root.style.setProperty(`--${k.replace(/([A-Z])/g, "-$1").toLowerCase()}`, v);
+  }
+  root.dataset.theme = name;
+};
diff --git a/docs/design-handoffs/v0.9.1_curator/tweaks-panel.jsx b/docs/design-handoffs/v0.9.1_curator/tweaks-panel.jsx
new file mode 100644
index 0000000..5f8f95a
--- /dev/null
+++ b/docs/design-handoffs/v0.9.1_curator/tweaks-panel.jsx
@@ -0,0 +1,425 @@
+
+// tweaks-panel.jsx
+// Reusable Tweaks shell + form-control helpers.
+//
+// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
+// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
+// individual prototypes don't re-roll it. Ships a consistent set of controls so you
+// don't hand-draw <input type="range">, segmented radios, steppers, etc.
+//
+// Usage (in an HTML file that loads React + Babel):
+//
+//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+//     "primaryColor": "#D97757",
+//     "fontSize": 16,
+//     "density": "regular",
+//     "dark": false
+//   }/*EDITMODE-END*/;
+//
+//   function App() {
+//     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+//     return (
+//       <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
+//         Hello
+//         <TweaksPanel>
+//           <TweakSection label="Typography" />
+//           <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
+//                        onChange={(v) => setTweak('fontSize', v)} />
+//           <TweakRadio  label="Density" value={t.density}
+//                        options={['compact', 'regular', 'comfy']}
+//                        onChange={(v) => setTweak('density', v)} />
+//           <TweakSection label="Theme" />
+//           <TweakColor  label="Primary" value={t.primaryColor}
+//                        onChange={(v) => setTweak('primaryColor', v)} />
+//           <TweakToggle label="Dark mode" value={t.dark}
+//                        onChange={(v) => setTweak('dark', v)} />
+//         </TweaksPanel>
+//       </div>
+//     );
+//   }
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+const __TWEAKS_STYLE = `
+  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
+    max-height:calc(100vh - 32px);display:flex;flex-direction:column;
+    background:rgba(250,249,247,.78);color:#29261b;
+    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
+    border:.5px solid rgba(255,255,255,.6);border-radius:14px;
+    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
+    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
+  .twk-hd{display:flex;align-items:center;justify-content:space-between;
+    padding:10px 8px 10px 14px;cursor:move;user-select:none}
+  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
+  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
+    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
+  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
+  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
+    overflow-y:auto;overflow-x:hidden;min-height:0;
+    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
+  .twk-body::-webkit-scrollbar{width:8px}
+  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
+  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
+    border:2px solid transparent;background-clip:content-box}
+  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
+    border:2px solid transparent;background-clip:content-box}
+  .twk-row{display:flex;flex-direction:column;gap:5px}
+  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
+  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
+    color:rgba(41,38,27,.72)}
+  .twk-lbl>span:first-child{font-weight:500}
+  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
+
+  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+    color:rgba(41,38,27,.45);padding:10px 0 0}
+  .twk-sect:first-child{padding-top:0}
+
+  .twk-field{appearance:none;width:100%;height:26px;padding:0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
+    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
+  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
+  select.twk-field{padding-right:22px;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
+    background-repeat:no-repeat;background-position:right 8px center}
+
+  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
+    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
+  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
+    width:14px;height:14px;border-radius:50%;background:#fff;
+    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
+    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+
+  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
+    background:rgba(0,0,0,.06);user-select:none}
+  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
+    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
+    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
+  .twk-seg.dragging .twk-seg-thumb{transition:none}
+  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
+    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
+    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
+    overflow-wrap:anywhere}
+
+  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
+    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
+  .twk-toggle[data-on="1"]{background:#34c759}
+  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
+
+  .twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
+  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
+    user-select:none;padding-right:8px}
+  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
+    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
+    outline:none;color:inherit;-moz-appearance:textfield}
+  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
+    -webkit-appearance:none;margin:0}
+  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
+
+  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
+    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
+  .twk-btn:hover{background:rgba(0,0,0,.88)}
+  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
+  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
+
+  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
+    background:transparent;flex-shrink:0}
+  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
+  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
+  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
+`;
+
+// ── useTweaks ───────────────────────────────────────────────────────────────
+// Single source of truth for tweak values. setTweak persists via the host
+// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
+function useTweaks(defaults) {
+  const [values, setValues] = React.useState(defaults);
+  // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
+  // useState-style call doesn't write a "[object Object]" key into the persisted
+  // JSON block.
+  const setTweak = React.useCallback((keyOrEdits, val) => {
+    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
+      ? keyOrEdits : { [keyOrEdits]: val };
+    setValues((prev) => ({ ...prev, ...edits }));
+    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
+  }, []);
+  return [values, setTweak];
+}
+
+// ── TweaksPanel ─────────────────────────────────────────────────────────────
+// Floating shell. Registers the protocol listener BEFORE announcing
+// availability — if the announce ran first, the host's activate could land
+// before our handler exists and the toolbar toggle would silently no-op.
+// The close button posts __edit_mode_dismissed so the host's toolbar toggle
+// flips off in lockstep; the host echoes __deactivate_edit_mode back which
+// is what actually hides the panel.
+function TweaksPanel({ title = 'Tweaks', children }) {
+  const [open, setOpen] = React.useState(false);
+  const dragRef = React.useRef(null);
+  const offsetRef = React.useRef({ x: 16, y: 16 });
+  const PAD = 16;
+
+  const clampToViewport = React.useCallback(() => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const w = panel.offsetWidth, h = panel.offsetHeight;
+    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
+    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
+    offsetRef.current = {
+      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
+      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
+    };
+    panel.style.right = offsetRef.current.x + 'px';
+    panel.style.bottom = offsetRef.current.y + 'px';
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) return;
+    clampToViewport();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', clampToViewport);
+      return () => window.removeEventListener('resize', clampToViewport);
+    }
+    const ro = new ResizeObserver(clampToViewport);
+    ro.observe(document.documentElement);
+    return () => ro.disconnect();
+  }, [open, clampToViewport]);
+
+  React.useEffect(() => {
+    const onMsg = (e) => {
+      const t = e?.data?.type;
+      if (t === '__activate_edit_mode') setOpen(true);
+      else if (t === '__deactivate_edit_mode') setOpen(false);
+    };
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+
+  const dismiss = () => {
+    setOpen(false);
+    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
+  };
+
+  const onDragStart = (e) => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const r = panel.getBoundingClientRect();
+    const sx = e.clientX, sy = e.clientY;
+    const startRight = window.innerWidth - r.right;
+    const startBottom = window.innerHeight - r.bottom;
+    const move = (ev) => {
+      offsetRef.current = {
+        x: startRight - (ev.clientX - sx),
+        y: startBottom - (ev.clientY - sy),
+      };
+      clampToViewport();
+    };
+    const up = () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  };
+
+  if (!open) return null;
+  return (
+    <>
+      <style>{__TWEAKS_STYLE}</style>
+      <div ref={dragRef} className="twk-panel" data-noncommentable=""
+           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
+        <div className="twk-hd" onMouseDown={onDragStart}>
+          <b>{title}</b>
+          <button className="twk-x" aria-label="Close tweaks"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={dismiss}>✕</button>
+        </div>
+        <div className="twk-body">{children}</div>
+      </div>
+    </>
+  );
+}
+
+// ── Layout helpers ──────────────────────────────────────────────────────────
+
+function TweakSection({ label, children }) {
+  return (
+    <>
+      <div className="twk-sect">{label}</div>
+      {children}
+    </>
+  );
+}
+
+function TweakRow({ label, value, children, inline = false }) {
+  return (
+    <div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
+      <div className="twk-lbl">
+        <span>{label}</span>
+        {value != null && <span className="twk-val">{value}</span>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Controls ────────────────────────────────────────────────────────────────
+
+function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
+  return (
+    <TweakRow label={label} value={`${value}${unit}`}>
+      <input type="range" className="twk-slider" min={min} max={max} step={step}
+             value={value} onChange={(e) => onChange(Number(e.target.value))} />
+    </TweakRow>
+  );
+}
+
+function TweakToggle({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
+              role="switch" aria-checked={!!value}
+              onClick={() => onChange(!value)}><i /></button>
+    </div>
+  );
+}
+
+function TweakRadio({ label, value, options, onChange }) {
+  const trackRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
+  const idx = Math.max(0, opts.findIndex((o) => o.value === value));
+  const n = opts.length;
+
+  // The active value is read by pointer-move handlers attached for the lifetime
+  // of a drag — ref it so a stale closure doesn't fire onChange for every move.
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+
+  const segAt = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const inner = r.width - 4;
+    const i = Math.floor(((clientX - r.left - 2) / inner) * n);
+    return opts[Math.max(0, Math.min(n - 1, i))].value;
+  };
+
+  const onPointerDown = (e) => {
+    setDragging(true);
+    const v0 = segAt(e.clientX);
+    if (v0 !== valueRef.current) onChange(v0);
+    const move = (ev) => {
+      if (!trackRef.current) return;
+      const v = segAt(ev.clientX);
+      if (v !== valueRef.current) onChange(v);
+    };
+    const up = () => {
+      setDragging(false);
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+
+  return (
+    <TweakRow label={label}>
+      <div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
+           className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
+        <div className="twk-seg-thumb"
+             style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
+                      width: `calc((100% - 4px) / ${n})` }} />
+        {opts.map((o) => (
+          <button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
+            {o.label}
+          </button>
+        ))}
+      </div>
+    </TweakRow>
+  );
+}
+
+function TweakSelect({ label, value, options, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
+        {options.map((o) => {
+          const v = typeof o === 'object' ? o.value : o;
+          const l = typeof o === 'object' ? o.label : o;
+          return <option key={v} value={v}>{l}</option>;
+        })}
+      </select>
+    </TweakRow>
+  );
+}
+
+function TweakText({ label, value, placeholder, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <input className="twk-field" type="text" value={value} placeholder={placeholder}
+             onChange={(e) => onChange(e.target.value)} />
+    </TweakRow>
+  );
+}
+
+function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
+  const clamp = (n) => {
+    if (min != null && n < min) return min;
+    if (max != null && n > max) return max;
+    return n;
+  };
+  const startRef = React.useRef({ x: 0, val: 0 });
+  const onScrubStart = (e) => {
+    e.preventDefault();
+    startRef.current = { x: e.clientX, val: value };
+    const decimals = (String(step).split('.')[1] || '').length;
+    const move = (ev) => {
+      const dx = ev.clientX - startRef.current.x;
+      const raw = startRef.current.val + dx * step;
+      const snapped = Math.round(raw / step) * step;
+      onChange(clamp(Number(snapped.toFixed(decimals))));
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+  return (
+    <div className="twk-num">
+      <span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
+      <input type="number" value={value} min={min} max={max} step={step}
+             onChange={(e) => onChange(clamp(Number(e.target.value)))} />
+      {unit && <span className="twk-num-unit">{unit}</span>}
+    </div>
+  );
+}
+
+function TweakColor({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <input type="color" className="twk-swatch" value={value}
+             onChange={(e) => onChange(e.target.value)} />
+    </div>
+  );
+}
+
+function TweakButton({ label, onClick, secondary = false }) {
+  return (
+    <button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
+            onClick={onClick}>{label}</button>
+  );
+}
+
+Object.assign(window, {
+  useTweaks, TweaksPanel, TweakSection, TweakRow,
+  TweakSlider, TweakToggle, TweakRadio, TweakSelect,
+  TweakText, TweakNumber, TweakColor, TweakButton,
+});
diff --git a/docs/design-handoffs/v0.9.2_curator/Curator.html b/docs/design-handoffs/v0.9.2_curator/Curator.html
new file mode 100644
index 0000000..dabe78c
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/Curator.html
@@ -0,0 +1,296 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Curator — AC Museum Tracker</title>
+<link rel="stylesheet" href="styles.css" />
+<link rel="stylesheet" href="addons-styles.css" />
+</head>
+<body>
+<div id="root"></div>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+
+<script src="data.js"></script>
+<script src="theme.js"></script>
+<script type="text/babel" src="components.jsx"></script>
+<script type="text/babel" src="shell.jsx"></script>
+<script type="text/babel" src="tabs.jsx"></script>
+<script type="text/babel" src="addons.jsx"></script>
+<script type="text/babel" src="tweaks-panel.jsx"></script>
+
+<script type="text/babel">
+const { useState, useMemo, useEffect } = React;
+const { Sidebar } = window.ACShell;
+const { HomeTab, CategoryTab, StatsTab } = window.ACTabs;
+const { TownManager, GlobalSearchDropdown, SettingsPage } = window.ACAddOns;
+const { MONTHS_LONG } = window.ACComponents;
+const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakSlider, useTweaks } = window;
+
+const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "theme": "meadow",
+  "currentMonth": 7,
+  "showLeavingShelf": true,
+  "showNewShelf": true,
+  "compactRows": false,
+  "hideDonated": false
+}/*EDITMODE-END*/;
+
+function App() {
+  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
+  const data = window.MUSEUM_DATA;
+  const [tab, setTab] = useState("home");
+  const [search, setSearch] = useState("");
+
+  // donated state — sets per category
+  const [donated, setDonated] = useState({
+    fish: new Set(data.donated.fish),
+    bugs: new Set(data.donated.bugs),
+    fossils: new Set(data.donated.fossils),
+    art: new Set(data.donated.art),
+    sea: new Set(data.donated.sea || []),
+  });
+
+  // Towns + active town state
+  const [towns, setTowns] = useState(data.towns);
+  const [activeTownId, setActiveTownId] = useState(towns[0].id);
+  const activeTown = towns.find(t => t.id === activeTownId) || towns[0];
+  const [townMgrOpen, setTownMgrOpen] = useState(false);
+  const [searchFocused, setSearchFocused] = useState(false);
+  const [highlightId, setHighlightId] = useState(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  useEffect(() => {
+    const onPrefill = (e) => setSearch(e.detail);
+    window.addEventListener("ac-search-prefill", onPrefill);
+    return () => window.removeEventListener("ac-search-prefill", onPrefill);
+  }, []);
+
+  useEffect(() => { window.applyTheme(tweaks.theme); }, [tweaks.theme]);
+
+  function toggleDonated(cat, id) {
+    setDonated(prev => {
+      const next = { ...prev };
+      const s = new Set(prev[cat]);
+      if (s.has(id)) s.delete(id); else s.add(id);
+      next[cat] = s;
+      return next;
+    });
+  }
+
+  const stats = {
+    fish:    { donated: donated.fish.size,    total: data.fish.length },
+    bugs:    { donated: donated.bugs.size,    total: data.bugs.length },
+    fossils: { donated: donated.fossils.size, total: data.fossils.length },
+    art:     { donated: donated.art.size,     total: data.art.length },
+    sea:     { donated: donated.sea.size,     total: (data.sea||[]).length },
+  };
+
+  const currentMonth = tweaks.currentMonth;
+
+  function jumpTo(cat, id) {
+    setTab(cat);
+    if (id) setHighlightId(id);
+  }
+
+  // Filter donated rows out if hideDonated tweak is on
+  const filteredCat = (cat) => {
+    if (!tweaks.hideDonated) return data[cat];
+    return data[cat].filter(it => !donated[cat].has(it.id));
+  };
+
+  return (
+    <div className="ac-app" data-compact={tweaks.compactRows ? "true" : "false"}>
+      <Sidebar
+        town={{...data.meta, gameId: activeTown.gameId, townName: activeTown.name, hemisphere: activeTown.hemisphere || data.meta.hemisphere}}
+        currentTab={tab}
+        onTab={(t)=>{ setSettingsOpen(false); setTab(t); }}
+        stats={stats}
+        onOpenTowns={()=>setTownMgrOpen(true)}
+        onOpenSettings={()=>setSettingsOpen(true)}
+      />
+
+      <main className="ac-main">
+        <div className="ac-topbar">
+          <div className="ac-search-wrap">
+            <div className="ac-search">
+              <svg className="ac-search-icon" width="14" height="14" viewBox="0 0 16 16" fill="none">
+                <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.4"/>
+                <path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
+              </svg>
+              <input
+                placeholder={tab === "home" ? "Search across categories…" : `Search ${tab}…`}
+                value={search}
+                onChange={e=>setSearch(e.target.value)}
+                onFocus={()=>setSearchFocused(true)}
+                onBlur={()=>setTimeout(()=>setSearchFocused(false), 180)}
+              />
+            </div>
+            {tab === "home" && searchFocused && (
+              <GlobalSearchDropdown
+                query={search}
+                data={data}
+                donated={donated}
+                onJump={(cat, id)=>{ setTab(cat); setHighlightId(id); setSearch(""); setSearchFocused(false); }}
+                onClose={()=>setSearchFocused(false)}
+              />
+            )}
+          </div>
+          <div className="ac-topbar-actions">
+            <div className="ac-date-chip">
+              <span>Sat</span>
+              <strong>May {data.meta.currentDay}</strong>
+            </div>
+          </div>
+        </div>
+
+        {!settingsOpen && tab === "home" && (
+          <HomeTab
+            data={{...data,
+              recentActivity: data.recentActivity,
+            }}
+            donated={donated}
+            currentMonth={currentMonth}
+            gameId={activeTown.gameId}
+            onJump={jumpTo}
+            onToggle={toggleDonated}
+            showLeavingShelf={tweaks.showLeavingShelf}
+            showNewShelf={tweaks.showNewShelf}
+          />
+        )}
+
+        {!settingsOpen && ["fish","bugs","fossils","art","sea"].includes(tab) && (
+          <>
+            <header className="ac-category-head">
+              <h1 className="ac-category-title">
+                <em>{stats[tab].donated}</em> of {stats[tab].total} {tab}
+              </h1>
+              <div className="ac-category-meta">
+                <strong>{Math.round((stats[tab].donated/stats[tab].total)*100)}% complete</strong>
+                {tab !== "art" && tab !== "fossils" && `Showing availability for ${MONTHS_LONG[currentMonth-1]}`}
+              </div>
+            </header>
+            <CategoryTab
+              category={tab}
+              items={filteredCat(tab)}
+              donated={donated[tab]}
+              onToggle={(id)=>toggleDonated(tab, id)}
+              currentMonth={currentMonth}
+              search={search}
+              highlightId={highlightId}
+              onHighlightConsumed={()=>setHighlightId(null)}
+            />
+          </>
+        )}
+
+        {settingsOpen ? (
+          <SettingsPage
+            open={settingsOpen}
+            onClose={()=>setSettingsOpen(false)}
+            theme={tweaks.theme}
+            onThemeChange={(v)=>setTweak("theme", v)}
+            townCount={towns.length}
+            totalDonations={Object.values(donated).reduce((a,s)=>a+s.size,0)}
+            onResetDonations={()=>{
+              if (!confirm("Reset all donations for this town? This cannot be undone.")) return;
+              setDonated({ fish:new Set(), bugs:new Set(), fossils:new Set(), art:new Set(), sea:new Set() });
+            }}
+            onResetAll={()=>{
+              if (!confirm("Reset EVERYTHING — all towns, donations, and history? This cannot be undone.")) return;
+              setDonated({ fish:new Set(), bugs:new Set(), fossils:new Set(), art:new Set(), sea:new Set() });
+              setTowns([data.towns[0]]);
+              setActiveTownId(data.towns[0].id);
+              try { localStorage.removeItem("ac-curator-search-history"); } catch {}
+            }}
+          />
+        ) : null}
+
+        {!settingsOpen && tab === "stats" && (
+          <>
+            <header className="ac-category-head">
+              <h1 className="ac-category-title"><em>Stats</em> &amp; rhythms</h1>
+              <div className="ac-category-meta">
+                <strong>{data.meta.townName}</strong>
+                {data.meta.game}
+              </div>
+            </header>
+            <StatsTab data={data} donated={donated} currentMonth={currentMonth} />
+          </>
+        )}
+      </main>
+
+      <TownManager
+        open={townMgrOpen}
+        onClose={()=>setTownMgrOpen(false)}
+        towns={towns}
+        activeTownId={activeTownId}
+        onActivate={(id)=>{ setActiveTownId(id); setTownMgrOpen(false); }}
+        onUpdate={(id, patch)=>setTowns(ts => ts.map(t => t.id === id ? {...t, ...patch} : t))}
+        onCreate={(t)=>{ const id = t.name.toLowerCase().replace(/\s+/g,"-")+"-"+Date.now().toString(36).slice(-4); setTowns(ts => [...ts, {...t, id, itemCount: 0}]); setActiveTownId(id); }}
+        onDelete={(id)=>{ setTowns(ts => ts.filter(t => t.id !== id)); if (activeTownId === id) setActiveTownId(towns.find(t=>t.id!==id).id); }}
+      />
+
+      <TweaksPanel title="Tweaks">
+        <TweakSection title="Theme">
+          <TweakSelect
+            label="Palette"
+            value={tweaks.theme}
+            onChange={v => setTweak("theme", v)}
+            options={[
+              { value: "meadow",     label: "Meadow (default)" },
+              { value: "parchment",  label: "Parchment (current app)" },
+              { value: "midnight",   label: "Midnight" },
+              { value: "sakura",     label: "Sakura" },
+            ]}
+          />
+        </TweakSection>
+
+        <TweakSection title="Time">
+          <TweakSlider
+            label={`Current month — ${MONTHS_LONG[tweaks.currentMonth-1]}`}
+            value={tweaks.currentMonth}
+            onChange={v => setTweak("currentMonth", v)}
+            min={1} max={12} step={1}
+          />
+        </TweakSection>
+
+        <TweakSection title="Layout">
+          <TweakToggle
+            label="Show 'Leaving soon' shelf"
+            value={tweaks.showLeavingShelf}
+            onChange={v => setTweak("showLeavingShelf", v)}
+          />
+          <TweakToggle
+            label="Show 'New this month' shelf"
+            value={tweaks.showNewShelf}
+            onChange={v => setTweak("showNewShelf", v)}
+          />
+          <TweakToggle
+            label="Hide donated items in lists"
+            value={tweaks.hideDonated}
+            onChange={v => setTweak("hideDonated", v)}
+          />
+          <TweakToggle
+            label="Compact row density"
+            value={tweaks.compactRows}
+            onChange={v => setTweak("compactRows", v)}
+          />
+        </TweakSection>
+      </TweaksPanel>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+</script>
+
+<style id="__compact-density">
+[data-compact="true"] .ac-row-main { padding: 8px 18px; }
+[data-compact="true"] .ac-row-meta { display: none; }
+[data-compact="true"] .ac-glyph { width: 26px; height: 26px; font-size: 10px; }
+</style>
+</body>
+</html>
diff --git a/docs/design-handoffs/v0.9.2_curator/README.md b/docs/design-handoffs/v0.9.2_curator/README.md
new file mode 100644
index 0000000..6e99f6e
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/README.md
@@ -0,0 +1,147 @@
+# Curator v0.9.2 — pass 3 delta
+
+Three design items resolved on top of v0.9.1. **Read v0.9 + v0.9.1 READMEs first** for the foundational design language; this doc only covers what's new.
+
+---
+
+## 1. ProgressMeter — 5-segment for ACNL/ACNH
+
+**File:** `shell.jsx` → `ProgressMeter`
+
+Now derives its segment list from `gameId`:
+- ACGCN / ACWW / ACCF → 4 segments (fish, bugs, fossils, art)
+- ACNL / ACNH → **5 segments** (+ sea, color `--chip-sea`)
+
+Both the segment fill **and** the label-row dot use `--chip-sea` — confirmed.
+
+### Responsive behavior
+
+The 5-segment bar is tighter, so we shed details progressively as width drops. Container width here = the main content column (sidebar adds ~248px).
+
+| Viewport | 5-seg behavior |
+|---|---|
+| ≥1180px | Full labels: dot · name · `n/total` fraction. 8px gap (vs. 10px on 4-seg). |
+| 980–1180px | Drop the fractions; keep dot + name. Tighter padding (7px 8px). |
+| ≤980px | **Wrap to 2 rows**: 2.5 segments per row at `flex-basis: calc(50% - 3px)`. Fractions return because there's room again. |
+
+Implemented as `.ac-meter-5` modifier class; 4-seg is unchanged.
+
+### What to verify
+
+- [ ] At ~1280px viewport: 5 labels read cleanly, sea dot uses `--chip-sea`.
+- [ ] At ~1100px: fractions hidden, names + dots stay legible.
+- [ ] At mobile (~390px): 5 segments wrap to 2 rows, visually balanced.
+
+---
+
+## 2. Scroll-to + highlight on jump
+
+**Files:** `components.jsx` (`ItemRow`), `tabs.jsx` (`CategoryTab`), `Curator.html` (App)
+
+### Spec
+
+When a Home shelf card or global search result is clicked, the target row is:
+1. **Scrolled into view** — `scrollIntoView({ behavior: 'smooth', block: 'center' })`
+2. **Auto-expanded** — the inline detail panel opens, so the user sees full context (months, value, donate button) without a second click.
+3. **Highlighted** — `accent-soft` background pulse via the `.ac-row-pulse` keyframe, **1.4s ease-out**, then fades to the row's normal expanded background (`--surface-alt`).
+
+Behavior is identical on mobile (≤980px). Smooth scroll + 1.4s pulse work fine at small widths; no separate codepath needed.
+
+### Wiring
+
+- `App` owns `highlightId` state.
+- Setters: `jumpTo(cat, id)` (Home cards) and `onJump` in `GlobalSearchDropdown` both `setTab(cat) + setHighlightId(id)`.
+- `CategoryTab` receives `highlightId` + `onHighlightConsumed`. On change, it sets `expanded = highlightId`, waits a frame for the row to render, then queries `[data-row-id="…"]`, scrolls + adds `.ac-row-pulse`, and clears the parent state via `onHighlightConsumed` so re-clicking the same item triggers the effect again.
+- `ItemRow` now stamps `data-row-id={item.id}` on its outer div.
+
+### CSS
+
+```css
+.ac-row-pulse > .ac-row-main { animation: ac-row-pulse 1.4s ease-out; }
+@keyframes ac-row-pulse {
+  0%   { background: var(--accent-soft); }
+  60%  { background: color-mix(in oklch, var(--accent) 16%, transparent); }
+  100% { background: var(--surface-alt); }
+}
+```
+
+---
+
+## 3. Settings page
+
+**File:** `addons.jsx` → `SettingsPage`. Styles in `addons-styles.css`.
+
+### Navigation pattern
+
+**Full-page route inside the main column** — not a modal, not a drawer. When `settingsOpen=true`, the main column renders `<SettingsPage>` instead of the active tab. The sidebar stays in place (active town card + nav still visible), and any tab click closes settings via `onTab` in `Curator.html`.
+
+Why full-page over modal/drawer:
+- Theme cards need horizontal real estate (4-up grid at desktop).
+- Danger zone needs breathing room — destructive actions deserve calm typography, not a cramped modal footer.
+- About / version info reads naturally as a top-level "page" the same way Stats does.
+- `Esc` still closes (consistent with modal expectation), bound inside `SettingsPage`.
+
+Activated by the **Settings** link in the sidebar footer.
+
+### Sections (in order)
+
+**1. Appearance — Theme switcher**
+
+Visual treatment: **swatch cards** (4-up auto-fill grid). Each card:
+- 76px swatch row showing `surface · bg · accent · chipFish` to give a real preview.
+- Name + 1-line subtitle ("Default — moss + cream", "Cozy paper + wood", etc.).
+- Active state: `--accent` border + 3px `--accent-soft` halo + `●` checkmark next to the name.
+
+Selection persists via the existing Tweaks `theme` key — `onThemeChange={(v) => setTweak("theme", v)}`. No new persistence layer.
+
+I picked swatch cards over a segmented control or radio list because:
+- Themes are visual; a list of words ("Meadow / Parchment / …") doesn't preview the change.
+- Cards scale gracefully — adding a 5th theme later doesn't blow up the layout.
+- Matches Curator's "cards on a soft surface" language elsewhere (shelf cards, town cards, stat cards).
+
+**2. About**
+
+Plain dl/dt/dd list inside a single card:
+- Version (v0.9.2-alpha · Curator)
+- Source (GitHub link, opens in new tab)
+- Storage (live: town count + total donations)
+- Credits ("Companion app for the Animal Crossing series. Not affiliated with Nintendo.")
+
+**3. Danger zone**
+
+Red-tinted card (`oklch(0.62 0.12 25)` family). Two actions stacked:
+- **Reset donations for active town** — quiet ghost button. Confirms via native `confirm()`. Real implementation should use a styled confirm dialog.
+- **Reset everything** — solid red button. Wipes towns, donations, and search history.
+
+Both actions in the demo go through `confirm()` placeholders; production should wire a proper styled confirm dialog (out of scope for this design pass).
+
+### Responsive
+
+- Theme grid auto-fills `minmax(200px, 1fr)`, collapses cleanly on phones.
+- About list switches to single column at ≤700px.
+- Danger rows stack with full-width buttons at ≤700px.
+- Title shrinks 56→40px.
+
+---
+
+## Confirmations applied
+
+- **GlobalSearchDropdown** now includes a 5th `sea` group, same row treatment as the others. Empty group is hidden, like before.
+- **`basedOn` matching** confirmed in the existing search filter (`it.basedOn.toLowerCase().includes(q)`) — "Leonardo" surfaces *Famous Painting*. No change needed.
+- **`playerName`** — was never referenced in the v0.9 design. Safe to deprecate from the Town type without touching the design files.
+
+---
+
+## Files changed in this pass
+
+| File | What changed |
+|---|---|
+| `shell.jsx` | `ProgressMeter` now takes `gameId`, renders 4 or 5 segments accordingly |
+| `tabs.jsx` | `HomeTab` accepts `gameId` and passes through; `CategoryTab` accepts `highlightId` + handles scroll/expand/pulse effect; sea is included in shelves for ACNH/ACNL |
+| `components.jsx` | `ItemRow` stamps `data-row-id` for scroll targeting |
+| `addons.jsx` | `GlobalSearchDropdown` extended to include sea; new `SettingsPage` component |
+| `Curator.html` | App owns `highlightId` + `settingsOpen` state; wires `jumpTo` + sidebar Settings link |
+| `styles.css` | `.ac-meter-5` responsive rules; `.ac-row-pulse` keyframe |
+| `addons-styles.css` | All Settings page styles |
+
+No data shape changes. No new dependencies.
diff --git a/docs/design-handoffs/v0.9.2_curator/addons-styles.css b/docs/design-handoffs/v0.9.2_curator/addons-styles.css
new file mode 100644
index 0000000..4a9927b
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/addons-styles.css
@@ -0,0 +1,409 @@
+/* ── Town Manager drawer ── */
+.ac-tm-scrim {
+  position: fixed; inset: 0; z-index: 9990;
+  background: rgba(20,18,12,0.32);
+  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+  display: flex; justify-content: flex-end;
+  animation: ac-fade 0.18s ease;
+}
+@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ac-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+.ac-tm-drawer {
+  width: 420px; max-width: 100vw;
+  background: var(--bg);
+  border-left: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  height: 100vh;
+  animation: ac-slide 0.22s ease;
+  box-shadow: -20px 0 60px rgba(0,0,0,0.08);
+}
+.ac-tm-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  padding: 22px 24px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-tm-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); }
+.ac-tm-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 4px 0 0; letter-spacing: -0.01em; max-width: 280px; }
+.ac-tm-close {
+  width: 32px; height: 32px; border-radius: 8px;
+  font-size: 22px; line-height: 1; color: var(--ink-muted);
+}
+.ac-tm-close:hover { background: var(--surface-alt); color: var(--ink); }
+
+.ac-tm-list { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
+
+.ac-tm-row {
+  display: flex; align-items: stretch;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: border-color 0.12s;
+}
+.ac-tm-row:hover { border-color: var(--border-strong); }
+.ac-tm-row-active { border-color: var(--accent); background: var(--accent-soft); }
+.ac-tm-row-main {
+  flex: 1; display: flex; gap: 14px; align-items: center;
+  padding: 14px 16px; text-align: left; min-width: 0;
+}
+.ac-tm-row-mark {
+  width: 18px; height: 18px; border-radius: 50%;
+  border: 1.5px solid;
+  display: grid; place-items: center;
+  flex: none;
+}
+.ac-tm-row-tick { color: var(--accent); font-size: 9px; }
+.ac-tm-row-text { flex: 1; min-width: 0; }
+.ac-tm-row-name { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
+.ac-tm-row-meta {
+  display: flex; gap: 6px; align-items: center;
+  font-size: 12px; color: var(--ink-soft); margin-top: 2px;
+  flex-wrap: wrap;
+}
+.ac-tm-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--ink-soft);
+}
+.ac-tm-row-active .ac-tm-badge { background: var(--surface); }
+
+.ac-tm-row-edit {
+  padding: 0 16px;
+  color: var(--ink-muted);
+  border-left: 1px solid var(--border);
+  display: grid; place-items: center;
+  transition: background 0.12s, color 0.12s;
+}
+.ac-tm-row-edit:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-tm-row-active .ac-tm-row-edit { border-left-color: var(--accent); }
+
+/* Editing state */
+.ac-tm-row-editing {
+  flex-direction: column;
+  background: var(--surface);
+  border-color: var(--border-strong);
+  padding: 18px;
+  gap: 14px;
+}
+.ac-tm-form { display: flex; flex-direction: column; gap: 12px; }
+.ac-tm-field { display: flex; flex-direction: column; gap: 4px; }
+.ac-tm-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-tm-input {
+  font: inherit; color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  outline: none;
+}
+.ac-tm-input:focus { border-color: var(--accent); }
+
+.ac-tm-seg {
+  display: flex; gap: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px;
+}
+.ac-tm-seg button {
+  flex: 1; padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--ink-soft);
+  transition: background 0.12s, color 0.12s;
+}
+.ac-tm-seg button:hover { color: var(--ink); }
+.ac-tm-seg button.ac-tm-seg-on {
+  background: var(--surface);
+  color: var(--accent-ink);
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+.ac-tm-row-actions {
+  display: flex; justify-content: space-between; gap: 8px;
+  padding-top: 8px; border-top: 1px solid var(--border);
+}
+.ac-tm-row-actions-right { display: flex; gap: 8px; }
+.ac-tm-ghost, .ac-tm-primary, .ac-tm-danger {
+  padding: 7px 14px; border-radius: 8px;
+  font-size: 13px; font-weight: 500;
+  transition: background 0.12s, opacity 0.12s;
+}
+.ac-tm-ghost { color: var(--ink-soft); }
+.ac-tm-ghost:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-tm-primary { background: var(--accent); color: var(--surface); }
+.ac-tm-primary:hover { opacity: 0.88; }
+.ac-tm-primary:disabled { opacity: 0.4; cursor: not-allowed; }
+.ac-tm-danger { color: var(--warn); }
+.ac-tm-danger:hover { background: var(--warn-soft); }
+
+.ac-tm-empty { padding: 60px 20px; text-align: center; color: var(--ink-muted); }
+.ac-tm-empty-glyph {
+  width: 56px; height: 56px; border-radius: 50%;
+  border: 1.5px dashed var(--border-strong);
+  margin: 0 auto 14px;
+  display: grid; place-items: center;
+  color: var(--ink-muted);
+  font-size: 24px;
+}
+.ac-tm-empty-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 4px; }
+.ac-tm-empty-sub { font-size: 13px; }
+
+.ac-tm-foot { padding: 14px 18px 22px; border-top: 1px solid var(--border); }
+.ac-tm-cta {
+  width: 100%;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1.5px dashed var(--border-strong);
+  border-radius: 12px;
+  color: var(--ink-soft);
+  font-weight: 500;
+  font-size: 14px;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+.ac-tm-cta:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
+.ac-tm-cta-plus { font-size: 18px; line-height: 1; }
+.ac-tm-newform { display: flex; flex-direction: column; gap: 8px; }
+.ac-tm-newform-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+
+/* Mobile: bottom sheet */
+@media (max-width: 720px) {
+  .ac-tm-scrim { align-items: flex-end; justify-content: center; }
+  .ac-tm-drawer {
+    width: 100%; height: 88vh;
+    border-left: none; border-top: 1px solid var(--border);
+    border-radius: 16px 16px 0 0;
+    animation: ac-slide-up 0.22s ease;
+  }
+  @keyframes ac-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+}
+
+/* ── Global Search dropdown ── */
+.ac-search-wrap { position: relative; flex: 1; max-width: 380px; }
+.ac-search-wrap .ac-search { max-width: none; }
+.ac-gs-panel {
+  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(20,18,12,0.10);
+  z-index: 50;
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 8px;
+  animation: ac-fade 0.12s ease;
+}
+.ac-gs-empty { padding: 22px 14px; text-align: center; }
+.ac-gs-empty-title { font-family: var(--font-display); font-size: 16px; color: var(--ink); margin-bottom: 4px; }
+.ac-gs-empty-title em { font-style: italic; color: var(--accent-ink); }
+.ac-gs-empty-sub { font-size: 12px; color: var(--ink-muted); }
+.ac-gs-hint { margin-top: 14px; font-size: 11px; color: var(--ink-muted); }
+
+.ac-gs-section-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 10px 6px;
+}
+.ac-gs-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--ink-muted); }
+.ac-gs-clear { font-size: 11px; color: var(--ink-muted); padding: 2px 6px; border-radius: 4px; }
+.ac-gs-clear:hover { background: var(--surface-alt); color: var(--ink); }
+
+.ac-gs-history { display: flex; flex-direction: column; gap: 1px; }
+.ac-gs-history-row {
+  display: flex; gap: 10px; align-items: center;
+  padding: 8px 12px; border-radius: 8px;
+  font-size: 13px; color: var(--ink-soft); text-align: left;
+}
+.ac-gs-history-row:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-gs-history-icon { color: var(--ink-muted); font-size: 12px; }
+
+.ac-gs-group { margin-bottom: 6px; }
+.ac-gs-group-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 10px 4px;
+}
+.ac-gs-group-dot { width: 6px; height: 6px; border-radius: 50%; }
+.ac-gs-group-count { margin-left: auto; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+.ac-gs-row {
+  width: 100%;
+  display: flex; gap: 12px; align-items: center;
+  padding: 8px 10px; border-radius: 8px;
+  text-align: left;
+  transition: background 0.1s;
+}
+.ac-gs-row:hover { background: var(--surface-alt); }
+.ac-gs-row-active { background: var(--accent-soft); }
+.ac-gs-row-glyph {
+  width: 28px; height: 28px;
+  border: 1.5px solid;
+  border-radius: 6px;
+  display: grid; place-items: center;
+  font-family: var(--font-display); font-size: 10px; font-weight: 500;
+  flex: none;
+}
+.ac-gs-row-text { flex: 1; min-width: 0; }
+.ac-gs-row-name {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 13px; color: var(--ink); font-weight: 500;
+}
+.ac-gs-row-donated {
+  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--accent); font-weight: 600;
+}
+.ac-gs-row-meta { font-size: 11px; color: var(--ink-muted); margin-top: 1px; text-transform: capitalize; }
+.ac-gs-row-arrow { color: var(--ink-muted); font-size: 11px; opacity: 0; }
+.ac-gs-row-active .ac-gs-row-arrow { opacity: 1; }
+
+.ac-gs-foot {
+  display: flex; gap: 14px; justify-content: center;
+  padding: 10px 8px 4px;
+  border-top: 1px solid var(--border);
+  margin-top: 6px;
+  font-size: 10px; color: var(--ink-muted);
+}
+kbd {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 1px 4px;
+  margin-right: 4px;
+}
+
+
+/* ── Settings page ── */
+.ac-settings {
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 8px 0 80px;
+  animation: ac-fade-up 0.28s ease;
+}
+@keyframes ac-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+
+.ac-settings-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  padding-bottom: 28px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 36px;
+}
+.ac-settings-eyebrow {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
+  color: var(--ink-muted); margin-bottom: 8px;
+}
+.ac-settings-title {
+  font-family: var(--font-display);
+  font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.02em;
+  margin: 0; color: var(--ink);
+}
+.ac-settings-title em {
+  font-style: italic; color: var(--accent-ink);
+  font-variation-settings: 'opsz' 36;
+}
+.ac-settings-close {
+  background: var(--surface); border: 1px solid var(--border);
+  color: var(--ink-soft);
+  width: 36px; height: 36px; border-radius: 50%;
+  font-size: 14px; cursor: pointer;
+  transition: all 0.15s;
+}
+.ac-settings-close:hover { background: var(--surface-alt); color: var(--ink); border-color: var(--border-strong); }
+
+.ac-settings-section { margin-bottom: 44px; }
+.ac-settings-section-head { margin-bottom: 18px; }
+.ac-settings-section-title {
+  font-family: var(--font-display); font-size: 22px; font-weight: 500;
+  margin: 0; color: var(--ink); letter-spacing: -0.01em;
+}
+.ac-settings-section-sub {
+  font-size: 13px; color: var(--ink-muted); margin: 4px 0 0;
+}
+
+/* Theme cards */
+.ac-theme-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 14px;
+}
+.ac-theme-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 14px; padding: 0; overflow: hidden;
+  cursor: pointer; text-align: left;
+  transition: all 0.18s;
+  font-family: inherit;
+}
+.ac-theme-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
+.ac-theme-card-active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft, color-mix(in oklch, var(--accent) 18%, transparent));
+}
+.ac-theme-preview {
+  display: flex; height: 76px;
+}
+.ac-theme-swatch { flex: 1; }
+.ac-theme-meta { padding: 12px 14px 14px; }
+.ac-theme-name {
+  display: flex; justify-content: space-between; align-items: center;
+  font-weight: 500; color: var(--ink); font-size: 15px;
+}
+.ac-theme-check { color: var(--accent); font-size: 8px; }
+.ac-theme-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
+
+/* Settings cards (about + danger) */
+.ac-settings-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 14px; padding: 18px 22px;
+}
+.ac-about-list {
+  display: grid; gap: 14px; margin: 0;
+}
+.ac-about-list > div {
+  display: grid; grid-template-columns: 120px 1fr; gap: 18px;
+  font-size: 14px; align-items: baseline;
+}
+.ac-about-list dt {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin: 0;
+}
+.ac-about-list dd { margin: 0; color: var(--ink); }
+.ac-about-list a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-soft, var(--border-strong)); text-underline-offset: 3px; }
+
+/* Danger zone */
+.ac-settings-danger {
+  border-color: oklch(0.62 0.12 25 / 0.35);
+  background: color-mix(in oklch, oklch(0.62 0.12 25) 4%, var(--surface));
+}
+.ac-danger-row {
+  display: flex; justify-content: space-between; align-items: center; gap: 24px;
+  padding: 10px 0;
+}
+.ac-danger-row + .ac-danger-row { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 6px; }
+.ac-danger-name { font-weight: 500; color: var(--ink); font-size: 14px; }
+.ac-danger-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
+.ac-danger-btn {
+  background: var(--surface); border: 1px solid oklch(0.62 0.12 25 / 0.4);
+  color: oklch(0.5 0.14 25);
+  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
+  cursor: pointer; font-family: inherit; flex: none;
+  transition: all 0.15s;
+}
+.ac-danger-btn:hover { background: oklch(0.62 0.12 25 / 0.08); border-color: oklch(0.62 0.12 25 / 0.6); }
+.ac-danger-btn-strong {
+  background: oklch(0.5 0.14 25); color: white; border-color: transparent;
+}
+.ac-danger-btn-strong:hover { background: oklch(0.45 0.16 25); }
+
+@media (max-width: 700px) {
+  .ac-settings-title { font-size: 40px; }
+  .ac-about-list > div { grid-template-columns: 1fr; gap: 2px; }
+  .ac-danger-row { flex-direction: column; align-items: stretch; }
+  .ac-danger-btn { width: 100%; }
+}
diff --git a/docs/design-handoffs/v0.9.2_curator/addons.jsx b/docs/design-handoffs/v0.9.2_curator/addons.jsx
new file mode 100644
index 0000000..0ce7a01
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/addons.jsx
@@ -0,0 +1,428 @@
+/* global React, ACComponents */
+const { useState, useEffect, useRef, useMemo } = React;
+
+// ── Town Manager: right-side drawer with switch / edit / create ──
+function TownManager({ open, onClose, towns, activeTownId, onActivate, onUpdate, onCreate, onDelete }) {
+  const [editingId, setEditingId] = useState(null);
+  const [creating, setCreating] = useState(false);
+  const drawerRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) { setEditingId(null); setCreating(false); }
+  }, [open]);
+
+  // ESC to close
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="ac-tm-scrim" onClick={onClose}>
+      <aside ref={drawerRef} className="ac-tm-drawer" onClick={e=>e.stopPropagation()} role="dialog" aria-label="Towns">
+        <header className="ac-tm-head">
+          <div>
+            <div className="ac-tm-eyebrow">Your towns</div>
+            <h2 className="ac-tm-title">Switch, edit, or add a town</h2>
+          </div>
+          <button className="ac-tm-close" onClick={onClose} aria-label="Close">×</button>
+        </header>
+
+        {towns.length === 0 && !creating && (
+          <div className="ac-tm-empty">
+            <div className="ac-tm-empty-glyph">○</div>
+            <div className="ac-tm-empty-title">No towns yet</div>
+            <div className="ac-tm-empty-sub">Create your first town to start tracking donations.</div>
+          </div>
+        )}
+
+        <div className="ac-tm-list">
+          {towns.map(t => (
+            <TownRow
+              key={t.id}
+              town={t}
+              active={t.id === activeTownId}
+              editing={editingId === t.id}
+              onActivate={()=>onActivate(t.id)}
+              onEditStart={()=>setEditingId(t.id)}
+              onEditCancel={()=>setEditingId(null)}
+              onSave={(patch)=>{ onUpdate(t.id, patch); setEditingId(null); }}
+              onDelete={()=>onDelete(t.id)}
+              canDelete={towns.length > 1}
+            />
+          ))}
+        </div>
+
+        <footer className="ac-tm-foot">
+          {creating ? (
+            <NewTownForm
+              onCancel={()=>setCreating(false)}
+              onCreate={(t)=>{ onCreate(t); setCreating(false); }}
+            />
+          ) : (
+            <button className="ac-tm-cta" onClick={()=>setCreating(true)}>
+              <span className="ac-tm-cta-plus">+</span>
+              <span>New town</span>
+            </button>
+          )}
+        </footer>
+      </aside>
+    </div>
+  );
+}
+
+const GAMES = [
+  { id: "acgcn", label: "GameCube",     short: "GCN" },
+  { id: "acww",  label: "Wild World",   short: "WW" },
+  { id: "accf",  label: "City Folk",    short: "CF" },
+  { id: "acnl",  label: "New Leaf",     short: "NL" },
+  { id: "acnh",  label: "New Horizons", short: "NH" },
+];
+
+function TownRow({ town, active, editing, onActivate, onEditStart, onEditCancel, onSave, onDelete, canDelete }) {
+  const [name, setName] = useState(town.name);
+  const [gameId, setGameId] = useState(town.gameId);
+  const [hemisphere, setHemisphere] = useState(town.hemisphere || "NH");
+  useEffect(() => { setName(town.name); setGameId(town.gameId); setHemisphere(town.hemisphere || "NH"); }, [town, editing]);
+
+  const game = GAMES.find(g => g.id === town.gameId);
+
+  if (editing) {
+    return (
+      <div className="ac-tm-row ac-tm-row-editing">
+        <div className="ac-tm-form">
+          <label className="ac-tm-field">
+            <span className="ac-tm-field-label">Town name</span>
+            <input className="ac-tm-input" value={name} onChange={e=>setName(e.target.value)} autoFocus />
+          </label>
+          <label className="ac-tm-field">
+            <span className="ac-tm-field-label">Game</span>
+            <select className="ac-tm-input" value={gameId} onChange={e=>setGameId(e.target.value)}>
+              {GAMES.map(g => <option key={g.id} value={g.id}>{g.label}</option>)}
+            </select>
+          </label>
+          {gameId === "acnh" && (
+            <label className="ac-tm-field">
+              <span className="ac-tm-field-label">Hemisphere</span>
+              <div className="ac-tm-seg">
+                <button className={hemisphere==="NH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("NH")}>Northern</button>
+                <button className={hemisphere==="SH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("SH")}>Southern</button>
+              </div>
+            </label>
+          )}
+        </div>
+        <div className="ac-tm-row-actions">
+          {canDelete && (
+            <button className="ac-tm-danger" onClick={()=>{ if (confirm(`Delete "${town.name}"? This can't be undone.`)) onDelete(); }}>Delete</button>
+          )}
+          <div className="ac-tm-row-actions-right">
+            <button className="ac-tm-ghost" onClick={onEditCancel}>Cancel</button>
+            <button className="ac-tm-primary" onClick={()=>onSave({ name, gameId, hemisphere: gameId === "acnh" ? hemisphere : null })}>Save</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`ac-tm-row ${active?"ac-tm-row-active":""}`}>
+      <button className="ac-tm-row-main" onClick={onActivate}>
+        <div className="ac-tm-row-mark" style={{borderColor: active ? "var(--accent)" : "var(--border-strong)"}}>
+          {active && <span className="ac-tm-row-tick">●</span>}
+        </div>
+        <div className="ac-tm-row-text">
+          <div className="ac-tm-row-name">{town.name}</div>
+          <div className="ac-tm-row-meta">
+            <span className="ac-tm-badge">{game?.short || "?"}</span>
+            <span>{game?.label}</span>
+            {town.hemisphere && <><span className="ac-dot-sep">·</span><span>Hem. {town.hemisphere}</span></>}
+            {town.itemCount != null && <><span className="ac-dot-sep">·</span><span>{town.itemCount} donated</span></>}
+          </div>
+        </div>
+      </button>
+      <button className="ac-tm-row-edit" onClick={onEditStart} aria-label="Edit town">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+          <path d="M11 2l3 3-9 9H2v-3l9-9z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+function NewTownForm({ onCancel, onCreate }) {
+  const [name, setName] = useState("");
+  const [gameId, setGameId] = useState("acnh");
+  const [hemisphere, setHemisphere] = useState("NH");
+  return (
+    <div className="ac-tm-newform">
+      <input className="ac-tm-input" autoFocus placeholder="Town name (e.g. Marigold)" value={name} onChange={e=>setName(e.target.value)} />
+      <select className="ac-tm-input" value={gameId} onChange={e=>setGameId(e.target.value)}>
+        {GAMES.map(g => <option key={g.id} value={g.id}>{g.label}</option>)}
+      </select>
+      {gameId === "acnh" && (
+        <div className="ac-tm-seg">
+          <button className={hemisphere==="NH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("NH")}>Northern</button>
+          <button className={hemisphere==="SH"?"ac-tm-seg-on":""} onClick={()=>setHemisphere("SH")}>Southern</button>
+        </div>
+      )}
+      <div className="ac-tm-newform-actions">
+        <button className="ac-tm-ghost" onClick={onCancel}>Cancel</button>
+        <button className="ac-tm-primary" disabled={!name.trim()} onClick={()=>onCreate({ name: name.trim(), gameId, hemisphere: gameId === "acnh" ? hemisphere : null })}>Create town</button>
+      </div>
+    </div>
+  );
+}
+
+// ── Global Search Dropdown ──
+const SEARCH_HISTORY_KEY = "ac-curator-search-history";
+function loadHistory() { try { return JSON.parse(localStorage.getItem(SEARCH_HISTORY_KEY) || "[]"); } catch { return []; } }
+function saveHistory(arr) { try { localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(arr.slice(0, 8))); } catch {} }
+
+function GlobalSearchDropdown({ query, data, donated, onJump, onClose }) {
+  const [history, setHistory] = useState(loadHistory());
+  const [activeIdx, setActiveIdx] = useState(0);
+
+  const grouped = useMemo(() => {
+    if (!query.trim()) return null;
+    const q = query.trim().toLowerCase();
+    const g = { fish:[], bugs:[], fossils:[], art:[], sea:[] };
+    for (const cat of Object.keys(g)) {
+      if (!data[cat]) continue;
+      g[cat] = data[cat].filter(it =>
+        it.name.toLowerCase().includes(q) ||
+        (it.basedOn||"").toLowerCase().includes(q)
+      ).slice(0, 5);
+    }
+    return g;
+  }, [query, data]);
+
+  const flatList = useMemo(() => {
+    if (!grouped) return [];
+    return ["fish","bugs","fossils","art","sea"].flatMap(cat => grouped[cat].map(it => ({...it, _cat:cat})));
+  }, [grouped]);
+
+  useEffect(() => { setActiveIdx(0); }, [query]);
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") { e.preventDefault(); setActiveIdx(i => Math.min(i+1, flatList.length-1)); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); setActiveIdx(i => Math.max(i-1, 0)); }
+      else if (e.key === "Enter" && flatList[activeIdx]) {
+        const it = flatList[activeIdx];
+        commitSearch(it.name);
+        onJump(it._cat, it.id);
+      } else if (e.key === "Escape") { onClose(); }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [flatList, activeIdx, onJump, onClose]);
+
+  function commitSearch(term) {
+    const next = [term, ...history.filter(h => h !== term)].slice(0, 8);
+    setHistory(next); saveHistory(next);
+  }
+
+  function clearHistory() { setHistory([]); saveHistory([]); }
+
+  // Empty-input state: recent searches
+  if (!query.trim()) {
+    if (history.length === 0) {
+      return (
+        <div className="ac-gs-panel">
+          <div className="ac-gs-empty">
+            <div className="ac-gs-empty-title">Search across categories</div>
+            <div className="ac-gs-empty-sub">Type a name to find fish, bugs, fossils, or art at once.</div>
+            <div className="ac-gs-hint"><kbd>↑↓</kbd> navigate · <kbd>↵</kbd> open · <kbd>esc</kbd> close</div>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="ac-gs-panel">
+        <div className="ac-gs-section-head">
+          <span className="ac-gs-eyebrow">Recent searches</span>
+          <button className="ac-gs-clear" onClick={clearHistory}>Clear</button>
+        </div>
+        <div className="ac-gs-history">
+          {history.map((h,i) => (
+            <button key={i} className="ac-gs-history-row" onClick={()=>{ /* prefill — handled by parent via onJump('search',h) but simpler: set query */ window.dispatchEvent(new CustomEvent("ac-search-prefill", {detail: h})); }}>
+              <span className="ac-gs-history-icon">↻</span>
+              <span>{h}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // No matches
+  const total = flatList.length;
+  if (total === 0) {
+    return (
+      <div className="ac-gs-panel">
+        <div className="ac-gs-empty">
+          <div className="ac-gs-empty-title">No matches for "<em>{query}</em>"</div>
+          <div className="ac-gs-empty-sub">Try a shorter term or check the spelling.</div>
+        </div>
+      </div>
+    );
+  }
+
+  // Grouped results
+  let rowIdx = -1;
+  return (
+    <div className="ac-gs-panel">
+      {["fish","bugs","fossils","art","sea"].map(cat => {
+        const items = grouped[cat];
+        if (items.length === 0) return null;
+        return (
+          <div key={cat} className="ac-gs-group">
+            <div className="ac-gs-group-head">
+              <span className="ac-gs-group-dot" style={{background:`var(--chip-${cat})`}}/>
+              <span className="ac-gs-eyebrow" style={{color:`var(--chip-${cat})`}}>{cat}</span>
+              <span className="ac-gs-group-count">{items.length}</span>
+            </div>
+            {items.map(it => {
+              rowIdx++;
+              const isActive = rowIdx === activeIdx;
+              const isDonated = donated[cat].has(it.id);
+              return (
+                <button
+                  key={it.id}
+                  className={`ac-gs-row ${isActive?"ac-gs-row-active":""}`}
+                  onClick={()=>{ commitSearch(it.name); onJump(cat, it.id); }}
+                >
+                  <div className="ac-gs-row-glyph" style={{borderColor:`var(--chip-${cat})`,color:`var(--chip-${cat})`}}>
+                    {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+                  </div>
+                  <div className="ac-gs-row-text">
+                    <div className="ac-gs-row-name">
+                      {it.name}
+                      {isDonated && <span className="ac-gs-row-donated">donated</span>}
+                    </div>
+                    <div className="ac-gs-row-meta">
+                      {it.habitat || it.location || it.part || it.basedOn || "—"}
+                      {it.value != null && <> · {it.value.toLocaleString()} ✦</>}
+                    </div>
+                  </div>
+                  <span className="ac-gs-row-arrow">↵</span>
+                </button>
+              );
+            })}
+          </div>
+        );
+      })}
+      <div className="ac-gs-foot">
+        <span><kbd>↑↓</kbd> navigate</span>
+        <span><kbd>↵</kbd> open</span>
+        <span><kbd>esc</kbd> close</span>
+      </div>
+    </div>
+  );
+}
+
+// ── Settings page ──
+// Full-page route inside the main column (not a modal). Curator language: large
+// title, eyebrow + sectioned cards, swatch tiles for theme. Esc closes.
+function SettingsPage({ open, onClose, theme, onThemeChange, onResetDonations, onResetAll, townCount, totalDonations }) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const themes = [
+    { id: "meadow",    label: "Meadow",    sub: "Default — moss + cream",   swatches: ["#FFFDF7","#F4EFE3","oklch(0.55 0.09 150)","oklch(0.62 0.08 230)"] },
+    { id: "parchment", label: "Parchment", sub: "Cozy paper + wood",        swatches: ["#F5E9D4","#EFE6D0","#3CA370","#7B5E3B"] },
+    { id: "midnight",  label: "Midnight",  sub: "Low-light reading",        swatches: ["#1E212A","#16181F","oklch(0.7 0.12 165)","oklch(0.7 0.1 230)"] },
+    { id: "sakura",    label: "Sakura",    sub: "Spring blossom",           swatches: ["#FFFCFB","#FBF0EE","oklch(0.62 0.13 5)","oklch(0.62 0.1 250)"] },
+  ];
+
+  return (
+    <div className="ac-settings">
+      <header className="ac-settings-head">
+        <div>
+          <div className="ac-settings-eyebrow">Curator</div>
+          <h1 className="ac-settings-title"><em>Settings</em></h1>
+        </div>
+        <button className="ac-settings-close" onClick={onClose} aria-label="Close settings">✕</button>
+      </header>
+
+      <section className="ac-settings-section">
+        <div className="ac-settings-section-head">
+          <h2 className="ac-settings-section-title">Appearance</h2>
+          <p className="ac-settings-section-sub">Pick a palette. Choice persists across sessions.</p>
+        </div>
+        <div className="ac-theme-grid">
+          {themes.map(t => (
+            <button
+              key={t.id}
+              className={`ac-theme-card ${theme===t.id?"ac-theme-card-active":""}`}
+              onClick={()=>onThemeChange(t.id)}
+              aria-pressed={theme===t.id}
+            >
+              <div className="ac-theme-preview">
+                {t.swatches.map((s,i) => (
+                  <div key={i} className="ac-theme-swatch" style={{background: s}}/>
+                ))}
+              </div>
+              <div className="ac-theme-meta">
+                <div className="ac-theme-name">
+                  {t.label}
+                  {theme===t.id && <span className="ac-theme-check">●</span>}
+                </div>
+                <div className="ac-theme-sub">{t.sub}</div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className="ac-settings-section">
+        <div className="ac-settings-section-head">
+          <h2 className="ac-settings-section-title">About</h2>
+        </div>
+        <div className="ac-settings-card">
+          <dl className="ac-about-list">
+            <div><dt>Version</dt><dd>v0.9.2-alpha · Curator</dd></div>
+            <div><dt>Source</dt><dd><a href="https://github.com/jacuzzicoding/animalcrossingwebapp" target="_blank" rel="noopener">jacuzzicoding/animalcrossingwebapp</a></dd></div>
+            <div><dt>Storage</dt><dd>localStorage · {townCount} {townCount===1?"town":"towns"} · {totalDonations} donations</dd></div>
+            <div><dt>Credits</dt><dd>Companion app for the Animal Crossing series. Not affiliated with Nintendo.</dd></div>
+          </dl>
+        </div>
+      </section>
+
+      <section className="ac-settings-section">
+        <div className="ac-settings-section-head">
+          <h2 className="ac-settings-section-title">Danger zone</h2>
+          <p className="ac-settings-section-sub">These actions cannot be undone.</p>
+        </div>
+        <div className="ac-settings-card ac-settings-danger">
+          <div className="ac-danger-row">
+            <div>
+              <div className="ac-danger-name">Reset donations for active town</div>
+              <div className="ac-danger-sub">Clears all donation marks. Towns themselves are kept.</div>
+            </div>
+            <button className="ac-danger-btn" onClick={onResetDonations}>Reset donations</button>
+          </div>
+          <div className="ac-danger-row">
+            <div>
+              <div className="ac-danger-name">Reset everything</div>
+              <div className="ac-danger-sub">Deletes all towns, donations, and search history.</div>
+            </div>
+            <button className="ac-danger-btn ac-danger-btn-strong" onClick={onResetAll}>Reset all data</button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+window.ACAddOns = { TownManager, GlobalSearchDropdown, SettingsPage, GAMES };
diff --git a/docs/design-handoffs/v0.9.2_curator/components.jsx b/docs/design-handoffs/v0.9.2_curator/components.jsx
new file mode 100644
index 0000000..091fd2e
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/components.jsx
@@ -0,0 +1,127 @@
+/* global React */
+const { useState, useMemo } = React;
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const MONTHS_LONG = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+// ── Glyph: a simple monogram tile, category-tinted. No copyrighted sprites. ──
+function Glyph({ name, category, donated }) {
+  const initials = name.split(/\s|-/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("").toUpperCase();
+  const tint = `var(--chip-${category})`;
+  return (
+    <div className="ac-glyph" style={{
+      background: donated ? tint : "transparent",
+      borderColor: tint,
+      color: donated ? "var(--surface)" : tint
+    }}>
+      <span>{initials}</span>
+    </div>);
+
+}
+
+function Pill({ children, tone = "default", size = "sm" }) {
+  return <span className={`ac-pill ac-pill-${tone} ac-pill-${size}`}>{children}</span>;
+}
+
+function MonthDots({ months, current }) {
+  return (
+    <div className="ac-monthdots" role="img" aria-label="Month availability">
+      {Array.from({ length: 12 }, (_, i) => {
+        const m = i + 1;
+        const on = months.includes(m);
+        const here = m === current;
+        return <span key={m} className={`ac-monthdot ${on ? "on" : ""} ${here ? "here" : ""}`} title={MONTHS[i]} />;
+      })}
+    </div>);
+
+}
+
+function MonthGrid({ months, current }) {
+  return (
+    <div className="ac-monthgrid">
+      {MONTHS.map((m, i) => {
+        const on = months.includes(i + 1);
+        const here = i + 1 === current;
+        return (
+          <div key={m} className={`ac-monthcell ${on ? "on" : ""} ${here ? "here" : ""}`}>
+            <span className="ac-monthcell-label">{m}</span>
+          </div>);
+
+      })}
+    </div>);
+
+}
+
+// ── Item row with inline expand panel ──
+function ItemRow({ item, category, donated, onToggle, currentMonth, expanded, onExpand }) {
+  const leavingSoon = item.months && item.months.includes(currentMonth) && !item.months.includes(currentMonth === 12 ? 1 : currentMonth + 1);
+  const newThisMonth = item.months && item.months.includes(currentMonth) && !item.months.includes(currentMonth === 1 ? 12 : currentMonth - 1);
+
+  return (
+    <div data-row-id={item.id} className={`ac-row ${expanded ? "ac-row-expanded" : ""} ${donated ? "ac-row-donated" : ""}`}>
+      <button className="ac-row-main" onClick={onExpand}>
+        <Glyph name={item.name} category={category} donated={donated} />
+        <div className="ac-row-text">
+          <div className="ac-row-name">
+            <span>{item.name}</span>
+            {donated && <span className="ac-row-checkmark" aria-label="donated">●</span>}
+          </div>
+          <div className="ac-row-meta">
+            {item.habitat && <span className="ac-row-meta-bit">{item.habitat.replace("-", " · ")}</span>}
+            {item.location && <span className="ac-row-meta-bit">{item.location}</span>}
+            {item.part && <span className="ac-row-meta-bit">{item.part}</span>}
+            {item.basedOn && <span className="ac-row-meta-bit ac-row-meta-italic">{item.basedOn}</span>}
+            {item.value != null && <span className="ac-row-meta-bit ac-row-meta-bells">{item.value.toLocaleString()} ✦</span>}
+          </div>
+        </div>
+        <div className="ac-row-side">
+          {leavingSoon && !donated && <Pill tone="warn">Leaving soon</Pill>}
+          {newThisMonth && !donated && !leavingSoon && <Pill tone="accent">New this month</Pill>}
+          {item.time && item.time !== "all day" && <span className="ac-row-time">{item.time}</span>}
+          <span className={`ac-chevron ${expanded ? "ac-chevron-open" : ""}`}>›</span>
+        </div>
+      </button>
+      {expanded &&
+      <div className="ac-expand">
+          {item.months &&
+        <div className="ac-expand-section">
+              <div className="ac-expand-label">Available in</div>
+              <MonthGrid months={item.months} current={currentMonth} />
+            </div>
+        }
+          <div className="ac-expand-side">
+            {item.value != null &&
+          <div className="ac-stat">
+                <div className="ac-stat-num">{item.value.toLocaleString()}</div>
+                <div className="ac-stat-label">bells · sell value</div>
+              </div>
+          }
+            {item.shadow &&
+          <div className="ac-stat">
+                <div className="ac-stat-num ac-stat-num-text">{item.shadow}</div>
+                <div className="ac-stat-label">shadow size</div>
+              </div>
+          }
+            {item.time &&
+          <div className="ac-stat">
+                <div className="ac-stat-num ac-stat-num-text">{item.time}</div>
+                <div className="ac-stat-label">active hours</div>
+              </div>
+          }
+            {item.notes &&
+          <div className="ac-note">{item.notes}</div>
+          }
+            <button
+            className={`ac-donate-btn ${donated ? "ac-donate-btn-on" : ""}`}
+            onClick={(e) => {e.stopPropagation();onToggle();}}>
+            
+              {donated ? "Donated ✓ — undonate" : "Mark as donated"}
+            </button>
+          </div>
+        </div>
+      }
+    </div>);
+
+}
+
+window.ACComponents = { Glyph, Pill, MonthDots, MonthGrid, ItemRow, MONTHS, MONTHS_LONG };
\ No newline at end of file
diff --git a/docs/design-handoffs/v0.9.2_curator/data.js b/docs/design-handoffs/v0.9.2_curator/data.js
new file mode 100644
index 0000000..4cf64aa
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/data.js
@@ -0,0 +1,121 @@
+// Sample museum data inspired by AC GCN/NH species lists.
+// Real-feeling enough for a prototype; no copyrighted sprite assets.
+window.MUSEUM_DATA = {
+  meta: {
+    townName: "Marigold",
+    playerName: "Bea",
+    game: "New Horizons",
+    hemisphere: "NH",
+    currentMonth: 5, // May
+    currentDay: 2,
+  },
+  fish: [
+    { id: "loach", name: "Loach", value: 400, habitat: "river", shadow: "small", time: "all day", months: [3,4,5] },
+    { id: "angelfish", name: "Angelfish", value: 3000, habitat: "river", shadow: "small", time: "4pm–9am", months: [5,6,7,8,9,10] },
+    { id: "cherry-salmon", name: "Cherry Salmon", value: 1000, habitat: "river", shadow: "medium", time: "4pm–9am", months: [3,4,5,6,9,10,11] },
+    { id: "barbel-steed", name: "Barbel Steed", value: 200, habitat: "river", shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "barred-knifejaw", name: "Barred Knifejaw", value: 5000, habitat: "ocean", shadow: "medium", time: "all day", months: [3,4,5,6,7,8,9,10,11] },
+    { id: "bass", name: "Black Bass", value: 400, habitat: "river", shadow: "large", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "bluegill", name: "Bluegill", value: 180, habitat: "river", shadow: "small", time: "9am–4pm", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "brook-trout", name: "Brook Trout", value: 150, habitat: "river-clifftop", shadow: "small", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "carp", name: "Carp", value: 300, habitat: "pond", shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "cherry-shrimp", name: "Cherry Shrimp", value: 600, habitat: "pond", shadow: "tiny", time: "all day", months: [4,5,6,7,8,9] },
+    { id: "clouded-cichlid", name: "Clouded Cichlid", value: 800, habitat: "river", shadow: "medium", time: "all day", months: [4,5,6,7,8,9,10] },
+    { id: "coelacanth", name: "Coelacanth", value: 15000, habitat: "ocean", shadow: "huge", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12], notes: "Only when raining or snowing" },
+    { id: "crawfish", name: "Crawfish", value: 200, habitat: "pond", shadow: "small", time: "all day", months: [4,5,6,7,8,9] },
+    { id: "crucian-carp", name: "Crucian Carp", value: 160, habitat: "river", shadow: "small", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "dace", name: "Dace", value: 240, habitat: "river", shadow: "medium", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "freshwater-goby", name: "Freshwater Goby", value: 400, habitat: "river", shadow: "small", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "frog", name: "Frog", value: 120, habitat: "pond", shadow: "small", time: "all day", months: [5,6,7,8] },
+    { id: "goldfish", name: "Goldfish", value: 1300, habitat: "pond", shadow: "tiny", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "guppy", name: "Guppy", value: 1300, habitat: "river", shadow: "tiny", time: "9am–4pm", months: [4,5,6,7,8,9,10,11] },
+    { id: "killifish", name: "Killifish", value: 300, habitat: "pond", shadow: "tiny", time: "all day", months: [4,5,6,7,8] },
+    { id: "koi", name: "Koi", value: 4000, habitat: "pond", shadow: "medium", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "ladybug", name: "Ladybug", value: 200, habitat: "pond", shadow: "tiny", time: "8am–5pm", months: [3,4,5,6,10] },
+    { id: "rainbow-trout", name: "Rainbow Trout", value: 800, habitat: "river-clifftop", shadow: "medium", time: "4pm–9am", months: [3,4,5,6,9,10,11] },
+    { id: "sea-bass", name: "Sea Bass", value: 400, habitat: "ocean", shadow: "large", time: "all day", months: [1,2,3,4,5,6,7,9,10,11,12] },
+    { id: "stringfish", name: "Stringfish", value: 15000, habitat: "river-clifftop", shadow: "huge", time: "4pm–9am", months: [12,1,2,3] },
+  ],
+  bugs: [
+    { id: "mole-cricket", name: "Mole Cricket", value: 500, location: "underground", time: "all day", months: [11,12,1,2,3,4,5] },
+    { id: "ant", name: "Ant", value: 80, location: "rotten food", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "bee", name: "Bee", value: 2500, location: "shaking trees", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "common-butterfly", name: "Common Butterfly", value: 160, location: "flying", time: "4am–7pm", months: [1,2,3,4,5,6,9,10,11,12] },
+    { id: "common-dragonfly", name: "Common Dragonfly", value: 180, location: "flying", time: "8am–7pm", months: [4,5,6,7,8,9,10] },
+    { id: "clouded-yellow", name: "Clouded Yellow Butterfly", value: 160, location: "flying", time: "4am–7pm", months: [3,4,5,6,9,10] },
+    { id: "cockroach", name: "Cockroach", value: 5, location: "underground", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "cricket", name: "Cricket", value: 130, location: "ground", time: "5pm–8am", months: [9,10,11] },
+    { id: "darner-dragonfly", name: "Darner Dragonfly", value: 230, location: "flying", time: "8am–5pm", months: [4,5,6,7,8,9,10] },
+    { id: "diving-beetle", name: "Diving Beetle", value: 800, location: "ponds", time: "8am–7pm", months: [5,6,7,8,9] },
+    { id: "earth-boring-beetle", name: "Earth-Boring Beetle", value: 300, location: "ground", time: "all day", months: [7,8,9,10,11] },
+    { id: "hermit-crab", name: "Hermit Crab", value: 1000, location: "beach", time: "7pm–8am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "honeybee", name: "Honeybee", value: 200, location: "flying", time: "8am–5pm", months: [3,4,5,6,7] },
+  ],
+  fossils: [
+    { id: "ammonite", name: "Ammonite", value: 1100 },
+    { id: "ankylo-skull", name: "Ankylo Skull", value: 6000 },
+    { id: "ankylo-tail", name: "Ankylo Tail", value: 2500 },
+    { id: "ankylo-torso", name: "Ankylo Torso", value: 5500 },
+    { id: "archaeopteryx", name: "Archaeopteryx", value: 1300 },
+    { id: "archelon-skull", name: "Archelon Skull", value: 4000 },
+    { id: "archelon-tail", name: "Archelon Tail", value: 3500 },
+    { id: "australopith", name: "Australopith", value: 1100 },
+    { id: "brachio-chest", name: "Brachio Chest", value: 5500 },
+    { id: "brachio-pelvis", name: "Brachio Pelvis", value: 5500 },
+    { id: "brachio-skull", name: "Brachio Skull", value: 6000 },
+    { id: "brachio-tail", name: "Brachio Tail", value: 5500 },
+    { id: "deinony-tail", name: "Deinony Tail", value: 2500 },
+    { id: "deinony-torso", name: "Deinony Torso", value: 5500 },
+    { id: "diplo-chest", name: "Diplo Chest", value: 5000 },
+    { id: "diplo-neck", name: "Diplo Neck", value: 2500 },
+    { id: "diplo-pelvis", name: "Diplo Pelvis", value: 4500 },
+    { id: "diplo-skull", name: "Diplo Skull", value: 5000 },
+    { id: "diplo-tail", name: "Diplo Tail", value: 2500 },
+  ],
+  art: [
+    { id: "academic", name: "Academic Painting", basedOn: "Vitruvian Man by Leonardo da Vinci", hasFake: true },
+    { id: "amazing", name: "Amazing Painting", basedOn: "The Night Watch by Rembrandt", hasFake: true },
+    { id: "basic", name: "Basic Painting", basedOn: "The Blue Boy by Thomas Gainsborough", hasFake: false },
+    { id: "calm", name: "Calm Painting", basedOn: "A Sunday Afternoon on La Grande Jatte by Georges Seurat", hasFake: false },
+    { id: "classic", name: "Classic Painting", basedOn: "Washington Crossing the Delaware by Emanuel Leutze", hasFake: true },
+    { id: "common", name: "Common Painting", basedOn: "The Gleaners by Jean-François Millet", hasFake: false },
+    { id: "dainty", name: "Dainty Painting", basedOn: "The Star — Dancer on Stage by Edgar Degas", hasFake: true },
+    { id: "famous", name: "Famous Painting", basedOn: "Mona Lisa by Leonardo da Vinci", hasFake: true },
+    { id: "flowery", name: "Flowery Painting", basedOn: "Sunflowers by Vincent van Gogh", hasFake: false },
+    { id: "graceful", name: "Graceful Painting", basedOn: "Beauty Looking Back by Hishikawa Moronobu", hasFake: true },
+    { id: "moving", name: "Moving Painting", basedOn: "The Birth of Venus by Sandro Botticelli", hasFake: true },
+    { id: "perfect", name: "Perfect Painting", basedOn: "The Apotheosis of Homer by Ingres", hasFake: false },
+    { id: "scary", name: "Scary Painting", basedOn: "The Great Wave off Kanagawa by Hokusai", hasFake: false },
+    { id: "warm", name: "Warm Painting", basedOn: "Et in Arcadia ego by Nicolas Poussin", hasFake: false },
+  ],
+  // Pre-seed donation state for realism
+  donated: {
+    fish: ["barbel-steed","bass","bluegill","brook-trout","carp","crucian-carp","dace","frog","goldfish","koi"],
+    bugs: ["ant","cockroach","common-butterfly","clouded-yellow","honeybee"],
+    fossils: ["ammonite","ankylo-skull","ankylo-tail","ankylo-torso","archaeopteryx","brachio-chest","brachio-pelvis","brachio-skull","brachio-tail","deinony-tail","diplo-chest","diplo-pelvis","diplo-skull"],
+    art: ["basic","calm","common","flowery","perfect","scary","warm"],
+    sea: ["seaweed","sea-anemone","scallop"],
+  },
+  towns: [
+    { id: "marigold", name: "Marigold", gameId: "acnh", hemisphere: "NH", itemCount: 35 },
+    { id: "saffron",  name: "Saffron",  gameId: "acgcn", hemisphere: null, itemCount: 12 },
+    { id: "willow",   name: "Willow",   gameId: "acnl", hemisphere: null, itemCount: 28 },
+  ],
+  sea: [
+    { id: "seaweed", name: "Seaweed", value: 600, shadow: "tiny", time: "all day", months: [10,11,12,1,2,3,4,5,6,7] },
+    { id: "sea-grapes", name: "Sea Grapes", value: 900, shadow: "tiny", time: "all day", months: [6,7,8,9] },
+    { id: "sea-anemone", name: "Sea Anemone", value: 500, shadow: "small", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "sea-pineapple", name: "Sea Pineapple", value: 1500, shadow: "small", time: "all day", months: [4,5,6,7,8] },
+    { id: "sea-cucumber", name: "Sea Cucumber", value: 500, shadow: "small", time: "all day", months: [11,12,1,2,3,4,5] },
+    { id: "spider-crab", name: "Spider Crab", value: 12000, shadow: "huge", time: "all day", months: [3,4] },
+    { id: "spotted-garden-eel", name: "Spotted Garden Eel", value: 1100, shadow: "small", time: "4am–9pm", months: [5,6,7,8,9,10] },
+    { id: "scallop", name: "Scallop", value: 1200, shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+  ],
+  recentActivity: [
+    { item: "Honeybee",      category: "bugs",    when: "2h ago"   },
+    { item: "Brook Trout",   category: "fish",    when: "yesterday"},
+    { item: "Brachio Chest", category: "fossils", when: "yesterday"},
+    { item: "Warm Painting", category: "art",     when: "3d ago"   },
+    { item: "Carp",          category: "fish",    when: "5d ago"   },
+  ],
+};
diff --git a/docs/design-handoffs/v0.9.2_curator/shell.jsx b/docs/design-handoffs/v0.9.2_curator/shell.jsx
new file mode 100644
index 0000000..e324dd1
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/shell.jsx
@@ -0,0 +1,123 @@
+/* global React, ACComponents */
+const { useState, useMemo } = React;
+const { Glyph, Pill, MonthDots, MonthGrid, ItemRow, MONTHS, MONTHS_LONG } = ACComponents;
+
+// ── Header / sidebar / shell ──
+function Sidebar({ town, currentTab, onTab, stats, onOpenTowns, onOpenSettings }) {
+  const hasSea = town.gameId === "acnh" || town.gameId === "acnl";
+  const tabs = [
+    { id: "home", label: "Home" },
+    { id: "fish", label: "Fish", n: stats.fish },
+    { id: "bugs", label: "Bugs", n: stats.bugs },
+    { id: "fossils", label: "Fossils", n: stats.fossils },
+    { id: "art", label: "Art", n: stats.art },
+    ...(hasSea ? [{ id: "sea", label: "Sea", n: stats.sea }] : []),
+    { id: "stats", label: "Stats" },
+  ];
+  return (
+    <aside className="ac-sidebar">
+      <div className="ac-brand">
+        <div className="ac-brand-mark">
+          <svg viewBox="0 0 32 32" width="22" height="22">
+            <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1.5"/>
+            <path d="M10 18 Q16 8 22 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            <circle cx="16" cy="20" r="1.6" fill="currentColor"/>
+          </svg>
+        </div>
+        <div className="ac-brand-text">
+          <div className="ac-brand-name">Curator</div>
+          <div className="ac-brand-sub">a museum companion</div>
+        </div>
+      </div>
+
+      <div className="ac-town-card">
+        <div className="ac-town-label">Active town</div>
+        <div className="ac-town-name">{town.townName}</div>
+        <div className="ac-town-meta">
+          <span>{town.game}</span>
+          <span className="ac-dot-sep">·</span>
+          <span>Hem. {town.hemisphere}</span>
+        </div>
+        <button className="ac-town-switch" onClick={onOpenTowns}>Switch town ›</button>
+      </div>
+
+      <nav className="ac-nav">
+        {tabs.map(t => (
+          <button
+            key={t.id}
+            className={`ac-nav-item ${currentTab===t.id?"ac-nav-item-active":""}`}
+            onClick={()=>onTab(t.id)}
+          >
+            <span>{t.label}</span>
+            {t.n && <span className="ac-nav-count">{t.n.donated}<span className="ac-nav-count-slash">/</span>{t.n.total}</span>}
+          </button>
+        ))}
+      </nav>
+
+      <div className="ac-sidebar-foot">
+        <button className="ac-foot-link">Export CSV</button>
+        <button className="ac-foot-link" onClick={onOpenSettings}>Settings</button>
+      </div>
+    </aside>
+  );
+}
+
+function MonthStrip({ current }) {
+  return (
+    <div className="ac-monthstrip">
+      {MONTHS.map((m,i) => (
+        <div key={m} className={`ac-monthstrip-cell ${i+1===current?"is-now":""}`}>
+          <span className="ac-monthstrip-num">{String(i+1).padStart(2,"0")}</span>
+          <span className="ac-monthstrip-name">{m}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ProgressMeter({ stats, gameId }) {
+  const hasSea = (gameId === "acnh" || gameId === "acnl") && stats.sea && stats.sea.total > 0;
+  const segKeys = hasSea
+    ? ["fish","bugs","fossils","art","sea"]
+    : ["fish","bugs","fossils","art"];
+
+  const total = segKeys.reduce((a,k) => a + stats[k].total, 0);
+  const done  = segKeys.reduce((a,k) => a + stats[k].donated, 0);
+  const pct = total > 0 ? Math.round((done/total)*100) : 0;
+
+  return (
+    <div className={`ac-meter ${hasSea?"ac-meter-5":"ac-meter-4"}`}>
+      <div className="ac-meter-head">
+        <div>
+          <div className="ac-meter-eyebrow">Museum progress</div>
+          <div className="ac-meter-num">
+            <span className="ac-meter-done">{done}</span>
+            <span className="ac-meter-of"> / {total}</span>
+          </div>
+        </div>
+        <div className="ac-meter-pct">{pct}<span className="ac-meter-pct-sym">%</span></div>
+      </div>
+      <div className="ac-meter-bar">
+        {segKeys.map(k => {
+          const seg = stats[k];
+          const frac = seg.total/total;
+          return (
+            <div key={k} className="ac-meter-seg" style={{flex: frac}}>
+              <div className="ac-meter-seg-fill" style={{
+                width: `${(seg.donated/seg.total)*100}%`,
+                background: `var(--chip-${k})`
+              }}/>
+              <div className="ac-meter-seg-label">
+                <span className="ac-meter-seg-dot" style={{background:`var(--chip-${k})`}}/>
+                <span className="ac-meter-seg-name">{k}</span>
+                <span className="ac-meter-seg-frac">{seg.donated}/{seg.total}</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+window.ACShell = { Sidebar, MonthStrip, ProgressMeter };
diff --git a/docs/design-handoffs/v0.9.2_curator/styles.css b/docs/design-handoffs/v0.9.2_curator/styles.css
new file mode 100644
index 0000000..3df4e54
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/styles.css
@@ -0,0 +1,576 @@
+/* AC Curator — soft museum aesthetic */
+
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=Varela+Round&display=swap');
+
+:root {
+  --bg: #F4EFE3;
+  --surface: #FFFDF7;
+  --surface-alt: #F8F2E2;
+  --ink: #23241F;
+  --ink-soft: #5C5848;
+  --ink-muted: #8A8470;
+  --border: #E2D9C3;
+  --border-strong: #CFC4A8;
+  --accent: oklch(0.55 0.09 150);
+  --accent-soft: oklch(0.55 0.09 150 / 0.12);
+  --accent-ink: oklch(0.32 0.06 150);
+  --warn: oklch(0.62 0.12 50);
+  --warn-soft: oklch(0.62 0.12 50 / 0.14);
+  --chip-fish: oklch(0.62 0.08 230);
+  --chip-bugs: oklch(0.6 0.1 130);
+  --chip-fossils: oklch(0.55 0.06 60);
+  --chip-art: oklch(0.58 0.08 320);
+  --chip-sea: oklch(0.58 0.09 200);
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-ui: 'Inter', system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  font-family: var(--font-ui);
+  background: var(--bg);
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: -0.005em;
+}
+button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
+
+/* ── App shell ── */
+.ac-app {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  min-height: 100vh;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+/* ── Sidebar ── */
+.ac-sidebar {
+  border-right: 1px solid var(--border);
+  padding: 28px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+.ac-brand { display: flex; gap: 12px; align-items: center; color: var(--accent); }
+.ac-brand-mark {
+  width: 38px; height: 38px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  display: grid; place-items: center;
+}
+.ac-brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
+.ac-brand-sub { font-size: 11px; color: var(--ink-muted); font-style: italic; font-family: var(--font-display); }
+
+.ac-town-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px 16px;
+}
+.ac-town-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-town-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-top: 2px; letter-spacing: -0.01em; }
+.ac-town-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
+.ac-dot-sep { color: var(--border-strong); }
+.ac-town-switch {
+  font-size: 12px; color: var(--accent-ink); margin-top: 10px;
+  padding: 0; text-align: left; font-weight: 500;
+}
+.ac-town-switch:hover { text-decoration: underline; }
+
+.ac-nav { display: flex; flex-direction: column; gap: 1px; }
+.ac-nav-item {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding: 10px 14px; border-radius: 9px;
+  font-size: 14px; color: var(--ink-soft); text-align: left;
+  transition: background 0.12s;
+}
+.ac-nav-item:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-nav-item-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
+.ac-nav-count { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-nav-count-slash { opacity: 0.5; margin: 0 1px; }
+.ac-nav-item-active .ac-nav-count { color: var(--accent-ink); }
+
+.ac-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
+.ac-foot-link { padding: 6px 14px; font-size: 12px; color: var(--ink-muted); text-align: left; }
+.ac-foot-link:hover { color: var(--ink); }
+
+/* ── Main column ── */
+.ac-main {
+  padding: 32px 48px 80px;
+  min-width: 0;
+}
+.ac-topbar {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 28px; gap: 16px;
+}
+.ac-search {
+  flex: 1; max-width: 380px;
+  display: flex; align-items: center; gap: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 12px;
+}
+.ac-search:focus-within { border-color: var(--border-strong); }
+.ac-search input { border: none; background: none; outline: none; font: inherit; flex: 1; color: var(--ink); }
+.ac-search input::placeholder { color: var(--ink-muted); }
+.ac-search-icon { color: var(--ink-muted); }
+
+.ac-topbar-actions { display: flex; gap: 8px; align-items: center; }
+.ac-date-chip {
+  display: flex; align-items: baseline; gap: 6px;
+  padding: 6px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 12px;
+  color: var(--ink-soft);
+}
+.ac-date-chip strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
+
+/* ── Hero ── */
+.ac-hero { margin-bottom: 36px; }
+.ac-hero-eyebrow {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin-bottom: 8px;
+}
+.ac-hero-title {
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: 38px;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  margin: 0 0 24px;
+  text-wrap: pretty;
+  max-width: 720px;
+}
+.ac-hero-title em { font-style: italic; color: var(--accent-ink); font-weight: 500; }
+.ac-hero-aside { color: var(--warn); font-style: italic; font-size: 0.85em; }
+
+/* ── Month strip ── */
+.ac-monthstrip {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 8px;
+}
+.ac-monthstrip-cell {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 10px 4px;
+  border-radius: 8px;
+  position: relative;
+}
+.ac-monthstrip-num {
+  font-size: 10px; color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ac-monthstrip-name {
+  font-family: var(--font-display);
+  font-size: 14px;
+  margin-top: 2px;
+  color: var(--ink-soft);
+}
+.ac-monthstrip-cell.is-now {
+  background: var(--accent-soft);
+}
+.ac-monthstrip-cell.is-now .ac-monthstrip-num { color: var(--accent-ink); }
+.ac-monthstrip-cell.is-now .ac-monthstrip-name { color: var(--accent-ink); font-weight: 500; }
+
+/* ── Progress meter ── */
+.ac-meter {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 18px 22px;
+  margin-bottom: 36px;
+}
+.ac-meter-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 18px;
+}
+.ac-meter-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
+.ac-meter-num { font-family: var(--font-display); font-size: 32px; line-height: 1; margin-top: 4px; letter-spacing: -0.02em; }
+.ac-meter-done { font-weight: 500; }
+.ac-meter-of { color: var(--ink-muted); font-weight: 400; }
+.ac-meter-pct { font-family: var(--font-display); font-size: 44px; font-weight: 500; color: var(--accent-ink); letter-spacing: -0.03em; line-height: 1; }
+.ac-meter-pct-sym { font-size: 0.5em; vertical-align: top; margin-left: 2px; opacity: 0.7; }
+
+.ac-meter-bar {
+  display: flex;
+  gap: 10px;
+}
+.ac-meter-5 .ac-meter-bar { gap: 8px; }
+.ac-meter-seg {
+  background: var(--surface-alt);
+  border-radius: 8px;
+  padding: 10px 12px;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+}
+.ac-meter-seg-fill {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  opacity: 0.18;
+  border-right: 2px solid currentColor;
+  z-index: 0;
+}
+.ac-meter-seg-label {
+  position: relative; z-index: 1;
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+.ac-meter-seg-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
+.ac-meter-seg-name { text-transform: capitalize; }
+.ac-meter-seg-frac { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
+
+/* 5-segment compaction at narrow main-column widths.
+   At medium widths, drop fractions; at very narrow, drop names too (dot + frac on first 2). */
+@media (max-width: 1180px) {
+  .ac-meter-5 .ac-meter-seg-frac { display: none; }
+  .ac-meter-5 .ac-meter-seg-label { padding: 7px 8px; gap: 5px; }
+}
+@media (max-width: 980px) {
+  .ac-meter-5 .ac-meter-bar { flex-wrap: wrap; gap: 6px; }
+  .ac-meter-5 .ac-meter-seg { flex-basis: calc(50% - 3px); flex-grow: 1; }
+  .ac-meter-5 .ac-meter-seg-frac { display: inline; }
+}
+
+/* ── Shelf (cards row) ── */
+.ac-shelf { margin-bottom: 36px; }
+.ac-shelf-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
+.ac-shelf-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); }
+.ac-shelf-eyebrow-warn { color: var(--warn); }
+.ac-shelf-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 4px 0 0; letter-spacing: -0.01em; }
+.ac-shelf-count { font-family: var(--font-display); font-size: 28px; color: var(--ink-muted); font-weight: 400; }
+
+.ac-cards {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.ac-card {
+  display: flex; gap: 14px; align-items: flex-start;
+  padding: 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  text-align: left;
+  transition: border-color 0.12s, transform 0.12s;
+}
+.ac-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
+.ac-card-glyph {
+  width: 44px; height: 44px;
+  border: 1.5px solid;
+  border-radius: 10px;
+  display: grid; place-items: center;
+  font-family: var(--font-display); font-size: 14px; font-weight: 500;
+  flex: none;
+  background: repeating-linear-gradient(135deg, transparent 0 4px, currentColor 4px 5px);
+  background-blend-mode: overlay;
+}
+.ac-card-glyph::before {
+  content: attr(data-i);
+}
+.ac-card-body { flex: 1; min-width: 0; }
+.ac-card-name { font-weight: 500; color: var(--ink); margin-bottom: 2px; }
+.ac-card-meta { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; text-transform: capitalize; }
+.ac-card-warn { color: var(--warn); font-size: 18px; }
+
+/* ── Month dots (in cards) ── */
+.ac-monthdots { display: flex; gap: 3px; }
+.ac-monthdot {
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+}
+.ac-monthdot.on { background: var(--accent); border-color: var(--accent); opacity: 0.6; }
+.ac-monthdot.here.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--accent-soft); }
+.ac-monthdot.here:not(.on) { border-color: var(--ink-muted); }
+
+/* ── Activity ── */
+.ac-activity {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.ac-activity-row {
+  display: grid;
+  grid-template-columns: 12px 1fr auto auto;
+  gap: 12px; align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-activity-row:last-child { border-bottom: none; }
+.ac-activity-dot { width: 8px; height: 8px; border-radius: 50%; }
+.ac-activity-name { color: var(--ink); }
+.ac-activity-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-activity-when { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+/* ── Category groups ── */
+.ac-category-head {
+  display: flex; justify-content: space-between; align-items: flex-end;
+  margin-bottom: 24px; padding-bottom: 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-category-title {
+  font-family: var(--font-display); font-weight: 400;
+  font-size: 44px; letter-spacing: -0.02em; margin: 0;
+}
+.ac-category-title em { font-style: italic; color: var(--accent-ink); }
+.ac-category-meta { font-size: 13px; color: var(--ink-soft); text-align: right; }
+.ac-category-meta strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: 18px; display: block; }
+
+.ac-group { margin-bottom: 28px; }
+.ac-group-head {
+  display: flex; align-items: baseline; gap: 12px;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+.ac-group-title {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ink-soft);
+}
+.ac-group-warn .ac-group-title { color: var(--warn); }
+.ac-group-accent .ac-group-title { color: var(--accent-ink); }
+.ac-group-done .ac-group-title { color: var(--ink-muted); }
+.ac-group-count { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+.ac-list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* ── Item row ── */
+.ac-row { border-bottom: 1px solid var(--border); }
+.ac-row:last-child { border-bottom: none; }
+
+/* ── Highlight pulse: 1.4s ease-out, accent-soft fill that fades back ── */
+.ac-row-pulse > .ac-row-main { animation: ac-row-pulse 1.4s ease-out; }
+@keyframes ac-row-pulse {
+  0%   { background: var(--accent-soft, color-mix(in oklch, var(--accent) 22%, transparent)); }
+  60%  { background: var(--accent-soft, color-mix(in oklch, var(--accent) 16%, transparent)); }
+  100% { background: var(--surface-alt); }
+}
+.ac-row-main {
+  display: flex; gap: 14px; align-items: center;
+  width: 100%;
+  padding: 12px 18px;
+  text-align: left;
+  transition: background 0.12s;
+}
+.ac-row-main:hover { background: var(--surface-alt); }
+.ac-row-expanded > .ac-row-main { background: var(--surface-alt); }
+.ac-row-donated .ac-row-name { color: var(--ink-muted); }
+.ac-row-donated .ac-row-name span:first-child { text-decoration: line-through; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; }
+
+.ac-glyph {
+  width: 32px; height: 32px;
+  border: 1.5px solid;
+  border-radius: 8px;
+  display: grid; place-items: center;
+  font-family: var(--font-display);
+  font-size: 11px; font-weight: 500;
+  flex: none;
+}
+.ac-row-text { flex: 1; min-width: 0; }
+.ac-row-name {
+  display: flex; align-items: center; gap: 8px;
+  font-weight: 500;
+}
+.ac-row-checkmark { color: var(--accent); font-size: 8px; }
+.ac-row-meta {
+  display: flex; gap: 0; font-size: 12px; color: var(--ink-muted);
+  margin-top: 2px;
+  flex-wrap: wrap;
+}
+.ac-row-meta-bit:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--border-strong); }
+.ac-row-meta-italic { font-style: italic; font-family: var(--font-display); }
+.ac-row-meta-bells { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.ac-row-side { display: flex; align-items: center; gap: 10px; flex: none; }
+.ac-row-time { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-chevron { color: var(--ink-muted); font-size: 18px; transition: transform 0.18s; line-height: 1; }
+.ac-chevron-open { transform: rotate(90deg); color: var(--ink); }
+
+/* ── Pills ── */
+.ac-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.ac-pill-warn { background: var(--warn-soft); color: var(--warn); }
+.ac-pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
+
+/* ── Expand panel ── */
+.ac-expand {
+  display: grid;
+  grid-template-columns: 1fr 240px;
+  gap: 28px;
+  padding: 4px 18px 22px 64px;
+  background: var(--surface-alt);
+  border-top: 1px solid var(--border);
+}
+.ac-expand-section { }
+.ac-expand-label {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin-bottom: 10px; margin-top: 14px;
+}
+.ac-monthgrid {
+  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
+}
+.ac-monthcell {
+  aspect-ratio: 1;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  display: grid; place-items: center;
+  position: relative;
+}
+.ac-monthcell-label {
+  font-size: 10px; color: var(--ink-muted);
+  font-family: var(--font-display);
+}
+.ac-monthcell.on { background: var(--accent-soft); border-color: var(--accent); }
+.ac-monthcell.on .ac-monthcell-label { color: var(--accent-ink); }
+.ac-monthcell.here { box-shadow: inset 0 0 0 1.5px var(--accent); }
+.ac-monthcell.here .ac-monthcell-label { font-weight: 600; }
+
+.ac-expand-side {
+  display: flex; flex-direction: column; gap: 10px;
+  padding-top: 14px;
+}
+.ac-stat {
+  display: flex; flex-direction: column; gap: 1px;
+}
+.ac-stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
+.ac-stat-num-text { font-size: 16px; }
+.ac-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-note {
+  font-size: 12px; color: var(--ink-soft); font-style: italic;
+  font-family: var(--font-display);
+  padding: 8px 10px;
+  background: var(--surface);
+  border-left: 2px solid var(--accent);
+  border-radius: 4px;
+}
+.ac-donate-btn {
+  margin-top: auto;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--surface);
+  font-weight: 500;
+  font-size: 13px;
+  transition: opacity 0.12s;
+}
+.ac-donate-btn:hover { opacity: 0.88; }
+.ac-donate-btn-on { background: var(--surface); color: var(--accent-ink); border: 1px solid var(--border-strong); }
+
+.ac-empty {
+  padding: 60px 0; text-align: center;
+  color: var(--ink-muted);
+  font-style: italic;
+  font-family: var(--font-display);
+}
+
+/* ── Stats ── */
+.ac-stats-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
+  margin-bottom: 36px;
+}
+.ac-statcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+}
+.ac-statcard-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
+.ac-statcard-num { font-family: var(--font-display); font-size: 32px; margin-top: 4px; letter-spacing: -0.02em; }
+.ac-statcard-of { color: var(--ink-muted); font-size: 0.6em; margin-left: 4px; }
+.ac-statcard-bar { height: 4px; background: var(--surface-alt); border-radius: 2px; overflow: hidden; margin-top: 10px; }
+.ac-statcard-fill { height: 100%; }
+.ac-statcard-pct { font-size: 11px; color: var(--ink-muted); margin-top: 6px; }
+
+.ac-chartcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px;
+}
+.ac-chart {
+  display: grid; grid-template-columns: repeat(12, 1fr);
+  gap: 6px;
+  height: 180px;
+  margin-top: 18px;
+  align-items: end;
+}
+.ac-chart-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
+.ac-chart-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
+.ac-chart-bar-bg {
+  width: 100%;
+  background: var(--surface-alt);
+  border-radius: 6px 6px 0 0;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-bottom: none;
+}
+.ac-chart-bar-fill {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  background: var(--accent);
+  opacity: 0.5;
+}
+.ac-chart-num { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.ac-chart-month { font-size: 11px; color: var(--ink-muted); font-family: var(--font-display); }
+.ac-chart-col.is-now .ac-chart-bar-bg { border-color: var(--accent); }
+.ac-chart-col.is-now .ac-chart-month { color: var(--accent-ink); font-weight: 600; }
+.ac-chart-legend {
+  display: flex; gap: 18px;
+  font-size: 11px; color: var(--ink-muted);
+  margin-top: 14px; padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.ac-chart-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
+.ac-chart-legend-dot-bg { background: var(--surface-alt); border: 1px solid var(--border); }
+.ac-chart-legend-dot-fill { background: var(--accent); opacity: 0.5; }
+
+/* ── Theme: parchment forces Varela ── */
+[data-theme="parchment"] .ac-hero-title em,
+[data-theme="parchment"] .ac-category-title em {
+  font-style: normal;
+}
+
+/* ── Responsive ── */
+@media (max-width: 980px) {
+  .ac-app { grid-template-columns: 1fr; }
+  .ac-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
+  .ac-main { padding: 24px 20px 60px; }
+  .ac-cards { grid-template-columns: 1fr; }
+  .ac-stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .ac-meter-bar { flex-wrap: wrap; }
+  .ac-expand { grid-template-columns: 1fr; padding-left: 18px; }
+  .ac-hero-title { font-size: 28px; }
+  .ac-monthstrip-name { font-size: 12px; }
+}
diff --git a/docs/design-handoffs/v0.9.2_curator/tabs.jsx b/docs/design-handoffs/v0.9.2_curator/tabs.jsx
new file mode 100644
index 0000000..7a374b2
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/tabs.jsx
@@ -0,0 +1,288 @@
+/* global React, ACComponents, ACShell */
+const { useState, useMemo, useEffect } = React;
+const { ItemRow, Pill, MonthDots, MONTHS, MONTHS_LONG } = ACComponents;
+const { MonthStrip, ProgressMeter } = ACShell;
+
+// ── Home tab ──
+function HomeTab({ data, donated, currentMonth, onJump, onToggle, showLeavingShelf = true, showNewShelf = true, gameId }) {
+  const hasSea = (gameId === "acnh" || gameId === "acnl") && data.sea && data.sea.length > 0;
+  const allItems = useMemo(() => [
+    ...data.fish.map(x=>({...x, _cat:"fish"})),
+    ...data.bugs.map(x=>({...x, _cat:"bugs"})),
+    ...(hasSea ? data.sea.map(x=>({...x, _cat:"sea"})) : []),
+  ], [data, hasSea]);
+
+  const leavingSoon = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth === 12 ? 1 : currentMonth+1) &&
+    !donated[it._cat].has(it.id)
+  );
+
+  const newThisMonth = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth === 1 ? 12 : currentMonth-1) &&
+    !donated[it._cat].has(it.id)
+  );
+
+  const stillNeeded = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) && !donated[it._cat].has(it.id)
+  ).length;
+
+  return (
+    <div className="ac-home">
+      <div className="ac-hero">
+        <div className="ac-hero-eyebrow">Available in {MONTHS_LONG[currentMonth-1]}</div>
+        <h1 className="ac-hero-title">
+          <em>{stillNeeded}</em> creatures still to donate this month.
+          {leavingSoon.length > 0 && <><br/><span className="ac-hero-aside">{leavingSoon.length} are leaving soon.</span></>}
+        </h1>
+        <MonthStrip current={currentMonth} />
+      </div>
+
+      <ProgressMeter
+        gameId={gameId}
+        stats={{
+          fish: { donated: donated.fish.size, total: data.fish.length },
+          bugs: { donated: donated.bugs.size, total: data.bugs.length },
+          fossils: { donated: donated.fossils.size, total: data.fossils.length },
+          art: { donated: donated.art.size, total: data.art.length },
+          sea: { donated: (donated.sea||new Set()).size, total: (data.sea||[]).length },
+        }}
+      />
+
+      {showLeavingShelf && leavingSoon.length > 0 && (
+        <section className="ac-shelf">
+          <div className="ac-shelf-head">
+            <div>
+              <div className="ac-shelf-eyebrow ac-shelf-eyebrow-warn">Leaving end of month</div>
+              <h2 className="ac-shelf-title">Catch these before {MONTHS_LONG[currentMonth-1]} ends</h2>
+            </div>
+            <span className="ac-shelf-count">{leavingSoon.length}</span>
+          </div>
+          <div className="ac-cards">
+            {leavingSoon.slice(0,6).map(it => (
+              <button key={it._cat+it.id} className="ac-card" onClick={()=>onJump(it._cat, it.id)}>
+                <div className="ac-card-glyph" style={{borderColor:`var(--chip-${it._cat})`,color:`var(--chip-${it._cat})`}}>
+                  {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+                </div>
+                <div className="ac-card-body">
+                  <div className="ac-card-name">{it.name}</div>
+                  <div className="ac-card-meta">
+                    <span style={{color:`var(--chip-${it._cat})`}}>{it._cat}</span>
+                    <span> · {it.value.toLocaleString()} ✦</span>
+                  </div>
+                  <MonthDots months={it.months} current={currentMonth} />
+                </div>
+                <div className="ac-card-warn">⚠</div>
+              </button>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {showNewShelf && newThisMonth.length > 0 && (
+      <section className="ac-shelf">
+        <div className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Just arrived</div>
+            <h2 className="ac-shelf-title">New this month</h2>
+          </div>
+          <span className="ac-shelf-count">{newThisMonth.length}</span>
+        </div>
+        <div className="ac-cards">
+          {newThisMonth.slice(0,6).map(it => (
+            <button key={it._cat+it.id} className="ac-card" onClick={()=>onJump(it._cat, it.id)}>
+              <div className="ac-card-glyph" style={{borderColor:`var(--chip-${it._cat})`,color:`var(--chip-${it._cat})`}}>
+                {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+              </div>
+              <div className="ac-card-body">
+                <div className="ac-card-name">{it.name}</div>
+                <div className="ac-card-meta">
+                  <span style={{color:`var(--chip-${it._cat})`}}>{it._cat}</span>
+                  <span> · {it.value.toLocaleString()} ✦</span>
+                </div>
+                <MonthDots months={it.months} current={currentMonth} />
+              </div>
+            </button>
+          ))}
+        </div>
+      </section>
+      )}
+
+      <section className="ac-shelf">
+        <div className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Recent</div>
+            <h2 className="ac-shelf-title">Latest donations</h2>
+          </div>
+        </div>
+        <div className="ac-activity">
+          {data.recentActivity.map((a,i) => (
+            <div key={i} className="ac-activity-row">
+              <div className="ac-activity-dot" style={{background:`var(--chip-${a.category})`}}/>
+              <div className="ac-activity-name">{a.item}</div>
+              <div className="ac-activity-cat">{a.category}</div>
+              <div className="ac-activity-when">{a.when}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// ── Category tab (sectioned list) ──
+function CategoryTab({ category, items, donated, onToggle, currentMonth, search, highlightId, onHighlightConsumed }) {
+  const [expanded, setExpanded] = useState(null);
+
+  // Scroll-to + highlight when highlightId arrives
+  useEffect(() => {
+    if (!highlightId) return;
+    setExpanded(highlightId);
+    // wait a frame for expand to render
+    const raf = requestAnimationFrame(() => {
+      const el = document.querySelector(`[data-row-id="${CSS.escape(highlightId)}"]`);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+        el.classList.add("ac-row-pulse");
+        setTimeout(() => el.classList.remove("ac-row-pulse"), 1400);
+      }
+      onHighlightConsumed && onHighlightConsumed();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [highlightId, onHighlightConsumed]);
+
+  const lowered = search.trim().toLowerCase();
+  const filtered = lowered
+    ? items.filter(i => i.name.toLowerCase().includes(lowered) || (i.basedOn||"").toLowerCase().includes(lowered))
+    : items;
+
+  const isAvail = (it) => it.months ? it.months.includes(currentMonth) : true;
+  const isLeavingSoon = (it) => it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth===12?1:currentMonth+1);
+
+  const groups = useMemo(() => {
+    const leaving = [], avail = [], done = [], locked = [];
+    for (const it of filtered) {
+      const isDonated = donated.has(it.id);
+      if (isDonated) done.push(it);
+      else if (isLeavingSoon(it)) leaving.push(it);
+      else if (isAvail(it)) avail.push(it);
+      else locked.push(it);
+    }
+    const byName = (a,b)=>a.name.localeCompare(b.name);
+    return [
+      { id: "leaving", label: "Leaving this month", items: leaving.sort(byName), tone: "warn" },
+      { id: "avail",   label: "Available now",       items: avail.sort(byName),   tone: "accent" },
+      { id: "locked",  label: "Out of season",       items: locked.sort(byName),  tone: "muted" },
+      { id: "done",    label: "Already donated",     items: done.sort(byName),    tone: "done" },
+    ].filter(g => g.items.length > 0);
+  }, [filtered, donated, currentMonth]);
+
+  return (
+    <div className="ac-category">
+      {groups.map(g => (
+        <section key={g.id} className={`ac-group ac-group-${g.tone}`}>
+          <header className="ac-group-head">
+            <h3 className="ac-group-title">{g.label}</h3>
+            <span className="ac-group-count">{g.items.length}</span>
+          </header>
+          <div className="ac-list">
+            {g.items.map(it => (
+              <ItemRow
+                key={it.id}
+                item={it}
+                category={category}
+                donated={donated.has(it.id)}
+                onToggle={()=>onToggle(it.id)}
+                currentMonth={currentMonth}
+                expanded={expanded === it.id}
+                onExpand={()=>setExpanded(expanded===it.id?null:it.id)}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+      {groups.length === 0 && (
+        <div className="ac-empty">No matches for "{search}"</div>
+      )}
+    </div>
+  );
+}
+
+// ── Stats tab ──
+function StatsTab({ data, donated, currentMonth }) {
+  const counts = {
+    fish: { donated: donated.fish.size, total: data.fish.length },
+    bugs: { donated: donated.bugs.size, total: data.bugs.length },
+    fossils: { donated: donated.fossils.size, total: data.fossils.length },
+    art: { donated: donated.art.size, total: data.art.length },
+  };
+
+  // monthly bars: how many fish+bugs available per month
+  const monthlyAvail = MONTHS.map((_, i) => {
+    const m = i+1;
+    let avail = 0, donatedCount = 0;
+    for (const cat of ["fish","bugs"]) {
+      for (const it of data[cat]) {
+        if (it.months && it.months.includes(m)) {
+          avail++;
+          if (donated[cat].has(it.id)) donatedCount++;
+        }
+      }
+    }
+    return { avail, donatedCount, m };
+  });
+  const maxAvail = Math.max(...monthlyAvail.map(x=>x.avail));
+
+  return (
+    <div className="ac-stats">
+      <div className="ac-stats-grid">
+        {Object.entries(counts).map(([k,v]) => (
+          <div key={k} className="ac-statcard">
+            <div className="ac-statcard-cat" style={{color:`var(--chip-${k})`}}>{k}</div>
+            <div className="ac-statcard-num">
+              <span>{v.donated}</span>
+              <span className="ac-statcard-of">/ {v.total}</span>
+            </div>
+            <div className="ac-statcard-bar">
+              <div className="ac-statcard-fill" style={{
+                width: `${(v.donated/v.total)*100}%`,
+                background:`var(--chip-${k})`
+              }}/>
+            </div>
+            <div className="ac-statcard-pct">{Math.round((v.donated/v.total)*100)}% complete</div>
+          </div>
+        ))}
+      </div>
+
+      <section className="ac-chartcard">
+        <header className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Yearly rhythm</div>
+            <h2 className="ac-shelf-title">Fish &amp; bug availability by month</h2>
+          </div>
+        </header>
+        <div className="ac-chart">
+          {monthlyAvail.map(({avail, donatedCount, m}, i) => (
+            <div key={m} className={`ac-chart-col ${m===currentMonth?"is-now":""}`}>
+              <div className="ac-chart-bar">
+                <div className="ac-chart-bar-bg" style={{height: `${(avail/maxAvail)*100}%`}}>
+                  <div className="ac-chart-bar-fill" style={{height: `${(donatedCount/avail)*100}%`}}/>
+                </div>
+              </div>
+              <div className="ac-chart-num">{avail}</div>
+              <div className="ac-chart-month">{MONTHS[i]}</div>
+            </div>
+          ))}
+        </div>
+        <div className="ac-chart-legend">
+          <span><span className="ac-chart-legend-dot ac-chart-legend-dot-bg"/>Available</span>
+          <span><span className="ac-chart-legend-dot ac-chart-legend-dot-fill"/>Already donated</span>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+window.ACTabs = { HomeTab, CategoryTab, StatsTab };
diff --git a/docs/design-handoffs/v0.9.2_curator/theme.js b/docs/design-handoffs/v0.9.2_curator/theme.js
new file mode 100644
index 0000000..3d903b1
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/theme.js
@@ -0,0 +1,105 @@
+// Theme tokens. Exposed as CSS variables on :root via setTheme().
+window.THEMES = {
+  meadow: {
+    label: "Meadow",
+    bg: "#F4EFE3",
+    surface: "#FFFDF7",
+    surfaceAlt: "#F8F2E2",
+    ink: "#23241F",
+    inkSoft: "#5C5848",
+    inkMuted: "#8A8470",
+    border: "#E2D9C3",
+    borderStrong: "#CFC4A8",
+    accent: "oklch(0.55 0.09 150)", // moss
+    accentSoft: "oklch(0.55 0.09 150 / 0.12)",
+    accentInk: "oklch(0.32 0.06 150)",
+    warn: "oklch(0.62 0.12 50)", // clay
+    warnSoft: "oklch(0.62 0.12 50 / 0.14)",
+    chipFish: "oklch(0.62 0.08 230)",
+    chipBugs: "oklch(0.6 0.1 130)",
+    chipFossils: "oklch(0.55 0.06 60)",
+    chipArt: "oklch(0.58 0.08 320)",
+    chipSea: "oklch(0.58 0.09 200)",
+    fontDisplay: "'Fraunces', 'Playfair Display', Georgia, serif",
+    fontUi: "'Inter', system-ui, -apple-system, sans-serif",
+  },
+  parchment: {
+    label: "Parchment (current)",
+    bg: "#EFE6D0",
+    surface: "#F5E9D4",
+    surfaceAlt: "#EADCBE",
+    ink: "#2A2A2A",
+    inkSoft: "#5a4a35",
+    inkMuted: "#8B7A5C",
+    border: "#E0D2B0",
+    borderStrong: "#C9B98D",
+    accent: "#3CA370",
+    accentSoft: "rgba(60,163,112,0.14)",
+    accentInk: "#1F5A3C",
+    warn: "#C76B3F",
+    warnSoft: "rgba(199,107,63,0.16)",
+    chipFish: "#3F6FA8",
+    chipBugs: "#7B9C3A",
+    chipFossils: "#7B5E3B",
+    chipArt: "#8B5E94",
+    chipSea: "#3D8B96",
+    fontDisplay: "'Varela Round', system-ui, sans-serif",
+    fontUi: "'Varela Round', system-ui, sans-serif",
+  },
+  midnight: {
+    label: "Midnight",
+    bg: "#16181F",
+    surface: "#1E212A",
+    surfaceAlt: "#262A35",
+    ink: "#EFEAE0",
+    inkSoft: "#B5AE9E",
+    inkMuted: "#7E7866",
+    border: "#2F3340",
+    borderStrong: "#3D4250",
+    accent: "oklch(0.7 0.09 150)",
+    accentSoft: "oklch(0.7 0.09 150 / 0.16)",
+    accentInk: "oklch(0.85 0.06 150)",
+    warn: "oklch(0.72 0.12 50)",
+    warnSoft: "oklch(0.72 0.12 50 / 0.18)",
+    chipFish: "oklch(0.72 0.09 230)",
+    chipBugs: "oklch(0.74 0.09 130)",
+    chipFossils: "oklch(0.7 0.06 60)",
+    chipArt: "oklch(0.72 0.08 320)",
+    chipSea: "oklch(0.74 0.08 200)",
+    fontDisplay: "'Fraunces', Georgia, serif",
+    fontUi: "'Inter', system-ui, sans-serif",
+  },
+  sakura: {
+    label: "Sakura",
+    bg: "#FBF0EE",
+    surface: "#FFFCFB",
+    surfaceAlt: "#F7E5E1",
+    ink: "#2C2228",
+    inkSoft: "#705661",
+    inkMuted: "#9C8590",
+    border: "#EFD9D3",
+    borderStrong: "#DEBDB4",
+    accent: "oklch(0.6 0.11 10)", // rose
+    accentSoft: "oklch(0.6 0.11 10 / 0.12)",
+    accentInk: "oklch(0.4 0.09 10)",
+    warn: "oklch(0.6 0.13 50)",
+    warnSoft: "oklch(0.6 0.13 50 / 0.14)",
+    chipFish: "oklch(0.6 0.08 230)",
+    chipBugs: "oklch(0.6 0.09 130)",
+    chipFossils: "oklch(0.55 0.06 60)",
+    chipArt: "oklch(0.58 0.08 320)",
+    chipSea: "oklch(0.6 0.08 200)",
+    fontDisplay: "'Fraunces', Georgia, serif",
+    fontUi: "'Inter', system-ui, sans-serif",
+  },
+};
+
+window.applyTheme = function applyTheme(name) {
+  const t = window.THEMES[name] || window.THEMES.meadow;
+  const root = document.documentElement;
+  for (const [k, v] of Object.entries(t)) {
+    if (k === "label") continue;
+    root.style.setProperty(`--${k.replace(/([A-Z])/g, "-$1").toLowerCase()}`, v);
+  }
+  root.dataset.theme = name;
+};
diff --git a/docs/design-handoffs/v0.9.2_curator/tweaks-panel.jsx b/docs/design-handoffs/v0.9.2_curator/tweaks-panel.jsx
new file mode 100644
index 0000000..5f8f95a
--- /dev/null
+++ b/docs/design-handoffs/v0.9.2_curator/tweaks-panel.jsx
@@ -0,0 +1,425 @@
+
+// tweaks-panel.jsx
+// Reusable Tweaks shell + form-control helpers.
+//
+// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
+// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
+// individual prototypes don't re-roll it. Ships a consistent set of controls so you
+// don't hand-draw <input type="range">, segmented radios, steppers, etc.
+//
+// Usage (in an HTML file that loads React + Babel):
+//
+//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+//     "primaryColor": "#D97757",
+//     "fontSize": 16,
+//     "density": "regular",
+//     "dark": false
+//   }/*EDITMODE-END*/;
+//
+//   function App() {
+//     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+//     return (
+//       <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
+//         Hello
+//         <TweaksPanel>
+//           <TweakSection label="Typography" />
+//           <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
+//                        onChange={(v) => setTweak('fontSize', v)} />
+//           <TweakRadio  label="Density" value={t.density}
+//                        options={['compact', 'regular', 'comfy']}
+//                        onChange={(v) => setTweak('density', v)} />
+//           <TweakSection label="Theme" />
+//           <TweakColor  label="Primary" value={t.primaryColor}
+//                        onChange={(v) => setTweak('primaryColor', v)} />
+//           <TweakToggle label="Dark mode" value={t.dark}
+//                        onChange={(v) => setTweak('dark', v)} />
+//         </TweaksPanel>
+//       </div>
+//     );
+//   }
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+const __TWEAKS_STYLE = `
+  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
+    max-height:calc(100vh - 32px);display:flex;flex-direction:column;
+    background:rgba(250,249,247,.78);color:#29261b;
+    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
+    border:.5px solid rgba(255,255,255,.6);border-radius:14px;
+    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
+    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
+  .twk-hd{display:flex;align-items:center;justify-content:space-between;
+    padding:10px 8px 10px 14px;cursor:move;user-select:none}
+  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
+  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
+    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
+  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
+  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
+    overflow-y:auto;overflow-x:hidden;min-height:0;
+    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
+  .twk-body::-webkit-scrollbar{width:8px}
+  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
+  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
+    border:2px solid transparent;background-clip:content-box}
+  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
+    border:2px solid transparent;background-clip:content-box}
+  .twk-row{display:flex;flex-direction:column;gap:5px}
+  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
+  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
+    color:rgba(41,38,27,.72)}
+  .twk-lbl>span:first-child{font-weight:500}
+  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
+
+  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+    color:rgba(41,38,27,.45);padding:10px 0 0}
+  .twk-sect:first-child{padding-top:0}
+
+  .twk-field{appearance:none;width:100%;height:26px;padding:0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
+    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
+  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
+  select.twk-field{padding-right:22px;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
+    background-repeat:no-repeat;background-position:right 8px center}
+
+  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
+    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
+  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
+    width:14px;height:14px;border-radius:50%;background:#fff;
+    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
+    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+
+  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
+    background:rgba(0,0,0,.06);user-select:none}
+  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
+    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
+    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
+  .twk-seg.dragging .twk-seg-thumb{transition:none}
+  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
+    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
+    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
+    overflow-wrap:anywhere}
+
+  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
+    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
+  .twk-toggle[data-on="1"]{background:#34c759}
+  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
+
+  .twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
+  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
+    user-select:none;padding-right:8px}
+  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
+    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
+    outline:none;color:inherit;-moz-appearance:textfield}
+  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
+    -webkit-appearance:none;margin:0}
+  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
+
+  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
+    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
+  .twk-btn:hover{background:rgba(0,0,0,.88)}
+  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
+  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
+
+  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
+    background:transparent;flex-shrink:0}
+  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
+  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
+  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
+`;
+
+// ── useTweaks ───────────────────────────────────────────────────────────────
+// Single source of truth for tweak values. setTweak persists via the host
+// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
+function useTweaks(defaults) {
+  const [values, setValues] = React.useState(defaults);
+  // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
+  // useState-style call doesn't write a "[object Object]" key into the persisted
+  // JSON block.
+  const setTweak = React.useCallback((keyOrEdits, val) => {
+    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
+      ? keyOrEdits : { [keyOrEdits]: val };
+    setValues((prev) => ({ ...prev, ...edits }));
+    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
+  }, []);
+  return [values, setTweak];
+}
+
+// ── TweaksPanel ─────────────────────────────────────────────────────────────
+// Floating shell. Registers the protocol listener BEFORE announcing
+// availability — if the announce ran first, the host's activate could land
+// before our handler exists and the toolbar toggle would silently no-op.
+// The close button posts __edit_mode_dismissed so the host's toolbar toggle
+// flips off in lockstep; the host echoes __deactivate_edit_mode back which
+// is what actually hides the panel.
+function TweaksPanel({ title = 'Tweaks', children }) {
+  const [open, setOpen] = React.useState(false);
+  const dragRef = React.useRef(null);
+  const offsetRef = React.useRef({ x: 16, y: 16 });
+  const PAD = 16;
+
+  const clampToViewport = React.useCallback(() => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const w = panel.offsetWidth, h = panel.offsetHeight;
+    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
+    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
+    offsetRef.current = {
+      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
+      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
+    };
+    panel.style.right = offsetRef.current.x + 'px';
+    panel.style.bottom = offsetRef.current.y + 'px';
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) return;
+    clampToViewport();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', clampToViewport);
+      return () => window.removeEventListener('resize', clampToViewport);
+    }
+    const ro = new ResizeObserver(clampToViewport);
+    ro.observe(document.documentElement);
+    return () => ro.disconnect();
+  }, [open, clampToViewport]);
+
+  React.useEffect(() => {
+    const onMsg = (e) => {
+      const t = e?.data?.type;
+      if (t === '__activate_edit_mode') setOpen(true);
+      else if (t === '__deactivate_edit_mode') setOpen(false);
+    };
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+
+  const dismiss = () => {
+    setOpen(false);
+    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
+  };
+
+  const onDragStart = (e) => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const r = panel.getBoundingClientRect();
+    const sx = e.clientX, sy = e.clientY;
+    const startRight = window.innerWidth - r.right;
+    const startBottom = window.innerHeight - r.bottom;
+    const move = (ev) => {
+      offsetRef.current = {
+        x: startRight - (ev.clientX - sx),
+        y: startBottom - (ev.clientY - sy),
+      };
+      clampToViewport();
+    };
+    const up = () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  };
+
+  if (!open) return null;
+  return (
+    <>
+      <style>{__TWEAKS_STYLE}</style>
+      <div ref={dragRef} className="twk-panel" data-noncommentable=""
+           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
+        <div className="twk-hd" onMouseDown={onDragStart}>
+          <b>{title}</b>
+          <button className="twk-x" aria-label="Close tweaks"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={dismiss}>✕</button>
+        </div>
+        <div className="twk-body">{children}</div>
+      </div>
+    </>
+  );
+}
+
+// ── Layout helpers ──────────────────────────────────────────────────────────
+
+function TweakSection({ label, children }) {
+  return (
+    <>
+      <div className="twk-sect">{label}</div>
+      {children}
+    </>
+  );
+}
+
+function TweakRow({ label, value, children, inline = false }) {
+  return (
+    <div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
+      <div className="twk-lbl">
+        <span>{label}</span>
+        {value != null && <span className="twk-val">{value}</span>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Controls ────────────────────────────────────────────────────────────────
+
+function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
+  return (
+    <TweakRow label={label} value={`${value}${unit}`}>
+      <input type="range" className="twk-slider" min={min} max={max} step={step}
+             value={value} onChange={(e) => onChange(Number(e.target.value))} />
+    </TweakRow>
+  );
+}
+
+function TweakToggle({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
+              role="switch" aria-checked={!!value}
+              onClick={() => onChange(!value)}><i /></button>
+    </div>
+  );
+}
+
+function TweakRadio({ label, value, options, onChange }) {
+  const trackRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
+  const idx = Math.max(0, opts.findIndex((o) => o.value === value));
+  const n = opts.length;
+
+  // The active value is read by pointer-move handlers attached for the lifetime
+  // of a drag — ref it so a stale closure doesn't fire onChange for every move.
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+
+  const segAt = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const inner = r.width - 4;
+    const i = Math.floor(((clientX - r.left - 2) / inner) * n);
+    return opts[Math.max(0, Math.min(n - 1, i))].value;
+  };
+
+  const onPointerDown = (e) => {
+    setDragging(true);
+    const v0 = segAt(e.clientX);
+    if (v0 !== valueRef.current) onChange(v0);
+    const move = (ev) => {
+      if (!trackRef.current) return;
+      const v = segAt(ev.clientX);
+      if (v !== valueRef.current) onChange(v);
+    };
+    const up = () => {
+      setDragging(false);
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+
+  return (
+    <TweakRow label={label}>
+      <div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
+           className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
+        <div className="twk-seg-thumb"
+             style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
+                      width: `calc((100% - 4px) / ${n})` }} />
+        {opts.map((o) => (
+          <button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
+            {o.label}
+          </button>
+        ))}
+      </div>
+    </TweakRow>
+  );
+}
+
+function TweakSelect({ label, value, options, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
+        {options.map((o) => {
+          const v = typeof o === 'object' ? o.value : o;
+          const l = typeof o === 'object' ? o.label : o;
+          return <option key={v} value={v}>{l}</option>;
+        })}
+      </select>
+    </TweakRow>
+  );
+}
+
+function TweakText({ label, value, placeholder, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <input className="twk-field" type="text" value={value} placeholder={placeholder}
+             onChange={(e) => onChange(e.target.value)} />
+    </TweakRow>
+  );
+}
+
+function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
+  const clamp = (n) => {
+    if (min != null && n < min) return min;
+    if (max != null && n > max) return max;
+    return n;
+  };
+  const startRef = React.useRef({ x: 0, val: 0 });
+  const onScrubStart = (e) => {
+    e.preventDefault();
+    startRef.current = { x: e.clientX, val: value };
+    const decimals = (String(step).split('.')[1] || '').length;
+    const move = (ev) => {
+      const dx = ev.clientX - startRef.current.x;
+      const raw = startRef.current.val + dx * step;
+      const snapped = Math.round(raw / step) * step;
+      onChange(clamp(Number(snapped.toFixed(decimals))));
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+  return (
+    <div className="twk-num">
+      <span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
+      <input type="number" value={value} min={min} max={max} step={step}
+             onChange={(e) => onChange(clamp(Number(e.target.value)))} />
+      {unit && <span className="twk-num-unit">{unit}</span>}
+    </div>
+  );
+}
+
+function TweakColor({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <input type="color" className="twk-swatch" value={value}
+             onChange={(e) => onChange(e.target.value)} />
+    </div>
+  );
+}
+
+function TweakButton({ label, onClick, secondary = false }) {
+  return (
+    <button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
+            onClick={onClick}>{label}</button>
+  );
+}
+
+Object.assign(window, {
+  useTweaks, TweaksPanel, TweakSection, TweakRow,
+  TweakSlider, TweakToggle, TweakRadio, TweakSelect,
+  TweakText, TweakNumber, TweakColor, TweakButton,
+});
diff --git a/docs/design-handoffs/v0.9_curator/Curator.html b/docs/design-handoffs/v0.9_curator/Curator.html
new file mode 100644
index 0000000..5dc8dad
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/Curator.html
@@ -0,0 +1,220 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Curator — AC Museum Tracker</title>
+<link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+<div id="root"></div>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+
+<script src="data.js"></script>
+<script src="theme.js"></script>
+<script type="text/babel" src="components.jsx"></script>
+<script type="text/babel" src="shell.jsx"></script>
+<script type="text/babel" src="tabs.jsx"></script>
+<script type="text/babel" src="tweaks-panel.jsx"></script>
+
+<script type="text/babel">
+const { useState, useMemo, useEffect } = React;
+const { Sidebar } = window.ACShell;
+const { HomeTab, CategoryTab, StatsTab } = window.ACTabs;
+const { MONTHS_LONG } = window.ACComponents;
+const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakSlider, useTweaks } = window;
+
+const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "theme": "meadow",
+  "currentMonth": 5,
+  "showLeavingShelf": true,
+  "showNewShelf": true,
+  "compactRows": false,
+  "hideDonated": false
+}/*EDITMODE-END*/;
+
+function App() {
+  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
+  const data = window.MUSEUM_DATA;
+  const [tab, setTab] = useState("home");
+  const [search, setSearch] = useState("");
+
+  // donated state — sets per category
+  const [donated, setDonated] = useState({
+    fish: new Set(data.donated.fish),
+    bugs: new Set(data.donated.bugs),
+    fossils: new Set(data.donated.fossils),
+    art: new Set(data.donated.art),
+  });
+
+  useEffect(() => { window.applyTheme(tweaks.theme); }, [tweaks.theme]);
+
+  function toggleDonated(cat, id) {
+    setDonated(prev => {
+      const next = { ...prev };
+      const s = new Set(prev[cat]);
+      if (s.has(id)) s.delete(id); else s.add(id);
+      next[cat] = s;
+      return next;
+    });
+  }
+
+  const stats = {
+    fish:    { donated: donated.fish.size,    total: data.fish.length },
+    bugs:    { donated: donated.bugs.size,    total: data.bugs.length },
+    fossils: { donated: donated.fossils.size, total: data.fossils.length },
+    art:     { donated: donated.art.size,     total: data.art.length },
+  };
+
+  const currentMonth = tweaks.currentMonth;
+
+  function jumpTo(cat, id) {
+    setTab(cat);
+    // could scroll to id, kept simple
+  }
+
+  // Filter donated rows out if hideDonated tweak is on
+  const filteredCat = (cat) => {
+    if (!tweaks.hideDonated) return data[cat];
+    return data[cat].filter(it => !donated[cat].has(it.id));
+  };
+
+  return (
+    <div className="ac-app" data-compact={tweaks.compactRows ? "true" : "false"}>
+      <Sidebar town={{...data.meta}} currentTab={tab} onTab={setTab} stats={stats} />
+
+      <main className="ac-main">
+        <div className="ac-topbar">
+          <div className="ac-search">
+            <svg className="ac-search-icon" width="14" height="14" viewBox="0 0 16 16" fill="none">
+              <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.4"/>
+              <path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
+            </svg>
+            <input
+              placeholder={tab === "home" ? "Search across categories…" : `Search ${tab}…`}
+              value={search}
+              onChange={e=>setSearch(e.target.value)}
+            />
+          </div>
+          <div className="ac-topbar-actions">
+            <div className="ac-date-chip">
+              <span>Sat</span>
+              <strong>May {data.meta.currentDay}</strong>
+            </div>
+          </div>
+        </div>
+
+        {tab === "home" && (
+          <HomeTab
+            data={{...data,
+              recentActivity: data.recentActivity,
+            }}
+            donated={donated}
+            currentMonth={currentMonth}
+            onJump={jumpTo}
+            onToggle={toggleDonated}
+            showLeavingShelf={tweaks.showLeavingShelf}
+            showNewShelf={tweaks.showNewShelf}
+          />
+        )}
+
+        {["fish","bugs","fossils","art"].includes(tab) && (
+          <>
+            <header className="ac-category-head">
+              <h1 className="ac-category-title">
+                <em>{stats[tab].donated}</em> of {stats[tab].total} {tab}
+              </h1>
+              <div className="ac-category-meta">
+                <strong>{Math.round((stats[tab].donated/stats[tab].total)*100)}% complete</strong>
+                {tab !== "art" && tab !== "fossils" && `Showing availability for ${MONTHS_LONG[currentMonth-1]}`}
+              </div>
+            </header>
+            <CategoryTab
+              category={tab}
+              items={filteredCat(tab)}
+              donated={donated[tab]}
+              onToggle={(id)=>toggleDonated(tab, id)}
+              currentMonth={currentMonth}
+              search={search}
+            />
+          </>
+        )}
+
+        {tab === "stats" && (
+          <>
+            <header className="ac-category-head">
+              <h1 className="ac-category-title"><em>Stats</em> &amp; rhythms</h1>
+              <div className="ac-category-meta">
+                <strong>{data.meta.townName}</strong>
+                {data.meta.game}
+              </div>
+            </header>
+            <StatsTab data={data} donated={donated} currentMonth={currentMonth} />
+          </>
+        )}
+      </main>
+
+      <TweaksPanel title="Tweaks">
+        <TweakSection title="Theme">
+          <TweakSelect
+            label="Palette"
+            value={tweaks.theme}
+            onChange={v => setTweak("theme", v)}
+            options={[
+              { value: "meadow",     label: "Meadow (default)" },
+              { value: "parchment",  label: "Parchment (current app)" },
+              { value: "midnight",   label: "Midnight" },
+              { value: "sakura",     label: "Sakura" },
+            ]}
+          />
+        </TweakSection>
+
+        <TweakSection title="Time">
+          <TweakSlider
+            label={`Current month — ${MONTHS_LONG[tweaks.currentMonth-1]}`}
+            value={tweaks.currentMonth}
+            onChange={v => setTweak("currentMonth", v)}
+            min={1} max={12} step={1}
+          />
+        </TweakSection>
+
+        <TweakSection title="Layout">
+          <TweakToggle
+            label="Show 'Leaving soon' shelf"
+            value={tweaks.showLeavingShelf}
+            onChange={v => setTweak("showLeavingShelf", v)}
+          />
+          <TweakToggle
+            label="Show 'New this month' shelf"
+            value={tweaks.showNewShelf}
+            onChange={v => setTweak("showNewShelf", v)}
+          />
+          <TweakToggle
+            label="Hide donated items in lists"
+            value={tweaks.hideDonated}
+            onChange={v => setTweak("hideDonated", v)}
+          />
+          <TweakToggle
+            label="Compact row density"
+            value={tweaks.compactRows}
+            onChange={v => setTweak("compactRows", v)}
+          />
+        </TweakSection>
+      </TweaksPanel>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+</script>
+
+<style id="__compact-density">
+[data-compact="true"] .ac-row-main { padding: 8px 18px; }
+[data-compact="true"] .ac-row-meta { display: none; }
+[data-compact="true"] .ac-glyph { width: 26px; height: 26px; font-size: 10px; }
+</style>
+</body>
+</html>
diff --git a/docs/design-handoffs/v0.9_curator/README.md b/docs/design-handoffs/v0.9_curator/README.md
new file mode 100644
index 0000000..000456c
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/README.md
@@ -0,0 +1,205 @@
+# Handoff: v0.9 UI Redesign — "Curator"
+
+## Overview
+
+This is a redesign of the Animal Crossing Museum Tracker for **v0.9** (the UI redesign pass mentioned in `CLAUDE.md` roadmap). The new direction is codenamed **"Curator"** — a softer, more editorial museum aesthetic that keeps the cozy warmth of the parchment/wood palette but lightens density, modernizes typography, and introduces a sectioned list pattern that surfaces seasonal urgency ("leaving soon" / "available now") without burying the player in a flat A–Z list.
+
+## About the Design Files
+
+The files in this bundle (`Curator.html`, `styles.css`, `*.jsx`, `data.js`, `theme.js`) are **design references** — an HTML/React prototype showing the intended look, layout, and interaction patterns. They are **not production code to copy directly**.
+
+Your job is to **recreate this design inside the existing Vite + React 19 + TypeScript + Tailwind v4 + Zustand codebase**, using its established conventions:
+- Real Zustand store + `useMuseumData` hook for data (not the static `data.js` here)
+- React Router v6 routing for tabs (preserve `/town/:townId/:tab` URL structure)
+- TypeScript everywhere; extend `src/lib/types.ts` if you need new fields
+- Tailwind utility classes (the prototype uses raw CSS — translate to Tailwind classes + `colors.ts` tokens)
+- Existing component split (`MuseumHeader`, `TabBar`, `CollectibleRow`, `ItemExpandPanel`, `HomeTab`, etc.) — refactor in place rather than introducing parallel components
+
+## Fidelity
+
+**High-fidelity.** Colors, type scale, spacing, and interactions are intentional. Recreate pixel-perfectly.
+
+The prototype ships **4 themes** (Meadow / Parchment / Midnight / Sakura) — only **Meadow** is required for v0.9. Parchment is the existing app's palette preserved as a fallback. Midnight + Sakura are bonus directions; ship if you want, otherwise defer.
+
+---
+
+## Screens
+
+### 1. App shell (sidebar + main column)
+
+- **Layout:** CSS grid `280px 1fr`, max-width 1440px, centered. Sidebar is sticky/full-height with its own scroll; main column scrolls with page. Below 980px, sidebar collapses above main column.
+- **Sidebar contents (top → bottom):**
+  - Brand: monogram circle (38×38) + "Curator" wordmark (Fraunces 20/600) + "a museum companion" italic sub
+  - Active town card: `surface` bg, 1px border, 14px radius, 14×16 padding. Eyebrow ("ACTIVE TOWN" 10px upper, letter-spacing 0.08em, `ink-muted`), town name (Fraunces 22/500), meta line ("New Horizons · Hem. NH" 12px `ink-soft`), "Switch town ›" link 12px `accent-ink`
+  - Nav: vertical list, 1px gap. Each item is a button with label left + count right (`donated/total` in tabular-nums, dimmed slash). Active state: `accent-soft` bg + `accent-ink` text + 500 weight + 9px radius. Hover: `surface-alt` bg.
+  - Foot links (Export CSV, Settings) pushed to bottom, 1px top border.
+- **Main column padding:** 32px 48px 80px
+
+### 2. Topbar (above all main views)
+
+- Search bar (left, max 380px): search icon SVG + bordered pill input. Placeholder rotates by tab ("Search across categories…" on home, "Search fish…" on category).
+- Date chip (right): "Sat **May 2**" — pill with day-of-week regular + date in Fraunces 500 ink.
+
+### 3. Home tab
+
+- **Hero:**
+  - Eyebrow: "AVAILABLE IN MAY"
+  - Headline: Fraunces 38/400, line-height 1.15, letter-spacing -0.02em, max-width 720px. Pattern: `<em>{stillNeeded}</em> creatures still to donate this month.<br><span class="aside">{leavingSoon} are leaving soon.</span>` — italic accent number in `accent-ink`, line-break before the warn aside (clay color, italic).
+- **Month strip:** 12-cell grid in a `surface` rounded card. Each cell shows `01` numeral above `Jan` Fraunces label. Current month cell has `accent-soft` bg + `accent-ink` text + 500 weight on month name.
+- **"Leaving end of month" shelf:** eyebrow in `warn` color, Fraunces title "Catch these before May ends", count on right in big Fraunces. Cards grid: 3 columns, each card has tinted monogram glyph (44×44 with diagonal stripe pattern), name + meta + month-dots strip + warn ⚠ icon.
+- **"Just arrived" shelf:** same card pattern, no warn icon.
+- **Latest donations:** rounded `surface` card, list rows with category dot + item name + category eyebrow + relative time.
+
+### 4. Category tabs (Fish / Bugs / Fossils / Art)
+
+- **Header:** `<em>{donated}</em> of {total} {category}` — Fraunces 44/400, italic accent number. Right side: `{pct}% complete` strong + helper text ("Showing availability for May") for time-sensitive categories.
+- **Sectioned list — groups appear only when non-empty, in this order:**
+  1. **Leaving this month** (warn-toned eyebrow)
+  2. **Available now** (accent-toned eyebrow)
+  3. **Out of season** (muted eyebrow)
+  4. **Already donated** (muted eyebrow)
+- **Group head:** uppercase 11px / 600 / 0.12em letter-spacing, count right-aligned 12px tabular.
+- **List card:** `surface` bg, 1px border, 12px radius, divider lines between rows.
+- **Item row:**
+  - Glyph (32×32 rounded square, 1.5px category-tinted border, Fraunces monogram letters; **donated** state fills bg with category tint and inverts text to `surface`)
+  - Name (500 weight) + small ● checkmark in `accent` if donated; **donated rows strike through name** with `border-strong` 1px decoration
+  - Meta line: `habitat · value ✦` (or `location · value` for bugs, `part · value` for fossils, italic `basedOn` for art) — separators use `·` glyph in `border-strong`, 8px each side
+  - Right side: `Leaving soon` warn pill OR `New this month` accent pill (only when not donated), time text "4pm–9am" if not "all day", chevron ›
+  - Hover: `surface-alt` bg. Expanded: same.
+- **Expand panel** (inline accordion, opens when row clicked):
+  - Two-column grid `1fr 240px`, padding `4px 18px 22px 64px` (left-pad aligns with row text), `surface-alt` bg, 1px top border
+  - Left: "Available in" eyebrow + 12-cell month grid. Cells are square, 6px radius. Available months: `accent-soft` bg + `accent` border. Current month: 1.5px inset accent ring + 600 label.
+  - Right column: stats stack — bells value (Fraunces 22/500), shadow size, active hours; optional `notes` quote-block (`accent`-bordered left). Donate button at bottom: `accent` bg / `surface` text → flips to outlined "Donated ✓ — undonate" when on.
+  - Chevron rotates 90° when expanded.
+
+### 5. Stats tab
+
+- Header: `<em>Stats</em> & rhythms` (Fraunces 44/400)
+- 4-up category cards: eyebrow in category color, big donated/total Fraunces, thin progress bar tinted with category color, "X% complete" caption
+- Yearly rhythm chart: 12 columns, each with a stacked bar. BG height = % of max availability across all months. Inner fill (50% accent opacity) = donated fraction within available. Current month column has accent border. Number above each column = how many available that month. Legend: "Available" / "Already donated"
+
+### 6. Item detail (inline expand)
+
+Same as the expand panel described in section 4. **No bottom sheet, no separate modal** for fish/bugs/fossils. Art still uses `DetailModal` per existing code; the row treatment is the same up to the expand point.
+
+---
+
+## Interactions
+
+- **Tab switch:** instant. URL updates per existing React Router setup.
+- **Row click:** toggles inline expand. Only one row open at a time per category (state lives in CategoryTab).
+- **Donate toggle:** `e.stopPropagation()` so the donate button doesn't also collapse the expand. Updates Zustand store.
+- **Search:** debounced 150ms (existing `useSearch` hook is fine). Filters within the active category for category tabs; on home it's the global search trigger.
+- **Hide donated tweak:** filters category lists to omit items in the `donated[cat]` set. Already-donated section disappears.
+- **Month slider:** for prototyping only — production should always use `new Date().getMonth() + 1`.
+- **Hover transitions:** 0.12s on row bg, card border, donate button opacity. Chevron rotation: 0.18s.
+
+---
+
+## Design Tokens
+
+All values in `theme.js` → port to `src/lib/colors.ts` and Tailwind `theme.extend`. Add a new theme object `meadow` alongside the existing `colors` export; keep `colors` (parchment) intact as fallback.
+
+### Meadow palette (default)
+
+| token | value | usage |
+|---|---|---|
+| `bg` | `#F4EFE3` | page background |
+| `surface` | `#FFFDF7` | card backgrounds |
+| `surface-alt` | `#F8F2E2` | hover, expand panel, secondary surfaces |
+| `ink` | `#23241F` | primary text |
+| `ink-soft` | `#5C5848` | secondary text |
+| `ink-muted` | `#8A8470` | tertiary text, eyebrows |
+| `border` | `#E2D9C3` | subtle borders, dividers |
+| `border-strong` | `#CFC4A8` | hover borders, separator dots, strikethrough |
+| `accent` | `oklch(0.55 0.09 150)` | primary moss green — buttons, progress bars |
+| `accent-soft` | `oklch(0.55 0.09 150 / 0.12)` | nav active, accent pill bg, current-month bg |
+| `accent-ink` | `oklch(0.32 0.06 150)` | accent text on light bg |
+| `warn` | `oklch(0.62 0.12 50)` | clay — leaving-soon |
+| `warn-soft` | `oklch(0.62 0.12 50 / 0.14)` | warn pill bg |
+| `chip-fish` | `oklch(0.62 0.08 230)` | fish category tint |
+| `chip-bugs` | `oklch(0.6 0.1 130)` | bugs category tint |
+| `chip-fossils` | `oklch(0.55 0.06 60)` | fossils category tint |
+| `chip-art` | `oklch(0.58 0.08 320)` | art category tint |
+
+### Typography
+
+- **Display:** `'Fraunces', Georgia, serif` — 9..144 opsz axis. Weights 400/500/600. Use italic 400/500 for accents.
+- **UI:** `'Inter', system-ui, sans-serif` — weights 400/500/600/700.
+- Replace `Varela Round` global rule in `src/index.css`. Load both via Google Fonts (already shown in `styles.css` `@import` URL).
+
+### Type scale
+
+| usage | font / size / weight / lh / tracking |
+|---|---|
+| Hero headline | Fraunces 38 / 400 / 1.15 / -0.02em |
+| Category h1 | Fraunces 44 / 400 / 1.0 / -0.02em |
+| Card / shelf title | Fraunces 24 / 500 / 1.2 / -0.01em |
+| Section eyebrow | Inter 11 / 600 / 1.4 / 0.12em uppercase |
+| Body | Inter 14 / 400 / 1.5 / -0.005em |
+| Row name | Inter 14 / 500 |
+| Row meta | Inter 12 / 400 |
+| Stat value | Fraunces 22 / 500 / -0.01em |
+| Tabular numbers | `font-variant-numeric: tabular-nums` everywhere counts/values appear |
+
+### Spacing & radii
+
+- Card radius: **12px** (lists, stat cards), **14px** (hero cards, town card)
+- Pill radius: **999px**
+- Button radius: **8px**, glyph: **8–10px**
+- Section gaps: 36px between hero/shelves/groups; 28px between groups
+- Sidebar padding: 28×22; main padding: 32×48 (24×20 mobile)
+
+### Shadows
+
+None — borders carry separation. Hover lift is `transform: translateY(-1px)` + border color change, no shadow.
+
+---
+
+## State Management
+
+No new store fields required. Reuses existing schema:
+- `donated[townId][gameId][itemId]` — per `CLAUDE.md` v3 schema
+- `Town.hemisphere` — already exists
+- Active month: `new Date().getMonth() + 1` derived in component, **not** stored
+
+New UI state (component-local, not persisted):
+- `expanded: string | null` per CategoryTab
+- `search: string` lifted to App or per-tab
+- Optional Zustand: `viewPrefs.hideDonated: boolean` if you want the toggle persistent
+
+---
+
+## Assets
+
+- **Fonts:** Fraunces + Inter via Google Fonts (`https://fonts.googleapis.com/css2?...`)
+- **No item sprites.** The prototype uses 2-letter monograms because real AC sprites are copyrighted. If your existing app already has acceptable item imagery, swap glyphs for those — just preserve the 32×32 / 44×44 frame and category-tinted border treatment.
+- **Brand mark:** the museum-roof SVG in the sidebar is in `shell.jsx` — `<svg viewBox="0 0 32 32">…</svg>`. Lift it directly.
+- **Icons:** search icon is inline SVG in `Curator.html`. Use Lucide or your existing icon set if you have one.
+
+---
+
+## Files in this bundle
+
+| file | what's in it |
+|---|---|
+| `Curator.html` | Entry point — App component, theme application, Tweaks panel wiring |
+| `styles.css` | All visual styling. Read this for exact CSS values. |
+| `theme.js` | All 4 theme palettes as JS objects |
+| `data.js` | Sample museum data (NOT representative of full datasets — you have the real JSON in `public/data/`) |
+| `shell.jsx` | Sidebar, MonthStrip, ProgressMeter |
+| `tabs.jsx` | HomeTab, CategoryTab, StatsTab |
+| `components.jsx` | ItemRow, Glyph, Pill, MonthDots, MonthGrid |
+| `tweaks-panel.jsx` | Prototype-only tweaks UI; not for prod |
+
+---
+
+## Migration plan suggestion (in priority order)
+
+1. **Tokens & fonts** — extend `colors.ts` with meadow palette, swap Varela Round for Fraunces+Inter in `index.css`, set up Tailwind colors so utility classes work.
+2. **App shell** — replace `MuseumHeader` + horizontal `TabBar` with sidebar nav. Keep React Router routes intact; the sidebar just renders `<NavLink>`s.
+3. **CollectibleRow** — restyle to match new row spec (glyph, meta line with `·` separators, donated strikethrough, pill states).
+4. **ItemExpandPanel** — restyle to two-column grid layout, add stat stack on right, donate button at bottom.
+5. **HomeTab** — rebuild with hero + month strip + leaving/new shelves. The "leaving soon" filter logic is in `tabs.jsx` (`HomeTab` function, `leavingSoon` array).
+6. **AnalyticsView (Stats)** — new card grid + monthly availability chart.
+7. **Polish** — animations, mobile responsive pass, settings/onboarding (per v0.9 roadmap).
diff --git a/docs/design-handoffs/v0.9_curator/components.jsx b/docs/design-handoffs/v0.9_curator/components.jsx
new file mode 100644
index 0000000..8b67154
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/components.jsx
@@ -0,0 +1,127 @@
+/* global React */
+const { useState, useMemo } = React;
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const MONTHS_LONG = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+// ── Glyph: a simple monogram tile, category-tinted. No copyrighted sprites. ──
+function Glyph({ name, category, donated }) {
+  const initials = name.split(/\s|-/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("").toUpperCase();
+  const tint = `var(--chip-${category})`;
+  return (
+    <div className="ac-glyph" style={{
+      background: donated ? tint : "transparent",
+      borderColor: tint,
+      color: donated ? "var(--surface)" : tint, backgroundColor: "rgb(98, 174, 118)"
+    }}>
+      <span>{initials}</span>
+    </div>);
+
+}
+
+function Pill({ children, tone = "default", size = "sm" }) {
+  return <span className={`ac-pill ac-pill-${tone} ac-pill-${size}`}>{children}</span>;
+}
+
+function MonthDots({ months, current }) {
+  return (
+    <div className="ac-monthdots" role="img" aria-label="Month availability">
+      {Array.from({ length: 12 }, (_, i) => {
+        const m = i + 1;
+        const on = months.includes(m);
+        const here = m === current;
+        return <span key={m} className={`ac-monthdot ${on ? "on" : ""} ${here ? "here" : ""}`} title={MONTHS[i]} />;
+      })}
+    </div>);
+
+}
+
+function MonthGrid({ months, current }) {
+  return (
+    <div className="ac-monthgrid">
+      {MONTHS.map((m, i) => {
+        const on = months.includes(i + 1);
+        const here = i + 1 === current;
+        return (
+          <div key={m} className={`ac-monthcell ${on ? "on" : ""} ${here ? "here" : ""}`}>
+            <span className="ac-monthcell-label">{m}</span>
+          </div>);
+
+      })}
+    </div>);
+
+}
+
+// ── Item row with inline expand panel ──
+function ItemRow({ item, category, donated, onToggle, currentMonth, expanded, onExpand }) {
+  const leavingSoon = item.months && item.months.includes(currentMonth) && !item.months.includes(currentMonth === 12 ? 1 : currentMonth + 1);
+  const newThisMonth = item.months && item.months.includes(currentMonth) && !item.months.includes(currentMonth === 1 ? 12 : currentMonth - 1);
+
+  return (
+    <div className={`ac-row ${expanded ? "ac-row-expanded" : ""} ${donated ? "ac-row-donated" : ""}`}>
+      <button className="ac-row-main" onClick={onExpand}>
+        <Glyph name={item.name} category={category} donated={donated} />
+        <div className="ac-row-text">
+          <div className="ac-row-name">
+            <span>{item.name}</span>
+            {donated && <span className="ac-row-checkmark" aria-label="donated">●</span>}
+          </div>
+          <div className="ac-row-meta">
+            {item.habitat && <span className="ac-row-meta-bit">{item.habitat.replace("-", " · ")}</span>}
+            {item.location && <span className="ac-row-meta-bit">{item.location}</span>}
+            {item.part && <span className="ac-row-meta-bit">{item.part}</span>}
+            {item.basedOn && <span className="ac-row-meta-bit ac-row-meta-italic">{item.basedOn}</span>}
+            {item.value != null && <span className="ac-row-meta-bit ac-row-meta-bells">{item.value.toLocaleString()} ✦</span>}
+          </div>
+        </div>
+        <div className="ac-row-side">
+          {leavingSoon && !donated && <Pill tone="warn">Leaving soon</Pill>}
+          {newThisMonth && !donated && !leavingSoon && <Pill tone="accent">New this month</Pill>}
+          {item.time && item.time !== "all day" && <span className="ac-row-time">{item.time}</span>}
+          <span className={`ac-chevron ${expanded ? "ac-chevron-open" : ""}`}>›</span>
+        </div>
+      </button>
+      {expanded &&
+      <div className="ac-expand">
+          {item.months &&
+        <div className="ac-expand-section">
+              <div className="ac-expand-label">Available in</div>
+              <MonthGrid months={item.months} current={currentMonth} />
+            </div>
+        }
+          <div className="ac-expand-side">
+            {item.value != null &&
+          <div className="ac-stat">
+                <div className="ac-stat-num">{item.value.toLocaleString()}</div>
+                <div className="ac-stat-label">bells · sell value</div>
+              </div>
+          }
+            {item.shadow &&
+          <div className="ac-stat">
+                <div className="ac-stat-num ac-stat-num-text">{item.shadow}</div>
+                <div className="ac-stat-label">shadow size</div>
+              </div>
+          }
+            {item.time &&
+          <div className="ac-stat">
+                <div className="ac-stat-num ac-stat-num-text">{item.time}</div>
+                <div className="ac-stat-label">active hours</div>
+              </div>
+          }
+            {item.notes &&
+          <div className="ac-note">{item.notes}</div>
+          }
+            <button
+            className={`ac-donate-btn ${donated ? "ac-donate-btn-on" : ""}`}
+            onClick={(e) => {e.stopPropagation();onToggle();}}>
+            
+              {donated ? "Donated ✓ — undonate" : "Mark as donated"}
+            </button>
+          </div>
+        </div>
+      }
+    </div>);
+
+}
+
+window.ACComponents = { Glyph, Pill, MonthDots, MonthGrid, ItemRow, MONTHS, MONTHS_LONG };
\ No newline at end of file
diff --git a/docs/design-handoffs/v0.9_curator/data.js b/docs/design-handoffs/v0.9_curator/data.js
new file mode 100644
index 0000000..66499da
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/data.js
@@ -0,0 +1,105 @@
+// Sample museum data inspired by AC GCN/NH species lists.
+// Real-feeling enough for a prototype; no copyrighted sprite assets.
+window.MUSEUM_DATA = {
+  meta: {
+    townName: "Marigold",
+    playerName: "Bea",
+    game: "New Horizons",
+    hemisphere: "NH",
+    currentMonth: 5, // May
+    currentDay: 2,
+  },
+  fish: [
+    { id: "loach", name: "Loach", value: 400, habitat: "river", shadow: "small", time: "all day", months: [3,4,5] },
+    { id: "angelfish", name: "Angelfish", value: 3000, habitat: "river", shadow: "small", time: "4pm–9am", months: [5,6,7,8,9,10] },
+    { id: "cherry-salmon", name: "Cherry Salmon", value: 1000, habitat: "river", shadow: "medium", time: "4pm–9am", months: [3,4,5,6,9,10,11] },
+    { id: "barbel-steed", name: "Barbel Steed", value: 200, habitat: "river", shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "barred-knifejaw", name: "Barred Knifejaw", value: 5000, habitat: "ocean", shadow: "medium", time: "all day", months: [3,4,5,6,7,8,9,10,11] },
+    { id: "bass", name: "Black Bass", value: 400, habitat: "river", shadow: "large", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "bluegill", name: "Bluegill", value: 180, habitat: "river", shadow: "small", time: "9am–4pm", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "brook-trout", name: "Brook Trout", value: 150, habitat: "river-clifftop", shadow: "small", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "carp", name: "Carp", value: 300, habitat: "pond", shadow: "medium", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "cherry-shrimp", name: "Cherry Shrimp", value: 600, habitat: "pond", shadow: "tiny", time: "all day", months: [4,5,6,7,8,9] },
+    { id: "clouded-cichlid", name: "Clouded Cichlid", value: 800, habitat: "river", shadow: "medium", time: "all day", months: [4,5,6,7,8,9,10] },
+    { id: "coelacanth", name: "Coelacanth", value: 15000, habitat: "ocean", shadow: "huge", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12], notes: "Only when raining or snowing" },
+    { id: "crawfish", name: "Crawfish", value: 200, habitat: "pond", shadow: "small", time: "all day", months: [4,5,6,7,8,9] },
+    { id: "crucian-carp", name: "Crucian Carp", value: 160, habitat: "river", shadow: "small", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "dace", name: "Dace", value: 240, habitat: "river", shadow: "medium", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "freshwater-goby", name: "Freshwater Goby", value: 400, habitat: "river", shadow: "small", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "frog", name: "Frog", value: 120, habitat: "pond", shadow: "small", time: "all day", months: [5,6,7,8] },
+    { id: "goldfish", name: "Goldfish", value: 1300, habitat: "pond", shadow: "tiny", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "guppy", name: "Guppy", value: 1300, habitat: "river", shadow: "tiny", time: "9am–4pm", months: [4,5,6,7,8,9,10,11] },
+    { id: "killifish", name: "Killifish", value: 300, habitat: "pond", shadow: "tiny", time: "all day", months: [4,5,6,7,8] },
+    { id: "koi", name: "Koi", value: 4000, habitat: "pond", shadow: "medium", time: "4pm–9am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "ladybug", name: "Ladybug", value: 200, habitat: "pond", shadow: "tiny", time: "8am–5pm", months: [3,4,5,6,10] },
+    { id: "rainbow-trout", name: "Rainbow Trout", value: 800, habitat: "river-clifftop", shadow: "medium", time: "4pm–9am", months: [3,4,5,6,9,10,11] },
+    { id: "sea-bass", name: "Sea Bass", value: 400, habitat: "ocean", shadow: "large", time: "all day", months: [1,2,3,4,5,6,7,9,10,11,12] },
+    { id: "stringfish", name: "Stringfish", value: 15000, habitat: "river-clifftop", shadow: "huge", time: "4pm–9am", months: [12,1,2,3] },
+  ],
+  bugs: [
+    { id: "mole-cricket", name: "Mole Cricket", value: 500, location: "underground", time: "all day", months: [11,12,1,2,3,4,5] },
+    { id: "ant", name: "Ant", value: 80, location: "rotten food", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "bee", name: "Bee", value: 2500, location: "shaking trees", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "common-butterfly", name: "Common Butterfly", value: 160, location: "flying", time: "4am–7pm", months: [1,2,3,4,5,6,9,10,11,12] },
+    { id: "common-dragonfly", name: "Common Dragonfly", value: 180, location: "flying", time: "8am–7pm", months: [4,5,6,7,8,9,10] },
+    { id: "clouded-yellow", name: "Clouded Yellow Butterfly", value: 160, location: "flying", time: "4am–7pm", months: [3,4,5,6,9,10] },
+    { id: "cockroach", name: "Cockroach", value: 5, location: "underground", time: "all day", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "cricket", name: "Cricket", value: 130, location: "ground", time: "5pm–8am", months: [9,10,11] },
+    { id: "darner-dragonfly", name: "Darner Dragonfly", value: 230, location: "flying", time: "8am–5pm", months: [4,5,6,7,8,9,10] },
+    { id: "diving-beetle", name: "Diving Beetle", value: 800, location: "ponds", time: "8am–7pm", months: [5,6,7,8,9] },
+    { id: "earth-boring-beetle", name: "Earth-Boring Beetle", value: 300, location: "ground", time: "all day", months: [7,8,9,10,11] },
+    { id: "hermit-crab", name: "Hermit Crab", value: 1000, location: "beach", time: "7pm–8am", months: [1,2,3,4,5,6,7,8,9,10,11,12] },
+    { id: "honeybee", name: "Honeybee", value: 200, location: "flying", time: "8am–5pm", months: [3,4,5,6,7] },
+  ],
+  fossils: [
+    { id: "ammonite", name: "Ammonite", value: 1100 },
+    { id: "ankylo-skull", name: "Ankylo Skull", value: 6000 },
+    { id: "ankylo-tail", name: "Ankylo Tail", value: 2500 },
+    { id: "ankylo-torso", name: "Ankylo Torso", value: 5500 },
+    { id: "archaeopteryx", name: "Archaeopteryx", value: 1300 },
+    { id: "archelon-skull", name: "Archelon Skull", value: 4000 },
+    { id: "archelon-tail", name: "Archelon Tail", value: 3500 },
+    { id: "australopith", name: "Australopith", value: 1100 },
+    { id: "brachio-chest", name: "Brachio Chest", value: 5500 },
+    { id: "brachio-pelvis", name: "Brachio Pelvis", value: 5500 },
+    { id: "brachio-skull", name: "Brachio Skull", value: 6000 },
+    { id: "brachio-tail", name: "Brachio Tail", value: 5500 },
+    { id: "deinony-tail", name: "Deinony Tail", value: 2500 },
+    { id: "deinony-torso", name: "Deinony Torso", value: 5500 },
+    { id: "diplo-chest", name: "Diplo Chest", value: 5000 },
+    { id: "diplo-neck", name: "Diplo Neck", value: 2500 },
+    { id: "diplo-pelvis", name: "Diplo Pelvis", value: 4500 },
+    { id: "diplo-skull", name: "Diplo Skull", value: 5000 },
+    { id: "diplo-tail", name: "Diplo Tail", value: 2500 },
+  ],
+  art: [
+    { id: "academic", name: "Academic Painting", basedOn: "Vitruvian Man by Leonardo da Vinci", hasFake: true },
+    { id: "amazing", name: "Amazing Painting", basedOn: "The Night Watch by Rembrandt", hasFake: true },
+    { id: "basic", name: "Basic Painting", basedOn: "The Blue Boy by Thomas Gainsborough", hasFake: false },
+    { id: "calm", name: "Calm Painting", basedOn: "A Sunday Afternoon on La Grande Jatte by Georges Seurat", hasFake: false },
+    { id: "classic", name: "Classic Painting", basedOn: "Washington Crossing the Delaware by Emanuel Leutze", hasFake: true },
+    { id: "common", name: "Common Painting", basedOn: "The Gleaners by Jean-François Millet", hasFake: false },
+    { id: "dainty", name: "Dainty Painting", basedOn: "The Star — Dancer on Stage by Edgar Degas", hasFake: true },
+    { id: "famous", name: "Famous Painting", basedOn: "Mona Lisa by Leonardo da Vinci", hasFake: true },
+    { id: "flowery", name: "Flowery Painting", basedOn: "Sunflowers by Vincent van Gogh", hasFake: false },
+    { id: "graceful", name: "Graceful Painting", basedOn: "Beauty Looking Back by Hishikawa Moronobu", hasFake: true },
+    { id: "moving", name: "Moving Painting", basedOn: "The Birth of Venus by Sandro Botticelli", hasFake: true },
+    { id: "perfect", name: "Perfect Painting", basedOn: "The Apotheosis of Homer by Ingres", hasFake: false },
+    { id: "scary", name: "Scary Painting", basedOn: "The Great Wave off Kanagawa by Hokusai", hasFake: false },
+    { id: "warm", name: "Warm Painting", basedOn: "Et in Arcadia ego by Nicolas Poussin", hasFake: false },
+  ],
+  // Pre-seed donation state for realism
+  donated: {
+    fish: ["barbel-steed","bass","bluegill","brook-trout","carp","crucian-carp","dace","frog","goldfish","koi"],
+    bugs: ["ant","cockroach","common-butterfly","clouded-yellow","honeybee"],
+    fossils: ["ammonite","ankylo-skull","ankylo-tail","ankylo-torso","archaeopteryx","brachio-chest","brachio-pelvis","brachio-skull","brachio-tail","deinony-tail","diplo-chest","diplo-pelvis","diplo-skull"],
+    art: ["basic","calm","common","flowery","perfect","scary","warm"],
+  },
+  recentActivity: [
+    { item: "Honeybee",      category: "bugs",    when: "2h ago"   },
+    { item: "Brook Trout",   category: "fish",    when: "yesterday"},
+    { item: "Brachio Chest", category: "fossils", when: "yesterday"},
+    { item: "Warm Painting", category: "art",     when: "3d ago"   },
+    { item: "Carp",          category: "fish",    when: "5d ago"   },
+  ],
+};
diff --git a/docs/design-handoffs/v0.9_curator/shell.jsx b/docs/design-handoffs/v0.9_curator/shell.jsx
new file mode 100644
index 0000000..534116b
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/shell.jsx
@@ -0,0 +1,115 @@
+/* global React, ACComponents */
+const { useState, useMemo } = React;
+const { Glyph, Pill, MonthDots, MonthGrid, ItemRow, MONTHS, MONTHS_LONG } = ACComponents;
+
+// ── Header / sidebar / shell ──
+function Sidebar({ town, currentTab, onTab, stats }) {
+  const tabs = [
+    { id: "home", label: "Home" },
+    { id: "fish", label: "Fish", n: stats.fish },
+    { id: "bugs", label: "Bugs", n: stats.bugs },
+    { id: "fossils", label: "Fossils", n: stats.fossils },
+    { id: "art", label: "Art", n: stats.art },
+    { id: "stats", label: "Stats" },
+  ];
+  return (
+    <aside className="ac-sidebar">
+      <div className="ac-brand">
+        <div className="ac-brand-mark">
+          <svg viewBox="0 0 32 32" width="22" height="22">
+            <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1.5"/>
+            <path d="M10 18 Q16 8 22 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+            <circle cx="16" cy="20" r="1.6" fill="currentColor"/>
+          </svg>
+        </div>
+        <div className="ac-brand-text">
+          <div className="ac-brand-name">Curator</div>
+          <div className="ac-brand-sub">a museum companion</div>
+        </div>
+      </div>
+
+      <div className="ac-town-card">
+        <div className="ac-town-label">Active town</div>
+        <div className="ac-town-name">{town.townName}</div>
+        <div className="ac-town-meta">
+          <span>{town.game}</span>
+          <span className="ac-dot-sep">·</span>
+          <span>Hem. {town.hemisphere}</span>
+        </div>
+        <button className="ac-town-switch">Switch town ›</button>
+      </div>
+
+      <nav className="ac-nav">
+        {tabs.map(t => (
+          <button
+            key={t.id}
+            className={`ac-nav-item ${currentTab===t.id?"ac-nav-item-active":""}`}
+            onClick={()=>onTab(t.id)}
+          >
+            <span>{t.label}</span>
+            {t.n && <span className="ac-nav-count">{t.n.donated}<span className="ac-nav-count-slash">/</span>{t.n.total}</span>}
+          </button>
+        ))}
+      </nav>
+
+      <div className="ac-sidebar-foot">
+        <button className="ac-foot-link">Export CSV</button>
+        <button className="ac-foot-link">Settings</button>
+      </div>
+    </aside>
+  );
+}
+
+function MonthStrip({ current }) {
+  return (
+    <div className="ac-monthstrip">
+      {MONTHS.map((m,i) => (
+        <div key={m} className={`ac-monthstrip-cell ${i+1===current?"is-now":""}`}>
+          <span className="ac-monthstrip-num">{String(i+1).padStart(2,"0")}</span>
+          <span className="ac-monthstrip-name">{m}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ProgressMeter({ stats }) {
+  const total = stats.fish.total + stats.bugs.total + stats.fossils.total + stats.art.total;
+  const done  = stats.fish.donated + stats.bugs.donated + stats.fossils.donated + stats.art.donated;
+  const pct = Math.round((done/total)*100);
+  return (
+    <div className="ac-meter">
+      <div className="ac-meter-head">
+        <div>
+          <div className="ac-meter-eyebrow">Museum progress</div>
+          <div className="ac-meter-num">
+            <span className="ac-meter-done">{done}</span>
+            <span className="ac-meter-of"> / {total}</span>
+          </div>
+        </div>
+        <div className="ac-meter-pct">{pct}<span className="ac-meter-pct-sym">%</span></div>
+      </div>
+      <div className="ac-meter-bar">
+        {["fish","bugs","fossils","art"].map(k => {
+          const seg = stats[k];
+          const frac = seg.total/total;
+          return (
+            <div key={k} className="ac-meter-seg" style={{flex: frac}}>
+              <div className="ac-meter-seg-fill" style={{
+                width: `${(seg.donated/seg.total)*100}%`,
+                background: `var(--chip-${k})`
+              }}/>
+              <div className="ac-meter-seg-label">
+                <span className="ac-meter-seg-dot" style={{background:`var(--chip-${k})`}}/>
+                <span>{k}</span>
+                <span className="ac-meter-seg-frac">{seg.donated}/{seg.total}</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+window.ACShell = { Sidebar, MonthStrip, ProgressMeter };
diff --git a/docs/design-handoffs/v0.9_curator/styles.css b/docs/design-handoffs/v0.9_curator/styles.css
new file mode 100644
index 0000000..c0b4058
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/styles.css
@@ -0,0 +1,553 @@
+/* AC Curator — soft museum aesthetic */
+
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=Varela+Round&display=swap');
+
+:root {
+  --bg: #F4EFE3;
+  --surface: #FFFDF7;
+  --surface-alt: #F8F2E2;
+  --ink: #23241F;
+  --ink-soft: #5C5848;
+  --ink-muted: #8A8470;
+  --border: #E2D9C3;
+  --border-strong: #CFC4A8;
+  --accent: oklch(0.55 0.09 150);
+  --accent-soft: oklch(0.55 0.09 150 / 0.12);
+  --accent-ink: oklch(0.32 0.06 150);
+  --warn: oklch(0.62 0.12 50);
+  --warn-soft: oklch(0.62 0.12 50 / 0.14);
+  --chip-fish: oklch(0.62 0.08 230);
+  --chip-bugs: oklch(0.6 0.1 130);
+  --chip-fossils: oklch(0.55 0.06 60);
+  --chip-art: oklch(0.58 0.08 320);
+  --font-display: 'Fraunces', Georgia, serif;
+  --font-ui: 'Inter', system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  font-family: var(--font-ui);
+  background: var(--bg);
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: -0.005em;
+}
+button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
+
+/* ── App shell ── */
+.ac-app {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  min-height: 100vh;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+/* ── Sidebar ── */
+.ac-sidebar {
+  border-right: 1px solid var(--border);
+  padding: 28px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+.ac-brand { display: flex; gap: 12px; align-items: center; color: var(--accent); }
+.ac-brand-mark {
+  width: 38px; height: 38px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  display: grid; place-items: center;
+}
+.ac-brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
+.ac-brand-sub { font-size: 11px; color: var(--ink-muted); font-style: italic; font-family: var(--font-display); }
+
+.ac-town-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px 16px;
+}
+.ac-town-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-town-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-top: 2px; letter-spacing: -0.01em; }
+.ac-town-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
+.ac-dot-sep { color: var(--border-strong); }
+.ac-town-switch {
+  font-size: 12px; color: var(--accent-ink); margin-top: 10px;
+  padding: 0; text-align: left; font-weight: 500;
+}
+.ac-town-switch:hover { text-decoration: underline; }
+
+.ac-nav { display: flex; flex-direction: column; gap: 1px; }
+.ac-nav-item {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding: 10px 14px; border-radius: 9px;
+  font-size: 14px; color: var(--ink-soft); text-align: left;
+  transition: background 0.12s;
+}
+.ac-nav-item:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-nav-item-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
+.ac-nav-count { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-nav-count-slash { opacity: 0.5; margin: 0 1px; }
+.ac-nav-item-active .ac-nav-count { color: var(--accent-ink); }
+
+.ac-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
+.ac-foot-link { padding: 6px 14px; font-size: 12px; color: var(--ink-muted); text-align: left; }
+.ac-foot-link:hover { color: var(--ink); }
+
+/* ── Main column ── */
+.ac-main {
+  padding: 32px 48px 80px;
+  min-width: 0;
+}
+.ac-topbar {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 28px; gap: 16px;
+}
+.ac-search {
+  flex: 1; max-width: 380px;
+  display: flex; align-items: center; gap: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 12px;
+}
+.ac-search:focus-within { border-color: var(--border-strong); }
+.ac-search input { border: none; background: none; outline: none; font: inherit; flex: 1; color: var(--ink); }
+.ac-search input::placeholder { color: var(--ink-muted); }
+.ac-search-icon { color: var(--ink-muted); }
+
+.ac-topbar-actions { display: flex; gap: 8px; align-items: center; }
+.ac-date-chip {
+  display: flex; align-items: baseline; gap: 6px;
+  padding: 6px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 12px;
+  color: var(--ink-soft);
+}
+.ac-date-chip strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
+
+/* ── Hero ── */
+.ac-hero { margin-bottom: 36px; }
+.ac-hero-eyebrow {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin-bottom: 8px;
+}
+.ac-hero-title {
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: 38px;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  margin: 0 0 24px;
+  text-wrap: pretty;
+  max-width: 720px;
+}
+.ac-hero-title em { font-style: italic; color: var(--accent-ink); font-weight: 500; }
+.ac-hero-aside { color: var(--warn); font-style: italic; font-size: 0.85em; }
+
+/* ── Month strip ── */
+.ac-monthstrip {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 8px;
+}
+.ac-monthstrip-cell {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 10px 4px;
+  border-radius: 8px;
+  position: relative;
+}
+.ac-monthstrip-num {
+  font-size: 10px; color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ac-monthstrip-name {
+  font-family: var(--font-display);
+  font-size: 14px;
+  margin-top: 2px;
+  color: var(--ink-soft);
+}
+.ac-monthstrip-cell.is-now {
+  background: var(--accent-soft);
+}
+.ac-monthstrip-cell.is-now .ac-monthstrip-num { color: var(--accent-ink); }
+.ac-monthstrip-cell.is-now .ac-monthstrip-name { color: var(--accent-ink); font-weight: 500; }
+
+/* ── Progress meter ── */
+.ac-meter {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 18px 22px;
+  margin-bottom: 36px;
+}
+.ac-meter-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 18px;
+}
+.ac-meter-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
+.ac-meter-num { font-family: var(--font-display); font-size: 32px; line-height: 1; margin-top: 4px; letter-spacing: -0.02em; }
+.ac-meter-done { font-weight: 500; }
+.ac-meter-of { color: var(--ink-muted); font-weight: 400; }
+.ac-meter-pct { font-family: var(--font-display); font-size: 44px; font-weight: 500; color: var(--accent-ink); letter-spacing: -0.03em; line-height: 1; }
+.ac-meter-pct-sym { font-size: 0.5em; vertical-align: top; margin-left: 2px; opacity: 0.7; }
+
+.ac-meter-bar {
+  display: flex;
+  gap: 10px;
+}
+.ac-meter-seg {
+  background: var(--surface-alt);
+  border-radius: 8px;
+  padding: 10px 12px;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+}
+.ac-meter-seg-fill {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  opacity: 0.18;
+  border-right: 2px solid currentColor;
+  z-index: 0;
+}
+.ac-meter-seg-label {
+  position: relative; z-index: 1;
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+.ac-meter-seg-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
+.ac-meter-seg-frac { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
+
+/* ── Shelf (cards row) ── */
+.ac-shelf { margin-bottom: 36px; }
+.ac-shelf-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
+.ac-shelf-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); }
+.ac-shelf-eyebrow-warn { color: var(--warn); }
+.ac-shelf-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 4px 0 0; letter-spacing: -0.01em; }
+.ac-shelf-count { font-family: var(--font-display); font-size: 28px; color: var(--ink-muted); font-weight: 400; }
+
+.ac-cards {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.ac-card {
+  display: flex; gap: 14px; align-items: flex-start;
+  padding: 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  text-align: left;
+  transition: border-color 0.12s, transform 0.12s;
+}
+.ac-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
+.ac-card-glyph {
+  width: 44px; height: 44px;
+  border: 1.5px solid;
+  border-radius: 10px;
+  display: grid; place-items: center;
+  font-family: var(--font-display); font-size: 14px; font-weight: 500;
+  flex: none;
+  background: repeating-linear-gradient(135deg, transparent 0 4px, currentColor 4px 5px);
+  background-blend-mode: overlay;
+}
+.ac-card-glyph::before {
+  content: attr(data-i);
+}
+.ac-card-body { flex: 1; min-width: 0; }
+.ac-card-name { font-weight: 500; color: var(--ink); margin-bottom: 2px; }
+.ac-card-meta { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; text-transform: capitalize; }
+.ac-card-warn { color: var(--warn); font-size: 18px; }
+
+/* ── Month dots (in cards) ── */
+.ac-monthdots { display: flex; gap: 3px; }
+.ac-monthdot {
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+}
+.ac-monthdot.on { background: var(--accent); border-color: var(--accent); opacity: 0.6; }
+.ac-monthdot.here.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--accent-soft); }
+.ac-monthdot.here:not(.on) { border-color: var(--ink-muted); }
+
+/* ── Activity ── */
+.ac-activity {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.ac-activity-row {
+  display: grid;
+  grid-template-columns: 12px 1fr auto auto;
+  gap: 12px; align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-activity-row:last-child { border-bottom: none; }
+.ac-activity-dot { width: 8px; height: 8px; border-radius: 50%; }
+.ac-activity-name { color: var(--ink); }
+.ac-activity-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-activity-when { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+/* ── Category groups ── */
+.ac-category-head {
+  display: flex; justify-content: space-between; align-items: flex-end;
+  margin-bottom: 24px; padding-bottom: 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-category-title {
+  font-family: var(--font-display); font-weight: 400;
+  font-size: 44px; letter-spacing: -0.02em; margin: 0;
+}
+.ac-category-title em { font-style: italic; color: var(--accent-ink); }
+.ac-category-meta { font-size: 13px; color: var(--ink-soft); text-align: right; }
+.ac-category-meta strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: 18px; display: block; }
+
+.ac-group { margin-bottom: 28px; }
+.ac-group-head {
+  display: flex; align-items: baseline; gap: 12px;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+.ac-group-title {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ink-soft);
+}
+.ac-group-warn .ac-group-title { color: var(--warn); }
+.ac-group-accent .ac-group-title { color: var(--accent-ink); }
+.ac-group-done .ac-group-title { color: var(--ink-muted); }
+.ac-group-count { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+
+.ac-list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* ── Item row ── */
+.ac-row { border-bottom: 1px solid var(--border); }
+.ac-row:last-child { border-bottom: none; }
+.ac-row-main {
+  display: flex; gap: 14px; align-items: center;
+  width: 100%;
+  padding: 12px 18px;
+  text-align: left;
+  transition: background 0.12s;
+}
+.ac-row-main:hover { background: var(--surface-alt); }
+.ac-row-expanded > .ac-row-main { background: var(--surface-alt); }
+.ac-row-donated .ac-row-name { color: var(--ink-muted); }
+.ac-row-donated .ac-row-name span:first-child { text-decoration: line-through; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; }
+
+.ac-glyph {
+  width: 32px; height: 32px;
+  border: 1.5px solid;
+  border-radius: 8px;
+  display: grid; place-items: center;
+  font-family: var(--font-display);
+  font-size: 11px; font-weight: 500;
+  flex: none;
+}
+.ac-row-text { flex: 1; min-width: 0; }
+.ac-row-name {
+  display: flex; align-items: center; gap: 8px;
+  font-weight: 500;
+}
+.ac-row-checkmark { color: var(--accent); font-size: 8px; }
+.ac-row-meta {
+  display: flex; gap: 0; font-size: 12px; color: var(--ink-muted);
+  margin-top: 2px;
+  flex-wrap: wrap;
+}
+.ac-row-meta-bit:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--border-strong); }
+.ac-row-meta-italic { font-style: italic; font-family: var(--font-display); }
+.ac-row-meta-bells { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.ac-row-side { display: flex; align-items: center; gap: 10px; flex: none; }
+.ac-row-time { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-chevron { color: var(--ink-muted); font-size: 18px; transition: transform 0.18s; line-height: 1; }
+.ac-chevron-open { transform: rotate(90deg); color: var(--ink); }
+
+/* ── Pills ── */
+.ac-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.ac-pill-warn { background: var(--warn-soft); color: var(--warn); }
+.ac-pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
+
+/* ── Expand panel ── */
+.ac-expand {
+  display: grid;
+  grid-template-columns: 1fr 240px;
+  gap: 28px;
+  padding: 4px 18px 22px 64px;
+  background: var(--surface-alt);
+  border-top: 1px solid var(--border);
+}
+.ac-expand-section { }
+.ac-expand-label {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin-bottom: 10px; margin-top: 14px;
+}
+.ac-monthgrid {
+  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
+}
+.ac-monthcell {
+  aspect-ratio: 1;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  display: grid; place-items: center;
+  position: relative;
+}
+.ac-monthcell-label {
+  font-size: 10px; color: var(--ink-muted);
+  font-family: var(--font-display);
+}
+.ac-monthcell.on { background: var(--accent-soft); border-color: var(--accent); }
+.ac-monthcell.on .ac-monthcell-label { color: var(--accent-ink); }
+.ac-monthcell.here { box-shadow: inset 0 0 0 1.5px var(--accent); }
+.ac-monthcell.here .ac-monthcell-label { font-weight: 600; }
+
+.ac-expand-side {
+  display: flex; flex-direction: column; gap: 10px;
+  padding-top: 14px;
+}
+.ac-stat {
+  display: flex; flex-direction: column; gap: 1px;
+}
+.ac-stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
+.ac-stat-num-text { font-size: 16px; }
+.ac-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-note {
+  font-size: 12px; color: var(--ink-soft); font-style: italic;
+  font-family: var(--font-display);
+  padding: 8px 10px;
+  background: var(--surface);
+  border-left: 2px solid var(--accent);
+  border-radius: 4px;
+}
+.ac-donate-btn {
+  margin-top: auto;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--surface);
+  font-weight: 500;
+  font-size: 13px;
+  transition: opacity 0.12s;
+}
+.ac-donate-btn:hover { opacity: 0.88; }
+.ac-donate-btn-on { background: var(--surface); color: var(--accent-ink); border: 1px solid var(--border-strong); }
+
+.ac-empty {
+  padding: 60px 0; text-align: center;
+  color: var(--ink-muted);
+  font-style: italic;
+  font-family: var(--font-display);
+}
+
+/* ── Stats ── */
+.ac-stats-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
+  margin-bottom: 36px;
+}
+.ac-statcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+}
+.ac-statcard-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
+.ac-statcard-num { font-family: var(--font-display); font-size: 32px; margin-top: 4px; letter-spacing: -0.02em; }
+.ac-statcard-of { color: var(--ink-muted); font-size: 0.6em; margin-left: 4px; }
+.ac-statcard-bar { height: 4px; background: var(--surface-alt); border-radius: 2px; overflow: hidden; margin-top: 10px; }
+.ac-statcard-fill { height: 100%; }
+.ac-statcard-pct { font-size: 11px; color: var(--ink-muted); margin-top: 6px; }
+
+.ac-chartcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px;
+}
+.ac-chart {
+  display: grid; grid-template-columns: repeat(12, 1fr);
+  gap: 6px;
+  height: 180px;
+  margin-top: 18px;
+  align-items: end;
+}
+.ac-chart-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
+.ac-chart-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
+.ac-chart-bar-bg {
+  width: 100%;
+  background: var(--surface-alt);
+  border-radius: 6px 6px 0 0;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-bottom: none;
+}
+.ac-chart-bar-fill {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  background: var(--accent);
+  opacity: 0.5;
+}
+.ac-chart-num { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.ac-chart-month { font-size: 11px; color: var(--ink-muted); font-family: var(--font-display); }
+.ac-chart-col.is-now .ac-chart-bar-bg { border-color: var(--accent); }
+.ac-chart-col.is-now .ac-chart-month { color: var(--accent-ink); font-weight: 600; }
+.ac-chart-legend {
+  display: flex; gap: 18px;
+  font-size: 11px; color: var(--ink-muted);
+  margin-top: 14px; padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.ac-chart-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
+.ac-chart-legend-dot-bg { background: var(--surface-alt); border: 1px solid var(--border); }
+.ac-chart-legend-dot-fill { background: var(--accent); opacity: 0.5; }
+
+/* ── Theme: parchment forces Varela ── */
+[data-theme="parchment"] .ac-hero-title em,
+[data-theme="parchment"] .ac-category-title em {
+  font-style: normal;
+}
+
+/* ── Responsive ── */
+@media (max-width: 980px) {
+  .ac-app { grid-template-columns: 1fr; }
+  .ac-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
+  .ac-main { padding: 24px 20px 60px; }
+  .ac-cards { grid-template-columns: 1fr; }
+  .ac-stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .ac-meter-bar { flex-wrap: wrap; }
+  .ac-expand { grid-template-columns: 1fr; padding-left: 18px; }
+  .ac-hero-title { font-size: 28px; }
+  .ac-monthstrip-name { font-size: 12px; }
+}
diff --git a/docs/design-handoffs/v0.9_curator/tabs.jsx b/docs/design-handoffs/v0.9_curator/tabs.jsx
new file mode 100644
index 0000000..0dee830
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/tabs.jsx
@@ -0,0 +1,258 @@
+/* global React, ACComponents, ACShell */
+const { useState, useMemo } = React;
+const { ItemRow, Pill, MonthDots, MONTHS, MONTHS_LONG } = ACComponents;
+const { MonthStrip, ProgressMeter } = ACShell;
+
+// ── Home tab ──
+function HomeTab({ data, donated, currentMonth, onJump, onToggle, showLeavingShelf = true, showNewShelf = true }) {
+  const allItems = useMemo(() => [
+    ...data.fish.map(x=>({...x, _cat:"fish"})),
+    ...data.bugs.map(x=>({...x, _cat:"bugs"})),
+  ], [data]);
+
+  const leavingSoon = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth === 12 ? 1 : currentMonth+1) &&
+    !donated[it._cat].has(it.id)
+  );
+
+  const newThisMonth = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth === 1 ? 12 : currentMonth-1) &&
+    !donated[it._cat].has(it.id)
+  );
+
+  const stillNeeded = allItems.filter(it =>
+    it.months && it.months.includes(currentMonth) && !donated[it._cat].has(it.id)
+  ).length;
+
+  return (
+    <div className="ac-home">
+      <div className="ac-hero">
+        <div className="ac-hero-eyebrow">Available in {MONTHS_LONG[currentMonth-1]}</div>
+        <h1 className="ac-hero-title">
+          <em>{stillNeeded}</em> creatures still to donate this month.
+          {leavingSoon.length > 0 && <><br/><span className="ac-hero-aside">{leavingSoon.length} are leaving soon.</span></>}
+        </h1>
+        <MonthStrip current={currentMonth} />
+      </div>
+
+      {showLeavingShelf && leavingSoon.length > 0 && (
+        <section className="ac-shelf">
+          <div className="ac-shelf-head">
+            <div>
+              <div className="ac-shelf-eyebrow ac-shelf-eyebrow-warn">Leaving end of month</div>
+              <h2 className="ac-shelf-title">Catch these before {MONTHS_LONG[currentMonth-1]} ends</h2>
+            </div>
+            <span className="ac-shelf-count">{leavingSoon.length}</span>
+          </div>
+          <div className="ac-cards">
+            {leavingSoon.slice(0,6).map(it => (
+              <button key={it._cat+it.id} className="ac-card" onClick={()=>onJump(it._cat, it.id)}>
+                <div className="ac-card-glyph" style={{borderColor:`var(--chip-${it._cat})`,color:`var(--chip-${it._cat})`}}>
+                  {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+                </div>
+                <div className="ac-card-body">
+                  <div className="ac-card-name">{it.name}</div>
+                  <div className="ac-card-meta">
+                    <span style={{color:`var(--chip-${it._cat})`}}>{it._cat}</span>
+                    <span> · {it.value.toLocaleString()} ✦</span>
+                  </div>
+                  <MonthDots months={it.months} current={currentMonth} />
+                </div>
+                <div className="ac-card-warn">⚠</div>
+              </button>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {showNewShelf && newThisMonth.length > 0 && (
+      <section className="ac-shelf">
+        <div className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Just arrived</div>
+            <h2 className="ac-shelf-title">New this month</h2>
+          </div>
+          <span className="ac-shelf-count">{newThisMonth.length}</span>
+        </div>
+        <div className="ac-cards">
+          {newThisMonth.slice(0,6).map(it => (
+            <button key={it._cat+it.id} className="ac-card" onClick={()=>onJump(it._cat, it.id)}>
+              <div className="ac-card-glyph" style={{borderColor:`var(--chip-${it._cat})`,color:`var(--chip-${it._cat})`}}>
+                {it.name.split(/\s|-/).slice(0,2).map(s=>s[0]).join("").toUpperCase()}
+              </div>
+              <div className="ac-card-body">
+                <div className="ac-card-name">{it.name}</div>
+                <div className="ac-card-meta">
+                  <span style={{color:`var(--chip-${it._cat})`}}>{it._cat}</span>
+                  <span> · {it.value.toLocaleString()} ✦</span>
+                </div>
+                <MonthDots months={it.months} current={currentMonth} />
+              </div>
+            </button>
+          ))}
+        </div>
+      </section>
+      )}
+
+      <section className="ac-shelf">
+        <div className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Recent</div>
+            <h2 className="ac-shelf-title">Latest donations</h2>
+          </div>
+        </div>
+        <div className="ac-activity">
+          {data.recentActivity.map((a,i) => (
+            <div key={i} className="ac-activity-row">
+              <div className="ac-activity-dot" style={{background:`var(--chip-${a.category})`}}/>
+              <div className="ac-activity-name">{a.item}</div>
+              <div className="ac-activity-cat">{a.category}</div>
+              <div className="ac-activity-when">{a.when}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// ── Category tab (sectioned list) ──
+function CategoryTab({ category, items, donated, onToggle, currentMonth, search }) {
+  const [expanded, setExpanded] = useState(null);
+
+  const lowered = search.trim().toLowerCase();
+  const filtered = lowered
+    ? items.filter(i => i.name.toLowerCase().includes(lowered) || (i.basedOn||"").toLowerCase().includes(lowered))
+    : items;
+
+  const isAvail = (it) => it.months ? it.months.includes(currentMonth) : true;
+  const isLeavingSoon = (it) => it.months && it.months.includes(currentMonth) &&
+    !it.months.includes(currentMonth===12?1:currentMonth+1);
+
+  const groups = useMemo(() => {
+    const leaving = [], avail = [], done = [], locked = [];
+    for (const it of filtered) {
+      const isDonated = donated.has(it.id);
+      if (isDonated) done.push(it);
+      else if (isLeavingSoon(it)) leaving.push(it);
+      else if (isAvail(it)) avail.push(it);
+      else locked.push(it);
+    }
+    const byName = (a,b)=>a.name.localeCompare(b.name);
+    return [
+      { id: "leaving", label: "Leaving this month", items: leaving.sort(byName), tone: "warn" },
+      { id: "avail",   label: "Available now",       items: avail.sort(byName),   tone: "accent" },
+      { id: "locked",  label: "Out of season",       items: locked.sort(byName),  tone: "muted" },
+      { id: "done",    label: "Already donated",     items: done.sort(byName),    tone: "done" },
+    ].filter(g => g.items.length > 0);
+  }, [filtered, donated, currentMonth]);
+
+  return (
+    <div className="ac-category">
+      {groups.map(g => (
+        <section key={g.id} className={`ac-group ac-group-${g.tone}`}>
+          <header className="ac-group-head">
+            <h3 className="ac-group-title">{g.label}</h3>
+            <span className="ac-group-count">{g.items.length}</span>
+          </header>
+          <div className="ac-list">
+            {g.items.map(it => (
+              <ItemRow
+                key={it.id}
+                item={it}
+                category={category}
+                donated={donated.has(it.id)}
+                onToggle={()=>onToggle(it.id)}
+                currentMonth={currentMonth}
+                expanded={expanded === it.id}
+                onExpand={()=>setExpanded(expanded===it.id?null:it.id)}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+      {groups.length === 0 && (
+        <div className="ac-empty">No matches for "{search}"</div>
+      )}
+    </div>
+  );
+}
+
+// ── Stats tab ──
+function StatsTab({ data, donated, currentMonth }) {
+  const counts = {
+    fish: { donated: donated.fish.size, total: data.fish.length },
+    bugs: { donated: donated.bugs.size, total: data.bugs.length },
+    fossils: { donated: donated.fossils.size, total: data.fossils.length },
+    art: { donated: donated.art.size, total: data.art.length },
+  };
+
+  // monthly bars: how many fish+bugs available per month
+  const monthlyAvail = MONTHS.map((_, i) => {
+    const m = i+1;
+    let avail = 0, donatedCount = 0;
+    for (const cat of ["fish","bugs"]) {
+      for (const it of data[cat]) {
+        if (it.months && it.months.includes(m)) {
+          avail++;
+          if (donated[cat].has(it.id)) donatedCount++;
+        }
+      }
+    }
+    return { avail, donatedCount, m };
+  });
+  const maxAvail = Math.max(...monthlyAvail.map(x=>x.avail));
+
+  return (
+    <div className="ac-stats">
+      <div className="ac-stats-grid">
+        {Object.entries(counts).map(([k,v]) => (
+          <div key={k} className="ac-statcard">
+            <div className="ac-statcard-cat" style={{color:`var(--chip-${k})`}}>{k}</div>
+            <div className="ac-statcard-num">
+              <span>{v.donated}</span>
+              <span className="ac-statcard-of">/ {v.total}</span>
+            </div>
+            <div className="ac-statcard-bar">
+              <div className="ac-statcard-fill" style={{
+                width: `${(v.donated/v.total)*100}%`,
+                background:`var(--chip-${k})`
+              }}/>
+            </div>
+            <div className="ac-statcard-pct">{Math.round((v.donated/v.total)*100)}% complete</div>
+          </div>
+        ))}
+      </div>
+
+      <section className="ac-chartcard">
+        <header className="ac-shelf-head">
+          <div>
+            <div className="ac-shelf-eyebrow">Yearly rhythm</div>
+            <h2 className="ac-shelf-title">Fish &amp; bug availability by month</h2>
+          </div>
+        </header>
+        <div className="ac-chart">
+          {monthlyAvail.map(({avail, donatedCount, m}, i) => (
+            <div key={m} className={`ac-chart-col ${m===currentMonth?"is-now":""}`}>
+              <div className="ac-chart-bar">
+                <div className="ac-chart-bar-bg" style={{height: `${(avail/maxAvail)*100}%`}}>
+                  <div className="ac-chart-bar-fill" style={{height: `${(donatedCount/avail)*100}%`}}/>
+                </div>
+              </div>
+              <div className="ac-chart-num">{avail}</div>
+              <div className="ac-chart-month">{MONTHS[i]}</div>
+            </div>
+          ))}
+        </div>
+        <div className="ac-chart-legend">
+          <span><span className="ac-chart-legend-dot ac-chart-legend-dot-bg"/>Available</span>
+          <span><span className="ac-chart-legend-dot ac-chart-legend-dot-fill"/>Already donated</span>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+window.ACTabs = { HomeTab, CategoryTab, StatsTab };
diff --git a/docs/design-handoffs/v0.9_curator/theme.js b/docs/design-handoffs/v0.9_curator/theme.js
new file mode 100644
index 0000000..6d53758
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/theme.js
@@ -0,0 +1,101 @@
+// Theme tokens. Exposed as CSS variables on :root via setTheme().
+window.THEMES = {
+  meadow: {
+    label: "Meadow",
+    bg: "#F4EFE3",
+    surface: "#FFFDF7",
+    surfaceAlt: "#F8F2E2",
+    ink: "#23241F",
+    inkSoft: "#5C5848",
+    inkMuted: "#8A8470",
+    border: "#E2D9C3",
+    borderStrong: "#CFC4A8",
+    accent: "oklch(0.55 0.09 150)", // moss
+    accentSoft: "oklch(0.55 0.09 150 / 0.12)",
+    accentInk: "oklch(0.32 0.06 150)",
+    warn: "oklch(0.62 0.12 50)", // clay
+    warnSoft: "oklch(0.62 0.12 50 / 0.14)",
+    chipFish: "oklch(0.62 0.08 230)",
+    chipBug: "oklch(0.6 0.1 130)",
+    chipFossil: "oklch(0.55 0.06 60)",
+    chipArt: "oklch(0.58 0.08 320)",
+    fontDisplay: "'Fraunces', 'Playfair Display', Georgia, serif",
+    fontUi: "'Inter', system-ui, -apple-system, sans-serif",
+  },
+  parchment: {
+    label: "Parchment (current)",
+    bg: "#EFE6D0",
+    surface: "#F5E9D4",
+    surfaceAlt: "#EADCBE",
+    ink: "#2A2A2A",
+    inkSoft: "#5a4a35",
+    inkMuted: "#8B7A5C",
+    border: "#E0D2B0",
+    borderStrong: "#C9B98D",
+    accent: "#3CA370",
+    accentSoft: "rgba(60,163,112,0.14)",
+    accentInk: "#1F5A3C",
+    warn: "#C76B3F",
+    warnSoft: "rgba(199,107,63,0.16)",
+    chipFish: "#3F6FA8",
+    chipBug: "#7B9C3A",
+    chipFossil: "#7B5E3B",
+    chipArt: "#8B5E94",
+    fontDisplay: "'Varela Round', system-ui, sans-serif",
+    fontUi: "'Varela Round', system-ui, sans-serif",
+  },
+  midnight: {
+    label: "Midnight",
+    bg: "#16181F",
+    surface: "#1E212A",
+    surfaceAlt: "#262A35",
+    ink: "#EFEAE0",
+    inkSoft: "#B5AE9E",
+    inkMuted: "#7E7866",
+    border: "#2F3340",
+    borderStrong: "#3D4250",
+    accent: "oklch(0.7 0.09 150)",
+    accentSoft: "oklch(0.7 0.09 150 / 0.16)",
+    accentInk: "oklch(0.85 0.06 150)",
+    warn: "oklch(0.72 0.12 50)",
+    warnSoft: "oklch(0.72 0.12 50 / 0.18)",
+    chipFish: "oklch(0.72 0.09 230)",
+    chipBug: "oklch(0.74 0.09 130)",
+    chipFossil: "oklch(0.7 0.06 60)",
+    chipArt: "oklch(0.72 0.08 320)",
+    fontDisplay: "'Fraunces', Georgia, serif",
+    fontUi: "'Inter', system-ui, sans-serif",
+  },
+  sakura: {
+    label: "Sakura",
+    bg: "#FBF0EE",
+    surface: "#FFFCFB",
+    surfaceAlt: "#F7E5E1",
+    ink: "#2C2228",
+    inkSoft: "#705661",
+    inkMuted: "#9C8590",
+    border: "#EFD9D3",
+    borderStrong: "#DEBDB4",
+    accent: "oklch(0.6 0.11 10)", // rose
+    accentSoft: "oklch(0.6 0.11 10 / 0.12)",
+    accentInk: "oklch(0.4 0.09 10)",
+    warn: "oklch(0.6 0.13 50)",
+    warnSoft: "oklch(0.6 0.13 50 / 0.14)",
+    chipFish: "oklch(0.6 0.08 230)",
+    chipBug: "oklch(0.6 0.09 130)",
+    chipFossil: "oklch(0.55 0.06 60)",
+    chipArt: "oklch(0.58 0.08 320)",
+    fontDisplay: "'Fraunces', Georgia, serif",
+    fontUi: "'Inter', system-ui, sans-serif",
+  },
+};
+
+window.applyTheme = function applyTheme(name) {
+  const t = window.THEMES[name] || window.THEMES.meadow;
+  const root = document.documentElement;
+  for (const [k, v] of Object.entries(t)) {
+    if (k === "label") continue;
+    root.style.setProperty(`--${k.replace(/([A-Z])/g, "-$1").toLowerCase()}`, v);
+  }
+  root.dataset.theme = name;
+};
diff --git a/docs/design-handoffs/v0.9_curator/tweaks-panel.jsx b/docs/design-handoffs/v0.9_curator/tweaks-panel.jsx
new file mode 100644
index 0000000..5f8f95a
--- /dev/null
+++ b/docs/design-handoffs/v0.9_curator/tweaks-panel.jsx
@@ -0,0 +1,425 @@
+
+// tweaks-panel.jsx
+// Reusable Tweaks shell + form-control helpers.
+//
+// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
+// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
+// individual prototypes don't re-roll it. Ships a consistent set of controls so you
+// don't hand-draw <input type="range">, segmented radios, steppers, etc.
+//
+// Usage (in an HTML file that loads React + Babel):
+//
+//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+//     "primaryColor": "#D97757",
+//     "fontSize": 16,
+//     "density": "regular",
+//     "dark": false
+//   }/*EDITMODE-END*/;
+//
+//   function App() {
+//     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+//     return (
+//       <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
+//         Hello
+//         <TweaksPanel>
+//           <TweakSection label="Typography" />
+//           <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
+//                        onChange={(v) => setTweak('fontSize', v)} />
+//           <TweakRadio  label="Density" value={t.density}
+//                        options={['compact', 'regular', 'comfy']}
+//                        onChange={(v) => setTweak('density', v)} />
+//           <TweakSection label="Theme" />
+//           <TweakColor  label="Primary" value={t.primaryColor}
+//                        onChange={(v) => setTweak('primaryColor', v)} />
+//           <TweakToggle label="Dark mode" value={t.dark}
+//                        onChange={(v) => setTweak('dark', v)} />
+//         </TweaksPanel>
+//       </div>
+//     );
+//   }
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+const __TWEAKS_STYLE = `
+  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
+    max-height:calc(100vh - 32px);display:flex;flex-direction:column;
+    background:rgba(250,249,247,.78);color:#29261b;
+    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
+    border:.5px solid rgba(255,255,255,.6);border-radius:14px;
+    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
+    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
+  .twk-hd{display:flex;align-items:center;justify-content:space-between;
+    padding:10px 8px 10px 14px;cursor:move;user-select:none}
+  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
+  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
+    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
+  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
+  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
+    overflow-y:auto;overflow-x:hidden;min-height:0;
+    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
+  .twk-body::-webkit-scrollbar{width:8px}
+  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
+  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
+    border:2px solid transparent;background-clip:content-box}
+  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
+    border:2px solid transparent;background-clip:content-box}
+  .twk-row{display:flex;flex-direction:column;gap:5px}
+  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
+  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
+    color:rgba(41,38,27,.72)}
+  .twk-lbl>span:first-child{font-weight:500}
+  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
+
+  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+    color:rgba(41,38,27,.45);padding:10px 0 0}
+  .twk-sect:first-child{padding-top:0}
+
+  .twk-field{appearance:none;width:100%;height:26px;padding:0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
+    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
+  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
+  select.twk-field{padding-right:22px;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
+    background-repeat:no-repeat;background-position:right 8px center}
+
+  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
+    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
+  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
+    width:14px;height:14px;border-radius:50%;background:#fff;
+    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
+    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+
+  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
+    background:rgba(0,0,0,.06);user-select:none}
+  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
+    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
+    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
+  .twk-seg.dragging .twk-seg-thumb{transition:none}
+  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
+    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
+    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
+    overflow-wrap:anywhere}
+
+  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
+    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
+  .twk-toggle[data-on="1"]{background:#34c759}
+  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
+
+  .twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
+  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
+    user-select:none;padding-right:8px}
+  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
+    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
+    outline:none;color:inherit;-moz-appearance:textfield}
+  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
+    -webkit-appearance:none;margin:0}
+  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
+
+  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
+    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
+  .twk-btn:hover{background:rgba(0,0,0,.88)}
+  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
+  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
+
+  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
+    background:transparent;flex-shrink:0}
+  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
+  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
+  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
+`;
+
+// ── useTweaks ───────────────────────────────────────────────────────────────
+// Single source of truth for tweak values. setTweak persists via the host
+// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
+function useTweaks(defaults) {
+  const [values, setValues] = React.useState(defaults);
+  // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
+  // useState-style call doesn't write a "[object Object]" key into the persisted
+  // JSON block.
+  const setTweak = React.useCallback((keyOrEdits, val) => {
+    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
+      ? keyOrEdits : { [keyOrEdits]: val };
+    setValues((prev) => ({ ...prev, ...edits }));
+    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
+  }, []);
+  return [values, setTweak];
+}
+
+// ── TweaksPanel ─────────────────────────────────────────────────────────────
+// Floating shell. Registers the protocol listener BEFORE announcing
+// availability — if the announce ran first, the host's activate could land
+// before our handler exists and the toolbar toggle would silently no-op.
+// The close button posts __edit_mode_dismissed so the host's toolbar toggle
+// flips off in lockstep; the host echoes __deactivate_edit_mode back which
+// is what actually hides the panel.
+function TweaksPanel({ title = 'Tweaks', children }) {
+  const [open, setOpen] = React.useState(false);
+  const dragRef = React.useRef(null);
+  const offsetRef = React.useRef({ x: 16, y: 16 });
+  const PAD = 16;
+
+  const clampToViewport = React.useCallback(() => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const w = panel.offsetWidth, h = panel.offsetHeight;
+    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
+    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
+    offsetRef.current = {
+      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
+      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
+    };
+    panel.style.right = offsetRef.current.x + 'px';
+    panel.style.bottom = offsetRef.current.y + 'px';
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) return;
+    clampToViewport();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', clampToViewport);
+      return () => window.removeEventListener('resize', clampToViewport);
+    }
+    const ro = new ResizeObserver(clampToViewport);
+    ro.observe(document.documentElement);
+    return () => ro.disconnect();
+  }, [open, clampToViewport]);
+
+  React.useEffect(() => {
+    const onMsg = (e) => {
+      const t = e?.data?.type;
+      if (t === '__activate_edit_mode') setOpen(true);
+      else if (t === '__deactivate_edit_mode') setOpen(false);
+    };
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+
+  const dismiss = () => {
+    setOpen(false);
+    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
+  };
+
+  const onDragStart = (e) => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const r = panel.getBoundingClientRect();
+    const sx = e.clientX, sy = e.clientY;
+    const startRight = window.innerWidth - r.right;
+    const startBottom = window.innerHeight - r.bottom;
+    const move = (ev) => {
+      offsetRef.current = {
+        x: startRight - (ev.clientX - sx),
+        y: startBottom - (ev.clientY - sy),
+      };
+      clampToViewport();
+    };
+    const up = () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  };
+
+  if (!open) return null;
+  return (
+    <>
+      <style>{__TWEAKS_STYLE}</style>
+      <div ref={dragRef} className="twk-panel" data-noncommentable=""
+           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
+        <div className="twk-hd" onMouseDown={onDragStart}>
+          <b>{title}</b>
+          <button className="twk-x" aria-label="Close tweaks"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={dismiss}>✕</button>
+        </div>
+        <div className="twk-body">{children}</div>
+      </div>
+    </>
+  );
+}
+
+// ── Layout helpers ──────────────────────────────────────────────────────────
+
+function TweakSection({ label, children }) {
+  return (
+    <>
+      <div className="twk-sect">{label}</div>
+      {children}
+    </>
+  );
+}
+
+function TweakRow({ label, value, children, inline = false }) {
+  return (
+    <div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
+      <div className="twk-lbl">
+        <span>{label}</span>
+        {value != null && <span className="twk-val">{value}</span>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Controls ────────────────────────────────────────────────────────────────
+
+function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
+  return (
+    <TweakRow label={label} value={`${value}${unit}`}>
+      <input type="range" className="twk-slider" min={min} max={max} step={step}
+             value={value} onChange={(e) => onChange(Number(e.target.value))} />
+    </TweakRow>
+  );
+}
+
+function TweakToggle({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
+              role="switch" aria-checked={!!value}
+              onClick={() => onChange(!value)}><i /></button>
+    </div>
+  );
+}
+
+function TweakRadio({ label, value, options, onChange }) {
+  const trackRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
+  const idx = Math.max(0, opts.findIndex((o) => o.value === value));
+  const n = opts.length;
+
+  // The active value is read by pointer-move handlers attached for the lifetime
+  // of a drag — ref it so a stale closure doesn't fire onChange for every move.
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+
+  const segAt = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const inner = r.width - 4;
+    const i = Math.floor(((clientX - r.left - 2) / inner) * n);
+    return opts[Math.max(0, Math.min(n - 1, i))].value;
+  };
+
+  const onPointerDown = (e) => {
+    setDragging(true);
+    const v0 = segAt(e.clientX);
+    if (v0 !== valueRef.current) onChange(v0);
+    const move = (ev) => {
+      if (!trackRef.current) return;
+      const v = segAt(ev.clientX);
+      if (v !== valueRef.current) onChange(v);
+    };
+    const up = () => {
+      setDragging(false);
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+
+  return (
+    <TweakRow label={label}>
+      <div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
+           className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
+        <div className="twk-seg-thumb"
+             style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
+                      width: `calc((100% - 4px) / ${n})` }} />
+        {opts.map((o) => (
+          <button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
+            {o.label}
+          </button>
+        ))}
+      </div>
+    </TweakRow>
+  );
+}
+
+function TweakSelect({ label, value, options, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
+        {options.map((o) => {
+          const v = typeof o === 'object' ? o.value : o;
+          const l = typeof o === 'object' ? o.label : o;
+          return <option key={v} value={v}>{l}</option>;
+        })}
+      </select>
+    </TweakRow>
+  );
+}
+
+function TweakText({ label, value, placeholder, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <input className="twk-field" type="text" value={value} placeholder={placeholder}
+             onChange={(e) => onChange(e.target.value)} />
+    </TweakRow>
+  );
+}
+
+function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
+  const clamp = (n) => {
+    if (min != null && n < min) return min;
+    if (max != null && n > max) return max;
+    return n;
+  };
+  const startRef = React.useRef({ x: 0, val: 0 });
+  const onScrubStart = (e) => {
+    e.preventDefault();
+    startRef.current = { x: e.clientX, val: value };
+    const decimals = (String(step).split('.')[1] || '').length;
+    const move = (ev) => {
+      const dx = ev.clientX - startRef.current.x;
+      const raw = startRef.current.val + dx * step;
+      const snapped = Math.round(raw / step) * step;
+      onChange(clamp(Number(snapped.toFixed(decimals))));
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+  return (
+    <div className="twk-num">
+      <span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
+      <input type="number" value={value} min={min} max={max} step={step}
+             onChange={(e) => onChange(clamp(Number(e.target.value)))} />
+      {unit && <span className="twk-num-unit">{unit}</span>}
+    </div>
+  );
+}
+
+function TweakColor({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <input type="color" className="twk-swatch" value={value}
+             onChange={(e) => onChange(e.target.value)} />
+    </div>
+  );
+}
+
+function TweakButton({ label, onClick, secondary = false }) {
+  return (
+    <button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
+            onClick={onClick}>{label}</button>
+  );
+}
+
+Object.assign(window, {
+  useTweaks, TweaksPanel, TweakSection, TweakRow,
+  TweakSlider, TweakToggle, TweakRadio, TweakSelect,
+  TweakText, TweakNumber, TweakColor, TweakButton,
+});
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 459f1a1..5b95aa5 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -10,9 +10,9 @@
 
 | Pass | Folder | Covers |
 |---|---|---|
-| v0.9 (first pass) | `design_handoff_v0.9_curator/` | Design language, palette, type scale, all screens incl. CategoryTab sectioning |
-| v0.9.1 (second pass) | `design_handoff_v0.9.1_curator/` | TownManager drawer, GlobalSearchDropdown, Sea Creatures nav integration, `chip-sea` token |
-| v0.9.2 (third pass, most current) | `design_handoff_v0.9.2_curator/` | ProgressMeter 5-segment responsive, scroll-to + highlight, Settings page |
+| v0.9 (first pass) | `docs/design-handoffs/v0.9_curator/` | Design language, palette, type scale, all screens incl. CategoryTab sectioning |
+| v0.9.1 (second pass) | `docs/design-handoffs/v0.9.1_curator/` | TownManager drawer, GlobalSearchDropdown, Sea Creatures nav integration, `chip-sea` token |
+| v0.9.2 (third pass, most current) | `docs/design-handoffs/v0.9.2_curator/` | ProgressMeter 5-segment responsive, scroll-to + highlight, Settings page |
 
 **Read the handoffs in order.** Where a topic is covered by multiple passes, the later pass takes precedence. Treat the v0.9 README as the canonical base spec for anything not overridden by v0.9.1 or v0.9.2.
 
@@ -91,7 +91,7 @@ These decisions were made explicitly in conversation with Bea on 2026-05-03 and
 
 **Why:** Changing a town's game would orphan all existing donation data — the 3-level store schema (`donated[townId][gameId][itemId]`) scopes donations under the original `gameId`. A game change would leave ghost data under the old `gameId` with no migration UX. Building migration UX is out of scope for v0.9.
 
-**Implementation note:** The v0.9.2 design (`design_handoff_v0.9.2_curator/addons.jsx` `TownRow` editing state, line 104) still includes the game `<select>`:
+**Implementation note:** The v0.9.2 design (`docs/design-handoffs/v0.9.2_curator/addons.jsx` `TownRow` editing state, line 104) still includes the game `<select>`:
 ```jsx
 <label className="ac-tm-field">
   <span className="ac-tm-field-label">Game</span>
@@ -647,9 +647,9 @@ All 10 phases merged to `development`. All of the following must be true:
 
 | Resource | Path / URL |
 |---|---|
-| Design handoff v0.9 | `design_handoff_v0.9_curator/README.md` |
-| Design handoff v0.9.1 | `design_handoff_v0.9.1_curator/README.md` |
-| Design handoff v0.9.2 (most current) | `design_handoff_v0.9.2_curator/README.md` |
+| Design handoff v0.9 | `docs/design-handoffs/v0.9_curator/README.md` |
+| Design handoff v0.9.1 | `docs/design-handoffs/v0.9.1_curator/README.md` |
+| Design handoff v0.9.2 (most current) | `docs/design-handoffs/v0.9.2_curator/README.md` |
 | Architecture reference | `.claude/rules/architecture.md` |
 | Dev process checklist | `.claude/rules/dev-process.md` |
 | Vercel deployment rules | `.claude/rules/vercel.md` |

From 4ecf3e0127b71a4704c41ba6fcbc7da9321f745d Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 18:10:09 -0400
Subject: [PATCH 04/28] feat(v0.9 phase 2): replace header+tabbar with Sidebar
 shell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New Sidebar component (280px sticky) with brand, active town card,
  per-category nav with donated/total counts, footer (Export + Settings)
- App shell CSS in index.css: .ac-app grid (280px 1fr), max-width 1440px,
  stacks above main below 980px
- ACCanvas refactored to mount Sidebar + <main className="ac-main">;
  outer gradient/grid background removed in favor of --bg
- Hemisphere toggle relocated to sidebar town card for ACNH (was in
  MuseumHeader); will move into TownManager in Phase 4
- Switch town stub: cycles between towns or opens CreateTownModal —
  full TownManager drawer ships in Phase 4
- Deleted: MuseumHeader, TabBar, TownSwitcher
- CHANGELOG + CLAUDE.md updated

Per docs/v0.9-plan.md Phase 2.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                    |  16 ++
 CLAUDE.md                       |   8 +-
 src/components/ACCanvas.tsx     | 321 ++++++++++++++------------------
 src/components/MuseumHeader.tsx | 125 -------------
 src/components/Sidebar.tsx      | 233 +++++++++++++++++++++++
 src/components/TabBar.tsx       | 121 ------------
 src/components/TownSwitcher.tsx | 167 -----------------
 src/index.css                   | 181 ++++++++++++++++++
 8 files changed, 576 insertions(+), 596 deletions(-)
 delete mode 100644 src/components/MuseumHeader.tsx
 create mode 100644 src/components/Sidebar.tsx
 delete mode 100644 src/components/TabBar.tsx
 delete mode 100644 src/components/TownSwitcher.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 103bb75..dbec2f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,22 @@ All notable changes to this project are documented here.
 - This phase is plumbing only. No components consume the new tokens yet; visual output is intentionally near-identical to v0.8.2-alpha. Component restyles begin in Phase 5.
 - **Parchment, Midnight, and Sakura themes are intentionally excluded** per locked decision #2 in `docs/v0.9-plan.md` ("ship Meadow only"). The legacy `colors` export in `src/lib/colors.ts` is kept untouched until later phases retire its consumers.
 
+### Added — Phase 2: sidebar + shell layout
+- **`Sidebar` component** (`src/components/Sidebar.tsx`) — 280px sticky left sidebar with brand mark/wordmark, active-town card, vertical nav with per-category `donated/total` counts, and Export CSV / Settings footer. Uses `<NavLink>` so active state tracks the URL.
+- **App shell layout** in `src/index.css` (`.ac-app`, `.ac-sidebar`, `.ac-main`, `.ac-nav-*`, `.ac-town-*`, `.ac-brand-*`, `.ac-foot-link`, `.ac-hem-toggle`, `.ac-hem-btn`) — CSS grid `280px 1fr`, max-width 1440px centered. Below 980px sidebar stacks above main (CSS grid row change).
+- Sea nav entry gated on `gameId in {ACNL, ACNH}` and presence of sea data; Art nav entry hidden when game has no art.
+- Hemisphere toggle (NH/SH) inline in the sidebar town card for ACNH towns — preserves the toggle that previously lived in `MuseumHeader`. Will move into `TownManager` in Phase 4.
+- Settings nav button routes to `/settings` (route lands in Phase 3).
+
+### Removed — Phase 2
+- **`MuseumHeader`**, **`TabBar`**, **`TownSwitcher`** — deleted. Replaced by `Sidebar`. ACCanvas no longer renders the wood-toned header bar or horizontal tab strip; main column now sits inside `.ac-main`.
+
+### Decisions — Phase 2
+- The plan calls the Active Town card's "Switch town ›" button a Phase 4 stub. Implemented as a temporary lightweight switcher: 0 other towns → opens `CreateTownModal`; 1 other → activates it; 2+ → `window.prompt` picker. Replaced wholesale by `TownManager` in Phase 4.
+- Edit / New town are exposed as small links inside the active-town card so users don't lose town CRUD between Phase 2 and Phase 4 (they previously lived in the now-deleted `TownSwitcher`). Both still wire to the existing `EditTownModal` / `CreateTownModal`, which Phase 4 will retire.
+- Hemisphere toggle relocated to the sidebar town card to avoid regressing the v0.8 functionality that lived in `MuseumHeader`. Phase 4 moves it into `TownManager`.
+- Brand wordmark uses **"Museum Tracker"** (matching the prior MuseumHeader) — not "Curator", per the codename note in `docs/v0.9-plan.md` (no user-facing copy says "Curator").
+
 ## [v0.8.2-alpha] — 2026-05-01
 
 ### Added
diff --git a/CLAUDE.md b/CLAUDE.md
index d4783f8..0e86787 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -40,7 +40,7 @@ npm install       # Install dependencies
 **Store schema:** 3-level `donated[townId][gameId][itemId]` (as of v0.7); `Town` includes `hemisphere: 'NH' | 'SH'` (as of v0.8)  
 **Migration:** Zustand persist v3 + `bootstrapMigration.ts` — zero data loss for existing users  
 **Modal pattern:** `CreateTownModal` and `EditTownModal` use always-mounted `isOpen` prop pattern; overlay is a single `flex items-center justify-center` wrapper — no `overflow-y-auto`  
-**TownSwitcher dropdown:** `position: fixed` with `getBoundingClientRect()` anchor to escape `overflow-hidden` header; z-index: dismiss overlay `z-40`, dropdown panel `z-50`, action buttons row `relative z-20`; active town filtered out of list
+**Shell layout (v0.9 Phase 2):** `Sidebar` (280px left, sticky) + `<main className="ac-main">` in CSS grid `280px 1fr`, max-width 1440px centered. Below 980px sidebar stacks above main. `MuseumHeader`, `TabBar`, `TownSwitcher` retired — nav lives in the sidebar.
 
 ### File Structure
 
@@ -55,9 +55,7 @@ src/
                             # progress cards, recent activity
     CollectibleRow.tsx      # Single item row with donate toggle; shows chevron + rounded-top when expanded
     ItemExpandPanel.tsx     # Inline accordion panel shown below CollectibleRow for fish/bugs/fossils
-    MuseumHeader.tsx        # Header bar + TownSwitcher dropdown
-    TabBar.tsx              # Tab navigation strip
-    TownSwitcher.tsx        # Town dropdown with game badge per town
+    Sidebar.tsx             # v0.9 Phase 2: 280px left sidebar — brand, active town card, NavLink nav with counts, footer (replaces MuseumHeader/TabBar/TownSwitcher)
     ErrorBanner.tsx         # Dismissible inline error notification
     ErrorBoundary.tsx       # Top-level React error boundary; crashes render ErrorState
     ErrorState.tsx          # Full-page error fallback UI
@@ -177,7 +175,7 @@ See `.claude/rules/vercel.md` for full deployment rules. Key points:
 `src/components/ACCanvas.tsx` was decomposed in v0.7 and is now ~298 lines (orchestration shell only).
 It mounts the active tab view, wires modals, and handles global search. All data fetching,
 filtering, and sub-component logic lives in dedicated hooks and components.
-Do not add new top-level tabs without updating the tab switch and `TabBar` props.
+Do not add new top-level tabs without updating the tab switch in ACCanvas and the nav list in `Sidebar`.
 
 ## Roadmap
 
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index 0c11cba..0bb8c8d 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAppStore } from '../lib/store';
-import { CATEGORY_ORDER } from '../lib/constants';
 import { CATEGORY_META } from '../lib/categoryMeta';
 import { downloadCSV } from '../lib/csvExport';
 import { filterByQuery, globalFilter, type AnyItem } from '../lib/utils';
@@ -14,8 +13,7 @@ import HomeTab from './HomeTab';
 import ErrorBanner from './ErrorBanner';
 import ErrorState from './ErrorState';
 
-import { MuseumHeader } from './MuseumHeader';
-import { TabBar } from './TabBar';
+import { Sidebar } from './Sidebar';
 import { CollectibleRow } from './CollectibleRow';
 import { ItemExpandPanel } from './ItemExpandPanel';
 import { CategoryProgress } from './shared/CategoryProgress';
@@ -79,7 +77,6 @@ export default function ACCanvas() {
     return s.donatedAt[s.activeTownId]?.[town.gameId] ?? EMPTY_DONATED_AT;
   });
   const toggle = useAppStore(s => s.toggle);
-  const setTownHemisphere = useAppStore(s => s.setTownHemisphere);
 
   // Sync URL townId → Zustand activeTownId
   useEffect(() => {
@@ -148,15 +145,6 @@ export default function ACCanvas() {
     setSelected(null);
   }, [activeTab]);
 
-  const totalItems = CATEGORY_ORDER.reduce(
-    (sum, cat) => sum + data[cat].length,
-    0
-  );
-  const totalDonated = CATEGORY_ORDER.reduce(
-    (sum, cat) => sum + catCounts[cat],
-    0
-  );
-
   const activeCat: CategoryId | null =
     activeTab !== 'home' &&
     activeTab !== 'activity' &&
@@ -222,183 +210,160 @@ export default function ACCanvas() {
   const catLabel = activeCat ? CATEGORY_META[activeCat].label : '';
 
   return (
-    <div className="min-h-screen w-full relative overflow-hidden">
-      <div
-        className="absolute inset-0"
-        style={{
-          background: 'linear-gradient(180deg, #f7f3ea 0%, #efe6d6 100%)',
-        }}
-      />
-      <div
-        className="absolute inset-0 opacity-[0.06] pointer-events-none"
-        style={{
-          backgroundImage:
-            'linear-gradient(90deg, rgba(0,0,0,.15) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.15) 1px, transparent 1px)',
-          backgroundSize: '24px 24px',
-        }}
-      />
-
-      <div className="relative mx-auto max-w-3xl px-4 py-8 space-y-4">
-        <MuseumHeader
-          donatedCount={totalDonated}
-          totalCount={totalItems}
-          onCreateTown={() => setShowCreateTown(true)}
-          onEditTown={() => setShowEditTown(true)}
+    <div className="ac-app">
+      {!noTowns && activeTownId && (
+        <Sidebar
+          townId={activeTownId}
+          data={data}
+          catCounts={catCounts}
+          onOpenCreateTown={() => setShowCreateTown(true)}
+          onOpenEditTown={() => setShowEditTown(true)}
           onExport={handleExport}
-          gameId={activeTown?.gameId}
-          hemisphere={activeTown?.hemisphere ?? 'NH'}
-          onHemisphereChange={h => {
-            if (activeTown) setTownHemisphere(activeTown.id, h);
-          }}
         />
-
-        {banner && (
-          <ErrorBanner
-            error={banner}
-            onDismiss={() => setBanner(null)}
-            onRetry={
-              banner.type === 'networkError'
-                ? () => {
-                    setBanner(null);
-                    reload();
-                  }
-                : undefined
-            }
-          />
-        )}
-
-        {noTowns ? (
-          <EmptyState message="Create a town to start tracking your museum donations." />
-        ) : (
-          <>
-            <TabBar
-              active={activeTab}
-              onChange={handleTabChange}
-              catCounts={catCounts}
-              data={data}
+      )}
+      <main className="ac-main">
+        <div className="space-y-4">
+          {banner && (
+            <ErrorBanner
+              error={banner}
+              onDismiss={() => setBanner(null)}
+              onRetry={
+                banner.type === 'networkError'
+                  ? () => {
+                      setBanner(null);
+                      reload();
+                    }
+                  : undefined
+              }
             />
-
-            {activeTab === 'home' ? (
-              <HomeTab
-                data={data}
-                donated={activeTownDonated}
-                donatedAt={activeTownDonatedAt}
-                catCounts={catCounts}
-                onNavigate={v => handleTabChange(v)}
-              />
-            ) : activeTab === 'analytics' ? (
-              <AnalyticsView
-                data={data}
-                catCounts={catCounts}
-                donatedAt={activeTownDonatedAt}
-              />
-            ) : activeTab === 'activity' ? (
-              <ActivityFeed donatedAt={activeTownDonatedAt} data={data} />
-            ) : activeTab === 'search' ? (
-              <>
-                <GlobalSearchBar
-                  query={globalQuery}
-                  setQuery={setGlobalQuery}
-                  onSubmit={pushRecentSearch}
-                  historyOpen={historyOpen}
-                  setHistoryOpen={setHistoryOpen}
-                  recentSearches={recentSearches}
-                  onSelectHistory={s => {
-                    setGlobalQuery(s);
-                    pushRecentSearch(s);
-                  }}
-                  onClearHistory={() => {
-                    setRecentSearches([]);
-                    setHistoryOpen(false);
-                  }}
-                  wrapperRef={historyRef}
-                />
-                <GlobalSearchResults
-                  results={globalResults}
-                  query={globalQuery}
+          )}
+
+          {noTowns ? (
+            <EmptyState message="Create a town to start tracking your museum donations." />
+          ) : (
+            <>
+              {activeTab === 'home' ? (
+                <HomeTab
+                  data={data}
                   donated={activeTownDonated}
-                  onToggle={id => toggle(id)}
-                  onSelect={(item, category) => {
-                    if (globalQuery.trim())
-                      pushRecentSearch(globalQuery.trim());
-                    setSelected({ item, category });
-                  }}
+                  donatedAt={activeTownDonatedAt}
+                  catCounts={catCounts}
+                  onNavigate={v => handleTabChange(v)}
                 />
-              </>
-            ) : (
-              <>
-                <CategoryProgress
-                  donated={catCounts[activeCat!]}
-                  total={activeItems.length}
-                  label={catLabel}
+              ) : activeTab === 'analytics' ? (
+                <AnalyticsView
+                  data={data}
+                  catCounts={catCounts}
+                  donatedAt={activeTownDonatedAt}
                 />
-                <SearchBar
-                  query={query}
-                  setQuery={setQuery}
-                  placeholder={`Search ${catLabel.toLowerCase()}…`}
-                />
-                <div className="space-y-3">
-                  {filtered.map(item => (
-                    <div key={item.id}>
-                      <CollectibleRow
-                        item={item}
-                        category={activeCat!}
-                        checked={!!activeTownDonated[item.id]}
-                        onToggle={() => toggle(item.id)}
-                        onClick={() => {
-                          if (activeCat === 'art') {
-                            setSelected({ item, category: activeCat! });
-                          } else {
-                            setExpandedId(prev =>
-                              prev === item.id ? null : item.id
-                            );
-                          }
-                        }}
-                        expanded={
-                          activeCat !== 'art'
-                            ? expandedId === item.id
-                            : undefined
-                        }
-                        hemisphere={activeTown?.hemisphere ?? 'NH'}
-                      />
-                      {activeCat !== 'art' && expandedId === item.id && (
-                        <ItemExpandPanel
+              ) : activeTab === 'activity' ? (
+                <ActivityFeed donatedAt={activeTownDonatedAt} data={data} />
+              ) : activeTab === 'search' ? (
+                <>
+                  <GlobalSearchBar
+                    query={globalQuery}
+                    setQuery={setGlobalQuery}
+                    onSubmit={pushRecentSearch}
+                    historyOpen={historyOpen}
+                    setHistoryOpen={setHistoryOpen}
+                    recentSearches={recentSearches}
+                    onSelectHistory={s => {
+                      setGlobalQuery(s);
+                      pushRecentSearch(s);
+                    }}
+                    onClearHistory={() => {
+                      setRecentSearches([]);
+                      setHistoryOpen(false);
+                    }}
+                    wrapperRef={historyRef}
+                  />
+                  <GlobalSearchResults
+                    results={globalResults}
+                    query={globalQuery}
+                    donated={activeTownDonated}
+                    onToggle={id => toggle(id)}
+                    onSelect={(item, category) => {
+                      if (globalQuery.trim())
+                        pushRecentSearch(globalQuery.trim());
+                      setSelected({ item, category });
+                    }}
+                  />
+                </>
+              ) : (
+                <>
+                  <CategoryProgress
+                    donated={catCounts[activeCat!]}
+                    total={activeItems.length}
+                    label={catLabel}
+                  />
+                  <SearchBar
+                    query={query}
+                    setQuery={setQuery}
+                    placeholder={`Search ${catLabel.toLowerCase()}…`}
+                  />
+                  <div className="space-y-3">
+                    {filtered.map(item => (
+                      <div key={item.id}>
+                        <CollectibleRow
                           item={item}
                           category={activeCat!}
                           checked={!!activeTownDonated[item.id]}
-                          donatedAt={activeTownDonatedAt[item.id]}
                           onToggle={() => toggle(item.id)}
+                          onClick={() => {
+                            if (activeCat === 'art') {
+                              setSelected({ item, category: activeCat! });
+                            } else {
+                              setExpandedId(prev =>
+                                prev === item.id ? null : item.id
+                              );
+                            }
+                          }}
+                          expanded={
+                            activeCat !== 'art'
+                              ? expandedId === item.id
+                              : undefined
+                          }
+                          hemisphere={activeTown?.hemisphere ?? 'NH'}
                         />
-                      )}
-                    </div>
-                  ))}
-                  {filtered.length === 0 && (
-                    <EmptyState
-                      message={
-                        query
-                          ? `No ${catLabel.toLowerCase()} match "${query}".`
-                          : `No ${catLabel.toLowerCase()} found.`
-                      }
-                    />
-                  )}
-                </div>
-              </>
-            )}
-          </>
-        )}
-
-        <div className="text-center pb-2">
-          <span
-            style={{
-              color: '#9c8a6e',
-              fontSize: '0.7rem',
-              letterSpacing: '0.05em',
-            }}
-          >
-            {import.meta.env.VITE_APP_VERSION}
-          </span>
+                        {activeCat !== 'art' && expandedId === item.id && (
+                          <ItemExpandPanel
+                            item={item}
+                            category={activeCat!}
+                            checked={!!activeTownDonated[item.id]}
+                            donatedAt={activeTownDonatedAt[item.id]}
+                            onToggle={() => toggle(item.id)}
+                          />
+                        )}
+                      </div>
+                    ))}
+                    {filtered.length === 0 && (
+                      <EmptyState
+                        message={
+                          query
+                            ? `No ${catLabel.toLowerCase()} match "${query}".`
+                            : `No ${catLabel.toLowerCase()} found.`
+                        }
+                      />
+                    )}
+                  </div>
+                </>
+              )}
+            </>
+          )}
+
+          <div className="text-center pb-2">
+            <span
+              style={{
+                color: '#9c8a6e',
+                fontSize: '0.7rem',
+                letterSpacing: '0.05em',
+              }}
+            >
+              {import.meta.env.VITE_APP_VERSION}
+            </span>
+          </div>
         </div>
-      </div>
+      </main>
 
       <CreateTownModal
         isOpen={noTowns || showCreateTown}
diff --git a/src/components/MuseumHeader.tsx b/src/components/MuseumHeader.tsx
deleted file mode 100644
index d9b3a50..0000000
--- a/src/components/MuseumHeader.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-import { Download } from 'lucide-react';
-import { TownSwitcher } from './TownSwitcher';
-import type { GameId } from '../lib/types';
-import { GAMES } from '../lib/types';
-import type { Hemisphere } from '../lib/store';
-
-export function MuseumHeader({
-  donatedCount,
-  totalCount,
-  onCreateTown,
-  onEditTown,
-  onExport,
-  gameId,
-  hemisphere,
-  onHemisphereChange,
-}: {
-  donatedCount: number;
-  totalCount: number;
-  onCreateTown: () => void;
-  onEditTown: () => void;
-  onExport: () => void;
-  gameId?: GameId;
-  hemisphere?: Hemisphere;
-  onHemisphereChange?: (h: Hemisphere) => void;
-}) {
-  const pct = totalCount ? Math.round((donatedCount / totalCount) * 100) : 0;
-  return (
-    <div
-      className="rounded-[14px] overflow-hidden border"
-      style={{ borderColor: '#E7DAC4' }}
-    >
-      <div
-        className="px-5 py-4"
-        style={{
-          background: 'linear-gradient(180deg, #7B5E3B 0%, #6e5234 100%)',
-          color: '#F5E9D4',
-        }}
-      >
-        <div className="text-[13px] tracking-wide opacity-90">
-          AC GCN Museum
-        </div>
-        <div className="flex items-end justify-between">
-          <h1
-            className="text-2xl font-semibold"
-            style={{ letterSpacing: '0.2px' }}
-          >
-            Museum Tracker
-          </h1>
-          <div className="flex items-center gap-2">
-            {gameId && GAMES[gameId].hasHemispheres && onHemisphereChange && (
-              <div
-                className="flex rounded-[8px] overflow-hidden"
-                style={{ border: '1px solid rgba(245,233,212,0.3)' }}
-              >
-                {(['NH', 'SH'] as const).map(h => (
-                  <button
-                    key={h}
-                    onClick={() => onHemisphereChange(h)}
-                    aria-pressed={hemisphere === h}
-                    title={
-                      h === 'NH' ? 'Northern Hemisphere' : 'Southern Hemisphere'
-                    }
-                    className="px-2.5 py-1.5 text-[12px] font-medium transition-colors"
-                    style={{
-                      backgroundColor:
-                        hemisphere === h
-                          ? 'rgba(245,233,212,0.3)'
-                          : 'transparent',
-                      color: '#F5E9D4',
-                    }}
-                  >
-                    {h}
-                  </button>
-                ))}
-              </div>
-            )}
-            <button
-              onClick={onExport}
-              title="Export CSV"
-              className="flex items-center gap-1 px-2.5 py-1.5 rounded-[8px] text-[12px] font-medium transition-colors"
-              style={{
-                backgroundColor: 'rgba(245,233,212,0.15)',
-                color: '#F5E9D4',
-                border: '1px solid rgba(245,233,212,0.3)',
-              }}
-              onMouseEnter={e =>
-                (e.currentTarget.style.backgroundColor =
-                  'rgba(245,233,212,0.25)')
-              }
-              onMouseLeave={e =>
-                (e.currentTarget.style.backgroundColor =
-                  'rgba(245,233,212,0.15)')
-              }
-            >
-              <Download className="w-3.5 h-3.5" />
-              <span>Export CSV</span>
-            </button>
-            <TownSwitcher onCreateNew={onCreateTown} onEditTown={onEditTown} />
-          </div>
-        </div>
-      </div>
-      <div className="px-5 py-3" style={{ backgroundColor: '#F5E9D4' }}>
-        <div
-          className="flex items-center justify-between text-sm mb-1.5"
-          style={{ color: '#2A2A2A' }}
-        >
-          <span>Overall progress</span>
-          <span>
-            {donatedCount} / {totalCount} · {pct}% complete
-          </span>
-        </div>
-        <div
-          className="h-2 w-full rounded-full overflow-hidden"
-          style={{ backgroundColor: '#e9dcc3' }}
-        >
-          <div
-            className="h-full transition-all duration-500"
-            style={{ width: `${pct}%`, backgroundColor: '#3CA370' }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..6e305ad
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,233 @@
+import { NavLink, useNavigate } from 'react-router-dom';
+import { useAppStore } from '../lib/store';
+import type { Hemisphere } from '../lib/store';
+import { GAMES } from '../lib/types';
+import type { CategoryId, GameId } from '../lib/types';
+import type { ViewId, AllData } from '../lib/viewTypes';
+
+type Stats = Record<CategoryId, number>;
+
+const CATEGORY_NAV: { id: CategoryId; label: string }[] = [
+  { id: 'fish', label: 'Fish' },
+  { id: 'bugs', label: 'Bugs' },
+  { id: 'fossils', label: 'Fossils' },
+  { id: 'art', label: 'Art' },
+  { id: 'sea_creatures', label: 'Sea' },
+];
+
+const SEA_GAMES = new Set<GameId>(['ACNL', 'ACNH']);
+
+export function Sidebar({
+  townId,
+  data,
+  catCounts,
+  onOpenCreateTown,
+  onOpenEditTown,
+  onExport,
+}: {
+  townId: string;
+  data: AllData;
+  catCounts: Stats;
+  onOpenCreateTown: () => void;
+  onOpenEditTown: () => void;
+  onExport: () => void;
+}) {
+  const navigate = useNavigate();
+  const towns = useAppStore(s => s.towns);
+  const setActiveTown = useAppStore(s => s.setActiveTown);
+  const setTownHemisphere = useAppStore(s => s.setTownHemisphere);
+  const activeTown = towns.find(t => t.id === townId);
+
+  const gameId = activeTown?.gameId ?? 'ACGCN';
+  const game = GAMES[gameId];
+  const showSea = SEA_GAMES.has(gameId) && data.sea_creatures.length > 0;
+
+  function navItemHref(view: ViewId) {
+    return `/town/${townId}/${view}`;
+  }
+
+  function handleSwitchTown() {
+    // Phase 2 stub: cycles to the next town if one exists, otherwise opens
+    // CreateTownModal. Full TownManager drawer ships in Phase 4.
+    const others = towns.filter(t => t.id !== townId);
+    if (others.length === 0) {
+      onOpenCreateTown();
+      return;
+    }
+    if (others.length === 1) {
+      setActiveTown(others[0].id);
+      navigate(`/town/${others[0].id}/home`);
+      return;
+    }
+    // Multiple other towns — surface a quick prompt picker (temporary).
+    const labels = others
+      .map((t, i) => `${i + 1}. ${t.name} (${GAMES[t.gameId].shortName})`)
+      .join('\n');
+    const pick = window.prompt(
+      `Switch to which town?\n${labels}\n\nEnter a number, or cancel.`
+    );
+    if (!pick) return;
+    const idx = Number.parseInt(pick, 10) - 1;
+    const choice = others[idx];
+    if (choice) {
+      setActiveTown(choice.id);
+      navigate(`/town/${choice.id}/home`);
+    }
+  }
+
+  return (
+    <aside className="ac-sidebar">
+      <div className="ac-brand">
+        <div className="ac-brand-mark" aria-hidden="true">
+          <svg viewBox="0 0 32 32" width="22" height="22">
+            <circle
+              cx="16"
+              cy="16"
+              r="14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            />
+            <path
+              d="M10 18 Q16 8 22 18"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+            <circle cx="16" cy="20" r="1.6" fill="currentColor" />
+          </svg>
+        </div>
+        <div className="ac-brand-text">
+          <div className="ac-brand-name">Museum Tracker</div>
+          <div className="ac-brand-sub">a museum companion</div>
+        </div>
+      </div>
+
+      {activeTown && (
+        <div className="ac-town-card">
+          <div className="ac-town-label">Active town</div>
+          <div className="ac-town-name">{activeTown.name}</div>
+          <div className="ac-town-meta">
+            <span>{game.shortName}</span>
+            {game.hasHemispheres && (
+              <>
+                <span className="ac-dot-sep">·</span>
+                <span
+                  className="ac-hem-toggle"
+                  role="group"
+                  aria-label="Hemisphere"
+                >
+                  {(['NH', 'SH'] as const).map(h => (
+                    <button
+                      key={h}
+                      type="button"
+                      className={`ac-hem-btn ${(activeTown.hemisphere ?? 'NH') === h ? 'is-active' : ''}`}
+                      onClick={() =>
+                        setTownHemisphere(activeTown.id, h as Hemisphere)
+                      }
+                      aria-pressed={(activeTown.hemisphere ?? 'NH') === h}
+                    >
+                      {h}
+                    </button>
+                  ))}
+                </span>
+              </>
+            )}
+          </div>
+          <div className="ac-town-actions">
+            <button className="ac-town-switch" onClick={handleSwitchTown}>
+              Switch town ›
+            </button>
+            <button
+              className="ac-town-edit"
+              onClick={onOpenEditTown}
+              title="Edit town"
+              aria-label="Edit town"
+            >
+              Edit
+            </button>
+            <button
+              className="ac-town-edit"
+              onClick={onOpenCreateTown}
+              title="New town"
+              aria-label="New town"
+            >
+              + New
+            </button>
+          </div>
+        </div>
+      )}
+
+      <nav className="ac-nav">
+        <NavLink
+          to={navItemHref('home')}
+          className={({ isActive }) =>
+            `ac-nav-item ${isActive ? 'ac-nav-item-active' : ''}`
+          }
+        >
+          <span>Home</span>
+        </NavLink>
+        {CATEGORY_NAV.map(t => {
+          if (t.id === 'sea_creatures' && !showSea) return null;
+          if (t.id === 'art' && data.art.length === 0) return null;
+          const total = data[t.id].length;
+          const donated = catCounts[t.id];
+          return (
+            <NavLink
+              key={t.id}
+              to={navItemHref(t.id)}
+              className={({ isActive }) =>
+                `ac-nav-item ${isActive ? 'ac-nav-item-active' : ''}`
+              }
+            >
+              <span>{t.label}</span>
+              <span className="ac-nav-count">
+                {donated}
+                <span className="ac-nav-count-slash">/</span>
+                {total}
+              </span>
+            </NavLink>
+          );
+        })}
+        <NavLink
+          to={navItemHref('activity')}
+          className={({ isActive }) =>
+            `ac-nav-item ${isActive ? 'ac-nav-item-active' : ''}`
+          }
+        >
+          <span>Log</span>
+        </NavLink>
+        <NavLink
+          to={navItemHref('search')}
+          className={({ isActive }) =>
+            `ac-nav-item ${isActive ? 'ac-nav-item-active' : ''}`
+          }
+        >
+          <span>Search</span>
+        </NavLink>
+        <NavLink
+          to={navItemHref('analytics')}
+          className={({ isActive }) =>
+            `ac-nav-item ${isActive ? 'ac-nav-item-active' : ''}`
+          }
+        >
+          <span>Stats</span>
+        </NavLink>
+      </nav>
+
+      <div className="ac-sidebar-foot">
+        <button className="ac-foot-link" onClick={onExport}>
+          Export CSV
+        </button>
+        <button
+          className="ac-foot-link"
+          onClick={() => navigate('/settings')}
+          title="Settings (coming in Phase 3)"
+        >
+          Settings
+        </button>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
deleted file mode 100644
index 961b341..0000000
--- a/src/components/TabBar.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import { Home, Clock, Search, BarChart2 } from 'lucide-react';
-import { CATEGORY_META } from '../lib/categoryMeta';
-import { CATEGORY_ORDER } from '../lib/constants';
-import type { CategoryId } from '../lib/types';
-import type { ViewId, AllData } from '../lib/viewTypes';
-
-export function TabBar({
-  active,
-  onChange,
-  catCounts,
-  data,
-}: {
-  active: ViewId;
-  onChange: (c: ViewId) => void;
-  catCounts: Record<CategoryId, number>;
-  data: AllData;
-}) {
-  return (
-    <div
-      className="rounded-[14px] overflow-hidden border"
-      style={{ borderColor: '#E7DAC4', backgroundColor: '#F5E9D4' }}
-    >
-      <div
-        className="flex"
-        style={{ overflowX: 'auto', scrollbarWidth: 'none' }}
-      >
-        <button
-          onClick={() => onChange('home')}
-          className="flex-1 min-w-[52px] flex flex-col items-center gap-0.5 py-2.5 text-[11px] font-medium transition-colors"
-          style={{
-            backgroundColor: active === 'home' ? '#7B5E3B' : 'transparent',
-            color: active === 'home' ? '#F5E9D4' : '#7B5E3B',
-            borderRight: '1px solid #E7DAC4',
-          }}
-        >
-          <Home className="w-4 h-4" />
-          <span>Home</span>
-          <span className="opacity-0" style={{ fontSize: '10px' }}>
-            ·
-          </span>
-        </button>
-        {CATEGORY_ORDER.filter(
-          cat =>
-            (cat !== 'art' || data.art.length > 0) &&
-            (cat !== 'sea_creatures' || data.sea_creatures.length > 0)
-        ).map(cat => {
-          const meta = CATEGORY_META[cat];
-          const tabLabel = cat === 'sea_creatures' ? 'Sea' : meta.label;
-          const { Icon } = meta;
-          const isActive = cat === active;
-          const total = data[cat].length;
-          const donated = catCounts[cat];
-          return (
-            <button
-              key={cat}
-              onClick={() => onChange(cat)}
-              className="flex-1 min-w-[52px] flex flex-col items-center gap-0.5 py-2.5 text-[11px] font-medium transition-colors"
-              style={{
-                backgroundColor: isActive ? '#7B5E3B' : 'transparent',
-                color: isActive ? '#F5E9D4' : '#7B5E3B',
-                borderRight: '1px solid #E7DAC4',
-              }}
-            >
-              <Icon className="w-4 h-4" />
-              <span>{tabLabel}</span>
-              <span className="opacity-70" style={{ fontSize: '10px' }}>
-                {donated}/{total}
-              </span>
-            </button>
-          );
-        })}
-        <button
-          onClick={() => onChange('activity')}
-          className="flex-1 min-w-[52px] flex flex-col items-center gap-0.5 py-2.5 text-[11px] font-medium transition-colors"
-          style={{
-            backgroundColor: active === 'activity' ? '#5a4a35' : 'transparent',
-            color: active === 'activity' ? '#F5E9D4' : '#7B5E3B',
-            borderLeft: '1px solid #E7DAC4',
-          }}
-        >
-          <Clock className="w-4 h-4" />
-          <span>Log</span>
-          <span className="opacity-0" style={{ fontSize: '10px' }}>
-            ·
-          </span>
-        </button>
-        <button
-          onClick={() => onChange('search')}
-          className="flex-1 min-w-[52px] flex flex-col items-center gap-0.5 py-2.5 text-[11px] font-medium transition-colors"
-          style={{
-            backgroundColor: active === 'search' ? '#3CA370' : 'transparent',
-            color: active === 'search' ? '#fff' : '#7B5E3B',
-            borderLeft: '1px solid #E7DAC4',
-          }}
-        >
-          <Search className="w-4 h-4" />
-          <span>Search</span>
-          <span className="opacity-0" style={{ fontSize: '10px' }}>
-            ·
-          </span>
-        </button>
-        <button
-          onClick={() => onChange('analytics')}
-          className="flex-1 min-w-[52px] flex flex-col items-center gap-0.5 py-2.5 text-[11px] font-medium transition-colors"
-          style={{
-            backgroundColor: active === 'analytics' ? '#2A7A52' : 'transparent',
-            color: active === 'analytics' ? '#F5E9D4' : '#7B5E3B',
-            borderLeft: '1px solid #E7DAC4',
-          }}
-        >
-          <BarChart2 className="w-4 h-4" />
-          <span>Stats</span>
-          <span className="opacity-0" style={{ fontSize: '10px' }}>
-            ·
-          </span>
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/TownSwitcher.tsx b/src/components/TownSwitcher.tsx
deleted file mode 100644
index efd381a..0000000
--- a/src/components/TownSwitcher.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { ChevronDown, Plus, Pencil } from 'lucide-react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useAppStore } from '../lib/store';
-
-// Museum category tabs where the edit/new-town modals can't render (ACCanvas
-// is not yet in the layout tree on these routes). Greyed out as a v0.8.1
-// stopgap; proper fix deferred to the v0.9 UI revamp.
-const MODAL_BLOCKED_TABS = new Set(['fish', 'bugs', 'fossils']);
-const BLOCKED_TOOLTIP =
-  'Switch to Home, Search, or Recent Donations to edit your town';
-
-export function TownSwitcher({
-  onCreateNew,
-  onEditTown,
-}: {
-  onCreateNew: () => void;
-  onEditTown: () => void;
-}) {
-  const towns = useAppStore(s => s.towns);
-  const activeTownId = useAppStore(s => s.activeTownId);
-  const navigate = useNavigate();
-  const { tab } = useParams<{ tab?: string }>();
-  const modalBlocked = MODAL_BLOCKED_TABS.has(tab ?? '');
-  const [open, setOpen] = useState(false);
-  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 });
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  // Close the dropdown whenever the active town changes so stale-open state
-  // can't persist across town switches (fixes duplicate-entry visual bug).
-  useEffect(() => {
-    setOpen(false);
-  }, [activeTownId]);
-
-  const activeTown = towns.find(t => t.id === activeTownId);
-
-  // If activeTown can't be resolved (e.g. during a state transition), still
-  // render the + button so the user can always create a new town.
-  if (!activeTown) {
-    return (
-      <div className="flex items-center gap-2">
-        <button
-          onClick={onCreateNew}
-          className="flex items-center justify-center rounded-[10px] p-1.5 transition"
-          style={{ backgroundColor: '#EDE3D0', border: '1px solid #E7DAC4' }}
-          aria-label="Add town"
-        >
-          <Plus className="w-3.5 h-3.5" style={{ color: '#5a4a35' }} />
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="relative">
-        <div className="flex items-center gap-2 relative z-20">
-          {towns.length > 1 ? (
-            <button
-              ref={triggerRef}
-              onClick={() => {
-                if (!open && triggerRef.current) {
-                  const r = triggerRef.current.getBoundingClientRect();
-                  setDropdownPos({ top: r.bottom + 6, left: r.left });
-                }
-                setOpen(o => !o);
-              }}
-              className="flex items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-sm font-medium transition"
-              style={{
-                backgroundColor: '#EDE3D0',
-                color: '#2A2A2A',
-                border: '1px solid #E7DAC4',
-              }}
-            >
-              {activeTown.name}
-              <ChevronDown className="w-3.5 h-3.5 opacity-60" />
-            </button>
-          ) : (
-            <span
-              className="text-sm font-medium px-1"
-              style={{ color: '#2A2A2A' }}
-            >
-              {activeTown.name}
-            </span>
-          )}
-
-          <button
-            onClick={modalBlocked ? undefined : onEditTown}
-            disabled={modalBlocked}
-            aria-disabled={modalBlocked}
-            title={modalBlocked ? BLOCKED_TOOLTIP : 'Edit town'}
-            aria-label="Edit town"
-            className="flex items-center justify-center rounded-[10px] p-1.5 transition"
-            style={{
-              backgroundColor: '#EDE3D0',
-              border: '1px solid #E7DAC4',
-              opacity: modalBlocked ? 0.4 : 1,
-              cursor: modalBlocked ? 'not-allowed' : 'pointer',
-            }}
-          >
-            <Pencil className="w-3.5 h-3.5" style={{ color: '#5a4a35' }} />
-          </button>
-
-          <button
-            onClick={modalBlocked ? undefined : onCreateNew}
-            disabled={modalBlocked}
-            aria-disabled={modalBlocked}
-            title={modalBlocked ? BLOCKED_TOOLTIP : 'Add town'}
-            aria-label="Add town"
-            className="flex items-center justify-center rounded-[10px] p-1.5 transition"
-            style={{
-              backgroundColor: '#EDE3D0',
-              border: '1px solid #E7DAC4',
-              opacity: modalBlocked ? 0.4 : 1,
-              cursor: modalBlocked ? 'not-allowed' : 'pointer',
-            }}
-          >
-            <Plus className="w-3.5 h-3.5" style={{ color: '#5a4a35' }} />
-          </button>
-        </div>
-
-        {open && towns.length > 1 && (
-          <>
-            <div
-              className="fixed inset-0 z-40"
-              onClick={() => setOpen(false)}
-            />
-            <div
-              className="fixed z-50 rounded-[12px] overflow-hidden shadow-lg"
-              style={{
-                backgroundColor: '#FDF9F1',
-                border: '1px solid #E7DAC4',
-                minWidth: '160px',
-                top: dropdownPos.top,
-                left: dropdownPos.left,
-              }}
-            >
-              {towns
-                .filter(t => t.id !== activeTownId)
-                .map((town, i) => (
-                  <button
-                    key={town.id}
-                    onClick={() => {
-                      navigate(`/town/${town.id}/home`);
-                      setOpen(false);
-                    }}
-                    className="w-full text-left px-4 py-2.5 text-sm transition"
-                    style={{
-                      backgroundColor: 'transparent',
-                      color: '#2A2A2A',
-                      borderTop: i > 0 ? '1px solid #E7DAC4' : 'none',
-                      fontWeight: '400',
-                    }}
-                  >
-                    <div>{town.name}</div>
-                    <div className="text-[11px] opacity-60">
-                      {town.playerName}
-                    </div>
-                  </button>
-                ))}
-            </div>
-          </>
-        )}
-      </div>
-    </>
-  );
-}
diff --git a/src/index.css b/src/index.css
index bfc28a1..91d2950 100644
--- a/src/index.css
+++ b/src/index.css
@@ -52,3 +52,184 @@
 * {
   font-family: 'Inter', system-ui, sans-serif;
 }
+
+/* ── App shell (v0.9 Phase 2) ── */
+.ac-app {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  min-height: 100vh;
+  max-width: 1440px;
+  margin: 0 auto;
+  background: var(--bg);
+  color: var(--ink);
+}
+
+.ac-sidebar {
+  border-right: 1px solid var(--border);
+  padding: 28px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  background: var(--bg);
+}
+.ac-brand { display: flex; gap: 12px; align-items: center; color: var(--accent); }
+.ac-brand-mark {
+  width: 38px; height: 38px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  display: grid; place-items: center;
+}
+.ac-brand-name {
+  font-family: var(--font-display, 'Fraunces', Georgia, serif);
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--ink);
+  letter-spacing: -0.02em;
+}
+.ac-brand-sub {
+  font-size: 11px;
+  color: var(--ink-muted);
+  font-style: italic;
+  font-family: var(--font-display, 'Fraunces', Georgia, serif);
+}
+
+.ac-town-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px 16px;
+}
+.ac-town-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-muted);
+}
+.ac-town-name {
+  font-family: var(--font-display, 'Fraunces', Georgia, serif);
+  font-size: 22px;
+  font-weight: 500;
+  margin-top: 2px;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+}
+.ac-town-meta {
+  font-size: 12px;
+  color: var(--ink-soft);
+  margin-top: 2px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.ac-dot-sep { color: var(--border-strong); }
+.ac-hem-toggle { display: inline-flex; gap: 2px; }
+.ac-hem-btn {
+  font-size: 11px;
+  color: var(--ink-muted);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1px 6px;
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+}
+.ac-hem-btn.is-active {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  border-color: var(--accent);
+}
+.ac-town-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.ac-town-switch {
+  font-size: 12px;
+  color: var(--accent-ink);
+  padding: 0;
+  text-align: left;
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.ac-town-switch:hover { text-decoration: underline; }
+.ac-town-edit {
+  font-size: 11px;
+  color: var(--ink-muted);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.ac-town-edit:hover { color: var(--ink); text-decoration: underline; }
+
+.ac-nav { display: flex; flex-direction: column; gap: 1px; }
+.ac-nav-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 10px 14px;
+  border-radius: 9px;
+  font-size: 14px;
+  color: var(--ink-soft);
+  text-align: left;
+  transition: background 0.12s, color 0.12s;
+  text-decoration: none;
+  min-height: 44px;
+  box-sizing: border-box;
+}
+.ac-nav-item:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-nav-item-active {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 500;
+}
+.ac-nav-count {
+  font-size: 11px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ac-nav-count-slash { opacity: 0.5; margin: 0 1px; }
+.ac-nav-item-active .ac-nav-count { color: var(--accent-ink); }
+
+.ac-sidebar-foot {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.ac-foot-link {
+  padding: 6px 14px;
+  font-size: 12px;
+  color: var(--ink-muted);
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.ac-foot-link:hover { color: var(--ink); }
+
+.ac-main {
+  padding: 32px 48px 80px;
+  min-width: 0;
+}
+
+@media (max-width: 980px) {
+  .ac-app { grid-template-columns: 1fr; }
+  .ac-sidebar {
+    position: static;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .ac-main { padding: 24px 20px 60px; }
+}

From 8aa1ba0898762cf45d4f9f0f2428ac191a8c679d Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 18:29:22 -0400
Subject: [PATCH 05/28] chore: bump version to v0.9.0-beta + doc sweep
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- package.json version → 0.9.0-beta (footer/UI version flows from here via vite define)
- README.md: clarify v0.8.2-alpha is last stable, v0.9.0-beta in active dev
- CLAUDE.md: update current-version line to reflect Phase 2 shipped
- docs/v0.9-plan.md: mark Phase 1 (PR #63) and Phase 2 (PR #65) as shipped
- README sea-creatures note updated (TabBar → sidebar nav)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md         | 2 +-
 README.md         | 4 ++--
 docs/v0.9-plan.md | 4 ++--
 package.json      | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 0e86787..bcf3d62 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,7 +16,7 @@ See `docs/architecture.md` — deep architectural context (store schema, migrati
 ## Project Overview
 
 Animal Crossing multi-game companion web app. Tracks museum donations (fish, bugs, fossils, art) across multiple towns and games.
-Cozy parchment/GameCube museum aesthetic. **Current version: v0.8.2-alpha shipped 2026-05-01; v0.9 in progress**
+Cozy parchment/GameCube museum aesthetic. **Last stable: v0.8.2-alpha (shipped 2026-05-01). Active development: v0.9.0-beta — Phase 2 (sidebar shell) shipped; see `docs/v0.9-plan.md` for canonical plan.**
 Live at: https://animalcrossingwebapp.vercel.app | Dev preview: https://development-animalcrossingwebapp.vercel.app
 
 ## Commands
diff --git a/README.md b/README.md
index 1bb3eb2..d404567 100644
--- a/README.md
+++ b/README.md
@@ -59,12 +59,12 @@ Museum data lives in `public/data/<game>/`:
 - `public/data/acnl/` — New Leaf: fish, bugs, fossils
 - `public/data/acnh/` — New Horizons: 81 fish, 80 bugs, 86 fossils, 43 art, 40 sea creatures (NH/SH month availability)
 
-> Sea creatures are fully supported for New Horizons and New Leaf — a dedicated Sea tab appears in the TabBar for those games (shipped in v0.8.2).
+> Sea creatures are fully supported for New Horizons and New Leaf — a dedicated Sea entry appears in the sidebar nav for those games (shipped in v0.8.2).
 
 ---
 
 ## Version
 
-Current release: **v0.8.2-alpha** — see [CHANGELOG.md](CHANGELOG.md) for history.
+Current release: **v0.8.2-alpha** (last stable). Active development: **v0.9.0-beta** — see [CHANGELOG.md](CHANGELOG.md) for history and [docs/v0.9-plan.md](docs/v0.9-plan.md) for the in-progress plan.
 
 Significant design decisions are logged in [docs/decisions.md](docs/decisions.md).
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 5b95aa5..7949e77 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -293,7 +293,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 1 — Tokens + Fonts
+### Phase 1 — Tokens + Fonts ✅ shipped (PR #63)
 
 **Branch:** `feature/v09-phase-1-tokens`  
 **Goal:** Pre-work only. No visible UI changes.
@@ -311,7 +311,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 2 — Sidebar + Shell Layout
+### Phase 2 — Sidebar + Shell Layout ✅ shipped (PR #65)
 
 **Branch:** `feature/v09-phase-2-sidebar`  
 **Goal:** Replace `MuseumHeader` + `TabBar` + `TownSwitcher` with a 280px left sidebar. React Router routes and URL structure are fully preserved.
diff --git a/package.json b/package.json
index 1b55eae..c4b6a5b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animalcrossingwebapp",
-  "version": "0.8.2-alpha",
+  "version": "0.9.0-beta",
   "description": "Web companion app for tracking museum donations across all five Animal Crossing main-line games (GCN, WW, CF, NL, NH). Live at https://animalcrossingwebapp.vercel.app/",
   "type": "module",
   "main": "index.js",

From 59b9b86d70b712014fe0b92bdf13f53868531995 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 18:37:36 -0400
Subject: [PATCH 06/28] feat(v0.9 phase 3): SettingsPage + reset actions at
 /settings

About + Danger zone sections per locked decisions #3 and #7.
No Appearance section (Meadow-only per #2).

- SettingsPage: About (version, source, live storage summary, credits)
  and Danger zone (reset donations, reset everything) with native confirm()
  guards. Esc and close button navigate back to active town home.
- SettingsRoute wrapper renders Sidebar + SettingsPage so the sidebar
  stays in place at /settings.
- Store: resetActiveTownDonations() + resetAll() (also clears
  ac-curator-search-history from localStorage).
- /settings route added in App.tsx; Sidebar Settings button no longer
  carries the Phase 2 "coming soon" tooltip.
- Styles in index.css mirror docs/design-handoffs/v0.9.2_curator/
  addons-styles.css with the Curator-codename strings dropped.

Build, lint, and 59 unit tests pass.
---
 CHANGELOG.md                     |  13 +++
 CLAUDE.md                        |   2 +
 src/App.tsx                      |   2 +
 src/components/SettingsPage.tsx  | 173 +++++++++++++++++++++++++++++++
 src/components/SettingsRoute.tsx |  78 ++++++++++++++
 src/components/Sidebar.tsx       |   2 +-
 src/index.css                    | 169 ++++++++++++++++++++++++++++++
 src/lib/store.ts                 |  27 +++++
 8 files changed, 465 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SettingsPage.tsx
 create mode 100644 src/components/SettingsRoute.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbec2f4..b7fb3a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,19 @@ All notable changes to this project are documented here.
 - Hemisphere toggle relocated to the sidebar town card to avoid regressing the v0.8 functionality that lived in `MuseumHeader`. Phase 4 moves it into `TownManager`.
 - Brand wordmark uses **"Museum Tracker"** (matching the prior MuseumHeader) — not "Curator", per the codename note in `docs/v0.9-plan.md` (no user-facing copy says "Curator").
 
+### Added — Phase 3: settings page
+- **`SettingsPage` component** (`src/components/SettingsPage.tsx`) — full-page settings route with two sections: **About** (version, source link, live storage summary, credits) and **Danger zone** (reset donations for active town, reset everything). No Appearance section per locked decision #3.
+- **`SettingsRoute` wrapper** (`src/components/SettingsRoute.tsx`) — renders the Sidebar + SettingsPage in the same shell layout as `ACCanvas`, so the sidebar (active town, nav, footer) stays in place when at `/settings`.
+- **`/settings` route** added to `App.tsx`. Sidebar Settings link now navigates to it; Esc and the close button navigate back to `/town/:id/home` (or `/` if there's no active town).
+- **Store reset actions** in `src/lib/store.ts`: `resetActiveTownDonations()` clears `donated` and `donatedAt` for the active town only; `resetAll()` empties towns + donations + clears `ac-curator-search-history` from localStorage. Both are gated behind native `confirm()` per locked decision #7.
+- **Settings page styles** in `src/index.css` (`.ac-settings`, `.ac-settings-head`, `.ac-settings-eyebrow`, `.ac-settings-title`, `.ac-settings-close`, `.ac-settings-section`, `.ac-settings-card`, `.ac-about-list`, `.ac-settings-danger`, `.ac-danger-row`, `.ac-danger-btn`, `.ac-danger-btn-strong`, `ac-fade-up` keyframe). Responsive collapse at ≤700px (title 56→40px, About list single-column, Danger rows stack with full-width buttons).
+
+### Decisions — Phase 3
+- **No Appearance section** — locked decision #3. Meadow is the only theme in v0.9, so a one-card theme switcher would feel hollow. Brought back when there are real alternatives.
+- **Eyebrow text on Settings header** is "Museum Tracker" rather than "Curator" — matches the brand-wordmark decision from Phase 2 (the codename note in `docs/v0.9-plan.md`).
+- **Reset donations is disabled** when there's no active town, instead of being hidden — keeps the Danger zone shape stable across states.
+- **Settings is a top-level route** (`/settings`) rather than nested under `/town/:townId/settings`. The settings page is a property of the app, not the town — and a user mid-reset-everything wouldn't have an active town to nest under.
+
 ## [v0.8.2-alpha] — 2026-05-01
 
 ### Added
diff --git a/CLAUDE.md b/CLAUDE.md
index bcf3d62..5f3cadb 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -56,6 +56,8 @@ src/
     CollectibleRow.tsx      # Single item row with donate toggle; shows chevron + rounded-top when expanded
     ItemExpandPanel.tsx     # Inline accordion panel shown below CollectibleRow for fish/bugs/fossils
     Sidebar.tsx             # v0.9 Phase 2: 280px left sidebar — brand, active town card, NavLink nav with counts, footer (replaces MuseumHeader/TabBar/TownSwitcher)
+    SettingsPage.tsx        # v0.9 Phase 3: full-page Settings — About + Danger zone (no Appearance per locked decision #3)
+    SettingsRoute.tsx       # v0.9 Phase 3: route wrapper that mounts Sidebar + SettingsPage at /settings
     ErrorBanner.tsx         # Dismissible inline error notification
     ErrorBoundary.tsx       # Top-level React error boundary; crashes render ErrorState
     ErrorState.tsx          # Full-page error fallback UI
diff --git a/src/App.tsx b/src/App.tsx
index 0c1bc26..acbf64e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { Analytics } from '@vercel/analytics/react';
 import ACCanvas from './components/ACCanvas';
+import SettingsRoute from './components/SettingsRoute';
 import { useHydration } from './hooks/useHydration';
 import ErrorBoundary from './components/ErrorBoundary';
 import { useAppStore } from './lib/store';
@@ -48,6 +49,7 @@ function App() {
     <ErrorBoundary>
       <Routes>
         <Route path="/" element={<RootRedirect />} />
+        <Route path="/settings" element={<SettingsRoute />} />
         <Route path="/town/:townId" element={<ACCanvas />} />
         <Route path="/town/:townId/:tab" element={<ACCanvas />} />
         <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx
new file mode 100644
index 0000000..ddf4d2b
--- /dev/null
+++ b/src/components/SettingsPage.tsx
@@ -0,0 +1,173 @@
+import { useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppStore } from '../lib/store';
+
+export function SettingsPage() {
+  const navigate = useNavigate();
+  const towns = useAppStore(s => s.towns);
+  const donated = useAppStore(s => s.donated);
+  const activeTownId = useAppStore(s => s.activeTownId);
+  const resetActiveTownDonations = useAppStore(s => s.resetActiveTownDonations);
+  const resetAll = useAppStore(s => s.resetAll);
+
+  const totalDonations = useMemo(() => {
+    let n = 0;
+    for (const byGame of Object.values(donated)) {
+      for (const byItem of Object.values(byGame)) {
+        n += Object.keys(byItem).length;
+      }
+    }
+    return n;
+  }, [donated]);
+
+  const townCount = towns.length;
+  const version = import.meta.env.VITE_APP_VERSION ?? '0.9.0-beta';
+
+  function handleClose() {
+    if (activeTownId) {
+      navigate(`/town/${activeTownId}/home`);
+    } else {
+      navigate('/');
+    }
+  }
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') handleClose();
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeTownId]);
+
+  function handleResetDonations() {
+    if (!activeTownId) return;
+    const town = towns.find(t => t.id === activeTownId);
+    const name = town?.name ?? 'this town';
+    if (
+      window.confirm(
+        `Reset all donations for "${name}"? This cannot be undone.`
+      )
+    ) {
+      resetActiveTownDonations();
+    }
+  }
+
+  function handleResetAll() {
+    if (
+      window.confirm(
+        'Reset everything? This deletes all towns, donations, and search history. This cannot be undone.'
+      )
+    ) {
+      resetAll();
+      navigate('/');
+    }
+  }
+
+  const canResetActive = !!activeTownId;
+
+  return (
+    <div className="ac-settings">
+      <header className="ac-settings-head">
+        <div>
+          <div className="ac-settings-eyebrow">Museum Tracker</div>
+          <h1 className="ac-settings-title">
+            <em>Settings</em>
+          </h1>
+        </div>
+        <button
+          className="ac-settings-close"
+          onClick={handleClose}
+          aria-label="Close settings"
+        >
+          ✕
+        </button>
+      </header>
+
+      <section className="ac-settings-section">
+        <div className="ac-settings-section-head">
+          <h2 className="ac-settings-section-title">About</h2>
+        </div>
+        <div className="ac-settings-card">
+          <dl className="ac-about-list">
+            <div>
+              <dt>Version</dt>
+              <dd>v{version}</dd>
+            </div>
+            <div>
+              <dt>Source</dt>
+              <dd>
+                <a
+                  href="https://github.com/jacuzzicoding/animalcrossingwebapp"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  jacuzzicoding/animalcrossingwebapp
+                </a>
+              </dd>
+            </div>
+            <div>
+              <dt>Storage</dt>
+              <dd>
+                localStorage · {townCount} {townCount === 1 ? 'town' : 'towns'}{' '}
+                · {totalDonations}{' '}
+                {totalDonations === 1 ? 'donation' : 'donations'}
+              </dd>
+            </div>
+            <div>
+              <dt>Credits</dt>
+              <dd>
+                Companion app for the Animal Crossing series. Not affiliated
+                with Nintendo.
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </section>
+
+      <section className="ac-settings-section">
+        <div className="ac-settings-section-head">
+          <h2 className="ac-settings-section-title">Danger zone</h2>
+          <p className="ac-settings-section-sub">
+            These actions cannot be undone.
+          </p>
+        </div>
+        <div className="ac-settings-card ac-settings-danger">
+          <div className="ac-danger-row">
+            <div>
+              <div className="ac-danger-name">
+                Reset donations for active town
+              </div>
+              <div className="ac-danger-sub">
+                Clears all donation marks. Towns themselves are kept.
+              </div>
+            </div>
+            <button
+              className="ac-danger-btn"
+              onClick={handleResetDonations}
+              disabled={!canResetActive}
+            >
+              Reset donations
+            </button>
+          </div>
+          <div className="ac-danger-row">
+            <div>
+              <div className="ac-danger-name">Reset everything</div>
+              <div className="ac-danger-sub">
+                Deletes all towns, donations, and search history.
+              </div>
+            </div>
+            <button
+              className="ac-danger-btn ac-danger-btn-strong"
+              onClick={handleResetAll}
+            >
+              Reset all data
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default SettingsPage;
diff --git a/src/components/SettingsRoute.tsx b/src/components/SettingsRoute.tsx
new file mode 100644
index 0000000..4e9c56a
--- /dev/null
+++ b/src/components/SettingsRoute.tsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { useAppStore } from '../lib/store';
+import { Sidebar } from './Sidebar';
+import { SettingsPage } from './SettingsPage';
+import { CreateTownModal } from './modals/CreateTownModal';
+import { EditTownModal } from './modals/EditTownModal';
+import { useMuseumData } from '../hooks/useMuseumData';
+import { useCategoryStats } from '../hooks/useCategoryStats';
+import { downloadCSV } from '../lib/csvExport';
+
+// Stable empty fallbacks
+const EMPTY_DONATED: Record<string, boolean> = {};
+const EMPTY_DONATED_AT: Record<string, string> = {};
+
+export default function SettingsRoute() {
+  const towns = useAppStore(s => s.towns);
+  const activeTownId = useAppStore(s => s.activeTownId);
+  const activeTown = towns.find(t => t.id === activeTownId);
+
+  const activeTownDonated = useAppStore(s => {
+    if (!s.activeTownId) return EMPTY_DONATED;
+    const town = s.towns.find(t => t.id === s.activeTownId);
+    if (!town) return EMPTY_DONATED;
+    return s.donated[s.activeTownId]?.[town.gameId] ?? EMPTY_DONATED;
+  });
+  const activeTownDonatedAt = useAppStore(s => {
+    if (!s.activeTownId) return EMPTY_DONATED_AT;
+    const town = s.towns.find(t => t.id === s.activeTownId);
+    if (!town) return EMPTY_DONATED_AT;
+    return s.donatedAt[s.activeTownId]?.[town.gameId] ?? EMPTY_DONATED_AT;
+  });
+
+  const [showCreateTown, setShowCreateTown] = useState(false);
+  const [showEditTown, setShowEditTown] = useState(false);
+
+  const { data } = useMuseumData(activeTown?.gameId ?? 'ACGCN');
+  const catCounts = useCategoryStats(data, activeTownDonated);
+
+  function handleExport() {
+    if (!activeTown) return;
+    downloadCSV(
+      data,
+      activeTownDonated,
+      activeTownDonatedAt,
+      activeTown.name,
+      activeTown.playerName
+    );
+  }
+
+  return (
+    <div className="ac-app">
+      {activeTownId && (
+        <Sidebar
+          townId={activeTownId}
+          data={data}
+          catCounts={catCounts}
+          onOpenCreateTown={() => setShowCreateTown(true)}
+          onOpenEditTown={() => setShowEditTown(true)}
+          onExport={handleExport}
+        />
+      )}
+      <main className="ac-main">
+        <SettingsPage />
+      </main>
+
+      <CreateTownModal
+        isOpen={showCreateTown}
+        required={false}
+        onClose={() => setShowCreateTown(false)}
+      />
+      <EditTownModal
+        isOpen={showEditTown}
+        town={activeTown ?? null}
+        onClose={() => setShowEditTown(false)}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6e305ad..6de35b0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -223,7 +223,7 @@ export function Sidebar({
         <button
           className="ac-foot-link"
           onClick={() => navigate('/settings')}
-          title="Settings (coming in Phase 3)"
+          title="Settings"
         >
           Settings
         </button>
diff --git a/src/index.css b/src/index.css
index 91d2950..fde4fab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -233,3 +233,172 @@
   }
   .ac-main { padding: 24px 20px 60px; }
 }
+
+/* ── Settings page ── */
+.ac-settings {
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 8px 0 80px;
+  animation: ac-fade-up 0.28s ease;
+}
+@keyframes ac-fade-up {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.ac-settings-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: 28px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 36px;
+}
+.ac-settings-eyebrow {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--ink-muted);
+  margin-bottom: 8px;
+}
+.ac-settings-title {
+  font-family: var(--font-display, 'Fraunces', Georgia, serif);
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  margin: 0;
+  color: var(--ink);
+}
+.ac-settings-title em {
+  font-style: italic;
+  color: var(--accent-ink);
+  font-variation-settings: 'opsz' 36;
+}
+.ac-settings-close {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--ink-soft);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.ac-settings-close:hover {
+  background: var(--surface-alt);
+  color: var(--ink);
+  border-color: var(--border-strong);
+}
+
+.ac-settings-section { margin-bottom: 44px; }
+.ac-settings-section-head { margin-bottom: 18px; }
+.ac-settings-section-title {
+  font-family: var(--font-display, 'Fraunces', Georgia, serif);
+  font-size: 22px;
+  font-weight: 500;
+  margin: 0;
+  color: var(--ink);
+  letter-spacing: -0.01em;
+}
+.ac-settings-section-sub {
+  font-size: 13px;
+  color: var(--ink-muted);
+  margin: 4px 0 0;
+}
+
+.ac-settings-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 18px 22px;
+}
+.ac-about-list {
+  display: grid;
+  gap: 14px;
+  margin: 0;
+}
+.ac-about-list > div {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 18px;
+  font-size: 14px;
+  align-items: baseline;
+}
+.ac-about-list dt {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--ink-muted);
+  margin: 0;
+}
+.ac-about-list dd { margin: 0; color: var(--ink); }
+.ac-about-list a {
+  color: var(--accent-ink);
+  text-decoration: underline;
+  text-decoration-color: var(--accent-soft, var(--border-strong));
+  text-underline-offset: 3px;
+}
+
+.ac-settings-danger {
+  border-color: oklch(0.62 0.12 25 / 0.35);
+  background: color-mix(in oklch, oklch(0.62 0.12 25) 4%, var(--surface));
+}
+.ac-danger-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  padding: 10px 0;
+}
+.ac-danger-row + .ac-danger-row {
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
+  margin-top: 6px;
+}
+.ac-danger-name {
+  font-weight: 500;
+  color: var(--ink);
+  font-size: 14px;
+}
+.ac-danger-sub {
+  font-size: 12px;
+  color: var(--ink-muted);
+  margin-top: 2px;
+}
+.ac-danger-btn {
+  background: var(--surface);
+  border: 1px solid oklch(0.62 0.12 25 / 0.4);
+  color: oklch(0.5 0.14 25);
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  flex: none;
+  min-height: 44px;
+  transition: all 0.15s;
+}
+.ac-danger-btn:hover:not(:disabled) {
+  background: oklch(0.62 0.12 25 / 0.08);
+  border-color: oklch(0.62 0.12 25 / 0.6);
+}
+.ac-danger-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.ac-danger-btn-strong {
+  background: oklch(0.5 0.14 25);
+  color: white;
+  border-color: transparent;
+}
+.ac-danger-btn-strong:hover { background: oklch(0.45 0.16 25); }
+
+@media (max-width: 700px) {
+  .ac-settings-title { font-size: 40px; }
+  .ac-about-list > div { grid-template-columns: 1fr; gap: 2px; }
+  .ac-danger-row { flex-direction: column; align-items: stretch; }
+  .ac-danger-btn { width: 100%; }
+}
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 46a4703..69cb45a 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -31,6 +31,8 @@ interface AppState {
   isDonated: (itemId: string) => boolean;
   getDonatedAt: (itemId: string) => string | undefined;
   getActiveTown: () => Town | undefined;
+  resetActiveTownDonations: () => void;
+  resetAll: () => void;
 }
 
 function generateId(): string {
@@ -143,6 +145,31 @@ export const useAppStore = create<AppState>()(
         const { towns, activeTownId } = get();
         return towns.find(t => t.id === activeTownId);
       },
+
+      resetActiveTownDonations: () =>
+        set(state => {
+          const { activeTownId } = state;
+          if (!activeTownId) return state;
+          const donated = { ...state.donated };
+          const donatedAt = { ...state.donatedAt };
+          delete donated[activeTownId];
+          delete donatedAt[activeTownId];
+          return { donated, donatedAt };
+        }),
+
+      resetAll: () => {
+        try {
+          localStorage.removeItem('ac-curator-search-history');
+        } catch {
+          // ignore — localStorage may be unavailable (SSR / privacy mode)
+        }
+        set({
+          towns: [],
+          activeTownId: null,
+          donated: {},
+          donatedAt: {},
+        });
+      },
     }),
     {
       name: 'ac-web',

From a8f7adcd707b3efc00abeff06d6a59007f0c61af Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 18:55:57 -0400
Subject: [PATCH 07/28] feat(v0.9 phase 4): TownManager drawer + retire modal
 CRUD

Replaces CreateTownModal, EditTownModal, and the Phase 2 sidebar
bridge stubs (window.prompt switcher, Edit/+New buttons, hemisphere
toggle) with a single right-side TownManager drawer mounted at the
App layout level. Drawer is a bottom sheet at <=720px.

Honors locked Decision 1: the inline edit form has no game <select>;
gameId is shown as a read-only badge and never appears in the patch
object passed to updateTown. Honors Decision 5 by removing playerName
from the Town type, store, CSV export, and tests.

Auto-opens in forceCreate mode when towns.length === 0, replacing
the previous CreateTownModal required={noTowns} pattern. Resolves
the v0.8.1 greyed-out-buttons stopgap because the drawer now mounts
above the router and is unaffected by overflow/z-index on category
tabs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                              |  26 ++
 CLAUDE.md                                 |   7 +-
 src/App.tsx                               |  14 +
 src/components/ACCanvas.tsx               |  26 +-
 src/components/SettingsRoute.tsx          |  27 +-
 src/components/Sidebar.tsx                |  77 +---
 src/components/TownManager.tsx            | 410 ++++++++++++++++++++++
 src/components/modals/CreateTownModal.tsx | 112 ------
 src/components/modals/EditTownModal.tsx   |  87 -----
 src/components/shared/TownNameFields.tsx  |  61 ----
 src/index.css                             | 197 +++++++++++
 src/lib/csvExport.ts                      |   9 +-
 src/lib/store.test.ts                     |  46 +--
 src/lib/store.ts                          |  29 +-
 src/lib/types.ts                          |   9 +
 src/lib/uiStore.ts                        |  18 +
 16 files changed, 730 insertions(+), 425 deletions(-)
 create mode 100644 src/components/TownManager.tsx
 delete mode 100644 src/components/modals/CreateTownModal.tsx
 delete mode 100644 src/components/modals/EditTownModal.tsx
 delete mode 100644 src/components/shared/TownNameFields.tsx
 create mode 100644 src/lib/uiStore.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b7fb3a1..0284776 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,32 @@ All notable changes to this project are documented here.
 - **Reset donations is disabled** when there's no active town, instead of being hidden — keeps the Danger zone shape stable across states.
 - **Settings is a top-level route** (`/settings`) rather than nested under `/town/:townId/settings`. The settings page is a property of the app, not the town — and a user mid-reset-everything wouldn't have an active town to nest under.
 
+### Added — Phase 4: TownManager drawer
+- **`TownManager` component** (`src/components/TownManager.tsx`) — right-side drawer (420px) that mounts at the layout level in `App.tsx`, so it overlays every route (home, category tabs, settings) without z-index or `overflow-hidden` issues. Below 720px it renders as a bottom sheet. Contains: the list of towns with active-town indicator, inline row edit (name + hemisphere only), a `+ New town` form (name + game + hemisphere), and per-row delete with native `confirm()` guard.
+- **`useUIStore`** (`src/lib/uiStore.ts`) — small non-persisted Zustand store for transient UI state (`townManagerOpen`, `townManagerForceCreate`). Exposes `openTownManager(forceCreate?)` and `closeTownManager()`.
+- **Auto-open in create mode when no towns exist** — `App.tsx` opens the TownManager forced-create when `towns.length === 0`. The drawer hides its close button, ignores Esc, and ignores scrim clicks in this state — equivalent to the previous "required" behavior on `CreateTownModal`.
+- **`GAME_LIST`** export in `src/lib/types.ts` — ordered array of `Game`, used by the create-town form's game selector.
+- **TownManager styles** in `src/index.css` (`.ac-tm-scrim`, `.ac-tm-drawer`, `.ac-tm-row*`, `.ac-tm-form`, `.ac-tm-seg`, `.ac-tm-cta`, `.ac-tm-newform`, `.ac-tm-empty`, `ac-fade` / `ac-slide` / `ac-slide-up` keyframes). Bottom-sheet variant at `(max-width: 720px)`.
+
+### Changed — Phase 4
+- **`Sidebar`** — the Phase 2 bridge stubs are removed: the `window.prompt` switcher, the Edit / + New buttons inside the active-town card, and the inline NH/SH segmented toggle. The single `Switch town ›` button now opens the TownManager. Hemisphere is shown as a read-only `Hem. NH` / `Hem. SH` label (editing happens in the drawer). Sidebar no longer takes `onOpenCreateTown` / `onOpenEditTown` props.
+- **`useAppStore.createTown`** signature is `(name, gameId, hemisphere?)` — `playerName` removed. **`useAppStore.updateTown`** signature is `(id, patch: TownPatch)` where `TownPatch` is `{ name?, hemisphere? }`. `gameId` is intentionally not part of the patch (Decision 1 — game is immutable post-create).
+- **`Town` type** — `playerName: string` field removed (Decision 5). Existing values in localStorage are silently dropped on next write; no migration step required.
+- **`downloadCSV` / `buildCSV`** no longer take a `playerName` argument; the "Player" row is removed from CSV exports.
+
+### Removed — Phase 4
+- **`CreateTownModal`** (`src/components/modals/CreateTownModal.tsx`) — replaced by TownManager's New Town form.
+- **`EditTownModal`** (`src/components/modals/EditTownModal.tsx`) — replaced by TownManager's inline row edit.
+- **`TownNameFields`** (`src/components/shared/TownNameFields.tsx`) — no remaining consumers.
+- **v0.8.1 greyed-out-buttons stopgap** — no longer needed; the TownManager drawer mounts at the layout level and works on every route, resolving the issue the stopgap worked around.
+
+### Decisions — Phase 4
+- **Decision 1 honored** — the inline edit form has no game `<select>`. The game is shown as a read-only badge with the hint "Game can't be changed after creation." `handleSave` builds a patch object that contains only `name` and `hemisphere`, never `gameId`.
+- **Decision 5 honored** — `playerName` removed from `Town`, store, CSV export, and tests. No migration callback because Zustand's `persist` simply ignores fields not in the schema.
+- **Hemisphere persistence** — the store keeps `hemisphere: Hemisphere` (`'NH'` | `'SH'`, default `'NH'`). The drawer passes `null` from the patch when the game isn't ACNH; `updateTown` ignores nulls so a town's stored hemisphere never gets clobbered.
+- **TownManager state lives in a separate `useUIStore`** rather than inside `useAppStore`, so the drawer's open/closed state isn't persisted to localStorage across reloads.
+- **Auto-open path replaces the `required` flag** — `CreateTownModal`'s `required={noTowns}` pattern is replaced by `App.tsx` opening the drawer in `forceCreate` mode whenever the store hydrates with zero towns. Same UX (modal-like, can't be dismissed) implemented as a single behavior gate inside the new component.
+
 ## [v0.8.2-alpha] — 2026-05-01
 
 ### Added
diff --git a/CLAUDE.md b/CLAUDE.md
index 5f3cadb..5fcfaef 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -39,7 +39,7 @@ npm install       # Install dependencies
 **Tests:** Vitest  
 **Store schema:** 3-level `donated[townId][gameId][itemId]` (as of v0.7); `Town` includes `hemisphere: 'NH' | 'SH'` (as of v0.8)  
 **Migration:** Zustand persist v3 + `bootstrapMigration.ts` — zero data loss for existing users  
-**Modal pattern:** `CreateTownModal` and `EditTownModal` use always-mounted `isOpen` prop pattern; overlay is a single `flex items-center justify-center` wrapper — no `overflow-y-auto`  
+**Town CRUD (v0.9 Phase 4):** `TownManager` drawer mounts at the App layout level (above the router), opened via `useUIStore.openTownManager()`. Replaces `CreateTownModal`, `EditTownModal`, and the `TownSwitcher` dropdown. When `towns.length === 0`, App.tsx auto-opens it in `forceCreate` mode (no close/Esc/scrim dismissal). Per Decision 1, edit form has no game `<select>` — game is read-only post-create.  
 **Shell layout (v0.9 Phase 2):** `Sidebar` (280px left, sticky) + `<main className="ac-main">` in CSS grid `280px 1fr`, max-width 1440px centered. Below 980px sidebar stacks above main. `MuseumHeader`, `TabBar`, `TownSwitcher` retired — nav lives in the sidebar.
 
 ### File Structure
@@ -69,9 +69,8 @@ src/
       MonthGrid.tsx         # 12-cell month availability grid
       SearchBar.tsx         # Per-tab inline search input
     modals/
-      CreateTownModal.tsx   # New town form with game selector
-      EditTownModal.tsx     # Rename town form (gameId immutable)
       DetailModal.tsx       # Item detail sheet
+    TownManager.tsx         # Right-side drawer for switch/edit/create/delete towns (v0.9 Phase 4)
     views/
       AnalyticsView.tsx     # Charts + stats tab content
       ActivityFeed.tsx      # Recent donations list
@@ -170,7 +169,7 @@ See `.claude/rules/vercel.md` for full deployment rules. Key points:
 - **issue #26** — Art tab persistent label — **fixed in v0.8.2 (PR #57)**; `setSelected(null)` added to tab-change `useEffect`
 - **issue #31** — Create-town edge case; low priority, open
 - **Sea creatures tab** — **shipped in v0.8.2 (PR #44, Closes #56)**; Sea tab visible for ACNL and ACNH towns
-- **Edit/new-town buttons greyed out on Fish, Bugs, Fossils tabs** — intentional v0.8.1 stopgap. Modals (EditTownModal, CreateTownModal) are mounted in ACCanvas, which sits below the router layout; on museum category tabs the modal renders fine but overlapping scroll context causes visual issues. Buttons show `opacity: 0.4` + tooltip directing users to Home/Search/Recent Donations instead. Proper fix (lift modals to layout level) deferred to v0.9 UI revamp.
+- **Edit/new-town buttons greyed out on Fish, Bugs, Fossils tabs** — **resolved in v0.9 Phase 4**. The `TownManager` drawer mounts at the App layout level and renders correctly on every route, so the overflow/z-index issues that motivated the stopgap no longer apply.
 
 ## ACCanvas.tsx
 
diff --git a/src/App.tsx b/src/App.tsx
index acbf64e..93c2802 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,13 @@
+import { useEffect } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { Analytics } from '@vercel/analytics/react';
 import ACCanvas from './components/ACCanvas';
 import SettingsRoute from './components/SettingsRoute';
+import { TownManager } from './components/TownManager';
 import { useHydration } from './hooks/useHydration';
 import ErrorBoundary from './components/ErrorBoundary';
 import { useAppStore } from './lib/store';
+import { useUIStore } from './lib/uiStore';
 
 function RootRedirect() {
   const towns = useAppStore(s => s.towns);
@@ -20,6 +23,16 @@ function RootRedirect() {
 
 function App() {
   const hydrated = useHydration();
+  const towns = useAppStore(s => s.towns);
+  const openTownManager = useUIStore(s => s.openTownManager);
+  const townManagerOpen = useUIStore(s => s.townManagerOpen);
+
+  // Force the TownManager open in create mode whenever there are no towns.
+  useEffect(() => {
+    if (hydrated && towns.length === 0 && !townManagerOpen) {
+      openTownManager(true);
+    }
+  }, [hydrated, towns.length, townManagerOpen, openTownManager]);
 
   if (!hydrated) {
     return (
@@ -54,6 +67,7 @@ function App() {
         <Route path="/town/:townId/:tab" element={<ACCanvas />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
+      <TownManager />
       <Analytics />
       {typeof window !== 'undefined' && (
         <div
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index 0bb8c8d..aeb26a8 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -20,8 +20,6 @@ import { CategoryProgress } from './shared/CategoryProgress';
 import { SearchBar } from './shared/SearchBar';
 import { EmptyState } from './shared/EmptyState';
 
-import { CreateTownModal } from './modals/CreateTownModal';
-import { EditTownModal } from './modals/EditTownModal';
 import { DetailModal } from './modals/DetailModal';
 
 import { GlobalSearchBar } from './search/GlobalSearchBar';
@@ -98,8 +96,6 @@ export default function ACCanvas() {
     item: AnyItem;
     category: CategoryId;
   } | null>(null);
-  const [showCreateTown, setShowCreateTown] = useState(false);
-  const [showEditTown, setShowEditTown] = useState(false);
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
   const { data, loading, loadError, reload } = useMuseumData(
@@ -170,13 +166,7 @@ export default function ACCanvas() {
 
   function handleExport() {
     if (!activeTown) return;
-    downloadCSV(
-      data,
-      activeTownDonated,
-      activeTownDonatedAt,
-      activeTown.name,
-      activeTown.playerName
-    );
+    downloadCSV(data, activeTownDonated, activeTownDonatedAt, activeTown.name);
   }
 
   function handleTabChange(tab: ViewId) {
@@ -216,8 +206,6 @@ export default function ACCanvas() {
           townId={activeTownId}
           data={data}
           catCounts={catCounts}
-          onOpenCreateTown={() => setShowCreateTown(true)}
-          onOpenEditTown={() => setShowEditTown(true)}
           onExport={handleExport}
         />
       )}
@@ -365,18 +353,6 @@ export default function ACCanvas() {
         </div>
       </main>
 
-      <CreateTownModal
-        isOpen={noTowns || showCreateTown}
-        required={noTowns}
-        onClose={() => setShowCreateTown(false)}
-      />
-
-      <EditTownModal
-        isOpen={showEditTown}
-        town={activeTown ?? null}
-        onClose={() => setShowEditTown(false)}
-      />
-
       {selected && !noTowns && (
         <DetailModal
           item={selected.item}
diff --git a/src/components/SettingsRoute.tsx b/src/components/SettingsRoute.tsx
index 4e9c56a..4503e7c 100644
--- a/src/components/SettingsRoute.tsx
+++ b/src/components/SettingsRoute.tsx
@@ -1,9 +1,6 @@
-import { useState } from 'react';
 import { useAppStore } from '../lib/store';
 import { Sidebar } from './Sidebar';
 import { SettingsPage } from './SettingsPage';
-import { CreateTownModal } from './modals/CreateTownModal';
-import { EditTownModal } from './modals/EditTownModal';
 import { useMuseumData } from '../hooks/useMuseumData';
 import { useCategoryStats } from '../hooks/useCategoryStats';
 import { downloadCSV } from '../lib/csvExport';
@@ -30,21 +27,12 @@ export default function SettingsRoute() {
     return s.donatedAt[s.activeTownId]?.[town.gameId] ?? EMPTY_DONATED_AT;
   });
 
-  const [showCreateTown, setShowCreateTown] = useState(false);
-  const [showEditTown, setShowEditTown] = useState(false);
-
   const { data } = useMuseumData(activeTown?.gameId ?? 'ACGCN');
   const catCounts = useCategoryStats(data, activeTownDonated);
 
   function handleExport() {
     if (!activeTown) return;
-    downloadCSV(
-      data,
-      activeTownDonated,
-      activeTownDonatedAt,
-      activeTown.name,
-      activeTown.playerName
-    );
+    downloadCSV(data, activeTownDonated, activeTownDonatedAt, activeTown.name);
   }
 
   return (
@@ -54,25 +42,12 @@ export default function SettingsRoute() {
           townId={activeTownId}
           data={data}
           catCounts={catCounts}
-          onOpenCreateTown={() => setShowCreateTown(true)}
-          onOpenEditTown={() => setShowEditTown(true)}
           onExport={handleExport}
         />
       )}
       <main className="ac-main">
         <SettingsPage />
       </main>
-
-      <CreateTownModal
-        isOpen={showCreateTown}
-        required={false}
-        onClose={() => setShowCreateTown(false)}
-      />
-      <EditTownModal
-        isOpen={showEditTown}
-        town={activeTown ?? null}
-        onClose={() => setShowEditTown(false)}
-      />
     </div>
   );
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6de35b0..fa97657 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 import { NavLink, useNavigate } from 'react-router-dom';
 import { useAppStore } from '../lib/store';
-import type { Hemisphere } from '../lib/store';
+import { useUIStore } from '../lib/uiStore';
 import { GAMES } from '../lib/types';
 import type { CategoryId, GameId } from '../lib/types';
 import type { ViewId, AllData } from '../lib/viewTypes';
@@ -21,21 +21,16 @@ export function Sidebar({
   townId,
   data,
   catCounts,
-  onOpenCreateTown,
-  onOpenEditTown,
   onExport,
 }: {
   townId: string;
   data: AllData;
   catCounts: Stats;
-  onOpenCreateTown: () => void;
-  onOpenEditTown: () => void;
   onExport: () => void;
 }) {
   const navigate = useNavigate();
   const towns = useAppStore(s => s.towns);
-  const setActiveTown = useAppStore(s => s.setActiveTown);
-  const setTownHemisphere = useAppStore(s => s.setTownHemisphere);
+  const openTownManager = useUIStore(s => s.openTownManager);
   const activeTown = towns.find(t => t.id === townId);
 
   const gameId = activeTown?.gameId ?? 'ACGCN';
@@ -46,35 +41,6 @@ export function Sidebar({
     return `/town/${townId}/${view}`;
   }
 
-  function handleSwitchTown() {
-    // Phase 2 stub: cycles to the next town if one exists, otherwise opens
-    // CreateTownModal. Full TownManager drawer ships in Phase 4.
-    const others = towns.filter(t => t.id !== townId);
-    if (others.length === 0) {
-      onOpenCreateTown();
-      return;
-    }
-    if (others.length === 1) {
-      setActiveTown(others[0].id);
-      navigate(`/town/${others[0].id}/home`);
-      return;
-    }
-    // Multiple other towns — surface a quick prompt picker (temporary).
-    const labels = others
-      .map((t, i) => `${i + 1}. ${t.name} (${GAMES[t.gameId].shortName})`)
-      .join('\n');
-    const pick = window.prompt(
-      `Switch to which town?\n${labels}\n\nEnter a number, or cancel.`
-    );
-    if (!pick) return;
-    const idx = Number.parseInt(pick, 10) - 1;
-    const choice = others[idx];
-    if (choice) {
-      setActiveTown(choice.id);
-      navigate(`/town/${choice.id}/home`);
-    }
-  }
-
   return (
     <aside className="ac-sidebar">
       <div className="ac-brand">
@@ -113,47 +79,16 @@ export function Sidebar({
             {game.hasHemispheres && (
               <>
                 <span className="ac-dot-sep">·</span>
-                <span
-                  className="ac-hem-toggle"
-                  role="group"
-                  aria-label="Hemisphere"
-                >
-                  {(['NH', 'SH'] as const).map(h => (
-                    <button
-                      key={h}
-                      type="button"
-                      className={`ac-hem-btn ${(activeTown.hemisphere ?? 'NH') === h ? 'is-active' : ''}`}
-                      onClick={() =>
-                        setTownHemisphere(activeTown.id, h as Hemisphere)
-                      }
-                      aria-pressed={(activeTown.hemisphere ?? 'NH') === h}
-                    >
-                      {h}
-                    </button>
-                  ))}
-                </span>
+                <span>Hem. {activeTown.hemisphere ?? 'NH'}</span>
               </>
             )}
           </div>
           <div className="ac-town-actions">
-            <button className="ac-town-switch" onClick={handleSwitchTown}>
-              Switch town ›
-            </button>
             <button
-              className="ac-town-edit"
-              onClick={onOpenEditTown}
-              title="Edit town"
-              aria-label="Edit town"
+              className="ac-town-switch"
+              onClick={() => openTownManager(false)}
             >
-              Edit
-            </button>
-            <button
-              className="ac-town-edit"
-              onClick={onOpenCreateTown}
-              title="New town"
-              aria-label="New town"
-            >
-              + New
+              Switch town ›
             </button>
           </div>
         </div>
diff --git a/src/components/TownManager.tsx b/src/components/TownManager.tsx
new file mode 100644
index 0000000..8783cc0
--- /dev/null
+++ b/src/components/TownManager.tsx
@@ -0,0 +1,410 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppStore, type Hemisphere, type Town } from '../lib/store';
+import { useUIStore } from '../lib/uiStore';
+import { GAME_LIST, GAMES, type GameId } from '../lib/types';
+
+const HEMISPHERE_GAMES = new Set<GameId>(['ACNH']);
+
+export function TownManager() {
+  const open = useUIStore(s => s.townManagerOpen);
+  const forceCreate = useUIStore(s => s.townManagerForceCreate);
+  const close = useUIStore(s => s.closeTownManager);
+
+  const towns = useAppStore(s => s.towns);
+  const activeTownId = useAppStore(s => s.activeTownId);
+  const donated = useAppStore(s => s.donated);
+  const setActiveTown = useAppStore(s => s.setActiveTown);
+  const updateTown = useAppStore(s => s.updateTown);
+  const createTown = useAppStore(s => s.createTown);
+  const deleteTown = useAppStore(s => s.deleteTown);
+
+  const navigate = useNavigate();
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  // Reset transient state when drawer toggles
+  useEffect(() => {
+    if (!open) {
+      setEditingId(null);
+      setCreating(false);
+    } else if (forceCreate) {
+      setCreating(true);
+      setEditingId(null);
+    }
+  }, [open, forceCreate]);
+
+  // Esc to close (unless forced)
+  useEffect(() => {
+    if (!open || forceCreate) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, forceCreate, close]);
+
+  if (!open) return null;
+
+  const showEmptyState = towns.length === 0 && !creating;
+
+  function donatedCount(town: Town): number {
+    const byGame = donated[town.id]?.[town.gameId];
+    if (!byGame) return 0;
+    return Object.keys(byGame).length;
+  }
+
+  function handleScrimClick() {
+    if (forceCreate) return;
+    close();
+  }
+
+  function handleActivate(id: string) {
+    setActiveTown(id);
+    navigate(`/town/${id}/home`);
+    close();
+  }
+
+  function handleSave(
+    id: string,
+    patch: { name: string; hemisphere: Hemisphere | null }
+  ) {
+    // Decision 1: gameId is intentionally never included.
+    updateTown(id, { name: patch.name, hemisphere: patch.hemisphere });
+    setEditingId(null);
+  }
+
+  function handleDelete(id: string) {
+    const town = towns.find(t => t.id === id);
+    if (!town) return;
+    if (towns.length <= 1) return;
+    if (!window.confirm(`Delete "${town.name}"? This can't be undone.`)) return;
+    deleteTown(id);
+    setEditingId(null);
+  }
+
+  function handleCreate(input: {
+    name: string;
+    gameId: GameId;
+    hemisphere: Hemisphere | null;
+  }) {
+    const hemi: Hemisphere = input.hemisphere ?? 'NH';
+    const town = createTown(input.name, input.gameId, hemi);
+    setCreating(false);
+    navigate(`/town/${town.id}/home`);
+    if (!forceCreate) close();
+    else useUIStore.getState().closeTownManager();
+  }
+
+  return (
+    <div className="ac-tm-scrim" onClick={handleScrimClick}>
+      <aside
+        className="ac-tm-drawer"
+        onClick={e => e.stopPropagation()}
+        role="dialog"
+        aria-label="Towns"
+      >
+        <header className="ac-tm-head">
+          <div>
+            <div className="ac-tm-eyebrow">Your towns</div>
+            <h2 className="ac-tm-title">
+              {forceCreate
+                ? 'Create your first town'
+                : 'Switch, edit, or add a town'}
+            </h2>
+          </div>
+          {!forceCreate && (
+            <button className="ac-tm-close" onClick={close} aria-label="Close">
+              ×
+            </button>
+          )}
+        </header>
+
+        {showEmptyState && (
+          <div className="ac-tm-empty">
+            <div className="ac-tm-empty-glyph">○</div>
+            <div className="ac-tm-empty-title">No towns yet</div>
+            <div className="ac-tm-empty-sub">
+              Create your first town to start tracking donations.
+            </div>
+          </div>
+        )}
+
+        <div className="ac-tm-list">
+          {towns.map(t => (
+            <TownRow
+              key={t.id}
+              town={t}
+              active={t.id === activeTownId}
+              editing={editingId === t.id}
+              donatedCount={donatedCount(t)}
+              canDelete={towns.length > 1}
+              onActivate={() => handleActivate(t.id)}
+              onEditStart={() => setEditingId(t.id)}
+              onEditCancel={() => setEditingId(null)}
+              onSave={patch => handleSave(t.id, patch)}
+              onDelete={() => handleDelete(t.id)}
+            />
+          ))}
+        </div>
+
+        <footer className="ac-tm-foot">
+          {creating ? (
+            <NewTownForm
+              onCancel={() => {
+                if (!forceCreate) setCreating(false);
+              }}
+              onCreate={handleCreate}
+              cancellable={!forceCreate}
+            />
+          ) : (
+            <button className="ac-tm-cta" onClick={() => setCreating(true)}>
+              <span className="ac-tm-cta-plus">+</span>
+              <span>New town</span>
+            </button>
+          )}
+        </footer>
+      </aside>
+    </div>
+  );
+}
+
+interface TownRowProps {
+  town: Town;
+  active: boolean;
+  editing: boolean;
+  donatedCount: number;
+  canDelete: boolean;
+  onActivate: () => void;
+  onEditStart: () => void;
+  onEditCancel: () => void;
+  onSave: (patch: { name: string; hemisphere: Hemisphere | null }) => void;
+  onDelete: () => void;
+}
+
+function TownRow({
+  town,
+  active,
+  editing,
+  donatedCount,
+  canDelete,
+  onActivate,
+  onEditStart,
+  onEditCancel,
+  onSave,
+  onDelete,
+}: TownRowProps) {
+  const [name, setName] = useState(town.name);
+  const [hemisphere, setHemisphere] = useState<Hemisphere>(
+    town.hemisphere ?? 'NH'
+  );
+  const showHemisphere = HEMISPHERE_GAMES.has(town.gameId);
+
+  useEffect(() => {
+    setName(town.name);
+    setHemisphere(town.hemisphere ?? 'NH');
+  }, [town, editing]);
+
+  const game = GAMES[town.gameId];
+
+  if (editing) {
+    return (
+      <div className="ac-tm-row ac-tm-row-editing">
+        <div className="ac-tm-form">
+          <label className="ac-tm-field">
+            <span className="ac-tm-field-label">Town name</span>
+            <input
+              className="ac-tm-input"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              autoFocus
+            />
+          </label>
+          <div className="ac-tm-field">
+            <span className="ac-tm-field-label">Game</span>
+            <div className="ac-tm-row-meta" style={{ marginTop: 0 }}>
+              <span className="ac-tm-badge">{game.shortName}</span>
+              <span style={{ fontSize: 13 }}>{game.name}</span>
+            </div>
+            <span className="ac-tm-field-hint">
+              Game can&apos;t be changed after creation.
+            </span>
+          </div>
+          {showHemisphere && (
+            <label className="ac-tm-field">
+              <span className="ac-tm-field-label">Hemisphere</span>
+              <div className="ac-tm-seg">
+                <button
+                  type="button"
+                  className={hemisphere === 'NH' ? 'ac-tm-seg-on' : ''}
+                  onClick={() => setHemisphere('NH')}
+                >
+                  Northern
+                </button>
+                <button
+                  type="button"
+                  className={hemisphere === 'SH' ? 'ac-tm-seg-on' : ''}
+                  onClick={() => setHemisphere('SH')}
+                >
+                  Southern
+                </button>
+              </div>
+            </label>
+          )}
+        </div>
+        <div className="ac-tm-row-actions">
+          {canDelete && (
+            <button type="button" className="ac-tm-danger" onClick={onDelete}>
+              Delete
+            </button>
+          )}
+          <div className="ac-tm-row-actions-right">
+            <button
+              type="button"
+              className="ac-tm-ghost"
+              onClick={onEditCancel}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="ac-tm-primary"
+              disabled={!name.trim()}
+              onClick={() =>
+                onSave({
+                  name: name.trim(),
+                  hemisphere: showHemisphere ? hemisphere : null,
+                })
+              }
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`ac-tm-row ${active ? 'ac-tm-row-active' : ''}`}>
+      <button className="ac-tm-row-main" onClick={onActivate}>
+        <div
+          className="ac-tm-row-mark"
+          style={{
+            borderColor: active ? 'var(--accent)' : 'var(--border-strong)',
+          }}
+        >
+          {active && <span className="ac-tm-row-tick">●</span>}
+        </div>
+        <div className="ac-tm-row-text">
+          <div className="ac-tm-row-name">{town.name}</div>
+          <div className="ac-tm-row-meta">
+            <span className="ac-tm-badge">{game.shortName}</span>
+            <span>{game.name}</span>
+            {showHemisphere && (
+              <>
+                <span className="ac-dot-sep">·</span>
+                <span>Hem. {town.hemisphere}</span>
+              </>
+            )}
+            <span className="ac-dot-sep">·</span>
+            <span>{donatedCount} donated</span>
+          </div>
+        </div>
+      </button>
+      <button
+        className="ac-tm-row-edit"
+        onClick={onEditStart}
+        aria-label="Edit town"
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M11 2l3 3-9 9H2v-3l9-9z"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+interface NewTownFormProps {
+  onCancel: () => void;
+  onCreate: (input: {
+    name: string;
+    gameId: GameId;
+    hemisphere: Hemisphere | null;
+  }) => void;
+  cancellable: boolean;
+}
+
+function NewTownForm({ onCancel, onCreate, cancellable }: NewTownFormProps) {
+  const [name, setName] = useState('');
+  const [gameId, setGameId] = useState<GameId>('ACNH');
+  const [hemisphere, setHemisphere] = useState<Hemisphere>('NH');
+  const showHemisphere = HEMISPHERE_GAMES.has(gameId);
+
+  return (
+    <div className="ac-tm-newform">
+      <input
+        className="ac-tm-input"
+        autoFocus
+        placeholder="Town name (e.g. Marigold)"
+        value={name}
+        onChange={e => setName(e.target.value)}
+      />
+      <select
+        className="ac-tm-input"
+        value={gameId}
+        onChange={e => setGameId(e.target.value as GameId)}
+      >
+        {GAME_LIST.map(g => (
+          <option key={g.id} value={g.id}>
+            {g.name}
+          </option>
+        ))}
+      </select>
+      {showHemisphere && (
+        <div className="ac-tm-seg">
+          <button
+            type="button"
+            className={hemisphere === 'NH' ? 'ac-tm-seg-on' : ''}
+            onClick={() => setHemisphere('NH')}
+          >
+            Northern
+          </button>
+          <button
+            type="button"
+            className={hemisphere === 'SH' ? 'ac-tm-seg-on' : ''}
+            onClick={() => setHemisphere('SH')}
+          >
+            Southern
+          </button>
+        </div>
+      )}
+      <div className="ac-tm-newform-actions">
+        {cancellable && (
+          <button type="button" className="ac-tm-ghost" onClick={onCancel}>
+            Cancel
+          </button>
+        )}
+        <button
+          type="button"
+          className="ac-tm-primary"
+          disabled={!name.trim()}
+          onClick={() =>
+            onCreate({
+              name: name.trim(),
+              gameId,
+              hemisphere: showHemisphere ? hemisphere : null,
+            })
+          }
+        >
+          Create town
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/modals/CreateTownModal.tsx b/src/components/modals/CreateTownModal.tsx
deleted file mode 100644
index 0c72cf6..0000000
--- a/src/components/modals/CreateTownModal.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import { X } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-import { useAppStore } from '../../lib/store';
-import { type GameId, GAMES } from '../../lib/types';
-import { TownNameFields } from '../shared/TownNameFields';
-
-export function CreateTownModal({
-  isOpen,
-  onClose,
-  required,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  required: boolean;
-}) {
-  const createTown = useAppStore(s => s.createTown);
-  const navigate = useNavigate();
-  const [name, setName] = useState('');
-  const [playerName, setPlayerName] = useState('');
-  const [gameId, setGameId] = useState<GameId>('ACGCN');
-
-  if (!isOpen) return null;
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!name.trim() || !playerName.trim()) return;
-    const town = createTown(name.trim(), playerName.trim(), gameId);
-    onClose();
-    navigate(`/town/${town.id}/home`);
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
-      style={{ backgroundColor: 'rgba(42,32,20,0.55)' }}
-      onClick={required ? undefined : onClose}
-    >
-      <div
-        className="w-full max-w-sm rounded-[20px] overflow-hidden"
-        style={{ backgroundColor: '#FDF9F1', border: '1px solid #E7DAC4' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div
-          className="px-6 py-4 flex items-center justify-between"
-          style={{
-            background: 'linear-gradient(180deg, #7B5E3B 0%, #6e5234 100%)',
-          }}
-        >
-          <h2 className="text-base font-semibold" style={{ color: '#F5E9D4' }}>
-            New Town
-          </h2>
-          {!required && (
-            <button
-              onClick={onClose}
-              style={{ color: '#F5E9D4', opacity: 0.7 }}
-            >
-              <X className="w-4 h-4" />
-            </button>
-          )}
-        </div>
-
-        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
-          <TownNameFields
-            name={name}
-            playerName={playerName}
-            onNameChange={setName}
-            onPlayerNameChange={setPlayerName}
-            namePlaceholder="e.g. Plumeria"
-            playerPlaceholder="e.g. Brock"
-          />
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: '#5a4a35' }}
-            >
-              Game
-            </label>
-            <select
-              value={gameId}
-              onChange={e => setGameId(e.target.value as GameId)}
-              className="w-full rounded-[10px] border px-3 py-2 text-sm outline-none"
-              style={{
-                borderColor: '#E7DAC4',
-                backgroundColor: '#FFFDF6',
-                color: '#2A2A2A',
-              }}
-            >
-              {(Object.keys(GAMES) as GameId[]).map(id => (
-                <option key={id} value={id}>
-                  {GAMES[id].name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <button
-            type="submit"
-            disabled={!name.trim() || !playerName.trim()}
-            className="w-full py-3 rounded-[12px] text-sm font-semibold transition"
-            style={{
-              backgroundColor:
-                name.trim() && playerName.trim() ? '#3CA370' : '#D9CCBA',
-              color: '#fff',
-            }}
-          >
-            Create Town
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/modals/EditTownModal.tsx b/src/components/modals/EditTownModal.tsx
deleted file mode 100644
index c5ca216..0000000
--- a/src/components/modals/EditTownModal.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { X } from 'lucide-react';
-import { useAppStore } from '../../lib/store';
-import { TownNameFields } from '../shared/TownNameFields';
-
-interface Props {
-  isOpen: boolean;
-  town: { id: string; name: string; playerName: string } | null;
-  onClose: () => void;
-}
-
-export function EditTownModal({ isOpen, town, onClose }: Props) {
-  const updateTown = useAppStore(s => s.updateTown);
-  const [name, setName] = useState('');
-  const [playerName, setPlayerName] = useState('');
-
-  // Sync form state when a different town is opened for editing.
-  // Depend on the stable primitive id so the effect only fires when the town
-  // actually changes, not on every parent re-render.
-  const townId = town?.id;
-  const townName = town?.name;
-  const townPlayerName = town?.playerName;
-  useEffect(() => {
-    if (townId) {
-      setName(townName ?? '');
-      setPlayerName(townPlayerName ?? '');
-    }
-  }, [townId, townName, townPlayerName]);
-
-  if (!isOpen || !town) return null;
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!name.trim() || !playerName.trim() || !town) return;
-    updateTown(town.id, name.trim(), playerName.trim());
-    onClose();
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
-      style={{ backgroundColor: 'rgba(42,32,20,0.55)' }}
-      onClick={onClose}
-    >
-      <div
-        className="w-full max-w-sm rounded-[20px] overflow-hidden"
-        style={{ backgroundColor: '#FDF9F1', border: '1px solid #E7DAC4' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div
-          className="px-6 py-4 flex items-center justify-between"
-          style={{
-            background: 'linear-gradient(180deg, #7B5E3B 0%, #6e5234 100%)',
-          }}
-        >
-          <h2 className="text-base font-semibold" style={{ color: '#F5E9D4' }}>
-            Edit Town
-          </h2>
-          <button onClick={onClose} style={{ color: '#F5E9D4', opacity: 0.7 }}>
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
-          <TownNameFields
-            name={name}
-            playerName={playerName}
-            onNameChange={setName}
-            onPlayerNameChange={setPlayerName}
-          />
-          <button
-            type="submit"
-            disabled={!name.trim() || !playerName.trim()}
-            className="w-full py-3 rounded-[12px] text-sm font-semibold transition"
-            style={{
-              backgroundColor:
-                name.trim() && playerName.trim() ? '#3CA370' : '#D9CCBA',
-              color: '#fff',
-            }}
-          >
-            Save Changes
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/shared/TownNameFields.tsx b/src/components/shared/TownNameFields.tsx
deleted file mode 100644
index 8c3ca04..0000000
--- a/src/components/shared/TownNameFields.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-
-interface Props {
-  name: string;
-  playerName: string;
-  onNameChange: (v: string) => void;
-  onPlayerNameChange: (v: string) => void;
-  namePlaceholder?: string;
-  playerPlaceholder?: string;
-  autoFocus?: boolean;
-}
-
-const inputStyle = {
-  borderColor: '#E7DAC4',
-  backgroundColor: '#FFFDF6',
-  color: '#2A2A2A',
-};
-
-const labelStyle = { color: '#5a4a35' };
-
-export function TownNameFields({
-  name,
-  playerName,
-  onNameChange,
-  onPlayerNameChange,
-  namePlaceholder,
-  playerPlaceholder,
-  autoFocus = true,
-}: Props) {
-  return (
-    <>
-      <div>
-        <label className="block text-xs font-medium mb-1.5" style={labelStyle}>
-          Town Name
-        </label>
-        <input
-          autoFocus={autoFocus}
-          type="text"
-          value={name}
-          onChange={e => onNameChange(e.target.value)}
-          placeholder={namePlaceholder}
-          className="w-full rounded-[10px] border px-3 py-2 text-sm outline-none"
-          style={inputStyle}
-        />
-      </div>
-      <div>
-        <label className="block text-xs font-medium mb-1.5" style={labelStyle}>
-          Your Name
-        </label>
-        <input
-          type="text"
-          value={playerName}
-          onChange={e => onPlayerNameChange(e.target.value)}
-          placeholder={playerPlaceholder}
-          className="w-full rounded-[10px] border px-3 py-2 text-sm outline-none"
-          style={inputStyle}
-        />
-      </div>
-    </>
-  );
-}
diff --git a/src/index.css b/src/index.css
index fde4fab..f04f396 100644
--- a/src/index.css
+++ b/src/index.css
@@ -402,3 +402,200 @@
   .ac-danger-row { flex-direction: column; align-items: stretch; }
   .ac-danger-btn { width: 100%; }
 }
+
+/* ── Town Manager drawer (Phase 4) ── */
+.ac-tm-scrim {
+  position: fixed; inset: 0; z-index: 9990;
+  background: rgba(20,18,12,0.32);
+  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+  display: flex; justify-content: flex-end;
+  animation: ac-fade 0.18s ease;
+}
+@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ac-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+.ac-tm-drawer {
+  width: 420px; max-width: 100vw;
+  background: var(--bg);
+  border-left: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  height: 100vh;
+  animation: ac-slide 0.22s ease;
+  box-shadow: -20px 0 60px rgba(0,0,0,0.08);
+}
+.ac-tm-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  padding: 22px 24px 18px;
+  border-bottom: 1px solid var(--border);
+  gap: 12px;
+}
+.ac-tm-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); }
+.ac-tm-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 4px 0 0; letter-spacing: -0.01em; max-width: 280px; }
+.ac-tm-close {
+  width: 32px; height: 32px; border-radius: 8px;
+  font-size: 22px; line-height: 1; color: var(--ink-muted);
+  background: transparent; border: none; cursor: pointer; flex: none;
+}
+.ac-tm-close:hover { background: var(--surface-alt); color: var(--ink); }
+
+.ac-tm-list { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
+
+.ac-tm-row {
+  display: flex; align-items: stretch;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: border-color 0.12s;
+}
+.ac-tm-row:hover { border-color: var(--border-strong); }
+.ac-tm-row-active { border-color: var(--accent); background: var(--accent-soft); }
+.ac-tm-row-main {
+  flex: 1; display: flex; gap: 14px; align-items: center;
+  padding: 14px 16px; text-align: left; min-width: 0;
+  background: transparent; border: none; cursor: pointer;
+  font: inherit; color: inherit;
+}
+.ac-tm-row-mark {
+  width: 18px; height: 18px; border-radius: 50%;
+  border: 1.5px solid;
+  display: grid; place-items: center;
+  flex: none;
+}
+.ac-tm-row-tick { color: var(--accent); font-size: 9px; }
+.ac-tm-row-text { flex: 1; min-width: 0; }
+.ac-tm-row-name { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
+.ac-tm-row-meta {
+  display: flex; gap: 6px; align-items: center;
+  font-size: 12px; color: var(--ink-soft); margin-top: 2px;
+  flex-wrap: wrap;
+}
+.ac-tm-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--ink-soft);
+}
+.ac-tm-row-active .ac-tm-badge { background: var(--surface); }
+
+.ac-tm-row-edit {
+  padding: 0 16px;
+  color: var(--ink-muted);
+  border: none; border-left: 1px solid var(--border);
+  background: transparent; cursor: pointer;
+  display: grid; place-items: center;
+  transition: background 0.12s, color 0.12s;
+}
+.ac-tm-row-edit:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-tm-row-active .ac-tm-row-edit { border-left-color: var(--accent); }
+
+/* Editing state */
+.ac-tm-row-editing {
+  flex-direction: column;
+  background: var(--surface);
+  border-color: var(--border-strong);
+  padding: 18px;
+  gap: 14px;
+}
+.ac-tm-form { display: flex; flex-direction: column; gap: 12px; }
+.ac-tm-field { display: flex; flex-direction: column; gap: 4px; }
+.ac-tm-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
+.ac-tm-field-hint { font-size: 11px; color: var(--ink-muted); margin-top: 2px; font-style: italic; }
+.ac-tm-input {
+  font: inherit; color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  outline: none;
+}
+.ac-tm-input:focus { border-color: var(--accent); }
+
+.ac-tm-seg {
+  display: flex; gap: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px;
+}
+.ac-tm-seg button {
+  flex: 1; padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--ink-soft);
+  background: transparent; border: none; cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.ac-tm-seg button:hover { color: var(--ink); }
+.ac-tm-seg button.ac-tm-seg-on {
+  background: var(--surface);
+  color: var(--accent-ink);
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+.ac-tm-row-actions {
+  display: flex; justify-content: space-between; gap: 8px;
+  padding-top: 8px; border-top: 1px solid var(--border);
+}
+.ac-tm-row-actions-right { display: flex; gap: 8px; margin-left: auto; }
+.ac-tm-ghost, .ac-tm-primary, .ac-tm-danger {
+  padding: 7px 14px; border-radius: 8px;
+  font-size: 13px; font-weight: 500;
+  background: transparent; border: none; cursor: pointer;
+  transition: background 0.12s, opacity 0.12s;
+}
+.ac-tm-ghost { color: var(--ink-soft); }
+.ac-tm-ghost:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-tm-primary { background: var(--accent); color: var(--surface); }
+.ac-tm-primary:hover { opacity: 0.88; }
+.ac-tm-primary:disabled { opacity: 0.4; cursor: not-allowed; }
+.ac-tm-danger { color: var(--warn); }
+.ac-tm-danger:hover { background: var(--warn-soft); }
+
+.ac-tm-empty { padding: 60px 20px; text-align: center; color: var(--ink-muted); }
+.ac-tm-empty-glyph {
+  width: 56px; height: 56px; border-radius: 50%;
+  border: 1.5px dashed var(--border-strong);
+  margin: 0 auto 14px;
+  display: grid; place-items: center;
+  color: var(--ink-muted);
+  font-size: 24px;
+}
+.ac-tm-empty-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 4px; }
+.ac-tm-empty-sub { font-size: 13px; }
+
+.ac-tm-foot { padding: 14px 18px 22px; border-top: 1px solid var(--border); }
+.ac-tm-cta {
+  width: 100%;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1.5px dashed var(--border-strong);
+  border-radius: 12px;
+  color: var(--ink-soft);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+.ac-tm-cta:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
+.ac-tm-cta-plus { font-size: 18px; line-height: 1; }
+.ac-tm-newform { display: flex; flex-direction: column; gap: 8px; }
+.ac-tm-newform-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+
+/* Mobile: bottom sheet */
+@media (max-width: 720px) {
+  .ac-tm-scrim { align-items: flex-end; justify-content: center; }
+  .ac-tm-drawer {
+    width: 100%; height: 88vh;
+    border-left: none; border-top: 1px solid var(--border);
+    border-radius: 16px 16px 0 0;
+    animation: ac-slide-up 0.22s ease;
+  }
+  @keyframes ac-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+}
diff --git a/src/lib/csvExport.ts b/src/lib/csvExport.ts
index d632301..6797540 100644
--- a/src/lib/csvExport.ts
+++ b/src/lib/csvExport.ts
@@ -49,10 +49,9 @@ export function downloadCSV(
   data: AllData,
   donatedMap: Record<string, boolean>,
   donatedAtMap: Record<string, string>,
-  townName: string,
-  playerName: string
+  townName: string
 ): void {
-  const csv = buildCSV(data, donatedMap, donatedAtMap, townName, playerName);
+  const csv = buildCSV(data, donatedMap, donatedAtMap, townName);
   const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
@@ -70,8 +69,7 @@ export function buildCSV(
   data: AllData,
   donatedMap: Record<string, boolean>,
   donatedAtMap: Record<string, string>,
-  townName: string,
-  playerName: string
+  townName: string
 ): string {
   const sections: string[] = [];
 
@@ -80,7 +78,6 @@ export function buildCSV(
     [
       row('Animal Crossing GCN — Museum Tracker Export'),
       row('Town', townName),
-      row('Player', playerName),
       row(
         'Exported',
         new Date().toLocaleString('en-US', {
diff --git a/src/lib/store.test.ts b/src/lib/store.test.ts
index 23081e5..f1f4e84 100644
--- a/src/lib/store.test.ts
+++ b/src/lib/store.test.ts
@@ -15,34 +15,34 @@ beforeEach(() => {
 
 describe('createTown', () => {
   it('adds a town to the list', () => {
-    useAppStore.getState().createTown('Pallet', 'Ash');
+    useAppStore.getState().createTown('Pallet', 'ACGCN');
     expect(useAppStore.getState().towns).toHaveLength(1);
     expect(useAppStore.getState().towns[0].name).toBe('Pallet');
-    expect(useAppStore.getState().towns[0].playerName).toBe('Ash');
+    expect(useAppStore.getState().towns[0].gameId).toBe('ACGCN');
   });
 
   it('sets the new town as active immediately', () => {
-    const town = useAppStore.getState().createTown('Pallet', 'Ash');
+    const town = useAppStore.getState().createTown('Pallet', 'ACGCN');
     expect(useAppStore.getState().activeTownId).toBe(town.id);
   });
 
   it('returns a town with a non-empty id and ISO createdAt', () => {
-    const town = useAppStore.getState().createTown('Pallet', 'Ash');
+    const town = useAppStore.getState().createTown('Pallet', 'ACGCN');
     expect(town.id).toBeTruthy();
     expect(() => new Date(town.createdAt)).not.toThrow();
   });
 
   it('accumulates multiple towns', () => {
-    useAppStore.getState().createTown('Pallet', 'Ash');
-    const _t2 = useAppStore.getState().createTown('Viridian', 'Brock');
+    useAppStore.getState().createTown('Pallet', 'ACGCN');
+    const _t2 = useAppStore.getState().createTown('Viridian', 'ACGCN');
     expect(useAppStore.getState().towns).toHaveLength(2);
   });
 });
 
 describe('setActiveTown', () => {
   it('switches the active town', () => {
-    const t1 = useAppStore.getState().createTown('Pallet', 'Ash');
-    const t2 = useAppStore.getState().createTown('Viridian', 'Brock');
+    const t1 = useAppStore.getState().createTown('Pallet', 'ACGCN');
+    const t2 = useAppStore.getState().createTown('Viridian', 'ACGCN');
     // createTown sets active to t2; switch back to t1
     useAppStore.getState().setActiveTown(t1.id);
     expect(useAppStore.getState().activeTownId).toBe(t1.id);
@@ -53,13 +53,13 @@ describe('setActiveTown', () => {
 
 describe('deleteTown', () => {
   it('removes the town from the list', () => {
-    const town = useAppStore.getState().createTown('Pallet', 'Ash');
+    const town = useAppStore.getState().createTown('Pallet', 'ACGCN');
     useAppStore.getState().deleteTown(town.id);
     expect(useAppStore.getState().towns).toHaveLength(0);
   });
 
   it('clears donated data for the deleted town', () => {
-    const town = useAppStore.getState().createTown('Pallet', 'Ash');
+    const town = useAppStore.getState().createTown('Pallet', 'ACGCN');
     useAppStore.getState().toggle('fish-001');
     expect(useAppStore.getState().donated[town.id]).toBeDefined();
     useAppStore.getState().deleteTown(town.id);
@@ -68,22 +68,22 @@ describe('deleteTown', () => {
   });
 
   it('falls back to the first remaining town when the active town is deleted', () => {
-    const t1 = useAppStore.getState().createTown('Pallet', 'Ash');
-    const t2 = useAppStore.getState().createTown('Viridian', 'Brock');
+    const t1 = useAppStore.getState().createTown('Pallet', 'ACGCN');
+    const t2 = useAppStore.getState().createTown('Viridian', 'ACGCN');
     // t2 is active now; delete t2 → should fall back to t1
     useAppStore.getState().deleteTown(t2.id);
     expect(useAppStore.getState().activeTownId).toBe(t1.id);
   });
 
   it('sets activeTownId to null when the last town is deleted', () => {
-    const town = useAppStore.getState().createTown('Pallet', 'Ash');
+    const town = useAppStore.getState().createTown('Pallet', 'ACGCN');
     useAppStore.getState().deleteTown(town.id);
     expect(useAppStore.getState().activeTownId).toBeNull();
   });
 
   it('does not change activeTownId when a non-active town is deleted', () => {
-    const t1 = useAppStore.getState().createTown('Pallet', 'Ash');
-    const t2 = useAppStore.getState().createTown('Viridian', 'Brock');
+    const t1 = useAppStore.getState().createTown('Pallet', 'ACGCN');
+    const t2 = useAppStore.getState().createTown('Viridian', 'ACGCN');
     useAppStore.getState().setActiveTown(t2.id);
     useAppStore.getState().deleteTown(t1.id);
     expect(useAppStore.getState().activeTownId).toBe(t2.id);
@@ -94,20 +94,20 @@ describe('deleteTown', () => {
 
 describe('toggle', () => {
   it('marks an item as donated for the active town', () => {
-    useAppStore.getState().createTown('Pallet', 'Ash');
+    useAppStore.getState().createTown('Pallet', 'ACGCN');
     useAppStore.getState().toggle('fish-001');
     expect(useAppStore.getState().isDonated('fish-001')).toBe(true);
   });
 
   it('un-donates an already-donated item (toggle off)', () => {
-    useAppStore.getState().createTown('Pallet', 'Ash');
+    useAppStore.getState().createTown('Pallet', 'ACGCN');
     useAppStore.getState().toggle('fish-001');
     useAppStore.getState().toggle('fish-001');
     expect(useAppStore.getState().isDonated('fish-001')).toBe(false);
   });
 
   it('records a donatedAt timestamp when toggled on', () => {
-    useAppStore.getState().createTown('Pallet', 'Ash');
+    useAppStore.getState().createTown('Pallet', 'ACGCN');
     const before = Date.now();
     useAppStore.getState().toggle('fish-001');
     const after = Date.now();
@@ -119,7 +119,7 @@ describe('toggle', () => {
   });
 
   it('removes the donatedAt timestamp when toggled off', () => {
-    useAppStore.getState().createTown('Pallet', 'Ash');
+    useAppStore.getState().createTown('Pallet', 'ACGCN');
     useAppStore.getState().toggle('fish-001');
     useAppStore.getState().toggle('fish-001');
     expect(useAppStore.getState().getDonatedAt('fish-001')).toBeUndefined();
@@ -132,10 +132,10 @@ describe('toggle', () => {
   });
 
   it('keeps donations isolated per town', () => {
-    const t1 = useAppStore.getState().createTown('Pallet', 'Ash');
+    const t1 = useAppStore.getState().createTown('Pallet', 'ACGCN');
     useAppStore.getState().toggle('fish-001');
 
-    const _t2 = useAppStore.getState().createTown('Viridian', 'Brock');
+    const _t2 = useAppStore.getState().createTown('Viridian', 'ACGCN');
     // t2 is now active; fish-001 should NOT be donated here
     expect(useAppStore.getState().isDonated('fish-001')).toBe(false);
 
@@ -153,7 +153,7 @@ describe('isDonated', () => {
   });
 
   it('returns false for an item that has never been toggled', () => {
-    useAppStore.getState().createTown('Pallet', 'Ash');
+    useAppStore.getState().createTown('Pallet', 'ACGCN');
     expect(useAppStore.getState().isDonated('fish-999')).toBe(false);
   });
 });
@@ -170,7 +170,7 @@ describe('getActiveTown', () => {
   });
 
   it('returns the currently active town', () => {
-    const town = useAppStore.getState().createTown('Pallet', 'Ash');
+    const town = useAppStore.getState().createTown('Pallet', 'ACGCN');
     expect(useAppStore.getState().getActiveTown()?.id).toBe(town.id);
   });
 });
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 69cb45a..0f7134b 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -8,12 +8,16 @@ export type Hemisphere = 'NH' | 'SH';
 export interface Town {
   id: string;
   name: string;
-  playerName: string;
   gameId: GameId;
   hemisphere: Hemisphere;
   createdAt: string;
 }
 
+export interface TownPatch {
+  name?: string;
+  hemisphere?: Hemisphere | null;
+}
+
 interface AppState {
   towns: Town[];
   activeTownId: string | null;
@@ -22,8 +26,8 @@ interface AppState {
   // donatedAt[townId][gameId][itemId] = ISO string
   donatedAt: Record<string, Record<string, Record<string, string>>>;
 
-  createTown: (name: string, playerName: string, gameId?: GameId) => Town;
-  updateTown: (id: string, name: string, playerName: string) => void;
+  createTown: (name: string, gameId: GameId, hemisphere?: Hemisphere) => Town;
+  updateTown: (id: string, patch: TownPatch) => void;
   setTownHemisphere: (id: string, hemisphere: Hemisphere) => void;
   setActiveTown: (id: string) => void;
   deleteTown: (id: string) => void;
@@ -47,13 +51,12 @@ export const useAppStore = create<AppState>()(
       donated: {},
       donatedAt: {},
 
-      createTown: (name, playerName, gameId = 'ACGCN') => {
+      createTown: (name, gameId, hemisphere = 'NH') => {
         const town: Town = {
           id: generateId(),
           name,
-          playerName,
           gameId,
-          hemisphere: 'NH',
+          hemisphere,
           createdAt: new Date().toISOString(),
         };
         set(state => ({
@@ -63,11 +66,17 @@ export const useAppStore = create<AppState>()(
         return town;
       },
 
-      updateTown: (id, name, playerName) =>
+      updateTown: (id, patch) =>
         set(state => ({
-          towns: state.towns.map(t =>
-            t.id === id ? { ...t, name, playerName } : t
-          ),
+          towns: state.towns.map(t => {
+            if (t.id !== id) return t;
+            const next: Town = { ...t };
+            if (patch.name !== undefined) next.name = patch.name;
+            if (patch.hemisphere !== undefined && patch.hemisphere !== null) {
+              next.hemisphere = patch.hemisphere;
+            }
+            return next;
+          }),
         })),
 
       setTownHemisphere: (id, hemisphere) =>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 7640cd7..b2156d4 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -53,6 +53,15 @@ export const GAMES: Record<GameId, Game> = {
   },
 };
 
+/** Convenience: list of games for selectors. */
+export const GAME_LIST: Game[] = [
+  GAMES.ACGCN,
+  GAMES.ACWW,
+  GAMES.ACCF,
+  GAMES.ACNL,
+  GAMES.ACNH,
+];
+
 export type Habitat = 'river' | 'ocean' | 'pond' | 'lake' | 'other';
 
 export type CategoryId = 'fish' | 'bugs' | 'fossils' | 'art' | 'sea_creatures';
diff --git a/src/lib/uiStore.ts b/src/lib/uiStore.ts
new file mode 100644
index 0000000..b6a9efa
--- /dev/null
+++ b/src/lib/uiStore.ts
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+
+interface UIState {
+  townManagerOpen: boolean;
+  /** When true, drawer is locked open (no scrim/Esc dismiss) and forced into create mode. Used when no towns exist. */
+  townManagerForceCreate: boolean;
+  openTownManager: (forceCreate?: boolean) => void;
+  closeTownManager: () => void;
+}
+
+export const useUIStore = create<UIState>(set => ({
+  townManagerOpen: false,
+  townManagerForceCreate: false,
+  openTownManager: (forceCreate = false) =>
+    set({ townManagerOpen: true, townManagerForceCreate: forceCreate }),
+  closeTownManager: () =>
+    set({ townManagerOpen: false, townManagerForceCreate: false }),
+}));

From 28dca1fd699266f9391f14e6719ea4414fad1d9b Mon Sep 17 00:00:00 2001
From: "openai-code-agent[bot]" <242516109+Codex@users.noreply.github.com>
Date: Sun, 3 May 2026 23:24:34 +0000
Subject: [PATCH 08/28] Add v0.9 plan baseline + verify repo health commands

Agent-Logs-Url: https://github.com/jacuzzicoding/animalcrossingwebapp/sessions/7654ad0e-b62a-4da9-9d5f-3e5c1e561e6b
---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7289d7f..14c4270 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "animalcrossingwebapp",
-  "version": "0.8.0-alpha",
+  "version": "0.9.0-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "animalcrossingwebapp",
-      "version": "0.8.0-alpha",
+      "version": "0.9.0-beta",
       "license": "ISC",
       "dependencies": {
         "@types/react": "^19.1.10",

From bcaa211cc397cf7bdcf1f8f5d2aab05477a4c00c Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 19:39:36 -0400
Subject: [PATCH 09/28] feat(v0.9 phase 5): restyle CollectibleRow +
 ItemExpandPanel

Rebuilds the collectible row and inline expand panel to match the v0.9
Curator design (monogram glyph, meta line with separators, leaving/new
pills, two-column expand with month grid + stats stack). Wires
data-row-id and a highlightId pulse for the upcoming Phase 6/8 jump-to.

Per-row donate toggle moves into the expand panel (matches the spec).
MonthGrid re-skinned to .ac-monthgrid; category list wraps in .ac-list.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                        |  14 ++
 src/components/ACCanvas.tsx         |  32 ++++-
 src/components/CollectibleRow.tsx   | 208 +++++++++++++++++++---------
 src/components/ItemExpandPanel.tsx  | 118 ++++++----------
 src/components/shared/MonthGrid.tsx |  29 ++--
 src/index.css                       | 169 ++++++++++++++++++++++
 6 files changed, 405 insertions(+), 165 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0284776..4fc589e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,20 @@ All notable changes to this project are documented here.
 - **Reset donations is disabled** when there's no active town, instead of being hidden — keeps the Danger zone shape stable across states.
 - **Settings is a top-level route** (`/settings`) rather than nested under `/town/:townId/settings`. The settings page is a property of the app, not the town — and a user mid-reset-everything wouldn't have an active town to nest under.
 
+### Added — Phase 5: CollectibleRow + ItemExpandPanel restyle
+- **`CollectibleRow`** (`src/components/CollectibleRow.tsx`) — rebuilt to match the v0.9 design. Replaces icon tile with a category-tinted **monogram glyph** (32×32, 1.5px border, Fraunces initials). Donated state fills the glyph with the chip color and inverts text. Donated rows strike through the name and add a `●` accent checkmark. Meta line uses `·` separators with category-specific bits (habitat for fish, part for fossils, shadow for sea, italic `basedOn` for art) and a tabular bells value. Renders `Leaving soon` (warn pill) or `New this month` (accent pill) per current-month wrap logic, plus an active-hours pill for sea creatures and an animated chevron. Stamps `data-row-id={item.id}` so jump-to logic can locate it. Accepts new `highlighted`, `currentMonth`, `hemisphere` props.
+- **`ItemExpandPanel`** (`src/components/ItemExpandPanel.tsx`) — rebuilt as a two-column grid (`1fr 240px`, padded so the left column aligns with the row text after the glyph). Left column is the 12-cell `MonthGrid` with current-month highlight; right column stacks `bells · sell value`, optional `shadow size` and `active hours`, optional notes block, and the donate / undonate button at the bottom. Donate now lives only inside the panel — the row no longer shows a separate `DonateToggle`.
+- **`MonthGrid`** (`src/components/shared/MonthGrid.tsx`) — re-skinned to use `.ac-monthgrid` / `.ac-monthcell` (12-column grid, square cells, accent-soft fill for available months, inset accent ring for the current month). Now accepts a `current` prop.
+- **Scroll-to + highlight wiring** — `ACCanvas` owns `highlightId` state plus an effect that, on change, expands the matching row, schedules a `scrollIntoView({ behavior: 'smooth', block: 'center' })` on the next animation frame, and clears the state after the 1.4s pulse so re-jumping retriggers the effect (Decision 10). Phase 6 (`HomeTab` shelves) and Phase 8 (`GlobalSearchDropdown`) wire callers to the setter; the state shell is in place.
+- **Phase 5 CSS** appended to `src/index.css`: `.ac-row`, `.ac-row-main`, `.ac-row-expanded`, `.ac-row-donated`, `.ac-row-pulse` + `@keyframes ac-row-pulse`, `.ac-glyph`, `.ac-row-text`, `.ac-row-name`, `.ac-row-checkmark`, `.ac-row-meta`, `.ac-row-meta-bit`, `.ac-row-meta-italic`, `.ac-row-meta-bells`, `.ac-row-side`, `.ac-row-time`, `.ac-chevron`, `.ac-pill` + `.ac-pill-warn` / `.ac-pill-accent`, `.ac-expand`, `.ac-expand-section`, `.ac-expand-label`, `.ac-monthgrid`, `.ac-monthcell` + states, `.ac-expand-side`, `.ac-stat`, `.ac-stat-num`, `.ac-stat-num-text`, `.ac-stat-label`, `.ac-note`, `.ac-donate-btn` + `.ac-donate-btn-on`, plus a 980px breakpoint that collapses the expand panel to a single column.
+- Category list now wraps rows in a single `.ac-list` card (one rounded surface with internal dividers) instead of free-floating bordered rows.
+
+### Decisions — Phase 5
+- **`highlightId` state lives in `ACCanvas`, not `App`.** The plan/spec says "App owns highlightId," but `HomeTab`, the search results, and the category lists are all rendered inside `ACCanvas` and there is no Phase 5 caller above it. Keeping the state in `ACCanvas` keeps the wiring local; promoting it to `App` is cheap and can happen in Phase 6/8 if a caller above the router outlet ever needs it.
+- **Donate / undonate is panel-only.** The design's row no longer has its own donate button — toggling moves into the expand panel, matching the v0.9.2 mockup. The row's `onToggle` prop is kept (optional) for back-compat with `GlobalSearchResults`, which Phase 8 will replace.
+- **Time pill is sea-only.** The design's `item.time` field exists on sea creatures in our schema (Fish/Bug have `hours: number[]`, not a formatted string). Wiring fish/bug time displays would need a formatter — out of scope for Phase 5; revisit alongside `hours` rendering in v0.9.x.
+- **Shadow size shown for sea creatures only**, not fish — our `Fish` type has no `shadow` field, so issue #59 (display shadow size) is partially addressed for sea creatures via the new stats stack but does not change fish rendering. Issue stays open for fish-specific shadow data work.
+
 ### Added — Phase 4: TownManager drawer
 - **`TownManager` component** (`src/components/TownManager.tsx`) — right-side drawer (420px) that mounts at the layout level in `App.tsx`, so it overlays every route (home, category tabs, settings) without z-index or `overflow-hidden` issues. Below 720px it renders as a bottom sheet. Contains: the list of towns with active-town indicator, inline row edit (name + hemisphere only), a `+ New town` form (name + game + hemisphere), and per-row delete with native `confirm()` guard.
 - **`useUIStore`** (`src/lib/uiStore.ts`) — small non-persisted Zustand store for transient UI state (`townManagerOpen`, `townManagerForceCreate`). Exposes `openTownManager(forceCreate?)` and `closeTownManager()`.
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index aeb26a8..eece5ee 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -97,6 +97,7 @@ export default function ACCanvas() {
     category: CategoryId;
   } | null>(null);
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [highlightId, setHighlightId] = useState<string | null>(null);
 
   const { data, loading, loadError, reload } = useMuseumData(
     activeTown?.gameId ?? 'ACGCN'
@@ -141,6 +142,26 @@ export default function ACCanvas() {
     setSelected(null);
   }, [activeTab]);
 
+  // Scroll-to + highlight on jump (Decision 10).
+  // When highlightId changes, expand the matching row, scroll it into view,
+  // and let the .ac-row-pulse keyframe play. Clear after the animation duration
+  // so re-jumping to the same id retriggers the pulse.
+  useEffect(() => {
+    if (!highlightId) return;
+    setExpandedId(highlightId);
+    const raf = requestAnimationFrame(() => {
+      const el = document.querySelector(
+        `[data-row-id="${CSS.escape(highlightId)}"]`
+      );
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    });
+    const t = window.setTimeout(() => setHighlightId(null), 1400);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.clearTimeout(t);
+    };
+  }, [highlightId]);
+
   const activeCat: CategoryId | null =
     activeTab !== 'home' &&
     activeTab !== 'activity' &&
@@ -289,14 +310,13 @@ export default function ACCanvas() {
                     setQuery={setQuery}
                     placeholder={`Search ${catLabel.toLowerCase()}…`}
                   />
-                  <div className="space-y-3">
+                  <div className="ac-list">
                     {filtered.map(item => (
-                      <div key={item.id}>
+                      <React.Fragment key={item.id}>
                         <CollectibleRow
                           item={item}
                           category={activeCat!}
                           checked={!!activeTownDonated[item.id]}
-                          onToggle={() => toggle(item.id)}
                           onClick={() => {
                             if (activeCat === 'art') {
                               setSelected({ item, category: activeCat! });
@@ -311,7 +331,9 @@ export default function ACCanvas() {
                               ? expandedId === item.id
                               : undefined
                           }
+                          highlighted={highlightId === item.id}
                           hemisphere={activeTown?.hemisphere ?? 'NH'}
+                          currentMonth={new Date().getMonth() + 1}
                         />
                         {activeCat !== 'art' && expandedId === item.id && (
                           <ItemExpandPanel
@@ -320,9 +342,11 @@ export default function ACCanvas() {
                             checked={!!activeTownDonated[item.id]}
                             donatedAt={activeTownDonatedAt[item.id]}
                             onToggle={() => toggle(item.id)}
+                            hemisphere={activeTown?.hemisphere ?? 'NH'}
+                            currentMonth={new Date().getMonth() + 1}
                           />
                         )}
-                      </div>
+                      </React.Fragment>
                     ))}
                     {filtered.length === 0 && (
                       <EmptyState
diff --git a/src/components/CollectibleRow.tsx b/src/components/CollectibleRow.tsx
index b1fe18d..3426a36 100644
--- a/src/components/CollectibleRow.tsx
+++ b/src/components/CollectibleRow.tsx
@@ -1,105 +1,175 @@
 import React from 'react';
-import { ChevronDown } from 'lucide-react';
-import { CATEGORY_META } from '../lib/categoryMeta';
-import { HabitatChip } from './shared/HabitatChip';
-import { DonateToggle } from './shared/DonateToggle';
 import {
   displayName,
-  rowSubtitle,
   itemBells,
   itemMonths,
-  itemNotes,
+  isFish,
+  isFossil,
+  isArtPiece,
+  isSeaCreature,
   type AnyItem,
 } from '../lib/utils';
 import type { CategoryId } from '../lib/types';
 
+function getInitials(name: string): string {
+  return name
+    .split(/\s|-/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(s => s[0])
+    .join('')
+    .toUpperCase();
+}
+
+function Glyph({
+  name,
+  category,
+  donated,
+}: {
+  name: string;
+  category: CategoryId;
+  donated: boolean;
+}) {
+  const tintVar =
+    category === 'sea_creatures'
+      ? 'var(--chip-sea)'
+      : `var(--chip-${category})`;
+  return (
+    <div
+      className="ac-glyph"
+      style={{
+        background: donated ? tintVar : 'transparent',
+        borderColor: tintVar,
+        color: donated ? 'var(--surface)' : tintVar,
+      }}
+    >
+      <span>{getInitials(name)}</span>
+    </div>
+  );
+}
+
+function metaBits(
+  item: AnyItem,
+  category: CategoryId,
+  bells: number | null
+): { text: string; italic?: boolean; bells?: boolean }[] {
+  const out: { text: string; italic?: boolean; bells?: boolean }[] = [];
+  if (isFish(item) && item.habitat) {
+    out.push({ text: item.habitat.replace('-', ' · ') });
+  }
+  if (isFossil(item) && item.part) {
+    out.push({ text: item.part });
+  }
+  if (isSeaCreature(item) && item.shadow) {
+    out.push({ text: item.shadow });
+  }
+  if (isArtPiece(item) && item.basedOn) {
+    out.push({ text: item.basedOn, italic: true });
+  }
+  if (bells != null) {
+    out.push({ text: `${bells.toLocaleString()} ✦`, bells: true });
+  }
+  return out;
+}
+
 export function CollectibleRow({
   item,
   category,
   checked,
-  onToggle,
   onClick,
   expanded,
+  highlighted,
   hemisphere,
+  currentMonth,
 }: {
   item: AnyItem;
   category: CategoryId;
   checked: boolean;
-  onToggle: () => void;
+  /** Kept for back-compat with callers; toggling now happens from inside the expand panel. */
+  onToggle?: () => void;
   onClick: () => void;
   expanded?: boolean;
+  highlighted?: boolean;
   hemisphere?: 'NH' | 'SH';
+  currentMonth?: number;
 }) {
-  const { Icon } = CATEGORY_META[category];
   const name = displayName(item, category);
-  const subtitle = rowSubtitle(item, category);
   const bells = itemBells(item, category);
   const months = itemMonths(item, category, hemisphere);
-  const notes = itemNotes(item);
+  const cm = currentMonth ?? new Date().getMonth() + 1;
+
+  const hasMonths = !!(months && months.length > 0);
+  const inThisMonth = hasMonths && months!.includes(cm);
+  const next = cm === 12 ? 1 : cm + 1;
+  const prev = cm === 1 ? 12 : cm - 1;
+  const leavingSoon = inThisMonth && !months!.includes(next);
+  const newThisMonth = inThisMonth && !months!.includes(prev);
+
+  const time = isSeaCreature(item) ? item.time : undefined;
+
+  const bits = metaBits(item, category, bells);
+
+  const classes = [
+    'ac-row',
+    expanded ? 'ac-row-expanded' : '',
+    checked ? 'ac-row-donated' : '',
+    highlighted ? 'ac-row-pulse' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="w-full text-left flex items-center gap-3 border px-4 py-3 transition"
-      style={{
-        borderColor: checked ? '#b8dfc8' : '#E7DAC4',
-        backgroundColor: checked ? '#f2faf6' : '#FFFDF6',
-        boxShadow: '0 1px 0 rgba(0,0,0,0.03)',
-        borderRadius: expanded ? '14px 14px 0 0' : '14px',
-      }}
-    >
-      <div
-        className="shrink-0 rounded-xl p-2"
-        style={{ backgroundColor: '#EDE3D0', border: '1px solid #E7DAC4' }}
-        aria-hidden
-      >
-        <Icon className="w-4 h-4" />
-      </div>
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2 flex-wrap">
-          <span
-            className="truncate font-medium text-sm"
-            style={{ color: '#2A2A2A' }}
-          >
-            {name}
-          </span>
-          {category === 'fish' && subtitle && <HabitatChip label={subtitle} />}
+    <div data-row-id={item.id} className={classes}>
+      <button type="button" className="ac-row-main" onClick={onClick}>
+        <Glyph name={name} category={category} donated={checked} />
+        <div className="ac-row-text">
+          <div className="ac-row-name">
+            <span>{name}</span>
+            {checked && (
+              <span className="ac-row-checkmark" aria-label="donated">
+                ●
+              </span>
+            )}
+          </div>
+          {bits.length > 0 && (
+            <div className="ac-row-meta">
+              {bits.map((b, i) => (
+                <span
+                  key={i}
+                  className={[
+                    'ac-row-meta-bit',
+                    b.italic ? 'ac-row-meta-italic' : '',
+                    b.bells ? 'ac-row-meta-bells' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
+                  {b.text}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
-        <div
-          className="text-[12px] mt-0.5 truncate"
-          style={{ color: '#5a4a35' }}
-        >
-          {bells != null
-            ? `${bells.toLocaleString()} Bells`
-            : category === 'art'
-              ? 'Painting'
-              : '—'}
-          {category !== 'fossils' && category !== 'art' && (
-            <span className="ml-2 opacity-60">
-              {months && months.length > 0
-                ? `${months.length} months`
-                : 'Year-round'}
-            </span>
+        <div className="ac-row-side">
+          {leavingSoon && !checked && (
+            <span className="ac-pill ac-pill-warn">Leaving soon</span>
+          )}
+          {newThisMonth && !leavingSoon && !checked && (
+            <span className="ac-pill ac-pill-accent">New this month</span>
+          )}
+          {time && time !== 'all day' && (
+            <span className="ac-row-time">{time}</span>
           )}
-          {category === 'art' && subtitle && (
-            <span className="ml-1 opacity-70">
-              · {subtitle.length > 38 ? subtitle.slice(0, 38) + '…' : subtitle}
+          {expanded !== undefined && (
+            <span
+              className={`ac-chevron ${expanded ? 'ac-chevron-open' : ''}`}
+              aria-hidden
+            >
+              ›
             </span>
           )}
-          {notes && <span className="ml-2 italic opacity-70">{notes}</span>}
         </div>
-      </div>
-      {expanded !== undefined && (
-        <ChevronDown
-          className="w-4 h-4 shrink-0 transition-transform"
-          style={{
-            color: '#9c8a6e',
-            transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
-          }}
-        />
-      )}
-      <DonateToggle checked={checked} onToggle={onToggle} />
-    </button>
+      </button>
+    </div>
   );
 }
diff --git a/src/components/ItemExpandPanel.tsx b/src/components/ItemExpandPanel.tsx
index c0b2531..a0e7cc0 100644
--- a/src/components/ItemExpandPanel.tsx
+++ b/src/components/ItemExpandPanel.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import { CheckCircle2 } from 'lucide-react';
 import { MonthGrid } from './shared/MonthGrid';
-import { HabitatChip } from './shared/HabitatChip';
 import {
   itemBells,
   itemMonths,
   itemNotes,
-  isFish,
+  isSeaCreature,
   formatTimestamp,
   type AnyItem,
 } from '../lib/utils';
@@ -18,105 +16,69 @@ export function ItemExpandPanel({
   checked,
   donatedAt,
   onToggle,
+  hemisphere,
+  currentMonth,
 }: {
   item: AnyItem;
   category: CategoryId;
   checked: boolean;
   donatedAt?: string;
   onToggle: () => void;
+  hemisphere?: 'NH' | 'SH';
+  currentMonth?: number;
 }) {
   const bells = itemBells(item, category);
-  const months = itemMonths(item, category);
-  const notes = itemNotes(item);
-  const habitat = isFish(item) ? item.habitat : undefined;
+  const months = itemMonths(item, category, hemisphere);
+  const notes = itemNotes(item, category);
+  const cm = currentMonth ?? new Date().getMonth() + 1;
+  const shadow = isSeaCreature(item) ? item.shadow : undefined;
+  const time = isSeaCreature(item) ? item.time : undefined;
 
   return (
-    <div
-      className="mx-2 mb-2 rounded-b-[14px] overflow-hidden"
-      style={{
-        backgroundColor: checked ? '#f2faf6' : '#FFFDF6',
-        border: '1px solid',
-        borderTop: 'none',
-        borderColor: checked ? '#b8dfc8' : '#E7DAC4',
-      }}
-    >
-      <div className="px-4 pt-3 pb-4 space-y-3">
-        {/* Bells + Habitat row */}
-        <div className="flex items-center gap-3 flex-wrap">
-          {bells != null && (
-            <div
-              className="flex items-center gap-1.5 rounded-[8px] px-3 py-1.5"
-              style={{
-                backgroundColor: '#F5E9D4',
-                border: '1px solid #E7DAC4',
-              }}
-            >
-              <span
-                className="text-[11px] uppercase tracking-wider opacity-60"
-                style={{ color: '#5a4a35' }}
-              >
-                Value
-              </span>
-              <span
-                className="text-sm font-semibold"
-                style={{ color: '#2A2A2A' }}
-              >
-                {bells.toLocaleString()} Bells
-              </span>
-            </div>
-          )}
-          {habitat && <HabitatChip label={habitat} />}
+    <div className="ac-expand">
+      {months && months.length > 0 && (
+        <div className="ac-expand-section">
+          <div className="ac-expand-label">Available in</div>
+          <MonthGrid months={months} current={cm} />
         </div>
-
-        {/* Month availability grid */}
-        {category !== 'fossils' && (
-          <div>
-            <div
-              className="text-[11px] uppercase tracking-wider opacity-60 mb-2"
-              style={{ color: '#5a4a35' }}
-            >
-              {months && months.length > 0 ? 'Available' : 'Year-round'}
-            </div>
-            <MonthGrid months={months} />
+      )}
+      <div className="ac-expand-side">
+        {bells != null && (
+          <div className="ac-stat">
+            <div className="ac-stat-num">{bells.toLocaleString()}</div>
+            <div className="ac-stat-label">bells · sell value</div>
           </div>
         )}
-
-        {/* Notes */}
-        {notes && (
-          <div
-            className="rounded-[8px] px-3 py-2 italic text-xs"
-            style={{
-              backgroundColor: '#fff8ee',
-              border: '1px solid #E7DAC4',
-              color: '#5a4a35',
-            }}
-          >
-            {notes}
+        {shadow && (
+          <div className="ac-stat">
+            <div className="ac-stat-num ac-stat-num-text">{shadow}</div>
+            <div className="ac-stat-label">shadow size</div>
           </div>
         )}
-
-        {/* Donation timestamp */}
+        {time && (
+          <div className="ac-stat">
+            <div className="ac-stat-num ac-stat-num-text">{time}</div>
+            <div className="ac-stat-label">active hours</div>
+          </div>
+        )}
+        {notes && <div className="ac-note">{notes}</div>}
         {checked && donatedAt && (
-          <div className="text-xs" style={{ color: '#2A7A52' }}>
-            Donated {formatTimestamp(donatedAt)}
+          <div className="ac-stat">
+            <div className="ac-stat-num ac-stat-num-text">
+              {formatTimestamp(donatedAt)}
+            </div>
+            <div className="ac-stat-label">donated</div>
           </div>
         )}
-
-        {/* Donate toggle button */}
         <button
+          type="button"
+          className={`ac-donate-btn ${checked ? 'ac-donate-btn-on' : ''}`}
           onClick={e => {
             e.stopPropagation();
             onToggle();
           }}
-          className="w-full flex items-center justify-center gap-2 py-2.5 rounded-[10px] font-medium text-sm transition"
-          style={{
-            backgroundColor: checked ? '#EDE3D0' : '#3CA370',
-            color: checked ? '#2A2A2A' : '#fff',
-            border: '1px solid #E7DAC4',
-          }}
         >
-          {checked && <CheckCircle2 className="w-4 h-4" />}
-          {checked ? 'Remove from Donated' : 'Mark as Donated'}
+          {checked ? 'Donated ✓ — undonate' : 'Mark as donated'}
         </button>
       </div>
     </div>
diff --git a/src/components/shared/MonthGrid.tsx b/src/components/shared/MonthGrid.tsx
index f062b69..863031d 100644
--- a/src/components/shared/MonthGrid.tsx
+++ b/src/components/shared/MonthGrid.tsx
@@ -1,26 +1,27 @@
 import React from 'react';
 import { MONTH_NAMES } from '../../lib/constants';
 
-export function MonthGrid({ months }: { months?: number[] }) {
+export function MonthGrid({
+  months,
+  current,
+}: {
+  months?: number[];
+  current?: number;
+}) {
   return (
-    <div className="grid grid-cols-6 gap-1.5">
+    <div className="ac-monthgrid">
       {MONTH_NAMES.map((m, i) => {
-        const active = !months || months.includes(i + 1);
+        const idx = i + 1;
+        const on = !months || months.includes(idx);
+        const here = current === idx;
         return (
           <div
             key={m}
-            className="flex items-center justify-center rounded-[6px] py-1.5"
-            style={{
-              backgroundColor: active ? '#3CA370' : '#EDE3D0',
-              opacity: active ? 1 : 0.45,
-            }}
+            className={['ac-monthcell', on ? 'on' : '', here ? 'here' : '']
+              .filter(Boolean)
+              .join(' ')}
           >
-            <span
-              className="text-[10px] font-semibold"
-              style={{ color: active ? '#fff' : '#5a4a35' }}
-            >
-              {m}
-            </span>
+            <span className="ac-monthcell-label">{m}</span>
           </div>
         );
       })}
diff --git a/src/index.css b/src/index.css
index f04f396..4b4554a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -599,3 +599,172 @@
   }
   @keyframes ac-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
 }
+
+/* ── Phase 5: Item rows + expand panel ── */
+.ac-row { border-bottom: 1px solid var(--border); }
+.ac-row:last-child { border-bottom: none; }
+
+.ac-row-pulse > .ac-row-main { animation: ac-row-pulse 1.4s ease-out; }
+@keyframes ac-row-pulse {
+  0%   { background: var(--accent-soft); }
+  60%  { background: color-mix(in oklch, var(--accent) 16%, transparent); }
+  100% { background: var(--surface-alt); }
+}
+
+.ac-row-main {
+  display: flex; gap: 14px; align-items: center;
+  width: 100%;
+  padding: 12px 18px;
+  text-align: left;
+  background: transparent;
+  transition: background 0.12s;
+  cursor: pointer;
+}
+.ac-row-main:hover { background: var(--surface-alt); }
+.ac-row-expanded > .ac-row-main { background: var(--surface-alt); }
+.ac-row-donated .ac-row-name { color: var(--ink-muted); }
+.ac-row-donated .ac-row-name span:first-child {
+  text-decoration: line-through;
+  text-decoration-color: var(--border-strong);
+  text-decoration-thickness: 1px;
+}
+
+.ac-glyph {
+  width: 32px; height: 32px;
+  border: 1.5px solid;
+  border-radius: 8px;
+  display: grid; place-items: center;
+  font-family: var(--font-display);
+  font-size: 11px; font-weight: 500;
+  flex: none;
+}
+
+.ac-row-text { flex: 1; min-width: 0; }
+.ac-row-name {
+  display: flex; align-items: center; gap: 8px;
+  font-weight: 500;
+  color: var(--ink);
+}
+.ac-row-checkmark { color: var(--accent); font-size: 8px; }
+.ac-row-meta {
+  display: flex; gap: 0; font-size: 12px; color: var(--ink-muted);
+  margin-top: 2px;
+  flex-wrap: wrap;
+}
+.ac-row-meta-bit { text-transform: capitalize; }
+.ac-row-meta-bit:not(:last-child)::after {
+  content: "·";
+  margin: 0 8px;
+  color: var(--border-strong);
+}
+.ac-row-meta-italic { font-style: italic; font-family: var(--font-display); text-transform: none; }
+.ac-row-meta-bells {
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+  text-transform: none;
+}
+
+.ac-row-side { display: flex; align-items: center; gap: 10px; flex: none; }
+.ac-row-time { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-chevron {
+  color: var(--ink-muted);
+  font-size: 18px;
+  line-height: 1;
+  transition: transform 0.18s, color 0.18s;
+  display: inline-block;
+}
+.ac-chevron-open { transform: rotate(90deg); color: var(--ink); }
+
+/* Pills */
+.ac-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.ac-pill-warn { background: var(--warn-soft); color: var(--warn); }
+.ac-pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
+
+/* Expand panel */
+.ac-expand {
+  display: grid;
+  grid-template-columns: 1fr 240px;
+  gap: 28px;
+  padding: 4px 18px 22px 64px;
+  background: var(--surface-alt);
+  border-top: 1px solid var(--border);
+}
+.ac-expand-label {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--ink-muted); margin-bottom: 10px; margin-top: 14px;
+}
+
+.ac-monthgrid {
+  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
+}
+.ac-monthcell {
+  aspect-ratio: 1;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  display: grid; place-items: center;
+  position: relative;
+}
+.ac-monthcell-label {
+  font-size: 10px; color: var(--ink-muted);
+  font-family: var(--font-display);
+}
+.ac-monthcell.on { background: var(--accent-soft); border-color: var(--accent); }
+.ac-monthcell.on .ac-monthcell-label { color: var(--accent-ink); }
+.ac-monthcell.here { box-shadow: inset 0 0 0 1.5px var(--accent); }
+.ac-monthcell.here .ac-monthcell-label { font-weight: 600; }
+
+.ac-expand-side {
+  display: flex; flex-direction: column; gap: 10px;
+  padding-top: 14px;
+}
+.ac-stat { display: flex; flex-direction: column; gap: 1px; }
+.ac-stat-num {
+  font-family: var(--font-display);
+  font-size: 22px; font-weight: 500;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+}
+.ac-stat-num-text { font-size: 16px; font-variant-numeric: normal; }
+.ac-stat-label {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--ink-muted);
+}
+.ac-note {
+  font-size: 12px; color: var(--ink-soft); font-style: italic;
+  font-family: var(--font-display);
+  padding: 8px 10px;
+  background: var(--surface);
+  border-left: 2px solid var(--accent);
+  border-radius: 4px;
+}
+.ac-donate-btn {
+  margin-top: auto;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--surface);
+  font-weight: 500;
+  font-size: 13px;
+  border: 1px solid transparent;
+  transition: opacity 0.12s, background 0.12s;
+  cursor: pointer;
+}
+.ac-donate-btn:hover { opacity: 0.88; }
+.ac-donate-btn-on {
+  background: var(--surface);
+  color: var(--accent-ink);
+  border-color: var(--border-strong);
+}
+
+@media (max-width: 980px) {
+  .ac-expand { grid-template-columns: 1fr; padding-left: 18px; gap: 14px; }
+}

From b75b1f1e09aefaf0ca27f1130b93d45a15e2a0fb Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 19:56:54 -0400
Subject: [PATCH 10/28] fix(a11y): announce donated marker via role="img"

A bare <span> with aria-label is ignored by screen readers. Adding
role="img" lets the implicit name surface for assistive tech.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/CollectibleRow.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/CollectibleRow.tsx b/src/components/CollectibleRow.tsx
index 3426a36..fd1198d 100644
--- a/src/components/CollectibleRow.tsx
+++ b/src/components/CollectibleRow.tsx
@@ -126,7 +126,11 @@ export function CollectibleRow({
           <div className="ac-row-name">
             <span>{name}</span>
             {checked && (
-              <span className="ac-row-checkmark" aria-label="donated">
+              <span
+                className="ac-row-checkmark"
+                role="img"
+                aria-label="donated"
+              >
                 ●
               </span>
             )}

From 52870f7e501c36ad9e47faeed287048428c2d6d4 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 19:56:57 -0400
Subject: [PATCH 11/28] fix(sea-creatures): drop duplicate time string from
 itemNotes

ItemExpandPanel already renders sea-creature time in its own 'active
hours' stat. Returning it from itemNotes caused the same string to
appear twice in the row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/utils.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 041e8f5..e7be6dd 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -74,8 +74,7 @@ export function itemNotes(
   item: AnyItem,
   category?: CategoryId
 ): string | undefined {
-  if (category === 'sea_creatures' || isSeaCreature(item))
-    return (item as SeaCreature).time;
+  if (category === 'sea_creatures' || isSeaCreature(item)) return undefined;
   return isFish(item) ? item.notes : undefined;
 }
 

From 9fc865c722a32e52899259105446f315ea3a85e5 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 19:57:00 -0400
Subject: [PATCH 12/28] fix(css): add .ac-list card, focus ring, drop double
 divider, collapse expand panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add the missing .ac-list rule referenced by ACCanvas (single rounded
  surface; rows still divided by .ac-row border-bottom).
- Add :focus-visible outline on .ac-row-main so keyboard users see focus.
- Remove .ac-expand border-top — .ac-row already draws the seam, the
  pair was rendering as a 2px line.
- When months are absent (fossils, art), collapse .ac-expand to a
  single column instead of leaving the side panel orphaned beside an
  empty 240px slot.
- Add a minimal .ac-expand-section rule so the wrapper has a defined
  min-width inside the grid.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/ItemExpandPanel.tsx |  8 +++++---
 src/index.css                      | 15 ++++++++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ItemExpandPanel.tsx b/src/components/ItemExpandPanel.tsx
index a0e7cc0..096a9b9 100644
--- a/src/components/ItemExpandPanel.tsx
+++ b/src/components/ItemExpandPanel.tsx
@@ -34,12 +34,14 @@ export function ItemExpandPanel({
   const shadow = isSeaCreature(item) ? item.shadow : undefined;
   const time = isSeaCreature(item) ? item.time : undefined;
 
+  const hasMonths = !!(months && months.length > 0);
+
   return (
-    <div className="ac-expand">
-      {months && months.length > 0 && (
+    <div className={`ac-expand${hasMonths ? '' : ' ac-expand-no-months'}`}>
+      {hasMonths && (
         <div className="ac-expand-section">
           <div className="ac-expand-label">Available in</div>
-          <MonthGrid months={months} current={cm} />
+          <MonthGrid months={months!} current={cm} />
         </div>
       )}
       <div className="ac-expand-side">
diff --git a/src/index.css b/src/index.css
index 4b4554a..489bbe3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -601,6 +601,13 @@
 }
 
 /* ── Phase 5: Item rows + expand panel ── */
+.ac-list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+
 .ac-row { border-bottom: 1px solid var(--border); }
 .ac-row:last-child { border-bottom: none; }
 
@@ -621,6 +628,11 @@
   cursor: pointer;
 }
 .ac-row-main:hover { background: var(--surface-alt); }
+.ac-row-main:focus { outline: none; }
+.ac-row-main:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
 .ac-row-expanded > .ac-row-main { background: var(--surface-alt); }
 .ac-row-donated .ac-row-name { color: var(--ink-muted); }
 .ac-row-donated .ac-row-name span:first-child {
@@ -695,8 +707,9 @@
   gap: 28px;
   padding: 4px 18px 22px 64px;
   background: var(--surface-alt);
-  border-top: 1px solid var(--border);
 }
+.ac-expand-no-months { grid-template-columns: 1fr; }
+.ac-expand-section { min-width: 0; }
 .ac-expand-label {
   font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
   color: var(--ink-muted); margin-bottom: 10px; margin-top: 14px;

From 58567ba2d5adab8827194ecdd48a75d02548d3d4 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 20:31:58 -0400
Subject: [PATCH 13/28] fix(sea-creatures): preserve time in DetailModal; drop
 dead onToggle prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Round 1 made itemNotes() return undefined for sea creatures, which broke
DetailModal's notes block (it calls itemNotes(item) for the global-search
detail view). Restore itemNotes' "give me the notes string for this item"
contract — return time for sea creatures — and push the duplicate-render
suppression into ItemExpandPanel where the duplicate actually exists
(time is already rendered as the "active hours" stat).

Also drop the dead onToggle prop from CollectibleRow and the
GlobalSearchResults passthrough. Bea confirmed "click into modal is fine
for now" — no inline donation toggle from global search.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/ACCanvas.tsx                   | 1 -
 src/components/CollectibleRow.tsx             | 2 --
 src/components/ItemExpandPanel.tsx            | 4 +++-
 src/components/search/GlobalSearchResults.tsx | 3 ---
 src/lib/utils.ts                              | 7 ++-----
 5 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index eece5ee..ebb98d6 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -290,7 +290,6 @@ export default function ACCanvas() {
                     results={globalResults}
                     query={globalQuery}
                     donated={activeTownDonated}
-                    onToggle={id => toggle(id)}
                     onSelect={(item, category) => {
                       if (globalQuery.trim())
                         pushRecentSearch(globalQuery.trim());
diff --git a/src/components/CollectibleRow.tsx b/src/components/CollectibleRow.tsx
index fd1198d..a88c378 100644
--- a/src/components/CollectibleRow.tsx
+++ b/src/components/CollectibleRow.tsx
@@ -85,8 +85,6 @@ export function CollectibleRow({
   item: AnyItem;
   category: CategoryId;
   checked: boolean;
-  /** Kept for back-compat with callers; toggling now happens from inside the expand panel. */
-  onToggle?: () => void;
   onClick: () => void;
   expanded?: boolean;
   highlighted?: boolean;
diff --git a/src/components/ItemExpandPanel.tsx b/src/components/ItemExpandPanel.tsx
index 096a9b9..5ec64ac 100644
--- a/src/components/ItemExpandPanel.tsx
+++ b/src/components/ItemExpandPanel.tsx
@@ -29,7 +29,9 @@ export function ItemExpandPanel({
 }) {
   const bells = itemBells(item, category);
   const months = itemMonths(item, category, hemisphere);
-  const notes = itemNotes(item, category);
+  // Sea creatures render `time` as the "active hours" stat below; suppress the
+  // notes block to avoid showing the same string twice.
+  const notes = isSeaCreature(item) ? undefined : itemNotes(item);
   const cm = currentMonth ?? new Date().getMonth() + 1;
   const shadow = isSeaCreature(item) ? item.shadow : undefined;
   const time = isSeaCreature(item) ? item.time : undefined;
diff --git a/src/components/search/GlobalSearchResults.tsx b/src/components/search/GlobalSearchResults.tsx
index 6cc4fcf..3d98626 100644
--- a/src/components/search/GlobalSearchResults.tsx
+++ b/src/components/search/GlobalSearchResults.tsx
@@ -10,13 +10,11 @@ export function GlobalSearchResults({
   results,
   query,
   donated,
-  onToggle,
   onSelect,
 }: {
   results: Record<CategoryId, AnyItem[]> | null;
   query: string;
   donated: Record<string, boolean>;
-  onToggle: (id: string) => void;
   onSelect: (item: AnyItem, category: CategoryId) => void;
 }) {
   if (!results) {
@@ -61,7 +59,6 @@ export function GlobalSearchResults({
                   item={item}
                   category={cat}
                   checked={!!donated[item.id]}
-                  onToggle={() => onToggle(item.id)}
                   onClick={() => onSelect(item, cat)}
                 />
               ))}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e7be6dd..427afd7 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -70,11 +70,8 @@ export function itemMonths(
   return critter.months;
 }
 
-export function itemNotes(
-  item: AnyItem,
-  category?: CategoryId
-): string | undefined {
-  if (category === 'sea_creatures' || isSeaCreature(item)) return undefined;
+export function itemNotes(item: AnyItem): string | undefined {
+  if (isSeaCreature(item)) return item.time;
   return isFish(item) ? item.notes : undefined;
 }
 

From c430e0d9f2e030400fcdbed7d11351210bb4bde8 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 20:43:58 -0400
Subject: [PATCH 14/28] =?UTF-8?q?feat(home):=20v0.9=20Phase=206=20?=
 =?UTF-8?q?=E2=80=94=20rebuilt=20HomeTab=20+=20ProgressMeter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds segmented ProgressMeter (4 or 5 segments by gameId), rebuilt HomeTab
with hero stat + month strip + leaving-soon / just-arrived shelves +
latest donations card, and useJumpToRow hook wiring shelf/recent cards
into ACCanvas's scroll-to + pulse highlight effect.

Honors Locked Decisions 4 (sea in ProgressMeter for ACNL/ACNH) and 10
(scrollIntoView + .ac-row-pulse on jump). No version bump.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                         |  13 +
 CLAUDE.md                            |  10 +-
 docs/v0.9-plan.md                    |   2 +-
 src/components/ACCanvas.tsx          |   4 +-
 src/components/HomeTab.tsx           | 541 ++++++++++++++-------------
 src/components/ProgressMeter.test.ts |  43 +++
 src/components/ProgressMeter.tsx     |  72 ++++
 src/components/progressMeterUtils.ts |  15 +
 src/hooks/useJumpToRow.ts            |  33 ++
 src/index.css                        | 219 +++++++++++
 10 files changed, 693 insertions(+), 259 deletions(-)
 create mode 100644 src/components/ProgressMeter.test.ts
 create mode 100644 src/components/ProgressMeter.tsx
 create mode 100644 src/components/progressMeterUtils.ts
 create mode 100644 src/hooks/useJumpToRow.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4fc589e..5f48ded 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,19 @@ All notable changes to this project are documented here.
 
 ## [Unreleased] — v0.9.0-beta (in progress)
 
+### Added — Phase 6: HomeTab + ProgressMeter
+- **`ProgressMeter` component** (`src/components/ProgressMeter.tsx`) — segmented donation progress bar. 4 segments (fish/bugs/fossils/art) for ACGCN/ACWW/ACCF; 5 segments (adds sea) for ACNL/ACNH. Each segment uses its category-tinted Meadow chip token (`--chip-fish`/`--chip-bugs`/`--chip-fossils`/`--chip-art`/`--chip-sea`) and exposes a per-segment aria-label like "Fish: 12 of 40 donated". Pure helper `segmentsForGame` extracted to `src/components/progressMeterUtils.ts` and unit-tested.
+- **`HomeTab` rebuilt** (`src/components/HomeTab.tsx`) — new structure per v0.9 design: hero stat with italic Fraunces accent number ("X creatures still to donate this month"), warn-italic aside ("N leaving soon"), `ProgressMeter` directly underneath, 12-cell month strip with current-month highlight, "Leaving end of {month}" warn-toned shelf, "Just arrived" accent-toned shelf, and a "Latest donations" card. Sea creatures included in shelves and progress for ACNL/ACNH towns. Each shelf card / latest-donations row click fires `jumpTo(category, id)` which sets the active tab and `highlightId` so the matching row scrolls into view and pulses (Decision 10). Hero falls back to "X of Y donated" when the active game has no seasonal categories.
+- **`useJumpToRow` hook** (`src/hooks/useJumpToRow.ts`) — reusable navigation helper. Pushes `/town/:townId/:tab` and sets `highlightId` on the next animation frame; ACCanvas's existing scroll-to-and-pulse effect picks up the change. Will also be wired into `GlobalSearchDropdown` in Phase 8.
+- **Phase 6 CSS** appended to `src/index.css` (`.ac-meter` / `.ac-meter-seg` / `.ac-meter-track` / `.ac-meter-fill` + `.ac-meter-5` responsive modifier, `.ac-home`, `.ac-hero` + `.ac-hero-headline` / `.ac-hero-aside`, `.ac-eyebrow` + `.ac-eyebrow-warn` / `.ac-eyebrow-accent`, `.ac-month-strip` / `.ac-month-cell`, `.ac-shelf-head` / `.ac-shelf-title` / `.ac-shelf-grid` / `.ac-shelf-card` / `.ac-shelf-glyph`, `.ac-month-dots`, `.ac-recent-card` / `.ac-recent-row`). 5-segment ProgressMeter drops fractions between 980-1180px and wraps to 2 rows ≤980px.
+
+### Decisions — Phase 6
+- **Seasonal UI gated on at least one seasonal category having data.** Fish + bugs always seasonal; sea creatures added to the list only for ACNL/ACNH where we ship hemisphere-aware month data. ACGCN/ACWW/ACCF still get the seasonal UI (fish + bugs).
+- **`ProgressMeter` lives on the HomeTab hero, not the sidebar.** The plan allows either; placing it directly under the hero stat keeps the bar near the headline number it relates to and avoids crowding the sidebar's nav counts (which already give per-category progress).
+- **Hero copy adapts to game.** When there are no seasonal categories with data the hero falls back to "{donated} of {total} donated." rather than showing a "0 creatures still to donate" line that would read as empty-state success when it's actually a coverage gap.
+- **Shelves cap at 6 items per shelf.** A horizontal-scroll variant was considered but the v0.9 design uses a 3-column grid; we keep the same grid and slice to a sensible number to avoid an unbounded vertical wall on towns with many in-season items.
+- **`jumpTo` clears `highlightId` to null before re-setting on the next frame.** Without the clear, jumping to a row that's already the highlight target wouldn't retrigger the pulse — the effect dependency is the id and React would batch a same-id setter into a no-op.
+
 ### Added — Phase 1: tokens + fonts
 - **Meadow design tokens** — full palette added to `src/index.css` `@theme` block as CSS custom properties (`--bg`, `--surface`, `--surface-alt`, `--ink`, `--ink-soft`, `--ink-muted`, `--border`, `--border-strong`, `--accent`, `--accent-soft`, `--accent-ink`, `--warn`, `--warn-soft`, `--chip-fish`, `--chip-bugs`, `--chip-fossils`, `--chip-art`, `--chip-sea`). Mirrored in `src/lib/colors.ts` as the new `meadow` export.
 - **Fraunces** (variable, opsz 9..144, weights 400/500/600 + italic 400/500) and **Inter** (400/500/600/700) loaded via Google Fonts in `index.html` and `src/index.css`. Registered as `--font-display` and `--font-sans` in `@theme`. New `fontStacks` export in `src/lib/colors.ts`.
diff --git a/CLAUDE.md b/CLAUDE.md
index 5fcfaef..d0d3fc3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -51,8 +51,12 @@ src/
   components/
     ACCanvas.tsx            # Orchestration shell ~298 lines. Mounts active tab view,
                             # wires modals and global search. Decomposition complete (v0.7).
-    HomeTab.tsx             # Home screen: seasonal availability, leaving-soon,
-                            # progress cards, recent activity
+    HomeTab.tsx             # v0.9 Phase 6: rebuilt — hero stat + ProgressMeter,
+                            # month strip, leaving-soon shelf, just-arrived shelf,
+                            # latest donations. Cards fire jumpTo (scroll + pulse).
+    ProgressMeter.tsx       # v0.9 Phase 6: segmented progress bar (4 or 5 segments
+                            # gated by gameId; sea segment for ACNL/ACNH).
+    progressMeterUtils.ts   # Pure helper segmentsForGame (unit-tested).
     CollectibleRow.tsx      # Single item row with donate toggle; shows chevron + rounded-top when expanded
     ItemExpandPanel.tsx     # Inline accordion panel shown below CollectibleRow for fish/bugs/fossils
     Sidebar.tsx             # v0.9 Phase 2: 280px left sidebar — brand, active town card, NavLink nav with counts, footer (replaces MuseumHeader/TabBar/TownSwitcher)
@@ -84,6 +88,8 @@ src/
     useMuseumData.ts        # Fetches and caches all 4 category JSONs for active town's game
     useSearch.ts            # Search history, click-outside, debounce
     useCategoryStats.ts     # Memoized donated counts per category
+    useJumpToRow.ts         # v0.9 Phase 6: navigate to a category tab + set
+                            # highlightId so ACCanvas scrolls + pulses the target row
   lib/
     store.ts                # Zustand store: towns, donations, activeTownId. persist key 'ac-web' v2.
     bootstrapMigration.ts   # One-time localStorage rename (ac-web:v1 → ac-web), called in main.tsx
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 7949e77..c788f90 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -433,7 +433,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 6 — HomeTab + ProgressMeter
+### Phase 6 — HomeTab + ProgressMeter ✅
 
 **Branch:** `feature/v09-phase-6-home`  
 **Goal:** Rebuild HomeTab with hero + month strip + leaving/new shelves. Ship ProgressMeter with 5-segment support for ACNL/ACNH.
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index ebb98d6..f2d02fb 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -257,7 +257,9 @@ export default function ACCanvas() {
                   donated={activeTownDonated}
                   donatedAt={activeTownDonatedAt}
                   catCounts={catCounts}
-                  onNavigate={v => handleTabChange(v)}
+                  gameId={activeTown?.gameId ?? 'ACGCN'}
+                  hemisphere={activeTown?.hemisphere ?? 'NH'}
+                  setHighlightId={setHighlightId}
                 />
               ) : activeTab === 'analytics' ? (
                 <AnalyticsView
diff --git a/src/components/HomeTab.tsx b/src/components/HomeTab.tsx
index d07c024..43c0a8e 100644
--- a/src/components/HomeTab.tsx
+++ b/src/components/HomeTab.tsx
@@ -1,15 +1,4 @@
-import { useMemo, type ElementType } from 'react';
-import {
-  Fish as FishIcon,
-  Bug,
-  Bone,
-  Palette,
-  Waves,
-  BarChart2,
-  Clock,
-  AlertTriangle,
-  Sparkles,
-} from 'lucide-react';
+import { useMemo } from 'react';
 import type {
   Fish as FishType,
   BugItem,
@@ -17,8 +6,16 @@ import type {
   ArtPiece,
   SeaCreature,
   CategoryId,
+  GameId,
 } from '../lib/types';
-import { displayName, formatRelativeDate, type AnyItem } from '../lib/utils';
+import {
+  displayName,
+  formatRelativeDate,
+  itemMonths,
+  type AnyItem,
+} from '../lib/utils';
+import { ProgressMeter } from './ProgressMeter';
+import { useJumpToRow } from '../hooks/useJumpToRow';
 
 const MONTH_FULL = [
   'January',
@@ -34,21 +31,35 @@ const MONTH_FULL = [
   'November',
   'December',
 ];
-
-const CAT_ICON: Record<CategoryId, ElementType> = {
-  fish: FishIcon,
-  bugs: Bug,
-  fossils: Bone,
-  art: Palette,
-  sea_creatures: Waves,
-};
+const MONTH_SHORT = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
 
 const CAT_LABEL: Record<CategoryId, string> = {
   fish: 'Fish',
   bugs: 'Bugs',
   fossils: 'Fossils',
   art: 'Art',
-  sea_creatures: 'Sea Creatures',
+  sea_creatures: 'Sea',
+};
+
+const CAT_VAR: Record<CategoryId, string> = {
+  fish: 'var(--chip-fish)',
+  bugs: 'var(--chip-bugs)',
+  fossils: 'var(--chip-fossils)',
+  art: 'var(--chip-art)',
+  sea_creatures: 'var(--chip-sea)',
 };
 
 export interface HomeTabProps {
@@ -62,14 +73,23 @@ export interface HomeTabProps {
   donated: Record<string, boolean>;
   donatedAt: Record<string, string>;
   catCounts: Record<CategoryId, number>;
-  onNavigate: (view: CategoryId | 'activity' | 'analytics') => void;
+  gameId: GameId;
+  hemisphere: 'NH' | 'SH';
+  setHighlightId: (id: string | null) => void;
 }
 
-interface AvailItem {
+interface ShelfItem {
   id: string;
   name: string;
-  category: 'fish' | 'bugs';
-  leavingSoon: boolean;
+  category: CategoryId;
+  months: number[];
+  bells: number | null;
+}
+
+function monogram(name: string): string {
+  const parts = name.replace(/[—–-]/g, ' ').trim().split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
 }
 
 export default function HomeTab({
@@ -77,39 +97,98 @@ export default function HomeTab({
   donated,
   donatedAt,
   catCounts,
-  onNavigate,
+  gameId,
+  hemisphere,
+  setHighlightId,
 }: HomeTabProps) {
+  const jumpTo = useJumpToRow(setHighlightId);
   const now = new Date();
   const currentMonth = now.getMonth() + 1;
   const nextMonth = currentMonth === 12 ? 1 : currentMonth + 1;
+  const lastMonth = currentMonth === 1 ? 12 : currentMonth - 1;
   const monthName = MONTH_FULL[currentMonth - 1];
 
-  const available: AvailItem[] = useMemo(() => {
-    const out: AvailItem[] = [];
-    const push = (items: (FishType | BugItem)[], category: 'fish' | 'bugs') => {
+  const seasonalCats: CategoryId[] = useMemo(() => {
+    const cats: CategoryId[] = ['fish', 'bugs'];
+    if (
+      (gameId === 'ACNL' || gameId === 'ACNH') &&
+      data.sea_creatures.length > 0
+    ) {
+      cats.push('sea_creatures');
+    }
+    return cats;
+  }, [gameId, data.sea_creatures.length]);
+
+  const { leavingSoon, justArrived, stillNeeded } = useMemo(() => {
+    const avail: ShelfItem[] = [];
+    const leaving: ShelfItem[] = [];
+    const arrived: ShelfItem[] = [];
+
+    for (const cat of seasonalCats) {
+      const items = (data[cat] as AnyItem[]) ?? [];
       for (const item of items) {
-        if (!item.months?.includes(currentMonth)) continue;
-        if (donated[item.id]) continue;
-        out.push({
+        const months = itemMonths(item, cat, hemisphere);
+        if (!months || !months.includes(currentMonth)) continue;
+        const isDonated = !!donated[item.id];
+        const entry: ShelfItem = {
           id: item.id,
-          name: displayName(item, category),
-          category,
-          leavingSoon: !item.months.includes(nextMonth),
-        });
+          name: displayName(item, cat),
+          category: cat,
+          months,
+          bells:
+            'value' in item
+              ? ((item as FishType | BugItem | SeaCreature).value ?? null)
+              : null,
+        };
+        avail.push(entry);
+        if (isDonated) continue;
+        if (!months.includes(nextMonth)) leaving.push(entry);
+        else if (!months.includes(lastMonth)) arrived.push(entry);
       }
+    }
+
+    const stillNeededCount = avail.filter(a => !donated[a.id]).length;
+
+    const sortByName = (a: ShelfItem, b: ShelfItem) =>
+      a.name.localeCompare(b.name);
+    leaving.sort(sortByName);
+    arrived.sort(sortByName);
+
+    void avail;
+    return {
+      leavingSoon: leaving,
+      justArrived: arrived,
+      stillNeeded: stillNeededCount,
     };
-    push(data.fish, 'fish');
-    push(data.bugs, 'bugs');
-    return out.sort(
-      (a, b) =>
-        Number(b.leavingSoon) - Number(a.leavingSoon) ||
-        a.name.localeCompare(b.name)
-    );
-  }, [data.fish, data.bugs, donated, currentMonth, nextMonth]);
+  }, [
+    data,
+    seasonalCats,
+    currentMonth,
+    nextMonth,
+    lastMonth,
+    donated,
+    hemisphere,
+  ]);
+
+  const totals: Record<CategoryId, number> = {
+    fish: data.fish.length,
+    bugs: data.bugs.length,
+    fossils: data.fossils.length,
+    art: data.art.length,
+    sea_creatures: data.sea_creatures.length,
+  };
 
-  const fishCount = available.filter(a => a.category === 'fish').length;
-  const bugsCount = available.filter(a => a.category === 'bugs').length;
-  const leavingCount = available.filter(a => a.leavingSoon).length;
+  const heroCats: CategoryId[] = useMemo(() => {
+    const cats: CategoryId[] = ['fish', 'bugs', 'fossils'];
+    if (totals.art > 0) cats.push('art');
+    if ((gameId === 'ACNL' || gameId === 'ACNH') && totals.sea_creatures > 0) {
+      cats.push('sea_creatures');
+    }
+    return cats;
+  }, [gameId, totals.art, totals.sea_creatures]);
+
+  const heroDonated = heroCats.reduce((sum, c) => sum + catCounts[c], 0);
+  const heroTotal = heroCats.reduce((sum, c) => sum + totals[c], 0);
 
   const recent = useMemo(() => {
     const nameMap: Record<string, { name: string; category: CategoryId }> = {};
@@ -127,230 +206,182 @@ export default function HomeTab({
       .map(([id, ts]) => ({ id, ts, ...nameMap[id] }))
       .filter(e => e.name)
       .sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime())
-      .slice(0, 3);
+      .slice(0, 6);
   }, [donatedAt, data]);
 
-  const totals: Record<CategoryId, number> = {
-    fish: data.fish.length,
-    bugs: data.bugs.length,
-    fossils: data.fossils.length,
-    art: data.art.length,
-    sea_creatures: data.sea_creatures.length,
-  };
+  const showSeasonalUI = seasonalCats.length > 0;
 
   return (
-    <div className="space-y-4">
-      {/* Hero: Available this month */}
-      <div
-        className="rounded-[16px] border overflow-hidden"
-        style={{ borderColor: '#E7DAC4', backgroundColor: '#FFFDF6' }}
-      >
+    <div className="ac-home">
+      {/* Hero */}
+      <section className="ac-hero">
+        <div className="ac-eyebrow ac-eyebrow-accent">
+          {showSeasonalUI ? `Available in ${monthName}` : `Your museum`}
+        </div>
+        {showSeasonalUI ? (
+          <h1 className="ac-hero-headline">
+            <em>{stillNeeded}</em>{' '}
+            {stillNeeded === 1 ? 'creature' : 'creatures'} still to donate this
+            month.
+            {leavingSoon.length > 0 && (
+              <span className="ac-hero-aside">
+                {leavingSoon.length} leaving soon.
+              </span>
+            )}
+          </h1>
+        ) : (
+          <h1 className="ac-hero-headline">
+            <em>{heroDonated}</em> of {heroTotal} donated.
+          </h1>
+        )}
+        <ProgressMeter gameId={gameId} donated={catCounts} totals={totals} />
+      </section>
+
+      {/* Month strip */}
+      {showSeasonalUI && (
         <div
-          className="px-4 py-3 flex items-center gap-2"
-          style={{
-            background: 'linear-gradient(180deg, #7B5E3B 0%, #6e5234 100%)',
-            color: '#F5E9D4',
-          }}
+          className="ac-month-strip"
+          aria-label="Months of the year, current month highlighted"
         >
-          <Sparkles className="w-4 h-4" />
-          <div className="text-sm font-semibold">Available in {monthName}</div>
+          {MONTH_SHORT.map((m, i) => (
+            <div
+              key={m}
+              className={`ac-month-cell${i + 1 === currentMonth ? ' ac-month-cell-current' : ''}`}
+            >
+              {m}
+            </div>
+          ))}
         </div>
-        <div className="px-4 py-4">
-          {available.length === 0 ? (
-            <div className="text-center py-4">
-              <div className="text-2xl mb-1">🎉</div>
-              <div className="text-sm font-medium" style={{ color: '#2A7A52' }}>
-                You're all caught up for {monthName}!
-              </div>
-              <div
-                className="text-xs mt-1"
-                style={{ color: '#5a4a35', opacity: 0.75 }}
-              >
-                Every fish and bug available this month is already in your
-                museum.
+      )}
+
+      {/* Leaving soon shelf */}
+      {leavingSoon.length > 0 && (
+        <section>
+          <div className="ac-shelf-head">
+            <div>
+              <div className="ac-eyebrow ac-eyebrow-warn">
+                Leaving end of {monthName}
               </div>
+              <h2 className="ac-shelf-title">Catch them while you can</h2>
             </div>
-          ) : (
-            <>
-              <div className="text-sm mb-3" style={{ color: '#2A2A2A' }}>
-                <span className="font-semibold">{fishCount}</span> fish and{' '}
-                <span className="font-semibold">{bugsCount}</span> bugs still to
-                donate this month
-                {leavingCount > 0 && (
-                  <>
-                    {' · '}
-                    <span style={{ color: '#b85c2e' }} className="font-medium">
-                      {leavingCount} leaving soon
-                    </span>
-                  </>
-                )}
-                .
-              </div>
-              <div className="space-y-1.5 max-h-72 overflow-y-auto">
-                {available.map(a => {
-                  const Icon = CAT_ICON[a.category];
-                  return (
-                    <div
-                      key={a.id}
-                      className="flex items-center gap-2.5 rounded-[10px] border px-3 py-2"
-                      style={{
-                        borderColor: a.leavingSoon ? '#f0c8a4' : '#E7DAC4',
-                        backgroundColor: a.leavingSoon ? '#fdf3e8' : '#FDF9F1',
-                      }}
-                    >
-                      <Icon
-                        className="w-4 h-4 shrink-0"
-                        style={{ color: '#7B5E3B' }}
-                      />
-                      <div
-                        className="flex-1 min-w-0 text-sm truncate"
-                        style={{ color: '#2A2A2A' }}
-                      >
-                        {a.name}
-                      </div>
-                      {a.leavingSoon && (
-                        <div
-                          className="flex items-center gap-1 text-[11px] font-medium shrink-0"
-                          style={{ color: '#b85c2e' }}
-                        >
-                          <AlertTriangle className="w-3 h-3" />
-                          Leaving after {monthName}
-                        </div>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
+            <span className="ac-shelf-count">{leavingSoon.length}</span>
+          </div>
+          <ShelfGrid
+            items={leavingSoon}
+            currentMonth={currentMonth}
+            warn
+            onPick={(cat, id) => jumpTo(cat, id)}
+          />
+        </section>
+      )}
+
+      {/* Just arrived shelf */}
+      {justArrived.length > 0 && (
+        <section>
+          <div className="ac-shelf-head">
+            <div>
+              <div className="ac-eyebrow ac-eyebrow-accent">New this month</div>
+              <h2 className="ac-shelf-title">Just arrived</h2>
+            </div>
+            <span className="ac-shelf-count">{justArrived.length}</span>
+          </div>
+          <ShelfGrid
+            items={justArrived}
+            currentMonth={currentMonth}
+            onPick={(cat, id) => jumpTo(cat, id)}
+          />
+        </section>
+      )}
 
-      {/* Per-category progress grid */}
-      <div className="grid grid-cols-2 gap-3">
-        {(['fish', 'bugs', 'fossils', 'art', 'sea_creatures'] as CategoryId[])
-          .filter(cat => totals[cat] > 0)
-          .map(cat => {
-            const Icon = CAT_ICON[cat];
-            const done = catCounts[cat];
-            const total = totals[cat];
-            const pct = total ? Math.round((done / total) * 100) : 0;
-            return (
+      {/* Latest donations */}
+      <section>
+        <div className="ac-shelf-head">
+          <div>
+            <div className="ac-eyebrow">Latest donations</div>
+            <h2 className="ac-shelf-title">Recent activity</h2>
+          </div>
+        </div>
+        <div className="ac-recent-card">
+          {recent.length === 0 ? (
+            <div className="ac-recent-empty">No donations yet.</div>
+          ) : (
+            recent.map(r => (
               <button
-                key={cat}
-                onClick={() => onNavigate(cat)}
-                className="text-left rounded-[14px] border px-4 py-3 transition-colors hover:bg-[#FDF9F1]"
-                style={{ borderColor: '#E7DAC4', backgroundColor: '#FFFDF6' }}
+                key={r.id}
+                className="ac-recent-row"
+                onClick={() => jumpTo(r.category, r.id)}
               >
-                <div className="flex items-center gap-2 mb-1.5">
-                  <Icon className="w-4 h-4" style={{ color: '#7B5E3B' }} />
-                  <div
-                    className="text-sm font-semibold"
-                    style={{ color: '#2A2A2A' }}
-                  >
-                    {CAT_LABEL[cat]}
-                  </div>
-                </div>
-                <div className="text-xs mb-1.5" style={{ color: '#5a4a35' }}>
-                  {done} / {total} donated
-                </div>
-                <div
-                  className="h-1.5 w-full rounded-full overflow-hidden"
-                  style={{ backgroundColor: '#e9dcc3' }}
-                >
-                  <div
-                    className="h-full transition-all duration-500"
-                    style={{ width: `${pct}%`, backgroundColor: '#3CA370' }}
-                  />
-                </div>
+                <span
+                  className="ac-recent-cat-dot"
+                  style={{ backgroundColor: CAT_VAR[r.category] }}
+                  aria-hidden="true"
+                />
+                <span className="ac-recent-name">{r.name}</span>
+                <span className="ac-recent-cat">{CAT_LABEL[r.category]}</span>
+                <span className="ac-recent-time">
+                  {formatRelativeDate(r.ts)}
+                </span>
               </button>
-            );
-          })}
-      </div>
+            ))
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
 
-      {/* Recent activity */}
-      <div
-        className="rounded-[14px] border overflow-hidden"
-        style={{ borderColor: '#E7DAC4', backgroundColor: '#FFFDF6' }}
-      >
-        <div
-          className="px-4 py-2.5 flex items-center justify-between border-b"
-          style={{ borderColor: '#E7DAC4' }}
-        >
-          <div className="flex items-center gap-2">
-            <Clock className="w-4 h-4" style={{ color: '#7B5E3B' }} />
-            <div className="text-sm font-semibold" style={{ color: '#2A2A2A' }}>
-              Recent donations
-            </div>
-          </div>
+function ShelfGrid({
+  items,
+  currentMonth,
+  warn,
+  onPick,
+}: {
+  items: ShelfItem[];
+  currentMonth: number;
+  warn?: boolean;
+  onPick: (category: CategoryId, id: string) => void;
+}) {
+  return (
+    <div className="ac-shelf-grid">
+      {items.slice(0, 6).map(item => {
+        const tint = CAT_VAR[item.category];
+        return (
           <button
-            onClick={() => onNavigate('activity')}
-            className="text-xs font-medium"
-            style={{ color: '#7B5E3B' }}
-          >
-            View all →
-          </button>
-        </div>
-        {recent.length === 0 ? (
-          <div
-            className="px-4 py-5 text-center text-sm"
-            style={{ color: '#5a4a35', opacity: 0.75 }}
+            key={`${item.category}-${item.id}`}
+            className="ac-shelf-card"
+            onClick={() => onPick(item.category, item.id)}
           >
-            No donations yet.
-          </div>
-        ) : (
-          <div className="divide-y" style={{ borderColor: '#E7DAC4' }}>
-            {recent.map(r => {
-              const Icon = CAT_ICON[r.category];
-              return (
-                <div key={r.id} className="px-4 py-2.5 flex items-center gap-3">
-                  <Icon
-                    className="w-4 h-4 shrink-0"
-                    style={{ color: '#7B5E3B' }}
+            <span
+              className="ac-shelf-glyph"
+              style={{ borderColor: tint, color: tint }}
+              aria-hidden="true"
+            >
+              {monogram(item.name)}
+            </span>
+            <span className="ac-shelf-card-body">
+              <span className="ac-shelf-card-name">{item.name}</span>
+              <span className="ac-shelf-card-meta">
+                {item.bells != null
+                  ? `${item.bells.toLocaleString()} ✦`
+                  : CAT_LABEL[item.category]}
+              </span>
+              <span className="ac-month-dots" aria-hidden="true">
+                {Array.from({ length: 12 }, (_, i) => i + 1).map(m => (
+                  <span
+                    key={m}
+                    className={`ac-month-dot${item.months.includes(m) ? ' ac-month-dot-on' : ''}`}
                   />
-                  <div
-                    className="flex-1 min-w-0 text-sm truncate"
-                    style={{ color: '#2A2A2A' }}
-                  >
-                    {r.name}
-                  </div>
-                  <div
-                    className="text-xs shrink-0"
-                    style={{ color: '#5a4a35', opacity: 0.75 }}
-                  >
-                    {formatRelativeDate(r.ts)}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* Stats shortcut */}
-      <button
-        onClick={() => onNavigate('analytics')}
-        className="w-full flex items-center gap-3 rounded-[14px] border px-4 py-3 transition-colors hover:bg-[#FDF9F1]"
-        style={{ borderColor: '#E7DAC4', backgroundColor: '#FFFDF6' }}
-      >
-        <div
-          className="shrink-0 rounded-xl p-2"
-          style={{ backgroundColor: '#EDE3D0', border: '1px solid #E7DAC4' }}
-        >
-          <BarChart2 className="w-4 h-4" style={{ color: '#2A7A52' }} />
-        </div>
-        <div className="flex-1 text-left">
-          <div className="text-sm font-semibold" style={{ color: '#2A2A2A' }}>
-            View full stats
-          </div>
-          <div className="text-xs" style={{ color: '#5a4a35', opacity: 0.75 }}>
-            Progress charts and monthly availability
-          </div>
-        </div>
-        <div className="text-sm" style={{ color: '#7B5E3B' }}>
-          →
-        </div>
-      </button>
+                ))}
+              </span>
+              {warn && (
+                <span className="ac-shelf-card-warn">
+                  ⚠ Last month: {MONTH_SHORT[currentMonth - 1]}
+                </span>
+              )}
+            </span>
+          </button>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/components/ProgressMeter.test.ts b/src/components/ProgressMeter.test.ts
new file mode 100644
index 0000000..068d76c
--- /dev/null
+++ b/src/components/ProgressMeter.test.ts
@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { segmentsForGame } from './progressMeterUtils';
+
+describe('ProgressMeter — segmentsForGame', () => {
+  it('returns 4 segments for ACGCN when art has data', () => {
+    expect(
+      segmentsForGame('ACGCN', { fish: 40, bugs: 40, fossils: 25, art: 13 })
+    ).toEqual(['fish', 'bugs', 'fossils', 'art']);
+  });
+
+  it('omits art segment when art has no data (e.g. ACWW)', () => {
+    expect(
+      segmentsForGame('ACWW', { fish: 56, bugs: 56, fossils: 52, art: 0 })
+    ).toEqual(['fish', 'bugs', 'fossils']);
+  });
+
+  it('includes sea_creatures only for ACNL/ACNH when present', () => {
+    expect(
+      segmentsForGame('ACNH', {
+        fish: 81,
+        bugs: 80,
+        fossils: 86,
+        art: 43,
+        sea_creatures: 40,
+      })
+    ).toEqual(['fish', 'bugs', 'fossils', 'art', 'sea_creatures']);
+    expect(
+      segmentsForGame('ACGCN', {
+        fish: 40,
+        bugs: 40,
+        fossils: 25,
+        art: 13,
+        sea_creatures: 0,
+      })
+    ).toEqual(['fish', 'bugs', 'fossils', 'art']);
+  });
+
+  it('drops sea segment for ACNL when totals.sea_creatures is 0', () => {
+    expect(
+      segmentsForGame('ACNL', { fish: 72, bugs: 72, fossils: 67, art: 30 })
+    ).toEqual(['fish', 'bugs', 'fossils', 'art']);
+  });
+});
diff --git a/src/components/ProgressMeter.tsx b/src/components/ProgressMeter.tsx
new file mode 100644
index 0000000..e03c3cd
--- /dev/null
+++ b/src/components/ProgressMeter.tsx
@@ -0,0 +1,72 @@
+import type { CategoryId, GameId } from '../lib/types';
+import { segmentsForGame } from './progressMeterUtils';
+
+const SEGMENT_LABEL: Record<CategoryId, string> = {
+  fish: 'Fish',
+  bugs: 'Bugs',
+  fossils: 'Fossils',
+  art: 'Art',
+  sea_creatures: 'Sea',
+};
+
+const SEGMENT_VAR: Record<CategoryId, string> = {
+  fish: 'var(--chip-fish)',
+  bugs: 'var(--chip-bugs)',
+  fossils: 'var(--chip-fossils)',
+  art: 'var(--chip-art)',
+  sea_creatures: 'var(--chip-sea)',
+};
+
+export interface ProgressMeterProps {
+  gameId: GameId;
+  donated: Partial<Record<CategoryId, number>>;
+  totals: Partial<Record<CategoryId, number>>;
+}
+
+export function ProgressMeter({ gameId, donated, totals }: ProgressMeterProps) {
+  const segments = segmentsForGame(gameId, totals);
+  const isFive = segments.length === 5;
+
+  return (
+    <div
+      className={`ac-meter${isFive ? ' ac-meter-5' : ''}`}
+      role="group"
+      aria-label="Donation progress by category"
+    >
+      {segments.map(cat => {
+        const total = totals[cat] ?? 0;
+        const done = donated[cat] ?? 0;
+        const pct = total > 0 ? Math.min(100, (done / total) * 100) : 0;
+        const color = SEGMENT_VAR[cat];
+        const label = SEGMENT_LABEL[cat];
+        return (
+          <div
+            key={cat}
+            className="ac-meter-seg"
+            aria-label={`${label}: ${done} of ${total} donated`}
+          >
+            <div className="ac-meter-seg-head">
+              <span
+                className="ac-meter-dot"
+                style={{ backgroundColor: color }}
+                aria-hidden="true"
+              />
+              <span className="ac-meter-name">{label}</span>
+              <span className="ac-meter-frac">
+                {done}
+                <span className="ac-meter-slash">/</span>
+                {total}
+              </span>
+            </div>
+            <div className="ac-meter-track">
+              <div
+                className="ac-meter-fill"
+                style={{ width: `${pct}%`, backgroundColor: color }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/progressMeterUtils.ts b/src/components/progressMeterUtils.ts
new file mode 100644
index 0000000..656ab9b
--- /dev/null
+++ b/src/components/progressMeterUtils.ts
@@ -0,0 +1,15 @@
+import type { CategoryId, GameId } from '../lib/types';
+
+const FIVE_SEG_GAMES = new Set<GameId>(['ACNL', 'ACNH']);
+
+export function segmentsForGame(
+  gameId: GameId,
+  totals: Partial<Record<CategoryId, number>>
+): CategoryId[] {
+  const base: CategoryId[] = ['fish', 'bugs', 'fossils'];
+  if ((totals.art ?? 0) > 0) base.push('art');
+  if (FIVE_SEG_GAMES.has(gameId) && (totals.sea_creatures ?? 0) > 0) {
+    base.push('sea_creatures');
+  }
+  return base;
+}
diff --git a/src/hooks/useJumpToRow.ts b/src/hooks/useJumpToRow.ts
new file mode 100644
index 0000000..4e0d25f
--- /dev/null
+++ b/src/hooks/useJumpToRow.ts
@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import type { CategoryId } from '../lib/types';
+
+/**
+ * Decision 10 helper: navigate to a category tab and jump to a specific row.
+ *
+ * ACCanvas owns the `highlightId` state and runs the scroll-into-view + pulse
+ * effect when it changes. This hook just wires the navigation + sets the
+ * highlight target. Callers (Home shelves, search dropdown) get a stable
+ * `jumpTo(category, id)` function.
+ */
+export function useJumpToRow(
+  setHighlightId: (id: string | null) => void
+): (category: CategoryId, id: string) => void {
+  const navigate = useNavigate();
+  const { townId } = useParams<{ townId?: string }>();
+
+  return useCallback(
+    (category: CategoryId, id: string) => {
+      if (!townId) return;
+      // Clear first so re-jumping to the same id retriggers the pulse.
+      setHighlightId(null);
+      navigate(`/town/${townId}/${category}`);
+      // Defer to next frame so the route + tab content mount before
+      // ACCanvas's highlight effect tries to query for the row.
+      requestAnimationFrame(() => {
+        setHighlightId(id);
+      });
+    },
+    [navigate, townId, setHighlightId]
+  );
+}
diff --git a/src/index.css b/src/index.css
index 489bbe3..9d9e95d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -781,3 +781,222 @@
 @media (max-width: 980px) {
   .ac-expand { grid-template-columns: 1fr; padding-left: 18px; gap: 14px; }
 }
+
+/* ── Phase 6: Home + ProgressMeter ── */
+.ac-meter {
+  display: flex;
+  gap: 8px;
+  font-variant-numeric: tabular-nums;
+}
+.ac-meter-seg {
+  flex: 1 1 0;
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ac-meter-seg-head {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px; color: var(--ink-soft);
+}
+.ac-meter-dot {
+  width: 8px; height: 8px; border-radius: 999px; flex: none;
+}
+.ac-meter-name { font-weight: 500; color: var(--ink); }
+.ac-meter-frac { margin-left: auto; color: var(--ink-soft); }
+.ac-meter-slash { color: var(--border-strong); margin: 0 1px; }
+.ac-meter-track {
+  height: 6px; border-radius: 999px; overflow: hidden;
+  background: var(--surface-alt);
+}
+.ac-meter-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
+
+@media (min-width: 980px) and (max-width: 1180px) {
+  .ac-meter-5 .ac-meter-seg { padding: 7px 8px; }
+  .ac-meter-5 .ac-meter-frac { display: none; }
+}
+@media (max-width: 980px) {
+  .ac-meter-5 { flex-wrap: wrap; }
+  .ac-meter-5 .ac-meter-seg { flex-basis: calc(50% - 3px); }
+}
+
+.ac-home { display: flex; flex-direction: column; gap: 36px; }
+
+.ac-hero {
+  display: flex; flex-direction: column; gap: 18px;
+}
+.ac-eyebrow {
+  font-family: var(--font-sans);
+  font-size: 11px; font-weight: 600; line-height: 1.4;
+  letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.ac-eyebrow-warn { color: var(--warn); }
+.ac-eyebrow-accent { color: var(--accent-ink); }
+.ac-hero-headline {
+  font-family: var(--font-display);
+  font-size: 38px; font-weight: 400; line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin: 0;
+}
+.ac-hero-headline em {
+  color: var(--accent-ink);
+  font-style: italic;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.ac-hero-aside {
+  display: block;
+  font-style: italic;
+  color: var(--warn);
+  font-size: 30px;
+}
+
+.ac-month-strip {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 4px;
+}
+.ac-month-cell {
+  text-align: center;
+  font-size: 11px;
+  color: var(--ink-muted);
+  padding: 8px 0;
+  border-radius: 8px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  font-variant-numeric: tabular-nums;
+}
+.ac-month-cell-current {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.ac-shelf-head {
+  display: flex; align-items: baseline; gap: 12px;
+  margin-bottom: 14px;
+}
+.ac-shelf-title {
+  font-family: var(--font-display);
+  font-size: 24px; font-weight: 500;
+  letter-spacing: -0.01em; line-height: 1.2;
+  color: var(--ink);
+  margin: 0;
+}
+.ac-shelf-count {
+  font-size: 13px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ac-shelf-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+@media (max-width: 980px) {
+  .ac-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 560px) {
+  .ac-shelf-grid { grid-template-columns: 1fr; }
+}
+
+.ac-shelf-card {
+  display: flex; gap: 12px; align-items: flex-start;
+  text-align: left;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px;
+  transition: transform 0.12s, border-color 0.12s;
+  cursor: pointer;
+  min-width: 0;
+}
+.ac-shelf-card:hover {
+  border-color: var(--border-strong);
+  transform: translateY(-1px);
+}
+.ac-shelf-card:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.ac-shelf-glyph {
+  width: 44px; height: 44px;
+  border: 1.5px solid;
+  border-radius: 10px;
+  display: grid; place-items: center;
+  font-family: var(--font-display);
+  font-size: 14px; font-weight: 500;
+  flex: none;
+}
+.ac-shelf-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.ac-shelf-card-name {
+  font-size: 14px; font-weight: 500; color: var(--ink);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ac-shelf-card-meta {
+  font-size: 12px; color: var(--ink-soft);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ac-shelf-card-warn {
+  font-size: 11px;
+  color: var(--warn);
+  font-weight: 500;
+  display: flex; align-items: center; gap: 4px;
+}
+.ac-month-dots {
+  display: flex; gap: 2px; margin-top: 2px;
+}
+.ac-month-dot {
+  width: 6px; height: 6px; border-radius: 999px;
+  background: var(--border);
+}
+.ac-month-dot-on { background: var(--accent); }
+
+.ac-recent-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.ac-recent-row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  cursor: pointer;
+  background: transparent;
+  width: 100%; text-align: left;
+  transition: background 0.12s;
+}
+.ac-recent-row:first-child { border-top: none; }
+.ac-recent-row:hover { background: var(--surface-alt); }
+.ac-recent-cat-dot {
+  width: 8px; height: 8px; border-radius: 999px; flex: none;
+}
+.ac-recent-name { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); font-weight: 500;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ac-recent-cat {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--ink-muted);
+}
+.ac-recent-time { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.ac-recent-empty {
+  padding: 24px 16px; text-align: center;
+  color: var(--ink-muted); font-size: 13px;
+}
+
+@media (max-width: 720px) {
+  .ac-hero-headline { font-size: 30px; }
+  .ac-hero-aside { font-size: 24px; }
+  .ac-month-strip { padding: 10px 12px; gap: 2px; }
+  .ac-month-cell { font-size: 10px; padding: 6px 0; }
+}

From d02911714848d5bbb07475a66d793b76daf1cac7 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 20:55:46 -0400
Subject: [PATCH 15/28] =?UTF-8?q?feat(v0.9):=20Phase=207=20=E2=80=94=20Cat?=
 =?UTF-8?q?egoryTab=20sectioning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the flat A–Z list per category with a sectioned page:
Leaving this month / Available now / Out of season / Already donated.
Empty groups hidden; donated items always land in Already donated.
December→January wrap handled. Fossils/art (no months) collapse cleanly
to Available now + Already donated.

CategoryTab owns its own expandedId so only one row is open per tab and
reacts to highlightId so jumps from Home shelves expand the row before
ACCanvas's scroll-to fires.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                   |  14 +++
 CLAUDE.md                      |   1 +
 docs/v0.9-plan.md              |   2 +-
 src/components/ACCanvas.tsx    | 102 ++++------------
 src/components/CategoryTab.tsx | 214 +++++++++++++++++++++++++++++++++
 src/index.css                  |  72 +++++++++++
 6 files changed, 325 insertions(+), 80 deletions(-)
 create mode 100644 src/components/CategoryTab.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f48ded..a09b57b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,20 @@ All notable changes to this project are documented here.
 
 ## [Unreleased] — v0.9.0-beta (in progress)
 
+### Added — Phase 7: CategoryTab sectioning
+- **`CategoryTab` component** (`src/components/CategoryTab.tsx`) — replaces the inline category render in `ACCanvas`. Groups items into four sections (Leaving this month / Available now / Out of season / Already donated), each with an eyebrow header and item count. Empty groups are hidden. December→January wrap is handled via `next = currentMonth === 12 ? 1 : currentMonth + 1`. Donated items always land in "Already donated" regardless of season. Categories without month data (fossils, art) treat all non-donated items as "Available now". Owns its own `expandedId` state — only one row open at a time per tab — and reacts to `highlightId` by opening the matching row before ACCanvas's scroll-to fires.
+- **Category page header** — Fraunces 44 `<em>{donated}</em> of {total} {category}` title and right-aligned meta line ("X% complete" + "Showing availability for {month}" for seasonal categories). Stats card-style header sits above the per-tab search bar.
+- **Phase 7 CSS** appended to `src/index.css` (`.ac-category`, `.ac-category-head`, `.ac-category-title`, `.ac-category-meta`, `.ac-group`, `.ac-group-head`, `.ac-group-title`, `.ac-group-count`, plus `.ac-group-warn` / `.ac-group-accent` / `.ac-group-muted` / `.ac-group-done` tone modifiers). Header collapses to single column ≤700px and the category title shrinks to 32px.
+
+### Removed — Phase 7
+- Inline category render in `ACCanvas` (`CategoryProgress` import + flat `.ac-list` map). The progress display moves into the new category header. `CategoryProgress` itself remains in the codebase for now and is slated for removal during the Phase 9 stats rebuild per the v0.9 retirement list.
+
+### Decisions — Phase 7
+- **Section ordering is fixed and ungrouped categories collapse cleanly.** Fossils and art have no month data, so for those tabs only the "Available now" and "Already donated" groups can ever appear. The ordering still reads naturally; we don't special-case the layout for non-seasonal categories.
+- **Per-tab search lives inside CategoryTab, not above it.** Keeping the search bar inside the new component lets the section grouping recompute on filter without re-flowing the page header. The header always shows totals for the full category, not the filtered subset, so users can see overall progress while narrowing the list.
+- **Art keeps its bottom-sheet `DetailModal`.** The plan's "row click toggles inline expand" rule applies to fish/bugs/fossils; art was already on a different pattern in v0.8 and the v0.9 design preserves that. CategoryTab routes art clicks to the existing `onItemSelect` callback in `ACCanvas` and renders no inline panel for that category.
+- **`ItemExpandPanel` is rendered as a sibling of `CollectibleRow` inside the same `.ac-list`.** This preserves the existing CSS that ties `.ac-row` divider + `.ac-row-pulse` keyframe to the row container without restructuring the row primitive (locked from Phase 5).
+
 ### Added — Phase 6: HomeTab + ProgressMeter
 - **`ProgressMeter` component** (`src/components/ProgressMeter.tsx`) — segmented donation progress bar. 4 segments (fish/bugs/fossils/art) for ACGCN/ACWW/ACCF; 5 segments (adds sea) for ACNL/ACNH. Each segment uses its category-tinted Meadow chip token (`--chip-fish`/`--chip-bugs`/`--chip-fossils`/`--chip-art`/`--chip-sea`) and exposes a per-segment aria-label like "Fish: 12 of 40 donated". Pure helper `segmentsForGame` extracted to `src/components/progressMeterUtils.ts` and unit-tested.
 - **`HomeTab` rebuilt** (`src/components/HomeTab.tsx`) — new structure per v0.9 design: hero stat with italic Fraunces accent number ("X creatures still to donate this month"), warn-italic aside ("N leaving soon"), `ProgressMeter` directly underneath, 12-cell month strip with current-month highlight, "Leaving end of {month}" warn-toned shelf, "Just arrived" accent-toned shelf, and a "Latest donations" card. Sea creatures included in shelves and progress for ACNL/ACNH towns. Each shelf card / latest-donations row click fires `jumpTo(category, id)` which sets the active tab and `highlightId` so the matching row scrolls into view and pulses (Decision 10). Hero falls back to "X of Y donated" when the active game has no seasonal categories.
diff --git a/CLAUDE.md b/CLAUDE.md
index d0d3fc3..e029a5f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -57,6 +57,7 @@ src/
     ProgressMeter.tsx       # v0.9 Phase 6: segmented progress bar (4 or 5 segments
                             # gated by gameId; sea segment for ACNL/ACNH).
     progressMeterUtils.ts   # Pure helper segmentsForGame (unit-tested).
+    CategoryTab.tsx         # v0.9 Phase 7: sectioned category page (Leaving / Available / Out of season / Already donated)
     CollectibleRow.tsx      # Single item row with donate toggle; shows chevron + rounded-top when expanded
     ItemExpandPanel.tsx     # Inline accordion panel shown below CollectibleRow for fish/bugs/fossils
     Sidebar.tsx             # v0.9 Phase 2: 280px left sidebar — brand, active town card, NavLink nav with counts, footer (replaces MuseumHeader/TabBar/TownSwitcher)
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index c788f90..3180701 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -467,7 +467,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 7 — CategoryTab Sectioning
+### Phase 7 — CategoryTab Sectioning ✅
 
 **Branch:** `feature/v09-phase-7-sections`  
 **Goal:** Group category items into 4 sections instead of a flat A–Z list.
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index f2d02fb..ff0db32 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAppStore } from '../lib/store';
 import { CATEGORY_META } from '../lib/categoryMeta';
 import { downloadCSV } from '../lib/csvExport';
-import { filterByQuery, globalFilter, type AnyItem } from '../lib/utils';
+import { globalFilter, type AnyItem } from '../lib/utils';
 import type { CategoryId } from '../lib/types';
 import type { AppErrorKind } from '../lib/types';
 import type { ViewId } from '../lib/viewTypes';
@@ -14,10 +13,7 @@ import ErrorBanner from './ErrorBanner';
 import ErrorState from './ErrorState';
 
 import { Sidebar } from './Sidebar';
-import { CollectibleRow } from './CollectibleRow';
-import { ItemExpandPanel } from './ItemExpandPanel';
-import { CategoryProgress } from './shared/CategoryProgress';
-import { SearchBar } from './shared/SearchBar';
+import { CategoryTab } from './CategoryTab';
 import { EmptyState } from './shared/EmptyState';
 
 import { DetailModal } from './modals/DetailModal';
@@ -96,7 +92,6 @@ export default function ACCanvas() {
     item: AnyItem;
     category: CategoryId;
   } | null>(null);
-  const [expandedId, setExpandedId] = useState<string | null>(null);
   const [highlightId, setHighlightId] = useState<string | null>(null);
 
   const { data, loading, loadError, reload } = useMuseumData(
@@ -135,20 +130,18 @@ export default function ACCanvas() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.sea_creatures.length, loading, activeTab]);
 
-  // Reset per-tab search query, expanded item, and selected detail on tab changes
+  // Reset per-tab search query and selected detail on tab changes
   useEffect(() => {
     setQuery('');
-    setExpandedId(null);
     setSelected(null);
   }, [activeTab]);
 
   // Scroll-to + highlight on jump (Decision 10).
-  // When highlightId changes, expand the matching row, scroll it into view,
-  // and let the .ac-row-pulse keyframe play. Clear after the animation duration
-  // so re-jumping to the same id retriggers the pulse.
+  // CategoryTab handles expanding the matching row when highlightId changes;
+  // here we scroll the row into view and clear after the animation duration so
+  // re-jumping to the same id retriggers the pulse.
   useEffect(() => {
     if (!highlightId) return;
-    setExpandedId(highlightId);
     const raf = requestAnimationFrame(() => {
       const el = document.querySelector(
         `[data-row-id="${CSS.escape(highlightId)}"]`
@@ -170,16 +163,11 @@ export default function ACCanvas() {
       ? activeTab
       : null;
 
-  const activeItems = useMemo(
+  const activeItems = useMemo<AnyItem[]>(
     () => (activeCat ? (data[activeCat] as AnyItem[]) : []),
     [activeCat, data]
   );
 
-  const filtered = useMemo(() => {
-    if (!activeCat) return [];
-    return filterByQuery(activeItems, activeCat, query);
-  }, [activeItems, activeCat, query]);
-
   const globalResults = useMemo(() => {
     if (!globalQuery.trim()) return null;
     return globalFilter(data as Record<CategoryId, AnyItem[]>, globalQuery);
@@ -300,66 +288,22 @@ export default function ACCanvas() {
                   />
                 </>
               ) : (
-                <>
-                  <CategoryProgress
-                    donated={catCounts[activeCat!]}
-                    total={activeItems.length}
-                    label={catLabel}
-                  />
-                  <SearchBar
-                    query={query}
-                    setQuery={setQuery}
-                    placeholder={`Search ${catLabel.toLowerCase()}…`}
-                  />
-                  <div className="ac-list">
-                    {filtered.map(item => (
-                      <React.Fragment key={item.id}>
-                        <CollectibleRow
-                          item={item}
-                          category={activeCat!}
-                          checked={!!activeTownDonated[item.id]}
-                          onClick={() => {
-                            if (activeCat === 'art') {
-                              setSelected({ item, category: activeCat! });
-                            } else {
-                              setExpandedId(prev =>
-                                prev === item.id ? null : item.id
-                              );
-                            }
-                          }}
-                          expanded={
-                            activeCat !== 'art'
-                              ? expandedId === item.id
-                              : undefined
-                          }
-                          highlighted={highlightId === item.id}
-                          hemisphere={activeTown?.hemisphere ?? 'NH'}
-                          currentMonth={new Date().getMonth() + 1}
-                        />
-                        {activeCat !== 'art' && expandedId === item.id && (
-                          <ItemExpandPanel
-                            item={item}
-                            category={activeCat!}
-                            checked={!!activeTownDonated[item.id]}
-                            donatedAt={activeTownDonatedAt[item.id]}
-                            onToggle={() => toggle(item.id)}
-                            hemisphere={activeTown?.hemisphere ?? 'NH'}
-                            currentMonth={new Date().getMonth() + 1}
-                          />
-                        )}
-                      </React.Fragment>
-                    ))}
-                    {filtered.length === 0 && (
-                      <EmptyState
-                        message={
-                          query
-                            ? `No ${catLabel.toLowerCase()} match "${query}".`
-                            : `No ${catLabel.toLowerCase()} found.`
-                        }
-                      />
-                    )}
-                  </div>
-                </>
+                <CategoryTab
+                  category={activeCat!}
+                  items={activeItems}
+                  donated={activeTownDonated}
+                  donatedAt={activeTownDonatedAt}
+                  hemisphere={activeTown?.hemisphere ?? 'NH'}
+                  currentMonth={new Date().getMonth() + 1}
+                  query={query}
+                  setQuery={setQuery}
+                  highlightId={highlightId}
+                  onItemSelect={item =>
+                    setSelected({ item, category: activeCat! })
+                  }
+                  onToggle={id => toggle(id)}
+                  catLabel={catLabel}
+                />
               )}
             </>
           )}
diff --git a/src/components/CategoryTab.tsx b/src/components/CategoryTab.tsx
new file mode 100644
index 0000000..b46ff75
--- /dev/null
+++ b/src/components/CategoryTab.tsx
@@ -0,0 +1,214 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import type { CategoryId } from '../lib/types';
+import {
+  type AnyItem,
+  displayName,
+  itemMonths,
+  filterByQuery,
+} from '../lib/utils';
+import { CollectibleRow } from './CollectibleRow';
+import { ItemExpandPanel } from './ItemExpandPanel';
+import { SearchBar } from './shared/SearchBar';
+import { EmptyState } from './shared/EmptyState';
+
+interface SectionGroup {
+  id: 'leaving' | 'avail' | 'locked' | 'done';
+  label: string;
+  tone: 'warn' | 'accent' | 'muted' | 'done';
+  items: AnyItem[];
+}
+
+interface CategoryTabProps {
+  category: CategoryId;
+  items: AnyItem[];
+  donated: Record<string, boolean>;
+  donatedAt: Record<string, string>;
+  hemisphere: 'NH' | 'SH';
+  currentMonth: number;
+  query: string;
+  setQuery: (q: string) => void;
+  highlightId: string | null;
+  onItemSelect: (item: AnyItem) => void;
+  onToggle: (id: string) => void;
+  catLabel: string;
+}
+
+export function CategoryTab({
+  category,
+  items,
+  donated,
+  donatedAt,
+  hemisphere,
+  currentMonth,
+  query,
+  setQuery,
+  highlightId,
+  onItemSelect,
+  onToggle,
+  catLabel,
+}: CategoryTabProps) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  // Reset expand when category changes
+  useEffect(() => {
+    setExpandedId(null);
+  }, [category]);
+
+  // Open the expand panel when a highlight arrives (Decision 10).
+  useEffect(() => {
+    if (!highlightId) return;
+    if (category === 'art') return; // art uses modal, not inline
+    setExpandedId(highlightId);
+  }, [highlightId, category]);
+
+  const filtered = useMemo(
+    () => filterByQuery(items, category, query),
+    [items, category, query]
+  );
+
+  const groups = useMemo<SectionGroup[]>(() => {
+    const leaving: AnyItem[] = [];
+    const avail: AnyItem[] = [];
+    const locked: AnyItem[] = [];
+    const done: AnyItem[] = [];
+
+    const next = currentMonth === 12 ? 1 : currentMonth + 1;
+
+    for (const it of filtered) {
+      if (donated[it.id]) {
+        done.push(it);
+        continue;
+      }
+      const months = itemMonths(it, category, hemisphere);
+      // Items without month data (fossils, art) are treated as always available.
+      const inSeason =
+        !months || months.length === 0 || months.includes(currentMonth);
+      const isLeaving =
+        !!months &&
+        months.length > 0 &&
+        months.includes(currentMonth) &&
+        !months.includes(next);
+
+      if (isLeaving) leaving.push(it);
+      else if (inSeason) avail.push(it);
+      else locked.push(it);
+    }
+
+    const byName = (a: AnyItem, b: AnyItem) =>
+      displayName(a, category).localeCompare(displayName(b, category));
+
+    return [
+      {
+        id: 'leaving',
+        label: 'Leaving this month',
+        tone: 'warn',
+        items: leaving.sort(byName),
+      },
+      {
+        id: 'avail',
+        label: 'Available now',
+        tone: 'accent',
+        items: avail.sort(byName),
+      },
+      {
+        id: 'locked',
+        label: 'Out of season',
+        tone: 'muted',
+        items: locked.sort(byName),
+      },
+      {
+        id: 'done',
+        label: 'Already donated',
+        tone: 'done',
+        items: done.sort(byName),
+      },
+    ].filter(g => g.items.length > 0) as SectionGroup[];
+  }, [filtered, donated, category, hemisphere, currentMonth]);
+
+  const totalDonated = items.filter(i => donated[i.id]).length;
+  const total = items.length;
+  const pct = total === 0 ? 0 : Math.round((totalDonated / total) * 100);
+  const showMonthNote = category !== 'art' && category !== 'fossils';
+  const monthName = new Date(2000, currentMonth - 1, 1).toLocaleString(
+    'en-US',
+    {
+      month: 'long',
+    }
+  );
+
+  return (
+    <div className="ac-category">
+      <header className="ac-category-head">
+        <h1 className="ac-category-title">
+          <em>{totalDonated}</em> of {total} {catLabel.toLowerCase()}
+        </h1>
+        <div className="ac-category-meta">
+          <strong>{pct}% complete</strong>
+          {showMonthNote && <span>Showing availability for {monthName}</span>}
+        </div>
+      </header>
+
+      <SearchBar
+        query={query}
+        setQuery={setQuery}
+        placeholder={`Search ${catLabel.toLowerCase()}…`}
+      />
+
+      {groups.length === 0 ? (
+        <EmptyState
+          message={
+            query
+              ? `No ${catLabel.toLowerCase()} match "${query}".`
+              : `No ${catLabel.toLowerCase()} found.`
+          }
+        />
+      ) : (
+        groups.map(g => (
+          <section key={g.id} className={`ac-group ac-group-${g.tone}`}>
+            <header className="ac-group-head">
+              <h3 className="ac-group-title">{g.label}</h3>
+              <span className="ac-group-count">{g.items.length}</span>
+            </header>
+            <div className="ac-list">
+              {g.items.map(item => (
+                <React.Fragment key={item.id}>
+                  <CollectibleRow
+                    item={item}
+                    category={category}
+                    checked={!!donated[item.id]}
+                    onClick={() => {
+                      if (category === 'art') {
+                        onItemSelect(item);
+                      } else {
+                        setExpandedId(prev =>
+                          prev === item.id ? null : item.id
+                        );
+                      }
+                    }}
+                    expanded={
+                      category !== 'art' ? expandedId === item.id : undefined
+                    }
+                    highlighted={highlightId === item.id}
+                    hemisphere={hemisphere}
+                    currentMonth={currentMonth}
+                  />
+                  {category !== 'art' && expandedId === item.id && (
+                    <ItemExpandPanel
+                      item={item}
+                      category={category}
+                      checked={!!donated[item.id]}
+                      donatedAt={donatedAt[item.id]}
+                      onToggle={() => onToggle(item.id)}
+                      hemisphere={hemisphere}
+                      currentMonth={currentMonth}
+                    />
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+          </section>
+        ))
+      )}
+    </div>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 9d9e95d..43586f2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -826,6 +826,78 @@
 
 .ac-home { display: flex; flex-direction: column; gap: 36px; }
 
+/* ── Phase 7: Category tab sectioning ── */
+.ac-category { display: flex; flex-direction: column; gap: 18px; }
+.ac-category-head {
+  display: flex; justify-content: space-between; align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 6px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--border);
+}
+.ac-category-title {
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: 44px;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin: 0;
+}
+.ac-category-title em {
+  font-style: italic;
+  color: var(--accent-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+.ac-category-meta {
+  font-size: 13px;
+  color: var(--ink-soft);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.ac-category-meta strong {
+  display: block;
+  font-family: var(--font-display);
+  font-weight: 500;
+  color: var(--ink);
+  font-size: 18px;
+}
+.ac-group { display: flex; flex-direction: column; gap: 8px; }
+.ac-group-head {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 0 4px;
+}
+.ac-group-title {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  margin: 0;
+}
+.ac-group-warn .ac-group-title { color: var(--warn); }
+.ac-group-accent .ac-group-title { color: var(--accent-ink); }
+.ac-group-muted .ac-group-title { color: var(--ink-muted); }
+.ac-group-done .ac-group-title { color: var(--ink-muted); }
+.ac-group-count {
+  font-size: 12px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+@media (max-width: 700px) {
+  .ac-category-head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .ac-category-meta { text-align: left; }
+  .ac-category-title { font-size: 32px; }
+}
+
 .ac-hero {
   display: flex; flex-direction: column; gap: 18px;
 }

From 14077671a13046bf9ce4038485bf0da999312f56 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 22:07:03 -0400
Subject: [PATCH 16/28] =?UTF-8?q?feat(v09-phase-8):=20GlobalSearchDropdown?=
 =?UTF-8?q?=20=E2=80=94=20unified=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces GlobalSearchBar + GlobalSearchResults + SearchHistoryPopover
with a single GlobalSearchDropdown anchored under a Home-tab topbar
search input. Four states: empty + intro hint, empty + recent searches,
no-match, grouped results. Sea group gated to ACNL/ACNH. Art search
matches `name` and `basedOn` (Decision 8). Keyboard nav (↑↓↵esc).
History persists in `ac-curator-search-history` (max 8, deduped).
Result selection fires onJump → setTab + setHighlightId so the row
scroll-to + .ac-row-pulse animation triggers (Decision 10).

Retires the `'search'` ViewId, the Search nav entry, and the
`useSearch` hook.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  18 +
 CLAUDE.md                                     |  10 +-
 docs/v0.9-plan.md                             |   2 +-
 src/components/ACCanvas.tsx                   |  84 ++--
 src/components/Sidebar.tsx                    |   8 -
 src/components/search/GlobalSearchBar.tsx     |  73 ----
 .../search/GlobalSearchDropdown.tsx           | 390 ++++++++++++++++++
 src/components/search/GlobalSearchResults.tsx |  71 ----
 .../search/SearchHistoryPopover.tsx           |  58 ---
 src/hooks/useSearch.ts                        |  42 --
 src/index.css                                 | 198 +++++++++
 src/lib/viewTypes.ts                          |   2 +-
 12 files changed, 639 insertions(+), 317 deletions(-)
 delete mode 100644 src/components/search/GlobalSearchBar.tsx
 create mode 100644 src/components/search/GlobalSearchDropdown.tsx
 delete mode 100644 src/components/search/GlobalSearchResults.tsx
 delete mode 100644 src/components/search/SearchHistoryPopover.tsx
 delete mode 100644 src/hooks/useSearch.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a09b57b..ffd7047 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,24 @@ All notable changes to this project are documented here.
 
 ## [Unreleased] — v0.9.0-beta (in progress)
 
+### Added — Phase 8: GlobalSearchDropdown
+- **`GlobalSearchDropdown` component** (`src/components/search/GlobalSearchDropdown.tsx`) — unified search dropdown anchored under a topbar input on the Home tab. Four states: empty + intro hint, empty + recent searches (history), no-match for query, and grouped category results. Shows up to 5 items per group, max 5 groups (fish, bugs, fossils, art, sea). Sea group gated on `gameId ∈ {ACNL, ACNH}` and non-empty data. Art search matches both `name` and `basedOn` (Decision 8 — "Leonardo" → Famous Painting). Each row shows category-tinted monogram glyph, name with `donated` badge, and meta line (habitat / location / part / basedOn / shadow + bells).
+- **Keyboard navigation** — `↑↓` move the active row, `↵` selects + jumps + closes, `Esc` closes the panel. Hovering a row also sets the active index.
+- **Search history** — persists in `localStorage` under `ac-curator-search-history`, max 8 entries, deduplicated, most recent first. Stored on result selection. "Clear" button in the history header empties it.
+- **Result jump wiring** — selecting a result calls `onJump(category, id)`, which sets the active tab via React Router and stamps `highlightId` so `CategoryTab`'s scroll-to + `.ac-row-pulse` animation fires (Decision 10). Identical pattern to Phase 6 home shelves.
+- **Phase 8 CSS** appended to `src/index.css` — `.ac-topbar`, `.ac-search-wrap`, `.ac-search` (rounded pill input with focus ring), `.ac-gs-panel`, `.ac-gs-empty` / `-title` / `-sub` / `-hint`, `.ac-gs-section-head` / `.ac-gs-eyebrow` / `.ac-gs-clear`, `.ac-gs-history` / `-row` / `-icon`, `.ac-gs-group` / `-head` / `-dot` / `-count`, `.ac-gs-row` / `-active` / `-glyph` / `-text` / `-name` / `-donated` / `-meta` / `-arrow`, `.ac-gs-foot` + `kbd` chip styling.
+
+### Removed — Phase 8
+- **`GlobalSearchBar`, `GlobalSearchResults`, `SearchHistoryPopover`** — deleted (`src/components/search/`). Replaced wholesale by `GlobalSearchDropdown`.
+- **`useSearch` hook** — deleted (`src/hooks/useSearch.ts`). Search state now lives inside `GlobalSearchDropdown`.
+- **`'search'` view route** — removed from `ViewId`, `VALID_TABS`, and the Sidebar nav. The retired Search tab is replaced by the dropdown on Home.
+
+### Decisions — Phase 8
+- **Topbar lives only on Home tab.** Per the v0.9.2 spec, other tabs keep their per-tab inline search inside `CategoryTab`. Mounting the topbar on Home only avoids two competing search affordances on category pages.
+- **Click-outside dismisses the panel; result clicks use `onMouseDown` preventDefault.** Without `preventDefault` on mousedown, the input would lose focus before the click handler fired and the dropdown would close mid-click.
+- **Sea group gated on both game and data presence.** Mirrors the gating in Sidebar nav and ProgressMeter — a town whose game JSON happens to be missing sea data still renders correctly without an empty section.
+- **Per-group limit kept at 5.** Matches the v0.9.2 design and keeps the dropdown short enough to scan without scrolling on a 1080p viewport even when all 5 groups have hits.
+
 ### Added — Phase 7: CategoryTab sectioning
 - **`CategoryTab` component** (`src/components/CategoryTab.tsx`) — replaces the inline category render in `ACCanvas`. Groups items into four sections (Leaving this month / Available now / Out of season / Already donated), each with an eyebrow header and item count. Empty groups are hidden. December→January wrap is handled via `next = currentMonth === 12 ? 1 : currentMonth + 1`. Donated items always land in "Already donated" regardless of season. Categories without month data (fossils, art) treat all non-donated items as "Available now". Owns its own `expandedId` state — only one row open at a time per tab — and reacts to `highlightId` by opening the matching row before ACCanvas's scroll-to fires.
 - **Category page header** — Fraunces 44 `<em>{donated}</em> of {total} {category}` title and right-aligned meta line ("X% complete" + "Showing availability for {month}" for seasonal categories). Stats card-style header sits above the per-tab search bar.
diff --git a/CLAUDE.md b/CLAUDE.md
index e029a5f..71a5ad8 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -81,13 +81,15 @@ src/
       ActivityFeed.tsx      # Recent donations list
       SectionCard.tsx       # Reusable card wrapper
     search/
-      GlobalSearchBar.tsx   # Global search input
-      GlobalSearchResults.tsx  # Cross-category search results
-      SearchHistoryPopover.tsx # Recent search history dropdown
+      GlobalSearchDropdown.tsx # v0.9 Phase 8: unified search dropdown — anchored
+                               # under the Home topbar input. Grouped category
+                               # results (5 groups for ACNL/ACNH, 4 elsewhere),
+                               # keyboard nav (↑↓↵esc), localStorage history
+                               # under `ac-curator-search-history` (max 8).
+                               # Replaces GlobalSearchBar/Results/HistoryPopover.
   hooks/
     useHydration.ts         # Gates render on Zustand persist rehydration (onFinishHydration)
     useMuseumData.ts        # Fetches and caches all 4 category JSONs for active town's game
-    useSearch.ts            # Search history, click-outside, debounce
     useCategoryStats.ts     # Memoized donated counts per category
     useJumpToRow.ts         # v0.9 Phase 6: navigate to a category tab + set
                             # highlightId so ACCanvas scrolls + pulses the target row
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 3180701..3e94ed9 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -494,7 +494,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 8 — GlobalSearchDropdown
+### Phase 8 — GlobalSearchDropdown ✅
 
 **Branch:** `feature/v09-phase-8-search`  
 **Goal:** Replace `GlobalSearchBar`, `GlobalSearchResults`, `SearchHistoryPopover` with `GlobalSearchDropdown`.
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index ff0db32..acc4d23 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useAppStore } from '../lib/store';
 import { CATEGORY_META } from '../lib/categoryMeta';
 import { downloadCSV } from '../lib/csvExport';
-import { globalFilter, type AnyItem } from '../lib/utils';
+import { type AnyItem } from '../lib/utils';
 import type { CategoryId } from '../lib/types';
 import type { AppErrorKind } from '../lib/types';
 import type { ViewId } from '../lib/viewTypes';
@@ -18,14 +18,12 @@ import { EmptyState } from './shared/EmptyState';
 
 import { DetailModal } from './modals/DetailModal';
 
-import { GlobalSearchBar } from './search/GlobalSearchBar';
-import { GlobalSearchResults } from './search/GlobalSearchResults';
+import { GlobalSearchDropdown } from './search/GlobalSearchDropdown';
 
 import { AnalyticsView } from './views/AnalyticsView';
 import { ActivityFeed } from './views/ActivityFeed';
 
 import { useMuseumData } from '../hooks/useMuseumData';
-import { useSearch } from '../hooks/useSearch';
 import { useCategoryStats } from '../hooks/useCategoryStats';
 
 const VALID_TABS: ViewId[] = [
@@ -36,7 +34,6 @@ const VALID_TABS: ViewId[] = [
   'art',
   'sea_creatures',
   'activity',
-  'search',
   'analytics',
 ];
 
@@ -97,16 +94,6 @@ export default function ACCanvas() {
   const { data, loading, loadError, reload } = useMuseumData(
     activeTown?.gameId ?? 'ACGCN'
   );
-  const {
-    globalQuery,
-    setGlobalQuery,
-    recentSearches,
-    setRecentSearches,
-    historyOpen,
-    setHistoryOpen,
-    historyRef,
-    pushRecentSearch,
-  } = useSearch();
 
   const catCounts = useCategoryStats(data, activeTownDonated);
 
@@ -158,7 +145,6 @@ export default function ACCanvas() {
   const activeCat: CategoryId | null =
     activeTab !== 'home' &&
     activeTab !== 'activity' &&
-    activeTab !== 'search' &&
     activeTab !== 'analytics'
       ? activeTab
       : null;
@@ -168,10 +154,10 @@ export default function ACCanvas() {
     [activeCat, data]
   );
 
-  const globalResults = useMemo(() => {
-    if (!globalQuery.trim()) return null;
-    return globalFilter(data as Record<CategoryId, AnyItem[]>, globalQuery);
-  }, [globalQuery, data]);
+  function handleSearchJump(category: CategoryId, id: string) {
+    setHighlightId(id);
+    handleTabChange(category);
+  }
 
   function handleExport() {
     if (!activeTown) return;
@@ -240,15 +226,25 @@ export default function ACCanvas() {
           ) : (
             <>
               {activeTab === 'home' ? (
-                <HomeTab
-                  data={data}
-                  donated={activeTownDonated}
-                  donatedAt={activeTownDonatedAt}
-                  catCounts={catCounts}
-                  gameId={activeTown?.gameId ?? 'ACGCN'}
-                  hemisphere={activeTown?.hemisphere ?? 'NH'}
-                  setHighlightId={setHighlightId}
-                />
+                <>
+                  <div className="ac-topbar">
+                    <GlobalSearchDropdown
+                      data={data}
+                      donated={activeTownDonated}
+                      gameId={activeTown?.gameId ?? 'ACGCN'}
+                      onJump={handleSearchJump}
+                    />
+                  </div>
+                  <HomeTab
+                    data={data}
+                    donated={activeTownDonated}
+                    donatedAt={activeTownDonatedAt}
+                    catCounts={catCounts}
+                    gameId={activeTown?.gameId ?? 'ACGCN'}
+                    hemisphere={activeTown?.hemisphere ?? 'NH'}
+                    setHighlightId={setHighlightId}
+                  />
+                </>
               ) : activeTab === 'analytics' ? (
                 <AnalyticsView
                   data={data}
@@ -257,36 +253,6 @@ export default function ACCanvas() {
                 />
               ) : activeTab === 'activity' ? (
                 <ActivityFeed donatedAt={activeTownDonatedAt} data={data} />
-              ) : activeTab === 'search' ? (
-                <>
-                  <GlobalSearchBar
-                    query={globalQuery}
-                    setQuery={setGlobalQuery}
-                    onSubmit={pushRecentSearch}
-                    historyOpen={historyOpen}
-                    setHistoryOpen={setHistoryOpen}
-                    recentSearches={recentSearches}
-                    onSelectHistory={s => {
-                      setGlobalQuery(s);
-                      pushRecentSearch(s);
-                    }}
-                    onClearHistory={() => {
-                      setRecentSearches([]);
-                      setHistoryOpen(false);
-                    }}
-                    wrapperRef={historyRef}
-                  />
-                  <GlobalSearchResults
-                    results={globalResults}
-                    query={globalQuery}
-                    donated={activeTownDonated}
-                    onSelect={(item, category) => {
-                      if (globalQuery.trim())
-                        pushRecentSearch(globalQuery.trim());
-                      setSelected({ item, category });
-                    }}
-                  />
-                </>
               ) : (
                 <CategoryTab
                   category={activeCat!}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index fa97657..15c0fe4 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -133,14 +133,6 @@ export function Sidebar({
         >
           <span>Log</span>
         </NavLink>
-        <NavLink
-          to={navItemHref('search')}
-          className={({ isActive }) =>
-            `ac-nav-item ${isActive ? 'ac-nav-item-active' : ''}`
-          }
-        >
-          <span>Search</span>
-        </NavLink>
         <NavLink
           to={navItemHref('analytics')}
           className={({ isActive }) =>
diff --git a/src/components/search/GlobalSearchBar.tsx b/src/components/search/GlobalSearchBar.tsx
deleted file mode 100644
index 87f0dfa..0000000
--- a/src/components/search/GlobalSearchBar.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import { Search, X, Clock } from 'lucide-react';
-import { SearchHistoryPopover } from './SearchHistoryPopover';
-
-export function GlobalSearchBar({
-  query,
-  setQuery,
-  onSubmit,
-  historyOpen,
-  setHistoryOpen,
-  recentSearches,
-  onSelectHistory,
-  onClearHistory,
-  wrapperRef,
-}: {
-  query: string;
-  setQuery: (v: string) => void;
-  onSubmit: (q: string) => void;
-  historyOpen: boolean;
-  setHistoryOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  recentSearches: string[];
-  onSelectHistory: (s: string) => void;
-  onClearHistory: () => void;
-  wrapperRef: React.RefObject<HTMLDivElement | null>;
-}) {
-  return (
-    <div ref={wrapperRef} className="relative">
-      <div
-        className="flex items-center gap-2 rounded-[14px] border px-3 py-2"
-        style={{ borderColor: '#E7DAC4', backgroundColor: '#FDF9F1' }}
-      >
-        <Search className="w-4 h-4 opacity-50 shrink-0" />
-        <input
-          type="text"
-          value={query}
-          onChange={e => setQuery(e.target.value)}
-          onKeyDown={e => {
-            if (e.key === 'Enter' && query.trim()) onSubmit(query.trim());
-          }}
-          placeholder="Search all categories…"
-          className="w-full bg-transparent outline-none text-sm"
-          style={{ color: '#2A2A2A' }}
-        />
-        {query && (
-          <button
-            onClick={() => setQuery('')}
-            className="opacity-40 hover:opacity-70 shrink-0"
-          >
-            <X className="w-3.5 h-3.5" />
-          </button>
-        )}
-        <button
-          onClick={() => setHistoryOpen(o => !o)}
-          className="shrink-0 opacity-50 hover:opacity-80"
-          aria-label="Recent searches"
-        >
-          <Clock className="w-4 h-4" />
-        </button>
-      </div>
-
-      {historyOpen && (
-        <SearchHistoryPopover
-          searches={recentSearches}
-          onSelect={s => {
-            onSelectHistory(s);
-            setHistoryOpen(false);
-          }}
-          onClear={onClearHistory}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/src/components/search/GlobalSearchDropdown.tsx b/src/components/search/GlobalSearchDropdown.tsx
new file mode 100644
index 0000000..0bcdd86
--- /dev/null
+++ b/src/components/search/GlobalSearchDropdown.tsx
@@ -0,0 +1,390 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { CategoryId, GameId } from '../../lib/types';
+import type { AllData } from '../../lib/viewTypes';
+import {
+  type AnyItem,
+  isFish,
+  isFossil,
+  isArtPiece,
+  isSeaCreature,
+} from '../../lib/utils';
+
+const SEARCH_HISTORY_KEY = 'ac-curator-search-history';
+const MAX_HISTORY = 8;
+const PER_GROUP_LIMIT = 5;
+const SEA_GAMES = new Set<GameId>(['ACNL', 'ACNH']);
+
+const GROUP_LABEL: Record<CategoryId, string> = {
+  fish: 'Fish',
+  bugs: 'Bugs',
+  fossils: 'Fossils',
+  art: 'Art',
+  sea_creatures: 'Sea',
+};
+
+const CHIP_VAR: Record<CategoryId, string> = {
+  fish: 'var(--chip-fish)',
+  bugs: 'var(--chip-bugs)',
+  fossils: 'var(--chip-fossils)',
+  art: 'var(--chip-art)',
+  sea_creatures: 'var(--chip-sea)',
+};
+
+function loadHistory(): string[] {
+  try {
+    const raw = localStorage.getItem(SEARCH_HISTORY_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed)
+      ? parsed.filter(s => typeof s === 'string')
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveHistory(arr: string[]) {
+  try {
+    localStorage.setItem(
+      SEARCH_HISTORY_KEY,
+      JSON.stringify(arr.slice(0, MAX_HISTORY))
+    );
+  } catch {
+    /* ignore */
+  }
+}
+
+function monogram(name: string): string {
+  return name
+    .split(/[\s-]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(s => s[0])
+    .join('')
+    .toUpperCase();
+}
+
+function metaFor(item: AnyItem, category: CategoryId): string {
+  if (category === 'fish' && isFish(item)) {
+    const bells =
+      item.value != null ? ` · ${item.value.toLocaleString()} ✦` : '';
+    return `${item.habitat}${bells}`;
+  }
+  if (category === 'bugs') {
+    const it = item as AnyItem & { location?: string; value?: number };
+    const bells = it.value != null ? ` · ${it.value.toLocaleString()} ✦` : '';
+    return `${it.location ?? '—'}${bells}`;
+  }
+  if (category === 'fossils' && isFossil(item)) {
+    const bells =
+      item.value != null ? ` · ${item.value.toLocaleString()} ✦` : '';
+    return `${item.part ?? 'Fossil'}${bells}`;
+  }
+  if (category === 'art' && isArtPiece(item)) {
+    return item.basedOn ?? '—';
+  }
+  if (category === 'sea_creatures' && isSeaCreature(item)) {
+    const shadow = item.shadow ?? '';
+    const bells =
+      item.value != null ? ` · ${item.value.toLocaleString()} ✦` : '';
+    return `${shadow}${bells}`.replace(/^ · /, '');
+  }
+  return '—';
+}
+
+interface GlobalSearchDropdownProps {
+  data: AllData;
+  donated: Record<string, boolean>;
+  gameId: GameId;
+  onJump: (category: CategoryId, id: string) => void;
+}
+
+export function GlobalSearchDropdown({
+  data,
+  donated,
+  gameId,
+  onJump,
+}: GlobalSearchDropdownProps) {
+  const [query, setQuery] = useState('');
+  const [focused, setFocused] = useState(false);
+  const [history, setHistory] = useState<string[]>(() => loadHistory());
+  const [activeIdx, setActiveIdx] = useState(0);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const visibleCategories = useMemo<CategoryId[]>(() => {
+    const cats: CategoryId[] = ['fish', 'bugs', 'fossils'];
+    if (data.art.length > 0) cats.push('art');
+    if (SEA_GAMES.has(gameId) && data.sea_creatures.length > 0) {
+      cats.push('sea_creatures');
+    }
+    return cats;
+  }, [data.art.length, data.sea_creatures.length, gameId]);
+
+  const grouped = useMemo<Record<CategoryId, AnyItem[]> | null>(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return null;
+    const out = {
+      fish: [] as AnyItem[],
+      bugs: [] as AnyItem[],
+      fossils: [] as AnyItem[],
+      art: [] as AnyItem[],
+      sea_creatures: [] as AnyItem[],
+    };
+    for (const cat of visibleCategories) {
+      const items = data[cat] as AnyItem[];
+      out[cat] = items
+        .filter(it => {
+          if (it.name.toLowerCase().includes(q)) return true;
+          if (cat === 'art' && isArtPiece(it)) {
+            return (it.basedOn ?? '').toLowerCase().includes(q);
+          }
+          return false;
+        })
+        .slice(0, PER_GROUP_LIMIT);
+    }
+    return out;
+  }, [query, data, visibleCategories]);
+
+  const flatList = useMemo<{ category: CategoryId; item: AnyItem }[]>(() => {
+    if (!grouped) return [];
+    const out: { category: CategoryId; item: AnyItem }[] = [];
+    for (const cat of visibleCategories) {
+      for (const item of grouped[cat]) out.push({ category: cat, item });
+    }
+    return out;
+  }, [grouped, visibleCategories]);
+
+  useEffect(() => setActiveIdx(0), [query]);
+
+  // Click outside to close
+  useEffect(() => {
+    if (!focused) return;
+    function onDown(e: MouseEvent) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
+        setFocused(false);
+      }
+    }
+    document.addEventListener('mousedown', onDown);
+    return () => document.removeEventListener('mousedown', onDown);
+  }, [focused]);
+
+  function commitSearch(term: string) {
+    const t = term.trim();
+    if (!t) return;
+    const next = [t, ...history.filter(h => h !== t)].slice(0, MAX_HISTORY);
+    setHistory(next);
+    saveHistory(next);
+  }
+
+  function clearHistory() {
+    setHistory([]);
+    saveHistory([]);
+  }
+
+  function selectIndex(idx: number) {
+    const entry = flatList[idx];
+    if (!entry) return;
+    commitSearch(entry.item.name);
+    onJump(entry.category, entry.item.id);
+    setQuery('');
+    setFocused(false);
+    inputRef.current?.blur();
+  }
+
+  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'ArrowDown') {
+      if (flatList.length === 0) return;
+      e.preventDefault();
+      setActiveIdx(i => Math.min(i + 1, flatList.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      if (flatList.length === 0) return;
+      e.preventDefault();
+      setActiveIdx(i => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      if (flatList.length > 0) {
+        e.preventDefault();
+        selectIndex(activeIdx);
+      }
+    } else if (e.key === 'Escape') {
+      setFocused(false);
+      inputRef.current?.blur();
+    }
+  }
+
+  const showPanel = focused;
+  const trimmed = query.trim();
+  let runningIdx = -1;
+
+  return (
+    <div className="ac-search-wrap" ref={wrapRef}>
+      <div className="ac-search">
+        <svg
+          className="ac-search-icon"
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.5" />
+          <path
+            d="M11 11L14 14"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          />
+        </svg>
+        <input
+          ref={inputRef}
+          type="text"
+          placeholder="Search across categories…"
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          onFocus={() => setFocused(true)}
+          onKeyDown={onKeyDown}
+          aria-label="Search across categories"
+        />
+      </div>
+
+      {showPanel && (
+        <div className="ac-gs-panel" role="listbox">
+          {!trimmed && history.length === 0 && (
+            <div className="ac-gs-empty">
+              <div className="ac-gs-empty-title">Search across categories</div>
+              <div className="ac-gs-empty-sub">
+                Type a name to find fish, bugs, fossils, art, or sea creatures
+                at once.
+              </div>
+              <div className="ac-gs-hint">
+                <kbd>↑↓</kbd> navigate <kbd>↵</kbd> open <kbd>esc</kbd> close
+              </div>
+            </div>
+          )}
+
+          {!trimmed && history.length > 0 && (
+            <>
+              <div className="ac-gs-section-head">
+                <span className="ac-gs-eyebrow">Recent searches</span>
+                <button
+                  className="ac-gs-clear"
+                  onClick={clearHistory}
+                  type="button"
+                >
+                  Clear
+                </button>
+              </div>
+              <div className="ac-gs-history">
+                {history.map((h, i) => (
+                  <button
+                    key={`${h}-${i}`}
+                    className="ac-gs-history-row"
+                    type="button"
+                    onMouseDown={e => e.preventDefault()}
+                    onClick={() => {
+                      setQuery(h);
+                      inputRef.current?.focus();
+                    }}
+                  >
+                    <span className="ac-gs-history-icon">↻</span>
+                    <span>{h}</span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+
+          {trimmed && grouped && flatList.length === 0 && (
+            <div className="ac-gs-empty">
+              <div className="ac-gs-empty-title">
+                No matches for "<em>{query}</em>"
+              </div>
+              <div className="ac-gs-empty-sub">
+                Try a shorter term or check the spelling.
+              </div>
+            </div>
+          )}
+
+          {trimmed && grouped && flatList.length > 0 && (
+            <>
+              {visibleCategories.map(cat => {
+                const items = grouped[cat];
+                if (items.length === 0) return null;
+                return (
+                  <div key={cat} className="ac-gs-group">
+                    <div className="ac-gs-group-head">
+                      <span
+                        className="ac-gs-group-dot"
+                        style={{ background: CHIP_VAR[cat] }}
+                      />
+                      <span
+                        className="ac-gs-eyebrow"
+                        style={{ color: CHIP_VAR[cat] }}
+                      >
+                        {GROUP_LABEL[cat]}
+                      </span>
+                      <span className="ac-gs-group-count">{items.length}</span>
+                    </div>
+                    {items.map(it => {
+                      runningIdx++;
+                      const isActive = runningIdx === activeIdx;
+                      const isDonated = !!donated[it.id];
+                      const idx = runningIdx;
+                      return (
+                        <button
+                          key={`${cat}-${it.id}`}
+                          type="button"
+                          className={`ac-gs-row ${
+                            isActive ? 'ac-gs-row-active' : ''
+                          }`}
+                          onMouseDown={e => e.preventDefault()}
+                          onMouseEnter={() => setActiveIdx(idx)}
+                          onClick={() => selectIndex(idx)}
+                        >
+                          <div
+                            className="ac-gs-row-glyph"
+                            style={{
+                              borderColor: CHIP_VAR[cat],
+                              color: CHIP_VAR[cat],
+                            }}
+                          >
+                            {monogram(it.name)}
+                          </div>
+                          <div className="ac-gs-row-text">
+                            <div className="ac-gs-row-name">
+                              <span>{it.name}</span>
+                              {isDonated && (
+                                <span className="ac-gs-row-donated">
+                                  donated
+                                </span>
+                              )}
+                            </div>
+                            <div className="ac-gs-row-meta">
+                              {metaFor(it, cat)}
+                            </div>
+                          </div>
+                          <span className="ac-gs-row-arrow">↵</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+              <div className="ac-gs-foot">
+                <span>
+                  <kbd>↑↓</kbd> navigate
+                </span>
+                <span>
+                  <kbd>↵</kbd> open
+                </span>
+                <span>
+                  <kbd>esc</kbd> close
+                </span>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/search/GlobalSearchResults.tsx b/src/components/search/GlobalSearchResults.tsx
deleted file mode 100644
index 3d98626..0000000
--- a/src/components/search/GlobalSearchResults.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { CATEGORY_META } from '../../lib/categoryMeta';
-import { CATEGORY_ORDER } from '../../lib/constants';
-import { CollectibleRow } from '../CollectibleRow';
-import { EmptyState } from '../shared/EmptyState';
-import type { CategoryId } from '../../lib/types';
-import type { AnyItem } from '../../lib/utils';
-
-export function GlobalSearchResults({
-  results,
-  query,
-  donated,
-  onSelect,
-}: {
-  results: Record<CategoryId, AnyItem[]> | null;
-  query: string;
-  donated: Record<string, boolean>;
-  onSelect: (item: AnyItem, category: CategoryId) => void;
-}) {
-  if (!results) {
-    return (
-      <EmptyState message="Type above to search fish, bugs, fossils, art, and sea creatures at once." />
-    );
-  }
-
-  const hasAny = CATEGORY_ORDER.some(cat => results[cat].length > 0);
-
-  if (!hasAny) {
-    return <EmptyState message={`No items match "${query}".`} />;
-  }
-
-  return (
-    <div className="space-y-5">
-      {CATEGORY_ORDER.map(cat => {
-        const items = results[cat];
-        if (items.length === 0) return null;
-        const { label, Icon } = CATEGORY_META[cat];
-        return (
-          <div key={cat}>
-            <div className="flex items-center gap-2 mb-2 px-1">
-              <Icon className="w-3.5 h-3.5" style={{ color: '#7B5E3B' }} />
-              <span
-                className="text-xs font-semibold uppercase tracking-wider"
-                style={{ color: '#7B5E3B' }}
-              >
-                {label}
-              </span>
-              <span
-                className="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
-                style={{ backgroundColor: '#EDE3D0', color: '#5a4a35' }}
-              >
-                {items.length}
-              </span>
-            </div>
-            <div className="space-y-2">
-              {items.map(item => (
-                <CollectibleRow
-                  key={item.id}
-                  item={item}
-                  category={cat}
-                  checked={!!donated[item.id]}
-                  onClick={() => onSelect(item, cat)}
-                />
-              ))}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/src/components/search/SearchHistoryPopover.tsx b/src/components/search/SearchHistoryPopover.tsx
deleted file mode 100644
index 35064ee..0000000
--- a/src/components/search/SearchHistoryPopover.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { Clock } from 'lucide-react';
-
-export function SearchHistoryPopover({
-  searches,
-  onSelect,
-  onClear,
-}: {
-  searches: string[];
-  onSelect: (s: string) => void;
-  onClear: () => void;
-}) {
-  return (
-    <div
-      className="absolute top-full left-0 right-0 mt-1.5 z-30 rounded-[14px] overflow-hidden shadow-lg"
-      style={{ backgroundColor: '#FDF9F1', border: '1px solid #E7DAC4' }}
-    >
-      <div
-        className="flex items-center justify-between px-4 py-2.5"
-        style={{ borderBottom: '1px solid #E7DAC4' }}
-      >
-        <span
-          className="text-xs font-semibold uppercase tracking-wider"
-          style={{ color: '#5a4a35' }}
-        >
-          Recent Searches
-        </span>
-        <button
-          onClick={onClear}
-          className="text-xs font-medium"
-          style={{ color: '#3CA370' }}
-        >
-          Clear
-        </button>
-      </div>
-      {searches.length === 0 ? (
-        <div
-          className="px-4 py-3 text-sm"
-          style={{ color: '#5a4a35', opacity: 0.6 }}
-        >
-          No recent searches.
-        </div>
-      ) : (
-        searches.map(s => (
-          <button
-            key={s}
-            onClick={() => onSelect(s)}
-            className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-left transition"
-            style={{ color: '#2A2A2A', borderTop: '1px solid #E7DAC4' }}
-          >
-            <Clock className="w-3.5 h-3.5 shrink-0 opacity-50" />
-            {s}
-          </button>
-        ))
-      )}
-    </div>
-  );
-}
diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
deleted file mode 100644
index aa08666..0000000
--- a/src/hooks/useSearch.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-
-export function useSearch() {
-  const [globalQuery, setGlobalQuery] = useState('');
-  const [recentSearches, setRecentSearches] = useState<string[]>([]);
-  const [historyOpen, setHistoryOpen] = useState(false);
-  const historyRef = useRef<HTMLDivElement>(null);
-
-  function pushRecentSearch(term: string) {
-    const trimmed = term.trim();
-    if (!trimmed) return;
-    setRecentSearches(prev => {
-      const deduped = prev.filter(s => s !== trimmed);
-      return [trimmed, ...deduped].slice(0, 10);
-    });
-  }
-
-  useEffect(() => {
-    if (!historyOpen) return;
-    function handleOutside(e: MouseEvent) {
-      if (
-        historyRef.current &&
-        !historyRef.current.contains(e.target as Node)
-      ) {
-        setHistoryOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleOutside);
-    return () => document.removeEventListener('mousedown', handleOutside);
-  }, [historyOpen]);
-
-  return {
-    globalQuery,
-    setGlobalQuery,
-    recentSearches,
-    setRecentSearches,
-    historyOpen,
-    setHistoryOpen,
-    historyRef,
-    pushRecentSearch,
-  };
-}
diff --git a/src/index.css b/src/index.css
index 43586f2..895d4d5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -223,6 +223,204 @@
   min-width: 0;
 }
 
+/* ── Topbar + Global Search Dropdown ── */
+.ac-topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.ac-search-wrap { position: relative; flex: 1; max-width: 480px; }
+.ac-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 8px 14px;
+  transition: border-color 0.12s;
+}
+.ac-search:focus-within { border-color: var(--border-strong); }
+.ac-search input {
+  flex: 1;
+  border: none;
+  background: none;
+  outline: none;
+  font: inherit;
+  font-size: 13px;
+  color: var(--ink);
+  min-width: 0;
+}
+.ac-search input::placeholder { color: var(--ink-muted); }
+.ac-search-icon { color: var(--ink-muted); flex: none; }
+
+.ac-gs-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(20, 18, 12, 0.10);
+  z-index: 50;
+  max-height: 460px;
+  overflow-y: auto;
+  padding: 8px;
+  animation: ac-fade 0.12s ease;
+}
+@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
+
+.ac-gs-empty { padding: 22px 14px; text-align: center; }
+.ac-gs-empty-title {
+  font-family: var(--font-display, 'Fraunces'), Georgia, serif;
+  font-size: 16px;
+  color: var(--ink);
+  margin-bottom: 4px;
+}
+.ac-gs-empty-title em { font-style: italic; color: var(--accent-ink); }
+.ac-gs-empty-sub { font-size: 12px; color: var(--ink-muted); }
+.ac-gs-hint { margin-top: 14px; font-size: 11px; color: var(--ink-muted); }
+
+.ac-gs-section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 10px 6px;
+}
+.ac-gs-eyebrow {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+  color: var(--ink-muted);
+}
+.ac-gs-clear {
+  font-size: 11px;
+  color: var(--ink-muted);
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.ac-gs-clear:hover { background: var(--surface-alt); color: var(--ink); }
+
+.ac-gs-history { display: flex; flex-direction: column; gap: 1px; }
+.ac-gs-history-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--ink-soft);
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+}
+.ac-gs-history-row:hover { background: var(--surface-alt); color: var(--ink); }
+.ac-gs-history-icon { color: var(--ink-muted); font-size: 12px; }
+
+.ac-gs-group { margin-bottom: 6px; }
+.ac-gs-group-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px 4px;
+}
+.ac-gs-group-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
+.ac-gs-group-count {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.ac-gs-row {
+  width: 100%;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 8px;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.ac-gs-row:hover { background: var(--surface-alt); }
+.ac-gs-row-active { background: var(--accent-soft); }
+.ac-gs-row-glyph {
+  width: 28px;
+  height: 28px;
+  border: 1.5px solid;
+  border-radius: 6px;
+  display: grid;
+  place-items: center;
+  font-family: var(--font-display, 'Fraunces'), Georgia, serif;
+  font-size: 10px;
+  font-weight: 500;
+  flex: none;
+}
+.ac-gs-row-text { flex: 1; min-width: 0; }
+.ac-gs-row-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--ink);
+  font-weight: 500;
+}
+.ac-gs-row-donated {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent);
+  font-weight: 600;
+}
+.ac-gs-row-meta {
+  font-size: 11px;
+  color: var(--ink-muted);
+  margin-top: 1px;
+  text-transform: capitalize;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ac-gs-row-arrow {
+  color: var(--ink-muted);
+  font-size: 11px;
+  opacity: 0;
+  flex: none;
+}
+.ac-gs-row-active .ac-gs-row-arrow { opacity: 1; }
+
+.ac-gs-foot {
+  display: flex;
+  gap: 14px;
+  justify-content: center;
+  padding: 10px 8px 4px;
+  border-top: 1px solid var(--border);
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+.ac-gs-foot kbd,
+.ac-gs-hint kbd {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 1px 4px;
+  margin-right: 4px;
+}
+
 @media (max-width: 980px) {
   .ac-app { grid-template-columns: 1fr; }
   .ac-sidebar {
diff --git a/src/lib/viewTypes.ts b/src/lib/viewTypes.ts
index a0e499a..0de573d 100644
--- a/src/lib/viewTypes.ts
+++ b/src/lib/viewTypes.ts
@@ -7,7 +7,7 @@ import type {
   SeaCreature,
 } from './types';
 
-export type ViewId = CategoryId | 'home' | 'activity' | 'search' | 'analytics';
+export type ViewId = CategoryId | 'home' | 'activity' | 'analytics';
 
 export interface AllData {
   fish: Fish[];

From 639b7cbb6924d75d47626302bcfd8c45fc7b558d Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 22:52:28 -0400
Subject: [PATCH 17/28] fix(phase-8): commit query to history; remove duplicate
 keyframe

- GlobalSearchDropdown now commits the user's typed query (not the
  selected item name) into recent searches. commitSearch already trims
  and rejects empty strings.
- Removed duplicate @keyframes ac-fade in src/index.css (was defined
  twice with identical bodies); kept the earlier definition.

Addresses Copilot review comments on PR #75.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/search/GlobalSearchDropdown.tsx | 2 +-
 src/index.css                                  | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/search/GlobalSearchDropdown.tsx b/src/components/search/GlobalSearchDropdown.tsx
index 0bcdd86..47b131e 100644
--- a/src/components/search/GlobalSearchDropdown.tsx
+++ b/src/components/search/GlobalSearchDropdown.tsx
@@ -185,7 +185,7 @@ export function GlobalSearchDropdown({
   function selectIndex(idx: number) {
     const entry = flatList[idx];
     if (!entry) return;
-    commitSearch(entry.item.name);
+    commitSearch(query);
     onJump(entry.category, entry.item.id);
     setQuery('');
     setFocused(false);
diff --git a/src/index.css b/src/index.css
index 895d4d5..8c60599 100644
--- a/src/index.css
+++ b/src/index.css
@@ -609,7 +609,6 @@
   display: flex; justify-content: flex-end;
   animation: ac-fade 0.18s ease;
 }
-@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
 @keyframes ac-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 .ac-tm-drawer {
   width: 420px; max-width: 100vw;

From a7b99d7125d09c81cdce6bae32811f2bbbb22b34 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Sun, 3 May 2026 23:35:12 -0400
Subject: [PATCH 18/28] feat(v0.9 phase 9): rebuild StatsTab with per-category
 cards + yearly rhythm chart

Per-category card grid (3/4/5 cards gated by game data presence) above a
12-column "Yearly rhythm" availability chart with current-month accent
border. Sea creatures included in the chart for ACNL/ACNH (Decision 4),
hemisphere-aware via itemMonths(). Retires AnalyticsView and SectionCard.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                           |  14 +
 CLAUDE.md                              |   5 +-
 docs/v0.9-plan.md                      |   2 +-
 src/components/ACCanvas.tsx            |   8 +-
 src/components/StatsTab.tsx            | 159 ++++++++++
 src/components/views/AnalyticsView.tsx | 413 -------------------------
 src/components/views/SectionCard.tsx   |  43 ---
 src/index.css                          | 154 +++++++++
 8 files changed, 336 insertions(+), 462 deletions(-)
 create mode 100644 src/components/StatsTab.tsx
 delete mode 100644 src/components/views/AnalyticsView.tsx
 delete mode 100644 src/components/views/SectionCard.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffd7047..5768fe4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,20 @@ All notable changes to this project are documented here.
 
 ## [Unreleased] — v0.9.0-beta (in progress)
 
+### Added — Phase 9: StatsTab
+- **`StatsTab` component** (`src/components/StatsTab.tsx`) — replaces `AnalyticsView`. Renders per-category cards (3/4/5 cards, gated by game: fish/bugs/fossils always; art for ACGCN/ACNL/ACNH; sea for ACNL/ACNH) above a 12-column "Yearly rhythm" availability chart. Each card shows category eyebrow tinted with the matching `--chip-*` token, donated/total in Fraunces 32, a thin tinted progress bar, and "X% complete" caption.
+- **Yearly rhythm chart** — 12 stacked columns. Background bar height = `avail / maxAvail`; inner accent fill = `donated / avail`. Number above each column = items available that month. Current month column borders in `--accent`. Includes fish + bugs always; sea creatures added for ACNL/ACNH (Decision 4). Hemisphere-aware via `itemMonths(item, cat, hemisphere)`. Legend below: "Available" / "Already donated".
+- **Phase 9 CSS** appended to `src/index.css` — `.ac-stats`, `.ac-stats-grid` (responsive 3/4/5 → 2 → 1 columns at 980px / 480px), `.ac-statcard` / `-cat` / `-num` / `-of` / `-bar` / `-fill` / `-pct`, `.ac-chartcard`, `.ac-chart` / `-col` / `-bar` / `-bar-bg` / `-bar-fill` / `-num` / `-month`, `.ac-chart-legend` / `-dot` / `-dot-bg` / `-dot-fill`. Current-month column gets accent border via `.ac-chart-col.is-now`.
+
+### Removed — Phase 9
+- **`AnalyticsView`** (`src/components/views/AnalyticsView.tsx`) — superseded by `StatsTab`.
+- **`SectionCard`** (`src/components/views/SectionCard.tsx`) — its only consumer was `AnalyticsView`; new card primitives are inline.
+
+### Decisions — Phase 9
+- **Sea creatures included in the chart for ACNL/ACNH.** Per Decision 4, sea is a first-class category in nav/ProgressMeter/HomeTab/Search, so excluding it from the yearly rhythm would be inconsistent. ACGCN/ACWW/ACCF still chart only fish + bugs (no sea data exists for those games).
+- **3-letter month labels** (`Jan`/`Feb`/…) instead of the 1-letter mocks in the handoff — readable at the production sidebar layout width and at the 980px breakpoint.
+- **Card-count attribute drives grid sizing only.** The component derives the actual list of cards from `gameId` data presence (mirroring `getDataPaths`); `data-card-count` on the grid is set from `cards.length` purely so CSS can pick the right column template.
+
 ### Added — Phase 8: GlobalSearchDropdown
 - **`GlobalSearchDropdown` component** (`src/components/search/GlobalSearchDropdown.tsx`) — unified search dropdown anchored under a topbar input on the Home tab. Four states: empty + intro hint, empty + recent searches (history), no-match for query, and grouped category results. Shows up to 5 items per group, max 5 groups (fish, bugs, fossils, art, sea). Sea group gated on `gameId ∈ {ACNL, ACNH}` and non-empty data. Art search matches both `name` and `basedOn` (Decision 8 — "Leonardo" → Famous Painting). Each row shows category-tinted monogram glyph, name with `donated` badge, and meta line (habitat / location / part / basedOn / shadow + bells).
 - **Keyboard navigation** — `↑↓` move the active row, `↵` selects + jumps + closes, `Esc` closes the panel. Hovering a row also sets the active index.
diff --git a/CLAUDE.md b/CLAUDE.md
index 71a5ad8..54d78b1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -76,10 +76,11 @@ src/
     modals/
       DetailModal.tsx       # Item detail sheet
     TownManager.tsx         # Right-side drawer for switch/edit/create/delete towns (v0.9 Phase 4)
+    StatsTab.tsx            # v0.9 Phase 9: per-category cards (3/4/5 by game) +
+                            # 12-column yearly rhythm chart (fish + bugs always,
+                            # sea added for ACNL/ACNH). Replaces AnalyticsView.
     views/
-      AnalyticsView.tsx     # Charts + stats tab content
       ActivityFeed.tsx      # Recent donations list
-      SectionCard.tsx       # Reusable card wrapper
     search/
       GlobalSearchDropdown.tsx # v0.9 Phase 8: unified search dropdown — anchored
                                # under the Home topbar input. Grouped category
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 3e94ed9..1fff911 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -522,7 +522,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 9 — StatsTab
+### Phase 9 — StatsTab ✅
 
 **Branch:** `feature/v09-phase-9-stats`  
 **Goal:** Rebuild StatsTab with per-category cards and updated yearly rhythm chart.
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index acc4d23..d0b039e 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -20,7 +20,7 @@ import { DetailModal } from './modals/DetailModal';
 
 import { GlobalSearchDropdown } from './search/GlobalSearchDropdown';
 
-import { AnalyticsView } from './views/AnalyticsView';
+import { StatsTab } from './StatsTab';
 import { ActivityFeed } from './views/ActivityFeed';
 
 import { useMuseumData } from '../hooks/useMuseumData';
@@ -246,10 +246,12 @@ export default function ACCanvas() {
                   />
                 </>
               ) : activeTab === 'analytics' ? (
-                <AnalyticsView
+                <StatsTab
                   data={data}
+                  donated={activeTownDonated}
                   catCounts={catCounts}
-                  donatedAt={activeTownDonatedAt}
+                  gameId={activeTown?.gameId ?? 'ACGCN'}
+                  hemisphere={activeTown?.hemisphere ?? 'NH'}
                 />
               ) : activeTab === 'activity' ? (
                 <ActivityFeed donatedAt={activeTownDonatedAt} data={data} />
diff --git a/src/components/StatsTab.tsx b/src/components/StatsTab.tsx
new file mode 100644
index 0000000..07e6410
--- /dev/null
+++ b/src/components/StatsTab.tsx
@@ -0,0 +1,159 @@
+import { useMemo } from 'react';
+import { CATEGORY_LABELS, MONTH_NAMES } from '../lib/constants';
+import type { CategoryId, GameId } from '../lib/types';
+import type { AllData } from '../lib/viewTypes';
+import { itemMonths } from '../lib/utils';
+import type { AnyItem } from '../lib/utils';
+
+const GAMES_WITH_ART = new Set<GameId>(['ACGCN', 'ACNL', 'ACNH']);
+const GAMES_WITH_SEA = new Set<GameId>(['ACNL', 'ACNH']);
+
+function chipVar(cat: CategoryId): string {
+  if (cat === 'sea_creatures') return 'var(--chip-sea)';
+  return `var(--chip-${cat})`;
+}
+
+interface StatsTabProps {
+  data: AllData;
+  donated: Record<string, boolean>;
+  catCounts: Record<CategoryId, number>;
+  gameId: GameId;
+  hemisphere: 'NH' | 'SH';
+}
+
+export function StatsTab({
+  data,
+  donated,
+  catCounts,
+  gameId,
+  hemisphere,
+}: StatsTabProps) {
+  const cards = useMemo(() => {
+    const list: { cat: CategoryId; donated: number; total: number }[] = [
+      { cat: 'fish', donated: catCounts.fish, total: data.fish.length },
+      { cat: 'bugs', donated: catCounts.bugs, total: data.bugs.length },
+      {
+        cat: 'fossils',
+        donated: catCounts.fossils,
+        total: data.fossils.length,
+      },
+    ];
+    if (GAMES_WITH_ART.has(gameId)) {
+      list.push({ cat: 'art', donated: catCounts.art, total: data.art.length });
+    }
+    if (GAMES_WITH_SEA.has(gameId)) {
+      list.push({
+        cat: 'sea_creatures',
+        donated: catCounts.sea_creatures,
+        total: data.sea_creatures.length,
+      });
+    }
+    return list;
+  }, [data, catCounts, gameId]);
+
+  const currentMonth = new Date().getMonth() + 1;
+
+  const monthly = useMemo(() => {
+    const cats: CategoryId[] = ['fish', 'bugs'];
+    if (GAMES_WITH_SEA.has(gameId)) cats.push('sea_creatures');
+
+    const rows = MONTH_NAMES.map((_, i) => {
+      const m = i + 1;
+      let avail = 0;
+      let donatedCount = 0;
+      for (const cat of cats) {
+        for (const item of data[cat] as AnyItem[]) {
+          const months = itemMonths(item, cat, hemisphere);
+          if (months && months.includes(m)) {
+            avail++;
+            if (donated[item.id]) donatedCount++;
+          }
+        }
+      }
+      return { m, avail, donatedCount };
+    });
+    const maxAvail = Math.max(1, ...rows.map(r => r.avail));
+    return { rows, maxAvail };
+  }, [data, donated, gameId, hemisphere]);
+
+  return (
+    <div className="ac-stats">
+      <div className="ac-stats-grid" data-card-count={cards.length}>
+        {cards.map(({ cat, donated: d, total }) => {
+          const pct = total ? Math.round((d / total) * 100) : 0;
+          const fillPct = total ? (d / total) * 100 : 0;
+          const color = chipVar(cat);
+          return (
+            <div key={cat} className="ac-statcard">
+              <div className="ac-statcard-cat" style={{ color }}>
+                {CATEGORY_LABELS[cat]}
+              </div>
+              <div className="ac-statcard-num">
+                <span>{d}</span>
+                <span className="ac-statcard-of">/ {total}</span>
+              </div>
+              <div className="ac-statcard-bar">
+                <div
+                  className="ac-statcard-fill"
+                  style={{ width: `${fillPct}%`, background: color }}
+                />
+              </div>
+              <div className="ac-statcard-pct">{pct}% complete</div>
+            </div>
+          );
+        })}
+      </div>
+
+      <section className="ac-chartcard">
+        <header className="ac-shelf-head">
+          <div>
+            <div className="ac-eyebrow">Yearly rhythm</div>
+            <h2 className="ac-shelf-title">
+              {GAMES_WITH_SEA.has(gameId)
+                ? 'Fish, bug & sea availability by month'
+                : 'Fish & bug availability by month'}
+            </h2>
+          </div>
+        </header>
+        <div className="ac-chart">
+          {monthly.rows.map(({ m, avail, donatedCount }, i) => {
+            const bgHeight = (avail / monthly.maxAvail) * 100;
+            const fillHeight = avail > 0 ? (donatedCount / avail) * 100 : 0;
+            return (
+              <div
+                key={m}
+                className={`ac-chart-col${m === currentMonth ? ' is-now' : ''}`}
+              >
+                <div className="ac-chart-bar">
+                  <div
+                    className="ac-chart-bar-bg"
+                    style={{ height: `${bgHeight}%` }}
+                  >
+                    <div
+                      className="ac-chart-bar-fill"
+                      style={{ height: `${fillHeight}%` }}
+                    />
+                  </div>
+                </div>
+                <div className="ac-chart-num">{avail}</div>
+                <div className="ac-chart-month">
+                  {MONTH_NAMES[i].slice(0, 3)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <div className="ac-chart-legend">
+          <span>
+            <span className="ac-chart-legend-dot ac-chart-legend-dot-bg" />
+            Available
+          </span>
+          <span>
+            <span className="ac-chart-legend-dot ac-chart-legend-dot-fill" />
+            Already donated
+          </span>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/views/AnalyticsView.tsx b/src/components/views/AnalyticsView.tsx
deleted file mode 100644
index 914c3da..0000000
--- a/src/components/views/AnalyticsView.tsx
+++ /dev/null
@@ -1,413 +0,0 @@
-import React, { useMemo } from 'react';
-import { CATEGORY_META } from '../../lib/categoryMeta';
-import { CATEGORY_ORDER, MONTH_NAMES, SEASONS } from '../../lib/constants';
-import { SectionCard } from './SectionCard';
-import type { CategoryId, Fish as FishType, BugItem } from '../../lib/types';
-import type { AllData } from '../../lib/viewTypes';
-
-export function AnalyticsView({
-  data,
-  catCounts,
-  donatedAt,
-}: {
-  data: AllData;
-  catCounts: Record<CategoryId, number>;
-  donatedAt: Record<string, string>;
-}) {
-  const monthlyBuckets = useMemo(() => {
-    const map: Record<string, number> = {};
-    for (const iso of Object.values(donatedAt)) {
-      const d = new Date(iso);
-      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
-      map[key] = (map[key] ?? 0) + 1;
-    }
-    const sorted = Object.entries(map).sort(([a], [b]) => a.localeCompare(b));
-    const maxCount = sorted.reduce((m, [, v]) => Math.max(m, v), 0);
-    return { buckets: sorted, maxCount };
-  }, [donatedAt]);
-
-  const monthAvailability = useMemo(() => {
-    const donatedIds = new Set(Object.keys(donatedAt));
-    const counts = new Array(12).fill(0);
-    for (const cat of ['fish', 'bugs'] as const) {
-      for (const item of data[cat]) {
-        if (!donatedIds.has(item.id)) continue;
-        const months: number[] | undefined = (item as FishType | BugItem)
-          .months;
-        const active =
-          months && months.length > 0
-            ? months
-            : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-        for (const m of active) counts[m - 1]++;
-      }
-    }
-    const max = Math.max(...counts, 1);
-    return { counts, max };
-  }, [donatedAt, data]);
-
-  const seasonalData = useMemo(() => {
-    const donatedIds = new Set(Object.keys(donatedAt));
-    const counts: Record<string, number> = {
-      Spring: 0,
-      Summer: 0,
-      Fall: 0,
-      Winter: 0,
-    };
-    for (const cat of ['fish', 'bugs'] as const) {
-      for (const item of data[cat]) {
-        if (!donatedIds.has(item.id)) continue;
-        const months: number[] | undefined = (item as FishType | BugItem)
-          .months;
-        const active =
-          months && months.length > 0
-            ? months
-            : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-        for (const season of SEASONS) {
-          if (
-            active.some(m => (season.months as readonly number[]).includes(m))
-          ) {
-            counts[season.label]++;
-          }
-        }
-      }
-    }
-    const totalDonatedFishBugs = [...donatedIds].filter(
-      id => data.fish.some(f => f.id === id) || data.bugs.some(b => b.id === id)
-    ).length;
-    return { counts, total: totalDonatedFishBugs };
-  }, [donatedAt, data]);
-
-  const totalDonated = Object.keys(donatedAt).length;
-
-  return (
-    <div className="space-y-4">
-      <SectionCard title="Collection Progress">
-        {CATEGORY_ORDER.map((cat, i) => {
-          const { label, Icon } = CATEGORY_META[cat];
-          const donated = catCounts[cat];
-          const total = data[cat].length;
-          const pct = total ? Math.round((donated / total) * 100) : 0;
-          const complete = donated === total && total > 0;
-          return (
-            <div
-              key={cat}
-              style={{ marginBottom: i < CATEGORY_ORDER.length - 1 ? 14 : 0 }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 10,
-                  marginBottom: 6,
-                }}
-              >
-                <div
-                  style={{
-                    backgroundColor: '#EDE3D0',
-                    border: '1px solid #E7DAC4',
-                    borderRadius: 8,
-                    padding: 5,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon style={{ width: 14, height: 14, color: '#5a4a35' }} />
-                </div>
-                <span
-                  style={{
-                    flex: 1,
-                    fontSize: 13,
-                    fontWeight: 600,
-                    color: '#2A2A2A',
-                  }}
-                >
-                  {label}
-                </span>
-                <span style={{ fontSize: 12, color: '#5a4a35' }}>
-                  {donated}/{total}
-                </span>
-                <span
-                  style={{
-                    fontSize: 12,
-                    fontWeight: 600,
-                    color: complete ? '#C89A3A' : '#3CA370',
-                    minWidth: 36,
-                    textAlign: 'right',
-                  }}
-                >
-                  {pct}%
-                </span>
-              </div>
-              <div
-                style={{
-                  height: 10,
-                  backgroundColor: '#e9dcc3',
-                  borderRadius: 999,
-                  overflow: 'hidden',
-                }}
-              >
-                <div
-                  style={{
-                    height: '100%',
-                    width: `${pct}%`,
-                    backgroundColor: complete ? '#C89A3A' : '#3CA370',
-                    transition: 'width 0.5s ease',
-                    borderRadius: 999,
-                  }}
-                />
-              </div>
-            </div>
-          );
-        })}
-      </SectionCard>
-
-      <SectionCard
-        title="Donation Timeline"
-        subtitle={
-          totalDonated > 0
-            ? `${totalDonated} donation${totalDonated !== 1 ? 's' : ''}`
-            : undefined
-        }
-      >
-        {monthlyBuckets.buckets.length === 0 ? (
-          <div
-            className="rounded-[10px] border px-4 py-6 text-center text-sm"
-            style={{
-              borderColor: '#E7DAC4',
-              backgroundColor: '#F5E9D4',
-              color: '#5a4a35',
-            }}
-          >
-            No donations yet — timestamps will appear here once you start
-            donating.
-          </div>
-        ) : (
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'flex-end',
-              gap: 4,
-              height: 120,
-              padding: '0 2px',
-            }}
-          >
-            {monthlyBuckets.buckets.map(([key, count]) => {
-              const barHeightPct = (count / monthlyBuckets.maxCount) * 100;
-              const [year, month] = key.split('-');
-              const label = `${MONTH_NAMES[Number(month) - 1]} '${year.slice(2)}`;
-              return (
-                <div
-                  key={key}
-                  style={{
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 3,
-                    minWidth: 0,
-                  }}
-                >
-                  <span
-                    style={{
-                      fontSize: 9,
-                      color: '#5a4a35',
-                      opacity: 0.75,
-                      lineHeight: 1,
-                    }}
-                  >
-                    {count}
-                  </span>
-                  <div
-                    style={{
-                      width: '100%',
-                      height: `${Math.max(4, barHeightPct)}%`,
-                      maxHeight: 76,
-                      backgroundColor: '#3CA370',
-                      borderRadius: '3px 3px 0 0',
-                      transition: 'height 0.4s ease',
-                    }}
-                  />
-                  <span
-                    style={{
-                      fontSize: 9,
-                      color: '#5a4a35',
-                      opacity: 0.65,
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      maxWidth: '100%',
-                      textAlign: 'center',
-                      lineHeight: 1,
-                    }}
-                  >
-                    {label}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </SectionCard>
-
-      <SectionCard title="Monthly Availability">
-        <div style={{ fontSize: 12, color: '#5a4a35', marginBottom: 10 }}>
-          Donated fish &amp; bugs available each month
-        </div>
-        {totalDonated === 0 ? (
-          <div
-            className="rounded-[10px] border px-4 py-6 text-center text-sm"
-            style={{
-              borderColor: '#E7DAC4',
-              backgroundColor: '#F5E9D4',
-              color: '#5a4a35',
-            }}
-          >
-            Donate fish or bugs to see monthly availability.
-          </div>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            {MONTH_NAMES.map((name, i) => {
-              const count = monthAvailability.counts[i];
-              const barWidth = (count / monthAvailability.max) * 100;
-              return (
-                <div
-                  key={name}
-                  style={{ display: 'flex', alignItems: 'center', gap: 8 }}
-                >
-                  <div
-                    style={{
-                      width: 28,
-                      fontSize: 11,
-                      color: '#5a4a35',
-                      flexShrink: 0,
-                    }}
-                  >
-                    {name.slice(0, 3)}
-                  </div>
-                  <div
-                    style={{
-                      flex: 1,
-                      height: 10,
-                      backgroundColor: '#e9dcc3',
-                      borderRadius: 999,
-                      overflow: 'hidden',
-                    }}
-                  >
-                    <div
-                      style={{
-                        height: '100%',
-                        width: `${barWidth}%`,
-                        backgroundColor: '#3CA370',
-                        transition: 'width 0.4s ease',
-                        borderRadius: 999,
-                      }}
-                    />
-                  </div>
-                  <div
-                    style={{
-                      width: 18,
-                      fontSize: 12,
-                      fontWeight: 600,
-                      color: '#2A2A2A',
-                      textAlign: 'right',
-                      flexShrink: 0,
-                    }}
-                  >
-                    {count}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </SectionCard>
-
-      <SectionCard title="Seasonal Breakdown">
-        <div style={{ fontSize: 12, color: '#5a4a35', marginBottom: 10 }}>
-          Donated fish &amp; bugs available each season
-        </div>
-        {seasonalData.total === 0 ? (
-          <div
-            className="rounded-[10px] border px-4 py-6 text-center text-sm"
-            style={{
-              borderColor: '#E7DAC4',
-              backgroundColor: '#F5E9D4',
-              color: '#5a4a35',
-            }}
-          >
-            Donate fish or bugs to see seasonal availability.
-          </div>
-        ) : (
-          <div
-            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}
-          >
-            {SEASONS.map(season => {
-              const count = seasonalData.counts[season.label];
-              const pct =
-                seasonalData.total > 0
-                  ? Math.round((count / seasonalData.total) * 100)
-                  : 0;
-              const maxCount = Math.max(
-                ...SEASONS.map(s => seasonalData.counts[s.label]),
-                1
-              );
-              const barWidth = (count / maxCount) * 100;
-              return (
-                <div
-                  key={season.label}
-                  style={{
-                    backgroundColor: '#FFFDF6',
-                    border: '1px solid #E7DAC4',
-                    borderRadius: 12,
-                    padding: '12px 14px',
-                  }}
-                >
-                  <div
-                    style={{ fontSize: 11, color: '#5a4a35', marginBottom: 3 }}
-                  >
-                    {season.label}
-                  </div>
-                  <div
-                    style={{
-                      fontSize: 26,
-                      fontWeight: 700,
-                      color: '#2A2A2A',
-                      lineHeight: 1.1,
-                      marginBottom: 2,
-                    }}
-                  >
-                    {count}
-                  </div>
-                  <div
-                    style={{ fontSize: 11, color: '#5a4a35', marginBottom: 8 }}
-                  >
-                    {pct}% of donated
-                  </div>
-                  <div
-                    style={{
-                      height: 4,
-                      backgroundColor: '#e9dcc3',
-                      borderRadius: 999,
-                      overflow: 'hidden',
-                    }}
-                  >
-                    <div
-                      style={{
-                        height: '100%',
-                        width: `${barWidth}%`,
-                        backgroundColor: season.color,
-                        transition: 'width 0.4s ease',
-                        borderRadius: 999,
-                      }}
-                    />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </SectionCard>
-    </div>
-  );
-}
diff --git a/src/components/views/SectionCard.tsx b/src/components/views/SectionCard.tsx
deleted file mode 100644
index a61555a..0000000
--- a/src/components/views/SectionCard.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-
-export function SectionCard({
-  title,
-  subtitle,
-  children,
-}: {
-  title: string;
-  subtitle?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div
-      className="rounded-[14px] border"
-      style={{
-        borderColor: '#E7DAC4',
-        backgroundColor: '#FFFDF6',
-        padding: 16,
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'baseline',
-          gap: 8,
-          marginBottom: 14,
-        }}
-      >
-        <h2
-          style={{ fontSize: 14, fontWeight: 700, color: '#2A2A2A', margin: 0 }}
-        >
-          {title}
-        </h2>
-        {subtitle && (
-          <span style={{ fontSize: 11, color: '#5a4a35', opacity: 0.7 }}>
-            {subtitle}
-          </span>
-        )}
-      </div>
-      {children}
-    </div>
-  );
-}
diff --git a/src/index.css b/src/index.css
index 8c60599..9dd8a00 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1269,3 +1269,157 @@
   .ac-month-strip { padding: 10px 12px; gap: 2px; }
   .ac-month-cell { font-size: 10px; padding: 6px 0; }
 }
+
+/* ── StatsTab ── */
+.ac-stats { display: flex; flex-direction: column; gap: 28px; }
+.ac-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+.ac-stats-grid[data-card-count="5"] {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.ac-stats-grid[data-card-count="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.ac-statcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  min-width: 0;
+}
+.ac-statcard-cat {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+}
+.ac-statcard-num {
+  font-family: var(--font-display);
+  font-size: 32px;
+  margin-top: 4px;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+.ac-statcard-of { color: var(--ink-muted); font-size: 0.6em; margin-left: 4px; }
+.ac-statcard-bar {
+  height: 4px;
+  background: var(--surface-alt);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+.ac-statcard-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.4s ease;
+}
+.ac-statcard-pct { font-size: 11px; color: var(--ink-muted); margin-top: 6px; }
+
+.ac-chartcard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px;
+}
+.ac-chart {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 6px;
+  height: 180px;
+  margin-top: 18px;
+  align-items: end;
+}
+.ac-chart-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  min-width: 0;
+}
+.ac-chart-bar {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  min-height: 0;
+}
+.ac-chart-bar-bg {
+  width: 100%;
+  background: var(--surface-alt);
+  border-radius: 6px 6px 0 0;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-bottom: none;
+  transition: height 0.4s ease;
+}
+.ac-chart-bar-fill {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--accent);
+  opacity: 0.5;
+  transition: height 0.4s ease;
+}
+.ac-chart-num {
+  font-size: 11px;
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+.ac-chart-month {
+  font-size: 11px;
+  color: var(--ink-muted);
+  font-family: var(--font-display);
+}
+.ac-chart-col.is-now .ac-chart-bar-bg { border-color: var(--accent); }
+.ac-chart-col.is-now .ac-chart-month { color: var(--accent-ink); font-weight: 600; }
+.ac-chart-legend {
+  display: flex;
+  gap: 18px;
+  font-size: 11px;
+  color: var(--ink-muted);
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+.ac-chart-legend-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.ac-chart-legend-dot-bg {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+}
+.ac-chart-legend-dot-fill {
+  background: var(--accent);
+  opacity: 0.5;
+}
+
+@media (max-width: 980px) {
+  .ac-stats-grid,
+  .ac-stats-grid[data-card-count="5"],
+  .ac-stats-grid[data-card-count="3"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 480px) {
+  .ac-stats-grid,
+  .ac-stats-grid[data-card-count="5"],
+  .ac-stats-grid[data-card-count="3"] {
+    grid-template-columns: 1fr;
+  }
+  .ac-chart { height: 140px; gap: 4px; }
+  .ac-chart-month { font-size: 10px; }
+  .ac-chart-num { font-size: 10px; }
+}

From 3ddabbe217702ffd95d53fc1a34e36effb31cef1 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 00:03:43 -0400
Subject: [PATCH 19/28] feat(data): ACWW + ACCF art data (closes #74)

- public/data/acww/art.json: 20 paintings (Wikibooks-sourced)
- public/data/accf/art.json: 23 paintings (Bea-curated list)
- Schema matches acnl/art.json; basedOn strings reuse ACNL phrasing
  verbatim where the real-world reference matches.

Closes #74
---
 CHANGELOG.md              |  6 ++++++
 public/data/accf/art.json | 25 +++++++++++++++++++++++++
 public/data/acww/art.json | 22 ++++++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 public/data/accf/art.json
 create mode 100644 public/data/acww/art.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5768fe4..d828d09 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,12 @@ All notable changes to this project are documented here.
 - **3-letter month labels** (`Jan`/`Feb`/…) instead of the 1-letter mocks in the handoff — readable at the production sidebar layout width and at the 980px breakpoint.
 - **Card-count attribute drives grid sizing only.** The component derives the actual list of cards from `gameId` data presence (mirroring `getDataPaths`); `data-card-count` on the grid is set from `cards.length` purely so CSS can pick the right column template.
 
+### Added — Art data for ACWW + ACCF
+- **`public/data/acww/art.json`** — 20 paintings sourced from Wikibooks (`Animal_Crossing:_Wild_World/Paintings`). Schema matches `acnl/art.json` (`id`, `name`, `basedOn`).
+- **`public/data/accf/art.json`** — 23 paintings. City Folk adds 7 over Wild World (dynamic, jolly, moody, proper, scenic, serene, wistful) and drops 4 (dainty, lovely, opulent, rare). `basedOn` strings reuse ACNL phrasing verbatim wherever the real-world reference matches, so cross-game search stays consistent.
+- **Loader fix** (`src/lib/categoryMeta.ts`) — added `'ACWW'` and `'ACCF'` to `GAMES_WITH_ART` so `getDataPaths()` actually fetches the new files. Sidebar's `data.art.length > 0` gate then lights up the tab. Includes corresponding 4-card StatsTab grid (fish/bugs/fossils/art) for both games.
+- Closes #74.
+
 ### Added — Phase 8: GlobalSearchDropdown
 - **`GlobalSearchDropdown` component** (`src/components/search/GlobalSearchDropdown.tsx`) — unified search dropdown anchored under a topbar input on the Home tab. Four states: empty + intro hint, empty + recent searches (history), no-match for query, and grouped category results. Shows up to 5 items per group, max 5 groups (fish, bugs, fossils, art, sea). Sea group gated on `gameId ∈ {ACNL, ACNH}` and non-empty data. Art search matches both `name` and `basedOn` (Decision 8 — "Leonardo" → Famous Painting). Each row shows category-tinted monogram glyph, name with `donated` badge, and meta line (habitat / location / part / basedOn / shadow + bells).
 - **Keyboard navigation** — `↑↓` move the active row, `↵` selects + jumps + closes, `Esc` closes the panel. Hovering a row also sets the active index.
diff --git a/public/data/accf/art.json b/public/data/accf/art.json
new file mode 100644
index 0000000..cdddb7e
--- /dev/null
+++ b/public/data/accf/art.json
@@ -0,0 +1,25 @@
+[
+  { "id": "amazing-painting", "name": "Amazing Painting", "basedOn": "The Night Watch by Rembrandt" },
+  { "id": "basic-painting", "name": "Basic Painting", "basedOn": "The Blue Boy by Thomas Gainsborough" },
+  { "id": "calm-painting", "name": "Calm Painting", "basedOn": "A Sunday on La Grande Jatte by Georges Seurat" },
+  { "id": "common-painting", "name": "Common Painting", "basedOn": "The Gleaners by Jean-François Millet" },
+  { "id": "dynamic-painting", "name": "Dynamic Painting", "basedOn": "The Great Wave off Kanagawa by Katsushika Hokusai" },
+  { "id": "famous-painting", "name": "Famous Painting", "basedOn": "Mona Lisa by Leonardo da Vinci" },
+  { "id": "fine-painting", "name": "Fine Painting", "basedOn": "Arearea by Paul Gauguin" },
+  { "id": "flowery-painting", "name": "Flowery Painting", "basedOn": "Sunflowers by Vincent van Gogh" },
+  { "id": "jolly-painting", "name": "Jolly Painting", "basedOn": "Summer by Giuseppe Arcimboldo" },
+  { "id": "moody-painting", "name": "Moody Painting", "basedOn": "The Sower by Jean-François Millet" },
+  { "id": "moving-painting", "name": "Moving Painting", "basedOn": "The Birth of Venus by Sandro Botticelli" },
+  { "id": "nice-painting", "name": "Nice Painting", "basedOn": "The Fifer by Édouard Manet" },
+  { "id": "perfect-painting", "name": "Perfect Painting", "basedOn": "Still Life with Apples and Oranges by Paul Cézanne" },
+  { "id": "proper-painting", "name": "Proper Painting", "basedOn": "A Bar at the Folies-Bergère by Édouard Manet" },
+  { "id": "quaint-painting", "name": "Quaint Painting", "basedOn": "The Milkmaid by Johannes Vermeer" },
+  { "id": "scary-painting", "name": "Scary Painting", "basedOn": "Otani Oniji II by Toshusai Sharaku" },
+  { "id": "scenic-painting", "name": "Scenic Painting", "basedOn": "The Hunters in the Snow by Pieter Bruegel the Elder" },
+  { "id": "serene-painting", "name": "Serene Painting", "basedOn": "Lady with an Ermine by Leonardo da Vinci" },
+  { "id": "solemn-painting", "name": "Solemn Painting", "basedOn": "Las Meninas by Diego Velázquez" },
+  { "id": "strange-painting", "name": "Strange Painting", "basedOn": "Ambassadeurs: Aristide Bruant by Henri de Toulouse-Lautrec" },
+  { "id": "warm-painting", "name": "Warm Painting", "basedOn": "La maja vestida by Francisco Goya" },
+  { "id": "wistful-painting", "name": "Wistful Painting", "basedOn": "Girl with a Pearl Earring by Johannes Vermeer" },
+  { "id": "worthy-painting", "name": "Worthy Painting", "basedOn": "Liberty Leading the People by Eugène Delacroix" }
+]
diff --git a/public/data/acww/art.json b/public/data/acww/art.json
new file mode 100644
index 0000000..fd7a70d
--- /dev/null
+++ b/public/data/acww/art.json
@@ -0,0 +1,22 @@
+[
+  { "id": "amazing-painting", "name": "Amazing Painting", "basedOn": "The Night Watch by Rembrandt" },
+  { "id": "basic-painting", "name": "Basic Painting", "basedOn": "The Blue Boy by Thomas Gainsborough" },
+  { "id": "calm-painting", "name": "Calm Painting", "basedOn": "A Sunday on La Grande Jatte by Georges Seurat" },
+  { "id": "common-painting", "name": "Common Painting", "basedOn": "The Gleaners by Jean-François Millet" },
+  { "id": "dainty-painting", "name": "Dainty Painting", "basedOn": "Ballet by Edgar Degas" },
+  { "id": "famous-painting", "name": "Famous Painting", "basedOn": "Mona Lisa by Leonardo da Vinci" },
+  { "id": "fine-painting", "name": "Fine Painting", "basedOn": "Arearea by Paul Gauguin" },
+  { "id": "flowery-painting", "name": "Flowery Painting", "basedOn": "Sunflowers by Vincent van Gogh" },
+  { "id": "lovely-painting", "name": "Lovely Painting", "basedOn": "Irène Cahen d'Anvers by Pierre-Auguste Renoir" },
+  { "id": "moving-painting", "name": "Moving Painting", "basedOn": "The Birth of Venus by Sandro Botticelli" },
+  { "id": "nice-painting", "name": "Nice Painting", "basedOn": "The Fifer by Édouard Manet" },
+  { "id": "opulent-painting", "name": "Opulent Painting", "basedOn": "Zodiac by Alphonse Mucha" },
+  { "id": "perfect-painting", "name": "Perfect Painting", "basedOn": "Apples and Oranges by Paul Cézanne" },
+  { "id": "quaint-painting", "name": "Quaint Painting", "basedOn": "The Milkmaid by Johannes Vermeer" },
+  { "id": "rare-painting", "name": "Rare Painting", "basedOn": "The Kiss by Gustav Klimt" },
+  { "id": "scary-painting", "name": "Scary Painting", "basedOn": "Otani Oniji II by Toshusai Sharaku" },
+  { "id": "solemn-painting", "name": "Solemn Painting", "basedOn": "Las Meninas by Diego Velázquez" },
+  { "id": "strange-painting", "name": "Strange Painting", "basedOn": "Ambassadeurs: Aristide Bruant by Henri de Toulouse-Lautrec" },
+  { "id": "warm-painting", "name": "Warm Painting", "basedOn": "La maja vestida by Francisco Goya" },
+  { "id": "worthy-painting", "name": "Worthy Painting", "basedOn": "Liberty Leading the People by Eugène Delacroix" }
+]

From a75858978e314b326fb961354cf9d81a16094af2 Mon Sep 17 00:00:00 2001
From: Brock <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 00:14:57 -0400
Subject: [PATCH 20/28] Perfect painting fix

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 public/data/accf/art.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/data/accf/art.json b/public/data/accf/art.json
index cdddb7e..cb88a21 100644
--- a/public/data/accf/art.json
+++ b/public/data/accf/art.json
@@ -11,7 +11,7 @@
   { "id": "moody-painting", "name": "Moody Painting", "basedOn": "The Sower by Jean-François Millet" },
   { "id": "moving-painting", "name": "Moving Painting", "basedOn": "The Birth of Venus by Sandro Botticelli" },
   { "id": "nice-painting", "name": "Nice Painting", "basedOn": "The Fifer by Édouard Manet" },
-  { "id": "perfect-painting", "name": "Perfect Painting", "basedOn": "Still Life with Apples and Oranges by Paul Cézanne" },
+  { "id": "perfect-painting", "name": "Perfect Painting", "basedOn": "Apples and Oranges by Paul Cézanne" },
   { "id": "proper-painting", "name": "Proper Painting", "basedOn": "A Bar at the Folies-Bergère by Édouard Manet" },
   { "id": "quaint-painting", "name": "Quaint Painting", "basedOn": "The Milkmaid by Johannes Vermeer" },
   { "id": "scary-painting", "name": "Scary Painting", "basedOn": "Otani Oniji II by Toshusai Sharaku" },

From c8202d7512829d337bd24bb2be636542a4e258db Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 00:21:24 -0400
Subject: [PATCH 21/28] fix(data-loader): include ACWW + ACCF in GAMES_WITH_ART

The art.json files were added in the prior commit but the loader's
GAMES_WITH_ART set still excluded ACWW and ACCF, so getDataPaths
returned null for art on those games and the sidebar's
data.art.length === 0 gate hid the tab.
---
 src/lib/categoryMeta.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/categoryMeta.ts b/src/lib/categoryMeta.ts
index 2902787..4e9edbc 100644
--- a/src/lib/categoryMeta.ts
+++ b/src/lib/categoryMeta.ts
@@ -25,7 +25,13 @@ const GAME_DATA_DIR: Partial<Record<GameId, string>> = {
   ACNH: '/data/acnh',
 };
 
-const GAMES_WITH_ART = new Set<GameId>(['ACGCN', 'ACNL', 'ACNH']);
+const GAMES_WITH_ART = new Set<GameId>([
+  'ACGCN',
+  'ACWW',
+  'ACCF',
+  'ACNL',
+  'ACNH',
+]);
 const GAMES_WITH_SEA_CREATURES = new Set<GameId>(['ACNL', 'ACNH']);
 
 /** Returns per-category fetch paths for the given game. Null means no data file for that category/game combo. */

From 9c677004e3d381014d62684884e272c7c9ed3578 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 00:32:36 -0400
Subject: [PATCH 22/28] fix(stats): make StatsTab card grid data-driven for
 art/sea
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 9 hardcoded a local GAMES_WITH_ART set in StatsTab that excluded
ACWW/ACCF, so even after the categoryMeta fix the card grid still
rendered only 3 cards on those games. Switch the art and sea_creatures
gates to check data[cat].length > 0, matching the sidebar's philosophy.
Chart cats list left alone — art has no monthly availability.
---
 src/components/StatsTab.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/StatsTab.tsx b/src/components/StatsTab.tsx
index 07e6410..3362bbc 100644
--- a/src/components/StatsTab.tsx
+++ b/src/components/StatsTab.tsx
@@ -5,7 +5,6 @@ import type { AllData } from '../lib/viewTypes';
 import { itemMonths } from '../lib/utils';
 import type { AnyItem } from '../lib/utils';
 
-const GAMES_WITH_ART = new Set<GameId>(['ACGCN', 'ACNL', 'ACNH']);
 const GAMES_WITH_SEA = new Set<GameId>(['ACNL', 'ACNH']);
 
 function chipVar(cat: CategoryId): string {
@@ -38,10 +37,10 @@ export function StatsTab({
         total: data.fossils.length,
       },
     ];
-    if (GAMES_WITH_ART.has(gameId)) {
+    if (data.art.length > 0) {
       list.push({ cat: 'art', donated: catCounts.art, total: data.art.length });
     }
-    if (GAMES_WITH_SEA.has(gameId)) {
+    if (data.sea_creatures.length > 0) {
       list.push({
         cat: 'sea_creatures',
         donated: catCounts.sea_creatures,
@@ -49,7 +48,7 @@ export function StatsTab({
       });
     }
     return list;
-  }, [data, catCounts, gameId]);
+  }, [data, catCounts]);
 
   const currentMonth = new Date().getMonth() + 1;
 

From f5f573ae26558f7ec81f84a6f377c889ad9d0cff Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 00:34:40 -0400
Subject: [PATCH 23/28] chore(docs): v0.9 doc sweep through Phase 9
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bring repo documentation in sync with v0.9.0-beta as Phases 1–9 have
shipped to `development`. No code changes — docs only.

- CLAUDE.md: rewrite version banner, design system block, file tree,
  ACCanvas section, and roadmap to reflect Phases 1–9 (Sidebar,
  TownManager, SettingsPage/Route, CategoryTab/StatsTab, ProgressMeter,
  GlobalSearchDropdown, useJumpToRow, useUIStore, Meadow tokens +
  Fraunces/Inter); flag CategoryProgress as dead pending cleanup; note
  retired components (MuseumHeader, TabBar, TownSwitcher, useSearch,
  AnalyticsView, SectionCard, GlobalSearchBar/Results/HistoryPopover,
  CreateTownModal, EditTownModal, TownNameFields).
- docs/v0.9-plan.md: mark Phases 3, 4, 5, 7, 8, 9 ✅ with PR refs;
  expand Phase 6 ✅ to call out Issue #71; mark Phase 10 ⏳ pending;
  update doc-level status header.
- docs/architecture.md: rewrite as a thin pointer to the canonical
  `.claude/rules/architecture.md` to avoid drift.
- .claude/rules/architecture.md: full rewrite for v0.9 — new shell,
  store actions (resetActiveTownDonations, resetAll), useUIStore,
  Decision 1 (game immutable), Decision 5 (no playerName), highlight
  wiring (Decision 10), Phase 8 search routing.
- .claude/rules/dev-process.md: fix stale dev preview URL.
- README.md: update feature list to describe sidebar, TownManager,
  CategoryTab sectioning, GlobalSearchDropdown, StatsTab, Settings;
  bump version reference text.
- docs/decisions.md: add a 2026-05-03 pointer entry directing readers
  to docs/v0.9-plan.md § 4 for v0.9 locked decisions.

Note: public/version-history.html dev-preview link is current; flagged
in PR but not modified.

Verified: npm run build (clean), npm test (63 passed).
---
 .claude/rules/architecture.md |  89 +++++++++++++++---------
 .claude/rules/dev-process.md  |   2 +-
 CLAUDE.md                     | 123 ++++++++++++++++++++++++----------
 README.md                     |  20 +++---
 docs/architecture.md          | 104 +++++-----------------------
 docs/decisions.md             |  10 +++
 docs/v0.9-plan.md             |  18 ++---
 7 files changed, 190 insertions(+), 176 deletions(-)

diff --git a/.claude/rules/architecture.md b/.claude/rules/architecture.md
index 319766f..1c1ac21 100644
--- a/.claude/rules/architecture.md
+++ b/.claude/rules/architecture.md
@@ -1,49 +1,74 @@
-# Architecture Reference (v0.8)
+# Architecture Reference (v0.9.0-beta)
 
 ## Stack
-Vite + React 19 + TypeScript + Tailwind CSS v4 + Zustand (persist middleware) + React Router v6
+Vite + React 19 + TypeScript + Tailwind CSS v4 + Zustand (persist + non-persisted UI store) + React Router v6. Meadow design tokens (CSS custom properties in `src/index.css` `@theme`); Fraunces (display) + Inter (UI).
 
 ## Key Files
-- `src/lib/store.ts` — Zustand store, persist v3, 3-level donation schema
-- `src/lib/types.ts` — GameId union, Town, Game interface, GAMES registry
-- `src/lib/constants.ts` — MONTH_NAMES, CATEGORY_LABELS, SEASONS (single source of truth)
-- `src/lib/colors.ts` — design token hex constants
-- `src/lib/categoryMeta.ts` — CATEGORY_META constant (label/Icon/file per category)
-- `src/lib/viewTypes.ts` — ViewId and AllData types
-- `src/lib/storeMigrations.ts` — Zustand migrate callback (v1→v2→v3; backfills gameId, then hemisphere)
-- `src/lib/bootstrapMigration.ts` — one-time localStorage key rename, called in main.tsx before createRoot
-- `src/hooks/useHydration.ts` — onFinishHydration guard, prevents flash of empty state
-- `src/hooks/useMuseumData.ts` — fetches and caches all category JSONs for the active town's game (including sea creatures for ACNH); accepts `gameId` and fetches from `/data/<game>/`; re-fetches when active town's game changes
-- `src/hooks/useSearch.ts` — search history, click-outside, debounce
-- `src/hooks/useCategoryStats.ts` — memoized donated counts per category
-- `src/components/ErrorBoundary.tsx` — wraps app root, crashes show ErrorState not blank page
-- `src/components/ACCanvas.tsx` — ~298-line orchestration shell; decomposition complete (v0.7 PR #25); wires ItemExpandPanel inline-expand and DetailModal bottom-sheet
-- `src/components/ItemExpandPanel.tsx` — inline accordion panel for Fish/Bugs/Fossils rows (month grid, bells, habitat, donate toggle)
-- `src/components/shared/` — HabitatChip, DonateToggle, CategoryProgress, SearchBar, EmptyState, MonthGrid
-- `src/components/modals/` — CreateTownModal (game selector, new town form), EditTownModal, DetailModal (bottom-sheet for Art + Search results)
-- `src/components/views/` — AnalyticsView, ActivityFeed, SectionCard
-- `src/components/search/` — GlobalSearchBar, GlobalSearchResults, SearchHistoryPopover
-- `src/components/CollectibleRow.tsx`, `TownSwitcher.tsx`, `MuseumHeader.tsx`, `TabBar.tsx`
-- `public/data/<gameId>/` — item data files for all 5 games: acgcn/, acww/, accf/, acnl/, acnh/ all present
+
+### State + data
+- `src/lib/store.ts` — Zustand app store, persist key `ac-web` schema v3, 3-level donation schema. `createTown(name, gameId, hemisphere?)`, `updateTown(id, patch: { name?, hemisphere? })` — `gameId` is intentionally not patchable post-create (Decision 1). Includes `resetActiveTownDonations()` + `resetAll()` for the Phase 3 Settings danger zone.
+- `src/lib/uiStore.ts` — non-persisted Zustand store for transient UI state (`townManagerOpen`, `townManagerForceCreate`).
+- `src/lib/types.ts` — GameId union, `Town` (no longer has `playerName` — removed in Phase 4 / Decision 5), Game interface, GAMES registry, GAME_LIST.
+- `src/lib/constants.ts` — MONTH_NAMES, CATEGORY_LABELS, CATEGORY_ORDER, SEASONS.
+- `src/lib/colors.ts` — `meadow` token export (mirrors CSS custom properties), `fontStacks` for Fraunces/Inter, legacy `colors` retained until consumers retire.
+- `src/lib/categoryMeta.ts` — CATEGORY_META (label / Icon / file / data presence per game).
+- `src/lib/viewTypes.ts` — ViewId union and AllData shape. Phase 8 removed the `'search'` route.
+- `src/lib/storeMigrations.ts` — Zustand migrate callback v1→v2 (gameId backfill) and v2→v3 (hemisphere backfill).
+- `src/lib/bootstrapMigration.ts` — one-time localStorage key rename, called in main.tsx before createRoot.
+
+### Hooks
+- `src/hooks/useHydration.ts` — onFinishHydration guard.
+- `src/hooks/useMuseumData.ts` — fetches all category JSONs for the active town's game (sea creatures included for ACNL/ACNH); re-fetches when active town's game changes.
+- `src/hooks/useCategoryStats.ts` — memoized donated counts per category.
+- `src/hooks/useJumpToRow.ts` — Phase 6 navigation helper. Pushes `/town/:townId/:tab` and sets `highlightId` on the next animation frame; ACCanvas's effect picks up the change and scrolls + pulses the matching row.
+- (`useSearch` retired in Phase 8 — search state lives inside GlobalSearchDropdown.)
+
+### Components — shell
+- `src/components/Sidebar.tsx` — 280px sticky left sidebar (Phase 2). Brand, active-town card, NavLink nav with per-category counts, Export CSV / Settings footer. "Switch town ›" opens TownManager via useUIStore.
+- `src/components/TownManager.tsx` — right-side drawer (bottom sheet ≤720px) mounted at App layout level (Phase 4). Switch / inline-edit / create / delete towns. Edit form is name + (ACNH-only) hemisphere; game is read-only post-create.
+- `src/components/SettingsPage.tsx` + `SettingsRoute.tsx` — `/settings` route (Phase 3). About + Danger zone only (no Appearance, Decision 3).
+- `src/components/ACCanvas.tsx` — orchestration shell. Owns `highlightId` state. Mounts active tab; wires GlobalSearchDropdown topbar (Home only) and DetailModal (art).
+- `src/components/ErrorBoundary.tsx` / `ErrorBanner.tsx` / `ErrorState.tsx`.
+
+### Components — tabs
+- `src/components/HomeTab.tsx` — Phase 6 rebuild. Hero stat + ProgressMeter, month strip, "Leaving end of {month}" shelf, "Just arrived" shelf, latest donations. Cards fire `jumpTo`.
+- `src/components/CategoryTab.tsx` — Phase 7. Sections: Leaving this month / Available now / Out of season / Already donated. Owns expandedId; reacts to `highlightId`. Hosts per-tab `SearchBar`. Routes art clicks to DetailModal instead of inline expand.
+- `src/components/StatsTab.tsx` — Phase 9. Per-category cards (3/4/5 by game) + 12-column yearly rhythm chart. Replaces AnalyticsView.
+- `src/components/ProgressMeter.tsx` (+ `progressMeterUtils.ts`, `ProgressMeter.test.ts`) — Phase 6. 4 segments (fish/bugs/fossils/art) for ACGCN/ACWW/ACCF; 5 segments (+ sea) for ACNL/ACNH. `.ac-meter-5` modifier handles responsive wrapping.
+
+### Components — rows + panels
+- `src/components/CollectibleRow.tsx` — Phase 5 restyle. Monogram glyph, meta line with `·` separators, leaving/new pills, animated chevron. Stamps `data-row-id`. Donate UI lives in the expand panel only.
+- `src/components/ItemExpandPanel.tsx` — Phase 5 rebuild. Two-column grid: MonthGrid + stats stack (bells / shadow / hours / notes) + donate button.
+- `src/components/shared/` — DonateToggle, EmptyState, HabitatChip, MonthGrid (Phase 5 re-skin, accepts `current` prop), SearchBar (per-tab, used by CategoryTab). `CategoryProgress.tsx` is dead — file remains pending cleanup.
+- `src/components/modals/DetailModal.tsx` — bottom-sheet detail. Used by Art and as a fallback in some paths.
+- `src/components/views/ActivityFeed.tsx` — recent donations list (consumed by HomeTab). `AnalyticsView` and `SectionCard` retired in Phase 9.
+- `src/components/search/GlobalSearchDropdown.tsx` — Phase 8 unified search dropdown (anchored under Home topbar). Grouped category results (5 groups for ACNL/ACNH, 4 elsewhere), keyboard nav (↑↓↵esc), search history at localStorage key `ac-curator-search-history` (max 8). Replaces GlobalSearchBar / GlobalSearchResults / SearchHistoryPopover.
+
+### Data
+- `public/data/<gameId>/` — `acgcn/`, `acww/`, `accf/`, `acnl/`, `acnh/` all present. Sea creatures for ACNL + ACNH. Art for ACGCN + ACNH today; ACWW + ACCF art incoming via PR #78 (closes Issue #74).
 
 ## Store Schema (v3)
 ```
 donated: Record<townId, Record<gameId, Record<itemId, boolean>>>
 donatedAt: Record<townId, Record<gameId, Record<itemId, string>>>
-towns: Town[]  // each Town has id, name, playerName, gameId, hemisphere ('NH'|'SH'), createdAt
+towns: Town[]  // Town: id, name, gameId, hemisphere ('NH'|'SH'), createdAt
 ```
-CRITICAL: callers use getActiveTown().gameId to scope donations — store handles the 3rd level.
-`hemisphere` defaults to 'NH'; only used for ACNH month display (months_nh / months_sh).
+CRITICAL: callers use `getActiveTown().gameId` to scope donations — store handles the 3rd level. `hemisphere` defaults to `'NH'`; only meaningful for ACNH (drives months_nh / months_sh).
 
 ## Multi-Game Support
 - GameId = 'ACGCN' | 'ACWW' | 'ACCF' | 'ACNL' | 'ACNH'
-- Data files use game-local IDs (sea-bass in ACGCN == sea-bass in ACWW — schema handles scoping)
-- Only show games with data files present in CreateTownModal
+- Data files use game-local IDs; the schema scopes by gameId.
+- Game is **immutable post-create** (Decision 1). Only display games with data files in TownManager's create form.
+
+## Scroll-to + highlight (Decision 10)
+`ACCanvas` owns `highlightId`. Setters: HomeTab (via `useJumpToRow`) and `GlobalSearchDropdown.onJump` both `setTab + setHighlightId`. `CategoryTab` opens the matching row, scrolls (`block: 'center'`, smooth) on the next animation frame, and adds `.ac-row-pulse` (1.4s `@keyframes ac-row-pulse`). Rows stamp `data-row-id={item.id}`. The state clears after the pulse so re-jumping the same id retriggers.
 
 ## Dev Preview
-https://development-animalcrossingwebapp.vercel.app/ — auto-deploys from `development` branch via Vercel GitHub integration. Never run `vercel` CLI manually.
+https://development-animalcrossingwebapp.vercel.app/ — auto-deploys from `development` via Vercel GitHub integration. Never run `vercel` CLI manually.
 
 ## Reference Docs
-- docs/v0.7-audit.md — full ranked audit (P0/P1/P2)
-- docs/v0.7-architecture-proposal.md — approved design decisions
-- docs/dev-process.md — full dev process (this is the .claude/rules/ version)
+- `docs/v0.9-plan.md` — canonical v0.9 implementation plan + locked decisions
+- `docs/decisions.md` — reverse-chronological decision log
+- `docs/design-handoffs/` — v0.9 / v0.9.1 / v0.9.2 design specs
+- `docs/v0.7-audit.md` / `docs/v0.7-architecture-proposal.md` — multi-game foundation history
+- `docs/dev-process.md` — full dev process
diff --git a/.claude/rules/dev-process.md b/.claude/rules/dev-process.md
index 19aa6ef..f4344a9 100644
--- a/.claude/rules/dev-process.md
+++ b/.claude/rules/dev-process.md
@@ -7,7 +7,7 @@ Every feature, fix, or change must follow this checklist before the PR is comple
 3. CHANGELOG.md updated with entry under the current version section
 4. CLAUDE.md updated if any of these changed: file structure, new components/hooks/utils, architecture, commands, known issues, version number
 5. Tests pass — run `npm run build` and `npm test` before pushing
-6. Dev preview tested at https://animalcrossingwebapp-git-development-jacuzzicodings-projects.vercel.app for any user-visible changes
+6. Dev preview tested at https://development-animalcrossingwebapp.vercel.app for any user-visible changes
 7. Version references kept current (CLAUDE.md, README.md)
 
 ## PR Description Requirements
diff --git a/CLAUDE.md b/CLAUDE.md
index 54d78b1..a18f8fa 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,7 +16,7 @@ See `docs/architecture.md` — deep architectural context (store schema, migrati
 ## Project Overview
 
 Animal Crossing multi-game companion web app. Tracks museum donations (fish, bugs, fossils, art) across multiple towns and games.
-Cozy parchment/GameCube museum aesthetic. **Last stable: v0.8.2-alpha (shipped 2026-05-01). Active development: v0.9.0-beta — Phase 2 (sidebar shell) shipped; see `docs/v0.9-plan.md` for canonical plan.**
+Meadow design language (Fraunces + Inter, moss-green accent) as of v0.9. **Last stable: v0.8.2-alpha (shipped 2026-05-01). Active development: v0.9.0-beta — Phases 1–9 shipped to `development`; Phase 10 (mobile responsive verification) pending. See `docs/v0.9-plan.md` for canonical plan.**
 Live at: https://animalcrossingwebapp.vercel.app | Dev preview: https://development-animalcrossingwebapp.vercel.app
 
 ## Commands
@@ -33,14 +33,16 @@ npm install       # Install dependencies
 ## Architecture
 
 **Framework:** Vite + React 19 + TypeScript  
-**Styling:** Tailwind CSS v4 (utility classes only; design tokens via `src/lib/colors.ts` — inline hex)  
-**State:** Zustand ^5 with `persist` middleware (localStorage key: `ac-web`, schema v3)  
+**Styling:** Tailwind CSS v4 + Meadow CSS custom properties (`@theme` block in `src/index.css`); design tokens mirrored as the `meadow` export in `src/lib/colors.ts`. Fraunces (display) + Inter (UI) loaded via Google Fonts. Varela Round retired in v0.9 Phase 1. Legacy `colors` export retained until all consumers are removed.  
+**State:** Zustand ^5 with `persist` middleware (localStorage key: `ac-web`, schema v3) for app data; non-persisted `useUIStore` (`src/lib/uiStore.ts`) for transient UI state (TownManager open/forceCreate flags).  
 **Routing:** React Router v6 (`BrowserRouter`); URL structure: `/` → redirect, `/town/:townId` → home tab, `/town/:townId/:tab` → specific tab; `vercel.json` has catch-all SPA rewrite for preview/branch deploys  
 **Tests:** Vitest  
 **Store schema:** 3-level `donated[townId][gameId][itemId]` (as of v0.7); `Town` includes `hemisphere: 'NH' | 'SH'` (as of v0.8)  
 **Migration:** Zustand persist v3 + `bootstrapMigration.ts` — zero data loss for existing users  
 **Town CRUD (v0.9 Phase 4):** `TownManager` drawer mounts at the App layout level (above the router), opened via `useUIStore.openTownManager()`. Replaces `CreateTownModal`, `EditTownModal`, and the `TownSwitcher` dropdown. When `towns.length === 0`, App.tsx auto-opens it in `forceCreate` mode (no close/Esc/scrim dismissal). Per Decision 1, edit form has no game `<select>` — game is read-only post-create.  
-**Shell layout (v0.9 Phase 2):** `Sidebar` (280px left, sticky) + `<main className="ac-main">` in CSS grid `280px 1fr`, max-width 1440px centered. Below 980px sidebar stacks above main. `MuseumHeader`, `TabBar`, `TownSwitcher` retired — nav lives in the sidebar.
+**Shell layout (v0.9 Phase 2):** `Sidebar` (280px left, sticky) + `<main className="ac-main">` in CSS grid `280px 1fr`, max-width 1440px centered. Below 980px sidebar stacks above main. `MuseumHeader`, `TabBar`, `TownSwitcher` retired — nav lives in the sidebar.  
+**Scroll-to + highlight (v0.9 Phase 5/6/8):** `ACCanvas` owns `highlightId` state. `HomeTab` shelves and `GlobalSearchDropdown` results call `jumpTo(category, id)` (via `useJumpToRow`); `CategoryTab` opens the matching row, scrolls it into view (`block: 'center'`, smooth) on the next animation frame, and adds `.ac-row-pulse` (1.4s `@keyframes ac-row-pulse`). Rows stamp `data-row-id={item.id}` so the effect can locate them. See locked decision #10 in `docs/v0.9-plan.md`.  
+**Search (v0.9 Phase 8):** `GlobalSearchDropdown` is mounted only on the Home tab inside an `.ac-topbar`. Other tabs use `CategoryTab`'s inline per-tab `SearchBar`. Search history persists at localStorage key `ac-curator-search-history` (max 8, deduplicated).
 
 ### File Structure
 
@@ -49,17 +51,26 @@ src/
   App.tsx                   # Root component — hydration guard + ErrorBoundary + Routes (/, /town/:townId/:tab)
   main.tsx                  # Entry point — runs bootstrapMigration, wraps app in BrowserRouter
   components/
-    ACCanvas.tsx            # Orchestration shell ~298 lines. Mounts active tab view,
-                            # wires modals and global search. Decomposition complete (v0.7).
+    ACCanvas.tsx            # Orchestration shell. Mounts active tab view; owns
+                            # `highlightId` state for scroll-to + pulse; wires
+                            # GlobalSearchDropdown topbar (Home only) and DetailModal (art).
     HomeTab.tsx             # v0.9 Phase 6: rebuilt — hero stat + ProgressMeter,
                             # month strip, leaving-soon shelf, just-arrived shelf,
                             # latest donations. Cards fire jumpTo (scroll + pulse).
     ProgressMeter.tsx       # v0.9 Phase 6: segmented progress bar (4 or 5 segments
                             # gated by gameId; sea segment for ACNL/ACNH).
     progressMeterUtils.ts   # Pure helper segmentsForGame (unit-tested).
-    CategoryTab.tsx         # v0.9 Phase 7: sectioned category page (Leaving / Available / Out of season / Already donated)
-    CollectibleRow.tsx      # Single item row with donate toggle; shows chevron + rounded-top when expanded
-    ItemExpandPanel.tsx     # Inline accordion panel shown below CollectibleRow for fish/bugs/fossils
+    CategoryTab.tsx         # v0.9 Phase 7: sectioned category page (Leaving / Available
+                            # / Out of season / Already donated). Owns expandedId,
+                            # reacts to highlightId by opening the matching row
+                            # before ACCanvas's scroll-to fires. Hosts per-tab SearchBar.
+    CollectibleRow.tsx      # v0.9 Phase 5 restyle: monogram glyph tile, meta line with
+                            # `·` separators, leaving/new pills, animated chevron.
+                            # Stamps data-row-id; accepts highlighted/currentMonth/hemisphere props.
+    ItemExpandPanel.tsx     # v0.9 Phase 5 rebuild: two-column inline panel (MonthGrid
+                            # + stats stack with bells/shadow/hours/notes) with the
+                            # donate / undonate button at the bottom. Donate UI lives
+                            # in the panel only — the row no longer renders a toggle.
     Sidebar.tsx             # v0.9 Phase 2: 280px left sidebar — brand, active town card, NavLink nav with counts, footer (replaces MuseumHeader/TabBar/TownSwitcher)
     SettingsPage.tsx        # v0.9 Phase 3: full-page Settings — About + Danger zone (no Appearance per locked decision #3)
     SettingsRoute.tsx       # v0.9 Phase 3: route wrapper that mounts Sidebar + SettingsPage at /settings
@@ -67,20 +78,28 @@ src/
     ErrorBoundary.tsx       # Top-level React error boundary; crashes render ErrorState
     ErrorState.tsx          # Full-page error fallback UI
     shared/
-      CategoryProgress.tsx  # "X / Y donated" progress bar
-      DonateToggle.tsx      # Checkbox/button to mark item donated
+      DonateToggle.tsx      # Checkbox/button to mark item donated (used by sea-creature search rows; donate on category rows is panel-only as of Phase 5)
       EmptyState.tsx        # "Nothing here yet" placeholder
       HabitatChip.tsx       # Fish habitat badge
-      MonthGrid.tsx         # 12-cell month availability grid
-      SearchBar.tsx         # Per-tab inline search input
+      MonthGrid.tsx         # 12-cell month availability grid (Phase 5 re-skin; accepts `current` prop)
+      SearchBar.tsx         # Per-tab inline search input (consumed by CategoryTab)
+      # CategoryProgress.tsx — DEAD: its only consumers (ACCanvas inline category
+      # render + AnalyticsView) were retired in Phase 7 / Phase 9. File remains
+      # in tree pending a follow-up cleanup PR.
     modals/
-      DetailModal.tsx       # Item detail sheet
-    TownManager.tsx         # Right-side drawer for switch/edit/create/delete towns (v0.9 Phase 4)
+      DetailModal.tsx       # Bottom-sheet item detail. Used by Art (CategoryTab routes
+                            # art clicks here) and persistent across search jumps.
+    TownManager.tsx         # v0.9 Phase 4: right-side drawer (bottom sheet ≤720px) mounted
+                            # at App layout level via useUIStore. Switch/edit/create/delete
+                            # towns. Inline edit = name + (ACNH-only) hemisphere — game is
+                            # read-only post-create (Decision 1). Replaces CreateTownModal,
+                            # EditTownModal, TownSwitcher, TownNameFields.
     StatsTab.tsx            # v0.9 Phase 9: per-category cards (3/4/5 by game) +
                             # 12-column yearly rhythm chart (fish + bugs always,
                             # sea added for ACNL/ACNH). Replaces AnalyticsView.
     views/
-      ActivityFeed.tsx      # Recent donations list
+      ActivityFeed.tsx      # Recent donations list (consumed by HomeTab).
+                            # AnalyticsView + SectionCard retired in Phase 9.
     search/
       GlobalSearchDropdown.tsx # v0.9 Phase 8: unified search dropdown — anchored
                                # under the Home topbar input. Grouped category
@@ -90,18 +109,29 @@ src/
                                # Replaces GlobalSearchBar/Results/HistoryPopover.
   hooks/
     useHydration.ts         # Gates render on Zustand persist rehydration (onFinishHydration)
-    useMuseumData.ts        # Fetches and caches all 4 category JSONs for active town's game
+    useMuseumData.ts        # Fetches and caches all category JSONs for the active town's game
     useCategoryStats.ts     # Memoized donated counts per category
     useJumpToRow.ts         # v0.9 Phase 6: navigate to a category tab + set
-                            # highlightId so ACCanvas scrolls + pulses the target row
+                            # highlightId so ACCanvas scrolls + pulses the target row.
+                            # Wired by HomeTab shelves and GlobalSearchDropdown.
+                            # `useSearch.ts` retired in Phase 8 — search state now
+                            # lives inside GlobalSearchDropdown.
   lib/
-    store.ts                # Zustand store: towns, donations, activeTownId. persist key 'ac-web' v2.
+    store.ts                # Zustand app store: towns, donations, activeTownId. persist
+                            # key 'ac-web' schema v3. Includes resetActiveTownDonations
+                            # + resetAll (Phase 3 Settings danger zone). createTown signature
+                            # is (name, gameId, hemisphere?); updateTown takes a TownPatch
+                            # ({ name?, hemisphere? }) — gameId is intentionally not patchable
+                            # post-create (Decision 1). `playerName` removed from Town in
+                            # Phase 4 (Decision 5).
+    uiStore.ts              # v0.9 Phase 4: non-persisted Zustand store for transient UI
+                            # state (`townManagerOpen`, `townManagerForceCreate`).
     bootstrapMigration.ts   # One-time localStorage rename (ac-web:v1 → ac-web), called in main.tsx
-    storeMigrations.ts      # Zustand migrate callback: v1→v2 schema lift
+    storeMigrations.ts      # Zustand migrate callback: v1→v2 schema lift, v2→v3 hemisphere backfill
     categoryMeta.ts         # CATEGORY_META constant (label/Icon/file per category)
     viewTypes.ts            # ViewId and AllData types
     constants.ts            # MONTH_NAMES, CATEGORY_LABELS, CATEGORY_ORDER, SEASONS
-    colors.ts               # Design token hex constants
+    colors.ts               # Design tokens — `meadow` export (v0.9 Phase 1) mirrors the CSS custom properties in `src/index.css` `@theme`. Legacy `colors` export kept until all consumers are removed. Includes `fontStacks` for Fraunces/Inter.
     types.ts                # Shared TypeScript interfaces (Town, Donation, GameId, Game, etc.)
     utils.ts                # Helper functions (formatting, date math, type guards)
     csvExport.ts            # CSV export logic for donation data
@@ -131,20 +161,28 @@ public/data/acnh/
 docs/
   dev-process.md            # PR checklist and dev process rules for Claude Code sessions
   architecture.md           # Deep architectural context: store schema, migrations, multi-game types
+  decisions.md              # Reverse-chronological design decision log
+  v0.9-plan.md              # Canonical v0.9.0-beta implementation plan + locked decisions
+  design-handoffs/          # v0.9 / v0.9.1 / v0.9.2 design specs ("Curator" codename)
   v0.7-audit.md             # Codebase audit: component modularity, type safety, latent bugs
   v0.7-architecture-proposal.md  # Multi-game foundation design: store schema, decomposition plan
 ```
 
-### Design System
+### Design System (Meadow — v0.9)
 
-Inline hex constants via `src/lib/colors.ts` — **no Tailwind design tokens**:
-- `#7B5E3B` — wood (header/section backgrounds)
-- `#F5E9D4` — paper (card backgrounds)
-- `#2A2A2A` — ink (primary text)
-- `#3CA370` — leaf (progress bars, success states)
-- `#E7DAC4` — border colour
-- `#5a4a35` — secondary/muted text
-- Google Fonts: **Varela Round**
+Tokens are CSS custom properties in `src/index.css` `@theme` block, mirrored in `src/lib/colors.ts` as the `meadow` export. The legacy `colors` export (parchment/wood) is retained for backwards-compatibility but is no longer the active palette. See section 5 of `docs/v0.9-plan.md` for the full token table and typographic scale.
+
+Key tokens:
+- `--bg` `#F4EFE3` · `--surface` `#FFFDF7` · `--surface-alt` `#F8F2E2`
+- `--ink` `#23241F` · `--ink-soft` `#5C5848` · `--ink-muted` `#8A8470`
+- `--border` `#E2D9C3` · `--border-strong` `#CFC4A8`
+- `--accent` `oklch(0.55 0.09 150)` (moss green) · `--accent-soft` · `--accent-ink`
+- `--warn` `oklch(0.62 0.12 50)` (clay) — leaving-soon
+- `--chip-fish` / `--chip-bugs` / `--chip-fossils` / `--chip-art` / `--chip-sea` — category identity tokens
+
+Type stack: **Fraunces** (display, opsz 9..144, 400/500/600 + italic) and **Inter** (UI, 400/500/600/700) loaded via Google Fonts. Varela Round was retired in Phase 1.
+
+Per locked decision #2, Meadow is the **only theme** — Parchment, Midnight, and Sakura were dropped from the v0.9 scope.
 
 ## Git Workflow
 
@@ -183,10 +221,9 @@ See `.claude/rules/vercel.md` for full deployment rules. Key points:
 
 ## ACCanvas.tsx
 
-`src/components/ACCanvas.tsx` was decomposed in v0.7 and is now ~298 lines (orchestration shell only).
-It mounts the active tab view, wires modals, and handles global search. All data fetching,
-filtering, and sub-component logic lives in dedicated hooks and components.
-Do not add new top-level tabs without updating the tab switch in ACCanvas and the nav list in `Sidebar`.
+`src/components/ACCanvas.tsx` is the orchestration shell that lives below the `Sidebar`. It mounts the active tab view (HomeTab, CategoryTab, StatsTab), owns the `highlightId` state for the scroll-to + pulse effect (Phase 5/6/8), wires the GlobalSearchDropdown topbar (Home tab only), and renders the persistent DetailModal for art. All data fetching lives in `useMuseumData`; per-category filtering and sectioning lives in `CategoryTab`.
+
+Do not add new top-level tabs without updating the tab switch in ACCanvas, the nav list in `Sidebar`, and `VALID_TABS` / `ViewId` in `src/lib/viewTypes.ts`.
 
 ## Roadmap
 
@@ -228,9 +265,21 @@ Do not add new top-level tabs without updating the tab switch in ACCanvas and th
   - Art tab persistent label fix — `setSelected(null)` on tab change (PR #57, Closes #26)
   - Branch-label footer suffix for non-main/development/release builds
 
-### v0.9 — Polish, onboarding, and PWA (next)
-- Seasonal/time-based filtering
-- UI redesign pass; PWA support; mobile-first responsive pass; first-run onboarding
+### v0.9.0-beta — UI revamp (in progress on `development`)
+Phases shipped to `development`:
+- Phase 1 — Meadow tokens + Fraunces/Inter; Varela Round retired (PR #63)
+- Phase 2 — Sidebar shell; MuseumHeader/TabBar/TownSwitcher retired (PR #65)
+- Phase 3 — Settings page (About + Danger zone) (PR #66)
+- Phase 4 — TownManager drawer; CreateTownModal/EditTownModal/TownNameFields retired; `playerName` removed from Town (PR #67)
+- Phase 5 — CollectibleRow + ItemExpandPanel restyle; donate moves into expand panel (PR #70)
+- Phase 6 — HomeTab rebuild + ProgressMeter (4/5 segments); closed Issue #71 ACNH "all caught up" bug (PR #72)
+- Phase 7 — CategoryTab sectioning (Leaving / Available / Out of season / Already donated) (PR #73)
+- Phase 8 — GlobalSearchDropdown; GlobalSearchBar/Results/HistoryPopover/`useSearch` retired; a11y polish tracked in Issue #76 (PR #75)
+- Phase 9 — StatsTab rebuild; AnalyticsView + SectionCard retired (PR #77)
+
+Pending:
+- Phase 10 — Mobile responsive verification pass
+- ACWW + ACCF art data (PR #78, closes Issue #74)
 
 ### v1.0 — Launch ready
 - Branding, SEO, accessibility, performance audit
diff --git a/README.md b/README.md
index d404567..0704a2a 100644
--- a/README.md
+++ b/README.md
@@ -9,16 +9,18 @@ A cozy companion web app for tracking Animal Crossing museum donations across mu
 ## Features
 
 - Track donations for all museum categories: Fish, Bugs, Fossils, Art, and Sea Creatures
-- Manage multiple towns — create, switch, and rename them at any time
+- Manage multiple towns from a single TownManager drawer — switch, rename, create, and delete (game is locked at create-time)
 - **Five games supported:** Animal Crossing (GCN), Wild World, City Folk, New Leaf, New Horizons
-- **Item inline expand** — tap a Fish, Bug, or Fossil row to expand it in-place: month availability grid, sell value, habitat, and donate/undonate button (powered by `ItemExpandPanel`)
-- **Bottom-sheet detail view** — Art rows and Search results open a full detail sheet (`DetailModal`)
-- **Hemisphere toggle** — New Horizons towns show an NH/SH toggle; month grids reflect the correct hemisphere
+- **Persistent left sidebar** with brand, active town card, per-category donation counts, and Export CSV / Settings footer
+- **Inline item expand** — tap a Fish, Bug, Fossil, or Sea Creature row to open a two-column panel with the month availability grid, bells / shadow / hours, notes, and donate/undonate button
+- **Bottom-sheet detail view** — Art opens a full detail sheet (`DetailModal`)
+- **Hemisphere toggle** — New Horizons towns expose an NH/SH toggle; month grids reflect the correct hemisphere
 - **URL-based navigation** — every town and tab has a shareable URL via React Router v6
-- Home screen with seasonal availability, leaving-soon alerts, and progress cards
-- Global search across all categories
-- Stats tab with collection analytics and monthly availability chart
-- Recent activity feed per town
+- Home screen with hero stat, current-month strip, "Leaving end of {month}" and "Just arrived" shelves, segmented progress meter, and latest donations
+- Sectioned category pages — Leaving this month / Available now / Out of season / Already donated
+- Unified global search dropdown with grouped category results, keyboard navigation, and recent-search history
+- Stats tab with per-category cards and a 12-column "Yearly rhythm" availability chart
+- Settings page — About + Danger zone (reset active town donations, reset everything)
 - CSV export of your donation records
 - Fully persistent — data saved to localStorage, no account required
 
@@ -65,6 +67,6 @@ Museum data lives in `public/data/<game>/`:
 
 ## Version
 
-Current release: **v0.8.2-alpha** (last stable). Active development: **v0.9.0-beta** — see [CHANGELOG.md](CHANGELOG.md) for history and [docs/v0.9-plan.md](docs/v0.9-plan.md) for the in-progress plan.
+Current release: **v0.8.2-alpha** (last stable on `main`). Active development: **v0.9.0-beta** — Phases 1–9 of the UI revamp shipped to `development`; Phase 10 (mobile responsive verification) pending. See [CHANGELOG.md](CHANGELOG.md) for history and [docs/v0.9-plan.md](docs/v0.9-plan.md) for the canonical plan.
 
 Significant design decisions are logged in [docs/decisions.md](docs/decisions.md).
diff --git a/docs/architecture.md b/docs/architecture.md
index 24768d4..44ea1e0 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,94 +1,22 @@
-# Architecture Reference (v0.8.2)
+# Architecture Reference (v0.9.0-beta)
 
-Key architectural context for Claude Code sessions. See also `docs/v0.7-architecture-proposal.md`.
+This document mirrors `.claude/rules/architecture.md` — the canonical copy that Claude Code sessions auto-load. They are kept in lockstep; if they diverge, the `.claude/rules/` copy wins. Update both together.
 
-## Stack
+For the full reference (stack, key files, store schema, scroll-to + highlight wiring, multi-game support), see [`.claude/rules/architecture.md`](../.claude/rules/architecture.md).
 
-- **Framework:** Vite + React 19 + TypeScript
-- **Styling:** Tailwind CSS v4 — utility classes only; design tokens are inline hex constants in `src/lib/colors.ts`
-- **State:** Zustand ^5 with `persist` middleware (localStorage key: `ac-web`, schema version 2)
-- **Tests:** Vitest
-- **Hosting:** Vercel (auto-deploys from `main`)
+## Quick reference
 
-## Store Schema (v2, as of v0.7)
+- **Stack:** Vite + React 19 + TypeScript + Tailwind CSS v4 + Zustand + React Router v6
+- **Design:** Meadow tokens (CSS custom properties in `src/index.css` `@theme`), Fraunces + Inter (Varela Round retired in Phase 1)
+- **State:** persisted `useAppStore` (key `ac-web`, schema v3) + non-persisted `useUIStore` (TownManager open flags)
+- **Layout:** `Sidebar` (280px, sticky) + main column. `TownManager` drawer mounts at App level. `MuseumHeader` / `TabBar` / `TownSwitcher` retired in Phase 2.
+- **Highlight:** `ACCanvas` owns `highlightId`; HomeTab + `GlobalSearchDropdown` call `jumpTo(category, id)` (via `useJumpToRow`) and `CategoryTab` scrolls + pulses the matching row.
+- **Settings:** `/settings` route — About + Danger zone only (no Appearance per Decision 3).
 
-Donation data uses a **3-level schema**:
+## Reference docs
 
-```
-donated[townId][gameId][itemId] = boolean
-donatedAt[townId][gameId][itemId] = ISO timestamp
-```
-
-- `gameId` is a `GameId` union: `'ACGCN' | 'ACWW' | 'ACCF' | 'ACNL' | 'ACNH'`
-- `Town` has a `gameId` field (backfilled to `'ACGCN'` for pre-v0.7 towns)
-- Zustand `persist` is at `version: 2`; migrations in `src/lib/storeMigrations.ts`
-
-## Migration Path
-
-- `src/lib/bootstrapMigration.ts` — runs in `main.tsx` before React mounts; one-time localStorage key rename (`ac-web:v1` → `ac-web`)
-- `src/lib/storeMigrations.ts` — Zustand `migrate()` callback: v1→v2 lifts flat schema to 3-level, backfills `gameId`
-- Zero data loss for existing users
-
-## Hydration Guard
-
-- `src/hooks/useHydration.ts` — custom hook that resolves after `onFinishHydration`
-- `App.tsx` renders a loading state until the store is rehydrated — eliminates empty-state flash for returning users
-
-## ACCanvas.tsx
-
-- Orchestration shell; mounts the active tab view, wires modals, and handles global search
-- Do not add new top-level tabs without updating `VALID_TABS`, the tab-switch render, and `TabBar` props
-
-## Categories
-
-`CategoryId = 'fish' | 'bugs' | 'fossils' | 'art' | 'sea_creatures'` (added v0.8.2)
-
-`CATEGORY_ORDER` and `AllData` both include `sea_creatures`. Sea creatures are loaded for ACNL and ACNH only (`GAMES_WITH_SEA_CREATURES` set in `categoryMeta.ts`); the tab is hidden for other games via data-length check.
-
-## Data Files
-
-Museum data lives in `public/data/<gameId>/`:
-- `public/data/acgcn/` — Animal Crossing GCN (40 fish, 40 bugs, 25 fossils, 13 art)
-- `public/data/acww/` — Animal Crossing Wild World (56 fish, 56 bugs, 52 fossils) — added v0.7
-- `public/data/accf/` — City Folk (40 fish, 40 bugs, 52 fossils) — added v0.7
-- `public/data/acnl/` — New Leaf (fish, bugs, fossils, art, sea creatures) — added v0.8
-- `public/data/acnh/` — New Horizons (81 fish, 80 bugs, 86 fossils, 43 art, 40 sea creatures; NH/SH months) — added v0.8
-
-Item IDs are shared across games where species overlap. The store scopes by `gameId`, so this is safe.
-
-## Multi-Game Types
-
-```ts
-type GameId = 'ACGCN' | 'ACWW' | 'ACCF' | 'ACNL' | 'ACNH';
-
-interface Game {
-  id: GameId;
-  name: string;
-  shortName: string;
-  year: number;
-}
-
-const GAMES: Record<GameId, Game> = { ... }; // in src/lib/types.ts
-```
-
-## Error Handling
-
-- `src/components/ErrorBoundary.tsx` — top-level React error boundary in `App.tsx`; unhandled crashes render `ErrorState`
-- `src/components/ErrorBanner.tsx` — dismissible inline error for soft failures
-- `src/components/ErrorState.tsx` — full-page fallback for hard failures
-- `AppErrorKind` discriminated union in `src/lib/types.ts`
-
-## Design Tokens
-
-Inline hex values via `src/lib/colors.ts` — **no Tailwind design tokens**:
-- `#7B5E3B` — wood (header/section backgrounds)
-- `#F5E9D4` — paper (card backgrounds)
-- `#2A2A2A` — ink (primary text)
-- `#3CA370` — leaf (progress bars, success states)
-- `#E7DAC4` — border colour
-- `#5a4a35` — secondary/muted text
-- Google Fonts: **Varela Round**
-
-## Constants
-
-Shared constants in `src/lib/constants.ts`: `MONTH_NAMES`, `CATEGORY_LABELS`, `CATEGORY_ORDER`, `SEASONS`.
+- `docs/v0.9-plan.md` — canonical v0.9.0-beta plan + 10 locked decisions
+- `docs/decisions.md` — reverse-chronological decision log
+- `docs/design-handoffs/` — v0.9 / v0.9.1 / v0.9.2 design specs
+- `docs/dev-process.md` — full dev process
+- `docs/v0.7-audit.md` / `v0.7-architecture-proposal.md` — multi-game foundation history
diff --git a/docs/decisions.md b/docs/decisions.md
index ba6b484..302c333 100644
--- a/docs/decisions.md
+++ b/docs/decisions.md
@@ -4,6 +4,16 @@ Reverse-chronological record of significant design and scope decisions. Newest f
 
 ---
 
+## 2026-05-03 — v0.9.0-beta locked decisions live in `docs/v0.9-plan.md`
+
+**Decision:** The 10 locked design decisions for the v0.9 UI revamp (game immutability, Meadow-only theme, Settings = About + Danger only, sea creatures in StatsTab, `playerName` deprecation, ACNH-only hemisphere, native `confirm()`, `basedOn` art search, sea in GlobalSearchDropdown, scroll-to + highlight wiring) are recorded in `docs/v0.9-plan.md` section 4 rather than duplicated here.
+
+**Why:** The plan doc is the canonical reference for v0.9 scope and is read alongside the design handoffs in `docs/design-handoffs/`. Splitting the decisions across two files would create two sources of truth. This log continues to capture decisions that don't sit inside an active plan doc (incident-driven, post-ship, scope tradeoffs).
+
+**Pointer:** See `docs/v0.9-plan.md` § 4 "Locked Design Decisions" for the binding list.
+
+---
+
 ## 2026-05-01 — Shadow size not surfaced in any UI — defer to v0.9 (Issue #59)
 
 **Decision:** Defer adding shadow size display to v0.9. Do not add it to v0.8.2.
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 1fff911..1063f51 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -1,6 +1,6 @@
 # v0.9.0-beta — Implementation Plan
 
-**Status:** In design / Pre-implementation  
+**Status:** In implementation — Phases 1–9 shipped to `development`; Phase 10 (mobile responsive) pending  
 **Target tag:** `v0.9.0-beta`  
 **Planned milestone:** Following v0.8.2-alpha (shipped 2026-05-01)  
 **Document date:** 2026-05-03  
@@ -337,7 +337,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 3 — Settings Page
+### Phase 3 — Settings Page ✅ shipped (PR #66)
 
 **Branch:** `feature/v09-phase-3-settings`  
 **Goal:** Full-page settings route. Two sections: About + Danger zone.
@@ -361,7 +361,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 4 — TownManager Drawer
+### Phase 4 — TownManager Drawer ✅ shipped (PR #67)
 
 **Branch:** `feature/v09-phase-4-townmanager`  
 **Goal:** Replace `CreateTownModal`, `EditTownModal`, and the stub "Switch town" link from Phase 2 with a single right-side TownManager drawer.
@@ -388,7 +388,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 5 — CollectibleRow + ItemExpandPanel Restyle
+### Phase 5 — CollectibleRow + ItemExpandPanel Restyle ✅ shipped (PR #70)
 
 **Branch:** `feature/v09-phase-5-rows`  
 **Goal:** Restyle item rows and inline expand panels to match v0.9 design. Wire `data-row-id` and `highlightId` for scroll-to (Decision 10).
@@ -433,7 +433,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 6 — HomeTab + ProgressMeter ✅
+### Phase 6 — HomeTab + ProgressMeter ✅ shipped (PR #72; closes #71 — ACNH "all caught up" bug)
 
 **Branch:** `feature/v09-phase-6-home`  
 **Goal:** Rebuild HomeTab with hero + month strip + leaving/new shelves. Ship ProgressMeter with 5-segment support for ACNL/ACNH.
@@ -467,7 +467,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 7 — CategoryTab Sectioning ✅
+### Phase 7 — CategoryTab Sectioning ✅ shipped (PR #73)
 
 **Branch:** `feature/v09-phase-7-sections`  
 **Goal:** Group category items into 4 sections instead of a flat A–Z list.
@@ -494,7 +494,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 8 — GlobalSearchDropdown ✅
+### Phase 8 — GlobalSearchDropdown ✅ shipped (PR #75; a11y polish tracked in Issue #76)
 
 **Branch:** `feature/v09-phase-8-search`  
 **Goal:** Replace `GlobalSearchBar`, `GlobalSearchResults`, `SearchHistoryPopover` with `GlobalSearchDropdown`.
@@ -522,7 +522,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 9 — StatsTab ✅
+### Phase 9 — StatsTab ✅ shipped (PR #77)
 
 **Branch:** `feature/v09-phase-9-stats`  
 **Goal:** Rebuild StatsTab with per-category cards and updated yearly rhythm chart.
@@ -543,7 +543,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 10 — Mobile Responsive Verification
+### Phase 10 — Mobile Responsive Verification ⏳ pending
 
 **Branch:** `feature/v09-phase-10-mobile`  
 **Goal:** Audit and fix any mobile regressions; verify all 980px breakpoint behaviors.

From d551a6394eeae87c8e8260772dad7e835f11c3e9 Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 00:43:38 -0400
Subject: [PATCH 24/28] feat(mobile): Phase 10 mobile responsive polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS-only fixes in src/index.css Phase 10 block — no component changes.

- Touch targets >=44px for drawer close, settings close, town row edit,
  TownManager actions, GlobalSearch history rows, donate button, chevron.
- iOS zoom prevention: search input rendered at 16px on stacked layouts.
- Hero/category title overflow: word-break + further font shrink at <=480px.
- Recent activity row drops category label at <=720px so name+time fit.
- Topbar wraps at <=480px; sidebar foot links get full tap height when stacked.
- GlobalSearchDropdown kbd-hint footer hidden at <=720px (no hardware keyboard).

Verified: build clean, 63 tests pass, lint clean. All Phase 10 checklist items
checked in docs/v0.9-plan.md. CLAUDE.md updated with 980/720/700/480 breakpoint
hierarchy.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md      | 13 ++++++++++
 CLAUDE.md         |  1 +
 docs/v0.9-plan.md | 22 ++++++++---------
 src/index.css     | 60 +++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d828d09..5e3f73f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,19 @@ All notable changes to this project are documented here.
 
 ## [Unreleased] — v0.9.0-beta (in progress)
 
+### Added — Phase 10: Mobile responsive polish
+- **Mobile breakpoint hierarchy** documented (`980 / 720 / 700 / 480`). Surgical CSS additions to `src/index.css` Phase 10 block address touch targets and overflow at iPhone SE (390px) through iPad portrait (768px).
+- **Touch targets ≥44px** at ≤720px: `.ac-tm-close`, `.ac-settings-close`, `.ac-tm-row-edit`, `.ac-tm-ghost / -primary / -danger`, `.ac-gs-history-row`, `.ac-gs-row`, `.ac-donate-btn`, `.ac-chevron`. Hemisphere toggle and segmented controls bumped to comfortable tap sizes.
+- **iOS zoom prevention** — `.ac-search input` rendered at `font-size: 16px` on stacked layouts so Safari does not auto-zoom on focus.
+- **Hero / category title overflow** — `word-break: break-word` on `.ac-hero-headline` and `.ac-category-title`; further font shrink at ≤480px (hero 26px, category 28px, settings 32px).
+- **Recent activity row** at ≤720px — category label hidden so item name + relative time fit on one line at 360–390px.
+- **Topbar wraps** at ≤480px so the search input stays full-width on narrow viewports.
+- **Sidebar foot links** get full 44px tap height when the sidebar stacks above main at ≤980px.
+- **Kbd hint footer** in `GlobalSearchDropdown` hidden at ≤720px (no hardware keyboard assumed). Tap-to-select via existing `onClick` handlers verified.
+
+### Verified — Phase 10
+- Sidebar stacks above main at ≤980px (not hidden); ProgressMeter `.ac-meter-5` wraps to 2 rows; TownManager renders as bottom sheet at ≤720px; Settings collapses + danger buttons go full-width at ≤700px; scroll-to + `.ac-row-pulse` highlight is viewport-agnostic.
+
 ### Added — Phase 9: StatsTab
 - **`StatsTab` component** (`src/components/StatsTab.tsx`) — replaces `AnalyticsView`. Renders per-category cards (3/4/5 cards, gated by game: fish/bugs/fossils always; art for ACGCN/ACNL/ACNH; sea for ACNL/ACNH) above a 12-column "Yearly rhythm" availability chart. Each card shows category eyebrow tinted with the matching `--chip-*` token, donated/total in Fraunces 32, a thin tinted progress bar, and "X% complete" caption.
 - **Yearly rhythm chart** — 12 stacked columns. Background bar height = `avail / maxAvail`; inner accent fill = `donated / avail`. Number above each column = items available that month. Current month column borders in `--accent`. Includes fish + bugs always; sea creatures added for ACNL/ACNH (Decision 4). Hemisphere-aware via `itemMonths(item, cat, hemisphere)`. Legend below: "Available" / "Already donated".
diff --git a/CLAUDE.md b/CLAUDE.md
index a18f8fa..b26bb18 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -41,6 +41,7 @@ npm install       # Install dependencies
 **Migration:** Zustand persist v3 + `bootstrapMigration.ts` — zero data loss for existing users  
 **Town CRUD (v0.9 Phase 4):** `TownManager` drawer mounts at the App layout level (above the router), opened via `useUIStore.openTownManager()`. Replaces `CreateTownModal`, `EditTownModal`, and the `TownSwitcher` dropdown. When `towns.length === 0`, App.tsx auto-opens it in `forceCreate` mode (no close/Esc/scrim dismissal). Per Decision 1, edit form has no game `<select>` — game is read-only post-create.  
 **Shell layout (v0.9 Phase 2):** `Sidebar` (280px left, sticky) + `<main className="ac-main">` in CSS grid `280px 1fr`, max-width 1440px centered. Below 980px sidebar stacks above main. `MuseumHeader`, `TabBar`, `TownSwitcher` retired — nav lives in the sidebar.  
+**Mobile breakpoints (v0.9 Phase 10):** `980` = sidebar stacks + ProgressMeter 5-seg wraps + stats grid → 2 col; `720` = TownManager bottom-sheet + touch targets ≥44px + recent-row strips category label + GlobalSearch kbd footer hidden; `700` = settings sections collapse + danger buttons full-width; `480` = stats grid → 1 col + hero/category titles shrink + topbar wraps. Edits are CSS-only in `src/index.css` Phase 10 block.  
 **Scroll-to + highlight (v0.9 Phase 5/6/8):** `ACCanvas` owns `highlightId` state. `HomeTab` shelves and `GlobalSearchDropdown` results call `jumpTo(category, id)` (via `useJumpToRow`); `CategoryTab` opens the matching row, scrolls it into view (`block: 'center'`, smooth) on the next animation frame, and adds `.ac-row-pulse` (1.4s `@keyframes ac-row-pulse`). Rows stamp `data-row-id={item.id}` so the effect can locate them. See locked decision #10 in `docs/v0.9-plan.md`.  
 **Search (v0.9 Phase 8):** `GlobalSearchDropdown` is mounted only on the Home tab inside an `.ac-topbar`. Other tabs use `CategoryTab`'s inline per-tab `SearchBar`. Search history persists at localStorage key `ac-curator-search-history` (max 8, deduplicated).
 
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 1063f51..9931a5e 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -1,6 +1,6 @@
 # v0.9.0-beta — Implementation Plan
 
-**Status:** In implementation — Phases 1–9 shipped to `development`; Phase 10 (mobile responsive) pending  
+**Status:** In implementation — Phases 1–10 shipped to `development`; ready to tag v0.9.0-beta  
 **Target tag:** `v0.9.0-beta`  
 **Planned milestone:** Following v0.8.2-alpha (shipped 2026-05-01)  
 **Document date:** 2026-05-03  
@@ -543,21 +543,21 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 10 — Mobile Responsive Verification ⏳ pending
+### Phase 10 — Mobile Responsive Verification ✅ shipped (PR #TBD)
 
 **Branch:** `feature/v09-phase-10-mobile`  
 **Goal:** Audit and fix any mobile regressions; verify all 980px breakpoint behaviors.
 
 **Checklist:**
-- [ ] Sidebar stacks above main at 980px (not hidden)
-- [ ] TownManager renders as bottom sheet at ≤720px
-- [ ] ProgressMeter 5-segment wraps to 2 rows at ≤980px; 4-segment unchanged
-- [ ] Settings sections collapse at ≤700px; danger buttons full-width
-- [ ] All touch targets ≥44px (nav items, donate toggle, glyph tile, drawer close, row chevron)
-- [ ] Hero headline wraps without overflow at 390px
-- [ ] Scroll-to + highlight works on mobile (identical behavior per Decision 10 spec)
-- [ ] Category section headers + row meta readable at 390px
-- [ ] GlobalSearchDropdown keyboard nav inaccessible without hardware keyboard on mobile — ensure tap-to-select works
+- [x] Sidebar stacks above main at 980px (not hidden)
+- [x] TownManager renders as bottom sheet at ≤720px
+- [x] ProgressMeter 5-segment wraps to 2 rows at ≤980px; 4-segment unchanged
+- [x] Settings sections collapse at ≤700px; danger buttons full-width
+- [x] All touch targets ≥44px (nav items, donate toggle, glyph tile, drawer close, row chevron)
+- [x] Hero headline wraps without overflow at 390px
+- [x] Scroll-to + highlight works on mobile (identical behavior per Decision 10 spec)
+- [x] Category section headers + row meta readable at 390px
+- [x] GlobalSearchDropdown keyboard nav inaccessible without hardware keyboard on mobile — tap-to-select via onClick handlers; kbd hint footer hidden ≤720px
 
 **Files likely affected:** `src/index.css`, any component with hardcoded pixel widths
 
diff --git a/src/index.css b/src/index.css
index 9dd8a00..1f96727 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1423,3 +1423,63 @@
   .ac-chart-month { font-size: 10px; }
   .ac-chart-num { font-size: 10px; }
 }
+
+/* ── Phase 10: Mobile responsive polish ── */
+@media (max-width: 980px) {
+  /* Sidebar foot links and town actions need adequate tap area when stacked */
+  .ac-foot-link { min-height: 44px; padding: 12px 14px; display: flex; align-items: center; }
+  .ac-town-switch, .ac-town-edit { min-height: 32px; padding: 6px 0; }
+  /* Search input padding bigger for tap */
+  .ac-search { padding: 10px 14px; }
+  .ac-search input { font-size: 16px; /* prevent iOS zoom */ }
+}
+
+@media (max-width: 720px) {
+  /* Hero + category title shrink already handled; ensure no overflow */
+  .ac-hero-headline { word-break: break-word; }
+  .ac-category-title { word-break: break-word; }
+  /* Recent row: allow category label to truncate before time */
+  .ac-recent-row { gap: 8px; padding: 12px; }
+  .ac-recent-cat { display: none; }
+  /* Settings close 44px */
+  .ac-settings-close { width: 44px; height: 44px; font-size: 16px; }
+  /* TownManager close 44px */
+  .ac-tm-close { width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }
+  /* TownManager row-edit min tap target */
+  .ac-tm-row-edit { min-width: 48px; }
+  /* TownManager action buttons full tap height */
+  .ac-tm-ghost, .ac-tm-primary, .ac-tm-danger { min-height: 44px; padding: 10px 16px; }
+  .ac-tm-seg button { min-height: 36px; }
+  /* Hemisphere toggle bigger */
+  .ac-hem-btn { min-height: 28px; padding: 4px 10px; font-size: 12px; }
+  /* GlobalSearch history rows tap-friendly */
+  .ac-gs-history-row { min-height: 44px; padding: 10px 12px; }
+  .ac-gs-row { min-height: 48px; }
+  .ac-gs-clear { min-height: 32px; padding: 6px 10px; }
+  /* Settings danger button already full-width at 700; chevron tap */
+  .ac-chevron { font-size: 22px; padding: 0 4px; }
+  /* Donate button full tap */
+  .ac-donate-btn { min-height: 44px; }
+  /* Hide kbd hint footer on touch devices (no keyboard) */
+  .ac-gs-foot { display: none; }
+  /* Sidebar nav items keep 44 (already set) but reduce vertical padding waste */
+  .ac-nav { gap: 2px; }
+}
+
+@media (max-width: 480px) {
+  .ac-hero-headline { font-size: 26px; }
+  .ac-hero-aside { font-size: 20px; }
+  .ac-category-title { font-size: 28px; }
+  .ac-settings-title { font-size: 32px; }
+  .ac-main { padding: 18px 14px 60px; }
+  .ac-sidebar { padding: 20px 16px; }
+  /* Expand panel: tighter on tiny screens */
+  .ac-expand { padding: 4px 14px 18px 14px; }
+  /* Monthgrid labels shrink */
+  .ac-monthcell-label { font-size: 9px; }
+  /* Town card name not clipped */
+  .ac-town-name { font-size: 20px; word-break: break-word; }
+  /* Topbar wraps if needed */
+  .ac-topbar { flex-wrap: wrap; }
+  .ac-search-wrap { max-width: 100%; min-width: 0; }
+}

From f47acce356b75708887a82d83db3f004572fbf4c Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 01:04:06 -0400
Subject: [PATCH 25/28] fix(phase-10): correct iPhone SE viewport in CHANGELOG;
 backfill PR # in plan

---
 CHANGELOG.md      | 2 +-
 docs/v0.9-plan.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e3f73f..9c70c22 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ All notable changes to this project are documented here.
 ## [Unreleased] — v0.9.0-beta (in progress)
 
 ### Added — Phase 10: Mobile responsive polish
-- **Mobile breakpoint hierarchy** documented (`980 / 720 / 700 / 480`). Surgical CSS additions to `src/index.css` Phase 10 block address touch targets and overflow at iPhone SE (390px) through iPad portrait (768px).
+- **Mobile breakpoint hierarchy** documented (`980 / 720 / 700 / 480`). Surgical CSS additions to `src/index.css` Phase 10 block address touch targets and overflow at iPhone SE (375px) through iPad portrait (768px).
 - **Touch targets ≥44px** at ≤720px: `.ac-tm-close`, `.ac-settings-close`, `.ac-tm-row-edit`, `.ac-tm-ghost / -primary / -danger`, `.ac-gs-history-row`, `.ac-gs-row`, `.ac-donate-btn`, `.ac-chevron`. Hemisphere toggle and segmented controls bumped to comfortable tap sizes.
 - **iOS zoom prevention** — `.ac-search input` rendered at `font-size: 16px` on stacked layouts so Safari does not auto-zoom on focus.
 - **Hero / category title overflow** — `word-break: break-word` on `.ac-hero-headline` and `.ac-category-title`; further font shrink at ≤480px (hero 26px, category 28px, settings 32px).
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index 9931a5e..fa96b61 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -543,7 +543,7 @@ Parallel work is allowed within a phase where components are independent. The ph
 
 ---
 
-### Phase 10 — Mobile Responsive Verification ✅ shipped (PR #TBD)
+### Phase 10 — Mobile Responsive Verification ✅ shipped (PR #80)
 
 **Branch:** `feature/v09-phase-10-mobile`  
 **Goal:** Audit and fix any mobile regressions; verify all 980px breakpoint behaviors.

From 6261dfe2f78ec200e36d5dad78147dc5286c4d0d Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 01:15:25 -0400
Subject: [PATCH 26/28] fix(#81): convert Art tab to inline ItemExpandPanel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #81

Art rows now expand inline like fish/bugs/fossils/sea creatures
(same .ac-row → .ac-expand flow) instead of opening the DetailModal
bottom-sheet. Fixes the v0.9 release blocker — Art was the last
category with a different interaction model post-Phase 5.

ItemExpandPanel: render `basedOn` as primary stat for art (italic
in side stack) and a Crazy Redd authentication note keyed off
`hasFake` (warn = counterfeit-possible; ok = always-genuine).
Note is hidden when `hasFake` is undefined, so ACGCN/ACWW/ACCF/ACNL
art (which lacks the field) just shows basedOn + donate button.

ArtPiece type: add optional `hasFake?: boolean` (ACNH-only).

DetailModal retired — file deleted. It was the only remaining
consumer; global search uses onJump (highlight + scroll) and no
other tab depended on it. CategoryTab drops the `onItemSelect`
prop and `category === 'art'` special-cases. ACCanvas drops the
`selected` state. All affected docs updated (CLAUDE.md retired-
component note, CHANGELOG entry under [Unreleased] v0.9.0-beta).

CSS: `.ac-art-fake-note` (warn/ok variants reusing existing
--warn / --accent tokens) and `.ac-stat-art` italic rendering.

Verified: npm run build, npm test (63/63), npm run lint — all green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                          |   7 +
 CLAUDE.md                             |   9 +-
 src/components/ACCanvas.tsx           |  24 +--
 src/components/CategoryTab.tsx        |  19 +--
 src/components/ItemExpandPanel.tsx    |  17 +++
 src/components/modals/DetailModal.tsx | 208 --------------------------
 src/index.css                         |  19 +++
 src/lib/types.ts                      |   2 +
 8 files changed, 56 insertions(+), 249 deletions(-)
 delete mode 100644 src/components/modals/DetailModal.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c70c22..4fb8b81 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project are documented here.
 
 ## [Unreleased] — v0.9.0-beta (in progress)
 
+### Changed — Art tab uses inline ItemExpandPanel (#81)
+- **Art tab converted from `DetailModal` bottom-sheet to inline `ItemExpandPanel`.** Art rows now expand inline like fish/bugs/fossils/sea creatures — same `.ac-row` → `.ac-expand` flow. Closes #81 (v0.9 release blocker).
+- **`ItemExpandPanel`** surfaces art-specific fields: `basedOn` (real-world artwork + artist) as the primary stat, plus a Crazy Redd authentication note keyed off `hasFake` (counterfeit-possible vs. always-genuine). Hidden when `hasFake` is undefined (ACGCN/ACWW/ACCF/ACNL data).
+- **`ArtPiece` type** gains optional `hasFake?: boolean` (ACNH-only, sourced from existing `acnh/art.json`).
+- **`DetailModal` retired** — file deleted. It was the only remaining consumer; global search jumps via `onJump` (highlight + scroll), and no other tab uses it. `CategoryTab` drops the `onItemSelect` prop and the `category === 'art'` special-cases. `ACCanvas` drops the `selected` state.
+- **CSS:** `.ac-art-fake-note` (warn / ok variants reusing existing `--warn` / `--accent` tokens) and `.ac-stat-art` italic basedOn rendering, appended to `src/index.css`.
+
 ### Added — Phase 10: Mobile responsive polish
 - **Mobile breakpoint hierarchy** documented (`980 / 720 / 700 / 480`). Surgical CSS additions to `src/index.css` Phase 10 block address touch targets and overflow at iPhone SE (375px) through iPad portrait (768px).
 - **Touch targets ≥44px** at ≤720px: `.ac-tm-close`, `.ac-settings-close`, `.ac-tm-row-edit`, `.ac-tm-ghost / -primary / -danger`, `.ac-gs-history-row`, `.ac-gs-row`, `.ac-donate-btn`, `.ac-chevron`. Hemisphere toggle and segmented controls bumped to comfortable tap sizes.
diff --git a/CLAUDE.md b/CLAUDE.md
index b26bb18..fc51553 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -54,7 +54,8 @@ src/
   components/
     ACCanvas.tsx            # Orchestration shell. Mounts active tab view; owns
                             # `highlightId` state for scroll-to + pulse; wires
-                            # GlobalSearchDropdown topbar (Home only) and DetailModal (art).
+                            # GlobalSearchDropdown topbar (Home only). All categories,
+                            # including art, use ItemExpandPanel inline expand (v0.9 #81).
     HomeTab.tsx             # v0.9 Phase 6: rebuilt — hero stat + ProgressMeter,
                             # month strip, leaving-soon shelf, just-arrived shelf,
                             # latest donations. Cards fire jumpTo (scroll + pulse).
@@ -88,8 +89,8 @@ src/
       # render + AnalyticsView) were retired in Phase 7 / Phase 9. File remains
       # in tree pending a follow-up cleanup PR.
     modals/
-      DetailModal.tsx       # Bottom-sheet item detail. Used by Art (CategoryTab routes
-                            # art clicks here) and persistent across search jumps.
+      # DetailModal.tsx — RETIRED in v0.9 (#81). Was the bottom-sheet for the Art
+      # tab; art now uses the inline ItemExpandPanel like every other category.
     TownManager.tsx         # v0.9 Phase 4: right-side drawer (bottom sheet ≤720px) mounted
                             # at App layout level via useUIStore. Switch/edit/create/delete
                             # towns. Inline edit = name + (ACNH-only) hemisphere — game is
@@ -222,7 +223,7 @@ See `.claude/rules/vercel.md` for full deployment rules. Key points:
 
 ## ACCanvas.tsx
 
-`src/components/ACCanvas.tsx` is the orchestration shell that lives below the `Sidebar`. It mounts the active tab view (HomeTab, CategoryTab, StatsTab), owns the `highlightId` state for the scroll-to + pulse effect (Phase 5/6/8), wires the GlobalSearchDropdown topbar (Home tab only), and renders the persistent DetailModal for art. All data fetching lives in `useMuseumData`; per-category filtering and sectioning lives in `CategoryTab`.
+`src/components/ACCanvas.tsx` is the orchestration shell that lives below the `Sidebar`. It mounts the active tab view (HomeTab, CategoryTab, StatsTab), owns the `highlightId` state for the scroll-to + pulse effect (Phase 5/6/8), and wires the GlobalSearchDropdown topbar (Home tab only). All categories — including art — now use the inline `ItemExpandPanel` (v0.9 #81; `DetailModal` retired). All data fetching lives in `useMuseumData`; per-category filtering and sectioning lives in `CategoryTab`.
 
 Do not add new top-level tabs without updating the tab switch in ACCanvas, the nav list in `Sidebar`, and `VALID_TABS` / `ViewId` in `src/lib/viewTypes.ts`.
 
diff --git a/src/components/ACCanvas.tsx b/src/components/ACCanvas.tsx
index d0b039e..9311178 100644
--- a/src/components/ACCanvas.tsx
+++ b/src/components/ACCanvas.tsx
@@ -16,8 +16,6 @@ import { Sidebar } from './Sidebar';
 import { CategoryTab } from './CategoryTab';
 import { EmptyState } from './shared/EmptyState';
 
-import { DetailModal } from './modals/DetailModal';
-
 import { GlobalSearchDropdown } from './search/GlobalSearchDropdown';
 
 import { StatsTab } from './StatsTab';
@@ -85,10 +83,6 @@ export default function ACCanvas() {
 
   const [query, setQuery] = useState('');
   const [banner, setBanner] = useState<AppErrorKind | null>(null);
-  const [selected, setSelected] = useState<{
-    item: AnyItem;
-    category: CategoryId;
-  } | null>(null);
   const [highlightId, setHighlightId] = useState<string | null>(null);
 
   const { data, loading, loadError, reload } = useMuseumData(
@@ -117,10 +111,9 @@ export default function ACCanvas() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.sea_creatures.length, loading, activeTab]);
 
-  // Reset per-tab search query and selected detail on tab changes
+  // Reset per-tab search query on tab changes
   useEffect(() => {
     setQuery('');
-    setSelected(null);
   }, [activeTab]);
 
   // Scroll-to + highlight on jump (Decision 10).
@@ -266,9 +259,6 @@ export default function ACCanvas() {
                   query={query}
                   setQuery={setQuery}
                   highlightId={highlightId}
-                  onItemSelect={item =>
-                    setSelected({ item, category: activeCat! })
-                  }
                   onToggle={id => toggle(id)}
                   catLabel={catLabel}
                 />
@@ -289,18 +279,6 @@ export default function ACCanvas() {
           </div>
         </div>
       </main>
-
-      {selected && !noTowns && (
-        <DetailModal
-          item={selected.item}
-          category={selected.category}
-          checked={!!activeTownDonated[selected.item.id]}
-          donatedAt={activeTownDonatedAt[selected.item.id]}
-          onToggle={() => toggle(selected.item.id)}
-          onClose={() => setSelected(null)}
-          hemisphere={activeTown?.hemisphere ?? 'NH'}
-        />
-      )}
     </div>
   );
 }
diff --git a/src/components/CategoryTab.tsx b/src/components/CategoryTab.tsx
index b46ff75..317336d 100644
--- a/src/components/CategoryTab.tsx
+++ b/src/components/CategoryTab.tsx
@@ -28,7 +28,6 @@ interface CategoryTabProps {
   query: string;
   setQuery: (q: string) => void;
   highlightId: string | null;
-  onItemSelect: (item: AnyItem) => void;
   onToggle: (id: string) => void;
   catLabel: string;
 }
@@ -43,7 +42,6 @@ export function CategoryTab({
   query,
   setQuery,
   highlightId,
-  onItemSelect,
   onToggle,
   catLabel,
 }: CategoryTabProps) {
@@ -57,7 +55,6 @@ export function CategoryTab({
   // Open the expand panel when a highlight arrives (Decision 10).
   useEffect(() => {
     if (!highlightId) return;
-    if (category === 'art') return; // art uses modal, not inline
     setExpandedId(highlightId);
   }, [highlightId, category]);
 
@@ -177,22 +174,16 @@ export function CategoryTab({
                     category={category}
                     checked={!!donated[item.id]}
                     onClick={() => {
-                      if (category === 'art') {
-                        onItemSelect(item);
-                      } else {
-                        setExpandedId(prev =>
-                          prev === item.id ? null : item.id
-                        );
-                      }
+                      setExpandedId(prev =>
+                        prev === item.id ? null : item.id
+                      );
                     }}
-                    expanded={
-                      category !== 'art' ? expandedId === item.id : undefined
-                    }
+                    expanded={expandedId === item.id}
                     highlighted={highlightId === item.id}
                     hemisphere={hemisphere}
                     currentMonth={currentMonth}
                   />
-                  {category !== 'art' && expandedId === item.id && (
+                  {expandedId === item.id && (
                     <ItemExpandPanel
                       item={item}
                       category={category}
diff --git a/src/components/ItemExpandPanel.tsx b/src/components/ItemExpandPanel.tsx
index 5ec64ac..07fa6c0 100644
--- a/src/components/ItemExpandPanel.tsx
+++ b/src/components/ItemExpandPanel.tsx
@@ -5,6 +5,7 @@ import {
   itemMonths,
   itemNotes,
   isSeaCreature,
+  isArtPiece,
   formatTimestamp,
   type AnyItem,
 } from '../lib/utils';
@@ -35,6 +36,7 @@ export function ItemExpandPanel({
   const cm = currentMonth ?? new Date().getMonth() + 1;
   const shadow = isSeaCreature(item) ? item.shadow : undefined;
   const time = isSeaCreature(item) ? item.time : undefined;
+  const art = isArtPiece(item) ? item : undefined;
 
   const hasMonths = !!(months && months.length > 0);
 
@@ -47,6 +49,21 @@ export function ItemExpandPanel({
         </div>
       )}
       <div className="ac-expand-side">
+        {art && (
+          <div className="ac-stat ac-stat-art">
+            <div className="ac-stat-num ac-stat-num-text">{art.basedOn}</div>
+            <div className="ac-stat-label">based on</div>
+          </div>
+        )}
+        {art?.hasFake !== undefined && (
+          <div
+            className={`ac-art-fake-note ${art.hasFake ? 'ac-art-fake-note-warn' : 'ac-art-fake-note-ok'}`}
+          >
+            {art.hasFake
+              ? 'Crazy Redd may sell a counterfeit — verify before donating.'
+              : 'No known counterfeit — always genuine.'}
+          </div>
+        )}
         {bells != null && (
           <div className="ac-stat">
             <div className="ac-stat-num">{bells.toLocaleString()}</div>
diff --git a/src/components/modals/DetailModal.tsx b/src/components/modals/DetailModal.tsx
deleted file mode 100644
index 5ca1b8e..0000000
--- a/src/components/modals/DetailModal.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { CheckCircle2, X } from 'lucide-react';
-import { CATEGORY_META } from '../../lib/categoryMeta';
-import { MonthGrid } from '../shared/MonthGrid';
-import {
-  displayName,
-  rowSubtitle,
-  itemBells,
-  itemMonths,
-  itemNotes,
-  formatTimestamp,
-  type AnyItem,
-} from '../../lib/utils';
-import type { CategoryId } from '../../lib/types';
-
-export function DetailModal({
-  item,
-  category,
-  checked,
-  donatedAt,
-  onToggle,
-  onClose,
-  hemisphere,
-}: {
-  item: AnyItem;
-  category: CategoryId;
-  checked: boolean;
-  donatedAt?: string;
-  onToggle: () => void;
-  onClose: () => void;
-  hemisphere?: 'NH' | 'SH';
-}) {
-  const { Icon, label } = CATEGORY_META[category];
-  const name = displayName(item, category);
-  const subtitle = rowSubtitle(item, category);
-  const bells = itemBells(item, category);
-  const months = itemMonths(item, category, hemisphere);
-  const notes = itemNotes(item);
-
-  // Guard against ghost-clicks: the same click that opens the modal can land on
-  // the newly-mounted backdrop before the browser event loop settles. Defer
-  // closeability by one tick so backdrop clicks only register on subsequent taps.
-  const closeable = useRef(false);
-  useEffect(() => {
-    const id = setTimeout(() => {
-      closeable.current = true;
-    }, 0);
-    return () => clearTimeout(id);
-  }, []);
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-end justify-center"
-      style={{ backgroundColor: 'rgba(42,32,20,0.55)' }}
-      onClick={() => {
-        if (closeable.current) onClose();
-      }}
-    >
-      <div
-        className="w-full max-w-3xl rounded-t-[20px] overflow-hidden"
-        style={{
-          backgroundColor: '#FDF9F1',
-          maxHeight: '88vh',
-          overflowY: 'auto',
-        }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div className="flex justify-center pt-3 pb-1">
-          <div
-            className="w-10 h-1 rounded-full"
-            style={{ backgroundColor: '#D9CCBA' }}
-          />
-        </div>
-        <div className="flex justify-end px-4 pt-1 pb-2">
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded-full"
-            style={{ backgroundColor: '#EDE3D0' }}
-            aria-label="Close"
-          >
-            <X className="w-4 h-4" style={{ color: '#5a4a35' }} />
-          </button>
-        </div>
-        <div className="px-6 pb-8 space-y-5">
-          <div className="flex items-start gap-4">
-            <div
-              className="rounded-2xl p-3.5 shrink-0"
-              style={{
-                backgroundColor: '#EDE3D0',
-                border: '1px solid #E7DAC4',
-              }}
-            >
-              <Icon className="w-7 h-7" />
-            </div>
-            <div className="pt-1">
-              <div
-                className="text-[11px] uppercase tracking-wider opacity-60 mb-0.5"
-                style={{ color: '#5a4a35' }}
-              >
-                {label}
-              </div>
-              <h2
-                className="text-xl font-semibold leading-snug"
-                style={{ color: '#2A2A2A' }}
-              >
-                {name}
-              </h2>
-              {subtitle && (
-                <p className="text-sm mt-1" style={{ color: '#5a4a35' }}>
-                  {subtitle}
-                </p>
-              )}
-            </div>
-          </div>
-
-          {bells != null && (
-            <div
-              className="rounded-[12px] px-4 py-3"
-              style={{
-                backgroundColor: '#F5E9D4',
-                border: '1px solid #E7DAC4',
-              }}
-            >
-              <div
-                className="text-[11px] uppercase tracking-wider opacity-60 mb-0.5"
-                style={{ color: '#5a4a35' }}
-              >
-                Value
-              </div>
-              <div
-                className="font-semibold text-base"
-                style={{ color: '#2A2A2A' }}
-              >
-                {bells.toLocaleString()} Bells
-              </div>
-            </div>
-          )}
-
-          {category !== 'fossils' && category !== 'art' && (
-            <div>
-              <div
-                className="text-[11px] uppercase tracking-wider opacity-60 mb-2"
-                style={{ color: '#5a4a35' }}
-              >
-                Availability
-              </div>
-              <MonthGrid months={months} />
-              {(!months || months.length === 0) && (
-                <p
-                  className="text-xs mt-1.5 opacity-60"
-                  style={{ color: '#5a4a35' }}
-                >
-                  Active all year
-                </p>
-              )}
-            </div>
-          )}
-
-          {notes && (
-            <div
-              className="rounded-[12px] px-4 py-3 italic text-sm"
-              style={{
-                backgroundColor: '#fff8ee',
-                border: '1px solid #E7DAC4',
-                color: '#5a4a35',
-              }}
-            >
-              {notes}
-            </div>
-          )}
-
-          {checked && donatedAt && (
-            <div
-              className="rounded-[12px] px-4 py-3"
-              style={{
-                backgroundColor: '#f2faf6',
-                border: '1px solid #b8dfc8',
-              }}
-            >
-              <div
-                className="text-[11px] uppercase tracking-wider opacity-60 mb-0.5"
-                style={{ color: '#2A7A52' }}
-              >
-                Donated
-              </div>
-              <div className="text-sm font-medium" style={{ color: '#2A7A52' }}>
-                {formatTimestamp(donatedAt)}
-              </div>
-            </div>
-          )}
-
-          <button
-            onClick={onToggle}
-            className="w-full flex items-center justify-center gap-2 py-3.5 rounded-[14px] font-medium text-sm transition"
-            style={{
-              backgroundColor: checked ? '#EDE3D0' : '#3CA370',
-              color: checked ? '#2A2A2A' : '#fff',
-              border: '1px solid #E7DAC4',
-            }}
-          >
-            {checked && <CheckCircle2 className="w-4 h-4" />}
-            {checked ? 'Remove from Donated' : 'Mark as Donated'}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/index.css b/src/index.css
index 1f96727..2bc3186 100644
--- a/src/index.css
+++ b/src/index.css
@@ -948,6 +948,25 @@
   font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
   color: var(--ink-muted);
 }
+.ac-stat-art .ac-stat-num { font-size: 15px; font-style: italic; line-height: 1.35; }
+.ac-art-fake-note {
+  font-size: 12px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid;
+  font-family: var(--font-display);
+  font-style: italic;
+}
+.ac-art-fake-note-warn {
+  background: var(--warn-soft);
+  border-color: var(--warn);
+  color: var(--warn);
+}
+.ac-art-fake-note-ok {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent-ink);
+}
 .ac-note {
   font-size: 12px; color: var(--ink-soft); font-style: italic;
   font-family: var(--font-display);
diff --git a/src/lib/types.ts b/src/lib/types.ts
index b2156d4..560f219 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -99,6 +99,8 @@ export interface ArtPiece {
   id: string;
   name: string;
   basedOn: string;
+  /** ACNH: whether Crazy Redd sells a counterfeit version of this piece */
+  hasFake?: boolean;
 }
 
 export interface SeaCreature {

From a5e650901ed0676f9715357570b9bf55668c478e Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 01:25:53 -0400
Subject: [PATCH 27/28] docs(#81): update DetailModal references after
 retirement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sweep of active living docs to reflect that DetailModal was deleted
in #81 and Art now uses the inline ItemExpandPanel.

- README.md: collapse the separate "bottom-sheet detail view" bullet
  into the inline-expand bullet; mention basedOn + Crazy Redd note.
- .claude/rules/architecture.md: ACCanvas, CategoryTab, and modals/
  entries all reframed — DetailModal listed as retired.

Left untouched (history / out of scope):
- CHANGELOG Phase 7 Decisions entry ("Art keeps its bottom-sheet
  DetailModal") — describes a v0.9 Phase 7 decision that was reversed
  in #81. As Phase 7 history it's still accurate. Reported to Bea.
- docs/v0.7-audit.md, docs/v0.7-architecture-proposal.md — historical
  v0.7 docs.
- docs/design-handoffs/v0.9_curator/README.md — design handoff
  snapshot. Reported to Bea.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .claude/rules/architecture.md | 6 +++---
 README.md                     | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/.claude/rules/architecture.md b/.claude/rules/architecture.md
index 1c1ac21..5105dc8 100644
--- a/.claude/rules/architecture.md
+++ b/.claude/rules/architecture.md
@@ -27,12 +27,12 @@ Vite + React 19 + TypeScript + Tailwind CSS v4 + Zustand (persist + non-persiste
 - `src/components/Sidebar.tsx` — 280px sticky left sidebar (Phase 2). Brand, active-town card, NavLink nav with per-category counts, Export CSV / Settings footer. "Switch town ›" opens TownManager via useUIStore.
 - `src/components/TownManager.tsx` — right-side drawer (bottom sheet ≤720px) mounted at App layout level (Phase 4). Switch / inline-edit / create / delete towns. Edit form is name + (ACNH-only) hemisphere; game is read-only post-create.
 - `src/components/SettingsPage.tsx` + `SettingsRoute.tsx` — `/settings` route (Phase 3). About + Danger zone only (no Appearance, Decision 3).
-- `src/components/ACCanvas.tsx` — orchestration shell. Owns `highlightId` state. Mounts active tab; wires GlobalSearchDropdown topbar (Home only) and DetailModal (art).
+- `src/components/ACCanvas.tsx` — orchestration shell. Owns `highlightId` state. Mounts active tab; wires GlobalSearchDropdown topbar (Home only). All categories (including art) use the inline `ItemExpandPanel` as of v0.9 (#81).
 - `src/components/ErrorBoundary.tsx` / `ErrorBanner.tsx` / `ErrorState.tsx`.
 
 ### Components — tabs
 - `src/components/HomeTab.tsx` — Phase 6 rebuild. Hero stat + ProgressMeter, month strip, "Leaving end of {month}" shelf, "Just arrived" shelf, latest donations. Cards fire `jumpTo`.
-- `src/components/CategoryTab.tsx` — Phase 7. Sections: Leaving this month / Available now / Out of season / Already donated. Owns expandedId; reacts to `highlightId`. Hosts per-tab `SearchBar`. Routes art clicks to DetailModal instead of inline expand.
+- `src/components/CategoryTab.tsx` — Phase 7. Sections: Leaving this month / Available now / Out of season / Already donated. Owns expandedId; reacts to `highlightId`. Hosts per-tab `SearchBar`. All categories (including art) use the inline `ItemExpandPanel` as of v0.9 (#81).
 - `src/components/StatsTab.tsx` — Phase 9. Per-category cards (3/4/5 by game) + 12-column yearly rhythm chart. Replaces AnalyticsView.
 - `src/components/ProgressMeter.tsx` (+ `progressMeterUtils.ts`, `ProgressMeter.test.ts`) — Phase 6. 4 segments (fish/bugs/fossils/art) for ACGCN/ACWW/ACCF; 5 segments (+ sea) for ACNL/ACNH. `.ac-meter-5` modifier handles responsive wrapping.
 
@@ -40,7 +40,7 @@ Vite + React 19 + TypeScript + Tailwind CSS v4 + Zustand (persist + non-persiste
 - `src/components/CollectibleRow.tsx` — Phase 5 restyle. Monogram glyph, meta line with `·` separators, leaving/new pills, animated chevron. Stamps `data-row-id`. Donate UI lives in the expand panel only.
 - `src/components/ItemExpandPanel.tsx` — Phase 5 rebuild. Two-column grid: MonthGrid + stats stack (bells / shadow / hours / notes) + donate button.
 - `src/components/shared/` — DonateToggle, EmptyState, HabitatChip, MonthGrid (Phase 5 re-skin, accepts `current` prop), SearchBar (per-tab, used by CategoryTab). `CategoryProgress.tsx` is dead — file remains pending cleanup.
-- `src/components/modals/DetailModal.tsx` — bottom-sheet detail. Used by Art and as a fallback in some paths.
+- `src/components/modals/` — DetailModal **retired in v0.9 (#81)**; file deleted. Art now uses the inline `ItemExpandPanel` like every other category.
 - `src/components/views/ActivityFeed.tsx` — recent donations list (consumed by HomeTab). `AnalyticsView` and `SectionCard` retired in Phase 9.
 - `src/components/search/GlobalSearchDropdown.tsx` — Phase 8 unified search dropdown (anchored under Home topbar). Grouped category results (5 groups for ACNL/ACNH, 4 elsewhere), keyboard nav (↑↓↵esc), search history at localStorage key `ac-curator-search-history` (max 8). Replaces GlobalSearchBar / GlobalSearchResults / SearchHistoryPopover.
 
diff --git a/README.md b/README.md
index 0704a2a..67388c4 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,7 @@ A cozy companion web app for tracking Animal Crossing museum donations across mu
 - Manage multiple towns from a single TownManager drawer — switch, rename, create, and delete (game is locked at create-time)
 - **Five games supported:** Animal Crossing (GCN), Wild World, City Folk, New Leaf, New Horizons
 - **Persistent left sidebar** with brand, active town card, per-category donation counts, and Export CSV / Settings footer
-- **Inline item expand** — tap a Fish, Bug, Fossil, or Sea Creature row to open a two-column panel with the month availability grid, bells / shadow / hours, notes, and donate/undonate button
-- **Bottom-sheet detail view** — Art opens a full detail sheet (`DetailModal`)
+- **Inline item expand** — tap any row (Fish, Bugs, Fossils, Sea Creatures, or Art) to open a two-column panel with the month availability grid, bells / shadow / hours / `basedOn` real-world reference / Crazy Redd authentication note (ACNH art), notes, and donate/undonate button
 - **Hemisphere toggle** — New Horizons towns expose an NH/SH toggle; month grids reflect the correct hemisphere
 - **URL-based navigation** — every town and tab has a shareable URL via React Router v6
 - Home screen with hero stat, current-month strip, "Leaving end of {month}" and "Just arrived" shelves, segmented progress meter, and latest donations

From 6a169c0ff22014340b031f36dc7566b3d58204fa Mon Sep 17 00:00:00 2001
From: Brock Jenkinson <brockjenkinson@gmail.com>
Date: Mon, 4 May 2026 01:53:02 -0400
Subject: [PATCH 28/28] release: stage v0.9.0-beta
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CHANGELOG: roll [Unreleased] section into [v0.9.0-beta] - 2026-05-04;
  add fresh empty [Unreleased] above
- App.tsx (#60): hide branch suffix in version footer when branch
  starts with `release/`
- CLAUDE.md, README.md: mark v0.9.0-beta as shipped
- docs/v0.9-plan.md: status header to shipped
- public/version-history.html: add v0.9.0-beta entry to timeline,
  velocity table, and "currently building" → v1.0
---
 CHANGELOG.md                |  7 +++-
 CLAUDE.md                   |  2 +-
 README.md                   |  2 +-
 docs/v0.9-plan.md           |  2 +-
 public/version-history.html | 77 ++++++++++++++++++++++++++++---------
 src/App.tsx                 | 26 ++++++++-----
 6 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4fb8b81..c3297c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,12 @@
 
 All notable changes to this project are documented here.
 
-## [Unreleased] — v0.9.0-beta (in progress)
+## [Unreleased]
+
+## [v0.9.0-beta] — 2026-05-04
+
+### Fixed — Version footer suppresses `release/` branch suffix (#60)
+- **`src/App.tsx`** version footer now hides the `· <branch>` suffix when the active branch starts with `release/`. Production hostname behavior unchanged. Closes #60.
 
 ### Changed — Art tab uses inline ItemExpandPanel (#81)
 - **Art tab converted from `DetailModal` bottom-sheet to inline `ItemExpandPanel`.** Art rows now expand inline like fish/bugs/fossils/sea creatures — same `.ac-row` → `.ac-expand` flow. Closes #81 (v0.9 release blocker).
diff --git a/CLAUDE.md b/CLAUDE.md
index fc51553..60e523c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,7 +16,7 @@ See `docs/architecture.md` — deep architectural context (store schema, migrati
 ## Project Overview
 
 Animal Crossing multi-game companion web app. Tracks museum donations (fish, bugs, fossils, art) across multiple towns and games.
-Meadow design language (Fraunces + Inter, moss-green accent) as of v0.9. **Last stable: v0.8.2-alpha (shipped 2026-05-01). Active development: v0.9.0-beta — Phases 1–9 shipped to `development`; Phase 10 (mobile responsive verification) pending. See `docs/v0.9-plan.md` for canonical plan.**
+Meadow design language (Fraunces + Inter, moss-green accent) as of v0.9. **Current release: v0.9.0-beta (shipped 2026-05-04) — full UI revamp (Sidebar, TownManager, sectioned CategoryTab, redesigned HomeTab + StatsTab, GlobalSearchDropdown, mobile responsive). See `docs/v0.9-plan.md` for the implementation plan and `CHANGELOG.md` for the full entry.**
 Live at: https://animalcrossingwebapp.vercel.app | Dev preview: https://development-animalcrossingwebapp.vercel.app
 
 ## Commands
diff --git a/README.md b/README.md
index 67388c4..68f0b96 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,6 @@ Museum data lives in `public/data/<game>/`:
 
 ## Version
 
-Current release: **v0.8.2-alpha** (last stable on `main`). Active development: **v0.9.0-beta** — Phases 1–9 of the UI revamp shipped to `development`; Phase 10 (mobile responsive verification) pending. See [CHANGELOG.md](CHANGELOG.md) for history and [docs/v0.9-plan.md](docs/v0.9-plan.md) for the canonical plan.
+Current release: **v0.9.0-beta** (shipped 2026-05-04) — full UI revamp staged for release on `main`. Last stable on `main`: **v0.8.2-alpha**. See [CHANGELOG.md](CHANGELOG.md) for history and [docs/v0.9-plan.md](docs/v0.9-plan.md) for the v0.9 plan.
 
 Significant design decisions are logged in [docs/decisions.md](docs/decisions.md).
diff --git a/docs/v0.9-plan.md b/docs/v0.9-plan.md
index fa96b61..9919357 100644
--- a/docs/v0.9-plan.md
+++ b/docs/v0.9-plan.md
@@ -1,6 +1,6 @@
 # v0.9.0-beta — Implementation Plan
 
-**Status:** In implementation — Phases 1–10 shipped to `development`; ready to tag v0.9.0-beta  
+**Status:** ✅ Shipped 2026-05-04 — all 10 phases merged; release branch cut from `development`  
 **Target tag:** `v0.9.0-beta`  
 **Planned milestone:** Following v0.8.2-alpha (shipped 2026-05-01)  
 **Document date:** 2026-05-03  
diff --git a/public/version-history.html b/public/version-history.html
index f8c969e..d60fd23 100644
--- a/public/version-history.html
+++ b/public/version-history.html
@@ -422,22 +422,22 @@
   <header>
     <span class="leaf-deco">🍃</span>
     <h1>Animal Crossing Web App</h1>
-    <p>Version history &amp; roadmap · Updated May 1, 2026</p>
+    <p>Version history &amp; roadmap · Updated May 4, 2026</p>
   </header>
 
   <!-- Velocity banner -->
   <div class="velocity-banner">
     <div>
-      <div class="headline">🚀 v0.1 → v0.8.2 in 21 days</div>
-      <div class="sub">Eleven releases. Blathers can't keep up.</div>
+      <div class="headline">🚀 v0.1 → v0.9 in 24 days</div>
+      <div class="sub">Twelve releases. Blathers can't keep up.</div>
     </div>
     <div class="vel-stats">
       <div class="vel-stat">
-        <div class="num">11</div>
+        <div class="num">12</div>
         <div class="label">releases shipped</div>
       </div>
       <div class="vel-stat">
-        <div class="num">21</div>
+        <div class="num">24</div>
         <div class="label">days elapsed</div>
       </div>
       <div class="vel-stat">
@@ -456,6 +456,35 @@ <h1>Animal Crossing Web App</h1>
     <h2>🏅 Shipped versions</h2>
     <div class="timeline">
 
+      <!-- v0.9.0-beta -->
+      <div class="tl-entry">
+        <div class="tl-date">May 4<br/>2026</div>
+        <div class="tl-spine">
+          <div class="tl-dot"></div>
+          <div class="tl-line"></div>
+        </div>
+        <div class="tl-card">
+          <div class="tl-card-head">
+            <span class="version-badge">v0.9.0-beta</span>
+            <span class="version-title">Curator UI revamp</span>
+            <span class="velocity-chip">3 days after v0.8.2</span>
+          </div>
+          <ul class="tl-bullets">
+            <li>Full Meadow design language — Fraunces + Inter type, moss-green accent, retired Varela Round + parchment palette</li>
+            <li>Sidebar shell replaces MuseumHeader + TabBar + TownSwitcher; per-category counts, sea nav gated for ACNL/ACNH</li>
+            <li>TownManager drawer unifies create/edit/delete (resolves the v0.8.1 greyed-out modal stopgap); game immutable post-creation, `playerName` deprecated</li>
+            <li>Settings page with About + Danger zone (reset active-town donations, reset everything)</li>
+            <li>HomeTab rebuilt — hero stat, month strip, leaving-soon + just-arrived shelves, ProgressMeter (4 or 5 segments by game)</li>
+            <li>CategoryTab sectioned (Leaving / Available / Out of season / Already donated) with month-wrap logic</li>
+            <li>GlobalSearchDropdown with category groups, keyboard nav (↑↓↵esc), search history, art `basedOn` matching preserved</li>
+            <li>StatsTab redesigned — per-category cards (3/4/5 by game) and yearly rhythm chart</li>
+            <li>Art tab now uses inline ItemExpandPanel; DetailModal retired</li>
+            <li>ACWW + ACCF art data shipped (Closes #74); Meadow tokens, scroll-to + pulse highlight, full mobile responsive pass at 980/720/700/480 breakpoints</li>
+            <li>Bug fixes: ACNH all-caught-up (#71), art modal close (#81), version footer suffix (#60), modal sticky-label (#26)</li>
+          </ul>
+        </div>
+      </div>
+
       <!-- v0.8.2-alpha -->
       <div class="tl-entry">
         <div class="tl-date">May 1<br/>2026</div>
@@ -710,47 +739,51 @@ <h2>🏅 Shipped versions</h2>
 
   <!-- Currently building -->
   <section>
-    <h2>🔨 Currently building — v0.9</h2>
+    <h2>🔨 Currently building — v1.0</h2>
     <div class="building-card">
       <div class="building-head">
         <span class="building-badge">UP NEXT</span>
-        <h3>Polish, onboarding &amp; PWA</h3>
-        <span class="building-note">making it feel at home</span>
+        <h3>Launch ready</h3>
+        <span class="building-note">polish, PWA, accessibility</span>
       </div>
 
-      <p class="checklist-section">✅ Recently shipped (v0.8.2)</p>
+      <p class="checklist-section">✅ Recently shipped (v0.9.0-beta)</p>
       <div class="checklist">
         <div class="check-item done">
           <div class="box">✓</div>
-          <span class="text">Sea creatures tab — ACNH + ACNL, inline expand panel, Home tab cards, search, CSV</span>
+          <span class="text">Meadow UI revamp — Sidebar, TownManager drawer, sectioned CategoryTab, redesigned HomeTab + StatsTab, GlobalSearchDropdown</span>
+        </div>
+        <div class="check-item done">
+          <div class="box">✓</div>
+          <span class="text">Mobile responsive pass at 980/720/700/480 breakpoints; scroll-to + highlight wiring</span>
+        </div>
+        <div class="check-item done">
+          <div class="box">✓</div>
+          <span class="text">ACWW + ACCF art data; art tab now inline-expand</span>
         </div>
       </div>
 
       <p class="checklist-section">⬜ Planned</p>
       <div class="checklist">
-        <div class="check-item todo">
-          <div class="box">·</div>
-          <span class="text">UI redesign pass — cozy-er, more expressive</span>
-        </div>
         <div class="check-item todo">
           <div class="box">·</div>
           <span class="text">PWA support — install to home screen</span>
         </div>
         <div class="check-item todo">
           <div class="box">·</div>
-          <span class="text">Mobile-first responsive layout pass</span>
+          <span class="text">First-run onboarding / empty state improvements</span>
         </div>
         <div class="check-item todo">
           <div class="box">·</div>
-          <span class="text">First-run onboarding / empty state improvements</span>
+          <span class="text">Full accessibility audit (#76, #82) — keyboard nav, ARIA, focus rings</span>
         </div>
         <div class="check-item todo">
           <div class="box">·</div>
-          <span class="text">Seasonal / time-based filtering in list views</span>
+          <span class="text">SEO + Open Graph metadata; performance pass</span>
         </div>
         <div class="check-item todo">
           <div class="box">·</div>
-          <span class="text">Improved accessibility — keyboard nav, focus rings</span>
+          <span class="text">Branding &amp; identity polish — drop the alpha/beta label</span>
         </div>
       </div>
     </div>
@@ -886,13 +919,19 @@ <h2>⚡ Velocity detail</h2>
             <td style="padding:.6rem 1rem;">1 day</td>
             <td style="padding:.6rem 1rem;">Sea Creatures tab (ACNH + ACNL)</td>
           </tr>
+          <tr style="border-top:1px solid var(--border); background:#fafafa;">
+            <td style="padding:.6rem 1rem; color:var(--leaf); font-weight:bold;">v0.9.0-beta</td>
+            <td style="padding:.6rem 1rem;">May 4</td>
+            <td style="padding:.6rem 1rem;">3 days</td>
+            <td style="padding:.6rem 1rem;">Curator UI revamp — Meadow design, Sidebar, TownManager, sectioned categories</td>
+          </tr>
         </tbody>
       </table>
     </div>
   </section>
 
   <footer>
-    <p>🍃 <a href="https://animalcrossingwebapp.vercel.app">animalcrossingwebapp.vercel.app</a> · v0.8.2-alpha shipped · v0.9 in progress · Dev preview at <a href="https://development-animalcrossingwebapp.vercel.app">development-animalcrossingwebapp.vercel.app</a></p>
+    <p>🍃 <a href="https://animalcrossingwebapp.vercel.app">animalcrossingwebapp.vercel.app</a> · v0.9.0-beta shipped · v1.0 next · Dev preview at <a href="https://development-animalcrossingwebapp.vercel.app">development-animalcrossingwebapp.vercel.app</a></p>
   </footer>
 
 </div>
diff --git a/src/App.tsx b/src/App.tsx
index 93c2802..9b1efa6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -81,15 +81,23 @@ function App() {
             pointerEvents: 'none',
           }}
         >
-          {window.location.hostname === 'animalcrossingwebapp.vercel.app' ? (
-            <>v{import.meta.env.VITE_APP_VERSION}</>
-          ) : (
-            <>
-              v{import.meta.env.VITE_APP_VERSION}
-              {' · '}
-              {import.meta.env.VITE_GIT_BRANCH}
-            </>
-          )}
+          {(() => {
+            const version = import.meta.env.VITE_APP_VERSION;
+            const branch = import.meta.env.VITE_GIT_BRANCH;
+            const isProd =
+              window.location.hostname === 'animalcrossingwebapp.vercel.app';
+            const hideBranchSuffix =
+              isProd || !branch || branch.startsWith('release/');
+            return hideBranchSuffix ? (
+              <>v{version}</>
+            ) : (
+              <>
+                v{version}
+                {' · '}
+                {branch}
+              </>
+            );
+          })()}
         </div>
       )}
     </ErrorBoundary>