create-nextblock 0.16.3 → 0.17.0

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

@@ -1,122 +1,122 @@
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Check, ExternalLink, Github, Loader2 } from 'lucide-react';
-import { Button } from '@nextblock-cms/ui';
-import { startGithubConnect, pollGithubConnect } from './github-connect-actions';
-
-type Phase = 'idle' | 'starting' | 'awaiting' | 'installed' | 'error';
-
-/**
- * One-click "Connect GitHub" via the OAuth device flow. On authorization, the server
- * installs the upstream-sync workflow into the repo (the file Vercel's clone strips).
- * No PAT, no env config — the public client id is baked into the app.
- */
-export default function ConnectGitHubButton() {
-  const router = useRouter();
-  const [phase, setPhase] = useState<Phase>('idle');
-  const [userCode, setUserCode] = useState('');
-  const [verificationUri, setVerificationUri] = useState('https://github.com/login/device');
-  const [error, setError] = useState('');
-
-  // Cancel any in-flight polling when the component unmounts.
-  const activeRef = useRef(false);
-  useEffect(() => {
-    activeRef.current = true;
-    return () => {
-      activeRef.current = false;
-    };
-  }, []);
-
-  const poll = useCallback(async (intervalMs: number) => {
-    if (!activeRef.current) return;
-    const result = await pollGithubConnect();
-    if (!activeRef.current) return;
-
-    if (result.status === 'installed') {
-      setPhase('installed');
-      // Re-render the dashboard so the onboarding step picks up the now-active workflow
-      // (the step then flips to done and this control is replaced).
-      router.refresh();
-      return;
-    }
-    if (result.status === 'error') {
-      setError(result.error);
-      setPhase('error');
-      return;
-    }
-    // pending — back off a little on slow_down, then poll again.
-    const next = result.slowDown ? intervalMs + 5000 : intervalMs;
-    setTimeout(() => void poll(next), next);
-  }, [router]);
-
-  const connect = useCallback(async () => {
-    setError('');
-    setPhase('starting');
-    const res = await startGithubConnect();
-    if (!activeRef.current) return;
-    if (!res.ok || !res.userCode) {
-      setError(res.error ?? 'Could not start GitHub connect.');
-      setPhase('error');
-      return;
-    }
-    setUserCode(res.userCode);
-    if (res.verificationUri) setVerificationUri(res.verificationUri);
-    setPhase('awaiting');
-    const intervalMs = Math.max((res.interval ?? 5) + 1, 5) * 1000;
-    setTimeout(() => void poll(intervalMs), intervalMs);
-  }, [poll]);
-
-  if (phase === 'installed') {
-    return (
-      <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
-        <Check className="h-4 w-4" />
-        Connected — workflow installed
-      </div>
-    );
-  }
-
-  if (phase === 'awaiting') {
-    return (
-      <div className="flex flex-col items-end gap-1.5 text-right">
-        <Button asChild size="sm" variant="outline">
-          <a href={verificationUri} target="_blank" rel="noopener noreferrer">
-            Authorize on GitHub
-            <ExternalLink className="ml-1 h-3.5 w-3.5" />
-          </a>
-        </Button>
-        <p className="text-xs text-muted-foreground">
-          Enter code{' '}
-          <span className="font-mono font-semibold tracking-wider text-foreground">{userCode}</span>
-        </p>
-        <p className="flex items-center gap-1 text-xs text-muted-foreground">
-          <Loader2 className="h-3 w-3 animate-spin" />
-          Waiting for authorization…
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col items-end gap-1">
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={() => void connect()}
-        disabled={phase === 'starting'}
-        className="shrink-0"
-      >
-        {phase === 'starting' ? (
-          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-        ) : (
-          <Github className="mr-1 h-3.5 w-3.5" />
-        )}
-        {phase === 'starting' ? 'Starting…' : 'Connect GitHub'}
-      </Button>
-      {phase === 'error' && (
-        <p className="max-w-[16rem] text-right text-xs text-red-600 dark:text-red-400">{error}</p>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Check, ExternalLink, Github, Loader2 } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { startGithubConnect, pollGithubConnect } from './github-connect-actions';
+
+type Phase = 'idle' | 'starting' | 'awaiting' | 'installed' | 'error';
+
+/**
+ * One-click "Connect GitHub" via the OAuth device flow. On authorization, the server
+ * installs the upstream-sync workflow into the repo (the file Vercel's clone strips).
+ * No PAT, no env config — the public client id is baked into the app.
+ */
+export default function ConnectGitHubButton() {
+  const router = useRouter();
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [userCode, setUserCode] = useState('');
+  const [verificationUri, setVerificationUri] = useState('https://github.com/login/device');
+  const [error, setError] = useState('');
+
+  // Cancel any in-flight polling when the component unmounts.
+  const activeRef = useRef(false);
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  const poll = useCallback(async (intervalMs: number) => {
+    if (!activeRef.current) return;
+    const result = await pollGithubConnect();
+    if (!activeRef.current) return;
+
+    if (result.status === 'installed') {
+      setPhase('installed');
+      // Re-render the dashboard so the onboarding step picks up the now-active workflow
+      // (the step then flips to done and this control is replaced).
+      router.refresh();
+      return;
+    }
+    if (result.status === 'error') {
+      setError(result.error);
+      setPhase('error');
+      return;
+    }
+    // pending — back off a little on slow_down, then poll again.
+    const next = result.slowDown ? intervalMs + 5000 : intervalMs;
+    setTimeout(() => void poll(next), next);
+  }, [router]);
+
+  const connect = useCallback(async () => {
+    setError('');
+    setPhase('starting');
+    const res = await startGithubConnect();
+    if (!activeRef.current) return;
+    if (!res.ok || !res.userCode) {
+      setError(res.error ?? 'Could not start GitHub connect.');
+      setPhase('error');
+      return;
+    }
+    setUserCode(res.userCode);
+    if (res.verificationUri) setVerificationUri(res.verificationUri);
+    setPhase('awaiting');
+    const intervalMs = Math.max((res.interval ?? 5) + 1, 5) * 1000;
+    setTimeout(() => void poll(intervalMs), intervalMs);
+  }, [poll]);
+
+  if (phase === 'installed') {
+    return (
+      <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
+        <Check className="h-4 w-4" />
+        Connected — workflow installed
+      </div>
+    );
+  }
+
+  if (phase === 'awaiting') {
+    return (
+      <div className="flex flex-col items-end gap-1.5 text-right">
+        <Button asChild size="sm" variant="outline">
+          <a href={verificationUri} target="_blank" rel="noopener noreferrer">
+            Authorize on GitHub
+            <ExternalLink className="ml-1 h-3.5 w-3.5" />
+          </a>
+        </Button>
+        <p className="text-xs text-muted-foreground">
+          Enter code{' '}
+          <span className="font-mono font-semibold tracking-wider text-foreground">{userCode}</span>
+        </p>
+        <p className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          Waiting for authorization…
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={() => void connect()}
+        disabled={phase === 'starting'}
+        className="shrink-0"
+      >
+        {phase === 'starting' ? (
+          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Github className="mr-1 h-3.5 w-3.5" />
+        )}
+        {phase === 'starting' ? 'Starting…' : 'Connect GitHub'}
+      </Button>
+      {phase === 'error' && (
+        <p className="max-w-[16rem] text-right text-xs text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </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);
+}

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

@@ -1,40 +1,3 @@
-import React from "react";
-import { Badge } from "@nextblock-cms/ui";
-
-interface SeoScoreBadgeProps {
-  score: number;
-  className?: string;
-}
-
-export default function SeoScoreBadge({ score, className = "" }: SeoScoreBadgeProps) {
-  const normalizedScore = Math.max(0, Math.min(100, Math.round(score)));
-
-  let colorClass = "";
-  let dotClass = "";
-  let title = "";
-
-  if (normalizedScore >= 90) {
-    colorClass = "bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-800/60";
-    dotClass = "bg-emerald-500";
-    title = `SEO Score: ${normalizedScore}% — Optimal`;
-  } else if (normalizedScore >= 70) {
-    colorClass = "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-800/60";
-    dotClass = "bg-amber-500";
-    title = `SEO Score: ${normalizedScore}% — Good (Minor warnings)`;
-  } else {
-    colorClass = "bg-rose-100 text-rose-800 border-rose-200 dark:bg-rose-950/50 dark:text-rose-300 dark:border-rose-800/60";
-    dotClass = "bg-rose-500";
-    title = `SEO Score: ${normalizedScore}% — Needs improvement`;
-  }
-
-  return (
-    <Badge
-      variant="outline"
-      title={title}
-      className={`inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full border transition-colors ${colorClass} ${className}`}
-    >
-      <span className={`w-1.5 h-1.5 rounded-full mr-1.5 shrink-0 ${dotClass}`} />
-      {normalizedScore}%
-    </Badge>
-  );
-}
+import { SeoScoreBadge } from "@nextblock-cms/ui";
+export { SeoScoreBadge, type SeoScoreBadgeProps } from "@nextblock-cms/ui";
+export default SeoScoreBadge;

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>
+  );
+}