@julach-earzan/email-template-builder 0.1.0

package/dist/main.d.ts

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

package/dist/store/emailStore.d.ts

@@ -0,0 +1,39 @@
+import { BlockType, EditorSelection, EmailComponent, EmailStyles, EmailTemplate } from '../types';
+export type EmailStore = {
+    template: EmailTemplate;
+    selected: EditorSelection | null;
+    past: EmailTemplate[];
+    future: EmailTemplate[];
+    setTemplate: (t: EmailTemplate) => void;
+    updateDocument: (patch: Partial<Pick<EmailTemplate, 'width' | 'bodyStyles' | 'meta' | 'documentName'>>) => void;
+    previewDevice: 'desktop' | 'mobile';
+    setPreviewDevice: (d: 'desktop' | 'mobile') => void;
+    canvasView: 'editor' | 'preview';
+    setCanvasView: (v: 'editor' | 'preview') => void;
+    select: (sel: EditorSelection | null) => void;
+    addSection: (atIndex?: number) => void;
+    removeSection: (sectionId: string) => void;
+    reorderSections: (activeIndex: number, overIndex: number) => void;
+    setSectionColumnCount: (sectionId: string, count: number) => void;
+    updateSectionStyles: (sectionId: string, styles: Partial<EmailStyles>) => void;
+    updateColumnStyles: (sectionId: string, columnId: string, styles: Partial<EmailStyles>) => void;
+    insertBlockAtColumn: (columnId: string, index: number, type: BlockType) => void;
+    moveBlock: (blockId: string, toColumnId: string, toIndex: number) => void;
+    reorderInColumn: (columnId: string, fromIndex: number, toIndex: number) => void;
+    duplicateComponent: (componentId: string) => void;
+    removeComponent: (componentId: string) => void;
+    updateComponent: (componentId: string, patch: Partial<{
+        content: EmailComponent['content'];
+        styles: Partial<EmailStyles>;
+        settings: EmailComponent['settings'];
+    }>) => void;
+    deleteComponent: (componentId: string) => void;
+    updateComponentStyles: (componentId: string, styles: Partial<EmailStyles>) => void;
+    updateComponentContent: (componentId: string, content: EmailComponent['content']) => void;
+    selectComponent: (componentId: string) => void;
+    undo: () => void;
+    redo: () => void;
+    /** Replace history tip (e.g. after load) */
+    resetHistory: () => void;
+};
+export declare const useEmailStore: import('zustand').UseBoundStore<import('zustand').StoreApi<EmailStore>>;

package/dist/types/email.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Email template JSON model: sections → columns → components.
+ * Styles use camelCase keys; they are inlined in export (converted for HTML attributes).
+ */
+export type BlockType = 'text' | 'image' | 'button' | 'divider' | 'spacer';
+/** Inline-style map compatible with email clients (string values). */
+export type EmailStyles = Record<string, string>;
+/** Semantic tag for export (paragraph vs headings). */
+export type TextVariant = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/** Plain text plus whole-block formatting (email-safe tags in HTML export). */
+export type TextContent = {
+    text: string;
+    variant?: TextVariant;
+    listType?: 'none' | 'ul' | 'ol';
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    subscript?: boolean;
+    superscript?: boolean;
+};
+export type ImageContent = {
+    src: string;
+    alt: string;
+};
+export type ButtonContent = {
+    label: string;
+    href: string;
+    /**
+     * Optional icon shown next to the label (preview + export).
+     * Use empty `src` to represent "icon disabled".
+     */
+    icon?: {
+        src: string;
+        alt: string;
+    };
+};
+export type DividerContent = Record<string, never>;
+export type SpacerContent = {
+    height: string;
+};
+export type BlockContent = TextContent | ImageContent | ButtonContent | DividerContent | SpacerContent;
+export type EmailComponent = {
+    id: string;
+    type: BlockType;
+    content: BlockContent;
+    styles: EmailStyles;
+    settings?: {
+        /** Hide component in editor + export. */
+        hidden?: boolean;
+        /** Toggle device-specific visibility in editor + (desktop export only). */
+        deviceVisibility?: {
+            desktop: boolean;
+            mobile: boolean;
+        };
+    };
+};
+export type EmailColumn = {
+    id: string;
+    components: EmailComponent[];
+    /** Optional width hint for export (e.g. "50%"); defaults by column count. */
+    styles?: EmailStyles;
+};
+export type EmailSection = {
+    id: string;
+    /** 1–3 columns per product requirement */
+    columns: EmailColumn[];
+    styles: EmailStyles;
+};
+export type EmailTemplate = {
+    id: string;
+    /** Builder document title (e.g. “New Message”). */
+    documentName?: string;
+    meta?: {
+        subject?: string;
+        preheader?: string;
+    };
+    /** Max width of inner email body (e.g. 600px) */
+    width: string;
+    bodyStyles: EmailStyles;
+    sections: EmailSection[];
+};
+export type SelectionKind = 'section' | 'column' | 'component';
+export type EditorSelection = {
+    kind: SelectionKind;
+    /** section id, column id, or component id */
+    id: string;
+    /** When kind is column or component, parent section id */
+    sectionId?: string;
+    /** When kind is component, parent column id */
+    columnId?: string;
+};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export type { BlockContent, BlockType, ButtonContent, DividerContent, EditorSelection, EmailColumn, EmailComponent, EmailSection, EmailStyles, EmailTemplate, ImageContent, SelectionKind, SpacerContent, TextContent, TextVariant, } from './email';

package/dist/utils/emailBuilderApi.d.ts

@@ -0,0 +1,30 @@
+import { EmailTemplate } from '../types';
+/** HTTP verb; lower or upper case accepted. */
+export type ApiEndpoint = {
+    method: string;
+    url: string;
+    headers?: Record<string, string>;
+};
+export declare function normalizeHttpMethod(method: string): string;
+export declare function parseImageUrlFromResponse(data: unknown, custom?: (json: unknown) => string | undefined): string | undefined;
+export declare function resolveUrlMaybeRelative(href: string, baseUrl: string): string;
+export declare function uploadFileToEndpoint(endpoint: ApiEndpoint, file: File, options: {
+    fieldName: string;
+    credentials?: RequestCredentials;
+    parseUploadResponse?: (json: unknown) => string | undefined;
+}): Promise<string>;
+export declare function postEmailExport(endpoint: ApiEndpoint, payload: {
+    html: string;
+    template: EmailTemplate;
+}, options: {
+    credentials?: RequestCredentials;
+    buildExportBody?: (p: {
+        html: string;
+        template: EmailTemplate;
+    }) => BodyInit;
+    buildExportHeaders?: (p: {
+        html: string;
+        template: EmailTemplate;
+    }) => Record<string, string>;
+}): Promise<Response>;
+export declare function fetchTemplateFromEndpoint(endpoint: ApiEndpoint, credentials?: RequestCredentials): Promise<EmailTemplate>;

package/dist/utils/generateEmailHTML.d.ts

@@ -0,0 +1,13 @@
+import { EmailTemplate } from '../types';
+/**
+ * Convert a typed template object to a full HTML document (tables + inline CSS).
+ */
+export declare function generateEmailHTML(templateJson: EmailTemplate): string;
+/**
+ * Parse JSON string → normalize → HTML. Throws `SyntaxError` if JSON is invalid.
+ */
+export declare function generateEmailHTMLFromJson(json: string): string;
+/**
+ * Accept unknown parsed JSON (e.g. `fetch().json()`) and return HTML safely.
+ */
+export declare function generateEmailHTMLFromUnknown(data: unknown): string;

package/dist/utils/id.d.ts

@@ -0,0 +1,2 @@
+/** Stable unique ids for nodes in the template tree. */
+export declare function newId(): string;

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { generateEmailHTML, generateEmailHTMLFromJson, generateEmailHTMLFromUnknown, } from './generateEmailHTML';
+export { emptyEmailTemplate, normalizeEmailTemplate, normalizeStyles, } from './normalizeEmailTemplate';

package/dist/utils/normalizeEmailTemplate.d.ts

@@ -0,0 +1,8 @@
+import { EmailStyles, EmailTemplate } from '../types';
+export declare function normalizeStyles(v: unknown): EmailStyles;
+/** Default empty template when input is not an object. */
+export declare function emptyEmailTemplate(): EmailTemplate;
+/**
+ * Normalize arbitrary JSON (e.g. from API or file) into EmailTemplate.
+ */
+export declare function normalizeEmailTemplate(input: unknown): EmailTemplate;

package/dist/utils/styles.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+import { EmailStyles } from '../types';
+/** Convert stored style map to React inline `style` object. */
+export declare function stylesToReact(styles: EmailStyles | undefined): CSSProperties;
+/** Serialize to a single `style="..."` attribute value for email HTML. */
+export declare function stylesToInlineAttr(styles: EmailStyles): string;

package/dist/utils/templateQueries.d.ts

@@ -0,0 +1,19 @@
+import { EmailColumn, EmailComponent, EmailSection, EmailTemplate } from '../types';
+export type BlockLocation = {
+    sectionId: string;
+    columnId: string;
+    index: number;
+};
+export declare function getSectionById(template: EmailTemplate, sectionId: string): EmailSection | null;
+export declare function findBlockLocation(template: EmailTemplate, blockId: string): BlockLocation | null;
+export declare function getColumnById(template: EmailTemplate, columnId: string): EmailColumn | null;
+export declare function findComponentById(template: EmailTemplate, componentId: string): {
+    component: EmailComponent;
+    sectionId: string;
+    columnId: string;
+} | null;
+/** Palette drop: insert before a block, or append when `over` is the column droppable. */
+export declare function resolveColumnInsertIndex(template: EmailTemplate, overId: string): {
+    columnId: string;
+    index: number;
+} | null;

package/dist/utils/textAlign.d.ts

@@ -0,0 +1,5 @@
+export type EmailAlign = 'left' | 'center' | 'right' | 'justify';
+/** Map style `textAlign` to CSS; `td align` is only left/center/right (justify uses left + text-align). */
+export declare function emailTextAlign(textAlign: string | undefined): EmailAlign;
+/** HTML `align` attribute on <td> (no `justify` in classic email). */
+export declare function emailTdAlign(align: EmailAlign): 'left' | 'center' | 'right';

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@julach-earzan/email-template-builder",
+  "version": "0.1.0",
+  "description": "React email template editor with drag-and-drop blocks, preview, HTML export, and optional upload/export API hooks.",
+  "type": "module",
+  "author": "julach-earzan",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "email",
+    "template",
+    "editor",
+    "builder",
+    "html",
+    "newsletter",
+    "drag-and-drop"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/julach-earzan/email-template-builder.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/email-template-builder.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "dotenv": "^17.4.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-icons": "^5.6.0",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}