create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/types/jsdom.d.ts

@@ -0,0 +1,6 @@
+declare module 'jsdom' {
+  export class JSDOM {
+    constructor(html?: string);
+    window: any;
+  }
+}

package/templates/nextblock-template/app/force-styles.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-/**
- * This component is never rendered but ensures that specific Tailwind classes
- * used in the database seeds (SQL files) are generated in the CSS bundle.
- * 
- * We are using this as a fallback because Tailwind's scanning of SQL files
- * in the libs directory is proving unreliable on Windows.
- */
-export default function ForceStyles() {
-  return (
-    <div className="hidden">
-      {/* Spacing & Layout */}
-      <div className="mt-10 p-8 p-10 p-12 gap-4"></div>
-      <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8"></div>
-      
-      {/* Text colors used in blocks */}
-      <div className="text-slate-200 text-slate-300 text-slate-400 text-slate-600 text-slate-900"></div>
-      <div className="dark:text-slate-200 dark:text-slate-400 dark:text-white"></div>
-      <div className="text-sm font-semibold text-center text-white"></div>
-      
-      {/* Backgrounds and Borders */}
-      <div className="bg-white/5 bg-white/10 border-white/10 border-white/20"></div>
-      <div className="bg-slate-50 hover:bg-slate-100 dark:bg-white/5 dark:hover:bg-white/10"></div>
-      
-      {/* Gradients */}
-      <div className="bg-gradient-to-r bg-gradient-to-br from-blue-400 to-cyan-400"></div>
-      <div className="from-blue-500/10 to-purple-500/10"></div>
-    </div>
-  );
-}

package/templates/nextblock-template/app/sitemap.xml/route.ts

@@ -1,63 +0,0 @@
-import { fetchAllPublishedPages, fetchAllPublishedPosts } from '../lib/sitemap-utils';
-import { NextResponse } from 'next/server';
-
-const baseUrl = process.env.NEXT_PUBLIC_URL || 'http://localhost:3000';
-if (!process.env.NEXT_PUBLIC_URL) {
-  console.warn("Warning: NEXT_PUBLIC_URL environment variable is not set for sitemap. Defaulting to http://localhost:3000. Ensure this is set for production.");
-}
-
-interface SitemapEntry {
-  path: string;
-  lastModified: string;
-}
-
-export async function GET() {
-  try {
-    let pages: SitemapEntry[] = [];
-    try {
-      pages = await fetchAllPublishedPages();
-    } catch (error) {
-      console.error("Error fetching published pages for sitemap:", error);
-      // Proceed with an empty array for pages
-    }
-
-    let posts: SitemapEntry[] = [];
-    try {
-      posts = await fetchAllPublishedPosts();
-    } catch (error) {
-      console.error("Error fetching published posts for sitemap:", error);
-      // Proceed with an empty array for posts
-    }
-
-    const staticRoutes: SitemapEntry[] = [
-      { path: '/', lastModified: new Date().toISOString() },
-      { path: '/articles', lastModified: new Date().toISOString() },
-    ];
-
-    const allEntries = [...staticRoutes, ...pages, ...posts];
-
-    const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  ${allEntries
-    .map(
-      (entry) => `
-    <url>
-      <loc>${baseUrl}${entry.path}</loc>
-      <lastmod>${entry.lastModified}</lastmod>
-    </url>
-  `
-    )
-    .join('')}
-</urlset>`;
-
-    return new Response(sitemapXml, {
-      headers: {
-        'Content-Type': 'application/xml',
-        'Cache-Control': 's-maxage=3600, stale-while-revalidate=86400',
-      },
-    });
-  } catch (error) {
-    console.error("Error generating sitemap:", error);
-    return new NextResponse('Internal Server Error', { status: 500 });
-  }
-}

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

@@ -1,273 +0,0 @@
-// components/blocks/renderers/HeroBlockRenderer.tsx
-import React from "react";
-import type { SectionBlockContent, Gradient } from "../../../lib/blocks/blockRegistry";
-import Image from 'next/image';
-
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
-const HERO_BACKGROUND_DEFAULT_QUALITY = 60;
-
-function resolveImageQuality(value: unknown, fallback: number): number {
-  if (value === undefined || value === null || value === '') {
-    return fallback;
-  }
-
-  const numeric =
-    typeof value === 'number'
-      ? value
-      : Number.parseInt(String(value), 10);
-
-  if (!Number.isFinite(numeric)) {
-    return fallback;
-  }
-
-  const rounded = Math.round(numeric);
-  if (rounded < 1 || rounded > 100) {
-    return fallback;
-  }
-
-  return rounded;
-}
-
-interface SectionBlockRendererProps {
-  content: SectionBlockContent;
-  languageId: number;
-}
-
-// Container class mapping
-const containerClasses = {
-  'full-width': 'w-full',
-  'container': 'container mx-auto px-4',
-  'container-sm': 'container mx-auto px-4 max-w-screen-sm',
-  'container-lg': 'container mx-auto px-4 max-w-screen-lg',
-  'container-xl': 'container mx-auto px-4 max-w-screen-xl'
-};
-
-// Column grid classes
-const columnClasses = {
-  1: 'grid-cols-1',
-  2: 'grid-cols-1 md:grid-cols-2',
-  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
-};
-
-// Gap classes
-const gapClasses = {
-  none: 'gap-0',
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-  xl: 'gap-8'
-};
-
-// Padding classes
-const paddingClasses = {
-  none: '',
-  sm: 'py-2',
-  md: 'py-4',
-  lg: 'py-8',
-  xl: 'py-12'
-};
-
-// Vertical alignment classes
-const verticalAlignmentClasses = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  stretch: 'items-stretch'
-};
-
-// Background style generator
-function generateBackgroundStyles(background: SectionBlockContent['background']) {
-  const styles: React.CSSProperties = {};
-  let className = '';
-
-  if (background.min_height) {
-    styles.minHeight = background.min_height;
-  }
-
-  switch (background.type) {
-    case 'theme': {
-      // Theme-based backgrounds using CSS classes
-      const themeClasses = {
-        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':
-      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 };
-}
-
-function generateGradientString(gradient: Gradient) {
-  const { type, direction, stops } = gradient;
-  const gradientStops = stops.map((stop: { color: string; position: number }) => `${stop.color} ${stop.position}%`).join(', ');
-  return `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
-}
-
-// Static imports for critical hero block components
-import TextBlockRenderer from './TextBlockRenderer';
-import ImageBlockRenderer from './ImageBlockRenderer';
-import ButtonBlockRenderer from './ButtonBlockRenderer';
-import HeadingBlockRenderer from './HeadingBlockRenderer';
-
-// Static nested block renderer component for hero blocks (no dynamic imports)
-const StaticNestedBlockRenderer: React.FC<{
-  block: SectionBlockContent['column_blocks'][0][0];
-  languageId: number;
-}> = ({ block, languageId }) => {
-  // Use static imports for common hero block components to eliminate loading delays
-  switch (block.block_type) {
-    case 'text':
-      return (
-        <TextBlockRenderer
-          content={block.content as any}
-          languageId={languageId}
-        />
-      );
-    case 'heading':
-      return (
-        <HeadingBlockRenderer
-          content={block.content as any}
-          languageId={languageId}
-        />
-      );
-    case 'image':
-      return (
-        <ImageBlockRenderer
-          content={block.content as any}
-          languageId={languageId}
-          priority={true}
-        />
-      );
-    case 'button':
-      return (
-        <ButtonBlockRenderer
-          content={block.content as any}
-          languageId={languageId}
-        />
-      );
-    default:
-      // Fallback for unsupported block types in hero
-      return (
-        <div className="p-2 border rounded bg-destructive/10 text-destructive text-sm">
-          <strong>Unsupported hero block type:</strong> {block.block_type}
-        </div>
-      );
-  }
-};
-
-const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
-  content,
-  languageId,
-}) => {
-  const { styles, className: backgroundClassName } = generateBackgroundStyles(content.background);
-  
-  const backgroundImage = content.background.type === 'image' ? content.background.image : undefined;
-  
-  if (backgroundImage) {
-    delete styles.backgroundImage;
-  }
-  const heroImageQuality = resolveImageQuality(backgroundImage?.quality, HERO_BACKGROUND_DEFAULT_QUALITY);
-
-  // Build CSS classes
-  const containerClass = containerClasses[content.container_type] || containerClasses.container;
-  const gridClass = columnClasses[content.responsive_columns.desktop] || columnClasses[3];
-  const gapClass = gapClasses[content.column_gap] || gapClasses.md;
-  const paddingTopClass = paddingClasses[content.padding.top] || paddingClasses.md;
-  const paddingBottomClass = paddingClasses[content.padding.bottom] || paddingClasses.md;
-  const alignmentClass = content.vertical_alignment ? verticalAlignmentClasses[content.vertical_alignment] : 'items-start';
-
-  const imageProps = backgroundImage?.blur_data_url
-    ? {
-        placeholder: 'blur' as const,
-        blurDataURL: backgroundImage.blur_data_url,
-      }
-    : {};
-
-  return (
-    <section
-      className={`relative w-full flex items-center ${paddingTopClass} ${paddingBottomClass} ${backgroundClassName}`.trim()}
-      style={styles}
-    >
-      {backgroundImage && (
-        <Image
-          src={`${R2_BASE_URL}/${backgroundImage.object_key}`}
-          alt={backgroundImage.alt_text || 'Hero background image'}
-          fill
-          style={{
-            objectFit: backgroundImage.size || 'cover',
-            objectPosition: backgroundImage.position || 'center'
-          }}
-          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
-          priority={true}
-          fetchPriority="high"
-          quality={heroImageQuality}
-          {...imageProps}
-        />
-      )}
-      {backgroundImage?.overlay?.gradient && (
-        <div
-          className="absolute inset-0"
-          style={{ background: generateGradientString(backgroundImage.overlay.gradient) }}
-        />
-      )}
-      <div className={`${containerClass} relative`}>
-        <div className={`grid ${gridClass} ${gapClass} ${alignmentClass}`}>
-          {content.column_blocks.map((columnBlocks, columnIndex) => (
-            <div key={`column-${columnIndex}`} className="min-h-0 space-y-4">
-              {(Array.isArray(columnBlocks) ? columnBlocks : []).map((block, blockIndex) => (
-                <StaticNestedBlockRenderer
-                  key={`${block.block_type}-${columnIndex}-${blockIndex}`}
-                  block={block}
-                  languageId={languageId}
-                />
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default HeroBlockRenderer;

package/templates/nextblock-template/docs/How to Create a Custom Block.md

@@ -1,149 +0,0 @@
-# How to Create a Custom Block with the NextBlock SDK
-
-Custom blocks allow you to extend the functionality of NextBlock CMS while ensuring type safety and seamless integration. The `@nextblock-cms/sdk` package provides the necessary tools and interfaces.
-
-## Step 1: Define the Schema (Zod)
-
-The schema defines the structure of your block's content. It is used for validation and to generate TypeScript types.
-
-```typescript
-import { z } from 'zod';
-
-export const MyBlockSchema = z.object({
-  title: z.string().min(1).describe('The main title'),
-  description: z.string().optional().describe('Optional description'),
-  isActive: z.boolean().default(true),
-});
-
-// Derive the content type from the schema
-export type MyBlockContent = z.infer<typeof MyBlockSchema>;
-```
-
-## Step 2: Define the Components (React/TS)
-
-Create the components that will render your block. Use the `BlockProps` interface to ensure your component receives the correct data.
-
-```typescript
-import React from 'react';
-import { BlockProps } from '@nextblock-cms/sdk';
-
-// The Renderer Component (Public View)
-const MyBlockRenderer: React.FC<BlockProps<typeof MyBlockSchema>> = ({ content }) => {
-  return (
-    <div className="my-block">
-      <h2>{content.title}</h2>
-      {content.description && <p>{content.description}</p>}
-    </div>
-  );
-};
-
-// The Editor Component (CMS View)
-// Currently, the CMS uses auto-generated forms based on the schema,
-// but you can provide a custom preview or editor here.
-const MyBlockEditor: React.FC<BlockProps<typeof MyBlockSchema>> = ({ content }) => {
-  return (
-    <div className="p-4 border">
-      Preview: {content.title}
-    </div>
-  );
-};
-```
-
-## Step 3: Create the Configuration
-
-Combine everything into a `BlockConfig` object. This object tells the CMS how to handle your block.
-
-```typescript
-import { BlockConfig } from '@nextblock-cms/sdk';
-import { Star } from 'lucide-react'; // Choose an icon
-
-export const MyBlockConfig: BlockConfig<typeof MyBlockSchema> = {
-  type: 'my_block', // Unique identifier
-  label: 'My Custom Block',
-  icon: Star,
-  schema: MyBlockSchema,
-  initialContent: {
-    title: 'Default Title',
-    isActive: true,
-  },
-  RendererComponent: MyBlockRenderer,
-  EditorComponent: MyBlockEditor,
-};
-```
-
-## Step 4: Building the Editor Component
-
-The Editor Component is responsible for the editing experience within the CMS. It receives `BlockEditorProps`, which includes the current content and an `onChange` handler.
-
-You should use the shared UI components from `@nextblock-cms/ui` (like `Input`, `Textarea`, `Button`, `Label`) to ensure a consistent look and feel with the rest of the Admin UI.
-
-```typescript
-import React from 'react';
-import { BlockEditorProps } from '@nextblock-cms/sdk';
-import { Input, Label, Textarea } from '@nextblock-cms/ui';
-
-const MyBlockEditor: React.FC<BlockEditorProps<typeof MyBlockSchema>> = ({ content, onChange }) => {
-
-  const handleChange = (key: keyof typeof content, value: any) => {
-    onChange({
-      ...content,
-      [key]: value,
-    });
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="title">Title</Label>
-        <Input
-          id="title"
-          value={content.title}
-          onChange={(e) => handleChange('title', e.target.value)}
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="description">Description</Label>
-        <Textarea
-          id="description"
-          value={content.description || ''}
-          onChange={(e) => handleChange('description', e.target.value)}
-        />
-      </div>
-    </div>
-  );
-};
-```
-
-## Step 5: Register the Block
-
-To make your block available in the CMS, import it into the main registry file: `apps/nextblock/lib/blocks/blockRegistry.ts`.
-
-```typescript
-// apps/nextblock/lib/blocks/blockRegistry.ts
-import { MyBlockConfig } from '../../components/blocks/MyBlock';
-
-export const blockRegistry: Record<BlockType, BlockDefinition> = {
-  // ... existing blocks
-  [MyBlockConfig.type]: {
-    ...MyBlockConfig,
-    // ... any additional internal config if needed
-  } as BlockDefinition<MyBlockContent>,
-};
-```
-
-Once registered, your block will appear in the CMS block picker and render on the frontend.
-
-## Advanced Topic: Schema Evolution and Versioning
-
-Modifying a Zod schema after a block is in production can be dangerous. If you change the shape of the data (e.g., rename a field, remove a required field), existing blocks in the database may fail to validate or render, causing runtime errors.
-
-### Recommended Strategy: Versioning
-
-Instead of modifying the existing schema, create a new version of the block.
-
-1.  **Duplicate the Block**: Create a new block type, e.g., `my_block_v2`, with the updated schema and renderer.
-2.  **Register the New Block**: Add it to the registry. You can hide the old `my_block` from the picker if you want to prevent new usage, but keep the definition so existing blocks continue to work.
-3.  **Migration (Optional)**: You can write a utility to transform `my_block` data to `my_block_v2` format if you want to migrate content programmatically.
-
-While V1 of the SDK does not enforce a strict versioning system, treating your block schemas as immutable contracts is a best practice for stability.

package/templates/nextblock-template/docs/cms-application-overview.md

@@ -1,56 +0,0 @@
-# CMS Application: Overview
-
-This document provides a high-level overview of the main Next.js application for the CMS, detailing its structure, core modules, and key functionalities. It serves as a guide for understanding how the different parts of the CMS are organized and interact.
-
-## 1. CMS Root Layout (`app/cms/layout.tsx`)
-
-The file [`app/cms/layout.tsx`](app/cms/layout.tsx) is the foundational component for the entire CMS interface, wrapping all pages under the `/cms` path.
-
-### Key Responsibilities:
-
-*   **Authentication and Access Control**: The layout uses the `useAuth` hook from `AuthContext` to get the current user's status and role (`isAdmin`, `isWriter`). It contains a `useEffect` hook that protects the CMS routes by redirecting unauthenticated users to the sign-in page and users with insufficient permissions to an "unauthorized" page.
-
-*   **UI Structure**: It renders the primary user interface shell, which consists of:
-    *   A **responsive sidebar** for navigation, which is permanently visible on desktop screens and can be toggled on mobile.
-    *   A **main content area** that displays the specific page component for the current route.
-    *   A **dynamic header** within the main content area that displays the title of the current page.
-
-*   **Dynamic Page Title**: The header's title is not static. It's dynamically determined by inspecting the current URL's `pathname` using the `usePathname` hook. A series of `if/else if` statements map URL patterns (e.g., `/cms/pages`, `/cms/pages/new`) to user-friendly titles (e.g., "Pages", "New Page").
-
-*   **User Profile & Logout**: The sidebar includes a section at the bottom displaying the logged-in user's avatar, name, and role, along with a button to sign out.
-
-## 2. Core CMS Modules
-
-The CMS is organized into several modules, each corresponding to a specific content type or area of management. These modules are located in subdirectories within `app/cms/`. They follow a consistent file structure pattern.
-
-### Common File Structure:
-
-*   `page.tsx`: The main entry point for the module, typically displaying a list or grid of the items (e.g., a table of pages, a grid of media).
-*   `[id]/edit/page.tsx`: The page for editing a single, existing item, identified by its ID in the URL.
-*   `new/page.tsx`: The page for creating a new item.
-*   `actions.ts`: A file containing all the server actions for the module (e.g., `createPage`, `updatePage`, `deletePage`).
-*   `components/`: A directory for React components that are specific to this module, such as forms or client-side components that invoke server actions (e.g., `DeletePageButtonClient.tsx`).
-
-### Module Breakdown:
-
-*   **Dashboard (`app/cms/dashboard/`)**: The main landing page after logging into the CMS.
-    *   `page.tsx`: Displays welcome information and summary statistics.
-
-*   **Pages (`app/cms/pages/`)**: Manages the static pages of the public-facing website.
-    *   Key files: `page.tsx`, `[id]/edit/page.tsx`, `new/page.tsx`, `actions.ts`, `components/PageForm.tsx`, `components/DeletePageButtonClient.tsx`.
-
-*   **Posts (`app/cms/posts/`)**: Manages blog posts or articles.
-    *   Key files: `page.tsx`, `[id]/edit/page.tsx`, `new/page.tsx`, `actions.ts`, `components/PostForm.tsx`, `components/DeletePostButtonClient.tsx`.
-
-*   **Media (`app/cms/media/`)**: Manages the website's media library (images, documents, etc.).
-    *   Key files: `page.tsx`, `[id]/edit/page.tsx`, `actions.ts`, `components/MediaUploadForm.tsx`, `components/MediaGridClient.tsx`, `components/MediaEditForm.tsx`.
-
-*   **Navigation (`app/cms/navigation/`)**: Manages the site's navigation menus.
-    *   Key files: `page.tsx`, `[id]/edit/page.tsx`, `new/page.tsx`, `actions.ts`, `components/NavigationMenuDnd.tsx`, `components/NavigationItemForm.tsx`.
-
-*   **Users (`app/cms/users/`)**: (Admin only) Manages user accounts and roles.
-    *   Key files: `page.tsx`, `[id]/edit/page.tsx`, `actions.ts`, `components/UserForm.tsx`, `components/DeleteUserButton.tsx`.
-
-*   **Settings (`app/cms/settings/`)**: Manages site-wide settings. This module contains sub-modules for different settings areas.
-    *   **Languages (`app/cms/settings/languages/`)**: (Admin only) Manages available content languages.
-        *   Key files: `page.tsx`, `[id]/edit/page.tsx`, `new/page.tsx`, `actions.ts`, `components/LanguageForm.tsx`.

package/templates/nextblock-template/docs/cms-architecture-overview.md

@@ -1,73 +0,0 @@
-# CMS Block Editor: Architecture Overview
-
-This document provides a comprehensive overview of the block-based content editor's architecture, serving as a technical reference for development.
-
-## 1. Core Concepts
-
-### Database Schema
-The entire system is powered by a single `blocks` table in Supabase. The key field is `content` (a `JSONB` type), which stores a flexible JSON object containing all data for a specific block. This approach allows for adding new block types and modifying existing ones without requiring database schema migrations.
-
-### Block Registry
-The file [`lib/blocks/blockRegistry.ts`](/lib/blocks/blockRegistry.ts) is the **single source of truth** for all block types. It's a central configuration object that maps a block's `block_type` string to its:
--   User-facing `label`.
--   `initialContent` structure.
--   The filename of its corresponding `editorComponent` and `rendererComponent`.
-
-Any new block must be defined here first.
-
-## 2. Key Architectural Patterns
-
-### Editor/Renderer Split
-The architecture maintains a strict separation between the editing interface and the final public-facing output.
--   **Editors** (`app/cms/blocks/editors/*.tsx`): React components that render the forms and controls for modifying a block's `content`.
--   **Renderers** (`components/blocks/renderers/*.tsx`): React components that take a block's `content` and render the final, styled HTML for the public website.
-
-### Optimistic UI & Debounced Saves
-To provide a fast and smooth user experience, the editor uses an optimistic UI pattern.
--   All state is centralized in [`app/cms/blocks/components/BlockEditorArea.tsx`](/app/cms/blocks/components/BlockEditorArea.tsx) and managed with React's `useOptimistic` hook.
--   When a user makes a change, the UI updates instantly.
--   The actual save operation is handled by a debounced call to the `updateBlock` server action in [`app/cms/blocks/actions.ts`](/app/cms/blocks/actions.ts).
--   Crucially, `updateBlock` **does not** call `revalidatePath`, preventing disruptive page reloads during editing sessions.
-
-## 3. Component Breakdown & Data Flow
-
-The editor is a hierarchy of components, each with a specific responsibility.
-
-#### `BlockEditorArea.tsx`
--   **Location:** [`app/cms/blocks/components/BlockEditorArea.tsx`](/app/cms/blocks/components/BlockEditorArea.tsx)
--   **Role:** The root component for the editor. It fetches the initial blocks, manages the master `blocks` state (including the optimistic state), and provides the main `DndContext` for top-level drag-and-drop functionality.
-
-#### `SortableBlockItem.tsx`
--   **Location:** [`app/cms/blocks/components/SortableBlockItem.tsx`](/app/cms/blocks/components/SortableBlockItem.tsx)
--   **Role:** A wrapper for each individual block that provides the `useSortable` context from `dnd-kit`, making each block draggable. It passes `dragHandleProps` down to its child.
-
-#### `EditableBlock.tsx`
--   **Location:** [`app/cms/blocks/components/EditableBlock.tsx`](/app/cms/blocks/components/EditableBlock.tsx)
--   **Role:** The primary controller for a single block. It renders the block's header, including the drag handle and edit/delete buttons.
--   **Core Logic:** This component contains the critical conditional logic for the editing experience:
-    -   If the `block.block_type` is `section` or `hero`, clicking the edit icon toggles an `isConfigPanelOpen` state, which shows/hides the inline configuration panel.
-    -   For **all other block types**, clicking the edit icon lazy-loads the appropriate editor component and opens the `BlockEditorModal`.
-
-#### `BlockEditorModal.tsx`
--   **Location:** [`app/cms/blocks/components/BlockEditorModal.tsx`](/app/cms/blocks/components/BlockEditorModal.tsx)
--   **Role:** A reusable modal dialog for editing standard blocks.
--   **Functionality:** It receives a lazy-loaded editor component and wraps it in `<React.Suspense>`, showing a loading state *inside* the modal. It manages a temporary state for the block's content and calls the `onContentChange` callback on save. For the Rich Text block, it is styled to be extra tall (`h-[90vh]`).
-
----
-
-### Section & Column Components
-
-The "Section" block type enables complex multi-column layouts.
-
-#### `SectionBlockEditor.tsx`
--   **Location:** [`app/cms/blocks/editors/SectionBlockEditor.tsx`](/app/cms/blocks/editors/SectionBlockEditor.tsx)
--   **Role:** The editor for the `section` block. It conditionally renders the `SectionConfigPanel` based on the `isConfigPanelOpen` prop and contains the `ColumnEditor`s.
-
-#### `SectionConfigPanel.tsx` & `BackgroundSelector.tsx`
--   **Location:** [`app/cms/blocks/components/SectionConfigPanel.tsx`](/app/cms/blocks/components/SectionConfigPanel.tsx), [`app/cms/blocks/components/BackgroundSelector.tsx`](/app/cms/blocks/components/BackgroundSelector.tsx)
--   **Role:** These components render the forms for section-level settings (layout, columns, background).
--   **UI Pattern:** The custom inputs (`Minimum Height`, `Image Position`, etc.) use a "disabled save button" pattern. The save icon is disabled by default and only becomes active and green when the user has made a change.
-
-#### `ColumnEditor.tsx`
--   **Location:** [`app/cms/blocks/components/ColumnEditor.tsx`](/app/cms/blocks/components/ColumnEditor.tsx)
--   **Role:** Manages the content *within a single column* of a section. It has its own `DndContext` for nested drag-and-drop and uses the same `BlockEditorModal` to edit the blocks it contains.