create-nextblock 0.16.1 → 0.16.3

package/templates/nextblock-template/hooks/use-hotkeys.ts

@@ -1,4 +1,4 @@
-import { useEffect, type DependencyList } from 'react';
+import { useEffect, type DependencyList } from 'react';
 
 /**
  * Hook to handle keyboard shortcuts.
@@ -8,26 +8,26 @@ import { useEffect, type DependencyList } from 'react';
  * @param callback The function to call when the key combination is pressed
  * @param deps Dependencies array for the effect
  */
-export function useHotkeys(
-  key: string,
-  callback: (event: KeyboardEvent) => void,
-  deps: DependencyList = [],
-) {
-  useEffect(() => {
-    const normalizedShortcut = key.toLowerCase();
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const isCtrl = event.ctrlKey || event.metaKey; // cmd on mac, ctrl on windows
-      const keyLower = typeof event.key === 'string' ? event.key.toLowerCase() : '';
-      const isSaveKey = keyLower === 's' || event.code === 'KeyS';
-
-      // Check for ctrl+s / cmd+s
-      if ((normalizedShortcut === 'ctrl+s' || normalizedShortcut === 'meta+s') && isCtrl && isSaveKey) {
-        event.preventDefault();
-        callback(event);
-      }
-    };
-
+export function useHotkeys(
+  key: string,
+  callback: (event: KeyboardEvent) => void,
+  deps: DependencyList = [],
+) {
+  useEffect(() => {
+    const normalizedShortcut = key.toLowerCase();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isCtrl = event.ctrlKey || event.metaKey; // cmd on mac, ctrl on windows
+      const keyLower = typeof event.key === 'string' ? event.key.toLowerCase() : '';
+      const isSaveKey = keyLower === 's' || event.code === 'KeyS';
+
+      // Check for ctrl+s / cmd+s
+      if ((normalizedShortcut === 'ctrl+s' || normalizedShortcut === 'meta+s') && isCtrl && isSaveKey) {
+        event.preventDefault();
+        callback(event);
+      }
+    };
+
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [key, ...deps]); // callback should be stable or included in deps if handled by caller

package/templates/nextblock-template/hooks/useGlobalSearch.ts

@@ -1,101 +1,101 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-import { useLanguage } from '../context/LanguageContext';
-import type {
-  GlobalSearchFilter,
-  GlobalSearchResponse,
-  GlobalSearchResult,
-} from '../lib/search/types';
-
-type SearchStatus = 'idle' | 'loading' | 'success' | 'error';
-
-export function useGlobalSearch({
-  initialQuery = '',
-  initialFilter = 'all',
-  limit = 12,
-}: {
-  initialQuery?: string;
-  initialFilter?: GlobalSearchFilter;
-  limit?: number;
-} = {}) {
-  const { currentLocale } = useLanguage();
-  const [query, setQuery] = useState(initialQuery);
-  const [filter, setFilter] = useState<GlobalSearchFilter>(initialFilter);
-  const [results, setResults] = useState<GlobalSearchResult[]>([]);
-  const [counts, setCounts] = useState<GlobalSearchResponse['counts']>({
-    all: 0,
-    page: 0,
-    post: 0,
-    product: 0,
-  });
-  const [status, setStatus] = useState<SearchStatus>('idle');
-
-  const normalizedQuery = useMemo(() => query.replace(/\s+/g, ' ').trim(), [query]);
-  const canSearch = normalizedQuery.length >= 2;
-
-  useEffect(() => {
-    if (!canSearch) {
-      setResults([]);
-      setCounts({ all: 0, page: 0, post: 0, product: 0 });
-      setStatus('idle');
-      return;
-    }
-
-    const controller = new AbortController();
-    const timeoutId = window.setTimeout(async () => {
-      setStatus('loading');
-
-      const params = new URLSearchParams({
-        q: normalizedQuery,
-        type: filter,
-        limit: String(limit),
-      });
-
-      if (currentLocale) {
-        params.set('locale', currentLocale);
-      }
-
-      try {
-        const response = await fetch(`/api/search?${params.toString()}`, {
-          signal: controller.signal,
-        });
-
-        if (!response.ok) {
-          throw new Error(`Search request failed with ${response.status}`);
-        }
-
-        const payload = (await response.json()) as GlobalSearchResponse;
-        setResults(payload.results);
-        setCounts(payload.counts);
-        setStatus('success');
-      } catch (error) {
-        if ((error as Error).name === 'AbortError') {
-          return;
-        }
-
-        console.error('Global search request failed:', error);
-        setResults([]);
-        setCounts({ all: 0, page: 0, post: 0, product: 0 });
-        setStatus('error');
-      }
-    }, 180);
-
-    return () => {
-      controller.abort();
-      window.clearTimeout(timeoutId);
-    };
-  }, [canSearch, currentLocale, filter, limit, normalizedQuery]);
-
-  return {
-    query,
-    setQuery,
-    filter,
-    setFilter,
-    results,
-    counts,
-    status,
-    canSearch,
-    isLoading: status === 'loading',
-  };
-}
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useLanguage } from '../context/LanguageContext';
+import type {
+  GlobalSearchFilter,
+  GlobalSearchResponse,
+  GlobalSearchResult,
+} from '../lib/search/types';
+
+type SearchStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export function useGlobalSearch({
+  initialQuery = '',
+  initialFilter = 'all',
+  limit = 12,
+}: {
+  initialQuery?: string;
+  initialFilter?: GlobalSearchFilter;
+  limit?: number;
+} = {}) {
+  const { currentLocale } = useLanguage();
+  const [query, setQuery] = useState(initialQuery);
+  const [filter, setFilter] = useState<GlobalSearchFilter>(initialFilter);
+  const [results, setResults] = useState<GlobalSearchResult[]>([]);
+  const [counts, setCounts] = useState<GlobalSearchResponse['counts']>({
+    all: 0,
+    page: 0,
+    post: 0,
+    product: 0,
+  });
+  const [status, setStatus] = useState<SearchStatus>('idle');
+
+  const normalizedQuery = useMemo(() => query.replace(/\s+/g, ' ').trim(), [query]);
+  const canSearch = normalizedQuery.length >= 2;
+
+  useEffect(() => {
+    if (!canSearch) {
+      setResults([]);
+      setCounts({ all: 0, page: 0, post: 0, product: 0 });
+      setStatus('idle');
+      return;
+    }
+
+    const controller = new AbortController();
+    const timeoutId = window.setTimeout(async () => {
+      setStatus('loading');
+
+      const params = new URLSearchParams({
+        q: normalizedQuery,
+        type: filter,
+        limit: String(limit),
+      });
+
+      if (currentLocale) {
+        params.set('locale', currentLocale);
+      }
+
+      try {
+        const response = await fetch(`/api/search?${params.toString()}`, {
+          signal: controller.signal,
+        });
+
+        if (!response.ok) {
+          throw new Error(`Search request failed with ${response.status}`);
+        }
+
+        const payload = (await response.json()) as GlobalSearchResponse;
+        setResults(payload.results);
+        setCounts(payload.counts);
+        setStatus('success');
+      } catch (error) {
+        if ((error as Error).name === 'AbortError') {
+          return;
+        }
+
+        console.error('Global search request failed:', error);
+        setResults([]);
+        setCounts({ all: 0, page: 0, post: 0, product: 0 });
+        setStatus('error');
+      }
+    }, 180);
+
+    return () => {
+      controller.abort();
+      window.clearTimeout(timeoutId);
+    };
+  }, [canSearch, currentLocale, filter, limit, normalizedQuery]);
+
+  return {
+    query,
+    setQuery,
+    filter,
+    setFilter,
+    results,
+    counts,
+    status,
+    canSearch,
+    isLoading: status === 'loading',
+  };
+}

package/templates/nextblock-template/index.d.ts

@@ -1,7 +1,7 @@
-declare module '*.svg' {
-  const content: any;
-  export const ReactComponent: any;
-  export default content;
-}
-
-declare module 'uuid';
+declare module '*.svg' {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}
+
+declare module 'uuid';

package/templates/nextblock-template/lib/auth-redirects.ts

@@ -1,46 +1,46 @@
-import type { Database } from '@nextblock-cms/db';
-
-type AuthProfile = Pick<Database['public']['Tables']['profiles']['Row'], 'role' | 'full_name'> | null;
-
-const DASHBOARD_PATH = '/cms/dashboard';
-const HOME_PATH = '/';
-const PROFILE_PATH = '/profile';
-const PASSWORD_RESET_PATH = '/profile/password';
-
-function isSafeInternalPath(path?: string | null) {
-  return Boolean(path && path.startsWith('/') && !path.startsWith('//'));
-}
-
-function isDashboardPath(path: string) {
-  return path === DASHBOARD_PATH || path.startsWith(`${DASHBOARD_PATH}/`);
-}
-
-export function isCustomerProfileComplete(profile: AuthProfile) {
-  return Boolean(profile?.full_name?.trim());
-}
-
-export function resolvePostAuthRedirect(
-  profile: AuthProfile,
-  requestedPath?: string | null
-) {
-  const safePath = isSafeInternalPath(requestedPath) ? requestedPath : null;
-  const role = profile?.role ?? null;
-
-  if (safePath === PASSWORD_RESET_PATH) {
-    return PASSWORD_RESET_PATH;
-  }
-
-  if (role === 'ADMIN' || role === 'WRITER') {
-    return safePath ?? DASHBOARD_PATH;
-  }
-
-  if (!isCustomerProfileComplete(profile)) {
-    return PROFILE_PATH;
-  }
-
-  if (safePath && !isDashboardPath(safePath)) {
-    return safePath;
-  }
-
-  return HOME_PATH;
-}
+import type { Database } from '@nextblock-cms/db';
+
+type AuthProfile = Pick<Database['public']['Tables']['profiles']['Row'], 'role' | 'full_name'> | null;
+
+const DASHBOARD_PATH = '/cms/dashboard';
+const HOME_PATH = '/';
+const PROFILE_PATH = '/profile';
+const PASSWORD_RESET_PATH = '/profile/password';
+
+function isSafeInternalPath(path?: string | null) {
+  return Boolean(path && path.startsWith('/') && !path.startsWith('//'));
+}
+
+function isDashboardPath(path: string) {
+  return path === DASHBOARD_PATH || path.startsWith(`${DASHBOARD_PATH}/`);
+}
+
+export function isCustomerProfileComplete(profile: AuthProfile) {
+  return Boolean(profile?.full_name?.trim());
+}
+
+export function resolvePostAuthRedirect(
+  profile: AuthProfile,
+  requestedPath?: string | null
+) {
+  const safePath = isSafeInternalPath(requestedPath) ? requestedPath : null;
+  const role = profile?.role ?? null;
+
+  if (safePath === PASSWORD_RESET_PATH) {
+    return PASSWORD_RESET_PATH;
+  }
+
+  if (role === 'ADMIN' || role === 'WRITER') {
+    return safePath ?? DASHBOARD_PATH;
+  }
+
+  if (!isCustomerProfileComplete(profile)) {
+    return PROFILE_PATH;
+  }
+
+  if (safePath && !isDashboardPath(safePath)) {
+    return safePath;
+  }
+
+  return HOME_PATH;
+}

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

@@ -1,134 +1,134 @@
-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('notacolour')).toEqual({});
-    expect(resolveTextColor('javascript:alert(1)')).toEqual({});
-    expect(resolveTextColor('url(https://evil.test/x.png)')).toEqual({});
-    // A valid name with anything appended is not a name — this is the injection case,
-    // and it must stay rejected even though `red` on its own is now accepted.
-    expect(resolveTextColor('red; background: url(x)')).toEqual({});
-  });
-
-  it('accepts CSS named colours, which seeded and AI-authored content actually uses', () => {
-    // The seeded contact-page heading is `textColor: "white"`. It matched neither a
-    // token nor the hex/rgb/hsl pattern, so it resolved to {} and the white-on-dark hero
-    // rendered dark-on-dark with nothing reporting a problem.
-    expect(resolveTextColor('white')).toEqual({ style: { color: 'white' } });
-    expect(resolveTextColor('Black')).toEqual({ style: { color: 'Black' } });
-    expect(resolveTextColor('  transparent ')).toEqual({ style: { color: 'transparent' } });
-
-    // Still distinguishable from a theme token, which resolves to a class instead.
-    expect(resolveTextColor('accent')).toEqual({ className: 'text-accent' });
-  });
-
-  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('white')).toBe(true);
-    // A theme token is not a literal colour: the two share one field and are told apart
-    // only here, so this must keep answering false.
-    expect(isCustomCssColor('accent')).toBe(false);
-    expect(isCustomCssColor('notacolour')).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', () => {
-    // 'red' was in this list only because named colours used to be rejected wholesale.
-    // It is a real colour and is now accepted; the genuinely invalid values stay here.
-    for (const bad of ['nonsense', 'url(x)', 'red; background: url(x)', '']) {
-      expect(HeadingBlockSchema.safeParse({ ...base, textColor: bad }).success).toBe(false);
-    }
-  });
-
-  it('stays optional', () => {
-    expect(HeadingBlockSchema.safeParse(base).success).toBe(true);
-  });
-});
+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('notacolour')).toEqual({});
+    expect(resolveTextColor('javascript:alert(1)')).toEqual({});
+    expect(resolveTextColor('url(https://evil.test/x.png)')).toEqual({});
+    // A valid name with anything appended is not a name — this is the injection case,
+    // and it must stay rejected even though `red` on its own is now accepted.
+    expect(resolveTextColor('red; background: url(x)')).toEqual({});
+  });
+
+  it('accepts CSS named colours, which seeded and AI-authored content actually uses', () => {
+    // The seeded contact-page heading is `textColor: "white"`. It matched neither a
+    // token nor the hex/rgb/hsl pattern, so it resolved to {} and the white-on-dark hero
+    // rendered dark-on-dark with nothing reporting a problem.
+    expect(resolveTextColor('white')).toEqual({ style: { color: 'white' } });
+    expect(resolveTextColor('Black')).toEqual({ style: { color: 'Black' } });
+    expect(resolveTextColor('  transparent ')).toEqual({ style: { color: 'transparent' } });
+
+    // Still distinguishable from a theme token, which resolves to a class instead.
+    expect(resolveTextColor('accent')).toEqual({ className: 'text-accent' });
+  });
+
+  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('white')).toBe(true);
+    // A theme token is not a literal colour: the two share one field and are told apart
+    // only here, so this must keep answering false.
+    expect(isCustomCssColor('accent')).toBe(false);
+    expect(isCustomCssColor('notacolour')).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', () => {
+    // 'red' was in this list only because named colours used to be rejected wholesale.
+    // It is a real colour and is now accepted; the genuinely invalid values stay here.
+    for (const bad of ['nonsense', 'url(x)', 'red; background: url(x)', '']) {
+      expect(HeadingBlockSchema.safeParse({ ...base, textColor: bad }).success).toBe(false);
+    }
+  });
+
+  it('stays optional', () => {
+    expect(HeadingBlockSchema.safeParse(base).success).toBe(true);
+  });
+});