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

package/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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']
+}

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

@@ -0,0 +1,89 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * CTA Section Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, description, cta (from base) + secondaryButton
+ * - Design: backgroundColor (from base)
+ * - Advanced: className, id (from base)
+ *
+ * Note: The base CTA fields serve as the primary button
+ */
+
+// CTA-specific content fields (secondary button) - grouped in UI
+const ctaContentFields: FieldDefinition[] = [
+  {
+    name: 'secondaryButton.text',
+    label: 'Text',
+    type: 'text',
+    tab: 'content',
+    required: false,
+    placeholder: 'Learn More',
+    helpText: 'Button text',
+    group: 'secondaryButton',
+    groupLabel: 'Secondary Button',
+  },
+  {
+    name: 'secondaryButton.link',
+    label: 'Link',
+    type: 'url',
+    tab: 'content',
+    required: false,
+    placeholder: '/about or https://...',
+    helpText: 'URL the button links to',
+    group: 'secondaryButton',
+  },
+  {
+    name: 'secondaryButton.target',
+    label: 'Open in',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: '_self',
+    helpText: 'How the link opens',
+    group: 'secondaryButton',
+    options: [
+      { label: 'Same window', value: '_self' },
+      { label: 'New tab', value: '_blank' },
+    ],
+  },
+  {
+    name: 'secondaryButton.variant',
+    label: 'Style',
+    type: 'select',
+    tab: 'content',
+    required: false,
+    default: 'outline',
+    helpText: 'Visual style of the button',
+    group: 'secondaryButton',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Outline', value: 'outline' },
+      { label: 'Ghost', value: 'ghost' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + cta-specific
+  ...baseContentFields,
+  ...ctaContentFields,
+
+  // Design tab: base fields only
+  ...baseDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

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

@@ -0,0 +1,6 @@
+export { config } from './config'
+export { schema } from './schema'
+export { fields } from './fields'
+export { CTASectionBlock as Component } from './component'
+
+export type { CTASectionBlockProps } from './schema'

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

@@ -0,0 +1,32 @@
+import { z } from 'zod'
+import { baseBlockSchema, ctaSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Secondary Button Schema (CTA-specific)
+ * Uses same structure as CTA but with outline variant default
+ */
+const secondaryButtonSchema = ctaSchema.extend({
+  variant: z.enum(['default', 'outline', 'ghost']).default('outline'),
+})
+
+export type SecondaryButton = z.infer<typeof secondaryButtonSchema>
+
+/**
+ * CTA Section Block Schema
+ *
+ * Extends base schema with:
+ * - secondaryButton: Optional secondary CTA button
+ *
+ * Note: Uses base schema title, description, cta (as primary), backgroundColor, className, id
+ */
+export const ctaSectionSpecificSchema = z.object({
+  // Content: secondary button option
+  secondaryButton: secondaryButtonSchema.optional(),
+})
+
+/**
+ * Complete CTA Section Block Schema
+ */
+export const schema = baseBlockSchema.extend(ctaSectionSpecificSchema.shape)
+
+export type CTASectionBlockProps = z.infer<typeof schema>

package/templates/contents/themes/starter/blocks/features-grid/component.tsx

@@ -0,0 +1,119 @@
+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 '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import type { FeaturesGridBlockProps, FeatureItem } from './schema'
+
+/**
+ * Features Grid Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta, items
+ * - Design: backgroundColor, columns
+ * - Advanced: className, id
+ */
+export function FeaturesGridBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Features-specific content
+  items,
+  // Base design props
+  backgroundColor,
+  // Features-specific design
+  columns = '3',
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: FeaturesGridBlockProps & { features?: FeatureItem[]; description?: string }) {
+  // Handle legacy 'features' prop for backward compatibility
+  const safeItems = Array.isArray(items)
+    ? items
+    : Array.isArray((legacyProps as { features?: FeatureItem[] }).features)
+      ? (legacyProps as { features: FeatureItem[] }).features
+      : []
+
+  // Handle legacy description prop
+  const displayContent = content || (legacyProps as { description?: string }).description
+
+  // Build column classes based on columns prop
+  const columnClasses: Record<string, string> = {
+    '2': '@sm:grid-cols-2',
+    '3': '@sm:grid-cols-2 @lg:grid-cols-3',
+    '4': '@sm:grid-cols-2 @lg:grid-cols-4',
+  }
+
+  // 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-features-grid">
+      <div className="container mx-auto max-w-6xl">
+        {/* Section Header */}
+        {(title || displayContent) && (
+          <div className="mb-12 text-center">
+            {title && (
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {displayContent && (
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                {displayContent}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Features Grid */}
+        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['3'])}>
+          {safeItems.map((item, index) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const IconComponent = (Icons as any)[item.icon] || Icons.Circle
+
+            return (
+              <div
+                key={index}
+                className="flex flex-col items-center text-center p-6 rounded-lg border bg-card"
+              >
+                <div className="mb-4 rounded-full bg-primary/10 p-4">
+                  <IconComponent className="h-8 w-8 text-primary" />
+                </div>
+                <h3 className="mb-2 text-xl font-semibold">{item.title}</h3>
+                <p className="text-muted-foreground">{item.description}</p>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className="mt-12 text-center">
+            <a
+              href={cta.link}
+              target={cta.target}
+              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              {cta.text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+// The generated block registry imports this as the module's default.
+export default FeaturesGridBlock

package/templates/contents/themes/starter/blocks/features-grid/config.ts

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