@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/timeline/fields.ts

@@ -0,0 +1,147 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Timeline Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title (from base), subtitle, items array
+ * - Design: backgroundColor (from base), layout, alternating, showConnector, variant
+ * - Advanced: className, id (from base)
+ */
+
+// Timeline-specific content fields
+const timelineContentFields: FieldDefinition[] = [
+  {
+    name: 'subtitle',
+    label: 'Subtitle',
+    type: 'textarea',
+    tab: 'content',
+    required: false,
+    placeholder: 'A brief description of the timeline...',
+    helpText: 'Optional section description displayed below the title',
+    rows: 2,
+  },
+  {
+    name: 'items',
+    label: 'Timeline Items',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    description: 'Events or steps to display in the timeline',
+    helpText: 'Add up to 20 timeline items with date, title, description, and optional icon',
+    minItems: 1,
+    maxItems: 20,
+    itemFields: [
+      {
+        name: 'date',
+        label: 'Date / Step',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: '2024, Step 1, Q1 2024',
+        helpText: 'Date, step number, or time period label',
+      },
+      {
+        name: 'title',
+        label: 'Title',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Event or milestone title',
+        maxLength: 100,
+      },
+      {
+        name: 'description',
+        label: 'Description',
+        type: 'textarea',
+        tab: 'content',
+        required: false,
+        placeholder: 'Describe this event or step...',
+        rows: 3,
+      },
+      {
+        name: 'icon',
+        label: 'Icon Name (optional)',
+        type: 'text',
+        tab: 'content',
+        required: false,
+        placeholder: 'Rocket, Check, Star, Calendar',
+        helpText: 'Lucide icon name (optional)',
+      },
+    ],
+  },
+]
+
+// Timeline-specific design fields
+const timelineDesignFields: FieldDefinition[] = [
+  {
+    name: 'layout',
+    label: 'Layout Direction',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'vertical',
+    description: 'Timeline orientation',
+    helpText: 'Horizontal layout becomes vertical on mobile',
+    options: [
+      { label: 'Vertical', value: 'vertical' },
+      { label: 'Horizontal', value: 'horizontal' },
+    ],
+  },
+  {
+    name: 'alternating',
+    label: 'Alternating Sides',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: true,
+    helpText: 'Alternate items between left and right (vertical layout only)',
+  },
+  {
+    name: 'showConnector',
+    label: 'Show Connector Line',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: true,
+    helpText: 'Display line connecting timeline items',
+  },
+  {
+    name: 'variant',
+    label: 'Visual Style',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'default',
+    description: 'Timeline item appearance',
+    options: [
+      { label: 'Default', value: 'default' },
+      { label: 'Minimal', value: 'minimal' },
+      { label: 'Cards', value: 'cards' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + timeline-specific
+  ...baseContentFields,
+  ...timelineContentFields,
+
+  // Design tab: base fields + timeline-specific
+  ...baseDesignFields,
+  ...timelineDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/timeline/index.ts

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

package/blocks/timeline/schema.ts

@@ -0,0 +1,49 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Timeline Item Schema
+ * Individual event/step in the timeline
+ */
+const timelineItemSchema = z.object({
+  date: z.string().min(1, 'Date or step is required'),
+  title: z.string().min(1, 'Title is required').max(100),
+  description: z.string().optional().default(''),
+  icon: z.string().optional().default(''),
+})
+
+export type TimelineItem = z.infer<typeof timelineItemSchema>
+
+/**
+ * Timeline Block Schema
+ *
+ * Extends base schema with:
+ * - subtitle: Section description (in addition to title)
+ * - items: Array of timeline items (date, title, description, icon)
+ * - layout: Vertical or horizontal direction
+ * - alternating: Alternate items left/right (vertical only)
+ * - showConnector: Show connecting line between items
+ * - variant: Visual style (default, minimal, cards)
+ *
+ * Note: Uses base schema title, backgroundColor, className, id
+ */
+export const timelineSpecificSchema = z.object({
+  // Content fields
+  subtitle: z.string().optional().default(''),
+  items: z.array(timelineItemSchema)
+    .min(1, 'At least one timeline item is required')
+    .max(20, 'Maximum 20 timeline items allowed'),
+
+  // Design fields
+  layout: z.enum(['vertical', 'horizontal']).default('vertical'),
+  alternating: z.boolean().default(true),
+  showConnector: z.boolean().default(true),
+  variant: z.enum(['default', 'minimal', 'cards']).default('default'),
+})
+
+/**
+ * Complete Timeline Block Schema
+ */
+export const schema = baseBlockSchema.merge(timelineSpecificSchema)
+
+export type TimelineBlockProps = z.infer<typeof schema>

package/blocks/video-hero/component.tsx

@@ -0,0 +1,270 @@
+import React from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { VideoHeroBlockProps } from './schema'
+
+/**
+ * Video Hero Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content (subtitle), cta, videoUrl, videoThumbnail
+ * - Design: backgroundColor, layout, autoplay, overlayOpacity
+ * - Advanced: className, id
+ */
+
+/**
+ * Extract video ID from YouTube or Vimeo URL
+ */
+function parseVideoUrl(url: string): { platform: 'youtube' | 'vimeo' | null; videoId: string | null } {
+  // YouTube patterns
+  const youtubePatterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/,
+    /youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]+)/,
+  ]
+
+  for (const pattern of youtubePatterns) {
+    const match = url.match(pattern)
+    if (match) {
+      return { platform: 'youtube', videoId: match[1] }
+    }
+  }
+
+  // Vimeo pattern
+  const vimeoPattern = /vimeo\.com\/(\d+)/
+  const vimeoMatch = url.match(vimeoPattern)
+  if (vimeoMatch) {
+    return { platform: 'vimeo', videoId: vimeoMatch[1] }
+  }
+
+  return { platform: null, videoId: null }
+}
+
+/**
+ * Get embed URL for video
+ */
+function getEmbedUrl(videoUrl: string, autoplay: boolean): string | null {
+  const { platform, videoId } = parseVideoUrl(videoUrl)
+
+  if (!platform || !videoId) return null
+
+  if (platform === 'youtube') {
+    const params = new URLSearchParams({
+      autoplay: autoplay ? '1' : '0',
+      mute: autoplay ? '1' : '0', // Mute if autoplay (browser requirement)
+      rel: '0', // Don't show related videos
+      modestbranding: '1', // Minimal YouTube branding
+    })
+    return `https://www.youtube.com/embed/${videoId}?${params.toString()}`
+  }
+
+  if (platform === 'vimeo') {
+    const params = new URLSearchParams({
+      autoplay: autoplay ? '1' : '0',
+      muted: autoplay ? '1' : '0',
+      title: '0',
+      byline: '0',
+      portrait: '0',
+    })
+    return `https://player.vimeo.com/video/${videoId}?${params.toString()}`
+  }
+
+  return null
+}
+
+export function VideoHeroBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Video-specific content
+  videoUrl,
+  videoThumbnail,
+  // Base design props
+  backgroundColor,
+  // Video-specific design
+  layout = 'inline',
+  autoplay = false,
+  overlayOpacity = '40',
+  // Base advanced props
+  className,
+  id,
+}: VideoHeroBlockProps) {
+  const embedUrl = getEmbedUrl(videoUrl, autoplay)
+
+  // Build base section classes
+  const baseSectionClasses = buildSectionClasses(
+    cn('relative overflow-hidden'),
+    { backgroundColor, className }
+  )
+
+  // Overlay opacity class for background layout
+  const overlayClass = overlayOpacity === '0'
+    ? 'bg-transparent'
+    : `bg-black/${overlayOpacity}`
+
+  // Video container with 16:9 aspect ratio
+  const VideoEmbed = () => {
+    if (!embedUrl) {
+      return (
+        <div className="flex items-center justify-center bg-gray-200 text-gray-600 p-8 rounded-lg">
+          <p>Invalid video URL. Please provide a valid YouTube or Vimeo link.</p>
+        </div>
+      )
+    }
+
+    return (
+      <div className="relative w-full pb-[56.25%]">
+        <iframe
+          src={embedUrl}
+          className="absolute inset-0 w-full h-full"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          title={title || 'Video'}
+        />
+      </div>
+    )
+  }
+
+  // LAYOUT: Background (fullscreen video with overlay)
+  if (layout === 'background') {
+    return (
+      <section
+        id={id}
+        className={cn(baseSectionClasses, 'min-h-[600px] flex items-center justify-center')}
+        data-cy={sel('blocks.videoHero.container')}
+      >
+        {/* Background Video */}
+        <div className="absolute inset-0 z-0">
+          {embedUrl ? (
+            <iframe
+              src={embedUrl}
+              className="absolute inset-0 w-full h-full object-cover"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              title={title || 'Background Video'}
+            />
+          ) : null}
+          <div className={cn('absolute inset-0', overlayClass)} />
+        </div>
+
+        {/* Content Overlay */}
+        <div className="container relative z-10 mx-auto max-w-4xl text-center px-4 py-20 text-white">
+          {title && (
+            <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
+              {title}
+            </h1>
+          )}
+
+          {content && (
+            <p className="mb-8 text-xl md:text-2xl opacity-90">
+              {content}
+            </p>
+          )}
+
+          {cta && (
+            <Button asChild size="lg" className="text-lg px-8 py-6">
+              <a
+                href={cta.link}
+                target={cta.target}
+                rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              >
+                {cta.text}
+              </a>
+            </Button>
+          )}
+        </div>
+      </section>
+    )
+  }
+
+  // LAYOUT: Side-by-side (text left, video right)
+  if (layout === 'side-by-side') {
+    return (
+      <section
+        id={id}
+        className={cn(baseSectionClasses, 'py-16 px-4')}
+        data-cy={sel('blocks.videoHero.container')}
+      >
+        <div className="container mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+            {/* Text Content */}
+            <div className="space-y-6">
+              {title && (
+                <h1 className="text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
+                  {title}
+                </h1>
+              )}
+
+              {content && (
+                <p className="text-lg md:text-xl text-gray-600">
+                  {content}
+                </p>
+              )}
+
+              {cta && (
+                <Button asChild size="lg" className="text-lg px-8 py-6">
+                  <a
+                    href={cta.link}
+                    target={cta.target}
+                    rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+                  >
+                    {cta.text}
+                  </a>
+                </Button>
+              )}
+            </div>
+
+            {/* Video */}
+            <div>
+              <VideoEmbed />
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  // LAYOUT: Inline (default - text above, video below)
+  return (
+    <section
+      id={id}
+      className={cn(baseSectionClasses, 'py-16 px-4')}
+      data-cy="block-video-hero"
+    >
+      <div className="container mx-auto max-w-5xl">
+        {/* Text Content */}
+        <div className="text-center mb-10 space-y-6">
+          {title && (
+            <h1 className="text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
+              {title}
+            </h1>
+          )}
+
+          {content && (
+            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
+              {content}
+            </p>
+          )}
+
+          {cta && (
+            <Button asChild size="lg" className="text-lg px-8 py-6">
+              <a
+                href={cta.link}
+                target={cta.target}
+                rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              >
+                {cta.text}
+              </a>
+            </Button>
+          )}
+        </div>
+
+        {/* Video */}
+        <div className="max-w-4xl mx-auto">
+          <VideoEmbed />
+        </div>
+      </div>
+    </section>
+  )
+}

package/blocks/video-hero/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'video-hero',
+  name: 'Video Hero',
+  description: 'A hero section with embedded video (YouTube/Vimeo) either as background or inline, with title, subtitle, and optional CTA',
+  category: 'hero',
+  icon: 'Video',
+  thumbnail: '/theme/blocks/video-hero/thumbnail.png',
+  scope: ['pages', 'posts']
+}

package/blocks/video-hero/examples.ts

@@ -0,0 +1,24 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Video hero with poster image',
+    props: {
+      title: 'See Our Platform in Action',
+      content: 'Watch how leading teams are transforming their workflows with our powerful tools.',
+      videoUrl: 'https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+      posterImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1920',
+      cta: {
+        text: 'Start Free Trial',
+        link: '/signup',
+        target: '_self',
+      },
+      backgroundColor: 'gray-900',
+      textColor: 'light',
+      autoplay: false,
+      muted: true,
+      loop: true,
+    },
+  },
+]

package/blocks/video-hero/fields.ts

@@ -0,0 +1,98 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Video Hero Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, content (subtitle), cta (from base) + videoUrl, videoThumbnail
+ * - Design: backgroundColor (from base) + layout, autoplay, overlayOpacity
+ * - Advanced: className, id (from base)
+ */
+
+// Video Hero-specific content fields
+const videoHeroContentFields: FieldDefinition[] = [
+  {
+    name: 'videoUrl',
+    label: 'Video URL',
+    type: 'url',
+    tab: 'content',
+    required: true,
+    placeholder: 'https://www.youtube.com/watch?v=... or https://vimeo.com/...',
+    helpText: 'YouTube or Vimeo video URL',
+  },
+  {
+    name: 'videoThumbnail',
+    label: 'Custom Thumbnail',
+    type: 'image',
+    tab: 'content',
+    required: false,
+    helpText: 'Optional custom thumbnail shown before video plays (recommended: 1920x1080px)',
+  },
+]
+
+// Video Hero-specific design fields
+const videoHeroDesignFields: FieldDefinition[] = [
+  {
+    name: 'layout',
+    label: 'Video Layout',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'inline',
+    helpText: 'How the video is displayed',
+    options: [
+      { label: 'Inline (video centered with text above)', value: 'inline' },
+      { label: 'Background (video as fullscreen background)', value: 'background' },
+      { label: 'Side by Side (text left, video right)', value: 'side-by-side' },
+    ],
+  },
+  {
+    name: 'autoplay',
+    label: 'Autoplay Video',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    checkboxLabel: 'Automatically play video when loaded (muted)',
+    helpText: 'Note: Most browsers require videos to be muted for autoplay',
+  },
+  {
+    name: 'overlayOpacity',
+    label: 'Overlay Opacity',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '40',
+    helpText: 'Darkness of overlay for background layout (helps text readability)',
+    options: [
+      { label: 'None (0%)', value: '0' },
+      { label: 'Light (20%)', value: '20' },
+      { label: 'Medium (40%)', value: '40' },
+      { label: 'Dark (60%)', value: '60' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + video-specific
+  ...baseContentFields,
+  ...videoHeroContentFields,
+
+  // Design tab: base fields + video-specific
+  ...baseDesignFields,
+  ...videoHeroDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/video-hero/index.ts

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

package/blocks/video-hero/schema.ts

@@ -0,0 +1,39 @@
+import { z } from 'zod'
+import {
+  baseBlockSchema,
+  type BaseBlockProps,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Video Hero Block Schema
+ *
+ * Extends base schema with video-specific fields:
+ * - videoUrl: YouTube or Vimeo URL (required)
+ * - videoThumbnail: Custom thumbnail image
+ * - layout: How video is displayed (inline, background, side-by-side)
+ * - autoplay: Auto-play video when loaded (muted)
+ * - overlayOpacity: Opacity for background layout overlay
+ *
+ * Note: Uses base schema title, content (as subtitle), cta, backgroundColor, className, id
+ */
+export const videoHeroSpecificSchema = z.object({
+  // Content fields
+  videoUrl: z.string().url('Must be a valid YouTube or Vimeo URL'),
+  videoThumbnail: z.string().url('Must be a valid URL').optional(),
+
+  // Design fields
+  layout: z.enum(['inline', 'background', 'side-by-side']).default('inline'),
+  autoplay: z.boolean().default(false),
+  overlayOpacity: z.enum(['0', '20', '40', '60']).default('40'),
+})
+
+/**
+ * Complete Video Hero Block Schema
+ * Combines base fields + video-hero-specific fields
+ */
+export const schema = baseBlockSchema.merge(videoHeroSpecificSchema)
+
+export type VideoHeroBlockProps = z.infer<typeof schema>
+
+// Also export for type-only imports
+export type { BaseBlockProps }