create-nextblock 0.14.1 → 0.14.4

package/templates/nextblock-template/app/auth/callback/route.ts

@@ -1,31 +1,31 @@
-import { createClient, getProfileWithRoleServerSide } from "@nextblock-cms/db/server";
-import { NextResponse } from "next/server";
-import { resolvePostAuthRedirect } from "../../../lib/auth-redirects";
-
-export async function GET(request: Request) {
-  const requestUrl = new URL(request.url);
-  const code = requestUrl.searchParams.get("code");
-  const origin = requestUrl.origin;
-  const initialRedirectTo = requestUrl.searchParams.get("redirect_to")?.toString();
-
-  if (code) {
-    const supabase = await createClient();
-    const { data: { user } , error: exchangeError } = await supabase.auth.exchangeCodeForSession(code);
-
-    if (exchangeError) {
-      console.error("Auth callback: Error exchanging code for session:", exchangeError.message);
-      return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
-    }
-
-    if (user) {
-      const profile = await getProfileWithRoleServerSide(user.id);
-      const targetPath = resolvePostAuthRedirect(profile, initialRedirectTo);
-      return NextResponse.redirect(`${origin}${targetPath}`);
-    }
-
-    console.warn("Auth callback: User object is null after code exchange.");
-    return NextResponse.redirect(`${origin}/`);
-  }
-
-  return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
-}
+import { createClient, getProfileWithRoleServerSide } from "@nextblock-cms/db/server";
+import { NextResponse } from "next/server";
+import { resolvePostAuthRedirect } from "../../../lib/auth-redirects";
+
+export async function GET(request: Request) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+  const origin = requestUrl.origin;
+  const initialRedirectTo = requestUrl.searchParams.get("redirect_to")?.toString();
+
+  if (code) {
+    const supabase = await createClient();
+    const { data: { user } , error: exchangeError } = await supabase.auth.exchangeCodeForSession(code);
+
+    if (exchangeError) {
+      console.error("Auth callback: Error exchanging code for session:", exchangeError.message);
+      return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
+    }
+
+    if (user) {
+      const profile = await getProfileWithRoleServerSide(user.id);
+      const targetPath = resolvePostAuthRedirect(profile, initialRedirectTo);
+      return NextResponse.redirect(`${origin}${targetPath}`);
+    }
+
+    console.warn("Auth callback: User object is null after code exchange.");
+    return NextResponse.redirect(`${origin}/`);
+  }
+
+  return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
+}

package/templates/nextblock-template/app/cart/page.tsx

@@ -1,7 +1,7 @@
-'use client';
-
-import { Cart } from '@nextblock-cms/ecommerce';
-
-export default function CartPage() {
-  return <Cart />;
-}
+'use client';
+
+import { Cart } from '@nextblock-cms/ecommerce';
+
+export default function CartPage() {
+  return <Cart />;
+}

package/templates/nextblock-template/app/cms/CmsClientLayout.tsx

@@ -228,7 +228,7 @@ export default function CmsClientLayout({
   // Fallback for general /cms/settings if no more specific language path matches
   else if (pathname.startsWith("/cms/settings/logos")) pageTitle = "Branding";
   else if (pathname.startsWith("/cms/settings/copyright")) pageTitle = "Copyright Settings";
-  else if (pathname.startsWith("/cms/settings/global-css")) pageTitle = "Global CSS Settings";
+  else if (pathname.startsWith("/cms/settings/global-css")) pageTitle = "Themes & CSS";
   else if (pathname.startsWith("/cms/settings/extra-translations")) pageTitle = "Extra Translations";
   else if (pathname.startsWith("/cms/settings/backup-restore")) pageTitle = "Backup And Restore";
   else if (pathname.startsWith("/cms/settings/currencies")) pageTitle = "Currency Settings";
@@ -422,7 +422,7 @@ export default function CmsClientLayout({
                       Copyright
                     </NavItem>
                     <NavItem href="/cms/settings/global-css" icon={Paintbrush} isActive={pathname.startsWith("/cms/settings/global-css")} adminOnly isAdmin={isAdmin} onClick={closeSidebarOnMobile}>
-                      Global CSS
+                      Themes &amp; CSS
                     </NavItem>
                     <NavItem href="/cms/settings/privacy" icon={Cookie} isActive={pathname.startsWith("/cms/settings/privacy")} adminOnly isAdmin={isAdmin} onClick={closeSidebarOnMobile}>
                       Privacy &amp; Consent

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

@@ -6,6 +6,7 @@ import { Button } from '@nextblock-cms/ui';
 import { PlusCircle, Trash2, Edit2, GripVertical, Image as ImageIcon } from "lucide-react";
 import { SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
 import { availableBlockTypes, blockHasEditableContent, getBlockDefinition, getInitialContent, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { resolveTextAlign, resolveTextColor } from '../../../../lib/blocks/blockColors';
 import { useDroppable } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -136,9 +137,8 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
       case 'heading': {
          const content = block.content as any;
          const level = content.level || 1;
-         const headingAlign = content.textAlign || 'left';
          const textColor = content.textColor || 'foreground';
-         
+
          const sizeClasses: Record<number, string> = {
            1: "text-4xl font-extrabold",
            2: "text-3xl font-bold",
@@ -148,32 +148,27 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
            6: "text-base font-semibold",
          };
 
-         const colorClasses: Record<string, string> = {
-            primary: "text-primary",
-            secondary: "text-secondary",
-            accent: "text-accent",
-            destructive: "text-destructive",
-            muted: "text-muted-foreground",
-            background: "text-background",
-            foreground: "text-foreground"
-         };
-
-         // Override for dark background if color is basic
-         let appliedColorClass = colorClasses[textColor] || "text-foreground";
-         if (isDarkBackground) {
+         // Shared with HeadingBlockRenderer so the preview cannot drift.
+         const { className: resolvedColorClass, style: colorStyle } = resolveTextColor(textColor);
+         let appliedColorClass = resolvedColorClass ?? (colorStyle ? undefined : "text-foreground");
+         // A custom colour is literal — only the theme tokens get the dark-surface
+         // legibility override, since only they are ambiguous against it.
+         if (isDarkBackground && !colorStyle) {
             if (textColor === 'foreground') appliedColorClass = 'text-white/90';
             if (textColor === 'muted') appliedColorClass = 'text-white/70';
          }
 
          return (
             <div className="flex gap-3">
-                 <div className={cn(
-                    "w-full leading-tight",
-                    sizeClasses[level] || sizeClasses[1],
-                    appliedColorClass,
-                    headingAlign === 'center' && 'text-center',
-                    headingAlign === 'right' && 'text-right'
-                 )}>
+                 <div
+                    style={colorStyle}
+                    className={cn(
+                       "w-full leading-tight",
+                       sizeClasses[level] || sizeClasses[1],
+                       appliedColorClass,
+                       resolveTextAlign(content.textAlign)
+                    )}
+                 >
                     {content.text_content || <span className={cn("text-muted-foreground font-normal text-sm italic", isDarkBackground && "text-white/50")}>Empty heading</span>}
                  </div>
             </div>

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

@@ -1,160 +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>
-  );
-}
+"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

@@ -9,6 +9,7 @@ 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 { blockHasEditableContent, getBlockDefinition, blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { resolveTextAlign, resolveTextColor } from '../../../../lib/blocks/blockColors';
 import { BlockEditorModal } from './BlockEditorModal';
 import { DeleteBlockButtonClient } from './DeleteBlockButtonClient';
 import { cn } from '@nextblock-cms/utils';
@@ -161,9 +162,7 @@ export default function EditableBlock({
        case 'heading': {
           const content = (block.content || {}) as any;
           const level = content.level || 1;
-          const headingAlign = content.textAlign || 'left';
-          const textColor = content.textColor || 'foreground';
-          
+
           const sizeClasses: Record<number, string> = {
             1: "text-4xl font-extrabold",
             2: "text-3xl font-bold",
@@ -173,25 +172,20 @@ export default function EditableBlock({
             6: "text-base font-semibold",
           };
 
-          const colorClasses: Record<string, string> = {
-             primary: "text-primary",
-             secondary: "text-secondary",
-             accent: "text-accent",
-             destructive: "text-destructive",
-             muted: "text-muted-foreground",
-             background: "text-background",
-             foreground: "text-foreground"
-          };
+          // Shared with HeadingBlockRenderer so the preview cannot drift.
+          const { className: colorClass, style: colorStyle } = resolveTextColor(content.textColor);
 
           return (
              <div className="py-2">
-                  <div className={cn(
-                     "w-full leading-tight",
-                     sizeClasses[level] || sizeClasses[1],
-                     colorClasses[textColor] || "text-foreground",
-                     headingAlign === 'center' && 'text-center',
-                     headingAlign === 'right' && 'text-right'
-                  )}>
+                  <div
+                     style={colorStyle}
+                     className={cn(
+                        "w-full leading-tight",
+                        sizeClasses[level] || sizeClasses[1],
+                        colorClass ?? (colorStyle ? undefined : "text-foreground"),
+                        resolveTextAlign(content.textAlign)
+                     )}
+                  >
                      {content.text_content || <span className="text-muted-foreground italic text-sm font-normal">Empty heading</span>}
                   </div>
              </div>