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

package/dist/templates/app/dashboard/settings/api-keys/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from 'react';
+import { useLocale } from 'next-intl';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@nextsparkjs/core/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card';
@@ -66,6 +67,7 @@ function ApiKeysPage() {
   const [newApiKey, setNewApiKey] = useState<NewApiKeyResponse | null>(null);
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
   const queryClient = useQueryClient();
+  const locale = useLocale();
 
   // Fetch API keys
   const { data: apiKeys, isLoading, error } = useQuery<ApiKey[]>({
@@ -138,7 +140,7 @@ function ApiKeysPage() {
   };
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('es-ES', {
+    return new Date(dateString).toLocaleDateString(locale, {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
@@ -162,7 +164,7 @@ function ApiKeysPage() {
         <div>
           <h1 className="text-2xl font-bold">API Keys</h1>
           <p className="text-muted-foreground">
-            Gestiona las API keys para integración externa
+            Manage API keys for external integration
           </p>
         </div>
         <Alert variant={isPermissionError ? "default" : "destructive"}>
@@ -170,10 +172,10 @@ function ApiKeysPage() {
           <AlertDescription>
             {isPermissionError ? (
               <div>
-                <strong>Acceso restringido</strong>
+                <strong>Restricted access</strong>
                 <p className="mt-1">
-                  Solo los administradores pueden gestionar API keys.
-                  Contacta a un administrador si necesitas acceso a esta funcionalidad.
+                  Only administrators can manage API keys.
+                  Contact an administrator if you need access to this feature.
                 </p>
               </div>
             ) : (
@@ -191,12 +193,12 @@ function ApiKeysPage() {
         <div>
           <h1 className="text-2xl font-bold" data-cy={sel('settings.apiKeys.header')}>API Keys</h1>
           <p className="text-muted-foreground">
-            Gestiona las API keys para integración externa
+            Manage API keys for external integration
           </p>
         </div>
         <Button onClick={() => setShowCreateDialog(true)} data-cy={sel('settings.apiKeys.createButton')}>
           <Plus className="h-4 w-4 mr-2" />
-          Crear API Key
+          Create API Key
         </Button>
       </div>
 
@@ -239,11 +241,11 @@ function ApiKeysPage() {
               <Key className="h-12 w-12 text-muted-foreground mb-4" />
               <h3 className="text-lg font-semibold mb-2">No API Keys</h3>
               <p className="text-muted-foreground text-center mb-4">
-                No tienes API keys creadas. Crea una para empezar a usar la API externa.
+                You don&apos;t have any API keys yet. Create one to start using the external API.
               </p>
               <Button onClick={() => setShowCreateDialog(true)} data-cy={sel('settings.apiKeys.createButton')}>
                 <Plus className="h-4 w-4 mr-2" />
-                Crear primera API Key
+                Create first API Key
               </Button>
             </CardContent>
           </Card>
@@ -257,7 +259,7 @@ function ApiKeysPage() {
                       {apiKey.name}
                       {apiKey.status !== 'active' && (
                         <Badge variant="secondary" data-cy={sel('settings.apiKeys.row.status', { id: apiKey.id })}>
-                          {apiKey.status === 'inactive' ? 'Inactiva' : 'Expirada'}
+                          {apiKey.status === 'inactive' ? 'Inactive' : 'Expired'}
                         </Badge>
                       )}
                     </CardTitle>
@@ -276,7 +278,7 @@ function ApiKeysPage() {
                   </div>
                   <div className="flex items-center gap-2">
                     <Badge variant={apiKey.status === 'active' ? "default" : "secondary"} data-cy={sel('settings.apiKeys.row.status', { id: apiKey.id })}>
-                      {apiKey.status === 'active' ? 'Activa' : apiKey.status === 'inactive' ? 'Inactiva' : 'Expirada'}
+                      {apiKey.status === 'active' ? 'Active' : apiKey.status === 'inactive' ? 'Inactive' : 'Expired'}
                     </Badge>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
@@ -290,7 +292,7 @@ function ApiKeysPage() {
                           data-cy={sel('settings.apiKeys.row.menu.viewDetails', { id: apiKey.id })}
                         >
                           <Eye className="h-4 w-4 mr-2" />
-                          Ver detalles
+                          View details
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onClick={() => toggleApiKey.mutate({
@@ -303,12 +305,12 @@ function ApiKeysPage() {
                           {apiKey.status === 'active' ? (
                             <>
                               <EyeOff className="h-4 w-4 mr-2" />
-                              Desactivar
+                              Deactivate
                             </>
                           ) : (
                             <>
                               <Eye className="h-4 w-4 mr-2" />
-                              Activar
+                              Activate
                             </>
                           )}
                         </DropdownMenuItem>
@@ -319,7 +321,7 @@ function ApiKeysPage() {
                           data-cy={sel('settings.apiKeys.row.menu.revoke', { id: apiKey.id })}
                         >
                           <Trash2 className="h-4 w-4 mr-2" />
-                          Revocar
+                          Revoke
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -330,7 +332,7 @@ function ApiKeysPage() {
                 <div className="space-y-4">
                   {/* Scopes */}
                   <div data-cy={sel('settings.apiKeys.row.scopes', { id: apiKey.id })}>
-                    <strong className="text-sm">Permisos:</strong>
+                    <strong className="text-sm">Permissions:</strong>
                     <div className="flex flex-wrap gap-1 mt-1">
                       {apiKey.scopes.map((scope) => (
                         <Badge
@@ -352,11 +354,11 @@ function ApiKeysPage() {
                       <div className="font-semibold">{apiKey.usage_stats.total_requests.toLocaleString()}</div>
                     </div>
                     <div data-cy={sel('settings.apiKeys.row.stats.last24h', { id: apiKey.id })}>
-                      <div className="text-muted-foreground">Últimas 24h</div>
+                      <div className="text-muted-foreground">Last 24h</div>
                       <div className="font-semibold">{apiKey.usage_stats.last_24h.toLocaleString()}</div>
                     </div>
                     <div data-cy={sel('settings.apiKeys.row.stats.avgTime', { id: apiKey.id })}>
-                      <div className="text-muted-foreground">Tiempo promedio</div>
+                      <div className="text-muted-foreground">Avg time</div>
                       <div className="font-semibold">
                         {apiKey.usage_stats.avg_response_time
                           ? `${Math.round(apiKey.usage_stats.avg_response_time)}ms`
@@ -368,12 +370,12 @@ function ApiKeysPage() {
 
                   {/* Metadata */}
                   <div className="text-sm text-muted-foreground space-y-1" data-cy={sel('settings.apiKeys.row.metadata.container', { id: apiKey.id })}>
-                    <div data-cy={sel('settings.apiKeys.row.metadata.createdAt', { id: apiKey.id })}>Creada: {formatDate(apiKey.createdAt)}</div>
+                    <div data-cy={sel('settings.apiKeys.row.metadata.createdAt', { id: apiKey.id })}>Created: {formatDate(apiKey.createdAt)}</div>
                     {apiKey.lastUsedAt && (
-                      <div data-cy={sel('settings.apiKeys.row.metadata.lastUsed', { id: apiKey.id })}>Ultimo uso: {formatDate(apiKey.lastUsedAt)}</div>
+                      <div data-cy={sel('settings.apiKeys.row.metadata.lastUsed', { id: apiKey.id })}>Last used: {formatDate(apiKey.lastUsedAt)}</div>
                     )}
                     {apiKey.expiresAt && (
-                      <div data-cy={sel('settings.apiKeys.row.metadata.expiresAt', { id: apiKey.id })}>Expira: {formatDate(apiKey.expiresAt)}</div>
+                      <div data-cy={sel('settings.apiKeys.row.metadata.expiresAt', { id: apiKey.id })}>Expires: {formatDate(apiKey.expiresAt)}</div>
                     )}
                   </div>
                 </div>
@@ -427,9 +429,9 @@ function ApiKeyDetailsDialog({
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="max-w-2xl" data-cy={sel('settings.apiKeys.detailsDialog.container')}>
         <DialogHeader>
-          <DialogTitle data-cy={sel('settings.apiKeys.detailsDialog.title')}>Detalles de API Key</DialogTitle>
+          <DialogTitle data-cy={sel('settings.apiKeys.detailsDialog.title')}>API Key Details</DialogTitle>
           <DialogDescription>
-            Estadísticas de uso y configuración
+            Usage statistics and configuration
           </DialogDescription>
         </DialogHeader>
 
@@ -443,17 +445,17 @@ function ApiKeyDetailsDialog({
           <div className="space-y-6" data-cy={sel('settings.apiKeys.detailsDialog.content')}>
             {/* Basic Info */}
             <div data-cy={sel('settings.apiKeys.detailsDialog.basicInfo.container')}>
-              <h4 className="font-semibold mb-2">Información básica</h4>
+              <h4 className="font-semibold mb-2">Basic information</h4>
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="text-muted-foreground">Nombre:</span>
+                  <span className="text-muted-foreground">Name:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.basicInfo.name')}>{keyDetails.name}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Estado:</span>
+                  <span className="text-muted-foreground">Status:</span>
                   <div>
                     <Badge variant={keyDetails.status === 'active' ? "default" : "secondary"} data-cy={sel('settings.apiKeys.detailsDialog.basicInfo.status')}>
-                      {keyDetails.status === 'active' ? 'Activa' : keyDetails.status === 'inactive' ? 'Inactiva' : 'Expirada'}
+                      {keyDetails.status === 'active' ? 'Active' : keyDetails.status === 'inactive' ? 'Inactive' : 'Expired'}
                     </Badge>
                   </div>
                 </div>
@@ -464,27 +466,27 @@ function ApiKeyDetailsDialog({
             <div data-cy={sel('settings.apiKeys.detailsDialog.stats.container')}>
               <h4 className="font-semibold mb-2 flex items-center gap-2">
                 <Activity className="h-4 w-4" />
-                Estadísticas de uso
+                Usage statistics
               </h4>
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="text-muted-foreground">Total de requests:</span>
+                  <span className="text-muted-foreground">Total requests:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.totalRequests')}>{keyDetails.usage_stats.total_requests.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Ultimas 24 horas:</span>
+                  <span className="text-muted-foreground">Last 24 hours:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.last24h')}>{keyDetails.usage_stats.last_24h.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Ultimos 7 dias:</span>
+                  <span className="text-muted-foreground">Last 7 days:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.last7d')}>{keyDetails.usage_stats.last_7d.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Ultimos 30 dias:</span>
+                  <span className="text-muted-foreground">Last 30 days:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.last30d')}>{keyDetails.usage_stats.last_30d.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Tiempo promedio:</span>
+                  <span className="text-muted-foreground">Avg response time:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.avgTime')}>
                     {keyDetails.usage_stats.avg_response_time
                       ? `${Math.round(keyDetails.usage_stats.avg_response_time)}ms`
@@ -493,7 +495,7 @@ function ApiKeyDetailsDialog({
                   </div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Tasa de exito:</span>
+                  <span className="text-muted-foreground">Success rate:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.successRate')}>
                     {keyDetails.usage_stats.success_rate
                       ? `${Math.round(keyDetails.usage_stats.success_rate)}%`

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