@digilogiclabs/create-saas-app 1.5.4 → 1.6.1

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

@@ -1,12 +1,30 @@
 'use client'
 
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User } from 'lucide-react'
+import { 
+  Button, 
+  Card,
+  PageTransition,
+  MobileContainer,
+  MobileHero,
+  ResponsiveGrid,
+  NetworkAwareContent,
+  OfflineWrapper,
+  SwipeableCard,
+  PullToRefresh,
+  LazyImage,
+  useNetworkInfo,
+  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 Link from 'next/link'
+import { useState } from 'react'
 
 export default function Home() {
   const { user, signOut, loading } = useAuth()
+  const networkInfo = useNetworkInfo()
+  const isOnline = useOfflineState()
+  const [isRefreshing, setIsRefreshing] = useState(false)
 
   const handleSignOut = async () => {
     try {
@@ -16,13 +34,52 @@ export default function Home() {
     }
   }
 
+  const handleRefresh = async () => {
+    setIsRefreshing(true)
+    // Simulate refresh
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    setIsRefreshing(false)
+  }
+
   return (
-    <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <div className="container mx-auto px-4 py-16">
-        {/* Auth Status Bar */}
-        <div className="flex justify-end mb-8">
+    <PageTransition type="fade" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="stale-while-revalidate"
+        showOfflineIndicator={true}
+        backgroundSync={true}
+      >
+        <PullToRefresh 
+          onRefresh={handleRefresh}
+          threshold={80}
+          loadingIndicator="spinner"
+          hapticOnTrigger={true}
+          networkAware={true}
+        >
+          <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+            <MobileContainer className="py-16">
+        {/* Network & Auth Status Bar */}
+        <div className="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
+          <div className="flex items-center gap-2 text-sm">
+            {isOnline ? (
+              <div className="flex items-center gap-2 text-green-600">
+                <Wifi className="w-4 h-4" />
+                <span>Online</span>
+                {networkInfo?.effectiveType && (
+                  <span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">
+                    {networkInfo.effectiveType.toUpperCase()}
+                  </span>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-red-600">
+                <WifiOff className="w-4 h-4" />
+                <span>Offline Mode</span>
+              </div>
+            )}
+          </div>
+
           {loading ? (
-            <div className="text-sm text-gray-600">Loading...</div>
+            <div className="text-sm text-gray-600">Loading auth...</div>
           ) : user ? (
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
@@ -47,75 +104,187 @@ export default function Home() {
         </div>
 
         {/* Hero Section */}
-        <div className="text-center mb-16">
-          <div className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 mb-6">
-            <CheckCircle className="w-4 h-4 mr-2" />
-            UI Package v0.7.3 + Auth v0.4.4 + Payments Integrated Successfully
-          </div>
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
-            Welcome to{' '}
-            <span className="text-blue-600 dark:text-blue-400">{{titleCaseName}}</span>
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-            {{description}}. This template uses the stable SaaS Factory UI package v0.7.3 with authentication v0.4.4 and payments integration.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link href="/checkout">
-              <Button size="lg" className="text-lg px-8">
-                View Pricing
-                <ArrowRight className="ml-2 h-5 w-5" />
-              </Button>
-            </Link>
-            <Button variant="outline" size="lg" className="text-lg px-8">
-              Learn More
-            </Button>
-          </div>
-        </div>
+        <MobileHero
+          badge={{
+            text: "UI Package v0.13.0 + Auth v1.0.0 + Payments - Mobile-First Ready",
+            variant: "secondary",
+            icon: CheckCircle
+          }}
+          title={{
+            text: "Welcome to {{titleCaseName}}",
+            highlight: "{{titleCaseName}}",
+            size: "xl"
+          }}
+          description="{{description}}. This mobile-optimized template uses SaaS Factory UI package v0.13.0 with cross-device authentication v1.0.0 and touch-friendly payments integration."
+          actions={[
+            {
+              label: "View Pricing",
+              href: "/checkout",
+              icon: CreditCard,
+              variant: "default",
+              size: "lg"
+            },
+            {
+              label: "Learn More",
+              variant: "outline",
+              size: "lg"
+            }
+          ]}
+          className="text-center mb-16"
+        />
 
         {/* Component Showcase */}
-        <div className="grid md:grid-cols-4 gap-8 mb-16">
-          <Card className="text-center p-6">
-            <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
-              <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-            </div>
-            <h3 className="text-xl font-semibold mb-2">UI Package Components</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Button and Card components from @digilogiclabs/saas-factory-ui
-            </p>
-          </Card>
+        <NetworkAwareContent
+          showOnSlow={
+            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="lg" className="mb-16">
+              <SwipeableCard
+                rightActions={[
+                  { 
+                    id: 'explore', 
+                    label: 'Explore', 
+                    onAction: () => console.log('Exploring mobile features'),
+                    color: 'blue'
+                  }
+                ]}
+                threshold={60}
+                hapticFeedback={true}
+                showActionLabels={true}
+              >
+                <Card className="text-center p-6">
+                  <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                    <Smartphone className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">Mobile-First UI</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Touch-optimized components from @digilogiclabs/saas-factory-ui v0.13.0
+                  </p>
+                </Card>
+              </SwipeableCard>
+              
+              <SwipeableCard
+                rightActions={[
+                  { 
+                    id: 'payments', 
+                    label: 'Try Payments', 
+                    onAction: () => window.location.href = '/checkout',
+                    color: 'green'
+                  }
+                ]}
+                threshold={60}
+                hapticFeedback={true}
+                showActionLabels={true}
+              >
+                <Card className="text-center p-6">
+                  <div className="mx-auto w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mb-4">
+                    <CreditCard className="h-6 w-6 text-orange-600 dark:text-orange-400" />
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">Touch Payments</h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Mobile-optimized payment flows with swipe gestures
+                  </p>
+                </Card>
+              </SwipeableCard>
+            </ResponsiveGrid>
+          }
+        >
+          <ResponsiveGrid columns={{ base: 1, sm: 2, md: 4 }} gap="lg" className="mb-16">
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'demo-ui', 
+                  label: 'Try Demo', 
+                  onAction: () => console.log('Demo UI components'),
+                  color: 'blue'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className="text-center p-6">
+                <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
+                  <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">Mobile UI Components</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Touch-optimized buttons, cards, and gestures from @digilogiclabs/saas-factory-ui v0.13.0
+                </p>
+              </Card>
+            </SwipeableCard>
 
-          <Card className="text-center p-6">
-            <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
-              <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
-            </div>
-            <h3 className="text-xl font-semibold mb-2">Authentication</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Secure user authentication with @digilogiclabs/saas-factory-auth
-            </p>
-          </Card>
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'auth-demo', 
+                  label: 'Auth Demo', 
+                  onAction: () => window.location.href = '/login',
+                  color: 'green'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className="text-center p-6">
+                <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
+                  <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">Cross-Device Auth</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Secure authentication across all devices with @digilogiclabs/saas-factory-auth v1.0.0
+                </p>
+              </Card>
+            </SwipeableCard>
 
-          <Card className="text-center p-6">
-            <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
-              <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <h3 className="text-xl font-semibold mb-2">TypeScript Ready</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Full type safety with enhanced component definitions
-            </p>
-          </Card>
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'performance', 
+                  label: 'See Performance', 
+                  onAction: () => console.log('Performance demo'),
+                  color: 'purple'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className="text-center p-6">
+                <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                  <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">Performance First</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Network-aware components with offline support and lazy loading
+                </p>
+              </Card>
+            </SwipeableCard>
 
-          <Card className="text-center p-6">
-            <div className="mx-auto w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mb-4">
-              <svg className="h-6 w-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-              </svg>
-            </div>
-            <h3 className="text-xl font-semibold mb-2">Payments Integration</h3>
-            <p className="text-gray-600 dark:text-gray-300">
-              Complete payment processing with @digilogiclabs/saas-factory-payments
-            </p>
-          </Card>
-        </div>
+            <SwipeableCard
+              rightActions={[
+                { 
+                  id: 'checkout', 
+                  label: 'View Checkout', 
+                  onAction: () => window.location.href = '/checkout',
+                  color: 'orange'
+                }
+              ]}
+              threshold={60}
+              hapticFeedback={true}
+              showActionLabels={true}
+            >
+              <Card className="text-center p-6">
+                <div className="mx-auto w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mb-4">
+                  <CreditCard className="h-6 w-6 text-orange-600 dark:text-orange-400" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">Mobile Payments</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Touch-optimized payment processing with @digilogiclabs/saas-factory-payments v1.0.0
+                </p>
+              </Card>
+            </SwipeableCard>
+          </ResponsiveGrid>
+        </NetworkAwareContent>
 
         {/* Button Variants Showcase */}
         <Card className="max-w-4xl mx-auto p-8">
@@ -133,11 +302,14 @@ export default function Home() {
           </div>
           <div className="text-center">
             <p className="text-sm text-gray-500">
-              All components from @digilogiclabs/saas-factory-ui v0.7.3 + auth v0.4.4 + payments
+              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.0 + auth v1.0.0 + payments v1.0.0
             </p>
           </div>
         </Card>
-      </div>
-    </main>
+            </MobileContainer>
+          </main>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
   )
 }

package/dist/templates/web/ui-auth-payments/template/src/components/shared/header.tsx

@@ -2,12 +2,21 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { LogOut, CreditCard } from 'lucide-react';
+import { LogOut, CreditCard, User, Settings, Home } from 'lucide-react';
 import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { 
+  ResponsiveHeader,
+  MobileNavigation,
+  HamburgerIcon,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
 import { ThemeToggle } from '../ui/theme-toggle';
 
 export function Header() {
   const { user, signOut } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
   
   const handleSignOut = async () => {
     try {
@@ -17,46 +26,103 @@ export function Header() {
     }
   };
 
+  const navigationItems = [
+    { 
+      label: 'Home', 
+      href: '/',
+      icon: Home,
+      protected: false 
+    },
+    { 
+      label: 'Dashboard', 
+      href: '/dashboard',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Billing', 
+      href: '/billing',
+      icon: CreditCard,
+      protected: true 
+    },
+    { 
+      label: 'Checkout', 
+      href: '/checkout',
+      icon: CreditCard,
+      protected: false 
+    },
+    { 
+      label: 'Settings', 
+      href: '/settings',
+      icon: Settings,
+      protected: true 
+    }
+  ];
+
+  const authActions = user ? [
+    {
+      label: 'Sign Out',
+      icon: LogOut,
+      onClick: handleSignOut,
+      variant: 'ghost' as const
+    }
+  ] : [
+    {
+      label: 'Login',
+      href: '/login',
+      variant: 'ghost' as const
+    },
+    {
+      label: 'Sign Up',
+      href: '/signup',
+      variant: 'default' as const
+    }
+  ];
+
   return (
-    <header className="bg-white dark:bg-gray-800 shadow-md">
-      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
-          {{titleCaseName}}
-        </Link>
-        <nav className="flex items-center gap-4">
-          <ThemeToggle />
-          {user ? (
-            <>
-              <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Dashboard
-              </Link>
-              <Link href="/billing" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                <CreditCard className="h-4 w-4" />
-                Billing
-              </Link>
-              <button 
-                onClick={handleSignOut}
-                className="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
-              >
-                <LogOut className="h-5 w-5" />
-              </button>
-            </>
-          ) : (
-            <>
-              <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Login
-              </Link>
-              <Link 
-                href="/signup"
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Sign Up
-              </Link>
-            </>
-          )}
-        </nav>
-      </div>
-    </header>
+    <>
+      {/* Network Status Banner */}
+      {!isOnline && (
+        <div className="bg-yellow-500 text-white text-center py-2 text-sm animate-pulse">
+          <span>⚠️ You're offline - Some features may be limited</span>
+        </div>
+      )}
+      
+      {/* Connection Quality Banner */}
+      {isOnline && networkInfo?.effectiveType === '2g' && (
+        <div className="bg-orange-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🐌 Slow connection detected - Optimized experience enabled • Reduced data usage • Cached content prioritized
+          </div>
+        </div>
+      )}
+
+      <ResponsiveHeader
+        logo={{
+          text: '{{titleCaseName}}',
+          href: '/',
+          className: 'text-2xl font-bold'
+        }}
+        navigationItems={navigationItems}
+        actions={authActions}
+        showThemeToggle={true}
+        user={user}
+        mobileBreakpoint="md"
+        className="bg-white dark:bg-gray-800 shadow-md"
+        hamburgerIcon={
+          <HamburgerIcon 
+            className="w-6 h-6 text-gray-600 dark:text-gray-300"
+            animated={true}
+            hapticFeedback={true}
+          />
+        }
+        networkStatus={{
+          isOnline,
+          connectionType: networkInfo?.effectiveType,
+          showIndicator: true
+        }}
+      />
+    </>
   );
 }
 

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} - Audio Player App (with UI Package v0.11.1 + Auth v1.0.0 + Payments)",
+  "description": "{{description}} - Audio Player App (with UI Package v0.13.0 + Auth v1.0.0 + Payments)",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -17,7 +17,7 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.11.1",
+    "@digilogiclabs/saas-factory-ui": "^0.13.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.0",
     "@digilogiclabs/saas-factory-payments": "^1.0.0",
     "stripe": "^14.0.0",