[Milestone] Theme Editor: P0 (Critical) Implementation – Split Pane, DnD, Autosave, Toolbar, Schema Upgrades

[rezwana-karim]

Parent Epic: #235

---

Objective

Implement all P0 CRITICAL items for the Shopify-style Theme Editor. Grouped for milestone delivery, this issue covers functional foundation and core state workflow. Reference and utilize:

• /docs/shopify-theme-editor-ui-ux (and subfolder images)
• Internal docs (APPEARANCE_EDITOR_ANALYSIS.md, PLAN_SHOPIFY_THEME_EDITOR_UPGRADE.md, THEME-EDITOR-IMPLEMENTATION-PLAN.md, Storefront implementation review.md)
• Leverage sub-agents, automation, and all MCP tools.

---

Tasks

• Split-pane Layout & Live Preview: Implement with component-based split-pane (react-resizable-panels or grid). Integrate <StorefrontPreview config={config} viewport={viewport} /> as RSC.
• Section List Sidebar with DnD: Replace tabs with @dnd-kit/sortable; enable section ordering/grouping and persist via Prisma.
• Autosave & Revision Model: Implement debounced, atomic draft saving (Zustand → model). Add server actions for save/publish; store revision objects.
• Unified Toolbar: Shadcn components + Lucide + status badges, Undo/Redo (via zustand/zundo), viewport switching, keyboard shortcuts.
• Configuration Schema Upgrades: Color scheme/typography, eye icon toggles, section duplication, command dialog for add/remove.
• Reference all relevant documentation and images in /docs/shopify-theme-editor-ui-ux (and subfolders).

---

Verification

• Unit/integration tests on config/state (zod)
• Playwright: DnD, add/remove, autosave, undo/redo
• Visual: compare to /docs/shopify-theme-editor-ui-ux-images/*.png screenshots

/cc #235 – Utilize sub-agents and automation supports. Docs/images folder