@jhits/plugin-newsletter 0.0.4 → 0.0.6

package/dist/views/CanvasEditor/components/EditorLibrary.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Library, Image as ImageIcon, LayoutTemplate, Type, Box } from 'lucide-react';
+import { LibraryItem, CustomBlockItem } from './index';
+export function EditorLibrary({ registeredBlocks, onAddBlock }) {
+    // Get all registered blocks (excluding Hero block for newsletters)
+    const allBlocks = registeredBlocks.filter(block => block.type !== 'hero');
+    const textBlocks = allBlocks.filter(block => block.category === 'text');
+    const customBlocks = allBlocks.filter(block => block.category === 'custom');
+    const mediaBlocks = allBlocks.filter(block => block.category === 'media');
+    const layoutBlocks = allBlocks.filter(block => block.category === 'layout');
+    return (_jsxs("div", { className: "p-6 w-72 min-w-0 max-w-full", children: [textBlocks.length > 0 && (_jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6", children: "Text" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: textBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || Type;
+                            return (_jsx(LibraryItem, { icon: _jsx(IconComponent, { size: 16 }), label: block.name, blockType: block.type, description: block.description, onAddBlock: onAddBlock }, block.type));
+                        }) })] })), mediaBlocks.length > 0 && (_jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6", children: "Media" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: mediaBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || ImageIcon;
+                            return (_jsx(LibraryItem, { icon: _jsx(IconComponent, { size: 16 }), label: block.name, blockType: block.type, description: block.description, onAddBlock: onAddBlock }, block.type));
+                        }) })] })), layoutBlocks.length > 0 && (_jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6", children: "Layout" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: layoutBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || LayoutTemplate;
+                            return (_jsx(LibraryItem, { icon: _jsx(IconComponent, { size: 16 }), label: block.name, blockType: block.type, description: block.description, onAddBlock: onAddBlock }, block.type));
+                        }) })] })), customBlocks.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6", children: "Custom Blocks" }), _jsx("div", { className: "space-y-3", children: customBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || Box;
+                            return (_jsx(CustomBlockItem, { blockType: block.type, name: block.name, description: block.description, icon: _jsx(IconComponent, { size: 16 }), onAddBlock: onAddBlock }, block.type));
+                        }) })] })), allBlocks.length === 0 && (_jsxs("div", { className: "text-center py-12 text-neutral-400 dark:text-neutral-500", children: [_jsx(Library, { size: 32, className: "mx-auto mb-4 opacity-50" }), _jsx("p", { className: "text-sm", children: "No blocks available" }), _jsx("p", { className: "text-xs mt-2", children: "Register blocks in your app configuration" })] }))] }));
+}

package/dist/views/CanvasEditor/components/EditorSidebar.d.ts

@@ -0,0 +1,9 @@
+import type { NewsletterMetadata } from '../../../types/newsletter';
+export interface EditorSidebarProps {
+    slug: string;
+    metadata: NewsletterMetadata;
+    status: string;
+    onMetadataUpdate: (metadata: Partial<NewsletterMetadata>) => void;
+}
+export declare function EditorSidebar({ slug, metadata, status, onMetadataUpdate, }: EditorSidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorSidebar.d.ts.map

package/dist/views/CanvasEditor/components/EditorSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSidebar.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorSidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;CACrE;AAED,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,gBAAgB,GACnB,EAAE,kBAAkB,2CAyIpB"}

package/dist/views/CanvasEditor/components/EditorSidebar.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mail, Users } from 'lucide-react';
+export function EditorSidebar({ slug, metadata, status, onMetadataUpdate, }) {
+    return (_jsxs("div", { className: "p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full", children: [_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Mail, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Newsletter Settings" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Email Subject" }), _jsx("input", { type: "text", value: metadata.subject || '', onChange: (e) => onMetadataUpdate({ subject: e.target.value }), placeholder: "Enter email subject", className: "w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text" }), _jsxs("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-1", children: [metadata.subject?.length || 0, " / 100 characters"] })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Preview Text" }), _jsx("textarea", { value: metadata.previewText || '', onChange: (e) => onMetadataUpdate({ previewText: e.target.value }), placeholder: "Preview text shown in email clients", rows: 3, className: "w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text resize-none" }), _jsxs("p", { className: "text-[9px] text-neutral-400 dark:text-neutral-500 mt-1", children: [metadata.previewText?.length || 0, " / 150 characters"] })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Language" }), _jsxs("select", { value: metadata.lang || 'en', onChange: (e) => onMetadataUpdate({ lang: e.target.value }), className: "w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text", children: [_jsx("option", { value: "en", children: "English" }), _jsx("option", { value: "nl", children: "Dutch" }), _jsx("option", { value: "sv", children: "Swedish" })] })] })] })] }), _jsxs("section", { className: "pt-8 border-t border-neutral-200 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Users, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Recipients" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Filter Type" }), _jsxs("select", { value: metadata.recipientFilter?.type || 'all', onChange: (e) => onMetadataUpdate({
+                                            recipientFilter: {
+                                                type: e.target.value,
+                                                value: metadata.recipientFilter?.value,
+                                            }
+                                        }), className: "w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text", children: [_jsx("option", { value: "all", children: "All Subscribers" }), _jsx("option", { value: "language", children: "By Language" }), _jsx("option", { value: "custom", children: "Custom Filter" })] })] }), metadata.recipientFilter?.type === 'language' && (_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Language" }), _jsxs("select", { value: metadata.recipientFilter?.value || 'en', onChange: (e) => onMetadataUpdate({
+                                            recipientFilter: {
+                                                type: 'language',
+                                                value: e.target.value,
+                                            }
+                                        }), className: "w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text", children: [_jsx("option", { value: "en", children: "English" }), _jsx("option", { value: "nl", children: "Dutch" }), _jsx("option", { value: "sv", children: "Swedish" })] })] }))] })] }), _jsx("section", { className: "pt-8 border-t border-neutral-200 dark:border-neutral-800", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Slug" }), _jsx("input", { type: "text", value: slug, readOnly: true, className: "w-full px-3 py-2 text-xs bg-dashboard-bg border border-dashboard-border rounded-lg text-dashboard-text opacity-60 cursor-not-allowed" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2", children: "Status" }), _jsx("div", { className: "px-3 py-2 text-xs bg-dashboard-bg border border-dashboard-border rounded-lg", children: _jsx("span", { className: "uppercase font-bold", children: status }) })] })] }) })] }));
+}

package/dist/views/CanvasEditor/components/ErrorBanner.d.ts

@@ -0,0 +1,6 @@
+export interface ErrorBannerProps {
+    error: string | null;
+    onDismiss: () => void;
+}
+export declare function ErrorBanner({ error, onDismiss }: ErrorBannerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ErrorBanner.d.ts.map

package/dist/views/CanvasEditor/components/ErrorBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBanner.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/ErrorBanner.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,kDAoBjE"}

package/dist/views/CanvasEditor/components/ErrorBanner.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, X } from 'lucide-react';
+export function ErrorBanner({ error, onDismiss }) {
+    if (!error)
+        return null;
+    return (_jsxs("div", { className: "bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [_jsx(AlertTriangle, { className: "text-red-600 dark:text-red-400 flex-shrink-0", size: 20 }), _jsx("p", { className: "text-red-800 dark:text-red-300 text-sm font-medium", children: error })] }), _jsx("button", { onClick: onDismiss, className: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors", "aria-label": "Dismiss error", children: _jsx(X, { size: 18 }) })] }));
+}

package/dist/views/CanvasEditor/components/LibraryItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface LibraryItemProps {
+    icon: React.ReactNode;
+    label: string;
+    blockType: string;
+    description?: string;
+    onAddBlock?: (blockType: string) => void;
+}
+export declare function LibraryItem({ icon, label, blockType, description, onAddBlock }: LibraryItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LibraryItem.d.ts.map

package/dist/views/CanvasEditor/components/LibraryItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LibraryItem.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/LibraryItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACb,EAAE,gBAAgB,2CAoDlB"}

package/dist/views/CanvasEditor/components/LibraryItem.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef } from 'react';
+export function LibraryItem({ icon, label, blockType, description, onAddBlock }) {
+    const [hasDragged, setHasDragged] = useState(false);
+    const mouseDownRef = useRef(null);
+    const handleDragStart = (e) => {
+        e.dataTransfer.setData('block-type', blockType);
+        e.dataTransfer.effectAllowed = 'move';
+        setHasDragged(true);
+    };
+    const handleMouseDown = (e) => {
+        mouseDownRef.current = { x: e.clientX, y: e.clientY };
+        setHasDragged(false);
+    };
+    const handleMouseMove = (e) => {
+        if (mouseDownRef.current) {
+            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
+            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
+            if (dx > 5 || dy > 5) {
+                setHasDragged(true);
+            }
+        }
+    };
+    const handleClick = (e) => {
+        if (!hasDragged && onAddBlock) {
+            e.preventDefault();
+            e.stopPropagation();
+            onAddBlock(blockType);
+        }
+        mouseDownRef.current = null;
+        setTimeout(() => setHasDragged(false), 100);
+    };
+    return (_jsxs("div", { draggable: true, onDragStart: handleDragStart, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onClick: handleClick, className: "flex flex-col items-center justify-center p-5 rounded-2xl border border-dashboard-border bg-dashboard-card hover:border-primary hover:shadow-xl hover:shadow-primary/5 transition-all cursor-pointer group", children: [_jsx("div", { className: "text-neutral-400 dark:text-neutral-500 group-hover:text-primary dark:group-hover:text-primary mb-3 transition-colors duration-300", children: React.cloneElement(icon, { strokeWidth: 1.5 }) }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.15em] text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors", children: label })] }));
+}

package/dist/views/CanvasEditor/components/SlashCommandDetector.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { useSlashCommand } from '../hooks/useSlashCommand';
+export interface SlashCommandDetectorProps {
+    children: React.ReactElement;
+    blockId: string;
+    blockIndex: number;
+    blockType: string;
+    content: string;
+    onContentChange: (content: string) => void;
+    slashCommand?: ReturnType<typeof useSlashCommand>;
+    onAddBlockBelow?: (blockType: string) => void;
+}
+/**
+ * Detects "/" input and shows slash command menu
+ * Wraps block edit components to add slash command functionality
+ */
+export declare function SlashCommandDetector({ children, blockId, blockIndex, blockType, content, onContentChange, slashCommand, onAddBlockBelow, }: SlashCommandDetectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SlashCommandDetector.d.ts.map

package/dist/views/CanvasEditor/components/SlashCommandDetector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashCommandDetector.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/SlashCommandDetector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,WAAW,yBAAyB;IACtC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,OAAO,EACP,eAAe,EACf,YAAY,EACZ,eAAe,GAClB,EAAE,yBAAyB,2CAsK3B"}

package/dist/views/CanvasEditor/components/SlashCommandDetector.js

@@ -0,0 +1,164 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+/**
+ * Detects "/" input and shows slash command menu
+ * Wraps block edit components to add slash command functionality
+ */
+export function SlashCommandDetector({ children, blockId, blockIndex, blockType, content, onContentChange, slashCommand, onAddBlockBelow, }) {
+    const containerRef = useRef(null);
+    const lastContentRef = useRef('');
+    const slashIndexRef = useRef(-1);
+    // Listen for input events on contentEditable elements
+    useEffect(() => {
+        if (!slashCommand || blockType !== 'paragraph')
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleInput = (e) => {
+            const target = e.target;
+            if (!target.isContentEditable)
+                return;
+            const textContent = target.textContent || '';
+            const plainText = textContent.replace(/\u00A0/g, ' '); // Replace non-breaking spaces
+            const previousText = (lastContentRef.current || '').replace(/\u00A0/g, ' ');
+            // Only allow "/" when paragraph is completely empty (no content before "/")
+            const wasEmpty = previousText.trim().length === 0;
+            const isNowEmpty = plainText.trim().length === 0;
+            if (plainText.length > previousText.length) {
+                // Character was added
+                const lastChar = plainText[plainText.length - 1];
+                // Check if "/" was typed and paragraph was empty before
+                if (lastChar === '/' && wasEmpty && plainText === '/') {
+                    slashIndexRef.current = 0;
+                    // Get cursor position
+                    const selection = window.getSelection();
+                    if (selection && selection.rangeCount > 0) {
+                        const range = selection.getRangeAt(0);
+                        const rect = range.getBoundingClientRect();
+                        slashCommand.openMenu({
+                            top: rect.bottom + 5,
+                            left: rect.left,
+                        }, blockId);
+                    }
+                }
+                else if (slashCommand.isOpen && slashIndexRef.current >= 0) {
+                    // Update query if menu is open (only if still starts with "/")
+                    if (plainText.startsWith('/')) {
+                        const query = plainText.slice(1);
+                        slashCommand.updateQuery(query);
+                    }
+                    else {
+                        // If user typed something other than "/", close the menu
+                        slashCommand.closeMenu();
+                        slashIndexRef.current = -1;
+                    }
+                }
+                else if (!wasEmpty || (plainText.trim().length > 0 && plainText !== '/')) {
+                    // If paragraph had content before or now has content that's not just "/", ensure menu is closed
+                    if (slashCommand.isOpen) {
+                        slashCommand.closeMenu();
+                        slashIndexRef.current = -1;
+                    }
+                }
+            }
+            else if (plainText.length < previousText.length) {
+                // Content was deleted
+                if (slashCommand.isOpen) {
+                    if (plainText === '/') {
+                        // Still just "/", keep menu open
+                        slashIndexRef.current = 0;
+                    }
+                    else {
+                        // No longer just "/", close menu
+                        slashCommand.closeMenu();
+                        slashIndexRef.current = -1;
+                    }
+                }
+            }
+            lastContentRef.current = textContent; // Store original with non-breaking spaces
+        };
+        // Listen for input events on contentEditable elements within container
+        container.addEventListener('input', handleInput);
+        return () => {
+            container.removeEventListener('input', handleInput);
+        };
+    }, [blockType, slashCommand, blockId]);
+    // Handle keyboard events for slash command and Enter key
+    const handleKeyDown = useCallback((e) => {
+        // Handle Enter key to create new paragraph when not in slash command mode
+        if (!slashCommand?.isOpen && e.key === 'Enter' && !e.shiftKey) {
+            const container = containerRef.current;
+            if (container) {
+                const contentEditable = container.querySelector('[contenteditable="true"]');
+                if (contentEditable && document.activeElement === contentEditable) {
+                    const selection = window.getSelection();
+                    if (selection && selection.rangeCount > 0) {
+                        const range = selection.getRangeAt(0);
+                        const textContent = contentEditable.textContent || '';
+                        const plainText = textContent.replace(/\u00A0/g, ' ');
+                        // Check if cursor is at the end of the content
+                        if (range.startOffset === plainText.length && range.endOffset === plainText.length) {
+                            // Create new paragraph below when Enter is pressed at end
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (onAddBlockBelow) {
+                                onAddBlockBelow('paragraph');
+                            }
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+        if (!slashCommand?.isOpen)
+            return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            slashCommand.moveSelection('down');
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            slashCommand.moveSelection('up');
+        }
+        else if (e.key === 'Enter' || e.key === 'Tab') {
+            e.preventDefault();
+            e.stopPropagation();
+            const selectedBlock = slashCommand.filteredBlocks[slashCommand.selectedIndex];
+            if (selectedBlock) {
+                // Don't clear content here - the block replacement will handle it
+                // Just replace the block with selected type (this will replace the current paragraph)
+                slashCommand.selectCurrent(blockId);
+            }
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            // Clear the "/" from content - only clear if menu was open
+            if (slashCommand.isOpen) {
+                const container = containerRef.current;
+                if (container) {
+                    const contentEditable = container.querySelector('[contenteditable="true"]');
+                    if (contentEditable) {
+                        const textContent = contentEditable.textContent || '';
+                        const plainText = textContent.replace(/\u00A0/g, ' ');
+                        // Only clear if it's just "/"
+                        if (plainText === '/') {
+                            contentEditable.textContent = '';
+                            onContentChange('');
+                        }
+                    }
+                }
+            }
+            slashCommand.closeMenu();
+            slashIndexRef.current = -1;
+        }
+    }, [slashCommand, content, onContentChange, blockId, onAddBlockBelow]);
+    useEffect(() => {
+        // Always listen for keydown events (for both slash command and Enter key handling)
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown]);
+    return (_jsx("div", { ref: containerRef, children: children }));
+}

package/dist/views/CanvasEditor/components/SlashCommandMenu.d.ts

@@ -0,0 +1,22 @@
+import type { BlockTypeDefinition } from '../../../types/block';
+export interface SlashCommandMenuProps {
+    /** Registered blocks to show in menu */
+    blocks: BlockTypeDefinition[];
+    /** Current search query */
+    query: string;
+    /** Selected index */
+    selectedIndex: number;
+    /** Callback when a block is selected - receives replaceBlockId if replacing */
+    onSelect: (replaceBlockId?: string) => void;
+    /** Position for the menu */
+    position: {
+        top: number;
+        left: number;
+    } | null;
+    /** Callback to close the menu */
+    onClose: () => void;
+    /** Block ID to replace (if replacing existing block) */
+    replaceBlockId?: string;
+}
+export declare function SlashCommandMenu({ blocks, query, selectedIndex, onSelect, position, onClose, replaceBlockId, }: SlashCommandMenuProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SlashCommandMenu.d.ts.map

package/dist/views/CanvasEditor/components/SlashCommandMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashCommandMenu.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/SlashCommandMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IAClC,wCAAwC;IACxC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4BAA4B;IAC5B,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC/C,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,cAAc,GACjB,EAAE,qBAAqB,kDAmGvB"}

package/dist/views/CanvasEditor/components/SlashCommandMenu.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Search } from 'lucide-react';
+export function SlashCommandMenu({ blocks, query, selectedIndex, onSelect, position, onClose, replaceBlockId, }) {
+    const menuRef = useRef(null);
+    // Handle keyboard navigation
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                // Selection is handled by parent
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                // Selection is handled by parent
+            }
+            else if (e.key === 'Enter' || e.key === 'Tab') {
+                e.preventDefault();
+                if (blocks[selectedIndex]) {
+                    onSelect(replaceBlockId);
+                }
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [blocks, selectedIndex, onSelect, onClose, replaceBlockId]);
+    // Scroll selected item into view
+    useEffect(() => {
+        if (menuRef.current && selectedIndex >= 0) {
+            const selectedElement = menuRef.current.children[selectedIndex];
+            if (selectedElement) {
+                selectedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }
+    }, [selectedIndex]);
+    if (!position || blocks.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { ref: menuRef, className: "fixed z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-2xl overflow-hidden", style: {
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            width: '280px',
+            maxHeight: '320px',
+            overflowY: 'auto',
+        }, children: [_jsxs("div", { className: "p-2 border-b border-neutral-200 dark:border-neutral-700 flex items-center gap-2", children: [_jsx(Search, { size: 14, className: "text-neutral-400" }), _jsx("input", { type: "text", value: query, readOnly: true, placeholder: "Search blocks...", className: "flex-1 bg-transparent border-none outline-none text-sm text-neutral-600 dark:text-neutral-300 placeholder:text-neutral-400" })] }), _jsx("div", { className: "py-1", children: blocks.map((block, index) => {
+                    const IconComponent = block.icon || block.components.Icon;
+                    const isSelected = index === selectedIndex;
+                    return (_jsxs("button", { onClick: () => onSelect(replaceBlockId), className: `w-full px-3 py-2 flex items-center gap-3 text-left transition-colors ${isSelected
+                            ? 'bg-primary/10 text-primary dark:bg-primary/20'
+                            : 'hover:bg-neutral-100 dark:hover:bg-neutral-700 text-neutral-700 dark:text-neutral-300'}`, children: [IconComponent && (_jsx("div", { className: `flex-shrink-0 ${isSelected ? 'text-primary' : 'text-neutral-400'}`, children: _jsx(IconComponent, {}) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: `text-sm font-medium ${isSelected ? 'text-primary' : 'text-neutral-900 dark:text-neutral-100'}`, children: block.name }), block.description && (_jsx("div", { className: "text-xs text-neutral-500 dark:text-neutral-400 truncate", children: block.description }))] })] }, block.type));
+                }) })] }));
+}

package/dist/views/CanvasEditor/components/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Newsletter Editor Components Exports
+ */
+export { ErrorBanner } from './ErrorBanner';
+export type { ErrorBannerProps } from './ErrorBanner';
+export { LibraryItem } from './LibraryItem';
+export type { LibraryItemProps } from './LibraryItem';
+export { CustomBlockItem } from './CustomBlockItem';
+export type { CustomBlockItemProps } from './CustomBlockItem';
+export { EditorLibrary } from './EditorLibrary';
+export type { EditorLibraryProps } from './EditorLibrary';
+export { EditorCanvas } from './EditorCanvas';
+export type { EditorCanvasProps } from './EditorCanvas';
+export { EditorSidebar } from './EditorSidebar';
+export type { EditorSidebarProps } from './EditorSidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/CanvasEditor/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/views/CanvasEditor/components/index.js

@@ -0,0 +1,9 @@
+/**
+ * Newsletter Editor Components Exports
+ */
+export { ErrorBanner } from './ErrorBanner';
+export { LibraryItem } from './LibraryItem';
+export { CustomBlockItem } from './CustomBlockItem';
+export { EditorLibrary } from './EditorLibrary';
+export { EditorCanvas } from './EditorCanvas';
+export { EditorSidebar } from './EditorSidebar';

package/dist/views/CanvasEditor/hooks/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Newsletter Editor Hooks
+ */
+export { useRegisteredBlocks } from './useRegisteredBlocks';
+export { useNewsletterLoader } from './useNewsletterLoader';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/CanvasEditor/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/views/CanvasEditor/hooks/index.js

@@ -0,0 +1,6 @@
+/**
+ * Newsletter Editor Hooks
+ */
+export { useRegisteredBlocks } from './useRegisteredBlocks';
+export { useNewsletterLoader } from './useNewsletterLoader';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';

package/dist/views/CanvasEditor/hooks/useKeyboardShortcuts.d.ts

@@ -0,0 +1,3 @@
+import type { EditorState } from '../../../state/types';
+export declare function useKeyboardShortcuts(state: EditorState, dispatch: (action: any) => void, canUndo: boolean, canRedo: boolean, undo: () => void, redo: () => void): void;
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

package/dist/views/CanvasEditor/hooks/useKeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAUxD,wBAAgB,oBAAoB,CAChC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,EAC/B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,IAAI,EAChB,IAAI,EAAE,MAAM,IAAI,QAqHnB"}

package/dist/views/CanvasEditor/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+// Generate a unique block ID
+function generateBlockId() {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+export function useKeyboardShortcuts(state, dispatch, canUndo, canRedo, undo, redo) {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Don't handle shortcuts if user is typing in an input/textarea/contentEditable
+            const target = e.target;
+            const isEditableElement = target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable ||
+                target.closest('input, textarea, [contenteditable="true"]');
+            // Check for Ctrl+Z / Cmd+Z (Undo)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canUndo) {
+                        undo();
+                    }
+                    return;
+                }
+            }
+            // Check for Ctrl+Shift+Z / Cmd+Shift+Z or Ctrl+Y / Cmd+Y (Redo)
+            if (((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') || ((e.ctrlKey || e.metaKey) && e.key === 'y')) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canRedo) {
+                        redo();
+                    }
+                    return;
+                }
+            }
+            // Check for Ctrl+V (Windows/Linux) or Cmd+V (Mac)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+                // Don't paste if user is typing in an input/textarea/contentEditable
+                if (isEditableElement) {
+                    return; // Let the browser handle paste in editable elements
+                }
+                // Check if there's a copied block
+                if (typeof window !== 'undefined') {
+                    const copiedBlockJson = localStorage.getItem('__NEWSLETTER_EDITOR_COPIED_BLOCK__');
+                    if (copiedBlockJson) {
+                        try {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const copiedBlock = JSON.parse(copiedBlockJson);
+                            // Clone a block with new IDs (recursive for nested blocks)
+                            const cloneBlock = (blockToClone) => {
+                                const cloned = {
+                                    ...blockToClone,
+                                    id: generateBlockId(),
+                                    data: { ...blockToClone.data },
+                                    meta: blockToClone.meta ? { ...blockToClone.meta } : undefined,
+                                };
+                                // Handle children if they exist
+                                if (blockToClone.children) {
+                                    if (Array.isArray(blockToClone.children) && blockToClone.children.length > 0) {
+                                        if (typeof blockToClone.children[0] === 'object') {
+                                            cloned.children = blockToClone.children.map(cloneBlock);
+                                        }
+                                        else {
+                                            // If children are IDs, find and clone the actual blocks
+                                            const allBlocks = state.blocks;
+                                            const childIds = blockToClone.children;
+                                            const childBlocks = childIds
+                                                .map((childId) => allBlocks.find(b => b.id === childId))
+                                                .filter((b) => b !== undefined);
+                                            cloned.children = childBlocks.map(cloneBlock);
+                                        }
+                                    }
+                                }
+                                return cloned;
+                            };
+                            const pastedBlock = cloneBlock(copiedBlock);
+                            // Find where to paste - use hovered block or selected block, or paste at end
+                            const hoveredBlockId = window.__NEWSLETTER_EDITOR_HOVERED_BLOCK_ID__;
+                            const targetBlockId = hoveredBlockId || state.selectedBlockId;
+                            let pasteIndex;
+                            if (targetBlockId) {
+                                const targetIndex = state.blocks.findIndex(b => b.id === targetBlockId);
+                                if (targetIndex !== -1) {
+                                    pasteIndex = targetIndex + 1;
+                                }
+                            }
+                            // Dispatch ADD_BLOCK with the full block structure
+                            dispatch({
+                                type: 'ADD_BLOCK',
+                                payload: {
+                                    block: pastedBlock,
+                                    index: pasteIndex,
+                                    containerId: undefined
+                                }
+                            });
+                        }
+                        catch (error) {
+                            console.error('Failed to paste block:', error);
+                        }
+                    }
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [state.blocks, state.selectedBlockId, dispatch, canUndo, canRedo, undo, redo]);
+}

package/dist/views/CanvasEditor/hooks/useNewsletterLoader.d.ts

@@ -0,0 +1,5 @@
+import { Newsletter } from '../../../types/newsletter';
+export declare function useNewsletterLoader(newsletterSlug: string | undefined, currentNewsletterId: string | null, loadNewsletter: (newsletter: Newsletter) => void): {
+    isLoadingNewsletter: boolean;
+};
+//# sourceMappingURL=useNewsletterLoader.d.ts.map

package/dist/views/CanvasEditor/hooks/useNewsletterLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNewsletterLoader.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useNewsletterLoader.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,wBAAgB,mBAAmB,CAC/B,cAAc,EAAE,MAAM,GAAG,SAAS,EAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,cAAc,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI;;EA2BnD"}