@digilogiclabs/create-saas-app 2.3.0 → 2.4.0

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Button, Card, PulseIndicator } from '@digilogiclabs/saas-factory-ui'
 import { Cpu, Activity, Signal, Bell, AlertTriangle, CheckCircle, Clock, ThermometerSun, Gauge, Wifi, Plus } from 'lucide-react'
 import Link from 'next/link'
 
@@ -202,16 +202,11 @@ export default function DashboardPage() {
                     </td>
                     <td className="py-3 px-4 text-slate-600 dark:text-slate-400">{device.type}</td>
                     <td className="py-3 px-4">
-                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
-                        device.status === 'online'
-                          ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                          : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-                      }`}>
-                        <span className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
-                          device.status === 'online' ? 'bg-green-500' : 'bg-red-500'
-                        }`} />
-                        {device.status}
-                      </span>
+                      <PulseIndicator
+                        status={device.status === 'online' ? 'success' : 'error'}
+                        label={device.status}
+                        size="sm"
+                      />
                     </td>
                     <td className="py-3 px-4 text-slate-600 dark:text-slate-400 flex items-center">
                       <Clock className="w-3 h-3 mr-1" />

package/src/templates/web/iot-dashboard/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-slate-900 dark:text-white mb-2">
+              Something went wrong!
+            </h1>
+            <p className="text-slate-600 dark:text-slate-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-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">
+                  Error details (development only)
+                </summary>
+                <div className="mt-2 p-3 bg-slate-100 dark:bg-slate-800 rounded text-xs font-mono text-slate-700 dark:text-slate-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 bg-emerald-600 hover:bg-emerald-700" 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/iot-dashboard/template/src/app/loading.tsx

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

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,11 @@
     "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,10 @@
     "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/package.json

@@ -17,8 +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/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",

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

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

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

@@ -17,8 +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/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "@digilogiclabs/saas-factory-payments": "^1.2.8",
     "stripe": "^14.0.0",

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

@@ -17,8 +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/platform-core": "^1.13.0",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.6",
     "@digilogiclabs/saas-factory-payments": "^1.2.8",
     "@digilogiclabs/saas-factory-ai": "^4.0.4",

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

@@ -22,7 +22,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.3",
     "@digilogiclabs/saas-factory-payments": "^1.2.3",
     "@digilogiclabs/saas-factory-ai": "^4.0.2",

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

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.3",
     "@digilogiclabs/saas-factory-payments": "^1.2.3",
     "stripe": "^14.0.0",

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

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.3",
     "@digilogiclabs/saas-factory-payments": "^1.2.3",
     "stripe": "^14.0.0",

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

@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

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

@@ -14,7 +14,7 @@
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@digilogiclabs/saas-factory-ui": "^0.26.1",
+    "@digilogiclabs/saas-factory-ui": "^1.4.0",
     "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",