create-nextblock 0.2.78 → 0.8.1

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

@@ -4,14 +4,16 @@ import React, { useState, lazy } from 'react';
 import { cn } from '@nextblock-cms/utils';
 import { Button } from '@nextblock-cms/ui';
 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 { SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
+import { availableBlockTypes, getBlockDefinition, getInitialContent, BlockType } from '../../../../lib/blocks/blockRegistry';
 import { useDroppable } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { BlockEditorModal } from './BlockEditorModal';
 import { ConfirmationDialog } from '@nextblock-cms/ui';
 import BlockTypeSelector from './BlockTypeSelector';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import { CustomBlockEditorPreview } from './CustomBlockEditorPreview';
 
 type ColumnBlock = SectionBlockContent['column_blocks'][0][0];
 
@@ -22,7 +24,7 @@ interface SortableColumnBlockProps {
   columnIndex: number;
   onEdit: () => void;
   onDelete: () => void;
-  blockType: 'section' | 'hero';
+  blockType: 'section';
   onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   sectionBackground?: SectionBlockContent['background'];
 }
@@ -51,9 +53,6 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
     transition,
     opacity: isDragging ? 0.5 : 1,
   };
-
-  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;
@@ -181,7 +180,7 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
          );
       }
       case 'image': {
-        const imageUrl = block.content.object_key ? `${R2_BASE_URL}/${block.content.object_key}` : block.content.src;
+        const imageUrl = resolveMediaUrl(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">
@@ -255,10 +254,26 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
                    </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>;
+      default: {
+        const formattedLabel = block.block_type
+          .split(/[-_]/)
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+          .join(" ");
+        const placeholder = (
+          <div className={cn("text-xs flex flex-col gap-0.5", isDarkBackground ? "text-white/70" : "text-muted-foreground")}>
+            <span className="font-medium">{formattedLabel}</span>
+            <span className="text-[10px] opacity-70">Click edit to configure</span>
+          </div>
+        );
+        // Custom blocks (block_type === definition slug) render their real layout.
+        return (
+          <CustomBlockEditorPreview
+            blockType={block.block_type}
+            content={(block.content || {}) as Record<string, any>}
+            fallback={placeholder}
+          />
+        );
+      }
     }
   };
 
@@ -301,7 +316,7 @@ export interface ColumnEditorProps {
   columnIndex: number;
   blocks: ColumnBlock[];
   onBlocksChange: (newBlocks: ColumnBlock[]) => void;
-  blockType: 'section' | 'hero';
+  blockType: 'section';
   sectionBackground?: SectionBlockContent['background'];
 }
 
@@ -374,7 +389,7 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
     const initialContent = getInitialContent(selectedBlockType);
     const newBlock: ColumnBlock = {
       block_type: selectedBlockType,
-      content: initialContent || {},
+      content: (initialContent || {}) as Record<string, any>,
       temp_id: `temp-${Date.now()}-${Math.random()}`
     };
     onBlocksChange([...blocks, newBlock]);
@@ -406,7 +421,9 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
   const handleStartEdit = (block: ColumnBlock, index: number) => {
     const blockDef = getBlockDefinition(block.block_type);
     if (!blockDef) {
-      console.error(`No definition found for block type: ${block.block_type}`);
+      const Editor = lazy(() => import(`../editors/DynamicCustomBlockEditor`));
+      setLazyEditor(Editor);
+      setEditingBlock({ ...block, index });
       return;
     }
 
@@ -534,9 +551,9 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
         onOpenChange={setIsBlockSelectorOpen}
         onSelectBlockType={handleSelectBlockType}
         allowedBlockTypes={availableBlockTypes.filter(
-          (type) => type !== 'section' && type !== 'hero'
+          (type) => type !== 'section'
         )}
       />
     </div>
   );
-}
+}

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

@@ -0,0 +1,160 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { DynamicLayoutEngine } from "../../../../components/renderers/DynamicLayoutEngine";
+
+// Module-level cache so every block preview shares a single network request for
+// the custom block definitions instead of re-fetching per card.
+type EditorDefinition = {
+  slug: string;
+  name: string;
+  description?: string | null;
+  fields: any[];
+  layout_schema: any;
+};
+
+const definitionCache: { definitions: EditorDefinition[]; promise: Promise<EditorDefinition[]> | null } = {
+  definitions: [],
+  promise: null,
+};
+
+function loadCustomBlockDefinitions(): Promise<EditorDefinition[]> {
+  if (definitionCache.definitions.length > 0) {
+    return Promise.resolve(definitionCache.definitions);
+  }
+  if (!definitionCache.promise) {
+    definitionCache.promise = fetch("/api/custom-blocks/editor-definitions")
+      .then((res) => (res.ok ? res.json() : { definitions: [] }))
+      .then((data) => {
+        definitionCache.definitions = (data?.definitions ?? []) as EditorDefinition[];
+        return definitionCache.definitions;
+      })
+      .catch(() => []);
+  }
+  return definitionCache.promise;
+}
+
+function useCustomBlockDefinition(slug: string) {
+  const [definitions, setDefinitions] = useState<EditorDefinition[]>(definitionCache.definitions);
+  const [loading, setLoading] = useState(definitionCache.definitions.length === 0);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadCustomBlockDefinitions().then((defs) => {
+      if (!cancelled) {
+        setDefinitions(defs);
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const definition = useMemo(
+    () => definitions.find((def) => def.slug === slug) ?? null,
+    [definitions, slug]
+  );
+
+  return { definition, loading };
+}
+
+// Resolve db_relation field values into records so the preview matches the front
+// end (including relation images), mirroring the server-side hydration.
+function useResolvedRelations(definition: EditorDefinition | null, content: Record<string, any>) {
+  const [resolvedRelations, setResolvedRelations] = useState<Record<string, any>>({});
+
+  const relationSignature = useMemo(() => {
+    if (!definition) return "";
+    return definition.fields
+      .filter((field) => field.type === "db_relation")
+      .map((field) => `${field.key}:${JSON.stringify(content?.[field.key] ?? null)}`)
+      .join("|");
+  }, [definition, content]);
+
+  useEffect(() => {
+    if (!definition) return;
+    const relationFields = definition.fields.filter((field) => field.type === "db_relation");
+    if (relationFields.length === 0) {
+      setResolvedRelations({});
+      return;
+    }
+
+    let cancelled = false;
+    (async () => {
+      const next: Record<string, any> = {};
+      await Promise.all(
+        relationFields.map(async (field) => {
+          const raw = content?.[field.key];
+          const values = Array.isArray(raw) ? raw : raw ? [raw] : [];
+          if (values.length === 0) return;
+
+          const params = new URLSearchParams({
+            table: field.table,
+            valueColumn: field.value_column || "id",
+            displayColumn: field.display_column || "title",
+            values: values.map(String).join(","),
+            limit: String(values.length),
+          });
+
+          try {
+            const res = await fetch(`/api/custom-blocks/db-relations?${params.toString()}`, {
+              cache: "no-store",
+            });
+            if (!res.ok) return;
+            const data = await res.json();
+            const items = data?.items ?? [];
+            next[field.key] = field.multiple ? items : items[0] ?? null;
+          } catch {
+            // Leave the relation unresolved; the engine falls back gracefully.
+          }
+        })
+      );
+
+      if (!cancelled) {
+        setResolvedRelations(next);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [definition, relationSignature]);
+
+  return resolvedRelations;
+}
+
+export interface CustomBlockEditorPreviewProps {
+  blockType: string;
+  content: Record<string, any>;
+  fallback: React.ReactNode;
+}
+
+export function CustomBlockEditorPreview({ blockType, content, fallback }: CustomBlockEditorPreviewProps) {
+  const { definition, loading } = useCustomBlockDefinition(blockType);
+  const resolvedRelations = useResolvedRelations(definition, content);
+
+  if (!definition) {
+    if (loading) {
+      return (
+        <div className="flex items-center gap-2 py-3 text-xs text-muted-foreground">
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          Loading block preview…
+        </div>
+      );
+    }
+    return <>{fallback}</>;
+  }
+
+  return (
+    // pointer-events-none lets clicks fall through to the card so editing still opens.
+    <div className="pointer-events-none w-full overflow-hidden">
+      <DynamicLayoutEngine
+        fields={definition.fields}
+        layoutSchema={definition.layout_schema}
+        data={{ ...(content || {}), resolved_relations: resolvedRelations }}
+      />
+    </div>
+  );
+}

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

@@ -8,12 +8,13 @@ import PostsGridBlockEditor from '../editors/PostsGridBlockEditor';
 type Block = Database['public']['Tables']['blocks']['Row'];
 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 { 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 || '';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import { SimpleTiptapRenderer } from '@nextblock-cms/ecommerce';
+import { CustomBlockEditorPreview } from './CustomBlockEditorPreview';
 
 export interface EditableBlockProps {
   block: Block;
@@ -39,7 +40,7 @@ export default function EditableBlock({
   const [LazyEditor, setLazyEditor] = useState<LazyExoticComponent<ComponentType<any>> | ComponentType<any> | null>(null);
 
   const SectionEditor = useMemo(() => {
-    if (block?.block_type === 'section' || block?.block_type === 'hero') {
+    if (block?.block_type === 'section') {
       const editorFilename = blockRegistry[block.block_type as BlockType]?.editorComponentFilename;
       if (editorFilename) {
         return lazy(() => import(`../editors/${editorFilename}`));
@@ -57,7 +58,7 @@ export default function EditableBlock({
 
 
   const handleEditClick = () => {
-    if (block.block_type === 'section' || block.block_type === 'hero') {
+    if (block.block_type === 'section') {
       setIsConfigPanelOpen(prev => !prev);
     } else {
       const blockDef = getBlockDefinition(block.block_type as BlockType);
@@ -78,6 +79,11 @@ export default function EditableBlock({
         setLazyEditor(Editor);
         setEditingBlock(block);
       }
+      else {
+        const Editor = lazy(() => import(`../editors/DynamicCustomBlockEditor`));
+        setLazyEditor(Editor);
+        setEditingBlock(block);
+      }
     }
   };
 
@@ -90,7 +96,7 @@ export default function EditableBlock({
 
     // If the click was on the card's background (not a button), and it's an editable block type,
     // then trigger the edit handler.
-    if (block.block_type !== 'section' && block.block_type !== 'hero') {
+    if (block.block_type !== 'section') {
       handleEditClick();
     }
   };
@@ -109,19 +115,24 @@ export default function EditableBlock({
          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';
+         const isJson = htmlContent.trim().startsWith('{') || htmlContent.trim().startsWith('[');
 
          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"
-                            )} 
-                          />
+                       isJson ? (
+                         <SimpleTiptapRenderer content={htmlContent} className="prose prose-sm max-w-none [&>p]:my-0 [&>h1]:my-0 [&>h2]:my-0 [&>h3]:my-0 dark:prose-invert" />
+                       ) : (
+                         <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>
@@ -168,7 +179,7 @@ export default function EditableBlock({
        }
        case 'image': {
          const content = (block.content || {}) as any;
-         const imageUrl = content.object_key ? `${R2_BASE_URL}/${content.object_key}` : content.src;
+         const imageUrl = resolveMediaUrl(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">
@@ -257,7 +268,7 @@ export default function EditableBlock({
        default: {
         const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
         const blockLabel = blockDefinition?.label || currentBlockType;
-        return (
+        const placeholder = (
           <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}
@@ -268,11 +279,19 @@ export default function EditableBlock({
             </div>
           </div>
         );
+        // Custom blocks (block_type === definition slug) render their real layout.
+        return (
+          <CustomBlockEditorPreview
+            blockType={currentBlockType}
+            content={(block.content || {}) as Record<string, any>}
+            fallback={placeholder}
+          />
+        );
        }
     }
   };
 
-  const isSection = block?.block_type === 'section' || block?.block_type === 'hero';
+  const isSection = block?.block_type === 'section';
   const blockDefinition = getBlockDefinition(block.block_type as BlockType);
 
   return (
@@ -313,7 +332,7 @@ export default function EditableBlock({
       {isSection ? (
         <div className="mt-2 min-h-[200px]">
           <Suspense fallback={<div className="flex justify-center items-center h-full"><p>Loading Editor...</p></div>}>
-            {SectionEditor && <SectionEditor block={block} content={block.content || {}} onChange={(newContent: Record<string, any>) => onContentChange(block.id, newContent)} blockType={block.block_type as 'section' | 'hero'} isConfigPanelOpen={isConfigPanelOpen} />}
+            {SectionEditor && <SectionEditor block={block} content={block.content || {}} onChange={(newContent: Record<string, any>) => onContentChange(block.id, newContent)} blockType={block.block_type as 'section'} isConfigPanelOpen={isConfigPanelOpen} />}
           </Suspense>
         </div>
       ) : renderPreview()}

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

@@ -1,6 +1,6 @@
-"use client";
-
-import React, { useState, useCallback, useEffect } from 'react';
+"use client";
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { Editor } from '@tiptap/react';
 import Image from 'next/image';
 import { Image as ImageIconLucide, Search, CheckCircle } from 'lucide-react';
@@ -14,49 +14,113 @@ import {
   DialogFooter,
   DialogClose,
 } from '@nextblock-cms/ui';
-import { Input } from '@nextblock-cms/ui';
-import type { Database } from '@nextblock-cms/db';
-import { createClient as createBrowserClient } from '@nextblock-cms/db';
-
-type Media = Database['public']['Tables']['media']['Row'];
-
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+import { Input } from '@nextblock-cms/ui';
+import type { Database } from '@nextblock-cms/db';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+
+type Media = Database['public']['Tables']['media']['Row'];
+
+const MEDIA_REQUEST_TIMEOUT_MS = 8000;
+const MEDIA_LIBRARY_LIMIT = 20;
+
+function resolveMediaPreviewPath(media: Media) {
+  return media.file_path || media.object_key || null;
+}
+
+function resolveMediaPreviewSrc(path: string) {
+  return resolveMediaUrl(path);
+}
 
 interface MediaLibraryModalProps {
   editor: Editor | null;
 }
 
-export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [mediaLibrary, setMediaLibrary] = useState<Media[]>([]);
-  const [isLoadingMedia, setIsLoadingMedia] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const supabase = createBrowserClient();
-
-  const fetchLibrary = useCallback(async () => {
-    if (!isModalOpen) return;
-    setIsLoadingMedia(true);
-    let query = supabase.from('media').select('*').order('created_at', { ascending: false }).limit(20);
-    if (searchTerm) {
-      query = query.ilike('file_name', `%${searchTerm}%`);
-    }
-    const { data, error } = await query;
-    if (data) setMediaLibrary(data);
-    else console.error("Error fetching media library:", error);
-    setIsLoadingMedia(false);
-  }, [isModalOpen, searchTerm, supabase]);
+export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [mediaLibrary, setMediaLibrary] = useState<Media[]>([]);
+  const [isLoadingMedia, setIsLoadingMedia] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const requestIdRef = useRef(0);
+
+  const fetchLibrary = useCallback(async () => {
+    if (!isModalOpen) return;
+    const requestId = ++requestIdRef.current;
+    setIsLoadingMedia(true);
+    setLoadError(null);
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    try {
+      const controller = new AbortController();
+      timeoutId = setTimeout(
+        () => controller.abort(new Error('Media library request timed out.')),
+        MEDIA_REQUEST_TIMEOUT_MS
+      );
+      const params = new URLSearchParams({
+        limit: MEDIA_LIBRARY_LIMIT.toString(),
+      });
+
+      if (searchTerm.trim()) {
+        params.set('q', searchTerm.trim());
+      }
+
+      const response = await fetch(`/api/media/library?${params.toString()}`, {
+        method: 'GET',
+        cache: 'no-store',
+        signal: controller.signal,
+      });
+      clearTimeout(timeoutId);
+
+      const payload = (await response.json()) as {
+        items?: Media[];
+        error?: string;
+      };
+
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+
+      if (!response.ok) {
+        console.error('Error fetching media library:', payload.error);
+        setMediaLibrary([]);
+        setLoadError(payload.error || 'We could not load the media library. Please retry.');
+        return;
+      }
+
+      setMediaLibrary(payload.items || []);
+    } catch (error: any) {
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+
+      console.error('Error fetching media library:', error);
+      setMediaLibrary([]);
+      if (error?.name === 'AbortError' || error?.message === 'Media library request timed out.') {
+        setLoadError('The media library took too long to respond. Please retry.');
+      } else {
+        setLoadError('We could not load the media library. Please retry.');
+      }
+    } finally {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      if (requestId === requestIdRef.current) {
+        setIsLoadingMedia(false);
+      }
+    }
+  }, [isModalOpen, searchTerm]);
 
   useEffect(() => {
     fetchLibrary();
   }, [fetchLibrary]);
 
-  const handleSelectMedia = (mediaItem: Media) => {
-    if (editor && mediaItem.file_type?.startsWith("image/")) {
-      const imageUrl = `${R2_BASE_URL}/${mediaItem.object_key}`;
-      editor.chain().focus().insertContent(`<img src="${imageUrl}" alt="${mediaItem.description || mediaItem.file_name}" />`).run();
-    }
-    setIsModalOpen(false);
-  };
+  const handleSelectMedia = (mediaItem: Media) => {
+    const previewPath = resolveMediaPreviewPath(mediaItem);
+    const imageUrl = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
+    if (editor && mediaItem.file_type?.startsWith("image/") && imageUrl) {
+      editor.chain().focus().insertContent(`<img src="${imageUrl}" alt="${mediaItem.description || mediaItem.file_name}" />`).run();
+    }
+    setIsModalOpen(false);
+  };
 
   return (
     <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
@@ -79,36 +143,54 @@ export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
           />
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         </div>
-        {isLoadingMedia ? (
-          <div className="flex-grow flex items-center justify-center"><p>Loading media...</p></div>
-        ) : mediaLibrary.length === 0 ? (
-          <div className="flex-grow flex items-center justify-center"><p>No media found.</p></div>
-        ) : (
-          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 overflow-y-auto flex-grow pr-2">
-            {mediaLibrary.filter(m => m.file_type?.startsWith("image/")).map((media) => (
-              <button
-                key={media.id}
-                type="button"
-                className="relative aspect-square border rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-                onClick={() => handleSelectMedia(media)}
-              >
-                <Image
-                  src={`${R2_BASE_URL}/${media.object_key}`}
-                  alt={media.description || media.file_name}
-                  width={200}
-                  height={200}
-                  className="h-full w-full object-cover"
-                />
-                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity flex items-center justify-center">
-                  <CheckCircle className="h-8 w-8 text-white" />
-                </div>
-                 <p className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate text-center">
-                    {media.file_name}
-                </p>
-              </button>
-            ))}
-          </div>
-        )}
+        {isLoadingMedia ? (
+          <div className="flex-grow flex items-center justify-center"><p>Loading media...</p></div>
+        ) : loadError ? (
+          <div className="flex-grow flex flex-col items-center justify-center gap-3 text-center">
+            <p className="max-w-sm text-sm text-muted-foreground">{loadError}</p>
+            <Button type="button" variant="outline" size="sm" onClick={() => void fetchLibrary()}>
+              Retry
+            </Button>
+          </div>
+        ) : mediaLibrary.length === 0 ? (
+          <div className="flex-grow flex items-center justify-center"><p>No media found.</p></div>
+        ) : (
+          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 overflow-y-auto flex-grow pr-2">
+            {mediaLibrary.filter(m => m.file_type?.startsWith("image/")).map((media) => {
+              const previewPath = resolveMediaPreviewPath(media);
+              const previewSrc = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
+
+              return (
+                <button
+                  key={media.id}
+                  type="button"
+                  className="relative aspect-square border rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                  onClick={() => handleSelectMedia(media)}
+                >
+                  {previewSrc ? (
+                    <Image
+                      src={previewSrc}
+                      alt={media.description || media.file_name}
+                      width={200}
+                      height={200}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground">
+                      Preview unavailable
+                    </div>
+                  )}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity flex items-center justify-center">
+                    <CheckCircle className="h-8 w-8 text-white" />
+                  </div>
+                   <p className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate text-center">
+                      {media.file_name}
+                  </p>
+                </button>
+              );
+            })}
+          </div>
+        )}
         <DialogFooter className="mt-4">
           <DialogClose asChild>
             <Button type="button" variant="outline">Cancel</Button>
@@ -117,4 +199,4 @@ export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
       </DialogContent>
     </Dialog>
   );
-};
+};