create-nextblock 0.2.47 → 0.2.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.2.47",
+  "version": "0.2.49",
   "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

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

@@ -6,13 +6,15 @@ import type { Database } from "@nextblock-cms/db";
 import PostsGridBlockEditor from '../editors/PostsGridBlockEditor';
 
 type Block = Database['public']['Tables']['blocks']['Row'];
-import { Button } from "@nextblock-cms/ui";
-import { GripVertical, Edit2 } from "lucide-react";
+import { Button, Card, CardContent, Avatar, AvatarImage, AvatarFallback } from "@nextblock-cms/ui";
+import { GripVertical, Edit2, Image as ImageIcon, MessageSquareQuote } from "lucide-react";
 import { getBlockDefinition, blockRegistry, BlockType } from "@/lib/blocks/blockRegistry";
 import { BlockEditorModal } from './BlockEditorModal';
 import { DeleteBlockButtonClient } from './DeleteBlockButtonClient';
 import { cn } from '@nextblock-cms/utils';
 
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+
 export interface EditableBlockProps {
   block: Block;
   onDelete: (blockId: number) => void;
@@ -100,28 +102,174 @@ export default function EditableBlock({
       return <div className="text-red-500">Error: Block type missing for preview.</div>;
     }
 
-    const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
-    const blockLabel = blockDefinition?.label || currentBlockType;
-
-    // Default preview for other block types
-    return (
-      <div
-        className="py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20 cursor-pointer hover:border-primary"
-        onClick={handleCardClick}
-      >
-        <div className="text-center">
-          <p className="text-sm font-medium text-muted-foreground">{blockLabel}</p>
-          <p className="text-xs text-muted-foreground">Click edit to modify content</p>
-        </div>
-        {/* This button is for non-section blocks which are not yet implemented for inline editing */}
-        <Button variant="outline" size="sm" onClick={(e) => {
-          e.stopPropagation();
-          handleEditClick();
-        }}>
-          Edit Block
-        </Button>
-      </div>
-    );
+    switch (currentBlockType) {
+       case 'text': {
+         const content = (block.content || {}) as any;
+         const htmlContent = String(content.html_content || '');
+         const isCentered = htmlContent.includes('text-align: center') || htmlContent.includes('class="text-center"');
+         const isRight = htmlContent.includes('text-align: right') || htmlContent.includes('class="text-right"');
+         const alignmentClass = isCentered ? 'text-center' : isRight ? 'text-right' : 'text-left';
+
+         return (
+             <div className="py-2">
+                 <div className={cn("text-xs w-full", alignmentClass)}>
+                     {htmlContent ? (
+                          <div 
+                            dangerouslySetInnerHTML={{ __html: htmlContent }} 
+                            className={cn(
+                              "prose prose-sm max-w-none [&>p]:my-0 [&>h1]:my-0 [&>h2]:my-0 [&>h3]:my-0 dark:prose-invert",
+                              isCentered && "[&_*]:text-center",
+                              isRight && "[&_*]:text-right"
+                            )} 
+                          />
+                     ) : <span className="text-muted-foreground italic">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"
+          };
+
+          return (
+             <div className="py-2">
+                  <div className={cn(
+                     "w-full leading-tight",
+                     sizeClasses[level] || sizeClasses[1],
+                     colorClasses[textColor] || "text-foreground",
+                     headingAlign === 'center' && 'text-center',
+                     headingAlign === 'right' && 'text-right'
+                  )}>
+                     {content.text_content || <span className="text-muted-foreground italic text-sm font-normal">Empty heading</span>}
+                  </div>
+             </div>
+          );
+       }
+       case 'image': {
+         const content = (block.content || {}) as any;
+         const imageUrl = content.object_key ? `${R2_BASE_URL}/${content.object_key}` : content.src;
+         return (
+              <div className="flex gap-4 py-2">
+                 <div className="flex-shrink-0 h-16 w-16 bg-muted rounded overflow-hidden flex items-center justify-center border">
+                     {imageUrl ? (
+                         /* eslint-disable-next-line @next/next/no-img-element */
+                         <img src={imageUrl} alt={content.alt_text || 'Block image'} className="h-full w-full object-cover" />
+                     ) : (
+                         <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                     )}
+                 </div>
+                 <div className="flex flex-col justify-center">
+                     <span className="text-sm font-medium truncate max-w-[200px]">{content.alt_text || 'No description'}</span>
+                     <span className="text-xs text-muted-foreground truncate max-w-[200px]">{imageUrl ? 'Image set' : 'No image selected'}</span>
+                 </div>
+              </div>
+         );
+       }
+       case 'button': {
+           const content = (block.content || {}) as any;
+           return (
+               <div className={cn("py-2 flex", 
+                   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", content.variant === 'outline' && "text-foreground")}
+                     tabIndex={-1}
+                   >
+                       {content.text || 'Button'}
+                   </Button>
+               </div>
+           );
+       }
+       case 'video_embed': {
+            const content = (block.content || {}) as any;
+            return (
+                <div className="py-2">
+                    <div className="text-sm text-muted-foreground truncate">
+                        📹 {content.title || content.url || 'No Video configured'}
+                    </div>
+                </div>
+            );
+       }
+       case 'posts_grid': {
+             const content = (block.content || {}) as any;
+             return (
+                 <div className="py-2">
+                     <div className="text-sm text-muted-foreground">
+                         Posts Grid: {content.columns || 3} cols, {content.postsPerPage || 12} items
+                     </div>
+                 </div>
+             );
+       }
+       case 'testimonial': {
+            const content = (block.content || {}) as any;
+            return (
+                <div className="py-2">
+                    <Card className="h-full border-none shadow-none bg-transparent">
+                      <CardContent className="pt-2 flex flex-col gap-4 h-full p-4">
+                        <MessageSquareQuote className="w-8 h-8 text-primary/40" />
+                        
+                        <blockquote className="flex-grow text-lg italic text-muted-foreground leading-relaxed">
+                          "{content.quote || 'No quote provided'}"
+                        </blockquote>
+
+                        <div className="flex items-center gap-3 mt-2">
+                          <Avatar>
+                            {content.image_url && <AvatarImage src={content.image_url} alt={content.author_name} />}
+                            <AvatarFallback>{(content.author_name || 'A').slice(0, 2).toUpperCase()}</AvatarFallback>
+                          </Avatar>
+                          
+                          <div>
+                            <div className="font-semibold">{content.author_name || 'Author Name'}</div>
+                            {content.author_title && (
+                              <div className="text-sm text-muted-foreground">{content.author_title}</div>
+                            )}
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                </div>
+            );
+       }
+       default: {
+        const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
+        const blockLabel = blockDefinition?.label || currentBlockType;
+        return (
+          <div
+            className="py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20 cursor-pointer hover:border-primary"
+            onClick={handleCardClick}
+          >
+            <div className="text-center">
+              <p className="text-sm font-medium text-muted-foreground">{blockLabel}</p>
+              <p className="text-xs text-muted-foreground">Click edit to modify content</p>
+            </div>
+          </div>
+        );
+       }
+    }
   };
 
   const isSection = block?.block_type === 'section' || block?.block_type === 'hero';
@@ -129,8 +277,10 @@ export default function EditableBlock({
 
   return (
     <div
+      onClick={handleCardClick}
       className={cn(
         "p-4 border rounded-lg bg-card shadow",
+        !isSection && "cursor-pointer hover:border-primary transition-colors",
         className
       )}
     >
@@ -139,7 +289,7 @@ export default function EditableBlock({
           <button {...dragHandleProps} className="p-1 rounded-md hover:bg-muted cursor-grab" aria-label="Drag to reorder">
             <GripVertical className="h-5 w-5" />
           </button>
-          <h3 className="font-semibold">{blockDefinition?.label || block.block_type}</h3>
+          <h4 className="font-semibold p-0 m-0 mb-1">{blockDefinition?.label || block.block_type}</h4>
         </div>
         <div className="flex items-center gap-1">
             <Button

package/templates/nextblock-template/app/cms/blocks/editors/ButtonBlockEditor.tsx

@@ -11,18 +11,18 @@ export type ButtonBlockContent = {
     text?: string;
     url?: string;
     variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg';
+    size?: 'default' | 'sm' | 'lg' | 'full';
+    position?: 'left' | 'center' | 'right';
 };
 
 const buttonVariants: ButtonBlockContent['variant'][] = ['default', 'outline', 'secondary', 'ghost', 'link'];
-const buttonSizes: ButtonBlockContent['size'][] = ['default', 'sm', 'lg'];
+const buttonSizes: ButtonBlockContent['size'][] = ['default', 'sm', 'lg', 'full'];
+const buttonPositions: ButtonBlockContent['position'][] = ['left', 'center', 'right'];
 
 
 export default function ButtonBlockEditor({ content, onChange }: BlockEditorProps<Partial<ButtonBlockContent>>) {
 
   const handleChange = (field: keyof ButtonBlockContent, value: string) => {
-    // Ensure that when variant or size is cleared, it's set to undefined or a valid default, not an empty string if your type doesn't allow it.
-    // However, the Select component's onValueChange will provide valid values from the list or an empty string if placeholder is re-selected (which shouldn't happen here).
     onChange({ ...content, [field]: value });
   };
 
@@ -48,34 +48,52 @@ export default function ButtonBlockEditor({ content, onChange }: BlockEditorProp
           className="mt-1"
         />
       </div>
-      <div>
-        <Label htmlFor="btn-variant">Variant</Label>
-        <Select
-          value={content.variant || "default"}
-          onValueChange={(val: string) => handleChange('variant', val)}
-        >
-          <SelectTrigger id="btn-variant" className="mt-1">
-            <SelectValue placeholder="Select variant" />
-          </SelectTrigger>
-          <SelectContent>
-            {buttonVariants.filter((v): v is Exclude<ButtonBlockContent['variant'], undefined> => v !== undefined).map(v => (
-              <SelectItem key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+      <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label htmlFor="btn-variant">Variant</Label>
+            <Select
+              value={content.variant || "default"}
+              onValueChange={(val: string) => handleChange('variant', val)}
+            >
+              <SelectTrigger id="btn-variant" className="mt-1">
+                <SelectValue placeholder="Select variant" />
+              </SelectTrigger>
+              <SelectContent>
+                {buttonVariants.filter((v): v is Exclude<ButtonBlockContent['variant'], undefined> => v !== undefined).map(v => (
+                  <SelectItem key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="btn-size">Size</Label>
+            <Select
+              value={content.size || "default"}
+              onValueChange={(val: string) => handleChange('size', val)}
+            >
+              <SelectTrigger id="btn-size" className="mt-1">
+                <SelectValue placeholder="Select size" />
+              </SelectTrigger>
+              <SelectContent>
+                {buttonSizes.filter((s): s is Exclude<ButtonBlockContent['size'], undefined> => s !== undefined).map(s => (
+                  <SelectItem key={s} value={s}>{s.toUpperCase()}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
       </div>
       <div>
-        <Label htmlFor="btn-size">Size</Label>
+        <Label htmlFor="btn-position">Alignment</Label>
         <Select
-          value={content.size || "default"}
-          onValueChange={(val: string) => handleChange('size', val)}
+          value={content.position || "left"}
+          onValueChange={(val: string) => handleChange('position', val)}
         >
-          <SelectTrigger id="btn-size" className="mt-1">
-            <SelectValue placeholder="Select size" />
+          <SelectTrigger id="btn-position" className="mt-1">
+            <SelectValue placeholder="Select alignment" />
           </SelectTrigger>
           <SelectContent>
-            {buttonSizes.filter((s): s is Exclude<ButtonBlockContent['size'], undefined> => s !== undefined).map(s => (
-              <SelectItem key={s} value={s}>{s.toUpperCase()}</SelectItem>
+            {buttonPositions.filter((p): p is Exclude<ButtonBlockContent['position'], undefined> => p !== undefined).map(p => (
+              <SelectItem key={p} value={p}>{p.charAt(0).toUpperCase() + p.slice(1)}</SelectItem>
             ))}
           </SelectContent>
         </Select>

package/templates/nextblock-template/app/cms/blocks/editors/SectionBlockEditor.tsx

@@ -38,6 +38,67 @@ interface SectionBlockEditorProps {
   blockType: 'section' | 'hero';
 }
 
+// Background style generator (Mirrors SectionBlockRenderer logic)
+function generateBackgroundStyles(background: SectionBlockContent['background']) {
+  const styles: React.CSSProperties = {};
+  let className = '';
+  const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+  switch (background?.type) {
+    case 'theme': {
+      // Theme-based backgrounds using CSS classes
+      const themeClasses: Record<string, string> = {
+        primary: 'bg-primary text-primary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground',
+        muted: 'bg-muted text-muted-foreground',
+        accent: 'bg-accent text-accent-foreground',
+        destructive: 'bg-destructive text-destructive-foreground'
+      };
+      className = background.theme ? themeClasses[background.theme] || '' : '';
+      break;
+    }
+    
+    case 'solid':
+      if (background.solid_color) {
+          styles.backgroundColor = background.solid_color;
+      }
+      break;
+    
+    case 'gradient':
+      if (background.gradient) {
+        const { type, direction, stops } = background.gradient;
+        const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+        styles.background = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
+      }
+      break;
+    
+    case 'image':
+      if (background.image) {
+        const imageUrl = `${R2_BASE_URL}/${background.image.object_key}`;
+        styles.backgroundSize = background.image.size || 'cover';
+        styles.backgroundPosition = background.image.position || 'center';
+
+        let finalBackgroundImage = `url(${imageUrl})`;
+
+        if (background.image.overlay && background.image.overlay.gradient) {
+          const { type, direction, stops } = background.image.overlay.gradient;
+          const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+          const gradient = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
+          finalBackgroundImage = `${gradient}, ${finalBackgroundImage}`;
+        }
+        
+        styles.backgroundImage = finalBackgroundImage;
+      }
+      break;
+    
+    default:
+      // No background
+      break;
+  }
+
+  return { styles, className };
+}
+
 export default function SectionBlockEditor({
   content,
   onChange,
@@ -72,6 +133,9 @@ export default function SectionBlockEditor({
   const [activeId, setActiveId] = useState<string | null>(null);
   const [draggedBlock, setDraggedBlock] = useState<any>(null);
 
+  // Generate background styles
+  const { styles: backgroundStyles, className: backgroundClassName } = generateBackgroundStyles(processedContent.background);
+  
   // DND sensors for cross-column dragging
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -236,13 +300,6 @@ return (
         )}
 
         {/* Column Content Management */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
-              Column Content
-            </h3>
-          </div>
-
           <SortableContext
             items={(processedContent.column_blocks || [])
               .flatMap((columnBlocks, columnIndex) =>
@@ -260,14 +317,15 @@ return (
             strategy={verticalListSortingStrategy}
           >
             <div
-              className={
-                (processedContent.column_blocks || []).length === 1
-                  ? "block"
-                  : `grid gap-4
-                    grid-cols-${processedContent.responsive_columns.mobile}
-                    md:grid-cols-${processedContent.responsive_columns.tablet}
-                    lg:grid-cols-${processedContent.responsive_columns.desktop}`
-              }
+              className={`grid gap-4 rounded-lg border transition-colors ${backgroundClassName} ${
+                 (processedContent.column_blocks || []).length === 1
+                   ? "grid-cols-1"
+                   : `grid-cols-${processedContent.responsive_columns.mobile} md:grid-cols-${processedContent.responsive_columns.tablet} lg:grid-cols-${processedContent.responsive_columns.desktop}`
+              }`}
+              style={{
+                ...backgroundStyles,
+                minHeight: '200px'
+              }}
             >
               {Array.from({ length: (processedContent.column_blocks || []).length }, (_, columnIndex) => (
                 <ColumnEditor
@@ -278,6 +336,7 @@ return (
                     handleColumnBlocksChange(columnIndex, newBlocks)
                   }
                   blockType={blockType}
+                  sectionBackground={processedContent.background}
                 />
               ))}
             </div>
@@ -332,7 +391,6 @@ return (
               </div>
             ) : null}
           </DragOverlay>
-        </div>
       </div>
     </DndContext>
   );

package/templates/nextblock-template/app/cms/blocks/editors/TextBlockEditor.tsx

@@ -12,6 +12,7 @@ type NotionEditorProps = {
   content: string;
   onChange: (html: string) => void;
   openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
+  className?: string;
 };
 
 // Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
@@ -27,6 +28,7 @@ export type TextBlockContent = {
 export default function TextBlockEditor({
   content,
   onChange,
+  className,
 }: BlockEditorProps<Partial<TextBlockContent>>) {
   const labelId = useId();
   const [pickerOpen, setPickerOpen] = useState(false);
@@ -50,6 +52,7 @@ export default function TextBlockEditor({
           content={content?.html_content ?? ''}
           onChange={(html) => onChange({ html_content: html })}
           openImagePicker={openImagePicker}
+          className={className}
         />
 
         {/* Hidden controlled MediaPickerDialog for image selection */}

package/templates/nextblock-template/components/blocks/renderers/ButtonBlockRenderer.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import { cn } from "@nextblock-cms/utils";
+
 export type ButtonBlockContent = {
     text?: string;
     url?: string;
     variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg';
+    size?: 'default' | 'sm' | 'lg' | 'full';
+    position?: 'left' | 'center' | 'right';
 };
 
 interface ButtonBlockRendererProps {
@@ -14,25 +18,7 @@ interface ButtonBlockRendererProps {
 
 const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
   content,
-  // languageId, // Unused
 }) => {
-  const baseClasses =
-    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
-  const variantClasses: Record<string, string> = {
-    default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-    outline:
-      "border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-    secondary:
-      "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-    ghost: "hover:bg-accent hover:text-accent-foreground",
-    link: "text-primary underline-offset-4 hover:underline",
-  };
-  const sizeClasses: Record<string, string> = {
-    default: "h-10 px-4 py-2",
-    sm: "h-9 rounded-md px-3",
-    lg: "h-11 rounded-md px-8",
-  };
-
   const isExternal =
     content.url?.startsWith("http") ||
     content.url?.startsWith("mailto:") ||
@@ -42,48 +28,54 @@ const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
   const buttonText = content.text || "Button";
   const buttonVariant = content.variant || "default";
   const buttonSize = content.size || "default";
+  const buttonPosition = content.position || "left";
+
+  const alignmentClasses = {
+      left: "justify-start text-left",
+      center: "justify-center text-center",
+      right: "justify-end text-right",
+  };
 
   return (
-    <div className="my-6 text-center">
+    <div className={cn("my-6 flex w-full", alignmentClasses[buttonPosition])}>
       {/* Case 1: Internal link (not external, not anchor, has URL) */}
       {!isExternal && !isAnchor && !!content.url ? (
-        <Link
-          href={content.url}
-          className={[
-            baseClasses,
-            variantClasses[buttonVariant],
-            sizeClasses[buttonSize],
-          ].join(" ")}
+        <Button
+            asChild
+            variant={buttonVariant}
+            size={buttonSize}
+            className={cn(content.variant === 'outline' && "text-foreground")}
         >
-          {buttonText}
-        </Link>
+            <Link href={content.url}>
+                {buttonText}
+            </Link>
+        </Button>
       ) : /* Case 2: External or Anchor link (has URL) */
       (isExternal || isAnchor) && !!content.url ? (
-        <a
-          href={content.url} // content.url is guaranteed by the condition
-          target={isExternal ? "_blank" : undefined}
-          rel={isExternal ? "noopener noreferrer" : undefined}
-          className={[
-            baseClasses,
-            variantClasses[buttonVariant],
-            sizeClasses[buttonSize],
-          ].join(" ")}
+        <Button
+            asChild
+            variant={buttonVariant}
+            size={buttonSize}
+            className={cn(content.variant === 'outline' && "text-foreground")}
         >
-          {buttonText}
-        </a>
+            <a
+            href={content.url}
+            target={isExternal ? "_blank" : undefined}
+            rel={isExternal ? "noopener noreferrer" : undefined}
+            >
+            {buttonText}
+            </a>
+        </Button>
       ) : (
         /* Case 3: No URL or other edge cases - render a plain or disabled button */
-        <button
-          type="button"
-          className={[
-            baseClasses,
-            variantClasses[buttonVariant],
-            sizeClasses[buttonSize],
-          ].join(" ")}
-          disabled={!content.url}
+        <Button
+            variant={buttonVariant}
+            size={buttonSize}
+            disabled={!content.url}
+            className={cn(content.variant === 'outline' && "text-foreground")}
         >
           {buttonText}
-        </button>
+        </Button>
       )}
     </div>
   );

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -44,7 +44,8 @@ export const ButtonBlockSchema = z.object({
   text: z.string().describe('The text displayed on the button'),
   url: z.string().describe('The URL the button links to'),
   variant: z.enum(['default', 'outline', 'secondary', 'ghost', 'link']).optional().describe('Visual style variant'),
-  size: z.enum(['default', 'sm', 'lg']).optional().describe('Size of the button'),
+  size: z.enum(['default', 'sm', 'lg', 'full']).optional().describe('Size of the button'),
+  position: z.enum(['left', 'center', 'right']).optional().describe('Button alignment'),
 });
 export type ButtonBlockContent = z.infer<typeof ButtonBlockSchema>;
 
@@ -281,7 +282,7 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
     type: "button",
     label: "Button",
     icon: "SquareMousePointer",
-    initialContent: { text: "Click Me", url: "#", variant: "default", size: "default" } as ButtonBlockContent,
+    initialContent: { text: "Click Me", url: "#", variant: "default", size: "default", position: "left" } as ButtonBlockContent,
     editorComponentFilename: "ButtonBlockEditor.tsx",
     rendererComponentFilename: "ButtonBlockRenderer.tsx",
     schema: ButtonBlockSchema,

package/templates/nextblock-template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "private": true,
   "scripts": {
     "dev": "next dev",