create-nextblock 0.14.2 → 0.14.4

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

@@ -6,6 +6,7 @@ import { Button } from '@nextblock-cms/ui';
 import { PlusCircle, Trash2, Edit2, GripVertical, Image as ImageIcon } from "lucide-react";
 import { SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
 import { availableBlockTypes, blockHasEditableContent, getBlockDefinition, getInitialContent, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { resolveTextAlign, resolveTextColor } from '../../../../lib/blocks/blockColors';
 import { useDroppable } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -136,9 +137,8 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
       case 'heading': {
          const content = block.content as any;
          const level = content.level || 1;
-         const headingAlign = content.textAlign || 'left';
          const textColor = content.textColor || 'foreground';
-         
+
          const sizeClasses: Record<number, string> = {
            1: "text-4xl font-extrabold",
            2: "text-3xl font-bold",
@@ -148,32 +148,27 @@ function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, bloc
            6: "text-base font-semibold",
          };
 
-         const colorClasses: Record<string, string> = {
-            primary: "text-primary",
-            secondary: "text-secondary",
-            accent: "text-accent",
-            destructive: "text-destructive",
-            muted: "text-muted-foreground",
-            background: "text-background",
-            foreground: "text-foreground"
-         };
-
-         // Override for dark background if color is basic
-         let appliedColorClass = colorClasses[textColor] || "text-foreground";
-         if (isDarkBackground) {
+         // Shared with HeadingBlockRenderer so the preview cannot drift.
+         const { className: resolvedColorClass, style: colorStyle } = resolveTextColor(textColor);
+         let appliedColorClass = resolvedColorClass ?? (colorStyle ? undefined : "text-foreground");
+         // A custom colour is literal — only the theme tokens get the dark-surface
+         // legibility override, since only they are ambiguous against it.
+         if (isDarkBackground && !colorStyle) {
             if (textColor === 'foreground') appliedColorClass = 'text-white/90';
             if (textColor === 'muted') appliedColorClass = 'text-white/70';
          }
 
          return (
             <div className="flex gap-3">
-                 <div className={cn(
-                    "w-full leading-tight",
-                    sizeClasses[level] || sizeClasses[1],
-                    appliedColorClass,
-                    headingAlign === 'center' && 'text-center',
-                    headingAlign === 'right' && 'text-right'
-                 )}>
+                 <div
+                    style={colorStyle}
+                    className={cn(
+                       "w-full leading-tight",
+                       sizeClasses[level] || sizeClasses[1],
+                       appliedColorClass,
+                       resolveTextAlign(content.textAlign)
+                    )}
+                 >
                     {content.text_content || <span className={cn("text-muted-foreground font-normal text-sm italic", isDarkBackground && "text-white/50")}>Empty heading</span>}
                  </div>
             </div>

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

@@ -9,6 +9,7 @@ type Block = Database['public']['Tables']['blocks']['Row'];
 import { Button, Card, CardContent, Avatar, AvatarImage, AvatarFallback } from "@nextblock-cms/ui";
 import { GripVertical, Edit2, Image as ImageIcon, MessageSquareQuote } from "lucide-react";
 import { blockHasEditableContent, getBlockDefinition, blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { resolveTextAlign, resolveTextColor } from '../../../../lib/blocks/blockColors';
 import { BlockEditorModal } from './BlockEditorModal';
 import { DeleteBlockButtonClient } from './DeleteBlockButtonClient';
 import { cn } from '@nextblock-cms/utils';
@@ -161,9 +162,7 @@ export default function EditableBlock({
        case 'heading': {
           const content = (block.content || {}) as any;
           const level = content.level || 1;
-          const headingAlign = content.textAlign || 'left';
-          const textColor = content.textColor || 'foreground';
-          
+
           const sizeClasses: Record<number, string> = {
             1: "text-4xl font-extrabold",
             2: "text-3xl font-bold",
@@ -173,25 +172,20 @@ export default function EditableBlock({
             6: "text-base font-semibold",
           };
 
-          const colorClasses: Record<string, string> = {
-             primary: "text-primary",
-             secondary: "text-secondary",
-             accent: "text-accent",
-             destructive: "text-destructive",
-             muted: "text-muted-foreground",
-             background: "text-background",
-             foreground: "text-foreground"
-          };
+          // Shared with HeadingBlockRenderer so the preview cannot drift.
+          const { className: colorClass, style: colorStyle } = resolveTextColor(content.textColor);
 
           return (
              <div className="py-2">
-                  <div className={cn(
-                     "w-full leading-tight",
-                     sizeClasses[level] || sizeClasses[1],
-                     colorClasses[textColor] || "text-foreground",
-                     headingAlign === 'center' && 'text-center',
-                     headingAlign === 'right' && 'text-right'
-                  )}>
+                  <div
+                     style={colorStyle}
+                     className={cn(
+                        "w-full leading-tight",
+                        sizeClasses[level] || sizeClasses[1],
+                        colorClass ?? (colorStyle ? undefined : "text-foreground"),
+                        resolveTextAlign(content.textAlign)
+                     )}
+                  >
                      {content.text_content || <span className="text-muted-foreground italic text-sm font-normal">Empty heading</span>}
                   </div>
              </div>

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/settings/global-css/components/ThemeEditor.tsx

@@ -0,0 +1,382 @@
+'use client';
+
+import React from 'react';
+import {
+  Button,
+  ColorField,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@nextblock-cms/ui';
+import { contrastRatio, parseCssColor, rateContrast } from '@nextblock-cms/utils';
+import { AlertTriangle, Check } from 'lucide-react';
+import type { SiteTheme } from '../../../../../lib/themes/buildThemeCss';
+import { THEME_TOKEN_GROUPS, type ThemeTokenDef } from '../../../../../lib/themes/tokens';
+import {
+  cssColorToTokenValue,
+  tokenValueToCss,
+  tokenValueToHex,
+} from '../../../../../lib/themes/tokenColor';
+import { THEME_ICON_NAMES, ThemeIcon } from '../../../../../components/theme-icon';
+
+export interface ThemeDraft {
+  name: string;
+  description: string;
+  icon: string;
+  color_scheme: 'light' | 'dark';
+  tokens: Record<string, string>;
+  extra_css: string;
+  is_active: boolean;
+}
+
+export function themeToDraft(theme: SiteTheme): ThemeDraft {
+  return {
+    name: theme.name,
+    description: theme.description ?? '',
+    icon: theme.icon || 'Palette',
+    color_scheme: theme.color_scheme,
+    tokens: { ...(theme.tokens ?? {}) },
+    extra_css: theme.extra_css ?? '',
+    is_active: theme.is_active,
+  };
+}
+
+/**
+ * Live contrast readout for a foreground/background token pair. Headings and
+ * body copy both come from these tokens, so a bad pair here is a site-wide
+ * legibility bug — surfacing it at edit time is the whole point.
+ */
+function ContrastBadge({ fg, bg }: { fg?: string; bg?: string }) {
+  const result = React.useMemo(() => {
+    if (!fg || !bg) return null;
+    const f = parseCssColor(tokenValueToCss(fg));
+    const b = parseCssColor(tokenValueToCss(bg));
+    if (!f || !b) return null;
+    const ratio = contrastRatio(f, b);
+    return { ratio, rating: rateContrast(ratio) };
+  }, [fg, bg]);
+
+  if (!result) return null;
+  const failing = result.rating === 'Fail';
+  return (
+    <span
+      title={`Contrast against its paired surface: ${result.ratio}:1 (WCAG ${result.rating})`}
+      className={
+        failing
+          ? 'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium bg-destructive/10 text-destructive'
+          : 'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium bg-muted text-muted-foreground'
+      }
+    >
+      {failing ? <AlertTriangle className="h-3 w-3" /> : <Check className="h-3 w-3" />}
+      {result.ratio}:1 {result.rating}
+    </span>
+  );
+}
+
+function TokenRow({
+  token,
+  draft,
+  onTokenChange,
+}: {
+  token: ThemeTokenDef;
+  draft: ThemeDraft;
+  onTokenChange: (key: string, value: string | undefined) => void;
+}) {
+  const raw = draft.tokens[token.key];
+
+  if (token.kind === 'length') {
+    return (
+      <div className="space-y-1.5">
+        <Label htmlFor={`token-${token.key}`} className="text-sm">
+          {token.label}
+        </Label>
+        <Input
+          id={`token-${token.key}`}
+          value={raw ?? ''}
+          onChange={(event) => onTokenChange(token.key, event.target.value || undefined)}
+          placeholder="0.75rem"
+          className="h-9 font-mono text-xs"
+        />
+        {token.hint ? <p className="text-[11px] text-muted-foreground">{token.hint}</p> : null}
+      </div>
+    );
+  }
+
+  const hex = raw ? tokenValueToHex(raw) : null;
+  const pairedValue = token.pairedWith ? draft.tokens[token.pairedWith] : undefined;
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor={`token-${token.key}`} className="text-sm">
+          {token.label}
+        </Label>
+        {token.pairedWith ? <ContrastBadge fg={raw} bg={pairedValue} /> : null}
+      </div>
+      <ColorField
+        id={`token-${token.key}`}
+        value={hex ?? undefined}
+        placeholder="Not set"
+        clearLabel="Unset"
+        onChange={(next) => {
+          if (!next) {
+            onTokenChange(token.key, undefined);
+            return;
+          }
+          const triplet = cssColorToTokenValue(next);
+          onTokenChange(token.key, triplet ?? undefined);
+        }}
+        // Theme tokens ARE the palette, so there is nothing to offer as a token
+        // shortcut here — this is the custom picker only.
+        tokens={[]}
+        contrastAgainst={pairedValue ? tokenValueToCss(pairedValue) : undefined}
+      />
+      <p className="font-mono text-[10px] text-muted-foreground">
+        --{token.key}: {raw ?? <span className="italic">inherited</span>}
+      </p>
+    </div>
+  );
+}
+
+export function ThemeEditor({
+  theme,
+  draft,
+  onDraftChange,
+}: {
+  theme: SiteTheme;
+  draft: ThemeDraft;
+  onDraftChange: (next: ThemeDraft) => void;
+}) {
+  const set = <K extends keyof ThemeDraft>(key: K, value: ThemeDraft[K]) =>
+    onDraftChange({ ...draft, [key]: value });
+
+  const onTokenChange = (key: string, value: string | undefined) => {
+    const tokens = { ...draft.tokens };
+    if (value === undefined) delete tokens[key];
+    else tokens[key] = value;
+    onDraftChange({ ...draft, tokens });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-1.5">
+          <Label htmlFor="theme-name">Name</Label>
+          <Input
+            id="theme-name"
+            value={draft.name}
+            onChange={(event) => set('name', event.target.value)}
+            placeholder="Midnight"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="theme-icon">Switcher icon</Label>
+          <Select value={draft.icon} onValueChange={(value) => set('icon', value)}>
+            <SelectTrigger id="theme-icon">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="max-h-64">
+              {THEME_ICON_NAMES.map((name) => (
+                <SelectItem key={name} value={name}>
+                  <span className="flex items-center gap-2">
+                    <ThemeIcon name={name} size={14} />
+                    {name}
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="theme-description">Description</Label>
+          <Input
+            id="theme-description"
+            value={draft.description}
+            onChange={(event) => set('description', event.target.value)}
+            placeholder="What this theme is for"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="theme-scheme">Colour scheme</Label>
+          <Select
+            value={draft.color_scheme}
+            onValueChange={(value) => set('color_scheme', value as 'light' | 'dark')}
+          >
+            <SelectTrigger id="theme-scheme">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+            </SelectContent>
+          </Select>
+          <p className="text-[11px] text-muted-foreground">
+            Sets the CSS <code>color-scheme</code> for native controls. Dark also applies Tailwind&apos;s{' '}
+            <code>dark:</code> variants.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        <div className="flex items-center gap-2">
+          <input
+            id="theme-active"
+            type="checkbox"
+            className="h-4 w-4 rounded border-input"
+            checked={draft.is_active}
+            onChange={(event) => set('is_active', event.target.checked)}
+            disabled={theme.is_default}
+          />
+          <Label htmlFor="theme-active" className="text-sm font-normal">
+            Show in the theme switcher
+          </Label>
+        </div>
+        {theme.is_default ? (
+          <p className="text-[11px] text-muted-foreground">The default theme is always visible.</p>
+        ) : null}
+      </div>
+
+      {THEME_TOKEN_GROUPS.map((group) => (
+        <section key={group.id} className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">{group.label}</h3>
+            <p className="text-[11px] text-muted-foreground">{group.description}</p>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {group.tokens.map((token) => (
+              <TokenRow key={token.key} token={token} draft={draft} onTokenChange={onTokenChange} />
+            ))}
+          </div>
+        </section>
+      ))}
+
+      <section className="space-y-2">
+        <Label htmlFor="theme-extra-css">Extra CSS for this theme</Label>
+        <p className="text-[11px] text-muted-foreground">
+          Scoped automatically to this theme — start selectors with <code>&amp;</code>, e.g.{' '}
+          <code>&amp; h1 {'{'} text-shadow: 0 0 5px hsl(var(--primary)); {'}'}</code>
+        </p>
+        <textarea
+          id="theme-extra-css"
+          value={draft.extra_css}
+          onChange={(event) => set('extra_css', event.target.value)}
+          spellCheck={false}
+          className="flex min-h-[140px] w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          placeholder={'& h1 {\n  letter-spacing: -0.02em;\n}'}
+        />
+      </section>
+    </div>
+  );
+}
+
+/** Renders the draft as a self-contained preview card, scoped by inline vars. */
+export function ThemePreview({ draft }: { draft: ThemeDraft }) {
+  const style = React.useMemo(() => {
+    const vars: Record<string, string> = {};
+    for (const [key, value] of Object.entries(draft.tokens)) {
+      vars[`--${key}`] = value;
+    }
+    return vars as React.CSSProperties;
+  }, [draft.tokens]);
+
+  return (
+    <div
+      style={style}
+      className="rounded-lg border p-4"
+      // The preview paints with the draft's own tokens, so it updates live
+      // without saving and without touching the surrounding CMS chrome.
+    >
+      <div className="rounded-md p-4" style={{ background: 'hsl(var(--background))' }}>
+        <p className="text-sm font-semibold" style={{ color: 'hsl(var(--foreground))' }}>
+          {draft.name || 'Untitled theme'}
+        </p>
+        <p className="mt-1 text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>
+          {draft.description || 'The quick brown fox jumps over the lazy dog.'}
+        </p>
+        <div className="mt-3 flex flex-wrap gap-2">
+          <span
+            className="rounded px-2.5 py-1 text-xs font-medium"
+            style={{
+              background: 'hsl(var(--primary))',
+              color: 'hsl(var(--primary-foreground))',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            Primary
+          </span>
+          <span
+            className="rounded px-2.5 py-1 text-xs font-medium"
+            style={{
+              background: 'hsl(var(--secondary))',
+              color: 'hsl(var(--secondary-foreground))',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            Secondary
+          </span>
+          <span
+            className="rounded px-2.5 py-1 text-xs font-medium"
+            style={{
+              background: 'hsl(var(--accent))',
+              color: 'hsl(var(--accent-foreground))',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            Accent
+          </span>
+          <span
+            className="rounded px-2.5 py-1 text-xs font-medium"
+            style={{
+              background: 'hsl(var(--destructive))',
+              color: 'hsl(var(--destructive-foreground))',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            Destructive
+          </span>
+          <span
+            className="rounded px-2.5 py-1 text-xs font-medium"
+            style={{
+              background: 'hsl(var(--warning))',
+              color: 'hsl(var(--warning-foreground))',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            Warning
+          </span>
+        </div>
+        <div
+          className="mt-3 rounded-md border p-3"
+          style={{
+            background: 'hsl(var(--card))',
+            color: 'hsl(var(--card-foreground))',
+            borderColor: 'hsl(var(--border))',
+            borderRadius: 'var(--radius)',
+          }}
+        >
+          <p className="text-xs font-medium">Card surface</p>
+          <div
+            className="mt-2 h-8 rounded-md border px-2 text-xs leading-8"
+            style={{
+              borderColor: 'hsl(var(--input))',
+              color: 'hsl(var(--muted-foreground))',
+              borderRadius: 'var(--radius)',
+            }}
+          >
+            Input field
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ThemePreviewActions({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-wrap items-center gap-2">{children}</div>;
+}
+
+export { Button };