luxlabs 1.0.21 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxlabs",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "description": "CLI tool for Lux - Upload and deploy interfaces from your terminal",
   "author": "Jason Henkel <jason@uselux.ai>",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,6 +35,10 @@
   "bugs": {
     "url": "https://github.com/luxAILabs/lux-studio/issues"
   },
+  "scripts": {
+    "start": "node lux.js",
+    "test": "echo \"TODO: add tests\" && exit 0"
+  },
   "engines": {
     "node": ">=18.0.0"
   },
@@ -44,6 +48,7 @@
     "chalk": "^4.1.2",
     "chokidar": "^3.6.0",
     "commander": "^12.1.0",
+    "dotenv": "^17.2.3",
     "express": "^5.1.0",
     "form-data": "^4.0.0",
     "ignore": "^5.3.2",

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

@@ -7,6 +7,9 @@ import { createLux } from "@/lib/lux";
 
 const lux = createLux("SignInForm");
 
+// Check if Google OAuth is enabled via env var (defaults to true)
+const googleOAuthEnabled = process.env.NEXT_PUBLIC_AUTH_GOOGLE_ENABLED !== "false";
+
 export function SignInForm() {
   const router = useRouter();
   const [email, setEmail] = useState("");
@@ -48,41 +51,45 @@ export function SignInForm() {
 
   return (
     <div className="space-y-6" data-lux={lux("container")}>
-      {/* Google Sign In */}
-      <button
-        onClick={handleGoogleSignIn}
-        data-lux={lux("google-button")}
-        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>
+      {/* Google Sign In - only show if enabled */}
+      {googleOAuthEnabled && (
+        <>
+          <button
+            onClick={handleGoogleSignIn}
+            data-lux={lux("google-button")}
+            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>
+          <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" data-lux={lux("form")}>

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

@@ -7,6 +7,9 @@ import { createLux } from "@/lib/lux";
 
 const lux = createLux("SignUpForm");
 
+// Check if Google OAuth is enabled via env var (defaults to true)
+const googleOAuthEnabled = process.env.NEXT_PUBLIC_AUTH_GOOGLE_ENABLED !== "false";
+
 export function SignUpForm() {
   const router = useRouter();
   const [name, setName] = useState("");
@@ -67,41 +70,45 @@ export function SignUpForm() {
 
   return (
     <div className="space-y-6" data-lux={lux("container")}>
-      {/* Google Sign Up */}
-      <button
-        onClick={handleGoogleSignUp}
-        data-lux={lux("google-button")}
-        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>
+      {/* Google Sign Up - only show if enabled */}
+      {googleOAuthEnabled && (
+        <>
+          <button
+            onClick={handleGoogleSignUp}
+            data-lux={lux("google-button")}
+            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 sign up with email</span>
-        </div>
-      </div>
+          <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 sign up with email</span>
+            </div>
+          </div>
+        </>
+      )}
 
       {/* Sign Up Form */}
       <form onSubmit={handleAccountSubmit} className="space-y-4" data-lux={lux("form")}>

package/templates/interface-boilerplate/components/providers/posthog-provider.tsx

@@ -2,7 +2,7 @@
 
 import posthog from 'posthog-js'
 import { PostHogProvider as PHProvider } from 'posthog-js/react'
-import { useEffect, useRef } from 'react'
+import { Suspense, useEffect, useRef } from 'react'
 import { usePathname, useSearchParams } from 'next/navigation'
 
 const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY
@@ -50,9 +50,40 @@ function isLuxPreviewMode(): boolean {
   return getLuxFlagOverrides() !== undefined
 }
 
+/**
+ * Inner component that handles flag overrides - uses useSearchParams which requires Suspense
+ */
+function PostHogFlagOverrideHandler({ initialized }: { initialized: React.MutableRefObject<boolean> }) {
+  const searchParams = useSearchParams()
+
+  // Apply Lux Studio flag overrides whenever URL changes
+  // Uses posthog.featureFlags.overrideFeatureFlags() - the correct API
+  useEffect(() => {
+    // Only skip if PostHog not initialized at all
+    if (!initialized.current && !POSTHOG_KEY && !isLuxPreviewMode()) return
+
+    const flagOverrides = getLuxFlagOverrides()
+
+    if (flagOverrides && Object.keys(flagOverrides).length > 0) {
+      // IMPORTANT: overrideFeatureFlags expects { flags: { [key]: value } }
+      posthog.featureFlags.overrideFeatureFlags({
+        flags: flagOverrides,
+      })
+      console.log('[PostHog] Applied Lux Studio flag overrides:', flagOverrides)
+
+      // Force reload to make React hooks aware of the change
+      posthog.reloadFeatureFlags()
+    } else if (initialized.current) {
+      // Clear any previous overrides when not in preview mode
+      posthog.featureFlags.overrideFeatureFlags({ flags: {} })
+    }
+  }, [searchParams, initialized])
+
+  return null
+}
+
 export function PostHogProvider({ children }: { children: React.ReactNode }) {
   const initialized = useRef(false)
-  const searchParams = useSearchParams()
 
   // Initialize PostHog - use a dummy key for preview mode if no real key
   useEffect(() => {
@@ -90,29 +121,6 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
     initialized.current = true
   }, [])
 
-  // Apply Lux Studio flag overrides whenever URL changes
-  // Uses posthog.featureFlags.overrideFeatureFlags() - the correct API
-  useEffect(() => {
-    // Only skip if PostHog not initialized at all
-    if (!initialized.current && !POSTHOG_KEY && !isLuxPreviewMode()) return
-
-    const flagOverrides = getLuxFlagOverrides()
-
-    if (flagOverrides && Object.keys(flagOverrides).length > 0) {
-      // IMPORTANT: overrideFeatureFlags expects { flags: { [key]: value } }
-      posthog.featureFlags.overrideFeatureFlags({
-        flags: flagOverrides,
-      })
-      console.log('[PostHog] Applied Lux Studio flag overrides:', flagOverrides)
-
-      // Force reload to make React hooks aware of the change
-      posthog.reloadFeatureFlags()
-    } else if (initialized.current) {
-      // Clear any previous overrides when not in preview mode
-      posthog.featureFlags.overrideFeatureFlags({ flags: {} })
-    }
-  }, [searchParams])
-
   // Always use PHProvider if we're initialized (either with real key or preview mode)
   const shouldUsePHProvider = POSTHOG_KEY || isLuxPreviewMode()
 
@@ -120,7 +128,14 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
     return <>{children}</>
   }
 
-  return <PHProvider client={posthog}>{children}</PHProvider>
+  return (
+    <PHProvider client={posthog}>
+      <Suspense fallback={null}>
+        <PostHogFlagOverrideHandler initialized={initialized} />
+      </Suspense>
+      {children}
+    </PHProvider>
+  )
 }
 
 export function PostHogPageView() {

package/templates/interface-boilerplate/gitignore.template

@@ -40,3 +40,7 @@ Thumbs.db
 
 # Testing
 coverage/
+
+# Lux Studio generated files (auto-regenerated locally)
+lib/flows.ts
+CLAUDE.md

package/templates/interface-boilerplate/lib/auth.config.ts

@@ -106,6 +106,7 @@ export function getRouteType(pathname: string): "protected" | "auth" | "public"
     return "public";
   }
 
-  // Default: treat as public (change to "protected" for whitelist approach)
-  return "public";
+  // Default: treat as protected (whitelist approach)
+  // Only explicitly listed public routes are accessible without auth
+  return "protected";
 }

package/templates/interface-boilerplate/lib/knowledge.ts

@@ -207,7 +207,7 @@ export async function uploadToKnowledge(
       };
     }
 
-    const { uploadUrl, path } = await urlResponse.json();
+    const { uploadUrl, path, fileId } = await urlResponse.json();
 
     // Step 2: Upload directly to R2
     if (options.onProgress) {
@@ -241,7 +241,7 @@ export async function uploadToKnowledge(
         'Authorization': `Bearer ${apiKey}`,
         'X-Device-Id': deviceId,
       },
-      body: JSON.stringify({ path }),
+      body: JSON.stringify({ path, fileId }),
     });
 
     if (!confirmResponse.ok) {

package/templates/interface-boilerplate/middleware.ts

@@ -2,9 +2,16 @@ import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { authConfig, getRouteType } from "@/lib/auth.config";
 
+const AUTH_ENABLED = process.env.NEXT_PUBLIC_AUTH_ENABLED === "true";
+
 export async function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
+  // If auth is disabled, allow everything through
+  if (!AUTH_ENABLED) {
+    return NextResponse.next();
+  }
+
   // Check if user has a session cookie
   const sessionToken = request.cookies.get("better-auth.session_token");
   const isAuthenticated = !!sessionToken;
@@ -34,16 +41,20 @@ export async function middleware(request: NextRequest) {
     return NextResponse.redirect(new URL(authConfig.redirects.afterAuth, request.url));
   }
 
-  // Handle protected routes
+  // Handle public routes - allow access
+  if (routeType === "public") {
+    return NextResponse.next();
+  }
+
+  // Everything else requires authentication (whitelist approach)
   // Redirect unauthenticated users to signin
-  if (routeType === "protected" && !isAuthenticated) {
+  if (!isAuthenticated) {
     const signInUrl = new URL(authConfig.redirects.toSignIn, request.url);
     // Preserve the original destination for redirect after sign-in
     signInUrl.searchParams.set("callbackUrl", pathname);
     return NextResponse.redirect(signInUrl);
   }
 
-  // Allow access to public routes
   return NextResponse.next();
 }
 

package/templates/interface-boilerplate/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.