luxlabs 1.0.1 → 1.0.3

package/templates/interface-boilerplate/components/ui/badge.tsx

@@ -1,32 +1,36 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        success: 'border-transparent bg-success text-success-foreground hover:bg-success/80',
-        warning: 'border-transparent bg-warning text-warning-foreground hover:bg-warning/80',
-        outline: 'text-foreground',
+        default:
+          "border-transparent bg-gray-900 text-white shadow hover:bg-gray-800",
+        secondary:
+          "border-transparent bg-gray-100 text-gray-900 hover:bg-gray-200",
+        destructive:
+          "border-transparent bg-red-600 text-white shadow hover:bg-red-700",
+        outline: "text-gray-900 border-gray-300",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   }
-);
+)
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }

package/templates/interface-boilerplate/components/ui/button.tsx

@@ -1,52 +1,57 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default:
+          "bg-gray-900 text-white shadow hover:bg-gray-800",
+        destructive:
+          "bg-red-600 text-white shadow-sm hover:bg-red-700",
+        outline:
+          "border border-gray-300 bg-white shadow-sm hover:bg-gray-50",
+        secondary:
+          "bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-200",
+        ghost: "hover:bg-gray-100",
+        link: "text-gray-900 underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   }
-);
+)
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    );
+    )
   }
-);
-Button.displayName = 'Button';
+)
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }

package/templates/interface-boilerplate/components/ui/card.tsx

@@ -1,57 +1,76 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
-      {...props}
-    />
-  )
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-  )
-);
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  )
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  )
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border border-gray-200 bg-white shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-gray-500", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/templates/interface-boilerplate/components/ui/input.tsx

@@ -1,23 +1,22 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import * as React from "react"
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+import { cn } from "@/lib/utils"
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          "flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
         {...props}
       />
-    );
+    )
   }
-);
-Input.displayName = 'Input';
+)
+Input.displayName = "Input"
 
-export { Input };
+export { Input }

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

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

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

@@ -0,0 +1,18 @@
+import { createAuthClient } from "better-auth/react";
+
+// Auth client configured to use the Lux Studio API
+// The API URL and Org ID are injected at build/runtime
+const baseURL = process.env.NEXT_PUBLIC_LUX_API_URL || "https://v2.uselux.ai";
+const orgId = process.env.NEXT_PUBLIC_LUX_ORG_ID || "";
+
+export const authClient = createAuthClient({
+  baseURL: `${baseURL}/api/auth`,
+  fetchOptions: {
+    headers: {
+      "X-Org-Id": orgId,
+    },
+    credentials: "include",
+  },
+});
+
+export const { signIn, signUp, signOut, useSession } = authClient;

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

@@ -0,0 +1,111 @@
+/**
+ * Authentication Configuration
+ *
+ * This file defines which routes require authentication and which are public.
+ * Update this file to control access to different parts of your application.
+ */
+
+export const authConfig = {
+  /**
+   * Routes that require authentication
+   * Users will be redirected to sign-in if not authenticated
+   */
+  protectedRoutes: [
+    "/dashboard",
+    "/profile",
+    "/settings",
+    "/account",
+    "/auth/callback", // Organization setup after OAuth
+    // Add more protected routes here
+  ],
+
+  /**
+   * Auth pages (sign-in, sign-up, etc.)
+   * Authenticated users will be redirected away from these pages
+   */
+  authRoutes: [
+    "/sign-in",
+    "/sign-up",
+    "/verify-email",
+  ],
+
+  /**
+   * Public routes that anyone can access
+   * These routes are accessible whether authenticated or not
+   */
+  publicRoutes: [
+    "/",
+    "/about",
+    "/pricing",
+    "/contact",
+    "/blog",
+    "/docs",
+    "/accept-invite",
+    // Add more public routes here
+  ],
+
+  /**
+   * Default redirect destinations
+   */
+  redirects: {
+    // Where to redirect after successful sign-in
+    afterSignIn: "/dashboard",
+
+    // Where to redirect authenticated users who try to access auth pages
+    afterAuth: "/dashboard",
+
+    // Where to redirect unauthenticated users
+    toSignIn: "/sign-in",
+  },
+
+  /**
+   * Route matching options
+   */
+  options: {
+    // If true, "/dashboard" will also match "/dashboard/settings"
+    matchPrefixes: true,
+
+    // If true, "/" is treated as a public route even if not in publicRoutes
+    rootIsPublic: true,
+  },
+} as const;
+
+/**
+ * Helper function to check if a route matches a pattern
+ */
+export function isRouteMatch(pathname: string, pattern: string, matchPrefix = true): boolean {
+  if (matchPrefix) {
+    return pathname === pattern || pathname.startsWith(pattern + "/");
+  }
+  return pathname === pattern;
+}
+
+/**
+ * Helper function to determine route type
+ */
+export function getRouteType(pathname: string): "protected" | "auth" | "public" {
+  const { protectedRoutes, authRoutes, publicRoutes, options } = authConfig;
+
+  // Check if it's a protected route
+  if (protectedRoutes.some(route => isRouteMatch(pathname, route, options.matchPrefixes))) {
+    return "protected";
+  }
+
+  // Check if it's an auth route
+  if (authRoutes.some(route => isRouteMatch(pathname, route, options.matchPrefixes))) {
+    return "auth";
+  }
+
+  // Check if it's explicitly public
+  if (publicRoutes.some(route => isRouteMatch(pathname, route, options.matchPrefixes))) {
+    return "public";
+  }
+
+  // Special case for root
+  if (pathname === "/" && options.rootIsPublic) {
+    return "public";
+  }
+
+  // Default: treat as public (change to "protected" for whitelist approach)
+  return "public";
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Creates a lux helper for generating data-lux attribute values
+ * @param componentName - The name of the component
+ * @returns A function that generates prefixed element IDs
+ */
+export function createLux(componentName: string) {
+  return (elementId: string) => `${componentName}__${elementId}`;
+}

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

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }

package/templates/interface-boilerplate/middleware.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { authConfig, getRouteType } from "@/lib/auth.config";
+
+export async function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // Check if user has a session cookie
+  const sessionToken = request.cookies.get("better-auth.session_token");
+  const isAuthenticated = !!sessionToken;
+
+  // Special handling for API routes
+  if (pathname.startsWith("/api/")) {
+    // API auth routes are always allowed
+    if (pathname.startsWith("/api/auth/")) {
+      return NextResponse.next();
+    }
+
+    // All other API routes require authentication
+    if (!isAuthenticated) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    return NextResponse.next();
+  }
+
+  // Page route handling (non-API)
+  // Determine route type from config
+  const routeType = getRouteType(pathname);
+
+  // Handle auth routes (signin, signup, etc.)
+  // Redirect authenticated users away from auth pages
+  if (routeType === "auth" && isAuthenticated) {
+    return NextResponse.redirect(new URL(authConfig.redirects.afterAuth, request.url));
+  }
+
+  // Handle protected routes
+  // Redirect unauthenticated users to signin
+  if (routeType === "protected" && !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();
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except:
+     * - _next/static (static files)
+     * - _next/image (image optimization)
+     * - favicon.ico (favicon file)
+     */
+    "/((?!_next/static|_next/image|favicon.ico).*)",
+  ],
+};

package/templates/interface-boilerplate/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;