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

package/templates/app/api/v1/teams/switch/route.ts

@@ -9,6 +9,11 @@ import {
 import { authenticateRequest, createAuthFailureResponse } from '@nextsparkjs/core/lib/api/auth/dual-auth'
 import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 import { TeamService } from '@nextsparkjs/core/lib/services'
+import {
+  ACTIVE_TEAM_COOKIE,
+  ACTIVE_TEAM_COOKIE_MAX_AGE,
+  activeTeamCookieValue,
+} from '@nextsparkjs/core/lib/teams/active-team-cookie'
 import { z } from 'zod'
 
 const switchTeamSchema = z.object({
@@ -35,6 +40,19 @@ export const POST = withRateLimitTier(withApiLogging(async (req: NextRequest): P
       return authResult.rateLimitResponse as NextResponse
     }
 
+    // The active team is remembered per browser session, in the activeTeamId
+    // cookie. An API key chooses the team on each request with x-team-id, so for
+    // it there is nothing to switch.
+    if (authResult.type !== 'session' || !authResult.sessionId) {
+      const response = createApiError(
+        'API keys choose the team on each request with the x-team-id header',
+        400,
+        null,
+        'SESSION_REQUIRED'
+      )
+      return addCorsHeaders(response, req)
+    }
+
     const body = await req.json()
     const validatedData = switchTeamSchema.parse(body)
 
@@ -48,15 +66,16 @@ export const POST = withRateLimitTier(withApiLogging(async (req: NextRequest): P
         message: 'Active team switched successfully',
       })
 
-      // Set cookie for server-side access (layouts, server components)
-      // This enables permission validation in [entity]/layout.tsx
+      // Remember the team for server-side reads (the dashboard layouts through
+      // the proxy, server actions, resolveTeamContext), bound to this session so
+      // a later session on the same browser does not inherit it.
       // SECURITY: httpOnly prevents client-side JS manipulation
-      response.cookies.set('activeTeamId', validatedData.teamId, {
+      response.cookies.set(ACTIVE_TEAM_COOKIE, activeTeamCookieValue(authResult.sessionId, validatedData.teamId), {
         path: '/',
-        httpOnly: true,  // Security: prevent client-side manipulation
+        httpOnly: true,
         secure: process.env.NODE_ENV === 'production',
         sameSite: 'lax',
-        maxAge: 60 * 60 * 24 * 365  // 1 year
+        maxAge: ACTIVE_TEAM_COOKIE_MAX_AGE,
       })
 
       return addCorsHeaders(response, req)

package/templates/app/dashboard/(main)/[entity]/layout.tsx

@@ -8,14 +8,17 @@
  *
  * Flow:
  * 1. User navigates to /dashboard/companies/create
- * 2. Browser sends activeTeamId cookie automatically
- * 3. This layout reads cookie and checks permission via checkPermission()
+ * 2. The proxy forwards the session's active team, taken from the
+ *    activeTeamId cookie only when this session wrote it; without one, the
+ *    user's default team is checked
+ * 3. This layout takes that team (getDashboardTeamId) and checks permission via checkPermission()
  * 4. If denied, redirects to /dashboard/permission-denied
  * 5. If allowed, renders the page (children)
  */
-import { headers, cookies } from 'next/headers'
+import { headers } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { checkPermission } from '@nextsparkjs/core/lib/permissions/check'
+import { getDashboardTeamId } from '@nextsparkjs/core/lib/teams/dashboard-team'
 import { isValidPermission } from '@nextsparkjs/core/lib/permissions/init'
 import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
 
@@ -59,7 +62,6 @@ export default async function EntityPermissionLayout({
 }: EntityLayoutProps) {
   const { entity } = await params
   const headersList = await headers()
-  const cookieStore = await cookies()
 
   // Get pathname from middleware header
   const pathname = headersList.get('x-pathname') || ''
@@ -67,12 +69,12 @@ export default async function EntityPermissionLayout({
   // Get userId from middleware header (set for all authenticated routes)
   const userId = headersList.get('x-user-id')
 
-  // Get teamId from cookie (set by TeamContext and /api/v1/teams/switch)
-  const teamId = cookieStore.get('activeTeamId')?.value
+  // The team this session chose, or the user's default team until it has one
+  const teamId = userId ? await getDashboardTeamId(headersList, userId) : null
 
   // Skip validation if missing required data
   // - No userId: middleware will redirect to login (shouldn't happen for dashboard routes)
-  // - No teamId: user hasn't selected a team yet, let page handle it
+  // - No teamId: the user belongs to no team, let page handle it
   if (!userId || !teamId) {
     console.log('[EntityPermissionLayout] Skipping validation - missing data:', {
       entity,

package/templates/app/dashboard/(main)/layout.tsx

@@ -9,7 +9,7 @@
  * IMPORTANT: Permission checking MUST be in this layout (not in [entity]/layout.tsx)
  * because (templates) routes with specific paths take precedence over dynamic [entity] routes.
  */
-import { headers, cookies } from 'next/headers'
+import { headers } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { DashboardShell } from '@nextsparkjs/core/components/dashboard/layouts/DashboardShell'
 import { serializeEntityConfig, type SerializableEntityConfig } from '@nextsparkjs/core/lib/entities/serialization'
@@ -17,6 +17,7 @@ import { setEntityRegistry } from '@nextsparkjs/core/lib/entities/queries'
 import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
 import type { EntityConfig, ChildEntityDefinition } from '@nextsparkjs/core/lib/entities/types'
 import { checkPermission } from '@nextsparkjs/core/lib/permissions/check'
+import { getDashboardTeamId } from '@nextsparkjs/core/lib/teams/dashboard-team'
 import { isValidPermission } from '@nextsparkjs/core/lib/permissions/init'
 import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
 // Import registry directly - webpack resolves @nextsparkjs/registries alias at compile time
@@ -64,11 +65,11 @@ async function DefaultMainDashboardLayout({
 
   // === PERMISSION CHECK ===
   const headersList = await headers()
-  const cookieStore = await cookies()
 
   const pathname = headersList.get('x-pathname') || ''
   const userId = headersList.get('x-user-id')
-  const teamId = cookieStore.get('activeTeamId')?.value
+  // The team this session chose, or the user's default team until it has one
+  const teamId = userId ? await getDashboardTeamId(headersList, userId) : null
 
   if (userId && teamId && pathname) {
     const parsed = parseEntityFromPathname(pathname)

package/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/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/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/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/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/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/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/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/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/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