create-nextblock 0.14.1 → 0.14.4

package/templates/nextblock-template/lib/blocks/blockColors.test.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest';
+import {
+  TEXT_COLOR_CLASSES,
+  TEXT_COLOR_TOKENS,
+  TEXT_COLOR_TOKEN_OPTIONS,
+  isCustomCssColor,
+  isTextColorToken,
+  resolveTextAlign,
+  resolveTextColor,
+} from './blockColors';
+import { HeadingBlockSchema } from './blockRegistry';
+
+describe('resolveTextColor', () => {
+  it('maps theme tokens to a static class and no inline style', () => {
+    expect(resolveTextColor('primary')).toEqual({ className: 'text-primary' });
+    expect(resolveTextColor('foreground')).toEqual({ className: 'text-foreground' });
+  });
+
+  it('maps "muted" to the readable foreground pair, not the surface colour', () => {
+    // Regression: the renderer used to emit `text-muted` (hsl(var(--muted)),
+    // a near-white surface) while both CMS previews used muted-foreground.
+    expect(resolveTextColor('muted')).toEqual({ className: 'text-muted-foreground' });
+  });
+
+  it('renders custom colours as an inline style', () => {
+    expect(resolveTextColor('#FF8800')).toEqual({ style: { color: '#FF8800' } });
+    expect(resolveTextColor('rgba(255, 136, 0, 0.8)')).toEqual({ style: { color: 'rgba(255, 136, 0, 0.8)' } });
+    expect(resolveTextColor('hsl(28, 100%, 50%)')).toEqual({ style: { color: 'hsl(28, 100%, 50%)' } });
+    expect(resolveTextColor('#f80')).toEqual({ style: { color: '#f80' } });
+    expect(resolveTextColor('#FF880080')).toEqual({ style: { color: '#FF880080' } });
+  });
+
+  it('trims incidental whitespace', () => {
+    expect(resolveTextColor('  primary  ')).toEqual({ className: 'text-primary' });
+    expect(resolveTextColor('  #FF8800 ')).toEqual({ style: { color: '#FF8800' } });
+  });
+
+  it('degrades to inherited colour rather than emitting a bogus class', () => {
+    expect(resolveTextColor(undefined)).toEqual({});
+    expect(resolveTextColor(null)).toEqual({});
+    expect(resolveTextColor('')).toEqual({});
+    expect(resolveTextColor('chartreuse')).toEqual({});
+    expect(resolveTextColor('javascript:alert(1)')).toEqual({});
+    expect(resolveTextColor('url(https://evil.test/x.png)')).toEqual({});
+    expect(resolveTextColor('red; background: url(x)')).toEqual({});
+  });
+
+  it('never emits an interpolated class name', () => {
+    for (const token of TEXT_COLOR_TOKENS) {
+      const { className } = resolveTextColor(token);
+      expect(className).toBe(TEXT_COLOR_CLASSES[token]);
+      expect(className?.startsWith('text-')).toBe(true);
+    }
+  });
+});
+
+describe('resolveTextAlign', () => {
+  it('covers every alignment the schema allows', () => {
+    expect(resolveTextAlign('left')).toBe('text-left');
+    expect(resolveTextAlign('center')).toBe('text-center');
+    expect(resolveTextAlign('right')).toBe('text-right');
+    expect(resolveTextAlign('justify')).toBe('text-justify');
+  });
+
+  it('ignores unknown values', () => {
+    expect(resolveTextAlign(undefined)).toBeUndefined();
+    expect(resolveTextAlign('sideways')).toBeUndefined();
+  });
+});
+
+describe('guards', () => {
+  it('distinguishes tokens from custom colours', () => {
+    expect(isTextColorToken('accent')).toBe(true);
+    expect(isTextColorToken('#FFF')).toBe(false);
+    expect(isCustomCssColor('#FFF')).toBe(true);
+    expect(isCustomCssColor('accent')).toBe(false);
+  });
+});
+
+describe('token options', () => {
+  it('exposes a label and swatch for every token', () => {
+    expect(TEXT_COLOR_TOKEN_OPTIONS).toHaveLength(TEXT_COLOR_TOKENS.length);
+    for (const option of TEXT_COLOR_TOKEN_OPTIONS) {
+      expect(option.label).toBeTruthy();
+      expect(option.cssColor).toMatch(/^hsl\(var\(--[a-z-]+\)\)$/);
+    }
+  });
+});
+
+describe('HeadingBlockSchema.textColor', () => {
+  const base = { level: 2 as const, text_content: 'Hello' };
+
+  it('still accepts every previously stored token', () => {
+    for (const token of ['primary', 'secondary', 'accent', 'muted', 'destructive', 'background']) {
+      expect(HeadingBlockSchema.safeParse({ ...base, textColor: token }).success).toBe(true);
+    }
+  });
+
+  it('accepts custom colours from the picker', () => {
+    for (const color of ['#FF8800', '#f80', '#FF880080', 'rgb(1,2,3)', 'rgba(1,2,3,0.5)', 'hsl(28, 100%, 50%)']) {
+      expect(HeadingBlockSchema.safeParse({ ...base, textColor: color }).success).toBe(true);
+    }
+  });
+
+  it('rejects values that are neither a token nor a colour', () => {
+    for (const bad of ['nonsense', 'url(x)', 'red', '']) {
+      expect(HeadingBlockSchema.safeParse({ ...base, textColor: bad }).success).toBe(false);
+    }
+  });
+
+  it('stays optional', () => {
+    expect(HeadingBlockSchema.safeParse(base).success).toBe(true);
+  });
+});

package/templates/nextblock-template/lib/blocks/blockColors.ts

@@ -0,0 +1,132 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * Text-colour model shared by the block renderers and the CMS previews.
+ *
+ * A colour is stored as EITHER a theme token keyword (`"primary"`) — which keeps
+ * following the active theme and dark mode — OR a literal CSS colour emitted by
+ * the colour picker (`"#FF8800"`, `"rgba(...)"`, `"hsl(...)"`). Tokens render as
+ * a static Tailwind class; literals render as an inline style.
+ *
+ * Keep this the single source of truth: HeadingBlockRenderer, EditableBlock and
+ * ColumnEditor previously each carried their own map and had drifted apart
+ * (`muted` rendered as the near-invisible `text-muted` on the live site while
+ * both previews used `text-muted-foreground`).
+ */
+
+export const TEXT_COLOR_TOKENS = [
+  'foreground',
+  'primary',
+  'secondary',
+  'accent',
+  'muted',
+  'destructive',
+  'background',
+] as const;
+
+export type TextColorToken = (typeof TEXT_COLOR_TOKENS)[number];
+
+/**
+ * Token -> Tailwind class.
+ *
+ * These must be written as complete literals, never interpolated. Tailwind v4
+ * ignores the `safelist` key in the legacy JS config (libs/ui/tailwind.config.js
+ * still carries one, but v4 never reads it) — a class exists only if the scanner
+ * finds the whole string in a source file. Listing them here is what guarantees
+ * they are emitted.
+ */
+export const TEXT_COLOR_CLASSES: Record<TextColorToken, string> = {
+  foreground: 'text-foreground',
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  accent: 'text-accent',
+  // `--muted` is a near-white surface colour; the readable pair is its foreground.
+  muted: 'text-muted-foreground',
+  destructive: 'text-destructive',
+  background: 'text-background',
+};
+
+/** Token -> CSS colour, for painting swatches in the editor. */
+export const TEXT_COLOR_SWATCHES: Record<TextColorToken, string> = {
+  foreground: 'hsl(var(--foreground))',
+  primary: 'hsl(var(--primary))',
+  secondary: 'hsl(var(--secondary))',
+  accent: 'hsl(var(--accent))',
+  muted: 'hsl(var(--muted-foreground))',
+  destructive: 'hsl(var(--destructive))',
+  background: 'hsl(var(--background))',
+};
+
+export const TEXT_COLOR_LABELS: Record<TextColorToken, string> = {
+  foreground: 'Default text',
+  primary: 'Primary',
+  secondary: 'Secondary',
+  accent: 'Accent',
+  muted: 'Muted',
+  destructive: 'Destructive',
+  background: 'Background',
+};
+
+/** Token options in the shape `ColorField` expects. */
+export const TEXT_COLOR_TOKEN_OPTIONS = TEXT_COLOR_TOKENS.map((token) => ({
+  value: token,
+  label: TEXT_COLOR_LABELS[token],
+  cssColor: TEXT_COLOR_SWATCHES[token],
+}));
+
+/**
+ * Accepts what the colour picker can emit. Deliberately permissive on the inner
+ * grammar — the picker only produces well-formed values, and being strict here
+ * would reject legitimate colours authored by hand or by Cortex AI.
+ */
+export const CSS_COLOR_PATTERN =
+  /^(#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|rgba?\([^)]+\)|hsla?\([^)]+\))$/i;
+
+export function isTextColorToken(value: unknown): value is TextColorToken {
+  return typeof value === 'string' && (TEXT_COLOR_TOKENS as readonly string[]).includes(value);
+}
+
+export function isCustomCssColor(value: unknown): value is string {
+  return typeof value === 'string' && CSS_COLOR_PATTERN.test(value.trim());
+}
+
+export interface ResolvedTextColor {
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Turn a stored colour into render props. Unknown values resolve to `{}` so a
+ * stale or hand-edited value degrades to the inherited colour rather than
+ * emitting a bogus Tailwind class.
+ */
+export function resolveTextColor(value: string | null | undefined): ResolvedTextColor {
+  if (!value) return {};
+  const trimmed = value.trim();
+  if (isTextColorToken(trimmed)) {
+    return { className: TEXT_COLOR_CLASSES[trimmed] };
+  }
+  if (isCustomCssColor(trimmed)) {
+    return { style: { color: trimmed } };
+  }
+  return {};
+}
+
+/**
+ * Text alignment, also as literals. `text-justify` currently only survives
+ * because the string happens to appear in a regex in libs/editor/src/lib/kit.ts;
+ * pinning it here removes that accidental dependency.
+ */
+export const TEXT_ALIGN_CLASSES = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+  justify: 'text-justify',
+} as const;
+
+export type TextAlign = keyof typeof TEXT_ALIGN_CLASSES;
+
+export function resolveTextAlign(value: string | null | undefined): string | undefined {
+  if (!value) return undefined;
+  return TEXT_ALIGN_CLASSES[value as TextAlign];
+}

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -2,6 +2,7 @@ import { z } from '../zod-config';
 import { TestimonialBlockConfig, TestimonialBlockContent } from '../../components/blocks/TestimonialBlock';
 import { ProductGridBlockSchema, ProductGridBlockContent, FeaturedProductBlockSchema, FeaturedProductBlockContent, CartBlockSchema, CartBlockContent, CheckoutBlockSchema, CheckoutBlockContent, ProductDetailsBlockSchema, ProductDetailsBlockContent } from './ecommerce-block-schemas';
 import { availableBlockTypes, type BlockType } from './blockTypes';
+import { CSS_COLOR_PATTERN, TEXT_COLOR_TOKENS } from './blockColors';
 export { availableBlockTypes, type BlockType } from './blockTypes';
 
 /**
@@ -19,11 +20,26 @@ export const TextBlockSchema = z.object({
 });
 export type TextBlockContent = z.infer<typeof TextBlockSchema>;
 
+/**
+ * A text colour is either a theme token (keeps following the theme and dark
+ * mode) or a literal CSS colour from the colour picker. Existing rows only ever
+ * hold tokens, so widening the union is backward compatible.
+ * See `./blockColors` for the token -> class mapping used at render time.
+ */
+export const TextColorSchema = z
+  .union([
+    z.enum(TEXT_COLOR_TOKENS),
+    z.string().regex(CSS_COLOR_PATTERN, 'Must be a hex, rgb(a) or hsl(a) colour'),
+  ])
+  .describe(
+    `A theme token (${TEXT_COLOR_TOKENS.join(', ')}) or a custom CSS colour such as "#FF8800", "rgba(255,136,0,0.8)" or "hsl(28, 100%, 50%)"`,
+  );
+
 export const HeadingBlockSchema = z.object({
   level: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5), z.literal(6)]).describe('Heading level (1-6)'),
   text_content: z.string().describe('The text content of the heading'),
   textAlign: z.enum(['left', 'center', 'right', 'justify']).optional().describe('Text alignment'),
-  textColor: z.enum(['primary', 'secondary', 'accent', 'muted', 'destructive', 'background']).optional().describe('Color of the heading text'),
+  textColor: TextColorSchema.optional().describe('Color of the heading text'),
 });
 export type HeadingBlockContent = z.infer<typeof HeadingBlockSchema>;
 

package/templates/nextblock-template/lib/botProtection/verify.ts

@@ -1,134 +1,134 @@
-// lib/botProtection/verify.ts
-//
-// Shared server-side bot-protection verification: the honeypot check plus
-// Cloudflare Turnstile / Google reCAPTCHA token verification. This is the single
-// source of truth used by BOTH the page contact-form handler
-// (app/actions/formActions.ts) and the account-signup action (app/actions.ts).
-//
-// Server-only: it reads the RLS-bypassing service-role client, which throws if
-// imported into a Client Component.
-
-import { getServiceRoleSupabaseClient } from '@nextblock-cms/db/server';
-
-export type BotProtectionProvider = 'none' | 'turnstile' | 'recaptcha';
-
-// Shared field names — the client widgets emit these, the verifier reads them.
-export const HONEYPOT_FIELD = 'verification_secondary_email';
-export const TURNSTILE_TOKEN_FIELD = 'cf-turnstile-response';
-export const RECAPTCHA_TOKEN_FIELD = 'g-recaptcha-response';
-
-export type BotProtectionResult =
-  // Passed (or nothing configured beyond the honeypot).
-  | { ok: true }
-  // The honeypot was filled — almost certainly a bot. Callers should silently
-  // discard the submission and fake a success so the bot learns nothing.
-  | { ok: false; reason: 'honeypot' }
-  // The captcha was missing, failed, or could not be checked. `message` is a
-  // human-readable explanation safe to surface to the user.
-  | { ok: false; reason: 'captcha'; message: string };
-
-type VerifyOptions = {
-  // A block/form may pin a specific provider; otherwise the site-wide setting
-  // (site_settings.bot_protection_public.provider) is used.
-  botProtectionProvider?: BotProtectionProvider;
-};
-
-/**
- * Verify a submitted FormData against the configured bot protection.
- *
- * Phase 1 (honeypot) needs no network/DB and always runs — it is the always-on
- * baseline. Phase 2 (captcha) reads the global provider + secret from
- * `site_settings` and calls the provider's siteverify endpoint.
- */
-export async function verifyBotProtection(
-  formData: FormData,
-  options?: VerifyOptions
-): Promise<BotProtectionResult> {
-  // Phase 1: Honeypot validation
-  const honeypot = formData.get(HONEYPOT_FIELD);
-  if (honeypot && typeof honeypot === 'string' && honeypot.length > 0) {
-    console.warn('[Bot Protection] Honeypot triggered. Discarding submission from bot.');
-    return { ok: false, reason: 'honeypot' };
-  }
-
-  // Phase 2: Advanced captcha verification
-  try {
-    const supabase = getServiceRoleSupabaseClient();
-
-    const { data: publicSetting } = await supabase
-      .from('site_settings')
-      .select('value')
-      .eq('key', 'bot_protection_public')
-      .maybeSingle();
-
-    const { data: secretSetting } = await supabase
-      .from('site_settings')
-      .select('value')
-      .eq('key', 'bot_protection_secret')
-      .maybeSingle();
-
-    const publicVal = (publicSetting?.value || {}) as Record<string, any>;
-    const secretVal = (secretSetting?.value || {}) as Record<string, any>;
-
-    const pinnedProvider =
-      options?.botProtectionProvider === 'turnstile' || options?.botProtectionProvider === 'recaptcha'
-        ? options.botProtectionProvider
-        : undefined;
-    const provider: BotProtectionProvider = pinnedProvider || publicVal.provider || 'none';
-    const secretKey =
-      secretVal.secretKey ||
-      (provider === 'turnstile'
-        ? process.env.TURNSTILE_SECRET_KEY
-        : process.env.RECAPTCHA_SECRET_KEY) ||
-      '';
-
-    if (provider === 'turnstile') {
-      const token = formData.get(TURNSTILE_TOKEN_FIELD) as string;
-      if (!token) {
-        return { ok: false, reason: 'captcha', message: 'Security verification token is missing. Please try again.' };
-      }
-      if (!secretKey) {
-        console.error('[Bot Protection] Turnstile secret key is not configured.');
-        return { ok: false, reason: 'captcha', message: 'Bot protection is misconfigured. Please contact support.' };
-      }
-
-      const res = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: `secret=${encodeURIComponent(secretKey)}&response=${encodeURIComponent(token)}`,
-      });
-
-      const outcome = await res.json();
-      if (!outcome.success) {
-        console.warn('[Bot Protection] Turnstile verification failed:', outcome);
-        return { ok: false, reason: 'captcha', message: 'Security verification failed. Please try again.' };
-      }
-    } else if (provider === 'recaptcha') {
-      const token = formData.get(RECAPTCHA_TOKEN_FIELD) as string;
-      if (!token) {
-        return { ok: false, reason: 'captcha', message: 'Security verification token is missing. Please try again.' };
-      }
-      if (!secretKey) {
-        console.error('[Bot Protection] reCAPTCHA secret key is not configured.');
-        return { ok: false, reason: 'captcha', message: 'Bot protection is misconfigured. Please contact support.' };
-      }
-
-      const res = await fetch('https://www.google.com/recaptcha/api/siteverify', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: `secret=${encodeURIComponent(secretKey)}&response=${encodeURIComponent(token)}`,
-      });
-
-      const outcome = await res.json();
-      if (!outcome.success || outcome.score < 0.5) {
-        console.warn('[Bot Protection] reCAPTCHA verification failed:', outcome);
-        return { ok: false, reason: 'captcha', message: 'Security verification failed. Please try again.' };
-      }
-    }
-  } catch (error) {
-    console.error('[Bot Protection] Error during validation:', error);
-    return { ok: false, reason: 'captcha', message: 'Sorry, security verification could not be completed at this time.' };
-  }
-
-  return { ok: true };
-}
+// lib/botProtection/verify.ts
+//
+// Shared server-side bot-protection verification: the honeypot check plus
+// Cloudflare Turnstile / Google reCAPTCHA token verification. This is the single
+// source of truth used by BOTH the page contact-form handler
+// (app/actions/formActions.ts) and the account-signup action (app/actions.ts).
+//
+// Server-only: it reads the RLS-bypassing service-role client, which throws if
+// imported into a Client Component.
+
+import { getServiceRoleSupabaseClient } from '@nextblock-cms/db/server';
+
+export type BotProtectionProvider = 'none' | 'turnstile' | 'recaptcha';
+
+// Shared field names — the client widgets emit these, the verifier reads them.
+export const HONEYPOT_FIELD = 'verification_secondary_email';
+export const TURNSTILE_TOKEN_FIELD = 'cf-turnstile-response';
+export const RECAPTCHA_TOKEN_FIELD = 'g-recaptcha-response';
+
+export type BotProtectionResult =
+  // Passed (or nothing configured beyond the honeypot).
+  | { ok: true }
+  // The honeypot was filled — almost certainly a bot. Callers should silently
+  // discard the submission and fake a success so the bot learns nothing.
+  | { ok: false; reason: 'honeypot' }
+  // The captcha was missing, failed, or could not be checked. `message` is a
+  // human-readable explanation safe to surface to the user.
+  | { ok: false; reason: 'captcha'; message: string };
+
+type VerifyOptions = {
+  // A block/form may pin a specific provider; otherwise the site-wide setting
+  // (site_settings.bot_protection_public.provider) is used.
+  botProtectionProvider?: BotProtectionProvider;
+};
+
+/**
+ * Verify a submitted FormData against the configured bot protection.
+ *
+ * Phase 1 (honeypot) needs no network/DB and always runs — it is the always-on
+ * baseline. Phase 2 (captcha) reads the global provider + secret from
+ * `site_settings` and calls the provider's siteverify endpoint.
+ */
+export async function verifyBotProtection(
+  formData: FormData,
+  options?: VerifyOptions
+): Promise<BotProtectionResult> {
+  // Phase 1: Honeypot validation
+  const honeypot = formData.get(HONEYPOT_FIELD);
+  if (honeypot && typeof honeypot === 'string' && honeypot.length > 0) {
+    console.warn('[Bot Protection] Honeypot triggered. Discarding submission from bot.');
+    return { ok: false, reason: 'honeypot' };
+  }
+
+  // Phase 2: Advanced captcha verification
+  try {
+    const supabase = getServiceRoleSupabaseClient();
+
+    const { data: publicSetting } = await supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', 'bot_protection_public')
+      .maybeSingle();
+
+    const { data: secretSetting } = await supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', 'bot_protection_secret')
+      .maybeSingle();
+
+    const publicVal = (publicSetting?.value || {}) as Record<string, any>;
+    const secretVal = (secretSetting?.value || {}) as Record<string, any>;
+
+    const pinnedProvider =
+      options?.botProtectionProvider === 'turnstile' || options?.botProtectionProvider === 'recaptcha'
+        ? options.botProtectionProvider
+        : undefined;
+    const provider: BotProtectionProvider = pinnedProvider || publicVal.provider || 'none';
+    const secretKey =
+      secretVal.secretKey ||
+      (provider === 'turnstile'
+        ? process.env.TURNSTILE_SECRET_KEY
+        : process.env.RECAPTCHA_SECRET_KEY) ||
+      '';
+
+    if (provider === 'turnstile') {
+      const token = formData.get(TURNSTILE_TOKEN_FIELD) as string;
+      if (!token) {
+        return { ok: false, reason: 'captcha', message: 'Security verification token is missing. Please try again.' };
+      }
+      if (!secretKey) {
+        console.error('[Bot Protection] Turnstile secret key is not configured.');
+        return { ok: false, reason: 'captcha', message: 'Bot protection is misconfigured. Please contact support.' };
+      }
+
+      const res = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: `secret=${encodeURIComponent(secretKey)}&response=${encodeURIComponent(token)}`,
+      });
+
+      const outcome = await res.json();
+      if (!outcome.success) {
+        console.warn('[Bot Protection] Turnstile verification failed:', outcome);
+        return { ok: false, reason: 'captcha', message: 'Security verification failed. Please try again.' };
+      }
+    } else if (provider === 'recaptcha') {
+      const token = formData.get(RECAPTCHA_TOKEN_FIELD) as string;
+      if (!token) {
+        return { ok: false, reason: 'captcha', message: 'Security verification token is missing. Please try again.' };
+      }
+      if (!secretKey) {
+        console.error('[Bot Protection] reCAPTCHA secret key is not configured.');
+        return { ok: false, reason: 'captcha', message: 'Bot protection is misconfigured. Please contact support.' };
+      }
+
+      const res = await fetch('https://www.google.com/recaptcha/api/siteverify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: `secret=${encodeURIComponent(secretKey)}&response=${encodeURIComponent(token)}`,
+      });
+
+      const outcome = await res.json();
+      if (!outcome.success || outcome.score < 0.5) {
+        console.warn('[Bot Protection] reCAPTCHA verification failed:', outcome);
+        return { ok: false, reason: 'captcha', message: 'Security verification failed. Please try again.' };
+      }
+    }
+  } catch (error) {
+    console.error('[Bot Protection] Error during validation:', error);
+    return { ok: false, reason: 'captcha', message: 'Sorry, security verification could not be completed at this time.' };
+  }
+
+  return { ok: true };
+}