@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/ui-auth-payments/template/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})

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

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}",
+  "description": "{{description}} - Full-Stack AI Platform built with Digi Logic Labs packages",
+  "include": [
+    "src/**/*",
+    "*.md",
+    "*.json",
+    "*.js",
+    "*.ts",
+    ".env.example"
+  ],
+  "exclude": [
+    "node_modules/**/*",
+    ".next/**/*",
+    "dist/**/*",
+    "build/**/*",
+    "*.log",
+    ".claude"
+  ],
+  "instructions": "You are helping develop a Full-Stack AI Platform using Next.js 15, TypeScript, and Digi Logic Labs packages.\n\n## Project Architecture\n- **Framework**: Next.js 15.3 with App Router\n- **Database**: Supabase (PostgreSQL with real-time features)\n- **Styling**: Tailwind CSS v4 with glassmorphism design system\n- **Authentication**: Supabase Auth with @digilogiclabs/saas-factory-auth\n- **Payments**: Stripe integration with @digilogiclabs/saas-factory-payments\n- **AI Platform**: Multi-modal AI with @digilogiclabs/saas-factory-ai\n\n## Key Packages\n- **@digilogiclabs/saas-factory-auth**: Authentication components and hooks with Supabase integration\n- **@digilogiclabs/saas-factory-ui**: Modern UI components with glassmorphism and responsive design\n- **@digilogiclabs/saas-factory-payments**: Stripe integration for subscriptions and payments\n- **@digilogiclabs/saas-factory-ai**: AI platform with text, audio, and video generation capabilities\n- **@digilogiclabs/saas-factory-ai-types**: TypeScript types and interfaces for AI operations\n\n## Development Guidelines\n1. Follow Next.js 15 best practices with Server Components by default\n2. Use TypeScript strictly - all components should be typed\n3. Implement proper error boundaries and loading states\n4. Follow the glassmorphism design system from saas-factory-ui\n5. Use Server Actions for mutations and API routes for complex logic\n6. Always check authentication state with useAuth hook\n7. Handle payment states and subscription status properly\n8. Implement proper AI generation state management and error handling\n\n## File Organization\n- Components in /src/components with feature-based folders\n- Server actions in /src/server/actions\n- API routes in /src/app/api\n- Database queries in /src/server/queries\n- Types in /src/types\n\n## Testing\n- Use Vitest for unit tests\n- Test business logic and error states\n- Mock external services (Supabase, Stripe, AI providers)\n\nRemember to consult the context.md file for detailed package documentation and examples."
+}

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

@@ -0,0 +1,60 @@
+# ═══════════════════════════════════════════════════════════════
+# Auth Configuration
+# ═══════════════════════════════════════════════════════════════
+NEXT_PUBLIC_AUTH_PROVIDER=supabase|firebase
+
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+SUPABASE_SERVICE_ROLE_KEY=
+
+# Firebase
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+
+# ═══════════════════════════════════════════════════════════════
+# Payments (Stripe)
+# ═══════════════════════════════════════════════════════════════
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+
+# ═══════════════════════════════════════════════════════════════
+# AI Providers
+# ═══════════════════════════════════════════════════════════════
+OPENAI_API_KEY=
+ANTHROPIC_API_KEY=
+GOOGLE_AI_API_KEY=
+ELEVENLABS_API_KEY=
+REPLICATE_API_TOKEN=
+
+# ═══════════════════════════════════════════════════════════════
+# Platform Core - Infrastructure Services (Optional)
+# Configure these for production. Memory adapters used if not set.
+# ═══════════════════════════════════════════════════════════════
+
+# Cache (Upstash Redis - great for AI response caching)
+UPSTASH_REDIS_REST_URL=
+UPSTASH_REDIS_REST_TOKEN=
+
+# Storage (S3-compatible: AWS S3, MinIO, Cloudflare R2)
+S3_ENDPOINT=
+S3_REGION=
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+S3_BUCKET=
+
+# Email (Resend)
+RESEND_API_KEY=
+EMAIL_FROM=noreply@example.com
+
+# Queue (BullMQ - for AI background processing)
+REDIS_URL=redis://localhost:6379
+
+# ═══════════════════════════════════════════════════════════════
+# Application
+# ═══════════════════════════════════════════════════════════════
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+NEXT_PUBLIC_APP_NAME={{titleCaseName}}
+NODE_ENV=development

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

@@ -0,0 +1,207 @@
+# {{titleCaseName}}
+
+{{description}}
+
+This is a Next.js 15 project created with the **Audio Player App** template from `@digilogiclabs/create-saas-app`. It includes:
+
+- 🎵 **Audio Player** - Advanced audio streaming capabilities
+- 🎨 **UI Components** - @digilogiclabs/saas-factory-ui v0.16.0 with audio player
+- 🔐 **Authentication** - @digilogiclabs/saas-factory-auth v0.4.4  
+- 💳 **Payments** - @digilogiclabs/saas-factory-payments v0.3.0
+- ⚡ **Next.js 15** - Latest React framework
+- 🎯 **TypeScript** - Full type safety
+- 🎨 **Tailwind CSS** - Utility-first styling
+- 🌙 **Dark Mode** - Built-in theme support
+
+## Features
+
+### Audio Player
+- Full-featured audio player with playlist support
+- Play/pause, skip, shuffle, repeat controls
+- Volume control and mute functionality  
+- Progress bar with seeking capability
+- Track information display with cover art
+- Cross-platform support (Web + React Native)
+
+### Authentication
+- User registration and login
+- Protected routes
+- Session management
+- Sign out functionality
+
+### Payments Integration
+- Subscription plans display
+- Payment form with Stripe integration
+- Billing history
+- Payment method management
+- Subscription management
+
+### UI Components
+- Modern, accessible components including AudioPlayer
+- Dark/light theme support
+- Responsive design
+- TypeScript definitions
+
+## Getting Started
+
+### Prerequisites
+- Node.js 18+ 
+- npm, yarn, or pnpm
+
+### Installation
+
+1. Install dependencies:
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
+
+2. Set up environment variables:
+```bash
+cp .env.example .env.local
+```
+
+Edit `.env.local` with your configuration:
+```env
+# Authentication (choose one)
+NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
+
+# OR
+
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+
+# Payments
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
+STRIPE_SECRET_KEY=your_stripe_secret_key
+```
+
+3. Run the development server:
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Available Pages
+
+- `/` - Home page with feature showcase
+- `/login` - User authentication
+- `/signup` - User registration  
+- `/checkout` - Subscription plans and payment
+- `/billing` - Subscription and billing management
+
+## Package Integration
+
+### UI Package (@digilogiclabs/saas-factory-ui)
+```tsx
+import { Button, Card, AudioPlayer } from '@digilogiclabs/saas-factory-ui'
+
+<Button variant="primary">Click me</Button>
+<Card>Content here</Card>
+<AudioPlayer 
+  tracks={[
+    {
+      id: '1',
+      title: 'Song Title',
+      artist: 'Artist Name',
+      album: 'Album Name',
+      duration: 180,
+      src: '/path/to/audio.mp3',
+      coverArt: '/path/to/cover.jpg'
+    }
+  ]}
+/>
+```
+
+### Auth Package (@digilogiclabs/saas-factory-auth)
+```tsx
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+
+const { user, signIn, signOut, loading } = useAuth()
+```
+
+### Payments Package (@digilogiclabs/saas-factory-payments)
+```tsx
+import { 
+  PaymentForm, 
+  SubscriptionPlans, 
+  SubscriptionManager 
+} from '@digilogiclabs/saas-factory-payments'
+
+<SubscriptionPlans onPlanSelect={handlePlanSelect} />
+<PaymentForm onSuccess={handleSuccess} onError={handleError} />
+<SubscriptionManager onSubscriptionChange={handleChange} />
+```
+
+## Project Structure
+
+```
+src/
+├── app/                    # Next.js 15 app directory
+│   ├── billing/           # Billing and subscription management
+│   ├── checkout/          # Payment and subscription selection
+│   ├── login/             # Authentication pages
+│   ├── signup/            
+│   └── layout.tsx         # Root layout with providers
+├── components/
+│   ├── providers/         # App-wide providers (Auth, Payments, Theme)
+│   ├── shared/            # Shared components (Header, etc.)
+│   └── ui/                # UI components
+└── lib/                   # Utilities and configurations
+```
+
+## Deployment
+
+### Vercel (Recommended)
+1. Push your code to GitHub
+2. Connect your repository to Vercel
+3. Add environment variables in Vercel dashboard
+4. Deploy
+
+### Other Platforms
+This is a standard Next.js application and can be deployed to any platform that supports Node.js.
+
+## Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Digi Logic Labs Documentation](https://docs.digilogiclabs.com)
+- [SaaS Factory UI Components](https://ui.digilogiclabs.com)
+- [SaaS Factory Auth Guide](https://auth.digilogiclabs.com)
+- [SaaS Factory Payments Guide](https://payments.digilogiclabs.com)
+
+## Troubleshooting
+
+### Component Import Errors
+If you encounter errors like "Cannot read properties of undefined" or component import issues:
+
+1. Clear npm cache and reinstall:
+```bash
+rm -rf node_modules package-lock.json
+npm cache clean --force
+npm install
+```
+
+2. Ensure you're using the latest UI package version (v0.16.0+):
+```bash
+npm list @digilogiclabs/saas-factory-ui
+```
+
+### Audio Component Issues
+For audio-related component errors, make sure your environment supports audio APIs and you have proper HTTPS setup in production.
+
+## Support
+
+- 📚 [Documentation](https://docs.digilogiclabs.com)
+- 💬 [Discord Community](https://discord.gg/digilogiclabs)
+- 🐛 [Report Issues](https://github.com/DigiLogicLabs/create-saas-app/issues)
+

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

@@ -0,0 +1,169 @@
+# {{projectName}} - Development Context
+
+This project is a Full-Stack AI Platform built with modern technologies and Digi Logic Labs packages.
+
+## Architecture Overview
+
+### Core Technologies
+- **Next.js 15.3**: App Router, Server Components, Server Actions
+- **TypeScript**: Strict typing throughout
+- **Tailwind CSS v4**: Design tokens, glassmorphism system
+- **Supabase**: Database, authentication, real-time features
+
+### Package Integration
+
+#### @digilogiclabs/saas-factory-auth
+Authentication components and hooks with Supabase integration
+
+**Key Exports**: useAuth, AuthProvider, LoginForm, SignupForm
+**Documentation**: https://docs.digilogiclabs.com/packages/auth
+
+#### @digilogiclabs/saas-factory-ui
+Modern UI components with glassmorphism and responsive design
+
+**Key Exports**: Button, Card, MobileContainer, PageTransition, ResponsiveGrid
+**Documentation**: https://docs.digilogiclabs.com/packages/ui
+
+#### @digilogiclabs/saas-factory-payments
+Stripe integration for subscriptions and payments
+
+**Key Exports**: useStripe, PaymentForm, SubscriptionManager, BillingPortal
+**Documentation**: https://docs.digilogiclabs.com/packages/payments
+
+#### @digilogiclabs/saas-factory-ai
+AI platform with text, audio, and video generation capabilities
+
+**Key Exports**: AIProvider, AITextGenerator, AIAudioGenerator, AIVideoGenerator, AIChat
+**Documentation**: https://docs.digilogiclabs.com/packages/ai
+
+#### @digilogiclabs/saas-factory-ai-types
+TypeScript types and interfaces for AI operations
+
+**Key Exports**: AIConfig, TextGenerationRequest, AudioGenerationRequest, VideoGenerationRequest
+**Documentation**: https://docs.digilogiclabs.com/packages/ai-types
+
+## Environment Configuration
+
+Required environment variables:
+```bash
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
+STRIPE_SECRET_KEY=your_stripe_secret_key
+OPENAI_API_KEY=your_openai_api_key
+ELEVENLABS_API_KEY=your_elevenlabs_api_key
+REPLICATE_API_TOKEN=your_replicate_token
+```
+
+## Database Schema
+
+Key tables:
+- **profiles**: User profile information
+- **subscriptions**: Stripe subscription management
+- **ai_conversations**: AI interaction history
+
+## Common Patterns
+
+### Authentication Flow
+```typescript
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+
+export function ProtectedComponent() {
+  const { user, loading } = useAuth()
+  
+  if (loading) return <LoadingSpinner />
+  if (!user) return <LoginPrompt />
+  
+  return <UserContent user={user} />
+}
+```
+
+### UI Components
+```typescript
+import { 
+  Card, 
+  Button, 
+  PageTransition,
+  useGlassmorphism 
+} from '@digilogiclabs/saas-factory-ui'
+
+export function ExampleComponent() {
+  const glass = useGlassmorphism()
+  
+  return (
+    <PageTransition type="fade">
+      <Card className={`${glass.card} ${glass.border}`}>
+        <Button variant="default">Action</Button>
+      </Card>
+    </PageTransition>
+  )
+}
+```
+
+### Payment Integration
+```typescript
+import { useStripe, PaymentForm } from '@digilogiclabs/saas-factory-payments'
+
+export function CheckoutPage() {
+  const { createCheckoutSession, loading } = useStripe()
+  
+  const handlePayment = async (priceId: string) => {
+    const { url } = await createCheckoutSession({ priceId })
+    window.location.href = url
+  }
+  
+  return <PaymentForm onSubmit={handlePayment} />
+}
+```
+
+### AI Integration
+```typescript
+import { AIProvider, AITextGenerator } from '@digilogiclabs/saas-factory-ai'
+
+export function AIDemo() {
+  const aiConfig = {
+    apiKey: process.env.OPENAI_API_KEY,
+    provider: 'openai',
+    model: 'gpt-4'
+  }
+  
+  return (
+    <AIProvider config={aiConfig}>
+      <AITextGenerator 
+        placeholder="Generate content..."
+        maxLength={2000}
+      />
+    </AIProvider>
+  )
+}
+```
+
+## Development Workflow
+
+1. **Setup**: Run setup guide at /setup
+2. **Development**: `npm run dev` with hot reload
+3. **Testing**: `npm run test` with Vitest
+4. **Building**: `npm run build` for production
+5. **Deployment**: See deployment guide at /dev-setup
+
+## Troubleshooting
+
+### Common Issues
+- **Environment Variables**: Check .env.local file exists and variables are correct
+- **Database Connection**: Verify Supabase project settings and RLS policies
+- **Stripe Issues**: Check webhook endpoints and API keys match
+- **AI Generation Failures**: Verify API keys and rate limits
+
+### Debug Commands
+```bash
+npm run type-check  # TypeScript validation
+npm run lint        # ESLint validation
+npm run test        # Run test suite
+```
+
+## Resources
+
+- **Package Documentation**: https://docs.digilogiclabs.com
+- **Support Discord**: https://discord.gg/digilogiclabs
+- **Example Projects**: https://github.com/digilogiclabs/examples
+- **Setup Guide**: /setup page in this application

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

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { env } from './src/lib/env'
+
+export async function middleware(request: NextRequest) {
+  // Get auth token from cookies
+  const authToken = request.cookies.get('saas-factory-auth-token')?.value
+  const user = request.cookies.get('saas-factory-auth-user')?.value
+  
+  const isAuthenticated = !!(authToken && user)
+  const { pathname } = request.nextUrl
+
+  // Define protected routes
+  const protectedRoutes = ['/dashboard', '/profile', '/settings']
+  const authRoutes = ['/login', '/signup']
+  
+  // Check if the current path is protected
+  const isProtectedRoute = protectedRoutes.some(route => 
+    pathname.startsWith(route)
+  )
+  
+  // Check if the current path is an auth route
+  const isAuthRoute = authRoutes.some(route => 
+    pathname.startsWith(route)
+  )
+
+  // Redirect unauthenticated users from protected routes
+  if (isProtectedRoute && !isAuthenticated) {
+    const loginUrl = new URL('/login', request.url)
+    loginUrl.searchParams.set('from', pathname)
+    return NextResponse.redirect(loginUrl)
+  }
+
+  // Redirect authenticated users from auth routes
+  if (isAuthRoute && isAuthenticated) {
+    const redirectUrl = request.nextUrl.searchParams.get('from') || '/'
+    return NextResponse.redirect(new URL(redirectUrl, request.url))
+  }
+
+  // Add security headers
+  const response = NextResponse.next()
+  
+  // Add CSRF protection headers
+  response.headers.set('X-Frame-Options', 'DENY')
+  response.headers.set('X-Content-Type-Options', 'nosniff')
+  response.headers.set('Referrer-Policy', 'origin-when-cross-origin')
+  
+  // Add CSP header for additional security
+  if (env.NODE_ENV === 'production') {
+    response.headers.set(
+      'Content-Security-Policy',
+      "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://js.stripe.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://api.stripe.com"
+    )
+  }
+  
+  return response
+}
+
+export const config = {
+  matcher: [
+    // Match all request paths except for the ones starting with:
+    // - api (API routes)
+    // - _next/static (static files)
+    // - _next/image (image optimization files)
+    // - favicon.ico (favicon file)
+    // - public folder files
+    '/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}

package/src/templates/web/ui-auth-payments-ai/template/next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    domains: ['localhost'],
+  },
+  env: {
+    CUSTOM_KEY: process.env.CUSTOM_KEY,
+  },
+}
+
+module.exports = nextConfig
+