create-nextblock 0.12.14 → 0.12.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.12.14",
+  "version": "0.12.16",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/(auth-pages)/two-factor/components/TwoFactorForm.tsx

@@ -25,10 +25,11 @@ export default function TwoFactorForm({
     type === 'email' && pendingEmailCode ? `Enter the code we sent to ${email}.` : null,
   );
 
-  const submit = () => {
+  const submit = (codeToSubmit: string = code) => {
+    if (codeToSubmit.length !== 6) return;
     setError(null);
     const formData = new FormData();
-    formData.append('code', code);
+    formData.append('code', codeToSubmit);
     formData.append('redirect_to', redirectTo);
     startTransition(async () => {
       try {
@@ -85,7 +86,13 @@ export default function TwoFactorForm({
             autoFocus
             maxLength={6}
             value={code}
-            onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+            onChange={(e) => {
+              const next = e.target.value.replace(/\D/g, '').slice(0, 6);
+              setCode(next);
+              // Auto-submit the moment a full 6-digit code is entered (typed, pasted,
+              // or filled by the OS one-time-code autofill) — no button press needed.
+              if (next.length === 6 && !isPending) submit(next);
+            }}
             placeholder="000000"
             className="tracking-[0.5em] text-center text-lg"
           />

package/templates/nextblock-template/app/[slug]/page.tsx

@@ -78,8 +78,12 @@ export async function generateMetadata(
   if (!preferredLocale) {
     try {
       const hdrs = await headers();
-      const al = hdrs.get("accept-language");
-      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+      // Proxy-detected locale first: it honors the CMS language-detection settings.
+      preferredLocale = hdrs.get("x-user-locale") || undefined;
+      if (!preferredLocale) {
+        const al = hdrs.get("accept-language");
+        if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+      }
     } catch {
       // ignore header lookup errors
     }
@@ -153,8 +157,12 @@ export default async function DynamicPage({ params: paramsPromise }: PageProps)
   if (!preferredLocale) {
     try {
       const hdrs = await headers();
-      const al = hdrs.get("accept-language");
-      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+      // Proxy-detected locale first: it honors the CMS language-detection settings.
+      preferredLocale = hdrs.get("x-user-locale") || undefined;
+      if (!preferredLocale) {
+        const al = hdrs.get("accept-language");
+        if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+      }
     } catch {
       // ignore header lookup errors
     }

package/templates/nextblock-template/app/api/cron/reset-sandbox/sandboxResetSql.ts

@@ -5706,6 +5706,30 @@ WHERE key IN (
 );
 
 
+-- >>> FROM: 00000000000011_language_detection_admin_only.sql <<<
+-- Restrict writes to the language-detection settings row to ADMIN only.
+--
+-- \`site_settings.language_detection_settings\` is a non-sensitive, anon-READABLE
+-- key (the request proxy reads it with the anon client to pick a visitor's first
+-- language). The CMS surfaces it under /cms/settings (ADMIN-only) and the server
+-- action guards with an ADMIN check, but the baseline write policies let ADMIN
+-- *or* WRITER write any non-sensitive key — so a WRITER could change site-wide
+-- detection directly via PostgREST. This migration adds the key to the ADMIN-only
+-- write group (INSERT/UPDATE/DELETE) to match the UI boundary, while leaving the
+-- SELECT policy untouched so the proxy's anon read keeps working.
+--
+-- Forward-only; recreates the three write policies idempotently.
+
+DROP POLICY IF EXISTS site_settings_insert_policy ON public.site_settings;
+CREATE POLICY site_settings_insert_policy ON public.site_settings FOR INSERT TO authenticated WITH CHECK ((((key <> ALL (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = ANY (ARRAY['ADMIN'::public.user_role, 'WRITER'::public.user_role]))) OR ((key = ANY (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = 'ADMIN'::public.user_role))));
+
+DROP POLICY IF EXISTS site_settings_update_policy ON public.site_settings;
+CREATE POLICY site_settings_update_policy ON public.site_settings FOR UPDATE TO authenticated USING ((((key <> ALL (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = ANY (ARRAY['ADMIN'::public.user_role, 'WRITER'::public.user_role]))) OR ((key = ANY (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = 'ADMIN'::public.user_role)))) WITH CHECK ((((key <> ALL (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = ANY (ARRAY['ADMIN'::public.user_role, 'WRITER'::public.user_role]))) OR ((key = ANY (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = 'ADMIN'::public.user_role))));
+
+DROP POLICY IF EXISTS site_settings_delete_policy ON public.site_settings;
+CREATE POLICY site_settings_delete_policy ON public.site_settings FOR DELETE TO authenticated USING ((((key <> ALL (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = ANY (ARRAY['ADMIN'::public.user_role, 'WRITER'::public.user_role]))) OR ((key = ANY (ARRAY['cortex_ai_openrouter_api_key'::text, 'bot_protection_secret'::text, 'email_secret'::text, 'payment_secret'::text, 'language_detection_settings'::text])) AND (( SELECT public.get_current_user_role() AS get_current_user_role) = 'ADMIN'::public.user_role))));
+
+
   -- Step D: Record the applied migrations in history (truncated in Step B) so
   -- \`npm run db:migrate:check\` reports up to date instead of listing every file as pending.
   INSERT INTO supabase_migrations.schema_migrations (version, name) VALUES
@@ -5719,7 +5743,8 @@ WHERE key IN (
     ('00000000000007', 'home_live_demo_promo_copy_fix'),
     ('00000000000008', 'setup_article_reorder'),
     ('00000000000009', 'home_live_demo_promo_contrast'),
-    ('00000000000010', 'drop_github_username')
+    ('00000000000010', 'drop_github_username'),
+    ('00000000000011', 'language_detection_admin_only')
   ON CONFLICT (version) DO NOTHING;
 
   -- Step E: Anchor preserved profiles

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

@@ -157,6 +157,7 @@ export default function FeatureImageField({
             </DialogHeader>
             <div className="p-1">
               <MediaUploadForm
+                compact
                 returnJustData={true}
                 defaultFolder={uploadFolder}
                 onUploadSuccess={(newlyUploadedMedia) => {

package/templates/nextblock-template/app/cms/media/components/MediaPickerDialog.tsx

@@ -158,12 +158,13 @@ export default function MediaPickerDialog({
         </DialogTrigger>
       )}
       <DialogContent className="sm:max-w-[650px] md:max-w-[800px] lg:max-w-[1000px] max-h-[90vh] flex flex-col">
-        <DialogHeader>
+        <DialogHeader className="shrink-0 pb-1">
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
 
-        <div className="p-1">
+        <div className="flex-1 min-h-0 overflow-y-auto pr-1">
           <MediaUploadForm
+            compact
             returnJustData={true}
             defaultFolder={defaultFolder}
             onUploadSuccess={(newMedia) => {
@@ -171,39 +172,40 @@ export default function MediaPickerDialog({
               handleSelect(newMedia);
             }}
           />
-        </div>
 
-        <Separator className="my-4" />
-
-        <div className="flex flex-col flex-grow overflow-hidden">
-          <h3 className="text-lg font-medium mb-3 text-center">Or Select from Library</h3>
-          <div className="relative mb-2">
-            <Input
-              type="search"
-              placeholder="Search library..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10"
-            />
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          </div>
-          {isLoading && filtered.length === 0 ? (
-            <div className="flex-grow flex items-center justify-center">
-              <p>Loading media...</p>
-            </div>
-          ) : loadError && filtered.length === 0 ? (
-            <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>
-          ) : filtered.length === 0 ? (
-            <div className="flex-grow flex items-center justify-center">
-              <p>No media found.</p>
+          <Separator className="my-3" />
+
+          <div className="flex flex-col">
+            <h3 className="text-base font-medium mb-2 text-center">Or Select from Library</h3>
+            <div className="sticky top-0 z-10 -mx-1 mb-2 bg-background px-1 pb-1">
+              <div className="relative">
+                <Input
+                  type="search"
+                  placeholder="Search library..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10"
+                />
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              </div>
             </div>
-          ) : (
-            <div className="flex flex-wrap gap-3 overflow-y-auto min-h-0 pr-2 pb-2">
+            {isLoading && filtered.length === 0 ? (
+              <div className="flex items-center justify-center py-10">
+                <p>Loading media...</p>
+              </div>
+            ) : loadError && filtered.length === 0 ? (
+              <div className="flex flex-col items-center justify-center gap-3 py-10 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>
+            ) : filtered.length === 0 ? (
+              <div className="flex items-center justify-center py-10">
+                <p>No media found.</p>
+              </div>
+            ) : (
+              <div className="flex flex-wrap gap-3 pb-2">
               {filtered.map((media: Media) => {
                 const previewPath = resolveMediaPreviewPath(media);
                 const previewSrc = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
@@ -241,8 +243,9 @@ export default function MediaPickerDialog({
                   </button>
                 );
               })}
-            </div>
-          )}
+              </div>
+            )}
+          </div>
         </div>
       </DialogContent>
     </Dialog>

package/templates/nextblock-template/app/cms/media/components/MediaUploadForm.tsx

@@ -21,11 +21,13 @@ interface MediaUploadFormProps {
   // And will use onUploadSuccess instead of router.refresh().
   returnJustData?: boolean;
   defaultFolder?: string; // Optional pre-populated folder
+  // If true, tightens spacing/heights so the form fits inside a modal on shorter screens.
+  compact?: boolean;
 }
 
 import { useUploadFolder } from "../UploadFolderContext";
 
-export default function MediaUploadForm({ onUploadSuccess, returnJustData, defaultFolder }: MediaUploadFormProps) {
+export default function MediaUploadForm({ onUploadSuccess, returnJustData, defaultFolder, compact }: MediaUploadFormProps) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [file, setFile] = useState<File | null>(null);
@@ -292,26 +294,27 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
   };
 
   return (
-    <div className="p-6 border rounded-lg shadow-sm bg-card mb-6">
-      <div role="group" aria-label="Upload new media" className="space-y-4">
+    <div className={`border rounded-lg shadow-sm bg-card ${compact ? "p-4" : "p-6 mb-6"}`}>
+      <div role="group" aria-label="Upload new media" className={compact ? "space-y-3" : "space-y-4"}>
         <div>
-          <Label htmlFor="media-file" className="text-base font-medium">Upload New Media</Label>
-          <div className="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <div>
-              <Label htmlFor="media-folder" className="text-sm">Folder (e.g., uploads/images/)</Label>
+          <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
+            <Label htmlFor="media-file" className="text-base font-medium">Upload New Media</Label>
+            <div className="flex items-center gap-2">
+              <Label htmlFor="media-folder" className="whitespace-nowrap text-sm text-muted-foreground">Upload Folder:</Label>
               <Input
                 id="media-folder"
                 placeholder="uploads/"
                 value={folder}
                 onChange={(e) => setFolder(e.target.value)}
                 onKeyDown={handleFolderKeyDown}
+                className="h-9 w-44 sm:w-56"
               />
             </div>
           </div>
           <div className="mt-2 flex items-center justify-center w-full">
             <label
               htmlFor="media-file-input"
-              className={`flex flex-col items-center justify-center w-full h-40 border-2 border-dashed rounded-lg cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors ${
+              className={`flex flex-col items-center justify-center w-full ${compact ? "h-28" : "h-40"} border-2 border-dashed rounded-lg cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors ${
                 isDraggingOver ? "border-primary bg-primary-foreground/20" : "border-input"
               }`}
               onDrop={handleDrop}
@@ -319,8 +322,8 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
               onDragEnter={handleDragEnter}
               onDragLeave={handleDragLeave}
             >
-              <div className="flex flex-col items-center justify-center pt-5 pb-6 pointer-events-none"> {/* pointer-events-none for children */}
-                <UploadCloud className="w-10 h-10 mb-3 text-muted-foreground" />
+              <div className={`flex flex-col items-center justify-center pointer-events-none ${compact ? "pt-3 pb-4" : "pt-5 pb-6"}`}> {/* pointer-events-none for children */}
+                <UploadCloud className={`text-muted-foreground ${compact ? "w-8 h-8 mb-2" : "w-10 h-10 mb-3"}`} />
                 <p className="mb-2 text-sm text-muted-foreground">
                   <span className="font-semibold">Click to upload</span> or drag and drop
                 </p>
@@ -332,7 +335,7 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
           {previewUrl && file && file.type.startsWith("image/") && (
             <div className="mt-4">
               <Label>Preview:</Label>
-              <Image src={previewUrl} alt="Preview" width={300} height={192} className="mt-2 rounded-md max-h-48 w-auto object-contain border" />
+              <Image src={previewUrl} alt="Preview" width={300} height={192} className={`mt-2 rounded-md w-auto object-contain border ${compact ? "max-h-32" : "max-h-48"}`} />
             </div>
           )}
           {file && <p className="text-sm mt-2 text-muted-foreground">Selected: {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)</p>}

package/templates/nextblock-template/app/cms/products/ProductFormClientShell.tsx

@@ -3,32 +3,80 @@
 import React from 'react';
 import { ProductForm } from '@nextblock-cms/ecommerce';
 import MediaPickerDialog from '../media/components/MediaPickerDialog';
-type ProductFormClientShellProps = React.ComponentProps<typeof ProductForm>;
+import DraftStatusActions from '../components/DraftStatusActions';
+
+type ProductFormProps = React.ComponentProps<typeof ProductForm>;
+type ProductUpdateAction = NonNullable<ProductFormProps['updateAction']>;
+
+type ProductFormClientShellProps = ProductFormProps & {
+  /** Present only in edit mode; drives the "Unpublished Draft" toolbar. */
+  productId?: string;
+  /** Draft existence as computed on the server for the current render. */
+  serverHasDraft?: boolean;
+};
 
 const productFormSkeletonRows = ['details', 'description', 'media', 'inventory'];
 
-export default function ProductFormClientShell(props: ProductFormClientShellProps) {
+export default function ProductFormClientShell({
+  productId,
+  serverHasDraft = false,
+  updateAction,
+  ...props
+}: ProductFormClientShellProps) {
   const [isMounted, setIsMounted] = React.useState(false);
+  // The draft toolbar is gated on the server-computed `hasDraft`, but the form
+  // autosave writes a draft WITHOUT revalidating the route (revalidating would
+  // re-init the form and loop the autosave — see updateProductAction). Track
+  // draft existence on the client so the toolbar can appear the moment an
+  // autosave persists a draft, without a server refetch.
+  const [hasDraft, setHasDraft] = React.useState(serverHasDraft);
 
   React.useEffect(() => {
     setIsMounted(true);
   }, []);
 
-  if (!isMounted) {
-    return <ProductFormShellSkeleton />;
-  }
+  // Keep in sync with the server whenever it reports a draft (e.g. block edits
+  // in BlockEditorArea call router.refresh(), which re-runs the page). Only ever
+  // latch ON here — publish/discard reload the whole page, which resets state.
+  React.useEffect(() => {
+    if (serverHasDraft) {
+      setHasDraft(true);
+    }
+  }, [serverHasDraft]);
+
+  // Reveal the toolbar as soon as a form autosave succeeds. The autosave already
+  // upserted a product_drafts row, so a draft now exists.
+  const wrappedUpdateAction = React.useCallback(
+    async (data: Parameters<ProductUpdateAction>[0]) => {
+      const result = await updateAction!(data);
+      setHasDraft(true);
+      return result;
+    },
+    [updateAction]
+  );
 
   return (
-    <ProductForm
-      {...props}
-      mediaPickerNode={
-        <MediaPickerDialog
-          triggerLabel="+ Add Image"
-          triggerVariant="outline"
-          defaultFolder="uploads/products/"
+    <>
+      {productId ? (
+        <DraftStatusActions parentId={productId} parentType="product" hasDraft={hasDraft} />
+      ) : null}
+      {isMounted ? (
+        <ProductForm
+          {...props}
+          hasOpenDraft={hasDraft}
+          updateAction={updateAction ? wrappedUpdateAction : undefined}
+          mediaPickerNode={
+            <MediaPickerDialog
+              triggerLabel="+ Add Image"
+              triggerVariant="outline"
+              defaultFolder="uploads/products/"
+            />
+          }
         />
-      }
-    />
+      ) : (
+        <ProductFormShellSkeleton />
+      )}
+    </>
   );
 }
 

package/templates/nextblock-template/app/cms/products/[id]/edit/page.tsx

@@ -13,7 +13,6 @@ import {
   DropdownMenuTrigger,
 } from '@nextblock-cms/ui';
 import ProductFormClientShell from '../../ProductFormClientShell';
-import DraftStatusActions from '../../../components/DraftStatusActions';
 import {
   getCmsProduct,
   getEnabledPaymentProviders,
@@ -191,7 +190,6 @@ export default async function EditProductPage({
 
   return (
     <div className="space-y-8 w-full max-w-[1400px] mx-auto px-6 py-8">
-      <DraftStatusActions parentId={product.id} parentType="product" hasDraft={hasDraft} />
       <CortexAiPageContextRegistrar
         context={{
           contentType: 'product',
@@ -279,6 +277,8 @@ export default async function EditProductPage({
       </div>
 
       <ProductFormClientShell
+        productId={product.id}
+        serverHasDraft={hasDraft}
         initialData={normalizedInitialData}
         isEdit
         availableLanguagesProp={languages}

package/templates/nextblock-template/app/cms/settings/languages/actions.ts

@@ -2,9 +2,15 @@
 "use server";
 
 import { createClient } from "@nextblock-cms/db/server";
-import { revalidatePath } from "next/cache";
+import { revalidatePath, updateTag } from "next/cache";
 import { redirect } from "next/navigation";
 import type { Database } from "@nextblock-cms/db";
+import {
+  LANGUAGE_DETECTION_SETTING_KEY,
+  LANGUAGE_DETECTION_CACHE_TAG,
+  normalizeLanguageDetectionSettings,
+  type LanguageDetectionSettings,
+} from "../../../../lib/i18n/detection";
 
 type Language = Database["public"]["Tables"]["languages"]["Row"];
 
@@ -260,3 +266,49 @@ export async function deleteLanguage(languageId: number) {
   revalidatePath("/");
   redirect("/cms/settings/languages?success=Language deleted successfully. All associated content has also been removed.");
 }
+
+// --- Language detection settings (site_settings.language_detection_settings) ---
+
+export async function getLanguageDetectionSettings(): Promise<LanguageDetectionSettings> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("site_settings")
+    .select("value")
+    .eq("key", LANGUAGE_DETECTION_SETTING_KEY)
+    .maybeSingle();
+
+  if (error) {
+    console.error("Error fetching language detection settings:", error);
+  }
+  // Absent row or error = defaults (browser detection, remembered choice).
+  return normalizeLanguageDetectionSettings(error ? null : data?.value);
+}
+
+export async function updateLanguageDetectionSettings(
+  input: LanguageDetectionSettings,
+): Promise<{ success?: string; error?: string }> {
+  const supabase = createClient();
+
+  if (!(await verifyAdmin(supabase))) {
+    return { error: "Unauthorized: Admin role required." };
+  }
+
+  // Never trust the client payload shape — coerce to a valid settings object.
+  const settings = normalizeLanguageDetectionSettings(input);
+
+  const { error } = await supabase
+    .from("site_settings")
+    .upsert({ key: LANGUAGE_DETECTION_SETTING_KEY, value: settings });
+
+  if (error) {
+    console.error("Error saving language detection settings:", error);
+    return { error: `Failed to save detection settings: ${error.message}` };
+  }
+
+  updateTag(LANGUAGE_DETECTION_CACHE_TAG);
+  revalidatePath("/cms/settings/languages");
+  revalidatePath("/", "layout");
+  // The proxy caches detection config in-memory for up to a minute per worker,
+  // so the change isn't instant for new visitors — set that expectation here.
+  return { success: "Language detection settings saved. Changes reach new visitors within about a minute." };
+}