@digilogiclabs/create-saas-app 1.9.0 → 1.9.1

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

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

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.16.1)",
+  "description": "{{description}} (with UI Package v0.18.0)",
   "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.16.1",
+    "@digilogiclabs/saas-factory-ui": "^0.18.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.16.1)",
+  "description": "{{description}} (with UI Package v0.18.0)",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,7 +14,7 @@
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@digilogiclabs/saas-factory-ui": "^0.16.1",
+    "@digilogiclabs/saas-factory-ui": "^0.18.0",
     "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Create modern SaaS applications with Digi Logic Labs packages",
   "main": "dist/cli/index.js",
   "bin": {

package/src/templates/mobile/base/template/package.json

@@ -22,7 +22,7 @@
     "react-native-screens": "~3.22.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-gesture-handler": "~2.12.0",
-    "@digilogiclabs/saas-factory-ui": "^0.16.1",
+    "@digilogiclabs/saas-factory-ui": "^0.18.0",
     "@digilogiclabs/saas-factory-auth": "^0.4.3",
     "@digilogiclabs/saas-factory-payments": "^0.2.0",
     "firebase": "^10.0.0",

package/src/templates/web/base/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.16.1",
+    "@digilogiclabs/saas-factory-ui": "^0.18.0",
     "@digilogiclabs/saas-factory-auth": "^0.4.3",
     "@digilogiclabs/saas-factory-payments": "^0.2.0",
     "tailwindcss": "^3.3.0",

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.16.1 + Auth v1.0.0)",
+  "description": "{{description}} (with UI Package v0.18.0 + Auth v1.0.0)",
   "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.16.1",
+    "@digilogiclabs/saas-factory-ui": "^0.18.0",
     "@digilogiclabs/saas-factory-auth": "^1.0.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",

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

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

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

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

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

@@ -27,7 +27,9 @@ import {
   ShareButton,
   PlaylistSidebar,
   AudioSearch,
-  NowPlayingCard
+  NowPlayingCard,
+  useAnimationTokens,
+  useGlassmorphism
 } 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'
@@ -43,6 +45,10 @@ export default function Home() {
   const [isPlaying, setIsPlaying] = useState(false)
   const [showPlaylistSidebar, setShowPlaylistSidebar] = useState(false)
   
+  // Modern design tokens
+  const animations = useAnimationTokens()
+  const glass = useGlassmorphism()
+  
   const projectName = "{{titleCaseName}}"
   const projectDescription = "{{description}}"
   
@@ -145,7 +151,10 @@ export default function Home() {
           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">
+          <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
+            {/* Glassmorphism background overlay */}
+            <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+            <div className="relative z-10">
             <MobileContainer className="py-8">
         {/* Simple Auth Status */}
         {user && (
@@ -197,122 +206,139 @@ export default function Home() {
           className="text-center mb-8"
         />
 
-        {/* Search Bar */}
+        {/* Search Bar with Glassmorphism */}
         <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 className={`${glass.card} ${glass.border} p-1 rounded-2xl ${animations.hover.lift}`}>
+            <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 bg-transparent border-none"
+            />
+          </div>
         </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"
-            />
+            {/* Now Playing Card with Enhanced Glassmorphism */}
+            <div className={`${glass.card} ${glass.border} rounded-3xl p-6 mb-8 ${animations.hover.lift} ${animations.transition.smooth}`}>
+              <NowPlayingCard
+                track={currentTrack || demoPlaylist[0]}
+                isPlaying={isPlaying}
+                onPlayPause={() => setIsPlaying(!isPlaying)}
+                showWaveform={true}
+                className="bg-transparent"
+              />
+            </div>
 
-            {/* Featured Playlists */}
+            {/* Featured Playlists with Staggered Animation */}
             <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')}
-              />
-              <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 className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}`}>
+                <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')}
+                  className="bg-transparent border-none"
+                />
+              </div>
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}`}>
+                <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')}
+                  className="bg-transparent border-none"
+                />
+              </div>
+              <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}`}>
+                <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')}
+                  className="bg-transparent border-none"
+                />
+              </div>
             </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"
-            />
+            {/* Track List with Glassmorphism */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.transition.smooth}`}>
+              <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 bg-transparent"
+              />
+            </div>
           </div>
 
-          {/* Sidebar */}
+          {/* Sidebar with Glassmorphism */}
           <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 className={`${glass.card} ${glass.border} rounded-2xl overflow-hidden ${animations.hover.lift} ${animations.transition.smooth}`}>
+              <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 bg-transparent"
+              />
+            </div>
           </div>
         </div>
 
-        {/* Features Overview */}
+        {/* Features Overview with Enhanced Glassmorphism */}
         <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 className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.short}`}>
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+              <Zap className="h-6 w-6 text-blue-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">High-Quality Streaming</h3>
             <p className="text-sm text-gray-600 dark:text-gray-300">
               Lossless audio with adaptive bitrate for the best experience
             </p>
-          </Card>
+          </div>
 
-          <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 className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.medium}`}>
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+              <Shield className="h-6 w-6 text-green-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">Secure & Private</h3>
             <p className="text-sm text-gray-600 dark:text-gray-300">
               Your listening habits and data are always protected
             </p>
-          </Card>
+          </div>
 
-          <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 className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.long}`}>
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+              <Rocket className="h-6 w-6 text-purple-400" />
             </div>
             <h3 className="text-lg font-semibold mb-2">Offline Support</h3>
             <p className="text-sm text-gray-600 dark:text-gray-300">
               Download your favorites for offline listening anywhere
             </p>
-          </Card>
+          </div>
 
-          <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">
+          <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth} ${animations.delay.extra}`}>
+            <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+              <svg className="h-6 w-6 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>
@@ -320,37 +346,40 @@ export default function Home() {
             <p className="text-sm text-gray-600 dark:text-gray-300">
               Flexible subscription options for every music lover
             </p>
-          </Card>
+          </div>
         </ResponsiveGrid>
             </MobileContainer>
+            </div>
           </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"
-      />
+      {/* Fixed Audio Player Bar with Enhanced Glassmorphism */}
+      <div className={`fixed bottom-0 left-0 right-0 z-50 ${glass.card} ${glass.border} border-t backdrop-blur-xl`}>
+        <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="bg-transparent"
+        />
+      </div>
     </PageTransition>
   )
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.16.1)",
+  "description": "{{description}} (with UI Package v0.18.0)",
   "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.16.1",
+    "@digilogiclabs/saas-factory-ui": "^0.18.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

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

@@ -1,7 +1,7 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
-  "description": "{{description}} (with UI Package v0.16.1)",
+  "description": "{{description}} (with UI Package v0.18.0)",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,7 +14,7 @@
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@digilogiclabs/saas-factory-ui": "^0.16.1",
+    "@digilogiclabs/saas-factory-ui": "^0.18.0",
     "tailwindcss": "^3.4.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

package/dist/cli/commands/add.d.ts

@@ -1,6 +0,0 @@
-interface AddOptions {
-    provider?: string;
-}
-export declare function addFeature(feature: string, _options?: AddOptions): Promise<void>;
-export {};
-//# sourceMappingURL=add.d.ts.map

package/dist/cli/commands/add.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/add.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAsB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAE,UAAe,iBAqC1E"}

package/dist/cli/commands/add.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addFeature = addFeature;
-const logger_1 = require("../utils/logger");
-const spinner_1 = require("../utils/spinner");
-async function addFeature(feature, _options = {}) {
-    try {
-        logger_1.logger.title(`Adding ${feature} feature`);
-        const validFeatures = [
-            'auth',
-            'billing',
-            'analytics',
-            'teams',
-            'notifications',
-            'admin',
-            'api',
-            'docs',
-        ];
-        if (!validFeatures.includes(feature)) {
-            logger_1.logger.error(`Invalid feature: ${feature}`);
-            logger_1.logger.info('Available features:');
-            logger_1.logger.list(validFeatures);
-            process.exit(1);
-        }
-        const addSpinner = (0, spinner_1.spinner)(`Adding ${feature} feature...`);
-        // Simulate feature addition (placeholder for now)
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-        addSpinner.succeed(`${feature} feature added successfully`);
-        logger_1.logger.newLine();
-        logger_1.logger.success('Feature added successfully!');
-        logger_1.logger.info("Don't forget to update your environment variables if needed.");
-    }
-    catch (error) {
-        logger_1.logger.error('Failed to add feature:');
-        logger_1.logger.error(error instanceof Error ? error.message : String(error));
-        process.exit(1);
-    }
-}
-//# sourceMappingURL=add.js.map

package/dist/cli/commands/add.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"add.js","sourceRoot":"","sources":["../../../src/cli/commands/add.ts"],"names":[],"mappings":";;AAOA,gCAqCC;AA5CD,4CAAyC;AACzC,8CAA2C;AAMpC,KAAK,UAAU,UAAU,CAAC,OAAe,EAAE,WAAuB,EAAE;IACzE,IAAI,CAAC;QACH,eAAM,CAAC,KAAK,CAAC,UAAU,OAAO,UAAU,CAAC,CAAC;QAE1C,MAAM,aAAa,GAAG;YACpB,MAAM;YACN,SAAS;YACT,WAAW;YACX,OAAO;YACP,eAAe;YACf,OAAO;YACP,KAAK;YACL,MAAM;SACP,CAAC;QAEF,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YACrC,eAAM,CAAC,KAAK,CAAC,oBAAoB,OAAO,EAAE,CAAC,CAAC;YAC5C,eAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YACnC,eAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;QAED,MAAM,UAAU,GAAG,IAAA,iBAAO,EAAC,UAAU,OAAO,aAAa,CAAC,CAAC;QAE3D,kDAAkD;QAClD,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;QAE1D,UAAU,CAAC,OAAO,CAAC,GAAG,OAAO,6BAA6B,CAAC,CAAC;QAE5D,eAAM,CAAC,OAAO,EAAE,CAAC;QACjB,eAAM,CAAC,OAAO,CAAC,6BAA6B,CAAC,CAAC;QAC9C,eAAM,CAAC,IAAI,CAAC,8DAA8D,CAAC,CAAC;IAC9E,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,eAAM,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;QACvC,eAAM,CAAC,KAAK,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACrE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;AACH,CAAC"}

package/dist/cli/commands/create.d.ts

@@ -1,28 +0,0 @@
-interface CreateOptions {
-    auth?: string;
-    database?: string;
-    theme?: string;
-    themeColor?: string;
-    defaultTheme?: string;
-    install?: boolean;
-    git?: boolean;
-    yes?: boolean;
-}
-export interface ProjectConfig {
-    platform: 'web' | 'mobile' | 'both';
-    template: string;
-    name: string;
-    auth: 'firebase' | 'supabase';
-    database: 'supabase' | 'firebase';
-    theme: 'default' | 'corporate' | 'startup';
-    themeColor: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'slate';
-    defaultTheme: 'light' | 'dark' | 'system';
-    install: boolean;
-    git: boolean;
-}
-export declare function createProject(platform: string, template?: string, name?: string, options?: CreateOptions & {
-    themeColor?: string;
-    defaultTheme?: string;
-}): Promise<void>;
-export {};
-//# sourceMappingURL=create.d.ts.map

package/dist/cli/commands/create.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/create.ts"],"names":[],"mappings":"AAUA,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9B,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;IACrE,YAAY,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1C,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,OAAO,CAAC;CACd;AAED,wBAAsB,aAAa,CACjC,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,MAAM,EACjB,IAAI,CAAC,EAAE,MAAM,EACb,OAAO,GAAE,aAAa,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAO,iBA+H7E"}