luxlabs 1.0.0 → 1.0.2

package/commands/interface/boilerplate.js

@@ -3,10 +3,24 @@ const path = require('path');
 
 /**
  * Get the templates directory path
- * Uses the canonical templates directory at project root (single source of truth)
+ * Tries multiple paths to support both:
+ * - Electron app: electron/bin/lux-cli/commands/interface/ → 4 levels up
+ * - npm package: luxlabs/commands/interface/ → 2 levels up
  */
 function getTemplatesDir() {
-  return path.join(__dirname, '../../../../templates/interface-boilerplate');
+  const candidates = [
+    path.join(__dirname, '../../../../templates/interface-boilerplate'),  // Electron app
+    path.join(__dirname, '../../templates/interface-boilerplate'),        // npm package
+  ];
+
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate)) {
+      return candidate;
+    }
+  }
+
+  // Return first candidate for error message
+  return candidates[0];
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxlabs",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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

@@ -0,0 +1,34 @@
+"use client";
+
+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 { data: session, isPending } = useSession();
+
+  useEffect(() => {
+    if (!isPending) {
+      if (session) {
+        // Authenticated - go to dashboard
+        router.push("/dashboard");
+      } else {
+        // Not authenticated - go to sign in
+        router.push("/sign-in");
+      }
+    }
+  }, [session, isPending, router]);
+
+  return (
+    <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

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+import { useSession, signOut } from "@/lib/auth-client";
+import { useRouter } from "next/navigation";
+
+export default function DashboardPage() {
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    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("/");
+  }
+
+  return (
+    <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"
+        >
+          Sign Out
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

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

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,50 @@
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <div className="min-h-screen flex flex-col bg-white">
+      <main className="flex-1 flex flex-col items-center justify-center px-6">
+        <div className="max-w-2xl w-full text-center">
+          <p className="text-sm font-medium tracking-widest text-zinc-400 uppercase mb-4">
+            Boilerplate
+          </p>
+          <h1 className="text-6xl font-semibold tracking-tight text-black mb-6">
+            Lux
+          </h1>
+          <p className="text-lg text-zinc-500 mb-12 max-w-md mx-auto">
+            Authentication, database, and UI components. Everything you need to start building.
+          </p>
+
+          <div className="flex gap-4 justify-center mb-16">
+            <Link
+              href="/sign-in"
+              className="px-8 py-3 bg-black text-white text-sm font-medium rounded-full hover:bg-zinc-800 transition-colors"
+            >
+              Sign In
+            </Link>
+            <Link
+              href="/sign-up"
+              className="px-8 py-3 border border-zinc-200 text-black text-sm font-medium rounded-full hover:bg-zinc-50 transition-colors"
+            >
+              Sign Up
+            </Link>
+          </div>
+
+          <div className="flex items-center justify-center gap-8 text-sm text-zinc-400">
+            <span>Next.js</span>
+            <span className="w-1 h-1 bg-zinc-300 rounded-full" />
+            <span>Auth</span>
+            <span className="w-1 h-1 bg-zinc-300 rounded-full" />
+            <span>Database</span>
+            <span className="w-1 h-1 bg-zinc-300 rounded-full" />
+            <span>Tailwind</span>
+          </div>
+        </div>
+      </main>
+
+      <footer className="py-6 text-center text-sm text-zinc-400">
+        <p>Ready to ship.</p>
+      </footer>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { useSession, signOut } from "@/lib/auth-client";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function SettingsPage() {
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isPending && !session) {
+      router.push("/sign-in");
+    }
+  }, [session, isPending, router]);
+
+  if (isPending) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-gray-500">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!session) {
+    return null;
+  }
+
+  const handleSignOut = async () => {
+    await signOut();
+    router.push("/sign-in");
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
+          <p className="mt-2 text-sm text-gray-600">
+            Manage your account settings
+          </p>
+        </div>
+
+        <div className="bg-white shadow rounded-lg p-6">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">Account</h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Name</label>
+              <p className="mt-1 text-sm text-gray-900">{session.user.name}</p>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Email</label>
+              <p className="mt-1 text-sm text-gray-900">{session.user.email}</p>
+            </div>
+          </div>
+
+          <div className="mt-6 pt-6 border-t border-gray-200">
+            <button
+              onClick={handleSignOut}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/interface-boilerplate/app/sign-in/page.tsx

@@ -0,0 +1,19 @@
+import { SignInForm } from "@/components/auth/sign-in-form";
+
+export default function SignInPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-gray-900">Sign in</h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Welcome back! Please sign in to continue.
+          </p>
+        </div>
+        <div className="mt-8 bg-white py-8 px-6 shadow rounded-lg">
+          <SignInForm />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/interface-boilerplate/app/sign-up/page.tsx

@@ -0,0 +1,19 @@
+import { SignUpForm } from "@/components/auth/sign-up-form";
+
+export default function SignUpPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-gray-900">Create account</h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Get started by creating your account
+          </p>
+        </div>
+        <div className="mt-8 bg-white py-8 px-6 shadow rounded-lg">
+          <SignUpForm />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/interface-boilerplate/components/auth/sign-in-form.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { useRouter } from "next/navigation";
+
+export function SignInForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleEmailPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      await authClient.signIn.email({
+        email,
+        password,
+        callbackURL: "/dashboard",
+      });
+
+      router.push("/dashboard");
+    } catch (err) {
+      setError("Invalid email or password");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleSignIn = async () => {
+    setError("");
+    try {
+      await authClient.signIn.social({
+        provider: "google",
+        callbackURL: "/dashboard",
+      });
+    } catch (err) {
+      setError("Failed to sign in with Google");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Google Sign In */}
+      <button
+        onClick={handleGoogleSignIn}
+        className="w-full flex items-center justify-center gap-3 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+      >
+        <svg className="w-5 h-5" viewBox="0 0 24 24">
+          <path
+            fill="#4285F4"
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+          />
+          <path
+            fill="#34A853"
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+          />
+          <path
+            fill="#FBBC05"
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+          />
+          <path
+            fill="#EA4335"
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+          />
+        </svg>
+        Continue with Google
+      </button>
+
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-gray-300" />
+        </div>
+        <div className="relative flex justify-center text-sm">
+          <span className="bg-white px-2 text-gray-500">Or continue with</span>
+        </div>
+      </div>
+
+      {/* Email/Password Form */}
+      <form onSubmit={handleEmailPassword} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Email
+          </label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Password
+          </label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
+            placeholder="••••••••"
+          />
+        </div>
+
+        {error && (
+          <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+            {error}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          {isLoading ? "Signing in..." : "Sign in"}
+        </button>
+      </form>
+
+      {/* Sign Up Link */}
+      <div className="text-center text-sm text-gray-600">
+        Don&apos;t have an account?{" "}
+        <a href="/sign-up" className="text-gray-900 hover:underline font-medium">
+          Sign up
+        </a>
+      </div>
+    </div>
+  );
+}