create-nextblock 0.14.1 → 0.14.4

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

@@ -4,11 +4,27 @@
 import React from "react";
 import { Label } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
+import { ColorField } from "@nextblock-cms/ui";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nextblock-cms/ui";
 import { HeadingBlockContent } from '../../../../lib/blocks/blockRegistry';
+import { TEXT_COLOR_TOKEN_OPTIONS } from '../../../../lib/blocks/blockColors';
 import { BlockEditorProps } from '../components/BlockEditorModal';
 
-export default function HeadingBlockEditor({ content, onChange }: BlockEditorProps<Partial<HeadingBlockContent>>) {
+/** Handy starting points that are not in the theme — brand-neutral and legible. */
+const HEADING_COLOR_PRESETS = [
+  '#0F172A',
+  '#334155',
+  '#DC2626',
+  '#EA580C',
+  '#CA8A04',
+  '#16A34A',
+  '#0891B2',
+  '#2563EB',
+  '#7C3AED',
+  '#DB2777',
+] as const;
+
+export default function HeadingBlockEditor({ content, onChange, sectionBackground }: BlockEditorProps<Partial<HeadingBlockContent>>) {
   const idPrefix = React.useId();
 
   const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -21,24 +37,26 @@ export default function HeadingBlockEditor({ content, onChange }: BlockEditorPro
 
   const textAlignOptions = ['left', 'center', 'right', 'justify'] as const;
 
-  const textColorOptions = [
-    { value: 'primary', label: 'Primary', swatchClass: 'bg-primary' },
-    { value: 'secondary', label: 'Secondary', swatchClass: 'bg-secondary' },
-    { value: 'accent', label: 'Accent', swatchClass: 'bg-accent' },
-    { value: 'muted', label: 'Muted', swatchClass: 'bg-muted-foreground' }, // Using muted-foreground for swatch as text-muted is for text
-    { value: 'destructive', label: 'Destructive', swatchClass: 'bg-destructive' },
-    { value: 'background', label: 'Background', swatchClass: 'bg-background' },
-  ] as const;
-
   const handleTextAlignChange = (value: string) => {
     onChange({ ...content, textAlign: value as HeadingBlockContent['textAlign'] });
   };
 
-  const handleTextColorChange = (value: string) => {
-    const newTextColor = value === "" ? undefined : value as HeadingBlockContent['textColor'];
-    onChange({ ...content, textColor: newTextColor });
+  const handleTextColorChange = (value: string | undefined) => {
+    onChange({ ...content, textColor: value as HeadingBlockContent['textColor'] });
   };
 
+  // Measure contrast against the real section backdrop when there is one, so the
+  // warning reflects what the visitor will actually see.
+  const contrastAgainst = React.useMemo(() => {
+    if (sectionBackground?.type === 'solid') return sectionBackground.solid_color;
+    if (sectionBackground?.type === 'theme' && sectionBackground.theme) {
+      return `hsl(var(--${sectionBackground.theme}))`;
+    }
+    if (!sectionBackground || sectionBackground.type === 'none') return 'hsl(var(--background))';
+    // Gradients and images have no single backdrop colour to measure against.
+    return undefined;
+  }, [sectionBackground]);
+
   return (
     <div className="space-y-3 p-3 border-t mt-2">
       <div>
@@ -85,27 +103,20 @@ export default function HeadingBlockEditor({ content, onChange }: BlockEditorPro
           </SelectContent>
         </Select>
       </div>
-      <div>
-        <Label htmlFor={`heading-text-color-${idPrefix}`}>Text Color</Label>
-        <Select
-          value={content.textColor || ""} // Use empty string if no color is selected initially
-          onValueChange={handleTextColorChange}
-        >
-          <SelectTrigger id={`heading-text-color-${idPrefix}`} className="mt-1">
-            <SelectValue placeholder="Select color (optional)" />
-          </SelectTrigger>
-          <SelectContent>
-            {textColorOptions.map(color => (
-              <SelectItem key={color.value} value={color.value}>
-                <div className="flex items-center">
-                  <div className={`w-4 h-4 rounded-sm mr-2 border ${color.swatchClass}`}></div>
-                  {color.label}
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+      <ColorField
+        id={`heading-text-color-${idPrefix}`}
+        label="Text Color"
+        description="Theme colours follow light/dark mode. Custom colours stay fixed."
+        value={content.textColor}
+        onChange={handleTextColorChange}
+        tokens={TEXT_COLOR_TOKEN_OPTIONS}
+        presets={HEADING_COLOR_PRESETS}
+        contrastAgainst={contrastAgainst}
+        largeText
+        enableAlpha
+        clearLabel="Inherit from theme"
+        placeholder="Inherit from theme"
+      />
     </div>
   );
 }

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

@@ -157,7 +157,9 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
               width={content.width}
               height={content.height}
               className="rounded-md object-contain"
-              style={{ maxHeight: '200px' }}
+              // width/height auto so the CSS max-height scales both axes and
+              // keeps the intrinsic aspect ratio (next/image warns otherwise)
+              style={{ width: 'auto', height: 'auto', maxWidth: '100%', maxHeight: '200px' }}
               placeholder={content.blur_data_url ? "blur" : "empty"}
               blurDataURL={content.blur_data_url || undefined}
             />
@@ -175,7 +177,7 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
               width={300}
               height={200}
               className="rounded-md object-contain max-h-40 block"
-              style={{ maxHeight: '200px' }}
+              style={{ width: 'auto', height: 'auto', maxWidth: '100%' }}
             />
              <Button
               type="button" variant="destructive" size="icon"

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

@@ -1,28 +1,28 @@
 // app/cms/blocks/editors/TextBlockEditor.tsx
 'use client';
 
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import dynamic from 'next/dynamic';
-import type { Extensions } from '@tiptap/core';
-import MediaPickerDialog from '../../media/components/MediaPickerDialog';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import dynamic from 'next/dynamic';
+import type { Extensions } from '@tiptap/core';
+import MediaPickerDialog from '../../media/components/MediaPickerDialog';
 import { Label } from '@nextblock-cms/ui';
 import { BlockEditorProps } from '../components/BlockEditorModal';
-import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
-import { useCortexAiActive } from '../../components/CortexAiActiveContext';
-import {
-  createDynamicCustomBlockExtensions,
-  type DynamicCustomBlockEditorDefinition,
-} from '../../../../lib/editor/dynamic-extensions';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import { useCortexAiActive } from '../../components/CortexAiActiveContext';
+import {
+  createDynamicCustomBlockExtensions,
+  type DynamicCustomBlockEditorDefinition,
+} from '../../../../lib/editor/dynamic-extensions';
 
 // Props expected by NotionEditor
 type NotionEditorProps = {
   content: string;
   onChange: (html: string) => void;
-  openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
-  className?: string;
-  showAiPrompt?: boolean;
-  dynamicExtensions?: Extensions;
-};
+  openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
+  className?: string;
+  showAiPrompt?: boolean;
+  dynamicExtensions?: Extensions;
+};
 
 // Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
 const NotionEditor = dynamic<NotionEditorProps>(
@@ -40,91 +40,91 @@ export default function TextBlockEditor({
   className,
 }: BlockEditorProps<Partial<TextBlockContent>>) {
   const labelId = useId();
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [dynamicDefinitions, setDynamicDefinitions] = useState<DynamicCustomBlockEditorDefinition[]>([]);
-  const [dynamicDefinitionsLoaded, setDynamicDefinitionsLoaded] = useState(false);
-  const isCortexAiActive = useCortexAiActive();
-  const resolverRef = useRef<null | ((v: any) => void)>(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [dynamicDefinitions, setDynamicDefinitions] = useState<DynamicCustomBlockEditorDefinition[]>([]);
+  const [dynamicDefinitionsLoaded, setDynamicDefinitionsLoaded] = useState(false);
+  const isCortexAiActive = useCortexAiActive();
+  const resolverRef = useRef<null | ((v: any) => void)>(null);
   const openImagePicker = useCallback(() => {
     setPickerOpen(true);
     return new Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>((resolve) => {
       resolverRef.current = resolve;
-    });
-  }, []);
-  const dynamicExtensions = useMemo(
-    () => createDynamicCustomBlockExtensions(dynamicDefinitions),
-    [dynamicDefinitions]
-  );
-
-  useEffect(() => {
-    let isActive = true;
-
-    async function loadDynamicDefinitions() {
-      try {
-        const response = await fetch('/api/custom-blocks/editor-definitions', {
-          cache: 'no-store',
-          method: 'GET',
-        });
-        const payload = (await response.json()) as {
-          definitions?: DynamicCustomBlockEditorDefinition[];
-          error?: string;
-        };
-
-        if (!isActive) {
-          return;
-        }
-
-        if (!response.ok) {
-          console.error(
-            '[TextBlockEditor] Failed to load custom block editor definitions:',
-            payload.error
-          );
-          setDynamicDefinitions([]);
-          return;
-        }
-
-        setDynamicDefinitions(payload.definitions ?? []);
-      } catch (error) {
-        if (isActive) {
-          console.error('[TextBlockEditor] Failed to load custom block editor definitions:', error);
-          setDynamicDefinitions([]);
-        }
-      } finally {
-        if (isActive) {
-          setDynamicDefinitionsLoaded(true);
-        }
-      }
-    }
-
-    void loadDynamicDefinitions();
-
-    return () => {
-      isActive = false;
-    };
-  }, []);
-
-  return (
+    });
+  }, []);
+  const dynamicExtensions = useMemo(
+    () => createDynamicCustomBlockExtensions(dynamicDefinitions),
+    [dynamicDefinitions]
+  );
+
+  useEffect(() => {
+    let isActive = true;
+
+    async function loadDynamicDefinitions() {
+      try {
+        const response = await fetch('/api/custom-blocks/editor-definitions', {
+          cache: 'no-store',
+          method: 'GET',
+        });
+        const payload = (await response.json()) as {
+          definitions?: DynamicCustomBlockEditorDefinition[];
+          error?: string;
+        };
+
+        if (!isActive) {
+          return;
+        }
+
+        if (!response.ok) {
+          console.error(
+            '[TextBlockEditor] Failed to load custom block editor definitions:',
+            payload.error
+          );
+          setDynamicDefinitions([]);
+          return;
+        }
+
+        setDynamicDefinitions(payload.definitions ?? []);
+      } catch (error) {
+        if (isActive) {
+          console.error('[TextBlockEditor] Failed to load custom block editor definitions:', error);
+          setDynamicDefinitions([]);
+        }
+      } finally {
+        if (isActive) {
+          setDynamicDefinitionsLoaded(true);
+        }
+      }
+    }
+
+    void loadDynamicDefinitions();
+
+    return () => {
+      isActive = false;
+    };
+  }, []);
+
+  return (
     <div className="h-full flex flex-col">
       <Label htmlFor={labelId} className="sr-only">
         Text Content
       </Label>
 
       <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 ?? ''}
-            dynamicExtensions={dynamicExtensions}
-            onChange={(html) => onChange({ html_content: html })}
-            openImagePicker={openImagePicker}
-            className={className}
-            showAiPrompt={isCortexAiActive}
-          />
-        ) : (
-          <div className="flex min-h-[500px] flex-1 items-center justify-center rounded-lg border bg-background text-sm text-muted-foreground">
-            Loading editor...
-          </div>
-        )}
+        {dynamicDefinitionsLoaded ? (
+          <NotionEditor
+            key={dynamicDefinitions.map((definition) => definition.id).join('|') || 'static'}
+            content={content?.html_content ?? ''}
+            dynamicExtensions={dynamicExtensions}
+            onChange={(html) => onChange({ html_content: html })}
+            openImagePicker={openImagePicker}
+            className={className}
+            showAiPrompt={isCortexAiActive}
+          />
+        ) : (
+          <div className="flex min-h-[500px] flex-1 items-center justify-center rounded-lg border bg-background text-sm text-muted-foreground">
+            Loading editor...
+          </div>
+        )}
 
         {/* Hidden controlled MediaPickerDialog for image selection */}
         <div className="sr-only" aria-hidden>

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