@nextsparkjs/theme-default 0.1.0-beta.1

package/blocks/post-content/fields.ts

@@ -0,0 +1,165 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Post Content Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, cta (from base) + content (rich-text, replaces base content)
+ * - Design: backgroundColor (from base) + editorial typography options
+ * - Advanced: className, id (from base)
+ *
+ * Note: The `content` field is overridden with a rich-text version for editorial content
+ */
+
+// Filter out base content field (we'll replace it with rich-text version)
+const baseContentFieldsWithoutContent = baseContentFields.filter(
+  (field) => field.name !== 'content'
+)
+
+// Post-content-specific content fields (rich-text content)
+const postContentFields: FieldDefinition[] = [
+  {
+    name: 'content',
+    label: 'Article Content',
+    type: 'rich-text',
+    tab: 'content',
+    required: true,
+    placeholder: 'Write your article content here...',
+    helpText: 'Main article body with rich text formatting support',
+  },
+]
+
+// Post-content-specific design fields (editorial styling)
+const postDesignFields: FieldDefinition[] = [
+  // Drop cap section
+  {
+    name: 'showDropCap',
+    label: 'Show Drop Cap',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    helpText: 'Display a decorative large first letter',
+  },
+  {
+    name: 'dropCapStyle',
+    label: 'Drop Cap Style',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'serif',
+    helpText: 'Visual style for the drop cap',
+    options: [
+      { label: 'Serif (Classic)', value: 'serif' },
+      { label: 'Sans-Serif (Modern)', value: 'sans-serif' },
+      { label: 'Decorative', value: 'decorative' },
+    ],
+  },
+
+  // Typography section
+  {
+    name: 'maxWidth',
+    label: 'Reading Width',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'narrow',
+    helpText: 'Optimal reading width for long-form content',
+    options: [
+      { label: 'Narrow (680px) - Optimal for reading', value: 'narrow' },
+      { label: 'Medium (768px)', value: 'medium' },
+      { label: 'Wide (900px)', value: 'wide' },
+    ],
+  },
+  {
+    name: 'fontSize',
+    label: 'Base Font Size',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'medium',
+    helpText: 'Base font size for article text',
+    options: [
+      { label: 'Small (16px)', value: 'small' },
+      { label: 'Medium (18px) - Recommended', value: 'medium' },
+      { label: 'Large (20px)', value: 'large' },
+    ],
+  },
+  {
+    name: 'lineHeight',
+    label: 'Line Spacing',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'relaxed',
+    helpText: 'Vertical spacing between lines',
+    options: [
+      { label: 'Compact (1.6)', value: 'compact' },
+      { label: 'Normal (1.7)', value: 'normal' },
+      { label: 'Relaxed (1.8) - Recommended', value: 'relaxed' },
+    ],
+  },
+  {
+    name: 'paragraphSpacing',
+    label: 'Paragraph Spacing',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'normal',
+    helpText: 'Vertical spacing between paragraphs',
+    options: [
+      { label: 'Tight', value: 'tight' },
+      { label: 'Normal', value: 'normal' },
+      { label: 'Loose', value: 'loose' },
+    ],
+  },
+
+  // Dividers section
+  {
+    name: 'showDividers',
+    label: 'Show Section Dividers',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    helpText: 'Display subtle dividers between content sections',
+  },
+  {
+    name: 'dividerStyle',
+    label: 'Divider Style',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'line',
+    helpText: 'Visual style for section dividers',
+    options: [
+      { label: 'Line', value: 'line' },
+      { label: 'Dots (•••)', value: 'dots' },
+      { label: 'Asterisks (***)', value: 'asterisks' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields (without content) + rich-text content
+  ...baseContentFieldsWithoutContent,
+  ...postContentFields,
+
+  // Design tab: base fields + editorial-specific
+  ...baseDesignFields,
+  ...postDesignFields,
+
+  // Advanced tab: base fields only (ALWAYS last)
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/post-content/index.ts

@@ -0,0 +1,4 @@
+export { config } from './config'
+export { fieldDefinitions, fields } from './fields'
+export { schema, type PostContentBlockProps } from './schema'
+export { PostContentBlock } from './component'

package/blocks/post-content/schema.ts

@@ -0,0 +1,46 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Post Content Block Schema
+ *
+ * Extends base schema with editorial-focused fields:
+ * - content: Main article content (overrides base content with required)
+ * - showDropCap: Display decorative drop cap on first letter
+ * - dropCapStyle: Style variant for the drop cap
+ * - maxWidth: Reading width control for optimal typography
+ * - fontSize: Base font size for content
+ * - lineHeight: Line spacing for readability
+ * - paragraphSpacing: Vertical spacing between paragraphs
+ * - showDividers: Show subtle section dividers
+ * - dividerStyle: Visual style for dividers
+ *
+ * Note: Uses base schema title, cta, backgroundColor, className, id
+ * The `content` field is overridden to be required and serves as the main article body
+ */
+export const postContentSpecificSchema = z.object({
+  // Content: rich text body (overrides base optional content)
+  content: z.string().min(1, 'Content is required'),
+
+  // Design: drop cap styling
+  showDropCap: z.boolean().default(false),
+  dropCapStyle: z.enum(['serif', 'sans-serif', 'decorative']).default('serif'),
+
+  // Design: layout and typography
+  maxWidth: z.enum(['narrow', 'medium', 'wide']).default('narrow'),
+  fontSize: z.enum(['small', 'medium', 'large']).default('medium'),
+  lineHeight: z.enum(['compact', 'normal', 'relaxed']).default('relaxed'),
+  paragraphSpacing: z.enum(['tight', 'normal', 'loose']).default('normal'),
+
+  // Design: section dividers
+  showDividers: z.boolean().default(false),
+  dividerStyle: z.enum(['line', 'dots', 'asterisks']).default('line'),
+})
+
+/**
+ * Complete Post Content Block Schema
+ * Note: postContentSpecificSchema.content overrides baseBlockSchema.content
+ */
+export const schema = baseBlockSchema.merge(postContentSpecificSchema)
+
+export type PostContentBlockProps = z.infer<typeof schema>

package/blocks/pricing-table/component.tsx

@@ -0,0 +1,154 @@
+import React from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { Check } from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { PricingTableBlockProps, PlanItem } from './schema'
+
+/**
+ * Pricing Table Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, plans
+ * - Design: backgroundColor, columns, highlightPopular
+ * - Advanced: className, id
+ */
+export function PricingTableBlock({
+  // Base content props
+  title,
+  content,
+  // Pricing-specific content
+  plans,
+  // Base design props
+  backgroundColor,
+  // Pricing-specific design
+  columns = '3',
+  highlightPopular = true,
+  // Base advanced props
+  className,
+  id,
+}: PricingTableBlockProps) {
+  // Parse features from newline-separated string
+  const parseFeatures = (features?: string): string[] => {
+    if (!features) return []
+    return features.split('\n').map(f => f.trim()).filter(Boolean)
+  }
+
+  // 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 }
+  )
+
+  // Safe plans array (fallback to empty array)
+  const safePlans = Array.isArray(plans) ? plans : []
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.pricingTable.container')}>
+      <div className="container mx-auto max-w-7xl">
+        {/* Section Header */}
+        {(title || content) && (
+          <div className="mb-12 text-center">
+            {title && (
+              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {content && (
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                {content}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Pricing Plans Grid */}
+        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['3'])}>
+          {safePlans.map((plan: PlanItem, index: number) => {
+            const features = parseFeatures(plan.features)
+            const isHighlighted = highlightPopular && plan.isPopular
+
+            return (
+              <Card
+                key={index}
+                className={cn(
+                  'relative flex flex-col',
+                  isHighlighted && 'border-primary shadow-lg scale-105',
+                  plan.isDisabled && 'opacity-60'
+                )}
+                data-cy={sel('blocks.pricingTable.plan', { index: String(index) })}
+              >
+                {/* Popular Badge */}
+                {isHighlighted && (
+                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                    <span className="bg-primary text-primary-foreground text-xs font-semibold px-3 py-1 rounded-full">
+                      Popular
+                    </span>
+                  </div>
+                )}
+
+                {/* Card Header */}
+                <CardHeader className="text-center pb-8">
+                  <CardTitle className="text-2xl mb-2">{plan.name}</CardTitle>
+                  <div className="flex items-baseline justify-center gap-1">
+                    <span className="text-4xl font-bold">{plan.price}</span>
+                    {plan.period && (
+                      <span className="text-muted-foreground">{plan.period}</span>
+                    )}
+                  </div>
+                  {plan.description && (
+                    <CardDescription className="mt-2">{plan.description}</CardDescription>
+                  )}
+                </CardHeader>
+
+                {/* Card Content */}
+                <CardContent className="flex-1 flex flex-col">
+                  {/* Features List */}
+                  {features.length > 0 && (
+                    <ul className="space-y-3 mb-6 flex-1" data-cy={sel('blocks.pricingTable.features')}>
+                      {features.map((feature: string, i: number) => (
+                        <li key={i} className="flex items-start gap-2">
+                          <Check className="h-5 w-5 text-primary shrink-0 mt-0.5" />
+                          <span className="text-sm text-muted-foreground">{feature}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+
+                  {/* CTA Button */}
+                  {plan.ctaText && plan.ctaUrl && (
+                    <Button
+                      asChild
+                      className="w-full"
+                      variant={isHighlighted ? 'default' : 'outline'}
+                      disabled={plan.isDisabled}
+                      data-cy={sel('blocks.pricingTable.cta', { index: String(index) })}
+                    >
+                      <a href={plan.ctaUrl}>{plan.ctaText}</a>
+                    </Button>
+                  )}
+
+                  {/* Disabled State Message */}
+                  {plan.isDisabled && !plan.ctaText && (
+                    <div className="text-center text-sm text-muted-foreground">
+                      Coming Soon
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

package/blocks/pricing-table/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'pricing-table',
+  name: 'Pricing Table',
+  description: 'A pricing comparison table showing different plans with features list, price, CTA button, and optional "Popular" badge',
+  category: 'pricing',
+  icon: 'DollarSign',
+  thumbnail: '/theme/blocks/pricing-table/thumbnail.png',
+  scope: ['pages']
+}

package/blocks/pricing-table/examples.ts

@@ -0,0 +1,96 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Standard',
+    description: 'Three-tier pricing without highlight',
+    props: {
+      title: 'Simple, Transparent Pricing',
+      content: 'Choose the plan that fits your needs. All plans include 14-day free trial.',
+      backgroundColor: 'white',
+      columns: '3',
+      highlightPopular: false,
+      plans: [
+        {
+          name: 'Starter',
+          price: '$29',
+          period: 'per month',
+          description: 'Perfect for small teams',
+          features: 'Up to 5 team members\n10GB storage\nEmail support\nBasic analytics',
+          ctaText: 'Start Free Trial',
+          ctaUrl: '/signup?plan=starter',
+          isPopular: false,
+          isDisabled: false,
+        },
+        {
+          name: 'Professional',
+          price: '$99',
+          period: 'per month',
+          description: 'For growing businesses',
+          features: 'Up to 25 team members\n100GB storage\nPriority support\nAdvanced analytics\nCustom integrations',
+          ctaText: 'Start Free Trial',
+          ctaUrl: '/signup?plan=pro',
+          isPopular: false,
+          isDisabled: false,
+        },
+        {
+          name: 'Enterprise',
+          price: 'Custom',
+          period: '',
+          description: 'For large organizations',
+          features: 'Unlimited team members\nUnlimited storage\n24/7 dedicated support\nCustom analytics\nAPI access\nSSO & SAML',
+          ctaText: 'Contact Sales',
+          ctaUrl: '/contact',
+          isPopular: false,
+          isDisabled: false,
+        },
+      ],
+    },
+  },
+  {
+    name: 'With Highlight',
+    description: 'Pricing with highlighted popular plan',
+    props: {
+      title: 'Pricing That Grows With You',
+      content: 'Start free, upgrade when you need more',
+      backgroundColor: 'gray-50',
+      columns: '3',
+      highlightPopular: true,
+      plans: [
+        {
+          name: 'Basic',
+          price: '$0',
+          period: 'forever free',
+          description: 'Get started at no cost',
+          features: 'Up to 3 team members\n5GB storage\nCommunity support\nBasic features',
+          ctaText: 'Get Started',
+          ctaUrl: '/signup?plan=basic',
+          isPopular: false,
+          isDisabled: false,
+        },
+        {
+          name: 'Pro',
+          price: '$49',
+          period: 'per month',
+          description: 'Most popular choice',
+          features: 'Up to 15 team members\n50GB storage\nPriority support\nAll features\nAdvanced analytics\nIntegrations',
+          ctaText: 'Start Free Trial',
+          ctaUrl: '/signup?plan=pro',
+          isPopular: true,
+          isDisabled: false,
+        },
+        {
+          name: 'Business',
+          price: '$199',
+          period: 'per month',
+          description: 'For serious teams',
+          features: 'Unlimited team members\n500GB storage\n24/7 support\nAll Pro features\nCustom workflows\nDedicated manager',
+          ctaText: 'Start Free Trial',
+          ctaUrl: '/signup?plan=business',
+          isPopular: false,
+          isDisabled: false,
+        },
+      ],
+    },
+  },
+]

package/blocks/pricing-table/fields.ts

@@ -0,0 +1,161 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Pricing Table Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, content (from base) + plans array
+ * - Design: backgroundColor (from base) + columns + highlightPopular
+ * - Advanced: className, id (from base)
+ */
+
+// Pricing-specific content fields
+const pricingContentFields: FieldDefinition[] = [
+  {
+    name: 'plans',
+    label: 'Pricing Plans',
+    type: 'array',
+    tab: 'content',
+    required: true,
+    description: 'List of pricing plans to display',
+    helpText: 'Add up to 4 pricing plans with features and CTA',
+    minItems: 1,
+    maxItems: 4,
+    itemFields: [
+      {
+        name: 'name',
+        label: 'Plan Name',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: 'Starter',
+        maxLength: 50,
+      },
+      {
+        name: 'price',
+        label: 'Price',
+        type: 'text',
+        tab: 'content',
+        required: true,
+        placeholder: '$29',
+        maxLength: 50,
+        helpText: 'Price display (e.g., "$29", "Free", "$99")',
+      },
+      {
+        name: 'period',
+        label: 'Billing Period',
+        type: 'text',
+        tab: 'content',
+        required: false,
+        placeholder: '/month',
+        maxLength: 50,
+        helpText: 'Billing period (e.g., "/month", "/year", "one-time")',
+      },
+      {
+        name: 'description',
+        label: 'Plan Description',
+        type: 'text',
+        tab: 'content',
+        required: false,
+        placeholder: 'Perfect for getting started',
+        maxLength: 200,
+      },
+      {
+        name: 'features',
+        label: 'Features (one per line)',
+        type: 'textarea',
+        tab: 'content',
+        required: false,
+        placeholder: 'Unlimited projects\n24/7 support\nAPI access',
+        rows: 4,
+        helpText: 'Enter each feature on a new line',
+      },
+      {
+        name: 'ctaText',
+        label: 'Button Text',
+        type: 'text',
+        tab: 'content',
+        required: false,
+        placeholder: 'Get Started',
+        maxLength: 50,
+      },
+      {
+        name: 'ctaUrl',
+        label: 'Button Link',
+        type: 'url',
+        tab: 'content',
+        required: false,
+        placeholder: '/signup',
+      },
+      {
+        name: 'isPopular',
+        label: 'Mark as "Popular"',
+        type: 'checkbox',
+        tab: 'content',
+        required: false,
+        default: false,
+        helpText: 'Show "Popular" badge on this plan',
+      },
+      {
+        name: 'isDisabled',
+        label: 'Disable this plan',
+        type: 'checkbox',
+        tab: 'content',
+        required: false,
+        default: false,
+        helpText: 'Gray out this plan (coming soon, unavailable)',
+      },
+    ],
+  },
+]
+
+// Pricing-specific design fields
+const pricingDesignFields: FieldDefinition[] = [
+  {
+    name: 'columns',
+    label: 'Grid Columns',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: '3',
+    description: 'Number of columns in the pricing table',
+    options: [
+      { label: '2 Columns', value: '2' },
+      { label: '3 Columns', value: '3' },
+      { label: '4 Columns', value: '4' },
+    ],
+  },
+  {
+    name: 'highlightPopular',
+    label: 'Highlight Popular Plan',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: true,
+    description: 'Add border and shadow to popular plan',
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields + pricing-specific
+  ...baseContentFields,
+  ...pricingContentFields,
+
+  // Design tab: base fields + pricing-specific
+  ...baseDesignFields,
+  ...pricingDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/blocks/pricing-table/index.ts

@@ -0,0 +1,4 @@
+export { config } from './config'
+export { fieldDefinitions, fields } from './fields'
+export { schema, type PricingTableBlockProps, type PlanItem } from './schema'
+export { PricingTableBlock } from './component'