Setup wizard no longer requires email delivery. Admin account is
auto-confirmed and auto-logged-in via token redirect. Adds setup
secret gate for prod (logged on boot), SMTP env var config in
runtime.exs, email_configured? helper, and admin warning banner
when email isn't set up. Includes plan files for this task and
the follow-up email settings UI.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Phase 7: add LoadTheme to base :browser pipeline so auth and setup
pages get theme settings. Update root.html.heex with .themed wrapper,
font preloads, layer declaration, and generated CSS injection.
Remove old data-theme JS toggle script.
Phase 8: upgrade admin/reset.css to a proper @layer reset matching
the shop reset structure. Remove dead theme toggle CSS rules.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Phase 4: admin components and utilities now reference --t-* theme
tokens directly. Status colour tokens added to theme-semantic.css.
Bridge file (admin/themes.css) deleted.
Phase 5: removed duplicated .preview-frame CSS block (~160 lines).
Admin components and icons wrapped in @layer admin. Layer order
updated in admin_root to include admin layer.
Phase 6: added prefers-reduced-motion support (zeroes all durations
and disables animations). Migrated physical properties to logical
equivalents (text-align start/end, margin-inline, padding-inline,
inset-inline-end) across shop and admin CSS.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Phase 3: Rewrite admin/themes.css as a bridge mapping DaisyUI --color-*
variables to --t-* theme tokens. Admin components still reference
--color-base-100, --color-primary etc but these now resolve through the
bridge to the merchant's theme colours. Status colours (error, success,
warning, info) stay hardcoded.
Add .themed wrapper with data-mood to admin_root.html.heex. Remove the
old data-theme JS toggle script — dark mode now comes from the theme
system mood setting. Admin inherits theme colours, typography, and shape
from the merchant's chosen theme.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Phase 1: Replace hex_to_hsl with hex_to_oklch in CSSGenerator, output
--t-accent-l/c/h instead of --t-accent-h/s/l. All 46 HSL accent
references across theme-semantic.css, theme-layer2-attributes.css, and
shop/components.css replaced with oklch/color-mix equivalents. Dead
style*= attribute selectors for button variants replaced with proper
class-based selectors. Added color-scheme: light/dark to mood output.
Phase 2: Add LoadTheme plug to admin pipeline, extend AdminLayoutHook
with theme_settings and generated_css assigns, add font preloads and
generated CSS injection to admin_root.html.heex. No visual changes to
admin yet — .themed wrapper added in next phase.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
phase 1 (no admin): show only the email form
phase 2 (admin created, not logged in): "check your inbox" gate with
"wrong email? start over" link that deletes the unconfirmed user
phase 3 (logged in via magic link): show provider + stripe steps
removes the confusing redirect to /users/log-in after account creation.
users now stay on /setup throughout the entire setup process.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
add system font stack to admin reset CSS so setup/admin pages render
sans-serif on all devices instead of falling through to browser default.
pass path_resolver to CSSGenerator.generate on cache miss paths so
font URLs resolve to digested paths in production.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace non-existent --color-base-content-60 variable (with hard-coded
black fallback) with color-mix(in oklch, var(--color-base-content) 60%,
transparent) which adapts to the current theme.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- new /setup page with three-section onboarding (account, provider, payments)
- dashboard launch checklist with progress bar, go-live, dismiss
- provider registry on Provider module (single source of truth for metadata)
- payments registry for Stripe
- setup context made provider-agnostic (provider_connected, theme_customised, etc.)
- admin provider pages now fully registry-driven (no hardcoded provider names)
- auth flow: fresh installs redirect to /setup, signed_in_path respects setup state
- removed old /admin/setup wizard
- 840 tests, 0 failures
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Coming soon page was unstyled after Tailwind removal — replaced
utility classes with proper component CSS. Also removed dead h-full
classes from shop_root layout, adding height: 100% to the shop reset.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Providers was a hidden page with no nav link. Also adds
LiveDashboard and ErrorTracker to the sidebar footer, and
styles the provider dropdown menu items.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move the setup stepper out of the dashboard into its own LiveView.
Dashboard now redirects to setup when site isn't live, and shows
stats-only view once live. Also cleans up button component variant
handling, fixes alert CSS, and removes stale demo.html.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
replace Tailwind CLI with esbuild for admin CSS bundling. admin now uses
hand-written utility classes (admin/utilities.css), static heroicon CSS
generated by mix generate_admin_icons, plain CSS colour themes extracted
from DaisyUI plugin config, and minimal resets. rename app.css to admin.css
for clarity alongside shop.css. delete vendor/daisyui-theme.js and
vendor/heroicons.js. no Tailwind dependency remains in the project.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add admin/components.css with custom admin-* component classes replacing
all DaisyUI component usage across admin LiveViews, auth pages, layout,
and core_components. Delete daisyui.js vendor file (246KB). Theme plugin
stays for color variables until Phase 7.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace all Tailwind utilities in content.ex and collection.ex with
semantic CSS classes (content body, contact form, cards, reviews, etc.)
- Delete app-shop.css (Tailwind shop entry point)
- Remove shop Tailwind config from config.exs, dev.exs, mix.exs
- Remove shop Tailwind stylesheet link from shop_root.html.heex
- Add collection filter bar, empty state, and select dropdown styles
- Fix filter pill sizing (use theme font vars instead of hardcoded rem)
- Fix active pill contrast (tinted accent background + dark accent text)
- Fix --t-text-on-accent fallback for pill legibility
- Add padding/font-size to .themed-select
Shop pages now use zero Tailwind. Admin Tailwind remains for Phase 6.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove ~140 Tailwind utility classes from product.ex and cart.ex, replacing
with semantic CSS classes in components.css. Delete helper functions that
generated Tailwind class strings (card_classes, image_container_classes,
content_padding_class, title_classes, hero_cta_classes, grid_classes).
Use data-* attributes for variant styling, grid columns, and sticky
positioning. Update theme-layer2 selectors for renamed classes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Absorb ~100 Tailwind utility classes from layout.ex and all page
templates into semantic CSS rules in components.css. Uses theme font-size
vars (--t-text-small, --t-text-caption) instead of rem to respect the
theme's em-based scaling system.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move ~104 inline style= attributes from layout.ex (55) and cart.ex (49)
into named CSS classes in components.css. Remove conflicting unlayered
nav link rule from theme-semantic.css that was previously masked by
inline styles. Only dynamic values (background-image URLs, logo height)
remain as inline styles.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move ~80 inline style= attributes from product.ex into ~40 CSS classes
in @layer components. Only genuinely dynamic values (hex colours,
background-image URLs) remain as inline styles. Pre-declare CSS layer
order in shop_root.html.heex so reset < components in the cascade.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- esbuild profile for shop.css bundling (dev watcher + build aliases)
- shop.css loaded as second stylesheet in shop_root layout
- LiveView display:contents rule in reset layer
- updated Lighthouse + Screenshots tasks for new esbuild target
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Flex-wrap base (no JS needed, active pill always visible). JS hook
switches to horizontal scroll with scroll-into-view when pills exceed
2.5 rows on mobile. Desktop always wraps.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- category_nav pulls first product image per category from DB
- ProductImageScroll JS hook resets to index 0 on updated()
- collection filter bar gets CSS fade gradient scroll hint on mobile
- sync_product_images and delete_product_images now clean up orphaned
Media.Image records to prevent DB bloat from repeated syncs
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shipping rates fetched from Printify during product sync, converted to
GBP at sync time using frankfurter.app ECB exchange rates with 5%
buffer. Cached in shipping_rates table per blueprint/provider/country.
Cart page shows shipping estimate with country selector (detected from
Accept-Language header, persisted in cookie). Stripe Checkout includes
shipping_options for UK domestic and international delivery. Order
shipping_cost extracted from Stripe on payment.
ScheduledSyncWorker runs every 6 hours via Oban cron to keep rates
and exchange rates fresh. REST_OF_THE_WORLD fallback covers unlisted
countries. 780 tests, 0 failures.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Route all search modal open/close through the JS hook via custom DOM
events so the _closing flag is always correctly managed. Prevents the
modal flashing back after Escape when a search response is in flight.
Add If-None-Match / 304 Not Modified handling to the image controller
so browsers don't re-download images on revalidation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Track search_open as server state so morphdom doesn't reset display
to none on re-render. Move admin bar from layout banner to a gear
icon in the header actions. Extract layout_assigns/1 helper so page
templates use a spread instead of listing every attr explicitly.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace PreviewData indirection in all shop LiveViews with direct
Products context queries. Home, collection, product detail and error
pages now query the database. Categories loaded once in ThemeHook.
Cart hydration no longer falls back to mock data. PreviewData kept
only for the theme editor.
Search modal gains keyboard navigation (arrow keys, Enter, Escape),
Cmd+K/Ctrl+K shortcut, full ARIA combobox pattern, LiveView navigate
links, and 150ms debounce. SearchModal JS hook manages selection
state and highlight. search.ex gets transaction safety on reindex
and a public remove_product/1. 10 new integration tests.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Consolidates admin_live/, theme_live/, provider_live/ into admin/
(with theme/ and providers/ subdirs). Renames shop_live/ to shop/
and user_live/ to auth/. Updates all module names, router refs,
test files, CSS source paths, and dialyzer ignore.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- add missing cta_href to hero section and error page CTAs
- replace hardcoded footer shop links with real product categories
- restructure product cards with stretched-link pattern so category
badges link to their collection page
- unify social icons: footer and contact page share the same default
links from a single source in content.ex
- add search implementation plan (docs/plans/search.md, deferred)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rewrite breadcrumb as semantic ol/li with aria-current="page", CSS
chevron separators, 0.875em font size, and ellipsis truncation on
mobile for long product names.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Mobile: swipeable carousel with dot indicators, no lightbox trigger.
Desktop: carousel with thumbnail grid, prev/next arrows, click to
open existing lightbox. Keeps all lightbox appearance and behaviour.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Product cards now use CSS scroll-snap on touch devices (mobile) for
swiping between images, with dot indicators and a JS hook for active
state. Desktop keeps the existing hover crossfade via @media (hover:
hover). Dots use size differentiation (WCAG 2.2 AA compliant) with
outline rings for contrast on any background.
Also fixes: no-image placeholder (SVG icon instead of broken img),
unnecessary wrapper div for single-image cards, and dev static asset
caching (was immutable for all envs, now only prod).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add priority attr to product_card, thread through to responsive_image
- First 2 featured products get fetchpriority="high" and eager loading
- Remove longPollFallbackMs to avoid unnecessary fallback attempt
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add @source for shop_components/ directory in app-shop.css (Tailwind
wasn't scanning sub-modules after the refactor, dropping ~73 utilities)
- Remove overly aggressive .dockerignore rules that excluded mockup
image variants needed by the responsive_image component
- Seed default theme settings on first boot via Release.seed_defaults/0
in the supervision tree (seeds.exs doesn't run in releases)
- Fix PDP gallery images for mock data by appending -1200.webp to
bare mockup base paths
- Update fly.toml format from fly launch
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Cart context with pure functions for add/remove/update/hydrate
- Price formatting via ex_money (replaces all float division)
- CartHook on_mount with attach_hook for shared event handlers
(open/close drawer, remove item, PubSub sync)
- Accessible cart drawer with focus trap, scroll lock, aria-live
- Cart page with increment/decrement quantity controls
- Preview mode cart drawer support in theme editor
- Cart persistence to session via JS hook + API endpoint
- 19 tests covering all Cart pure functions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Create separate CSS bundles to reduce shop page load times:
- app-shop.css (45KB/7.8KB gzip): Shop pages only, no daisyUI
- app.css (139KB): Admin pages with daisyUI and theme editor
Key changes:
- Add app-shop.css with targeted @source paths for shop files only
- Move .preview-frame rules from theme-layer2-attributes.css to app.css
- Delete fonts.css (fonts now generated inline by CSSGenerator)
- Add inline all-fonts generation in theme editor for typography switching
- Configure separate Tailwind profiles and watchers for both bundles
Shop pages now load 54% less CSS by excluding:
- daisyUI components (admin only)
- .preview-frame theme switching rules (editor only)
- Admin-specific Tailwind utilities
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add WCAG AA compliant accent color variants and update default accent
to meet 4.5:1 contrast ratio requirements.
- Add --t-accent-text (darker for text on light backgrounds)
- Add --t-accent-button (darker for button backgrounds with white text)
- Change default accent from #3b82f6 to #2563eb (better contrast)
- Update presets and tests for new default
These changes ensure accent colors meet accessibility standards while
maintaining visual consistency with the brand palette.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Self-hosted fonts:
- Download all 10 typefaces (35 font files, 728KB) from Google Fonts
- Create @font-face declarations in assets/css/fonts.css
- Remove Google Fonts external dependency from layouts
- Privacy improvement (no Google tracking)
- Performance improvement (no DNS lookup to fonts.googleapis.com)
- GDPR compliant (no third-party requests)
Admin access:
- Add /admin route that redirects to /admin/theme (requires auth)
- Remove Admin link from footer (too visible for visitors)
- Shop owners can bookmark or type /admin directly
Layout improvements:
- Create shop_root.html.heex as minimal root for shop pages
- Shop pages no longer show admin nav bar
Other:
- Update .gitignore to exclude digested static files
- Add PageSpeed 100% task to ROADMAP.md
- Fix test to check /users/settings instead of shop homepage
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace cramped horizontal nav on mobile with a fixed bottom tab bar
for thumb-friendly navigation. The header nav is now hidden on mobile
(<768px) and the bottom nav provides Home, Shop, About, and Contact
links with icons.
- Add mobile_bottom_nav component with icon + label nav items
- Active page has accent-colored background highlight and larger icon
- Add shadow to lift nav visually off the page
- Update all page templates with bottom padding and bottom nav
- Remove CSS rule that was overriding Tailwind's hidden class
- Responsive header padding (tighter on mobile)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Current page in nav is now a span instead of a link (no self-links)
- Logo links to home page, except when already on home
- Use aria-current="page" with accent underline for current page indicator
- Extract logo_content, logo_inner, and nav_item helper components
- Update CSS to target both a and span elements in .shop-nav
This follows WCAG accessibility guidelines - links that point to
the current page are confusing for screen reader users.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add .themed class as shared selector for both shop and preview
- Move visual/behavioral styles from .preview-frame to .themed
- Keep .preview-frame only for CSS variable switching (editor live preview)
- Update CSSGenerator to target .themed instead of .shop-root
- Refactor CSS files to use native CSS nesting syntax
- Update tests to reflect new class structure
This improves maintainability by:
- Eliminating duplicate selectors (.shop-root + .preview-frame)
- Using modern CSS nesting (94%+ browser support)
- Clear separation: .preview-frame = vars, .themed = styles
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix asset paths in shop layout (css/app.css, js/app.js)
- Add Google Fonts preconnect and stylesheet link
- Update theme-layer2-attributes.css to target both .preview-frame
and .shop-root so theme styles apply to real shop pages
- Properly duplicate attribute selectors (e.g., [data-mood="warm"])
for both .preview-frame and .shop-root
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Accessibility:
- Add skip link component for keyboard navigation
- Add visible focus rings on all interactive elements
- Add aria-current="page" to navigation active states
- Ensure 44px minimum touch targets on header icons and filter pills
Product Page (PDP):
- Add accordion layout for Description, Size Guide, Shipping & Returns
- Convert Reviews section to accordion format (open by default)
- Make Add to Basket button sticky on mobile, normal on desktop
Product Cards (home & collection):
- Add "Free delivery over £40" shipping badge
- Add loading="lazy" and decoding="async" to images
Cart Drawer:
- Add "Delivery: Calculated at checkout" label
- Add Remove button to each cart item
All Preview Pages:
- Add skip link to all 7 preview pages
- Wrap main content in <main id="main-content">
- Pass active_page to shop_header for nav highlighting
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contact page redesign:
- Replace retail-style contact info (phone, address, hours) with POD-appropriate layout
- Add order tracking card with email input
- Add "Handy to know" section with printing/delivery/returns info
- Add email contact with response time promise
- Add social links (Instagram, Pinterest)
- Update intro text to be warmer and more personal
Collection page improvements:
- Replace sidebar filters with horizontal category pills
- Add filter pill CSS with theme token integration
PDP enhancements:
- Add image lightbox with keyboard navigation
- Add thumbnail gallery with active state
- Add reviews section (toggleable)
- Add related products section (toggleable)
- Add trust badges section (toggleable)
Theme system additions:
- Add button_style setting (filled/outline/soft)
- Add product_text_align setting (left/center)
- Add image_aspect_ratio setting (square/portrait/landscape)
- Add responsive form layouts with flex-wrap
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
