create-nextblock 0.14.2 → 0.14.5

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

@@ -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

@@ -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

@@ -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/components/visual-editing/NextblockVisualEditing.tsx

@@ -1018,7 +1018,10 @@ function VisualEditingToolbar() {
       return;
     }
 
-    setMessage("Draft published.");
+    // A warning means the content is live but the revision didn't record — still a
+    // publish, so the editor closes, but don't report it as a clean one.
+    const warning = result && "success" in result ? result.warning : undefined;
+    setMessage(warning ?? "Draft published.");
     hasSavedSinceOpenRef.current = false;
     closeVisualEditor();
     router.refresh();

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

@@ -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

@@ -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.

package/templates/nextblock-template/docs/04-DATABASE-AND-AUTH.md

@@ -100,6 +100,7 @@ Defined primarily in `00000000000002_setup_content_tables.sql`:
 - `navigation_items`
 - `page_revisions`
 - `post_revisions`
+- `product_revisions` (added in `00000000000016`, alongside `products.version`)
 
 ### Commerce tables
 
@@ -179,8 +180,12 @@ tree. The current sequence is:
 
 Every file is fully idempotent. Existing databases already have versions
 `000`–`003` recorded, so both appliers skip the baseline — it only runs on a
-fresh/empty database. **The next new migration is `00000000000004`**, appended
-forward-only.
+fresh/empty database.
+
+`00000000000004` was the first migration appended after that re-baseline, not the
+one still to be written — the folder has grown well past it. **To find the next
+number, list `libs/db/src/supabase/migrations` and take the one after the highest
+file on disk.** Never copy a hardcoded "next is N" out of a doc.
 
 ### Production migration policy
 

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