create-nextblock 0.2.46 → 0.2.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/cms/blocks/components/BlockEditorModal.tsx

@@ -5,10 +5,8 @@ import { cn } from "@nextblock-cms/utils";
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
-  DialogFooter,
-  DialogDescription,
+  DialogClose,
 } from "@nextblock-cms/ui";
 import { Button } from "@nextblock-cms/ui";
 import { blockRegistry, type BlockType } from "@/lib/blocks/blockRegistry";
@@ -26,6 +24,8 @@ export type BlockEditorProps<T = unknown> = {
   block: Block<T>;
   content: T;
   onChange: (newContent: T) => void;
+  className?: string; // Added for editor component styling
+  sectionBackground?: import("@/lib/blocks/blockRegistry").SectionBlockContent['background'];
 };
 
 type BlockEditorModalProps = {
@@ -34,6 +34,7 @@ type BlockEditorModalProps = {
   onClose: () => void;
   onSave: (updatedContent: unknown) => void;
   EditorComponent: LazyExoticComponent<ComponentType<BlockEditorProps<unknown>>> | ComponentType<BlockEditorProps<unknown>>;
+  sectionBackground?: import("@/lib/blocks/blockRegistry").SectionBlockContent['background'];
 };
 
 export function BlockEditorModal({
@@ -42,8 +43,10 @@ export function BlockEditorModal({
   onClose,
   onSave,
   EditorComponent,
+  sectionBackground,
 }: BlockEditorModalProps) {
   const [tempContent, setTempContent] = useState(block.content);
+  const isValid = true; // Placeholder for future validation logic
 
   useEffect(() => {
     // When the modal is opened with a new block, reset the temp content
@@ -56,42 +59,78 @@ export function BlockEditorModal({
     onSave(tempContent);
   };
 
+  const handleContentChange = (newContent: unknown) => {
+    setTempContent(newContent);
+    // Potentially add validation here and set isValid
+  };
+
   const blockInfo = blockRegistry[block.type];
+  const displayText = blockInfo?.label || "Block";
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent
-        className={cn(
-          "w-[90%] max-w-7xl max-h-[90vh]",
-          {
-            // For rich text editor, use fixed height and internal scroll so footer stays visible
-            "h-[90vh] flex flex-col": block.type === "text",
-            // For other blocks, allow the modal itself to scroll if content exceeds viewport
-            "overflow-y-auto": block.type !== "text",
-          }
-        )}
+      <DialogContent 
+        className="max-w-6xl h-[90vh] flex flex-col p-0 gap-0 overflow-hidden"
+        onInteractOutside={(e) => {
+          // Prevent closing when interacting with Tiptap bubbles outside the dialog portal (rare but possible)
+        }}
       >
-        <DialogHeader>
-          <DialogTitle>Editing {blockInfo?.label || "Block"}</DialogTitle>
-          <DialogDescription>
-            Make changes to your block here. Click save when you&apos;re done.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="py-4 flex-grow flex flex-col min-h-0">
-          <Suspense fallback={<div className="flex justify-center items-center h-32">Loading editor...</div>}>
-            <EditorComponent
-              block={block}
-              content={tempContent}
-              onChange={setTempContent}
-            />
-          </Suspense>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave}>Save</Button>
-        </DialogFooter>
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b bg-background/95 backdrop-blur z-10">
+              <div className="flex items-center gap-2">
+                 <DialogTitle className="text-lg font-semibold">Edit {displayText}</DialogTitle>
+              </div>
+               <div className="flex items-center gap-2">
+                  <DialogClose asChild>
+                    <Button variant="ghost" size="sm">Cancel</Button>
+                  </DialogClose>
+                  <Button onClick={handleSave} disabled={!isValid} size="sm">
+                    Save (CMD+S)
+                  </Button>
+               </div>
+          </div>
+
+          {/* Editor Area with Contextual Background */}
+          <div 
+            className={cn(
+                "flex-1 overflow-y-auto p-6",
+                // Conditional Background Logic:
+                // Only apply specific section background to 'text' and 'heading' blocks to allow "Live Preview" of copy.
+                // For complex blocks like Forms, Buttons, etc., keep a neutral background to ensure input field contrast.
+                (block.type === 'text' || block.type === 'heading') ? (
+                   // If no specific background, use white/dark default
+                   (!sectionBackground || sectionBackground.type === 'none') && "bg-muted/10"
+                ) : "bg-muted/10", // Default for non-text blocks
+
+                // Apply theme classes if present (ONLY for text/heading)
+                (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'theme' && sectionBackground.theme === 'primary' && 'bg-primary text-primary-foreground',
+                (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'theme' && sectionBackground.theme === 'secondary' && 'bg-secondary text-secondary-foreground',
+                (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'theme' && sectionBackground.theme === 'muted' && 'bg-muted text-muted-foreground',
+                
+                 // Dark mode prose invert if dark background (approximate check for solid color)
+                (block.type === 'text' || block.type === 'heading') && (sectionBackground?.type === 'solid' && sectionBackground.solid_color && ['#000', '#111', '#0f172a', 'black'].some(c => sectionBackground.solid_color?.includes(c))) && "[&_.prose]:prose-invert"
+            )}
+            style={{
+                // Only apply custom color/gradient styles for text/heading
+                backgroundColor: (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'solid' ? sectionBackground.solid_color : undefined,
+                backgroundImage: (block.type === 'text' || block.type === 'heading') && sectionBackground?.type === 'gradient' && sectionBackground.gradient ? 
+                  `${sectionBackground.gradient.type}-gradient(${sectionBackground.gradient.direction}, ${sectionBackground.gradient.stops.map(s => `${s.color} ${s.position}%`).join(', ')})` 
+                  : undefined
+            }}
+          >
+             <div className="max-w-6xl mx-auto">
+                <Suspense fallback={<div className="flex justify-center items-center h-32">Loading editor...</div>}>
+                  <EditorComponent 
+                      block={block}
+                      content={tempContent} 
+                      onChange={handleContentChange} 
+                      className="bg-transparent border-none shadow-none focus-within:ring-0 min-h-[60vh]" // Make editor transparent
+                      sectionBackground={sectionBackground} // Pass down if editor supports it
+                  />
+                </Suspense>
+             </div>
+          </div>
+          
       </DialogContent>
     </Dialog>
   );

package/templates/nextblock-template/app/cms/blocks/components/ColumnEditor.tsx

@@ -1,10 +1,9 @@
-// app/cms/blocks/components/ColumnEditor.tsx
 "use client";
 
 import React, { useState, lazy } from 'react';
 import { cn } from '@nextblock-cms/utils';
 import { Button } from '@nextblock-cms/ui';
-import { PlusCircle, Trash2, Edit2, GripVertical } from "lucide-react";
+import { PlusCircle, Trash2, Edit2, GripVertical, Image as ImageIcon } from "lucide-react";
 import type { SectionBlockContent } from '@/lib/blocks/blockRegistry';
 import { availableBlockTypes, getBlockDefinition, getInitialContent, BlockType } from '@/lib/blocks/blockRegistry';
 import { useDroppable } from "@dnd-kit/core";
@@ -14,7 +13,6 @@ import { BlockEditorModal } from './BlockEditorModal';
 import { ConfirmationDialog } from '@nextblock-cms/ui';
 import BlockTypeSelector from './BlockTypeSelector';
 
-
 type ColumnBlock = SectionBlockContent['column_blocks'][0][0];
 
 // Sortable block item component for column blocks
@@ -26,9 +24,10 @@ interface SortableColumnBlockProps {
   onDelete: () => void;
   blockType: 'section' | 'hero';
   onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  sectionBackground?: SectionBlockContent['background'];
 }
 
-function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, blockType, onClick }: SortableColumnBlockProps) {
+function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, blockType, onClick, sectionBackground }: SortableColumnBlockProps) {
   const {
     attributes,
     listeners,
@@ -53,8 +52,215 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
     opacity: isDragging ? 0.5 : 1,
   };
 
-  const blockDefinition = getBlockDefinition(block.block_type);
-  const blockLabel = blockDefinition?.label || block.block_type;
+  const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+
+  // Helper to check for dark background
+  const isDarkBackground = React.useMemo(() => {
+    if (!sectionBackground) return false;
+    
+    // Theme checks
+    if (sectionBackground.type === 'theme') {
+       return ['primary', 'secondary', 'destructive', 'accent', 'dark'].includes(sectionBackground.theme || '');
+    }
+
+    // Image & Gradient - Assume Dark (safe default for overlays)
+    if (sectionBackground.type === 'image' || sectionBackground.type === 'gradient') {
+        return true; 
+    }
+    
+    // Solid Color checks
+    if (sectionBackground.type === 'solid' && sectionBackground.solid_color) {
+      const str = sectionBackground.solid_color.trim();
+      let r = 0, g = 0, b = 0;
+      
+      if (str.startsWith('#')) {
+        const hex = str.replace('#', '');
+        if (hex.length === 3) {
+          r = parseInt(hex[0] + hex[0], 16);
+          g = parseInt(hex[1] + hex[1], 16);
+          b = parseInt(hex[2] + hex[2], 16);
+        } else if (hex.length === 6) {
+          r = parseInt(hex.substring(0, 2), 16);
+          g = parseInt(hex.substring(2, 4), 16);
+          b = parseInt(hex.substring(4, 6), 16);
+        } else {
+           return ['black', 'navy', 'darkblue', 'darkgray'].includes(str.toLowerCase());
+        }
+      } else if (str.startsWith('rgb')) {
+        const matches = str.match(/\d+/g);
+        if (matches && matches.length >= 3) {
+          r = parseInt(matches[0]);
+          g = parseInt(matches[1]);
+          b = parseInt(matches[2]);
+        } else {
+           return false;
+        }
+      } else {
+        return ['black', 'navy', 'darkblue', 'darkgray'].includes(str.toLowerCase());
+      }
+      
+      // Calculate luminance (YIQ)
+      const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+      return yiq < 128; // Strict threshold for white text
+    }
+    return false;
+  }, [sectionBackground]);
+
+  // Helper to render content preview
+  const renderContentPreview = () => {
+    switch (block.block_type) {
+      case 'text': {
+        // Basic detection of alignment from HTML content to mirror frontend
+        const isCentered = block.content.html_content?.includes('text-align: center') || block.content.html_content?.includes('class="text-center"');
+        const isRight = block.content.html_content?.includes('text-align: right') || block.content.html_content?.includes('class="text-right"');
+        const alignmentClass = isCentered ? 'text-center' : isRight ? 'text-right' : 'text-left';
+
+        return (
+            <div className="flex gap-3">
+                <div className={cn("text-xs w-full", alignmentClass)}>
+                    {block.content.html_content ? (
+                         <div 
+                           dangerouslySetInnerHTML={{ __html: block.content.html_content }} 
+                           className={cn(
+                             "prose prose-xs max-w-none [&>p]:my-0 [&>h1]:my-0 [&>h2]:my-0 [&>h3]:my-0",
+                             isDarkBackground ? "prose-invert text-white/90 drop-shadow-sm" : "dark:prose-invert",
+                             // Ensure the inner prose content also respects the alignment if not explicitly set on children
+                             isCentered && "[&_*]:text-center",
+                             isRight && "[&_*]:text-right"
+                           )} 
+                         />
+                    ) : <span className={cn("text-muted-foreground", isDarkBackground && "text-white/50")}>Empty text block</span>}
+                </div>
+            </div>
+        );
+      }
+      case 'heading': {
+         const content = block.content as any;
+         const level = content.level || 1;
+         const headingAlign = content.textAlign || 'left';
+         const textColor = content.textColor || 'foreground';
+         
+         const sizeClasses: Record<number, string> = {
+           1: "text-4xl font-extrabold",
+           2: "text-3xl font-bold",
+           3: "text-2xl font-semibold",
+           4: "text-xl font-semibold",
+           5: "text-lg font-semibold",
+           6: "text-base font-semibold",
+         };
+
+         const colorClasses: Record<string, string> = {
+            primary: "text-primary",
+            secondary: "text-secondary",
+            accent: "text-accent",
+            destructive: "text-destructive",
+            muted: "text-muted-foreground",
+            background: "text-background",
+            foreground: "text-foreground"
+         };
+
+         // Override for dark background if color is basic
+         let appliedColorClass = colorClasses[textColor] || "text-foreground";
+         if (isDarkBackground) {
+            if (textColor === 'foreground') appliedColorClass = 'text-white/90';
+            if (textColor === 'muted') appliedColorClass = 'text-white/70';
+         }
+
+         return (
+            <div className="flex gap-3">
+                 <div className={cn(
+                    "w-full leading-tight",
+                    sizeClasses[level] || sizeClasses[1],
+                    appliedColorClass,
+                    headingAlign === 'center' && 'text-center',
+                    headingAlign === 'right' && 'text-right'
+                 )}>
+                    {content.text_content || <span className={cn("text-muted-foreground font-normal text-sm italic", isDarkBackground && "text-white/50")}>Empty heading</span>}
+                 </div>
+            </div>
+         );
+      }
+      case 'image': {
+        const imageUrl = block.content.object_key ? `${R2_BASE_URL}/${block.content.object_key}` : block.content.src;
+        return (
+             <div className="flex gap-3">
+                <div className="flex-shrink-0 h-10 w-10 bg-muted/20 rounded overflow-hidden flex items-center justify-center border border-white/10">
+                    {imageUrl ? (
+                        /* eslint-disable-next-line @next/next/no-img-element */
+                        <img src={imageUrl} alt={block.content.alt_text || 'Block image'} className="h-full w-full object-cover" />
+                    ) : (
+                        <ImageIcon className={cn("h-5 w-5", isDarkBackground ? "text-white/50" : "text-muted-foreground")} />
+                    )}
+                </div>
+                <div className="flex flex-col justify-center">
+                    <span className="text-xs font-medium truncate max-w-[150px]">{block.content.alt_text || 'No description'}</span>
+                     <span className={cn("text-[10px] truncate max-w-[150px]", isDarkBackground ? "text-white/50" : "text-muted-foreground")}>{imageUrl ? 'Image set' : 'No image selected'}</span>
+                </div>
+             </div>
+        );
+      }
+      case 'button': {
+          const content = block.content as any;
+          return (
+              <div className={cn("flex gap-3", 
+                  content.position === 'center' ? 'justify-center' : 
+                  content.position === 'right' ? 'justify-end' : 'justify-start'
+              )}>
+                  <Button 
+                    variant={content.variant || 'default'} 
+                    size={content.size || 'default'}
+                    className={cn("pointer-events-none", block.content.variant === 'outline' && "text-foreground")}
+                    tabIndex={-1}
+                  >
+                      {content.text || 'Button'}
+                  </Button>
+              </div>
+          );
+      }
+       case 'video_embed':
+           return (
+               <div className="flex gap-3 items-center">
+                   <div className="text-xs truncate max-w-[200px]">
+                       {block.content.title || block.content.url || 'No Video URL'}
+                   </div>
+               </div>
+           );
+       case 'posts_grid':
+            return (
+                <div className="flex gap-3 items-center">
+                    <div className={cn("text-xs", isDarkBackground ? "text-white/70" : "text-muted-foreground")}>
+                        Posts Grid: {block.content.columns || 3} cols, {block.content.postsPerPage || 12} items
+                    </div>
+                </div>
+            );
+       case 'testimonial':
+           return (
+               <div className="flex flex-col gap-2">
+                   <div className={cn("italic text-xs line-clamp-2", isDarkBackground ? "text-white/80" : "text-muted-foreground")}>
+                       "{block.content.quote || 'No quote'}"
+                   </div>
+                   <div className="flex items-center gap-2">
+                       {block.content.image_url ? (
+                           /* eslint-disable-next-line @next/next/no-img-element */
+                           <img src={block.content.image_url} alt={block.content.author_name} className="w-5 h-5 rounded-full object-cover border border-white/10" />
+                       ) : (
+                           <div className={cn("w-5 h-5 rounded-full flex items-center justify-center text-[9px] font-bold border border-white/10", isDarkBackground ? "bg-white/20 text-white" : "bg-muted text-foreground")}>
+                               {(block.content.author_name || 'A').charAt(0)}
+                           </div>
+                       )}
+                       <div className="flex flex-col leading-none">
+                           <span className={cn("text-[10px] font-semibold", isDarkBackground ? "text-white" : "text-foreground")}>{block.content.author_name || 'Author Name'}</span>
+                           {block.content.author_title && <span className={cn("text-[9px]", isDarkBackground ? "text-white/60" : "text-muted-foreground")}>{block.content.author_title}</span>}
+                       </div>
+                   </div>
+               </div>
+           );
+      default:
+        // For fallback blocks, we might still want the label if we can't render a preview
+        // But user asked to remove it. Let's show a generic "configured" message or similar.
+        return <div className={cn("text-xs", isDarkBackground ? "text-white/50" : "text-muted-foreground")}>Unknown Block Type</div>;
+    }
+  };
 
   return (
     <div
@@ -64,45 +270,27 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
      {...attributes}
      {...listeners}
      className={cn(
-       "group relative p-2 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 shadow-sm",
-       "cursor-pointer hover:border-primary"
+       "group relative p-3 border border-transparent hover:border-dashed hover:border-primary/50 rounded-lg bg-transparent transition-all",
+       "cursor-pointer",
+       isDarkBackground ? "text-white border-white/20 hover:border-white/50" : "text-foreground border-transparent"
      )}
    >
-     <div className="flex items-center justify-between mb-1">
-       <div className="flex items-center gap-2">
-         <GripVertical className="h-3 w-3 text-gray-400" />
-         <span className="text-xs font-medium text-gray-600 dark:text-gray-300 capitalize">
-           {blockLabel}
-         </span>
-       </div>
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <Button variant="ghost" size="sm" onClick={onEdit} className="h-6 w-6 p-0" title="Edit block">
-            <Edit2 className="h-3 w-3" />
+      {/* Absolute positioning for actions */}
+      <div className="absolute top-2 right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-10 p-1 py-2 hover:bg-gray-500 rounded-lg">
+          <div className="cursor-grab active:cursor-grabbing p-1">
+             <GripVertical className={cn("h-3 w-3", isDarkBackground ? "text-white drop-shadow-md" : "text-foreground/70")} />
+          </div>
+          <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onEdit(); }} className="h-6 w-6 p-0 hover:bg-transparent" title="Edit block">
+            <Edit2 className={cn("h-3 w-3", isDarkBackground ? "text-white drop-shadow-md" : "text-foreground/70")} />
           </Button>
-          <Button variant="ghost" size="sm" onClick={onDelete} className="h-6 w-6 p-0 text-red-600 hover:text-red-700" title="Delete block">
+          <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onDelete(); }} className="h-6 w-6 p-0 text-red-600 hover:text-red-700 hover:bg-transparent" title="Delete block">
             <Trash2 className="h-3 w-3" />
           </Button>
-        </div>
       </div>
-      <div className="text-xs text-gray-500 dark:text-gray-400">
-        {block.block_type === 'text' && (
-          <div dangerouslySetInnerHTML={{ __html: (block.content.html_content || 'Empty text').substring(0, 50) + (block.content.html_content && block.content.html_content.length > 50 ? '...' : '') }} />
-        )}
-        {block.block_type === 'heading' && (
-          <div>H{block.content.level || 1}: {(block.content.text_content || 'Empty heading').substring(0, 30) + (block.content.text_content && block.content.text_content.length > 30 ? '...' : '')}</div>
-        )}
-        {block.block_type === 'image' && (
-          <div>Image: {block.content.alt_text || block.content.media_id ? 'Image selected' : 'No image selected'}</div>
-        )}
-        {block.block_type === 'button' && (
-          <div>Button: {block.content.text || 'No text'} → {block.content.url || '#'}</div>
-        )}
-        {block.block_type === 'video_embed' && (
-          <div>Video: {block.content.title || block.content.url || 'No URL set'}</div>
-        )}
-        {block.block_type === 'posts_grid' && (
-          <div>Posts Grid: {block.content.columns || 3} cols, {block.content.postsPerPage || 12} posts</div>
-        )}
+
+      {/* Live Preview Area - No headers, just content */}
+      <div className={cn("min-h-[20px]", isDarkBackground ? "text-white drop-shadow-sm" : "text-foreground")}>
+          {renderContentPreview()}
       </div>
     </div>
   );
@@ -114,11 +302,12 @@ export interface ColumnEditorProps {
   blocks: ColumnBlock[];
   onBlocksChange: (newBlocks: ColumnBlock[]) => void;
   blockType: 'section' | 'hero';
+  sectionBackground?: SectionBlockContent['background'];
 }
 
 type EditingBlock = ColumnBlock & { index: number };
 
-export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, blockType }: ColumnEditorProps) {
+export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, blockType, sectionBackground }: ColumnEditorProps) {
   const [editingBlock, setEditingBlock] = useState<EditingBlock | null>(null);
   const [isBlockSelectorOpen, setIsBlockSelectorOpen] = useState(false);
   const [LazyEditor, setLazyEditor] = useState<React.LazyExoticComponent<React.ComponentType<any>> | React.ComponentType<any> | null>(null);
@@ -129,6 +318,57 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
     id: `${blockType}-column-droppable-${columnIndex}`,
   });
 
+  // Duplicate isDark logic (should ideally be shared utils but inline to avoid import cycles)
+  const isDarkBackground = React.useMemo(() => {
+    if (!sectionBackground) return false;
+    
+    // Theme checks
+    if (sectionBackground.type === 'theme') {
+       return ['primary', 'secondary', 'destructive', 'accent', 'dark'].includes(sectionBackground.theme || '');
+    }
+
+    // Image & Gradient - Assume Dark (safe default for overlays)
+    if (sectionBackground.type === 'image' || sectionBackground.type === 'gradient') {
+        return true; 
+    }
+    
+    // Solid Color checks
+    if (sectionBackground.type === 'solid' && sectionBackground.solid_color) {
+      const str = sectionBackground.solid_color.trim();
+      let r = 0, g = 0, b = 0;
+      
+      if (str.startsWith('#')) {
+        const hex = str.replace('#', '');
+        if (hex.length === 3) {
+          r = parseInt(hex[0] + hex[0], 16);
+          g = parseInt(hex[1] + hex[1], 16);
+          b = parseInt(hex[2] + hex[2], 16);
+        } else if (hex.length === 6) {
+          r = parseInt(hex.substring(0, 2), 16);
+          g = parseInt(hex.substring(2, 4), 16);
+          b = parseInt(hex.substring(4, 6), 16);
+        } else {
+           return ['black', 'navy', 'darkblue', 'darkgray'].includes(str.toLowerCase());
+        }
+      } else if (str.startsWith('rgb')) {
+        const matches = str.match(/\d+/g);
+        if (matches && matches.length >= 3) {
+          r = parseInt(matches[0]);
+          g = parseInt(matches[1]);
+          b = parseInt(matches[2]);
+        } else {
+           return false;
+        }
+      } else {
+        return ['black', 'navy', 'darkblue', 'darkgray'].includes(str.toLowerCase());
+      }
+      
+      const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+      return yiq < 128;
+    }
+    return false;
+  }, [sectionBackground]);
+
   const handleAddBlock = (selectedBlockType: BlockType) => {
     if (!selectedBlockType) return;
     const initialContent = getInitialContent(selectedBlockType);
@@ -146,11 +386,7 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
   };
 
   const handleCardClick = (e: React.MouseEvent<HTMLDivElement>, block: ColumnBlock, index: number) => {
-    // Ignore clicks on buttons to prevent conflicts with drag/delete/edit icons.
-    if ((e.target as HTMLElement).closest('button')) {
-      return;
-    }
-    // Call the existing function to open the modal for this block.
+    if ((e.target as HTMLElement).closest('button')) return;
     handleStartEdit(block, index);
   };
 
@@ -202,20 +438,37 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
   };
 
   return (
-    <div className="border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800/50 flex flex-col">
-      <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+    <div className={cn(
+        "border border-dashed rounded-lg bg-transparent flex flex-col transition-colors",
+        isDarkBackground ? "border-white/30" : "border-gray-300 dark:border-gray-700/50"
+    )}>
+      <div className={cn(
+          "p-3 border-b",
+          isDarkBackground ? "border-white/20" : "border-gray-200 dark:border-gray-700"
+      )}>
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            <h4 className={cn(
+                "text-sm font-medium",
+                isDarkBackground ? "text-white" : "text-gray-700 dark:text-gray-300"
+            )}>
               Column {columnIndex + 1}
             </h4>
-            <span className="text-xs text-gray-500 bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">
-              {blocks.length} block{blocks.length !== 1 ? 's' : ''}
+            <span className={cn(
+                "text-xs px-2 py-1 rounded",
+                isDarkBackground ? "bg-white/20 text-white" : "text-gray-500 bg-gray-200 dark:bg-gray-700"
+            )}>
+              {blocks.length}
             </span>
           </div>
         </div>
         <div className="mt-2">
-          <Button onClick={() => setIsBlockSelectorOpen(true)} size="sm" className="w-full h-8">
+          <Button 
+            onClick={() => setIsBlockSelectorOpen(true)} 
+            size="sm" 
+            variant={isDarkBackground ? "secondary" : "default"}
+            className="w-full h-8"
+          >
             <PlusCircle className="h-3 w-3 mr-2" />
             Add Block
           </Button>
@@ -225,8 +478,8 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
         {blocks.length === 0 ? (
           <div
             ref={setDroppableNodeRef}
-            className={`h-full flex items-center justify-center text-xs text-gray-500 border-2 border-dashed rounded-lg transition-colors ${
-              isOver ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'
+            className={`h-full flex items-center justify-center text-xs text-muted-foreground border-2 border-dashed rounded-lg transition-colors p-4 ${
+              isOver ? 'border-primary bg-primary/5' : 'border-gray-300 dark:border-gray-600'
             }`}
           >
             Drag block here
@@ -243,6 +496,7 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
                   onEdit={() => handleStartEdit(block, index)}
                   onDelete={() => handleDeleteBlock(index)}
                   onClick={(e) => handleCardClick(e, block, index)}
+                  sectionBackground={sectionBackground}
                 />
               </div>
             ))}
@@ -262,6 +516,8 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
             content: editingBlock.content,
           }}
           EditorComponent={LazyEditor}
+          // Pass the section background to the modal
+          sectionBackground={sectionBackground}
         />
       )}
       <ConfirmationDialog