create-nextblock 0.12.16 → 0.13.1

package/package.json

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

package/templates/nextblock-template/app/actions/interactions.ts

@@ -348,12 +348,35 @@ export async function saveNotificationEmails(emails: string) {
     return { error: "Unauthorized. Admin role required." };
   }
 
-  // Basic validation of emails
-  const cleaned = emails
+  // Validate every address, dedupe (case-insensitive), and normalize to lowercase.
+  // Mirrors the client-side check so a crafted/legacy payload can't persist junk.
+  const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const tokens = emails
     .split(",")
     .map((e) => e.trim())
-    .filter(Boolean)
-    .join(", ");
+    .filter(Boolean);
+
+  const seen = new Set<string>();
+  const valid: string[] = [];
+  const invalid: string[] = [];
+  for (const token of tokens) {
+    const lower = token.toLowerCase();
+    if (!emailRe.test(lower)) {
+      invalid.push(token);
+      continue;
+    }
+    if (seen.has(lower)) continue;
+    seen.add(lower);
+    valid.push(lower);
+  }
+
+  if (invalid.length > 0) {
+    return {
+      error: `Invalid email address${invalid.length > 1 ? "es" : ""}: ${invalid.join(", ")}`,
+    };
+  }
+
+  const cleaned = valid.join(", ");
 
   try {
     const { error } = await supabase

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

@@ -55,7 +55,7 @@ import {
   createCustomBlockDefinition,
   updateCustomBlockDefinition,
 } from "../actions";
-import { orderCustomBlockFieldsByLayout } from "@nextblock-cms/utils";
+import { orderCustomBlockFieldsByLayout, cn } from "@nextblock-cms/utils";
 import type { CustomBlockDefinition, CustomBlockField } from "@nextblock-cms/utils";
 
 // Allowed container and field tags
@@ -544,6 +544,14 @@ export function BlockComposer({ initialData, mode }: BlockComposerProps) {
       toast.error("Block must contain at least one field.");
       return;
     }
+    if (fields.some((field) => !field.key.trim())) {
+      toast.error("Every property needs a key.");
+      return;
+    }
+    if (duplicateFieldKeys.size > 0) {
+      toast.error("Property keys must be unique — fix the highlighted duplicate keys.");
+      return;
+    }
 
     const payload = {
       name,
@@ -823,10 +831,30 @@ export function BlockComposer({ initialData, mode }: BlockComposerProps) {
     return used;
   }, [layoutFieldRefs, selectedNodePath]);
 
+  // Property keys that appear on more than one field. Duplicate keys are invalid (a key
+  // must be unique), so they're flagged in the editor rather than silently dropping a field.
+  const duplicateFieldKeys = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const field of fields) {
+      counts.set(field.key, (counts.get(field.key) ?? 0) + 1);
+    }
+    const dups = new Set<string>();
+    for (const [key, count] of counts) {
+      if (count > 1) dups.add(key);
+    }
+    return dups;
+  }, [fields]);
+
   // Keep the Properties Schema list itself ordered to match the layout blueprint,
   // so the fields editor mirrors the visual tree order everywhere.
   useEffect(() => {
     setFields((prev) => {
+      // While any keys collide, skip layout-driven reordering: orderCustomBlockFieldsByLayout
+      // dedupes by key and would silently drop the colliding field. Keep the list intact so
+      // the duplicate can be flagged (red border) and fixed by the user instead of vanishing.
+      const keys = prev.map((field) => field.key);
+      if (new Set(keys).size !== keys.length) return prev;
+
       const ordered = orderCustomBlockFieldsByLayout(prev, layoutSchema);
       const unchanged =
         ordered.length === prev.length && ordered.every((field, index) => field === prev[index]);
@@ -1063,8 +1091,18 @@ export function BlockComposer({ initialData, mode }: BlockComposerProps) {
                               value={field.key}
                               placeholder="e.g. quote"
                               onChange={(e) => updateField(idx, { key: e.target.value })}
-                              className="h-8 font-mono text-xs"
+                              aria-invalid={duplicateFieldKeys.has(field.key)}
+                              className={cn(
+                                "h-8 font-mono text-xs",
+                                duplicateFieldKeys.has(field.key) &&
+                                  "border-destructive focus-visible:ring-destructive"
+                              )}
                             />
+                            {duplicateFieldKeys.has(field.key) && (
+                              <p className="text-[10px] font-medium text-destructive">
+                                Duplicate key — property keys must be unique.
+                              </p>
+                            )}
                           </div>
                           <div className="md:col-span-4 space-y-1">
                             <Label className="text-[10px] uppercase tracking-wide font-semibold text-muted-foreground">Label</Label>

package/templates/nextblock-template/app/cms/interactions/EmailRecipientsInput.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "@nextblock-cms/utils";
+
+// Same address shape used elsewhere in the app (createUser). Intentionally pragmatic
+// rather than RFC-exhaustive: something@something.tld with no whitespace.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function isValidEmail(value: string): boolean {
+  return EMAIL_RE.test(value.trim().toLowerCase());
+}
+
+export interface EmailRecipientsInputHandle {
+  /**
+   * Commit any text still sitting in the input, then return the full recipient list.
+   * Returns `null` (and shows an inline error) when that pending text is not a valid
+   * email — the caller should abort the save in that case. Reading the returned array
+   * directly (rather than parent state) avoids a stale-closure race on save.
+   */
+  flush: () => string[] | null;
+}
+
+interface EmailRecipientsInputProps {
+  value: string[];
+  onChange: (emails: string[]) => void;
+  disabled?: boolean;
+  inputId?: string;
+}
+
+const EmailRecipientsInput = forwardRef<EmailRecipientsInputHandle, EmailRecipientsInputProps>(
+  function EmailRecipientsInput({ value, onChange, disabled, inputId }, ref) {
+    const [inputValue, setInputValue] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const hasEmail = (list: string[], email: string) =>
+      list.some((e) => e.toLowerCase() === email);
+
+    // Commit a single typed token. Returns the resulting list, or null when invalid.
+    const commit = (raw: string): string[] | null => {
+      const email = raw.trim().toLowerCase();
+      if (!email) return value;
+      if (!EMAIL_RE.test(email)) {
+        setError(`"${raw.trim()}" is not a valid email address.`);
+        return null;
+      }
+      if (hasEmail(value, email)) {
+        // Already a recipient — harmless. Clear the input without raising an error so
+        // it can't collide with the save-success banner when committed via Save/flush.
+        setInputValue("");
+        setError(null);
+        return value;
+      }
+      const next = [...value, email];
+      onChange(next);
+      setInputValue("");
+      setError(null);
+      return next;
+    };
+
+    // Add several tokens at once (paste of a comma/space/newline separated list).
+    const addMany = (raw: string) => {
+      const tokens = raw
+        .split(/[,\s;]+/)
+        .map((t) => t.trim())
+        .filter(Boolean);
+      if (tokens.length === 0) return;
+
+      const next = [...value];
+      const invalid: string[] = [];
+      for (const token of tokens) {
+        const email = token.toLowerCase();
+        if (!EMAIL_RE.test(email)) {
+          invalid.push(token);
+          continue;
+        }
+        if (!hasEmail(next, email)) next.push(email);
+      }
+      onChange(next);
+      setInputValue("");
+      setError(
+        invalid.length
+          ? `Skipped ${invalid.length} invalid address${invalid.length > 1 ? "es" : ""}: ${invalid.join(", ")}`
+          : null,
+      );
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" || e.key === ",") {
+        e.preventDefault();
+        commit(inputValue);
+      } else if (e.key === "Backspace" && inputValue === "" && value.length > 0) {
+        onChange(value.slice(0, -1));
+        setError(null);
+      } else if (error) {
+        setError(null);
+      }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+      const text = e.clipboardData.getData("text");
+      if (/[,\s;]/.test(text)) {
+        e.preventDefault();
+        // Prepend whatever is already typed so a pasted "@corp.com, ..." completes the
+        // in-progress "support" rather than discarding it.
+        addMany(inputValue + text);
+      }
+    };
+
+    const removeAt = (idx: number) => {
+      onChange(value.filter((_, i) => i !== idx));
+      setError(null);
+      inputRef.current?.focus();
+    };
+
+    // `commit` closes over the latest inputValue/value, so re-create the handle when
+    // either changes to keep flush() reading current state.
+    useImperativeHandle(ref, () => ({ flush: () => commit(inputValue) }), [inputValue, value]);
+
+    return (
+      <div className="space-y-1.5">
+        <div
+          onClick={() => inputRef.current?.focus()}
+          className={cn(
+            "flex flex-wrap gap-1.5 min-h-[84px] w-full items-start content-start bg-background border rounded-xl px-2.5 py-2 text-sm cursor-text transition-colors",
+            "focus-within:ring-1 focus-within:ring-primary focus-within:border-primary",
+            error ? "border-destructive" : "border-border",
+            disabled && "opacity-60 pointer-events-none",
+          )}
+        >
+          {value.map((email, idx) => (
+            <span
+              key={email}
+              className="inline-flex items-center gap-1 h-7 pl-2.5 pr-1 rounded-full bg-secondary text-secondary-foreground text-xs font-medium"
+            >
+              {email}
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  removeAt(idx);
+                }}
+                className="inline-flex items-center justify-center h-4 w-4 rounded-full text-muted-foreground hover:text-foreground hover:bg-black/10 dark:hover:bg-white/15 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary transition-colors"
+                aria-label={`Remove ${email}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </span>
+          ))}
+          <input
+            id={inputId}
+            ref={inputRef}
+            type="email"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onBlur={() => commit(inputValue)}
+            disabled={disabled}
+            aria-invalid={!!error}
+            placeholder={value.length === 0 ? "admin@example.com" : "Add another…"}
+            className="flex-1 min-w-[160px] h-7 bg-transparent outline-none placeholder:text-muted-foreground"
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-[10px] text-muted-foreground">
+            Type an address and press Enter or comma to add it.
+          </span>
+          {value.length > 0 && (
+            <span className="text-[10px] font-medium text-muted-foreground shrink-0">
+              {value.length} recipient{value.length > 1 ? "s" : ""}
+            </span>
+          )}
+        </div>
+
+        {error && (
+          <p role="alert" className="text-xs font-medium text-destructive">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+export default EmailRecipientsInput;

package/templates/nextblock-template/app/cms/interactions/InteractionsModerationClient.tsx

@@ -4,8 +4,17 @@ import React, { useState, useTransition } from "react";
 import { Button } from "@nextblock-cms/ui";
 import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui";
 import { Badge } from "@nextblock-cms/ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@nextblock-cms/ui";
 import { updateInteractionStatus, saveNotificationEmails } from "../../actions/interactions";
 import { cn } from "@nextblock-cms/utils";
+import EmailRecipientsInput, { type EmailRecipientsInputHandle } from "./EmailRecipientsInput";
 import {
   MessageSquare,
   Check,
@@ -31,44 +40,100 @@ export default function InteractionsModerationClient({
 }: InteractionsModerationClientProps) {
   const [interactions, setInteractions] = useState<any[]>(initialInteractions);
 
-  // Notification settings states
-  const [emailsInput, setEmailsInput] = useState("");
+  // Notification settings states. `emails` is the working (editable) list; `savedEmails`
+  // mirrors what is persisted, so cancelling can revert unsaved edits.
+  const [emails, setEmails] = useState<string[]>([]);
+  const [savedEmails, setSavedEmails] = useState<string[]>([]);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [savingEmails, setSavingEmails] = useState(false);
   const [settingsError, setSettingsError] = useState<string | null>(null);
   const [settingsSuccess, setSettingsSuccess] = useState<string | null>(null);
+  const recipientsRef = React.useRef<EmailRecipientsInputHandle>(null);
+  const autoCloseTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearAutoClose = () => {
+    if (autoCloseTimer.current) {
+      clearTimeout(autoCloseTimer.current);
+      autoCloseTimer.current = null;
+    }
+  };
+
+  // Cancel any pending success auto-close timer on unmount.
+  React.useEffect(() => clearAutoClose, []);
+
+  const parseEmails = (raw: string | undefined | null): string[] =>
+    (raw || "")
+      .split(",")
+      .map((e) => e.trim())
+      .filter(Boolean);
 
   React.useEffect(() => {
     if (isAdmin) {
       import("../../actions/interactions").then(({ getNotificationEmails }) => {
         getNotificationEmails().then((res) => {
           if (res.success && res.emails) {
-            setEmailsInput(res.emails);
+            const list = parseEmails(res.emails);
+            setEmails(list);
+            setSavedEmails(list);
           }
         });
       });
     }
   }, [isAdmin]);
 
+  const openSettings = () => {
+    // Start from the last-saved list with a clean slate — discards any edits abandoned
+    // in a previous open, and clears stale success/error banners.
+    clearAutoClose();
+    setEmails(savedEmails);
+    setSettingsError(null);
+    setSettingsSuccess(null);
+    setIsSettingsOpen(true);
+  };
+
+  const closeSettings = () => {
+    if (savingEmails) return; // don't dismiss mid-save
+    clearAutoClose();
+    setEmails(savedEmails); // revert unsaved edits
+    setSettingsError(null);
+    setSettingsSuccess(null);
+    setIsSettingsOpen(false);
+  };
+
   const handleSaveEmails = async () => {
+    // Commit any address still typed in the input. `null` means it's invalid — the
+    // input already shows the inline error, so don't proceed to save.
+    const finalList = recipientsRef.current?.flush();
+    if (finalList === null) return;
+    const list = finalList ?? emails;
+
+    clearAutoClose(); // supersede any prior success timer
     setSavingEmails(true);
     setSettingsError(null);
     setSettingsSuccess(null);
 
-    const res = await saveNotificationEmails(emailsInput);
-    setSavingEmails(false);
-
-    if (res.error) {
-      setSettingsError(res.error);
-    } else {
-      setSettingsSuccess("Notification settings saved successfully.");
-      if (res.emails) {
-        setEmailsInput(res.emails);
+    try {
+      const res = await saveNotificationEmails(list.join(", "));
+      if (res.error) {
+        setSettingsError(res.error);
+      } else {
+        const saved = parseEmails(res.emails);
+        setEmails(saved);
+        setSavedEmails(saved);
+        setSettingsSuccess("Notification settings saved successfully.");
+        // Auto-close after a beat. Tracked so a reopen/second save cancels it.
+        autoCloseTimer.current = setTimeout(() => {
+          autoCloseTimer.current = null;
+          setSettingsSuccess(null);
+          setIsSettingsOpen(false);
+        }, 1500);
       }
-      setTimeout(() => {
-        setSettingsSuccess(null);
-        setIsSettingsOpen(false);
-      }, 1500);
+    } catch {
+      // The server action rejected (offline, 500, auth outage). Surface it — the
+      // `finally` re-enables the close paths so the dialog can never get stuck.
+      setSettingsError("Couldn't save settings. Check your connection and try again.");
+    } finally {
+      setSavingEmails(false);
     }
   };
   const [filterType, setFilterType] = useState<"all" | "review" | "comment">("all");
@@ -141,7 +206,7 @@ export default function InteractionsModerationClient({
         {isAdmin && (
           <div className="flex items-center gap-2 self-start md:self-auto">
             <Button
-              onClick={() => setIsSettingsOpen(true)}
+              onClick={openSettings}
               className="flex items-center gap-2 text-xs"
               variant="outline"
             >
@@ -347,62 +412,64 @@ export default function InteractionsModerationClient({
         )}
       </div>
 
-      {/* Settings Modal */}
-      {isSettingsOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/45 backdrop-blur-sm animate-in fade-in duration-200">
-          <div className="bg-background border border-border rounded-2xl max-w-md w-full p-6 shadow-xl space-y-4 animate-in zoom-in-95 duration-200">
-            <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
-                <Mail className="h-5 w-5 text-primary" />
-                Notification Settings
-              </h3>
-              <button
-                onClick={() => setIsSettingsOpen(false)}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-            <p className="text-sm text-muted-foreground text-left">
+      {/* Settings Modal — Radix Dialog handles focus trap/restore, Escape, and overlay
+          click. onOpenChange fires for every close path; closeSettings() blocks dismissal
+          mid-save and reverts unsaved edits. */}
+      <Dialog
+        open={isSettingsOpen}
+        onOpenChange={(open) => {
+          if (!open) closeSettings();
+          else setIsSettingsOpen(true);
+        }}
+      >
+        <DialogContent
+          className="max-w-md rounded-2xl space-y-4"
+          onInteractOutside={(e) => {
+            if (savingEmails) e.preventDefault();
+          }}
+          onEscapeKeyDown={(e) => {
+            if (savingEmails) e.preventDefault();
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Mail className="h-5 w-5 text-primary" />
+              Notification Settings
+            </DialogTitle>
+            <DialogDescription>
               Configure which email addresses receive notification alerts when new pending reviews or comments are submitted.
-            </p>
-            <div className="space-y-1.5 text-left">
-              <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block">
-                Email Recipients
-              </label>
-              <textarea
-                value={emailsInput}
-                onChange={(e) => setEmailsInput(e.target.value)}
-                placeholder="admin@example.com, moderator@example.com"
-                className="w-full min-h-[80px] bg-background border border-border rounded-xl px-3 py-2 text-sm text-foreground focus:ring-1 focus:ring-primary focus:outline-none"
-              />
-              <span className="text-[10px] text-muted-foreground">
-                Enter a comma-separated list of email addresses.
-              </span>
-            </div>
-
-            {settingsError && <div className="text-xs font-medium text-destructive text-left">{settingsError}</div>}
-            {settingsSuccess && <div className="text-xs font-medium text-emerald-600 text-left">{settingsSuccess}</div>}
-
-            <div className="flex justify-end gap-3 pt-2">
-              <Button
-                variant="ghost"
-                onClick={() => setIsSettingsOpen(false)}
-                disabled={savingEmails}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleSaveEmails}
-                disabled={savingEmails}
-                className="min-w-[100px]"
-              >
-                {savingEmails ? "Saving..." : "Save Settings"}
-              </Button>
-            </div>
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-1.5 text-left">
+            <label
+              htmlFor="notification-emails-input"
+              className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block"
+            >
+              Email Recipients
+            </label>
+            <EmailRecipientsInput
+              ref={recipientsRef}
+              inputId="notification-emails-input"
+              value={emails}
+              onChange={setEmails}
+              disabled={savingEmails}
+            />
           </div>
-        </div>
-      )}
+
+          {settingsError && <div role="alert" className="text-xs font-medium text-destructive text-left">{settingsError}</div>}
+          {settingsSuccess && <div className="text-xs font-medium text-emerald-600 text-left">{settingsSuccess}</div>}
+
+          <DialogFooter className="gap-3 sm:gap-2">
+            <Button variant="ghost" onClick={closeSettings} disabled={savingEmails}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveEmails} disabled={savingEmails} className="min-w-[100px]">
+              {savingEmails ? "Saving..." : "Save Settings"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

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

@@ -17,6 +17,7 @@ async function getUserAndProfileData(userId: string): Promise<{
   authUser: AuthUser;
   profile: Profile | null;
   addresses: Awaited<ReturnType<typeof getDefaultUserAddresses>>;
+  isSoleAdmin: boolean;
 } | null> {
 
   // Fetch user from auth.users
@@ -64,7 +65,24 @@ async function getUserAndProfileData(userId: string): Promise<{
 
   const addresses = await getDefaultUserAddresses(userId, serviceSupabase as any);
 
-  return { authUser: simplifiedAuthUser, profile: profileData as Profile | null, addresses };
+  // Is this user the only remaining Admin? If so, the edit form locks the role selector
+  // so the last admin can't demote themselves out of CMS access (the server action also
+  // guards this — the lock just prevents hitting that error).
+  let isSoleAdmin = false;
+  if ((profileData as Profile | null)?.role === 'ADMIN') {
+    const { count } = await serviceSupabase
+      .from('profiles')
+      .select('*', { count: 'exact', head: true })
+      .eq('role', 'ADMIN');
+    isSoleAdmin = count === 1;
+  }
+
+  return {
+    authUser: simplifiedAuthUser,
+    profile: profileData as Profile | null,
+    addresses,
+    isSoleAdmin,
+  };
 }
 
 export default async function EditUserPage(props: { params: Promise<{ id: string }> }) {
@@ -90,6 +108,7 @@ export default async function EditUserPage(props: { params: Promise<{ id: string
         userToEditProfile={userData.profile}
         userToEditAddresses={userData.addresses}
         formAction={updateUserActionWithId}
+        lockRole={userData.isSoleAdmin}
       />
     </div>
   );