luxlabs 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxlabs",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "CLI tool for Lux - Upload and deploy interfaces from your terminal",
   "author": "Jason Henkel <jason@uselux.ai>",
   "license": "SEE LICENSE IN LICENSE",

package/templates/interface-boilerplate/app/api/auth/[...all]/route.ts

@@ -0,0 +1,52 @@
+/**
+ * Auth API Proxy
+ *
+ * Proxies all auth requests to the Lux Studio API worker.
+ * The worker handles Better Auth with the org's database.
+ */
+
+const API_URL = process.env.NEXT_PUBLIC_LUX_API_URL || "https://v2.uselux.ai";
+const ORG_ID = process.env.NEXT_PUBLIC_LUX_ORG_ID || "";
+
+async function proxyRequest(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+  const path = url.pathname.replace("/api/auth", "");
+  const targetUrl = `${API_URL}/api/auth${path}${url.search}`;
+
+  // Forward the request to the worker
+  const headers = new Headers(request.headers);
+  headers.set("X-Org-Id", ORG_ID);
+
+  const response = await fetch(targetUrl, {
+    method: request.method,
+    headers,
+    body: request.method !== "GET" && request.method !== "HEAD" ? request.body : undefined,
+    // @ts-ignore - duplex is needed for streaming body
+    duplex: "half",
+  });
+
+  // Forward response back with CORS headers
+  const responseHeaders = new Headers(response.headers);
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: responseHeaders,
+  });
+}
+
+export async function GET(request: Request) {
+  return proxyRequest(request);
+}
+
+export async function POST(request: Request) {
+  return proxyRequest(request);
+}
+
+export async function PUT(request: Request) {
+  return proxyRequest(request);
+}
+
+export async function DELETE(request: Request) {
+  return proxyRequest(request);
+}

package/templates/interface-boilerplate/app/auth/callback/page.tsx

@@ -1,43 +1,34 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { handleOAuthCallback } from '@/lib/auth';
-import { Loader2 } from 'lucide-react';
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "@/lib/auth-client";
 
+/**
+ * Auth Callback Page
+ *
+ * Handles redirect after OAuth sign-in.
+ * Simply redirects authenticated users to dashboard.
+ */
 export default function AuthCallbackPage() {
   const router = useRouter();
-  const [error, setError] = useState<string | null>(null);
+  const { data: session, isPending } = useSession();
 
   useEffect(() => {
-    const result = handleOAuthCallback();
-    if (result.success) {
-      router.push('/dashboard');
-    } else {
-      setError(result.error || 'Authentication failed');
+    if (!isPending) {
+      if (session) {
+        // Authenticated - go to dashboard
+        router.push("/dashboard");
+      } else {
+        // Not authenticated - go to sign in
+        router.push("/sign-in");
+      }
     }
-  }, [router]);
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-destructive mb-2">Authentication Failed</h1>
-          <p className="text-muted-foreground mb-4">{error}</p>
-          <a href="/login" className="text-primary hover:underline">
-            Back to login
-          </a>
-        </div>
-      </div>
-    );
-  }
+  }, [session, isPending, router]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="text-center">
-        <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-primary" />
-        <p className="text-muted-foreground">Completing sign in...</p>
-      </div>
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="text-gray-600">Completing sign in...</div>
     </div>
   );
 }

package/templates/interface-boilerplate/app/dashboard/page.tsx

@@ -1,226 +1,53 @@
-'use client';
+"use client";
 
-import { AuthGuard } from '@/components/AuthGuard';
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { motion } from 'framer-motion';
-import {
-  LayoutDashboard,
-  Users,
-  CreditCard,
-  Activity,
-  LogOut,
-  TrendingUp,
-  TrendingDown,
-  Menu,
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Skeleton } from '@/components/ui/skeleton';
-import { ThemeToggle } from '@/components/theme-toggle';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useAuth } from '@/lib/auth-context';
+import { useEffect } from "react";
+import { useSession, signOut } from "@/lib/auth-client";
+import { useRouter } from "next/navigation";
 
-const stats = [
-  { title: 'Total Users', value: '1,234', change: '+12%', trend: 'up', icon: Users },
-  { title: 'Revenue', value: '$45,231', change: '+8%', trend: 'up', icon: CreditCard },
-  { title: 'Active Now', value: '573', change: '-3%', trend: 'down', icon: Activity },
-  { title: 'Growth', value: '23.5%', change: '+5%', trend: 'up', icon: TrendingUp },
-];
-
-function DashboardContent() {
-  const [loading, setLoading] = useState(true);
+export default function DashboardPage() {
+  const { data: session, isPending } = useSession();
   const router = useRouter();
-  const { user, signOut } = useAuth();
 
   useEffect(() => {
-    // Simulate loading dashboard data
-    const timer = setTimeout(() => {
-      setLoading(false);
-    }, 500);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  const handleLogout = async () => {
+    if (!isPending && !session) {
+      router.push("/sign-in");
+    }
+  }, [isPending, session, router]);
+
+  if (isPending) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  if (!session) {
+    return null;
+  }
+
+  async function handleSignOut() {
     await signOut();
-    router.push('/login');
-  };
+    router.push("/");
+  }
 
   return (
-    <div className="min-h-screen bg-background">
-      {/* Header */}
-      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <div className="flex items-center space-x-4">
-            <Button variant="ghost" size="icon" className="md:hidden">
-              <Menu className="h-5 w-5" />
-            </Button>
-            <div className="flex items-center space-x-2">
-              <LayoutDashboard className="h-6 w-6 text-primary" />
-              <span className="text-xl font-semibold">Dashboard</span>
-            </div>
-          </div>
-          <div className="flex items-center space-x-4">
-            <ThemeToggle />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-                  <Avatar className="h-8 w-8">
-                    <AvatarImage src={user?.image || '/avatar.png'} alt={user?.name || 'User'} />
-                    <AvatarFallback>{user?.name?.charAt(0).toUpperCase() || 'U'}</AvatarFallback>
-                  </Avatar>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56" align="end" forceMount>
-                <DropdownMenuLabel className="font-normal">
-                  <div className="flex flex-col space-y-1">
-                    <p className="text-sm font-medium">{user?.name || 'User'}</p>
-                    <p className="text-xs text-muted-foreground">{user?.email}</p>
-                  </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={handleLogout}>
-                  <LogOut className="mr-2 h-4 w-4" />
-                  Log out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="container mx-auto px-4 py-8">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4 }}
+    <div className="min-h-screen bg-zinc-50 p-8">
+      <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md">
+        <h1 className="text-2xl font-semibold mb-4">Dashboard</h1>
+        <p className="text-zinc-600 mb-2">
+          Welcome, <span className="font-medium">{session.user.name}</span>!
+        </p>
+        <p className="text-zinc-600 mb-6">
+          Email: {session.user.email}
+        </p>
+        <button
+          onClick={handleSignOut}
+          className="px-4 py-2 bg-black text-white rounded-md hover:bg-zinc-800"
         >
-          <div className="mb-8">
-            <h1 className="text-3xl font-bold">Welcome back{user?.name ? `, ${user.name}` : ''}!</h1>
-            <p className="text-muted-foreground">
-              Here&apos;s what&apos;s happening with your app today.
-            </p>
-          </div>
-
-          {/* Stats Grid */}
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            {stats.map((stat, index) => (
-              <motion.div
-                key={stat.title}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.4, delay: index * 0.1 }}
-              >
-                <Card>
-                  <CardHeader className="flex flex-row items-center justify-between pb-2">
-                    <CardTitle className="text-sm font-medium text-muted-foreground">
-                      {stat.title}
-                    </CardTitle>
-                    <stat.icon className="h-4 w-4 text-muted-foreground" />
-                  </CardHeader>
-                  <CardContent>
-                    {loading ? (
-                      <Skeleton className="h-8 w-24" />
-                    ) : (
-                      <>
-                        <div className="text-2xl font-bold">{stat.value}</div>
-                        <div className="flex items-center text-xs">
-                          {stat.trend === 'up' ? (
-                            <TrendingUp className="mr-1 h-3 w-3 text-green-500" />
-                          ) : (
-                            <TrendingDown className="mr-1 h-3 w-3 text-red-500" />
-                          )}
-                          <span className={stat.trend === 'up' ? 'text-green-500' : 'text-red-500'}>
-                            {stat.change}
-                          </span>
-                          <span className="ml-1 text-muted-foreground">from last month</span>
-                        </div>
-                      </>
-                    )}
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </div>
-
-          {/* Recent Activity */}
-          <div className="mt-8">
-            <Card>
-              <CardHeader>
-                <CardTitle>Recent Activity</CardTitle>
-                <CardDescription>Your latest actions and updates</CardDescription>
-              </CardHeader>
-              <CardContent>
-                {loading ? (
-                  <div className="space-y-4">
-                    {[1, 2, 3].map((i) => (
-                      <div key={i} className="flex items-center space-x-4">
-                        <Skeleton className="h-10 w-10 rounded-full" />
-                        <div className="space-y-2">
-                          <Skeleton className="h-4 w-48" />
-                          <Skeleton className="h-3 w-24" />
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="space-y-4">
-                    <div className="flex items-center space-x-4">
-                      <Avatar>
-                        <AvatarFallback>US</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1">
-                        <p className="text-sm font-medium">New user signed up</p>
-                        <p className="text-xs text-muted-foreground">2 minutes ago</p>
-                      </div>
-                      <Badge>New</Badge>
-                    </div>
-                    <div className="flex items-center space-x-4">
-                      <Avatar>
-                        <AvatarFallback>OR</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1">
-                        <p className="text-sm font-medium">Order #1234 completed</p>
-                        <p className="text-xs text-muted-foreground">1 hour ago</p>
-                      </div>
-                      <Badge variant="success">Completed</Badge>
-                    </div>
-                    <div className="flex items-center space-x-4">
-                      <Avatar>
-                        <AvatarFallback>SY</AvatarFallback>
-                      </Avatar>
-                      <div className="flex-1">
-                        <p className="text-sm font-medium">System update deployed</p>
-                        <p className="text-xs text-muted-foreground">3 hours ago</p>
-                      </div>
-                      <Badge variant="secondary">System</Badge>
-                    </div>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          </div>
-        </motion.div>
-      </main>
+          Sign Out
+        </button>
+      </div>
     </div>
   );
 }
-
-export default function DashboardPage() {
-  return (
-    <AuthGuard>
-      <DashboardContent />
-    </AuthGuard>
-  );
-}

package/templates/interface-boilerplate/app/globals.css

@@ -1,121 +1,26 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142.1 76.2% 36.3%;
-    --success-foreground: 355.7 100% 97.3%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 48 96% 89%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142.1 70.6% 45.3%;
-    --success-foreground: 144.9 80.4% 10%;
-    --warning: 32 95% 44%;
-    --warning-foreground: 48 96% 89%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
-  }
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-
-  /* Smooth scrolling */
-  html {
-    scroll-behavior: smooth;
-  }
-
-  /* Better focus styles */
-  :focus-visible {
-    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
-  }
-
-  /* Reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    ::before,
-    ::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
 
-@layer utilities {
-  /* Hide scrollbar but keep functionality */
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Text balance for headings */
-  .text-balance {
-    text-wrap: balance;
-  }
-
-  /* Animation delay utilities */
-  .animation-delay-150 {
-    animation-delay: 150ms;
-  }
-
-  .animation-delay-300 {
-    animation-delay: 300ms;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
+}
 
-  .animation-delay-500 {
-    animation-delay: 500ms;
-  }
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
 }

package/templates/interface-boilerplate/app/layout.tsx

@@ -1,45 +1,33 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
-import { ThemeProvider } from '@/components/theme-provider';
-import { AuthProvider } from '@/lib/auth-context';
-import { ErrorBoundary } from '@/components/ErrorBoundary';
-import { AnalyticsProvider } from '@/components/AnalyticsProvider';
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: 'My App',
-  description: 'Built with Lux',
-  openGraph: {
-    title: 'My App',
-    description: 'Built with Lux',
-    type: 'website',
-  },
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.variable}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <ErrorBoundary>
-            <AnalyticsProvider>
-              <AuthProvider>
-                {children}
-              </AuthProvider>
-            </AnalyticsProvider>
-          </ErrorBoundary>
-        </ThemeProvider>
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
       </body>
     </html>
   );