luxlabs 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxlabs",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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/dashboard/page.tsx

@@ -3,6 +3,9 @@
 import { useEffect } from "react";
 import { useSession, signOut } from "@/lib/auth-client";
 import { useRouter } from "next/navigation";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("Dashboard");
 
 export default function DashboardPage() {
   const { data: session, isPending } = useSession();
@@ -16,7 +19,7 @@ export default function DashboardPage() {
 
   if (isPending) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center" data-lux={lux("loading")}>
         <p>Loading...</p>
       </div>
     );
@@ -32,17 +35,18 @@ export default function DashboardPage() {
   }
 
   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">
+    <div className="min-h-screen bg-zinc-50 p-8" data-lux={lux("container")}>
+      <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md" data-lux={lux("card")}>
+        <h1 className="text-2xl font-semibold mb-4" data-lux={lux("title")}>Dashboard</h1>
+        <p className="text-zinc-600 mb-2" data-lux={lux("welcome")}>
           Welcome, <span className="font-medium">{session.user.name}</span>!
         </p>
-        <p className="text-zinc-600 mb-6">
+        <p className="text-zinc-600 mb-6" data-lux={lux("email")}>
           Email: {session.user.email}
         </p>
         <button
           onClick={handleSignOut}
+          data-lux={lux("signout-button")}
           className="px-4 py-2 bg-black text-white rounded-md hover:bg-zinc-800"
         >
           Sign Out

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

@@ -1,36 +1,41 @@
 import Link from "next/link";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("Home");
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-white">
+    <div className="min-h-screen flex flex-col bg-white" data-lux={lux("container")}>
       <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">
+          <p className="text-sm font-medium tracking-widest text-zinc-400 uppercase mb-4" data-lux={lux("tagline")}>
             Boilerplate
           </p>
-          <h1 className="text-6xl font-semibold tracking-tight text-black mb-6">
+          <h1 className="text-6xl font-semibold tracking-tight text-black mb-6" data-lux={lux("title")}>
             Lux
           </h1>
-          <p className="text-lg text-zinc-500 mb-12 max-w-md mx-auto">
+          <p className="text-lg text-zinc-500 mb-12 max-w-md mx-auto" data-lux={lux("description")}>
             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"
+              data-lux={lux("signin-button")}
               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"
+              data-lux={lux("signup-button")}
               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">
+          <div className="flex items-center justify-center gap-8 text-sm text-zinc-400" data-lux={lux("features")}>
             <span>Next.js</span>
             <span className="w-1 h-1 bg-zinc-300 rounded-full" />
             <span>Auth</span>
@@ -42,7 +47,7 @@ export default function Home() {
         </div>
       </main>
 
-      <footer className="py-6 text-center text-sm text-zinc-400">
+      <footer className="py-6 text-center text-sm text-zinc-400" data-lux={lux("footer")}>
         <p>Ready to ship.</p>
       </footer>
     </div>

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

@@ -3,6 +3,9 @@
 import { useSession, signOut } from "@/lib/auth-client";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("Settings");
 
 export default function SettingsPage() {
   const { data: session, isPending } = useSession();
@@ -16,7 +19,7 @@ export default function SettingsPage() {
 
   if (isPending) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen flex items-center justify-center" data-lux={lux("loading")}>
         <div className="text-gray-500">Loading...</div>
       </div>
     );
@@ -32,25 +35,25 @@ export default function SettingsPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50" data-lux={lux("container")}>
       <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">
+          <h1 className="text-3xl font-bold text-gray-900" data-lux={lux("title")}>Settings</h1>
+          <p className="mt-2 text-sm text-gray-600" data-lux={lux("subtitle")}>
             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="bg-white shadow rounded-lg p-6" data-lux={lux("card")}>
+          <h2 className="text-lg font-medium text-gray-900 mb-4" data-lux={lux("section-title")}>Account</h2>
 
           <div className="space-y-4">
-            <div>
+            <div data-lux={lux("name-field")}>
               <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>
+            <div data-lux={lux("email-field")}>
               <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>
@@ -59,6 +62,7 @@ export default function SettingsPage() {
           <div className="mt-6 pt-6 border-t border-gray-200">
             <button
               onClick={handleSignOut}
+              data-lux={lux("signout-button")}
               className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
             >
               Sign Out

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

@@ -3,6 +3,9 @@
 import { useState } from "react";
 import { authClient } from "@/lib/auth-client";
 import { useRouter } from "next/navigation";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("SignInForm");
 
 export function SignInForm() {
   const router = useRouter();
@@ -44,10 +47,11 @@ export function SignInForm() {
   };
 
   return (
-    <div className="space-y-6">
+    <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">
@@ -81,7 +85,7 @@ export function SignInForm() {
       </div>
 
       {/* Email/Password Form */}
-      <form onSubmit={handleEmailPassword} className="space-y-4">
+      <form onSubmit={handleEmailPassword} className="space-y-4" data-lux={lux("form")}>
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">
             Email
@@ -91,6 +95,7 @@ export function SignInForm() {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
+            data-lux={lux("email-input")}
             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"
           />
@@ -105,13 +110,14 @@ export function SignInForm() {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
+            data-lux={lux("password-input")}
             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">
+          <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2" data-lux={lux("error")}>
             {error}
           </div>
         )}
@@ -119,6 +125,7 @@ export function SignInForm() {
         <button
           type="submit"
           disabled={isLoading}
+          data-lux={lux("submit-button")}
           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"}
@@ -128,7 +135,7 @@ export function SignInForm() {
       {/* 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">
+        <a href="/sign-up" className="text-gray-900 hover:underline font-medium" data-lux={lux("signup-link")}>
           Sign up
         </a>
       </div>

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

@@ -3,6 +3,9 @@
 import { useState } from "react";
 import { authClient } from "@/lib/auth-client";
 import { useRouter } from "next/navigation";
+import { createLux } from "@/lib/lux";
+
+const lux = createLux("SignUpForm");
 
 export function SignUpForm() {
   const router = useRouter();
@@ -63,10 +66,11 @@ export function SignUpForm() {
   };
 
   return (
-    <div className="space-y-6">
+    <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">
@@ -100,7 +104,7 @@ export function SignUpForm() {
       </div>
 
       {/* Sign Up Form */}
-      <form onSubmit={handleAccountSubmit} className="space-y-4">
+      <form onSubmit={handleAccountSubmit} className="space-y-4" data-lux={lux("form")}>
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">
             Name
@@ -110,6 +114,7 @@ export function SignUpForm() {
             value={name}
             onChange={(e) => setName(e.target.value)}
             required
+            data-lux={lux("name-input")}
             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="John Doe"
           />
@@ -124,6 +129,7 @@ export function SignUpForm() {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
+            data-lux={lux("email-input")}
             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"
           />
@@ -140,12 +146,14 @@ export function SignUpForm() {
               onChange={(e) => setPassword(e.target.value)}
               required
               minLength={8}
+              data-lux={lux("password-input")}
               className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
               placeholder="••••••••"
             />
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
+              data-lux={lux("toggle-password")}
               className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
             >
               {showPassword ? (
@@ -176,12 +184,14 @@ export function SignUpForm() {
               onChange={(e) => setConfirmPassword(e.target.value)}
               required
               minLength={8}
+              data-lux={lux("confirm-password-input")}
               className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
               placeholder="••••••••"
             />
             <button
               type="button"
               onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              data-lux={lux("toggle-confirm-password")}
               className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
             >
               {showConfirmPassword ? (
@@ -199,7 +209,7 @@ export function SignUpForm() {
         </div>
 
         {error && (
-          <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2" data-lux={lux("error")}>
             {error}
           </div>
         )}
@@ -207,6 +217,7 @@ export function SignUpForm() {
         <button
           type="submit"
           disabled={isLoading}
+          data-lux={lux("submit-button")}
           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 ? "Creating account..." : "Sign Up"}
@@ -216,7 +227,7 @@ export function SignUpForm() {
       {/* Sign In Link */}
       <div className="text-center text-sm text-gray-600">
         Already have an account?{" "}
-        <a href="/sign-in" className="text-gray-900 hover:underline font-medium">
+        <a href="/sign-in" className="text-gray-900 hover:underline font-medium" data-lux={lux("signin-link")}>
           Sign in
         </a>
       </div>

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}`;
+}