@digilogiclabs/create-saas-app 1.10.6 → 1.12.0

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

@@ -0,0 +1,351 @@
+'use client'
+
+import { 
+  Card, 
+  Button,
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  useAnimationTokens,
+  useGlassmorphism
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  ArrowLeft,
+  CheckCircle,
+  AlertCircle,
+  ExternalLink,
+  Copy,
+  Database,
+  CreditCard,
+  Shield,
+  Video,
+  Key,
+  Settings,
+  BookOpen,
+  Zap,
+  Code2,
+  FileText,
+  Monitor
+} from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export default function SetupPage() {
+  const animations = useAnimationTokens()
+  const glass = useGlassmorphism()
+  const [copiedVar, setCopiedVar] = useState<string | null>(null)
+
+  const projectName = "{{projectName}}"
+  const templateName = "Video Platform with Payments"
+  const templateDescription = "UI + Authentication + Payments + Video Features"
+
+  const envVars = [
+    { name: "NEXT_PUBLIC_SUPABASE_URL", example: "https://your-project.supabase.co", required: true },
+    { name: "NEXT_PUBLIC_SUPABASE_ANON_KEY", example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", required: true },
+    { name: "SUPABASE_SERVICE_ROLE_KEY", example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", required: false },
+    { name: "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY", example: "pk_test_51234567890abcdef...", required: true },
+    { name: "STRIPE_SECRET_KEY", example: "sk_test_51234567890abcdef...", required: true },
+    { name: "STRIPE_WEBHOOK_SECRET", example: "whsec_1234567890abcdef...", required: true },
+    { name: "REPLICATE_API_TOKEN", example: "r8_1234567890abcdef...", required: false },
+    { name: "OPENAI_API_KEY", example: "sk-1234567890abcdef...", required: false }
+  ]
+
+  const copyToClipboard = async (text: string, varName: string) => {
+    await navigator.clipboard.writeText(text)
+    setCopiedVar(varName)
+    setTimeout(() => setCopiedVar(null), 2000)
+  }
+
+  return (
+    <PageTransition type="slide" direction="up" duration={300}>
+      <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
+        <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+        <div className="relative z-10">
+          <MobileContainer className="py-8">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-8">
+              <div className="flex items-center gap-4">
+                <Link href="/" className={`${glass.card} ${glass.border} p-2 rounded-xl ${animations.hover.scale}`}>
+                  <ArrowLeft className="w-5 h-5" />
+                </Link>
+                <div>
+                  <h1 className="text-2xl font-bold">Setup Guide</h1>
+                  <p className="text-gray-600 dark:text-gray-300">{templateName}</p>
+                </div>
+              </div>
+              <div className={`${glass.card} ${glass.border} px-4 py-2 rounded-xl`}>
+                <span className="text-sm font-medium">{projectName}</span>
+              </div>
+            </div>
+
+            {/* Template Overview */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+              <div className="flex items-center gap-4 mb-4">
+                <div className={`w-12 h-12 rounded-xl bg-gradient-to-r from-red-500 to-purple-500 flex items-center justify-center`}>
+                  <Video className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h2 className="text-xl font-semibold">{templateName}</h2>
+                  <p className="text-gray-600 dark:text-gray-300">{templateDescription}</p>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
+                <div className="text-center p-3 rounded-xl bg-blue-500/10">
+                  <Shield className="w-6 h-6 text-blue-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Authentication</div>
+                </div>
+                <div className="text-center p-3 rounded-xl bg-green-500/10">
+                  <CreditCard className="w-6 h-6 text-green-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Payments</div>
+                </div>
+                <div className="text-center p-3 rounded-xl bg-red-500/10">
+                  <Monitor className="w-6 h-6 text-red-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Video Platform</div>
+                </div>
+                <div className="text-center p-3 rounded-xl bg-orange-500/10">
+                  <Code2 className="w-6 h-6 text-orange-400 mx-auto mb-2" />
+                  <div className="text-sm font-medium">Modern UI</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Start */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Zap className="w-5 h-5 text-yellow-400" />
+                Quick Start
+              </h3>
+              <div className="space-y-3 text-sm">
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>1. Set up Supabase for database and authentication</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>2. Configure Stripe for payment processing</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>3. (Optional) Add video AI providers like Replicate</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>4. Configure environment variables below</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-400" />
+                  <span>5. Run <code className="px-2 py-1 bg-gray-800 rounded text-green-400">npm run dev</code></span>
+                </div>
+              </div>
+            </div>
+
+            {/* Environment Variables */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Key className="w-5 h-5 text-blue-400" />
+                Environment Variables
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+                Copy these to your <code className="px-2 py-1 bg-gray-800 rounded">.env.local</code> file:
+              </p>
+              <div className="bg-gray-900 rounded-xl p-4 overflow-x-auto">
+                <pre className="text-sm text-green-400">
+{envVars.map(envVar => (
+`${envVar.name}=${envVar.example}${envVar.required ? ' # Required' : ' # Optional'}`
+)).join('\n')}
+                </pre>
+                <button
+                  onClick={() => copyToClipboard(
+                    envVars.map(envVar => `${envVar.name}=${envVar.example}`).join('\n'),
+                    'all-env-vars'
+                  )}
+                  className="mt-3 flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors"
+                >
+                  <Copy className="w-4 h-4" />
+                  {copiedVar === 'all-env-vars' ? 'Copied!' : 'Copy all environment variables'}
+                </button>
+              </div>
+            </div>
+
+            {/* Services Overview */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Settings className="w-5 h-5 text-gray-400" />
+                Required Services
+              </h3>
+              <div className="space-y-4">
+                {/* Supabase */}
+                <div className="flex items-center gap-4 p-4 bg-blue-500/10 rounded-xl">
+                  <Database className="w-8 h-8 text-blue-400" />
+                  <div className="flex-1">
+                    <h4 className="font-semibold">Supabase</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">Database and authentication</p>
+                  </div>
+                  <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">Required</span>
+                  <a href="https://supabase.com/dashboard" className="text-blue-400 hover:text-blue-300">
+                    <ExternalLink className="w-4 h-4" />
+                  </a>
+                </div>
+
+                {/* Stripe */}
+                <div className="flex items-center gap-4 p-4 bg-green-500/10 rounded-xl">
+                  <CreditCard className="w-8 h-8 text-green-400" />
+                  <div className="flex-1">
+                    <h4 className="font-semibold">Stripe</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">Payment processing</p>
+                  </div>
+                  <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">Required</span>
+                  <a href="https://dashboard.stripe.com" className="text-green-400 hover:text-green-300">
+                    <ExternalLink className="w-4 h-4" />
+                  </a>
+                </div>
+
+                {/* Video Services */}
+                <div className="flex items-center gap-4 p-4 bg-red-500/10 rounded-xl">
+                  <Video className="w-8 h-8 text-red-400" />
+                  <div className="flex-1">
+                    <h4 className="font-semibold">Video Services</h4>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">Replicate, OpenAI for video generation</p>
+                  </div>
+                  <span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs">Optional</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Database Setup */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+              <h3 className="text-lg font-semibold mb-4">Database Setup</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+                Run this SQL in your Supabase SQL editor to set up the required tables:
+              </p>
+              <div className="bg-gray-900 rounded-xl p-4 overflow-x-auto">
+                <pre className="text-xs text-green-400">
+{`-- User profiles table
+CREATE TABLE profiles (
+  id UUID REFERENCES auth.users(id) PRIMARY KEY,
+  email TEXT,
+  full_name TEXT,
+  avatar_url TEXT,
+  stripe_customer_id TEXT,
+  subscription_status TEXT DEFAULT 'inactive',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Video content table
+CREATE TABLE video_content (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id UUID REFERENCES profiles(id),
+  title TEXT NOT NULL,
+  description TEXT,
+  video_url TEXT,
+  thumbnail_url TEXT,
+  duration INTEGER,
+  file_size BIGINT,
+  resolution TEXT,
+  status TEXT DEFAULT 'processing',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Enable RLS
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE video_content ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies
+CREATE POLICY "Users can view own profile" ON profiles FOR SELECT USING (auth.uid() = id);
+CREATE POLICY "Users can update own profile" ON profiles FOR UPDATE USING (auth.uid() = id);
+CREATE POLICY "Users can manage own video content" ON video_content FOR ALL USING (auth.uid() = user_id);`}
+                </pre>
+                <button
+                  onClick={() => copyToClipboard(`-- User profiles table
+CREATE TABLE profiles (
+  id UUID REFERENCES auth.users(id) PRIMARY KEY,
+  email TEXT,
+  full_name TEXT,
+  avatar_url TEXT,
+  stripe_customer_id TEXT,
+  subscription_status TEXT DEFAULT 'inactive',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Video content table
+CREATE TABLE video_content (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id UUID REFERENCES profiles(id),
+  title TEXT NOT NULL,
+  description TEXT,
+  video_url TEXT,
+  thumbnail_url TEXT,
+  duration INTEGER,
+  file_size BIGINT,
+  resolution TEXT,
+  status TEXT DEFAULT 'processing',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Enable RLS
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+ALTER TABLE video_content ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies
+CREATE POLICY "Users can view own profile" ON profiles FOR SELECT USING (auth.uid() = id);
+CREATE POLICY "Users can update own profile" ON profiles FOR UPDATE USING (auth.uid() = id);
+CREATE POLICY "Users can manage own video content" ON video_content FOR ALL USING (auth.uid() = user_id);`, 'sql-setup')}
+                  className="mt-3 flex items-center gap-2 text-xs text-gray-400 hover:text-white transition-colors"
+                >
+                  <Copy className="w-4 h-4" />
+                  {copiedVar === 'sql-setup' ? 'Copied!' : 'Copy SQL setup'}
+                </button>
+              </div>
+            </div>
+
+            {/* Additional Resources */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8`}>
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <BookOpen className="w-5 h-5 text-green-400" />
+                Additional Resources
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a 
+                  href="https://docs.digilogiclabs.com" 
+                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                >
+                  <FileText className="w-8 h-8 text-blue-400 mb-2" />
+                  <h4 className="font-medium">Documentation</h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">Complete guides and API reference</p>
+                </a>
+                <a 
+                  href="https://github.com/digilogiclabs/examples" 
+                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                >
+                  <Code2 className="w-8 h-8 text-purple-400 mb-2" />
+                  <h4 className="font-medium">Examples</h4>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">Sample projects and code snippets</p>
+                </a>
+              </div>
+            </div>
+
+            {/* Support */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8 text-center`}>
+              <h3 className="text-lg font-semibold mb-4">Need Help?</h3>
+              <p className="text-gray-600 dark:text-gray-300 mb-4">
+                Our community and support team are here to help you get started.
+              </p>
+              <div className="flex justify-center gap-4">
+                <Button variant="outline" size="sm" asChild>
+                  <a href="https://discord.gg/digilogiclabs" target="_blank" rel="noopener noreferrer">
+                    Join Discord
+                  </a>
+                </Button>
+                <Button size="sm" asChild>
+                  <a href="https://docs.digilogiclabs.com/support" target="_blank" rel="noopener noreferrer">
+                    Get Support
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </MobileContainer>
+        </div>
+      </main>
+    </PageTransition>
+  )
+}

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

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
-import { LogOut, CreditCard, User, Settings, Home, Video, Film, Play } from 'lucide-react';
+import { LogOut, CreditCard, User, Settings, Home, Video, Film, Play, Menu, X } from 'lucide-react';
 import { useAuth } from '@digilogiclabs/saas-factory-auth';
 import { 
   ResponsiveHeader,
@@ -17,27 +17,10 @@ export function Header() {
   const { user, signOut } = useAuth();
   const networkInfo = useNetworkInfo();
   const isOnline = useOfflineState();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   
   const projectName = "{{titleCaseName}}";
   
-  const headerConfig = {
-    logo: {
-      text: projectName,
-      href: '/',
-      className: 'text-2xl font-bold flex items-center gap-2',
-      icon: <Play className="w-6 h-6" />
-    },
-    networkStatus: {
-      isOnline,
-      connectionType: networkInfo?.effectiveType,
-      showIndicator: true,
-      customLabels: {
-        online: 'Streaming Ready',
-        offline: 'Offline Mode'
-      }
-    }
-  };
-
   const handleSignOut = async () => {
     try {
       await signOut();
@@ -111,6 +94,9 @@ export function Header() {
     }
   ];
 
+  // Filter navigation items based on user authentication
+  const visibleNavItems = navigationItems.filter(item => !item.protected || user);
+
   return (
     <>
       {/* Network Status Banner */}
@@ -138,23 +124,122 @@ export function Header() {
         </div>
       )}
 
-      <ResponsiveHeader
-        logo={headerConfig.logo}
-        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={headerConfig.networkStatus}
-      />
+      {/* Responsive Header */}
+      <header className="bg-white dark:bg-gray-800 shadow-md border-b">
+        <div className="container mx-auto px-4">
+          <div className="flex justify-between items-center h-16">
+            {/* Logo */}
+            <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+              <Play className="w-6 h-6" />
+              {projectName}
+            </Link>
+
+            {/* Desktop Navigation */}
+            <nav className="hidden md:flex items-center gap-6">
+              {visibleNavItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                >
+                  <item.icon className="w-4 h-4" />
+                  {item.label}
+                </Link>
+              ))}
+              
+              {/* Auth Actions */}
+              <div className="flex items-center gap-2 ml-4 pl-4 border-l border-gray-200 dark:border-gray-600">
+                <ThemeToggle />
+                {user ? (
+                  <button
+                    onClick={handleSignOut}
+                    className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Sign Out
+                  </button>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <Link
+                      href="/login"
+                      className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+                    >
+                      Login
+                    </Link>
+                    <Link
+                      href="/signup"
+                      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                    >
+                      Sign Up
+                    </Link>
+                  </div>
+                )}
+              </div>
+            </nav>
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+            >
+              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+            </button>
+          </div>
+
+          {/* Mobile Menu */}
+          {mobileMenuOpen && (
+            <div className="md:hidden border-t border-gray-200 dark:border-gray-600 py-4">
+              <nav className="flex flex-col space-y-3">
+                {visibleNavItems.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                  >
+                    <item.icon className="w-4 h-4" />
+                    {item.label}
+                  </Link>
+                ))}
+                
+                {/* Mobile Auth Actions */}
+                <div className="flex items-center gap-3 px-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+                  <ThemeToggle />
+                  {user ? (
+                    <button
+                      onClick={() => {
+                        handleSignOut();
+                        setMobileMenuOpen(false);
+                      }}
+                      className="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      Sign Out
+                    </button>
+                  ) : (
+                    <div className="flex flex-col gap-2 w-full">
+                      <Link
+                        href="/login"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="text-center py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                      >
+                        Login
+                      </Link>
+                      <Link
+                        href="/signup"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="text-center py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      >
+                        Sign Up
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              </nav>
+            </div>
+          )}
+        </div>
+      </header>
     </>
   );
 }

package/package.json

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

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

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}",
+  "description": "{{description}} - Authentication 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 an Authentication 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\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\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\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)\n\nRemember to consult the context.md file for detailed package documentation and examples."
+}

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

@@ -0,0 +1,105 @@
+# {{projectName}} - Development Context
+
+This project is an Authentication 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
+
+## Environment Configuration
+
+Required environment variables:
+```bash
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_key
+```
+
+## Database Schema
+
+Key tables:
+- **profiles**: User profile information
+
+## 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>
+  )
+}
+```
+
+## 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
+
+### 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