create-nextblock 0.16.1 → 0.16.2

package/templates/nextblock-template/components/SiteScripts.tsx

@@ -1,56 +1,56 @@
-/*
- * The loading behaviour of an external script is the admin's choice, stored per row
- * as `load_strategy` (default / defer / async). A blocking load is sometimes the
- * required one — anti-flicker snippets and consent gates have to run before render —
- * so this file renders what was asked for instead of forcing `defer` on everything.
- */
-/* eslint-disable @next/next/no-sync-scripts */
-import React from 'react';
-
-import { escapeInlineScript, type SiteScript, type SiteScriptPlacement } from '../lib/site-scripts/types';
-
-interface SiteScriptsProps {
-  nonce: string;
-  placement: SiteScriptPlacement;
-  scripts: SiteScript[];
-}
-
-/**
- * Render the admin-authored site scripts for one injection point.
- *
- * Emitted as plain <script> elements rather than next/script: these are arbitrary
- * author-supplied snippets that frequently expect to run at a specific position in
- * the document, and next/script's strategies would relocate them. The CSP nonce is
- * applied here so the snippets satisfy the policy without it needing 'unsafe-inline'.
- */
-export default function SiteScripts({ nonce, placement, scripts }: SiteScriptsProps) {
-  const forPlacement = scripts.filter((script) => script.placement === placement);
-
-  if (forPlacement.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {forPlacement.map((script) =>
-        script.src ? (
-          <script
-            key={script.id}
-            src={script.src}
-            nonce={nonce || undefined}
-            {...(script.load_strategy === 'async' ? { async: true } : {})}
-            {...(script.load_strategy === 'defer' ? { defer: true } : {})}
-            data-nb-script={script.id}
-          />
-        ) : (
-          <script
-            key={script.id}
-            nonce={nonce || undefined}
-            data-nb-script={script.id}
-            dangerouslySetInnerHTML={{ __html: escapeInlineScript(script.code) }}
-          />
-        )
-      )}
-    </>
-  );
-}
+/*
+ * The loading behaviour of an external script is the admin's choice, stored per row
+ * as `load_strategy` (default / defer / async). A blocking load is sometimes the
+ * required one — anti-flicker snippets and consent gates have to run before render —
+ * so this file renders what was asked for instead of forcing `defer` on everything.
+ */
+/* eslint-disable @next/next/no-sync-scripts */
+import React from 'react';
+
+import { escapeInlineScript, type SiteScript, type SiteScriptPlacement } from '../lib/site-scripts/types';
+
+interface SiteScriptsProps {
+  nonce: string;
+  placement: SiteScriptPlacement;
+  scripts: SiteScript[];
+}
+
+/**
+ * Render the admin-authored site scripts for one injection point.
+ *
+ * Emitted as plain <script> elements rather than next/script: these are arbitrary
+ * author-supplied snippets that frequently expect to run at a specific position in
+ * the document, and next/script's strategies would relocate them. The CSP nonce is
+ * applied here so the snippets satisfy the policy without it needing 'unsafe-inline'.
+ */
+export default function SiteScripts({ nonce, placement, scripts }: SiteScriptsProps) {
+  const forPlacement = scripts.filter((script) => script.placement === placement);
+
+  if (forPlacement.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {forPlacement.map((script) =>
+        script.src ? (
+          <script
+            key={script.id}
+            src={script.src}
+            nonce={nonce || undefined}
+            {...(script.load_strategy === 'async' ? { async: true } : {})}
+            {...(script.load_strategy === 'defer' ? { defer: true } : {})}
+            data-nb-script={script.id}
+          />
+        ) : (
+          <script
+            key={script.id}
+            nonce={nonce || undefined}
+            data-nb-script={script.id}
+            dangerouslySetInnerHTML={{ __html: escapeInlineScript(script.code) }}
+          />
+        )
+      )}
+    </>
+  );
+}

package/templates/nextblock-template/components/StaffReplies.tsx

@@ -1,102 +1,102 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { createClient } from '@nextblock-cms/db';
-import { useTranslations } from '@nextblock-cms/utils';
-import { ShieldCheck } from 'lucide-react';
-
-/**
- * Staff answers rendered under the review or comment they belong to.
- *
- * A reply is stored as an ordinary approved `type='comment'` row carrying its parent's
- * target, so it is readable through the same public RLS policy the parent is — no
- * special access, nothing new exposed. It is fetched separately rather than joined
- * because the parents arrive one page at a time.
- *
- * Shared by the product-reviews and post-comments sections, which are otherwise near
- * duplicates of each other.
- */
-
-export interface StaffReply {
-  id: string;
-  content: string;
-  created_at: string;
-  parent_id: string;
-  profiles?: { full_name?: string | null } | null;
-}
-
-/** One query for a whole page of parents, keyed by parent id. */
-export function useStaffReplies(parentIds: string[]): Record<string, StaffReply[]> {
-  const [byParent, setByParent] = useState<Record<string, StaffReply[]>>({});
-  const key = parentIds.join(',');
-
-  useEffect(() => {
-    if (parentIds.length === 0) {
-      setByParent({});
-      return;
-    }
-
-    let cancelled = false;
-    const supabase = createClient();
-
-    void supabase
-      .from('cms_interactions' as any)
-      .select('id, content, created_at, parent_id, profiles(full_name)')
-      .in('parent_id', parentIds)
-      .eq('status', 'approved')
-      .order('created_at', { ascending: true })
-      .then(({ data }: { data: StaffReply[] | null }) => {
-        if (cancelled || !data) return;
-        const grouped: Record<string, StaffReply[]> = {};
-        for (const reply of data) {
-          (grouped[reply.parent_id] ??= []).push(reply);
-        }
-        setByParent(grouped);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-    // Keyed on the joined id list rather than the array: `parentIds` is a fresh array on
-    // every render, so depending on it directly would refetch forever.
-  }, [key]);
-
-  return byParent;
-}
-
-export function StaffReplies({ replies }: { replies: StaffReply[] | undefined }) {
-  const { t, lang } = useTranslations();
-
-  if (!replies || replies.length === 0) return null;
-
-  const badge = t('interactions.staff_badge');
-  const badgeLabel = badge === 'interactions.staff_badge' ? 'Staff' : badge;
-
-  return (
-    <ol className="mt-4 space-y-3 border-l-2 border-primary/25 pl-4">
-      {replies.map((reply) => (
-        <li key={reply.id} className="rounded-xl bg-primary/5 p-3">
-          <div className="mb-1 flex flex-wrap items-baseline gap-2">
-            <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-bold uppercase leading-none text-primary">
-              <ShieldCheck className="h-3 w-3" />
-              {badgeLabel}
-            </span>
-            <span className="text-xs font-semibold text-foreground">
-              {reply.profiles?.full_name || 'Support'}
-            </span>
-            <time className="text-[10px] text-muted-foreground" suppressHydrationWarning>
-              {new Date(reply.created_at).toLocaleDateString(lang, {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-              })}
-            </time>
-          </div>
-          <p className="whitespace-pre-line text-sm leading-relaxed text-slate-600 dark:text-slate-350">
-            {reply.content}
-          </p>
-        </li>
-      ))}
-    </ol>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import { createClient } from '@nextblock-cms/db';
+import { useTranslations } from '@nextblock-cms/utils';
+import { ShieldCheck } from 'lucide-react';
+
+/**
+ * Staff answers rendered under the review or comment they belong to.
+ *
+ * A reply is stored as an ordinary approved `type='comment'` row carrying its parent's
+ * target, so it is readable through the same public RLS policy the parent is — no
+ * special access, nothing new exposed. It is fetched separately rather than joined
+ * because the parents arrive one page at a time.
+ *
+ * Shared by the product-reviews and post-comments sections, which are otherwise near
+ * duplicates of each other.
+ */
+
+export interface StaffReply {
+  id: string;
+  content: string;
+  created_at: string;
+  parent_id: string;
+  profiles?: { full_name?: string | null } | null;
+}
+
+/** One query for a whole page of parents, keyed by parent id. */
+export function useStaffReplies(parentIds: string[]): Record<string, StaffReply[]> {
+  const [byParent, setByParent] = useState<Record<string, StaffReply[]>>({});
+  const key = parentIds.join(',');
+
+  useEffect(() => {
+    if (parentIds.length === 0) {
+      setByParent({});
+      return;
+    }
+
+    let cancelled = false;
+    const supabase = createClient();
+
+    void supabase
+      .from('cms_interactions' as any)
+      .select('id, content, created_at, parent_id, profiles(full_name)')
+      .in('parent_id', parentIds)
+      .eq('status', 'approved')
+      .order('created_at', { ascending: true })
+      .then(({ data }: { data: StaffReply[] | null }) => {
+        if (cancelled || !data) return;
+        const grouped: Record<string, StaffReply[]> = {};
+        for (const reply of data) {
+          (grouped[reply.parent_id] ??= []).push(reply);
+        }
+        setByParent(grouped);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+    // Keyed on the joined id list rather than the array: `parentIds` is a fresh array on
+    // every render, so depending on it directly would refetch forever.
+  }, [key]);
+
+  return byParent;
+}
+
+export function StaffReplies({ replies }: { replies: StaffReply[] | undefined }) {
+  const { t, lang } = useTranslations();
+
+  if (!replies || replies.length === 0) return null;
+
+  const badge = t('interactions.staff_badge');
+  const badgeLabel = badge === 'interactions.staff_badge' ? 'Staff' : badge;
+
+  return (
+    <ol className="mt-4 space-y-3 border-l-2 border-primary/25 pl-4">
+      {replies.map((reply) => (
+        <li key={reply.id} className="rounded-xl bg-primary/5 p-3">
+          <div className="mb-1 flex flex-wrap items-baseline gap-2">
+            <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-bold uppercase leading-none text-primary">
+              <ShieldCheck className="h-3 w-3" />
+              {badgeLabel}
+            </span>
+            <span className="text-xs font-semibold text-foreground">
+              {reply.profiles?.full_name || 'Support'}
+            </span>
+            <time className="text-[10px] text-muted-foreground" suppressHydrationWarning>
+              {new Date(reply.created_at).toLocaleDateString(lang, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </time>
+          </div>
+          <p className="whitespace-pre-line text-sm leading-relaxed text-slate-600 dark:text-slate-350">
+            {reply.content}
+          </p>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/templates/nextblock-template/components/blocks/PostCardSkeleton.tsx

@@ -1,21 +1,21 @@
-import { Skeleton } from '@nextblock-cms/ui';
+import { Skeleton } from '@nextblock-cms/ui';
 
 const PostCardSkeleton = () => {
   return (
-    <div className="border rounded-lg overflow-hidden shadow-sm bg-card text-card-foreground">
-      <Skeleton className="h-48 w-full" />
-      <div className="p-4 space-y-3">
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-6 w-20 rounded-full" />
-          <Skeleton className="h-4 w-16" />
-        </div>
-        <Skeleton className="h-5 w-3/4" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-5/6" />
+    <div className="border rounded-lg overflow-hidden shadow-sm bg-card text-card-foreground">
+      <Skeleton className="h-48 w-full" />
+      <div className="p-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-6 w-20 rounded-full" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <Skeleton className="h-5 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6" />
         <Skeleton className="h-4 w-1/4 mt-2" />
       </div>
     </div>
   );
 };
 
-export default PostCardSkeleton;
+export default PostCardSkeleton;

package/templates/nextblock-template/components/blocks/PostsGridBlock.tsx

@@ -1,11 +1,11 @@
 // components/blocks/PostsGridBlock.tsx
-import React from 'react';
-import type { Database } from '@nextblock-cms/db';
-
-type Block = Database['public']['Tables']['blocks']['Row'];
-// import Link from 'next/link'; // Unused, PostsGridClient handles links
-import PostsGridClient from './PostsGridClient';
-import { fetchInitialPublishedPosts, fetchPaginatedPublishedPosts } from '../../app/actions/postActions';
+import React from 'react';
+import type { Database } from '@nextblock-cms/db';
+
+type Block = Database['public']['Tables']['blocks']['Row'];
+// import Link from 'next/link'; // Unused, PostsGridClient handles links
+import PostsGridClient from './PostsGridClient';
+import { fetchInitialPublishedPosts, fetchPaginatedPublishedPosts } from '../../app/actions/postActions';
 
 interface PostsGridBlockProps {
   block: Block;
@@ -20,11 +20,11 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
     showPagination = true,
   } = block.content as { title?: string, postsPerPage?: number, columns?: number, showPagination?: boolean };
 
-  const { posts: initialPosts, totalCount, error: postsError } = await fetchInitialPublishedPosts(languageId, postsPerPage);
-
-  if (postsError) {
-    return <div className="text-red-500">Error loading posts: {postsError}</div>;
-  }
+  const { posts: initialPosts, totalCount, error: postsError } = await fetchInitialPublishedPosts(languageId, postsPerPage);
+
+  if (postsError) {
+    return <div className="text-red-500">Error loading posts: {postsError}</div>;
+  }
 
   if (!initialPosts || initialPosts.length === 0) {
     return (

package/templates/nextblock-template/components/blocks/PostsGridClient.tsx

@@ -1,13 +1,13 @@
 // components/blocks/PostsGridClient.tsx
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import Link from 'next/link';
-import { useLanguage } from '../../context/LanguageContext';
-import type { PostWithMediaDimensions } from './types';
-import Image from 'next/image';
-import { Button } from '@nextblock-cms/ui';
-import PostCardSkeleton from './PostCardSkeleton'; // Added import
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useLanguage } from '../../context/LanguageContext';
+import type { PostWithMediaDimensions } from './types';
+import Image from 'next/image';
+import { Button } from '@nextblock-cms/ui';
+import PostCardSkeleton from './PostCardSkeleton'; // Added import
 
 interface PostsGridClientProps {
   initialPosts: PostWithMediaDimensions[];
@@ -20,10 +20,10 @@ interface PostsGridClientProps {
   fetchAction: (languageId: number, page: number, limit: number) => Promise<{ posts: PostWithMediaDimensions[], totalCount: number, error?: string }>;
 }
 
-const DEFAULT_FEATURE_IMAGE_WIDTH = 1600;
-const DEFAULT_FEATURE_IMAGE_HEIGHT = 900;
-
-const PostsGridClient: React.FC<PostsGridClientProps> = ({
+const DEFAULT_FEATURE_IMAGE_WIDTH = 1600;
+const DEFAULT_FEATURE_IMAGE_HEIGHT = 900;
+
+const PostsGridClient: React.FC<PostsGridClientProps> = ({
   initialPosts,
   initialPage,
   postsPerPage,
@@ -32,10 +32,10 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
   languageId,
   showPagination,
   fetchAction,
-}) => {
-  const { currentLocale } = useLanguage();
-  const [currentPage, setCurrentPage] = useState(initialPage);
-  const [posts, setPosts] = useState<PostWithMediaDimensions[]>(initialPosts);
+}) => {
+  const { currentLocale } = useLanguage();
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [posts, setPosts] = useState<PostWithMediaDimensions[]>(initialPosts);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   // Initialize skeletonCount to postsPerPage, or a sensible minimum if initialPosts is empty.
@@ -112,40 +112,40 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
             <PostCardSkeleton key={`skeleton-${index}`} />
           ))
         ) : posts.length > 0 ? (
-          posts.map((post) => (
-            <Link href={`/article/${post.slug}`} key={post.id} className="block group h-full">
+          posts.map((post) => (
+            <Link href={`/article/${post.slug}`} key={post.id} className="block group h-full">
               <div className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card text-card-foreground h-full flex flex-col">
                 {/* Basic Post Card Structure - Enhanced with Feature Image */}
-                {post.feature_image_url ? (
-                  <div className="aspect-video overflow-hidden">
-                    <Image
-                      src={post.feature_image_url}
-                      alt={`Feature image for ${post.title}`}
-                      width={post.feature_image_width && post.feature_image_width > 0 ? post.feature_image_width : DEFAULT_FEATURE_IMAGE_WIDTH}
-                      height={post.feature_image_height && post.feature_image_height > 0 ? post.feature_image_height : DEFAULT_FEATURE_IMAGE_HEIGHT}
-                      sizes={imageSizes}
-                      loading="lazy"
-                      placeholder={post.blur_data_url ? 'blur' : 'empty'}
-                      blurDataURL={post.blur_data_url ?? undefined}
-                      quality={60}
-                      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-                    />
-                  </div>
-                ) : null}
-                <div className="p-4 flex flex-1 flex-col">
-                  <div className="mb-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                    <span className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 font-semibold text-slate-700">
-                      {post.label?.trim() || 'Article'}
-                    </span>
-                    <span>
-                      {post.estimated_read_time_minutes} {currentLocale === 'fr' ? 'min de lecture' : 'min read'}
-                    </span>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2 group-hover:text-primary">{post.title}</h3>
-                  {post.excerpt && <p className="text-sm text-muted-foreground mb-3 line-clamp-3">{post.excerpt}</p>}
-                  <div className="mt-auto pt-2">
-                    <span className="text-xs text-primary group-hover:underline">Read more</span>
-                  </div>
+                {post.feature_image_url ? (
+                  <div className="aspect-video overflow-hidden">
+                    <Image
+                      src={post.feature_image_url}
+                      alt={`Feature image for ${post.title}`}
+                      width={post.feature_image_width && post.feature_image_width > 0 ? post.feature_image_width : DEFAULT_FEATURE_IMAGE_WIDTH}
+                      height={post.feature_image_height && post.feature_image_height > 0 ? post.feature_image_height : DEFAULT_FEATURE_IMAGE_HEIGHT}
+                      sizes={imageSizes}
+                      loading="lazy"
+                      placeholder={post.blur_data_url ? 'blur' : 'empty'}
+                      blurDataURL={post.blur_data_url ?? undefined}
+                      quality={60}
+                      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                  </div>
+                ) : null}
+                <div className="p-4 flex flex-1 flex-col">
+                  <div className="mb-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                    <span className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 font-semibold text-slate-700">
+                      {post.label?.trim() || 'Article'}
+                    </span>
+                    <span>
+                      {post.estimated_read_time_minutes} {currentLocale === 'fr' ? 'min de lecture' : 'min read'}
+                    </span>
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2 group-hover:text-primary">{post.title}</h3>
+                  {post.excerpt && <p className="text-sm text-muted-foreground mb-3 line-clamp-3">{post.excerpt}</p>}
+                  <div className="mt-auto pt-2">
+                    <span className="text-xs text-primary group-hover:underline">Read more</span>
+                  </div>
                 </div>
               </div>
             </Link>
@@ -181,4 +181,4 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
   );
 };
 
-export default PostsGridClient;
+export default PostsGridClient;

package/templates/nextblock-template/components/blocks/TestimonialBlock.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { z } from '../../lib/zod-config';
-import { BlockConfig, BlockProps, BlockEditorProps } from '@nextblock-cms/sdk';
-import { Avatar, AvatarFallback, AvatarImage } from '@nextblock-cms/ui';
-import { Card, CardContent } from '@nextblock-cms/ui';
-import { Input } from '@nextblock-cms/ui';
-import { Label } from '@nextblock-cms/ui';
-import { Textarea } from '@nextblock-cms/ui';
-import { MessageSquareQuote } from 'lucide-react';
+import React from 'react';
+import { z } from '../../lib/zod-config';
+import { BlockConfig, BlockProps, BlockEditorProps } from '@nextblock-cms/sdk';
+import { Avatar, AvatarFallback, AvatarImage } from '@nextblock-cms/ui';
+import { Card, CardContent } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import { Textarea } from '@nextblock-cms/ui';
+import { MessageSquareQuote } from 'lucide-react';
 
 // 1. Define the Schema
 export const TestimonialSchema = z.object({

package/templates/nextblock-template/components/blocks/ecommerceRendererLoaders.ts

@@ -1,23 +1,23 @@
-import type { ComponentType } from "react";
-
-type PublicBlockRendererLoader = () => Promise<{
-  default: ComponentType<any>;
-}>;
-
-const ecommerceBlockRendererLoaders: Record<string, PublicBlockRendererLoader> = {
-  product_grid: () => import("./renderers/ProductGridBlockRenderer"),
-  featured_product: () => import("./renderers/FeaturedProductBlockRenderer"),
-  cart: () => import("./renderers/CartBlockRenderer"),
-  checkout: () => import("./renderers/CheckoutBlockRenderer"),
-  product_details: () => import("./renderers/ProductDetailsBlockRenderer"),
-};
-
-export function loadEcommerceBlockRenderer(blockType: string) {
-  const loader = ecommerceBlockRendererLoaders[blockType];
-
-  if (!loader) {
-    return Promise.reject(new Error(`Unsupported ecommerce block type: ${blockType}`));
-  }
-
-  return loader();
-}
+import type { ComponentType } from "react";
+
+type PublicBlockRendererLoader = () => Promise<{
+  default: ComponentType<any>;
+}>;
+
+const ecommerceBlockRendererLoaders: Record<string, PublicBlockRendererLoader> = {
+  product_grid: () => import("./renderers/ProductGridBlockRenderer"),
+  featured_product: () => import("./renderers/FeaturedProductBlockRenderer"),
+  cart: () => import("./renderers/CartBlockRenderer"),
+  checkout: () => import("./renderers/CheckoutBlockRenderer"),
+  product_details: () => import("./renderers/ProductDetailsBlockRenderer"),
+};
+
+export function loadEcommerceBlockRenderer(blockType: string) {
+  const loader = ecommerceBlockRendererLoaders[blockType];
+
+  if (!loader) {
+    return Promise.reject(new Error(`Unsupported ecommerce block type: ${blockType}`));
+  }
+
+  return loader();
+}

package/templates/nextblock-template/components/blocks/publicRendererLoaders.ts

@@ -1,25 +1,25 @@
-import type { ComponentType } from "react";
-import type { BlockType } from "../../lib/blocks/blockRegistry";
-
-type PublicBlockRendererLoader = () => Promise<{
-  default: ComponentType<any>;
-}>;
-
-const publicBlockRendererLoaders: Partial<
-  Record<BlockType | "hero", PublicBlockRendererLoader>
-> = {
-  text: () => import("./renderers/TextBlockRenderer"),
-  heading: () => import("./renderers/HeadingBlockRenderer"),
-  image: () => import("./renderers/ImageBlockRenderer"),
-  button: () => import("./renderers/ButtonBlockRenderer"),
-  posts_grid: () => import("./renderers/PostsGridBlockRenderer"),
-  video_embed: () => import("./renderers/VideoEmbedBlockRenderer"),
-  section: () => import("./renderers/SectionBlockRenderer"),
-  hero: () => import("./renderers/SectionBlockRenderer"),
-  form: () => import("./renderers/FormBlockRenderer"),
-  testimonial: () => import("./renderers/TestimonialBlockRenderer"),
-};
-
-export function getPublicBlockRendererLoader(blockType: string) {
-  return publicBlockRendererLoaders[blockType as BlockType | "hero"];
-}
+import type { ComponentType } from "react";
+import type { BlockType } from "../../lib/blocks/blockRegistry";
+
+type PublicBlockRendererLoader = () => Promise<{
+  default: ComponentType<any>;
+}>;
+
+const publicBlockRendererLoaders: Partial<
+  Record<BlockType | "hero", PublicBlockRendererLoader>
+> = {
+  text: () => import("./renderers/TextBlockRenderer"),
+  heading: () => import("./renderers/HeadingBlockRenderer"),
+  image: () => import("./renderers/ImageBlockRenderer"),
+  button: () => import("./renderers/ButtonBlockRenderer"),
+  posts_grid: () => import("./renderers/PostsGridBlockRenderer"),
+  video_embed: () => import("./renderers/VideoEmbedBlockRenderer"),
+  section: () => import("./renderers/SectionBlockRenderer"),
+  hero: () => import("./renderers/SectionBlockRenderer"),
+  form: () => import("./renderers/FormBlockRenderer"),
+  testimonial: () => import("./renderers/TestimonialBlockRenderer"),
+};
+
+export function getPublicBlockRendererLoader(blockType: string) {
+  return publicBlockRendererLoaders[blockType as BlockType | "hero"];
+}