registry-checklist

name

registry-checklist

description

Designs and maintains BabyPickr's Smart Registry Checklist: tier-based budget envelopes (minimum / comfortable / premium), cross-page product selection, consumable Amazon slots, budget tracking, curated auto-picks, and print/export. Use when editing the new-parent checklist blog, lib/registry/*, checklist UI, browse-page "Add to checklist" flows, or integrating new catalog products into registry slot eligibility.

Smart Registry Checklist

BabyPickr's checklist is not a Babylist clone. It is a situation-aware, budget-bounded registry brain tied to our catalog, journey filters, and editorial tiers.

Canonical UX: standalone tool at /checklist (app/checklist/page.tsx, components/checklist/ChecklistToolLayout.tsx, ChecklistPageContent.tsx) + components/registry/RegistryChecklistShell.tsx. The blog article embeds the same shell with returnTo pointing at its #budget-checklists anchor. Slot copy and tier lists live in lib/blog/budgetChecklists.ts.

Return path default: REGISTRY_CHECKLIST_RETURN_PATH in lib/registry/browseLinks.ts → /checklist#budget-checklists. Browse "Add to checklist" flows return here unless a page passes a different returnTo.

Shareable tier links: On /checklist only, RegistryChecklistShell sets syncTierInUrl so ?tier=minimum|comfortable|premium tracks the active tab (same babypickr_registry_v1 state as the blog embed).

Journey banner: ChecklistPageContent reads babypickr_journey_done and shows SituationBar when present; otherwise a Gear Finder CTA card.

Nav: CategoryTopNav includes Checklist between Guides and the Gear Finder pill.

Read matrix.md for tier × slot × category mapping, Amazon links, and bucket ceilings. Read phases.md for implementation order. Read decisions.md for editorial rules that are easy to break when updating links or products.

---

Three modes (always)

Mode ID	Label	Gear envelope	Total envelope (gear + consumables)
minimum	Minimum viable	~$540	~$700
comfortable	Comfortable	~$1,318	~$1,500
premium	Premium	~$3,430	~$3,685

Minimum tier label in budgetChecklists.ts: "~$540 to $700". Gear $540 + consumables $160 = $700 total.

Comfortable tier label: "~$1,318 to $1,500". Gear $1,318 + consumables $182 = $1,500 total.

Premium tier label: "~$3,430 to $3,685". Gear $3,430 + consumables $255 = $3,685 total.

Envelopes are editorial targets, recalibrated when catalog floor prices shift. Spent/remaining uses live catalog prices for selected products + fixed estimates for external consumables.

---

Mental model

/checklist (or blog embed)
    → pick tier (+ optional Gear Finder journey in localStorage)
    → preloaded slot list (template)
    → optional "Suggest picks for me" (auto-fill catalog products)
    → user browses category with deep-linked filters
    → "Add to checklist" on product card
    → checklist updates + budget bar moves
    → print / copy summary / (later) email

Two checklist layers:

1. Template slots — editorial list (car seat, crib, diapers…). Always visible.
2. Selections — optional catalog product or external Amazon link per slot. Drives budget math.

Parents never build the template from scratch. They fill slots and check off progress.

---

Slot types

Type	Source	Budget
catalog	data/*.ts product by id	product.price from catalog
external	data/registryExternals.ts	priceEstimate (editorial)
manual	Template only (sheets, onesies)	$0 or small estimate

Catalog categories: strollers, car-seats, cribs, monitors, high-chairs, bottles.

External consumables (Amazon affiliate URLs in data/registryExternals.ts): diapers, wipes, cream, nursing pads, storage bags, formula starter, swaddles, onesies, changing mat, sheets, crib mattress.

Do not put feeding-path Amazon items (nursing pads, storage bags, formula) in the consumables bucket — see Feeding path below.

---

Feeding path (Breastfeeding | Formula | Combo)

Slots: min-feeding, comf-diapers-feeding, prem-bottles. UI: components/registry/FeedingPathPicker.tsx. Logic: lib/registry/feedingPath.ts.

Path	Amazon items shown	Est. cost	Budget bucket
Breastfeeding	nursing pads + storage bags	~$27	bottles
Formula	formula starter	~$35	bottles
Combo	all three	~$62	bottles

• State: feedingPathByTier on RegistryStateV1 (lib/registry/types.ts), persisted in babypickr_registry_v1, cleared on tier reset.
• Catalog bottle picks also count toward bottles bucket when path is formula or combo (feedingPathUsesBottles).
• Minimum bottles ceiling is $90 — combo + a bottle pick may slightly exceed; intentional nudge toward leaner picks (see matrix.md).
• Comfortable bundled row comf-diapers-feeding includes diapers + wipes + cream (consumables) plus feeding-path items (bottles bucket).

When updating Amazon links for feeding items, edit data/registryExternals.ts and keep feedingPath: "breastfeeding" | "formula" on the item.

---

Crib mattress (conditional sub-row)

Catalog cribs are often frames only — mattress sold separately.

• Sub-row UI: components/registry/SleepMattressSubRow.tsx
• Eligibility: lib/registry/sleepMattress.ts — show when parent picks a convertible/nursery crib; skip for playards/bassinets with included sleep surface.
• Slot ids: min-crib-mattress, comf-crib-mattress, prem-crib-mattress
• External id: ext-crib-mattress (~$100, amzn.to/43D6Rph)
• Budget bucket: cribs, not consumables (checklistExternals.ts + budgetAllocation.ts)

---

URL contract (browse deep links)

Every checklist → browse link MUST include:

Param	Purpose
registryTier	minimum | comfortable | premium
registrySlot	Slot id, e.g. min-car-seat
budget	Maps tier → catalog filter: budget / mid / premium
sort	Category-specific value sort (see matrix)
returnTo	Encoded path back to checklist anchor

Tier → filter mapping (default):

Tier	budget param	Sort bias
minimum	budget	value / lowest price
comfortable	mid	best-match
premium	premium	rating or best-match

Examples:

• Minimum car seat: /car-seats?budget=budget&priority=value&registryTier=minimum&registrySlot=min-car-seat&returnTo=...
• Comfortable stroller: /?budget=mid&sortBy=best-match&registryTier=comfortable&registrySlot=comf-stroller&returnTo=...
• Premium crib: /cribs?budget=premium&registryTier=premium&registrySlot=prem-crib&returnTo=...

Implement URL builder in lib/registry/browseLinks.ts — single source; blog and checklist UI import it.

---

Cross-page "Add to checklist"

When registrySlot is present on a browse page:

1. Show ChecklistSessionBar (sticky): tier name, slot label, "Back to checklist".
2. ProductCard shows Add to checklist (primary) beside Amazon / BabyPickr CTAs.
3. On add: persist to localStorage key babypickr_registry_v1, clear slot conflict if replacing.
4. Toast: "Added [name] · $449 · $251 left in gear budget" + link to checklist.

Do not auto-add on Amazon click. Explicit opt-in only.

---

Budget UI

Show on checklist page:

• Total envelope vs spent vs remaining
• Gear vs consumables split
• Per-category bucket bars (car seat $160 of $160 ✓, stroller $0 of $350)

Single source of truth: computeSpentByBucket() in lib/registry/budgetAllocation.ts. Total spent = sum of all buckets (no drift between total and bucket bars). Used by budget bar, print export, and toasts.

If user exceeds bucket: soft warning + "Show cheaper options" deep link with value sort.

If user exceeds total: suggest downgrade tier or swap one premium pick.

Bucket defaults live in lib/registry/budgetEnvelopes.ts. See matrix.md.

---

Curated auto-picks ("Suggest my setup")

Yes — Phase 2 feature. After tier + short profile:

Question	Affects
Apartment or house?	stroller, monitor, high chair filters
Compact car?	car seat vehicleFit
Breastfeeding, formula, or both?	bottle slot weight / skip
Due date urgency	timing sort only

Algorithm (reuse journey — do not duplicate):

1. Load slot list for tier.
2. For each catalog slot, run category filter fn with tier budget + profile situations.
3. Score with existing *JourneyBoost fns where applicable.
4. Pick rank #1 under bucket price ceiling.
5. Write selections to registry state; user can swap any pick.

New products enter auto-picks automatically when registrySlotEligible(product, slot, tier) passes rules in lib/registry/slotEligibility.ts.

---

Print / export

Shipped: Branded print via components/registry/ChecklistPrintSheet.tsx (portaled to document.body) + lib/registry/formatExport.ts + print CSS in app/globals.css.

Print includes: BabyPickr logo (/logo.svg), green header band, tier title, budget table, all rows with ☐/☑, catalog picks, Amazon links + estimates, mattress sub-rows, feeding path label.

Print CSS requirements:

• @media print: hide body > *:not(#registry-checklist-print) to avoid blank pages
• print-color-adjust: exact on colored elements (browsers default to B&W without it)
• Footer tip: user must enable Color + Background graphics in print dialog

Phase 2 (not yet): "Copy checklist" → markdown/plain text (formatChecklistPlainText exists).

Phase 3 (optional): Email via subscribe API + checklist snapshot.

Skip PDF generation library until print proves insufficient.

---

File layout (target)

lib/registry/
  types.ts              # RegistryState, SlotId, Selection, feedingPathByTier
  storage.ts            # localStorage read/write/migrate; getDefaultRegistryState
  budgetEnvelopes.ts    # tier totals + category buckets
  budgetAllocation.ts   # computeSpentByBucket — single source of truth
  feedingPath.ts        # breastfeeding | formula | combo → Amazon ids + estimates
  checklistExternals.ts # slot → external id map + bucket overrides
  sleepMattress.ts      # when mattress sub-row appears
  browseLinks.ts        # buildBrowseHref(slot, tier, profile)
  slotEligibility.ts    # product ↔ slot ↔ tier rules
  suggestPicks.ts       # auto-curation orchestrator (Phase 4)
  formatExport.ts       # print document + clipboard text

data/registryExternals.ts   # consumables + Amazon affiliate URLs

components/registry/
  RegistryChecklistShell.tsx
  ChecklistPrintSheet.tsx
  FeedingPathPicker.tsx
  SleepMattressSubRow.tsx
  ChecklistExternalLinks.tsx
  ChecklistSessionBar.tsx
  BudgetSummaryBar.tsx
  SlotCard.tsx
  AddToChecklistButton.tsx

app/checklist/page.tsx, layout.tsx
components/checklist/ChecklistToolLayout.tsx, ChecklistPageContent.tsx

lib/registry/*.test.ts
hooks/useRegistryState.ts   # hydrate from localStorage after mount (no SSR mismatch)

---

Catalog integration (when adding products)

After any data/*.ts edit, ask: does this product fill a registry slot for any tier?

1. Product must have valid budgetTier and category.
2. Run slotEligibility rules (no manual per-SKU list unless exception).
3. If new category or new flag (e.g. isTravelFriendly), update rules + matrix.md + tests.
4. Run npm test -- lib/registry/*.test.ts.

Cross-skill: Update the matching journey skill (strollers, car-seats, …) with one line pointing here if the new flag affects slot eligibility.

---

Testing (required)

When	Command
Registry logic	npm test -- lib/registry/*.test.ts
Browse link + storage	above + manual smoke on /checklist
Full suite before done	npm test

Tests must cover: tier→URL mapping, bucket math, suggestPicks respects ceilings, storage round-trip, eligibility for new catalog fixture product.

---

External Amazon links (maintainer)

Single file: data/registryExternals.ts — id, label, priceEstimate, amazonHref, optional feedingPath.

Slot mapping: lib/registry/checklistExternals.ts — which externals attach to which checklist slot when checked.

When updating a link or price:

1. Edit data/registryExternals.ts
2. If slot mapping changes, edit checklistExternals.ts
3. If bucket routing changes (mattress → cribs), edit EXTERNAL_SLOT_BUCKET_OVERRIDE and budgetAllocation.ts
4. Update matrix.md § External consumables table
5. Run npm test -- lib/registry/*.test.ts

Full link table: see matrix.md. Until a link is provided, show slot with checkbox only (no broken href).

---

Anti-patterns

• Do not hand-build browse URLs in blog copy; use browseLinks.ts.
• Do not duplicate journey filter logic in suggestPicks; call filterStrollers, filterCarSeats, etc.
• Do not store prices in localStorage without product id (always re-read price from catalog on load for catalog selections).
• Do not make checklist depend on account/login for v1.