luxlabs 1.0.1 → 1.0.2

package/templates/interface-boilerplate/package.json

@@ -6,46 +6,27 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint"
   },
   "dependencies": {
-    "next": "^14.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "zustand": "^4.5.0",
-    "chokidar": "^3.6.0",
-    "tailwindcss": "^3.4.0",
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.0",
-    "@radix-ui/react-slot": "^1.0.0",
-    "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^2.0.0",
-    "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-tabs": "^1.0.0",
-    "@radix-ui/react-tooltip": "^1.0.0",
-    "@radix-ui/react-checkbox": "^1.0.0",
-    "@radix-ui/react-switch": "^1.0.0",
-    "@radix-ui/react-avatar": "^1.0.0",
-    "@radix-ui/react-progress": "^1.0.0",
-    "@radix-ui/react-separator": "^1.0.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.0",
-    "tailwindcss-animate": "^1.0.7",
-    "lucide-react": "^0.400.0",
-    "framer-motion": "^11.0.0",
-    "next-themes": "^0.3.0",
-    "posthog-js": "^1.200.0",
-    "@posthog/react": "^1.0.0"
+    "@radix-ui/react-slot": "^1.2.4",
+    "better-auth": "^1.4.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "next": "16.0.8",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "eslint": "^8.0.0",
-    "eslint-config-next": "^14.2.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "typescript": "^5.0.0"
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.8",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

package/templates/interface-boilerplate/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/templates/interface-boilerplate/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -10,11 +11,24 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
-    "plugins": [{ "name": "next" }],
-    "paths": { "@/*": ["./*"] }
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
   "exclude": ["node_modules"]
 }

package/templates/interface-boilerplate/.env.example

@@ -1,2 +0,0 @@
-# Lux API URL for Flow execution
-LUX_API_URL=https://app.uselux.com

package/templates/interface-boilerplate/.eslintrc.json

@@ -1,4 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "plugin:jsx-a11y/recommended"],
-  "plugins": ["jsx-a11y"]
-}

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

@@ -1,178 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { motion } from 'framer-motion';
-import { Loader2, Mail, Lock, ArrowLeft } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { ThemeToggle } from '@/components/theme-toggle';
-import { useAuth } from '@/lib/auth-context';
-
-export default function LoginPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const router = useRouter();
-  const { signIn, signInWithGoogle } = useAuth();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
-
-    try {
-      const result = await signIn(email, password);
-
-      if (result.success) {
-        router.push('/dashboard');
-      } else {
-        setError(result.error || 'Invalid email or password');
-      }
-    } catch (err) {
-      setError('An error occurred. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex flex-col bg-background">
-      {/* Header */}
-      <header className="flex items-center justify-between p-4">
-        <Button variant="ghost" size="sm" asChild>
-          <a href="/">
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back
-          </a>
-        </Button>
-        <ThemeToggle />
-      </header>
-
-      {/* Login Form */}
-      <main className="flex-1 flex items-center justify-center p-4">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4 }}
-          className="w-full max-w-md"
-        >
-          <Card>
-            <CardHeader className="text-center">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-                <Lock className="h-6 w-6 text-primary" />
-              </div>
-              <CardTitle className="text-2xl">Welcome back</CardTitle>
-              <CardDescription>
-                Enter your credentials to access your account
-              </CardDescription>
-            </CardHeader>
-            <form onSubmit={handleSubmit}>
-              <CardContent className="space-y-4">
-                {error && (
-                  <motion.div
-                    initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: 'auto' }}
-                    className="rounded-lg bg-destructive/10 p-3 text-sm text-destructive"
-                  >
-                    {error}
-                  </motion.div>
-                )}
-
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <div className="relative">
-                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="email"
-                      type="email"
-                      placeholder="name@example.com"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      className="pl-10"
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="password">Password</Label>
-                  <div className="relative">
-                    <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="password"
-                      type="password"
-                      placeholder="••••••••"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      className="pl-10"
-                      required
-                    />
-                  </div>
-                </div>
-              </CardContent>
-              <CardFooter className="flex flex-col space-y-4">
-                <Button type="submit" className="w-full" disabled={loading}>
-                  {loading ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Signing in...
-                    </>
-                  ) : (
-                    'Sign in'
-                  )}
-                </Button>
-
-                <div className="relative w-full">
-                  <div className="absolute inset-0 flex items-center">
-                    <span className="w-full border-t" />
-                  </div>
-                  <div className="relative flex justify-center text-xs uppercase">
-                    <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
-                  </div>
-                </div>
-
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full"
-                  onClick={() => signInWithGoogle()}
-                >
-                  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
-                    <path
-                      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"
-                      fill="#4285F4"
-                    />
-                    <path
-                      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"
-                      fill="#34A853"
-                    />
-                    <path
-                      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"
-                      fill="#FBBC05"
-                    />
-                    <path
-                      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"
-                      fill="#EA4335"
-                    />
-                  </svg>
-                  Continue with Google
-                </Button>
-
-                <p className="text-center text-sm text-muted-foreground">
-                  Don&apos;t have an account?{' '}
-                  <a href="/signup" className="text-primary hover:underline">
-                    Sign up
-                  </a>
-                </p>
-              </CardFooter>
-            </form>
-          </Card>
-        </motion.div>
-      </main>
-    </div>
-  );
-}

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

@@ -1,199 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { motion } from 'framer-motion';
-import { Loader2, Mail, Lock, User, ArrowLeft } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { ThemeToggle } from '@/components/theme-toggle';
-import { useAuth } from '@/lib/auth-context';
-
-export default function SignUpPage() {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-  const router = useRouter();
-  const { signUp, signInWithGoogle } = useAuth();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-
-    if (password.length < 8) {
-      setError('Password must be at least 8 characters');
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      const result = await signUp(email, password, name);
-
-      if (result.success) {
-        router.push('/dashboard');
-      } else {
-        setError(result.error || 'Sign up failed');
-      }
-    } catch (err) {
-      setError('An error occurred. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex flex-col bg-background">
-      <header className="flex items-center justify-between p-4">
-        <Button variant="ghost" size="sm" asChild>
-          <a href="/">
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back
-          </a>
-        </Button>
-        <ThemeToggle />
-      </header>
-
-      <main className="flex-1 flex items-center justify-center p-4">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4 }}
-          className="w-full max-w-md"
-        >
-          <Card>
-            <CardHeader className="text-center">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-                <User className="h-6 w-6 text-primary" />
-              </div>
-              <CardTitle className="text-2xl">Create an account</CardTitle>
-              <CardDescription>
-                Enter your information to get started
-              </CardDescription>
-            </CardHeader>
-            <form onSubmit={handleSubmit}>
-              <CardContent className="space-y-4">
-                {error && (
-                  <motion.div
-                    initial={{ opacity: 0, height: 0 }}
-                    animate={{ opacity: 1, height: 'auto' }}
-                    className="rounded-lg bg-destructive/10 p-3 text-sm text-destructive"
-                  >
-                    {error}
-                  </motion.div>
-                )}
-
-                <div className="space-y-2">
-                  <Label htmlFor="name">Name</Label>
-                  <div className="relative">
-                    <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="name"
-                      type="text"
-                      placeholder="John Doe"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      className="pl-10"
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <div className="relative">
-                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="email"
-                      type="email"
-                      placeholder="name@example.com"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      className="pl-10"
-                      required
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="password">Password</Label>
-                  <div className="relative">
-                    <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      id="password"
-                      type="password"
-                      placeholder="At least 8 characters"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      className="pl-10"
-                      required
-                      minLength={8}
-                    />
-                  </div>
-                </div>
-              </CardContent>
-              <CardFooter className="flex flex-col space-y-4">
-                <Button type="submit" className="w-full" disabled={loading}>
-                  {loading ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Creating account...
-                    </>
-                  ) : (
-                    'Sign up'
-                  )}
-                </Button>
-
-                <div className="relative w-full">
-                  <div className="absolute inset-0 flex items-center">
-                    <span className="w-full border-t" />
-                  </div>
-                  <div className="relative flex justify-center text-xs uppercase">
-                    <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
-                  </div>
-                </div>
-
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full"
-                  onClick={() => signInWithGoogle()}
-                >
-                  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
-                    <path
-                      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"
-                      fill="#4285F4"
-                    />
-                    <path
-                      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"
-                      fill="#34A853"
-                    />
-                    <path
-                      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"
-                      fill="#FBBC05"
-                    />
-                    <path
-                      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"
-                      fill="#EA4335"
-                    />
-                  </svg>
-                  Continue with Google
-                </Button>
-
-                <p className="text-center text-sm text-muted-foreground">
-                  Already have an account?{' '}
-                  <a href="/login" className="text-primary hover:underline">
-                    Sign in
-                  </a>
-                </p>
-              </CardFooter>
-            </form>
-          </Card>
-        </motion.div>
-      </main>
-    </div>
-  );
-}

package/templates/interface-boilerplate/components/AnalyticsProvider.tsx

@@ -1,142 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import posthog from 'posthog-js';
-import { PostHogProvider as PHProvider } from '@posthog/react';
-
-const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY || '';
-const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com';
-const INTERFACE_ID = process.env.NEXT_PUBLIC_LUX_INTERFACE_ID || '';
-const IS_LOCAL_DEV = process.env.NEXT_PUBLIC_LUX_LOCAL_DEV === 'true';
-
-/**
- * Parse feature flag overrides from URL query params
- * Used for A/B test variant preview in Lux Studio
- *
- * @example
- * ?__lux_flag_overrides={"pricing-test":"variant-a"}
- */
-function parseFlagOverrides(): Record<string, string | boolean> | undefined {
-	if (typeof window === 'undefined') return undefined;
-
-	const params = new URLSearchParams(window.location.search);
-	const overrides = params.get('__lux_flag_overrides');
-
-	if (!overrides) return undefined;
-
-	try {
-		const parsed = JSON.parse(overrides);
-		console.log('[analytics] Using flag overrides:', parsed);
-		return parsed;
-	} catch (e) {
-		console.warn('[analytics] Failed to parse flag overrides:', e);
-		return undefined;
-	}
-}
-
-/**
- * Analytics Provider Component
- *
- * Initializes PostHog analytics and provides React context for feature flags and A/B testing.
- * Place this in your root layout to enable analytics tracking and experiments.
- *
- * Usage in components:
- * ```tsx
- * import { useFeatureFlagVariantKey } from 'posthog-js/react';
- *
- * function MyComponent() {
- *   const variant = useFeatureFlagVariantKey('my-experiment');
- *   // variant is 'control' | 'variant-a' | 'variant-b' | undefined
- * }
- * ```
- *
- * A/B Test Preview:
- * In Lux Studio, you can preview different experiment variants by passing
- * ?__lux_flag_overrides={"experiment-key":"variant-name"} in the URL.
- * The provider will bootstrap PostHog with these overrides.
- */
-export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
-	const [isReady, setIsReady] = useState(false);
-
-	useEffect(() => {
-		// Check for flag overrides from Lux Studio preview
-		const flagOverrides = parseFlagOverrides();
-
-		// In local dev mode with flag overrides, we still want to provide mock feature flags
-		// This allows previewing A/B test variants without a real PostHog connection
-		if (IS_LOCAL_DEV) {
-			if (flagOverrides) {
-				console.log('[analytics] Local dev mode with flag overrides - mocking PostHog');
-				// Set up a minimal mock for feature flags in local dev
-				if (!posthog.__loaded) {
-					// Initialize PostHog with bootstrap for local preview
-					// Using a dummy key since we're just using it for local preview
-					posthog.init('local-preview', {
-						api_host: POSTHOG_HOST,
-						autocapture: false,
-						capture_pageview: false,
-						persistence: 'memory',
-						bootstrap: {
-							featureFlags: flagOverrides,
-						},
-						loaded: () => {
-							console.log('[analytics] PostHog initialized (local preview mode)');
-						},
-					});
-				}
-			} else {
-				console.log('[analytics] Skipped - local development mode');
-			}
-			setIsReady(true);
-			return;
-		}
-
-		if (!POSTHOG_KEY) {
-			console.warn('[analytics] PostHog not configured - missing POSTHOG_KEY');
-			setIsReady(true);
-			return;
-		}
-
-		// Check if already initialized
-		if (posthog.__loaded) {
-			setIsReady(true);
-			return;
-		}
-
-		// Build bootstrap config if we have overrides
-		const bootstrap = flagOverrides ? { featureFlags: flagOverrides } : undefined;
-
-		posthog.init(POSTHOG_KEY, {
-			api_host: POSTHOG_HOST,
-			autocapture: true,
-			capture_pageview: true,
-			capture_pageleave: true,
-			persistence: 'localStorage',
-			bootstrap, // <-- This forces specific flag values for preview
-			loaded: (ph) => {
-				// Register super properties that will be sent with every event
-				if (INTERFACE_ID) {
-					ph.register({
-						$lux_interface_id: INTERFACE_ID,
-					});
-				}
-				console.log('[analytics] PostHog initialized');
-			},
-		});
-
-		setIsReady(true);
-	}, []);
-
-	// Wait for initialization before rendering
-	if (!isReady) {
-		return <>{children}</>;
-	}
-
-	// In local dev without overrides or without PostHog key, just render children without provider
-	const flagOverrides = typeof window !== 'undefined' ? parseFlagOverrides() : undefined;
-	if ((IS_LOCAL_DEV && !flagOverrides) || !POSTHOG_KEY) {
-		return <>{children}</>;
-	}
-
-	return <PHProvider client={posthog}>{children}</PHProvider>;
-}