create-nextblock 0.14.2 → 0.14.5

package/templates/nextblock-template/app/api/view/route.ts

@@ -0,0 +1,114 @@
+import { draftMode } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import { getCurrentUserCanEdit } from "../../../lib/visual-editing/draft-content";
+import {
+  normalizeDraftRedirectPath,
+  resolveDraftPathTarget,
+  resolveRequestOrigin,
+} from "../../../lib/visual-editing/draft-route";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * Entry point behind the CMS "Preview" and "View Live" buttons.
+ *
+ * The public site carries no locale in its URLs: `/[slug]`, `/article/[slug]`,
+ * `/product/[slug]` and `/` all resolve their language per-request from the
+ * `NEXT_USER_LOCALE` cookie (see proxy.ts). A link built from the slug alone
+ * therefore renders in whatever language the *editor's own* cookie says — which,
+ * for an admin working in the CMS, is almost always the default one. Opening the
+ * French version of a page landed you on the English one, three different ways:
+ *
+ *   1. `getPageDataBySlug(slug, cookieLocale)` prefers the row matching the
+ *      cookie, so when two translations share a slug the cookie's language wins.
+ *   2. `PageClientContent` / `PostClientContent` navigate to
+ *      `translatedSlugs[currentLocale]` whenever the rendered row's language
+ *      differs from the cookie — bouncing distinct French slugs back to English.
+ *   3. `/` (the homepage) resolves its language from the cookie with no slug to
+ *      go on at all, so the French homepage was unreachable by URL.
+ *
+ * Pinning the locale here fixes all three at once, because after the redirect the
+ * cookie *agrees* with the content: the server picks the right row, the client
+ * effect is a no-op, and the surrounding chrome (nav, footer, UI strings) renders
+ * in the same language as the body — so the preview isn't lying about the page.
+ *
+ * The alternative, a `?lang=` param read by each route, would leave a second
+ * cacheable variant of every public URL behind and can leak into shares and
+ * search indexes as duplicate content. The redirect lands on the clean canonical
+ * URL instead, and the param never reaches the public route.
+ */
+
+const LANGUAGE_COOKIE_KEY = "NEXT_USER_LOCALE";
+
+function redirectNoStore(url: URL) {
+  const response = NextResponse.redirect(url);
+  response.headers.set("Cache-Control", "no-store");
+  return response;
+}
+
+function redirectToSignIn(request: NextRequest, search: string) {
+  const origin = resolveRequestOrigin(request);
+  const signInUrl = new URL("/sign-in", origin);
+  signInUrl.searchParams.set("redirect", `${request.nextUrl.pathname}${search}`);
+  return redirectNoStore(signInUrl);
+}
+
+export async function GET(request: NextRequest) {
+  const params = request.nextUrl.searchParams;
+  const normalizedPath = normalizeDraftRedirectPath(params.get("path") ?? "/");
+
+  if (!normalizedPath) {
+    return NextResponse.json({ error: "Invalid path." }, { status: 400 });
+  }
+
+  const target = resolveDraftPathTarget(normalizedPath);
+  if (!target) {
+    return NextResponse.json({ error: "Unsupported target path." }, { status: 400 });
+  }
+
+  const wantsDraft = params.get("draft") === "1";
+
+  const auth = await getCurrentUserCanEdit();
+  if (!auth.user) {
+    return redirectToSignIn(request, request.nextUrl.search);
+  }
+  if (!auth.canEdit) {
+    return NextResponse.json(
+      { error: "You do not have permission to preview content." },
+      { status: 403 },
+    );
+  }
+
+  // Only ever write a language the CMS actually has configured — the value lands
+  // in a cookie every public request reads, so it must not be attacker-supplied.
+  let locale: string | null = null;
+  const requestedLang = params.get("lang")?.trim();
+  if (requestedLang) {
+    const { data: language } = await (auth.supabase as any)
+      .from("languages")
+      .select("code")
+      .eq("code", requestedLang)
+      .maybeSingle();
+    locale = (language as { code?: string } | null)?.code ?? null;
+  }
+
+  if (wantsDraft) {
+    const draft = await draftMode();
+    draft.enable();
+  }
+
+  const response = redirectNoStore(new URL(target.path, resolveRequestOrigin(request)));
+
+  if (locale) {
+    // Session-scoped on purpose: previewing French shouldn't pin the editor's own
+    // browsing language for a year. The proxy leaves a matching cookie alone, so
+    // this survives the preview and expires with the browser session.
+    response.cookies.set(LANGUAGE_COOKIE_KEY, locale, {
+      path: "/",
+      sameSite: "lax",
+    });
+  }
+
+  return response;
+}

package/templates/nextblock-template/app/article/[slug]/page.utils.ts

@@ -84,14 +84,13 @@ function applyDraftToPost(post: any, draft: ContentDraftRow) {
     slug: draftString(draft, "slug", post.slug),
     language_id: languageId,
     languages: languageId === post.language_id ? post.languages : null,
-    status: draftString(draft, "status", post.status) as PostType["status"],
+    // Visibility is never taken from a draft — it lives on the row.
     meta_title: draftNullableString(draft, "meta_title", post.meta_title),
     meta_description: draftNullableString(draft, "meta_description", post.meta_description),
     custom_canonical: draftNullableString(draft, "custom_canonical", post.custom_canonical),
     label: draftNullableString(draft, "label", post.label),
     excerpt: draftNullableString(draft, "excerpt", post.excerpt),
     subtitle: draftNullableString(draft, "subtitle", post.subtitle),
-    published_at: draftNullableString(draft, "published_at", post.published_at),
     feature_image_id: draftNullableString(draft, "feature_image_id", post.feature_image_id),
     translation_group_id: draftString(
       draft,

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/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>

package/templates/nextblock-template/app/cms/blocks/editors/HeadingBlockEditor.tsx

@@ -4,11 +4,27 @@
 import React from "react";
 import { Label } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
+import { ColorField } from "@nextblock-cms/ui";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nextblock-cms/ui";
 import { HeadingBlockContent } from '../../../../lib/blocks/blockRegistry';
+import { TEXT_COLOR_TOKEN_OPTIONS } from '../../../../lib/blocks/blockColors';
 import { BlockEditorProps } from '../components/BlockEditorModal';
 
-export default function HeadingBlockEditor({ content, onChange }: BlockEditorProps<Partial<HeadingBlockContent>>) {
+/** Handy starting points that are not in the theme — brand-neutral and legible. */
+const HEADING_COLOR_PRESETS = [
+  '#0F172A',
+  '#334155',
+  '#DC2626',
+  '#EA580C',
+  '#CA8A04',
+  '#16A34A',
+  '#0891B2',
+  '#2563EB',
+  '#7C3AED',
+  '#DB2777',
+] as const;
+
+export default function HeadingBlockEditor({ content, onChange, sectionBackground }: BlockEditorProps<Partial<HeadingBlockContent>>) {
   const idPrefix = React.useId();
 
   const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -21,24 +37,26 @@ export default function HeadingBlockEditor({ content, onChange }: BlockEditorPro
 
   const textAlignOptions = ['left', 'center', 'right', 'justify'] as const;
 
-  const textColorOptions = [
-    { value: 'primary', label: 'Primary', swatchClass: 'bg-primary' },
-    { value: 'secondary', label: 'Secondary', swatchClass: 'bg-secondary' },
-    { value: 'accent', label: 'Accent', swatchClass: 'bg-accent' },
-    { value: 'muted', label: 'Muted', swatchClass: 'bg-muted-foreground' }, // Using muted-foreground for swatch as text-muted is for text
-    { value: 'destructive', label: 'Destructive', swatchClass: 'bg-destructive' },
-    { value: 'background', label: 'Background', swatchClass: 'bg-background' },
-  ] as const;
-
   const handleTextAlignChange = (value: string) => {
     onChange({ ...content, textAlign: value as HeadingBlockContent['textAlign'] });
   };
 
-  const handleTextColorChange = (value: string) => {
-    const newTextColor = value === "" ? undefined : value as HeadingBlockContent['textColor'];
-    onChange({ ...content, textColor: newTextColor });
+  const handleTextColorChange = (value: string | undefined) => {
+    onChange({ ...content, textColor: value as HeadingBlockContent['textColor'] });
   };
 
+  // Measure contrast against the real section backdrop when there is one, so the
+  // warning reflects what the visitor will actually see.
+  const contrastAgainst = React.useMemo(() => {
+    if (sectionBackground?.type === 'solid') return sectionBackground.solid_color;
+    if (sectionBackground?.type === 'theme' && sectionBackground.theme) {
+      return `hsl(var(--${sectionBackground.theme}))`;
+    }
+    if (!sectionBackground || sectionBackground.type === 'none') return 'hsl(var(--background))';
+    // Gradients and images have no single backdrop colour to measure against.
+    return undefined;
+  }, [sectionBackground]);
+
   return (
     <div className="space-y-3 p-3 border-t mt-2">
       <div>
@@ -85,27 +103,20 @@ export default function HeadingBlockEditor({ content, onChange }: BlockEditorPro
           </SelectContent>
         </Select>
       </div>
-      <div>
-        <Label htmlFor={`heading-text-color-${idPrefix}`}>Text Color</Label>
-        <Select
-          value={content.textColor || ""} // Use empty string if no color is selected initially
-          onValueChange={handleTextColorChange}
-        >
-          <SelectTrigger id={`heading-text-color-${idPrefix}`} className="mt-1">
-            <SelectValue placeholder="Select color (optional)" />
-          </SelectTrigger>
-          <SelectContent>
-            {textColorOptions.map(color => (
-              <SelectItem key={color.value} value={color.value}>
-                <div className="flex items-center">
-                  <div className={`w-4 h-4 rounded-sm mr-2 border ${color.swatchClass}`}></div>
-                  {color.label}
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+      <ColorField
+        id={`heading-text-color-${idPrefix}`}
+        label="Text Color"
+        description="Theme colours follow light/dark mode. Custom colours stay fixed."
+        value={content.textColor}
+        onChange={handleTextColorChange}
+        tokens={TEXT_COLOR_TOKEN_OPTIONS}
+        presets={HEADING_COLOR_PRESETS}
+        contrastAgainst={contrastAgainst}
+        largeText
+        enableAlpha
+        clearLabel="Inherit from theme"
+        placeholder="Inherit from theme"
+      />
     </div>
   );
 }

package/templates/nextblock-template/app/cms/components/DraftStatusActions.tsx

@@ -45,8 +45,18 @@ export default function DraftStatusActions({
         );
       }
 
+      const warning = res && "success" in res ? res.warning : undefined;
+
       if (res && "error" in res && res.error) {
         toast.error(`Publish failed: ${res.error}`, { id: toastId });
+      } else if (warning) {
+        // The content IS live — only the revision failed to record. Say so plainly
+        // rather than claiming an unqualified success.
+        toast.error(warning, { id: toastId, duration: 8000 });
+        router.refresh();
+        setTimeout(() => {
+          window.location.reload();
+        }, 800);
       } else {
         toast.success("Changes published live successfully!", { id: toastId });
         router.refresh();

package/templates/nextblock-template/app/cms/components/VisibilityBadge.tsx

@@ -0,0 +1,62 @@
+import { Badge } from "@nextblock-cms/ui";
+import {
+  LIVE_STATUS,
+  resolveVisibilityState,
+  type PublishableType,
+  type VisibilityState,
+} from "@nextblock-cms/utils";
+
+/**
+ * Status badge for the CMS list views.
+ *
+ * Reads the same (status, published_at) pair as the editor's top-bar control, so a
+ * scheduled row is labelled "Scheduled" here instead of claiming to be published
+ * while its URL still 404s.
+ */
+
+const LABEL: Record<VisibilityState, string> = {
+  draft: "Draft",
+  scheduled: "Scheduled",
+  published: "Published",
+  archived: "Archived",
+};
+
+const CLASS_NAME: Record<VisibilityState, string> = {
+  published:
+    "bg-green-100 text-green-700 dark:bg-green-700/30 dark:text-green-300 dark:border-green-700/50",
+  scheduled:
+    "bg-amber-100 text-amber-700 dark:bg-amber-700/30 dark:text-amber-300 dark:border-amber-700/50",
+  draft:
+    "bg-yellow-100 text-yellow-700 dark:bg-yellow-700/30 dark:text-yellow-300 dark:border-yellow-700/50",
+  archived:
+    "bg-slate-100 text-slate-700 dark:bg-slate-700/30 dark:text-slate-300 dark:border-slate-600",
+};
+
+const VARIANT: Record<VisibilityState, "default" | "secondary" | "destructive"> = {
+  published: "default",
+  scheduled: "secondary",
+  draft: "secondary",
+  archived: "destructive",
+};
+
+export default function VisibilityBadge({
+  type,
+  status,
+  publishedAt,
+}: {
+  type: PublishableType;
+  status: string;
+  publishedAt?: string | null;
+}) {
+  const state = resolveVisibilityState({
+    status,
+    publishedAt,
+    liveStatus: LIVE_STATUS[type],
+  });
+
+  return (
+    <Badge variant={VARIANT[state]} className={CLASS_NAME[state]}>
+      {LABEL[state]}
+    </Badge>
+  );
+}