create-nextblock 0.13.8 → 0.13.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.13.8",
+  "version": "0.13.9",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/actions/productGridActions.ts

@@ -0,0 +1,40 @@
+'use server';
+
+import {
+  loadProductGridPage,
+  type ProductGridQuery,
+} from '../../lib/blocks/product-grid-data';
+import {
+  PRODUCT_GRID_MAX_LIMIT,
+  PRODUCT_GRID_DEFAULT_PAGE_SIZE,
+} from '../../lib/blocks/ecommerce-block-schemas';
+import type { Product } from '@nextblock-cms/ecommerce/types';
+
+export interface ProductGridPageResult {
+  products: Product[];
+  totalCount: number;
+  error?: string;
+}
+
+/**
+ * Pagination for the Product Grid block. Only ever returns published products
+ * (`getProducts` defaults to status `active`), so this is safe to call from the
+ * storefront. The page size is clamped here because the argument arrives from
+ * the client — the unlimited path stays server-render only.
+ */
+export async function fetchProductGridPage(
+  query: ProductGridQuery
+): Promise<ProductGridPageResult> {
+  try {
+    const limit = Math.min(
+      Math.max(1, Math.floor(query.limit) || PRODUCT_GRID_DEFAULT_PAGE_SIZE),
+      PRODUCT_GRID_MAX_LIMIT
+    );
+
+    const { products, totalCount } = await loadProductGridPage({ ...query, limit });
+    return { products, totalCount };
+  } catch (error) {
+    console.error('[Product Grid] Failed to load page:', error);
+    return { products: [], totalCount: 0, error: 'Failed to load products.' };
+  }
+}

package/templates/nextblock-template/app/api/cms/ecommerce/product-picker/route.ts

@@ -0,0 +1,151 @@
+import { NextResponse } from 'next/server';
+import {
+  createClient,
+  getServiceRoleSupabaseClient,
+  verifyPackageOnline,
+} from '@nextblock-cms/db/server';
+
+export const dynamic = 'force-dynamic';
+
+/** How many products a single search returns before the UI asks for a narrower query. */
+const PRODUCT_PAGE_SIZE = 50;
+/** Guard against an unbounded `ids` list when hydrating labels for an existing selection. */
+const MAX_HYDRATED_IDS = 100;
+
+export interface ProductPickerCategory {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface ProductPickerProduct {
+  id: string;
+  title: string;
+  slug: string | null;
+  sku: string | null;
+  status: string | null;
+  languageCode: string | null;
+  translationGroupId: string | null;
+}
+
+/**
+ * PostgREST parses `,`, `.`, `(` and `)` inside an `or(...)` filter, so anything
+ * the author types has to be stripped before it is interpolated into one.
+ */
+function sanitizeSearchTerm(term: string): string {
+  return term.replace(/[,().*%\\]/g, ' ').trim().slice(0, 80);
+}
+
+/**
+ * Options for the Product Grid block pickers: every category plus a page of
+ * products (optionally filtered by `search`). `ids` hydrates labels for an
+ * existing selection whose products fall outside the current page.
+ */
+export async function GET(request: Request) {
+  try {
+    const supabase = createClient();
+    const {
+      data: { user },
+      error: authError,
+    } = await supabase.auth.getUser();
+
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('role')
+      .eq('id', user.id)
+      .single();
+
+    if (!profile || !['ADMIN', 'WRITER'].includes(profile.role)) {
+      return NextResponse.json(
+        { error: 'Forbidden: Insufficient permissions' },
+        { status: 403 }
+      );
+    }
+
+    // Fail closed: without the ecommerce package there is no product catalog to
+    // browse, and the blocks that use this route are hidden from the picker.
+    if (!(await verifyPackageOnline('ecommerce'))) {
+      return NextResponse.json(
+        { error: 'The ecommerce package is not active.' },
+        { status: 403 }
+      );
+    }
+
+    const url = new URL(request.url);
+    const search = sanitizeSearchTerm(url.searchParams.get('search') ?? '');
+    const ids = (url.searchParams.get('ids') ?? '')
+      .split(',')
+      .map((id) => id.trim())
+      .filter(Boolean)
+      .slice(0, MAX_HYDRATED_IDS);
+
+    // Reading the catalog is admin work behind the role check above.
+    const admin = getServiceRoleSupabaseClient();
+
+    const productColumns =
+      'id, title, slug, sku, status, translation_group_id, languages(code)';
+
+    let productsQuery = admin
+      .from('products')
+      .select(productColumns)
+      .order('created_at', { ascending: false })
+      // Fetch one extra row so the UI can tell the author the list was truncated.
+      .limit(PRODUCT_PAGE_SIZE + 1);
+
+    if (search) {
+      productsQuery = productsQuery.or(`title.ilike.%${search}%,sku.ilike.%${search}%`);
+    }
+
+    const [categoriesResult, productsResult, selectedResult] = await Promise.all([
+      admin.from('categories').select('id, name, slug').order('name', { ascending: true }),
+      productsQuery,
+      ids.length > 0
+        ? admin.from('products').select(productColumns).in('id', ids)
+        : Promise.resolve({ data: [], error: null }),
+    ]);
+
+    if (categoriesResult.error) throw categoriesResult.error;
+    if (productsResult.error) throw productsResult.error;
+    if (selectedResult.error) throw selectedResult.error;
+
+    const toPickerProduct = (row: any): ProductPickerProduct => ({
+      id: row.id,
+      title: row.title,
+      slug: row.slug ?? null,
+      sku: row.sku ?? null,
+      status: row.status ?? null,
+      languageCode: row.languages?.code ?? null,
+      translationGroupId: row.translation_group_id ?? null,
+    });
+
+    const productRows = (productsResult.data ?? []) as any[];
+    const hasMore = productRows.length > PRODUCT_PAGE_SIZE;
+    const products = productRows.slice(0, PRODUCT_PAGE_SIZE).map(toPickerProduct);
+
+    // Merge the hydrated selection in so already-chosen products always render
+    // with a real label, even when a search hides them.
+    const byId = new Map(products.map((product) => [product.id, product]));
+    for (const row of (selectedResult.data ?? []) as any[]) {
+      if (!byId.has(row.id)) byId.set(row.id, toPickerProduct(row));
+    }
+
+    return NextResponse.json(
+      {
+        categories: (categoriesResult.data ?? []) as ProductPickerCategory[],
+        products: Array.from(byId.values()),
+        hasMore,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error('[Product Picker API] Unexpected error:', error);
+    return NextResponse.json(
+      { error: 'Failed to load product picker options.' },
+      { status: 500 }
+    );
+  }
+}

package/templates/nextblock-template/app/cms/CmsClientLayout.tsx

@@ -22,6 +22,7 @@ import { FeedbackModal } from "./components/FeedbackModal";
 import { CortexGlobalAgentChat } from "./components/CortexGlobalAgentChat";
 import { CortexAiPageContextProvider } from "./components/CortexAiPageContext";
 import { CortexAiActiveProvider } from "./components/CortexAiActiveContext";
+import { EcommerceActiveProvider } from "./components/EcommerceActiveContext";
 import { useAppBranding } from "../../components/AppShell";
 import { resolveMediaUrl } from "../../lib/media/resolveMediaUrl";
 
@@ -257,6 +258,7 @@ export default function CmsClientLayout({
   return (
     <CortexAiPageContextProvider>
       <CortexAiActiveProvider isActive={isCortexAiActive}>
+      <EcommerceActiveProvider isActive={isEcommerceActive}>
     <div className="relative flex h-full min-h-0 w-full overflow-hidden bg-slate-50 dark:bg-slate-950 md:flex-row">
       <div className="fixed bottom-4 right-4 z-[60] md:hidden">
         <Button
@@ -516,6 +518,7 @@ export default function CmsClientLayout({
       )}
       {isAdmin && isCortexAiActive && <CortexGlobalAgentChat />}
     </div>
+      </EcommerceActiveProvider>
       </CortexAiActiveProvider>
     </CortexAiPageContextProvider>
   )

package/templates/nextblock-template/app/cms/blocks/components/BlockTypeSelector.tsx

@@ -16,6 +16,8 @@ import {
 } from "@nextblock-cms/ui";
 import { Search, X, Package } from 'lucide-react';
 import { blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { isEcommerceBlockType } from '../../../../lib/blocks/blockTypes';
+import { useEcommerceActive } from '../../components/EcommerceActiveContext';
 import BlockTypeCard from './BlockTypeCard';
 
 interface BlockTypeSelectorProps {
@@ -25,7 +27,8 @@ interface BlockTypeSelectorProps {
   allowedBlockTypes?: BlockType[];
 }
 
-const CATEGORIES = ["All", "Layout", "Content", "Media", "Interactive", "E-commerce", "Custom"];
+const ECOMMERCE_CATEGORY = "E-commerce";
+const CATEGORIES = ["All", "Layout", "Content", "Media", "Interactive", ECOMMERCE_CATEGORY, "Custom"];
 
 const getBlockCategory = (type: string, isCustomSlug?: boolean): string => {
   if (isCustomSlug) {
@@ -50,7 +53,7 @@ const getBlockCategory = (type: string, isCustomSlug?: boolean): string => {
     case 'cart':
     case 'checkout':
     case 'product_details':
-      return 'E-commerce';
+      return ECOMMERCE_CATEGORY;
     default:
       return 'Content';
   }
@@ -65,6 +68,9 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
   const [searchQuery, setSearchQuery] = React.useState('');
   const [activeCategory, setActiveCategory] = React.useState('All');
   const [customDefs, setCustomDefs] = React.useState<any[]>([]);
+  // Store blocks are only offered when the ecommerce package is activated. The
+  // context defaults to false outside the CMS layout, so this fails closed.
+  const isEcommerceActive = useEcommerceActive();
 
   // Reset state and fetch custom blocks when modal is opened
   React.useEffect(() => {
@@ -93,10 +99,16 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
     onOpenChange(false);
   };
 
+  const visibleCategories = React.useMemo(
+    () => CATEGORIES.filter((category) => category !== ECOMMERCE_CATEGORY || isEcommerceActive),
+    [isEcommerceActive]
+  );
+
   const blockDefs = React.useMemo(() => {
     const coreDefs = Object.values(blockRegistry).filter(
       (blockDef) =>
-        !allowedBlockTypes || allowedBlockTypes.includes(blockDef.type)
+        (!allowedBlockTypes || allowedBlockTypes.includes(blockDef.type)) &&
+        (isEcommerceActive || !isEcommerceBlockType(blockDef.type))
     );
 
     const mappedCustomDefs = customDefs.map((def) => ({
@@ -114,7 +126,7 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
     }));
 
     return [...coreDefs, ...mappedCustomDefs];
-  }, [allowedBlockTypes, customDefs]);
+  }, [allowedBlockTypes, customDefs, isEcommerceActive]);
 
   // Memoized filter and search results to prevent re-calculations during key strokes
   const filteredBlockDefs = React.useMemo(() => {
@@ -174,7 +186,7 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
 
             {/* Category Filter Tabs */}
             <div className="flex flex-wrap gap-1.5 pb-3 border-b border-border">
-              {CATEGORIES.map((category) => (
+              {visibleCategories.map((category) => (
                 <button
                   key={category}
                   type="button"

package/templates/nextblock-template/app/cms/blocks/components/MultiEntityPicker.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import React from 'react';
+import { Check, ChevronsUpDown, Loader2, Search, X } from 'lucide-react';
+import {
+  Badge,
+  Button,
+  Checkbox,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@nextblock-cms/ui';
+import { cn } from '@nextblock-cms/utils';
+
+export interface PickerOption {
+  id: string;
+  label: string;
+  /** Secondary line under the label, e.g. a slug or SKU. */
+  description?: string | null;
+  /** Small trailing tag, e.g. a language code or publish status. */
+  badge?: string | null;
+}
+
+interface MultiEntityPickerProps {
+  options: PickerOption[];
+  /**
+   * Labels for already-selected ids that the current `options` page may not
+   * contain (server-filtered lists). Used for the chips only, never listed.
+   */
+  selectedOptions?: PickerOption[];
+  selectedIds: string[];
+  onChange: (ids: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  /** Singular / plural noun used in the trigger label, e.g. ['category', 'categories']. */
+  nouns: [string, string];
+  isLoading?: boolean;
+  /**
+   * Provide to filter server-side (the component then stops filtering locally).
+   * Omit for a fully client-side list.
+   */
+  onSearchChange?: (query: string) => void;
+  /** Number the selected chips — use when selection order is display order. */
+  showOrder?: boolean;
+  maxSelected?: number;
+  /** Extra line under the control, e.g. "Showing the first 50 products". */
+  hint?: React.ReactNode;
+}
+
+export default function MultiEntityPicker({
+  options,
+  selectedOptions: selectedOptionsProp,
+  selectedIds,
+  onChange,
+  placeholder = 'Select…',
+  searchPlaceholder = 'Search…',
+  emptyMessage = 'Nothing found.',
+  nouns,
+  isLoading = false,
+  onSearchChange,
+  showOrder = false,
+  maxSelected,
+  hint,
+}: MultiEntityPickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const isServerFiltered = typeof onSearchChange === 'function';
+
+  const labelsById = React.useMemo(
+    () =>
+      new Map(
+        [...options, ...(selectedOptionsProp ?? [])].map((option) => [option.id, option])
+      ),
+    [options, selectedOptionsProp]
+  );
+
+  // Selection order is meaningful (it drives display order), so walk selectedIds
+  // rather than options. Ids whose option has not loaded yet still get a chip.
+  const selectedOptions = React.useMemo(
+    () =>
+      selectedIds.map(
+        (id) => labelsById.get(id) ?? { id, label: 'Loading…', description: null }
+      ),
+    [selectedIds, labelsById]
+  );
+
+  const filteredOptions = React.useMemo(() => {
+    if (isServerFiltered || !searchQuery.trim()) return options;
+    const query = searchQuery.trim().toLowerCase();
+    return options.filter(
+      (option) =>
+        option.label.toLowerCase().includes(query) ||
+        (option.description ?? '').toLowerCase().includes(query)
+    );
+  }, [options, searchQuery, isServerFiltered]);
+
+  const atLimit = typeof maxSelected === 'number' && selectedIds.length >= maxSelected;
+
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value);
+    onSearchChange?.(value);
+  };
+
+  const toggle = (id: string) => {
+    if (selectedIds.includes(id)) {
+      onChange(selectedIds.filter((selectedId) => selectedId !== id));
+      return;
+    }
+    if (atLimit) return;
+    onChange([...selectedIds, id]);
+  };
+
+  const remove = (id: string) => onChange(selectedIds.filter((selectedId) => selectedId !== id));
+
+  const [singular, plural] = nouns;
+  const triggerLabel =
+    selectedIds.length > 0
+      ? `${selectedIds.length} ${selectedIds.length === 1 ? singular : plural} selected`
+      : placeholder;
+
+  return (
+    <div className="space-y-2">
+      {selectedOptions.length > 0 && (
+        <ul className="flex flex-wrap gap-1.5 rounded-md border bg-muted/30 p-1.5">
+          {selectedOptions.map((option, index) => (
+            <li key={option.id}>
+              <Badge
+                variant="secondary"
+                className="flex items-center gap-1 rounded-full py-0.5 pl-2 pr-1 text-xs font-normal"
+              >
+                {showOrder && (
+                  <span className="text-[10px] font-semibold tabular-nums text-muted-foreground">
+                    {index + 1}
+                  </span>
+                )}
+                <span className="max-w-[180px] truncate">{option.label}</span>
+                <button
+                  type="button"
+                  onClick={() => remove(option.id)}
+                  aria-label={`Remove ${option.label}`}
+                  className="rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="h-9 w-full justify-between text-xs font-normal"
+          >
+            <span className="truncate">{triggerLabel}</span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+          <div className="flex items-center border-b px-3">
+            {isLoading ? (
+              <Loader2 className="mr-2 h-4 w-4 shrink-0 animate-spin opacity-50" />
+            ) : (
+              <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+            )}
+            <Input
+              autoFocus
+              className="h-9 w-full border-0 bg-transparent py-2 text-xs shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(event) => handleSearchChange(event.target.value)}
+            />
+          </div>
+
+          <div className="max-h-60 overflow-y-auto p-1">
+            {filteredOptions.length === 0 ? (
+              <p className="py-6 text-center text-xs text-muted-foreground">
+                {isLoading ? 'Loading…' : emptyMessage}
+              </p>
+            ) : (
+              filteredOptions.map((option) => {
+                const isChecked = selectedIds.includes(option.id);
+                const isBlocked = !isChecked && atLimit;
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    role="option"
+                    aria-selected={isChecked}
+                    disabled={isBlocked}
+                    onClick={() => toggle(option.id)}
+                    className={cn(
+                      'relative flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs outline-none transition-colors',
+                      isBlocked
+                        ? 'cursor-not-allowed opacity-40'
+                        : 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
+                      isChecked && 'bg-accent/40'
+                    )}
+                  >
+                    <Checkbox
+                      checked={isChecked}
+                      tabIndex={-1}
+                      aria-hidden="true"
+                      className="pointer-events-none h-3.5 w-3.5 shrink-0"
+                    />
+                    <span className="flex min-w-0 flex-col">
+                      <span className="truncate font-medium">{option.label}</span>
+                      {option.description && (
+                        <span className="truncate font-mono text-[10px] leading-tight text-muted-foreground">
+                          {option.description}
+                        </span>
+                      )}
+                    </span>
+                    {option.badge && (
+                      <Badge
+                        variant="outline"
+                        className="ml-auto shrink-0 px-1.5 py-0 text-[9px] uppercase"
+                      >
+                        {option.badge}
+                      </Badge>
+                    )}
+                    {isChecked && (
+                      <Check
+                        className={cn('h-3.5 w-3.5 shrink-0 text-primary', !option.badge && 'ml-auto')}
+                      />
+                    )}
+                  </button>
+                );
+              })
+            )}
+          </div>
+
+          {atLimit && (
+            <p className="border-t px-3 py-2 text-[11px] text-muted-foreground">
+              Limit reached ({maxSelected}). Remove one to add another.
+            </p>
+          )}
+        </PopoverContent>
+      </Popover>
+
+      {hint && <p className="text-[11px] leading-snug text-muted-foreground">{hint}</p>}
+    </div>
+  );
+}