- Visual cart-style cards with image thumbnails for provider, venue,
crematorium, coffin (replaces accordion text lists)
- Arrangement details section at top: arranger name, deceased name,
service tradition, preferred dates/times
- Location pin icons on all location-based cards
- Allowance display: fully covered shows "Included in your package",
partially covered shows price/allowance/remaining breakdown
- Share dialog: "Share this plan" button opens DialogShell with multi-email
input, add/remove recipients, send confirmation state
- Included services as checkmark list, extras as priced list (consistent
tick logic — only in sections with no priced items)
- Full-width CTA, deposit deferred to payment step
- Edit buttons with pencil icon in secondary colour
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Switch from wide-form to grid-sidebar (viewport-locked, independent scroll)
- Sidebar: heading, allowance info bubble (conditional), category menu with
expandable subcategories, dual-knob price slider with editable inputs,
sort by dropdown, clear all filters, save-and-exit link
- Grid: coffin cards with thumbnail hover preview, equal-height cards,
subtle bg for white-bg product photos, colour count, Most Popular badge
- Card click navigates to CoffinDetailsStep (no Continue button)
- 20 coffins per page max before pagination
- WizardLayout grid-sidebar: wider sidebar (28%), overflowX hidden,
vertical scroll at all breakpoints, viewport-lock on desktop only
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- MUI Autocomplete with static list replaced by Input atom with
search icon — parent wires to Google Places or geocoding API
- Optional searchSlot prop for custom autocomplete integration
- Removed CemeteryOption type and cemeteries prop
- cemeterySearch field stores freetext, not a selected ID
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Select dropdown replaced with MUI Autocomplete (type-to-search
with search icon) — scalable for large cemetery lists
- Heavy h5 headings replaced with body1 contextual text
- In production, parent can wire this to Google Places API
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Drop state/postcode from addresses, round distances to whole numbers,
use generic "from service venue" instead of provider name in distance.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Horizontal compact card was cramped with long addresses/distances.
Stacked layout gives full width to both image and text. Icons bumped
to 18px with flex-start alignment for proper baseline alignment.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Grief-sensitive third option — users shouldn't feel forced into a
hearse attendance decision during a difficult time. Captures intent
as unresolved so the funeral arranger can follow up.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Simplified from over-engineered multi-card selection to two clean
variants based on funeral type:
- Service & Cremation: compact card + witness Yes/No (ToggleButtonGroup)
- Cremation Only: compact card + badge + "Included in Package" notice
Removed: multi-card grid, priority dropdown, special instructions,
crematoriums array prop. Crematorium is always pre-selected by provider.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New VenueServicesStep (step 7c): venue-specific service toggles
with compact venue card, availability notices, AddOnOption toggles
with "View more" for long descriptions, conditional tally total
- AddOnOption: price colour changed from text.secondary to primary
(copper) for consistency with all other price displays in the system
- 5 stories: Default, WithNotice, PrePlanning, WithSelections, Minimal
- Component registry updated with VenueDetailStep + VenueServicesStep
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Thumbnails now 4:3 aspect ratio instead of square
- Renamed thumbnailSize → thumbnailHeight, width calculated from ratio
- Default 64px height × 85px width
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New ImageGallery molecule:
- Hero display area with thumbnail strip below
- Hover thumbnail to preview in hero, click to lock selection
- First image selected by default, brand border on active thumb
- Keyboard accessible (Enter/Space to select)
- Single image mode (no thumbnails), horizontal scroll for many
- Stories: Default, SingleImage, TwoImages, CustomSizes
VenueDetailStep + CoffinDetailsStep:
- Replaced static hero Box with ImageGallery component
- Added optional images[] field to VenueDetail and CoffinProfile types
- Falls back to single imageUrl when images not provided
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Added maxWidth: 1200px + mx: auto to constrain content width
- Increased panel padding (px: 5 both sides)
- Left 58% / right 42% split for better reading width
- No longer edge-to-edge — content is readable and centered
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Removed service toggles from right panel (selection moves to next step)
- Added informational service cards on left panel with name, description, price
- Intro text: "You can choose which ones to include in the next step"
- Removed VenueDetailStepValues type, values/onChange props, handleToggle
- Simplified stories (no more useState for service state)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Removed top padding from list-map scroll container (pt: 0)
- Back link gets its own pt: 1.5 wrapper for breathing room
- Sticky search bar now pins flush against nav when scrolled
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- list-map variant now uses height: 100vh + overflow: hidden on outer wrapper
- Only the left panel scrolls (overflowY: auto already set)
- Map panel stays fixed, help bar pins to bottom
- Added minHeight: 0 on main element to prevent flex overflow
- Other layout variants unchanged (still use minHeight: 100vh)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Heading + subheading now scroll with listings (not sticky)
- Search bar + filters + results count remain sticky at top
- Subtle divider border on sticky section for visual segmentation
- Consistent pattern across both list-map pages
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Preferred date fields now use Input atom (external label) instead of MUI TextField
- Removed unused TextField import
- Matches the name field pattern from session 30b
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New Checkbox atom wrapping MUI Checkbox (forwardRef, displayName)
- MuiCheckbox theme overrides: warm gold checked, focus ring, disabled muted
- Stories: Default, States, TermsAgreement, Checklist
- PaymentStep: now imports Checkbox from atom instead of MUI directly
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- CrematoriumStep: body1 subheading, mb:5, section dividers between questions
- CemeteryStep, CoffinDetailsStep, AdditionalServicesStep, SummaryStep: mb:5
- CoffinDetailsStep: body1 subheading
- PaymentStep: mb:5, Link atom for terms links (replaces Box component=a)
- ConfirmationStep: Link atom for phone number
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Heading: display3 for centered-form consistency with IntroStep
- Name fields: swap MUI TextField for Input atom (external label, no clipping)
- Date preferences: single date → up to 3 preferred dates with progressive
disclosure ("+ Add another date" link, × remove on 2nd/3rd)
- Remove service style/religion field — tradition flows from provider/package
selection and is confirmed on summary step
- Add dividers between question sections for visual separation
- Fix spacing between sections (mb: 5, mb: 3 on headings)
- FormLabels styled with fontWeight 600 for readability
- Updated types: preferredDates: string[] replaces funeralDateSpecific,
removed religion field
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Mirrors CLAUDE.md conventions for cross-tool consistency
- Hard rules: no hardcoded values, token access patterns, atomic tiers
- Scoped for visual polish work in Antigravity browser agent
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- @storybook/addon-a11y: real-time axe-core accessibility panel per story
- @storybook/addon-storysource: story source code panel in addons bar
- @playwright/mcp: browser automation for visual screenshot feedback loop
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Visual fixes:
- Sticky headers: add pt: 2 so scrolling content doesn't bleed
flush against the heading (ProvidersStep, VenueStep)
Accessibility:
- ProvidersStep: add role="list" to provider list container
(aria-label needs a semantic role to be announced)
- VenueStep: add aria-label to search TextField (placeholder
alone is not a reliable label for screen readers)
Token consistency:
- Map placeholders: var(--fa-color-sage-50) → var(--fa-color-surface-cool)
(use semantic token, not primitive) in ProvidersStep, VenueStep
- ArrangementDialog: var(--fa-color-brand-50) → var(--fa-color-surface-warm)
for package summary background
- ArrangementDialog: replace Box component="a" with Link atom
for terms and conditions (consistent focus/hover styling)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New organism consolidating PreviewStep + AuthGateStep into a
single MUI Dialog with two internal steps:
- Step 1 (preview): ProviderCardCompact, package summary with
sections/items/total, "What happens next" checklist, Continue CTA
(pre-planning adds "Explore other options")
- Step 2 (auth): SSO buttons (Google/Microsoft), email entry,
progressive disclosure for details (name, phone, contact pref),
verification code, terms
Parent controls step state + auth form values. Dialog has back
arrow to return from auth → preview, close button on both steps.
Stories: Default (full flow), AuthStep, AuthDetails, PrePlanning
PreviewStep and AuthGateStep kept for now — to be deprecated
once ArrangementDialog is wired into the flow.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New molecule:
- FilterPanel: Popover-based reusable filter trigger with active
count badge, Clear all, Done actions. D-C: Popover for MVP.
Step integrations:
- ProvidersStep: inline Chip filter bar → FilterPanel Popover,
search bar + filter button side-by-side in sticky header
- VenueStep: same pattern, filter chips moved into Popover
- CoffinsStep (D-F): grid-sidebar layout → wide-form (full-width
4-col grid), category + price selects moved into FilterPanel
WizardLayout:
- Added wide-form variant (maxWidth lg, single column) for
card grids that benefit from full width
- wide-form included in STEPPER_VARIANTS for progress bar
Storybook:
- FilterPanel stories: Default, WithActiveFilters, SelectFilters,
CustomLabel
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- WizardLayout ListMapLayout: 420px fixed left column (D-B), flex:1
right panel, back link rendered inside left panel instead of above
the split (eliminates gap above map)
- LAYOUT_MAP type updated to accept backLink prop for list-map variant
- ProvidersStep: heading + search + filters wrapped in sticky Box
that pins at top of scrollable left panel while card list scrolls
- VenueStep: same sticky header treatment, heading moved inside form
for consistent wrapper structure
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
User reviewed all 15 steps, provided feedback. 7-batch iteration plan
created with all design decisions resolved. Next: Batch 1 (atom fixes).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
