@singleton-sd/post-kit-editor 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Singleton SD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# @singleton-sd/post-kit-editor
+
+React admin editor component for [PostKit](../../README.md) email templates. It
+edits the three Git-backed source files (`template.json`, `metadata.json`,
+`preview.json`) **in memory**. Persistence is not wired yet: `onSave` /
+`onSendTest` props are part of the public contract for later issues, but this
+package does not invoke them — working edits are discarded when the component
+unmounts unless the host implements those callbacks (save/send-test UI lands in
+a follow-up issue).
+
+## Installation
+
+```bash
+pnpm add @singleton-sd/post-kit-editor
+```
+
+React is a **peer dependency** — the consumer application owns the React instance:
+
+```bash
+pnpm add react@^18.3.1 react-dom@^18.3.1
+```
+
+## Usage
+
+```tsx
+import { EmailTemplateEditor, type TemplateSourceFiles } from '@singleton-sd/post-kit-editor';
+
+export function TemplateAdminPage({ template }: { template: TemplateSourceFiles }) {
+  return (
+    <EmailTemplateEditor
+      template={template}
+      availableVariables={[{ name: 'name', description: 'Recipient display name' }]}
+      onSave={async (files) => {
+        await fetch('/api/templates', { method: 'PUT', body: JSON.stringify(files) });
+      }}
+      onPreviewRendered={(html) => {
+        // Optional: host can offer “open preview in new tab”
+        console.log('preview bytes', html.length);
+      }}
+      className="tenant-theme"
+    />
+  );
+}
+```
+
+## Persistence is consumer-supplied
+
+The editor never writes to disk, Git, or a network endpoint. The `onSave` and
+`onSendTest` props exist so consumers can rely on a stable contract, but **this
+release does not call them** — there is no Save / Send-Test control yet. Edits
+live only in React state (`workingFiles`) until a later issue adds that UI.
+
+## Preview data (synthetic only)
+
+`preview.json` is edited in the preview-data panel and used to render the
+sandboxed preview pane via `@singleton-sd/post-kit-compiler/preview`
+`renderPreview` (same EmailBuilder + Handlebars path as publish). Those sample
+values are **committed to the consumer repository** with the template source.
+
+**Never put real personal data, customer addresses, or secrets in preview
+data.** Keep values synthetic (e.g. `Jane Doe`, `jane@example.com`).
+
+The preview pane shows compiler errors inline when render fails and leaves the
+canvas / metadata editable. Re-renders are debounced while typing. Optional
+`onPreviewRendered` receives the HTML string on each successful render.
+
+Browser note: preview imports `@singleton-sd/post-kit-compiler/preview`, which
+has no Node built-ins. Full `compile()` (content hashing + filesystem) remains
+on the package root for CI and publish tooling. The preview iframe applies a
+restrictive CSP (`connect-src 'none'`, `img-src data:` only) so template HTML
+cannot trigger arbitrary network fetches from the admin page.
+
+## Styling
+
+The editor ships **plain CSS classes**, no CSS-in-JS runtime and no component
+library. Every class is prefixed with the exported `EDITOR_CLASS_PREFIX`
+(`pk-editor-`), so class names are stable and safe to target from a consumer
+stylesheet — for example `.pk-editor-root`. The root element also accepts a
+`className` prop as an escape hatch for theme or layout classes.
+
+## Component tests
+
+Tests run on Node's built-in test runner with `tsx`, consistent with the rest of
+the repo — no browser-based test stack, no jsdom.
+
+Components are rendered to static markup with `react-dom/server` and asserted
+against the resulting HTML string:
+
+```tsx
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const html = renderToStaticMarkup(<EmailTemplateEditor template={template} onSave={() => {}} />);
+```
+
+Specs live next to the code as `src/**/*.spec.tsx`. Behaviour that needs
+interaction is factored into pure functions (preview rows, `renderTemplatePreview`)
+that can be tested without a DOM.
+
+## Development
+
+```bash
+pnpm test   # type-check + run tests
+pnpm build  # emit CommonJS to dist/
+pnpm lint   # covered by root eslint
+```

package/dist/canvas/EditorBlock.d.ts

@@ -0,0 +1,6 @@
+export declare function useCurrentBlockId(): string;
+type EditorBlockProps = {
+    id: string;
+};
+export declare function EditorBlock({ id }: EditorBlockProps): JSX.Element;
+export {};

package/dist/canvas/EditorBlock.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentBlockId = useCurrentBlockId;
+exports.EditorBlock = EditorBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_core_1 = require("./editor-core");
+const editor_context_1 = require("./editor-context");
+const EditorBlockContext = (0, react_1.createContext)(null);
+function useCurrentBlockId() {
+    const blockId = (0, react_1.useContext)(EditorBlockContext);
+    if (!blockId) {
+        throw new Error('useCurrentBlockId must be used within EditorBlock');
+    }
+    return blockId;
+}
+function EditorBlock({ id }) {
+    const document = (0, editor_context_1.useDocument)();
+    const block = document[id];
+    if (!block) {
+        throw new Error(`Could not find block "${id}"`);
+    }
+    return ((0, jsx_runtime_1.jsx)(EditorBlockContext.Provider, { value: id, children: (0, jsx_runtime_1.jsx)(editor_core_1.EditorBlock, { ...block }) }));
+}
+//# sourceMappingURL=EditorBlock.js.map

package/dist/canvas/EditorBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorBlock.js","sourceRoot":"","sources":["../../src/canvas/EditorBlock.tsx"],"names":[],"mappings":";;AAOA,8CAMC;AAMD,kCAYC;;AA/BD,iCAAyD;AAEzD,+CAA+D;AAC/D,qDAA+C;AAE/C,MAAM,kBAAkB,GAAG,IAAA,qBAAa,EAAgB,IAAI,CAAC,CAAC;AAE9D,SAAgB,iBAAiB;IAC/B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,kBAAkB,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAMD,SAAgB,WAAW,CAAC,EAAE,EAAE,EAAoB;IAClD,MAAM,QAAQ,GAAG,IAAA,4BAAW,GAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,CACL,uBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YACpC,uBAAC,yBAAe,OAAK,KAAK,GAAI,GACF,CAC/B,CAAC;AACJ,CAAC"}

package/dist/canvas/EmailBuilderCanvas.d.ts

@@ -0,0 +1,7 @@
+import type { EmailBuilderDocument } from '../types';
+export interface EmailBuilderCanvasProps {
+    document: EmailBuilderDocument;
+    onChange: (document: EmailBuilderDocument) => void;
+    readOnly?: boolean;
+}
+export declare function EmailBuilderCanvas({ document, onChange, readOnly, }: EmailBuilderCanvasProps): JSX.Element;

package/dist/canvas/EmailBuilderCanvas.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmailBuilderCanvas = EmailBuilderCanvas;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const email_template_editor_1 = require("../email-template-editor");
+const editor_context_1 = require("./editor-context");
+const EditorBlock_1 = require("./EditorBlock");
+const email_builder_1 = require("@usewaypoint/email-builder");
+function EmailBuilderCanvas({ document, onChange, readOnly = false, }) {
+    if (readOnly) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `${email_template_editor_1.EDITOR_CLASS_PREFIX}canvas`, "data-testid": `${email_template_editor_1.EDITOR_CLASS_PREFIX}canvas`, children: (0, jsx_runtime_1.jsx)(email_builder_1.Reader, { document: document, rootBlockId: "root" }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(editor_context_1.CanvasEditorProvider, { document: document, onChange: onChange, children: (0, jsx_runtime_1.jsx)("div", { className: `${email_template_editor_1.EDITOR_CLASS_PREFIX}canvas`, "data-testid": `${email_template_editor_1.EDITOR_CLASS_PREFIX}canvas`, children: (0, jsx_runtime_1.jsx)(EditorBlock_1.EditorBlock, { id: "root" }) }) }));
+}
+//# sourceMappingURL=EmailBuilderCanvas.js.map

package/dist/canvas/EmailBuilderCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailBuilderCanvas.js","sourceRoot":"","sources":["../../src/canvas/EmailBuilderCanvas.tsx"],"names":[],"mappings":";;AAcA,gDAoBC;;AA/BD,oEAA+D;AAC/D,qDAAwD;AACxD,+CAA4C;AAC5C,8DAAoD;AAQpD,SAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,KAAK,GACQ;IACxB,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,gCAAK,SAAS,EAAE,GAAG,2CAAmB,QAAQ,iBAAe,GAAG,2CAAmB,QAAQ,YACzF,uBAAC,sBAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAC,MAAM,GAAG,GAC7C,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,uBAAC,qCAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,YAC1D,gCAAK,SAAS,EAAE,GAAG,2CAAmB,QAAQ,iBAAe,GAAG,2CAAmB,QAAQ,YACzF,uBAAC,yBAAW,IAAC,EAAE,EAAC,MAAM,GAAG,GACrB,GACe,CACxB,CAAC;AACJ,CAAC"}

package/dist/canvas/blocks/ColumnsContainerEditor.d.ts

@@ -0,0 +1,2 @@
+import { type ColumnsContainerProps } from './ColumnsContainerPropsSchema';
+export default function ColumnsContainerEditor({ style, props, }: ColumnsContainerProps): JSX.Element;

package/dist/canvas/blocks/ColumnsContainerEditor.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ColumnsContainerEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const block_columns_container_1 = require("@usewaypoint/block-columns-container");
+const EditorBlock_1 = require("../EditorBlock");
+const editor_context_1 = require("../editor-context");
+const EditorChildrenIds_1 = __importDefault(require("../helpers/EditorChildrenIds"));
+const ColumnsContainerPropsSchema_1 = __importDefault(require("./ColumnsContainerPropsSchema"));
+const EMPTY_COLUMNS = [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }];
+function ColumnsContainerEditor({ style, props, }) {
+    const currentBlockId = (0, EditorBlock_1.useCurrentBlockId)();
+    const patchDocument = (0, editor_context_1.usePatchDocument)();
+    const setSelectedBlockId = (0, editor_context_1.useSetSelectedBlockId)();
+    const { columns, ...restProps } = props ?? {};
+    const columnsValue = columns ?? EMPTY_COLUMNS;
+    const updateColumn = (columnIndex, { block, blockId, childrenIds }) => {
+        const nextColumns = [...columnsValue];
+        nextColumns[columnIndex] = {
+            ...columnsValue[columnIndex],
+            childrenIds,
+        };
+        patchDocument({
+            [blockId]: block,
+            [currentBlockId]: {
+                type: 'ColumnsContainer',
+                data: ColumnsContainerPropsSchema_1.default.parse({
+                    style,
+                    props: {
+                        ...restProps,
+                        columns: nextColumns,
+                    },
+                }),
+            },
+        });
+        setSelectedBlockId(blockId);
+    };
+    return ((0, jsx_runtime_1.jsx)(block_columns_container_1.ColumnsContainer, { props: restProps, style: style, columns: [
+            (0, jsx_runtime_1.jsx)(EditorChildrenIds_1.default, { childrenIds: columns?.[0]?.childrenIds, onChange: (change) => updateColumn(0, change) }, "col-0"),
+            (0, jsx_runtime_1.jsx)(EditorChildrenIds_1.default, { childrenIds: columns?.[1]?.childrenIds, onChange: (change) => updateColumn(1, change) }, "col-1"),
+            (0, jsx_runtime_1.jsx)(EditorChildrenIds_1.default, { childrenIds: columns?.[2]?.childrenIds, onChange: (change) => updateColumn(2, change) }, "col-2"),
+        ] }));
+}
+//# sourceMappingURL=ColumnsContainerEditor.js.map

package/dist/canvas/blocks/ColumnsContainerEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsContainerEditor.js","sourceRoot":"","sources":["../../../src/canvas/blocks/ColumnsContainerEditor.tsx"],"names":[],"mappings":";;;;;AAcA,yCA2DC;;AAvED,kFAAgG;AAEhG,gDAAmD;AACnD,sDAA4E;AAC5E,qFAA4F;AAE5F,gGAEuC;AAEvC,MAAM,aAAa,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;AAEtF,SAAwB,sBAAsB,CAAC,EAC7C,KAAK,EACL,KAAK,GACiB;IACtB,MAAM,cAAc,GAAG,IAAA,+BAAiB,GAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,IAAA,iCAAgB,GAAE,CAAC;IACzC,MAAM,kBAAkB,GAAG,IAAA,sCAAqB,GAAE,CAAC;IAEnD,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC;IAC9C,MAAM,YAAY,GAAG,OAAO,IAAI,aAAa,CAAC;IAE9C,MAAM,YAAY,GAAG,CACnB,WAAsB,EACtB,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAwB,EACrD,EAAE;QACF,MAAM,WAAW,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;QACtC,WAAW,CAAC,WAAW,CAAC,GAAG;YACzB,GAAG,YAAY,CAAC,WAAW,CAAC;YAC5B,WAAW;SACZ,CAAC;QACF,aAAa,CAAC;YACZ,CAAC,OAAO,CAAC,EAAE,KAAK;YAChB,CAAC,cAAc,CAAC,EAAE;gBAChB,IAAI,EAAE,kBAAkB;gBACxB,IAAI,EAAE,qCAA2B,CAAC,KAAK,CAAC;oBACtC,KAAK;oBACL,KAAK,EAAE;wBACL,GAAG,SAAS;wBACZ,OAAO,EAAE,WAAW;qBACrB;iBACF,CAAC;aACH;SACF,CAAC,CAAC;QACH,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,uBAAC,0CAAoB,IACnB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE;YACP,uBAAC,2BAAiB,IAEhB,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,IAFzC,OAAO,CAGX;YACF,uBAAC,2BAAiB,IAEhB,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,IAFzC,OAAO,CAGX;YACF,uBAAC,2BAAiB,IAEhB,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,IAFzC,OAAO,CAGX;SACH,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/canvas/blocks/ColumnsContainerPropsSchema.d.ts

@@ -0,0 +1,183 @@
+import { z } from 'zod';
+declare const ColumnsContainerPropsSchema: z.ZodObject<{
+    style: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+        backgroundColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        padding: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+            top: z.ZodNumber;
+            bottom: z.ZodNumber;
+            right: z.ZodNumber;
+            left: z.ZodNumber;
+        }, "strip", z.ZodTypeAny, {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        }, {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        }>>>;
+    }, "strip", z.ZodTypeAny, {
+        backgroundColor?: string | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    }, {
+        backgroundColor?: string | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    }>>>;
+    props: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+        columns: z.ZodTuple<[z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>], null>;
+        fixedWidths: z.ZodNullable<z.ZodOptional<z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>>>;
+        columnsCount: z.ZodNullable<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<2>, z.ZodLiteral<3>]>>>;
+        columnsGap: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
+        contentAlignment: z.ZodNullable<z.ZodOptional<z.ZodEnum<["top", "middle", "bottom"]>>>;
+    }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+        columns: z.ZodTuple<[z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>], null>;
+        fixedWidths: z.ZodNullable<z.ZodOptional<z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>>>;
+        columnsCount: z.ZodNullable<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<2>, z.ZodLiteral<3>]>>>;
+        columnsGap: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
+        contentAlignment: z.ZodNullable<z.ZodOptional<z.ZodEnum<["top", "middle", "bottom"]>>>;
+    }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+        columns: z.ZodTuple<[z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>], null>;
+        fixedWidths: z.ZodNullable<z.ZodOptional<z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>>>;
+        columnsCount: z.ZodNullable<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<2>, z.ZodLiteral<3>]>>>;
+        columnsGap: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
+        contentAlignment: z.ZodNullable<z.ZodOptional<z.ZodEnum<["top", "middle", "bottom"]>>>;
+    }, z.ZodTypeAny, "passthrough">>>>;
+}, "strip", z.ZodTypeAny, {
+    style?: {
+        backgroundColor?: string | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    } | null | undefined;
+    props?: z.objectOutputType<{
+        columns: z.ZodTuple<[z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>], null>;
+        fixedWidths: z.ZodNullable<z.ZodOptional<z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>>>;
+        columnsCount: z.ZodNullable<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<2>, z.ZodLiteral<3>]>>>;
+        columnsGap: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
+        contentAlignment: z.ZodNullable<z.ZodOptional<z.ZodEnum<["top", "middle", "bottom"]>>>;
+    }, z.ZodTypeAny, "passthrough"> | null | undefined;
+}, {
+    style?: {
+        backgroundColor?: string | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    } | null | undefined;
+    props?: z.objectInputType<{
+        columns: z.ZodTuple<[z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>, z.ZodObject<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+            childrenIds: z.ZodArray<z.ZodString, "many">;
+        }, z.ZodTypeAny, "passthrough">>], null>;
+        fixedWidths: z.ZodNullable<z.ZodOptional<z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>>>;
+        columnsCount: z.ZodNullable<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<2>, z.ZodLiteral<3>]>>>;
+        columnsGap: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
+        contentAlignment: z.ZodNullable<z.ZodOptional<z.ZodEnum<["top", "middle", "bottom"]>>>;
+    }, z.ZodTypeAny, "passthrough"> | null | undefined;
+}>;
+export type ColumnsContainerProps = z.infer<typeof ColumnsContainerPropsSchema>;
+export default ColumnsContainerPropsSchema;

package/dist/canvas/blocks/ColumnsContainerPropsSchema.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const zod_1 = require("zod");
+const block_columns_container_1 = require("@usewaypoint/block-columns-container");
+const BasePropsShape = block_columns_container_1.ColumnsContainerPropsSchema.shape.props.unwrap().unwrap().shape;
+const ColumnSchema = zod_1.z.object({ childrenIds: zod_1.z.array(zod_1.z.string()) }).passthrough();
+const ColumnsContainerPropsSchema = zod_1.z.object({
+    style: block_columns_container_1.ColumnsContainerPropsSchema.shape.style,
+    props: zod_1.z
+        .object({
+        ...BasePropsShape,
+        columns: zod_1.z.tuple([ColumnSchema, ColumnSchema, ColumnSchema]),
+    })
+        .passthrough()
+        .optional()
+        .nullable(),
+});
+exports.default = ColumnsContainerPropsSchema;
+//# sourceMappingURL=ColumnsContainerPropsSchema.js.map

package/dist/canvas/blocks/ColumnsContainerPropsSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsContainerPropsSchema.js","sourceRoot":"","sources":["../../../src/canvas/blocks/ColumnsContainerPropsSchema.ts"],"names":[],"mappings":";;AAAA,6BAAwB;AAExB,kFAAsH;AAEtH,MAAM,cAAc,GAAG,qDAA+B,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC;AAE3F,MAAM,YAAY,GAAG,OAAC,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,OAAC,CAAC,KAAK,CAAC,OAAC,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;AAElF,MAAM,2BAA2B,GAAG,OAAC,CAAC,MAAM,CAAC;IAC3C,KAAK,EAAE,qDAA+B,CAAC,KAAK,CAAC,KAAK;IAClD,KAAK,EAAE,OAAC;SACL,MAAM,CAAC;QACN,GAAG,cAAc;QACjB,OAAO,EAAE,OAAC,CAAC,KAAK,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;KAC7D,CAAC;SACD,WAAW,EAAE;SACb,QAAQ,EAAE;SACV,QAAQ,EAAE;CACd,CAAC,CAAC;AAGH,kBAAe,2BAA2B,CAAC"}

package/dist/canvas/blocks/ContainerEditor.d.ts

@@ -0,0 +1,2 @@
+import type { ContainerProps } from './ContainerPropsSchema';
+export default function ContainerEditor({ style, props }: ContainerProps): JSX.Element;

package/dist/canvas/blocks/ContainerEditor.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ContainerEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const block_container_1 = require("@usewaypoint/block-container");
+const EditorBlock_1 = require("../EditorBlock");
+const editor_context_1 = require("../editor-context");
+const EditorChildrenIds_1 = __importDefault(require("../helpers/EditorChildrenIds"));
+function ContainerEditor({ style, props }) {
+    const childrenIds = props?.childrenIds ?? [];
+    const document = (0, editor_context_1.useDocument)();
+    const currentBlockId = (0, EditorBlock_1.useCurrentBlockId)();
+    const patchDocument = (0, editor_context_1.usePatchDocument)();
+    const setSelectedBlockId = (0, editor_context_1.useSetSelectedBlockId)();
+    return ((0, jsx_runtime_1.jsx)(block_container_1.Container, { style: style, children: (0, jsx_runtime_1.jsx)(EditorChildrenIds_1.default, { 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: {
+                                ...currentBlock.data.props,
+                                childrenIds: nextChildrenIds,
+                            },
+                        },
+                    },
+                });
+                setSelectedBlockId(blockId);
+            } }) }));
+}
+//# sourceMappingURL=ContainerEditor.js.map

package/dist/canvas/blocks/ContainerEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerEditor.js","sourceRoot":"","sources":["../../../src/canvas/blocks/ContainerEditor.tsx"],"names":[],"mappings":";;;;;AAUA,kCAkCC;;AA1CD,kEAA0E;AAE1E,gDAAmD;AACnD,sDAAyF;AACzF,qFAA6D;AAI7D,SAAwB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAkB;IACtE,MAAM,WAAW,GAAG,KAAK,EAAE,WAAW,IAAI,EAAE,CAAC;IAC7C,MAAM,QAAQ,GAAG,IAAA,4BAAW,GAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,IAAA,+BAAiB,GAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,IAAA,iCAAgB,GAAE,CAAC;IACzC,MAAM,kBAAkB,GAAG,IAAA,sCAAqB,GAAE,CAAC;IAEnD,OAAO,CACL,uBAAC,2BAAa,IAAC,KAAK,EAAE,KAAK,YACzB,uBAAC,2BAAiB,IAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE;gBAC7D,MAAM,YAAY,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;gBAC9C,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;oBACvD,OAAO;gBACT,CAAC;gBACD,aAAa,CAAC;oBACZ,CAAC,OAAO,CAAC,EAAE,KAAK;oBAChB,CAAC,cAAc,CAAC,EAAE;wBAChB,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE;4BACJ,GAAG,YAAY,CAAC,IAAI;4BACpB,KAAK,EAAE;gCACL,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK;gCAC1B,WAAW,EAAE,eAAe;6BAC7B;yBACF;qBACF;iBACF,CAAC,CAAC;gBACH,kBAAkB,CAAC,OAAO,CAAC,CAAC;YAC9B,CAAC,GACD,GACY,CACjB,CAAC;AACJ,CAAC"}

package/dist/canvas/blocks/ContainerPropsSchema.d.ts

@@ -0,0 +1,83 @@
+import { z } from 'zod';
+declare const ContainerPropsSchema: z.ZodObject<{
+    style: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+        backgroundColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        borderColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        borderRadius: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
+        padding: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+            top: z.ZodNumber;
+            bottom: z.ZodNumber;
+            right: z.ZodNumber;
+            left: z.ZodNumber;
+        }, "strip", z.ZodTypeAny, {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        }, {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        }>>>;
+    }, "strip", z.ZodTypeAny, {
+        backgroundColor?: string | null | undefined;
+        borderColor?: string | null | undefined;
+        borderRadius?: number | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    }, {
+        backgroundColor?: string | null | undefined;
+        borderColor?: string | null | undefined;
+        borderRadius?: number | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    }>>>;
+    props: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+        childrenIds: z.ZodNullable<z.ZodOptional<z.ZodArray<z.ZodString, "many">>>;
+    }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+        childrenIds: z.ZodNullable<z.ZodOptional<z.ZodArray<z.ZodString, "many">>>;
+    }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+        childrenIds: z.ZodNullable<z.ZodOptional<z.ZodArray<z.ZodString, "many">>>;
+    }, z.ZodTypeAny, "passthrough">>>>;
+}, "strip", z.ZodTypeAny, {
+    style?: {
+        backgroundColor?: string | null | undefined;
+        borderColor?: string | null | undefined;
+        borderRadius?: number | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    } | null | undefined;
+    props?: z.objectOutputType<{
+        childrenIds: z.ZodNullable<z.ZodOptional<z.ZodArray<z.ZodString, "many">>>;
+    }, z.ZodTypeAny, "passthrough"> | null | undefined;
+}, {
+    style?: {
+        backgroundColor?: string | null | undefined;
+        borderColor?: string | null | undefined;
+        borderRadius?: number | null | undefined;
+        padding?: {
+            top: number;
+            bottom: number;
+            right: number;
+            left: number;
+        } | null | undefined;
+    } | null | undefined;
+    props?: z.objectInputType<{
+        childrenIds: z.ZodNullable<z.ZodOptional<z.ZodArray<z.ZodString, "many">>>;
+    }, z.ZodTypeAny, "passthrough"> | null | undefined;
+}>;
+export default ContainerPropsSchema;
+export type ContainerProps = z.infer<typeof ContainerPropsSchema>;

package/dist/canvas/blocks/ContainerPropsSchema.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const zod_1 = require("zod");
+const block_container_1 = require("@usewaypoint/block-container");
+const ContainerPropsSchema = zod_1.z.object({
+    style: block_container_1.ContainerPropsSchema.shape.style,
+    props: zod_1.z
+        .object({
+        childrenIds: zod_1.z.array(zod_1.z.string()).optional().nullable(),
+    })
+        .passthrough()
+        .optional()
+        .nullable(),
+});
+exports.default = ContainerPropsSchema;
+//# sourceMappingURL=ContainerPropsSchema.js.map

package/dist/canvas/blocks/ContainerPropsSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerPropsSchema.js","sourceRoot":"","sources":["../../../src/canvas/blocks/ContainerPropsSchema.ts"],"names":[],"mappings":";;AAAA,6BAAwB;AAExB,kEAAgG;AAEhG,MAAM,oBAAoB,GAAG,OAAC,CAAC,MAAM,CAAC;IACpC,KAAK,EAAE,sCAAwB,CAAC,KAAK,CAAC,KAAK;IAC3C,KAAK,EAAE,OAAC;SACL,MAAM,CAAC;QACN,WAAW,EAAE,OAAC,CAAC,KAAK,CAAC,OAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE;KACvD,CAAC;SACD,WAAW,EAAE;SACb,QAAQ,EAAE;SACV,QAAQ,EAAE;CACd,CAAC,CAAC;AAEH,kBAAe,oBAAoB,CAAC"}

package/dist/canvas/blocks/EmailLayoutEditor.d.ts

@@ -0,0 +1,2 @@
+import type { EmailLayoutProps } from './EmailLayoutPropsSchema';
+export default function EmailLayoutEditor(props: EmailLayoutProps): JSX.Element;