npm - create-nextblock - Versions diffs - 0.14.2 → 0.14.4 - Mend

create-nextblock 0.14.2 → 0.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/templates/nextblock-template/app/layout.tsx CHANGED Viewed

@@ -13,6 +13,12 @@ import { ConsentGatedAnalytics } from '../components/privacy/ConsentGatedAnalyti
 import { ConsentBanner } from '../components/privacy/ConsentBanner';
 import { getPrivacySettings } from '../lib/privacy/settings';
 import { DEFAULT_PRIVACY_SETTINGS } from '../lib/privacy/types';
+import {
+  activeThemeSlugs,
+  buildThemeCss,
+  defaultThemeSlug,
+  type SiteTheme,
+} from '../lib/themes/buildThemeCss';
 import { DeferredSpeedInsights } from '../components/DeferredSpeedInsights';
 import { DeferredVisualEditing } from '../components/visual-editing/DeferredVisualEditing';
 import {
@@ -169,6 +175,25 @@ const getCachedGlobalCss = unstable_cache(
   { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS }
 );
+const getCachedSiteThemes = unstable_cache(
+  async (): Promise<SiteTheme[]> => {
+    const supabase = createStaticSupabaseClient();
+    const { data, error } = await supabase
+      .from('site_themes')
+      .select('id, slug, name, description, icon, color_scheme, tokens, extra_css, is_system, is_default, is_active, sort_order')
+      .order('sort_order');
+    if (error || !data) {
+      // A missing table (pre-migration install) must not take the site down —
+      // libs/ui/src/styles/theme.css still ships a working fallback palette.
+      return [];
+    }
+    return data as unknown as SiteTheme[];
+  },
+  ['public-layout-site-themes'],
+  { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS, tags: ['public-layout-site-themes'] }
+);
 const getCachedTranslations = unstable_cache(
   async () => {
     const supabase = createStaticSupabaseClient();
@@ -298,6 +323,7 @@ async function loadLayoutData() {
       siteTitle: 'NextBlock',
       isEcommerceActive: false,
       globalCss: '',
+      siteThemes: [] as SiteTheme[],
       privacySettings: DEFAULT_PRIVACY_SETTINGS,
       footerAttributionEnabled: true,
       rememberVisitorChoice: DEFAULT_LANGUAGE_DETECTION_SETTINGS.rememberVisitorChoice,
@@ -324,6 +350,7 @@ async function loadLayoutData() {
     currenciesResult,
     copyrightSettingsResult,
     globalCssResult,
+    siteThemesResult,
     translationsResult,
     isEcommerceActive,
     privacySettings,
@@ -336,6 +363,7 @@ async function loadLayoutData() {
       en: '(c) {year} Nextblock CMS. All rights reserved.',
     })),
     getCachedGlobalCss().catch(() => ''),
+    getCachedSiteThemes().catch(() => [] as SiteTheme[]),
     getCachedTranslations().catch(() => []),
     verifyPackageOnline('ecommerce').catch(() => false),
     getPrivacySettings().catch(() => DEFAULT_PRIVACY_SETTINGS),
@@ -369,6 +397,7 @@ async function loadLayoutData() {
   const copyrightText = templateForLocale.replace('{year}', new Date().getFullYear().toString());
   const globalCss = typeof globalCssResult === 'string' ? globalCssResult : '';
+  const siteThemes = Array.isArray(siteThemesResult) ? siteThemesResult : [];
   const translations = Array.isArray(translationsResult) ? translationsResult : [];
   const hasSupabaseEnv = isSupabaseConfigured();
@@ -404,6 +433,7 @@ async function loadLayoutData() {
     siteTitle,
     isEcommerceActive,
     globalCss,
+    siteThemes,
     privacySettings,
     footerAttributionEnabled,
     rememberVisitorChoice: languageDetectionSettings.rememberVisitorChoice,
@@ -486,10 +516,25 @@ export default async function RootLayout({
     siteTitle,
     isEcommerceActive,
     globalCss,
+    siteThemes,
     privacySettings,
     footerAttributionEnabled,
     rememberVisitorChoice,
   } = await loadLayoutData();
+  // Themes are rendered server-side into <head> so the palette is correct on the
+  // very first paint, before next-themes' blocking script adds the html class.
+  const themeCss = buildThemeCss(siteThemes);
+  const themeSlugs = activeThemeSlugs(siteThemes);
+  const initialTheme = defaultThemeSlug(siteThemes);
+  const themeCatalog = siteThemes
+    .filter((theme) => theme.is_active)
+    .sort((a, b) => a.sort_order - b.sort_order)
+    .map((theme) => ({
+      slug: theme.slug,
+      name: theme.name,
+      icon: theme.icon,
+      colorScheme: theme.color_scheme,
+    }));
   const draft = await draftMode();
   // GTM container id comes solely from the privacy settings row (site_settings).
   // There is intentionally no NEXT_PUBLIC_GTM_ID env fallback — analytics is
@@ -517,6 +562,7 @@ export default async function RootLayout({
     <html lang={serverDeterminedLocale} suppressHydrationWarning>
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {themeCss && <style id="nb-theme-tokens" dangerouslySetInnerHTML={{ __html: themeCss }} />}
         {globalCss && <style dangerouslySetInnerHTML={{ __html: globalCss }} />}
       </head>
       <body className="min-h-screen">
@@ -545,6 +591,9 @@ export default async function RootLayout({
           rememberVisitorChoice={rememberVisitorChoice}
           translations={translations}
           nonce={nonce}
+          themeSlugs={themeSlugs}
+          initialTheme={initialTheme}
+          themeCatalog={themeCatalog}
         >
           <ToasterProvider />
           <AppShell

package/templates/nextblock-template/app/providers.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
 import { AuthProvider } from '../context/AuthContext';
 import { LanguageProvider, useLanguage } from '../context/LanguageContext';
 import { CurrentContentProvider } from '../context/CurrentContentContext';
+import { ThemeCatalogProvider } from '../context/ThemeCatalogContext';
 import { DeferredCartTranslator } from '../components/DeferredCartTranslator';
 import { CurrencyProvider } from '@nextblock-cms/ecommerce/CurrencyProvider';
 import { TranslationsProvider } from '@nextblock-cms/utils';
@@ -46,9 +47,20 @@ export function Providers({ children, ...props }: { children: React.ReactNode;[k
     initialDefaultLanguage,
     rememberVisitorChoice,
     translations,
-    nonce
+    nonce,
+    themeSlugs,
+    initialTheme,
+    themeCatalog,
   } = props;
+  // Themes come from the site_themes table. Fall back to the three that ship in
+  // libs/ui/src/styles/theme.css if the table is empty or unreachable, so the
+  // switcher never renders an empty list.
+  const resolvedThemes: string[] =
+    Array.isArray(themeSlugs) && themeSlugs.length > 0 ? themeSlugs : ['light', 'dark', 'vibrant'];
+  const resolvedDefault: string =
+    typeof initialTheme === 'string' && resolvedThemes.includes(initialTheme) ? initialTheme : 'light';
   return (
     <AuthProvider serverUser={serverUser} serverProfile={serverProfile}>
       <LanguageProvider
@@ -67,13 +79,13 @@ export function Providers({ children, ...props }: { children: React.ReactNode;[k
             <TranslationBridge translations={translations}>
               <ThemeProvider
                 attribute="class"
-                defaultTheme="light"
+                defaultTheme={resolvedDefault}
                 enableSystem
                 disableTransitionOnChange
                 nonce={nonce}
-                themes={['light', 'dark', 'vibrant']}
+                themes={resolvedThemes}
               >
-                {children}
+                <ThemeCatalogProvider themes={themeCatalog}>{children}</ThemeCatalogProvider>
               </ThemeProvider>
             </TranslationBridge>
           </CurrentContentProvider>

package/templates/nextblock-template/components/blocks/renderers/HeadingBlockRenderer.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from "react";
 import type { HeadingBlockContent } from '../../../lib/blocks/blockRegistry';
+import { resolveTextAlign, resolveTextColor } from '../../../lib/blocks/blockColors';
 import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
 interface HeadingBlockRendererProps {
@@ -23,19 +24,15 @@ const HeadingBlockRenderer: React.FC<HeadingBlockRendererProps> = ({
       : 2;
   const Tag: React.ElementType = `h${level}`;
-  let alignmentClass = "";
-  if (content.textAlign) {
-    alignmentClass = `text-${content.textAlign}`;
-  }
+  const alignmentClass = resolveTextAlign(content.textAlign);
+  const { className: colorClass, style: colorStyle } = resolveTextColor(content.textColor);
-  let colorClass = "";
-  if (content.textColor) {
-    colorClass = `text-${content.textColor}`;
-  }
+  const combinedClasses = ["my-6 font-bold container mx-auto", alignmentClass, colorClass]
+    .filter(Boolean)
+    .join(" ");
-  const combinedClasses = `my-6 font-bold container mx-auto ${alignmentClass} ${colorClass}`.trim();
   return (
-    <Tag className={combinedClasses} {...visualEditAttributes}>
+    <Tag className={combinedClasses} style={colorStyle} {...visualEditAttributes}>
       {content.text_content}
     </Tag>
   );

package/templates/nextblock-template/components/theme-icon.tsx ADDED Viewed

@@ -0,0 +1,78 @@
+"use client";
+import {
+  Aperture,
+  Atom,
+  Blend,
+  Brush,
+  Cloud,
+  Contrast,
+  Droplet,
+  Feather,
+  Flame,
+  Gem,
+  Ghost,
+  Leaf,
+  Moon,
+  Mountain,
+  Palette,
+  Rocket,
+  Snowflake,
+  Sparkles,
+  Star,
+  Sun,
+  Sunrise,
+  Sunset,
+  Waves,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+/**
+ * Curated icon set offered to themes.
+ *
+ * A fixed map rather than a dynamic lucide lookup: the icon name comes from the
+ * database, and importing lucide dynamically by string would either pull the
+ * whole icon set into the bundle or break tree-shaking.
+ */
+export const THEME_ICONS: Record<string, LucideIcon> = {
+  Sun,
+  Moon,
+  Zap,
+  Sparkles,
+  Palette,
+  Flame,
+  Droplet,
+  Leaf,
+  Star,
+  Cloud,
+  Snowflake,
+  Waves,
+  Mountain,
+  Sunrise,
+  Sunset,
+  Contrast,
+  Blend,
+  Brush,
+  Aperture,
+  Atom,
+  Feather,
+  Gem,
+  Ghost,
+  Rocket,
+};
+export const THEME_ICON_NAMES = Object.keys(THEME_ICONS);
+export function ThemeIcon({
+  name,
+  size = 16,
+  className,
+}: {
+  name: string;
+  size?: number;
+  className?: string;
+}) {
+  const Icon = THEME_ICONS[name] ?? Palette;
+  return <Icon size={size} className={className} />;
+}

package/templates/nextblock-template/components/theme-switcher.tsx CHANGED Viewed

@@ -1,90 +1,85 @@
-"use client";
-import { Button } from "@nextblock-cms/ui";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@nextblock-cms/ui";
-import { Laptop, Moon, Sun, Zap } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import { useTranslations } from "@nextblock-cms/utils";
-const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
-  const { t } = useTranslations();
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return null;
-  }
-  const ICON_SIZE = 16;
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size={"sm"} aria-label={t('theme_switcher')}>
-          {theme === "light" ? (
-            <Sun
-              key="light"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : theme === "dark" ? (
-            <Moon
-              key="dark"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : theme === "vibrant" ? (
-            <Zap
-              key="vibrant"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          ) : (
-            <Laptop
-              key="system"
-              size={ICON_SIZE}
-              className={"text-muted-foreground"}
-            />
-          )}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-content" align="start">
-        <DropdownMenuRadioGroup
-          value={theme}
-          onValueChange={(e) => setTheme(e)}
-        >
-          <DropdownMenuRadioItem className="flex gap-2" value="light">
-            <Sun size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_light')}</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="dark">
-            <Moon size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_dark')}</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="vibrant">
-            <Zap size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_vibrant')}</span>
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem className="flex gap-2" value="system">
-            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
-            <span>{t('theme_system')}</span>
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-export { ThemeSwitcher };
+"use client";
+import { Button } from "@nextblock-cms/ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@nextblock-cms/ui";
+import { Laptop } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { useTranslations } from "@nextblock-cms/utils";
+import { useThemeCatalog } from "../context/ThemeCatalogContext";
+import { ThemeIcon } from "./theme-icon";
+const ICON_SIZE = 16;
+const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const { t } = useTranslations();
+  const themes = useThemeCatalog();
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  const active = themes.find((entry) => entry.slug === theme);
+  /**
+   * Built-in slugs keep their existing translation keys so no copy is lost;
+   * admin-created themes fall back to the name stored on the row.
+   */
+  const labelFor = (slug: string, name: string) => {
+    const builtin: Record<string, string> = {
+      light: "theme_light",
+      dark: "theme_dark",
+      vibrant: "theme_vibrant",
+    };
+    const key = builtin[slug];
+    if (!key) return name;
+    const translated = t(key);
+    return translated === key ? name : translated;
+  };
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size={"sm"} aria-label={t('theme_switcher')}>
+          {active ? (
+            <ThemeIcon name={active.icon} size={ICON_SIZE} className="text-muted-foreground" />
+          ) : (
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-content" align="start">
+        <DropdownMenuRadioGroup
+          value={theme}
+          onValueChange={(e) => setTheme(e)}
+        >
+          {themes.map((entry) => (
+            <DropdownMenuRadioItem key={entry.slug} className="flex gap-2" value={entry.slug}>
+              <ThemeIcon name={entry.icon} size={ICON_SIZE} className="text-muted-foreground" />{" "}
+              <span>{labelFor(entry.slug, entry.name)}</span>
+            </DropdownMenuRadioItem>
+          ))}
+          <DropdownMenuRadioItem className="flex gap-2" value="system">
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>{t('theme_system')}</span>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+export { ThemeSwitcher };

package/templates/nextblock-template/context/ThemeCatalogContext.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+"use client";
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+/** The switcher-facing shape of a row in `site_themes`. */
+export interface ThemeCatalogEntry {
+  slug: string;
+  name: string;
+  /** lucide-react icon name. */
+  icon: string;
+  colorScheme: "light" | "dark";
+}
+/**
+ * Themes are read once on the server in app/layout.tsx and handed to the client
+ * through this context, so the switcher never fetches and never hardcodes a
+ * list. Falls back to the palette shipped in libs/ui/src/styles/theme.css when
+ * the table is empty or unreachable.
+ */
+export const FALLBACK_THEME_CATALOG: ThemeCatalogEntry[] = [
+  { slug: "light", name: "Light", icon: "Sun", colorScheme: "light" },
+  { slug: "dark", name: "Dark", icon: "Moon", colorScheme: "dark" },
+  { slug: "vibrant", name: "Vibrant", icon: "Zap", colorScheme: "dark" },
+];
+const ThemeCatalogContext = createContext<ThemeCatalogEntry[]>(FALLBACK_THEME_CATALOG);
+export function ThemeCatalogProvider({
+  themes,
+  children,
+}: {
+  themes?: ThemeCatalogEntry[];
+  children: ReactNode;
+}) {
+  const value = useMemo(
+    () => (Array.isArray(themes) && themes.length > 0 ? themes : FALLBACK_THEME_CATALOG),
+    [themes],
+  );
+  return <ThemeCatalogContext.Provider value={value}>{children}</ThemeCatalogContext.Provider>;
+}
+export function useThemeCatalog(): ThemeCatalogEntry[] {
+  return useContext(ThemeCatalogContext);
+}

package/templates/nextblock-template/docs/03-CMS-AND-EDITOR.md CHANGED Viewed

@@ -200,3 +200,80 @@ contract lives in `libs/sdk` and is documented in
 If you are changing how blocks work inside the CMS, start here. If you are
 designing a reusable third-party block contract, start with the SDK doc.
+## Themes and Colour
+### Editable site themes
+Themes are rows in `site_themes`, edited at **/cms/settings/global-css**. An
+ADMIN can recolour any theme, create new ones, duplicate, reorder, hide, set the
+site default, and delete non-system themes.
+The pipeline is:
+1. `app/layout.tsx` reads the table through a cached `getCachedSiteThemes()`
+   (tag `public-layout-site-themes`).
+2. `lib/themes/buildThemeCss.ts` renders each row to a `:root.<slug> { ... }`
+   rule, injected as a `<style id="nb-theme-tokens">` in `<head>` — before the
+   Global CSS box, so custom CSS can still override a theme.
+3. `app/providers.tsx` feeds the slug list and default to `next-themes`, and
+   `context/ThemeCatalogContext.tsx` carries names + icons to the switcher.
+`libs/ui/src/styles/theme.css` remains as the fallback palette for standalone
+consumers of the published `@nextblock-cms/ui` package. Generated rules use
+`:root.<slug>` (specificity 0,2,0) so they always beat that file's `.dark` /
+`.vibrant` rules (0,1,0) regardless of stylesheet order.
+### Token storage
+Colour tokens are stored as **bare HSL triplets** (`"222 47% 11%"`), not hex,
+because `libs/ui/tailwind.config.js` composes them as `hsl(var(--primary))` and
+appends alpha as `hsl(var(--primary) / 0.5)` — only a bare triplet supports
+that. `lib/themes/tokenColor.ts` converts to and from the hex the colour picker
+speaks. The allowed token list lives in `lib/themes/tokens.ts`; anything not on
+it is dropped on save, and values are shape-checked, because the result is
+interpolated into a `<style>` tag.
+Per-theme `extra_css` is emitted **nested inside** the theme rule, so authors
+write `& h1 { ... }` and scoping is automatic. `sanitizeExtraCss()` strips `<`
+and unbalanced `}` so it cannot escape the rule or close the style element.
+### Known limitation: `dark:` utilities under custom themes
+Tailwind's dark variant compiles to `.dark`, and `darkMode: ['class']` is fixed
+at build time. A custom theme with `color_scheme: 'dark'` recolours every token
+and sets CSS `color-scheme`, but does **not** activate `dark:` utilities — the
+same behaviour the shipped `.vibrant` theme has always had.
+It cannot be fixed by mapping the theme to two classes: `next-themes` applies
+its value with a single `classList.add(value)`, and `DOMTokenList.add` throws
+`InvalidCharacterError` on a string containing a space. Wiring `dark:` to a data
+attribute would require a pre-hydration script mirroring next-themes' own.
+Verify the database → CSS path without booting the app:
+```bash
+npm run verify:site-themes
+```
+### Block text colour
+`apps/nextblock/lib/blocks/blockColors.ts` is the single source of truth for
+block text colour, shared by `HeadingBlockRenderer`, `EditableBlock` and
+`ColumnEditor` so the CMS preview cannot drift from the live page.
+A stored value is either a **theme token** keyword (`"primary"` — follows the
+theme) or a **literal CSS colour** (`"#FF8800"` — fixed). Tokens render as a
+static Tailwind class; literals render as an inline `style`. `resolveTextColor()`
+returns `{ className?, style? }` and falls back to `{}` for anything it does not
+recognise, so a hand-edited value degrades to the inherited colour instead of
+emitting a bogus class.
+Class names here are written as **complete literals**. Tailwind v4 ignores the
+`safelist` key in the legacy JS config — `libs/ui/tailwind.config.js` still
+carries one, but v4 never reads it, so a class exists only if the scanner finds
+the whole string in a source file.
+The editor control is `ColorField` from `libs/ui`, which offers the theme tokens
+and a custom picker (hex, alpha, screen eyedropper, recent colours) with a live
+WCAG contrast badge measured against the section background.