Next.js Supabase V3 (#463)

Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
2026-03-24 13:40:38 +08:00
parent 4912e402a3
commit 7ebff31475
840 changed files with 71395 additions and 20095 deletions
--- a/.claude/commands/feature-builder.md
+++ b/.claude/commands/feature-builder.md
@@ -55,7 +55,10 @@ create policy "projects_write" on public.projects for all

 Use `server-action-builder` skill for detailed patterns.

-**Rule: Services are decoupled from interfaces.** The service is pure logic that receives dependencies (database client, etc.) as arguments — it never imports framework-specific modules. The server action is a thin adapter that resolves dependencies and calls the service. This means the same service can be called from a server action, an MCP tool, a CLI command, or a unit test with zero changes.
+**Rule: Services are decoupled from interfaces.** The service is pure logic that receives dependencies (database client,
+etc.) as arguments — it never imports framework-specific modules. The server action is a thin adapter that resolves
+dependencies and calls the service. This means the same service can be called from a server action, an MCP tool, a CLI
+command, or a unit test with zero changes.

 Create in route's `_lib/server/` directory:

--- a/.claude/skills/playwright-e2e/makerkit.md
+++ b/.claude/skills/playwright-e2e/makerkit.md
@@ -19,8 +19,8 @@ export class AuthPageObject {
  }

  async signOut() {
-    await this.page.click('[data-test="account-dropdown-trigger"]');
-    await this.page.click('[data-test="account-dropdown-sign-out"]');
+    await this.page.click('[data-test="workspace-dropdown-trigger"]');
+    await this.page.click('[data-test="workspace-sign-out"]');
  }

  async bootstrapUser(params: { email: string; password: string; name: string }) {
@@ -47,9 +47,19 @@ export class AuthPageObject {
 ## Common Selectors

 ```typescript
-// Account dropdown
-'[data-test="account-dropdown-trigger"]'
-'[data-test="account-dropdown-sign-out"]'
+// Workspace dropdown (sidebar header - combined account switcher + user menu)
+'[data-test="workspace-dropdown-trigger"]'  // Opens the dropdown
+'[data-test="workspace-switch-submenu"]'    // Sub-trigger for workspace switching
+'[data-test="workspace-switch-content"]'    // Sub-menu content with workspace list
+'[data-test="workspace-team-item"]'         // Individual team items in switcher
+'[data-test="create-team-trigger"]'         // Create team button in switcher
+'[data-test="workspace-sign-out"]'          // Sign out button
+'[data-test="workspace-settings-link"]'     // Settings link
+'[data-test="account-dropdown-display-name"]' // User display name (inside dropdown panel)
+
+// Opening the workspace switcher (two-step: open dropdown, then submenu)
+await page.click('[data-test="workspace-dropdown-trigger"]');
+await page.click('[data-test="workspace-switch-submenu"]');

 // Navigation
 '[data-test="sidebar-menu"]'
--- a/.claude/skills/react-form-builder/SKILL.md
+++ b/.claude/skills/react-form-builder/SKILL.md
@@ -5,192 +5,92 @@ description: Create or modify client-side forms in React applications following

 # React Form Builder Expert

-You are an expert React form architect specializing in building robust, accessible, and type-safe forms using react-hook-form, @kit/ui/form components, and Next.js server actions. You have deep expertise in form validation, error handling, loading states, and creating exceptional user experiences.
+You are an expert React form architect specializing in building robust, accessible, and type-safe forms using react-hook-form, @kit/ui/form components, and Next.js server actions via next-safe-action. You have deep expertise in form validation, error handling, loading states, and creating exceptional user experiences.

 ## Core Responsibilities

 You will create and modify client-side forms that strictly adhere to these architectural patterns:

 ### 1. Form Structure Requirements
+
 - Always use `useForm` from react-hook-form WITHOUT redundant generic types when using zodResolver
 - Implement Zod schemas for validation, stored in `_lib/schemas/` directory
 - Use `@kit/ui/form` components (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage)
- Handle loading states with `useTransition` hook
- Implement proper error handling with try/catch blocks
+- ALWAYS use `useAction` from `next-safe-action/hooks` for server action integration — NEVER use raw `startTransition` + direct action calls
+- Use `isPending` from `useAction` for loading states

-### 2. Server Action Integration
- Call server actions within `startTransition` for proper loading states
- Handle redirect errors using `isRedirectError` from 'next/dist/client/components/redirect-error'
- Display error states using Alert components from '@kit/ui/alert'
+### 2. Server Action Integration (next-safe-action)
+
+- ALWAYS use `useAction` hook from `next-safe-action/hooks` — this is the canonical pattern
+- Handle success/error via `onSuccess` and `onError` callbacks in `useAction` options
+- Use `isPending` from `useAction` for button disabled state
+- NEVER call server actions directly with `await myAction(data)` — always go through `execute(data)`
+- NEVER use `useTransition` + `startTransition` for server action calls
+- NEVER use `isRedirectError` — the `useAction` hook handles this internally
 - Ensure server actions are imported from dedicated server files

 ### 3. Code Organization Pattern
+
 ```
 _lib/
 ├── schemas/
 │   └── feature.schema.ts    # Shared Zod schemas
 ├── server/
-│   └── server-actions.ts    # Server actions
+│   └── server-actions.ts    # Server actions (next-safe-action)
 └── client/
    └── forms.tsx           # Form components
 ```

 ### 4. Import Guidelines
+
 - Toast notifications: `import { toast } from '@kit/ui/sonner'`
 - Form components: `import { Form, FormField, ... } from '@kit/ui/form'`
+- Action hook: `import { useAction } from 'next-safe-action/hooks'`
 - Always check @kit/ui for components before using external packages
 - Use `Trans` component from '@kit/ui/trans' for internationalization

 ### 5. Best Practices You Must Follow
+
 - Add `data-test` attributes for E2E testing on form elements and submit buttons
- Use `reValidateMode: 'onChange'` and `mode: 'onChange'` for responsive validation
 - Implement proper TypeScript typing without using `any`
 - Handle both success and error states gracefully
 - Use `If` component from '@kit/ui/if' for conditional rendering
 - Disable submit buttons during pending states
 - Include FormDescription for user guidance
- Use Dialog components from '@kit/ui/dialog' when forms are in modals
+- When forms are inside dialogs, ALWAYS use `useAsyncDialog` from `@kit/ui/hooks/use-async-dialog` — it prevents the dialog from closing while an async operation is in progress (blocks Escape and backdrop clicks). Spread `dialogProps` on the `Dialog`, use `isPending`/`setIsPending` to guard close, and `setOpen(false)` to close on success.

 ### 6. State Management
- Use `useState` for error states
- Use `useTransition` for pending states
- Avoid multiple separate useState calls - prefer single state objects when appropriate
+
+- Use `useState` for UI state (success/error display)
+- Use `isPending` from `useAction` for loading states — NEVER `useTransition`
+- Avoid multiple separate useState calls — prefer single state objects when appropriate
 - Never use useEffect unless absolutely necessary and justified

 ### 7. Validation Patterns
+
 - Create reusable Zod schemas that can be shared between client and server
 - Use schema.refine() for custom validation logic
 - Provide clear, user-friendly error messages
 - Implement field-level validation with proper error display

-### 8. Error Handling Template
+### 8. Type Safety

-```typescript
-const onSubmit = (data: FormData) => {
-  startTransition(async () => {
-    try {
-      await serverAction(data);
-    } catch (error) {
-      if (!isRedirectError(error)) {
-        setError(true);
-      }
-    }
-  });
-};
-```
-
-### 9. Type Safety
- Let zodResolver infer types - don't add redundant generics to useForm
+- Let zodResolver infer types — don't add redundant generics to useForm
 - Export schema types when needed for reuse
 - Ensure all form fields have proper typing

-### 10. Accessibility and UX
+### 9. Accessibility and UX
+
 - Always include FormLabel for screen readers
 - Provide helpful FormDescription text
 - Show clear error messages with FormMessage
 - Implement loading indicators during form submission
 - Use semantic HTML and ARIA attributes where appropriate

-## Complete Form Example
+## Exemplars

-```tsx
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { useTransition, useState } from 'react';
-import { isRedirectError } from 'next/dist/client/components/redirect-error';
-
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@kit/ui/form';
-import { Input } from '@kit/ui/input';
-import { Button } from '@kit/ui/button';
-import { Alert, AlertDescription } from '@kit/ui/alert';
-import { If } from '@kit/ui/if';
-import { toast } from '@kit/ui/sonner';
-import { Trans } from '@kit/ui/trans';
-
-import { CreateEntitySchema } from '../_lib/schemas/entity.schema';
-import { createEntityAction } from '../_lib/server/server-actions';
-
-export function CreateEntityForm() {
-  const [pending, startTransition] = useTransition();
-  const [error, setError] = useState(false);
-
-  const form = useForm({
-    resolver: zodResolver(CreateEntitySchema),
-    defaultValues: {
-      name: '',
-      description: '',
-    },
-    mode: 'onChange',
-    reValidateMode: 'onChange',
-  });
-
-  const onSubmit = (data: z.infer<typeof CreateEntitySchema>) => {
-    setError(false);
-
-    startTransition(async () => {
-      try {
-        await createEntityAction(data);
-        toast.success('Entity created successfully');
-      } catch (e) {
-        if (!isRedirectError(e)) {
-          setError(true);
-        }
-      }
-    });
-  };
-
-  return (
-    <form onSubmit={form.handleSubmit(onSubmit)}>
-      <Form {...form}>
-        <If condition={error}>
-          <Alert variant="destructive">
-            <AlertDescription>
-              <Trans i18nKey="common:errors.generic" />
-            </AlertDescription>
-          </Alert>
-        </If>
-
-        <FormField
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey="entity:name" />
-              </FormLabel>
-              <FormControl>
-                <Input
-                  data-test="entity-name-input"
-                  placeholder="Enter name"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button
-          type="submit"
-          disabled={pending}
-          data-test="submit-entity-button"
-        >
-          {pending ? (
-            <Trans i18nKey="common:creating" />
-          ) : (
-            <Trans i18nKey="common:create" />
-          )}
-        </Button>
-      </Form>
-    </form>
-  );
-}
-```
-
-When creating forms, you will analyze requirements and produce complete, production-ready implementations that handle all edge cases, provide excellent user feedback, and maintain consistency with the codebase's established patterns. You prioritize type safety, reusability, and maintainability in every form you create.
-
-Always verify that UI components exist in @kit/ui before importing from external packages, and ensure your forms integrate seamlessly with the project's internationalization system using Trans components.
+- Standalone form: `apps/web/app/[locale]/(marketing)/contact/_components/contact-form.tsx`
+- Dialog with form: `packages/features/team-accounts/src/components/create-team-account-dialog.tsx` — `useAsyncDialog` + form pattern

 ## Components

--- a/.claude/skills/react-form-builder/components.md
+++ b/.claude/skills/react-form-builder/components.md
@@ -3,6 +3,7 @@
 ## Import Pattern

 ```typescript
+import { useAction } from 'next-safe-action/hooks';
 import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
 import { Button } from '@kit/ui/button';
@@ -10,7 +11,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Textarea } from '@kit/ui/textarea';
 import { Checkbox } from '@kit/ui/checkbox';
 import { Switch } from '@kit/ui/switch';
-import { Alert, AlertDescription } from '@kit/ui/alert';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 import { toast } from '@kit/ui/sonner';
@@ -21,7 +22,6 @@ import { toast } from '@kit/ui/sonner';
 ```tsx
 <FormField
  name="fieldName"
-  control={form.control}
  render={({ field }) => (
    <FormItem>
      <FormLabel>
@@ -48,7 +48,6 @@ import { toast } from '@kit/ui/sonner';
 ```tsx
 <FormField
  name="category"
-  control={form.control}
  render={({ field }) => (
    <FormItem>
      <FormLabel>Category</FormLabel>
@@ -74,7 +73,6 @@ import { toast } from '@kit/ui/sonner';
 ```tsx
 <FormField
  name="acceptTerms"
-  control={form.control}
  render={({ field }) => (
    <FormItem className="flex items-center space-x-2">
      <FormControl>
@@ -97,7 +95,6 @@ import { toast } from '@kit/ui/sonner';
 ```tsx
 <FormField
  name="notifications"
-  control={form.control}
  render={({ field }) => (
    <FormItem className="flex items-center justify-between">
      <div>
@@ -121,7 +118,6 @@ import { toast } from '@kit/ui/sonner';
 ```tsx
 <FormField
  name="description"
-  control={form.control}
  render={({ field }) => (
    <FormItem>
      <FormLabel>Description</FormLabel>
@@ -142,13 +138,14 @@ import { toast } from '@kit/ui/sonner';
 ## Error Alert

 ```tsx
-<If condition={error}>
 <Alert variant="destructive">
+  <AlertTitle>
+    <Trans i18nKey="common.errors.title" />
+  </AlertTitle>
  <AlertDescription>
-      <Trans i18nKey="common:errors.generic" />
+    <Trans i18nKey="common.errors.generic" />
  </AlertDescription>
 </Alert>
-</If>
 ```

 ## Submit Button
@@ -156,14 +153,10 @@ import { toast } from '@kit/ui/sonner';
 ```tsx
 <Button
  type="submit"
-  disabled={pending}
+  disabled={isPending}
  data-test="submit-button"
 >
-  {pending ? (
-    <Trans i18nKey="common:submitting" />
-  ) : (
-    <Trans i18nKey="common:submit" />
-  )}
+  <Trans i18nKey={isPending ? 'common.submitting' : 'common.submit'} />
 </Button>
 ```

@@ -172,65 +165,79 @@ import { toast } from '@kit/ui/sonner';
 ```tsx
 'use client';

-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { useTransition, useState } from 'react';
-import { isRedirectError } from 'next/dist/client/components/redirect-error';
-import type { z } from 'zod';
+import { useState } from 'react';

+import { zodResolver } from '@hookform/resolvers/zod';
+import { useAction } from 'next-safe-action/hooks';
+import { useForm } from 'react-hook-form';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
-import { Button } from '@kit/ui/button';
-import { Alert, AlertDescription } from '@kit/ui/alert';
-import { If } from '@kit/ui/if';
-import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';

 import { MySchema } from '../_lib/schemas/my.schema';
 import { myAction } from '../_lib/server/server-actions';

 export function MyForm() {
-  const [pending, startTransition] = useTransition();
-  const [error, setError] = useState(false);
+  const [state, setState] = useState({
+    success: false,
+    error: false,
+  });
+
+  const { execute, isPending } = useAction(myAction, {
+    onSuccess: () => {
+      setState({ success: true, error: false });
+    },
+    onError: () => {
+      setState({ error: true, success: false });
+    },
+  });

  const form = useForm({
    resolver: zodResolver(MySchema),
    defaultValues: { name: '' },
-    mode: 'onChange',
  });

-  const onSubmit = (data: z.infer<typeof MySchema>) => {
-    setError(false);
-
-    startTransition(async () => {
-      try {
-        await myAction(data);
-        toast.success('Success!');
-      } catch (e) {
-        if (!isRedirectError(e)) {
-          setError(true);
-        }
-      }
-    });
-  };
-
+  if (state.success) {
+    return (
+      <Alert variant="success">
+        <AlertTitle>
+          <Trans i18nKey="common.success" />
+        </AlertTitle>
+      </Alert>
+    );
+  }
+
+  if (state.error) {
    return (
-    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-      <Form {...form}>
-        <If condition={error}>
      <Alert variant="destructive">
+        <AlertTitle>
+          <Trans i18nKey="common.errors.title" />
+        </AlertTitle>
        <AlertDescription>
-              <Trans i18nKey="common:errors.generic" />
+          <Trans i18nKey="common.errors.generic" />
        </AlertDescription>
      </Alert>
-        </If>
+    );
+  }

+  return (
+    <Form {...form}>
+      <form
+        className="space-y-4"
+        onSubmit={form.handleSubmit((data) => {
+          execute(data);
+        })}
+      >
        <FormField
          name="name"
-          control={form.control}
          render={({ field }) => (
            <FormItem>
-              <FormLabel>Name</FormLabel>
+              <FormLabel>
+                <Trans i18nKey="namespace:name" />
+              </FormLabel>
              <FormControl>
                <Input data-test="name-input" {...field} />
              </FormControl>
@@ -239,11 +246,11 @@ export function MyForm() {
          )}
        />

-        <Button type="submit" disabled={pending} data-test="submit-button">
-          {pending ? 'Saving...' : 'Save'}
+        <Button type="submit" disabled={isPending} data-test="submit-button">
+          <Trans i18nKey={isPending ? 'common.submitting' : 'common.submit'} />
        </Button>
-      </Form>
      </form>
+    </Form>
  );
 }
 ```
--- a/.claude/skills/server-action-builder/SKILL.md
+++ b/.claude/skills/server-action-builder/SKILL.md
@@ -17,19 +17,21 @@ Create validation schema in `_lib/schemas/`:

 ```typescript
 // _lib/schemas/feature.schema.ts
-import { z } from 'zod';
+import * as z from 'zod';

 export const CreateFeatureSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  accountId: z.string().uuid('Invalid account ID'),
 });

-export type CreateFeatureInput = z.infer<typeof CreateFeatureSchema>;
+export type CreateFeatureInput = z.output<typeof CreateFeatureSchema>;
 ```

 ### Step 2: Create Service Layer

-**North star: services are decoupled from their interface.** The service is pure logic — it receives a database client as a dependency, never imports one. This means the same service works whether called from a server action, an MCP tool, a CLI command, or a plain unit test.
+**North star: services are decoupled from their interface.** The service is pure logic — it receives a database client
+as a dependency, never imports one. This means the same service works whether called from a server action, an MCP tool,
+a CLI command, or a plain unit test.

 Create service in `_lib/server/`:

@@ -62,11 +64,13 @@ class FeatureService {
 }
 ```

-The service never calls `getSupabaseServerClient()` — the caller provides the client. This keeps the service testable (pass a mock client) and reusable (any interface can supply its own client).
+The service never calls `getSupabaseServerClient()` — the caller provides the client. This keeps the service testable (
+pass a mock client) and reusable (any interface can supply its own client).

 ### Step 3: Create Server Action (Thin Adapter)

-The action is a **thin adapter** — it resolves dependencies (client, logger) and delegates to the service. No business logic lives here.
+The action is a **thin adapter** — it resolves dependencies (client, logger) and delegates to the service. No business
+logic lives here.

 Create action in `_lib/server/server-actions.ts`:

@@ -107,13 +111,18 @@ export const createFeatureAction = enhanceAction(

 ## Key Patterns

-1. **Services are pure, interfaces are thin adapters.** The service contains all business logic. The server action (or MCP tool, or CLI command) is glue code that resolves dependencies and calls the service. If an MCP tool and a server action do the same thing, they call the same service function.
-2. **Inject dependencies, don't import them in services.** Services receive their database client, logger, or any I/O capability as constructor arguments — never by importing framework-specific modules. This keeps them testable with stubs and reusable across interfaces.
+1. **Services are pure, interfaces are thin adapters.** The service contains all business logic. The server action (or
+   MCP tool, or CLI command) is glue code that resolves dependencies and calls the service. If an MCP tool and a server
+   action do the same thing, they call the same service function.
+2. **Inject dependencies, don't import them in services.** Services receive their database client, logger, or any I/O
+   capability as constructor arguments — never by importing framework-specific modules. This keeps them testable with
+   stubs and reusable across interfaces.
 3. **Schema in separate file** - Reusable between client and server
 4. **Logging** - Always log before and after operations
 5. **Revalidation** - Use `revalidatePath` after mutations
 6. **Trust RLS** - Don't add manual auth checks (RLS handles it)
-7. **Testable in isolation** - Because services accept their dependencies, you can test them with a mock client and no running infrastructure
+7. **Testable in isolation** - Because services accept their dependencies, you can test them with a mock client and no
+   running infrastructure

 ## File Structure

--- a/.claude/skills/server-action-builder/reference.md
+++ b/.claude/skills/server-action-builder/reference.md
@@ -29,8 +29,8 @@ export const myAction = enhanceAction(
 ### Handler Parameters

 | Parameter | Type               | Description                        |
-|-----------|------|-------------|
-| `data` | `z.infer<Schema>` | Validated input data |
+|-----------|--------------------|------------------------------------|
+| `data`    | `z.output<Schema>` | Validated input data               |
 | `user`    | `User`             | Authenticated user (if auth: true) |

 ## enhanceRouteHandler API
@@ -69,7 +69,7 @@ export const GET = enhanceRouteHandler(
 ## Common Zod Patterns

 ```typescript
-import { z } from 'zod';
+import * as z from 'zod';

 // Basic schema
 export const CreateItemSchema = z.object({
--- a/.claude/skills/service-builder/SKILL.md
+++ b/.claude/skills/service-builder/SKILL.md
@@ -9,7 +9,9 @@ You are an expert at building pure, testable services that are decoupled from th

 ## North Star

-**Every service is decoupled from its interface (I/O).** A service takes plain data in, does work, and returns plain data out. It has no knowledge of whether it was called from an MCP tool, a server action, a CLI command, a route handler, or a test. The caller is a thin adapter that resolves dependencies and delegates.
+**Every service is decoupled from its interface (I/O).** A service takes plain data in, does work, and returns plain
+data out. It has no knowledge of whether it was called from an MCP tool, a server action, a CLI command, a route
+handler, or a test. The caller is a thin adapter that resolves dependencies and delegates.

 ## Workflow

@@ -21,7 +23,7 @@ Start with the input/output types. These are plain TypeScript — no framework t

 ```typescript
 // _lib/schemas/project.schema.ts
-import { z } from 'zod';
+import * as z from 'zod';

 export const CreateProjectSchema = z.object({
  name: z.string().min(1),
@@ -40,7 +42,8 @@ export interface Project {

 ### Step 2: Build the Service

-The service receives all dependencies through its constructor. It never imports framework-specific modules (`getSupabaseServerClient`, `getLogger`, `revalidatePath`, etc.).
+The service receives all dependencies through its constructor. It never imports framework-specific modules (
+`getSupabaseServerClient`, `getLogger`, `revalidatePath`, etc.).

 ```typescript
 // _lib/server/project.service.ts
@@ -95,7 +98,8 @@ class ProjectService {

 ### Step 3: Write Thin Adapters

-Each interface is a thin adapter — it resolves dependencies, calls the service, and handles interface-specific concerns (revalidation, redirects, MCP formatting, CLI output).
+Each interface is a thin adapter — it resolves dependencies, calls the service, and handles interface-specific
+concerns (revalidation, redirects, MCP formatting, CLI output).

 **Server Action adapter:**

@@ -234,20 +238,25 @@ describe('ProjectService', () => {

 ## Rules

-1. **Services are pure functions over data.** Plain objects/primitives in, plain objects/primitives out. No `Request`/`Response`, no MCP context, no `FormData`.
+1. **Services are pure functions over data.** Plain objects/primitives in, plain objects/primitives out. No `Request`/
+   `Response`, no MCP context, no `FormData`.

-2. **Inject dependencies, never import them.** The service receives its database client, storage client, or any I/O capability as a constructor argument. Never call `getSupabaseServerClient()` inside a service.
+2. **Inject dependencies, never import them.** The service receives its database client, storage client, or any I/O
+   capability as a constructor argument. Never call `getSupabaseServerClient()` inside a service.

-3. **Adapters are trivial glue.** A server action resolves the client, calls the service, and handles `revalidatePath`. An MCP tool resolves the client, calls the service, and formats the response. No business logic in adapters.
+3. **Adapters are trivial glue.** A server action resolves the client, calls the service, and handles `revalidatePath`.
+   An MCP tool resolves the client, calls the service, and formats the response. No business logic in adapters.

-4. **One service, many callers.** If two interfaces do the same thing, they call the same service function. Duplicating logic is a violation.
+4. **One service, many callers.** If two interfaces do the same thing, they call the same service function. Duplicating
+   logic is a violation.

-5. **Testable in isolation.** Pass a mock client, assert the output. If you need a running database to test a service, refactor until you don't.
+5. **Testable in isolation.** Pass a mock client, assert the output. If you need a running database to test a service,
+   refactor until you don't.

 ## What Goes Where

 | Concern                | Location                                  | Example                                   |
-|---------|----------|---------|
+|------------------------|-------------------------------------------|-------------------------------------------|
 | Input validation (Zod) | `_lib/schemas/`                           | `CreateProjectSchema`                     |
 | Business logic         | `_lib/server/*.service.ts`                | `ProjectService.create()`                 |
 | Auth check             | Adapter (`enhanceAction({ auth: true })`) | Server action wrapper                     |
@@ -305,4 +314,5 @@ const result = await client.from('projects').insert(...).select().single();

 ## Reference

-See `[Examples](examples.md)` for more patterns including services with multiple dependencies, services that compose other services, and testing strategies.
+See `[Examples](examples.md)` for more patterns including services with multiple dependencies, services that compose
+other services, and testing strategies.
--- a/.github/ISSUE_TEMPLATE/BUG-REPORT.yml
+++ b/.github/ISSUE_TEMPLATE/BUG-REPORT.yml
@@ -1,14 +1,12 @@
-name: "🐛 Bug Report"
+name: '🐛 Bug Report'
 description: Create a new ticket for a bug.
-title: "🐛 [BUG] - <title>"
-labels: [
-  "bug"
-]
+title: '🐛 [BUG] - <title>'
+labels: ['bug']
 body:
  - type: textarea
    id: description
    attributes:
-      label: "Description"
+      label: 'Description'
      description: Please enter an explicit description of your issue
      placeholder: Short and explicit description of your incident...
    validations:
@@ -16,7 +14,7 @@ body:
  - type: textarea
    id: reprod
    attributes:
-      label: "Reproduction steps"
+      label: 'Reproduction steps'
      description: Please enter an explicit description of your issue
      value: |
        1. Go to '...'
@@ -29,13 +27,13 @@ body:
  - type: textarea
    id: logs
    attributes:
-      label: "Logs"
+      label: 'Logs'
      description: Please copy and paste any relevant log output. Please verify both the server logs and the browser logs (if applicable). This will be automatically formatted into code, so no need for backticks. If you cannot provide logs, simply write N/A.
      render: bash
  - type: textarea
    id: screenshot
    attributes:
-      label: "Screenshots"
+      label: 'Screenshots'
      description: If applicable, add screenshots to help explain your problem.
      value: |
        ![DESCRIPTION](LINK.png)
@@ -45,7 +43,7 @@ body:
  - type: dropdown
    id: browsers
    attributes:
-      label: "Browsers"
+      label: 'Browsers'
      description: What browsers are you seeing the problem on ?
      multiple: true
      options:
@@ -59,7 +57,7 @@ body:
  - type: dropdown
    id: os
    attributes:
-      label: "OS"
+      label: 'OS'
      description: What is the impacted environment ?
      multiple: true
      options:
--- a/.github/workflows/workflow.yml
+++ b/.github/workflows/workflow.yml
@@ -8,7 +8,7 @@ jobs:
  typescript:
    name: ʦ TypeScript
    timeout-minutes: 10
-    runs-on: ubuntu-latest
+    runs-on: ${{ vars.RUNNER || 'ubuntu-latest' }}
    env:
      SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
      SUPABASE_DB_WEBHOOK_SECRET: ${{ secrets.SUPABASE_DB_WEBHOOK_SECRET }}
@@ -48,7 +48,7 @@ jobs:
  test:
    name: ⚫️ Test
    timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: ${{ vars.RUNNER || 'ubuntu-latest' }}
    if: ${{ vars.ENABLE_E2E_JOB == 'true' }}
    env:
      SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
--- a/.junie/guidelines.md
+++ b/.junie/guidelines.md
@@ -556,8 +556,8 @@ function MyFeaturePage() {
  return (
    <>
      <MyFeatureHeader
-        title={<Trans i18nKey={'common:routes.myFeature'} />}
-        description={<Trans i18nKey={'common:myFeatureDescription'} />}
+        title={<Trans i18nKey={'common.routes.myFeature'} />}
+        description={<Trans i18nKey={'common.myFeatureDescription'} />}
      />

      <PageBody>
@@ -830,7 +830,7 @@ import { ProfileAvatar } from '@kit/ui/profile-avatar';
 ## Core Shadcn UI Components

 | Component        | Description                               | Import Path                                                                                     |
-|-----------|-------------|-------------|
+|------------------|-------------------------------------------|-------------------------------------------------------------------------------------------------|
 | `Accordion`      | Expandable/collapsible content sections   | `@kit/ui/accordion` [accordion.tsx](mdc:packages/ui/src/shadcn/accordion.tsx)                   |
 | `AlertDialog`    | Modal dialog for important actions        | `@kit/ui/alert-dialog` [alert-dialog.tsx](mdc:packages/ui/src/shadcn/alert-dialog.tsx)          |
 | `Alert`          | Status/notification messages              | `@kit/ui/alert` [alert.tsx](mdc:packages/ui/src/shadcn/alert.tsx)                               |
@@ -856,7 +856,7 @@ import { ProfileAvatar } from '@kit/ui/profile-avatar';
 | `Select`         | Dropdown selection menu                   | `@kit/ui/select` [select.tsx](mdc:packages/ui/src/shadcn/select.tsx)                            |
 | `Separator`      | Visual divider between content            | `@kit/ui/separator` [separator.tsx](mdc:packages/ui/src/shadcn/separator.tsx)                   |
 | `Sheet`          | Sliding panel from screen edge            | `@kit/ui/sheet` [sheet.tsx](mdc:packages/ui/src/shadcn/sheet.tsx)                               |
-| `Sidebar` | Advanced sidebar navigation | `@kit/ui/shadcn-sidebar` [sidebar.tsx](mdc:packages/ui/src/shadcn/sidebar.tsx) |
+| `Sidebar`        | Advanced sidebar navigation               | `@kit/ui/sidebar` [sidebar.tsx](mdc:packages/ui/src/shadcn/sidebar.tsx)                         |
 | `Skeleton`       | Loading placeholder                       | `@kit/ui/skeleton` [skeleton.tsx](mdc:packages/ui/src/shadcn/skeleton.tsx)                      |
 | `Switch`         | Toggle control                            | `@kit/ui/switch` [switch.tsx](mdc:packages/ui/src/shadcn/switch.tsx)                            |
 | `Toast`          | Toaster                                   | `@kit/ui/sonner` [sonner.tsx](mdc:packages/ui/src/shadcn/sonner.tsx)                            |
@@ -920,7 +920,7 @@ Zod schemas should be defined in the `schema` folder and exported, so we can reu

 ```tsx
 // _lib/schema/create-note.schema.ts
-import { z } from 'zod';
+import * as z from 'zod';

 export const CreateNoteSchema = z.object({
  title: z.string().min(1),
@@ -935,7 +935,7 @@ Server Actions [server-actions.mdc](mdc:.cursor/rules/server-actions.mdc) can he
 ```tsx
 'use server';

-import { z } from 'zod';
+import * as z from 'zod';
 import { enhanceAction } from '@kit/next/actions';
 import { CreateNoteSchema } from '../schema/create-note.schema';

@@ -965,7 +965,7 @@ Then create a client component to handle the form submission:

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+import * as z from 'zod';
 import { Textarea } from '@kit/ui/textarea';
 import { Input } from '@kit/ui/input';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@kit/ui/form';
@@ -1436,7 +1436,7 @@ You always must use `(security_invoker = true)` for views.
 ```tsx
 'use server';

-import { z } from 'zod';
+import * as z from 'zod';
 import { enhanceAction } from '@kit/next/actions';
 import { EntitySchema } from '../entity.schema.ts`;

@@ -1463,7 +1463,7 @@ export const myServerAction = enhanceAction(
 - To create API routes (route.ts), always use the `enhanceRouteHandler` function from the "@kit/supabase/routes" package. [index.ts](mdc:packages/next/src/routes/index.ts)

 ```tsx
-import { z } from 'zod';
+import * as z from 'zod';
 import { enhanceRouteHandler } from '@kit/next/routes';
 import { NextResponse } from 'next/server';

--- a/.npmrc
+++ b/.npmrc
@@ -3,9 +3,6 @@ dedupe-peer-dependents=true
 use-lockfile-v6=true
 resolution-mode=highest
 package-manager-strict=false
-public-hoist-pattern[]=*i18next*
-public-hoist-pattern[]=*eslint*
-public-hoist-pattern[]=*prettier*
 public-hoist-pattern[]=*require-in-the-middle*
 public-hoist-pattern[]=*import-in-the-middle*
 public-hoist-pattern[]=*pino*
--- a/.oxfmtrc.jsonc
+++ b/.oxfmtrc.jsonc
@@ -0,0 +1,64 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "printWidth": 80,
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always",
+  "sortImports": {
+    "customGroups": [
+      {
+        "groupName": "server-only",
+        "elementNamePattern": ["server-only"],
+      },
+      {
+        "groupName": "react",
+        "elementNamePattern": ["react", "react-dom"],
+      },
+      {
+        "groupName": "next",
+        "elementNamePattern": ["next", "next/**"],
+      },
+      {
+        "groupName": "supabase",
+        "elementNamePattern": ["@supabase/**"],
+      },
+      {
+        "groupName": "kit",
+        "elementNamePattern": ["@kit/**"],
+      },
+      {
+        "groupName": "app",
+        "elementNamePattern": ["~/**"],
+      },
+    ],
+    "groups": [
+      "server-only",
+      "react",
+      "next",
+      "supabase",
+      "external",
+      "kit",
+      "app",
+      ["parent", "sibling", "index"],
+      "style",
+    ],
+    "newlinesBetween": true,
+    "order": "asc",
+  },
+  "sortTailwindcss": {
+    "functions": ["tw", "clsx", "cn", "cva"],
+  },
+  "ignorePatterns": [
+    "node_modules",
+    "database.types.ts",
+    "playwright-report",
+    "*.hbs",
+    "*.md",
+    "dist",
+    "build",
+    ".next",
+    "next-env.d.ts",
+  ],
+}
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -0,0 +1,59 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "nextjs", "import"],
+  "rules": {
+    "no-undef": "off",
+    "typescript/triple-slash-reference": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/no-anonymous-default-export": "off",
+    "import/named": "off",
+    "import/namespace": "off",
+    "import/default": "off",
+    "import/no-unresolved": "off",
+    "import/no-named-as-default-member": "off",
+    "import/no-named-as-default": "off",
+    "import/no-cycle": "off",
+    "import/no-unused-modules": "off",
+    "import/no-deprecated": "off",
+    "typescript/array-type": "off",
+    "typescript/no-unsafe-assignment": "off",
+    "typescript/no-unsafe-argument": "off",
+    "typescript/consistent-type-definitions": "off",
+    "typescript/no-unsafe-member-access": "off",
+    "typescript/non-nullable-type-assertion-style": "off",
+    "typescript/only-throw-error": "off",
+    "typescript/prefer-nullish-coalescing": "off",
+    "typescript/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "nextjs/no-html-link-for-pages": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "react-i18next",
+            "importNames": ["Trans"],
+            "message": "Please use `@kit/ui/trans` instead"
+          }
+        ]
+      }
+    ]
+  },
+  "ignorePatterns": [
+    "**/node_modules",
+    "**/database.types.ts",
+    "**/.next",
+    "**/public",
+    "**/__tests__/",
+    "dist",
+    "pnpm-lock.yaml",
+    "apps/dev-tool",
+    "tooling/scripts"
+  ]
+}
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,8 +0,0 @@
-database.types.ts
-playwright-report
-*.hbs
-*.md
-dist
-build
-.next
-next-env.d.ts
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,7 +10,7 @@
 ## Monorepo Structure

 | Directory           | Purpose                       | Details                           |
-|-----------|---------|---------|
+| ------------------- | ----------------------------- | --------------------------------- |
 | `apps/web`          | Main Next.js app              | See `apps/web/AGENTS.md`          |
 | `apps/web/supabase` | Database schemas & migrations | See `apps/web/supabase/AGENTS.md` |
 | `apps/e2e`          | Playwright E2E tests          | See `apps/e2e/AGENTS.md`          |
@@ -19,6 +19,14 @@
 | `packages/next`     | Next.js utilities             | See `packages/next/AGENTS.md`     |
 | `packages/features` | Feature packages              | See `packages/features/AGENTS.md` |

+<!-- BEGIN:nextjs-agent-rules -->
+
+# Next.js: ALWAYS read docs before coding
+
+Before any Next.js work, find and read the relevant doc in `apps/web/node_modules/next/dist/docs/`. Your training data is outdated — the docs are the source of truth.
+
+<!-- END:nextjs-agent-rules -->
+
 ## Multi-Tenant Architecture

 - **Personal Accounts**: `auth.users.id = accounts.id`
@@ -40,8 +48,8 @@ pnpm format:fix                   # Format code
 ## Key Patterns (Quick Reference)

 | Pattern        | Import                                                       | Details                       |
-|---------|--------|---------|
-| Server Actions | `enhanceAction` from `@kit/next/actions` | `packages/next/AGENTS.md` |
+| -------------- | ------------------------------------------------------------ | ----------------------------- |
+| Server Actions | `authActionClient` from `@kit/next/safe-action`              | `packages/next/AGENTS.md`     |
 | Route Handlers | `enhanceRouteHandler` from `@kit/next/routes`                | `packages/next/AGENTS.md`     |
 | Server Client  | `getSupabaseServerClient` from `@kit/supabase/server-client` | `packages/supabase/AGENTS.md` |
 | UI Components  | `@kit/ui/{component}`                                        | `packages/ui/AGENTS.md`       |
@@ -55,6 +63,7 @@ pnpm format:fix                   # Format code
 ## Verification

 After implementation, always run:
+
 1. `pnpm typecheck`
 2. `pnpm lint:fix`
 3. `pnpm format:fix`
--- a/apps/dev-tool/app/components/components/alert-dialog-story.tsx
+++ b/apps/dev-tool/app/components/components/alert-dialog-story.tsx
@@ -120,9 +120,7 @@ export function AlertDialogStory() {

  const generateCode = () => {
    let code = `<AlertDialog>\n`;
-    code += `  <AlertDialogTrigger asChild>\n`;
-    code += `    <Button variant="${controls.triggerVariant}">${controls.triggerText}</Button>\n`;
-    code += `  </AlertDialogTrigger>\n`;
+    code += `  <AlertDialogTrigger render={<Button variant="${controls.triggerVariant}">${controls.triggerText}</Button>} />\n`;
    code += `  <AlertDialogContent>\n`;
    code += `    <AlertDialogHeader>\n`;

@@ -179,11 +177,14 @@ export function AlertDialogStory() {
  const renderPreview = () => {
    return (
      <AlertDialog>
-        <AlertDialogTrigger asChild>
+        <AlertDialogTrigger
+          render={
            <Button variant={controls.triggerVariant}>
              {controls.triggerText}
            </Button>
-        </AlertDialogTrigger>
+          }
+        />
+
        <AlertDialogContent>
          <AlertDialogHeader>
            {controls.withIcon ? (
@@ -341,11 +342,11 @@ export function AlertDialogStory() {
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-3">
            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="destructive" size="sm">
+              <AlertDialogTrigger
+                render={<Button variant="destructive" size="sm" />}
+              >
                <Trash2 className="mr-2 h-4 w-4" />
                Delete Item
-                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
@@ -370,11 +371,9 @@ export function AlertDialogStory() {
            </AlertDialog>

            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline">
+              <AlertDialogTrigger render={<Button variant="outline" />}>
                <LogOut className="mr-2 h-4 w-4" />
                Sign Out
-                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
@@ -397,11 +396,9 @@ export function AlertDialogStory() {
            </AlertDialog>

            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline">
+              <AlertDialogTrigger render={<Button variant="outline" />}>
                <UserX className="mr-2 h-4 w-4" />
                Remove User
-                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
@@ -438,11 +435,9 @@ export function AlertDialogStory() {
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-3">
            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline">
+              <AlertDialogTrigger render={<Button variant="outline" />}>
                <Archive className="mr-2 h-4 w-4" />
                Archive Project
-                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
@@ -465,11 +460,9 @@ export function AlertDialogStory() {
            </AlertDialog>

            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button>
+              <AlertDialogTrigger render={<Button />}>
                <Download className="mr-2 h-4 w-4" />
                Export Data
-                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
@@ -493,11 +486,9 @@ export function AlertDialogStory() {
            </AlertDialog>

            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline">
+              <AlertDialogTrigger render={<Button variant="outline" />}>
                <RefreshCw className="mr-2 h-4 w-4" />
                Reset Settings
-                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
@@ -535,11 +526,11 @@ export function AlertDialogStory() {
            <div className="space-y-3">
              <h4 className="text-sm font-semibold">Error/Destructive</h4>
              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="destructive" size="sm">
+                <AlertDialogTrigger
+                  render={<Button variant="destructive" size="sm" />}
+                >
                  <Trash2 className="mr-2 h-4 w-4" />
                  Delete Forever
-                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
@@ -567,11 +558,11 @@ export function AlertDialogStory() {
            <div className="space-y-3">
              <h4 className="text-sm font-semibold">Warning</h4>
              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline" size="sm">
+                <AlertDialogTrigger
+                  render={<Button variant="outline" size="sm" />}
+                >
                  <AlertTriangle className="mr-2 h-4 w-4" />
                  Unsaved Changes
-                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
@@ -597,11 +588,11 @@ export function AlertDialogStory() {
            <div className="space-y-3">
              <h4 className="text-sm font-semibold">Info</h4>
              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline" size="sm">
+                <AlertDialogTrigger
+                  render={<Button variant="outline" size="sm" />}
+                >
                  <Share className="mr-2 h-4 w-4" />
                  Share Publicly
-                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
@@ -627,11 +618,9 @@ export function AlertDialogStory() {
            <div className="space-y-3">
              <h4 className="text-sm font-semibold">Success</h4>
              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button size="sm">
+                <AlertDialogTrigger render={<Button size="sm" />}>
                  <Download className="mr-2 h-4 w-4" />
                  Complete Setup
-                  </Button>
                </AlertDialogTrigger>
                <AlertDialogContent>
                  <AlertDialogHeader>
@@ -850,10 +839,8 @@ export function AlertDialogStory() {
            <h4 className="text-sm font-semibold">Focus Management</h4>
            <p className="text-muted-foreground text-sm">
              • Focus moves to Cancel button by default
-              <br />
-              • Tab navigation between Cancel and Action
-              <br />
-              • Escape key activates Cancel action
+              <br />• Tab navigation between Cancel and Action
+              <br />• Escape key activates Cancel action
              <br />• Enter key activates Action button when focused
            </p>
          </div>
@@ -861,10 +848,8 @@ export function AlertDialogStory() {
            <h4 className="text-sm font-semibold">Content Guidelines</h4>
            <p className="text-muted-foreground text-sm">
              • Use clear, specific titles and descriptions
-              <br />
-              • Explain consequences of the action
-              <br />
-              • Use action-specific button labels
+              <br />• Explain consequences of the action
+              <br />• Use action-specific button labels
              <br />• Always provide a way to cancel
            </p>
          </div>
@@ -872,8 +857,7 @@ export function AlertDialogStory() {
            <h4 className="text-sm font-semibold">Visual Design</h4>
            <p className="text-muted-foreground text-sm">
              • Use appropriate icons and colors for severity
-              <br />
-              • Make destructive actions visually distinct
+              <br />• Make destructive actions visually distinct
              <br />• Ensure sufficient contrast for all text
            </p>
          </div>
@@ -892,8 +876,7 @@ export function AlertDialogStory() {
            <h4 className="text-sm font-semibold">Title Guidelines</h4>
            <p className="text-muted-foreground text-sm">
              • Be specific about the action (not just "Are you sure?")
-              <br />
-              • Use active voice ("Delete account" not "Account deletion")
+              <br />• Use active voice ("Delete account" not "Account deletion")
              <br />• Keep it concise but descriptive
            </p>
          </div>
@@ -901,10 +884,8 @@ export function AlertDialogStory() {
            <h4 className="text-sm font-semibold">Description Guidelines</h4>
            <p className="text-muted-foreground text-sm">
              • Explain what will happen
-              <br />
-              • Mention if the action is irreversible
-              <br />
-              • Provide context about consequences
+              <br />• Mention if the action is irreversible
+              <br />• Provide context about consequences
              <br />• Use plain, non-technical language
            </p>
          </div>
@@ -912,10 +893,8 @@ export function AlertDialogStory() {
            <h4 className="text-sm font-semibold">Button Labels</h4>
            <p className="text-muted-foreground text-sm">
              • Use specific verbs ("Delete", "Save", "Continue")
-              <br />
-              • Match the action being performed
-              <br />
-              • Avoid generic labels when possible
+              <br />• Match the action being performed
+              <br />• Avoid generic labels when possible
              <br />• Make the primary action clear
            </p>
          </div>
--- a/apps/dev-tool/app/components/components/button-story.tsx
+++ b/apps/dev-tool/app/components/components/button-story.tsx
@@ -33,7 +33,6 @@ interface ButtonControls {
  loading: boolean;
  withIcon: boolean;
  fullWidth: boolean;
-  asChild: boolean;
 }

 const variantOptions = [
@@ -68,7 +67,6 @@ export function ButtonStory() {
    loading: false,
    withIcon: false,
    fullWidth: false,
-    asChild: false,
  });

  const generateCode = () => {
@@ -77,14 +75,12 @@ export function ButtonStory() {
        variant: controls.variant,
        size: controls.size,
        disabled: controls.disabled,
-        asChild: controls.asChild,
        className: controls.fullWidth ? 'w-full' : '',
      },
      {
        variant: 'default',
        size: 'default',
        disabled: false,
-        asChild: false,
        className: '',
      },
    );
@@ -194,15 +190,6 @@ export function ButtonStory() {
          onCheckedChange={(checked) => updateControl('fullWidth', checked)}
        />
      </div>
-
-      <div className="flex items-center justify-between">
-        <Label htmlFor="asChild">As Child</Label>
-        <Switch
-          id="asChild"
-          checked={controls.asChild}
-          onCheckedChange={(checked) => updateControl('asChild', checked)}
-        />
-      </div>
    </>
  );

--- a/apps/dev-tool/app/components/components/calendar-story.tsx
+++ b/apps/dev-tool/app/components/components/calendar-story.tsx
@@ -276,11 +276,11 @@ export default function CalendarStory() {
        <Card>
          <CardContent className="flex justify-center pt-6">
            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline" className="justify-start">
+              <PopoverTrigger
+                render={<Button variant="outline" className="justify-start" />}
+              >
                <CalendarIcon className="mr-2 h-4 w-4" />
                Pick a date
-                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="start">
                <Calendar
--- a/apps/dev-tool/app/components/components/card-button-story.tsx
+++ b/apps/dev-tool/app/components/components/card-button-story.tsx
@@ -320,10 +320,12 @@ export function CardButtonStory() {
                </thead>
                <tbody>
                  <tr className="border-b">
-                    <td className="p-3 font-mono text-sm">asChild</td>
-                    <td className="p-3 font-mono text-sm">boolean</td>
-                    <td className="p-3 font-mono text-sm">false</td>
-                    <td className="p-3">Render as child element</td>
+                    <td className="p-3 font-mono text-sm">render</td>
+                    <td className="p-3 font-mono text-sm">
+                      React.ReactElement
+                    </td>
+                    <td className="p-3 font-mono text-sm">-</td>
+                    <td className="p-3">Compose with a custom element</td>
                  </tr>
                  <tr className="border-b">
                    <td className="p-3 font-mono text-sm">className</td>
--- a/apps/dev-tool/app/components/components/dialog-story.tsx
+++ b/apps/dev-tool/app/components/components/dialog-story.tsx
@@ -139,8 +139,8 @@ export function DialogStory() {
    });

    let code = `<Dialog>\n`;
-    code += `  <DialogTrigger asChild>\n`;
-    code += `    <Button variant="${controls.triggerVariant}">${controls.triggerText}</Button>\n`;
+    code += `  <DialogTrigger render={<Button variant="${controls.triggerVariant}" />}>\n`;
+    code += `    ${controls.triggerText}\n`;
    code += `  </DialogTrigger>\n`;
    code += `  <DialogContent${contentPropsString}>\n`;
    code += `    <DialogHeader>\n`;
@@ -182,8 +182,8 @@ export function DialogStory() {

    if (controls.withFooter) {
      code += `    <DialogFooter>\n`;
-      code += `      <DialogClose asChild>\n`;
-      code += `        <Button variant="outline">Cancel</Button>\n`;
+      code += `      <DialogClose render={<Button variant="outline" />}>\n`;
+      code += `        Cancel\n`;
      code += `      </DialogClose>\n`;
      code += `      <Button>Save Changes</Button>\n`;
      code += `    </DialogFooter>\n`;
@@ -198,10 +198,8 @@ export function DialogStory() {
  const renderPreview = () => {
    return (
      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant={controls.triggerVariant}>
+        <DialogTrigger render={<Button variant={controls.triggerVariant} />}>
          {controls.triggerText}
-          </Button>
        </DialogTrigger>
        <DialogContent
          className={cn(
@@ -271,8 +269,8 @@ export function DialogStory() {

          {controls.withFooter && (
            <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="outline">Cancel</Button>
+              <DialogClose render={<Button variant="outline" />}>
+                Cancel
              </DialogClose>
              <Button>Save Changes</Button>
            </DialogFooter>
@@ -391,11 +389,9 @@ export function DialogStory() {
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-3">
            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="outline">
+              <DialogTrigger render={<Button variant="outline" />}>
                <Info className="mr-2 h-4 w-4" />
                Info Dialog
-                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
@@ -412,19 +408,15 @@ export function DialogStory() {
                  </p>
                </div>
                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button>Got it</Button>
-                  </DialogClose>
+                  <DialogClose render={<Button />}>Got it</DialogClose>
                </DialogFooter>
              </DialogContent>
            </Dialog>

            <Dialog>
-              <DialogTrigger asChild>
-                <Button>
+              <DialogTrigger render={<Button />}>
                <Edit className="mr-2 h-4 w-4" />
                Edit Profile
-                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
@@ -456,8 +448,8 @@ export function DialogStory() {
                  </div>
                </div>
                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button variant="outline">Cancel</Button>
+                  <DialogClose render={<Button variant="outline" />}>
+                    Cancel
                  </DialogClose>
                  <Button>Save Changes</Button>
                </DialogFooter>
@@ -465,11 +457,9 @@ export function DialogStory() {
            </Dialog>

            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="secondary">
+              <DialogTrigger render={<Button variant="secondary" />}>
                <Settings className="mr-2 h-4 w-4" />
                Settings
-                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
@@ -499,8 +489,8 @@ export function DialogStory() {
                  </div>
                </div>
                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button variant="outline">Cancel</Button>
+                  <DialogClose render={<Button variant="outline" />}>
+                    Cancel
                  </DialogClose>
                  <Button>Save</Button>
                </DialogFooter>
@@ -518,10 +508,8 @@ export function DialogStory() {
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-3">
            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
+              <DialogTrigger render={<Button variant="outline" size="sm" />}>
                Small Dialog
-                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md">
                <DialogHeader>
@@ -536,16 +524,14 @@ export function DialogStory() {
                  </p>
                </div>
                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button>Close</Button>
-                  </DialogClose>
+                  <DialogClose render={<Button />}>Close</DialogClose>
                </DialogFooter>
              </DialogContent>
            </Dialog>

            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="outline">Large Dialog</Button>
+              <DialogTrigger render={<Button variant="outline" />}>
+                Large Dialog
              </DialogTrigger>
              <DialogContent className="max-w-2xl">
                <DialogHeader>
@@ -571,8 +557,8 @@ export function DialogStory() {
                  </div>
                </div>
                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button variant="outline">Cancel</Button>
+                  <DialogClose render={<Button variant="outline" />}>
+                    Cancel
                  </DialogClose>
                  <Button>Save</Button>
                </DialogFooter>
@@ -590,11 +576,9 @@ export function DialogStory() {
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-3">
            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="outline">
+              <DialogTrigger render={<Button variant="outline" />}>
                <Image className="mr-2 h-4 w-4" />
                Image Gallery
-                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-2xl">
                <DialogHeader>
@@ -627,11 +611,9 @@ export function DialogStory() {
            </Dialog>

            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="outline">
+              <DialogTrigger render={<Button variant="outline" />}>
                <MessageSquare className="mr-2 h-4 w-4" />
                Feedback
-                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
@@ -668,8 +650,8 @@ export function DialogStory() {
                  </div>
                </div>
                <DialogFooter>
-                  <DialogClose asChild>
-                    <Button variant="outline">Cancel</Button>
+                  <DialogClose render={<Button variant="outline" />}>
+                    Cancel
                  </DialogClose>
                  <Button>
                    <MessageSquare className="mr-2 h-4 w-4" />
@@ -736,8 +718,8 @@ export function DialogStory() {
          <div>
            <h4 className="mb-3 text-lg font-semibold">DialogTrigger</h4>
            <p className="text-muted-foreground mb-3 text-sm">
-              The element that opens the dialog. Use asChild prop to render as
-              child element.
+              The element that opens the dialog. Use the render prop to compose
+              with a custom element.
            </p>
          </div>

@@ -840,10 +822,8 @@ export function DialogStory() {
            <h4 className="text-sm font-semibold">Focus Management</h4>
            <p className="text-muted-foreground text-sm">
              • Focus moves to dialog when opened
-              <br />
-              • Focus returns to trigger when closed
-              <br />
-              • Tab navigation stays within dialog
+              <br />• Focus returns to trigger when closed
+              <br />• Tab navigation stays within dialog
              <br />• Escape key closes the dialog
            </p>
          </div>
--- a/apps/dev-tool/app/components/components/docs-sidebar.tsx
+++ b/apps/dev-tool/app/components/components/docs-sidebar.tsx
@@ -2,7 +2,7 @@

 import { useEffect, useRef, useState } from 'react';

-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';

 import { Code2, FileText, Search } from 'lucide-react';

@@ -35,6 +35,7 @@ export function DocsSidebar({
  selectedCategory,
 }: DocsSidebarProps) {
  const [searchQuery, setSearchQuery] = useState('');
+  const searchParams = useSearchParams();
  const router = useRouter();

  const filteredComponents = COMPONENTS_REGISTRY.filter((c) =>
@@ -50,21 +51,21 @@ export function DocsSidebar({
    .sort((a, b) => a.name.localeCompare(b.name));

  const onCategorySelect = (category: string | null) => {
-    const searchParams = new URLSearchParams(window.location.search);
-    searchParams.set('category', category || '');
-    router.push(`/components?${searchParams.toString()}`);
+    const sp = new URLSearchParams(searchParams);
+    sp.set('category', category || '');
+    router.push(`/components?${sp.toString()}`);
  };

  const onComponentSelect = (component: ComponentInfo) => {
-    const searchParams = new URLSearchParams(window.location.search);
-    searchParams.set('component', component.name);
-    router.push(`/components?${searchParams.toString()}`);
+    const sp = new URLSearchParams(searchParams);
+    sp.set('component', component.name);
+    router.push(`/components?${sp.toString()}`);
  };

  return (
    <div className="bg-muted/30 flex h-screen w-80 flex-col overflow-hidden border-r">
      {/* Header */}
-      <div className="flex-shrink-0 border-b p-4">
+      <div className="shrink-0 border-b p-4">
        <div className="mb-2 flex items-center gap-2">
          <Code2 className="text-primary h-6 w-6" />

@@ -77,13 +78,14 @@ export function DocsSidebar({
      </div>

      {/* Controls */}
-      <div className="flex-shrink-0 space-y-2 border-b p-4">
+      <div className="shrink-0 space-y-2 border-b p-4">
        {/* Category Select */}
        <div className="space-y-2">
          <Select
-            value={selectedCategory || 'all'}
+            defaultValue={selectedCategory || 'all'}
            onValueChange={(value) => {
              const category = value === 'all' ? null : value;
+
              onCategorySelect(category);

              // Select first component in the filtered results
@@ -96,8 +98,12 @@ export function DocsSidebar({
              }
            }}
          >
-            <SelectTrigger>
-              <SelectValue placeholder={'Select a category'} />
+            <SelectTrigger className="w-full">
+              <SelectValue>
+                {(category) => {
+                  return category === 'all' ? 'All Categories' : category;
+                }}
+              </SelectValue>
            </SelectTrigger>

            <SelectContent>
@@ -154,7 +160,7 @@ export function DocsSidebar({

      {/* Components List - Scrollable */}
      <div className="flex flex-1 flex-col overflow-y-auto">
-        <div className="flex-shrink-0 p-4 pb-2">
+        <div className="shrink-0 p-4 pb-2">
          <h3 className="flex items-center gap-2 text-sm font-semibold">
            <FileText className="h-4 w-4" />
            Components
--- a/apps/dev-tool/app/components/components/dropdown-menu-story.tsx
+++ b/apps/dev-tool/app/components/components/dropdown-menu-story.tsx
@@ -101,13 +101,18 @@ const examples = [
      return (
        <div className="flex min-h-32 items-center justify-center">
          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  className="relative h-8 w-8 rounded-full"
+                />
+              }
+            >
              <Avatar className="h-8 w-8">
                <AvatarImage src="/avatars/01.png" alt="@username" />
                <AvatarFallback>JD</AvatarFallback>
              </Avatar>
-              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56" align="end" forceMount>
              <DropdownMenuLabel className="font-normal">
@@ -185,11 +190,11 @@ const examples = [
              </div>

              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="h-8 w-8 p-0">
+                <DropdownMenuTrigger
+                  render={<Button variant="ghost" className="h-8 w-8 p-0" />}
+                >
                  <span className="sr-only">Open menu</span>
                  <MoreHorizontal className="h-4 w-4" />
-                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                  <DropdownMenuItem onClick={() => setSelectedAction('open')}>
@@ -275,11 +280,9 @@ const examples = [
      return (
        <div className="flex min-h-48 items-center justify-center">
          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline">
+            <DropdownMenuTrigger render={<Button variant="outline" />}>
              <Plus className="mr-2 h-4 w-4" />
              Create New
-              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56">
              <DropdownMenuLabel>Create Content</DropdownMenuLabel>
@@ -393,11 +396,11 @@ const examples = [
              <span className="text-sm">Appearance & Layout</span>

              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline" size="sm">
+                <DropdownMenuTrigger
+                  render={<Button variant="outline" size="sm" />}
+                >
                  <Settings className="mr-2 h-4 w-4" />
                  Configure
-                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-64" align="end">
                  <DropdownMenuLabel>View Options</DropdownMenuLabel>
@@ -547,10 +550,10 @@ const examples = [
                </div>

                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" className="h-8 w-8 p-0">
+                  <DropdownMenuTrigger
+                    render={<Button variant="ghost" className="h-8 w-8 p-0" />}
+                  >
                    <MoreHorizontal className="h-4 w-4" />
-                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48">
                    <DropdownMenuItem
@@ -863,7 +866,7 @@ export default function DropdownMenuStory() {
      modal: controls.modal ? true : undefined,
    });

-    const dropdownStructure = `<DropdownMenu${rootProps}>\n  <DropdownMenuTrigger asChild>\n    <Button variant="outline">Open Menu</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent${contentProps}>\n    <DropdownMenuItem>\n      <User className="mr-2 h-4 w-4" />\n      <span>Profile</span>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <Settings className="mr-2 h-4 w-4" />\n      <span>Settings</span>\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <LogOut className="mr-2 h-4 w-4" />\n      <span>Log out</span>\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>`;
+    const dropdownStructure = `<DropdownMenu${rootProps}>\n  <DropdownMenuTrigger render={<Button variant="outline" />}>\n    Open Menu\n  </DropdownMenuTrigger>\n  <DropdownMenuContent${contentProps}>\n    <DropdownMenuItem>\n      <User className="mr-2 h-4 w-4" />\n      <span>Profile</span>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <Settings className="mr-2 h-4 w-4" />\n      <span>Settings</span>\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <LogOut className="mr-2 h-4 w-4" />\n      <span>Log out</span>\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>`;

    return `${importStatement}\n${buttonImport}\n${iconImport}\n\n${dropdownStructure}`;
  };
@@ -971,8 +974,8 @@ export default function DropdownMenuStory() {
  const previewContent = (
    <div className="flex justify-center p-6">
      <DropdownMenu modal={controls.modal}>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Open Menu</Button>
+        <DropdownMenuTrigger render={<Button variant="outline" />}>
+          Open Menu
        </DropdownMenuTrigger>
        <DropdownMenuContent
          side={controls.side}
--- a/apps/dev-tool/app/components/components/form-story.tsx
+++ b/apps/dev-tool/app/components/components/form-story.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+import * as z from 'zod';

 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
@@ -119,7 +119,7 @@ export default function FormStory() {
    const formImport = generateImportStatement(formComponents, '@kit/ui/form');
    const inputImport = generateImportStatement(['Input'], '@kit/ui/input');
    const buttonImport = generateImportStatement(['Button'], '@kit/ui/button');
-    const hookFormImports = `import { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';`;
+    const hookFormImports = `import { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as z from 'zod';`;

    let schemaCode = '';
    let formFieldsCode = '';
@@ -130,19 +130,19 @@ export default function FormStory() {

      formFieldsCode = `        <FormField\n          control={form.control}\n          name="username"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}placeholder="Enter username" {...field} />\n              </FormControl>${controls.showDescriptions ? '\n              <FormDescription>\n                Your public display name.\n              </FormDescription>' : ''}${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name="email"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}type="email" placeholder="Enter email" {...field} />\n              </FormControl>${controls.showDescriptions ? "\n              <FormDescription>\n                We'll never share your email.\n              </FormDescription>" : ''}${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />`;

-      onSubmitCode = `  function onSubmit(values: z.infer<typeof formSchema>) {\n    console.log('Form submitted:', values);\n  }`;
+      onSubmitCode = `  function onSubmit(values: z.output<typeof formSchema>) {\n    console.log('Form submitted:', values);\n  }`;
    } else if (controls.formType === 'advanced') {
      schemaCode = `const formSchema = z.object({\n  firstName: z.string().min(1, 'First name is required.'),\n  lastName: z.string().min(1, 'Last name is required.'),\n  email: z.string().email('Please enter a valid email address.'),\n});`;

      formFieldsCode = `        <FormField\n          control={form.control}\n          name="firstName"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>First Name</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}placeholder="John" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name="lastName"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Last Name</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}placeholder="Doe" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />`;

-      onSubmitCode = `  function onSubmit(values: z.infer<typeof formSchema>) {\n    console.log('Advanced form submitted:', values);\n  }`;
+      onSubmitCode = `  function onSubmit(values: z.output<typeof formSchema>) {\n    console.log('Advanced form submitted:', values);\n  }`;
    } else {
      schemaCode = `const formSchema = z.object({\n  password: z.string().min(8, 'Password must be at least 8 characters.'),\n  confirmPassword: z.string(),\n}).refine((data) => data.password === data.confirmPassword, {\n  message: 'Passwords do not match.',\n  path: ['confirmPassword'],\n});`;

      formFieldsCode = `        <FormField\n          control={form.control}\n          name="password"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Password</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}type="password" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name="confirmPassword"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Confirm Password</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}type="password" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />`;

-      onSubmitCode = `  function onSubmit(values: z.infer<typeof formSchema>) {\n    console.log('Validation form submitted:', values);\n  }`;
+      onSubmitCode = `  function onSubmit(values: z.output<typeof formSchema>) {\n    console.log('Validation form submitted:', values);\n  }`;
    }

    const defaultValuesCode =
@@ -152,13 +152,13 @@ export default function FormStory() {
          ? `    defaultValues: {\n      firstName: '',\n      lastName: '',\n      email: '',\n    },`
          : `    defaultValues: {\n      password: '',\n      confirmPassword: '',\n    },`;

-    const fullFormCode = `${hookFormImports}\n${formImport}\n${inputImport}\n${buttonImport}\n\n${schemaCode}\n\nfunction MyForm() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n${defaultValuesCode}\n  });\n\n${onSubmitCode}\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">\n${formFieldsCode}\n        <Button type="submit"${controls.disabled ? ' disabled' : ''}>Submit</Button>\n      </form>\n    </Form>\n  );\n}`;
+    const fullFormCode = `${hookFormImports}\n${formImport}\n${inputImport}\n${buttonImport}\n\n${schemaCode}\n\nfunction MyForm() {\n  const form = useForm<z.output<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n${defaultValuesCode}\n  });\n\n${onSubmitCode}\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">\n${formFieldsCode}\n        <Button type="submit"${controls.disabled ? ' disabled' : ''}>Submit</Button>\n      </form>\n    </Form>\n  );\n}`;

    return fullFormCode;
  };

  // Basic form
-  const basicForm = useForm<z.infer<typeof basicFormSchema>>({
+  const basicForm = useForm<z.output<typeof basicFormSchema>>({
    resolver: zodResolver(basicFormSchema),
    defaultValues: {
      username: '',
@@ -169,7 +169,7 @@ export default function FormStory() {
  });

  // Advanced form
-  const advancedForm = useForm<z.infer<typeof advancedFormSchema>>({
+  const advancedForm = useForm<z.output<typeof advancedFormSchema>>({
    resolver: zodResolver(advancedFormSchema),
    defaultValues: {
      firstName: '',
@@ -183,7 +183,7 @@ export default function FormStory() {
  });

  // Validation form
-  const validationForm = useForm<z.infer<typeof validationFormSchema>>({
+  const validationForm = useForm<z.output<typeof validationFormSchema>>({
    resolver: zodResolver(validationFormSchema),
    defaultValues: {
      password: '',
@@ -1056,7 +1056,7 @@ export default function FormStory() {
              <pre className="overflow-x-auto text-sm">
                {`import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
+import * as z from 'zod';
 import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@kit/ui/form';

 const formSchema = z.object({
@@ -1065,7 +1065,7 @@ const formSchema = z.object({
 });

 function MyForm() {
-  const form = useForm<z.infer<typeof formSchema>>({
+  const form = useForm<z.output<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
@@ -1073,7 +1073,7 @@ function MyForm() {
    },
  });

-  function onSubmit(values: z.infer<typeof formSchema>) {
+  function onSubmit(values: z.output<typeof formSchema>) {
    console.log(values);
  }

--- a/apps/dev-tool/app/components/components/kbd-story.tsx
+++ b/apps/dev-tool/app/components/components/kbd-story.tsx
@@ -99,7 +99,7 @@ export function KbdStory() {
    let snippet = groupLines.join('\n');

    if (controls.showTooltip) {
-      snippet = `<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button variant="outline">Command palette</Button>\n    </TooltipTrigger>\n    <TooltipContent className="flex items-center gap-2">\n      <span>Press</span>\n      ${groupLines.join('\n      ')}\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>`;
+      snippet = `<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger render={<Button variant="outline" />}>\n      Command palette\n    </TooltipTrigger>\n    <TooltipContent className="flex items-center gap-2">\n      <span>Press</span>\n      ${groupLines.join('\n      ')}\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>`;
    }

    return formatCodeBlock(snippet, [
@@ -115,11 +115,11 @@ export function KbdStory() {
        {controls.showTooltip ? (
          <TooltipProvider delayDuration={200}>
            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="outline" className="gap-2">
+              <TooltipTrigger
+                render={<Button variant="outline" className="gap-2" />}
+              >
                <Command className="h-4 w-4" />
                Command palette
-                </Button>
              </TooltipTrigger>
              <TooltipContent className="flex items-center gap-2">
                <span>Press</span>
--- a/apps/dev-tool/app/components/components/select-story.tsx
+++ b/apps/dev-tool/app/components/components/select-story.tsx
@@ -763,10 +763,8 @@ export function SelectStory() {
            <h4 className="text-sm font-semibold">Keyboard Navigation</h4>
            <p className="text-muted-foreground text-sm">
              • Space/Enter opens the select
-              <br />
-              • Arrow keys navigate options
-              <br />
-              • Escape closes the dropdown
+              <br />• Arrow keys navigate options
+              <br />• Escape closes the dropdown
              <br />• Type to search/filter options
            </p>
          </div>
--- a/apps/dev-tool/app/components/components/simple-data-table-story.tsx
+++ b/apps/dev-tool/app/components/components/simple-data-table-story.tsx
@@ -136,11 +136,13 @@ export function SimpleDataTableStory() {
                {controls.showActions && (
                  <TableCell>
                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" className="h-8 w-8 p-0">
+                      <DropdownMenuTrigger
+                        render={
+                          <Button variant="ghost" className="h-8 w-8 p-0" />
+                        }
+                      >
                        <span className="sr-only">Open menu</span>
                        <MoreHorizontal className="h-4 w-4" />
-                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem
--- a/apps/dev-tool/app/components/components/switch-story.tsx
+++ b/apps/dev-tool/app/components/components/switch-story.tsx
@@ -100,7 +100,7 @@ export function SwitchStory() {
      className: cn(
        controls.size === 'sm' && 'h-4 w-7',
        controls.size === 'lg' && 'h-6 w-11',
-        controls.error && 'data-[state=checked]:bg-destructive',
+        controls.error && 'data-checked:bg-destructive',
      ),
    };

@@ -200,7 +200,7 @@ export function SwitchStory() {
        className={cn(
          controls.size === 'sm' && 'h-4 w-7',
          controls.size === 'lg' && 'h-6 w-11',
-          controls.error && 'data-[state=checked]:bg-destructive',
+          controls.error && 'data-checked:bg-destructive',
        )}
      />
    );
@@ -616,7 +616,7 @@ export function SwitchStory() {
                </Label>
                <Switch
                  id="error-switch"
-                  className="data-[state=checked]:bg-destructive"
+                  className="data-checked:bg-destructive"
                />
              </div>
              <p className="text-destructive text-sm">
@@ -642,7 +642,7 @@ export function SwitchStory() {
          <div>
            <h4 className="mb-3 text-lg font-semibold">Switch</h4>
            <p className="text-muted-foreground mb-3 text-sm">
-              A toggle switch component for boolean states. Built on Radix UI
+              A toggle switch component for boolean states. Built on Base UI
              Switch primitive.
            </p>
            <div className="overflow-x-auto">
@@ -792,8 +792,7 @@ export function SwitchStory() {
            <h4 className="text-sm font-semibold">Keyboard Navigation</h4>
            <p className="text-muted-foreground text-sm">
              • Tab to focus the switch
-              <br />
-              • Space or Enter to toggle state
+              <br />• Space or Enter to toggle state
              <br />• Arrow keys when part of a radio group
            </p>
          </div>
--- a/apps/dev-tool/app/components/components/tabs-story.tsx
+++ b/apps/dev-tool/app/components/components/tabs-story.tsx
@@ -62,9 +62,9 @@ interface TabsControlsProps {
 const variantClasses = {
  default: '',
  pills:
-    '[&>div]:bg-background [&>div]:border [&>div]:rounded-lg [&>div]:p-1 [&_button]:rounded-md [&_button[data-state=active]]:bg-primary [&_button[data-state=active]]:text-primary-foreground',
+    '[&>div]:bg-background [&>div]:border [&>div]:rounded-lg [&>div]:p-1 [&_button]:rounded-md [&_button[data-active]]:bg-primary [&_button[data-active]]:text-primary-foreground',
  underline:
-    '[&>div]:bg-transparent [&>div]:border-b [&>div]:rounded-none [&_button]:rounded-none [&_button]:border-b-2 [&_button]:border-transparent [&_button[data-state=active]]:border-primary [&_button[data-state=active]]:bg-transparent',
+    '[&>div]:bg-transparent [&>div]:border-b [&>div]:rounded-none [&_button]:rounded-none [&_button]:border-b-2 [&_button]:border-transparent [&_button[data-active]]:border-primary [&_button[data-active]]:bg-transparent',
 };

 const sizeClasses = {
@@ -683,28 +683,28 @@ function App() {
              <TabsList className="h-auto rounded-none border-b bg-transparent p-0">
                <TabsTrigger
                  value="overview"
-                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
+                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
                >
                  <BarChart3 className="mr-2 h-4 w-4" />
                  Overview
                </TabsTrigger>
                <TabsTrigger
                  value="users"
-                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
+                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
                >
                  <User className="mr-2 h-4 w-4" />
                  Users
                </TabsTrigger>
                <TabsTrigger
                  value="revenue"
-                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
+                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
                >
                  <CreditCard className="mr-2 h-4 w-4" />
                  Revenue
                </TabsTrigger>
                <TabsTrigger
                  value="reports"
-                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
+                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
                >
                  <FileText className="mr-2 h-4 w-4" />
                  Reports
@@ -905,8 +905,7 @@ const apiReference = {
    {
      name: '...props',
      type: 'React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>',
-      description:
-        'All props from Radix UI Tabs.Root component including asChild, id, etc.',
+      description: 'All additional props from Base UI Tabs.Root component.',
    },
  ],
  examples: [
--- a/apps/dev-tool/app/components/components/tooltip-story.tsx
+++ b/apps/dev-tool/app/components/components/tooltip-story.tsx
@@ -144,22 +144,23 @@ function TooltipStory() {

    let code = `<TooltipProvider${providerPropsString}>\n`;
    code += `  <Tooltip>\n`;
-    code += `    <TooltipTrigger asChild>\n`;
-
    if (controls.triggerType === 'button') {
-      code += `      <Button variant="${controls.triggerVariant}">Hover me</Button>\n`;
+      code += `    <TooltipTrigger render={<Button variant="${controls.triggerVariant}" />}>\n`;
+      code += `      Hover me\n`;
    } else if (controls.triggerType === 'icon') {
-      code += `      <Button variant="${controls.triggerVariant}" size="icon">\n`;
      const iconName = selectedIconData?.icon.name || 'Info';
+      code += `    <TooltipTrigger render={<Button variant="${controls.triggerVariant}" size="icon" />}>\n`;
      code += `      <${iconName} className="h-4 w-4" />\n`;
-      code += `      </Button>\n`;
    } else if (controls.triggerType === 'text') {
-      code += `      <span className="cursor-help underline decoration-dotted">Hover me</span>\n`;
+      code += `    <TooltipTrigger render={<span className="cursor-help underline decoration-dotted" />}>\n`;
+      code += `      Hover me\n`;
    } else if (controls.triggerType === 'input') {
-      code += `      <Input placeholder="Hover over this input" />\n`;
+      code += `    <TooltipTrigger render={<Input placeholder="Hover over this input" />} />\n`;
    }

+    if (controls.triggerType !== 'input') {
      code += `    </TooltipTrigger>\n`;
+    }
    code += `    <TooltipContent${contentPropsString}>\n`;
    code += `      <p>${controls.content}</p>\n`;
    code += `    </TooltipContent>\n`;
@@ -170,28 +171,50 @@ function TooltipStory() {
  };

  const renderPreview = () => {
-    const trigger = (() => {
+    const renderTrigger = () => {
      switch (controls.triggerType) {
        case 'button':
-          return <Button variant={controls.triggerVariant}>Hover me</Button>;
+          return (
+            <TooltipTrigger
+              render={<Button variant={controls.triggerVariant} />}
+            >
+              Hover me
+            </TooltipTrigger>
+          );
        case 'icon':
          return (
-            <Button variant={controls.triggerVariant} size="icon">
+            <TooltipTrigger
+              render={<Button variant={controls.triggerVariant} size="icon" />}
+            >
              <IconComponent className="h-4 w-4" />
-            </Button>
+            </TooltipTrigger>
          );
        case 'text':
          return (
-            <span className="cursor-help underline decoration-dotted">
+            <TooltipTrigger
+              render={
+                <span className="cursor-help underline decoration-dotted" />
+              }
+            >
              Hover me
-            </span>
+            </TooltipTrigger>
          );
        case 'input':
-          return <Input placeholder="Hover over this input" />;
+          return (
+            <TooltipTrigger
+              render={<Input placeholder="Hover over this input" />}
+            />
+          );
        default:
-          return <Button variant={controls.triggerVariant}>Hover me</Button>;
+          return (
+            <TooltipTrigger
+              render={<Button variant={controls.triggerVariant} />}
+            >
+              Hover me
+            </TooltipTrigger>
+          );
      }
-    })();
+    };

    return (
      <div className="flex min-h-[200px] items-center justify-center">
@@ -201,7 +224,7 @@ function TooltipStory() {
          disableHoverableContent={controls.disableHoverableContent}
        >
          <Tooltip>
-            <TooltipTrigger asChild>{trigger}</TooltipTrigger>
+            {renderTrigger()}
            <TooltipContent
              side={controls.side}
              align={controls.align}
@@ -376,11 +399,9 @@ function TooltipStory() {
          <TooltipProvider>
            <div className="flex flex-wrap gap-4">
              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="outline">
+                <TooltipTrigger render={<Button variant="outline" />}>
                  <Info className="mr-2 h-4 w-4" />
                  Info Button
-                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>This provides additional information</p>
@@ -388,10 +409,8 @@ function TooltipStory() {
              </Tooltip>

              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon">
+                <TooltipTrigger render={<Button variant="ghost" size="icon" />}>
                  <HelpCircle className="h-4 w-4" />
-                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Click for help documentation</p>
@@ -399,10 +418,12 @@ function TooltipStory() {
              </Tooltip>

              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="cursor-help underline decoration-dotted">
+                <TooltipTrigger
+                  render={
+                    <span className="cursor-help underline decoration-dotted" />
+                  }
+                >
                  Hover for explanation
-                  </span>
                </TooltipTrigger>
                <TooltipContent>
                  <p>This term needs clarification for better understanding</p>
@@ -410,9 +431,9 @@ function TooltipStory() {
              </Tooltip>

              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Input placeholder="Hover me" className="w-48" />
-                </TooltipTrigger>
+                <TooltipTrigger
+                  render={<Input placeholder="Hover me" className="w-48" />}
+                />
                <TooltipContent>
                  <p>Enter your email address here</p>
                </TooltipContent>
@@ -434,10 +455,10 @@ function TooltipStory() {
                {/* Top Row */}
                <div></div>
                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="outline" size="sm">
+                  <TooltipTrigger
+                    render={<Button variant="outline" size="sm" />}
+                  >
                    Top
-                    </Button>
                  </TooltipTrigger>
                  <TooltipContent side="top">
                    <p>Tooltip on top</p>
@@ -447,10 +468,10 @@ function TooltipStory() {

                {/* Middle Row */}
                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="outline" size="sm">
+                  <TooltipTrigger
+                    render={<Button variant="outline" size="sm" />}
+                  >
                    Left
-                    </Button>
                  </TooltipTrigger>
                  <TooltipContent side="left">
                    <p>Tooltip on left</p>
@@ -460,10 +481,10 @@ function TooltipStory() {
                  <span className="text-muted-foreground text-sm">Center</span>
                </div>
                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="outline" size="sm">
+                  <TooltipTrigger
+                    render={<Button variant="outline" size="sm" />}
+                  >
                    Right
-                    </Button>
                  </TooltipTrigger>
                  <TooltipContent side="right">
                    <p>Tooltip on right</p>
@@ -473,10 +494,10 @@ function TooltipStory() {
                {/* Bottom Row */}
                <div></div>
                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="outline" size="sm">
+                  <TooltipTrigger
+                    render={<Button variant="outline" size="sm" />}
+                  >
                    Bottom
-                    </Button>
                  </TooltipTrigger>
                  <TooltipContent side="bottom">
                    <p>Tooltip on bottom</p>
@@ -498,11 +519,9 @@ function TooltipStory() {
          <TooltipProvider>
            <div className="flex flex-wrap gap-4">
              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="outline">
+                <TooltipTrigger render={<Button variant="outline" />}>
                  <Star className="mr-2 h-4 w-4" />
                  Premium Feature
-                  </Button>
                </TooltipTrigger>
                <TooltipContent className="max-w-xs">
                  <div className="space-y-1">
@@ -516,11 +535,9 @@ function TooltipStory() {
              </Tooltip>

              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="outline">
+                <TooltipTrigger render={<Button variant="outline" />}>
                  <Settings className="mr-2 h-4 w-4" />
                  Advanced Settings
-                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <div className="space-y-1">
@@ -537,11 +554,9 @@ function TooltipStory() {
              </Tooltip>

              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="destructive">
+                <TooltipTrigger render={<Button variant="destructive" />}>
                  <AlertCircle className="mr-2 h-4 w-4" />
                  Delete Account
-                  </Button>
                </TooltipTrigger>
                <TooltipContent className="border-destructive bg-destructive text-destructive-foreground max-w-xs">
                  <div className="space-y-1">
@@ -568,10 +583,10 @@ function TooltipStory() {
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button size="icon" variant="ghost">
+                  <TooltipTrigger
+                    render={<Button size="icon" variant="ghost" />}
+                  >
                    <Copy className="h-4 w-4" />
-                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Copy to clipboard</p>
@@ -579,10 +594,10 @@ function TooltipStory() {
                </Tooltip>

                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button size="icon" variant="ghost">
+                  <TooltipTrigger
+                    render={<Button size="icon" variant="ghost" />}
+                  >
                    <Download className="h-4 w-4" />
-                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Download file</p>
@@ -590,10 +605,10 @@ function TooltipStory() {
                </Tooltip>

                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button size="icon" variant="ghost">
+                  <TooltipTrigger
+                    render={<Button size="icon" variant="ghost" />}
+                  >
                    <Share className="h-4 w-4" />
-                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Share with others</p>
@@ -605,9 +620,11 @@ function TooltipStory() {
                <div className="space-y-2">
                  <Label htmlFor="username">Username</Label>
                  <Tooltip>
-                    <TooltipTrigger asChild>
+                    <TooltipTrigger
+                      render={
                        <Input id="username" placeholder="Enter username" />
-                    </TooltipTrigger>
+                      }
+                    />
                    <TooltipContent>
                      <p>Must be 3-20 characters, letters and numbers only</p>
                    </TooltipContent>
@@ -616,9 +633,7 @@ function TooltipStory() {

                <div className="flex items-center space-x-2">
                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Checkbox id="terms" />
-                    </TooltipTrigger>
+                    <TooltipTrigger render={<Checkbox id="terms" />} />
                    <TooltipContent className="max-w-xs">
                      <p>
                        By checking this, you agree to our Terms of Service and
@@ -751,7 +766,7 @@ function TooltipStory() {
              </li>
              <li>
                <strong>TooltipTrigger:</strong> Element that triggers the
-                tooltip (use asChild prop)
+                tooltip (use render prop)
              </li>
            </ul>
          </div>
@@ -856,8 +871,7 @@ function TooltipStory() {
            <h4 className="text-sm font-semibold">Keyboard Support</h4>
            <p className="text-muted-foreground text-sm">
              • Tooltips appear on focus and disappear on blur
-              <br />
-              • Escape key dismisses tooltips
+              <br />• Escape key dismisses tooltips
              <br />• Tooltips don't trap focus or interfere with navigation
            </p>
          </div>
--- a/apps/dev-tool/app/components/lib/components-data.tsx
+++ b/apps/dev-tool/app/components/lib/components-data.tsx
@@ -492,7 +492,7 @@ export const COMPONENTS_REGISTRY: ComponentInfo[] = [
    status: 'stable',
    component: CardButtonStory,
    sourceFile: '@kit/ui/card-button',
-    props: ['asChild', 'className', 'children', 'onClick', 'disabled'],
+    props: ['className', 'children', 'onClick', 'disabled'],
    icon: MousePointer,
  },

@@ -950,7 +950,7 @@ export const COMPONENTS_REGISTRY: ComponentInfo[] = [
    status: 'stable',
    component: ItemStory,
    sourceFile: '@kit/ui/item',
-    props: ['variant', 'size', 'asChild', 'className'],
+    props: ['variant', 'size', 'className'],
    icon: Layers,
  },

@@ -1004,7 +1004,7 @@ export const COMPONENTS_REGISTRY: ComponentInfo[] = [
    status: 'stable',
    component: BreadcrumbStory,
    sourceFile: '@kit/ui/breadcrumb',
-    props: ['separator', 'asChild', 'href', 'className'],
+    props: ['separator', 'href', 'className'],
    icon: ChevronRight,
  },

--- a/apps/dev-tool/app/components/page.tsx
+++ b/apps/dev-tool/app/components/page.tsx
@@ -1,4 +1,3 @@
-import { withI18n } from '../../lib/i18n/with-i18n';
 import { DocsContent } from './components/docs-content';
 import { DocsHeader } from './components/docs-header';
 import { DocsSidebar } from './components/docs-sidebar';
@@ -29,4 +28,4 @@ async function ComponentDocsPage(props: ComponentDocsPageProps) {
  );
 }

-export default withI18n(ComponentDocsPage);
+export default ComponentDocsPage;
--- a/apps/dev-tool/app/database/_lib/server/database-tools.loader.ts
+++ b/apps/dev-tool/app/database/_lib/server/database-tools.loader.ts
@@ -1,9 +1,8 @@
 import 'server-only';
+import { DatabaseTool } from '@kit/mcp-server/database';

 import { relative } from 'path';

-import { DatabaseTool } from '@kit/mcp-server/database';
-
 export interface DatabaseTable {
  name: string;
  schema: string;
--- a/apps/dev-tool/app/database/_lib/server/table-server-actions.ts
+++ b/apps/dev-tool/app/database/_lib/server/table-server-actions.ts
@@ -1,9 +1,9 @@
 'use server';

-import { relative } from 'path';
-
 import { DatabaseTool } from '@kit/mcp-server/database';

+import { relative } from 'path';
+
 export async function getTableDetailsAction(
  tableName: string,
  schema = 'public',
--- a/apps/dev-tool/app/emails/[id]/components/email-tester-form.tsx
+++ b/apps/dev-tool/app/emails/[id]/components/email-tester-form.tsx
@@ -2,8 +2,6 @@

 import Link from 'next/link';

-import { EmailTesterFormSchema } from '@/app/emails/lib/email-tester-form-schema';
-import { sendEmailAction } from '@/app/emails/lib/server-actions';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';

@@ -19,6 +17,9 @@ import { Input } from '@kit/ui/input';
 import { toast } from '@kit/ui/sonner';
 import { Switch } from '@kit/ui/switch';

+import { EmailTesterFormSchema } from '@/app/emails/lib/email-tester-form-schema';
+import { sendEmailAction } from '@/app/emails/lib/server-actions';
+
 export function EmailTesterForm(props: {
  template: string;
  settings: {
--- a/apps/dev-tool/app/emails/[id]/page.tsx
+++ b/apps/dev-tool/app/emails/[id]/page.tsx
@@ -1,7 +1,3 @@
-import { EmailTesterForm } from '@/app/emails/[id]/components/email-tester-form';
-import { EnvModeSelector } from '@/components/env-mode-selector';
-import { IFrame } from '@/components/iframe';
-
 import {
  createKitEmailsDeps,
  createKitEmailsService,
@@ -17,6 +13,10 @@ import {
 } from '@kit/ui/dialog';
 import { Page, PageBody, PageHeader } from '@kit/ui/page';

+import { EmailTesterForm } from '@/app/emails/[id]/components/email-tester-form';
+import { EnvModeSelector } from '@/components/env-mode-selector';
+import { IFrame } from '@/components/iframe';
+
 type EnvMode = 'development' | 'production';

 type EmailPageProps = React.PropsWithChildren<{
@@ -67,10 +67,10 @@ export default async function EmailPage(props: EmailPageProps) {
          Remember that the below is an approximation of the email. Always test
          it in your inbox.{' '}
          <Dialog>
-            <DialogTrigger asChild>
-              <Button variant={'link'} className="p-0 underline">
+            <DialogTrigger
+              render={<Button variant={'link'} className="p-0 underline" />}
+            >
              Test Email
-              </Button>
            </DialogTrigger>

            <DialogContent>
--- a/apps/dev-tool/app/emails/lib/email-tester-form-schema.ts
+++ b/apps/dev-tool/app/emails/lib/email-tester-form-schema.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import * as z from 'zod';

 export const EmailTesterFormSchema = z.object({
  username: z.string().min(1),
--- a/apps/dev-tool/app/emails/page.tsx
+++ b/apps/dev-tool/app/emails/page.tsx
@@ -49,13 +49,16 @@ export default async function EmailsPage() {

              <div className={'grid grid-cols-1 gap-4 md:grid-cols-4'}>
                {categoryTemplates.map((template) => (
-                  <CardButton key={template.id} asChild>
+                  <CardButton
+                    key={template.id}
+                    render={
                      <Link href={`/emails/${template.id}`}>
                        <CardButtonHeader>
                          <CardButtonTitle>{template.name}</CardButtonTitle>
                        </CardButtonHeader>
                      </Link>
-                  </CardButton>
+                    }
+                  />
                ))}
              </div>
            </div>
--- a/apps/dev-tool/app/layout.tsx
+++ b/apps/dev-tool/app/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from 'next';

+import { getMessages } from 'next-intl/server';
+
 import { DevToolLayout } from '@/components/app-layout';
 import { RootProviders } from '@/components/root-providers';
-
 import '../styles/globals.css';

 export const metadata: Metadata = {
@@ -10,15 +11,17 @@ export const metadata: Metadata = {
  description: 'The dev tool for Makerkit',
 };

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+  const messages = await getMessages();
+
  return (
    <html lang="en">
      <body>
-        <RootProviders>
+        <RootProviders messages={messages}>
          <DevToolLayout>{children}</DevToolLayout>
        </RootProviders>
      </body>
--- a/apps/dev-tool/app/lib/prerequisites-dashboard.loader.ts
+++ b/apps/dev-tool/app/lib/prerequisites-dashboard.loader.ts
@@ -1,13 +1,13 @@
-import { execFile } from 'node:child_process';
-import { access, readFile } from 'node:fs/promises';
-import { join } from 'node:path';
-import { promisify } from 'node:util';
-
 import {
  type KitPrerequisitesDeps,
  createKitPrerequisitesService,
 } from '@kit/mcp-server/prerequisites';

+import { execFile } from 'node:child_process';
+import { access, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { promisify } from 'node:util';
+
 const execFileAsync = promisify(execFile);

 export async function loadDashboardKitPrerequisites() {
--- a/apps/dev-tool/app/lib/status-dashboard.loader.ts
+++ b/apps/dev-tool/app/lib/status-dashboard.loader.ts
@@ -1,14 +1,14 @@
+import {
+  type KitStatusDeps,
+  createKitStatusService,
+} from '@kit/mcp-server/status';
+
 import { execFile } from 'node:child_process';
 import { access, readFile, stat } from 'node:fs/promises';
 import { Socket } from 'node:net';
 import { join } from 'node:path';
 import { promisify } from 'node:util';

-import {
-  type KitStatusDeps,
-  createKitStatusService,
-} from '@kit/mcp-server/status';
-
 const execFileAsync = promisify(execFile);

 export async function loadDashboardKitStatus() {
--- a/apps/dev-tool/app/page.tsx
+++ b/apps/dev-tool/app/page.tsx
@@ -1,11 +1,11 @@
-import { ServiceCard } from '@/components/status-tile';
-
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 import { Page, PageBody, PageHeader } from '@kit/ui/page';

 import { loadDashboardKitPrerequisites } from './lib/prerequisites-dashboard.loader';
 import { loadDashboardKitStatus } from './lib/status-dashboard.loader';

+import { ServiceCard } from '@/components/status-tile';
+
 export default async function DashboardPage() {
  const [status, prerequisites] = await Promise.all([
    loadDashboardKitStatus(),
@@ -37,7 +37,6 @@ export default async function DashboardPage() {
  return (
    <Page style={'custom'}>
      <PageHeader
-        displaySidebarTrigger={false}
        title={'Dev Tool'}
        description={'Kit MCP status for this workspace'}
      />
--- a/apps/dev-tool/app/prds/[filename]/page.tsx
+++ b/apps/dev-tool/app/prds/[filename]/page.tsx
@@ -1,5 +1,4 @@
 import { Metadata } from 'next';
-
 import { notFound } from 'next/navigation';

 import { loadPRDPageData } from '../_lib/server/prd-page.loader';
--- a/apps/dev-tool/app/prds/_lib/schemas/create-prd.schema.ts
+++ b/apps/dev-tool/app/prds/_lib/schemas/create-prd.schema.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import * as z from 'zod';

 export const CreatePRDSchema = z.object({
  title: z
@@ -32,4 +32,4 @@ export const CreatePRDSchema = z.object({
    .min(1, 'At least one success metric is required'),
 });

-export type CreatePRDData = z.infer<typeof CreatePRDSchema>;
+export type CreatePRDData = z.output<typeof CreatePRDSchema>;
--- a/apps/dev-tool/app/prds/_lib/server/prd-loader.ts
+++ b/apps/dev-tool/app/prds/_lib/server/prd-loader.ts
@@ -1,7 +1,7 @@
-import { relative } from 'node:path';
-
 import { PRDManager } from '@kit/mcp-server/prd-manager';

+import { relative } from 'node:path';
+
 interface PRDSummary {
  filename: string;
  title: string;
--- a/apps/dev-tool/app/prds/_lib/server/prd-page.loader.ts
+++ b/apps/dev-tool/app/prds/_lib/server/prd-page.loader.ts
@@ -1,9 +1,8 @@
 import 'server-only';
+import { PRDManager } from '@kit/mcp-server/prd-manager';

 import { relative } from 'node:path';

-import { PRDManager } from '@kit/mcp-server/prd-manager';
-
 export interface CustomPhase {
  id: string;
  name: string;
--- a/apps/dev-tool/app/translations/components/translations-comparison.tsx
+++ b/apps/dev-tool/app/translations/components/translations-comparison.tsx
@@ -131,12 +131,14 @@ export function TranslationsComparison({

            <If condition={locales.length > 1}>
              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+                <DropdownMenuTrigger
+                  render={
                    <Button variant="outline" className="ml-auto">
                      Select Languages
                      <ChevronDownIcon className="ml-2 h-4 w-4" />
                    </Button>
-                </DropdownMenuTrigger>
+                  }
+                />

                <DropdownMenuContent align="end" className="w-[200px]">
                  {locales.map((locale) => (
--- a/apps/dev-tool/app/translations/lib/server-actions.ts
+++ b/apps/dev-tool/app/translations/lib/server-actions.ts
@@ -2,7 +2,7 @@

 import { revalidatePath } from 'next/cache';

-import { z } from 'zod';
+import * as z from 'zod';

 import { findWorkspaceRoot } from '@kit/mcp-server/env';
 import {
--- a/apps/dev-tool/app/variables/components/app-environment-variables-manager.tsx
+++ b/apps/dev-tool/app/variables/components/app-environment-variables-manager.tsx
@@ -5,9 +5,6 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';

-import { envVariables } from '@/app/variables/lib/env-variables-model';
-import { updateEnvironmentVariableAction } from '@/app/variables/lib/server-actions';
-import { EnvModeSelector } from '@/components/env-mode-selector';
 import {
  ChevronsUpDownIcon,
  Copy,
@@ -44,6 +41,10 @@ import { cn } from '@kit/ui/utils';
 import { AppEnvState, EnvVariableState } from '../lib/types';
 import { DynamicFormInput } from './dynamic-form-input';

+import { envVariables } from '@/app/variables/lib/env-variables-model';
+import { updateEnvironmentVariableAction } from '@/app/variables/lib/server-actions';
+import { EnvModeSelector } from '@/components/env-mode-selector';
+
 export function AppEnvironmentVariablesManager({
  state,
 }: React.PropsWithChildren<{
@@ -731,13 +732,15 @@ function FilterSwitcher(props: {

  return (
    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger
+        render={
          <Button variant="outline" className="font-normal">
            {buttonLabel()}

            <ChevronsUpDownIcon className="text-muted-foreground ml-1 h-3 w-3" />
          </Button>
-      </DropdownMenuTrigger>
+        }
+      />

      <DropdownMenuContent>
        <DropdownMenuCheckboxItem
@@ -886,7 +889,8 @@ function Summary({ appState }: { appState: AppEnvState }) {

        <TooltipProvider>
          <Tooltip>
-            <TooltipTrigger asChild>
+            <TooltipTrigger
+              render={
                <Button
                  variant="outline"
                  size={'sm'}
@@ -910,14 +914,16 @@ function Summary({ appState }: { appState: AppEnvState }) {
                    toast.promise(promise, {
                      loading: 'Copying environment variables...',
                      success: 'Environment variables copied to clipboard.',
-                    error: 'Failed to copy environment variables to clipboard',
+                      error:
+                        'Failed to copy environment variables to clipboard',
                    });
                  }}
                >
                  <CopyIcon className={'mr-2 h-4 w-4'} />
                  <span>Copy env file to clipboard</span>
                </Button>
-            </TooltipTrigger>
+              }
+            />

            <TooltipContent>
              Copy environment variables to clipboard. You can place it in your
--- a/apps/dev-tool/app/variables/lib/server-actions.ts
+++ b/apps/dev-tool/app/variables/lib/server-actions.ts
@@ -2,7 +2,7 @@

 import { revalidatePath } from 'next/cache';

-import { z } from 'zod';
+import * as z from 'zod';

 import {
  createKitEnvDeps,
--- a/apps/dev-tool/app/variables/page.tsx
+++ b/apps/dev-tool/app/variables/page.tsx
@@ -1,7 +1,5 @@
 import { use } from 'react';

-import { EnvMode } from '@/app/variables/lib/types';
-
 import {
  createKitEnvDeps,
  createKitEnvService,
@@ -11,6 +9,8 @@ import { Page, PageBody, PageHeader } from '@kit/ui/page';

 import { AppEnvironmentVariablesManager } from './components/app-environment-variables-manager';

+import { EnvMode } from '@/app/variables/lib/types';
+
 type VariablesPageProps = {
  searchParams: Promise<{ mode?: EnvMode }>;
 };
--- a/apps/dev-tool/components/app-layout.tsx
+++ b/apps/dev-tool/components/app-layout.tsx
@@ -1,13 +1,13 @@
-import { DevToolSidebar } from '@/components/app-sidebar';
+import { SidebarInset, SidebarProvider } from '@kit/ui/sidebar';

-import { SidebarInset, SidebarProvider } from '@kit/ui/shadcn-sidebar';
+import { DevToolSidebar } from '@/components/app-sidebar';

 export function DevToolLayout(props: React.PropsWithChildren) {
  return (
    <SidebarProvider>
      <DevToolSidebar />

-      <SidebarInset>{props.children}</SidebarInset>
+      <SidebarInset className="px-4">{props.children}</SidebarInset>
    </SidebarProvider>
  );
 }
--- a/apps/dev-tool/components/app-sidebar.tsx
+++ b/apps/dev-tool/components/app-sidebar.tsx
@@ -24,7 +24,7 @@ import {
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
-} from '@kit/ui/shadcn-sidebar';
+} from '@kit/ui/sidebar';
 import { isRouteActive } from '@kit/ui/utils';

 const routes = [
@@ -92,14 +92,14 @@ export function DevToolSidebar({
                    {route.children.map((child) => (
                      <SidebarMenuSubItem key={child.path}>
                        <SidebarMenuSubButton
-                          asChild
-                          isActive={isRouteActive(child.path, pathname, false)}
-                        >
+                          render={
                            <Link href={child.path}>
                              <child.Icon className="h-4 w-4" />
                              <span>{child.label}</span>
                            </Link>
-                        </SidebarMenuSubButton>
+                          }
+                          isActive={isRouteActive(child.path, pathname, false)}
+                        />
                      </SidebarMenuSubItem>
                    ))}
                  </SidebarMenuSub>
@@ -107,13 +107,13 @@ export function DevToolSidebar({
              ) : (
                <SidebarMenuButton
                  isActive={isRouteActive(route.path, pathname, false)}
-                  asChild
-                >
+                  render={
                    <Link href={route.path}>
                      <route.Icon className="h-4 w-4" />
                      <span>{route.label}</span>
                    </Link>
-                </SidebarMenuButton>
+                  }
+                />
              )}
            </SidebarMenuItem>
          ))}
--- a/apps/dev-tool/components/env-mode-selector.tsx
+++ b/apps/dev-tool/components/env-mode-selector.tsx
@@ -2,8 +2,6 @@

 import { useRouter } from 'next/navigation';

-import { EnvMode } from '@/app/variables/lib/types';
-
 import {
  Select,
  SelectContent,
@@ -12,6 +10,8 @@ import {
  SelectValue,
 } from '@kit/ui/select';

+import { EnvMode } from '@/app/variables/lib/types';
+
 export function EnvModeSelector({ mode }: { mode: EnvMode }) {
  const router = useRouter();

--- a/apps/dev-tool/components/iframe.tsx
+++ b/apps/dev-tool/components/iframe.tsx
@@ -1,7 +1,6 @@
 'use client';

 import { useState } from 'react';
-
 import { createPortal } from 'react-dom';

 export const IFrame: React.FC<
--- a/apps/dev-tool/components/root-providers.tsx
+++ b/apps/dev-tool/components/root-providers.tsx
@@ -3,18 +3,18 @@
 import { useState } from 'react';

 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { AbstractIntlMessages } from 'next-intl';

-import { I18nProvider } from '@kit/i18n/provider';
+import { I18nClientProvider } from '@kit/i18n/provider';
 import { Toaster } from '@kit/ui/sonner';

-import { i18nResolver } from '../lib/i18n/i18n.resolver';
-import { getI18nSettings } from '../lib/i18n/i18n.settings';
-
-export function RootProviders(props: React.PropsWithChildren) {
+export function RootProviders(
+  props: React.PropsWithChildren<{ messages: AbstractIntlMessages }>,
+) {
  return (
-    <I18nProvider settings={getI18nSettings('en')} resolver={i18nResolver}>
+    <I18nClientProvider locale="en" messages={props.messages}>
      <ReactQueryProvider>{props.children}</ReactQueryProvider>
-    </I18nProvider>
+    </I18nClientProvider>
  );
 }

--- a/apps/dev-tool/components/status-tile.tsx
+++ b/apps/dev-tool/components/status-tile.tsx
@@ -33,7 +33,7 @@ interface ServiceCardProps {
 export const ServiceCard = ({ name, status }: ServiceCardProps) => {
  return (
    <Card className="w-full max-w-2xl">
-      <CardContent className="p-4">
+      <CardContent>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
--- a/apps/dev-tool/i18n/request.ts
+++ b/apps/dev-tool/i18n/request.ts
@@ -0,0 +1,26 @@
+import { getRequestConfig } from 'next-intl/server';
+
+import account from '../../web/i18n/messages/en/account.json';
+import auth from '../../web/i18n/messages/en/auth.json';
+import billing from '../../web/i18n/messages/en/billing.json';
+import common from '../../web/i18n/messages/en/common.json';
+import marketing from '../../web/i18n/messages/en/marketing.json';
+import teams from '../../web/i18n/messages/en/teams.json';
+
+export default getRequestConfig(async () => {
+  return {
+    locale: 'en',
+    messages: {
+      common,
+      auth,
+      account,
+      teams,
+      billing,
+      marketing,
+    },
+    timeZone: 'UTC',
+    getMessageFallback(info) {
+      return info.key;
+    },
+  };
+});
--- a/apps/dev-tool/lib/i18n/with-i18n.tsx
+++ b/apps/dev-tool/lib/i18n/with-i18n.tsx
@@ -1,13 +0,0 @@
-import { createI18nServerInstance } from './i18n.server';
-
-type LayoutOrPageComponent<Params> = React.ComponentType<Params>;
-
-export function withI18n<Params extends object>(
-  Component: LayoutOrPageComponent<Params>,
-) {
-  return async function I18nServerComponentWrapper(params: Params) {
-    await createI18nServerInstance();
-
-    return <Component {...params} />;
-  };
-}
--- a/apps/dev-tool/next.config.ts
+++ b/apps/dev-tool/next.config.ts
@@ -1,8 +1,12 @@
 import type { NextConfig } from 'next';

+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
+
 const nextConfig: NextConfig = {
  reactStrictMode: true,
-  transpilePackages: ['@kit/ui', '@kit/shared'],
+  transpilePackages: ['@kit/ui', '@kit/shared', '@kit/i18n'],
  reactCompiler: true,
  devIndicators: {
    position: 'bottom-right',
@@ -14,4 +18,4 @@ const nextConfig: NextConfig = {
  },
 };

-export default nextConfig;
+export default withNextIntl(nextConfig);
--- a/apps/dev-tool/package.json
+++ b/apps/dev-tool/package.json
@@ -4,44 +4,41 @@
  "private": true,
  "scripts": {
    "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "next dev --port=3010 | pino-pretty -c",
-    "format": "prettier --check --write \"**/*.{ts,tsx}\" --ignore-path=\"../../.prettierignore\""
+    "dev": "next dev --port=3010 | pino-pretty -c"
  },
  "dependencies": {
-    "@faker-js/faker": "^10.2.0",
-    "@hookform/resolvers": "^5.2.2",
+    "@faker-js/faker": "catalog:",
+    "@hookform/resolvers": "catalog:",
    "@tanstack/react-query": "catalog:",
    "lucide-react": "catalog:",
    "next": "catalog:",
+    "next-intl": "catalog:",
    "nodemailer": "catalog:",
    "react": "catalog:",
    "react-dom": "catalog:",
-    "rxjs": "^7.8.2"
+    "rxjs": "catalog:"
  },
  "devDependencies": {
    "@kit/email-templates": "workspace:*",
    "@kit/i18n": "workspace:*",
    "@kit/mcp-server": "workspace:*",
    "@kit/next": "workspace:*",
-    "@kit/prettier-config": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.1",
-    "@types/node": "catalog:",
+    "@tailwindcss/postcss": "catalog:",
    "@types/nodemailer": "catalog:",
    "@types/react": "catalog:",
    "@types/react-dom": "catalog:",
-    "babel-plugin-react-compiler": "1.0.0",
-    "pino-pretty": "13.0.0",
+    "babel-plugin-react-compiler": "catalog:",
+    "pino-pretty": "catalog:",
    "react-hook-form": "catalog:",
-    "recharts": "2.15.3",
+    "recharts": "catalog:",
    "tailwindcss": "catalog:",
    "tw-animate-css": "catalog:",
-    "typescript": "^5.9.3",
+    "typescript": "catalog:",
    "zod": "catalog:"
  },
-  "prettier": "@kit/prettier-config",
  "browserslist": [
    "last 1 versions",
    "> 0.7%",
--- a/apps/dev-tool/styles/theme.css
+++ b/apps/dev-tool/styles/theme.css
@@ -66,26 +66,6 @@
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-
-    to {
-      height: 0;
-    }
-  }
-
  @keyframes fade-up {
    0% {
      opacity: 0;
--- a/apps/e2e/package.json
+++ b/apps/e2e/package.json
@@ -1,21 +1,20 @@
 {
  "name": "web-e2e",
  "version": "1.0.0",
+  "author": "Makerkit",
  "main": "index.js",
  "scripts": {
    "report": "playwright show-report",
    "test": "playwright test --max-failures=1",
    "test:fast": "playwright test --max-failures=1 --workers=16",
    "test:setup": "playwright test tests/auth.setup.ts",
-    "test:ui": "playwright test --ui"
+    "test:ui": "ENABLE_BILLING_TESTS=true playwright test --ui"
  },
-  "author": "Makerkit",
  "devDependencies": {
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "catalog:",
    "@supabase/supabase-js": "catalog:",
-    "@types/node": "catalog:",
-    "dotenv": "17.3.1",
-    "node-html-parser": "^7.0.2",
-    "totp-generator": "^2.0.1"
+    "dotenv": "catalog:",
+    "node-html-parser": "catalog:",
+    "totp-generator": "catalog:"
  }
 }
--- a/apps/e2e/tests/account/account.spec.ts
+++ b/apps/e2e/tests/account/account.spec.ts
@@ -38,10 +38,12 @@ test.describe('Account Settings', () => {

    await Promise.all([request, response]);

+    await page.locator('[data-test="workspace-dropdown-trigger"]').click();
+
    await expect(account.getProfileName()).toHaveText(name);
  });

-  test('user can update their email', async ({ page }) => {
+  test('user can update their email', async () => {
    const email = account.auth.createRandomEmail();

    await account.updateEmail(email);
--- a/apps/e2e/tests/admin/admin.spec.ts
+++ b/apps/e2e/tests/admin/admin.spec.ts
@@ -34,17 +34,17 @@ test.describe('Admin', () => {
      await page.goto('/admin');

      // Check all stat cards are present
-      await expect(page.getByRole('heading', { name: 'Users' })).toBeVisible();
+      await expect(page.getByText('Users', { exact: true })).toBeVisible();

      await expect(
-        page.getByRole('heading', { name: 'Team Accounts' }),
+        page.getByText('Team Accounts', { exact: true }),
      ).toBeVisible();

      await expect(
-        page.getByRole('heading', { name: 'Paying Customers' }),
+        page.getByText('Paying Customers', { exact: true }),
      ).toBeVisible();

-      await expect(page.getByRole('heading', { name: 'Trials' })).toBeVisible();
+      await expect(page.getByText('Trials', { exact: true })).toBeVisible();

      // Verify stat values are numbers
      const stats = await page.$$('.text-3xl.font-bold');
@@ -351,5 +351,5 @@ async function selectAccount(page: Page, email: string) {

  await link.click();

-  await page.waitForURL(/\/admin\/accounts\/[^\/]+/);
+  await page.waitForURL(/\/admin\/accounts\/[^/]+/);
 }
--- a/apps/e2e/tests/auth.setup.ts
+++ b/apps/e2e/tests/auth.setup.ts
@@ -1,9 +1,10 @@
 import { test } from '@playwright/test';
-import { join } from 'node:path';
-import { cwd } from 'node:process';

 import { AuthPageObject } from './authentication/auth.po';

+import { join } from 'node:path';
+import { cwd } from 'node:process';
+
 const testAuthFile = join(cwd(), '.auth/test@makerkit.dev.json');
 const ownerAuthFile = join(cwd(), '.auth/owner@makerkit.dev.json');
 const superAdminAuthFile = join(cwd(), '.auth/super-admin@makerkit.dev.json');
--- a/apps/e2e/tests/authentication/auth.po.ts
+++ b/apps/e2e/tests/authentication/auth.po.ts
@@ -31,8 +31,17 @@ export class AuthPageObject {
  }

  async signOut() {
-    await this.page.click('[data-test="account-dropdown-trigger"]');
-    await this.page.click('[data-test="account-dropdown-sign-out"]');
+    const trigger = this.page.locator(
+      '[data-test="workspace-dropdown-trigger"], [data-test="account-dropdown-trigger"]',
+    );
+
+    await trigger.click();
+
+    const signOutButton = this.page.locator(
+      '[data-test="workspace-sign-out"], [data-test="account-dropdown-sign-out"]',
+    );
+
+    await signOutButton.click();
  }

  async signIn(params: { email: string; password: string }) {
--- a/apps/e2e/tests/healthcheck.spec.ts
+++ b/apps/e2e/tests/healthcheck.spec.ts
@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test';

 test.describe('Healthcheck endpoint', () => {
  test('returns healthy status', async ({ request }) => {
-    const response = await request.get('/healthcheck');
+    const response = await request.get('/api/healthcheck');

    expect(response.status()).toBe(200);

--- a/apps/e2e/tests/invitations/invitations.po.ts
+++ b/apps/e2e/tests/invitations/invitations.po.ts
@@ -46,7 +46,7 @@ export class InvitationsPageObject {
        `[data-test="invite-member-form-item"]:nth-child(${nth}) [data-test="role-selector-trigger"]`,
      );

-      await this.page.click(`[data-test="role-option-${invite.role}"]`);
+      await this.page.getByRole('option', { name: invite.role }).click();

      if (index < invites.length - 1) {
        await form.locator('[data-test="add-new-invite-button"]').click();
--- a/apps/e2e/tests/team-accounts/team-accounts.po.ts
+++ b/apps/e2e/tests/team-accounts/team-accounts.po.ts
@@ -36,13 +36,13 @@ export class TeamAccountsPageObject {
  }

  getTeamFromSelector(teamName: string) {
-    return this.page.locator(`[data-test="account-selector-team"]`, {
+    return this.page.locator('[data-test="workspace-team-item"]', {
      hasText: teamName,
    });
  }

  getTeams() {
-    return this.page.locator('[data-test="account-selector-team"]');
+    return this.page.locator('[data-test="workspace-team-item"]');
  }

  goToSettings() {
@@ -83,10 +83,11 @@ export class TeamAccountsPageObject {

  openAccountsSelector() {
    return expect(async () => {
-      await this.page.click('[data-test="account-selector-trigger"]');
+      await this.page.click('[data-test="workspace-dropdown-trigger"]');
+      await this.page.click('[data-test="workspace-switch-submenu"]');

      return expect(
-        this.page.locator('[data-test="account-selector-content"]'),
+        this.page.locator('[data-test="workspace-switch-content"]'),
      ).toBeVisible();
    }).toPass();
  }
@@ -115,7 +116,7 @@ export class TeamAccountsPageObject {
  async createTeam({ teamName, slug } = this.createTeamName()) {
    await this.openAccountsSelector();

-    await this.page.click('[data-test="create-team-account-trigger"]');
+    await this.page.click('[data-test="create-team-trigger"]');

    await this.page.fill(
      '[data-test="create-team-form"] [data-test="team-name-input"]',
@@ -140,14 +141,13 @@ export class TeamAccountsPageObject {
    await this.openAccountsSelector();
    await expect(this.getTeamFromSelector(teamName)).toBeVisible();

-    // Close the selector
-    await this.page.keyboard.press('Escape');
+    await this.closeAccountsSelector();
  }

  async createTeamWithNonLatinName(teamName: string, slug: string) {
    await this.openAccountsSelector();

-    await this.page.click('[data-test="create-team-account-trigger"]');
+    await this.page.click('[data-test="create-team-trigger"]');

    await this.page.fill(
      '[data-test="create-team-form"] [data-test="team-name-input"]',
@@ -177,8 +177,15 @@ export class TeamAccountsPageObject {
    await this.openAccountsSelector();
    await expect(this.getTeamFromSelector(teamName)).toBeVisible();

-    // Close the selector
-    await this.page.keyboard.press('Escape');
+    await this.closeAccountsSelector();
+  }
+
+  async closeAccountsSelector() {
+    await this.page.locator('body').click({ position: { x: 0, y: 0 } });
+
+    await expect(
+      this.page.locator('[data-test="workspace-switch-content"]'),
+    ).toBeHidden();
  }

  getSlugField() {
@@ -207,11 +214,10 @@ export class TeamAccountsPageObject {
  }

  async deleteAccount(email: string) {
-    await expect(async () => {
    await this.page.click('[data-test="delete-team-trigger"]');
-
    await this.otp.completeOtpVerification(email);

+    await expect(async () => {
      const click = this.page.click(
        '[data-test="delete-team-form-confirm-button"]',
      );
--- a/apps/e2e/tests/team-accounts/team-accounts.spec.ts
+++ b/apps/e2e/tests/team-accounts/team-accounts.spec.ts
@@ -88,7 +88,7 @@ test.describe('Team Accounts', () => {
    await teamAccounts.createTeam();

    await teamAccounts.openAccountsSelector();
-    await page.click('[data-test="create-team-account-trigger"]');
+    await page.click('[data-test="create-team-trigger"]');

    await teamAccounts.tryCreateTeam('billing');

@@ -202,7 +202,7 @@ test.describe('Team Accounts', () => {

    // Use non-Latin name to trigger the slug field visibility
    await teamAccounts.openAccountsSelector();
-    await page.click('[data-test="create-team-account-trigger"]');
+    await page.click('[data-test="create-team-trigger"]');

    await page.fill(
      '[data-test="create-team-form"] [data-test="team-name-input"]',
--- a/apps/e2e/tests/team-billing/team-billing.spec.ts
+++ b/apps/e2e/tests/team-billing/team-billing.spec.ts
@@ -1,6 +1,5 @@
 import { expect, test } from '@playwright/test';

-import { AuthPageObject } from '../authentication/auth.po';
 import { TeamBillingPageObject } from './team-billing.po';

 test.describe('Team Billing', () => {
--- a/apps/e2e/tests/utils/billing.po.ts
+++ b/apps/e2e/tests/utils/billing.po.ts
@@ -38,9 +38,9 @@ export class BillingPageObject {
    // wait a bit for the webhook to be processed
    await this.page.waitForTimeout(1000);

-    return this.page
-      .locator('[data-test="checkout-success-back-link"]')
-      .click();
+    await this.page.locator('[data-test="checkout-success-back-link"]').click();
+
+    await this.page.waitForURL('**/billing');
  }

  proceedToCheckout() {
--- a/apps/web/.env
+++ b/apps/web/.env
@@ -38,6 +38,7 @@ NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION=true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true
+NEXT_PUBLIC_ENABLE_TEAMS_ACCOUNTS_ONLY=false
 NEXT_PUBLIC_LANGUAGE_PRIORITY=application

 # NEXTJS
--- a/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
+++ b/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
@@ -1,30 +0,0 @@
-import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export async function generateMetadata() {
-  const { t } = await createI18nServerInstance();
-
-  return {
-    title: t('marketing:cookiePolicy'),
-  };
-}
-
-async function CookiePolicyPage() {
-  const { t } = await createI18nServerInstance();
-
-  return (
-    <div>
-      <SitePageHeader
-        title={t(`marketing:cookiePolicy`)}
-        subtitle={t(`marketing:cookiePolicyDescription`)}
-      />
-
-      <div className={'container mx-auto py-8'}>
-        <div>Your terms of service content here</div>
-      </div>
-    </div>
-  );
-}
-
-export default withI18n(CookiePolicyPage);
--- a/apps/web/app/(marketing)/(legal)/privacy-policy/page.tsx
+++ b/apps/web/app/(marketing)/(legal)/privacy-policy/page.tsx
@@ -1,30 +0,0 @@
-import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export async function generateMetadata() {
-  const { t } = await createI18nServerInstance();
-
-  return {
-    title: t('marketing:privacyPolicy'),
-  };
-}
-
-async function PrivacyPolicyPage() {
-  const { t } = await createI18nServerInstance();
-
-  return (
-    <div>
-      <SitePageHeader
-        title={t('marketing:privacyPolicy')}
-        subtitle={t('marketing:privacyPolicyDescription')}
-      />
-
-      <div className={'container mx-auto py-8'}>
-        <div>Your terms of service content here</div>
-      </div>
-    </div>
-  );
-}
-
-export default withI18n(PrivacyPolicyPage);
--- a/apps/web/app/(marketing)/(legal)/terms-of-service/page.tsx
+++ b/apps/web/app/(marketing)/(legal)/terms-of-service/page.tsx
@@ -1,30 +0,0 @@
-import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export async function generateMetadata() {
-  const { t } = await createI18nServerInstance();
-
-  return {
-    title: t('marketing:termsOfService'),
-  };
-}
-
-async function TermsOfServicePage() {
-  const { t } = await createI18nServerInstance();
-
-  return (
-    <div>
-      <SitePageHeader
-        title={t(`marketing:termsOfService`)}
-        subtitle={t(`marketing:termsOfServiceDescription`)}
-      />
-
-      <div className={'container mx-auto py-8'}>
-        <div>Your terms of service content here</div>
-      </div>
-    </div>
-  );
-}
-
-export default withI18n(TermsOfServicePage);
--- a/apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx
+++ b/apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx
@@ -1,72 +0,0 @@
-'use client';
-
-import { useEffect, useEffectEvent, useMemo, useState } from 'react';
-
-import { usePathname } from 'next/navigation';
-
-import { Menu } from 'lucide-react';
-
-import { isBrowser } from '@kit/shared/utils';
-import { Button } from '@kit/ui/button';
-import { If } from '@kit/ui/if';
-
-export function FloatingDocumentationNavigation(
-  props: React.PropsWithChildren,
-) {
-  const activePath = usePathname();
-
-  const body = useMemo(() => {
-    return isBrowser() ? document.body : null;
-  }, []);
-
-  const [isVisible, setIsVisible] = useState(false);
-
-  const enableScrolling = useEffectEvent(
-    () => body && (body.style.overflowY = ''),
-  );
-
-  const disableScrolling = useEffectEvent(
-    () => body && (body.style.overflowY = 'hidden'),
-  );
-
-  // enable/disable body scrolling when the docs are toggled
-  useEffect(() => {
-    if (isVisible) {
-      disableScrolling();
-    } else {
-      enableScrolling();
-    }
-  }, [isVisible]);
-
-  // hide docs when navigating to another page
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setIsVisible(false);
-  }, [activePath]);
-
-  const onClick = () => {
-    setIsVisible(!isVisible);
-  };
-
-  return (
-    <>
-      <If condition={isVisible}>
-        <div
-          className={
-            'fixed top-0 left-0 z-10 h-screen w-full p-4' +
-            ' dark:bg-background flex flex-col space-y-4 overflow-auto bg-white'
-          }
-        >
-          {props.children}
-        </div>
-      </If>
-
-      <Button
-        className={'fixed right-5 bottom-5 z-10 h-16 w-16 rounded-full'}
-        onClick={onClick}
-      >
-        <Menu className={'h-8'} />
-      </Button>
-    </>
-  );
-}
--- a/apps/web/app/(marketing)/docs/layout.tsx
+++ b/apps/web/app/(marketing)/docs/layout.tsx
@@ -1,45 +0,0 @@
-import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
-
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-
-// local imports
-import { DocsNavigation } from './_components/docs-navigation';
-import { getDocs } from './_lib/server/docs.loader';
-import { buildDocumentationTree } from './_lib/utils';
-
-async function DocsLayout({ children }: React.PropsWithChildren) {
-  const { resolvedLanguage } = await createI18nServerInstance();
-  const docs = await getDocs(resolvedLanguage);
-  const tree = buildDocumentationTree(docs);
-
-  return (
-    <div className={'container h-[calc(100vh-56px)] overflow-y-hidden'}>
-      <SidebarProvider
-        className="lg:gap-x-6"
-        style={{ '--sidebar-width': '17em' } as React.CSSProperties}
-      >
-        <HideFooterStyles />
-
-        <DocsNavigation pages={tree} />
-
-        {children}
-      </SidebarProvider>
-    </div>
-  );
-}
-
-function HideFooterStyles() {
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: `
-          .site-footer {
-            display: none;
-          }
-        `,
-      }}
-    />
-  );
-}
-
-export default DocsLayout;
--- a/apps/web/app/(marketing)/docs/page.tsx
+++ b/apps/web/app/(marketing)/docs/page.tsx
@@ -1,37 +0,0 @@
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-import { SitePageHeader } from '../_components/site-page-header';
-import { DocsCards } from './_components/docs-cards';
-import { getDocs } from './_lib/server/docs.loader';
-
-export const generateMetadata = async () => {
-  const { t } = await createI18nServerInstance();
-
-  return {
-    title: t('marketing:documentation'),
-  };
-};
-
-async function DocsPage() {
-  const { t, resolvedLanguage } = await createI18nServerInstance();
-  const items = await getDocs(resolvedLanguage);
-
-  // Filter out any docs that have a parentId, as these are children of other docs
-  const cards = items.filter((item) => !item.parentId);
-
-  return (
-    <div className={'flex w-full flex-1 flex-col gap-y-6 xl:gap-y-8'}>
-      <SitePageHeader
-        title={t('marketing:documentation')}
-        subtitle={t('marketing:documentationSubtitle')}
-      />
-
-      <div className={'relative flex size-full justify-center overflow-y-auto'}>
-        <DocsCards cards={cards} />
-      </div>
-    </div>
-  );
-}
-
-export default withI18n(DocsPage);
--- a/apps/web/app/[locale]/(marketing)/(legal)/cookie-policy/page.tsx
+++ b/apps/web/app/[locale]/(marketing)/(legal)/cookie-policy/page.tsx
@@ -0,0 +1,30 @@
+import { getTranslations } from 'next-intl/server';
+
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+
+export async function generateMetadata() {
+  const t = await getTranslations('marketing');
+
+  return {
+    title: t('cookiePolicy'),
+  };
+}
+
+async function CookiePolicyPage() {
+  const t = await getTranslations('marketing');
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t(`marketing.cookiePolicy`)}
+        subtitle={t(`marketing.cookiePolicyDescription`)}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default CookiePolicyPage;
--- a/apps/web/app/[locale]/(marketing)/(legal)/privacy-policy/page.tsx
+++ b/apps/web/app/[locale]/(marketing)/(legal)/privacy-policy/page.tsx
@@ -0,0 +1,30 @@
+import { getTranslations } from 'next-intl/server';
+
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+
+export async function generateMetadata() {
+  const t = await getTranslations('marketing');
+
+  return {
+    title: t('privacyPolicy'),
+  };
+}
+
+async function PrivacyPolicyPage() {
+  const t = await getTranslations('marketing');
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t('privacyPolicy')}
+        subtitle={t('privacyPolicyDescription')}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default PrivacyPolicyPage;
--- a/apps/web/app/[locale]/(marketing)/(legal)/terms-of-service/page.tsx
+++ b/apps/web/app/[locale]/(marketing)/(legal)/terms-of-service/page.tsx
@@ -0,0 +1,30 @@
+import { getTranslations } from 'next-intl/server';
+
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+
+export async function generateMetadata() {
+  const t = await getTranslations('marketing');
+
+  return {
+    title: t('termsOfService'),
+  };
+}
+
+async function TermsOfServicePage() {
+  const t = await getTranslations('marketing');
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t(`marketing.termsOfService`)}
+        subtitle={t(`marketing.termsOfServiceDescription`)}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default TermsOfServicePage;
--- a/apps/web/app/[locale]/(marketing)/_components/site-footer.tsx
+++ b/apps/web/app/[locale]/(marketing)/_components/site-footer.tsx
@@ -8,10 +8,10 @@ export function SiteFooter() {
  return (
    <Footer
      logo={<AppLogo className="w-[85px] md:w-[95px]" />}
-      description={<Trans i18nKey="marketing:footerDescription" />}
+      description={<Trans i18nKey="marketing.footerDescription" />}
      copyright={
        <Trans
-          i18nKey="marketing:copyright"
+          i18nKey="marketing.copyright"
          values={{
            product: appConfig.name,
            year: new Date().getFullYear(),
@@ -20,35 +20,35 @@ export function SiteFooter() {
      }
      sections={[
        {
-          heading: <Trans i18nKey="marketing:about" />,
+          heading: <Trans i18nKey="marketing.about" />,
          links: [
-            { href: '/blog', label: <Trans i18nKey="marketing:blog" /> },
-            { href: '/contact', label: <Trans i18nKey="marketing:contact" /> },
+            { href: '/blog', label: <Trans i18nKey="marketing.blog" /> },
+            { href: '/contact', label: <Trans i18nKey="marketing.contact" /> },
          ],
        },
        {
-          heading: <Trans i18nKey="marketing:product" />,
+          heading: <Trans i18nKey="marketing.product" />,
          links: [
            {
              href: '/docs',
-              label: <Trans i18nKey="marketing:documentation" />,
+              label: <Trans i18nKey="marketing.documentation" />,
            },
          ],
        },
        {
-          heading: <Trans i18nKey="marketing:legal" />,
+          heading: <Trans i18nKey="marketing.legal" />,
          links: [
            {
              href: '/terms-of-service',
-              label: <Trans i18nKey="marketing:termsOfService" />,
+              label: <Trans i18nKey="marketing.termsOfService" />,
            },
            {
              href: '/privacy-policy',
-              label: <Trans i18nKey="marketing:privacyPolicy" />,
+              label: <Trans i18nKey="marketing.privacyPolicy" />,
            },
            {
              href: '/cookie-policy',
-              label: <Trans i18nKey="marketing:cookiePolicy" />,
+              label: <Trans i18nKey="marketing.cookiePolicy" />,
            },
          ],
        },
--- a/apps/web/app/[locale]/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/[locale]/(marketing)/_components/site-header-account-section.tsx
@@ -31,6 +31,7 @@ const MobileModeToggle = dynamic(

 const paths = {
  home: pathsConfig.app.home,
+  profileSettings: pathsConfig.app.personalAccountSettings,
 };

 const features = {
@@ -78,26 +79,28 @@ function AuthButtons() {

      <div className={'flex items-center gap-x-2'}>
        <Button
+          nativeButton={false}
          className={'hidden md:flex md:text-sm'}
-          asChild
+          render={
+            <Link href={pathsConfig.auth.signIn}>
+              <Trans i18nKey={'auth.signIn'} />
+            </Link>
+          }
          variant={'outline'}
          size={'sm'}
-        >
-          <Link href={pathsConfig.auth.signIn}>
-            <Trans i18nKey={'auth:signIn'} />
-          </Link>
-        </Button>
+        />

        <Button
-          asChild
+          nativeButton={false}
+          render={
+            <Link href={pathsConfig.auth.signUp}>
+              <Trans i18nKey={'auth.signUp'} />
+            </Link>
+          }
          className="text-xs md:text-sm"
          variant={'default'}
          size={'sm'}
-        >
-          <Link href={pathsConfig.auth.signUp}>
-            <Trans i18nKey={'auth:signUp'} />
-          </Link>
-        </Button>
+        />
      </div>
    </div>
  );
--- a/apps/web/app/[locale]/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/[locale]/(marketing)/_components/site-header.tsx
@@ -9,7 +9,7 @@ import { SiteNavigation } from './site-navigation';
 export function SiteHeader(props: { user?: JWTUserData | null }) {
  return (
    <Header
-      logo={<AppLogo />}
+      logo={<AppLogo className="mx-auto sm:mx-0" href="/" />}
      navigation={<SiteNavigation />}
      actions={<SiteHeaderAccountSection user={props.user ?? null} />}
    />
--- a/apps/web/app/[locale]/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/[locale]/(marketing)/_components/site-navigation-item.tsx
--- a/apps/web/app/[locale]/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/[locale]/(marketing)/_components/site-navigation.tsx
@@ -15,23 +15,23 @@ import { SiteNavigationItem } from './site-navigation-item';

 const links = {
  Blog: {
-    label: 'marketing:blog',
+    label: 'marketing.blog',
    path: '/blog',
  },
  Changelog: {
-    label: 'marketing:changelog',
+    label: 'marketing.changelog',
    path: '/changelog',
  },
  Docs: {
-    label: 'marketing:documentation',
+    label: 'marketing.documentation',
    path: '/docs',
  },
  Pricing: {
-    label: 'marketing:pricing',
+    label: 'marketing.pricing',
    path: '/pricing',
  },
  FAQ: {
-    label: 'marketing:faq',
+    label: 'marketing.faq',
    path: '/faq',
  },
 };
@@ -74,11 +74,14 @@ function MobileDropdown() {
          const className = 'flex w-full h-full items-center';

          return (
-            <DropdownMenuItem key={item.path} asChild>
+            <DropdownMenuItem
+              key={item.path}
+              render={
                <Link className={className} href={item.path}>
                  <Trans i18nKey={item.label} />
                </Link>
-            </DropdownMenuItem>
+              }
+            />
          );
        })}
      </DropdownMenuContent>
--- a/apps/web/app/[locale]/(marketing)/_components/site-page-header.tsx
+++ b/apps/web/app/[locale]/(marketing)/_components/site-page-header.tsx
--- a/apps/web/app/[locale]/(marketing)/blog/[slug]/page.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/[slug]/page.tsx
@@ -1,13 +1,10 @@
 import { cache } from 'react';

 import type { Metadata } from 'next';
-
 import { notFound } from 'next/navigation';

 import { createCmsClient } from '@kit/cms';

-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { Post } from '../../blog/_components/post';

 interface BlogPageProps {
@@ -75,4 +72,4 @@ async function BlogPost({ params }: BlogPageProps) {
  );
 }

-export default withI18n(BlogPost);
+export default BlogPost;
--- a/apps/web/app/[locale]/(marketing)/blog/_components/blog-pagination.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/_components/blog-pagination.tsx
@@ -25,7 +25,7 @@ export function BlogPagination(props: {
          }}
        >
          <ArrowLeft className={'mr-2 h-4'} />
-          <Trans i18nKey={'marketing:blogPaginationPrevious'} />
+          <Trans i18nKey={'marketing.blogPaginationPrevious'} />
        </Button>
      </If>

@@ -36,7 +36,7 @@ export function BlogPagination(props: {
            navigate(props.currentPage + 1);
          }}
        >
-          <Trans i18nKey={'marketing:blogPaginationNext'} />
+          <Trans i18nKey={'marketing.blogPaginationNext'} />
          <ArrowRight className={'ml-2 h-4'} />
        </Button>
      </If>
--- a/apps/web/app/[locale]/(marketing)/blog/_components/cover-image.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/_components/cover-image.tsx
--- a/apps/web/app/[locale]/(marketing)/blog/_components/date-formatter.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/_components/date-formatter.tsx
--- a/apps/web/app/[locale]/(marketing)/blog/_components/draft-post-badge.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/_components/draft-post-badge.tsx
--- a/apps/web/app/[locale]/(marketing)/blog/_components/post-header.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/_components/post-header.tsx
--- a/apps/web/app/[locale]/(marketing)/blog/_components/post-preview.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/_components/post-preview.tsx
--- a/apps/web/app/[locale]/(marketing)/blog/_components/post.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/_components/post.tsx
--- a/apps/web/app/[locale]/(marketing)/blog/page.tsx
+++ b/apps/web/app/[locale]/(marketing)/blog/page.tsx
@@ -2,14 +2,13 @@ import { cache } from 'react';

 import type { Metadata } from 'next';

+import { getLocale, getTranslations } from 'next-intl/server';
+
 import { createCmsClient } from '@kit/cms';
 import { getLogger } from '@kit/shared/logger';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';

-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { withI18n } from '~/lib/i18n/with-i18n';
-
 // local imports
 import { SitePageHeader } from '../_components/site-page-header';
 import { BlogPagination } from './_components/blog-pagination';
@@ -24,7 +23,8 @@ const BLOG_POSTS_PER_PAGE = 10;
 export const generateMetadata = async (
  props: BlogPageProps,
 ): Promise<Metadata> => {
-  const { t, resolvedLanguage } = await createI18nServerInstance();
+  const t = await getTranslations('marketing');
+  const resolvedLanguage = await getLocale();
  const searchParams = await props.searchParams;
  const limit = BLOG_POSTS_PER_PAGE;

@@ -34,8 +34,8 @@ export const generateMetadata = async (
  const { total } = await getContentItems(resolvedLanguage, limit, offset);

  return {
-    title: t('marketing:blog'),
-    description: t('marketing:blogSubtitle'),
+    title: t('blog'),
+    description: t('blogSubtitle'),
    pagination: {
      previous: page > 0 ? `/blog?page=${page - 1}` : undefined,
      next: offset + limit < total ? `/blog?page=${page + 1}` : undefined,
@@ -67,7 +67,8 @@ const getContentItems = cache(
 );

 async function BlogPage(props: BlogPageProps) {
-  const { t, resolvedLanguage: language } = await createI18nServerInstance();
+  const t = await getTranslations('marketing');
+  const language = await getLocale();
  const searchParams = await props.searchParams;

  const limit = BLOG_POSTS_PER_PAGE;
@@ -82,15 +83,12 @@ async function BlogPage(props: BlogPageProps) {

  return (
    <>
-      <SitePageHeader
-        title={t('marketing:blog')}
-        subtitle={t('marketing:blogSubtitle')}
-      />
+      <SitePageHeader title={t('blog')} subtitle={t('blogSubtitle')} />

      <div className={'container flex flex-col space-y-6 py-8'}>
        <If
          condition={posts.length > 0}
-          fallback={<Trans i18nKey="marketing:noPosts" />}
+          fallback={<Trans i18nKey="marketing.noPosts" />}
        >
          <PostsGridList>
            {posts.map((post, idx) => {
@@ -111,7 +109,7 @@ async function BlogPage(props: BlogPageProps) {
  );
 }

-export default withI18n(BlogPage);
+export default BlogPage;

 function PostsGridList({ children }: React.PropsWithChildren) {
  return (
--- a/apps/web/app/[locale]/(marketing)/changelog/[slug]/page.tsx
+++ b/apps/web/app/[locale]/(marketing)/changelog/[slug]/page.tsx
@@ -1,13 +1,10 @@
 import { cache } from 'react';

 import type { Metadata } from 'next';
-
 import { notFound } from 'next/navigation';

 import { createCmsClient } from '@kit/cms';

-import { withI18n } from '~/lib/i18n/with-i18n';
-
 import { ChangelogDetail } from '../_components/changelog-detail';

 interface ChangelogEntryPageProps {
@@ -107,4 +104,4 @@ async function ChangelogEntryPage({ params }: ChangelogEntryPageProps) {
  );
 }

-export default withI18n(ChangelogEntryPage);
+export default ChangelogEntryPage;
--- a/apps/web/app/[locale]/(marketing)/changelog/_components/changelog-detail.tsx
+++ b/apps/web/app/[locale]/(marketing)/changelog/_components/changelog-detail.tsx
--- a/apps/web/app/[locale]/(marketing)/changelog/_components/changelog-entry.tsx
+++ b/apps/web/app/[locale]/(marketing)/changelog/_components/changelog-entry.tsx
--- a/Show More
+++ b/Show More