luxlabs 1.0.3 → 1.0.4

package/package.json

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