Parent: #138
Goal
Replace the skinny hand-rolled EmailBuilder canvas in @singleton-sd/post-kit-editor with a vendored/adapted port of the official EmailBuilder.js MUI sample (examples/vite-emailbuilder-mui) so the visual editor matches https://usewaypoint.github.io/email-builder-js (inspector drawer, samples drawer, template panel).
Scope
Dependencies
Add as runtime dependencies of packages/post-kit-editor (aligned with the sample; React stays peer):
@mui/material ^5.15.10@mui/icons-material ^5.15.10@emotion/react ^11.11.3@emotion/styled ^11.11.0zustand ^4.5.1react-colorful ^5.6.1
Pin @usewaypoint/email-builder and block packages to the versions already used by the compiler/editor.
Vendor / adapt
- Add
src/email-builder-ui/ adapted from usewaypoint/email-builder-js examples/vite-emailbuilder-mui (MIT — keep attribution).
- Include:
InspectorDrawer + per-block input panels, SamplesDrawer (starter documents; strip Waypoint marketing chrome), TemplatePanel canvas/editor surface, sample editor state (zustand EditorContext pattern).
- Controlled bridge: document changes update PostKit
workingFiles.templateJson (and accept document from props when the host template changes).
Wire as default canvas
EmailTemplateEditor (and later EmailTemplateAdmin) use this surface as the default visual editor path.- Hand-rolled
src/canvas/ + Add block UX is no longer the primary path (may remain temporarily for tests until superseded).
Tests
- SSR-safe smoke that the new canvas mounts with a fixture document.
- Existing serialization / validate / save helper tests still pass.
Constraints
- EmailBuilder.js JSON remains the editable source of truth.
- Do not accept API keys or perform network/filesystem I/O.
- Do not implement
EmailTemplateAdmin list shell here (next issue).
- Strip Waypoint marketing / external promo links from Samples drawer; keep useful starter templates.
Acceptance criteria
Agent implementation notes
Read packages/post-kit-editor/src/canvas/ and the upstream sample at https://github.com/usewaypoint/email-builder-js/tree/main/examples/vite-emailbuilder-mui. Branch: feat/<N>-email-builder-mui-canvas.
Parent: #138
Goal
Replace the skinny hand-rolled EmailBuilder canvas in
@singleton-sd/post-kit-editorwith a vendored/adapted port of the official EmailBuilder.js MUI sample (examples/vite-emailbuilder-mui) so the visual editor matches https://usewaypoint.github.io/email-builder-js (inspector drawer, samples drawer, template panel).Scope
Dependencies
Add as runtime dependencies of
packages/post-kit-editor(aligned with the sample; React stays peer):@mui/material^5.15.10@mui/icons-material^5.15.10@emotion/react^11.11.3@emotion/styled^11.11.0zustand^4.5.1react-colorful^5.6.1Pin
@usewaypoint/email-builderand block packages to the versions already used by the compiler/editor.Vendor / adapt
src/email-builder-ui/adapted fromusewaypoint/email-builder-jsexamples/vite-emailbuilder-mui(MIT — keep attribution).InspectorDrawer+ per-block input panels,SamplesDrawer(starter documents; strip Waypoint marketing chrome),TemplatePanelcanvas/editor surface, sample editor state (zustandEditorContextpattern).workingFiles.templateJson(and accept document from props when the host template changes).Wire as default canvas
EmailTemplateEditor(and laterEmailTemplateAdmin) use this surface as the default visual editor path.src/canvas/+ Add blockUX is no longer the primary path (may remain temporarily for tests until superseded).Tests
Constraints
EmailTemplateAdminlist shell here (next issue).Acceptance criteria
post-kit-editor.src/email-builder-ui/provides inspector + samples + editable canvas comparable to the official playground.templateJson.pnpm --filter @singleton-sd/post-kit-editor testpasses.Agent implementation notes
Read
packages/post-kit-editor/src/canvas/and the upstream sample athttps://github.com/usewaypoint/email-builder-js/tree/main/examples/vite-emailbuilder-mui. Branch:feat/<N>-email-builder-mui-canvas.