@nextsparkjs/core 0.1.0-beta.187 → 0.1.0-beta.189

package/dist/templates/app/dashboard/settings/profile/page.tsx

@@ -62,7 +62,7 @@ import {
 import { profileSchema, ProfileFormData } from '@nextsparkjs/core/lib/validation'
 import { countries, timezones } from '@nextsparkjs/core/lib/countries-timezones'
 import { sel } from '@nextsparkjs/core/selectors'
-import { useTranslations } from 'next-intl'
+import { useLocale, useTranslations } from 'next-intl'
 import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
 
 // Language options
@@ -82,6 +82,7 @@ function ProfilePage() {
   const [timezoneOpen, setTimezoneOpen] = useState(false)
   const [countryOpen, setCountryOpen] = useState(false)
   const t = useTranslations('settings')
+  const locale = useLocale()
 
   // Form setup
   const {
@@ -450,9 +451,9 @@ function ProfilePage() {
                     </PopoverTrigger>
                     <PopoverContent className="w-[400px] p-0">
                       <Command>
-                        <CommandInput placeholder="Buscar país..." className="h-9" />
+                        <CommandInput placeholder={t('profile.form.countrySearchPlaceholder')} className="h-9" />
                         <CommandList>
-                          <CommandEmpty>No se encontraron países.</CommandEmpty>
+                          <CommandEmpty>{t('profile.form.countryNotFound')}</CommandEmpty>
                           <CommandGroup>
                             {countries.map((country) => (
                               <CommandItem
@@ -502,9 +503,9 @@ function ProfilePage() {
                     </PopoverTrigger>
                     <PopoverContent className="w-[400px] p-0">
                       <Command>
-                        <CommandInput placeholder="Buscar timezone..." className="h-9" />
+                        <CommandInput placeholder={t('profile.form.timezoneSearchPlaceholder')} className="h-9" />
                         <CommandList>
-                          <CommandEmpty>No se encontraron timezones.</CommandEmpty>
+                          <CommandEmpty>{t('profile.form.timezoneNotFound')}</CommandEmpty>
                           <CommandGroup>
                             {timezones.map((timezone) => (
                               <CommandItem
@@ -540,7 +541,7 @@ function ProfilePage() {
                   <Calendar className="h-4 w-4" />
                   <span className="font-medium">{t('profile.form.memberSince')}:</span>
                   <span>
-                    {profile && new Date(profile.createdAt).toLocaleDateString('es-ES', {
+                    {profile && new Date(profile.createdAt).toLocaleDateString(locale, {
                       month: 'long',
                       day: 'numeric',
                       year: 'numeric'

package/dist/templates/app/dashboard/settings/security/page.tsx

@@ -39,6 +39,7 @@ import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-reg
 
 function SecurityPage() {
   const t = useTranslations('settings')
+  const tCommon = useTranslations('common')
   
   // Hook para manejar user metadata con autenticación de sesión
   const { 
@@ -79,7 +80,7 @@ function SecurityPage() {
       browser: 'Chrome 120',
       location: 'Buenos Aires, Argentina',
       ip: '192.168.1.100',
-      lastActive: '2 minutos atrás',
+      lastActive: tCommon('relativeTime.minutesAgo', { minutes: 2 }),
       current: true,
       icon: <Monitor className="h-4 w-4" />
     },
@@ -89,7 +90,7 @@ function SecurityPage() {
       browser: 'Safari Mobile',
       location: 'Buenos Aires, Argentina',
       ip: '192.168.1.101',
-      lastActive: '1 hora atrás',
+      lastActive: tCommon('relativeTime.hoursAgo', { hours: 1 }),
       current: false,
       icon: <Smartphone className="h-4 w-4" />
     },
@@ -99,7 +100,7 @@ function SecurityPage() {
       browser: 'Chrome 119',
       location: 'Córdoba, Argentina',
       ip: '200.45.123.45',
-      lastActive: '3 días atrás',
+      lastActive: tCommon('relativeTime.daysAgo', { days: 3 }),
       current: false,
       icon: <Globe className="h-4 w-4" />
     }
@@ -126,7 +127,7 @@ function SecurityPage() {
     {
       id: '3',
       success: false,
-      location: 'Madrid, España',
+      location: 'Madrid, Spain',
       device: 'Unknown - Chrome',
       timestamp: '2024-01-14 22:15:00',
       ip: '85.123.45.67'

package/dist/templates/app/layout.ppr.tsx

@@ -27,10 +27,9 @@ import "./globals.css"
 import { getBillingResourceHints } from "@nextsparkjs/core/lib/billing/gateways/factory"
 import { StaticIntlProvider } from "@nextsparkjs/core/providers/static-intl-provider"
 import { QueryProvider } from "@nextsparkjs/core/providers/query-provider"
+import { SessionCookieRefresher } from "@nextsparkjs/core/components/auth/SessionCookieRefresher"
 import { ThemeProvider as NextThemeProvider } from "@nextsparkjs/core/providers/theme-provider"
 import { ThemeProvider as CustomThemeProvider } from "@nextsparkjs/core/lib/theme/ThemeProvider"
-import { TeamProvider } from "@nextsparkjs/core/contexts/TeamContext"
-import { SubscriptionProvider } from "@nextsparkjs/core/contexts/SubscriptionContext"
 import { Toaster } from "@nextsparkjs/core/components/ui/sonner"
 import { getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
 import { DEFAULT_LOCALE, DEFAULT_THEME_MODE, STATIC_MESSAGES } from '@nextsparkjs/registries/translation-registry'
@@ -88,13 +87,14 @@ export default async function RootLayout({
             disableTransitionOnChange
           >
             <CustomThemeProvider>
+              {/* TeamProvider and SubscriptionProvider are mounted by DashboardProviders in the
+                  dashboard, superadmin and devtools layouts, not here: on a public page they
+                  would fetch a signed-in visitor's teams and subscription and re-sync the
+                  activeTeamId cookie for nothing. */}
               <QueryProvider>
-                <TeamProvider>
-                  <SubscriptionProvider>
-                    <main>{children}</main>
-                    <Suspense><Toaster position="bottom-left" /></Suspense>
-                  </SubscriptionProvider>
-                </TeamProvider>
+                <main>{children}</main>
+                <SessionCookieRefresher />
+                <Suspense><Toaster position="bottom-left" /></Suspense>
               </QueryProvider>
             </CustomThemeProvider>
           </NextThemeProvider>

package/dist/templates/app/layout.tsx

@@ -16,8 +16,6 @@ import { ThemeProvider as NextThemeProvider } from "@nextsparkjs/core/providers/
 import { ThemeProvider as CustomThemeProvider } from "@nextsparkjs/core/lib/theme/ThemeProvider"
 import { Toaster } from "@nextsparkjs/core/components/ui/sonner"
 import { QueryProvider } from "@nextsparkjs/core/providers/query-provider"
-import { TeamProvider } from "@nextsparkjs/core/contexts/TeamContext"
-import { SubscriptionProvider } from "@nextsparkjs/core/contexts/SubscriptionContext"
 import { getUserLocale } from '@nextsparkjs/core/lib/locale'
 import { TranslationContextManager } from "@nextsparkjs/core/providers/TranslationContextManager"
 import { SessionCookieRefresher } from "@nextsparkjs/core/components/auth/SessionCookieRefresher"
@@ -97,22 +95,19 @@ export default async function RootLayout({
             disableTransitionOnChange
           >
             <CustomThemeProvider>
-              {/* Team providers live here (not only in DashboardProviders) so the activeTeamId
-                  cookie is synced from any route, matching layout.ppr.tsx — see #115.
-                  DashboardProviders skips re-mounting them when already present. */}
+              {/* TeamProvider and SubscriptionProvider are mounted by DashboardProviders in the
+                  dashboard, superadmin and devtools layouts, not here: on a public page they
+                  would fetch a signed-in visitor's teams and subscription and re-sync the
+                  activeTeamId cookie for nothing. */}
               <QueryProvider>
-                <TeamProvider>
-                  <SubscriptionProvider>
-                    <TranslationContextManager />
-                    {/* Real session-cookie renewal for installed PWAs: the render-time
-                        session reads above (getUserLocale/getThemeSettings) cannot
-                        write cookies, so the rolling refresh is triggered from the
-                        client through the auth Route Handler instead. */}
-                    <SessionCookieRefresher />
-                    <main>{children}</main>
-                    <Suspense><Toaster position="bottom-left" /></Suspense>
-                  </SubscriptionProvider>
-                </TeamProvider>
+                <TranslationContextManager />
+                {/* Real session-cookie renewal for installed PWAs: the render-time
+                    session reads above (getUserLocale/getThemeSettings) cannot
+                    write cookies, so the rolling refresh is triggered from the
+                    client through the auth Route Handler instead. */}
+                <SessionCookieRefresher />
+                <main>{children}</main>
+                <Suspense><Toaster position="bottom-left" /></Suspense>
               </QueryProvider>
             </CustomThemeProvider>
           </NextThemeProvider>

package/dist/templates/blocks/cta-section/component.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Button } from '@/core/components/ui/button'
-import { buildSectionClasses } from '@/core/types/blocks'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
 import type { CTASectionBlockProps } from './schema'
 
 /**
@@ -97,3 +97,6 @@ export function CTASectionBlock({
     </section>
   )
 }
+
+// The generated block registry imports this as the module's default.
+export default CTASectionBlock

package/dist/templates/blocks/cta-section/config.ts

@@ -1,4 +1,4 @@
-import type { BlockConfig } from '@/core/types/blocks'
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
 
 export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
   slug: 'cta-section',
@@ -6,5 +6,6 @@ export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Componen
   description: 'Call-to-action section with title, description, and action buttons',
   category: 'cta',
   icon: 'Megaphone',
-  thumbnail: '/theme/blocks/cta-section/thumbnail.png'
+  thumbnail: '/theme/blocks/cta-section/thumbnail.png',
+  scope: ['pages']
 }

package/dist/templates/blocks/cta-section/fields.ts

@@ -1,9 +1,9 @@
-import type { FieldDefinition } from '@/core/types/blocks'
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
 import {
   baseContentFields,
   baseDesignFields,
   baseAdvancedFields,
-} from '@/core/types/blocks'
+} from '@nextsparkjs/core/types/blocks'
 
 /**
  * CTA Section Block Field Definitions

package/dist/templates/blocks/cta-section/schema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { baseBlockSchema, ctaSchema } from '@/core/types/blocks'
+import { baseBlockSchema, ctaSchema } from '@nextsparkjs/core/types/blocks'
 
 /**
  * Secondary Button Schema (CTA-specific)
@@ -27,6 +27,6 @@ export const ctaSectionSpecificSchema = z.object({
 /**
  * Complete CTA Section Block Schema
  */
-export const schema = baseBlockSchema.merge(ctaSectionSpecificSchema)
+export const schema = baseBlockSchema.extend(ctaSectionSpecificSchema.shape)
 
 export type CTASectionBlockProps = z.infer<typeof schema>

package/dist/templates/blocks/features-grid/component.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
+// Icon names come from page content, so there is no build-time set to import
+// from the way entity and sidebar icons have (see core's lib/icons). lucide's
+// by-name loader resolves them, but it declares a chunk per icon and that map
+// lands in webpack's runtime, which every route in the app pays for — to spare
+// the few that render this block.
 import * as Icons from 'lucide-react'
-import { cn } from '@/core/lib/utils'
-import { buildSectionClasses } from '@/core/types/blocks'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
 import type { FeaturesGridBlockProps, FeatureItem } from './schema'
 
 /**
@@ -109,3 +114,6 @@ export function FeaturesGridBlock({
     </section>
   )
 }
+
+// The generated block registry imports this as the module's default.
+export default FeaturesGridBlock

package/dist/templates/blocks/features-grid/config.ts

@@ -1,4 +1,4 @@
-import type { BlockConfig } from '@/core/types/blocks'
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
 
 export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
   slug: 'features-grid',
@@ -6,5 +6,6 @@ export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Componen
   description: 'Grid layout displaying multiple features with icons, titles, and descriptions',
   category: 'content',
   icon: 'Grid',
-  thumbnail: '/theme/blocks/features-grid/thumbnail.png'
+  thumbnail: '/theme/blocks/features-grid/thumbnail.png',
+  scope: ['pages']
 }

package/dist/templates/blocks/features-grid/fields.ts

@@ -1,9 +1,9 @@
-import type { FieldDefinition } from '@/core/types/blocks'
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
 import {
   baseContentFields,
   baseDesignFields,
   baseAdvancedFields,
-} from '@/core/types/blocks'
+} from '@nextsparkjs/core/types/blocks'
 
 /**
  * Features Grid Block Field Definitions

package/dist/templates/blocks/features-grid/schema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { baseBlockSchema } from '@/core/types/blocks'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
 
 /**
  * Feature Item Schema
@@ -35,6 +35,6 @@ export const featuresGridSpecificSchema = z.object({
 /**
  * Complete Features Grid Block Schema
  */
-export const schema = baseBlockSchema.merge(featuresGridSpecificSchema)
+export const schema = baseBlockSchema.extend(featuresGridSpecificSchema.shape)
 
 export type FeaturesGridBlockProps = z.infer<typeof schema>

package/dist/templates/blocks/hero/component.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Button } from '@/core/components/ui/button'
-import { cn } from '@/core/lib/utils'
-import { buildSectionClasses, resolveMediaUrl } from '@/core/types/blocks'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses, resolveMediaUrl } from '@nextsparkjs/core/types/blocks'
 import type { HeroBlockProps } from './schema'
 
 /**
@@ -100,3 +100,6 @@ export function HeroBlock({
     </section>
   )
 }
+
+// The generated block registry imports this as the module's default.
+export default HeroBlock

package/dist/templates/blocks/hero/config.ts

@@ -1,4 +1,4 @@
-import type { BlockConfig } from '@/core/types/blocks'
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
 
 export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
   slug: 'hero',
@@ -6,5 +6,6 @@ export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Componen
   description: 'Full-width hero section with title, subtitle, CTA button, and background image',
   category: 'hero',
   icon: 'Rocket',
-  thumbnail: '/theme/blocks/hero/thumbnail.png'
+  thumbnail: '/theme/blocks/hero/thumbnail.png',
+  scope: ['pages', 'posts']
 }

package/dist/templates/blocks/hero/fields.ts

@@ -1,9 +1,9 @@
-import type { FieldDefinition } from '@/core/types/blocks'
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
 import {
   baseContentFields,
   baseDesignFields,
   baseAdvancedFields,
-} from '@/core/types/blocks'
+} from '@nextsparkjs/core/types/blocks'
 
 /**
  * Hero Block Field Definitions

package/dist/templates/blocks/hero/schema.ts

@@ -3,7 +3,7 @@ import {
   baseBlockSchema,
   mediaRefSchema,
   type BaseBlockProps,
-} from '@/core/types/blocks'
+} from '@nextsparkjs/core/types/blocks'
 
 /**
  * Hero Block Schema
@@ -25,7 +25,7 @@ export const heroSpecificSchema = z.object({
  * Complete Hero Block Schema
  * Combines base fields + hero-specific fields
  */
-export const schema = baseBlockSchema.merge(heroSpecificSchema)
+export const schema = baseBlockSchema.extend(heroSpecificSchema.shape)
 
 export type HeroBlockProps = z.infer<typeof schema>
 

package/dist/templates/blocks/testimonials/component.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Quote } from 'lucide-react'
-import { Avatar, AvatarFallback, AvatarImage } from '@/core/components/ui/avatar'
-import { cn } from '@/core/lib/utils'
-import { buildSectionClasses, resolveMediaUrl } from '@/core/types/blocks'
+import { Avatar, AvatarFallback, AvatarImage } from '@nextsparkjs/core/components/ui/avatar'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses, resolveMediaUrl } from '@nextsparkjs/core/types/blocks'
 import type { TestimonialsBlockProps, TestimonialItem } from './schema'
 
 /**
@@ -111,3 +111,6 @@ export function TestimonialsBlock({
     </section>
   )
 }
+
+// The generated block registry imports this as the module's default.
+export default TestimonialsBlock

package/dist/templates/blocks/testimonials/config.ts

@@ -1,4 +1,4 @@
-import type { BlockConfig } from '@/core/types/blocks'
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
 
 export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
   slug: 'testimonials',
@@ -6,5 +6,6 @@ export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Componen
   description: 'Display customer testimonials with quotes, authors, and avatars',
   category: 'testimonials',
   icon: 'Quote',
-  thumbnail: '/theme/blocks/testimonials/thumbnail.png'
+  thumbnail: '/theme/blocks/testimonials/thumbnail.png',
+  scope: ['pages']
 }

package/dist/templates/blocks/testimonials/fields.ts

@@ -1,9 +1,9 @@
-import type { FieldDefinition } from '@/core/types/blocks'
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
 import {
   baseContentFields,
   baseDesignFields,
   baseAdvancedFields,
-} from '@/core/types/blocks'
+} from '@nextsparkjs/core/types/blocks'
 
 /**
  * Testimonials Block Field Definitions

package/dist/templates/blocks/testimonials/schema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { baseBlockSchema, mediaRefSchema } from '@/core/types/blocks'
+import { baseBlockSchema, mediaRefSchema } from '@nextsparkjs/core/types/blocks'
 
 /**
  * Testimonial Item Schema
@@ -36,6 +36,6 @@ export const testimonialsSpecificSchema = z.object({
 /**
  * Complete Testimonials Block Schema
  */
-export const schema = baseBlockSchema.merge(testimonialsSpecificSchema)
+export const schema = baseBlockSchema.extend(testimonialsSpecificSchema.shape)
 
 export type TestimonialsBlockProps = z.infer<typeof schema>

package/dist/templates/blocks/text-content/component.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { cn } from '@/core/lib/utils'
-import { buildSectionClasses } from '@/core/types/blocks'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sanitizeBlockHtml } from '@nextsparkjs/core/lib/blocks/sanitize-html'
 import type { TextContentBlockProps } from './schema'
 
 /**
@@ -70,7 +71,7 @@ export function TextContentBlock({
             maxWidthClasses[maxWidth],
             alignmentClasses[alignment]
           )}
-          dangerouslySetInnerHTML={{ __html: content }}
+          dangerouslySetInnerHTML={{ __html: sanitizeBlockHtml(content) }}
         />
 
         {/* Optional CTA */}
@@ -94,3 +95,6 @@ export function TextContentBlock({
     </section>
   )
 }
+
+// The generated block registry imports this as the module's default.
+export default TextContentBlock

package/dist/templates/blocks/text-content/config.ts

@@ -1,4 +1,4 @@
-import type { BlockConfig } from '@/core/types/blocks'
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
 
 export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
   slug: 'text-content',
@@ -6,5 +6,6 @@ export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Componen
   description: 'Rich text content block for paragraphs, lists, and formatted text',
   category: 'content',
   icon: 'FileText',
-  thumbnail: '/theme/blocks/text-content/thumbnail.png'
+  thumbnail: '/theme/blocks/text-content/thumbnail.png',
+  scope: ['pages']
 }

package/dist/templates/blocks/text-content/fields.ts

@@ -1,9 +1,9 @@
-import type { FieldDefinition } from '@/core/types/blocks'
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
 import {
   baseContentFields,
   baseDesignFields,
   baseAdvancedFields,
-} from '@/core/types/blocks'
+} from '@nextsparkjs/core/types/blocks'
 
 /**
  * Text Content Block Field Definitions

package/dist/templates/blocks/text-content/schema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { baseBlockSchema } from '@/core/types/blocks'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
 
 /**
  * Text Content Block Schema
@@ -25,6 +25,6 @@ export const textContentSpecificSchema = z.object({
  * Complete Text Content Block Schema
  * Note: textContentSpecificSchema.content overrides baseBlockSchema.content
  */
-export const schema = baseBlockSchema.merge(textContentSpecificSchema)
+export const schema = baseBlockSchema.extend(textContentSpecificSchema.shape)
 
 export type TextContentBlockProps = z.infer<typeof schema>

package/dist/templates/contents/themes/starter/blocks/cta-section/component.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import type { CTASectionBlockProps } from './schema'
+
+/**
+ * CTA Section Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta (primary), secondaryButton
+ * - Design: backgroundColor
+ * - Advanced: className, id
+ */
+export function CTASectionBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // CTA-specific content
+  secondaryButton,
+  // Base design props
+  backgroundColor,
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: CTASectionBlockProps & {
+  buttonText?: string
+  buttonLink?: string
+  primaryButton?: { text: string; link: string; variant?: string }
+  description?: string
+}) {
+  // Handle legacy format (buttonText/buttonLink or primaryButton)
+  const primaryCta = cta || (legacyProps.primaryButton ? {
+    text: legacyProps.primaryButton.text,
+    link: legacyProps.primaryButton.link,
+    target: '_self' as const,
+  } : legacyProps.buttonText ? {
+    text: legacyProps.buttonText,
+    link: legacyProps.buttonLink || '#',
+    target: '_self' as const,
+  } : undefined)
+
+  // Handle legacy description prop
+  const displayContent = content || (legacyProps as { description?: string }).description
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 @md:py-24',
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy="block-cta-section">
+      <div className="container mx-auto max-w-4xl text-center">
+        {title && (
+          <h2 className="mb-4 text-4xl font-bold @md:text-5xl">{title}</h2>
+        )}
+
+        {displayContent && (
+          <p className="mb-8 text-lg @md:text-xl opacity-90">{displayContent}</p>
+        )}
+
+        {(primaryCta || secondaryButton) && (
+          <div className="flex flex-col gap-4 @sm:flex-row @sm:justify-center">
+            {primaryCta && (
+              <Button asChild size="lg">
+                <a
+                  href={primaryCta.link}
+                  target={primaryCta.target}
+                  rel={primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {primaryCta.text}
+                </a>
+              </Button>
+            )}
+
+            {secondaryButton && (
+              <Button
+                asChild
+                size="lg"
+                variant={secondaryButton.variant || 'outline'}
+              >
+                <a
+                  href={secondaryButton.link}
+                  target={secondaryButton.target}
+                  rel={secondaryButton.target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {secondaryButton.text}
+                </a>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+// The generated block registry imports this as the module's default.
+export default CTASectionBlock

package/dist/templates/contents/themes/starter/blocks/cta-section/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'cta-section',
+  name: 'CTA Section',
+  description: 'Call-to-action section with title, description, and action buttons',
+  category: 'cta',
+  icon: 'Megaphone',
+  thumbnail: '/theme/blocks/cta-section/thumbnail.png',
+  scope: ['pages']
+}