create-nextblock 0.14.1 → 0.14.4

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/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/SystemAlertsBanner.tsx

@@ -1,112 +1,112 @@
-'use client';
-
-import { useState, useTransition } from 'react';
-import { AlertTriangle, ArrowUpCircle, ExternalLink, X } from 'lucide-react';
-import { Button } from '@nextblock-cms/ui';
-import { resolveSystemAlert } from './system-alerts-actions';
-
-export interface SystemAlertItem {
-  id: string;
-  alert_type: string;
-  title: string;
-  message: string;
-  metadata: Record<string, unknown> | null;
-}
-
-function readString(metadata: Record<string, unknown> | null, key: string): string | undefined {
-  const value = metadata?.[key];
-  return typeof value === 'string' && value.length > 0 ? value : undefined;
-}
-
-/**
- * Dashboard banner for unresolved system_alerts. High-visibility, developer-facing:
- *   - merge_conflict           -> amber, links to GitHub to resolve the sync (Track A).
- *   - runtime_update_available -> indigo, links to the release download (Track B).
- * Dismissing persists is_resolved=true (ADMIN-only via RLS) and hides the alert.
- */
-export default function SystemAlertsBanner({ alerts }: { alerts: SystemAlertItem[] }) {
-  const [dismissed, setDismissed] = useState<Set<string>>(new Set());
-  const [isPending, startTransition] = useTransition();
-
-  const visible = alerts.filter((a) => !dismissed.has(a.id));
-  if (visible.length === 0) return null;
-
-  const dismiss = (id: string) => {
-    setDismissed((prev) => new Set(prev).add(id));
-    startTransition(() => {
-      void resolveSystemAlert(id);
-    });
-  };
-
-  return (
-    <div className="mb-6 flex flex-col gap-3">
-      {visible.map((alert) => {
-        const isConflict = alert.alert_type === 'merge_conflict';
-        const Icon = isConflict ? AlertTriangle : ArrowUpCircle;
-
-        const tone = isConflict
-          ? 'border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200'
-          : 'border-indigo-300 bg-indigo-50 text-indigo-900 dark:border-indigo-700/60 dark:bg-indigo-900/20 dark:text-indigo-200';
-        const ctaBorder = isConflict
-          ? 'border-amber-400 dark:border-amber-600'
-          : 'border-indigo-400 dark:border-indigo-600';
-
-        // Track A (conflict) deep-links to GitHub; Track B (update) to the download.
-        const primaryHref = isConflict
-          ? readString(alert.metadata, 'action_url')
-          : readString(alert.metadata, 'download_url');
-        const primaryLabel = isConflict ? 'Resolve on GitHub' : 'Download latest';
-        const secondaryHref = isConflict
-          ? readString(alert.metadata, 'run_url')
-          : readString(alert.metadata, 'html_url');
-        const secondaryLabel = isConflict ? 'View workflow run' : 'Release notes';
-
-        return (
-          <div
-            key={alert.id}
-            className={`flex items-start gap-3 rounded-lg border px-4 py-3 ${tone}`}
-            role="alert"
-          >
-            <Icon className="mt-0.5 h-5 w-5 shrink-0" />
-            <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium">{alert.title}</p>
-              <p className="text-xs opacity-90">{alert.message}</p>
-              {(primaryHref || secondaryHref) && (
-                <div className="mt-2 flex flex-wrap items-center gap-2">
-                  {primaryHref && (
-                    <Button asChild size="sm" variant="outline" className={ctaBorder}>
-                      <a href={primaryHref} target="_blank" rel="noopener noreferrer">
-                        {primaryLabel}
-                        <ExternalLink className="ml-1.5 h-3.5 w-3.5" />
-                      </a>
-                    </Button>
-                  )}
-                  {secondaryHref && (
-                    <a
-                      href={secondaryHref}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-xs font-medium underline underline-offset-2 opacity-80 hover:opacity-100"
-                    >
-                      {secondaryLabel}
-                    </a>
-                  )}
-                </div>
-              )}
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => dismiss(alert.id)}
-              disabled={isPending}
-              aria-label="Dismiss alert"
-              className="h-8 w-8 shrink-0"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useTransition } from 'react';
+import { AlertTriangle, ArrowUpCircle, ExternalLink, X } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { resolveSystemAlert } from './system-alerts-actions';
+
+export interface SystemAlertItem {
+  id: string;
+  alert_type: string;
+  title: string;
+  message: string;
+  metadata: Record<string, unknown> | null;
+}
+
+function readString(metadata: Record<string, unknown> | null, key: string): string | undefined {
+  const value = metadata?.[key];
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+/**
+ * Dashboard banner for unresolved system_alerts. High-visibility, developer-facing:
+ *   - merge_conflict           -> amber, links to GitHub to resolve the sync (Track A).
+ *   - runtime_update_available -> indigo, links to the release download (Track B).
+ * Dismissing persists is_resolved=true (ADMIN-only via RLS) and hides the alert.
+ */
+export default function SystemAlertsBanner({ alerts }: { alerts: SystemAlertItem[] }) {
+  const [dismissed, setDismissed] = useState<Set<string>>(new Set());
+  const [isPending, startTransition] = useTransition();
+
+  const visible = alerts.filter((a) => !dismissed.has(a.id));
+  if (visible.length === 0) return null;
+
+  const dismiss = (id: string) => {
+    setDismissed((prev) => new Set(prev).add(id));
+    startTransition(() => {
+      void resolveSystemAlert(id);
+    });
+  };
+
+  return (
+    <div className="mb-6 flex flex-col gap-3">
+      {visible.map((alert) => {
+        const isConflict = alert.alert_type === 'merge_conflict';
+        const Icon = isConflict ? AlertTriangle : ArrowUpCircle;
+
+        const tone = isConflict
+          ? 'border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200'
+          : 'border-indigo-300 bg-indigo-50 text-indigo-900 dark:border-indigo-700/60 dark:bg-indigo-900/20 dark:text-indigo-200';
+        const ctaBorder = isConflict
+          ? 'border-amber-400 dark:border-amber-600'
+          : 'border-indigo-400 dark:border-indigo-600';
+
+        // Track A (conflict) deep-links to GitHub; Track B (update) to the download.
+        const primaryHref = isConflict
+          ? readString(alert.metadata, 'action_url')
+          : readString(alert.metadata, 'download_url');
+        const primaryLabel = isConflict ? 'Resolve on GitHub' : 'Download latest';
+        const secondaryHref = isConflict
+          ? readString(alert.metadata, 'run_url')
+          : readString(alert.metadata, 'html_url');
+        const secondaryLabel = isConflict ? 'View workflow run' : 'Release notes';
+
+        return (
+          <div
+            key={alert.id}
+            className={`flex items-start gap-3 rounded-lg border px-4 py-3 ${tone}`}
+            role="alert"
+          >
+            <Icon className="mt-0.5 h-5 w-5 shrink-0" />
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium">{alert.title}</p>
+              <p className="text-xs opacity-90">{alert.message}</p>
+              {(primaryHref || secondaryHref) && (
+                <div className="mt-2 flex flex-wrap items-center gap-2">
+                  {primaryHref && (
+                    <Button asChild size="sm" variant="outline" className={ctaBorder}>
+                      <a href={primaryHref} target="_blank" rel="noopener noreferrer">
+                        {primaryLabel}
+                        <ExternalLink className="ml-1.5 h-3.5 w-3.5" />
+                      </a>
+                    </Button>
+                  )}
+                  {secondaryHref && (
+                    <a
+                      href={secondaryHref}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs font-medium underline underline-offset-2 opacity-80 hover:opacity-100"
+                    >
+                      {secondaryLabel}
+                    </a>
+                  )}
+                </div>
+              )}
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => dismiss(alert.id)}
+              disabled={isPending}
+              aria-label="Dismiss alert"
+              className="h-8 w-8 shrink-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -1,45 +1,45 @@
-'use client';
-
-import Link from 'next/link';
-import { useState } from 'react';
-import { Button } from '@nextblock-cms/ui';
-import { ShieldAlert, X } from 'lucide-react';
-
-/**
- * In-app reminder for staff (ADMIN/WRITER) who have not enrolled a second factor,
- * shown when the "Encourage staff to enable 2FA" policy is on. Dismissible for the
- * session (state lives in the persistent CMS layout, so it survives client-side
- * navigation but reappears on the next full load until 2FA is set up).
- */
-export default function TwoFactorReminderBanner() {
-  const [dismissed, setDismissed] = useState(false);
-  if (dismissed) return null;
-
-  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">
-      <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0" />
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium">
-          Your account doesn&rsquo;t have two-factor authentication enabled.
-        </p>
-        <p className="text-xs opacity-90">
-          Protect your CMS account by adding a second factor (authenticator app or email code).
-        </p>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <Button asChild size="sm" variant="outline" className="border-amber-400">
-          <Link href="/cms/settings/security">Set up 2FA</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 { ShieldAlert, X } from 'lucide-react';
+
+/**
+ * In-app reminder for staff (ADMIN/WRITER) who have not enrolled a second factor,
+ * shown when the "Encourage staff to enable 2FA" policy is on. Dismissible for the
+ * session (state lives in the persistent CMS layout, so it survives client-side
+ * navigation but reappears on the next full load until 2FA is set up).
+ */
+export default function TwoFactorReminderBanner() {
+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) return null;
+
+  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">
+      <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">
+          Your account doesn&rsquo;t have two-factor authentication enabled.
+        </p>
+        <p className="text-xs opacity-90">
+          Protect your CMS account by adding a second factor (authenticator app or email code).
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button asChild size="sm" variant="outline" className="border-amber-400">
+          <Link href="/cms/settings/security">Set up 2FA</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>
+  );
+}