feat(editor): EmailBuilder canvas and lossless template serialization

packages/post-kit-editor/package.json

@@ -22,16 +22,32 @@
   "scripts": {
     "build": "pnpm --filter @singleton-sd/post-kit-types run build && tsc -p tsconfig.json",
     "lint": "echo \"lint:editor — covered by root eslint on staged files\"",
-    "test": "pnpm --filter @singleton-sd/post-kit-types run build && tsc -p tsconfig.spec.json && node --import tsx --test \"src/**/*.spec.tsx\""
+    "test": "pnpm --filter @singleton-sd/post-kit-types run build && pnpm --filter @singleton-sd/post-kit-compiler run build && tsc -p tsconfig.spec.json && node --import tsx --test \"src/**/*.spec.ts\" \"src/**/*.spec.tsx\""
   },
   "dependencies": {
-    "@singleton-sd/post-kit-types": "workspace:*"
+    "@singleton-sd/post-kit-types": "workspace:*",
+    "@usewaypoint/block-avatar": "^0.0.3",
+    "@usewaypoint/block-button": "^0.0.3",
+    "@usewaypoint/block-columns-container": "^0.0.3",
+    "@usewaypoint/block-container": "^0.0.2",
+    "@usewaypoint/block-divider": "^0.0.4",
+    "@usewaypoint/block-heading": "^0.0.3",
+    "@usewaypoint/block-html": "^0.0.3",
+    "@usewaypoint/block-image": "^0.0.5",
+    "@usewaypoint/block-spacer": "^0.0.3",
+    "@usewaypoint/block-text": "^0.0.7",
+    "@usewaypoint/document-core": "^0.0.6",
+    "@usewaypoint/email-builder": "0.0.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zod": "^3.25.76"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@singleton-sd/post-kit-compiler": "workspace:*",
     "@types/node": "^20.17.9",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",

packages/post-kit-editor/src/__fixtures__/minimal/metadata.json

@@ -0,0 +1,7 @@
+{
+  "key": "test.minimal",
+  "name": "Minimal",
+  "subject": "Hello",
+  "variables": [],
+  "schemaVersion": "1"
+}

packages/post-kit-editor/src/__fixtures__/minimal/preview.json

@@ -0,0 +1 @@
+{}

packages/post-kit-editor/src/__fixtures__/minimal/template.json

@@ -0,0 +1,12 @@
+{
+  "root": {
+    "type": "EmailLayout",
+    "data": {
+      "backdropColor": "#F8F8F8",
+      "canvasColor": "#FFFFFF",
+      "textColor": "#242424",
+      "fontFamily": "MODERN_SANS",
+      "childrenIds": []
+    }
+  }
+}

packages/post-kit-editor/src/__fixtures__/nested-blocks/metadata.json

@@ -0,0 +1,7 @@
+{
+  "key": "test.nested",
+  "name": "Nested Blocks",
+  "subject": "Hello {{name}}",
+  "variables": ["name"],
+  "schemaVersion": "1"
+}

packages/post-kit-editor/src/__fixtures__/nested-blocks/preview.json

@@ -0,0 +1 @@
+{ "name": "Jane Doe" }

packages/post-kit-editor/src/__fixtures__/nested-blocks/template.json

@@ -0,0 +1,44 @@
+{
+  "root": {
+    "type": "EmailLayout",
+    "data": {
+      "backdropColor": "#F8F8F8",
+      "canvasColor": "#FFFFFF",
+      "textColor": "#242424",
+      "fontFamily": "MODERN_SANS",
+      "childrenIds": ["block-container"]
+    }
+  },
+  "block-container": {
+    "type": "Container",
+    "data": {
+      "style": {
+        "padding": { "top": 16, "bottom": 16, "right": 24, "left": 24 }
+      },
+      "props": {
+        "childrenIds": ["block-heading", "block-text"]
+      }
+    }
+  },
+  "block-heading": {
+    "type": "Heading",
+    "data": {
+      "props": { "text": "Welcome", "level": "h1" },
+      "style": {
+        "padding": { "top": 16, "bottom": 8, "right": 24, "left": 24 }
+      }
+    }
+  },
+  "block-text": {
+    "type": "Text",
+    "data": {
+      "style": {
+        "fontWeight": "normal",
+        "padding": { "top": 8, "bottom": 16, "right": 24, "left": 24 }
+      },
+      "props": {
+        "text": "Hello {{name}}"
+      }
+    }
+  }
+}

packages/post-kit-editor/src/__fixtures__/unknown-field/metadata.json

@@ -0,0 +1,8 @@
+{
+  "key": "test.unknown",
+  "name": "Unknown Fields",
+  "subject": "Test",
+  "variables": [],
+  "schemaVersion": "1",
+  "futureCatalogueKey": "reserved"
+}

packages/post-kit-editor/src/__fixtures__/unknown-field/preview.json

@@ -0,0 +1 @@
+{ "unusedFutureKey": "kept" }

packages/post-kit-editor/src/__fixtures__/unknown-field/template.json

@@ -0,0 +1,26 @@
+{
+  "root": {
+    "type": "EmailLayout",
+    "data": {
+      "backdropColor": "#F8F8F8",
+      "canvasColor": "#FFFFFF",
+      "childrenIds": ["block-text"]
+    }
+  },
+  "block-text": {
+    "type": "Text",
+    "data": {
+      "style": {
+        "padding": { "top": 16, "bottom": 16, "right": 24, "left": 24 }
+      },
+      "props": {
+        "text": "Hello",
+        "futureEditorFlag": true,
+        "experimentalLayout": { "version": 2, "enabled": true }
+      }
+    }
+  },
+  "_editorMeta": {
+    "lastOpenedAt": "2026-01-01T00:00:00.000Z"
+  }
+}

packages/post-kit-editor/src/canvas/EditorBlock.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from 'react';
+
+import { EditorBlock as CoreEditorBlock } from './editor-core';
+import { useDocument } from './editor-context';
+
+const EditorBlockContext = createContext<string | null>(null);
+
+export function useCurrentBlockId(): string {
+  const blockId = useContext(EditorBlockContext);
+  if (!blockId) {
+    throw new Error('useCurrentBlockId must be used within EditorBlock');
+  }
+  return blockId;
+}
+
+type EditorBlockProps = {
+  id: string;
+};
+
+export function EditorBlock({ id }: EditorBlockProps): JSX.Element {
+  const document = useDocument();
+  const block = document[id];
+  if (!block) {
+    throw new Error(`Could not find block "${id}"`);
+  }
+
+  return (
+    <EditorBlockContext.Provider value={id}>
+      <CoreEditorBlock {...block} />
+    </EditorBlockContext.Provider>
+  );
+}

packages/post-kit-editor/src/canvas/EmailBuilderCanvas.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { EmailBuilderDocument } from '../types';
+import { EDITOR_CLASS_PREFIX } from '../email-template-editor';
+import { CanvasEditorProvider } from './editor-context';
+import { EditorBlock } from './EditorBlock';
+import { Reader } from '@usewaypoint/email-builder';
+
+export interface EmailBuilderCanvasProps {
+  document: EmailBuilderDocument;
+  onChange: (document: EmailBuilderDocument) => void;
+  readOnly?: boolean;
+}
+
+export function EmailBuilderCanvas({
+  document,
+  onChange,
+  readOnly = false,
+}: EmailBuilderCanvasProps): JSX.Element {
+  if (readOnly) {
+    return (
+      <div className={`${EDITOR_CLASS_PREFIX}canvas`} data-testid={`${EDITOR_CLASS_PREFIX}canvas`}>
+        <Reader document={document} rootBlockId="root" />
+      </div>
+    );
+  }
+
+  return (
+    <CanvasEditorProvider document={document} onChange={onChange}>
+      <div className={`${EDITOR_CLASS_PREFIX}canvas`} data-testid={`${EDITOR_CLASS_PREFIX}canvas`}>
+        <EditorBlock id="root" />
+      </div>
+    </CanvasEditorProvider>
+  );
+}

packages/post-kit-editor/src/canvas/blocks/ColumnsContainerEditor.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { ColumnsContainer as BaseColumnsContainer } from '@usewaypoint/block-columns-container';
+
+import { useCurrentBlockId } from '../EditorBlock';
+import { usePatchDocument, useSetSelectedBlockId } from '../editor-context';
+import EditorChildrenIds, { type EditorChildrenChange } from '../helpers/EditorChildrenIds';
+
+import ColumnsContainerPropsSchema, {
+  type ColumnsContainerProps,
+} from './ColumnsContainerPropsSchema';
+
+const EMPTY_COLUMNS = [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }];
+
+export default function ColumnsContainerEditor({
+  style,
+  props,
+}: ColumnsContainerProps): JSX.Element {
+  const currentBlockId = useCurrentBlockId();
+  const patchDocument = usePatchDocument();
+  const setSelectedBlockId = useSetSelectedBlockId();
+
+  const { columns, ...restProps } = props ?? {};
+  const columnsValue = columns ?? EMPTY_COLUMNS;
+
+  const updateColumn = (
+    columnIndex: 0 | 1 | 2,
+    { block, blockId, childrenIds }: EditorChildrenChange,
+  ) => {
+    const nextColumns = [...columnsValue];
+    nextColumns[columnIndex] = { childrenIds };
+    patchDocument({
+      [blockId]: block,
+      [currentBlockId]: {
+        type: 'ColumnsContainer',
+        data: ColumnsContainerPropsSchema.parse({
+          style,
+          props: {
+            ...restProps,
+            columns: nextColumns,
+          },
+        }),
+      },
+    });
+    setSelectedBlockId(blockId);
+  };
+
+  return (
+    <BaseColumnsContainer
+      props={restProps}
+      style={style}
+      columns={[
+        <EditorChildrenIds
+          key="col-0"
+          childrenIds={columns?.[0]?.childrenIds}
+          onChange={(change) => updateColumn(0, change)}
+        />,
+        <EditorChildrenIds
+          key="col-1"
+          childrenIds={columns?.[1]?.childrenIds}
+          onChange={(change) => updateColumn(1, change)}
+        />,
+        <EditorChildrenIds
+          key="col-2"
+          childrenIds={columns?.[2]?.childrenIds}
+          onChange={(change) => updateColumn(2, change)}
+        />,
+      ]}
+    />
+  );
+}

packages/post-kit-editor/src/canvas/blocks/ColumnsContainerPropsSchema.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+import { ColumnsContainerPropsSchema as BaseColumnsContainerPropsSchema } from '@usewaypoint/block-columns-container';
+
+const BasePropsShape = BaseColumnsContainerPropsSchema.shape.props.unwrap().unwrap().shape;
+
+const ColumnsContainerPropsSchema = z.object({
+  style: BaseColumnsContainerPropsSchema.shape.style,
+  props: z
+    .object({
+      ...BasePropsShape,
+      columns: z.tuple([
+        z.object({ childrenIds: z.array(z.string()) }),
+        z.object({ childrenIds: z.array(z.string()) }),
+        z.object({ childrenIds: z.array(z.string()) }),
+      ]),
+    })
+    .optional()
+    .nullable(),
+});
+
+export type ColumnsContainerProps = z.infer<typeof ColumnsContainerPropsSchema>;
+export default ColumnsContainerPropsSchema;

packages/post-kit-editor/src/canvas/blocks/ContainerEditor.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Container as BaseContainer } from '@usewaypoint/block-container';
+
+import { useCurrentBlockId } from '../EditorBlock';
+import { useDocument, usePatchDocument, useSetSelectedBlockId } from '../editor-context';
+import EditorChildrenIds from '../helpers/EditorChildrenIds';
+
+import type { ContainerProps } from './ContainerPropsSchema';
+
+export default function ContainerEditor({ style, props }: ContainerProps): JSX.Element {
+  const childrenIds = props?.childrenIds ?? [];
+  const document = useDocument();
+  const currentBlockId = useCurrentBlockId();
+  const patchDocument = usePatchDocument();
+  const setSelectedBlockId = useSetSelectedBlockId();
+
+  return (
+    <BaseContainer style={style}>
+      <EditorChildrenIds
+        childrenIds={childrenIds}
+        onChange={({ block, blockId, childrenIds: nextChildrenIds }) => {
+          const currentBlock = document[currentBlockId];
+          if (!currentBlock || currentBlock.type !== 'Container') {
+            return;
+          }
+          patchDocument({
+            [blockId]: block,
+            [currentBlockId]: {
+              type: 'Container',
+              data: {
+                ...currentBlock.data,
+                props: { childrenIds: nextChildrenIds },
+              },
+            },
+          });
+          setSelectedBlockId(blockId);
+        }}
+      />
+    </BaseContainer>
+  );
+}

packages/post-kit-editor/src/canvas/blocks/ContainerPropsSchema.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+import { ContainerPropsSchema as BaseContainerPropsSchema } from '@usewaypoint/block-container';
+
+const ContainerPropsSchema = z.object({
+  style: BaseContainerPropsSchema.shape.style,
+  props: z
+    .object({
+      childrenIds: z.array(z.string()).optional().nullable(),
+    })
+    .optional()
+    .nullable(),
+});
+
+export default ContainerPropsSchema;
+
+export type ContainerProps = z.infer<typeof ContainerPropsSchema>;