create-nextblock 0.15.10 → 0.16.2

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

@@ -1,7 +1,7 @@
 // app/cms/blocks/editors/ImageBlockEditor.tsx
 "use client";
 
-import React, { useState, useTransition } from 'react';
+import React, { useRef, useState, useTransition } from 'react';
 import Image from 'next/image';
 import { Label } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
@@ -19,11 +19,25 @@ export type ImageBlockContent = {
     height: number | null;
     blur_data_url: string | null;
 };
-import { ImageIcon, X as XIcon, Link as LinkIcon, DownloadCloud } from 'lucide-react';
+import { ImageIcon, X as XIcon, Link as LinkIcon, DownloadCloud, Loader2, Sparkles } from 'lucide-react';
+import { toast } from 'sonner';
 import MediaPickerDialog from "../../media/components/MediaPickerDialog";
 import { BlockEditorProps } from '../components/BlockEditorModal';
 import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
 import { importExternalImageToMedia } from "../../media/import-external-image";
+import { useCortexAiActive } from '../../components/CortexAiActiveContext';
+import { useCortexAiPageContext } from '../../components/CortexAiPageContext';
+import { buildCortexAiRequestHeaders } from '../../../../lib/cortex-ai/sandbox-headers';
+import {
+  buildAltTextContext,
+  toAbsoluteImageUrl,
+  UNRESOLVABLE_IMAGE_URL_MESSAGE,
+} from '../../../../lib/cortex-ai/alt-text-request';
+import {
+  altTextImageIdentity,
+  resolveAltTextWriteBack,
+  STALE_ALT_TEXT_MESSAGE,
+} from '../../../../lib/seo/alt-text-write-back';
 
 const deriveAltFromFilename = (name: string) => {
   const lastDot = name.lastIndexOf('.');
@@ -38,6 +52,30 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
   const [importError, setImportError] = useState<string | null>(null);
   const [isImporting, startImport] = useTransition();
 
+  // Cortex AI is a premium package. Gating the affordance on activation (rather than
+  // letting the button 403) is the difference between a feature the operator has not
+  // bought and a feature that looks broken.
+  const isCortexAiActive = useCortexAiActive();
+  const cortexAiPageContext = useCortexAiPageContext();
+  const [isGeneratingAltText, setIsGeneratingAltText] = useState(false);
+  // Kept separate from `importError` so an alt-text failure never clears — or is cleared
+  // by — an unrelated "save to library" failure sitting a few lines above it.
+  const [altTextError, setAltTextError] = useState<string | null>(null);
+
+  /**
+   * Live mirrors of the two values that describe which image this block holds.
+   *
+   * The alt-text generation below is the only async write-back in this editor, and it is
+   * the only place that must read these AFTER an await. Refs updated during render (the
+   * same pattern `RobotsCard` uses for its Ctrl+S handler) give that continuation the
+   * current values instead of the ones its closure captured when the button was clicked,
+   * which is what stops a slow vision response from overwriting a newer edit.
+   */
+  const contentRef = useRef(content);
+  contentRef.current = content;
+  const selectedMediaObjectKeyRef = useRef(selectedMediaObjectKey);
+  selectedMediaObjectKeyRef.current = selectedMediaObjectKey;
+
   const handleSelectMediaFromLibrary = (mediaItem: Media) => {
     const newAlt = mediaItem.description && mediaItem.description.trim().length > 0
       ? mediaItem.description
@@ -122,6 +160,122 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
   const displayImageUrl = resolveMediaUrl(displayObjectKey);
   const hasImage = Boolean(displayObjectKey || content.external_url);
 
+  /**
+   * Ask Cortex AI to describe the image currently in this block.
+   *
+   * Three things about this deserve stating. First, the URL: `resolveMediaUrl()` hands back
+   * a RELATIVE `/${objectKey}` whenever `NEXT_PUBLIC_R2_BASE_URL` is unset — which is the
+   * default on the native Supabase-storage backend — and the alt-text route cannot use
+   * that, because the AI SDK downloads the image server-side and a relative path has no
+   * base there. `toAbsoluteImageUrl()` resolves it against the origin the CMS is being
+   * served from; if the result still is not http(s) (a blob: preview of an unsaved file,
+   * say) we say so inline instead of firing a request guaranteed to fail.
+   *
+   * Second, the write-back: the generated string goes through the exact same
+   * `onChange({ ...content, object_key, alt_text })` call the text input uses. Feature 2
+   * requires the value to land in the block's JSONB attributes, and the surest way to
+   * guarantee that is to make the AI path indistinguishable from typing — same shape,
+   * same key set, same downstream save. A bespoke write here would be a second code path
+   * to keep in sync forever, for no gain.
+   *
+   * Third, staleness. This handler used to close over `content` and finish with
+   * `onChange({ ...capturedContent, ... })`, on the assumption that the block it started
+   * on would still be the block it finished on. It is not: the vision call takes seconds
+   * and the editor stays live throughout, so an author who removes the image or picks a
+   * different one mid-flight would have had the deleted image restored, or a new image
+   * labelled with the previous image's description — alt text that is confidently wrong
+   * and undetectable by the screen-reader user it is written for. The image's identity is
+   * therefore captured instead of its content, and the response is discarded unless the
+   * block still holds that same image. `resolveAltTextWriteBack` owns that rule so it can
+   * be unit-tested; this component cannot be, as the workspace has no DOM test env.
+   */
+  const handleGenerateAltText = async () => {
+    if (!hasImage || isGeneratingAltText) {
+      return;
+    }
+
+    const sourceUrl = content.external_url || displayImageUrl;
+    const imageUrl = toAbsoluteImageUrl(sourceUrl);
+
+    if (!imageUrl) {
+      setAltTextError(UNRESOLVABLE_IMAGE_URL_MESSAGE);
+      return;
+    }
+
+    // Taken before the await, from the same two values the request itself is built from,
+    // so "is this still the image we asked about?" is answerable when the reply lands.
+    const capturedIdentity = altTextImageIdentity(content, selectedMediaObjectKey);
+
+    setAltTextError(null);
+    setIsGeneratingAltText(true);
+
+    try {
+      // Context materially improves alt text — "Nicolas at the 2026 harvest" beats "a man
+      // in a field" — so we pass whatever is already in hand for free: this block's own
+      // caption, and the title of the page or post being edited, which the CMS layout
+      // already registers in the Cortex AI page context. Nothing is fetched for this.
+      const context = buildAltTextContext(
+        content.caption ? `Image caption: ${content.caption}` : null,
+        cortexAiPageContext?.pageContext?.title
+          ? `Appears on the ${cortexAiPageContext.pageContext.contentType} “${cortexAiPageContext.pageContext.title}”.`
+          : null
+      );
+
+      const response = await fetch('/api/ai/seo/alt-text', {
+        // The route's body schema is a `z.strictObject` of optionals, so an absent field
+        // must be omitted rather than sent as null — a null would fail validation outright.
+        body: JSON.stringify({
+          ...(context ? { context } : {}),
+          imageUrl,
+        }),
+        headers: buildCortexAiRequestHeaders(),
+        method: 'POST',
+      });
+
+      const payload = (await response.json().catch(() => null)) as Record<string, unknown> | null;
+
+      if (!response.ok || !payload) {
+        const message =
+          payload && typeof payload['error'] === 'string'
+            ? (payload['error'] as string)
+            : 'Cortex AI could not describe this image.';
+        throw new Error(message);
+      }
+
+      const generated = typeof payload['altText'] === 'string' ? payload['altText'].trim() : '';
+      if (!generated) {
+        throw new Error('Cortex AI returned an empty description.');
+      }
+
+      const currentContent = contentRef.current;
+      const currentObjectKey = selectedMediaObjectKeyRef.current;
+      const writeBack = resolveAltTextWriteBack({
+        capturedIdentity,
+        currentContent,
+        currentIdentity: altTextImageIdentity(currentContent, currentObjectKey),
+        generatedAltText: generated,
+        objectKey: currentObjectKey,
+      });
+
+      if (!writeBack) {
+        // Not thrown: nothing failed. The model answered, the answer is simply about an
+        // image this block no longer shows, so it is reported inline and dropped. A toast
+        // is skipped for the same reason — this is not an error the operator caused.
+        setAltTextError(STALE_ALT_TEXT_MESSAGE);
+        return;
+      }
+
+      onChange(writeBack);
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Cortex AI could not describe this image.';
+      setAltTextError(message);
+      toast.error(message);
+    } finally {
+      setIsGeneratingAltText(false);
+    }
+  };
+
   return (
     <div className="space-y-3 p-3 border-t mt-2">
       <Label>Image</Label>
@@ -217,8 +371,31 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
       </div>
 
       <div>
-        <Label htmlFor={`image-alt-${content.media_id || 'new'}`}>Alt Text</Label>
+        <div className="flex items-center justify-between gap-2">
+          <Label htmlFor={`image-alt-${content.media_id || 'new'}`}>Alt Text</Label>
+          {/* Rendered only when the premium package is active, so a non-premium install
+              never shows a button that cannot work. */}
+          {isCortexAiActive && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 gap-1.5 px-2 text-[11px]"
+              onClick={handleGenerateAltText}
+              disabled={!hasImage || isGeneratingAltText}
+              title={hasImage ? "Describe this image with Cortex AI" : "Select an image first"}
+            >
+              {isGeneratingAltText ? (
+                <Loader2 aria-hidden="true" className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Sparkles aria-hidden="true" className="h-3.5 w-3.5 text-amber-500" />
+              )}
+              {isGeneratingAltText ? "Generating…" : "Generate with AI"}
+            </Button>
+          )}
+        </div>
         <Input id={`image-alt-${content.media_id || 'new'}`} value={content.alt_text || ""} onChange={handleAltTextChange} className="mt-1" disabled={!hasImage} />
+        {altTextError && <p className="text-xs text-red-500 mt-1">{altTextError}</p>}
       </div>
       <div>
         <Label htmlFor={`image-caption-${content.media_id || 'new'}`}>Caption</Label>

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

@@ -3,27 +3,50 @@
 
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
-import type { Extensions } from '@tiptap/core';
+import type { Editor, Extensions } from '@tiptap/core';
+import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import MediaPickerDialog from '../../media/components/MediaPickerDialog';
-import { Label } from '@nextblock-cms/ui';
+import { Button, Label } from '@nextblock-cms/ui';
 import { BlockEditorProps } from '../components/BlockEditorModal';
 import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
 import { useCortexAiActive } from '../../components/CortexAiActiveContext';
+import { SeoAuditPanel } from '../../../../components/seo/SeoAuditPanel';
+import { usePageSeo } from '../../../../lib/seo/page-audit-context';
 import {
   createDynamicCustomBlockExtensions,
   type DynamicCustomBlockEditorDefinition,
 } from '../../../../lib/editor/dynamic-extensions';
 
-// Props expected by NotionEditor
+/**
+ * A hand-maintained copy of the real `NotionEditorProps`.
+ *
+ * `next/dynamic` needs a concrete type argument at the call site, and the real
+ * interface lives behind a lazy `import()` that TypeScript will not unwrap for
+ * us here. That makes this a second, independent declaration of the same
+ * contract: a prop added to `libs/editor/src/lib/NotionEditor.tsx` and not added
+ * here is invisible to this file and fails to type-check the moment it is
+ * passed. Both `onEditorReady` and `sidePanel` below exist for that reason.
+ */
 type NotionEditorProps = {
   content: string;
   onChange: (html: string) => void;
+  onEditorReady?: (editor: Editor | null) => void;
   openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
   className?: string;
   showAiPrompt?: boolean;
+  sidePanel?: React.ReactNode;
   dynamicExtensions?: Extensions;
 };
 
+/**
+ * Where the "is the SEO panel open?" choice is remembered.
+ *
+ * Per-browser rather than per-user or per-block: it is a workspace preference in
+ * the same family as a collapsed sidebar, not content, and round-tripping it
+ * through the database would mean a write on every toggle.
+ */
+const SEO_PANEL_STORAGE_KEY = 'nextblock_seo_audit_panel_open';
+
 // Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
 const NotionEditor = dynamic<NotionEditorProps>(
   () => import('@nextblock-cms/editor').then((m) => m.NotionEditor),
@@ -44,7 +67,88 @@ export default function TextBlockEditor({
   const [dynamicDefinitions, setDynamicDefinitions] = useState<DynamicCustomBlockEditorDefinition[]>([]);
   const [dynamicDefinitionsLoaded, setDynamicDefinitionsLoaded] = useState(false);
   const isCortexAiActive = useCortexAiActive();
+
+  /**
+   * The live Tiptap instance, published by `NotionEditor` through
+   * `onEditorReady`. This is what lets the SEO panel write a Cortex AI fix back
+   * into the document; without it the panel still grades the content but shows
+   * no fix buttons. Deliberately not `window.__nextblockEditor`, which is a
+   * single global slot and therefore wrong as soon as a second editor mounts.
+   */
+  const [editor, setEditor] = useState<Editor | null>(null);
+
+  /**
+   * The focus keyphrase, preferring the page's copy when there is one.
+   *
+   * A keyphrase is a property of the page, not of a paragraph, so when this
+   * editor is opened from a page or post edit screen it reads and writes the
+   * shared `PageSeoProvider` value: type it once on the page panel and every
+   * block editor opened afterwards is already grading against it, and typing it
+   * in a block sends it back the other way. The local state below is the
+   * fallback for surfaces with no page-level panel — the product editor — where
+   * an ephemeral per-block keyphrase is still better than a dead field.
+   */
+  const pageSeo = usePageSeo();
+  const [localSeoKeyword, setLocalSeoKeyword] = useState('');
+  const seoKeyword = pageSeo ? pageSeo.keyword : localSeoKeyword;
+  const handleSeoKeywordChange = useCallback(
+    (next: string) => {
+      if (pageSeo) {
+        pageSeo.setKeyword(next);
+      } else {
+        setLocalSeoKeyword(next);
+      }
+    },
+    [pageSeo]
+  );
+
+  // Starts closed for the very first render on the server and on a cold client,
+  // then adopts the stored preference in the effect below. Reading storage in
+  // the initialiser instead would make the server's HTML and the client's first
+  // render disagree for anyone who had opened the panel before.
+  const [isSeoPanelOpen, setIsSeoPanelOpen] = useState(false);
+
   const resolverRef = useRef<null | ((v: any) => void)>(null);
+
+  /**
+   * Adopt the remembered preference once, after mount.
+   *
+   * Every access is wrapped because `localStorage` is not merely empty in a
+   * private window or with site data blocked — the property access itself
+   * throws, and an uncaught throw here would take the whole block editor down
+   * over a panel toggle. Defaulting to open on a first visit is deliberate: the
+   * feature is invisible otherwise, and one click hides it for good afterwards.
+   */
+  useEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(SEO_PANEL_STORAGE_KEY);
+      setIsSeoPanelOpen(stored === null ? true : stored === 'true');
+    } catch {
+      setIsSeoPanelOpen(true);
+    }
+  }, []);
+
+  const toggleSeoPanel = useCallback(() => {
+    setIsSeoPanelOpen((previous) => {
+      const next = !previous;
+      try {
+        window.localStorage.setItem(SEO_PANEL_STORAGE_KEY, String(next));
+      } catch {
+        // The preference is a convenience; losing it is not worth an error.
+      }
+      return next;
+    });
+  }, []);
+
+  /**
+   * Wrapped rather than passing `setEditor` straight in. A state setter treats a
+   * function argument as an updater callback, and while a Tiptap `Editor` is an
+   * object today, routing it through an explicit assignment means this cannot
+   * quietly break if that ever stops being true.
+   */
+  const handleEditorReady = useCallback((instance: Editor | null) => {
+    setEditor(instance);
+  }, []);
   const openImagePicker = useCallback(() => {
     setPickerOpen(true);
     return new Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>((resolve) => {
@@ -103,26 +207,87 @@ export default function TextBlockEditor({
     };
   }, []);
 
+  // The one string the editor and the audit both read. Deriving it once keeps
+  // the panel from ever grading something other than what is on screen.
+  const htmlContent = content?.html_content ?? '';
+
   return (
     <div className="h-full flex flex-col">
       <Label htmlFor={labelId} className="sr-only">
         Text Content
       </Label>
 
+      <div className="mb-2 flex items-center justify-end">
+        <Button
+          aria-pressed={isSeoPanelOpen}
+          className="h-7 text-xs"
+          disabled={!dynamicDefinitionsLoaded}
+          onClick={toggleSeoPanel}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {isSeoPanelOpen ? (
+            <PanelRightClose className="mr-1.5 h-4 w-4" />
+          ) : (
+            <PanelRightOpen className="mr-1.5 h-4 w-4" />
+          )}
+          {isSeoPanelOpen ? 'Hide SEO analysis' : 'Show SEO analysis'}
+        </Button>
+      </div>
+
       <div id={labelId} role="group" aria-labelledby={labelId} className="flex-1 min-h-0 flex flex-col">
         {dynamicDefinitionsLoaded ? (
           <NotionEditor
             key={dynamicDefinitions.map((definition) => definition.id).join('|') || 'static'}
-            content={content?.html_content ?? ''}
+            content={htmlContent}
             dynamicExtensions={dynamicExtensions}
             onChange={(html) => onChange({ html_content: html })}
+            onEditorReady={handleEditorReady}
             openImagePicker={openImagePicker}
             className={className}
             showAiPrompt={isCortexAiActive}
+            /*
+             * Passing `undefined` rather than a hidden panel is what keeps the
+             * collapsed state honest: `NotionEditor` renders its original
+             * single-column tree when `sidePanel` is absent, so hiding the panel
+             * gives the prose the full width back instead of leaving an empty
+             * column behind it.
+             */
+            sidePanel={
+              isSeoPanelOpen ? (
+                /*
+                 * Block scope, and this is the fix for the complaint that
+                 * started all of this: mounted here the panel can only see one
+                 * block, so grading it as a page reported "no H1" and "fewer
+                 * than 300 words" for a single paragraph — neither of which a
+                 * block can be responsible for. The page-wide checks now live on
+                 * the page editor's own panel; what stays here are the checks a
+                 * block genuinely owns, plus the one thing this mount has and
+                 * the page mount never will: a live editor instance, which is
+                 * what makes "Fix with Cortex AI" able to write anything at all.
+                 */
+                <SeoAuditPanel
+                  content={htmlContent}
+                  editor={editor}
+                  isCortexAiActive={isCortexAiActive}
+                  keyword={seoKeyword}
+                  onKeywordChange={handleSeoKeywordChange}
+                  scope="block"
+                />
+              ) : undefined
+            }
           />
         ) : (
-          <div className="flex min-h-[500px] flex-1 items-center justify-center rounded-lg border bg-background text-sm text-muted-foreground">
-            Loading editor...
+          /*
+           * The editor is `ssr: false` and gated behind the custom-block
+           * definition fetch, so neither it nor the SEO panel exists on first
+           * paint. Saying which pieces are still coming makes the gap read as a
+           * load rather than as a panel that failed to appear.
+           */
+          <div className="flex min-h-[500px] flex-1 flex-col items-center justify-center gap-1 rounded-lg border bg-background text-sm text-muted-foreground">
+            <span>Loading editor...</span>
+            <span className="text-xs">Custom blocks and the SEO analysis appear once it is ready.</span>
           </div>
         )}
 

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

@@ -1,75 +1,75 @@
-'use client';
-
-import Link from 'next/link';
-import { useState } from 'react';
-import { Button } from '@nextblock-cms/ui';
-import { MailWarning, X } from 'lucide-react';
-import { useAuth } from '../../../context/AuthContext';
-import type { ContactReminder } from '../../../lib/cms/contact-reminder';
-
-/**
- * Shown when a contact form is addressed to a placeholder, or when nothing resolves to a
- * deliverable address at all.
- *
- * Worth interrupting for, because this failure is completely silent: the visitor is
- * thanked, the mail server accepts the message, and it goes to a reserved domain that can
- * never receive it. The messages are safely stored either way — the problem is that
- * nobody is being *told* they arrived.
- */
-export default function ContactReminderBanner({ reminder }: { reminder: ContactReminder }) {
-  const { isAdmin } = useAuth();
-  const [dismissed, setDismissed] = useState(false);
-
-  if (!isAdmin || dismissed) return null;
-
-  const { placeholderForms, noFallback } = reminder;
-  const first = placeholderForms[0];
-
-  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">
-      <MailWarning className="mt-0.5 h-5 w-5 shrink-0" />
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium">
-          {placeholderForms.length > 0
-            ? 'Your contact form is still using the example address.'
-            : 'Nobody is being notified when someone contacts you.'}
-        </p>
-        <p className="text-xs opacity-90">
-          {placeholderForms.length > 0 ? (
-            <>
-              &ldquo;{first?.label}&rdquo; sends to <strong>{first?.recipient}</strong>, a
-              reserved address that can never receive mail
-              {placeholderForms.length > 1
-                ? ` (and ${placeholderForms.length - 1} other form${
-                    placeholderForms.length > 2 ? 's' : ''
-                  } like it)`
-                : ''}
-              . {noFallback ? 'No fallback address is set either. ' : ''}
-              Messages are still saved under Messages — but no one is told they arrived.
-            </>
-          ) : (
-            <>
-              No contact address is configured anywhere, so notifications have nowhere to
-              go. Messages are still saved under Messages — but no one is told they
-              arrived.
-            </>
-          )}
-        </p>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <Button asChild size="sm" variant="outline" className="border-amber-400">
-          <Link href="/cms/messages">Set an address</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 { MailWarning, X } from 'lucide-react';
+import { useAuth } from '../../../context/AuthContext';
+import type { ContactReminder } from '../../../lib/cms/contact-reminder';
+
+/**
+ * Shown when a contact form is addressed to a placeholder, or when nothing resolves to a
+ * deliverable address at all.
+ *
+ * Worth interrupting for, because this failure is completely silent: the visitor is
+ * thanked, the mail server accepts the message, and it goes to a reserved domain that can
+ * never receive it. The messages are safely stored either way — the problem is that
+ * nobody is being *told* they arrived.
+ */
+export default function ContactReminderBanner({ reminder }: { reminder: ContactReminder }) {
+  const { isAdmin } = useAuth();
+  const [dismissed, setDismissed] = useState(false);
+
+  if (!isAdmin || dismissed) return null;
+
+  const { placeholderForms, noFallback } = reminder;
+  const first = placeholderForms[0];
+
+  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">
+      <MailWarning className="mt-0.5 h-5 w-5 shrink-0" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">
+          {placeholderForms.length > 0
+            ? 'Your contact form is still using the example address.'
+            : 'Nobody is being notified when someone contacts you.'}
+        </p>
+        <p className="text-xs opacity-90">
+          {placeholderForms.length > 0 ? (
+            <>
+              &ldquo;{first?.label}&rdquo; sends to <strong>{first?.recipient}</strong>, a
+              reserved address that can never receive mail
+              {placeholderForms.length > 1
+                ? ` (and ${placeholderForms.length - 1} other form${
+                    placeholderForms.length > 2 ? 's' : ''
+                  } like it)`
+                : ''}
+              . {noFallback ? 'No fallback address is set either. ' : ''}
+              Messages are still saved under Messages — but no one is told they arrived.
+            </>
+          ) : (
+            <>
+              No contact address is configured anywhere, so notifications have nowhere to
+              go. Messages are still saved under Messages — but no one is told they
+              arrived.
+            </>
+          )}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button asChild size="sm" variant="outline" className="border-amber-400">
+          <Link href="/cms/messages">Set an address</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/CortexAiActiveContext.tsx

@@ -1,23 +1,23 @@
-"use client";
-
-import React, { createContext, useContext } from "react";
-
-const CortexAiActiveContext = createContext<boolean>(false);
-
-export function CortexAiActiveProvider({
-  children,
-  isActive,
-}: {
-  children: React.ReactNode;
-  isActive: boolean;
-}) {
-  return (
-    <CortexAiActiveContext.Provider value={isActive}>
-      {children}
-    </CortexAiActiveContext.Provider>
-  );
-}
-
-export function useCortexAiActive() {
-  return useContext(CortexAiActiveContext);
-}
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+const CortexAiActiveContext = createContext<boolean>(false);
+
+export function CortexAiActiveProvider({
+  children,
+  isActive,
+}: {
+  children: React.ReactNode;
+  isActive: boolean;
+}) {
+  return (
+    <CortexAiActiveContext.Provider value={isActive}>
+      {children}
+    </CortexAiActiveContext.Provider>
+  );
+}
+
+export function useCortexAiActive() {
+  return useContext(CortexAiActiveContext);
+}