@jhits/plugin-newsletter 0.0.15 → 0.0.17

package/dist/index.js

@@ -13,96 +13,19 @@ import { SettingsView } from './views/SettingsView';
 import { NewsletterManagerView } from './views/NewsletterManager';
 import { NewsletterEditorView } from './views/NewsletterEditor';
 import { editorStateToAPI } from './lib/mappers/apiMapper';
+import { resolvePluginConfig } from './lib/utils/config-resolver';
 /**
  * Main Router Component
  * Handles routing within the newsletter plugin
- *
- * Client Handshake:
- * - Client apps can pass customBlocks via props
- * - Or via window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'].customBlocks
- * - The EditorProvider will automatically register these blocks
  */
 export default function NewsletterPlugin(props) {
-    const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
-    // Get custom blocks from props or window global (client app injection point)
-    const customBlocks = useMemo(() => {
-        // First, try props
-        if (propsCustomBlocks && propsCustomBlocks.length > 0) {
-            return propsCustomBlocks;
-        }
-        // Fallback to window global (for client app injection)
-        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.customBlocks) {
-                return pluginProps.customBlocks;
-            }
-        }
-        return [];
-    }, [propsCustomBlocks]);
-    // Get dark mode setting from props, localStorage (dev settings), or window global
-    // Priority: localStorage (dev) > props > window global > default
-    const darkMode = useMemo(() => {
-        // First, check localStorage for dev settings (highest priority for dev)
-        if (typeof window !== 'undefined') {
-            try {
-                const saved = localStorage.getItem('__JHITS_PLUGIN_NEWSLETTER_CONFIG__');
-                if (saved) {
-                    const config = JSON.parse(saved);
-                    if (config.darkMode !== undefined) {
-                        return config.darkMode;
-                    }
-                }
-            }
-            catch (e) {
-                // Ignore localStorage errors
-            }
-        }
-        // Then try props
-        if (propsDarkMode !== undefined) {
-            return propsDarkMode;
-        }
-        // Fallback to window global if prop not provided
-        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.darkMode !== undefined) {
-                return pluginProps.darkMode;
-            }
-        }
-        return true; // Default to dark mode enabled
-    }, [propsDarkMode]);
-    // Get background colors from props, localStorage (dev settings), or window global
-    // Priority: localStorage (dev) > props > window global
-    const backgroundColors = useMemo(() => {
-        // First, check localStorage for dev settings (highest priority for dev)
-        if (typeof window !== 'undefined') {
-            try {
-                const saved = localStorage.getItem('__JHITS_PLUGIN_NEWSLETTER_CONFIG__');
-                if (saved) {
-                    const config = JSON.parse(saved);
-                    if (config.backgroundColors) {
-                        return config.backgroundColors;
-                    }
-                }
-            }
-            catch (e) {
-                // Ignore localStorage errors
-            }
-        }
-        // Then try props
-        if (propsBackgroundColors) {
-            return propsBackgroundColors;
-        }
-        // Fallback to window global
-        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.backgroundColors) {
-                return pluginProps.backgroundColors;
-            }
-        }
-        return undefined;
-    }, [propsBackgroundColors]);
+    const { subPath, siteId, locale } = props;
+    // Resolve configuration from multiple sources (Props, Window, Storage)
+    const config = useMemo(() => resolvePluginConfig(props), [props]);
+    const { customBlocks, darkMode, backgroundColors, translations, emailConfig, unsubscribeTranslations } = config;
     const route = subPath[0] || 'newsletters';
-    // Listen for config updates from settings screen
+    const newsletterId = subPath[1];
+    // Listen for config updates (e.g. from settings screen)
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
@@ -120,8 +43,7 @@ export default function NewsletterPlugin(props) {
         case 'newsletters':
             return _jsx(NewsletterManagerView, { siteId: siteId, locale: locale });
         case 'editor':
-            const newsletterId = subPath[1];
-            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, onSave: async (state, extraData) => {
+            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, translations: translations, emailConfig: emailConfig, unsubscribeTranslations: unsubscribeTranslations, onSave: async (state, extraData) => {
                     // Save to API - create new or update existing newsletter
                     const originalId = newsletterId || state.slug;
                     const apiData = editorStateToAPI(state);
@@ -134,7 +56,6 @@ export default function NewsletterPlugin(props) {
                     const langParam = extraData?.language ? `?language=${extraData.language}` : '';
                     // If we have an id, try to update first
                     if (originalId) {
-                        console.log('[NewsletterPlugin] Attempting to update newsletter with id:', originalId);
                         const updateResponse = await fetch(`/api/plugin-newsletter/newsletters/${originalId}${langParam}`, {
                             method: 'PUT',
                             headers: { 'Content-Type': 'application/json' },
@@ -143,31 +64,14 @@ export default function NewsletterPlugin(props) {
                         });
                         if (updateResponse.ok) {
                             const result = await updateResponse.json();
-                            // If the id changed, update the URL
                             if (result.id && result.id !== originalId) {
                                 window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.id}`);
                             }
                             return result;
                         }
-                        // If 404, newsletter doesn't exist, create a new one
-                        if (updateResponse.status === 404) {
-                            console.log('[NewsletterPlugin] Newsletter not found, creating new newsletter');
-                        }
-                        else {
-                            // Other error, throw it
-                            const error = await updateResponse.json();
-                            console.error('[NewsletterPlugin] Save failed:', {
-                                status: updateResponse.status,
-                                statusText: updateResponse.statusText,
-                                error,
-                            });
-                            const errorMessage = error.message || error.error || 'Failed to save newsletter';
-                            throw new Error(errorMessage);
-                        }
                     }
-                    // Create new newsletter (either no id or update returned 404)
-                    console.log('[NewsletterPlugin] Creating new newsletter');
-                    const createResponse = await fetch('/api/plugin-newsletter/newsletters/new', {
+                    // Create new newsletter
+                    const createResponse = await fetch(`/api/plugin-newsletter/newsletters/new${langParam}`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         credentials: 'include',
@@ -175,26 +79,18 @@ export default function NewsletterPlugin(props) {
                     });
                     if (!createResponse.ok) {
                         const error = await createResponse.json();
-                        console.error('[NewsletterPlugin] Create failed:', {
-                            status: createResponse.status,
-                            statusText: createResponse.statusText,
-                            error,
-                        });
                         const errorMessage = error.message || error.error || 'Failed to create newsletter';
                         throw new Error(errorMessage);
                     }
                     const result = await createResponse.json();
-                    // Update the URL to the new newsletter's id
                     if (result.id) {
                         window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.id}`);
                     }
                     return result;
                 }, children: _jsx(NewsletterEditorView, { newsletterId: newsletterId, siteId: siteId, locale: locale, darkMode: darkMode, backgroundColors: backgroundColors }) }));
         case 'new':
-            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, onSave: async (state, extraData) => {
-                    // Save to API - create new newsletter
+            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, translations: translations, emailConfig: emailConfig, unsubscribeTranslations: unsubscribeTranslations, onSave: async (state, extraData) => {
                     const apiData = editorStateToAPI(state);
-                    // Include language in metadata if provided
                     if (extraData?.language) {
                         apiData.metadata = apiData.metadata || {};
                         apiData.metadata.lang = extraData.language;
@@ -210,7 +106,6 @@ export default function NewsletterPlugin(props) {
                         throw new Error(error.message || 'Failed to create newsletter');
                     }
                     const result = await response.json();
-                    // Update the URL to the new newsletter's slug
                     if (result.slug) {
                         window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
                     }
@@ -219,7 +114,7 @@ export default function NewsletterPlugin(props) {
         case 'subscribers':
             return _jsx(SubscribersView, { siteId: siteId, locale: locale });
         case 'welcome':
-            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, isWelcomeEmail: true, onSave: async (state, extraData) => {
+            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, translations: translations, emailConfig: emailConfig, unsubscribeTranslations: unsubscribeTranslations, isWelcomeEmail: true, onSave: async (state, extraData) => {
                     const apiData = editorStateToAPI(state);
                     const language = extraData?.language || locale || 'en';
                     const response = await fetch(`/api/plugin-newsletter/welcome-email?language=${language}`, {
@@ -240,11 +135,9 @@ export default function NewsletterPlugin(props) {
             return _jsx(NewsletterManagerView, { siteId: siteId, locale: locale });
     }
 }
-// Export for use as default
+// Export symbols as needed
 export { NewsletterPlugin as Index };
-// Export initialization utility for easy setup
 export { initNewsletterPlugin } from './init';
-// Export editor state management
-export { EditorProvider, useEditor } from './state/EditorContext';
-// Export block registry
 export { blockRegistry } from './registry';
+export { EditorProvider, useEditor } from './state/EditorContext';
+export { BlockRenderer, BlocksRenderer } from './lib/blocks/BlockRenderer';

package/dist/lib/blocks/BlockRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockRenderer.d.ts","sourceRoot":"","sources":["../../../src/lib/blocks/BlockRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI7D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,KAAK,CAAC;IAEb,oEAAoE;IACpE,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAEtE,uCAAuC;IACvC,OAAO,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;CACL;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,eAAe,EACf,OAAY,EACf,EAAE,kBAAkB,2CAoDpB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,eAAe,EACf,OAAY,EACf,EAAE;IACC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;CACL,2CAaA"}
+{"version":3,"file":"BlockRenderer.d.ts","sourceRoot":"","sources":["../../../src/lib/blocks/BlockRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAK7D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,KAAK,CAAC;IAEb,oEAAoE;IACpE,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAEtE,uCAAuC;IACvC,OAAO,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;CACL;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,eAAe,EACf,OAAY,EACf,EAAE,kBAAkB,2CAiEpB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,eAAe,EACf,OAAY,EACf,EAAE;IACC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;CACL,2CAaA"}

package/dist/lib/blocks/BlockRenderer.js

@@ -8,20 +8,32 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { blockRegistry } from '../../registry/BlockRegistry';
+import { useEditor } from '../../state/EditorContext';
 /**
  * Block Renderer Component
  * Renders a single block using its Preview component from the registry
  */
 export function BlockRenderer({ block, customRenderers, context = {} }) {
+    // We access the context to ensure re-render when blocks are registered
+    try {
+        useEditor();
+    }
+    catch (e) {
+        // Not in editor context (e.g. preview bridge)
+    }
     // Check for custom renderer override first
     if (customRenderers?.has(block.type)) {
         const CustomRenderer = customRenderers.get(block.type);
         return _jsx(CustomRenderer, { block: block, context: context });
     }
     // Get block definition from registry
-    const definition = blockRegistry.get(block.type);
+    let definition = blockRegistry.get(block.type);
+    // If not found, try one last immediate re-check of the global window registry
+    if (!definition && typeof window !== 'undefined' && window.__JHITS_NEWSLETTER_REGISTRY__) {
+        definition = window.__JHITS_NEWSLETTER_REGISTRY__.get(block.type);
+    }
     if (!definition) {
-        console.warn(`Block type "${block.type}" not found in registry. Available types:`, blockRegistry.getAll().map(b => b.type).join(', '));
+        console.warn(`[BlockRenderer] Unknown block type: ${block.type}. Registry contains:`, blockRegistry.getAll().map(b => b.type).join(', '));
         return (_jsxs("div", { className: "p-4 border border-red-300 bg-red-50 rounded", children: [_jsxs("p", { className: "text-red-600", children: ["Unknown block type: ", block.type] }), _jsx("p", { className: "text-xs text-red-500 mt-1", children: "Make sure this block type is registered via customBlocks prop" })] }));
     }
     // Use the Preview component from the block definition

package/dist/lib/email/EmailRenderer.d.ts

@@ -39,6 +39,7 @@ export declare function generateNewsletterEmailHtml(blocks: Block[], metadata: {
     previewText?: string;
 }, context: EmailRenderContext & {
     unsubscribeUrl?: string;
+    unsubscribeText?: string;
     footerText?: string;
     logoUrl?: string;
     logoAlt?: string;

package/dist/lib/email/EmailRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailRenderer.d.ts","sourceRoot":"","sources":["../../../src/lib/email/EmailRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAmBzF;AA0OD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAE7F;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACvC,MAAM,EAAE,KAAK,EAAE,EACf,QAAQ,EAAE;IACN,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,EACD,OAAO,EAAE,kBAAkB,GAAG;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,GACF,MAAM,CA8GR"}
+{"version":3,"file":"EmailRenderer.d.ts","sourceRoot":"","sources":["../../../src/lib/email/EmailRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAmBzF;AAoPD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,GAAE,kBAAuB,GAAG,MAAM,CAE7F;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CACvC,MAAM,EAAE,KAAK,EAAE,EACf,QAAQ,EAAE;IACN,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,EACD,OAAO,EAAE,kBAAkB,GAAG;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,GACF,MAAM,CA+GR"}

package/dist/lib/email/EmailRenderer.js

@@ -41,14 +41,25 @@ function renderBlockByType(block, context) {
             const level = block.data.level || 1;
             const text = block.data.text || '';
             const tag = `h${Math.min(Math.max(level, 1), 6)}`;
-            const fontSize = level === 1 ? '32px' : level === 2 ? '24px' : level === 3 ? '20px' : '18px';
-            return `<${tag} style="font-size: ${fontSize}; font-weight: bold; color: #1a2e26; margin: 20px 0 10px 0; line-height: 1.3;">${escapeHtml(text)}</${tag}>`;
+            // Aligned with BotanicsAndYou heading sizes
+            let fontSize = '30px';
+            if (level === 1)
+                fontSize = '48px';
+            if (level === 2)
+                fontSize = '36px';
+            if (level === 3)
+                fontSize = '30px';
+            if (level >= 4)
+                fontSize = '20px';
+            const fontWeight = level >= 4 ? '500' : 'bold';
+            return `<${tag} style="font-family: 'Georgia', serif; font-size: ${fontSize}; font-weight: ${fontWeight}; color: #1a2e26; margin: 40px 0 15px 0; line-height: 1.2;">${escapeHtml(text)}</${tag}>`;
         }
         case 'paragraph': {
             const html = block.data.html || block.data.text || '';
             // Convert basic HTML tags to email-safe inline styles
             const emailHtml = convertHtmlToEmailSafe(html);
-            return `<p style="font-size: 15px; line-height: 1.8; color: #1a2e26; margin: 0 0 15px 0;">${emailHtml}</p>`;
+            // Aligned with BotanicsAndYou paragraph style (text-lg = 18px)
+            return `<p style="font-family: 'Georgia', serif; font-size: 18px; line-height: 1.625; color: #1a2e26; margin: 0 0 24px 0;">${emailHtml}</p>`;
         }
         case 'image': {
             const imageId = block.data.imageId;
@@ -114,7 +125,7 @@ function renderBlockByType(block, context) {
                 imageStyles.push(`border-radius: ${borderRadiusValue}`);
             }
             const imageStyleString = imageStyles.join('; ');
-            let html = `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;">
+            let html = `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
                 <tr>
                     <td align="center">
                         <img src="${imageUrl}" alt="${escapeHtml(alt)}" style="${imageStyleString}" />
@@ -122,7 +133,7 @@ function renderBlockByType(block, context) {
                 </tr>`;
             if (caption) {
                 html += `<tr>
-                    <td align="center" style="padding-top: 10px; font-size: 12px; color: #666; font-style: italic;">
+                    <td align="center" style="padding-top: 10px; font-size: 14px; color: #666; font-style: italic; font-family: 'Georgia', serif;">
                         ${escapeHtml(caption)}
                     </td>
                 </tr>`;
@@ -138,9 +149,9 @@ function renderBlockByType(block, context) {
             const itemsHtml = items.map((item, idx) => {
                 const text = typeof item === 'string' ? item : (item.html || item.text || '');
                 const emailHtml = convertHtmlToEmailSafe(text);
-                return `<li style="margin: 8px 0; padding-left: 5px; line-height: 1.8; color: #1a2e26;">${emailHtml}</li>`;
+                return `<li style="margin: 12px 0; padding-left: 5px; line-height: 1.625; color: #1a2e26;">${emailHtml}</li>`;
             }).join('');
-            return `<${tag} style="margin: 15px 0; padding-left: 25px; color: #1a2e26; font-size: 15px; line-height: 1.8;">${itemsHtml}</${tag}>`;
+            return `<${tag} style="font-family: 'Georgia', serif; margin: 24px 0; padding-left: 24px; color: #1a2e26; font-size: 18px; line-height: 1.625;">${itemsHtml}</${tag}>`;
         }
         case 'table': {
             const rows = (Array.isArray(block.data?.rows) ? block.data.rows : []);
@@ -149,7 +160,7 @@ function renderBlockByType(block, context) {
                 return '';
             }
             // Build table HTML using email-safe table structure
-            let tableHtml = `<table width="100%" cellpadding="12" cellspacing="0" border="0" style="margin: 20px 0; border-collapse: collapse; width: 100%;">`;
+            let tableHtml = `<table width="100%" cellpadding="12" cellspacing="0" border="0" style="margin: 30px 0; border-collapse: collapse; width: 100%; font-family: 'Georgia', serif;">`;
             rows.forEach((row, rIdx) => {
                 const isHeaderRow = rIdx === 0 && useHeader;
                 const tag = isHeaderRow ? 'th' : 'td';
@@ -159,7 +170,7 @@ function renderBlockByType(block, context) {
                 tableHtml += `<tr>`;
                 row.forEach((cell) => {
                     const cellHtml = convertHtmlToEmailSafe(cell.html || cell.text || '');
-                    tableHtml += `<${tag} style="padding: 12px; border: 1px solid #e5e7eb; text-align: left; color: ${textColor}; font-size: 15px; line-height: 1.8; background-color: ${bgColor}; font-weight: ${fontWeight};">${cellHtml}</${tag}>`;
+                    tableHtml += `<${tag} style="padding: 15px; border: 1px solid #e5e7eb; text-align: left; color: ${textColor}; font-size: 16px; line-height: 1.6; background-color: ${bgColor}; font-weight: ${fontWeight};">${cellHtml}</${tag}>`;
                 });
                 tableHtml += `</tr>`;
             });
@@ -167,7 +178,7 @@ function renderBlockByType(block, context) {
             return tableHtml;
         }
         case 'divider': {
-            return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
+            return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 40px 0;">
                 <tr>
                     <td align="center">
                         <table width="40" cellpadding="0" cellspacing="0" border="0">
@@ -183,7 +194,7 @@ function renderBlockByType(block, context) {
             // Generic fallback - try to extract text content
             const text = extractTextFromBlock(block);
             if (text) {
-                return `<p style="font-size: 15px; line-height: 1.8; color: #1a2e26; margin: 0 0 15px 0;">${escapeHtml(text)}</p>`;
+                return `<p style="font-family: 'Georgia', serif; font-size: 18px; line-height: 1.625; color: #1a2e26; margin: 0 0 24px 0;">${escapeHtml(text)}</p>`;
             }
             return '';
     }
@@ -246,11 +257,12 @@ export function renderBlocksToEmail(blocks, context = {}) {
  * Uses the same styling as the welcome email template
  */
 export function generateNewsletterEmailHtml(blocks, metadata, context) {
-    const { baseUrl = '', unsubscribeUrl, footerText, logoUrl, logoAlt = 'Logo', locale = 'en' } = context;
+    const { baseUrl = '', unsubscribeUrl, unsubscribeText: propsUnsubscribeText, footerText, logoUrl, logoAlt = 'Logo', locale = 'en' } = context;
     const contentHtml = renderBlocksToEmail(blocks, context);
     // Get unsubscribe text based on locale (matching welcome email)
     const isDutch = locale === 'nl';
-    const unsubscribeText = isDutch ? 'Afmelden' : 'Unsubscribe';
+    const defaultText = isDutch ? 'Afmelden' : 'Unsubscribe';
+    const unsubscribeText = propsUnsubscribeText || defaultText;
     // Build header HTML if logo is provided
     const headerHtml = logoUrl ? `
               <div class="header">
@@ -290,8 +302,8 @@ export function generateNewsletterEmailHtml(blocks, metadata, context) {
         .content { 
             padding: 0 50px 40px 50px; 
             color: #1a2e26; 
-            line-height: 1.8; 
-            font-size: 15px; 
+            line-height: 1.625; 
+            font-size: 18px; 
         }
         .footer { 
             padding: 40px 50px; 
@@ -303,12 +315,12 @@ export function generateNewsletterEmailHtml(blocks, metadata, context) {
             border-top: 1px solid #faf9f6; 
         }
         h1 { 
-            font-weight: normal; 
-            font-style: italic; 
-            font-size: 30px; 
+            font-weight: bold; 
+            font-size: 48px; 
             margin-bottom: 30px; 
             color: #1a2e26; 
-            text-align: center; 
+            text-align: left;
+            line-height: 1.2;
         }
         .divider { 
             height: 1px; 

package/dist/lib/utils/config-resolver.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Newsletter Plugin Configuration Resolver
+ * Centralizes the logic for resolving plugin settings from multiple sources
+ */
+import { ClientBlockDefinition } from '../../types/block';
+export interface ResolvedConfig {
+    customBlocks: ClientBlockDefinition[];
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    translations?: Record<string, any>;
+    unsubscribeTranslations?: Record<string, string>;
+    emailConfig?: {
+        logoUrl?: string;
+        logoAlt?: string;
+        footerText?: string;
+    };
+}
+/**
+ * Resolves a specific configuration value from priority sources:
+ * 1. LocalStorage (Dev overrides)
+ * 2. Component Props
+ * 3. Window Global (__JHITS_PLUGIN_PROPS__)
+ * 4. Default Value
+ */
+export declare function resolveConfigValue<T>(key: string, propValue: T | undefined, defaultValue: T, pluginKey?: string): T;
+/**
+ * Resolves all plugin configuration
+ */
+export declare function resolvePluginConfig(props: any): ResolvedConfig;
+//# sourceMappingURL=config-resolver.d.ts.map

package/dist/lib/utils/config-resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-resolver.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/config-resolver.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC3B,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACL;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAChC,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,CAAC,GAAG,SAAS,EACxB,YAAY,EAAE,CAAC,EACf,SAAS,GAAE,MAA4B,GACxC,CAAC,CAqBH;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,GAAG,cAAc,CAS9D"}

package/dist/lib/utils/config-resolver.js

@@ -0,0 +1,47 @@
+/**
+ * Newsletter Plugin Configuration Resolver
+ * Centralizes the logic for resolving plugin settings from multiple sources
+ */
+/**
+ * Resolves a specific configuration value from priority sources:
+ * 1. LocalStorage (Dev overrides)
+ * 2. Component Props
+ * 3. Window Global (__JHITS_PLUGIN_PROPS__)
+ * 4. Default Value
+ */
+export function resolveConfigValue(key, propValue, defaultValue, pluginKey = 'plugin-newsletter') {
+    if (typeof window === 'undefined')
+        return propValue ?? defaultValue;
+    // 1. Check LocalStorage (Dev priority)
+    try {
+        const saved = localStorage.getItem(`__JHITS_PLUGIN_NEWSLETTER_CONFIG__`);
+        if (saved) {
+            const config = JSON.parse(saved);
+            if (config[key] !== undefined)
+                return config[key];
+        }
+    }
+    catch (e) { }
+    // 2. Check Props
+    if (propValue !== undefined)
+        return propValue;
+    // 3. Check Window Global
+    const globalProps = window.__JHITS_PLUGIN_PROPS__?.[pluginKey] || window.__JHITS_PLUGIN_PROPS__?.['newsletter'];
+    if (globalProps && globalProps[key] !== undefined)
+        return globalProps[key];
+    // 4. Default
+    return defaultValue;
+}
+/**
+ * Resolves all plugin configuration
+ */
+export function resolvePluginConfig(props) {
+    return {
+        customBlocks: resolveConfigValue('customBlocks', props.customBlocks, []),
+        darkMode: resolveConfigValue('darkMode', props.darkMode, true),
+        backgroundColors: resolveConfigValue('backgroundColors', props.backgroundColors, undefined),
+        translations: resolveConfigValue('translations', props.translations, undefined),
+        unsubscribeTranslations: resolveConfigValue('unsubscribeTranslations', props.unsubscribeTranslations, undefined),
+        emailConfig: resolveConfigValue('emailConfig', props.emailConfig, undefined),
+    };
+}

package/dist/registry/BlockRegistry.d.ts

@@ -5,9 +5,10 @@
  *
  * The registry is a singleton that starts empty and is populated by client apps
  */
-import { BlockTypeDefinition } from '../types/block';
+import { BlockTypeDefinition, ClientBlockDefinition } from '../types/block';
 interface IBlockRegistry {
     register(definition: BlockTypeDefinition): void;
+    registerClientBlocks(definitions: ClientBlockDefinition[]): void;
     get(type: string): BlockTypeDefinition | undefined;
     getAll(): BlockTypeDefinition[];
     has(type: string): boolean;
@@ -19,7 +20,14 @@ interface IBlockRegistry {
  */
 declare class BlockRegistryImpl implements IBlockRegistry {
     private blocks;
+    constructor();
+    private registerDefaultBlocks;
     register(definition: BlockTypeDefinition): void;
+    /**
+     * Register multiple client blocks at once
+     * This is the primary method for client applications to register their blocks
+     */
+    registerClientBlocks(definitions: ClientBlockDefinition[]): void;
     get(type: string): BlockTypeDefinition | undefined;
     getAll(): BlockTypeDefinition[];
     has(type: string): boolean;

package/dist/registry/BlockRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockRegistry.d.ts","sourceRoot":"","sources":["../../src/registry/BlockRegistry.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACH,mBAAmB,EAEtB,MAAM,gBAAgB,CAAC;AAGxB,UAAU,cAAc;IACpB,QAAQ,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAChD,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAAC;IACnD,MAAM,IAAI,mBAAmB,EAAE,CAAC;IAChC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,cAAM,iBAAkB,YAAW,cAAc;IAC7C,OAAO,CAAC,MAAM,CAA+C;IAE7D,QAAQ,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI;IAI/C,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS;IAIlD,MAAM,IAAI,mBAAmB,EAAE;IAI/B,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAI1B,KAAK,IAAI,IAAI;CAGhB;AAGD,eAAO,MAAM,aAAa,mBAA0B,CAAC;AACrD,eAAO,MAAM,aAAa,mBAAgB,CAAC"}
+{"version":3,"file":"BlockRegistry.d.ts","sourceRoot":"","sources":["../../src/registry/BlockRegistry.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EACH,mBAAmB,EACnB,qBAAqB,EAGxB,MAAM,gBAAgB,CAAC;AAwGxB,UAAU,cAAc;IACpB,QAAQ,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAChD,oBAAoB,CAAC,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAI,CAAC;IACjE,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAAC;IACnD,MAAM,IAAI,mBAAmB,EAAE,CAAC;IAChC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,cAAM,iBAAkB,YAAW,cAAc;IAC7C,OAAO,CAAC,MAAM,CAA+C;;IAO7D,OAAO,CAAC,qBAAqB;IAkD7B,QAAQ,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI;IAY/C;;;OAGG;IACH,oBAAoB,CAAC,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAsBhE,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS;IAWlD,MAAM,IAAI,mBAAmB,EAAE;IAI/B,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAI1B,KAAK,IAAI,IAAI;CAIhB;AAGD,eAAO,MAAM,aAAa,mBAA0B,CAAC;AACrD,eAAO,MAAM,aAAa,mBAAgB,CAAC"}