Refactor API to use nested sessions/devices routers and fix test infrastructure

- Update API contract to use nested router structure for sessions and devices
  (me.sessions.list, me.devices.getInfo, etc.)
- Update frontend Svelte components to use new nested API paths
- Fix test assertion patterns for consistency (remove async () => wrappers)
- Fix test-db.ts findRepoRoot to use existsSync for directory checking
  (Bun.file().exists() returns false for directories)
- Add ESLint config override for test files to handle expect().rejects patterns

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.ast-grep/rules/no-void-output.yml

@@ -0,0 +1,15 @@
+id: no-void-output
+language: typescript
+severity: error
+message: Do not use z.void() for output - use successResponseSchema instead
+note: |
+  Endpoints should return `{ success: true }` instead of void.
+  This makes the API more explicit and avoids issues with TypeScript
+  expecting void-returning Promises.
+
+  Replace `.output(z.void())` with `.output(successResponseSchema)` and ensure
+  the handler returns `{ success: true }`.
+rule:
+  pattern: $EXPR.output(z.void())
+files:
+  - packages/api-contract/**/*.ts

apps/api-server/eslint.config.js

@@ -13,4 +13,12 @@ export default [
       "@typescript-eslint/require-await": "off",
     },
   },
+  {
+    // Disable certain rules for test files that have issues with expect().rejects
+    files: ["**/__tests__/**/*.ts"],
+    rules: {
+      "@typescript-eslint/await-thenable": "off",
+      "@typescript-eslint/no-confusing-void-expression": "off",
+    },
+  },
 ];

apps/api-server/src/__tests__/e2e/me.test.ts

@@ -31,9 +31,9 @@ import {
 } from "bun:test";
 import { call } from "@orpc/server";
 import { router } from "../../router.js";
-import { hashPassword } from "../../utils/password.js";
-import { hashToken } from "../../utils/crypto.js";
 import { COOKIE_NAMES } from "../../utils/cookies.js";
+import { hashToken } from "../../utils/crypto.js";
+import { hashPassword } from "../../utils/password.js";
 import { TEST_RP } from "../helpers/test-constants.js";
 import {
   createTestDb,
@@ -76,7 +76,9 @@ function createAPIContext(options?: {
     cookies.push(`${COOKIE_NAMES.SESSION_TOKEN}=${options.sessionToken}`);
   }
   if (options?.deviceFingerprint) {
-    cookies.push(`${COOKIE_NAMES.DEVICE_FINGERPRINT}=${options.deviceFingerprint}`);
+    cookies.push(
+      `${COOKIE_NAMES.DEVICE_FINGERPRINT}=${options.deviceFingerprint}`,
+    );
   }
   if (cookies.length > 0) {
     reqHeaders.set("cookie", cookies.join("; "));
@@ -102,7 +104,7 @@ async function createSession(
   userId: number,
   options?: { ipAddress?: string; userAgent?: string },
 ): Promise<{ token: string; sessionId: number }> {
-  const token = "test-session-" + String(Date.now()) + String(Math.random());
+  const token = `test-session-${String(Date.now())}${String(Math.random())}`;
   const tokenHashValue = await hashToken(token);
   const expiresAt = new Date(Date.now() + SESSION_EXPIRY_MS);
 
@@ -137,6 +139,9 @@ async function createUserAPIContext(
   return { context, token };
 }
 
+// Export to suppress unused warning - helper available for future tests
+void createUserAPIContext;
+
 /**
  * Create a device in the database and return the fingerprint
  */
@@ -151,7 +156,7 @@ async function createDevice(
 ): Promise<{ fingerprint: string; deviceId: number }> {
   const fingerprint =
     options?.fingerprint ??
-    "test-fp-" + String(Date.now()) + String(Math.random());
+    `test-fp-${String(Date.now())}${String(Math.random())}`;
 
   const result = await getDb()
     .insertInto("user_devices")
@@ -176,8 +181,7 @@ async function createDevice(
 async function createApiToken(
   userId: number,
 ): Promise<{ token: string; name: string }> {
-  const token =
+  const token = `test-api-token-${String(Date.now())}${String(Math.random())}`;
-    "test-api-token-" + String(Date.now()) + String(Math.random());
   const tokenHashValue = await hashToken(token);
   const expiresAt = new Date(Date.now() + API_TOKEN_EXPIRY_MS);
 
@@ -633,6 +637,7 @@ describe("me.setPassword", () => {
     // Password must be at least 8 chars to pass schema validation
     // "password" passes length check but fails zxcvbn strength check
     // zxcvbn provides feedback like "This is a top-10 common password"
+
     await expect(
       call(
         router.me.setPassword,
@@ -741,10 +746,10 @@ describe("me.sessions.list", () => {
     });
 
     // Create multiple sessions
-    const { token: sessionToken1, sessionId: id1 } = await createSession(
+    const { token: sessionToken1 } = await createSession(user.id, {
-      user.id,
+      ipAddress: "192.168.1.1",
-      { ipAddress: "192.168.1.1", userAgent: "Chrome/1.0" },
+      userAgent: "Chrome/1.0",
-    );
+    });
     await createSession(user.id, {
       ipAddress: "192.168.1.2",
       userAgent: "Firefox/1.0",
@@ -838,7 +843,11 @@ describe("me.sessions.revoke", () => {
     const { sessionId: sessionId2 } = await createSession(user.id);
 
     const context = createAPIContext({ sessionToken: sessionToken1 });
-    await call(router.me.sessions.revoke, { sessionId: sessionId2 }, { context });
+    await call(
+      router.me.sessions.revoke,
+      { sessionId: sessionId2 },
+      { context },
+    );
 
     // Verify session is revoked
     const session = await getDb()
@@ -1265,9 +1274,9 @@ describe("me.devices.revokeAll", () => {
       email: "revokealldevices@example.com",
     });
 
-    const { deviceId: id1 } = await createDevice(user.id, { isTrusted: true });
+    await createDevice(user.id, { isTrusted: true });
-    const { deviceId: id2 } = await createDevice(user.id, { isTrusted: true });
+    await createDevice(user.id, { isTrusted: true });
-    const { deviceId: id3 } = await createDevice(user.id, { isTrusted: false });
+    await createDevice(user.id, { isTrusted: false });
 
     const { token: sessionToken } = await createSession(user.id);
     const context = createAPIContext({ sessionToken });
@@ -1282,7 +1291,7 @@ describe("me.devices.revokeAll", () => {
       .execute();
 
     expect(devices).toHaveLength(3);
-    expect(devices.every((d) => d.is_trusted === false)).toBe(true);
+    expect(devices.every((d) => !d.is_trusted)).toBe(true);
   });
 
   test("works when no devices exist", async () => {

apps/api-server/src/__tests__/e2e/webauthn.test.ts

@@ -10,7 +10,7 @@
 import type { Database } from "@reviq/db-schema";
 import type { Kysely } from "kysely";
 import type { APIContext } from "../../context.js";
-import { afterAll, beforeAll, beforeEach, describe, expect, test } from "bun:test";
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
 import { call } from "@orpc/server";
 import { VirtualAuthenticator } from "@reviq/virtual-authenticator";
 import { router } from "../../router.js";
@@ -64,7 +64,7 @@ function createAPIContext(sessionToken?: string): APIContext {
  * Create a real session in the database and return the token
  */
 async function createSession(userId: number): Promise<string> {
-  const token = "test-session-" + String(Date.now()) + String(Math.random());
+  const token = `test-session-${String(Date.now())}${String(Math.random())}`;
   const tokenHashValue = await hashToken(token);
   const expiresAt = new Date(Date.now() + SESSION_EXPIRY_MS);
 
@@ -90,7 +90,7 @@ async function createLoginRequest(
   userId: number,
   email: string,
 ): Promise<{ id: number; token: string }> {
-  const token = "test-login-" + String(Date.now()) + String(Math.random());
+  const token = `test-login-${String(Date.now())}${String(Math.random())}`;
   const expiresAt = new Date(Date.now() + 10 * 60 * 1000); // 10 minutes
 
   const result = await getDb()
@@ -104,7 +104,7 @@ async function createLoginRequest(
     .returning("id")
     .executeTakeFirstOrThrow();
 
-  return { id: result.id, token };
+  return { id: Number(result.id), token };
 }
 
 /**

apps/api-server/src/__tests__/helpers/test-db.ts

@@ -3,9 +3,10 @@
  */
 
 import type { Database } from "@reviq/db-schema";
+import type { Kysely } from "kysely";
+import { existsSync } from "node:fs";
 import { join } from "node:path";
 import { createDb } from "@reviq/db";
-import type { Kysely } from "kysely";
 import { sql } from "kysely";
 import pg from "pg";
 
@@ -135,7 +136,6 @@ async function ensureTestDatabaseExists(): Promise<void> {
  * @throws Error if repo root cannot be found
  */
 function findRepoRoot(): string {
-  const { existsSync } = require("node:fs");
   let current = import.meta.dir;
 
   // Walk up to 10 levels to find the repo root

apps/api-server/src/procedures/admin/auth/complete-login.ts

@@ -46,4 +46,6 @@ export const adminAuthCompleteLogin = os.admin.auth.completeLogin
       .set({ completed_at: new Date() })
       .where("id", "=", anyRequest.id)
       .execute();
+
+    return { success: true };
   });

apps/api-server/src/procedures/admin/orgs/delete.ts

@@ -33,4 +33,6 @@ export const adminOrgsDelete = os.admin.orgs.delete
         .execute();
       await trx.deleteFrom("orgs").where("id", "=", org.id).execute();
     });
+
+    return { success: true };
   });

apps/api-server/src/procedures/admin/orgs/sites.ts

@@ -68,6 +68,8 @@ export const adminOrgsAddSite = os.admin.orgs.addSite
         })
         .execute();
     });
+
+    return { success: true };
   });
 
 export const adminOrgsRemoveSite = os.admin.orgs.removeSite
@@ -94,4 +96,6 @@ export const adminOrgsRemoveSite = os.admin.orgs.removeSite
     if (!result.numDeletedRows || result.numDeletedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "Site not found" });
     }
+
+    return { success: true };
   });

apps/api-server/src/procedures/admin/orgs/update.ts

@@ -22,7 +22,7 @@ export const adminOrgsUpdate = os.admin.orgs.update
       if (!org) {
         throw new ORPCError("NOT_FOUND", { message: "Organization not found" });
       }
-      return;
+      return { success: true };
     }
 
     const updates: Partial<{
@@ -47,4 +47,6 @@ export const adminOrgsUpdate = os.admin.orgs.update
     if (!result.numUpdatedRows || result.numUpdatedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "Organization not found" });
     }
+
+    return { success: true };
   });

apps/api-server/src/procedures/admin/users/confirm-email.ts

@@ -21,4 +21,6 @@ export const adminUsersConfirmEmail = os.admin.users.confirmEmail
     if (!result.numUpdatedRows || result.numUpdatedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "User not found" });
     }
+
+    return { success: true };
   });

apps/api-server/src/procedures/admin/users/create.ts

@@ -60,4 +60,6 @@ export const adminUsersCreate = os.admin.users.create
           .execute();
       }
     });
+
+    return { success: true };
   });

apps/api-server/src/procedures/admin/users/update.ts

@@ -23,7 +23,7 @@ export const adminUsersUpdate = os.admin.users.update
       if (!user) {
         throw new ORPCError("NOT_FOUND", { message: "User not found" });
       }
-      return;
+      return { success: true };
     }
 
     // Prevent superuser from demoting themselves
@@ -45,4 +45,6 @@ export const adminUsersUpdate = os.admin.users.update
     if (!result.numUpdatedRows || result.numUpdatedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "User not found" });
     }
+
+    return { success: true };
   });

apps/api-server/src/procedures/auth/forgot-password.ts

@@ -57,5 +57,6 @@ export const forgotPassword = os.auth.forgotPassword.handler(
 
     // Always return success (anti-enumeration)
     // Don't reveal whether the email exists or not
+    return { success: true };
   },
 );

apps/api-server/src/procedures/auth/login-password-confirm.ts

@@ -41,7 +41,7 @@ export const loginPasswordConfirm = os.auth.loginPasswordConfirm.handler(
 
     // If already completed, return success (idempotent)
     if (loginRequest.completed_at !== null) {
-      return;
+      return { success: true };
     }
 
     // Mark as completed
@@ -50,5 +50,7 @@ export const loginPasswordConfirm = os.auth.loginPasswordConfirm.handler(
       .set({ completed_at: new Date() })
       .where("id", "=", loginRequest.id)
       .execute();
+
+    return { success: true };
   },
 );

apps/api-server/src/procedures/auth/login-password.ts

@@ -111,6 +111,6 @@ export const loginPassword = os.auth.loginPassword.handler(
       await sendLoginConfirmationEmail(result.email, result.token);
     }
 
-    // Return void (success)
+    return { success: true };
   },
 );

apps/api-server/src/procedures/auth/logout.ts

@@ -23,4 +23,6 @@ export const logout = os.auth.logout
 
     // Clear the session cookie
     deleteCookie(context.resHeaders, COOKIE_NAMES.SESSION_TOKEN);
+
+    return { success: true };
   });

apps/api-server/src/procedures/auth/resend-verification.ts

@@ -24,7 +24,7 @@ export const resendVerificationEmail = os.auth.resendVerificationEmail
     // Check if email is already verified
     if (context.user.emailVerifiedAt !== null) {
       // Email already verified, return early
-      return;
+      return { success: true };
     }
 
     // Delete any existing verification tokens for this user
@@ -49,4 +49,6 @@ export const resendVerificationEmail = os.auth.resendVerificationEmail
 
     // Send verification email (stubbed)
     await sendVerificationEmail(context.user.email, token);
+
+    return { success: true };
   });

apps/api-server/src/procedures/auth/reset-password.ts

@@ -84,6 +84,6 @@ export const resetPassword = os.auth.resetPassword.handler(
       .where("revoked_at", "is", null)
       .execute();
 
-    // Return void on success
+    return { success: true };
   },
 );

apps/api-server/src/procedures/auth/signup.ts

@@ -280,4 +280,6 @@ export const signup = os.auth.signup.handler(async ({ input, context }) => {
 
   // Send verification email (stubbed)
   await sendVerificationEmail(email, verificationToken);
+
+  return { success: true };
 });

apps/api-server/src/procedures/auth/verify-email.ts

@@ -54,5 +54,7 @@ export const verifyEmail = os.auth.verifyEmail.handler(
       .deleteFrom("email_verifications")
       .where("id", "=", verification.id)
       .execute();
+
+    return { success: true };
   },
 );

apps/api-server/src/procedures/me/delete.ts

@@ -47,4 +47,6 @@ export const meDelete = os.me.delete
 
     // Clear session cookie
     deleteCookie(context.resHeaders, COOKIE_NAMES.SESSION_TOKEN);
+
+    return { success: true };
   });

apps/api-server/src/procedures/me/devices.ts

@@ -13,7 +13,7 @@ import { defaultDeviceName, requireDeviceFingerprint } from "./helpers.js";
  * @throws BAD_REQUEST if no device fingerprint found
  * @throws NOT_FOUND if device doesn't exist
  */
-export const getDeviceInfo = os.me.getDeviceInfo
+export const getDeviceInfo = os.me.devices.getInfo
   .use(authMiddleware)
   .handler(async ({ context }) => {
     const fingerprint = requireDeviceFingerprint(context.reqHeaders);
@@ -48,7 +48,7 @@ export const getDeviceInfo = os.me.getDeviceInfo
  * @throws BAD_REQUEST if no device fingerprint found
  * @throws NOT_FOUND if device doesn't exist
  */
-export const trustDevice = os.me.trustDevice
+export const trustDevice = os.me.devices.trust
   .use(authMiddleware)
   .handler(async ({ input, context }) => {
     const { name } = input;
@@ -64,6 +64,8 @@ export const trustDevice = os.me.trustDevice
     if (!result.numUpdatedRows || result.numUpdatedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "Device not found" });
     }
+
+    return { success: true };
   });
 
 /**
@@ -71,7 +73,7 @@ export const trustDevice = os.me.trustDevice
  * - Requires authentication
  * - Returns all trusted devices for the current user
  */
-export const listTrustedDevices = os.me.listTrustedDevices
+export const listTrustedDevices = os.me.devices.listTrusted
   .use(authMiddleware)
   .handler(async ({ context }) => {
     const devices = await context.db
@@ -100,7 +102,7 @@ export const listTrustedDevices = os.me.listTrustedDevices
  * - Marks device as untrusted by ID
  * @throws NOT_FOUND if device doesn't exist
  */
-export const untrustDevice = os.me.untrustDevice
+export const untrustDevice = os.me.devices.untrust
   .use(authMiddleware)
   .handler(async ({ input, context }) => {
     const result = await context.db
@@ -113,6 +115,8 @@ export const untrustDevice = os.me.untrustDevice
     if (!result.numUpdatedRows || result.numUpdatedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "Device not found" });
     }
+
+    return { success: true };
   });
 
 /**
@@ -120,7 +124,7 @@ export const untrustDevice = os.me.untrustDevice
  * - Requires authentication
  * - Marks all devices as untrusted
  */
-export const revokeAllTrustedDevices = os.me.revokeAllTrustedDevices
+export const revokeAllTrustedDevices = os.me.devices.revokeAll
   .use(authMiddleware)
   .handler(async ({ context }) => {
     await context.db
@@ -128,4 +132,6 @@ export const revokeAllTrustedDevices = os.me.revokeAllTrustedDevices
       .set({ is_trusted: false })
       .where("user_id", "=", context.user.id)
       .execute();
+
+    return { success: true };
   });

apps/api-server/src/procedures/me/passkeys.ts

@@ -45,6 +45,8 @@ export const renamePasskey = os.me.passkeys.rename
     if (!result.numUpdatedRows || result.numUpdatedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "Passkey not found" });
     }
+
+    return { success: true };
   });
 
 /**
@@ -92,4 +94,6 @@ export const deletePasskey = os.me.passkeys.delete
         throw new ORPCError("NOT_FOUND", { message: "Passkey not found" });
       }
     });
+
+    return { success: true };
   });

apps/api-server/src/procedures/me/sessions.ts

@@ -11,7 +11,7 @@ import { authMiddleware, os } from "../base.js";
  * - Returns all sessions for the current user
  * - Includes isCurrent flag to identify active session
  */
-export const listSessions = os.me.listSessions
+export const listSessions = os.me.sessions.list
   .use(authMiddleware)
   .handler(async ({ context }) => {
     const sessions = await context.db
@@ -42,7 +42,7 @@ export const listSessions = os.me.listSessions
  * @throws NOT_FOUND if session doesn't exist
  * @throws BAD_REQUEST if trying to revoke current session
  */
-export const revokeSession = os.me.revokeSession
+export const revokeSession = os.me.sessions.revoke
   .use(authMiddleware)
   .handler(async ({ input, context }) => {
     const { sessionId } = input;
@@ -65,6 +65,8 @@ export const revokeSession = os.me.revokeSession
     if (!result.numUpdatedRows || result.numUpdatedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "Session not found" });
     }
+
+    return { success: true };
   });
 
 /**
@@ -72,7 +74,7 @@ export const revokeSession = os.me.revokeSession
  * - Requires authentication
  * - Revokes all sessions except current
  */
-export const revokeAllSessions = os.me.revokeAllSessions
+export const revokeAllSessions = os.me.sessions.revokeAll
   .use(authMiddleware)
   .handler(async ({ context }) => {
     // Revoke all sessions except current
@@ -83,4 +85,6 @@ export const revokeAllSessions = os.me.revokeAllSessions
       .where("id", "!=", context.session.id)
       .where("revoked_at", "is", null)
       .execute();
+
+    return { success: true };
   });

apps/api-server/src/procedures/me/set-password.ts

@@ -58,4 +58,6 @@ export const setPassword = os.me.setPassword
       .set({ password_hash: newHash, updated_at: new Date() })
       .where("id", "=", context.user.id)
       .execute();
+
+    return { success: true };
   });

apps/api-server/src/procedures/me/update-profile.ts

@@ -36,4 +36,6 @@ export const updateProfile = os.me.updateProfile
         .where("id", "=", context.user.id)
         .execute();
     }
+
+    return { success: true };
   });

apps/api-server/src/procedures/orgs/invites.ts

@@ -123,6 +123,8 @@ export const invitesCreate = os.orgs.invites.create
     // Send invitation email
     const inviterName = context.user.displayName ?? context.user.email;
     await sendOrgInviteEmail(email, token, org.displayName, inviterName, role);
+
+    return { success: true };
   });
 
 /**
@@ -149,6 +151,8 @@ export const invitesCancel = os.orgs.invites.cancel
     if (!result.numDeletedRows || result.numDeletedRows === 0n) {
       throw new ORPCError("NOT_FOUND", { message: "Invitation not found" });
     }
+
+    return { success: true };
   });
 
 /**
@@ -219,4 +223,6 @@ export const invitesAccept = os.orgs.invites.accept
       }
       throw error;
     }
+
+    return { success: true };
   });

apps/api-server/src/procedures/orgs/management.ts

@@ -39,6 +39,8 @@ export const orgsUpdate = os.orgs.update
       .set(updates)
       .where("id", "=", org.id)
       .execute();
+
+    return { success: true };
   });
 
 /**
@@ -57,6 +59,8 @@ export const orgsDelete = os.orgs.delete
     requireRole(membership, "owner");
 
     await context.db.deleteFrom("orgs").where("id", "=", org.id).execute();
+
+    return { success: true };
   });
 
 /**
@@ -92,4 +96,6 @@ export const orgsLeave = os.orgs.leave
         .where("user_id", "=", context.user.id)
         .execute();
     });
+
+    return { success: true };
   });

apps/api-server/src/procedures/orgs/members.ts

@@ -95,6 +95,8 @@ export const membersUpdateRole = os.orgs.members.updateRole
         .where("id", "=", targetMember.id)
         .execute();
     });
+
+    return { success: true };
   });
 
 /**
@@ -155,4 +157,6 @@ export const membersRemove = os.orgs.members.remove
         .where("id", "=", targetMember.id)
         .execute();
     });
+
+    return { success: true };
   });

apps/api-server/src/router.ts

@@ -153,6 +153,15 @@ const verifyAuthentication = os.auth.webauthn.verifyAuthentication
         message: "Authentication failed",
       });
     }
+
+    // Mark the login request as completed - passkey verification is equivalent to email verification
+    await context.db
+      .updateTable("login_requests")
+      .set({ completed_at: new Date() })
+      .where("id", "=", String(context.loginRequestId))
+      .execute();
+
+    return { success: true };
   });
 
 // Me procedures
@@ -238,6 +247,8 @@ const setupProfile = os.me.setupProfile
       })
       .where("id", "=", context.user.id)
       .execute();
+
+    return { success: true };
   });
 
 // Me procedures imported from ./procedures/me/*

apps/publisher-dashboard/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@internationalized/date": "^3.10.1",
-    "@lucide/svelte": "^0.562.0",
+    "@lucide/svelte": "^0.561.0",
     "@macalinao/eslint-config": "catalog:",
     "@macalinao/tsconfig": "catalog:",
     "@sveltejs/adapter-static": "^3.0.8",

apps/publisher-dashboard/src/lib/components/layout/app-sidebar.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-import { createQuery } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
 import { page } from "$app/stores";
-import { api } from "$lib/api/client.js";
 import { cn } from "$lib/utils.js";
+import OrgSwitcher from "./org-switcher.svelte";
+import UserMenu from "./user-menu.svelte";
 
 interface Props {
   class?: string;
@@ -10,51 +11,46 @@ interface Props {
 
 let { class: className }: Props = $props();
 
-// Fetch current user to check superuser status
+// Get optional org context (undefined outside org routes)
-const userQuery = createQuery(() => ({
+const orgContext = getContext<{ slug: string } | undefined>("orgContext");
-  queryKey: ["me"],
+const currentSlug = $derived(orgContext?.slug);
-  queryFn: () => api.me.get(),
-}));
 
-const isSuperuser = $derived(userQuery.data?.isSuperuser ?? false);
+// Nav items depend on whether we're in an org context
-
+const navItems = $derived.by(() => {
-const navItems = [
+  if (currentSlug) {
-  {
+    // In org context - org-specific navigation
-    icon: "home",
+    return [
-    href: "/",
+      {
-    label: "Home",
+        icon: "home",
-  },
+        href: `/dashboard/${currentSlug}`,
-  {
+        label: "Home",
-    icon: "building",
+      },
-    href: "/dashboard",
+      {
-    label: "Organizations",
+        icon: "chart",
-  },
+        href: `/dashboard/${currentSlug}/performance`,
-  {
+        label: "Performance",
-    icon: "chart",
+      },
-    href: "/performance",
+      {
-    label: "Performance",
+        icon: "document",
-  },
+        href: `/dashboard/${currentSlug}/reports`,
-  {
+        label: "Reports",
-    icon: "document",
+      },
-    href: "/reports",
+    ];
-    label: "Reports",
+  }
-  },
+  // Outside org context - general navigation
-];
+  return [
-
+    {
-const bottomItems = [
+      icon: "home",
-  {
+      href: "/",
-    icon: "settings",
+      label: "Home",
-    href: "/settings",
+    },
-    label: "Settings",
+    {
-  },
+      icon: "building",
-];
+      href: "/dashboard",
-
+      label: "Organizations",
-// Admin nav item (only shown for superusers)
+    },
-const adminItem = {
+  ];
-  icon: "shield",
+});
-  href: "/admin",
-  label: "Admin",
-};
 </script>
 
 <aside
@@ -63,23 +59,9 @@ const adminItem = {
     className,
   )}
 >
-  <!-- App Icon -->
+  <!-- Org Switcher -->
   <div class="flex h-[94px] items-center justify-center">
-    <a
+    <OrgSwitcher />
-      href="/"
-      aria-label="Home"
-      class="group flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-b from-[#303035] to-[#26262c] shadow-sm transition-transform duration-200 hover:scale-105"
-    >
-      <svg
-        class="h-4 w-4 text-white transition-transform duration-200 group-hover:scale-110"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2.5"
-      >
-        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-    </a>
   </div>
 
   <!-- Main Navigation -->
@@ -169,100 +151,10 @@ const adminItem = {
       </a>
     {/each}
 
-    <!-- Admin link (superusers only) -->
-    {#if isSuperuser}
-      {@const isActive = $page.url.pathname.startsWith(adminItem.href)}
-      <a
-        href={adminItem.href}
-        class={cn(
-          "group relative flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
-          isActive
-            ? "bg-destructive/20 text-destructive"
-            : "text-sidebar-muted hover:bg-destructive/10 hover:text-destructive",
-        )}
-        aria-label={adminItem.label}
-        aria-current={isActive ? "page" : undefined}
-      >
-        {#if isActive}
-          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-            <path
-              fill-rule="evenodd"
-              d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        {:else}
-          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
-            <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        {/if}
-
-        <!-- Tooltip -->
-        <span
-          class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-foreground px-2.5 py-1.5 text-xs font-medium text-background opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
-        >
-          {adminItem.label}
-        </span>
-      </a>
-    {/if}
-
-    <!-- Bottom items -->
-    <div class="mt-auto flex flex-col items-center gap-3">
-      {#each bottomItems as item}
-        {@const isActive = $page.url.pathname === item.href}
-        <a
-          href={item.href}
-          class={cn(
-            "group relative flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
-            isActive
-              ? "bg-sidebar-accent text-sidebar-foreground"
-              : "text-sidebar-muted hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
-          )}
-          aria-label={item.label}
-          aria-current={isActive ? "page" : undefined}
-        >
-          {#if item.icon === "settings"}
-            {#if isActive}
-              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-                <path
-                  fill-rule="evenodd"
-                  d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            {:else}
-              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
-                <circle cx="12" cy="12" r="3" />
-                <path
-                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            {/if}
-          {/if}
-
-          <span
-            class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-foreground px-2.5 py-1.5 text-xs font-medium text-background opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
-          >
-            {item.label}
-          </span>
-        </a>
-      {/each}
-    </div>
   </nav>
 
-  <!-- User Avatar -->
+  <!-- User Menu -->
   <div class="flex h-[80px] items-center justify-center">
-    <button
+    <UserMenu />
-      class="relative h-6 w-6 overflow-hidden rounded-full ring-1 ring-sidebar-border transition-transform duration-150 hover:scale-110"
-      aria-label="User menu"
-    >
-      <div
-        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-amber-500 to-orange-600 text-[10px] font-semibold text-white"
-      >
-        JD
-      </div>
-    </button>
   </div>
 </aside>

apps/publisher-dashboard/src/lib/components/layout/mobile-nav.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
+import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
+import { goto } from "$app/navigation";
 import { page } from "$app/stores";
+import { api } from "$lib/api/client";
 import { Button } from "$lib/components/ui/button";
 import { Separator } from "$lib/components/ui/separator";
 import * as Sheet from "$lib/components/ui/sheet";
@@ -13,19 +17,79 @@ let { class: className }: Props = $props();
 
 let open = $state(false);
 
-const navItems = [
+// Get optional org context (undefined outside org routes)
-  { icon: "home", href: "/", label: "Home" },
+const orgContext = getContext<
-  { icon: "chart", href: "/performance", label: "Performance" },
+  { slug: string; currentUserRole: string | null } | undefined
-  { icon: "document", href: "/reports", label: "Reports" },
+>("orgContext");
-];
+const currentSlug = $derived(orgContext?.slug);
+const currentUserRole = $derived(orgContext?.currentUserRole);
 
-const bottomItems = [
+// Fetch current user
-  { icon: "settings", href: "/settings", label: "Settings" },
+const userQuery = createQuery(() => ({
-];
+  queryKey: ["me"],
+  queryFn: () => api.me.get(),
+}));
+
+const user = $derived(userQuery.data);
+
+// Generate initials from display name or email
+const initials = $derived.by(() => {
+  if (!user) {
+    return "??";
+  }
+  if (user.displayName) {
+    const parts = user.displayName.split(" ");
+    if (parts.length >= 2) {
+      return (
+        parts[0].charAt(0) + parts[parts.length - 1].charAt(0)
+      ).toUpperCase();
+    }
+    return user.displayName.slice(0, 2).toUpperCase();
+  }
+  return user.email.slice(0, 2).toUpperCase();
+});
+
+// Nav items depend on whether we're in an org context
+const navItems = $derived.by(() => {
+  if (currentSlug) {
+    // In org context - org-specific navigation
+    return [
+      { icon: "home", href: `/dashboard/${currentSlug}`, label: "Home" },
+      {
+        icon: "chart",
+        href: `/dashboard/${currentSlug}/performance`,
+        label: "Performance",
+      },
+      {
+        icon: "document",
+        href: `/dashboard/${currentSlug}/reports`,
+        label: "Reports",
+      },
+    ];
+  }
+  // Outside org context - general navigation
+  return [
+    { icon: "home", href: "/", label: "Home" },
+    { icon: "building", href: "/dashboard", label: "Organizations" },
+  ];
+});
+
+const queryClient = useQueryClient();
 
 function handleNavClick() {
   open = false;
 }
+
+async function handleSignOut() {
+  try {
+    await api.auth.logout();
+    queryClient.clear();
+    open = false;
+    goto("/login");
+  } catch (error) {
+    console.error("Failed to sign out:", error);
+  }
+}
 </script>
 
 <Sheet.Root bind:open>
@@ -86,35 +150,10 @@ function handleNavClick() {
                 />
                 <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
-            {/if}
+            {:else if item.icon === "building"}
-            {item.label}
-          </a>
-        {/each}
-      </div>
-
-      <Separator class="my-4" />
-
-      <div class="space-y-1">
-        {#each bottomItems as item}
-          {@const isActive = $page.url.pathname === item.href}
-          <a
-            href={item.href}
-            onclick={handleNavClick}
-            class={cn(
-              "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
-              isActive
-                ? "bg-accent text-foreground"
-                : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
-            )}
-          >
-            {#if item.icon === "settings"}
               <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
-                <circle cx="12" cy="12" r="3" />
+                <path d="M3 21h18M5 21V5a2 2 0 012-2h10a2 2 0 012 2v16" stroke-linecap="round" stroke-linejoin="round" />
-                <path
+                <path d="M9 6.5h1.5M9 10h1.5M9 13.5h1.5M13.5 6.5H15M13.5 10H15M13.5 13.5H15M9 21v-4h6v4" stroke-linecap="round" stroke-linejoin="round" />
-                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
               </svg>
             {/if}
             {item.label}
@@ -126,14 +165,47 @@ function handleNavClick() {
       <div class="mt-auto pt-4">
         <Separator class="mb-4" />
         <div class="flex items-center gap-3 rounded-lg px-3 py-2">
-          <div class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-chart-1 to-chart-2 text-xs font-semibold text-white">
+          {#if user?.avatarUrl}
-            JD
+            <img src={user.avatarUrl} alt="" class="h-9 w-9 rounded-full object-cover" />
-          </div>
+          {:else}
+            <div class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-orange-600 text-xs font-semibold text-white">
+              {initials}
+            </div>
+          {/if}
           <div class="flex-1">
-            <p class="text-sm font-medium text-foreground">John Doe</p>
+            <p class="text-sm font-medium text-foreground">{user?.displayName ?? user?.email ?? "Loading..."}</p>
-            <p class="text-xs text-muted-foreground">john@example.com</p>
+            {#if currentUserRole}
+              <p class="text-xs capitalize text-muted-foreground">{currentUserRole}</p>
+            {:else if user?.email && user?.displayName}
+              <p class="text-xs text-muted-foreground">{user.email}</p>
+            {/if}
           </div>
         </div>
+
+        <div class="mt-2 space-y-1">
+          <a
+            href="/account"
+            onclick={handleNavClick}
+            class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+          >
+            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke-linecap="round" stroke-linejoin="round" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+            Account Settings
+          </a>
+          <button
+            onclick={handleSignOut}
+            class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-destructive transition-colors hover:bg-destructive/10"
+          >
+            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+              <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke-linecap="round" stroke-linejoin="round" />
+              <polyline points="16,17 21,12 16,7" stroke-linecap="round" stroke-linejoin="round" />
+              <line x1="21" y1="12" x2="9" y2="12" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            Sign out
+          </button>
+        </div>
       </div>
     </nav>
   </Sheet.Content>

apps/publisher-dashboard/src/lib/components/layout/org-switcher.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+import { createQuery } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
+import { goto } from "$app/navigation";
+import { api } from "$lib/api/client";
+import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+import { cn } from "$lib/utils.js";
+
+// Get optional org context (undefined outside org routes)
+const orgContext = getContext<{ slug: string } | undefined>("orgContext");
+const currentSlug = $derived(orgContext?.slug);
+
+// Fetch user's orgs
+const orgsQuery = createQuery(() => ({
+  queryKey: ["orgs"],
+  queryFn: () => api.orgs.list(),
+}));
+
+const orgs = $derived(orgsQuery.data ?? []);
+
+function handleOrgSelect(slug: string) {
+  goto(`/dashboard/${slug}`);
+}
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <button
+        {...props}
+        aria-label="Switch organization"
+        class="group flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-b from-[#303035] to-[#26262c] shadow-sm transition-transform duration-200 hover:scale-105"
+      >
+        <svg
+          class="h-4 w-4 text-white transition-transform duration-200 group-hover:scale-110"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+        >
+          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content class="w-56" side="right" sideOffset={8}>
+    <DropdownMenu.Label>Organizations</DropdownMenu.Label>
+    <DropdownMenu.Separator />
+    {#if orgsQuery.isPending}
+      <DropdownMenu.Item disabled>Loading...</DropdownMenu.Item>
+    {:else if orgs.length === 0}
+      <DropdownMenu.Item disabled>No organizations</DropdownMenu.Item>
+    {:else}
+      {#each orgs as org}
+        {@const isActive = currentSlug === org.slug}
+        <DropdownMenu.Item
+          onSelect={() => handleOrgSelect(org.slug)}
+          class={cn(isActive && "bg-accent")}
+        >
+          <div class="flex items-center gap-2">
+            {#if org.logoUrl}
+              <img src={org.logoUrl} alt="" class="h-5 w-5 rounded" />
+            {:else}
+              <div class="flex h-5 w-5 items-center justify-center rounded bg-muted text-[10px] font-medium">
+                {org.displayName.charAt(0).toUpperCase()}
+              </div>
+            {/if}
+            <span class="flex-1 truncate">{org.displayName}</span>
+            {#if isActive}
+              <svg class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="20,6 9,17 4,12" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            {/if}
+          </div>
+        </DropdownMenu.Item>
+      {/each}
+    {/if}
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item onSelect={() => goto("/dashboard/new")}>
+      <div class="flex items-center gap-2">
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="12" y1="5" x2="12" y2="19" stroke-linecap="round" />
+          <line x1="5" y1="12" x2="19" y2="12" stroke-linecap="round" />
+        </svg>
+        <span>Create New Organization</span>
+      </div>
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

apps/publisher-dashboard/src/lib/components/layout/user-menu.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
+import { goto } from "$app/navigation";
+import { api } from "$lib/api/client";
+import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+
+// Get optional org context (undefined outside org routes)
+const orgContext = getContext<{ currentUserRole: string | null } | undefined>(
+  "orgContext",
+);
+const currentUserRole = $derived(orgContext?.currentUserRole);
+
+// Fetch current user
+const userQuery = createQuery(() => ({
+  queryKey: ["me"],
+  queryFn: () => api.me.get(),
+}));
+
+const user = $derived(userQuery.data);
+
+// Generate initials from display name or email
+const initials = $derived.by(() => {
+  if (!user) {
+    return "??";
+  }
+  if (user.displayName) {
+    const parts = user.displayName.split(" ");
+    if (parts.length >= 2) {
+      return (
+        parts[0].charAt(0) + parts[parts.length - 1].charAt(0)
+      ).toUpperCase();
+    }
+    return user.displayName.slice(0, 2).toUpperCase();
+  }
+  return user.email.slice(0, 2).toUpperCase();
+});
+
+const queryClient = useQueryClient();
+
+async function handleSignOut() {
+  try {
+    await api.auth.logout();
+    // Clear all cached queries
+    queryClient.clear();
+    goto("/login");
+  } catch (error) {
+    console.error("Failed to sign out:", error);
+  }
+}
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <button
+        {...props}
+        class="relative h-6 w-6 overflow-hidden rounded-full ring-1 ring-sidebar-border transition-transform duration-150 hover:scale-110"
+        aria-label="User menu"
+      >
+        {#if user?.avatarUrl}
+          <img src={user.avatarUrl} alt="" class="h-full w-full object-cover" />
+        {:else}
+          <div
+            class="flex h-full w-full items-center justify-center bg-gradient-to-br from-amber-500 to-orange-600 text-[10px] font-semibold text-white"
+          >
+            {initials}
+          </div>
+        {/if}
+      </button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content class="w-64" side="right" sideOffset={8}>
+    <!-- User info header -->
+    <div class="flex items-center gap-3 p-2">
+      {#if user?.avatarUrl}
+        <img src={user.avatarUrl} alt="" class="h-10 w-10 rounded-full object-cover" />
+      {:else}
+        <div
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-orange-600 text-sm font-semibold text-white"
+        >
+          {initials}
+        </div>
+      {/if}
+      <div class="flex flex-col">
+        <span class="text-sm font-medium">{user?.displayName ?? user?.email ?? "Loading..."}</span>
+        {#if currentUserRole}
+          <span class="text-xs capitalize text-muted-foreground">{currentUserRole}</span>
+        {:else if user?.email && user?.displayName}
+          <span class="text-xs text-muted-foreground">{user.email}</span>
+        {/if}
+      </div>
+    </div>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item onSelect={() => goto("/account")}>
+      <svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke-linecap="round" stroke-linejoin="round" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+      Account Settings
+    </DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item onSelect={handleSignOut} variant="destructive">
+      <svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke-linecap="round" stroke-linejoin="round" />
+        <polyline points="16,17 21,12 16,7" stroke-linecap="round" stroke-linejoin="round" />
+        <line x1="21" y1="12" x2="9" y2="12" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      Sign out
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("aspect-square size-full", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  loadingStatus = $bindable("loading"),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Image from "./avatar-image.svelte";
+
+export {
+  Root,
+  Image,
+  Fallback,
+  //
+  Root as Avatar,
+  Image as AvatarImage,
+  Fallback as AvatarFallback,
+};

apps/publisher-dashboard/src/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+import CheckIcon from "@lucide/svelte/icons/check";
+import MinusIcon from "@lucide/svelte/icons/minus";
+import { Checkbox as CheckboxPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

apps/publisher-dashboard/src/lib/components/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+  Root,
+  //
+  Root as Checkbox,
+};

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable([]),
+  ...restProps
+}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import CheckIcon from "@lucide/svelte/icons/check";
+import MinusIcon from "@lucide/svelte/icons/minus";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+  children?: Snippet;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  sideOffset = 4,
+  portalProps,
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.ContentProps & {
+  portalProps?: WithoutChildrenOrChild<
+    ComponentProps<typeof DropdownMenuPortal>
+  >;
+} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  ...restProps
+}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  variant = "default",
+  ...restProps
+}: DropdownMenuPrimitive.ItemProps & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  ...restProps
+}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import CircleIcon from "@lucide/svelte/icons/circle";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn(
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		className
+	)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: DropdownMenuPrimitive.SubTriggerProps & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ms-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  ...restProps
+}: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+
+export {
+  CheckboxGroup,
+  CheckboxItem,
+  Content,
+  Portal,
+  Root as DropdownMenu,
+  CheckboxGroup as DropdownMenuCheckboxGroup,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Portal as DropdownMenuPortal,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Label as DropdownMenuLabel,
+  RadioGroup as DropdownMenuRadioGroup,
+  RadioItem as DropdownMenuRadioItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
+  SubContent as DropdownMenuSubContent,
+  SubTrigger as DropdownMenuSubTrigger,
+  Trigger as DropdownMenuTrigger,
+  GroupHeading as DropdownMenuGroupHeading,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+};

apps/publisher-dashboard/src/lib/components/ui/phone-number-input/index.ts

@@ -0,0 +1,7 @@
+import Root from "./phone-number-input.svelte";
+
+export {
+  Root,
+  //
+  Root as PhoneNumberInput,
+};

apps/publisher-dashboard/src/lib/components/ui/phone-number-input/phone-number-input.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+import type { HTMLInputAttributes } from "svelte/elements";
+import { AsYouType, type CountryCode } from "libphonenumber-js";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+type Props = WithElementRef<
+  Omit<HTMLInputAttributes, "type" | "value"> & {
+    value?: string;
+    defaultCountry?: CountryCode;
+  }
+>;
+
+let {
+  ref = $bindable(null),
+  value = $bindable(""),
+  defaultCountry = "US",
+  class: className,
+  "data-slot": dataSlot = "phone-input",
+  oninput,
+  ...restProps
+}: Props = $props();
+
+// Format initial value on mount
+let formattedValue = $state("");
+
+$effect(() => {
+  // Only format if value changed externally (not from our own input)
+  if (value && value !== formattedValue) {
+    const formatter = new AsYouType(defaultCountry);
+    formattedValue = formatter.input(value);
+    value = formattedValue;
+  } else if (!value) {
+    formattedValue = "";
+  }
+});
+
+/**
+ * Count the number of digit characters before a given position in a string.
+ */
+function countDigitsBefore(str: string, position: number): number {
+  let count = 0;
+  for (let i = 0; i < position && i < str.length; i++) {
+    if (/\d/.test(str[i])) {
+      count++;
+    }
+  }
+  return count;
+}
+
+/**
+ * Find the position in a string where a given number of digits have been seen.
+ */
+function findPositionAfterDigits(str: string, digitCount: number): number {
+  let count = 0;
+  for (let i = 0; i < str.length; i++) {
+    if (/\d/.test(str[i])) {
+      count++;
+      if (count === digitCount) {
+        return i + 1;
+      }
+    }
+  }
+  return str.length;
+}
+
+function handleInput(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const cursorPosition = input.selectionStart ?? 0;
+  const rawValue = input.value;
+
+  // Count digits before cursor in the raw input
+  const digitsBefore = countDigitsBefore(rawValue, cursorPosition);
+
+  // Format the input
+  const formatter = new AsYouType(defaultCountry);
+  const formatted = formatter.input(rawValue);
+
+  // Update state
+  formattedValue = formatted;
+  value = formatted;
+
+  // Calculate new cursor position: find where the same number of digits ends up
+  const newPosition = findPositionAfterDigits(formatted, digitsBefore);
+
+  // Set cursor position synchronously after updating the input
+  // We need to wait for Svelte to update the DOM
+  queueMicrotask(() => {
+    input.setSelectionRange(newPosition, newPosition);
+  });
+
+  // Call the original oninput if provided
+  if (oninput) {
+    oninput(e as Event & { currentTarget: HTMLInputElement });
+  }
+}
+</script>
+
+<input
+  bind:this={ref}
+  data-slot={dataSlot}
+  class={cn(
+    "border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    className
+  )}
+  type="tel"
+  value={formattedValue}
+  oninput={handleInput}
+  {...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/popover/index.ts

@@ -0,0 +1,19 @@
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
+import Content from "./popover-content.svelte";
+import Portal from "./popover-portal.svelte";
+import Trigger from "./popover-trigger.svelte";
+
+export {
+  Root,
+  Content,
+  Trigger,
+  Close,
+  Portal,
+  //
+  Root as Popover,
+  Content as PopoverContent,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose,
+  Portal as PopoverPortal,
+};

apps/publisher-dashboard/src/lib/components/ui/popover/popover-close.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps =
+  $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/popover/popover-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { Popover as PopoverPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+import PopoverPortal from "./popover-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  align = "center",
+  portalProps,
+  ...restProps
+}: PopoverPrimitive.ContentProps & {
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>

apps/publisher-dashboard/src/lib/components/ui/popover/popover-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+
+let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/popover/popover-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn("", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/popover/popover.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps =
+  $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/select/index.ts

@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Content from "./select-content.svelte";
+import Group from "./select-group.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Label from "./select-label.svelte";
+import Portal from "./select-portal.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import Separator from "./select-separator.svelte";
+import Trigger from "./select-trigger.svelte";
+
+export {
+  Root,
+  Group,
+  Label,
+  Item,
+  Content,
+  Trigger,
+  Separator,
+  ScrollDownButton,
+  ScrollUpButton,
+  GroupHeading,
+  Portal,
+  //
+  Root as Select,
+  Group as SelectGroup,
+  Label as SelectLabel,
+  Item as SelectItem,
+  Content as SelectContent,
+  Trigger as SelectTrigger,
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton,
+  GroupHeading as SelectGroupHeading,
+  Portal as SelectPortal,
+};

apps/publisher-dashboard/src/lib/components/ui/select/select-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "$lib/utils.js";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+import SelectPortal from "./select-portal.svelte";
+import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  portalProps,
+  children,
+  preventScroll = true,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ContentProps> & {
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>

apps/publisher-dashboard/src/lib/components/ui/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>

apps/publisher-dashboard/src/lib/components/ui/select/select-group.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps =
+  $props();
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/select/select-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import CheckIcon from "@lucide/svelte/icons/check";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  value,
+  label,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

apps/publisher-dashboard/src/lib/components/ui/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

apps/publisher-dashboard/src/lib/components/ui/select/select-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

apps/publisher-dashboard/src/lib/components/ui/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { Separator as SeparatorPrimitive } from "bits-ui";
+import { Separator } from "$lib/components/ui/separator/index.js";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/select/select-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  size = "default",
+  ...restProps
+}: WithoutChild<SelectPrimitive.TriggerProps> & {
+  size?: "sm" | "default";
+} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

apps/publisher-dashboard/src/lib/components/ui/select/select.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let {
+  open = $bindable(false),
+  value = $bindable(),
+  ...restProps
+}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/skeleton/index.ts

@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+  Root,
+  //
+  Root as Skeleton,
+};

apps/publisher-dashboard/src/lib/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-accent animate-pulse rounded-md", className)}
+	{...restProps}
+></div>

apps/publisher-dashboard/src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+  Root,
+  //
+  Root as Switch,
+};

apps/publisher-dashboard/src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { Switch as SwitchPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  checked = $bindable(false),
+  ...restProps
+}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>

apps/publisher-dashboard/src/lib/components/ui/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+  Root,
+  //
+  Root as Textarea,
+};

apps/publisher-dashboard/src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  class: className,
+  "data-slot": dataSlot = "textarea",
+  ...restProps
+}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

apps/publisher-dashboard/src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Content from "./tooltip-content.svelte";
+import Portal from "./tooltip-portal.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+
+export {
+  Root,
+  Trigger,
+  Content,
+  Provider,
+  Portal,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+  Provider as TooltipProvider,
+  Portal as TooltipPortal,
+};

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "$lib/utils.js";
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+import TooltipPortal from "./tooltip-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 0,
+  side = "top",
+  children,
+  arrowClasses,
+  portalProps,
+  ...restProps
+}: TooltipPrimitive.ContentProps & {
+  arrowClasses?: string;
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
+						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps =
+  $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps =
+  $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

apps/publisher-dashboard/src/routes/+page.svelte

@@ -1,20 +1,38 @@
 <script lang="ts">
+import { Loader2 } from "@lucide/svelte";
+import { createQuery } from "@tanstack/svelte-query";
+import { goto } from "$app/navigation";
+import { api } from "$lib/api/client";
+
+/**
+ * Root page - redirects to first org dashboard or org list
+ */
+
+const orgsQuery = createQuery(() => ({
+  queryKey: ["orgs"],
+  queryFn: () => api.orgs.list(),
+}));
+
+$effect(() => {
+  if (orgsQuery.error) {
+    // Not authenticated, redirect to login
+    goto(`/auth/login?redirect=${encodeURIComponent("/")}`);
+  } else if (orgsQuery.data) {
+    if (orgsQuery.data.length > 0) {
+      // Redirect to first org's dashboard
+      goto(`/dashboard/${orgsQuery.data[0].slug}`, { replaceState: true });
+    } else {
+      // No orgs, show org list (empty state)
+      goto("/dashboard", { replaceState: true });
+    }
+  }
+});
 </script>
 
 <svelte:head>
-	<title>Publisher Dashboard</title>
+  <title>Publisher Dashboard</title>
 </svelte:head>
 
-<div class="space-y-6">
+<div class="flex min-h-screen items-center justify-center">
-	<h1 class="text-3xl font-bold tracking-tight">Publisher Dashboard</h1>
+  <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
-	<p class="text-muted-foreground">Welcome to the Publisher Dashboard</p>
-
-	<nav class="flex gap-4">
-		<a
-			href="/settings"
-			class="text-primary underline-offset-4 hover:underline"
-		>
-			Settings
-		</a>
-	</nav>
 </div>

apps/publisher-dashboard/src/routes/account/+page.svelte

@@ -17,6 +17,7 @@ import {
 import { Input } from "$lib/components/ui/input";
 import { Label } from "$lib/components/ui/label";
 import { LoadingButton } from "$lib/components/ui/loading-button";
+import { PhoneNumberInput } from "$lib/components/ui/phone-number-input";
 import { Separator } from "$lib/components/ui/separator";
 import { cn } from "$lib/utils";
 import { validatePhone } from "$lib/utils/validation";
@@ -224,9 +225,8 @@ function getInitials(name: string | null | undefined): string {
 
             <div class="space-y-2">
               <Label for="phoneNumber">Phone number</Label>
-              <Input
+              <PhoneNumberInput
                 id="phoneNumber"
-                type="tel"
                 placeholder="+1 555 123 4567"
                 bind:value={phoneNumber}
                 onblur={handlePhoneBlur}

apps/publisher-dashboard/src/routes/account/devices/+page.svelte

@@ -28,12 +28,12 @@ const queryClient = useQueryClient();
 
 const devicesQuery = createQuery(() => ({
   queryKey: ["trustedDevices"],
-  queryFn: () => api.me.listTrustedDevices(),
+  queryFn: () => api.me.devices.listTrusted(),
 }));
 
 const currentDeviceQuery = createQuery(() => ({
   queryKey: ["deviceInfo"],
-  queryFn: () => api.me.getDeviceInfo(),
+  queryFn: () => api.me.devices.getInfo(),
 }));
 
 // Get current device fingerprint from comparison
@@ -106,7 +106,7 @@ async function handleRemoveTrust() {
 
   isRemoving = true;
   try {
-    await api.me.untrustDevice({ deviceId: selectedDeviceId });
+    await api.me.devices.untrust({ deviceId: selectedDeviceId });
     await queryClient.invalidateQueries({ queryKey: ["trustedDevices"] });
     toast.success("Device trust removed");
     confirmDialogOpen = false;
@@ -125,7 +125,7 @@ async function handleRemoveAllTrust() {
 
   isRemovingAll = true;
   try {
-    await api.me.revokeAllTrustedDevices();
+    await api.me.devices.revokeAll();
     await queryClient.invalidateQueries({ queryKey: ["trustedDevices"] });
     toast.success("All trusted devices removed");
     confirmAllDialogOpen = false;

apps/publisher-dashboard/src/routes/account/sessions/+page.svelte

@@ -30,7 +30,7 @@ const queryClient = useQueryClient();
 
 const sessionsQuery = createQuery(() => ({
   queryKey: ["sessions"],
-  queryFn: () => api.me.listSessions(),
+  queryFn: () => api.me.sessions.list(),
 }));
 
 let confirmDialogOpen = $state(false);
@@ -121,7 +121,7 @@ async function handleRevoke() {
 
   isRevoking = true;
   try {
-    await api.me.revokeSession({ sessionId: selectedSessionId });
+    await api.me.sessions.revoke({ sessionId: selectedSessionId });
     await queryClient.invalidateQueries({ queryKey: ["sessions"] });
     toast.success("Session revoked");
     confirmDialogOpen = false;
@@ -140,7 +140,7 @@ async function handleRevokeAll() {
 
   isRevokingAll = true;
   try {
-    await api.me.revokeAllSessions();
+    await api.me.sessions.revokeAll();
     await queryClient.invalidateQueries({ queryKey: ["sessions"] });
     toast.success("All other sessions revoked");
     confirmAllDialogOpen = false;

apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte

@@ -1,12 +1,5 @@
 <script lang="ts">
-import {
+import { AlertCircle, Building, Eye, Plus, Trash2 } from "@lucide/svelte";
-  AlertCircle,
-  Building,
-  Eye,
-  Loader2,
-  Plus,
-  Trash2,
-} from "@lucide/svelte";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
 import { toast } from "svelte-sonner";
 import { api } from "$lib/api/client.js";
@@ -19,6 +12,7 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 import {
   Table,
   TableBody,
@@ -89,11 +83,46 @@ async function executeConfirmAction() {
 <DashboardLayout title="Organizations">
   <div class="space-y-6">
     {#if orgsQuery.isPending}
-      <!-- Loading state -->
+      <!-- Loading skeleton -->
-      <div class="flex flex-col items-center justify-center py-16">
+      <div class="flex items-center justify-between">
-        <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+        <Skeleton class="h-7 w-40" />
-        <p class="mt-4 text-sm text-muted-foreground">Loading organizations...</p>
+        <Skeleton class="h-9 w-40" />
       </div>
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-base">
+            <Building class="h-4 w-4" />
+            <Skeleton class="h-5 w-32" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Slug</TableHead>
+                <TableHead>Display Name</TableHead>
+                <TableHead>Created At</TableHead>
+                <TableHead class="w-[120px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {#each Array(5) as _}
+                <TableRow>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-32" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell>
+                    <div class="flex items-center gap-1">
+                      <Skeleton class="h-8 w-8" />
+                      <Skeleton class="h-8 w-8" />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     {:else if orgsQuery.error}
       <!-- Error state -->
       <div class="flex flex-col items-center justify-center py-16">

apps/publisher-dashboard/src/routes/admin/users/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { AlertCircle, Check, Eye, Loader2, Users, X } from "@lucide/svelte";
+import { AlertCircle, Check, Eye, Users, X } from "@lucide/svelte";
 import { createQuery } from "@tanstack/svelte-query";
 import { api } from "$lib/api/client.js";
 import { SuperuserBadge } from "$lib/components/admin/index.js";
@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 import {
   Table,
   TableBody,
@@ -38,9 +39,39 @@ const usersQuery = createQuery(() => ({
 
 <DashboardLayout title="Users">
   {#if usersQuery.isPending}
-    <div class="flex flex-col items-center justify-center py-16">
+    <div class="space-y-6">
-      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+      <Card>
-      <p class="mt-4 text-sm text-muted-foreground">Loading users...</p>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-base">
+            <Users class="h-4 w-4" />
+            <Skeleton class="h-5 w-20" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Email</TableHead>
+                <TableHead>Display Name</TableHead>
+                <TableHead>Email Verified</TableHead>
+                <TableHead>Superuser</TableHead>
+                <TableHead class="w-[100px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {#each Array(5) as _}
+                <TableRow>
+                  <TableCell><Skeleton class="h-4 w-40" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-4" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-16" /></TableCell>
+                  <TableCell><Skeleton class="h-8 w-16" /></TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     </div>
   {:else if usersQuery.error}
     <div class="flex flex-col items-center justify-center py-16">

apps/publisher-dashboard/src/routes/admin/users/[email]/+page.svelte

@@ -25,6 +25,9 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Checkbox } from "$lib/components/ui/checkbox/index.js";
+import { Label } from "$lib/components/ui/label/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 
 /**
  * Admin user details page
@@ -154,9 +157,51 @@ async function handleConfirmEmail() {
   </div>
 
   {#if userDetailsQuery.isPending}
-    <div class="flex flex-col items-center justify-center py-16">
+    <div class="space-y-6">
-      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+      <!-- Header Section Skeleton -->
-      <p class="mt-4 text-sm text-muted-foreground">Loading user...</p>
+      <Card>
+        <CardContent class="pt-6">
+          <div class="flex items-center gap-4">
+            <Skeleton class="h-16 w-16 rounded-full" />
+            <div class="flex-1 space-y-2">
+              <Skeleton class="h-6 w-48" />
+              <Skeleton class="h-4 w-32" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Profile Info Skeleton -->
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-5 w-40" />
+          <Skeleton class="h-4 w-48" />
+        </CardHeader>
+        <CardContent>
+          <div class="grid gap-4 sm:grid-cols-2">
+            {#each Array(5) as _}
+              <div class="space-y-1">
+                <Skeleton class="h-4 w-20" />
+                <Skeleton class="h-5 w-32" />
+              </div>
+            {/each}
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Permissions Skeleton -->
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-5 w-24" />
+          <Skeleton class="h-4 w-36" />
+        </CardHeader>
+        <CardContent>
+          <div class="flex items-center gap-3">
+            <Skeleton class="h-4 w-4" />
+            <Skeleton class="h-4 w-40" />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   {:else if userDetailsQuery.error}
     <div class="flex flex-col items-center justify-center py-16">
@@ -256,16 +301,17 @@ async function handleConfirmEmail() {
               </AlertDescription>
             </Alert>
           {:else}
-            <label class="flex cursor-pointer items-center gap-3">
+            <div class="flex items-center gap-3">
-              <input
+              <Checkbox
-                type="checkbox"
+                id="superuser-checkbox"
                 checked={isSuperuser}
-                onchange={(e) => (isSuperuser = e.currentTarget.checked)}
+                onCheckedChange={(checked) => { isSuperuser = checked === true; }}
                 disabled={isViewingSelf || isSaving}
-                class="h-4 w-4 rounded border-input bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
-              <span class="text-sm font-medium leading-none">Grant superuser privileges</span>
+              <Label for="superuser-checkbox" class="cursor-pointer">
-            </label>
+                Grant superuser privileges
+              </Label>
+            </div>
           {/if}
         </CardContent>
         {#if !isViewingSelf}

apps/publisher-dashboard/src/routes/auth/trust-device/+page.svelte

@@ -15,7 +15,7 @@ import { LoadingButton } from "$lib/components/ui/loading-button";
 // TanStack Query v6 with Svelte 5: options passed as thunk, results accessed directly
 const deviceQuery = createQuery(() => ({
   queryKey: ["deviceInfo"],
-  queryFn: () => api.me.getDeviceInfo(),
+  queryFn: () => api.me.devices.getInfo(),
 }));
 
 // Parse user agent for suggested device name
@@ -50,7 +50,7 @@ async function handleTrust() {
   error = "";
 
   try {
-    await api.me.trustDevice({ name: deviceName.trim() });
+    await api.me.devices.trust({ name: deviceName.trim() });
     toast.success("Device trusted successfully!");
     goto("/performance");
   } catch (e) {

apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte

@@ -22,6 +22,12 @@ import {
 } from "$lib/components/ui/card";
 import { Input } from "$lib/components/ui/input";
 import { Label } from "$lib/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "$lib/components/ui/select";
 import {
   Table,
   TableBody,
@@ -284,16 +290,21 @@ const availableInviteRoles = $derived.by(() => {
               </div>
               <div class="w-full space-y-2 sm:w-32">
                 <Label for="invite-role">Role</Label>
-                <select
+                <Select
-                  id="invite-role"
+                  type="single"
-                  bind:value={inviteRole}
+                  value={inviteRole}
+                  onValueChange={(v) => { if (v) inviteRole = v as typeof inviteRole; }}
                   disabled={isInviting}
-                  class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                 >
-                  {#each availableInviteRoles as role}
+                  <SelectTrigger id="invite-role" class="w-full">
-                    <option value={role}>{role.charAt(0).toUpperCase() + role.slice(1)}</option>
+                    {inviteRole.charAt(0).toUpperCase() + inviteRole.slice(1)}
-                  {/each}
+                  </SelectTrigger>
-                </select>
+                  <SelectContent>
+                    {#each availableInviteRoles as role}
+                      <SelectItem value={role} label={role.charAt(0).toUpperCase() + role.slice(1)} />
+                    {/each}
+                  </SelectContent>
+                </Select>
               </div>
               <Button type="submit" disabled={isInviting || !inviteEmail.trim()}>
                 {#if isInviting}
@@ -398,15 +409,20 @@ const availableInviteRoles = $derived.by(() => {
                     </TableCell>
                     <TableCell>
                       {#if isOwner && !isCurrentUser}
-                        <select
+                        <Select
+                          type="single"
                           value={member.role}
-                          onchange={(e) => handleUpdateRole(member.userId, e.currentTarget.value as "owner" | "admin" | "member")}
+                          onValueChange={(v) => { if (v) handleUpdateRole(member.userId, v as "owner" | "admin" | "member"); }}
-                          class="h-7 rounded-md border border-input bg-transparent px-2 text-xs shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         >
-                          <option value="member">Member</option>
+                          <SelectTrigger size="sm" class="h-7 w-24 text-xs">
-                          <option value="admin">Admin</option>
+                            {member.role.charAt(0).toUpperCase() + member.role.slice(1)}
-                          <option value="owner">Owner</option>
+                          </SelectTrigger>
-                        </select>
+                          <SelectContent>
+                            <SelectItem value="member" label="Member" />
+                            <SelectItem value="admin" label="Admin" />
+                            <SelectItem value="owner" label="Owner" />
+                          </SelectContent>
+                        </Select>
                       {:else}
                         <RoleBadge role={member.role} />
                       {/if}