create-nextblock 0.0.1

package/templates/nextblock-template/context/AuthContext.tsx

@@ -0,0 +1,138 @@
+// context/AuthContext.tsx
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
+import { User, Subscription, SupabaseClient } from '@supabase/supabase-js';
+import { createClient as createSupabaseBrowserClient, getProfileWithRoleClientSide } from '@nextblock-cms/db';
+import { Database } from '@nextblock-cms/db';
+
+type Profile = Database['public']['Tables']['profiles']['Row'];
+type UserRole = Database['public']['Enums']['user_role'];
+
+interface AuthProviderProps {
+  children: ReactNode;
+  serverUser: User | null;
+  serverProfile: Profile | null;
+}
+
+interface AuthContextType {
+  user: User | null;
+  profile: Profile | null;
+  role: UserRole | null;
+  isLoading: boolean;
+  isAdmin: boolean;
+  isWriter: boolean;
+  isUserRole: boolean;
+  supabase: SupabaseClient | null;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children, serverUser, serverProfile }: AuthProviderProps) => {
+  const [supabase] = useState(() => createSupabaseBrowserClient());
+  
+  const [user, setUser] = useState<User | null>(serverUser);
+  const [profile, setProfile] = useState<Profile | null>(serverProfile);
+  const [role, setRole] = useState<UserRole | null>(serverProfile?.role ?? null);
+  const [isLoading] = useState(false);
+  const [authSubscription, setAuthSubscription] = useState<Subscription | null>(null);
+
+  const handleAuthStateChange = useCallback(async (event: string, session: unknown) => {
+    const currentUser = (session && typeof session === 'object' && 'user' in session) ? (session as any).user : null;
+    setUser(currentUser);
+
+    if (currentUser) {
+      try {
+        const userProfileData = await getProfileWithRoleClientSide(supabase, currentUser.id);
+        setProfile(userProfileData);
+        setRole(userProfileData?.role ?? null);
+      } catch (e) {
+        console.error("AuthProvider: Error fetching profile on auth change", e);
+        setProfile(null);
+        setRole(null);
+      }
+    } else {
+      setProfile(null);
+      setRole(null);
+    }
+  }, [supabase]);
+
+  const subscribeToAuth = useCallback(() => {
+    if (authSubscription) return; // Already subscribed
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(handleAuthStateChange);
+    setAuthSubscription(subscription);
+  }, [supabase, handleAuthStateChange, authSubscription]);
+
+  const unsubscribeFromAuth = useCallback(() => {
+    if (authSubscription) {
+      authSubscription.unsubscribe();
+      setAuthSubscription(null);
+    }
+  }, [authSubscription]);
+
+  useEffect(() => {
+    subscribeToAuth();
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        subscribeToAuth();
+      } else {
+        unsubscribeFromAuth();
+      }
+    };
+
+    const handlePageHide = (event: PageTransitionEvent) => {
+      if (!event.persisted) {
+        unsubscribeFromAuth(); // This is crucial
+        supabase.removeAllChannels();
+      }
+    };
+
+    const handlePageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        subscribeToAuth();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('pagehide', handlePageHide);
+    window.addEventListener('pageshow', handlePageShow);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('pagehide', handlePageHide);
+      window.removeEventListener('pageshow', handlePageShow);
+      unsubscribeFromAuth();
+      supabase.removeAllChannels();
+    };
+  }, [subscribeToAuth, unsubscribeFromAuth, supabase]);
+
+  const isAdmin = role === 'ADMIN';
+  const isWriter = role === 'WRITER';
+  const isUserRole = role === 'USER';
+
+  const value = useMemo(() => ({
+    user,
+    profile,
+    role,
+    isLoading,
+    isAdmin,
+    isWriter,
+    isUserRole,
+    supabase,
+  }), [user, profile, role, isLoading, isAdmin, isWriter, isUserRole, supabase]);
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

package/templates/nextblock-template/context/CurrentContentContext.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+export interface CurrentContent {
+  id: string | number | null;
+  type: 'page' | 'post' | null;
+  slug: string | null;
+}
+
+interface CurrentContentContextType {
+  currentContent: CurrentContent;
+  setCurrentContent: (content: CurrentContent) => void;
+}
+
+const CurrentContentContext = createContext<CurrentContentContextType | undefined>(undefined);
+
+export const CurrentContentProvider = ({ children }: { children: ReactNode }) => {
+  const [currentContent, setCurrentContentState] = useState<CurrentContent>({
+    id: null,
+    type: null,
+    slug: null,
+  });
+
+  const setCurrentContent = (content: CurrentContent) => {
+    setCurrentContentState(content);
+  };
+
+  return (
+    <CurrentContentContext.Provider value={{ currentContent, setCurrentContent }}>
+      {children}
+    </CurrentContentContext.Provider>
+  );
+};
+
+export const useCurrentContent = () => {
+  const context = useContext(CurrentContentContext);
+  if (context === undefined) {
+    throw new Error('useCurrentContent must be used within a CurrentContentProvider');
+  }
+  return context;
+};

package/templates/nextblock-template/context/LanguageContext.tsx

@@ -0,0 +1,206 @@
+// context/LanguageContext.tsx
+'use client'; // This directive applies to the rest of the file.
+
+import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
+import { Database } from '@nextblock-cms/db';
+import { getActiveLanguagesClientSide } from '@nextblock-cms/db';
+
+type Language = Database['public']['Tables']['languages']['Row'];
+import Cookies from 'js-cookie';
+
+const LANGUAGE_STORAGE_KEY = 'preferred_locale_storage';
+const LANGUAGE_COOKIE_KEY = 'NEXT_USER_LOCALE';
+const DEFAULT_FALLBACK_LOCALE = 'en'; // Your ultimate fallback
+
+interface LanguageContextType {
+  currentLocale: string;
+  setCurrentLocale: (localeCode: string) => void;
+  availableLanguages: Language[];
+  defaultLanguage: Language | null;
+  isLoadingLanguages: boolean;
+}
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+interface LanguageProviderProps {
+  children: ReactNode;
+  serverLocale?: string; // Locale determined on the server (from X-User-Locale header)
+  initialAvailableLanguages?: Language[]; // Languages fetched on the server
+  initialDefaultLanguage?: Language | null; // Default language determined on the server
+}
+
+export const LanguageProvider = ({
+  children,
+  serverLocale,
+  initialAvailableLanguages,
+  initialDefaultLanguage
+}: LanguageProviderProps) => {
+
+  const [currentLocale, _setCurrentLocale] = useState<string>(() => {
+    let initialVal = DEFAULT_FALLBACK_LOCALE;
+    if (serverLocale) {
+      initialVal = serverLocale;
+    } else {
+        const cookieVal = Cookies.get(LANGUAGE_COOKIE_KEY);
+        if (cookieVal) {
+            initialVal = cookieVal;
+        } else {
+            const storageVal = typeof window !== 'undefined' ? localStorage.getItem(LANGUAGE_STORAGE_KEY) : null;
+            if (storageVal) {
+                initialVal = storageVal;
+            }
+        }
+    }
+    return initialVal;
+  });
+
+  const [availableLanguages, setAvailableLanguages] = useState<Language[]>(initialAvailableLanguages || []);
+  const [defaultLanguage, setDefaultLanguage] = useState<Language | null>(initialDefaultLanguage || null);
+  // isLoadingLanguages is true if server didn't provide initial languages, or if they were empty.
+  const [isLoadingLanguages, setIsLoadingLanguages] = useState(!initialAvailableLanguages || initialAvailableLanguages.length === 0);
+  const [clientSelectedLocale, setClientSelectedLocale] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true; // Track mount status
+
+    const initializeLanguages = async () => {
+      setIsLoadingLanguages(true); // Set loading true at the start of initialization
+
+      let languagesToUse = initialAvailableLanguages;
+      let defaultLangToUse = initialDefaultLanguage;
+
+      // If server didn't provide languages, or they were empty, fetch client-side as a fallback.
+      if (!languagesToUse || languagesToUse.length === 0) {
+        try {
+          const fetchedLangs = await getActiveLanguagesClientSide();
+          if (isMounted) { // Check mount status before setting state
+            languagesToUse = fetchedLangs;
+            setAvailableLanguages(fetchedLangs);
+            defaultLangToUse = fetchedLangs.find(lang => lang.is_default) || fetchedLangs[0] || null;
+            setDefaultLanguage(defaultLangToUse ?? null);
+          }
+        } catch (error) {
+          console.error("LanguageContext: Error fetching languages client-side", error);
+          if (isMounted) { // Still ensure we update loading state on error
+             languagesToUse = []; // Fallback to empty array
+             defaultLangToUse = null;
+          }
+        }
+      }
+      
+      if (!isMounted) return; // Early exit if component unmounted or deps changed
+
+      // Determine effective locale based on serverLocale, cookies, localStorage, or DB default
+      const isValidLang = (lc: string | undefined) => lc && languagesToUse && languagesToUse.some(lang => lang.code === lc);
+      const cookieLocale = Cookies.get(LANGUAGE_COOKIE_KEY);
+      const storedLocale = typeof window !== 'undefined' ? localStorage.getItem(LANGUAGE_STORAGE_KEY) : null;
+
+      let effectiveLocale = DEFAULT_FALLBACK_LOCALE; // Start with a fallback
+
+      if (clientSelectedLocale) {
+        // User has made a direct, recent selection. This is the new source of truth for effectiveLocale.
+        effectiveLocale = clientSelectedLocale;
+
+        // If the server has caught up AND this choice is recognized as valid by current availableLanguages,
+        // then we can clear clientSelectedLocale. Otherwise, keep it set to ensure it's enforced.
+        if (clientSelectedLocale === serverLocale && isValidLang(clientSelectedLocale)) {
+          if (isMounted) {
+            setClientSelectedLocale(null);
+          }
+        }
+        // If clientSelectedLocale is not yet in availableLanguages (isValidLang is false),
+        // or serverLocale hasn't caught up, clientSelectedLocale remains set,
+        // and effectiveLocale is already correctly set to clientSelectedLocale.
+      } else {
+        // No recent client selection, use existing prioritization
+        effectiveLocale = serverLocale && isValidLang(serverLocale) ? serverLocale
+                      : (cookieLocale && isValidLang(cookieLocale) ? cookieLocale
+                      : (storedLocale && isValidLang(storedLocale) ? storedLocale
+                      : (defaultLangToUse ? defaultLangToUse.code : DEFAULT_FALLBACK_LOCALE)));
+      }
+      
+      if (!isMounted) return; // Early exit
+
+      if (isMounted) { // Check mount status before final state updates
+        _setCurrentLocale(effectiveLocale);
+        if (typeof window !== 'undefined') {
+          localStorage.setItem(LANGUAGE_STORAGE_KEY, effectiveLocale);
+          document.documentElement.lang = effectiveLocale;
+        }
+        Cookies.set(LANGUAGE_COOKIE_KEY, effectiveLocale, { path: '/', expires: 365, sameSite: 'Lax' });
+        setIsLoadingLanguages(false); // Done loading/initializing
+      }
+    };
+
+    initializeLanguages();
+
+    return () => {
+      isMounted = false; // Cleanup function to set isMounted to false
+    };
+  }, [serverLocale, initialAvailableLanguages, initialDefaultLanguage, clientSelectedLocale]);
+
+  const setCurrentLocaleCallback = useCallback(async (localeCode: string) => { // Add async here
+    let localeToSet = DEFAULT_FALLBACK_LOCALE;
+    let isValidForRouterRefresh = false;
+    
+    const currentAvailableLangs = availableLanguages; // Use state value which might have been updated by client-side fetch
+
+    if (currentAvailableLangs.some(lang => lang.code === localeCode)) {
+      localeToSet = localeCode;
+      isValidForRouterRefresh = true;
+    } else if (currentAvailableLangs.length > 0) {
+      const dbDefault = currentAvailableLangs.find(lang => lang.is_default);
+      localeToSet = dbDefault?.code || currentAvailableLangs[0]?.code || DEFAULT_FALLBACK_LOCALE;
+      isValidForRouterRefresh = true;
+    } else {
+      // No available languages known, still attempt refresh with fallback
+      isValidForRouterRefresh = true;
+    }
+
+    _setCurrentLocale(localeToSet);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(LANGUAGE_STORAGE_KEY, localeToSet);
+      document.documentElement.lang = localeToSet;
+    }
+    Cookies.set(LANGUAGE_COOKIE_KEY, localeToSet, { path: '/', expires: 365, sameSite: 'Lax' });
+
+    // The LanguageSwitcher component is responsible for navigation (push or refresh).
+    // We only set the clientSelectedLocale here to ensure the main useEffect
+    // in LanguageProvider can pick up this explicit choice if needed during initialization
+    // or if the serverLocale hasn't caught up yet.
+    if (isValidForRouterRefresh) { // This check might still be useful for setClientSelectedLocale
+      setClientSelectedLocale(localeToSet);
+    }
+    // router.refresh(); // REMOVED: LanguageSwitcher will handle navigation/refresh.
+  }, [availableLanguages]);
+
+  useEffect(() => {
+    if (currentLocale && typeof window !== 'undefined') {
+      document.documentElement.lang = currentLocale;
+    }
+  }, [currentLocale]);
+
+  const contextValue = React.useMemo(() => {
+    return {
+      currentLocale: currentLocale,
+      setCurrentLocale: setCurrentLocaleCallback,
+      availableLanguages,
+      defaultLanguage,
+      isLoadingLanguages,
+    };
+  }, [currentLocale, setCurrentLocaleCallback, availableLanguages, defaultLanguage, isLoadingLanguages]);
+
+  return (
+    <LanguageContext.Provider value={contextValue}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (context === undefined) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};

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

@@ -0,0 +1,56 @@
+# 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

@@ -0,0 +1,73 @@
+# 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.