@nextsparkjs/theme-default 0.1.0-beta.1 → 0.1.0-beta.101

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 NextSpark
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/api/ai/chat/stream/route.ts

@@ -26,6 +26,7 @@
 import { NextRequest } from 'next/server'
 import { z } from 'zod'
 import { authenticateRequest } from '@nextsparkjs/core/lib/api/auth/dual-auth'
+import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 import { streamChat } from '@/plugins/langchain/lib/agent-factory'
 import { createSSEEncoder } from '@/plugins/langchain/lib/streaming'
 import { loadSystemPrompt } from '@/themes/default/lib/langchain/agents'
@@ -46,7 +47,7 @@ const StreamChatRequestSchema = z.object({
 /**
  * POST - Stream chat response
  */
-export async function POST(request: NextRequest) {
+const postHandler = async (request: NextRequest) => {
     try {
         // 1. Authentication
         const authResult = await authenticateRequest(request)
@@ -210,3 +211,5 @@ export async function POST(request: NextRequest) {
         ) as any
     }
 }
+
+export const POST = withRateLimitTier(postHandler, 'write')

package/api/ai/orchestrator/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { authenticateRequest } from '@nextsparkjs/core/lib/api/auth/dual-auth'
+import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 import { processMessage } from '@/themes/default/lib/langchain/orchestrator'
 import { dbMemoryStore } from '@/plugins/langchain/lib/db-memory-store'
 import type { ChatMessage } from '@/plugins/langchain/types/langchain.types'
@@ -52,7 +53,7 @@ function convertToApiMessages(
  * - Sub-agents: task-assistant, customer-assistant, page-assistant
  * - Handles ambiguous requests by asking for clarification
  */
-export async function POST(req: NextRequest) {
+const postHandler = async (req: NextRequest) => {
     try {
         // 1. Dual authentication (API key or session)
         const authResult = await authenticateRequest(req)
@@ -118,10 +119,12 @@ export async function POST(req: NextRequest) {
     }
 }
 
+export const POST = withRateLimitTier(postHandler, 'write')
+
 /**
  * GET - Retrieve conversation history
  */
-export async function GET(req: NextRequest) {
+const getHandler = async (req: NextRequest) => {
     const { searchParams } = new URL(req.url)
     const sessionId = searchParams.get('sessionId')
 
@@ -187,10 +190,12 @@ export async function GET(req: NextRequest) {
     }
 }
 
+export const GET = withRateLimitTier(getHandler, 'read')
+
 /**
  * DELETE - Clear conversation
  */
-export async function DELETE(req: NextRequest) {
+const deleteHandler = async (req: NextRequest) => {
     const authResult = await authenticateRequest(req)
     if (!authResult.success || !authResult.user) {
         return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
@@ -224,3 +229,5 @@ export async function DELETE(req: NextRequest) {
         return NextResponse.json({ success: false, error: 'Failed to clear' }, { status: 500 })
     }
 }
+
+export const DELETE = withRateLimitTier(deleteHandler, 'write')

package/api/ai/single-agent/route.ts

@@ -14,6 +14,7 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { authenticateRequest } from '@nextsparkjs/core/lib/api/auth/dual-auth'
+import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 import { createAgent } from '@/plugins/langchain/lib/agent-factory'
 import {
     dbMemoryStore,
@@ -74,7 +75,7 @@ function convertToApiMessages(
 /**
  * POST - Send message to single agent
  */
-export async function POST(req: NextRequest) {
+const postHandler = async (req: NextRequest) => {
     try {
         // 1. Authentication
         const authResult = await authenticateRequest(req)
@@ -181,10 +182,12 @@ export async function POST(req: NextRequest) {
     }
 }
 
+export const POST = withRateLimitTier(postHandler, 'write')
+
 /**
  * GET - Retrieve conversation history
  */
-export async function GET(req: NextRequest) {
+const getHandler = async (req: NextRequest) => {
     const { searchParams } = new URL(req.url)
     const sessionId = searchParams.get('sessionId')
 
@@ -252,10 +255,12 @@ export async function GET(req: NextRequest) {
     }
 }
 
+export const GET = withRateLimitTier(getHandler, 'read')
+
 /**
  * DELETE - Clear conversation
  */
-export async function DELETE(req: NextRequest) {
+const deleteHandler = async (req: NextRequest) => {
     const authResult = await authenticateRequest(req)
     if (!authResult.success || !authResult.user) {
         return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
@@ -289,3 +294,5 @@ export async function DELETE(req: NextRequest) {
         return NextResponse.json({ success: false, error: 'Failed to clear' }, { status: 500 })
     }
 }
+
+export const DELETE = withRateLimitTier(deleteHandler, 'write')

package/api/ai/usage/route.ts

@@ -20,6 +20,7 @@
 
 import { NextRequest, NextResponse } from 'next/server'
 import { authenticateRequest } from '@nextsparkjs/core/lib/api/auth/dual-auth'
+import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 import { tokenTracker } from '@/plugins/langchain/lib/token-tracker'
 import { queryOne } from '@nextsparkjs/core/lib/db'
 
@@ -28,7 +29,7 @@ type Period = 'today' | '7d' | '30d' | 'all'
 /**
  * GET - Retrieve token usage statistics
  */
-export async function GET(request: NextRequest) {
+const getHandler = async (request: NextRequest) => {
     try {
         // 1. Authentication
         const authResult = await authenticateRequest(request)
@@ -120,3 +121,5 @@ export async function GET(request: NextRequest) {
         )
     }
 }
+
+export const GET = withRateLimitTier(getHandler, 'read')

package/blocks/benefits/component.tsx

@@ -23,9 +23,9 @@ export function BenefitsBlock({
   const bgClasses = getBackgroundClasses(backgroundColor)
 
   const gridCols = {
-    '2': 'md:grid-cols-2',
-    '3': 'md:grid-cols-3',
-    '4': 'md:grid-cols-2 lg:grid-cols-4',
+    '2': '@md:grid-cols-2',
+    '3': '@md:grid-cols-3',
+    '4': '@md:grid-cols-2 @lg:grid-cols-4',
   }
 
   const cardStyles = {
@@ -49,7 +49,7 @@ export function BenefitsBlock({
         {(sectionTitle || sectionSubtitle) && (
           <div className="text-center mb-12">
             {sectionTitle && (
-              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              <h2 className="text-3xl @md:text-4xl font-bold mb-4">
                 {sectionTitle}
               </h2>
             )}

package/blocks/cta-section/component.tsx

@@ -48,7 +48,7 @@ export function CTASectionBlock({
 
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -56,15 +56,15 @@ export function CTASectionBlock({
     <section id={id} className={sectionClasses} data-cy={sel('blocks.ctaSection.container')}>
       <div className="container mx-auto max-w-4xl text-center">
         {title && (
-          <h2 className="mb-4 text-4xl font-bold md:text-5xl">{title}</h2>
+          <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>
+          <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">
+          <div className="flex flex-col gap-4 @sm:flex-row @sm:justify-center">
             {primaryCta && (
               <Button asChild size="lg">
                 <a

package/blocks/faq-accordion/component.tsx

@@ -44,7 +44,7 @@ export function FaqAccordionBlock({
 
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -80,7 +80,7 @@ export function FaqAccordionBlock({
         {(title || subtitle) && (
           <div className="mb-12 text-center">
             {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
                 {title}
               </h2>
             )}

package/blocks/features-grid/component.tsx

@@ -42,14 +42,14 @@ export function FeaturesGridBlock({
 
   // 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',
+    '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',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -60,7 +60,7 @@ export function FeaturesGridBlock({
         {(title || displayContent) && (
           <div className="mb-12 text-center">
             {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
                 {title}
               </h2>
             )}

package/blocks/hero/component.tsx

@@ -72,13 +72,13 @@ export function HeroBlock({
       {/* Content */}
       <div className="container relative z-10 mx-auto max-w-4xl text-center">
         {title && (
-          <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
+          <h1 className="mb-6 text-5xl font-bold leading-tight @md:text-6xl @lg:text-7xl">
             {title}
           </h1>
         )}
 
         {displayContent && (
-          <p className="mb-8 text-xl md:text-2xl opacity-90">
+          <p className="mb-8 text-xl @md:text-2xl opacity-90">
             {displayContent}
           </p>
         )}

package/blocks/hero/fields.ts

@@ -21,7 +21,7 @@ const heroDesignFields: FieldDefinition[] = [
   {
     name: 'backgroundImage',
     label: 'Background Image',
-    type: 'image',
+    type: 'media-library',
     tab: 'design',
     required: false,
     helpText: 'Optional background image (recommended: 1920x1080px minimum)',

package/blocks/hero-with-form/component.tsx

@@ -88,26 +88,26 @@ export function HeroWithFormBlock({
       </div>
 
       {/* Content Container */}
-      <div className="container relative z-10 mx-auto px-4 py-12 lg:py-0">
-        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 min-h-screen items-center">
+      <div className="container relative z-10 mx-auto px-4 py-12 @lg:py-0">
+        <div className="grid @lg:grid-cols-2 gap-8 @lg:gap-16 min-h-screen items-center">
 
           {/* Left: Title/Subtitle - vertically centered, bottom aligned on mobile */}
-          <div className="text-white order-2 lg:order-1 flex flex-col justify-end lg:justify-center pb-8 lg:pb-0">
+          <div className="text-white order-2 @lg:order-1 flex flex-col justify-end @lg:justify-center pb-8 @lg:pb-0">
             {title && (
-              <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold italic mb-4 leading-tight">
+              <h1 className="text-4xl @lg:text-5xl @xl:text-6xl font-bold italic mb-4 leading-tight">
                 {title}
               </h1>
             )}
             {subtitle && (
-              <p className="text-lg lg:text-xl xl:text-2xl opacity-90 max-w-lg">
+              <p className="text-lg @lg:text-xl @xl:text-2xl opacity-90 max-w-lg">
                 {subtitle}
               </p>
             )}
           </div>
 
           {/* Right: Form Card - centered vertically */}
-          <div className="order-1 lg:order-2 flex justify-center lg:justify-end items-start lg:items-center pt-8 lg:pt-0">
-            <div className="bg-white rounded-lg shadow-2xl p-6 sm:p-8 w-full max-w-md">
+          <div className="order-1 @lg:order-2 flex justify-center @lg:justify-end items-start @lg:items-center pt-8 @lg:pt-0">
+            <div className="bg-white rounded-lg shadow-2xl p-6 @sm:p-8 w-full max-w-md">
               {/* Form Header */}
               {formTitle && (
                 <h2 className="text-xl font-bold text-center text-primary mb-2">

package/blocks/hero-with-form/fields.ts

@@ -34,7 +34,7 @@ const heroWithFormContentFields: FieldDefinition[] = [
   {
     name: 'backgroundImage',
     label: 'Background Image',
-    type: 'image',
+    type: 'media-library',
     tab: 'content',
     required: true,
     helpText: 'Full-width background image (recommended: 1920x1080px minimum)',

package/blocks/jumbotron/component.tsx

@@ -46,16 +46,16 @@ export function JumbotronBlock({
   }[align]
 
   const ctaJustifyClasses = {
-    center: 'sm:justify-center',
-    left: 'sm:justify-start',
-    right: 'sm:justify-end',
+    center: '@sm:justify-center',
+    left: '@sm:justify-start',
+    right: '@sm:justify-end',
   }[align]
 
   // Build section classes with fullscreen or standard padding
   const sectionClasses = buildSectionClasses(
     cn(
       'relative flex overflow-hidden px-4',
-      fullscreen ? 'min-h-screen' : 'py-16 md:py-24',
+      fullscreen ? 'min-h-screen' : 'py-16 @md:py-24',
       alignmentClasses,
       textColor === 'light' ? 'text-white' : 'text-gray-900'
     ),
@@ -81,20 +81,20 @@ export function JumbotronBlock({
       {/* Content */}
       <div className={cn('container relative z-10 max-w-4xl', contentAlignmentClasses)}>
         {title && (
-          <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
+          <h1 className="mb-6 text-5xl font-bold leading-tight @md:text-6xl @lg:text-7xl">
             {title}
           </h1>
         )}
 
         {subtitle && (
-          <p className="mb-8 text-xl md:text-2xl opacity-90">
+          <p className="mb-8 text-xl @md:text-2xl opacity-90">
             {subtitle}
           </p>
         )}
 
         {/* CTAs - automatically center based on count */}
         {(primaryCta || secondaryCta) && (
-          <div className={cn('flex flex-col gap-4 sm:flex-row', ctaJustifyClasses)}>
+          <div className={cn('flex flex-col gap-4 @sm:flex-row', ctaJustifyClasses)}>
             {primaryCta && primaryCta.text && (
               <Button
                 asChild

package/blocks/jumbotron/fields.ts

@@ -148,7 +148,7 @@ const jumbotronDesignFields: FieldDefinition[] = [
   {
     name: 'backgroundImage',
     label: 'Background Image',
-    type: 'image',
+    type: 'media-library',
     tab: 'design',
     required: false,
     helpText: 'Optional background image (recommended: 1920x1080px minimum)',

package/blocks/logo-cloud/component.tsx

@@ -43,10 +43,10 @@ export function LogoCloudBlock({
 
   // Build column classes for grid layout
   const columnClasses: Record<string, string> = {
-    '3': 'grid-cols-2 sm:grid-cols-3',
-    '4': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
-    '5': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
-    '6': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+    '3': 'grid-cols-2 @sm:grid-cols-3',
+    '4': 'grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-4',
+    '5': 'grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-5',
+    '6': 'grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-6',
   }
 
   // Build size classes for logo containers
@@ -66,7 +66,7 @@ export function LogoCloudBlock({
 
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-12 px-4 md:py-16',
+    'py-12 px-4 @md:py-16',
     { backgroundColor, className }
   )
 
@@ -77,7 +77,7 @@ export function LogoCloudBlock({
         {(title || content) && (
           <div className="mb-10 text-center">
             {title && (
-              <h2 className="mb-3 text-2xl font-semibold md:text-3xl">
+              <h2 className="mb-3 text-2xl font-semibold @md:text-3xl">
                 {title}
               </h2>
             )}

package/blocks/logo-cloud/fields.ts

@@ -30,7 +30,7 @@ const logoCloudContentFields: FieldDefinition[] = [
       {
         name: 'image',
         label: 'Logo Image',
-        type: 'image',
+        type: 'media-library',
         tab: 'content',
         required: true,
         helpText: 'Logo image URL (recommended: transparent PNG, 200x100px)',

package/blocks/post-content/component.tsx

@@ -79,7 +79,7 @@ export function PostContentBlock({
 
   // Build section classes with background
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -119,7 +119,7 @@ export function PostContentBlock({
         {/* Optional Section Title */}
         {title && (
           <div className={cn('mb-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
-            <h2 className="text-4xl font-bold md:text-5xl lg:text-6xl tracking-tight">
+            <h2 className="text-4xl font-bold @md:text-5xl @lg:text-6xl tracking-tight">
               {title}
             </h2>
           </div>

package/blocks/pricing-table/component.tsx

@@ -38,14 +38,14 @@ export function PricingTableBlock({
 
   // 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',
+    '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',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -59,7 +59,7 @@ export function PricingTableBlock({
         {(title || content) && (
           <div className="mb-12 text-center">
             {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
                 {title}
               </h2>
             )}

package/blocks/split-content/component.tsx

@@ -38,7 +38,7 @@ export function SplitContentBlock({
 
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -57,13 +57,13 @@ export function SplitContentBlock({
   }
 
   // Grid order classes based on image position
-  const imageOrderClass = imagePosition === 'right' ? 'lg:order-2' : 'lg:order-1'
-  const contentOrderClass = imagePosition === 'right' ? 'lg:order-1' : 'lg:order-2'
+  const imageOrderClass = imagePosition === 'right' ? '@lg:order-2' : '@lg:order-1'
+  const contentOrderClass = imagePosition === 'right' ? '@lg:order-1' : '@lg:order-2'
 
   return (
     <section id={id} className={sectionClasses} data-cy={sel('blocks.splitContent.container')}>
       <div className="container mx-auto max-w-7xl">
-        <div className={cn('grid gap-8 lg:grid-cols-2 lg:gap-12', alignmentClasses[verticalAlign as 'top' | 'center' | 'bottom'])}>
+        <div className={cn('grid gap-8 @lg:grid-cols-2 @lg:gap-12', alignmentClasses[verticalAlign as 'top' | 'center' | 'bottom'])}>
           {/* Image Column */}
           <div className={cn('relative', imageOrderClass)}>
             <div className="relative aspect-[4/3] w-full overflow-hidden">
@@ -86,7 +86,7 @@ export function SplitContentBlock({
             )}
 
             {title && (
-              <h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
+              <h2 className="mb-4 text-3xl font-bold @md:text-4xl @lg:text-5xl">
                 {title}
               </h2>
             )}

package/blocks/split-content/fields.ts

@@ -46,7 +46,7 @@ const splitContentFields: FieldDefinition[] = [
   {
     name: 'image',
     label: 'Image',
-    type: 'image',
+    type: 'media-library',
     tab: 'content',
     required: true,
     helpText: 'Featured image (recommended: 800x600px minimum)',

package/blocks/stats-counter/component.tsx

@@ -34,16 +34,16 @@ export function StatsCounterBlock({
 
   // 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',
+    '2': '@sm:grid-cols-2',
+    '3': '@sm:grid-cols-2 @lg:grid-cols-3',
+    '4': '@sm:grid-cols-2 @lg:grid-cols-4',
   }
 
   // Size classes for numbers
   const sizeClasses: Record<string, string> = {
-    sm: 'text-3xl md:text-4xl',
-    md: 'text-4xl md:text-5xl',
-    lg: 'text-5xl md:text-6xl lg:text-7xl',
+    sm: 'text-3xl @md:text-4xl',
+    md: 'text-4xl @md:text-5xl',
+    lg: 'text-5xl @md:text-6xl @lg:text-7xl',
   }
 
   // Variant-specific stat item classes
@@ -62,7 +62,7 @@ export function StatsCounterBlock({
 
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -73,7 +73,7 @@ export function StatsCounterBlock({
         {(title || content) && (
           <div className="mb-12 text-center">
             {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
                 {title}
               </h2>
             )}
@@ -98,7 +98,7 @@ export function StatsCounterBlock({
                   <span className="text-primary">{stat.suffix}</span>
                 )}
               </div>
-              <div className="text-sm md:text-base text-muted-foreground font-medium">
+              <div className="text-sm @md:text-base text-muted-foreground font-medium">
                 {stat.label}
               </div>
             </div>

package/blocks/testimonials/component.tsx

@@ -31,13 +31,13 @@ export function TestimonialsBlock({
 }: TestimonialsBlockProps) {
   // Build column classes based on columns prop
   const columnClasses: Record<string, string> = {
-    '2': 'md:grid-cols-2',
-    '3': 'md:grid-cols-2 lg:grid-cols-3',
+    '2': '@md:grid-cols-2',
+    '3': '@md:grid-cols-2 @lg:grid-cols-3',
   }
 
   // Build section classes with background and custom className
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -51,7 +51,7 @@ export function TestimonialsBlock({
         {(title || content) && (
           <div className="mb-12 text-center">
             {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
+              <h2 className="mb-4 text-4xl font-bold @md:text-5xl">
                 {title}
               </h2>
             )}

package/blocks/testimonials/fields.ts

@@ -58,7 +58,7 @@ const testimonialsContentFields: FieldDefinition[] = [
       {
         name: 'avatar',
         label: 'Avatar Image',
-        type: 'image',
+        type: 'media-library',
         tab: 'content',
         required: false,
         description: 'Profile picture of the person',