create-nextblock 0.14.2 → 0.14.5

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/cms-transfer/server.ts

@@ -22,10 +22,12 @@ import {
 import {
   createPageRevision,
   createPostRevision,
+  createProductRevision,
 } from "../../app/cms/revisions/service";
 import {
   getFullPageContent,
   getFullPostContent,
+  getFullProductContent,
   type FullPageContent,
   type FullPostContent,
 } from "../../app/cms/revisions/utils";
@@ -1385,6 +1387,12 @@ async function applyProductImport(params: {
       throw new Error(`Failed to save product draft from row ${item.rowNumber}: ${error.message}`);
     }
   } else {
+    // Live mode writes the product row and its blocks directly, so it has to record a
+    // revision itself — exactly as applyContentImport does for pages and posts. Without
+    // this the content changes underneath the revision chain, and the next diff taken
+    // against it would replay onto a document that no longer matches.
+    const previousContent = await getFullProductContent(productId);
+
     const { error } = await auth.supabase
       .from("products")
       .update(toLiveProductPayload(item.meta) as any)
@@ -1407,6 +1415,11 @@ async function applyProductImport(params: {
       await syncCategoriesForTranslationGroup(auth.supabase as any, productId, item.categoryIds);
     }
     await (auth.supabase as any).from("product_drafts").delete().eq("product_id", productId);
+
+    const nextContent = await getFullProductContent(productId);
+    if (previousContent && nextContent) {
+      await createProductRevision(productId, auth.userId, previousContent, nextContent);
+    }
   }
 
   revalidatePath("/cms/products");

package/templates/nextblock-template/lib/full-backup/server.ts

@@ -638,6 +638,7 @@ async function rewriteMediaBaseUrls(params: {
     { table: "products", idColumn: "id", columns: ["description_json", "metadata"] },
     { table: "page_revisions", idColumn: "id", columns: ["content"] },
     { table: "post_revisions", idColumn: "id", columns: ["content"] },
+    { table: "product_revisions", idColumn: "id", columns: ["content"] },
     { table: "site_settings", idColumn: "key", columns: ["value"] },
     { table: "translations", idColumn: "key", columns: ["translations"] },
   ];

package/templates/nextblock-template/lib/publishing/viewUrl.ts

@@ -0,0 +1,26 @@
+/**
+ * Build a link to the `/api/view` entry point used by the CMS "Preview" and
+ * "View Live" buttons.
+ *
+ * Always pass the content's own language. The public site resolves language from
+ * a cookie, not the URL, so a link without `lang` renders in whatever language
+ * the editor happens to be browsing in — which is how opening a French page
+ * landed you on the English one. See `app/api/view/route.ts`.
+ */
+export function buildViewUrl(options: {
+  /** Root-relative public path, e.g. "/about" or "/article/hello". */
+  path: string;
+  /** The content row's language code, e.g. "fr". */
+  languageCode?: string | null;
+  /** True to enter Live Draft Mode (preview unpublished content). */
+  draft?: boolean;
+}): string {
+  const params = new URLSearchParams({ path: options.path });
+  if (options.languageCode) {
+    params.set("lang", options.languageCode);
+  }
+  if (options.draft) {
+    params.set("draft", "1");
+  }
+  return `/api/view?${params.toString()}`;
+}

package/templates/nextblock-template/lib/search/server.ts

@@ -1,6 +1,7 @@
 import 'server-only';
 
 import { getSsgSupabaseClient, verifyPackageOnline } from '@nextblock-cms/db/server';
+import { buildPublishedAtOrFilter } from '@nextblock-cms/utils';
 import { resolveMediaUrl } from '../media/resolveMediaUrl';
 import { getHomepageTranslationGroupId } from '../../app/lib/homepage';
 import type {
@@ -348,6 +349,7 @@ async function fetchPages(languageId: number | null): Promise<SearchCandidate[]>
     `
     )
     .eq('status', 'published')
+    .or(buildPublishedAtOrFilter())
     .order('updated_at', { ascending: false })
     .limit(CANDIDATE_LIMIT);
 
@@ -487,6 +489,7 @@ async function fetchProducts(languageId: number | null): Promise<SearchCandidate
     `
     )
     .eq('status', 'active')
+    .or(buildPublishedAtOrFilter())
     .order('updated_at', { ascending: false })
     .limit(CANDIDATE_LIMIT);