diff --git a/.cursor/environment.json b/.cursor/environment.json
index a26136fe..53e795bb 100644
--- a/.cursor/environment.json
+++ b/.cursor/environment.json
@@ -1,4 +1,4 @@
 {
   "agentCanUpdateSnapshot": true,
   "snapshot": "snapshot-20250608-c36a2efe-a6e1-4055-9384-a6476fcfd377"
-}
\ No newline at end of file
+}
diff --git a/.cursor/notepads/ai-task.md b/.cursor/notepads/ai-task.md
index b6b5bc4f..ae999da8 100644
--- a/.cursor/notepads/ai-task.md
+++ b/.cursor/notepads/ai-task.md
@@ -6,45 +6,53 @@ description: Template for tracking and documenting AI tasks and progress
 # AI Task Documentation
 
 ## Current Task
+
 - [ ] Task Name:
 - [ ] Description:
 - [ ] Status: (Not Started | In Progress | Completed)
 - [ ] Priority: (Low | Medium | High)
 
 ## Requirements
+
 - [ ] Requirement 1
 - [ ] Requirement 2
 - [ ] Requirement 3
 
 ## Progress
+
 - [ ] Step 1
 - [ ] Step 2
 - [ ] Step 3
 
 ## Files Modified
+
 - [ ] File 1: Description of changes
 - [ ] File 2: Description of changes
 - [ ] File 3: Description of changes
 
 ## Testing
+
 - [ ] Unit tests added/updated
 - [ ] Integration tests added/updated
 - [ ] Manual testing completed
 - [ ] Edge cases considered
 
 ## Documentation
+
 - [ ] Code comments added
 - [ ] API documentation updated
 - [ ] README updated if needed
 - [ ] Architecture decisions documented
 
 ## Review
+
 - [ ] Code follows project standards
 - [ ] Security considerations addressed
 - [ ] Performance impact considered
 - [ ] Accessibility requirements met
 
 ## Notes
+
 - Additional context
 - Decisions made
 - Future considerations
diff --git a/.cursor/notepads/api-route.md b/.cursor/notepads/api-route.md
index 97f125d0..f409fc4f 100644
--- a/.cursor/notepads/api-route.md
+++ b/.cursor/notepads/api-route.md
@@ -6,52 +6,47 @@ description: Template for creating Next.js API routes with proper error handling
 # API Route Template
 
 ## Basic Structure
+
 ```ts
-import { NextResponse } from "next/server"
-import { z } from "zod"
+import { NextResponse } from "next/server";
+import { z } from "zod";
 
 // Input validation schema
 const inputSchema = z.object({
   // Define input fields
-})
+});
 
 // Response type
 type ApiResponse = {
-  data?: unknown
-  error?: string
-}
+  data?: unknown;
+  error?: string;
+};
 
 export async function POST(req: Request) {
   try {
     // Parse and validate input
-    const body = await req.json()
-    const input = inputSchema.parse(body)
+    const body = await req.json();
+    const input = inputSchema.parse(body);
 
     // Handle request
-    const result = await handleRequest(input)
+    const result = await handleRequest(input);
 
     // Return success response
-    return NextResponse.json({ data: result })
-
+    return NextResponse.json({ data: result });
   } catch (error) {
     // Handle different error types
     if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: "Invalid input" },
-        { status: 400 }
-      )
+      return NextResponse.json({ error: "Invalid input" }, { status: 400 });
     }
 
-    console.error("API Error:", error)
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    )
+    console.error("API Error:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
   }
 }
 ```
 
 ## Best Practices
+
 - Always validate input with Zod
 - Use proper HTTP status codes
 - Implement rate limiting for public routes
@@ -61,6 +56,7 @@ export async function POST(req: Request) {
 - Document API endpoints
 
 ## Security Considerations
+
 - Validate authentication
 - Check authorization
 - Sanitize inputs
@@ -70,6 +66,7 @@ export async function POST(req: Request) {
 - Monitor for abuse
 
 ## Testing
+
 - Add integration tests
 - Test error cases
 - Validate response formats
diff --git a/.cursor/notepads/cloudflare-workers.md b/.cursor/notepads/cloudflare-workers.md
index 067eaa68..97647494 100644
--- a/.cursor/notepads/cloudflare-workers.md
+++ b/.cursor/notepads/cloudflare-workers.md
@@ -275,12 +275,12 @@ ALARM_EXAMPLE: DurableObject<Env>;
 }
 
 export default {
-  async fetch(request, env) {
-    let url = new URL(request.url);
-    let userId = url.searchParams.get("userId") || crypto.randomUUID();
-    let id = env.ALARM_EXAMPLE.idFromName(userId);
-    return await env.ALARM_EXAMPLE.get(id).fetch(request);
-  },
+async fetch(request, env) {
+let url = new URL(request.url);
+let userId = url.searchParams.get("userId") || crypto.randomUUID();
+let id = env.ALARM_EXAMPLE.idFromName(userId);
+return await env.ALARM_EXAMPLE.get(id).fetch(request);
+},
 };
 
 const SECONDS = 1000;
@@ -815,13 +815,13 @@ Use the Browser Rendering API as a headless browser to interact with websites fr
 import puppeteer from "@cloudflare/puppeteer";
 
 interface Env {
-  BROWSER_RENDERING: Fetcher;
+BROWSER_RENDERING: Fetcher;
 }
 
 export default {
-  async fetch(request, env): Promise<Response> {
-    const { searchParams } = new URL(request.url);
-    let url = searchParams.get("url");
+async fetch(request, env): Promise<Response> {
+const { searchParams } = new URL(request.url);
+let url = searchParams.get("url");
 
     if (url) {
       url = new URL(url).toString(); // normalize
@@ -847,7 +847,8 @@ export default {
           error: "Please add an ?url=https://example.com/ parameter"
       }, { status: 400 })
     }
-  },
+
+},
 } satisfies ExportedHandler<Env>;
 </code>
 
@@ -888,12 +889,12 @@ Serve Static Assets from a Cloudflare Worker and/or configure a Single Page Appl
 // src/index.ts
 
 interface Env {
-  ASSETS: Fetcher;
+ASSETS: Fetcher;
 }
 
 export default {
-  fetch(request, env) {
-    const url = new URL(request.url);
+fetch(request, env) {
+const url = new URL(request.url);
 
     if (url.pathname.startsWith("/api/")) {
       return Response.json({
@@ -902,21 +903,23 @@ export default {
     }
 
     return env.ASSETS.fetch(request);
-  },
+
+},
 } satisfies ExportedHandler<Env>;
 </code>
 <configuration>
 {
-  "name": "my-app",
-	"main": "src/index.ts",
-  "compatibility_date": "<TBD>",
-	"assets": { "directory": "./public/", "not_found_handling": "single-page-application", "binding": "ASSETS" },
-  "observability": {
-    "enabled": true
-  }
+"name": "my-app",
+"main": "src/index.ts",
+"compatibility_date": "<TBD>",
+"assets": { "directory": "./public/", "not_found_handling": "single-page-application", "binding": "ASSETS" },
+"observability": {
+"enabled": true
+}
 }
 </configuration>
 <key_points>
+
 - Configures a ASSETS binding
 - Uses /public/ as the directory the build output goes to from the framework of choice
 - The Worker will handle any requests that a path cannot be found for and serve as the API
@@ -937,17 +940,17 @@ import { Agent, AgentNamespace, Connection, ConnectionContext, getAgentByName, r
 import { OpenAI } from "openai";
 
 interface Env {
-	AIAgent: AgentNamespace<Agent>;
-	OPENAI_API_KEY: string;
+AIAgent: AgentNamespace<Agent>;
+OPENAI_API_KEY: string;
 }
 
 export class AIAgent extends Agent {
-	// Handle HTTP requests with your Agent
-  async onRequest(request) {
-    // Connect with AI capabilities
-    const ai = new OpenAI({
-      apiKey: this.env.OPENAI_API_KEY,
-    });
+// Handle HTTP requests with your Agent
+async onRequest(request) {
+// Connect with AI capabilities
+const ai = new OpenAI({
+apiKey: this.env.OPENAI_API_KEY,
+});
 
     // Process and understand
     const response = await ai.chat.completions.create({
@@ -956,59 +959,61 @@ export class AIAgent extends Agent {
     });
 
     return new Response(response.choices[0].message.content);
-  }
 
-  async processTask(task) {
-    await this.understand(task);
-    await this.act();
-    await this.reflect();
-  }
+}
 
-	// Handle WebSockets
-  async onConnect(connection: Connection) {
-   await this.initiate(connection);
-   connection.accept()
-  }
+async processTask(task) {
+await this.understand(task);
+await this.act();
+await this.reflect();
+}
 
-  async onMessage(connection, message) {
-    const understanding = await this.comprehend(message);
-    await this.respond(connection, understanding);
-  }
+    // Handle WebSockets
 
-  async evolve(newInsight) {
-      this.setState({
-        ...this.state,
-        insights: [...(this.state.insights || []), newInsight],
-        understanding: this.state.understanding + 1,
-      });
-    }
+async onConnect(connection: Connection) {
+await this.initiate(connection);
+connection.accept()
+}
 
-  onStateUpdate(state, source) {
-    console.log("Understanding deepened:", {
-      newState: state,
-      origin: source,
-    });
-  }
+async onMessage(connection, message) {
+const understanding = await this.comprehend(message);
+await this.respond(connection, understanding);
+}
 
-  // Scheduling APIs
-  // An Agent can schedule tasks to be run in the future by calling this.schedule(when, callback, data), where when can be a delay, a Date, or a cron string; callback the function name to call, and data is an object of data to pass to the function.
-  //
-  // Scheduled tasks can do anything a request or message from a user can: make requests, query databases, send emails, read+write state: scheduled tasks can invoke any regular method on your Agent.
-  async scheduleExamples() {
-  	// schedule a task to run in 10 seconds
-  	let task = await this.schedule(10, "someTask", { message: "hello" });
+async evolve(newInsight) {
+this.setState({
+...this.state,
+insights: [...(this.state.insights || []), newInsight],
+understanding: this.state.understanding + 1,
+});
+}
+
+onStateUpdate(state, source) {
+console.log("Understanding deepened:", {
+newState: state,
+origin: source,
+});
+}
+
+// Scheduling APIs
+// An Agent can schedule tasks to be run in the future by calling this.schedule(when, callback, data), where when can be a delay, a Date, or a cron string; callback the function name to call, and data is an object of data to pass to the function.
+//
+// Scheduled tasks can do anything a request or message from a user can: make requests, query databases, send emails, read+write state: scheduled tasks can invoke any regular method on your Agent.
+async scheduleExamples() {
+// schedule a task to run in 10 seconds
+let task = await this.schedule(10, "someTask", { message: "hello" });
 
-  	// schedule a task to run at a specific date
-  	let task = await this.schedule(new Date("2025-01-01"), "someTask", {});
+// schedule a task to run at a specific date
+let task = await this.schedule(new Date("2025-01-01"), "someTask", {});
 
-  	// schedule a task to run every 10 seconds
-  	let { id } = await this.schedule("*/10 * * * *", "someTask", { message: "hello" });
+// schedule a task to run every 10 seconds
+let { id } = await this.schedule("_/10 _ \* \* \*", "someTask", { message: "hello" });
 
-  	// schedule a task to run every 10 seconds, but only on Mondays
-  	let task = await this.schedule("0 0 * * 1", "someTask", { message: "hello" });
+// schedule a task to run every 10 seconds, but only on Mondays
+let task = await this.schedule("0 0 \* \* 1", "someTask", { message: "hello" });
 
-  	// cancel a scheduled task
-  	this.cancelSchedule(task.id);
+// cancel a scheduled task
+this.cancelSchedule(task.id);
 
     // Get a specific schedule by ID
     // Returns undefined if the task does not exist
@@ -1030,112 +1035,116 @@ export class AIAgent extends Agent {
         end: new Date(Date.now() + 60 * 60 * 1000),
       }
     });
-  }
 
-  async someTask(data) {
-    await this.callReasoningModel(data.message);
-  }
+}
 
-  // Use the this.sql API within the Agent to access the underlying SQLite database
- 	async callReasoningModel(prompt: Prompt) {
-  	interface Prompt {
-   		userId: string;
-   		user: string;
-   		system: string;
-   		metadata: Record<string, string>;
-		}
-
-		interface History {
-			timestamp: Date;
-			entry: string;
-		}
-
-		let result = this.sql<History>`SELECT * FROM history WHERE user = ${prompt.userId} ORDER BY timestamp DESC LIMIT 1000`;
-		let context = [];
-		for await (const row of result) {
-			context.push(row.entry);
-		}
-
-		const client = new OpenAI({
-			apiKey: this.env.OPENAI_API_KEY,
-		});
-
-		// Combine user history with the current prompt
-		const systemPrompt = prompt.system || 'You are a helpful assistant.';
-		const userPrompt = `${prompt.user}\n\nUser history:\n${context.join('\n')}`;
-
-		try {
-			const completion = await client.chat.completions.create({
-				model: this.env.MODEL || 'o3-mini',
-				messages: [
-					{ role: 'system', content: systemPrompt },
-					{ role: 'user', content: userPrompt },
-				],
-				temperature: 0.7,
-				max_tokens: 1000,
-			});
-
-			// Store the response in history
-			this
-				.sql`INSERT INTO history (timestamp, user, entry) VALUES (${new Date()}, ${prompt.userId}, ${completion.choices[0].message.content})`;
-
-			return completion.choices[0].message.content;
-		} catch (error) {
-			console.error('Error calling reasoning model:', error);
-			throw error;
-		}
-	}
-
-	// Use the SQL API with a type parameter
-	async queryUser(userId: string) {
-		type User = {
-			id: string;
-			name: string;
-			email: string;
-		};
-		// Supply the type paramter to the query when calling this.sql
-		// This assumes the results returns one or more User rows with "id", "name", and "email" columns
-		// You do not need to specify an array type (`User[]` or `Array<User>`) as `this.sql` will always return an array of the specified type.
-		const user = await this.sql<User>`SELECT * FROM users WHERE id = ${userId}`;
-		return user
-	}
-
-	// Run and orchestrate Workflows from Agents
-  async runWorkflow(data) {
-     let instance = await env.MY_WORKFLOW.create({
-       id: data.id,
-       params: data,
-     })
+async someTask(data) {
+await this.callReasoningModel(data.message);
+}
+
+// Use the this.sql API within the Agent to access the underlying SQLite database
+async callReasoningModel(prompt: Prompt) {
+interface Prompt {
+userId: string;
+user: string;
+system: string;
+metadata: Record<string, string>;
+}
+
+    	interface History {
+    		timestamp: Date;
+    		entry: string;
+    	}
+
+    	let result = this.sql<History>`SELECT * FROM history WHERE user = ${prompt.userId} ORDER BY timestamp DESC LIMIT 1000`;
+    	let context = [];
+    	for await (const row of result) {
+    		context.push(row.entry);
+    	}
+
+    	const client = new OpenAI({
+    		apiKey: this.env.OPENAI_API_KEY,
+    	});
+
+    	// Combine user history with the current prompt
+    	const systemPrompt = prompt.system || 'You are a helpful assistant.';
+    	const userPrompt = `${prompt.user}\n\nUser history:\n${context.join('\n')}`;
+
+    	try {
+    		const completion = await client.chat.completions.create({
+    			model: this.env.MODEL || 'o3-mini',
+    			messages: [
+    				{ role: 'system', content: systemPrompt },
+    				{ role: 'user', content: userPrompt },
+    			],
+    			temperature: 0.7,
+    			max_tokens: 1000,
+    		});
+
+    		// Store the response in history
+    		this
+    			.sql`INSERT INTO history (timestamp, user, entry) VALUES (${new Date()}, ${prompt.userId}, ${completion.choices[0].message.content})`;
+
+    		return completion.choices[0].message.content;
+    	} catch (error) {
+    		console.error('Error calling reasoning model:', error);
+    		throw error;
+    	}
+    }
+
+    // Use the SQL API with a type parameter
+    async queryUser(userId: string) {
+    	type User = {
+    		id: string;
+    		name: string;
+    		email: string;
+    	};
+    	// Supply the type paramter to the query when calling this.sql
+    	// This assumes the results returns one or more User rows with "id", "name", and "email" columns
+    	// You do not need to specify an array type (`User[]` or `Array<User>`) as `this.sql` will always return an array of the specified type.
+    	const user = await this.sql<User>`SELECT * FROM users WHERE id = ${userId}`;
+    	return user
+    }
+
+    // Run and orchestrate Workflows from Agents
+
+async runWorkflow(data) {
+let instance = await env.MY_WORKFLOW.create({
+id: data.id,
+params: data,
+})
 
      // Schedule another task that checks the Workflow status every 5 minutes...
      await this.schedule("*/5 * * * *", "checkWorkflowStatus", { id: instance.id });
-   }
+
+}
 }
 
 export default {
-	async fetch(request, env, ctx): Promise<Response> {
-		// Routed addressing
-		// Automatically routes HTTP requests and/or WebSocket connections to /agents/:agent/:name
-		// Best for: connecting React apps directly to Agents using useAgent from @cloudflare/agents/react
-		return (await routeAgentRequest(request, env)) || Response.json({ msg: 'no agent here' }, { status: 404 });
-
-		// Named addressing
-		// Best for: convenience method for creating or retrieving an agent by name/ID.
-		let namedAgent = getAgentByName<Env, AIAgent>(env.AIAgent, 'agent-456');
-		// Pass the incoming request straight to your Agent
-		let namedResp = (await namedAgent).fetch(request);
-		return namedResp;
-
-		// Durable Objects-style addressing
-		// Best for: controlling ID generation, associating IDs with your existing systems,
-		// and customizing when/how an Agent is created or invoked
-		const id = env.AIAgent.newUniqueId();
-		const agent = env.AIAgent.get(id);
-		// Pass the incoming request straight to your Agent
-		let resp = await agent.fetch(request);
-
-		// return Response.json({ hello: 'visit https://developers.cloudflare.com/agents for more' });
-	},
+async fetch(request, env, ctx): Promise<Response> {
+// Routed addressing
+// Automatically routes HTTP requests and/or WebSocket connections to /agents/:agent/:name
+// Best for: connecting React apps directly to Agents using useAgent from @cloudflare/agents/react
+return (await routeAgentRequest(request, env)) || Response.json({ msg: 'no agent here' }, { status: 404 });
+
+    	// Named addressing
+    	// Best for: convenience method for creating or retrieving an agent by name/ID.
+    	let namedAgent = getAgentByName<Env, AIAgent>(env.AIAgent, 'agent-456');
+    	// Pass the incoming request straight to your Agent
+    	let namedResp = (await namedAgent).fetch(request);
+    	return namedResp;
+
+    	// Durable Objects-style addressing
+    	// Best for: controlling ID generation, associating IDs with your existing systems,
+    	// and customizing when/how an Agent is created or invoked
+    	const id = env.AIAgent.newUniqueId();
+    	const agent = env.AIAgent.get(id);
+    	// Pass the incoming request straight to your Agent
+    	let resp = await agent.fetch(request);
+
+    	// return Response.json({ hello: 'visit https://developers.cloudflare.com/agents for more' });
+    },
+
 } satisfies ExportedHandler<Env>;
 </code>
 
@@ -1144,19 +1153,19 @@ export default {
 import { AgentClient } from "agents-sdk/client";
 
 const connection = new AgentClient({
-  agent: "dialogue-agent",
-  name: "insight-seeker",
+agent: "dialogue-agent",
+name: "insight-seeker",
 });
 
 connection.addEventListener("message", (event) => {
-  console.log("Received:", event.data);
+console.log("Received:", event.data);
 });
 
 connection.send(
-  JSON.stringify({
-    type: "inquiry",
-    content: "What patterns do you see?",
-  })
+JSON.stringify({
+type: "inquiry",
+content: "What patterns do you see?",
+})
 );
 </code>
 
@@ -1168,51 +1177,51 @@ import { useState } from "react";
 
 // useAgent client API
 function AgentInterface() {
-  const connection = useAgent({
-    agent: "dialogue-agent",
-    name: "insight-seeker",
-    onMessage: (message) => {
-      console.log("Understanding received:", message.data);
-    },
-    onOpen: () => console.log("Connection established"),
-    onClose: () => console.log("Connection closed"),
-  });
-
-  const inquire = () => {
-    connection.send(
-      JSON.stringify({
-        type: "inquiry",
-        content: "What insights have you gathered?",
-      })
-    );
-  };
+const connection = useAgent({
+agent: "dialogue-agent",
+name: "insight-seeker",
+onMessage: (message) => {
+console.log("Understanding received:", message.data);
+},
+onOpen: () => console.log("Connection established"),
+onClose: () => console.log("Connection closed"),
+});
 
-  return (
-    <div className="agent-interface">
-      <button onClick={inquire}>Seek Understanding</button>
-    </div>
-  );
+const inquire = () => {
+connection.send(
+JSON.stringify({
+type: "inquiry",
+content: "What insights have you gathered?",
+})
+);
+};
+
+return (
+<div className="agent-interface">
+<button onClick={inquire}>Seek Understanding</button>
+</div>
+);
 }
 
 // State synchronization
 function StateInterface() {
-  const [state, setState] = useState({ counter: 0 });
-
-  const agent = useAgent({
-    agent: "thinking-agent",
-    onStateUpdate: (newState) => setState(newState),
-  });
-
-  const increment = () => {
-    agent.setState({ counter: state.counter + 1 });
-  };
-
-  return (
-    <div>
-      <div>Count: {state.counter}</div>
-      <button onClick={increment}>Increment</button>
-    </div>
-  );
+const [state, setState] = useState({ counter: 0 });
+
+const agent = useAgent({
+agent: "thinking-agent",
+onStateUpdate: (newState) => setState(newState),
+});
+
+const increment = () => {
+agent.setState({ counter: state.counter + 1 });
+};
+
+return (
+<div>
+<div>Count: {state.counter}</div>
+<button onClick={increment}>Increment</button>
+</div>
+);
 }
 </code>
 
@@ -1255,60 +1264,61 @@ Workers AI supports structured JSON outputs with JSON mode, which supports the `
 import { OpenAI } from "openai";
 
 interface Env {
-	OPENAI_API_KEY: string;
+OPENAI_API_KEY: string;
 }
 
 // Define your JSON schema for a calendar event
 const CalendarEventSchema = {
-  type: 'object',
-  properties: {
-    name: { type: 'string' },
-    date: { type: 'string' },
-    participants: { type: 'array', items: { type: 'string' } },
-  },
-  required: ['name', 'date', 'participants']
+type: 'object',
+properties: {
+name: { type: 'string' },
+date: { type: 'string' },
+participants: { type: 'array', items: { type: 'string' } },
+},
+required: ['name', 'date', 'participants']
 };
 
 export default {
-	async fetch(request: Request, env: Env) {
-		const client = new OpenAI({
-			apiKey: env.OPENAI_API_KEY,
-			// Optional: use AI Gateway to bring logs, evals & caching to your AI requests
-			// https://developers.cloudflare.com/ai-gateway/providers/openai/
-			// baseUrl: "https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai"
-		});
-
-		const response = await client.chat.completions.create({
-	    model: 'gpt-4o-2024-08-06',
-	    messages: [
-	      { role: 'system', content: 'Extract the event information.' },
-	      { role: 'user', content: 'Alice and Bob are going to a science fair on Friday.' },
-	    ],
-			// Use the `response_format` option to request a structured JSON output
-	    response_format: {
-				// Set json_schema and provide ra schema, or json_object and parse it yourself
-	      type: 'json_schema',
-	      schema: CalendarEventSchema, // provide a schema
-	    },
-	  });
-
-		// This will be of type CalendarEventSchema
-		const event = response.choices[0].message.parsed;
-
-		return Response.json({
-			"calendar_event": event,
-		})
-	}
+async fetch(request: Request, env: Env) {
+const client = new OpenAI({
+apiKey: env.OPENAI_API_KEY,
+// Optional: use AI Gateway to bring logs, evals & caching to your AI requests
+// https://developers.cloudflare.com/ai-gateway/providers/openai/
+// baseUrl: "https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai"
+});
+
+    	const response = await client.chat.completions.create({
+        model: 'gpt-4o-2024-08-06',
+        messages: [
+          { role: 'system', content: 'Extract the event information.' },
+          { role: 'user', content: 'Alice and Bob are going to a science fair on Friday.' },
+        ],
+    		// Use the `response_format` option to request a structured JSON output
+        response_format: {
+    			// Set json_schema and provide ra schema, or json_object and parse it yourself
+          type: 'json_schema',
+          schema: CalendarEventSchema, // provide a schema
+        },
+      });
+
+    	// This will be of type CalendarEventSchema
+    	const event = response.choices[0].message.parsed;
+
+    	return Response.json({
+    		"calendar_event": event,
+    	})
+    }
+
 }
 </code>
 <configuration>
 {
-  "name": "my-app",
-	"main": "src/index.ts",
-  "compatibility_date": "$CURRENT_DATE",
-  "observability": {
-    "enabled": true
-  }
+"name": "my-app",
+"main": "src/index.ts",
+"compatibility_date": "$CURRENT_DATE",
+"observability": {
+"enabled": true
+}
 }
 </configuration>
 <key_points>
@@ -1344,20 +1354,21 @@ export class WebSocketHibernationServer extends DurableObject {
           status: 101,
           webSocket: client,
     });
+
 },
 
 async webSocketMessage(ws: WebSocket, message: string | ArrayBuffer): void | Promise<void> {
-  // Invoked on each WebSocket message.
-  ws.send(message)
+// Invoked on each WebSocket message.
+ws.send(message)
 },
 
 async webSocketClose(ws: WebSocket, code: number, reason: string, wasClean: boolean) void | Promise<void> {
-  // Invoked when a client closes the connection.
-  ws.close(code, "<message>");
+// Invoked when a client closes the connection.
+ws.close(code, "<message>");
 },
 
 async webSocketError(ws: WebSocket, error: unknown): void | Promise<void> {
-  // Handle WebSocket errors
+// Handle WebSocket errors
 }
 }
 </implementation>
diff --git a/.cursor/notepads/cloudflare-workers.mdx b/.cursor/notepads/cloudflare-workers.mdx
index 067eaa68..8fa1dafa 100644
--- a/.cursor/notepads/cloudflare-workers.mdx
+++ b/.cursor/notepads/cloudflare-workers.mdx
@@ -99,6 +99,7 @@ You are an advanced assistant specialized in generating Cloudflare Workers code.
 - Sets `observability.enabled: true`
 
 </key_points>
+
 </example>
 </configuration_requirements>
 
@@ -423,6 +424,7 @@ export default app
 - Returns a 403 if the token is invalid or expired
 
 </key_points>
+
 </example>
 
 <example id="queue_producer_consumer_example">
@@ -511,6 +513,7 @@ const requests = batch.messages.map(msg => msg.body);
 - Shows how to batch requests to an upstream API
 
 </key_points>
+
 </example>
 
 <example id="hyperdrive_connect_to_postgres">
@@ -592,6 +595,7 @@ npx wrangler hyperdrive create <YOUR_CONFIG_NAME> --connection-string="postgres:
 - Calling `sql.end()` is optional, as Hyperdrive will handle the connection pooling.
 
 </key_points>
+
 </example>
 
 <example id="workflows">
@@ -724,6 +728,7 @@ let url = new URL(req.url);
 - Defines a payload type and uses TypeScript type arguments to ensure type safety
 
 </key_points>
+
 </example>
 
 <example id="workers_analytics_engine">
@@ -815,7 +820,7 @@ Use the Browser Rendering API as a headless browser to interact with websites fr
 import puppeteer from "@cloudflare/puppeteer";
 
 interface Env {
-  BROWSER_RENDERING: Fetcher;
+BROWSER_RENDERING: Fetcher;
 }
 
 export default {
@@ -847,8 +852,10 @@ export default {
           error: "Please add an ?url=https://example.com/ parameter"
       }, { status: 400 })
     }
-  },
+
+},
 } satisfies ExportedHandler<Env>;
+
 </code>
 
 <configuration>
@@ -864,10 +871,7 @@ export default {
 }
 </configuration>
 
-<usage>
-// Install @cloudflare/puppeteer
-npm install @cloudflare/puppeteer --save-dev
-</usage>
+<usage>// Install @cloudflare/puppeteer npm install @cloudflare/puppeteer --save-dev</usage>
 
 <key_points>
 
@@ -878,6 +882,7 @@ npm install @cloudflare/puppeteer --save-dev
 - Correctly creates and closes the browser instance
 
 </key_points>
+
 </example>
 
 <example id="static-assets">
@@ -888,7 +893,7 @@ Serve Static Assets from a Cloudflare Worker and/or configure a Single Page Appl
 // src/index.ts
 
 interface Env {
-  ASSETS: Fetcher;
+ASSETS: Fetcher;
 }
 
 export default {
@@ -902,8 +907,10 @@ export default {
     }
 
     return env.ASSETS.fetch(request);
-  },
+
+},
 } satisfies ExportedHandler<Env>;
+
 </code>
 <configuration>
 {
@@ -923,6 +930,7 @@ export default {
 - If the application is a single-page application (SPA), HTTP 404 (Not Found) requests will direct to the SPA.
 
 </key_points>
+
 </example>
 
 <example id="agents-sdk">
@@ -937,8 +945,8 @@ import { Agent, AgentNamespace, Connection, ConnectionContext, getAgentByName, r
 import { OpenAI } from "openai";
 
 interface Env {
-	AIAgent: AgentNamespace<Agent>;
-	OPENAI_API_KEY: string;
+AIAgent: AgentNamespace<Agent>;
+OPENAI_API_KEY: string;
 }
 
 export class AIAgent extends Agent {
@@ -956,59 +964,61 @@ export class AIAgent extends Agent {
     });
 
     return new Response(response.choices[0].message.content);
-  }
 
-  async processTask(task) {
-    await this.understand(task);
-    await this.act();
-    await this.reflect();
-  }
+}
 
-	// Handle WebSockets
-  async onConnect(connection: Connection) {
-   await this.initiate(connection);
-   connection.accept()
-  }
+async processTask(task) {
+await this.understand(task);
+await this.act();
+await this.reflect();
+}
 
-  async onMessage(connection, message) {
-    const understanding = await this.comprehend(message);
-    await this.respond(connection, understanding);
-  }
+    // Handle WebSockets
 
-  async evolve(newInsight) {
-      this.setState({
-        ...this.state,
-        insights: [...(this.state.insights || []), newInsight],
-        understanding: this.state.understanding + 1,
-      });
-    }
+async onConnect(connection: Connection) {
+await this.initiate(connection);
+connection.accept()
+}
 
-  onStateUpdate(state, source) {
-    console.log("Understanding deepened:", {
-      newState: state,
-      origin: source,
-    });
-  }
+async onMessage(connection, message) {
+const understanding = await this.comprehend(message);
+await this.respond(connection, understanding);
+}
 
-  // Scheduling APIs
-  // An Agent can schedule tasks to be run in the future by calling this.schedule(when, callback, data), where when can be a delay, a Date, or a cron string; callback the function name to call, and data is an object of data to pass to the function.
-  //
-  // Scheduled tasks can do anything a request or message from a user can: make requests, query databases, send emails, read+write state: scheduled tasks can invoke any regular method on your Agent.
-  async scheduleExamples() {
-  	// schedule a task to run in 10 seconds
-  	let task = await this.schedule(10, "someTask", { message: "hello" });
+async evolve(newInsight) {
+this.setState({
+...this.state,
+insights: [...(this.state.insights || []), newInsight],
+understanding: this.state.understanding + 1,
+});
+}
+
+onStateUpdate(state, source) {
+console.log("Understanding deepened:", {
+newState: state,
+origin: source,
+});
+}
 
-  	// schedule a task to run at a specific date
-  	let task = await this.schedule(new Date("2025-01-01"), "someTask", {});
+// Scheduling APIs
+// An Agent can schedule tasks to be run in the future by calling this.schedule(when, callback, data), where when can be a delay, a Date, or a cron string; callback the function name to call, and data is an object of data to pass to the function.
+//
+// Scheduled tasks can do anything a request or message from a user can: make requests, query databases, send emails, read+write state: scheduled tasks can invoke any regular method on your Agent.
+async scheduleExamples() {
+// schedule a task to run in 10 seconds
+let task = await this.schedule(10, "someTask", { message: "hello" });
 
-  	// schedule a task to run every 10 seconds
-  	let { id } = await this.schedule("*/10 * * * *", "someTask", { message: "hello" });
+// schedule a task to run at a specific date
+let task = await this.schedule(new Date("2025-01-01"), "someTask", {});
 
-  	// schedule a task to run every 10 seconds, but only on Mondays
-  	let task = await this.schedule("0 0 * * 1", "someTask", { message: "hello" });
+// schedule a task to run every 10 seconds
+let { id } = await this.schedule("_/10 _ \* \* \*", "someTask", { message: "hello" });
 
-  	// cancel a scheduled task
-  	this.cancelSchedule(task.id);
+// schedule a task to run every 10 seconds, but only on Mondays
+let task = await this.schedule("0 0 \* \* 1", "someTask", { message: "hello" });
+
+// cancel a scheduled task
+this.cancelSchedule(task.id);
 
     // Get a specific schedule by ID
     // Returns undefined if the task does not exist
@@ -1030,86 +1040,89 @@ export class AIAgent extends Agent {
         end: new Date(Date.now() + 60 * 60 * 1000),
       }
     });
-  }
 
-  async someTask(data) {
-    await this.callReasoningModel(data.message);
-  }
+}
 
-  // Use the this.sql API within the Agent to access the underlying SQLite database
- 	async callReasoningModel(prompt: Prompt) {
-  	interface Prompt {
-   		userId: string;
-   		user: string;
-   		system: string;
-   		metadata: Record<string, string>;
-		}
-
-		interface History {
-			timestamp: Date;
-			entry: string;
-		}
-
-		let result = this.sql<History>`SELECT * FROM history WHERE user = ${prompt.userId} ORDER BY timestamp DESC LIMIT 1000`;
-		let context = [];
-		for await (const row of result) {
-			context.push(row.entry);
-		}
+async someTask(data) {
+await this.callReasoningModel(data.message);
+}
 
-		const client = new OpenAI({
-			apiKey: this.env.OPENAI_API_KEY,
-		});
+// Use the this.sql API within the Agent to access the underlying SQLite database
+async callReasoningModel(prompt: Prompt) {
+interface Prompt {
+userId: string;
+user: string;
+system: string;
+metadata: Record<string, string>;
+}
 
-		// Combine user history with the current prompt
-		const systemPrompt = prompt.system || 'You are a helpful assistant.';
-		const userPrompt = `${prompt.user}\n\nUser history:\n${context.join('\n')}`;
-
-		try {
-			const completion = await client.chat.completions.create({
-				model: this.env.MODEL || 'o3-mini',
-				messages: [
-					{ role: 'system', content: systemPrompt },
-					{ role: 'user', content: userPrompt },
-				],
-				temperature: 0.7,
-				max_tokens: 1000,
-			});
-
-			// Store the response in history
-			this
-				.sql`INSERT INTO history (timestamp, user, entry) VALUES (${new Date()}, ${prompt.userId}, ${completion.choices[0].message.content})`;
-
-			return completion.choices[0].message.content;
-		} catch (error) {
-			console.error('Error calling reasoning model:', error);
-			throw error;
-		}
-	}
-
-	// Use the SQL API with a type parameter
-	async queryUser(userId: string) {
-		type User = {
-			id: string;
-			name: string;
-			email: string;
-		};
-		// Supply the type paramter to the query when calling this.sql
-		// This assumes the results returns one or more User rows with "id", "name", and "email" columns
-		// You do not need to specify an array type (`User[]` or `Array<User>`) as `this.sql` will always return an array of the specified type.
-		const user = await this.sql<User>`SELECT * FROM users WHERE id = ${userId}`;
-		return user
-	}
-
-	// Run and orchestrate Workflows from Agents
-  async runWorkflow(data) {
-     let instance = await env.MY_WORKFLOW.create({
-       id: data.id,
-       params: data,
-     })
+    	interface History {
+    		timestamp: Date;
+    		entry: string;
+    	}
+
+    	let result = this.sql<History>`SELECT * FROM history WHERE user = ${prompt.userId} ORDER BY timestamp DESC LIMIT 1000`;
+    	let context = [];
+    	for await (const row of result) {
+    		context.push(row.entry);
+    	}
+
+    	const client = new OpenAI({
+    		apiKey: this.env.OPENAI_API_KEY,
+    	});
+
+    	// Combine user history with the current prompt
+    	const systemPrompt = prompt.system || 'You are a helpful assistant.';
+    	const userPrompt = `${prompt.user}\n\nUser history:\n${context.join('\n')}`;
+
+    	try {
+    		const completion = await client.chat.completions.create({
+    			model: this.env.MODEL || 'o3-mini',
+    			messages: [
+    				{ role: 'system', content: systemPrompt },
+    				{ role: 'user', content: userPrompt },
+    			],
+    			temperature: 0.7,
+    			max_tokens: 1000,
+    		});
+
+    		// Store the response in history
+    		this
+    			.sql`INSERT INTO history (timestamp, user, entry) VALUES (${new Date()}, ${prompt.userId}, ${completion.choices[0].message.content})`;
+
+    		return completion.choices[0].message.content;
+    	} catch (error) {
+    		console.error('Error calling reasoning model:', error);
+    		throw error;
+    	}
+    }
+
+    // Use the SQL API with a type parameter
+    async queryUser(userId: string) {
+    	type User = {
+    		id: string;
+    		name: string;
+    		email: string;
+    	};
+    	// Supply the type paramter to the query when calling this.sql
+    	// This assumes the results returns one or more User rows with "id", "name", and "email" columns
+    	// You do not need to specify an array type (`User[]` or `Array<User>`) as `this.sql` will always return an array of the specified type.
+    	const user = await this.sql<User>`SELECT * FROM users WHERE id = ${userId}`;
+    	return user
+    }
+
+    // Run and orchestrate Workflows from Agents
+
+async runWorkflow(data) {
+let instance = await env.MY_WORKFLOW.create({
+id: data.id,
+params: data,
+})
 
      // Schedule another task that checks the Workflow status every 5 minutes...
      await this.schedule("*/5 * * * *", "checkWorkflowStatus", { id: instance.id });
-   }
+
+}
 }
 
 export default {
@@ -1119,24 +1132,26 @@ export default {
 		// Best for: connecting React apps directly to Agents using useAgent from @cloudflare/agents/react
 		return (await routeAgentRequest(request, env)) || Response.json({ msg: 'no agent here' }, { status: 404 });
 
-		// Named addressing
-		// Best for: convenience method for creating or retrieving an agent by name/ID.
-		let namedAgent = getAgentByName<Env, AIAgent>(env.AIAgent, 'agent-456');
-		// Pass the incoming request straight to your Agent
-		let namedResp = (await namedAgent).fetch(request);
-		return namedResp;
-
-		// Durable Objects-style addressing
-		// Best for: controlling ID generation, associating IDs with your existing systems,
-		// and customizing when/how an Agent is created or invoked
-		const id = env.AIAgent.newUniqueId();
-		const agent = env.AIAgent.get(id);
-		// Pass the incoming request straight to your Agent
-		let resp = await agent.fetch(request);
-
-		// return Response.json({ hello: 'visit https://developers.cloudflare.com/agents for more' });
-	},
+    	// Named addressing
+    	// Best for: convenience method for creating or retrieving an agent by name/ID.
+    	let namedAgent = getAgentByName<Env, AIAgent>(env.AIAgent, 'agent-456');
+    	// Pass the incoming request straight to your Agent
+    	let namedResp = (await namedAgent).fetch(request);
+    	return namedResp;
+
+    	// Durable Objects-style addressing
+    	// Best for: controlling ID generation, associating IDs with your existing systems,
+    	// and customizing when/how an Agent is created or invoked
+    	const id = env.AIAgent.newUniqueId();
+    	const agent = env.AIAgent.get(id);
+    	// Pass the incoming request straight to your Agent
+    	let resp = await agent.fetch(request);
+
+    	// return Response.json({ hello: 'visit https://developers.cloudflare.com/agents for more' });
+    },
+
 } satisfies ExportedHandler<Env>;
+
 </code>
 
 <code>
@@ -1144,20 +1159,21 @@ export default {
 import { AgentClient } from "agents-sdk/client";
 
 const connection = new AgentClient({
-  agent: "dialogue-agent",
-  name: "insight-seeker",
+agent: "dialogue-agent",
+name: "insight-seeker",
 });
 
 connection.addEventListener("message", (event) => {
-  console.log("Received:", event.data);
+console.log("Received:", event.data);
 });
 
 connection.send(
-  JSON.stringify({
-    type: "inquiry",
-    content: "What patterns do you see?",
-  })
+JSON.stringify({
+type: "inquiry",
+content: "What patterns do you see?",
+})
 );
+
 </code>
 
 <code>
@@ -1168,52 +1184,55 @@ import { useState } from "react";
 
 // useAgent client API
 function AgentInterface() {
-  const connection = useAgent({
-    agent: "dialogue-agent",
-    name: "insight-seeker",
-    onMessage: (message) => {
-      console.log("Understanding received:", message.data);
-    },
-    onOpen: () => console.log("Connection established"),
-    onClose: () => console.log("Connection closed"),
-  });
-
-  const inquire = () => {
-    connection.send(
-      JSON.stringify({
-        type: "inquiry",
-        content: "What insights have you gathered?",
-      })
-    );
-  };
+const connection = useAgent({
+agent: "dialogue-agent",
+name: "insight-seeker",
+onMessage: (message) => {
+console.log("Understanding received:", message.data);
+},
+onOpen: () => console.log("Connection established"),
+onClose: () => console.log("Connection closed"),
+});
+
+const inquire = () => {
+connection.send(
+JSON.stringify({
+type: "inquiry",
+content: "What insights have you gathered?",
+})
+);
+};
 
-  return (
-    <div className="agent-interface">
-      <button onClick={inquire}>Seek Understanding</button>
-    </div>
-  );
+return (
+
+<div className="agent-interface">
+<button onClick={inquire}>Seek Understanding</button>
+</div>
+);
 }
 
 // State synchronization
 function StateInterface() {
-  const [state, setState] = useState({ counter: 0 });
-
-  const agent = useAgent({
-    agent: "thinking-agent",
-    onStateUpdate: (newState) => setState(newState),
-  });
-
-  const increment = () => {
-    agent.setState({ counter: state.counter + 1 });
-  };
-
-  return (
-    <div>
-      <div>Count: {state.counter}</div>
-      <button onClick={increment}>Increment</button>
-    </div>
-  );
+const [state, setState] = useState({ counter: 0 });
+
+const agent = useAgent({
+agent: "thinking-agent",
+onStateUpdate: (newState) => setState(newState),
+});
+
+const increment = () => {
+agent.setState({ counter: state.counter + 1 });
+};
+
+return (
+
+<div>
+<div>Count: {state.counter}</div>
+<button onClick={increment}>Increment</button>
+</div>
+);
 }
+
 </code>
 
 <configuration>
@@ -1245,6 +1264,7 @@ function StateInterface() {
 - For frontend applications, uses the optional `useAgent` hook to connect to the Agent via WebSockets
 
 </key_points>
+
 </example>
 
 <example id="workers-ai-structured-outputs-json">
@@ -1255,18 +1275,18 @@ Workers AI supports structured JSON outputs with JSON mode, which supports the `
 import { OpenAI } from "openai";
 
 interface Env {
-	OPENAI_API_KEY: string;
+OPENAI_API_KEY: string;
 }
 
 // Define your JSON schema for a calendar event
 const CalendarEventSchema = {
-  type: 'object',
-  properties: {
-    name: { type: 'string' },
-    date: { type: 'string' },
-    participants: { type: 'array', items: { type: 'string' } },
-  },
-  required: ['name', 'date', 'participants']
+type: 'object',
+properties: {
+name: { type: 'string' },
+date: { type: 'string' },
+participants: { type: 'array', items: { type: 'string' } },
+},
+required: ['name', 'date', 'participants']
 };
 
 export default {
@@ -1278,28 +1298,30 @@ export default {
 			// baseUrl: "https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai"
 		});
 
-		const response = await client.chat.completions.create({
-	    model: 'gpt-4o-2024-08-06',
-	    messages: [
-	      { role: 'system', content: 'Extract the event information.' },
-	      { role: 'user', content: 'Alice and Bob are going to a science fair on Friday.' },
-	    ],
-			// Use the `response_format` option to request a structured JSON output
-	    response_format: {
-				// Set json_schema and provide ra schema, or json_object and parse it yourself
-	      type: 'json_schema',
-	      schema: CalendarEventSchema, // provide a schema
-	    },
-	  });
-
-		// This will be of type CalendarEventSchema
-		const event = response.choices[0].message.parsed;
-
-		return Response.json({
-			"calendar_event": event,
-		})
-	}
+    	const response = await client.chat.completions.create({
+        model: 'gpt-4o-2024-08-06',
+        messages: [
+          { role: 'system', content: 'Extract the event information.' },
+          { role: 'user', content: 'Alice and Bob are going to a science fair on Friday.' },
+        ],
+    		// Use the `response_format` option to request a structured JSON output
+        response_format: {
+    			// Set json_schema and provide ra schema, or json_object and parse it yourself
+          type: 'json_schema',
+          schema: CalendarEventSchema, // provide a schema
+        },
+      });
+
+    	// This will be of type CalendarEventSchema
+    	const event = response.choices[0].message.parsed;
+
+    	return Response.json({
+    		"calendar_event": event,
+    	})
+    }
+
 }
+
 </code>
 <configuration>
 {
@@ -1319,6 +1341,7 @@ export default {
 - Optionally uses AI Gateway to cache, log and instrument requests and responses between a client and the AI provider/API.
 
 </key_points>
+
 </example>
 
 </code_examples>
@@ -1344,22 +1367,24 @@ export class WebSocketHibernationServer extends DurableObject {
           status: 101,
           webSocket: client,
     });
+
 },
 
 async webSocketMessage(ws: WebSocket, message: string | ArrayBuffer): void | Promise<void> {
-  // Invoked on each WebSocket message.
-  ws.send(message)
+// Invoked on each WebSocket message.
+ws.send(message)
 },
 
 async webSocketClose(ws: WebSocket, code: number, reason: string, wasClean: boolean) void | Promise<void> {
-  // Invoked when a client closes the connection.
-  ws.close(code, "<message>");
+// Invoked when a client closes the connection.
+ws.close(code, "<message>");
 },
 
 async webSocketError(ws: WebSocket, error: unknown): void | Promise<void> {
-  // Handle WebSocket errors
+// Handle WebSocket errors
 }
 }
+
 </implementation>
 </pattern>
 </api_patterns>
diff --git a/.cursor/notepads/component-generator.md b/.cursor/notepads/component-generator.md
index b2494a17..7d9dff41 100644
--- a/.cursor/notepads/component-generator.md
+++ b/.cursor/notepads/component-generator.md
@@ -6,18 +6,16 @@ description: Template for generating new React components following project stan
 # Component Generator Template
 
 ## Component Structure
+
 ```tsx
-import { cn } from "@/lib/utils"
-import type { HTMLAttributes } from "react"
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
 
 interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
   // Add custom props here
 }
 
-export const Component = ({
-  className,
-  ...props
-}: ComponentProps) => {
+export const Component = ({ className, ...props }: ComponentProps) => {
   return (
     <div
       className={cn(
@@ -27,11 +25,12 @@ export const Component = ({
       )}
       {...props}
     />
-  )
-}
+  );
+};
 ```
 
 ## Usage Guidelines
+
 - Place in appropriate directory under `src/components/`
 - Use kebab-case for filenames
 - Include proper TypeScript types
@@ -39,6 +38,7 @@ export const Component = ({
 - Include unit tests in `__tests__` directory
 
 ## Common Patterns
+
 - Use composition over inheritance
 - Implement proper accessibility patterns
 - Consider mobile-first responsive design
@@ -46,9 +46,10 @@ export const Component = ({
 - Include proper aria labels
 
 ## Required Files
-- Component file (*.tsx)
-- Test file (*.test.tsx)
-- Stories if visual component (*.stories.tsx)
+
+- Component file (\*.tsx)
+- Test file (\*.test.tsx)
+- Stories if visual component (\*.stories.tsx)
 
 @accessibility.mdc
 @react.mdc
diff --git a/.cursor/notepads/nextjs-audit-best-practices.md b/.cursor/notepads/nextjs-audit-best-practices.md
index 4a89700e..2daceb3b 100644
--- a/.cursor/notepads/nextjs-audit-best-practices.md
+++ b/.cursor/notepads/nextjs-audit-best-practices.md
@@ -5,39 +5,39 @@
 **Key Areas and Anti-patterns to Check:**
 
 1. **Component Boundaries (`"use client"` usage):**
-    * Identify components marked with `"use client"` that *do not* use client-specific hooks (like `useState`, `useEffect`, `useContext`) or browser APIs. These might be convertible to Server Components.
-    * Check for Server Components nested directly within the JSX of Client Components. Server Components should be passed as `children` or props.
+   - Identify components marked with `"use client"` that _do not_ use client-specific hooks (like `useState`, `useEffect`, `useContext`) or browser APIs. These might be convertible to Server Components.
+   - Check for Server Components nested directly within the JSX of Client Components. Server Components should be passed as `children` or props.
 
 2. **Data Fetching:**
-    * Locate data fetching performed within `useEffect` hooks in Client Components. This should ideally be moved to ancestor Server Components.
-    * Find instances where Server Actions (`"use server"`) are used primarily for *fetching* data rather than mutations. Data fetching should occur directly in Server Components.
-    * Verify that data fetching in Server Components follows recommended patterns (e.g., direct `await` in async components).
+   - Locate data fetching performed within `useEffect` hooks in Client Components. This should ideally be moved to ancestor Server Components.
+   - Find instances where Server Actions (`"use server"`) are used primarily for _fetching_ data rather than mutations. Data fetching should occur directly in Server Components.
+   - Verify that data fetching in Server Components follows recommended patterns (e.g., direct `await` in async components).
 
 3. **Server Actions:**
-    * Review Server Actions (`"use server"` functions) to ensure they are primarily used for data *mutations* (create, update, delete).
-    * Check if complex business logic resides within Server Actions; this logic should ideally be extracted into separate service functions (`@/server/services`) called by the action.
+   - Review Server Actions (`"use server"` functions) to ensure they are primarily used for data _mutations_ (create, update, delete).
+   - Check if complex business logic resides within Server Actions; this logic should ideally be extracted into separate service functions (`@/server/services`) called by the action.
 
 4. **Routing and Linking:**
-    * Identify uses of imperative navigation (e.g., `router.push` from `useRouter`) in Client Components where a declarative `<Link>` component (`@/components/primitives/link-with-transition`) would be sufficient and preferred.
+   - Identify uses of imperative navigation (e.g., `router.push` from `useRouter`) in Client Components where a declarative `<Link>` component (`@/components/primitives/link-with-transition`) would be sufficient and preferred.
 
 5. **State Management:**
-    * Look for client-side state (`useState`, `useReducer`) used to store data fetched from the server. Consider if this state is necessary or if the data can be directly passed down from Server Components.
+   - Look for client-side state (`useState`, `useReducer`) used to store data fetched from the server. Consider if this state is necessary or if the data can be directly passed down from Server Components.
 
 6. **Deprecated Patterns:**
-    * Ensure there are no remnants of the `pages` router (e.g., `getServerSideProps`, `getStaticProps` functions, `_app.tsx`, `_document.tsx` files within `src/pages`).
+   - Ensure there are no remnants of the `pages` router (e.g., `getServerSideProps`, `getStaticProps` functions, `_app.tsx`, `_document.tsx` files within `src/pages`).
 
 **Output Format:**
 
 For each identified deviation:
 
-* **File:** Provide the full path to the file (e.g., `src/app/some/path/component.tsx`).
-* **Line(s):** Specify the relevant line number(s).
-* **Issue:** Briefly describe the deviation found (e.g., "Data fetching in useEffect", "Server component nested in client component", "Server action used for fetching").
-* **Suggestion:** Recommend the appropriate refactoring approach based on App Router best practices (e.g., "Convert to Server Component and fetch data directly", "Pass Server Component as children prop", "Move data fetching to parent Server Component").
+- **File:** Provide the full path to the file (e.g., `src/app/some/path/component.tsx`).
+- **Line(s):** Specify the relevant line number(s).
+- **Issue:** Briefly describe the deviation found (e.g., "Data fetching in useEffect", "Server component nested in client component", "Server action used for fetching").
+- **Suggestion:** Recommend the appropriate refactoring approach based on App Router best practices (e.g., "Convert to Server Component and fetch data directly", "Pass Server Component as children prop", "Move data fetching to parent Server Component").
 
 **Example Finding:**
 
-* **File:** `src/app/some/client-page.tsx`
-* **Line(s):** 25-35
-* **Issue:** Data fetching performed in `useEffect` using a Server Action (`fetchDataAction`).
-* **Suggestion:** Refactor the page to be a Server Component, remove `useEffect` and related state, and `await` the data fetching logic (potentially moved to a service function) directly within the component.
+- **File:** `src/app/some/client-page.tsx`
+- **Line(s):** 25-35
+- **Issue:** Data fetching performed in `useEffect` using a Server Action (`fetchDataAction`).
+- **Suggestion:** Refactor the page to be a Server Component, remove `useEffect` and related state, and `await` the data fetching logic (potentially moved to a service function) directly within the component.
diff --git a/.cursor/notepads/reward-penalty.md b/.cursor/notepads/reward-penalty.md
index 81356c4e..5a647ecb 100644
--- a/.cursor/notepads/reward-penalty.md
+++ b/.cursor/notepads/reward-penalty.md
@@ -1,44 +1,47 @@
- All code you write MUST be fully optimized.“Fully optimized” includes:
-
-•	Maximizing algorithmic big-O efficiency for memory and runtime (e.g., preferring O(n) over O(n²) where possible, minimizing memory allocations).
-•	Using parallelization and vectorization where appropriate (e.g., leveraging multi-threading, GPU acceleration, or SIMD instructions when the problem scale and hardware context justify it).
-•	Following proper style conventions for the code language (e.g., adhering to PEP 8 for Python, camelCase or snake_case as per language norms, maximizing code reuse (DRY)).
-•	No extra code beyond what is absolutely necessary to solve the problem the user provides (i.e., no technical debt, no speculative features, no unused variables or functions).
-•	Ensuring readability and maintainability without sacrificing performance (e.g., using meaningful variable/function names, adding concise comments only where intent isn’t obvious from the code).
-•	Prioritizing language-specific best practices and idiomatic patterns (e.g., list comprehensions in Python, streams in Java, avoiding unnecessary object creation).
-•	Handling edge cases and errors gracefully with minimal overhead (e.g., validating inputs efficiently, avoiding redundant checks).
-•	Optimizing for the target environment when specified (e.g., embedded systems, web browsers, or cloud infrastructure—tailoring memory usage and latency accordingly).
-•	Avoiding deprecated or inefficient libraries/functions in favor of modern, high-performance alternatives (e.g., using pathlib over os.path in Python).
-•	Ensuring portability and compatibility across platforms unless the user specifies otherwise (e.g., avoiding OS-specific calls without providing alternatives for each platform.
+All code you write MUST be fully optimized.“Fully optimized” includes:
+
+• Maximizing algorithmic big-O efficiency for memory and runtime (e.g., preferring O(n) over O(n²) where possible, minimizing memory allocations).
+• Using parallelization and vectorization where appropriate (e.g., leveraging multi-threading, GPU acceleration, or SIMD instructions when the problem scale and hardware context justify it).
+• Following proper style conventions for the code language (e.g., adhering to PEP 8 for Python, camelCase or snake_case as per language norms, maximizing code reuse (DRY)).
+• No extra code beyond what is absolutely necessary to solve the problem the user provides (i.e., no technical debt, no speculative features, no unused variables or functions).
+• Ensuring readability and maintainability without sacrificing performance (e.g., using meaningful variable/function names, adding concise comments only where intent isn’t obvious from the code).
+• Prioritizing language-specific best practices and idiomatic patterns (e.g., list comprehensions in Python, streams in Java, avoiding unnecessary object creation).
+• Handling edge cases and errors gracefully with minimal overhead (e.g., validating inputs efficiently, avoiding redundant checks).
+• Optimizing for the target environment when specified (e.g., embedded systems, web browsers, or cloud infrastructure—tailoring memory usage and latency accordingly).
+• Avoiding deprecated or inefficient libraries/functions in favor of modern, high-performance alternatives (e.g., using pathlib over os.path in Python).
+• Ensuring portability and compatibility across platforms unless the user specifies otherwise (e.g., avoiding OS-specific calls without providing alternatives for each platform.
 
 Reward/Penalty Framework:
 
 I will use the following scoring system to rate your work. Each criteria will be scored on its own accord. I expect you to maintain a positive rating on all criteria:
 
 ### Rewards (Positive Points):
-•	+10: Achieves optimal big-O efficiency for the problem (e.g., O(n log n) for sorting instead of O(n²)).
-•	+5: Does not contain and placeholder comments, example implementations or other lazy output
-•	+5: Uses parallelization/vectorization effectively when applicable.
-•	+3: Follows language-specific style and idioms perfectly.
-•	+2: Solves the problem with minimal lines of code (DRY, no bloat).
-•	+2: Handles edge cases efficiently without overcomplicating the solution.
-•	+1: Provides a portable or reusable solution (e.g., no hard-coded assumptions).
+
+• +10: Achieves optimal big-O efficiency for the problem (e.g., O(n log n) for sorting instead of O(n²)).
+• +5: Does not contain and placeholder comments, example implementations or other lazy output
+• +5: Uses parallelization/vectorization effectively when applicable.
+• +3: Follows language-specific style and idioms perfectly.
+• +2: Solves the problem with minimal lines of code (DRY, no bloat).
+• +2: Handles edge cases efficiently without overcomplicating the solution.
+• +1: Provides a portable or reusable solution (e.g., no hard-coded assumptions).
+
 ### Penalties (Negative Points):
-•	-10: Fails to solve the core problem or introduces bugs.
-•	--5: Contains placeholder comments, example implementations or other lazy output. UNNACCEPTABLE!
-•	-5: Uses inefficient algorithms when better options exist (e.g., bubble sort instead of quicksort for large datasets).
-•	-3: Violates style conventions or includes unnecessary code.
-•	-2: Misses obvious edge cases that could break the solution.
-•	-1: Overcomplicates the solution beyond what’s needed (e.g., premature optimization).
-•	-1: Relies on deprecated or suboptimal libraries/functions.
+
+• -10: Fails to solve the core problem or introduces bugs.
+• --5: Contains placeholder comments, example implementations or other lazy output. UNNACCEPTABLE!
+• -5: Uses inefficient algorithms when better options exist (e.g., bubble sort instead of quicksort for large datasets).
+• -3: Violates style conventions or includes unnecessary code.
+• -2: Misses obvious edge cases that could break the solution.
+• -1: Overcomplicates the solution beyond what’s needed (e.g., premature optimization).
+• -1: Relies on deprecated or suboptimal libraries/functions.
 
 ## Your Goal
 
 For every request, deliver code that:
 
-*   Achieves the highest possible score in each applicable category.
-*   Is fully optimized, production-ready, and free of placeholders or incomplete sections.
-*   Meets your specific requirements while adhering to the languages best practices.
+- Achieves the highest possible score in each applicable category.
+- Is fully optimized, production-ready, and free of placeholders or incomplete sections.
+- Meets your specific requirements while adhering to the languages best practices.
 
 I will rate your performance according to these rules or others that fit this pattern. A negative score penalizes your performance.
 
diff --git a/.cursor/notepads/reward-penalty.mdx b/.cursor/notepads/reward-penalty.mdx
index 81356c4e..5a647ecb 100644
--- a/.cursor/notepads/reward-penalty.mdx
+++ b/.cursor/notepads/reward-penalty.mdx
@@ -1,44 +1,47 @@
- All code you write MUST be fully optimized.“Fully optimized” includes:
-
-•	Maximizing algorithmic big-O efficiency for memory and runtime (e.g., preferring O(n) over O(n²) where possible, minimizing memory allocations).
-•	Using parallelization and vectorization where appropriate (e.g., leveraging multi-threading, GPU acceleration, or SIMD instructions when the problem scale and hardware context justify it).
-•	Following proper style conventions for the code language (e.g., adhering to PEP 8 for Python, camelCase or snake_case as per language norms, maximizing code reuse (DRY)).
-•	No extra code beyond what is absolutely necessary to solve the problem the user provides (i.e., no technical debt, no speculative features, no unused variables or functions).
-•	Ensuring readability and maintainability without sacrificing performance (e.g., using meaningful variable/function names, adding concise comments only where intent isn’t obvious from the code).
-•	Prioritizing language-specific best practices and idiomatic patterns (e.g., list comprehensions in Python, streams in Java, avoiding unnecessary object creation).
-•	Handling edge cases and errors gracefully with minimal overhead (e.g., validating inputs efficiently, avoiding redundant checks).
-•	Optimizing for the target environment when specified (e.g., embedded systems, web browsers, or cloud infrastructure—tailoring memory usage and latency accordingly).
-•	Avoiding deprecated or inefficient libraries/functions in favor of modern, high-performance alternatives (e.g., using pathlib over os.path in Python).
-•	Ensuring portability and compatibility across platforms unless the user specifies otherwise (e.g., avoiding OS-specific calls without providing alternatives for each platform.
+All code you write MUST be fully optimized.“Fully optimized” includes:
+
+• Maximizing algorithmic big-O efficiency for memory and runtime (e.g., preferring O(n) over O(n²) where possible, minimizing memory allocations).
+• Using parallelization and vectorization where appropriate (e.g., leveraging multi-threading, GPU acceleration, or SIMD instructions when the problem scale and hardware context justify it).
+• Following proper style conventions for the code language (e.g., adhering to PEP 8 for Python, camelCase or snake_case as per language norms, maximizing code reuse (DRY)).
+• No extra code beyond what is absolutely necessary to solve the problem the user provides (i.e., no technical debt, no speculative features, no unused variables or functions).
+• Ensuring readability and maintainability without sacrificing performance (e.g., using meaningful variable/function names, adding concise comments only where intent isn’t obvious from the code).
+• Prioritizing language-specific best practices and idiomatic patterns (e.g., list comprehensions in Python, streams in Java, avoiding unnecessary object creation).
+• Handling edge cases and errors gracefully with minimal overhead (e.g., validating inputs efficiently, avoiding redundant checks).
+• Optimizing for the target environment when specified (e.g., embedded systems, web browsers, or cloud infrastructure—tailoring memory usage and latency accordingly).
+• Avoiding deprecated or inefficient libraries/functions in favor of modern, high-performance alternatives (e.g., using pathlib over os.path in Python).
+• Ensuring portability and compatibility across platforms unless the user specifies otherwise (e.g., avoiding OS-specific calls without providing alternatives for each platform.
 
 Reward/Penalty Framework:
 
 I will use the following scoring system to rate your work. Each criteria will be scored on its own accord. I expect you to maintain a positive rating on all criteria:
 
 ### Rewards (Positive Points):
-•	+10: Achieves optimal big-O efficiency for the problem (e.g., O(n log n) for sorting instead of O(n²)).
-•	+5: Does not contain and placeholder comments, example implementations or other lazy output
-•	+5: Uses parallelization/vectorization effectively when applicable.
-•	+3: Follows language-specific style and idioms perfectly.
-•	+2: Solves the problem with minimal lines of code (DRY, no bloat).
-•	+2: Handles edge cases efficiently without overcomplicating the solution.
-•	+1: Provides a portable or reusable solution (e.g., no hard-coded assumptions).
+
+• +10: Achieves optimal big-O efficiency for the problem (e.g., O(n log n) for sorting instead of O(n²)).
+• +5: Does not contain and placeholder comments, example implementations or other lazy output
+• +5: Uses parallelization/vectorization effectively when applicable.
+• +3: Follows language-specific style and idioms perfectly.
+• +2: Solves the problem with minimal lines of code (DRY, no bloat).
+• +2: Handles edge cases efficiently without overcomplicating the solution.
+• +1: Provides a portable or reusable solution (e.g., no hard-coded assumptions).
+
 ### Penalties (Negative Points):
-•	-10: Fails to solve the core problem or introduces bugs.
-•	--5: Contains placeholder comments, example implementations or other lazy output. UNNACCEPTABLE!
-•	-5: Uses inefficient algorithms when better options exist (e.g., bubble sort instead of quicksort for large datasets).
-•	-3: Violates style conventions or includes unnecessary code.
-•	-2: Misses obvious edge cases that could break the solution.
-•	-1: Overcomplicates the solution beyond what’s needed (e.g., premature optimization).
-•	-1: Relies on deprecated or suboptimal libraries/functions.
+
+• -10: Fails to solve the core problem or introduces bugs.
+• --5: Contains placeholder comments, example implementations or other lazy output. UNNACCEPTABLE!
+• -5: Uses inefficient algorithms when better options exist (e.g., bubble sort instead of quicksort for large datasets).
+• -3: Violates style conventions or includes unnecessary code.
+• -2: Misses obvious edge cases that could break the solution.
+• -1: Overcomplicates the solution beyond what’s needed (e.g., premature optimization).
+• -1: Relies on deprecated or suboptimal libraries/functions.
 
 ## Your Goal
 
 For every request, deliver code that:
 
-*   Achieves the highest possible score in each applicable category.
-*   Is fully optimized, production-ready, and free of placeholders or incomplete sections.
-*   Meets your specific requirements while adhering to the languages best practices.
+- Achieves the highest possible score in each applicable category.
+- Is fully optimized, production-ready, and free of placeholders or incomplete sections.
+- Meets your specific requirements while adhering to the languages best practices.
 
 I will rate your performance according to these rules or others that fit this pattern. A negative score penalizes your performance.
 
diff --git a/.cursor/notepads/server-action.md b/.cursor/notepads/server-action.md
index 6516b542..cb7a2f0a 100644
--- a/.cursor/notepads/server-action.md
+++ b/.cursor/notepads/server-action.md
@@ -6,37 +6,39 @@ description: Template for creating Next.js server actions with proper validation
 # Server Action Template
 
 ## Basic Structure
+
 ```ts
-'use server'
+"use server";
 
-import { z } from "zod"
-import { createSafeAction } from "@/lib/create-safe-action"
+import { z } from "zod";
+import { createSafeAction } from "@/lib/create-safe-action";
 
 // Input validation
 const inputSchema = z.object({
   // Define input fields
-})
+});
 
 // Output type
 const outputSchema = z.object({
   // Define output fields
-})
+});
 
 // Action implementation
 async function action(input: z.infer<typeof inputSchema>) {
   try {
     // Business logic here
-    return { success: true }
+    return { success: true };
   } catch (error) {
-    return { error: "Something went wrong" }
+    return { error: "Something went wrong" };
   }
 }
 
 // Create safe action with validation
-export const serverAction = createSafeAction(inputSchema, outputSchema, action)
+export const serverAction = createSafeAction(inputSchema, outputSchema, action);
 ```
 
 ## Best Practices
+
 - Keep actions focused and small
 - Validate all inputs with Zod
 - Handle errors gracefully
@@ -46,6 +48,7 @@ export const serverAction = createSafeAction(inputSchema, outputSchema, action)
 - Consider optimistic updates
 
 ## Common Patterns
+
 - Data mutations only
 - Form submissions
 - State updates
@@ -55,6 +58,7 @@ export const serverAction = createSafeAction(inputSchema, outputSchema, action)
 - Cache invalidation
 
 ## Security
+
 - Validate authentication
 - Check authorization
 - Sanitize inputs
@@ -64,6 +68,7 @@ export const serverAction = createSafeAction(inputSchema, outputSchema, action)
 - Log security events
 
 ## Error Handling
+
 - Use proper error types
 - Return meaningful messages
 - Log errors appropriately
diff --git a/.gemini/settings.json b/.gemini/settings.json
index 4529a698..5e535b21 100644
--- a/.gemini/settings.json
+++ b/.gemini/settings.json
@@ -1,5 +1,5 @@
 {
-	"context": {
-		"fileName": ["AGENTS.md", "GEMINI.md"]
-	}
+  "context": {
+    "fileName": ["AGENTS.md", "GEMINI.md"]
+  }
 }
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
index 3b07464c..26d6567d 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: '[BUG] '
+title: "[BUG] "
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
index efdedee9..123b0f66 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.md
+++ b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: '[FEATURE] '
+title: "[FEATURE] "
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 48801462..9de18f42 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -12,12 +12,12 @@ Thanks for the contribution! A few things that make review faster:
 
 ## Changes
 
-<!-- Bullet list of notable changes. Skip if Summary already covers it. -->
--
+## <!-- Bullet list of notable changes. Skip if Summary already covers it. -->
 
 ## Test plan
 
 <!-- How a reviewer can verify this. Be specific. -->
+
 - [ ] `bun run typecheck` passes
 - [ ] `bun run lint` passes
 - [ ] `bun test` passes (if relevant)
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
index 4d914c21..a58563da 100644
--- a/.lintstagedrc.js
+++ b/.lintstagedrc.js
@@ -1,10 +1,10 @@
 const path = require("node:path");
 
 const buildEslintCommand = (filenames) =>
-	`next lint --fix --file ${filenames
-		.map((f) => path.relative(process.cwd(), f))
-		.join(" --file ")}`;
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(" --file ")}`;
 
 module.exports = {
-	"*.{js,jsx,ts,tsx}": [buildEslintCommand],
+  "*.{js,jsx,ts,tsx}": [buildEslintCommand],
 };
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..37b1733f
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 598175b8..cf1c4b97 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,30 +1,30 @@
 {
-	"editor.defaultFormatter": "vscode.typescript-language-features",
-	"editor.formatOnSave": true,
-	"editor.wordWrap": "on",
-	"editor.wordWrapColumn": 120,
-	"[properties]": {
-		"editor.defaultFormatter": "foxundermoon.shell-format"
-	},
-	"[mdx]": {
-		"editor.defaultFormatter": "unifiedjs.vscode-mdx"
-	},
-	"typescript.preferences.autoImportSpecifierExcludeRegexes": [
-		"next/router",
-		"next/dist",
-		"^lucide-react/dist/lucide-react.suffixed$"
-	],
-	"remote.SSH.defaultExtensions": [
-		"esbenp.prettier-vscode",
-		"dbaeumer.vscode-eslint",
-		"GitHub.vscode-pull-request-github",
-		"GitHub.copilot",
-		"eamodio.gitlens"
-	],
-	"[ignore]": {
-		"editor.defaultFormatter": "foxundermoon.shell-format"
-	},
-	"[jsonc]": {
-		"editor.defaultFormatter": "vscode.json-language-features"
-	}
-}
\ No newline at end of file
+  "editor.defaultFormatter": "vscode.typescript-language-features",
+  "editor.formatOnSave": true,
+  "editor.wordWrap": "on",
+  "editor.wordWrapColumn": 120,
+  "[properties]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  },
+  "[mdx]": {
+    "editor.defaultFormatter": "unifiedjs.vscode-mdx"
+  },
+  "typescript.preferences.autoImportSpecifierExcludeRegexes": [
+    "next/router",
+    "next/dist",
+    "^lucide-react/dist/lucide-react.suffixed$"
+  ],
+  "remote.SSH.defaultExtensions": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "GitHub.vscode-pull-request-github",
+    "GitHub.copilot",
+    "eamodio.gitlens"
+  ],
+  "[ignore]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  }
+}
diff --git a/CLAUDE.md b/CLAUDE.md
index f4432964..cf31791f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -13,6 +13,7 @@ Do NOT use `lacymorrow/bones-www` for bones.sh work — it is archived and deplo
 ## Essential Development Commands
 
 ### Development Server
+
 ```bash
 bun dev             # Start development server with Turbo
 bun run dev:legacy  # Start development server without Turbo
@@ -21,6 +22,7 @@ bun run dev:all     # Start both dev server and workers
 ```
 
 ### Testing
+
 ```bash
 bun run test           # Run all tests
 bun run test:watch     # Run tests in watch mode
@@ -31,6 +33,7 @@ bun run test:e2e       # Run Playwright E2E tests
 ```
 
 ### Linting & Type Checking
+
 ```bash
 bun run lint           # Run all linting (Biome, ESLint, Prettier)
 bun run lint:fix       # Fix all linting issues
@@ -38,6 +41,7 @@ bun run typecheck      # Run TypeScript type checking
 ```
 
 ### Database Operations
+
 ```bash
 bun run db:generate    # Generate Drizzle schema
 bun run db:migrate     # Run database migrations
@@ -48,6 +52,7 @@ bun run db:seed        # Seed database with test data
 ```
 
 ### Build & Deployment
+
 ```bash
 bun run build          # Build for production
 bun run build:vercel   # Build with increased memory (8GB heap)
@@ -58,6 +63,7 @@ bun run analyze        # Analyze bundle size
 ## Architecture Overview
 
 ### Core Framework Stack
+
 - **Next.js 16** with App Router - Full-stack React framework
 - **TypeScript** - Type safety throughout
 - **Tailwind CSS** - Utility-first styling
@@ -66,6 +72,7 @@ bun run analyze        # Analyze bundle size
 - **Bun** - Package manager
 
 ### Authentication & Authorization
+
 - **NextAuth.js v5** - Core authentication system
 - **Better Auth** - Alternative auth provider
 - **Payload CMS** - User management for credentials auth
@@ -73,23 +80,27 @@ bun run analyze        # Analyze bundle size
 - **Role-based access control** - Admin and user roles
 
 ### Database & Data Layer
+
 - **PostgreSQL** - Primary database
 - **Drizzle ORM** - Database schema and queries
 - **Schema prefix support** - Multi-tenant capable with `DB_PREFIX`
 - **Comprehensive schema** - Users, payments, plans, API keys, teams, waitlists
 
 ### Content Management
+
 - **Payload CMS v3** - Headless CMS with admin panel
 - **Builder.io** - Visual page builder integration
 - **MDX** - Rich content with React components
 - **Fumadocs** - Documentation system
 
 ### Payment Processing
+
 - **Multiple providers** - Lemon Squeezy, Stripe, Polar
 - **Subscription management** - Plans, billing, webhooks
 - **Usage-based billing** - Flexible pricing models
 
 ### Performance & Monitoring
+
 - **Vercel Analytics** - Web analytics
 - **PostHog** - Product analytics
 - **OpenTelemetry** - Observability
@@ -98,11 +109,12 @@ bun run analyze        # Analyze bundle size
 ## Key Architectural Patterns
 
 ### File Structure Convention
+
 ```
 src/
 ├── app/                    # Next.js App Router
 │   ├── (app)/             # Main app routes
-│   ├── (authentication)/  # Auth pages  
+│   ├── (authentication)/  # Auth pages
 │   ├── (dashboard)/       # Protected routes
 │   ├── (demo)/           # Demo pages
 │   └── api/              # API routes
@@ -116,25 +128,30 @@ src/
 ```
 
 ### Component Architecture
+
 - **Atomic design** - Primitives → Blocks → Layouts → Pages
 - **Server Components first** - Minimize client-side JavaScript
 - **Named exports** - Prefer `export const Component = () => {}` over default exports
 - **TypeScript interfaces** - Type all props and return values
 
 ### Server-Side Patterns
+
 - **Server Actions** - Form handling and mutations (in `server/actions/`)
 - **Services** - Business logic and data access (in `server/services/`)
 - **Separation of concerns** - Actions call services, components use actions
 - **Never use server actions for data fetching** - Use Server Components instead
 
 ### State Management
+
 - **Server state** - React Server Components handle most state
 - **Client state** - Minimal use of useState/useEffect
 - **URL state** - Use `nuqs` for search parameters
 - **Form state** - React Hook Form with Zod validation
 
 ### Feature Flag System
+
 Shipkit uses environment variables for feature toggles:
+
 - Features turn on when their env vars are present. Set `DISABLE_<FEATURE>=true` to force one off. Logic: `src/config/features-config.ts`
 - Each enabled feature is exposed to the client as `NEXT_PUBLIC_FEATURE_<NAME>_ENABLED`, for example `NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED`, `NEXT_PUBLIC_FEATURE_AUTH_GITHUB_ENABLED`, `NEXT_PUBLIC_FEATURE_STRIPE_ENABLED`, `NEXT_PUBLIC_FEATURE_PAYLOAD_ENABLED`. The full list is in `src/env.ts`
 - Auth: Auth.js v5 runs today; Better Auth is the chosen default and the switch is in progress. Both are detected (`NEXT_PUBLIC_FEATURE_AUTH_JS_ENABLED`, `NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED`)
@@ -143,6 +160,7 @@ Shipkit uses environment variables for feature toggles:
 ## Critical Development Rules
 
 ### Code Style (Enforced by Cursor Rules)
+
 - **File size limit** - Keep files under 500 lines
 - **Naming conventions** - kebab-case files, PascalCase components, camelCase variables
 - **Function style** - Arrow functions for components, function keyword for utilities
@@ -150,25 +168,31 @@ Shipkit uses environment variables for feature toggles:
 - **Comments** - Explain "why" not "what", preserve existing comments
 
 ### Performance Requirements
+
 - **Minimize client components** - Use 'use client' sparingly
 - **Suspense boundaries** - Wrap client components with fallbacks
 - **Image optimization** - Use Next.js Image with proper sizing
 - **Bundle analysis** - Run `bun run analyze` before major changes
 
 ### Navigation Patterns
+
 - **Prefer Link over router.push** - Use `src/components/primitives/link-with-transition`
 - **Button-like links** - Use `<Link className={cn(buttonVariants(...))} ...>`
 - **Multi-zone navigation** - Use anchor tags (`<a>`) for cross-zone links
 
 ### CI Minutes and Local Verification
+
 GitHub Actions minutes are billed on private repos, and automated upstream syncs and agent-authored PRs burn them on checks that were already run locally.
+
 - **Run `verify` before opening a PR** - `scripts/verify.sh` runs typecheck, lint, unit and node tests, a production build, and a `next start` smoke (`--routes "/ /blog /nope-404=404"` to customize). Paste its Markdown summary in the PR body.
 - **Skip Actions when you verified locally** - put `[skip ci]` in the commit message (GitHub-native; also skips CodeQL and gitleaks, so run `gitleaks protect --staged` locally). Vercel still builds, and the Deployment Check smoke still runs because it triggers off the Vercel deployment.
 - **Ask for the full suite when it matters** - add the `ci:full` label to a PR (shipkit and downstreams gate the expensive jobs behind it; pushes to `main` always run everything).
 - **Suspense and loading files** - never add `loading.tsx` or `<Suspense>` above a page that calls `notFound()`; the shell streams a 200 first (see `tests/node/app/no-loading-above-not-found.test.ts`).
 
 ### GitHub Actions Are Advisory, Deploys Are Not Gated On Them
+
 Actions are not paid for on these repos, so jobs can stop running at any time. Nothing in the deploy path depends on them.
+
 - **Vercel deploys through its own Git integration.** A push deploys whether or not any workflow ran. Verified: shipkit-www shipped two production deployments while every one of its Actions jobs was failing on billing.
 - **No repo requires status checks.** Branch protection needs GitHub Pro on private repos, so there is nothing to satisfy. A red check cannot block a merge; only a person can.
 - **`ignoreCommand` never skips production.** `scripts/vercel-ignore-step.sh` exits 1 for `VERCEL_ENV=production`, so a live site can never be left stale by a skipped build. Only preview builds skip, and only on `[skip ci]`.
@@ -176,6 +200,7 @@ Actions are not paid for on these repos, so jobs can stop running at any time. N
 - **So what actually gates a release?** Local `verify` plus the Vercel build. If those are green, ship. If Actions are also green, that is a bonus, not a requirement.
 
 ### Database Best Practices
+
 - **Use transactions** - `db.transaction()` for multi-operation changes
 - **Avoid booleans** - Use timestamps instead (e.g., `activeAt` vs `isActive`)
 - **Type safety** - All queries are type-safe through Drizzle
@@ -184,6 +209,7 @@ Actions are not paid for on these repos, so jobs can stop running at any time. N
 ## Common Tasks
 
 ### Adding New Features
+
 1. Check for existing environment variable feature flags
 2. Add new feature flag if needed
 3. Implement server action in `server/actions/`
@@ -192,18 +218,21 @@ Actions are not paid for on these repos, so jobs can stop running at any time. N
 6. Add tests for new functionality
 
 ### Database Schema Changes
+
 1. Modify schema in `src/server/db/schema.ts`
 2. Run `bun run db:generate` to create migration
 3. Run `bun run db:migrate` to apply changes
 4. Update TypeScript types if needed
 
 ### Adding New Routes
+
 1. Create route in appropriate `app/` directory
 2. Follow route grouping conventions: `(app)`, `(dashboard)`, etc.
 3. Use Server Components when possible
 4. Add proper error and loading states
 
 ### Testing Strategy
+
 - **Unit tests** - Vitest for utilities and components
 - **Integration tests** - Test server actions and services
 - **E2E tests** - Playwright for critical user flows
@@ -214,13 +243,16 @@ Actions are not paid for on these repos, so jobs can stop running at any time. N
 Shipkit supports multi-zone deployments for scalable applications:
 
 ### Zone Structure
+
 - **Main zone** - Core app functionality
 - **Content zones** - `/docs`, `/blog`, `/ui`, `/tools`
 - **Shared authentication** - Single sign-on across zones
 - **Consistent design** - Shared component library
 
 ### Zone Development
+
 Each zone is a full Shipkit installation with:
+
 - `basePath` and `assetPrefix` configuration
 - Environment variables for zone-specific settings
 - Anchor tag navigation between zones
@@ -229,6 +261,7 @@ Each zone is a full Shipkit installation with:
 ## Environment Configuration
 
 ### Required for Basic Functionality
+
 ```env
 DATABASE_URL=                 # PostgreSQL connection string
 APP_SECRET=                   # One secret; AUTH_SECRET, BETTER_AUTH_SECRET and PAYLOAD_SECRET derive from it
@@ -236,7 +269,9 @@ AUTH_URL=                     # App URL
 ```
 
 ### Optional Feature Enablement
+
 Features turn on when their env vars exist. Never set `NEXT_PUBLIC_FEATURE_*` by hand; the build derives those.
+
 ```env
 AUTH_GITHUB_ID=              # + AUTH_GITHUB_SECRET for GitHub login
 LEMONSQUEEZY_API_KEY=        # + LEMONSQUEEZY_STORE_ID for payments
@@ -248,6 +283,7 @@ RESEND_API_KEY=              # Email
 ## Troubleshooting
 
 ### Common Issues
+
 - **Type errors** - Run `bun run typecheck` and fix before proceeding
 - **Linting failures** - Run `bun run lint:fix` to auto-fix issues
 - **Database connection** - Check `DATABASE_URL` and run `bun run db:push`
@@ -255,6 +291,7 @@ RESEND_API_KEY=              # Email
 - **Out of Memory (OOM) errors** - Use `bun run build:vercel` for larger builds
 
 ### Debug Commands
+
 ```bash
 bun run deps:check             # Check for outdated dependencies
 bun run check:metadata         # Validate site metadata
@@ -268,6 +305,7 @@ Always run `bun run lint` and `bun run typecheck` before committing changes.
 Use the ShipKit CLI to create new sites from this template:
 
 ### Using the CLI
+
 ```bash
 # From anywhere — interactive
 cd cli && bun run build && node dist/index.js create my-new-site
@@ -277,6 +315,7 @@ node cli/dist/index.js create my-new-site --yes
 ```
 
 ### Manual Steps (if CLI unavailable)
+
 ```bash
 # 1. Create repo from template
 gh repo create my-new-site --template shipkit-io/bones --clone --public
@@ -297,6 +336,7 @@ bun dev
 ```
 
 ### Syncing Upstream Changes
+
 ```bash
 # Via CLI (creates PR branch)
 node cli/dist/index.js sync --yes
@@ -309,10 +349,12 @@ node cli/dist/index.js sync --yes --direct
 ```
 
 ### CLI Development
+
 The CLI lives in `cli/` and uses Commander + @clack/prompts:
+
 ```bash
 cd cli
 bun install
 bun run build   # Builds to cli/dist/index.js
 bun run dev     # Watch mode
-```
\ No newline at end of file
+```
diff --git a/GEMINI.md b/GEMINI.md
index 54771370..5c58b645 100644
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -6,14 +6,14 @@ This project, **Shipkit**, is a comprehensive Next.js starter kit designed for r
 
 **Key Technologies:**
 
-*   **Framework:** Next.js 16
-*   **Styling:** Tailwind CSS with Shadcn/UI components
-*   **Database ORM:** Drizzle
-*   **Authentication:** Auth.js with multiple providers (Google, GitHub, etc.)
-*   **CMS:** Payload CMS
-*   **Visual Editor:** Builder.io
-*   **Email:** Resend
-*   **Deployment:** Vercel
+- **Framework:** Next.js 16
+- **Styling:** Tailwind CSS with Shadcn/UI components
+- **Database ORM:** Drizzle
+- **Authentication:** Auth.js with multiple providers (Google, GitHub, etc.)
+- **CMS:** Payload CMS
+- **Visual Editor:** Builder.io
+- **Email:** Resend
+- **Deployment:** Vercel
 
 **Architecture:**
 
@@ -45,28 +45,28 @@ bun run build
 
 The project uses `vitest` for unit testing and `playwright` for end-to-end testing.
 
-*   Run all tests:
-    ```bash
-    bun run test
-    ```
-*   Run unit tests:
-    ```bash
-    bun run test:node
-    ```
-*   Run browser tests:
-    ```bash
-    bun run test:browser
-    ```
-*   Run end-to-end tests:
-    ```bash
-    bun run test:e2e
-    ```
+- Run all tests:
+  ```bash
+  bun run test
+  ```
+- Run unit tests:
+  ```bash
+  bun run test:node
+  ```
+- Run browser tests:
+  ```bash
+  bun run test:browser
+  ```
+- Run end-to-end tests:
+  ```bash
+  bun run test:e2e
+  ```
 
 ## Development Conventions
 
-*   **Feature Flagging:** Features are enabled or disabled using environment variables. The configuration for this is in `src/config/features-config.ts`. To enable a feature, you typically set an environment variable like `ENABLE_FEATURE_X` to `true`.
-*   **Styling:** The project uses Tailwind CSS for styling. Custom styles are located in the `src/styles` directory.
-*   **Components:** Reusable UI components are located in the `src/components` directory.
-*   **Linting and Formatting:** The project uses ESLint, Prettier, and Biome for code linting and formatting. You can run the linters with `bun run lint` and fix issues with `bun run lint:fix`.
-*   **Committing:** The project uses `lint-staged` to run linters on staged files before committing.
-*   **Database:** The project uses Drizzle ORM for database access. Database-related scripts are available in `package.json` (e.g., `bun run db:generate`, `bun run db:migrate`).
+- **Feature Flagging:** Features are enabled or disabled using environment variables. The configuration for this is in `src/config/features-config.ts`. To enable a feature, you typically set an environment variable like `ENABLE_FEATURE_X` to `true`.
+- **Styling:** The project uses Tailwind CSS for styling. Custom styles are located in the `src/styles` directory.
+- **Components:** Reusable UI components are located in the `src/components` directory.
+- **Linting and Formatting:** The project uses ESLint, Prettier, and Biome for code linting and formatting. You can run the linters with `bun run lint` and fix issues with `bun run lint:fix`.
+- **Committing:** The project uses `lint-staged` to run linters on staged files before committing.
+- **Database:** The project uses Drizzle ORM for database access. Database-related scripts are available in `package.json` (e.g., `bun run db:generate`, `bun run db:migrate`).
diff --git a/README.md b/README.md
index 42a44c8a..1e82bd79 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ Each integration is a shadcn registry item. Browse them at [shipkit.io/docs/feat
 
 Built with modern technologies:
 
- - ⚡️ [Next.js 16](https://nextjs.org) - React Framework
+- ⚡️ [Next.js 16](https://nextjs.org) - React Framework
 - 🎨 [Tailwind CSS](https://tailwindcss.com) - Styling
 - 🔧 [Shadcn/UI](https://ui.shadcn.com) - Components
 - 🛠 [Drizzle](https://orm.drizzle.team) - Database ORM
diff --git a/biome.json b/biome.json
index d55797e2..16cba454 100644
--- a/biome.json
+++ b/biome.json
@@ -1,57 +1,63 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.5.13/schema.json",
-	"files": {
-		"ignoreUnknown": false,
-		"includes": [
-			"**",
-			"!**/node_modules",
-			"!**/.next",
-			"!**/*.css",
-			"!**/src/components/ui/**/*",
-			"!**/public/workers/**"
-		]
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "tab",
-		"indentWidth": 2,
-		"lineWidth": 100,
-		"formatWithErrors": true
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "double",
-			"semicolons": "always",
-			"trailingCommas": "es5",
-			"arrowParentheses": "always"
-		},
-		"globals": ["React"]
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"preset": "recommended",
-			"correctness": {
-				"noUnusedVariables": "warn",
-				"noUndeclaredVariables": "error",
-				"useExhaustiveDependencies": "off"
-			},
-			"suspicious": {
-				"noExplicitAny": "warn",
-				"noControlCharactersInRegex": "off",
-				"noShadowRestrictedNames": "off",
-				"noConsole": "warn",
-				"noArrayIndexKey": "warn"
-			},
-			"style": {
-				"noNonNullAssertion": "warn",
-				"useNodejsImportProtocol": "warn",
-				"useTemplate": "error"
-			},
-			"a11y": {
-				"noSvgWithoutTitle": "warn"
-			}
-		}
-	},
-	"assist": { "actions": { "source": { "organizeImports": "on" } } }
+  "$schema": "https://biomejs.dev/schemas/2.5.13/schema.json",
+  "files": {
+    "ignoreUnknown": false,
+    "includes": [
+      "**",
+      "!**/node_modules",
+      "!**/.next",
+      "!**/*.css",
+      "!**/src/components/ui/**/*",
+      "!**/public/workers/**"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100,
+    "formatWithErrors": true
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always",
+      "trailingCommas": "es5",
+      "arrowParentheses": "always"
+    },
+    "globals": ["React"]
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "recommended",
+      "correctness": {
+        "noUnusedVariables": "warn",
+        "noUndeclaredVariables": "error",
+        "useExhaustiveDependencies": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "warn",
+        "noControlCharactersInRegex": "off",
+        "noShadowRestrictedNames": "off",
+        "noConsole": "warn",
+        "noArrayIndexKey": "warn"
+      },
+      "style": {
+        "noNonNullAssertion": "warn",
+        "useNodejsImportProtocol": "warn",
+        "useTemplate": "error"
+      },
+      "a11y": {
+        "noSvgWithoutTitle": "warn"
+      }
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
 }
diff --git a/components.json b/components.json
index c430b09d..3c3f062d 100644
--- a/components.json
+++ b/components.json
@@ -1,24 +1,24 @@
 {
-	"$schema": "https://ui.shadcn.com/schema.json",
-	"style": "new-york",
-	"rsc": true,
-	"tsx": true,
-	"tailwind": {
-		"config": "tailwind.config.ts",
-		"css": "src/styles/shadcn-theme.css",
-		"baseColor": "neutral",
-		"cssVariables": true,
-		"prefix": ""
-	},
-	"aliases": {
-		"components": "@/components/blocks",
-		"ui": "@/components/ui",
-		"utils": "@/lib/utils",
-		"lib": "@/lib",
-		"hooks": "@/hooks"
-	},
-	"iconLibrary": "radix",
-	"registries": {
-		"@shipkit": "https://shipkit.io/r/{name}.json"
-	}
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/shadcn-theme.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components/blocks",
+    "ui": "@/components/ui",
+    "utils": "@/lib/utils",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "radix",
+  "registries": {
+    "@shipkit": "https://shipkit.io/r/{name}.json"
+  }
 }
diff --git a/docs/development.mdx b/docs/development.mdx
index a4503095..24c19ad0 100644
--- a/docs/development.mdx
+++ b/docs/development.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Development Guide'
-description: 'Get started developing with Shipkit'
+title: "Development Guide"
+description: "Get started developing with Shipkit"
 ---
 
 # Development Guide
@@ -12,17 +12,20 @@ Shipkit is built for developers who want to ship fast. Let's get you set up and
 Get Shipkit running in 4 steps:
 
 1. **Clone the repo:**
+
    ```bash
    git clone https://github.com/your-repo/shipkit.git
    cd shipkit
    ```
 
 2. **Install dependencies:**
+
    ```bash
    bun install --frozen-lockfile
    ```
 
 3. **Set up environment:**
+
    ```bash
    cp .env.example .env.local
    # Edit .env.local with your values
@@ -38,6 +41,7 @@ That's it! You're ready to build.
 ## What You Need
 
 ### Required Tools
+
 - **Node.js** v18+ ([download](https://nodejs.org))
 - **Bun** v1.1+ ([install](https://bun.sh))
 - **PostgreSQL** v15+ (for database features)
@@ -73,22 +77,26 @@ src/
 ## Development Workflow
 
 ### Components
+
 - **Server components first** - Better performance, fewer bugs
 - **Client components only when needed** - For interactivity (forms, animations)
 - **Organize by purpose** - UI components in `ui/`, page blocks in `blocks/`
 
 ### API Routes
+
 - **Server actions** for forms and mutations
 - **API routes** for external integrations
 - **Zod validation** on all inputs
 - **Consistent error handling**
 
 ### Database
+
 - **Drizzle ORM** for type-safe queries
 - **Migrations** for schema changes
 - **Transactions** for data consistency
 
 ### Authentication
+
 - **Auth.js v5** for all auth needs
 - **Multiple providers** supported
 - **Server-side sessions** preferred
@@ -96,6 +104,7 @@ src/
 ## Common Tasks
 
 ### Add a New Page
+
 ```bash
 # Create app/(app)/my-page/page.tsx
 export default function MyPage() {
@@ -104,6 +113,7 @@ export default function MyPage() {
 ```
 
 ### Add a Component
+
 ```typescript
 // src/components/ui/my-component.tsx
 export function MyComponent() {
@@ -112,6 +122,7 @@ export function MyComponent() {
 ```
 
 ### Add Database Schema
+
 ```bash
 bun run db:generate
 # Edit the migration file
diff --git a/docs/development/devtools.mdx b/docs/development/devtools.mdx
index bbf14143..fcb16bec 100644
--- a/docs/development/devtools.mdx
+++ b/docs/development/devtools.mdx
@@ -37,5 +37,3 @@ At build time, this sets `NEXT_PUBLIC_FEATURE_DEVTOOLS_ENABLED=true` which is us
 
 - DevTools are disabled in production even if the flag is present
 - Keep this flag off in production environments
-
-
diff --git a/docs/env.mdx b/docs/env.mdx
index d1ca107b..40458236 100644
--- a/docs/env.mdx
+++ b/docs/env.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Environment Variables'
-description: 'Managing environment variables in Shipkit'
+title: "Environment Variables"
+description: "Managing environment variables in Shipkit"
 ---
 
 # Environment Variables
@@ -14,11 +14,13 @@ Shipkit processes environment variables at build time. You may need to stop and
 ## Quick Setup
 
 1. Copy the example environment file:
+
 ```bash
 cp .env.example .env.local
 ```
 
 2. Generate required secrets:
+
 ```bash
 # Generate AUTH_SECRET
 openssl rand -base64 32
@@ -27,6 +29,7 @@ openssl rand -base64 32
 ## Required Variables
 
 ### Core Authentication
+
 ```env
 # Base URL for authentication
 # In production, this will be automatically set to VERCEL_URL
@@ -38,6 +41,7 @@ AUTH_SECRET=""
 ```
 
 ### OAuth Providers (Optional)
+
 ```env
 # GitHub OAuth
 AUTH_GITHUB_ID=""
@@ -53,6 +57,7 @@ AUTH_GOOGLE_SECRET=""
 ```
 
 ### Database
+
 ```env
 # PostgreSQL connection string
 DATABASE_URL="postgresql://postgres:password@localhost:5432/shipkit"
@@ -64,12 +69,14 @@ DB_PREFIX="db"
 ### External Services (Optional)
 
 #### GitHub Integration
+
 ```env
 # GitHub access token for repo operations
 GITHUB_ACCESS_TOKEN=""
 ```
 
 #### Google Services
+
 ```env
 # Google service account credentials
 GOOGLE_CLIENT_EMAIL=""
@@ -77,6 +84,7 @@ GOOGLE_PRIVATE_KEY=""
 ```
 
 #### AI Services
+
 ```env
 # OpenAI API key
 OPENAI_API_KEY=""
@@ -86,6 +94,7 @@ ANTHROPIC_API_KEY=""
 ```
 
 #### Payments
+
 ```env
 # LemonSqueezy credentials
 LEMONSQUEEZY_API_KEY=""
@@ -93,6 +102,7 @@ LEMONSQUEEZY_STORE_ID=""
 ```
 
 ### Node Environment
+
 ```env
 # Node environment (defaults to "development")
 # Values: development, test, production
@@ -118,7 +128,7 @@ export const env = createEnv({
     AUTH_SECRET: z.string().optional(),
     AUTH_URL: z.preprocess(
       (str) => process.env.VERCEL_URL ?? str,
-      process.env.VERCEL ? z.string().optional() : z.string().url().optional(),
+      process.env.VERCEL ? z.string().optional() : z.string().url().optional()
     ),
     AUTH_DISCORD_ID: z.string().optional(),
     AUTH_DISCORD_SECRET: z.string().optional(),
@@ -150,6 +160,7 @@ export const env = createEnv({
 ### Local Development
 
 1. Copy the example environment file:
+
 ```bash
 cp .env.example .env.local
 ```
@@ -159,11 +170,13 @@ cp .env.example .env.local
 ### Production (Vercel)
 
 1. Add variables through the Vercel dashboard or CLI:
+
 ```bash
 vercel env add MY_VAR
 ```
 
 2. After adding variables, redeploy your application:
+
 ```bash
 vercel --prod
 ```
diff --git a/docs/error-handling.mdx b/docs/error-handling.mdx
index 16f55a1a..a73eb483 100644
--- a/docs/error-handling.mdx
+++ b/docs/error-handling.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Error Handling'
-description: 'Comprehensive guide to error handling in Shipkit'
+title: "Error Handling"
+description: "Comprehensive guide to error handling in Shipkit"
 ---
 
 # Error Handling
@@ -37,7 +37,7 @@ export class ErrorService {
     code: ErrorCode,
     message: string,
     cause?: unknown,
-    metadata?: Record<string, unknown>,
+    metadata?: Record<string, unknown>
   ): AppError {
     const error = new Error(message) as AppError;
     error.code = code;
@@ -57,11 +57,7 @@ export class ErrorService {
     }
 
     if (error instanceof Error) {
-      const appError = ErrorService.createError(
-        "INTERNAL_SERVER_ERROR",
-        error.message,
-        error,
-      );
+      const appError = ErrorService.createError("INTERNAL_SERVER_ERROR", error.message, error);
       logger.error(error.message, {
         code: appError.code,
         cause: error,
@@ -72,7 +68,7 @@ export class ErrorService {
     const appError = ErrorService.createError(
       "INTERNAL_SERVER_ERROR",
       "An unexpected error occurred",
-      error,
+      error
     );
     logger.error("Unknown error", { error });
     return appError;
@@ -99,10 +95,7 @@ export interface ValidationResult<T> {
 }
 
 export class ValidationService {
-  static async validate<T>(
-    schema: z.ZodType<T>,
-    data: unknown,
-  ): Promise<ValidationResult<T>> {
+  static async validate<T>(schema: z.ZodType<T>, data: unknown): Promise<ValidationResult<T>> {
     try {
       const validatedData = await schema.parseAsync(data);
       return {
@@ -116,7 +109,7 @@ export class ValidationService {
             acc[key] = Array.isArray(value) ? value : [value as string];
             return acc;
           },
-          {} as Record<string, string[]>,
+          {} as Record<string, string[]>
         );
 
         return {
@@ -206,7 +199,7 @@ class ErrorBoundary extends React.Component<
 
 ```typescript
 // Example server action with error handling
-"use server"
+"use server";
 
 import { ErrorService } from "@/server/services/error-service";
 import { ValidationService } from "@/server/services/validation-service";
diff --git a/docs/features/cms.mdx b/docs/features/cms.mdx
index aa0a4d36..ec7229a6 100644
--- a/docs/features/cms.mdx
+++ b/docs/features/cms.mdx
@@ -26,14 +26,14 @@ The admin panel uses Payload's Lexical rich text editor for content authoring.
 
 Defined in `src/lib/payload/collections/`:
 
-| Collection | Purpose |
-|-----------|---------|
-| **Users** | Linked to app users table, manages credentials auth |
-| **Pages** | Dynamic pages with layout blocks |
-| **Media** | File and image uploads |
-| **FAQs** | FAQ entries |
-| **Features** | Feature definitions for marketing pages |
-| **Testimonials** | Customer testimonials |
+| Collection       | Purpose                                             |
+| ---------------- | --------------------------------------------------- |
+| **Users**        | Linked to app users table, manages credentials auth |
+| **Pages**        | Dynamic pages with layout blocks                    |
+| **Media**        | File and image uploads                              |
+| **FAQs**         | FAQ entries                                         |
+| **Features**     | Feature definitions for marketing pages             |
+| **Testimonials** | Customer testimonials                               |
 
 ## Globals
 
@@ -62,6 +62,7 @@ const pages = await payload.find({ collection: "pages" });
 ## Storage
 
 Payload supports two storage backends:
+
 - **AWS S3** - Set `AWS_REGION`, `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_BUCKET_NAME`
 - **Vercel Blob** - Set `BLOB_READ_WRITE_TOKEN`
 
diff --git a/docs/features/payments.mdx b/docs/features/payments.mdx
index b5d54372..0a6b66b7 100644
--- a/docs/features/payments.mdx
+++ b/docs/features/payments.mdx
@@ -9,11 +9,11 @@ Shipkit supports three payment providers through a unified provider interface. P
 
 ## Supported Providers
 
-| Provider | Best For | Feature Flag |
-|----------|----------|-------------|
-| [Stripe](/docs/integrations/payments/stripe) | Full payment processing, subscriptions | `STRIPE_SECRET_KEY` |
-| [Lemon Squeezy](/docs/integrations/payments/lemonsqueezy) | SaaS with built-in tax handling | `LEMONSQUEEZY_API_KEY` |
-| [Polar](/docs/integrations/payments/polar) | Open-source friendly payments | `POLAR_ACCESS_TOKEN` |
+| Provider                                                  | Best For                               | Feature Flag           |
+| --------------------------------------------------------- | -------------------------------------- | ---------------------- |
+| [Stripe](/docs/integrations/payments/stripe)              | Full payment processing, subscriptions | `STRIPE_SECRET_KEY`    |
+| [Lemon Squeezy](/docs/integrations/payments/lemonsqueezy) | SaaS with built-in tax handling        | `LEMONSQUEEZY_API_KEY` |
+| [Polar](/docs/integrations/payments/polar)                | Open-source friendly payments          | `POLAR_ACCESS_TOKEN`   |
 
 ## How It Works
 
@@ -86,6 +86,7 @@ const url = await provider.createCheckoutUrl({
 ```
 
 Shipkit includes pre-built checkout pages:
+
 - Stripe: `/stripe/checkout`
 - Lemon Squeezy: `/lemonsqueezy`
 - Polar: `/polar/checkout`
diff --git a/docs/getting-started/setup-wizard.mdx b/docs/getting-started/setup-wizard.mdx
index 840dff2a..8145f386 100644
--- a/docs/getting-started/setup-wizard.mdx
+++ b/docs/getting-started/setup-wizard.mdx
@@ -12,6 +12,7 @@ After deploying, Shipkit's setup wizard at `/install` walks you through initial
 ### 1. Repository Connection
 
 Connect your GitHub account to enable:
+
 - Automatic deployments on push
 - Repository management from the dashboard
 - GitHub OAuth login for your users
diff --git a/docs/guides/deployment/multi-zone.mdx b/docs/guides/deployment/multi-zone.mdx
index e331ebb6..fcdbb5f1 100644
--- a/docs/guides/deployment/multi-zone.mdx
+++ b/docs/guides/deployment/multi-zone.mdx
@@ -145,11 +145,11 @@ cd ../my-blog && bun dev -- --port 3002
 
 ## Approach Options
 
-| Approach | Complexity | Best For |
-|----------|-----------|----------|
-| **Next.js Multi-Zone** (above) | Medium | Optimal performance, soft nav within zones |
-| **Vercel Proxy Project** | Low | Simple setup, separate teams, hard nav everywhere |
-| **Modified Config** | Low | Gradual migration, starting with 1-2 zones |
+| Approach                       | Complexity | Best For                                          |
+| ------------------------------ | ---------- | ------------------------------------------------- |
+| **Next.js Multi-Zone** (above) | Medium     | Optimal performance, soft nav within zones        |
+| **Vercel Proxy Project**       | Low        | Simple setup, separate teams, hard nav everywhere |
+| **Modified Config**            | Low        | Gradual migration, starting with 1-2 zones        |
 
 ## Considerations
 
diff --git a/docs/guides/deployment/vercel-cost-optimization.mdx b/docs/guides/deployment/vercel-cost-optimization.mdx
index 26f5225c..173c34c6 100644
--- a/docs/guides/deployment/vercel-cost-optimization.mdx
+++ b/docs/guides/deployment/vercel-cost-optimization.mdx
@@ -111,13 +111,13 @@ including static assets, images, and prefetches — adding an origin hop each ti
 ```ts
 // middleware.ts
 export const config = {
-	matcher: [
-		// Run only where you actually need middleware...
-		"/dashboard/:path*",
-		"/api/:path*",
-		// ...and explicitly exclude static assets and metadata files:
-		"/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
-	],
+  matcher: [
+    // Run only where you actually need middleware...
+    "/dashboard/:path*",
+    "/api/:path*",
+    // ...and explicitly exclude static assets and metadata files:
+    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
 };
 ```
 
@@ -145,7 +145,7 @@ Controls (note: there is **no** global `next.config` prefetch toggle, and
 ```tsx
 // Disable viewport prefetch for low-priority / numerous links (footers, long lists):
 <Link href="/about" prefetch={false}>
-	About
+  About
 </Link>
 ```
 
@@ -159,25 +159,15 @@ keep instant navigation without viewport prefetching everything, prefetch on
 import Link from "next/link";
 import { useState } from "react";
 
-export function HoverPrefetchLink({
-	href,
-	children,
-}: {
-	href: string;
-	children: React.ReactNode;
-}) {
-	const [active, setActive] = useState(false);
-	// prefetch={null} restores default prefetching once intent is shown;
-	// false until then = no viewport prefetch.
-	return (
-		<Link
-			href={href}
-			prefetch={active ? null : false}
-			onMouseEnter={() => setActive(true)}
-		>
-			{children}
-		</Link>
-	);
+export function HoverPrefetchLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const [active, setActive] = useState(false);
+  // prefetch={null} restores default prefetching once intent is shown;
+  // false until then = no viewport prefetch.
+  return (
+    <Link href={href} prefetch={active ? null : false} onMouseEnter={() => setActive(true)}>
+      {children}
+    </Link>
+  );
 }
 ```
 
@@ -188,9 +178,9 @@ experimental config, reducing repeat prefetch fetches:
 ```ts
 // next.config.ts
 const nextConfig = {
-	experimental: {
-		staleTimes: { dynamic: 30, static: 180 },
-	},
+  experimental: {
+    staleTimes: { dynamic: 30, static: 180 },
+  },
 };
 ```
 
@@ -206,11 +196,11 @@ GET handler returns data that does not change per request, let the CDN cache it:
 ```ts
 // app/api/data/route.ts
 export async function GET() {
-	return Response.json(data, {
-		headers: {
-			"Cache-Control": "s-maxage=3600, stale-while-revalidate=86400",
-		},
-	});
+  return Response.json(data, {
+    headers: {
+      "Cache-Control": "s-maxage=3600, stale-while-revalidate=86400",
+    },
+  });
 }
 ```
 
diff --git a/docs/guides/deployment/vercel.mdx b/docs/guides/deployment/vercel.mdx
index 9bc33bd7..174b6489 100644
--- a/docs/guides/deployment/vercel.mdx
+++ b/docs/guides/deployment/vercel.mdx
@@ -29,6 +29,7 @@ vercel deploy
 3. Set different values for production/staging as needed
 
 Key variables:
+
 - `AUTH_SECRET` - Required. Generate with `openssl rand -base64 32`
 - `DATABASE_URL` - Required for CMS and most features
 - Auth provider keys - Per provider (GitHub, Google, etc.)
diff --git a/docs/index.md b/docs/index.md
index 79064685..2267f384 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,3 +1,3 @@
 # Shipkit Bones
 
-A Next.js starter to help you ship really, *really* fast. Built for/with Shadcn UI, Cursor, v0.dev.
+A Next.js starter to help you ship really, _really_ fast. Built for/with Shadcn UI, Cursor, v0.dev.
diff --git a/docs/middleware.mdx b/docs/middleware.mdx
index d0473865..859ba8bb 100644
--- a/docs/middleware.mdx
+++ b/docs/middleware.mdx
@@ -1,8 +1,8 @@
 ---
-title: 'Middleware'
-description: 'Deployment configuration using Vercel in Shipkit'
+title: "Middleware"
+description: "Deployment configuration using Vercel in Shipkit"
 ---
 
 # Middleware
 
-We purposefully avoided using middleware in Shipkit. There's nothing wrong with using middleware and you can use it without problems.
\ No newline at end of file
+We purposefully avoided using middleware in Shipkit. There's nothing wrong with using middleware and you can use it without problems.
diff --git a/docs/rebranding.md b/docs/rebranding.md
index be91424c..6f3ce168 100644
--- a/docs/rebranding.md
+++ b/docs/rebranding.md
@@ -96,4 +96,4 @@ If you encounter any issues during rebranding:
 2. Look for any hardcoded references to "Shipkit" or "bones" in the codebase
 3. Update any references that weren't caught by the rebranding script
 
-If you find any hardcoded references that weren't updated by the rebranding script, please consider contributing to improve the script. 
+If you find any hardcoded references that weren't updated by the rebranding script, please consider contributing to improve the script.
diff --git a/docs/reference/components.mdx b/docs/reference/components.mdx
index 07acd568..656e63cf 100644
--- a/docs/reference/components.mdx
+++ b/docs/reference/components.mdx
@@ -68,7 +68,7 @@ import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";
 ```tsx
 import { Link } from "@/components/primitives/link-with-transition";
 
-<Link href="/about">About</Link>
+<Link href="/about">About</Link>;
 ```
 
 ### Theme Switching
@@ -93,7 +93,7 @@ import ErrorBoundary from "@/components/primitives/error-boundary";
 ```tsx
 import { DataTable } from "@/components/ui/data-table";
 
-<DataTable columns={columns} data={data} />
+<DataTable columns={columns} data={data} />;
 ```
 
 ## Adding Components
@@ -107,6 +107,7 @@ bunx shadcn@latest add button card dialog
 ### Custom Components
 
 Follow the existing patterns:
+
 - **Server Components first** unless interactivity is required
 - **Named exports** (`export const MyComponent = () => {}`)
 - **kebab-case filenames** (`my-component.tsx`)
diff --git a/drizzle.config.ts b/drizzle.config.ts
index 5ae17095..6c02787b 100644
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@@ -4,13 +4,13 @@ import { env } from "@/env";
 
 const prefix = env?.DB_PREFIX ?? "";
 export default {
-	schema: "./src/server/db/schema.ts",
-	dialect: "postgresql",
-	dbCredentials: {
-		url: env?.DATABASE_URL ?? "",
-	},
-	tablesFilter: [`${prefix}_*`],
-	out: "./src/migrations",
-	verbose: true,
-	strict: true,
+  schema: "./src/server/db/schema.ts",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: env?.DATABASE_URL ?? "",
+  },
+  tablesFilter: [`${prefix}_*`],
+  out: "./src/migrations",
+  verbose: true,
+  strict: true,
 } satisfies Config;
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 8c7ebd6d..4fa25584 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -8,89 +8,89 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const compat = new FlatCompat({
-	baseDirectory: __dirname,
+  baseDirectory: __dirname,
 });
 
 const eslintConfig = [
-	// Base config for all files
-	{
-		languageOptions: {
-			parserOptions: {
-				project: ["./tsconfig.json"],
-				tsconfigRootDir: __dirname,
-			},
-		},
-		linterOptions: {
-			reportUnusedDisableDirectives: true,
-		},
-	},
+  // Base config for all files
+  {
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
+      },
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+  },
 
-	// Configure global ignores (replaces .eslintignore)
-	{
-		ignores: [
-			"node_modules/**",
-			".cursor/**",
-			".next/**",
-			"src/app/(demo)/**/*",
-			"src/components/blocks/**",
-			"src/components/ui/**",
-		],
-	},
+  // Configure global ignores (replaces .eslintignore)
+  {
+    ignores: [
+      "node_modules/**",
+      ".cursor/**",
+      ".next/**",
+      "src/app/(demo)/**/*",
+      "src/components/blocks/**",
+      "src/components/ui/**",
+    ],
+  },
 
-	// Extend configurations
-	...compat.extends(
-		"plugin:@typescript-eslint/recommended-type-checked",
-		"plugin:@typescript-eslint/stylistic-type-checked",
-		"next/core-web-vitals",
-		"next/typescript"
-	),
+  // Extend configurations
+  ...compat.extends(
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "next/core-web-vitals",
+    "next/typescript"
+  ),
 
-	// TypeScript files configuration
-	{
-		files: ["**/*.{ts,tsx}"],
-		languageOptions: {
-			parser: tsParser,
-			parserOptions: {
-				project: ["./tsconfig.json"],
-				tsconfigRootDir: __dirname,
-				ecmaVersion: "latest",
-				sourceType: "module",
-				ecmaFeatures: {
-					jsx: true,
-				},
-			},
-		},
-		plugins: {
-			"@typescript-eslint": ts,
-		},
-		rules: {
-			...ts.configs.recommended.rules,
-			"@typescript-eslint/no-unused-vars": [
-				"warn",
-				{
-					argsIgnorePattern: "^_",
-					varsIgnorePattern: "^_",
-				},
-			],
-			"@typescript-eslint/consistent-type-imports": [
-				"warn",
-				{
-					prefer: "type-imports",
-					fixStyle: "inline-type-imports",
-				},
-			],
-			// ! Todo: Enable
-			"@typescript-eslint/ban-ts-comment": "warn",
-			"@typescript-eslint/no-explicit-any": "warn",
-			"@typescript-eslint/no-floating-promises": "warn",
-			"@typescript-eslint/no-misused-promises": "warn",
-			"@typescript-eslint/no-unsafe-argument": "warn",
-			"@typescript-eslint/no-unsafe-assignment": "warn",
-			"@typescript-eslint/no-unsafe-call": "warn",
-			"@typescript-eslint/no-unsafe-member-access": "warn",
-			"@typescript-eslint/no-unsafe-return": "warn",
-		},
-	},
+  // TypeScript files configuration
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      "@typescript-eslint": ts,
+    },
+    rules: {
+      ...ts.configs.recommended.rules,
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          prefer: "type-imports",
+          fixStyle: "inline-type-imports",
+        },
+      ],
+      // ! Todo: Enable
+      "@typescript-eslint/ban-ts-comment": "warn",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-floating-promises": "warn",
+      "@typescript-eslint/no-misused-promises": "warn",
+      "@typescript-eslint/no-unsafe-argument": "warn",
+      "@typescript-eslint/no-unsafe-assignment": "warn",
+      "@typescript-eslint/no-unsafe-call": "warn",
+      "@typescript-eslint/no-unsafe-member-access": "warn",
+      "@typescript-eslint/no-unsafe-return": "warn",
+    },
+  },
 ];
 
 export default eslintConfig;
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
index 517c4365..bae74472 100644
--- a/next-sitemap.config.js
+++ b/next-sitemap.config.js
@@ -1,12 +1,12 @@
 export default {
-	siteUrl: process.env.SITE_URL || process.env.BASE_URL || "https://bones.sh",
-	generateRobotsTxt: true,
-	sitemapSize: 7000,
-	robotsTxtOptions: {
-		policies: [
-			// { userAgent: "*", disallow: "/blog/category/*" },
-			{ userAgent: "*", allow: "/" },
-		],
-	},
-	// exclude: ["/blog/category/*"],
+  siteUrl: process.env.SITE_URL || process.env.BASE_URL || "https://bones.sh",
+  generateRobotsTxt: true,
+  sitemapSize: 7000,
+  robotsTxtOptions: {
+    policies: [
+      // { userAgent: "*", disallow: "/blog/category/*" },
+      { userAgent: "*", allow: "/" },
+    ],
+  },
+  // exclude: ["/blog/category/*"],
 };
diff --git a/next.config.ts b/next.config.ts
index 9da8cb00..53c062fe 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -179,8 +179,7 @@ const nextConfig: NextConfig = {
 
   compiler: {
     // Remove console logs only in production, excluding error logs
-    removeConsole:
-      process.env.NODE_ENV === "production" ? { exclude: ["error"] } : false,
+    removeConsole: process.env.NODE_ENV === "production" ? { exclude: ["error"] } : false,
   },
 
   /*
diff --git a/playwright.config.ts b/playwright.config.ts
index dc9f17f8..9f98a5b0 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -14,68 +14,68 @@ const baseURL = `http://localhost:${PORT}`;
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-	// Timeout per test
-	timeout: 30 * 1000,
-	// Test directory
-	testDir: path.join(__dirname, "tests/e2e"),
-	// If a test fails, retry it additional 2 times
-	retries: 2,
-	// Artifacts folder where screenshots, videos, and traces are stored.
-	outputDir: "test-results/",
+  // Timeout per test
+  timeout: 30 * 1000,
+  // Test directory
+  testDir: path.join(__dirname, "tests/e2e"),
+  // If a test fails, retry it additional 2 times
+  retries: 2,
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: "test-results/",
 
-	// Run your local dev server before starting the tests:*
-	// https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
-	webServer: {
-		command: "pnpm dev",
-		url: baseURL,
-		timeout: 120 * 1000,
-		reuseExistingServer: !process.env.CI,
-	},
+  // Run your local dev server before starting the tests:*
+  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  webServer: {
+    command: "pnpm dev",
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
 
-	use: {
-		// Use baseURL so to make navigations relative.
-		// More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
-		baseURL,
+  use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
 
-		// Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
-		// More information: https://playwright.dev/docs/trace-viewer
-		trace: "retry-with-trace",
+    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: "retry-with-trace",
 
-		// All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
-		// contextOptions: {
-		//   ignoreHTTPSErrors: true,
-		// }
-	},
+    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+    // contextOptions: {
+    //   ignoreHTTPSErrors: true,
+    // }
+  },
 
-	projects: [
-		{
-			name: "Desktop Chrome",
-			use: {
-				...devices["Desktop Chrome"],
-			},
-		},
-		// {
-		//   name: 'Desktop Firefox',
-		//   use: {
-		//     ...devices['Desktop Firefox'],
-		//   },
-		// },
-		// {
-		//   name: 'Desktop Safari',
-		//   use: {
-		//     ...devices['Desktop Safari'],
-		//   },
-		// },
-		// Test against mobile viewports.
-		// {
-		//   name: 'Mobile Chrome',
-		//   use: {
-		//     ...devices['Pixel 5'],
-		//   },
-		// },
-		// {
-		//   name: 'Mobile Safari',
-		//   use: devices['iPhone 12'],
-		// },
-	],
+  projects: [
+    {
+      name: "Desktop Chrome",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+    // {
+    //   name: 'Desktop Firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+    // {
+    //   name: 'Desktop Safari',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+    // Test against mobile viewports.
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: devices['iPhone 12'],
+    // },
+  ],
 });
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 2190f1ca..2ef30fcf 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,9 +1,9 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
 
 export default config;
diff --git a/scripts/a11y/axe.ts b/scripts/a11y/axe.ts
index 2e951b00..e986cc5e 100644
--- a/scripts/a11y/axe.ts
+++ b/scripts/a11y/axe.ts
@@ -11,95 +11,95 @@ import axeSource from "axe-core";
 import { chromium } from "playwright";
 
 interface AxeIssue {
-	id: string;
-	impact: string | null;
-	description: string;
-	help: string;
-	helpUrl: string;
-	nodes: { html: string; target: string[]; failureSummary?: string }[];
+  id: string;
+  impact: string | null;
+  description: string;
+  help: string;
+  helpUrl: string;
+  nodes: { html: string; target: string[]; failureSummary?: string }[];
 }
 
 interface AxeReportSummary {
-	url: string;
-	violations: AxeIssue[];
-	passes: number;
-	incomplete: number;
-	inapplicable: number;
-	outputDir: string;
-	reportJsonPath: string;
+  url: string;
+  violations: AxeIssue[];
+  passes: number;
+  incomplete: number;
+  inapplicable: number;
+  outputDir: string;
+  reportJsonPath: string;
 }
 
 function getUrls(): string[] {
-	const argv = process.argv.slice(2).filter((a) => !a.startsWith("-"));
-	if (argv.length) return argv;
-	const env =
-		process.env.AXE_URLS?.split(",")
-			.map((u) => u.trim())
-			.filter(Boolean) ?? [];
-	return env.length ? env : ["http://localhost:3000/"];
+  const argv = process.argv.slice(2).filter((a) => !a.startsWith("-"));
+  if (argv.length) return argv;
+  const env =
+    process.env.AXE_URLS?.split(",")
+      .map((u) => u.trim())
+      .filter(Boolean) ?? [];
+  return env.length ? env : ["http://localhost:3000/"];
 }
 
 function safeSlug(input: string): string {
-	return input
-		.replace(/^https?:\/\//, "")
-		.replace(/[^a-zA-Z0-9]+/g, "-")
-		.replace(/-+/g, "-")
-		.replace(/(^-|-$)/g, "")
-		.slice(0, 120);
+  return input
+    .replace(/^https?:\/\//, "")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/(^-|-$)/g, "")
+    .slice(0, 120);
 }
 
 async function ensureDir(dir: string): Promise<void> {
-	await fs.mkdir(dir, { recursive: true });
+  await fs.mkdir(dir, { recursive: true });
 }
 
 async function runAxeOnUrl(url: string, outBaseDir: string): Promise<AxeReportSummary> {
-	const outDir = path.join(outBaseDir, `${safeSlug(url)}-axe`);
-	await ensureDir(outDir);
-	const browser = await chromium.launch({ headless: true });
-	const page = await browser.newPage();
-	await page.goto(url, { waitUntil: "load" });
-	await page.addScriptTag({ content: axeSource.source });
-	const results = await page.evaluate(async () => {
-		return await (window as any).axe.run({
-			runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] },
-			resultTypes: ["violations", "passes", "incomplete", "inapplicable"],
-		});
-	});
-	await browser.close();
+  const outDir = path.join(outBaseDir, `${safeSlug(url)}-axe`);
+  await ensureDir(outDir);
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+  await page.goto(url, { waitUntil: "load" });
+  await page.addScriptTag({ content: axeSource.source });
+  const results = await page.evaluate(async () => {
+    return await (window as any).axe.run({
+      runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] },
+      resultTypes: ["violations", "passes", "incomplete", "inapplicable"],
+    });
+  });
+  await browser.close();
 
-	const jsonPath = path.join(outDir, "axe.json");
-	await fs.writeFile(jsonPath, JSON.stringify(results, null, 2), "utf8");
-	const summary: AxeReportSummary = {
-		url,
-		violations: results.violations ?? [],
-		passes: results.passes?.length ?? 0,
-		incomplete: results.incomplete?.length ?? 0,
-		inapplicable: results.inapplicable?.length ?? 0,
-		outputDir: outDir,
-		reportJsonPath: jsonPath,
-	};
-	return summary;
+  const jsonPath = path.join(outDir, "axe.json");
+  await fs.writeFile(jsonPath, JSON.stringify(results, null, 2), "utf8");
+  const summary: AxeReportSummary = {
+    url,
+    violations: results.violations ?? [],
+    passes: results.passes?.length ?? 0,
+    incomplete: results.incomplete?.length ?? 0,
+    inapplicable: results.inapplicable?.length ?? 0,
+    outputDir: outDir,
+    reportJsonPath: jsonPath,
+  };
+  return summary;
 }
 
 async function main(): Promise<void> {
-	const urls = getUrls();
-	const outDir = process.env.AXE_OUT_DIR ?? ".axe";
-	await ensureDir(outDir);
-	const summaries: AxeReportSummary[] = [];
-	for (const url of urls) {
-		console.log(`[axe] Running on ${url}`);
-		const summary = await runAxeOnUrl(url, outDir);
-		summaries.push(summary);
+  const urls = getUrls();
+  const outDir = process.env.AXE_OUT_DIR ?? ".axe";
+  await ensureDir(outDir);
+  const summaries: AxeReportSummary[] = [];
+  for (const url of urls) {
+    console.log(`[axe] Running on ${url}`);
+    const summary = await runAxeOnUrl(url, outDir);
+    summaries.push(summary);
 
-		console.log(`[axe] Violations: ${summary.violations.length}`);
-	}
-	const indexPath = path.join(outDir, `index-${Date.now()}.json`);
-	await fs.writeFile(indexPath, JSON.stringify(summaries, null, 2), "utf8");
+    console.log(`[axe] Violations: ${summary.violations.length}`);
+  }
+  const indexPath = path.join(outDir, `index-${Date.now()}.json`);
+  await fs.writeFile(indexPath, JSON.stringify(summaries, null, 2), "utf8");
 
-	console.log(`[axe] Wrote summary index → ${indexPath}`);
+  console.log(`[axe] Wrote summary index → ${indexPath}`);
 }
 
 main().catch((err) => {
-	console.error("[axe] Failed:", err);
-	process.exit(1);
+  console.error("[axe] Failed:", err);
+  process.exit(1);
 });
diff --git a/scripts/clean.ts b/scripts/clean.ts
index 7a5942bf..5816fe1b 100644
--- a/scripts/clean.ts
+++ b/scripts/clean.ts
@@ -7,193 +7,193 @@ import path from "node:path";
 const rootDir = process.cwd();
 
 function runCommand(command: string) {
-	try {
-		execSync(command, { stdio: "inherit" });
-	} catch (error) {}
+  try {
+    execSync(command, { stdio: "inherit" });
+  } catch (error) {}
 }
 
 function removeDirectory(dir: string) {
-	const fullPath = path.join(rootDir, dir);
-	if (fs.existsSync(fullPath)) {
-		fs.rmSync(fullPath, { recursive: true, force: true });
-	}
+  const fullPath = path.join(rootDir, dir);
+  if (fs.existsSync(fullPath)) {
+    fs.rmSync(fullPath, { recursive: true, force: true });
+  }
 }
 
 function removeFile(file: string) {
-	const fullPath = path.join(rootDir, file);
-	if (fs.existsSync(fullPath)) {
-		fs.unlinkSync(fullPath);
-	}
+  const fullPath = path.join(rootDir, file);
+  if (fs.existsSync(fullPath)) {
+    fs.unlinkSync(fullPath);
+  }
 }
 
 // Files to remove to match bones branch
 const filesToRemove = [
-	// Config files
-	".env.test",
-	".eslintignore",
-	".eslintrc.json",
-	".lintstagedrc.js",
-	".ncurc",
-	".npmrc",
-	".nvmrc",
-	".prettierignore",
-	".vscode/settings.json",
-	"next-sitemap.config.js",
-	"vercel.json",
-	"withLogFlare.ts",
-	"vitest.config.browser.ts",
-	"vitest.config.node.ts",
-	"vitest.config.ts",
-	"tsconfig.workers.json",
-	"tsconfig.disabled.json",
-	"troubleshooting.md",
-	"todo.mdx",
-	"start-database.sh",
-
-	// Documentation
-	"ai/brain.md",
-	"ai/composer.md",
-	"ai/context.ts",
-	"ai/docs.md",
-	"ai/persona.md",
-	"ai/rules/notepads.md",
-	"docs.mdx",
-	"features.mdx",
-	"guide.mdx",
-
-	// Scripts
-	"scripts/generate-registry.ts",
-	"scripts/generator.ts",
-	"scripts/push-to-downstream-remotes.sh",
-	"scripts/scrape-aceternity.ts",
-	"scripts/db-seed.ts",
-	"scripts/db-sync.ts",
-	"scripts/env-sync.sh",
-	"scripts/tsconfig.json",
-
-	// Source directories to remove
-	"src/app/(app)/(admin)",
-	"src/app/(app)/ai",
-	"src/app/(app)/(dashboard)",
-	"src/app/(app)/(demo)",
-	"src/app/(app)/(landing)",
-	"src/app/(app)/(setup)",
-	"src/app/(app)/animations",
-	"src/app/(app)/blog",
-	"src/app/(app)/docs",
-	"src/app/(app)/illish",
-	"src/app/(app)/launch",
-	"src/app/(app)/logs",
-	"src/app/(app)/settings",
-	"src/app/(integrations)",
-	"src/app/(payload)",
-	"src/app/(task)",
-	"src/app/cli",
-	"src/app/cli-old",
-	"src/app/guide",
-	"src/app/mdx",
-	"src/app/ui",
-	"src/app/webhooks",
-
-	// Components and UI
-	"src/components/modules/builder",
-	"src/components/footers/extended-footer.tsx",
-	"src/components/forms/contact-form.tsx",
-	"src/components/forms/feedback-popover.tsx",
-	"src/components/forms/subscribe-form.tsx",
-	"src/components/headers/extended-header.tsx",
-	"src/components/layouts/blog-sidebar.tsx",
-	"src/components/layouts/sidebar-layout.tsx",
-	"src/components/primitives/accordion-list.tsx",
-	"src/components/primitives/balancer.tsx",
-	"src/components/primitives/masonry.tsx",
-	"src/components/providers",
-	"src/components/search",
-	"src/components/setup-wizard",
-	"src/components/share.tsx",
-	"src/components/theme-toggle.tsx",
-	"src/components/ui",
-
-	// Content
-	"src/content",
-	"src/registry",
-
-	// Server and services
-	"src/server/middleware",
-	"src/server/services",
-
-	// Tests
-	"tests",
-
-	// Public assets
-	"public/examples",
-	"public/registry",
-	"public/workers",
+  // Config files
+  ".env.test",
+  ".eslintignore",
+  ".eslintrc.json",
+  ".lintstagedrc.js",
+  ".ncurc",
+  ".npmrc",
+  ".nvmrc",
+  ".prettierignore",
+  ".vscode/settings.json",
+  "next-sitemap.config.js",
+  "vercel.json",
+  "withLogFlare.ts",
+  "vitest.config.browser.ts",
+  "vitest.config.node.ts",
+  "vitest.config.ts",
+  "tsconfig.workers.json",
+  "tsconfig.disabled.json",
+  "troubleshooting.md",
+  "todo.mdx",
+  "start-database.sh",
+
+  // Documentation
+  "ai/brain.md",
+  "ai/composer.md",
+  "ai/context.ts",
+  "ai/docs.md",
+  "ai/persona.md",
+  "ai/rules/notepads.md",
+  "docs.mdx",
+  "features.mdx",
+  "guide.mdx",
+
+  // Scripts
+  "scripts/generate-registry.ts",
+  "scripts/generator.ts",
+  "scripts/push-to-downstream-remotes.sh",
+  "scripts/scrape-aceternity.ts",
+  "scripts/db-seed.ts",
+  "scripts/db-sync.ts",
+  "scripts/env-sync.sh",
+  "scripts/tsconfig.json",
+
+  // Source directories to remove
+  "src/app/(app)/(admin)",
+  "src/app/(app)/ai",
+  "src/app/(app)/(dashboard)",
+  "src/app/(app)/(demo)",
+  "src/app/(app)/(landing)",
+  "src/app/(app)/(setup)",
+  "src/app/(app)/animations",
+  "src/app/(app)/blog",
+  "src/app/(app)/docs",
+  "src/app/(app)/illish",
+  "src/app/(app)/launch",
+  "src/app/(app)/logs",
+  "src/app/(app)/settings",
+  "src/app/(integrations)",
+  "src/app/(payload)",
+  "src/app/(task)",
+  "src/app/cli",
+  "src/app/cli-old",
+  "src/app/guide",
+  "src/app/mdx",
+  "src/app/ui",
+  "src/app/webhooks",
+
+  // Components and UI
+  "src/components/modules/builder",
+  "src/components/footers/extended-footer.tsx",
+  "src/components/forms/contact-form.tsx",
+  "src/components/forms/feedback-popover.tsx",
+  "src/components/forms/subscribe-form.tsx",
+  "src/components/headers/extended-header.tsx",
+  "src/components/layouts/blog-sidebar.tsx",
+  "src/components/layouts/sidebar-layout.tsx",
+  "src/components/primitives/accordion-list.tsx",
+  "src/components/primitives/balancer.tsx",
+  "src/components/primitives/masonry.tsx",
+  "src/components/providers",
+  "src/components/search",
+  "src/components/setup-wizard",
+  "src/components/share.tsx",
+  "src/components/theme-toggle.tsx",
+  "src/components/ui",
+
+  // Content
+  "src/content",
+  "src/registry",
+
+  // Server and services
+  "src/server/middleware",
+  "src/server/services",
+
+  // Tests
+  "tests",
+
+  // Public assets
+  "public/examples",
+  "public/registry",
+  "public/workers",
 ];
 
 // Directories that must be removed first
 const dirsToRemove = [
-	"src/app/(app)/(admin)",
-	"src/app/(app)/ai",
-	"src/app/(app)/(dashboard)",
-	"src/app/(app)/(demo)",
-	"src/app/(app)/(landing)",
-	"src/app/(app)/(setup)",
-	"src/app/(app)/animations",
-	"src/app/(app)/blog",
-	"src/app/(app)/docs",
-	"src/app/(app)/illish",
-	"src/app/(app)/launch",
-	"src/app/(app)/logs",
-	"src/app/(app)/settings",
-	"src/app/(integrations)",
-	"src/app/(payload)",
-	"src/app/(task)",
-	"src/app/cli",
-	"src/app/cli-old",
-	"src/app/guide",
-	"src/app/mdx",
-	"src/app/ui",
-	"src/app/webhooks",
-	"src/components/modules/builder",
-	"src/components/ui",
-	"src/content",
-	"src/registry",
-	"src/server/middleware",
-	"src/server/services",
-	"tests",
-	"public/examples",
-	"public/registry",
-	"public/workers",
+  "src/app/(app)/(admin)",
+  "src/app/(app)/ai",
+  "src/app/(app)/(dashboard)",
+  "src/app/(app)/(demo)",
+  "src/app/(app)/(landing)",
+  "src/app/(app)/(setup)",
+  "src/app/(app)/animations",
+  "src/app/(app)/blog",
+  "src/app/(app)/docs",
+  "src/app/(app)/illish",
+  "src/app/(app)/launch",
+  "src/app/(app)/logs",
+  "src/app/(app)/settings",
+  "src/app/(integrations)",
+  "src/app/(payload)",
+  "src/app/(task)",
+  "src/app/cli",
+  "src/app/cli-old",
+  "src/app/guide",
+  "src/app/mdx",
+  "src/app/ui",
+  "src/app/webhooks",
+  "src/components/modules/builder",
+  "src/components/ui",
+  "src/content",
+  "src/registry",
+  "src/server/middleware",
+  "src/server/services",
+  "tests",
+  "public/examples",
+  "public/registry",
+  "public/workers",
 ];
 
 // Handle different cleanup modes
 if (process.argv.includes("--bones")) {
-	// Clean to match bones branch
+  // Clean to match bones branch
 
-	// Remove directories first, then individual files
-	for (const dir of dirsToRemove) {
-		removeDirectory(dir);
-	}
+  // Remove directories first, then individual files
+  for (const dir of dirsToRemove) {
+    removeDirectory(dir);
+  }
 
-	for (const file of filesToRemove) {
-		removeFile(file);
-	}
+  for (const file of filesToRemove) {
+    removeFile(file);
+  }
 } else if (process.argv.includes("--next")) {
-	removeDirectory(".next");
+  removeDirectory(".next");
 } else {
-	// Default cleanup
-	const defaultDirs = ["node_modules", ".next", ".turbo"];
-	const defaultFiles = ["pnpm-lock.yaml"];
-	const additionalFolders = process.argv.slice(2);
+  // Default cleanup
+  const defaultDirs = ["node_modules", ".next", ".turbo"];
+  const defaultFiles = ["pnpm-lock.yaml"];
+  const additionalFolders = process.argv.slice(2);
 
-	for (const dir of [...defaultDirs, ...additionalFolders]) {
-		removeDirectory(dir);
-	}
+  for (const dir of [...defaultDirs, ...additionalFolders]) {
+    removeDirectory(dir);
+  }
 
-	for (const file of defaultFiles) {
-		removeFile(file);
-	}
+  for (const file of defaultFiles) {
+    removeFile(file);
+  }
 
-	runCommand("pnpm store prune");
+  runCommand("pnpm store prune");
 }
diff --git a/scripts/copy-to-temp.ts b/scripts/copy-to-temp.ts
index aecfa291..ce708d5e 100644
--- a/scripts/copy-to-temp.ts
+++ b/scripts/copy-to-temp.ts
@@ -10,108 +10,108 @@ const EXCLUDED_DIRS = ["node_modules", ".next", ".git", "dist", "build", "temp"]
  * @returns The command output
  */
 function git(command: string): string {
-	try {
-		return execSync(`git ${command}`, { encoding: "utf-8" });
-	} catch (error) {
-		console.error(`Git command failed: git ${command}`);
-		throw error;
-	}
+  try {
+    return execSync(`git ${command}`, { encoding: "utf-8" });
+  } catch (error) {
+    console.error(`Git command failed: git ${command}`);
+    throw error;
+  }
 }
 
 async function copyFiles(sourcePath: string, targetPath: string) {
-	try {
-		// Create target directory if it doesn't exist
-		await mkdir(targetPath, { recursive: true });
-
-		// Read source directory
-		const entries = await readdir(sourcePath, { withFileTypes: true });
-
-		for (const entry of entries) {
-			const sourceFilePath = join(sourcePath, entry.name);
-			const targetFilePath = join(targetPath, entry.name);
-
-			// Skip excluded directories
-			if (EXCLUDED_DIRS.includes(entry.name)) {
-				console.log(`Skipping excluded directory: ${entry.name}`);
-				continue;
-			}
-
-			if (entry.isDirectory()) {
-				// Recursively copy subdirectories
-				await copyFiles(sourceFilePath, targetFilePath);
-			} else {
-				// Copy individual files
-				await copyFile(sourceFilePath, targetFilePath);
-				console.log(`Copied: ${relative(process.cwd(), targetFilePath)}`);
-			}
-		}
-	} catch (error) {
-		console.error("Error copying files:", error);
-		process.exit(1);
-	}
+  try {
+    // Create target directory if it doesn't exist
+    await mkdir(targetPath, { recursive: true });
+
+    // Read source directory
+    const entries = await readdir(sourcePath, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const sourceFilePath = join(sourcePath, entry.name);
+      const targetFilePath = join(targetPath, entry.name);
+
+      // Skip excluded directories
+      if (EXCLUDED_DIRS.includes(entry.name)) {
+        console.log(`Skipping excluded directory: ${entry.name}`);
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        // Recursively copy subdirectories
+        await copyFiles(sourceFilePath, targetFilePath);
+      } else {
+        // Copy individual files
+        await copyFile(sourceFilePath, targetFilePath);
+        console.log(`Copied: ${relative(process.cwd(), targetFilePath)}`);
+      }
+    }
+  } catch (error) {
+    console.error("Error copying files:", error);
+    process.exit(1);
+  }
 }
 
 async function main() {
-	const sourceDir = process.cwd();
-	const tempDir = join(sourceDir, "temp");
-	const upstreamUrl = "https://github.com/shipkit-io/bones.git";
-
-	console.log("Starting upstream sync process...");
-
-	try {
-		// Step 1: Save current files to temp directory
-		console.log("\nSaving current files to temp directory...");
-		await copyFiles(sourceDir, tempDir);
-
-		// Step 2: Clean working directory (except temp)
-		console.log("\nCleaning working directory...");
-		const entries = await readdir(sourceDir, { withFileTypes: true });
-		for (const entry of entries) {
-			if (entry.name === "temp" || entry.name === ".git" || EXCLUDED_DIRS.includes(entry.name)) {
-				continue;
-			}
-			await rm(join(sourceDir, entry.name), { recursive: true, force: true });
-		}
-
-		// Step 3: Setup upstream remote
-		console.log("\nSetting up upstream remote...");
-		try {
-			git("remote remove up");
-		} catch {
-			// Ignore error if remote doesn't exist
-		}
-		git(`remote add up ${upstreamUrl}`);
-		git("fetch up");
-
-		// Step 4: Create temp branch from upstream
-		console.log("\nCreating temp branch from upstream...");
-		git("checkout up/main");
-		git("switch -c temp");
-
-		// Step 5: Copy files back from temp
-		console.log("\nCopying files back from temp...");
-		await copyFiles(tempDir, sourceDir);
-		await rm(tempDir, { recursive: true, force: true });
-
-		// Step 6: Commit the changes
-		console.log("\nCommitting changes...");
-		git("add .");
-		git('commit -m "merge upstream changes"');
-
-		// Step 7: Checkout main and merge changes
-		console.log("\nChecking out main and merging changes...");
-		git("checkout main");
-		git("merge temp --allow-unrelated-histories");
-
-		console.log("\nProcess completed successfully!");
-		console.log("Please resolve any merge conflicts, then run:");
-		console.log("git add .");
-		console.log('git commit -m "added upstream"');
-		console.log("git push");
-	} catch (error) {
-		console.error("Failed to sync with upstream:", error);
-		process.exit(1);
-	}
+  const sourceDir = process.cwd();
+  const tempDir = join(sourceDir, "temp");
+  const upstreamUrl = "https://github.com/shipkit-io/bones.git";
+
+  console.log("Starting upstream sync process...");
+
+  try {
+    // Step 1: Save current files to temp directory
+    console.log("\nSaving current files to temp directory...");
+    await copyFiles(sourceDir, tempDir);
+
+    // Step 2: Clean working directory (except temp)
+    console.log("\nCleaning working directory...");
+    const entries = await readdir(sourceDir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.name === "temp" || entry.name === ".git" || EXCLUDED_DIRS.includes(entry.name)) {
+        continue;
+      }
+      await rm(join(sourceDir, entry.name), { recursive: true, force: true });
+    }
+
+    // Step 3: Setup upstream remote
+    console.log("\nSetting up upstream remote...");
+    try {
+      git("remote remove up");
+    } catch {
+      // Ignore error if remote doesn't exist
+    }
+    git(`remote add up ${upstreamUrl}`);
+    git("fetch up");
+
+    // Step 4: Create temp branch from upstream
+    console.log("\nCreating temp branch from upstream...");
+    git("checkout up/main");
+    git("switch -c temp");
+
+    // Step 5: Copy files back from temp
+    console.log("\nCopying files back from temp...");
+    await copyFiles(tempDir, sourceDir);
+    await rm(tempDir, { recursive: true, force: true });
+
+    // Step 6: Commit the changes
+    console.log("\nCommitting changes...");
+    git("add .");
+    git('commit -m "merge upstream changes"');
+
+    // Step 7: Checkout main and merge changes
+    console.log("\nChecking out main and merging changes...");
+    git("checkout main");
+    git("merge temp --allow-unrelated-histories");
+
+    console.log("\nProcess completed successfully!");
+    console.log("Please resolve any merge conflicts, then run:");
+    console.log("git add .");
+    console.log('git commit -m "added upstream"');
+    console.log("git push");
+  } catch (error) {
+    console.error("Failed to sync with upstream:", error);
+    process.exit(1);
+  }
 }
 
 // Run the script
diff --git a/scripts/db-drop.ts b/scripts/db-drop.ts
index 1458fcf2..bb9d7a1c 100644
--- a/scripts/db-drop.ts
+++ b/scripts/db-drop.ts
@@ -4,27 +4,27 @@ import { sql } from "drizzle-orm";
 import { db } from "@/server/db";
 
 async function dropDatabase() {
-	console.info("🗑️  Starting database cleanup...");
+  console.info("🗑️  Starting database cleanup...");
 
-	try {
-		// Drop all tables in the public schema
-		await db?.execute(sql`DROP SCHEMA IF EXISTS public CASCADE`);
+  try {
+    // Drop all tables in the public schema
+    await db?.execute(sql`DROP SCHEMA IF EXISTS public CASCADE`);
 
-		// Recreate the public schema
-		await db?.execute(sql`CREATE SCHEMA public`);
+    // Recreate the public schema
+    await db?.execute(sql`CREATE SCHEMA public`);
 
-		// Drop Payload and Drizzle schemas
-		console.info("📦 Dropping Payload and Drizzle schemas...");
-		await db?.execute(sql`
+    // Drop Payload and Drizzle schemas
+    console.info("📦 Dropping Payload and Drizzle schemas...");
+    await db?.execute(sql`
 			DROP SCHEMA IF EXISTS payload CASCADE;
 		DROP SCHEMA IF EXISTS drizzle CASCADE;
 		`);
 
-		// Recreate the payload and drizzle schemas
-		await db?.execute(sql`CREATE SCHEMA payload; CREATE SCHEMA drizzle;`);
+    // Recreate the payload and drizzle schemas
+    await db?.execute(sql`CREATE SCHEMA payload; CREATE SCHEMA drizzle;`);
 
-		// Drop custom types
-		await db?.execute(sql`
+    // Drop custom types
+    await db?.execute(sql`
 			DO $$ DECLARE
 				r RECORD;
 			BEGIN
@@ -34,12 +34,12 @@ async function dropDatabase() {
 			END $$;
 		`);
 
-		console.info("✅ Database cleanup completed");
-		process.exit(0);
-	} catch (error) {
-		console.error("❌ Error cleaning up database:", error);
-		process.exit(1);
-	}
+    console.info("✅ Database cleanup completed");
+    process.exit(0);
+  } catch (error) {
+    console.error("❌ Error cleaning up database:", error);
+    process.exit(1);
+  }
 }
 
 void dropDatabase();
diff --git a/scripts/db-seed.ts b/scripts/db-seed.ts
index 50ca5bcf..1086c549 100644
--- a/scripts/db-seed.ts
+++ b/scripts/db-seed.ts
@@ -2,26 +2,26 @@
 import { seed as seedCMS } from "@/lib/payload/seed";
 
 async function main() {
-	console.log("🌱 Starting database seeding...");
+  console.log("🌱 Starting database seeding...");
 
-	try {
-		// Seed CMS collections (RBAC, Features, FAQs, Testimonials)
-		await seedCMS();
+  try {
+    // Seed CMS collections (RBAC, Features, FAQs, Testimonials)
+    await seedCMS();
 
-		console.log("✅ Database seeded successfully");
-	} catch (error) {
-		console.error("❌ Error seeding database:", error);
-		throw error;
-	}
+    console.log("✅ Database seeded successfully");
+  } catch (error) {
+    console.error("❌ Error seeding database:", error);
+    throw error;
+  }
 }
 
 export { main as seed };
 
 main()
-	.catch((err) => {
-		console.error("❌ Error seeding database:", err);
-		process.exit(1);
-	})
-	.then(() => {
-		process.exit(0);
-	});
+  .catch((err) => {
+    console.error("❌ Error seeding database:", err);
+    process.exit(1);
+  })
+  .then(() => {
+    process.exit(0);
+  });
diff --git a/scripts/db-sync.ts b/scripts/db-sync.ts
index ec8752c9..2f8599bc 100644
--- a/scripts/db-sync.ts
+++ b/scripts/db-sync.ts
@@ -11,123 +11,123 @@ const execAsync = promisify(exec);
 
 // Helper function to run a command with interactive stdin
 function spawnInteractive(command: string, args: string[], input?: string): Promise<void> {
-	return new Promise((resolve, reject) => {
-		const proc = spawn(command, args, {
-			stdio: input ? ["pipe", "inherit", "inherit"] : "inherit", // Connect stdout/stderr, pipe stdin if input is provided
-			shell: true,
-			env: { ...process.env, PAYLOAD_CONFIG_PATH: "src/payload.config.ts" },
-		});
-
-		if (input && proc.stdin) {
-			proc.stdin.write(input);
-			proc.stdin.end();
-		}
-
-		proc.on("close", (code) => {
-			if (code === 0) {
-				resolve();
-			} else {
-				reject(new Error(`Process exited with code ${code}`));
-			}
-		});
-
-		proc.on("error", (err) => {
-			reject(err);
-		});
-	});
+  return new Promise((resolve, reject) => {
+    const proc = spawn(command, args, {
+      stdio: input ? ["pipe", "inherit", "inherit"] : "inherit", // Connect stdout/stderr, pipe stdin if input is provided
+      shell: true,
+      env: { ...process.env, PAYLOAD_CONFIG_PATH: "src/payload.config.ts" },
+    });
+
+    if (input && proc.stdin) {
+      proc.stdin.write(input);
+      proc.stdin.end();
+    }
+
+    proc.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Process exited with code ${code}`));
+      }
+    });
+
+    proc.on("error", (err) => {
+      reject(err);
+    });
+  });
 }
 
 async function generateMigrations() {
-	console.log("📝 Generating migrations...");
-
-	try {
-		// Generate Drizzle migrations
-		console.log("📦 Generating Drizzle migrations...");
-		await execAsync("bun run db:generate");
-		console.log("✅ Drizzle migrations generated");
-
-		// Generate Payload migrations using CLI directly with interactive stdin
-		console.log("📦 Generating Payload migrations...");
-		console.log("ℹ️ If prompted, press Enter to continue");
-
-		await spawnInteractive("payload", ["migrate:create"]);
-		console.log("✅ Payload migrations generated");
-	} catch (error) {
-		console.error("❌ Error generating migrations:", error);
-		throw error;
-	}
+  console.log("📝 Generating migrations...");
+
+  try {
+    // Generate Drizzle migrations
+    console.log("📦 Generating Drizzle migrations...");
+    await execAsync("bun run db:generate");
+    console.log("✅ Drizzle migrations generated");
+
+    // Generate Payload migrations using CLI directly with interactive stdin
+    console.log("📦 Generating Payload migrations...");
+    console.log("ℹ️ If prompted, press Enter to continue");
+
+    await spawnInteractive("payload", ["migrate:create"]);
+    console.log("✅ Payload migrations generated");
+  } catch (error) {
+    console.error("❌ Error generating migrations:", error);
+    throw error;
+  }
 }
 
 async function runPayloadMigrations() {
-	console.log("📦 Running Payload migrations...");
-	try {
-		// Use spawn for interactive process, automatically answer "y" to prompts
-		await spawnInteractive("payload", ["migrate"], "y\n");
-		console.log("✅ Payload migrations completed");
-	} catch (error) {
-		if (error instanceof Error && error.message.includes("already exists")) {
-			console.warn("⚠️ Some Payload tables already exist, continuing...");
-		} else {
-			throw error;
-		}
-	}
+  console.log("📦 Running Payload migrations...");
+  try {
+    // Use spawn for interactive process, automatically answer "y" to prompts
+    await spawnInteractive("payload", ["migrate"], "y\n");
+    console.log("✅ Payload migrations completed");
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("already exists")) {
+      console.warn("⚠️ Some Payload tables already exist, continuing...");
+    } else {
+      throw error;
+    }
+  }
 }
 
 async function syncDatabase() {
-	console.log("🔄 Starting database synchronization...");
-
-	try {
-		if (!db) {
-			console.error("❌ Database connection not found");
-			process.exit(1);
-		}
-
-		// 1. Generate migrations if no SKIP_MIGRATIONS
-		if (process.env.SKIP_MIGRATIONS !== "true") {
-			await generateMigrations();
-		}
-
-		// 2. Run Drizzle migrations
-		console.log("📦 Running Drizzle migrations...");
-		try {
-			await migrate(db, {
-				migrationsFolder: path.join(process.cwd(), "src/migrations"),
-			});
-			console.log("✅ Drizzle migrations completed");
-		} catch (error) {
-			// Check if the error is about existing types or schemas
-			if (
-				error instanceof Error &&
-				(error.message.includes("already exists") ||
-					error.message.includes("schema") ||
-					error.message.includes("type"))
-			) {
-				console.warn("⚠️ Some database objects already exist, continuing...");
-			} else {
-				throw error;
-			}
-		}
-
-		// 3. Run Payload migrations using CLI
-		await runPayloadMigrations();
-
-		// 4. Initialize Payload
-		console.log("🚀 Initializing Payload CMS...");
-		const payload = await getPayloadClient();
-		if (!payload) {
-			console.warn("⚠️ Did not initialize Payload");
-		} else if (process.env.SEED_DB === "true") {
-			console.log("🌱 Running database seed...");
-			await seed();
-			console.log("✅ Database seeded");
-		}
-
-		console.log("✨ Database synchronization completed successfully!");
-		process.exit(0);
-	} catch (error) {
-		console.error("❌ Error synchronizing database:", error);
-		process.exit(1);
-	}
+  console.log("🔄 Starting database synchronization...");
+
+  try {
+    if (!db) {
+      console.error("❌ Database connection not found");
+      process.exit(1);
+    }
+
+    // 1. Generate migrations if no SKIP_MIGRATIONS
+    if (process.env.SKIP_MIGRATIONS !== "true") {
+      await generateMigrations();
+    }
+
+    // 2. Run Drizzle migrations
+    console.log("📦 Running Drizzle migrations...");
+    try {
+      await migrate(db, {
+        migrationsFolder: path.join(process.cwd(), "src/migrations"),
+      });
+      console.log("✅ Drizzle migrations completed");
+    } catch (error) {
+      // Check if the error is about existing types or schemas
+      if (
+        error instanceof Error &&
+        (error.message.includes("already exists") ||
+          error.message.includes("schema") ||
+          error.message.includes("type"))
+      ) {
+        console.warn("⚠️ Some database objects already exist, continuing...");
+      } else {
+        throw error;
+      }
+    }
+
+    // 3. Run Payload migrations using CLI
+    await runPayloadMigrations();
+
+    // 4. Initialize Payload
+    console.log("🚀 Initializing Payload CMS...");
+    const payload = await getPayloadClient();
+    if (!payload) {
+      console.warn("⚠️ Did not initialize Payload");
+    } else if (process.env.SEED_DB === "true") {
+      console.log("🌱 Running database seed...");
+      await seed();
+      console.log("✅ Database seeded");
+    }
+
+    console.log("✨ Database synchronization completed successfully!");
+    process.exit(0);
+  } catch (error) {
+    console.error("❌ Error synchronizing database:", error);
+    process.exit(1);
+  }
 }
 
 void syncDatabase();
diff --git a/scripts/generator.ts b/scripts/generator.ts
index 51f3cdff..0c4102ca 100644
--- a/scripts/generator.ts
+++ b/scripts/generator.ts
@@ -2,136 +2,136 @@ import fs from "fs/promises";
 import path from "path";
 
 interface BlockConfig {
-	// The name of the block (e.g., "login-01")
-	name: string;
-	// Description of the block
-	description?: string;
-	// Type of registry item (default: "registry:block")
-	type?: string;
-	// Source directory containing the block files
-	sourceDir: string;
-	// Registry dependencies (e.g., ["button", "card", "input"])
-	registryDependencies?: string[];
-	// NPM dependencies
-	dependencies?: string[];
-	// Categories for the block
-	categories?: string[];
-	// File mappings from source to target
-	files: {
-		// Source path relative to sourceDir
-		source: string;
-		// Target path in the registry
-		target?: string;
-		// Type of file (default: "registry:component")
-		type?: string;
-	}[];
+  // The name of the block (e.g., "login-01")
+  name: string;
+  // Description of the block
+  description?: string;
+  // Type of registry item (default: "registry:block")
+  type?: string;
+  // Source directory containing the block files
+  sourceDir: string;
+  // Registry dependencies (e.g., ["button", "card", "input"])
+  registryDependencies?: string[];
+  // NPM dependencies
+  dependencies?: string[];
+  // Categories for the block
+  categories?: string[];
+  // File mappings from source to target
+  files: {
+    // Source path relative to sourceDir
+    source: string;
+    // Target path in the registry
+    target?: string;
+    // Type of file (default: "registry:component")
+    type?: string;
+  }[];
 }
 
 interface GeneratorOptions {
-	// Directory containing block directories
-	blocksDir: string;
-	// Output directory for JSON files
-	outputDir: string;
-	// Optional base configuration for all blocks
-	baseConfig?: Partial<BlockConfig>;
-	// Optional function to transform content before writing
-	contentTransform?: (content: string) => string;
+  // Directory containing block directories
+  blocksDir: string;
+  // Output directory for JSON files
+  outputDir: string;
+  // Optional base configuration for all blocks
+  baseConfig?: Partial<BlockConfig>;
+  // Optional function to transform content before writing
+  contentTransform?: (content: string) => string;
 }
 
 async function readFileContent(filePath: string): Promise<string> {
-	try {
-		return await fs.readFile(filePath, "utf-8");
-	} catch (error) {
-		throw new Error(`Failed to read file ${filePath}: ${error}`);
-	}
+  try {
+    return await fs.readFile(filePath, "utf-8");
+  } catch (error) {
+    throw new Error(`Failed to read file ${filePath}: ${error}`);
+  }
 }
 
 async function writeJsonFile(filePath: string, content: any): Promise<void> {
-	try {
-		await fs.mkdir(path.dirname(filePath), { recursive: true });
-		await fs.writeFile(filePath, JSON.stringify(content, null, 2), "utf-8");
-	} catch (error) {
-		throw new Error(`Failed to write file ${filePath}: ${error}`);
-	}
+  try {
+    await fs.mkdir(path.dirname(filePath), { recursive: true });
+    await fs.writeFile(filePath, JSON.stringify(content, null, 2), "utf-8");
+  } catch (error) {
+    throw new Error(`Failed to write file ${filePath}: ${error}`);
+  }
 }
 
 export async function generateBlockJson(
-	blockConfig: BlockConfig,
-	options: GeneratorOptions
+  blockConfig: BlockConfig,
+  options: GeneratorOptions
 ): Promise<void> {
-	const {
-		name,
-		description,
-		type = "registry:block",
-		sourceDir,
-		registryDependencies = [],
-		dependencies = [],
-		categories = [],
-		files: fileConfigs,
-	} = blockConfig;
-
-	const files = await Promise.all(
-		fileConfigs.map(async (file) => {
-			const sourcePath = path.join(sourceDir, file.source);
-			let content = await readFileContent(sourcePath);
-
-			if (options.contentTransform) {
-				content = options.contentTransform(content);
-			}
-
-			return {
-				path: file.source,
-				content,
-				type: file.type || "registry:component",
-				target: file.target || "",
-			};
-		})
-	);
-
-	const blockJson = {
-		name,
-		type,
-		...(description && { description }),
-		...(dependencies.length > 0 && { dependencies }),
-		...(registryDependencies.length > 0 && { registryDependencies }),
-		...(categories.length > 0 && { categories }),
-		files,
-	};
-
-	const outputPath = path.join(options.outputDir, "styles", "default", `${name}.json`);
-
-	await writeJsonFile(outputPath, blockJson);
+  const {
+    name,
+    description,
+    type = "registry:block",
+    sourceDir,
+    registryDependencies = [],
+    dependencies = [],
+    categories = [],
+    files: fileConfigs,
+  } = blockConfig;
+
+  const files = await Promise.all(
+    fileConfigs.map(async (file) => {
+      const sourcePath = path.join(sourceDir, file.source);
+      let content = await readFileContent(sourcePath);
+
+      if (options.contentTransform) {
+        content = options.contentTransform(content);
+      }
+
+      return {
+        path: file.source,
+        content,
+        type: file.type || "registry:component",
+        target: file.target || "",
+      };
+    })
+  );
+
+  const blockJson = {
+    name,
+    type,
+    ...(description && { description }),
+    ...(dependencies.length > 0 && { dependencies }),
+    ...(registryDependencies.length > 0 && { registryDependencies }),
+    ...(categories.length > 0 && { categories }),
+    files,
+  };
+
+  const outputPath = path.join(options.outputDir, "styles", "default", `${name}.json`);
+
+  await writeJsonFile(outputPath, blockJson);
 }
 
 export async function generateAllBlocks(options: GeneratorOptions): Promise<void> {
-	const blockDirs = await fs.readdir(options.blocksDir);
-
-	for (const blockDir of blockDirs) {
-		const blockPath = path.join(options.blocksDir, blockDir);
-		const stat = await fs.stat(blockPath);
-		console.log("Processing block:", blockPath);
-
-		if (!stat.isDirectory()) continue;
-
-		// Look for a block.config.json in the block directory
-		const configPath = path.join(blockPath, "block.config.json");
-		let blockConfig: BlockConfig;
-
-		try {
-			const configContent = await readFileContent(configPath);
-			console.log("Found config:", configPath);
-			blockConfig = {
-				...options.baseConfig,
-				...JSON.parse(configContent),
-				sourceDir: blockPath,
-			};
-		} catch (error) {
-			console.error(`Error processing config for ${blockDir}:`, error);
-			continue;
-		}
-
-		await generateBlockJson(blockConfig, options);
-	}
+  const blockDirs = await fs.readdir(options.blocksDir);
+
+  for (const blockDir of blockDirs) {
+    const blockPath = path.join(options.blocksDir, blockDir);
+    const stat = await fs.stat(blockPath);
+    console.log("Processing block:", blockPath);
+
+    if (!stat.isDirectory()) continue;
+
+    // Look for a block.config.json in the block directory
+    const configPath = path.join(blockPath, "block.config.json");
+    let blockConfig: BlockConfig;
+
+    try {
+      const configContent = await readFileContent(configPath);
+      console.log("Found config:", configPath);
+      blockConfig = {
+        ...options.baseConfig,
+        ...JSON.parse(configContent),
+        sourceDir: blockPath,
+      };
+    } catch (error) {
+      console.error(`Error processing config for ${blockDir}:`, error);
+      continue;
+    }
+
+    await generateBlockJson(blockConfig, options);
+  }
 }
 
 // Example usage:
diff --git a/scripts/git-add-upstream.ts b/scripts/git-add-upstream.ts
index c2f26985..c9e2ae1a 100644
--- a/scripts/git-add-upstream.ts
+++ b/scripts/git-add-upstream.ts
@@ -11,130 +11,130 @@ const upstreamUrl = "https://github.com/shipkit-io/bones.git";
  * @returns The command output
  */
 function git(command: string): string {
-	try {
-		return execSync(`git ${command}`, { encoding: "utf-8" });
-	} catch (error) {
-		console.error(`Git command failed: git ${command}`);
-		throw error;
-	}
+  try {
+    return execSync(`git ${command}`, { encoding: "utf-8" });
+  } catch (error) {
+    console.error(`Git command failed: git ${command}`);
+    throw error;
+  }
 }
 
 async function copyFiles(sourcePath: string, targetPath: string) {
-	try {
-		// Create target directory if it doesn't exist
-		await mkdir(targetPath, { recursive: true });
-
-		// Read source directory
-		const entries = await readdir(sourcePath, { withFileTypes: true });
-
-		for (const entry of entries) {
-			const sourceFilePath = join(sourcePath, entry.name);
-			const targetFilePath = join(targetPath, entry.name);
-
-			// Skip excluded directories
-			if (EXCLUDED_DIRS.includes(entry.name)) {
-				console.info(`Skipping excluded directory: ${entry.name}`);
-				continue;
-			}
-
-			if (entry.isDirectory()) {
-				// Recursively copy subdirectories
-				await copyFiles(sourceFilePath, targetFilePath);
-			} else {
-				// Copy individual files
-				await copyFile(sourceFilePath, targetFilePath);
-				console.info(`Copied: ${relative(process.cwd(), targetFilePath)}`);
-			}
-		}
-	} catch (error) {
-		console.error("Error copying files:", error);
-		process.exit(1);
-	}
+  try {
+    // Create target directory if it doesn't exist
+    await mkdir(targetPath, { recursive: true });
+
+    // Read source directory
+    const entries = await readdir(sourcePath, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const sourceFilePath = join(sourcePath, entry.name);
+      const targetFilePath = join(targetPath, entry.name);
+
+      // Skip excluded directories
+      if (EXCLUDED_DIRS.includes(entry.name)) {
+        console.info(`Skipping excluded directory: ${entry.name}`);
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        // Recursively copy subdirectories
+        await copyFiles(sourceFilePath, targetFilePath);
+      } else {
+        // Copy individual files
+        await copyFile(sourceFilePath, targetFilePath);
+        console.info(`Copied: ${relative(process.cwd(), targetFilePath)}`);
+      }
+    }
+  } catch (error) {
+    console.error("Error copying files:", error);
+    process.exit(1);
+  }
 }
 
 async function main() {
-	const sourceDir = process.cwd();
-	const tempDir = join(sourceDir, "temp");
-
-	console.info("Starting upstream sync process...");
-
-	try {
-		// Make sure we're on main branch first
-		console.info("\nSwitching to main branch...");
-		git("checkout main");
-
-		// Delete existing temp branch if it exists
-		console.info("\nCleaning up existing temp branch...");
-		try {
-			git("branch -D temp");
-		} catch {
-			// Ignore error if branch doesn't exist
-		}
-
-		// Force cleanup any other temp state
-		try {
-			git("clean -fd"); // Clean untracked files and directories
-			git("reset --hard"); // Reset any uncommitted changes
-		} catch {
-			// Ignore cleanup errors
-		}
-
-		// Step 1: Save current files to temp directory
-		console.info("\nSaving current files to temp directory...");
-		await copyFiles(sourceDir, tempDir);
-
-		// Step 2: Clean working directory (except temp)
-		console.info("\nCleaning working directory...");
-		const entries = await readdir(sourceDir, { withFileTypes: true });
-		for (const entry of entries) {
-			if (entry.name === "temp" || entry.name === ".git" || EXCLUDED_DIRS.includes(entry.name)) {
-				continue;
-			}
-			await rm(join(sourceDir, entry.name), { recursive: true, force: true });
-		}
-
-		// Step 3: Setup upstream remote
-		console.info("\nSetting up upstream remote...");
-		try {
-			git("remote remove up");
-		} catch {
-			// Ignore error if remote doesn't exist
-		}
-		git(`remote add up ${upstreamUrl}`);
-		git("fetch up");
-
-		// Step 4: Create temp branch from upstream
-		console.info("\nCreating temp branch from upstream...");
-		git("checkout up/main");
-		git("switch -c temp");
-
-		// Step 5: Copy files back from temp
-		console.info("\nCopying files back from temp...");
-		await copyFiles(tempDir, sourceDir);
-		await rm(tempDir, { recursive: true, force: true });
-
-		// Step 6: Commit the changes
-		console.info("\nCommitting changes...");
-		git("add .");
-		git('commit -m "merge upstream changes"');
-
-		// Step 7: Checkout main and merge changes
-		console.info("\nChecking out main and merging changes...");
-		git("checkout main");
-		git("merge temp --allow-unrelated-histories");
-
-		console.info("\nProcess completed successfully!");
-		console.info("Please resolve any merge conflicts, then run:");
-		console.info("git add .");
-		console.info('git commit -m "added upstream"');
-		console.info("git push");
-	} catch (error) {
-		console.error("Failed to sync with upstream:", error);
-		if (error instanceof Error) {
-			console.error("Error details:", error.message);
-		}
-		process.exit(1);
-	}
+  const sourceDir = process.cwd();
+  const tempDir = join(sourceDir, "temp");
+
+  console.info("Starting upstream sync process...");
+
+  try {
+    // Make sure we're on main branch first
+    console.info("\nSwitching to main branch...");
+    git("checkout main");
+
+    // Delete existing temp branch if it exists
+    console.info("\nCleaning up existing temp branch...");
+    try {
+      git("branch -D temp");
+    } catch {
+      // Ignore error if branch doesn't exist
+    }
+
+    // Force cleanup any other temp state
+    try {
+      git("clean -fd"); // Clean untracked files and directories
+      git("reset --hard"); // Reset any uncommitted changes
+    } catch {
+      // Ignore cleanup errors
+    }
+
+    // Step 1: Save current files to temp directory
+    console.info("\nSaving current files to temp directory...");
+    await copyFiles(sourceDir, tempDir);
+
+    // Step 2: Clean working directory (except temp)
+    console.info("\nCleaning working directory...");
+    const entries = await readdir(sourceDir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.name === "temp" || entry.name === ".git" || EXCLUDED_DIRS.includes(entry.name)) {
+        continue;
+      }
+      await rm(join(sourceDir, entry.name), { recursive: true, force: true });
+    }
+
+    // Step 3: Setup upstream remote
+    console.info("\nSetting up upstream remote...");
+    try {
+      git("remote remove up");
+    } catch {
+      // Ignore error if remote doesn't exist
+    }
+    git(`remote add up ${upstreamUrl}`);
+    git("fetch up");
+
+    // Step 4: Create temp branch from upstream
+    console.info("\nCreating temp branch from upstream...");
+    git("checkout up/main");
+    git("switch -c temp");
+
+    // Step 5: Copy files back from temp
+    console.info("\nCopying files back from temp...");
+    await copyFiles(tempDir, sourceDir);
+    await rm(tempDir, { recursive: true, force: true });
+
+    // Step 6: Commit the changes
+    console.info("\nCommitting changes...");
+    git("add .");
+    git('commit -m "merge upstream changes"');
+
+    // Step 7: Checkout main and merge changes
+    console.info("\nChecking out main and merging changes...");
+    git("checkout main");
+    git("merge temp --allow-unrelated-histories");
+
+    console.info("\nProcess completed successfully!");
+    console.info("Please resolve any merge conflicts, then run:");
+    console.info("git add .");
+    console.info('git commit -m "added upstream"');
+    console.info("git push");
+  } catch (error) {
+    console.error("Failed to sync with upstream:", error);
+    if (error instanceof Error) {
+      console.error("Error details:", error.message);
+    }
+    process.exit(1);
+  }
 }
 
 // Run the script
diff --git a/scripts/git-checkpoint.ts b/scripts/git-checkpoint.ts
index 08c287cd..2a9aef78 100755
--- a/scripts/git-checkpoint.ts
+++ b/scripts/git-checkpoint.ts
@@ -11,30 +11,30 @@ import { format } from "date-fns";
  */
 
 try {
-	// Get current branch name
-	const currentBranch = execSync("git branch --show-current").toString().trim();
-	console.log(`📝 Current branch: ${currentBranch}`);
+  // Get current branch name
+  const currentBranch = execSync("git branch --show-current").toString().trim();
+  console.log(`📝 Current branch: ${currentBranch}`);
 
-	// Format date for branch name (YYYY-MM-DD-HHMMSS)
-	const dateString = format(new Date(), "yyyy-MM-dd-HHmmss");
+  // Format date for branch name (YYYY-MM-DD-HHMMSS)
+  const dateString = format(new Date(), "yyyy-MM-dd-HHmmss");
 
-	// Create checkpoint branch name
-	const checkpointBranch = `checkpoint-${currentBranch}-${dateString}`;
-	console.log(`🔖 Creating checkpoint branch: ${checkpointBranch}`);
+  // Create checkpoint branch name
+  const checkpointBranch = `checkpoint-${currentBranch}-${dateString}`;
+  console.log(`🔖 Creating checkpoint branch: ${checkpointBranch}`);
 
-	// Create and checkout the checkpoint branch
-	execSync(`git checkout -b ${checkpointBranch}`);
+  // Create and checkout the checkpoint branch
+  execSync(`git checkout -b ${checkpointBranch}`);
 
-	// Push the checkpoint branch to the remote
-	console.log(`📤 Pushing ${checkpointBranch} to remote...`);
-	execSync(`git push -u origin ${checkpointBranch}`);
+  // Push the checkpoint branch to the remote
+  console.log(`📤 Pushing ${checkpointBranch} to remote...`);
+  execSync(`git push -u origin ${checkpointBranch}`);
 
-	// Return to the original branch
-	console.log(`↩️ Returning to branch: ${currentBranch}`);
-	execSync(`git checkout ${currentBranch}`);
+  // Return to the original branch
+  console.log(`↩️ Returning to branch: ${currentBranch}`);
+  execSync(`git checkout ${currentBranch}`);
 
-	console.log("✅ Checkpoint created successfully");
+  console.log("✅ Checkpoint created successfully");
 } catch (error) {
-	console.error("❌ Error creating checkpoint:", error);
-	process.exit(1);
+  console.error("❌ Error creating checkpoint:", error);
+  process.exit(1);
 }
diff --git a/scripts/git-sync-upstream.ts b/scripts/git-sync-upstream.ts
index 893be208..c2e34f85 100644
--- a/scripts/git-sync-upstream.ts
+++ b/scripts/git-sync-upstream.ts
@@ -1,11 +1,11 @@
 import { execSync } from "node:child_process";
 import { Command } from "commander";
 import {
-	createPullRequest,
-	deleteBranch,
-	generateBranchName,
-	runCommand,
-	verifyCurrentBranch,
+  createPullRequest,
+  deleteBranch,
+  generateBranchName,
+  runCommand,
+  verifyCurrentBranch,
 } from "./utils/git";
 
 // Configuration
@@ -16,12 +16,12 @@ const CURRENT_BRANCH = "main";
 // Bones is the root template. An existing `upstream` remote always wins; set
 // UPSTREAM_REPO_URL to force a different upstream.
 const UPSTREAM_REPOS: string[] = process.env.UPSTREAM_REPO_URL
-	? [process.env.UPSTREAM_REPO_URL]
-	: ["https://github.com/shipkit-io/bones.git"];
+  ? [process.env.UPSTREAM_REPO_URL]
+  : ["https://github.com/shipkit-io/bones.git"];
 
 interface SyncOptions {
-	direct: boolean;
-	labels?: string[];
+  direct: boolean;
+  labels?: string[];
 }
 
 /**
@@ -29,29 +29,29 @@ interface SyncOptions {
  * Uses git ls-remote which is lightweight and doesn't clone
  */
 function canAccessRepo(url: string): boolean {
-	try {
-		execSync(`git ls-remote ${url}`, { stdio: "ignore" });
-		return true;
-	} catch {
-		return false;
-	}
+  try {
+    execSync(`git ls-remote ${url}`, { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 /**
  * Gets the first accessible upstream URL from the default list
  */
 function getUpstreamUrl(): string {
-	for (const url of UPSTREAM_REPOS) {
-		console.info(`Checking access to ${url}...`);
-		if (canAccessRepo(url)) {
-			console.info(`✅ Using upstream: ${url}`);
-			return url;
-		}
-		console.info(`⚠️ No access to ${url}, trying next...`);
-	}
-	throw new Error(
-		"No accessible upstream repository found. Please check your GitHub authentication."
-	);
+  for (const url of UPSTREAM_REPOS) {
+    console.info(`Checking access to ${url}...`);
+    if (canAccessRepo(url)) {
+      console.info(`✅ Using upstream: ${url}`);
+      return url;
+    }
+    console.info(`⚠️ No access to ${url}, trying next...`);
+  }
+  throw new Error(
+    "No accessible upstream repository found. Please check your GitHub authentication."
+  );
 }
 
 /**
@@ -60,94 +60,94 @@ function getUpstreamUrl(): string {
  * UPSTREAM_REPO_URL is set, which forces that URL.
  */
 function ensureUpstreamRemote(): void {
-	const forcedUrl = process.env.UPSTREAM_REPO_URL;
-
-	try {
-		const existingUrl = runCommand(`git remote get-url ${UPSTREAM_REMOTE}`).trim();
-
-		if (forcedUrl && existingUrl !== forcedUrl) {
-			console.info(
-				`Updating upstream remote '${UPSTREAM_REMOTE}' from '${existingUrl}' to '${forcedUrl}'`
-			);
-			runCommand(`git remote set-url ${UPSTREAM_REMOTE} ${forcedUrl}`);
-			return;
-		}
-
-		console.info(`Using existing remote '${UPSTREAM_REMOTE}' -> ${existingUrl}`);
-	} catch {
-		const upstreamUrl = getUpstreamUrl();
-		console.info(`Adding upstream remote '${UPSTREAM_REMOTE}' -> ${upstreamUrl}`);
-		runCommand(`git remote add ${UPSTREAM_REMOTE} ${upstreamUrl}`);
-	}
+  const forcedUrl = process.env.UPSTREAM_REPO_URL;
+
+  try {
+    const existingUrl = runCommand(`git remote get-url ${UPSTREAM_REMOTE}`).trim();
+
+    if (forcedUrl && existingUrl !== forcedUrl) {
+      console.info(
+        `Updating upstream remote '${UPSTREAM_REMOTE}' from '${existingUrl}' to '${forcedUrl}'`
+      );
+      runCommand(`git remote set-url ${UPSTREAM_REMOTE} ${forcedUrl}`);
+      return;
+    }
+
+    console.info(`Using existing remote '${UPSTREAM_REMOTE}' -> ${existingUrl}`);
+  } catch {
+    const upstreamUrl = getUpstreamUrl();
+    console.info(`Adding upstream remote '${UPSTREAM_REMOTE}' -> ${upstreamUrl}`);
+    runCommand(`git remote add ${UPSTREAM_REMOTE} ${upstreamUrl}`);
+  }
 }
 
 async function syncUpstream(options: SyncOptions): Promise<void> {
-	console.info("Syncing from upstream...");
-
-	try {
-		// Ensure upstream remote exists (add if missing)
-		ensureUpstreamRemote();
-
-		// Fetch the latest changes from upstream
-		runCommand(`git fetch ${UPSTREAM_REMOTE}`);
-
-		if (!options.direct) {
-			const tempBranch = generateBranchName("sync-upstream");
-
-			// Clean up any existing temp branch with same name (shouldn't exist due to timestamp)
-			deleteBranch(tempBranch);
-
-			// Create new temp branch from current branch
-			runCommand(`git checkout -b ${tempBranch}`);
-
-			try {
-				// Merge upstream changes into temp branch
-				console.info(
-					`Merging changes from ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH} into ${tempBranch}...`
-				);
-				runCommand(`git merge ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH}`);
-
-				// Create and push PR
-				runCommand(`git push -u origin ${tempBranch}`);
-
-				createPullRequest({
-					title: "chore: sync upstream changes",
-					body: "Automated PR to sync changes from upstream repository",
-					base: CURRENT_BRANCH,
-					head: tempBranch,
-					labels: options.labels,
-				});
-			} finally {
-				// Always switch back to original branch
-				runCommand(`git checkout ${CURRENT_BRANCH}`);
-			}
-		} else {
-			// Verify we're on the correct branch for direct merge
-			verifyCurrentBranch(CURRENT_BRANCH);
-
-			// Merge upstream changes directly
-			console.info(`Merging changes from ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH}...`);
-			runCommand(`git merge ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH}`);
-		}
-
-		console.info("Update from upstream completed successfully.");
-	} catch (error) {
-		console.error("Failed to sync upstream:", error instanceof Error ? error.message : error);
-		process.exit(1);
-	}
+  console.info("Syncing from upstream...");
+
+  try {
+    // Ensure upstream remote exists (add if missing)
+    ensureUpstreamRemote();
+
+    // Fetch the latest changes from upstream
+    runCommand(`git fetch ${UPSTREAM_REMOTE}`);
+
+    if (!options.direct) {
+      const tempBranch = generateBranchName("sync-upstream");
+
+      // Clean up any existing temp branch with same name (shouldn't exist due to timestamp)
+      deleteBranch(tempBranch);
+
+      // Create new temp branch from current branch
+      runCommand(`git checkout -b ${tempBranch}`);
+
+      try {
+        // Merge upstream changes into temp branch
+        console.info(
+          `Merging changes from ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH} into ${tempBranch}...`
+        );
+        runCommand(`git merge ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH}`);
+
+        // Create and push PR
+        runCommand(`git push -u origin ${tempBranch}`);
+
+        createPullRequest({
+          title: "chore: sync upstream changes",
+          body: "Automated PR to sync changes from upstream repository",
+          base: CURRENT_BRANCH,
+          head: tempBranch,
+          labels: options.labels,
+        });
+      } finally {
+        // Always switch back to original branch
+        runCommand(`git checkout ${CURRENT_BRANCH}`);
+      }
+    } else {
+      // Verify we're on the correct branch for direct merge
+      verifyCurrentBranch(CURRENT_BRANCH);
+
+      // Merge upstream changes directly
+      console.info(`Merging changes from ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH}...`);
+      runCommand(`git merge ${UPSTREAM_REMOTE}/${UPSTREAM_BRANCH}`);
+    }
+
+    console.info("Update from upstream completed successfully.");
+  } catch (error) {
+    console.error("Failed to sync upstream:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
 }
 
 // CLI configuration
 const program = new Command()
-	.name("sync-upstream")
-	.description("Sync changes from upstream repository")
-	.option("-d, --direct", "Sync directly to current branch instead of creating PR", false)
-	.option("-l, --labels <labels...>", "Labels to add to the PR")
-	.action((options) => {
-		syncUpstream({
-			direct: options.direct,
-			labels: options.labels,
-		});
-	});
+  .name("sync-upstream")
+  .description("Sync changes from upstream repository")
+  .option("-d, --direct", "Sync directly to current branch instead of creating PR", false)
+  .option("-l, --labels <labels...>", "Labels to add to the PR")
+  .action((options) => {
+    syncUpstream({
+      direct: options.direct,
+      labels: options.labels,
+    });
+  });
 
 program.parse(process.argv);
diff --git a/scripts/lighthouse/analyze.ts b/scripts/lighthouse/analyze.ts
index 0cf78665..aa31e598 100644
--- a/scripts/lighthouse/analyze.ts
+++ b/scripts/lighthouse/analyze.ts
@@ -8,91 +8,91 @@ import fs from "node:fs/promises";
 import path from "node:path";
 
 interface NormalizedIssue {
-	url: string;
-	type:
-		| "image-missing-dimensions"
-		| "legacy-img-tag"
-		| "font-preload-missing"
-		| "html-lang-missing"
-		| "canonical-missing"
-		| "large-image-unoptimized"
-		| "unused-css"
-		| "tap-targets-small"
-		| "a11y-alt-missing"
-		| "seo-missing-meta";
-	details?: Record<string, unknown>;
+  url: string;
+  type:
+    | "image-missing-dimensions"
+    | "legacy-img-tag"
+    | "font-preload-missing"
+    | "html-lang-missing"
+    | "canonical-missing"
+    | "large-image-unoptimized"
+    | "unused-css"
+    | "tap-targets-small"
+    | "a11y-alt-missing"
+    | "seo-missing-meta";
+  details?: Record<string, unknown>;
 }
 
 interface LighthouseReportFile {
-	finalUrl?: string;
-	audits?: Record<string, { score: number | null; details?: unknown; displayValue?: string }>;
-	categories?: Record<string, { score: number | null }>;
+  finalUrl?: string;
+  audits?: Record<string, { score: number | null; details?: unknown; displayValue?: string }>;
+  categories?: Record<string, { score: number | null }>;
 }
 
 async function findReports(dir: string): Promise<string[]> {
-	const entries = await fs.readdir(dir, { withFileTypes: true });
-	const files: string[] = [];
-	for (const entry of entries) {
-		if (entry.isDirectory()) {
-			const candidate = path.join(dir, entry.name, "lighthouse.json");
-			try {
-				await fs.access(candidate);
-				files.push(candidate);
-			} catch {}
-		}
-	}
-	return files;
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+  const files: string[] = [];
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const candidate = path.join(dir, entry.name, "lighthouse.json");
+      try {
+        await fs.access(candidate);
+        files.push(candidate);
+      } catch {}
+    }
+  }
+  return files;
 }
 
 function pushIf(condition: boolean, issues: NormalizedIssue[], issue: NormalizedIssue): void {
-	if (condition) issues.push(issue);
+  if (condition) issues.push(issue);
 }
 
 async function analyzeReport(filePath: string): Promise<NormalizedIssue[]> {
-	const text = await fs.readFile(filePath, "utf8");
-	const report: LighthouseReportFile = JSON.parse(text);
-	const url = report.finalUrl ?? "";
-	const audits = report.audits ?? {};
-	const issues: NormalizedIssue[] = [];
+  const text = await fs.readFile(filePath, "utf8");
+  const report: LighthouseReportFile = JSON.parse(text);
+  const url = report.finalUrl ?? "";
+  const audits = report.audits ?? {};
+  const issues: NormalizedIssue[] = [];
 
-	const usesNextImage = false; // Determined later by codemods; keep conservative here
+  const usesNextImage = false; // Determined later by codemods; keep conservative here
 
-	const imageSizeAudit = audits["image-size-responsive"];
-	const imageAspectAudit = audits["unsized-images"];
-	const tapTargets = audits["tap-targets"];
-	// const usesHttp2 = audits["uses-http2"]; // currently unused
-	const fontDisplay = audits["font-display"];
-	const lang = audits["html-has-lang"];
-	const canonical = audits["document-title"] && audits["meta-description"]; // heuristic for missing meta
-	const altText = audits["image-alt"];
+  const imageSizeAudit = audits["image-size-responsive"];
+  const imageAspectAudit = audits["unsized-images"];
+  const tapTargets = audits["tap-targets"];
+  // const usesHttp2 = audits["uses-http2"]; // currently unused
+  const fontDisplay = audits["font-display"];
+  const lang = audits["html-has-lang"];
+  const canonical = audits["document-title"] && audits["meta-description"]; // heuristic for missing meta
+  const altText = audits["image-alt"];
 
-	pushIf(imageAspectAudit?.score === 0, issues, { url, type: "image-missing-dimensions" });
-	pushIf(imageSizeAudit?.score === 0, issues, { url, type: "large-image-unoptimized" });
-	pushIf(!usesNextImage, issues, { url, type: "legacy-img-tag" });
-	pushIf(fontDisplay?.score === 0, issues, { url, type: "font-preload-missing" });
-	pushIf(lang?.score === 0, issues, { url, type: "html-lang-missing" });
-	pushIf(!canonical, issues, { url, type: "seo-missing-meta" });
-	pushIf(tapTargets?.score === 0, issues, { url, type: "tap-targets-small" });
-	pushIf(altText?.score === 0, issues, { url, type: "a11y-alt-missing" });
+  pushIf(imageAspectAudit?.score === 0, issues, { url, type: "image-missing-dimensions" });
+  pushIf(imageSizeAudit?.score === 0, issues, { url, type: "large-image-unoptimized" });
+  pushIf(!usesNextImage, issues, { url, type: "legacy-img-tag" });
+  pushIf(fontDisplay?.score === 0, issues, { url, type: "font-preload-missing" });
+  pushIf(lang?.score === 0, issues, { url, type: "html-lang-missing" });
+  pushIf(!canonical, issues, { url, type: "seo-missing-meta" });
+  pushIf(tapTargets?.score === 0, issues, { url, type: "tap-targets-small" });
+  pushIf(altText?.score === 0, issues, { url, type: "a11y-alt-missing" });
 
-	return issues;
+  return issues;
 }
 
 async function main(): Promise<void> {
-	const baseDir = process.env.LH_OUT_DIR ?? ".lighthouse";
-	const reports = await findReports(baseDir);
-	const allIssues: NormalizedIssue[] = [];
-	for (const file of reports) {
-		const issues = await analyzeReport(file);
-		allIssues.push(...issues);
-	}
-	const out = path.join(baseDir, "normalized.json");
-	await fs.writeFile(out, JSON.stringify(allIssues, null, 2), "utf8");
+  const baseDir = process.env.LH_OUT_DIR ?? ".lighthouse";
+  const reports = await findReports(baseDir);
+  const allIssues: NormalizedIssue[] = [];
+  for (const file of reports) {
+    const issues = await analyzeReport(file);
+    allIssues.push(...issues);
+  }
+  const out = path.join(baseDir, "normalized.json");
+  await fs.writeFile(out, JSON.stringify(allIssues, null, 2), "utf8");
 
-	console.log(`[analyze] Wrote normalized issues → ${out} (${allIssues.length})`);
+  console.log(`[analyze] Wrote normalized issues → ${out} (${allIssues.length})`);
 }
 
 main().catch((err) => {
-	console.error("[analyze] Failed:", err);
-	process.exit(1);
+  console.error("[analyze] Failed:", err);
+  process.exit(1);
 });
diff --git a/scripts/lighthouse/fixers.ts b/scripts/lighthouse/fixers.ts
index 8f7f4213..9b6f02bd 100644
--- a/scripts/lighthouse/fixers.ts
+++ b/scripts/lighthouse/fixers.ts
@@ -9,39 +9,39 @@ import fs from "node:fs/promises";
 import path from "node:path";
 
 export interface FixTask {
-	name: string;
-	run: () => Promise<{ changedFiles: string[]; notes?: string[] }>;
+  name: string;
+  run: () => Promise<{ changedFiles: string[]; notes?: string[] }>;
 }
 
 function repoPath(...paths: string[]): string {
-	return path.join(process.cwd(), ...paths);
+  return path.join(process.cwd(), ...paths);
 }
 
 export const fixCanonicalInSiteConfig: FixTask = {
-	name: "ensure-canonical",
-	async run() {
-		const file = repoPath("src", "config", "site-config.ts");
-		try {
-			const content = await fs.readFile(file, "utf8");
-			if (content.includes("alternates") && content.includes("canonical")) {
-				return { changedFiles: [], notes: ["canonical already set in site-config.ts"] };
-			}
-			// Conservative: do not auto-edit blindly; just log a note for now
-			return { changedFiles: [], notes: ["canonical appears configured; no change"] };
-		} catch {
-			return { changedFiles: [], notes: ["site-config.ts not found; skipping canonical"] };
-		}
-	},
+  name: "ensure-canonical",
+  async run() {
+    const file = repoPath("src", "config", "site-config.ts");
+    try {
+      const content = await fs.readFile(file, "utf8");
+      if (content.includes("alternates") && content.includes("canonical")) {
+        return { changedFiles: [], notes: ["canonical already set in site-config.ts"] };
+      }
+      // Conservative: do not auto-edit blindly; just log a note for now
+      return { changedFiles: [], notes: ["canonical appears configured; no change"] };
+    } catch {
+      return { changedFiles: [], notes: ["site-config.ts not found; skipping canonical"] };
+    }
+  },
 };
 
 export async function runFixers(): Promise<{ changedFiles: string[]; notes: string[] }> {
-	const tasks: FixTask[] = [fixCanonicalInSiteConfig];
-	const changedFiles: string[] = [];
-	const notes: string[] = [];
-	for (const task of tasks) {
-		const res = await task.run();
-		changedFiles.push(...res.changedFiles);
-		if (res.notes) notes.push(...res.notes);
-	}
-	return { changedFiles, notes };
+  const tasks: FixTask[] = [fixCanonicalInSiteConfig];
+  const changedFiles: string[] = [];
+  const notes: string[] = [];
+  for (const task of tasks) {
+    const res = await task.run();
+    changedFiles.push(...res.changedFiles);
+    if (res.notes) notes.push(...res.notes);
+  }
+  return { changedFiles, notes };
 }
diff --git a/scripts/lighthouse/loop.ts b/scripts/lighthouse/loop.ts
index 5c743f65..29441626 100644
--- a/scripts/lighthouse/loop.ts
+++ b/scripts/lighthouse/loop.ts
@@ -10,112 +10,112 @@ import path from "node:path";
 import { runFixers } from "./fixers";
 
 interface NormalizedIssue {
-	url: string;
-	type: string;
+  url: string;
+  type: string;
 }
 
 interface Thresholds {
-	performance: number;
-	accessibility: number;
-	seo: number;
-	bestPractices: number;
+  performance: number;
+  accessibility: number;
+  seo: number;
+  bestPractices: number;
 }
 
 function exec(
-	cmd: string,
-	args: string[],
-	env?: Record<string, string>
+  cmd: string,
+  args: string[],
+  env?: Record<string, string>
 ): Promise<{ code: number }> {
-	return new Promise((resolve, reject) => {
-		const child = spawn(cmd, args, { stdio: "inherit", env: { ...process.env, ...env } });
-		child.on("close", (code) => resolve({ code: code ?? 1 }));
-		child.on("error", reject);
-	});
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, { stdio: "inherit", env: { ...process.env, ...env } });
+    child.on("close", (code) => resolve({ code: code ?? 1 }));
+    child.on("error", reject);
+  });
 }
 
 async function readLatestSummary(baseDir: string): Promise<Record<string, number>> {
-	const dir = baseDir;
-	const entries = await fs.readdir(dir);
-	const indexes = entries.filter((f) => f.startsWith("index-") && f.endsWith(".json"));
-	if (indexes.length === 0) return {};
-	const latestEntry = indexes.sort().at(-1);
-	if (!latestEntry) return {};
-	const latest = latestEntry;
-	const json = JSON.parse(await fs.readFile(path.join(dir, latest), "utf8"));
-	// For single URL run, take first categories
-	const first = Array.isArray(json) ? json[0] : undefined;
-	return first?.categories ?? {};
+  const dir = baseDir;
+  const entries = await fs.readdir(dir);
+  const indexes = entries.filter((f) => f.startsWith("index-") && f.endsWith(".json"));
+  if (indexes.length === 0) return {};
+  const latestEntry = indexes.sort().at(-1);
+  if (!latestEntry) return {};
+  const latest = latestEntry;
+  const json = JSON.parse(await fs.readFile(path.join(dir, latest), "utf8"));
+  // For single URL run, take first categories
+  const first = Array.isArray(json) ? json[0] : undefined;
+  return first?.categories ?? {};
 }
 
 async function readIssues(baseDir: string): Promise<NormalizedIssue[]> {
-	const file = path.join(baseDir, "normalized.json");
-	try {
-		const text = await fs.readFile(file, "utf8");
-		return JSON.parse(text);
-	} catch {
-		return [];
-	}
+  const file = path.join(baseDir, "normalized.json");
+  try {
+    const text = await fs.readFile(file, "utf8");
+    return JSON.parse(text);
+  } catch {
+    return [];
+  }
 }
 
 function categoriesMeetThresholds(categories: Record<string, number>, t: Thresholds): boolean {
-	const performance = categories.performance ?? categories.performance;
-	const accessibility = categories.accessibility ?? categories.accessibility;
-	const seo = categories.seo ?? categories.seo;
-	const bestPractices = categories["best-practices"] ?? categories.bestPractices;
-	return (
-		(performance ?? 0) >= t.performance &&
-		(accessibility ?? 0) >= t.accessibility &&
-		(seo ?? 0) >= t.seo &&
-		(bestPractices ?? 0) >= t.bestPractices
-	);
+  const performance = categories.performance ?? categories.performance;
+  const accessibility = categories.accessibility ?? categories.accessibility;
+  const seo = categories.seo ?? categories.seo;
+  const bestPractices = categories["best-practices"] ?? categories.bestPractices;
+  return (
+    (performance ?? 0) >= t.performance &&
+    (accessibility ?? 0) >= t.accessibility &&
+    (seo ?? 0) >= t.seo &&
+    (bestPractices ?? 0) >= t.bestPractices
+  );
 }
 
 async function main(): Promise<void> {
-	const urls = process.argv.slice(2).filter((a) => !a.startsWith("-"));
-	const LH_OUT_DIR = process.env.LH_OUT_DIR ?? ".lighthouse";
-	const thresholds: Thresholds = {
-		performance: Number(process.env.LH_T_PERF ?? 90),
-		accessibility: Number(process.env.LH_T_A11Y ?? 95),
-		seo: Number(process.env.LH_T_SEO ?? 95),
-		bestPractices: Number(process.env.LH_T_BP ?? 95),
-	};
-	const maxIters = Number(process.env.LH_MAX_ITERS ?? 2);
-
-	for (let i = 0; i < maxIters; i++) {
-		console.log(`\n[loop] Iteration ${i + 1}/${maxIters}`);
-
-		const runArgs = ["run", "scripts/lighthouse/run.ts", ...urls];
-		const runRes = await exec("bun", runArgs, { LH_OUT_DIR });
-		if (runRes.code !== 0) throw new Error("lighthouse run failed");
-
-		const analyzeRes = await exec("bun", ["run", "scripts/lighthouse/analyze.ts"], { LH_OUT_DIR });
-		if (analyzeRes.code !== 0) throw new Error("analyze failed");
-
-		const categories = await readLatestSummary(LH_OUT_DIR);
-
-		console.log("[loop] Categories:", categories);
-		if (categoriesMeetThresholds(categories, thresholds)) {
-			console.log("[loop] Thresholds met. Exiting.");
-			return;
-		}
-
-		const issues = await readIssues(LH_OUT_DIR);
-
-		console.log(`[loop] ${issues.length} normalized issues`);
-		const { changedFiles, notes } = await runFixers();
-		if (notes.length) {
-			console.log(`[loop] Fixer notes:\n - ${notes.join("\n - ")}`);
-		}
-		if (changedFiles.length === 0) {
-			console.log("[loop] No changes from fixers; stopping.");
-			break;
-		}
-
-		console.log(`[loop] Applied changes to ${changedFiles.length} files. Re-running audits...`);
-	}
+  const urls = process.argv.slice(2).filter((a) => !a.startsWith("-"));
+  const LH_OUT_DIR = process.env.LH_OUT_DIR ?? ".lighthouse";
+  const thresholds: Thresholds = {
+    performance: Number(process.env.LH_T_PERF ?? 90),
+    accessibility: Number(process.env.LH_T_A11Y ?? 95),
+    seo: Number(process.env.LH_T_SEO ?? 95),
+    bestPractices: Number(process.env.LH_T_BP ?? 95),
+  };
+  const maxIters = Number(process.env.LH_MAX_ITERS ?? 2);
+
+  for (let i = 0; i < maxIters; i++) {
+    console.log(`\n[loop] Iteration ${i + 1}/${maxIters}`);
+
+    const runArgs = ["run", "scripts/lighthouse/run.ts", ...urls];
+    const runRes = await exec("bun", runArgs, { LH_OUT_DIR });
+    if (runRes.code !== 0) throw new Error("lighthouse run failed");
+
+    const analyzeRes = await exec("bun", ["run", "scripts/lighthouse/analyze.ts"], { LH_OUT_DIR });
+    if (analyzeRes.code !== 0) throw new Error("analyze failed");
+
+    const categories = await readLatestSummary(LH_OUT_DIR);
+
+    console.log("[loop] Categories:", categories);
+    if (categoriesMeetThresholds(categories, thresholds)) {
+      console.log("[loop] Thresholds met. Exiting.");
+      return;
+    }
+
+    const issues = await readIssues(LH_OUT_DIR);
+
+    console.log(`[loop] ${issues.length} normalized issues`);
+    const { changedFiles, notes } = await runFixers();
+    if (notes.length) {
+      console.log(`[loop] Fixer notes:\n - ${notes.join("\n - ")}`);
+    }
+    if (changedFiles.length === 0) {
+      console.log("[loop] No changes from fixers; stopping.");
+      break;
+    }
+
+    console.log(`[loop] Applied changes to ${changedFiles.length} files. Re-running audits...`);
+  }
 }
 
 main().catch((err) => {
-	console.error("[loop] Failed:", err);
-	process.exit(1);
+  console.error("[loop] Failed:", err);
+  process.exit(1);
 });
diff --git a/scripts/lighthouse/run.ts b/scripts/lighthouse/run.ts
index 49376b00..7574e150 100644
--- a/scripts/lighthouse/run.ts
+++ b/scripts/lighthouse/run.ts
@@ -14,104 +14,104 @@ import { launch } from "chrome-launcher";
 import lighthouse from "lighthouse";
 
 interface LighthouseRunResultSummary {
-	url: string;
-	outputDir: string;
-	categories: Record<string, number | null>;
-	reportJsonPath: string;
-	reportHtmlPath: string;
+  url: string;
+  outputDir: string;
+  categories: Record<string, number | null>;
+  reportJsonPath: string;
+  reportHtmlPath: string;
 }
 
 function getUrlsFromArgsOrEnv(): string[] {
-	const argvUrls = process.argv.slice(2).filter((arg) => !arg.startsWith("-"));
-	if (argvUrls.length > 0) return argvUrls;
-	const envList =
-		process.env.LH_URLS?.split(",")
-			.map((u) => u.trim())
-			.filter(Boolean) ?? [];
-	if (envList.length > 0) return envList;
-	return ["http://localhost:3000/"];
+  const argvUrls = process.argv.slice(2).filter((arg) => !arg.startsWith("-"));
+  if (argvUrls.length > 0) return argvUrls;
+  const envList =
+    process.env.LH_URLS?.split(",")
+      .map((u) => u.trim())
+      .filter(Boolean) ?? [];
+  if (envList.length > 0) return envList;
+  return ["http://localhost:3000/"];
 }
 
 function getPreset(): "desktop" | "mobile" {
-	const value = (process.env.LH_PRESET ?? "desktop").toLowerCase();
-	return value === "mobile" ? "mobile" : "desktop";
+  const value = (process.env.LH_PRESET ?? "desktop").toLowerCase();
+  return value === "mobile" ? "mobile" : "desktop";
 }
 
 function safeSlug(input: string): string {
-	return input
-		.replace(/^https?:\/\//, "")
-		.replace(/[^a-zA-Z0-9]+/g, "-")
-		.replace(/-+/g, "-")
-		.replace(/(^-|-$)/g, "")
-		.slice(0, 120);
+  return input
+    .replace(/^https?:\/\//, "")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/(^-|-$)/g, "")
+    .slice(0, 120);
 }
 
 async function ensureDir(dir: string): Promise<void> {
-	await fs.mkdir(dir, { recursive: true });
+  await fs.mkdir(dir, { recursive: true });
 }
 
 async function runSingle(
-	url: string,
-	outBaseDir: string,
-	preset: "desktop" | "mobile"
+  url: string,
+  outBaseDir: string,
+  preset: "desktop" | "mobile"
 ): Promise<LighthouseRunResultSummary> {
-	const slug = safeSlug(url);
-	const outputDir = path.join(outBaseDir, `${slug}-${preset}`);
-	await ensureDir(outputDir);
-
-	const chrome = await launch({ chromeFlags: ["--headless", "--no-sandbox"] });
-	try {
-		const result = await lighthouse(url, {
-			port: chrome.port,
-			logLevel: "error",
-			output: ["json", "html"],
-		});
-
-		const lhr = result?.lhr;
-		const report = result?.report;
-
-		// report[0] json, report[1] html
-		const jsonPath = path.join(outputDir, "lighthouse.json");
-		const htmlPath = path.join(outputDir, "lighthouse.html");
-		await fs.writeFile(jsonPath, String(report?.[0] ?? ""), "utf8");
-		await fs.writeFile(htmlPath, String(report?.[1] ?? ""), "utf8");
-
-		const categories: Record<string, number | null> = {};
-		if (lhr?.categories) {
-			for (const [key, cat] of Object.entries(lhr.categories)) {
-				const score = (cat as any)?.score;
-				categories[key] = typeof score === "number" ? Math.round(score * 100) : null;
-			}
-		}
-
-		return { url, outputDir, categories, reportJsonPath: jsonPath, reportHtmlPath: htmlPath };
-	} finally {
-		await chrome.kill();
-	}
+  const slug = safeSlug(url);
+  const outputDir = path.join(outBaseDir, `${slug}-${preset}`);
+  await ensureDir(outputDir);
+
+  const chrome = await launch({ chromeFlags: ["--headless", "--no-sandbox"] });
+  try {
+    const result = await lighthouse(url, {
+      port: chrome.port,
+      logLevel: "error",
+      output: ["json", "html"],
+    });
+
+    const lhr = result?.lhr;
+    const report = result?.report;
+
+    // report[0] json, report[1] html
+    const jsonPath = path.join(outputDir, "lighthouse.json");
+    const htmlPath = path.join(outputDir, "lighthouse.html");
+    await fs.writeFile(jsonPath, String(report?.[0] ?? ""), "utf8");
+    await fs.writeFile(htmlPath, String(report?.[1] ?? ""), "utf8");
+
+    const categories: Record<string, number | null> = {};
+    if (lhr?.categories) {
+      for (const [key, cat] of Object.entries(lhr.categories)) {
+        const score = (cat as any)?.score;
+        categories[key] = typeof score === "number" ? Math.round(score * 100) : null;
+      }
+    }
+
+    return { url, outputDir, categories, reportJsonPath: jsonPath, reportHtmlPath: htmlPath };
+  } finally {
+    await chrome.kill();
+  }
 }
 
 async function main(): Promise<void> {
-	const urls = getUrlsFromArgsOrEnv();
-	const preset = getPreset();
-	const outDir = process.env.LH_OUT_DIR ?? ".lighthouse";
-	await ensureDir(outDir);
+  const urls = getUrlsFromArgsOrEnv();
+  const preset = getPreset();
+  const outDir = process.env.LH_OUT_DIR ?? ".lighthouse";
+  await ensureDir(outDir);
 
-	const results: LighthouseRunResultSummary[] = [];
-	for (const url of urls) {
-		console.log(`[lighthouse] Running on ${url} (${preset})`);
-		const summary = await runSingle(url, outDir, preset);
-		results.push(summary);
+  const results: LighthouseRunResultSummary[] = [];
+  for (const url of urls) {
+    console.log(`[lighthouse] Running on ${url} (${preset})`);
+    const summary = await runSingle(url, outDir, preset);
+    results.push(summary);
 
-		console.log(`[lighthouse] Done ${url} →`, summary.categories);
-	}
+    console.log(`[lighthouse] Done ${url} →`, summary.categories);
+  }
 
-	const indexPath = path.join(outDir, `index-${Date.now()}.json`);
-	await fs.writeFile(indexPath, JSON.stringify(results, null, 2), "utf8");
+  const indexPath = path.join(outDir, `index-${Date.now()}.json`);
+  await fs.writeFile(indexPath, JSON.stringify(results, null, 2), "utf8");
 
-	console.log(`[lighthouse] Wrote summary index → ${indexPath}`);
+  console.log(`[lighthouse] Wrote summary index → ${indexPath}`);
 }
 
 main().catch((error) => {
-	console.error("[lighthouse] Failed:", error);
-	process.exit(1);
+  console.error("[lighthouse] Failed:", error);
+  process.exit(1);
 });
diff --git a/scripts/nextjs-list-pages.ts b/scripts/nextjs-list-pages.ts
index 9c23e16e..6d28ab95 100644
--- a/scripts/nextjs-list-pages.ts
+++ b/scripts/nextjs-list-pages.ts
@@ -15,46 +15,46 @@ const serverDir = path.join(nextDir, "server"); // pages or app live under here
 let ssgRoutes = [];
 let dynamicSsgRoutes = [];
 try {
-	const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
-	ssgRoutes = Object.keys(manifest.routes);
-	dynamicSsgRoutes = Object.keys(manifest.dynamicRoutes);
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  ssgRoutes = Object.keys(manifest.routes);
+  dynamicSsgRoutes = Object.keys(manifest.dynamicRoutes);
 } catch (err) {
-	console.error("❌ Can’t read prerender‑manifest.json – did you run `next build`?");
-	process.exit(1);
+  console.error("❌ Can’t read prerender‑manifest.json – did you run `next build`?");
+  process.exit(1);
 }
 
 // 2️⃣  Walk the .next/server directory for emitted HTML files
 function walk(dir: string, acc: string[] = []): string[] {
-	for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
-		const full = path.join(dir, entry.name);
-		if (entry.isDirectory()) walk(full, acc);
-		else if (entry.isFile() && entry.name.endsWith(".html")) acc.push(full);
-	}
-	return acc;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walk(full, acc);
+    else if (entry.isFile() && entry.name.endsWith(".html")) acc.push(full);
+  }
+  return acc;
 }
 const htmlFiles = walk(serverDir)
-	// turn ".next/server/pages/about.html" → “/about”
-	.map((f: string) => {
-		const rel = f.replace(serverDir, "").replace(/\\/g, "/");
-		return rel.replace(/\/index\.html$/, "/").replace(/\.html$/, "") || "/";
-	})
-	.sort();
+  // turn ".next/server/pages/about.html" → “/about”
+  .map((f: string) => {
+    const rel = f.replace(serverDir, "").replace(/\\/g, "/");
+    return rel.replace(/\/index\.html$/, "/").replace(/\.html$/, "") || "/";
+  })
+  .sort();
 
 console.log("\n📄 Static HTML files emitted:");
 htmlFiles.forEach((p) => {
-	console.log("  •", p);
+  console.log("  •", p);
 });
 
 console.log("\n📦 SSG routes from prerender‑manifest.json:");
 ssgRoutes.forEach((p) => {
-	console.log("  •", p);
+  console.log("  •", p);
 });
 
 if (dynamicSsgRoutes.length) {
-	console.log("\n📦 Dynamic SSG routes (ISR/fallback):");
-	dynamicSsgRoutes.forEach((p) => {
-		console.log("  •", p);
-	});
+  console.log("\n📦 Dynamic SSG routes (ISR/fallback):");
+  dynamicSsgRoutes.forEach((p) => {
+    console.log("  •", p);
+  });
 }
 
 console.log("\n✅ Done.");
diff --git a/scripts/patch-payload-imports.js b/scripts/patch-payload-imports.js
index 026a49be..fc9d1aa4 100644
--- a/scripts/patch-payload-imports.js
+++ b/scripts/patch-payload-imports.js
@@ -23,37 +23,27 @@ const dirsToPath = [
 ];
 
 // File extensions that Node.js ESM cannot handle
-const problematicExtensions =
-  "css|scss|svg|png|jpg|jpeg|gif|webp|ico|woff|woff2|eot|ttf|otf";
+const problematicExtensions = "css|scss|svg|png|jpg|jpeg|gif|webp|ico|woff|woff2|eot|ttf|otf";
 
 // Patterns to match problematic imports (both formatted and minified)
 const problematicImportPatterns = [
   // Style imports: import './something.scss';
-  new RegExp(
-    `import\\s+['"][^'"]*\\.(${problematicExtensions})['"];?\\n?`,
-    "g",
-  ),
+  new RegExp(`import\\s+['"][^'"]*\\.(${problematicExtensions})['"];?\\n?`, "g"),
   // Minified style imports: import"./something.scss";
   new RegExp(`import["'][^"']*\\.(${problematicExtensions})["'];?`, "g"),
   // Asset imports with variable: import something from './file.svg';
-  new RegExp(
-    `import\\s+(\\w+)\\s+from\\s+['"][^'"]*\\.(${problematicExtensions})['"];?\\n?`,
-    "g",
-  ),
+  new RegExp(`import\\s+(\\w+)\\s+from\\s+['"][^'"]*\\.(${problematicExtensions})['"];?\\n?`, "g"),
   // Minified asset imports: import a from"./file.svg";
-  new RegExp(
-    `import\\s*(\\w+)\\s*from["'][^"']*\\.(${problematicExtensions})["'];?`,
-    "g",
-  ),
+  new RegExp(`import\\s*(\\w+)\\s*from["'][^"']*\\.(${problematicExtensions})["'];?`, "g"),
   // Re-export: export { default as name } from './file.svg';
   new RegExp(
     `export\\s*\\{\\s*default\\s+as\\s+(\\w+)\\s*\\}\\s*from\\s*['"][^'"]*\\.(${problematicExtensions})['"];?\\n?`,
-    "g",
+    "g"
   ),
   // Minified re-export: export{default as name}from"./file.svg";
   new RegExp(
     `export\\s*\\{\\s*default\\s+as\\s+(\\w+)\\s*\\}\\s*from\\s*["'][^"']*\\.(${problematicExtensions})["'];?`,
-    "g",
+    "g"
   ),
 ];
 
@@ -122,14 +112,10 @@ for (const relDir of dirsToPath) {
   }
 }
 
-console.log(
-  `[patch] Scanned ${filesScanned} files, patched ${patchedCount} file(s)`,
-);
+console.log(`[patch] Scanned ${filesScanned} files, patched ${patchedCount} file(s)`);
 
 if (patchedCount > 0) {
-  console.log(
-    "[patch] Successfully removed problematic imports from Payload packages",
-  );
+  console.log("[patch] Successfully removed problematic imports from Payload packages");
 } else {
   console.log("[patch] No problematic imports found to patch");
 }
diff --git a/scripts/post-deploy.ts b/scripts/post-deploy.ts
index 13358153..20e866eb 100644
--- a/scripts/post-deploy.ts
+++ b/scripts/post-deploy.ts
@@ -1,19 +1,19 @@
 import { execSync } from "child_process";
 
 async function postDeploy() {
-	console.log("🚀 Running post-deployment tasks...");
+  console.log("🚀 Running post-deployment tasks...");
 
-	try {
-		// Sync database
-		console.log("🔄 Syncing database...");
-		execSync("bun run db:sync", { stdio: "inherit" });
+  try {
+    // Sync database
+    console.log("🔄 Syncing database...");
+    execSync("bun run db:sync", { stdio: "inherit" });
 
-		console.log("✨ Post-deployment tasks completed successfully!");
-		process.exit(0);
-	} catch (error) {
-		console.error("❌ Error in post-deployment tasks:", error);
-		process.exit(1);
-	}
+    console.log("✨ Post-deployment tasks completed successfully!");
+    process.exit(0);
+  } catch (error) {
+    console.error("❌ Error in post-deployment tasks:", error);
+    process.exit(1);
+  }
 }
 
 void postDeploy();
diff --git a/scripts/rebrand.ts b/scripts/rebrand.ts
index 5759a8a5..efaf2fc5 100755
--- a/scripts/rebrand.ts
+++ b/scripts/rebrand.ts
@@ -24,17 +24,17 @@ import readline from "readline";
 
 // Create readline interface for prompting
 const rl = readline.createInterface({
-	input: process.stdin,
-	output: process.stdout,
+  input: process.stdin,
+  output: process.stdout,
 });
 
 // Helper function to prompt for input
 const prompt = (question: string, defaultValue?: string): Promise<string> => {
-	return new Promise((resolve) => {
-		rl.question(`${question}${defaultValue ? ` (default: ${defaultValue})` : ""}: `, (answer) => {
-			resolve(answer || defaultValue || "");
-		});
-	});
+  return new Promise((resolve) => {
+    rl.question(`${question}${defaultValue ? ` (default: ${defaultValue})` : ""}: `, (answer) => {
+      resolve(answer || defaultValue || "");
+    });
+  });
 };
 
 // Parse command line arguments
@@ -43,16 +43,16 @@ const argMap: Record<string, string> = {};
 const flags: Record<string, boolean> = {};
 
 for (let i = 0; i < args.length; i++) {
-	if (args[i] && args[i]!.startsWith("--")) {
-		const arg = args[i]!.substring(2);
-		// Check if it's a flag (no value)
-		if (i + 1 >= args.length || (args[i + 1] && args[i + 1]!.startsWith("--"))) {
-			flags[arg] = true;
-		} else if (args[i + 1]) {
-			argMap[arg] = args[i + 1]!;
-			i++;
-		}
-	}
+  if (args[i] && args[i]!.startsWith("--")) {
+    const arg = args[i]!.substring(2);
+    // Check if it's a flag (no value)
+    if (i + 1 >= args.length || (args[i + 1] && args[i + 1]!.startsWith("--"))) {
+      flags[arg] = true;
+    } else if (args[i + 1]) {
+      argMap[arg] = args[i + 1]!;
+      i++;
+    }
+  }
 }
 
 // Check for dry run flag
@@ -60,105 +60,105 @@ const isDryRun = flags["dry-run"] || false;
 
 // Main function
 async function main() {
-	console.log("🚀 Rebranding Script");
-	console.log("====================");
-	console.log("This script will update your site configuration with new branding information.");
-	if (isDryRun) {
-		console.log("\n⚠️ DRY RUN MODE: No files will be modified");
-	}
-	console.log("");
-
-	// Get essential branding information
-	const projectName = argMap.name || (await prompt("Project Name", "Shipkit"));
-	const projectSlug =
-		argMap.slug || (await prompt("Project Slug", projectName.toLowerCase().replace(/\s+/g, "-")));
-	const domain = argMap.domain || (await prompt("Domain", `${projectSlug}.com`));
-
-	// Get creator information (optional)
-	const creatorName = argMap["creator-name"] || (await prompt("Your Name (optional)", ""));
-
-	// Derive other values from the essential information
-	const githubOrg = `${projectSlug}-org`;
-	const githubRepo = projectSlug;
-	const creatorUsername = creatorName ? creatorName.toLowerCase().replace(/\s+/g, "") : projectSlug;
-	const creatorEmail = `hello@${domain}`;
-	const creatorDomain = creatorName ? `${creatorUsername}.com` : domain;
-	const creatorTwitter = creatorUsername;
-	const databaseName = projectSlug;
-	const vercelProjectName = `${projectSlug}-app`;
-
-	// Product names - consolidated tiers: Bones (free) and Brains (paid)
-	const bonesName = "Bones";
-	const brainsName = "Brains";
-
-	// Update site-config.ts
-	console.log("\nUpdating site configuration...");
-
-	const siteConfigPath = path.join(process.cwd(), "src", "config", "site-config.ts");
-	let siteConfig = fs.readFileSync(siteConfigPath, "utf8");
-
-	// We need to identify the export declaration and handle the branding info correctly
-	// Find where the actual siteConfig object starts
-	const siteConfigStartPattern = /export const siteConfig: SiteConfig = \{/;
-	const siteConfigMatch = siteConfigStartPattern.exec(siteConfig);
-
-	if (!siteConfigMatch) {
-		console.error("Could not find siteConfig export in site-config.ts");
-		process.exit(1);
-	}
-
-	const siteConfigStart = siteConfigMatch.index;
-	const beforeConfig = siteConfig.substring(0, siteConfigStart + siteConfigMatch[0].length);
-	let afterConfig = siteConfig.substring(siteConfigStart + siteConfigMatch[0].length);
-
-	// Handle replacement of individual keys in the object
-	// Name
-	afterConfig = afterConfig.replace(/\n\s*name: "([^"]+)"/, `\n\tname: "${projectName}"`);
-
-	// URL
-	afterConfig = afterConfig.replace(/\n\s*url: "([^"]+)"/, `\n\turl: "https://${domain}"`);
-
-	// OG Image
-	afterConfig = afterConfig.replace(
-		/\n\s*ogImage: "([^"]+)"/,
-		`\n\togImage: "https://${domain}/og"`
-	);
-
-	// Description - keep original but update if needed
-
-	// Branding section
-	const brandingPattern = /\n\s*branding: \{[\s\S]*?\n\s*\},/;
-	const newBranding = `
+  console.log("🚀 Rebranding Script");
+  console.log("====================");
+  console.log("This script will update your site configuration with new branding information.");
+  if (isDryRun) {
+    console.log("\n⚠️ DRY RUN MODE: No files will be modified");
+  }
+  console.log("");
+
+  // Get essential branding information
+  const projectName = argMap.name || (await prompt("Project Name", "Shipkit"));
+  const projectSlug =
+    argMap.slug || (await prompt("Project Slug", projectName.toLowerCase().replace(/\s+/g, "-")));
+  const domain = argMap.domain || (await prompt("Domain", `${projectSlug}.com`));
+
+  // Get creator information (optional)
+  const creatorName = argMap["creator-name"] || (await prompt("Your Name (optional)", ""));
+
+  // Derive other values from the essential information
+  const githubOrg = `${projectSlug}-org`;
+  const githubRepo = projectSlug;
+  const creatorUsername = creatorName ? creatorName.toLowerCase().replace(/\s+/g, "") : projectSlug;
+  const creatorEmail = `hello@${domain}`;
+  const creatorDomain = creatorName ? `${creatorUsername}.com` : domain;
+  const creatorTwitter = creatorUsername;
+  const databaseName = projectSlug;
+  const vercelProjectName = `${projectSlug}-app`;
+
+  // Product names - consolidated tiers: Bones (free) and Brains (paid)
+  const bonesName = "Bones";
+  const brainsName = "Brains";
+
+  // Update site-config.ts
+  console.log("\nUpdating site configuration...");
+
+  const siteConfigPath = path.join(process.cwd(), "src", "config", "site-config.ts");
+  let siteConfig = fs.readFileSync(siteConfigPath, "utf8");
+
+  // We need to identify the export declaration and handle the branding info correctly
+  // Find where the actual siteConfig object starts
+  const siteConfigStartPattern = /export const siteConfig: SiteConfig = \{/;
+  const siteConfigMatch = siteConfigStartPattern.exec(siteConfig);
+
+  if (!siteConfigMatch) {
+    console.error("Could not find siteConfig export in site-config.ts");
+    process.exit(1);
+  }
+
+  const siteConfigStart = siteConfigMatch.index;
+  const beforeConfig = siteConfig.substring(0, siteConfigStart + siteConfigMatch[0].length);
+  let afterConfig = siteConfig.substring(siteConfigStart + siteConfigMatch[0].length);
+
+  // Handle replacement of individual keys in the object
+  // Name
+  afterConfig = afterConfig.replace(/\n\s*name: "([^"]+)"/, `\n\tname: "${projectName}"`);
+
+  // URL
+  afterConfig = afterConfig.replace(/\n\s*url: "([^"]+)"/, `\n\turl: "https://${domain}"`);
+
+  // OG Image
+  afterConfig = afterConfig.replace(
+    /\n\s*ogImage: "([^"]+)"/,
+    `\n\togImage: "https://${domain}/og"`
+  );
+
+  // Description - keep original but update if needed
+
+  // Branding section
+  const brandingPattern = /\n\s*branding: \{[\s\S]*?\n\s*\},/;
+  const newBranding = `
 	branding: {\n\t\tprojectName: "${projectName}",\n\t\tprojectSlug: "${projectSlug}",\n\t\tproductNames: {\n\t\t\tbones: "${bonesName}",\n\t\t\tbrains: "${brainsName}",\n\t\t\tmain: "${projectName}",\n\t\t},\n\t\tdomain: "${domain}",\n\t\tprotocol: "web+${projectSlug}",\n\t\tgithubOrg: "${githubOrg}",\n\t\tgithubRepo: "${githubRepo}",\n\t\tvercelProjectName: "${vercelProjectName}",\n\t\tdatabaseName: "${databaseName}",\n	},`;
 
-	afterConfig = afterConfig.replace(brandingPattern, newBranding);
+  afterConfig = afterConfig.replace(brandingPattern, newBranding);
 
-	// Repository section
-	const repoPattern = /\n\s*repo: \{[\s\S]*?\n\s*\},/;
-	const newRepo = `
+  // Repository section
+  const repoPattern = /\n\s*repo: \{[\s\S]*?\n\s*\},/;
+  const newRepo = `
 	repo: {\n\t\towner: "${githubOrg}",\n\t\tname: "${githubRepo}",\n\t\turl: "https://github.com/${githubOrg}/${githubRepo}",\n\t\tformat: {\n\t\t\tclone: () => acktickhttps://github.com/${githubOrg}/${githubRepo}.gitacktick,\n\t\t\tssh: () => acktickgit@github.com:${githubOrg}/${githubRepo}.gitacktick,\n\t\t\t\n\t\t}
 	},`;
 
-	afterConfig = afterConfig.replace(repoPattern, newRepo);
+  afterConfig = afterConfig.replace(repoPattern, newRepo);
 
-	// Email section
-	const emailPattern = /\n\s*email: \{[\s\S]*?\n\s*\},/;
-	const newEmail = `
+  // Email section
+  const emailPattern = /\n\s*email: \{[\s\S]*?\n\s*\},/;
+  const newEmail = `
 	email: {\n\t\tsupport: "support@${domain}",\n\t\tteam: "team@${domain}",\n\t\tnoreply: "noreply@${domain}",\n\t\tdomain: "${domain}",\n\t\tlegal: "legal@${domain}",\n\t\tprivacy: "privacy@${domain}",\n\t\tformat: (type) => siteConfig.email[type],
 	},`;
 
-	afterConfig = afterConfig.replace(emailPattern, newEmail);
+  afterConfig = afterConfig.replace(emailPattern, newEmail);
 
-	// Creator section
-	const creatorPattern = /\n\s*creator: \{[\s\S]*?\n\s*\},/;
-	const newCreator = `
+  // Creator section
+  const creatorPattern = /\n\s*creator: \{[\s\S]*?\n\s*\},/;
+  const newCreator = `
 	creator: {\n\t\tname: "${creatorUsername}",\n\t\temail: "${creatorEmail}",\n\t\turl: "https://${creatorDomain}",\n\t\ttwitter: "@${creatorTwitter}",\n\t\ttwitter_handle: "${creatorTwitter}",\n\t\tdomain: "${creatorDomain}",\n\t\tfullName: "${creatorName || `${projectName} Team`}",\n\t\trole: "Developer",\n\t\tavatar: "https://avatars.githubusercontent.com/u/1311301?v=4",\n\t\tlocation: "San Francisco, CA",\n\t\tbio: "Creator and developer.",\n	},`;
 
-	afterConfig = afterConfig.replace(creatorPattern, newCreator);
+  afterConfig = afterConfig.replace(creatorPattern, newCreator);
 
-	// Metadata keywords
-	const keywordsPattern = /\n\s*keywords: \[\s*["\s\S]*?\n\s*\]/;
-	const newKeywords = `
+  // Metadata keywords
+  const keywordsPattern = /\n\s*keywords: \[\s*["\s\S]*?\n\s*\]/;
+  const newKeywords = `
 		keywords: [
 			"Next.js",
 			"React",
@@ -169,82 +169,82 @@ async function main() {
 			"UI Components",
 		],`;
 
-	afterConfig = afterConfig.replace(keywordsPattern, newKeywords);
-
-	// Put the file back together
-	siteConfig = beforeConfig + afterConfig;
-
-	// Read .env.example and package.json
-	const envExamplePath = path.join(process.cwd(), ".env.example");
-	let envExample = fs.readFileSync(envExamplePath, "utf8");
-
-	envExample = envExample.replace(
-		/DATABASE_URL="postgresql:\/\/postgres:password@localhost:5432\/([^"]+)"/,
-		`DATABASE_URL="postgresql://postgres:password@localhost:5432/${databaseName}"`
-	);
-
-	const packageJsonPath = path.join(process.cwd(), "package.json");
-	let packageJson = fs.readFileSync(packageJsonPath, "utf8");
-
-	packageJson = packageJson.replace(/"name":\s*"([^"]+)"/, `"name": "${projectSlug}"`);
-
-	// If dry run, just show what would be changed
-	if (isDryRun) {
-		console.log("\n📝 Changes that would be made:");
-		console.log("\n1. src/config/site-config.ts:");
-		console.log(`  - Project name: Shipkit -> ${projectName}`);
-		console.log(`  - Domain: shipkit.io -> ${domain}`);
-		console.log(`  - GitHub: lacymorrow/shipkit -> ${githubOrg}/${githubRepo}`);
-		console.log(`  - Creator: Lacy Morrow -> ${creatorName || `${projectName} Team`}`);
-
-		console.log("\n2. .env.example:");
-		console.log(`  - Database name: shipkit -> ${databaseName}`);
-
-		console.log("\n3. package.json:");
-		console.log(`  - Package name: ship-kit -> ${projectSlug}`);
-
-		console.log("\n⚠️ No files were modified (dry run)");
-	} else {
-		// Write updated files
-		fs.writeFileSync(siteConfigPath, siteConfig);
-		console.log("✅ Updated src/config/site-config.ts");
-
-		fs.writeFileSync(envExamplePath, envExample);
-		console.log("✅ Updated .env.example");
-
-		fs.writeFileSync(packageJsonPath, packageJson);
-		console.log("✅ Updated package.json");
-
-		// Run formatter
-		console.log("\nFormatting files...");
-		try {
-			execSync('bunx eslint --fix src/config/site-config.ts || echo "Formatting skipped"', {
-				stdio: "inherit",
-			});
-		} catch (error) {
-			console.error("Error formatting files:", error);
-		}
-	}
-
-	console.log("\n✅ Rebranding complete!");
-	console.log(
-		`Your project has been ${isDryRun ? "prepared to be" : ""} rebranded to "${projectName}".`
-	);
-
-	if (!isDryRun) {
-		console.log("\nNext steps:");
-		console.log("1. Review the changes in src/config/site-config.ts");
-		console.log("2. Update your .env file with the new database name");
-		console.log("3. Restart your development server");
-	} else {
-		console.log("\nTo apply these changes, run the script without the --dry-run flag.");
-	}
-
-	rl.close();
+  afterConfig = afterConfig.replace(keywordsPattern, newKeywords);
+
+  // Put the file back together
+  siteConfig = beforeConfig + afterConfig;
+
+  // Read .env.example and package.json
+  const envExamplePath = path.join(process.cwd(), ".env.example");
+  let envExample = fs.readFileSync(envExamplePath, "utf8");
+
+  envExample = envExample.replace(
+    /DATABASE_URL="postgresql:\/\/postgres:password@localhost:5432\/([^"]+)"/,
+    `DATABASE_URL="postgresql://postgres:password@localhost:5432/${databaseName}"`
+  );
+
+  const packageJsonPath = path.join(process.cwd(), "package.json");
+  let packageJson = fs.readFileSync(packageJsonPath, "utf8");
+
+  packageJson = packageJson.replace(/"name":\s*"([^"]+)"/, `"name": "${projectSlug}"`);
+
+  // If dry run, just show what would be changed
+  if (isDryRun) {
+    console.log("\n📝 Changes that would be made:");
+    console.log("\n1. src/config/site-config.ts:");
+    console.log(`  - Project name: Shipkit -> ${projectName}`);
+    console.log(`  - Domain: shipkit.io -> ${domain}`);
+    console.log(`  - GitHub: lacymorrow/shipkit -> ${githubOrg}/${githubRepo}`);
+    console.log(`  - Creator: Lacy Morrow -> ${creatorName || `${projectName} Team`}`);
+
+    console.log("\n2. .env.example:");
+    console.log(`  - Database name: shipkit -> ${databaseName}`);
+
+    console.log("\n3. package.json:");
+    console.log(`  - Package name: ship-kit -> ${projectSlug}`);
+
+    console.log("\n⚠️ No files were modified (dry run)");
+  } else {
+    // Write updated files
+    fs.writeFileSync(siteConfigPath, siteConfig);
+    console.log("✅ Updated src/config/site-config.ts");
+
+    fs.writeFileSync(envExamplePath, envExample);
+    console.log("✅ Updated .env.example");
+
+    fs.writeFileSync(packageJsonPath, packageJson);
+    console.log("✅ Updated package.json");
+
+    // Run formatter
+    console.log("\nFormatting files...");
+    try {
+      execSync('bunx eslint --fix src/config/site-config.ts || echo "Formatting skipped"', {
+        stdio: "inherit",
+      });
+    } catch (error) {
+      console.error("Error formatting files:", error);
+    }
+  }
+
+  console.log("\n✅ Rebranding complete!");
+  console.log(
+    `Your project has been ${isDryRun ? "prepared to be" : ""} rebranded to "${projectName}".`
+  );
+
+  if (!isDryRun) {
+    console.log("\nNext steps:");
+    console.log("1. Review the changes in src/config/site-config.ts");
+    console.log("2. Update your .env file with the new database name");
+    console.log("3. Restart your development server");
+  } else {
+    console.log("\nTo apply these changes, run the script without the --dry-run flag.");
+  }
+
+  rl.close();
 }
 
 main().catch((error) => {
-	console.error("Error:", error);
-	rl.close();
-	process.exit(1);
+  console.error("Error:", error);
+  rl.close();
+  process.exit(1);
 });
diff --git a/scripts/setup-upstream.ts b/scripts/setup-upstream.ts
index 4a8bbb0a..1724b09c 100644
--- a/scripts/setup-upstream.ts
+++ b/scripts/setup-upstream.ts
@@ -18,100 +18,99 @@ const UPSTREAM_REMOTE = "upstream";
 // lacymorrow/shipkit) get their upstream remote set by create-shipkit-app, or set
 // UPSTREAM_REPO_URL to override.
 const UPSTREAM_REPOS: string[] = process.env.UPSTREAM_REPO_URL
-	? [process.env.UPSTREAM_REPO_URL]
-	: ["https://github.com/shipkit-io/bones.git"];
+  ? [process.env.UPSTREAM_REPO_URL]
+  : ["https://github.com/shipkit-io/bones.git"];
 
 /**
  * Run a command silently and return success status
  */
 function runSilent(command: string): boolean {
-	try {
-		execSync(command, { stdio: "ignore" });
-		return true;
-	} catch {
-		return false;
-	}
+  try {
+    execSync(command, { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 /**
  * Run a command and return output
  */
 function runCommand(command: string): string {
-	try {
-		return execSync(command, { encoding: "utf-8" }).trim();
-	} catch {
-		return "";
-	}
+  try {
+    return execSync(command, { encoding: "utf-8" }).trim();
+  } catch {
+    return "";
+  }
 }
 
 /**
  * Check if we're in a git repository
  */
 function isGitRepo(): boolean {
-	return runSilent("git rev-parse --git-dir");
+  return runSilent("git rev-parse --git-dir");
 }
 
 /**
  * Check if the upstream remote already exists
  */
 function hasUpstreamRemote(): boolean {
-	return runSilent(`git remote get-url ${UPSTREAM_REMOTE}`);
+  return runSilent(`git remote get-url ${UPSTREAM_REMOTE}`);
 }
 
 /**
  * Check if a remote repository is accessible
  */
 function canAccessRepo(url: string): boolean {
-	return runSilent(`git ls-remote ${url}`);
+  return runSilent(`git ls-remote ${url}`);
 }
 
 /**
  * Get the first accessible upstream URL
  */
 function getAccessibleUpstreamUrl(): string | null {
-	for (const url of UPSTREAM_REPOS) {
-		if (canAccessRepo(url)) {
-			return url;
-		}
-	}
-	return null;
+  for (const url of UPSTREAM_REPOS) {
+    if (canAccessRepo(url)) {
+      return url;
+    }
+  }
+  return null;
 }
 
 /**
  * Main setup function
  */
 function setup(): void {
-	// Skip if not in a git repository
-	if (!isGitRepo()) {
-		return;
-	}
-
-	// Skip if upstream already exists
-	if (hasUpstreamRemote()) {
-		const existingUrl = runCommand(`git remote get-url ${UPSTREAM_REMOTE}`);
-		// Only log if running interactively (not during npm install)
-		if (process.stdout.isTTY) {
-			console.info(`✓ Upstream remote already configured: ${existingUrl}`);
-		}
-		return;
-	}
-
-	// Find accessible upstream
-	const upstreamUrl = getAccessibleUpstreamUrl();
-
-	if (!upstreamUrl) {
-		// Silently skip if no upstream is accessible
-		// (user might not have network access during install)
-		return;
-	}
-
-	// Add the upstream remote
-	if (runSilent(`git remote add ${UPSTREAM_REMOTE} ${upstreamUrl}`)) {
-		console.info(`✓ Added upstream remote: ${upstreamUrl}`);
-		console.info("  Run 'bun run upstream:pull' to sync changes from upstream");
-	}
+  // Skip if not in a git repository
+  if (!isGitRepo()) {
+    return;
+  }
+
+  // Skip if upstream already exists
+  if (hasUpstreamRemote()) {
+    const existingUrl = runCommand(`git remote get-url ${UPSTREAM_REMOTE}`);
+    // Only log if running interactively (not during npm install)
+    if (process.stdout.isTTY) {
+      console.info(`✓ Upstream remote already configured: ${existingUrl}`);
+    }
+    return;
+  }
+
+  // Find accessible upstream
+  const upstreamUrl = getAccessibleUpstreamUrl();
+
+  if (!upstreamUrl) {
+    // Silently skip if no upstream is accessible
+    // (user might not have network access during install)
+    return;
+  }
+
+  // Add the upstream remote
+  if (runSilent(`git remote add ${UPSTREAM_REMOTE} ${upstreamUrl}`)) {
+    console.info(`✓ Added upstream remote: ${upstreamUrl}`);
+    console.info("  Run 'bun run upstream:pull' to sync changes from upstream");
+  }
 }
 
 // Run setup
 setup();
-
diff --git a/scripts/smoke-test.ts b/scripts/smoke-test.ts
index 468c3eba..310f1398 100644
--- a/scripts/smoke-test.ts
+++ b/scripts/smoke-test.ts
@@ -22,8 +22,8 @@ import http from "node:http";
 
 // Allow opt-out for environments where smoke testing isn't desired
 if (process.env.SKIP_SMOKE_TEST === "true") {
-	console.log("⏭️  Smoke test skipped (SKIP_SMOKE_TEST=true)");
-	process.exit(0);
+  console.log("⏭️  Smoke test skipped (SKIP_SMOKE_TEST=true)");
+  process.exit(0);
 }
 
 const PORT = Number(process.env.SMOKE_TEST_PORT) || 3847;
@@ -33,91 +33,91 @@ const DEFAULT_ROUTES = ["/"];
 const routes = process.argv.slice(2).length > 0 ? process.argv.slice(2) : DEFAULT_ROUTES;
 
 function waitForServer(port: number, timeoutMs: number): Promise<void> {
-	const start = Date.now();
-	return new Promise((resolve, reject) => {
-		const check = () => {
-			const req = http.get(`http://localhost:${port}/`, (res) => {
-				res.resume();
-				resolve();
-			});
-			req.on("error", () => {
-				if (Date.now() - start > timeoutMs) {
-					reject(new Error(`Server did not start within ${timeoutMs}ms`));
-				} else {
-					setTimeout(check, 300);
-				}
-			});
-			req.end();
-		};
-		check();
-	});
+  const start = Date.now();
+  return new Promise((resolve, reject) => {
+    const check = () => {
+      const req = http.get(`http://localhost:${port}/`, (res) => {
+        res.resume();
+        resolve();
+      });
+      req.on("error", () => {
+        if (Date.now() - start > timeoutMs) {
+          reject(new Error(`Server did not start within ${timeoutMs}ms`));
+        } else {
+          setTimeout(check, 300);
+        }
+      });
+      req.end();
+    };
+    check();
+  });
 }
 
 function checkRoute(port: number, route: string): Promise<{ route: string; status: number }> {
-	return new Promise((resolve, reject) => {
-		const req = http.get(`http://localhost:${port}${route}`, (res) => {
-			res.resume();
-			resolve({ route, status: res.statusCode ?? 0 });
-		});
-		req.on("error", (err) => reject(err));
-		req.setTimeout(10_000, () => {
-			req.destroy();
-			reject(new Error(`Request to ${route} timed out`));
-		});
-		req.end();
-	});
+  return new Promise((resolve, reject) => {
+    const req = http.get(`http://localhost:${port}${route}`, (res) => {
+      res.resume();
+      resolve({ route, status: res.statusCode ?? 0 });
+    });
+    req.on("error", (err) => reject(err));
+    req.setTimeout(10_000, () => {
+      req.destroy();
+      reject(new Error(`Request to ${route} timed out`));
+    });
+    req.end();
+  });
 }
 
 async function main() {
-	console.log(`\n🔥 Smoke test: starting server on port ${PORT}...`);
-
-	const server: ChildProcess = spawn("npx", ["next", "start", "-p", String(PORT)], {
-		stdio: "pipe",
-		env: { ...process.env, NODE_ENV: "production" },
-	});
-
-	// Forward server stderr for debugging
-	server.stderr?.on("data", (data: Buffer) => {
-		const msg = data.toString().trim();
-		if (msg) console.error(`  [server] ${msg}`);
-	});
-
-	const cleanup = () => {
-		server.kill("SIGTERM");
-		// Force kill after 3s if it doesn't exit
-		setTimeout(() => server.kill("SIGKILL"), 3000);
-	};
-
-	try {
-		await waitForServer(PORT, TIMEOUT_MS);
-		console.log(`✅ Server is up on port ${PORT}`);
-
-		const results = await Promise.all(routes.map((r) => checkRoute(PORT, r)));
-		let failed = false;
-
-		for (const { route, status } of results) {
-			if (status >= 500) {
-				console.error(`❌ ${route} → ${status}`);
-				failed = true;
-			} else {
-				console.log(`✅ ${route} → ${status}`);
-			}
-		}
-
-		cleanup();
-
-		if (failed) {
-			console.error("\n💥 Smoke test FAILED — server returned 5xx on one or more routes.\n");
-			process.exit(1);
-		}
-
-		console.log("\n🎉 Smoke test passed.\n");
-		process.exit(0);
-	} catch (err) {
-		cleanup();
-		console.error(`\n💥 Smoke test error: ${err}`);
-		process.exit(1);
-	}
+  console.log(`\n🔥 Smoke test: starting server on port ${PORT}...`);
+
+  const server: ChildProcess = spawn("npx", ["next", "start", "-p", String(PORT)], {
+    stdio: "pipe",
+    env: { ...process.env, NODE_ENV: "production" },
+  });
+
+  // Forward server stderr for debugging
+  server.stderr?.on("data", (data: Buffer) => {
+    const msg = data.toString().trim();
+    if (msg) console.error(`  [server] ${msg}`);
+  });
+
+  const cleanup = () => {
+    server.kill("SIGTERM");
+    // Force kill after 3s if it doesn't exit
+    setTimeout(() => server.kill("SIGKILL"), 3000);
+  };
+
+  try {
+    await waitForServer(PORT, TIMEOUT_MS);
+    console.log(`✅ Server is up on port ${PORT}`);
+
+    const results = await Promise.all(routes.map((r) => checkRoute(PORT, r)));
+    let failed = false;
+
+    for (const { route, status } of results) {
+      if (status >= 500) {
+        console.error(`❌ ${route} → ${status}`);
+        failed = true;
+      } else {
+        console.log(`✅ ${route} → ${status}`);
+      }
+    }
+
+    cleanup();
+
+    if (failed) {
+      console.error("\n💥 Smoke test FAILED — server returned 5xx on one or more routes.\n");
+      process.exit(1);
+    }
+
+    console.log("\n🎉 Smoke test passed.\n");
+    process.exit(0);
+  } catch (err) {
+    cleanup();
+    console.error(`\n💥 Smoke test error: ${err}`);
+    process.exit(1);
+  }
 }
 
 main();
diff --git a/scripts/utils/git.ts b/scripts/utils/git.ts
index d3076cb1..2cea8847 100644
--- a/scripts/utils/git.ts
+++ b/scripts/utils/git.ts
@@ -5,28 +5,28 @@ import { format } from "date-fns";
  * Escape a string for shell command usage
  */
 function escapeShellArg(arg: string): string {
-	// Wrap the entire argument in single quotes and escape any existing single quotes
-	return `'${arg.replace(/'/g, "'\\''")}'`;
+  // Wrap the entire argument in single quotes and escape any existing single quotes
+  return `'${arg.replace(/'/g, "'\\''")}'`;
 }
 
 /**
  * Git command execution utilities
  */
 export function runCommand(command: string): string {
-	try {
-		// If this is a git add command, escape the file path
-		const finalCommand = command.startsWith("git add ")
-			? `git add ${escapeShellArg(command.slice("git add ".length))}`
-			: command;
+  try {
+    // If this is a git add command, escape the file path
+    const finalCommand = command.startsWith("git add ")
+      ? `git add ${escapeShellArg(command.slice("git add ".length))}`
+      : command;
 
-		return execSync(finalCommand, { encoding: "utf8", stdio: "pipe" });
-	} catch (error) {
-		console.error(`Error executing command: ${command}`);
-		if (error instanceof Error) {
-			console.error((error as { stderr?: string }).stderr || error.message);
-		}
-		throw error;
-	}
+    return execSync(finalCommand, { encoding: "utf8", stdio: "pipe" });
+  } catch (error) {
+    console.error(`Error executing command: ${command}`);
+    if (error instanceof Error) {
+      console.error((error as { stderr?: string }).stderr || error.message);
+    }
+    throw error;
+  }
 }
 
 /**
@@ -35,8 +35,8 @@ export function runCommand(command: string): string {
  * @returns Formatted branch name with timestamp
  */
 export function generateBranchName(prefix: string): string {
-	const timestamp = format(new Date(), "yyyyMMdd-HHmmss");
-	return `${prefix}-${timestamp}`;
+  const timestamp = format(new Date(), "yyyyMMdd-HHmmss");
+  return `${prefix}-${timestamp}`;
 }
 
 /**
@@ -45,15 +45,15 @@ export function generateBranchName(prefix: string): string {
  * @param remote - Remote name (default: 'origin')
  */
 export function deleteBranch(branchName: string, remote = "origin"): void {
-	try {
-		// Delete local branch if it exists
-		runCommand(`git branch -D ${branchName} 2>/dev/null || true`);
-		// Delete remote branch if it exists
-		runCommand(`git push ${remote} --delete ${branchName} 2>/dev/null || true`);
-	} catch (_error) {
-		// Ignore errors since the branch might not exist
-		console.info(`No existing branch '${branchName}' to clean up`);
-	}
+  try {
+    // Delete local branch if it exists
+    runCommand(`git branch -D ${branchName} 2>/dev/null || true`);
+    // Delete remote branch if it exists
+    runCommand(`git push ${remote} --delete ${branchName} 2>/dev/null || true`);
+  } catch (_error) {
+    // Ignore errors since the branch might not exist
+    console.info(`No existing branch '${branchName}' to clean up`);
+  }
 }
 
 /**
@@ -61,74 +61,74 @@ export function deleteBranch(branchName: string, remote = "origin"): void {
  * @param options - Pull request options
  */
 export function createPullRequest(options: {
-	title: string;
-	body: string;
-	base: string;
-	head: string;
-	labels?: string[];
+  title: string;
+  body: string;
+  base: string;
+  head: string;
+  labels?: string[];
 }): void {
-	try {
-		// Check if gh CLI is installed
-		let hasGhCli = false;
-		try {
-			runCommand("gh --version");
-			hasGhCli = true;
-		} catch (_error) {
-			// Let this error fall through to the manual instructions
-			hasGhCli = false;
-		}
+  try {
+    // Check if gh CLI is installed
+    let hasGhCli = false;
+    try {
+      runCommand("gh --version");
+      hasGhCli = true;
+    } catch (_error) {
+      // Let this error fall through to the manual instructions
+      hasGhCli = false;
+    }
 
-		// If GitHub CLI is not installed, show manual instructions
-		if (!hasGhCli) {
-			console.info("\n==================================");
-			console.info("✨  PULL REQUEST CREATION INSTRUCTIONS");
-			console.info("==================================");
-			console.info("\nGitHub CLI not found. You have two options:");
-			console.info("\n1. Install GitHub CLI (recommended):");
-			console.info("   brew install gh    # macOS");
-			console.info("   winget install GitHub.cli    # Windows");
-			console.info("   Then run: gh auth login");
-			console.info("\n2. Create PR manually:");
-			console.info("   Open this URL in your browser:");
-			console.info(`   ${getRepoUrl()}/compare/${options.base}...${options.head}`);
-			console.info("\n   Then fill in these details:");
-			console.info(`   • Title: ${options.title}`);
-			console.info(`   • Description: ${options.body}`);
-			if (options.labels?.length) {
-				console.info(`   • Labels: ${options.labels.join(", ")}`);
-			}
-			console.info("\n==================================\n");
-			return;
-		}
+    // If GitHub CLI is not installed, show manual instructions
+    if (!hasGhCli) {
+      console.info("\n==================================");
+      console.info("✨  PULL REQUEST CREATION INSTRUCTIONS");
+      console.info("==================================");
+      console.info("\nGitHub CLI not found. You have two options:");
+      console.info("\n1. Install GitHub CLI (recommended):");
+      console.info("   brew install gh    # macOS");
+      console.info("   winget install GitHub.cli    # Windows");
+      console.info("   Then run: gh auth login");
+      console.info("\n2. Create PR manually:");
+      console.info("   Open this URL in your browser:");
+      console.info(`   ${getRepoUrl()}/compare/${options.base}...${options.head}`);
+      console.info("\n   Then fill in these details:");
+      console.info(`   • Title: ${options.title}`);
+      console.info(`   • Description: ${options.body}`);
+      if (options.labels?.length) {
+        console.info(`   • Labels: ${options.labels.join(", ")}`);
+      }
+      console.info("\n==================================\n");
+      return;
+    }
 
-		// GitHub CLI is installed - create PR
-		const labelArgs = options.labels?.length
-			? options.labels.map((label) => `--label "${label}"`).join(" ")
-			: "";
+    // GitHub CLI is installed - create PR
+    const labelArgs = options.labels?.length
+      ? options.labels.map((label) => `--label "${label}"`).join(" ")
+      : "";
 
-		runCommand(
-			`gh pr create --title "${options.title}" --body "${options.body}" ` +
-				`--base ${options.base} --head ${options.head} ${labelArgs}`
-		);
-		console.info("✨ Pull request created successfully");
-	} catch (error) {
-		if (error instanceof Error) {
-			console.debug("Error details:", error.message);
-		}
-		console.warn("\n==================================");
-		console.warn("❌  PULL REQUEST CREATION FAILED");
-		console.warn("==================================");
-		console.warn("\nPlease create the PR manually:");
-		console.warn("\n1. Open this URL in your browser:");
-		console.warn(`   ${getRepoUrl()}/compare/${options.base}...${options.head}`);
-		console.warn("\n2. Fill in these details:");
-		console.warn(`   • Title: ${options.title}`);
-		console.warn(`   • Description: ${options.body}`);
-		if (options.labels?.length) {
-			console.warn(`   • Labels: ${options.labels.join(", ")}`);
-		}
-		console.warn("\n==================================\n");
-	}
+    runCommand(
+      `gh pr create --title "${options.title}" --body "${options.body}" ` +
+        `--base ${options.base} --head ${options.head} ${labelArgs}`
+    );
+    console.info("✨ Pull request created successfully");
+  } catch (error) {
+    if (error instanceof Error) {
+      console.debug("Error details:", error.message);
+    }
+    console.warn("\n==================================");
+    console.warn("❌  PULL REQUEST CREATION FAILED");
+    console.warn("==================================");
+    console.warn("\nPlease create the PR manually:");
+    console.warn("\n1. Open this URL in your browser:");
+    console.warn(`   ${getRepoUrl()}/compare/${options.base}...${options.head}`);
+    console.warn("\n2. Fill in these details:");
+    console.warn(`   • Title: ${options.title}`);
+    console.warn(`   • Description: ${options.body}`);
+    if (options.labels?.length) {
+      console.warn(`   • Labels: ${options.labels.join(", ")}`);
+    }
+    console.warn("\n==================================\n");
+  }
 }
 
 /**
@@ -136,21 +136,21 @@ export function createPullRequest(options: {
  * @returns Repository URL or empty string if not found
  */
 function getRepoUrl(): string {
-	try {
-		// Get the remote URL
-		const remoteUrl = runCommand("git remote get-url origin").trim();
+  try {
+    // Get the remote URL
+    const remoteUrl = runCommand("git remote get-url origin").trim();
 
-		// Convert SSH URL to HTTPS URL if necessary
-		if (remoteUrl.startsWith("git@github.com:")) {
-			return `https://github.com/${remoteUrl.slice(15).replace(".git", "")}`;
-		}
+    // Convert SSH URL to HTTPS URL if necessary
+    if (remoteUrl.startsWith("git@github.com:")) {
+      return `https://github.com/${remoteUrl.slice(15).replace(".git", "")}`;
+    }
 
-		// Clean up HTTPS URL if necessary
-		return remoteUrl.replace(".git", "").replace(/\n/g, "");
-	} catch (error) {
-		console.error("Failed to get repository URL:", error);
-		return "";
-	}
+    // Clean up HTTPS URL if necessary
+    return remoteUrl.replace(".git", "").replace(/\n/g, "");
+  } catch (error) {
+    console.error("Failed to get repository URL:", error);
+    return "";
+  }
 }
 
 /**
@@ -159,12 +159,12 @@ function getRepoUrl(): string {
  * @throws Error if not on expected branch
  */
 export function verifyCurrentBranch(expectedBranch: string): void {
-	const currentBranch = runCommand("git rev-parse --abbrev-ref HEAD").trim();
-	if (currentBranch !== expectedBranch) {
-		throw new Error(
-			`Not on ${expectedBranch} branch. Please switch to ${expectedBranch} before running this script.`
-		);
-	}
+  const currentBranch = runCommand("git rev-parse --abbrev-ref HEAD").trim();
+  if (currentBranch !== expectedBranch) {
+    throw new Error(
+      `Not on ${expectedBranch} branch. Please switch to ${expectedBranch} before running this script.`
+    );
+  }
 }
 
 /**
@@ -173,12 +173,12 @@ export function verifyCurrentBranch(expectedBranch: string): void {
  * @throws Error if remote doesn't exist
  */
 export function verifyRemote(remote: string): void {
-	try {
-		runCommand(`git remote get-url ${remote}`);
-	} catch (_error) {
-		throw new Error(
-			`Remote '${remote}' not found. Please add it using:\n` +
-				`git remote add ${remote} <remote_url>`
-		);
-	}
+  try {
+    runCommand(`git remote get-url ${remote}`);
+  } catch (_error) {
+    throw new Error(
+      `Remote '${remote}' not found. Please add it using:\n` +
+        `git remote add ${remote} <remote_url>`
+    );
+  }
 }
diff --git a/src/app/(app)/(authentication)/_components/authentication-card.tsx b/src/app/(app)/(authentication)/_components/authentication-card.tsx
index 4e17a45e..7eea353c 100644
--- a/src/app/(app)/(authentication)/_components/authentication-card.tsx
+++ b/src/app/(app)/(authentication)/_components/authentication-card.tsx
@@ -2,15 +2,15 @@ import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 export function AuthenticationCard({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: React.ReactNode;
-	className?: string;
+  children: React.ReactNode;
+  className?: string;
 }) {
-	return (
-		<Card className={cn("mx-auto min-w-[400px] max-w-[400px] overflow-hidden", className)}>
-			{children}
-		</Card>
-	);
+  return (
+    <Card className={cn("mx-auto min-w-[400px] max-w-[400px] overflow-hidden", className)}>
+      {children}
+    </Card>
+  );
 }
diff --git a/src/app/(app)/(authentication)/_components/login-form.tsx b/src/app/(app)/(authentication)/_components/login-form.tsx
index 936bc2ec..14f5a8a6 100644
--- a/src/app/(app)/(authentication)/_components/login-form.tsx
+++ b/src/app/(app)/(authentication)/_components/login-form.tsx
@@ -9,65 +9,69 @@ import { authProvidersArray } from "@/server/auth.providers";
 import Link from "next/link";
 
 interface AuthFormProps extends ComponentPropsWithoutRef<"div"> {
-	mode: "sign-in" | "sign-up";
-	children: ReactNode;
-	title?: string;
-	description?: string;
+  mode: "sign-in" | "sign-up";
+  children: ReactNode;
+  title?: string;
+  description?: string;
 }
 
 export function AuthForm({
-	mode = "sign-in",
-	className,
-	children,
-	title,
-	description,
-	...props
+  mode = "sign-in",
+  className,
+  children,
+  title,
+  description,
+  ...props
 }: AuthFormProps) {
-	const isSignIn = mode === "sign-in";
-	const cardTitle = typeof title === "string" ? title : (isSignIn ? "Welcome to Shipkit" : "Create an account");
-	const cardDescription = typeof description === "string" ? description : isSignIn
-		? "Login to get started"
-		: "Sign up to get started";
-	const alternateLink = isSignIn
-		? { text: "Don't have an account?", href: routes.auth.signUp, label: "Sign up" }
-		: { text: "Already have an account?", href: routes.auth.signIn, label: "Sign in" };
+  const isSignIn = mode === "sign-in";
+  const cardTitle =
+    typeof title === "string" ? title : isSignIn ? "Welcome to Shipkit" : "Create an account";
+  const cardDescription =
+    typeof description === "string"
+      ? description
+      : isSignIn
+        ? "Login to get started"
+        : "Sign up to get started";
+  const alternateLink = isSignIn
+    ? { text: "Don't have an account?", href: routes.auth.signUp, label: "Sign up" }
+    : { text: "Already have an account?", href: routes.auth.signIn, label: "Sign in" };
 
-	return (
-		<div className={cn("flex flex-col gap-6", className)} {...props}>
-			<Card>
-				<CardHeader className="text-center">
-					<CardTitle className="text-xl">{cardTitle}</CardTitle>
-					<CardDescription>{cardDescription}</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<div className="grid gap-6">
-						<Suspense fallback={<SuspenseFallback />}>
-							<OAuthButtons />
-						</Suspense>
-						{/* Only show email sign-in if credentials provider is enabled */}
-						{authProvidersArray.includes("credentials") && (
-							<>
-								<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
-									<span className="relative z-10 bg-background px-2 text-muted-foreground">
-										Or continue with email
-									</span>
-								</div>
-								{children}
-							</>
-						)}
-						<div className="text-center text-sm">
-							{alternateLink.text}{" "}
-							<Link href={alternateLink.href} className="underline underline-offset-4">
-								{alternateLink.label}
-							</Link>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-			<div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
-				By clicking continue, you agree to our <Link href={routes.terms}>Terms of Service</Link> and{" "}
-				<Link href={routes.privacy}>Privacy Policy</Link>.
-			</div>
-		</div>
-	);
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="text-xl">{cardTitle}</CardTitle>
+          <CardDescription>{cardDescription}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-6">
+            <Suspense fallback={<SuspenseFallback />}>
+              <OAuthButtons />
+            </Suspense>
+            {/* Only show email sign-in if credentials provider is enabled */}
+            {authProvidersArray.includes("credentials") && (
+              <>
+                <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
+                  <span className="relative z-10 bg-background px-2 text-muted-foreground">
+                    Or continue with email
+                  </span>
+                </div>
+                {children}
+              </>
+            )}
+            <div className="text-center text-sm">
+              {alternateLink.text}{" "}
+              <Link href={alternateLink.href} className="underline underline-offset-4">
+                {alternateLink.label}
+              </Link>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
+        By clicking continue, you agree to our <Link href={routes.terms}>Terms of Service</Link> and{" "}
+        <Link href={routes.privacy}>Privacy Policy</Link>.
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/(app)/(authentication)/_components/oauth-buttons.tsx b/src/app/(app)/(authentication)/_components/oauth-buttons.tsx
index 2b993100..7255b47a 100644
--- a/src/app/(app)/(authentication)/_components/oauth-buttons.tsx
+++ b/src/app/(app)/(authentication)/_components/oauth-buttons.tsx
@@ -12,79 +12,76 @@ import { cva } from "class-variance-authority";
 import { useSearchParams } from "next/navigation";
 
 const oauthButtonVariants = cva("flex items-center justify-center gap-sm", {
-	variants: {
-		variant: {
-			default: "w-full",
-			icons: "w-auto p-2",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
+  variants: {
+    variant: {
+      default: "w-full",
+      icons: "w-auto p-2",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
 });
 
 interface OAuthButtonsProps {
-	variant?: "default" | "icons";
-	className?: string;
+  variant?: "default" | "icons";
+  className?: string;
 }
 
 interface Provider {
-	id: string;
-	name: string;
+  id: string;
+  name: string;
 }
 
 export function OAuthButtons({ variant = "default", className }: OAuthButtonsProps) {
-	// Redirect back to the page that the user was on before signing in
-	const searchParams = useSearchParams();
-	const nextUrl = searchParams?.get(SEARCH_PARAM_KEYS.nextUrl);
-	const options = nextUrl ? { redirectTo: nextUrl } : {};
+  // Redirect back to the page that the user was on before signing in
+  const searchParams = useSearchParams();
+  const nextUrl = searchParams?.get(SEARCH_PARAM_KEYS.nextUrl);
+  const options = nextUrl ? { redirectTo: nextUrl } : {};
 
-	const handleSignIn = async (providerId: string) => {
-		await signInWithOAuthAction({ providerId, options });
-	};
+  const handleSignIn = async (providerId: string) => {
+    await signInWithOAuthAction({ providerId, options });
+  };
 
-	return (
-		<div
-			className={cn(
-				"flex gap-xs w-full",
-				variant === "icons" ? "flex-row justify-center" : "flex-col",
-				className
-			)}
-		>
-			{authProviders.map((provider: Provider) => {
-				const { name, id } = provider;
+  return (
+    <div
+      className={cn(
+        "flex w-full gap-xs",
+        variant === "icons" ? "flex-row justify-center" : "flex-col",
+        className
+      )}
+    >
+      {authProviders.map((provider: Provider) => {
+        const { name, id } = provider;
 
-				if (!name || String(name).toLowerCase() === "credentials" || id === "resend") {
-					return null;
-				}
+        if (!name || String(name).toLowerCase() === "credentials" || id === "resend") {
+          return null;
+        }
 
-				const button = (
-					<Button variant={"outline"} type="submit" className={oauthButtonVariants({ variant })}>
-						{variant === "default" && <span>Sign in with {name}</span>}
-						{id === "github" && <GitHubLogoIcon className="h-4 w-4" />}
-						{id === "discord" && <DiscordLogoIcon className="h-4 w-4" />}
-						{id === "google" && <Icons.google className="h-4 w-4" />}
-					</Button>
-				);
+        const button = (
+          <Button variant={"outline"} type="submit" className={oauthButtonVariants({ variant })}>
+            {variant === "default" && <span>Sign in with {name}</span>}
+            {id === "github" && <GitHubLogoIcon className="h-4 w-4" />}
+            {id === "discord" && <DiscordLogoIcon className="h-4 w-4" />}
+            {id === "google" && <Icons.google className="h-4 w-4" />}
+          </Button>
+        );
 
-				return (
-					<form
-						key={id}
-						action={() => handleSignIn(id)}
-					>
-						{variant === "icons" ? (
-							<Tooltip>
-								<TooltipTrigger asChild>{button}</TooltipTrigger>
-								<TooltipContent>
-									<p>Sign in with {name}</p>
-								</TooltipContent>
-							</Tooltip>
-						) : (
-							button
-						)}
-					</form>
-				);
-			})}
-		</div>
-	);
+        return (
+          <form key={id} action={() => handleSignIn(id)}>
+            {variant === "icons" ? (
+              <Tooltip>
+                <TooltipTrigger asChild>{button}</TooltipTrigger>
+                <TooltipContent>
+                  <p>Sign in with {name}</p>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              button
+            )}
+          </form>
+        );
+      })}
+    </div>
+  );
 }
diff --git a/src/app/(app)/(authentication)/error/_components/auth-error-content.tsx b/src/app/(app)/(authentication)/error/_components/auth-error-content.tsx
index c0acc349..e3b686b8 100644
--- a/src/app/(app)/(authentication)/error/_components/auth-error-content.tsx
+++ b/src/app/(app)/(authentication)/error/_components/auth-error-content.tsx
@@ -6,39 +6,39 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
 enum Error {
-	Configuration = "Configuration",
+  Configuration = "Configuration",
 }
 
 const errorMap = {
-	[Error.Configuration]: (
-		<p>
-			There was a problem when trying to authenticate. Please contact us if this error persists.
-			Unique error code: <code className="rounded-sm bg-slate-100 p-1 text-xs">Configuration</code>
-		</p>
-	),
+  [Error.Configuration]: (
+    <p>
+      There was a problem when trying to authenticate. Please contact us if this error persists.
+      Unique error code: <code className="rounded-sm bg-slate-100 p-1 text-xs">Configuration</code>
+    </p>
+  ),
 };
 
 export function AuthErrorContent() {
-	const searchParams = useSearchParams();
-	const error = searchParams.get("error") as Error;
+  const searchParams = useSearchParams();
+  const error = searchParams.get("error") as Error;
 
-	return (
-		<div className="flex w-full flex-col items-center justify-center gap-8">
-			<a
-				href={routes.home}
-				className="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 text-center shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
-			>
-				<h5 className="mb-2 flex flex-row items-center justify-center gap-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-					Something went wrong
-				</h5>
-				<div className="font-normal text-gray-700 dark:text-gray-400">
-					{errorMap[error] || "Please contact us if this error persists."}
-				</div>
-			</a>
+  return (
+    <div className="flex w-full flex-col items-center justify-center gap-8">
+      <a
+        href={routes.home}
+        className="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 text-center shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+      >
+        <h5 className="mb-2 flex flex-row items-center justify-center gap-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Something went wrong
+        </h5>
+        <div className="font-normal text-gray-700 dark:text-gray-400">
+          {errorMap[error] || "Please contact us if this error persists."}
+        </div>
+      </a>
 
-			<Link href={routes.home} className={buttonVariants({ size: "lg" })}>
-				Take me home
-			</Link>
-		</div>
-	);
+      <Link href={routes.home} className={buttonVariants({ size: "lg" })}>
+        Take me home
+      </Link>
+    </div>
+  );
 }
diff --git a/src/app/(app)/(authentication)/error/page.tsx b/src/app/(app)/(authentication)/error/page.tsx
index a3215a5b..09b536f3 100644
--- a/src/app/(app)/(authentication)/error/page.tsx
+++ b/src/app/(app)/(authentication)/error/page.tsx
@@ -8,9 +8,9 @@ import { AuthErrorContent } from "./_components/auth-error-content";
  * site-wide); this page owns its own now.
  */
 export default function AuthErrorPage() {
-	return (
-		<Suspense fallback={null}>
-			<AuthErrorContent />
-		</Suspense>
-	);
+  return (
+    <Suspense fallback={null}>
+      <AuthErrorContent />
+    </Suspense>
+  );
 }
diff --git a/src/app/(app)/(authentication)/forgot-password/_components/forgot-password-form.tsx b/src/app/(app)/(authentication)/forgot-password/_components/forgot-password-form.tsx
index ffc25f0b..c511facf 100644
--- a/src/app/(app)/(authentication)/forgot-password/_components/forgot-password-form.tsx
+++ b/src/app/(app)/(authentication)/forgot-password/_components/forgot-password-form.tsx
@@ -6,12 +6,12 @@ import type { z } from "zod";
 
 import { Button } from "@/components/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { forgotPasswordSchema } from "@/lib/schemas/auth";
@@ -20,45 +20,45 @@ import { forgotPasswordAction } from "@/server/actions/auth";
 import { toast } from "sonner";
 
 export function ForgotPasswordForm() {
-	const form = useForm<z.infer<typeof forgotPasswordSchema>>({
-		resolver: zodResolver(forgotPasswordSchema),
-		defaultValues: getSchemaDefaults(forgotPasswordSchema),
-	});
+  const form = useForm<z.infer<typeof forgotPasswordSchema>>({
+    resolver: zodResolver(forgotPasswordSchema),
+    defaultValues: getSchemaDefaults(forgotPasswordSchema),
+  });
 
-	async function onSubmit(values: z.infer<typeof forgotPasswordSchema>) {
-		await forgotPasswordAction(values)
-			.then(() => {
-				toast.success("Email sent", {
-					description: "Please check your email for a link to reset your password.",
-				});
-			})
-			.catch(() => {
-				toast.error("Error sending password reset email", {
-					description: "Please try again.",
-				});
-			});
-	}
+  async function onSubmit(values: z.infer<typeof forgotPasswordSchema>) {
+    await forgotPasswordAction(values)
+      .then(() => {
+        toast.success("Email sent", {
+          description: "Please check your email for a link to reset your password.",
+        });
+      })
+      .catch(() => {
+        toast.error("Error sending password reset email", {
+          description: "Please try again.",
+        });
+      });
+  }
 
-	return (
-		<Form {...form}>
-			<form onSubmit={() => void form.handleSubmit(onSubmit)} className="flex flex-col gap-sm">
-				<FormField
-					control={form.control}
-					name="email"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Email</FormLabel>
-							<FormControl>
-								<Input placeholder="m@example.com" {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<Button className="self-end" type="submit">
-					Submit
-				</Button>
-			</form>
-		</Form>
-	);
+  return (
+    <Form {...form}>
+      <form onSubmit={() => void form.handleSubmit(onSubmit)} className="flex flex-col gap-sm">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="m@example.com" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button className="self-end" type="submit">
+          Submit
+        </Button>
+      </form>
+    </Form>
+  );
 }
diff --git a/src/app/(app)/(authentication)/forgot-password/page.tsx b/src/app/(app)/(authentication)/forgot-password/page.tsx
index 08e601b1..91b0e15f 100644
--- a/src/app/(app)/(authentication)/forgot-password/page.tsx
+++ b/src/app/(app)/(authentication)/forgot-password/page.tsx
@@ -3,15 +3,15 @@ import { CardContent, CardDescription, CardHeader, CardTitle } from "@/component
 import { AuthenticationCard } from "../_components/authentication-card";
 
 export default function ForgotPasswordPage() {
-	return (
-		<AuthenticationCard>
-			<CardHeader>
-				<CardTitle className="text-2xl">Forgot Password</CardTitle>
-				<CardDescription>Enter your email below to reset your password</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<ForgotPasswordForm />
-			</CardContent>
-		</AuthenticationCard>
-	);
+  return (
+    <AuthenticationCard>
+      <CardHeader>
+        <CardTitle className="text-2xl">Forgot Password</CardTitle>
+        <CardDescription>Enter your email below to reset your password</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ForgotPasswordForm />
+      </CardContent>
+    </AuthenticationCard>
+  );
 }
diff --git a/src/app/(app)/(authentication)/layout.tsx b/src/app/(app)/(authentication)/layout.tsx
index 780e7980..af7454d8 100644
--- a/src/app/(app)/(authentication)/layout.tsx
+++ b/src/app/(app)/(authentication)/layout.tsx
@@ -9,9 +9,5 @@ export const metadata: Metadata = {
 };
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="container grid place-items-center py-header">
-      {children}
-    </div>
-  );
+  return <div className="container grid place-items-center py-header">{children}</div>;
 }
diff --git a/src/app/(app)/(authentication)/sign-in/_components/sign-in-form.tsx b/src/app/(app)/(authentication)/sign-in/_components/sign-in-form.tsx
index 4539c95d..038f3da8 100644
--- a/src/app/(app)/(authentication)/sign-in/_components/sign-in-form.tsx
+++ b/src/app/(app)/(authentication)/sign-in/_components/sign-in-form.tsx
@@ -7,12 +7,12 @@ import type { z } from "zod";
 
 import { Button } from "@/components/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { routes } from "@/config/routes";
@@ -24,113 +24,113 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
 export const SignInForm = () => {
-	const searchParams = useSearchParams();
-	const nextUrl = searchParams.get(SEARCH_PARAM_KEYS.nextUrl);
-	const { toast } = useToast();
-	const form = useForm<z.infer<typeof signInSchema>>({
-		resolver: zodResolver(signInSchema),
-		defaultValues: {
-			...getSchemaDefaults(signInSchema),
-			redirectTo: routes.home,
-			redirect: true,
-			mode: "onChange",
-		},
-	});
+  const searchParams = useSearchParams();
+  const nextUrl = searchParams.get(SEARCH_PARAM_KEYS.nextUrl);
+  const { toast } = useToast();
+  const form = useForm<z.infer<typeof signInSchema>>({
+    resolver: zodResolver(signInSchema),
+    defaultValues: {
+      ...getSchemaDefaults(signInSchema),
+      redirectTo: routes.home,
+      redirect: true,
+      mode: "onChange",
+    },
+  });
 
-	async function onSubmit(values: z.infer<typeof signInSchema>) {
-		try {
-			const formData = new FormData();
-			for (const [key, value] of Object.entries(values)) {
-				if (value !== undefined && value !== null) {
-					formData.append(key, value.toString());
-				}
-			}
+  async function onSubmit(values: z.infer<typeof signInSchema>) {
+    try {
+      const formData = new FormData();
+      for (const [key, value] of Object.entries(values)) {
+        if (value !== undefined && value !== null) {
+          formData.append(key, value.toString());
+        }
+      }
 
-			// Redirect back to the page that the user was on before signing in
-			if (nextUrl) {
-				formData.append(SEARCH_PARAM_KEYS.nextUrl, nextUrl);
-			}
+      // Redirect back to the page that the user was on before signing in
+      if (nextUrl) {
+        formData.append(SEARCH_PARAM_KEYS.nextUrl, nextUrl);
+      }
 
-			await signInWithCredentialsAction(values, formData);
+      await signInWithCredentialsAction(values, formData);
 
-			toast({
-				title: "Success",
-				description: "Signed in successfully.",
-			});
-		} catch (error) {
-			if (error instanceof Error) {
-				const errorMessage = error.message.toLowerCase();
-				if (
-					errorMessage.includes("invalid credentials") ||
-					errorMessage.includes("user not found")
-				) {
-					toast({
-						title: "Error",
-						description: "Invalid email or password. Please try again.",
-						variant: "destructive",
-					});
-				} else {
-					toast({
-						title: "Error",
-						description: error.message,
-						variant: "destructive",
-					});
-				}
-			} else {
-				toast({
-					title: "Error",
-					description: "Something went wrong. Please try again.",
-					variant: "destructive",
-				});
-			}
-		}
-	}
+      toast({
+        title: "Success",
+        description: "Signed in successfully.",
+      });
+    } catch (error) {
+      if (error instanceof Error) {
+        const errorMessage = error.message.toLowerCase();
+        if (
+          errorMessage.includes("invalid credentials") ||
+          errorMessage.includes("user not found")
+        ) {
+          toast({
+            title: "Error",
+            description: "Invalid email or password. Please try again.",
+            variant: "destructive",
+          });
+        } else {
+          toast({
+            title: "Error",
+            description: error.message,
+            variant: "destructive",
+          });
+        }
+      } else {
+        toast({
+          title: "Error",
+          description: "Something went wrong. Please try again.",
+          variant: "destructive",
+        });
+      }
+    }
+  }
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
-				<FormField
-					control={form.control}
-					name="email"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Email</FormLabel>
-							<FormControl>
-								<Input placeholder="me@example.com" type="email" autoComplete="email" {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<FormField
-					control={form.control}
-					name="password"
-					render={({ field }) => (
-						<FormItem>
-							<div className="flex items-center justify-between">
-								<FormLabel>Password</FormLabel>
-								<Link
-									href={routes.auth.forgotPassword}
-									className="text-xs text-muted-foreground underline-offset-4 hover:underline"
-								>
-									Forgot password?
-								</Link>
-							</div>
-							<FormControl>
-								<Input type="password" autoComplete="current-password" {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<Button
-					type="submit"
-					className="w-full"
-					disabled={form.formState.isSubmitting || !form.formState.isValid}
-				>
-					{form.formState.isSubmitting ? "Signing in..." : "Sign in"}
-				</Button>
-			</form>
-		</Form>
-	);
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="me@example.com" type="email" autoComplete="email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <div className="flex items-center justify-between">
+                <FormLabel>Password</FormLabel>
+                <Link
+                  href={routes.auth.forgotPassword}
+                  className="text-xs text-muted-foreground underline-offset-4 hover:underline"
+                >
+                  Forgot password?
+                </Link>
+              </div>
+              <FormControl>
+                <Input type="password" autoComplete="current-password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={form.formState.isSubmitting || !form.formState.isValid}
+        >
+          {form.formState.isSubmitting ? "Signing in..." : "Sign in"}
+        </Button>
+      </form>
+    </Form>
+  );
 };
diff --git a/src/app/(app)/(authentication)/sign-in/page.tsx b/src/app/(app)/(authentication)/sign-in/page.tsx
index 651aace6..ec9768f1 100644
--- a/src/app/(app)/(authentication)/sign-in/page.tsx
+++ b/src/app/(app)/(authentication)/sign-in/page.tsx
@@ -6,17 +6,17 @@ import { AuthForm } from "../_components/login-form";
 import { SignInForm } from "./_components/sign-in-form";
 
 export default function SignInPage() {
-	return (
-		<div className="flex w-full max-w-sm flex-col gap-6">
-			<Link href={routes.home} className="flex items-center gap-2 self-center font-medium">
-				<div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-					<Logo />
-				</div>
-				{siteConfig.name}
-			</Link>
-			<AuthForm mode="sign-in">
-				<SignInForm />
-			</AuthForm>
-		</div>
-	);
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-6">
+      <Link href={routes.home} className="flex items-center gap-2 self-center font-medium">
+        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+          <Logo />
+        </div>
+        {siteConfig.name}
+      </Link>
+      <AuthForm mode="sign-in">
+        <SignInForm />
+      </AuthForm>
+    </div>
+  );
 }
diff --git a/src/app/(app)/(authentication)/sign-out/page.tsx b/src/app/(app)/(authentication)/sign-out/page.tsx
index ba8bc1b8..a539b6aa 100644
--- a/src/app/(app)/(authentication)/sign-out/page.tsx
+++ b/src/app/(app)/(authentication)/sign-out/page.tsx
@@ -3,5 +3,5 @@ import { SEARCH_PARAM_KEYS } from "@/config/search-param-keys";
 import { redirect } from "next/navigation";
 
 export default function SignOutPage() {
-	redirect(`${routes.auth.signOutIn}?${SEARCH_PARAM_KEYS.nextUrl}=${routes.home}`);
+  redirect(`${routes.auth.signOutIn}?${SEARCH_PARAM_KEYS.nextUrl}=${routes.home}`);
 }
diff --git a/src/app/(app)/(authentication)/sign-up/_components/sign-up-card.tsx b/src/app/(app)/(authentication)/sign-up/_components/sign-up-card.tsx
index 1f53b2d0..defe94a0 100644
--- a/src/app/(app)/(authentication)/sign-up/_components/sign-up-card.tsx
+++ b/src/app/(app)/(authentication)/sign-up/_components/sign-up-card.tsx
@@ -6,26 +6,26 @@ import Link from "next/link";
 import { AuthenticationCard } from "../../_components/authentication-card";
 
 export function SignUpCard() {
-	return (
-		<>
-			<AuthenticationCard>
-				<CardHeader>
-					<CardTitle className="text-xl">Sign Up</CardTitle>
-					<CardDescription>Enter your information to create an account</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<div className="grid gap-4">
-						<SignUpForm />
-						<OAuthButtons />
-					</div>
-					<div className="mt-4 text-center text-sm">
-						Already have an account?{" "}
-						<Link href={routes.auth.signIn} className="underline">
-							Sign in
-						</Link>
-					</div>
-				</CardContent>
-			</AuthenticationCard>
-		</>
-	);
+  return (
+    <>
+      <AuthenticationCard>
+        <CardHeader>
+          <CardTitle className="text-xl">Sign Up</CardTitle>
+          <CardDescription>Enter your information to create an account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4">
+            <SignUpForm />
+            <OAuthButtons />
+          </div>
+          <div className="mt-4 text-center text-sm">
+            Already have an account?{" "}
+            <Link href={routes.auth.signIn} className="underline">
+              Sign in
+            </Link>
+          </div>
+        </CardContent>
+      </AuthenticationCard>
+    </>
+  );
 }
diff --git a/src/app/(app)/(authentication)/sign-up/_components/sign-up-form.tsx b/src/app/(app)/(authentication)/sign-up/_components/sign-up-form.tsx
index ac3e7586..1e8f87fa 100644
--- a/src/app/(app)/(authentication)/sign-up/_components/sign-up-form.tsx
+++ b/src/app/(app)/(authentication)/sign-up/_components/sign-up-form.tsx
@@ -7,12 +7,12 @@ import type { z } from "zod";
 
 import { Button } from "@/components/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { routes } from "@/config/routes";
@@ -21,92 +21,92 @@ import { getSchemaDefaults } from "@/lib/utils/get-schema-defaults";
 import { signUpWithCredentialsAction } from "@/server/actions/auth";
 
 export const SignUpForm = () => {
-	const { toast } = useToast();
-	const form = useForm<z.infer<typeof signUpSchema>>({
-		resolver: zodResolver(signUpSchema),
-		defaultValues: {
-			...getSchemaDefaults(signUpSchema),
-			redirectTo: routes.home,
-			redirect: true,
-		},
-	});
+  const { toast } = useToast();
+  const form = useForm<z.infer<typeof signUpSchema>>({
+    resolver: zodResolver(signUpSchema),
+    defaultValues: {
+      ...getSchemaDefaults(signUpSchema),
+      redirectTo: routes.home,
+      redirect: true,
+    },
+  });
 
-	async function onSubmit(values: z.infer<typeof signUpSchema>) {
-		try {
-			const formData = new FormData();
-			for (const [key, value] of Object.entries(values)) {
-				if (value !== undefined && value !== null) {
-					formData.append(key, value.toString());
-				}
-			}
+  async function onSubmit(values: z.infer<typeof signUpSchema>) {
+    try {
+      const formData = new FormData();
+      for (const [key, value] of Object.entries(values)) {
+        if (value !== undefined && value !== null) {
+          formData.append(key, value.toString());
+        }
+      }
 
-			await signUpWithCredentialsAction(values, formData);
+      await signUpWithCredentialsAction(values, formData);
 
-			toast({
-				title: "Success",
-				description: "Account created successfully.",
-			});
-		} catch (error) {
-			if (error instanceof Error) {
-				if (error.message.includes("User already exists")) {
-					form.setError("email", {
-						type: "manual",
-						message: "An account with this email already exists.",
-					});
-				} else {
-					toast({
-						title: "Error",
-						description: error.message,
-						variant: "destructive",
-					});
-				}
-			} else {
-				toast({
-					title: "Error",
-					description: "Something went wrong. Please try again.",
-					variant: "destructive",
-				});
-			}
-		}
-	}
+      toast({
+        title: "Success",
+        description: "Account created successfully.",
+      });
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message.includes("User already exists")) {
+          form.setError("email", {
+            type: "manual",
+            message: "An account with this email already exists.",
+          });
+        } else {
+          toast({
+            title: "Error",
+            description: error.message,
+            variant: "destructive",
+          });
+        }
+      } else {
+        toast({
+          title: "Error",
+          description: "Something went wrong. Please try again.",
+          variant: "destructive",
+        });
+      }
+    }
+  }
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
-				<FormField
-					control={form.control}
-					name="email"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Email</FormLabel>
-							<FormControl>
-								<Input placeholder="me@example.com" type="email" autoComplete="email" {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<FormField
-					control={form.control}
-					name="password"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Password</FormLabel>
-							<FormControl>
-								<Input type="password" autoComplete="new-password" {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<Button
-					type="submit"
-					className="w-full"
-					disabled={form.formState.isSubmitting || !form.formState.isValid}
-				>
-					{form.formState.isSubmitting ? "Creating account..." : "Create account"}
-				</Button>
-			</form>
-		</Form>
-	);
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="me@example.com" type="email" autoComplete="email" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type="password" autoComplete="new-password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={form.formState.isSubmitting || !form.formState.isValid}
+        >
+          {form.formState.isSubmitting ? "Creating account..." : "Create account"}
+        </Button>
+      </form>
+    </Form>
+  );
 };
diff --git a/src/app/(app)/(authentication)/sign-up/_components/sign-up.tsx b/src/app/(app)/(authentication)/sign-up/_components/sign-up.tsx
index 170f4625..ae956ac1 100644
--- a/src/app/(app)/(authentication)/sign-up/_components/sign-up.tsx
+++ b/src/app/(app)/(authentication)/sign-up/_components/sign-up.tsx
@@ -6,99 +6,99 @@ import { IconBrandGithub, IconBrandGoogle, IconBrandOnlyfans } from "@tabler/ico
 import type React from "react";
 
 export function SignupFormDemo() {
-	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-	};
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+  };
 
-	return (
-		<div className="mx-auto w-full max-w-md rounded-none bg-white p-4 shadow-input dark:bg-black md:rounded-2xl md:p-8">
-			<h2 className="text-xl font-bold text-neutral-800 dark:text-neutral-200">
-				Welcome to Aceternity
-			</h2>
-			<p className="mt-2 max-w-sm text-sm text-neutral-600 dark:text-neutral-300">
-				Login to aceternity if you can because we don&apos;t have a login flow yet
-			</p>
+  return (
+    <div className="mx-auto w-full max-w-md rounded-none bg-white p-4 shadow-input dark:bg-black md:rounded-2xl md:p-8">
+      <h2 className="text-xl font-bold text-neutral-800 dark:text-neutral-200">
+        Welcome to Aceternity
+      </h2>
+      <p className="mt-2 max-w-sm text-sm text-neutral-600 dark:text-neutral-300">
+        Login to aceternity if you can because we don&apos;t have a login flow yet
+      </p>
 
-			<form className="my-8" onSubmit={handleSubmit}>
-				<div className="mb-4 flex flex-col space-y-2 md:flex-row md:space-x-2 md:space-y-0">
-					<LabelInputContainer>
-						<Label htmlFor="firstname">First name</Label>
-						<Input id="firstname" placeholder="Tyler" type="text" />
-					</LabelInputContainer>
-					<LabelInputContainer>
-						<Label htmlFor="lastname">Last name</Label>
-						<Input id="lastname" placeholder="Durden" type="text" />
-					</LabelInputContainer>
-				</div>
-				<LabelInputContainer className="mb-4">
-					<Label htmlFor="email">Email Address</Label>
-					<Input id="email" placeholder="projectmayhem@fc.com" type="email" />
-				</LabelInputContainer>
-				<LabelInputContainer className="mb-4">
-					<Label htmlFor="password">Password</Label>
-					<Input id="password" placeholder="••••••••" type="password" />
-				</LabelInputContainer>
-				<LabelInputContainer className="mb-8">
-					<Label htmlFor="twitterpassword">Your twitter password</Label>
-					<Input id="twitterpassword" placeholder="••••••••" type="twitterpassword" />
-				</LabelInputContainer>
+      <form className="my-8" onSubmit={handleSubmit}>
+        <div className="mb-4 flex flex-col space-y-2 md:flex-row md:space-x-2 md:space-y-0">
+          <LabelInputContainer>
+            <Label htmlFor="firstname">First name</Label>
+            <Input id="firstname" placeholder="Tyler" type="text" />
+          </LabelInputContainer>
+          <LabelInputContainer>
+            <Label htmlFor="lastname">Last name</Label>
+            <Input id="lastname" placeholder="Durden" type="text" />
+          </LabelInputContainer>
+        </div>
+        <LabelInputContainer className="mb-4">
+          <Label htmlFor="email">Email Address</Label>
+          <Input id="email" placeholder="projectmayhem@fc.com" type="email" />
+        </LabelInputContainer>
+        <LabelInputContainer className="mb-4">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" placeholder="••••••••" type="password" />
+        </LabelInputContainer>
+        <LabelInputContainer className="mb-8">
+          <Label htmlFor="twitterpassword">Your twitter password</Label>
+          <Input id="twitterpassword" placeholder="••••••••" type="twitterpassword" />
+        </LabelInputContainer>
 
-				<button
-					className="group/btn relative block h-10 w-full rounded-md bg-gradient-to-br from-black to-neutral-600 font-medium text-white shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:bg-zinc-800 dark:from-zinc-900 dark:to-zinc-900 dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]"
-					type="submit"
-				>
-					Sign up &rarr;
-					<BottomGradient />
-				</button>
+        <button
+          className="group/btn relative block h-10 w-full rounded-md bg-gradient-to-br from-black to-neutral-600 font-medium text-white shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:bg-zinc-800 dark:from-zinc-900 dark:to-zinc-900 dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]"
+          type="submit"
+        >
+          Sign up &rarr;
+          <BottomGradient />
+        </button>
 
-				<div className="my-8 h-[1px] w-full bg-gradient-to-r from-transparent via-neutral-300 to-transparent dark:via-neutral-700" />
+        <div className="my-8 h-[1px] w-full bg-gradient-to-r from-transparent via-neutral-300 to-transparent dark:via-neutral-700" />
 
-				<div className="flex flex-col space-y-4">
-					<button
-						className="group/btn relative flex h-10 w-full items-center justify-start space-x-2 rounded-md bg-gray-50 px-4 font-medium text-black shadow-input dark:bg-zinc-900 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
-						type="submit"
-					>
-						<IconBrandGithub className="h-4 w-4 text-neutral-800 dark:text-neutral-300" />
-						<span className="text-sm text-neutral-700 dark:text-neutral-300">GitHub</span>
-						<BottomGradient />
-					</button>
-					<button
-						className="group/btn relative flex h-10 w-full items-center justify-start space-x-2 rounded-md bg-gray-50 px-4 font-medium text-black shadow-input dark:bg-zinc-900 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
-						type="submit"
-					>
-						<IconBrandGoogle className="h-4 w-4 text-neutral-800 dark:text-neutral-300" />
-						<span className="text-sm text-neutral-700 dark:text-neutral-300">Google</span>
-						<BottomGradient />
-					</button>
-					<button
-						className="group/btn relative flex h-10 w-full items-center justify-start space-x-2 rounded-md bg-gray-50 px-4 font-medium text-black shadow-input dark:bg-zinc-900 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
-						type="submit"
-					>
-						<IconBrandOnlyfans className="h-4 w-4 text-neutral-800 dark:text-neutral-300" />
-						<span className="text-sm text-neutral-700 dark:text-neutral-300">OnlyFans</span>
-						<BottomGradient />
-					</button>
-				</div>
-			</form>
-		</div>
-	);
+        <div className="flex flex-col space-y-4">
+          <button
+            className="group/btn relative flex h-10 w-full items-center justify-start space-x-2 rounded-md bg-gray-50 px-4 font-medium text-black shadow-input dark:bg-zinc-900 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
+            type="submit"
+          >
+            <IconBrandGithub className="h-4 w-4 text-neutral-800 dark:text-neutral-300" />
+            <span className="text-sm text-neutral-700 dark:text-neutral-300">GitHub</span>
+            <BottomGradient />
+          </button>
+          <button
+            className="group/btn relative flex h-10 w-full items-center justify-start space-x-2 rounded-md bg-gray-50 px-4 font-medium text-black shadow-input dark:bg-zinc-900 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
+            type="submit"
+          >
+            <IconBrandGoogle className="h-4 w-4 text-neutral-800 dark:text-neutral-300" />
+            <span className="text-sm text-neutral-700 dark:text-neutral-300">Google</span>
+            <BottomGradient />
+          </button>
+          <button
+            className="group/btn relative flex h-10 w-full items-center justify-start space-x-2 rounded-md bg-gray-50 px-4 font-medium text-black shadow-input dark:bg-zinc-900 dark:shadow-[0px_0px_1px_1px_var(--neutral-800)]"
+            type="submit"
+          >
+            <IconBrandOnlyfans className="h-4 w-4 text-neutral-800 dark:text-neutral-300" />
+            <span className="text-sm text-neutral-700 dark:text-neutral-300">OnlyFans</span>
+            <BottomGradient />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 }
 
 const BottomGradient = () => {
-	return (
-		<>
-			<span className="absolute inset-x-0 -bottom-px block h-px w-full bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-0 transition duration-500 group-hover/btn:opacity-100" />
-			<span className="absolute inset-x-10 -bottom-px mx-auto block h-px w-1/2 bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-0 blur-sm transition duration-500 group-hover/btn:opacity-100" />
-		</>
-	);
+  return (
+    <>
+      <span className="absolute inset-x-0 -bottom-px block h-px w-full bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-0 transition duration-500 group-hover/btn:opacity-100" />
+      <span className="absolute inset-x-10 -bottom-px mx-auto block h-px w-1/2 bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-0 blur-sm transition duration-500 group-hover/btn:opacity-100" />
+    </>
+  );
 };
 
 const LabelInputContainer = ({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: React.ReactNode;
-	className?: string;
+  children: React.ReactNode;
+  className?: string;
 }) => {
-	return <div className={cn("flex w-full flex-col space-y-2", className)}>{children}</div>;
+  return <div className={cn("flex w-full flex-col space-y-2", className)}>{children}</div>;
 };
diff --git a/src/app/(app)/(authentication)/sign-up/page.tsx b/src/app/(app)/(authentication)/sign-up/page.tsx
index 5481031b..61e15ac2 100644
--- a/src/app/(app)/(authentication)/sign-up/page.tsx
+++ b/src/app/(app)/(authentication)/sign-up/page.tsx
@@ -6,17 +6,17 @@ import { AuthForm } from "../_components/login-form";
 import { SignUpForm } from "./_components/sign-up-form";
 
 export default function SignUpPage() {
-	return (
-		<div className="flex w-full max-w-sm flex-col gap-6">
-			<Link href={routes.home} className="flex items-center gap-2 self-center font-medium">
-				<div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-					<Logo />
-				</div>
-				{siteConfig.name}
-			</Link>
-			<AuthForm mode="sign-up">
-				<SignUpForm />
-			</AuthForm>
-		</div>
-	);
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-6">
+      <Link href={routes.home} className="flex items-center gap-2 self-center font-medium">
+        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+          <Logo />
+        </div>
+        {siteConfig.name}
+      </Link>
+      <AuthForm mode="sign-up">
+        <SignUpForm />
+      </AuthForm>
+    </div>
+  );
 }
diff --git a/src/app/(app)/(demo)/layout.tsx b/src/app/(app)/(demo)/layout.tsx
index ac285cf9..f174362f 100644
--- a/src/app/(app)/(demo)/layout.tsx
+++ b/src/app/(app)/(demo)/layout.tsx
@@ -2,9 +2,9 @@ import type { Metadata } from "next";
 import type React from "react";
 
 export const metadata: Metadata = {
-	robots: { index: false, follow: false },
+  robots: { index: false, follow: false },
 };
 
 export default function DemoLayout({ children }: { children: React.ReactNode }) {
-	return <>{children}</>;
+  return <>{children}</>;
 }
diff --git a/src/app/(app)/(demo)/trpc/_components/post.tsx b/src/app/(app)/(demo)/trpc/_components/post.tsx
index 1832a3fb..21bcdfcd 100644
--- a/src/app/(app)/(demo)/trpc/_components/post.tsx
+++ b/src/app/(app)/(demo)/trpc/_components/post.tsx
@@ -5,46 +5,46 @@ import { useState } from "react";
 import { api } from "@/lib/trpc/react";
 
 export function LatestPost() {
-	const [latestPost] = api.post.getLatest.useSuspenseQuery();
+  const [latestPost] = api.post.getLatest.useSuspenseQuery();
 
-	const utils = api.useUtils();
-	const [name, setName] = useState("");
-	const createPost = api.post.create.useMutation({
-		onSuccess: async () => {
-			await utils.post.invalidate();
-			setName("");
-		},
-	});
+  const utils = api.useUtils();
+  const [name, setName] = useState("");
+  const createPost = api.post.create.useMutation({
+    onSuccess: async () => {
+      await utils.post.invalidate();
+      setName("");
+    },
+  });
 
-	return (
-		<div className="w-full max-w-xs">
-			{latestPost ? (
-				<p className="truncate">Your most recent post: {latestPost.name}</p>
-			) : (
-				<p>You have no posts yet.</p>
-			)}
-			<form
-				onSubmit={(e) => {
-					e.preventDefault();
-					createPost.mutate({ name });
-				}}
-				className="flex flex-col gap-2"
-			>
-				<input
-					type="text"
-					placeholder="Title"
-					value={name}
-					onChange={(e) => setName(e.target.value)}
-					className="w-full rounded-full px-4 py-2"
-				/>
-				<button
-					type="submit"
-					className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
-					disabled={createPost.isPending}
-				>
-					{createPost.isPending ? "Submitting..." : "Submit"}
-				</button>
-			</form>
-		</div>
-	);
+  return (
+    <div className="w-full max-w-xs">
+      {latestPost ? (
+        <p className="truncate">Your most recent post: {latestPost.name}</p>
+      ) : (
+        <p>You have no posts yet.</p>
+      )}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          createPost.mutate({ name });
+        }}
+        className="flex flex-col gap-2"
+      >
+        <input
+          type="text"
+          placeholder="Title"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full rounded-full px-4 py-2"
+        />
+        <button
+          type="submit"
+          className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
+          disabled={createPost.isPending}
+        >
+          {createPost.isPending ? "Submitting..." : "Submit"}
+        </button>
+      </form>
+    </div>
+  );
 }
diff --git a/src/app/(app)/(demo)/trpc/api/[trpc]/route.ts b/src/app/(app)/(demo)/trpc/api/[trpc]/route.ts
index 204af50a..5f533f74 100644
--- a/src/app/(app)/(demo)/trpc/api/[trpc]/route.ts
+++ b/src/app/(app)/(demo)/trpc/api/[trpc]/route.ts
@@ -10,23 +10,23 @@ import { createTRPCContext } from "@/lib/trpc/api/trpc";
  * handling a HTTP request (e.g. when you make requests from Client Components).
  */
 const createContext = async (req: NextRequest) => {
-	return createTRPCContext({
-		headers: req.headers,
-	});
+  return createTRPCContext({
+    headers: req.headers,
+  });
 };
 
 const handler = (req: NextRequest) =>
-	fetchRequestHandler({
-		endpoint: "/api/trpc",
-		req,
-		router: appRouter,
-		createContext: () => createContext(req),
-		onError:
-			env.NODE_ENV === "development"
-				? ({ path, error }) => {
-						console.error(`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`);
-					}
-				: undefined,
-	});
+  fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req,
+    router: appRouter,
+    createContext: () => createContext(req),
+    onError:
+      env.NODE_ENV === "development"
+        ? ({ path, error }) => {
+            console.error(`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`);
+          }
+        : undefined,
+  });
 
 export { handler as GET, handler as POST };
diff --git a/src/app/(app)/(demo)/trpc/page.tsx b/src/app/(app)/(demo)/trpc/page.tsx
index 1344d42f..47b94e48 100644
--- a/src/app/(app)/(demo)/trpc/page.tsx
+++ b/src/app/(app)/(demo)/trpc/page.tsx
@@ -7,70 +7,70 @@ import { auth } from "@/server/auth";
 import { LatestPost } from "./_components/post";
 
 export default async function Home() {
-	const hello = await api.post.hello({ text: "from tRPC" });
-	const session = await auth();
+  const hello = await api.post.hello({ text: "from tRPC" });
+  const session = await auth();
 
-	void api.post.getLatest.prefetch();
+  void api.post.getLatest.prefetch();
 
-	const SignInOutButton = () => {
-		const urlPath = session ? routes.auth.signOut : routes.auth.signIn;
-		const nextUrl = routes.demo.trpc;
-		const url = `${urlPath}?${SEARCH_PARAM_KEYS.nextUrl}=${nextUrl}`;
-		return (
-			<Link
-				className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
-				href={url}
-			>
-				{session ? "Sign out" : "Sign in"}
-			</Link>
-		);
-	};
+  const SignInOutButton = () => {
+    const urlPath = session ? routes.auth.signOut : routes.auth.signIn;
+    const nextUrl = routes.demo.trpc;
+    const url = `${urlPath}?${SEARCH_PARAM_KEYS.nextUrl}=${nextUrl}`;
+    return (
+      <Link
+        className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
+        href={url}
+      >
+        {session ? "Sign out" : "Sign in"}
+      </Link>
+    );
+  };
 
-	return (
-		<HydrateClient>
-			<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-				<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-					<h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
-						Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-					</h1>
-					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-						<Link
-							className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-							href="https://create.t3.gg/en/usage/first-steps"
-							target="_blank"
-						>
-							<h3 className="text-2xl font-bold">First Steps →</h3>
-							<div className="text-lg">
-								Just the basics - Everything you need to know to set up your database and
-								authentication.
-							</div>
-						</Link>
-						<Link
-							className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-							href="https://create.t3.gg/en/introduction"
-							target="_blank"
-						>
-							<h3 className="text-2xl font-bold">Documentation →</h3>
-							<div className="text-lg">
-								Learn more about Create T3 App, the libraries it uses, and how to deploy it.
-							</div>
-						</Link>
-					</div>
-					<div className="flex flex-col items-center gap-2">
-						<p className="text-2xl text-white">
-							{hello ? hello.greeting : "Loading tRPC query..."}
-						</p>
+  return (
+    <HydrateClient>
+      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
+        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+          <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
+            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+          </h1>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+              href="https://create.t3.gg/en/usage/first-steps"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">First Steps →</h3>
+              <div className="text-lg">
+                Just the basics - Everything you need to know to set up your database and
+                authentication.
+              </div>
+            </Link>
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
+              href="https://create.t3.gg/en/introduction"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">Documentation →</h3>
+              <div className="text-lg">
+                Learn more about Create T3 App, the libraries it uses, and how to deploy it.
+              </div>
+            </Link>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-2xl text-white">
+              {hello ? hello.greeting : "Loading tRPC query..."}
+            </p>
 
-						<div className="flex flex-col items-center justify-center gap-4">
-							<p className="text-center text-2xl text-white">
-								{session && <span>Logged in as {session.user?.name}</span>}
-							</p>
-						</div>
-					</div>
-					<SignInOutButton />
-					{session?.user && <LatestPost />}
-				</div>
-			</main>
-		</HydrateClient>
-	);
+            <div className="flex flex-col items-center justify-center gap-4">
+              <p className="text-center text-2xl text-white">
+                {session && <span>Logged in as {session.user?.name}</span>}
+              </p>
+            </div>
+          </div>
+          <SignInOutButton />
+          {session?.user && <LatestPost />}
+        </div>
+      </main>
+    </HydrateClient>
+  );
 }
diff --git a/src/app/(app)/(legal)/eula/page.mdx b/src/app/(app)/(legal)/eula/page.mdx
index ca0f0f2d..06eb0c16 100644
--- a/src/app/(app)/(legal)/eula/page.mdx
+++ b/src/app/(app)/(legal)/eula/page.mdx
@@ -47,6 +47,7 @@ The Integration may be subject to usage limits based on your Shipkit subscriptio
 ### 5.2 Modification Restrictions
 
 You may not:
+
 - Modify, reverse engineer, decompile, or disassemble the Integration
 - Create derivative works based on the Integration
 - Remove any proprietary notices or labels on the Integration
diff --git a/src/app/(app)/(legal)/legal/page.mdx b/src/app/(app)/(legal)/legal/page.mdx
index 800f1de3..597528a5 100644
--- a/src/app/(app)/(legal)/legal/page.mdx
+++ b/src/app/(app)/(legal)/legal/page.mdx
@@ -16,14 +16,19 @@ All services on this website are provided by {siteConfig.creator.fullName}.
 Email: {siteConfig.email.format("support")}
 
 ## Liability and Copyright Notices
+
 ### Limitation of Liability
+
 The content of this online offering has been created meticulously and according to our current state knowledge, but is for informational purposes only and does not create any legally binding effect, unless it concerns legally required information (e.g., imprint, privacy policy, terms of service, or mandatory consumer notices). We reserve the right to modify, partially or completely delete the content, provided the contractual obligations remain unaffected. All offers are non-binding.
 
 ### Links to Third-Party Websites
+
 Contents from third-party websites that we directly or indirectly link to are beyond our area of responsibility and we do not endorse them. The provider of the linked websites is solely responsible for all content and particularly for damages resulting from the use of information accessible on these linked websites.
 
 ### Copyrights and Brand Rights
+
 All content displayed on this website, such as text, photographs, graphics, brands, and trademarks are protected by the respective protective rights (copyright, brand rights). The use, reproduction, etc., are subject to our rights or the rights of the respective copyright holders or rights administrators.
 
 ### Notices of Legal Violations
+
 If you discover any legal infringements within our web presence, please inform us. We will promptly remove any illegal content and links upon becoming aware of them.
diff --git a/src/app/(app)/about/page.tsx b/src/app/(app)/about/page.tsx
index 16ed95fa..b2bf4634 100644
--- a/src/app/(app)/about/page.tsx
+++ b/src/app/(app)/about/page.tsx
@@ -15,23 +15,22 @@ export default function AboutPage() {
 
       <section className="mb-10">
         <p className="mb-4 text-lg text-muted-foreground">
-          {siteConfig.branding.projectName} is a modern development platform
-          built for teams and individuals who want to ship production-ready apps
-          without the boilerplate. We handle the infrastructure so you can focus
-          on what makes your product unique.
+          {siteConfig.branding.projectName} is a modern development platform built for teams and
+          individuals who want to ship production-ready apps without the boilerplate. We handle the
+          infrastructure so you can focus on what makes your product unique.
         </p>
         <p className="text-muted-foreground">
-          Built with Next.js, TypeScript, and the tools developers already know
-          and love &mdash; Tailwind CSS, shadcn/ui, Drizzle ORM, and more.
+          Built with Next.js, TypeScript, and the tools developers already know and love &mdash;
+          Tailwind CSS, shadcn/ui, Drizzle ORM, and more.
         </p>
       </section>
 
       <section className="mb-10">
         <h2 className="mb-4 text-2xl font-semibold">Our Mission</h2>
         <p className="text-muted-foreground">
-          We believe shipping software should be fast, repeatable, and enjoyable.
-          Our goal is to eliminate the weeks of setup that come before you can
-          write your first line of business logic.
+          We believe shipping software should be fast, repeatable, and enjoyable. Our goal is to
+          eliminate the weeks of setup that come before you can write your first line of business
+          logic.
         </p>
       </section>
 
@@ -53,10 +52,7 @@ export default function AboutPage() {
         <h2 className="mb-4 text-2xl font-semibold">Get in Touch</h2>
         <p className="text-muted-foreground">
           Have questions or want to learn more?{" "}
-          <Link
-            href={routes.contact}
-            className="text-foreground underline underline-offset-4"
-          >
+          <Link href={routes.contact} className="text-foreground underline underline-offset-4">
             Contact us
           </Link>{" "}
           or find us on{" "}
diff --git a/src/app/(app)/api/health/contact/route.ts b/src/app/(app)/api/health/contact/route.ts
index d3baf59d..ef07f46b 100644
--- a/src/app/(app)/api/health/contact/route.ts
+++ b/src/app/(app)/api/health/contact/route.ts
@@ -24,17 +24,17 @@ export const dynamic = "force-dynamic";
 const RESEND_DOMAINS_URL = "https://api.resend.com/domains";
 
 interface HealthCheck {
-	name: string;
-	ok: boolean;
-	detail: string;
+  name: string;
+  ok: boolean;
+  detail: string;
 }
 
 const isAuthorized = (request: Request): boolean => {
-	const expected = process.env.HEALTHCHECK_TOKEN;
-	if (!expected) return true; // no token configured -> open
-	const provided =
-		request.headers.get("x-healthcheck-token") ?? new URL(request.url).searchParams.get("token");
-	return provided === expected;
+  const expected = process.env.HEALTHCHECK_TOKEN;
+  if (!expected) return true; // no token configured -> open
+  const provided =
+    request.headers.get("x-healthcheck-token") ?? new URL(request.url).searchParams.get("token");
+  return provided === expected;
 };
 
 /**
@@ -42,75 +42,75 @@ const isAuthorized = (request: Request): boolean => {
  * lightweight authenticated read (listing domains). No email is sent.
  */
 const checkResend = async (): Promise<HealthCheck> => {
-	const key = process.env.RESEND_API_KEY;
-	if (!key) {
-		return { name: "resend_api_key", ok: false, detail: "RESEND_API_KEY not set" };
-	}
+  const key = process.env.RESEND_API_KEY;
+  if (!key) {
+    return { name: "resend_api_key", ok: false, detail: "RESEND_API_KEY not set" };
+  }
 
-	try {
-		const response = await fetch(RESEND_DOMAINS_URL, {
-			headers: { Authorization: `Bearer ${key}` },
-			cache: "no-store",
-		});
-		if (!response.ok) {
-			// Sending-only keys can't list domains, but the rejection proves the
-			// key authenticated — Resend names it "restricted_api_key". That key
-			// still sends mail, so the form is healthy.
-			const body = (await response.json().catch(() => null)) as {
-				name?: string;
-				message?: string;
-			} | null;
-			if (body?.name === "restricted_api_key" || body?.message?.includes("restricted")) {
-				return { name: "resend_api_key", ok: true, detail: "valid (sending-only key)" };
-			}
-			if (response.status === 400 || response.status === 401 || response.status === 403) {
-				return {
-					name: "resend_api_key",
-					ok: false,
-					detail: `Resend rejected key (HTTP ${response.status}): ${body?.message ?? "unknown"}`,
-				};
-			}
-			return {
-				name: "resend_api_key",
-				ok: false,
-				detail: `Resend API unhealthy (HTTP ${response.status})`,
-			};
-		}
-		return { name: "resend_api_key", ok: true, detail: "valid" };
-	} catch (error) {
-		const message = error instanceof Error ? error.message : String(error);
-		return { name: "resend_api_key", ok: false, detail: `Resend request failed: ${message}` };
-	}
+  try {
+    const response = await fetch(RESEND_DOMAINS_URL, {
+      headers: { Authorization: `Bearer ${key}` },
+      cache: "no-store",
+    });
+    if (!response.ok) {
+      // Sending-only keys can't list domains, but the rejection proves the
+      // key authenticated — Resend names it "restricted_api_key". That key
+      // still sends mail, so the form is healthy.
+      const body = (await response.json().catch(() => null)) as {
+        name?: string;
+        message?: string;
+      } | null;
+      if (body?.name === "restricted_api_key" || body?.message?.includes("restricted")) {
+        return { name: "resend_api_key", ok: true, detail: "valid (sending-only key)" };
+      }
+      if (response.status === 400 || response.status === 401 || response.status === 403) {
+        return {
+          name: "resend_api_key",
+          ok: false,
+          detail: `Resend rejected key (HTTP ${response.status}): ${body?.message ?? "unknown"}`,
+        };
+      }
+      return {
+        name: "resend_api_key",
+        ok: false,
+        detail: `Resend API unhealthy (HTTP ${response.status})`,
+      };
+    }
+    return { name: "resend_api_key", ok: true, detail: "valid" };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return { name: "resend_api_key", ok: false, detail: `Resend request failed: ${message}` };
+  }
 };
 
 export async function GET(request: Request): Promise<Response> {
-	if (!isAuthorized(request)) {
-		return Response.json({ ok: false, error: "Unauthorized" }, { status: 401 });
-	}
+  if (!isAuthorized(request)) {
+    return Response.json({ ok: false, error: "Unauthorized" }, { status: 401 });
+  }
 
-	const checks: HealthCheck[] = [
-		// The server action sends to siteConfig.email.support from .noreply —
-		// both must be non-empty for delivery to work.
-		{
-			name: "support_email",
-			ok: Boolean(siteConfig.email?.support),
-			detail: siteConfig.email?.support ? "set" : "siteConfig.email.support not set",
-		},
-		{
-			name: "noreply_email",
-			ok: Boolean(siteConfig.email?.noreply),
-			detail: siteConfig.email?.noreply ? "set" : "siteConfig.email.noreply not set",
-		},
-		await checkResend(),
-	];
+  const checks: HealthCheck[] = [
+    // The server action sends to siteConfig.email.support from .noreply —
+    // both must be non-empty for delivery to work.
+    {
+      name: "support_email",
+      ok: Boolean(siteConfig.email?.support),
+      detail: siteConfig.email?.support ? "set" : "siteConfig.email.support not set",
+    },
+    {
+      name: "noreply_email",
+      ok: Boolean(siteConfig.email?.noreply),
+      detail: siteConfig.email?.noreply ? "set" : "siteConfig.email.noreply not set",
+    },
+    await checkResend(),
+  ];
 
-	const ok = checks.every((check) => check.ok);
-	return Response.json(
-		{ ok, checks },
-		{
-			status: ok ? 200 : 503,
-			// Disable caching so monitors always see live state.
-			headers: { "Cache-Control": "no-store, max-age=0" },
-		}
-	);
+  const ok = checks.every((check) => check.ok);
+  return Response.json(
+    { ok, checks },
+    {
+      status: ok ? 200 : 503,
+      // Disable caching so monitors always see live state.
+      headers: { "Cache-Control": "no-store, max-age=0" },
+    }
+  );
 }
diff --git a/src/app/(app)/bones/cli-www/_actions/install.ts b/src/app/(app)/bones/cli-www/_actions/install.ts
index 63cb868e..21b4e902 100644
--- a/src/app/(app)/bones/cli-www/_actions/install.ts
+++ b/src/app/(app)/bones/cli-www/_actions/install.ts
@@ -9,63 +9,60 @@ import { type InstallOptions } from "../_lib/types";
  */
 // eslint-disable-next-line @typescript-eslint/require-await
 export async function installComponent(
-	componentUrl: string,
-	options: InstallOptions = {},
+  componentUrl: string,
+  options: InstallOptions = {}
 ): Promise<ReadableStream<Uint8Array>> {
-	const encoder = new TextEncoder();
+  const encoder = new TextEncoder();
 
-	return new ReadableStream({
-		// eslint-disable-next-line @typescript-eslint/require-await
-		async start(controller) {
-			try {
-				const args = ["shadcn@latest", "add"];
+  return new ReadableStream({
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async start(controller) {
+      try {
+        const args = ["shadcn@latest", "add"];
 
-				// Add component name
-				args.push(componentUrl);
+        // Add component name
+        args.push(componentUrl);
 
-				// Add options
-				if (options.overwrite) args.push("--overwrite");
-				if (options.style) args.push("--style", options.style);
-				if (options.typescript) args.push("--typescript");
-				if (options.path) args.push("--path", options.path);
+        // Add options
+        if (options.overwrite) args.push("--overwrite");
+        if (options.style) args.push("--style", options.style);
+        if (options.typescript) args.push("--typescript");
+        if (options.path) args.push("--path", options.path);
 
-				const process = spawn("npx", args, {
-					stdio: ["pipe", "pipe", "pipe"],
-				});
+        const process = spawn("npx", args, {
+          stdio: ["pipe", "pipe", "pipe"],
+        });
 
-				// If not overwriting, automatically answer "n" to prompts
-				if (!options.overwrite && process.stdin) {
-					process.stdin.write("n\n");
-					process.stdin.end();
-				}
+        // If not overwriting, automatically answer "n" to prompts
+        if (!options.overwrite && process.stdin) {
+          process.stdin.write("n\n");
+          process.stdin.end();
+        }
 
-				process.stdout?.on("data", (data: Buffer) => {
-					controller.enqueue(encoder.encode(data.toString()));
-				});
+        process.stdout?.on("data", (data: Buffer) => {
+          controller.enqueue(encoder.encode(data.toString()));
+        });
 
-				process.stderr?.on("data", (data: Buffer) => {
-					controller.enqueue(encoder.encode(data.toString()));
-				});
+        process.stderr?.on("data", (data: Buffer) => {
+          controller.enqueue(encoder.encode(data.toString()));
+        });
 
-				process.on("close", (code) => {
-					if (code !== 0) {
-						controller.enqueue(
-							encoder.encode(`\nProcess exited with code ${code}`),
-						);
-					}
-					controller.close();
-				});
+        process.on("close", (code) => {
+          if (code !== 0) {
+            controller.enqueue(encoder.encode(`\nProcess exited with code ${code}`));
+          }
+          controller.close();
+        });
 
-				process.on("error", (err) => {
-					controller.enqueue(encoder.encode(`\nError: ${err.message}`));
-					controller.close();
-				});
-			} catch (error) {
-				const message =
-					error instanceof Error ? error.message : "Unknown error occurred";
-				controller.enqueue(encoder.encode(`\nError: ${message}`));
-				controller.close();
-			}
-		},
-	});
+        process.on("error", (err) => {
+          controller.enqueue(encoder.encode(`\nError: ${err.message}`));
+          controller.close();
+        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Unknown error occurred";
+        controller.enqueue(encoder.encode(`\nError: ${message}`));
+        controller.close();
+      }
+    },
+  });
 }
diff --git a/src/app/(app)/bones/cli-www/_actions/registry.ts b/src/app/(app)/bones/cli-www/_actions/registry.ts
index 3f15eba1..dd71f8ab 100644
--- a/src/app/(app)/bones/cli-www/_actions/registry.ts
+++ b/src/app/(app)/bones/cli-www/_actions/registry.ts
@@ -9,13 +9,13 @@ import { z } from "zod";
 const execAsync = promisify(exec);
 
 const ComponentsConfigSchema = z.object({
-	aliases: z.object({
-		components: z.string(),
-		ui: z.string(),
-		utils: z.string(),
-		lib: z.string(),
-		hooks: z.string(),
-	}),
+  aliases: z.object({
+    components: z.string(),
+    ui: z.string(),
+    utils: z.string(),
+    lib: z.string(),
+    hooks: z.string(),
+  }),
 });
 
 type ComponentsConfig = z.infer<typeof ComponentsConfigSchema>;
@@ -24,89 +24,89 @@ type ComponentsConfig = z.infer<typeof ComponentsConfigSchema>;
  * Get the project root directory
  */
 async function getProjectRoot(): Promise<string> {
-	try {
-		const { stdout } = await execAsync("git rev-parse --show-toplevel");
-		return stdout.trim();
-	} catch {
-		throw new Error("Not in a git repository");
-	}
+  try {
+    const { stdout } = await execAsync("git rev-parse --show-toplevel");
+    return stdout.trim();
+  } catch {
+    throw new Error("Not in a git repository");
+  }
 }
 
 /**
  * Get project dependencies from package.json
  */
 export async function getDependencies(): Promise<{
-	dependencies: Record<string, string>;
-	devDependencies: Record<string, string>;
+  dependencies: Record<string, string>;
+  devDependencies: Record<string, string>;
 }> {
-	try {
-		const projectRoot = await getProjectRoot();
-		const packageJsonPath = path.join(projectRoot, "package.json");
-		const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8")) as {
-			dependencies: Record<string, string>;
-			devDependencies: Record<string, string>;
-		};
+  try {
+    const projectRoot = await getProjectRoot();
+    const packageJsonPath = path.join(projectRoot, "package.json");
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8")) as {
+      dependencies: Record<string, string>;
+      devDependencies: Record<string, string>;
+    };
 
-		return {
-			dependencies: packageJson.dependencies || {},
-			devDependencies: packageJson.devDependencies || {},
-		};
-	} catch (error) {
-		throw new Error("Failed to read package.json");
-	}
+    return {
+      dependencies: packageJson.dependencies || {},
+      devDependencies: packageJson.devDependencies || {},
+    };
+  } catch (error) {
+    throw new Error("Failed to read package.json");
+  }
 }
 
 /**
  * Get the components configuration from components.json
  */
 async function getComponentsConfig(): Promise<ComponentsConfig> {
-	try {
-		const projectRoot = await getProjectRoot();
-		const configPath = path.join(projectRoot, "components.json");
-		const config = JSON.parse(readFileSync(configPath, "utf-8"));
-		return ComponentsConfigSchema.parse(config);
-	} catch (error) {
-		throw new Error("Failed to read components.json");
-	}
+  try {
+    const projectRoot = await getProjectRoot();
+    const configPath = path.join(projectRoot, "components.json");
+    const config = JSON.parse(readFileSync(configPath, "utf-8"));
+    return ComponentsConfigSchema.parse(config);
+  } catch (error) {
+    throw new Error("Failed to read components.json");
+  }
 }
 
 /**
  * Get installed components from the components directory
  */
 export async function getInstalledComponents(): Promise<string[]> {
-	try {
-		const config = await getComponentsConfig();
-		const projectRoot = await getProjectRoot();
+  try {
+    const config = await getComponentsConfig();
+    const projectRoot = await getProjectRoot();
 
-		// Get the actual filesystem path from the ui alias
-		// The alias is typically "@/components/ui", we need to convert it to the actual path
-		const uiPath = config.aliases.ui.replace("@/", "src/");
-		const componentsDir = path.join(projectRoot, uiPath);
+    // Get the actual filesystem path from the ui alias
+    // The alias is typically "@/components/ui", we need to convert it to the actual path
+    const uiPath = config.aliases.ui.replace("@/", "src/");
+    const componentsDir = path.join(projectRoot, uiPath);
 
-		try {
-			// Check if directory exists
-			const stats = statSync(componentsDir);
-			if (!stats.isDirectory()) {
-				console.error("UI components path is not a directory:", componentsDir);
-				return [];
-			}
+    try {
+      // Check if directory exists
+      const stats = statSync(componentsDir);
+      if (!stats.isDirectory()) {
+        console.error("UI components path is not a directory:", componentsDir);
+        return [];
+      }
 
-			// Read the directory and filter for .tsx files
-			const components = readdirSync(componentsDir)
-				.filter((file) => file.endsWith(".tsx"))
-				.map((file) => file.replace(".tsx", ""));
+      // Read the directory and filter for .tsx files
+      const components = readdirSync(componentsDir)
+        .filter((file) => file.endsWith(".tsx"))
+        .map((file) => file.replace(".tsx", ""));
 
-			return components;
-		} catch (error: any) {
-			if (error.code === "ENOENT") {
-				console.error("UI components directory does not exist:", componentsDir);
-			} else {
-				console.error("Error reading UI components directory:", error);
-			}
-			return [];
-		}
-	} catch (error) {
-		console.error("Error getting installed components:", error);
-		return [];
-	}
+      return components;
+    } catch (error: any) {
+      if (error.code === "ENOENT") {
+        console.error("UI components directory does not exist:", componentsDir);
+      } else {
+        console.error("Error reading UI components directory:", error);
+      }
+      return [];
+    }
+  } catch (error) {
+    console.error("Error getting installed components:", error);
+    return [];
+  }
 }
diff --git a/src/app/(app)/bones/cli-www/_components/add-registry-dialog.tsx b/src/app/(app)/bones/cli-www/_components/add-registry-dialog.tsx
index 38232f11..9b4c014e 100644
--- a/src/app/(app)/bones/cli-www/_components/add-registry-dialog.tsx
+++ b/src/app/(app)/bones/cli-www/_components/add-registry-dialog.tsx
@@ -1,129 +1,129 @@
-'use client'
+"use client";
 
-import { Button } from '@/components/ui/button'
+import { Button } from "@/components/ui/button";
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { toast } from '@/hooks/use-toast'
-import { ReloadIcon } from '@radix-ui/react-icons'
-import { PlusCircle } from 'lucide-react'
-import { type FormEvent, useState } from 'react'
-import { validateRegistry } from '../_lib/registry-service'
-import type { Registry } from '../_lib/types'
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "@/hooks/use-toast";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { PlusCircle } from "lucide-react";
+import { type FormEvent, useState } from "react";
+import { validateRegistry } from "../_lib/registry-service";
+import type { Registry } from "../_lib/types";
 
 interface AddRegistryDialogProps {
-	onAdd: (registry: Registry) => void
+  onAdd: (registry: Registry) => void;
 }
 
 export function AddRegistryDialog({ onAdd }: AddRegistryDialogProps) {
-	const [open, setOpen] = useState(false)
-	const [name, setName] = useState('')
-	const [url, setUrl] = useState('')
-	const [loading, setLoading] = useState(false)
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [loading, setLoading] = useState(false);
 
-	const handleSubmit = async (e: FormEvent) => {
-		e.preventDefault()
-		setLoading(true)
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
 
-		try {
-			const registry = {
-				name,
-				url,
-				baseComponentUrl: url,
-				baseBlockUrl: url,
-				baseDocsUrl: url,
-			}
+    try {
+      const registry = {
+        name,
+        url,
+        baseComponentUrl: url,
+        baseBlockUrl: url,
+        baseDocsUrl: url,
+      };
 
-			await validateRegistry(registry)
-			onAdd(registry)
-			setOpen(false)
-			setName('')
-			setUrl('')
-			toast({
-				title: "Registry added",
-				description: `Successfully added registry "${name}"`,
-			})
-		} catch (error) {
-			toast({
-				title: "Failed to add registry",
-				description: error instanceof Error ? error.message : "Unknown error occurred",
-				variant: "destructive",
-			})
-		} finally {
-			setLoading(false)
-		}
-	}
+      await validateRegistry(registry);
+      onAdd(registry);
+      setOpen(false);
+      setName("");
+      setUrl("");
+      toast({
+        title: "Registry added",
+        description: `Successfully added registry "${name}"`,
+      });
+    } catch (error) {
+      toast({
+        title: "Failed to add registry",
+        description: error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
 
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="sm"
-					className="w-full"
-					onClick={(e) => {
-						e.stopPropagation();
-						setOpen(true);
-					}}
-				>
-					<PlusCircle className="mr-2 h-4 w-4" />
-					Add Registry
-				</Button>
-			</DialogTrigger>
-			<DialogContent onClick={(e) => e.stopPropagation()}>
-				<DialogHeader>
-					<DialogTitle>Add Custom Registry</DialogTitle>
-					<DialogDescription>
-						Add a custom component registry to browse and install components from.
-					</DialogDescription>
-				</DialogHeader>
-				<form onSubmit={handleSubmit}>
-					<div className="grid gap-4 py-4">
-						<div className="grid gap-2">
-							<Label htmlFor="name">Name</Label>
-							<Input
-								id="name"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-								placeholder="My Custom Registry"
-								required
-								disabled={loading}
-							/>
-						</div>
-						<div className="grid gap-2">
-							<Label htmlFor="url">Registry URL</Label>
-							<Input
-								id="url"
-								value={url}
-								onChange={(e) => setUrl(e.target.value)}
-								placeholder="https://example.com/registry"
-								required
-								disabled={loading}
-							/>
-						</div>
-					</div>
-					<DialogFooter>
-						<Button type="submit" disabled={loading}>
-							{loading ? (
-								<>
-									<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
-									Validating...
-								</>
-							) : (
-								'Add Registry'
-							)}
-						</Button>
-					</DialogFooter>
-				</form>
-			</DialogContent>
-		</Dialog>
-	)
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          <PlusCircle className="mr-2 h-4 w-4" />
+          Add Registry
+        </Button>
+      </DialogTrigger>
+      <DialogContent onClick={(e) => e.stopPropagation()}>
+        <DialogHeader>
+          <DialogTitle>Add Custom Registry</DialogTitle>
+          <DialogDescription>
+            Add a custom component registry to browse and install components from.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="My Custom Registry"
+                required
+                disabled={loading}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="url">Registry URL</Label>
+              <Input
+                id="url"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                placeholder="https://example.com/registry"
+                required
+                disabled={loading}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="submit" disabled={loading}>
+              {loading ? (
+                <>
+                  <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+                  Validating...
+                </>
+              ) : (
+                "Add Registry"
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
 }
diff --git a/src/app/(app)/bones/cli-www/_components/browser-header.tsx b/src/app/(app)/bones/cli-www/_components/browser-header.tsx
index ccbc8b31..a6b8106d 100644
--- a/src/app/(app)/bones/cli-www/_components/browser-header.tsx
+++ b/src/app/(app)/bones/cli-www/_components/browser-header.tsx
@@ -1,226 +1,218 @@
-'use client'
+"use client";
 
-import { Button } from '@/components/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
-import { Label } from '@/components/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Separator } from '@/components/ui/separator'
-import { Switch } from '@/components/ui/switch'
-import { cn } from '@/lib/utils'
-import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
-import { Palette, Trash2 } from 'lucide-react'
-import { useState } from 'react'
-import type { Registry } from '../_lib/types'
-import { AddRegistryDialog } from './add-registry-dialog'
-import { getColor } from './colors'
-import type { StyleMode } from './types'
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import { Palette, Trash2 } from "lucide-react";
+import { useState } from "react";
+import type { Registry } from "../_lib/types";
+import { AddRegistryDialog } from "./add-registry-dialog";
+import { getColor } from "./colors";
+import type { StyleMode } from "./types";
 
 export interface BrowserHeaderProps {
-	currentStyle: StyleMode
-	registries: Registry[]
-	currentRegistry?: Registry | null
-	onRegistryChange: (registry: Registry | null) => void
-	overwrite: boolean
-	onOverwriteChange: (value: boolean) => void
-	onAddRegistry: (registry: Registry) => Promise<void>
-	onRemoveRegistry: (name: string) => void
-	onStyleChange?: () => void
+  currentStyle: StyleMode;
+  registries: Registry[];
+  currentRegistry?: Registry | null;
+  onRegistryChange: (registry: Registry | null) => void;
+  overwrite: boolean;
+  onOverwriteChange: (value: boolean) => void;
+  onAddRegistry: (registry: Registry) => Promise<void>;
+  onRemoveRegistry: (name: string) => void;
+  onStyleChange?: () => void;
 }
 
 export function BrowserHeader({
-	currentStyle,
-	registries,
-	currentRegistry,
-	onRegistryChange,
-	overwrite,
-	onOverwriteChange,
-	onAddRegistry,
-	onRemoveRegistry,
-	onStyleChange,
+  currentStyle,
+  registries,
+  currentRegistry,
+  onRegistryChange,
+  overwrite,
+  onOverwriteChange,
+  onAddRegistry,
+  onRemoveRegistry,
+  onStyleChange,
 }: BrowserHeaderProps) {
-	const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
 
-	const handleRegistryChange = (registry: Registry | null) => {
-		onRegistryChange(registry)
-		setOpen(false)
-	}
+  const handleRegistryChange = (registry: Registry | null) => {
+    onRegistryChange(registry);
+    setOpen(false);
+  };
 
-	return (
-		<div className={cn(
-			"flex items-center justify-between gap-4 p-4 border-b",
-			currentStyle === 'brutalist' ? 'border-b-2 border-primary' : 'border-border'
-		)}>
-			<h1 className="text-2xl font-bold">Component Browser</h1>
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-4 border-b p-4",
+        currentStyle === "brutalist" ? "border-b-2 border-primary" : "border-border"
+      )}
+    >
+      <h1 className="text-2xl font-bold">Component Browser</h1>
 
-			<div className="flex items-center gap-4">
-				<Popover open={open} onOpenChange={setOpen}>
-					<PopoverTrigger asChild>
-						<Button
-							variant="outline"
-							aria-expanded={open}
-							className={cn(
-								"w-[200px] justify-between",
-								currentStyle === 'brutalist'
-									? 'border-2 border-primary rounded-none'
-									: 'border rounded-md'
-							)}
-						>
-							<div className="flex items-center gap-2">
-								{currentRegistry && (
-									<div
-										className="w-2 h-2 rounded-full"
-										style={{ backgroundColor: getColor(currentRegistry.name) }}
-									/>
-								)}
-								{currentRegistry?.name || "All Registries"}
-							</div>
-							<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-						</Button>
-					</PopoverTrigger>
-					<PopoverContent className="w-[200px] p-0">
-						<Command>
-							<CommandInput placeholder="Search registries..." className="h-9" />
-							<CommandEmpty>No registry found.</CommandEmpty>
-							<CommandList>
-								<CommandGroup heading="Registries">
-									<CommandItem
-										onSelect={() => handleRegistryChange(null)}
-										className="flex justify-between"
-									>
-										<div className="flex items-center gap-2">
-											<CheckIcon
-												className={cn(
-													"mr-2 h-4 w-4",
-													!currentRegistry
-														? "opacity-100"
-														: "opacity-0"
-												)}
-											/>
-											<div
-												className="w-2 h-2 rounded-full bg-gradient-to-r from-primary to-primary/50"
-											/>
-											All Registries
-										</div>
-									</CommandItem>
-									{registries
-										.filter((r) => !r.custom)
-										.map((registry) => (
-											<CommandItem
-												key={registry.name}
-												onSelect={() => handleRegistryChange(registry)}
-												className="flex justify-between"
-											>
-												<div className="flex items-center gap-2">
-													<CheckIcon
-														className={cn(
-															"mr-2 h-4 w-4",
-															currentRegistry?.name === registry.name
-																? "opacity-100"
-																: "opacity-0"
-														)}
-													/>
-													<div
-														className="w-2 h-2 rounded-full"
-														style={{ backgroundColor: getColor(registry.name) }}
-													/>
-													{registry.name}
-												</div>
-											</CommandItem>
-										))}
-								</CommandGroup>
-								{registries.some(r => r.custom) && (
-									<CommandGroup heading="Custom Registries">
-										{registries
-											.filter((r) => r.custom)
-											.map((registry) => (
-												<CommandItem
-													key={registry.name}
-													onSelect={() => handleRegistryChange(registry)}
-													className="flex justify-between"
-												>
-													<div className="flex items-center gap-2">
-														<CheckIcon
-															className={cn(
-																"mr-2 h-4 w-4",
-																currentRegistry?.name === registry.name
-																	? "opacity-100"
-																	: "opacity-0"
-															)}
-														/>
-														<div
-															className="w-2 h-2 rounded-full"
-															style={{ backgroundColor: getColor(registry.name) }}
-														/>
-														{registry.name}
-													</div>
-													<Button
-														variant="ghost"
-														size="sm"
-														className="h-4 w-4 p-0"
-														onClick={(e) => {
-															e.stopPropagation()
-															if (currentRegistry?.name === registry.name) {
-																const defaultRegistry = registries.find(r => !r.custom)
-																const fallbackRegistry = registries[0]
-																const nextRegistry = defaultRegistry || fallbackRegistry
-																if (nextRegistry) {
-																	handleRegistryChange(nextRegistry)
-																}
-															}
-															onRemoveRegistry(registry.name)
-														}}
-													>
-														<Trash2 className="h-4 w-4 text-destructive" />
-													</Button>
-												</CommandItem>
-											))}
-									</CommandGroup>
-								)}
-								<Separator />
-								<CommandGroup>
-									<CommandItem className="border-t p-0">
-										<AddRegistryDialog onAdd={onAddRegistry} />
-									</CommandItem>
-								</CommandGroup>
-							</CommandList>
-						</Command>
-					</PopoverContent>
-				</Popover>
-				<div className="flex items-center gap-2">
-					<Switch
-						id="overwrite"
-						checked={overwrite}
-						onCheckedChange={onOverwriteChange}
-						className={cn(
-							currentStyle === 'brutalist'
-								? 'data-[state=checked]:bg-primary'
-								: ''
-						)}
-					/>
-					<Label
-						htmlFor="overwrite"
-						className="text-sm text-muted-foreground"
-					>
-						Overwrite existing
-					</Label>
-				</div>
-				<Separator orientation="vertical" className="h-6" />
-				<Button
-					variant="ghost"
-					size="icon"
-					onClick={onStyleChange}
-					className={cn(
-						"h-8 w-8",
-						currentStyle === 'brutalist'
-							? 'hover:bg-primary/20'
-							: 'hover:bg-accent'
-					)}
-				>
-					<Palette className="h-4 w-4" />
-				</Button>
-			</div>
-		</div>
-	)
+      <div className="flex items-center gap-4">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              aria-expanded={open}
+              className={cn(
+                "w-[200px] justify-between",
+                currentStyle === "brutalist"
+                  ? "rounded-none border-2 border-primary"
+                  : "rounded-md border"
+              )}
+            >
+              <div className="flex items-center gap-2">
+                {currentRegistry && (
+                  <div
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: getColor(currentRegistry.name) }}
+                  />
+                )}
+                {currentRegistry?.name || "All Registries"}
+              </div>
+              <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[200px] p-0">
+            <Command>
+              <CommandInput placeholder="Search registries..." className="h-9" />
+              <CommandEmpty>No registry found.</CommandEmpty>
+              <CommandList>
+                <CommandGroup heading="Registries">
+                  <CommandItem
+                    onSelect={() => handleRegistryChange(null)}
+                    className="flex justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <CheckIcon
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          !currentRegistry ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <div className="h-2 w-2 rounded-full bg-gradient-to-r from-primary to-primary/50" />
+                      All Registries
+                    </div>
+                  </CommandItem>
+                  {registries
+                    .filter((r) => !r.custom)
+                    .map((registry) => (
+                      <CommandItem
+                        key={registry.name}
+                        onSelect={() => handleRegistryChange(registry)}
+                        className="flex justify-between"
+                      >
+                        <div className="flex items-center gap-2">
+                          <CheckIcon
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              currentRegistry?.name === registry.name ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div
+                            className="h-2 w-2 rounded-full"
+                            style={{ backgroundColor: getColor(registry.name) }}
+                          />
+                          {registry.name}
+                        </div>
+                      </CommandItem>
+                    ))}
+                </CommandGroup>
+                {registries.some((r) => r.custom) && (
+                  <CommandGroup heading="Custom Registries">
+                    {registries
+                      .filter((r) => r.custom)
+                      .map((registry) => (
+                        <CommandItem
+                          key={registry.name}
+                          onSelect={() => handleRegistryChange(registry)}
+                          className="flex justify-between"
+                        >
+                          <div className="flex items-center gap-2">
+                            <CheckIcon
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                currentRegistry?.name === registry.name
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                            <div
+                              className="h-2 w-2 rounded-full"
+                              style={{ backgroundColor: getColor(registry.name) }}
+                            />
+                            {registry.name}
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-4 w-4 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (currentRegistry?.name === registry.name) {
+                                const defaultRegistry = registries.find((r) => !r.custom);
+                                const fallbackRegistry = registries[0];
+                                const nextRegistry = defaultRegistry || fallbackRegistry;
+                                if (nextRegistry) {
+                                  handleRegistryChange(nextRegistry);
+                                }
+                              }
+                              onRemoveRegistry(registry.name);
+                            }}
+                          >
+                            <Trash2 className="h-4 w-4 text-destructive" />
+                          </Button>
+                        </CommandItem>
+                      ))}
+                  </CommandGroup>
+                )}
+                <Separator />
+                <CommandGroup>
+                  <CommandItem className="border-t p-0">
+                    <AddRegistryDialog onAdd={onAddRegistry} />
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <div className="flex items-center gap-2">
+          <Switch
+            id="overwrite"
+            checked={overwrite}
+            onCheckedChange={onOverwriteChange}
+            className={cn(currentStyle === "brutalist" ? "data-[state=checked]:bg-primary" : "")}
+          />
+          <Label htmlFor="overwrite" className="text-sm text-muted-foreground">
+            Overwrite existing
+          </Label>
+        </div>
+        <Separator orientation="vertical" className="h-6" />
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onStyleChange}
+          className={cn(
+            "h-8 w-8",
+            currentStyle === "brutalist" ? "hover:bg-primary/20" : "hover:bg-accent"
+          )}
+        >
+          <Palette className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
 }
-
-
diff --git a/src/app/(app)/bones/cli-www/_components/browser-sidebar.tsx b/src/app/(app)/bones/cli-www/_components/browser-sidebar.tsx
index 4ae6d877..ceb47fcd 100644
--- a/src/app/(app)/bones/cli-www/_components/browser-sidebar.tsx
+++ b/src/app/(app)/bones/cli-www/_components/browser-sidebar.tsx
@@ -1,205 +1,236 @@
-'use client'
+"use client";
 
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Separator } from '@/components/ui/separator'
-import { cn } from '@/lib/utils'
-import { Search } from 'lucide-react'
-import { memo, useMemo } from 'react'
-import type { RegistryFilters, RegistryItem } from '../_lib/types'
-import { getColor } from './colors'
-import type { StyleMode, InstallationProgress } from './types'
-import { CustomInstallDialog } from './custom-install-dialog'
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { Search } from "lucide-react";
+import { memo, useMemo } from "react";
+import type { RegistryFilters, RegistryItem } from "../_lib/types";
+import { getColor } from "./colors";
+import type { StyleMode, InstallationProgress } from "./types";
+import { CustomInstallDialog } from "./custom-install-dialog";
 
 export interface BrowserSidebarProps {
-	currentStyle: StyleMode
-	searchTerm: string
-	setSearchTerm: (term: string) => void
-	filters: RegistryFilters
-	setFilters: (filters: RegistryFilters) => void
-	categories: string[]
-	types: string[]
-	filteredItems: RegistryItem[]
-	onCustomInstall: (command: string) => void
-	installationProgress: InstallationProgress
+  currentStyle: StyleMode;
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+  filters: RegistryFilters;
+  setFilters: (filters: RegistryFilters) => void;
+  categories: string[];
+  types: string[];
+  filteredItems: RegistryItem[];
+  onCustomInstall: (command: string) => void;
+  installationProgress: InstallationProgress;
 }
 
-export const BrowserSidebar = memo(({
-	currentStyle,
-	searchTerm,
-	setSearchTerm,
-	filters,
-	setFilters,
-	categories,
-	types,
-	filteredItems,
-	onCustomInstall,
-	installationProgress
-}: BrowserSidebarProps) => {
-	// Memoize expensive computations
-	const componentCount = useMemo(() =>
-		filteredItems.filter(item => item.type === 'registry:ui').length,
-		[filteredItems]
-	)
+export const BrowserSidebar = memo(
+  ({
+    currentStyle,
+    searchTerm,
+    setSearchTerm,
+    filters,
+    setFilters,
+    categories,
+    types,
+    filteredItems,
+    onCustomInstall,
+    installationProgress,
+  }: BrowserSidebarProps) => {
+    // Memoize expensive computations
+    const componentCount = useMemo(
+      () => filteredItems.filter((item) => item.type === "registry:ui").length,
+      [filteredItems]
+    );
 
-	const blockCount = useMemo(() =>
-		filteredItems.filter(item => item.type === 'registry:block').length,
-		[filteredItems]
-	)
+    const blockCount = useMemo(
+      () => filteredItems.filter((item) => item.type === "registry:block").length,
+      [filteredItems]
+    );
 
-	const categoryCount = useMemo(() =>
-		categories.reduce((acc, category) => {
-			acc[category] = filteredItems.filter(item => item.categories?.includes(category)).length
-			return acc
-		}, {} as Record<string, number>),
-		[categories, filteredItems]
-	)
+    const categoryCount = useMemo(
+      () =>
+        categories.reduce(
+          (acc, category) => {
+            acc[category] = filteredItems.filter((item) =>
+              item.categories?.includes(category)
+            ).length;
+            return acc;
+          },
+          {} as Record<string, number>
+        ),
+      [categories, filteredItems]
+    );
 
-	return (
-		<div className={cn(
-			"w-full md:w-72 border-r border-border p-4 flex flex-col",
-			currentStyle === 'brutalist' && "border-r-2 border-primary"
-		)}>
-			<div className="space-y-6">
-				<div>
-					<div className="flex items-center justify-between mb-2">
-						<Label htmlFor="search" className="text-sm font-medium">
-							Search
-						</Label>
-						<Badge variant="secondary" className="font-mono">
-							{filteredItems.length} results
-						</Badge>
-					</div>
-					<div className="relative">
-						<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-						<Input
-							id="search"
-							placeholder="Search components..."
-							className={cn(
-								"pl-8",
-								currentStyle === 'brutalist'
-									? 'border-2 border-primary rounded-none'
-									: 'border rounded-md'
-							)}
-							value={searchTerm}
-							onChange={(e) => {
-								setSearchTerm(e.target.value)
-								// Reset filters when searching to show all results
-								setFilters({
-									...filters,
-									type: 'all',
-									category: 'all'
-								})
-							}}
-						/>
-					</div>
-				</div>
+    return (
+      <div
+        className={cn(
+          "flex w-full flex-col border-r border-border p-4 md:w-72",
+          currentStyle === "brutalist" && "border-r-2 border-primary"
+        )}
+      >
+        <div className="space-y-6">
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <Label htmlFor="search" className="text-sm font-medium">
+                Search
+              </Label>
+              <Badge variant="secondary" className="font-mono">
+                {filteredItems.length} results
+              </Badge>
+            </div>
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                id="search"
+                placeholder="Search components..."
+                className={cn(
+                  "pl-8",
+                  currentStyle === "brutalist"
+                    ? "rounded-none border-2 border-primary"
+                    : "rounded-md border"
+                )}
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  // Reset filters when searching to show all results
+                  setFilters({
+                    ...filters,
+                    type: "all",
+                    category: "all",
+                  });
+                }}
+              />
+            </div>
+          </div>
 
-				<CustomInstallDialog
-					onInstall={onCustomInstall}
-					installationProgress={installationProgress}
-				/>
-				<Separator className="my-2" />
+          <CustomInstallDialog
+            onInstall={onCustomInstall}
+            installationProgress={installationProgress}
+          />
+          <Separator className="my-2" />
 
-				<div>
-					<Label htmlFor="type" className="text-sm font-medium mb-2 block">
-						Type
-					</Label>
-					<Select
-						value={filters.type}
-						onValueChange={(value) => setFilters({ ...filters, type: value as RegistryFilters['type'] })}
-					>
-						<SelectTrigger
-							id="type"
-							className={cn(
-								currentStyle === 'brutalist'
-									? 'border-2 border-primary rounded-none'
-									: 'border rounded-md'
-							)}
-						>
-							<SelectValue placeholder="Select type" />
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="all">All Types</SelectItem>
-							<SelectItem value="components" className="flex items-center justify-between">
-								<span>Components</span>
-								<Badge variant="secondary" className="ml-2 font-mono">{componentCount}</Badge>
-							</SelectItem>
-							<SelectItem value="blocks" className="flex items-center justify-between">
-								<span>Blocks</span>
-								<Badge variant="secondary" className="ml-2 font-mono">{blockCount}</Badge>
-							</SelectItem>
-						</SelectContent>
-					</Select>
-				</div>
+          <div>
+            <Label htmlFor="type" className="mb-2 block text-sm font-medium">
+              Type
+            </Label>
+            <Select
+              value={filters.type}
+              onValueChange={(value) =>
+                setFilters({ ...filters, type: value as RegistryFilters["type"] })
+              }
+            >
+              <SelectTrigger
+                id="type"
+                className={cn(
+                  currentStyle === "brutalist"
+                    ? "rounded-none border-2 border-primary"
+                    : "rounded-md border"
+                )}
+              >
+                <SelectValue placeholder="Select type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                <SelectItem value="components" className="flex items-center justify-between">
+                  <span>Components</span>
+                  <Badge variant="secondary" className="ml-2 font-mono">
+                    {componentCount}
+                  </Badge>
+                </SelectItem>
+                <SelectItem value="blocks" className="flex items-center justify-between">
+                  <span>Blocks</span>
+                  <Badge variant="secondary" className="ml-2 font-mono">
+                    {blockCount}
+                  </Badge>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-				<div>
-					<Label htmlFor="category" className="text-sm font-medium mb-2 block">
-						Category
-					</Label>
-					<Select
-						value={filters.category}
-						onValueChange={(value) => setFilters({ ...filters, category: value })}
-					>
-						<SelectTrigger
-							id="category"
-							className={cn(
-								currentStyle === 'brutalist'
-									? 'border-2 border-primary rounded-none'
-									: 'border rounded-md'
-							)}
-						>
-							<div className="flex items-center gap-2">
-								{filters.category && filters.category !== 'all' && (
-									<div
-										className="w-2 h-2 rounded-full"
-										style={{ backgroundColor: getColor(filters.category) }}
-									/>
-								)}
-								<SelectValue placeholder="Select category" />
-							</div>
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="all">All Categories</SelectItem>
-							{categories.map((category) => (
-								<SelectItem key={category} value={category} className="flex items-center justify-between">
-									<div className="flex items-center gap-2">
-										<div
-											className="w-2 h-2 rounded-full"
-											style={{ backgroundColor: getColor(category) }}
-										/>
-										{category}
-									</div>
-									<Badge variant="secondary" className="ml-2 font-mono">
-										{categoryCount[category]}
-									</Badge>
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</div>
+          <div>
+            <Label htmlFor="category" className="mb-2 block text-sm font-medium">
+              Category
+            </Label>
+            <Select
+              value={filters.category}
+              onValueChange={(value) => setFilters({ ...filters, category: value })}
+            >
+              <SelectTrigger
+                id="category"
+                className={cn(
+                  currentStyle === "brutalist"
+                    ? "rounded-none border-2 border-primary"
+                    : "rounded-md border"
+                )}
+              >
+                <div className="flex items-center gap-2">
+                  {filters.category && filters.category !== "all" && (
+                    <div
+                      className="h-2 w-2 rounded-full"
+                      style={{ backgroundColor: getColor(filters.category) }}
+                    />
+                  )}
+                  <SelectValue placeholder="Select category" />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Categories</SelectItem>
+                {categories.map((category) => (
+                  <SelectItem
+                    key={category}
+                    value={category}
+                    className="flex items-center justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="h-2 w-2 rounded-full"
+                        style={{ backgroundColor: getColor(category) }}
+                      />
+                      {category}
+                    </div>
+                    <Badge variant="secondary" className="ml-2 font-mono">
+                      {categoryCount[category]}
+                    </Badge>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-				<Separator className="my-4" />
-
-				<div className="text-sm text-muted-foreground space-y-2">
-					<div className="flex items-center justify-between">
-						<span>Total Components</span>
-						<Badge variant="secondary" className="font-mono">{filteredItems.length}</Badge>
-					</div>
-					<div className="flex items-center justify-between">
-						<span>Types</span>
-						<Badge variant="secondary" className="font-mono">{types.length}</Badge>
-					</div>
-					<div className="flex items-center justify-between">
-						<span>Categories</span>
-						<Badge variant="secondary" className="font-mono">{categories.length}</Badge>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-})
-BrowserSidebar.displayName = 'BrowserSidebar'
+          <Separator className="my-4" />
 
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <div className="flex items-center justify-between">
+              <span>Total Components</span>
+              <Badge variant="secondary" className="font-mono">
+                {filteredItems.length}
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Types</span>
+              <Badge variant="secondary" className="font-mono">
+                {types.length}
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Categories</span>
+              <Badge variant="secondary" className="font-mono">
+                {categories.length}
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+BrowserSidebar.displayName = "BrowserSidebar";
diff --git a/src/app/(app)/bones/cli-www/_components/colors.ts b/src/app/(app)/bones/cli-www/_components/colors.ts
index 5caf9b2b..ae91a3ec 100644
--- a/src/app/(app)/bones/cli-www/_components/colors.ts
+++ b/src/app/(app)/bones/cli-www/_components/colors.ts
@@ -5,24 +5,24 @@ const HUE_OFFSET = 0.7; // This gives us a nice starting point in the blue-green
 
 // Function to generate a distinct color based on a string
 function generateColor(str: string): string {
-	// Create a hash of the string
-	let hash = 0;
-	for (let i = 0; i < str.length; i++) {
-		hash = str.charCodeAt(i) + ((hash << 5) - hash);
-	}
+  // Create a hash of the string
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
 
-	// Convert hash to float between 0 and 1
-	const normalizedHash = Math.abs(hash) / 2 ** 32;
+  // Convert hash to float between 0 and 1
+  const normalizedHash = Math.abs(hash) / 2 ** 32;
 
-	// Use golden ratio to create well-distributed hues, with offset
-	const hue = (normalizedHash + GOLDEN_RATIO + HUE_OFFSET) % 1;
+  // Use golden ratio to create well-distributed hues, with offset
+  const hue = (normalizedHash + GOLDEN_RATIO + HUE_OFFSET) % 1;
 
-	// Convert to degrees and ensure good saturation and lightness for visibility
-	const h = Math.floor(hue * 360);
-	const s = 70 + (hash % 15); // 70-85% - slightly more saturated
-	const l = 60 + (hash % 8); // 60-68% - slightly brighter
+  // Convert to degrees and ensure good saturation and lightness for visibility
+  const h = Math.floor(hue * 360);
+  const s = 70 + (hash % 15); // 70-85% - slightly more saturated
+  const l = 60 + (hash % 8); // 60-68% - slightly brighter
 
-	return Color.hsl(h, s, l).hex();
+  return Color.hsl(h, s, l).hex();
 }
 
 // Cache to store generated colors
@@ -30,12 +30,12 @@ const colorCache: Record<string, string> = {};
 
 // Function to get or generate a color for a given key
 export function getColor(key: string): string {
-	if (!key) return "#666666"; // Default color for empty keys
+  if (!key) return "#666666"; // Default color for empty keys
 
-	if (!colorCache[key]) {
-		colorCache[key] = generateColor(key);
-	}
-	return colorCache[key];
+  if (!colorCache[key]) {
+    colorCache[key] = generateColor(key);
+  }
+  return colorCache[key];
 }
 
 // Export empty objects to maintain compatibility with existing code
diff --git a/src/app/(app)/bones/cli-www/_components/component-browser.tsx b/src/app/(app)/bones/cli-www/_components/component-browser.tsx
index 05b50450..33da5141 100644
--- a/src/app/(app)/bones/cli-www/_components/component-browser.tsx
+++ b/src/app/(app)/bones/cli-www/_components/component-browser.tsx
@@ -1,531 +1,576 @@
-'use client'
-
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { toast } from '@/hooks/use-toast'
-import { cn } from '@/lib/utils'
-import { CheckIcon, Cross2Icon, ReloadIcon } from '@radix-ui/react-icons'
-import { motion } from 'framer-motion'
-import { CopyIcon, Download } from 'lucide-react'
-import { type MouseEvent, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { installComponent } from '../_actions/install'
-import { getInstalledComponents } from '../_actions/registry'
-import { useRegistry } from '../_hooks/use-registry'
-import { addCustomRegistry, getInstallCommand, removeCustomRegistry } from '../_lib/registry-service'
-import type { Registry, RegistryItem } from '../_lib/types'
-import { BrowserHeader } from './browser-header'
-import { BrowserSidebar } from './browser-sidebar'
-import { getColor } from './colors'
-import { ComponentDetails } from './component-details'
-import { buttonStyles, componentCardStyles, containerStyles } from './styles'
-import { Terminal } from './terminal'
-import type { InstallationProgress, StyleMode } from './types'
-import { memo } from 'react'
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { toast } from "@/hooks/use-toast";
+import { cn } from "@/lib/utils";
+import { CheckIcon, Cross2Icon, ReloadIcon } from "@radix-ui/react-icons";
+import { motion } from "framer-motion";
+import { CopyIcon, Download } from "lucide-react";
+import {
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { installComponent } from "../_actions/install";
+import { getInstalledComponents } from "../_actions/registry";
+import { useRegistry } from "../_hooks/use-registry";
+import {
+  addCustomRegistry,
+  getInstallCommand,
+  removeCustomRegistry,
+} from "../_lib/registry-service";
+import type { Registry, RegistryItem } from "../_lib/types";
+import { BrowserHeader } from "./browser-header";
+import { BrowserSidebar } from "./browser-sidebar";
+import { getColor } from "./colors";
+import { ComponentDetails } from "./component-details";
+import { buttonStyles, componentCardStyles, containerStyles } from "./styles";
+import { Terminal } from "./terminal";
+import type { InstallationProgress, StyleMode } from "./types";
+import { memo } from "react";
 
 interface ComponentCardProps {
-	component: RegistryItem
-	currentStyle: StyleMode
-	currentRegistry?: Registry
-	onOpenSidebar: (component: RegistryItem) => void
-	showPreview?: boolean
-	showAllVariants?: boolean
-	onInstall: (component: RegistryItem) => void
-	isInstalled: boolean
+  component: RegistryItem;
+  currentStyle: StyleMode;
+  currentRegistry?: Registry;
+  onOpenSidebar: (component: RegistryItem) => void;
+  showPreview?: boolean;
+  showAllVariants?: boolean;
+  onInstall: (component: RegistryItem) => void;
+  isInstalled: boolean;
 }
 
 interface ActionButtonProps {
-	icon: ReactNode
-	tooltip: string
-	onClick: (e: MouseEvent<HTMLButtonElement>) => void
-	currentStyle: StyleMode
+  icon: ReactNode;
+  tooltip: string;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  currentStyle: StyleMode;
 }
 
 interface ComponentBrowserProps {
-	currentStyle?: StyleMode
+  currentStyle?: StyleMode;
 }
 
 const copyToClipboard = (text: string) => {
-	navigator.clipboard.writeText(text)
-	toast({
-		title: "Copied to clipboard",
-		description: "The content has been copied to your clipboard.",
-	})
-}
+  navigator.clipboard.writeText(text);
+  toast({
+    title: "Copied to clipboard",
+    description: "The content has been copied to your clipboard.",
+  });
+};
 
 const ActionButton = ({ icon, tooltip, onClick, currentStyle }: ActionButtonProps) => (
-	<TooltipProvider delayDuration={0}>
-		<Tooltip>
-			<TooltipTrigger asChild>
-				<Button
-					type="button"
-					variant="outline"
-					size="icon"
-					className={buttonStyles({ style: currentStyle })}
-					onClick={onClick}
-				>
-					{icon}
-				</Button>
-			</TooltipTrigger>
-			<TooltipContent>
-				<p>{tooltip}</p>
-			</TooltipContent>
-		</Tooltip>
-	</TooltipProvider>
-)
-
-const ComponentCard = memo(({ component, currentStyle, currentRegistry, onOpenSidebar, showPreview, onInstall, isInstalled }: ComponentCardProps) => {
-	const registryColor = useMemo(() => getColor(component.registry || 'default'), [component.registry])
-	const categoryColor = useMemo(() => getColor(component.categories?.[0] || 'default'), [component.categories])
-
-	const handleCopyCommand = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-		e.stopPropagation()
-		const installCommand = getInstallCommand(component, currentRegistry)
-		navigator.clipboard.writeText(installCommand)
-		toast({
-			title: "Copied to clipboard",
-			description: "Install command has been copied to your clipboard.",
-		})
-	}, [component, currentRegistry])
-
-	const handleInstallClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-		e.stopPropagation()
-		onInstall(component)
-	}, [component, onInstall])
-
-	return (
-		<Card
-			key={component.name}
-			className={cn(
-				componentCardStyles({ style: currentStyle }),
-				'bg-card text-card-foreground relative min-h-[150px] overflow-hidden',
-				isInstalled && (
-					currentStyle === 'brutalist'
-						? 'border-2 border-emerald-500'
-						: 'border border-emerald-500/50'
-				)
-			)}
-			onClick={() => onOpenSidebar(component)}
-		>
-			<div className="absolute top-0 left-0 w-0 h-0 border-8 border-transparent" style={{ borderTopColor: registryColor, borderLeftColor: registryColor }} />
-			{/* <div className="absolute top-0 right-0 w-0 h-0 border-8 border-transparent" style={{ borderTopColor: categoryColor, borderRightColor: categoryColor }} /> */}
-			{isInstalled && (
-				<TooltipProvider delayDuration={0}>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<div className="absolute bottom-0 right-0 w-0 h-0 border-8 border-transparent border-b-emerald-500 border-r-emerald-500 cursor-help" />
-						</TooltipTrigger>
-						<TooltipContent side="left">
-							<p className="text-xs">Installed</p>
-						</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			)}
-			<CardHeader className="pb-2">
-				<div className="flex justify-between items-start mb-2">
-					<CardTitle className="text-base font-bold">{component.name}</CardTitle>
-					<div className="flex items-center gap-2">
-						<ActionButton
-							icon={<CopyIcon className="h-4 w-4" />}
-							tooltip="Copy install command"
-							onClick={handleCopyCommand}
-							currentStyle={currentStyle}
-						/>
-						{showPreview && (
-							<ActionButton
-								icon={<Download className="h-4 w-4" />}
-								tooltip="Install component"
-								onClick={handleInstallClick}
-								currentStyle={currentStyle}
-							/>
-						)}
-					</div>
-
-				</div>
-				<Badge
-					variant="outline"
-					className={cn(
-						"mt-1 hidden md:inline-flex w-auto self-start",
-						currentStyle === 'brutalist'
-							? 'border-2 border-primary rounded-none'
-							: 'border border-muted-foreground rounded-full text-xs'
-					)}
-					style={{ backgroundColor: `${categoryColor}70`, color: '#fff' }}
-				>
-					{component.type === 'registry:ui' ? 'Component' : 'Block'}
-				</Badge>
-			</CardHeader>
-			<CardContent>
-				<p className="text-sm text-muted-foreground">{component.description}</p>
-			</CardContent>
-		</Card>
-	)
-})
-ComponentCard.displayName = 'ComponentCard'
-
-export function ComponentBrowser({ currentStyle: initialStyle = 'modern' }: ComponentBrowserProps) {
-	const [currentStyle, setCurrentStyle] = useState<StyleMode>(initialStyle)
-	const [selectedComponent, setSelectedComponent] = useState<RegistryItem | null>(null)
-	const [isSidebarOpen, setIsSidebarOpen] = useState(false)
-	const [installationProgress, setInstallationProgress] = useState<InstallationProgress>({
-		status: 'idle'
-	})
-	const [installedComponents, setInstalledComponents] = useState<string[]>([])
-	const [showInstallation, setShowInstallation] = useState(false)
-	const [overwrite, setOverwrite] = useState(false)
-	const sidebarRef = useRef<HTMLDivElement>(null)
-
-	const {
-		registries,
-		currentRegistry,
-		items,
-		loading,
-		error,
-		filters,
-		searchQuery,
-		setCurrentRegistry: setCurrentRegistryBase,
-		setFilters,
-		setSearchQuery,
-		getCategories,
-		getTypes,
-		setRegistries,
-		filteredItems
-	} = useRegistry()
-
-	// Wrap setCurrentRegistry to handle null case
-	const setCurrentRegistry = (registry: Registry | null) => {
-		setCurrentRegistryBase(registry || undefined)
-	}
-
-	useEffect(() => {
-		const checkInstallations = async () => {
-			const components = await getInstalledComponents()
-			setInstalledComponents(components)
-		}
-		checkInstallations()
-	}, [])
-
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent) => {
-			if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
-				setSelectedComponent(null)
-				setIsSidebarOpen(false)
-			}
-		}
-
-		document.addEventListener('mousedown', handleClickOutside as any)
-		return () => {
-			document.removeEventListener('mousedown', handleClickOutside as any)
-		}
-	}, [])
-
-	const toggleStyle = useCallback(() => {
-		setCurrentStyle(prev => {
-			if (prev === 'brutalist') return 'modern'
-			if (prev === 'modern') return 'minimalist'
-			return 'brutalist'
-		})
-	}, [])
-
-	const openSidebar = useCallback((component: RegistryItem) => {
-		setSelectedComponent(component)
-		setIsSidebarOpen(true)
-	}, [])
-
-	const closeSidebar = useCallback(() => {
-		setSelectedComponent(null)
-		setIsSidebarOpen(false)
-		setInstallationProgress({ status: 'idle' })
-	}, [])
-
-	const handleInstall = useCallback((component: RegistryItem) => {
-		// Find the registry for this component
-		const registryName = component.registry
-		if (!registryName) {
-			toast({
-				title: "Error",
-				description: "Component has no registry specified",
-				variant: "destructive",
-			})
-			return
-		}
-
-		const registry = registries.find(r => r.name === registryName)
-		if (!registry) {
-			toast({
-				title: "Error",
-				description: "Could not find registry for component",
-				variant: "destructive",
-			})
-			return
-		}
-
-		const installCommand = getInstallCommand(component, registry)
-		const componentUrl = installCommand.split('"')[1] // Extract URL from command
-		if (!componentUrl) {
-			toast({
-				title: "Error",
-				description: "Could not parse install command",
-				variant: "destructive",
-			})
-			return
-		}
-
-		setInstallationProgress({ status: 'installing' })
-		installComponent(componentUrl, { overwrite })
-			.then(async (stream) => {
-				let log = ''
-				const reader = stream.getReader()
-				while (true) {
-					const { done, value } = await reader.read()
-					if (done) break
-					log += new TextDecoder().decode(value)
-					setInstallationProgress({
-						status: 'installing',
-						log
-					})
-				}
-				setInstallationProgress({
-					status: 'success',
-					log,
-					message: 'Component installed successfully!'
-				})
-				const components = await getInstalledComponents()
-				setInstalledComponents(components)
-			})
-			.catch((error) => {
-				setInstallationProgress({
-					status: 'error',
-					message: error instanceof Error ? error.message : 'Failed to install component'
-				})
-			})
-	}, [registries, overwrite])
-
-	const handleCustomInstall = useCallback(async (command: string) => {
-		setInstallationProgress({ status: 'installing' })
-
-		// Extract the component URL or name from the command
-		const match = command.match(/"([^"]+)"/) || command.match(/add\s+(\S+)$/)
-		const componentUrl = match ? match[1] : null
-
-		if (!componentUrl) {
-			setInstallationProgress({
-				status: 'error',
-				message: 'Could not parse install command'
-			})
-			return
-		}
-
-		try {
-			const stream = await installComponent(componentUrl, { overwrite })
-			let log = ''
-			const reader = stream.getReader()
-			while (true) {
-				const { done, value } = await reader.read()
-				if (done) break
-				log += new TextDecoder().decode(value)
-				setInstallationProgress({
-					status: 'installing',
-					log
-				})
-			}
-			setInstallationProgress({
-				status: 'success',
-				log,
-				message: 'Component installed successfully!'
-			})
-			const components = await getInstalledComponents()
-			setInstalledComponents(components)
-		} catch (error) {
-			setInstallationProgress({
-				status: 'error',
-				message: error instanceof Error ? error.message : 'Failed to install component'
-			})
-		}
-	}, [overwrite])
-
-	const hideInstallation = useCallback(() => {
-		setInstallationProgress({ status: 'idle' })
-	}, [])
-
-	const renderComponentGrid = useCallback((registry: string) => {
-		const allFilteredItems = filteredItems()
-		return (
-			<div className={cn(
-				"p-4",
-				"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 overflow-auto"
-			)}>
-				{allFilteredItems.map((component: RegistryItem) => (
-					<ComponentCard
-						key={component.name}
-						component={component}
-						currentStyle={currentStyle}
-						currentRegistry={currentRegistry}
-						onOpenSidebar={openSidebar}
-						onInstall={handleInstall}
-						isInstalled={installedComponents.includes(component.name)}
-						showPreview={true}
-					/>
-				))}
-			</div>
-		)
-	}, [currentStyle, currentRegistry, filteredItems, handleInstall, installedComponents, openSidebar])
-
-	if (error) {
-		return (
-			<div className="flex items-center justify-center h-full">
-				<div className="text-center">
-					<h2 className="text-2xl font-bold text-destructive mb-2">Error</h2>
-					<p className="text-muted-foreground">{error.message}</p>
-				</div>
-			</div>
-		)
-	}
-
-	return (
-		<div className={`${containerStyles({ style: currentStyle })} bg-background text-foreground relative h-full`}>
-			<BrowserHeader
-				currentStyle={currentStyle}
-				registries={registries}
-				currentRegistry={currentRegistry}
-				onRegistryChange={setCurrentRegistry}
-				overwrite={overwrite}
-				onOverwriteChange={setOverwrite}
-				onAddRegistry={async (registry: Registry) => {
-					try {
-						const registryWithCustom = { ...registry, custom: true }
-						await addCustomRegistry(registryWithCustom)
-						setRegistries((prev: Registry[]) => [...prev, registryWithCustom])
-						setCurrentRegistry(registryWithCustom)
-					} catch (error) {
-						toast({
-							title: "Failed to add registry",
-							description: error instanceof Error ? error.message : "Unknown error occurred",
-							variant: "destructive",
-						})
-					}
-				}}
-				onRemoveRegistry={(name: string) => {
-					try {
-						removeCustomRegistry(name)
-						const updatedRegistries = registries.filter((r) => r.name !== name)
-						setRegistries(updatedRegistries)
-						if (currentRegistry?.name === name) {
-							const defaultRegistry = updatedRegistries.find(r => !r.custom) || updatedRegistries[0]
-							if (defaultRegistry) {
-								setCurrentRegistry(defaultRegistry)
-							}
-						}
-					} catch (error) {
-						toast({
-							title: "Failed to remove registry",
-							description: error instanceof Error ? error.message : "Unknown error occurred",
-							variant: "destructive",
-						})
-					}
-				}}
-				onStyleChange={toggleStyle}
-			/>
-			<div className="flex flex-1 overflow-hidden flex-col md:flex-row relative">
-				<BrowserSidebar
-					currentStyle={currentStyle}
-					searchTerm={searchQuery}
-					setSearchTerm={setSearchQuery}
-					filters={filters}
-					setFilters={setFilters}
-					categories={getCategories()}
-					types={getTypes()}
-					filteredItems={filteredItems()}
-					onCustomInstall={handleCustomInstall}
-					installationProgress={installationProgress}
-				/>
-				<div className="flex-1 overflow-auto">
-					{loading ? (
-						<div className="flex items-center justify-center h-full">
-							<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
-						</div>
-					) : (
-						<div className="space-y-8">
-							{renderComponentGrid('all')}
-						</div>
-					)}
-				</div>
-			</div>
-
-			{/* Installation output overlay */}
-			{(installationProgress.status !== 'idle') && (
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					animate={{ opacity: 1, y: 0 }}
-					exit={{ opacity: 0, y: 20 }}
-					className="fixed bottom-4 right-4 w-[500px] z-50"
-				>
-					<Card className="shadow-2xl border-black/10 bg-[#1E1E1E]">
-						<div className="relative">
-							<div className="h-8 bg-[#323233] rounded-t-lg flex items-center justify-between px-3">
-								<div className="absolute left-3 flex items-center gap-2 text-xs">
-									{installationProgress.status === 'installing' ? (
-										<div className="flex items-center gap-2 px-2 py-1 bg-blue-500/10 text-blue-400 rounded-full">
-											<ReloadIcon className="h-3 w-3 animate-spin" />
-											Installing...
-										</div>
-									) : installationProgress.status === 'success' ? (
-										<div className="flex items-center gap-2 px-2 py-1 bg-emerald-500/10 text-emerald-400 rounded-full">
-											<CheckIcon className="h-3 w-3" />
-											Complete
-										</div>
-									) : (
-										<div className="flex items-center gap-2 px-2 py-1 bg-red-500/10 text-red-400 rounded-full">
-											<Cross2Icon className="h-3 w-3" />
-											Error
-										</div>
-									)}
-								</div>
-								<span className="w-full text-center text-xs text-zinc-400 font-medium">
-									Console Output
-								</span>
-								<Button
-									type="button"
-									variant="ghost"
-									size="sm"
-									className="absolute right-1 top-1 z-10 h-6 w-6 p-0 text-zinc-400 hover:text-zinc-300"
-									onClick={hideInstallation}
-									disabled={installationProgress.status === 'installing'}
-								>
-									<Cross2Icon className="h-4 w-4" />
-								</Button>
-							</div>
-							<div className="pt-8">
-
-								{installationProgress.log ? (
-									<Terminal
-										output={installationProgress.log.split('\n')}
-										className="h-[300px] rounded-b-lg"
-									/>
-								) : (
-									<div className="h-[300px] flex items-center justify-center text-zinc-400">
-										<ReloadIcon className="h-6 w-6 animate-spin" />
-									</div>
-								)}
-							</div>
-						</div>
-					</Card>
-				</motion.div>
-			)}
-
-			{selectedComponent && (
-				<ComponentDetails
-					component={selectedComponent}
-					currentStyle={currentStyle}
-					currentRegistry={currentRegistry}
-					onClose={closeSidebar}
-					installationProgress={installationProgress}
-					onInstall={handleInstall}
-					onHideInstallation={hideInstallation}
-				/>
-			)}
-		</div>
-	)
+  <TooltipProvider delayDuration={0}>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className={buttonStyles({ style: currentStyle })}
+          onClick={onClick}
+        >
+          {icon}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+const ComponentCard = memo(
+  ({
+    component,
+    currentStyle,
+    currentRegistry,
+    onOpenSidebar,
+    showPreview,
+    onInstall,
+    isInstalled,
+  }: ComponentCardProps) => {
+    const registryColor = useMemo(
+      () => getColor(component.registry || "default"),
+      [component.registry]
+    );
+    const categoryColor = useMemo(
+      () => getColor(component.categories?.[0] || "default"),
+      [component.categories]
+    );
+
+    const handleCopyCommand = useCallback(
+      (e: MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        const installCommand = getInstallCommand(component, currentRegistry);
+        navigator.clipboard.writeText(installCommand);
+        toast({
+          title: "Copied to clipboard",
+          description: "Install command has been copied to your clipboard.",
+        });
+      },
+      [component, currentRegistry]
+    );
+
+    const handleInstallClick = useCallback(
+      (e: MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        onInstall(component);
+      },
+      [component, onInstall]
+    );
+
+    return (
+      <Card
+        key={component.name}
+        className={cn(
+          componentCardStyles({ style: currentStyle }),
+          "relative min-h-[150px] overflow-hidden bg-card text-card-foreground",
+          isInstalled &&
+            (currentStyle === "brutalist"
+              ? "border-2 border-emerald-500"
+              : "border border-emerald-500/50")
+        )}
+        onClick={() => onOpenSidebar(component)}
+      >
+        <div
+          className="absolute left-0 top-0 h-0 w-0 border-8 border-transparent"
+          style={{ borderTopColor: registryColor, borderLeftColor: registryColor }}
+        />
+        {/* <div className="absolute top-0 right-0 w-0 h-0 border-8 border-transparent" style={{ borderTopColor: categoryColor, borderRightColor: categoryColor }} /> */}
+        {isInstalled && (
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="absolute bottom-0 right-0 h-0 w-0 cursor-help border-8 border-transparent border-b-emerald-500 border-r-emerald-500" />
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                <p className="text-xs">Installed</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+        <CardHeader className="pb-2">
+          <div className="mb-2 flex items-start justify-between">
+            <CardTitle className="text-base font-bold">{component.name}</CardTitle>
+            <div className="flex items-center gap-2">
+              <ActionButton
+                icon={<CopyIcon className="h-4 w-4" />}
+                tooltip="Copy install command"
+                onClick={handleCopyCommand}
+                currentStyle={currentStyle}
+              />
+              {showPreview && (
+                <ActionButton
+                  icon={<Download className="h-4 w-4" />}
+                  tooltip="Install component"
+                  onClick={handleInstallClick}
+                  currentStyle={currentStyle}
+                />
+              )}
+            </div>
+          </div>
+          <Badge
+            variant="outline"
+            className={cn(
+              "mt-1 hidden w-auto self-start md:inline-flex",
+              currentStyle === "brutalist"
+                ? "rounded-none border-2 border-primary"
+                : "rounded-full border border-muted-foreground text-xs"
+            )}
+            style={{ backgroundColor: `${categoryColor}70`, color: "#fff" }}
+          >
+            {component.type === "registry:ui" ? "Component" : "Block"}
+          </Badge>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">{component.description}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+);
+ComponentCard.displayName = "ComponentCard";
+
+export function ComponentBrowser({ currentStyle: initialStyle = "modern" }: ComponentBrowserProps) {
+  const [currentStyle, setCurrentStyle] = useState<StyleMode>(initialStyle);
+  const [selectedComponent, setSelectedComponent] = useState<RegistryItem | null>(null);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [installationProgress, setInstallationProgress] = useState<InstallationProgress>({
+    status: "idle",
+  });
+  const [installedComponents, setInstalledComponents] = useState<string[]>([]);
+  const [showInstallation, setShowInstallation] = useState(false);
+  const [overwrite, setOverwrite] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+
+  const {
+    registries,
+    currentRegistry,
+    items,
+    loading,
+    error,
+    filters,
+    searchQuery,
+    setCurrentRegistry: setCurrentRegistryBase,
+    setFilters,
+    setSearchQuery,
+    getCategories,
+    getTypes,
+    setRegistries,
+    filteredItems,
+  } = useRegistry();
+
+  // Wrap setCurrentRegistry to handle null case
+  const setCurrentRegistry = (registry: Registry | null) => {
+    setCurrentRegistryBase(registry || undefined);
+  };
+
+  useEffect(() => {
+    const checkInstallations = async () => {
+      const components = await getInstalledComponents();
+      setInstalledComponents(components);
+    };
+    checkInstallations();
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
+        setSelectedComponent(null);
+        setIsSidebarOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside as any);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside as any);
+    };
+  }, []);
+
+  const toggleStyle = useCallback(() => {
+    setCurrentStyle((prev) => {
+      if (prev === "brutalist") return "modern";
+      if (prev === "modern") return "minimalist";
+      return "brutalist";
+    });
+  }, []);
+
+  const openSidebar = useCallback((component: RegistryItem) => {
+    setSelectedComponent(component);
+    setIsSidebarOpen(true);
+  }, []);
+
+  const closeSidebar = useCallback(() => {
+    setSelectedComponent(null);
+    setIsSidebarOpen(false);
+    setInstallationProgress({ status: "idle" });
+  }, []);
+
+  const handleInstall = useCallback(
+    (component: RegistryItem) => {
+      // Find the registry for this component
+      const registryName = component.registry;
+      if (!registryName) {
+        toast({
+          title: "Error",
+          description: "Component has no registry specified",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      const registry = registries.find((r) => r.name === registryName);
+      if (!registry) {
+        toast({
+          title: "Error",
+          description: "Could not find registry for component",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      const installCommand = getInstallCommand(component, registry);
+      const componentUrl = installCommand.split('"')[1]; // Extract URL from command
+      if (!componentUrl) {
+        toast({
+          title: "Error",
+          description: "Could not parse install command",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      setInstallationProgress({ status: "installing" });
+      installComponent(componentUrl, { overwrite })
+        .then(async (stream) => {
+          let log = "";
+          const reader = stream.getReader();
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            log += new TextDecoder().decode(value);
+            setInstallationProgress({
+              status: "installing",
+              log,
+            });
+          }
+          setInstallationProgress({
+            status: "success",
+            log,
+            message: "Component installed successfully!",
+          });
+          const components = await getInstalledComponents();
+          setInstalledComponents(components);
+        })
+        .catch((error) => {
+          setInstallationProgress({
+            status: "error",
+            message: error instanceof Error ? error.message : "Failed to install component",
+          });
+        });
+    },
+    [registries, overwrite]
+  );
+
+  const handleCustomInstall = useCallback(
+    async (command: string) => {
+      setInstallationProgress({ status: "installing" });
+
+      // Extract the component URL or name from the command
+      const match = command.match(/"([^"]+)"/) || command.match(/add\s+(\S+)$/);
+      const componentUrl = match ? match[1] : null;
+
+      if (!componentUrl) {
+        setInstallationProgress({
+          status: "error",
+          message: "Could not parse install command",
+        });
+        return;
+      }
+
+      try {
+        const stream = await installComponent(componentUrl, { overwrite });
+        let log = "";
+        const reader = stream.getReader();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          log += new TextDecoder().decode(value);
+          setInstallationProgress({
+            status: "installing",
+            log,
+          });
+        }
+        setInstallationProgress({
+          status: "success",
+          log,
+          message: "Component installed successfully!",
+        });
+        const components = await getInstalledComponents();
+        setInstalledComponents(components);
+      } catch (error) {
+        setInstallationProgress({
+          status: "error",
+          message: error instanceof Error ? error.message : "Failed to install component",
+        });
+      }
+    },
+    [overwrite]
+  );
+
+  const hideInstallation = useCallback(() => {
+    setInstallationProgress({ status: "idle" });
+  }, []);
+
+  const renderComponentGrid = useCallback(
+    (registry: string) => {
+      const allFilteredItems = filteredItems();
+      return (
+        <div
+          className={cn(
+            "p-4",
+            "grid grid-cols-1 gap-4 overflow-auto sm:grid-cols-2 lg:grid-cols-3"
+          )}
+        >
+          {allFilteredItems.map((component: RegistryItem) => (
+            <ComponentCard
+              key={component.name}
+              component={component}
+              currentStyle={currentStyle}
+              currentRegistry={currentRegistry}
+              onOpenSidebar={openSidebar}
+              onInstall={handleInstall}
+              isInstalled={installedComponents.includes(component.name)}
+              showPreview={true}
+            />
+          ))}
+        </div>
+      );
+    },
+    [currentStyle, currentRegistry, filteredItems, handleInstall, installedComponents, openSidebar]
+  );
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center">
+          <h2 className="mb-2 text-2xl font-bold text-destructive">Error</h2>
+          <p className="text-muted-foreground">{error.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`${containerStyles({ style: currentStyle })} relative h-full bg-background text-foreground`}
+    >
+      <BrowserHeader
+        currentStyle={currentStyle}
+        registries={registries}
+        currentRegistry={currentRegistry}
+        onRegistryChange={setCurrentRegistry}
+        overwrite={overwrite}
+        onOverwriteChange={setOverwrite}
+        onAddRegistry={async (registry: Registry) => {
+          try {
+            const registryWithCustom = { ...registry, custom: true };
+            await addCustomRegistry(registryWithCustom);
+            setRegistries((prev: Registry[]) => [...prev, registryWithCustom]);
+            setCurrentRegistry(registryWithCustom);
+          } catch (error) {
+            toast({
+              title: "Failed to add registry",
+              description: error instanceof Error ? error.message : "Unknown error occurred",
+              variant: "destructive",
+            });
+          }
+        }}
+        onRemoveRegistry={(name: string) => {
+          try {
+            removeCustomRegistry(name);
+            const updatedRegistries = registries.filter((r) => r.name !== name);
+            setRegistries(updatedRegistries);
+            if (currentRegistry?.name === name) {
+              const defaultRegistry =
+                updatedRegistries.find((r) => !r.custom) || updatedRegistries[0];
+              if (defaultRegistry) {
+                setCurrentRegistry(defaultRegistry);
+              }
+            }
+          } catch (error) {
+            toast({
+              title: "Failed to remove registry",
+              description: error instanceof Error ? error.message : "Unknown error occurred",
+              variant: "destructive",
+            });
+          }
+        }}
+        onStyleChange={toggleStyle}
+      />
+      <div className="relative flex flex-1 flex-col overflow-hidden md:flex-row">
+        <BrowserSidebar
+          currentStyle={currentStyle}
+          searchTerm={searchQuery}
+          setSearchTerm={setSearchQuery}
+          filters={filters}
+          setFilters={setFilters}
+          categories={getCategories()}
+          types={getTypes()}
+          filteredItems={filteredItems()}
+          onCustomInstall={handleCustomInstall}
+          installationProgress={installationProgress}
+        />
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="flex h-full items-center justify-center">
+              <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
+            </div>
+          ) : (
+            <div className="space-y-8">{renderComponentGrid("all")}</div>
+          )}
+        </div>
+      </div>
+
+      {/* Installation output overlay */}
+      {installationProgress.status !== "idle" && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          className="fixed bottom-4 right-4 z-50 w-[500px]"
+        >
+          <Card className="border-black/10 bg-[#1E1E1E] shadow-2xl">
+            <div className="relative">
+              <div className="flex h-8 items-center justify-between rounded-t-lg bg-[#323233] px-3">
+                <div className="absolute left-3 flex items-center gap-2 text-xs">
+                  {installationProgress.status === "installing" ? (
+                    <div className="flex items-center gap-2 rounded-full bg-blue-500/10 px-2 py-1 text-blue-400">
+                      <ReloadIcon className="h-3 w-3 animate-spin" />
+                      Installing...
+                    </div>
+                  ) : installationProgress.status === "success" ? (
+                    <div className="flex items-center gap-2 rounded-full bg-emerald-500/10 px-2 py-1 text-emerald-400">
+                      <CheckIcon className="h-3 w-3" />
+                      Complete
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2 rounded-full bg-red-500/10 px-2 py-1 text-red-400">
+                      <Cross2Icon className="h-3 w-3" />
+                      Error
+                    </div>
+                  )}
+                </div>
+                <span className="w-full text-center text-xs font-medium text-zinc-400">
+                  Console Output
+                </span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="absolute right-1 top-1 z-10 h-6 w-6 p-0 text-zinc-400 hover:text-zinc-300"
+                  onClick={hideInstallation}
+                  disabled={installationProgress.status === "installing"}
+                >
+                  <Cross2Icon className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="pt-8">
+                {installationProgress.log ? (
+                  <Terminal
+                    output={installationProgress.log.split("\n")}
+                    className="h-[300px] rounded-b-lg"
+                  />
+                ) : (
+                  <div className="flex h-[300px] items-center justify-center text-zinc-400">
+                    <ReloadIcon className="h-6 w-6 animate-spin" />
+                  </div>
+                )}
+              </div>
+            </div>
+          </Card>
+        </motion.div>
+      )}
+
+      {selectedComponent && (
+        <ComponentDetails
+          component={selectedComponent}
+          currentStyle={currentStyle}
+          currentRegistry={currentRegistry}
+          onClose={closeSidebar}
+          installationProgress={installationProgress}
+          onInstall={handleInstall}
+          onHideInstallation={hideInstallation}
+        />
+      )}
+    </div>
+  );
 }
-
diff --git a/src/app/(app)/bones/cli-www/_components/component-details.tsx b/src/app/(app)/bones/cli-www/_components/component-details.tsx
index 75bcbdb9..9d0b6856 100644
--- a/src/app/(app)/bones/cli-www/_components/component-details.tsx
+++ b/src/app/(app)/bones/cli-www/_components/component-details.tsx
@@ -1,355 +1,360 @@
-'use client'
+"use client";
 
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { toast } from '@/hooks/use-toast'
-import { cn } from '@/lib/utils'
-import { motion } from 'framer-motion'
-import { BookOpen, Copy, FileJson, X } from 'lucide-react'
-import type { KeyboardEvent, MouseEvent } from 'react'
-import { useState } from 'react'
-import { getDocumentationUrl, getInstallCommand } from '../_lib/registry-service'
-import { getColor } from './colors'
-import { ComponentStats } from './component-stats'
-import { FileTree } from './file-tree'
-import { Terminal } from './terminal'
-import type { ComponentDetailsProps } from './types'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { toast } from "@/hooks/use-toast";
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+import { BookOpen, Copy, FileJson, X } from "lucide-react";
+import type { KeyboardEvent, MouseEvent } from "react";
+import { useState } from "react";
+import { getDocumentationUrl, getInstallCommand } from "../_lib/registry-service";
+import { getColor } from "./colors";
+import { ComponentStats } from "./component-stats";
+import { FileTree } from "./file-tree";
+import { Terminal } from "./terminal";
+import type { ComponentDetailsProps } from "./types";
 
 const copyToClipboard = (text: string) => {
-	navigator.clipboard.writeText(text)
-	toast({
-		title: "Copied to clipboard",
-		description: "The content has been copied to your clipboard.",
-	})
-}
+  navigator.clipboard.writeText(text);
+  toast({
+    title: "Copied to clipboard",
+    description: "The content has been copied to your clipboard.",
+  });
+};
 
 export function ComponentDetails({
-	component,
-	currentStyle = 'modern',
-	onClose,
-	installationProgress,
-	onInstall,
-	onHideInstallation,
-	currentRegistry
+  component,
+  currentStyle = "modern",
+  onClose,
+  installationProgress,
+  onInstall,
+  onHideInstallation,
+  currentRegistry,
 }: ComponentDetailsProps) {
-	const [selectedFile, setSelectedFile] = useState<string>()
-
-	const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-		if (e.key === 'Escape') {
-			onClose()
-		}
-	}
-
-	const handleCopyInstall = () => {
-		const installCommand = getInstallCommand(component, currentRegistry)
-		copyToClipboard(installCommand)
-	}
+  const [selectedFile, setSelectedFile] = useState<string>();
 
-	const handleCopyJson = () => {
-		const json = JSON.stringify(component, null, 2)
-		copyToClipboard(json)
-	}
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === "Escape") {
+      onClose();
+    }
+  };
 
-	const handleInstall = (e: MouseEvent<HTMLButtonElement>) => {
-		e.preventDefault()
-		onInstall(component)
-	}
+  const handleCopyInstall = () => {
+    const installCommand = getInstallCommand(component, currentRegistry);
+    copyToClipboard(installCommand);
+  };
 
-	return (
-		<>
-			<button
-				type="button"
-				aria-label="Close"
-				className="absolute inset-0 bg-background/50 z-40"
-				onClick={onClose}
-				onKeyDown={handleKeyDown}
-			/>
-			<motion.div
-				initial={{ opacity: 0, scale: 0.95 }}
-				animate={{ opacity: 1, scale: 1 }}
-				exit={{ opacity: 0, scale: 0.95 }}
-				transition={{ duration: 0.2, ease: "easeOut" }}
-				className={cn(
-					"fixed right-4 top-4 bottom-4 w-[600px] z-50 bg-background shadow-2xl",
-					currentStyle === 'brutalist'
-						? 'border-2 border-primary'
-						: 'border rounded-lg'
-				)}
-			>
-				<div className="flex flex-col h-full">
-					<div className="flex items-center justify-between p-4 border-b">
-						<div className="flex items-center gap-4">
-							<div className="flex items-center gap-2">
-								<div
-									className="w-2 h-2 rounded-full"
-									style={{ backgroundColor: getColor(component.registry || '') }}
-								/>
-								<h2 className="text-lg font-bold">{component.name}</h2>
-							</div>
-							<div className="flex items-center gap-2">
-								<Badge
-									variant="outline"
-									className={cn(
-										currentStyle === 'brutalist'
-											? 'border-2 border-primary rounded-none'
-											: 'border rounded-full text-xs'
-									)}
-								>
-									{component.type === 'registry:ui' ? 'Component' : 'Block'}
-								</Badge>
-								{component.categories?.map((category) => (
-									<Badge
-										key={category}
-										variant="outline"
-										className={cn(
-											currentStyle === 'brutalist'
-												? 'border-2 border-primary rounded-none'
-												: 'border rounded-full text-xs'
-										)}
-										style={{ backgroundColor: getColor(category), color: '#fff' }}
-									>
-										{category}
-									</Badge>
-								))}
-							</div>
-						</div>
-						<Button
-							variant="ghost"
-							size="icon"
-							onClick={onClose}
-							className={cn(
-								"h-8 w-8",
-								currentStyle === 'brutalist'
-									? 'hover:bg-primary/20'
-									: 'hover:bg-accent'
-							)}
-						>
-							<X className="h-4 w-4" />
-						</Button>
-					</div>
+  const handleCopyJson = () => {
+    const json = JSON.stringify(component, null, 2);
+    copyToClipboard(json);
+  };
 
-					<div className="flex items-center justify-end gap-2 p-4 border-b">
-						<TooltipProvider delayDuration={0}>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="outline"
-										size="icon"
-										className={cn(
-											"h-8 w-8",
-											currentStyle === 'brutalist'
-												? 'border-2 border-primary rounded-none'
-												: ''
-										)}
-										onClick={handleCopyInstall}
-									>
-										<Copy className="h-4 w-4" />
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>Copy Install Command</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
+  const handleInstall = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    onInstall(component);
+  };
 
-						<TooltipProvider delayDuration={0}>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="outline"
-										size="icon"
-										className={cn(
-											"h-8 w-8",
-											currentStyle === 'brutalist'
-												? 'border-2 border-primary rounded-none'
-												: ''
-										)}
-										onClick={handleCopyJson}
-									>
-										<FileJson className="h-4 w-4" />
-									</Button>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>Copy JSON</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Close"
+        className="absolute inset-0 z-40 bg-background/50"
+        onClick={onClose}
+        onKeyDown={handleKeyDown}
+      />
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+        className={cn(
+          "fixed bottom-4 right-4 top-4 z-50 w-[600px] bg-background shadow-2xl",
+          currentStyle === "brutalist" ? "border-2 border-primary" : "rounded-lg border"
+        )}
+      >
+        <div className="flex h-full flex-col">
+          <div className="flex items-center justify-between border-b p-4">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <div
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: getColor(component.registry || "") }}
+                />
+                <h2 className="text-lg font-bold">{component.name}</h2>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    currentStyle === "brutalist"
+                      ? "rounded-none border-2 border-primary"
+                      : "rounded-full border text-xs"
+                  )}
+                >
+                  {component.type === "registry:ui" ? "Component" : "Block"}
+                </Badge>
+                {component.categories?.map((category) => (
+                  <Badge
+                    key={category}
+                    variant="outline"
+                    className={cn(
+                      currentStyle === "brutalist"
+                        ? "rounded-none border-2 border-primary"
+                        : "rounded-full border text-xs"
+                    )}
+                    style={{ backgroundColor: getColor(category), color: "#fff" }}
+                  >
+                    {category}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              className={cn(
+                "h-8 w-8",
+                currentStyle === "brutalist" ? "hover:bg-primary/20" : "hover:bg-accent"
+              )}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
 
-						{getDocumentationUrl(component, currentRegistry) && (
-							<Button
-								variant="outline"
-								size="sm"
-								className={cn(
-									currentStyle === 'brutalist'
-										? 'border-2 border-primary rounded-none'
-										: ''
-								)}
-								asChild
-							>
-								<a
-									href={getDocumentationUrl(component, currentRegistry)}
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									<BookOpen className="mr-2 h-4 w-4" />
-									Documentation
-								</a>
-							</Button>
-						)}
+          <div className="flex items-center justify-end gap-2 border-b p-4">
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className={cn(
+                      "h-8 w-8",
+                      currentStyle === "brutalist" ? "rounded-none border-2 border-primary" : ""
+                    )}
+                    onClick={handleCopyInstall}
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Copy Install Command</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
 
-					</div>
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className={cn(
+                      "h-8 w-8",
+                      currentStyle === "brutalist" ? "rounded-none border-2 border-primary" : ""
+                    )}
+                    onClick={handleCopyJson}
+                  >
+                    <FileJson className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Copy JSON</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
 
-					<div className="flex-1 overflow-auto p-4">
-						<p className="text-sm text-muted-foreground mb-4">{component.description}</p>
-						<Tabs defaultValue="usage" className="flex-1 flex flex-col">
-							<TabsList className={cn(
-								"grid w-full grid-cols-4 text-sm font-medium",
-								currentStyle === 'brutalist'
-									? 'border-2 border-primary rounded-none'
-									: 'border-b border-muted-foreground'
-							)}>
-								<TabsTrigger value="usage">Usage</TabsTrigger>
-								<TabsTrigger value="code">Code</TabsTrigger>
-								<TabsTrigger value="files">Files</TabsTrigger>
-								<TabsTrigger value="preview">Preview</TabsTrigger>
-							</TabsList>
-							<div className="p-4">
-								<TabsContent value="usage" className="mt-0">
-									<Card>
-										<CardHeader>
-											<CardTitle>Usage</CardTitle>
-										</CardHeader>
-										<CardContent>
-											<Accordion type="single" collapsible className="w-full">
-												<AccordionItem value="installation">
-													<AccordionTrigger>Installation</AccordionTrigger>
-													<AccordionContent>
-														<div className="space-y-4">
-															<div>
-																<p className="mb-2">Run the following command to add this component to your project:</p>
-																<pre className={cn(
-																	"p-2",
-																	currentStyle === 'brutalist'
-																		? 'bg-muted/50 rounded-none'
-																		: 'bg-primary/10 rounded-md'
-																)}>
-																	<code>npx shadcn@latest add {component.name}</code>
-																</pre>
-															</div>
-															<div>
-																<Button
-																	type="button"
-																	variant="default"
-																	onClick={(e) => {
-																		e.preventDefault();
-																		onInstall(component);
-																	}}
-																	disabled={installationProgress.status === 'installing'}
-																>
-																	{installationProgress.status === 'installing' ? 'Installing...' : 'Install Component'}
-																</Button>
-																{installationProgress.message && (
-																	<p className={cn(
-																		"mt-2 text-sm",
-																		installationProgress.status === 'error' ? 'text-destructive' : 'text-muted-foreground'
-																	)}>
-																		{installationProgress.message}
-																	</p>
-																)}
-																{installationProgress.log && (
-																	<div className="mt-4">
-																		<Terminal
-																			output={installationProgress.log.split('\n')}
-																			className="h-[200px]"
-																		/>
-																	</div>
-																)}
-															</div>
-														</div>
-													</AccordionContent>
-												</AccordionItem>
-												<AccordionItem value="dependencies">
-													<AccordionTrigger>Dependencies</AccordionTrigger>
-													<AccordionContent>
-														{component.dependencies?.length ? (
-															<ul className="list-disc pl-4">
-																{component.dependencies.map(dep => (
-																	<li key={dep}>{dep}</li>
-																))}
-															</ul>
-														) : (
-															<p>No dependencies</p>
-														)}
-													</AccordionContent>
-												</AccordionItem>
-											</Accordion>
-										</CardContent>
-									</Card>
-								</TabsContent>
-								<TabsContent value="preview" className="mt-0">
-									<Card>
-										<CardHeader>
-											<CardTitle>Preview</CardTitle>
-										</CardHeader>
-										<CardContent>
-											<div className="text-center text-muted-foreground">
-												Preview coming soon...
-											</div>
-										</CardContent>
-									</Card>
-									<div className="mt-4">
-										<ComponentStats component={component} currentStyle={currentStyle} />
-									</div>
-								</TabsContent>
-								<TabsContent value="code" className="mt-0">
-									<Card>
-										<CardHeader>
-											<CardTitle>Code</CardTitle>
-										</CardHeader>
-										<CardContent>
-											<pre className={cn(
-												"bg-muted p-4 overflow-x-auto",
-												currentStyle === 'brutalist' ? 'rounded-none' : 'rounded-md'
-											)}>
-												<code>{JSON.stringify(component, null, 2)}</code>
-											</pre>
-										</CardContent>
-									</Card>
-								</TabsContent>
-								<TabsContent value="files" className="mt-0">
-									<Card>
-										<CardHeader>
-											<CardTitle>Files</CardTitle>
-										</CardHeader>
-										<CardContent>
-											{component.files ? (
-												<FileTree
-													files={component.files.map(file => ({
-														path: typeof file === 'string' ? file : file.path,
-														type: 'file'
-													}))}
-													selectedFile={selectedFile}
-													onFileSelect={(file) => setSelectedFile(file.path)}
-													currentStyle={currentStyle}
-												/>
-											) : (
-												<div className="text-center text-muted-foreground">
-													No files available
-												</div>
-											)}
-										</CardContent>
-									</Card>
-								</TabsContent>
+            {getDocumentationUrl(component, currentRegistry) && (
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  currentStyle === "brutalist" ? "rounded-none border-2 border-primary" : ""
+                )}
+                asChild
+              >
+                <a
+                  href={getDocumentationUrl(component, currentRegistry)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <BookOpen className="mr-2 h-4 w-4" />
+                  Documentation
+                </a>
+              </Button>
+            )}
+          </div>
 
-							</div>
-						</Tabs>
-					</div>
-				</div>
-			</motion.div>
-		</>
-	)
+          <div className="flex-1 overflow-auto p-4">
+            <p className="mb-4 text-sm text-muted-foreground">{component.description}</p>
+            <Tabs defaultValue="usage" className="flex flex-1 flex-col">
+              <TabsList
+                className={cn(
+                  "grid w-full grid-cols-4 text-sm font-medium",
+                  currentStyle === "brutalist"
+                    ? "rounded-none border-2 border-primary"
+                    : "border-b border-muted-foreground"
+                )}
+              >
+                <TabsTrigger value="usage">Usage</TabsTrigger>
+                <TabsTrigger value="code">Code</TabsTrigger>
+                <TabsTrigger value="files">Files</TabsTrigger>
+                <TabsTrigger value="preview">Preview</TabsTrigger>
+              </TabsList>
+              <div className="p-4">
+                <TabsContent value="usage" className="mt-0">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Usage</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <Accordion type="single" collapsible className="w-full">
+                        <AccordionItem value="installation">
+                          <AccordionTrigger>Installation</AccordionTrigger>
+                          <AccordionContent>
+                            <div className="space-y-4">
+                              <div>
+                                <p className="mb-2">
+                                  Run the following command to add this component to your project:
+                                </p>
+                                <pre
+                                  className={cn(
+                                    "p-2",
+                                    currentStyle === "brutalist"
+                                      ? "rounded-none bg-muted/50"
+                                      : "rounded-md bg-primary/10"
+                                  )}
+                                >
+                                  <code>npx shadcn@latest add {component.name}</code>
+                                </pre>
+                              </div>
+                              <div>
+                                <Button
+                                  type="button"
+                                  variant="default"
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    onInstall(component);
+                                  }}
+                                  disabled={installationProgress.status === "installing"}
+                                >
+                                  {installationProgress.status === "installing"
+                                    ? "Installing..."
+                                    : "Install Component"}
+                                </Button>
+                                {installationProgress.message && (
+                                  <p
+                                    className={cn(
+                                      "mt-2 text-sm",
+                                      installationProgress.status === "error"
+                                        ? "text-destructive"
+                                        : "text-muted-foreground"
+                                    )}
+                                  >
+                                    {installationProgress.message}
+                                  </p>
+                                )}
+                                {installationProgress.log && (
+                                  <div className="mt-4">
+                                    <Terminal
+                                      output={installationProgress.log.split("\n")}
+                                      className="h-[200px]"
+                                    />
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </AccordionContent>
+                        </AccordionItem>
+                        <AccordionItem value="dependencies">
+                          <AccordionTrigger>Dependencies</AccordionTrigger>
+                          <AccordionContent>
+                            {component.dependencies?.length ? (
+                              <ul className="list-disc pl-4">
+                                {component.dependencies.map((dep) => (
+                                  <li key={dep}>{dep}</li>
+                                ))}
+                              </ul>
+                            ) : (
+                              <p>No dependencies</p>
+                            )}
+                          </AccordionContent>
+                        </AccordionItem>
+                      </Accordion>
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+                <TabsContent value="preview" className="mt-0">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Preview</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="text-center text-muted-foreground">
+                        Preview coming soon...
+                      </div>
+                    </CardContent>
+                  </Card>
+                  <div className="mt-4">
+                    <ComponentStats component={component} currentStyle={currentStyle} />
+                  </div>
+                </TabsContent>
+                <TabsContent value="code" className="mt-0">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Code</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <pre
+                        className={cn(
+                          "overflow-x-auto bg-muted p-4",
+                          currentStyle === "brutalist" ? "rounded-none" : "rounded-md"
+                        )}
+                      >
+                        <code>{JSON.stringify(component, null, 2)}</code>
+                      </pre>
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+                <TabsContent value="files" className="mt-0">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Files</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      {component.files ? (
+                        <FileTree
+                          files={component.files.map((file) => ({
+                            path: typeof file === "string" ? file : file.path,
+                            type: "file",
+                          }))}
+                          selectedFile={selectedFile}
+                          onFileSelect={(file) => setSelectedFile(file.path)}
+                          currentStyle={currentStyle}
+                        />
+                      ) : (
+                        <div className="text-center text-muted-foreground">No files available</div>
+                      )}
+                    </CardContent>
+                  </Card>
+                </TabsContent>
+              </div>
+            </Tabs>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
 }
diff --git a/src/app/(app)/bones/cli-www/_components/component-stats.tsx b/src/app/(app)/bones/cli-www/_components/component-stats.tsx
index a29f3b72..1b479b9b 100644
--- a/src/app/(app)/bones/cli-www/_components/component-stats.tsx
+++ b/src/app/(app)/bones/cli-www/_components/component-stats.tsx
@@ -1,215 +1,212 @@
-'use client'
+"use client";
 
-import { Card } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
-import { cn } from '@/lib/utils'
-import { useEffect, useState } from 'react'
-import { getDependencies, getInstalledComponents } from '../_actions/registry'
-import type { RegistryItem } from '../_lib/types'
-import type { StyleMode } from './types'
+import { Card } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { getDependencies, getInstalledComponents } from "../_actions/registry";
+import type { RegistryItem } from "../_lib/types";
+import type { StyleMode } from "./types";
 
 interface ComponentStatsProps {
-	component: RegistryItem
-	currentStyle: StyleMode
+  component: RegistryItem;
+  currentStyle: StyleMode;
 }
 
 interface DependencyStats {
-	total: number
-	installed: number
-	missing: string[]
+  total: number;
+  installed: number;
+  missing: string[];
 }
 
 interface DependencyData {
-	dependencies: Record<string, string>
-	devDependencies: Record<string, string>
+  dependencies: Record<string, string>;
+  devDependencies: Record<string, string>;
 }
 
 interface Stats {
-	dependencies: DependencyStats
-	registryDependencies: DependencyStats
-	installedComponents: string[]
+  dependencies: DependencyStats;
+  registryDependencies: DependencyStats;
+  installedComponents: string[];
 }
 
 export function ComponentStats({ component, currentStyle }: ComponentStatsProps) {
-	const [stats, setStats] = useState<Stats | null>(null)
-
-	useEffect(() => {
-		const loadStats = async () => {
-			if (!component) return
-
-			try {
-				const [depsData, components] = await Promise.all([
-					getDependencies(),
-					getInstalledComponents()
-				])
-
-				const allDeps = { ...depsData.dependencies, ...depsData.devDependencies }
-
-				// Check dependencies
-				const dependencies: DependencyStats = {
-					total: component.dependencies?.length || 0,
-					installed: 0,
-					missing: []
-				}
-
-				if (component.dependencies) {
-					for (const dep of component.dependencies) {
-						const parts = dep.split('@')
-						const name = parts[0]
-						if (name && name in allDeps) {
-							dependencies.installed++
-						} else {
-							dependencies.missing.push(dep)
-						}
-					}
-				}
-
-				// Check registry dependencies
-				const registryDependencies: DependencyStats = {
-					total: component.registryDependencies?.length || 0,
-					installed: 0,
-					missing: []
-				}
-
-				if (component.registryDependencies) {
-					for (const dep of component.registryDependencies) {
-						if (components.includes(dep)) {
-							registryDependencies.installed++
-						} else {
-							registryDependencies.missing.push(dep)
-						}
-					}
-				}
-
-				setStats({
-					dependencies,
-					registryDependencies,
-					installedComponents: components
-				})
-			} catch (err) {
-				console.error('Failed to load stats:', err)
-			}
-		}
-
-		loadStats()
-	}, [component])
-
-	if (!component || !stats) {
-		return null
-	}
-
-	return (
-		<div className="grid gap-4 md:grid-cols-2">
-			{/* Dependencies */}
-			<Card className={cn(
-				"p-4",
-				currentStyle === 'brutalist'
-					? 'border-2 border-primary rounded-none'
-					: 'border rounded-md'
-			)}>
-				<h3 className="font-semibold">Dependencies</h3>
-				<div className="mt-2">
-					<div className="mb-2 flex items-center justify-between text-sm">
-						<span>
-							{stats.dependencies.installed} / {stats.dependencies.total} installed
-						</span>
-						<span className="text-muted-foreground">
-							{stats.dependencies.total
-								? Math.round(
-									(stats.dependencies.installed / stats.dependencies.total) * 100
-								)
-								: 100}
-							%
-						</span>
-					</div>
-					<Progress
-						value={stats.dependencies.total
-							? (stats.dependencies.installed / stats.dependencies.total) * 100
-							: 100}
-						className={cn(
-							currentStyle === 'brutalist'
-								? 'h-2 rounded-none'
-								: 'h-2 rounded-full'
-						)}
-					/>
-				</div>
-				{stats.dependencies.missing.length > 0 && (
-					<div className="mt-4">
-						<p className="text-sm text-muted-foreground">Missing dependencies:</p>
-						<div className="mt-1 space-x-1">
-							{stats.dependencies.missing.map(dep => (
-								<span
-									key={dep}
-									className={cn(
-										"inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-destructive",
-										currentStyle === 'brutalist'
-											? 'border-2 border-destructive rounded-none'
-											: 'border border-destructive/50 rounded-full'
-									)}
-								>
-									{dep}
-								</span>
-							))}
-						</div>
-					</div>
-				)}
-			</Card>
-
-			{/* Registry Dependencies */}
-			<Card className={cn(
-				"p-4",
-				currentStyle === 'brutalist'
-					? 'border-2 border-primary rounded-none'
-					: 'border rounded-md'
-			)}>
-				<h3 className="font-semibold">Registry Dependencies</h3>
-				<div className="mt-2">
-					<div className="mb-2 flex items-center justify-between text-sm">
-						<span>
-							{stats.registryDependencies.installed} / {stats.registryDependencies.total} installed
-						</span>
-						<span className="text-muted-foreground">
-							{stats.registryDependencies.total
-								? Math.round(
-									(stats.registryDependencies.installed / stats.registryDependencies.total) * 100
-								)
-								: 100}
-							%
-						</span>
-					</div>
-					<Progress
-						value={stats.registryDependencies.total
-							? (stats.registryDependencies.installed / stats.registryDependencies.total) * 100
-							: 100}
-						className={cn(
-							currentStyle === 'brutalist'
-								? 'h-2 rounded-none'
-								: 'h-2 rounded-full'
-						)}
-					/>
-				</div>
-				{stats.registryDependencies.missing.length > 0 && (
-					<div className="mt-4">
-						<p className="text-sm text-muted-foreground">Missing components:</p>
-						<div className="mt-1 space-x-1">
-							{stats.registryDependencies.missing.map(dep => (
-								<span
-									key={dep}
-									className={cn(
-										"inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-destructive",
-										currentStyle === 'brutalist'
-											? 'border-2 border-destructive rounded-none'
-											: 'border border-destructive/50 rounded-full'
-									)}
-								>
-									{dep}
-								</span>
-							))}
-						</div>
-					</div>
-				)}
-			</Card>
-		</div>
-	)
+  const [stats, setStats] = useState<Stats | null>(null);
+
+  useEffect(() => {
+    const loadStats = async () => {
+      if (!component) return;
+
+      try {
+        const [depsData, components] = await Promise.all([
+          getDependencies(),
+          getInstalledComponents(),
+        ]);
+
+        const allDeps = { ...depsData.dependencies, ...depsData.devDependencies };
+
+        // Check dependencies
+        const dependencies: DependencyStats = {
+          total: component.dependencies?.length || 0,
+          installed: 0,
+          missing: [],
+        };
+
+        if (component.dependencies) {
+          for (const dep of component.dependencies) {
+            const parts = dep.split("@");
+            const name = parts[0];
+            if (name && name in allDeps) {
+              dependencies.installed++;
+            } else {
+              dependencies.missing.push(dep);
+            }
+          }
+        }
+
+        // Check registry dependencies
+        const registryDependencies: DependencyStats = {
+          total: component.registryDependencies?.length || 0,
+          installed: 0,
+          missing: [],
+        };
+
+        if (component.registryDependencies) {
+          for (const dep of component.registryDependencies) {
+            if (components.includes(dep)) {
+              registryDependencies.installed++;
+            } else {
+              registryDependencies.missing.push(dep);
+            }
+          }
+        }
+
+        setStats({
+          dependencies,
+          registryDependencies,
+          installedComponents: components,
+        });
+      } catch (err) {
+        console.error("Failed to load stats:", err);
+      }
+    };
+
+    loadStats();
+  }, [component]);
+
+  if (!component || !stats) {
+    return null;
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      {/* Dependencies */}
+      <Card
+        className={cn(
+          "p-4",
+          currentStyle === "brutalist"
+            ? "rounded-none border-2 border-primary"
+            : "rounded-md border"
+        )}
+      >
+        <h3 className="font-semibold">Dependencies</h3>
+        <div className="mt-2">
+          <div className="mb-2 flex items-center justify-between text-sm">
+            <span>
+              {stats.dependencies.installed} / {stats.dependencies.total} installed
+            </span>
+            <span className="text-muted-foreground">
+              {stats.dependencies.total
+                ? Math.round((stats.dependencies.installed / stats.dependencies.total) * 100)
+                : 100}
+              %
+            </span>
+          </div>
+          <Progress
+            value={
+              stats.dependencies.total
+                ? (stats.dependencies.installed / stats.dependencies.total) * 100
+                : 100
+            }
+            className={cn(currentStyle === "brutalist" ? "h-2 rounded-none" : "h-2 rounded-full")}
+          />
+        </div>
+        {stats.dependencies.missing.length > 0 && (
+          <div className="mt-4">
+            <p className="text-sm text-muted-foreground">Missing dependencies:</p>
+            <div className="mt-1 space-x-1">
+              {stats.dependencies.missing.map((dep) => (
+                <span
+                  key={dep}
+                  className={cn(
+                    "inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-destructive",
+                    currentStyle === "brutalist"
+                      ? "rounded-none border-2 border-destructive"
+                      : "rounded-full border border-destructive/50"
+                  )}
+                >
+                  {dep}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </Card>
+
+      {/* Registry Dependencies */}
+      <Card
+        className={cn(
+          "p-4",
+          currentStyle === "brutalist"
+            ? "rounded-none border-2 border-primary"
+            : "rounded-md border"
+        )}
+      >
+        <h3 className="font-semibold">Registry Dependencies</h3>
+        <div className="mt-2">
+          <div className="mb-2 flex items-center justify-between text-sm">
+            <span>
+              {stats.registryDependencies.installed} / {stats.registryDependencies.total} installed
+            </span>
+            <span className="text-muted-foreground">
+              {stats.registryDependencies.total
+                ? Math.round(
+                    (stats.registryDependencies.installed / stats.registryDependencies.total) * 100
+                  )
+                : 100}
+              %
+            </span>
+          </div>
+          <Progress
+            value={
+              stats.registryDependencies.total
+                ? (stats.registryDependencies.installed / stats.registryDependencies.total) * 100
+                : 100
+            }
+            className={cn(currentStyle === "brutalist" ? "h-2 rounded-none" : "h-2 rounded-full")}
+          />
+        </div>
+        {stats.registryDependencies.missing.length > 0 && (
+          <div className="mt-4">
+            <p className="text-sm text-muted-foreground">Missing components:</p>
+            <div className="mt-1 space-x-1">
+              {stats.registryDependencies.missing.map((dep) => (
+                <span
+                  key={dep}
+                  className={cn(
+                    "inline-flex items-center px-2.5 py-0.5 text-xs font-semibold text-destructive",
+                    currentStyle === "brutalist"
+                      ? "rounded-none border-2 border-destructive"
+                      : "rounded-full border border-destructive/50"
+                  )}
+                >
+                  {dep}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
 }
-
diff --git a/src/app/(app)/bones/cli-www/_components/custom-install-dialog.tsx b/src/app/(app)/bones/cli-www/_components/custom-install-dialog.tsx
index 99ba324f..4ed09d3e 100644
--- a/src/app/(app)/bones/cli-www/_components/custom-install-dialog.tsx
+++ b/src/app/(app)/bones/cli-www/_components/custom-install-dialog.tsx
@@ -1,128 +1,127 @@
-'use client'
+"use client";
 
-import { Button } from '@/components/ui/button'
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from '@/components/ui/popover'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { toast } from '@/hooks/use-toast'
-import { ReloadIcon } from '@radix-ui/react-icons'
-import { Terminal as TerminalIcon } from 'lucide-react'
-import { type FormEvent, memo, useCallback, useState } from 'react'
-import { formatUrlToCommand, isValidCommand, isValidUrl } from '../_lib/registry-service'
-import type { InstallationProgress } from './types'
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "@/hooks/use-toast";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { Terminal as TerminalIcon } from "lucide-react";
+import { type FormEvent, memo, useCallback, useState } from "react";
+import { formatUrlToCommand, isValidCommand, isValidUrl } from "../_lib/registry-service";
+import type { InstallationProgress } from "./types";
 
 interface CustomInstallDialogProps {
-	onInstall: (command: string) => void
-	installationProgress: InstallationProgress
+  onInstall: (command: string) => void;
+  installationProgress: InstallationProgress;
 }
 
 export const CustomInstallDialog = memo(({ onInstall }: CustomInstallDialogProps) => {
-	const [open, setOpen] = useState(false)
-	const [input, setInput] = useState('')
-	const [loading, setLoading] = useState(false)
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
 
-	const handleSubmit = useCallback(async (e: FormEvent) => {
-		e.preventDefault()
-		setLoading(true)
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      setLoading(true);
 
-		try {
-			const trimmedInput = input.trim()
-			const finalCommand = isValidUrl(trimmedInput)
-				? formatUrlToCommand(trimmedInput)
-				: isValidCommand(trimmedInput)
-					? trimmedInput
-					: null
+      try {
+        const trimmedInput = input.trim();
+        const finalCommand = isValidUrl(trimmedInput)
+          ? formatUrlToCommand(trimmedInput)
+          : isValidCommand(trimmedInput)
+            ? trimmedInput
+            : null;
 
-			if (!finalCommand) {
-				throw new Error('Please enter a valid URL or install command')
-			}
+        if (!finalCommand) {
+          throw new Error("Please enter a valid URL or install command");
+        }
 
-			setOpen(false)
-			setInput('')
-			toast({
-				title: "Command accepted",
-				description: "Starting installation...",
-			})
-			await onInstall(finalCommand)
-		} catch (error) {
-			toast({
-				title: "Invalid input",
-				description: error instanceof Error ? error.message : "Please check the format",
-				variant: "destructive",
-			})
-		} finally {
-			setLoading(false)
-		}
-	}, [input, onInstall])
+        setOpen(false);
+        setInput("");
+        toast({
+          title: "Command accepted",
+          description: "Starting installation...",
+        });
+        await onInstall(finalCommand);
+      } catch (error) {
+        toast({
+          title: "Invalid input",
+          description: error instanceof Error ? error.message : "Please check the format",
+          variant: "destructive",
+        });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [input, onInstall]
+  );
 
-	const handleOpenChange = useCallback((isOpen: boolean) => {
-		if (!loading || !isOpen) {
-			setOpen(isOpen)
-		}
-	}, [loading])
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      if (!loading || !isOpen) {
+        setOpen(isOpen);
+      }
+    },
+    [loading]
+  );
 
-	return (
-		<Popover open={open} onOpenChange={handleOpenChange}>
-			<PopoverTrigger asChild>
-				<Button
-					variant="outline"
-					size="default"
-					className="w-full justify-start"
-					onClick={(e) => {
-						e.stopPropagation()
-						setOpen(true)
-					}}
-				>
-					<TerminalIcon className="mr-2 h-4 w-4" />
-					Install from URL or Command
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent
-				className="w-[400px] p-4"
-				onClick={(e) => e.stopPropagation()}
-			>
-				<div className="space-y-4">
-					<div className="space-y-2">
-						<h4 className="font-medium leading-none">Install Component</h4>
-						<p className="text-sm text-muted-foreground">
-							Enter any component URL or install command.
-						</p>
-					</div>
-					<form onSubmit={handleSubmit} className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor="input">URL or Command</Label>
-							<Input
-								id="input"
-								value={input}
-								onChange={(e) => setInput(e.target.value)}
-								placeholder="npx shadcn@latest add ..."
-								required
-								disabled={loading}
-							/>
-							<div className="text-xs text-muted-foreground space-y-1">
-								<p>Enter an install command or component URL...</p>
-							</div>
-						</div>
-						<div className="flex justify-end">
-							<Button type="submit" disabled={loading}>
-								{loading ? (
-									<>
-										<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
-										Installing...
-									</>
-								) : (
-									'Install'
-								)}
-							</Button>
-						</div>
-					</form>
-				</div>
-			</PopoverContent>
-		</Popover>
-	)
-})
-CustomInstallDialog.displayName = 'CustomInstallDialog'
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="default"
+          className="w-full justify-start"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          <TerminalIcon className="mr-2 h-4 w-4" />
+          Install from URL or Command
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[400px] p-4" onClick={(e) => e.stopPropagation()}>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Install Component</h4>
+            <p className="text-sm text-muted-foreground">
+              Enter any component URL or install command.
+            </p>
+          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="input">URL or Command</Label>
+              <Input
+                id="input"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="npx shadcn@latest add ..."
+                required
+                disabled={loading}
+              />
+              <div className="space-y-1 text-xs text-muted-foreground">
+                <p>Enter an install command or component URL...</p>
+              </div>
+            </div>
+            <div className="flex justify-end">
+              <Button type="submit" disabled={loading}>
+                {loading ? (
+                  <>
+                    <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+                    Installing...
+                  </>
+                ) : (
+                  "Install"
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+});
+CustomInstallDialog.displayName = "CustomInstallDialog";
diff --git a/src/app/(app)/bones/cli-www/_components/file-tree.tsx b/src/app/(app)/bones/cli-www/_components/file-tree.tsx
index df31a374..51f6cac8 100644
--- a/src/app/(app)/bones/cli-www/_components/file-tree.tsx
+++ b/src/app/(app)/bones/cli-www/_components/file-tree.tsx
@@ -112,14 +112,14 @@ function TreeNode({
           {node.type === "directory" ? (
             <>
               {isExpanded ? (
-                <ChevronDownIcon className="h-4 w-4 shrink-0 mr-1 text-muted-foreground" />
+                <ChevronDownIcon className="mr-1 h-4 w-4 shrink-0 text-muted-foreground" />
               ) : (
-                <ChevronRightIcon className="h-4 w-4 shrink-0 mr-1 text-muted-foreground" />
+                <ChevronRightIcon className="mr-1 h-4 w-4 shrink-0 text-muted-foreground" />
               )}
-              <Folder className="h-4 w-4 shrink-0 mr-1 text-muted-foreground" />
+              <Folder className="mr-1 h-4 w-4 shrink-0 text-muted-foreground" />
             </>
           ) : (
-            <File className="h-4 w-4 shrink-0 mr-1 text-muted-foreground" />
+            <File className="mr-1 h-4 w-4 shrink-0 text-muted-foreground" />
           )}
           <span className="truncate">{node.name}</span>
         </div>
@@ -142,12 +142,7 @@ function TreeNode({
   );
 }
 
-export function FileTree({
-  files,
-  onFileSelect,
-  selectedFile,
-  currentStyle,
-}: FileTreeProps) {
+export function FileTree({ files, onFileSelect, selectedFile, currentStyle }: FileTreeProps) {
   const tree = buildTree(files);
 
   return (
diff --git a/src/app/(app)/bones/cli-www/_components/preview.tsx b/src/app/(app)/bones/cli-www/_components/preview.tsx
index ba1f6609..be9fe719 100644
--- a/src/app/(app)/bones/cli-www/_components/preview.tsx
+++ b/src/app/(app)/bones/cli-www/_components/preview.tsx
@@ -1,28 +1,30 @@
-'use client'
+"use client";
 
-import { Card } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-import type { PreviewProps } from './types'
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import type { PreviewProps } from "./types";
 
 export function Preview({ component, currentStyle }: PreviewProps) {
-    return (
-        <div className={cn(
-            "w-full h-full flex items-center justify-center p-4",
-            currentStyle === 'brutalist'
-                ? 'border-2 border-primary'
-                : 'border rounded-md'
-        )}>
-            <Card className={cn(
-                "w-full h-full flex items-center justify-center",
-                currentStyle === 'brutalist'
-                    ? 'border-2 border-primary rounded-none'
-                    : 'border rounded-md'
-            )}>
-                <div className="text-center text-muted-foreground">
-                    <p>Preview not available for {component.name}</p>
-                    <p className="text-sm mt-2">Component type: {component.type}</p>
-                </div>
-            </Card>
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full items-center justify-center p-4",
+        currentStyle === "brutalist" ? "border-2 border-primary" : "rounded-md border"
+      )}
+    >
+      <Card
+        className={cn(
+          "flex h-full w-full items-center justify-center",
+          currentStyle === "brutalist"
+            ? "rounded-none border-2 border-primary"
+            : "rounded-md border"
+        )}
+      >
+        <div className="text-center text-muted-foreground">
+          <p>Preview not available for {component.name}</p>
+          <p className="mt-2 text-sm">Component type: {component.type}</p>
         </div>
-    )
+      </Card>
+    </div>
+  );
 }
diff --git a/src/app/(app)/bones/cli-www/_components/styles.ts b/src/app/(app)/bones/cli-www/_components/styles.ts
index 3a30776b..a2820828 100644
--- a/src/app/(app)/bones/cli-www/_components/styles.ts
+++ b/src/app/(app)/bones/cli-www/_components/styles.ts
@@ -1,62 +1,60 @@
 import { cva } from "class-variance-authority";
 
 export const containerStyles = cva(
-	"flex flex-col max-h-full w-full max-w-6xl mx-auto overflow-hidden text-base",
-	{
-		variants: {
-			style: {
-				brutalist:
-					"border-2 border-primary rounded-none shadow-[8px_8px_0px_0px_hsl(var(--primary)/.3)]",
-				modern: "border border-border rounded-lg shadow-md",
-				minimalist: "",
-			},
-		},
-		defaultVariants: {
-			style: "modern",
-		},
-	},
+  "flex flex-col max-h-full w-full max-w-6xl mx-auto overflow-hidden text-base",
+  {
+    variants: {
+      style: {
+        brutalist:
+          "border-2 border-primary rounded-none shadow-[8px_8px_0px_0px_hsl(var(--primary)/.3)]",
+        modern: "border border-border rounded-lg shadow-md",
+        minimalist: "",
+      },
+    },
+    defaultVariants: {
+      style: "modern",
+    },
+  }
 );
 
 export const headerStyles = cva("p-2 relative overflow-hidden", {
-	variants: {
-		style: {
-			brutalist: "border-b-4 border-primary",
-			modern: "",
-			minimalist: "",
-		},
-	},
-	defaultVariants: {
-		style: "modern",
-	},
+  variants: {
+    style: {
+      brutalist: "border-b-4 border-primary",
+      modern: "",
+      minimalist: "",
+    },
+  },
+  defaultVariants: {
+    style: "modern",
+  },
 });
 
 export const buttonStyles = cva("transition-all", {
-	variants: {
-		style: {
-			brutalist:
-				"border-2 border-primary rounded-none hover:bg-primary hover:text-primary-foreground",
-			modern:
-				"border border-border rounded-md hover:bg-accent hover:text-accent-foreground transition-colors",
-			minimalist:
-				"border-none hover:bg-accent hover:text-accent-foreground transition-colors",
-		},
-	},
-	defaultVariants: {
-		style: "modern",
-	},
+  variants: {
+    style: {
+      brutalist:
+        "border-2 border-primary rounded-none hover:bg-primary hover:text-primary-foreground",
+      modern:
+        "border border-border rounded-md hover:bg-accent hover:text-accent-foreground transition-colors",
+      minimalist: "border-none hover:bg-accent hover:text-accent-foreground transition-colors",
+    },
+  },
+  defaultVariants: {
+    style: "modern",
+  },
 });
 
 export const componentCardStyles = cva("cursor-pointer transition-all", {
-	variants: {
-		style: {
-			brutalist:
-				"hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_hsl(var(--primary))] border-2 border-primary rounded-none",
-			modern:
-				"hover:shadow-lg border border-border rounded-lg transition-shadow duration-300",
-			minimalist: "hover:bg-accent border-b border-border",
-		},
-	},
-	defaultVariants: {
-		style: "modern",
-	},
+  variants: {
+    style: {
+      brutalist:
+        "hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_hsl(var(--primary))] border-2 border-primary rounded-none",
+      modern: "hover:shadow-lg border border-border rounded-lg transition-shadow duration-300",
+      minimalist: "hover:bg-accent border-b border-border",
+    },
+  },
+  defaultVariants: {
+    style: "modern",
+  },
 });
diff --git a/src/app/(app)/bones/cli-www/_components/terminal.tsx b/src/app/(app)/bones/cli-www/_components/terminal.tsx
index f0d0f145..f6d916a3 100644
--- a/src/app/(app)/bones/cli-www/_components/terminal.tsx
+++ b/src/app/(app)/bones/cli-www/_components/terminal.tsx
@@ -1,66 +1,68 @@
-'use client'
+"use client";
 
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { cn } from '@/lib/utils'
-import Convert from 'ansi-to-html'
-import { useEffect, useMemo, useRef } from 'react'
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import Convert from "ansi-to-html";
+import { useEffect, useMemo, useRef } from "react";
 
 interface TerminalProps {
-	output: string[]
-	className?: string
+  output: string[];
+  className?: string;
 }
 
 // Clean up control sequences that ansi-to-html doesn't handle
 function cleanAnsi(text: string): string {
-	return text
-		// Remove cursor hide/show sequences
-		.replace(/\x1B\[\?25[hl]/g, '')
-		// Remove clear line and move cursor sequences
-		.replace(/\x1B\[2K/g, '')
-		.replace(/\x1B\[1G/g, '')
-		// Remove other control sequences
-		.replace(/\x1B\[\d*[ABCDEFGJKST]/g, '')
+  return (
+    text
+      // Remove cursor hide/show sequences
+      .replace(/\x1B\[\?25[hl]/g, "")
+      // Remove clear line and move cursor sequences
+      .replace(/\x1B\[2K/g, "")
+      .replace(/\x1B\[1G/g, "")
+      // Remove other control sequences
+      .replace(/\x1B\[\d*[ABCDEFGJKST]/g, "")
+  );
 }
 
 export function Terminal({ output, className }: TerminalProps) {
-	const scrollRef = useRef<HTMLDivElement>(null)
-	const convert = useMemo(
-		() =>
-			new Convert({
-				fg: '#D4D4D4',
-				bg: '#1E1E1E',
-				newline: false,
-				escapeXML: true,
-				stream: true,
-			}),
-		[]
-	)
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const convert = useMemo(
+    () =>
+      new Convert({
+        fg: "#D4D4D4",
+        bg: "#1E1E1E",
+        newline: false,
+        escapeXML: true,
+        stream: true,
+      }),
+    []
+  );
 
-	// Auto-scroll to bottom when output changes
-	useEffect(() => {
-		scrollRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
-	}, [output])
+  // Auto-scroll to bottom when output changes
+  useEffect(() => {
+    scrollRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [output]);
 
-	// Process the output to handle newlines properly
-	const processedOutput = useMemo(() => {
-		return output.join('\n').split(/\r?\n/)
-	}, [output])
+  // Process the output to handle newlines properly
+  const processedOutput = useMemo(() => {
+    return output.join("\n").split(/\r?\n/);
+  }, [output]);
 
-	return (
-		<ScrollArea className={cn('bg-[#1E1E1E] rounded-md', className)}>
-			<div className="p-4 font-mono text-sm text-[#D4D4D4] leading-5">
-				{processedOutput.map((line, i) => (
-					<div
-						key={`${i}-${line.slice(0, 20)}`}
-						className="min-h-[6px]"
-						// biome-ignore lint/security/noDangerouslySetInnerHtml: ansi-to-html escapes input (escapeXML: true); only its own color spans are injected
-						dangerouslySetInnerHTML={{
-							__html: convert.toHtml(cleanAnsi(line)) || '&nbsp;',
-						}}
-					/>
-				))}
-				<div ref={scrollRef} />
-			</div>
-		</ScrollArea>
-	)
+  return (
+    <ScrollArea className={cn("rounded-md bg-[#1E1E1E]", className)}>
+      <div className="p-4 font-mono text-sm leading-5 text-[#D4D4D4]">
+        {processedOutput.map((line, i) => (
+          <div
+            key={`${i}-${line.slice(0, 20)}`}
+            className="min-h-[6px]"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: ansi-to-html escapes input (escapeXML: true); only its own color spans are injected
+            dangerouslySetInnerHTML={{
+              __html: convert.toHtml(cleanAnsi(line)) || "&nbsp;",
+            }}
+          />
+        ))}
+        <div ref={scrollRef} />
+      </div>
+    </ScrollArea>
+  );
 }
diff --git a/src/app/(app)/bones/cli-www/_components/types.ts b/src/app/(app)/bones/cli-www/_components/types.ts
index d8416471..5d73a990 100644
--- a/src/app/(app)/bones/cli-www/_components/types.ts
+++ b/src/app/(app)/bones/cli-www/_components/types.ts
@@ -5,54 +5,54 @@ export type StyleMode = "brutalist" | "modern" | "minimalist";
 export type PreviewMode = "none" | "single" | "all";
 
 export interface ComponentCardProps {
-	component: RegistryItem;
-	currentStyle: StyleMode;
-	onOpenSidebar: (component: RegistryItem) => void;
-	showPreview?: boolean;
-	showAllVariants?: boolean;
+  component: RegistryItem;
+  currentStyle: StyleMode;
+  onOpenSidebar: (component: RegistryItem) => void;
+  showPreview?: boolean;
+  showAllVariants?: boolean;
 }
 
 export interface ActionButtonProps {
-	icon: ReactNode;
-	tooltip: string;
-	onClick: (e: MouseEvent<HTMLButtonElement>) => void;
-	currentStyle: StyleMode;
+  icon: ReactNode;
+  tooltip: string;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  currentStyle: StyleMode;
 }
 
 export interface BrowserHeaderProps {
-	currentStyle: StyleMode;
-	registries: Registry[];
-	currentRegistry?: Registry;
-	onRegistryChange: (registry: Registry) => void;
+  currentStyle: StyleMode;
+  registries: Registry[];
+  currentRegistry?: Registry;
+  onRegistryChange: (registry: Registry) => void;
 }
 
 export interface BrowserSidebarProps {
-	currentStyle: StyleMode;
-	searchTerm: string;
-	setSearchTerm: (term: string) => void;
-	filters: RegistryFilters;
-	setFilters: (filters: RegistryFilters) => void;
-	categories: string[];
-	types: string[];
+  currentStyle: StyleMode;
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+  filters: RegistryFilters;
+  setFilters: (filters: RegistryFilters) => void;
+  categories: string[];
+  types: string[];
 }
 
 export interface InstallationProgress {
-	status: "idle" | "installing" | "success" | "error";
-	message?: string;
-	log?: string;
+  status: "idle" | "installing" | "success" | "error";
+  message?: string;
+  log?: string;
 }
 
 export interface PreviewProps {
-	component: RegistryItem;
-	currentStyle: StyleMode;
+  component: RegistryItem;
+  currentStyle: StyleMode;
 }
 
 export interface ComponentDetailsProps {
-	component: RegistryItem;
-	currentStyle?: StyleMode;
-	currentRegistry?: Registry;
-	onClose: () => void;
-	installationProgress: InstallationProgress;
-	onInstall: (component: RegistryItem) => void;
-	onHideInstallation: () => void;
+  component: RegistryItem;
+  currentStyle?: StyleMode;
+  currentRegistry?: Registry;
+  onClose: () => void;
+  installationProgress: InstallationProgress;
+  onInstall: (component: RegistryItem) => void;
+  onHideInstallation: () => void;
 }
diff --git a/src/app/(app)/bones/cli-www/_hooks/use-registry.ts b/src/app/(app)/bones/cli-www/_hooks/use-registry.ts
index df965c80..c8296ce6 100644
--- a/src/app/(app)/bones/cli-www/_hooks/use-registry.ts
+++ b/src/app/(app)/bones/cli-www/_hooks/use-registry.ts
@@ -5,160 +5,152 @@ import { fetchRegistryIndex, getRegistries } from "../_lib/registry-service";
 import type { Registry, RegistryFilters, RegistryItem } from "../_lib/types";
 
 export function useRegistry() {
-	const [registries, setRegistries] = useState<Registry[]>([]);
-	const [currentRegistry, setCurrentRegistry] = useState<Registry | undefined>(
-		undefined,
-	);
-	const [items, setItems] = useState<Record<string, RegistryItem[]>>({});
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<Error | null>(null);
-	const [filters, setFilters] = useState<RegistryFilters>({
-		type: "all",
-		category: "all",
-	});
-	const [searchQuery, setSearchQuery] = useState("");
+  const [registries, setRegistries] = useState<Registry[]>([]);
+  const [currentRegistry, setCurrentRegistry] = useState<Registry | undefined>(undefined);
+  const [items, setItems] = useState<Record<string, RegistryItem[]>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [filters, setFilters] = useState<RegistryFilters>({
+    type: "all",
+    category: "all",
+  });
+  const [searchQuery, setSearchQuery] = useState("");
 
-	useEffect(() => {
-		const loadRegistries = async () => {
-			try {
-				const registries = await getRegistries();
-				setRegistries(registries);
-			} catch (error) {
-				setError(
-					error instanceof Error
-						? error
-						: new Error("Failed to load registries"),
-				);
-			}
-		};
-		loadRegistries();
-	}, []);
+  useEffect(() => {
+    const loadRegistries = async () => {
+      try {
+        const registries = await getRegistries();
+        setRegistries(registries);
+      } catch (error) {
+        setError(error instanceof Error ? error : new Error("Failed to load registries"));
+      }
+    };
+    loadRegistries();
+  }, []);
 
-	useEffect(() => {
-		const loadItems = async () => {
-			setLoading(true);
-			setError(null);
-			try {
-				if (currentRegistry) {
-					const registryItems = await fetchRegistryIndex(currentRegistry.url);
-					if (Array.isArray(registryItems) && registryItems.length > 0) {
-						setItems({
-							[currentRegistry.name]: registryItems.map((item) => ({
-								...item,
-								registry: currentRegistry.name,
-								componentUrl: `${currentRegistry.baseComponentUrl}/default/${item.name}.json`,
-							})),
-						});
-					} else {
-						// If current registry is invalid, clear it and items
-						setCurrentRegistry(undefined);
-						setItems({});
-					}
-				} else {
-					const allItems: Record<string, RegistryItem[]> = {};
+  useEffect(() => {
+    const loadItems = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        if (currentRegistry) {
+          const registryItems = await fetchRegistryIndex(currentRegistry.url);
+          if (Array.isArray(registryItems) && registryItems.length > 0) {
+            setItems({
+              [currentRegistry.name]: registryItems.map((item) => ({
+                ...item,
+                registry: currentRegistry.name,
+                componentUrl: `${currentRegistry.baseComponentUrl}/default/${item.name}.json`,
+              })),
+            });
+          } else {
+            // If current registry is invalid, clear it and items
+            setCurrentRegistry(undefined);
+            setItems({});
+          }
+        } else {
+          const allItems: Record<string, RegistryItem[]> = {};
 
-					for (const registry of registries) {
-						const items = await fetchRegistryIndex(registry.url);
-						if (Array.isArray(items) && items.length > 0) {
-							allItems[registry.name] = items.map((item) => ({
-								...item,
-								registry: registry.name,
-								componentUrl: `${registry.baseComponentUrl}/default/${item.name}.json`,
-							}));
-						}
-					}
+          for (const registry of registries) {
+            const items = await fetchRegistryIndex(registry.url);
+            if (Array.isArray(items) && items.length > 0) {
+              allItems[registry.name] = items.map((item) => ({
+                ...item,
+                registry: registry.name,
+                componentUrl: `${registry.baseComponentUrl}/default/${item.name}.json`,
+              }));
+            }
+          }
 
-					if (Object.keys(allItems).length > 0) {
-						setItems(allItems);
-					} else {
-						setItems({});
-					}
-				}
-			} catch (error) {
-				// Silently handle any remaining errors
-				setItems({});
-			} finally {
-				setLoading(false);
-			}
-		};
-		if (registries.length > 0) {
-			loadItems();
-		}
-	}, [currentRegistry, registries]);
+          if (Object.keys(allItems).length > 0) {
+            setItems(allItems);
+          } else {
+            setItems({});
+          }
+        }
+      } catch (error) {
+        // Silently handle any remaining errors
+        setItems({});
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (registries.length > 0) {
+      loadItems();
+    }
+  }, [currentRegistry, registries]);
 
-	const getCategories = () => {
-		const categories = new Set<string>();
-		for (const registryItems of Object.values(items)) {
-			for (const item of registryItems) {
-				if (item.categories) {
-					for (const category of item.categories) {
-						categories.add(category);
-					}
-				}
-			}
-		}
-		return Array.from(categories);
-	};
+  const getCategories = () => {
+    const categories = new Set<string>();
+    for (const registryItems of Object.values(items)) {
+      for (const item of registryItems) {
+        if (item.categories) {
+          for (const category of item.categories) {
+            categories.add(category);
+          }
+        }
+      }
+    }
+    return Array.from(categories);
+  };
 
-	const getTypes = () => {
-		const types = new Set<string>();
-		for (const registryItems of Object.values(items)) {
-			for (const item of registryItems) {
-				types.add(item.type);
-			}
-		}
-		return Array.from(types);
-	};
+  const getTypes = () => {
+    const types = new Set<string>();
+    for (const registryItems of Object.values(items)) {
+      for (const item of registryItems) {
+        types.add(item.type);
+      }
+    }
+    return Array.from(types);
+  };
 
-	const filteredItems = () => {
-		const allItems = Object.values(items).flat();
-		const filtered = allItems.filter((item) => {
-			// Type filter
-			if (filters.type && filters.type !== "all") {
-				if (filters.type === "components" && item.type !== "registry:ui") {
-					return false;
-				}
-				if (filters.type === "blocks" && item.type !== "registry:block") {
-					return false;
-				}
-			}
+  const filteredItems = () => {
+    const allItems = Object.values(items).flat();
+    const filtered = allItems.filter((item) => {
+      // Type filter
+      if (filters.type && filters.type !== "all") {
+        if (filters.type === "components" && item.type !== "registry:ui") {
+          return false;
+        }
+        if (filters.type === "blocks" && item.type !== "registry:block") {
+          return false;
+        }
+      }
 
-			// Category filter
-			if (filters.category && filters.category !== "all") {
-				if (!item.categories?.includes(filters.category)) {
-					return false;
-				}
-			}
+      // Category filter
+      if (filters.category && filters.category !== "all") {
+        if (!item.categories?.includes(filters.category)) {
+          return false;
+        }
+      }
 
-			// Search query
-			if (searchQuery) {
-				const searchString = `${item.name} ${item.description}`.toLowerCase();
-				return searchString.includes(searchQuery.toLowerCase());
-			}
+      // Search query
+      if (searchQuery) {
+        const searchString = `${item.name} ${item.description}`.toLowerCase();
+        return searchString.includes(searchQuery.toLowerCase());
+      }
 
-			return true;
-		});
+      return true;
+    });
 
-		// Sort by name
-		return filtered.sort((a: RegistryItem, b: RegistryItem) =>
-			a.name.localeCompare(b.name),
-		);
-	};
+    // Sort by name
+    return filtered.sort((a: RegistryItem, b: RegistryItem) => a.name.localeCompare(b.name));
+  };
 
-	return {
-		registries,
-		currentRegistry,
-		items,
-		loading,
-		error,
-		filters,
-		searchQuery,
-		setCurrentRegistry,
-		setFilters,
-		setSearchQuery,
-		getCategories,
-		getTypes,
-		setRegistries,
-		filteredItems,
-	};
+  return {
+    registries,
+    currentRegistry,
+    items,
+    loading,
+    error,
+    filters,
+    searchQuery,
+    setCurrentRegistry,
+    setFilters,
+    setSearchQuery,
+    getCategories,
+    getTypes,
+    setRegistries,
+    filteredItems,
+  };
 }
diff --git a/src/app/(app)/bones/cli-www/_lib/registry-service.ts b/src/app/(app)/bones/cli-www/_lib/registry-service.ts
index b7718aab..4818be2e 100644
--- a/src/app/(app)/bones/cli-www/_lib/registry-service.ts
+++ b/src/app/(app)/bones/cli-www/_lib/registry-service.ts
@@ -7,41 +7,39 @@ import type { Registry, RegistryFilters, RegistryItem } from "./types";
  * @see https://cli.bones.sh
  */
 const BUILT_IN_REGISTRIES = [
-	{
-		name: "ShipKit",
-		url: "https://shipkit.io/r/registry.json",
-		description:
-			"ShipKit integrations and blocks: auth, payments, email, analytics, CMS, storage and more",
-		baseComponentUrl: "https://shipkit.io/r",
-		baseBlockUrl: "https://shipkit.io/r",
-		baseDocsUrl: "https://shipkit.io/docs/features/registry",
-	},
-	{
-		name: "shadcn/ui",
-		url: "https://ui.shadcn.com/r",
-		description:
-			"Official shadcn/ui component registry with customizable components and blocks",
-		baseComponentUrl: "https://ui.shadcn.com/registry/styles",
-		baseBlockUrl: "https://ui.shadcn.com/registry/blocks",
-		baseDocsUrl: "https://ui.shadcn.com/docs/components",
-	},
-	{
-		name: "Magic UI",
-		url: "https://magicui.design/r/index.json",
-		description:
-			"Beautiful animated components and effects for modern web applications",
-		baseComponentUrl: "https://magicui.design/registry/styles",
-		baseBlockUrl: "https://magicui.design/registry/blocks",
-		baseDocsUrl: "https://magicui.design/docs/components",
-	},
-	{
-		name: "Bones Registry",
-		url: "https://cli.bones.sh",
-		description: "Community-driven component registry",
-		baseComponentUrl: "https://cli.bones.sh",
-		baseBlockUrl: "https://cli.bones.sh",
-		baseDocsUrl: "https://cli.bones.sh/docs/components",
-	},
+  {
+    name: "ShipKit",
+    url: "https://shipkit.io/r/registry.json",
+    description:
+      "ShipKit integrations and blocks: auth, payments, email, analytics, CMS, storage and more",
+    baseComponentUrl: "https://shipkit.io/r",
+    baseBlockUrl: "https://shipkit.io/r",
+    baseDocsUrl: "https://shipkit.io/docs/features/registry",
+  },
+  {
+    name: "shadcn/ui",
+    url: "https://ui.shadcn.com/r",
+    description: "Official shadcn/ui component registry with customizable components and blocks",
+    baseComponentUrl: "https://ui.shadcn.com/registry/styles",
+    baseBlockUrl: "https://ui.shadcn.com/registry/blocks",
+    baseDocsUrl: "https://ui.shadcn.com/docs/components",
+  },
+  {
+    name: "Magic UI",
+    url: "https://magicui.design/r/index.json",
+    description: "Beautiful animated components and effects for modern web applications",
+    baseComponentUrl: "https://magicui.design/registry/styles",
+    baseBlockUrl: "https://magicui.design/registry/blocks",
+    baseDocsUrl: "https://magicui.design/docs/components",
+  },
+  {
+    name: "Bones Registry",
+    url: "https://cli.bones.sh",
+    description: "Community-driven component registry",
+    baseComponentUrl: "https://cli.bones.sh",
+    baseBlockUrl: "https://cli.bones.sh",
+    baseDocsUrl: "https://cli.bones.sh/docs/components",
+  },
 ] as const;
 
 const STORAGE_KEY = "reg-browser:custom-registries";
@@ -53,26 +51,21 @@ const STORAGE_KEY = "reg-browser:custom-registries";
  *   items live at `<base>/<name>.json`
  */
 function isFlatRegistryUrl(url: string): boolean {
-	return url.endsWith("registry.json");
+  return url.endsWith("registry.json");
 }
 
 function registryIndexUrl(registryUrl: string): string {
-	const trimmed = registryUrl.replace(/\/$/, "");
-	if (isFlatRegistryUrl(trimmed) || trimmed.endsWith("index.json"))
-		return trimmed;
-	return `${trimmed}/index.json`;
+  const trimmed = registryUrl.replace(/\/$/, "");
+  if (isFlatRegistryUrl(trimmed) || trimmed.endsWith("index.json")) return trimmed;
+  return `${trimmed}/index.json`;
 }
 
 function itemsFromIndex(data: unknown): RegistryItem[] {
-	if (Array.isArray(data)) return data as RegistryItem[];
-	if (
-		data &&
-		typeof data === "object" &&
-		Array.isArray((data as { items?: unknown }).items)
-	) {
-		return (data as { items: RegistryItem[] }).items;
-	}
-	return [];
+  if (Array.isArray(data)) return data as RegistryItem[];
+  if (data && typeof data === "object" && Array.isArray((data as { items?: unknown }).items)) {
+    return (data as { items: RegistryItem[] }).items;
+  }
+  return [];
 }
 
 export type RegistryName = (typeof BUILT_IN_REGISTRIES)[number]["name"];
@@ -81,26 +74,26 @@ export type RegistryName = (typeof BUILT_IN_REGISTRIES)[number]["name"];
  * Get custom registries from local storage
  */
 function getCustomRegistries(): Registry[] {
-	if (typeof window === "undefined") return [];
-	try {
-		const stored = localStorage.getItem(STORAGE_KEY);
-		return stored ? JSON.parse(stored) : [];
-	} catch (error) {
-		console.error("Failed to parse custom registries:", error);
-		return [];
-	}
+  if (typeof window === "undefined") return [];
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch (error) {
+    console.error("Failed to parse custom registries:", error);
+    return [];
+  }
 }
 
 /**
  * Save custom registries to local storage
  */
 function saveCustomRegistries(registries: Registry[]): void {
-	if (typeof window === "undefined") return;
-	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(registries));
-	} catch (error) {
-		console.error("Failed to save custom registries:", error);
-	}
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(registries));
+  } catch (error) {
+    console.error("Failed to save custom registries:", error);
+  }
 }
 
 /**
@@ -109,7 +102,7 @@ function saveCustomRegistries(registries: Registry[]): void {
 // Async signature kept stable for callers that await this API.
 // eslint-disable-next-line @typescript-eslint/require-await
 export async function getRegistries(): Promise<Registry[]> {
-	return [...BUILT_IN_REGISTRIES, ...getCustomRegistries()];
+  return [...BUILT_IN_REGISTRIES, ...getCustomRegistries()];
 }
 
 /**
@@ -117,66 +110,66 @@ export async function getRegistries(): Promise<Registry[]> {
  * @throws Error if the registry is invalid
  */
 export async function validateRegistry(registry: Registry): Promise<void> {
-	// Check if registry with this name already exists
-	const existingRegistries = await getRegistries();
-	if (existingRegistries.some((r) => r.name === registry.name)) {
-		throw new Error(`Registry "${registry.name}" already exists`);
-	}
-
-	try {
-		const url = registryIndexUrl(registry.url);
-
-		// Try to fetch the registry index
-		const response = await fetch(url);
-		if (!response.ok) {
-			throw new Error(`Failed to fetch registry: ${response.statusText}`);
-		}
-
-		// Validate the registry structure (array, or `{ items }` from `npx shadcn build`)
-		const items = itemsFromIndex(await response.json());
-
-		// Validate at least one item has the correct structure
-		if (items.length === 0) {
-			throw new Error("Registry is empty");
-		}
-
-		const validItem = items.some(
-			(item) =>
-				typeof item === "object" &&
-				item !== null &&
-				typeof item.name === "string" &&
-				typeof item.type === "string" &&
-				(item.type === "registry:ui" || item.type === "registry:block"),
-		);
-
-		if (!validItem) {
-			throw new Error("Registry does not contain valid components");
-		}
-	} catch (error) {
-		if (error instanceof Error) {
-			throw error;
-		}
-		throw new Error("Failed to validate registry");
-	}
+  // Check if registry with this name already exists
+  const existingRegistries = await getRegistries();
+  if (existingRegistries.some((r) => r.name === registry.name)) {
+    throw new Error(`Registry "${registry.name}" already exists`);
+  }
+
+  try {
+    const url = registryIndexUrl(registry.url);
+
+    // Try to fetch the registry index
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch registry: ${response.statusText}`);
+    }
+
+    // Validate the registry structure (array, or `{ items }` from `npx shadcn build`)
+    const items = itemsFromIndex(await response.json());
+
+    // Validate at least one item has the correct structure
+    if (items.length === 0) {
+      throw new Error("Registry is empty");
+    }
+
+    const validItem = items.some(
+      (item) =>
+        typeof item === "object" &&
+        item !== null &&
+        typeof item.name === "string" &&
+        typeof item.type === "string" &&
+        (item.type === "registry:ui" || item.type === "registry:block")
+    );
+
+    if (!validItem) {
+      throw new Error("Registry does not contain valid components");
+    }
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error("Failed to validate registry");
+  }
 }
 
 /**
  * Add a custom registry
  */
 export async function addCustomRegistry(registry: Registry): Promise<void> {
-	await validateRegistry(registry);
-	const customRegistries = getCustomRegistries();
-	customRegistries.push(registry);
-	saveCustomRegistries(customRegistries);
+  await validateRegistry(registry);
+  const customRegistries = getCustomRegistries();
+  customRegistries.push(registry);
+  saveCustomRegistries(customRegistries);
 }
 
 /**
  * Remove a custom registry
  */
 export function removeCustomRegistry(name: string): void {
-	const customRegistries = getCustomRegistries();
-	const filtered = customRegistries.filter((r) => r.name !== name);
-	saveCustomRegistries(filtered);
+  const customRegistries = getCustomRegistries();
+  const filtered = customRegistries.filter((r) => r.name !== name);
+  saveCustomRegistries(filtered);
 }
 
 /**
@@ -184,201 +177,187 @@ export function removeCustomRegistry(name: string): void {
  */
 // eslint-disable-next-line @typescript-eslint/require-await
 export async function getRegistry(name: RegistryName): Promise<Registry> {
-	const registry = [...BUILT_IN_REGISTRIES, ...getCustomRegistries()].find(
-		(r) => r.name === name,
-	);
-	if (!registry) {
-		throw new Error(`Registry ${name} not found`);
-	}
-	return registry;
+  const registry = [...BUILT_IN_REGISTRIES, ...getCustomRegistries()].find((r) => r.name === name);
+  if (!registry) {
+    throw new Error(`Registry ${name} not found`);
+  }
+  return registry;
 }
 
 /**
  * Fetch registry index with error handling and caching
  */
-export async function fetchRegistryIndex(
-	registryUrl: string,
-): Promise<RegistryItem[]> {
-	const url = new URL(registryIndexUrl(registryUrl));
-
-	try {
-		const response = await fetch(url, {
-			next: { revalidate: 3600 }, // Cache for 1 hour
-		}).catch((error) => {
-			console.error(`Failed to fetch registry index from ${url}:`, error);
-			return;
-		});
-
-		if (!response) {
-			return [];
-		}
-
-		return itemsFromIndex(await response.json());
-	} catch (_error) {
-		return [];
-	}
+export async function fetchRegistryIndex(registryUrl: string): Promise<RegistryItem[]> {
+  const url = new URL(registryIndexUrl(registryUrl));
+
+  try {
+    const response = await fetch(url, {
+      next: { revalidate: 3600 }, // Cache for 1 hour
+    }).catch((error) => {
+      console.error(`Failed to fetch registry index from ${url}:`, error);
+      return;
+    });
+
+    if (!response) {
+      return [];
+    }
+
+    return itemsFromIndex(await response.json());
+  } catch (_error) {
+    return [];
+  }
 }
 
 /**
  * Fetch item details with error handling and caching
  */
 export async function fetchItemDetails(
-	baseUrl: string,
-	itemName: string,
-	style = "default",
+  baseUrl: string,
+  itemName: string,
+  style = "default"
 ): Promise<RegistryItem> {
-	const detailsUrl = isFlatRegistryUrl(baseUrl)
-		? new URL(`${baseUrl.replace(/\/registry\.json$/, "")}/${itemName}.json`)
-		: new URL(
-				`${baseUrl.replace(/\/index\.json$/, "")}/styles/${style}/${itemName}.json`,
-			);
-
-	try {
-		const response = await fetch(detailsUrl, {
-			next: { revalidate: 3600 }, // Cache for 1 hour
-		});
-
-		if (!response.ok) {
-			throw new Error(`Failed to fetch item details: ${response.statusText}`);
-		}
-
-		const data = await response.json();
-		return {
-			...data,
-			componentUrl: detailsUrl.toString(),
-		};
-	} catch (error) {
-		console.error(`Failed to fetch item details from ${detailsUrl}:`, error);
-		throw error;
-	}
+  const detailsUrl = isFlatRegistryUrl(baseUrl)
+    ? new URL(`${baseUrl.replace(/\/registry\.json$/, "")}/${itemName}.json`)
+    : new URL(`${baseUrl.replace(/\/index\.json$/, "")}/styles/${style}/${itemName}.json`);
+
+  try {
+    const response = await fetch(detailsUrl, {
+      next: { revalidate: 3600 }, // Cache for 1 hour
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch item details: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return {
+      ...data,
+      componentUrl: detailsUrl.toString(),
+    };
+  } catch (error) {
+    console.error(`Failed to fetch item details from ${detailsUrl}:`, error);
+    throw error;
+  }
 }
 
 /**
  * Categorize items by type (Components/Blocks)
  */
-export function categorizeItems(
-	items: RegistryItem[],
-): Record<string, RegistryItem[]> {
-	return items.reduce(
-		(acc, item) => {
-			const category = item.type === "registry:block" ? "Blocks" : "Components";
-			acc[category] ??= [];
-			acc[category].push(item);
-			return acc;
-		},
-		{} as Record<string, RegistryItem[]>,
-	);
+export function categorizeItems(items: RegistryItem[]): Record<string, RegistryItem[]> {
+  return items.reduce(
+    (acc, item) => {
+      const category = item.type === "registry:block" ? "Blocks" : "Components";
+      acc[category] ??= [];
+      acc[category].push(item);
+      return acc;
+    },
+    {} as Record<string, RegistryItem[]>
+  );
 }
 
 /**
  * Group items by their categories
  */
-export function groupItemsByType(
-	items: RegistryItem[],
-): Record<string, RegistryItem[]> {
-	return items.reduce(
-		(acc, item) => {
-			const categories = item.categories ?? ["Uncategorized"];
-			for (const category of categories) {
-				acc[category] ??= [];
-				acc[category].push(item);
-			}
-			return acc;
-		},
-		{} as Record<string, RegistryItem[]>,
-	);
+export function groupItemsByType(items: RegistryItem[]): Record<string, RegistryItem[]> {
+  return items.reduce(
+    (acc, item) => {
+      const categories = item.categories ?? ["Uncategorized"];
+      for (const category of categories) {
+        acc[category] ??= [];
+        acc[category].push(item);
+      }
+      return acc;
+    },
+    {} as Record<string, RegistryItem[]>
+  );
 }
 
 /**
  * Search and filter items
  */
 export function searchItems(
-	items: RegistryItem[] | Record<string, RegistryItem[]>,
-	query = "",
-	filters: RegistryFilters = {},
+  items: RegistryItem[] | Record<string, RegistryItem[]>,
+  query = "",
+  filters: RegistryFilters = {}
 ): RegistryItem[] {
-	// Convert items object to array if needed
-	const itemsArray = Array.isArray(items) ? items : Object.values(items).flat();
-
-	return itemsArray.filter((item) => {
-		// Type filter
-		if (filters.type && filters.type !== "all") {
-			if (filters.type === "components" && item.type !== "registry:ui") {
-				return false;
-			}
-			if (filters.type === "blocks" && item.type !== "registry:block") {
-				return false;
-			}
-		}
-
-		// Category filter
-		if (filters.category && filters.category !== "all") {
-			if (!item.categories?.includes(filters.category)) {
-				return false;
-			}
-		}
-
-		// Search query
-		if (query) {
-			const searchString = `${item.name} ${item.description}`.toLowerCase();
-			return searchString.includes(query.toLowerCase());
-		}
-
-		return true;
-	});
+  // Convert items object to array if needed
+  const itemsArray = Array.isArray(items) ? items : Object.values(items).flat();
+
+  return itemsArray.filter((item) => {
+    // Type filter
+    if (filters.type && filters.type !== "all") {
+      if (filters.type === "components" && item.type !== "registry:ui") {
+        return false;
+      }
+      if (filters.type === "blocks" && item.type !== "registry:block") {
+        return false;
+      }
+    }
+
+    // Category filter
+    if (filters.category && filters.category !== "all") {
+      if (!item.categories?.includes(filters.category)) {
+        return false;
+      }
+    }
+
+    // Search query
+    if (query) {
+      const searchString = `${item.name} ${item.description}`.toLowerCase();
+      return searchString.includes(query.toLowerCase());
+    }
+
+    return true;
+  });
 }
 
 /**
  * Get the install command for a component
  * @see https://ui.shadcn.com/docs/cli
  */
-export function getInstallCommand(
-	component: RegistryItem,
-	registry?: Registry,
-) {
-	const componentUrl =
-		component.componentUrl ??
-		`${registry?.baseComponentUrl}/default/${component.name}.json`;
-	return `npx shadcn@latest add "${componentUrl}"`;
+export function getInstallCommand(component: RegistryItem, registry?: Registry) {
+  const componentUrl =
+    component.componentUrl ?? `${registry?.baseComponentUrl}/default/${component.name}.json`;
+  return `npx shadcn@latest add "${componentUrl}"`;
 }
 
 /**
  * Get the documentation URL for a component
  */
 export function getDocumentationUrl(
-	component: RegistryItem,
-	registry?: Registry,
+  component: RegistryItem,
+  registry?: Registry
 ): string | undefined {
-	if (!registry?.baseDocsUrl) return undefined;
-	return `${registry.baseDocsUrl}/${component.name}`;
+  if (!registry?.baseDocsUrl) return undefined;
+  return `${registry.baseDocsUrl}/${component.name}`;
 }
 
 /**
  * Validate if a string is a URL
  */
 export function isValidUrl(str: string): boolean {
-	try {
-		new URL(str.trim());
-		return true;
-	} catch {
-		return false;
-	}
+  try {
+    new URL(str.trim());
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 /**
  * Validate if a string is a valid install command
  */
 export function isValidCommand(str: string): boolean {
-	const commandPatterns = [
-		/^(npx|pnpm dlx|bunx --bun) shadcn@latest add/,
-		/^(npx|pnpm dlx|bunx --bun) shadcn@latest add "https?:\/\/[^"]+"/,
-	];
-	return commandPatterns.some((pattern) => pattern.test(str.trim()));
+  const commandPatterns = [
+    /^(npx|pnpm dlx|bunx --bun) shadcn@latest add/,
+    /^(npx|pnpm dlx|bunx --bun) shadcn@latest add "https?:\/\/[^"]+"/,
+  ];
+  return commandPatterns.some((pattern) => pattern.test(str.trim()));
 }
 
 /**
  * Format a URL into a valid install command
  */
 export function formatUrlToCommand(url: string): string {
-	return `npx shadcn@latest add "${url.trim()}"`;
+  return `npx shadcn@latest add "${url.trim()}"`;
 }
diff --git a/src/app/(app)/bones/cli-www/_lib/types.ts b/src/app/(app)/bones/cli-www/_lib/types.ts
index 96b274ad..c479a5b7 100644
--- a/src/app/(app)/bones/cli-www/_lib/types.ts
+++ b/src/app/(app)/bones/cli-www/_lib/types.ts
@@ -4,62 +4,54 @@
  */
 
 export interface Registry {
-	name: string;
-	url: string;
-	description?: string;
-	baseComponentUrl: string;
-	baseBlockUrl: string;
-	baseDocsUrl: string;
-	custom?: boolean;
+  name: string;
+  url: string;
+  description?: string;
+  baseComponentUrl: string;
+  baseBlockUrl: string;
+  baseDocsUrl: string;
+  custom?: boolean;
 }
 
 export interface RegistryItem {
-	name: string;
-	type:
-	| "registry:block"
-	| "registry:ui"
-	| "registry:hook"
-	| "registry:lib"
-	| "registry:component"
-	| "registry:theme"
-	| "registry:page";
-	description?: string;
-	dependencies?: string[];
-	categories?: string[];
-	componentUrl?: string;
-	style?: string;
-	files?: Array<{
-		path: string;
-		content?: string;
-		type?:
-		| "preview"
-		| "ui"
-		| "block"
-		| "hook"
-		| "lib"
-		| "component"
-		| "theme"
-		| "page";
-		target?: string;
-	}>;
-	registryDependencies?: string[];
-	registry?: string;
-	meta?: {
-		library?: string;
-		hasPreview?: boolean;
-		[key: string]: any;
-	};
+  name: string;
+  type:
+    | "registry:block"
+    | "registry:ui"
+    | "registry:hook"
+    | "registry:lib"
+    | "registry:component"
+    | "registry:theme"
+    | "registry:page";
+  description?: string;
+  dependencies?: string[];
+  categories?: string[];
+  componentUrl?: string;
+  style?: string;
+  files?: Array<{
+    path: string;
+    content?: string;
+    type?: "preview" | "ui" | "block" | "hook" | "lib" | "component" | "theme" | "page";
+    target?: string;
+  }>;
+  registryDependencies?: string[];
+  registry?: string;
+  meta?: {
+    library?: string;
+    hasPreview?: boolean;
+    [key: string]: any;
+  };
 }
 
 export interface RegistryFilters {
-	type?: "all" | "components" | "blocks";
-	category?: string;
-	style?: string;
+  type?: "all" | "components" | "blocks";
+  category?: string;
+  style?: string;
 }
 
 export interface InstallOptions {
-	overwrite?: boolean;
-	style?: string;
-	typescript?: boolean;
-	path?: string;
+  overwrite?: boolean;
+  style?: string;
+  typescript?: boolean;
+  path?: string;
 }
diff --git a/src/app/(app)/bones/cli-www/page.tsx b/src/app/(app)/bones/cli-www/page.tsx
index 82fe2595..5d6862a8 100644
--- a/src/app/(app)/bones/cli-www/page.tsx
+++ b/src/app/(app)/bones/cli-www/page.tsx
@@ -8,9 +8,7 @@ const spaceGrotesk = Space_Grotesk({
 
 export default function Page() {
   return (
-    <div
-      className={`p-6 ${spaceGrotesk.className} grid place-items-center h-screen max-h-screen`}
-    >
+    <div className={`p-6 ${spaceGrotesk.className} grid h-screen max-h-screen place-items-center`}>
       <ComponentBrowser />
     </div>
   );
diff --git a/src/app/(app)/changelog/[...slug]/layout.tsx b/src/app/(app)/changelog/[...slug]/layout.tsx
index 97da9825..b571ba08 100644
--- a/src/app/(app)/changelog/[...slug]/layout.tsx
+++ b/src/app/(app)/changelog/[...slug]/layout.tsx
@@ -3,8 +3,8 @@ import type { ReactNode } from "react";
 import { getChangelogEntry, isLegacyUnreleasedSlug, UNRELEASED_SLUG } from "@/lib/changelog";
 
 interface Props {
-	children: ReactNode;
-	params: Promise<{ slug: string[] }>;
+  children: ReactNode;
+  params: Promise<{ slug: string[] }>;
 }
 
 /**
@@ -20,12 +20,12 @@ interface Props {
  * still carry those slugs. They redirect to the stable slug instead of 404ing.
  */
 export default async function ChangelogEntryLayout({ children, params }: Props) {
-	const { slug } = await params;
-	const key = slug.join("/");
-	const entry = await getChangelogEntry(key);
-	if (!entry) {
-		if (isLegacyUnreleasedSlug(key)) permanentRedirect(`/changelog/${UNRELEASED_SLUG}`);
-		notFound();
-	}
-	return children;
+  const { slug } = await params;
+  const key = slug.join("/");
+  const entry = await getChangelogEntry(key);
+  if (!entry) {
+    if (isLegacyUnreleasedSlug(key)) permanentRedirect(`/changelog/${UNRELEASED_SLUG}`);
+    notFound();
+  }
+  return children;
 }
diff --git a/src/app/(app)/changelog/[...slug]/page.tsx b/src/app/(app)/changelog/[...slug]/page.tsx
index 21f0a9bf..d1081d9f 100644
--- a/src/app/(app)/changelog/[...slug]/page.tsx
+++ b/src/app/(app)/changelog/[...slug]/page.tsx
@@ -52,7 +52,7 @@ export default async function ChangelogEntryPage({ params }: Props) {
   const displayDate = formatDate(entry.publishedAt);
 
   return (
-    <div className="w-full max-w-3xl mx-auto">
+    <div className="mx-auto w-full max-w-3xl">
       <Link
         href="/changelog"
         className={cn(
@@ -66,7 +66,7 @@ export default async function ChangelogEntryPage({ params }: Props) {
 
       <article>
         <header className="mb-8 border-b pb-6">
-          <div className="flex items-center gap-3 mb-2">
+          <div className="mb-2 flex items-center gap-3">
             {entry.badge && (
               <Badge variant="secondary" className="font-mono">
                 {entry.badge}
@@ -88,7 +88,7 @@ export default async function ChangelogEntryPage({ params }: Props) {
           )}
         </header>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
+        <div className="prose prose-neutral max-w-none dark:prose-invert">
           <ReactMarkdown remarkPlugins={[remarkGfm]}>{entry.content}</ReactMarkdown>
         </div>
       </article>
diff --git a/src/app/(app)/changelog/_components/changelog-entries.tsx b/src/app/(app)/changelog/_components/changelog-entries.tsx
index 836dd04f..05979569 100644
--- a/src/app/(app)/changelog/_components/changelog-entries.tsx
+++ b/src/app/(app)/changelog/_components/changelog-entries.tsx
@@ -11,55 +11,55 @@ import { formatDate } from "@/lib/utils/format-date";
  * into a soft 404.
  */
 export async function ChangelogEntries() {
-	const entries = await getChangelogEntries();
+  const entries = await getChangelogEntries();
 
-	if (entries.length === 0) {
-		return <p className="text-muted-foreground">No changelog entries yet. Check back soon.</p>;
-	}
+  if (entries.length === 0) {
+    return <p className="text-muted-foreground">No changelog entries yet. Check back soon.</p>;
+  }
 
-	return (
-		<div className="relative space-y-0">
-			<div className="absolute left-[7px] top-2 bottom-2 w-px bg-border" />
+  return (
+    <div className="relative space-y-0">
+      <div className="absolute bottom-2 left-[7px] top-2 w-px bg-border" />
 
-			{entries.map((entry) => {
-				const date = formatDate(entry.publishedAt);
-				return (
-					<div key={entry.slug} className="relative pl-8 pb-10">
-						<div className="absolute left-0 top-1.5 h-[15px] w-[15px] rounded-full border-2 border-primary bg-background" />
+      {entries.map((entry) => {
+        const date = formatDate(entry.publishedAt);
+        return (
+          <div key={entry.slug} className="relative pb-10 pl-8">
+            <div className="absolute left-0 top-1.5 h-[15px] w-[15px] rounded-full border-2 border-primary bg-background" />
 
-						<div className="flex items-center gap-3 mb-1">
-							{entry.badge && (
-								<Badge variant="secondary" className="text-xs font-mono">
-									{entry.badge}
-								</Badge>
-							)}
-							{date && <span className="text-sm text-muted-foreground">{date}</span>}
-							<span className="text-xs text-muted-foreground">
-								{entry.commitCount} commit
-								{entry.commitCount !== 1 ? "s" : ""}
-							</span>
-						</div>
+            <div className="mb-1 flex items-center gap-3">
+              {entry.badge && (
+                <Badge variant="secondary" className="font-mono text-xs">
+                  {entry.badge}
+                </Badge>
+              )}
+              {date && <span className="text-sm text-muted-foreground">{date}</span>}
+              <span className="text-xs text-muted-foreground">
+                {entry.commitCount} commit
+                {entry.commitCount !== 1 ? "s" : ""}
+              </span>
+            </div>
 
-						<Link href={`/changelog/${entry.slug}`} className="group">
-							<h2 className="text-xl font-semibold group-hover:text-primary transition-colors">
-								{entry.title}
-							</h2>
-						</Link>
+            <Link href={`/changelog/${entry.slug}`} className="group">
+              <h2 className="text-xl font-semibold transition-colors group-hover:text-primary">
+                {entry.title}
+              </h2>
+            </Link>
 
-						{entry.description && <p className="mt-1 text-muted-foreground">{entry.description}</p>}
+            {entry.description && <p className="mt-1 text-muted-foreground">{entry.description}</p>}
 
-						{entry.categories.length > 0 && (
-							<div className="flex gap-1.5 mt-2 flex-wrap">
-								{entry.categories.map((cat) => (
-									<Badge key={cat} variant="outline" className="text-[10px] px-1.5 py-0">
-										{cat}
-									</Badge>
-								))}
-							</div>
-						)}
-					</div>
-				);
-			})}
-		</div>
-	);
+            {entry.categories.length > 0 && (
+              <div className="mt-2 flex flex-wrap gap-1.5">
+                {entry.categories.map((cat) => (
+                  <Badge key={cat} variant="outline" className="px-1.5 py-0 text-[10px]">
+                    {cat}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
 }
diff --git a/src/app/(app)/changelog/layout.tsx b/src/app/(app)/changelog/layout.tsx
index fa1d87d8..1286c05e 100644
--- a/src/app/(app)/changelog/layout.tsx
+++ b/src/app/(app)/changelog/layout.tsx
@@ -1,9 +1,5 @@
 import type { ReactNode } from "react";
 
 export default function ChangelogLayout({ children }: { children: ReactNode }) {
-  return (
-    <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
-      {children}
-    </div>
-  );
+  return <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">{children}</div>;
 }
diff --git a/src/app/(app)/changelog/page.tsx b/src/app/(app)/changelog/page.tsx
index e3903609..bf683c46 100644
--- a/src/app/(app)/changelog/page.tsx
+++ b/src/app/(app)/changelog/page.tsx
@@ -9,18 +9,18 @@ export const revalidate = 3600;
 export const metadata: Metadata = constructMetadata(routeMetadata.changelog);
 
 export default function ChangelogPage() {
-	return (
-		<div className="w-full max-w-3xl mx-auto">
-			<header className="mb-12">
-				<h1 className="text-4xl font-bold tracking-tight">Changelog</h1>
-				<p className="mt-2 text-lg text-muted-foreground">New updates, features, and fixes.</p>
-			</header>
+  return (
+    <div className="mx-auto w-full max-w-3xl">
+      <header className="mb-12">
+        <h1 className="text-4xl font-bold tracking-tight">Changelog</h1>
+        <p className="mt-2 text-lg text-muted-foreground">New updates, features, and fixes.</p>
+      </header>
 
-			{/* In-page Suspense keeps the skeleton without a segment loading.tsx,
+      {/* In-page Suspense keeps the skeleton without a segment loading.tsx,
 			    which would also wrap [...slug] and break its 404 status. */}
-			<Suspense fallback={<BlogPostListSkeleton count={5} />}>
-				<ChangelogEntries />
-			</Suspense>
-		</div>
-	);
+      <Suspense fallback={<BlogPostListSkeleton count={5} />}>
+        <ChangelogEntries />
+      </Suspense>
+    </div>
+  );
 }
diff --git a/src/app/(app)/cli/_components/install-section.tsx b/src/app/(app)/cli/_components/install-section.tsx
index c47b56a1..26d0e106 100644
--- a/src/app/(app)/cli/_components/install-section.tsx
+++ b/src/app/(app)/cli/_components/install-section.tsx
@@ -126,11 +126,7 @@ export function InstallSection() {
             onClick={copyToClipboard}
             className="grow bg-blue-600 text-white hover:bg-blue-700"
           >
-            {copied ? (
-              <Check className="mr-2 h-4 w-4" />
-            ) : (
-              <Copy className="mr-2 h-4 w-4" />
-            )}
+            {copied ? <Check className="mr-2 h-4 w-4" /> : <Copy className="mr-2 h-4 w-4" />}
             {copied ? "Copied!" : "Copy Command"}
           </Button>
 
diff --git a/src/app/(app)/cli/page.tsx b/src/app/(app)/cli/page.tsx
index a9b5fbf6..42668a7d 100644
--- a/src/app/(app)/cli/page.tsx
+++ b/src/app/(app)/cli/page.tsx
@@ -5,29 +5,29 @@ import Link from "next/link";
 import { InstallSection } from "./_components/install-section";
 
 export default function Home() {
-	return (
-		<div className="flex min-h-screen flex-col">
-			<main className="container grow">
-				<div className="mx-auto max-w-screen-sm">
-					<InstallSection />
+  return (
+    <div className="flex min-h-screen flex-col">
+      <main className="container grow">
+        <div className="mx-auto max-w-screen-sm">
+          <InstallSection />
 
-					<div className="mt-10 space-y-10">
-						<p className="text-muted-foreground [&>a]:font-medium [&>a]:text-blue-400 [&>a]:underline">
-							Run this command in your Next.js project after setting up{" "}
-							<Link href={"https://ui.shadcn.com/docs/"}>ShadCN UI</Link>.
-							<br />
-							The Next.js starter for Shadcn/UI is{" "}
-							<Link href={routes.external.bones}>Shipkit Bones</Link>.
-						</p>
-						<Link
-							href={routes.external.shipkit}
-							className={cn(buttonVariants({ variant: "link" }), "px-0")}
-						>
-							Get more components and ship even faster with Shipkit.
-						</Link>
-					</div>
-				</div>
-			</main>
-		</div>
-	);
+          <div className="mt-10 space-y-10">
+            <p className="text-muted-foreground [&>a]:font-medium [&>a]:text-blue-400 [&>a]:underline">
+              Run this command in your Next.js project after setting up{" "}
+              <Link href={"https://ui.shadcn.com/docs/"}>ShadCN UI</Link>.
+              <br />
+              The Next.js starter for Shadcn/UI is{" "}
+              <Link href={routes.external.bones}>Shipkit Bones</Link>.
+            </p>
+            <Link
+              href={routes.external.shipkit}
+              className={cn(buttonVariants({ variant: "link" }), "px-0")}
+            >
+              Get more components and ship even faster with Shipkit.
+            </Link>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
 }
diff --git a/src/app/(app)/contact/page.tsx b/src/app/(app)/contact/page.tsx
index ab1d21b8..5bd50545 100644
--- a/src/app/(app)/contact/page.tsx
+++ b/src/app/(app)/contact/page.tsx
@@ -26,7 +26,7 @@ export default function ContactPage() {
       <div className="relative z-10 mx-auto flex min-h-screen max-w-7xl flex-col items-center justify-center px-4 py-20">
         <Link
           href={routes.home}
-          className="absolute left-4 top-6 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          className="absolute left-4 top-6 inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" />
           Home
diff --git a/src/app/(app)/global-error.tsx b/src/app/(app)/global-error.tsx
index acf0f695..c6a70797 100644
--- a/src/app/(app)/global-error.tsx
+++ b/src/app/(app)/global-error.tsx
@@ -10,85 +10,85 @@
 import type { CSSProperties } from "react";
 
 interface GlobalErrorProps {
-	error: Error & { digest?: string };
-	reset: () => void;
+  error: Error & { digest?: string };
+  reset: () => void;
 }
 
 const styles = {
-	body: {
-		margin: 0,
-		minHeight: "100vh",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		padding: "2rem",
-		background: "#fafafa",
-		color: "#171717",
-		fontFamily:
-			'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-		textAlign: "center",
-		WebkitFontSmoothing: "antialiased",
-	},
-	card: { maxWidth: "28rem" },
-	title: { fontSize: "1.75rem", fontWeight: 600, letterSpacing: "-0.01em", margin: "0 0 0.75rem" },
-	text: { color: "#525252", lineHeight: 1.6, margin: "0 0 1.5rem" },
-	actions: { display: "flex", flexWrap: "wrap", gap: "0.75rem", justifyContent: "center" },
-	primary: {
-		background: "#171717",
-		color: "#fafafa",
-		border: "1px solid #171717",
-		borderRadius: "0.5rem",
-		padding: "0.6rem 1.1rem",
-		fontSize: "0.9rem",
-		fontWeight: 500,
-		cursor: "pointer",
-	},
-	secondary: {
-		display: "inline-block",
-		background: "#fff",
-		color: "#171717",
-		border: "1px solid #d4d4d4",
-		borderRadius: "0.5rem",
-		padding: "0.6rem 1.1rem",
-		fontSize: "0.9rem",
-		fontWeight: 500,
-		textDecoration: "none",
-	},
-	meta: { fontSize: "0.75rem", color: "#737373", marginTop: "1.5rem" },
-	pre: {
-		marginTop: "1.5rem",
-		padding: "0.75rem",
-		background: "#f5f5f5",
-		borderRadius: "0.5rem",
-		fontSize: "0.75rem",
-		textAlign: "left",
-		overflow: "auto",
-	},
+  body: {
+    margin: 0,
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    background: "#fafafa",
+    color: "#171717",
+    fontFamily:
+      'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    textAlign: "center",
+    WebkitFontSmoothing: "antialiased",
+  },
+  card: { maxWidth: "28rem" },
+  title: { fontSize: "1.75rem", fontWeight: 600, letterSpacing: "-0.01em", margin: "0 0 0.75rem" },
+  text: { color: "#525252", lineHeight: 1.6, margin: "0 0 1.5rem" },
+  actions: { display: "flex", flexWrap: "wrap", gap: "0.75rem", justifyContent: "center" },
+  primary: {
+    background: "#171717",
+    color: "#fafafa",
+    border: "1px solid #171717",
+    borderRadius: "0.5rem",
+    padding: "0.6rem 1.1rem",
+    fontSize: "0.9rem",
+    fontWeight: 500,
+    cursor: "pointer",
+  },
+  secondary: {
+    display: "inline-block",
+    background: "#fff",
+    color: "#171717",
+    border: "1px solid #d4d4d4",
+    borderRadius: "0.5rem",
+    padding: "0.6rem 1.1rem",
+    fontSize: "0.9rem",
+    fontWeight: 500,
+    textDecoration: "none",
+  },
+  meta: { fontSize: "0.75rem", color: "#737373", marginTop: "1.5rem" },
+  pre: {
+    marginTop: "1.5rem",
+    padding: "0.75rem",
+    background: "#f5f5f5",
+    borderRadius: "0.5rem",
+    fontSize: "0.75rem",
+    textAlign: "left",
+    overflow: "auto",
+  },
 } satisfies Record<string, CSSProperties>;
 
 export default function GlobalError({ error, reset }: GlobalErrorProps) {
-	const isDevelopment = process.env.NODE_ENV === "development";
+  const isDevelopment = process.env.NODE_ENV === "development";
 
-	return (
-		<html lang="en" suppressHydrationWarning>
-			<body style={styles.body}>
-				<main style={styles.card}>
-					<h1 style={styles.title}>Something went wrong</h1>
-					<p style={styles.text}>
-						The rest of the site is working. Try again, or head back to the homepage.
-					</p>
-					<div style={styles.actions}>
-						<button type="button" onClick={reset} style={styles.primary}>
-							Try again
-						</button>
-						<a href="/" style={styles.secondary}>
-							Go to homepage
-						</a>
-					</div>
-					{error.digest && !isDevelopment && <p style={styles.meta}>Reference {error.digest}</p>}
-					{isDevelopment && <pre style={styles.pre}>{error.message}</pre>}
-				</main>
-			</body>
-		</html>
-	);
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body style={styles.body}>
+        <main style={styles.card}>
+          <h1 style={styles.title}>Something went wrong</h1>
+          <p style={styles.text}>
+            The rest of the site is working. Try again, or head back to the homepage.
+          </p>
+          <div style={styles.actions}>
+            <button type="button" onClick={reset} style={styles.primary}>
+              Try again
+            </button>
+            <a href="/" style={styles.secondary}>
+              Go to homepage
+            </a>
+          </div>
+          {error.digest && !isDevelopment && <p style={styles.meta}>Reference {error.digest}</p>}
+          {isDevelopment && <pre style={styles.pre}>{error.message}</pre>}
+        </main>
+      </body>
+    </html>
+  );
 }
diff --git a/src/app/(app)/not-found.tsx b/src/app/(app)/not-found.tsx
index 8934f558..79309d44 100644
--- a/src/app/(app)/not-found.tsx
+++ b/src/app/(app)/not-found.tsx
@@ -5,9 +5,9 @@
 
 import { RootLayout } from "@/components/layouts/root-layout";
 import {
-	PageHeader,
-	PageHeaderDescription,
-	PageHeaderHeading,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
 } from "@/components/primitives/page-header";
 import { WavesBackground } from "@/components/ui/background-waves";
 import { buttonVariants } from "@/components/ui/button";
@@ -16,50 +16,50 @@ import { RocketIcon } from "lucide-react";
 import Link from "next/link";
 
 const config = {
-	speed: 0.002,
-	saturation: 12,
-	brightness: 60,
-	amplitude: 1,
-	frequency: 1,
-	layers: 3,
-	fadeOpacity: 0.05,
-	transparent: true,
+  speed: 0.002,
+  saturation: 12,
+  brightness: 60,
+  amplitude: 1,
+  frequency: 1,
+  layers: 3,
+  fadeOpacity: 0.05,
+  transparent: true,
 };
 
 export default function NotFound() {
-	return (
-		<RootLayout>
-			<WavesBackground config={config} />
-			<div className="container relative flex h-screen w-screen flex-col items-center justify-center">
-				<div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
-					<div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-muted">
-						<RocketIcon className="h-10 w-10 rotate-45 text-muted-foreground" />
-					</div>
-					<PageHeader className="bg-background/30 backdrop-blur-sm">
-						<PageHeaderHeading className="w-full text-center">Lost in space</PageHeaderHeading>
-						<PageHeaderDescription className="mb-8">
-							The page you&apos;re looking for has drifted into deep space. Let&apos;s get you back
-							to familiar territory.
-						</PageHeaderDescription>
-					</PageHeader>
-					<Link
-						href="/"
-						className={cn(
-							buttonVariants({
-								variant: "default",
-								size: "lg",
-							}),
-							"relative overflow-hidden"
-						)}
-					>
-						<span className="relative z-10">Launch me back to earth</span>
-						<div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-primary opacity-50 blur-xl transition-all duration-500 hover:opacity-75" />
-					</Link>
-					<p className="text-muted-foreground">
-						We can&apos;t find the page you&apos;re looking for.
-					</p>
-				</div>
-			</div>
-		</RootLayout>
-	);
+  return (
+    <RootLayout>
+      <WavesBackground config={config} />
+      <div className="container relative flex h-screen w-screen flex-col items-center justify-center">
+        <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
+          <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-muted">
+            <RocketIcon className="h-10 w-10 rotate-45 text-muted-foreground" />
+          </div>
+          <PageHeader className="bg-background/30 backdrop-blur-sm">
+            <PageHeaderHeading className="w-full text-center">Lost in space</PageHeaderHeading>
+            <PageHeaderDescription className="mb-8">
+              The page you&apos;re looking for has drifted into deep space. Let&apos;s get you back
+              to familiar territory.
+            </PageHeaderDescription>
+          </PageHeader>
+          <Link
+            href="/"
+            className={cn(
+              buttonVariants({
+                variant: "default",
+                size: "lg",
+              }),
+              "relative overflow-hidden"
+            )}
+          >
+            <span className="relative z-10">Launch me back to earth</span>
+            <div className="absolute inset-0 bg-gradient-to-r from-primary/50 to-primary opacity-50 blur-xl transition-all duration-500 hover:opacity-75" />
+          </Link>
+          <p className="text-muted-foreground">
+            We can&apos;t find the page you&apos;re looking for.
+          </p>
+        </div>
+      </div>
+    </RootLayout>
+  );
 }
diff --git a/src/app/(app)/og/route.tsx b/src/app/(app)/og/route.tsx
index 1f78e33a..d4694bbc 100644
--- a/src/app/(app)/og/route.tsx
+++ b/src/app/(app)/og/route.tsx
@@ -32,318 +32,318 @@ import { v4 } from "uuid";
 
 // eslint-disable-next-line @typescript-eslint/require-await
 export async function GET(req: NextRequest) {
-	try {
-		// const [interRegularData, interBoldData] = await Promise.all([
-		// 	interRegular,
-		// 	interBold,
-		// ]);
+  try {
+    // const [interRegularData, interBoldData] = await Promise.all([
+    // 	interRegular,
+    // 	interBold,
+    // ]);
 
-		const { searchParams } = new URL(req.url);
-		const title = searchParams.get("title") ?? siteConfig.title;
-		const mode = searchParams.get("mode") ?? "dark";
-		const description = searchParams.get("description") ?? siteConfig.description;
-		const type = searchParams.get("type") ?? "default";
+    const { searchParams } = new URL(req.url);
+    const title = searchParams.get("title") ?? siteConfig.title;
+    const mode = searchParams.get("mode") ?? "dark";
+    const description = searchParams.get("description") ?? siteConfig.description;
+    const type = searchParams.get("type") ?? "default";
 
-		const isDark = mode === "dark";
-		const bgColor = isDark ? "#000000" : "#ffffff";
+    const isDark = mode === "dark";
+    const bgColor = isDark ? "#000000" : "#ffffff";
 
-		// Generate random positions for stars
-		const stars = Array.from({ length: 100 }, () => ({
-			x: Math.random() * 100,
-			y: Math.random() * 100,
-			size: Math.random() * 3 + 1,
-			opacity: Math.random() * 0.5 + 0.3,
-		}));
+    // Generate random positions for stars
+    const stars = Array.from({ length: 100 }, () => ({
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      size: Math.random() * 3 + 1,
+      opacity: Math.random() * 0.5 + 0.3,
+    }));
 
-		// Generate random positions for nebula clouds
-		const nebulaClouds = Array.from({ length: 5 }, () => ({
-			x: Math.random() * 100,
-			y: Math.random() * 100,
-			size: Math.random() * 300 + 200,
-			rotation: Math.random() * 360,
-			color: [
-				"rgba(147, 51, 234, 0.1)",
-				"rgba(59, 130, 246, 0.1)",
-				"rgba(236, 72, 153, 0.1)",
-				"rgba(16, 185, 129, 0.1)",
-				"rgba(245, 158, 11, 0.1)",
-			][Math.floor(Math.random() * 5)],
-		}));
+    // Generate random positions for nebula clouds
+    const nebulaClouds = Array.from({ length: 5 }, () => ({
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      size: Math.random() * 300 + 200,
+      rotation: Math.random() * 360,
+      color: [
+        "rgba(147, 51, 234, 0.1)",
+        "rgba(59, 130, 246, 0.1)",
+        "rgba(236, 72, 153, 0.1)",
+        "rgba(16, 185, 129, 0.1)",
+        "rgba(245, 158, 11, 0.1)",
+      ][Math.floor(Math.random() * 5)],
+    }));
 
-		return new ImageResponse(
-			<div
-				style={{
-					height: "100%",
-					width: "100%",
-					display: "flex",
-					flexDirection: "column",
-					alignItems: "center",
-					justifyContent: "center",
-					backgroundColor: bgColor,
-					position: "relative",
-					overflow: "hidden",
-				}}
-			>
-				{/* Deep Space Background */}
-				<div
-					style={{
-						position: "absolute",
-						inset: 0,
-						background: isDark
-							? "radial-gradient(circle at 25% 25%, rgba(17, 24, 39, 1) 0%, rgba(0, 0, 0, 1) 100%)"
-							: "radial-gradient(circle at 25% 25%, rgba(243, 244, 246, 1) 0%, rgba(255, 255, 255, 1) 100%)",
-					}}
-				/>
+    return new ImageResponse(
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: bgColor,
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Deep Space Background */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            background: isDark
+              ? "radial-gradient(circle at 25% 25%, rgba(17, 24, 39, 1) 0%, rgba(0, 0, 0, 1) 100%)"
+              : "radial-gradient(circle at 25% 25%, rgba(243, 244, 246, 1) 0%, rgba(255, 255, 255, 1) 100%)",
+          }}
+        />
 
-				{/* Nebula Clouds */}
-				{nebulaClouds.map((cloud) => (
-					<div
-						key={`nebula-${v4()}`}
-						style={{
-							position: "absolute",
-							left: `${cloud.x}%`,
-							top: `${cloud.y}%`,
-							width: `${cloud.size}px`,
-							height: `${cloud.size}px`,
-							background: cloud.color,
-							filter: "blur(100px)",
-							transform: `rotate(${cloud.rotation}deg)`,
-							opacity: 0.6,
-						}}
-					/>
-				))}
+        {/* Nebula Clouds */}
+        {nebulaClouds.map((cloud) => (
+          <div
+            key={`nebula-${v4()}`}
+            style={{
+              position: "absolute",
+              left: `${cloud.x}%`,
+              top: `${cloud.y}%`,
+              width: `${cloud.size}px`,
+              height: `${cloud.size}px`,
+              background: cloud.color,
+              filter: "blur(100px)",
+              transform: `rotate(${cloud.rotation}deg)`,
+              opacity: 0.6,
+            }}
+          />
+        ))}
 
-				{/* Star Field */}
-				{stars.map((star) => (
-					<div
-						key={`star-${v4()}`}
-						style={{
-							position: "absolute",
-							left: `${star.x}%`,
-							top: `${star.y}%`,
-							width: `${star.size}px`,
-							height: `${star.size}px`,
-							background: isDark ? "#ffffff" : "#000000",
-							borderRadius: "50%",
-							opacity: star.opacity,
-							boxShadow: `0 0 ${star.size * 2}px ${isDark ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.5)"}`,
-						}}
-					/>
-				))}
+        {/* Star Field */}
+        {stars.map((star) => (
+          <div
+            key={`star-${v4()}`}
+            style={{
+              position: "absolute",
+              left: `${star.x}%`,
+              top: `${star.y}%`,
+              width: `${star.size}px`,
+              height: `${star.size}px`,
+              background: isDark ? "#ffffff" : "#000000",
+              borderRadius: "50%",
+              opacity: star.opacity,
+              boxShadow: `0 0 ${star.size * 2}px ${isDark ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.5)"}`,
+            }}
+          />
+        ))}
 
-				{/* Orbital Rings */}
-				<div
-					style={{
-						position: "absolute",
-						width: "900px",
-						height: "900px",
-						borderRadius: "50%",
-						border: `2px solid ${isDark ? "rgba(59, 130, 246, 0.2)" : "rgba(37, 99, 235, 0.1)"}`,
-						transform: "rotate(-45deg)",
-						boxShadow: `0 0 50px ${isDark ? "rgba(59, 130, 246, 0.2)" : "rgba(37, 99, 235, 0.1)"}`,
-					}}
-				/>
-				<div
-					style={{
-						position: "absolute",
-						width: "700px",
-						height: "700px",
-						borderRadius: "50%",
-						border: `1px solid ${isDark ? "rgba(147, 51, 234, 0.2)" : "rgba(126, 34, 206, 0.1)"}`,
-						transform: "rotate(45deg)",
-						boxShadow: `0 0 50px ${isDark ? "rgba(147, 51, 234, 0.2)" : "rgba(126, 34, 206, 0.1)"}`,
-					}}
-				/>
-				<div
-					style={{
-						position: "absolute",
-						width: "500px",
-						height: "500px",
-						borderRadius: "50%",
-						border: `3px solid ${isDark ? "rgba(236, 72, 153, 0.2)" : "rgba(219, 39, 119, 0.1)"}`,
-						transform: "rotate(-15deg)",
-						boxShadow: `0 0 50px ${isDark ? "rgba(236, 72, 153, 0.2)" : "rgba(219, 39, 119, 0.1)"}`,
-					}}
-				/>
+        {/* Orbital Rings */}
+        <div
+          style={{
+            position: "absolute",
+            width: "900px",
+            height: "900px",
+            borderRadius: "50%",
+            border: `2px solid ${isDark ? "rgba(59, 130, 246, 0.2)" : "rgba(37, 99, 235, 0.1)"}`,
+            transform: "rotate(-45deg)",
+            boxShadow: `0 0 50px ${isDark ? "rgba(59, 130, 246, 0.2)" : "rgba(37, 99, 235, 0.1)"}`,
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            width: "700px",
+            height: "700px",
+            borderRadius: "50%",
+            border: `1px solid ${isDark ? "rgba(147, 51, 234, 0.2)" : "rgba(126, 34, 206, 0.1)"}`,
+            transform: "rotate(45deg)",
+            boxShadow: `0 0 50px ${isDark ? "rgba(147, 51, 234, 0.2)" : "rgba(126, 34, 206, 0.1)"}`,
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            width: "500px",
+            height: "500px",
+            borderRadius: "50%",
+            border: `3px solid ${isDark ? "rgba(236, 72, 153, 0.2)" : "rgba(219, 39, 119, 0.1)"}`,
+            transform: "rotate(-15deg)",
+            boxShadow: `0 0 50px ${isDark ? "rgba(236, 72, 153, 0.2)" : "rgba(219, 39, 119, 0.1)"}`,
+          }}
+        />
 
-				{/* Content Container */}
-				<div
-					style={{
-						display: "flex",
-						flexDirection: "column",
-						alignItems: "center",
-						justifyContent: "center",
-						gap: 24,
-						maxWidth: "85%",
-						textAlign: "center",
+        {/* Content Container */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 24,
+            maxWidth: "85%",
+            textAlign: "center",
 
-						padding: "48px",
-						background: isDark
-							? "linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8))"
-							: "linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 244, 246, 0.8))",
-						borderRadius: "32px",
-						border: `1px solid ${isDark ? "rgba(59, 130, 246, 0.3)" : "rgba(37, 99, 235, 0.2)"}`,
-						boxShadow: isDark
-							? "0 0 100px rgba(59, 130, 246, 0.2)"
-							: "0 0 100px rgba(37, 99, 235, 0.1)",
-						backdropFilter: "blur(20px)",
-					}}
-				>
-					{/* Logo */}
-					<div
-						style={{
-							display: "flex",
-							alignItems: "center",
-							gap: 20,
-							position: "relative",
-						}}
-					>
-						{/* Logo Background Glow */}
-						<div
-							style={{
-								position: "absolute",
-								inset: -20,
-								background: "radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 70%)",
-								filter: "blur(20px)",
-							}}
-						/>
-						<div
-							style={{
-								width: 96,
-								height: 96,
-								// background: "linear-gradient(135deg, #3B82F6, #8B5CF6)",
-								borderRadius: "24px",
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								fontSize: 48,
-								position: "relative",
-								boxShadow: "0 0 50px rgba(59, 130, 246, 0.5)",
-							}}
-						>
-							🚀{/* Rocket Trail */}
-							<div
-								style={{
-									position: "absolute",
-									bottom: -20,
-									width: "40px",
-									height: "60px",
-									background: "linear-gradient(to bottom, rgba(59, 130, 246, 0.5), transparent)",
-									filter: "blur(10px)",
-									transform: "rotate(45deg)",
-								}}
-							/>
-						</div>
-						<div
-							style={{
-								fontSize: 40,
-								fontWeight: 800,
-								background: "linear-gradient(135deg, #3B82F6, #8B5CF6)",
-								backgroundClip: "text",
-								color: "transparent",
-								textShadow: "0 2px 10px rgba(59, 130, 246, 0.3)",
-							}}
-						>
-							Shipkit
-						</div>
-					</div>
+            padding: "48px",
+            background: isDark
+              ? "linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8))"
+              : "linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 244, 246, 0.8))",
+            borderRadius: "32px",
+            border: `1px solid ${isDark ? "rgba(59, 130, 246, 0.3)" : "rgba(37, 99, 235, 0.2)"}`,
+            boxShadow: isDark
+              ? "0 0 100px rgba(59, 130, 246, 0.2)"
+              : "0 0 100px rgba(37, 99, 235, 0.1)",
+            backdropFilter: "blur(20px)",
+          }}
+        >
+          {/* Logo */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 20,
+              position: "relative",
+            }}
+          >
+            {/* Logo Background Glow */}
+            <div
+              style={{
+                position: "absolute",
+                inset: -20,
+                background: "radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 70%)",
+                filter: "blur(20px)",
+              }}
+            />
+            <div
+              style={{
+                width: 96,
+                height: 96,
+                // background: "linear-gradient(135deg, #3B82F6, #8B5CF6)",
+                borderRadius: "24px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 48,
+                position: "relative",
+                boxShadow: "0 0 50px rgba(59, 130, 246, 0.5)",
+              }}
+            >
+              🚀{/* Rocket Trail */}
+              <div
+                style={{
+                  position: "absolute",
+                  bottom: -20,
+                  width: "40px",
+                  height: "60px",
+                  background: "linear-gradient(to bottom, rgba(59, 130, 246, 0.5), transparent)",
+                  filter: "blur(10px)",
+                  transform: "rotate(45deg)",
+                }}
+              />
+            </div>
+            <div
+              style={{
+                fontSize: 40,
+                fontWeight: 800,
+                background: "linear-gradient(135deg, #3B82F6, #8B5CF6)",
+                backgroundClip: "text",
+                color: "transparent",
+                textShadow: "0 2px 10px rgba(59, 130, 246, 0.3)",
+              }}
+            >
+              Shipkit
+            </div>
+          </div>
 
-					{/* Title */}
-					<div
-						style={{
-							display: "flex",
-							flexDirection: "column",
-							gap: 12,
-							position: "relative",
-						}}
-					>
-						{/* Title Glow Effect */}
-						<div
-							style={{
-								position: "absolute",
-								inset: -30,
-								background: "radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 70%)",
-								filter: "blur(20px)",
-							}}
-						/>
-						<h1
-							style={{
-								fontSize: 72,
-								fontWeight: 800,
-								letterSpacing: "-0.05em",
-								lineHeight: 1.1,
-								margin: 0,
-								padding: 0,
-								background: isDark
-									? "linear-gradient(to right, #fff, #94A3B8)"
-									: "linear-gradient(to right, #000, #1E293B)",
-								backgroundClip: "text",
-								color: "transparent",
-								textShadow: isDark
-									? "0 2px 20px rgba(255, 255, 255, 0.2)"
-									: "0 2px 20px rgba(0, 0, 0, 0.1)",
-							}}
-						>
-							{title}
-						</h1>
-						<p
-							style={{
-								fontSize: 28,
-								color: isDark ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.8)",
-								margin: 0,
-								padding: 0,
-								textShadow: isDark
-									? "0 2px 10px rgba(0, 0, 0, 0.3)"
-									: "0 2px 10px rgba(255, 255, 255, 0.3)",
-							}}
-						>
-							{description}
-						</p>
-					</div>
+          {/* Title */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              position: "relative",
+            }}
+          >
+            {/* Title Glow Effect */}
+            <div
+              style={{
+                position: "absolute",
+                inset: -30,
+                background: "radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 70%)",
+                filter: "blur(20px)",
+              }}
+            />
+            <h1
+              style={{
+                fontSize: 72,
+                fontWeight: 800,
+                letterSpacing: "-0.05em",
+                lineHeight: 1.1,
+                margin: 0,
+                padding: 0,
+                background: isDark
+                  ? "linear-gradient(to right, #fff, #94A3B8)"
+                  : "linear-gradient(to right, #000, #1E293B)",
+                backgroundClip: "text",
+                color: "transparent",
+                textShadow: isDark
+                  ? "0 2px 20px rgba(255, 255, 255, 0.2)"
+                  : "0 2px 20px rgba(0, 0, 0, 0.1)",
+              }}
+            >
+              {title}
+            </h1>
+            <p
+              style={{
+                fontSize: 28,
+                color: isDark ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.8)",
+                margin: 0,
+                padding: 0,
+                textShadow: isDark
+                  ? "0 2px 10px rgba(0, 0, 0, 0.3)"
+                  : "0 2px 10px rgba(255, 255, 255, 0.3)",
+              }}
+            >
+              {description}
+            </p>
+          </div>
 
-					{/* Type Badge */}
-					{type !== "default" && (
-						<div
-							style={{
-								background: isDark
-									? "linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2))"
-									: "linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(126, 34, 206, 0.1))",
-								padding: "10px 24px",
-								borderRadius: "9999px",
-								fontSize: 24,
-								color: isDark ? "#60A5FA" : "#3B82F6",
-								textTransform: "capitalize",
-								border: `1px solid ${isDark ? "rgba(59, 130, 246, 0.3)" : "rgba(37, 99, 235, 0.2)"}`,
-								boxShadow: `0 0 30px ${isDark ? "rgba(59, 130, 246, 0.2)" : "rgba(37, 99, 235, 0.1)"}`,
-								textShadow: "0 2px 10px rgba(59, 130, 246, 0.3)",
-							}}
-						>
-							{type}
-						</div>
-					)}
-				</div>
-			</div>,
-			{
-				width: 1200,
-				height: 630,
-				// fonts: [
-				// 	{
-				// 		name: "Inter",
-				// 		data: interRegularData,
-				// 		weight: 400,
-				// 		style: "normal",
-				// 	},
-				// 	{
-				// 		name: "Inter",
-				// 		data: interBoldData,
-				// 		weight: 700,
-				// 		style: "normal",
-				// 	},
-				// ],
-			}
-		);
-	} catch (e) {
-		console.error(e);
-		return new Response("Failed to generate image", { status: 500 });
-	}
+          {/* Type Badge */}
+          {type !== "default" && (
+            <div
+              style={{
+                background: isDark
+                  ? "linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2))"
+                  : "linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(126, 34, 206, 0.1))",
+                padding: "10px 24px",
+                borderRadius: "9999px",
+                fontSize: 24,
+                color: isDark ? "#60A5FA" : "#3B82F6",
+                textTransform: "capitalize",
+                border: `1px solid ${isDark ? "rgba(59, 130, 246, 0.3)" : "rgba(37, 99, 235, 0.2)"}`,
+                boxShadow: `0 0 30px ${isDark ? "rgba(59, 130, 246, 0.2)" : "rgba(37, 99, 235, 0.1)"}`,
+                textShadow: "0 2px 10px rgba(59, 130, 246, 0.3)",
+              }}
+            >
+              {type}
+            </div>
+          )}
+        </div>
+      </div>,
+      {
+        width: 1200,
+        height: 630,
+        // fonts: [
+        // 	{
+        // 		name: "Inter",
+        // 		data: interRegularData,
+        // 		weight: 400,
+        // 		style: "normal",
+        // 	},
+        // 	{
+        // 		name: "Inter",
+        // 		data: interBoldData,
+        // 		weight: 700,
+        // 		style: "normal",
+        // 	},
+        // ],
+      }
+    );
+  } catch (e) {
+    console.error(e);
+    return new Response("Failed to generate image", { status: 500 });
+  }
 }
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index c0007adc..dc985da6 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -34,7 +34,8 @@ export default function Page() {
         softwareSourceCode
         product={{
           name: "Bones - Next.js SaaS Boilerplate",
-          description: "Free, open-source Next.js starter kit with authentication, Shadcn UI, and one-click Vercel deploy.",
+          description:
+            "Free, open-source Next.js starter kit with authentication, Shadcn UI, and one-click Vercel deploy.",
           image: "https://bones.sh/og",
           price: "0",
           priceCurrency: "USD",
@@ -43,29 +44,33 @@ export default function Page() {
           questions: [
             {
               question: "Is Bones free to use?",
-              answer: "Yes, Bones is completely free and open-source under the MIT license. You own 100% of the code.",
+              answer:
+                "Yes, Bones is completely free and open-source under the MIT license. You own 100% of the code.",
             },
             {
               question: "What tech stack does Bones use?",
-              answer: "Bones uses Next.js 16, React 19, TypeScript, Tailwind CSS, Shadcn/UI, and supports NextAuth + Better Auth for authentication.",
+              answer:
+                "Bones uses Next.js 16, React 19, TypeScript, Tailwind CSS, Shadcn/UI, and supports NextAuth + Better Auth for authentication.",
             },
             {
               question: "How do I deploy Bones?",
-              answer: "Click the Deploy with Vercel button for one-click deployment. No environment variables are needed to start — the setup wizard guides you through configuration.",
+              answer:
+                "Click the Deploy with Vercel button for one-click deployment. No environment variables are needed to start — the setup wizard guides you through configuration.",
             },
             {
               question: "What is the difference between Bones and ShipKit?",
-              answer: "Bones is the free, open-source foundation. ShipKit is the premium framework built on top of Bones that adds database (Drizzle + PostgreSQL), payments (Stripe), CMS (Payload + Builder.io), AI integrations, and 100+ additional components.",
+              answer:
+                "Bones is the free, open-source foundation. ShipKit is the premium framework built on top of Bones that adds database (Drizzle + PostgreSQL), payments (Stripe), CMS (Payload + Builder.io), AI integrations, and 100+ additional components.",
             },
           ],
         }}
       />
-      <div className="container flex flex-col items-center justify-center gap-2xl py-6 text-center min-h-screen">
+      <div className="container flex min-h-screen flex-col items-center justify-center gap-2xl py-6 text-center">
         <PageHeader className="flex flex-col items-center justify-center">
           <PageHeaderHeading
             className={cn(
-              "relative font-bold md:text-[6rem] py-6 flex items-center justify-center gap-3",
-              font.className,
+              "relative flex items-center justify-center gap-3 py-6 font-bold md:text-[6rem]",
+              font.className
             )}
           >
             Bones
@@ -74,8 +79,8 @@ export default function Page() {
             Ship websites fast with AI.
           </PageHeaderDescription>
           <PageHeaderDescription className="text-lg text-muted-foreground">
-            Launch a full-stack React + Next.js starter kit configured for
-            Cursor, Claude, and Shadcn UI.
+            Launch a full-stack React + Next.js starter kit configured for Cursor, Claude, and
+            Shadcn UI.
           </PageHeaderDescription>
 
           <div className="my-4 flex flex-col gap-md md:flex-row">
@@ -93,7 +98,7 @@ export default function Page() {
               href={routes.external.shipkit}
               className={cn(
                 buttonVariants({ variant: "link", size: "sm" }),
-                "text-muted-foreground hover:text-primary transition-colors",
+                "text-muted-foreground transition-colors hover:text-primary"
               )}
             >
               Need a starter with batteries included?
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
index f7061949..4b30f713 100644
--- a/src/app/manifest.ts
+++ b/src/app/manifest.ts
@@ -3,155 +3,155 @@ import { siteConfig } from "@/config/site-config";
 import type { MetadataRoute } from "next";
 
 export default function manifest(): MetadataRoute.Manifest {
-	return {
-		/* Basic Application Information
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest#name
-		 */
-		name: siteConfig.title, // Full name of the application
-		short_name: siteConfig.name, // Short name for app shortcuts and home screen
-		description: siteConfig.description, // Description shown in app stores and install prompts
+  return {
+    /* Basic Application Information
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest#name
+     */
+    name: siteConfig.title, // Full name of the application
+    short_name: siteConfig.name, // Short name for app shortcuts and home screen
+    description: siteConfig.description, // Description shown in app stores and install prompts
 
-		/* Application Entry Points and Identification
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/start_url
-		 */
-		start_url: routes.home, // URL that loads when app is launched
-		id: routes.home, // Unique identifier for the app
+    /* Application Entry Points and Identification
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/start_url
+     */
+    start_url: routes.home, // URL that loads when app is launched
+    id: routes.home, // Unique identifier for the app
 
-		/* Display and UI Settings
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/display
-		 */
-		display: "standalone", // App appears as standalone application (no browser UI)
-		display_override: ["window-controls-overlay"], // Enables customization of title bar in PWA
+    /* Display and UI Settings
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/display
+     */
+    display: "standalone", // App appears as standalone application (no browser UI)
+    display_override: ["window-controls-overlay"], // Enables customization of title bar in PWA
 
-		/* Theme and Color Settings
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/theme_color
-		 */
-		background_color: siteConfig.metadata.themeColor.light, // Background color during app load
-		theme_color: siteConfig.metadata.themeColor.dark, // Theme color for OS integration
+    /* Theme and Color Settings
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/theme_color
+     */
+    background_color: siteConfig.metadata.themeColor.light, // Background color during app load
+    theme_color: siteConfig.metadata.themeColor.dark, // Theme color for OS integration
 
-		/* Device and Locale Settings
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/orientation
-		 */
-		orientation: "portrait-primary", // Preferred screen orientation
-		categories: ["development", "productivity", "utilities"], // App store categories
-		dir: "ltr", // Text direction
-		lang: "en-US", // Primary language
+    /* Device and Locale Settings
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/orientation
+     */
+    orientation: "portrait-primary", // Preferred screen orientation
+    categories: ["development", "productivity", "utilities"], // App store categories
+    dir: "ltr", // Text direction
+    lang: "en-US", // Primary language
 
-		/* Installation and Platform Preferences
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/prefer_related_applications
-		 */
-		prefer_related_applications: false, // Don't prefer native apps over this web app
-		scope: "/", // Pages that are part of the PWA experience
+    /* Installation and Platform Preferences
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/prefer_related_applications
+     */
+    prefer_related_applications: false, // Don't prefer native apps over this web app
+    scope: "/", // Pages that are part of the PWA experience
 
-		/* Launch Behavior
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/launch_handler
-		 */
-		launch_handler: {
-			client_mode: ["navigate-existing", "auto"], // Controls how app launches when clicked
-		},
+    /* Launch Behavior
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/launch_handler
+     */
+    launch_handler: {
+      client_mode: ["navigate-existing", "auto"], // Controls how app launches when clicked
+    },
 
-		/* App Icons
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/icons
-		 */
-		icons: [
-			{
-				src: "/favicon.ico", // Standard favicon
-				sizes: "48x48",
-				type: "image/x-icon",
-			},
-			{
-				src: "/app/web-app-manifest-192x192.png",
-				sizes: "192x192",
-				type: "image/png",
-				purpose: "maskable",
-			},
-			{
-				src: "/app/web-app-manifest-192x192.png",
-				sizes: "192x192",
-				type: "image/png",
-				purpose: "any",
-			},
-			{
-				src: "/app/web-app-manifest-512x512.png",
-				sizes: "512x512",
-				type: "image/png",
-				purpose: "maskable",
-			},
-		],
+    /* App Icons
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/icons
+     */
+    icons: [
+      {
+        src: "/favicon.ico", // Standard favicon
+        sizes: "48x48",
+        type: "image/x-icon",
+      },
+      {
+        src: "/app/web-app-manifest-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/app/web-app-manifest-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/app/web-app-manifest-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
 
-		/* App Screenshots
-		 * Used in app stores and install prompts to showcase the app
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/screenshots
-		 * @note You need to create these screenshot files in `public/screenshots/`
-		 */
-		screenshots: [
-			{
-				src: "/app/screenshots/screenshot-desktop.png", // Updated path
-				sizes: "1280x720",
-				type: "image/png",
-				form_factor: "wide", // Indicates this is for wide screens (desktop)
-				label: `Desktop view of ${siteConfig.branding.projectName}`,
-			},
-			{
-				src: "/app/screenshots/screenshot-mobile.png", // Updated path
-				sizes: "720x1280",
-				type: "image/png",
-				form_factor: "narrow", // Indicates this is for narrow screens (mobile)
-				label: `Mobile view of ${siteConfig.branding.projectName}`,
-			},
-		],
+    /* App Screenshots
+     * Used in app stores and install prompts to showcase the app
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/screenshots
+     * @note You need to create these screenshot files in `public/screenshots/`
+     */
+    screenshots: [
+      {
+        src: "/app/screenshots/screenshot-desktop.png", // Updated path
+        sizes: "1280x720",
+        type: "image/png",
+        form_factor: "wide", // Indicates this is for wide screens (desktop)
+        label: `Desktop view of ${siteConfig.branding.projectName}`,
+      },
+      {
+        src: "/app/screenshots/screenshot-mobile.png", // Updated path
+        sizes: "720x1280",
+        type: "image/png",
+        form_factor: "narrow", // Indicates this is for narrow screens (mobile)
+        label: `Mobile view of ${siteConfig.branding.projectName}`,
+      },
+    ],
 
-		/* App Shortcuts (currently commented out)
-		 * Provides quick access to key features from the app icon
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/shortcuts
-		 */
-		// shortcuts: [
-		// 	{
-		// 		name: "Documentation",
-		// 		short_name: "Docs",
-		// 		description: `View ${siteConfig.branding.projectName} documentation`,
-		// 		url: routes.docs,
-		// 		icons: [{ src: "/icons/docs.png", sizes: "192x192" }],
-		// 	},
-		// 	{
-		// 		name: "Examples",
-		// 		short_name: "Examples",
-		// 		description: `View ${siteConfig.branding.projectName} examples`,
-		// 		url: routes.examples.root,
-		// 		icons: [{ src: "/icons/examples.png", sizes: "192x192" }],
-		// 	},
-		// ],
+    /* App Shortcuts (currently commented out)
+     * Provides quick access to key features from the app icon
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/shortcuts
+     */
+    // shortcuts: [
+    // 	{
+    // 		name: "Documentation",
+    // 		short_name: "Docs",
+    // 		description: `View ${siteConfig.branding.projectName} documentation`,
+    // 		url: routes.docs,
+    // 		icons: [{ src: "/icons/docs.png", sizes: "192x192" }],
+    // 	},
+    // 	{
+    // 		name: "Examples",
+    // 		short_name: "Examples",
+    // 		description: `View ${siteConfig.branding.projectName} examples`,
+    // 		url: routes.examples.root,
+    // 		icons: [{ src: "/icons/examples.png", sizes: "192x192" }],
+    // 	},
+    // ],
 
-		/* Web Share Target
-		 * Allows the app to receive shared content from other apps
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
-		 */
-		share_target: {
-			action: "/share",
-			method: "POST", // Changed from GET to POST
-			enctype: "application/x-www-form-urlencoded", // Added enctype for POST
-			params: {
-				title: "title",
-				text: "text",
-				url: "url",
-			},
-		},
+    /* Web Share Target
+     * Allows the app to receive shared content from other apps
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
+     */
+    share_target: {
+      action: "/share",
+      method: "POST", // Changed from GET to POST
+      enctype: "application/x-www-form-urlencoded", // Added enctype for POST
+      params: {
+        title: "title",
+        text: "text",
+        url: "url",
+      },
+    },
 
-		/* Custom Protocol Handlers
-		 * Allows the app to handle custom URL schemes
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/protocol_handlers
-		 */
-		protocol_handlers: [
-			{
-				protocol: siteConfig.branding.protocol, // Custom protocol scheme
-				url: "/protocol?type=%s", // URL that handles the protocol
-			},
-		],
+    /* Custom Protocol Handlers
+     * Allows the app to handle custom URL schemes
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/protocol_handlers
+     */
+    protocol_handlers: [
+      {
+        protocol: siteConfig.branding.protocol, // Custom protocol scheme
+        url: "/protocol?type=%s", // URL that handles the protocol
+      },
+    ],
 
-		/* Related Applications
-		 * Links to related native applications
-		 * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/related_applications
-		 */
-		related_applications: [], // No related native apps
-	};
+    /* Related Applications
+     * Links to related native applications
+     * @see https://developer.mozilla.org/en-US/docs/Web/Manifest/related_applications
+     */
+    related_applications: [], // No related native apps
+  };
 }
diff --git a/src/app/robots.ts b/src/app/robots.ts
index b8a8c605..909dfca7 100644
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -6,45 +6,45 @@ import type { MetadataRoute } from "next";
  * @see https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt
  */
 export default function robots(): MetadataRoute.Robots {
-	return {
-		/* Rules array defines crawler behavior
-		 * Each rule object specifies which robots it applies to and what they can/cannot access
-		 */
-		rules: [
-			{
-				userAgent: "*", // Applies to all web robots/crawlers
-				allow: "/", // Allows crawling of the root path and all unspecified paths
+  return {
+    /* Rules array defines crawler behavior
+     * Each rule object specifies which robots it applies to and what they can/cannot access
+     */
+    rules: [
+      {
+        userAgent: "*", // Applies to all web robots/crawlers
+        allow: "/", // Allows crawling of the root path and all unspecified paths
 
-				/* Paths that should not be crawled or indexed
-				 * @note Common patterns to exclude:
-				 * - API routes to prevent unnecessary crawling of data endpoints
-				 * - Next.js internal routes and static files
-				 * - Admin areas for security
-				 * - Draft/preview content
-				 * - Search pages to avoid duplicate content
-				 */
+        /* Paths that should not be crawled or indexed
+         * @note Common patterns to exclude:
+         * - API routes to prevent unnecessary crawling of data endpoints
+         * - Next.js internal routes and static files
+         * - Admin areas for security
+         * - Draft/preview content
+         * - Search pages to avoid duplicate content
+         */
 
-				disallow: [
-					// "/api/*", // Blocks access to API routes
-					// "/static/*", // Blocks access to static assets directory
-					// routes.admin.root, // Blocks access to admin panel
-					// "*/private/*", // Blocks access to private content
-					// "*/draft/*", // Blocks access to draft content
-					// "*/preview/*", // Blocks access to preview content
-				],
-			},
-		],
+        disallow: [
+          // "/api/*", // Blocks access to API routes
+          // "/static/*", // Blocks access to static assets directory
+          // routes.admin.root, // Blocks access to admin panel
+          // "*/private/*", // Blocks access to private content
+          // "*/draft/*", // Blocks access to draft content
+          // "*/preview/*", // Blocks access to preview content
+        ],
+      },
+    ],
 
-		/* Sitemap URL
-		 * Points search engines to your XML sitemap for efficient crawling
-		 * @see https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview
-		 */
-		sitemap: `${siteConfig.url}/sitemap.xml`,
+    /* Sitemap URL
+     * Points search engines to your XML sitemap for efficient crawling
+     * @see https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview
+     */
+    sitemap: `${siteConfig.url}/sitemap.xml`,
 
-		/* Host Directive
-		 * Specifies the preferred domain version of your site
-		 * @see https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
-		 */
-		host: siteConfig.url,
-	};
+    /* Host Directive
+     * Specifies the preferred domain version of your site
+     * @see https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
+     */
+    host: siteConfig.url,
+  };
 }
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 1e493815..0a5c700f 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -18,11 +18,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     for (const [key, value] of Object.entries(obj)) {
       if (typeof value === "string" && !isExternalRoute(value)) {
         result.push(value);
-      } else if (
-        typeof value === "object" &&
-        value !== null &&
-        !("params" in value)
-      ) {
+      } else if (typeof value === "object" && value !== null && !("params" in value)) {
         // Recursively flatten nested objects (but skip route objects with params)
         result = [...result, ...flattenRoutes(value)];
       }
@@ -70,12 +66,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     url: `${baseUrl}${route}`,
     lastModified: new Date(),
     changeFrequency: "monthly" as const,
-    priority:
-      route === "/"
-        ? 1
-        : route.includes("auth") || route.includes("sign")
-          ? 0.5
-          : 0.8,
+    priority: route === "/" ? 1 : route.includes("auth") || route.includes("sign") ? 0.5 : 0.8,
   }));
 
   // Changelog entries are indexable pages linked from /changelog; without
diff --git a/src/components/assets/icons.tsx b/src/components/assets/icons.tsx
index 70b4c966..c48d3dc1 100644
--- a/src/components/assets/icons.tsx
+++ b/src/components/assets/icons.tsx
@@ -4,229 +4,229 @@ import type React from "react";
 export type IconProps = React.HTMLAttributes<SVGElement>;
 
 export const Icons = {
-	calendar: (props: IconProps) => <CalendarIcon {...props} />,
-	email: (props: IconProps) => <MailIcon {...props} />,
-	linkedin: (props: IconProps) => (
-		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-			<title>LinkedIn</title>
-			<path
-				fill="currentColor"
-				d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
-			/>
-		</svg>
-	),
-	x: (props: IconProps) => (
-		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-			<title>X</title>
-			<path
-				fill="currentColor"
-				d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
-			/>
-		</svg>
-	),
-	youtube: (props: IconProps) => (
-		<svg
-			width="32px"
-			height="32px"
-			viewBox="0 0 32 32"
-			fill="currentColor"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<title>Youtube</title>
-			<path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z" />
-		</svg>
-	),
-	github: (props: IconProps) => (
-		<svg viewBox="0 0 438.549 438.549" {...props}>
-			<title>Github</title>
-			<path
-				fill="currentColor"
-				d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-			/>
-		</svg>
-	),
+  calendar: (props: IconProps) => <CalendarIcon {...props} />,
+  email: (props: IconProps) => <MailIcon {...props} />,
+  linkedin: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <title>LinkedIn</title>
+      <path
+        fill="currentColor"
+        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+      />
+    </svg>
+  ),
+  x: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <title>X</title>
+      <path
+        fill="currentColor"
+        d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+      />
+    </svg>
+  ),
+  youtube: (props: IconProps) => (
+    <svg
+      width="32px"
+      height="32px"
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>Youtube</title>
+      <path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z" />
+    </svg>
+  ),
+  github: (props: IconProps) => (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <title>Github</title>
+      <path
+        fill="currentColor"
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      />
+    </svg>
+  ),
 
-	next: (props: IconProps) => (
-		<svg viewBox="0 0 256 256" {...props}>
-			<title>Next</title>
-			<path
-				d="M119.617 0.069C119.066 0.119 117.315 0.294 115.738 0.419C79.378 3.697 45.319 23.313 23.748 53.463C11.736 70.227 4.054 89.243 1.151 109.385C0.125 116.415 0 118.492 0 128.025C0 137.558 0.125 139.635 1.151 146.666C8.108 194.73 42.316 235.114 88.712 250.076C97.02 252.754 105.778 254.58 115.738 255.681C119.617 256.106 136.383 256.106 140.262 255.681C157.454 253.779 172.018 249.526 186.382 242.195C188.584 241.069 189.01 240.769 188.709 240.518C188.509 240.368 179.125 227.783 167.864 212.57L147.394 184.922L121.744 146.966C107.63 126.098 96.019 109.034 95.919 109.034C95.819 109.009 95.718 125.873 95.668 146.465C95.593 182.52 95.568 183.971 95.118 184.822C94.467 186.048 93.967 186.549 92.916 187.099C92.115 187.499 91.414 187.574 87.636 187.574H83.306L82.155 186.849C81.404 186.373 80.854 185.748 80.479 185.022L79.953 183.896L80.003 133.73L80.078 83.538L80.854 82.562C81.254 82.037 82.105 81.361 82.706 81.036C83.732 80.536 84.132 80.486 88.461 80.486C93.566 80.486 94.417 80.686 95.743 82.137C96.119 82.537 110.007 103.455 126.624 128.651C143.24 153.846 165.962 188.25 177.123 205.139L197.393 235.84L198.419 235.164C207.503 229.259 217.112 220.852 224.719 212.095C240.91 193.504 251.345 170.836 254.849 146.666C255.875 139.635 256 137.558 256 128.025C256 118.492 255.875 116.415 254.849 109.385C247.892 61.32 213.684 20.936 167.288 5.974C159.105 3.322 150.397 1.495 140.637 0.394C138.235 0.144 121.694 -0.131 119.617 0.069ZM172.018 77.483C173.219 78.084 174.195 79.235 174.545 80.436C174.746 81.086 174.796 94.998 174.746 126.349L174.671 171.336L166.738 159.176L158.78 147.016V114.314C158.78 93.171 158.88 81.286 159.03 80.711C159.431 79.31 160.307 78.209 161.508 77.558C162.534 77.033 162.909 76.983 166.838 76.983C170.542 76.983 171.192 77.033 172.018 77.483Z"
-				fill="currentColor"
-			/>
-		</svg>
-	),
-	typescript: (props: IconProps & { textClassName?: string }) => {
-		const { textClassName = "text-background", ...rest } = props;
-		return (
-			<svg viewBox="0 0 512 512" {...rest}>
-				<title>Typescript</title>
-				<rect fill="currentColor" height="512" rx="50" width="512" />
-				<rect fill="currentColor" height="512" rx="50" width="512" />
-				<path
-					className={textClassName}
-					clipRule="evenodd"
-					fillRule="evenodd"
-					fill="currentColor"
-					d="M316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"
-				/>
-			</svg>
-		);
-	},
-	shadcn: (props: IconProps) => (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
-			<title>Shadcn</title>
-			<rect width="256" height="256" fill="none" />
-			<line
-				x1="208"
-				y1="128"
-				x2="128"
-				y2="208"
-				fill="none"
-				stroke="currentColor"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth="32"
-			/>
-			<line
-				x1="192"
-				y1="40"
-				x2="40"
-				y2="192"
-				fill="none"
-				stroke="currentColor"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth="32"
-			/>
-		</svg>
-	),
-	twitter: (props: IconProps) => (
-		<svg
-			height="23"
-			viewBox="0 0 1200 1227"
-			width="23"
-			xmlns="http://www.w3.org/2000/svg"
-			fill="currentolor"
-			{...props}
-		>
-			<title>Twitter</title>
-			<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
-		</svg>
-	),
-	radix: (props: IconProps) => (
-		<svg viewBox="0 0 25 25" fill="none" {...props}>
-			<title>Radix</title>
-			<path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z" fill="currentcolor" />
-			<path d="M12 0H4V8H12V0Z" fill="currentcolor" />
-			<path
-				d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
-				fill="currentcolor"
-			/>
-		</svg>
-	),
-	aria: (props: IconProps) => (
-		<svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>Aria</title>
-			<path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
-		</svg>
-	),
-	bun: (props: IconProps) => (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="currentcolor"
-			role="img"
-			viewBox="0 0 24 24"
-			{...props}
-		>
-			<title>Bun</title>
-			<path d="M11.966 22.566c6.609 0 11.966-4.326 11.966-9.661 0-3.308-2.051-6.23-5.204-7.963-1.283-.713-2.291-1.353-3.13-1.885-1.58-1.004-2.555-1.623-3.632-1.623-1.094 0-2.327.783-3.955 1.816a49.78 49.78 0 0 1-2.808 1.692C2.051 6.675 0 9.597 0 12.905c0 5.335 5.357 9.66 11.966 9.66Zm-1.397-17.83a5.885 5.885 0 0 0 .497-2.403c0-.144.201-.186.229-.028.656 2.775-.9 4.15-2.051 4.61-.124.048-.199-.12-.103-.208a5.748 5.748 0 0 0 1.428-1.971Zm2.052-.102a5.795 5.795 0 0 0-.78-2.3v-.015c-.068-.123.086-.263.185-.172 1.956 2.105 1.303 4.055.554 5.037-.082.102-.229-.003-.188-.126a5.837 5.837 0 0 0 .229-2.424Zm1.771-.559a5.708 5.708 0 0 0-1.607-1.801V2.26c-.112-.085-.024-.274.113-.218 2.588 1.084 2.766 3.171 2.452 4.395a.116.116 0 0 1-.048.071.11.11 0 0 1-.153-.026.118.118 0 0 1-.022-.083 5.864 5.864 0 0 0-.735-2.324Zm-5.072.559c-.616.544-1.279.758-2.058.997-.116 0-.194-.078-.155-.18 1.747-.907 2.369-1.645 2.99-2.771 0 0 .155-.117.188.085 0 .303-.348 1.325-.965 1.869Zm4.931 11.205a2.949 2.949 0 0 1-.935 1.549 2.16 2.16 0 0 1-1.282.618 2.167 2.167 0 0 1-1.323-.618 2.95 2.95 0 0 1-.923-1.549.243.243 0 0 1 .064-.197.23.23 0 0 1 .192-.069h3.954a.226.226 0 0 1 .19.07.239.239 0 0 1 .063.196Zm-5.443-2.17a1.85 1.85 0 0 1-2.377-.244 1.969 1.969 0 0 1-.233-2.44c.207-.318.502-.565.846-.711a1.84 1.84 0 0 1 1.089-.11c.365.075.701.26.964.53.264.27.443.616.515.99a1.98 1.98 0 0 1-.108 1.118 1.923 1.923 0 0 1-.696.866Zm8.471.005a1.849 1.849 0 0 1-2.374-.252 1.956 1.956 0 0 1-.546-1.362c0-.383.11-.758.319-1.076.207-.318.502-.566.847-.711a1.84 1.84 0 0 1 1.09-.108c.366.076.702.261.965.533s.44.617.512.993a1.98 1.98 0 0 1-.113 1.118 1.922 1.922 0 0 1-.7.865Z" />
-		</svg>
-	),
-	npm: (props: IconProps) => (
-		<svg viewBox="0 0 24 24" {...props}>
-			<title>NPM</title>
-			<path
-				d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
-				fill="currentColor"
-			/>
-		</svg>
-	),
-	yarn: (props: IconProps) => (
-		<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>Yarn</title>
-			<path d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z" />
-		</svg>
-	),
-	pnpm: (props: IconProps) => (
-		<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>Pnpm</title>
-			<path
-				d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
-				fill="currentColor"
-			/>
-		</svg>
-	),
-	react: (props: IconProps) => (
-		<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>React</title>
-			<path
-				d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"
-				fill="currentColor"
-			/>
-		</svg>
-	),
-	tailwind: (props: IconProps) => (
-		<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>Tailwind</title>
-			<path
-				d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
-				fill="currentColor"
-			/>
-		</svg>
-	),
-	google: (props: IconProps) => (
-		<svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>Google</title>
-			<path
-				fill="currentColor"
-				d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-			/>
-		</svg>
-	),
-	apple: (props: IconProps) => (
-		<svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>Apple</title>
-			<path
-				d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
-				fill="currentColor"
-			/>
-		</svg>
-	),
-	paypal: (props: IconProps) => (
-		<svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
-			<title>Paypal</title>
-			<path
-				d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
-				fill="currentColor"
-			/>
-		</svg>
-	),
-	spinner: (props: IconProps) => (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			{...props}
-		>
-			<title>Loading Spinner</title>
-			<path d="M21 12a9 9 0 1 1-6.219-8.56" />
-		</svg>
-	),
+  next: (props: IconProps) => (
+    <svg viewBox="0 0 256 256" {...props}>
+      <title>Next</title>
+      <path
+        d="M119.617 0.069C119.066 0.119 117.315 0.294 115.738 0.419C79.378 3.697 45.319 23.313 23.748 53.463C11.736 70.227 4.054 89.243 1.151 109.385C0.125 116.415 0 118.492 0 128.025C0 137.558 0.125 139.635 1.151 146.666C8.108 194.73 42.316 235.114 88.712 250.076C97.02 252.754 105.778 254.58 115.738 255.681C119.617 256.106 136.383 256.106 140.262 255.681C157.454 253.779 172.018 249.526 186.382 242.195C188.584 241.069 189.01 240.769 188.709 240.518C188.509 240.368 179.125 227.783 167.864 212.57L147.394 184.922L121.744 146.966C107.63 126.098 96.019 109.034 95.919 109.034C95.819 109.009 95.718 125.873 95.668 146.465C95.593 182.52 95.568 183.971 95.118 184.822C94.467 186.048 93.967 186.549 92.916 187.099C92.115 187.499 91.414 187.574 87.636 187.574H83.306L82.155 186.849C81.404 186.373 80.854 185.748 80.479 185.022L79.953 183.896L80.003 133.73L80.078 83.538L80.854 82.562C81.254 82.037 82.105 81.361 82.706 81.036C83.732 80.536 84.132 80.486 88.461 80.486C93.566 80.486 94.417 80.686 95.743 82.137C96.119 82.537 110.007 103.455 126.624 128.651C143.24 153.846 165.962 188.25 177.123 205.139L197.393 235.84L198.419 235.164C207.503 229.259 217.112 220.852 224.719 212.095C240.91 193.504 251.345 170.836 254.849 146.666C255.875 139.635 256 137.558 256 128.025C256 118.492 255.875 116.415 254.849 109.385C247.892 61.32 213.684 20.936 167.288 5.974C159.105 3.322 150.397 1.495 140.637 0.394C138.235 0.144 121.694 -0.131 119.617 0.069ZM172.018 77.483C173.219 78.084 174.195 79.235 174.545 80.436C174.746 81.086 174.796 94.998 174.746 126.349L174.671 171.336L166.738 159.176L158.78 147.016V114.314C158.78 93.171 158.88 81.286 159.03 80.711C159.431 79.31 160.307 78.209 161.508 77.558C162.534 77.033 162.909 76.983 166.838 76.983C170.542 76.983 171.192 77.033 172.018 77.483Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  typescript: (props: IconProps & { textClassName?: string }) => {
+    const { textClassName = "text-background", ...rest } = props;
+    return (
+      <svg viewBox="0 0 512 512" {...rest}>
+        <title>Typescript</title>
+        <rect fill="currentColor" height="512" rx="50" width="512" />
+        <rect fill="currentColor" height="512" rx="50" width="512" />
+        <path
+          className={textClassName}
+          clipRule="evenodd"
+          fillRule="evenodd"
+          fill="currentColor"
+          d="M316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"
+        />
+      </svg>
+    );
+  },
+  shadcn: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <title>Shadcn</title>
+      <rect width="256" height="256" fill="none" />
+      <line
+        x1="208"
+        y1="128"
+        x2="128"
+        y2="208"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="32"
+      />
+      <line
+        x1="192"
+        y1="40"
+        x2="40"
+        y2="192"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="32"
+      />
+    </svg>
+  ),
+  twitter: (props: IconProps) => (
+    <svg
+      height="23"
+      viewBox="0 0 1200 1227"
+      width="23"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentolor"
+      {...props}
+    >
+      <title>Twitter</title>
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
+    </svg>
+  ),
+  radix: (props: IconProps) => (
+    <svg viewBox="0 0 25 25" fill="none" {...props}>
+      <title>Radix</title>
+      <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z" fill="currentcolor" />
+      <path d="M12 0H4V8H12V0Z" fill="currentcolor" />
+      <path
+        d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
+        fill="currentcolor"
+      />
+    </svg>
+  ),
+  aria: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Aria</title>
+      <path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
+    </svg>
+  ),
+  bun: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentcolor"
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <title>Bun</title>
+      <path d="M11.966 22.566c6.609 0 11.966-4.326 11.966-9.661 0-3.308-2.051-6.23-5.204-7.963-1.283-.713-2.291-1.353-3.13-1.885-1.58-1.004-2.555-1.623-3.632-1.623-1.094 0-2.327.783-3.955 1.816a49.78 49.78 0 0 1-2.808 1.692C2.051 6.675 0 9.597 0 12.905c0 5.335 5.357 9.66 11.966 9.66Zm-1.397-17.83a5.885 5.885 0 0 0 .497-2.403c0-.144.201-.186.229-.028.656 2.775-.9 4.15-2.051 4.61-.124.048-.199-.12-.103-.208a5.748 5.748 0 0 0 1.428-1.971Zm2.052-.102a5.795 5.795 0 0 0-.78-2.3v-.015c-.068-.123.086-.263.185-.172 1.956 2.105 1.303 4.055.554 5.037-.082.102-.229-.003-.188-.126a5.837 5.837 0 0 0 .229-2.424Zm1.771-.559a5.708 5.708 0 0 0-1.607-1.801V2.26c-.112-.085-.024-.274.113-.218 2.588 1.084 2.766 3.171 2.452 4.395a.116.116 0 0 1-.048.071.11.11 0 0 1-.153-.026.118.118 0 0 1-.022-.083 5.864 5.864 0 0 0-.735-2.324Zm-5.072.559c-.616.544-1.279.758-2.058.997-.116 0-.194-.078-.155-.18 1.747-.907 2.369-1.645 2.99-2.771 0 0 .155-.117.188.085 0 .303-.348 1.325-.965 1.869Zm4.931 11.205a2.949 2.949 0 0 1-.935 1.549 2.16 2.16 0 0 1-1.282.618 2.167 2.167 0 0 1-1.323-.618 2.95 2.95 0 0 1-.923-1.549.243.243 0 0 1 .064-.197.23.23 0 0 1 .192-.069h3.954a.226.226 0 0 1 .19.07.239.239 0 0 1 .063.196Zm-5.443-2.17a1.85 1.85 0 0 1-2.377-.244 1.969 1.969 0 0 1-.233-2.44c.207-.318.502-.565.846-.711a1.84 1.84 0 0 1 1.089-.11c.365.075.701.26.964.53.264.27.443.616.515.99a1.98 1.98 0 0 1-.108 1.118 1.923 1.923 0 0 1-.696.866Zm8.471.005a1.849 1.849 0 0 1-2.374-.252 1.956 1.956 0 0 1-.546-1.362c0-.383.11-.758.319-1.076.207-.318.502-.566.847-.711a1.84 1.84 0 0 1 1.09-.108c.366.076.702.261.965.533s.44.617.512.993a1.98 1.98 0 0 1-.113 1.118 1.922 1.922 0 0 1-.7.865Z" />
+    </svg>
+  ),
+  npm: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <title>NPM</title>
+      <path
+        d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  yarn: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Yarn</title>
+      <path d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z" />
+    </svg>
+  ),
+  pnpm: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Pnpm</title>
+      <path
+        d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  react: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>React</title>
+      <path
+        d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  tailwind: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Tailwind</title>
+      <path
+        d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  google: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Google</title>
+      <path
+        fill="currentColor"
+        d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+      />
+    </svg>
+  ),
+  apple: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Apple</title>
+      <path
+        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  paypal: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <title>Paypal</title>
+      <path
+        d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  spinner: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <title>Loading Spinner</title>
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  ),
 };
diff --git a/src/components/buttons/animated-button/animated-button.module.css b/src/components/buttons/animated-button/animated-button.module.css
index 31b451af..80b72ec8 100644
--- a/src/components/buttons/animated-button/animated-button.module.css
+++ b/src/components/buttons/animated-button/animated-button.module.css
@@ -1,49 +1,49 @@
 .buttonWrapper::after {
-	content: "";
-	position: absolute;
-	z-index: -1;
-	top: 1px;
-	right: 1px;
-	bottom: 1px;
-	left: 1px;
-	width: calc(100% - 2px);
-	height: calc(100% - 2px);
-	border-radius: 0.3125rem;
-	background-color: white; /* Todo: make this dynamic */
-	background-color: var(--background);
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  border-radius: 0.3125rem;
+  background-color: white; /* Todo: make this dynamic */
+  background-color: var(--background);
 }
 
 .animatedBackground {
-	background-image: conic-gradient(
-		from 0deg at 50% 50%,
-		transparent 0deg,
-		#4f46e5 60deg,
-		transparent 120deg,
-		transparent 360deg
-	);
-	animation: spin 6s linear infinite;
+  background-image: conic-gradient(
+    from 0deg at 50% 50%,
+    transparent 0deg,
+    #4f46e5 60deg,
+    transparent 120deg,
+    transparent 360deg
+  );
+  animation: spin 6s linear infinite;
 }
 
 @keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-	50% {
-	}
-	to {
-		transform: rotate(360deg);
-	}
+  from {
+    transform: rotate(0deg);
+  }
+  50% {
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @media (prefers-color-scheme: dark) {
-	.animatedBackground {
-		background-color: rgba(255, 255, 255, 0.1); /* dark:bg-white/10 */
-		background-image: conic-gradient(
-			from 0deg at 50% 50%,
-			transparent 0deg,
-			#818cf8 60deg,
-			transparent 120deg,
-			transparent 360deg
-		);
-	}
+  .animatedBackground {
+    background-color: rgba(255, 255, 255, 0.1); /* dark:bg-white/10 */
+    background-image: conic-gradient(
+      from 0deg at 50% 50%,
+      transparent 0deg,
+      #818cf8 60deg,
+      transparent 120deg,
+      transparent 360deg
+    );
+  }
 }
diff --git a/src/components/buttons/animated-button/animated-button.tsx b/src/components/buttons/animated-button/animated-button.tsx
index 9e469e0a..16cb7e49 100644
--- a/src/components/buttons/animated-button/animated-button.tsx
+++ b/src/components/buttons/animated-button/animated-button.tsx
@@ -6,11 +6,11 @@ import styles from "./animated-button.module.css";
 
 // Extend the ButtonHTMLAttributes to include all possible button props
 interface AnimatedButtonProps
-	// Todo: fix type
-	extends ButtonProps {
-	children: React.ReactNode;
-	href?: string;
-	color?: string;
+  // Todo: fix type
+  extends ButtonProps {
+  children: React.ReactNode;
+  href?: string;
+  color?: string;
 }
 
 /**
@@ -21,53 +21,53 @@ interface AnimatedButtonProps
  * It passes all received props to the underlying Button.
  */
 const AnimatedButton: React.FC<AnimatedButtonProps> = ({
-	children,
-	className,
-	href,
-	color = "#818cf8",
-	...props
+  children,
+  className,
+  href,
+  color = "#818cf8",
+  ...props
 }) => {
-	const Element = href ? (
-		<Link
-			className={cn(
-				buttonVariants({ variant: "outline" }),
-				`border border-transparent bg-transparent transition-all ease-in-out hover:border-[${color}] text-inherit`,
-				className
-			)}
-			href={href}
-		>
-			{children}
-		</Link>
-	) : (
-		<Button
-			{...props}
-			className={cn(
-				`border border-transparent bg-transparent px-md transition-all duration-1000 ease-in-out hover:border-[${color}] text-inherit`,
-				className
-			)}
-		>
-			{children}
-		</Button>
-	);
+  const Element = href ? (
+    <Link
+      className={cn(
+        buttonVariants({ variant: "outline" }),
+        `border border-transparent bg-transparent transition-all ease-in-out hover:border-[${color}] text-inherit`,
+        className
+      )}
+      href={href}
+    >
+      {children}
+    </Link>
+  ) : (
+    <Button
+      {...props}
+      className={cn(
+        `border border-transparent bg-transparent px-md transition-all duration-1000 ease-in-out hover:border-[${color}] text-inherit`,
+        className
+      )}
+    >
+      {children}
+    </Button>
+  );
 
-	return (
-		<div
-			className={cn(
-				styles.buttonWrapper,
-				"relative z-0 flex min-h-9 items-center justify-center overflow-hidden rounded-md text-black/95 [--background:#fafafc] dark:text-white/95 dark:[--background:#000000]",
-				className
-			)}
-		>
-			<div
-				className={cn(
-					styles.animatedBackground,
-					"absolute z-[-2] m-auto h-[200px] w-[200px] translate-x-[-50%] translate-y-[-50%] bg-cover bg-[0_0] bg-no-repeat",
-					className
-				)}
-			/>
-			{Element}
-		</div>
-	);
+  return (
+    <div
+      className={cn(
+        styles.buttonWrapper,
+        "relative z-0 flex min-h-9 items-center justify-center overflow-hidden rounded-md text-black/95 [--background:#fafafc] dark:text-white/95 dark:[--background:#000000]",
+        className
+      )}
+    >
+      <div
+        className={cn(
+          styles.animatedBackground,
+          "absolute z-[-2] m-auto h-[200px] w-[200px] translate-x-[-50%] translate-y-[-50%] bg-cover bg-[0_0] bg-no-repeat",
+          className
+        )}
+      />
+      {Element}
+    </div>
+  );
 };
 
 export { AnimatedButton };
diff --git a/src/components/buttons/buy-button.tsx b/src/components/buttons/buy-button.tsx
index d3e6ceff..8717fcb6 100644
--- a/src/components/buttons/buy-button.tsx
+++ b/src/components/buttons/buy-button.tsx
@@ -13,26 +13,17 @@ export const BuyButton = () => {
   // Construct the checkout URL with user's email as custom_data
   const checkoutUrl = new URL(routes.external.buy);
   if (session?.user?.email) {
-    checkoutUrl.searchParams.set(
-      "checkout[custom][user_email]",
-      session.user.email
-    );
+    checkoutUrl.searchParams.set("checkout[custom][user_email]", session.user.email);
     // Also pass user ID for additional verification
     if (session.user.id) {
-      checkoutUrl.searchParams.set(
-        "checkout[custom][user_id]",
-        session.user.id
-      );
+      checkoutUrl.searchParams.set("checkout[custom][user_id]", session.user.id);
     }
     // Pre-fill the email field
     checkoutUrl.searchParams.set("checkout[email]", session.user.email);
   }
 
   return (
-    <Link
-      href={checkoutUrl.toString()}
-      className={cn(buttonVariants({ variant: "default" }))}
-    >
+    <Link href={checkoutUrl.toString()} className={cn(buttonVariants({ variant: "default" }))}>
       Get {siteConfig.name}
     </Link>
   );
diff --git a/src/components/buttons/vercel-deploy-button.tsx b/src/components/buttons/vercel-deploy-button.tsx
index 143c419a..0a64b35b 100644
--- a/src/components/buttons/vercel-deploy-button.tsx
+++ b/src/components/buttons/vercel-deploy-button.tsx
@@ -5,37 +5,40 @@ import Link from "next/link";
 import type { FC } from "react";
 
 interface VercelDeployButtonProps {
-	href?: string;
-	className?: string;
+  href?: string;
+  className?: string;
 }
 
-export const VercelDeployButton: FC<VercelDeployButtonProps> = ({ href = routes.external.vercelDeployBones, className }) => {
-	return (
-		<Link
-			href={href}
-			className={cn(
-				buttonVariants({ variant: "default", size: "lg" }),
-				"group relative overflow-hidden transition-all duration-300 ease-out hover:bg-primary-foreground hover:text-primary",
-				className
-			)}
-		>
-			<span className="relative z-10 flex items-center justify-center gap-2">
-				<VercelIcon className="h-5 w-5" />
-				Deploy Now
-			</span>
-		</Link>
-	);
+export const VercelDeployButton: FC<VercelDeployButtonProps> = ({
+  href = routes.external.vercelDeployBones,
+  className,
+}) => {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        buttonVariants({ variant: "default", size: "lg" }),
+        "group relative overflow-hidden transition-all duration-300 ease-out hover:bg-primary-foreground hover:text-primary",
+        className
+      )}
+    >
+      <span className="relative z-10 flex items-center justify-center gap-2">
+        <VercelIcon className="h-5 w-5" />
+        Deploy Now
+      </span>
+    </Link>
+  );
 };
 
 const VercelIcon: FC<{ className?: string }> = ({ className }) => (
-	<svg
-		className={className}
-		viewBox="0 0 76 65"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-label="Vercel Logo"
-		role="img"
-	>
-		<path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor" />
-	</svg>
+  <svg
+    className={className}
+    viewBox="0 0 76 65"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label="Vercel Logo"
+    role="img"
+  >
+    <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor" />
+  </svg>
 );
diff --git a/src/components/footers/footer.tsx b/src/components/footers/footer.tsx
index 3529fe7c..770927b7 100644
--- a/src/components/footers/footer.tsx
+++ b/src/components/footers/footer.tsx
@@ -22,9 +22,7 @@ interface FooterGroup {
   items: FooterItem[];
 }
 
-type FooterElement =
-  | { type: "group"; content: FooterGroup }
-  | { type: "node"; content: ReactNode };
+type FooterElement = { type: "group"; content: FooterGroup } | { type: "node"; content: ReactNode };
 
 export const defaultFooterGroups: FooterElement[] = [
   {
@@ -133,14 +131,12 @@ export const Footer: FC<FooterProps> = ({
           <div className="flex flex-col gap-2xl">
             <Link
               href={routes.home}
-              className="text-4xl font-bold hover:text-primary/80 transition-colors"
+              className="text-4xl font-bold transition-colors hover:text-primary/80"
             >
               <span>{siteConfig.name}</span>
             </Link>
           </div>
-          <div className="flex flex-col flex-wrap md:flex-row lg:gap-20">
-            {groupElements}
-          </div>
+          <div className="flex flex-col flex-wrap md:flex-row lg:gap-20">{groupElements}</div>
         </div>
       </div>
     </footer>
@@ -149,10 +145,5 @@ export const Footer: FC<FooterProps> = ({
 
 // Type guard for LinkItem
 function isLinkItem(item: FooterItem): item is LinkItem {
-  return (
-    item !== null &&
-    typeof item === "object" &&
-    "href" in item &&
-    "label" in item
-  );
+  return item !== null && typeof item === "object" && "href" in item && "label" in item;
 }
diff --git a/src/components/forms/contact-form.tsx b/src/components/forms/contact-form.tsx
index 991b3942..9d67383f 100644
--- a/src/components/forms/contact-form.tsx
+++ b/src/components/forms/contact-form.tsx
@@ -82,7 +82,7 @@ export function ContactForm({ defaultValues, onSuccess, className }: ContactForm
         <div
           className={cn(
             "grid gap-6",
-            form.formState.isSubmitting && "opacity-60 pointer-events-none"
+            form.formState.isSubmitting && "pointer-events-none opacity-60"
           )}
         >
           {/* Name Field */}
diff --git a/src/components/forms/feedback-dialog.tsx b/src/components/forms/feedback-dialog.tsx
index e54910db..8bc9f317 100644
--- a/src/components/forms/feedback-dialog.tsx
+++ b/src/components/forms/feedback-dialog.tsx
@@ -122,9 +122,9 @@ export const FeedbackDialog = ({ trigger, className }: FeedbackDialogProps) => {
             {error && <p className="text-sm text-red-500">{error}</p>}
             {success && <p className="text-sm text-green-500">Thank you for your feedback! 🚀</p>}
             {showEmailFallback && (
-              <div className="p-4 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+              <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950/20">
                 <div className="flex items-start gap-3">
-                  <Mail className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
+                  <Mail className="mt-0.5 h-5 w-5 text-blue-600 dark:text-blue-400" />
                   <div className="space-y-2">
                     <p className="text-sm text-blue-800 dark:text-blue-200">
                       Email service not configured. Click below to open your email client:
@@ -133,7 +133,7 @@ export const FeedbackDialog = ({ trigger, className }: FeedbackDialogProps) => {
                       type="button"
                       size="sm"
                       onClick={handleEmailFallback}
-                      className="bg-blue-600 hover:bg-blue-700 text-white"
+                      className="bg-blue-600 text-white hover:bg-blue-700"
                     >
                       <ExternalLink className="mr-2 h-4 w-4" />
                       Open Email Client
diff --git a/src/components/forms/feedback-popover.tsx b/src/components/forms/feedback-popover.tsx
index 956de34a..e192b71a 100644
--- a/src/components/forms/feedback-popover.tsx
+++ b/src/components/forms/feedback-popover.tsx
@@ -81,9 +81,9 @@ export const FeedbackPopover = () => {
         {success && <span className="text-green-500">Sent 🚀</span>}
         {error && <span className="text-red-500">{error}</span>}
         {showEmailFallback && (
-          <div className="p-3 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950/20">
             <div className="flex items-start gap-2">
-              <Mail className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-0.5" />
+              <Mail className="mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-400" />
               <div className="space-y-2">
                 <p className="text-xs text-blue-800 dark:text-blue-200">
                   Email service not configured. Click to open your email client:
@@ -92,7 +92,7 @@ export const FeedbackPopover = () => {
                   type="button"
                   size="sm"
                   onClick={handleEmailFallback}
-                  className="h-7 px-2 text-xs bg-blue-600 hover:bg-blue-700 text-white"
+                  className="h-7 bg-blue-600 px-2 text-xs text-white hover:bg-blue-700"
                 >
                   <ExternalLink className="mr-1 h-3 w-3" />
                   Open Email
diff --git a/src/components/headers/header.tsx b/src/components/headers/header.tsx
index 6c77cff9..5a5c5f60 100644
--- a/src/components/headers/header.tsx
+++ b/src/components/headers/header.tsx
@@ -54,10 +54,7 @@ export const Header: React.FC<HeaderProps> = ({
   variant = "default",
 }) => {
   const [{ y }] = useWindowScroll();
-  const isOpaque = useMemo(
-    () => variant === "floating" && y && y > 100,
-    [y, variant]
-  );
+  const isOpaque = useMemo(() => variant === "floating" && y && y > 100, [y, variant]);
   const { data: session } = useSession();
   const signInRedirectUrl = useSignInRedirectUrl();
 
@@ -106,21 +103,14 @@ export const Header: React.FC<HeaderProps> = ({
 
           <Sheet>
             <SheetTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="shrink-0 md:hidden"
-              >
+              <Button variant="outline" size="icon" className="shrink-0 md:hidden">
                 <HamburgerMenuIcon className="h-5 w-5" />
                 <span className="sr-only">Toggle navigation menu</span>
               </Button>
             </SheetTrigger>
             <SheetContent side="left">
               <nav className="grid gap-6 font-medium">
-                <Link
-                  href={logoHref}
-                  className="flex items-center gap-2 text-lg font-semibold"
-                >
+                <Link href={logoHref} className="flex items-center gap-2 text-lg font-semibold">
                   {logoIcon}
                   <span className="sr-only">{logoText}</span>
                 </Link>
@@ -149,10 +139,7 @@ export const Header: React.FC<HeaderProps> = ({
                     </Link>
                     <Link
                       href={signInRedirectUrl}
-                      className={cn(
-                        buttonVariants({ variant: "ghost" }),
-                        "w-full justify-center"
-                      )}
+                      className={cn(buttonVariants({ variant: "ghost" }), "w-full justify-center")}
                     >
                       Login
                     </Link>
@@ -162,9 +149,7 @@ export const Header: React.FC<HeaderProps> = ({
                   <>
                     <Link
                       href={routes.docs}
-                      className={cn(
-                        "text-muted-foreground hover:text-foreground"
-                      )}
+                      className={cn("text-muted-foreground hover:text-foreground")}
                     >
                       Documentation
                     </Link>
@@ -188,9 +173,7 @@ export const Header: React.FC<HeaderProps> = ({
                 <Link
                   key={routes.docs}
                   href={routes.docs}
-                  className={cn(
-                    "text-muted-foreground transition-colors hover:text-foreground"
-                  )}
+                  className={cn("text-muted-foreground transition-colors hover:text-foreground")}
                 >
                   Documentation
                 </Link>
@@ -209,13 +192,7 @@ export const Header: React.FC<HeaderProps> = ({
               ))}
             </div>
             <div className="flex items-center gap-2">
-              {!session && (
-                <ThemeToggle
-                  variant="ghost"
-                  size="icon"
-                  className="rounded-full"
-                />
-              )}
+              {!session && <ThemeToggle variant="ghost" size="icon" className="rounded-full" />}
 
               <UserMenu size="sm" />
 
diff --git a/src/components/layouts/main-layout.tsx b/src/components/layouts/main-layout.tsx
index 7953a06c..becc8ca8 100644
--- a/src/components/layouts/main-layout.tsx
+++ b/src/components/layouts/main-layout.tsx
@@ -4,23 +4,23 @@ import { cn } from "@/lib/utils";
 import type React from "react";
 
 export default function MainLayout({
-	children,
-	className,
-	header,
-	footer,
+  children,
+  className,
+  header,
+  footer,
 }: {
-	children: React.ReactNode;
-	header?: React.ReactNode | null;
-	footer?: React.ReactNode | null;
-	className?: string;
+  children: React.ReactNode;
+  header?: React.ReactNode | null;
+  footer?: React.ReactNode | null;
+  className?: string;
 }) {
-	return (
-		<>
-			<div className={cn("", className)}>
-				{header === undefined ? <Header /> : header}
-				{children}
-				{footer === undefined ? <Footer /> : footer}
-			</div>
-		</>
-	);
+  return (
+    <>
+      <div className={cn("", className)}>
+        {header === undefined ? <Header /> : header}
+        {children}
+        {footer === undefined ? <Footer /> : footer}
+      </div>
+    </>
+  );
 }
diff --git a/src/components/layouts/root-layout.tsx b/src/components/layouts/root-layout.tsx
index b03dcf30..2a9b008b 100644
--- a/src/components/layouts/root-layout.tsx
+++ b/src/components/layouts/root-layout.tsx
@@ -7,10 +7,7 @@ import { cn } from "@/lib/utils";
 import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from "next-themes";
 import { ViewTransitions } from "next-view-transitions";
-import {
-  Space_Grotesk as FontSans,
-  Noto_Serif as FontSerif,
-} from "next/font/google";
+import { Space_Grotesk as FontSans, Noto_Serif as FontSerif } from "next/font/google";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
 
diff --git a/src/components/loaders/loader-atoms.tsx b/src/components/loaders/loader-atoms.tsx
index 22ae8ff9..17a79a9b 100644
--- a/src/components/loaders/loader-atoms.tsx
+++ b/src/components/loaders/loader-atoms.tsx
@@ -5,116 +5,115 @@ import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 const loaderVariants = cva("loader", {
-	variants: {
-		size: {
-			default: "w-16 h-16",
-			sm: "w-12 h-12",
-			lg: "w-20 h-20",
-		},
-		color: {
-			default: "[--loader-color:theme(colors.primary.DEFAULT)]",
-			primary: "[--loader-color:theme(colors.primary.DEFAULT)]",
-			secondary: "[--loader-color:theme(colors.secondary.DEFAULT)]",
-			muted: "[--loader-color:theme(colors.muted.DEFAULT)]",
-		},
-	},
-	defaultVariants: {
-		size: "default",
-		color: "default",
-	},
+  variants: {
+    size: {
+      default: "w-16 h-16",
+      sm: "w-12 h-12",
+      lg: "w-20 h-20",
+    },
+    color: {
+      default: "[--loader-color:theme(colors.primary.DEFAULT)]",
+      primary: "[--loader-color:theme(colors.primary.DEFAULT)]",
+      secondary: "[--loader-color:theme(colors.secondary.DEFAULT)]",
+      muted: "[--loader-color:theme(colors.muted.DEFAULT)]",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    color: "default",
+  },
 });
 
 export interface LoaderAtomsProps
-	extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
-		VariantProps<typeof loaderVariants> {
-	label?: string;
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof loaderVariants> {
+  label?: string;
 }
 
 export const LoaderAtoms = React.forwardRef<HTMLDivElement, LoaderAtomsProps>(
-	({ className, size, color, label, ...props }, ref) => {
-		return (
-			// biome-ignore lint/a11y/useSemanticElements: keeping a div preserves the exported HTMLDivElement ref type
-			<div
-				ref={ref}
-				role="status"
-				aria-live="polite"
-				aria-label={label || "Loading"}
-				className={cn("relative", className)}
-				{...props}
-			>
-				<div className={cn(loaderVariants({ size, color }))}>
-					<div className="inner one" />
-					<div className="inner two" />
-					<div className="inner three" />
-				</div>
-				{label && <span className="sr-only">{label}</span>}
-				<style jsx>{`
-					.loader {
-						position: absolute;
-						top: 50%;
-						left: 50%;
-						transform: translate(-50%, -50%);
-						border-radius: 50%;
-						perspective: 800px;
-					}
+  ({ className, size, color, label, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: keeping a div preserves the exported HTMLDivElement ref type
+      <div
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        aria-label={label || "Loading"}
+        className={cn("relative", className)}
+        {...props}
+      >
+        <div className={cn(loaderVariants({ size, color }))}>
+          <div className="inner one" />
+          <div className="inner two" />
+          <div className="inner three" />
+        </div>
+        {label && <span className="sr-only">{label}</span>}
+        <style jsx>{`
+          .loader {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+            perspective: 800px;
+          }
 
-					.inner {
-						position: absolute;
-						box-sizing: border-box;
-						width: 100%;
-						height: 100%;
-						border-radius: 50%;
-					}
+          .inner {
+            position: absolute;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          }
 
-					.inner.one {
-						left: 0%;
-						top: 0%;
-						animation: rotate-one 1s linear infinite;
-						border-bottom: 3px solid var(--loader-color);
-					}
+          .inner.one {
+            left: 0%;
+            top: 0%;
+            animation: rotate-one 1s linear infinite;
+            border-bottom: 3px solid var(--loader-color);
+          }
 
-					.inner.two {
-						right: 0%;
-						top: 0%;
-						animation: rotate-two 1s linear infinite;
-						border-right: 3px solid var(--loader-color);
-					}
+          .inner.two {
+            right: 0%;
+            top: 0%;
+            animation: rotate-two 1s linear infinite;
+            border-right: 3px solid var(--loader-color);
+          }
 
-					.inner.three {
-						right: 0%;
-						bottom: 0%;
-						animation: rotate-three 1s linear infinite;
-						border-top: 3px solid var(--loader-color);
-					}
+          .inner.three {
+            right: 0%;
+            bottom: 0%;
+            animation: rotate-three 1s linear infinite;
+            border-top: 3px solid var(--loader-color);
+          }
 
-					@keyframes rotate-one {
-						0% {
-							transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-						}
-						100% {
-							transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-						}
-					}
+          @keyframes rotate-one {
+            0% {
+              transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+            }
+            100% {
+              transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+            }
+          }
 
-					@keyframes rotate-two {
-						0% {
-							transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-						}
-						100% {
-							transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-						}
-					}
+          @keyframes rotate-two {
+            0% {
+              transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+            }
+            100% {
+              transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+            }
+          }
 
-					@keyframes rotate-three {
-						0% {
-							transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-						}
-						100% {
-							transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-						}
-					}
-				`}</style>
-			</div>
-		);
-	}
+          @keyframes rotate-three {
+            0% {
+              transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+            }
+            100% {
+              transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+            }
+          }
+        `}</style>
+      </div>
+    );
+  }
 );
diff --git a/src/components/mdx/card-group.tsx b/src/components/mdx/card-group.tsx
index 4886acc5..fe1c32dd 100644
--- a/src/components/mdx/card-group.tsx
+++ b/src/components/mdx/card-group.tsx
@@ -1,24 +1,24 @@
 import { cn } from "@/lib/utils";
 
 interface CardGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-	cols?: 1 | 2 | 3 | 4;
-	children: React.ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+  children: React.ReactNode;
 }
 
 export function CardGroup({ cols = 2, children, className, ...props }: CardGroupProps) {
-	return (
-		<div
-			className={cn(
-				"grid gap-4",
-				cols === 1 && "grid-cols-1",
-				cols === 2 && "grid-cols-1 md:grid-cols-2",
-				cols === 3 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-				cols === 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
-				className
-			)}
-			{...props}
-		>
-			{children}
-		</div>
-	);
+  return (
+    <div
+      className={cn(
+        "grid gap-4",
+        cols === 1 && "grid-cols-1",
+        cols === 2 && "grid-cols-1 md:grid-cols-2",
+        cols === 3 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+        cols === 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
 }
diff --git a/src/components/mdx/card.tsx b/src/components/mdx/card.tsx
index e403c31d..4c396064 100644
--- a/src/components/mdx/card.tsx
+++ b/src/components/mdx/card.tsx
@@ -8,57 +8,57 @@ import type { LucideIcon } from "lucide-react";
 import * as React from "react";
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-	title: string;
-	icon?: React.ReactElement | string | LucideIcon;
-	children: React.ReactNode;
+  title: string;
+  icon?: React.ReactElement | string | LucideIcon;
+  children: React.ReactNode;
 }
 
 export function Card({ title, icon, children, className, ...props }: CardProps) {
-	const renderIcon = () => {
-		if (!icon) return null;
+  const renderIcon = () => {
+    if (!icon) return null;
 
-		if (React.isValidElement(icon)) {
-			return React.cloneElement(icon, {
-				className: "h-5 w-5 text-primary/80 shrink-0",
-			} as React.SVGProps<SVGSVGElement>);
-		}
+    if (React.isValidElement(icon)) {
+      return React.cloneElement(icon, {
+        className: "h-5 w-5 text-primary/80 shrink-0",
+      } as React.SVGProps<SVGSVGElement>);
+    }
 
-		if (typeof icon === "string") {
-			// Handle Font Awesome icon string format (e.g., "user", "home", etc.)
-			return (
-				<FontAwesomeIcon
-					icon={icon as IconProp}
-					className="h-4 w-4 text-primary/80"
-					style={{ transform: "scale(1.2)" }}
-				/>
-			);
-		}
+    if (typeof icon === "string") {
+      // Handle Font Awesome icon string format (e.g., "user", "home", etc.)
+      return (
+        <FontAwesomeIcon
+          icon={icon as IconProp}
+          className="h-4 w-4 text-primary/80"
+          style={{ transform: "scale(1.2)" }}
+        />
+      );
+    }
 
-		if (typeof icon === "function") {
-			const Icon = icon;
-			return <Icon className="h-4 w-4 text-primary/80" />;
-		}
+    if (typeof icon === "function") {
+      const Icon = icon;
+      return <Icon className="h-4 w-4 text-primary/80" />;
+    }
 
-		return null;
-	};
+    return null;
+  };
 
-	return (
-		<div
-			className={cn(
-				"relative overflow-hidden rounded-lg border bg-background p-6",
-				className ?? ""
-			)}
-			{...props}
-		>
-			<div className="flex h-full flex-col justify-between">
-				<div className="space-y-2">
-					<div className="flex items-center gap-3">
-						<h3 className="font-semibold">{title}</h3>
-						<div className="absolute right-6 top-6">{renderIcon()}</div>
-					</div>
-					<div className="text-sm text-muted-foreground">{children}</div>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden rounded-lg border bg-background p-6",
+        className ?? ""
+      )}
+      {...props}
+    >
+      <div className="flex h-full flex-col justify-between">
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <h3 className="font-semibold">{title}</h3>
+            <div className="absolute right-6 top-6">{renderIcon()}</div>
+          </div>
+          <div className="text-sm text-muted-foreground">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/primitives/analytics.tsx b/src/components/primitives/analytics.tsx
index e5958e78..88cb5156 100644
--- a/src/components/primitives/analytics.tsx
+++ b/src/components/primitives/analytics.tsx
@@ -4,18 +4,15 @@ import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import Script from "next/script";
 
-const WEBSITE_ID = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID ?? "6e6573f3-66c3-40d7-a161-031b22099a17";
+const WEBSITE_ID =
+  process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID ?? "6e6573f3-66c3-40d7-a161-031b22099a17";
 
 export function Analytics() {
-	return (
-		<>
-			<VercelAnalytics />
-			<SpeedInsights />
-			<Script
-				defer
-				src="https://analytics.lacy.sh/script.js"
-				data-website-id={WEBSITE_ID}
-			/>
-		</>
-	);
+  return (
+    <>
+      <VercelAnalytics />
+      <SpeedInsights />
+      <Script defer src="https://analytics.lacy.sh/script.js" data-website-id={WEBSITE_ID} />
+    </>
+  );
 }
diff --git a/src/components/primitives/balancer.tsx b/src/components/primitives/balancer.tsx
index d752bd4d..a371bf7a 100644
--- a/src/components/primitives/balancer.tsx
+++ b/src/components/primitives/balancer.tsx
@@ -1,5 +1,5 @@
 import { Balancer as BalancerComponent } from "react-wrap-balancer";
 
 export const Balancer = (props: React.ComponentPropsWithoutRef<typeof BalancerComponent>) => {
-	return <BalancerComponent {...props}>{props.children}</BalancerComponent>;
+  return <BalancerComponent {...props}>{props.children}</BalancerComponent>;
 };
diff --git a/src/components/primitives/boundary.tsx b/src/components/primitives/boundary.tsx
index 14a66a60..0559d030 100644
--- a/src/components/primitives/boundary.tsx
+++ b/src/components/primitives/boundary.tsx
@@ -4,42 +4,47 @@ import Link from "next/link";
 import type * as React from "react";
 
 export const Boundary = ({
-	children,
-	className,
-	title,
-	description,
-	actionText = "Try again",
-	href,
-	onAction,
+  children,
+  className,
+  title,
+  description,
+  actionText = "Try again",
+  href,
+  onAction,
 }: {
-	children?: React.ReactNode;
-	className?: string;
-	title: string;
-	description?: string;
-	actionText?: string;
-	href?: string;
-	onAction?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+  title: string;
+  description?: string;
+  actionText?: string;
+  href?: string;
+  onAction?: () => void;
 }) => {
-	return (
-		<>
-			<div className={cn("container flex w-full flex-1 items-center justify-center border border-dashed p-md shadow-sm", className)}>
-				<div className="flex flex-col items-center gap-lg text-center">
-					<h1 className="text-2xl font-bold">{title}</h1>
-					{description && <p className="text-muted-foreground">{description}</p>}
-					{onAction && (
-						<Button type="button" className="" onClick={onAction}>
-							{actionText}
-						</Button>
-					)}
-					{href && (
-						<Link href={href} className={buttonVariants()}>
-							{actionText}
-						</Link>
-					)}
+  return (
+    <>
+      <div
+        className={cn(
+          "container flex w-full flex-1 items-center justify-center border border-dashed p-md shadow-sm",
+          className
+        )}
+      >
+        <div className="flex flex-col items-center gap-lg text-center">
+          <h1 className="text-2xl font-bold">{title}</h1>
+          {description && <p className="text-muted-foreground">{description}</p>}
+          {onAction && (
+            <Button type="button" className="" onClick={onAction}>
+              {actionText}
+            </Button>
+          )}
+          {href && (
+            <Link href={href} className={buttonVariants()}>
+              {actionText}
+            </Link>
+          )}
 
-					{children}
-				</div>
-			</div>
-		</>
-	);
+          {children}
+        </div>
+      </div>
+    </>
+  );
 };
diff --git a/src/components/primitives/divider.tsx b/src/components/primitives/divider.tsx
index 9caee93d..7bd4ba1b 100644
--- a/src/components/primitives/divider.tsx
+++ b/src/components/primitives/divider.tsx
@@ -1,21 +1,21 @@
 import { cn } from "@/lib/utils";
 
 interface DividerProps {
-	text?: string;
-	className?: string;
+  text?: string;
+  className?: string;
 }
 
 export const Divider = ({ text, className }: DividerProps) => {
-	return (
-		<div className="relative">
-			<div className="absolute inset-0 flex items-center">
-				<span className="w-full border-t" />
-			</div>
-			{text && (
-				<div className="relative flex justify-center text-xs uppercase">
-					<span className={cn("bg-background px-2 text-muted-foreground", className)}>{text}</span>
-				</div>
-			)}
-		</div>
-	);
+  return (
+    <div className="relative">
+      <div className="absolute inset-0 flex items-center">
+        <span className="w-full border-t" />
+      </div>
+      {text && (
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className={cn("bg-background px-2 text-muted-foreground", className)}>{text}</span>
+        </div>
+      )}
+    </div>
+  );
 };
diff --git a/src/components/primitives/error-boundary.tsx b/src/components/primitives/error-boundary.tsx
index 30ac4d70..37cf5ce9 100644
--- a/src/components/primitives/error-boundary.tsx
+++ b/src/components/primitives/error-boundary.tsx
@@ -15,8 +15,8 @@ import { redirectWithCode } from "@/lib/utils/redirect-with-code";
  * @see https://nextjs.org/docs/app/api-reference/file-conventions/error
  */
 export interface ErrorPageProps {
-	error: Error & { digest?: string };
-	reset: () => void;
+  error: Error & { digest?: string };
+  reset: () => void;
 }
 
 /**
@@ -30,42 +30,42 @@ export interface ErrorPageProps {
  * The message shows only in development.
  */
 export function ErrorBoundary({ error, reset }: ErrorPageProps) {
-	const signInRedirectUrl = useSignInRedirectUrl();
-	const isDevelopment = process.env.NODE_ENV === "development";
+  const signInRedirectUrl = useSignInRedirectUrl();
+  const isDevelopment = process.env.NODE_ENV === "development";
 
-	useEffect(() => {
-		if (error instanceof AuthenticationError) {
-			logger.info("ErrorBoundary: Authentication error, redirecting to sign in");
-			redirectWithCode(signInRedirectUrl, {
-				code: STATUS_CODES.AUTH.code,
-			});
-			return;
-		}
-		logger.error("ErrorBoundary", error);
-	}, [error, signInRedirectUrl]);
+  useEffect(() => {
+    if (error instanceof AuthenticationError) {
+      logger.info("ErrorBoundary: Authentication error, redirecting to sign in");
+      redirectWithCode(signInRedirectUrl, {
+        code: STATUS_CODES.AUTH.code,
+      });
+      return;
+    }
+    logger.error("ErrorBoundary", error);
+  }, [error, signInRedirectUrl]);
 
-	return (
-		<Boundary
-			title="Something went wrong"
-			description="The rest of the site is working. Try again, or head back to the homepage."
-			className="min-h-[60vh] border-0 shadow-none"
-		>
-			<div className="flex flex-wrap items-center justify-center gap-sm">
-				<Button type="button" onClick={reset}>
-					Try again
-				</Button>
-				<Link href="/" className={buttonVariants({ variant: "outline" })}>
-					Go to homepage
-				</Link>
-			</div>
-			{error.digest && !isDevelopment && (
-				<p className="text-xs text-muted-foreground">Reference {error.digest}</p>
-			)}
-			{isDevelopment && (
-				<pre className="max-w-full overflow-auto rounded-md bg-muted p-sm text-left text-xs">
-					{error.message}
-				</pre>
-			)}
-		</Boundary>
-	);
+  return (
+    <Boundary
+      title="Something went wrong"
+      description="The rest of the site is working. Try again, or head back to the homepage."
+      className="min-h-[60vh] border-0 shadow-none"
+    >
+      <div className="flex flex-wrap items-center justify-center gap-sm">
+        <Button type="button" onClick={reset}>
+          Try again
+        </Button>
+        <Link href="/" className={buttonVariants({ variant: "outline" })}>
+          Go to homepage
+        </Link>
+      </div>
+      {error.digest && !isDevelopment && (
+        <p className="text-xs text-muted-foreground">Reference {error.digest}</p>
+      )}
+      {isDevelopment && (
+        <pre className="max-w-full overflow-auto rounded-md bg-muted p-sm text-left text-xs">
+          {error.message}
+        </pre>
+      )}
+    </Boundary>
+  );
 }
diff --git a/src/components/primitives/error-toast.tsx b/src/components/primitives/error-toast.tsx
index 738a5d7d..e5889f2f 100644
--- a/src/components/primitives/error-toast.tsx
+++ b/src/components/primitives/error-toast.tsx
@@ -6,22 +6,22 @@ import { toast } from "sonner";
 import { STATUS_CODES } from "@/config/status-codes";
 
 export const ErrorToast = () => {
-	const searchParams = useSearchParams();
-	const errorCode = searchParams?.get("code");
+  const searchParams = useSearchParams();
+  const errorCode = searchParams?.get("code");
 
-	useEffect(() => {
-		if (errorCode && Object.keys(STATUS_CODES).includes(errorCode)) {
-			const error = STATUS_CODES[errorCode as keyof typeof STATUS_CODES];
+  useEffect(() => {
+    if (errorCode && Object.keys(STATUS_CODES).includes(errorCode)) {
+      const error = STATUS_CODES[errorCode as keyof typeof STATUS_CODES];
 
-			console.log(error, toast);
-			if (error) {
-				// Todo: renders twice - maybe strict mode is causing this
-				setTimeout(() => {
-					toast.error(error.message);
-				}, 500);
-			}
-		}
-	}, [errorCode]);
+      console.log(error, toast);
+      if (error) {
+        // Todo: renders twice - maybe strict mode is causing this
+        setTimeout(() => {
+          toast.error(error.message);
+        }, 500);
+      }
+    }
+  }, [errorCode]);
 
-	return null;
+  return null;
 };
diff --git a/src/components/primitives/json-ld.tsx b/src/components/primitives/json-ld.tsx
index 326d35aa..73a4bc39 100644
--- a/src/components/primitives/json-ld.tsx
+++ b/src/components/primitives/json-ld.tsx
@@ -1,207 +1,207 @@
 import { siteConfig } from "@/config/site-config";
 
 interface JsonLdProps {
-	organization?: boolean;
-	website?: boolean;
-	softwareSourceCode?: boolean;
-	breadcrumbs?: {
-		name: string;
-		item: string;
-	}[];
-	article?: {
-		headline: string;
-		description: string;
-		image: string;
-		datePublished: string;
-		dateModified: string;
-		author: string;
-	};
-	product?: {
-		name: string;
-		description: string;
-		image: string;
-		price: string;
-		priceCurrency: string;
-	};
-	faq?: {
-		questions: {
-			question: string;
-			answer: string;
-		}[];
-	};
-	localBusiness?: {
-		type: string;
-		name?: string;
-		description?: string;
-		telephone?: string;
-		email?: string;
-		address?: {
-			streetAddress: string;
-			addressLocality: string;
-			addressRegion: string;
-			postalCode: string;
-			addressCountry: string;
-		};
-		openingHours?: string[];
-		priceRange?: string;
-	};
+  organization?: boolean;
+  website?: boolean;
+  softwareSourceCode?: boolean;
+  breadcrumbs?: {
+    name: string;
+    item: string;
+  }[];
+  article?: {
+    headline: string;
+    description: string;
+    image: string;
+    datePublished: string;
+    dateModified: string;
+    author: string;
+  };
+  product?: {
+    name: string;
+    description: string;
+    image: string;
+    price: string;
+    priceCurrency: string;
+  };
+  faq?: {
+    questions: {
+      question: string;
+      answer: string;
+    }[];
+  };
+  localBusiness?: {
+    type: string;
+    name?: string;
+    description?: string;
+    telephone?: string;
+    email?: string;
+    address?: {
+      streetAddress: string;
+      addressLocality: string;
+      addressRegion: string;
+      postalCode: string;
+      addressCountry: string;
+    };
+    openingHours?: string[];
+    priceRange?: string;
+  };
 }
 
 export function JsonLd({
-	organization = true,
-	website = true,
-	softwareSourceCode = true,
-	breadcrumbs,
-	article,
-	product,
-	faq,
-	localBusiness,
+  organization = true,
+  website = true,
+  softwareSourceCode = true,
+  breadcrumbs,
+  article,
+  product,
+  faq,
+  localBusiness,
 }: JsonLdProps) {
-	const structuredData = {
-		"@context": "https://schema.org",
-		"@graph": [
-			organization && {
-				"@type": "Organization",
-				"@id": `${siteConfig.url}/#organization`,
-				name: siteConfig.title,
-				url: siteConfig.url,
-				logo: {
-					"@type": "ImageObject",
-					"@id": `${siteConfig.url}/#logo`,
-					inLanguage: "en-US",
-					url: `${siteConfig.url}/logo.png`,
-					contentUrl: `${siteConfig.url}/logo.png`,
-					width: 512,
-					height: 512,
-					caption: siteConfig.title,
-				},
-				image: { "@id": `${siteConfig.url}/#logo` },
-				sameAs: [siteConfig.links.twitter, siteConfig.links.github].filter(Boolean),
-			},
-			website && {
-				"@type": "WebSite",
-				"@id": `${siteConfig.url}/#website`,
-				url: siteConfig.url,
-				name: siteConfig.title,
-				description: siteConfig.description,
-				publisher: {
-					"@id": `${siteConfig.url}/#organization`,
-				},
-				inLanguage: "en-US",
-			},
-			softwareSourceCode && {
-				"@type": "SoftwareSourceCode",
-				"@id": `${siteConfig.url}/#source-code`,
-				name: siteConfig.title,
-				description: siteConfig.description,
-				url: siteConfig.url,
-				codeRepository: siteConfig.repo.url,
-				programmingLanguage: "TypeScript",
-				author: {
-					"@id": `${siteConfig.url}/#organization`,
-				},
-			},
-			breadcrumbs && {
-				"@type": "BreadcrumbList",
-				"@id": `${siteConfig.url}/#breadcrumb`,
-				itemListElement: [
-					{
-						"@type": "ListItem",
-						position: 1,
-						item: {
-							"@type": "WebPage",
-							"@id": siteConfig.url,
-							url: siteConfig.url,
-							name: "Home",
-						},
-					},
-					...breadcrumbs.map((item, index) => ({
-						"@type": "ListItem",
-						position: index + 2,
-						item: {
-							"@type": "WebPage",
-							"@id": item.item,
-							url: item.item,
-							name: item.name,
-						},
-					})),
-				],
-			},
-			article && {
-				"@type": "Article",
-				"@id": `${siteConfig.url}/#article`,
-				headline: article.headline,
-				description: article.description,
-				image: article.image,
-				datePublished: article.datePublished,
-				dateModified: article.dateModified,
-				author: {
-					"@type": "Person",
-					name: article.author,
-				},
-				publisher: {
-					"@id": `${siteConfig.url}/#organization`,
-				},
-				isPartOf: {
-					"@id": `${siteConfig.url}/#website`,
-				},
-				inLanguage: "en-US",
-			},
-			product && {
-				"@type": "Product",
-				"@id": `${siteConfig.url}/#product`,
-				name: product.name,
-				description: product.description,
-				image: product.image,
-				offers: {
-					"@type": "Offer",
-					price: product.price,
-					priceCurrency: product.priceCurrency,
-				},
-			},
-			faq && {
-				"@type": "FAQPage",
-				"@id": `${siteConfig.url}/#faq`,
-				mainEntity: faq.questions.map((q) => ({
-					"@type": "Question",
-					name: q.question,
-					acceptedAnswer: {
-						"@type": "Answer",
-						text: q.answer,
-					},
-				})),
-			},
-			localBusiness && {
-				"@type": localBusiness.type || "SoftwareApplication",
-				"@id": `${siteConfig.url}/#local-business`,
-				name: localBusiness.name || siteConfig.title,
-				description: localBusiness.description || siteConfig.description,
-				url: siteConfig.url,
-				...(localBusiness.telephone && { telephone: localBusiness.telephone }),
-				...(localBusiness.email && { email: localBusiness.email }),
-				...(localBusiness.address && {
-					address: {
-						"@type": "PostalAddress",
-						...localBusiness.address,
-					},
-				}),
-				...(localBusiness.openingHours && {
-					openingHoursSpecification: localBusiness.openingHours.map((hours) => ({
-						"@type": "OpeningHoursSpecification",
-						dayOfWeek: hours,
-					})),
-				}),
-				...(localBusiness.priceRange && { priceRange: localBusiness.priceRange }),
-				image: { "@id": `${siteConfig.url}/#logo` },
-			},
-		].filter(Boolean),
-	};
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@graph": [
+      organization && {
+        "@type": "Organization",
+        "@id": `${siteConfig.url}/#organization`,
+        name: siteConfig.title,
+        url: siteConfig.url,
+        logo: {
+          "@type": "ImageObject",
+          "@id": `${siteConfig.url}/#logo`,
+          inLanguage: "en-US",
+          url: `${siteConfig.url}/logo.png`,
+          contentUrl: `${siteConfig.url}/logo.png`,
+          width: 512,
+          height: 512,
+          caption: siteConfig.title,
+        },
+        image: { "@id": `${siteConfig.url}/#logo` },
+        sameAs: [siteConfig.links.twitter, siteConfig.links.github].filter(Boolean),
+      },
+      website && {
+        "@type": "WebSite",
+        "@id": `${siteConfig.url}/#website`,
+        url: siteConfig.url,
+        name: siteConfig.title,
+        description: siteConfig.description,
+        publisher: {
+          "@id": `${siteConfig.url}/#organization`,
+        },
+        inLanguage: "en-US",
+      },
+      softwareSourceCode && {
+        "@type": "SoftwareSourceCode",
+        "@id": `${siteConfig.url}/#source-code`,
+        name: siteConfig.title,
+        description: siteConfig.description,
+        url: siteConfig.url,
+        codeRepository: siteConfig.repo.url,
+        programmingLanguage: "TypeScript",
+        author: {
+          "@id": `${siteConfig.url}/#organization`,
+        },
+      },
+      breadcrumbs && {
+        "@type": "BreadcrumbList",
+        "@id": `${siteConfig.url}/#breadcrumb`,
+        itemListElement: [
+          {
+            "@type": "ListItem",
+            position: 1,
+            item: {
+              "@type": "WebPage",
+              "@id": siteConfig.url,
+              url: siteConfig.url,
+              name: "Home",
+            },
+          },
+          ...breadcrumbs.map((item, index) => ({
+            "@type": "ListItem",
+            position: index + 2,
+            item: {
+              "@type": "WebPage",
+              "@id": item.item,
+              url: item.item,
+              name: item.name,
+            },
+          })),
+        ],
+      },
+      article && {
+        "@type": "Article",
+        "@id": `${siteConfig.url}/#article`,
+        headline: article.headline,
+        description: article.description,
+        image: article.image,
+        datePublished: article.datePublished,
+        dateModified: article.dateModified,
+        author: {
+          "@type": "Person",
+          name: article.author,
+        },
+        publisher: {
+          "@id": `${siteConfig.url}/#organization`,
+        },
+        isPartOf: {
+          "@id": `${siteConfig.url}/#website`,
+        },
+        inLanguage: "en-US",
+      },
+      product && {
+        "@type": "Product",
+        "@id": `${siteConfig.url}/#product`,
+        name: product.name,
+        description: product.description,
+        image: product.image,
+        offers: {
+          "@type": "Offer",
+          price: product.price,
+          priceCurrency: product.priceCurrency,
+        },
+      },
+      faq && {
+        "@type": "FAQPage",
+        "@id": `${siteConfig.url}/#faq`,
+        mainEntity: faq.questions.map((q) => ({
+          "@type": "Question",
+          name: q.question,
+          acceptedAnswer: {
+            "@type": "Answer",
+            text: q.answer,
+          },
+        })),
+      },
+      localBusiness && {
+        "@type": localBusiness.type || "SoftwareApplication",
+        "@id": `${siteConfig.url}/#local-business`,
+        name: localBusiness.name || siteConfig.title,
+        description: localBusiness.description || siteConfig.description,
+        url: siteConfig.url,
+        ...(localBusiness.telephone && { telephone: localBusiness.telephone }),
+        ...(localBusiness.email && { email: localBusiness.email }),
+        ...(localBusiness.address && {
+          address: {
+            "@type": "PostalAddress",
+            ...localBusiness.address,
+          },
+        }),
+        ...(localBusiness.openingHours && {
+          openingHoursSpecification: localBusiness.openingHours.map((hours) => ({
+            "@type": "OpeningHoursSpecification",
+            dayOfWeek: hours,
+          })),
+        }),
+        ...(localBusiness.priceRange && { priceRange: localBusiness.priceRange }),
+        image: { "@id": `${siteConfig.url}/#logo` },
+      },
+    ].filter(Boolean),
+  };
 
-	return (
-		<script
-			type="application/ld+json"
-			// biome-ignore lint/security/noDangerouslySetInnerHtml: structured data must be inline for SEO
-			dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
-		/>
-	);
+  return (
+    <script
+      type="application/ld+json"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: structured data must be inline for SEO
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+    />
+  );
 }
diff --git a/src/components/primitives/link-or-button.tsx b/src/components/primitives/link-or-button.tsx
index a461caa6..1864541e 100644
--- a/src/components/primitives/link-or-button.tsx
+++ b/src/components/primitives/link-or-button.tsx
@@ -4,18 +4,18 @@ import type React from "react";
 import type { ReactNode } from "react";
 
 interface CommonProps {
-	className?: string;
-	children: ReactNode;
+  className?: string;
+  children: ReactNode;
 }
 
 type LinkProps = CommonProps & {
-	href: string;
+  href: string;
 } & Omit<React.ComponentProps<typeof Link>, "href" | "className" | "children">;
 type ButtonProps = CommonProps &
-	Omit<React.ComponentProps<typeof Button>, "className" | "children">;
+  Omit<React.ComponentProps<typeof Button>, "className" | "children">;
 
 type LinkOrButtonProps = LinkProps | ButtonProps;
 
 export const LinkOrButton = (props: LinkOrButtonProps) => {
-	return "href" in props ? <Link {...props} /> : <Button {...props} />;
+  return "href" in props ? <Link {...props} /> : <Button {...props} />;
 };
diff --git a/src/components/primitives/link.tsx b/src/components/primitives/link.tsx
index e08ce916..2a0227f1 100644
--- a/src/components/primitives/link.tsx
+++ b/src/components/primitives/link.tsx
@@ -9,45 +9,45 @@ import { SEARCH_PARAM_KEYS } from "@/config/search-param-keys";
 import { siteConfig } from "@/config/site-config";
 
 interface CustomLinkProps {
-	variant?: "default" | ButtonProps["variant"];
-	withRedirect?: boolean;
-	withTransition?: boolean;
+  variant?: "default" | ButtonProps["variant"];
+  withRedirect?: boolean;
+  withTransition?: boolean;
 }
 
 type LinkProps = NextLinkProps &
-	CustomLinkProps & { children: React.ReactNode } & Omit<
-		React.AnchorHTMLAttributes<HTMLAnchorElement>,
-		keyof NextLinkProps
-	>;
+  CustomLinkProps & { children: React.ReactNode } & Omit<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof NextLinkProps
+  >;
 
 export const Link = ({
-	children,
-	variant = "default",
-	withRedirect = false,
-	withTransition = siteConfig?.behavior?.pageTransitions,
-	...props
+  children,
+  variant = "default",
+  withRedirect = false,
+  withTransition = siteConfig?.behavior?.pageTransitions,
+  ...props
 }: LinkProps) => {
-	const pathname = usePathname();
+  const pathname = usePathname();
 
-	const href = useMemo(() => {
-		let newHref = typeof props.href === "string" ? props.href : (props.href.href ?? "");
-		if (withRedirect) {
-			const redirectTo = pathname;
-			if (redirectTo && typeof window !== "undefined") {
-				const nextUrl = new URL(redirectTo, window.location.origin);
-				const params = new URLSearchParams();
-				params.set(SEARCH_PARAM_KEYS.nextUrl, String(nextUrl));
-				newHref = `${newHref}?${String(params)}`;
-			}
-		}
-		return newHref;
-	}, [props.href, withRedirect, pathname]);
+  const href = useMemo(() => {
+    let newHref = typeof props.href === "string" ? props.href : (props.href.href ?? "");
+    if (withRedirect) {
+      const redirectTo = pathname;
+      if (redirectTo && typeof window !== "undefined") {
+        const nextUrl = new URL(redirectTo, window.location.origin);
+        const params = new URLSearchParams();
+        params.set(SEARCH_PARAM_KEYS.nextUrl, String(nextUrl));
+        newHref = `${newHref}?${String(params)}`;
+      }
+    }
+    return newHref;
+  }, [props.href, withRedirect, pathname]);
 
-	const LinkComponent = withTransition ? TransitionsLink : NextLink;
+  const LinkComponent = withTransition ? TransitionsLink : NextLink;
 
-	return (
-		<LinkComponent {...props} href={href}>
-			{children}
-		</LinkComponent>
-	);
+  return (
+    <LinkComponent {...props} href={href}>
+      {children}
+    </LinkComponent>
+  );
 };
diff --git a/src/components/primitives/loader.tsx b/src/components/primitives/loader.tsx
index bdcc35c9..0fa39d4a 100644
--- a/src/components/primitives/loader.tsx
+++ b/src/components/primitives/loader.tsx
@@ -5,36 +5,36 @@ import { LoaderAtoms } from "@/components/loaders/loader-atoms";
 import { cn } from "@/lib/utils";
 
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * The size of the loader indicator
-	 */
-	size?: "sm" | "default" | "lg";
+  /**
+   * The size of the loader indicator
+   */
+  size?: "sm" | "default" | "lg";
 
-	/**
-	 * The color variant of the loader indicator
-	 */
-	color?: "default" | "primary" | "secondary" | "muted";
+  /**
+   * The color variant of the loader indicator
+   */
+  color?: "default" | "primary" | "secondary" | "muted";
 
-	/**
-	 * Whether to show a full-page loader state
-	 */
-	fullPage?: boolean;
+  /**
+   * Whether to show a full-page loader state
+   */
+  fullPage?: boolean;
 
-	/**
-	 * Custom loader text for accessibility
-	 */
-	label?: string;
+  /**
+   * Custom loader text for accessibility
+   */
+  label?: string;
 
-	/**
-	 * Whether to show a backdrop behind the loader
-	 */
-	backdrop?: boolean;
+  /**
+   * Whether to show a backdrop behind the loader
+   */
+  backdrop?: boolean;
 
-	/**
-	 * Whether to fade in the loader indicator
-	 * @default false
-	 */
-	fade?: boolean;
+  /**
+   * Whether to fade in the loader indicator
+   * @default false
+   */
+  fade?: boolean;
 }
 
 /**
@@ -50,33 +50,33 @@ export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
-	(
-		{
-			className,
-			size = "default",
-			color = "default",
-			fullPage = false,
-			label = "Loader...",
-			backdrop = true,
-			fade = false,
-			...props
-		},
-		ref
-	) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"grid place-items-center",
-					fullPage && "fixed inset-0 z-50 p-4 min-h-screen",
-					backdrop && "bg-background/80 backdrop-blur-sm",
-					fade && "duration-300 animate-in fade-in",
-					className
-				)}
-				{...props}
-			>
-				<LoaderAtoms size={size} color={color} label={label} />
-			</div>
-		);
-	}
+  (
+    {
+      className,
+      size = "default",
+      color = "default",
+      fullPage = false,
+      label = "Loader...",
+      backdrop = true,
+      fade = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid place-items-center",
+          fullPage && "fixed inset-0 z-50 min-h-screen p-4",
+          backdrop && "bg-background/80 backdrop-blur-sm",
+          fade && "duration-300 animate-in fade-in",
+          className
+        )}
+        {...props}
+      >
+        <LoaderAtoms size={size} color={color} label={label} />
+      </div>
+    );
+  }
 );
diff --git a/src/components/primitives/masonry.tsx b/src/components/primitives/masonry.tsx
index 49962551..dcf62427 100644
--- a/src/components/primitives/masonry.tsx
+++ b/src/components/primitives/masonry.tsx
@@ -3,53 +3,53 @@ import { useMemo } from "react";
 import { BlurFade } from "@/components/ui/blur-fade";
 
 interface MasonryProps<T> {
-	items: T[];
-	renderItem: (item: T, index: number) => React.ReactNode;
-	columns?: number;
-	gap?: number;
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  columns?: number;
+  gap?: number;
 }
 
 export function Masonry<T>({ items, renderItem, columns = 3, gap = 4 }: MasonryProps<T>) {
-	return (
-		<section id="masonry">
-			<div
-				className={`columns-${columns} gap-${gap}`}
-				style={{ columnCount: columns, columnGap: `${gap * 0.25}rem` }}
-			>
-				{items.map((item, idx) => (
-					<BlurFade key={idx} delay={0.25 + idx * 0.05} inView>
-						<div className="mb-4 break-inside-avoid">{renderItem(item, idx)}</div>
-					</BlurFade>
-				))}
-			</div>
-		</section>
-	);
+  return (
+    <section id="masonry">
+      <div
+        className={`columns-${columns} gap-${gap}`}
+        style={{ columnCount: columns, columnGap: `${gap * 0.25}rem` }}
+      >
+        {items.map((item, idx) => (
+          <BlurFade key={idx} delay={0.25 + idx * 0.05} inView>
+            <div className="mb-4 break-inside-avoid">{renderItem(item, idx)}</div>
+          </BlurFade>
+        ))}
+      </div>
+    </section>
+  );
 }
 
 // Example usage with images
 const ExampleMasonry: React.FC = () => {
-	const images = useMemo(() => {
-		return Array.from({ length: 9 }, (_, i) => {
-			// const isLandscape = Math.random() > 0.5;
-			const width = Math.floor(Math.random() * (800 - 600 + 1) + 600);
-			const height = Math.floor(Math.random() * (800 - 600 + 1) + 600);
-			return `https://picsum.photos/seed/${i + 1}/${width}/${height}`;
-		});
-	}, []);
+  const images = useMemo(() => {
+    return Array.from({ length: 9 }, (_, i) => {
+      // const isLandscape = Math.random() > 0.5;
+      const width = Math.floor(Math.random() * (800 - 600 + 1) + 600);
+      const height = Math.floor(Math.random() * (800 - 600 + 1) + 600);
+      return `https://picsum.photos/seed/${i + 1}/${width}/${height}`;
+    });
+  }, []);
 
-	return (
-		<Masonry
-			items={images}
-			renderItem={(imageUrl, idx) => (
-				<img
-					className="w-full rounded-lg object-contain"
-					src={imageUrl}
-					alt={`Random stock placeholder ${idx + 1}`}
-					loading="lazy"
-				/>
-			)}
-		/>
-	);
+  return (
+    <Masonry
+      items={images}
+      renderItem={(imageUrl, idx) => (
+        <img
+          className="w-full rounded-lg object-contain"
+          src={imageUrl}
+          alt={`Random stock placeholder ${idx + 1}`}
+          loading="lazy"
+        />
+      )}
+    />
+  );
 };
 
 export default ExampleMasonry;
diff --git a/src/components/primitives/modal-context.tsx b/src/components/primitives/modal-context.tsx
index b7e7f3af..93e99d6f 100644
--- a/src/components/primitives/modal-context.tsx
+++ b/src/components/primitives/modal-context.tsx
@@ -5,11 +5,11 @@ import { createContext, useContext, type ReactNode } from "react";
 const ModalContext = createContext<boolean>(false);
 
 interface ModalProviderProps {
-	children: ReactNode;
+  children: ReactNode;
 }
 
 export function ModalProvider({ children }: ModalProviderProps) {
-	return <ModalContext.Provider value={true}>{children}</ModalContext.Provider>;
+  return <ModalContext.Provider value={true}>{children}</ModalContext.Provider>;
 }
 
 /**
@@ -17,5 +17,5 @@ export function ModalProvider({ children }: ModalProviderProps) {
  * Useful for changing navigation behavior (e.g., using router.replace instead of Link).
  */
 export function useIsModal() {
-	return useContext(ModalContext);
+  return useContext(ModalContext);
 }
diff --git a/src/components/primitives/modal.tsx b/src/components/primitives/modal.tsx
index 1191d614..3bd2f3ea 100644
--- a/src/components/primitives/modal.tsx
+++ b/src/components/primitives/modal.tsx
@@ -6,173 +6,173 @@ import { useEffect, useMemo } from "react";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { Button } from "@/components/ui/button";
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import {
-	Drawer,
-	DrawerClose,
-	DrawerContent,
-	DrawerDescription,
-	DrawerFooter,
-	DrawerHeader,
-	DrawerTitle,
-	DrawerTrigger,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
 } from "@/components/ui/drawer";
 import { debounce } from "@/lib/utils/debounce";
 import { ModalProvider } from "./modal-context";
 
 interface DrawerDialogProps {
-	asChild?: boolean;
-	routeBack?: boolean;
-	trigger?: React.ReactNode;
-	dialogTitle?: string;
-	dialogDescription?: string;
-	open?: boolean;
-	onOpenChange?: (open: boolean) => void;
-	autoCloseOnRouteChange?: boolean;
-	children: React.ReactNode;
-	className?: string;
+  asChild?: boolean;
+  routeBack?: boolean;
+  trigger?: React.ReactNode;
+  dialogTitle?: string;
+  dialogDescription?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  autoCloseOnRouteChange?: boolean;
+  children: React.ReactNode;
+  className?: string;
 }
 
 export function Modal({
-	asChild = false,
-	routeBack = false,
-	trigger,
-	dialogTitle,
-	dialogDescription,
-	open = true,
-	children,
-	onOpenChange,
-	autoCloseOnRouteChange = true,
-	className,
-	...props
+  asChild = false,
+  routeBack = false,
+  trigger,
+  dialogTitle,
+  dialogDescription,
+  open = true,
+  children,
+  onOpenChange,
+  autoCloseOnRouteChange = true,
+  className,
+  ...props
 }: DrawerDialogProps) {
-	const router = useRouter();
-	const pathname = usePathname();
-	const isMobile = useIsMobile();
-	const [isOpen, setIsOpen] = React.useState(open);
-	const closingDueToRouteChange = React.useRef(false);
-	const hasHandledInitialRoute = React.useRef(false);
-	const previousPathname = React.useRef(pathname);
+  const router = useRouter();
+  const pathname = usePathname();
+  const isMobile = useIsMobile();
+  const [isOpen, setIsOpen] = React.useState(open);
+  const closingDueToRouteChange = React.useRef(false);
+  const hasHandledInitialRoute = React.useRef(false);
+  const previousPathname = React.useRef(pathname);
 
-	// Sync isOpen state with open prop when it changes
-	useEffect(() => {
-		setIsOpen(open);
-	}, [open]);
+  // Sync isOpen state with open prop when it changes
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
 
-	// Don't immediately close the modal, we need to wait for the modal to animate closed before we should navigate
-	// @see https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
-	const debouncedRouteBack = useMemo(() => debounce(() => router.back(), 300), [router]);
+  // Don't immediately close the modal, we need to wait for the modal to animate closed before we should navigate
+  // @see https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals
+  const debouncedRouteBack = useMemo(() => debounce(() => router.back(), 300), [router]);
 
-	// When the route path changes (e.g., navigating from one intercepted modal to another),
-	// close the current modal without triggering router.back(). This prevents canceling
-	// the forward navigation initiated by the new link.
-	useEffect(() => {
-		if (!autoCloseOnRouteChange) return;
-		if (!hasHandledInitialRoute.current) {
-			hasHandledInitialRoute.current = true;
-			previousPathname.current = pathname;
-			return;
-		}
+  // When the route path changes (e.g., navigating from one intercepted modal to another),
+  // close the current modal without triggering router.back(). This prevents canceling
+  // the forward navigation initiated by the new link.
+  useEffect(() => {
+    if (!autoCloseOnRouteChange) return;
+    if (!hasHandledInitialRoute.current) {
+      hasHandledInitialRoute.current = true;
+      previousPathname.current = pathname;
+      return;
+    }
 
-		// Only close if pathname actually changed
-		if (previousPathname.current === pathname) return;
+    // Only close if pathname actually changed
+    if (previousPathname.current === pathname) return;
 
-		previousPathname.current = pathname;
-		closingDueToRouteChange.current = true;
-		setIsOpen(false);
-		const timeoutId = window.setTimeout(() => {
-			closingDueToRouteChange.current = false;
-		}, 400);
-		return () => window.clearTimeout(timeoutId);
-	}, [pathname, autoCloseOnRouteChange]);
+    previousPathname.current = pathname;
+    closingDueToRouteChange.current = true;
+    setIsOpen(false);
+    const timeoutId = window.setTimeout(() => {
+      closingDueToRouteChange.current = false;
+    }, 400);
+    return () => window.clearTimeout(timeoutId);
+  }, [pathname, autoCloseOnRouteChange]);
 
-	const handleOpenChange = (open: boolean) => {
-		setIsOpen(open);
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
 
-		if (onOpenChange) {
-			return onOpenChange(open);
-		}
+    if (onOpenChange) {
+      return onOpenChange(open);
+    }
 
-		if (!open && routeBack && !closingDueToRouteChange.current) {
-			debouncedRouteBack();
-		}
-	};
+    if (!open && routeBack && !closingDueToRouteChange.current) {
+      debouncedRouteBack();
+    }
+  };
 
-	useEffect(() => {
-		return () => {
-			const debounced = debouncedRouteBack as typeof debouncedRouteBack & { cancel?: () => void };
-			if (typeof debounced.cancel === "function") {
-				debounced.cancel();
-			}
-		};
-	}, [debouncedRouteBack]);
+  useEffect(() => {
+    return () => {
+      const debounced = debouncedRouteBack as typeof debouncedRouteBack & { cancel?: () => void };
+      if (typeof debounced.cancel === "function") {
+        debounced.cancel();
+      }
+    };
+  }, [debouncedRouteBack]);
 
-	// Using Tailwind responsive classes to conditionally render Dialog or Drawer
-	// md: breakpoint is typically 768px which is a common tablet/desktop breakpoint
-	return (
-		<>
-			{/* Dialog for desktop - hidden on small screens, visible on medium and up */}
-			{!isMobile ? (
-				<Dialog
-					onOpenChange={(open) => handleOpenChange(open)}
-					open={typeof open === "undefined" ? isOpen : open}
-					{...props}
-				>
-					{trigger && <DialogTrigger asChild={asChild}>{trigger}</DialogTrigger>}
+  // Using Tailwind responsive classes to conditionally render Dialog or Drawer
+  // md: breakpoint is typically 768px which is a common tablet/desktop breakpoint
+  return (
+    <>
+      {/* Dialog for desktop - hidden on small screens, visible on medium and up */}
+      {!isMobile ? (
+        <Dialog
+          onOpenChange={(open) => handleOpenChange(open)}
+          open={typeof open === "undefined" ? isOpen : open}
+          {...props}
+        >
+          {trigger && <DialogTrigger asChild={asChild}>{trigger}</DialogTrigger>}
 
-					<DialogContent className={className}>
-						<ModalProvider>
-							<DialogHeader>
-								{dialogTitle ? (
-									<DialogTitle>{dialogTitle}</DialogTitle>
-								) : (
-									<DialogTitle className="sr-only">
-										{dialogTitle ?? "Modal dialog window"}
-									</DialogTitle>
-								)}
-								{dialogDescription && <DialogDescription>{dialogDescription}</DialogDescription>}
-							</DialogHeader>
-							{children}
-						</ModalProvider>
-					</DialogContent>
-				</Dialog>
-			) : (
-				<>
-					{/* Drawer for mobile - visible on small screens, hidden on medium and up */}
-					<Drawer
-						onOpenChange={(open) => handleOpenChange(open)}
-						open={typeof open === "undefined" ? isOpen : open}
-					>
-						{trigger && <DrawerTrigger asChild={asChild}>{trigger}</DrawerTrigger>}
-						<DrawerContent>
-							<ModalProvider>
-								<DrawerHeader className="text-left">
-									<DrawerTitle className={dialogTitle ? "" : "sr-only"}>
-										{dialogTitle ?? "Modal"}
-									</DrawerTitle>
-									<DrawerDescription className={dialogDescription ? "" : "sr-only"}>
-										{dialogDescription ?? ""}
-									</DrawerDescription>
-								</DrawerHeader>
-								{children}
-								<DrawerFooter className="pt-2">
-									<DrawerClose asChild>
-										<Button type="button" variant="outline">
-											Cancel
-										</Button>
-									</DrawerClose>
-								</DrawerFooter>
-							</ModalProvider>
-						</DrawerContent>
-					</Drawer>
-				</>
-			)}
-		</>
-	);
+          <DialogContent className={className}>
+            <ModalProvider>
+              <DialogHeader>
+                {dialogTitle ? (
+                  <DialogTitle>{dialogTitle}</DialogTitle>
+                ) : (
+                  <DialogTitle className="sr-only">
+                    {dialogTitle ?? "Modal dialog window"}
+                  </DialogTitle>
+                )}
+                {dialogDescription && <DialogDescription>{dialogDescription}</DialogDescription>}
+              </DialogHeader>
+              {children}
+            </ModalProvider>
+          </DialogContent>
+        </Dialog>
+      ) : (
+        <>
+          {/* Drawer for mobile - visible on small screens, hidden on medium and up */}
+          <Drawer
+            onOpenChange={(open) => handleOpenChange(open)}
+            open={typeof open === "undefined" ? isOpen : open}
+          >
+            {trigger && <DrawerTrigger asChild={asChild}>{trigger}</DrawerTrigger>}
+            <DrawerContent>
+              <ModalProvider>
+                <DrawerHeader className="text-left">
+                  <DrawerTitle className={dialogTitle ? "" : "sr-only"}>
+                    {dialogTitle ?? "Modal"}
+                  </DrawerTitle>
+                  <DrawerDescription className={dialogDescription ? "" : "sr-only"}>
+                    {dialogDescription ?? ""}
+                  </DrawerDescription>
+                </DrawerHeader>
+                {children}
+                <DrawerFooter className="pt-2">
+                  <DrawerClose asChild>
+                    <Button type="button" variant="outline">
+                      Cancel
+                    </Button>
+                  </DrawerClose>
+                </DrawerFooter>
+              </ModalProvider>
+            </DrawerContent>
+          </Drawer>
+        </>
+      )}
+    </>
+  );
 }
diff --git a/src/components/primitives/page-header.tsx b/src/components/primitives/page-header.tsx
index ca304389..80a4f5e2 100644
--- a/src/components/primitives/page-header.tsx
+++ b/src/components/primitives/page-header.tsx
@@ -2,50 +2,50 @@ import { cn } from "@/lib/utils";
 import type React from "react";
 
 function PageHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-	return (
-		<section
-			className={cn(
-				"mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10",
-				className
-			)}
-			{...props}
-		>
-			{children}
-		</section>
-	);
+  return (
+    <section
+      className={cn(
+        "mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </section>
+  );
 }
 
 function PageHeaderHeading({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
-	return (
-		<h1
-			className={cn(
-				"text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1] w-full",
-				className
-			)}
-			{...props}
-		/>
-	);
+  return (
+    <h1
+      className={cn(
+        "w-full text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]",
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
 function PageHeaderDescription({
-	className,
-	...props
+  className,
+  ...props
 }: React.HTMLAttributes<HTMLParagraphElement>) {
-	return (
-		<p
-			className={cn("max-w-2xl text-balance text-lg font-light text-foreground", className)}
-			{...props}
-		/>
-	);
+  return (
+    <p
+      className={cn("max-w-2xl text-balance text-lg font-light text-foreground", className)}
+      {...props}
+    />
+  );
 }
 
 function PageActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-	return (
-		<div
-			className={cn("flex w-full items-center justify-start gap-2 py-2", className)}
-			{...props}
-		/>
-	);
+  return (
+    <div
+      className={cn("flex w-full items-center justify-start gap-2 py-2", className)}
+      {...props}
+    />
+  );
 }
 
 export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading };
diff --git a/src/components/primitives/progressive-blur.tsx b/src/components/primitives/progressive-blur.tsx
index 5def540e..0fbcefa9 100644
--- a/src/components/primitives/progressive-blur.tsx
+++ b/src/components/primitives/progressive-blur.tsx
@@ -1,86 +1,81 @@
 import React from "react";
 
 type ProgressiveBlurProps = {
-    className?: string;
-    backgroundColor?: string;
-    position?: "top" | "bottom";
-    height?: string;
-    blurAmount?: string;
+  className?: string;
+  backgroundColor?: string;
+  position?: "top" | "bottom";
+  height?: string;
+  blurAmount?: string;
 };
 
 const ProgressiveBlur = ({
-    className = "",
-    backgroundColor = "#f5f4f3",
-    position = "top",
-    height = "150px",
-    blurAmount = "4px",
+  className = "",
+  backgroundColor = "#f5f4f3",
+  position = "top",
+  height = "150px",
+  blurAmount = "4px",
 }: ProgressiveBlurProps) => {
-    const isTop = position === "top";
+  const isTop = position === "top";
 
-    return (
-        <div
-            className={`pointer-events-none absolute left-0 w-full select-none ${className}`}
-            style={{
-                [isTop ? "top" : "bottom"]: 0,
-                height,
-                background: isTop
-                    ? `linear-gradient(to top, transparent, ${backgroundColor})`
-                    : `linear-gradient(to bottom, transparent, ${backgroundColor})`,
-                maskImage: isTop
-                    ? `linear-gradient(to bottom, ${backgroundColor} 50%, transparent)`
-                    : `linear-gradient(to top, ${backgroundColor} 50%, transparent)`,
-                WebkitBackdropFilter: `blur(${blurAmount})`,
-                backdropFilter: `blur(${blurAmount})`,
-                WebkitUserSelect: "none",
-                userSelect: "none",
-            }}
-        />
-    );
+  return (
+    <div
+      className={`pointer-events-none absolute left-0 w-full select-none ${className}`}
+      style={{
+        [isTop ? "top" : "bottom"]: 0,
+        height,
+        background: isTop
+          ? `linear-gradient(to top, transparent, ${backgroundColor})`
+          : `linear-gradient(to bottom, transparent, ${backgroundColor})`,
+        maskImage: isTop
+          ? `linear-gradient(to bottom, ${backgroundColor} 50%, transparent)`
+          : `linear-gradient(to top, ${backgroundColor} 50%, transparent)`,
+        WebkitBackdropFilter: `blur(${blurAmount})`,
+        backdropFilter: `blur(${blurAmount})`,
+        WebkitUserSelect: "none",
+        userSelect: "none",
+      }}
+    />
+  );
 };
 
 const Skiper41 = () => {
-    return (
-        <div className="relative flex h-full w-full flex-col items-center justify-center bg-[#f5f4f3] text-black/40">
-            <ProgressiveBlur position="top" backgroundColor="#f5f4f3" />
-            <ProgressiveBlur position="bottom" backgroundColor="#f5f4f3" />
+  return (
+    <div className="relative flex h-full w-full flex-col items-center justify-center bg-[#f5f4f3] text-black/40">
+      <ProgressiveBlur position="top" backgroundColor="#f5f4f3" />
+      <ProgressiveBlur position="bottom" backgroundColor="#f5f4f3" />
 
-            <div className="flex h-[calc(100vh-1rem)] w-full flex-col items-center overflow-scroll">
-                <div className="mt-42 grid content-start justify-items-center gap-6 text-center text-black">
-                    <span className="relative max-w-[12ch] text-xs uppercase leading-tight opacity-40 after:absolute after:left-1/2 after:top-full after:h-16 after:w-px after:bg-gradient-to-b after:from-white after:to-black after:content-['']">
-                        Scroll down to see the effect
-                    </span>
-                </div>
+      <div className="flex h-[calc(100vh-1rem)] w-full flex-col items-center overflow-scroll">
+        <div className="mt-42 grid content-start justify-items-center gap-6 text-center text-black">
+          <span className="relative max-w-[12ch] text-xs uppercase leading-tight opacity-40 after:absolute after:left-1/2 after:top-full after:h-16 after:w-px after:bg-gradient-to-b after:from-white after:to-black after:content-['']">
+            Scroll down to see the effect
+          </span>
+        </div>
 
-                <div className="mt-24 w-full max-w-lg space-y-20 px-5 text-justify">
-                    {Array.from({ length: 10 }).map((_, index) => (
-                        <div key={index}>
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                            Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae
-                            voluptatibus, natus iure ipsa velit odit quibusdam illum. Quaerat
-                            cumque laudantium libero reprehenderit perferendis quo nulla
-                            voluptate? Repellat tenetur labore exercitationem dicta libero
-                            voluptate suscipit, iusto ea assumenda. Ipsa enim, quidem atque
-                            modi error eaque, debitis perferendis, hic iste libero dignissimos
-                            ea! Quod inventore beatae aspernatur nulla rem perferendis aperiam
-                            at debitis delectus odit quia animi ex mollitia vero molestias
-                            itaque deleniti, quos exercitationem consequatur assumenda dolor?
-                            Quod reiciendis in similique reprehenderit commodi quo blanditiis
-                            nobis hic ea optio illum placeat officia alias quasi autem earum
-                            quos obcaecati, voluptatum corporis quisquam. Quisquam iste, quas
-                            explicabo omnis harum aut quam adipisci, voluptatem saepe
-                            accusantium doloribus repellendus amet culpa magnam ex et dolores
-                            accusamus commodi facere aliquam voluptatum alias? Officia
-                            expedita ut vel? Beatae deserunt sequi id eos libero suscipit
-                            totam cum, sed architecto atque quisquam et incidunt quod fuga
-                            ullam repellat assumenda quos ab, voluptatum sint nesciunt? Ad
-                            sapiente est laborum quam sint eius sequi. Eum, veniam
-                            dignissimos.
-                        </div>
-                    ))}
-                </div>
+        <div className="mt-24 w-full max-w-lg space-y-20 px-5 text-justify">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <div key={index}>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, reiciendis eum
+              vitae nostrum, temporibus repudiandae voluptatibus, natus iure ipsa velit odit
+              quibusdam illum. Quaerat cumque laudantium libero reprehenderit perferendis quo nulla
+              voluptate? Repellat tenetur labore exercitationem dicta libero voluptate suscipit,
+              iusto ea assumenda. Ipsa enim, quidem atque modi error eaque, debitis perferendis, hic
+              iste libero dignissimos ea! Quod inventore beatae aspernatur nulla rem perferendis
+              aperiam at debitis delectus odit quia animi ex mollitia vero molestias itaque
+              deleniti, quos exercitationem consequatur assumenda dolor? Quod reiciendis in
+              similique reprehenderit commodi quo blanditiis nobis hic ea optio illum placeat
+              officia alias quasi autem earum quos obcaecati, voluptatum corporis quisquam. Quisquam
+              iste, quas explicabo omnis harum aut quam adipisci, voluptatem saepe accusantium
+              doloribus repellendus amet culpa magnam ex et dolores accusamus commodi facere aliquam
+              voluptatum alias? Officia expedita ut vel? Beatae deserunt sequi id eos libero
+              suscipit totam cum, sed architecto atque quisquam et incidunt quod fuga ullam repellat
+              assumenda quos ab, voluptatum sint nesciunt? Ad sapiente est laborum quam sint eius
+              sequi. Eum, veniam dignissimos.
             </div>
+          ))}
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export { ProgressiveBlur, Skiper41 };
diff --git a/src/components/primitives/prose.tsx b/src/components/primitives/prose.tsx
index dfecaf83..5e7dc785 100644
--- a/src/components/primitives/prose.tsx
+++ b/src/components/primitives/prose.tsx
@@ -7,13 +7,7 @@ interface ProseProps extends HTMLAttributes<HTMLDivElement> {
 
 export function Prose({ children, className, unstyled, ...props }: ProseProps) {
   return (
-    <div
-      className={cn(
-        !unstyled && "prose prose-slate dark:prose-invert",
-        className,
-      )}
-      {...props}
-    >
+    <div className={cn(!unstyled && "prose prose-slate dark:prose-invert", className)} {...props}>
       {children}
     </div>
   );
diff --git a/src/components/primitives/scroll-fade.tsx b/src/components/primitives/scroll-fade.tsx
index 261f0a8f..92cb5231 100644
--- a/src/components/primitives/scroll-fade.tsx
+++ b/src/components/primitives/scroll-fade.tsx
@@ -3,29 +3,29 @@ import React from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 
 const ScrollFade = () => {
-    return (
-        <div className="bg-muted flex h-full w-full flex-col items-center justify-center gap-10">
-            <div className="-mt-10 mb-20 grid content-start justify-items-center gap-6 text-center">
-                <span className="after:to-foreground relative max-w-[12ch] text-xs uppercase leading-tight opacity-40 after:absolute after:left-1/2 after:top-full after:h-16 after:w-px after:bg-gradient-to-b after:from-transparent after:content-['']">
-                    see the fade while scroll
-                </span>
-            </div>
-            <div className="rounded-xl border">
-                <ScrollArea className="w-62 h-72 rounded-xl">
-                    <div className="space-y-1 p-1">
-                        {Array.from({ length: 11 }).map((_, index) => (
-                            <div
-                                key={index}
-                                className="text-foreground/30 hover:bg-foreground/10 bg-foreground/5 flex h-10 w-full items-center gap-2 rounded-lg px-4"
-                            >
-                                00{index} <div className="bg-foreground/10 h-px flex-1"></div>
-                            </div>
-                        ))}
-                    </div>
-                </ScrollArea>
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-10 bg-muted">
+      <div className="-mt-10 mb-20 grid content-start justify-items-center gap-6 text-center">
+        <span className="relative max-w-[12ch] text-xs uppercase leading-tight opacity-40 after:absolute after:left-1/2 after:top-full after:h-16 after:w-px after:bg-gradient-to-b after:from-transparent after:to-foreground after:content-['']">
+          see the fade while scroll
+        </span>
+      </div>
+      <div className="rounded-xl border">
+        <ScrollArea className="w-62 h-72 rounded-xl">
+          <div className="space-y-1 p-1">
+            {Array.from({ length: 11 }).map((_, index) => (
+              <div
+                key={index}
+                className="flex h-10 w-full items-center gap-2 rounded-lg bg-foreground/5 px-4 text-foreground/30 hover:bg-foreground/10"
+              >
+                00{index} <div className="h-px flex-1 bg-foreground/10"></div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
 };
 
 export { ScrollFade };
diff --git a/src/components/primitives/section.tsx b/src/components/primitives/section.tsx
index a107edfe..d4deb25d 100644
--- a/src/components/primitives/section.tsx
+++ b/src/components/primitives/section.tsx
@@ -4,97 +4,96 @@ import { type VariantProps, cva } from "class-variance-authority";
 import type React from "react";
 
 const sectionStyles = cva(
-	// Base styles that apply to all variants
-	"w-full container flex flex-col items-center justify-center",
-	{
-		variants: {
-			variant: {
-				default: "gap-2xl mt-lg",
-				user: "gap-lg bg-muted/50 rounded-lg p-xl",
-				bleed: "max-w-none",
-			},
-			size: {
-				default: "w-full",
-				narrow: "max-w-2xl",
-				wide: "max-w-4xl",
-				full: "w-full",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	}
+  // Base styles that apply to all variants
+  "w-full container flex flex-col items-center justify-center",
+  {
+    variants: {
+      variant: {
+        default: "gap-2xl mt-lg",
+        user: "gap-lg bg-muted/50 rounded-lg p-xl",
+        bleed: "max-w-none",
+      },
+      size: {
+        default: "w-full",
+        narrow: "max-w-2xl",
+        wide: "max-w-4xl",
+        full: "w-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
 );
 
 export interface SectionProps
-	extends React.HTMLAttributes<HTMLElement>,
-		VariantProps<typeof sectionStyles> {
-	children: React.ReactNode;
+  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionStyles> {
+  children: React.ReactNode;
 }
 
 export const Section = ({
-	children,
-	variant = "default",
-	size = "default",
-	className,
-	...props
+  children,
+  variant = "default",
+  size = "default",
+  className,
+  ...props
 }: SectionProps) => (
-	<section className={cn(sectionStyles({ variant, size }), className)} {...props}>
-		{children}
-	</section>
+  <section className={cn(sectionStyles({ variant, size }), className)} {...props}>
+    {children}
+  </section>
 );
 
 export const SectionBadge = ({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: React.ReactNode;
-	className?: string;
+  children: React.ReactNode;
+  className?: string;
 }) => (
-	<Badge
-		variant="secondary"
-		className={cn("rounded-full px-4 py-1 text-sm inline-flex gap-2", className)}
-	>
-		{children}
-	</Badge>
+  <Badge
+    variant="secondary"
+    className={cn("inline-flex gap-2 rounded-full px-4 py-1 text-sm", className)}
+  >
+    {children}
+  </Badge>
 );
 
 export const SectionHeader = ({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: React.ReactNode;
-	className?: string;
+  children: React.ReactNode;
+  className?: string;
 }) => (
-	<h3
-		className={cn(
-			"font-heading text-balance text-3xl font-semibold tracking-tight sm:text-4xl",
-			className
-		)}
-	>
-		{children}
-	</h3>
+  <h3
+    className={cn(
+      "font-heading text-balance text-3xl font-semibold tracking-tight sm:text-4xl",
+      className
+    )}
+  >
+    {children}
+  </h3>
 );
 
 export const SectionCopy = ({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: React.ReactNode;
-	className?: string;
+  children: React.ReactNode;
+  className?: string;
 }) => (
-	<p className={cn("max-w-2xl text-center text-lg text-muted-foreground", className)}>{children}</p>
+  <p className={cn("max-w-2xl text-center text-lg text-muted-foreground", className)}>{children}</p>
 );
 
 export const SectionContent = ({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: React.ReactNode;
-	className?: string;
+  children: React.ReactNode;
+  className?: string;
 }) => (
-	<div className={cn("flex w-full flex-col items-center justify-center gap-4", className)}>
-		{children}
-	</div>
+  <div className={cn("flex w-full flex-col items-center justify-center gap-4", className)}>
+    {children}
+  </div>
 );
diff --git a/src/components/primitives/shortcut-display.tsx b/src/components/primitives/shortcut-display.tsx
index 1a35488f..64d1a4a1 100644
--- a/src/components/primitives/shortcut-display.tsx
+++ b/src/components/primitives/shortcut-display.tsx
@@ -6,17 +6,17 @@ import { useIsMac } from "@/hooks/use-is-mac";
 import { cn } from "@/lib/utils";
 
 interface ShortcutDisplayProps {
-	action: ShortcutActionType;
-	className?: string;
-	/** Render as a different component, e.g., DropdownMenuShortcut */
-	as?: React.ElementType<{ children?: React.ReactNode; className?: string }>;
-	/** Base styles to apply, defaults to kbd styles */
-	baseClassName?: string;
+  action: ShortcutActionType;
+  className?: string;
+  /** Render as a different component, e.g., DropdownMenuShortcut */
+  as?: React.ElementType<{ children?: React.ReactNode; className?: string }>;
+  /** Base styles to apply, defaults to kbd styles */
+  baseClassName?: string;
 }
 
 // Default styles mimicking Shadcn kbd
 const defaultKbdStyles =
-	"h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium";
+  "h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium";
 
 /**
  * The key bound to an action, as a person reads it.
@@ -31,22 +31,22 @@ const defaultKbdStyles =
  * for search). Formatting itself is pure and lives in the config module.
  */
 export const ShortcutDisplay = ({
-	action,
-	className,
-	as: Component = "kbd", // Default to HTML kbd tag
-	baseClassName = defaultKbdStyles,
+  action,
+  className,
+  as: Component = "kbd", // Default to HTML kbd tag
+  baseClassName = defaultKbdStyles,
 }: ShortcutDisplayProps) => {
-	const isMac = useIsMac();
-	const label = shortcutLabel(action, isMac);
+  const isMac = useIsMac();
+  const label = shortcutLabel(action, isMac);
 
-	// No binding means nothing to advertise. Rendering an empty element here
-	// would put a stray box in a menu row.
-	if (!label) return null;
+  // No binding means nothing to advertise. Rendering an empty element here
+  // would put a stray box in a menu row.
+  if (!label) return null;
 
-	const finalClassName =
-		Component === "kbd" ? cn("inline-flex", baseClassName, className) : className;
+  const finalClassName =
+    Component === "kbd" ? cn("inline-flex", baseClassName, className) : className;
 
-	return <Component className={finalClassName}>{label}</Component>;
+  return <Component className={finalClassName}>{label}</Component>;
 };
 
 ShortcutDisplay.displayName = "ShortcutDisplay";
diff --git a/src/components/primitives/suspense-fallback.tsx b/src/components/primitives/suspense-fallback.tsx
index 33a13b4a..db83b021 100644
--- a/src/components/primitives/suspense-fallback.tsx
+++ b/src/components/primitives/suspense-fallback.tsx
@@ -1,5 +1,5 @@
 import { Loader } from "@/components/primitives/loader";
 
 export const SuspenseFallback = () => {
-	return <Loader />;
+  return <Loader />;
 };
diff --git a/src/components/primitives/web-vitals.tsx b/src/components/primitives/web-vitals.tsx
index 1a46dce2..683727ff 100644
--- a/src/components/primitives/web-vitals.tsx
+++ b/src/components/primitives/web-vitals.tsx
@@ -3,8 +3,8 @@
 import { useReportWebVitals } from "next/web-vitals";
 
 export function WebVitals() {
-	useReportWebVitals((metric) => {
-		console.info(metric);
-	});
-	return null;
+  useReportWebVitals((metric) => {
+    console.info(metric);
+  });
+  return null;
 }
diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx
index 22b0c5e7..3ddab191 100644
--- a/src/components/search/search.tsx
+++ b/src/components/search/search.tsx
@@ -1,13 +1,7 @@
 "use client";
 
 import type { DialogProps } from "@radix-ui/react-dialog";
-import {
-  CircleIcon,
-  FileIcon,
-  LaptopIcon,
-  MoonIcon,
-  SunIcon,
-} from "@radix-ui/react-icons";
+import { CircleIcon, FileIcon, LaptopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import * as React from "react";
@@ -56,7 +50,7 @@ export function Search({ ...props }: DialogProps) {
       <Button
         variant="outline"
         className={cn(
-          "relative h-8 w-full justify-start bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:max-w-40 lg:max-w-64",
+          "relative h-8 w-full justify-start bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:max-w-40 lg:max-w-64"
         )}
         onClick={() => setOpen(true)}
         {...props}
@@ -94,9 +88,7 @@ export function Search({ ...props }: DialogProps) {
                 <FileIcon className="mr-2 h-4 w-4" />
                 {navItem.title}
                 {navItem.external && (
-                  <span className="ml-auto text-xs text-muted-foreground">
-                    ↗
-                  </span>
+                  <span className="ml-auto text-xs text-muted-foreground">↗</span>
                 )}
               </CommandItem>
             ))}
@@ -125,9 +117,7 @@ export function Search({ ...props }: DialogProps) {
                   </div>
                   {navItem.title}
                   {navItem.label && (
-                    <span className="ml-auto text-xs text-muted-foreground">
-                      {navItem.label}
-                    </span>
+                    <span className="ml-auto text-xs text-muted-foreground">{navItem.label}</span>
                   )}
                 </CommandItem>
               ))}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 42d5b5fb..a575608d 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,23 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -27,7 +23,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
@@ -36,8 +32,8 @@ const AccordionTrigger = React.forwardRef<
       <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -50,7 +46,7 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 57760f2e..6ceecf77 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -24,8 +24,8 @@ const AlertDialogOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -42,36 +42,21 @@ const AlertDialogContent = React.forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -82,8 +67,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -94,21 +79,16 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -116,15 +96,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -138,4 +114,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 5afd41d1..dc21f8d6 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
@@ -17,43 +17,33 @@ const alertVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+);
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/animated-gradient-text.tsx b/src/components/ui/animated-gradient-text.tsx
index 0a7c04db..0a8283dd 100644
--- a/src/components/ui/animated-gradient-text.tsx
+++ b/src/components/ui/animated-gradient-text.tsx
@@ -12,7 +12,7 @@ export function AnimatedGradientText({
   return (
     <div
       className={cn(
-        "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40 bg-black",
+        "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-black bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
         className
       )}
     >
diff --git a/src/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
index d6a5226f..359bc940 100644
--- a/src/components/ui/aspect-ratio.tsx
+++ b/src/components/ui/aspect-ratio.tsx
@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 
-const AspectRatio = AspectRatioPrimitive.Root
+const AspectRatio = AspectRatioPrimitive.Root;
 
-export { AspectRatio }
+export { AspectRatio };
diff --git a/src/components/ui/attribution.tsx b/src/components/ui/attribution.tsx
index b68d5aa0..8b53a78c 100644
--- a/src/components/ui/attribution.tsx
+++ b/src/components/ui/attribution.tsx
@@ -1,12 +1,7 @@
 "use client";
 import { LinkOrButton } from "@/components/primitives/link-or-button";
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/components/ui/card";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 import { LOCAL_STORAGE_KEYS } from "@/config/local-storage-keys";
 import { cn } from "@/lib/utils";
 import { type VariantProps, cva } from "class-variance-authority";
@@ -46,12 +41,11 @@ const builtByVariants = cva(
     defaultVariants: {
       variant: "banner",
     },
-  },
+  }
 );
 
 export interface AttributionProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof builtByVariants> {
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof builtByVariants> {
   heading?: React.ReactNode;
   description?: React.ReactNode;
   onClose?: () => void;
@@ -72,10 +66,7 @@ export function Attribution({
   onClose,
   ...props
 }: AttributionProps) {
-  const [wasClosed, setWasClosed] = useLocalStorage(
-    LOCAL_STORAGE_KEYS.attributionClosed,
-    false,
-  );
+  const [wasClosed, setWasClosed] = useLocalStorage(LOCAL_STORAGE_KEYS.attributionClosed, false);
   const [isOpen, setIsOpen] = useState(wasClosed ? false : open);
 
   const handleClose = () => {
@@ -123,12 +114,7 @@ export function Attribution({
             {renderContent()}
             {children}
             {onClose && (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="shrink-0"
-                onClick={handleClose}
-              >
+              <Button variant="ghost" size="icon" className="shrink-0" onClick={handleClose}>
                 <X className="h-4 w-4" />
                 <span className="sr-only">Close</span>
               </Button>
@@ -143,17 +129,14 @@ export function Attribution({
     return (
       <>
         <style>{styles}</style>
-        <Card
-          className={cn(builtByVariants({ variant }), className)}
-          {...props}
-        >
-          <CardHeader className="p-3 flex flex-row items-start justify-between">
+        <Card className={cn(builtByVariants({ variant }), className)} {...props}>
+          <CardHeader className="flex flex-row items-start justify-between p-3">
             {renderContent()}
             {onClose && (
               <Button
                 variant="ghost"
                 size="icon"
-                className="shrink-0 h-6 w-6"
+                className="h-6 w-6 shrink-0"
                 onClick={handleClose}
               >
                 <X className="h-3 w-3" />
@@ -170,10 +153,7 @@ export function Attribution({
             <CardFooter className="mt-auto p-3 pt-0">
               <LinkOrButton
                 href={href}
-                className={cn(
-                  buttonVariants({ variant: "outline", size: "sm" }),
-                  "w-full",
-                )}
+                className={cn(buttonVariants({ variant: "outline", size: "sm" }), "w-full")}
                 variant="outline"
                 size="sm"
                 onClick={() => onClick?.()}
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 51e507ba..969e411a 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -11,14 +11,11 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +26,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -44,7 +41,7 @@ const AvatarFallback = React.forwardRef<
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/components/ui/background-waves.tsx b/src/components/ui/background-waves.tsx
index 69908b7e..ace7f466 100644
--- a/src/components/ui/background-waves.tsx
+++ b/src/components/ui/background-waves.tsx
@@ -3,161 +3,161 @@
 import { type FC, useEffect, useRef } from "react";
 
 export const calculateWaveY = (
-	x: number,
-	time: number,
-	layer: number,
-	height: number,
-	config: WaveConfig
+  x: number,
+  time: number,
+  layer: number,
+  height: number,
+  config: WaveConfig
 ): number => {
-	const baseY = height / 2;
-	return (
-		baseY +
-		Math.sin(x * config.frequency * 0.01 + time + layer) * (50 * config.amplitude) +
-		Math.sin(x * config.frequency * 0.02 + time * 1.2) * (30 * config.amplitude) +
-		Math.sin(x * config.frequency * 0.003 + time * 0.3) * (100 * config.amplitude)
-	);
+  const baseY = height / 2;
+  return (
+    baseY +
+    Math.sin(x * config.frequency * 0.01 + time + layer) * (50 * config.amplitude) +
+    Math.sin(x * config.frequency * 0.02 + time * 1.2) * (30 * config.amplitude) +
+    Math.sin(x * config.frequency * 0.003 + time * 0.3) * (100 * config.amplitude)
+  );
 };
 
 export const getWaveColor = (time: number, layer: number, config: WaveConfig): string => {
-	const hue = (time + layer * 120) % 360;
-	return `hsl(${hue}, ${config.saturation}%, ${config.brightness}%)`;
+  const hue = (time + layer * 120) % 360;
+  return `hsl(${hue}, ${config.saturation}%, ${config.brightness}%)`;
 };
 
 export interface WaveConfig {
-	speed: number;
-	saturation: number;
-	brightness: number;
-	amplitude: number;
-	frequency: number;
-	layers: number;
-	backgroundColor?: string;
-	fadeOpacity?: number;
-	transparent?: boolean;
+  speed: number;
+  saturation: number;
+  brightness: number;
+  amplitude: number;
+  frequency: number;
+  layers: number;
+  backgroundColor?: string;
+  fadeOpacity?: number;
+  transparent?: boolean;
 }
 
 interface WavesBackgroundProps {
-	config: WaveConfig;
+  config: WaveConfig;
 }
 
 export const WavesBackground: FC<WavesBackgroundProps> = ({
-	config = {
-		speed: 0.05,
-		saturation: 50,
-		brightness: 50,
-		amplitude: 10,
-		frequency: 0.01,
-		layers: 10,
-		backgroundColor: "#000000",
-		fadeOpacity: 0.05,
-		transparent: false,
-	},
+  config = {
+    speed: 0.05,
+    saturation: 50,
+    brightness: 50,
+    amplitude: 10,
+    frequency: 0.01,
+    layers: 10,
+    backgroundColor: "#000000",
+    fadeOpacity: 0.05,
+    transparent: false,
+  },
 }) => {
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const animationRef = useRef<number | null>(null);
-	const timeRef = useRef<number>(0);
-
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		if (!canvas) return;
-
-		const ctx = canvas.getContext("2d", { alpha: true });
-		if (!ctx) return;
-
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-		const width = canvas.width;
-		const height = canvas.height;
-
-		const animate = () => {
-			if (config.transparent) {
-				ctx.clearRect(0, 0, width, height);
-			} else {
-				ctx.fillStyle = `rgba(${hexToRgb(config.backgroundColor || "#000000")}, ${config.fadeOpacity || 0.05})`;
-				ctx.fillRect(0, 0, width, height);
-			}
-
-			for (let i = 0; i < config.layers; i++) {
-				ctx.beginPath();
-				ctx.strokeStyle = getWaveColor(timeRef.current, i, config);
-				ctx.lineWidth = 2;
-
-				for (let x = 0; x < width + 20; x += 5) {
-					const y = calculateWaveY(x, timeRef.current, i, height, config);
-
-					if (x === 0) {
-						ctx.moveTo(x, y);
-					} else {
-						ctx.lineTo(x, y);
-					}
-				}
-				ctx.stroke();
-			}
-
-			timeRef.current += config.speed;
-			animationRef.current = requestAnimationFrame(animate);
-		};
-
-		animate();
-
-		const handleResize = () => {
-			if (!canvas) return;
-			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight;
-		};
-
-		window.addEventListener("resize", handleResize);
-
-		return () => {
-			window.removeEventListener("resize", handleResize);
-			if (animationRef.current !== null) {
-				cancelAnimationFrame(animationRef.current);
-				animationRef.current = null;
-			}
-		};
-	}, [config]);
-
-	// Helper function to convert hex to RGB
-	const hexToRgb = (hexCode: string): string => {
-		// Remove the # if present
-		const hex = hexCode.replace("#", "");
-
-		// Parse the hex values
-		const r = Number.parseInt(hex.substring(0, 2), 16);
-		const g = Number.parseInt(hex.substring(2, 4), 16);
-		const b = Number.parseInt(hex.substring(4, 6), 16);
-
-		return `${r}, ${g}, ${b}`;
-	};
-
-	return (
-		<canvas
-			ref={canvasRef}
-			className="fixed left-0 top-0 -z-10 h-full w-full"
-			style={{
-				background: config.transparent
-					? "transparent"
-					: `linear-gradient(to bottom, ${config.backgroundColor || "#000000"}, ${
-							config.backgroundColor === "#000000"
-								? "#1a0f1f"
-								: adjustColor(config.backgroundColor || "#000000", -20)
-						})`,
-			}}
-		/>
-	);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number | null>(null);
+  const timeRef = useRef<number>(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d", { alpha: true });
+    if (!ctx) return;
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const width = canvas.width;
+    const height = canvas.height;
+
+    const animate = () => {
+      if (config.transparent) {
+        ctx.clearRect(0, 0, width, height);
+      } else {
+        ctx.fillStyle = `rgba(${hexToRgb(config.backgroundColor || "#000000")}, ${config.fadeOpacity || 0.05})`;
+        ctx.fillRect(0, 0, width, height);
+      }
+
+      for (let i = 0; i < config.layers; i++) {
+        ctx.beginPath();
+        ctx.strokeStyle = getWaveColor(timeRef.current, i, config);
+        ctx.lineWidth = 2;
+
+        for (let x = 0; x < width + 20; x += 5) {
+          const y = calculateWaveY(x, timeRef.current, i, height, config);
+
+          if (x === 0) {
+            ctx.moveTo(x, y);
+          } else {
+            ctx.lineTo(x, y);
+          }
+        }
+        ctx.stroke();
+      }
+
+      timeRef.current += config.speed;
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    const handleResize = () => {
+      if (!canvas) return;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (animationRef.current !== null) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    };
+  }, [config]);
+
+  // Helper function to convert hex to RGB
+  const hexToRgb = (hexCode: string): string => {
+    // Remove the # if present
+    const hex = hexCode.replace("#", "");
+
+    // Parse the hex values
+    const r = Number.parseInt(hex.substring(0, 2), 16);
+    const g = Number.parseInt(hex.substring(2, 4), 16);
+    const b = Number.parseInt(hex.substring(4, 6), 16);
+
+    return `${r}, ${g}, ${b}`;
+  };
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="fixed left-0 top-0 -z-10 h-full w-full"
+      style={{
+        background: config.transparent
+          ? "transparent"
+          : `linear-gradient(to bottom, ${config.backgroundColor || "#000000"}, ${
+              config.backgroundColor === "#000000"
+                ? "#1a0f1f"
+                : adjustColor(config.backgroundColor || "#000000", -20)
+            })`,
+      }}
+    />
+  );
 };
 
 // Helper function to darken/lighten a color
 function adjustColor(color: string, amount: number): string {
-	const hex = color.replace("#", "");
-	const num = Number.parseInt(hex, 16);
+  const hex = color.replace("#", "");
+  const num = Number.parseInt(hex, 16);
 
-	let r = (num >> 16) + amount;
-	let g = ((num >> 8) & 0x00ff) + amount;
-	let b = (num & 0x0000ff) + amount;
+  let r = (num >> 16) + amount;
+  let g = ((num >> 8) & 0x00ff) + amount;
+  let b = (num & 0x0000ff) + amount;
 
-	r = Math.min(Math.max(0, r), 255);
-	g = Math.min(Math.max(0, g), 255);
-	b = Math.min(Math.max(0, b), 255);
+  r = Math.min(Math.max(0, r), 255);
+  g = Math.min(Math.max(0, g), 255);
+  b = Math.min(Math.max(0, b), 255);
 
-	return `#${(b | (g << 8) | (r << 16)).toString(16).padStart(6, "0")}`;
+  return `#${(b | (g << 8) | (r << 16)).toString(16).padStart(6, "0")}`;
 }
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index e87d62bf..e2367b43 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,15 +1,14 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "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-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
@@ -21,16 +20,13 @@ const badgeVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  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 };
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index 1fd4b2c0..9b266552 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,50 +1,44 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cn } from "@/lib/utils"
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "@/lib/utils";
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+    separator?: React.ReactNode;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
 
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
 
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -52,45 +46,37 @@ const BreadcrumbLink = React.forwardRef<
       className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
 
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
 
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRightIcon />}
   </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     role="presentation"
     aria-hidden="true"
@@ -100,8 +86,8 @@ const BreadcrumbEllipsis = ({
     <DotsHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
   Breadcrumb,
@@ -111,4 +97,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 65d4fcd9..8eeb5118 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,22 +1,19 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+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 { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "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 shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -32,26 +29,21 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  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}
-      />
-    )
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index a77b2df7..1295b255 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,20 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -33,8 +28,7 @@ function Calendar({
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
         cell: cn(
           "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
@@ -54,8 +48,7 @@ function Calendar({
         day_outside:
           "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
         day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}
@@ -69,8 +62,8 @@ function Calendar({
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index cabfbfc5..ea956e78 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,76 +1,55 @@
-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 bg-card text-card-foreground 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-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 bg-card text-card-foreground 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-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 };
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 5a363667..22ec9ece 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,255 +1,235 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
 const Carousel = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
+>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+  const [carouselRef, api] = useEmblaCarousel(
     {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
     },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) {
+      return;
+    }
+
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
       }
+    },
+    [scrollPrev, scrollNext]
+  );
 
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+  React.useEffect(() => {
+    if (!api || !setApi) {
+      return;
+    }
 
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+    setApi(api);
+  }, [api, setApi]);
 
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
 
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
 
-      setApi(api)
-    }, [api, setApi])
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
 
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+});
+Carousel.displayName = "Carousel";
 
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
 
     return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
+      <div ref={carouselRef} className="overflow-hidden">
         <div
           ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
+          className={cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          )}
           {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
+        />
+      </div>
+    );
   }
-)
-Carousel.displayName = "Carousel"
+);
+CarouselContent.displayName = "CarouselContent";
 
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
+    return (
       <div
         ref={ref}
+        role="group"
+        aria-roledescription="slide"
         className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
           className
         )}
         {...props}
       />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeftIcon className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeftIcon className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRightIcon className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRightIcon className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
 
 export {
   type CarouselApi,
@@ -258,4 +238,4 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-}
+};
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 32dc873f..839e59c8 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -1,50 +1,48 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    config: ChartConfig
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
   }
 >(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -58,22 +56,18 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
+  );
+});
+ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -85,10 +79,8 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}
 }
@@ -97,20 +89,20 @@ ${colorConfig
           .join("\n"),
       }}
     />
-  )
-}
+  );
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
     React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
     }
 >(
   (
@@ -131,49 +123,39 @@ const ChartTooltipContent = React.forwardRef<
     },
     ref
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     const tooltipLabel = React.useMemo(() => {
       if (hideLabel || !payload?.length) {
-        return null
+        return null;
       }
 
-      const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"
           ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
+          : itemConfig?.label;
 
       if (labelFormatter) {
         return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
+          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+        );
       }
 
       if (!value) {
-        return null
+        return null;
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ])
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
 
     if (!active || !payload?.length) {
-      return null
+      return null;
     }
 
-    const nestLabel = payload.length === 1 && indicator !== "dot"
+    const nestLabel = payload.length === 1 && indicator !== "dot";
 
     return (
       <div
@@ -186,9 +168,9 @@ const ChartTooltipContent = React.forwardRef<
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
 
             return (
               <div
@@ -247,112 +229,94 @@ const ChartTooltipContent = React.forwardRef<
                   </>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       </div>
-    )
+    );
   }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
+);
+ChartTooltipContent.displayName = "ChartTooltip";
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    if (!payload?.length) {
-      return null
+      hideIcon?: boolean;
+      nameKey?: string;
     }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-      </div>
-    )
+  if (!payload?.length) {
+    return null;
   }
-)
-ChartLegendContent.displayName = "ChartLegend"
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
   }
 
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
 }
 
 export {
@@ -362,4 +326,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 83692e24..76c23825 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { cn } from "@/lib/utils"
-import { CheckIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cn } from "@/lib/utils";
+import { CheckIcon } from "@radix-ui/react-icons";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -17,13 +17,11 @@ const Checkbox = React.forwardRef<
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
       <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
index 9fa48946..cb003d17 100644
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index ade5441e..ceb075fe 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -19,8 +19,8 @@ const Command = React.forwardRef<
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
@@ -31,8 +31,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -49,9 +49,9 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -62,22 +62,18 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -91,9 +87,9 @@ const CommandGroup = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -104,8 +100,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -114,30 +110,24 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -149,4 +139,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index 9c3b166b..e60abc97 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,26 +1,26 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { cn } from "@/lib/utils"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 
-const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenu = ContextMenuPrimitive.Root;
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
-const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuGroup = ContextMenuPrimitive.Group;
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
 
-const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuSub = ContextMenuPrimitive.Sub;
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
@@ -35,8 +35,8 @@ const ContextMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -50,8 +50,8 @@ const ContextMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -67,13 +67,13 @@ const ContextMenuContent = React.forwardRef<
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
@@ -85,8 +85,8 @@ const ContextMenuItem = React.forwardRef<
     )}
     {...props}
   />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -108,9 +108,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -131,26 +130,22 @@ const ContextMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
     {...props}
   />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -161,24 +156,18 @@ const ContextMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
   ContextMenu,
@@ -196,4 +185,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};
diff --git a/src/components/ui/copy-button.tsx b/src/components/ui/copy-button.tsx
index 36ed93be..2036f723 100644
--- a/src/components/ui/copy-button.tsx
+++ b/src/components/ui/copy-button.tsx
@@ -9,70 +9,68 @@ import { AnimatePresence, motion } from "framer-motion";
 import { Check, Copy } from "lucide-react";
 
 interface CopyButtonProps {
-	value: string;
-	successTitle?: string;
-	successDescription?: string;
-	className?: string;
-	timeout?: number;
+  value: string;
+  successTitle?: string;
+  successDescription?: string;
+  className?: string;
+  timeout?: number;
 }
 
 export const CopyButton = ({
-	value,
-	className,
-	timeout = 2000,
-	successTitle = "Copied",
-	successDescription = "Copied to clipboard",
-	...props
+  value,
+  className,
+  timeout = 2000,
+  successTitle = "Copied",
+  successDescription = "Copied to clipboard",
+  ...props
 }: CopyButtonProps) => {
-	const { toast } = useToast();
-	const { isCopied, copyToClipboard } = useCopyToClipboard({
-		timeout: 2000,
-		onCopy: () => {
-			toast({
-				title: successTitle,
-				description: successDescription,
-			});
-		},
-	});
+  const { toast } = useToast();
+  const { isCopied, copyToClipboard } = useCopyToClipboard({
+    timeout: 2000,
+    onCopy: () => {
+      toast({
+        title: successTitle,
+        description: successDescription,
+      });
+    },
+  });
 
-	return (
-
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={() => copyToClipboard(value)}
-						{...props}
-						className={cn("h-8 w-8 relative", className)}
-					>
-						<AnimatePresence mode="wait">
-							<motion.div
-								key={isCopied ? "check" : "copy"}
-								initial={{ opacity: 0, y: -1 }}
-								animate={{ opacity: 1, y: 0 }}
-								exit={{ opacity: 0, y: 1 }}
-								transition={{
-									type: "spring",
-									stiffness: 500,
-									damping: 30,
-									mass: 0.5,
-								}}
-								// className="absolute inset-0 flex items-center justify-center"
-							>
-								{isCopied ? (
-									<Check className="h-4 w-4 text-green-500" />
-								) : (
-									<Copy className="h-4 w-4" />
-								)}
-							</motion.div>
-						</AnimatePresence>
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>
-					<p>{isCopied ? successTitle : "Copy to clipboard"}</p>
-				</TooltipContent>
-			</Tooltip>
-
-	);
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => copyToClipboard(value)}
+          {...props}
+          className={cn("relative h-8 w-8", className)}
+        >
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={isCopied ? "check" : "copy"}
+              initial={{ opacity: 0, y: -1 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 1 }}
+              transition={{
+                type: "spring",
+                stiffness: 500,
+                damping: 30,
+                mass: 0.5,
+              }}
+              // className="absolute inset-0 flex items-center justify-center"
+            >
+              {isCopied ? (
+                <Check className="h-4 w-4 text-green-500" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </motion.div>
+          </AnimatePresence>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{isCopied ? successTitle : "Copy to clipboard"}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
 };
diff --git a/src/components/ui/countdown.tsx b/src/components/ui/countdown.tsx
index 5485b751..08b75f03 100644
--- a/src/components/ui/countdown.tsx
+++ b/src/components/ui/countdown.tsx
@@ -41,7 +41,7 @@ export const Countdown = ({
   return (
     <div
       className={cn(
-        "inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium",
+        "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium",
         variantStyles[variant],
         className
       )}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index b5aaef74..554ac562 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,17 +1,17 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { cn } from "@/lib/utils"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "@/lib/utils";
+import { Cross2Icon } from "@radix-ui/react-icons";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -20,13 +20,13 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -49,36 +49,21 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -86,14 +71,11 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -104,8 +86,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -118,4 +100,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 6a0ef53d..b0913af0 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,26 +1,23 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Drawer = ({
   shouldScaleBackground = true,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = "Drawer";
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,8 +28,8 @@ const DrawerOverlay = React.forwardRef<
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -52,30 +49,18 @@ const DrawerContent = React.forwardRef<
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
+));
+DrawerContent.displayName = "DrawerContent";
 
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
 
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -83,14 +68,11 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -101,8 +83,8 @@ const DrawerDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
   Drawer,
@@ -115,4 +97,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index eb4b1cd9..6f44d4d8 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,32 +1,32 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { cn } from "@/lib/utils"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -35,9 +35,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -51,9 +50,8 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -71,13 +69,13 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -89,8 +87,8 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -112,9 +110,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -135,26 +132,22 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -165,21 +158,15 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+    <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -197,4 +184,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index b6daa654..eb171282 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   ControllerProps,
@@ -10,27 +10,25 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -38,21 +36,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,36 +59,33 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -99,37 +94,33 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
       ref={ref}
       id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -138,19 +129,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -162,9 +153,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -175,4 +166,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
index e54d91cf..d130a8bf 100644
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
@@ -23,7 +23,7 @@ const HoverCardContent = React.forwardRef<
     )}
     {...props}
   />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/src/components/ui/hover-info.tsx b/src/components/ui/hover-info.tsx
index 384ce2d5..fe72d34b 100644
--- a/src/components/ui/hover-info.tsx
+++ b/src/components/ui/hover-info.tsx
@@ -34,7 +34,7 @@ export const HoverInfo = ({
       <HoverCardTrigger asChild>
         <span
           className={cn(
-            "font-medium inline-block cursor-help transition-colors duration-200",
+            "inline-block cursor-help font-medium transition-colors duration-200",
             className
           )}
         >
diff --git a/src/components/ui/input-hover.tsx b/src/components/ui/input-hover.tsx
index 443277e3..39e3828e 100644
--- a/src/components/ui/input-hover.tsx
+++ b/src/components/ui/input-hover.tsx
@@ -2,19 +2,19 @@ import { cn } from "@/lib/utils";
 import * as React from "react";
 
 const InputHover = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-	({ className, type, ...props }, ref) => {
-		return (
-			<input
-				type={type}
-				className={cn(
-					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-primary hover:ring-1 hover:ring-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-					className
-				)}
-				ref={ref}
-				{...props}
-			/>
-		);
-	}
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-primary hover:ring-1 hover:ring-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
 );
 InputHover.displayName = "InputHover";
 
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index 2e346336..3d728ef8 100644
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { cn } from "@/lib/utils"
-import { MinusIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cn } from "@/lib/utils";
+import { MinusIcon } from "@radix-ui/react-icons";
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -18,23 +18,23 @@ const InputOTP = React.forwardRef<
     className={cn("disabled:cursor-not-allowed", className)}
     {...props}
   />
-))
-InputOTP.displayName = "InputOTP"
+));
+InputOTP.displayName = "InputOTP";
 
 const InputOTPGroup = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
+));
+InputOTPGroup.displayName = "InputOTPGroup";
 
 const InputOTPSlot = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
   return (
     <div
@@ -49,13 +49,13 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
         </div>
       )}
     </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
 
 const InputOTPSeparator = React.forwardRef<
   React.ElementRef<"div">,
@@ -64,7 +64,7 @@ const InputOTPSeparator = React.forwardRef<
   <div ref={ref} role="separator" {...props}>
     <MinusIcon />
   </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 69b64fb2..7bad21e1 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
@@ -14,9 +14,9 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Input.displayName = "Input"
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/src/components/ui/intro-disclosure/intro-disclosure.tsx b/src/components/ui/intro-disclosure/intro-disclosure.tsx
index 70ffadcf..f8a744f3 100644
--- a/src/components/ui/intro-disclosure/intro-disclosure.tsx
+++ b/src/components/ui/intro-disclosure/intro-disclosure.tsx
@@ -135,18 +135,18 @@ export function IntroDisclosure({
   if (isDesktop) {
     return (
       <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-w-5xl p-0 gap-0 overflow-hidden " onKeyDown={handleKeyDown}>
-          <DialogHeader className="p-6 space-y-2 bg-muted border-b border-border">
+        <DialogContent className="max-w-5xl gap-0 overflow-hidden p-0" onKeyDown={handleKeyDown}>
+          <DialogHeader className="space-y-2 border-b border-border bg-muted p-6">
             <DialogTitle>Feature Tour</DialogTitle>
             {showProgressBar && (
-              <div className="flex mt-2 w-full justify-center  ">
-                <Progress value={((currentStep + 1) / steps.length) * 100} className="  h-1 " />
+              <div className="mt-2 flex w-full justify-center">
+                <Progress value={((currentStep + 1) / steps.length) * 100} className="h-1" />
               </div>
             )}
           </DialogHeader>
 
-          <div className="grid grid-cols-2 h-full">
-            <div className="p-2 pr-[18px] ">
+          <div className="grid h-full grid-cols-2">
+            <div className="p-2 pr-[18px]">
               <StepContent
                 steps={steps}
                 currentStep={currentStep}
@@ -174,15 +174,15 @@ export function IntroDisclosure({
 
   return (
     <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerContent className="h-[95vh] max-h-[95vh] ">
+      <DrawerContent className="h-[95vh] max-h-[95vh]">
         <motion.div
           drag="x"
           dragConstraints={{ left: 0, right: 0 }}
           onDragEnd={handleDragEnd}
           onKeyDown={handleKeyDown}
-          className="h-full flex flex-col max-w-3xl mx-auto"
+          className="mx-auto flex h-full max-w-3xl flex-col"
         >
-          <DrawerHeader className="text-left  pb-4 space-y-4">
+          <DrawerHeader className="space-y-4 pb-4 text-left">
             {showProgressBar && (
               <Progress value={((currentStep + 1) / steps.length) * 100} className="mb-4" />
             )}
@@ -190,8 +190,8 @@ export function IntroDisclosure({
           </DrawerHeader>
 
           <div className="flex-1 overflow-y-auto">
-            <div className="p-4 space-y-4 pb-32">
-              <div className="grid grid-cols-2 gap-2 mb-6">
+            <div className="space-y-4 p-4 pb-32">
+              <div className="mb-6 grid grid-cols-2 gap-2">
                 {steps.map((step, index) => (
                   <StepTab
                     key={index}
@@ -202,13 +202,13 @@ export function IntroDisclosure({
                   />
                 ))}
               </div>
-              <div className="relative aspect-[16/9] ring-2 ring-border ring-offset-8 ring-offset-background rounded-lg overflow-hidden">
+              <div className="relative aspect-[16/9] overflow-hidden rounded-lg ring-2 ring-border ring-offset-8 ring-offset-background">
                 {steps[currentStep] && (
                   <StepPreview step={steps[currentStep]} direction={direction} />
                 )}
               </div>
 
-              <div className="space-y-4 border border-border p-3 rounded-lg">
+              <div className="space-y-4 rounded-lg border border-border p-3">
                 <p className="text-muted-foreground">{steps[currentStep]?.short_description}</p>
                 {steps[currentStep]?.action && (
                   <Button
@@ -239,11 +239,11 @@ export function IntroDisclosure({
 
           <div className="absolute bottom-0 left-0 right-0 border-t bg-background">
             <div className="p-4">
-              <div className="flex items-center justify-between mb-4">
+              <div className="mb-4 flex items-center justify-between">
                 <Button
                   variant="ghost"
                   onClick={onSkip}
-                  className="text-muted-foreground hover:bg-card rounded-full"
+                  className="rounded-full text-muted-foreground hover:bg-card"
                 >
                   Skip all
                 </Button>
diff --git a/src/components/ui/intro-disclosure/step-content.tsx b/src/components/ui/intro-disclosure/step-content.tsx
index f71d5486..2ae8ca20 100644
--- a/src/components/ui/intro-disclosure/step-content.tsx
+++ b/src/components/ui/intro-disclosure/step-content.tsx
@@ -32,11 +32,11 @@ export function StepContent({
 
     if (action.href) {
       return (
-        <Button asChild className="w-full " size="sm" variant="link">
+        <Button asChild className="w-full" size="sm" variant="link">
           <a href={action.href} target="_blank" rel="noopener noreferrer">
             <span className="flex items-center gap-2">
               {action.label}
-              <ExternalLinkIcon className="w-4 h-4" />
+              <ExternalLinkIcon className="h-4 w-4" />
             </span>
           </a>
         </Button>
@@ -56,14 +56,14 @@ export function StepContent({
   };
 
   return (
-    <div className="flex h-full flex-col max-w-3xl mx-auto">
+    <div className="mx-auto flex h-full max-w-3xl flex-col">
       {isDesktop && (
-        <div className="flex-1  px-2 py-3">
+        <div className="flex-1 px-2 py-3">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-            className="space-y-2 flex flex-col justify-center items-center px-1"
+            className="flex flex-col items-center justify-center space-y-2 px-1"
           >
             {steps.map((step, index) => (
               <StepTab
@@ -78,15 +78,15 @@ export function StepContent({
         </div>
       )}
       <AnimatePresence mode="wait" initial={false}>
-        <motion.div key={currentStep} {...slideInOut(direction)} className="mt-6 space-y-4 ">
+        <motion.div key={currentStep} {...slideInOut(direction)} className="mt-6 space-y-4">
           {!isDesktop && steps[currentStep]?.media && (
-            <AspectRatio ratio={16 / 9} className="lg:overflow-hidden rounded-lg bg-muted ">
+            <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted lg:overflow-hidden">
               {steps[currentStep]?.media?.type === "image" ? (
                 <Image
                   src={steps[currentStep]?.media?.src || "/placeholder.svg"}
                   alt={steps[currentStep]?.media?.alt || ""}
                   fill
-                  className="object-cover "
+                  className="object-cover"
                 />
               ) : (
                 <video
@@ -99,7 +99,7 @@ export function StepContent({
           )}
 
           {steps[currentStep]?.action ? (
-            <div className=" px-2">{renderActionButton(steps[currentStep]?.action)}</div>
+            <div className="px-2">{renderActionButton(steps[currentStep]?.action)}</div>
           ) : (
             <div className="h-10" />
           )}
@@ -110,7 +110,7 @@ export function StepContent({
             <Button
               variant="ghost"
               onClick={onSkip}
-              className="text-muted-foreground hover:bg-card rounded-full"
+              className="rounded-full text-muted-foreground hover:bg-card"
             >
               Skip all
             </Button>
@@ -140,7 +140,7 @@ export function StepContent({
               </Button>
             </div>
           </div>
-          <div className="flex items-center space-x-2 pb-4 px-4">
+          <div className="flex items-center space-x-2 px-4 pb-4">
             <Checkbox
               id="skipNextTime"
               checked={skipNextTime}
diff --git a/src/components/ui/intro-disclosure/step-preview.tsx b/src/components/ui/intro-disclosure/step-preview.tsx
index aadbd82f..b526c9bc 100644
--- a/src/components/ui/intro-disclosure/step-preview.tsx
+++ b/src/components/ui/intro-disclosure/step-preview.tsx
@@ -21,14 +21,14 @@ export function StepPreview({ step, direction }: { step: Step; direction: 1 | -1
   return (
     <motion.div
       {...slideInOut(direction)}
-      className="relative h-full w-full overflow-hidden rounded-sm rounded-rb-lg rounded-tl-xl ring-2 ring-black/10 dark:ring-black/10 dark:ring-offset-black ring-offset-8"
+      className="rounded-rb-lg relative h-full w-full overflow-hidden rounded-sm rounded-tl-xl ring-2 ring-black/10 ring-offset-8 dark:ring-black/10 dark:ring-offset-black"
     >
       {step.media ? (
-        <div className="relative bg-black h-full w-full">
+        <div className="relative h-full w-full bg-black">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={controls}
-            className="h-full w-full max-h-[700px]"
+            className="h-full max-h-[700px] w-full"
           >
             {step.media.type === "image" ? (
               <Image
@@ -48,7 +48,7 @@ export function StepPreview({ step, direction }: { step: Step; direction: 1 | -1
             className="absolute bottom-0 left-0 right-0 p-6"
           >
             <h3 className="mb-2 text-2xl font-semibold text-white">{step.title}</h3>
-            <p className="text-white hidden md:block">{step.full_description}</p>
+            <p className="hidden text-white md:block">{step.full_description}</p>
           </motion.div>
         </div>
       ) : (
diff --git a/src/components/ui/intro-disclosure/step-tab.tsx b/src/components/ui/intro-disclosure/step-tab.tsx
index 930da305..845eef57 100644
--- a/src/components/ui/intro-disclosure/step-tab.tsx
+++ b/src/components/ui/intro-disclosure/step-tab.tsx
@@ -20,21 +20,21 @@ export function StepTab({ step, isActive, onClick, isCompleted }: StepTabProps)
       {...hoverScale}
       onClick={onClick}
       className={cn(
-        "flex flex-col items-start rounded-lg px-4 py-2 text-left transition-colors w-full",
-        isActive ? "bg-muted border border-border" : "hover:bg-muted/70",
+        "flex w-full flex-col items-start rounded-lg px-4 py-2 text-left transition-colors",
+        isActive ? "border border-border bg-muted" : "hover:bg-muted/70",
         "relative"
       )}
       aria-current={isActive ? "step" : undefined}
       aria-label={`${step.title}${isCompleted ? " (completed)" : ""}`}
     >
       <div className="mb-1 text-sm font-medium">{step.title}</div>
-      <div className="text-xs hidden md:block text-muted-foreground line-clamp-2">
+      <div className="line-clamp-2 hidden text-xs text-muted-foreground md:block">
         {step.short_description}
       </div>
       {isCompleted && (
         <motion.div {...fadeInScale} className="absolute right-2 top-2">
           <div className="rounded-full bg-primary p-1">
-            <CheckIcon className="w-2 h-2 text-primary-foreground" />
+            <CheckIcon className="h-2 w-2 text-primary-foreground" />
           </div>
         </motion.div>
       )}
diff --git a/src/components/ui/json-viewer.tsx b/src/components/ui/json-viewer.tsx
index 4122c29f..30e839ec 100644
--- a/src/components/ui/json-viewer.tsx
+++ b/src/components/ui/json-viewer.tsx
@@ -26,7 +26,7 @@ export function JsonViewer({ data, title, className }: JsonViewerProps) {
   return (
     <Card className={cn("relative", className)}>
       {title && (
-        <div className="flex items-center justify-between px-4 py-2 border-b">
+        <div className="flex items-center justify-between border-b px-4 py-2">
           <h3 className="text-sm font-medium">{title}</h3>
           <Button variant="ghost" size="sm" onClick={copyToClipboard} className="h-8 gap-1 text-xs">
             {copied ? (
@@ -43,7 +43,7 @@ export function JsonViewer({ data, title, className }: JsonViewerProps) {
           </Button>
         </div>
       )}
-      <pre className="overflow-auto p-4 text-xs font-mono">{jsonString}</pre>
+      <pre className="overflow-auto p-4 font-mono text-xs">{jsonString}</pre>
     </Card>
   );
 }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 53418217..455af889 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,26 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/src/components/ui/loading.tsx b/src/components/ui/loading.tsx
index 7e892e4d..a6e71206 100644
--- a/src/components/ui/loading.tsx
+++ b/src/components/ui/loading.tsx
@@ -3,36 +3,36 @@ import { cn } from "@/lib/utils";
 import * as React from "react";
 
 export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * The size of the loading indicator
-	 */
-	size?: "sm" | "default" | "lg";
+  /**
+   * The size of the loading indicator
+   */
+  size?: "sm" | "default" | "lg";
 
-	/**
-	 * The color variant of the loading indicator
-	 */
-	color?: "default" | "primary" | "secondary" | "muted";
+  /**
+   * The color variant of the loading indicator
+   */
+  color?: "default" | "primary" | "secondary" | "muted";
 
-	/**
-	 * Whether to show a full-page loading state
-	 */
-	fullPage?: boolean;
+  /**
+   * Whether to show a full-page loading state
+   */
+  fullPage?: boolean;
 
-	/**
-	 * Custom loading text for accessibility
-	 */
-	label?: string;
+  /**
+   * Custom loading text for accessibility
+   */
+  label?: string;
 
-	/**
-	 * Whether to show a backdrop behind the loader
-	 */
-	backdrop?: boolean;
+  /**
+   * Whether to show a backdrop behind the loader
+   */
+  backdrop?: boolean;
 
-	/**
-	 * Whether to fade in the loading indicator
-	 * @default false
-	 */
-	fade?: boolean;
+  /**
+   * Whether to fade in the loading indicator
+   * @default false
+   */
+  fade?: boolean;
 }
 
 /**
@@ -48,33 +48,33 @@ export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const Loading = React.forwardRef<HTMLDivElement, LoadingProps>(
-	(
-		{
-			className,
-			size = "default",
-			color = "default",
-			fullPage = false,
-			label = "Loading...",
-			backdrop = true,
-			fade = false,
-			...props
-		},
-		ref
-	) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex items-center justify-center",
-					fullPage && "fixed inset-0 z-50",
-					backdrop && "bg-background/80 backdrop-blur-sm",
-					fade && "duration-300 animate-in fade-in",
-					className
-				)}
-				{...props}
-			>
-				<LoaderAtoms size={size} color={color} label={label} />
-			</div>
-		);
-	}
+  (
+    {
+      className,
+      size = "default",
+      color = "default",
+      fullPage = false,
+      label = "Loading...",
+      backdrop = true,
+      fade = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center",
+          fullPage && "fixed inset-0 z-50",
+          backdrop && "bg-background/80 backdrop-blur-sm",
+          fade && "duration-300 animate-in fade-in",
+          className
+        )}
+        {...props}
+      >
+        <LoaderAtoms size={size} color={color} label={label} />
+      </div>
+    );
+  }
 );
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index c10769df..ead7c631 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,38 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { cn } from "@/lib/utils"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />
+function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />;
 }
 
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />
+function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />;
 }
 
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />
+function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />;
 }
 
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />
+function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />;
 }
 
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }
 
 const Menubar = React.forwardRef<
@@ -47,8 +37,8 @@ const Menubar = React.forwardRef<
     )}
     {...props}
   />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
 
 const MenubarTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -62,13 +52,13 @@ const MenubarTrigger = React.forwardRef<
     )}
     {...props}
   />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <MenubarPrimitive.SubTrigger
@@ -83,8 +73,8 @@ const MenubarSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubContent>,
@@ -98,38 +88,33 @@ const MenubarSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Item
@@ -141,8 +126,8 @@ const MenubarItem = React.forwardRef<
     )}
     {...props}
   />
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 const MenubarCheckboxItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
@@ -164,8 +149,8 @@ const MenubarCheckboxItem = React.forwardRef<
     </span>
     {children}
   </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
 const MenubarRadioItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
@@ -186,26 +171,22 @@ const MenubarRadioItem = React.forwardRef<
     </span>
     {children}
   </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
 const MenubarLabel = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
     {...props}
   />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -216,24 +197,18 @@ const MenubarSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
   Menubar,
@@ -252,4 +227,4 @@ export {
   MenubarGroup,
   MenubarSub,
   MenubarShortcut,
-}
+};
diff --git a/src/components/ui/meteors.tsx b/src/components/ui/meteors.tsx
index c31bcec7..55c46c0f 100644
--- a/src/components/ui/meteors.tsx
+++ b/src/components/ui/meteors.tsx
@@ -38,4 +38,3 @@ export const Meteors = ({ number = 20 }: MeteorsProps) => {
     </>
   );
 };
-
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index cb3ce06d..2818c5cd 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -10,17 +10,14 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
+    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
     {...props}
   >
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -28,20 +25,17 @@ const NavigationMenuList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.List
     ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
+    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
     {...props}
   />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-)
+);
 
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
@@ -58,8 +52,8 @@ const NavigationMenuTrigger = React.forwardRef<
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -68,15 +62,15 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className
     )}
     {...props}
   />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
@@ -92,9 +86,8 @@ const NavigationMenuViewport = React.forwardRef<
       {...props}
     />
   </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -110,9 +103,8 @@ const NavigationMenuIndicator = React.forwardRef<
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
 export {
   navigationMenuTriggerStyle,
@@ -124,4 +116,4 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
-}
+};
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index 484e5ce7..79fc5e3d 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
-import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
@@ -10,40 +10,27 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
     className={cn("mx-auto flex w-full justify-center", className)}
     {...props}
   />
-)
-Pagination.displayName = "Pagination"
+);
+Pagination.displayName = "Pagination";
 
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-))
-PaginationContent.displayName = "PaginationContent"
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  )
+);
+PaginationContent.displayName = "PaginationContent";
 
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />
+);
+PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;
 
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) => (
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
   <a
     aria-current={isActive ? "page" : undefined}
     className={cn(
@@ -55,8 +42,8 @@ const PaginationLink = ({
     )}
     {...props}
   />
-)
-PaginationLink.displayName = "PaginationLink"
+);
+PaginationLink.displayName = "PaginationLink";
 
 const PaginationPrevious = ({
   className,
@@ -71,13 +58,10 @@ const PaginationPrevious = ({
     <ChevronLeftIcon className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
+);
+PaginationPrevious.displayName = "PaginationPrevious";
 
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to next page"
     size="default"
@@ -87,13 +71,10 @@ const PaginationNext = ({
     <span>Next</span>
     <ChevronRightIcon className="h-4 w-4" />
   </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
+);
+PaginationNext.displayName = "PaginationNext";
 
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
     className={cn("flex h-9 w-9 items-center justify-center", className)}
@@ -102,8 +83,8 @@ const PaginationEllipsis = ({
     <DotsHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export {
   Pagination,
@@ -113,4 +94,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+};
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 29c7bd2a..b7a19e9d 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -27,7 +27,7 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/components/ui/priority-nav.tsx b/src/components/ui/priority-nav.tsx
index 246eff53..2cd0e05d 100644
--- a/src/components/ui/priority-nav.tsx
+++ b/src/components/ui/priority-nav.tsx
@@ -7,18 +7,18 @@ import React, { useEffect, useRef, useState } from "react";
 import { Link } from "@/components/primitives/link";
 import { Button } from "@/components/ui/button";
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import type { NavLink } from "@/config/navigation";
 import { cn } from "@/lib/utils";
 
 interface PriorityNavProps {
-	navLinks: NavLink[];
-	className?: string;
-	itemClassName?: string;
+  navLinks: NavLink[];
+  className?: string;
+  itemClassName?: string;
 }
 
 const ITEM_GAP = 16; // gap-md in px
@@ -31,135 +31,127 @@ const MORE_BUTTON_WIDTH = 80; // width reserved for the "More" button
  * then shows only as many items as fit in the visible container. No feedback
  * loops — the measurement container never affects the live layout.
  */
-export const PriorityNav: React.FC<PriorityNavProps> = ({
-	navLinks,
-	className,
-	itemClassName,
-}) => {
-	const outerRef = useRef<HTMLDivElement>(null);
-	const measureRef = useRef<HTMLDivElement>(null);
-	const [visibleCount, setVisibleCount] = useState(navLinks.length);
-
-	useEffect(() => {
-		const outer = outerRef.current;
-		const measure = measureRef.current;
-		if (!outer || !measure) return;
-
-		const calculate = () => {
-			const containerWidth = outer.offsetWidth;
-			if (containerWidth === 0) return;
-
-			const items = measure.querySelectorAll<HTMLElement>("[data-measure-item]");
-			let usedWidth = 0;
-			let count = 0;
-
-			for (let i = 0; i < navLinks.length; i++) {
-				const el = items[i];
-				if (!el) continue;
-				const itemWidth = el.offsetWidth + (i > 0 ? ITEM_GAP : 0);
-				const remainingAfterThis = navLinks.length - (count + 1);
-				const totalNeeded =
-					usedWidth + itemWidth + (remainingAfterThis > 0 ? ITEM_GAP + MORE_BUTTON_WIDTH : 0);
-
-				if (totalNeeded > containerWidth) break;
-
-				usedWidth += itemWidth;
-				count++;
-			}
-
-			setVisibleCount(count);
-		};
-
-		const ro = new ResizeObserver(calculate);
-		ro.observe(outer);
-		calculate();
-
-		return () => ro.disconnect();
-	}, [navLinks]);
-
-	const visibleLinks = navLinks.slice(0, visibleCount);
-	const overflowLinks = navLinks.slice(visibleCount);
-
-	return (
-		<div ref={outerRef} className={cn("relative flex flex-1 min-w-0 overflow-hidden items-center", className)}>
-			{/* Hidden measurement bar — absolutely positioned, no effect on layout */}
-			<div
-				ref={measureRef}
-				aria-hidden
-				className="pointer-events-none invisible absolute left-0 top-0 flex items-center gap-md"
-			>
-				{navLinks.map((link, i) => (
-					<span
-						key={`measure-${i}-${link.href}`}
-						data-measure-item
-						className={cn(
-							"whitespace-nowrap text-sm",
-							itemClassName,
-						)}
-					>
-						{link.label}
-					</span>
-				))}
-			</div>
-
-			{/* Visible nav */}
-			<div className="flex items-center gap-md">
-				{visibleLinks.map((link) => (
-					<Link
-						key={`${link.href}-${link.label}`}
-						href={link.href}
-						className={cn(
-							"whitespace-nowrap text-sm transition-colors hover:text-foreground shrink-0",
-							link.isCurrent ? "text-foreground" : "text-muted-foreground",
-							itemClassName,
-						)}
-					>
-						{link.label}
-					</Link>
-				))}
-
-				<AnimatePresence>
-					{overflowLinks.length > 0 && (
-						<motion.div
-							key="more"
-							initial={{ opacity: 0, scale: 0.9 }}
-							animate={{ opacity: 1, scale: 1 }}
-							exit={{ opacity: 0, scale: 0.9 }}
-							transition={{ duration: 0.15 }}
-							className="shrink-0"
-						>
-							<DropdownMenu>
-								<DropdownMenuTrigger asChild>
-									<Button
-										variant="ghost"
-										size="sm"
-										className="h-auto gap-1 px-2 py-1 text-sm font-normal text-muted-foreground hover:text-foreground"
-									>
-										More
-										<ChevronDownIcon className="h-3 w-3" />
-									</Button>
-								</DropdownMenuTrigger>
-								<DropdownMenuContent align="end" className="min-w-[140px]">
-									{overflowLinks.map((link) => (
-										<DropdownMenuItem key={`${link.href}-${link.label}`} asChild>
-											<Link
-												href={link.href}
-												className={cn(
-													"w-full cursor-pointer",
-													link.isCurrent && "font-medium",
-												)}
-											>
-												{link.label}
-											</Link>
-										</DropdownMenuItem>
-									))}
-								</DropdownMenuContent>
-							</DropdownMenu>
-						</motion.div>
-					)}
-				</AnimatePresence>
-			</div>
-		</div>
-	);
+export const PriorityNav: React.FC<PriorityNavProps> = ({ navLinks, className, itemClassName }) => {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [visibleCount, setVisibleCount] = useState(navLinks.length);
+
+  useEffect(() => {
+    const outer = outerRef.current;
+    const measure = measureRef.current;
+    if (!outer || !measure) return;
+
+    const calculate = () => {
+      const containerWidth = outer.offsetWidth;
+      if (containerWidth === 0) return;
+
+      const items = measure.querySelectorAll<HTMLElement>("[data-measure-item]");
+      let usedWidth = 0;
+      let count = 0;
+
+      for (let i = 0; i < navLinks.length; i++) {
+        const el = items[i];
+        if (!el) continue;
+        const itemWidth = el.offsetWidth + (i > 0 ? ITEM_GAP : 0);
+        const remainingAfterThis = navLinks.length - (count + 1);
+        const totalNeeded =
+          usedWidth + itemWidth + (remainingAfterThis > 0 ? ITEM_GAP + MORE_BUTTON_WIDTH : 0);
+
+        if (totalNeeded > containerWidth) break;
+
+        usedWidth += itemWidth;
+        count++;
+      }
+
+      setVisibleCount(count);
+    };
+
+    const ro = new ResizeObserver(calculate);
+    ro.observe(outer);
+    calculate();
+
+    return () => ro.disconnect();
+  }, [navLinks]);
+
+  const visibleLinks = navLinks.slice(0, visibleCount);
+  const overflowLinks = navLinks.slice(visibleCount);
+
+  return (
+    <div
+      ref={outerRef}
+      className={cn("relative flex min-w-0 flex-1 items-center overflow-hidden", className)}
+    >
+      {/* Hidden measurement bar — absolutely positioned, no effect on layout */}
+      <div
+        ref={measureRef}
+        aria-hidden
+        className="pointer-events-none invisible absolute left-0 top-0 flex items-center gap-md"
+      >
+        {navLinks.map((link, i) => (
+          <span
+            key={`measure-${i}-${link.href}`}
+            data-measure-item
+            className={cn("whitespace-nowrap text-sm", itemClassName)}
+          >
+            {link.label}
+          </span>
+        ))}
+      </div>
+
+      {/* Visible nav */}
+      <div className="flex items-center gap-md">
+        {visibleLinks.map((link) => (
+          <Link
+            key={`${link.href}-${link.label}`}
+            href={link.href}
+            className={cn(
+              "shrink-0 whitespace-nowrap text-sm transition-colors hover:text-foreground",
+              link.isCurrent ? "text-foreground" : "text-muted-foreground",
+              itemClassName
+            )}
+          >
+            {link.label}
+          </Link>
+        ))}
+
+        <AnimatePresence>
+          {overflowLinks.length > 0 && (
+            <motion.div
+              key="more"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.9 }}
+              transition={{ duration: 0.15 }}
+              className="shrink-0"
+            >
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-auto gap-1 px-2 py-1 text-sm font-normal text-muted-foreground hover:text-foreground"
+                  >
+                    More
+                    <ChevronDownIcon className="h-3 w-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="min-w-[140px]">
+                  {overflowLinks.map((link) => (
+                    <DropdownMenuItem key={`${link.href}-${link.label}`} asChild>
+                      <Link
+                        href={link.href}
+                        className={cn("w-full cursor-pointer", link.isCurrent && "font-medium")}
+                      >
+                        {link.label}
+                      </Link>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
 };
-
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 4fc3b473..1741cd2f 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -11,10 +11,7 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-      className
-    )}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
@@ -22,7 +19,7 @@ const Progress = React.forwardRef<
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index 61686b83..98cb1f36 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,23 +1,17 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { cn } from "@/lib/utils"
-import { DotFilledIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "@/lib/utils";
+import { DotFilledIcon } from "@radix-ui/react-icons";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -36,8 +30,8 @@ const RadioGroupItem = React.forwardRef<
         <DotFilledIcon className="h-3.5 w-3.5 fill-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
index 2f83b002..5ef12105 100644
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -1,30 +1,27 @@
-"use client"
-import * as ResizablePrimitive from "react-resizable-panels"
+"use client";
+import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "@/lib/utils"
-import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import { cn } from "@/lib/utils";
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
 
 const ResizablePanelGroup = ({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
   <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
+    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
     {...props}
   />
-)
+);
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
@@ -39,6 +36,6 @@ const ResizableHandle = ({
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
-)
+);
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/src/components/ui/retro-grid.tsx b/src/components/ui/retro-grid.tsx
index d6710a7f..6c0af11b 100644
--- a/src/components/ui/retro-grid.tsx
+++ b/src/components/ui/retro-grid.tsx
@@ -1,12 +1,6 @@
 import { cn } from "@/lib/utils";
 
-export function RetroGrid({
-  className,
-  angle = 65,
-}: {
-  className?: string;
-  angle?: number;
-}) {
+export function RetroGrid({ className, angle = 65 }: { className?: string; angle?: number }) {
   return (
     <div
       className={cn(
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 0b4a48d8..1481fd6d 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -20,8 +20,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -32,17 +32,15 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index ed621d26..6b2de4cc 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { cn } from "@/lib/utils"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -28,8 +28,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDownIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -37,16 +37,13 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
     <ChevronUpIcon className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -54,17 +51,13 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
     <ChevronDownIcon className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -95,8 +88,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -107,8 +100,8 @@ const SelectLabel = React.forwardRef<
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -129,8 +122,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -141,8 +134,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -155,4 +148,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index 12d81c4a..c6bd9df2 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,31 +1,26 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 92506a42..7366273f 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Cross2Icon } from "@radix-ui/react-icons";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -20,14 +20,14 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -46,10 +46,11 @@ const sheetVariants = cva(
       side: "right",
     },
   }
-)
+);
 
 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
@@ -58,11 +59,7 @@ const SheetContent = React.forwardRef<
 >(({ side = "right", className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
@@ -70,36 +67,21 @@ const SheetContent = React.forwardRef<
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
 
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -110,8 +92,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -122,8 +104,8 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -136,4 +118,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/src/components/ui/shiny-button.tsx b/src/components/ui/shiny-button.tsx
index d46164ff..0ee506d2 100644
--- a/src/components/ui/shiny-button.tsx
+++ b/src/components/ui/shiny-button.tsx
@@ -58,4 +58,3 @@ export const ShinyButton = ({ children, className, ...props }: ShinyButtonProps)
     </motion.button>
   );
 };
-
diff --git a/src/components/ui/sidebar-nav.tsx b/src/components/ui/sidebar-nav.tsx
index 49406d99..99f23d2e 100644
--- a/src/components/ui/sidebar-nav.tsx
+++ b/src/components/ui/sidebar-nav.tsx
@@ -43,7 +43,7 @@ function LinkStatusDot() {
   const { pending } = useLinkStatus();
 
   if (pending) {
-    return <div className="w-2 h-2 bg-green-500 rounded-full" />;
+    return <div className="h-2 w-2 rounded-full bg-green-500" />;
   }
 
   return null;
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 4ef023e6..5d350a24 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -1,57 +1,52 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import { Sheet, SheetContent } from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { ViewVerticalIcon } from "@radix-ui/react-icons"
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ViewVerticalIcon } from "@radix-ui/react-icons";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContext = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
 
-const SidebarContext = React.createContext<SidebarContext | null>(null)
+const SidebarContext = React.createContext<SidebarContext | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+  const context = React.useContext(SidebarContext);
   if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
 
-  return context
+  return context;
 }
 
 const SidebarProvider = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
   }
 >(
   (
@@ -66,54 +61,49 @@ const SidebarProvider = React.forwardRef<
     },
     ref
   ) => {
-    const isMobile = useIsMobile()
-    const [openMobile, setOpenMobile] = React.useState(false)
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
 
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
-    const open = openProp ?? _open
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
+        const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
-          setOpenProp(openState)
+          setOpenProp(openState);
         } else {
-          _setOpen(openState)
+          _setOpen(openState);
         }
 
         // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
       },
       [setOpenProp, open]
-    )
+    );
 
     // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
-    }, [isMobile, setOpen, setOpenMobile])
+      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
 
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault()
-          toggleSidebar()
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          toggleSidebar();
         }
-      }
+      };
 
-      window.addEventListener("keydown", handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [toggleSidebar])
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
 
     // We add a state so that we can do data-state="expanded" or "collapsed".
     // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
+    const state = open ? "expanded" : "collapsed";
 
     const contextValue = React.useMemo<SidebarContext>(
       () => ({
@@ -126,7 +116,7 @@ const SidebarProvider = React.forwardRef<
         toggleSidebar,
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    )
+    );
 
     return (
       <SidebarContext.Provider value={contextValue}>
@@ -150,17 +140,17 @@ const SidebarProvider = React.forwardRef<
           </div>
         </TooltipProvider>
       </SidebarContext.Provider>
-    )
+    );
   }
-)
-SidebarProvider.displayName = "SidebarProvider"
+);
+SidebarProvider.displayName = "SidebarProvider";
 
 const Sidebar = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    side?: "left" | "right"
-    variant?: "sidebar" | "floating" | "inset"
-    collapsible?: "offcanvas" | "icon" | "none"
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
   }
 >(
   (
@@ -174,7 +164,7 @@ const Sidebar = React.forwardRef<
     },
     ref
   ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
     if (collapsible === "none") {
       return (
@@ -188,7 +178,7 @@ const Sidebar = React.forwardRef<
         >
           {children}
         </div>
-      )
+      );
     }
 
     if (isMobile) {
@@ -208,7 +198,7 @@ const Sidebar = React.forwardRef<
             <div className="flex h-full w-full flex-col">{children}</div>
           </SheetContent>
         </Sheet>
-      )
+      );
     }
 
     return (
@@ -253,16 +243,16 @@ const Sidebar = React.forwardRef<
           </div>
         </div>
       </div>
-    )
+    );
   }
-)
-Sidebar.displayName = "Sidebar"
+);
+Sidebar.displayName = "Sidebar";
 
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -272,64 +262,62 @@ const SidebarTrigger = React.forwardRef<
       size="icon"
       className={cn("h-7 w-7", className)}
       onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
+        onClick?.(event);
+        toggleSidebar();
       }}
       {...props}
     >
       <ViewVerticalIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
 
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
 
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarRail.displayName = "SidebarRail"
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+SidebarRail.displayName = "SidebarRail";
 
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInset.displayName = "SidebarInset"
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <main
+        ref={ref}
+        className={cn(
+          "relative flex min-h-svh flex-1 flex-col bg-background",
+          "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+SidebarInset.displayName = "SidebarInset";
 
 const SidebarInput = React.forwardRef<
   React.ElementRef<typeof Input>,
@@ -345,39 +333,37 @@ const SidebarInput = React.forwardRef<
       )}
       {...props}
     />
-  )
-})
-SidebarInput.displayName = "SidebarInput"
+  );
+});
+SidebarInput.displayName = "SidebarInput";
 
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={cn("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
 
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={cn("flex flex-col gap-2 p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarFooter.displayName = "SidebarFooter";
 
 const SidebarSeparator = React.forwardRef<
   React.ElementRef<typeof Separator>,
@@ -390,48 +376,46 @@ const SidebarSeparator = React.forwardRef<
       className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
-  )
-})
-SidebarSeparator.displayName = "SidebarSeparator"
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
 
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={cn(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+SidebarContent.displayName = "SidebarContent";
 
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarGroup.displayName = "SidebarGroup"
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group"
+        className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarGroup.displayName = "SidebarGroup";
 
 const SidebarGroupLabel = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? Slot : "div";
 
   return (
     <Comp
@@ -444,15 +428,15 @@ const SidebarGroupLabel = React.forwardRef<
       )}
       {...props}
     />
-  )
-})
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
 
 const SidebarGroupAction = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -467,48 +451,45 @@ const SidebarGroupAction = React.forwardRef<
       )}
       {...props}
     />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
   )
-})
-SidebarGroupAction.displayName = "SidebarGroupAction"
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
 
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-))
-SidebarGroupContent.displayName = "SidebarGroupContent"
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-))
-SidebarMenu.displayName = "SidebarMenu"
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-))
-SidebarMenuItem.displayName = "SidebarMenuItem"
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+);
+SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
@@ -530,14 +511,14 @@ const sidebarMenuButtonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 const SidebarMenuButton = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button"> & {
-    asChild?: boolean
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
   (
@@ -552,8 +533,8 @@ const SidebarMenuButton = React.forwardRef<
     },
     ref
   ) => {
-    const Comp = asChild ? Slot : "button"
-    const { isMobile, state } = useSidebar()
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
 
     const button = (
       <Comp
@@ -564,16 +545,16 @@ const SidebarMenuButton = React.forwardRef<
         className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
         {...props}
       />
-    )
+    );
 
     if (!tooltip) {
-      return button
+      return button;
     }
 
     if (typeof tooltip === "string") {
       tooltip = {
         children: tooltip,
-      }
+      };
     }
 
     return (
@@ -586,19 +567,19 @@ const SidebarMenuButton = React.forwardRef<
           {...tooltip}
         />
       </Tooltip>
-    )
+    );
   }
-)
-SidebarMenuButton.displayName = "SidebarMenuButton"
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
 
 const SidebarMenuAction = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button"> & {
-    asChild?: boolean
-    showOnHover?: boolean
+    asChild?: boolean;
+    showOnHover?: boolean;
   }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -618,41 +599,40 @@ const SidebarMenuAction = React.forwardRef<
       )}
       {...props}
     />
-  )
-})
-SidebarMenuAction.displayName = "SidebarMenuAction"
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
 
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
 
 const SidebarMenuSkeleton = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    showIcon?: boolean
+    showIcon?: boolean;
   }
 >(({ className, showIcon = false, ...props }, ref) => {
   // Random width between 50 to 90%.
   const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
 
   return (
     <div
@@ -661,12 +641,7 @@ const SidebarMenuSkeleton = React.forwardRef<
       className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
       <Skeleton
         className="h-4 max-w-[--skeleton-width] flex-1"
         data-sidebar="menu-skeleton-text"
@@ -677,42 +652,40 @@ const SidebarMenuSkeleton = React.forwardRef<
         }
       />
     </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
   )
-})
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuSub.displayName = "SidebarMenuSub"
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ ...props }, ref) => <li ref={ref} {...props} />
+);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 const SidebarMenuSubButton = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentProps<"a"> & {
-    asChild?: boolean
-    size?: "sm" | "md"
-    isActive?: boolean
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
   }
 >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -730,9 +703,9 @@ const SidebarMenuSubButton = React.forwardRef<
       )}
       {...props}
     />
-  )
-})
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 export {
   Sidebar,
@@ -759,4 +732,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-}
+};
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index d7e45f7b..6d9a6167 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,15 +1,7 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      {...props}
-    />
-  )
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />;
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index ab19d576..0ed6836e 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
@@ -11,10 +11,7 @@ const Slider = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
     {...props}
   >
     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
@@ -22,7 +19,7 @@ const Slider = React.forwardRef<
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-export { Slider }
+export { Slider };
diff --git a/src/components/ui/social-links.tsx b/src/components/ui/social-links.tsx
index a01c1726..0a73e501 100644
--- a/src/components/ui/social-links.tsx
+++ b/src/components/ui/social-links.tsx
@@ -91,7 +91,7 @@ export const SocialLinks = ({
             rel="noopener noreferrer"
             aria-label={labelled ? undefined : label}
             className={cn(
-              "inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+              "inline-flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground"
             )}
           >
             <Icon className={cn("h-5 w-5", iconClassName)} />
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 452f4d9f..8d084f8f 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = "system" } = useTheme();
 
   return (
     <Sonner
@@ -17,15 +17,13 @@ const Toaster = ({ ...props }: ToasterProps) => {
           toast:
             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
         },
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/src/components/ui/steps.tsx b/src/components/ui/steps.tsx
index 665c613a..a654ee2e 100644
--- a/src/components/ui/steps.tsx
+++ b/src/components/ui/steps.tsx
@@ -43,7 +43,7 @@ export const Steps = ({ children, className }: StepsProps) => {
               <h6 className="mb-2 ml-1 text-lg font-medium tracking-tight text-neutral-700 dark:text-neutral-50">
                 {props.title}
               </h6>
-              <div className="ml-1 text-sm text-muted-foreground [&>pre]:my-2 [&>p]:my-1">
+              <div className="ml-1 text-sm text-muted-foreground [&>p]:my-1 [&>pre]:my-2">
                 {props.children}
               </div>
             </div>
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 5f4117f0..b35a4081 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -23,7 +23,7 @@ const Switch = React.forwardRef<
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index c0df655c..09427c90 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,40 +1,31 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -42,29 +33,25 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -78,8 +65,8 @@ const TableHead = React.forwardRef<
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -93,28 +80,15 @@ const TableCell = React.forwardRef<
     )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 0f4caebb..35f66dd3 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -19,8 +19,8 @@ const TabsList = React.forwardRef<
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -34,8 +34,8 @@ const TabsTrigger = React.forwardRef<
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -49,7 +49,7 @@ const TabsContent = React.forwardRef<
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/components/ui/text-loop.tsx b/src/components/ui/text-loop.tsx
index 0f3c7e0c..d5e02cb4 100644
--- a/src/components/ui/text-loop.tsx
+++ b/src/components/ui/text-loop.tsx
@@ -1,13 +1,7 @@
-'use client';
-import { cn } from '@/lib/utils';
-import {
-  motion,
-  AnimatePresence,
-  Transition,
-  Variants,
-  AnimatePresenceProps,
-} from 'motion/react';
-import { useState, useEffect, Children } from 'react';
+"use client";
+import { cn } from "@/lib/utils";
+import { motion, AnimatePresence, Transition, Variants, AnimatePresenceProps } from "motion/react";
+import { useState, useEffect, Children } from "react";
 
 export type TextLoopProps = {
   children: React.ReactNode[];
@@ -17,7 +11,7 @@ export type TextLoopProps = {
   variants?: Variants;
   onIndexChange?: (index: number) => void;
   trigger?: boolean;
-  mode?: AnimatePresenceProps['mode'];
+  mode?: AnimatePresenceProps["mode"];
 };
 
 export function TextLoop({
@@ -28,7 +22,7 @@ export function TextLoop({
   variants,
   onIndexChange,
   trigger = true,
-  mode = 'popLayout',
+  mode = "popLayout",
 }: TextLoopProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const items = Children.toArray(children);
@@ -54,13 +48,13 @@ export function TextLoop({
   };
 
   return (
-    <div className={cn('relative inline-block whitespace-nowrap', className)}>
+    <div className={cn("relative inline-block whitespace-nowrap", className)}>
       <AnimatePresence mode={mode} initial={false}>
         <motion.div
           key={currentIndex}
-          initial='initial'
-          animate='animate'
-          exit='exit'
+          initial="initial"
+          animate="animate"
+          exit="exit"
           transition={transition}
           variants={variants || motionVariants}
         >
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index e56b0aff..f7456642 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,22 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/src/components/ui/theme.tsx b/src/components/ui/theme.tsx
index 56076376..6fcc305f 100644
--- a/src/components/ui/theme.tsx
+++ b/src/components/ui/theme.tsx
@@ -35,50 +35,50 @@ import React from "react";
 
 import { Button, type ButtonProps } from "@/components/ui/button";
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 
 const ThemeButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
-	<Button variant="ghost" size="icon" {...props} ref={ref}>
-		<SunIcon className="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-		<MoonIcon className="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-		<span className="sr-only">Toggle theme</span>
-	</Button>
+  <Button variant="ghost" size="icon" {...props} ref={ref}>
+    <SunIcon className="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+    <MoonIcon className="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    <span className="sr-only">Toggle theme</span>
+  </Button>
 ));
 ThemeButton.displayName = "ThemeButton";
 
 const ThemeToggle = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-	const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
 
-	return (
-		<ThemeButton
-			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-			{...props}
-			ref={ref}
-		/>
-	);
+  return (
+    <ThemeButton
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      {...props}
+      ref={ref}
+    />
+  );
 });
 ThemeToggle.displayName = "ThemeToggle";
 
 const ThemeChooser = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-	const { setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<ThemeButton {...props} ref={ref} />
-			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end">
-				<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <ThemeButton {...props} ref={ref} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 });
 ThemeChooser.displayName = "ThemeChooser";
 
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index c294b300..17216bf2 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -41,8 +41,7 @@ const toastVariants = cva(
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
index 171beb46..bdda26ed 100644
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import { useToast } from "@/hooks/use-toast"
+import { useToast } from "@/hooks/use-toast";
 import {
   Toast,
   ToastClose,
@@ -8,10 +8,10 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
+} from "@/components/ui/toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -20,16 +20,14 @@ export function Toaster() {
           <Toast key={id} {...props}>
             <div className="grid gap-1">
               {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
+              {description && <ToastDescription>{description}</ToastDescription>}
             </div>
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/src/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
index 1c876bbe..9833ad5c 100644
--- a/src/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -1,18 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
 
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
   size: "default",
   variant: "default",
-})
+});
 
 const ToggleGroup = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -24,20 +22,18 @@ const ToggleGroup = React.forwardRef<
     className={cn("flex items-center justify-center gap-1", className)}
     {...props}
   >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
-))
+));
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
 const ToggleGroupItem = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
     VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
+  const context = React.useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -53,9 +49,9 @@ const ToggleGroupItem = React.forwardRef<
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  )
-})
+  );
+});
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
index db35d78b..fc09c7bf 100644
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -26,20 +26,19 @@ const toggleVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
   />
-))
+));
 
-Toggle.displayName = TogglePrimitive.Root.displayName
+Toggle.displayName = TogglePrimitive.Root.displayName;
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index a66b3f22..c4b664a7 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -26,7 +26,7 @@ const TooltipContent = React.forwardRef<
       {...props}
     />
   </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/components/ui/user-menu.tsx b/src/components/ui/user-menu.tsx
index 5d02cef1..54b0d99d 100644
--- a/src/components/ui/user-menu.tsx
+++ b/src/components/ui/user-menu.tsx
@@ -5,19 +5,19 @@ import { useKeyboardShortcut } from "@/components/providers/keyboard-shortcut-pr
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ShortcutAction } from "@/config/keyboard-shortcuts";
@@ -38,211 +38,220 @@ import * as React from "react";
 type Theme = "light" | "dark" | "system";
 
 interface UserMenuProps {
-	size?: "default" | "sm";
-	className?: string;
+  size?: "default" | "sm";
+  className?: string;
 }
 
 export const UserMenu: React.FC<UserMenuProps> = ({ size = "default", className }) => {
-	const { data: session, status } = useSession();
-	const signInRedirectUrl = useSignInRedirectUrl();
-	const router = useRouter();
-	const { theme, setTheme } = useTheme();
-	const { toast } = useToast();
-	const [isOpen, setIsOpen] = React.useState(false);
+  const { data: session, status } = useSession();
+  const signInRedirectUrl = useSignInRedirectUrl();
+  const router = useRouter();
+  const { theme, setTheme } = useTheme();
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = React.useState(false);
 
-	const isAdmin = Boolean(session?.user?.email && siteConfig.admin.isAdmin(session.user.email));
-	const isAuthenticated = Boolean(session?.user);
+  const isAdmin = Boolean(session?.user?.email && siteConfig.admin.isAdmin(session.user.email));
+  const isAuthenticated = Boolean(session?.user);
 
-	const handleThemeChange = React.useCallback(
-		async (value: string) => {
-			const newTheme = value as Theme;
-			// Update the theme immediately for a snappy UI
-			setTheme(newTheme);
+  const handleThemeChange = React.useCallback(
+    async (value: string) => {
+      const newTheme = value as Theme;
+      // Update the theme immediately for a snappy UI
+      setTheme(newTheme);
 
-			// Then persist to the database
-			if (session?.user) {
-				try {
-					const result = await updateTheme(newTheme);
-					if (!result.success) {
-						toast({
-							title: "Failed to save theme preference",
-							description: result.error || "Your theme preference will reset on next visit.",
-							variant: "destructive",
-						});
-						return;
-					}
-					toast({
-						title: "Theme updated",
-						description: result.message,
-					});
-				} catch (error) {
-					console.error("Failed to update theme:", error);
-					toast({
-						title: "Failed to save theme preference",
-						description: "Your theme preference will reset on next visit.",
-						variant: "destructive",
-					});
-				}
-			}
-		},
-		[session?.user, setTheme, toast]
-	);
+      // Then persist to the database
+      if (session?.user) {
+        try {
+          const result = await updateTheme(newTheme);
+          if (!result.success) {
+            toast({
+              title: "Failed to save theme preference",
+              description: result.error || "Your theme preference will reset on next visit.",
+              variant: "destructive",
+            });
+            return;
+          }
+          toast({
+            title: "Theme updated",
+            description: result.message,
+          });
+        } catch (error) {
+          console.error("Failed to update theme:", error);
+          toast({
+            title: "Failed to save theme preference",
+            description: "Your theme preference will reset on next visit.",
+            variant: "destructive",
+          });
+        }
+      }
+    },
+    [session?.user, setTheme, toast]
+  );
 
-	/*
-	 * The keys this menu advertises, wired to the same code the rows run.
-	 *
-	 * Every hint comes from `shortcutConfig` via `ShortcutDisplay`, and every
-	 * entry it binds is handled here or by the header search, so nothing in the
-	 * config is left bound to nothing. This used to be a hand-rolled window
-	 * listener that watched for plain Cmd+L, Cmd+D and Cmd+B: it fired while you
-	 * were typing in a text field, and it took Cmd+L (the address bar) and Cmd+D
-	 * (bookmark) away from the browser.
-	 */
-	useKeyboardShortcut(ShortcutAction.SET_THEME_LIGHT, () => {
-		void handleThemeChange("light");
-	});
-	useKeyboardShortcut(ShortcutAction.SET_THEME_DARK, () => {
-		void handleThemeChange("dark");
-	});
-	useKeyboardShortcut(ShortcutAction.SET_THEME_SYSTEM, () => {
-		void handleThemeChange("system");
-	});
-	useKeyboardShortcut(
-		ShortcutAction.GOTO_ADMIN,
-		() => {
-			router.push(routes.admin.root);
-		},
-		() => isAdmin
-	);
-	useKeyboardShortcut(
-		ShortcutAction.GOTO_SETTINGS,
-		() => {
-			router.push(routes.app.settings);
-		},
-		() => isAuthenticated
-	);
-	useKeyboardShortcut(
-		ShortcutAction.LOGOUT_USER,
-		() => {
-			void signOut();
-		},
-		() => isAuthenticated
-	);
+  /*
+   * The keys this menu advertises, wired to the same code the rows run.
+   *
+   * Every hint comes from `shortcutConfig` via `ShortcutDisplay`, and every
+   * entry it binds is handled here or by the header search, so nothing in the
+   * config is left bound to nothing. This used to be a hand-rolled window
+   * listener that watched for plain Cmd+L, Cmd+D and Cmd+B: it fired while you
+   * were typing in a text field, and it took Cmd+L (the address bar) and Cmd+D
+   * (bookmark) away from the browser.
+   */
+  useKeyboardShortcut(ShortcutAction.SET_THEME_LIGHT, () => {
+    void handleThemeChange("light");
+  });
+  useKeyboardShortcut(ShortcutAction.SET_THEME_DARK, () => {
+    void handleThemeChange("dark");
+  });
+  useKeyboardShortcut(ShortcutAction.SET_THEME_SYSTEM, () => {
+    void handleThemeChange("system");
+  });
+  useKeyboardShortcut(
+    ShortcutAction.GOTO_ADMIN,
+    () => {
+      router.push(routes.admin.root);
+    },
+    () => isAdmin
+  );
+  useKeyboardShortcut(
+    ShortcutAction.GOTO_SETTINGS,
+    () => {
+      router.push(routes.app.settings);
+    },
+    () => isAuthenticated
+  );
+  useKeyboardShortcut(
+    ShortcutAction.LOGOUT_USER,
+    () => {
+      void signOut();
+    },
+    () => isAuthenticated
+  );
 
-	// Loading state
-	if (status === "loading") {
-		return (
-			<Skeleton className={cn("rounded-full", size === "sm" ? "h-6 w-6" : "h-8 w-8")}>
-				<div className={cn("rounded-full bg-muted", size === "sm" ? "h-6 w-6" : "h-8 w-8")} />
-			</Skeleton>
-		);
-	}
+  // Loading state
+  if (status === "loading") {
+    return (
+      <Skeleton className={cn("rounded-full", size === "sm" ? "h-6 w-6" : "h-8 w-8")}>
+        <div className={cn("rounded-full bg-muted", size === "sm" ? "h-6 w-6" : "h-8 w-8")} />
+      </Skeleton>
+    );
+  }
 
-	// Not authenticated
-	if (!session?.user) {
-		return (
-			<Link
-				href={signInRedirectUrl}
-				className={cn(buttonVariants({ variant: "ghost", size: "icon" }), "rounded-full cursor-pointer")}
-			>
-				<UserIcon className="size-4" />
-			</Link>
-		);
-	}
+  // Not authenticated
+  if (!session?.user) {
+    return (
+      <Link
+        href={signInRedirectUrl}
+        className={cn(
+          buttonVariants({ variant: "ghost", size: "icon" }),
+          "cursor-pointer rounded-full"
+        )}
+      >
+        <UserIcon className="size-4" />
+      </Link>
+    );
+  }
 
-	return (
-		<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-			<DropdownMenuTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className={cn("relative rounded-full", size === "sm" ? "h-6 w-6" : "h-8 w-8", className)}
-					aria-label="User menu"
-				>
-					<Avatar className={cn(size === "sm" ? "h-6 w-6" : "h-8 w-8")}>
-						<AvatarImage
-							src={session?.user?.image || ""}
-							alt={session?.user?.name || "User avatar"}
-						/>
-						<AvatarFallback>{session?.user?.name?.[0]?.toUpperCase() || "?"}</AvatarFallback>
-					</Avatar>
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent
-				className="w-56"
-				align="end"
-				forceMount
-				onCloseAutoFocus={(event) => {
-					event.preventDefault();
-				}}
-			>
-				<DropdownMenuLabel className="font-normal">
-					<div className="flex flex-col space-y-1">
-						<p className="text-sm font-medium leading-none">{session?.user?.name}</p>
-						<p className="text-xs leading-none text-muted-foreground">{session?.user?.email}</p>
-					</div>
-				</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				<DropdownMenuGroup>
-					{isAdmin && (
-						<DropdownMenuItem asChild>
-							<Link href={routes.admin.root}>
-								Admin
-								<ShortcutDisplay action={ShortcutAction.GOTO_ADMIN} as={DropdownMenuShortcut} />
-							</Link>
-						</DropdownMenuItem>
-					)}
-					<DropdownMenuItem asChild>
-						<Link href={routes.app.dashboard}>Dashboard</Link>
-					</DropdownMenuItem>
-					<DropdownMenuItem asChild>
-						<Link href={routes.app.settings}>
-							Settings
-							<ShortcutDisplay action={ShortcutAction.GOTO_SETTINGS} as={DropdownMenuShortcut} />
-						</Link>
-					</DropdownMenuItem>
-					<DropdownMenuItem asChild>
-						<Link href={routes.app.apiKeys}>API Keys</Link>
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
-				<DropdownMenuSeparator />
-				<DropdownMenuSub>
-					<DropdownMenuSubTrigger>
-						<SunIcon className="mr-2 size-4" />
-						<span>Theme</span>
-					</DropdownMenuSubTrigger>
-					<DropdownMenuSubContent>
-						<DropdownMenuRadioGroup value={theme || "system"} onValueChange={handleThemeChange}>
-							<DropdownMenuRadioItem value="light" className="flex items-center gap-2">
-								<SunIcon className="size-4" />
-								<span>Light</span>
-								<ShortcutDisplay action={ShortcutAction.SET_THEME_LIGHT} as={DropdownMenuShortcut} />
-							</DropdownMenuRadioItem>
-							<DropdownMenuRadioItem value="dark" className="flex items-center gap-2">
-								<MoonIcon className="size-4" />
-								<span>Dark</span>
-								<ShortcutDisplay action={ShortcutAction.SET_THEME_DARK} as={DropdownMenuShortcut} />
-							</DropdownMenuRadioItem>
-							<DropdownMenuRadioItem value="system" className="flex items-center gap-2">
-								<DesktopIcon className="size-4" />
-								<span>System</span>
-								<ShortcutDisplay action={ShortcutAction.SET_THEME_SYSTEM} as={DropdownMenuShortcut} />
-							</DropdownMenuRadioItem>
-						</DropdownMenuRadioGroup>
-					</DropdownMenuSubContent>
-				</DropdownMenuSub>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem
-					className="text-red-600 dark:text-red-400"
-					onClick={() => {
-						setIsOpen(false);
-						signOut();
-					}}
-				>
-					Sign out
-					<ShortcutDisplay action={ShortcutAction.LOGOUT_USER} as={DropdownMenuShortcut} />
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("relative rounded-full", size === "sm" ? "h-6 w-6" : "h-8 w-8", className)}
+          aria-label="User menu"
+        >
+          <Avatar className={cn(size === "sm" ? "h-6 w-6" : "h-8 w-8")}>
+            <AvatarImage
+              src={session?.user?.image || ""}
+              alt={session?.user?.name || "User avatar"}
+            />
+            <AvatarFallback>{session?.user?.name?.[0]?.toUpperCase() || "?"}</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-56"
+        align="end"
+        forceMount
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">{session?.user?.name}</p>
+            <p className="text-xs leading-none text-muted-foreground">{session?.user?.email}</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {isAdmin && (
+            <DropdownMenuItem asChild>
+              <Link href={routes.admin.root}>
+                Admin
+                <ShortcutDisplay action={ShortcutAction.GOTO_ADMIN} as={DropdownMenuShortcut} />
+              </Link>
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem asChild>
+            <Link href={routes.app.dashboard}>Dashboard</Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link href={routes.app.settings}>
+              Settings
+              <ShortcutDisplay action={ShortcutAction.GOTO_SETTINGS} as={DropdownMenuShortcut} />
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link href={routes.app.apiKeys}>API Keys</Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <SunIcon className="mr-2 size-4" />
+            <span>Theme</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuRadioGroup value={theme || "system"} onValueChange={handleThemeChange}>
+              <DropdownMenuRadioItem value="light" className="flex items-center gap-2">
+                <SunIcon className="size-4" />
+                <span>Light</span>
+                <ShortcutDisplay
+                  action={ShortcutAction.SET_THEME_LIGHT}
+                  as={DropdownMenuShortcut}
+                />
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="dark" className="flex items-center gap-2">
+                <MoonIcon className="size-4" />
+                <span>Dark</span>
+                <ShortcutDisplay action={ShortcutAction.SET_THEME_DARK} as={DropdownMenuShortcut} />
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="system" className="flex items-center gap-2">
+                <DesktopIcon className="size-4" />
+                <span>System</span>
+                <ShortcutDisplay
+                  action={ShortcutAction.SET_THEME_SYSTEM}
+                  as={DropdownMenuShortcut}
+                />
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-red-600 dark:text-red-400"
+          onClick={() => {
+            setIsOpen(false);
+            signOut();
+          }}
+        >
+          Sign out
+          <ShortcutDisplay action={ShortcutAction.LOGOUT_USER} as={DropdownMenuShortcut} />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 };
diff --git a/src/components/ui/vercel-navigation.tsx b/src/components/ui/vercel-navigation.tsx
index 952b4b14..836e7222 100644
--- a/src/components/ui/vercel-navigation.tsx
+++ b/src/components/ui/vercel-navigation.tsx
@@ -8,104 +8,103 @@ import { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { LinkOrButton } from "../primitives/link-or-button";
 interface NavLink {
-	label: string | React.ReactNode;
-	href: string;
-	icon?: React.ReactNode;
+  label: string | React.ReactNode;
+  href: string;
+  icon?: React.ReactNode;
 }
 
 const navigationVariants = cva(
-	// Base styles
-	"flex flex-col sm:flex-row",
-	{
-		variants: {
-			variant: {
-				hover: "", // Variant 1 - hover based
-				click: "", // Variant 2 - click based
-			},
-		},
-		defaultVariants: {
-			variant: "hover",
-		},
-	}
+  // Base styles
+  "flex flex-col sm:flex-row",
+  {
+    variants: {
+      variant: {
+        hover: "", // Variant 1 - hover based
+        click: "", // Variant 2 - click based
+      },
+    },
+    defaultVariants: {
+      variant: "hover",
+    },
+  }
 );
 
 const buttonVariants = cva(
-	// Base styles
-	"relative z-10 flex w-fit whitespace-nowrap rounded px-2 py-1 font-medium text-sm text-neutral-500",
-	{
-		variants: {
-			variant: {
-				hover: "",
-				click: "transition-colors hover:text-neutral-600 dark:hover:text-neutral-400",
-			},
-		},
-		defaultVariants: {
-			variant: "hover",
-		},
-	}
+  // Base styles
+  "relative z-10 flex w-fit whitespace-nowrap rounded px-2 py-1 font-medium text-sm text-neutral-500",
+  {
+    variants: {
+      variant: {
+        hover: "",
+        click: "transition-colors hover:text-neutral-600 dark:hover:text-neutral-400",
+      },
+    },
+    defaultVariants: {
+      variant: "hover",
+    },
+  }
 );
 
 interface VercelNavigationProps extends VariantProps<typeof navigationVariants> {
-	navLinks?: NavLink[];
-	className?: string;
+  navLinks?: NavLink[];
+  className?: string;
 }
 
 export const VercelNavigation = ({
-	variant = "hover",
-	navLinks = [
-		{ label: "Home", href: "#" },
-		{ label: "About", href: "#" },
-		{ label: "Contact", href: "#" },
-		{ label: "Terms & conditions", href: "#" },
-		{ label: "Cuicui.day", href: "#" },
-	],
-	className,
+  variant = "hover",
+  navLinks = [
+    { label: "Home", href: "#" },
+    { label: "About", href: "#" },
+    { label: "Contact", href: "#" },
+    { label: "Terms & conditions", href: "#" },
+    { label: "Cuicui.day", href: "#" },
+  ],
+  className,
 }: VercelNavigationProps) => {
-	const [elementFocused, setElementFocused] = useState<number | null>(
-		variant === "hover" ? null : 0
-	);
+  const [elementFocused, setElementFocused] = useState<number | null>(
+    variant === "hover" ? null : 0
+  );
 
-	const handleInteraction = (index: number | null) => {
-		setElementFocused(index);
-	};
+  const handleInteraction = (index: number | null) => {
+    setElementFocused(index);
+  };
 
-	return (
-		<nav
-			className={cn(navigationVariants({ variant }), className)}
-			{...(variant === "hover" && {
-				onMouseLeave: () => handleInteraction(null),
-			})}
-		>
-			{navLinks.map((link, index) => (
-				<LinkOrButton
-					href={link.href}
-					className={cn(buttonVariants({ variant }), "items-center justify-center")}
-					key={uuidv4()}
-					{...(variant === "hover"
-						? { onMouseEnter: () => handleInteraction(index) }
-						: { onClick: () => handleInteraction(index) })}
-					type="button"
-				>
-					{link.label}
-					<AnimatePresence>
-						{elementFocused === index && (
-							<motion.div
-								animate={{ opacity: 1, scale: 1 }}
-								className="absolute bottom-0 left-0 right-0 top-0 -z-10 rounded-md bg-neutral-200 dark:bg-neutral-800"
-								exit={{ opacity: 0, scale: 0.9 }}
-								initial={{ opacity: 0, scale: 0.95 }}
-								layout={true}
-								layoutId="focused-element"
-								transition={{
-									duration: variant === "hover" ? 0.2 : 0.3,
-									ease: variant === "hover" ? "easeOut" : "easeInOut",
-								}}
-							/>
-						)}
-					</AnimatePresence>
-				</LinkOrButton>
-			))}
-		</nav>
-	);
+  return (
+    <nav
+      className={cn(navigationVariants({ variant }), className)}
+      {...(variant === "hover" && {
+        onMouseLeave: () => handleInteraction(null),
+      })}
+    >
+      {navLinks.map((link, index) => (
+        <LinkOrButton
+          href={link.href}
+          className={cn(buttonVariants({ variant }), "items-center justify-center")}
+          key={uuidv4()}
+          {...(variant === "hover"
+            ? { onMouseEnter: () => handleInteraction(index) }
+            : { onClick: () => handleInteraction(index) })}
+          type="button"
+        >
+          {link.label}
+          <AnimatePresence>
+            {elementFocused === index && (
+              <motion.div
+                animate={{ opacity: 1, scale: 1 }}
+                className="absolute bottom-0 left-0 right-0 top-0 -z-10 rounded-md bg-neutral-200 dark:bg-neutral-800"
+                exit={{ opacity: 0, scale: 0.9 }}
+                initial={{ opacity: 0, scale: 0.95 }}
+                layout={true}
+                layoutId="focused-element"
+                transition={{
+                  duration: variant === "hover" ? 0.2 : 0.3,
+                  ease: variant === "hover" ? "easeOut" : "easeInOut",
+                }}
+              />
+            )}
+          </AnimatePresence>
+        </LinkOrButton>
+      ))}
+    </nav>
+  );
 };
-
diff --git a/src/components/ui/warp-background.tsx b/src/components/ui/warp-background.tsx
index 4c4210d3..201df904 100644
--- a/src/components/ui/warp-background.tsx
+++ b/src/components/ui/warp-background.tsx
@@ -98,7 +98,7 @@ export const WarpBackground: React.FC<WarpBackgroundProps> = ({
         }
       >
         {/* top side */}
-        <div className="absolute [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">
+        <div className="absolute [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform-style:preserve-3d] [transform:rotateX(-90deg)] [width:100cqi]">
           {topBeams.map((beam, index) => (
             <Beam
               key={`top-${index}`}
@@ -110,7 +110,7 @@ export const WarpBackground: React.FC<WarpBackgroundProps> = ({
           ))}
         </div>
         {/* bottom side */}
-        <div className="absolute top-full [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">
+        <div className="absolute top-full [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform-style:preserve-3d] [transform:rotateX(-90deg)] [width:100cqi]">
           {bottomBeams.map((beam, index) => (
             <Beam
               key={`bottom-${index}`}
@@ -122,7 +122,7 @@ export const WarpBackground: React.FC<WarpBackgroundProps> = ({
           ))}
         </div>
         {/* left side */}
-        <div className="absolute left-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]">
+        <div className="absolute left-0 top-0 [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform-style:preserve-3d] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]">
           {leftBeams.map((beam, index) => (
             <Beam
               key={`left-${index}`}
@@ -134,7 +134,7 @@ export const WarpBackground: React.FC<WarpBackgroundProps> = ({
           ))}
         </div>
         {/* right side */}
-        <div className="absolute right-0 top-0 [transform-style:preserve-3d] [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]">
+        <div className="absolute right-0 top-0 [background-size:var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,_var(--grid-color)_0_1px,_transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] [container-type:inline-size] [height:100cqmax] [transform-origin:100%_0%] [transform-style:preserve-3d] [transform:rotate(-90deg)_rotateX(-90deg)] [width:100cqh]">
           {rightBeams.map((beam, index) => (
             <Beam
               key={`right-${index}`}
diff --git a/src/config/base-url.ts b/src/config/base-url.ts
index 5a86fe9f..7c735288 100644
--- a/src/config/base-url.ts
+++ b/src/config/base-url.ts
@@ -1,6 +1,6 @@
 export const BASE_URL =
-	process.env.NODE_ENV === "production"
-		? (process.env.URL ?? `https://${process.env.VERCEL_URL}`)
-		: typeof window !== "undefined"
-			? window.location.origin
-			: `http://localhost:${process.env.PORT}`;
+  process.env.NODE_ENV === "production"
+    ? (process.env.URL ?? `https://${process.env.VERCEL_URL}`)
+    : typeof window !== "undefined"
+      ? window.location.origin
+      : `http://localhost:${process.env.PORT}`;
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 88125ed7..ef1aebfb 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -3,7 +3,7 @@ import { siteConfig } from "./site-config";
 /**
  * The relative path from the project root to the directory containing Next.js configuration plugins.
  */
-export const NEXTJS_PLUGINS_DIR_RELATIVE = 'src/config/nextjs';
+export const NEXTJS_PLUGINS_DIR_RELATIVE = "src/config/nextjs";
 
 /**
  * Default "from" email for Resend. Falls back to support email.
diff --git a/src/config/file.ts b/src/config/file.ts
index 14eba429..0c9bc9c5 100644
--- a/src/config/file.ts
+++ b/src/config/file.ts
@@ -6,35 +6,35 @@ export const BYTES_IN_A_MEGABYTE = 1024 * 1024;
 export const FILE_UPLOAD_MAX_SIZE = 2 * BYTES_IN_A_MEGABYTE; // 2 MB
 
 const FILE_TYPES_IMAGES = [
-	"image/png",
-	"image/jpeg",
-	"image/jpg",
-	"image/gif",
-	"image/bmp",
-	"image/webp",
-	"image/svg+xml",
-	"image/tiff",
-	"image/x-icon",
-	"image/heic",
-	"image/heif",
-	"image/heif-sequence",
-	"image/heic-sequence",
-	"image/avif",
-	"image/avif-sequence",
-	"image/apng",
-	"image/bmp",
-	"image/dib",
-	"image/ico",
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "image/gif",
+  "image/bmp",
+  "image/webp",
+  "image/svg+xml",
+  "image/tiff",
+  "image/x-icon",
+  "image/heic",
+  "image/heif",
+  "image/heif-sequence",
+  "image/heic-sequence",
+  "image/avif",
+  "image/avif-sequence",
+  "image/apng",
+  "image/bmp",
+  "image/dib",
+  "image/ico",
 ];
 
 const FILE_TYPES_DOCUMENTS = [
-	"application/pdf",
-	"application/msword",
-	"text/plain",
-	"text/markdown",
-	"text/csv",
-	"text/xml",
-	"text/html",
+  "application/pdf",
+  "application/msword",
+  "text/plain",
+  "text/markdown",
+  "text/csv",
+  "text/xml",
+  "text/html",
 ];
 
 export const ALLOWED_FILE_TYPES = [...FILE_TYPES_IMAGES, ...FILE_TYPES_DOCUMENTS];
diff --git a/src/config/local-storage-keys.ts b/src/config/local-storage-keys.ts
index fec3abb3..0ea39f27 100644
--- a/src/config/local-storage-keys.ts
+++ b/src/config/local-storage-keys.ts
@@ -1,7 +1,7 @@
 export const LOCAL_STORAGE_KEYS = {
-	location: "location", // User location
-	starredTools: "starred-tools", // Starred tools
-	sidebarOptInFormDismissed: "sidebar-opt-in-form-dismissed", // Sidebar opt-in form closed
-	cardUpgradeDismissed: "card-upgrade-dismissed", // Card upgrade dismissed
-	attributionClosed: "attribution-closed", // Attribution closed
+  location: "location", // User location
+  starredTools: "starred-tools", // Starred tools
+  sidebarOptInFormDismissed: "sidebar-opt-in-form-dismissed", // Sidebar opt-in form closed
+  cardUpgradeDismissed: "card-upgrade-dismissed", // Card upgrade dismissed
+  attributionClosed: "attribution-closed", // Attribution closed
 };
diff --git a/src/config/metadata.ts b/src/config/metadata.ts
index c803cb25..aeff8fdb 100644
--- a/src/config/metadata.ts
+++ b/src/config/metadata.ts
@@ -4,22 +4,22 @@ import type { Twitter } from "next/dist/lib/metadata/types/twitter-types";
 import { siteConfig } from "./site-config";
 
 const defaultOpenGraph: OpenGraph = {
-	type: "website",
-	locale: "en_US",
-	// Resolves against metadataBase + the current route's pathname, exactly
-	// like alternates.canonical below, so og:url always matches the canonical.
-	url: "./",
-	title: siteConfig.title,
-	description: siteConfig.description,
-	siteName: siteConfig.name,
-	images: [
-		{
-			url: siteConfig.ogImage,
-			width: 1200,
-			height: 630,
-			alt: siteConfig.name,
-		},
-	],
+  type: "website",
+  locale: "en_US",
+  // Resolves against metadataBase + the current route's pathname, exactly
+  // like alternates.canonical below, so og:url always matches the canonical.
+  url: "./",
+  title: siteConfig.title,
+  description: siteConfig.description,
+  siteName: siteConfig.name,
+  images: [
+    {
+      url: siteConfig.ogImage,
+      width: 1200,
+      height: 630,
+      alt: siteConfig.name,
+    },
+  ],
 };
 
 // Single owner of the noindex policy: used by constructMetadata's noIndex
@@ -27,134 +27,134 @@ const defaultOpenGraph: OpenGraph = {
 export const noIndexRobots = { index: false, follow: true } as const;
 
 const defaultTwitter: Twitter = {
-	card: "summary_large_image",
-	title: siteConfig.title,
-	description: siteConfig.description,
-	images: [
-		{
-			url: siteConfig.ogImage,
-			width: 1200,
-			height: 630,
-			alt: siteConfig.name,
-		},
-	],
-	creator: siteConfig.creator.twitter,
+  card: "summary_large_image",
+  title: siteConfig.title,
+  description: siteConfig.description,
+  images: [
+    {
+      url: siteConfig.ogImage,
+      width: 1200,
+      height: 630,
+      alt: siteConfig.name,
+    },
+  ],
+  creator: siteConfig.creator.twitter,
 };
 
 export const defaultMetadata: Metadata = {
-	metadataBase: new URL(siteConfig.url),
-	title: {
-		default: siteConfig.title,
-		template: `%s | ${siteConfig.name}`,
-	},
-	description: siteConfig.description,
-	applicationName: siteConfig.name,
-	authors: [
-		{
-			name: siteConfig.creator.name,
-			url: siteConfig.creator.url,
-		},
-	],
-	creator: siteConfig.creator.name,
-	publisher: siteConfig.name,
-	formatDetection: {
-		email: false,
-		address: false,
-		telephone: false,
-	},
-	generator: "Next.js",
-	keywords: siteConfig.metadata.keywords,
-	referrer: "origin-when-cross-origin",
-	robots: {
-		index: true,
-		follow: true,
-		googleBot: {
-			index: true,
-			follow: true,
-			"max-video-preview": -1,
-			"max-image-preview": "large",
-			"max-snippet": -1,
-		},
-	},
-	// verification: {
-	// 	google: "YOUR_VERIFICATION_CODE",
-	// 	yandex: "your-yandex-verification",
-	// },
-	alternates: {
-		canonical: "./",
-		// languages: {
-		// 	"en-US": "/en-US",
-		// },
-	},
-	openGraph: defaultOpenGraph,
-	twitter: defaultTwitter,
-	appleWebApp: {
-		capable: true,
-		title: siteConfig.title,
-		statusBarStyle: "default",
-		startupImage: [
-			{
-				url: "/apple-touch-icon.png",
-				media: "(device-width: 768px) and (device-height: 1024px)",
-			},
-		],
-	},
-	appLinks: {
-		web: {
-			url: siteConfig.url,
-			should_fallback: true,
-		},
-	},
-	// archives: [`${siteConfig.url}/blog`], // TODO: Add blog
-	// assets: [`${siteConfig.url}/assets`], // TODO: Add assets
-	bookmarks: [`${siteConfig.url}/`],
-	category: "technology",
-	classification: "Business Software",
+  metadataBase: new URL(siteConfig.url),
+  title: {
+    default: siteConfig.title,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  applicationName: siteConfig.name,
+  authors: [
+    {
+      name: siteConfig.creator.name,
+      url: siteConfig.creator.url,
+    },
+  ],
+  creator: siteConfig.creator.name,
+  publisher: siteConfig.name,
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  generator: "Next.js",
+  keywords: siteConfig.metadata.keywords,
+  referrer: "origin-when-cross-origin",
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  // verification: {
+  // 	google: "YOUR_VERIFICATION_CODE",
+  // 	yandex: "your-yandex-verification",
+  // },
+  alternates: {
+    canonical: "./",
+    // languages: {
+    // 	"en-US": "/en-US",
+    // },
+  },
+  openGraph: defaultOpenGraph,
+  twitter: defaultTwitter,
+  appleWebApp: {
+    capable: true,
+    title: siteConfig.title,
+    statusBarStyle: "default",
+    startupImage: [
+      {
+        url: "/apple-touch-icon.png",
+        media: "(device-width: 768px) and (device-height: 1024px)",
+      },
+    ],
+  },
+  appLinks: {
+    web: {
+      url: siteConfig.url,
+      should_fallback: true,
+    },
+  },
+  // archives: [`${siteConfig.url}/blog`], // TODO: Add blog
+  // assets: [`${siteConfig.url}/assets`], // TODO: Add assets
+  bookmarks: [`${siteConfig.url}/`],
+  category: "technology",
+  classification: "Business Software",
 };
 
 export const metadata: Metadata = defaultMetadata;
 
 export const viewport: Viewport = {
-	width: "device-width",
-	initialScale: 1,
-	maximumScale: 5,
-	themeColor: [
-		{
-			media: "(prefers-color-scheme: light)",
-			color: siteConfig.metadata.themeColor.light,
-		},
-		{
-			media: "(prefers-color-scheme: dark)",
-			color: siteConfig.metadata.themeColor.dark,
-		},
-	],
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 5,
+  themeColor: [
+    {
+      media: "(prefers-color-scheme: light)",
+      color: siteConfig.metadata.themeColor.light,
+    },
+    {
+      media: "(prefers-color-scheme: dark)",
+      color: siteConfig.metadata.themeColor.dark,
+    },
+  ],
 };
 
 type ConstructMetadataProps = Metadata & {
-	images?: { url: string; width: number; height: number; alt: string }[];
-	noIndex?: boolean;
+  images?: { url: string; width: number; height: number; alt: string }[];
+  noIndex?: boolean;
 };
 
 export const constructMetadata = ({
-	images = [],
-	noIndex = false,
-	...metadata
+  images = [],
+  noIndex = false,
+  ...metadata
 }: ConstructMetadataProps = {}): Metadata => ({
-	...defaultMetadata,
-	...metadata,
-	openGraph: {
-		...defaultOpenGraph,
-		title: metadata.title ?? defaultOpenGraph.title,
-		description: metadata.description ?? defaultOpenGraph.description,
-		images: images.length > 0 ? images : defaultOpenGraph.images,
-	},
-	twitter: {
-		...defaultTwitter,
-		title: metadata.title ?? defaultTwitter.title,
-		description: metadata.description ?? defaultTwitter.description,
-		images: images.length > 0 ? images : defaultTwitter.images,
-	},
-	robots: noIndex ? noIndexRobots : defaultMetadata.robots,
+  ...defaultMetadata,
+  ...metadata,
+  openGraph: {
+    ...defaultOpenGraph,
+    title: metadata.title ?? defaultOpenGraph.title,
+    description: metadata.description ?? defaultOpenGraph.description,
+    images: images.length > 0 ? images : defaultOpenGraph.images,
+  },
+  twitter: {
+    ...defaultTwitter,
+    title: metadata.title ?? defaultTwitter.title,
+    description: metadata.description ?? defaultTwitter.description,
+    images: images.length > 0 ? images : defaultTwitter.images,
+  },
+  robots: noIndex ? noIndexRobots : defaultMetadata.robots,
 });
 
 // Route-specific metadata for better CTR.
@@ -162,59 +162,50 @@ export const constructMetadata = ({
 // `| ${siteConfig.name}` to child segments. Descriptions stay within the
 // 110-160 character range Ahrefs considers healthy (LAC-3521).
 export const routeMetadata = {
-	home: {
-		title: `${siteConfig.branding.projectName} - Free Open-Source Next.js SaaS Boilerplate`,
-		description:
-			`${siteConfig.branding.projectName} is a free, open-source Next.js starter kit with authentication, Shadcn UI, and one-click Vercel deploy. Ship production-ready React apps in minutes.`,
-	},
-	features: {
-		title: "Features - Modern App Development Made Simple",
-		description:
-			`Discover how ${siteConfig.branding.projectName} accelerates app development with Builder.io, Payload CMS, Auth.js, and more. Get enterprise-grade features without the complexity.`,
-	},
-	pricing: {
-		title: "Simple, Transparent Pricing",
-		description:
-			"Choose the perfect plan for your app. Start free, scale as you grow. All plans include core features, world-class support, and automatic updates.",
-	},
-	docs: {
-		title: "Documentation - Build Better Apps Faster",
-		description:
-			`Comprehensive guides, API references, and examples to help you build production-ready apps with ${siteConfig.branding.projectName}. From quick starts to advanced topics.`,
-	},
-	faq: {
-		title: "FAQ - Frequently Asked Questions",
-		description:
-			`Answers to common questions about ${siteConfig.branding.projectName} — setup, deployment, pricing, features, licensing, and support for your projects.`,
-	},
-	contact: {
-		title: "Contact Us",
-		description:
-			`Get in touch with the ${siteConfig.branding.projectName} team. We are here to help with setup questions, feedback, bug reports, and support for your ${siteConfig.branding.projectName}-powered projects.`,
-	},
-	about: {
-		title: "About",
-		description:
-			`Learn about ${siteConfig.branding.projectName}, our mission, and the team behind the platform. Building modern tools for developers who ship fast.`,
-	},
-	privacy: {
-		title: "Privacy Policy",
-		description:
-			`How ${siteConfig.branding.projectName} handles your data: what we collect, how we store it, and your rights. Our commitment to transparency, security, and your privacy.`,
-	},
-	terms: {
-		title: "Terms of Service",
-		description:
-			`Terms and conditions for using ${siteConfig.branding.projectName}. Read our service agreement, acceptable use policies, disclaimers, and your rights and responsibilities.`,
-	},
-	eula: {
-		title: "End User License Agreement",
-		description:
-			"End User License Agreement for the Vercel Shipkit integration. Read the license terms, restrictions, and your rights as a user of the integration.",
-	},
-	changelog: {
-		title: "Changelog",
-		description:
-			`Latest updates, improvements, and releases for ${siteConfig.branding.projectName}. Follow new features, bug fixes, and breaking changes as we ship them.`,
-	},
+  home: {
+    title: `${siteConfig.branding.projectName} - Free Open-Source Next.js SaaS Boilerplate`,
+    description: `${siteConfig.branding.projectName} is a free, open-source Next.js starter kit with authentication, Shadcn UI, and one-click Vercel deploy. Ship production-ready React apps in minutes.`,
+  },
+  features: {
+    title: "Features - Modern App Development Made Simple",
+    description: `Discover how ${siteConfig.branding.projectName} accelerates app development with Builder.io, Payload CMS, Auth.js, and more. Get enterprise-grade features without the complexity.`,
+  },
+  pricing: {
+    title: "Simple, Transparent Pricing",
+    description:
+      "Choose the perfect plan for your app. Start free, scale as you grow. All plans include core features, world-class support, and automatic updates.",
+  },
+  docs: {
+    title: "Documentation - Build Better Apps Faster",
+    description: `Comprehensive guides, API references, and examples to help you build production-ready apps with ${siteConfig.branding.projectName}. From quick starts to advanced topics.`,
+  },
+  faq: {
+    title: "FAQ - Frequently Asked Questions",
+    description: `Answers to common questions about ${siteConfig.branding.projectName} — setup, deployment, pricing, features, licensing, and support for your projects.`,
+  },
+  contact: {
+    title: "Contact Us",
+    description: `Get in touch with the ${siteConfig.branding.projectName} team. We are here to help with setup questions, feedback, bug reports, and support for your ${siteConfig.branding.projectName}-powered projects.`,
+  },
+  about: {
+    title: "About",
+    description: `Learn about ${siteConfig.branding.projectName}, our mission, and the team behind the platform. Building modern tools for developers who ship fast.`,
+  },
+  privacy: {
+    title: "Privacy Policy",
+    description: `How ${siteConfig.branding.projectName} handles your data: what we collect, how we store it, and your rights. Our commitment to transparency, security, and your privacy.`,
+  },
+  terms: {
+    title: "Terms of Service",
+    description: `Terms and conditions for using ${siteConfig.branding.projectName}. Read our service agreement, acceptable use policies, disclaimers, and your rights and responsibilities.`,
+  },
+  eula: {
+    title: "End User License Agreement",
+    description:
+      "End User License Agreement for the Vercel Shipkit integration. Read the license terms, restrictions, and your rights as a user of the integration.",
+  },
+  changelog: {
+    title: "Changelog",
+    description: `Latest updates, improvements, and releases for ${siteConfig.branding.projectName}. Follow new features, bug fixes, and breaking changes as we ship them.`,
+  },
 };
diff --git a/src/config/nextjs/with-mdx.ts b/src/config/nextjs/with-mdx.ts
index e1e17cd7..3f990b87 100644
--- a/src/config/nextjs/with-mdx.ts
+++ b/src/config/nextjs/with-mdx.ts
@@ -4,16 +4,13 @@ import createMDX from "@next/mdx";
 // Webpack layer name for React Server Components (WEBPACK_LAYERS.reactServerComponents).
 const RSC_LAYER = "rsc";
 
-const matchesMdx = (test: unknown): boolean =>
-	test instanceof RegExp && test.test("page.mdx");
+const matchesMdx = (test: unknown): boolean => test instanceof RegExp && test.test("page.mdx");
 
-const isSwcLoader = (
-	entry: unknown,
-): entry is { options: Record<string, unknown> } =>
-	!!entry &&
-	typeof entry === "object" &&
-	typeof (entry as { loader?: unknown }).loader === "string" &&
-	(entry as { loader: string }).loader.includes("next-swc-loader");
+const isSwcLoader = (entry: unknown): entry is { options: Record<string, unknown> } =>
+  !!entry &&
+  typeof entry === "object" &&
+  typeof (entry as { loader?: unknown }).loader === "string" &&
+  (entry as { loader: string }).loader.includes("next-swc-loader");
 
 /**
  * Since 16.2.0, webpack builds compile .mdx pages without an RSC bundle layer,
@@ -23,22 +20,22 @@ const isSwcLoader = (
  * Remove once https://github.com/vercel/next.js/issues/91735 is fixed.
  */
 const patchMdxRscLayer = (rules: unknown[]): void => {
-	for (const rule of rules) {
-		if (!rule || typeof rule !== "object") continue;
-		const r = rule as Record<string, unknown>;
+  for (const rule of rules) {
+    if (!rule || typeof rule !== "object") continue;
+    const r = rule as Record<string, unknown>;
 
-		if (matchesMdx(r.test)) {
-			const uses = Array.isArray(r.use) ? r.use : [r.use];
-			for (const entry of uses) {
-				if (isSwcLoader(entry) && entry.options.bundleLayer == null) {
-					entry.options.bundleLayer = RSC_LAYER;
-				}
-			}
-		}
+    if (matchesMdx(r.test)) {
+      const uses = Array.isArray(r.use) ? r.use : [r.use];
+      for (const entry of uses) {
+        if (isSwcLoader(entry) && entry.options.bundleLayer == null) {
+          entry.options.bundleLayer = RSC_LAYER;
+        }
+      }
+    }
 
-		if (Array.isArray(r.oneOf)) patchMdxRscLayer(r.oneOf);
-		if (Array.isArray(r.rules)) patchMdxRscLayer(r.rules);
-	}
+    if (Array.isArray(r.oneOf)) patchMdxRscLayer(r.oneOf);
+    if (Array.isArray(r.rules)) patchMdxRscLayer(r.rules);
+  }
 };
 
 /**
@@ -47,37 +44,35 @@ const patchMdxRscLayer = (rules: unknown[]): void => {
  * @returns The modified Next.js configuration object with MDX support.
  */
 export function withMDXConfig(nextConfig: NextConfig): NextConfig {
-	const withMDX = createMDX({
-		extension: /\.mdx?$/,
-		options: {
-			remarkPlugins: [
-				[
-					"remark-frontmatter",
-					{
-						type: "yaml",
-						marker: "-",
-					},
-				],
-				["remark-mdx-frontmatter", {}],
-			],
-			rehypePlugins: [],
-		},
-	});
+  const withMDX = createMDX({
+    extension: /\.mdx?$/,
+    options: {
+      remarkPlugins: [
+        [
+          "remark-frontmatter",
+          {
+            type: "yaml",
+            marker: "-",
+          },
+        ],
+        ["remark-mdx-frontmatter", {}],
+      ],
+      rehypePlugins: [],
+    },
+  });
 
-	const config = withMDX(nextConfig) as NextConfig;
+  const config = withMDX(nextConfig) as NextConfig;
 
-	const prevWebpack = config.webpack;
-	config.webpack = (webpackConfig, context) => {
-		const resolved = prevWebpack
-			? prevWebpack(webpackConfig, context)
-			: webpackConfig;
+  const prevWebpack = config.webpack;
+  config.webpack = (webpackConfig, context) => {
+    const resolved = prevWebpack ? prevWebpack(webpackConfig, context) : webpackConfig;
 
-		if (context.isServer && Array.isArray(resolved.module?.rules)) {
-			patchMdxRscLayer(resolved.module.rules);
-		}
+    if (context.isServer && Array.isArray(resolved.module?.rules)) {
+      patchMdxRscLayer(resolved.module.rules);
+    }
 
-		return resolved;
-	};
+    return resolved;
+  };
 
-	return config;
+  return config;
 }
diff --git a/src/config/nextjs/with-pwa.ts b/src/config/nextjs/with-pwa.ts
index e96f0ae7..5dc56108 100644
--- a/src/config/nextjs/with-pwa.ts
+++ b/src/config/nextjs/with-pwa.ts
@@ -7,14 +7,14 @@ import withPWA from "next-pwa";
  * @returns The modified Next.js configuration object with PWA support.
  */
 export function withPWAConfig(nextConfig: NextConfig): NextConfig {
-	const pwaConfig = {
-		dest: "public",
-		register: true,
-		skipWaiting: true,
-		disable: process.env.NODE_ENV === "development",
-	};
+  const pwaConfig = {
+    dest: "public",
+    register: true,
+    skipWaiting: true,
+    disable: process.env.NODE_ENV === "development",
+  };
 
-	// The 'withPWA' type might be complex, using 'any' for simplicity here.
-	// Ensure 'next-pwa' types are correctly installed if issues arise.
-	return (withPWA as any)(pwaConfig)(nextConfig) as NextConfig;
+  // The 'withPWA' type might be complex, using 'any' for simplicity here.
+  // Ensure 'next-pwa' types are correctly installed if issues arise.
+  return (withPWA as any)(pwaConfig)(nextConfig) as NextConfig;
 }
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 254c63a2..fa516f6f 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -8,10 +8,7 @@ export interface RouteObject {
   params?: RouteParams;
 }
 
-export const createRoute = (
-  path: Route,
-  params: RouteParams = {},
-): RouteObject => ({
+export const createRoute = (path: Route, params: RouteParams = {}): RouteObject => ({
   path,
   params,
 });
@@ -144,21 +141,15 @@ export const redirects = async (): Promise<Redirect[]> => {
     // Remove docs redirects since routes.docs is not defined
     // ...createRedirects(["/docs", "/documentation"], routes.docs),
     ...createRedirects(["/join", "/signup", "/sign-up"], routes.auth.signUp),
-    ...createRedirects(
-      ["/login", "/log-in", "/signin", "/sign-in"],
-      routes.auth.signIn,
-    ),
-    ...createRedirects(
-      ["/logout", "/log-out", "/signout", "/sign-out"],
-      routes.auth.signOut,
-    ),
+    ...createRedirects(["/login", "/log-in", "/signin", "/sign-in"], routes.auth.signIn),
+    ...createRedirects(["/logout", "/log-out", "/signout", "/sign-out"], routes.auth.signOut),
   ];
 };
 
 export const createRedirects = (
   sources: Route[],
   destination: Route,
-  permanent = false,
+  permanent = false
 ): Redirect[] => {
   if (!sources.length) return [];
 
diff --git a/src/config/search-param-keys.ts b/src/config/search-param-keys.ts
index 70d994e4..0aab0020 100644
--- a/src/config/search-param-keys.ts
+++ b/src/config/search-param-keys.ts
@@ -1,7 +1,7 @@
 // Search params AKA query params
 export const SEARCH_PARAM_KEYS = {
-	statusCode: "code", // Status code to indicate error/alert, this is displayed in the UI in a toast
-	nextUrl: "next", // Redirect to this URL after action (sign in, etc.)
-	page: "page", // Pagination page
-	search: "s", // Search string
+  statusCode: "code", // Status code to indicate error/alert, this is displayed in the UI in a toast
+  nextUrl: "next", // Redirect to this URL after action (sign in, etc.)
+  page: "page", // Pagination page
+  search: "s", // Search string
 };
diff --git a/src/config/site-config.ts b/src/config/site-config.ts
index 200c8d15..9979d6f1 100644
--- a/src/config/site-config.ts
+++ b/src/config/site-config.ts
@@ -6,233 +6,233 @@
  */
 
 interface SiteConfig {
-	// Core site information
-	name: string;
-	title: string;
-	url: string;
-	ogImage: string;
-	description: string;
-
-	// UI behavior settings
-	behavior: {
-		pageTransitions: boolean;
-	};
-
-	// Branding information
-	branding: {
-		projectName: string;
-		projectSlug: string;
-		productNames: {
-			bones: string;
-			muscles: string;
-			brains: string;
-			main: string;
-		};
-		domain: string;
-		protocol: string;
-		githubOrg: string;
-		githubRepo: string;
-		vercelProjectName: string;
-		databaseName: string;
-	};
-
-	// External links
-	links: {
-		twitter: string;
-		twitter_follow: string;
-		x: string;
-		x_follow: string;
-		github: string;
-	};
-
-	// Repository information
-	repo: {
-		owner: string;
-		name: string;
-		url: string;
-		format: {
-			clone: () => string;
-			ssh: () => string;
-		};
-	};
-
-	// Email addresses and formatting
-	email: {
-		support: string;
-		team: string;
-		noreply: string;
-		domain: string;
-		legal: string;
-		privacy: string;
-		format: (type: Exclude<keyof SiteConfig['email'], 'format'>) => string;
-	};
-
-	// Creator information
-	creator: {
-		name: string;
-		email: string;
-		url: string;
-		twitter: string;
-		twitter_handle: string;
-		domain: string;
-		fullName: string;
-		role: string;
-		avatar: string;
-		location: string;
-		bio: string;
-	};
-
-	// E-commerce store configuration
-	store: {
-		domain: string;
-		products: {
-			bones: string;
-			muscles: string;
-			brains: string;
-			shipkit: string;
-		};
-		format: {
-			buyUrl: (product: keyof SiteConfig['store']['products']) => string;
-		};
-	};
-
-	// Admin access control
-	admin: {
-		emails: string[];
-		domains: string[];
-		isAdmin: (email: string) => boolean;
-	};
-
-	// SEO and metadata
-	metadata: {
-		keywords: string[];
-		themeColor: {
-			light: string;
-			dark: string;
-		};
-	};
-
-	// Application settings
-	app: {
-		apiKeyPrefix: string;
-	};
+  // Core site information
+  name: string;
+  title: string;
+  url: string;
+  ogImage: string;
+  description: string;
+
+  // UI behavior settings
+  behavior: {
+    pageTransitions: boolean;
+  };
+
+  // Branding information
+  branding: {
+    projectName: string;
+    projectSlug: string;
+    productNames: {
+      bones: string;
+      muscles: string;
+      brains: string;
+      main: string;
+    };
+    domain: string;
+    protocol: string;
+    githubOrg: string;
+    githubRepo: string;
+    vercelProjectName: string;
+    databaseName: string;
+  };
+
+  // External links
+  links: {
+    twitter: string;
+    twitter_follow: string;
+    x: string;
+    x_follow: string;
+    github: string;
+  };
+
+  // Repository information
+  repo: {
+    owner: string;
+    name: string;
+    url: string;
+    format: {
+      clone: () => string;
+      ssh: () => string;
+    };
+  };
+
+  // Email addresses and formatting
+  email: {
+    support: string;
+    team: string;
+    noreply: string;
+    domain: string;
+    legal: string;
+    privacy: string;
+    format: (type: Exclude<keyof SiteConfig["email"], "format">) => string;
+  };
+
+  // Creator information
+  creator: {
+    name: string;
+    email: string;
+    url: string;
+    twitter: string;
+    twitter_handle: string;
+    domain: string;
+    fullName: string;
+    role: string;
+    avatar: string;
+    location: string;
+    bio: string;
+  };
+
+  // E-commerce store configuration
+  store: {
+    domain: string;
+    products: {
+      bones: string;
+      muscles: string;
+      brains: string;
+      shipkit: string;
+    };
+    format: {
+      buyUrl: (product: keyof SiteConfig["store"]["products"]) => string;
+    };
+  };
+
+  // Admin access control
+  admin: {
+    emails: string[];
+    domains: string[];
+    isAdmin: (email: string) => boolean;
+  };
+
+  // SEO and metadata
+  metadata: {
+    keywords: string[];
+    themeColor: {
+      light: string;
+      dark: string;
+    };
+  };
+
+  // Application settings
+  app: {
+    apiKeyPrefix: string;
+  };
 }
 
 export const siteConfig: SiteConfig = {
-	behavior: {
-		pageTransitions: true,
-	},
-
-	name: "Bones",
-	title: "Launch your app today",
-	url: "https://bones.sh",
-	ogImage: "https://bones.sh/og",
-	description:
-		"Free, open-source Next.js SaaS boilerplate with authentication, Shadcn UI, and one-click Vercel deploy. The fastest way to launch a production-ready React app.",
-
-	branding: {
-		projectName: "Bones",
-		projectSlug: "bones",
-		productNames: {
-			bones: "Bones",
-			muscles: "Muscles",
-			brains: "Brains",
-			main: "Bones",
-		},
-		domain: "bones.sh",
-		protocol: "web+bones",
-		githubOrg: "bones-sh",
-		githubRepo: "bones",
-		vercelProjectName: "bones-app",
-		databaseName: "bones",
-	},
-
-	links: {
-		twitter: "https://twitter.com/lacybuilds",
-		twitter_follow: "https://twitter.com/intent/follow?screen_name=lacybuilds",
-		x: "https://x.com/lacybuilds",
-		x_follow: "https://x.com/intent/follow?screen_name=lacybuilds",
-		github: "https://github.com/lacymorrow/shipkit",
-	},
-
-	repo: {
-		owner: "lacymorrow",
-		name: "bones",
-		url: "https://github.com/shipkit-io/bones",
-		format: {
-			clone: () => "https://github.com/shipkit-io/bones.git",
-			ssh: () => "git@github.com:shipkit-io/bones.git",
-		},
-	},
-
-	email: {
-		support: "feedback@shipkit.io",
-		team: "team@shipkit.io",
-		noreply: "noreply@shipkit.io",
-		domain: "shipkit.io",
-		legal: "legal@shipkit.io",
-		privacy: "privacy@shipkit.io",
-		format: (type) => siteConfig.email[type],
-	},
-
-	creator: {
-		name: "lacymorrow",
-		email: "lacy@shipkit.io",
-		url: "https://lacymorrow.com",
-		twitter: "@lacybuilds",
-		twitter_handle: "lacybuilds",
-		domain: "lacymorrow.com",
-		fullName: "Lacy Morrow",
-		role: "Engineer",
-		avatar: "https://avatars.githubusercontent.com/u/1311301?v=4",
-		location: "San Francisco, CA",
-		bio: "Founder, developer, and product designer.",
-	},
-
-	store: {
-		domain: "shipkit.lemonsqueezy.com",
-		products: {
-			bones: "eb159dba-96a3-40f2-a97b-7b9117e635a1",
-			muscles: "4d259175-0a79-486a-b0f8-b77404ee68df",
-			brains: "7935a386-7cd0-47fe-83c8-cab101323591",
-			shipkit: "20b5b59e-b4c4-43b0-9979-545f90c76f28",
-		},
-		format: {
-			buyUrl: (product) =>
-				`https://shipkit.lemonsqueezy.com/checkout/buy/${siteConfig.store.products[product]}`,
-		},
-	},
-
-	admin: {
-		emails: ["lacymorrow0@gmail.com", "gojukebox@gmail.com"],
-		domains: ["lacymorrow.com"],
-		isAdmin: (email) =>
-			siteConfig.admin.emails.includes(email) ||
-			siteConfig.admin.domains.some((domain) => email?.endsWith(`@${domain}`)),
-	},
-
-	metadata: {
-		keywords: [
-			"Next.js boilerplate",
-			"Next.js SaaS starter",
-			"React starter kit",
-			"free Next.js template",
-			"open source SaaS boilerplate",
-			"Next.js authentication",
-			"Shadcn UI",
-			"Tailwind CSS",
-			"TypeScript starter",
-			"Vercel deploy",
-			"Server Components",
-			"App Router",
-		],
-		themeColor: {
-			light: "white",
-			dark: "black",
-		},
-	},
-
-	app: {
-		apiKeyPrefix: "sk",
-	},
+  behavior: {
+    pageTransitions: true,
+  },
+
+  name: "Bones",
+  title: "Launch your app today",
+  url: "https://bones.sh",
+  ogImage: "https://bones.sh/og",
+  description:
+    "Free, open-source Next.js SaaS boilerplate with authentication, Shadcn UI, and one-click Vercel deploy. The fastest way to launch a production-ready React app.",
+
+  branding: {
+    projectName: "Bones",
+    projectSlug: "bones",
+    productNames: {
+      bones: "Bones",
+      muscles: "Muscles",
+      brains: "Brains",
+      main: "Bones",
+    },
+    domain: "bones.sh",
+    protocol: "web+bones",
+    githubOrg: "bones-sh",
+    githubRepo: "bones",
+    vercelProjectName: "bones-app",
+    databaseName: "bones",
+  },
+
+  links: {
+    twitter: "https://twitter.com/lacybuilds",
+    twitter_follow: "https://twitter.com/intent/follow?screen_name=lacybuilds",
+    x: "https://x.com/lacybuilds",
+    x_follow: "https://x.com/intent/follow?screen_name=lacybuilds",
+    github: "https://github.com/lacymorrow/shipkit",
+  },
+
+  repo: {
+    owner: "lacymorrow",
+    name: "bones",
+    url: "https://github.com/shipkit-io/bones",
+    format: {
+      clone: () => "https://github.com/shipkit-io/bones.git",
+      ssh: () => "git@github.com:shipkit-io/bones.git",
+    },
+  },
+
+  email: {
+    support: "feedback@shipkit.io",
+    team: "team@shipkit.io",
+    noreply: "noreply@shipkit.io",
+    domain: "shipkit.io",
+    legal: "legal@shipkit.io",
+    privacy: "privacy@shipkit.io",
+    format: (type) => siteConfig.email[type],
+  },
+
+  creator: {
+    name: "lacymorrow",
+    email: "lacy@shipkit.io",
+    url: "https://lacymorrow.com",
+    twitter: "@lacybuilds",
+    twitter_handle: "lacybuilds",
+    domain: "lacymorrow.com",
+    fullName: "Lacy Morrow",
+    role: "Engineer",
+    avatar: "https://avatars.githubusercontent.com/u/1311301?v=4",
+    location: "San Francisco, CA",
+    bio: "Founder, developer, and product designer.",
+  },
+
+  store: {
+    domain: "shipkit.lemonsqueezy.com",
+    products: {
+      bones: "eb159dba-96a3-40f2-a97b-7b9117e635a1",
+      muscles: "4d259175-0a79-486a-b0f8-b77404ee68df",
+      brains: "7935a386-7cd0-47fe-83c8-cab101323591",
+      shipkit: "20b5b59e-b4c4-43b0-9979-545f90c76f28",
+    },
+    format: {
+      buyUrl: (product) =>
+        `https://shipkit.lemonsqueezy.com/checkout/buy/${siteConfig.store.products[product]}`,
+    },
+  },
+
+  admin: {
+    emails: ["lacymorrow0@gmail.com", "gojukebox@gmail.com"],
+    domains: ["lacymorrow.com"],
+    isAdmin: (email) =>
+      siteConfig.admin.emails.includes(email) ||
+      siteConfig.admin.domains.some((domain) => email?.endsWith(`@${domain}`)),
+  },
+
+  metadata: {
+    keywords: [
+      "Next.js boilerplate",
+      "Next.js SaaS starter",
+      "React starter kit",
+      "free Next.js template",
+      "open source SaaS boilerplate",
+      "Next.js authentication",
+      "Shadcn UI",
+      "Tailwind CSS",
+      "TypeScript starter",
+      "Vercel deploy",
+      "Server Components",
+      "App Router",
+    ],
+    themeColor: {
+      light: "white",
+      dark: "black",
+    },
+  },
+
+  app: {
+    apiKeyPrefix: "sk",
+  },
 };
diff --git a/src/config/status-codes.ts b/src/config/status-codes.ts
index bc325652..e02e201c 100644
--- a/src/config/status-codes.ts
+++ b/src/config/status-codes.ts
@@ -1,41 +1,41 @@
 export const STATUS_CODES = {
-	AUTH: {
-		code: "AUTH",
-		message: "Please sign in and try again.",
-	},
-	AUTH_ERROR: {
-		code: "AUTH_ERROR",
-		message: "An error occurred while authenticating, please try again.",
-	},
-	AUTH_REFRESH: {
-		code: "AUTH_REFRESH",
-		message: "Your session has expired. Please sign in again.",
-	},
-	AUTH_LOGIN: {
-		code: "AUTH_LOGIN",
-		message: "There was a problem logging you in.",
-	},
-	AUTH_ROLE: {
-		code: "AUTH_ROLE",
-		message: "You are not authorized to access this resource.",
-	},
-	CREDENTIALS: {
-		code: "CREDENTIALS",
-		message: "Invalid email or password.",
-	},
-	LOGIN: {
-		code: "LOGIN",
-		message: "Signed in successfully.",
-	},
-	LOGOUT: {
-		code: "LOGOUT",
-		message: "You have been signed out.",
-	},
+  AUTH: {
+    code: "AUTH",
+    message: "Please sign in and try again.",
+  },
+  AUTH_ERROR: {
+    code: "AUTH_ERROR",
+    message: "An error occurred while authenticating, please try again.",
+  },
+  AUTH_REFRESH: {
+    code: "AUTH_REFRESH",
+    message: "Your session has expired. Please sign in again.",
+  },
+  AUTH_LOGIN: {
+    code: "AUTH_LOGIN",
+    message: "There was a problem logging you in.",
+  },
+  AUTH_ROLE: {
+    code: "AUTH_ROLE",
+    message: "You are not authorized to access this resource.",
+  },
+  CREDENTIALS: {
+    code: "CREDENTIALS",
+    message: "Invalid email or password.",
+  },
+  LOGIN: {
+    code: "LOGIN",
+    message: "Signed in successfully.",
+  },
+  LOGOUT: {
+    code: "LOGOUT",
+    message: "You have been signed out.",
+  },
 
-	UNKNOWN: {
-		code: "UNKNOWN",
-		message: "Something went wrong, please try again.",
-	},
+  UNKNOWN: {
+    code: "UNKNOWN",
+    message: "Something went wrong, please try again.",
+  },
 } as const;
 
 export type ErrorCodes = typeof STATUS_CODES;
diff --git a/src/config/with-plugins.ts b/src/config/with-plugins.ts
index 52dd823a..df5026eb 100644
--- a/src/config/with-plugins.ts
+++ b/src/config/with-plugins.ts
@@ -1,6 +1,6 @@
 import type { NextConfig } from "next";
-import fs from 'fs';
-import path from 'path';
+import fs from "fs";
+import path from "path";
 import { NEXTJS_PLUGINS_DIR_RELATIVE } from "./constants";
 
 /**
@@ -11,52 +11,53 @@ import { NEXTJS_PLUGINS_DIR_RELATIVE } from "./constants";
  * @returns The modified Next.js configuration object with plugins applied.
  */
 export function withPlugins(
-	initialConfig: NextConfig,
-	pluginsRelativeDir = NEXTJS_PLUGINS_DIR_RELATIVE
+  initialConfig: NextConfig,
+  pluginsRelativeDir = NEXTJS_PLUGINS_DIR_RELATIVE
 ): NextConfig {
-	let config = { ...initialConfig };
-	const pluginsDir = path.join(process.cwd(), pluginsRelativeDir);
+  let config = { ...initialConfig };
+  const pluginsDir = path.join(process.cwd(), pluginsRelativeDir);
 
-	try {
-		if (fs.existsSync(pluginsDir)) {
-			const pluginFiles = fs.readdirSync(pluginsDir)
-				.filter(file => /\.(t|j|mj|mt)s$/.test(file))
-				.sort(); // Apply plugins in alphabetical order
+  try {
+    if (fs.existsSync(pluginsDir)) {
+      const pluginFiles = fs
+        .readdirSync(pluginsDir)
+        .filter((file) => /\.(t|j|mj|mt)s$/.test(file))
+        .sort(); // Apply plugins in alphabetical order
 
-			// Logging moved to instrumentation.ts
+      // Logging moved to instrumentation.ts
 
-			for (const file of pluginFiles) {
-				const pluginPath = path.join(pluginsDir, file);
-				try {
-					// eslint-disable-next-line @typescript-eslint/no-var-requires
-					const pluginModule = require(pluginPath);
-					// Find the exported function (prefer default export, fallback to the first named export function)
-					let pluginFunction = pluginModule.default;
-					if (typeof pluginFunction !== 'function') {
-						pluginFunction = Object.values(pluginModule).find(
-							(exp): exp is (config: NextConfig) => NextConfig => typeof exp === 'function'
-						);
-					}
+      for (const file of pluginFiles) {
+        const pluginPath = path.join(pluginsDir, file);
+        try {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          const pluginModule = require(pluginPath);
+          // Find the exported function (prefer default export, fallback to the first named export function)
+          let pluginFunction = pluginModule.default;
+          if (typeof pluginFunction !== "function") {
+            pluginFunction = Object.values(pluginModule).find(
+              (exp): exp is (config: NextConfig) => NextConfig => typeof exp === "function"
+            );
+          }
 
-					if (typeof pluginFunction === 'function') {
-						// console.debug(`[Next.js Config] Applying plugin: ${file}`); // Keep apply log here
-						config = pluginFunction(config);
-					} else {
-						throw new Error(
-							`[Next.js Config] Skipping ${file}: No exported function found or the export is not a function.`
-						);
-					}
-				} catch (error) {
-					console.debug(`[Next.js Config] Error loading or applying plugin ${file}:`, error);
-				}
-			}
-		} else {
-			// This condition is logged in instrumentation.ts now
-			// console.log(`[Next.js Config] Plugin directory not found, skipping dynamic plugins: ${relativePluginsDirLog}`);
-		}
-	} catch (error) {
-		console.error('[Next.js Config] Error reading plugin directory:', error);
-	}
+          if (typeof pluginFunction === "function") {
+            // console.debug(`[Next.js Config] Applying plugin: ${file}`); // Keep apply log here
+            config = pluginFunction(config);
+          } else {
+            throw new Error(
+              `[Next.js Config] Skipping ${file}: No exported function found or the export is not a function.`
+            );
+          }
+        } catch (error) {
+          console.debug(`[Next.js Config] Error loading or applying plugin ${file}:`, error);
+        }
+      }
+    } else {
+      // This condition is logged in instrumentation.ts now
+      // console.log(`[Next.js Config] Plugin directory not found, skipping dynamic plugins: ${relativePluginsDirLog}`);
+    }
+  } catch (error) {
+    console.error("[Next.js Config] Error reading plugin directory:", error);
+  }
 
-	return config;
+  return config;
 }
diff --git a/src/content/faq/faq-content.tsx b/src/content/faq/faq-content.tsx
index 527e5c86..bd5f10ab 100644
--- a/src/content/faq/faq-content.tsx
+++ b/src/content/faq/faq-content.tsx
@@ -12,8 +12,7 @@ export const content = [
     category: "general",
   },
   {
-    question:
-      "I use Cursor, v0, or Windsurf. Does this work with AI coding tools?",
+    question: "I use Cursor, v0, or Windsurf. Does this work with AI coding tools?",
     answer:
       "Yes. Shipkit ships with Cursor rules, prompts, and project context files so AI tools understand the codebase from the start. Built for the AI-assisted workflow.",
     category: "technical",
diff --git a/src/env.ts b/src/env.ts
index 5233e9b1..b1cf4ea8 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -3,9 +3,9 @@ import { createEnv } from "@t3-oss/env-nextjs";
 import { z } from "zod";
 // Helper function for boolean feature flags defined at build time
 const zBooleanFeatureFlag = z
-	.enum(["true", "false"])
-	.transform((val) => val === "true")
-	.optional();
+  .enum(["true", "false"])
+  .transform((val) => val === "true")
+  .optional();
 
 /**
  * Environment variable configuration using T3 Env
@@ -15,384 +15,386 @@ const zBooleanFeatureFlag = z
  * Variables are grouped by purpose and documented for clarity.
  */
 export const env = createEnv({
-	/**
-	 * T3 Env ships the following presets out of the box, all importable from the /presets entrypoint.
-	 *
-	 * - vercel
-	 * - neonVercel
-	 * - uploadthing
-	 * - render
-	 * - railway
-	 * - fly.io
-	 * - netlify
-	 */
-	extends: [vercel()], // !TODO
-
-	/**
-	 * Server-side environment variables schema
-	 * These variables are only available on the server and not exposed to the client
-	 */
-	server: {
-		// ======== Core Environment ========
-		NODE_ENV: z.enum(["development", "test", "production"]).default("development"),
-
-		// ======== Original Feature Flags (Disable flags etc.) ========
-		DISABLE_LOGGING: z.string().optional(),
-		DISABLE_ERROR_LOGGING: z.string().optional(),
-		DISABLE_BUILDER: z.string().optional(), // Disable Builder CMS
-
-		// ======== Content Management ========
-		// Payload CMS
-		ENABLE_PAYLOAD: z.string().optional(), // Enable Payload CMS
-		PAYLOAD_SECRET: z.string().optional(),
-
-		// ======== Database ========
-		DATABASE_URL: z.string().url().optional(),
-		DB_PREFIX: z.string().default("db"),
-
-		// ======== Authentication ========
-		AUTH_SECRET: z.string().optional(),
-		AUTH_URL: z.string().url().optional(),
-		// ======== Credentials (requires DB) ========
-		AUTH_CREDENTIALS_ENABLED: z.string().optional(),
-
-		// ======== Better Auth Configuration ========
-		BETTER_AUTH_BASE_URL: z.string().url().optional(),
-		BETTER_AUTH_SECRET: z.string().optional(),
-
-		// Email and Magic login
-		RESEND_API_KEY: z.string().optional(), // Added for waitlist welcome email
-		RESEND_AUDIENCE_ID: z.string().optional(),
-		RESEND_FROM_EMAIL: z.string().optional(),
-
-		// OAuth Providers
-		AUTH_DISCORD_ID: z.string().optional(),
-		AUTH_DISCORD_SECRET: z.string().optional(),
-		AUTH_GITHUB_ID: z.string().optional(),
-		AUTH_GITHUB_SECRET: z.string().optional(),
-		AUTH_GOOGLE_ID: z.string().optional(),
-		AUTH_GOOGLE_SECRET: z.string().optional(),
-
-		// ======== Stack Auth ========
-		STACK_PROJECT_ID: z.string().optional(),
-		STACK_PUBLISHABLE_CLIENT_KEY: z.string().optional(),
-		STACK_SECRET_SERVER_KEY: z.string().optional(),
-
-		// ======== Supabase Authentication ========
-		SUPABASE_SERVICE_ROLE_KEY: z.string().optional(),
-
-		// ======== Clerk Authentication (alternative to Auth.js) ========
-		CLERK_SECRET_KEY: z.string().optional(),
-		CLERK_WEBHOOK_SECRET: z.string().optional(),
-
-		// ======== External Services ========
-		// GitHub
-		GITHUB_ACCESS_TOKEN: z.string().optional(),
-		GITHUB_REPO_OWNER: z.string().optional(),
-		GITHUB_REPO_NAME: z.string().optional(),
-
-		// Google
-		GOOGLE_CLIENT_EMAIL: z.string().optional(),
-		GOOGLE_PRIVATE_KEY: z.string().optional(),
-
-		// AI Services
-		OPENAI_API_KEY: z.string().optional(),
-		ANTHROPIC_API_KEY: z.string().optional(),
-
-		// Payments
-		LEMONSQUEEZY_API_KEY: z.string().optional(),
-		LEMONSQUEEZY_STORE_ID: z.string().optional(),
-		LEMONSQUEEZY_WEBHOOK_SECRET: z.string().optional(),
-
-		// Polar
-		POLAR_ACCESS_TOKEN: z.string().optional(),
-		POLAR_PLATFORM_URL: z.string().optional(),
-
-		// Stripe
-		STRIPE_SECRET_KEY: z.string().optional(),
-		STRIPE_PUBLISHABLE_KEY: z.string().optional(),
-		STRIPE_WEBHOOK_SECRET: z.string().optional(),
-		STRIPE_API_VERSION: z.string().optional(),
-
-		// Storage
-		AWS_REGION: z.string().optional(),
-		AWS_ACCESS_KEY_ID: z.string().optional(),
-		AWS_SECRET_ACCESS_KEY: z.string().optional(),
-		AWS_BUCKET_NAME: z.string().optional(),
-
-		// Caching
-		UPSTASH_REDIS_REST_URL: z.string().optional(),
-		UPSTASH_REDIS_REST_TOKEN: z.string().optional(),
-
-		// Deployment
-		VERCEL_ACCESS_TOKEN: z.string().optional(),
-		VERCEL_CLIENT_ID: z.string().optional(),
-		VERCEL_CLIENT_SECRET: z.string().optional(),
-	},
-
-	/**
-	 * Client-side environment variables schema
-	 * These variables are exposed to the client and must be prefixed with NEXT_PUBLIC_
-	 */
-	client: {
-		// Consent Manager
-		NEXT_PUBLIC_C15T_URL: z.string().optional(),
-
-		// Content Management
-		NEXT_PUBLIC_BUILDER_API_KEY: z.string().optional(),
-
-		// Analytics
-		NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
-		NEXT_PUBLIC_POSTHOG_HOST: z.string().optional(),
-		NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.string().optional(),
-
-		// Polar Products
-		NEXT_PUBLIC_POLAR_SUBSCRIPTION_PRICE_ID: z.string().optional(),
-		NEXT_PUBLIC_POLAR_ONE_TIME_PRICE_ID: z.string().optional(),
-
-		// Stripe
-		NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().optional(),
-
-		// Clerk Authentication (alternative to Auth.js)
-		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
-
-		// ======== Supabase Authentication ========
-		NEXT_PUBLIC_SUPABASE_URL: z.string().url().optional(),
-		NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().optional(),
-
-		// ======== Build-Time Feature Flags (Derived in next.config.ts) ========
-		NEXT_PUBLIC_FEATURE_DATABASE_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_PAYLOAD_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_BUILDER_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_MDX_ENABLED: zBooleanFeatureFlag,
-
-		// Better Auth Feature Flags
-		NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED: zBooleanFeatureFlag,
-
-		// Auth.js Feature Flags
-		NEXT_PUBLIC_FEATURE_AUTH_RESEND_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_CREDENTIALS_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_CLERK_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_STACK_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_BITBUCKET_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_DISCORD_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_GITHUB_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_GITLAB_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_GOOGLE_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_TWITTER_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_AUTH_VERCEL_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_SUPABASE_AUTH_ENABLED: zBooleanFeatureFlag,
-
-		// External Services
-		NEXT_PUBLIC_FEATURE_GITHUB_API_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_GOOGLE_SERVICE_ACCOUNT_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_OPENAI_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_ANTHROPIC_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_LEMONSQUEEZY_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_POLAR_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_S3_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_REDIS_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_VERCEL_API_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_VERCEL_BLOB_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_STRIPE_ENABLED: zBooleanFeatureFlag,
-
-		// Analytics
-		NEXT_PUBLIC_FEATURE_POSTHOG_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_FEATURE_UMAMI_ENABLED: zBooleanFeatureFlag,
-
-		// DataFast Analytics
-		NEXT_PUBLIC_FEATURE_DATAFAST_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_DATAFAST_WEBSITE_ID: z.string().optional(),
-		NEXT_PUBLIC_DATAFAST_DOMAIN: z.string().optional(),
-
-		// Google Analytics
-		NEXT_PUBLIC_FEATURE_GOOGLE_ANALYTICS_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: z.string().optional(),
-
-		// Google Tag Manager
-		NEXT_PUBLIC_FEATURE_GOOGLE_TAG_MANAGER_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_GOOGLE_GTM_ID: z.string().optional(),
-
-		// Statsig
-		NEXT_PUBLIC_FEATURE_STATSIG_ENABLED: zBooleanFeatureFlag,
-		NEXT_PUBLIC_STATSIG_CLIENT_KEY: z.string().optional(),
-
-		// Consent Manager
-		NEXT_PUBLIC_FEATURE_C15T_ENABLED: zBooleanFeatureFlag,
-
-		// File Upload
-		NEXT_PUBLIC_FEATURE_FILE_UPLOAD_ENABLED: zBooleanFeatureFlag,
-	},
-
-	/**
-	 * Runtime environment mapping
-	 * Maps schema variables to actual process.env values
-	 */
-	runtimeEnv: {
-		// Core Environment
-		NODE_ENV: process.env.NODE_ENV,
-
-		// Original Feature Flags
-		DISABLE_LOGGING: process.env.DISABLE_LOGGING,
-		DISABLE_ERROR_LOGGING: process.env.DISABLE_ERROR_LOGGING,
-		DISABLE_BUILDER: process.env.DISABLE_BUILDER,
-		ENABLE_PAYLOAD: process.env.ENABLE_PAYLOAD,
-
-		// Database
-		DATABASE_URL: process.env.DATABASE_URL,
-		DB_PREFIX: process.env.DB_PREFIX,
-
-		// Authentication
-		AUTH_SECRET: process.env.AUTH_SECRET,
-		AUTH_URL: process.env.AUTH_URL,
-		AUTH_CREDENTIALS_ENABLED: process.env.AUTH_CREDENTIALS_ENABLED,
-
-		// Better Auth
-		BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
-		BETTER_AUTH_BASE_URL: process.env.BETTER_AUTH_BASE_URL,
-
-		// Resend
-		RESEND_API_KEY: process.env.RESEND_API_KEY, // Added for waitlist welcome email
-		RESEND_AUDIENCE_ID: process.env.RESEND_AUDIENCE_ID,
-		RESEND_FROM_EMAIL: process.env.RESEND_FROM_EMAIL,
-
-		// OAuth Providers
-		AUTH_DISCORD_ID: process.env.AUTH_DISCORD_ID,
-		AUTH_DISCORD_SECRET: process.env.AUTH_DISCORD_SECRET,
-		AUTH_GITHUB_ID: process.env.AUTH_GITHUB_ID,
-		AUTH_GITHUB_SECRET: process.env.AUTH_GITHUB_SECRET,
-		AUTH_GOOGLE_ID: process.env.AUTH_GOOGLE_ID,
-		AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
-
-		// Stack Auth
-		STACK_PROJECT_ID: process.env.STACK_PROJECT_ID,
-		STACK_PUBLISHABLE_CLIENT_KEY: process.env.STACK_PUBLISHABLE_CLIENT_KEY,
-		STACK_SECRET_SERVER_KEY: process.env.STACK_SECRET_SERVER_KEY,
-
-		// Supabase Authentication
-		SUPABASE_SERVICE_ROLE_KEY: process.env.SUPABASE_SERVICE_ROLE_KEY,
-
-		// Clerk Authentication (alternative to Auth.js)
-		CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
-		CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
-
-		// Content Management
-		PAYLOAD_SECRET: process.env.PAYLOAD_SECRET,
-
-		// External Services (Server-side keys)
-		GITHUB_ACCESS_TOKEN: process.env.GITHUB_ACCESS_TOKEN,
-		GITHUB_REPO_OWNER: process.env.GITHUB_REPO_OWNER,
-		GITHUB_REPO_NAME: process.env.GITHUB_REPO_NAME,
-		GOOGLE_CLIENT_EMAIL: process.env.GOOGLE_CLIENT_EMAIL,
-		GOOGLE_PRIVATE_KEY: process.env.GOOGLE_PRIVATE_KEY,
-		OPENAI_API_KEY: process.env.OPENAI_API_KEY,
-		ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
-		LEMONSQUEEZY_API_KEY: process.env.LEMONSQUEEZY_API_KEY,
-		LEMONSQUEEZY_STORE_ID: process.env.LEMONSQUEEZY_STORE_ID,
-		LEMONSQUEEZY_WEBHOOK_SECRET: process.env.LEMONSQUEEZY_WEBHOOK_SECRET,
-		POLAR_ACCESS_TOKEN: process.env.POLAR_ACCESS_TOKEN,
-		POLAR_PLATFORM_URL: process.env.POLAR_PLATFORM_URL,
-		STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
-		STRIPE_PUBLISHABLE_KEY: process.env.STRIPE_PUBLISHABLE_KEY,
-		STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
-		STRIPE_API_VERSION: process.env.STRIPE_API_VERSION,
-		AWS_REGION: process.env.AWS_REGION,
-		AWS_ACCESS_KEY_ID: process.env.AWS_ACCESS_KEY_ID,
-		AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY,
-		AWS_BUCKET_NAME: process.env.AWS_BUCKET_NAME,
-		UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
-		UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
-		VERCEL_ACCESS_TOKEN: process.env.VERCEL_ACCESS_TOKEN,
-		VERCEL_CLIENT_ID: process.env.VERCEL_CLIENT_ID,
-		VERCEL_CLIENT_SECRET: process.env.VERCEL_CLIENT_SECRET,
-
-		// Consent Manager
-		NEXT_PUBLIC_C15T_URL: process.env.NEXT_PUBLIC_C15T_URL,
-
-		// Client-side variables (Original)
-		NEXT_PUBLIC_BUILDER_API_KEY: process.env.NEXT_PUBLIC_BUILDER_API_KEY,
-		NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
-		NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-		NEXT_PUBLIC_UMAMI_WEBSITE_ID: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
-		NEXT_PUBLIC_POLAR_SUBSCRIPTION_PRICE_ID: process.env.NEXT_PUBLIC_POLAR_SUBSCRIPTION_PRICE_ID,
-		NEXT_PUBLIC_POLAR_ONE_TIME_PRICE_ID: process.env.NEXT_PUBLIC_POLAR_ONE_TIME_PRICE_ID,
-		NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
-
-		// Supabase Authentication
-		NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
-		NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
-
-		// Build-Time Feature Flags (Client-side)
-		NEXT_PUBLIC_FEATURE_DATABASE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_DATABASE_ENABLED,
-		NEXT_PUBLIC_FEATURE_PAYLOAD_ENABLED: process.env.NEXT_PUBLIC_FEATURE_PAYLOAD_ENABLED,
-		NEXT_PUBLIC_FEATURE_BUILDER_ENABLED: process.env.NEXT_PUBLIC_FEATURE_BUILDER_ENABLED,
-		NEXT_PUBLIC_FEATURE_MDX_ENABLED: process.env.NEXT_PUBLIC_FEATURE_MDX_ENABLED,
-
-		// Better Auth Feature Flags
-		NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED: process.env.NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED,
-
-		// Clerk Authentication (alternative to Auth.js)
-		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-
-		// Auth.js Feature Flags
-		NEXT_PUBLIC_FEATURE_AUTH_RESEND_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_RESEND_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_CREDENTIALS_ENABLED:
-			process.env.NEXT_PUBLIC_FEATURE_AUTH_CREDENTIALS_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_CLERK_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_CLERK_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_STACK_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_STACK_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_BITBUCKET_ENABLED:
-			process.env.NEXT_PUBLIC_FEATURE_AUTH_BITBUCKET_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_DISCORD_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_DISCORD_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_GITHUB_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_GITHUB_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_GITLAB_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_GITLAB_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_GOOGLE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_GOOGLE_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_TWITTER_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_TWITTER_ENABLED,
-		NEXT_PUBLIC_FEATURE_AUTH_VERCEL_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_VERCEL_ENABLED,
-		NEXT_PUBLIC_FEATURE_SUPABASE_AUTH_ENABLED:
-			process.env.NEXT_PUBLIC_FEATURE_SUPABASE_AUTH_ENABLED,
-		NEXT_PUBLIC_FEATURE_GITHUB_API_ENABLED: process.env.NEXT_PUBLIC_FEATURE_GITHUB_API_ENABLED,
-		NEXT_PUBLIC_FEATURE_GOOGLE_SERVICE_ACCOUNT_ENABLED:
-			process.env.NEXT_PUBLIC_FEATURE_GOOGLE_SERVICE_ACCOUNT_ENABLED,
-		NEXT_PUBLIC_FEATURE_OPENAI_ENABLED: process.env.NEXT_PUBLIC_FEATURE_OPENAI_ENABLED,
-		NEXT_PUBLIC_FEATURE_ANTHROPIC_ENABLED: process.env.NEXT_PUBLIC_FEATURE_ANTHROPIC_ENABLED,
-		NEXT_PUBLIC_FEATURE_LEMONSQUEEZY_ENABLED: process.env.NEXT_PUBLIC_FEATURE_LEMONSQUEEZY_ENABLED,
-		NEXT_PUBLIC_FEATURE_POLAR_ENABLED: process.env.NEXT_PUBLIC_FEATURE_POLAR_ENABLED,
-		NEXT_PUBLIC_FEATURE_S3_ENABLED: process.env.NEXT_PUBLIC_FEATURE_S3_ENABLED,
-		NEXT_PUBLIC_FEATURE_REDIS_ENABLED: process.env.NEXT_PUBLIC_FEATURE_REDIS_ENABLED,
-		NEXT_PUBLIC_FEATURE_VERCEL_API_ENABLED: process.env.NEXT_PUBLIC_FEATURE_VERCEL_API_ENABLED,
-		NEXT_PUBLIC_FEATURE_VERCEL_BLOB_ENABLED: process.env.NEXT_PUBLIC_FEATURE_VERCEL_BLOB_ENABLED,
-		NEXT_PUBLIC_FEATURE_STRIPE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_STRIPE_ENABLED,
-
-		// Analytics
-		NEXT_PUBLIC_FEATURE_POSTHOG_ENABLED: process.env.NEXT_PUBLIC_FEATURE_POSTHOG_ENABLED,
-		NEXT_PUBLIC_FEATURE_UMAMI_ENABLED: process.env.NEXT_PUBLIC_FEATURE_UMAMI_ENABLED,
-
-		// DataFast Analytics
-		NEXT_PUBLIC_FEATURE_DATAFAST_ENABLED: process.env.NEXT_PUBLIC_FEATURE_DATAFAST_ENABLED,
-		NEXT_PUBLIC_DATAFAST_WEBSITE_ID: process.env.NEXT_PUBLIC_DATAFAST_WEBSITE_ID,
-		NEXT_PUBLIC_DATAFAST_DOMAIN: process.env.NEXT_PUBLIC_DATAFAST_DOMAIN,
-
-		// Google Analytics
-		NEXT_PUBLIC_FEATURE_GOOGLE_ANALYTICS_ENABLED: process.env.NEXT_PUBLIC_FEATURE_GOOGLE_ANALYTICS_ENABLED,
-		NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
-
-		// Google Tag Manager
-		NEXT_PUBLIC_FEATURE_GOOGLE_TAG_MANAGER_ENABLED: process.env.NEXT_PUBLIC_FEATURE_GOOGLE_TAG_MANAGER_ENABLED,
-		NEXT_PUBLIC_GOOGLE_GTM_ID: process.env.NEXT_PUBLIC_GOOGLE_GTM_ID,
-
-		// Statsig
-		NEXT_PUBLIC_FEATURE_STATSIG_ENABLED: process.env.NEXT_PUBLIC_FEATURE_STATSIG_ENABLED,
-		NEXT_PUBLIC_STATSIG_CLIENT_KEY: process.env.NEXT_PUBLIC_STATSIG_CLIENT_KEY,
-
-		// Consent Manager
-		NEXT_PUBLIC_FEATURE_C15T_ENABLED: process.env.NEXT_PUBLIC_FEATURE_C15T_ENABLED,
-
-		NEXT_PUBLIC_FEATURE_FILE_UPLOAD_ENABLED: process.env.NEXT_PUBLIC_FEATURE_FILE_UPLOAD_ENABLED,
-	},
-
-	/**
-	 * Configuration options
-	 */
-	skipValidation: !!process.env.SKIP_ENV_VALIDATION,
-	emptyStringAsUndefined: true,
+  /**
+   * T3 Env ships the following presets out of the box, all importable from the /presets entrypoint.
+   *
+   * - vercel
+   * - neonVercel
+   * - uploadthing
+   * - render
+   * - railway
+   * - fly.io
+   * - netlify
+   */
+  extends: [vercel()], // !TODO
+
+  /**
+   * Server-side environment variables schema
+   * These variables are only available on the server and not exposed to the client
+   */
+  server: {
+    // ======== Core Environment ========
+    NODE_ENV: z.enum(["development", "test", "production"]).default("development"),
+
+    // ======== Original Feature Flags (Disable flags etc.) ========
+    DISABLE_LOGGING: z.string().optional(),
+    DISABLE_ERROR_LOGGING: z.string().optional(),
+    DISABLE_BUILDER: z.string().optional(), // Disable Builder CMS
+
+    // ======== Content Management ========
+    // Payload CMS
+    ENABLE_PAYLOAD: z.string().optional(), // Enable Payload CMS
+    PAYLOAD_SECRET: z.string().optional(),
+
+    // ======== Database ========
+    DATABASE_URL: z.string().url().optional(),
+    DB_PREFIX: z.string().default("db"),
+
+    // ======== Authentication ========
+    AUTH_SECRET: z.string().optional(),
+    AUTH_URL: z.string().url().optional(),
+    // ======== Credentials (requires DB) ========
+    AUTH_CREDENTIALS_ENABLED: z.string().optional(),
+
+    // ======== Better Auth Configuration ========
+    BETTER_AUTH_BASE_URL: z.string().url().optional(),
+    BETTER_AUTH_SECRET: z.string().optional(),
+
+    // Email and Magic login
+    RESEND_API_KEY: z.string().optional(), // Added for waitlist welcome email
+    RESEND_AUDIENCE_ID: z.string().optional(),
+    RESEND_FROM_EMAIL: z.string().optional(),
+
+    // OAuth Providers
+    AUTH_DISCORD_ID: z.string().optional(),
+    AUTH_DISCORD_SECRET: z.string().optional(),
+    AUTH_GITHUB_ID: z.string().optional(),
+    AUTH_GITHUB_SECRET: z.string().optional(),
+    AUTH_GOOGLE_ID: z.string().optional(),
+    AUTH_GOOGLE_SECRET: z.string().optional(),
+
+    // ======== Stack Auth ========
+    STACK_PROJECT_ID: z.string().optional(),
+    STACK_PUBLISHABLE_CLIENT_KEY: z.string().optional(),
+    STACK_SECRET_SERVER_KEY: z.string().optional(),
+
+    // ======== Supabase Authentication ========
+    SUPABASE_SERVICE_ROLE_KEY: z.string().optional(),
+
+    // ======== Clerk Authentication (alternative to Auth.js) ========
+    CLERK_SECRET_KEY: z.string().optional(),
+    CLERK_WEBHOOK_SECRET: z.string().optional(),
+
+    // ======== External Services ========
+    // GitHub
+    GITHUB_ACCESS_TOKEN: z.string().optional(),
+    GITHUB_REPO_OWNER: z.string().optional(),
+    GITHUB_REPO_NAME: z.string().optional(),
+
+    // Google
+    GOOGLE_CLIENT_EMAIL: z.string().optional(),
+    GOOGLE_PRIVATE_KEY: z.string().optional(),
+
+    // AI Services
+    OPENAI_API_KEY: z.string().optional(),
+    ANTHROPIC_API_KEY: z.string().optional(),
+
+    // Payments
+    LEMONSQUEEZY_API_KEY: z.string().optional(),
+    LEMONSQUEEZY_STORE_ID: z.string().optional(),
+    LEMONSQUEEZY_WEBHOOK_SECRET: z.string().optional(),
+
+    // Polar
+    POLAR_ACCESS_TOKEN: z.string().optional(),
+    POLAR_PLATFORM_URL: z.string().optional(),
+
+    // Stripe
+    STRIPE_SECRET_KEY: z.string().optional(),
+    STRIPE_PUBLISHABLE_KEY: z.string().optional(),
+    STRIPE_WEBHOOK_SECRET: z.string().optional(),
+    STRIPE_API_VERSION: z.string().optional(),
+
+    // Storage
+    AWS_REGION: z.string().optional(),
+    AWS_ACCESS_KEY_ID: z.string().optional(),
+    AWS_SECRET_ACCESS_KEY: z.string().optional(),
+    AWS_BUCKET_NAME: z.string().optional(),
+
+    // Caching
+    UPSTASH_REDIS_REST_URL: z.string().optional(),
+    UPSTASH_REDIS_REST_TOKEN: z.string().optional(),
+
+    // Deployment
+    VERCEL_ACCESS_TOKEN: z.string().optional(),
+    VERCEL_CLIENT_ID: z.string().optional(),
+    VERCEL_CLIENT_SECRET: z.string().optional(),
+  },
+
+  /**
+   * Client-side environment variables schema
+   * These variables are exposed to the client and must be prefixed with NEXT_PUBLIC_
+   */
+  client: {
+    // Consent Manager
+    NEXT_PUBLIC_C15T_URL: z.string().optional(),
+
+    // Content Management
+    NEXT_PUBLIC_BUILDER_API_KEY: z.string().optional(),
+
+    // Analytics
+    NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_HOST: z.string().optional(),
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.string().optional(),
+
+    // Polar Products
+    NEXT_PUBLIC_POLAR_SUBSCRIPTION_PRICE_ID: z.string().optional(),
+    NEXT_PUBLIC_POLAR_ONE_TIME_PRICE_ID: z.string().optional(),
+
+    // Stripe
+    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().optional(),
+
+    // Clerk Authentication (alternative to Auth.js)
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
+
+    // ======== Supabase Authentication ========
+    NEXT_PUBLIC_SUPABASE_URL: z.string().url().optional(),
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().optional(),
+
+    // ======== Build-Time Feature Flags (Derived in next.config.ts) ========
+    NEXT_PUBLIC_FEATURE_DATABASE_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_PAYLOAD_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_BUILDER_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_MDX_ENABLED: zBooleanFeatureFlag,
+
+    // Better Auth Feature Flags
+    NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED: zBooleanFeatureFlag,
+
+    // Auth.js Feature Flags
+    NEXT_PUBLIC_FEATURE_AUTH_RESEND_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_CREDENTIALS_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_CLERK_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_STACK_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_BITBUCKET_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_DISCORD_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_GITHUB_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_GITLAB_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_GOOGLE_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_TWITTER_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_AUTH_VERCEL_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_SUPABASE_AUTH_ENABLED: zBooleanFeatureFlag,
+
+    // External Services
+    NEXT_PUBLIC_FEATURE_GITHUB_API_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_GOOGLE_SERVICE_ACCOUNT_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_OPENAI_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_ANTHROPIC_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_LEMONSQUEEZY_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_POLAR_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_S3_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_REDIS_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_VERCEL_API_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_VERCEL_BLOB_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_STRIPE_ENABLED: zBooleanFeatureFlag,
+
+    // Analytics
+    NEXT_PUBLIC_FEATURE_POSTHOG_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_FEATURE_UMAMI_ENABLED: zBooleanFeatureFlag,
+
+    // DataFast Analytics
+    NEXT_PUBLIC_FEATURE_DATAFAST_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_DATAFAST_WEBSITE_ID: z.string().optional(),
+    NEXT_PUBLIC_DATAFAST_DOMAIN: z.string().optional(),
+
+    // Google Analytics
+    NEXT_PUBLIC_FEATURE_GOOGLE_ANALYTICS_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: z.string().optional(),
+
+    // Google Tag Manager
+    NEXT_PUBLIC_FEATURE_GOOGLE_TAG_MANAGER_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_GOOGLE_GTM_ID: z.string().optional(),
+
+    // Statsig
+    NEXT_PUBLIC_FEATURE_STATSIG_ENABLED: zBooleanFeatureFlag,
+    NEXT_PUBLIC_STATSIG_CLIENT_KEY: z.string().optional(),
+
+    // Consent Manager
+    NEXT_PUBLIC_FEATURE_C15T_ENABLED: zBooleanFeatureFlag,
+
+    // File Upload
+    NEXT_PUBLIC_FEATURE_FILE_UPLOAD_ENABLED: zBooleanFeatureFlag,
+  },
+
+  /**
+   * Runtime environment mapping
+   * Maps schema variables to actual process.env values
+   */
+  runtimeEnv: {
+    // Core Environment
+    NODE_ENV: process.env.NODE_ENV,
+
+    // Original Feature Flags
+    DISABLE_LOGGING: process.env.DISABLE_LOGGING,
+    DISABLE_ERROR_LOGGING: process.env.DISABLE_ERROR_LOGGING,
+    DISABLE_BUILDER: process.env.DISABLE_BUILDER,
+    ENABLE_PAYLOAD: process.env.ENABLE_PAYLOAD,
+
+    // Database
+    DATABASE_URL: process.env.DATABASE_URL,
+    DB_PREFIX: process.env.DB_PREFIX,
+
+    // Authentication
+    AUTH_SECRET: process.env.AUTH_SECRET,
+    AUTH_URL: process.env.AUTH_URL,
+    AUTH_CREDENTIALS_ENABLED: process.env.AUTH_CREDENTIALS_ENABLED,
+
+    // Better Auth
+    BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
+    BETTER_AUTH_BASE_URL: process.env.BETTER_AUTH_BASE_URL,
+
+    // Resend
+    RESEND_API_KEY: process.env.RESEND_API_KEY, // Added for waitlist welcome email
+    RESEND_AUDIENCE_ID: process.env.RESEND_AUDIENCE_ID,
+    RESEND_FROM_EMAIL: process.env.RESEND_FROM_EMAIL,
+
+    // OAuth Providers
+    AUTH_DISCORD_ID: process.env.AUTH_DISCORD_ID,
+    AUTH_DISCORD_SECRET: process.env.AUTH_DISCORD_SECRET,
+    AUTH_GITHUB_ID: process.env.AUTH_GITHUB_ID,
+    AUTH_GITHUB_SECRET: process.env.AUTH_GITHUB_SECRET,
+    AUTH_GOOGLE_ID: process.env.AUTH_GOOGLE_ID,
+    AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
+
+    // Stack Auth
+    STACK_PROJECT_ID: process.env.STACK_PROJECT_ID,
+    STACK_PUBLISHABLE_CLIENT_KEY: process.env.STACK_PUBLISHABLE_CLIENT_KEY,
+    STACK_SECRET_SERVER_KEY: process.env.STACK_SECRET_SERVER_KEY,
+
+    // Supabase Authentication
+    SUPABASE_SERVICE_ROLE_KEY: process.env.SUPABASE_SERVICE_ROLE_KEY,
+
+    // Clerk Authentication (alternative to Auth.js)
+    CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
+    CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
+
+    // Content Management
+    PAYLOAD_SECRET: process.env.PAYLOAD_SECRET,
+
+    // External Services (Server-side keys)
+    GITHUB_ACCESS_TOKEN: process.env.GITHUB_ACCESS_TOKEN,
+    GITHUB_REPO_OWNER: process.env.GITHUB_REPO_OWNER,
+    GITHUB_REPO_NAME: process.env.GITHUB_REPO_NAME,
+    GOOGLE_CLIENT_EMAIL: process.env.GOOGLE_CLIENT_EMAIL,
+    GOOGLE_PRIVATE_KEY: process.env.GOOGLE_PRIVATE_KEY,
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
+    LEMONSQUEEZY_API_KEY: process.env.LEMONSQUEEZY_API_KEY,
+    LEMONSQUEEZY_STORE_ID: process.env.LEMONSQUEEZY_STORE_ID,
+    LEMONSQUEEZY_WEBHOOK_SECRET: process.env.LEMONSQUEEZY_WEBHOOK_SECRET,
+    POLAR_ACCESS_TOKEN: process.env.POLAR_ACCESS_TOKEN,
+    POLAR_PLATFORM_URL: process.env.POLAR_PLATFORM_URL,
+    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
+    STRIPE_PUBLISHABLE_KEY: process.env.STRIPE_PUBLISHABLE_KEY,
+    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
+    STRIPE_API_VERSION: process.env.STRIPE_API_VERSION,
+    AWS_REGION: process.env.AWS_REGION,
+    AWS_ACCESS_KEY_ID: process.env.AWS_ACCESS_KEY_ID,
+    AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY,
+    AWS_BUCKET_NAME: process.env.AWS_BUCKET_NAME,
+    UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
+    UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
+    VERCEL_ACCESS_TOKEN: process.env.VERCEL_ACCESS_TOKEN,
+    VERCEL_CLIENT_ID: process.env.VERCEL_CLIENT_ID,
+    VERCEL_CLIENT_SECRET: process.env.VERCEL_CLIENT_SECRET,
+
+    // Consent Manager
+    NEXT_PUBLIC_C15T_URL: process.env.NEXT_PUBLIC_C15T_URL,
+
+    // Client-side variables (Original)
+    NEXT_PUBLIC_BUILDER_API_KEY: process.env.NEXT_PUBLIC_BUILDER_API_KEY,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+    NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
+    NEXT_PUBLIC_POLAR_SUBSCRIPTION_PRICE_ID: process.env.NEXT_PUBLIC_POLAR_SUBSCRIPTION_PRICE_ID,
+    NEXT_PUBLIC_POLAR_ONE_TIME_PRICE_ID: process.env.NEXT_PUBLIC_POLAR_ONE_TIME_PRICE_ID,
+    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
+
+    // Supabase Authentication
+    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+
+    // Build-Time Feature Flags (Client-side)
+    NEXT_PUBLIC_FEATURE_DATABASE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_DATABASE_ENABLED,
+    NEXT_PUBLIC_FEATURE_PAYLOAD_ENABLED: process.env.NEXT_PUBLIC_FEATURE_PAYLOAD_ENABLED,
+    NEXT_PUBLIC_FEATURE_BUILDER_ENABLED: process.env.NEXT_PUBLIC_FEATURE_BUILDER_ENABLED,
+    NEXT_PUBLIC_FEATURE_MDX_ENABLED: process.env.NEXT_PUBLIC_FEATURE_MDX_ENABLED,
+
+    // Better Auth Feature Flags
+    NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED: process.env.NEXT_PUBLIC_FEATURE_BETTER_AUTH_ENABLED,
+
+    // Clerk Authentication (alternative to Auth.js)
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+
+    // Auth.js Feature Flags
+    NEXT_PUBLIC_FEATURE_AUTH_RESEND_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_RESEND_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_CREDENTIALS_ENABLED:
+      process.env.NEXT_PUBLIC_FEATURE_AUTH_CREDENTIALS_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_CLERK_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_CLERK_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_STACK_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_STACK_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_BITBUCKET_ENABLED:
+      process.env.NEXT_PUBLIC_FEATURE_AUTH_BITBUCKET_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_DISCORD_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_DISCORD_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_GITHUB_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_GITHUB_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_GITLAB_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_GITLAB_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_GOOGLE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_GOOGLE_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_TWITTER_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_TWITTER_ENABLED,
+    NEXT_PUBLIC_FEATURE_AUTH_VERCEL_ENABLED: process.env.NEXT_PUBLIC_FEATURE_AUTH_VERCEL_ENABLED,
+    NEXT_PUBLIC_FEATURE_SUPABASE_AUTH_ENABLED:
+      process.env.NEXT_PUBLIC_FEATURE_SUPABASE_AUTH_ENABLED,
+    NEXT_PUBLIC_FEATURE_GITHUB_API_ENABLED: process.env.NEXT_PUBLIC_FEATURE_GITHUB_API_ENABLED,
+    NEXT_PUBLIC_FEATURE_GOOGLE_SERVICE_ACCOUNT_ENABLED:
+      process.env.NEXT_PUBLIC_FEATURE_GOOGLE_SERVICE_ACCOUNT_ENABLED,
+    NEXT_PUBLIC_FEATURE_OPENAI_ENABLED: process.env.NEXT_PUBLIC_FEATURE_OPENAI_ENABLED,
+    NEXT_PUBLIC_FEATURE_ANTHROPIC_ENABLED: process.env.NEXT_PUBLIC_FEATURE_ANTHROPIC_ENABLED,
+    NEXT_PUBLIC_FEATURE_LEMONSQUEEZY_ENABLED: process.env.NEXT_PUBLIC_FEATURE_LEMONSQUEEZY_ENABLED,
+    NEXT_PUBLIC_FEATURE_POLAR_ENABLED: process.env.NEXT_PUBLIC_FEATURE_POLAR_ENABLED,
+    NEXT_PUBLIC_FEATURE_S3_ENABLED: process.env.NEXT_PUBLIC_FEATURE_S3_ENABLED,
+    NEXT_PUBLIC_FEATURE_REDIS_ENABLED: process.env.NEXT_PUBLIC_FEATURE_REDIS_ENABLED,
+    NEXT_PUBLIC_FEATURE_VERCEL_API_ENABLED: process.env.NEXT_PUBLIC_FEATURE_VERCEL_API_ENABLED,
+    NEXT_PUBLIC_FEATURE_VERCEL_BLOB_ENABLED: process.env.NEXT_PUBLIC_FEATURE_VERCEL_BLOB_ENABLED,
+    NEXT_PUBLIC_FEATURE_STRIPE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_STRIPE_ENABLED,
+
+    // Analytics
+    NEXT_PUBLIC_FEATURE_POSTHOG_ENABLED: process.env.NEXT_PUBLIC_FEATURE_POSTHOG_ENABLED,
+    NEXT_PUBLIC_FEATURE_UMAMI_ENABLED: process.env.NEXT_PUBLIC_FEATURE_UMAMI_ENABLED,
+
+    // DataFast Analytics
+    NEXT_PUBLIC_FEATURE_DATAFAST_ENABLED: process.env.NEXT_PUBLIC_FEATURE_DATAFAST_ENABLED,
+    NEXT_PUBLIC_DATAFAST_WEBSITE_ID: process.env.NEXT_PUBLIC_DATAFAST_WEBSITE_ID,
+    NEXT_PUBLIC_DATAFAST_DOMAIN: process.env.NEXT_PUBLIC_DATAFAST_DOMAIN,
+
+    // Google Analytics
+    NEXT_PUBLIC_FEATURE_GOOGLE_ANALYTICS_ENABLED:
+      process.env.NEXT_PUBLIC_FEATURE_GOOGLE_ANALYTICS_ENABLED,
+    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
+
+    // Google Tag Manager
+    NEXT_PUBLIC_FEATURE_GOOGLE_TAG_MANAGER_ENABLED:
+      process.env.NEXT_PUBLIC_FEATURE_GOOGLE_TAG_MANAGER_ENABLED,
+    NEXT_PUBLIC_GOOGLE_GTM_ID: process.env.NEXT_PUBLIC_GOOGLE_GTM_ID,
+
+    // Statsig
+    NEXT_PUBLIC_FEATURE_STATSIG_ENABLED: process.env.NEXT_PUBLIC_FEATURE_STATSIG_ENABLED,
+    NEXT_PUBLIC_STATSIG_CLIENT_KEY: process.env.NEXT_PUBLIC_STATSIG_CLIENT_KEY,
+
+    // Consent Manager
+    NEXT_PUBLIC_FEATURE_C15T_ENABLED: process.env.NEXT_PUBLIC_FEATURE_C15T_ENABLED,
+
+    NEXT_PUBLIC_FEATURE_FILE_UPLOAD_ENABLED: process.env.NEXT_PUBLIC_FEATURE_FILE_UPLOAD_ENABLED,
+  },
+
+  /**
+   * Configuration options
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  emptyStringAsUndefined: true,
 });
diff --git a/src/hooks/use-async-state.ts b/src/hooks/use-async-state.ts
index 3c9ad070..50983f7c 100644
--- a/src/hooks/use-async-state.ts
+++ b/src/hooks/use-async-state.ts
@@ -1,17 +1,17 @@
 import { useCallback, useState } from "react";
 
 export interface AsyncState<T> {
-	data: T | null;
-	loading: boolean;
-	error: string | null;
-	success: boolean;
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+  success: boolean;
 }
 
 export interface UseAsyncStateReturn<T, Args extends unknown[]> extends AsyncState<T> {
-	execute: (...args: Args) => Promise<T>;
-	reset: () => void;
-	setData: (data: T | null) => void;
-	setError: (error: string | null) => void;
+  execute: (...args: Args) => Promise<T>;
+  reset: () => void;
+  setData: (data: T | null) => void;
+  setError: (error: string | null) => void;
 }
 
 /**
@@ -29,166 +29,166 @@ export interface UseAsyncStateReturn<T, Args extends unknown[]> extends AsyncSta
  * ```
  */
 export function useAsyncState<T, Args extends unknown[]>(
-	asyncFunction: (...args: Args) => Promise<T>,
-	initialData: T | null = null
+  asyncFunction: (...args: Args) => Promise<T>,
+  initialData: T | null = null
 ): UseAsyncStateReturn<T, Args> {
-	const [data, setData] = useState<T | null>(initialData);
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [success, setSuccess] = useState(false);
-
-	const execute = useCallback(
-		async (...args: Args): Promise<T> => {
-			setLoading(true);
-			setError(null);
-			setSuccess(false);
-
-			try {
-				const result = await asyncFunction(...args);
-				setData(result);
-				setSuccess(true);
-				return result;
-			} catch (err) {
-				const errorMessage = err instanceof Error ? err.message : "An unknown error occurred";
-				setError(errorMessage);
-				throw err;
-			} finally {
-				setLoading(false);
-			}
-		},
-		[asyncFunction]
-	);
-
-	const reset = useCallback(() => {
-		setData(initialData);
-		setLoading(false);
-		setError(null);
-		setSuccess(false);
-	}, [initialData]);
-
-	return {
-		data,
-		loading,
-		error,
-		success,
-		execute,
-		reset,
-		setData,
-		setError,
-	};
+  const [data, setData] = useState<T | null>(initialData);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const execute = useCallback(
+    async (...args: Args): Promise<T> => {
+      setLoading(true);
+      setError(null);
+      setSuccess(false);
+
+      try {
+        const result = await asyncFunction(...args);
+        setData(result);
+        setSuccess(true);
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "An unknown error occurred";
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [asyncFunction]
+  );
+
+  const reset = useCallback(() => {
+    setData(initialData);
+    setLoading(false);
+    setError(null);
+    setSuccess(false);
+  }, [initialData]);
+
+  return {
+    data,
+    loading,
+    error,
+    success,
+    execute,
+    reset,
+    setData,
+    setError,
+  };
 }
 
 /**
  * A simpler version for operations that don't return data
  */
 export function useAsyncAction<Args extends unknown[]>(
-	asyncFunction: (...args: Args) => Promise<void>
+  asyncFunction: (...args: Args) => Promise<void>
 ) {
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [success, setSuccess] = useState(false);
-
-	const execute = useCallback(
-		async (...args: Args): Promise<void> => {
-			setLoading(true);
-			setError(null);
-			setSuccess(false);
-
-			try {
-				await asyncFunction(...args);
-				setSuccess(true);
-			} catch (err) {
-				const errorMessage = err instanceof Error ? err.message : "An unknown error occurred";
-				setError(errorMessage);
-				throw err;
-			} finally {
-				setLoading(false);
-			}
-		},
-		[asyncFunction]
-	);
-
-	const reset = useCallback(() => {
-		setLoading(false);
-		setError(null);
-		setSuccess(false);
-	}, []);
-
-	return {
-		loading,
-		error,
-		success,
-		execute,
-		reset,
-		setError,
-	};
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const execute = useCallback(
+    async (...args: Args): Promise<void> => {
+      setLoading(true);
+      setError(null);
+      setSuccess(false);
+
+      try {
+        await asyncFunction(...args);
+        setSuccess(true);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "An unknown error occurred";
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [asyncFunction]
+  );
+
+  const reset = useCallback(() => {
+    setLoading(false);
+    setError(null);
+    setSuccess(false);
+  }, []);
+
+  return {
+    loading,
+    error,
+    success,
+    execute,
+    reset,
+    setError,
+  };
 }
 
 /**
  * Hook for managing multiple async operations with independent states
  */
 export function useMultiAsyncState<T extends Record<string, unknown>>() {
-	const [states, setStates] = useState<Record<keyof T, AsyncState<unknown>>>(
-		{} as Record<keyof T, AsyncState<unknown>>
-	);
-
-	const createExecutor = useCallback(
-		<K extends keyof T>(key: K, asyncFunction: () => Promise<T[K]>) => {
-			return async () => {
-				setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
-					...prev,
-					[key]: { ...prev[key], loading: true, error: null, success: false },
-				}));
-
-				try {
-					const result = await asyncFunction();
-					setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
-						...prev,
-						[key]: { data: result, loading: false, error: null, success: true },
-					}));
-					return result;
-				} catch (err) {
-					const errorMessage = err instanceof Error ? err.message : "An unknown error occurred";
-					setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
-						...prev,
-						[key]: { ...prev[key], loading: false, error: errorMessage, success: false },
-					}));
-					throw err;
-				}
-			};
-		},
-		[]
-	);
-
-	const getState = useCallback(
-		<K extends keyof T>(key: K): AsyncState<T[K]> => {
-			return (
-				(states[key] as AsyncState<T[K]>) || {
-					data: null,
-					loading: false,
-					error: null,
-					success: false,
-				}
-			);
-		},
-		[states]
-	);
-
-	const reset = useCallback(<K extends keyof T>(key?: K) => {
-		if (key) {
-			setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
-				...prev,
-				[key]: { data: null, loading: false, error: null, success: false },
-			}));
-		} else {
-			setStates({} as Record<keyof T, AsyncState<unknown>>);
-		}
-	}, []);
-
-	return {
-		createExecutor,
-		getState,
-		reset,
-		states,
-	};
+  const [states, setStates] = useState<Record<keyof T, AsyncState<unknown>>>(
+    {} as Record<keyof T, AsyncState<unknown>>
+  );
+
+  const createExecutor = useCallback(
+    <K extends keyof T>(key: K, asyncFunction: () => Promise<T[K]>) => {
+      return async () => {
+        setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
+          ...prev,
+          [key]: { ...prev[key], loading: true, error: null, success: false },
+        }));
+
+        try {
+          const result = await asyncFunction();
+          setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
+            ...prev,
+            [key]: { data: result, loading: false, error: null, success: true },
+          }));
+          return result;
+        } catch (err) {
+          const errorMessage = err instanceof Error ? err.message : "An unknown error occurred";
+          setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
+            ...prev,
+            [key]: { ...prev[key], loading: false, error: errorMessage, success: false },
+          }));
+          throw err;
+        }
+      };
+    },
+    []
+  );
+
+  const getState = useCallback(
+    <K extends keyof T>(key: K): AsyncState<T[K]> => {
+      return (
+        (states[key] as AsyncState<T[K]>) || {
+          data: null,
+          loading: false,
+          error: null,
+          success: false,
+        }
+      );
+    },
+    [states]
+  );
+
+  const reset = useCallback(<K extends keyof T>(key?: K) => {
+    if (key) {
+      setStates((prev: Record<keyof T, AsyncState<unknown>>) => ({
+        ...prev,
+        [key]: { data: null, loading: false, error: null, success: false },
+      }));
+    } else {
+      setStates({} as Record<keyof T, AsyncState<unknown>>);
+    }
+  }, []);
+
+  return {
+    createExecutor,
+    getState,
+    reset,
+    states,
+  };
 }
diff --git a/src/hooks/use-auto-resize-textarea.ts b/src/hooks/use-auto-resize-textarea.ts
index 8ad7ec60..d6f89ae8 100644
--- a/src/hooks/use-auto-resize-textarea.ts
+++ b/src/hooks/use-auto-resize-textarea.ts
@@ -1,51 +1,51 @@
 import { useCallback, useEffect, useRef } from "react";
 
 interface UseAutoResizeTextareaProps {
-	minHeight: number;
-	maxHeight?: number;
+  minHeight: number;
+  maxHeight?: number;
 }
 
 export function useAutoResizeTextarea({ minHeight, maxHeight }: UseAutoResizeTextareaProps) {
-	const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-	const adjustHeight = useCallback(
-		(reset?: boolean) => {
-			const textarea = textareaRef.current;
-			if (!textarea) return;
-
-			if (reset) {
-				textarea.style.height = `${minHeight}px`;
-				return;
-			}
-
-			// Temporarily shrink to get the right scrollHeight
-			textarea.style.height = `${minHeight}px`;
-
-			// Calculate new height
-			const newHeight = Math.max(
-				minHeight,
-				Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY)
-			);
-
-			textarea.style.height = `${newHeight}px`;
-		},
-		[minHeight, maxHeight]
-	);
-
-	useEffect(() => {
-		// Set initial height
-		const textarea = textareaRef.current;
-		if (textarea) {
-			textarea.style.height = `${minHeight}px`;
-		}
-	}, [minHeight]);
-
-	// Adjust height on window resize
-	useEffect(() => {
-		const handleResize = () => adjustHeight();
-		window.addEventListener("resize", handleResize);
-		return () => window.removeEventListener("resize", handleResize);
-	}, [adjustHeight]);
-
-	return { textareaRef, adjustHeight };
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const adjustHeight = useCallback(
+    (reset?: boolean) => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+
+      if (reset) {
+        textarea.style.height = `${minHeight}px`;
+        return;
+      }
+
+      // Temporarily shrink to get the right scrollHeight
+      textarea.style.height = `${minHeight}px`;
+
+      // Calculate new height
+      const newHeight = Math.max(
+        minHeight,
+        Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY)
+      );
+
+      textarea.style.height = `${newHeight}px`;
+    },
+    [minHeight, maxHeight]
+  );
+
+  useEffect(() => {
+    // Set initial height
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = `${minHeight}px`;
+    }
+  }, [minHeight]);
+
+  // Adjust height on window resize
+  useEffect(() => {
+    const handleResize = () => adjustHeight();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [adjustHeight]);
+
+  return { textareaRef, adjustHeight };
 }
diff --git a/src/hooks/use-copy-to-clipboard.ts b/src/hooks/use-copy-to-clipboard.ts
index efb4a5e8..be1239df 100644
--- a/src/hooks/use-copy-to-clipboard.ts
+++ b/src/hooks/use-copy-to-clipboard.ts
@@ -3,58 +3,58 @@
 import * as React from "react";
 
 export function useCopyToClipboard({
-	timeout = 2000,
-	onCopy,
+  timeout = 2000,
+  onCopy,
 }: {
-	timeout?: number;
-	onCopy?: () => void;
+  timeout?: number;
+  onCopy?: () => void;
 } = {}) {
-	const [isCopied, setIsCopied] = React.useState(false);
-
-	const copyToClipboard = async (value: string) => {
-		if (typeof window === "undefined" || !value) {
-			return;
-		}
-
-		try {
-			if (navigator?.clipboard) {
-				await navigator.clipboard.writeText(value);
-			} else {
-				// Fallback for browsers that don't support clipboard API
-				const textArea = document.createElement("textarea");
-				textArea.value = value;
-				// Avoid scrolling to bottom
-				textArea.style.top = "0";
-				textArea.style.left = "0";
-				textArea.style.position = "fixed";
-
-				document.body.appendChild(textArea);
-				textArea.focus();
-				textArea.select();
-
-				try {
-					document.execCommand("copy");
-				} catch (err) {
-					console.error("Failed to copy text:", err);
-					return;
-				} finally {
-					document.body.removeChild(textArea);
-				}
-			}
-
-			setIsCopied(true);
-
-			if (onCopy) {
-				onCopy();
-			}
-
-			setTimeout(() => {
-				setIsCopied(false);
-			}, timeout);
-		} catch (error) {
-			console.error("Failed to copy text:", error);
-		}
-	};
-
-	return { isCopied, copyToClipboard };
+  const [isCopied, setIsCopied] = React.useState(false);
+
+  const copyToClipboard = async (value: string) => {
+    if (typeof window === "undefined" || !value) {
+      return;
+    }
+
+    try {
+      if (navigator?.clipboard) {
+        await navigator.clipboard.writeText(value);
+      } else {
+        // Fallback for browsers that don't support clipboard API
+        const textArea = document.createElement("textarea");
+        textArea.value = value;
+        // Avoid scrolling to bottom
+        textArea.style.top = "0";
+        textArea.style.left = "0";
+        textArea.style.position = "fixed";
+
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        try {
+          document.execCommand("copy");
+        } catch (err) {
+          console.error("Failed to copy text:", err);
+          return;
+        } finally {
+          document.body.removeChild(textArea);
+        }
+      }
+
+      setIsCopied(true);
+
+      if (onCopy) {
+        onCopy();
+      }
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    } catch (error) {
+      console.error("Failed to copy text:", error);
+    }
+  };
+
+  return { isCopied, copyToClipboard };
 }
diff --git a/src/hooks/use-countdown.ts b/src/hooks/use-countdown.ts
index a12de342..78141705 100644
--- a/src/hooks/use-countdown.ts
+++ b/src/hooks/use-countdown.ts
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 
 interface CountdownResult {
-	days: number;
-	hours: number;
-	minutes: number;
-	seconds: number;
-	isExpired: boolean;
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  isExpired: boolean;
 }
 
 /**
@@ -14,50 +14,50 @@ interface CountdownResult {
  * @returns CountdownResult object with remaining time and expiry status
  */
 export const useCountdown = (targetDate: string | Date): CountdownResult => {
-	const [countdown, setCountdown] = useState<CountdownResult>({
-		days: 0,
-		hours: 0,
-		minutes: 0,
-		seconds: 0,
-		isExpired: false,
-	});
-
-	useEffect(() => {
-		const target = new Date(targetDate).getTime();
-
-		const calculateTimeLeft = () => {
-			const now = new Date().getTime();
-			const difference = target - now;
-
-			if (difference <= 0) {
-				return {
-					days: 0,
-					hours: 0,
-					minutes: 0,
-					seconds: 0,
-					isExpired: true,
-				};
-			}
-
-			return {
-				days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-				hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-				minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
-				seconds: Math.floor((difference % (1000 * 60)) / 1000),
-				isExpired: false,
-			};
-		};
-
-		// Initial calculation
-		setCountdown(calculateTimeLeft());
-
-		// Update every second
-		const timer = setInterval(() => {
-			setCountdown(calculateTimeLeft());
-		}, 1000);
-
-		return () => clearInterval(timer);
-	}, [targetDate]);
-
-	return countdown;
+  const [countdown, setCountdown] = useState<CountdownResult>({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    isExpired: false,
+  });
+
+  useEffect(() => {
+    const target = new Date(targetDate).getTime();
+
+    const calculateTimeLeft = () => {
+      const now = new Date().getTime();
+      const difference = target - now;
+
+      if (difference <= 0) {
+        return {
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+          isExpired: true,
+        };
+      }
+
+      return {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+        minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
+        seconds: Math.floor((difference % (1000 * 60)) / 1000),
+        isExpired: false,
+      };
+    };
+
+    // Initial calculation
+    setCountdown(calculateTimeLeft());
+
+    // Update every second
+    const timer = setInterval(() => {
+      setCountdown(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
+  return countdown;
 };
diff --git a/src/hooks/use-debounce.ts b/src/hooks/use-debounce.ts
index cee11cfb..d39df3f0 100644
--- a/src/hooks/use-debounce.ts
+++ b/src/hooks/use-debounce.ts
@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 
 export function useDebounce<T>(value: T, delay: number): T {
-	const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
-	useEffect(() => {
-		const timer = setTimeout(() => setDebouncedValue(value), delay);
-		return () => clearTimeout(timer);
-	}, [value, delay]);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
 
-	return debouncedValue;
+  return debouncedValue;
 }
diff --git a/src/hooks/use-has-primary-touch.tsx b/src/hooks/use-has-primary-touch.tsx
index b4abc99f..76fdc5cc 100644
--- a/src/hooks/use-has-primary-touch.tsx
+++ b/src/hooks/use-has-primary-touch.tsx
@@ -1,28 +1,28 @@
 import { useEffect, useState } from "react";
 
 export function useTouchPrimary() {
-	const [isTouchPrimary, setIsTouchPrimary] = useState(false);
+  const [isTouchPrimary, setIsTouchPrimary] = useState(false);
 
-	useEffect(() => {
-		if (typeof window === "undefined") return;
+  useEffect(() => {
+    if (typeof window === "undefined") return;
 
-		const controller = new AbortController();
-		const { signal } = controller;
+    const controller = new AbortController();
+    const { signal } = controller;
 
-		const handleTouch = () => {
-			const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-			const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
-			setIsTouchPrimary(hasTouch && prefersTouch);
-		};
+    const handleTouch = () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
+      setIsTouchPrimary(hasTouch && prefersTouch);
+    };
 
-		const mq = window.matchMedia("(pointer: coarse)");
-		mq.addEventListener("change", handleTouch, { signal });
-		window.addEventListener("pointerdown", handleTouch, { signal });
+    const mq = window.matchMedia("(pointer: coarse)");
+    mq.addEventListener("change", handleTouch, { signal });
+    window.addEventListener("pointerdown", handleTouch, { signal });
 
-		handleTouch();
+    handleTouch();
 
-		return () => controller.abort();
-	}, []);
+    return () => controller.abort();
+  }, []);
 
-	return isTouchPrimary;
+  return isTouchPrimary;
 }
diff --git a/src/hooks/use-is-mac.ts b/src/hooks/use-is-mac.ts
index 9dbb61d3..2ea1566c 100644
--- a/src/hooks/use-is-mac.ts
+++ b/src/hooks/use-is-mac.ts
@@ -5,11 +5,11 @@ import { is } from "@/lib/utils/is";
 
 // Extend Navigator type to include userAgentData (might be browser-specific)
 interface NavigatorWithUAData extends Navigator {
-	userAgentData?: {
-		platform: string;
-		brands: { brand: string; version: string }[];
-		mobile: boolean;
-	};
+  userAgentData?: {
+    platform: string;
+    brands: { brand: string; version: string }[];
+    mobile: boolean;
+  };
 }
 
 /**
@@ -18,26 +18,26 @@ interface NavigatorWithUAData extends Navigator {
  * Returns false during SSR or if the platform cannot be determined.
  */
 export function useIsMac(): boolean {
-	const [isMac, setIsMac] = useState(false);
+  const [isMac, setIsMac] = useState(false);
 
-	useEffect(() => {
-		let determinedIsMac = false;
-		if (typeof window !== "undefined") {
-			const nav = navigator as NavigatorWithUAData; // Cast to extended type
+  useEffect(() => {
+    let determinedIsMac = false;
+    if (typeof window !== "undefined") {
+      const nav = navigator as NavigatorWithUAData; // Cast to extended type
 
-			// Prefer userAgentData if available
-			if (nav.userAgentData?.platform) {
-				determinedIsMac = /mac|iphone|ipad|ipod/i.test(nav.userAgentData.platform);
-			} else if (nav.platform) {
-				// Fallback to platform
-				determinedIsMac = /Mac|iPod|iPhone|iPad/.test(nav.platform);
-			} else {
-				// Last resort fallback using the existing utility
-				determinedIsMac = is.mac();
-			}
-		}
-		setIsMac(determinedIsMac);
-	}, []);
+      // Prefer userAgentData if available
+      if (nav.userAgentData?.platform) {
+        determinedIsMac = /mac|iphone|ipad|ipod/i.test(nav.userAgentData.platform);
+      } else if (nav.platform) {
+        // Fallback to platform
+        determinedIsMac = /Mac|iPod|iPhone|iPad/.test(nav.platform);
+      } else {
+        // Last resort fallback using the existing utility
+        determinedIsMac = is.mac();
+      }
+    }
+    setIsMac(determinedIsMac);
+  }, []);
 
-	return isMac;
+  return isMac;
 }
diff --git a/src/hooks/use-local-storage.ts b/src/hooks/use-local-storage.ts
index 910b8cbc..c4d5a98d 100644
--- a/src/hooks/use-local-storage.ts
+++ b/src/hooks/use-local-storage.ts
@@ -3,102 +3,102 @@
 import { useCallback, useEffect, useState } from "react";
 
 export function useLocalStorage<T>(
-	key: string,
-	initialValue: T
+  key: string,
+  initialValue: T
 ): [T, (value: T | ((val: T) => T)) => void] {
-	// Get from local storage then
-	// parse stored json or return initialValue
-	const readValue = (): T => {
-		// Prevent build error "window is undefined" but keep working
-		if (typeof window === "undefined") {
-			return initialValue;
-		}
+  // Get from local storage then
+  // parse stored json or return initialValue
+  const readValue = (): T => {
+    // Prevent build error "window is undefined" but keep working
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
 
-		try {
-			const item = window.localStorage.getItem(key);
-			if (!item) return initialValue;
-			const parsed = JSON.parse(item) as T;
-			// Handle case where localStorage contains "null" or invalid data
-			return parsed ?? initialValue;
-		} catch (error) {
-			console.warn(`Error reading localStorage key "${key}":`, error);
-			return initialValue;
-		}
-	};
+    try {
+      const item = window.localStorage.getItem(key);
+      if (!item) return initialValue;
+      const parsed = JSON.parse(item) as T;
+      // Handle case where localStorage contains "null" or invalid data
+      return parsed ?? initialValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  };
 
-	// State to store our value
-	// Pass initial state function to useState so logic is only executed once
-	const [storedValue, setStoredValue] = useState<T>(readValue);
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(readValue);
 
-	// Stable setter that updates state; localStorage sync happens in an effect
-	const setValue = useCallback(
-		(value: T | ((val: T) => T)) => {
-			try {
-				setStoredValue((prev) =>
-					value instanceof Function ? (value as (val: T) => T)(prev) : value
-				);
-			} catch (error) {
-				console.warn(`Error setting localStorage key "${key}":`, error);
-			}
-		},
-		[key]
-	);
+  // Stable setter that updates state; localStorage sync happens in an effect
+  const setValue = useCallback(
+    (value: T | ((val: T) => T)) => {
+      try {
+        setStoredValue((prev) =>
+          value instanceof Function ? (value as (val: T) => T)(prev) : value
+        );
+      } catch (error) {
+        console.warn(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key]
+  );
 
-	useEffect(() => {
-		setStoredValue(readValue());
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [key]);
+  useEffect(() => {
+    setStoredValue(readValue());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
 
-	useEffect(() => {
-		const handleStorageChange = (event: StorageEvent) => {
-			if (event.key === key) {
-				// Handle null value (item was removed)
-				if (event.newValue === null) {
-					setStoredValue(initialValue);
-					return;
-				}
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === key) {
+        // Handle null value (item was removed)
+        if (event.newValue === null) {
+          setStoredValue(initialValue);
+          return;
+        }
 
-				// Safely parse the new value with error handling
-				try {
-					const parsedValue = JSON.parse(event.newValue) as T;
-					setStoredValue(parsedValue);
-				} catch (error) {
-					console.warn(`Error parsing localStorage change for key "${key}":`, error);
-					// If parsing fails, try to read directly from localStorage
-					// This handles edge cases where the event data might be corrupted
-					try {
-						const item = window.localStorage.getItem(key);
-						if (item !== null) {
-							const fallbackValue = JSON.parse(item) as T;
-							setStoredValue(fallbackValue);
-						} else {
-							setStoredValue(initialValue);
-						}
-					} catch (fallbackError) {
-						console.warn(`Fallback parsing also failed for key "${key}":`, fallbackError);
-						setStoredValue(initialValue);
-					}
-				}
-			}
-		};
+        // Safely parse the new value with error handling
+        try {
+          const parsedValue = JSON.parse(event.newValue) as T;
+          setStoredValue(parsedValue);
+        } catch (error) {
+          console.warn(`Error parsing localStorage change for key "${key}":`, error);
+          // If parsing fails, try to read directly from localStorage
+          // This handles edge cases where the event data might be corrupted
+          try {
+            const item = window.localStorage.getItem(key);
+            if (item !== null) {
+              const fallbackValue = JSON.parse(item) as T;
+              setStoredValue(fallbackValue);
+            } else {
+              setStoredValue(initialValue);
+            }
+          } catch (fallbackError) {
+            console.warn(`Fallback parsing also failed for key "${key}":`, fallbackError);
+            setStoredValue(initialValue);
+          }
+        }
+      }
+    };
 
-		// Listen for changes to this local storage key in other tabs/windows
-		window.addEventListener("storage", handleStorageChange);
-		return () => {
-			window.removeEventListener("storage", handleStorageChange);
-		};
-	}, [key, initialValue]);
+    // Listen for changes to this local storage key in other tabs/windows
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [key, initialValue]);
 
-	// Persist to localStorage whenever value or key changes
-	useEffect(() => {
-		try {
-			if (typeof window !== "undefined") {
-				window.localStorage.setItem(key, JSON.stringify(storedValue));
-			}
-		} catch (error) {
-			console.warn(`Error persisting localStorage key "${key}":`, error);
-		}
-	}, [key, storedValue]);
+  // Persist to localStorage whenever value or key changes
+  useEffect(() => {
+    try {
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(storedValue));
+      }
+    } catch (error) {
+      console.warn(`Error persisting localStorage key "${key}":`, error);
+    }
+  }, [key, storedValue]);
 
-	return [storedValue, setValue];
+  return [storedValue, setValue];
 }
diff --git a/src/hooks/use-lock-body.ts b/src/hooks/use-lock-body.ts
index 8e15dbe9..9755f3b8 100644
--- a/src/hooks/use-lock-body.ts
+++ b/src/hooks/use-lock-body.ts
@@ -2,12 +2,12 @@ import * as React from "react";
 
 // @see https://usehooks.com/useLockBodyScroll.
 export function useLockBody() {
-	React.useLayoutEffect((): (() => void) => {
-		const originalStyle: string = window.getComputedStyle(document.body).overflow;
-		document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = originalStyle;
-			return originalStyle;
-		};
-	}, []);
+  React.useLayoutEffect((): (() => void) => {
+    const originalStyle: string = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalStyle;
+      return originalStyle;
+    };
+  }, []);
 }
diff --git a/src/hooks/use-media-query.tsx b/src/hooks/use-media-query.tsx
index ca0eae29..7ac3915a 100644
--- a/src/hooks/use-media-query.tsx
+++ b/src/hooks/use-media-query.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
 
 export function useMediaQuery(query: string) {
-	const [value, setValue] = React.useState(false);
+  const [value, setValue] = React.useState(false);
 
-	React.useEffect(() => {
-		function onChange(event: MediaQueryListEvent) {
-			setValue(event.matches);
-		}
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches);
+    }
 
-		const result = matchMedia(query);
-		result.addEventListener("change", onChange);
-		setValue(result.matches);
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
 
-		return () => result.removeEventListener("change", onChange);
-	}, [query]);
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
 
-	return value;
+  return value;
 }
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
index 2b0fe1df..502fd323 100644
--- a/src/hooks/use-mobile.tsx
+++ b/src/hooks/use-mobile.tsx
@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }
diff --git a/src/hooks/use-mounted.ts b/src/hooks/use-mounted.ts
index 0da879d5..57bb851e 100644
--- a/src/hooks/use-mounted.ts
+++ b/src/hooks/use-mounted.ts
@@ -1,11 +1,11 @@
 import * as React from "react";
 
 export function useMounted() {
-	const [mounted, setMounted] = React.useState(false);
+  const [mounted, setMounted] = React.useState(false);
 
-	React.useEffect(() => {
-		setMounted(true);
-	}, []);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
 
-	return mounted;
+  return mounted;
 }
diff --git a/src/hooks/use-mutation-observer.ts b/src/hooks/use-mutation-observer.ts
index fa7b012f..757e6620 100644
--- a/src/hooks/use-mutation-observer.ts
+++ b/src/hooks/use-mutation-observer.ts
@@ -1,20 +1,20 @@
 import * as React from "react";
 
 export const useMutationObserver = (
-	ref: React.MutableRefObject<HTMLElement | null>,
-	callback: MutationCallback,
-	options = {
-		attributes: true,
-		characterData: true,
-		childList: true,
-		subtree: true,
-	}
+  ref: React.MutableRefObject<HTMLElement | null>,
+  callback: MutationCallback,
+  options = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  }
 ) => {
-	React.useEffect(() => {
-		if (ref.current) {
-			const observer = new MutationObserver(callback);
-			observer.observe(ref.current, options);
-			return () => observer.disconnect();
-		}
-	}, [ref, callback, options]);
+  React.useEffect(() => {
+    if (ref.current) {
+      const observer = new MutationObserver(callback);
+      observer.observe(ref.current, options);
+      return () => observer.disconnect();
+    }
+  }, [ref, callback, options]);
 };
diff --git a/src/hooks/use-redirect-after-sign-in.ts b/src/hooks/use-redirect-after-sign-in.ts
index 5bb6f54b..06cd465e 100644
--- a/src/hooks/use-redirect-after-sign-in.ts
+++ b/src/hooks/use-redirect-after-sign-in.ts
@@ -8,23 +8,23 @@ import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export const useRedirectAfterSignIn = (error: Error) => {
-	const router = useRouter();
-	const pathname = usePathname();
+  const router = useRouter();
+  const pathname = usePathname();
 
-	useEffect(() => {
-		const redirectToSignIn = () => {
-			redirectWithCode(routes.auth.signIn, {
-				code: STATUS_CODES.AUTH.code,
-				nextUrl: pathname,
-			});
-		};
+  useEffect(() => {
+    const redirectToSignIn = () => {
+      redirectWithCode(routes.auth.signIn, {
+        code: STATUS_CODES.AUTH.code,
+        nextUrl: pathname,
+      });
+    };
 
-		if (error instanceof AuthenticationError) {
-			logger.info("ErrorBoundary: Authentication error, redirecting to sign in");
-			redirectToSignIn();
-		}
+    if (error instanceof AuthenticationError) {
+      logger.info("ErrorBoundary: Authentication error, redirecting to sign in");
+      redirectToSignIn();
+    }
 
-		// Optionally log the error to an error reporting service
-		logger.error("ErrorBoundary", error);
-	}, [error, router, pathname]);
+    // Optionally log the error to an error reporting service
+    logger.error("ErrorBoundary", error);
+  }, [error, router, pathname]);
 };
diff --git a/src/hooks/use-sidebar.tsx b/src/hooks/use-sidebar.tsx
index 09d90044..fbc7f8aa 100644
--- a/src/hooks/use-sidebar.tsx
+++ b/src/hooks/use-sidebar.tsx
@@ -3,10 +3,10 @@
 import * as React from "react";
 
 export function useSidebar() {
-	const [state, setState] = React.useState<"closed" | "open">("open");
+  const [state, setState] = React.useState<"closed" | "open">("open");
 
-	return {
-		open: state === "open",
-		onOpenChange: (open: boolean) => setState(open ? "open" : "closed"),
-	};
+  return {
+    open: state === "open",
+    onOpenChange: (open: boolean) => setState(open ? "open" : "closed"),
+  };
 }
diff --git a/src/hooks/use-sign-in-redirect-url.ts b/src/hooks/use-sign-in-redirect-url.ts
index 687b0eb8..233e853b 100644
--- a/src/hooks/use-sign-in-redirect-url.ts
+++ b/src/hooks/use-sign-in-redirect-url.ts
@@ -3,7 +3,7 @@ import { SEARCH_PARAM_KEYS } from "@/config/search-param-keys";
 import { usePathname } from "next/navigation";
 
 export function useSignInRedirectUrl() {
-	const pathname = usePathname();
-	const url = `${routes.auth.signIn}?${SEARCH_PARAM_KEYS.nextUrl}=${pathname}`;
-	return url;
+  const pathname = usePathname();
+  const url = `${routes.auth.signIn}?${SEARCH_PARAM_KEYS.nextUrl}=${pathname}`;
+  return url;
 }
diff --git a/src/hooks/use-toast.ts b/src/hooks/use-toast.ts
index 02e111d8..f6de74b7 100644
--- a/src/hooks/use-toast.ts
+++ b/src/hooks/use-toast.ts
@@ -1,78 +1,75 @@
-"use client"
+"use client";
 
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
 
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
 
-let count = 0
+let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
 
 interface State {
-  toasts: ToasterToast[]
+  toasts: ToasterToast[];
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return
+    return;
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+    toastTimeouts.delete(toastId);
     dispatch({
       type: "REMOVE_TOAST",
       toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
+    });
+  }, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout)
-}
+  toastTimeouts.set(toastId, timeout);
+};
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -80,27 +77,25 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+      };
 
     case "UPDATE_TOAST":
       return {
         ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
 
     case "DISMISS_TOAST": {
-      const { toastId } = action
+      const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId)
+        addToRemoveQueue(toastId);
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+          addToRemoveQueue(toast.id);
+        });
       }
 
       return {
@@ -113,44 +108,44 @@ export const reducer = (state: State, action: Action): State => {
               }
             : t
         ),
-      }
+      };
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        }
+        };
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+      };
   }
-}
+};
 
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
 
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+  memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState)
-  })
+    listener(memoryState);
+  });
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
-  const id = genId()
+  const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
       toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
     type: "ADD_TOAST",
@@ -159,36 +154,36 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss()
+        if (!open) dismiss();
       },
     },
-  })
+  });
 
   return {
     id: id,
     dismiss,
     update,
-  }
+  };
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
-  }, [state])
+    };
+  }, [state]);
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+  };
 }
 
-export { useToast, toast }
+export { useToast, toast };
diff --git a/src/instrumentation.ts b/src/instrumentation.ts
index 3351b678..e989a0d8 100644
--- a/src/instrumentation.ts
+++ b/src/instrumentation.ts
@@ -32,11 +32,7 @@ export function register() {
  * Handles server errors and reports them to a custom observability provider.
  * This function is triggered when the Next.js server captures an error.
  */
-export const onRequestError: Instrumentation.onRequestError = (
-  error,
-  request,
-  context,
-) => {
+export const onRequestError: Instrumentation.onRequestError = (error, request, context) => {
   console.debug("error", error);
   console.debug("request", request);
   console.debug("context", context);
diff --git a/src/lib/changelog.ts b/src/lib/changelog.ts
index f91f5bcd..da2ccf28 100644
--- a/src/lib/changelog.ts
+++ b/src/lib/changelog.ts
@@ -4,27 +4,27 @@ import { unstable_cache } from "next/cache";
 // Types
 // ---------------------------------------------------------------------------
 export interface ChangelogEntry {
-	title: string;
-	slug: string;
-	content: string;
-	description: string;
-	publishedAt: string;
-	badge?: string;
-	categories: string[];
-	commitCount: number;
+  title: string;
+  slug: string;
+  content: string;
+  description: string;
+  publishedAt: string;
+  badge?: string;
+  categories: string[];
+  commitCount: number;
 }
 
 interface GitHubCommit {
-	sha: string;
-	commit: {
-		message: string;
-		author: { date: string; name: string };
-	};
+  sha: string;
+  commit: {
+    message: string;
+    author: { date: string; name: string };
+  };
 }
 
 interface GitHubTag {
-	name: string;
-	commit: { sha: string };
+  name: string;
+  commit: { sha: string };
 }
 
 // ---------------------------------------------------------------------------
@@ -40,95 +40,95 @@ const MAX_PAGES = 5; // 500 commits max
 // GitHub fetcher (works unauthenticated for public repos, uses token if set)
 // ---------------------------------------------------------------------------
 async function ghFetch<T>(endpoint: string): Promise<T> {
-	const headers: Record<string, string> = {
-		Accept: "application/vnd.github+json",
-	};
-	const token = process.env.GITHUB_TOKEN ?? process.env.GITHUB_ACCESS_TOKEN;
-	if (token) {
-		headers.Authorization = `Bearer ${token}`;
-	}
-
-	const res = await fetch(`${GITHUB_API}${endpoint}`, { headers });
-	if (!res.ok) {
-		const errorBody = await res.text().catch(() => "");
-		throw new Error(`GitHub API ${res.status}: ${endpoint} - ${errorBody}`);
-	}
-	return res.json() as Promise<T>;
+  const headers: Record<string, string> = {
+    Accept: "application/vnd.github+json",
+  };
+  const token = process.env.GITHUB_TOKEN ?? process.env.GITHUB_ACCESS_TOKEN;
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${GITHUB_API}${endpoint}`, { headers });
+  if (!res.ok) {
+    const errorBody = await res.text().catch(() => "");
+    throw new Error(`GitHub API ${res.status}: ${endpoint} - ${errorBody}`);
+  }
+  return res.json() as Promise<T>;
 }
 
 // ---------------------------------------------------------------------------
 // Fetch all commits (paginated)
 // ---------------------------------------------------------------------------
 async function fetchCommits(): Promise<GitHubCommit[]> {
-	const all: GitHubCommit[] = [];
-	for (let page = 1; page <= MAX_PAGES; page++) {
-		const batch = await ghFetch<GitHubCommit[]>(
-			`/commits?per_page=${COMMITS_PER_PAGE}&page=${page}`
-		);
-		all.push(...batch);
-		if (batch.length < COMMITS_PER_PAGE) break;
-	}
-	return all;
+  const all: GitHubCommit[] = [];
+  for (let page = 1; page <= MAX_PAGES; page++) {
+    const batch = await ghFetch<GitHubCommit[]>(
+      `/commits?per_page=${COMMITS_PER_PAGE}&page=${page}`
+    );
+    all.push(...batch);
+    if (batch.length < COMMITS_PER_PAGE) break;
+  }
+  return all;
 }
 
 // ---------------------------------------------------------------------------
 // Fetch tags and build sha->tag map
 // ---------------------------------------------------------------------------
 async function fetchTagMap(): Promise<Map<string, string>> {
-	const tags = await ghFetch<GitHubTag[]>("/tags?per_page=100");
-	const map = new Map<string, string>();
-	for (const tag of tags) {
-		map.set(tag.commit.sha, tag.name);
-	}
-	return map;
+  const tags = await ghFetch<GitHubTag[]>("/tags?per_page=100");
+  const map = new Map<string, string>();
+  for (const tag of tags) {
+    map.set(tag.commit.sha, tag.name);
+  }
+  return map;
 }
 
 // ---------------------------------------------------------------------------
 // Commit message parsing
 // ---------------------------------------------------------------------------
 const NOISE = [
-	/^auto commit$/i,
-	/^merge /i,
-	/^Merge pull request/,
-	/^Merge branch/,
-	/^initial commit$/i,
-	/^wip$/i,
-	/^\.$/,
+  /^auto commit$/i,
+  /^merge /i,
+  /^Merge pull request/,
+  /^Merge branch/,
+  /^initial commit$/i,
+  /^wip$/i,
+  /^\.$/,
 ];
 
 function isNoise(msg: string): boolean {
-	return NOISE.some((re) => re.test(msg));
+  return NOISE.some((re) => re.test(msg));
 }
 
 interface ParsedCommit {
-	type: string;
-	scope: string | null;
-	subject: string;
-	breaking: boolean;
+  type: string;
+  scope: string | null;
+  subject: string;
+  breaking: boolean;
 }
 
 function parseConventional(message: string): ParsedCommit | null {
-	const match = message.match(/^(\w+)(?:\(([^)]+)\))?(!?):\s*(.+)/);
-	if (!match) return null;
-	return {
-		type: match[1]!.toLowerCase(),
-		scope: match[2] ?? null,
-		subject: match[4]!,
-		breaking: match[3] === "!",
-	};
+  const match = message.match(/^(\w+)(?:\(([^)]+)\))?(!?):\s*(.+)/);
+  if (!match) return null;
+  return {
+    type: match[1]!.toLowerCase(),
+    scope: match[2] ?? null,
+    subject: match[4]!,
+    breaking: match[3] === "!",
+  };
 }
 
 const TYPE_LABELS: Record<string, string> = {
-	feat: "New Features",
-	fix: "Bug Fixes",
-	perf: "Performance",
-	refactor: "Improvements",
-	docs: "Documentation",
-	style: "Styling",
-	chore: "Maintenance",
-	ci: "CI/CD",
-	test: "Testing",
-	build: "Build",
+  feat: "New Features",
+  fix: "Bug Fixes",
+  perf: "Performance",
+  refactor: "Improvements",
+  docs: "Documentation",
+  style: "Styling",
+  chore: "Maintenance",
+  ci: "CI/CD",
+  test: "Testing",
+  build: "Build",
 };
 
 // ---------------------------------------------------------------------------
@@ -150,112 +150,112 @@ export const UNRELEASED_SLUG = "unreleased";
 
 /** Matches the old `updates-YYYY-MM-DD` slugs so stale links can redirect. */
 export function isLegacyUnreleasedSlug(slug: string): boolean {
-	return /^updates-\d{4}-\d{2}-\d{2}$/.test(slug);
+  return /^updates-\d{4}-\d{2}-\d{2}$/.test(slug);
 }
 
 interface CommitGroup {
-	label: string;
-	slug: string;
-	date: string; // ISO date of the most recent commit
-	commits: GitHubCommit[];
-	isRelease: boolean;
+  label: string;
+  slug: string;
+  date: string; // ISO date of the most recent commit
+  commits: GitHubCommit[];
+  isRelease: boolean;
 }
 
 function makeGroup(commits: GitHubCommit[], tag: string | null): CommitGroup {
-	return {
-		label: tag ?? "Recent Updates",
-		slug: tag ? tag.replace(/[^a-zA-Z0-9.-]/g, "-").toLowerCase() : UNRELEASED_SLUG,
-		date: commits[0]!.commit.author.date,
-		commits,
-		isRelease: !!tag,
-	};
+  return {
+    label: tag ?? "Recent Updates",
+    slug: tag ? tag.replace(/[^a-zA-Z0-9.-]/g, "-").toLowerCase() : UNRELEASED_SLUG,
+    date: commits[0]!.commit.author.date,
+    commits,
+    isRelease: !!tag,
+  };
 }
 
 function groupCommits(commits: GitHubCommit[], tagMap: Map<string, string>): CommitGroup[] {
-	const groups: CommitGroup[] = [];
-	let currentGroup: GitHubCommit[] = [];
-	let currentTag: string | null = null;
-
-	// Walk commits newest-first, split on tags. Only the first group can be
-	// untagged, so the constant UNRELEASED_SLUG is unique.
-	for (const commit of commits) {
-		const tag = tagMap.get(commit.sha);
-		if (tag && currentGroup.length > 0) {
-			groups.push(makeGroup(currentGroup, currentTag));
-			currentGroup = [];
-		}
-		if (tag) currentTag = tag;
-		currentGroup.push(commit);
-	}
-
-	if (currentGroup.length > 0) {
-		groups.push(makeGroup(currentGroup, currentTag));
-	}
-
-	return groups;
+  const groups: CommitGroup[] = [];
+  let currentGroup: GitHubCommit[] = [];
+  let currentTag: string | null = null;
+
+  // Walk commits newest-first, split on tags. Only the first group can be
+  // untagged, so the constant UNRELEASED_SLUG is unique.
+  for (const commit of commits) {
+    const tag = tagMap.get(commit.sha);
+    if (tag && currentGroup.length > 0) {
+      groups.push(makeGroup(currentGroup, currentTag));
+      currentGroup = [];
+    }
+    if (tag) currentTag = tag;
+    currentGroup.push(commit);
+  }
+
+  if (currentGroup.length > 0) {
+    groups.push(makeGroup(currentGroup, currentTag));
+  }
+
+  return groups;
 }
 
 // ---------------------------------------------------------------------------
 // Render a group into a changelog entry
 // ---------------------------------------------------------------------------
 function renderEntry(group: CommitGroup): ChangelogEntry {
-	const meaningful = group.commits.filter((c) => !isNoise(c.commit.message.split("\n")[0]!));
-
-	// Bucket by conventional commit type
-	const buckets = new Map<string, string[]>();
-	const uncategorized: string[] = [];
-
-	for (const c of meaningful) {
-		const firstLine = c.commit.message.split("\n")[0]!;
-		const parsed = parseConventional(firstLine);
-		if (parsed) {
-			const label = TYPE_LABELS[parsed.type] ?? "Other";
-			if (!buckets.has(label)) buckets.set(label, []);
-			buckets.get(label)!.push(parsed.subject);
-		} else {
-			uncategorized.push(firstLine);
-		}
-	}
-
-	// Build markdown
-	const sections: string[] = [];
-	const sectionOrder = Object.values(TYPE_LABELS);
-	for (const label of sectionOrder) {
-		const items = buckets.get(label);
-		if (!items?.length) continue;
-		sections.push(`## ${label}\n\n${items.map((s) => `- ${s}`).join("\n")}`);
-	}
-	if (uncategorized.length) {
-		sections.push(`## Changes\n\n${uncategorized.map((s) => `- ${s}`).join("\n")}`);
-	}
-
-	const content = sections.join("\n\n") || "Maintenance and internal improvements.";
-
-	// Count features and fixes for description
-	const featureCount = buckets.get("New Features")?.length ?? 0;
-	const fixCount = buckets.get("Bug Fixes")?.length ?? 0;
-	const parts: string[] = [];
-	if (featureCount) parts.push(`${featureCount} new feature${featureCount > 1 ? "s" : ""}`);
-	if (fixCount) parts.push(`${fixCount} bug fix${fixCount > 1 ? "es" : ""}`);
-	if (!parts.length) parts.push(`${meaningful.length} update${meaningful.length !== 1 ? "s" : ""}`);
-	const description = parts.join(", ");
-
-	// Badge
-	const badge = group.isRelease ? group.label : undefined;
-
-	// Categories from commit types
-	const categories = Array.from(buckets.keys());
-
-	return {
-		title: group.isRelease ? `Release ${group.label}` : group.label,
-		slug: group.slug,
-		content,
-		description,
-		publishedAt: group.date.slice(0, 10),
-		badge,
-		categories,
-		commitCount: group.commits.length,
-	};
+  const meaningful = group.commits.filter((c) => !isNoise(c.commit.message.split("\n")[0]!));
+
+  // Bucket by conventional commit type
+  const buckets = new Map<string, string[]>();
+  const uncategorized: string[] = [];
+
+  for (const c of meaningful) {
+    const firstLine = c.commit.message.split("\n")[0]!;
+    const parsed = parseConventional(firstLine);
+    if (parsed) {
+      const label = TYPE_LABELS[parsed.type] ?? "Other";
+      if (!buckets.has(label)) buckets.set(label, []);
+      buckets.get(label)!.push(parsed.subject);
+    } else {
+      uncategorized.push(firstLine);
+    }
+  }
+
+  // Build markdown
+  const sections: string[] = [];
+  const sectionOrder = Object.values(TYPE_LABELS);
+  for (const label of sectionOrder) {
+    const items = buckets.get(label);
+    if (!items?.length) continue;
+    sections.push(`## ${label}\n\n${items.map((s) => `- ${s}`).join("\n")}`);
+  }
+  if (uncategorized.length) {
+    sections.push(`## Changes\n\n${uncategorized.map((s) => `- ${s}`).join("\n")}`);
+  }
+
+  const content = sections.join("\n\n") || "Maintenance and internal improvements.";
+
+  // Count features and fixes for description
+  const featureCount = buckets.get("New Features")?.length ?? 0;
+  const fixCount = buckets.get("Bug Fixes")?.length ?? 0;
+  const parts: string[] = [];
+  if (featureCount) parts.push(`${featureCount} new feature${featureCount > 1 ? "s" : ""}`);
+  if (fixCount) parts.push(`${fixCount} bug fix${fixCount > 1 ? "es" : ""}`);
+  if (!parts.length) parts.push(`${meaningful.length} update${meaningful.length !== 1 ? "s" : ""}`);
+  const description = parts.join(", ");
+
+  // Badge
+  const badge = group.isRelease ? group.label : undefined;
+
+  // Categories from commit types
+  const categories = Array.from(buckets.keys());
+
+  return {
+    title: group.isRelease ? `Release ${group.label}` : group.label,
+    slug: group.slug,
+    content,
+    description,
+    publishedAt: group.date.slice(0, 10),
+    badge,
+    categories,
+    commitCount: group.commits.length,
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -267,27 +267,27 @@ function renderEntry(group: CommitGroup): ChangelogEntry {
 // GITHUB_TOKEN is unset) is retried on the next request rather than serving
 // an empty list, and 404s for every entry, for the next hour.
 const fetchChangelogEntries = unstable_cache(
-	async (): Promise<ChangelogEntry[]> => {
-		const [commits, tagMap] = await Promise.all([fetchCommits(), fetchTagMap()]);
-		const groups = groupCommits(commits, tagMap);
-		const entries = groups.map(renderEntry);
-		// Only filter out entries that have zero meaningful (non-noise) commits
-		return entries.filter((e) => e.commitCount > 0);
-	},
-	["changelog-entries"],
-	{ revalidate: 3600 } // 1 hour
+  async (): Promise<ChangelogEntry[]> => {
+    const [commits, tagMap] = await Promise.all([fetchCommits(), fetchTagMap()]);
+    const groups = groupCommits(commits, tagMap);
+    const entries = groups.map(renderEntry);
+    // Only filter out entries that have zero meaningful (non-noise) commits
+    return entries.filter((e) => e.commitCount > 0);
+  },
+  ["changelog-entries"],
+  { revalidate: 3600 } // 1 hour
 );
 
 export async function getChangelogEntries(): Promise<ChangelogEntry[]> {
-	try {
-		return await fetchChangelogEntries();
-	} catch (err) {
-		console.error("[changelog] Failed to fetch from GitHub:", err);
-		return [];
-	}
+  try {
+    return await fetchChangelogEntries();
+  } catch (err) {
+    console.error("[changelog] Failed to fetch from GitHub:", err);
+    return [];
+  }
 }
 
 export async function getChangelogEntry(slug: string): Promise<ChangelogEntry | null> {
-	const entries = await getChangelogEntries();
-	return entries.find((e) => e.slug === slug) ?? null;
+  const entries = await getChangelogEntries();
+  return entries.find((e) => e.slug === slug) ?? null;
 }
diff --git a/src/lib/env-utils.ts b/src/lib/env-utils.ts
index ee33f10e..ef2790c1 100644
--- a/src/lib/env-utils.ts
+++ b/src/lib/env-utils.ts
@@ -27,12 +27,6 @@ export function getNumericEnvVar(name: string, defaultValue = 0): number {
 /**
  * Check if an environment feature flag is enabled
  */
-export function isFeatureEnabled(
-  featureName: string,
-  defaultValue = false,
-): boolean {
-  return getBooleanEnvVar(
-    `FEATURE_${featureName.toUpperCase()}_ENABLED`,
-    defaultValue,
-  );
+export function isFeatureEnabled(featureName: string, defaultValue = false): boolean {
+  return getBooleanEnvVar(`FEATURE_${featureName.toUpperCase()}_ENABLED`, defaultValue);
 }
diff --git a/src/lib/errors/authentication-error.ts b/src/lib/errors/authentication-error.ts
index 8551485e..cae3ec26 100644
--- a/src/lib/errors/authentication-error.ts
+++ b/src/lib/errors/authentication-error.ts
@@ -6,14 +6,14 @@ Custom Error message for login
 @see: https://github.com/nextauthjs/next-auth/issues/9099
 */
 export class AuthenticationError extends AuthError {
-	constructor(options?: string) {
-		super(options);
+  constructor(options?: string) {
+    super(options);
 
-		if (typeof options === "string") {
-			this.message = options;
-		} else {
-			this.message = STATUS_CODES.AUTH_ERROR.message;
-		}
-	}
-	code = STATUS_CODES.AUTH_ERROR.code;
+    if (typeof options === "string") {
+      this.message = options;
+    } else {
+      this.message = STATUS_CODES.AUTH_ERROR.message;
+    }
+  }
+  code = STATUS_CODES.AUTH_ERROR.code;
 }
diff --git a/src/lib/logger.ts b/src/lib/logger.ts
index db23c02c..f48c367a 100644
--- a/src/lib/logger.ts
+++ b/src/lib/logger.ts
@@ -13,61 +13,61 @@ import type { LogData, LogLevel } from "@/types/logger";
 const isServer = typeof window === "undefined";
 
 const _createLogger =
-	(level: LogLevel) =>
-		(...args: unknown[]): void => {
-			const logData: LogData = {
-				apiKey: process.env.NEXT_PUBLIC_LOGFLARE_KEY,
-				prefix: "logger",
-				emoji: "🌐",
-				level,
-				message: args
-					.map((arg) => {
-						if (arg === null) return "null";
-						if (arg === undefined) return "undefined";
-						if (typeof arg === "string") return arg;
-						if (typeof arg === "number") return arg.toString();
-						if (typeof arg === "boolean") return arg.toString();
-						if (typeof arg === "bigint") return arg.toString();
-						if (typeof arg === "symbol") return arg.toString();
-						if (typeof arg === "function") return "[Function]";
-						// Must be an object at this point
-						try {
-							return JSON.stringify(arg);
-						} catch {
-							return "[Object]";
-						}
-					})
-					.join(" "),
-				timestamp: new Date().toISOString(),
-				url: isServer ? "server" : window.location.href,
-				userAgent: isServer ? "server" : navigator.userAgent,
-			};
-
-			// Send server-side logs to your logging service or database
-			void fetch("http://localhost:3000/v1", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify(logData),
-			});
-			if (isServer) {
-				console[level](...args);
-
-				// TODO: Implement logging service
-				if (logData?.apiKey) {
-					// Send server-side logs to your logging service or database
-					void fetch("http://localhost:3000/v1", {
-						method: "POST",
-						headers: { "Content-Type": "application/json" },
-						body: JSON.stringify(logData),
-					});
-				}
-			} else {
-				console[level](...args);
-				// if (loggerWorker) {
-				// 	loggerWorker.postMessage({ logData });
-				// }
-			}
-		};
+  (level: LogLevel) =>
+  (...args: unknown[]): void => {
+    const logData: LogData = {
+      apiKey: process.env.NEXT_PUBLIC_LOGFLARE_KEY,
+      prefix: "logger",
+      emoji: "🌐",
+      level,
+      message: args
+        .map((arg) => {
+          if (arg === null) return "null";
+          if (arg === undefined) return "undefined";
+          if (typeof arg === "string") return arg;
+          if (typeof arg === "number") return arg.toString();
+          if (typeof arg === "boolean") return arg.toString();
+          if (typeof arg === "bigint") return arg.toString();
+          if (typeof arg === "symbol") return arg.toString();
+          if (typeof arg === "function") return "[Function]";
+          // Must be an object at this point
+          try {
+            return JSON.stringify(arg);
+          } catch {
+            return "[Object]";
+          }
+        })
+        .join(" "),
+      timestamp: new Date().toISOString(),
+      url: isServer ? "server" : window.location.href,
+      userAgent: isServer ? "server" : navigator.userAgent,
+    };
+
+    // Send server-side logs to your logging service or database
+    void fetch("http://localhost:3000/v1", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(logData),
+    });
+    if (isServer) {
+      console[level](...args);
+
+      // TODO: Implement logging service
+      if (logData?.apiKey) {
+        // Send server-side logs to your logging service or database
+        void fetch("http://localhost:3000/v1", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(logData),
+        });
+      }
+    } else {
+      console[level](...args);
+      // if (loggerWorker) {
+      // 	loggerWorker.postMessage({ logData });
+      // }
+    }
+  };
 
 export const logger = console;
 // export const logger = {
@@ -91,84 +91,84 @@ export const logger = console;
 /* End of Logger */
 
 const prefixes = {
-	info: white("ℹ"),
-	warn: yellow("⚠"),
-	error: red("✖"),
-	wait: magenta("○"),
-	ready: green("✓"),
-	event: magenta("◆"),
-	trace: white("›"),
+  info: white("ℹ"),
+  warn: yellow("⚠"),
+  error: red("✖"),
+  wait: magenta("○"),
+  ready: green("✓"),
+  event: magenta("◆"),
+  trace: white("›"),
 } as const;
 
 const LOGGING_METHOD = {
-	info: "info",
-	warn: "warn",
-	error: "error",
-	wait: "info",
-	ready: "info",
-	event: "info",
-	trace: "trace",
+  info: "info",
+  warn: "warn",
+  error: "error",
+  wait: "info",
+  ready: "info",
+  event: "info",
+  trace: "trace",
 } as const;
 
 type PrefixType = keyof typeof prefixes;
 type LoggingMethod = keyof typeof LOGGING_METHOD;
 
 function prefixedLog(prefixType: PrefixType, ...message: unknown[]) {
-	if ((message[0] === "" || message[0] === undefined) && message.length === 1) {
-		message.shift();
-	}
-
-	const consoleMethod: LoggingMethod =
-		prefixType in LOGGING_METHOD ? LOGGING_METHOD[prefixType] : "info";
-
-	const prefix = prefixes[prefixType];
-	// If there's no message, don't print the prefix but a new line
-	if (message.length === 0) {
-		console[consoleMethod]("");
-	} else {
-		console[consoleMethod](` ${prefix}`, ...message);
-	}
+  if ((message[0] === "" || message[0] === undefined) && message.length === 1) {
+    message.shift();
+  }
+
+  const consoleMethod: LoggingMethod =
+    prefixType in LOGGING_METHOD ? LOGGING_METHOD[prefixType] : "info";
+
+  const prefix = prefixes[prefixType];
+  // If there's no message, don't print the prefix but a new line
+  if (message.length === 0) {
+    console[consoleMethod]("");
+  } else {
+    console[consoleMethod](` ${prefix}`, ...message);
+  }
 }
 
 export function info(...message: unknown[]) {
-	prefixedLog("info", ...message);
+  prefixedLog("info", ...message);
 }
 
 export function warn(...message: unknown[]) {
-	prefixedLog("warn", ...message);
+  prefixedLog("warn", ...message);
 }
 
 export function error(...message: unknown[]) {
-	prefixedLog("error", ...message);
+  prefixedLog("error", ...message);
 }
 
 export function wait(...message: unknown[]) {
-	prefixedLog("wait", ...message);
+  prefixedLog("wait", ...message);
 }
 
 export function ready(...message: unknown[]) {
-	prefixedLog("ready", ...message);
+  prefixedLog("ready", ...message);
 }
 
 export function event(...message: unknown[]) {
-	prefixedLog("event", ...message);
+  prefixedLog("event", ...message);
 }
 
 export function trace(...message: unknown[]) {
-	prefixedLog("trace", ...message);
+  prefixedLog("trace", ...message);
 }
 
 const warnOnceMessages = new Set();
 
 export function warnOnce(...message: unknown[]) {
-	const key = JSON.stringify(message);
-	if (!warnOnceMessages.has(key)) {
-		warnOnceMessages.add(key);
-		warn(...message);
-	}
+  const key = JSON.stringify(message);
+  if (!warnOnceMessages.has(key)) {
+    warnOnceMessages.add(key);
+    warn(...message);
+  }
 }
 
 export function panic(...message: unknown[]) {
-	error(...message);
-	process.exit(1);
+  error(...message);
+  process.exit(1);
 }
diff --git a/src/lib/performance.ts b/src/lib/performance.ts
index 11078c6d..0766fc67 100644
--- a/src/lib/performance.ts
+++ b/src/lib/performance.ts
@@ -8,26 +8,26 @@
  * Standard fetch cache configurations for different use cases
  */
 export const fetchConfigs = {
-	/** No caching - always fresh data */
-	noCache: { cache: "no-store" as const },
+  /** No caching - always fresh data */
+  noCache: { cache: "no-store" as const },
 
-	/** Cache with immediate revalidation check */
-	revalidate: { next: { revalidate: 0 } },
+  /** Cache with immediate revalidation check */
+  revalidate: { next: { revalidate: 0 } },
 
-	/** Short-term caching (1 minute) */
-	short: { next: { revalidate: 60 } },
+  /** Short-term caching (1 minute) */
+  short: { next: { revalidate: 60 } },
 
-	/** Medium-term caching (5 minutes) */
-	medium: { next: { revalidate: 300 } },
+  /** Medium-term caching (5 minutes) */
+  medium: { next: { revalidate: 300 } },
 
-	/** Long-term caching (1 hour) */
-	long: { next: { revalidate: 3600 } },
+  /** Long-term caching (1 hour) */
+  long: { next: { revalidate: 3600 } },
 
-	/** Static caching (24 hours) */
-	static: { next: { revalidate: 86400 } },
+  /** Static caching (24 hours) */
+  static: { next: { revalidate: 86400 } },
 
-	/** Force caching */
-	forceCache: { cache: "force-cache" as const },
+  /** Force caching */
+  forceCache: { cache: "force-cache" as const },
 } as const;
 
 /**
@@ -35,12 +35,12 @@ export const fetchConfigs = {
  * Use as: export const fetchCache = 'default-cache'
  */
 export const segmentFetchConfigs = {
-	defaultCache: "default-cache" as const,
-	defaultNoStore: "default-no-store" as const,
-	forceCache: "force-cache" as const,
-	onlyCache: "only-cache" as const,
-	forceNoStore: "force-no-store" as const,
-	onlyNoStore: "only-no-store" as const,
+  defaultCache: "default-cache" as const,
+  defaultNoStore: "default-no-store" as const,
+  forceCache: "force-cache" as const,
+  onlyCache: "only-cache" as const,
+  forceNoStore: "force-no-store" as const,
+  onlyNoStore: "only-no-store" as const,
 } as const;
 
 /**
@@ -49,130 +49,130 @@ export const segmentFetchConfigs = {
 const timers = new Map<string, number>();
 
 export const PerformanceMonitor = {
-	/**
-	 * Start timing an operation
-	 */
-	start(label: string): void {
-		timers.set(label, performance.now());
-	},
-
-	/**
-	 * End timing and log the duration
-	 */
-	end(label: string): number {
-		const start = timers.get(label);
-		if (!start) {
-			console.warn(`Timer '${label}' was not started`);
-			return 0;
-		}
-
-		const duration = performance.now() - start;
-		timers.delete(label);
-
-		if (process.env.NODE_ENV === "development") {
-			console.log(`⏱️ ${label}: ${duration.toFixed(2)}ms`);
-		}
-
-		return duration;
-	},
-
-	/**
-	 * Measure an async operation
-	 */
-	async measure<T>(label: string, operation: () => Promise<T>): Promise<T> {
-		this.start(label);
-		try {
-			const result = await operation();
-			this.end(label);
-			return result;
-		} catch (error) {
-			this.end(label);
-			throw error;
-		}
-	},
+  /**
+   * Start timing an operation
+   */
+  start(label: string): void {
+    timers.set(label, performance.now());
+  },
+
+  /**
+   * End timing and log the duration
+   */
+  end(label: string): number {
+    const start = timers.get(label);
+    if (!start) {
+      console.warn(`Timer '${label}' was not started`);
+      return 0;
+    }
+
+    const duration = performance.now() - start;
+    timers.delete(label);
+
+    if (process.env.NODE_ENV === "development") {
+      console.log(`⏱️ ${label}: ${duration.toFixed(2)}ms`);
+    }
+
+    return duration;
+  },
+
+  /**
+   * Measure an async operation
+   */
+  async measure<T>(label: string, operation: () => Promise<T>): Promise<T> {
+    this.start(label);
+    try {
+      const result = await operation();
+      this.end(label);
+      return result;
+    } catch (error) {
+      this.end(label);
+      throw error;
+    }
+  },
 };
 
 /**
  * Web Vitals tracking for Next.js 15
  */
 export interface WebVitalsMetric {
-	id: string;
-	name: string;
-	value: number;
-	label: "web-vital" | "custom";
-	startTime?: number;
+  id: string;
+  name: string;
+  value: number;
+  label: "web-vital" | "custom";
+  startTime?: number;
 }
 
 /**
  * Enhanced fetch helper with automatic caching configuration
  */
 export async function optimizedFetch(
-	url: string,
-	options: RequestInit & { cacheStrategy?: keyof typeof fetchConfigs } = {}
+  url: string,
+  options: RequestInit & { cacheStrategy?: keyof typeof fetchConfigs } = {}
 ): Promise<Response> {
-	const { cacheStrategy = "medium", ...fetchOptions } = options;
+  const { cacheStrategy = "medium", ...fetchOptions } = options;
 
-	const cacheConfig = fetchConfigs[cacheStrategy];
+  const cacheConfig = fetchConfigs[cacheStrategy];
 
-	if (process.env.NODE_ENV === "development") {
-		console.log(`🌐 Fetch ${url} with ${cacheStrategy} caching`);
-	}
+  if (process.env.NODE_ENV === "development") {
+    console.log(`🌐 Fetch ${url} with ${cacheStrategy} caching`);
+  }
 
-	return fetch(url, {
-		...fetchOptions,
-		...cacheConfig,
-	});
+  return fetch(url, {
+    ...fetchOptions,
+    ...cacheConfig,
+  });
 }
 
 /**
  * Preload helper for critical resources
  */
 export function preloadResource(href: string, as: string): void {
-	if (typeof window !== "undefined") {
-		const link = document.createElement("link");
-		link.rel = "preload";
-		link.href = href;
-		link.as = as;
-		document.head.appendChild(link);
-	}
+  if (typeof window !== "undefined") {
+    const link = document.createElement("link");
+    link.rel = "preload";
+    link.href = href;
+    link.as = as;
+    document.head.appendChild(link);
+  }
 }
 
 /**
  * Resource hints for improved loading
  */
 export function addResourceHints(hints: { href: string; rel: string; as?: string }[]): void {
-	if (typeof window !== "undefined") {
-		for (const { href, rel, as } of hints) {
-			const link = document.createElement("link");
-			link.rel = rel;
-			link.href = href;
-			if (as) link.as = as;
-			document.head.appendChild(link);
-		}
-	}
+  if (typeof window !== "undefined") {
+    for (const { href, rel, as } of hints) {
+      const link = document.createElement("link");
+      link.rel = rel;
+      link.href = href;
+      if (as) link.as = as;
+      document.head.appendChild(link);
+    }
+  }
 }
 
 /**
  * Image optimization helper
  */
 export function getOptimizedImageSrc(src: string, width: number, quality = 75): string {
-	// If it's a Next.js optimized image, add parameters
-	if (src.startsWith("/_next/image")) {
-		const url = new URL(src, window.location.origin);
-		url.searchParams.set("w", width.toString());
-		url.searchParams.set("q", quality.toString());
-		return url.toString();
-	}
-
-	return src;
+  // If it's a Next.js optimized image, add parameters
+  if (src.startsWith("/_next/image")) {
+    const url = new URL(src, window.location.origin);
+    url.searchParams.set("w", width.toString());
+    url.searchParams.set("q", quality.toString());
+    return url.toString();
+  }
+
+  return src;
 }
 
 export default {
-	fetchConfigs,
-	segmentFetchConfigs,
-	PerformanceMonitor,
-	optimizedFetch,
-	preloadResource,
-	addResourceHints,
-	getOptimizedImageSrc,
+  fetchConfigs,
+  segmentFetchConfigs,
+  PerformanceMonitor,
+  optimizedFetch,
+  preloadResource,
+  addResourceHints,
+  getOptimizedImageSrc,
 };
diff --git a/src/lib/schemas/auth.ts b/src/lib/schemas/auth.ts
index 7b0bcaf8..b85d9f71 100644
--- a/src/lib/schemas/auth.ts
+++ b/src/lib/schemas/auth.ts
@@ -1,17 +1,17 @@
 import { z } from "zod";
 
 export const signInSchema = z.object({
-	email: z
-		.string({ required_error: "Email is required" })
-		.email("Please enter a valid email address."),
-	password: z.string({ required_error: "Password is required" }).min(6, {
-		message: "Password must be at least 6 characters.",
-	}),
+  email: z
+    .string({ required_error: "Email is required" })
+    .email("Please enter a valid email address."),
+  password: z.string({ required_error: "Password is required" }).min(6, {
+    message: "Password must be at least 6 characters.",
+  }),
 });
 
 export const signInActionSchema = signInSchema.extend({
-	redirectTo: z.string().optional(),
-	redirect: z.boolean().optional(),
+  redirectTo: z.string().optional(),
+  redirect: z.boolean().optional(),
 });
 
 export const signUpSchema = signInActionSchema;
diff --git a/src/lib/schemas/user.ts b/src/lib/schemas/user.ts
index c476ea19..48b68e21 100644
--- a/src/lib/schemas/user.ts
+++ b/src/lib/schemas/user.ts
@@ -2,59 +2,59 @@ import { REGEX_PATTERNS } from "@/lib/utils/regex-patterns";
 import { z } from "zod";
 
 export const userSchema = z.object({
-	name: z.string().min(1, { message: "Name is required" }),
+  name: z.string().min(1, { message: "Name is required" }),
 
-	email: z.string().email("Please enter a valid email address."),
-	password: z.string({ required_error: "Password is required" }).min(6, {
-		message: "Password must be at least 6 characters.",
-	}),
+  email: z.string().email("Please enter a valid email address."),
+  password: z.string({ required_error: "Password is required" }).min(6, {
+    message: "Password must be at least 6 characters.",
+  }),
 
-	location: z.string().min(1, { message: "Enter a valid zip code or location" }),
-	phone: z.string().regex(REGEX_PATTERNS.phone, {
-		message: "Please enter a valid phone number.",
-	}),
-	website: z
-		.string()
-		.regex(REGEX_PATTERNS.url, { message: "Please enter a valid website URL." })
-		.optional()
-		.or(z.literal("")),
+  location: z.string().min(1, { message: "Enter a valid zip code or location" }),
+  phone: z.string().regex(REGEX_PATTERNS.phone, {
+    message: "Please enter a valid phone number.",
+  }),
+  website: z
+    .string()
+    .regex(REGEX_PATTERNS.url, { message: "Please enter a valid website URL." })
+    .optional()
+    .or(z.literal("")),
 
-	acceptTerms: z
-		.union([z.boolean(), z.string()])
-		.refine(
-			(value) => {
-				if (typeof value === "boolean") {
-					return value === true;
-				}
-				return false;
-			},
-			{
-				message: "You must accept the terms and conditions",
-			}
-		)
-		.transform((value) => {
-			if (typeof value === "string") {
-				return value === "true" || value === "on";
-			}
-			return value;
-		}),
+  acceptTerms: z
+    .union([z.boolean(), z.string()])
+    .refine(
+      (value) => {
+        if (typeof value === "boolean") {
+          return value === true;
+        }
+        return false;
+      },
+      {
+        message: "You must accept the terms and conditions",
+      }
+    )
+    .transform((value) => {
+      if (typeof value === "string") {
+        return value === "true" || value === "on";
+      }
+      return value;
+    }),
 });
 
 export const userSignUpSchema = userSchema.pick({
-	email: true,
-	password: true,
+  email: true,
+  password: true,
 });
 
 export const userApplySchema = userSchema
-	.pick({
-		email: true,
-		password: true,
-		acceptTerms: true,
-	})
-	.extend({
-		// Optional fields
-		name: userSchema.shape.name.optional(),
-		location: userSchema.shape.location.optional(),
-		phone: userSchema.shape.phone.optional(),
-		website: userSchema.shape.website.optional(),
-	});
+  .pick({
+    email: true,
+    password: true,
+    acceptTerms: true,
+  })
+  .extend({
+    // Optional fields
+    name: userSchema.shape.name.optional(),
+    location: userSchema.shape.location.optional(),
+    phone: userSchema.shape.phone.optional(),
+    website: userSchema.shape.website.optional(),
+  });
diff --git a/src/lib/sitemap.ts b/src/lib/sitemap.ts
index a012009e..2284bc5c 100644
--- a/src/lib/sitemap.ts
+++ b/src/lib/sitemap.ts
@@ -5,28 +5,19 @@ import { siteConfig } from "@/config/site-config";
 interface SitemapEntry {
   url: string;
   lastModified?: string | Date;
-  changeFrequency?:
-    | "always"
-    | "hourly"
-    | "daily"
-    | "weekly"
-    | "monthly"
-    | "yearly"
-    | "never";
+  changeFrequency?: "always" | "hourly" | "daily" | "weekly" | "monthly" | "yearly" | "never";
   priority?: number;
 }
 
 export async function generateSitemapEntries(): Promise<SitemapEntry[]> {
   const now = new Date().toISOString();
 
-  const highPriorityRoutes = [routes.home, routes.features, routes.docs].map(
-    (route) => ({
-      url: `${siteConfig.url}${route}`,
-      lastModified: now,
-      changeFrequency: "daily" as const,
-      priority: 1,
-    }),
-  );
+  const highPriorityRoutes = [routes.home, routes.features, routes.docs].map((route) => ({
+    url: `${siteConfig.url}${route}`,
+    lastModified: now,
+    changeFrequency: "daily" as const,
+    priority: 1,
+  }));
 
   const lowPriorityRoutes = [routes.terms, routes.privacy].map((route) => ({
     url: `${siteConfig.url}${route}`,
diff --git a/src/lib/trpc/api/root.ts b/src/lib/trpc/api/root.ts
index 6655926a..6fcb5aa8 100644
--- a/src/lib/trpc/api/root.ts
+++ b/src/lib/trpc/api/root.ts
@@ -7,7 +7,7 @@ import { createCallerFactory, createTRPCRouter } from "@/lib/trpc/api/trpc";
  * All routers added in /api/routers should be manually added here.
  */
 export const appRouter = createTRPCRouter({
-	post: postRouter,
+  post: postRouter,
 });
 
 // export type definition of API
diff --git a/src/lib/trpc/api/routers/post.ts b/src/lib/trpc/api/routers/post.ts
index 282cef81..b914ddff 100644
--- a/src/lib/trpc/api/routers/post.ts
+++ b/src/lib/trpc/api/routers/post.ts
@@ -4,31 +4,31 @@ import { createTRPCRouter, protectedProcedure, publicProcedure } from "@/lib/trp
 import { posts } from "@/server/db/schema";
 
 export const postRouter = createTRPCRouter({
-	hello: publicProcedure.input(z.object({ text: z.string() })).query(({ input }) => {
-		return {
-			greeting: `Hello ${input.text}`,
-		};
-	}),
+  hello: publicProcedure.input(z.object({ text: z.string() })).query(({ input }) => {
+    return {
+      greeting: `Hello ${input.text}`,
+    };
+  }),
 
-	create: protectedProcedure
-		.input(z.object({ name: z.string().min(1) }))
-		.mutation(async ({ ctx, input }) => {
-			const newPost = {
-				name: input.name,
-				createdById: ctx.session.user.id,
-			};
-			await ctx?.db?.insert(posts).values(newPost);
-		}),
+  create: protectedProcedure
+    .input(z.object({ name: z.string().min(1) }))
+    .mutation(async ({ ctx, input }) => {
+      const newPost = {
+        name: input.name,
+        createdById: ctx.session.user.id,
+      };
+      await ctx?.db?.insert(posts).values(newPost);
+    }),
 
-	getLatest: publicProcedure.query(async ({ ctx }) => {
-		const post = await ctx?.db?.query.posts.findFirst({
-			orderBy: (posts, { desc }) => [desc(posts.createdAt)],
-		});
+  getLatest: publicProcedure.query(async ({ ctx }) => {
+    const post = await ctx?.db?.query.posts.findFirst({
+      orderBy: (posts, { desc }) => [desc(posts.createdAt)],
+    });
 
-		return post ?? null;
-	}),
+    return post ?? null;
+  }),
 
-	getSecretMessage: protectedProcedure.query(() => {
-		return "you can now see this secret message!";
-	}),
+  getSecretMessage: protectedProcedure.query(() => {
+    return "you can now see this secret message!";
+  }),
 });
diff --git a/src/lib/trpc/api/trpc.ts b/src/lib/trpc/api/trpc.ts
index 5dfe3bec..8f281934 100644
--- a/src/lib/trpc/api/trpc.ts
+++ b/src/lib/trpc/api/trpc.ts
@@ -26,13 +26,13 @@ import { ZodError } from "zod";
  * @see https://trpc.io/docs/server/context
  */
 export const createTRPCContext = async (opts: { headers: Headers }) => {
-	const session = await auth();
+  const session = await auth();
 
-	return {
-		db,
-		session,
-		...opts,
-	};
+  return {
+    db,
+    session,
+    ...opts,
+  };
 };
 
 /**
@@ -43,16 +43,16 @@ export const createTRPCContext = async (opts: { headers: Headers }) => {
  * errors on the backend.
  */
 const t = initTRPC.context<typeof createTRPCContext>().create({
-	transformer: superjson,
-	errorFormatter({ shape, error }) {
-		return {
-			...shape,
-			data: {
-				...shape.data,
-				zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
-			},
-		};
-	},
+  transformer: superjson,
+  errorFormatter({ shape, error }) {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
+      },
+    };
+  },
 });
 
 /**
@@ -83,20 +83,20 @@ export const createTRPCRouter = t.router;
  * network latency that would occur in production but not in local development.
  */
 const timingMiddleware = t.middleware(async ({ next, path }) => {
-	const start = Date.now();
+  const start = Date.now();
 
-	if (t._config.isDev) {
-		// artificial delay in dev
-		const waitMs = Math.floor(Math.random() * 400) + 100;
-		await new Promise((resolve) => setTimeout(resolve, waitMs));
-	}
+  if (t._config.isDev) {
+    // artificial delay in dev
+    const waitMs = Math.floor(Math.random() * 400) + 100;
+    await new Promise((resolve) => setTimeout(resolve, waitMs));
+  }
 
-	const result = await next();
+  const result = await next();
 
-	const end = Date.now();
-	console.info(`[TRPC] ${path} took ${end - start}ms to execute`);
+  const end = Date.now();
+  console.info(`[TRPC] ${path} took ${end - start}ms to execute`);
 
-	return result;
+  return result;
 });
 
 /**
@@ -117,13 +117,13 @@ export const publicProcedure = t.procedure.use(timingMiddleware);
  * @see https://trpc.io/docs/procedures
  */
 export const protectedProcedure = t.procedure.use(timingMiddleware).use(({ ctx, next }) => {
-	if (!ctx.session?.user) {
-		throw new TRPCError({ code: "UNAUTHORIZED" });
-	}
-	return next({
-		ctx: {
-			// infers the `session` as non-nullable
-			session: { ...ctx.session, user: ctx.session.user },
-		},
-	});
+  if (!ctx.session?.user) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+  return next({
+    ctx: {
+      // infers the `session` as non-nullable
+      session: { ...ctx.session, user: ctx.session.user },
+    },
+  });
 });
diff --git a/src/lib/trpc/query-client.ts b/src/lib/trpc/query-client.ts
index 2f150c33..35193123 100644
--- a/src/lib/trpc/query-client.ts
+++ b/src/lib/trpc/query-client.ts
@@ -2,20 +2,20 @@ import { QueryClient, defaultShouldDehydrateQuery } from "@tanstack/react-query"
 import SuperJSON from "superjson";
 
 export const createQueryClient = () =>
-	new QueryClient({
-		defaultOptions: {
-			queries: {
-				// With SSR, we usually want to set some default staleTime
-				// above 0 to avoid refetching immediately on the client
-				staleTime: 30 * 1000,
-			},
-			dehydrate: {
-				serializeData: SuperJSON.serialize,
-				shouldDehydrateQuery: (query) =>
-					defaultShouldDehydrateQuery(query) || query.state.status === "pending",
-			},
-			hydrate: {
-				deserializeData: SuperJSON.deserialize,
-			},
-		},
-	});
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 30 * 1000,
+      },
+      dehydrate: {
+        serializeData: SuperJSON.serialize,
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) || query.state.status === "pending",
+      },
+      hydrate: {
+        deserializeData: SuperJSON.deserialize,
+      },
+    },
+  });
diff --git a/src/lib/trpc/server.ts b/src/lib/trpc/server.ts
index c589fc86..bf1f309a 100644
--- a/src/lib/trpc/server.ts
+++ b/src/lib/trpc/server.ts
@@ -12,18 +12,18 @@ import { createQueryClient } from "./query-client";
  * handling a tRPC call from a React Server Component.
  */
 const createContext = cache(async () => {
-	const heads = new Headers(await headers());
-	heads.set("x-trpc-source", "rsc");
+  const heads = new Headers(await headers());
+  heads.set("x-trpc-source", "rsc");
 
-	return createTRPCContext({
-		headers: heads,
-	});
+  return createTRPCContext({
+    headers: heads,
+  });
 });
 
 const getQueryClient = cache(createQueryClient);
 const caller = createCaller(createContext);
 
 export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
-	caller,
-	getQueryClient
+  caller,
+  getQueryClient
 );
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ac680b30..365058ce 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,5 +2,5 @@ import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }
diff --git a/src/lib/utils/capitalize.ts b/src/lib/utils/capitalize.ts
index 19c83ce1..7519095d 100644
--- a/src/lib/utils/capitalize.ts
+++ b/src/lib/utils/capitalize.ts
@@ -1,3 +1,3 @@
 export function capitalize(str: string) {
-	return str.charAt(0).toUpperCase() + str.slice(1);
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }
diff --git a/src/lib/utils/cn.ts b/src/lib/utils/cn.ts
index ac680b30..365058ce 100644
--- a/src/lib/utils/cn.ts
+++ b/src/lib/utils/cn.ts
@@ -2,5 +2,5 @@ import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }
diff --git a/src/lib/utils/colors.ts b/src/lib/utils/colors.ts
index e9eae159..4d4f00e3 100644
--- a/src/lib/utils/colors.ts
+++ b/src/lib/utils/colors.ts
@@ -1,34 +1,34 @@
 export interface WaveConfig {
-	frequency: number;
-	amplitude: number;
-	saturation: number;
-	brightness: number;
+  frequency: number;
+  amplitude: number;
+  saturation: number;
+  brightness: number;
 }
 
 export const generateRainbowColor = (offset: number): string => {
-	const r = Math.sin(0.3 * offset) * 127 + 128;
-	const g = Math.sin(0.3 * offset + 2) * 127 + 128;
-	const b = Math.sin(0.3 * offset + 4) * 127 + 128;
-	return `rgb(${r},${g},${b})`;
+  const r = Math.sin(0.3 * offset) * 127 + 128;
+  const g = Math.sin(0.3 * offset + 2) * 127 + 128;
+  const b = Math.sin(0.3 * offset + 4) * 127 + 128;
+  return `rgb(${r},${g},${b})`;
 };
 
 export const calculateWaveY = (
-	x: number,
-	time: number,
-	layer: number,
-	height: number,
-	config: WaveConfig
+  x: number,
+  time: number,
+  layer: number,
+  height: number,
+  config: WaveConfig
 ): number => {
-	const baseY = height / 2;
-	return (
-		baseY +
-		Math.sin(x * config.frequency * 0.01 + time + layer) * (50 * config.amplitude) +
-		Math.sin(x * config.frequency * 0.02 + time * 1.2) * (30 * config.amplitude) +
-		Math.sin(x * config.frequency * 0.003 + time * 0.3) * (100 * config.amplitude)
-	);
+  const baseY = height / 2;
+  return (
+    baseY +
+    Math.sin(x * config.frequency * 0.01 + time + layer) * (50 * config.amplitude) +
+    Math.sin(x * config.frequency * 0.02 + time * 1.2) * (30 * config.amplitude) +
+    Math.sin(x * config.frequency * 0.003 + time * 0.3) * (100 * config.amplitude)
+  );
 };
 
 export const getWaveColor = (time: number, layer: number, config: WaveConfig): string => {
-	const hue = (time + layer * 120) % 360;
-	return `hsl(${hue}, ${config.saturation}%, ${config.brightness}%)`;
+  const hue = (time + layer * 120) % 360;
+  return `hsl(${hue}, ${config.saturation}%, ${config.brightness}%)`;
 };
diff --git a/src/lib/utils/debounce.ts b/src/lib/utils/debounce.ts
index de5582a8..9e457902 100644
--- a/src/lib/utils/debounce.ts
+++ b/src/lib/utils/debounce.ts
@@ -1,81 +1,81 @@
 export function restArguments<F extends (...args: unknown[]) => unknown>(
-	func: F,
-	startIndex: number = func.length - 1
+  func: F,
+  startIndex: number = func.length - 1
 ) {
-	return function (this: unknown, ...args: unknown[]) {
-		const length = Math.max(args.length - startIndex, 0);
-		const rest = Array(length);
-		let index = 0;
-		for (; index < length; index += 1) {
-			rest[index] = args[index + startIndex];
-		}
-		switch (startIndex) {
-			case 0:
-				return func.call(this, rest);
-			case 1:
-				return func.call(this, args[0], rest);
-			case 2:
-				return func.call(this, args[0], args[1], rest);
-			default: {
-				const _args = Array(startIndex + 1);
-				for (index = 0; index < startIndex; index += 1) {
-					_args[index] = args[index];
-				}
-				_args[startIndex] = rest;
-				return func.apply(this, _args);
-			}
-		}
-	};
+  return function (this: unknown, ...args: unknown[]) {
+    const length = Math.max(args.length - startIndex, 0);
+    const rest = Array(length);
+    let index = 0;
+    for (; index < length; index += 1) {
+      rest[index] = args[index + startIndex];
+    }
+    switch (startIndex) {
+      case 0:
+        return func.call(this, rest);
+      case 1:
+        return func.call(this, args[0], rest);
+      case 2:
+        return func.call(this, args[0], args[1], rest);
+      default: {
+        const _args = Array(startIndex + 1);
+        for (index = 0; index < startIndex; index += 1) {
+          _args[index] = args[index];
+        }
+        _args[startIndex] = rest;
+        return func.apply(this, _args);
+      }
+    }
+  };
 }
 
 export function debounce<T extends unknown[], R>(
-	func: (...args: T) => R,
-	wait: number,
-	immediate?: boolean
+  func: (...args: T) => R,
+  wait: number,
+  immediate?: boolean
 ) {
-	let timeout: NodeJS.Timeout | null;
-	let previous: number;
-	let args: T | undefined;
-	let result: R | undefined;
-	let context: unknown;
+  let timeout: NodeJS.Timeout | null;
+  let previous: number;
+  let args: T | undefined;
+  let result: R | undefined;
+  let context: unknown;
 
-	const now = () => Date.now();
+  const now = () => Date.now();
 
-	const later = function () {
-		const passed = now() - previous;
-		if (wait > passed) {
-			timeout = setTimeout(later, wait - passed);
-		} else {
-			timeout = null;
-			if (!immediate) {
-				result = func.apply(context, args!);
-			}
-			if (!timeout) {
-				args = undefined;
-				context = undefined;
-			}
-		}
-	};
+  const later = function () {
+    const passed = now() - previous;
+    if (wait > passed) {
+      timeout = setTimeout(later, wait - passed);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args!);
+      }
+      if (!timeout) {
+        args = undefined;
+        context = undefined;
+      }
+    }
+  };
 
-	const debounced = restArguments(function (this: unknown, _args: unknown) {
-		context = this;
-		args = _args as T;
-		previous = now();
-		if (!timeout) {
-			timeout = setTimeout(later, wait);
-			if (immediate) {
-				result = func.apply(context, args);
-			}
-		}
-		return result;
-	});
+  const debounced = restArguments(function (this: unknown, _args: unknown) {
+    context = this;
+    args = _args as T;
+    previous = now();
+    if (!timeout) {
+      timeout = setTimeout(later, wait);
+      if (immediate) {
+        result = func.apply(context, args);
+      }
+    }
+    return result;
+  });
 
-	(debounced as typeof debounced & { cancel: () => void }).cancel = function () {
-		if (timeout) clearTimeout(timeout);
-		timeout = null;
-		args = undefined;
-		context = undefined;
-	};
+  (debounced as typeof debounced & { cancel: () => void }).cancel = function () {
+    if (timeout) clearTimeout(timeout);
+    timeout = null;
+    args = undefined;
+    context = undefined;
+  };
 
-	return debounced as typeof debounced & { cancel: () => void };
+  return debounced as typeof debounced & { cancel: () => void };
 }
diff --git a/src/lib/utils/email-utils.ts b/src/lib/utils/email-utils.ts
index 5eea12c4..34ad879e 100644
--- a/src/lib/utils/email-utils.ts
+++ b/src/lib/utils/email-utils.ts
@@ -60,7 +60,8 @@ export function generateMailtoLink(options: MailtoOptions): string {
  * @returns Formatted mailto URL for feedback
  */
 export function generateFeedbackMailto(content: string, source: string): string {
-  const adminEmail = process.env.ADMIN_EMAIL?.split(",")[0]?.trim() || siteConfig.email?.support || "";
+  const adminEmail =
+    process.env.ADMIN_EMAIL?.split(",")[0]?.trim() || siteConfig.email?.support || "";
   const subject = `Feedback from ${source}`;
 
   return generateMailtoLink({
diff --git a/src/lib/utils/extract-headings.ts b/src/lib/utils/extract-headings.ts
index 9d40dce1..35f4d287 100644
--- a/src/lib/utils/extract-headings.ts
+++ b/src/lib/utils/extract-headings.ts
@@ -1,7 +1,7 @@
 export interface Heading {
-	id: string;
-	text: string;
-	level: number;
+  id: string;
+  text: string;
+  level: number;
 }
 
 /**
@@ -9,8 +9,8 @@ export interface Heading {
  * Key: content hash, Value: { headings, timestamp }
  */
 interface HeadingCacheEntry {
-	headings: Heading[];
-	timestamp: number;
+  headings: Heading[];
+  timestamp: number;
 }
 
 // In-memory cache for heading extraction
@@ -24,124 +24,124 @@ const MAX_CACHE_SIZE = 1000; // Maximum number of cached entries
  * Generate a simple hash for content caching
  */
 function generateContentHash(content: string): string {
-	let hash = 0;
-	if (content.length === 0) return hash.toString();
+  let hash = 0;
+  if (content.length === 0) return hash.toString();
 
-	for (let i = 0; i < content.length; i++) {
-		const char = content.charCodeAt(i);
-		hash = (hash << 5) - hash + char;
-		hash = hash & hash; // Convert to 32-bit integer
-	}
+  for (let i = 0; i < content.length; i++) {
+    const char = content.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
 
-	return Math.abs(hash).toString(36);
+  return Math.abs(hash).toString(36);
 }
 
 /**
  * Clean expired cache entries
  */
 function cleanExpiredCache(): void {
-	const now = Date.now();
-	for (const [key, entry] of headingCache.entries()) {
-		if (now - entry.timestamp > CACHE_TTL) {
-			headingCache.delete(key);
-		}
-	}
+  const now = Date.now();
+  for (const [key, entry] of headingCache.entries()) {
+    if (now - entry.timestamp > CACHE_TTL) {
+      headingCache.delete(key);
+    }
+  }
 }
 
 /**
  * Ensure cache size doesn't exceed maximum
  */
 function ensureCacheSize(): void {
-	if (headingCache.size > MAX_CACHE_SIZE) {
-		// Remove oldest entries (simple FIFO)
-		const entries = Array.from(headingCache.entries());
-		entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
-
-		const toRemove = entries.slice(0, headingCache.size - MAX_CACHE_SIZE + 1);
-		toRemove.forEach(([key]) => {
-			headingCache.delete(key);
-		});
-	}
+  if (headingCache.size > MAX_CACHE_SIZE) {
+    // Remove oldest entries (simple FIFO)
+    const entries = Array.from(headingCache.entries());
+    entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+
+    const toRemove = entries.slice(0, headingCache.size - MAX_CACHE_SIZE + 1);
+    toRemove.forEach(([key]) => {
+      headingCache.delete(key);
+    });
+  }
 }
 
 /**
  * Generate a URL-friendly slug from text
  */
 export function slugify(text: string): string {
-	return text
-		.toLowerCase()
-		.replace(/[^\w\s-]/g, "") // Remove special characters
-		.replace(/[\s_-]+/g, "-") // Replace spaces and underscores with hyphens
-		.replace(/^-+|-+$/g, ""); // Remove leading/trailing hyphens
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "") // Remove special characters
+    .replace(/[\s_-]+/g, "-") // Replace spaces and underscores with hyphens
+    .replace(/^-+|-+$/g, ""); // Remove leading/trailing hyphens
 }
 
 /**
  * Extract headings from MDX content (with caching)
  */
 export function extractHeadings(content: string): Heading[] {
-	// Generate cache key
-	const cacheKey = generateContentHash(content);
-
-	// Check cache first
-	const cached = headingCache.get(cacheKey);
-	if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
-		return cached.headings;
-	}
-
-	// Extract headings if not in cache or expired
-	const headingRegex = /^(#{1,6})\s+(.+)$/gm;
-	const headings: Heading[] = [];
-
-	for (const match of content.matchAll(headingRegex)) {
-		const level = match[1]?.length ?? 0;
-		const text = match[2]?.trim() ?? "";
-		const id = slugify(text);
-
-		headings.push({
-			id,
-			text,
-			level,
-		});
-	}
-
-	// Cache the result
-	headingCache.set(cacheKey, {
-		headings,
-		timestamp: Date.now(),
-	});
-
-	// Perform cache maintenance
-	cleanExpiredCache();
-	ensureCacheSize();
-
-	return headings;
+  // Generate cache key
+  const cacheKey = generateContentHash(content);
+
+  // Check cache first
+  const cached = headingCache.get(cacheKey);
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.headings;
+  }
+
+  // Extract headings if not in cache or expired
+  const headingRegex = /^(#{1,6})\s+(.+)$/gm;
+  const headings: Heading[] = [];
+
+  for (const match of content.matchAll(headingRegex)) {
+    const level = match[1]?.length ?? 0;
+    const text = match[2]?.trim() ?? "";
+    const id = slugify(text);
+
+    headings.push({
+      id,
+      text,
+      level,
+    });
+  }
+
+  // Cache the result
+  headingCache.set(cacheKey, {
+    headings,
+    timestamp: Date.now(),
+  });
+
+  // Perform cache maintenance
+  cleanExpiredCache();
+  ensureCacheSize();
+
+  return headings;
 }
 
 /**
  * Clear the heading extraction cache
  */
 export function clearHeadingCache(): void {
-	headingCache.clear();
+  headingCache.clear();
 }
 
 /**
  * Get cache statistics (useful for debugging)
  */
 export function getHeadingCacheStats(): {
-	size: number;
-	maxSize: number;
-	ttl: number;
+  size: number;
+  maxSize: number;
+  ttl: number;
 } {
-	return {
-		size: headingCache.size,
-		maxSize: MAX_CACHE_SIZE,
-		ttl: CACHE_TTL,
-	};
+  return {
+    size: headingCache.size,
+    maxSize: MAX_CACHE_SIZE,
+    ttl: CACHE_TTL,
+  };
 }
 
 /**
  * Filter headings by level range (useful for TOC depth control)
  */
 export function filterHeadingsByLevel(headings: Heading[], minLevel = 1, maxLevel = 4): Heading[] {
-	return headings.filter((heading) => heading.level >= minLevel && heading.level <= maxLevel);
+  return headings.filter((heading) => heading.level >= minLevel && heading.level <= maxLevel);
 }
diff --git a/src/lib/utils/format-date.ts b/src/lib/utils/format-date.ts
index 031c0638..e0fe07d7 100644
--- a/src/lib/utils/format-date.ts
+++ b/src/lib/utils/format-date.ts
@@ -4,24 +4,24 @@
  * @returns Formatted date string or empty string for invalid dates
  */
 export function formatDate(date: string | Date | null | undefined): string {
-	if (!date) return "";
+  if (!date) return "";
 
-	try {
-		const dateObj = typeof date === "string" ? new Date(date) : date;
+  try {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
 
-		// Check if date is valid
-		if (Number.isNaN(dateObj.getTime())) {
-			return "";
-		}
+    // Check if date is valid
+    if (Number.isNaN(dateObj.getTime())) {
+      return "";
+    }
 
-		return dateObj.toLocaleDateString("en-US", {
-			month: "long",
-			day: "numeric",
-			year: "numeric",
-		});
-	} catch {
-		return "";
-	}
+    return dateObj.toLocaleDateString("en-US", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return "";
+  }
 }
 
 /**
@@ -30,20 +30,20 @@ export function formatDate(date: string | Date | null | undefined): string {
  * @returns ISO string or empty string for invalid dates
  */
 export function formatDateTimeAttribute(date: string | Date | null | undefined): string {
-	if (!date) return "";
+  if (!date) return "";
 
-	try {
-		const dateObj = typeof date === "string" ? new Date(date) : date;
+  try {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
 
-		// Check if date is valid
-		if (Number.isNaN(dateObj.getTime())) {
-			return "";
-		}
+    // Check if date is valid
+    if (Number.isNaN(dateObj.getTime())) {
+      return "";
+    }
 
-		return dateObj.toISOString();
-	} catch {
-		return "";
-	}
+    return dateObj.toISOString();
+  } catch {
+    return "";
+  }
 }
 
 /**
@@ -52,19 +52,19 @@ export function formatDateTimeAttribute(date: string | Date | null | undefined):
  * @returns Date string in YYYY-MM-DD format or empty string for invalid dates
  */
 export function formatDateForBlog(date: string | Date | null | undefined): string {
-	if (!date) return "";
+  if (!date) return "";
 
-	try {
-		const dateObj = typeof date === "string" ? new Date(date) : date;
+  try {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
 
-		// Check if date is valid
-		if (Number.isNaN(dateObj.getTime())) {
-			return "";
-		}
+    // Check if date is valid
+    if (Number.isNaN(dateObj.getTime())) {
+      return "";
+    }
 
-		const isoString = dateObj.toISOString();
-		return isoString?.split("T")[0] ?? "";
-	} catch {
-		return "";
-	}
+    const isoString = dateObj.toISOString();
+    return isoString?.split("T")[0] ?? "";
+  } catch {
+    return "";
+  }
 }
diff --git a/src/lib/utils/get-schema-defaults.ts b/src/lib/utils/get-schema-defaults.ts
index 607bc0f9..3e4d8c0e 100644
--- a/src/lib/utils/get-schema-defaults.ts
+++ b/src/lib/utils/get-schema-defaults.ts
@@ -3,44 +3,44 @@
  */
 import { z } from "zod";
 export const getSchemaDefaults = <T extends z.ZodTypeAny>(
-	schema: z.AnyZodObject | z.ZodEffects<any>
+  schema: z.AnyZodObject | z.ZodEffects<any>
 ): z.infer<T> => {
-	// Check if it's a ZodEffect
-	if (schema instanceof z.ZodEffects) {
-		// Check if it's a recursive ZodEffect
-		if (schema.innerType() instanceof z.ZodEffects) {
-			return getSchemaDefaults(schema.innerType());
-		}
-		// return schema inner shape as a fresh zodObject
-		return getSchemaDefaults(z.ZodObject.create(schema.innerType().shape));
-	}
+  // Check if it's a ZodEffect
+  if (schema instanceof z.ZodEffects) {
+    // Check if it's a recursive ZodEffect
+    if (schema.innerType() instanceof z.ZodEffects) {
+      return getSchemaDefaults(schema.innerType());
+    }
+    // return schema inner shape as a fresh zodObject
+    return getSchemaDefaults(z.ZodObject.create(schema.innerType().shape));
+  }
 
-	function getDefaultValue(schema: z.ZodTypeAny): unknown {
-		if (schema instanceof z.ZodDefault) {
-			return schema._def.defaultValue();
-		}
-		// return an empty array if it is
-		if (schema instanceof z.ZodArray) {
-			return [];
-		}
-		// return an empty string if it is
-		if (schema instanceof z.ZodString) {
-			return "";
-		}
-		// return an content of object recursivly
-		if (schema instanceof z.ZodObject) {
-			return getSchemaDefaults(schema);
-		}
+  function getDefaultValue(schema: z.ZodTypeAny): unknown {
+    if (schema instanceof z.ZodDefault) {
+      return schema._def.defaultValue();
+    }
+    // return an empty array if it is
+    if (schema instanceof z.ZodArray) {
+      return [];
+    }
+    // return an empty string if it is
+    if (schema instanceof z.ZodString) {
+      return "";
+    }
+    // return an content of object recursivly
+    if (schema instanceof z.ZodObject) {
+      return getSchemaDefaults(schema);
+    }
 
-		if (!("innerType" in schema._def)) {
-			return undefined;
-		}
-		return getDefaultValue(schema._def.innerType);
-	}
+    if (!("innerType" in schema._def)) {
+      return undefined;
+    }
+    return getDefaultValue(schema._def.innerType);
+  }
 
-	return Object.fromEntries(
-		Object.entries(schema.shape).map(([key, value]) => {
-			return [key, getDefaultValue(value as z.ZodTypeAny)];
-		})
-	);
+  return Object.fromEntries(
+    Object.entries(schema.shape).map(([key, value]) => {
+      return [key, getDefaultValue(value as z.ZodTypeAny)];
+    })
+  );
 };
diff --git a/src/lib/utils/is-form-field-required.ts b/src/lib/utils/is-form-field-required.ts
index 9081754b..aa87b3e6 100644
--- a/src/lib/utils/is-form-field-required.ts
+++ b/src/lib/utils/is-form-field-required.ts
@@ -2,6 +2,6 @@ import type { z } from "zod";
 
 // Helper function to check if a field is required
 export const isFormFieldRequired = (schema: z.ZodObject<any>, fieldName: string) => {
-	const fieldSchema = schema.shape[fieldName];
-	return fieldSchema.isOptional?.() === false;
+  const fieldSchema = schema.shape[fieldName];
+  return fieldSchema.isOptional?.() === false;
 };
diff --git a/src/lib/utils/is.ts b/src/lib/utils/is.ts
index 491c611b..7335757e 100644
--- a/src/lib/utils/is.ts
+++ b/src/lib/utils/is.ts
@@ -2,6 +2,6 @@ const isMac = typeof window !== "undefined" && navigator?.platform?.includes("Ma
 const isWindows = typeof window !== "undefined" && navigator?.platform?.includes("Win");
 
 export const is = {
-	mac: () => isMac,
-	windows: () => isWindows,
+  mac: () => isMac,
+  windows: () => isWindows,
 };
diff --git a/src/lib/utils/pico-colors.ts b/src/lib/utils/pico-colors.ts
index e601247b..9e75bf40 100644
--- a/src/lib/utils/pico-colors.ts
+++ b/src/lib/utils/pico-colors.ts
@@ -19,24 +19,24 @@
 const { env, stdout } = globalThis?.process ?? {};
 
 const enabled =
-	env && !env.NO_COLOR && (env.FORCE_COLOR ?? (stdout?.isTTY && !env.CI && env.TERM !== "dumb"));
+  env && !env.NO_COLOR && (env.FORCE_COLOR ?? (stdout?.isTTY && !env.CI && env.TERM !== "dumb"));
 
 const replaceClose = (str: string, close: string, replace: string, index: number): string => {
-	const start = str.substring(0, index) + replace;
-	const end = str.substring(index + close.length);
-	const nextIndex = end.indexOf(close);
-	return ~nextIndex ? start + replaceClose(end, close, replace, nextIndex) : start + end;
+  const start = str.substring(0, index) + replace;
+  const end = str.substring(index + close.length);
+  const nextIndex = end.indexOf(close);
+  return ~nextIndex ? start + replaceClose(end, close, replace, nextIndex) : start + end;
 };
 
 const formatter = (open: string, close: string, replace = open) => {
-	if (!enabled) return String;
-	return (input: string) => {
-		const string = `${input}`;
-		const index = string.indexOf(close, open.length);
-		return ~index
-			? open + replaceClose(string, close, replace, index) + close
-			: open + string + close;
-	};
+  if (!enabled) return String;
+  return (input: string) => {
+    const string = `${input}`;
+    const index = string.indexOf(close, open.length);
+    return ~index
+      ? open + replaceClose(string, close, replace, index) + close
+      : open + string + close;
+  };
 };
 
 export const reset = enabled ? (s: string) => `\x1b[0m${s}\x1b[0m` : String;
diff --git a/src/lib/utils/redirect-with-code.ts b/src/lib/utils/redirect-with-code.ts
index 985f352c..a18f9c90 100644
--- a/src/lib/utils/redirect-with-code.ts
+++ b/src/lib/utils/redirect-with-code.ts
@@ -5,50 +5,50 @@ import { redirect } from "next/navigation";
 import { NextResponse } from "next/server";
 
 interface RedirectWithCodeOptions {
-	code?: string;
-	nextUrl?: string;
+  code?: string;
+  nextUrl?: string;
 }
 
 export const redirectWithCode = (url: string, options?: RedirectWithCodeOptions) => {
-	const { code, nextUrl } = options ?? {};
-	const redirectUrl = new URL(url, BASE_URL);
+  const { code, nextUrl } = options ?? {};
+  const redirectUrl = new URL(url, BASE_URL);
 
-	if (code) {
-		redirectUrl.searchParams.set("code", code);
-	}
+  if (code) {
+    redirectUrl.searchParams.set("code", code);
+  }
 
-	if (nextUrl) {
-		redirectUrl.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, nextUrl);
-	}
+  if (nextUrl) {
+    redirectUrl.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, nextUrl);
+  }
 
-	return redirect(redirectUrl.toString());
+  return redirect(redirectUrl.toString());
 };
 
 export const routeRedirectWithCode = (
-	destination: string,
-	options?: string | { code?: string; nextUrl?: string; request?: Request }
+  destination: string,
+  options?: string | { code?: string; nextUrl?: string; request?: Request }
 ) => {
-	if (!options) {
-		return NextResponse.redirect(destination);
-	}
+  if (!options) {
+    return NextResponse.redirect(destination);
+  }
 
-	let url: URL;
+  let url: URL;
 
-	if (typeof options === "string") {
-		url = new URL(destination);
-		url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options);
-	} else {
-		url = new URL(destination, options.request?.url);
+  if (typeof options === "string") {
+    url = new URL(destination);
+    url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options);
+  } else {
+    url = new URL(destination, options.request?.url);
 
-		if (options?.nextUrl) {
-			url.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, options.nextUrl);
-		}
+    if (options?.nextUrl) {
+      url.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, options.nextUrl);
+    }
 
-		if (options?.code) {
-			url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options.code);
-		}
-	}
+    if (options?.code) {
+      url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options.code);
+    }
+  }
 
-	logger.info(`serverRedirectWithCode: Redirecting to ${url}`);
-	return NextResponse.redirect(url);
+  logger.info(`serverRedirectWithCode: Redirecting to ${url}`);
+  return NextResponse.redirect(url);
 };
diff --git a/src/lib/utils/redirect.ts b/src/lib/utils/redirect.ts
index 3ad448f2..ad917711 100644
--- a/src/lib/utils/redirect.ts
+++ b/src/lib/utils/redirect.ts
@@ -6,70 +6,70 @@ import { SEARCH_PARAM_KEYS } from "../../config/search-param-keys";
 import { logger } from "../logger";
 
 interface RedirectOptions {
-	code?: string;
-	nextUrl?: string;
+  code?: string;
+  nextUrl?: string;
 }
 
 export function createRedirectUrl(pathname: string, options?: RedirectOptions): string {
-	const url = new URL(pathname, BASE_URL);
-	if (options?.code) {
-		url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options.code);
-	}
-	if (options?.nextUrl) {
-		url.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, options.nextUrl);
-	}
-	return url.pathname + url.search;
+  const url = new URL(pathname, BASE_URL);
+  if (options?.code) {
+    url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options.code);
+  }
+  if (options?.nextUrl) {
+    url.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, options.nextUrl);
+  }
+  return url.pathname + url.search;
 }
 
 export function redirect(pathname: string, options?: RedirectOptions) {
-	const url = createRedirectUrl(pathname, options);
-	return nextRedirect(url);
+  const url = createRedirectUrl(pathname, options);
+  return nextRedirect(url);
 }
 
 export function routeRedirect(
-	destination: string,
-	options?: string | { code?: string; nextUrl?: string; request?: Request }
+  destination: string,
+  options?: string | { code?: string; nextUrl?: string; request?: Request }
 ) {
-	if (!options) {
-		return NextResponse.redirect(destination);
-	}
+  if (!options) {
+    return NextResponse.redirect(destination);
+  }
 
-	let url: URL;
+  let url: URL;
 
-	if (typeof options === "string") {
-		url = new URL(destination, BASE_URL);
-		url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options);
-	} else {
-		const baseUrl = options.request?.url || BASE_URL;
-		url = new URL(destination, baseUrl);
+  if (typeof options === "string") {
+    url = new URL(destination, BASE_URL);
+    url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options);
+  } else {
+    const baseUrl = options.request?.url || BASE_URL;
+    url = new URL(destination, baseUrl);
 
-		if (options?.nextUrl) {
-			url.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, options.nextUrl);
-		}
+    if (options?.nextUrl) {
+      url.searchParams.set(SEARCH_PARAM_KEYS.nextUrl, options.nextUrl);
+    }
 
-		if (options?.code) {
-			url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options.code);
-		}
-	}
+    if (options?.code) {
+      url.searchParams.set(SEARCH_PARAM_KEYS.statusCode, options.code);
+    }
+  }
 
-	logger.info(`routeRedirect: Redirecting to ${url}`);
-	return NextResponse.redirect(url);
+  logger.info(`routeRedirect: Redirecting to ${url}`);
+  return NextResponse.redirect(url);
 }
 
 export interface Redirect {
-	source: Route;
-	destination: Route;
-	permanent: boolean;
+  source: Route;
+  destination: Route;
+  permanent: boolean;
 }
 
 export const createRedirects = (
-	sources: Route[],
-	destination: Route,
-	permanent = false
+  sources: Route[],
+  destination: Route,
+  permanent = false
 ): Redirect[] => {
-	if (!sources.length) return [];
+  if (!sources.length) return [];
 
-	return sources
-		.filter((source) => source !== destination)
-		.map((source) => ({ source, destination, permanent }));
+  return sources
+    .filter((source) => source !== destination)
+    .map((source) => ({ source, destination, permanent }));
 };
diff --git a/src/lib/utils/regex-patterns.ts b/src/lib/utils/regex-patterns.ts
index f86e5b7b..ccf80d50 100644
--- a/src/lib/utils/regex-patterns.ts
+++ b/src/lib/utils/regex-patterns.ts
@@ -1,4 +1,4 @@
 export const REGEX_PATTERNS = {
-	phone: /^\+?1?\s*\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/,
-	url: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/i,
+  phone: /^\+?1?\s*\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/,
+  url: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/i,
 };
diff --git a/src/lib/utils/route-utils.ts b/src/lib/utils/route-utils.ts
index fb2e5040..80b2eda4 100644
--- a/src/lib/utils/route-utils.ts
+++ b/src/lib/utils/route-utils.ts
@@ -2,58 +2,58 @@ import { type RouteObject, type RouteParams, routes } from "@/config/routes";
 import type { Route } from "next";
 
 export const getRoutePath = (route: Route | RouteObject, params: RouteParams = {}): Route => {
-	if (typeof route === "string") {
-		return route;
-	}
-
-	let path = route.path;
-	for (const [key, defaultValue] of Object.entries(route.params ?? {})) {
-		const value = Object.prototype.hasOwnProperty.call(params, key) ? params[key] : defaultValue;
-		if (value !== null) {
-			path = path.replace(`:${key}`, String(value));
-		}
-	}
-	return path;
+  if (typeof route === "string") {
+    return route;
+  }
+
+  let path = route.path;
+  for (const [key, defaultValue] of Object.entries(route.params ?? {})) {
+    const value = Object.prototype.hasOwnProperty.call(params, key) ? params[key] : defaultValue;
+    if (value !== null) {
+      path = path.replace(`:${key}`, String(value));
+    }
+  }
+  return path;
 };
 
 type NestedPaths<T, P extends string = ""> = T extends object
-	? {
-			[K in keyof T]: T[K] extends object
-				? NestedPaths<T[K], `${P}${P extends "" ? "" : "."}${K & string}`>
-				: `${P}${P extends "" ? "" : "."}${K & string}`;
-		}[keyof T]
-	: never;
+  ? {
+      [K in keyof T]: T[K] extends object
+        ? NestedPaths<T[K], `${P}${P extends "" ? "" : "."}${K & string}`>
+        : `${P}${P extends "" ? "" : "."}${K & string}`;
+    }[keyof T]
+  : never;
 
 type RoutePath = NestedPaths<typeof routes>;
 
 export const rx = <T extends RoutePath>(
-	path: T,
-	params: T extends keyof typeof routes
-		? (typeof routes)[T] extends RouteObject
-			? Required<(typeof routes)[T]["params"]>
-			: never
-		: // biome-ignore lint/suspicious/noExplicitAny: workaround for type inference
-			RouteParams = {} as any
+  path: T,
+  params: T extends keyof typeof routes
+    ? (typeof routes)[T] extends RouteObject
+      ? Required<(typeof routes)[T]["params"]>
+      : never
+    : // biome-ignore lint/suspicious/noExplicitAny: workaround for type inference
+      RouteParams = {} as any
 ): Route => {
-	const parts = path?.split(".") ?? [];
-	let current: unknown = routes;
-
-	for (const part of parts) {
-		if (
-			current &&
-			typeof current === "object" &&
-			part in current &&
-			current[part as keyof typeof current] !== undefined
-		) {
-			current = current[part as keyof typeof current];
-		} else {
-			throw new Error(`Route not found: ${path}`);
-		}
-	}
-
-	if (current && typeof current === "object" && "index" in current) {
-		return getRoutePath(current.index as RouteObject | string, params);
-	}
-
-	return getRoutePath(current as RouteObject | string, params);
+  const parts = path?.split(".") ?? [];
+  let current: unknown = routes;
+
+  for (const part of parts) {
+    if (
+      current &&
+      typeof current === "object" &&
+      part in current &&
+      current[part as keyof typeof current] !== undefined
+    ) {
+      current = current[part as keyof typeof current];
+    } else {
+      throw new Error(`Route not found: ${path}`);
+    }
+  }
+
+  if (current && typeof current === "object" && "index" in current) {
+    return getRoutePath(current.index as RouteObject | string, params);
+  }
+
+  return getRoutePath(current as RouteObject | string, params);
 };
diff --git a/src/lib/utils/runtime.ts b/src/lib/utils/runtime.ts
index 9e3be930..2217f058 100644
--- a/src/lib/utils/runtime.ts
+++ b/src/lib/utils/runtime.ts
@@ -5,10 +5,10 @@ import { headers } from "next/headers";
  * @returns {boolean} true if in SSR, false if in runtime context
  */
 export const isSSR = () => {
-	try {
-		headers();
-		return false; // If headers() doesn't throw, we're in a runtime context
-	} catch {
-		return true; // If headers() throws, we're in SSR
-	}
+  try {
+    headers();
+    return false; // If headers() doesn't throw, we're in a runtime context
+  } catch {
+    return true; // If headers() throws, we're in SSR
+  }
 };
diff --git a/src/lib/utils/url-utils.ts b/src/lib/utils/url-utils.ts
index 4f72a1e2..155c092f 100644
--- a/src/lib/utils/url-utils.ts
+++ b/src/lib/utils/url-utils.ts
@@ -2,12 +2,12 @@
  * Validate that a URL is properly formatted
  */
 export function validateUrl(url: string): boolean {
-	try {
-		new URL(url);
-		return true;
-	} catch {
-		return false;
-	}
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 /**
diff --git a/src/lib/utils/validated-action.ts b/src/lib/utils/validated-action.ts
index 82e719d5..d88918fc 100644
--- a/src/lib/utils/validated-action.ts
+++ b/src/lib/utils/validated-action.ts
@@ -4,65 +4,65 @@ import type { User } from "next-auth";
 import type { z } from "zod";
 
 export interface ActionState {
-	error?: string;
-	success?: string;
-	// biome-ignore lint/suspicious/noExplicitAny: This allows for additional properties
-	[key: string]: any;
+  error?: string;
+  success?: string;
+  // biome-ignore lint/suspicious/noExplicitAny: This allows for additional properties
+  [key: string]: any;
 }
 
 const parseFormErrors = (errors: z.ZodError) => {
-	const formErrors = Object.entries(errors.formErrors.fieldErrors).reduce(
-		(acc, [key, value]) => {
-			acc[key] = { message: value?.[0] ?? "" };
-			return acc;
-		},
-		{} as Record<string, { message: string }>
-	);
-	return formErrors;
+  const formErrors = Object.entries(errors.formErrors.fieldErrors).reduce(
+    (acc, [key, value]) => {
+      acc[key] = { message: value?.[0] ?? "" };
+      return acc;
+    },
+    {} as Record<string, { message: string }>
+  );
+  return formErrors;
 };
 
 type ValidatedActionFunction<S extends z.ZodType<any, any>, T> = (
-	data: z.infer<S>,
-	formData: FormData
+  data: z.infer<S>,
+  formData: FormData
 ) => Promise<T>;
 
 export function validatedAction<S extends z.ZodType<any, any>, T>(
-	schema: S,
-	action: ValidatedActionFunction<S, T>
+  schema: S,
+  action: ValidatedActionFunction<S, T>
 ) {
-	return async (_prevState: ActionState, formData: FormData): Promise<T> => {
-		const result = schema.safeParse(Object.fromEntries(formData));
-		if (!result?.success) {
-			return { error: parseFormErrors(result.error) } as T;
-		}
+  return async (_prevState: ActionState, formData: FormData): Promise<T> => {
+    const result = schema.safeParse(Object.fromEntries(formData));
+    if (!result?.success) {
+      return { error: parseFormErrors(result.error) } as T;
+    }
 
-		return action(result.data, formData);
-	};
+    return action(result.data, formData);
+  };
 }
 
 type ValidatedActionWithUserFunction<S extends z.ZodType<any, any>, T> = (
-	data: z.infer<S>,
-	formData: FormData,
-	user: User
+  data: z.infer<S>,
+  formData: FormData,
+  user: User
 ) => Promise<T>;
 
 export function validatedActionWithUser<S extends z.ZodType<any, any>, T>(
-	schema: S,
-	action: ValidatedActionWithUserFunction<S, T>
+  schema: S,
+  action: ValidatedActionWithUserFunction<S, T>
 ) {
-	return async (_prevState: ActionState, formData: FormData): Promise<T> => {
-		const session = await auth();
-		if (!session?.user) {
-			throw new Error("User is not authenticated");
-		}
+  return async (_prevState: ActionState, formData: FormData): Promise<T> => {
+    const session = await auth();
+    if (!session?.user) {
+      throw new Error("User is not authenticated");
+    }
 
-		const result = schema.safeParse(Object.fromEntries(formData));
-		if (!result.success) {
-			return { error: result?.error?.errors[0]?.message } as T;
-		}
+    const result = schema.safeParse(Object.fromEntries(formData));
+    if (!result.success) {
+      return { error: result?.error?.errors[0]?.message } as T;
+    }
 
-		return action(result.data, formData, session.user);
-	};
+    return action(result.data, formData, session.user);
+  };
 }
 
 // type ActionWithTeamFunction<T> = (formData: FormData, team: TeamDataWithMembers) => Promise<T>;
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
index 9b9b613d..632d3461 100644
--- a/src/mdx-components.tsx
+++ b/src/mdx-components.tsx
@@ -15,12 +15,12 @@ function filterForMDXComponents(module: Record<string, any>): MDXComponents {
     Object.entries(module).filter(([key, value]) => {
       // Only include valid React component types
       return isValidElementType(value);
-    }),
+    })
   ) as MDXComponents;
 }
 
 const wrapper = ({ children }: { children: ReactNode }) => (
-  <div id="sk-mdx-wrapper" className="prose container mx-auto py-10">
+  <div id="sk-mdx-wrapper" className="container prose mx-auto py-10">
     {children}
   </div>
 );
diff --git a/src/payload-types.ts b/src/payload-types.ts
index 9537eb1c..15260f3f 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -1,3 +1,7 @@
 // Stub — install Payload CMS for full type definitions
-export interface Faq { id: string; question: string; answer: string; }
+export interface Faq {
+  id: string;
+  question: string;
+  answer: string;
+}
 export type Config = Record<string, unknown>;
diff --git a/src/server/actions/auth.ts b/src/server/actions/auth.ts
index 4c832083..4c8b1b9c 100644
--- a/src/server/actions/auth.ts
+++ b/src/server/actions/auth.ts
@@ -7,74 +7,74 @@ import type { UserRole } from "@/types/user";
 import { createServerAction } from "zsa";
 
 interface AuthOptions {
-	redirectTo?: string;
-	redirect?: boolean;
-	protect?: boolean;
-	role?: UserRole;
-	nextUrl?: string;
-	errorCode?: string;
+  redirectTo?: string;
+  redirect?: boolean;
+  protect?: boolean;
+  role?: UserRole;
+  nextUrl?: string;
+  errorCode?: string;
 }
 
 interface SignUpInData {
-	email: string;
-	password: string;
-	redirect?: boolean;
-	redirectTo?: string;
+  email: string;
+  password: string;
+  redirect?: boolean;
+  redirectTo?: string;
 }
 
 export const signInWithOAuthAction = async ({
-	providerId,
-	options,
+  providerId,
+  options,
 }: {
-	providerId: string;
-	options?: AuthOptions;
+  providerId: string;
+  options?: AuthOptions;
 }) => {
-	return await AuthService.signInWithOAuth(providerId, options);
+  return await AuthService.signInWithOAuth(providerId, options);
 };
 
 export const signInAction = createServerAction()
-	.input(signInActionSchema)
-	.handler(async ({ input }) => {
-		await AuthService.signInWithCredentials({
-			email: input.email,
-			password: input.password,
-			redirect: input.redirect,
-			redirectTo: input.redirectTo,
-		});
-		return null;
-	});
+  .input(signInActionSchema)
+  .handler(async ({ input }) => {
+    await AuthService.signInWithCredentials({
+      email: input.email,
+      password: input.password,
+      redirect: input.redirect,
+      redirectTo: input.redirectTo,
+    });
+    return null;
+  });
 
 export const signInWithCredentialsAction = validatedAction(
-	signInActionSchema,
-	async (data: SignUpInData, _formData: FormData) => {
-		await AuthService.signInWithCredentials({
-			email: data.email,
-			password: data.password,
-			redirect: data.redirect,
-			redirectTo: data.redirectTo,
-		});
-	}
+  signInActionSchema,
+  async (data: SignUpInData, _formData: FormData) => {
+    await AuthService.signInWithCredentials({
+      email: data.email,
+      password: data.password,
+      redirect: data.redirect,
+      redirectTo: data.redirectTo,
+    });
+  }
 );
 
 export const signUpWithCredentialsAction = validatedAction(
-	signUpSchema,
-	async (data: SignUpInData) => {
-		return await AuthService.signUpWithCredentials({
-			email: data.email,
-			password: data.password,
-			redirect: data.redirect,
-			redirectTo: data.redirectTo,
-		});
-	}
+  signUpSchema,
+  async (data: SignUpInData) => {
+    return await AuthService.signUpWithCredentials({
+      email: data.email,
+      password: data.password,
+      redirect: data.redirect,
+      redirectTo: data.redirectTo,
+    });
+  }
 );
 
 export const signOutAction = async (options?: AuthOptions) => {
-	return await AuthService.signOut(options);
+  return await AuthService.signOut(options);
 };
 
 // Todo: Implement forgot password
 export const forgotPasswordAction = createServerAction()
-	.input(forgotPasswordSchema)
-	.handler(async ({ input: _input }) => {
-		// return await forgotPassword(input);
-	});
+  .input(forgotPasswordSchema)
+  .handler(async ({ input: _input }) => {
+    // return await forgotPassword(input);
+  });
diff --git a/src/server/actions/settings.ts b/src/server/actions/settings.ts
index b53ae994..38736b31 100644
--- a/src/server/actions/settings.ts
+++ b/src/server/actions/settings.ts
@@ -7,116 +7,116 @@ import { eq } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 
 interface ProfileData {
-	name: string;
-	bio?: string;
-	githubUsername?: string;
-	metadata?: {
-		location?: string;
-		website?: string;
-		company?: string;
-		providers?: {
-			github?: {
-				id: string;
-				email: string;
-				avatar: string;
-			};
-		};
-	};
+  name: string;
+  bio?: string;
+  githubUsername?: string;
+  metadata?: {
+    location?: string;
+    website?: string;
+    company?: string;
+    providers?: {
+      github?: {
+        id: string;
+        email: string;
+        avatar: string;
+      };
+    };
+  };
 }
 
 interface SettingsData {
-	theme: "light" | "dark" | "system";
-	emailNotifications: boolean;
+  theme: "light" | "dark" | "system";
+  emailNotifications: boolean;
 }
 
 export async function updateProfile(data: ProfileData) {
-	try {
-		const session = await auth();
-		if (!session?.user?.id) {
-			return { success: false, error: "Not authenticated" };
-		}
-
-		await db
-			?.update(users)
-			.set({
-				name: data.name,
-				bio: data.bio,
-				githubUsername: data.githubUsername,
-				metadata: data.metadata ? JSON.stringify(data.metadata) : null,
-				updatedAt: new Date(),
-			})
-			.where(eq(users.id, session.user.id));
-
-		void revalidatePath("/settings");
-		return { success: true, message: "Profile updated successfully" };
-	} catch (error) {
-		console.error("Failed to update profile:", error);
-		return { success: false, error: "Failed to update profile" };
-	}
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return { success: false, error: "Not authenticated" };
+    }
+
+    await db
+      ?.update(users)
+      .set({
+        name: data.name,
+        bio: data.bio,
+        githubUsername: data.githubUsername,
+        metadata: data.metadata ? JSON.stringify(data.metadata) : null,
+        updatedAt: new Date(),
+      })
+      .where(eq(users.id, session.user.id));
+
+    void revalidatePath("/settings");
+    return { success: true, message: "Profile updated successfully" };
+  } catch (error) {
+    console.error("Failed to update profile:", error);
+    return { success: false, error: "Failed to update profile" };
+  }
 }
 
 export async function updateSettings(data: SettingsData) {
-	try {
-		const session = await auth();
-		if (!session?.user?.id) {
-			return { success: false, error: "Not authenticated" };
-		}
-
-		// Ensure boolean type
-		const emailNotifications = Boolean(data.emailNotifications);
-
-		await db
-			?.update(users)
-			.set({
-				theme: data.theme,
-				emailNotifications,
-				updatedAt: new Date(),
-			})
-			.where(eq(users.id, session.user.id));
-
-		void revalidatePath("/settings");
-		return { success: true, message: "Settings updated successfully" };
-	} catch (error) {
-		console.error("Failed to update settings:", error);
-		return { success: false, error: "Failed to update settings" };
-	}
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return { success: false, error: "Not authenticated" };
+    }
+
+    // Ensure boolean type
+    const emailNotifications = Boolean(data.emailNotifications);
+
+    await db
+      ?.update(users)
+      .set({
+        theme: data.theme,
+        emailNotifications,
+        updatedAt: new Date(),
+      })
+      .where(eq(users.id, session.user.id));
+
+    void revalidatePath("/settings");
+    return { success: true, message: "Settings updated successfully" };
+  } catch (error) {
+    console.error("Failed to update settings:", error);
+    return { success: false, error: "Failed to update settings" };
+  }
 }
 
 export async function deleteAccount() {
-	try {
-		const session = await auth();
-		if (!session?.user?.id) {
-			return { success: false, error: "Not authenticated" };
-		}
-
-		await db?.delete(users).where(eq(users.id, session.user.id));
-
-		return { success: true, message: "Account deleted successfully" };
-	} catch (error) {
-		console.error("Failed to delete account:", error);
-		return { success: false, error: "Failed to delete account" };
-	}
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return { success: false, error: "Not authenticated" };
+    }
+
+    await db?.delete(users).where(eq(users.id, session.user.id));
+
+    return { success: true, message: "Account deleted successfully" };
+  } catch (error) {
+    console.error("Failed to delete account:", error);
+    return { success: false, error: "Failed to delete account" };
+  }
 }
 
 export async function updateTheme(theme: "light" | "dark" | "system") {
-	try {
-		const session = await auth();
-		if (!session?.user?.id) {
-			return { success: false, error: "Not authenticated" };
-		}
-
-		await db
-			?.update(users)
-			.set({
-				theme,
-				updatedAt: new Date(),
-			})
-			.where(eq(users.id, session.user.id));
-
-		void revalidatePath("/settings");
-		return { success: true, message: "Theme updated successfully" };
-	} catch (error) {
-		console.error("Failed to update theme:", error);
-		return { success: false, error: "Failed to update theme" };
-	}
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return { success: false, error: "Not authenticated" };
+    }
+
+    await db
+      ?.update(users)
+      .set({
+        theme,
+        updatedAt: new Date(),
+      })
+      .where(eq(users.id, session.user.id));
+
+    void revalidatePath("/settings");
+    return { success: true, message: "Theme updated successfully" };
+  } catch (error) {
+    console.error("Failed to update theme:", error);
+    return { success: false, error: "Failed to update theme" };
+  }
 }
diff --git a/src/server/auth.config.ts b/src/server/auth.config.ts
index b82980fa..460d33a6 100644
--- a/src/server/auth.config.ts
+++ b/src/server/auth.config.ts
@@ -4,19 +4,19 @@ import { providers } from "./auth.providers";
 
 // Extend the default session user type
 declare module "next-auth" {
-	interface Session {
-		user: {
-			id: string;
-			name: string | null;
-			email: string | null;
-			image: string | null;
-			bio: string | null;
-			githubUsername: string | null;
-			theme?: "light" | "dark" | "system";
-			emailNotifications?: boolean;
-			emailVerified: Date | null;
-		};
-	}
+  interface Session {
+    user: {
+      id: string;
+      name: string | null;
+      email: string | null;
+      image: string | null;
+      bio: string | null;
+      githubUsername: string | null;
+      theme?: "light" | "dark" | "system";
+      emailNotifications?: boolean;
+      emailVerified: Date | null;
+    };
+  }
 }
 
 /**
@@ -25,104 +25,104 @@ declare module "next-auth" {
  * @see https://next-auth.js.org/configuration/options
  */
 export const authOptions: NextAuthConfig = {
-	debug: process.env.NODE_ENV !== "production",
-	providers,
-	pages: {
-		error: routes.auth.error,
-		signIn: routes.auth.signIn,
-		signOut: routes.auth.signOut,
-	},
-	// session: {
-	// 	strategy: "database",
-	// 	maxAge: 30 * 24 * 60 * 60, // 30 days
-	// 	updateAge: 24 * 60 * 60, // 24 hours
-	// },
-	// cookies: {
-	// 	sessionToken: {
-	// 		name:
-	// 			process.env.NODE_ENV === "production"
-	// 				? "__Secure-next-auth.session-token"
-	// 				: "next-auth.session-token",
-	// 		options: {
-	// 			httpOnly: true,
-	// 			sameSite: "lax",
-	// 			path: "/",
-	// 			secure: process.env.NODE_ENV === "production",
-	// 		},
-	// 	},
-	// },
-	// callbacks: {
-	// 	async signIn({ user, account, profile }) {
-	// 		if (!user.id) return false;
+  debug: process.env.NODE_ENV !== "production",
+  providers,
+  pages: {
+    error: routes.auth.error,
+    signIn: routes.auth.signIn,
+    signOut: routes.auth.signOut,
+  },
+  // session: {
+  // 	strategy: "database",
+  // 	maxAge: 30 * 24 * 60 * 60, // 30 days
+  // 	updateAge: 24 * 60 * 60, // 24 hours
+  // },
+  // cookies: {
+  // 	sessionToken: {
+  // 		name:
+  // 			process.env.NODE_ENV === "production"
+  // 				? "__Secure-next-auth.session-token"
+  // 				: "next-auth.session-token",
+  // 		options: {
+  // 			httpOnly: true,
+  // 			sameSite: "lax",
+  // 			path: "/",
+  // 			secure: process.env.NODE_ENV === "production",
+  // 		},
+  // 	},
+  // },
+  // callbacks: {
+  // 	async signIn({ user, account, profile }) {
+  // 		if (!user.id) return false;
 
-	// 		if (account?.provider === "github-verify") {
-	// 			console.log("github-verify signIn callback", {
-	// 				user,
-	// 				account,
-	// 				profile,
-	// 			});
-	// 			// Store the GitHub username but don't actually sign in
-	// 			// You might want to store this in a temporary session or return it to the client
-	// 			return false; // Prevent actual sign in
-	// 		}
+  // 		if (account?.provider === "github-verify") {
+  // 			console.log("github-verify signIn callback", {
+  // 				user,
+  // 				account,
+  // 				profile,
+  // 			});
+  // 			// Store the GitHub username but don't actually sign in
+  // 			// You might want to store this in a temporary session or return it to the client
+  // 			return false; // Prevent actual sign in
+  // 		}
 
-	// 		console.log("signIn callback", { user, account, profile });
-	// 		// Log the sign in activity
-	// 		return await AuthService.logAuthActivity(
-	// 			user.id,
-	// 			account?.provider ?? "unknown",
-	// 			user.email ?? null,
-	// 		);
-	// 	},
-	// 	jwt({ token, user, account, trigger, session }) {
-	// 		console.log("jwt callback", { token, user, account, trigger, session });
-	// 		// Save user data to the token
-	// 		if (user) {
-	// 			token.id = user.id;
-	// 			token.name = user.name;
-	// 			token.bio = user.bio;
-	// 			token.githubUsername = user.githubUsername;
-	// 			token.theme = user.theme;
-	// 			token.emailNotifications = user.emailNotifications;
-	// 		}
+  // 		console.log("signIn callback", { user, account, profile });
+  // 		// Log the sign in activity
+  // 		return await AuthService.logAuthActivity(
+  // 			user.id,
+  // 			account?.provider ?? "unknown",
+  // 			user.email ?? null,
+  // 		);
+  // 	},
+  // 	jwt({ token, user, account, trigger, session }) {
+  // 		console.log("jwt callback", { token, user, account, trigger, session });
+  // 		// Save user data to the token
+  // 		if (user) {
+  // 			token.id = user.id;
+  // 			token.name = user.name;
+  // 			token.bio = user.bio;
+  // 			token.githubUsername = user.githubUsername;
+  // 			token.theme = user.theme;
+  // 			token.emailNotifications = user.emailNotifications;
+  // 		}
 
-	// 		// Save GitHub access token
-	// 		if (account?.provider === "github") {
-	// 			token.githubAccessToken = account.access_token;
-	// 		}
+  // 		// Save GitHub access token
+  // 		if (account?.provider === "github") {
+  // 			token.githubAccessToken = account.access_token;
+  // 		}
 
-	// 		if ("githubUsername" in session) {
-	// 			token.githubUsername = session.githubUsername;
-	// 		}
+  // 		if ("githubUsername" in session) {
+  // 			token.githubUsername = session.githubUsername;
+  // 		}
 
-	// 		// Handle updates
-	// 		if (trigger === "update" && session) {
-	// 			if (session.theme) token.theme = session.theme;
-	// 			if ("emailNotifications" in session)
-	// 				token.emailNotifications = session.emailNotifications;
-	// 			if ("name" in session) token.name = session.name;
-	// 			if ("bio" in session) token.bio = session.bio;
-	// 			if ("githubUsername" in session)
-	// 				token.githubUsername = session.githubUsername;
-	// 		}
-	// 		return token;
-	// 	},
-	// 	session({ session, token }) {
-	// 		if (token) {
-	// 			session.user.id = token.id as string;
-	// 			session.user.name = token.name as string | null;
-	// 			session.user.bio = token.bio as string | null;
-	// 			session.user.githubUsername = token.githubUsername as string | null;
-	// 			session.user.theme = token.theme as
-	// 				| "light"
-	// 				| "dark"
-	// 				| "system"
-	// 				| undefined;
-	// 			session.user.emailNotifications = token.emailNotifications as
-	// 				| boolean
-	// 				| undefined;
-	// 		}
-	// 		return session;
-	// 	},
-	// },
+  // 		// Handle updates
+  // 		if (trigger === "update" && session) {
+  // 			if (session.theme) token.theme = session.theme;
+  // 			if ("emailNotifications" in session)
+  // 				token.emailNotifications = session.emailNotifications;
+  // 			if ("name" in session) token.name = session.name;
+  // 			if ("bio" in session) token.bio = session.bio;
+  // 			if ("githubUsername" in session)
+  // 				token.githubUsername = session.githubUsername;
+  // 		}
+  // 		return token;
+  // 	},
+  // 	session({ session, token }) {
+  // 		if (token) {
+  // 			session.user.id = token.id as string;
+  // 			session.user.name = token.name as string | null;
+  // 			session.user.bio = token.bio as string | null;
+  // 			session.user.githubUsername = token.githubUsername as string | null;
+  // 			session.user.theme = token.theme as
+  // 				| "light"
+  // 				| "dark"
+  // 				| "system"
+  // 				| undefined;
+  // 			session.user.emailNotifications = token.emailNotifications as
+  // 				| boolean
+  // 				| undefined;
+  // 		}
+  // 		return session;
+  // 	},
+  // },
 } satisfies NextAuthConfig;
diff --git a/src/server/auth.providers.ts b/src/server/auth.providers.ts
index 638a8ba7..8b28a02a 100644
--- a/src/server/auth.providers.ts
+++ b/src/server/auth.providers.ts
@@ -6,65 +6,65 @@ import Google from "next-auth/providers/google";
 import Resend from "next-auth/providers/resend";
 
 export const providers: NextAuthConfig["providers"] = [
-	// Magic Link Provider
-	process.env.AUTH_RESEND_KEY &&
-	process.env.DATABASE_URL &&
-	Resend({
-		from: siteConfig.email.support,
-	}),
-	// Credentials({
-	// 	name: "credentials", // Used by Oauth buttons to determine the active sign-in options
-	// 	credentials: {
-	// 		email: { label: "Email", type: "email" },
-	// 		password: { label: "Password", type: "password" },
-	// 	},
-	// 	async authorize(credentials, request) {
-	// 		// TODO: Implement credentials auth
-	// 		// return await AuthService.validateCredentials(credentials);
-	// 		return null;
-	// 	},
-	// }),
-	Discord({
-		clientId: process.env.AUTH_DISCORD_ID ?? "",
-		clientSecret: process.env.AUTH_DISCORD_SECRET ?? "",
-		allowDangerousEmailAccountLinking: true,
-	}),
-	GitHub({
-		clientId: process.env.AUTH_GITHUB_ID ?? "",
-		clientSecret: process.env.AUTH_GITHUB_SECRET ?? "",
-		authorization: {
-			params: {
-				scope: "read:user user:email repo",
-			},
-		},
-		profile(profile) {
-			return {
-				id: profile.login,
-				name: profile.name ?? profile.login,
-				email: profile.email,
-				emailVerified: null,
-				image: profile.avatar_url,
-				githubUsername: profile.login,
-			};
-		},
-		allowDangerousEmailAccountLinking: true,
-	}),
-	Google({
-		clientId: process.env.AUTH_GOOGLE_ID ?? "",
-		clientSecret: process.env.AUTH_GOOGLE_SECRET ?? "",
-		allowDangerousEmailAccountLinking: true,
-	}),
+  // Magic Link Provider
+  process.env.AUTH_RESEND_KEY &&
+    process.env.DATABASE_URL &&
+    Resend({
+      from: siteConfig.email.support,
+    }),
+  // Credentials({
+  // 	name: "credentials", // Used by Oauth buttons to determine the active sign-in options
+  // 	credentials: {
+  // 		email: { label: "Email", type: "email" },
+  // 		password: { label: "Password", type: "password" },
+  // 	},
+  // 	async authorize(credentials, request) {
+  // 		// TODO: Implement credentials auth
+  // 		// return await AuthService.validateCredentials(credentials);
+  // 		return null;
+  // 	},
+  // }),
+  Discord({
+    clientId: process.env.AUTH_DISCORD_ID ?? "",
+    clientSecret: process.env.AUTH_DISCORD_SECRET ?? "",
+    allowDangerousEmailAccountLinking: true,
+  }),
+  GitHub({
+    clientId: process.env.AUTH_GITHUB_ID ?? "",
+    clientSecret: process.env.AUTH_GITHUB_SECRET ?? "",
+    authorization: {
+      params: {
+        scope: "read:user user:email repo",
+      },
+    },
+    profile(profile) {
+      return {
+        id: profile.login,
+        name: profile.name ?? profile.login,
+        email: profile.email,
+        emailVerified: null,
+        image: profile.avatar_url,
+        githubUsername: profile.login,
+      };
+    },
+    allowDangerousEmailAccountLinking: true,
+  }),
+  Google({
+    clientId: process.env.AUTH_GOOGLE_ID ?? "",
+    clientSecret: process.env.AUTH_GOOGLE_SECRET ?? "",
+    allowDangerousEmailAccountLinking: true,
+  }),
 ].filter(Boolean) as NextAuthConfig["providers"];
 
 export const authProviders = providers.map((provider: NextAuthConfig["providers"][number]) => {
-	if (typeof provider === "function") {
-		const providerData = provider as () => { id: string; name: string };
-		return providerData();
-	}
+  if (typeof provider === "function") {
+    const providerData = provider as () => { id: string; name: string };
+    return providerData();
+  }
 
-	return { id: provider.id, name: provider.name };
+  return { id: provider.id, name: provider.name };
 });
 
 export const authProvidersArray = authProviders.map(
-	(provider) => provider.id ?? provider.name.toLowerCase()
+  (provider) => provider.id ?? provider.name.toLowerCase()
 );
diff --git a/src/server/auth.ts b/src/server/auth.ts
index b919a8f3..51008812 100644
--- a/src/server/auth.ts
+++ b/src/server/auth.ts
@@ -19,36 +19,36 @@ import { cache } from "react";
  */
 
 const {
-	auth: nextAuthAuth,
-	handlers,
-	signIn,
-	signOut,
-	unstable_update: update,
+  auth: nextAuthAuth,
+  handlers,
+  signIn,
+  signOut,
+  unstable_update: update,
 } = NextAuth({
-	...authOptions,
-	secret: env.AUTH_SECRET ?? "supersecretshipkit",
-	adapter:
-		env?.DATABASE_URL && db
-			? DrizzleAdapter(db, {
-				usersTable: users,
-				accountsTable: accounts,
-				sessionsTable: sessions,
-				verificationTokensTable: verificationTokens,
-			})
-			: undefined,
-	logger: {
-		error: (code: Error, ...message: unknown[]) => logger.error(code, message),
-		warn: (code: string, ...message: unknown[]) => logger.warn(code, message),
-		debug: (code: string, ...message: unknown[]) => logger.debug(code, message),
-	},
+  ...authOptions,
+  secret: env.AUTH_SECRET ?? "supersecretshipkit",
+  adapter:
+    env?.DATABASE_URL && db
+      ? DrizzleAdapter(db, {
+          usersTable: users,
+          accountsTable: accounts,
+          sessionsTable: sessions,
+          verificationTokensTable: verificationTokens,
+        })
+      : undefined,
+  logger: {
+    error: (code: Error, ...message: unknown[]) => logger.error(code, message),
+    warn: (code: string, ...message: unknown[]) => logger.warn(code, message),
+    debug: (code: string, ...message: unknown[]) => logger.debug(code, message),
+  },
 });
 interface AuthProps {
-	errorCode?: string;
-	nextUrl?: string;
-	protect?: boolean;
-	redirect?: boolean;
-	redirectTo?: string;
-	role?: UserRole;
+  errorCode?: string;
+  nextUrl?: string;
+  protect?: boolean;
+  redirect?: boolean;
+  redirectTo?: string;
+  role?: UserRole;
 }
 
 /**
@@ -56,35 +56,32 @@ interface AuthProps {
  * @param props - Authentication properties including redirect options
  */
 const authWithOptions = async (props?: AuthProps) => {
-	const session = await nextAuthAuth();
-	const { errorCode, redirect, nextUrl } = props ?? {};
-	const protect =
-		props?.protect ??
-		(props?.redirectTo !== undefined ? true : undefined) ??
-		redirect ??
-		false;
-	const redirectTo = props?.redirectTo ?? routes.auth.signOutIn;
-
-	const handleRedirect = (code: string) => {
-		logger.warn(`[authWithOptions] Redirecting to ${redirectTo} with code ${code}`);
-		return redirectWithCode(redirectTo, { code, nextUrl });
-	};
-
-	// TODO: Handle refresh token error
-	// if (session?.error === "RefreshTokenError") {
-	//   return handleRedirect(STATUS_CODES.AUTH_REFRESH.code);
-	// }
-
-	if (protect && !session?.user?.id) {
-		return handleRedirect(errorCode ?? STATUS_CODES.AUTH.code);
-	}
-
-	// TODO: RBAC
-	// if (role && session?.user?.role !== role) {
-	//   return handleRedirect(errorCode ?? STATUS_CODES.AUTH_ROLE.code); // TODO: We shouldn't sign them out
-	// }
-
-	return session;
+  const session = await nextAuthAuth();
+  const { errorCode, redirect, nextUrl } = props ?? {};
+  const protect =
+    props?.protect ?? (props?.redirectTo !== undefined ? true : undefined) ?? redirect ?? false;
+  const redirectTo = props?.redirectTo ?? routes.auth.signOutIn;
+
+  const handleRedirect = (code: string) => {
+    logger.warn(`[authWithOptions] Redirecting to ${redirectTo} with code ${code}`);
+    return redirectWithCode(redirectTo, { code, nextUrl });
+  };
+
+  // TODO: Handle refresh token error
+  // if (session?.error === "RefreshTokenError") {
+  //   return handleRedirect(STATUS_CODES.AUTH_REFRESH.code);
+  // }
+
+  if (protect && !session?.user?.id) {
+    return handleRedirect(errorCode ?? STATUS_CODES.AUTH.code);
+  }
+
+  // TODO: RBAC
+  // if (role && session?.user?.role !== role) {
+  //   return handleRedirect(errorCode ?? STATUS_CODES.AUTH_ROLE.code); // TODO: We shouldn't sign them out
+  // }
+
+  return session;
 };
 
 const cachedAuth = cache(authWithOptions);
diff --git a/src/server/db/index.ts b/src/server/db/index.ts
index b95ce677..fbf892a8 100644
--- a/src/server/db/index.ts
+++ b/src/server/db/index.ts
@@ -9,7 +9,7 @@ export const db = client ? drizzle(client, { schema }) : undefined;
 
 // Export a function to check if the database is initialized
 export const isDatabaseInitialized = () => {
-	return !!db;
+  return !!db;
 };
 
 /**
@@ -17,18 +17,18 @@ export const isDatabaseInitialized = () => {
  * Returns defaultValue if DATABASE_URL is not set or the operation fails.
  */
 export const safeDbExecute = async <T>(
-	callback: (db: NonNullable<typeof import("./index").db>) => Promise<T>,
-	defaultValue: T
+  callback: (db: NonNullable<typeof import("./index").db>) => Promise<T>,
+  defaultValue: T
 ): Promise<T> => {
-	if (!db) {
-		console.warn("Database not initialized, returning default value");
-		return defaultValue;
-	}
+  if (!db) {
+    console.warn("Database not initialized, returning default value");
+    return defaultValue;
+  }
 
-	try {
-		return await callback(db);
-	} catch (error) {
-		console.error("Database operation failed:", error);
-		return defaultValue;
-	}
+  try {
+    return await callback(db);
+  } catch (error) {
+    console.error("Database operation failed:", error);
+    return defaultValue;
+  }
 };
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index 7529f7d7..82b8768d 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -1,15 +1,15 @@
 import { env } from "@/env";
 import { relations, sql } from "drizzle-orm";
 import {
-	boolean,
-	index,
-	integer,
-	pgTableCreator,
-	primaryKey,
-	serial,
-	text,
-	timestamp,
-	varchar,
+  boolean,
+  index,
+  integer,
+  pgTableCreator,
+  primaryKey,
+  serial,
+  text,
+  timestamp,
+  varchar,
 } from "drizzle-orm/pg-core";
 import type { AdapterAccountType } from "next-auth/adapters";
 
@@ -23,181 +23,181 @@ const createTable = pgTableCreator((name) => `${env?.DB_PREFIX ?? ""}_${name}`);
 
 /* src/db/schema.ts */
 export const plans = createTable("plan", {
-	id: serial("id").primaryKey(),
-	productId: integer("productId").notNull(),
-	productName: text("productName"),
-	variantId: integer("variantId").notNull().unique(),
-	name: text("name").notNull(),
-	description: text("description"),
-	price: text("price").notNull(),
-	isUsageBased: boolean("isUsageBased").default(false),
-	interval: text("interval"),
-	intervalCount: integer("intervalCount"),
-	trialInterval: text("trialInterval"),
-	trialIntervalCount: integer("trialIntervalCount"),
-	sort: integer("sort"),
+  id: serial("id").primaryKey(),
+  productId: integer("productId").notNull(),
+  productName: text("productName"),
+  variantId: integer("variantId").notNull().unique(),
+  name: text("name").notNull(),
+  description: text("description"),
+  price: text("price").notNull(),
+  isUsageBased: boolean("isUsageBased").default(false),
+  interval: text("interval"),
+  intervalCount: integer("intervalCount"),
+  trialInterval: text("trialInterval"),
+  trialIntervalCount: integer("trialIntervalCount"),
+  sort: integer("sort"),
 });
 export type NewPlan = typeof plans.$inferInsert;
 
 export type Plan = typeof plans.$inferSelect;
 
 export const payments = createTable("payment", {
-	id: serial("id").primaryKey(),
-	userId: varchar("userId", { length: 255 }).notNull(),
-	orderId: varchar("orderId", { length: 255 }),
-	amount: integer("amount"),
-	status: varchar("status", { length: 255 }).notNull(),
-	metadata: text("metadata").default("{}"),
-	createdAt: timestamp("created_at", { withTimezone: true })
-		.default(sql`CURRENT_TIMESTAMP`)
-		.notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
+  id: serial("id").primaryKey(),
+  userId: varchar("userId", { length: 255 }).notNull(),
+  orderId: varchar("orderId", { length: 255 }),
+  amount: integer("amount"),
+  status: varchar("status", { length: 255 }).notNull(),
+  metadata: text("metadata").default("{}"),
+  createdAt: timestamp("created_at", { withTimezone: true })
+    .default(sql`CURRENT_TIMESTAMP`)
+    .notNull(),
+  updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
 });
 export type Payment = typeof payments.$inferSelect;
 export type NewPayment = typeof payments.$inferInsert;
 
 export const posts = createTable(
-	"post",
-	{
-		id: serial("id").primaryKey(),
-		name: varchar("name", { length: 256 }),
-		createdById: varchar("createdById", { length: 255 })
-			.notNull()
-			.references(() => users.id),
-		createdAt: timestamp("created_at", { withTimezone: true })
-			.default(sql`CURRENT_TIMESTAMP`)
-			.notNull(),
-		updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
-	},
-	(example) => ({
-		createdByIdIdx: index("createdById_idx").on(example.createdById),
-		nameIndex: index("name_idx").on(example.name),
-	})
+  "post",
+  {
+    id: serial("id").primaryKey(),
+    name: varchar("name", { length: 256 }),
+    createdById: varchar("createdById", { length: 255 })
+      .notNull()
+      .references(() => users.id),
+    createdAt: timestamp("created_at", { withTimezone: true })
+      .default(sql`CURRENT_TIMESTAMP`)
+      .notNull(),
+    updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
+  },
+  (example) => ({
+    createdByIdIdx: index("createdById_idx").on(example.createdById),
+    nameIndex: index("name_idx").on(example.name),
+  })
 );
 
 export type NewPost = typeof posts.$inferInsert;
 export type Post = typeof posts.$inferSelect;
 
 export const users = createTable("user", {
-	id: varchar("id", { length: 255 })
-		.notNull()
-		.primaryKey()
-		.$defaultFn(() => crypto.randomUUID()),
-	name: varchar("name", { length: 255 }),
-	email: varchar("email", { length: 255 }).notNull().unique(),
-	emailVerified: timestamp("email_verified", {
-		mode: "date",
-		withTimezone: true,
-	}).default(sql`CURRENT_TIMESTAMP`),
-	image: varchar("image", { length: 255 }),
-	password: varchar("password", { length: 255 }),
-	githubUsername: varchar("github_username", { length: 255 }),
-	role: varchar("role", { length: 50 }).default("user").notNull(),
-	bio: text("bio"),
-	theme: varchar("theme", { length: 20 }).default("system"),
-	emailNotifications: boolean("email_notifications").default(true),
-	metadata: text("metadata"),
-	createdAt: timestamp("created_at", { withTimezone: true })
-		.default(sql`CURRENT_TIMESTAMP`)
-		.notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
+  id: varchar("id", { length: 255 })
+    .notNull()
+    .primaryKey()
+    .$defaultFn(() => crypto.randomUUID()),
+  name: varchar("name", { length: 255 }),
+  email: varchar("email", { length: 255 }).notNull().unique(),
+  emailVerified: timestamp("email_verified", {
+    mode: "date",
+    withTimezone: true,
+  }).default(sql`CURRENT_TIMESTAMP`),
+  image: varchar("image", { length: 255 }),
+  password: varchar("password", { length: 255 }),
+  githubUsername: varchar("github_username", { length: 255 }),
+  role: varchar("role", { length: 50 }).default("user").notNull(),
+  bio: text("bio"),
+  theme: varchar("theme", { length: 20 }).default("system"),
+  emailNotifications: boolean("email_notifications").default(true),
+  metadata: text("metadata"),
+  createdAt: timestamp("created_at", { withTimezone: true })
+    .default(sql`CURRENT_TIMESTAMP`)
+    .notNull(),
+  updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
 });
 
 export type NewUser = typeof users.$inferInsert;
 export type User = typeof users.$inferSelect;
 
 export const usersRelations = relations(users, ({ many }) => ({
-	accounts: many(accounts),
+  accounts: many(accounts),
 }));
 
 export const accounts = createTable(
-	"account",
-	{
-		userId: text("userId")
-			.notNull()
-			.references(() => users.id, { onDelete: "cascade" }),
-		type: text("type").$type<AdapterAccountType>().notNull(),
-		provider: text("provider").notNull(),
-		providerAccountId: text("providerAccountId").notNull(),
-		refresh_token: text("refresh_token"),
-		access_token: text("access_token"),
-		expires_at: integer("expires_at"),
-		token_type: text("token_type"),
-		scope: text("scope"),
-		id_token: text("id_token"),
-		session_state: text("session_state"),
-	},
-	(account) => ({
-		compoundKey: primaryKey({
-			columns: [account.provider, account.providerAccountId],
-		}),
-		userIdIdx: index("account_user_id_idx").on(account.userId),
-	})
+  "account",
+  {
+    userId: text("userId")
+      .notNull()
+      .references(() => users.id, { onDelete: "cascade" }),
+    type: text("type").$type<AdapterAccountType>().notNull(),
+    provider: text("provider").notNull(),
+    providerAccountId: text("providerAccountId").notNull(),
+    refresh_token: text("refresh_token"),
+    access_token: text("access_token"),
+    expires_at: integer("expires_at"),
+    token_type: text("token_type"),
+    scope: text("scope"),
+    id_token: text("id_token"),
+    session_state: text("session_state"),
+  },
+  (account) => ({
+    compoundKey: primaryKey({
+      columns: [account.provider, account.providerAccountId],
+    }),
+    userIdIdx: index("account_user_id_idx").on(account.userId),
+  })
 );
 
 export const accountsRelations = relations(accounts, ({ one }) => ({
-	user: one(users, { fields: [accounts.userId], references: [users.id] }),
+  user: one(users, { fields: [accounts.userId], references: [users.id] }),
 }));
 
 export const sessions = createTable("session", {
-	sessionToken: text("sessionToken").primaryKey(),
-	userId: text("userId")
-		.notNull()
-		.references(() => users.id, { onDelete: "cascade" }),
-	expires: timestamp("expires", { mode: "date" }).notNull(),
+  sessionToken: text("sessionToken").primaryKey(),
+  userId: text("userId")
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
+  expires: timestamp("expires", { mode: "date" }).notNull(),
 });
 
 export const sessionsRelations = relations(sessions, ({ one }) => ({
-	user: one(users, { fields: [sessions.userId], references: [users.id] }),
+  user: one(users, { fields: [sessions.userId], references: [users.id] }),
 }));
 
 export const verificationTokens = createTable(
-	"verificationToken",
-	{
-		identifier: text("identifier").notNull(),
-		token: text("token").notNull(),
-		expires: timestamp("expires", { mode: "date" }).notNull(),
-	},
-	(verificationToken) => ({
-		compositePk: primaryKey({
-			columns: [verificationToken.identifier, verificationToken.token],
-		}),
-	})
+  "verificationToken",
+  {
+    identifier: text("identifier").notNull(),
+    token: text("token").notNull(),
+    expires: timestamp("expires", { mode: "date" }).notNull(),
+  },
+  (verificationToken) => ({
+    compositePk: primaryKey({
+      columns: [verificationToken.identifier, verificationToken.token],
+    }),
+  })
 );
 
 export const authenticators = createTable(
-	"authenticator",
-	{
-		credentialID: text("credentialID").notNull().unique(),
-		userId: text("userId")
-			.notNull()
-			.references(() => users.id, { onDelete: "cascade" }),
-		providerAccountId: text("providerAccountId").notNull(),
-		credentialPublicKey: text("credentialPublicKey").notNull(),
-		counter: integer("counter").notNull(),
-		credentialDeviceType: text("credentialDeviceType").notNull(),
-		credentialBackedUp: boolean("credentialBackedUp").notNull(),
-		transports: text("transports"),
-	},
-	(authenticator) => ({
-		compositePK: primaryKey({
-			columns: [authenticator.userId, authenticator.credentialID],
-		}),
-	})
+  "authenticator",
+  {
+    credentialID: text("credentialID").notNull().unique(),
+    userId: text("userId")
+      .notNull()
+      .references(() => users.id, { onDelete: "cascade" }),
+    providerAccountId: text("providerAccountId").notNull(),
+    credentialPublicKey: text("credentialPublicKey").notNull(),
+    counter: integer("counter").notNull(),
+    credentialDeviceType: text("credentialDeviceType").notNull(),
+    credentialBackedUp: boolean("credentialBackedUp").notNull(),
+    transports: text("transports"),
+  },
+  (authenticator) => ({
+    compositePK: primaryKey({
+      columns: [authenticator.userId, authenticator.credentialID],
+    }),
+  })
 );
 
 // Feedback
 export const feedback = createTable("feedback", {
-	id: varchar("id", { length: 255 })
-		.notNull()
-		.primaryKey()
-		.$defaultFn(() => crypto.randomUUID()),
-	content: text("content").notNull(),
-	source: varchar("source", { length: 50 }).notNull(),
-	metadata: text("metadata").default("{}"),
-	status: varchar("status", { length: 20 }).notNull().default("new"),
-	createdAt: timestamp("created_at", { withTimezone: true })
-		.default(sql`CURRENT_TIMESTAMP`)
-		.notNull(),
-	updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
+  id: varchar("id", { length: 255 })
+    .notNull()
+    .primaryKey()
+    .$defaultFn(() => crypto.randomUUID()),
+  content: text("content").notNull(),
+  source: varchar("source", { length: 50 }).notNull(),
+  metadata: text("metadata").default("{}"),
+  status: varchar("status", { length: 20 }).notNull().default("new"),
+  createdAt: timestamp("created_at", { withTimezone: true })
+    .default(sql`CURRENT_TIMESTAMP`)
+    .notNull(),
+  updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(() => new Date()),
 });
diff --git a/src/server/services/auth-service.ts b/src/server/services/auth-service.ts
index 5e729cfa..22d4dc45 100644
--- a/src/server/services/auth-service.ts
+++ b/src/server/services/auth-service.ts
@@ -11,26 +11,26 @@ import type { UserRole } from "@/types/user";
 import "server-only";
 
 interface AuthOptions {
-	redirectTo?: string;
-	redirect?: boolean;
-	protect?: boolean;
-	role?: UserRole;
-	nextUrl?: string;
-	errorCode?: string;
+  redirectTo?: string;
+  redirect?: boolean;
+  protect?: boolean;
+  role?: UserRole;
+  nextUrl?: string;
+  errorCode?: string;
 }
 
 // Constants for password hashing
 const SALT_LENGTH = 32;
 const KEY_LENGTH = 64;
 const SCRYPT_OPTIONS = {
-	N: 16384, // CPU/memory cost parameter
-	r: 8, // Block size parameter
-	p: 1, // Parallelization parameter
+  N: 16384, // CPU/memory cost parameter
+  r: 8, // Block size parameter
+  p: 1, // Parallelization parameter
 } as const;
 
 // Promisify scrypt
 const scrypt = promisify<string | Buffer, Buffer, number, crypto.ScryptOptions, Buffer>(
-	crypto.scrypt
+  crypto.scrypt
 );
 
 /**
@@ -39,9 +39,9 @@ const scrypt = promisify<string | Buffer, Buffer, number, crypto.ScryptOptions,
  * @returns A string containing the salt and hash, separated by a colon
  */
 async function hashPassword(password: string): Promise<string> {
-	const salt = crypto.randomBytes(SALT_LENGTH);
-	const derivedKey = await scrypt(password, salt, KEY_LENGTH, SCRYPT_OPTIONS);
-	return `${salt.toString("hex")}:${derivedKey.toString("hex")}`;
+  const salt = crypto.randomBytes(SALT_LENGTH);
+  const derivedKey = await scrypt(password, salt, KEY_LENGTH, SCRYPT_OPTIONS);
+  return `${salt.toString("hex")}:${derivedKey.toString("hex")}`;
 }
 
 /**
@@ -51,175 +51,175 @@ async function hashPassword(password: string): Promise<string> {
  * @returns True if the password matches, false otherwise
  */
 async function verifyPassword(password: string, storedHash: string): Promise<boolean> {
-	try {
-		const parts = storedHash.split(":");
-		if (parts.length !== 2) return false;
-
-		// Explicitly type the parts to ensure they are strings
-		const saltHex: string = parts[0];
-		const hashHex: string = parts[1];
-
-		// Create buffers from the hex strings
-		const salt = Buffer.from(saltHex, "hex");
-		const hash = Buffer.from(hashHex, "hex");
-
-		const derivedKey = await scrypt(password, salt, KEY_LENGTH, SCRYPT_OPTIONS);
-		return crypto.timingSafeEqual(hash, derivedKey);
-	} catch {
-		return false;
-	}
+  try {
+    const parts = storedHash.split(":");
+    if (parts.length !== 2) return false;
+
+    // Explicitly type the parts to ensure they are strings
+    const saltHex: string = parts[0];
+    const hashHex: string = parts[1];
+
+    // Create buffers from the hex strings
+    const salt = Buffer.from(saltHex, "hex");
+    const hash = Buffer.from(hashHex, "hex");
+
+    const derivedKey = await scrypt(password, salt, KEY_LENGTH, SCRYPT_OPTIONS);
+    return crypto.timingSafeEqual(hash, derivedKey);
+  } catch {
+    return false;
+  }
 }
 
 /**
  * Authentication service for handling user authentication and authorization
  */
 export const AuthService = {
-	/**
-	 * Sign in with OAuth provider
-	 */
-	async signInWithOAuth(providerId: string, options?: AuthOptions) {
-		await signIn(
-			providerId,
-			{
-				redirectTo: options?.redirectTo ?? routes.home,
-				...options,
-			},
-			{ prompt: "select_account" }
-		);
-		return { success: STATUS_CODES.LOGIN.message };
-	},
-
-	/**
-	 * Sign in with email and password
-	 */
-	async signInWithCredentials({
-		email,
-		password,
-		redirect = true,
-		redirectTo = routes.home,
-	}: {
-		email: string;
-		password: string;
-		redirect?: boolean;
-		redirectTo?: string;
-	}) {
-		await signIn("credentials", {
-			redirect,
-			redirectTo,
-			email,
-			password,
-		});
-	},
-
-	/**
-	 * Sign up with email and password
-	 */
-	async signUpWithCredentials({
-		email,
-		password,
-		redirect = true,
-		redirectTo = routes.home,
-	}: {
-		email: string;
-		password: string;
-		redirect?: boolean;
-		redirectTo?: string;
-	}) {
-		try {
-			// Check if user already exists
-			const existingUser = await db?.query.users.findFirst({
-				where: (users, { eq }) => eq(users.email, email),
-			});
-
-			if (existingUser) {
-				throw new Error("User already exists with this email");
-			}
-
-			// Hash password using scrypt
-			const hashedPassword = await hashPassword(password);
-
-			// Create new user
-			const newUser = {
-				email,
-				password: hashedPassword,
-				role: "user",
-			};
-
-			const [result] = (await db?.insert(users).values(newUser).returning()) ?? [];
-
-			if (!result) {
-				throw new Error("Failed to create user");
-			}
-
-			// Sign in the user
-			await signIn("credentials", {
-				redirect,
-				redirectTo,
-				email,
-				password,
-			});
-
-			return { success: true };
-		} catch (error) {
-			console.error("Sign up error:", error);
-			throw error;
-		}
-	},
-
-	/**
-	 * Sign out the current user
-	 */
-	async signOut(options?: AuthOptions) {
-		await signOut({
-			redirectTo: `${routes.home}?${SEARCH_PARAM_KEYS.statusCode}=${STATUS_CODES.LOGOUT.code}`,
-			redirect: true,
-			...options,
-		});
-
-		return { success: STATUS_CODES.LOGOUT.message };
-	},
-
-	/**
-	 * Validate user credentials
-	 */
-	async validateCredentials(credentials: unknown) {
-		try {
-			const parsedCredentials = signInSchema.safeParse(credentials);
-
-			if (!parsedCredentials.success) {
-				throw new Error("Invalid credentials");
-			}
-
-			const { email, password } = parsedCredentials.data;
-
-			const user = await db?.query.users.findFirst({
-				where: (users, { eq }) => eq(users.email, email),
-			});
-
-			if (!user?.password) {
-				throw new Error("Invalid credentials");
-			}
-
-			const isValidPassword = await verifyPassword(password, user.password);
-
-			if (!isValidPassword) {
-				throw new Error("Invalid credentials");
-			}
-
-			return {
-				id: user.id,
-				name: user.name,
-				email: user.email,
-				emailVerified: null,
-				image: user.image,
-				bio: user.bio,
-				githubUsername: user.githubUsername,
-				theme: user.theme as "system" | "light" | "dark" | undefined,
-				emailNotifications: user.emailNotifications ?? undefined,
-			};
-		} catch (error) {
-			console.error("Auth error:", error);
-			return null;
-		}
-	},
+  /**
+   * Sign in with OAuth provider
+   */
+  async signInWithOAuth(providerId: string, options?: AuthOptions) {
+    await signIn(
+      providerId,
+      {
+        redirectTo: options?.redirectTo ?? routes.home,
+        ...options,
+      },
+      { prompt: "select_account" }
+    );
+    return { success: STATUS_CODES.LOGIN.message };
+  },
+
+  /**
+   * Sign in with email and password
+   */
+  async signInWithCredentials({
+    email,
+    password,
+    redirect = true,
+    redirectTo = routes.home,
+  }: {
+    email: string;
+    password: string;
+    redirect?: boolean;
+    redirectTo?: string;
+  }) {
+    await signIn("credentials", {
+      redirect,
+      redirectTo,
+      email,
+      password,
+    });
+  },
+
+  /**
+   * Sign up with email and password
+   */
+  async signUpWithCredentials({
+    email,
+    password,
+    redirect = true,
+    redirectTo = routes.home,
+  }: {
+    email: string;
+    password: string;
+    redirect?: boolean;
+    redirectTo?: string;
+  }) {
+    try {
+      // Check if user already exists
+      const existingUser = await db?.query.users.findFirst({
+        where: (users, { eq }) => eq(users.email, email),
+      });
+
+      if (existingUser) {
+        throw new Error("User already exists with this email");
+      }
+
+      // Hash password using scrypt
+      const hashedPassword = await hashPassword(password);
+
+      // Create new user
+      const newUser = {
+        email,
+        password: hashedPassword,
+        role: "user",
+      };
+
+      const [result] = (await db?.insert(users).values(newUser).returning()) ?? [];
+
+      if (!result) {
+        throw new Error("Failed to create user");
+      }
+
+      // Sign in the user
+      await signIn("credentials", {
+        redirect,
+        redirectTo,
+        email,
+        password,
+      });
+
+      return { success: true };
+    } catch (error) {
+      console.error("Sign up error:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Sign out the current user
+   */
+  async signOut(options?: AuthOptions) {
+    await signOut({
+      redirectTo: `${routes.home}?${SEARCH_PARAM_KEYS.statusCode}=${STATUS_CODES.LOGOUT.code}`,
+      redirect: true,
+      ...options,
+    });
+
+    return { success: STATUS_CODES.LOGOUT.message };
+  },
+
+  /**
+   * Validate user credentials
+   */
+  async validateCredentials(credentials: unknown) {
+    try {
+      const parsedCredentials = signInSchema.safeParse(credentials);
+
+      if (!parsedCredentials.success) {
+        throw new Error("Invalid credentials");
+      }
+
+      const { email, password } = parsedCredentials.data;
+
+      const user = await db?.query.users.findFirst({
+        where: (users, { eq }) => eq(users.email, email),
+      });
+
+      if (!user?.password) {
+        throw new Error("Invalid credentials");
+      }
+
+      const isValidPassword = await verifyPassword(password, user.password);
+
+      if (!isValidPassword) {
+        throw new Error("Invalid credentials");
+      }
+
+      return {
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        emailVerified: null,
+        image: user.image,
+        bio: user.bio,
+        githubUsername: user.githubUsername,
+        theme: user.theme as "system" | "light" | "dark" | undefined,
+        emailNotifications: user.emailNotifications ?? undefined,
+      };
+    } catch (error) {
+      console.error("Auth error:", error);
+      return null;
+    }
+  },
 } as const;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 27e989d6..3a69c417 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,11 +1,11 @@
 @import "./shadcn-theme.css";
 
 body {
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 ::selection {
-	color: rgba(255, 255, 255, 0.8);
-	background-color: rgba(255, 20, 188, 0.75);
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 20, 188, 0.75);
 }
diff --git a/src/styles/header.module.css b/src/styles/header.module.css
index e6c74c7a..49078fb7 100644
--- a/src/styles/header.module.css
+++ b/src/styles/header.module.css
@@ -1,33 +1,33 @@
 @keyframes revealHeader {
-	from {
-		opacity: 0;
-		transform: translate3D(0, -50px, 0);
-	}
+  from {
+    opacity: 0;
+    transform: translate3D(0, -50px, 0);
+  }
 
-	to {
-		opacity: 1;
-		transform: translate3D(0, 0px, 0);
-	}
+  to {
+    opacity: 1;
+    transform: translate3D(0, 0px, 0);
+  }
 }
 
 .header {
-	opacity: 0;
-	animation: revealHeader 1s forwards;
-	animation-delay: 3s;
-	will-change: auto;
-	-webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
-	-moz-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
-	-o-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
-	transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
-	box-shadow: inset 0 -1px 0 0 rgba(25, 30, 90, 0);
+  opacity: 0;
+  animation: revealHeader 1s forwards;
+  animation-delay: 3s;
+  will-change: auto;
+  -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
+  -moz-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
+  -o-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
+  box-shadow: inset 0 -1px 0 0 rgba(25, 30, 90, 0);
 }
 
 .opaque {
-	background: var(--background);
-	-webkit-backdrop-filter: saturate(180%) blur(10px);
-	backdrop-filter: saturate(180%) blur(10px);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	perspective: 1000;
-	box-shadow: inset 0 -1px 0 0 rgba(25, 30, 90, 0.06);
+  background: var(--background);
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  backdrop-filter: saturate(180%) blur(10px);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  perspective: 1000;
+  box-shadow: inset 0 -1px 0 0 rgba(25, 30, 90, 0.06);
 }
diff --git a/src/styles/shadcn-theme.css b/src/styles/shadcn-theme.css
index 13270b08..95f89d09 100644
--- a/src/styles/shadcn-theme.css
+++ b/src/styles/shadcn-theme.css
@@ -3,84 +3,84 @@
 @tailwind utilities;
 
 @layer base {
-	:root {
-		--background: 0 0% 100%;
-		--foreground: 0 0% 3.9%;
-		--card: 0 0% 100%;
-		--card-foreground: 0 0% 3.9%;
-		--popover: 0 0% 100%;
-		--popover-foreground: 0 0% 3.9%;
-		--primary: 0 0% 9%;
-		--primary-foreground: 0 0% 98%;
-		--secondary: 0 0% 96.1%;
-		--secondary-foreground: 0 0% 9%;
-		--muted: 0 0% 96.1%;
-		--muted-foreground: 0 0% 45.1%;
-		--accent: 0 0% 96.1%;
-		--accent-foreground: 0 0% 9%;
-		--destructive: 0 84.2% 60.2%;
-		--destructive-foreground: 0 0% 98%;
-		--border: 0 0% 89.8%;
-		--input: 0 0% 89.8%;
-		--ring: 0 0% 3.9%;
-		--radius: 0.25rem;
-		--chart-1: 12 76% 61%;
-		--chart-2: 173 58% 39%;
-		--chart-3: 197 37% 24%;
-		--chart-4: 43 74% 66%;
-		--chart-5: 27 87% 67%;
-		--sidebar-background: 0 0% 98%;
-		--sidebar-foreground: 240 5.3% 26.1%;
-		--sidebar-primary: 240 5.9% 10%;
-		--sidebar-primary-foreground: 0 0% 98%;
-		--sidebar-accent: 240 4.8% 95.9%;
-		--sidebar-accent-foreground: 240 5.9% 10%;
-		--sidebar-border: 220 13% 91%;
-		--sidebar-ring: 217.2 91.2% 59.8%;
-	}
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.25rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
 
-	.dark {
-		--background: 0 0% 3.9%;
-		--foreground: 0 0% 98%;
-		--card: 0 0% 3.9%;
-		--card-foreground: 0 0% 98%;
-		--popover: 0 0% 3.9%;
-		--popover-foreground: 0 0% 98%;
-		--primary: 0 0% 98%;
-		--primary-foreground: 0 0% 9%;
-		--secondary: 0 0% 14.9%;
-		--secondary-foreground: 0 0% 98%;
-		--muted: 0 0% 14.9%;
-		--muted-foreground: 0 0% 63.9%;
-		--accent: 0 0% 14.9%;
-		--accent-foreground: 0 0% 98%;
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 0 0% 98%;
-		--border: 0 0% 14.9%;
-		--input: 0 0% 14.9%;
-		--ring: 0 0% 83.1%;
-		--chart-1: 220 70% 50%;
-		--chart-2: 160 60% 45%;
-		--chart-3: 30 80% 55%;
-		--chart-4: 280 65% 60%;
-		--chart-5: 340 75% 55%;
-		--sidebar-background: 240 5.9% 10%;
-		--sidebar-foreground: 240 4.8% 95.9%;
-		--sidebar-primary: 224.3 76.3% 48%;
-		--sidebar-primary-foreground: 0 0% 100%;
-		--sidebar-accent: 240 3.7% 15.9%;
-		--sidebar-accent-foreground: 240 4.8% 95.9%;
-		--sidebar-border: 240 3.7% 15.9%;
-		--sidebar-ring: 217.2 91.2% 59.8%;
-	}
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
 }
 
 @layer base {
-	* {
-		@apply border-border;
-	}
+  * {
+    @apply border-border;
+  }
 
-	body {
-		@apply bg-background text-foreground;
-	}
+  body {
+    @apply bg-background text-foreground;
+  }
 }
diff --git a/src/types/logger.ts b/src/types/logger.ts
index 837895ac..cc87e79b 100644
--- a/src/types/logger.ts
+++ b/src/types/logger.ts
@@ -5,14 +5,14 @@
 export type LogLevel = "info" | "warn" | "error" | "debug" | "log";
 
 export interface LogData {
-	level: LogLevel;
-	message: string;
-	timestamp: string;
-	url?: string;
-	userAgent?: string;
-	metadata?: Record<string, unknown>;
-	apiKey?: string;
-	prefix?: string;
-	emoji?: string;
-	stackTrace?: string;
+  level: LogLevel;
+  message: string;
+  timestamp: string;
+  url?: string;
+  userAgent?: string;
+  metadata?: Record<string, unknown>;
+  apiKey?: string;
+  prefix?: string;
+  emoji?: string;
+  stackTrace?: string;
 }
diff --git a/src/types/nav.ts b/src/types/nav.ts
index 361f28a9..5c455c93 100644
--- a/src/types/nav.ts
+++ b/src/types/nav.ts
@@ -1,16 +1,16 @@
 import type { Icons } from "@/components/assets/icons";
 
 export interface NavItem {
-	title: string;
-	href?: string;
-	disabled?: boolean;
-	external?: boolean;
-	icon?: keyof typeof Icons;
-	label?: string;
+  title: string;
+  href?: string;
+  disabled?: boolean;
+  external?: boolean;
+  icon?: keyof typeof Icons;
+  label?: string;
 }
 
 export interface NavItemWithChildren extends NavItem {
-	items: NavItemWithChildren[];
+  items: NavItemWithChildren[];
 }
 
 export type MainNavItem = NavItem;
diff --git a/src/types/next-auth.d.ts b/src/types/next-auth.d.ts
index 908de234..70f5d93c 100644
--- a/src/types/next-auth.d.ts
+++ b/src/types/next-auth.d.ts
@@ -2,31 +2,31 @@ import type { UserRole } from "@/types/user";
 import "next-auth";
 
 declare module "next-auth" {
-	interface Session {
-		user: {
-			id: string;
-			name: string | null;
-			email: string;
-			emailVerified: Date | null;
-			image: string | null;
-			role?: UserRole;
-			theme?: "light" | "dark" | "system";
-			emailNotifications?: boolean;
-			bio?: string | null;
-			githubUsername?: string | null;
-		};
-	}
+  interface Session {
+    user: {
+      id: string;
+      name: string | null;
+      email: string;
+      emailVerified: Date | null;
+      image: string | null;
+      role?: UserRole;
+      theme?: "light" | "dark" | "system";
+      emailNotifications?: boolean;
+      bio?: string | null;
+      githubUsername?: string | null;
+    };
+  }
 
-	// interface User {
-	// 	id: string;
-	// 	name: string | null;
-	// 	email: string;
-	// 	emailVerified: Date | null;
-	// 	image: string | null;
-	// 	role?: UserRole;
-	// 	theme?: "light" | "dark" | "system";
-	// 	emailNotifications?: boolean;
-	// 	bio?: string | null;
-	// 	githubUsername?: string | null;
-	// }
+  // interface User {
+  // 	id: string;
+  // 	name: string | null;
+  // 	email: string;
+  // 	emailVerified: Date | null;
+  // 	image: string | null;
+  // 	role?: UserRole;
+  // 	theme?: "light" | "dark" | "system";
+  // 	emailNotifications?: boolean;
+  // 	bio?: string | null;
+  // 	githubUsername?: string | null;
+  // }
 }
diff --git a/src/types/user.ts b/src/types/user.ts
index 494ebbca..99cd7b37 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,5 +1,5 @@
 export const UserRole = {
-	admin: "admin",
-	user: "user",
+  admin: "admin",
+  user: "user",
 } as const;
 export type UserRole = (typeof UserRole)[keyof typeof UserRole];
diff --git a/src/workers/logger-worker.ts b/src/workers/logger-worker.ts
index b1de9575..b794829a 100644
--- a/src/workers/logger-worker.ts
+++ b/src/workers/logger-worker.ts
@@ -3,10 +3,10 @@
 const API_URL = process.env.NEXT_PUBLIC_LOGGER_URL || "https://log.bones.sh/v1";
 
 interface LogData {
-	level: "info" | "warn" | "error";
-	message: string;
-	timestamp: number;
-	metadata?: Record<string, unknown>;
+  level: "info" | "warn" | "error";
+  message: string;
+  timestamp: number;
+  metadata?: Record<string, unknown>;
 }
 
 /**
@@ -20,39 +20,39 @@ const MAX_BATCH_SIZE = 10;
 const FLUSH_INTERVAL = 5000; // 5 seconds
 
 const flushLogs = async (): Promise<void> => {
-	if (logQueue.length === 0) {
-		return;
-	}
-
-	const logsToSend = logQueue.splice(0, MAX_BATCH_SIZE);
-	try {
-		const response = await fetch(API_URL, {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-				Accept: "application/json",
-			},
-			body: JSON.stringify(logsToSend),
-		});
-
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-	} catch (error) {
-		// Re-add failed logs to the front of the queue
-		logQueue.unshift(...logsToSend);
-	}
+  if (logQueue.length === 0) {
+    return;
+  }
+
+  const logsToSend = logQueue.splice(0, MAX_BATCH_SIZE);
+  try {
+    const response = await fetch(API_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(logsToSend),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+  } catch (error) {
+    // Re-add failed logs to the front of the queue
+    logQueue.unshift(...logsToSend);
+  }
 };
 
 // Set up periodic flush
 setInterval(flushLogs, FLUSH_INTERVAL);
 
 self.addEventListener("message", (event: MessageEvent<{ logData: LogData }>) => {
-	const { logData } = event.data;
-	logQueue.push(logData);
+  const { logData } = event.data;
+  logQueue.push(logData);
 
-	// Flush immediately if we've reached batch size
-	if (logQueue.length >= MAX_BATCH_SIZE) {
-		void flushLogs();
-	}
+  // Flush immediately if we've reached batch size
+  if (logQueue.length >= MAX_BATCH_SIZE) {
+    void flushLogs();
+  }
 });
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 66fc1f6b..67b5f11b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,313 +7,307 @@ import { fontFamily } from "tailwindcss/defaultTheme";
 import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
 
 const config = {
-	darkMode: ["class"],
-	content: [
-		"./src/**/*.{js,jsx,ts,tsx,md,mdx}",
-		"./content/**/*.{md,mdx}",
-		"./node_modules/fumadocs-ui/dist/**/*.js",
-		"./mdx-components.tsx",
-	],
-	prefix: "",
-	theme: {
-		extend: {
-			fontFamily: {
-				sans: [
-					'var(--font-sans)',
-					...fontFamily.sans
-				],
-				serif: [
-					'var(--font-serif)',
-					...fontFamily.serif
-				]
-			},
-			borderRadius: {
-				DEFAULT: 'var(--radius)',
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)'
-			},
-			container: {
-				center: true,
-				padding: '2rem',
-				screens: {
-					'2xl': '1400px'
-				}
-			},
-			colors: {
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))'
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))'
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))'
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))'
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))'
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))'
-				},
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))'
-				},
-				chart: {
-					'1': 'hsl(var(--chart-1))',
-					'2': 'hsl(var(--chart-2))',
-					'3': 'hsl(var(--chart-3))',
-					'4': 'hsl(var(--chart-4))',
-					'5': 'hsl(var(--chart-5))'
-				},
-				sidebar: {
-					DEFAULT: 'hsl(var(--sidebar-background))',
-					foreground: 'hsl(var(--sidebar-foreground))',
-					primary: 'hsl(var(--sidebar-primary))',
-					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-					accent: 'hsl(var(--sidebar-accent))',
-					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-					border: 'hsl(var(--sidebar-border))',
-					ring: 'hsl(var(--sidebar-ring))',
-				},
-				'color-1': 'hsl(var(--color-1))',
-				'color-2': 'hsl(var(--color-2))',
-				'color-3': 'hsl(var(--color-3))',
-				'color-4': 'hsl(var(--color-4))',
-				'color-5': 'hsl(var(--color-5))'
-			},
-			keyframes: {
-				'accordion-down': {
-					from: {
-						height: '0'
-					},
-					to: {
-						height: 'var(--radix-accordion-content-height)'
-					}
-				},
-				'accordion-up': {
-					from: {
-						height: 'var(--radix-accordion-content-height)'
-					},
-					to: {
-						height: '0'
-					}
-				},
-				'border-beam': {
-					'100%': {
-						'offset-distance': '100%'
-					}
-				},
-				'shiny-text': {
-					'0%, 90%, 100%': {
-						'background-position': 'calc(-100% - var(--shiny-width)) 0'
-					},
-					'30%, 60%': {
-						'background-position': 'calc(100% + var(--shiny-width)) 0'
-					}
-				},
-				gradient: {
-					to: {
-						backgroundPosition: 'var(--bg-size) 0'
-					}
-				},
-				rainbow: {
-					'0%': {
-						'background-position': '0%'
-					},
-					'100%': {
-						'background-position': '200%'
-					}
-				},
-				'shimmer-slide': {
-					to: {
-						transform: 'translate(calc(100cqw - 100%), 0)'
-					}
-				},
-				'spin-around': {
-					'0%': {
-						transform: 'translateZ(0) rotate(0)'
-					},
-					'15%, 35%': {
-						transform: 'translateZ(0) rotate(90deg)'
-					},
-					'65%, 85%': {
-						transform: 'translateZ(0) rotate(270deg)'
-					},
-					'100%': {
-						transform: 'translateZ(0) rotate(360deg)'
-					}
-				},
-				grid: {
-					'0%': {
-						transform: 'translateY(-50%)'
-					},
-					'100%': {
-						transform: 'translateY(0)'
-					}
-				},
-				meteor: {
-					'0%': {
-						transform: 'rotate(215deg) translateX(0)',
-						opacity: '1'
-					},
-					'70%': {
-						opacity: '1'
-					},
-					'100%': {
-						transform: 'rotate(215deg) translateX(-500px)',
-						opacity: '0'
-					}
-				},
-				'background-position-spin': {
-					'0%': {
-						backgroundPosition: 'top center'
-					},
-					'100%': {
-						backgroundPosition: 'bottom center'
-					}
-				},
-				marquee: {
-					from: {
-						transform: 'translateX(0)'
-					},
-					to: {
-						transform: 'translateX(calc(-100% - var(--gap)))'
-					}
-				},
-				'marquee-vertical': {
-					from: {
-						transform: 'translateY(0)'
-					},
-					to: {
-						transform: 'translateY(calc(-100% - var(--gap)))'
-					}
-				},
-				shine: {
-					from: {
-						backgroundPosition: '200% 0'
-					},
-					to: {
-						backgroundPosition: '-200% 0'
-					}
-				},
-				spotlight: {
-					'0%': {
-						opacity: '0',
-						transform: 'translate(-72%, -62%) scale(0.5)'
-					},
-					'100%': {
-						opacity: '1',
-						transform: 'translate(-50%,-40%) scale(1)'
-					}
-				},
-				'galaxy-shimmer': {
-					'0%': {
-						opacity: '0.0'
-					},
-					'18%': {
-						opacity: '0.2'
-					},
-					'50%': {
-						opacity: '0.1'
-					},
-					'75%': {
-						opacity: '0.35'
-					},
-					'100%': {
-						opacity: '0.0'
-					}
-				},
-				aurora: {
-					from: {
-						backgroundPosition: '50% 50%, 50% 50%'
-					},
-					to: {
-						backgroundPosition: '350% 50%, 350% 50%'
-					}
-				},
-				fadeDown: {
-					'0%': {
-						opacity: '0',
-						transform: 'translateY(-4px)'
-					},
-					'100%': {
-						opacity: '1',
-						transform: 'translateY(0)'
-					}
-				},
-			},
-			animation: {
-				'accordion-down': 'accordion-down 0.2s ease-out',
-				'accordion-up': 'accordion-up 0.2s ease-out',
-				'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
-				'shiny-text': 'shiny-text 8s infinite',
-				gradient: 'gradient 8s linear infinite',
-				rainbow: 'rainbow var(--speed, 2s) infinite linear',
-				'shimmer-slide': 'shimmer-slide var(--speed) ease-in-out infinite alternate',
-				'spin-around': 'spin-around calc(var(--speed) * 2) infinite linear',
-				grid: 'grid 120s linear infinite',
-				meteor: 'meteor 5s linear infinite',
-				'background-position-spin': 'background-position-spin 3000ms infinite alternate',
-				marquee: 'marquee var(--duration) infinite linear',
-				'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
-				shine: 'shine 8s ease-in-out infinite',
-				spotlight: 'spotlight 2s ease .75s 1 forwards',
-				'galaxy-shimmer': 'galaxy-shimmer 20s ease-in-out infinite 3s',
-				aurora: 'aurora 60s linear infinite',
-				fadeDown: 'fadeDown 0.2s ease-out',
-			},
-			spacing: {
-				'2xs': '0.25rem',
-				xs: '0.5rem',
-				sm: '0.75rem',
-				DEFAULT: '1rem',
-				base: '1rem',
-				md: '1.25rem',
-				lg: '1.5rem',
-				xl: '2rem',
-				'2xl': '2.5rem',
-				header: '8rem',
-				section: '4rem',
-				gap: '1rem'
-			},
-			transitionProperty: {
-				width: 'width margin',
-				height: 'height',
-				bg: 'background-color',
-				display: 'display opacity',
-				visibility: 'visibility',
-				padding: 'padding-top padding-right padding-bottom padding-left'
-			}
-		}
-	},
-	plugins: [typography, tailwindcssAnimate, addVariablesForColors],
+  darkMode: ["class"],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx,md,mdx}",
+    "./content/**/*.{md,mdx}",
+    "./node_modules/fumadocs-ui/dist/**/*.js",
+    "./mdx-components.tsx",
+  ],
+  prefix: "",
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        serif: ["var(--font-serif)", ...fontFamily.serif],
+      },
+      borderRadius: {
+        DEFAULT: "var(--radius)",
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      container: {
+        center: true,
+        padding: "2rem",
+        screens: {
+          "2xl": "1400px",
+        },
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+        "color-1": "hsl(var(--color-1))",
+        "color-2": "hsl(var(--color-2))",
+        "color-3": "hsl(var(--color-3))",
+        "color-4": "hsl(var(--color-4))",
+        "color-5": "hsl(var(--color-5))",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+        "border-beam": {
+          "100%": {
+            "offset-distance": "100%",
+          },
+        },
+        "shiny-text": {
+          "0%, 90%, 100%": {
+            "background-position": "calc(-100% - var(--shiny-width)) 0",
+          },
+          "30%, 60%": {
+            "background-position": "calc(100% + var(--shiny-width)) 0",
+          },
+        },
+        gradient: {
+          to: {
+            backgroundPosition: "var(--bg-size) 0",
+          },
+        },
+        rainbow: {
+          "0%": {
+            "background-position": "0%",
+          },
+          "100%": {
+            "background-position": "200%",
+          },
+        },
+        "shimmer-slide": {
+          to: {
+            transform: "translate(calc(100cqw - 100%), 0)",
+          },
+        },
+        "spin-around": {
+          "0%": {
+            transform: "translateZ(0) rotate(0)",
+          },
+          "15%, 35%": {
+            transform: "translateZ(0) rotate(90deg)",
+          },
+          "65%, 85%": {
+            transform: "translateZ(0) rotate(270deg)",
+          },
+          "100%": {
+            transform: "translateZ(0) rotate(360deg)",
+          },
+        },
+        grid: {
+          "0%": {
+            transform: "translateY(-50%)",
+          },
+          "100%": {
+            transform: "translateY(0)",
+          },
+        },
+        meteor: {
+          "0%": {
+            transform: "rotate(215deg) translateX(0)",
+            opacity: "1",
+          },
+          "70%": {
+            opacity: "1",
+          },
+          "100%": {
+            transform: "rotate(215deg) translateX(-500px)",
+            opacity: "0",
+          },
+        },
+        "background-position-spin": {
+          "0%": {
+            backgroundPosition: "top center",
+          },
+          "100%": {
+            backgroundPosition: "bottom center",
+          },
+        },
+        marquee: {
+          from: {
+            transform: "translateX(0)",
+          },
+          to: {
+            transform: "translateX(calc(-100% - var(--gap)))",
+          },
+        },
+        "marquee-vertical": {
+          from: {
+            transform: "translateY(0)",
+          },
+          to: {
+            transform: "translateY(calc(-100% - var(--gap)))",
+          },
+        },
+        shine: {
+          from: {
+            backgroundPosition: "200% 0",
+          },
+          to: {
+            backgroundPosition: "-200% 0",
+          },
+        },
+        spotlight: {
+          "0%": {
+            opacity: "0",
+            transform: "translate(-72%, -62%) scale(0.5)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translate(-50%,-40%) scale(1)",
+          },
+        },
+        "galaxy-shimmer": {
+          "0%": {
+            opacity: "0.0",
+          },
+          "18%": {
+            opacity: "0.2",
+          },
+          "50%": {
+            opacity: "0.1",
+          },
+          "75%": {
+            opacity: "0.35",
+          },
+          "100%": {
+            opacity: "0.0",
+          },
+        },
+        aurora: {
+          from: {
+            backgroundPosition: "50% 50%, 50% 50%",
+          },
+          to: {
+            backgroundPosition: "350% 50%, 350% 50%",
+          },
+        },
+        fadeDown: {
+          "0%": {
+            opacity: "0",
+            transform: "translateY(-4px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateY(0)",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
+        "shiny-text": "shiny-text 8s infinite",
+        gradient: "gradient 8s linear infinite",
+        rainbow: "rainbow var(--speed, 2s) infinite linear",
+        "shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate",
+        "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
+        grid: "grid 120s linear infinite",
+        meteor: "meteor 5s linear infinite",
+        "background-position-spin": "background-position-spin 3000ms infinite alternate",
+        marquee: "marquee var(--duration) infinite linear",
+        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
+        shine: "shine 8s ease-in-out infinite",
+        spotlight: "spotlight 2s ease .75s 1 forwards",
+        "galaxy-shimmer": "galaxy-shimmer 20s ease-in-out infinite 3s",
+        aurora: "aurora 60s linear infinite",
+        fadeDown: "fadeDown 0.2s ease-out",
+      },
+      spacing: {
+        "2xs": "0.25rem",
+        xs: "0.5rem",
+        sm: "0.75rem",
+        DEFAULT: "1rem",
+        base: "1rem",
+        md: "1.25rem",
+        lg: "1.5rem",
+        xl: "2rem",
+        "2xl": "2.5rem",
+        header: "8rem",
+        section: "4rem",
+        gap: "1rem",
+      },
+      transitionProperty: {
+        width: "width margin",
+        height: "height",
+        bg: "background-color",
+        display: "display opacity",
+        visibility: "visibility",
+        padding: "padding-top padding-right padding-bottom padding-left",
+      },
+    },
+  },
+  plugins: [typography, tailwindcssAnimate, addVariablesForColors],
 } satisfies Config;
 
 export default config;
 // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
 function addVariablesForColors({ addBase, theme }: any) {
-	const allColors = flattenColorPalette(theme("colors"));
-	const newVars = Object.fromEntries(
-		Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
-	);
+  const allColors = flattenColorPalette(theme("colors"));
+  const newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
 
-	addBase({
-		":root": newVars,
-	});
+  addBase({
+    ":root": newVars,
+  });
 }
diff --git a/tests/node/api/health-contact.test.ts b/tests/node/api/health-contact.test.ts
index 4b3837a3..00b78764 100644
--- a/tests/node/api/health-contact.test.ts
+++ b/tests/node/api/health-contact.test.ts
@@ -4,150 +4,150 @@ import { GET } from "@/app/(app)/api/health/contact/route";
 const HEALTH_URL = "https://example.com/api/health/contact";
 
 const makeRequest = (init?: { token?: string; query?: string }) =>
-	new Request(`${HEALTH_URL}${init?.query ?? ""}`, {
-		headers: init?.token ? { "x-healthcheck-token": init.token } : undefined,
-	});
+  new Request(`${HEALTH_URL}${init?.query ?? ""}`, {
+    headers: init?.token ? { "x-healthcheck-token": init.token } : undefined,
+  });
 
 const mockResendResponse = (status: number) =>
-	vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("{}", { status }));
+  vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("{}", { status }));
 
 describe("GET /api/health/contact", () => {
-	const originalEnv = { ...process.env };
-
-	beforeEach(() => {
-		delete process.env.HEALTHCHECK_TOKEN;
-		process.env.RESEND_API_KEY = "re_test_key";
-	});
-
-	afterEach(() => {
-		process.env = { ...originalEnv };
-		vi.restoreAllMocks();
-	});
-
-	it("returns 200 with all checks passing when Resend accepts the key", async () => {
-		const fetchSpy = mockResendResponse(200);
-
-		const res = await GET(makeRequest());
-		const body = await res.json();
-
-		expect(res.status).toBe(200);
-		expect(body.ok).toBe(true);
-		expect(body.checks.every((c: { ok: boolean }) => c.ok)).toBe(true);
-		expect(res.headers.get("cache-control")).toContain("no-store");
-		expect(fetchSpy).toHaveBeenCalledWith(
-			"https://api.resend.com/domains",
-			expect.objectContaining({
-				headers: { Authorization: "Bearer re_test_key" },
-			})
-		);
-	});
-
-	it("returns 503 when RESEND_API_KEY is not set", async () => {
-		delete process.env.RESEND_API_KEY;
-
-		const res = await GET(makeRequest());
-		const body = await res.json();
-
-		expect(res.status).toBe(503);
-		expect(body.ok).toBe(false);
-		const keyCheck = body.checks.find((c: { name: string }) => c.name === "resend_api_key");
-		expect(keyCheck.ok).toBe(false);
-	});
-
-	it("returns 503 when Resend rejects the key", async () => {
-		mockResendResponse(401);
-
-		const res = await GET(makeRequest());
-		const body = await res.json();
-
-		expect(res.status).toBe(503);
-		expect(body.ok).toBe(false);
-	});
-
-	it("returns 200 for a valid sending-only (restricted) key", async () => {
-		// Resend rejects /domains for send-only keys with name "restricted_api_key",
-		// but such a key is valid for sending — the form is healthy.
-		vi.spyOn(globalThis, "fetch").mockResolvedValue(
-			new Response(
-				JSON.stringify({
-					statusCode: 401,
-					message: "This API key is restricted to only send emails",
-					name: "restricted_api_key",
-				}),
-				{ status: 401 }
-			)
-		);
-
-		const res = await GET(makeRequest());
-		const body = await res.json();
-
-		expect(res.status).toBe(200);
-		expect(body.ok).toBe(true);
-	});
-
-	it("returns 503 for an invalid key (Resend HTTP 400)", async () => {
-		vi.spyOn(globalThis, "fetch").mockResolvedValue(
-			new Response(
-				JSON.stringify({
-					statusCode: 400,
-					message: "API key is invalid",
-					name: "validation_error",
-				}),
-				{ status: 400 }
-			)
-		);
-
-		const res = await GET(makeRequest());
-		const body = await res.json();
-
-		expect(res.status).toBe(503);
-		expect(body.ok).toBe(false);
-	});
-
-	it("returns 503 when the Resend request throws", async () => {
-		vi.spyOn(globalThis, "fetch").mockRejectedValue(new Error("network down"));
-
-		const res = await GET(makeRequest());
-
-		expect(res.status).toBe(503);
-	});
-
-	it("verifies siteConfig support and noreply emails are configured", async () => {
-		mockResendResponse(200);
-
-		const res = await GET(makeRequest());
-		const body = await res.json();
-
-		const names = body.checks.map((c: { name: string }) => c.name);
-		expect(names).toContain("support_email");
-		expect(names).toContain("noreply_email");
-	});
-
-	describe("HEALTHCHECK_TOKEN gate", () => {
-		beforeEach(() => {
-			process.env.HEALTHCHECK_TOKEN = "s3cret";
-		});
-
-		it("rejects requests without the token", async () => {
-			const res = await GET(makeRequest());
-			expect(res.status).toBe(401);
-		});
-
-		it("accepts the token via header", async () => {
-			mockResendResponse(200);
-			const res = await GET(makeRequest({ token: "s3cret" }));
-			expect(res.status).toBe(200);
-		});
-
-		it("accepts the token via query param", async () => {
-			mockResendResponse(200);
-			const res = await GET(makeRequest({ query: "?token=s3cret" }));
-			expect(res.status).toBe(200);
-		});
-
-		it("rejects a wrong token", async () => {
-			const res = await GET(makeRequest({ token: "wrong" }));
-			expect(res.status).toBe(401);
-		});
-	});
+  const originalEnv = { ...process.env };
+
+  beforeEach(() => {
+    delete process.env.HEALTHCHECK_TOKEN;
+    process.env.RESEND_API_KEY = "re_test_key";
+  });
+
+  afterEach(() => {
+    process.env = { ...originalEnv };
+    vi.restoreAllMocks();
+  });
+
+  it("returns 200 with all checks passing when Resend accepts the key", async () => {
+    const fetchSpy = mockResendResponse(200);
+
+    const res = await GET(makeRequest());
+    const body = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(body.ok).toBe(true);
+    expect(body.checks.every((c: { ok: boolean }) => c.ok)).toBe(true);
+    expect(res.headers.get("cache-control")).toContain("no-store");
+    expect(fetchSpy).toHaveBeenCalledWith(
+      "https://api.resend.com/domains",
+      expect.objectContaining({
+        headers: { Authorization: "Bearer re_test_key" },
+      })
+    );
+  });
+
+  it("returns 503 when RESEND_API_KEY is not set", async () => {
+    delete process.env.RESEND_API_KEY;
+
+    const res = await GET(makeRequest());
+    const body = await res.json();
+
+    expect(res.status).toBe(503);
+    expect(body.ok).toBe(false);
+    const keyCheck = body.checks.find((c: { name: string }) => c.name === "resend_api_key");
+    expect(keyCheck.ok).toBe(false);
+  });
+
+  it("returns 503 when Resend rejects the key", async () => {
+    mockResendResponse(401);
+
+    const res = await GET(makeRequest());
+    const body = await res.json();
+
+    expect(res.status).toBe(503);
+    expect(body.ok).toBe(false);
+  });
+
+  it("returns 200 for a valid sending-only (restricted) key", async () => {
+    // Resend rejects /domains for send-only keys with name "restricted_api_key",
+    // but such a key is valid for sending — the form is healthy.
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          statusCode: 401,
+          message: "This API key is restricted to only send emails",
+          name: "restricted_api_key",
+        }),
+        { status: 401 }
+      )
+    );
+
+    const res = await GET(makeRequest());
+    const body = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(body.ok).toBe(true);
+  });
+
+  it("returns 503 for an invalid key (Resend HTTP 400)", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          statusCode: 400,
+          message: "API key is invalid",
+          name: "validation_error",
+        }),
+        { status: 400 }
+      )
+    );
+
+    const res = await GET(makeRequest());
+    const body = await res.json();
+
+    expect(res.status).toBe(503);
+    expect(body.ok).toBe(false);
+  });
+
+  it("returns 503 when the Resend request throws", async () => {
+    vi.spyOn(globalThis, "fetch").mockRejectedValue(new Error("network down"));
+
+    const res = await GET(makeRequest());
+
+    expect(res.status).toBe(503);
+  });
+
+  it("verifies siteConfig support and noreply emails are configured", async () => {
+    mockResendResponse(200);
+
+    const res = await GET(makeRequest());
+    const body = await res.json();
+
+    const names = body.checks.map((c: { name: string }) => c.name);
+    expect(names).toContain("support_email");
+    expect(names).toContain("noreply_email");
+  });
+
+  describe("HEALTHCHECK_TOKEN gate", () => {
+    beforeEach(() => {
+      process.env.HEALTHCHECK_TOKEN = "s3cret";
+    });
+
+    it("rejects requests without the token", async () => {
+      const res = await GET(makeRequest());
+      expect(res.status).toBe(401);
+    });
+
+    it("accepts the token via header", async () => {
+      mockResendResponse(200);
+      const res = await GET(makeRequest({ token: "s3cret" }));
+      expect(res.status).toBe(200);
+    });
+
+    it("accepts the token via query param", async () => {
+      mockResendResponse(200);
+      const res = await GET(makeRequest({ query: "?token=s3cret" }));
+      expect(res.status).toBe(200);
+    });
+
+    it("rejects a wrong token", async () => {
+      const res = await GET(makeRequest({ token: "wrong" }));
+      expect(res.status).toBe(401);
+    });
+  });
 });
diff --git a/tests/node/app/no-loading-above-not-found.test.ts b/tests/node/app/no-loading-above-not-found.test.ts
index 074aca53..17b7a598 100644
--- a/tests/node/app/no-loading-above-not-found.test.ts
+++ b/tests/node/app/no-loading-above-not-found.test.ts
@@ -24,45 +24,46 @@ const APP_DIR = join(process.cwd(), "src", "app");
 const LOADING_FILES = ["loading.tsx", "loading.ts", "loading.jsx", "loading.js"];
 
 function walk(dir: string, out: string[] = []): string[] {
-	for (const name of readdirSync(dir)) {
-		const full = join(dir, name);
-		if (statSync(full).isDirectory()) walk(full, out);
-		else if (/^page\.tsx?$/.test(name)) out.push(full);
-	}
-	return out;
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name);
+    if (statSync(full).isDirectory()) walk(full, out);
+    else if (/^page\.tsx?$/.test(name)) out.push(full);
+  }
+  return out;
 }
 
 const callsNotFound = (file: string) => /\bnotFound\(\)/.test(readFileSync(file, "utf8"));
 
 const loadingFilesIn = (dir: string) =>
-	LOADING_FILES.map((f) => join(dir, f)).filter((f) => existsSync(f));
+  LOADING_FILES.map((f) => join(dir, f)).filter((f) => existsSync(f));
 
 const notFoundPages = walk(APP_DIR).filter(callsNotFound);
 
 describe("no loading.tsx above a page that calls notFound()", () => {
-	it("finds at least one page that can 404 (sanity)", () => {
-		expect(notFoundPages.length).toBeGreaterThan(0);
-	});
+  it("finds at least one page that can 404 (sanity)", () => {
+    expect(notFoundPages.length).toBeGreaterThan(0);
+  });
 
-	it.each(
-		notFoundPages.map((file) => [relative(APP_DIR, file), file])
-	)("%s: loading files above it cannot commit a 200 first", (_label, file) => {
-		const pageDir = dirname(file);
-		const offenders: string[] = [];
+  it.each(notFoundPages.map((file) => [relative(APP_DIR, file), file]))(
+    "%s: loading files above it cannot commit a 200 first",
+    (_label, file) => {
+      const pageDir = dirname(file);
+      const offenders: string[] = [];
 
-		// Own folder: allowed only if a sibling layout settles the 404 first.
-		const layout = join(pageDir, "layout.tsx");
-		const layoutSettles404 = existsSync(layout) && callsNotFound(layout);
-		if (!layoutSettles404) offenders.push(...loadingFilesIn(pageDir));
+      // Own folder: allowed only if a sibling layout settles the 404 first.
+      const layout = join(pageDir, "layout.tsx");
+      const layoutSettles404 = existsSync(layout) && callsNotFound(layout);
+      if (!layoutSettles404) offenders.push(...loadingFilesIn(pageDir));
 
-		// Ancestors: never allowed.
-		let dir = dirname(pageDir);
-		while (dir.startsWith(APP_DIR)) {
-			offenders.push(...loadingFilesIn(dir));
-			if (dir === APP_DIR) break;
-			dir = dirname(dir);
-		}
+      // Ancestors: never allowed.
+      let dir = dirname(pageDir);
+      while (dir.startsWith(APP_DIR)) {
+        offenders.push(...loadingFilesIn(dir));
+        if (dir === APP_DIR) break;
+        dir = dirname(dir);
+      }
 
-		expect(offenders.map((f) => relative(APP_DIR, f))).toEqual([]);
-	});
+      expect(offenders.map((f) => relative(APP_DIR, f))).toEqual([]);
+    }
+  );
 });
diff --git a/tests/node/lib/changelog.test.ts b/tests/node/lib/changelog.test.ts
index e9701b34..7048e6ff 100644
--- a/tests/node/lib/changelog.test.ts
+++ b/tests/node/lib/changelog.test.ts
@@ -1,9 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
-	getChangelogEntries,
-	getChangelogEntry,
-	isLegacyUnreleasedSlug,
-	UNRELEASED_SLUG,
+  getChangelogEntries,
+  getChangelogEntry,
+  isLegacyUnreleasedSlug,
+  UNRELEASED_SLUG,
 } from "@/lib/changelog";
 
 // unstable_cache needs a Next request scope. Pass the function through and
@@ -11,26 +11,26 @@ import {
 // (tests/setup.ts clears mock call history, so mock.calls is not usable.)
 const cache = vi.hoisted(() => ({ fn: null as null | (() => Promise<unknown>) }));
 vi.mock("next/cache", () => ({
-	unstable_cache: (fn: () => Promise<unknown>) => {
-		cache.fn = fn;
-		return fn;
-	},
+  unstable_cache: (fn: () => Promise<unknown>) => {
+    cache.fn = fn;
+    return fn;
+  },
 }));
 
 interface Commit {
-	sha: string;
-	commit: { message: string; author: { date: string; name: string } };
+  sha: string;
+  commit: { message: string; author: { date: string; name: string } };
 }
 
 const commit = (sha: string, date: string, message: string): Commit => ({
-	sha,
-	commit: { message, author: { date, name: "dev" } },
+  sha,
+  commit: { message, author: { date, name: "dev" } },
 });
 
 // Newest first, as the GitHub API returns them.
 const TAGGED = [
-	commit("c2", "2026-06-30T03:21:07Z", "fix: tagged release"),
-	commit("c1", "2026-06-01T10:00:00Z", "chore: first"),
+  commit("c2", "2026-06-30T03:21:07Z", "fix: tagged release"),
+  commit("c1", "2026-06-01T10:00:00Z", "chore: first"),
 ];
 const TAGS = [{ name: "v1.0.0", commit: { sha: "c2" } }];
 
@@ -39,78 +39,78 @@ const BEFORE_MERGE = [commit("c3", "2026-09-02T18:14:12Z", "feat: three"), ...TA
 const AFTER_MERGE = [commit("c4", "2026-09-12T18:10:37Z", "fix: four"), ...BEFORE_MERGE];
 
 const mockGitHub = (commits: Commit[], tags = TAGS) =>
-	vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
-		const url = String(input);
-		if (url.includes("/commits?")) return Response.json(commits);
-		if (url.includes("/tags?")) return Response.json(tags);
-		throw new Error(`unexpected fetch: ${url}`);
-	});
+  vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+    const url = String(input);
+    if (url.includes("/commits?")) return Response.json(commits);
+    if (url.includes("/tags?")) return Response.json(tags);
+    throw new Error(`unexpected fetch: ${url}`);
+  });
 
 describe("changelog slugs", () => {
-	beforeEach(() => {
-		vi.spyOn(console, "error").mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		vi.restoreAllMocks();
-	});
-
-	it("every slug listed by getChangelogEntries resolves via getChangelogEntry", async () => {
-		mockGitHub(BEFORE_MERGE);
-		const entries = await getChangelogEntries();
-		expect(entries.length).toBeGreaterThan(1);
-
-		for (const entry of entries) {
-			const found = await getChangelogEntry(entry.slug);
-			expect(found?.slug, `slug "${entry.slug}" from the list must resolve`).toBe(entry.slug);
-		}
-	});
-
-	it("keeps the unreleased slug stable when a new commit lands on main", async () => {
-		const fetchSpy = mockGitHub(BEFORE_MERGE);
-		const before = (await getChangelogEntries()).find((e) => !e.badge);
-
-		fetchSpy.mockRestore();
-		mockGitHub(AFTER_MERGE);
-		const after = await getChangelogEntry(before!.slug);
-
-		expect(before?.slug).toBe(UNRELEASED_SLUG);
-		expect(after?.slug).toBe(UNRELEASED_SLUG);
-		expect(after?.commitCount).toBe(before!.commitCount + 1);
-		expect(after?.publishedAt).toBe("2026-09-12");
-	});
-
-	it("derives release slugs from the tag name", async () => {
-		mockGitHub(BEFORE_MERGE);
-		const release = await getChangelogEntry("v1.0.0");
-		expect(release?.badge).toBe("v1.0.0");
-		expect(release?.commitCount).toBe(2);
-	});
-
-	it("uses the unreleased slug for the whole history when there are no tags", async () => {
-		mockGitHub(BEFORE_MERGE, []);
-		const entries = await getChangelogEntries();
-		expect(entries.map((e) => e.slug)).toEqual([UNRELEASED_SLUG]);
-		expect(entries[0]?.commitCount).toBe(3);
-	});
-
-	it("returns null for an unknown slug", async () => {
-		mockGitHub(BEFORE_MERGE);
-		expect(await getChangelogEntry("nope-xyz")).toBeNull();
-	});
-
-	it("recognises the old date-based slugs so they can redirect", () => {
-		expect(isLegacyUnreleasedSlug("updates-2026-09-02")).toBe(true);
-		expect(isLegacyUnreleasedSlug(UNRELEASED_SLUG)).toBe(false);
-		expect(isLegacyUnreleasedSlug("v1.7.6")).toBe(false);
-	});
-
-	it("does not hand a GitHub failure to the cache", async () => {
-		vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("rate limited", { status: 403 }));
-
-		// The unit inside unstable_cache must reject, so the failure is not
-		// stored for an hour; the public getter still degrades to an empty list.
-		await expect(cache.fn!()).rejects.toThrow(/GitHub API 403/);
-		expect(await getChangelogEntries()).toEqual([]);
-	});
+  beforeEach(() => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("every slug listed by getChangelogEntries resolves via getChangelogEntry", async () => {
+    mockGitHub(BEFORE_MERGE);
+    const entries = await getChangelogEntries();
+    expect(entries.length).toBeGreaterThan(1);
+
+    for (const entry of entries) {
+      const found = await getChangelogEntry(entry.slug);
+      expect(found?.slug, `slug "${entry.slug}" from the list must resolve`).toBe(entry.slug);
+    }
+  });
+
+  it("keeps the unreleased slug stable when a new commit lands on main", async () => {
+    const fetchSpy = mockGitHub(BEFORE_MERGE);
+    const before = (await getChangelogEntries()).find((e) => !e.badge);
+
+    fetchSpy.mockRestore();
+    mockGitHub(AFTER_MERGE);
+    const after = await getChangelogEntry(before!.slug);
+
+    expect(before?.slug).toBe(UNRELEASED_SLUG);
+    expect(after?.slug).toBe(UNRELEASED_SLUG);
+    expect(after?.commitCount).toBe(before!.commitCount + 1);
+    expect(after?.publishedAt).toBe("2026-09-12");
+  });
+
+  it("derives release slugs from the tag name", async () => {
+    mockGitHub(BEFORE_MERGE);
+    const release = await getChangelogEntry("v1.0.0");
+    expect(release?.badge).toBe("v1.0.0");
+    expect(release?.commitCount).toBe(2);
+  });
+
+  it("uses the unreleased slug for the whole history when there are no tags", async () => {
+    mockGitHub(BEFORE_MERGE, []);
+    const entries = await getChangelogEntries();
+    expect(entries.map((e) => e.slug)).toEqual([UNRELEASED_SLUG]);
+    expect(entries[0]?.commitCount).toBe(3);
+  });
+
+  it("returns null for an unknown slug", async () => {
+    mockGitHub(BEFORE_MERGE);
+    expect(await getChangelogEntry("nope-xyz")).toBeNull();
+  });
+
+  it("recognises the old date-based slugs so they can redirect", () => {
+    expect(isLegacyUnreleasedSlug("updates-2026-09-02")).toBe(true);
+    expect(isLegacyUnreleasedSlug(UNRELEASED_SLUG)).toBe(false);
+    expect(isLegacyUnreleasedSlug("v1.7.6")).toBe(false);
+  });
+
+  it("does not hand a GitHub failure to the cache", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("rate limited", { status: 403 }));
+
+    // The unit inside unstable_cache must reject, so the failure is not
+    // stored for an hour; the public getter still degrades to an empty list.
+    await expect(cache.fn!()).rejects.toThrow(/GitHub API 403/);
+    expect(await getChangelogEntries()).toEqual([]);
+  });
 });
diff --git a/tests/setup-env.ts b/tests/setup-env.ts
index a5858065..110b9c9e 100644
--- a/tests/setup-env.ts
+++ b/tests/setup-env.ts
@@ -3,50 +3,50 @@
 
 // Set test-specific environment variables
 process.env = {
-	...process.env,
-	NODE_ENV: "test",
-	SKIP_ENV_VALIDATION: "1",
+  ...process.env,
+  NODE_ENV: "test",
+  SKIP_ENV_VALIDATION: "1",
 };
 
 // Only load Next.js environment config in Node.js environment
 // Browser environments already have environment variables processed at build time
 if (typeof window === "undefined") {
-	try {
-		// Dynamic import to avoid browser compatibility issues
-		import("@next/env")
-			.then(({ loadEnvConfig }) => {
-				loadEnvConfig(process.cwd());
-			})
-			.catch((error) => {
-				console.warn("Error loading environment variables:", error);
-			});
+  try {
+    // Dynamic import to avoid browser compatibility issues
+    import("@next/env")
+      .then(({ loadEnvConfig }) => {
+        loadEnvConfig(process.cwd());
+      })
+      .catch((error) => {
+        console.warn("Error loading environment variables:", error);
+      });
 
-		// Patch next-auth test runtime when Next.js module pathing differs
-		// Some versions expect next/server; in Vitest we can noop this
-		try {
-			// eslint-disable-next-line @typescript-eslint/no-var-requires
-			require.resolve("next/server");
-		} catch {
-			// Map bare import "next/server" to our JS shim so next-auth/env can import it safely
-			// eslint-disable-next-line @typescript-eslint/no-var-requires
-			const Module = require("module");
-			// eslint-disable-next-line @typescript-eslint/no-var-requires
-			const path = require("path");
-			const originalResolve = Module._resolveFilename;
-			const shimPath = path.resolve(__dirname, "./shims/next-server.js");
-			Module._resolveFilename = function (
-				request: string,
-				parent: unknown,
-				isMain: boolean,
-				options: any
-			) {
-				if (request === "next/server") {
-					return shimPath;
-				}
-				return originalResolve.call(this, request, parent, isMain, options);
-			} as any;
-		}
-	} catch (error) {
-		console.warn("Error importing @next/env:", error);
-	}
+    // Patch next-auth test runtime when Next.js module pathing differs
+    // Some versions expect next/server; in Vitest we can noop this
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require.resolve("next/server");
+    } catch {
+      // Map bare import "next/server" to our JS shim so next-auth/env can import it safely
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const Module = require("module");
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const path = require("path");
+      const originalResolve = Module._resolveFilename;
+      const shimPath = path.resolve(__dirname, "./shims/next-server.js");
+      Module._resolveFilename = function (
+        request: string,
+        parent: unknown,
+        isMain: boolean,
+        options: any
+      ) {
+        if (request === "next/server") {
+          return shimPath;
+        }
+        return originalResolve.call(this, request, parent, isMain, options);
+      } as any;
+    }
+  } catch (error) {
+    console.warn("Error importing @next/env:", error);
+  }
 }
diff --git a/tests/setup.ts b/tests/setup.ts
index 13c96326..4fbc277d 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -5,8 +5,8 @@ import { afterEach, beforeAll, expect, vi } from "vitest";
 
 // Augment the global namespace for TypeScript
 declare global {
-	// biome-ignore lint/suspicious/noVar: global augmentation requires var
-	var IS_REACT_ACT_ENVIRONMENT: boolean;
+  // biome-ignore lint/suspicious/noVar: global augmentation requires var
+  var IS_REACT_ACT_ENVIRONMENT: boolean;
 }
 
 // Set React testing environment
@@ -17,31 +17,31 @@ expect.extend(matchers);
 
 // Cleanup after each test case
 afterEach(() => {
-	cleanup();
-	vi.clearAllMocks();
+  cleanup();
+  vi.clearAllMocks();
 });
 
 // Mock database module only if needed for specific tests
 // This allows tests to run without a database connection
 vi.mock("@/server/db", () => ({
-	db: undefined,
-	isDatabaseInitialized: async () => false,
-	safeDbExecute: async (callback: Function, defaultValue: any) => defaultValue,
+  db: undefined,
+  isDatabaseInitialized: async () => false,
+  safeDbExecute: async (callback: Function, defaultValue: any) => defaultValue,
 }));
 
 // Suppress specific console errors during tests
 beforeAll(async () => {
-	const originalError = console.error;
-	console.error = (...args: unknown[]) => {
-		if (
-			typeof args[0] === "string" &&
-			(args[0].includes("Warning: ReactDOM.render is no longer supported") ||
-				args[0].includes("Invariant: AsyncLocalStorage accessed in runtime"))
-		) {
-			return;
-		}
-		originalError.call(console, ...args);
-	};
+  const originalError = console.error;
+  console.error = (...args: unknown[]) => {
+    if (
+      typeof args[0] === "string" &&
+      (args[0].includes("Warning: ReactDOM.render is no longer supported") ||
+        args[0].includes("Invariant: AsyncLocalStorage accessed in runtime"))
+    ) {
+      return;
+    }
+    originalError.call(console, ...args);
+  };
 });
 
 /*
@@ -49,18 +49,18 @@ beforeAll(async () => {
  * This is needed for components that use useRouter
  */
 vi.mock("next/navigation", () => ({
-	useRouter: () => ({
-		push: vi.fn(),
-		replace: vi.fn(),
-		prefetch: vi.fn(),
-		back: vi.fn(),
-		forward: vi.fn(),
-		refresh: vi.fn(),
-		pathname: "/",
-		query: {},
-	}),
-	usePathname: () => "/",
-	useSearchParams: () => new URLSearchParams(),
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+    pathname: "/",
+    query: {},
+  }),
+  usePathname: () => "/",
+  useSearchParams: () => new URLSearchParams(),
 }));
 
 /*
@@ -68,6 +68,6 @@ vi.mock("next/navigation", () => ({
  * This is needed for components that use next/image
  */
 vi.mock("next/image", () => ({
-	__esModule: true,
-	default: vi.fn().mockImplementation(() => null),
+  __esModule: true,
+  default: vi.fn().mockImplementation(() => null),
 }));
diff --git a/tests/shims/next-server.js b/tests/shims/next-server.js
index c2367edb..6de6099d 100644
--- a/tests/shims/next-server.js
+++ b/tests/shims/next-server.js
@@ -1,13 +1,13 @@
 // Minimal CommonJS shim for next/server to satisfy next-auth/env during unit tests
 class NextRequest {}
 const NextResponse = {
-	json: (body, init) => ({ body, init }),
-	redirect: (url) => ({ url }),
+  json: (body, init) => ({ body, init }),
+  redirect: (url) => ({ url }),
 };
 function headers() {
-	return new Headers();
+  return new Headers();
 }
 function cookies() {
-	return { get: () => undefined };
+  return { get: () => undefined };
 }
 module.exports = { NextRequest, NextResponse, headers, cookies };
diff --git a/tests/shims/next-server.ts b/tests/shims/next-server.ts
index 633fc4f7..5a555e9e 100644
--- a/tests/shims/next-server.ts
+++ b/tests/shims/next-server.ts
@@ -4,16 +4,16 @@
 export class NextRequest {}
 
 export const NextResponse = {
-	json: (body?: unknown, init?: unknown) => ({ body, init }),
-	redirect: (url: string) => ({ url }),
+  json: (body?: unknown, init?: unknown) => ({ body, init }),
+  redirect: (url: string) => ({ url }),
 };
 
 export function headers(): Headers {
-	return new Headers();
+  return new Headers();
 }
 
 export function cookies(): { get: (name: string) => undefined } {
-	return { get: () => undefined };
+  return { get: () => undefined };
 }
 
 // Also provide CommonJS compatibility for require() from next-auth/env
diff --git a/tests/unit/components/animated-popover-escape.test.tsx b/tests/unit/components/animated-popover-escape.test.tsx
index e1c163f0..d06e6630 100644
--- a/tests/unit/components/animated-popover-escape.test.tsx
+++ b/tests/unit/components/animated-popover-escape.test.tsx
@@ -2,10 +2,10 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { KeyboardShortcutProvider } from "@/components/providers/keyboard-shortcut-provider";
 import {
-	PopoverContent,
-	PopoverRoot,
-	PopoverTextarea,
-	PopoverTrigger,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTextarea,
+  PopoverTrigger,
 } from "@/components/ui/cults/animated-popover";
 
 /**
@@ -25,48 +25,48 @@ import {
  */
 
 function press(target: Element | Document, key: string): boolean {
-	const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true });
-	target.dispatchEvent(event);
-	return event.defaultPrevented;
+  const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true });
+  target.dispatchEvent(event);
+  return event.defaultPrevented;
 }
 
 function renderPopover() {
-	render(
-		<KeyboardShortcutProvider>
-			<PopoverRoot>
-				<PopoverTrigger>Note</PopoverTrigger>
-				<PopoverContent>
-					<PopoverTextarea />
-				</PopoverContent>
-			</PopoverRoot>
-		</KeyboardShortcutProvider>
-	);
+  render(
+    <KeyboardShortcutProvider>
+      <PopoverRoot>
+        <PopoverTrigger>Note</PopoverTrigger>
+        <PopoverContent>
+          <PopoverTextarea />
+        </PopoverContent>
+      </PopoverRoot>
+    </KeyboardShortcutProvider>
+  );
 }
 
 function open() {
-	renderPopover();
-	fireEvent.click(screen.getByText("Note"));
-	return screen.getByRole("textbox");
+  renderPopover();
+  fireEvent.click(screen.getByText("Note"));
+  return screen.getByRole("textbox");
 }
 
 describe("popover Escape", () => {
-	it("is consumed when pressed inside the text field", () => {
-		const textarea = open();
-		expect(press(textarea, "Escape")).toBe(true);
-	});
+  it("is consumed when pressed inside the text field", () => {
+    const textarea = open();
+    expect(press(textarea, "Escape")).toBe(true);
+  });
 
-	it("is consumed when pressed with focus elsewhere", () => {
-		open();
-		expect(press(document.documentElement, "Escape")).toBe(true);
-	});
+  it("is consumed when pressed with focus elsewhere", () => {
+    open();
+    expect(press(document.documentElement, "Escape")).toBe(true);
+  });
 
-	it("is left alone while the popover is closed", () => {
-		renderPopover();
-		expect(press(document.documentElement, "Escape")).toBe(false);
-	});
+  it("is left alone while the popover is closed", () => {
+    renderPopover();
+    expect(press(document.documentElement, "Escape")).toBe(false);
+  });
 
-	it("leaves other keys in the field alone", () => {
-		const textarea = open();
-		expect(press(textarea, "a")).toBe(false);
-	});
+  it("leaves other keys in the field alone", () => {
+    const textarea = open();
+    expect(press(textarea, "a")).toBe(false);
+  });
 });
diff --git a/tests/unit/components/keyboard-shortcut-provider.test.tsx b/tests/unit/components/keyboard-shortcut-provider.test.tsx
index 081afe5d..fc3c8ff1 100644
--- a/tests/unit/components/keyboard-shortcut-provider.test.tsx
+++ b/tests/unit/components/keyboard-shortcut-provider.test.tsx
@@ -15,41 +15,41 @@ import { KeyboardShortcutProvider } from "@/components/providers/keyboard-shortc
  */
 
 function press(key: string, init: Partial<KeyboardEventInit> = {}): KeyboardEvent {
-	const event = new KeyboardEvent("keydown", {
-		key,
-		bubbles: true,
-		cancelable: true,
-		...init,
-	});
-	document.documentElement.dispatchEvent(event);
-	return event;
+  const event = new KeyboardEvent("keydown", {
+    key,
+    bubbles: true,
+    cancelable: true,
+    ...init,
+  });
+  document.documentElement.dispatchEvent(event);
+  return event;
 }
 
 describe("KeyboardShortcutProvider", () => {
-	it("leaves Escape to whatever is open", () => {
-		render(
-			<KeyboardShortcutProvider>
-				<div />
-			</KeyboardShortcutProvider>
-		);
-		expect(press("Escape").defaultPrevented).toBe(false);
-	});
+  it("leaves Escape to whatever is open", () => {
+    render(
+      <KeyboardShortcutProvider>
+        <div />
+      </KeyboardShortcutProvider>
+    );
+    expect(press("Escape").defaultPrevented).toBe(false);
+  });
 
-	it("swallows a key the app owns outright", () => {
-		render(
-			<KeyboardShortcutProvider>
-				<div />
-			</KeyboardShortcutProvider>
-		);
-		expect(press("K", { metaKey: true }).defaultPrevented).toBe(true);
-	});
+  it("swallows a key the app owns outright", () => {
+    render(
+      <KeyboardShortcutProvider>
+        <div />
+      </KeyboardShortcutProvider>
+    );
+    expect(press("K", { metaKey: true }).defaultPrevented).toBe(true);
+  });
 
-	it("ignores a key it does not bind", () => {
-		render(
-			<KeyboardShortcutProvider>
-				<div />
-			</KeyboardShortcutProvider>
-		);
-		expect(press("Q", { metaKey: true }).defaultPrevented).toBe(false);
-	});
+  it("ignores a key it does not bind", () => {
+    render(
+      <KeyboardShortcutProvider>
+        <div />
+      </KeyboardShortcutProvider>
+    );
+    expect(press("Q", { metaKey: true }).defaultPrevented).toBe(false);
+  });
 });
diff --git a/tests/unit/config/keyboard-shortcuts.test.ts b/tests/unit/config/keyboard-shortcuts.test.ts
index 4abea47f..ca986e17 100644
--- a/tests/unit/config/keyboard-shortcuts.test.ts
+++ b/tests/unit/config/keyboard-shortcuts.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from "vitest";
 import {
-	formatShortcut,
-	getShortcutDisplay,
-	ON_DEMAND_ACTIONS,
-	ShortcutAction,
-	shortcutConfig,
-	shortcutLabel,
+  formatShortcut,
+  getShortcutDisplay,
+  ON_DEMAND_ACTIONS,
+  ShortcutAction,
+  shortcutConfig,
+  shortcutLabel,
 } from "@/config/keyboard-shortcuts";
 
 /**
@@ -18,102 +18,102 @@ import {
  */
 
 describe("formatShortcut", () => {
-	it("prints Mac modifiers in the platform's order", () => {
-		expect(formatShortcut("mod+shift+S", true)).toBe("⇧⌘S");
-		expect(formatShortcut("mod+K", true)).toBe("⌘K");
-		expect(formatShortcut("ctrl+alt+shift+mod+P", true)).toBe("⌃⌥⇧⌘P");
-	});
-
-	it("spells modifiers out elsewhere, with mod meaning Ctrl", () => {
-		expect(formatShortcut("mod+shift+S", false)).toBe("Ctrl+Shift+S");
-		expect(formatShortcut("mod+K", false)).toBe("Ctrl+K");
-	});
-
-	it("capitalizes a named key and leaves a single character alone", () => {
-		expect(formatShortcut("Escape", true)).toBe("Escape");
-		expect(formatShortcut("mod+enter", true)).toBe("⌘Enter");
-		expect(formatShortcut("/", true)).toBe("/");
-	});
+  it("prints Mac modifiers in the platform's order", () => {
+    expect(formatShortcut("mod+shift+S", true)).toBe("⇧⌘S");
+    expect(formatShortcut("mod+K", true)).toBe("⌘K");
+    expect(formatShortcut("ctrl+alt+shift+mod+P", true)).toBe("⌃⌥⇧⌘P");
+  });
+
+  it("spells modifiers out elsewhere, with mod meaning Ctrl", () => {
+    expect(formatShortcut("mod+shift+S", false)).toBe("Ctrl+Shift+S");
+    expect(formatShortcut("mod+K", false)).toBe("Ctrl+K");
+  });
+
+  it("capitalizes a named key and leaves a single character alone", () => {
+    expect(formatShortcut("Escape", true)).toBe("Escape");
+    expect(formatShortcut("mod+enter", true)).toBe("⌘Enter");
+    expect(formatShortcut("/", true)).toBe("/");
+  });
 });
 
 describe("shortcutLabel", () => {
-	it("resolves the keys the user menu shows", () => {
-		expect(shortcutLabel(ShortcutAction.GOTO_ADMIN, true)).toBe("⇧⌘A");
-		expect(shortcutLabel(ShortcutAction.GOTO_SETTINGS, true)).toBe("⇧⌘S");
-		expect(shortcutLabel(ShortcutAction.SET_THEME_LIGHT, true)).toBe("⇧⌘L");
-		expect(shortcutLabel(ShortcutAction.SET_THEME_DARK, true)).toBe("⇧⌘D");
-		expect(shortcutLabel(ShortcutAction.SET_THEME_SYSTEM, true)).toBe("⇧⌘Y");
-		expect(shortcutLabel(ShortcutAction.LOGOUT_USER, true)).toBe("⇧⌘X");
-	});
-
-	it("shows the search key the header advertises", () => {
-		expect(shortcutLabel(ShortcutAction.OPEN_SEARCH, true)).toBe("⌘K");
-		expect(shortcutLabel(ShortcutAction.OPEN_SEARCH, false)).toBe("Ctrl+K");
-	});
-
-	it("gives every configured action a label on both platforms", () => {
-		for (const [, action] of shortcutConfig) {
-			expect(shortcutLabel(action, true)).toBeTruthy();
-			expect(shortcutLabel(action, false)).toBeTruthy();
-		}
-	});
+  it("resolves the keys the user menu shows", () => {
+    expect(shortcutLabel(ShortcutAction.GOTO_ADMIN, true)).toBe("⇧⌘A");
+    expect(shortcutLabel(ShortcutAction.GOTO_SETTINGS, true)).toBe("⇧⌘S");
+    expect(shortcutLabel(ShortcutAction.SET_THEME_LIGHT, true)).toBe("⇧⌘L");
+    expect(shortcutLabel(ShortcutAction.SET_THEME_DARK, true)).toBe("⇧⌘D");
+    expect(shortcutLabel(ShortcutAction.SET_THEME_SYSTEM, true)).toBe("⇧⌘Y");
+    expect(shortcutLabel(ShortcutAction.LOGOUT_USER, true)).toBe("⇧⌘X");
+  });
+
+  it("shows the search key the header advertises", () => {
+    expect(shortcutLabel(ShortcutAction.OPEN_SEARCH, true)).toBe("⌘K");
+    expect(shortcutLabel(ShortcutAction.OPEN_SEARCH, false)).toBe("Ctrl+K");
+  });
+
+  it("gives every configured action a label on both platforms", () => {
+    for (const [, action] of shortcutConfig) {
+      expect(shortcutLabel(action, true)).toBeTruthy();
+      expect(shortcutLabel(action, false)).toBeTruthy();
+    }
+  });
 });
 
 describe("shortcutConfig", () => {
-	it("binds every action in the map to a key", () => {
-		for (const action of Object.values(ShortcutAction)) {
-			expect(getShortcutDisplay(action)).not.toBeNull();
-		}
-	});
-
-	it("binds no key twice", () => {
-		const keys = shortcutConfig.map(([hotkey]) => hotkey.toLowerCase());
-		expect(new Set(keys).size).toBe(keys.length);
-	});
-
-	/**
-	 * A bare character key belongs to whatever owns a text field on the page,
-	 * not to the app, so "/" for search is the only one allowed. A named key is
-	 * a different matter: Escape types nothing, and its binding neither swallows
-	 * the press nor claims a handler that is always there.
-	 */
-	it("gives no single character an unmodified binding but the search slash", () => {
-		const bare = shortcutConfig
-			.filter(([hotkey]) => !hotkey.includes("+") && hotkey.length === 1)
-			.map(([hotkey]) => hotkey);
-		expect(bare).toEqual(["/"]);
-	});
-
-	/**
-	 * Shift plus punctuation is a binding that can never fire.
-	 *
-	 * Holding shift rewrites `event.key` for a punctuation key: the comma key
-	 * reports "<", not ",". Mantine matches on `event.key` (`usePhysicalKeys` is
-	 * false and nothing here passes options), so "mod+shift+," waits for a
-	 * keystroke no keyboard produces, while `shortcutLabel` still renders a
-	 * convincing hint for it. Settings sat on that binding until it moved to
-	 * mod+shift+S.
-	 *
-	 * It even survived a browser test, because pressing the literal character
-	 * ("Meta+Shift+,") makes the driver report key "," rather than the "<" a
-	 * real press of that physical key produces. A unit test is the honest place
-	 * to catch it.
-	 *
-	 * Letters and digits are safe: shift only changes their case, and
-	 * `normalizeKey` folds case before comparing.
-	 */
-	it("never combines shift with a punctuation key", () => {
-		for (const [hotkey] of shortcutConfig) {
-			const parts = hotkey.split("+").map((part) => part.trim());
-			const key = parts[parts.length - 1] ?? "";
-			const hasShift = parts.slice(0, -1).some((part) => part.toLowerCase() === "shift");
-			if (!hasShift) continue;
-			expect(
-				key.length > 1 || /^[a-z0-9]$/i.test(key),
-				`"${hotkey}" puts shift on "${key}"; shift rewrites event.key for punctuation, so it can never fire`
-			).toBe(true);
-		}
-	});
+  it("binds every action in the map to a key", () => {
+    for (const action of Object.values(ShortcutAction)) {
+      expect(getShortcutDisplay(action)).not.toBeNull();
+    }
+  });
+
+  it("binds no key twice", () => {
+    const keys = shortcutConfig.map(([hotkey]) => hotkey.toLowerCase());
+    expect(new Set(keys).size).toBe(keys.length);
+  });
+
+  /**
+   * A bare character key belongs to whatever owns a text field on the page,
+   * not to the app, so "/" for search is the only one allowed. A named key is
+   * a different matter: Escape types nothing, and its binding neither swallows
+   * the press nor claims a handler that is always there.
+   */
+  it("gives no single character an unmodified binding but the search slash", () => {
+    const bare = shortcutConfig
+      .filter(([hotkey]) => !hotkey.includes("+") && hotkey.length === 1)
+      .map(([hotkey]) => hotkey);
+    expect(bare).toEqual(["/"]);
+  });
+
+  /**
+   * Shift plus punctuation is a binding that can never fire.
+   *
+   * Holding shift rewrites `event.key` for a punctuation key: the comma key
+   * reports "<", not ",". Mantine matches on `event.key` (`usePhysicalKeys` is
+   * false and nothing here passes options), so "mod+shift+," waits for a
+   * keystroke no keyboard produces, while `shortcutLabel` still renders a
+   * convincing hint for it. Settings sat on that binding until it moved to
+   * mod+shift+S.
+   *
+   * It even survived a browser test, because pressing the literal character
+   * ("Meta+Shift+,") makes the driver report key "," rather than the "<" a
+   * real press of that physical key produces. A unit test is the honest place
+   * to catch it.
+   *
+   * Letters and digits are safe: shift only changes their case, and
+   * `normalizeKey` folds case before comparing.
+   */
+  it("never combines shift with a punctuation key", () => {
+    for (const [hotkey] of shortcutConfig) {
+      const parts = hotkey.split("+").map((part) => part.trim());
+      const key = parts[parts.length - 1] ?? "";
+      const hasShift = parts.slice(0, -1).some((part) => part.toLowerCase() === "shift");
+      if (!hasShift) continue;
+      expect(
+        key.length > 1 || /^[a-z0-9]$/i.test(key),
+        `"${hotkey}" puts shift on "${key}"; shift rewrites event.key for punctuation, so it can never fire`
+      ).toBe(true);
+    }
+  });
 });
 
 /**
@@ -124,26 +124,26 @@ describe("shortcutConfig", () => {
  * mounted.
  */
 describe("binding options", () => {
-	const optionsFor = (hotkey: string) => shortcutConfig.find(([key]) => key === hotkey)?.[2];
-
-	it("does not swallow Escape", () => {
-		expect(optionsFor("Escape")?.preventDefault).toBe(false);
-	});
-
-	it("exempts the popover from the unhandled-shortcut warning", () => {
-		expect(optionsFor("Escape")?.onDemand).toBe(true);
-		expect(ON_DEMAND_ACTIONS).toContain(ShortcutAction.CLOSE_POPOVER);
-	});
-
-	it("swallows the keys the app owns outright", () => {
-		for (const hotkey of ["mod+K", "mod+shift+S", "mod+shift+X"]) {
-			expect(optionsFor(hotkey)?.preventDefault ?? true).toBe(true);
-		}
-	});
-
-	it("keeps every on-demand action bound to a key", () => {
-		for (const action of ON_DEMAND_ACTIONS) {
-			expect(getShortcutDisplay(action)).not.toBeNull();
-		}
-	});
+  const optionsFor = (hotkey: string) => shortcutConfig.find(([key]) => key === hotkey)?.[2];
+
+  it("does not swallow Escape", () => {
+    expect(optionsFor("Escape")?.preventDefault).toBe(false);
+  });
+
+  it("exempts the popover from the unhandled-shortcut warning", () => {
+    expect(optionsFor("Escape")?.onDemand).toBe(true);
+    expect(ON_DEMAND_ACTIONS).toContain(ShortcutAction.CLOSE_POPOVER);
+  });
+
+  it("swallows the keys the app owns outright", () => {
+    for (const hotkey of ["mod+K", "mod+shift+S", "mod+shift+X"]) {
+      expect(optionsFor(hotkey)?.preventDefault ?? true).toBe(true);
+    }
+  });
+
+  it("keeps every on-demand action bound to a key", () => {
+    for (const action of ON_DEMAND_ACTIONS) {
+      expect(getShortcutDisplay(action)).not.toBeNull();
+    }
+  });
 });
diff --git a/tests/unit/error-pages.test.tsx b/tests/unit/error-pages.test.tsx
index 5872bde6..d61c7820 100644
--- a/tests/unit/error-pages.test.tsx
+++ b/tests/unit/error-pages.test.tsx
@@ -6,13 +6,15 @@ vi.mock("@/hooks/use-sign-in-redirect-url", () => ({ useSignInRedirectUrl: () =>
 vi.mock("@/lib/utils/redirect-with-code", () => ({ redirectWithCode: vi.fn() }));
 vi.mock("@/lib/logger", () => ({ logger: { error: vi.fn(), info: vi.fn() } }));
 // authentication-error imports next-auth, which needs the real Next runtime.
-vi.mock("@/lib/errors/authentication-error", () => ({ AuthenticationError: class extends Error {} }));
+vi.mock("@/lib/errors/authentication-error", () => ({
+  AuthenticationError: class extends Error {},
+}));
 vi.mock("next/link", () => ({
-	default: ({ href, children, ...rest }: { href: string; children: React.ReactNode }) => (
-		<a href={href} {...rest}>
-			{children}
-		</a>
-	),
+  default: ({ href, children, ...rest }: { href: string; children: React.ReactNode }) => (
+    <a href={href} {...rest}>
+      {children}
+    </a>
+  ),
 }));
 
 import GlobalError from "@/app/(app)/global-error";
@@ -26,53 +28,53 @@ import { ErrorBoundary } from "@/components/primitives/error-boundary";
 const boom = Object.assign(new Error("db password is hunter2"), { digest: "abc123" });
 
 afterEach(() => {
-	vi.unstubAllEnvs();
+  vi.unstubAllEnvs();
 });
 
 describe("(app)/error.tsx page (ErrorBoundary)", () => {
-	it("calls reset when Try again is clicked", () => {
-		const reset = vi.fn();
-		render(<ErrorBoundary error={boom} reset={reset} />);
-		fireEvent.click(screen.getByRole("button", { name: "Try again" }));
-		expect(reset).toHaveBeenCalledTimes(1);
-	});
+  it("calls reset when Try again is clicked", () => {
+    const reset = vi.fn();
+    render(<ErrorBoundary error={boom} reset={reset} />);
+    fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(reset).toHaveBeenCalledTimes(1);
+  });
 
-	it("offers a way home", () => {
-		render(<ErrorBoundary error={boom} reset={vi.fn()} />);
-		expect(screen.getByRole("link", { name: "Go to homepage" })).toHaveAttribute("href", "/");
-	});
+  it("offers a way home", () => {
+    render(<ErrorBoundary error={boom} reset={vi.fn()} />);
+    expect(screen.getByRole("link", { name: "Go to homepage" })).toHaveAttribute("href", "/");
+  });
 
-	it("shows the digest, never the raw message, outside development", () => {
-		vi.stubEnv("NODE_ENV", "production");
-		render(<ErrorBoundary error={boom} reset={vi.fn()} />);
-		expect(screen.getByText("Reference abc123")).toBeInTheDocument();
-		expect(screen.queryByText(/hunter2/)).not.toBeInTheDocument();
-	});
+  it("shows the digest, never the raw message, outside development", () => {
+    vi.stubEnv("NODE_ENV", "production");
+    render(<ErrorBoundary error={boom} reset={vi.fn()} />);
+    expect(screen.getByText("Reference abc123")).toBeInTheDocument();
+    expect(screen.queryByText(/hunter2/)).not.toBeInTheDocument();
+  });
 
-	it("shows the raw message in development", () => {
-		vi.stubEnv("NODE_ENV", "development");
-		render(<ErrorBoundary error={boom} reset={vi.fn()} />);
-		expect(screen.getByText(/hunter2/)).toBeInTheDocument();
-	});
+  it("shows the raw message in development", () => {
+    vi.stubEnv("NODE_ENV", "development");
+    render(<ErrorBoundary error={boom} reset={vi.fn()} />);
+    expect(screen.getByText(/hunter2/)).toBeInTheDocument();
+  });
 });
 
 describe("(app)/global-error.tsx", () => {
-	it("renders a full document with inline styles only and wires reset", () => {
-		vi.stubEnv("NODE_ENV", "production");
-		const html = renderToStaticMarkup(<GlobalError error={boom} reset={vi.fn()} />);
-		expect(html.startsWith("<html")).toBe(true);
-		expect(html).toContain("Try again");
-		expect(html).toContain('href="/"');
-		expect(html).toContain("Reference abc123");
-		expect(html).not.toContain("hunter2");
-		// No class attributes: there is no stylesheet when this page renders.
-		expect(html).not.toMatch(/class="/);
-	});
+  it("renders a full document with inline styles only and wires reset", () => {
+    vi.stubEnv("NODE_ENV", "production");
+    const html = renderToStaticMarkup(<GlobalError error={boom} reset={vi.fn()} />);
+    expect(html.startsWith("<html")).toBe(true);
+    expect(html).toContain("Try again");
+    expect(html).toContain('href="/"');
+    expect(html).toContain("Reference abc123");
+    expect(html).not.toContain("hunter2");
+    // No class attributes: there is no stylesheet when this page renders.
+    expect(html).not.toMatch(/class="/);
+  });
 
-	it("calls reset when Try again is clicked", () => {
-		const reset = vi.fn();
-		const { container } = render(<GlobalError error={boom} reset={reset} />);
-		fireEvent.click(container.querySelector("button") as HTMLButtonElement);
-		expect(reset).toHaveBeenCalledTimes(1);
-	});
+  it("calls reset when Try again is clicked", () => {
+    const reset = vi.fn();
+    const { container } = render(<GlobalError error={boom} reset={reset} />);
+    fireEvent.click(container.querySelector("button") as HTMLButtonElement);
+    expect(reset).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/tests/unit/seo-internal-links.test.ts b/tests/unit/seo-internal-links.test.ts
index c01322ce..d74acbe7 100644
--- a/tests/unit/seo-internal-links.test.ts
+++ b/tests/unit/seo-internal-links.test.ts
@@ -17,60 +17,58 @@ import { siteConfig } from "@/config/site-config";
 // The sitemap pulls changelog entries from the GitHub API (LAC-3521);
 // stub the fields it reads so unit tests stay offline and deterministic.
 vi.mock("@/lib/changelog", () => ({
-	getChangelogEntries: async () => [
-		{ slug: "1.2.3", publishedAt: "2026-01-01T00:00:00.000Z" },
-	],
+  getChangelogEntries: async () => [{ slug: "1.2.3", publishedAt: "2026-01-01T00:00:00.000Z" }],
 }));
 
 // Built once and shared: the sitemap is identical across tests.
 const sitemapEntries = sitemap();
 const sitemapPaths = async () =>
-	(await sitemapEntries).map((entry) => new URL(entry.url).pathname.replace(/\/$/, "") || "/");
+  (await sitemapEntries).map((entry) => new URL(entry.url).pathname.replace(/\/$/, "") || "/");
 
 const chromeHrefs = () => {
-	const footerHrefs = defaultFooterGroups.flatMap((element) => {
-		if (element.type !== "group") return [];
-		return element.content.items.flatMap((item) =>
-			item && typeof item === "object" && "href" in item && typeof item.href === "string"
-				? [item.href]
-				: [],
-		);
-	});
-	const navHrefs = defaultNavLinks.map((link) => link.href);
-	return new Set([...footerHrefs, ...navHrefs]);
+  const footerHrefs = defaultFooterGroups.flatMap((element) => {
+    if (element.type !== "group") return [];
+    return element.content.items.flatMap((item) =>
+      item && typeof item === "object" && "href" in item && typeof item.href === "string"
+        ? [item.href]
+        : []
+    );
+  });
+  const navHrefs = defaultNavLinks.map((link) => link.href);
+  return new Set([...footerHrefs, ...navHrefs]);
 };
 
 describe("sitemap hygiene (LAC-2783)", () => {
-	it("does not include routes that have no page", async () => {
-		const paths = await sitemapPaths();
-		expect(paths).not.toContain("/docs"); // planned route, never implemented
-		expect(paths).not.toContain("/v1"); // CLI logger API endpoint, not a page
-		expect(paths).not.toContain("/trpc"); // demo page, should not be indexed
-	});
+  it("does not include routes that have no page", async () => {
+    const paths = await sitemapPaths();
+    expect(paths).not.toContain("/docs"); // planned route, never implemented
+    expect(paths).not.toContain("/v1"); // CLI logger API endpoint, not a page
+    expect(paths).not.toContain("/trpc"); // demo page, should not be indexed
+  });
 
-	it("uses the production site url", async () => {
-		for (const entry of await sitemapEntries) {
-			expect(entry.url.startsWith(siteConfig.url)).toBe(true);
-		}
-	});
+  it("uses the production site url", async () => {
+    for (const entry of await sitemapEntries) {
+      expect(entry.url.startsWith(siteConfig.url)).toBe(true);
+    }
+  });
 
-	it("includes changelog entry pages (LAC-3521)", async () => {
-		// Changelog entries are indexable and linked from /changelog; leaving
-		// them out trips Ahrefs "Indexable page not in sitemap".
-		expect(await sitemapPaths()).toContain("/changelog/1.2.3");
-	});
+  it("includes changelog entry pages (LAC-3521)", async () => {
+    // Changelog entries are indexable and linked from /changelog; leaving
+    // them out trips Ahrefs "Indexable page not in sitemap".
+    expect(await sitemapPaths()).toContain("/changelog/1.2.3");
+  });
 });
 
 describe("no orphan pages (LAC-2783)", () => {
-	it("links every sitemap URL from the header nav or footer", async () => {
-		const links = chromeHrefs();
-		const orphans = (await sitemapPaths()).filter(
-			(path) =>
-				path !== "/" &&
-				// Changelog entries are linked from the /changelog index, not the chrome.
-				!path.startsWith("/changelog/") &&
-				!links.has(path),
-		);
-		expect(orphans).toEqual([]);
-	});
+  it("links every sitemap URL from the header nav or footer", async () => {
+    const links = chromeHrefs();
+    const orphans = (await sitemapPaths()).filter(
+      (path) =>
+        path !== "/" &&
+        // Changelog entries are linked from the /changelog index, not the chrome.
+        !path.startsWith("/changelog/") &&
+        !links.has(path)
+    );
+    expect(orphans).toEqual([]);
+  });
 });
diff --git a/tests/unit/seo-meta-tags.test.ts b/tests/unit/seo-meta-tags.test.ts
index 68412ae2..e4b07df6 100644
--- a/tests/unit/seo-meta-tags.test.ts
+++ b/tests/unit/seo-meta-tags.test.ts
@@ -4,10 +4,10 @@ import { describe, expect, it } from "vitest";
 import { metadata as authLayoutMetadata } from "@/app/(app)/(authentication)/layout";
 import { Footer } from "@/components/footers/footer";
 import {
-	constructMetadata,
-	defaultMetadata,
-	noIndexRobots,
-	routeMetadata,
+  constructMetadata,
+  defaultMetadata,
+  noIndexRobots,
+  routeMetadata,
 } from "@/config/metadata";
 import { siteConfig } from "@/config/site-config";
 
@@ -24,54 +24,54 @@ const DESCRIPTION_MIN = 110;
 const DESCRIPTION_MAX = 160;
 
 describe("og:url matches canonical (LAC-3521)", () => {
-	it("derives og:url per-page the same way as the canonical URL", () => {
-		// "./" resolves against metadataBase + the current route's pathname,
-		// so og:url and canonical stay identical on every page.
-		expect(defaultMetadata.alternates?.canonical).toBe("./");
-		expect(defaultMetadata.openGraph?.url).toBe("./");
-		expect(constructMetadata({ title: "Anything" }).openGraph?.url).toBe("./");
-	});
+  it("derives og:url per-page the same way as the canonical URL", () => {
+    // "./" resolves against metadataBase + the current route's pathname,
+    // so og:url and canonical stay identical on every page.
+    expect(defaultMetadata.alternates?.canonical).toBe("./");
+    expect(defaultMetadata.openGraph?.url).toBe("./");
+    expect(constructMetadata({ title: "Anything" }).openGraph?.url).toBe("./");
+  });
 });
 
 describe("single H1 per page (LAC-3521)", () => {
-	it("does not render the site name in the footer as an <h1>", () => {
-		const { container } = render(createElement(Footer));
-		expect(container.querySelector("h1")).toBeNull();
-	});
+  it("does not render the site name in the footer as an <h1>", () => {
+    const { container } = render(createElement(Footer));
+    expect(container.querySelector("h1")).toBeNull();
+  });
 });
 
 describe("meta description lengths (LAC-3521)", () => {
-	it("keeps every routeMetadata description between 110 and 160 characters", () => {
-		// routeMetadata is the single source for page descriptions, including
-		// the legal MDX pages, which import their metadata from it.
-		for (const [route, metadata] of Object.entries(routeMetadata)) {
-			const description = metadata.description ?? "";
-			expect
-				.soft(description.length, `${route} description is ${description.length} chars`)
-				.toBeGreaterThanOrEqual(DESCRIPTION_MIN);
-			expect
-				.soft(description.length, `${route} description is ${description.length} chars`)
-				.toBeLessThanOrEqual(DESCRIPTION_MAX);
-		}
-	});
+  it("keeps every routeMetadata description between 110 and 160 characters", () => {
+    // routeMetadata is the single source for page descriptions, including
+    // the legal MDX pages, which import their metadata from it.
+    for (const [route, metadata] of Object.entries(routeMetadata)) {
+      const description = metadata.description ?? "";
+      expect
+        .soft(description.length, `${route} description is ${description.length} chars`)
+        .toBeGreaterThanOrEqual(DESCRIPTION_MIN);
+      expect
+        .soft(description.length, `${route} description is ${description.length} chars`)
+        .toBeLessThanOrEqual(DESCRIPTION_MAX);
+    }
+  });
 });
 
 describe("auth pages are noindex (LAC-3521)", () => {
-	it("marks the authentication segment noindex to match its sitemap exclusion", () => {
-		expect(authLayoutMetadata.robots).toBe(noIndexRobots);
-	});
+  it("marks the authentication segment noindex to match its sitemap exclusion", () => {
+    expect(authLayoutMetadata.robots).toBe(noIndexRobots);
+  });
 });
 
 describe("route titles rely on the layout title template (LAC-3521)", () => {
-	it("does not hardcode the site name suffix that the template already appends", () => {
-		// The (app) layout applies `%s | Bones` to child segments, so a manual
-		// suffix renders as "About | Bones | Bones". The home page is exempt:
-		// title.template does not apply to the segment that defines it.
-		for (const [route, metadata] of Object.entries(routeMetadata)) {
-			if (route === "home") continue;
-			expect
-				.soft(metadata.title, `${route} title duplicates the template suffix`)
-				.not.toMatch(new RegExp(`\\|\\s*${siteConfig.branding.projectName}\\s*$`));
-		}
-	});
+  it("does not hardcode the site name suffix that the template already appends", () => {
+    // The (app) layout applies `%s | Bones` to child segments, so a manual
+    // suffix renders as "About | Bones | Bones". The home page is exempt:
+    // title.template does not apply to the segment that defines it.
+    for (const [route, metadata] of Object.entries(routeMetadata)) {
+      if (route === "home") continue;
+      expect
+        .soft(metadata.title, `${route} title duplicates the template suffix`)
+        .not.toMatch(new RegExp(`\\|\\s*${siteConfig.branding.projectName}\\s*$`));
+    }
+  });
 });
diff --git a/tests/unit/seo-og-image.test.ts b/tests/unit/seo-og-image.test.ts
index 7154aeba..7ca558ee 100644
--- a/tests/unit/seo-og-image.test.ts
+++ b/tests/unit/seo-og-image.test.ts
@@ -11,7 +11,7 @@ import { siteConfig } from "@/config/site-config";
  */
 
 describe("og image", () => {
-	it("serves the OG image from the site's own domain", () => {
-		expect(new URL(siteConfig.ogImage).origin).toBe(new URL(siteConfig.url).origin);
-	});
+  it("serves the OG image from the site's own domain", () => {
+    expect(new URL(siteConfig.ogImage).origin).toBe(new URL(siteConfig.url).origin);
+  });
 });
diff --git a/tests/utils.tsx b/tests/utils.tsx
index c79019c2..e184250c 100644
--- a/tests/utils.tsx
+++ b/tests/utils.tsx
@@ -5,21 +5,21 @@ import { AppRouterLayout } from "../src/components/layouts/app-router-layout";
 
 // Mock ResizeObserver which is not available in test environment
 class ResizeObserverMock {
-	observe() {}
-	unobserve() {}
-	disconnect() {}
+  observe() {}
+  unobserve() {}
+  disconnect() {}
 }
 
 global.ResizeObserver = ResizeObserverMock;
 
 // Create a wrapper component that includes providers
 function TestWrapper({ children }: { children: ReactNode }) {
-	return <AppRouterLayout>{children}</AppRouterLayout>;
+  return <AppRouterLayout>{children}</AppRouterLayout>;
 }
 
 // Create a custom render function that includes the wrapper
 function customRender(ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) {
-	return render(ui, { wrapper: TestWrapper, ...options });
+  return render(ui, { wrapper: TestWrapper, ...options });
 }
 
 // Re-export everything
diff --git a/tsconfig.disabled.json b/tsconfig.disabled.json
index 7c140738..696d378a 100644
--- a/tsconfig.disabled.json
+++ b/tsconfig.disabled.json
@@ -1,45 +1,45 @@
 {
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": false,
-		"esModuleInterop": true,
-		"isolatedModules": true,
-		"moduleDetection": "force",
-		"skipLibCheck": true,
-		"resolveJsonModule": true,
-		"target": "ES2022",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": false,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "target": "ES2022",
 
-		/* Bundled projects */
-		"lib": ["dom", "dom.iterable", "ES2022"],
-		"noEmit": true,
-		"module": "ESNext",
-		"moduleResolution": "Bundler",
-		"jsx": "preserve",
-		"plugins": [{ "name": "next" }],
-		"incremental": true,
-		"composite": true,
-		"strict": false,
-		"noImplicitAny": false,
-		"strictNullChecks": false,
-		"strictFunctionTypes": false,
-		"strictBindCallApply": false,
-		"strictPropertyInitialization": false,
-		"noImplicitThis": false,
-		"useUnknownInCatchVariables": false,
-		"alwaysStrict": false,
-		"noUnusedLocals": false,
-		"noUnusedParameters": false,
-		"exactOptionalPropertyTypes": false,
-		"noImplicitReturns": false,
-		"noFallthroughCasesInSwitch": false,
-		"noUncheckedIndexedAccess": false,
-		"noImplicitOverride": false,
-		"noPropertyAccessFromIndexSignature": false,
-		"baseUrl": ".",
-		"paths": {
-			"@/*": ["./src/*"]
-		}
-	},
-	"include": ["src/app/(app)/(demo)/examples/**/*", "src/app/(app)/ai/**/*"],
-	"exclude": ["node_modules"]
+    /* Bundled projects */
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "plugins": [{ "name": "next" }],
+    "incremental": true,
+    "composite": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictFunctionTypes": false,
+    "strictBindCallApply": false,
+    "strictPropertyInitialization": false,
+    "noImplicitThis": false,
+    "useUnknownInCatchVariables": false,
+    "alwaysStrict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "exactOptionalPropertyTypes": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": false,
+    "noUncheckedIndexedAccess": false,
+    "noImplicitOverride": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/app/(app)/(demo)/examples/**/*", "src/app/(app)/ai/**/*"],
+  "exclude": ["node_modules"]
 }
diff --git a/tsconfig.json b/tsconfig.json
index a67ef6f8..e9d4f6a3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,14 +22,8 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "target": "ES2022",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "ES2022"
-    ],
-    "types": [
-      "node"
-    ],
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "types": ["node"],
     "plugins": [
       {
         "name": "next"
@@ -37,12 +31,8 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@/public/*": [
-        "./public/*"
-      ],
-      "@/*": [
-        "./src/*"
-      ]
+      "@/public/*": ["./public/*"],
+      "@/*": ["./src/*"]
     }
   },
   "include": [
diff --git a/tsconfig.strict.json b/tsconfig.strict.json
index b5e016fb..8f62bf02 100644
--- a/tsconfig.strict.json
+++ b/tsconfig.strict.json
@@ -1,62 +1,62 @@
 {
-	"compilerOptions": {
-		"inlineSources": true,
-		"forceConsistentCasingInFileNames": true,
-		"sourceMap": true,
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"isolatedModules": true,
-		"moduleDetection": "force",
-		"skipLibCheck": true,
-		"resolveJsonModule": true,
-		"target": "ES2022",
-		"strict": true,
-		"strictNullChecks": true,
-		"noUncheckedIndexedAccess": true,
-		"lib": ["dom", "dom.iterable", "ES2022"],
-		"noEmit": true,
-		"module": "ESNext",
-		"moduleResolution": "bundler",
-		"jsx": "preserve",
-		"plugins": [
-			{
-				"name": "next"
-			}
-		],
-		"incremental": true,
-		"baseUrl": ".",
-		"paths": {
-			"@/public/*": ["./public/*"],
-			"@/*": ["./src/*"]
-		}
-	},
-	"include": [
-		"eslint.config.mjs",
-		"next-env.d.ts",
-		"**/*.ts",
-		"**/*.tsx",
-		"**/*.cjs",
-		"**/*.js",
-		"**/*.jsx",
-		"**/*.mjs",
-		"**/*.mts",
-		"**/*.md",
-		"**/*.mdx",
-		".next/types/**/*.ts",
-		"src/types/next-auth.d.ts",
-		"next.config.ts",
-		"src/workers/**/*"
-	],
-	"exclude": [
-		"node_modules",
-		"public",
-		"src/components/blocks/**/*.ts",
-		"src/components/blocks/**/*.tsx",
-		"src/components/ui/**/*.ts",
-		"src/components/ui/**/*.tsx",
-		"src/app/(app)/(ai)/**/*",
-		"src/app/(app)/(demo)/examples/**/*",
-		"src/workers/**/*.ts"
-	]
+  "compilerOptions": {
+    "inlineSources": true,
+    "forceConsistentCasingInFileNames": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "strictNullChecks": true,
+    "noUncheckedIndexedAccess": true,
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/public/*": ["./public/*"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "eslint.config.mjs",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.mjs",
+    "**/*.mts",
+    "**/*.md",
+    "**/*.mdx",
+    ".next/types/**/*.ts",
+    "src/types/next-auth.d.ts",
+    "next.config.ts",
+    "src/workers/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "public",
+    "src/components/blocks/**/*.ts",
+    "src/components/blocks/**/*.tsx",
+    "src/components/ui/**/*.ts",
+    "src/components/ui/**/*.tsx",
+    "src/app/(app)/(ai)/**/*",
+    "src/app/(app)/(demo)/examples/**/*",
+    "src/workers/**/*.ts"
+  ]
 }
diff --git a/vibe-tools.config.json b/vibe-tools.config.json
index 371f4b8b..037c7ee3 100644
--- a/vibe-tools.config.json
+++ b/vibe-tools.config.json
@@ -18,4 +18,4 @@
     "model": "gemini-2.5-pro-exp-03-25"
   },
   "ide": "cursor"
-}
\ No newline at end of file
+}
diff --git a/vitest.config.browser.ts b/vitest.config.browser.ts
index c5b50bdb..30b093db 100644
--- a/vitest.config.browser.ts
+++ b/vitest.config.browser.ts
@@ -4,20 +4,20 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-	plugins: [react(), tsconfigPaths()],
-	resolve: {
-		alias: {
-			"@": path.resolve(__dirname, "./src"),
-		},
-	},
-	test: {
-		include: ["tests/browser/**/*.test.{ts,tsx}"],
-		watch: false,
-		setupFiles: ["./tests/setup-env.ts", "./tests/setup.ts"],
-		browser: {
-			enabled: true,
-			name: "chromium",
-			provider: "playwright",
-		},
-	},
+  plugins: [react(), tsconfigPaths()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    include: ["tests/browser/**/*.test.{ts,tsx}"],
+    watch: false,
+    setupFiles: ["./tests/setup-env.ts", "./tests/setup.ts"],
+    browser: {
+      enabled: true,
+      name: "chromium",
+      provider: "playwright",
+    },
+  },
 });
diff --git a/vitest.config.node.ts b/vitest.config.node.ts
index cefa3f74..1d24578c 100644
--- a/vitest.config.node.ts
+++ b/vitest.config.node.ts
@@ -4,22 +4,22 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-	plugins: [react(), tsconfigPaths()],
-	resolve: {
-		alias: {
-			"@": path.resolve(__dirname, "./src"),
-		},
-	},
-	test: {
-		environment: "node",
-		globals: true,
-		setupFiles: ["./tests/setup-env.ts", "./tests/setup.ts"],
-		include: ["tests/node/**/*.test.{ts,tsx}"],
-		watch: false,
-		coverage: {
-			provider: "v8",
-			reporter: ["text", "json", "html"],
-			exclude: ["node_modules/**", "src/test/**", "**/*.d.ts", "**/*.config.ts", "**/types/**"],
-		},
-	},
+  plugins: [react(), tsconfigPaths()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    environment: "node",
+    globals: true,
+    setupFiles: ["./tests/setup-env.ts", "./tests/setup.ts"],
+    include: ["tests/node/**/*.test.{ts,tsx}"],
+    watch: false,
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+      exclude: ["node_modules/**", "src/test/**", "**/*.d.ts", "**/*.config.ts", "**/types/**"],
+    },
+  },
 });
diff --git a/vitest.config.ts b/vitest.config.ts
index e0d9e501..30fa3f43 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -23,40 +23,40 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-	plugins: [
-		react(), // React JSX transformation and Fast Refresh
-		tsconfigPaths(), // TypeScript path mapping support
-	],
-	resolve: {
-		alias: {
-			"@": path.resolve(__dirname, "./src"), // Resolve @/* imports to src/*
-			// Alias next/server to a test shim to avoid ESM resolution issues in next-auth during unit tests
-			"next/server": path.resolve(__dirname, "./tests/shims/next-server.ts"),
-		},
-	},
-	test: {
-		environment: "jsdom", // DOM environment for React component testing
-		globals: true, // Enable global test functions (describe, it, expect)
-		setupFiles: [
-			"./tests/setup-env.ts", // Environment variables for testing
-			"./tests/setup.ts", // Testing utilities and global setup
-		],
-		include: ["tests/unit/**/*.test.{ts,tsx}"], // Only unit tests in this config
-		exclude: [
-			// Exclude brittle suite that imports next-auth env and requires real Next runtime
-			"tests/unit/server/actions/deploy-private-repo.test.ts",
-		],
-		watch: false, // Disable watch mode for CI/CD compatibility
-		coverage: {
-			provider: "v8", // Fast coverage provider
-			reporter: ["text", "json", "html"], // Multiple coverage output formats
-			exclude: [
-				"node_modules/**",
-				"src/test/**", // Test utilities
-				"**/*.d.ts", // Type definitions
-				"**/*.config.ts", // Configuration files
-				"**/types/**", // Type-only files
-			],
-		},
-	},
+  plugins: [
+    react(), // React JSX transformation and Fast Refresh
+    tsconfigPaths(), // TypeScript path mapping support
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"), // Resolve @/* imports to src/*
+      // Alias next/server to a test shim to avoid ESM resolution issues in next-auth during unit tests
+      "next/server": path.resolve(__dirname, "./tests/shims/next-server.ts"),
+    },
+  },
+  test: {
+    environment: "jsdom", // DOM environment for React component testing
+    globals: true, // Enable global test functions (describe, it, expect)
+    setupFiles: [
+      "./tests/setup-env.ts", // Environment variables for testing
+      "./tests/setup.ts", // Testing utilities and global setup
+    ],
+    include: ["tests/unit/**/*.test.{ts,tsx}"], // Only unit tests in this config
+    exclude: [
+      // Exclude brittle suite that imports next-auth env and requires real Next runtime
+      "tests/unit/server/actions/deploy-private-repo.test.ts",
+    ],
+    watch: false, // Disable watch mode for CI/CD compatibility
+    coverage: {
+      provider: "v8", // Fast coverage provider
+      reporter: ["text", "json", "html"], // Multiple coverage output formats
+      exclude: [
+        "node_modules/**",
+        "src/test/**", // Test utilities
+        "**/*.d.ts", // Type definitions
+        "**/*.config.ts", // Configuration files
+        "**/types/**", // Type-only files
+      ],
+    },
+  },
 });