create-nextblock 0.15.10 → 0.16.2

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

@@ -1,58 +1,58 @@
-"use client";
-
-import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
-
-export type CortexAiContentType = "page" | "post" | "product";
-
-export type CortexAiPageContext = {
-  contentType: CortexAiContentType;
-  currentEditor?: {
-    blockId?: number | string | null;
-    blockType?: string | null;
-    field?: string | null;
-  };
-  entityId: number | string;
-  languageId?: number | null;
-  slug?: string | null;
-  title?: string | null;
-  translationGroupId?: string | null;
-};
-
-type CortexAiPageContextValue = {
-  pageContext: CortexAiPageContext | null;
-  setPageContext: (context: CortexAiPageContext | null) => void;
-};
-
-const CortexAiPageContextStore = createContext<CortexAiPageContextValue | null>(null);
-
-export function CortexAiPageContextProvider({ children }: { children: React.ReactNode }) {
-  const [pageContext, setPageContext] = useState<CortexAiPageContext | null>(null);
-  const value = useMemo(() => ({ pageContext, setPageContext }), [pageContext]);
-
-  return (
-    <CortexAiPageContextStore.Provider value={value}>
-      {children}
-    </CortexAiPageContextStore.Provider>
-  );
-}
-
-export function useCortexAiPageContext() {
-  return useContext(CortexAiPageContextStore);
-}
-
-export function CortexAiPageContextRegistrar({
-  context,
-}: {
-  context: CortexAiPageContext;
-}) {
-  const store = useCortexAiPageContext();
-  const setPageContext = store?.setPageContext;
-  const serializedContext = JSON.stringify(context);
-
-  useEffect(() => {
-    setPageContext?.(context);
-    return () => setPageContext?.(null);
-  }, [serializedContext, setPageContext]);
-
-  return null;
-}
+"use client";
+
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+export type CortexAiContentType = "page" | "post" | "product";
+
+export type CortexAiPageContext = {
+  contentType: CortexAiContentType;
+  currentEditor?: {
+    blockId?: number | string | null;
+    blockType?: string | null;
+    field?: string | null;
+  };
+  entityId: number | string;
+  languageId?: number | null;
+  slug?: string | null;
+  title?: string | null;
+  translationGroupId?: string | null;
+};
+
+type CortexAiPageContextValue = {
+  pageContext: CortexAiPageContext | null;
+  setPageContext: (context: CortexAiPageContext | null) => void;
+};
+
+const CortexAiPageContextStore = createContext<CortexAiPageContextValue | null>(null);
+
+export function CortexAiPageContextProvider({ children }: { children: React.ReactNode }) {
+  const [pageContext, setPageContext] = useState<CortexAiPageContext | null>(null);
+  const value = useMemo(() => ({ pageContext, setPageContext }), [pageContext]);
+
+  return (
+    <CortexAiPageContextStore.Provider value={value}>
+      {children}
+    </CortexAiPageContextStore.Provider>
+  );
+}
+
+export function useCortexAiPageContext() {
+  return useContext(CortexAiPageContextStore);
+}
+
+export function CortexAiPageContextRegistrar({
+  context,
+}: {
+  context: CortexAiPageContext;
+}) {
+  const store = useCortexAiPageContext();
+  const setPageContext = store?.setPageContext;
+  const serializedContext = JSON.stringify(context);
+
+  useEffect(() => {
+    setPageContext?.(context);
+    return () => setPageContext?.(null);
+  }, [serializedContext, setPageContext]);
+
+  return null;
+}

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

@@ -28,7 +28,16 @@ type Media = Database["public"]["Tables"]["media"]["Row"];
 interface FeatureImageFieldProps {
   initialImageId?: string | null;
   initialImageUrl?: string | null;
-  onImageIdChange?: (imageId: string | null) => void;
+  /**
+   * Reports a selection or a removal to the parent form.
+   *
+   * The resolved URL is handed over alongside the id because this field has already
+   * computed it for its own thumbnail, and the parent otherwise has no way to learn it
+   * until the server round-trips the new `feature_image_id` back into
+   * `initialImageUrl`. `PageForm` and `PostForm` use it to keep their share-card preview
+   * honest the instant an image is picked; the id remains the only persisted half.
+   */
+  onImageIdChange?: (imageId: string | null, imageUrl: string | null) => void;
   uploadFolder: string;
 }
 
@@ -103,13 +112,13 @@ export default function FeatureImageField({
     }
 
     setSelectedFeatureImage({ id: image.id, url: imageUrl });
-    onImageIdChange?.(image.id);
+    onImageIdChange?.(image.id, imageUrl);
     setIsModalOpen(false);
   };
 
   const handleRemoveImage = () => {
     setSelectedFeatureImage({ id: null, url: null });
-    onImageIdChange?.(null);
+    onImageIdChange?.(null, null);
   };
 
   const handleImageSelectKeyDown = (event: KeyboardEvent<HTMLDivElement>, image: Media) => {

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useAuth } from '../../../context/AuthContext';
 import { usePathname } from "next/navigation"
 import { toast } from "react-hot-toast"
@@ -29,18 +29,18 @@ interface FeedbackModalProps {
   sidebarOpen?: boolean
 }
 
-export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
-  const [mounted, setMounted] = useState(false)
-  const [open, setOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [subject, setSubject] = useState("suggestion")
+export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
+  const [mounted, setMounted] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [subject, setSubject] = useState("suggestion")
   const [message, setMessage] = useState("")
-  const { user, profile } = useAuth()
-  const pathname = usePathname()
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+  const { user, profile } = useAuth()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -73,30 +73,30 @@ export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
     } finally {
       setLoading(false)
     }
-  }
-
-  const trigger = (
-    <button
-      className={cn(
-        "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all w-full text-left",
-        "text-slate-600 hover:text-primary hover:bg-primary/5 dark:text-slate-300 dark:hover:bg-primary/10"
-      )}
-      type="button"
-    >
-      <MessageSquarePlus className="h-5 w-5" />
-      {sidebarOpen && <span>Feedback</span>}
-    </button>
-  )
-
-  if (!mounted) {
-    return trigger
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {trigger}
-      </DialogTrigger>
+  }
+
+  const trigger = (
+    <button
+      className={cn(
+        "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all w-full text-left",
+        "text-slate-600 hover:text-primary hover:bg-primary/5 dark:text-slate-300 dark:hover:bg-primary/10"
+      )}
+      type="button"
+    >
+      <MessageSquarePlus className="h-5 w-5" />
+      {sidebarOpen && <span>Feedback</span>}
+    </button>
+  )
+
+  if (!mounted) {
+    return trigger
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger}
+      </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Send Feedback</DialogTitle>

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

@@ -1,58 +1,58 @@
-'use client';
-
-import Link from 'next/link';
-import { useState } from 'react';
-import { Button } from '@nextblock-cms/ui';
-import { CreditCard, X } from 'lucide-react';
-import { useAuth } from '../../../context/AuthContext';
-import type { PaymentsReminder } from '../../../lib/cms/payments-reminder';
-
-/**
- * Shown when commerce is active but a payment provider isn't ready, so published
- * products cannot actually be bought. ADMIN-only: /cms/payments is an admin route, so a
- * WRITER would get a reminder they cannot act on. Dismissible for the session only —
- * this is a real revenue problem and should come back until it's fixed.
- */
-export default function PaymentsReminderBanner({ reminder }: { reminder: PaymentsReminder }) {
-  const { isAdmin } = useAuth();
-  const [dismissed, setDismissed] = useState(false);
-
-  if (!isAdmin || dismissed) return null;
-
-  const providerSummary = reminder.blocked
-    .map(({ label, missing }) => (missing.length ? `${label} (missing: ${missing.join(', ')})` : label))
-    .join(' and ');
-
-  return (
-    <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200">
-      <CreditCard className="mt-0.5 h-5 w-5 shrink-0" />
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium">
-          Your store can&rsquo;t take payments yet.
-        </p>
-        <p className="text-xs opacity-90">
-          {providerSummary} still needs setting up.{' '}
-          {reminder.affectedProducts > 0
-            ? `${reminder.affectedProducts} published ${
-                reminder.affectedProducts === 1 ? 'product' : 'products'
-              } cannot be bought — visitors see a "Contact the seller" form instead of Add to cart.`
-            : 'Products you publish will show visitors a "Contact the seller" form instead of Add to cart.'}
-        </p>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <Button asChild size="sm" variant="outline" className="border-amber-400">
-          <Link href="/cms/payments">Set up payments</Link>
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setDismissed(true)}
-          aria-label="Dismiss for now"
-          className="h-8 w-8"
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { Button } from '@nextblock-cms/ui';
+import { CreditCard, X } from 'lucide-react';
+import { useAuth } from '../../../context/AuthContext';
+import type { PaymentsReminder } from '../../../lib/cms/payments-reminder';
+
+/**
+ * Shown when commerce is active but a payment provider isn't ready, so published
+ * products cannot actually be bought. ADMIN-only: /cms/payments is an admin route, so a
+ * WRITER would get a reminder they cannot act on. Dismissible for the session only —
+ * this is a real revenue problem and should come back until it's fixed.
+ */
+export default function PaymentsReminderBanner({ reminder }: { reminder: PaymentsReminder }) {
+  const { isAdmin } = useAuth();
+  const [dismissed, setDismissed] = useState(false);
+
+  if (!isAdmin || dismissed) return null;
+
+  const providerSummary = reminder.blocked
+    .map(({ label, missing }) => (missing.length ? `${label} (missing: ${missing.join(', ')})` : label))
+    .join(' and ');
+
+  return (
+    <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200">
+      <CreditCard className="mt-0.5 h-5 w-5 shrink-0" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">
+          Your store can&rsquo;t take payments yet.
+        </p>
+        <p className="text-xs opacity-90">
+          {providerSummary} still needs setting up.{' '}
+          {reminder.affectedProducts > 0
+            ? `${reminder.affectedProducts} published ${
+                reminder.affectedProducts === 1 ? 'product' : 'products'
+              } cannot be bought — visitors see a "Contact the seller" form instead of Add to cart.`
+            : 'Products you publish will show visitors a "Contact the seller" form instead of Add to cart.'}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button asChild size="sm" variant="outline" className="border-amber-400">
+          <Link href="/cms/payments">Set up payments</Link>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setDismissed(true)}
+          aria-label="Dismiss for now"
+          className="h-8 w-8"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

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

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