[Milestone] Theme Editor: P1 (User Workflows & UX Polish) Implementation

[rezwana-karim]

Parent Epic: #235

---

Objective

Implement all P1 (User workflows and UX polish) items for the Shopify-style Theme Editor. Reference the documentation folder, subfolder images and supporting docs. Use sub-agents and MCP tool automation throughout.

---

Tasks

• Viewport Switching: Toolbar toggles (Desktop/Tablet/Mobile); responsive preview.
• Inspector Mode: Click-to-edit section/component in preview; drill-down settings in right panel.
• Enhanced Theme & Typography Systems: Color/font presets, expanded heading/typography options.
• Section/Template Registry: Central config for registering and filtering available sections.
• Accessibility & ARIA: Ensure ARIA/WCAG, skip links, keyboard navigation, semantic labeling.
• Reference all relevant documentation and images in /docs/shopify-theme-editor-ui-ux (and subfolders).

---

Verification

• Unit/integration tests, Playwright for inspector/viewport, accessibility review
• Visual: compare changes with /docs/shopify-theme-editor-ui-ux/*.png

/cc #235 – All tasks to utilize sub-agents and automation. Docs/images folder