@digilogiclabs/create-saas-app 2.3.0 → 2.5.0

package/src/templates/web/iot-dashboard/template/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, PulseIndicator } from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/app-sdk'
 import { Cpu, Activity, Signal, Bell, Settings, ArrowRight, User, LogOut, Wifi, ThermometerSun, Gauge, Shield } from 'lucide-react'
 import Link from 'next/link'
@@ -140,13 +140,11 @@ export default function Home() {
                 <div className="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
                   <device.icon className="w-5 h-5 text-emerald-600" />
                 </div>
-                <span className={`text-xs px-2 py-1 rounded-full ${
-                  device.status === 'online'
-                    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                    : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
-                }`}>
-                  {device.status === 'online' ? 'All Online' : 'Partial'}
-                </span>
+                <PulseIndicator
+                  status={device.status === 'online' ? 'success' : 'loading'}
+                  label={device.status === 'online' ? 'All Online' : 'Partial'}
+                  size="sm"
+                />
               </div>
               <h3 className="font-semibold text-slate-900 dark:text-white">{device.name}</h3>
               <p className="text-2xl font-bold text-emerald-600">{device.count}</p>

package/src/templates/web/marketplace/template/package.json

@@ -16,11 +16,9 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
+    "@digilogiclabs/platform-core": "^1.13.0",
     "@digilogiclabs/app-sdk": "^1.0.0",
-    "@digilogiclabs/saas-factory-auth": "^1.0.7",
-    "@digilogiclabs/saas-factory-payments": "^1.2.9",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "stripe": "^16.12.0",
     "@stripe/react-stripe-js": "^2.8.0",
     "@stripe/stripe-js": "^4.10.0",

package/src/templates/web/marketplace/template/src/app/error.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong>Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong>Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong>Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button onClick={reset} className="flex-1" size="lg">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            <Link href="/" className="flex-1">
+              <Button variant="outline" className="w-full" size="lg">
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/app/loading.tsx

@@ -0,0 +1,57 @@
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header skeleton */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <SkeletonText className="h-8 w-48" />
+          <SkeletonText className="h-10 w-64" />
+          <div className="flex gap-2">
+            <SkeletonText className="h-8 w-20" />
+            <SkeletonText className="h-8 w-20" />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Hero skeleton */}
+        <div className="text-center mb-12">
+          <SkeletonText className="h-12 w-80 mx-auto mb-4" />
+          <SkeletonText className="h-6 w-96 mx-auto" />
+        </div>
+
+        {/* Category cards skeleton */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Products skeleton */}
+        <div className="mb-12">
+          <SkeletonText className="h-8 w-48 mb-6" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        </div>
+
+        {/* Loading indicator */}
+        <div className="flex justify-center">
+          <Card className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <div className="w-8 h-8 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
+                <div className="absolute top-0 left-0 w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300">Loading marketplace...</p>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, GradientBorderCard } from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/app-sdk'
 import { ShoppingCart, Store, Search, Star, ArrowRight, User, LogOut } from 'lucide-react'
 import Link from 'next/link'
@@ -151,16 +151,18 @@ export default function Home() {
         </div>
 
         {/* Become a Vendor CTA */}
-        <Card className="p-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
-          <Store className="w-12 h-12 mx-auto mb-4" />
-          <h2 className="text-2xl font-bold mb-2">Become a Vendor</h2>
-          <p className="mb-6 opacity-90 max-w-md mx-auto">
-            Start selling your products to thousands of customers. Low fees, powerful tools.
-          </p>
-          <Link href="/vendors/apply">
-            <Button variant="secondary" size="lg">Apply Now</Button>
-          </Link>
-        </Card>
+        <GradientBorderCard gradientColors="from-blue-500 via-purple-500 to-blue-500" borderWidth={2}>
+          <div className="text-center">
+            <Store className="w-12 h-12 mx-auto mb-4 text-blue-600 dark:text-blue-400" />
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Become a Vendor</h2>
+            <p className="mb-6 text-gray-600 dark:text-gray-300 max-w-md mx-auto">
+              Start selling your products to thousands of customers. Low fees, powerful tools.
+            </p>
+            <Link href="/vendors/apply">
+              <Button size="lg">Apply Now</Button>
+            </Link>
+          </div>
+        </GradientBorderCard>
       </div>
     </main>
   )

package/src/templates/web/micro-saas/template/package.json

@@ -14,10 +14,9 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
+    "@digilogiclabs/platform-core": "^1.13.0",
     "@digilogiclabs/app-sdk": "^1.0.0",
-    "@digilogiclabs/saas-factory-auth": "^1.0.7",
-    "@digilogiclabs/saas-factory-ui": "^1.0.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^4.0.0",
     "clsx": "^2.0.0",
     "class-variance-authority": "^0.7.0",

package/src/templates/web/micro-saas/template/src/app/error.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center p-4">
+      <Card className="p-8 max-w-lg w-full">
+        <div className="flex flex-col items-center space-y-6 text-center">
+          <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400" />
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              We encountered an unexpected error. This has been logged and our team will look into it.
+            </p>
+
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 text-left">
+                <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-700 dark:text-gray-300 overflow-auto max-h-40">
+                  <div className="mb-2">
+                    <strong>Message:</strong> {error.message}
+                  </div>
+                  {error.digest && (
+                    <div className="mb-2">
+                      <strong>Digest:</strong> {error.digest}
+                    </div>
+                  )}
+                  {error.stack && (
+                    <div>
+                      <strong>Stack:</strong>
+                      <pre className="whitespace-pre-wrap mt-1">{error.stack}</pre>
+                    </div>
+                  )}
+                </div>
+              </details>
+            )}
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            <Button onClick={reset} className="flex-1" size="lg">
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </Button>
+            <Link href="/" className="flex-1">
+              <Button variant="outline" className="w-full" size="lg">
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/micro-saas/template/src/app/loading.tsx

@@ -0,0 +1,39 @@
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      <div className="max-w-4xl mx-auto px-4 py-16">
+        {/* Header skeleton */}
+        <div className="flex justify-end mb-8">
+          <SkeletonText className="h-8 w-24" />
+        </div>
+
+        {/* Hero skeleton */}
+        <div className="text-center mb-16">
+          <SkeletonText className="h-6 w-32 mx-auto mb-6" />
+          <SkeletonText className="h-12 w-64 mx-auto mb-6" />
+          <SkeletonText className="h-6 w-96 mx-auto mb-8" />
+        </div>
+
+        {/* Feature cards skeleton */}
+        <div className="grid md:grid-cols-3 gap-6 mb-16">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* CTA skeleton */}
+        <Card className="p-8">
+          <div className="flex flex-col items-center space-y-4">
+            <div className="relative">
+              <div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-700 rounded-full animate-spin"></div>
+              <div className="absolute top-0 left-0 w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-300">Loading...</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/ui-auth/template/.claude

@@ -17,5 +17,5 @@
     "*.log",
     ".claude"
   ],
-  "instructions": "You are helping develop an Authentication Platform using Next.js 15, TypeScript, and Digi Logic Labs packages.\n\n## Project Architecture\n- **Framework**: Next.js 15.3 with App Router\n- **Database**: Supabase (PostgreSQL with real-time features)\n- **Styling**: Tailwind CSS v4 with glassmorphism design system\n- **Authentication**: Supabase Auth with @digilogiclabs/saas-factory-auth\n\n## Key Packages\n- **@digilogiclabs/saas-factory-auth**: Authentication components and hooks with Supabase integration\n- **@digilogiclabs/saas-factory-ui**: Modern UI components with glassmorphism and responsive design\n\n## Development Guidelines\n1. Follow Next.js 15 best practices with Server Components by default\n2. Use TypeScript strictly - all components should be typed\n3. Implement proper error boundaries and loading states\n4. Follow the glassmorphism design system from saas-factory-ui\n5. Use Server Actions for mutations and API routes for complex logic\n6. Always check authentication state with useAuth hook\n\n## File Organization\n- Components in /src/components with feature-based folders\n- Server actions in /src/server/actions\n- API routes in /src/app/api\n- Database queries in /src/server/queries\n- Types in /src/types\n\n## Testing\n- Use Vitest for unit tests\n- Test business logic and error states\n- Mock external services (Supabase)\n\nRemember to consult the context.md file for detailed package documentation and examples."
+  "instructions": "You are helping develop an Authentication Platform using Next.js 15, TypeScript, and Digi Logic Labs packages.\n\n## Project Architecture\n- **Framework**: Next.js 15.3 with App Router\n- **Database**: Supabase (PostgreSQL with real-time features)\n- **Styling**: Tailwind CSS v4 with glassmorphism design system\n- **Authentication**: Supabase Auth with @digilogiclabs/app-sdk\n\n## Key Packages\n- **@digilogiclabs/app-sdk**: Authentication components and hooks with Supabase integration\n- **@digilogiclabs/saas-factory-ui**: Modern UI components with glassmorphism and responsive design\n\n## Development Guidelines\n1. Follow Next.js 15 best practices with Server Components by default\n2. Use TypeScript strictly - all components should be typed\n3. Implement proper error boundaries and loading states\n4. Follow the glassmorphism design system from saas-factory-ui\n5. Use Server Actions for mutations and API routes for complex logic\n6. Always check authentication state with useAuth hook\n\n## File Organization\n- Components in /src/components with feature-based folders\n- Server actions in /src/server/actions\n- API routes in /src/app/api\n- Database queries in /src/server/queries\n- Types in /src/types\n\n## Testing\n- Use Vitest for unit tests\n- Test business logic and error states\n- Mock external services (Supabase)\n\nRemember to consult the context.md file for detailed package documentation and examples."
 }

package/src/templates/web/ui-auth/template/context.md

@@ -12,11 +12,11 @@ This project is an Authentication Platform built with modern technologies and Di
 
 ### Package Integration
 
-#### @digilogiclabs/saas-factory-auth
-Authentication components and hooks with Supabase integration
+#### @digilogiclabs/app-sdk
+Unified application SDK with auth and payments hooks
 
-**Key Exports**: useAuth, AuthProvider, LoginForm, SignupForm
-**Documentation**: https://docs.digilogiclabs.com/packages/auth
+**Key Exports**: useAuth, usePayments, DLLProvider, usePlatform
+**Documentation**: https://docs.digilogiclabs.com/packages/app-sdk
 
 #### @digilogiclabs/saas-factory-ui
 Modern UI components with glassmorphism and responsive design
@@ -42,7 +42,7 @@ Key tables:
 
 ### Authentication Flow
 ```typescript
-import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useAuth } from '@digilogiclabs/app-sdk'
 
 export function ProtectedComponent() {
   const { user, loading } = useAuth()

package/src/templates/web/ui-auth/template/package.json

@@ -17,9 +17,8 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.3",
-    "@digilogiclabs/saas-factory-auth": "^1.0.6",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

package/src/templates/web/ui-auth/template/src/app/dev-setup/page.tsx

@@ -201,7 +201,7 @@ ${hasVideo ? '- **video_content**: Generated video files and metadata' : ''}
 
 ### Authentication Flow
 ${hasAuth ? `\`\`\`typescript
-import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useAuth } from '@digilogiclabs/app-sdk'
 
 export function ProtectedComponent() {
   const { user, loading } = useAuth()
@@ -237,10 +237,10 @@ export function ExampleComponent() {
 
 ${hasPayments ? `### Payment Integration
 \`\`\`typescript
-import { useStripe, PaymentForm } from '@digilogiclabs/saas-factory-payments'
+import { usePayments } from '@digilogiclabs/app-sdk'
 
 export function CheckoutPage() {
-  const { createCheckoutSession, loading } = useStripe()
+  const { createCheckoutSession, loading } = usePayments()
   
   const handlePayment = async (priceId: string) => {
     const { url } = await createCheckoutSession({ priceId })

package/src/templates/web/ui-auth/template/src/app/login/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { useAuth } from '@digilogiclabs/app-sdk';
 import { useRouter } from 'next/navigation';
 
 export default function LoginPage() {

package/src/templates/web/ui-auth/template/src/app/page.tsx

@@ -14,7 +14,7 @@ import {
   useOfflineState
 } from '@digilogiclabs/saas-factory-ui'
 import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Wifi, WifiOff, Smartphone } from 'lucide-react'
-import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useAuth } from '@digilogiclabs/app-sdk'
 import Link from 'next/link'
 
 export default function Home() {

package/src/templates/web/ui-auth/template/src/app/signup/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { useAuth } from '@digilogiclabs/app-sdk';
 import { useRouter } from 'next/navigation';
 
 export default function SignupPage() {

package/src/templates/web/ui-auth/template/src/components/providers/app-providers.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { ThemeProvider } from 'next-themes'
-import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
+import { DLLProvider } from '@digilogiclabs/app-sdk'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
@@ -19,12 +19,12 @@ export function AppProviders({ children }: AppProvidersProps) {
       disableTransitionOnChange
       storageKey="{{packageName}}-theme"
     >
-      <AuthProvider>
+      <DLLProvider>
         <AppThemeProvider themeColor="{{themeColor}}">
           {children}
           <Toaster />
         </AppThemeProvider>
-      </AuthProvider>
+      </DLLProvider>
     </ThemeProvider>
   )
 }

package/src/templates/web/ui-auth/template/src/lib/platform.ts

@@ -15,7 +15,6 @@
  */
 
 import { createPlatform, createPlatformAsync, type IPlatform } from '@digilogiclabs/platform-core';
-import { setPlatform as setAuthPlatform } from '@digilogiclabs/saas-factory-auth';
 
 // Singleton platform instance
 let platformInstance: IPlatform | null = null;
@@ -35,7 +34,6 @@ let platformInstance: IPlatform | null = null;
 export function getPlatform(): IPlatform {
   if (!platformInstance) {
     platformInstance = createPlatform();
-    initializePackageIntegrations(platformInstance);
   }
   return platformInstance;
 }
@@ -60,24 +58,10 @@ export async function initializePlatform(): Promise<IPlatform> {
   // Use createPlatformAsync for production adapters
   // Falls back to memory adapters if env vars are not set
   platformInstance = await createPlatformAsync();
-  initializePackageIntegrations(platformInstance);
 
   return platformInstance;
 }
 
-/**
- * Initialize package integrations with platform services
- */
-function initializePackageIntegrations(platform: IPlatform): void {
-  // Connect saas-factory-auth to platform-core
-  // Enables: logging, metrics, and email for auth events
-  setAuthPlatform({
-    email: platform.email,
-    logger: platform.logger,
-    metrics: platform.metrics,
-  });
-}
-
 /**
  * Reset platform instance (useful for testing)
  */

package/src/templates/web/ui-auth/template/src/test/setup.ts

@@ -15,8 +15,8 @@ vi.mock('next/navigation', () => ({
   usePathname: () => '/',
 }))
 
-// Mock SaaS Factory Auth (optional - only if testing auth components)
-vi.mock('@digilogiclabs/saas-factory-auth', () => ({
+// Mock App SDK (optional - only if testing auth/payment components)
+vi.mock('@digilogiclabs/app-sdk', () => ({
   useAuth: () => ({
     user: null,
     loading: false,
@@ -26,18 +26,13 @@ vi.mock('@digilogiclabs/saas-factory-auth', () => ({
     signOut: vi.fn(),
     signInWithOAuth: vi.fn(),
   }),
-  AuthProvider: ({ children }: { children: React.ReactNode }) => children,
-}))
-
-// Mock SaaS Factory Payments (optional - only if testing payment components)
-vi.mock('@digilogiclabs/saas-factory-payments', () => ({
   usePayments: () => ({
     createCheckoutSession: vi.fn(),
     createPortalSession: vi.fn(),
     subscription: null,
     loading: false,
   }),
-  PaymentsProvider: ({ children }: { children: React.ReactNode }) => children,
+  DLLProvider: ({ children }: { children: React.ReactNode }) => children,
 }))
 
 // Global test utilities

package/src/templates/web/ui-auth-ai/template/package.json

@@ -9,8 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
-    "@digilogiclabs/saas-factory-auth": "^1.0.3",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/src/templates/web/ui-auth-payments/template/package.json

@@ -17,10 +17,8 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/platform-core": "^1.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.27.3",
-    "@digilogiclabs/saas-factory-auth": "^1.0.6",
-    "@digilogiclabs/saas-factory-payments": "^1.2.8",
+    "@digilogiclabs/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "stripe": "^14.0.0",
     "@stripe/react-stripe-js": "^2.0.0",
     "@stripe/stripe-js": "^2.0.0",

package/src/templates/web/ui-auth-payments/template/src/app/billing/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import React from 'react';
-import { usePayments, formatCurrency, formatDate } from '@digilogiclabs/saas-factory-payments';
+import { usePayments } from '@digilogiclabs/app-sdk';
+import { formatCurrency, formatDate } from '@/lib/utils';
 import { Button, Card } from '@digilogiclabs/saas-factory-ui';
 
 export default function BillingPage() {

package/src/templates/web/ui-auth-payments/template/src/app/checkout/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import React, { useState } from 'react';
-import { usePayments, formatCurrency } from '@digilogiclabs/saas-factory-payments';
+import { usePayments } from '@digilogiclabs/app-sdk';
+import { formatCurrency } from '@/lib/utils';
 import { 
   Button, 
   Card,

package/src/templates/web/ui-auth-payments/template/src/app/dev-setup/page.tsx

@@ -201,7 +201,7 @@ ${hasVideo ? '- **video_content**: Generated video files and metadata' : ''}
 
 ### Authentication Flow
 ${hasAuth ? `\`\`\`typescript
-import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useAuth } from '@digilogiclabs/app-sdk'
 
 export function ProtectedComponent() {
   const { user, loading } = useAuth()
@@ -237,10 +237,10 @@ export function ExampleComponent() {
 
 ${hasPayments ? `### Payment Integration
 \`\`\`typescript
-import { useStripe, PaymentForm } from '@digilogiclabs/saas-factory-payments'
+import { usePayments } from '@digilogiclabs/app-sdk'
 
 export function CheckoutPage() {
-  const { createCheckoutSession, loading } = useStripe()
+  const { createCheckoutSession, loading } = usePayments()
   
   const handlePayment = async (priceId: string) => {
     const { url } = await createCheckoutSession({ priceId })

package/src/templates/web/ui-auth-payments/template/src/app/login/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { useAuth } from '@digilogiclabs/app-sdk';
 import { useRouter } from 'next/navigation';
 
 export default function LoginPage() {

package/src/templates/web/ui-auth-payments/template/src/app/page.tsx

@@ -16,7 +16,7 @@ import {
   useOfflineState
 } from '@digilogiclabs/saas-factory-ui'
 import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Wifi, WifiOff, CreditCard, Smartphone } from 'lucide-react'
-import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useAuth } from '@digilogiclabs/app-sdk'
 import Link from 'next/link'
 import { useState } from 'react'