@digilogiclabs/create-saas-app 1.6.8 → 1.8.0

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

@@ -39,7 +39,7 @@ export default function Home() {
   
   const heroConfig = {
     badge: {
-      text: "UI Package v0.13.2 + Auth v1.0.0 - Cross-Device Ready",
+      text: "🔒 Secure & Modern",
       variant: "secondary" as const,
       icon: CheckCircle
     },
@@ -48,7 +48,7 @@ export default function Home() {
       highlight: projectName,
       size: "xl" as const
     },
-    description: `${projectDescription}. This mobile-optimized template uses SaaS Factory UI package v0.13.0 with cross-device authentication v1.0.0.`
+    description: `${projectDescription}. Built with modern authentication, responsive design, and seamless user experience across all devices.`
   }
 
   const handleSignOut = async () => {
@@ -158,7 +158,7 @@ export default function Home() {
                   </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.2
+                    Touch-optimized components from @digilogiclabs/saas-factory-ui v0.13.3
                   </p>
                 </Card>
               </SwipeableCard>
@@ -209,7 +209,7 @@ export default function Home() {
                 </div>
                 <h3 className="text-lg font-semibold mb-2">Touch UI Components</h3>
                 <p className="text-sm text-gray-600 dark:text-gray-300">
-                  Mobile-first buttons, cards, and gestures from @digilogiclabs/saas-factory-ui v0.13.2
+                  Mobile-first buttons, cards, and gestures from @digilogiclabs/saas-factory-ui v0.13.3
                 </p>
               </Card>
             </SwipeableCard>
@@ -280,7 +280,7 @@ export default function Home() {
           </div>
           <div className="text-center">
             <p className="text-sm text-gray-500">
-              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.2 + auth v1.0.0
+              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.3 + auth v1.0.0
             </p>
           </div>
         </Card>

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.13.2 + Auth v1.0.0 + Payments)",
+  "description": "{{description}} (with UI Package v0.15.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.13.2",
+    "@digilogiclabs/saas-factory-ui": "^0.15.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.0",
     "@digilogiclabs/saas-factory-payments": "^1.0.0",
     "stripe": "^14.0.0",

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

@@ -43,7 +43,7 @@ export default function Home() {
   
   const heroConfig = {
     badge: {
-      text: "UI Package v0.13.2 + Auth v1.0.0 + Payments - Mobile-First Ready",
+      text: "🚀 Complete SaaS Solution",
       variant: "secondary" as const,
       icon: CheckCircle
     },
@@ -52,7 +52,7 @@ export default function Home() {
       highlight: projectName,
       size: "xl" as const
     },
-    description: `${projectDescription}. This mobile-optimized template uses SaaS Factory UI package v0.13.0 with cross-device authentication v1.0.0 and touch-friendly payments integration.`
+    description: `${projectDescription}. Everything you need to launch your SaaS business with secure authentication, seamless payments, and beautiful mobile-first design.`
   }
 
   const handleSignOut = async () => {
@@ -177,7 +177,7 @@ export default function Home() {
                   </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.2
+                    Touch-optimized components from @digilogiclabs/saas-factory-ui v0.13.3
                   </p>
                 </Card>
               </SwipeableCard>
@@ -228,7 +228,7 @@ export default function Home() {
                 </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.2
+                  Touch-optimized buttons, cards, and gestures from @digilogiclabs/saas-factory-ui v0.13.3
                 </p>
               </Card>
             </SwipeableCard>
@@ -323,7 +323,7 @@ export default function Home() {
           </div>
           <div className="text-center">
             <p className="text-sm text-gray-500">
-              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.2 + auth v1.0.0 + payments v1.0.0
+              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.3 + auth v1.0.0 + payments v1.0.0
             </p>
           </div>
         </Card>

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.13.2 + Auth v1.0.0 + Payments)",
+  "description": "{{description}} - Professional Audio Platform (with UI Package v0.15.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.13.2",
+    "@digilogiclabs/saas-factory-ui": "^0.15.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.0",
     "@digilogiclabs/saas-factory-payments": "^1.0.0",
     "stripe": "^14.0.0",

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

@@ -13,7 +13,21 @@ import {
   SwipeableCard,
   PullToRefresh,
   useNetworkInfo,
-  useOfflineState
+  useOfflineState,
+  FixedAudioBar,
+  PlaylistCard,
+  TrackList,
+  WaveformVisualizer,
+  AudioControls,
+  VolumeSlider,
+  ProgressBar,
+  ShuffleButton,
+  RepeatButton,
+  LikeButton,
+  ShareButton,
+  PlaylistSidebar,
+  AudioSearch,
+  NowPlayingCard
 } from '@digilogiclabs/saas-factory-ui'
 import { ArrowRight, Zap, Shield, Rocket, CheckCircle, LogOut, User, Music, Wifi, WifiOff } from 'lucide-react'
 import { useAuth } from '@digilogiclabs/saas-factory-auth'
@@ -25,6 +39,9 @@ export default function Home() {
   const networkInfo = useNetworkInfo()
   const isOnline = useOfflineState()
   const [isRefreshing, setIsRefreshing] = useState(false)
+  const [currentTrack, setCurrentTrack] = useState(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [showPlaylistSidebar, setShowPlaylistSidebar] = useState(false)
   
   const projectName = "{{titleCaseName}}"
   const projectDescription = "{{description}}"
@@ -41,9 +58,53 @@ export default function Home() {
     columns_2_md4: { base: 2, md: 4 }
   }
   
+  // Demo playlist data
+  const demoPlaylist = [
+    {
+      id: '1',
+      title: 'Midnight Echoes',
+      artist: 'Luna Rivers',
+      album: 'Digital Dreams',
+      duration: 180,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM4QjVDRjYiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: false
+    },
+    {
+      id: '2',
+      title: 'Neon Nights',
+      artist: 'The Frequency',
+      album: 'Electric Pulse',
+      duration: 210,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNFRjQ0NDQiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: true
+    },
+    {
+      id: '3',
+      title: 'Ocean Waves',
+      artist: 'Ambient Flow',
+      album: 'Nature Sounds',
+      duration: 195,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMwNjkyQzUiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: false
+    },
+    {
+      id: '4',
+      title: 'City Lights',
+      artist: 'Urban Echo',
+      album: 'Metropolitan',
+      duration: 225,
+      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
+      coverArt: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNGNTk3MDAiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjIiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=',
+      liked: true
+    }
+  ]
+
   const heroConfig = {
     badge: {
-      text: "Audio Player App - UI Package v0.13.2 + Auth v1.0.0 + Payments Integrated Successfully",
+      text: "🎵 Premium Audio Experience",
       variant: "secondary" as const,
       icon: CheckCircle
     },
@@ -52,7 +113,7 @@ export default function Home() {
       highlight: projectName,
       size: "xl" as const
     },
-    description: `${projectDescription}. This mobile-optimized audio streaming app template uses SaaS Factory UI package v0.13.0 with touch-friendly audio player components, authentication v1.0.0 and payments integration.`
+    description: `${projectDescription}. Stream your favorite music with crystal-clear quality, offline downloads, and seamless playback across all your devices.`
   }
 
   const handleSignOut = async () => {
@@ -85,42 +146,24 @@ export default function Home() {
           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">
-        {/* Auth Status Bar with Network Info */}
-        <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</span>
-              </div>
-            )}
-          </div>
-          
-          {loading ? (
-            <div className="text-sm text-gray-600">Loading...</div>
-          ) : user ? (
+            <MobileContainer className="py-8">
+        {/* Simple Auth Status */}
+        {user && (
+          <div className="flex justify-end mb-8">
             <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
-                <User className="w-4 h-4" />
-                Welcome, {user.email}
-              </div>
+              <span className="text-sm text-gray-600 dark:text-gray-300">
+                Welcome, {user.email?.split('@')[0]}
+              </span>
               <Button variant="outline" size="sm" onClick={handleSignOut}>
                 <LogOut className="w-4 h-4 mr-2" />
                 Sign Out
               </Button>
             </div>
-          ) : (
+          </div>
+        )}
+        
+        {!user && !loading && (
+          <div className="flex justify-end mb-8">
             <div className="flex gap-2">
               <Link href="/login">
                 <Button variant="outline" size="sm">Sign In</Button>
@@ -129,10 +172,10 @@ export default function Home() {
                 <Button size="sm">Sign Up</Button>
               </Link>
             </div>
-          )}
-        </div>
+          </div>
+        )}
 
-        {/* Hero Section */}
+        {/* Hero Section with Search */}
         <MobileHero
           badge={heroConfig.badge}
           title={heroConfig.title}
@@ -151,131 +194,99 @@ export default function Home() {
               size: "lg"
             }
           ]}
-          className="text-center mb-16"
+          className="text-center mb-8"
         />
 
-        {/* Audio Player Showcase */}
-        <NetworkAwareContent
-          showOnSlow={
-            <div className="max-w-4xl mx-auto mb-16">
-              <Card className="p-6">
-                <div className="text-center mb-6">
-                  <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-4">
-                    <Music className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-                  </div>
-                  <h2 className="text-xl font-bold mb-2">Mobile Audio Player</h2>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">
-                    Optimized for slower connections
-                  </p>
-                </div>
-                <AudioPlayer
-                  playlist={[
-                    {
-                      id: '1',
-                      title: 'Sample Audio Track',
-                      artist: 'Demo Artist',
-                      album: 'Demo Album',
-                      duration: 180,
-                      url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-                      coverArt: 'https://via.placeholder.com/150x150?text=Demo'
-                    }
-                  ]}
-                  mobileOptimized={true}
-                  touchFriendly={true}
-                  showMinimalUI={true}
-                  className="max-w-lg mx-auto"
-                />
-              </Card>
-            </div>
-          }
-        >
-          <SwipeableCard
-            leftActions={[
-              { 
-                id: 'previous', 
-                label: 'Previous', 
-                onAction: () => console.log('Previous track'),
-                color: 'blue',
-                icon: Music
-              }
-            ]}
-            rightActions={[
-              { 
-                id: 'next', 
-                label: 'Next', 
-                onAction: () => console.log('Next track'),
-                color: 'green',
-                icon: Music
-              }
-            ]}
-            threshold={60}
-            hapticFeedback={true}
-            showActionLabels={true}
-            className="max-w-4xl mx-auto mb-16"
-          >
-            <Card className="p-8">
-              <div className="text-center mb-8">
-                <div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-4">
-                  <Music className="h-8 w-8 text-purple-600 dark:text-purple-400" />
-                </div>
-                <h2 className="text-3xl font-bold mb-4">Touch-Optimized Audio Player</h2>
-                <p className="text-gray-600 dark:text-gray-300 mb-2">
-                  Experience our feature-rich audio player with playlist support, touch gestures, and mobile-first design
-                </p>
-                <p className="text-sm text-gray-500">
-                  Swipe left/right to change tracks • Pull down to refresh
-                </p>
-              </div>
-              <AudioPlayer
-                playlist={[
-                  {
-                    id: '1',
-                    title: 'Sample Audio Track',
-                    artist: 'Demo Artist',
-                    album: 'Demo Album',
-                    duration: 180,
-                    url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-                    coverArt: 'https://via.placeholder.com/300x300?text=Demo+Track'
-                  },
-                  {
-                    id: '2',
-                    title: 'Another Great Song',
-                    artist: 'Sample Band',
-                    album: 'Greatest Hits',
-                    duration: 210,
-                    url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-                    coverArt: 'https://via.placeholder.com/300x300?text=Track+2'
-                  },
-                  {
-                    id: '3',
-                    title: 'Mobile Optimized Track',
-                    artist: 'Touch Artist',
-                    album: 'Mobile Collection',
-                    duration: 195,
-                    url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3',
-                    coverArt: 'https://via.placeholder.com/300x300?text=Track+3'
-                  }
-                ]}
-                mobileOptimized={true}
-                touchFriendly={true}
-                hapticFeedback={true}
-                offlineSupport={true}
-                networkAware={true}
-                className="max-w-2xl mx-auto"
+        {/* Search Bar */}
+        <div className="max-w-2xl mx-auto mb-12">
+          <AudioSearch
+            placeholder="Search for tracks, artists, or albums..."
+            onSearch={(query) => console.log('Searching:', query)}
+            showTrending={true}
+            recentSearches={['Luna Rivers', 'Ambient Flow', 'Electronic']}
+            className="w-full"
+          />
+        </div>
+
+        {/* Main Content Area */}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-20">
+          {/* Main Content */}
+          <div className="lg:col-span-3 space-y-8">
+            {/* Now Playing Card */}
+            <NowPlayingCard
+              track={currentTrack || demoPlaylist[0]}
+              isPlaying={isPlaying}
+              onPlayPause={() => setIsPlaying(!isPlaying)}
+              showWaveform={true}
+              className="mb-8"
+            />
+
+            {/* Featured Playlists */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+              <PlaylistCard
+                title="Today's Top Hits"
+                description="The most played songs today"
+                trackCount={50}
+                coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNGRjc4NzgiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
+                onClick={() => console.log('Opening Top Hits playlist')}
+              />
+              <PlaylistCard
+                title="Chill Vibes"
+                description="Relaxing music for focus and creativity"
+                trackCount={32}
+                coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM2MEE1RkEiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
+                onClick={() => console.log('Opening Chill Vibes playlist')}
               />
-            </Card>
-          </SwipeableCard>
-        </NetworkAwareContent>
+              <PlaylistCard
+                title="Electronic Pulse"
+                description="High-energy electronic and dance music"
+                trackCount={28}
+                coverImage="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiM5QzI3QjAiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNTAiIHI9IjYwIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJNMTMwIDEyMFYxODBMMTcwIDE1MEwxMzAgMTIwWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="
+                onClick={() => console.log('Opening Electronic Pulse playlist')}
+              />
+            </div>
+
+            {/* Track List */}
+            <TrackList
+              tracks={demoPlaylist}
+              currentTrackId={currentTrack?.id}
+              onTrackSelect={(track) => setCurrentTrack(track)}
+              onTrackPlay={(track) => {
+                setCurrentTrack(track)
+                setIsPlaying(true)
+              }}
+              showArtwork={true}
+              showDuration={true}
+              showLikeButton={true}
+              className="mb-8"
+            />
+          </div>
+
+          {/* Sidebar */}
+          <div className="lg:col-span-1">
+            <PlaylistSidebar
+              playlists={[
+                { id: '1', name: 'Liked Songs', trackCount: 47 },
+                { id: '2', name: 'Recently Played', trackCount: 23 },
+                { id: '3', name: 'My Playlist #1', trackCount: 15 },
+                { id: '4', name: 'Favorites', trackCount: 32 }
+              ]}
+              onPlaylistSelect={(playlist) => console.log('Selected playlist:', playlist)}
+              currentPlaylistId="1"
+              className="sticky top-4"
+            />
+          </div>
+        </div>
 
-        {/* Component Showcase */}
+        {/* Features Overview */}
         <ResponsiveGrid columns={gridConfig.columns_1_sm2_md4} gap="lg" className="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-lg font-semibold mb-2">Mobile Audio UI</h3>
+            <h3 className="text-lg font-semibold mb-2">High-Quality Streaming</h3>
             <p className="text-sm text-gray-600 dark:text-gray-300">
-              Touch-friendly Audio Player with haptic feedback from @digilogiclabs/saas-factory-ui v0.13.2
+              Lossless audio with adaptive bitrate for the best experience
             </p>
           </Card>
 
@@ -283,9 +294,9 @@ export default function Home() {
             <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>
+            <h3 className="text-lg font-semibold mb-2">Secure & Private</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
+              Your listening habits and data are always protected
             </p>
           </Card>
 
@@ -293,9 +304,9 @@ export default function Home() {
             <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>
+            <h3 className="text-lg font-semibold mb-2">Offline Support</h3>
             <p className="text-sm text-gray-600 dark:text-gray-300">
-              Network-aware components with offline support and lazy loading
+              Download your favorites for offline listening anywhere
             </p>
           </Card>
 
@@ -305,37 +316,41 @@ export default function Home() {
                 <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-lg font-semibold mb-2">Mobile Payments</h3>
+            <h3 className="text-lg font-semibold mb-2">Premium Plans</h3>
             <p className="text-sm text-gray-600 dark:text-gray-300">
-              Touch-optimized payment flows with @digilogiclabs/saas-factory-payments v1.0.0
+              Flexible subscription options for every music lover
             </p>
           </Card>
         </ResponsiveGrid>
-
-        {/* Button Variants Showcase */}
-        <Card className="max-w-4xl mx-auto p-8">
-          <div className="text-center mb-6">
-            <h2 className="text-2xl font-bold mb-2">Full SaaS Package Integration</h2>
-            <p className="text-gray-600 dark:text-gray-300">
-              Complete integration of UI, Auth, and Payments packages
-            </p>
-          </div>
-          <div className="flex flex-wrap justify-center gap-4 mb-6">
-            <Button>Default Button</Button>
-            <Button variant="secondary">Secondary Button</Button>
-            <Button variant="outline">Outline Button</Button>
-            <Button disabled>Disabled Button</Button>
-          </div>
-          <div className="text-center">
-            <p className="text-sm text-gray-500">
-              All mobile-optimized components from @digilogiclabs/saas-factory-ui v0.13.2 + auth v1.0.0 + payments
-            </p>
-          </div>
-        </Card>
             </MobileContainer>
           </main>
         </PullToRefresh>
       </OfflineWrapper>
+
+      {/* Fixed Audio Player Bar - The SoundCloud Experience */}
+      <FixedAudioBar
+        track={currentTrack || demoPlaylist[0]}
+        isPlaying={isPlaying}
+        onPlayPause={() => setIsPlaying(!isPlaying)}
+        onNext={() => {
+          const currentIndex = demoPlaylist.findIndex(track => track.id === (currentTrack?.id || demoPlaylist[0].id))
+          const nextIndex = (currentIndex + 1) % demoPlaylist.length
+          setCurrentTrack(demoPlaylist[nextIndex])
+        }}
+        onPrevious={() => {
+          const currentIndex = demoPlaylist.findIndex(track => track.id === (currentTrack?.id || demoPlaylist[0].id))
+          const prevIndex = (currentIndex - 1 + demoPlaylist.length) % demoPlaylist.length
+          setCurrentTrack(demoPlaylist[prevIndex])
+        }}
+        showWaveform={true}
+        showVolumeControl={true}
+        showTimeProgress={true}
+        showLikeButton={true}
+        showShareButton={true}
+        showShuffleRepeat={true}
+        allowMinimize={true}
+        className="z-50"
+      />
     </PageTransition>
   )
 }

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} - Video Player App (with UI Package v0.13.2 + Auth v1.0.0 + Payments)",
+  "description": "{{description}} - Professional Video Platform (with UI Package v0.15.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.13.2",
+    "@digilogiclabs/saas-factory-ui": "^0.15.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.0",
     "@digilogiclabs/saas-factory-payments": "^1.0.0",
     "stripe": "^14.0.0",